/*
 * The app's building blocks (everything except the landing page), on the
 * colours of theme.css. Nested under body.app so nothing reaches the landing.
 *
 * Two layers:
 * - Base styles for plain elements (headings, forms, buttons, tables), wrapped
 *   in :where() so they have no specificity: pages that haven't been designed
 *   yet still look tidy, and any class below wins over them.
 * - Classes for the designed pieces: .btn, .field, .check, .flash, .chip,
 *   .card, .fold, .tabs, .empty, .table-wrap.
 */
.app {
  --radius: 12px;
  --radius-sm: 6px;
  --soft-bg: color-mix(in srgb, var(--ink) 6%, var(--bg));
  --danger: #CF222E;
  --danger-bg: color-mix(in srgb, var(--danger) 12%, var(--paper));
  --ok: #1A7F37;
  --ok-bg: color-mix(in srgb, var(--ok) 14%, var(--paper));
  --warn-bg: color-mix(in srgb, var(--ribbon) 22%, var(--paper));

  margin: 0;
  font-size: 15px;
  line-height: 1.5;

  * { box-sizing: border-box; }
  :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
  svg.icon { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

  /* ---------- Base: plain elements ---------- */
  :where(h1, h2, h3) { font-family: var(--serif); font-variation-settings: var(--axes); line-height: 1.2; text-wrap: balance; margin: 0; }
  :where(h1) { font-size: 30px; font-weight: 600; letter-spacing: -.02em; }
  :where(h2) { font-size: 19px; font-weight: 600; }
  :where(h3) { font-size: 16px; font-weight: 600; }
  :where(p) { margin: 0; }
  /* The hidden attribute always hides, whatever display a rule gives the element. */
  [hidden] { display: none !important; }
  :where(a) { color: var(--accent); text-decoration: none; }
  :where(a:hover) { text-decoration: underline; }
  :where(.page ul, .page ol) { margin: 0; padding-left: 20px; display: grid; gap: 8px; }
  :where(.page form:not(.button_to)) { display: grid; gap: 14px; }
  :where(.page form p) { display: grid; gap: 6px; }
  :where(.page label) { font-weight: 600; font-size: 14px; }
  :where(.page input:not([type="checkbox"], [type="radio"], [type="submit"], [type="file"]), .page select, .page textarea) {
    width: 100%; min-width: 0; padding: 8px 11px; border-radius: var(--radius-sm); border: 1px solid var(--line); background: var(--bg); color: var(--ink); font: inherit; }
  :where(.page textarea) { min-height: 96px; resize: vertical; }
  :where(.page input:focus, .page select:focus, .page textarea:focus) { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent); background: var(--paper); }
  :where(.page button, .page input[type="submit"]) {
    display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 7px 14px; border-radius: var(--radius-sm); border: 0; font: inherit; font-weight: 600; font-size: 14px;
    cursor: pointer; background: var(--paper); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line); }
  :where(.page button:hover, .page input[type="submit"]:hover) { background: var(--soft-bg); }
  :where(.page form:not(.button_to) input[type="submit"]) { justify-self: start; background: var(--accent); color: var(--on-accent); box-shadow: none; }
  :where(.page form:not(.button_to) input[type="submit"]:hover) { background: var(--accent-2); }
  :where(.page .button_to) { display: inline-flex; margin: 0; }
  :where(.page table) { width: 100%; border-collapse: collapse; font-size: 14px; }
  :where(.page th, .page td) { text-align: left; padding: 10px 14px; border-top: 1px solid var(--line); vertical-align: top; }
  :where(.page img) { max-width: 100%; height: auto; border-radius: var(--radius-sm); }
  :where(.page section) { display: grid; gap: 12px; }

  /* ---------- Buttons ---------- */
  .btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 7px 14px; border-radius: var(--radius-sm); border: 0; font: inherit; font-weight: 600; font-size: 14px;
    cursor: pointer; background: var(--paper); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line); white-space: nowrap; text-decoration: none; }
  .btn:hover { background: var(--soft-bg); text-decoration: none; }
  .btn.primary { background: var(--accent); color: var(--on-accent); box-shadow: none; }
  .btn.primary:hover { background: var(--accent-2); }
  .btn.danger { color: var(--danger); }
  .btn.danger:hover { background: var(--danger); color: #FFFFFF; box-shadow: none; }
  .btn.danger-solid { background: var(--danger); color: #FFFFFF; box-shadow: none; }
  .btn.ghost { background: transparent; box-shadow: none; color: var(--muted); }
  .btn.ghost:hover { background: var(--soft-bg); color: var(--ink); }
  .btn.sm { padding: 4px 10px; font-size: 13px; }
  .btn.block { width: 100%; padding-block: 10px; }
  .btn:disabled { opacity: .5; cursor: default; }
  .btn-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }

  /* ---------- Form fields ---------- */
  .field { display: grid; gap: 6px; min-width: 0; }
  .field .hint { font-size: 13px; color: var(--muted); font-weight: 400; }
  .field .msg { font-size: 13px; color: var(--danger); font-weight: 600; }
  .field.error :is(input, select, textarea), .field_with_errors :is(input, select, textarea) { border-color: var(--danger); }
  .field_with_errors { display: contents; }
  /* The birthday: day and month side by side (shared/_birthday_fields) */
  fieldset.birthday-field { border: 0; margin: 0; padding: 0; }
  fieldset.birthday-field legend { padding: 0; margin-bottom: 6px; font-weight: 600; font-size: 14px; }
  .birthday-selects { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 8px; }
  .code-input { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; letter-spacing: .12em; text-transform: uppercase; font-size: 18px; }

  /* A drawn checkbox: fills with the accent and shows a tick */
  .check { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; font-weight: 400; cursor: pointer; }
  input[type="checkbox"] { appearance: none; flex: none; width: 18px; height: 18px; margin: 1px 0 0; border-radius: 5px; border: 1.5px solid var(--muted); background: var(--paper);
    display: inline-grid; place-items: center; cursor: pointer; transition: background .15s, border-color .15s; }
  input[type="checkbox"]::after { content: ""; width: 5px; height: 9px; border: solid var(--on-accent); border-width: 0 2px 2px 0; transform: translateY(-1px) rotate(45deg) scale(0); transition: transform .15s; }
  input[type="checkbox"]:checked { background: var(--accent); border-color: var(--accent); }
  input[type="checkbox"]:checked::after { transform: translateY(-1px) rotate(45deg) scale(1); }

  /* ---------- Messages ---------- */
  .flash { margin: 0; display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: var(--radius-sm); font-weight: 600; font-size: 14px; }
  .flash-notice { background: var(--ok-bg); color: var(--ok); }
  .flash-alert { background: var(--danger-bg); color: var(--danger); }
  .form-errors { border: 1px solid color-mix(in srgb, var(--danger) 50%, transparent); background: var(--danger-bg); border-radius: var(--radius-sm); padding: 12px 14px; font-size: 14px; }
  .form-errors ul { margin: 0; padding-left: 18px; color: var(--danger); }
  .warn { background: var(--warn-bg); border-radius: var(--radius-sm); padding: 10px 12px; font-size: 13px; font-weight: 600; }

  /* ---------- Small pieces ---------- */
  .muted { color: var(--muted); }
  .small { font-size: 13px; }
  .chip { display: inline-flex; align-items: center; gap: 5px; padding: 2px 9px; border-radius: 999px; font-size: 12px; font-weight: 600; box-shadow: inset 0 0 0 1px var(--line); color: var(--muted); white-space: nowrap; }
  .count { min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--accent); color: var(--on-accent); font-size: 11px; font-weight: 700; display: inline-grid; place-items: center; }
  .count-chip { min-width: 24px; padding: 1px 8px; border-radius: 999px; background: var(--soft-bg); color: var(--muted); font-size: 12px; font-weight: 700; text-align: center; }
  .stars { color: var(--ribbon); letter-spacing: 1px; }
  .price { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }

  /* ---------- Cards and page heads ---------- */
  .card { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; display: grid; gap: 14px; min-width: 0; }
  /* A card's heading with a button on the right (it wraps below on phones). */
  .card > .title-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 14px; }
  .page-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 20px; }
  .page-head .sub { color: var(--muted); margin-top: 6px; max-width: 60ch; }
  .crumb { font-size: 13px; color: var(--muted); display: inline-flex; align-items: center; gap: 6px; }
  .grid2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 16px; }

  /* Folding card: <details class="card fold"> with a ribbon that turns over when open */
  details.fold { padding: 0; gap: 0; }
  details.fold > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 12px; padding: 16px 20px; border-radius: var(--radius); }
  details.fold > summary::-webkit-details-marker { display: none; }
  details.fold > summary h2 { flex: 1; min-width: 0; }
  details.fold > summary .summary { font-size: 13px; color: var(--muted); font-weight: 600; white-space: nowrap; }
  details.fold[open] > summary { border-bottom: 1px solid var(--line); border-radius: var(--radius) var(--radius) 0 0; }
  details.fold > .fold-body { padding: 16px 20px 20px; display: grid; gap: 14px; }
  details.fold.danger { border-color: color-mix(in srgb, var(--danger) 45%, var(--line)); }
  details.fold.danger > summary h2 { color: var(--danger); }
  @media (max-width: 520px) { details.fold > summary .summary { display: none; } }
  .ribbon { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; flex: none; background: color-mix(in srgb, var(--ribbon) 14%, transparent); transition: background .2s; }
  .ribbon svg { width: 26px; height: 26px; transition: transform .45s cubic-bezier(.3, 1.4, .5, 1); }
  .ribbon .arm-a { fill: var(--ribbon); }
  .ribbon .arm-b, .ribbon .knot { fill: color-mix(in srgb, var(--ribbon) 70%, var(--ink)); }
  details.fold > summary:hover .ribbon { background: color-mix(in srgb, var(--ribbon) 26%, transparent); }
  details.fold[open] > summary .ribbon svg { transform: rotate(180deg); }

  /* Tabs */
  .tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); overflow-x: auto; }
  .tabs a { padding: 8px 12px; color: var(--muted); font-weight: 600; font-size: 14px; border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; display: inline-flex; gap: 6px; align-items: center; }
  .tabs a:hover { color: var(--ink); text-decoration: none; }
  .tabs a[aria-current="page"] { color: var(--ink); border-color: var(--accent); }

  /* Empty state */
  .empty { text-align: center; padding: 40px 20px; border: 1px dashed var(--line); border-radius: var(--radius); display: grid; justify-items: center; gap: 10px; color: var(--muted); }
  .empty b { color: var(--ink); font-size: 16px; }

  /* Tables */
  .table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper); }
  .table-wrap table { width: 100%; border-collapse: collapse; }
  .table-wrap thead th { border-top: 0; font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); font-weight: 700; background: var(--soft-bg); }
  td.when { white-space: nowrap; color: var(--muted); font-variant-numeric: tabular-nums; }

  /* Notifications */
  ul.notifications { list-style: none; padding: 0; display: grid; gap: 0; }
  li.notification { display: flex; flex-wrap: wrap; gap: 10px 12px; align-items: center; padding: 12px 0; border-top: 1px solid var(--line); }
  li.notification:first-child { border-top: 0; padding-top: 0; }
  li.notification .text { flex: 1 1 220px; min-width: 0; display: grid; gap: 2px; }
  li.notification .when { font-size: 12px; color: var(--muted); }
  li.notification.read .text > span:first-child { color: var(--muted); }
  li.notification.read .avatar { opacity: .55; }
  .avatar { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; flex: none; font-weight: 700; color: var(--on-accent); background: var(--accent); }
  .avatar.moderation { background: var(--soft-bg); color: var(--muted); }
  /* Unread: a dot before the text. Read: faded. Marking as read: a check mark. */
  li.notification.unread .text > span:first-child::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 6px; border-radius: 50%; background: var(--accent); vertical-align: 1px; }
  .read-button { display: inline-grid; place-items: center; width: 32px; height: 32px; padding: 0; border: 0; border-radius: 50%; cursor: pointer;
    background: color-mix(in srgb, var(--ribbon) 14%, transparent); box-shadow: none; }
  .read-button:hover { background: color-mix(in srgb, var(--ribbon) 28%, transparent); }
  .ribbon-check { width: 22px; height: 22px; flex: none; transition: transform .3s cubic-bezier(.3, 1.4, .5, 1); }
  .btn .ribbon-check { width: 18px; height: 18px; }
  .read-button:hover .ribbon-check { transform: scale(1.15) rotate(-6deg); }
  .ribbon-check .arm-a { fill: var(--ribbon); }
  .ribbon-check .arm-b { fill: color-mix(in srgb, var(--ribbon) 70%, var(--ink)); }

  /* Friends: rows of people, and the friend code */
  ul.people { list-style: none; padding: 0; display: grid; gap: 0; }
  ul.people li { display: flex; flex-wrap: wrap; gap: 10px 12px; align-items: center; padding: 12px 0; border-top: 1px solid var(--line); }
  ul.people li:first-child { border-top: 0; padding-top: 0; }
  ul.people .name { flex: 1 1 160px; min-width: 0; display: grid; gap: 2px; font-weight: 700; color: var(--ink); }
  a.name:hover { color: var(--accent); }
  .person-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-left: auto; }
  .friend-code-value { justify-self: start; max-width: 100%; padding: 10px 16px; border-radius: var(--radius-sm); border: 1.5px dashed var(--line); font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    font-size: 28px; font-weight: 700; letter-spacing: .1em; user-select: all; }

  /* Admin */
  .pages { display: flex; justify-content: space-between; gap: 10px; }
  ul.rows { list-style: none; padding: 0; display: grid; gap: 0; }
  ul.rows li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 16px; padding: 12px 0; border-top: 1px solid var(--line); }
  ul.rows li:first-child { border-top: 0; padding-top: 0; }
  ul.rows .head { display: grid; gap: 2px; min-width: 0; }
  ul.rows .title { font-weight: 700; }
  ul.rows .reason { grid-column: 1 / -1; color: var(--muted); font-size: 14px; overflow-wrap: anywhere; }
  ul.rows .when { grid-row: 1; grid-column: 2; font-size: 13px; color: var(--muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
  .report-details .reason { overflow-wrap: anywhere; }
  .reported-list ol.gifts { padding-left: 20px; }

  /* Forms for lists and gifts */
  .visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .crumb:hover { color: var(--accent); text-decoration: none; }
  .counter { font-size: 12px; color: var(--muted); text-align: right; font-variant-numeric: tabular-nums; }
  dl.facts { display: grid; gap: 12px; margin: 0; }

  /* The draw list's gift picker (groups/draws/gift_copies) */
  .gift-picker { display: grid; gap: 12px; }
  details.picker-list { border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 10px 14px; }
  details.picker-list > summary { cursor: pointer; font-weight: 700; display: flex; align-items: center; gap: 8px; }
  ul.picker-gifts { list-style: none; padding: 0; margin: 10px 0 0; display: grid; gap: 8px; }
  ul.picker-gifts li { display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; align-items: center; gap: 12px; }
  ul.picker-gifts .gift-picture { width: 48px; height: 48px; aspect-ratio: auto; border-radius: 8px; }
  ul.picker-gifts .name { overflow-wrap: anywhere; }
  .invite-picker { display: grid; gap: 12px; justify-items: start; }
  .invite-picker ul.people { justify-self: stretch; }
  dl.facts dt { font-size: 13px; color: var(--muted); }
  dl.facts dd { margin: 2px 0 0; font-weight: 600; color: var(--ink); }
  .price-row { display: grid; grid-template-columns: minmax(0, 1fr) 110px; gap: 10px; }
  .image-field { display: grid; grid-template-columns: 128px minmax(0, 1fr); gap: 16px; align-items: center; }
  .image-field .preview { width: 128px; aspect-ratio: 1; border-radius: var(--radius-sm); overflow: hidden; display: grid; place-items: center; color: var(--muted);
    background: repeating-linear-gradient(45deg, var(--soft-bg) 0 8px, color-mix(in srgb, var(--soft-bg) 60%, var(--paper)) 8px 16px); border: 1px solid var(--line); }
  .image-field .preview img { width: 100%; height: 100%; object-fit: cover; border-radius: 0; }
  .image-field .preview svg.icon { width: 30px; height: 30px; }
  .image-field .controls { display: grid; gap: 8px; justify-items: start; min-width: 0; }
  .image-field label.btn { cursor: pointer; }
  .image-field input[type="file"]:focus-visible + .hint, .image-field:has(input[type="file"]:focus-visible) label.btn { outline: 2px solid var(--accent); outline-offset: 2px; }
  @media (max-width: 480px) { .image-field { grid-template-columns: 96px minmax(0, 1fr); } .image-field .preview { width: 96px; } }
  .image-field .preview .gift-picture { width: 100%; height: 100%; aspect-ratio: auto; border-radius: 0; }

  /* The picture picker (gifts/_image_field): a site modal (modal.css), wider,
     the drawings scrolling between its head and its foot. */
  dialog.modal.picker { width: min(720px, calc(100vw - 24px)); }
  .picker-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 18px 22px 22px; display: grid; gap: 18px; align-content: start; }
  .picker-foot { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 14px 20px 16px 22px;
    border-top: 1px solid color-mix(in srgb, var(--line) 70%, transparent); }
  .picker-group { display: grid; gap: 10px; }
  .picker-group h3 { font-family: var(--sans); font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
  .picker-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 10px; }
  .picker-item { display: grid; gap: 5px; justify-items: center; text-align: center; padding: 6px; border-radius: var(--radius-sm); cursor: pointer; font-size: 12px; font-weight: 600; position: relative; }
  .picker-item:hover { background: var(--soft-bg); }
  .picker-item input[type="radio"] { position: absolute; opacity: 0; width: 1px; height: 1px; }
  .picker-item:has(input:checked) { box-shadow: inset 0 0 0 2px var(--accent); background: color-mix(in srgb, var(--accent) 8%, transparent); }
  .picker-item:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
  .picker-item .tile { width: 100%; aspect-ratio: 1; border-radius: var(--radius-sm); display: grid; place-items: center; }
  .picker-item.upload .tile { border: 2px dashed color-mix(in srgb, var(--accent) 55%, var(--line)); color: var(--accent); }
  .picker-item.upload .tile svg.icon { width: 30px; height: 30px; }

  fieldset.star-field { border: 0; margin: 0; padding: 0; min-width: 0; }
  fieldset.star-field legend { padding: 0; margin-bottom: 6px; }
  .stars-pick { display: inline-flex; flex-direction: row-reverse; justify-content: flex-end; gap: 2px; }
  .stars-pick input { position: absolute; opacity: 0; width: 1px; height: 1px; }
  .stars-pick label { font-size: 30px; line-height: 1; color: var(--line); cursor: pointer; transition: color .15s, transform .2s; }
  .stars-pick input:checked ~ label, .stars-pick label:hover, .stars-pick label:hover ~ label { color: var(--ribbon); }
  .stars-pick label:hover { transform: scale(1.12); }
  .stars-pick input:focus-visible + label { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
  .no-priority { margin-top: 6px; color: var(--muted); }
  .no-priority input[type="radio"] { accent-color: var(--accent); }

  /* Account pages (login, sign-up, password reset, recovery code) */
  .auth-links { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 16px; font-size: 14px; }
  .recovery-code { display: block; text-align: center; padding: 18px; border-radius: var(--radius-sm); background: var(--soft-bg); font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    font-size: 26px; font-weight: 700; letter-spacing: .12em; user-select: all; }

  /* Long text (Terms, Privacy): a readable column */
  .page.prose { max-width: 72ch; width: 100%; margin: 0 auto; gap: 14px; }
  .page.prose h2 { margin-top: 18px; }
  .page.prose p, .page.prose li { line-height: 1.65; }
  .legal-version { color: var(--muted); font-size: 13px; }

  /* Confirmation dialog (replaces the browser's confirm(); see application.js):
     a site modal (modal.css), narrower. */
  dialog.modal.confirm { width: min(460px, calc(100vw - 32px)); }

  @media (prefers-reduced-motion: reduce) { .ribbon svg { transition: none; } }
}

/* Vinho: softer, rounder, with its serif headings */
:root[data-theme="vinho"] .app {
  --radius: 18px;
  --radius-sm: 10px;
  --danger: #B3261E;
  --ok: #3F7A4E;

  :where(h1) { font-size: 36px; font-weight: 500; }
  :where(h2) { font-size: 22px; font-weight: 500; }
  .btn, :where(.page button, .page input[type="submit"]) { border-radius: 999px; }
}

/* Dark mode: brighter red and green so they read on dark backgrounds */
@media (prefers-color-scheme: dark) {
  :root:not([data-mode="light"]) .app { --danger: #F85149; --ok: #3FB950; }
}
:root[data-mode="dark"] .app { --danger: #F85149; --ok: #3FB950; }