/* =====================================================================================================
   HCAB / shop app design system (v2, Nov 2 2026 redesign)
   Brand values are NOT set here: /tenant/brand.css (from tenants/<id>/config/brand.yaml) defines
   --navy --slate --white --tint and --font. The neutral fallbacks below only apply if that file is missing.
   Every other color is derived from those four with color-mix(), so a tenant's palette carries through.
   ===================================================================================================== */
:root{
  --navy:#2b2b2b; --slate:#9a9a9a; --white:#ffffff; --tint:#f1f1f1;
  --font:-apple-system,BlinkMacSystemFont,"SF Pro Text","SF Pro Display",Inter,system-ui,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --mono:ui-monospace,"SF Mono",SFMono-Regular,Menlo,Consolas,monospace;

  /* surfaces */
  --bg:color-mix(in srgb,var(--tint) 55%,var(--white));          /* page */
  --surface:var(--white);                                           /* cards */
  --fill:var(--tint);                                               /* zebra, chips, wells */
  --fill-2:color-mix(in srgb,var(--slate) 24%,var(--white));        /* hover */
  --line:color-mix(in srgb,var(--slate) 42%,var(--white));          /* hairline */
  --line-2:color-mix(in srgb,var(--slate) 75%,var(--white));        /* inputs */
  /* text (AA on white and tint) */
  --text:var(--navy);
  --text-2:color-mix(in srgb,var(--navy) 74%,var(--white));
  --text-3:color-mix(in srgb,var(--navy) 66%,var(--white));         /* white surfaces only */
  /* accent */
  --accent:var(--navy);
  --accent-hover:color-mix(in srgb,var(--navy) 86%,var(--white));
  --on-accent:var(--white);
  /* top bar (frosted) */
  --bar:color-mix(in srgb,var(--navy) 86%,transparent);
  --bar-text:var(--white);
  --bar-text-2:color-mix(in srgb,var(--white) 80%,var(--navy));
  --bar-fill:color-mix(in srgb,var(--white) 12%,transparent);
  --bar-line:color-mix(in srgb,var(--white) 12%,transparent);
  /* shape + depth */
  --r-xs:6px; --r-s:8px; --r:12px; --r-l:16px; --pill:999px;
  --sh-1:0 1px 2px color-mix(in srgb,var(--navy) 6%,transparent),0 1px 1px color-mix(in srgb,var(--navy) 3%,transparent);
  --sh-2:0 2px 6px color-mix(in srgb,var(--navy) 6%,transparent),0 10px 28px color-mix(in srgb,var(--navy) 8%,transparent);
  --sh-3:0 4px 12px color-mix(in srgb,var(--navy) 8%,transparent),0 24px 56px color-mix(in srgb,var(--navy) 18%,transparent);
  --focus:0 0 0 3px color-mix(in srgb,var(--navy) 26%,transparent);
  --focus-dark:0 0 0 3px color-mix(in srgb,var(--white) 45%,transparent);
  /* motion */
  --ease:cubic-bezier(.22,.8,.25,1); --t:200ms; --t-fast:150ms;
  /* status (existing semantic colors, unchanged in meaning) */
  --warn-bg:#fff6e5; --warn-line:#e2bf73; --warn-text:#6b4a00;
  --ok-bg:#e9f3ec; --ok-line:#9cc4a8; --ok-text:#1f5a32;
  --bad-bg:#fbecec; --bad-line:#dcaaaa; --bad-text:#7a1c1c;
  --navh:0px;
}
@view-transition{navigation:auto}
@media (prefers-reduced-motion:no-preference){
  html{scroll-behavior:smooth}
  ::view-transition-old(root),::view-transition-new(root){animation-duration:180ms;animation-timing-function:var(--ease)}
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;font-family:var(--font);background:var(--bg);color:var(--text);font-size:15px;line-height:1.47;letter-spacing:-.005em;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}
h1,h2,h3{font-weight:600;letter-spacing:-.015em;line-height:1.2;color:var(--text)}
h3{font-size:15px;margin:18px 0 8px}
a{color:var(--accent);text-decoration-thickness:1px;text-underline-offset:2px;transition:color var(--t-fast) var(--ease)}
a:hover{color:var(--accent-hover)}
code{font-family:var(--mono);font-size:.92em}
::selection{background:color-mix(in srgb,var(--slate) 45%,transparent)}
:focus{outline:none}
:focus-visible{outline:none;box-shadow:var(--focus);border-radius:var(--r-xs)}
[hidden]{display:none!important}
.spacer{flex:1}
.muted{color:var(--text-2);font-size:13px}
.cite{font-size:12px;color:var(--text-2)}
.none{color:var(--text-2);font-style:italic}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* thin, calm scrollbars */
*{scrollbar-width:thin;scrollbar-color:color-mix(in srgb,var(--slate) 70%,transparent) transparent}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-thumb{background:color-mix(in srgb,var(--slate) 70%,transparent);border-radius:10px;border:2px solid transparent;background-clip:padding-box}
::-webkit-scrollbar-track{background:transparent}

/* ---------------- controls ---------------- */
.btn,button.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;background:var(--accent);color:var(--on-accent);border:1px solid transparent;
  border-radius:var(--pill);padding:8px 18px;font:500 14px/1.2 var(--font);letter-spacing:-.005em;cursor:pointer;white-space:nowrap;
  transition:background-color var(--t-fast) var(--ease),box-shadow var(--t-fast) var(--ease),transform var(--t-fast) var(--ease),opacity var(--t-fast)}
.btn:hover{background:var(--accent-hover)}
.btn:active{transform:scale(.97)}
.btn:focus-visible{box-shadow:var(--focus);border-radius:var(--pill)}
.btn.sec,.btn.ghost{background:var(--surface);color:var(--text);border-color:var(--line-2)}
.btn.sec:hover,.btn.ghost:hover{background:var(--fill)}
.btn.small,.btn.sm{padding:5px 12px;font-size:13px}
.btn:disabled{opacity:.38;cursor:not-allowed;transform:none}
label{display:block;font-size:13px;font-weight:500;color:var(--text-2);margin:14px 0 6px}
input[type=text],input[type=password],input[type=search],input:not([type]),select,textarea{
  font:inherit;font-size:15px;color:var(--text);background:var(--surface);border:1px solid var(--line-2);border-radius:10px;
  padding:9px 12px;transition:border-color var(--t-fast) var(--ease),box-shadow var(--t-fast) var(--ease),background-color var(--t-fast)}
input[type=text],input[type=password]{width:100%}
input:focus,select:focus,textarea:focus{border-color:var(--accent);box-shadow:var(--focus)}
input::placeholder,textarea::placeholder{color:var(--text-3)}
select{padding-right:30px;appearance:none;-webkit-appearance:none;cursor:pointer;
  background:var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23808a8f' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 12px center}
input[type=checkbox]{accent-color:var(--accent)}
.err{background:var(--bad-bg);color:var(--bad-text);padding:10px 12px;border-radius:10px;font-size:14px;margin-bottom:10px}
.pill,.st,.role{display:inline-flex;align-items:center;border-radius:var(--pill);padding:1px 9px;font-size:12px;font-weight:500;line-height:1.6;
  background:var(--fill);color:var(--text);border:0;white-space:nowrap}
.pill.warn,.st.pending_owner{background:var(--warn-bg);color:var(--warn-text)}
.pill.ok{background:var(--ok-bg);color:var(--ok-text)}.pill.bad{background:var(--bad-bg);color:var(--bad-text)}
.offline{background:var(--warn-bg);color:var(--warn-text);padding:8px 10px;border-radius:10px;font-size:14px;margin:4px 0 8px}
.st.approved{background:var(--ok-bg);color:var(--ok-text)}
.st.rejected{background:var(--bad-bg);color:var(--bad-text)}
.soonpill{display:inline-flex;font-size:11px;font-weight:600;letter-spacing:.02em;background:var(--warn-bg);color:var(--warn-text);border-radius:var(--pill);padding:0 8px}
.soonbox{background:var(--warn-bg);border-radius:var(--r);padding:14px 16px;margin:12px 0;color:var(--warn-text)}

/* ---------------- skeletons (loading) ---------------- */
.skel{display:block;padding:2px 0}
.skel i{display:block;height:14px;margin:12px 0;border-radius:7px;width:100%;
  background:linear-gradient(90deg,var(--fill) 0%,color-mix(in srgb,var(--fill) 35%,var(--white)) 45%,var(--fill) 90%);background-size:220% 100%;
  animation:shimmer 1.3s ease-in-out infinite}
.skel i:nth-child(2){width:82%} .skel i:nth-child(3){width:64%}
.skel.cards i{height:76px;border-radius:var(--r-l);width:100%;margin:0 0 10px}
.skel.cards i:nth-child(2){opacity:.75} .skel.cards i:nth-child(3){opacity:.5}
.skel.rows{padding:12px 20px}.skel.rows i{height:26px;border-radius:6px;margin:6px 0;width:100%}
@keyframes shimmer{0%{background-position:120% 0}100%{background-position:-120% 0}}
@keyframes rise{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
@keyframes fade{from{opacity:0}to{opacity:1}}
@keyframes pop{from{opacity:0;transform:translateY(6px) scale(.985)}to{opacity:1;transform:none}}

/* ---------------- login ---------------- */
body.login{min-height:100vh;display:flex;align-items:center;justify-content:center;
  background:radial-gradient(1200px 600px at 50% -10%,var(--white),var(--bg) 60%)}
.login-wrap{width:100%;max-width:400px;padding:48px 20px;display:flex;flex-direction:column;align-items:center;animation:pop .35s var(--ease) both}
.login-brand{display:flex;flex-direction:column;align-items:center;text-align:center;margin-bottom:26px}
.login-brand .mark{width:64px;height:64px;border-radius:16px;background:var(--navy);display:grid;place-items:center;box-shadow:var(--sh-2);margin-bottom:16px}
.login-brand .mark img{width:46px;height:46px}
.login-brand .title{font-size:28px;font-weight:600;letter-spacing:.02em}
.login-brand .sub{font-size:14px;color:var(--text-2);margin-top:2px}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-l);box-shadow:var(--sh-2);padding:28px;width:100%}
.login .card h1{font-size:21px;margin:0 0 4px}
.login .card p{margin:0 0 8px;color:var(--text-2);font-size:14px}
.login .card input{height:44px}
.login .card .btn{width:100%;margin-top:22px;height:44px;font-size:15px}

/* ---------------- app shell ---------------- */
/* Fixed-height pages (Chat, Internal Communication, sheet copies) keep their own scroll panes.
   Document pages (Home, Jobs, Rules, Data, placeholders) scroll the whole window so content glides
   under the frosted top bar and the sticky page bar. */
body.app{display:flex;flex-direction:column;height:100vh;height:100dvh;overflow:hidden}
body.app > main, body.app > .scroll{flex:1;overflow-y:auto;min-height:0}
body.app:has(> .scroll, > main.jobpage, > main.page){display:block;height:auto;min-height:100vh;overflow:visible}
body.app:has(> .scroll, > main.jobpage, > main.page) > main,
body.app:has(> .scroll, > main.jobpage, > main.page) > .scroll{overflow:visible}
body.app:has(> .scroll, > main.jobpage, > main.page) .pagebar{position:sticky;top:var(--navh);z-index:30}

header.topnav,#topnav{display:block;position:sticky;top:0;z-index:50;flex:none;min-height:52px;padding:0;color:var(--bar-text);
  background:var(--bar);-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px);
  border-bottom:1px solid var(--bar-line)}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){header.topnav,#topnav{background:var(--navy)}}
.topnav :focus-visible{box-shadow:var(--focus-dark)}

/* top bar: menu button, brand, current page, search, account (pages live in the slide-out menu) */
.navrow{display:flex;align-items:center;gap:6px;height:52px;padding:0 16px;flex-wrap:nowrap}
.navrow .brand{display:flex;align-items:center;gap:8px;margin:0 2px;flex:none;text-decoration:none;color:var(--bar-text);border-radius:8px}
.navrow .brand img{height:28px;width:28px}
.brand .product{color:inherit;font-weight:600;font-size:15px;letter-spacing:.06em;margin:0}
.navrow .crumb{font-size:15px;font-weight:500;color:var(--bar-text-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;
  padding-left:12px;margin-left:6px;border-left:1px solid var(--bar-line);line-height:20px}
.navrow .spacer{flex:1;min-width:10px}
.navrow form{margin:0;display:flex}
.iconbtn{display:inline-grid;place-items:center;width:36px;height:36px;flex:none;border:0;border-radius:10px;background:transparent;color:var(--bar-text);cursor:pointer;
  transition:background-color var(--t-fast) var(--ease),transform var(--t-fast) var(--ease)}
.iconbtn:hover{background:var(--bar-fill)}
.iconbtn:active{transform:scale(.94)}
.acctbtn{border-radius:50%;width:34px;height:34px;background:var(--bar-fill)}
.acctbtn:hover{background:color-mix(in srgb,var(--white) 20%,transparent)}
.asmark{flex:none;border:0;cursor:pointer;background:var(--warn-bg);color:var(--warn-text);font:600 12.5px/1 var(--font);border-radius:var(--pill);padding:7px 12px;margin-left:8px;white-space:nowrap}
.acct{position:relative;flex:none;margin-left:4px}
.acctmenu{position:absolute;right:0;top:44px;min-width:180px;padding:6px;background:var(--surface);color:var(--text);border:1px solid var(--line);
  border-radius:var(--r);box-shadow:var(--sh-3);z-index:60;transition:opacity var(--t-fast) var(--ease),transform var(--t-fast) var(--ease)}
@starting-style{.acctmenu{opacity:0;transform:translateY(-4px) scale(.98)}}
.acctmenu .mitem{display:block;width:100%;text-align:left;border:0;background:transparent;color:var(--text);font:500 14px/1.2 var(--font);padding:9px 12px;border-radius:9px;cursor:pointer}
.acctmenu .mitem:hover,.acctmenu .mitem:focus-visible{background:var(--fill)}
.acctmenu form{margin:0}

/* slide-out menu (outside the header so the frosted bar never clips it) */
.scrim{position:fixed;inset:0;z-index:90;background:color-mix(in srgb,var(--navy) 28%,transparent);opacity:0;pointer-events:none;
  -webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);transition:opacity var(--t) var(--ease)}
.scrim.open{opacity:1;pointer-events:auto}
.sidemenu{position:fixed;top:0;left:0;bottom:0;z-index:100;width:min(300px,86vw);display:flex;flex-direction:column;background:var(--surface);color:var(--text);
  border-right:1px solid var(--line);box-shadow:var(--sh-3);transform:translateX(-102%);visibility:hidden;
  transition:transform 240ms var(--ease),visibility 0s linear 240ms}
.sidemenu.open{transform:none;visibility:visible;transition:transform 240ms var(--ease),visibility 0s}
html.menu-open{overflow:hidden}
.sidemenu .mtop{display:flex;align-items:center;justify-content:space-between;height:60px;padding:0 12px 0 18px;flex:none}
.sidemenu .brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--text);border-radius:8px}
.sidemenu .brand .mark{display:inline-grid;place-items:center;width:32px;height:32px;border-radius:9px;background:var(--navy)}
.sidemenu .brand img{width:24px;height:24px}
.sidemenu .iconbtn{color:var(--text-2)}
.sidemenu .iconbtn:hover{background:var(--fill)}
.sidemenu :focus-visible{box-shadow:var(--focus)}
.sidemenu .mbody{flex:1;overflow-y:auto;overscroll-behavior:contain;padding:4px 12px 24px}
.sidemenu .msec{padding:10px 0;border-top:1px solid var(--line)}
.sidemenu .msec:first-child{border-top:0}
.sidemenu .mh{font-size:11.5px;font-weight:600;color:var(--text-3);letter-spacing:.06em;text-transform:uppercase;padding:4px 10px 6px}
.sidemenu nav{display:flex;flex-direction:column;gap:1px}
.sidemenu a.mi{display:flex;align-items:center;height:38px;padding:0 10px;border-radius:10px;color:var(--text);text-decoration:none;font-size:15px;font-weight:500;
  transition:background-color var(--t-fast) var(--ease),transform var(--t-fast) var(--ease)}
.sidemenu a.mi:hover{background:var(--fill)}
.sidemenu a.mi:active{transform:scale(.98)}
.sidemenu a.mi.on{background:var(--navy);color:var(--white);font-weight:600}
.sidemenu .seg{display:flex;flex-wrap:wrap;gap:4px;padding:0 6px}
.sidemenu .seg button{font:500 13px/1 var(--font);color:var(--text-2);background:var(--fill);border:0;border-radius:var(--pill);padding:7px 11px;cursor:pointer;
  transition:background-color var(--t-fast) var(--ease),color var(--t-fast) var(--ease),transform var(--t-fast) var(--ease)}
.sidemenu .seg button:hover{color:var(--text);background:var(--fill-2)}
.sidemenu .seg button:active{transform:scale(.97)}
.sidemenu .seg button.on{background:var(--navy);color:var(--white)}
.pagebar h1.dup{display:none}
.pagebar .sub{display:none}

/* header search */
.gsearch{position:relative;flex:0 1 240px;min-width:140px;margin-left:8px}
.gsearch input{width:100%;height:32px;padding:0 12px 0 32px;border-radius:var(--pill);border:1px solid transparent;color:var(--bar-text);font-size:13.5px;
  background:var(--bar-fill) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23c9d0d3' stroke-width='2.4' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-3.5-3.5'/%3E%3C/svg%3E") no-repeat 11px center;
  transition:background-color var(--t) var(--ease),color var(--t) var(--ease),box-shadow var(--t) var(--ease)}
.gsearch input::placeholder{color:var(--bar-text-2)}
.gsearch input:focus{background-color:var(--white);color:var(--navy);box-shadow:var(--focus-dark);border-color:transparent}
.gsearch input:focus::placeholder{color:var(--text-3)}
.gres{position:absolute;top:42px;right:0;width:480px;max-width:calc(100vw - 24px);color:var(--text);z-index:60;padding:6px;
  background:var(--surface);   /* solid: it sits inside the frosted bar, which is already a backdrop root */
  border:1px solid var(--line);border-radius:var(--r-l);box-shadow:var(--sh-3);max-height:72vh;overflow:auto;overscroll-behavior:contain;
  transition:opacity var(--t) var(--ease),transform var(--t) var(--ease)}
@starting-style{.gres{opacity:0;transform:translateY(-6px)}}
.gres .gg+.gg{border-top:1px solid var(--line);margin-top:4px;padding-top:4px}
.gres .gh{font-size:11.5px;font-weight:600;color:var(--text-2);padding:8px 10px 4px;letter-spacing:.02em}
.gres .gm{font-weight:400;color:var(--text-2)}
.gres a.gr{display:block;padding:7px 10px;border-radius:10px;text-decoration:none;color:var(--text);transition:background-color var(--t-fast) var(--ease)}
.gres a.gr:hover,.gres a.gr.sel{background:var(--fill)}
.gres .gt{font-size:14px;font-weight:500;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gres .gs{font-size:12px;color:var(--text-2);line-height:1.35;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gres .gnone{padding:12px;color:var(--text-2);font-size:14px}

/* page bar (title + page tools) */
.pagebar{display:flex;align-items:center;gap:14px;flex:none;min-height:68px;padding:14px 28px;
  background:color-mix(in srgb,var(--bg) 82%,transparent);-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px);
  border-bottom:1px solid var(--line)}
.pagebar h1{font-size:24px;margin:0;font-weight:600;letter-spacing:-.022em;line-height:1.15}
.pagebar .sub{font-size:13px;color:var(--text-2);margin-top:3px}
.pagebar .spacer{flex:1}
.pagebar .tools{display:flex;align-items:center;gap:8px}
.addrule{display:inline-flex;align-items:center;background:var(--accent);color:var(--on-accent);border:0;border-radius:var(--pill);padding:8px 16px;
  font:500 14px/1.2 var(--font);cursor:pointer;transition:background-color var(--t-fast) var(--ease),transform var(--t-fast) var(--ease)}
.addrule:hover{background:var(--accent-hover)}
.addrule:active{transform:scale(.97)}
.addrule:focus-visible{box-shadow:var(--focus);border-radius:var(--pill)}
.pagebar .btn.small.on{background:var(--accent);color:var(--on-accent);border-color:transparent}

/* ---------------- generic page + boxes ---------------- */
main.page{max-width:1160px;margin:0 auto;padding:28px}
main.page.wide{max-width:none;padding:22px 28px}
section.box{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-l);box-shadow:var(--sh-1);padding:20px 22px;margin-bottom:20px}
section.box h2{font-size:17px;margin:0 0 12px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
main.denied{max-width:560px;margin:80px auto;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-l);box-shadow:var(--sh-2);padding:32px;font-family:var(--font);color:var(--text)}
.placeholder{max-width:560px;margin:56px auto;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-l);box-shadow:var(--sh-1);padding:36px;text-align:center}
#placeholder,main.page > section.box[style*="text-align:center"]{max-width:620px;margin:40px auto;padding:64px 28px!important;box-shadow:var(--sh-2)}
#placeholder h2,main.page > section.box[style*="text-align:center"] h2{justify-content:center;font-size:28px!important;letter-spacing:-.02em}
#placeholder .muted,main.page > section.box[style*="text-align:center"] .muted{font-size:15px;max-width:420px;margin:0 auto}

/* ---------------- tables ---------------- */
table{width:100%;border-collapse:separate;border-spacing:0;font-size:14px;font-variant-numeric:tabular-nums}
th{background:var(--surface);color:var(--text-2);text-align:left;padding:10px 12px;font-size:12px;font-weight:600;letter-spacing:.01em;
  border-bottom:1px solid var(--line-2);white-space:nowrap}
td{padding:10px 12px;border-bottom:1px solid var(--line);vertical-align:top}
tbody tr:nth-child(even) td{background:var(--fill)}
tbody tr td{transition:background-color var(--t-fast) var(--ease)}
tbody tr:last-child td{border-bottom:0}
td.rn{text-align:right;color:var(--text-2)}
td.bad{color:var(--bad-text);font-weight:600}
.cell-manual{background:var(--warn-bg)!important;box-shadow:inset 3px 0 0 var(--warn-line)}
.cell-inferred{font-style:italic;box-shadow:inset 3px 0 0 var(--warn-line)}
tr.hit td{background:var(--warn-bg)!important;transition:background-color 1.5s}
.toolbar{display:flex;align-items:center;gap:8px;margin-bottom:10px;flex-wrap:wrap}
.toolbar .spacer{flex:1}
.toolbar input{width:300px;padding:8px 12px;font-size:14px;border-radius:var(--pill)}
.toolbar select{font-size:14px;padding:7px 30px 7px 12px;border-radius:var(--pill)}
/* data grid (dataset pages) */
.gridwrap{overflow:auto;max-height:calc(100vh - var(--navh) - 260px);border:1px solid var(--line);border-radius:var(--r);margin-top:8px;
  overscroll-behavior:contain;-webkit-overflow-scrolling:touch;background:var(--surface)}
table.grid{font-size:13px;white-space:nowrap}
table.grid th{position:sticky;top:0;z-index:2;white-space:pre;background:color-mix(in srgb,var(--white) 92%,transparent);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);box-shadow:inset 0 -1px 0 var(--line-2);border-bottom:0}
table.grid td{max-width:340px;overflow:hidden;text-overflow:ellipsis;padding:9px 12px}
.legend{margin-top:10px}
tr.jobrow{cursor:pointer}
tr.jobrow:hover td{background:var(--fill-2)!important}
tr.autorow td{color:var(--text)}
.autochip{display:inline-flex;font-size:11px;font-weight:600;padding:0 7px;border-radius:var(--pill);background:var(--fill-2);color:var(--text)}
.regnote{margin:0 0 10px;font-size:13px}
#srcline,.srcline{overflow-wrap:anywhere}

/* sheet copies (spreadsheet look) */
.sheettabs{display:flex;flex-wrap:nowrap;gap:4px;padding:10px 28px;overflow-x:auto;flex:none;border-bottom:1px solid var(--line);
  background:var(--bg);scrollbar-width:none;scroll-behavior:smooth}
.sheettabs::-webkit-scrollbar{display:none}
.sheettabs button{flex:none;background:transparent;border:0;border-radius:var(--pill);padding:6px 14px;cursor:pointer;font:500 13.5px/1.2 var(--font);color:var(--text-2);
  transition:background-color var(--t) var(--ease),color var(--t) var(--ease),transform var(--t-fast) var(--ease)}
.sheettabs button:hover{background:var(--fill);color:var(--text)}
.sheettabs button:active{transform:scale(.97)}
.sheettabs button.on{background:var(--accent);color:var(--on-accent)}
.sheettabs button.vtab{font-weight:600}
.srcline{font-size:12px;color:var(--text-2);padding:8px 28px;flex:none;background:var(--bg)}
.sheetwrap{flex:1;overflow:auto;min-height:0;background:var(--surface);border-top:1px solid var(--line);overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
table.sheet{border-collapse:separate;border-spacing:0;font-size:13px;width:auto;min-width:100%}
table.sheet th{position:sticky;top:0;z-index:2;text-align:center;font-size:11.5px;font-weight:600;color:var(--text-2);padding:6px 10px;
  background:color-mix(in srgb,var(--white) 92%,transparent);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  border:0;border-right:1px solid var(--line);box-shadow:inset 0 -1px 0 var(--line-2)}
table.sheet th.rn,table.sheet td.rn{position:sticky;left:0;z-index:1;background:var(--surface);color:var(--text-2);text-align:right;font-size:12px;width:48px;
  box-shadow:inset -1px 0 0 var(--line)}
table.sheet th.rn{z-index:3}
table.sheet td{border:0;border-right:1px solid var(--line);border-bottom:1px solid var(--line);padding:7px 10px;white-space:nowrap;max-width:420px;
  overflow:hidden;text-overflow:ellipsis;background:var(--surface)}
table.sheet tbody tr:nth-child(even) td{background:var(--fill)}
table.sheet tbody tr:nth-child(even) td.rn{background:var(--fill)}
table.sheet tr.grp td{background:var(--navy)!important;color:var(--white);font-weight:600}
table.sheet tr.hdr td{background:var(--fill-2)!important;font-weight:600}
table.sheet tr.tot td{font-weight:600;background:var(--fill)!important}
table.sheet tr.autorow td{color:var(--text)}
table.sheet tr.inferred td.rn{box-shadow:inset 3px 0 0 var(--warn-line),inset -1px 0 0 var(--line)}
table.sheet tr.jobrow:hover td{background:var(--fill-2)!important}
table.sheet td.jobcell a{color:inherit}
table.sheet td.num{text-align:right;font-variant-numeric:tabular-nums}
table.sheet td.ck{text-align:center}
.ckbox{display:inline-block;width:15px;height:15px;border:1.5px solid var(--line-2);border-radius:4px;vertical-align:middle;background:var(--surface)}
.ckbox.on{background:var(--accent);border-color:var(--accent);box-shadow:inset 0 0 0 2.5px var(--white)}

/* data page sub tabs */
.subtabs{display:flex;gap:4px;margin-bottom:14px;flex-wrap:wrap}
.subtabs a{display:inline-flex;align-items:center;gap:6px;background:transparent;border:0;border-radius:var(--pill);padding:6px 14px;color:var(--text-2);
  text-decoration:none;font-size:13.5px;font-weight:500;transition:background-color var(--t) var(--ease),color var(--t) var(--ease)}
.subtabs a:hover{background:var(--fill);color:var(--text)}
.subtabs a.on{background:var(--accent);color:var(--on-accent)}
.subtabs a.on .muted{color:color-mix(in srgb,var(--white) 80%,var(--navy))}
.datatabs{padding:3px;background:var(--fill);border-radius:var(--pill);display:inline-flex}
.datatabs a.on{background:var(--surface);color:var(--text);box-shadow:var(--sh-1)}

/* dialogs + modals */
dialog{border:1px solid var(--line);border-radius:var(--r-l);padding:24px;width:min(760px,95vw);box-shadow:var(--sh-3);color:var(--text);background:var(--surface)}
dialog[open]{animation:pop .22s var(--ease) both}
dialog::backdrop{background:color-mix(in srgb,var(--navy) 30%,transparent);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
dialog h2{font-size:19px;margin:0 0 10px}
.fields{display:grid;grid-template-columns:1fr 1fr;gap:4px 16px;max-height:65vh;overflow:auto}
.fields select{width:100%}
.dlgbtns,.modalbtns{display:flex;justify-content:flex-end;gap:8px;margin-top:18px}
.modalwrap{position:fixed;inset:0;background:color-mix(in srgb,var(--navy) 30%,transparent);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  display:flex;align-items:center;justify-content:center;z-index:100;animation:fade .18s var(--ease) both}
.modal{background:var(--surface);border-radius:var(--r-l);border:1px solid var(--line);padding:26px;width:min(520px,92vw);box-shadow:var(--sh-3);animation:pop .24s var(--ease) both}
.modal h2{margin:0 0 10px;font-size:20px}
.modal textarea{width:100%}

/* conflicts (rules) */
.conflict{border-radius:var(--r);padding:12px 14px;margin:10px 0;background:var(--warn-bg);box-shadow:inset 3px 0 0 var(--warn-line)}
.cmp{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:10px 0}
.cmp div{background:var(--surface);border-radius:10px;padding:10px}

/* ---------------- Home ---------------- */
main.home{max-width:1180px;width:100%;margin:0 auto;padding:28px;display:grid;grid-template-columns:1fr 1fr;gap:28px;align-content:start}
.hcol h2{font-size:17px;margin:0 0 12px;display:flex;align-items:center;gap:8px}
.hcol h2 .n{font-size:12px;font-weight:600;background:var(--fill-2);color:var(--text);border-radius:var(--pill);padding:0 9px;line-height:1.7}
.hitem{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-l);box-shadow:var(--sh-1);padding:14px 16px;margin-bottom:10px;display:flex;gap:12px;
  transition:box-shadow var(--t) var(--ease),transform var(--t) var(--ease),opacity var(--t) var(--ease);animation:rise .28s var(--ease) both}
.hitem:hover{box-shadow:var(--sh-2)}
.hitem.todo{box-shadow:var(--sh-1),inset 3px 0 0 var(--accent)}
.hitem.todo:hover{box-shadow:var(--sh-2),inset 3px 0 0 var(--accent)}
.hitem.done{opacity:.55}
.hitem.done .htext{text-decoration:line-through}
.hitem input[type=checkbox]{width:18px;height:18px;margin-top:2px;flex:none;cursor:pointer}
.hbody{flex:1;min-width:0}
.hmeta{font-size:12px;color:var(--text-2);display:flex;gap:8px;flex-wrap:wrap}
.hmeta .src{font-weight:600;color:var(--text)}
.htext{font-size:15px;margin:3px 0 2px;line-height:1.42}
.hdetail{font-size:13px;color:var(--text-2);overflow-wrap:anywhere}
.hitem a.open{font-size:13px;white-space:nowrap;color:var(--accent);font-weight:500;text-decoration:none;align-self:flex-start;padding:2px 8px;border-radius:var(--pill);
  transition:background-color var(--t-fast) var(--ease)}
.hitem a.open:hover{background:var(--fill)}
.hempty{background:transparent;border:1px dashed var(--line-2);border-radius:var(--r-l);padding:22px;color:var(--text-2);text-align:center}
details.donebox summary{cursor:pointer;color:var(--text-2);font-size:13px;margin:8px 0}

/* ---------------- Chat ---------------- */
.views{display:flex;flex:1;min-height:0}
.botpanel{width:290px;min-width:250px;background:var(--bg);border-right:1px solid var(--line);overflow-y:auto;padding:16px 12px 24px;overscroll-behavior:contain}
.panelhead{font-weight:600;font-size:12px;letter-spacing:.02em;color:var(--text-2);margin:2px 8px 12px}
.botgroup{margin-bottom:14px;padding:2px 0}
.botgroup.organizer{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--sh-1);padding:6px}
.botgroup.soon{opacity:.85}
.grouphead{display:flex;align-items:center;justify-content:space-between;font-size:12px;font-weight:600;color:var(--text-2);letter-spacing:.01em;padding:4px 8px}
.plus{background:var(--fill-2);color:var(--text);border:0;border-radius:50%;width:24px;height:24px;font-size:16px;line-height:24px;cursor:pointer;padding:0;
  transition:background-color var(--t-fast) var(--ease),transform var(--t-fast) var(--ease)}
.plus:hover{background:var(--accent);color:var(--on-accent)}
.plus:active{transform:scale(.92)}
.slot{display:flex;align-items:center;gap:10px;padding:7px 10px;border-radius:9px;cursor:pointer;font-size:14px;
  transition:background-color var(--t-fast) var(--ease),color var(--t-fast) var(--ease)}
.slot:hover{background:var(--fill-2)}
.slot.on{background:var(--accent);color:var(--on-accent)}
.slot .dot{width:8px;height:8px;border-radius:50%;background:var(--slate);flex:none}
.slot.on .dot{background:var(--white)}
.slot .bname{flex:1}
.slot .x{background:transparent;border:0;color:inherit;font-size:17px;cursor:pointer;opacity:.55;border-radius:50%;width:22px;height:22px;line-height:20px;padding:0;
  transition:opacity var(--t-fast),background-color var(--t-fast)}
.slot .x:hover{opacity:1;background:color-mix(in srgb,currentColor 14%,transparent)}
.bdesc{font-size:12px;color:var(--text-2);padding:2px 10px 2px}
main.chat{max-width:860px;margin:0 auto;padding:16px;display:flex;flex-direction:column;height:calc(100vh - 68px)}
.views main.chat{flex:1;max-width:none;height:auto;margin:0;padding:0;background:var(--surface)}
.chathead{font-size:13px;color:var(--text-2);padding:14px 28px;border-bottom:1px solid var(--line)}
#log{flex:1;overflow-y:auto;padding:20px 28px;overscroll-behavior:contain}
.msg{margin:12px 0;padding:11px 15px;border-radius:18px;max-width:min(78%,720px);white-space:pre-wrap;line-height:1.45;animation:rise .24s var(--ease) both}
.msg.user{background:var(--accent);color:var(--on-accent);margin-left:auto;border-bottom-right-radius:6px}
.msg.bot{background:var(--fill);border:0;border-bottom-left-radius:6px}
.meta{font-size:12px;color:var(--text-2);margin-bottom:6px}
.msg.user .meta{color:color-mix(in srgb,var(--white) 80%,var(--navy))}
.role{font-weight:600;background:var(--surface)}
.sources{margin-top:10px;font-size:12px;color:var(--text-2);border-top:1px solid var(--line);padding-top:8px}
.sources code{background:var(--surface);padding:1px 5px;border-radius:5px}
form.ask{display:flex;gap:8px;padding:12px 28px 6px;border-top:1px solid var(--line);background:var(--surface)}
form.ask input{flex:1;height:44px;padding:0 18px;font-size:15px;border-radius:var(--pill);background:var(--bg)}
form.ask input:focus{background:var(--surface)}
form.ask .btn{height:44px;padding:0 22px}
form.ask input:disabled{background:var(--fill);color:var(--text-2)}
.hint{font-size:12px;color:var(--text-2);margin:2px 28px 12px}
main.activity{flex:1;overflow-y:auto;padding:20px 28px;background:var(--surface)}

/* ---------------- Internal Communication ---------------- */
main.team{max-width:900px;width:100%;margin:0 auto;padding:0;display:flex;flex-direction:column;flex:1;min-height:0}
main.team form.ask{padding:12px 28px 18px;border-top:1px solid var(--line);background:transparent}
main.team form.ask input{background:var(--surface)}
.feed{flex:1;overflow-y:auto;padding:20px 28px;overscroll-behavior:contain}
.post{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-l);box-shadow:var(--sh-1);padding:12px 16px;margin:10px 0;max-width:80%}
.post.mine{margin-left:auto;background:var(--fill);border-color:transparent;box-shadow:none}
.card.rp{max-width:none;margin:14px 0;padding:18px 20px;box-shadow:var(--sh-1)}
.rphead{display:flex;align-items:center;gap:8px}
.rptext{font-size:17px;font-weight:600;margin:10px 0 4px;letter-spacing:-.01em}
table.appr{width:100%;margin-top:12px;font-size:14px}
table.appr th{background:transparent}
.votebtns{display:flex;gap:6px;justify-content:flex-end}
.rpout{margin-top:10px;font-size:14px}

/* ---------------- Jobs + job page ---------------- */
main.jobpage{max-width:1200px;margin:0 auto;padding:28px}
.jobhead{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-l);box-shadow:var(--sh-1);padding:22px 24px;margin-bottom:20px;animation:rise .28s var(--ease) both}
.jobhead h1{font-size:24px;margin:0 0 14px;letter-spacing:-.02em}
.idgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.idgrid > div{background:var(--fill);border-radius:var(--r);padding:10px 14px;min-width:0}
.idgrid .k{font-size:12px;color:var(--text-2)} .idgrid .v{font-weight:600;font-size:15px;overflow-wrap:anywhere}
.flags{margin-top:12px;font-size:13px}
.tabbar{display:inline-flex;flex-wrap:wrap;gap:2px;padding:3px;background:var(--fill);border-radius:12px;margin:8px 0 12px;border:0}
.tabbar button{background:transparent;border:0;border-radius:9px;padding:6px 13px;cursor:pointer;font:500 13.5px/1.2 var(--font);color:var(--text-2);
  transition:background-color var(--t) var(--ease),color var(--t) var(--ease),box-shadow var(--t) var(--ease)}
.tabbar button:hover{color:var(--text)}
.tabbar button.on{background:var(--surface);color:var(--text);box-shadow:var(--sh-1);border:0}
.tabbar .n{font-size:11px;opacity:.7;margin-left:4px}
.tabbody{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-l);box-shadow:var(--sh-1);padding:20px 22px;min-height:240px}
.tabbody table{font-size:14px}
.tabbody th,.tabbody td{text-align:left;padding:9px 10px;vertical-align:top}
.tabbody th{background:transparent}
details.hist{margin:10px 0;border:1px solid var(--line);border-radius:var(--r);padding:10px 14px;background:var(--surface)}
details summary{cursor:pointer;font-weight:600;border-radius:6px}
details summary:focus-visible{box-shadow:var(--focus)}
.kv{display:grid;grid-template-columns:240px 1fr;gap:4px 14px;font-size:13.5px;margin-top:6px}
.kv .k{color:var(--text-2)}
.sugg{margin-top:20px;border-top:1px solid var(--line);padding-top:12px}
.status-panel{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:12px;margin:12px 0 18px}
.status-panel .sp{border:1px solid var(--line);border-radius:var(--r-l);padding:14px 16px;background:var(--surface);box-shadow:var(--sh-1)}
.status-panel .sp h3{margin:0 0 8px;font-size:14px}
.status-panel .sp .kv{display:block;font-size:13px;margin:2px 0}
.status-panel .sp .src{font-size:11.5px;color:var(--text-2)}
.status-panel .sp.off{background:var(--bg);box-shadow:none;color:var(--text-2)}
.srcgrid{font-size:13px;width:100%}
.srcgrid td{border-top:1px solid var(--line);border-bottom:0;padding:6px 8px;vertical-align:top;background:transparent!important}
.jobfind.gsearch.big{flex:none;max-width:680px;margin:14px 0 8px}
.jobfind.gsearch.big input{height:46px;border-radius:var(--pill);background-color:var(--bg);color:var(--text);border:1px solid var(--line-2);font-size:16px;padding-left:40px;
  background-position:15px center;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23808a8f' stroke-width='2.4' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-3.5-3.5'/%3E%3C/svg%3E")}
.jobfind.gsearch.big input:focus{background-color:var(--surface);border-color:var(--accent);box-shadow:var(--focus)}
.jobfind .gres{position:static;width:auto;max-width:none;box-shadow:none;border:0;background:transparent;backdrop-filter:none;-webkit-backdrop-filter:none;margin-top:8px;max-height:none;padding:0}
.jobfind .gres:empty{display:none}
/* older job search widget */
.jobsearch{position:relative;flex:0 1 520px}
.jobsearch input{width:100%}
.jobres{position:absolute;top:44px;left:0;right:0;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--sh-3);max-height:70vh;overflow:auto;z-index:50}
.jr{display:block;padding:9px 12px;border-bottom:1px solid var(--line);text-decoration:none;color:var(--text)}
.jr:hover{background:var(--fill)} .jr .jd{font-weight:600;font-size:14px} .jr .jm{font-size:12px;color:var(--text-2)}
.jr.none{color:var(--text-2)}

/* ---------------- adaptive layout ---------------- */
/* 11-tab top view at laptop widths: long two-word labels wrap inside their pill, nothing scrolls */
@media (max-width:1366px){
  .gsearch{flex:0 1 220px;min-width:120px}
}
@media (max-width:1100px){
  .idgrid{grid-template-columns:repeat(2,1fr)}
  main.home{gap:20px}
}
@media (max-width:900px){main.home{grid-template-columns:1fr}}
/* phones: tabs become a swipeable row; search gets its own line */
@media (max-width:760px){
  .navrow{height:auto;flex-wrap:wrap;padding:8px 10px;row-gap:8px}
  .navrow .crumb{font-size:15px}
  .gsearch{order:5;flex:1 1 100%;min-width:0;margin:0 4px 2px}
  .gres{position:fixed;top:auto;left:12px;right:12px;width:auto;margin-top:8px}
  .pagebar{padding:12px 16px;min-height:0;flex-wrap:wrap}
  .pagebar h1{font-size:21px}
  main.page,main.page.wide,main.jobpage,main.home{padding:16px}
  section.box,.jobhead,.tabbody{padding:16px;border-radius:var(--r)}
  .kv{grid-template-columns:1fr;gap:0 0}
  .kv .k{margin-top:8px}
  .cmp{grid-template-columns:1fr}
  .views{flex-direction:column}
  .botpanel{width:auto;min-width:0;max-height:34vh;border-right:0;border-bottom:1px solid var(--line)}
  #log,.feed{padding:14px 16px}
  .chathead{padding:10px 16px}
  form.ask{padding:10px 16px 4px}
  .hint{margin:2px 16px 10px}
  .msg,.post{max-width:92%}
  .sheettabs,.srcline{padding-left:16px;padding-right:16px}
  .toolbar input{width:100%}
  .fields{grid-template-columns:1fr}
  .datatabs,.subtabs{display:flex;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;max-width:100%}
  .datatabs a,.subtabs a{flex:none}
}
@media (max-width:440px){.idgrid{grid-template-columns:1fr}}

/* motion preferences: keep every state change, drop the movement */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
  .skel i{animation:none}
}
/* page bar with only tools (title already in the top bar): slim, borderless */
.pagebar:has(h1.dup){min-height:0;padding-top:12px;padding-bottom:4px;border-bottom-color:transparent;background:transparent;-webkit-backdrop-filter:none;backdrop-filter:none}
/* in-page segmented tabs (e.g. Chat | Rules) */
.pageseg{display:inline-flex;padding:3px;gap:2px;border-radius:11px;background:var(--fill);flex:none}
.pageseg a{font:500 14px/1 var(--font);color:var(--text-2);text-decoration:none;padding:8px 18px;border-radius:8px;
  transition:background-color var(--t-fast) var(--ease),color var(--t-fast) var(--ease),box-shadow var(--t-fast) var(--ease)}
.pageseg a:hover{color:var(--text)}
.pageseg a.on{background:var(--surface);color:var(--text);font-weight:600;box-shadow:var(--sh-1)}
.pageseg a:focus-visible{box-shadow:var(--focus)}
.pagebar:has(.pageseg){min-height:0;padding-top:12px;padding-bottom:12px}

/* ---------------- Updates page (Admin only) ---------------- */
main.upd{display:grid;grid-template-columns:minmax(300px,380px) 1fr;gap:24px;align-items:start}
main.upd .updnew{position:sticky;top:76px;margin:0}
main.upd .updhist{grid-column:1/-1}
.updseg{display:flex;padding:3px;gap:2px;border-radius:11px;background:var(--fill);margin:4px 0 6px}
.updseg button{flex:1;font:500 14px/1 var(--font);color:var(--text-2);background:none;border:0;padding:9px 12px;border-radius:8px;cursor:pointer}
.updseg button.on{background:var(--surface);color:var(--text);font-weight:600;box-shadow:var(--sh-1)}
.updseg button:focus-visible{box-shadow:var(--focus)}
.updhelp{margin:0 0 14px;min-height:18px}
.updf{display:block;margin-bottom:12px}
.updf>span{display:block;font-size:13px;font-weight:600;margin-bottom:5px}
.updf em{font-style:normal;font-weight:400}
.updf input:not([type=file]),.updf textarea{width:100%;box-sizing:border-box;font:15px/1.4 var(--font);padding:9px 12px;border:1px solid var(--line-2);border-radius:var(--r-s);background:var(--surface);color:var(--text)}
.updf textarea{resize:vertical}
.updf input:focus,.updf textarea:focus{outline:0;box-shadow:var(--focus)}
.updfile input{font-size:13px}
.updrow{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.updai{margin:16px 0 0;padding:10px 12px;border-radius:var(--r-s);background:var(--fill);font-size:13px;color:var(--text-2)}
.updhead{display:flex;align-items:center;gap:12px;margin-bottom:12px;flex-wrap:wrap}
.updhead h2{font-size:17px;margin:0;flex:1}
.updn{color:var(--text-3);font-weight:400;margin-left:2px}
.upditem{padding:18px 20px}
.updtop{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:6px}
.updtop h3{font-size:16px;margin:0;flex:1;min-width:200px}
.upddesc{margin:0 0 10px;white-space:pre-wrap;color:var(--text-2);font-size:14px}
.updshot img,.updba img{max-width:100%;max-height:260px;border:1px solid var(--line);border-radius:var(--r-s);display:block;margin-bottom:6px}
.updprev{background:var(--fill);border-radius:var(--r);padding:12px 14px;margin:8px 0 12px}
.updprev p{margin:0 0 8px;font-size:14px}
.upddiff{width:100%;border-collapse:collapse;font-size:14px;background:var(--surface);border-radius:var(--r-s);overflow:hidden}
.upddiff th{text-align:left;font-size:12px;font-weight:600;color:var(--text-2);padding:7px 10px;border-bottom:1px solid var(--line)}
.upddiff td{padding:8px 10px;border-bottom:1px solid var(--line);vertical-align:top}
.upddiff tr:last-child td{border-bottom:0}
.upddiff td.b{color:var(--bad-text);text-decoration:line-through;text-decoration-color:color-mix(in srgb,var(--bad-text) 45%,transparent)}
.upddiff td.a{color:var(--ok-text);font-weight:600}
.upddiff .mono{font-family:var(--mono);font-size:11px}
.updba{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:10px}
.updba pre{margin:0;white-space:pre-wrap;font:13px/1.45 var(--mono);background:var(--surface);border-radius:var(--r-s);padding:8px 10px}
.updcap{font-size:12px;font-weight:600;color:var(--text-2);margin-bottom:4px}
.updnotes{list-style:none;margin:0 0 10px;padding:0;font-size:14px}
.updnotes li{padding:4px 0}
.st.upds-ready{background:var(--warn-bg);color:var(--warn-text)}
.st.upds-approved{background:var(--ok-bg);color:var(--ok-text)}
.st.upds-rejected{background:var(--bad-bg);color:var(--bad-text)}
.updempty{text-align:center;padding:32px}
.updhtab{width:100%;border-collapse:collapse;font-size:14px;color:var(--text)}
.updhtab td{padding:8px 8px;border-bottom:1px solid var(--line);vertical-align:top}
.updhtab tr:last-child td{border-bottom:0}
.updhtab td:first-child{white-space:nowrap}
@media (max-width:860px){main.upd{grid-template-columns:1fr}main.upd .updnew{position:static}.updba{grid-template-columns:1fr}}

/* ---------------- Inbox ---------------- */
.ibf{margin-left:16px;display:inline-flex;padding:3px;gap:2px;border-radius:11px;background:var(--fill);flex:none}
.ibf a{font:500 14px/1 var(--font);color:var(--text-2);text-decoration:none;padding:8px 18px;border-radius:8px}
.ibf a:hover{color:var(--text)}
.ibf a.on{background:var(--surface);color:var(--text);font-weight:600;box-shadow:var(--sh-1)}
.ibf a:focus-visible{box-shadow:var(--focus)}
.ibcount{display:inline-block;min-width:18px;padding:0 5px;border-radius:var(--pill);background:var(--accent);color:var(--on-accent);font-size:11px;line-height:18px;text-align:center;margin-left:4px}
main.inbox{display:grid;width:100%;box-sizing:border-box;grid-template-columns:minmax(320px,420px) 1fr;gap:0;max-width:1280px;margin:0 auto;padding:0 28px 28px;height:calc(100vh - 140px);min-height:480px}
.iblist{overflow:auto;border:1px solid var(--line);border-radius:var(--r-l) 0 0 var(--r-l);background:var(--surface)}
.ibread{overflow:auto;border:1px solid var(--line);border-left:0;border-radius:0 var(--r-l) var(--r-l) 0;background:var(--surface);padding:22px 26px}
.ibrow{display:flex;gap:8px;padding:12px 14px 12px 10px;border-bottom:1px solid var(--line);cursor:pointer}
.ibrow:hover{background:var(--fill)}
.ibrow.on{background:color-mix(in srgb,var(--accent) 8%,var(--surface))}
.ibrow:focus-visible{outline:0;box-shadow:inset var(--focus)}
.ibdot{flex:none;width:8px;height:8px;border-radius:50%;margin-top:6px}
.ibrow.unread .ibdot{background:#0a84ff}
.ibrow.unread .ibtop strong,.ibrow.unread .ibsub{font-weight:700}
.ibmain{flex:1;min-width:0}
.ibtop{display:flex;gap:8px;align-items:baseline;font-size:14px}
.ibtop strong{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ibtop .muted{font-size:12px;white-space:nowrap}
.ibsub{font-size:14px;margin:2px 0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ibsnip{font-size:13px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.ibjob{display:inline-block;margin-top:5px;font-size:12px;color:var(--text);background:var(--fill);border-radius:var(--pill);padding:1px 9px;text-decoration:none}
.ibjob:hover{background:var(--fill-2)}
.ibnote{margin:14px;padding:14px 16px;border-radius:var(--r);background:var(--fill);color:var(--text-2);font-size:14px;text-align:center}
.ibnote.small{padding:8px 12px;font-size:12px}
.ibempty{padding:48px 16px;text-align:center}
.ibhead{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:10px}
.ibhead h2{font-size:20px;margin:0;letter-spacing:-.01em}
.ibmeta{display:grid;grid-template-columns:64px 1fr;gap:4px 10px;margin:0 0 14px;font-size:13px}
.ibmeta dt{color:var(--text-2)}
.ibmeta dd{margin:0;word-break:break-word}
.ibbody{white-space:pre-wrap;font-size:15px;line-height:1.5;padding:14px 0;border-top:1px solid var(--line)}
.ibhint{font-size:12px;margin-top:8px}
.ibacts{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:12px}
.ibq{margin:0 0 10px;padding:6px 12px;border-left:3px solid var(--line-2);color:var(--text-2);font-size:13px}
.ibcomp label{display:grid;grid-template-columns:64px 1fr;align-items:center;gap:10px;border-bottom:1px solid var(--line);padding:4px 0}
.ibcomp label span{font-size:13px;color:var(--text-2)}
.ibcomp input,.ibcomp select{border:0;font:15px var(--font);padding:8px 0;background:transparent;color:var(--text);outline:0}
.ibcomp textarea{width:100%;box-sizing:border-box;border:0;font:15px/1.5 var(--font);padding:12px 0;resize:vertical;outline:0;color:var(--text);background:transparent}
.ibcomp textarea:focus,.ibcomp input:focus{box-shadow:none}
.ibconfirm{margin-top:14px;padding:14px 16px;border-radius:var(--r);background:var(--fill);box-shadow:var(--sh-2)}
.ibconfirm p{margin:0;font-weight:600}
.ibappr{margin-top:10px;font-size:13px}
.ibappr td{padding:4px 10px 4px 0}
.ibchoose{text-align:center;padding:40px 0}
@media (max-width:860px){main.inbox{grid-template-columns:1fr;height:auto;padding:0 12px 20px}.iblist{border-radius:var(--r-l) var(--r-l) 0 0;max-height:55vh}.ibread{border-left:1px solid var(--line);border-top:0;border-radius:0 0 var(--r-l) var(--r-l)}.ibf{margin:8px 0 0}}

/* ---------------- Job edits (HCAB job record), Jobs list, source details expander (Nov 2) ---------------- */
.jh1{display:flex;align-items:flex-start;gap:10px}
.jh1 h1{flex:1;min-width:0}
.pencil{flex:none;display:inline-grid;place-items:center;width:32px;height:32px;border-radius:9px;border:1px solid var(--line);
  background:var(--white);color:var(--navy);cursor:pointer;transition:background .15s,border-color .15s}
.pencil:hover{background:var(--tint);border-color:var(--line-2)}
.pencil:focus-visible{outline:none;box-shadow:var(--focus)}
.edchip{display:inline-flex;align-items:center;border-radius:999px;padding:0 7px;font-size:11px;font-weight:600;line-height:1.6;
  background:var(--tint);color:var(--navy);border:1px solid var(--line);vertical-align:1px}
.unassigned{color:var(--text-3);font-style:italic}
.jobnotes{white-space:pre-wrap;background:var(--tint);border-radius:10px;padding:10px 12px}
table.edlog td{padding:6px 8px;font-size:13px;border-bottom:1px solid var(--line)}
td.edited,span.edited{box-shadow:inset 3px 0 0 var(--navy);background:color-mix(in srgb,var(--tint) 70%,var(--white))}
span.edited{padding:0 6px;border-radius:4px}
details.srcdetails{margin:14px 0 4px;border:1px solid var(--line);border-radius:12px;background:var(--white)}
details.srcdetails>summary{cursor:pointer;padding:9px 12px;font-size:13px;font-weight:600;color:var(--text-2);list-style:none}
details.srcdetails>summary::-webkit-details-marker{display:none}
details.srcdetails>summary::before{content:"›";display:inline-block;margin-right:8px;transition:transform .15s}
details.srcdetails[open]>summary::before{transform:rotate(90deg)}
details.srcdetails .sdbody{padding:0 12px 12px;font-size:13px;color:var(--text-2)}
.srcline details.srcdetails{margin:6px 0}
.joblist ul.jl{list-style:none;margin:12px 0 0;padding:0;border:1px solid var(--line);border-radius:12px;overflow:hidden;background:var(--white)}
.joblist li{display:flex;align-items:center;gap:8px;border-bottom:1px solid var(--line);padding:0 8px 0 0}
.joblist li:last-child{border-bottom:0}
.joblist li a{flex:1;min-width:0;display:flex;align-items:center;gap:12px;padding:11px 12px;color:var(--text);text-decoration:none}
.joblist li a:hover{background:var(--tint)}
.joblist .jn{flex:none;font-weight:600;min-width:64px;font-variant-numeric:tabular-nums}
.joblist .jn.unassigned{font-weight:500;font-size:12px;min-width:auto}
.joblist .jt{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--text-2)}
.escrim{position:fixed;inset:0;z-index:120;background:color-mix(in srgb,var(--navy) 28%,transparent);opacity:0;transition:opacity .2s}
.escrim.on{opacity:1}
.editpanel{position:fixed;z-index:121;top:0;right:0;bottom:0;width:min(440px,100vw);background:var(--white);box-shadow:var(--sh-3);
  transform:translateX(100%);transition:transform .22s ease;display:flex}
.editpanel.on{transform:none}
.editpanel form{display:flex;flex-direction:column;width:100%;min-height:0}
.eph{display:flex;align-items:flex-start;gap:10px;padding:18px 20px 12px;border-bottom:1px solid var(--line)}
.eph>div{flex:1;min-width:0}
.eps{font-size:12px;font-weight:600;letter-spacing:.02em;text-transform:uppercase;color:var(--text-3)}
.eph h2{margin:2px 0 0;font-size:17px;line-height:1.3}
.epx{border:0;background:var(--tint);color:var(--navy);width:30px;height:30px;border-radius:50%;font-size:18px;cursor:pointer}
.epbody{flex:1;overflow:auto;padding:14px 20px}
.ef{display:block;margin:0 0 14px}
.ef .fl{display:block;font-size:13px;font-weight:600;margin-bottom:5px}
.ef input,.ef textarea{width:100%;box-sizing:border-box;border:1px solid var(--line-2);border-radius:10px;padding:9px 11px;font:inherit;font-size:16px;background:var(--white);color:var(--text)}
.ef input:focus,.ef textarea:focus{outline:none;box-shadow:var(--focus);border-color:var(--navy)}
.ef input[disabled],.ef textarea[disabled]{background:var(--tint);color:var(--text-3)}
.ef .fh{font-size:12px;color:var(--text-3);margin-top:4px}
.linkbtn{border:0;background:none;padding:2px 0;color:var(--navy);font-size:12px;text-decoration:underline;cursor:pointer}
.ephist{margin-top:6px;font-size:13px}.ephist ul{padding-left:18px}.ephist li{margin:6px 0}
.eperr{margin:0 20px 10px;padding:9px 12px;border-radius:10px;background:var(--warn-bg);color:var(--warn-text);font-size:13px}
.epf{display:flex;justify-content:flex-end;gap:8px;padding:12px 20px calc(12px + env(safe-area-inset-bottom));border-top:1px solid var(--line)}
@media (max-width:640px){
  .editpanel{top:auto;left:0;width:100vw;height:88vh;border-radius:16px 16px 0 0;transform:translateY(100%)}
  .editpanel.on{transform:none}
  .joblist .jn{min-width:52px}
}
/* ---------------- first-run setup (/setup/<token>, app/firstrun.py) ---------------- */
.setup-wrap{max-width:520px}
.card.setup fieldset{border:1px solid var(--line);border-radius:12px;padding:14px 16px 16px;margin:14px 0;background:var(--white)}
.card.setup legend{font-weight:600;padding:0 6px;color:var(--navy)}
.card.setup .step{display:inline-grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--navy);color:var(--white);font-size:12px;margin-right:6px}
.card.setup input[type=file]{width:100%;height:auto;padding:10px;border:1px dashed var(--slate);border-radius:10px;background:var(--tint)}
.card.setup h2{font-size:16px;margin:18px 0 8px}
.card.setup .btn{width:100%;margin-top:6px}
.card.setup .small{font-size:13px;margin-top:8px}
table.summary{width:100%;border-collapse:collapse;margin:6px 0 14px}
table.summary th,table.summary td{text-align:left;padding:7px 10px;border-bottom:1px solid var(--line);font-size:14px}
table.summary th{color:var(--text-2);font-weight:500;width:50%}
table.summary tr:nth-child(odd){background:var(--tint)}
.bundlebox{margin-top:14px;padding-top:12px;border-top:1px solid var(--line)}
.bundlebox form{display:flex;gap:10px;align-items:center;flex-wrap:wrap}

/* in-site chat bots: typing dots, notices, "Open <bot>" suggestions */
.msg .dots{display:inline-flex;gap:4px;margin-left:8px;vertical-align:middle}
.msg .dots i{width:7px;height:7px;border-radius:50%;background:currentColor;opacity:.35;animation:hcdots 1.2s infinite ease-in-out}
.msg .dots i:nth-child(2){animation-delay:.2s}.msg .dots i:nth-child(3){animation-delay:.4s}
@keyframes hcdots{0%,80%,100%{opacity:.25;transform:translateY(0)}40%{opacity:.9;transform:translateY(-3px)}}
.msg .notice{margin:6px 0;padding:6px 10px;border-left:3px solid #c9a227;background:rgba(201,162,39,.1);border-radius:4px}
.msg .suggest{margin:8px 0;display:flex;flex-wrap:wrap;gap:6px;align-items:center}