/* Task Helper — the COMPANY + PROJECT HUBS (BRIEF-1294). Copyright Rapid Surveys Pty Ltd. Namespace hb-. App tokens only.
 * Solid tiles, a soft shadow, radius 16, one accent per section (each ≥ 4.5:1 on --bg as heading text). 2 across on a phone,
 * 3 at ≥ 640 px, 4 at ≥ 1000 px. Reduced motion respected. Greyed = THGate's look: dashed, muted, a lock. */
.hb-root { --hb-people:#2457d6; --hb-records:#0a6f75; --hb-safety:#9a4d00; --hb-money:#15703c; --hb-work:#6a4bd1; --hb-account:#5f6975;
  position:fixed; inset:var(--hb-top, 0px) 0 var(--hb-bot, 0px) 0; z-index:58; background:var(--bg); color:var(--ink); overflow-y:auto; overscroll-behavior:contain;
  padding-bottom:env(safe-area-inset-bottom, 0px); }
.hb-root[hidden] { display:none; }
html.hb-open, html.hb-open body { overflow:hidden; }
.hb-head { position:sticky; top:0; z-index:2; display:flex; align-items:center; gap:10px; background:var(--ink); color:#fff;
  padding:calc(6px + env(safe-area-inset-top, 0px)) 16px 6px; min-height:56px; }
.hb-root.hb-under .hb-head { padding-top:6px; }   /* BRIEF-1294b: under the app's top bar, which already carries the safe area */
.hb-root.hb-above { padding-bottom:0; }   /* … and above the phone's view bar, which carries the bottom one */
.hb-ttl { min-width:0; }
.hb-root .hb-head h2 { font-size:18px; margin:0; font-weight:700; color:#fff; text-transform:none; letter-spacing:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.hb-sub { font-size:12.5px; color:rgba(255,255,255,.78); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.hb-root .hb-back { width:44px; height:44px; min-height:44px; flex:none; display:grid; place-items:center; padding:0; border:0; border-radius:10px; background:rgba(255,255,255,.1); color:#fff; cursor:pointer; }
.hb-root .hb-back:hover { background:rgba(255,255,255,.18); }
.hb-root .hb-back svg { width:20px; height:20px; }
.hb-body { max-width:1120px; margin:0 auto; padding:18px 16px 32px; display:grid; gap:22px; }
.hb-sec { --hb-sec:var(--hb-account); }
.hb-a-people { --hb-sec:var(--hb-people); } .hb-a-records { --hb-sec:var(--hb-records); } .hb-a-safety { --hb-sec:var(--hb-safety); }
.hb-a-money { --hb-sec:var(--hb-money); } .hb-a-work { --hb-sec:var(--hb-work); } .hb-a-account { --hb-sec:var(--hb-account); }
.hb-sec h3 { margin:0 0 10px; font-size:12px; letter-spacing:.09em; text-transform:uppercase; color:var(--hb-sec); display:flex; align-items:center; gap:8px; font-weight:800; }
.hb-sec h3::after { content:''; flex:1; height:1px; background:var(--line); }
.hb-grid { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:12px; }
@media (min-width:640px) { .hb-grid { grid-template-columns:repeat(3, minmax(0, 1fr)); } }
@media (min-width:1000px) { .hb-grid { grid-template-columns:repeat(4, minmax(0, 1fr)); } }
.hb-root .hb-tile { position:relative; display:flex; flex-direction:column; align-items:flex-start; gap:10px; width:100%; min-height:128px; margin:0; padding:14px;
  text-align:left; font:inherit; color:var(--ink); background:var(--card); border:1px solid var(--line); border-radius:16px; cursor:pointer;
  box-shadow:0 1px 2px rgba(20,28,40,.06), 0 6px 16px rgba(20,28,40,.07); transition:transform .12s ease, box-shadow .12s ease; }
.hb-root .hb-tile:hover { box-shadow:0 2px 4px rgba(20,28,40,.08), 0 10px 24px rgba(20,28,40,.10); }
.hb-root .hb-tile:active { transform:scale(.98); }
.hb-root .hb-tile:focus-visible, .hb-root .hb-row:focus-visible, .hb-root .hb-back:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
.hb-chip { width:44px; height:44px; border-radius:12px; display:grid; place-items:center; flex:none; color:var(--hb-sec); background:color-mix(in srgb, var(--hb-sec) 13%, #fff); }
.hb-chip svg { width:24px; height:24px; }
.hb-name { font-size:16px; font-weight:700; line-height:1.25; color:var(--ink); overflow-wrap:anywhere; }
.hb-live { margin-top:auto; min-height:18px; font-size:13px; font-weight:500; color:var(--muted); display:flex; align-items:center; gap:6px; font-variant-numeric:tabular-nums; overflow-wrap:anywhere; }
.hb-live.hb-warn { color:#8a2a1a; font-weight:600; }
.hb-dot { width:8px; height:8px; border-radius:50%; background:#c62828; flex:none; }
.hb-root .hb-tile.hb-off { background:#f6f7f9; box-shadow:none; border-style:dashed; border-color:#c9d0d8; cursor:default; }
.hb-root .hb-tile.hb-off .hb-chip { background:#eceff2; color:#5f6975; }
.hb-root .hb-tile.hb-off .hb-name, .hb-root .hb-tile.hb-off .hb-live { color:#5f6975; }
.hb-lock { position:absolute; top:12px; right:12px; width:26px; height:26px; border-radius:50%; display:grid; place-items:center; background:#e6e9ed; color:#5f6975; }
.hb-lock svg { width:14px; height:14px; }
.hb-rows { display:grid; gap:8px; }
.hb-grid + .hb-rows { margin-top:12px; }
.hb-root .hb-row { display:flex; align-items:center; gap:10px; width:100%; min-height:48px; margin:0; padding:10px 14px; font:inherit; font-size:15px; font-weight:600;
  text-align:left; color:var(--ink); background:var(--card); border:1px solid var(--line); border-radius:12px; cursor:pointer; }
.hb-root .hb-row svg { width:18px; height:18px; flex:none; }
.hb-root .hb-row.hb-danger { color:#c62828; }
.hb-root .hb-row.hb-off { color:#5f6975; background:#f6f7f9; border-style:dashed; border-color:#c9d0d8; cursor:default; }
.hb-sr { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
@media (prefers-reduced-motion: reduce) { .hb-root .hb-tile { transition:none; } .hb-root .hb-tile:active { transform:none; } }
/* PINS (BRIEF-1297, ROUND 31): a small pin in each tile's corner — its own button (44 px target), pressed = on the top bar */
.hb-cell { position:relative; display:flex; min-width:0; }
.hb-cell > .hb-tile { flex:1; }
.hb-cell:has(.hb-pin) .hb-live { padding-right:34px; }
.hb-root .hb-pin { position:absolute; right:4px; bottom:4px; width:44px; height:44px; min-height:44px; margin:0; padding:0; display:grid; place-items:center;
  border:0; border-radius:12px; background:transparent; color:#8a94a2; cursor:pointer; }
.hb-root .hb-pin svg { width:18px; height:18px; padding:5px; box-sizing:content-box; border-radius:50%; transition:background .12s ease, color .12s ease; }
.hb-root .hb-pin:hover svg { background:#eef1f4; color:var(--ink); }
.hb-root .hb-pin[aria-pressed="true"] { color:var(--hb-sec); }
.hb-root .hb-pin[aria-pressed="true"] svg { background:color-mix(in srgb, var(--hb-sec) 14%, #fff); fill:currentColor; }
.hb-root .hb-pin:focus-visible { outline:2px solid var(--accent); outline-offset:-2px; }
@media (prefers-reduced-motion: reduce) { .hb-root .hb-pin svg { transition:none; } }