/* ═══════════════════════════════════════════════════════════════════════════
   Component primitives — buttons, tabs, cards, chips, page heads.

   The pieces every Pondros screen repeats. Before this file each template
   hand-rolled its own `.mtg-top h1`, its own filter pill, its own button, and
   then a local <style> block to correct them; a token change couldn't reach any
   of it. Markup helpers live in templates/_macros/ui.html.

   Every value comes from the Figma file (tnFvyxWLrsiVALfGl0WlcS, page "Flow")
   read through the inspect panel, or from a token in css/tokens.css. Add a rule
   here only when two screens need it — one-offs belong with their screen.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Buttons ──────────────────────────────────────────────────────────────
   Figma "Button - Create": 32px tall, radius 16 (so it reads as a pill),
   padding 6/10, fill #404244 (--accent), label 14/20 in #F2F3F4. Secondary is
   the same shell in white with a hairline. */
.ui-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  height:32px;padding:6px 12px;border-radius:16px;
  font:inherit;font-size:var(--text-sm);line-height:var(--leading-sm);font-weight:500;
  border:1px solid transparent;background:var(--accent);color:var(--on-accent);
  cursor:pointer;text-decoration:none;white-space:nowrap;
  transition:background .14s ease,border-color .14s ease,color .14s ease;
}
.ui-btn:hover{background:var(--brand-700)}
.ui-btn:disabled,.ui-btn[aria-disabled="true"]{opacity:.45;cursor:default}
.ui-btn svg{width:16px;height:16px;flex:none}
/* Leading icons sit tighter to the edge than the label does — matches Figma's
   asymmetric 10/6 padding without needing a second class per icon state. */
.ui-btn:has(> svg:first-child){padding-left:10px}

.ui-btn--ghost{background:var(--panel);color:var(--ink);border-color:var(--line)}
.ui-btn--ghost:hover{background:var(--accent-2);border-color:var(--line-2)}
.ui-btn--quiet{background:transparent;color:var(--ink-2);border-color:transparent}
.ui-btn--quiet:hover{background:var(--accent-2);color:var(--ink)}
.ui-btn--danger{background:var(--crit);color:#FFFFFF}
.ui-btn--danger:hover{background:var(--crit);filter:brightness(.92)}

/* Icon-only action. Same 30px square as the rail's header icons, so the two
   never look like different systems. */
.ui-iconbtn{
  display:grid;place-items:center;flex:none;width:30px;height:30px;
  border:none;background:none;border-radius:var(--radius-sm);
  color:var(--ink-3);cursor:pointer;text-decoration:none;
}
.ui-iconbtn:hover{background:var(--accent-2);color:var(--ink)}
.ui-iconbtn svg{width:18px;height:18px}

/* ── Segmented tabs ───────────────────────────────────────────────────────
   Figma: 26px tall, radius 99 (fully round), padding 4/12, gap 4, active fill
   #000 @ 6% with the resting card shadow. */
.ui-seg{display:inline-flex;align-items:center;gap:2px}
.ui-seg-item{
  display:inline-flex;align-items:center;gap:4px;
  height:26px;padding:4px 12px;border-radius:var(--radius-pill);
  border:1px solid transparent;background:none;
  font:inherit;font-size:var(--text-xs);line-height:var(--leading-xs);
  color:var(--ink-3);cursor:pointer;text-decoration:none;white-space:nowrap;
}
.ui-seg-item:hover{color:var(--ink)}
.ui-seg-item.on{background:var(--chip);color:var(--ink);box-shadow:var(--shadow-card)}

/* ── Surfaces ─────────────────────────────────────────────────────────────
   Figma card: white, 1px hairline, radius 8, the two-layer resting shadow. */
.ui-card{
  background:var(--panel);border:1px solid var(--line);
  border-radius:var(--radius-sm);box-shadow:var(--shadow-card);
}
.ui-card--flat{box-shadow:none}

/* ── Chips ────────────────────────────────────────────────────────────────
   Neutral by default. The tone variants are the only places colour appears in
   this design, and only ever to mark state. */
.ui-chip{
  display:inline-flex;align-items:center;gap:4px;
  padding:2px 8px;border-radius:var(--radius-sm);
  background:var(--chip);color:var(--ink-3);
  font-size:var(--text-xs);line-height:var(--leading-xs);white-space:nowrap;
}
.ui-chip--crit{background:var(--crit-bg);color:var(--crit)}
.ui-chip--ok{background:var(--ok-bg);color:var(--ok)}
.ui-chip--warn{background:var(--warn-bg);color:var(--warn)}
.ui-chip svg{width:12px;height:12px;flex:none}

/* ── Page head ────────────────────────────────────────────────────────────
   Title, one line of subtitle, actions pushed right. Figma sets the title in
   the display face at 24/32 and the subtitle at 14/20 in muted. */
.ui-pagehead{display:flex;align-items:flex-start;gap:16px;margin:0 0 20px}
.ui-pagehead-main{flex:1;min-width:0}
.ui-pagehead h1{
  margin:0;font-family:var(--font-display);font-weight:600;
  font-size:var(--text-2xl);line-height:var(--leading-2xl);
  letter-spacing:-.02em;color:var(--ink);
}
.ui-pagehead .sub{
  margin:2px 0 0;font-size:var(--text-sm);line-height:var(--leading-sm);color:var(--ink-3);
}
.ui-pagehead-actions{flex:none;display:flex;align-items:center;gap:8px;padding-top:2px}

/* Quiet section label — "Upcoming", "On your plate", "Recent meetings". The
   count rides alongside in a fainter tone rather than inside the label. */
.ui-sectionhead{
  display:flex;align-items:baseline;gap:8px;margin:24px 0 6px;
  font-size:var(--text-xs);line-height:var(--leading-xs);color:var(--ink-3);
}
.ui-sectionhead .n{color:var(--ink-4)}
.ui-sectionhead .spacer{margin-left:auto}

/* ── Rows ─────────────────────────────────────────────────────────────────
   The list row shared by tasks and meetings: hairline-separated, hover wash,
   title left, meta right. */
.ui-row{
  display:flex;align-items:center;gap:12px;padding:10px 8px;
  border-bottom:1px solid var(--line);color:var(--ink);
  text-decoration:none;cursor:pointer;
}
.ui-row:last-child{border-bottom:0}
.ui-row:hover{background:var(--accent-2)}
.ui-row .ttl{
  flex:1;min-width:0;font-size:var(--text-sm);line-height:var(--leading-sm);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.ui-row .meta{
  flex:none;display:flex;align-items:center;gap:10px;
  font-size:var(--text-xs);line-height:var(--leading-xs);color:var(--ink-3);
}
/* Row actions stay hidden until the row is hovered or focused — visible on
   focus too, or they're unreachable by keyboard. */
.ui-row .rowact{opacity:0;transition:opacity .12s ease}
.ui-row:hover .rowact,.ui-row:focus-within .rowact{opacity:1}

/* ── Empty state ──────────────────────────────────────────────────────────*/
.ui-empty{
  display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px;
  padding:40px 20px;color:var(--ink-3);font-size:var(--text-sm);line-height:var(--leading-sm);
}
.ui-empty .t{color:var(--ink);font-weight:500}
.ui-empty svg{width:32px;height:32px;color:var(--ink-4);margin-bottom:4px}

/* ═══════════════════════════════════════════════════════════════════════════
   Legacy class bridge.

   ~130 server-rendered templates were written against base.html's ops-app
   vocabulary — .btn, .card, .chip, .tabs/.tab, .status-pill, .page-head. Rather
   than rewrite every one of them onto .ui-* (a very large diff for no visual
   difference), the old names are re-specified here to the same Figma values.
   One edit moves every screen; templates migrate to _macros/ui.html as they're
   touched for other reasons.

   Scoped to html.pondros so the Amazon-ops product keeps its own look, and
   prefixed with html.* to outrank base.html's inline <style> (this file is
   linked BEFORE that block, so equal specificity would lose).
   ═══════════════════════════════════════════════════════════════════════════ */

/* Buttons — the 32px radius-16 pill from Figma's "Button - Create". */
html.pondros .btn{
  height:32px;padding:6px 12px;border-radius:16px;
  font-size:var(--text-sm);line-height:var(--leading-sm);font-weight:500;
  border:1px solid var(--line);color:var(--ink);background:var(--panel);
  box-shadow:none;
}
html.pondros .btn:hover{background:var(--accent-2);color:var(--ink);border-color:var(--line-2)}
html.pondros .btn-primary,html.pondros .btn.primary,html.pondros .btn-accent{
  background:var(--accent);color:var(--on-accent);border-color:transparent;box-shadow:none;
}
html.pondros .btn-primary:hover,html.pondros .btn.primary:hover,html.pondros .btn-accent:hover{
  background:var(--brand-700);border-color:transparent;color:var(--on-accent);
}
html.pondros .btn-ghost,html.pondros .btn.ghost{border-color:transparent;background:transparent}
html.pondros .btn-ghost:hover{background:var(--accent-2)}
html.pondros .btn-danger,html.pondros .btn.danger{color:var(--crit);border-color:var(--line)}
html.pondros .btn-danger:hover{background:var(--crit-bg);border-color:var(--crit-bg)}
/* Small controls are the 26px fully-round pill the tab row uses. */
html.pondros .btn-sm,html.pondros .btn.btn-sm{
  height:26px;padding:4px 12px;border-radius:var(--radius-pill);
  font-size:var(--text-xs);line-height:var(--leading-xs);
}
html.pondros .btn svg,html.pondros .btn [data-lucide]{width:16px;height:16px}

/* Surfaces — radius 8, hairline, the two-layer resting shadow. The design is
   flat, so the ops app's frosted-glass blur is switched off here. */
html.pondros .card{
  border-radius:var(--radius-sm);border-color:var(--line);
  background:var(--panel);box-shadow:var(--shadow-card);
}
html.pondros .card,html.pondros .modal,html.pondros .menu,html.pondros .dropdown{
  backdrop-filter:none;-webkit-backdrop-filter:none;
}

/* Chips + status pills — radius 8, 12/18, no border. */
html.pondros .chip{
  padding:2px 8px;border-radius:var(--radius-sm);border:none;
  background:var(--chip);color:var(--ink-3);font-weight:400;
  font-size:var(--text-xs);line-height:var(--leading-xs);
}
html.pondros .chip-muted{background:var(--chip);color:var(--ink-3)}
html.pondros .chip-accent{background:var(--accent-2);color:var(--ink)}
html.pondros .status-pill,html.pondros .pill{
  padding:2px 8px;border-radius:var(--radius-sm);font-weight:400;
  font-size:var(--text-xs);line-height:var(--leading-xs);
}

/* Tabs — Figma uses 26px round pills, not an underlined bar. */
html.pondros .tabs{border-bottom:0;gap:2px;margin-bottom:14px}
html.pondros .tab{
  height:26px;padding:4px 12px;border-radius:var(--radius-pill);
  border-bottom:0;margin-bottom:0;color:var(--ink-3);
  font-size:var(--text-xs);line-height:var(--leading-xs);
}
html.pondros .tab:hover{color:var(--ink)}
html.pondros .tab.on,html.pondros .tab.active{
  background:var(--chip);color:var(--ink);border-color:transparent;
  box-shadow:var(--shadow-card);font-weight:400;
}
html.pondros .tab .count{
  font-family:var(--font-display);background:none;color:var(--ink-4);padding:0;
}
html.pondros .tab.on .count{background:none;color:var(--ink-3)}

/* Page head — Figma sets the title at 24/32 with a subtitle underneath and no
   rule beneath it; the divider belonged to the denser ops layout. */
html.pondros .page-head{border-bottom:0;padding-bottom:0;margin-bottom:20px}
html.pondros h1,html.pondros .page-head h1{
  font-size:var(--text-2xl);line-height:var(--leading-2xl);font-weight:600;
}
html.pondros .page-head .sub{font-size:var(--text-sm);line-height:var(--leading-sm)}