/* Matches the existing automationarena.co.in admin skin: teal bar, white
   icon nav, light grey canvas — so the module does not look bolted on. */
:root{
  --teal:#12bdb0; --teal-d:#0e9d92; --ink:#12212f; --muted:#6b7b8c;
  --line:#dfe6ec; --bg:#eef1f4; --card:#fff; --purple:#6f5bd0;
  --ok:#1e9e5a; --warn:#c78b00; --bad:#cf3b30; --soon:#2b7cd3;
  --r:10px; --sh:0 1px 2px rgba(18,33,47,.06),0 2px 10px rgba(18,33,47,.05);
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);
  font:15px/1.5 Times New Roman,Times,serif;-webkit-text-size-adjust:100%}
a{color:#1668b3;text-decoration:none}
a:hover{text-decoration:underline}

.topbar{background:var(--teal);color:#fff;padding:14px 18px;display:flex;align-items:center;gap:14px;position:sticky;top:0;z-index:40}
.topbar .brand{font-weight:800;font-size:19px;letter-spacing:.4px;text-transform:uppercase;color:#fff}
.topbar .spacer{flex:1}
.topbar .bell{position:relative;font-size:19px}
.topbar .bell .n{position:absolute;top:-7px;right:-11px;background:#f0508a;color:#fff;border-radius:11px;
  font-size:11px;font-weight:700;padding:1px 6px;line-height:1.5}
.topbar .who{background:rgba(255,255,255,.2);border-radius:20px;padding:5px 13px;font-size:13px}

nav.mods{background:#fff;border-bottom:1px solid var(--line);overflow-x:auto;-webkit-overflow-scrolling:touch;
  position:sticky;top:52px;z-index:39}
nav.mods ul{display:flex;gap:2px;margin:0;padding:0 8px;list-style:none;min-width:max-content}
nav.mods a{display:flex;flex-direction:column;align-items:center;gap:3px;padding:10px 13px;color:#54606d;
  font-size:12.5px;white-space:nowrap;border-bottom:3px solid transparent}
nav.mods a .ic{font-size:17px;line-height:1}
nav.mods a.on{color:var(--teal-d);border-bottom-color:var(--teal)}
nav.mods a:hover{text-decoration:none;background:#f6f9fb}

.wrap{max-width:1280px;margin:0 auto;padding:18px}
h1.page{font-size:22px;color:var(--teal-d);margin:0 0 4px;font-weight:700}
.sub{color:var(--muted);font-size:13.5px;margin:0 0 16px}

.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:13px;margin-bottom:20px}
.tile{background:var(--card);border-radius:var(--r);padding:15px 16px;box-shadow:var(--sh);display:flex;gap:13px;align-items:center}
.tile .ic{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;font-size:19px;color:#fff;flex:none}
.tile .n{font-size:25px;font-weight:700;line-height:1.15}
.tile .l{font-size:12.5px;color:var(--muted)}
.i-teal{background:var(--teal)} .i-blue{background:var(--soon)} .i-red{background:var(--bad)}
.i-amber{background:var(--warn)} .i-green{background:var(--ok)} .i-purple{background:var(--purple)}

.card{background:var(--card);border-radius:var(--r);box-shadow:var(--sh);margin-bottom:18px;overflow:hidden}
.card > h2{margin:0;padding:13px 16px;font-size:15.5px;border-bottom:1px solid var(--line);
  display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.card > h2 .spacer{flex:1}
.card .body{padding:16px}
.card .body.tight{padding:0}

table.grid{width:100%;border-collapse:collapse;font-size:14px}
table.grid th{text-align:left;padding:10px 14px;background:#f7fafc;color:#57646f;font-size:12.5px;
  font-weight:600;border-bottom:1px solid var(--line);white-space:nowrap}
table.grid td{padding:11px 14px;border-bottom:1px solid #eef2f5;vertical-align:top}
table.grid tr:last-child td{border-bottom:0}
table.grid tr:hover td{background:#fafcfd}
.num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}

.pill{display:inline-block;padding:2px 9px;border-radius:20px;font-size:11.5px;font-weight:600;white-space:nowrap}
.p-ok{background:#e4f6ea;color:#1b7a46} .p-bad{background:#fde9e7;color:#b12e25}
.p-warn{background:#fdf3dd;color:#8a6100} .p-info{background:#e6f0fb;color:#1c5e9e}
.p-grey{background:#eef1f4;color:#5b6874} .p-purple{background:#efeafc;color:#54419f}
.overdue{color:var(--bad);font-weight:600} .critical{color:#d2691e;font-weight:600}
.soon{color:var(--soon)} .ok{color:var(--muted)} .nodate{color:#aab4bd}

.btn{display:inline-flex;align-items:center;gap:6px;padding:9px 15px;border-radius:8px;border:0;cursor:pointer;
  font:600 14px/1 inherit;background:var(--purple);color:#fff;text-decoration:none}
.btn:hover{filter:brightness(1.07);text-decoration:none}
.btn.teal{background:var(--teal)} .btn.grey{background:#e7ecf1;color:#43505d}
.btn.purple{background:var(--purple)}
.btn.green{background:var(--ok)} .btn.red{background:var(--bad)} .btn.blue{background:var(--soon)}
.btn.sm{padding:6px 11px;font-size:13px;border-radius:7px}
.btn[disabled]{opacity:.5;cursor:not-allowed}

label{display:block;font-size:12.5px;font-weight:600;color:#48555f;margin-bottom:5px}
input[type=text],input[type=email],input[type=password],input[type=date],input[type=number],select,textarea{
  width:100%;padding:10px 11px;border:1px solid #c9d3dc;border-radius:8px;font:15px inherit;background:#fff;color:var(--ink)}
input:focus,select:focus,textarea:focus{outline:0;border-color:var(--teal);box-shadow:0 0 0 3px rgba(18,189,176,.16)}
textarea{min-height:78px;resize:vertical}
.fields{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:14px}
.f2{grid-column:span 2} @media(max-width:640px){.f2{grid-column:span 1}}
.actions{display:flex;gap:9px;flex-wrap:wrap;margin-top:18px}

.flash{padding:11px 15px;border-radius:9px;margin-bottom:15px;font-size:14px}
.flash.ok{background:#e4f6ea;border:1px solid #a9d5b0;color:#1b6b3f}
.flash.err{background:#fde9e7;border:1px solid #e3aaa4;color:#a02c22}
.empty{padding:34px 16px;text-align:center;color:var(--muted)}
.muted{color:var(--muted)} .small{font-size:12.5px}
.rowsplit{display:flex;gap:18px;flex-wrap:wrap}
.rowsplit > *{flex:1 1 320px;min-width:0}

.rem{display:flex;gap:12px;padding:12px 15px;border-bottom:1px solid #eef2f5;align-items:flex-start}
.rem:last-child{border-bottom:0}
.rem .bar{width:4px;border-radius:3px;align-self:stretch;flex:none;background:#ccd5dd}
.rem.overdue .bar{background:var(--bad)} .rem.critical .bar{background:#e08a2e}
.rem.soon .bar{background:var(--soon)} .rem.ok .bar{background:#b9c4ce}
.rem .t{font-weight:600;font-size:14px} .rem .d{font-size:12.5px;color:var(--muted)}
.rem .when{margin-left:auto;text-align:right;font-size:12.5px;white-space:nowrap;flex:none}

.qrwrap{display:flex;gap:16px;align-items:center;flex-wrap:wrap}
.qrwrap svg{width:120px;height:120px;border:1px solid var(--line);border-radius:8px;background:#fff}

@media(max-width:720px){
  .wrap{padding:12px}
  .topbar{padding:12px 14px} .topbar .brand{font-size:16px}
  table.grid th,table.grid td{padding:9px 10px;font-size:13.5px}
  .btn{padding:10px 14px}
  .hide-sm{display:none}
}

.btn.amber{background:var(--warn);color:#3d2c00}

/* ============================================================ *
 * GLANCE PANEL — the top of the dashboard.
 *
 * Each card is a big number you can press. Pressing one opens
 * that work list underneath instead of sending you to another
 * screen, so the answer to "what needs doing" and the doing of
 * it are on the same page.
 * ============================================================ */
.glance{display:grid;grid-template-columns:repeat(auto-fit,minmax(178px,1fr));gap:12px;margin:0 0 20px}
.gl{position:relative;display:block;background:var(--card);border-radius:14px;padding:16px 16px 14px;
  box-shadow:var(--sh);color:inherit;border:2px solid transparent;transition:transform .12s,box-shadow .12s}
.gl:hover{text-decoration:none;transform:translateY(-2px);
  box-shadow:0 3px 6px rgba(18,33,47,.09),0 8px 22px rgba(18,33,47,.10)}
.gl .cap{display:flex;align-items:center;gap:7px;font-size:12px;font-weight:600;letter-spacing:.3px;
  text-transform:uppercase;color:var(--muted)}
.gl .dot{width:9px;height:9px;border-radius:50%;flex:none}
.gl .big{font-size:31px;font-weight:800;line-height:1.15;margin:7px 0 1px;font-variant-numeric:tabular-nums}
.gl .big.money{font-size:24px}
.gl .note{font-size:12.5px;color:var(--muted);line-height:1.35;min-height:2.7em}
.gl .go{position:absolute;right:14px;bottom:13px;font-size:15px;color:#c3ccd4}
.gl:hover .go{color:var(--teal-d)}

.gl.on{border-color:var(--teal);background:#f7fefd}
.gl.on .go{color:var(--teal-d)}
.gl.zero .big{color:#9fb0bd}
.gl.hot .big{color:var(--bad)}
.gl.warm .big{color:var(--warn)}
.gl.good .big{color:var(--ok)}

/* the work list the glance panel opens */
.work h2 .who{font-weight:400;color:var(--muted);font-size:13px}
.workbar{display:flex;gap:8px;flex-wrap:wrap;align-items:center;padding:11px 16px;background:#f7fafc;
  border-bottom:1px solid var(--line)}
.emptywin{padding:34px 20px;text-align:center;color:var(--muted)}
.emptywin .big{font-size:34px;line-height:1;margin-bottom:9px}

/* inline action forms inside a table row */
.inline{display:flex;gap:6px;align-items:center;flex-wrap:wrap;margin:0}
.inline input[type=number],.inline input[type=text],.inline input[type=date]{
  padding:6px 9px;border:1px solid #c7d0da;border-radius:7px;font-size:13px;width:auto}
.inline input.amt{width:96px;text-align:right;font-variant-numeric:tabular-nums}
.inline input.ref{width:106px}
.inline select{padding:6px 8px;border:1px solid #c7d0da;border-radius:7px;font-size:13px;width:auto}
.rowform{background:#fbfcfd}
.rowform td{padding-top:9px;padding-bottom:11px}

@media (max-width:640px){
  .glance{grid-template-columns:repeat(2,1fr);gap:9px}
  .gl{padding:13px 12px 11px;border-radius:12px}
  .gl .big{font-size:25px} .gl .big.money{font-size:19px}
  .gl .note{min-height:0;font-size:11.5px}
  .gl .go{display:none}
  .btn{padding:11px 15px}          /* thumbs, not mice */
  .btn.sm{padding:9px 12px}
}

/* ============================================================ *
 * PHONE TABLES
 *
 * Two things, both because .card hides its overflow and a table
 * that does not fit was being CLIPPED — the right-hand columns
 * simply unreachable rather than merely awkward.
 *
 * 1. Any table inside a card may scroll sideways instead.
 * 2. A table marked .stack stops being a table below 640px and
 *    becomes one small card per row, each cell labelled by the
 *    column it came from. Used on the screens you actually work
 *    from on a phone.
 * ============================================================ */
@media (max-width:760px){
  .card .body.tight{overflow-x:auto;-webkit-overflow-scrolling:touch}
}

@media (max-width:640px){
  table.stack,table.stack tbody,table.stack tr,table.stack td{display:block;width:100%}
  table.stack thead{display:none}
  table.stack tr{border-bottom:1px solid var(--line);padding:13px 14px}
  table.stack tr:last-child{border-bottom:0}
  table.stack tr:hover td{background:transparent}
  table.stack td{border:0;padding:2px 0;text-align:left}
  table.stack td.num{text-align:left}
  table.stack td[data-l]::before{
    content:attr(data-l);display:inline-block;min-width:96px;color:var(--muted);
    font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.3px}
  table.stack td.wide::before{display:block;min-width:0;margin-bottom:2px}
  table.stack td.act{margin-top:10px}
  table.stack td.act::before{display:none}
  table.stack td:empty{display:none}
  .inline{gap:7px}
  .inline input.amt,.inline input.ref{width:calc(50% - 4px);font-size:16px}
  .inline select{width:calc(50% - 4px);font-size:16px}
  .inline button{width:100%}
}

/* ============================================================ *
 * THE CHAIN — order › job › reports › invoice › paid.
 * Five steps, each either done or not, so where a piece of work
 * has stalled is visible without reading anything.
 * ============================================================ */
.chain{display:flex;align-items:stretch;gap:4px;margin:0 0 20px;flex-wrap:wrap}
.chain .step{flex:1;min-width:118px;background:var(--card);border-radius:10px;padding:12px 14px;
  box-shadow:var(--sh);border-left:4px solid #dbe3ea;color:inherit;text-decoration:none}
.chain a.step:hover{text-decoration:none;filter:brightness(.99);box-shadow:0 2px 5px rgba(18,33,47,.10)}
.chain .step.on{border-left-color:var(--ok)}
.chain .step .k{font-size:11.5px;font-weight:700;text-transform:uppercase;letter-spacing:.4px;color:var(--muted)}
.chain .step .v{font-size:14.5px;font-weight:600;margin-top:3px}
.chain .step:not(.on) .v{color:#9fb0bd;font-weight:400}
.chain .arrow{align-self:center;color:#c3ccd4;font-size:19px;padding:0 2px}
.chain .arrow.on{color:var(--ok)}
@media (max-width:640px){
  .chain{flex-direction:column;gap:6px}
  .chain .arrow{display:none}
  .chain .step{min-width:0}
}

/* star ratings */
.rate{letter-spacing:2px;color:#c78b00;white-space:nowrap}
.rate.big{font-size:21px}

/* access-rights matrix */
table.rights th.c,table.rights td.c{text-align:center;width:13%}
table.rights input[type=checkbox]{width:19px;height:19px;accent-color:var(--soon);cursor:pointer}
table.rights td{vertical-align:middle}
@media (max-width:640px){
  table.rights th.c,table.rights td.c{width:auto}
  table.rights{font-size:13px}
}

/* ============================================================ *
 * POLISH (v5) — the same teal-and-white look, made calmer.
 * Quieter header and menu, one type scale, hairline cards,
 * clearer tables, visible keyboard focus.
 * ============================================================ */
:root{
  --teal:#0f9f94; --teal-d:#0b7d74; --ink:#14232f; --muted:#64768a;
  --line:#e1e7ed; --bg:#f3f5f8; --r:12px;
  --sh:0 1px 2px rgba(20,35,47,.04),0 1px 3px rgba(20,35,47,.05);
  --sh-up:0 4px 14px rgba(20,35,47,.09);
}
body{font-size:14.5px;line-height:1.55;letter-spacing:.005em;font-feature-settings:"tnum" 1}
::selection{background:#b8ebe6}
:focus-visible{outline:2px solid var(--teal);outline-offset:2px;border-radius:4px}
a{color:#0f62a8}

/* ---- top bar ---- */
.topbar{padding:11px 22px;gap:16px;box-shadow:0 1px 0 rgba(0,0,0,.08)}
.topbar .brand{font-size:16px;font-weight:700;letter-spacing:.9px}
.topbar .who{background:rgba(255,255,255,.16);font-size:12.5px;padding:5px 12px}
.topbar .bell{font-size:17px}

/* ---- menu: words only, one line, the rest under "More" ---- */
nav.mods{top:51px;border-bottom:1px solid var(--line);overflow:visible}
nav.mods ul{gap:0;padding:0 14px;max-width:1280px;margin:0 auto;min-width:0;flex-wrap:nowrap}
nav.mods a{flex-direction:row;padding:13px 13px 11px;font-size:13.5px;font-weight:500;color:#4b5b6b;
  border-bottom:2px solid transparent;letter-spacing:.01em}
nav.mods a.on{color:var(--teal-d);border-bottom-color:var(--teal);font-weight:600}
nav.mods a:hover{background:transparent;color:var(--ink);text-decoration:none}
nav.mods li.more{position:relative;margin-left:auto}
nav.mods li.more summary{list-style:none;cursor:pointer;padding:13px 13px 11px;font-size:13.5px;font-weight:500;
  color:#4b5b6b;border-bottom:2px solid transparent;user-select:none}
nav.mods li.more summary::-webkit-details-marker{display:none}
nav.mods li.more summary::after{content:"▾";margin-left:6px;font-size:10px;opacity:.7}
nav.mods li.more details.has-on summary{color:var(--teal-d);border-bottom-color:var(--teal);font-weight:600}
nav.mods li.more details[open] summary{color:var(--ink)}
nav.mods .menu{position:absolute;right:0;top:100%;min-width:210px;background:#fff;border:1px solid var(--line);
  border-radius:12px;box-shadow:var(--sh-up);padding:6px;display:grid;z-index:60}
nav.mods .menu a{padding:9px 12px;border-radius:8px;border:0;font-size:13.5px}
nav.mods .menu a:hover{background:#f1f5f8}
nav.mods .menu a.on{background:#e6f6f4;color:var(--teal-d)}
nav.mods li.only-sm{display:none}
@media(max-width:1000px){
  nav.mods{overflow-x:auto;-webkit-overflow-scrolling:touch}
  nav.mods ul{min-width:max-content;padding:0 8px}
  nav.mods li.more{display:none}
  nav.mods li.only-sm{display:block}
  nav.mods a{padding:12px 11px 10px}
}

/* ---- page ---- */
.wrap{max-width:1240px;padding:26px 22px 30px}
h1.page{font-size:24px;font-weight:700;color:var(--ink);letter-spacing:-.01em;margin:0 0 3px}
.sub{font-size:13.5px;margin:0 0 20px;max-width:70ch}
.pagehead{display:flex;gap:14px;align-items:flex-start;justify-content:space-between;flex-wrap:wrap;margin-bottom:2px}
.pagehead .sub{margin-bottom:18px}
.btnrow{display:flex;gap:8px;flex-wrap:wrap}
.crumb{font-size:12.5px;margin:0 0 6px;color:var(--muted)}

/* ---- cards ---- */
.card{border:1px solid var(--line);box-shadow:var(--sh);border-radius:var(--r);margin-bottom:20px}
.card > h2{padding:14px 18px;font-size:14.5px;font-weight:650;letter-spacing:.005em;color:var(--ink);border-bottom:1px solid var(--line)}
.card .body{padding:18px}

/* ---- tables ---- */
table.grid{font-size:13.5px}
table.grid th{background:transparent;color:var(--muted);font-size:11.5px;text-transform:uppercase;letter-spacing:.06em;
  font-weight:600;padding:11px 16px;border-bottom:1px solid var(--line)}
table.grid td{padding:12px 16px;border-bottom:1px solid #edf1f5}
table.grid tr:hover td{background:#f8fbfc}

/* ---- buttons and fields ---- */
.btn{border-radius:9px;font-size:13.5px;padding:9px 15px;font-weight:600;letter-spacing:.005em}
.btn.sm{padding:6px 11px;font-size:12.5px}
.btn.grey{background:#e9eef3;color:#33414e}
.btn.grey:hover{background:#dfe6ed;filter:none}
label{font-size:12px;letter-spacing:.02em;color:#4b5b6b}
input[type=text],input[type=email],input[type=password],input[type=date],input[type=number],select,textarea{
  border-color:#cdd6de;border-radius:9px;font-size:14px;padding:9px 11px}
input:focus,select:focus,textarea:focus{border-color:var(--teal);box-shadow:0 0 0 3px rgba(15,159,148,.15)}

/* ---- the glance panel ---- */
.glance{gap:14px;margin-bottom:22px;grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}
.gl{border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--sh);padding:16px 18px 14px;transition:box-shadow .15s,border-color .15s,transform .15s}
.gl:hover{transform:none;box-shadow:var(--sh-up);border-color:#cfd9e2}
.gl.on{border-color:var(--teal);background:#f4fbfa;box-shadow:0 0 0 1px var(--teal)}
.gl .cap{font-size:11.5px;letter-spacing:.07em}
.gl .big{font-size:30px;font-weight:700;letter-spacing:-.01em;margin:8px 0 2px}
.gl .note{font-size:12.5px}
@media(max-width:640px){.gl .big{font-size:25px}.glance{gap:10px}}

/* ---- small things ---- */
.pill{font-size:11.5px;padding:2px 10px;letter-spacing:.01em}
.flash{border-radius:10px}
.empty{padding:38px 18px}
p.small.muted{line-height:1.5}

/* ---- projects ---- */
.bar{height:7px;background:#e6ecf1;border-radius:99px;overflow:hidden}
.bar i{display:block;height:100%;background:var(--teal);border-radius:99px;min-width:0}
.bar.big{height:9px}
.progress-line{margin:2px 0 20px}.progress-line .small{margin-top:6px}
.seg{padding:5px 12px;border-radius:99px;font-size:13px;font-weight:500;color:var(--muted)}
.seg:hover{text-decoration:none;color:var(--ink);background:#eef2f6}
.seg.on{background:var(--ink);color:#fff}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{display:inline-flex;align-items:center;gap:7px;border:1px solid #cdd6de;border-radius:99px;padding:6px 13px;
  font-size:13px;font-weight:500;color:var(--ink);margin:0;cursor:pointer;background:#fff}
.chip input{margin:0}
.chip:has(input:checked){background:#e6f6f4;border-color:var(--teal)}
.stage{display:flex;align-items:center;gap:12px;padding:10px 18px;border-bottom:1px solid #edf1f5}
.stage .nm{flex:1;min-width:0}
.stage.done .nm{color:var(--muted)}
.tick{width:24px;height:24px;border-radius:7px;border:1.6px solid #b9c5d0;background:#fff;display:grid;place-items:center;
  font-size:14px;line-height:1;color:#fff;padding:0;cursor:pointer;flex:none}
button.tick:hover{border-color:var(--teal)}
.stage.done .tick{background:var(--teal);border-color:var(--teal)}
.stage .x,.rowdel,.x{border:0;background:transparent;color:#a3b0bc;font-size:19px;line-height:1;cursor:pointer;padding:2px 6px;border-radius:6px}
.x:hover{color:var(--bad);background:#fdeceb}
.stage-add{display:flex;gap:8px;padding:12px 18px}
.statebar{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:18px;padding-top:14px;border-top:1px solid var(--line)}
.xscroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
table.sheet-ed{table-layout:fixed}
table.sheet-ed th{white-space:normal}
table.sheet-ed td{padding:6px 6px;vertical-align:top}
table.sheet-ed td.c,table.sheet-ed th.c{text-align:center}
table.sheet-ed textarea{font-family:inherit;min-height:0;height:56px;padding:7px 8px;font-size:13px;line-height:1.35;resize:vertical}
table.sheet-ed select{padding:7px 4px;font-size:13px}
table.sheet-ed td.rn{padding-top:14px}
table.sheet-ed td.calc{font-size:12.5px;font-weight:600;padding-top:14px;white-space:nowrap}
.rk-low{background:#e1f4e6;color:#1b6b3f}.rk-med{background:#fff1c9;color:#7d5a00}
.rk-high{background:#fcdcc4;color:#9a4a0c}.rk-ext{background:#f6bdb8;color:#8f241b}
details.paste{border-top:1px solid var(--line);padding:12px 18px}
details.paste summary{cursor:pointer;font-weight:600;font-size:13.5px;color:var(--teal-d)}
.uprow{display:flex;gap:10px;flex-wrap:wrap;align-items:flex-end}

/* ---- print: the report pages style themselves; chrome never prints ---- */
@media print{.topbar,nav.mods,.noprint{display:none!important}}

@media(max-width:640px){
  .topbar{padding:10px 14px;gap:10px}
  .topbar .brand{font-size:13.5px;white-space:nowrap;letter-spacing:.6px}
  .topbar .who{display:none}
  nav.mods{top:46px}
  .wrap{padding:16px 14px 24px}
  h1.page{font-size:21px}
  .pagehead .btnrow{width:100%}
}

/* ============================================================ *
 * THEME v6: deep-navy bar + white + teal, Times New Roman only.
 * ============================================================ */
:root{
  --navy:#16244a; --navy-2:#22356a; --teal:#0b8a83; --teal-d:#076e68;
  --ink:#16213a; --muted:#5e6a80; --line:#dfe4ec; --bg:#f4f6f9; --card:#fff;
  --purple:#22356a; --soon:#2c5aa8; --r:8px;
  --sh:0 1px 2px rgba(22,36,74,.05); --sh-up:0 6px 18px rgba(22,36,74,.12);
}
html,body,body *{font-family:"Times New Roman",Times,serif!important}
body{font-size:15.5px;line-height:1.5;letter-spacing:0}
::selection{background:#c7ebe8}
a{color:var(--navy-2)}

.topbar{background:var(--navy);box-shadow:none;border-bottom:3px solid var(--teal)}
.topbar .brand{font-size:18px;font-weight:700;letter-spacing:1.2px}
.topbar .who{background:rgba(255,255,255,.12)}
nav.mods{top:54px;background:#fff}
nav.mods a,nav.mods li.more summary{font-size:15px;color:#3d4a62}
nav.mods a.on,nav.mods li.more details.has-on summary{color:var(--navy);border-bottom-color:var(--teal);font-weight:700}
nav.mods .menu a.on{background:#e5f4f3;color:var(--teal-d)}

h1.page{font-size:27px;color:var(--navy);font-weight:700}
.sub,.crumb{font-size:14.5px}
.card{border:1px solid var(--line);box-shadow:var(--sh)}
.card > h2{font-size:17px;color:var(--navy);font-weight:700}
.tile{border:1px solid var(--line);box-shadow:var(--sh)}
.tile .n{font-size:28px;color:var(--navy)}
.tile .l{font-size:13.5px}
.i-teal{background:var(--teal)} .i-purple{background:var(--navy-2)}

table.grid th{background:#f1f4f8;color:var(--navy);font-size:13px;font-weight:700;letter-spacing:.04em}
table.grid td{font-size:15px}

.btn{background:var(--teal);border-radius:6px;font-size:14.5px;font-weight:700}
.btn.purple{background:var(--navy-2)}
.btn.teal{background:var(--teal)}
input[type=text],input[type=email],input[type=password],input[type=date],input[type=number],select,textarea{font-size:15px;border-radius:6px}
input:focus,select:focus,textarea:focus{border-color:var(--teal);box-shadow:0 0 0 3px rgba(11,138,131,.16)}
:focus-visible{outline-color:var(--teal)}
.pill{font-size:12.5px}
@media(max-width:640px){nav.mods{top:49px}.topbar .brand{font-size:15px}}

/* ---- v6.1: more navy ---- */
:root{--navy:#14224a;--navy-2:#1f3266}
.topbar{border-bottom:0}
nav.mods{background:var(--navy-2);border-bottom:3px solid var(--teal)}
nav.mods a,nav.mods li.more summary{color:#c9d3ea}
nav.mods a:hover,nav.mods li.more details[open] summary{color:#fff}
nav.mods a.on,nav.mods li.more details.has-on summary{color:#fff;border-bottom-color:#2fc0b6;background:rgba(255,255,255,.07)}
nav.mods .menu a{color:#3d4a62}
nav.mods .menu a:hover{color:var(--navy)}
.card > h2{background:#eef1f8;border-bottom-color:#d9dfec}
table.grid th{background:var(--navy);color:#fff;border-bottom-color:var(--navy)}
.btn{background:var(--navy-2)}
.btn.teal{background:var(--teal)}
.tile{border-top:3px solid var(--navy-2)}
.gl{border-top:3px solid var(--navy-2)}
.gl .big{color:var(--navy)}
nav.mods{top:51px}
@media(max-width:640px){nav.mods{top:46px}}

/* ============================================================ *
 * THEME v8: industrial identity — hazard band, blueprint grid,
 * gauge mark, drawing-style title block. Navy, teal, safety amber.
 * ============================================================ */
:root{--amber:#f2b632;--grid:rgba(31,50,102,.045)}
body{background-color:var(--bg);
  background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px);
  background-size:28px 28px;background-attachment:fixed}
.topbar{position:sticky;padding-top:14px}
.topbar::before{content:"";position:absolute;left:0;right:0;top:0;height:4px;
  background:repeating-linear-gradient(-45deg,var(--amber) 0 10px,var(--navy) 10px 20px)}
.topbar .brand{display:flex;align-items:center;gap:10px;color:#fff;text-decoration:none;line-height:1.1}
.topbar .brand:hover{text-decoration:none}
.topbar .brand .mark{color:#fff;flex:none}
.topbar .brand small{display:block;font-size:11.5px;letter-spacing:1.6px;font-weight:400;color:#9fb1dc;margin-top:3px;text-transform:uppercase}
nav.mods{top:57px}

/* page title with a drawing dimension line under it */
h1.page{position:relative;padding-bottom:10px;margin-bottom:8px}
h1.page::after{content:"";position:absolute;left:0;bottom:0;width:78px;height:7px;
  background:linear-gradient(var(--teal),var(--teal)) center/100% 1.5px no-repeat,
             linear-gradient(var(--teal),var(--teal)) left/1.5px 100% no-repeat,
             linear-gradient(var(--teal),var(--teal)) right/1.5px 100% no-repeat}

/* dashboard cards: registration corners like a marked-up drawing */
.gl{position:relative}
.gl::after{content:"";position:absolute;left:7px;bottom:7px;width:10px;height:10px;
  border-left:1.5px solid var(--teal);border-bottom:1.5px solid var(--teal);opacity:.55;pointer-events:none}
.card > h2{border-left:4px solid var(--navy-2)}

/* progress bars read like a gauge scale */
.bar{background-image:repeating-linear-gradient(90deg,transparent 0 calc(10% - 1px),rgba(20,34,74,.18) calc(10% - 1px) 10%)}

/* footer: an engineering drawing title block */
.titleblock{max-width:1240px;margin:8px auto 28px;display:grid;
  grid-template-columns:minmax(0,1.1fr) minmax(0,2.2fr) minmax(0,1fr) minmax(0,.7fr);
  border:1.5px solid var(--navy);background:#fff;font-size:13px;color:var(--ink)}
.titleblock > div{padding:8px 12px;border-right:1px solid var(--navy);min-width:0}
.titleblock > div:nth-child(4){border-right:0}
.titleblock .tb-firm{display:flex;align-items:center;gap:8px;flex-wrap:wrap;color:var(--navy)}
.titleblock .tb-firm span{font-size:12px;color:var(--muted)}
.titleblock .tb-cred{font-size:12.5px;color:#34405a}
.titleblock .tb-cell span{display:block;font-size:10.5px;text-transform:uppercase;letter-spacing:1.2px;color:var(--muted)}
.titleblock .tb-cell b{font-size:13.5px;overflow-wrap:anywhere}
.titleblock .tb-note{grid-column:1/-1;border-top:1px solid var(--navy);border-right:0;font-size:12px;color:var(--muted);text-align:center;padding:5px}
@media(max-width:900px){.titleblock{grid-template-columns:1fr 1fr;margin-left:14px;margin-right:14px}
  .titleblock > div:nth-child(2){grid-column:1/-1;order:5;border-right:0;border-top:1px solid var(--navy)}
  .titleblock > div:nth-child(2n){border-right:0}}
@media(max-width:640px){.topbar .brand small{display:none} nav.mods{top:50px} .topbar .brand{font-size:14px}}
@media print{body{background:none}.titleblock,.topbar::before{display:none!important}}

/* sign-in: blueprint sheet */
body.signin{background-color:var(--navy);
  background-image:linear-gradient(rgba(255,255,255,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.06) 1px,transparent 1px),
                   linear-gradient(rgba(255,255,255,.03) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.03) 1px,transparent 1px);
  background-size:140px 140px,140px 140px,28px 28px,28px 28px}
body.signin .card{border:0;box-shadow:0 18px 50px rgba(0,0,0,.35);position:relative;overflow:hidden}
body.signin .card::before{content:"";display:block;height:6px;
  background:repeating-linear-gradient(-45deg,var(--amber) 0 10px,var(--navy) 10px 20px)}
.signin-cred{color:#b9c6e6;font-size:12.5px;text-align:center;margin-top:16px;max-width:400px;line-height:1.6;letter-spacing:.3px}
/* logo disc */
.mark{display:inline-grid;place-items:center;background:#fff;border-radius:50%;flex:none;overflow:hidden}
.mark img{display:block;object-fit:contain}
.titleblock .mark{border:1px solid var(--line)}

/* ============================================================ *
 * THEME v10: light — white and blue. No green/teal anywhere.
 * ============================================================ */
:root{
  --blue:#1f5fbf; --blue-d:#174a96; --blue-l:#eaf1fc; --blue-ll:#f5f8fe;
  --teal:#1f5fbf; --teal-d:#174a96; --navy:#173a75; --navy-2:#1f5fbf;
  --ink:#1a2740; --muted:#5f6c84; --line:#dde5f0; --bg:#f7f9fc; --grid:rgba(31,95,191,.035);
}
.topbar{background:#fff;color:var(--navy);border-bottom:1px solid var(--line);box-shadow:0 1px 3px rgba(23,58,117,.06)}
.topbar::before{height:3px;background:linear-gradient(90deg,var(--blue),#5b9bf0)}
.topbar .brand,.topbar .brand .mark{color:var(--navy)}
.topbar .brand small{color:var(--muted)}
.topbar .mark{border:1px solid var(--line)}
.topbar .who{background:var(--blue-l);color:var(--navy)}
.topbar a.bell,.topbar a.bell-l,.topbar .signout{color:var(--navy)!important;font-size:13.5px}
nav.mods{background:#fff;border-bottom:2px solid var(--blue-l)}
nav.mods a,nav.mods li.more summary{color:#3a4762}
nav.mods a:hover,nav.mods li.more details[open] summary{color:var(--blue);background:var(--blue-ll)}
nav.mods a.on,nav.mods li.more details.has-on summary{color:var(--blue);background:var(--blue-ll);border-bottom-color:var(--blue)}
nav.mods .menu a.on{background:var(--blue-l);color:var(--blue-d)}
h1.page{color:var(--navy)}
.card > h2{background:var(--blue-ll);border-left-color:var(--blue);color:var(--navy)}
table.grid th{background:var(--blue-l);color:var(--navy);border-bottom:1px solid #cbdaf1}
.tile,.gl{border-top-color:var(--blue)}
.gl .big,.tile .n{color:var(--navy)}
.btn,.btn.teal,.btn.purple{background:var(--blue)}
.btn:hover{background:var(--blue-d);filter:none}
.btn.grey{background:#edf1f7;color:#2f3c55}
.btn.grey:hover{background:#e2e8f2}
::selection{background:#cfe0fa}
input:focus,select:focus,textarea:focus{border-color:var(--blue);box-shadow:0 0 0 3px rgba(31,95,191,.15)}
:focus-visible{outline-color:var(--blue)}
.titleblock{border-color:#b9c9e4}
.titleblock > div{border-color:#b9c9e4}
.titleblock .tb-note{border-top-color:#b9c9e4}
body.signin{background-color:#eef3fb;
  background-image:linear-gradient(rgba(31,95,191,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(31,95,191,.08) 1px,transparent 1px),
                   linear-gradient(rgba(31,95,191,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(31,95,191,.04) 1px,transparent 1px)}
body.signin .card{box-shadow:0 12px 40px rgba(23,58,117,.15)}
body.signin .card::before{height:4px;background:linear-gradient(90deg,var(--blue),#5b9bf0)}
.signin-cred{color:var(--muted)}
@media(max-width:640px){nav.mods{top:47px}}
.btn.green{background:#174a96}.btn.blue{background:#2f6fd0}

/* ============================================================ *
 * THEME v11: P&C Analyticals palette — deep navy + orange.
 * ============================================================ */
:root{--blue:#13304e;--blue-d:#0c1e32;--blue-l:#eef1f6;--blue-ll:#f6f7f9;
  --teal:#df7a1e;--teal-d:#c2661a;--navy:#13304e;--navy-2:#13304e;--org:#df7a1e;--org-d:#c2661a;
  --ink:#1d2a40;--muted:#5f6878;--line:#e2e5ea;--bg:#f6f7f9;--grid:rgba(21,41,74,.035)}
.topbar{background:#13304e;color:#fff;border-bottom:3px solid var(--org)}
.topbar::before{display:none}
.topbar .brand,.topbar .brand .mark{color:#fff}
.topbar .brand small{color:#c5cdda}
.topbar .mark{border:0}
.topbar .who{background:rgba(255,255,255,.12);color:#fff}
.topbar a.bell,.topbar .signout{color:#fff!important}
nav.mods{background:#fff;border-bottom:1px solid var(--line)}
nav.mods a,nav.mods li.more summary{color:#3a4558}
nav.mods a:hover,nav.mods li.more details[open] summary{color:var(--org);background:transparent}
nav.mods a.on,nav.mods li.more details.has-on summary{color:var(--org);background:transparent;border-bottom-color:var(--org)}
nav.mods .menu a.on{background:#fbf0e6;color:var(--org-d)}
h1.page{color:#13304e}
h1.page::after{background:linear-gradient(var(--org),var(--org)) center/100% 1.5px no-repeat,linear-gradient(var(--org),var(--org)) left/1.5px 100% no-repeat,linear-gradient(var(--org),var(--org)) right/1.5px 100% no-repeat}
.card > h2{background:#f6f7f9;border-left-color:var(--org);color:#13304e}
table.grid th{background:#13304e;color:#fff;border-bottom-color:#13304e}
.tile,.gl{border-top-color:var(--org)}
.gl .big,.tile .n{color:#13304e}
.gl::after{border-color:var(--org)}
.btn,.btn.teal,.btn.purple,.btn.green{background:var(--org)}
.btn:hover{background:var(--org-d)}
.btn.blue{background:#13304e}
.btn.grey{background:#edf0f4;color:#2c3648}
.btn.grey:hover{background:#e1e6ed}
.bar i{background:var(--org)}
::selection{background:#f6d9bd}
input:focus,select:focus,textarea:focus{border-color:var(--org);box-shadow:0 0 0 3px rgba(223,122,30,.15)}
:focus-visible{outline-color:var(--org)}
.titleblock,.titleblock > div,.titleblock .tb-note{border-color:#13304e}
body.signin{background-color:#13304e;
  background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px)}
body.signin .card::before{height:4px;background:var(--org)}
.signin-cred{color:#c5cdda}
@media(max-width:640px){nav.mods{top:49px}}
/* v11.1: P&C site match — off-white canvas, rounded cards, navy gradient bar */
:root{--bg:#f4f3ee;--grid:rgba(19,48,78,.03)}
.topbar{background:linear-gradient(180deg,#13304e,#112641)}
.card,.gl,.tile{border-radius:14px}
.card > h2{border-radius:14px 14px 0 0;background:#fbfaf7}
.btn{border-radius:9px}
.titleblock{border-radius:10px;overflow:hidden}

/* v12 — phone: show that the menu bar scrolls sideways */
@media (max-width:900px){
  nav.mods{-webkit-mask-image:linear-gradient(90deg,#000 82%,transparent);mask-image:linear-gradient(90deg,#000 82%,transparent);scroll-behavior:smooth}
  nav.mods.atend{-webkit-mask-image:none;mask-image:none}
}

/* v12 — phone: item tables you type into become one card per line */
@media (max-width:700px){
  table.mlines{min-width:0!important;width:100%!important}
  table.mlines thead{display:none}
  table.mlines tbody tr{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 10px;padding:12px 2px;border-bottom:1px solid var(--line,#dcdcd3)}
  table.mlines tbody td{display:block;border:0!important;padding:0!important;min-width:0;width:auto!important;background:transparent!important}
  table.mlines tbody td[data-label]::before{content:attr(data-label);display:block;font-size:11px;letter-spacing:.6px;text-transform:uppercase;color:#5d6876;margin-bottom:3px}
  table.mlines tbody td.mwide{grid-column:1/-1}
  table.mlines tbody td input,table.mlines tbody td select,table.mlines tbody td textarea{width:100%!important;min-width:0}
}

/* Update 84: department menu */
nav.mods li.more.dept{margin-left:0}
nav.mods li.more.dept .menu{right:auto;left:0}
nav.mods li.more.dept:last-of-type .menu{right:0;left:auto}
nav.mods li.deptlabel{display:none}
@media(max-width:900px){nav.mods li.deptlabel{display:block;align-self:center;padding:0 6px 0 14px;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#8fa0b8;white-space:nowrap}}