/*
 * Shady Waggers UI kit: the shared parts every staff and admin page uses.
 * The guide lives in docs/DESIGN.md, and every part is shown live at /ui/.
 *
 * Load order on every page:
 *   <link rel="stylesheet" href="/tokens.css" />
 *   <link rel="stylesheet" href="/ui.css" />
 *   <link rel="stylesheet" href="/tool/tool.css" />   (only if the tool has one)
 *
 * Everything here sits in cascade layers, so any plain rule in a page's own
 * stylesheet wins without needing !important. That is what makes moving a
 * page over safe: add this file and nothing changes, then delete the page's
 * own copy of a button or card rule and it picks up the shared one.
 *
 * The base layer only touches pages whose <body> has class="sw-ui", so the
 * big tools keep their own buttons and inputs until they are moved over. The
 * sw-* parts work on every page that loads this file.
 *
 * Two kinds of names:
 *   sw-*      the parts (sw-btn, sw-card, sw-chip...). Use these in new code.
 *   plain     button, input, table, .card, .ghost, .small, .toast. These are
 *             the names the small pages already use, styled the same way so
 *             old markup needs no edits.
 */

@layer sw-base, sw-parts;

/* ---------- Base: the bare elements ---------- */
@layer sw-base {
  :where(.sw-ui) *, :where(.sw-ui) *::before, :where(.sw-ui) *::after { box-sizing: border-box; }

  html { -webkit-text-size-adjust: 100%; }

  body:where(.sw-ui) {
    margin: 0;
    font-family: var(--sw-font);
    font-size: var(--sw-text-md);
    line-height: var(--sw-leading);
    color: var(--sw-ink);
    background: var(--sw-bg);
    -webkit-font-smoothing: antialiased;
  }

  :where(.sw-ui) h1, :where(.sw-ui) h2, :where(.sw-ui) h3, :where(.sw-ui) h4 {
    font-family: var(--sw-font);
    line-height: var(--sw-leading-tight);
    font-weight: 700;
    letter-spacing: -0.005em;
    margin: 0 0 var(--sw-s2);
  }
  :where(.sw-ui) h1 { font-size: var(--sw-text-2xl); }
  :where(.sw-ui) h2 { font-size: var(--sw-text-xl); }
  :where(.sw-ui) h3 { font-size: var(--sw-text-lg); }
  :where(.sw-ui) h4 { font-size: var(--sw-text-md); }

  :where(.sw-ui) p { margin: 0 0 var(--sw-s3); }

  :where(.sw-ui) a { color: var(--sw-heading); text-underline-offset: 2px; }
  :where(.sw-ui) a:hover { text-decoration-thickness: 2px; }

  :where(.sw-ui) small { font-size: var(--sw-text-sm); }
  :where(.sw-ui) code, :where(.sw-ui) kbd { font-family: var(--sw-mono); font-size: .92em; }

  :where(.sw-ui) img, :where(.sw-ui) svg, :where(.sw-ui) video { max-width: 100%; }

  /* Buttons: a teal pill, 44px tall so a thumb can hit it. */
  :where(.sw-ui) button {
    font: inherit;
    font-size: var(--sw-text-md);
    font-weight: 600;
    line-height: 1.2;
    min-height: var(--sw-tap);
    padding: 0 var(--sw-s4);
    border: 1px solid transparent;
    border-radius: var(--sw-r-pill);
    background: var(--sw-teal-fill);
    color: #fff;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--sw-s2);
    transition: background var(--sw-fast) var(--sw-ease), transform var(--sw-fast) var(--sw-ease),
      border-color var(--sw-fast) var(--sw-ease);
  }
  :where(.sw-ui) button:hover { background: var(--sw-teal-deeper); }
  :where(.sw-ui) button:active { transform: translateY(1px); }
  :where(.sw-ui) button:disabled { opacity: .5; cursor: not-allowed; transform: none; }

  /* Old names the small pages already use. */
  :where(.sw-ui) button.ghost, :where(.sw-ui) button.secondary {
    background: var(--sw-card);
    color: var(--sw-heading);
    border-color: var(--sw-line);
  }
  :where(.sw-ui) button.ghost:hover, :where(.sw-ui) button.secondary:hover { background: var(--sw-card-2); }
  :where(.sw-ui) button.small { min-height: 36px; padding: 0 var(--sw-s3); font-size: var(--sw-text-sm); }
  :where(.sw-ui) button.danger { background: var(--sw-bad-fill); }

  /* Inputs: 16px text so phones do not zoom in, 44px tall. */
  :where(.sw-ui) input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="color"]),
  :where(.sw-ui) select,
  :where(.sw-ui) textarea {
    font: inherit;
    font-size: var(--sw-text-md);
    color: var(--sw-ink);
    background: var(--sw-card);
    border: 1px solid var(--sw-line);
    border-radius: var(--sw-r-md);
    padding: var(--sw-s2) var(--sw-s3);
    min-height: var(--sw-tap);
    max-width: 100%;
  }
  :where(.sw-ui) textarea { min-height: 96px; line-height: var(--sw-leading); resize: vertical; }
  :where(.sw-ui) input::placeholder, :where(.sw-ui) textarea::placeholder { color: var(--sw-muted); opacity: 1; }
  :where(.sw-ui) input:focus, :where(.sw-ui) select:focus, :where(.sw-ui) textarea:focus { border-color: var(--sw-teal); }
  :where(.sw-ui) input[type="checkbox"], :where(.sw-ui) input[type="radio"] { width: 20px; height: 20px; accent-color: var(--sw-teal-fill); }

  /* Tables: striped rows, quiet header. */
  :where(.sw-ui) table { width: 100%; border-collapse: collapse; font-size: var(--sw-text-sm); }
  :where(.sw-ui) th, :where(.sw-ui) td { padding: var(--sw-s2) var(--sw-s3); text-align: left; vertical-align: middle; }
  :where(.sw-ui) thead th {
    background: var(--sw-card-2);
    color: var(--sw-muted);
    font-size: var(--sw-text-xs);
    font-weight: 600;
  }
  :where(.sw-ui) tbody tr:nth-child(even) { background: var(--sw-card-2); }

  :where(.sw-ui) hr { border: 0; border-top: 1px solid var(--sw-line); margin: var(--sw-s4) 0; }

  /* Old names. */
  :where(.sw-ui) .card {
    background: var(--sw-card);
    border: 1px solid var(--sw-line);
    border-radius: var(--sw-radius);
    padding: var(--sw-s4);
  }
  :where(.sw-ui) .sub, :where(.sw-ui) .muted { color: var(--sw-muted); }
  :where(.sw-ui) .hidden { display: none !important; }

  @media (prefers-reduced-motion: reduce) {
    :where(.sw-ui) *, :where(.sw-ui) *::before, :where(.sw-ui) *::after { transition-duration: 0ms !important; animation-duration: 0ms !important; }
  }
}

/* ---------- Parts ---------- */
@layer sw-parts {

  /* Page frame */
  .sw-page { max-width: var(--sw-page); margin: 0 auto; padding: var(--sw-s5) var(--sw-s4) var(--sw-s7); }
  .sw-page--wide { max-width: var(--sw-page-wide); }

  .sw-head {
    display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between;
    gap: var(--sw-s3); margin-bottom: var(--sw-s5);
  }
  .sw-head h1 { margin: 0; display: flex; align-items: center; gap: var(--sw-s2); }
  .sw-head .sw-sub { margin: var(--sw-s1) 0 0; }
  .sw-sub { color: var(--sw-muted); font-size: var(--sw-text-sm); }
  .sw-actions { display: flex; flex-wrap: wrap; gap: var(--sw-s2); align-items: center; }

  .sw-section-title {
    font-size: var(--sw-text-sm); font-weight: 600; color: var(--sw-muted);
    margin: var(--sw-s5) 0 var(--sw-s2);
  }

  /* Buttons */
  .sw-btn {
    font: inherit; font-size: var(--sw-text-md); font-weight: 600; line-height: 1.2;
    min-height: var(--sw-tap); padding: 0 var(--sw-s4);
    display: inline-flex; align-items: center; justify-content: center; gap: var(--sw-s2);
    border: 1px solid transparent; border-radius: var(--sw-r-pill);
    background: var(--sw-teal-fill); color: #fff; text-decoration: none; cursor: pointer;
    transition: background var(--sw-fast) var(--sw-ease), transform var(--sw-fast) var(--sw-ease);
  }
  .sw-btn:hover { background: var(--sw-teal-deeper); }
  .sw-btn:active { transform: translateY(1px); }
  .sw-btn:disabled, .sw-btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; transform: none; }
  .sw-btn--secondary { background: var(--sw-card); color: var(--sw-heading); border-color: var(--sw-line); }
  .sw-btn--secondary:hover { background: var(--sw-card-2); }
  .sw-btn--ghost { background: transparent; color: var(--sw-heading); }
  .sw-btn--ghost:hover { background: var(--sw-card-2); }
  .sw-btn--danger { background: var(--sw-bad-fill); color: #fff; }
  .sw-btn--danger:hover { background: var(--sw-bad-fill); filter: brightness(.92); }
  .sw-btn--gold { background: var(--sw-gold-light); color: #3a2c04; }
  .sw-btn--gold:hover { background: var(--sw-gold-light); filter: brightness(.95); }
  .sw-btn--sm { min-height: 36px; padding: 0 var(--sw-s3); font-size: var(--sw-text-sm); }
  .sw-btn--block { width: 100%; }
  .sw-btn--icon { width: var(--sw-tap); padding: 0; }
  .sw-btn.is-loading { pointer-events: none; }
  .sw-btn.is-loading::before {
    content: ""; width: 16px; height: 16px; border-radius: 50%;
    border: 2px solid currentColor; border-right-color: transparent;
    animation: sw-spin .7s linear infinite;
  }
  @keyframes sw-spin { to { transform: rotate(360deg); } }

  /* Cards */
  .sw-card {
    background: var(--sw-card); border: 1px solid var(--sw-line);
    border-radius: var(--sw-radius); padding: var(--sw-s4); box-shadow: var(--sw-shadow);
  }
  .sw-card--flat { box-shadow: none; }
  .sw-card--tight { padding: var(--sw-s3); }
  .sw-card > h2, .sw-card > h3 { margin-top: 0; }
  .sw-card + .sw-card { margin-top: var(--sw-s3); }

  /* Status chips. Color AND a shape, every time, so the meaning survives
     color blindness, sunlight and a quick glance. */
  .sw-chip {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 3px 10px; border-radius: var(--sw-r-pill);
    font-size: var(--sw-text-xs); font-weight: 600; line-height: 1.35; white-space: nowrap;
    background: var(--sw-card-2); color: var(--sw-muted); border: 1px solid transparent;
  }
  .sw-chip::before { font-weight: 800; }
  .sw-chip--good { background: var(--sw-good-bg); color: var(--sw-good); }
  .sw-chip--good::before { content: "✓"; }
  .sw-chip--warn { background: var(--sw-warn-bg); color: var(--sw-warn); }
  .sw-chip--warn::before { content: "!"; }
  .sw-chip--bad { background: var(--sw-bad-bg); color: var(--sw-bad); }
  .sw-chip--bad::before { content: "✕"; }
  .sw-chip--info { background: var(--sw-info-bg); color: var(--sw-info); }
  .sw-chip--info::before { content: "i"; font-style: italic; font-family: Georgia, serif; }
  .sw-chip--brand { background: var(--sw-card-2); color: var(--sw-heading); border-color: var(--sw-line); }
  .sw-chip--plain::before, .sw-chip[data-noicon]::before { content: none; }

  /* Banners: one line of news at the top of a card or page. */
  .sw-banner {
    display: flex; gap: var(--sw-s3); align-items: flex-start;
    padding: var(--sw-s3) var(--sw-s4); border-radius: var(--sw-r-md);
    background: var(--sw-info-bg); color: var(--sw-ink);
    border-left: 4px solid var(--sw-info); font-size: var(--sw-text-sm);
  }
  .sw-banner > :last-child { margin-bottom: 0; }
  .sw-banner--good { background: var(--sw-good-bg); border-left-color: var(--sw-good); }
  .sw-banner--warn { background: var(--sw-warn-bg); border-left-color: var(--sw-warn); }
  .sw-banner--bad { background: var(--sw-bad-bg); border-left-color: var(--sw-bad); }
  .sw-banner .sw-banner-icon { font-size: 1.15rem; line-height: 1.3; }

  /* Fields: label on top, hint under, error in red with a shape. */
  .sw-field { display: grid; gap: var(--sw-s1); margin-bottom: var(--sw-s4); }
  .sw-field > label { font-size: var(--sw-text-sm); font-weight: 600; }
  .sw-field > input, .sw-field > select, .sw-field > textarea { width: 100%; }
  .sw-hint { font-size: var(--sw-text-sm); color: var(--sw-muted); }
  .sw-error { font-size: var(--sw-text-sm); color: var(--sw-bad); font-weight: 600; }
  .sw-error::before { content: "✕ "; }
  .sw-field.is-bad input, .sw-field.is-bad select, .sw-field.is-bad textarea { border-color: var(--sw-bad); }

  /* Segmented control: views and filters, one choice at a time. */
  .sw-seg {
    display: inline-flex; gap: 2px; padding: 3px; border-radius: var(--sw-r-pill);
    background: var(--sw-card-2); border: 1px solid var(--sw-line); max-width: 100%; overflow-x: auto;
  }
  .sw-seg > button, .sw-seg > a {
    min-height: 38px; padding: 0 var(--sw-s3); border: 0; border-radius: var(--sw-r-pill);
    background: transparent; color: var(--sw-muted); font-size: var(--sw-text-sm); font-weight: 600;
    white-space: nowrap; text-decoration: none; display: inline-flex; align-items: center; gap: 6px;
  }
  .sw-seg > button:hover, .sw-seg > a:hover { background: var(--sw-card); color: var(--sw-ink); }
  .sw-seg > [aria-pressed="true"], .sw-seg > [aria-selected="true"], .sw-seg > .is-on {
    background: var(--sw-teal-fill); color: #fff;
  }

  /* Tables */
  .sw-table-wrap {
    overflow-x: auto; border: 1px solid var(--sw-line); border-radius: var(--sw-radius);
    background: var(--sw-card);
  }
  .sw-table { width: 100%; border-collapse: collapse; font-size: var(--sw-text-sm); }
  .sw-table th, .sw-table td { padding: var(--sw-s2) var(--sw-s3); text-align: left; vertical-align: middle; }
  .sw-table thead th {
    position: sticky; top: 0; z-index: 1;
    background: var(--sw-card-2); color: var(--sw-muted); font-size: var(--sw-text-xs); font-weight: 600;
  }
  .sw-table tbody tr:nth-child(even) { background: var(--sw-card-2); }
  .sw-table tbody tr[data-href], .sw-table tbody tr.is-click { cursor: pointer; }
  .sw-table tbody tr[data-href]:hover, .sw-table tbody tr.is-click:hover {
    outline: 2px solid var(--sw-teal); outline-offset: -2px;
  }
  .sw-num { text-align: right; font-variant-numeric: tabular-nums; }

  /* Lists of rows (phones): the table's twin. */
  .sw-list { list-style: none; margin: 0; padding: 0; border: 1px solid var(--sw-line);
    border-radius: var(--sw-radius); background: var(--sw-card); overflow: hidden; }
  .sw-list > li { display: flex; align-items: center; gap: var(--sw-s3); padding: var(--sw-s3) var(--sw-s4);
    min-height: 56px; }
  .sw-list > li:nth-child(even) { background: var(--sw-card-2); }
  .sw-list > li > .sw-grow { flex: 1; min-width: 0; }
  .sw-list .sw-title { font-weight: 600; }
  .sw-list .sw-meta { font-size: var(--sw-text-sm); color: var(--sw-muted); }

  /* Stat tiles */
  .sw-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: var(--sw-s3); }
  .sw-stat { background: var(--sw-card); border: 1px solid var(--sw-line); border-radius: var(--sw-radius);
    padding: var(--sw-s3) var(--sw-s4); }
  .sw-stat b { display: block; font-size: var(--sw-text-xl); line-height: 1.2; font-variant-numeric: tabular-nums; }
  .sw-stat span { font-size: var(--sw-text-sm); color: var(--sw-muted); }

  /* Empty state */
  .sw-empty { text-align: center; padding: var(--sw-s6) var(--sw-s4); color: var(--sw-muted); }
  .sw-empty .sw-empty-icon { font-size: 2rem; display: block; margin-bottom: var(--sw-s2); }
  .sw-empty b { display: block; color: var(--sw-ink); font-size: var(--sw-text-lg); margin-bottom: var(--sw-s1); }

  /* Sheet: a bottom sheet on phones, a side panel on wide screens. */
  .sw-backdrop {
    position: fixed; inset: 0; z-index: 80; background: rgba(8, 14, 18, .45);
    opacity: 0; pointer-events: none; transition: opacity var(--sw-med) var(--sw-ease);
  }
  .sw-backdrop.is-open { opacity: 1; pointer-events: auto; }
  .sw-sheet {
    position: fixed; z-index: 81; left: 0; right: 0; bottom: 0; max-height: 88vh; overflow-y: auto;
    background: var(--sw-card); color: var(--sw-ink);
    border-radius: 18px 18px 0 0; box-shadow: 0 -8px 30px rgba(0, 0, 0, .25);
    padding: var(--sw-s3) var(--sw-s4) calc(var(--sw-s5) + env(safe-area-inset-bottom));
    transform: translateY(105%); transition: transform var(--sw-med) var(--sw-ease);
  }
  .sw-sheet.is-open { transform: none; }
  .sw-sheet::before {
    content: ""; display: block; width: 40px; height: 5px; border-radius: 3px;
    background: var(--sw-line); margin: 0 auto var(--sw-s3);
  }
  .sw-sheet-head { display: flex; align-items: center; justify-content: space-between; gap: var(--sw-s2);
    margin-bottom: var(--sw-s3); }
  .sw-sheet-head h2 { margin: 0; font-size: var(--sw-text-lg); }
  @media (min-width: 900px) {
    .sw-sheet {
      left: auto; top: 0; width: 420px; max-height: none; height: 100vh;
      border-radius: 18px 0 0 18px; transform: translateX(105%);
      padding: var(--sw-s5);
    }
    .sw-sheet::before { display: none; }
  }

  /* Toast: one short line, bottom center. */
  .sw-toast, :where(.sw-ui) .toast {
    position: fixed; left: 50%; bottom: calc(18px + env(safe-area-inset-bottom)); z-index: 90;
    transform: translateX(-50%) translateY(8px);
    max-width: calc(100vw - 32px); padding: var(--sw-s3) var(--sw-s4);
    border-radius: var(--sw-r-pill); background: var(--sw-ink); color: var(--sw-bg);
    font-size: var(--sw-text-sm); font-weight: 600; box-shadow: var(--sw-shadow);
    opacity: 0; pointer-events: none; transition: opacity var(--sw-med), transform var(--sw-med);
  }
  .sw-toast.is-on, :where(.sw-ui) .toast.on, :where(.sw-ui) .toast.show { opacity: 1; transform: translateX(-50%); }

  /* Details that open: used for "more" folds. */
  .sw-fold { border: 1px solid var(--sw-line); border-radius: var(--sw-radius); background: var(--sw-card); }
  .sw-fold > summary {
    list-style: none; cursor: pointer; min-height: var(--sw-tap); padding: var(--sw-s2) var(--sw-s4);
    display: flex; align-items: center; gap: var(--sw-s2); font-weight: 600;
  }
  .sw-fold > summary::-webkit-details-marker { display: none; }
  .sw-fold > summary::after { content: "▸"; margin-left: auto; color: var(--sw-muted); transition: transform var(--sw-fast); }
  .sw-fold[open] > summary::after { transform: rotate(90deg); }
  .sw-fold > :not(summary) { padding: 0 var(--sw-s4) var(--sw-s4); }

  /* Layout helpers */
  .sw-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sw-s2); }
  .sw-stack { display: grid; gap: var(--sw-s3); }
  .sw-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--sw-s3); }
  .sw-spacer { flex: 1; }
  .sw-visually-hidden {
    position: absolute !important; width: 1px; height: 1px; overflow: hidden;
    clip: rect(0 0 0 0); white-space: nowrap;
  }
}