/* HQ design system — ops.gunzaai.com
   Cool slate canvas, white working sheet, ink type. One loud element: the timer dock.
   People have colors (Chris cobalt, Alexia magenta) so ownership reads at a glance. */
:root{
  --hq-canvas:#E9EDF1; --hq-sheet:#FFFFFF; --hq-sunk:#F3F5F8;
  --hq-ink:#121A23; --hq-ink-2:#465463; --hq-ink-3:#7F8C99; --hq-line:#D9DFE6; --hq-line-2:#ECEFF3;
  --hq-go:#0B7A62; --hq-go-soft:#DDF1EB;
  --hq-late:#C8372D; --hq-late-soft:#FBE6E3;
  --hq-warn:#B86E00; --hq-warn-soft:#FBEFD9;
  --hq-chris:#2B50D6; --hq-chris-soft:#E2E8FB;
  --hq-alexia:#BF3A7A; --hq-alexia-soft:#F8E1EC;
  --hq-p1:#C8372D; --hq-p2:#D98200; --hq-p3:#2B50D6; --hq-p4:#9AA6B2;
  --hq-live:#FF4F2E;
  --hq-font:'Geist',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --hq-digits:'Geist Mono',ui-monospace,Menlo,monospace;
}
body.hq-body{ background:var(--hq-canvas); }
body.hq-body > div > main{ max-width:none !important; padding:0 !important; }

.hq{ font-family:var(--hq-font); color:var(--hq-ink); font-size:14.5px; line-height:1.45;
  max-width:1240px; margin:0 auto; padding:28px 28px 120px; -webkit-font-smoothing:antialiased; }
.hq a{ color:inherit; }
.hq *:focus-visible{ outline:2px solid var(--hq-chris); outline-offset:2px; border-radius:6px; }
.hq .tnum{ font-variant-numeric:tabular-nums; }

/* ---------- page head ---------- */
.hq-head{ display:flex; align-items:flex-end; gap:16px; flex-wrap:wrap; margin-bottom:20px; }
.hq-title{ font-size:30px; line-height:1.1; font-weight:650; letter-spacing:-.025em; margin:0; }
.hq-sub{ color:var(--hq-ink-2); margin-top:6px; font-size:14.5px; }
.hq-head-r{ margin-left:auto; display:flex; gap:8px; align-items:center; flex-wrap:wrap; }

/* person switch (admin) */
.hq-who{ display:inline-flex; background:var(--hq-sheet); border:1px solid var(--hq-line); border-radius:999px; padding:3px; gap:2px; }
.hq-who a{ display:flex; align-items:center; gap:7px; padding:5px 12px 5px 5px; border-radius:999px; text-decoration:none; font-weight:550; font-size:13px; color:var(--hq-ink-2); }
.hq-who a.on{ background:var(--hq-ink); color:#fff; }
.hq-av{ width:24px; height:24px; border-radius:999px; display:inline-flex; align-items:center; justify-content:center; font-size:11.5px; font-weight:700; color:#fff; flex:none; }
.hq-av.chris{ background:var(--hq-chris); } .hq-av.alexia{ background:var(--hq-alexia); }
.hq-av.sm{ width:20px; height:20px; font-size:10px; }
.hq-av.lg{ width:40px; height:40px; font-size:16px; }

/* ---------- buttons ---------- */
.hq-btn{ display:inline-flex; align-items:center; gap:7px; height:36px; padding:0 14px; border-radius:9px; border:1px solid var(--hq-line); background:var(--hq-sheet); color:var(--hq-ink); font:inherit; font-weight:550; font-size:13.5px; cursor:pointer; text-decoration:none; white-space:nowrap; }
.hq-btn:hover{ border-color:#C3CBD4; }
.hq-btn.ink{ background:var(--hq-ink); border-color:var(--hq-ink); color:#fff; }
.hq-btn.ink:hover{ background:#26313d; }
.hq-btn.go{ background:var(--hq-go); border-color:var(--hq-go); color:#fff; }
.hq-btn.ghost{ background:transparent; border-color:transparent; color:var(--hq-ink-2); }
.hq-btn.ghost:hover{ background:rgba(18,26,35,.06); }
.hq-btn.sm{ height:30px; padding:0 10px; font-size:12.5px; border-radius:8px; }
.hq-btn svg{ width:15px; height:15px; }

/* ---------- quick add ---------- */
.hq-add{ display:flex; align-items:center; gap:10px; background:var(--hq-sheet); border:1px solid var(--hq-line); border-radius:12px; padding:6px 6px 6px 14px; margin-bottom:22px; }
.hq-add:focus-within{ border-color:var(--hq-ink); box-shadow:0 0 0 3px rgba(18,26,35,.08); }
.hq-add .plus{ color:var(--hq-ink-3); font-size:20px; line-height:1; }
.hq-add input{ flex:1; border:0; outline:0; background:transparent; font:inherit; font-size:15px; padding:9px 0; min-width:0; color:var(--hq-ink); }
.hq-add input::placeholder{ color:var(--hq-ink-3); }
.hq-add kbd{ font-family:var(--hq-digits); font-size:11px; color:var(--hq-ink-3); border:1px solid var(--hq-line); border-radius:5px; padding:1px 6px; }
.hq-hint{ font-size:12.5px; color:var(--hq-ink-3); margin:-14px 0 22px 14px; }
.hq-hint code{ font-family:var(--hq-digits); font-size:11.5px; background:var(--hq-sunk); border-radius:4px; padding:0 4px; color:var(--hq-ink-2); }

/* ---------- layout ---------- */
.hq-grid{ display:grid; grid-template-columns:minmax(0,1fr) 340px; gap:28px; align-items:start; }
.hq-split{ display:grid; grid-template-columns:220px minmax(0,1fr); gap:28px; align-items:start; }
@media (max-width:1100px){ .hq-grid{ grid-template-columns:1fr; } }
@media (max-width:860px){ .hq-split{ grid-template-columns:1fr; } .hq{ padding:18px 16px 120px; } .hq-title{ font-size:25px; } }

/* ---------- task sheet ---------- */
.hq-sheet{ background:var(--hq-sheet); border:1px solid var(--hq-line); border-radius:14px; overflow:hidden; }
.hq-group + .hq-group{ border-top:1px solid var(--hq-line); }
.hq-ghead{ display:flex; align-items:baseline; gap:10px; padding:14px 18px 8px; }
.hq-ghead h3{ margin:0; font-size:13.5px; font-weight:650; }
.hq-ghead .n{ font-size:12.5px; color:var(--hq-ink-3); }
.hq-ghead.late h3{ color:var(--hq-late); }
.hq-ghead .r{ margin-left:auto; }

.hq-task{ display:flex; align-items:flex-start; gap:12px; padding:10px 18px; border-top:1px solid var(--hq-line-2); position:relative; }
.hq-group .hq-task:first-of-type{ border-top:0; }
.hq-task:hover{ background:#FAFBFC; }
.hq-task.is-done .hq-ttl{ text-decoration:line-through; color:var(--hq-ink-3); }
.hq-task.is-live{ background:#FFF6F3; }
.hq-task.is-live::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:3px; background:var(--hq-live); }
.hq-chk{ flex:none; width:20px; height:20px; margin-top:1px; border-radius:999px; border:2px solid var(--hq-p4); background:transparent; cursor:pointer; display:flex; align-items:center; justify-content:center; padding:0; transition:background .12s; }
.hq-chk.p-urgent{ border-color:var(--hq-p1); background:var(--hq-late-soft); }
.hq-chk.p-high{ border-color:var(--hq-p2); background:var(--hq-warn-soft); }
.hq-chk.p-medium{ border-color:var(--hq-p3); }
.hq-chk svg{ width:12px; height:12px; opacity:0; color:#fff; }
.hq-chk:hover svg{ opacity:.6; color:var(--hq-ink-2); }
.is-done .hq-chk{ background:var(--hq-go); border-color:var(--hq-go); }
.is-done .hq-chk svg{ opacity:1; color:#fff; }
.hq-tbody{ flex:1; min-width:0; }
.hq-ttl{ font-size:14.5px; line-height:1.4; text-decoration:none; display:block; overflow-wrap:anywhere; }
.hq-ttl:hover{ text-decoration:underline; text-decoration-color:var(--hq-line); }
.hq-meta{ display:flex; flex-wrap:wrap; gap:4px 12px; margin-top:3px; font-size:12.5px; color:var(--hq-ink-3); align-items:center; }
.hq-meta .late{ color:var(--hq-late); font-weight:550; }
.hq-meta .today{ color:var(--hq-go); font-weight:550; }
.hq-meta .proj::before{ content:"#"; opacity:.6; }
.hq-meta .agent{ color:var(--hq-ink-2); }
.hq-meta .time{ font-family:var(--hq-digits); font-size:11.5px; color:var(--hq-ink-2); }
.hq-desc{ margin-top:6px; font-size:13px; line-height:1.5; color:var(--hq-ink-2); cursor:pointer; max-width:72ch; }
.hq-desc p{ margin:0; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.hq-desc p + p{ margin-top:3px; }
.hq-desc p.src{ -webkit-line-clamp:1; font-size:12px; color:var(--hq-ink-3); }
.hq-desc p.src a{ color:var(--hq-ink-2); text-decoration:underline; }
.hq-desc.open p{ -webkit-line-clamp:unset; display:block; }
.hq-tact{ display:flex; gap:2px; align-items:center; opacity:0; transition:opacity .1s; }
.hq-task:hover .hq-tact, .hq-task:focus-within .hq-tact{ opacity:1; }
@media (hover:none){ .hq-tact{ opacity:1; } }
.hq-ico{ width:30px; height:30px; display:inline-flex; align-items:center; justify-content:center; border-radius:8px; border:0; background:transparent; color:var(--hq-ink-2); cursor:pointer; padding:0; }
.hq-ico:hover{ background:var(--hq-sunk); color:var(--hq-ink); }
.hq-ico svg{ width:16px; height:16px; }
.hq-ico.play:hover{ color:var(--hq-live); background:#FFEDE8; }
.hq-drag{ cursor:grab; color:var(--hq-line); position:absolute; left:3px; top:12px; opacity:0; }
.hq-task:hover .hq-drag{ opacity:1; color:var(--hq-ink-3); }
.sortable-ghost{ opacity:.35; }

/* menus (native <details>) */
.hq-menu{ position:relative; }
.hq-menu > summary{ list-style:none; }
.hq-menu > summary::-webkit-details-marker{ display:none; }
.hq-pop{ position:absolute; right:0; top:34px; z-index:30; min-width:190px; background:var(--hq-sheet); border:1px solid var(--hq-line); border-radius:11px; box-shadow:0 12px 32px rgba(18,26,35,.14); padding:5px; }
.hq-pop button, .hq-pop a{ display:flex; width:100%; align-items:center; gap:8px; padding:7px 10px; border:0; background:none; font:inherit; font-size:13px; color:var(--hq-ink); border-radius:7px; cursor:pointer; text-align:left; text-decoration:none; }
.hq-pop button:hover, .hq-pop a:hover{ background:var(--hq-sunk); }
.hq-pop .sep{ height:1px; background:var(--hq-line-2); margin:4px 2px; }
.hq-pop .lbl{ font-size:11.5px; color:var(--hq-ink-3); padding:6px 10px 2px; }

.hq-empty{ padding:34px 18px; text-align:center; color:var(--hq-ink-2); }
.hq-empty strong{ display:block; color:var(--hq-ink); font-size:15px; margin-bottom:4px; }

/* ---------- rail ---------- */
.hq-rail{ display:flex; flex-direction:column; gap:26px; }
.hq-rail h2{ font-size:13.5px; font-weight:650; margin:0 0 10px; display:flex; align-items:baseline; gap:8px; }
.hq-rail h2 .n{ margin-left:auto; font-weight:500; color:var(--hq-ink-3); font-size:12.5px; }
.hq-box{ background:var(--hq-sheet); border:1px solid var(--hq-line); border-radius:14px; padding:14px 16px; }

/* time today meter */
.hq-meter{ height:10px; border-radius:999px; background:var(--hq-sunk); overflow:hidden; position:relative; margin:8px 0 6px; }
.hq-meter > i{ display:block; height:100%; background:var(--hq-go); border-radius:999px; }
.hq-meter.over > i{ background:var(--hq-warn); }
.hq-big{ font-family:var(--hq-digits); font-size:30px; font-weight:600; letter-spacing:-.03em; line-height:1; }
.hq-big small{ font-family:var(--hq-font); font-size:13px; color:var(--hq-ink-3); font-weight:500; letter-spacing:0; margin-left:6px; }
.hq-tlist{ list-style:none; margin:10px 0 0; padding:0; }
.hq-tlist li{ display:flex; gap:10px; padding:6px 0; border-top:1px solid var(--hq-line-2); font-size:13px; }
.hq-tlist li span:first-child{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.hq-tlist li span:last-child{ font-family:var(--hq-digits); font-size:12px; color:var(--hq-ink-2); }

/* routines checklist */
.hq-routine{ display:flex; gap:11px; align-items:flex-start; padding:9px 0; border-top:1px solid var(--hq-line-2); }
.hq-routine:first-child{ border-top:0; padding-top:2px; }
.hq-routine .hq-chk{ border-radius:6px; border-color:#B8C2CC; }
.hq-routine.is-done .hq-chk{ background:var(--hq-go); border-color:var(--hq-go); }
.hq-routine.is-done .hq-chk svg{ opacity:1; color:#fff; }
.hq-routine .t{ font-size:13.5px; line-height:1.35; }
.hq-routine.is-done .t{ color:var(--hq-ink-3); text-decoration:line-through; }
.hq-routine .m{ font-size:12px; color:var(--hq-ink-3); margin-top:2px; }
.hq-routine.late .m{ color:var(--hq-late); font-weight:550; }
.hq-routine a.go{ font-size:12px; color:var(--hq-ink-2); text-decoration:underline; text-decoration-color:var(--hq-line); }
.hq-prog{ display:flex; gap:3px; margin-bottom:10px; }
.hq-prog i{ flex:1; height:5px; border-radius:3px; background:var(--hq-sunk); }
.hq-prog i.on{ background:var(--hq-go); }

/* other person snapshot */
.hq-peer{ display:flex; gap:12px; align-items:center; text-decoration:none; }
.hq-peer .s{ font-size:12.5px; color:var(--hq-ink-2); }
.hq-dot{ width:8px; height:8px; border-radius:999px; background:var(--hq-ink-3); display:inline-block; }
.hq-dot.live{ background:var(--hq-live); box-shadow:0 0 0 4px rgba(255,79,46,.18); animation:hqPulse 1.6s ease-in-out infinite; }
@keyframes hqPulse{ 50%{ box-shadow:0 0 0 7px rgba(255,79,46,.05); } }
@media (prefers-reduced-motion:reduce){ .hq-dot.live{ animation:none; } }

/* wrap-up */
.hq-wrap textarea{ width:100%; border:1px solid var(--hq-line); border-radius:10px; padding:10px 12px; font:inherit; font-size:13.5px; resize:vertical; min-height:70px; background:var(--hq-sheet); }
.hq-wrap textarea:focus{ outline:none; border-color:var(--hq-ink); }
.hq-wrap label{ display:block; font-size:12.5px; color:var(--hq-ink-2); margin:10px 0 5px; }

/* ---------- tasks page side nav ---------- */
.hq-side{ position:sticky; top:20px; }
.hq-side a.v{ display:flex; align-items:center; gap:10px; padding:7px 10px; border-radius:8px; text-decoration:none; color:var(--hq-ink-2); font-weight:520; font-size:14px; }
.hq-side a.v:hover{ background:rgba(18,26,35,.05); color:var(--hq-ink); }
.hq-side a.v.on{ background:var(--hq-sheet); color:var(--hq-ink); font-weight:620; box-shadow:0 0 0 1px var(--hq-line); }
.hq-side a.v .c{ margin-left:auto; font-size:12px; color:var(--hq-ink-3); font-variant-numeric:tabular-nums; }
.hq-side a.v .c.hot{ color:var(--hq-late); font-weight:650; }
.hq-side a.v svg{ width:16px; height:16px; flex:none; }
.hq-side h4{ font-size:12.5px; color:var(--hq-ink-3); font-weight:550; margin:18px 10px 6px; }
.hq-side form input{ width:100%; border:1px dashed var(--hq-line); background:transparent; border-radius:8px; padding:7px 10px; font:inherit; font-size:13px; }
.hq-side form input:focus{ outline:none; border-style:solid; border-color:var(--hq-ink); background:var(--hq-sheet); }
@media (max-width:860px){ .hq-side{ position:static; display:flex; gap:6px; overflow-x:auto; padding-bottom:4px; } .hq-side h4, .hq-side form, .hq-side .proj{ display:none; } .hq-side a.v{ white-space:nowrap; flex:none; } }

/* ---------- timesheet ---------- */
.hq-table{ width:100%; border-collapse:collapse; font-size:13.5px; }
.hq-table th{ text-align:right; font-weight:550; color:var(--hq-ink-3); font-size:12.5px; padding:12px 10px; border-bottom:1px solid var(--hq-line); white-space:nowrap; }
.hq-table th:first-child, .hq-table td:first-child{ text-align:left; padding-left:18px; }
.hq-table td{ padding:10px; border-bottom:1px solid var(--hq-line-2); text-align:right; font-family:var(--hq-digits); font-size:12.5px; color:var(--hq-ink-2); white-space:nowrap; }
.hq-table td:first-child{ font-family:var(--hq-font); font-size:13.5px; color:var(--hq-ink); white-space:normal; max-width:340px; }
.hq-table td.z{ color:var(--hq-line); }
.hq-table tr.tot td{ font-weight:650; color:var(--hq-ink); border-bottom:0; background:var(--hq-sunk); }
.hq-table th.today{ color:var(--hq-ink); }
.hq-scroll{ overflow-x:auto; }

.hq-bars{ display:grid; grid-template-columns:repeat(7,1fr); gap:10px; align-items:end; height:120px; padding:6px 4px 0; }
.hq-bar{ display:flex; flex-direction:column; align-items:center; gap:6px; height:100%; justify-content:flex-end; }
.hq-bar .col{ width:100%; max-width:44px; position:relative; flex:1; display:flex; align-items:flex-end; }
.hq-bar .col i{ display:block; width:100%; background:var(--hq-go); border-radius:6px 6px 3px 3px; min-height:2px; }
.hq-bar .col .exp{ position:absolute; left:-3px; right:-3px; border-top:2px dashed var(--hq-ink-3); }
.hq-bar .d{ font-size:12px; color:var(--hq-ink-3); }
.hq-bar .h{ font-family:var(--hq-digits); font-size:11.5px; color:var(--hq-ink-2); }

.hq-entry{ display:flex; gap:12px; align-items:center; padding:9px 18px; border-top:1px solid var(--hq-line-2); font-size:13.5px; }
.hq-entry .when{ font-family:var(--hq-digits); font-size:12px; color:var(--hq-ink-2); width:132px; flex:none; }
.hq-entry .what{ flex:1; min-width:0; }
.hq-entry .what small{ color:var(--hq-ink-3); margin-left:6px; }
.hq-entry .dur{ font-family:var(--hq-digits); font-size:12.5px; font-weight:600; }
.hq-entry.live .dur{ color:var(--hq-live); }
.hq-entry details form{ display:flex; gap:6px; align-items:center; padding:6px; }

.hq-form{ display:flex; flex-wrap:wrap; gap:10px; align-items:flex-end; }
.hq-form label{ display:flex; flex-direction:column; gap:4px; font-size:12.5px; color:var(--hq-ink-2); }
.hq-in{ height:36px; border:1px solid var(--hq-line); border-radius:9px; padding:0 10px; font:inherit; font-size:13.5px; background:var(--hq-sheet); color:var(--hq-ink); min-width:0; }
.hq-in:focus{ outline:none; border-color:var(--hq-ink); }
.hq-form label{ min-width:0; }
.hq-form label[style*="100%"] > .hq-in, .hq-form label[style*="flex:1"] > .hq-in{ width:100%; }
.hq-form input[type=time]{ width:118px; }
select.hq-in{ padding-right:28px; }

/* ---------- team ---------- */
.hq-team{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px; }
@media (max-width:1000px){ .hq-team{ grid-template-columns:1fr; } }
.hq-card-h{ display:flex; gap:12px; align-items:center; margin-bottom:14px; }
.hq-card-h .n{ font-size:19px; font-weight:650; letter-spacing:-.015em; }
.hq-card-h .s{ font-size:13px; color:var(--hq-ink-2); }
.hq-stats{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--hq-line); border:1px solid var(--hq-line); border-radius:12px; overflow:hidden; margin-bottom:16px; }
.hq-stats > div{ background:var(--hq-sheet); padding:12px 14px; }
.hq-stats .k{ font-size:12px; color:var(--hq-ink-3); }
.hq-stats .v{ font-family:var(--hq-digits); font-size:21px; font-weight:600; letter-spacing:-.02em; margin-top:2px; }
.hq-stats .v.bad{ color:var(--hq-late); } .hq-stats .v.good{ color:var(--hq-go); }
.hq-stats .v small{ font-size:12px; color:var(--hq-ink-3); font-weight:500; font-family:var(--hq-font); }
.hq-strip{ display:grid; grid-template-columns:repeat(7,1fr); gap:6px; }
.hq-strip .c{ text-align:center; padding:8px 2px; border-radius:9px; background:var(--hq-sunk); }
.hq-strip .c .d{ font-size:11.5px; color:var(--hq-ink-3); }
.hq-strip .c .h{ font-family:var(--hq-digits); font-size:12.5px; font-weight:600; margin-top:2px; }
.hq-strip .c .r{ font-size:11px; color:var(--hq-ink-3); margin-top:1px; }
.hq-strip .c.full{ background:var(--hq-go-soft); } .hq-strip .c.miss{ background:var(--hq-late-soft); }
.hq-strip .c.today{ box-shadow:inset 0 0 0 1.5px var(--hq-ink); }
.hq-now{ display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:10px; background:var(--hq-sunk); font-size:13.5px; margin-bottom:14px; }
.hq-now.live{ background:#FFF0EB; }
.hq-now .el{ margin-left:auto; font-family:var(--hq-digits); font-weight:600; }
.hq-sec-t{ font-size:12.5px; color:var(--hq-ink-3); font-weight:550; margin:16px 0 6px; }
.hq-quote{ border-left:3px solid var(--hq-line); padding:4px 0 4px 12px; font-size:13.5px; color:var(--hq-ink-2); white-space:pre-wrap; }

/* flash messages inside hq */
.hq-flash{ margin-bottom:16px; padding:10px 14px; border-radius:10px; font-size:13.5px; background:var(--hq-go-soft); color:#06513f; }
.hq-flash.error{ background:var(--hq-late-soft); color:#8b1f17; }

/* ---------- the timer dock (every page) ---------- */
.hq-dock{ position:fixed; z-index:55; left:50%; bottom:18px; transform:translateX(-50%); display:none; align-items:center; gap:14px;
  background:#0F151C; color:#fff; border-radius:16px; padding:8px 8px 8px 16px; box-shadow:0 18px 50px rgba(9,14,20,.35), 0 0 0 1px rgba(255,255,255,.06) inset;
  font-family:var(--hq-font); max-width:calc(100vw - 24px); }
.hq-dock.on{ display:flex; }
@media (min-width:1024px){ .hq-dock{ left:calc(50% + 128px); } }
.hq-dock .dot{ width:9px; height:9px; border-radius:999px; background:var(--hq-live); box-shadow:0 0 0 4px rgba(255,79,46,.25); flex:none; }
.hq-dock .clock{ font-family:var(--hq-digits); font-size:24px; font-weight:600; letter-spacing:-.02em; font-variant-numeric:tabular-nums; }
.hq-dock .what{ font-size:13px; color:#B7C1CC; max-width:300px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.hq-dock .what a{ color:#fff; text-decoration:none; }
.hq-dock .stop{ height:38px; padding:0 14px; border-radius:11px; border:0; background:var(--hq-live); color:#fff; font:inherit; font-weight:650; font-size:13.5px; cursor:pointer; display:flex; align-items:center; gap:7px; }
.hq-dock .stop:hover{ background:#ff6a4d; }
@media (max-width:600px){ .hq-dock{ left:12px; right:12px; transform:none; bottom:12px; } .hq-dock .what{ max-width:none; flex:1; } .hq-dock .clock{ font-size:20px; } }

/* start-a-blank-timer row */
.hq-starter{ display:flex; gap:8px; }
.hq-starter input{ flex:1; }

/* idle / long-run prompt */
.hq-modal{ position:fixed; inset:0; z-index:70; background:rgba(15,21,28,.45); display:none; align-items:center; justify-content:center; padding:16px; }
.hq-modal.on{ display:flex; }
.hq-modal .box{ background:#fff; border-radius:16px; padding:22px; max-width:420px; width:100%; font-family:var(--hq-font); color:var(--hq-ink); }
.hq-modal h3{ margin:0 0 6px; font-size:18px; letter-spacing:-.01em; }
.hq-modal p{ margin:0 0 16px; color:var(--hq-ink-2); font-size:14px; }
.hq-modal .row{ display:flex; gap:8px; flex-wrap:wrap; }