/* ==========================================================================
   Artist of the Year Nomination System — Base Stylesheet
   Restrained contemporary-art nonprofit aesthetic
   Inspired by contemporarysa.org / gallery editorial design
   ========================================================================== */

/* --------------------------------------------------------------------------
   Design tokens
   -------------------------------------------------------------------------- */
:root {
  /* Palette */
  --color-ground:     #ffffff;   /* white gallery wall */
  --color-surface:    #ffffff;   /* unbroken white canvas */
  --color-ink:        #000000;   /* contemporary's decisive black */
  --color-ink-muted:  #262626;   /* still legible at small sizes */
  --color-rule:       #000000;   /* graphic black rules */
  --color-accent:     #0004ff;   /* saturated gallery blue */
  --color-accent-dim: #0000c8;   /* active blue */

  /* Semantic */
  --color-success-bg:  #eef4f0;
  --color-success-fg:  #1e3a2d;
  --color-success-border: #9dc3b0;
  --color-info-bg:     #fdf8ef;
  --color-info-fg:     #4a3520;
  --color-info-border:  #dfc78a;
  --color-error-bg:    #fdf0ee;
  --color-error-fg:    #4a1210;
  --color-error-border:#e0998a;
  --color-warning-bg:  #fdf9ef;
  --color-warning-fg:  #4a3510;
  --color-warning-border:#dcc07f;

  /* Typography */
  --font-body:    -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --font-heading: Georgia, "Times New Roman", serif;

  /* Spacing (8px base unit) */
  --space-1:  0.5rem;   /* 8px  */
  --space-2:  1rem;     /* 16px */
  --space-3:  1.5rem;   /* 24px */
  --space-4:  2rem;     /* 32px */
  --space-5:  3rem;     /* 48px */
  --space-6:  4rem;     /* 64px */
  --space-7:  6rem;     /* 96px */

  /* Sizing */
  --input-height:    3rem;    /* 48px — large touch target */
  --btn-height:      3rem;    /* 48px — large touch target */
  --radius-sm:       2px;
  --radius-md:       4px;

  /* Layout */
  --max-prose:  36rem;   /* ~576px at 16px — readable measure */
  --max-content: 52rem;  /* ~832px — tablet-friendly */
  --max-wide:    72rem;  /* ~1152px */
}

/* --------------------------------------------------------------------------
   Reset & base
   -------------------------------------------------------------------------- */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  background-color: var(--color-ground);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.6;
  min-height: 100dvh;
}

/* --------------------------------------------------------------------------
   Scrollbar
   -------------------------------------------------------------------------- */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--color-ground); }
::-webkit-scrollbar-thumb { background: var(--color-rule); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--color-ink-muted); }

/* --------------------------------------------------------------------------
   Focus — obvious and accessible
   -------------------------------------------------------------------------- */
:focus-visible {
  outline: 2.5px solid var(--color-accent);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* --------------------------------------------------------------------------
   Typography
   -------------------------------------------------------------------------- */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  font-weight: 400;
  font-style: italic;
  line-height: 1.2;
  color: var(--color-ink);
  letter-spacing: -0.01em;
}

h1 { font-size: clamp(1.75rem, 4vw, 2.5rem); }
h2 { font-size: clamp(1.25rem, 3vw, 1.625rem); }
h3 { font-size: 1.125rem; }
h4 { font-size: 1rem; }

p { max-width: var(--max-prose); }

a {
  color: var(--color-accent);
  text-decoration: underline;
  text-underline-offset: 2px;
}
a:hover { color: var(--color-accent-dim); }

strong { font-weight: 600; }

/* --------------------------------------------------------------------------
   Page layout
   -------------------------------------------------------------------------- */
.page {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}

.page-content {
  flex: 1;
  width: 100%;
  max-width: var(--max-content);
  margin: 0 auto;
  padding: var(--space-5) var(--space-3);
}

/* Kiosk: wider, centered column for the nomination form */
.page-content--prose {
  max-width: var(--max-prose);
}

/* Admin: maxed out for table readability */
.page-content--wide {
  max-width: var(--max-wide);
}

/* --------------------------------------------------------------------------
   Header / Site identity
   -------------------------------------------------------------------------- */
.site-header {
  border-bottom: 1px solid var(--color-rule);
  background: var(--color-surface);
  padding: var(--space-3) var(--space-3);
}

.site-header__inner {
  max-width: var(--max-content);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
}

.site-header__title {
  font-family: var(--font-body);
  font-size: 0.9375rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-ink);
  text-decoration: none;
}
.site-header__title:hover { color: var(--color-accent); }

.site-header__nav {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.site-header__nav a {
  font-size: 0.875rem;
  color: var(--color-ink-muted);
  text-decoration: none;
}
.site-header__nav a:hover { color: var(--color-ink); }

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */
.site-footer {
  border-top: 1px solid var(--color-rule);
  padding: var(--space-3);
  text-align: center;
  font-size: 0.8125rem;
  color: var(--color-ink-muted);
}

/* --------------------------------------------------------------------------
   Kiosk header — no nav links, just identity
   -------------------------------------------------------------------------- */
.site-header--kiosk .site-header__nav { display: none; }

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  height: var(--btn-height);
  padding: 0 var(--space-3);
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  text-decoration: none;
  border: 1.5px solid transparent;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease,
              color 0.15s ease, box-shadow 0.15s ease;
  white-space: nowrap;
  user-select: none;
  -webkit-user-select: none;
}

.btn:focus-visible {
  outline: 2.5px solid var(--color-accent);
  outline-offset: 2px;
}

.btn--primary {
  background: var(--color-accent);
  color: #ffffff;
  border-color: var(--color-accent);
}
.btn--primary:hover {
  background: var(--color-accent-dim);
  border-color: var(--color-accent-dim);
  color: #ffffff;
}
.btn--primary:active { transform: translateY(1px); }

.btn--secondary {
  background: transparent;
  color: var(--color-ink);
  border-color: var(--color-rule);
}
.btn--secondary:hover {
  background: var(--color-rule);
  color: var(--color-ink);
}

.btn--ghost {
  background: transparent;
  color: var(--color-ink-muted);
  border-color: transparent;
}
.btn--ghost:hover {
  background: var(--color-rule);
  color: var(--color-ink);
}

.btn--danger {
  background: transparent;
  color: var(--color-error-fg);
  border-color: var(--color-error-border);
}
.btn--danger:hover {
  background: var(--color-error-bg);
  border-color: var(--color-error-border);
}

/* Full-width on mobile */
.btn--full { width: 100%; }

/* Size variants */
.btn--sm {
  height: 2.25rem;
  padding: 0 var(--space-2);
  font-size: 0.875rem;
}

/* --------------------------------------------------------------------------
   Form elements — generous touch targets, visible labels
   -------------------------------------------------------------------------- */
.form-field {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.form-field + .form-field { margin-top: var(--space-3); }

label,
.field-label {
  display: block;
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--color-ink);
  line-height: 1.4;
}

.field-hint {
  font-size: 0.8125rem;
  color: var(--color-ink-muted);
  margin-top: calc(var(--space-1) * 0.5);
}

.field-error,
.error-message {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.875rem;
  color: var(--color-error-fg);
  font-weight: 450;
}

input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
select,
textarea {
  display: block;
  width: 100%;
  height: var(--input-height);
  padding: 0 var(--space-2);
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--color-ink);
  background: var(--color-surface);
  border: 1.5px solid var(--color-rule);
  border-radius: var(--radius-md);
  appearance: none;
  -webkit-appearance: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
  /* ios: prevent zoom on focus */
  font-size: 16px;
}

input::placeholder { color: var(--color-ink-muted); opacity: 0.7; }

input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
select:focus,
textarea:focus {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px rgba(181, 69, 27, 0.12);
  outline: none;
}

input:invalid:not(:placeholder-shown) {
  border-color: var(--color-error-border);
}

select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%235a5a57' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--space-2) center;
  padding-right: 2.5rem;
  cursor: pointer;
}

/* Textarea */
textarea {
  height: auto;
  min-height: 6rem;
  padding: var(--space-2);
  resize: vertical;
  line-height: 1.6;
}

/* Search input: subtle left-icon padding */
input[type="search"] {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%235a5a57' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: var(--space-2) center;
  padding-left: 2.75rem;
}

/* Submitter identity and voluntary mailing-list consent */
.submitter-name-fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-2);
  margin-top: var(--space-3);
}

/* Grid siblings must not inherit the stacked-form spacing rule. */
.submitter-name-fields .form-field + .form-field { margin-top: 0; }

.consent-field {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: var(--space-1);
  align-items: center;
  margin-top: var(--space-3);
}

.consent-field input[type="checkbox"] {
  width: 1.25rem;
  height: 1.25rem;
  accent-color: var(--color-accent);
}

.consent-field .field-hint {
  grid-column: 2;
  margin-top: 0;
}

/* --------------------------------------------------------------------------
   Flash / alert messages
   -------------------------------------------------------------------------- */
.alert {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  font-size: 0.9375rem;
  line-height: 1.5;
}

.alert--success {
  background: var(--color-success-bg);
  color: var(--color-success-fg);
  border-color: var(--color-success-border);
}
.alert--info {
  background: var(--color-info-bg);
  color: var(--color-info-fg);
  border-color: var(--color-info-border);
}
.alert--error {
  background: var(--color-error-bg);
  color: var(--color-error-fg);
  border-color: var(--color-error-border);
}
.alert--warning {
  background: var(--color-warning-bg);
  color: var(--color-warning-fg);
  border-color: var(--color-warning-border);
}

/* Legacy compat: .flash still works on pages that haven't been updated */
.flash { padding: var(--space-2) var(--space-3); border-radius: var(--radius-md); margin-bottom: var(--space-3); }
.flash.success { background: var(--color-success-bg); color: var(--color-success-fg); border: 1px solid var(--color-success-border); }
.flash.info    { background: var(--color-info-bg);    color: var(--color-info-fg);    border: 1px solid var(--color-info-border); }
.flash.error   { background: var(--color-error-bg);   color: var(--color-error-fg);   border: 1px solid var(--color-error-border); }

/* --------------------------------------------------------------------------
   Tables — clean, accessible, responsive
   -------------------------------------------------------------------------- */
.table-wrapper {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--color-rule);
  border-radius: var(--radius-md);
}

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9375rem;
  background: var(--color-surface);
}

thead { background: var(--color-ground); }

th {
  text-align: left;
  font-weight: 500;
  font-size: 0.8125rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-ink-muted);
  padding: var(--space-2) var(--space-2);
  border-bottom: 1.5px solid var(--color-rule);
  white-space: nowrap;
}

td {
  padding: var(--space-2);
  border-bottom: 1px solid var(--color-rule);
  vertical-align: middle;
}

tr:last-child td { border-bottom: none; }
tbody tr:hover { background: rgba(0,0,0,0.02); }

/* Status pills */
.pill {
  display: inline-flex;
  align-items: center;
  padding: 0.15em 0.6em;
  border-radius: 100px;
  font-size: 0.8125rem;
  font-weight: 500;
  white-space: nowrap;
}
.pill--yes  { background: var(--color-success-bg); color: var(--color-success-fg); }
.pill--no   { background: var(--color-error-bg);   color: var(--color-error-fg);   }
.pill--maybe{ background: var(--color-info-bg);    color: var(--color-info-fg);    }

/* --------------------------------------------------------------------------
   Cards / panels
   -------------------------------------------------------------------------- */
.card {
  background: var(--color-surface);
  border: 1px solid var(--color-rule);
  border-radius: var(--radius-md);
  padding: var(--space-3);
}

/* --------------------------------------------------------------------------
   Form action bar — consistent bottom of forms
   -------------------------------------------------------------------------- */
.form-actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-4);
  flex-wrap: wrap;
}

/* --------------------------------------------------------------------------
   Admin layout helpers
   -------------------------------------------------------------------------- */
.admin-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--color-rule);
  margin-bottom: var(--space-3);
  flex-wrap: wrap;
}

.admin-bar__meta {
  font-size: 0.875rem;
  color: var(--color-ink-muted);
}

.admin-bar__meta strong { color: var(--color-ink); }

/* Filter bar */
.filter-bar {
  display: flex;
  align-items: flex-end;
  gap: var(--space-2);
  padding: var(--space-3) 0;
  flex-wrap: wrap;
}

.filter-bar__field {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  min-width: 14rem;
}

.filter-bar__field label {
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--color-ink-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.filter-bar .btn { align-self: flex-end; }

/* Empty state */
.empty-state {
  padding: var(--space-5) var(--space-3);
  text-align: center;
  color: var(--color-ink-muted);
  font-size: 0.9375rem;
}

/* --------------------------------------------------------------------------
   Review-queue actions — explicit decisions, never compressed mystery inputs
   -------------------------------------------------------------------------- */
.review-actions {
  min-width: 17rem;
  vertical-align: top;
}

.review-actions form {
  display: grid;
  gap: var(--space-2);
  justify-items: start;
}

.review-actions__match {
  margin: 0;
  font-size: 0.9375rem;
}

.review-actions__create .form-field {
  width: 100%;
  margin: 0;
}

.review-actions__create input {
  min-width: 15rem;
}

/* Legacy class retained for templates outside the review queue. */
.inline-form {
  display: flex;
  align-items: flex-end;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.inline-form .form-field { margin-top: 0; }

/* --------------------------------------------------------------------------
   Section headings
   -------------------------------------------------------------------------- */
.section { margin-top: var(--space-4); }
.section + .section { margin-top: var(--space-4); }

.section-heading {
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-ink-muted);
  margin-bottom: var(--space-2);
  padding-bottom: var(--space-1);
  border-bottom: 1px solid var(--color-rule);
}

/* --------------------------------------------------------------------------
   Utility
   -------------------------------------------------------------------------- */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.text-muted { color: var(--color-ink-muted); font-size: 0.875rem; }
.text-small { font-size: 0.875rem; }

/* --------------------------------------------------------------------------
   Responsive — tablet breakpoint and up
   -------------------------------------------------------------------------- */
@media (min-width: 48rem) {
  /* Slight breathing room on wider screens */
  .page-content { padding: var(--space-6) var(--space-4); }

  /* Admin tables can go wider */
  .page-content--wide { max-width: var(--max-wide); }

  /* Inline review forms sit horizontally */
  .inline-form { flex-wrap: nowrap; }

  /* Filter bar stays horizontal */
  .filter-bar { flex-wrap: nowrap; }
}

@media (max-width: 47.9375rem) {
  /* Mobile: filter bar stacks naturally */
  .filter-bar { flex-direction: column; align-items: stretch; }
  .filter-bar__field { min-width: unset; }

  /* Form actions: full-width stack on small screens */
  .form-actions { flex-direction: column; align-items: stretch; }
  .form-actions .btn { width: 100%; }

  /* Public kiosk names stack in narrow portrait viewports */
  .submitter-name-fields { grid-template-columns: 1fr; }

  /* Admin bar stacks */
  .admin-bar { flex-direction: column; align-items: flex-start; }
}