/* dash-ui.css — shared component library for the robust dashboard surfaces
   (Home, Accounts, Outputs). Built on flock.css tokens. These pages render
   INSIDE the index.html shell iframe, so no header/tab chrome here. */

/* flock.css defaults body to DM Mono; force the readable Söhne body font on
   every dashboard surface (the display/condensed fonts stay on titles only). */
body { font-family: var(--ui-sans); }

.page { max-width: 1180px; margin: 0 auto; padding: 20px 22px 70px; }
.crumb { font-size: 12px; color: var(--muted); margin-bottom: 4px; }
.ptitle { font-family: var(--display); font-weight: 400; font-size: 30px; line-height: 1; color: var(--ink); margin: 0; }
.psub { font-size: 13px; color: var(--muted); margin: 6px 0 18px; max-width: 80ch; line-height: 1.5; }

/* Section header */
.h2 { font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--accent); font-weight: 700;
  display: flex; align-items: center; gap: 9px; margin: 26px 0 12px; padding-bottom: 7px; border-bottom: 2px solid var(--line-strong); }
.h2 .more { margin-left: auto; font-size: 11px; font-weight: 700; color: var(--gold); text-transform: none; letter-spacing: 0; cursor: pointer; }
.h2 .more:hover { text-decoration: underline; }
/* Mobile: chips inside an .h2 were squeezing the title into a 3-line ragged
   column (audit 2026-07-08) — let the chip row wrap below the title instead. */
@media (max-width: 560px) {
  .h2 { flex-wrap: wrap; row-gap: 6px; }
}

/* KPI cards */
.kpis { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; }
@media (max-width: 900px){ .kpis { grid-template-columns: repeat(3,1fr); } }
@media (max-width: 520px){ .kpis { grid-template-columns: repeat(2,1fr); } }
.kpi { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 14px 15px; box-shadow: var(--shadow); }
.kpi .n { font-family: var(--display); font-weight: 400; font-size: 30px; line-height: 1; color: var(--accent); }
.kpi .l { font-size: 9.5px; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); font-weight: 700; margin-top: 6px; line-height: 1.25; }
.kpi.dark { background: var(--ink); border-color: var(--ink); }
.kpi.dark .n { color: var(--gold); } .kpi.dark .l { color: var(--gold-soft); }

/* Panel + layout */
.panel { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 16px 18px; box-shadow: var(--shadow); }
.cols2 { display: grid; grid-template-columns: 1.3fr 1fr; gap: 16px; align-items: start; }
@media (max-width: 900px){ .cols2 { grid-template-columns: 1fr; } }

/* Buttons / chips */
.btn { font: inherit; font-size: 12.5px; font-weight: 700; border-radius: var(--radius-pill); padding: 9px 15px; cursor: pointer;
  border: 1px solid var(--line-strong); background: #fff; color: var(--ink); display: inline-flex; align-items: center; gap: 7px; }
.btn:hover { border-color: var(--ink); }
.btn.gold { background: var(--gold); border-color: var(--gold); color: #1a1205; } .btn.gold:hover { filter: brightness(1.05); }
.btn.green { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn.ghost { background: none; }
.btn:disabled { opacity: .5; cursor: default; }
.chip { font: inherit; display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; border: 1px solid var(--line-strong);
  background: #fff; border-radius: var(--radius-pill); padding: 6px 12px; color: var(--ink); white-space: nowrap; cursor: pointer; user-select: none; }
.chip:hover { border-color: var(--ink); }
.chip.on { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.chip .x { opacity: .6; }

/* Badges (tier / status) */
.badge { font-size: 10px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; padding: 3px 8px; border-radius: var(--radius-pill); white-space: nowrap; display: inline-block; }
.t1 { background: rgba(77,122,63,.16); color: var(--accent); } .t2 { background: var(--wash-gold-2); color: var(--gold-text); } .t3 { background: var(--wash-rose); color: var(--rose); }
.st-cust { background: rgba(77,122,63,.16); color: var(--accent); } .st-warm { background: var(--wash-gold-2); color: var(--gold-text); }
.st-cold { background: var(--paper-2); color: var(--muted); } .st-urgent { background: var(--wash-rose); color: var(--rose); }
/* Needs input: waiting on a decision/answer from Kim. Solid gold (same pair
   dash-ui.css's .btn.gold already uses) so it reads stronger than the soft
   st-warm wash used for "In progress". */
.st-needs { background: var(--gold); color: #1a1205; }

/* Filter bar */
.filterbar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 12px; }
.search { display: flex; align-items: center; gap: 8px; background: #fff; border: 1px solid var(--line-strong); border-radius: var(--radius-pill);
  padding: 8px 14px; font-size: 13px; color: var(--muted); min-width: 240px; }
.search input { border: 0; outline: 0; background: none; font: inherit; color: var(--ink); width: 100%; }
.count { font-size: 12px; color: var(--muted); margin-left: auto; font-weight: 700; white-space: nowrap; }
select.fl { font: inherit; font-size: 12.5px; font-weight: 600; border: 1px solid var(--line-strong); border-radius: var(--radius-pill);
  padding: 7px 12px; background: #fff; color: var(--ink); cursor: pointer; }

/* Tables */
.tbl { width: 100%; border-collapse: separate; border-spacing: 0; background: #fff; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; font-size: 13px; }
.tbl th { text-align: left; font-size: 10px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); font-weight: 700; background: var(--paper-2); padding: 10px 12px; border-bottom: 1px solid var(--line); position: sticky; top: 0; }
.tbl th.sortable { cursor: pointer; } .tbl th.sortable:hover { color: var(--ink); }
.tbl td { padding: 11px 12px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.tbl tr:last-child td { border-bottom: 0; }
.tbl tbody tr { cursor: pointer; }
.tbl tbody tr:hover { background: var(--cream-2); }
.tbl .nm { font-weight: 700; color: var(--ink); }
.tbl .sub { font-size: 11.5px; color: var(--muted); }
.muted { color: var(--muted); } .right { text-align: right; } .nowrap { white-space: nowrap; }

/* Checkbox */
.ck { width: 15px; height: 15px; border: 1.5px solid var(--line-strong); border-radius: 4px; display: inline-block; vertical-align: middle; cursor: pointer; }
.ck.on { background: var(--accent); border-color: var(--accent); position: relative; }
.ck.on::after { content: "✓"; color: #fff; font-size: 11px; position: absolute; left: 1.5px; top: -2px; }

/* Bulk action bar */
.bulk { display: flex; align-items: center; gap: 10px; background: var(--ink); color: var(--paper); border-radius: 10px; padding: 9px 14px; margin-bottom: 10px; font-size: 12.5px; flex-wrap: wrap; }
.bulk .btn { padding: 6px 12px; }
.bulk .btn.ghost { color: var(--paper); border-color: var(--gold-soft); }

/* Detail field rows */
.field { padding: 11px 0; border-bottom: 1px solid var(--line); }
.field:last-child { border-bottom: 0; }
.field .k { font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); font-weight: 700; margin-bottom: 4px; }
.field .v { font-size: 13.5px; line-height: 1.55; color: var(--ink-soft); }
.field .v b { color: var(--ink); }
.pillrow { display: flex; flex-wrap: wrap; gap: 7px; }
.ppill { font-size: 12px; font-weight: 600; border: 1px solid var(--line-strong); background: #fff; border-radius: var(--radius-pill); padding: 6px 12px; }

/* Output rows */
.outrow { display: flex; align-items: center; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--line); }
.outrow:last-child { border-bottom: 0; }
.outrow .oname { font-weight: 700; font-size: 13.5px; flex: 1; }
.outrow .ostat { font-size: 11px; font-weight: 700; }
.ok { color: var(--accent); } .pend { color: var(--gold); } .none { color: var(--muted-2); }
.mini { font-size: 11px; color: var(--muted); }

/* Slide-over detail drawer */
.drawer-back { position: fixed; inset: 0; background: rgba(13,30,7,.45); z-index: 50; display: none; }
.drawer-back.on { display: block; }
.drawer { position: fixed; top: 0; right: 0; height: 100%; width: min(560px, 94vw); background: var(--paper); z-index: 51;
  box-shadow: -6px 0 30px rgba(0,0,0,.22); transform: translateX(100%); transition: transform .22s ease;
  overflow-y: auto; -webkit-overflow-scrolling: touch; }
.drawer.on { transform: translateX(0); }
/* Full-bleed on phones: the 94vw cap left a purposeless ~20px sliver of dimmed
   backdrop at 390px wide (same "go full-width on mobile" treatment already
   used by the Ask Claude side panel and the shell popup). */
@media (max-width: 640px) {
  .drawer { width: 100vw; }
}

/* Pagination / load more */
.loadmore { text-align: center; margin: 14px 0; }

/* Executive share view (F25): every edit/internal control is stamped with
   data-edit-chrome (buttons, chips, toggles that write data or expose
   internal ops), read/navigation stays. body.share-mode is set by the tiny
   snippet each touched page carries when the URL has share=1. */
body.share-mode [data-edit-chrome] { display: none !important; }