/* Help desk screens. Geometry from "SG Help Desk v2" (Claude Design, read 2026-09-16);
   type, colour and chrome from site.css so the site matches the ballot. Where the two
   disagreed (pill nav tabs, Verdana body, Georgia display) the ballot won, per Thomas. */

.checkline{ display:flex; gap:var(--s3); align-items:flex-start; font-size:var(--fs-meta);
  line-height:var(--lh-meta); cursor:pointer; padding:var(--s2) 0; min-height:44px; }
.checkline input{ margin-top:3px; width:18px; height:18px; flex:none; accent-color:var(--action); }

/* Page shells: the design uses 1100 for public pages, 860 for My tickets, 1200 for admin. */
.wrap{ width:min(100% - 2*var(--gutter), 1100px); margin-inline:auto; }
.wrap--narrow{ width:min(100% - 2*var(--gutter), 860px); }
.wrap--wide{ width:min(100% - 2*var(--gutter), 1200px); }
main{ padding:var(--s5) 0 80px; }
.lede{ color:var(--ink-meta); max-width:560px; font-size:var(--fs-meta); margin:0 0 var(--s4); }
.eyebrow{ font-size:var(--fs-label); font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-meta); margin:0 0 var(--s3); }
.eyebrow--warn{ color:var(--danger); letter-spacing:.1em; font-size:11.5px; }

/* Two-column home: feed + sidebar, auto-fit at 300px like the design. */
.cols{ display:grid; grid-template-columns:repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap:var(--s5); align-items:start; }
.cols--2x{ grid-template-columns:repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap:14px; }
.cols--queue{ grid-template-columns:repeat(auto-fit, minmax(min(100%, 560px), 1fr)); gap:var(--s4); }
.side{ display:grid; gap:14px; }
.side .card{ margin:0; padding:var(--s4); }

/* Filter chips: horizontally scrolling row, bleed into the gutter. */
.chips{ display:flex; gap:var(--s2); overflow-x:auto; scrollbar-width:none; margin:0 calc(-1*var(--gutter)) var(--s4); padding:0 var(--gutter) 2px; }
.chips::-webkit-scrollbar{ display:none; }
.chip{ flex:none; min-height:36px; display:inline-flex; align-items:center; gap:6px; padding:0 var(--s3);
  border-radius:var(--r-pill); font-size:13px; text-decoration:none; border:1px solid var(--bar); background:var(--raised); color:var(--ink-body); }
.chip__n{ color:var(--ink-meta); font-variant-numeric:tabular-nums; }
.chip[aria-current="true"]{ background:var(--action); border-color:var(--action); color:#fff; }
.chip[aria-current="true"] .chip__n{ color:#DDDDDD; }

/* Ticket cards (public feed) */
.feed{ display:grid; gap:10px; }
.tcard{ background:var(--raised); border:1px solid var(--bar); border-radius:var(--r-md); padding:14px var(--s4);
  display:grid; grid-template-columns:minmax(0,1fr) auto; gap:6px 14px; }
.tcard__meta{ font-size:12px; color:var(--ink-meta); display:flex; gap:var(--s2); align-items:center; flex-wrap:wrap; }
.tcard__cat{ font-weight:700; color:var(--action); }
.tcard__sum{ grid-column:1/-1; font-size:15px; }
.tcard__res{ grid-column:1/-1; font-size:13.5px; color:var(--ink-meta); border-top:1px solid var(--bar); padding-top:var(--s2); }
.tcard__res strong{ color:var(--affirm); }
.status{ justify-self:end; font-size:12px; font-weight:700; padding:2px 9px; border-radius:var(--r-pill); white-space:nowrap; }
.metoo{ grid-column:1/-1; background:none; border:0; padding:0; font:inherit; font-size:13px; color:var(--action);
  text-decoration:underline; text-underline-offset:2px; cursor:pointer; min-height:36px; display:flex; align-items:center; text-align:left; }
.metoo[disabled]{ text-decoration:none; cursor:default; color:var(--affirm); }

/* Announcements & stats (sidebar) */
.ann{ display:grid; gap:10px; }
.ann__item{ border-top:1px solid var(--bar); padding-top:10px; }
.ann__when{ font-size:12px; color:var(--ink-mute); }
.ann__text{ font-size:14px; margin-top:2px; }
.stats{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.stat__v{ font-family:var(--serif); font-size:28px; color:var(--ink-head); line-height:1; }
.stat__l{ font-size:12px; color:var(--ink-meta); }

/* My tickets */
.mine{ display:grid; gap:var(--s4); }
.mcard{ background:var(--raised); border:1px solid var(--bar); border-radius:var(--r-md); padding:var(--s4) 18px; }
.mcard__head{ display:flex; gap:var(--s3); align-items:flex-start; flex-wrap:wrap; }
.mcard__title{ font-family:var(--serif); font-size:19px; color:var(--ink-body); margin-top:2px; }
.steps{ display:grid; grid-template-columns:repeat(5,1fr); gap:4px; margin:var(--s4) 0 6px; }
.step{ display:grid; gap:5px; }
.step__bar{ height:5px; border-radius:3px; background:var(--bar); }
.step__l{ font-size:11px; line-height:1.3; color:var(--ink-mute); }
.step--done .step__bar{ background:var(--action); }
.step--resolved .step__bar{ background:var(--affirm); }
.step--now .step__l{ color:var(--ink-body); font-weight:700; }
.log{ margin-top:14px; display:grid; gap:var(--s2); }
.log__row{ display:grid; grid-template-columns:64px minmax(0,1fr); gap:10px; font-size:13.5px; padding:var(--s2) 0; border-top:1px solid var(--bar); }
.log__row--internal{ background:var(--row); border-radius:var(--r-sm); padding-inline:var(--s2); }
.log__when{ color:var(--ink-mute); }
.actions{ display:flex; gap:10px; margin-top:var(--s3); flex-wrap:wrap; align-items:flex-start; }
.actions form{ margin:0; }
.btn--sm{ min-height:40px; padding:0 14px; font-size:13px; }
.btn--affirm{ border-color:var(--affirm); color:var(--affirm); background:transparent; }
.comment{ display:flex; gap:var(--s2); flex:1 1 320px; }
.comment input{ min-height:44px; padding:0 var(--s3); }

/* Databank */
.kb-search{ min-height:44px; padding:0 14px; background:var(--raised); margin-bottom:var(--s3); }
.kb-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap:var(--s3); }
.kb{ background:var(--raised); border:1px solid var(--bar); border-radius:var(--r-md); padding:var(--s4); display:grid; gap:var(--s2); align-content:start; }
.kb__meta{ display:flex; justify-content:space-between; gap:var(--s2); font-size:12px; color:var(--ink-meta); }
.kb__type{ font-weight:700; color:var(--action); }
.kb__fresh{ font-weight:700; }
.kb__title{ font-family:var(--serif); font-size:18px; color:var(--ink-body); line-height:1.3; }
.kb__body{ font-size:13.5px; color:var(--ink-meta); line-height:1.5; }
.kb__foot{ font-size:12px; color:var(--ink-mute); border-top:1px solid var(--bar); padding-top:var(--s2); display:flex; justify-content:space-between; gap:var(--s2); flex-wrap:wrap; }
.kb__from{ font-size:12px; color:var(--affirm); }

/* Admin */
.adm-head{ display:flex; gap:var(--s3); align-items:center; flex-wrap:wrap; margin-bottom:14px; }
.adm-head h1{ font-size:26px; margin:2px 0 0; }
.adm-who{ font-size:12.5px; color:var(--ink-meta); }
.tabs{ display:flex; gap:4px; overflow-x:auto; scrollbar-width:none; margin:0 calc(-1*var(--gutter)) var(--s4); padding:0 var(--gutter); border-bottom:1px solid var(--bar); }
.tabs a{ flex:none; min-height:44px; display:inline-flex; align-items:center; gap:6px; padding:0 var(--s3); font-size:14px; text-decoration:none;
  border-bottom:2px solid transparent; color:var(--ink-meta); }
.tabs a[aria-current="page"]{ color:var(--action); border-bottom-color:var(--action); font-weight:700; }
.tabs .n{ font-size:11px; font-weight:700; padding:1px 7px; border-radius:var(--r-pill); background:var(--bar); color:var(--ink-meta); }
.tabs a[aria-current="page"] .n{ background:var(--action); color:#fff; }
.kpis{ display:grid; grid-template-columns:repeat(auto-fit, minmax(min(100%, 150px), 1fr)); gap:10px; margin-bottom:var(--s4); }
.kpi{ background:var(--raised); border:1px solid var(--bar); border-radius:var(--r-md); padding:12px 14px; }
.kpi__l{ font-size:11.5px; color:var(--ink-meta); letter-spacing:.04em; }
.kpi__v{ display:flex; align-items:baseline; gap:var(--s2); margin-top:4px; }
.kpi__v b{ font-family:var(--serif); font-weight:400; font-size:28px; line-height:1; }
.kpi__d{ font-size:12px; font-weight:700; }
.kpi__n{ font-size:11.5px; color:var(--ink-mute); margin-top:3px; }
.panel-h{ display:flex; justify-content:space-between; align-items:baseline; margin-bottom:10px; }
.panel-h a{ font-size:12.5px; }
.rows{ display:grid; gap:var(--s2); }
.row{ display:grid; grid-template-columns:8px minmax(0,1fr) auto; gap:10px; align-items:center; padding:var(--s2) 0; border-top:1px solid var(--bar); text-decoration:none; color:inherit; }
.row--2{ grid-template-columns:minmax(0,1fr) auto; font-size:13.5px; }
.dot{ width:8px; height:8px; border-radius:50%; }
.row__t{ font-size:13.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.row__s{ font-size:12px; color:var(--ink-meta); }
.row__id{ font-size:12px; color:var(--ink-mute); white-space:nowrap; }
.cadence{ font-size:12px; color:var(--ink-mute); }
.bars{ display:grid; grid-template-columns:repeat(8,1fr); gap:6px; align-items:end; height:110px; }
.bars > div{ display:flex; flex-direction:column; justify-content:flex-end; gap:2px; height:110px; }
.bars i{ display:block; }
.bars i.r{ background:var(--affirm); border-radius:3px 3px 0 0; }
.bars i.o{ background:var(--action); border-radius:0 0 3px 3px; }
.bars-x{ display:grid; grid-template-columns:repeat(8,1fr); gap:6px; font-size:10.5px; color:var(--ink-mute); margin-top:4px; text-align:center; }
.legend{ display:flex; gap:14px; font-size:12px; color:var(--ink-meta); margin-top:10px; }
.legend i{ display:inline-block; width:10px; height:10px; border-radius:2px; vertical-align:-1px; }
.hbars{ display:grid; gap:7px; }
.hbar{ display:grid; grid-template-columns:110px minmax(0,1fr) 28px; gap:var(--s2); align-items:center; font-size:12.5px; }
.hbar--wide{ grid-template-columns:150px minmax(0,1fr) 28px; }
.hbar span:first-child{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.hbar > div{ height:8px; border-radius:4px; background:var(--bar); overflow:hidden; }
.hbar > div > i{ display:block; height:100%; background:var(--action); }
.hbar--affirm > div > i{ background:var(--affirm); }
.hbar em{ text-align:right; color:var(--ink-meta); font-style:normal; }

/* Queue */
.qlist{ display:grid; gap:var(--s2); }
.qrow{ background:var(--raised); border:1px solid var(--bar); border-radius:var(--r-md); padding:12px 14px; text-decoration:none; color:inherit;
  display:grid; grid-template-columns:minmax(0,1fr) auto; gap:4px 10px; }
.qrow[aria-current="true"]{ background:var(--wash-pill); border-color:var(--action); }
.qrow__t{ font-size:14.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.qrow__s{ font-size:12px; color:var(--ink-meta); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.qrow__f{ grid-column:1/-1; display:flex; gap:var(--s3); font-size:12px; color:var(--ink-meta); flex-wrap:wrap; }
.qrow .status{ font-size:11.5px; padding:2px 8px; align-self:start; }
.detail{ position:sticky; top:88px; padding:var(--s4); margin:0; }
.detail__t{ font-family:var(--serif); font-size:19px; color:var(--ink-head); margin:2px 0 var(--s2); }
.detail__d{ font-size:13.5px; line-height:1.5; background:var(--row); border-radius:var(--r-sm); padding:10px 12px; }
.kv{ display:grid; grid-template-columns:auto 1fr; gap:4px 12px; font-size:13px; margin-top:12px; color:var(--ink-meta); }
.kv strong{ color:var(--ink-body); }
.fgrid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(140px,1fr)); gap:var(--s2); margin-top:14px; }
.f{ display:grid; gap:4px; font-size:12.5px; color:var(--ink-meta); }
.f select, .f input, .f textarea{ min-height:40px; padding:0 10px; font-size:14px; background:var(--raised); }
.f textarea{ padding:var(--s2) 10px; min-height:0; }
.f .hint{ color:var(--ink-mute); }
.checks{ display:flex; gap:14px; flex-wrap:wrap; font-size:13px; }
.checks label{ display:flex; gap:var(--s2); align-items:center; min-height:36px; }
.checks input{ width:16px; height:16px; accent-color:var(--action); }
.stack-sm{ display:grid; gap:var(--s2); margin-top:var(--s2); }
.btnrow{ display:flex; gap:var(--s2); flex-wrap:wrap; }
.btnrow .btn:first-child{ flex:1; min-width:160px; font-weight:700; }

/* Team / reports / kb health */
.grid-cards{ display:grid; grid-template-columns:repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap:var(--s3); }
.grid-cards .card{ margin:0; padding:var(--s4); }
.ocard__role{ font-family:var(--serif); font-size:18px; color:var(--ink-head); }
.ocard__m{ font-size:12.5px; color:var(--ink-meta); }
.ocard__n{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s2); margin-top:12px; }
.ocard__n b{ display:block; font-family:var(--serif); font-weight:400; font-size:22px; line-height:1; color:var(--ink-head); }
.ocard__n small{ font-size:11px; color:var(--ink-meta); }
.ocard__f{ font-size:12px; color:var(--ink-mute); margin-top:10px; border-top:1px solid var(--bar); padding-top:var(--s2); }

/* Floating assistant */
.ask{ position:fixed; right:16px; bottom:calc(16px + env(safe-area-inset-bottom)); z-index:90; min-height:52px; padding:0 18px 0 16px;
  border-radius:var(--r-pill); background:var(--action); color:#fff; border:0; display:flex; align-items:center; gap:10px;
  box-shadow:0 6px 20px rgba(0,53,107,.3); cursor:pointer; font:inherit; font-size:14.5px; font-weight:700; }
.ask[hidden]{ display:none; }
.ask i{ width:10px; height:10px; border-radius:50%; background:#fff; box-shadow:0 0 0 3px rgba(255,255,255,.25); }
.sheet-bg{ position:fixed; inset:0; z-index:95; background:rgba(0,0,0,.18); }
.sheet{ position:fixed; z-index:96; right:0; bottom:0; left:0; max-height:92vh; display:flex; flex-direction:column; background:var(--raised);
  border-radius:16px 16px 0 0; box-shadow:0 -10px 40px rgba(0,0,0,.18); animation:sheetUp .25s ease; }
@media (min-width:700px){ .sheet{ left:auto; right:20px; bottom:20px; width:400px; border-radius:16px; } }
@keyframes sheetUp{ 0%{ opacity:0; transform:translateY(24px); } 100%{ opacity:1; transform:none; } }
.sheet__h{ display:flex; align-items:center; gap:10px; padding:12px var(--s4); border-bottom:1px solid var(--bar); }
.sheet__h i{ width:10px; height:10px; border-radius:50%; background:var(--affirm); }
.sheet__h b{ font-size:14.5px; display:block; }
.sheet__h small{ font-size:12px; color:var(--ink-meta); }
.sheet__x{ width:44px; height:44px; display:flex; align-items:center; justify-content:center; border-radius:50%; border:0; background:none; cursor:pointer; color:var(--ink-meta); font-size:18px; margin-left:auto; }
.sheet__m{ flex:1; overflow-y:auto; padding:14px var(--s4); display:grid; gap:12px; align-content:start; min-height:240px; }
.msg{ display:flex; }
.msg--user{ justify-content:flex-end; }
.msg > div{ max-width:88%; padding:10px 14px; border-radius:var(--r-md); font-size:14.5px; line-height:1.5; background:var(--row); border:1px solid var(--bar); }
.msg--user > div{ background:var(--action); color:#fff; border-color:var(--action); }
.msg__src{ margin-top:var(--s2); padding-top:var(--s2); border-top:1px solid var(--bar); font-size:12.5px; color:var(--ink-meta); }
.msg__acts{ display:flex; gap:var(--s2); flex-wrap:wrap; margin-top:10px; }
.msg__acts button{ min-height:40px; padding:0 12px; border-radius:var(--r-sm); font:inherit; font-size:13px; cursor:pointer; border:1.5px solid var(--action); background:#fff; color:var(--action); }
.msg__acts button:first-child{ background:var(--action); color:#fff; }
.tform{ background:var(--row); border-radius:var(--r-md); padding:14px; display:grid; gap:10px; }
.tform h3{ margin:0; font-size:18px; }
.tform .f input, .tform .f select, .tform .f textarea{ min-height:44px; }
.tform .note{ font-size:12px; color:var(--ink-meta); }
.sheet__in{ border-top:1px solid var(--bar); padding:10px 12px calc(10px + env(safe-area-inset-bottom)); display:flex; gap:var(--s2); }
.sheet__in input{ flex:1; min-width:0; min-height:44px; padding:0 14px; }
.sheet__in button{ min-height:44px; padding:0 var(--s4); border-radius:var(--r-sm); background:var(--action); color:#fff; border:0; font:inherit; cursor:pointer; }

/* Sign-in status line & misc */
.whoami{ font-size:12px; color:var(--ink-meta); margin-bottom:6px; }
.empty{ color:var(--ink-meta); font-size:var(--fs-meta); }