:root{
    /* MOW brand tokens, same as the public forms */
    --navy:#003952; --navy-2:#154f68; --teal:#00B7C4; --teal-ui:#008c96; --teal-dark:#00737c; --teal-tint:#e8fbfc;
    --lime:#ABD037; --yellow:#EEC819; --red:#F04925; --red-text:#c03610; --magenta:#BA377C; --gold:#D88D3A;
    --gray:#E6E7E8; --gray2:#BCBEC0;
    --ink:#1c2b33; --ink-2:#4a5c66; --ink-muted:#52646e; --line:#d9e1e6; --line-soft:#e9eef1;
    --bg:#f4f6f7; --card:#fff; --radius:12px; --shadow:0 1px 4px rgba(0,0,0,.10);
    --head:var(--navy); --teal-text:var(--teal-dark); --top:var(--navy); --tile-navy:var(--navy); --chip:var(--gray);
    --attn-bg:#fff7d6; --attn-edge:#ecd36a; --attn-ink:#4d3f00; --attn-link:var(--navy); --admin-bg:#fbfcfc;
    --edge:transparent; color-scheme:light;
    /* charts (plan 21): brand hues stepped to pass the dataviz palette validator on the card surface (lightness band,
       chroma floor, colorblind separation, 3:1 contrast); series order teal, gold, blue, magenta; gray limit line; marker */
    --chart-1:#0097a3; --chart-2:#c47a1e; --chart-3:#2f6fb0; --chart-4:#ba377c; --chart-limit:#7d8f99; --chart-mark:#c03610; --chart-grid:#e9eef1;
  }

  /* dark theme: applied when <html data-theme="dark"> */
  :root[data-theme="dark"]{
    --bg:#0d1b23; --card:#15272f; --ink:#e6eef2; --ink-2:#b7c7cf; --ink-muted:#9fb3bd;
    --line:#2b4350; --line-soft:#213845; --teal-tint:#1a3b46; --gray:#2a4150; --gray2:#5d7886;
    --head:#eaf5f8; --teal-text:#38d3df; --top:#082633; --tile-navy:#1f607e; --chip:#2a4150;
    --attn-bg:#3a3300; --attn-edge:#7a6a1c; --attn-ink:#f6e9a8; --attn-link:#ffe37a; --admin-bg:#11222a;
    --shadow:0 1px 3px rgba(0,0,0,.5); --edge:var(--line); color-scheme:dark;
    --chart-1:#0fa0ad; --chart-2:#c98500; --chart-3:#3f86c2; --chart-4:#c94d8a; --chart-limit:#86a0ac; --chart-mark:#ff9f88; --chart-grid:#213845;
  }
  :root[data-theme="dark"] .hero{background:#0b3850;border:1px solid #1d5b78}
  *{box-sizing:border-box}
  html{scroll-behavior:smooth}
  body{margin:0;font-family:'Segoe UI',Roboto,Helvetica,Arial,sans-serif;font-size:16px;line-height:1.5;color:var(--ink);background:var(--bg)}
  a{color:inherit;text-decoration:none}
  button{font:inherit;cursor:pointer}
  :focus-visible{outline:3px solid var(--teal-ui);outline-offset:2px;border-radius:6px}
  .skip{position:absolute;left:-999px;top:8px;background:#fff;color:var(--navy);padding:8px 14px;border-radius:8px;z-index:50}
  .skip:focus{left:8px}
  .wrap{max-width:1180px;margin:0 auto;padding:0 20px}
  svg.i{width:1em;height:1em;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none}

  /* header */
  header.top{background:var(--top);color:#fff;position:sticky;top:0;z-index:20;box-shadow:0 2px 8px rgba(0,0,0,.18)}
  .top .wrap{display:flex;align-items:center;gap:20px;min-height:64px}
  .logo{height:38px;width:auto;display:block}
  .me{display:flex;align-items:center;gap:10px;margin-left:auto;position:relative}
  /* your-name menu (plan 36): anchored under the avatar, card colours, one column of actions */
  .me-menu{position:absolute;right:0;top:calc(100% + 8px);width:min(300px,calc(100vw - 32px));background:var(--card);color:var(--ink);border:1px solid var(--line);border-radius:12px;box-shadow:0 6px 18px rgba(0,0,0,.14);padding:6px;z-index:30}
  .me-menu[hidden]{display:none}
  .mm-head{display:flex;flex-direction:column;gap:2px;padding:10px 12px 10px;border-bottom:1px solid var(--line-soft);margin-bottom:6px;min-width:0}
  .mm-head b{color:var(--head);font-size:15px} .mm-head span{font-size:12.5px;color:var(--ink-muted)}
  .mm-head .mm-upn{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .me-menu button{display:flex;align-items:center;gap:10px;width:100%;text-align:left;border:0;background:none;padding:9px 12px;border-radius:8px;color:var(--ink);font-size:14.5px;font-weight:600}
  .me-menu button .i{font-size:17px;color:var(--teal-text)}
  .me-menu button:hover{background:var(--teal-tint);color:var(--teal-text)}
  .me-menu button[hidden]{display:none}
  .me-btn{display:flex;align-items:center;gap:10px;background:transparent;border:0;color:#fff;padding:3px 3px 3px 10px;border-radius:30px;cursor:pointer}
  .me-btn:hover,.me-btn[aria-expanded="true"]{background:rgba(255,255,255,.14)}
  .me-btn:focus-visible{outline:3px solid var(--teal);outline-offset:2px}
  .me .who{text-align:right;line-height:1.2}
  .me .who b{display:block;font-size:14px}
  .me .who span{font-size:12px;color:#cfe3ea}
  .theme{width:38px;height:38px;border-radius:50%;border:1px solid rgba(255,255,255,.35);background:transparent;color:#fff;display:grid;place-items:center;font-size:19px}
  .theme:hover{background:rgba(255,255,255,.14)}
  .theme .sun{display:none} :root[data-theme="dark"] .theme .sun{display:block} :root[data-theme="dark"] .theme .moon{display:none}
  .avatar{width:38px;height:38px;border-radius:50%;background:var(--lime);color:var(--navy);display:grid;place-items:center;font-weight:700}
  .avatar.big{width:56px;height:56px;font-size:20px;flex:none}
  .sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .mecard{position:absolute;right:0;top:calc(100% + 12px);width:min(360px,calc(100vw - 24px));background:var(--card);color:var(--ink);border:1px solid var(--line);border-radius:14px;box-shadow:0 12px 36px rgba(0,0,0,.32);overflow:hidden;z-index:60;transform-origin:top right;animation:mcIn .14s ease-out}
  .mecard[hidden]{display:none}
  @keyframes mcIn{from{opacity:0;transform:scale(.96) translateY(-4px)}to{opacity:1;transform:none}}
  .mc-top{background:var(--top);color:#fff;padding:16px 18px;display:flex;align-items:center;gap:14px}
  .mc-id b{display:block;font-size:18px;line-height:1.2}
  .mc-id span{display:block;font-size:13px;color:#cfe3ea;line-height:1.35}
  .mc-rows{list-style:none;margin:0;padding:6px 6px}
  .mc-row{display:flex;align-items:center;gap:12px;padding:9px 12px;border-radius:10px}
  .mc-row:hover{background:var(--teal-tint)}
  .mc-row .ic{flex:none;width:32px;height:32px;border-radius:9px;background:var(--teal-tint);color:var(--teal-text);display:grid;place-items:center;font-size:17px}
  .mc-row .t{flex:1;min-width:0}
  .mc-row .t small{display:block;font-size:11.5px;font-weight:700;letter-spacing:.3px;text-transform:uppercase;color:var(--ink-muted)}
  .mc-row .t span{display:block;color:var(--ink);overflow-wrap:anywhere}
  .mc-row .t span.none{color:var(--ink-muted);font-style:italic}
  .mc-copy{flex:none;width:30px;height:30px;border-radius:8px;border:0;background:transparent;color:var(--ink-muted);display:grid;place-items:center;font-size:16px}
  .mc-copy:hover{background:var(--line-soft);color:var(--teal-text)}
  .mc-links{border-top:1px solid var(--line-soft);padding:10px 18px 4px;display:flex;flex-direction:column;gap:6px}
  .mc-links a{color:var(--teal-text);font-weight:600;font-size:14px}
  .mc-links a:hover{text-decoration:underline}
  .mc-note{padding:6px 18px 12px;font-size:12px;color:var(--ink-muted)}

  main{padding:26px 0 40px}
  .hello{display:flex;align-items:baseline;justify-content:space-between;flex-wrap:wrap;gap:6px 20px;margin-bottom:16px}
  .hello h1{margin:0;font-size:28px;color:var(--head);line-height:1.2}
  .hello .date{color:var(--ink-2)}

  .attn{display:flex;align-items:center;gap:12px;background:var(--attn-bg);border:1px solid var(--attn-edge);border-left:6px solid var(--yellow);padding:10px 14px;border-radius:10px;margin-bottom:16px;color:var(--attn-ink)}
  .attn b{color:var(--attn-ink)}
  .attn a,.attn span.cta{margin-left:auto;font-weight:700;color:var(--attn-link);text-decoration:underline}

  /* hero + today */
  .grid-top{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(0,1fr);gap:18px;margin-bottom:26px}
  .hero{background:var(--navy);color:#fff;border-radius:var(--radius);padding:24px 26px;position:relative;overflow:hidden;box-shadow:var(--shadow);display:flex;flex-direction:column;align-items:flex-start}
  .hero::after{content:"";position:absolute;right:-60px;top:-60px;width:220px;height:220px;border-radius:50%;background:radial-gradient(circle at 30% 30%,rgba(0,183,196,.55),rgba(0,183,196,0) 70%)}
  .eyebrow{display:inline-block;font-size:12px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;color:var(--lime)}
  .hero h2{margin:4px 0 6px;font-size:26px;line-height:1.2}
  .hero p{margin:0 0 18px;color:#d5e6ec;max-width:46ch}
  .btn{display:inline-flex;align-items:center;gap:8px;background:var(--lime);color:var(--navy);font-weight:700;padding:12px 20px;border-radius:8px;border:0;font-size:16px}
  .btn:hover{background:#bde04c}
  .btn .i{font-size:18px}
  .kpis{display:grid;grid-template-columns:repeat(2,1fr);grid-auto-rows:1fr;gap:12px;flex:1;margin-top:22px;width:100%;position:relative;z-index:1}
  .kpi{background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.16);border-radius:12px;padding:14px 18px;display:flex;flex-direction:column;justify-content:center}
  .kpi b{display:block;font-size:38px;line-height:1.05}
  .kpi span{font-size:14px;color:#cfe3ea;margin-top:4px}
  .sample{display:inline-block;margin-top:10px;font-size:11.5px;color:#1f1900;background:var(--yellow);border-radius:10px;padding:1px 9px;font-weight:600}

  .today{display:flex;flex-direction:column;gap:14px}
  .card{background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);padding:16px 18px;border:1px solid var(--edge)}
  .card h3{margin:0 0 8px;font-size:13px;letter-spacing:.5px;text-transform:uppercase;color:var(--teal-text)}
  .card ul{margin:0;padding:0;list-style:none}
  .menu li{padding:3px 0;color:var(--ink)}
  .menu li::before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--lime);margin-right:10px}
  .news li{display:flex;gap:10px;padding:8px 0;border-top:1px solid var(--line-soft)}
  .news li:first-child{border-top:0;padding-top:2px}
  .news .when{flex:none;width:74px;font-size:12px;font-weight:700;color:var(--teal-text);padding-top:2px}
  .news .txt{font-size:15px}
  .news .txt a{color:var(--teal-text);font-weight:600;text-decoration:underline}

  /* sections */
  section.block{margin-bottom:26px}
  .block > header{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:10px}
  .block h2{margin:0;font-size:19px;color:var(--head)}
  .block .hint{font-size:13px;color:var(--ink-muted)}

  .tools{display:grid;grid-template-columns:repeat(5,1fr);gap:12px}
  .tool{position:relative;background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);display:flex;flex-direction:column;align-items:center;gap:8px;padding:16px 8px 12px;border:2px solid var(--edge);transition:transform .12s,border-color .12s}
  .tool:hover{transform:translateY(-2px);border-color:var(--teal)}
  .tool-link{display:flex;flex-direction:column;align-items:center;gap:8px;width:100%}
  .tool .tile{width:52px;height:52px;border-radius:14px;display:grid;place-items:center;font-size:26px}
  .tool .name{font-weight:600;font-size:15px;color:var(--head);text-align:center}
  .pin{position:absolute;top:6px;right:6px;width:30px;height:30px;border-radius:50%;border:0;background:transparent;color:var(--gray2);display:grid;place-items:center;font-size:17px}
  .pin:hover{background:var(--line-soft);color:var(--gold)}
  .pin[aria-pressed="true"]{color:var(--gold)}
  .pin[aria-pressed="true"] .i{fill:currentColor}
  .tone-sfdc{background:#00A1E0} .tone-teams{background:#464EB8} .tone-onedrive{background:#0364B8} .tone-sharepoint{background:#038387}
  .tone-outlook{background:#0F6CBD} .tone-adobe{background:#EB1000} .tone-adp{background:#D0271D}
  .tile img{width:68%;height:68%;object-fit:contain;display:block}
  .tile.full{overflow:hidden} .tile.full img{width:100%;height:100%;object-fit:cover}
  .tone-plain{background:#fff;box-shadow:inset 0 0 0 1px var(--line)} .tone-plain img{width:74%;height:74%}
  .tone-teal{background:var(--teal);color:var(--navy)} .tone-navy{background:var(--tile-navy);color:#fff}
  .tone-lime{background:var(--lime);color:var(--navy)} .tone-yellow{background:var(--yellow);color:var(--navy)}
  .tone-orange{background:var(--red);color:#fff} .tone-magenta{background:var(--magenta);color:#fff} .tone-gold{background:var(--gold);color:var(--navy)}

  .two{display:grid;grid-template-columns:1fr 1fr;gap:18px}
  .list{background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden;border:1px solid var(--edge)}
  .row{display:flex;align-items:center;gap:12px;padding:12px 16px;border-top:1px solid var(--line-soft);width:100%;background:none;border-left:0;border-right:0;border-bottom:0;text-align:left;color:inherit}
  .list > :first-child{border-top:0}
  a.row:hover{background:var(--teal-tint)}
  .row .ic{flex:none;width:36px;height:36px;border-radius:10px;background:var(--teal-tint);color:var(--teal-text);display:grid;place-items:center;font-size:19px}
  .row .t{flex:1;min-width:0}
  .row .t b{display:block;color:var(--head);font-weight:600}
  .row .t span{display:block;font-size:13px;color:var(--ink-muted)}
  .row .go{color:var(--gray2);font-size:17px}
  a.row:hover .go{color:var(--teal-text)}
  .row.soon{opacity:.62;cursor:default}
  .soon-chip{font-size:11px;font-weight:700;background:var(--chip);color:var(--ink-2);border-radius:10px;padding:1px 8px}

  .empty{display:none;text-align:center;color:var(--ink-2);padding:30px 0}
  .admin{border:2px dashed var(--gray2);border-radius:var(--radius);padding:14px;background:var(--admin-bg)}
  .admin .list{box-shadow:none;border:1px solid var(--line)}

  footer.foot{border-top:1px solid var(--line);background:var(--card);padding:18px 0 76px;color:var(--ink-muted);font-size:13.5px}
  footer .wrap{display:flex;flex-wrap:wrap;gap:8px 22px;align-items:center;justify-content:space-between}
  footer nav{display:flex;flex-wrap:wrap;gap:6px 16px}
  footer nav a{color:var(--teal-text);font-weight:600}
  footer nav a:hover{text-decoration:underline}

  /* coming-up facts */
  .fact{display:flex;align-items:baseline;gap:10px;width:100%;background:none;border:0;border-top:1px solid var(--line-soft);padding:9px 0;text-align:left;color:inherit}
  .fact:first-of-type{border-top:0;padding-top:2px}
  .fact:hover b{text-decoration:underline}
  .fact .fl{flex:none;width:92px;font-size:12px;font-weight:700;color:var(--teal-text)}
  .fact b{color:var(--head);font-weight:600}
  .fact .in{margin-left:auto;font-size:12.5px;color:var(--ink-muted);text-align:right}

  /* answers shown in search results */
  .answers{background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);padding:4px 16px 10px;border:1px solid var(--edge);margin-bottom:26px}
  .answers .dr-h3{margin-top:10px}

  /* answers & documents panel */
  .scrim{position:fixed;inset:0;background:rgba(0,20,30,.55);z-index:39;opacity:0;pointer-events:none;transition:opacity .2s}
  .scrim.on{opacity:1;pointer-events:auto}
  .drawer{position:fixed;top:0;right:0;bottom:0;width:min(520px,100vw);background:var(--card);color:var(--ink);z-index:40;display:flex;flex-direction:column;transform:translateX(102%);visibility:hidden;transition:transform .25s ease,width .2s,visibility 0s .25s;box-shadow:-8px 0 30px rgba(0,0,0,.35)}
  .drawer.on{transform:none;visibility:visible;transition:transform .25s ease,width .2s}
  .drawer.wide{width:min(920px,100vw)}
  .dr-head{background:var(--top);color:#fff;display:flex;align-items:center;gap:8px;padding:12px 14px}
  .dr-head h2{margin:0;font-size:17px;flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .dr-btn{width:36px;height:36px;border-radius:50%;border:0;background:rgba(255,255,255,.14);color:#fff;display:grid;place-items:center;font-size:19px}
  .dr-btn[hidden]{display:none}
  .dr-btn:hover{background:rgba(255,255,255,.26)}
  .dr-body{flex:1;overflow:auto;padding:16px 18px}
  .dr-body.viewer-body{padding:0;display:flex;flex-direction:column;overflow:hidden}
  .dr-foot{border-top:1px solid var(--line);padding:10px 18px;font-size:13px;color:var(--ink-muted);display:flex;flex-wrap:wrap;gap:4px 16px}
  .dr-foot a{color:var(--teal-text);font-weight:600}
  .dr-foot a:hover{text-decoration:underline}
  .dr-q{width:100%;padding:10px 14px;border-radius:22px;border:2px solid var(--line);background:var(--bg);color:var(--ink);font:inherit}
  .dr-q:focus{outline:none;border-color:var(--teal-ui)}
  .chips{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0 4px}
  .chip{border:1.5px solid var(--line);background:var(--card);color:var(--ink);border-radius:18px;padding:5px 13px;font-size:13.5px;font-weight:600}
  .chip[aria-pressed="true"]{background:var(--teal-ui);border-color:var(--teal-ui);color:#fff}
  .dr-h3{margin:16px 0 4px;font-size:12.5px;letter-spacing:.5px;text-transform:uppercase;color:var(--teal-text)}
  .muted{color:var(--ink-muted);font-size:14px;margin:6px 0}
  details.ans{border-top:1px solid var(--line-soft)}
  details.ans summary{list-style:none;cursor:pointer;padding:12px 4px;font-weight:600;color:var(--head);display:flex;align-items:center;gap:10px}
  details.ans summary::-webkit-details-marker{display:none}
  details.ans summary::after{content:"+";margin-left:auto;color:var(--teal-text);font-size:22px;line-height:1}
  details.ans[open] summary::after{content:"\2212"}
  .ans-body{padding:0 4px 14px;color:var(--ink)}
  .ans-body p{margin:0}
  .acts{margin-top:10px;display:flex;gap:8px;flex-wrap:wrap}
  .mini{display:inline-block;border:1.5px solid var(--teal-ui);color:var(--teal-text);background:transparent;border-radius:8px;padding:5px 12px;font-weight:600;font-size:14px}
  .mini:hover{background:var(--teal-tint)}
  .list.flat{box-shadow:none;border:1px solid var(--line)}
  .viewer{flex:1;display:flex;flex-direction:column;min-height:0}
  .viewer iframe{flex:1;width:100%;border:0;background:#fff;min-height:0}
  .v-foot{display:flex;align-items:center;gap:12px;padding:10px 18px;border-top:1px solid var(--line);font-size:13px;color:var(--ink-muted)}
  /* demo-only role switch */
  .grid-top.nokpi{align-items:start}
  .gate{position:fixed;inset:0;z-index:100;background:var(--bg);display:grid;place-items:center;padding:20px}
  .gate[hidden]{display:none}
  .gate-card{background:var(--card);border:1px solid var(--line);border-radius:16px;box-shadow:0 12px 36px rgba(0,0,0,.18);max-width:440px;width:100%;overflow:hidden;text-align:center}
  .gate-card .gh{background:var(--top);padding:18px}
  .gate-card .gh img{height:34px;width:auto}
  .gate-card .gb{padding:24px 26px 28px}
  .gate-card h1{margin:0 0 8px;font-size:21px;color:var(--head)}
  .gate-card p{margin:0 0 16px;color:var(--ink-2)}
  .gate-card .btn{display:inline-flex}
  .spin{width:26px;height:26px;border:3px solid var(--line);border-top-color:var(--teal-ui);border-radius:50%;margin:0 auto 14px;animation:sp .8s linear infinite}
  @keyframes sp{to{transform:rotate(360deg)}}
  .demo{position:fixed;right:14px;bottom:14px;z-index:30;background:var(--top);color:#fff;border-radius:24px;padding:6px 8px 6px 14px;font-size:13px;display:flex;align-items:center;gap:8px;box-shadow:0 4px 14px rgba(0,0,0,.3);border:1px solid rgba(255,255,255,.22)}
  .demo select{background:#fff;color:var(--navy);border:0;border-radius:16px;padding:4px 8px;font:inherit;font-weight:600}
  .hidden{display:none !important}

  @media (max-width:1000px){ .grid-top{grid-template-columns:1fr} .tools{grid-template-columns:repeat(4,1fr)} .me .who{display:none} }
  @media (max-width:768px){
    .top .wrap{gap:10px;flex-wrap:wrap;padding-top:8px;padding-bottom:8px}
    .logo{height:30px} .search{order:3;flex:1 0 100%;max-width:none}
    .hello h1{font-size:23px} .kpis{grid-template-columns:repeat(2,1fr)}
    .tools{grid-template-columns:repeat(3,1fr)} .two{grid-template-columns:1fr}
    .demo{left:12px;right:12px;justify-content:space-between}
  }
  @media (max-width:480px){ .tools{grid-template-columns:repeat(2,1fr)} }
  @media (prefers-reduced-motion:reduce){ *{transition:none !important;scroll-behavior:auto !important} }

  /* ===== BizOps portal additions (on top of the MOWCTX Home stylesheet) ===== */
  .secnav{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:0 0 22px;padding:6px;background:var(--card);border-radius:14px;box-shadow:var(--shadow);border:1px solid var(--edge)}
  .nav-apps{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
  .secnav button{border:0;background:none;color:var(--ink-2);font-weight:600;padding:9px 16px;border-radius:10px;display:inline-flex;align-items:center;gap:8px}
  .nav-apps button{font-size:16px}
  .secnav button[aria-current="page"]{background:var(--navy);color:#fff}
  .secnav button:hover:not([aria-current="page"]){background:var(--teal-tint);color:var(--teal-text)}
  .hello h1{margin:0 0 2px;font-size:30px;color:var(--head)}
  .hello .date{color:var(--ink-muted)}
  .section{display:none}.section.on{display:block}
  .sec-head{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin:0 0 14px}
  .sec-head h2{margin:0;font-size:22px;color:var(--head)}
  .sec-head p{margin:0;color:var(--ink-muted);font-size:14.5px}
  .rgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:14px;margin-bottom:26px}
  .rcard{background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);border:1px solid var(--edge);padding:16px 18px;display:flex;flex-direction:column;gap:8px;min-height:150px;color:inherit}
  .rcard:hover{border-color:var(--teal-ui)}
  .rcard h4{margin:0;font-size:16px;color:var(--head);display:flex;align-items:center;gap:8px}
  .rcard p{margin:0;font-size:14px;color:var(--ink-2);flex:1}
  .rcard .meta{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:13px;color:var(--ink-muted)}
  .status{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:700;border-radius:14px;padding:3px 10px;background:var(--chip);color:var(--ink-2)}
  .status::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--gray2)}
  .status.ok{background:#e9f5d8;color:#3d5a0a}.status.ok::before{background:var(--lime)}
  .status.warn{background:var(--attn-bg);color:var(--attn-ink)}.status.warn::before{background:var(--yellow)}
  .status.bad{background:#fde8e3;color:var(--red-text)}.status.bad::before{background:var(--red)}
  .status.lock{background:var(--teal-tint);color:var(--teal-text)}.status.lock::before{background:var(--teal-ui)}
  /* a status word with its reason beside it (plan 34/35): on report cards and the Home report index */
  .rcard .meta .st,.hr-row .st{display:inline-flex;align-items:center;gap:8px;min-width:0}
  .rcard .meta .why,.hr-row .why{font-size:12.5px;color:var(--ink-muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .hr-row .st{flex:none;max-width:60%} .hr-row .why{font-size:12px}
  :root[data-theme="dark"] .status.ok{background:#1f3a0f;color:#cfe9a9}
  :root[data-theme="dark"] .status.bad{background:#4a1d14;color:#ffb7a6}
  .hero.sec{min-height:0} .hero.sec .btn{margin:2px 0 16px;position:relative;z-index:1} .hero.sec .btn[hidden]{display:none}
  .kpis.four{grid-template-columns:repeat(4,minmax(0,1fr))} .kpis.four .kpi b{font-size:clamp(26px,2.8vw,38px)}
  .kpis .kpi.txt b{font-size:24px;line-height:1.15;overflow-wrap:anywhere}  /* a date or an age label, not a count */
  .kpi.warn b{color:var(--yellow)} .kpi.bad b{color:#ff9f88}
  table.data{width:100%;border-collapse:collapse;font-size:14px}
  table.data th{text-align:left;font-size:12px;letter-spacing:.4px;text-transform:uppercase;color:var(--teal-text);padding:10px 12px;border-bottom:1px solid var(--line)}
  table.data td{padding:9px 12px;border-bottom:1px solid var(--line-soft)}
  table.data td.num,table.data th.num{text-align:right;font-variant-numeric:tabular-nums}
  .gate-msg{padding:22px 26px;text-align:center;color:var(--ink-2)} .gate-msg b{display:block;color:var(--navy);font-size:18px;margin-bottom:6px}
  :root[data-theme="dark"] .gate-msg b{color:var(--head)}
  .rcard.access{min-height:0}
  .rcard.access h4 .count{margin-left:auto;font-weight:600}
  .members{list-style:none;margin:4px 0 0;padding:0;border-top:1px solid var(--line-soft)}
  .members li{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:9px 0;border-bottom:1px solid var(--line-soft);font-size:14px}
  .who-row{display:flex;flex-direction:column;min-width:0}
  .who-row b{color:var(--head)} .who-row span{font-size:12.5px;color:var(--ink-muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .members .rm{border:1.5px solid var(--line);background:none;color:var(--red-text);font-size:12.5px;font-weight:600;padding:4px 10px;border-radius:14px;flex:none}
  .members .rm:hover{border-color:var(--red);background:#fde8e3}
  .add-box{position:relative;margin-top:10px}
  .add-box input{width:100%;padding:9px 12px;border-radius:10px;border:1.5px solid var(--line);background:var(--bg);color:var(--ink);font:inherit;font-size:14px}
  .add-box input:focus{outline:none;border-color:var(--teal-ui);background:var(--card)}
  .results{position:absolute;left:0;right:0;top:calc(100% + 4px);background:var(--card);border:1px solid var(--line);border-radius:10px;box-shadow:0 6px 18px rgba(0,0,0,.14);z-index:5;overflow:hidden}
  .results button{display:flex;flex-direction:column;width:100%;text-align:left;border:0;background:none;padding:8px 12px;font-size:14px;color:var(--ink)}
  .results button b{color:var(--head)} .results button span{font-size:12.5px;color:var(--ink-muted)}
  .results button:hover{background:var(--teal-tint)}
  .results .muted{padding:8px 12px;font-size:13px}
  .foot{margin:40px 0 24px;font-size:13px;color:var(--ink-muted);display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px}
  @media (max-width:900px){.kpis.four{grid-template-columns:repeat(2,1fr)}.grid-top{grid-template-columns:1fr}}
  /* ----- renewals: reminder strip, register table, edit dialog ----- */
  .remind-strip{display:flex;align-items:stretch;gap:10px;flex-wrap:wrap;margin:0 0 16px;padding:10px 12px;background:var(--card);border-radius:14px;box-shadow:var(--shadow);border:1px solid var(--edge)}
  .rem-head{display:flex;flex-direction:column;justify-content:center;gap:2px;padding:4px 10px 4px 4px;min-width:120px;color:var(--ink-muted);font-size:12.5px}
  .rem-head b{display:flex;align-items:center;gap:6px;color:var(--head);font-size:15px}
  .rem{display:flex;flex-direction:column;gap:2px;min-width:200px;max-width:300px;text-align:left;border:0;border-left:5px solid var(--gray2);border-radius:10px;padding:8px 12px;background:var(--bg);color:var(--ink);font:inherit;cursor:pointer}
  .rem:hover{background:var(--teal-tint)}
  .rem b{color:var(--head);font-size:14px} .rem span{font-size:13px;color:var(--ink-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .rem em{font-style:normal;font-size:12.5px;color:var(--ink-muted)}
  .rem.b90{border-left-color:var(--teal-ui)} .rem.b60{border-left-color:var(--yellow)} .rem.b30{border-left-color:var(--gold)} .rem.boverdue{border-left-color:var(--red)}
  .rem.boverdue em,.rem.b30 em{color:var(--red-text);font-weight:600}
  :root[data-theme="dark"] .rem.boverdue em,:root[data-theme="dark"] .rem.b30 em{color:#ff9f88}
  table.rn tbody tr{cursor:pointer} table.rn tbody tr:hover td{background:var(--teal-tint)} table.rn tbody tr:focus-visible{outline:2px solid var(--teal-ui);outline-offset:-2px}
  table.rn td{vertical-align:top} table.rn td b{color:var(--head)}
  table.rn tr.rem-row td:first-child{box-shadow:inset 4px 0 0 var(--teal-ui)}
  table.rn tr.rem-row.b60 td:first-child{box-shadow:inset 4px 0 0 var(--yellow)} table.rn tr.rem-row.b30 td:first-child{box-shadow:inset 4px 0 0 var(--gold)} table.rn tr.rem-row.boverdue td:first-child{box-shadow:inset 4px 0 0 var(--red)}
  .small{font-size:12.5px} .muted.small{color:var(--ink-muted)}
  .sec-head label.inline{font-weight:400;display:inline-flex;align-items:center;gap:5px;cursor:pointer}
  .rm.teal{border:1.5px solid var(--line);background:none;color:var(--teal-text);font-size:12.5px;font-weight:600;padding:4px 10px;border-radius:14px;cursor:pointer}
  .rm.teal:hover{border-color:var(--teal-ui);background:var(--teal-tint)}
  .dlg{border:0;border-radius:14px;padding:0;width:min(760px,calc(100vw - 32px));background:var(--card);color:var(--ink);box-shadow:0 20px 60px rgba(0,0,0,.35)}
  .dlg::backdrop{background:rgba(0,20,30,.55)}
  .dlg form{padding:22px 24px 18px}
  .dlg h3{margin:0;font-size:20px;color:var(--head)} .dlg p.muted{margin:2px 0 14px;font-size:13.5px}
  .fgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px 14px}
  .fgrid label{display:flex;flex-direction:column;gap:4px;font-size:12px;font-weight:700;letter-spacing:.3px;text-transform:uppercase;color:var(--teal-text)}
  .fgrid label.wide{grid-column:1/-1}
  table.td tr.grp td{padding:16px 10px 4px;font-weight:600;font-size:12.5px;letter-spacing:.03em;text-transform:uppercase;color:var(--ink-muted);border-bottom:2px solid var(--ink-muted);background:none}
  table.td tr.grp td em{font-style:normal;text-transform:none;letter-spacing:0;font-weight:400;margin-left:8px}
  table.td tr.rem-row.battn td:first-child{box-shadow:inset 4px 0 0 var(--red)}
  /* facilities (plan 44): the group rows and the findings list in the dialog */
  table.fa tr.grp td{padding:16px 10px 4px;font-weight:600;font-size:12.5px;letter-spacing:.03em;text-transform:uppercase;color:var(--ink-muted);border-bottom:2px solid var(--ink-muted);background:none}
  table.fa td a{color:var(--teal-text)} table.fa td a .i{width:12px;height:12px;vertical-align:-1px}
  #faFindings{background:var(--card);border-color:var(--line)} #faFindings h4{color:var(--head)}
  #faFindingList{list-style:none;margin:0 0 10px;padding:0}
  #faFindingList li.fa-f{display:flex;align-items:flex-start;gap:10px;padding:8px 0;border-bottom:1px solid var(--line);font-size:13.5px}
  #faFindingList li.fa-f>div{flex:1} #faFindingList li.fa-f .status{margin-right:6px} #faFindingList li.fa-f.cleared{color:var(--ink-muted)}
  #faFindingList li.fa-f .rm{padding:4px 10px;font-size:12.5px;white-space:nowrap}
  #faRecClear label.inline{display:block;margin:4px 0;font-size:13px}
  .fgrid label.check{flex-direction:row;align-items:center;gap:8px} .fgrid label.check input{width:auto}
  .fgrid input,.fgrid select,.fgrid textarea{font:inherit;font-size:14px;text-transform:none;letter-spacing:0;font-weight:400;padding:8px 10px;border-radius:9px;border:1.5px solid var(--line);background:var(--bg);color:var(--ink);width:100%}
  .fgrid input:focus,.fgrid select:focus,.fgrid textarea:focus{outline:none;border-color:var(--teal-ui);background:var(--card)}
  .done-panel{margin-top:14px;padding:12px 14px;border-radius:10px;background:var(--attn-bg);border:1px solid var(--attn-edge)}
  .done-panel h4{margin:0 0 8px;font-size:14px;color:var(--attn-ink)}
  .done-panel .fgrid{grid-template-columns:2fr 1fr}
  .dlg-foot{display:flex;align-items:center;gap:10px;margin-top:14px;flex-wrap:wrap} .dlg-foot .spacer{flex:1}
  .dlg .rm{border:1.5px solid var(--line);background:none;color:var(--ink-2);font:inherit;font-size:13.5px;font-weight:600;padding:7px 14px;border-radius:10px;cursor:pointer}
  .dlg .rm[hidden]{display:none}
  /* plan 51: soft remove with a one-line confirm, same colours as the Access page's Remove */
  .rm.danger{color:var(--red-text)} .rm.danger:hover{border-color:var(--red);background:#fde8e3}
  :root[data-theme="dark"] .rm.danger:hover{background:#4a1d14;color:#ffb7a6}
  /* vendors (plan 46): group rows like the other registers, multi-line phone and contact cells, the search box;
     a Member's rows are read-only (no pointer, no hover) */
  table.vd tr.grp td{padding:16px 10px 4px;font-weight:600;font-size:12.5px;letter-spacing:.03em;text-transform:uppercase;color:var(--ink-muted);border-bottom:2px solid var(--ink-muted);background:none}
  table.vd td .pre{white-space:pre-line} table.vd td a{color:var(--teal-text)}
  table.vd tbody tr.ro{cursor:default} table.vd tbody tr.ro:hover td{background:none}
  table.vd td .rm.teal{white-space:nowrap}
  .sec-head input.search{font:inherit;font-size:13px;padding:5px 9px;border-radius:8px;border:1.5px solid var(--line);background:var(--bg);color:var(--ink);max-width:220px;vertical-align:middle}
  .sec-head input.search:focus{outline:none;border-color:var(--teal-ui);background:var(--card)}
  #vdSpend{margin:-8px 0 12px}
  .fgrid label[hidden]{display:none}
  .fgrid .rep-pair{display:flex;gap:8px} .fgrid .rep-pair input{width:5.5em;flex:none}
  .confirm{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:14px;padding:10px 14px;border-radius:10px;background:var(--attn-bg);border:1px solid var(--attn-edge);color:var(--attn-ink);font-size:13.5px}
  .confirm[hidden]{display:none} .confirm > span{flex:1 1 220px} .confirm b{color:inherit}
  .confirm select{font:inherit;font-size:13px;padding:5px 9px;border-radius:8px;border:1.5px solid var(--line);background:var(--card);color:var(--ink);max-width:100%}
  /* a fold behind a summary line (plan 37; the Pipelines rows since plan 74) */
  details.fold{margin-top:12px} details.fold summary{cursor:pointer;color:var(--teal-text);font-weight:600;font-size:14px}
  details.fold[hidden]{display:none}
  .dlg .btn{padding:8px 18px;font-size:14px}
  .err{margin:10px 0 0;color:var(--red-text);font-size:13.5px;min-height:1em}
  .hist{margin-top:12px;font-size:13.5px} .hist summary{cursor:pointer;color:var(--ink-muted)} .hist ul{margin-top:6px}
  /* plan 54: a renewal row's instructions, numbered, above the fields */
  .rn-steps{margin:0 0 14px;padding:10px 14px 8px;border:1.5px solid var(--teal-ui);border-radius:10px;background:var(--teal-tint)}
  .rn-steps h4{margin:0 0 6px;font-size:12px;font-weight:700;letter-spacing:.3px;text-transform:uppercase;color:var(--teal-text)}
  .rn-steps ol{margin:0;padding-left:22px;font-size:14px;line-height:1.45} .rn-steps li{margin:3px 0;overflow-wrap:anywhere}
  .rn-steps p{margin:6px 0 2px} .rn-steps[hidden]{display:none}
  table.rn td .status.lock{margin-left:6px;vertical-align:1px}
  /* plan 87: the Zoho chip after a mirrored ticket's title on the Tasks page and in Home's Your tasks; a link styled as a pill in the dialog foot */
  table.td td:first-child .status.lock,.todo-row .tt .status.lock{margin-left:6px;vertical-align:1px;font-size:11.5px;padding:2px 8px}
  .todo-row .tt .status.lock{align-self:flex-start;margin:2px 0 2px}
  .dlg-foot a.rm{text-decoration:none;display:inline-flex;align-items:center}
  /* Categories and tags dialog (plan 75): one list per vocabulary, rename in place, delete with its row count */
  .vocab{margin-top:14px} .vocab h4{margin:0 0 6px;font-size:13px;letter-spacing:.5px;text-transform:uppercase;color:var(--teal-text)}
  .vocab ul{list-style:none;margin:0;padding:0} .vocab li{display:flex;align-items:center;gap:10px;padding:4px 0}
  .vocab li input[type=text],.vocab .add input{flex:1;min-width:0;font:inherit;font-size:14px;padding:7px 10px;border-radius:9px;border:1.5px solid var(--line);background:var(--bg);color:var(--ink)}
  .vocab li input:focus,.vocab .add input:focus{outline:none;border-color:var(--teal-ui);background:var(--card)}
  .vocab li .muted{flex:none;margin:0;min-width:5.5em;text-align:right}
  .vocab li.gone{color:var(--ink-muted);font-size:13.5px} .vocab li.gone span{flex:1}
  .vocab .add{display:flex;gap:8px;margin-top:6px}
  .vocab .none{margin:0;font-size:13.5px}
  /* Tasks filters (plan 75; a labelled row under the heading since plan 82) and the tag picker in the task dialog */
  .td-filters{display:flex;flex-wrap:wrap;align-items:flex-end;gap:10px 16px;margin:-4px 0 14px}
  .td-filters .fld{display:flex;flex-direction:column;gap:4px;margin:0}
  .td-filters .fld>span{font-size:12px;font-weight:700;letter-spacing:.3px;text-transform:uppercase;color:var(--teal-text)}
  .td-filters select{font:inherit;font-size:13.5px;padding:5px 8px;border-radius:8px;border:1.5px solid var(--line);background:var(--card);color:var(--ink);max-width:220px}
  .td-filters .checks>div{display:flex;gap:14px;align-items:center;min-height:32px}
  .td-filters label.inline{font-weight:400;font-size:13.5px;display:inline-flex;align-items:center;gap:5px;cursor:pointer}
  .td-filters .rm{margin-bottom:4px}
  .fgrid .flab{display:flex;flex-direction:column;gap:4px} .fgrid .flabel{font-size:12px;font-weight:700;letter-spacing:.3px;text-transform:uppercase;color:var(--teal-text)}
  .tagpick{display:flex;flex-wrap:wrap;gap:8px;align-items:center} .tagpick p{margin:0;font-size:13.5px}
  .fgrid .tagpick label{flex-direction:row;align-items:center;gap:6px;font-size:13.5px;font-weight:600;text-transform:none;letter-spacing:0;color:var(--ink);border:1.5px solid var(--line);border-radius:18px;padding:5px 12px;cursor:pointer}
  .fgrid .tagpick label input{width:auto;margin:0} .fgrid .tagpick label:has(input:checked){background:var(--teal-ui);border-color:var(--teal-ui);color:#fff}
  .fgrid .tagpick label:has(input:disabled){cursor:default;opacity:.7}
  @media (max-width:768px){.fgrid,.done-panel .fgrid{grid-template-columns:1fr}.rem{min-width:100%}}
  /* ----- report viewer: full-width hero, meta row, data-shaped tables with sort + filter ----- */
  .hero.wide{margin-bottom:12px}
  .kpis.auto{grid-template-columns:repeat(auto-fit,minmax(150px,1fr));margin-top:16px}
  .kpis.auto .kpi{padding:12px 14px} .kpis.auto .kpi b{font-size:26px;white-space:nowrap} .kpis.auto .kpi span{font-size:13px}
  .meta-row{display:flex;flex-wrap:wrap;gap:6px 22px;margin:0 4px 18px;font-size:13px;color:var(--ink-muted)} .meta-row b{color:var(--ink-2);font-weight:600}
  .tcard{margin-top:18px;padding-bottom:8px}
  .thead-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:8px} .thead-row h3{margin:0} .thead-row .spacer{flex:1}
  .thead-row input,.thead-row select{font:inherit;font-size:13px;padding:5px 9px;border-radius:8px;border:1.5px solid var(--line);background:var(--bg);color:var(--ink);max-width:220px}
  .thead-row input:focus,.thead-row select:focus{outline:none;border-color:var(--teal-ui);background:var(--card)}
  .tscroll{overflow-x:auto;margin:0 -18px;padding:0 18px}
  table.dense{font-size:13px;table-layout:auto}
  table.dense th{padding:8px 10px;white-space:normal;vertical-align:bottom;cursor:pointer;user-select:none;line-height:1.2}
  table.dense th:hover{color:var(--navy)} :root[data-theme="dark"] table.dense th:hover{color:#fff}
  table.dense th[aria-sort="ascending"]::after{content:" \25B2";font-size:9px} table.dense th[aria-sort="descending"]::after{content:" \25BC";font-size:9px}
  table.dense td{padding:6px 10px;vertical-align:top;line-height:1.35}
  table.dense td.num,table.dense th.num{white-space:nowrap;width:1%}
  table.dense td.short,table.dense th.short{white-space:nowrap;width:1%}
  table.dense td.mid{min-width:120px;max-width:220px} table.dense td.long{min-width:260px} table.dense.multi td.long{min-width:200px}
  @media (max-width:768px){table.dense td.short{white-space:normal}table.dense td.long{min-width:160px}}
  .rblock{margin-bottom:8px} .rblock .sec-head{margin-top:6px}
  /* ----- reports as rows (plan 74): title, cadence, status + updated, lock; the Dashboards row carries live numbers ----- */
  .rlist{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,.9fr) minmax(0,2.2fr) minmax(190px,auto);column-gap:16px;background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);border:1px solid var(--edge);padding:0 16px;margin-bottom:22px}
  .rrow{display:grid;grid-column:1/-1;grid-template-columns:subgrid;gap:4px 16px;align-items:center;padding:11px 0;border-top:1px solid var(--line-soft);color:inherit;font-size:14.5px}
  .rrow:first-child{border-top:0} .rrow:hover .rt b{color:var(--teal-text);text-decoration:underline}
  .rrow .rt{display:flex;align-items:center;gap:9px;min-width:0} .rrow .rt b{color:var(--head);font-weight:600;overflow-wrap:anywhere} .rrow .rt .i{color:var(--teal-text);flex:none;font-size:17px}
  .rrow .rc{font-size:13px;color:var(--ink-muted)}
  .rrow .rs{display:inline-flex;align-items:center;gap:8px;min-width:0} .rrow .rs .status{flex:none}
  .rrow .why{font-size:12.5px;color:var(--ink-muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .rrow .why .i{font-size:12px;vertical-align:-2px}
  .rrow .rl{display:flex;justify-content:flex-end;min-width:0} .rrow .rl .status{white-space:nowrap}
  #dashBlock .rlist{grid-template-columns:minmax(0,1fr) minmax(0,3.5fr)} .rrow .rn{display:flex;flex-wrap:wrap;gap:6px 20px;align-items:baseline;min-width:0}
  .dn{display:inline-flex;align-items:baseline;gap:5px;white-space:nowrap} .dn b{font-size:20px;color:var(--head);font-variant-numeric:tabular-nums;line-height:1} .dn small{font-size:12.5px;color:var(--ink-muted)}
  .dn.bad b{color:var(--red-text)} .dn.warn b{color:#8a6d00} :root[data-theme="dark"] .dn.bad b{color:#ff9f88} :root[data-theme="dark"] .dn.warn b{color:var(--yellow)}
  .rrow .rn .why{white-space:normal}
  @media (max-width:768px){
    .rlist{grid-template-columns:minmax(0,1fr) minmax(0,auto)} .rrow .rt{grid-column:1} .rrow .rl{grid-column:2;grid-row:1}
    .rrow .rc{grid-column:1/-1} .rrow .rs{grid-column:1/-1} .rrow .why{white-space:normal} #dashBlock .rlist{grid-template-columns:1fr}
  }
  /* ----- cold chain (plan 59): unit board from the 5-minute snapshot, 24 h sparklines, fine-print link-out ----- */
  .cc-h{margin:4px 0 10px;font-size:13px;letter-spacing:.5px;text-transform:uppercase;color:var(--teal-text)}
  .cc-board{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:14px;margin-bottom:22px}
  .cc-board.amb{grid-template-columns:repeat(auto-fill,minmax(200px,1fr))}
  .cc-unit{background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);border:1px solid var(--edge);padding:14px 16px 12px;display:flex;flex-direction:column;gap:8px;min-width:0}
  .cc-unit header{display:flex;align-items:center;justify-content:space-between;gap:8px} .cc-unit header b{color:var(--head);font-size:15px;min-width:0;overflow-wrap:anywhere} .cc-unit header .status{flex:none}
  .cc-unit.over{box-shadow:inset 4px 0 0 var(--red),var(--shadow)} .cc-unit.dark{box-shadow:inset 4px 0 0 var(--yellow),var(--shadow)}
  .cc-temp{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap} .cc-temp b{font-size:34px;line-height:1;color:var(--head);font-variant-numeric:tabular-nums}
  .cc-temp span{font-size:13px;color:var(--ink-muted);line-height:1.3} .cc-temp em{font-style:normal} .cc-temp em.over{color:var(--red-text);font-weight:700}
  .cc-unit.over .cc-temp b{color:var(--red-text)} .cc-unit.dark .cc-temp b{color:var(--ink-muted)}
  :root[data-theme="dark"] .cc-unit.over .cc-temp b,:root[data-theme="dark"] .cc-temp em.over{color:#ff9f88}
  .cc-spark{display:block;width:100%;height:48px;color:var(--chart-1)} .cc-spark polyline{fill:none;stroke:currentColor;stroke-width:1.6;vector-effect:non-scaling-stroke;stroke-linejoin:round}
  .cc-spark .lim{stroke:var(--chart-limit);stroke-width:1;stroke-dasharray:4 3;vector-effect:non-scaling-stroke}
  .cc-unit.over .cc-spark{color:var(--chart-mark)}
  .cc-unit footer{margin:0;font-size:12.5px;line-height:1.35} .cc-unit footer b{color:var(--red-text)} :root[data-theme="dark"] .cc-unit footer b{color:#ff9f88}
  /* unit cards link to the monitor's unit page; KPI tiles are buttons (jump to the board / open the incident list) */
  a.cc-unit{color:inherit;text-decoration:none;cursor:pointer} a.cc-unit:hover,a.cc-unit:focus-visible{outline:2px solid var(--teal-ui);outline-offset:2px}
  .cc-unit header b{margin-right:auto} .cc-unit header .out{flex:none;display:inline-flex;color:var(--ink-muted)} .cc-unit header .out .i{width:14px;height:14px}
  #coldKpis button.kpi{font:inherit;color:inherit;text-align:left;cursor:pointer;appearance:none}
  #coldKpis button.kpi:hover,#coldKpis button.kpi:focus-visible{background:rgba(255,255,255,.17);border-color:rgba(255,255,255,.4)}
  .cc-inc{padding:8px 0;border-top:1px solid var(--line-soft)} .cc-inc:first-child{border-top:0} .cc-inc .status{font-size:11px;padding:1px 8px;margin-left:4px}
  .cc-note{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:10px 14px;margin:0 0 14px;font-size:14px;color:var(--ink-2)}
  .cc-note.warn{background:var(--attn-bg);border-color:var(--attn-edge);color:var(--attn-ink)}
  #coldBtn[hidden]{display:none}  /* .btn is inline-flex, which beats the hidden attribute */
  .cc-fine{margin:0 0 24px;font-size:12.5px;color:var(--ink-muted)} .cc-fine a{color:var(--teal-text);text-decoration:underline} .cc-fine .i{font-size:12px;vertical-align:-2px}
  @media (max-width:768px){.cc-board{grid-template-columns:1fr 1fr}.cc-temp b{font-size:28px}}
  @media (max-width:480px){.cc-board,.cc-board.amb{grid-template-columns:1fr}}

  /* ----- pipelines (plan 74): one identical row per job: name + what it does, status + reason, last run, next run, action ----- */
  .jobs{list-style:none;margin:0 0 26px;padding:0 18px;background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);border:1px solid var(--edge)}
  .jobs > li.muted{padding:14px 0}
  .job{display:grid;grid-template-columns:minmax(0,2.1fr) minmax(0,1.7fr) minmax(0,1fr) minmax(0,1fr) 104px;gap:6px 18px;align-items:center;padding:13px 0;border-top:1px solid var(--line-soft)}
  .job:first-child{border-top:0}
  .jt{display:flex;flex-direction:column;gap:2px;min-width:0} .jt .muted{margin:0}
  .jname{border:0;background:none;padding:0;font:inherit;font-size:15.5px;font-weight:600;color:var(--head);text-align:left;overflow-wrap:anywhere}
  button.jname{cursor:pointer} button.jname:hover{color:var(--teal-text);text-decoration:underline}
  .js{display:flex;flex-direction:column;align-items:flex-start;gap:4px;min-width:0} .js .why{font-size:12.5px;color:var(--ink-muted);overflow-wrap:anywhere}
  .jw{display:flex;flex-direction:column;min-width:0;font-size:14px;line-height:1.3} .jw small{font-size:11px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;color:var(--ink-muted)}
  .jw span{overflow-wrap:anywhere} .jw em{font-style:normal;font-size:12.5px;color:var(--ink-muted)}
  .ja{display:flex;flex-direction:column;align-items:flex-end;gap:4px;min-width:0} .ja .muted{margin:0;text-align:right;max-width:200px}
  .ja .rm.teal{white-space:nowrap}
  .job details.fold{grid-column:1/-1;margin:0} .job details.fold summary{font-size:13.5px}
  .job .fold ul{list-style:none;margin:6px 0 2px;padding:0 0 0 14px;border-left:2px solid var(--line-soft)}
  .job .fold li{display:flex;flex-direction:column;gap:1px;padding:7px 0;border-top:1px solid var(--line-soft);font-size:14px} .job .fold li:first-child{border-top:0}
  .job .fold li b{color:var(--head)} .job .fold li .muted{margin:0;overflow-wrap:anywhere}
  @media (max-width:980px){.job{grid-template-columns:minmax(0,1fr) minmax(0,1fr)} .jt,.js{grid-column:1/-1} .ja{grid-column:1/-1;align-items:flex-start} .ja .muted{text-align:left;max-width:none}}
  @media (max-width:480px){.job{grid-template-columns:minmax(0,1fr)} .jobs{padding:0 14px}}
  /* the capture card at the foot of the Phone Usage report (plan 74): three facts and the two actions */
  .capture .facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:4px 0 12px}
  .fact-cell{display:flex;flex-direction:column;gap:2px;padding:10px 12px;border-radius:10px;background:var(--bg);border:1px solid var(--line-soft);min-width:0}
  .fact-cell small{font-size:11px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;color:var(--ink-muted)}
  .fact-cell b{font-size:22px;line-height:1.15;color:var(--head);overflow-wrap:anywhere} .fact-cell span{font-size:12.5px;color:var(--ink-muted)}
  .fact-cell.warn b{color:#8a6d00} .fact-cell.bad b{color:var(--red-text)}
  :root[data-theme="dark"] .fact-cell.warn b{color:var(--yellow)} :root[data-theme="dark"] .fact-cell.bad b{color:#ff9f88}
  @media (max-width:768px){.capture .facts{grid-template-columns:1fr}}
  /* ----- home (plans 14, 74): Your tasks and Needs attention, one row per line ----- */
  .home-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);gap:18px;margin-bottom:26px}
  .home-card{padding:16px 18px 10px}
  .todo li{border-top:1px solid var(--line-soft)} .todo li:first-child{border-top:0}
  .todo-row{display:flex;align-items:flex-start;gap:10px;width:100%;text-align:left;background:none;border:0;padding:10px 6px;border-radius:8px;color:var(--ink);font-size:14.5px}
  .todo-row:hover{background:var(--teal-tint)}
  .todo-row b{color:var(--head)}
  .todo-row .tt{display:flex;flex-direction:column;min-width:0;flex:1} .todo-row .tt .muted{margin:0} .todo-row .status{flex:none;margin-top:1px}
  .dot{flex:none;width:10px;height:10px;border-radius:50%;margin-top:6px;background:var(--teal-ui)}
  .todo-row.bad .dot{background:var(--red)} .todo-row.warn .dot{background:var(--yellow)} .dot.ok{background:var(--lime)}
  .todo-none{display:flex;align-items:center;gap:10px;padding:10px 6px;color:var(--ink-2)} .todo-none .dot{margin-top:0}
  .home-reports{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:14px;margin-bottom:26px}
  .hr-block{background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);border:1px solid var(--edge);padding:12px 14px}
  .hr-block h4{margin:0 0 6px;font-size:12.5px;letter-spacing:.5px;text-transform:uppercase;color:var(--teal-text)}
  .hr-row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:7px 4px;border-top:1px solid var(--line-soft);font-size:14px;color:var(--ink)}
  .hr-row:first-of-type{border-top:0} .hr-row:hover{color:var(--teal-text)} .hr-row .status{flex:none;font-size:11.5px;padding:2px 8px}
  .nbadge{display:inline-grid;place-items:center;min-width:20px;height:20px;padding:0 6px;border-radius:10px;background:var(--yellow);color:#1f1900;font-size:12px;font-weight:700;margin-left:2px}
  .nbadge.hot{background:var(--red);color:#fff}
  @media (max-width:900px){.home-grid{grid-template-columns:1fr}}
  /* ----- viewer (plan 16): two rows of four KPI tiles, values wrap instead of overflowing ----- */
  .kpis.grid4{grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:auto;margin-top:16px}
  .kpis.grid4 .kpi{padding:12px 14px;min-width:0}
  .kpis.grid4 .kpi b{font-size:24px;line-height:1.15;overflow-wrap:anywhere}
  .kpis.grid4 .kpi span{font-size:13px} .kpi span em{display:block;font-style:normal;font-size:12px;color:#a9c6d1;margin-top:2px}
  @media (max-width:900px){.kpis.grid4{grid-template-columns:repeat(2,minmax(0,1fr))}}
  /* ----- tables (plan 17): controls on their own row, headers wrap, long tables collapse ----- */
  .tools-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:2px 0 10px}
  .tools-row input,.tools-row select{font:inherit;font-size:13px;padding:5px 9px;border-radius:8px;border:1.5px solid var(--line);background:var(--bg);color:var(--ink);max-width:220px}
  .tools-row input:focus,.tools-row select:focus{outline:none;border-color:var(--teal-ui);background:var(--card)}
  table.dense th.num,table.dense th.short{white-space:normal;min-width:4.5em}
  .tcard .more{margin:10px 0 4px}
  .tcard .more[hidden]{display:none}
  /* ----- charts (plan 21): drawn above the tables; the box height, not an aspect ratio, keeps them readable on a phone ----- */
  .chart-card{padding-bottom:14px}
  .chart-box{position:relative;width:100%;height:clamp(220px,38vw,300px)}
  .chart-twin{margin-left:auto;font-size:13px} a.chart-twin{color:var(--teal-text)}
  @media (max-width:768px){.chart-box{height:230px}}
  /* ----- employee schedule and front desk coverage (plan 77): one grid on Home for every role ----- */
  .sched-card{margin-bottom:26px;padding-bottom:16px}
  .sched-head{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap} .sched-head h3{margin:0}
  .sched-tools{display:flex;gap:8px;flex-wrap:wrap} .sched-tools .rm[hidden]{display:none}
  .sc-grid{display:grid;grid-template-columns:minmax(110px,150px) repeat(5,minmax(0,1fr));gap:6px 8px;margin-top:12px;align-items:stretch}
  .sc-row{display:contents}
  .sc-hd{font-size:12px;font-weight:700;letter-spacing:.4px;text-transform:uppercase;color:var(--teal-text);padding:0 4px 2px;align-self:end}
  .sc-hd span{display:block;font-weight:400;text-transform:none;letter-spacing:0;color:var(--ink-muted);font-size:11.5px}
  .sc-name{display:flex;flex-direction:column;justify-content:center;font-size:14px;font-weight:600;color:var(--head);padding:2px 4px;min-width:0;line-height:1.25}
  .sc-name span{font-size:11.5px;font-weight:400;color:var(--ink-muted)}
  /* the Front desk strip above the grid: today's coverage on one track, the current time marked in red */
  .desk-card{margin-bottom:26px;padding-bottom:16px}
  .desk-day{font-weight:400;font-size:12.5px;letter-spacing:0;text-transform:none;color:var(--ink-muted);margin-left:4px}
  .desk-track{position:relative;height:66px;margin-top:12px;border-radius:8px;background:var(--bg);border:1px solid var(--line-soft);overflow:hidden}
  .desk-track .sc-track{position:absolute;inset:0;display:block}
  .desk-track .sc-seg{top:6px;bottom:6px;flex-direction:column;gap:2px;padding:0 4px;border-radius:7px;border-left:2px solid var(--card);line-height:1.15}
  .desk-track .sc-seg b{font-size:13px;font-weight:700;max-width:100%;overflow:hidden;text-overflow:ellipsis}
  .desk-track .sc-seg small{font-size:11.5px;font-weight:600;opacity:.92;max-width:100%;overflow:hidden;text-overflow:ellipsis}
  .desk-now{position:absolute;top:0;bottom:0;width:2px;background:var(--red);z-index:2}
  .desk-list{display:flex;gap:6px 18px;flex-wrap:wrap;margin-top:10px;font-size:13px;color:var(--ink-2)}
  .desk-list b{color:var(--head)} .desk-list .none b{color:var(--red-text)}
  .sc-legend i.desk-now{position:static;width:2px;height:12px;border-radius:0}
  .sc-cell{display:block;position:relative;height:34px;border-radius:8px;background:var(--bg);border:1px solid var(--line-soft);padding:0;overflow:hidden;color:inherit;font:inherit;text-align:left;width:100%}
  .sc-lab{display:none}
  .sc-track{position:absolute;inset:0;display:block;background-image:repeating-linear-gradient(to right,var(--line-soft) 0 1px,transparent 1px var(--hour));background-position:var(--off) 0;background-size:var(--hour) 100%}
  button.sc-cell{cursor:pointer} button.sc-cell:hover{border-color:var(--teal-ui);background:var(--teal-tint)} button.sc-cell:focus-visible{outline:2px solid var(--teal-ui);outline-offset:1px}
  .sc-bar{position:absolute;top:4px;bottom:4px;border-radius:6px;background:var(--teal-ui);color:#fff;font-size:11.5px;font-weight:700;display:flex;align-items:center;justify-content:center;white-space:nowrap;overflow:hidden;padding:0 4px;min-width:3px}
  .sc-bar.pto{background:repeating-linear-gradient(135deg,var(--gray2) 0 3px,transparent 3px 7px);color:var(--ink-2);border:1px solid var(--gray2)}
  .sc-bar.pto b{background:var(--card);padding:0 5px;border-radius:4px;font-weight:700}
  .sc-seg{position:absolute;top:5px;bottom:5px;display:flex;align-items:center;justify-content:center;font-size:11.5px;font-weight:700;white-space:nowrap;overflow:hidden;padding:0 3px;border-left:1px solid var(--card);min-width:3px}
  .sc-seg.on{background:var(--navy);color:#fff}
  .sc-seg.none{background:#fde8e3;color:var(--red-text);box-shadow:inset 0 0 0 1px var(--red)}
  :root[data-theme="dark"] .sc-seg.on{background:var(--tile-navy)}
  :root[data-theme="dark"] .sc-seg.none{background:#4a1d14;color:#ffb7a6}
  :root[data-theme="dark"] .sc-bar.pto b{background:var(--bg)}
  .sc-legend{display:flex;gap:6px 16px;flex-wrap:wrap;margin-top:12px;font-size:12.5px;color:var(--ink-muted)}
  .sc-legend span{display:inline-flex;align-items:center;gap:6px}
  .sc-legend i{position:static;display:inline-block;width:16px;height:11px;border-radius:3px;padding:0;border-left:0}
  .sched .muted{margin:8px 0 0}
  .vocab ol{list-style:none;margin:0;padding:0;counter-reset:n} .vocab ol li{display:flex;align-items:center;gap:8px;padding:4px 0;font-size:14px}
  .vocab ol li::before{counter-increment:n;content:counter(n) ".";color:var(--ink-muted);min-width:1.4em;text-align:right;font-size:13px}
  .vocab ol li .nm{flex:1;min-width:0;color:var(--ink)} .vocab ol li .rm{padding:3px 8px;font-size:12px} .vocab ol li .rm:disabled{opacity:.4;cursor:default}
  .vocab .add{display:flex;gap:8px;align-items:center;margin-top:4px} .vocab .add select{flex:1;min-width:0;font:inherit;font-size:14px;padding:7px 10px;border-radius:9px;border:1.5px solid var(--line);background:var(--bg);color:var(--ink)}
  .vocab p.muted{margin:4px 0}
  @media (max-width:768px){
    .sc-grid{display:block;margin-top:6px}
    .sc-grid .sc-hd{display:none}
    .sc-row{display:block;padding:8px 0 4px;border-top:1px solid var(--line-soft)} .sc-row:first-of-type{border-top:0}
    .sc-row .sc-name{padding:0 0 4px}
    .sc-cell{display:flex;align-items:stretch;height:30px;margin:4px 0;overflow:visible}
    .sc-lab{display:flex;align-items:center;flex:none;width:34px;padding-left:6px;font-size:11.5px;font-weight:700;color:var(--ink-muted);background:var(--card);border-right:1px solid var(--line-soft)}
    .sc-track{position:relative;inset:auto;flex:1;min-width:0;overflow:hidden;border-radius:0 7px 7px 0}
  }
  /* ----- plan 77: a Member or Viewer (html.limited) has Home = Your tasks + Schedule and the Tasks filters Tag and mine ----- */
  html.limited .ld{display:none}
  html.limited #homeNeeds{display:none}
  html.limited .home-grid{grid-template-columns:1fr}
  /* ===== plan 86: phones and tablets. One scheme: 768 px and under is the phone/tablet layout, 480 px and under the
     phone refinement. Desktop (1280 px and up) is untouched by everything below. ===== */
  html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
  @media (max-width:768px){
    /* header: the two round buttons grow to a thumb size */
    .top .wrap{min-height:56px}
    .theme,.avatar{width:42px;height:42px}
    /* section nav: every button shares the row, centred, 44 px tall; five buttons wrap to two rows on a phone */
    .secnav{padding:5px;gap:6px;margin-bottom:16px}
    .nav-apps{width:100%;gap:4px}
    .secnav button{flex:1 1 auto;justify-content:center;min-height:44px;padding:8px 10px;font-size:15px}
    /* tap targets: small pill buttons, filter fields and form fields reach 40 px; 16 px inputs stop iOS zooming on focus */
    button.rm,.rm.teal,.members .rm{min-height:40px;padding:8px 14px;font-size:13.5px}
    .vocab ol li .rm,#faFindingList li.fa-f .rm{min-height:36px;padding:6px 12px}
    .todo-row{padding:12px 6px}
    .rrow{padding:13px 0}
    .thead-row input,.thead-row select,.tools-row input,.tools-row select,.confirm select{min-height:40px;max-width:100%}
    .td-filters{gap:8px 10px}
    .td-filters .fld{flex:1 1 calc(50% - 10px);min-width:0}
    .td-filters .fld.checks{flex:1 1 100%}
    .td-filters select{width:100%;max-width:none;min-height:40px}
    .td-filters .rm{flex:1 1 100%;margin-bottom:0}
    .fgrid input,.fgrid select,.fgrid textarea,.add-box input,.vocab li input[type=text],.vocab .add input,.vocab .add select{min-height:42px;font-size:16px}
    .fgrid .rep-pair input{width:6.5em}
    .dlg .btn,.dlg .rm{min-height:42px}
    /* charts: full width, the box height already capped at 230 px above */
    .chart-box canvas{max-width:100%}
    /* the Front desk strip: the track keeps a desktop width and scrolls sideways inside the card (app.js starts it at
       the Now mark), so every segment keeps the name over the hours; the list under it names every shift in full */
    .desk-track{overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;scrollbar-width:thin}
    .desk-track .sc-track{position:relative;inset:auto;display:block;width:1000px;min-width:100%;height:100%}
    .desk-track .sc-seg{padding:0 2px}
    .desk-track .sc-seg small{font-size:10.5px}
    /* the three registers (Renewals, Tasks, Inspections) stack each row as a card: title and status chip on the first
       line, then one labelled line per column. The labels mirror the <th> row of each table in index.html. */
    table.rn thead{display:none}
    table.rn,table.rn tbody{display:block;width:100%}
    table.rn tbody tr{display:flex;flex-wrap:wrap;align-items:flex-start;gap:4px 10px;padding:12px 0 12px 10px;border-bottom:1px solid var(--line-soft);box-shadow:inset 4px 0 0 transparent}
    table.rn tbody tr.grp{display:block;padding:14px 0 2px;box-shadow:none;border-bottom:0}
    table.rn tbody tr.grp td{display:block;padding:0 0 4px}
    table.rn tbody tr:hover{background:var(--teal-tint)} table.rn tbody tr:hover td{background:none}
    table.rn tbody tr.rem-row{box-shadow:inset 4px 0 0 var(--teal-ui)}
    table.rn tbody tr.rem-row.b60{box-shadow:inset 4px 0 0 var(--yellow)} table.rn tbody tr.rem-row.b30{box-shadow:inset 4px 0 0 var(--gold)}
    table.rn tbody tr.rem-row.boverdue,table.td tbody tr.rem-row.battn{box-shadow:inset 4px 0 0 var(--red)}
    table.rn tbody tr.rem-row td:first-child,table.td tr.rem-row.battn td:first-child{box-shadow:none}
    table.rn td{display:block;padding:0;border:0;text-align:left;font-size:14px}
    table.rn td:first-child{flex:1 1 160px;order:0;min-width:0}
    table.rn td b{overflow-wrap:anywhere}
    /* a labelled line: the label from ::before in column 1, the value and its sub-lines in column 2 */
    table.rn tbody tr:not(.grp) td:nth-child(n+2)::before{grid-column:1;font-size:11px;font-weight:700;letter-spacing:.4px;text-transform:uppercase;color:var(--ink-muted);line-height:1.6}
    table.rn tbody tr:not(.grp) td:nth-child(n+2)>*{grid-column:2}
    /* Renewals: Vendor | Annual cost | Term end | Notice by | Auto | Status | chip */
    table.rn:not(.td):not(.fa):not(.vd) td:nth-child(2),table.rn:not(.td):not(.fa):not(.vd) td:nth-child(3),table.rn:not(.td):not(.fa):not(.vd) td:nth-child(4),table.rn:not(.td):not(.fa):not(.vd) td:nth-child(5),table.rn:not(.td):not(.fa):not(.vd) td:nth-child(6){flex:1 1 100%;order:2;display:grid;grid-template-columns:92px minmax(0,1fr);gap:0 8px;align-items:baseline}
    table.rn:not(.td):not(.fa):not(.vd) td:nth-child(2)::before{content:"Annual cost"} table.rn:not(.td):not(.fa):not(.vd) td:nth-child(3)::before{content:"Term end"}
    table.rn:not(.td):not(.fa):not(.vd) td:nth-child(4)::before{content:"Notice by"} table.rn:not(.td):not(.fa):not(.vd) td:nth-child(5)::before{content:"Auto renew"}
    table.rn:not(.td):not(.fa):not(.vd) td:nth-child(6)::before{content:"Status"}
    table.rn:not(.td):not(.fa):not(.vd) td:nth-child(7){flex:none;order:1;max-width:100%}
    /* Tasks: Task | Owner | Due | chip | quick action */
    table.td td:nth-child(2),table.td td:nth-child(3){flex:1 1 100%;order:2;display:grid;grid-template-columns:92px minmax(0,1fr);gap:0 8px;align-items:baseline}
    table.td td:nth-child(2)::before{content:"Owner"} table.td td:nth-child(3)::before{content:"Due"}
    table.td td:nth-child(4){flex:none;order:1;max-width:100%}
    table.td td:nth-child(5){flex:1 1 100%;order:3;padding-top:4px} table.td td:nth-child(5):empty{display:none}
    /* Compact phone row for Tasks (her yes 2026-10-22, the one judgment call plan 86 left her): the title and its
       chip on line one, the sub-line under it, then Owner and Due inline on one line with the Done today button at
       the right end of that same line, instead of two labelled lines and a full-width button. The owner's "vendor" /
       "not in Entra yet" note is dropped on a phone (the group header carries it) so the line fits at 375 px. */
    table.td tbody tr:not(.grp){gap:2px 8px;padding:10px 0 10px 10px}
    table.td td:nth-child(2),table.td td:nth-child(3){flex:0 1 auto;order:2;display:inline-flex;flex-wrap:wrap;gap:0 4px;align-items:baseline;font-size:13.5px;max-width:100%}
    table.td td:nth-child(2)::before,table.td td:nth-child(3)::before{line-height:1.5;font-size:10.5px}
    table.td td:nth-child(2) .muted{display:none}
    table.td td:nth-child(3) .muted{display:inline}
    table.td td:nth-child(5){flex:0 0 auto;order:2;margin-left:auto;padding-top:0;align-self:center}
    table.td td:nth-child(5) .rm{min-height:36px;padding:4px 10px;font-size:12.5px;white-space:nowrap}
    /* Inspections: Inspection or permit | Last result | Open findings | Next due | chip */
    table.fa td:nth-child(2),table.fa td:nth-child(3),table.fa td:nth-child(4){flex:1 1 100%;order:2;display:grid;grid-template-columns:92px minmax(0,1fr);gap:0 8px;align-items:baseline}
    table.fa td:nth-child(2)::before{content:"Last result"} table.fa td:nth-child(3)::before{content:"Open findings"} table.fa td:nth-child(4)::before{content:"Next due"}
    table.fa td:nth-child(5){flex:none;order:1;max-width:100%}
    /* Vendors: Vendor | What for | Phone | Contact | chip (one labelled line per column, same as the registers above) */
    table.vd td:nth-child(2),table.vd td:nth-child(3),table.vd td:nth-child(4){flex:1 1 100%;order:2;display:grid;grid-template-columns:92px minmax(0,1fr);gap:0 8px;align-items:baseline}
    table.vd td:nth-child(2)::before{content:"What for"} table.vd td:nth-child(3)::before{content:"Phone"} table.vd td:nth-child(4)::before{content:"Contact"}
    table.vd td:nth-child(5){flex:none;order:1;max-width:100%} table.vd td:nth-child(5):empty{display:none}
    table.vd tbody tr.ro:hover{background:none}
    .sec-head input.search{min-height:40px;max-width:100%;width:100%}
    /* the finding rows in the Inspections dialog wrap instead of squeezing the button */
    #faFindingList li.fa-f{flex-wrap:wrap} #faFindingList li.fa-f .rm{margin-left:auto}
  }
  @media (max-width:480px){
    .wrap{padding:0 16px}
    main{padding:16px 0 32px}
    .hello{margin-bottom:12px} .hello h1{font-size:24px} .hello .date{font-size:14px}
    .secnav button{font-size:14px;padding:8px 6px;gap:5px}
    .card{padding:14px} .home-card{padding:14px 14px 8px} .tscroll{margin:0 -14px;padding:0 14px}
    .hero{padding:18px 16px} .hero h2{font-size:22px} .hero p{font-size:15px}
    .hero .kpis,.kpis.auto,.kpis.grid4{margin-top:14px;gap:8px}
    .kpi{padding:10px 12px} .kpis.four .kpi b{font-size:24px} .kpi span{font-size:13px}
    .sec-head{flex-direction:column;align-items:flex-start;gap:6px} .sec-head p{line-height:2}
    .attn{flex-wrap:wrap} .attn a,.attn span.cta{margin-left:0}
    .rlist,.jobs{padding:0 14px}
    .rrow{font-size:14px}
    .rlist,#dashBlock .rlist{grid-template-columns:minmax(0,1fr)} .rrow .rt,.rrow .rc,.rrow .rs,.rrow .rl{grid-column:1} .rrow .rl{grid-row:auto;justify-content:flex-start} .rrow .rl:empty{display:none}
    .desk-list{flex-direction:column;gap:4px;font-size:14px}
    .remind-strip{padding:8px 10px} .rem-head{min-width:0}
    .dlg{width:100%;max-width:100%;height:100%;max-height:100%;margin:0;border-radius:0}
    .dlg form{padding:16px 16px 22px} .dlg h3{font-size:18px}
    .dlg-foot{gap:8px} .dlg-foot .btn,.dlg-foot .rm{flex:1 1 auto;justify-content:center;text-align:center}
    .td-filters .fld{flex:1 1 100%}
    .thead-row input,.thead-row select,.tools-row input,.tools-row select{flex:1 1 100%;max-width:none}
    .meta-row{gap:4px 14px}
    .foot{flex-direction:column;gap:4px}
  }