/* =========================================================================
   WhatToGive shared stylesheet (redesign, Nov 2026)

   Implements the design tokens and shared components of the redesign brief
   (notes in the WTG/Redesign folder). One stylesheet for every page.

   Sections: 0 Fonts  1 Tokens  2 Base  3 Layout  4 Header & footer
             5 Buttons  6 Forms  7 Cards & panels  8 Pills & chips  9 Rows
             10 Home page  11 Logged-in pages  12 Utilities
             13 Legacy markup (pages not yet rebuilt)  14 Dialogs  15 Print

   Fonts are self-hosted (pages/fonts/, SIL OFL): no third-party requests.
   ========================================================================= */

/* 0. Fonts --------------------------------------------------------------- */
@font-face {
  font-family: 'Bricolage Grotesque'; font-style: normal; font-weight: 600 700; font-display: swap;
  src: url(/fonts/bricolage-grotesque-normal-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Bricolage Grotesque'; font-style: normal; font-weight: 600 700; font-display: swap;
  src: url(/fonts/bricolage-grotesque-normal-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'DM Sans'; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url(/fonts/dm-sans-normal-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'DM Sans'; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url(/fonts/dm-sans-normal-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'DM Sans'; font-style: italic; font-weight: 400; font-display: swap;
  src: url(/fonts/dm-sans-italic-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'DM Sans'; font-style: italic; font-weight: 400; font-display: swap;
  src: url(/fonts/dm-sans-italic-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* 1. Tokens -------------------------------------------------------------- */
:root {
  --ink: #1B2340;
  --ink-2: #3E4560;
  --ink-3: #4A5168;
  --accent: #C8432F;
  --accent-soft: #FFD8C9;
  --tint: #FFF3EE;
  --surface: #FFFFFF;
  --page: #F7F8FB;
  --muted: #F1F2F6;
  --line: #ECEEF4;
  --field: #CBD0DE;
  --success-bg: #E6F4EA;
  --success: #1E6B34;
  --danger: #A3301F;
  --danger-line: #E3B8AF;
  --danger-bg: #FBEDEA;
  --on-dark-2: #D3D7E4;

  /* Thumbnail and avatar tints */
  --tint-blue: #EAF0FB;
  --tint-peach: #FBEFE6;
  --tint-green: #EEF6F1;
  --tint-lilac: #F4EEF8;

  --font-display: 'Bricolage Grotesque', 'DM Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-body: 'DM Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --r-xl: 22px;  /* large cards */
  --r-lg: 18px;  /* small cards, banners */
  --r-md: 16px;  /* inset panels */
  --r-hero: 12px;/* hero inputs and buttons */
  --r-sm: 10px;  /* standard inputs and buttons */
  --r-pill: 999px;

  --shadow-lift: 0 18px 40px rgba(27, 35, 64, 0.10);
  --tap: 44px;
}

/* 2. Base ---------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.5;
  color: var(--ink);
  background: var(--surface);
  overflow-wrap: break-word;
}
body.app { background: var(--page); min-height: 100vh; display: flex; flex-direction: column; }
body.app > main { flex: 1 0 auto; width: 100%; }

h1, h2, h3, h4 { margin: 0; line-height: 1.15; }
p, ul, ol, dl, fieldset { margin: 0; }
img { max-width: 100%; height: auto; }

a { color: var(--ink); }
a:hover { color: var(--accent); }

:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
  border-radius: 4px;
}

.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;
}
.skip-link { position: absolute; left: 12px; top: -60px; z-index: 100; padding: 10px 16px; background: var(--ink); color: #FFFFFF; border-radius: var(--r-sm); font-weight: 700; }
.skip-link:focus { top: 12px; color: #FFFFFF; }

.display {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.02em;
}

.page-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(30px, 5vw, 40px);
  line-height: 1.1;
  letter-spacing: -0.02em;
}

.lead { color: var(--ink-2); max-width: 640px; }
.hint { font-size: 14px; color: var(--ink-3); }
.meta { font-size: 15px; color: var(--ink-3); }
.eyebrow {
  font-size: 14px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.06em; color: var(--ink-3);
}
.prose { display: flex; flex-direction: column; gap: 12px; color: var(--ink-2); }
.prose h2, .prose h3 { color: var(--ink); margin-top: 8px; }
.prose ul, .prose ol { padding-left: 22px; display: flex; flex-direction: column; gap: 6px; }

.icon { flex: none; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; vertical-align: middle; }
.icon--accent { stroke: var(--accent); }

/* 3. Layout -------------------------------------------------------------- */
.container { max-width: 1280px; margin: 0 auto; padding: 0 24px; }
.container--home { max-width: 1200px; }
.container--narrow { max-width: 760px; }

.page { padding-top: 28px; padding-bottom: 56px; display: flex; flex-direction: column; gap: 24px; }

.stack { display: flex; flex-direction: column; gap: var(--gap, 16px); }
.cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--gap, 10px); }
.spread { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; }

/* Sidebar + main that stacks on phones */
.layout { display: flex; flex-wrap: wrap; gap: 24px; align-items: flex-start; }
.layout__side { flex: 1 1 260px; max-width: 100%; display: flex; flex-direction: column; gap: 16px; }
.layout__main { flex: 999 1 640px; min-width: 0; display: flex; flex-direction: column; gap: 20px; }
.layout__aside { flex: 1 1 300px; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
@media (min-width: 960px) {
  .layout__side { flex: 0 0 280px; }
  .layout__aside { flex: 0 1 340px; }
}

.field-row { display: flex; flex-wrap: wrap; gap: 16px; align-items: flex-end; }
.field-row > .field { flex: 1 1 220px; min-width: 0; }
.field-row > .field--narrow { flex: 0 0 96px; }
.field-row > .field--mid { flex: 0 1 180px; }

/* 4. Header & footer ----------------------------------------------------- */
.logo { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); }
.logo:hover { color: var(--ink); }
.logo__word { font-family: var(--font-display); font-weight: 700; font-size: 24px; letter-spacing: -0.02em; }

/* Logged-out header */
.public-header { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; padding-top: 18px; padding-bottom: 18px; }
.public-nav { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 24px; font-weight: 500; }
.public-nav > a:not(.btn) { text-decoration: none; }
.site-bar { background: var(--surface); border-bottom: 1px solid var(--line); }

/* Logged-in header */
.app-header { background: var(--surface); border-bottom: 1px solid var(--line); }
.utility-bar { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px 20px; padding-top: 8px; padding-bottom: 8px; font-size: 14px; color: var(--ink-3); }
.utility-bar a { text-decoration: none; color: var(--ink-3); }
.utility-bar a:hover { color: var(--accent); }
.utility-bar strong, .utility-bar a[aria-current="page"] { color: var(--ink); font-weight: 700; }
.utility-bar .logout { font-weight: 700; color: var(--ink); }
.app-header__main { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 32px; padding-top: 12px; }
.app-header__main .logo { padding-bottom: 14px; }

.main-nav { display: flex; flex-wrap: wrap; gap: 4px 6px; font-weight: 500; }
.main-nav a {
  text-decoration: none; min-height: var(--tap); display: inline-flex; align-items: center;
  padding: 10px 14px 12px; border-bottom: 3px solid transparent;
}
.main-nav a[aria-current="page"] { border-bottom-color: var(--accent); font-weight: 700; }

@media (max-width: 720px) {
  .utility-bar { justify-content: flex-start; gap: 2px 16px; }
  .app-header__main { padding-top: 4px; }
  .app-header__main .logo { padding-bottom: 4px; }
  .main-nav { gap: 0; margin: 0 -10px; }
  .main-nav a { padding: 8px 10px 10px; }
}

/* "New look" announcement strip above the header (markup/header.php) */
.newlook { background: var(--ink); color: #FFFFFF; font-size: 15px; }
.newlook__inner { display: flex; align-items: center; justify-content: center; gap: 12px; padding-top: 10px; padding-bottom: 10px; }
.newlook p { margin: 0; text-align: center; }
.newlook .icon { color: var(--accent-soft); vertical-align: -3px; margin-right: 4px; }
.newlook strong { font-weight: 700; margin-right: 4px; }
.newlook__close {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border: 0; border-radius: var(--r-pill);
  background: transparent; color: #FFFFFF; cursor: pointer;
}
.newlook__close .icon { color: #FFFFFF; margin: 0; }
.newlook__close:hover, .newlook__close:focus-visible { background: rgba(255, 255, 255, 0.14); }
@media (max-width: 720px) { .newlook { font-size: 14px; } .newlook__inner { justify-content: space-between; } .newlook p { text-align: left; } }

/* Site notices (unconfirmed email etc.) under the header */
.site-notice { background: var(--tint); border-bottom: 1px solid var(--line); }
.site-notice .container { padding-top: 14px; padding-bottom: 14px; display: flex; flex-direction: column; gap: 6px; }

.site-footer { border-top: 1px solid var(--line); background: var(--surface); }
.site-footer__inner { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px 32px; padding-top: 28px; padding-bottom: 36px; font-size: 15px; color: var(--ink-3); }
.site-footer__legal { display: flex; flex-direction: column; gap: 4px; }
.site-footer nav { display: flex; flex-wrap: wrap; gap: 8px 24px; align-items: flex-start; }
.site-footer nav a { color: var(--ink-3); text-decoration: none; min-height: 32px; display: inline-flex; align-items: center; }
.site-footer nav a:hover { color: var(--accent); }

/* "Start your own list" band shown to visitors above the footer */
.signup-band { background: var(--tint); }
.signup-band__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px 40px; padding-top: 32px; padding-bottom: 32px; }
.signup-band h2 { font-family: var(--font-display); font-size: clamp(24px, 3.4vw, 30px); letter-spacing: -0.02em; margin-bottom: 4px; }
.signup-band form { flex: 1 1 380px; max-width: 520px; }

/* 5. Buttons ------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: var(--tap); padding: 0 18px;
  font: inherit; font-size: 16px; font-weight: 700; line-height: 1.2;
  border: 1.5px solid transparent; border-radius: var(--r-sm);
  text-decoration: none; cursor: pointer; white-space: nowrap;
}
.btn--primary { background: var(--accent); color: #FFFFFF; }
.btn--primary:hover { color: #FFFFFF; filter: brightness(0.94); }
.btn--dark { background: var(--ink); color: #FFFFFF; }
.btn--dark:hover { color: #FFFFFF; }
.btn--soft { background: var(--accent-soft); color: var(--ink); }
.btn--secondary { background: var(--surface); color: var(--ink); border-color: var(--field); font-weight: 500; }
.btn--secondary.btn--strong { font-weight: 700; }
.btn--danger { background: var(--surface); color: var(--danger); border-color: var(--danger-line); font-weight: 500; }
.btn--danger-text { background: transparent; color: var(--danger); font-weight: 500; }
.btn--ghost-dark { background: transparent; color: #FFFFFF; border-color: #4A5476; font-weight: 500; }
.btn--pill { border-radius: var(--r-pill); }
.btn--lg { min-height: 54px; padding: 0 26px; font-size: 17px; border-radius: var(--r-hero); }
.btn--sm { min-height: 40px; padding: 0 14px; font-size: 15px; }
.btn--block { width: 100%; }
.btn:hover:not(.btn--primary):not(.btn--dark) { color: inherit; border-color: var(--ink-3); }
.btn--ghost-dark:hover { color: #FFFFFF !important; border-color: #FFFFFF !important; }
.btn--danger:hover, .btn--danger-text:hover { color: var(--danger) !important; }
.btn[disabled], .btn[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; }

.btn-icon {
  width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center;
  padding: 0; border: 0; border-radius: var(--r-sm); background: transparent; color: var(--ink); cursor: pointer; text-decoration: none;
}
.btn-icon:hover { background: var(--muted); color: var(--ink); }
.btn-icon--danger, .btn-icon--danger:hover { color: var(--danger); }

.link-btn { background: none; border: 0; padding: 0; font: inherit; color: var(--ink); text-decoration: underline; cursor: pointer; }
.text-link { font-weight: 700; color: var(--ink); }

/* 6. Forms --------------------------------------------------------------- */
.field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.label { font-weight: 700; font-size: 15px; }
.label .optional { font-weight: 500; color: var(--ink-3); }

.input, .select, .textarea {
  width: 100%; min-height: var(--tap); padding: 0 14px;
  font: inherit; color: var(--ink); background: var(--surface);
  border: 1.5px solid var(--field); border-radius: var(--r-sm);
}
.select { padding: 0 12px; }
.textarea { padding: 12px 14px; resize: vertical; min-height: 96px; }
.input--lg { min-height: 54px; padding: 0 18px; font-size: 17px; border-radius: var(--r-hero); }
.input--title { min-height: 48px; font-size: 18px; font-weight: 700; }
.input--auto { width: auto; }
.input:focus, .select:focus, .textarea:focus { border-color: var(--ink-3); }

.input-group { display: flex; flex-wrap: wrap; gap: 10px; }
.input-group > .input { flex: 1 1 240px; min-width: 0; width: auto; }

/* Joined name + ending field (domains) */
.joined { display: flex; flex-wrap: wrap; align-items: stretch; border: 1.5px solid var(--field); border-radius: var(--r-hero); overflow: hidden; background: var(--surface); }
.joined .input { flex: 1 1 140px; width: auto; border: 0; border-radius: 0; min-height: 48px; }
.joined .select { flex: 1 0 auto; width: auto; border: 0; border-left: 1.5px solid var(--field); border-radius: 0; background: var(--page); min-height: 48px; }

.check { display: flex; align-items: center; gap: 10px; min-height: 40px; font-size: 15px; }
.check--top { align-items: flex-start; }
.check--top input { margin-top: 3px; }
.check input, .tick, input[type="checkbox"].tick, input[type="radio"].tick { width: 18px; height: 18px; flex: none; accent-color: var(--accent); }
.tick--danger { accent-color: var(--danger); }
.tick-cell { width: var(--tap); height: var(--tap); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }

.fieldset { border: 0; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.fieldset legend { padding: 0; margin-bottom: 6px; font-weight: 700; }

.form-error { color: var(--danger); font-weight: 700; font-size: 15px; }
.field--error .input, .field--error .select, .field--error .textarea { border-color: var(--danger); }

/* 7. Cards & panels ------------------------------------------------------ */
.card { background: var(--surface); border-radius: var(--r-xl); padding: 26px; display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.card--tight { padding: 18px; gap: 10px; border-radius: var(--r-lg); }
.card--flush { padding: 0; gap: 0; overflow: hidden; }
.card--tint { background: var(--tint); }
.card--line { border: 1px solid var(--line); }
.card__title { font-size: 22px; }
.card__title--sm { font-size: 18px; }
.card__head { padding: 22px 24px 16px; }
@media (max-width: 520px) {
  .card { padding: 20px 18px; }
  .card--flush { padding: 0; }
  .card__head { padding: 18px 18px 12px; }
}

.panel { background: var(--page); border-radius: var(--r-md); padding: 18px; display: flex; flex-direction: column; gap: 12px; }
.panel--dashed { background: transparent; border: 1.5px dashed var(--field); }
.panel--line { background: transparent; border: 1px solid var(--line); }
.panel--tint { background: var(--tint); }

.banner { border-radius: var(--r-lg); padding: 16px 20px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.banner--success { background: var(--success-bg); color: var(--success); }
.banner--success .btn { background: var(--surface); color: var(--success); }
.banner--info { background: var(--tint); }
.banner--error { background: var(--danger-bg); color: var(--danger); border: 1px solid var(--danger-line); }
.banner--error a { color: var(--danger); }

.savebar { background: var(--ink); color: #FFFFFF; border-radius: var(--r-lg); padding: 16px 20px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.savebar__note { font-size: 15px; color: var(--on-dark-2); }
.savebar .btn--primary { background: var(--accent-soft); color: var(--ink); }
.actionbar { background: var(--surface); border-radius: var(--r-lg); padding: 14px 20px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }

.side-menu { background: var(--surface); border-radius: var(--r-lg); padding: 12px; display: flex; flex-direction: column; gap: 2px; font-size: 15px; }
.side-menu__title { padding: 6px 12px 8px; font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-3); }
.side-menu a, .side-menu button { text-decoration: none; min-height: 40px; padding: 0 12px; border-radius: var(--r-sm); display: flex; align-items: center; gap: 10px; background: none; border: 0; font: inherit; color: var(--ink); cursor: pointer; text-align: left; width: 100%; }
.side-menu a:hover, .side-menu button:hover { background: var(--page); }
.side-menu a[aria-current="true"], .side-menu a[aria-current="page"] { background: var(--tint); font-weight: 700; }
.side-menu .icon { color: var(--accent); }
.side-menu .danger, .side-menu .danger .icon { color: var(--danger); }
.side-menu hr { border: 0; height: 1px; background: var(--line); margin: 6px 0; }

/* 8. Pills & chips ------------------------------------------------------- */
.pill { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: var(--r-pill); font-size: 13px; font-weight: 700; white-space: nowrap; }
.pill--success { background: var(--success-bg); color: var(--success); }
.pill--muted { background: var(--muted); color: var(--ink-2); font-weight: 500; }
.pill--tint { background: var(--tint); color: var(--ink); }
button.pill, a.pill { border: 0; font: inherit; font-size: 14px; font-weight: 700; min-height: 36px; padding: 0 12px; cursor: pointer; text-decoration: none; }
.pill--lg { min-height: 36px; padding: 0 12px; font-size: 14px; }

.chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: var(--r-pill); background: var(--muted); font-size: 14px; }

.count { display: inline-block; min-width: 36px; padding: 2px 10px; border-radius: var(--r-pill); font-weight: 700; font-size: 15px; text-align: center; background: var(--success-bg); color: var(--success); }
.count--zero { background: var(--muted); color: var(--ink-3); }

.tab-pill {
  display: inline-flex; align-items: center; gap: 8px; min-height: var(--tap); padding: 0 16px;
  border-radius: var(--r-pill); background: var(--surface); border: 1.5px solid var(--field);
  text-decoration: none; font-weight: 500; font: inherit; cursor: pointer; color: var(--ink);
}
.tab-pill .n { color: var(--ink-3); }
.tab-pill[aria-current="page"] { background: var(--ink); border-color: var(--ink); color: #FFFFFF; font-weight: 700; }
.tab-pill[aria-current="page"] .n { color: var(--on-dark-2); font-weight: 500; }
.tab-pill--new { border-style: dashed; color: var(--ink-2); }

.avatar { width: 40px; height: 40px; flex: none; border-radius: var(--r-pill); display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: 15px; background: var(--tint-blue); }
.avatar--peach { background: var(--tint-peach); }
.avatar--green { background: var(--tint-green); }
.avatar--lilac { background: var(--tint-lilac); }

.thumb { width: 60px; height: 60px; flex: none; border-radius: 12px; background: var(--muted); object-fit: cover; display: inline-flex; align-items: center; justify-content: center; color: #8A90A6; overflow: hidden; }
.thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* 9. Rows ---------------------------------------------------------------- */
.rows__head, .row { display: flex; gap: 10px 16px; padding: 14px 24px; }
.rows__head { padding-top: 10px; padding-bottom: 10px; align-items: flex-end; font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-3); }
.row { flex-wrap: wrap; align-items: center; border-top: 1px solid var(--line); }
.row--muted { background: var(--page); }
.rows__foot { padding: 16px 24px; border-top: 1px solid var(--line); }
.rows__foot--grey { background: var(--page); }
.col-grow { flex: 1 1 240px; min-width: 0; }
.col-center { text-align: center; justify-content: center; }
.col-end { justify-content: flex-end; text-align: right; }
.actions { display: flex; align-items: center; justify-content: flex-end; gap: 4px; }

@media (max-width: 720px) {
  .rows__head { display: none; }
  .rows__head + .row { border-top: 0; }
  .rows__head, .row, .rows__foot { padding-left: 16px; padding-right: 16px; }
}

/* 10. Home page ---------------------------------------------------------- */
.hero { background: var(--tint); }
.hero__inner { display: flex; flex-wrap: wrap; gap: 56px; align-items: center; padding-top: 72px; padding-bottom: 88px; }
.hero__copy { flex: 1 1 480px; min-width: 0; display: flex; flex-direction: column; gap: 22px; }
.hero__art { flex: 1 1 400px; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.hero__badge { align-self: flex-start; padding: 6px 14px; background: var(--surface); border-radius: var(--r-pill); font-size: 14px; font-weight: 500; color: var(--ink-3); }
.hero h1 { font-family: var(--font-display); font-weight: 700; font-size: clamp(40px, 7vw, 62px); line-height: 1.02; letter-spacing: -0.03em; }
.hero__sub { font-size: 20px; color: var(--ink-2); max-width: 540px; }
.hero__form { max-width: 560px; }
.stats { font-size: 15px; color: var(--ink-3); margin-top: 8px; }
.stats strong { color: var(--ink); }
@media (max-width: 720px) {
  .hero__inner { gap: 36px; padding-top: 36px; padding-bottom: 48px; }
  .hero__sub { font-size: 18px; }
}

.example-list { background: var(--surface); border-radius: var(--r-xl); box-shadow: var(--shadow-lift); padding: 26px; display: flex; flex-direction: column; gap: 16px; }
.example-list h2 { font-family: var(--font-display); font-size: 24px; letter-spacing: -0.01em; }
.example-item { display: flex; align-items: center; gap: 14px; padding: 12px; border: 1px solid var(--line); border-radius: 14px; }
.example-item .thumb { width: 52px; height: 52px; border-radius: 10px; }
.example-item__name { font-weight: 700; }
.example-item__where { font-size: 14px; color: var(--ink-3); }
.example-no { padding: 14px 16px; background: var(--page); border-radius: 14px; font-size: 15px; color: var(--ink-2); }
.example-no strong { display: block; color: var(--ink); margin-bottom: 4px; }
.toast { align-self: flex-end; display: flex; align-items: center; gap: 10px; background: var(--ink); color: #FFFFFF; padding: 12px 16px; border-radius: 14px; font-size: 15px; max-width: 360px; }

.find-band { background: var(--ink); color: #FFFFFF; }
.find-band__inner { display: flex; flex-wrap: wrap; gap: 24px 48px; align-items: center; justify-content: space-between; padding-top: 56px; padding-bottom: 56px; }
.find-band h2 { font-family: var(--font-display); font-size: clamp(28px, 4vw, 36px); letter-spacing: -0.02em; margin-bottom: 6px; }
.find-band p { color: var(--on-dark-2); }
.find-band .input { border: 0; }
.find-band .check { color: var(--on-dark-2); min-height: var(--tap); }
.find-band form { flex: 1 1 420px; max-width: 620px; }

.section { padding-top: 88px; padding-bottom: 40px; }
.section--how { padding-top: 56px; padding-bottom: 88px; }
.section__title { font-family: var(--font-display); font-weight: 700; font-size: clamp(32px, 5vw, 42px); letter-spacing: -0.02em; margin-bottom: 10px; }
.section__lead { font-size: 19px; color: var(--ink-2); max-width: 640px; margin-bottom: 40px; }
@media (max-width: 720px) {
  .section { padding-top: 56px; }
  .section--how { padding-top: 32px; padding-bottom: 56px; }
}

.features { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: 20px; }
.feature { padding: 26px; border: 1px solid var(--line); border-radius: var(--r-lg); display: flex; flex-direction: column; gap: 10px; }
.feature h3 { font-size: 20px; }
.feature p { color: var(--ink-2); }

.steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); gap: 32px; list-style: none; padding: 0; margin-top: 36px; }
.steps li { display: flex; flex-direction: column; gap: 10px; }
.steps__n { width: 44px; height: 44px; border-radius: var(--r-pill); background: var(--tint); font-weight: 700; font-size: 18px; display: flex; align-items: center; justify-content: center; }
.steps h3 { font-size: 21px; }
.steps p { color: var(--ink-2); }
.occasions { margin-top: 44px; }
.occasions a { text-decoration: none; min-height: var(--tap); display: inline-flex; align-items: center; padding: 0 16px; border-radius: var(--r-pill); background: var(--muted); }

.showcase { background: var(--page); }
.showcase__inner { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr)); gap: 24px; padding-top: 80px; padding-bottom: 80px; }
.showcase .card { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 24px; }
.gift-photo { flex: 0 0 160px; height: 160px; border-radius: var(--r-md); background: var(--tint-peach); object-fit: cover; display: flex; align-items: center; justify-content: center; }
.quote { font-family: var(--font-display); font-size: 26px; line-height: 1.25; }

.cta { display: flex; flex-wrap: wrap; gap: 24px; align-items: center; justify-content: space-between; padding-top: 88px; padding-bottom: 88px; }

/* Login dialog on the home page (a <dialog>, falls back to /list/_manage/) */
.login-dialog { border: 0; border-radius: var(--r-xl); padding: 0; width: min(440px, calc(100% - 32px)); box-shadow: var(--shadow-lift); color: var(--ink); }
.login-dialog::backdrop { background: rgba(27, 35, 64, 0.45); }
.login-dialog .card { padding: 28px; }
.picture-dialog { width: min(680px, calc(100% - 32px)); }
/* "Choose picture" on the Add / Edit item page: the pictures on the linked page */
.picture-choices { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 12px; max-height: 60vh; overflow-y: auto; }
.picture-choice { aspect-ratio: 1; padding: 8px; border: 1.5px solid var(--line); border-radius: var(--r-md); background: var(--surface); cursor: pointer; display: flex; align-items: center; justify-content: center; }
.picture-choice img { max-width: 100%; max-height: 100%; object-fit: contain; }
.picture-choice:hover, .picture-choice:focus-visible { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); outline: none; }

/* 11. Logged-in pages ---------------------------------------------------- */
.page-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 24px; }
.page-head .lead { margin-top: 8px; }

.list-header { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 20px; }
.list-header__text { flex: 1 1 320px; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.profile-photo { position: relative; flex: none; }
.profile-photo img, .profile-photo__placeholder { width: 96px; height: 96px; border-radius: var(--r-pill); object-fit: cover; background: #FBE1D6; display: flex; align-items: center; justify-content: center; color: var(--accent); }
.profile-photo .btn-icon { position: absolute; right: -4px; bottom: -4px; width: 36px; height: 36px; border-radius: var(--r-pill); background: var(--surface); border: 2px solid var(--tint); }
.list-header h1 { font-family: var(--font-display); font-size: clamp(28px, 4vw, 36px); line-height: 1.1; letter-spacing: -0.02em; }
.list-header__msg { font-size: 18px; color: var(--ink-2); }
.edit-link { min-height: 36px; padding: 0 12px; font: inherit; font-size: 14px; font-weight: 500; border: 1.5px solid #E7C9BC; border-radius: var(--r-pill); background: var(--surface); color: var(--ink); cursor: pointer; display: inline-flex; align-items: center; text-decoration: none; }

.item-name { font-weight: 700; font-size: 17px; text-decoration: none; }
.item-note { font-size: 14px; color: var(--ink-3); }
.prio { width: 64px; min-height: 40px; padding: 0 8px; font-weight: 700; }

.stats-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 0; }
.stats-grid dt { font-size: 13px; color: var(--ink-3); }
.stats-grid dd { margin: 0; font-weight: 700; }
.stats-grid dd.big { font-size: 20px; }

.coming-up { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 14px 24px; padding: 22px 24px; }
.date-chip { text-decoration: none; display: inline-flex; align-items: center; gap: 10px; min-height: var(--tap); padding: 6px 14px 6px 6px; background: var(--surface); border-radius: var(--r-pill); font-size: 15px; }
.date-chip__date { min-width: 54px; padding: 4px 8px; border-radius: var(--r-pill); background: var(--ink); color: #FFFFFF; font-size: 13px; font-weight: 700; text-align: center; }

.meter { display: flex; gap: 4px; }
.meter span { width: 22px; height: 8px; border-radius: 4px; background: #E3E6EE; }
.meter span.on { background: var(--accent); }

.domain-icon { width: 40px; height: 40px; flex: none; border-radius: 12px; background: var(--tint); display: inline-flex; align-items: center; justify-content: center; }
.domain-name { font-weight: 700; font-size: 17px; text-decoration: none; overflow-wrap: anywhere; }
.domain-name span { font-weight: 500; color: var(--ink-3); }

.examples { padding: 14px; background: var(--page); border-radius: 14px; display: flex; flex-direction: column; gap: 4px; font-size: 15px; color: var(--ink-2); }
.examples strong { color: var(--ink); }

.picture-preview { height: 220px; border-radius: var(--r-md); background: var(--tint-peach); object-fit: contain; width: 100%; display: flex; align-items: center; justify-content: center; color: var(--ink-3); }
.turnstile-slot { width: 300px; max-width: 100%; min-height: 65px; }

.bullets { padding-left: 20px; display: flex; flex-direction: column; gap: 6px; color: var(--ink-2); font-size: 15px; }

.comment { display: flex; gap: 14px; padding: 14px 0; border-top: 1px solid var(--line); }
.comment:first-child { border-top: 0; }
.comment__meta { font-size: 14px; color: var(--ink-3); }

.empty { padding: 28px 24px; text-align: center; color: var(--ink-3); display: flex; flex-direction: column; align-items: center; gap: 10px; }

/* Guest view of a list */
.guest-head { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 20px; }
.promised-row { background: var(--page); }
.promised-row .item-name { color: var(--ink-3); }

/* Event page */
.event-facts { display: flex; flex-wrap: wrap; gap: 12px 28px; color: var(--ink-2); }
.event-facts > div { display: flex; align-items: center; gap: 8px; }
.event-facts .icon { color: var(--accent); }
.event-body { color: var(--ink-2); }
.event-body img { border-radius: var(--r-md); }

/* Share button and its fallback menu (pages/js/wtg.js) */
.share { position: relative; display: inline-flex; }
.share__menu { position: absolute; right: 0; top: calc(100% + 6px); z-index: 20; min-width: 190px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); box-shadow: var(--shadow-lift); padding: 8px; display: flex; flex-direction: column; }
.share__menu[hidden] { display: none; }
.share__menu a, .share__menu button { display: flex; align-items: center; min-height: 40px; padding: 0 12px; border-radius: var(--r-sm); text-decoration: none; font: inherit; font-size: 15px; color: var(--ink); background: none; border: 0; cursor: pointer; text-align: left; }
.share__menu a:hover, .share__menu button:hover { background: var(--page); }

/* Pagination from the old search class */
.pager { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }

/* 12. Utilities ---------------------------------------------------------- */
.w-64 { flex: 0 0 64px; }
.w-70 { flex: 0 0 70px; }
.w-72 { flex: 0 0 72px; }
.w-110 { flex: 0 0 110px; }
.w-130 { flex: 0 0 130px; }
.w-132 { flex: 0 0 132px; }
.w-140 { flex: 0 0 140px; }
.w-190 { flex: 0 0 190px; }
.text-center { text-align: center; }
.text-right { text-align: right; }
.mt-8 { margin-top: 8px; }
.mt-12 { margin-top: 12px; }
.mt-24 { margin-top: 24px; }
.nowrap { white-space: nowrap; }
.muted { color: var(--ink-3); }
.danger-text { color: var(--danger); }
.success-text { color: var(--success); }
.hidden, [hidden] { display: none !important; }
.desktop-only { }
.phone-only { display: none; }
@media (max-width: 720px) {
  .desktop-only { display: none !important; }
  .phone-only { display: initial; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

/* 13. Legacy markup -------------------------------------------------------
   Pages that still print the old table-based markup sit inside
   <main class="legacy">. These rules give that markup the new tokens (type,
   colour, buttons, fields, tables) so it fits with the rebuilt pages. Nothing
   here applies outside .legacy, so it cannot leak into the new components. */
.legacy { padding-top: 28px; padding-bottom: 56px; color: var(--ink); }
.legacy > .legacy__card { background: var(--surface); border-radius: var(--r-xl); padding: 26px; overflow-x: auto; }
@media (max-width: 520px) { .legacy > .legacy__card { padding: 18px 14px; } }
.legacy h1 { font-family: var(--font-display); font-weight: 700; font-size: clamp(28px, 5vw, 40px); letter-spacing: -0.02em; line-height: 1.1; margin: 0 0 16px; }
.legacy h2 { font-size: 22px; margin: 22px 0 10px; }
.legacy h3 { font-size: 18px; margin: 18px 0 8px; }
.legacy h1 + hr { display: none; }
.legacy p { margin: 0 0 12px; }
.legacy ul, .legacy ol { margin: 0 0 12px; padding-left: 22px; }
.legacy hr { border: 0; height: 1px; background: var(--line); margin: 18px 0; width: auto; }
.legacy a { color: var(--ink); font-weight: 700; }
.legacy a:hover { color: var(--accent); }
.legacy font { font-family: inherit !important; font-size: inherit !important; color: inherit !important; }
.legacy small, .legacy .small { font-size: 14px; color: var(--ink-3); }
.legacy table { border-collapse: collapse; max-width: 100%; }
.legacy td, .legacy th { padding: 6px 8px; vertical-align: top; text-align: left; }
.legacy img { max-width: 100%; height: auto; }
.legacy img[src*="blank.gif"] { display: none; }
.legacy .error { color: var(--danger); font-weight: 700; }

.legacy input[type="text"], .legacy input[type="email"], .legacy input[type="password"], .legacy input[type="number"],
.legacy input[type="date"], .legacy input[type="url"], .legacy input[type="file"], .legacy input:not([type]), .legacy select, .legacy textarea {
  max-width: 100%; min-height: var(--tap); padding: 0 12px; font: inherit; color: var(--ink);
  background: var(--surface); border: 1.5px solid var(--field); border-radius: var(--r-sm);
}
.legacy input[type="file"] { padding: 9px 10px; }
.legacy textarea { padding: 10px 12px; width: 100%; }
.legacy input[type="checkbox"], .legacy input[type="radio"] { width: 18px; height: 18px; accent-color: var(--accent); vertical-align: middle; }

.legacy .button, .legacy input.button, .legacy .gdbutton, .legacy input[type="submit"]:not(.btn), .legacy button:not(.btn):not(.btn-icon):not(.link-btn):not(.tab-pill):not(.pill):not(.edit-link) {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: var(--tap); padding: 0 18px; margin: 4px 2px;
  font: inherit; font-size: 16px; font-weight: 700; line-height: 1.2; color: #FFFFFF; background: var(--accent);
  border: 1.5px solid transparent; border-radius: var(--r-sm); text-decoration: none; cursor: pointer; white-space: nowrap;
}
.legacy .button:hover, .legacy .gdbutton:hover, .legacy input[type="submit"]:not(.btn):hover { color: #FFFFFF; filter: brightness(0.94); }
.legacy .gdbutton_small, .legacy .button_mini { min-height: 36px; padding: 0 12px; font-size: 14px; }
.legacy .button_mini {
  display: inline-flex; align-items: center; color: var(--ink); background: var(--surface); border: 1.5px solid var(--field);
  border-radius: var(--r-sm); text-decoration: none; font-weight: 500; cursor: pointer; margin: 2px;
}
.legacy a .gdbutton, .legacy a:hover .gdbutton { color: #FFFFFF; }

.legacy table.list { width: 100%; border-collapse: collapse; }
.legacy table.list th { background: none; color: var(--ink-3); font-style: normal; font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; border: 0; border-bottom: 1px solid var(--line); padding: 10px 12px; }
.legacy table.list td { padding: 12px; border: 0; border-top: 1px solid var(--line); vertical-align: middle; }
.legacy table.list .r0 td, .legacy table.list .r1 td, .legacy table.list .already_promised td { border-width: 1px 0 0; border-color: var(--line); }
.legacy table.list .r0, .legacy table.list .r1 { color: var(--ink); background: none; }
.legacy table.list td a { color: var(--ink); }
.legacy table.list .already_promised, .legacy table.list .already_promised a { color: var(--ink-3); background: var(--page); }
.legacy table.info { background: var(--page); border: 0; border-radius: var(--r-md); padding: 8px; }

.legacy .alert, .legacy .warning, .legacy .message {
  display: block; width: auto; margin: 0 0 16px; padding: 14px 18px; text-align: left; font-size: 15px;
  background: var(--danger-bg); color: var(--danger); border: 1px solid var(--danger-line); border-radius: var(--r-lg);
}

.legacy #nav3, .legacy .list_settings { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); font-style: normal; overflow: hidden; }
.legacy #nav3 h3, .legacy .list_settings h3 { color: var(--ink-3); background: none; border: 0; padding: 12px 16px 6px; font-size: 13px; text-transform: uppercase; letter-spacing: 0.06em; }
.legacy #nav3 ul, .legacy .list_settings ul { border: 0; padding: 0 6px 8px; margin: 0; }
.legacy #nav3 li, .legacy .list_settings li { background: none; border: 0; padding: 0; font-size: 15px; list-style: none; }
.legacy #nav3 a, .legacy .list_settings a { color: var(--ink); padding: 8px 10px; border-radius: var(--r-sm); display: block; }
.legacy #nav3 a:hover { background: var(--page); padding-left: 10px; }

.legacy .tabs { border: 0; margin: 0 0 16px; display: flex; flex-wrap: wrap; gap: 8px; }
.legacy .tabs ul { margin: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.legacy .tabs li, .legacy .tabs li.selected { float: none; background: var(--surface); border: 1.5px solid var(--field); border-radius: var(--r-pill); margin: 0; padding: 0; }
.legacy .tabs li.selected { background: var(--ink); border-color: var(--ink); }
.legacy .tabs li a { padding: 10px 16px; font-style: normal; }
.legacy .tabs li.selected a { color: #FFFFFF; }

.legacy .button_promises, .legacy .button_edit, .legacy .button_delete { float: none; display: inline-flex; width: 40px; height: 40px; text-indent: -9999px; overflow: hidden; background-position: center; border-radius: var(--r-sm); }

.legacy .desktop { }
.legacy .mobile { display: none; }
@media (max-width: 720px) {
  .legacy .desktop { display: none; }
  .legacy .mobile { display: revert; }
  .legacy table:not(.keep-table), .legacy table:not(.keep-table) > tbody, .legacy table:not(.keep-table) > tbody > tr, .legacy table:not(.keep-table) > tbody > tr > td,
  .legacy table:not(.keep-table) > tr, .legacy table:not(.keep-table) > tr > td { display: block; width: auto !important; }
  .legacy table:not(.keep-table) > tbody > tr > th, .legacy table:not(.keep-table) > tr > th { display: block; }
}

/* 14. Dialogs (pages/js/dialog.js) -------------------------------------- */
#wtg_dialog_overlay { background: rgba(27, 35, 64, 0.45) !important; }
#wtg_dialog {
  border: 0 !important; border-radius: var(--r-xl) !important; box-shadow: var(--shadow-lift) !important;
  padding: 26px !important; font: 16px/1.5 var(--font-body) !important; color: var(--ink) !important;
}
#wtg_dialog .wtg_dialog_message { margin-bottom: 20px !important; font-size: 17px; }
#wtg_dialog .wtg_dialog_input { min-height: var(--tap); padding: 0 14px !important; border: 1.5px solid var(--field) !important; border-radius: var(--r-sm) !important; margin-bottom: 20px !important; }
#wtg_dialog .wtg_dialog_buttons { display: flex; justify-content: flex-end; gap: 10px; flex-wrap: wrap; }
#wtg_dialog .wtg_dialog_buttons button { margin: 0 !important; }
#wtg_dialog .gdbutton {
  display: inline-flex; align-items: center; justify-content: center; min-height: var(--tap); padding: 0 20px;
  font: inherit; font-weight: 700; border-radius: var(--r-sm); cursor: pointer;
  background: var(--accent); color: #FFFFFF; border: 1.5px solid transparent;
}
#wtg_dialog .wtg_dialog_cancel, #wtg_dialog .wtg_dialog_cancel:hover { background: var(--surface) !important; color: var(--ink) !important; border-color: var(--field) !important; font-weight: 500; }

/* 15. Print -------------------------------------------------------------- */
@media print {
  .app-header, .site-bar, .site-footer, .newlook, .signup-band, .no-print, .skip-link, .layout__side { display: none !important; }
  body, body.app { background: #FFFFFF; }
  .card { border: 1px solid var(--line); break-inside: avoid; }
  .container { max-width: none; padding: 0; }
}

/* Item thumbnails that grow on hover (owner list; off with the "don't enlarge" setting) */
.thumb--zoom { overflow: visible; position: relative; }
.thumb--zoom img { border-radius: 12px; transition: transform .15s ease; transform-origin: left center; }
@media (hover: hover) { .thumb--zoom:hover img { transform: scale(2.2); position: relative; z-index: 5; box-shadow: var(--shadow-lift); } }

/* Phones: the page's main content before its sidebar; compact list rows */
@media (max-width: 959px) {
  .layout--main-first > .layout__main { order: -1; }
}
@media (max-width: 720px) {
  .row > .w-72 { flex: 0 0 64px; }
  .row > .w-72 + .col-grow { flex: 1 1 calc(100% - 96px); }
  .row > .w-110, .row > .w-130 { flex: 1 1 100px; }
  .row > .w-132 { flex: 1 1 auto; }
}

/* A panel that is also a field row lays its fields out in a row (".panel" alone is a column) */
.panel.field-row { flex-direction: row; align-items: flex-end; }

/* File inputs styled as fields */
input[type="file"].input { padding: 9px 12px; line-height: 1.4; }
input[type="file"].input::file-selector-button { font: inherit; font-weight: 700; margin-right: 12px; padding: 4px 12px; border: 1.5px solid var(--field); border-radius: var(--r-sm); background: var(--surface); color: var(--ink); cursor: pointer; }

/* FAQ questions (<details class="faq">) */
details.faq > summary { list-style: none; display: flex; gap: 10px; align-items: center; min-height: 44px; cursor: pointer; font-weight: 700; }
details.faq > summary::-webkit-details-marker { display: none; }
details.faq > summary::before { content: ""; width: 8px; height: 8px; border: solid var(--accent); border-width: 0 2px 2px 0; transform: rotate(-45deg); transition: transform .15s; flex: none; }
details.faq[open] > summary::before { transform: rotate(45deg); }
.prose li > p + p, .prose dd { margin-top: 8px; }