:root{ --bg:#f6f4f1; --panel:#fff; --ink:#181012; --muted:#544b44; --line:#d8d2cb; --navy:#1c0d10; --indigo:#1c0d10; --green:#2f6b43; --amber:#9a6a1a; --red:#9a3b3b; --hover:#f4f2ef; --btn-bg:#1c0d10; --btn-fg:#fff; --purple:#7c3aed; --review:#b45309; --amber-fill:#d9730a; --err:#b42318; --ok:#067647; --rec:#1456c4; --shadow:0 1px 2px rgba(28,13,16,.03),0 12px 30px rgba(28,13,16,.05); --spring:cubic-bezier(.22,1,.36,1); color-scheme:light; } [data-theme="dark"]{ --bg:#0f1012; --panel:#18191c; --ink:#f1f2f4; --muted:#9a9ea6; --line:#2c2e33; --navy:#d6d8dc; --indigo:#d6d8dc; --green:#5fd98c; --amber:#eeb152; --red:#ee8a7e; --hover:#1f2024; --btn-bg:#e9ebee; --btn-fg:#15161a; --purple:#b9a3ef; --review:#e8a55c; --amber-fill:#e8a55c; --err:#f0998d; --ok:#5fd98c; --rec:#7db0f6; --shadow:0 1px 2px rgba(0,0,0,.2),0 12px 30px rgba(0,0,0,.4); color-scheme:dark; } [data-theme="dark"] .b-review{background:#3a2c12;color:#f2b85f} [data-theme="dark"] .b-ready{background:#1e2e4a;color:#8bb4f2} [data-theme="dark"] .b-approved{background:#18402a;color:#6edb94} [data-theme="dark"] .b-approv-y{background:#3a3010;color:#f0d060} [data-theme="dark"] .b-missing{background:#3f2020;color:#f3978c} [data-theme="dark"] .b-proj{background:#2b2e35;color:#cdd0d7} [data-theme="dark"] .b-up{background:#3a3414;color:#e7d271} [data-theme="dark"] .up-row td{background:#1d1e22} [data-theme="dark"] .b-mem{background:#2a2140;color:#bcaeea} [data-theme="dark"] .pill.hi{background:#18402a;color:#6edb94} [data-theme="dark"] .pill.mid{background:#3a2c12;color:#f2b85f} [data-theme="dark"] .pill.lo{background:#3f2020;color:#f3978c} [data-theme="dark"] .soa{background:#2a2013;border-color:#4a3a1e;color:#e2ab52} [data-theme="dark"] .code.flag{background:#241f14;border-color:#4a3e22} [data-theme="dark"] .code.missing{background:#2b1a1a;border-color:#4d2b2b} [data-theme="dark"] .bar{background:#2a241e} [data-theme="dark"] .step.done{background:#13271a;border-color:#2b4a35} [data-theme="dark"] .reasons li{color:#d6a85a} [data-theme="dark"] .intake .addr{background:#251f2c;border-color:#3a3350;color:#c2b6e0} [data-theme="dark"] .sidebar img{filter:invert(1) brightness(1.6)} [data-theme="dark"] #bulkbar{background:#2a2c33 !important;color:#eceef1 !important} [data-theme="dark"] #bulkbar .bsel{background:#34373f} [data-theme="dark"] input,[data-theme="dark"] select{background-color:var(--panel);color:var(--ink)} /* Coding pills (job/account/entity codes + on-charge) -- defined here in the shared stylesheet so the register, approver portal and dashboard render them identically. Account/data-chip style: rounded-rect, hairline border, left-aligned, wraps long names. On-charge reuses that shape but keeps its own colour + a hue-matched border. */ /* PILL RULE: by default a pill is a SINGLE-LINE identifier (a job/account/entity code) -- it CENTRES its icon + term (align-items:center) and never wraps, so a long unbroken code can't shatter one char per line; the table card scrolls horizontally instead. A pill that holds a descriptive NAME opts into wrapping with .wrap: it then TOP-aligns (align-items:flex-start) so the leading icon + trailing arrow stay on the first line while the text flows beneath, breaking only at word boundaries. Sized by content, no min-height. */ .codepill{display:inline-flex;align-items:center;box-sizing:border-box;font-size:11.5px;font-weight:600;border-radius:7px;padding:3px 9px;line-height:1.35;background:color-mix(in srgb,var(--ink) 5%,var(--panel));border:1px solid color-mix(in srgb,var(--ink) 22%,transparent);color:var(--ink);vertical-align:middle;white-space:nowrap;overflow-wrap:normal;max-width:100%;text-align:left} .codepill.wrap{align-items:flex-start;white-space:normal;overflow-wrap:break-word;text-align:left} /* A pill wrapped in .jlink navigates somewhere on click -- show a small "opens a page" arrow so it isn't a surprise. */ .jlink{text-decoration:none;color:inherit} .jlink .codepill{transition:border-color .14s ease} .jlink .codepill::after{content:"";display:inline-block;align-self:center;width:13px;height:1.35em;margin-left:5px;flex-shrink:0;background:currentColor;opacity:.5;-webkit-mask:url(/icons/IconArrowUpRight.svg) center/13px no-repeat;mask:url(/icons/IconArrowUpRight.svg) center/13px no-repeat;transition:opacity .14s ease,transform .2s cubic-bezier(.34,1.56,.64,1)} .jlink:hover .codepill{border-color:color-mix(in srgb,var(--btn-bg) 38%,var(--line))} .jlink:hover .codepill::after{opacity:.85;transform:translate(2.5px,-2.5px)} .ocp,.ocpill{display:inline-flex;align-items:flex-start;flex-wrap:wrap;box-sizing:border-box;font-size:10.5px;font-weight:700;border-radius:7px;padding:2px 7px;line-height:1.3;text-align:left;white-space:normal;overflow-wrap:anywhere;max-width:100%;border:1px solid color-mix(in srgb,currentColor 32%,transparent);vertical-align:middle} .ocp-yes,.ocpill{color:#0f766e;background:#ccfbf1} .ocp-no{color:var(--muted);background:var(--hover)} .ocp-rev{color:var(--review);background:color-mix(in srgb,#b45309 14%,transparent);cursor:help} .ocp-party{background:color-mix(in srgb,#f04438 14%,transparent);color:#b42318} [data-theme="dark"] .ocp-yes,[data-theme="dark"] .ocpill{background:#123b36;color:#62d6a6} [data-theme="dark"] .ocp-party{background:#3a1512;color:#f97066} .ocell{display:flex;flex-direction:column;align-items:flex-start;gap:6px;max-width:100%} *{box-sizing:border-box} html,body{margin:0;background:var(--bg);overflow-x:clip;accent-color:var(--btn-bg);-webkit-tap-highlight-color:transparent} @font-face{font-family:'Inter-fallback';src:local('Arial');ascent-override:90.2%;descent-override:22.48%;line-gap-override:0%;size-adjust:107.1%} body{font-family:'Inter','Inter-fallback',-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;letter-spacing:-0.005em; font-weight:500;color:var(--ink);-webkit-font-smoothing:antialiased;line-height:1.45;display:flex;align-items:stretch;min-height:100vh} button{font:inherit;cursor:pointer} .muted{color:var(--muted)} /* The CONTAINER never scrolls. Scrolling it moved the brand and the Dark / Sign out rail off with the nav, so on any window shorter than the full menu the bottom items sat past the fold with no visible affordance -- the sidebar read as detached from the page. The nav alone scrolls (below), which keeps the brand pinned at the top and the rail pinned at the bottom at every height. */ .sidebar{width:248px;flex-shrink:0;background:var(--panel);border-right:1px solid var(--line);display:flex;flex-direction:column;gap:5px;padding:24px 18px calc(24px + env(safe-area-inset-bottom));position:sticky;top:0;height:100dvh;overflow:hidden} /* The sidebar sits in a flex row with the main content, so animating its WIDTH re-lays-out the whole (heavy) page every frame -- that was the collapse/expand jank. Snap the width instead (one reflow) and let the labels + logo crossfade (opacity/transform, composited) carry the motion, so it reads smooth and instant rather than struggling. */ body.nav-ready .sidebar{transition:none} .sidebar .brand{display:flex;justify-content:center;margin:2px 0 0} .sidebar .brand{position:relative;transition:transform .12s ease} .sidebar .brand:active{transform:scale(.93)} /* Pressed + hover for the menu toggle. These lived in pages.py's inline style, so /ap -- which renders this same sidebar straight from THIS file -- had no pressed state at all. Shared chrome belongs in the shared stylesheet. */ .hamburger{transition:background .13s ease,border-color .13s ease,transform .09s ease} .hamburger:hover{background:var(--hover)} .hamburger:active{background:var(--hover);border-color:var(--ink);transform:scale(.92)} .sidebar .brand:hover{opacity:.72} @media(min-width:861px){ /* Left-aligned, clearing the fixed toggle at x=14..46. Centring drifted it to x=77, away from the nav items at x=18. */ body:not(.navmin) .sidebar .brand{justify-content:flex-start;padding-left:38px} } .sidebar .brand img{display:block} /* 34px, not 26. base.css is generated FROM this block, so this is the single source both renderers share -- pages.py's shell() and dashboard.html's own /ap render. An override added in pages.py alone fixed the shell pages and left every other path on 26px. */ .sidebar .brand .logo-full{height:34px;width:auto;aspect-ratio:77.9/21.9} .sidebar .brand .logo-c{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) scale(.8);height:36px;width:36px;opacity:0} body.nav-ready .sidebar .brand .logo-full{transition:opacity .12s ease .06s} body.nav-ready.navmin .sidebar .brand .logo-full{transition:opacity .08s ease} /* On EXPAND the rail's top padding snaps from 74px to 24px, which would yank the C up into the hamburger's row; killing its opacity instantly (0s) means it is already gone on that first frame -> never seen under it. */ body.nav-ready .sidebar .brand .logo-c{transition:opacity 0s,transform .1s ease} body.nav-ready.navmin .sidebar .brand .logo-c{transition:opacity .14s ease .05s,transform .19s cubic-bezier(.34,1.56,.64,1) .05s} /* The separator is its OWN element (a sibling of the logo link), so the logo's press-scale and its box height can never distort it: it stays a clean, static, inset line that floats with spacing on each side. */ .brand-sep{height:1px;background:var(--line);margin:14px 0 16px;flex-shrink:0} @keyframes brandIn{from{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:translateY(0)}} .dept{font-size:12px;font-weight:700;color:var(--muted);text-transform:none;letter-spacing:0;margin:6px 8px 18px} /* min-height:0 is the load-bearing part. A flex child will not shrink below its content height without it, so overflow-y:auto never engages and the list simply overflows the panel. */ .snav{display:flex;flex-direction:column;gap:2px;flex:1 1 auto;min-height:0;overflow-y:auto; scrollbar-width:thin;overscroll-behavior:contain} .snav::-webkit-scrollbar{width:6px} .snav::-webkit-scrollbar-thumb{background:var(--line);border-radius:99px} .snav::-webkit-scrollbar-thumb:hover{background:var(--muted)} .snav::-webkit-scrollbar-track{background:transparent} .navgrp{display:flex;flex-direction:column;gap:3px} .navgrp+.navgrp{margin-top:6px} .navgrp-h{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;font-family:inherit;font-size:13px;font-weight:700;color:var(--muted);letter-spacing:.01em;padding:9px 14px;white-space:nowrap;user-select:none;background:none;border:0;border-radius:10px;cursor:pointer;text-align:left;outline:none;transition:background .14s ease,color .12s ease,transform .09s ease} .navgrp-h:hover{background:var(--hover);color:var(--ink)} .navgrp-h:focus-visible{background:var(--hover);color:var(--ink)} .navgrp-h:active{transform:scale(.98)} .navgrp-cv{width:17px;height:17px;flex-shrink:0;background:currentColor;opacity:.7;-webkit-mask:url(/icons/IconChevronRightMedium.svg) center/contain no-repeat;mask:url(/icons/IconChevronRightMedium.svg) center/contain no-repeat;transform:rotate(90deg);transition:transform .24s cubic-bezier(.4,0,.2,1)} .navgrp.ncol .navgrp-cv{transform:rotate(0deg)} .navgrp-h .navgrp-ico{display:none} .navgrp-items{display:grid;grid-template-rows:1fr;transition:grid-template-rows .24s cubic-bezier(.4,0,.2,1)} .navgrp-inner{overflow:hidden;display:flex;flex-direction:column;gap:2px;min-height:0;opacity:1;transition:opacity .18s ease .04s} .navgrp.ncol .navgrp-items{grid-template-rows:0fr} .navgrp.ncol .navgrp-inner{opacity:0;transition:opacity .12s ease} @media(prefers-reduced-motion:reduce){.navgrp-items,.navgrp-inner,.navgrp-cv{transition:none}} /* While the rail switches between full and minimized, freeze the per-section collapse transitions so a collapsed section (e.g. Administration) snaps to its rail state instead of animating its rows open/shut under the width slide -- that double layout animation was the jerk. Section toggles still animate normally. */ body.navswitch .navgrp-items,body.navswitch .navgrp-inner{transition:none} /* During the collapse/expand toggle, freeze EVERY sidebar transition so the width, labels, logo and nav items all snap to the new state in one coordinated step -- otherwise the width changes while the logo's springy transform + the label fades run on their own timings, which reads as chaotic/glitchy. navswitch is removed two frames later, so normal hover transitions come straight back. */ body.navswitch .sidebar,body.navswitch .sidebar *{transition:none!important} .snav a{display:flex;align-items:center;gap:13px;padding:9px 14px;border-radius:10px;font-size:14px;font-weight:600;color:var(--muted);text-decoration:none;white-space:nowrap;transition:background .15s ease,color .15s ease} .snav a{transition:background .15s ease,color .15s ease,transform .09s ease} .snav a:hover{background:var(--hover);color:var(--ink)} .snav a:active{transform:scale(.97)} .snav a.on{background:var(--btn-bg);color:var(--btn-fg)} /* Labels fade in only once the rail has the width to hold them (delay), and fade out fast on collapse, so the half-clipped intermediate text never shows. Icons are untouched -> they appear/stay instantly. */ .snav a .navlbl,.navgrp-lbl{transition:opacity .1s ease .08s} .ico{display:inline-block;width:21px;height:21px;flex-shrink:0;background:currentColor;-webkit-mask:var(--i) center/contain no-repeat;mask:var(--i) center/contain no-repeat} .navtip{position:fixed;transform:translateY(-50%) translateX(-4px);background:var(--panel);color:var(--ink);border:1px solid var(--line);border-radius:9px;padding:7px 12px;font:600 13px/1.2 Inter,system-ui,sans-serif;white-space:nowrap;box-shadow:0 8px 24px rgba(0,0,0,.16);z-index:300;pointer-events:none;opacity:0;transition:opacity .12s ease,transform .12s ease} .navtip.on{opacity:1;transform:translateY(-50%) translateX(0)} /* Left-pointing caret on the tooltip. The tooltip is vertically centred on the icon (JS sets top to the icon's mid + translateY(-50%)), so a caret at top:50% points back at the icon's exact centre. */ .navtip::before{content:"";position:absolute;left:-5px;top:50%;width:9px;height:9px;background:var(--panel);border-left:1px solid var(--line);border-bottom:1px solid var(--line);transform:translateY(-50%) rotate(45deg);border-bottom-left-radius:2px} .srail{margin:auto 0 0;display:flex;flex-direction:column;gap:10px;padding:18px 0 calc(2px + env(safe-area-inset-bottom));border-top:1px solid var(--line)} .srail .addr{font-size:12px;font-weight:600;color:var(--muted);line-height:1.55} .srail .addr b{color:var(--navy);font-weight:700;font-size:12.5px} .themebtn{background:none;border:1px solid var(--line);border-radius:8px;padding:8px 12px;font-size:13px;font-weight:600;color:var(--muted);cursor:pointer;width:fit-content;display:inline-flex;align-items:center;gap:8px;white-space:nowrap;transition:background .15s ease,color .15s ease,border-color .15s ease,transform .09s ease} .themebtn:hover{background:var(--hover);color:var(--ink);border-color:var(--btn-bg)} .themebtn:active{transform:scale(.96)} .signout{background:none;border:1px solid var(--line);border-radius:8px;padding:8px 14px;font-size:13px;font-weight:600;color:var(--muted);text-decoration:none;width:fit-content;display:inline-flex;align-items:center;gap:8px;white-space:nowrap;transition:background .15s ease,color .15s ease,border-color .15s ease,transform .09s ease} .signout:hover{background:var(--hover);color:var(--ink);border-color:var(--btn-bg)} .signout:active{transform:scale(.96)} .content{flex:1;min-width:0;display:flex;flex-direction:column} /* Minimized rail is a DESKTOP-only concept. Below the drawer breakpoint the nav is the full slide-out (wordmark + labels), so navmin must not leak into the mobile drawer. */ @media(min-width:861px){ /* The nav list scrolls inside the rail (brand + theme/sign-out stay put); a stable gutter + a thin styled scrollbar means collapsing a section never shifts the layout or flashes the default browser scrollbar. */ .sidebar{overflow:hidden} .sidebar .brand{flex-shrink:0} .snav{flex:1 1 auto;min-height:0;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;scrollbar-gutter:stable;scrollbar-width:thin;scrollbar-color:color-mix(in srgb,var(--ink) 22%,transparent) transparent} .snav::-webkit-scrollbar{width:10px} .snav::-webkit-scrollbar-thumb{background:color-mix(in srgb,var(--ink) 20%,transparent);border-radius:8px;border:3px solid transparent;background-clip:padding-box} .snav:hover::-webkit-scrollbar-thumb{background:color-mix(in srgb,var(--ink) 32%,transparent);background-clip:padding-box} .snav::-webkit-scrollbar-track{background:transparent} .srail{flex:0 0 auto} body.navmin .snav{scrollbar-gutter:auto} body.navmin .sidebar{width:64px;padding:74px 0 calc(22px + env(safe-area-inset-bottom));align-items:center;overflow:hidden;gap:2px} body.navmin .sidebar .brand{display:flex;justify-content:center;width:100%;height:36px;margin:0 0 0} body.navmin .brand-sep{width:26px;margin:10px auto 12px} body.navmin .sidebar .brand .logo-full{opacity:0} body.navmin .sidebar .brand .logo-c{opacity:1;transform:translate(-50%,-50%) scale(1)} body.navmin .snav{width:100%;align-items:center;gap:7px} body.navmin .navgrp{width:100%;align-items:center;gap:7px;padding:9px 0} /* In the rail the section HEADER icon is dropped: each section's own item icons already carry icons, so showing a header icon on top just pushed single-item sections (e.g. Employee portal) into the top half. Items show centred between the separators instead. Sections are force-shown here since there's no header to toggle them. */ body.navmin .navgrp-h{display:none} body.navmin .navgrp-lbl{font-size:0;opacity:0;transition:opacity .05s ease} body.navmin .snav a .navlbl{opacity:0;transition:opacity .05s ease} body.navmin .navgrp-cv{display:none} body.navmin .navgrp-ico{display:block;width:21px;height:21px;opacity:.55} body.navmin .navgrp-h:hover .navgrp-ico{opacity:.95} body.navmin .navgrp-items{width:100%;grid-template-rows:1fr!important} body.navmin .navgrp-inner{align-items:center;gap:7px;opacity:1!important} body.navmin .navgrp+.navgrp{margin-top:0;border-top:1px solid var(--line)} body.navmin .snav a{justify-content:center;font-size:0;gap:0;padding:11px 0;width:44px;margin:0 auto} body.navmin .srail{width:100%;margin:auto 0 0;padding:14px 0 calc(2px + env(safe-area-inset-bottom));align-items:center} body.navmin .srail .addr{display:none} body.navmin .srail .themebtn,body.navmin .srail .signout{font-size:0;gap:0;padding:9px;width:auto;justify-content:center} } #navtoggle{position:fixed;left:14px;top:20px;z-index:200;width:32px;height:32px;border-radius:8px;border:1px solid var(--line);background:var(--panel);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:left .2s,transform .09s ease,background .13s ease}#navtoggle:hover{background:var(--hover)}#navtoggle:active{transform:scale(.85)} #navtoggle::before{content:"";width:15px;height:1.6px;background:var(--ink);box-shadow:0 5px 0 var(--ink),0 -5px 0 var(--ink)} body.navmin #navtoggle{left:16px} @media(max-width:860px){#navtoggle{display:none}} .topbar{display:flex;justify-content:flex-end;align-items:center;gap:10px;padding:13px 24px;border-bottom:1px solid var(--line);background:var(--panel)} .fwd{background:var(--btn-bg);color:var(--btn-fg);border:1px solid var(--btn-bg);border-radius:10px;padding:9px 15px;font-size:14px;font-weight:600;transition:.2s var(--spring)} .fwd:hover{filter:brightness(.94)} .fwd:active{transform:scale(.96)} .stats{display:flex;gap:14px;padding:18px 24px 4px;flex-wrap:wrap} .stat{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:12px 16px;min-width:130px;box-shadow:var(--shadow)} .stat .n{font-size:25px;font-weight:700;letter-spacing:-.02em} .stat .l{font-size:12px;color:var(--muted);margin-top:2px;font-weight:600;white-space:nowrap} .stat.rev .n{color:var(--amber)} .stat.app .n{color:var(--green)} main{display:grid;grid-template-columns:minmax(400px,1fr) minmax(420px,1.05fr);gap:18px;padding:14px 24px 40px;align-items:start} @media(max-width:1160px){main{grid-template-columns:1fr}} .hamburger{display:none;align-items:center;justify-content:center;width:34px;height:34px;border:1px solid var(--line);border-radius:9px;background:var(--panel);cursor:pointer;flex-shrink:0} .hamburger span{display:block;width:15px;height:2px;background:var(--ink);position:relative} .hamburger span::before,.hamburger span::after{content:"";position:absolute;left:0;width:15px;height:2px;background:var(--ink)} .hamburger span::before{top:-5px}.hamburger span::after{top:5px} .mtop{display:none} [data-theme="dark"] .mtop .mlogo{filter:invert(1) brightness(1.6)} @media(max-width:860px){.mtop{display:flex;align-items:center;gap:13px;padding:max(10px,env(safe-area-inset-top)) 16px 10px;border-bottom:1px solid var(--line);background:var(--panel);position:sticky;top:0;z-index:45}.mtop .mlogo{height:32px;display:block}.mtop .hamburger{margin:0}} .scrim{display:none} .navclose{display:none} @media(max-width:860px){ .sidebar{position:fixed;left:0;top:0;width:250px;height:100dvh;z-index:60;transform:translateX(-100%);transition:transform .25s var(--spring);padding:14px 18px calc(22px + env(safe-area-inset-bottom));overflow-y:auto} .sidebar .brand{justify-content:flex-start;padding-left:45px;margin:0 0 26px} /* The drawer is 250px wide with 14px nav labels; 34px left the wordmark looking undersized against them. 38px reads at the same weight as the menu it heads. */ .sidebar .brand .logo-full{height:38px} .sidebar.open{transform:translateX(0)} .navclose{display:flex;align-items:center;justify-content:center;position:absolute;top:10px;left:16px;width:34px;height:34px;border:1px solid var(--line);border-radius:9px;background:var(--bg);cursor:pointer;z-index:2;transition:transform .09s ease,background .13s ease} .navclose:hover{background:var(--hover)} .navclose:active{transform:scale(.9)} .navclose span{position:absolute;width:15px;height:2px;border-radius:2px;background:var(--ink);transition:transform .33s var(--spring)} .navclose span:first-child{transform:translateY(-4px)} .navclose span:last-child{transform:translateY(4px)} .sidebar.open .navclose span:first-child{transform:rotate(45deg)} .sidebar.open .navclose span:last-child{transform:rotate(-45deg)} .hamburger{display:inline-flex} .scrim{display:block;position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:55;opacity:0;pointer-events:none;transition:opacity .25s} .scrim.on{opacity:1;pointer-events:auto} .phead{padding:14px 14px 0;flex-wrap:wrap} .quickbar{padding:10px 14px 0;justify-content:flex-start} .stats{padding:12px 14px 0;gap:8px} .stat{min-width:0;flex:1 1 28%} main{padding:12px 14px 30px} .dhead{flex-wrap:wrap} .card{overflow-x:auto} /* In the slide-out drawer the theme + sign-out controls fill the width like the nav items above them, instead of sitting as small fit-content pills with dead space to their right. */ .srail .themebtn,.srail .signout{width:100%;box-sizing:border-box;justify-content:flex-start} } .col{background:var(--panel);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow);overflow:hidden} #list{max-height:calc(100dvh - 250px);overflow-y:auto} .dtabs{display:flex;gap:6px;padding:6px 22px 2px} .dtab{background:none;border:0;border-bottom:2px solid transparent;padding:7px 2px;margin-right:16px;font-size:13px;font-weight:700;color:var(--muted);cursor:pointer;transition:color .15s ease,border-color .15s ease} .dtab:hover{color:var(--ink)} .dtab.on{color:var(--ink);border-bottom-color:var(--btn-bg)} .future{margin:0 22px 14px;background:#fff7ed;border:1px solid #fcdcb6;border-radius:10px;padding:11px 14px} [data-theme="dark"] .future{background:#2a2013;border-color:#4a3a1e} .future-h{font-size:12px;font-weight:700;letter-spacing:.02em;color:#b45309;display:flex;align-items:center;gap:6px;margin-bottom:5px} [data-theme="dark"] .future-h{color:#e2ab52} .future-h .bico{width:13px;height:13px;background:currentColor;-webkit-mask:var(--m) center/contain no-repeat;mask:var(--m) center/contain no-repeat;display:inline-block} .future ul{margin:0;padding-left:18px;font-size:13px;line-height:1.6;color:var(--ink)} .tabs{display:flex;gap:7px;padding:15px 16px;border-bottom:1px solid var(--line);flex-wrap:wrap;align-items:center;row-gap:9px} .tab{border:1px solid var(--line);background:var(--panel);border-radius:999px;padding:6px 13px;font-size:13px;font-weight:600;color:var(--muted);transition:.15s} .tab.on{background:var(--btn-bg);color:var(--btn-fg);border-color:var(--btn-bg)} .tab:hover:not(.on){border-color:var(--btn-bg);color:var(--navy)} .row{display:grid;grid-template-columns:1fr auto;gap:6px 12px;padding:14px 16px;border-bottom:1px solid var(--line);cursor:pointer;transition:background .15s} .row:hover{background:var(--hover)} .row.sel{background:var(--hover)} .row .sup{font-weight:700;font-size:15px} .row .sub{color:var(--muted);font-size:12px;margin-top:2px} .row .amt{font-weight:700;text-align:right;white-space:nowrap} .row .tags{grid-column:1/3;display:flex;gap:7px;flex-wrap:wrap;margin-top:3px} html{scrollbar-gutter:stable} .badge{font-size:12px;font-weight:700;border-radius:7px;padding:5px 9px;min-height:24px;box-sizing:border-box;white-space:nowrap;display:inline-flex;align-items:center;gap:5px;vertical-align:middle;border:1px solid color-mix(in srgb,currentColor 26%,transparent)} .b-review{background:#fef3e6;color:#a85a06} .b-ready{background:#eaf1fe;color:#1f4fa8} .b-approved{background:#e7f6ec;color:#137a37} .b-approv-y{background:#fdf3c3;color:#8a6400} .b-missing{background:#fde7e7;color:#b42318} .b-proj{background:#eef2f7;color:#3a4658} .b-mem{background:#efeaff;color:#5a40c6} .b-up{background:#fff3d6;color:#8a6418} .up-row td{background:#fffaf0} .phead{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;padding:26px 24px 0} .phead h1{font-size:23px;font-weight:700;letter-spacing:-.02em;margin:0 0 3px} .phead .lead{color:var(--muted);font-size:13px;font-weight:600;max-width:620px;margin:0} .lastupd{font-size:12px;white-space:nowrap;padding-top:7px} .quickbar{display:flex;gap:10px;padding:14px 24px 0;justify-content:flex-end;flex-wrap:wrap} .col{position:relative} .col.drag{box-shadow:0 0 0 2px var(--btn-bg) inset, var(--shadow)} .drophint{display:none;position:absolute;inset:0;z-index:40;flex-direction:column;align-items:center;justify-content:center;gap:14px;background:color-mix(in srgb,var(--panel) 92%,transparent);font-size:14px;font-weight:700;color:var(--ink);pointer-events:none;text-align:center;padding:24px} .col.drag .drophint{display:flex} .dropico{width:38px;height:38px;background:var(--btn-bg);-webkit-mask:url(/icons/folder-upload.svg) center/contain no-repeat;mask:url(/icons/folder-upload.svg) center/contain no-repeat} .empty{padding:60px 24px;text-align:center;color:var(--muted)} .detail{padding:0} .dhead{padding:20px 22px 8px;display:flex;justify-content:space-between;gap:16px;align-items:center} .dhead .sup{font-size:20px;font-weight:700;letter-spacing:-.01em} .dhead .meta{color:var(--muted);font-size:13px;margin-top:3px} .dhead .amt{font-size:24px;font-weight:700;text-align:right;white-space:nowrap} .dhead .amt small{display:block;font-size:12px;font-weight:600;color:var(--muted)} .soa{margin:6px 22px 0;background:#fff7ed;border:1px solid #fcdcb6;color:#b45309;border-radius:10px;padding:8px 12px;font-size:13px;font-weight:600} .sec{padding:14px 22px;border-top:1px solid var(--line);margin-top:12px} .sec h4{margin:0 0 10px;font-size:13px;letter-spacing:.01em;color:var(--ink);font-weight:700} details.disc{border-top:1px solid var(--line);padding:13px 22px} details.disc>summary{list-style:none;cursor:pointer;font-size:13px;letter-spacing:.01em;color:var(--ink);font-weight:700;display:flex;justify-content:space-between;align-items:center} details.disc>summary::-webkit-details-marker{display:none} details.disc>summary::after{content:'';width:16px;height:16px;flex-shrink:0;background:var(--muted);-webkit-mask:url(/icons/chevron-right.svg) center/contain no-repeat;mask:url(/icons/chevron-right.svg) center/contain no-repeat;transition:transform .2s} details.disc[open]>summary::after{transform:rotate(90deg)} details.disc>div,details.disc>ul{margin-top:10px} .code{padding:9px 11px;border:1px solid var(--line);border-radius:10px;margin-bottom:7px} .code.flag{border-color:#f6dcae;background:#fffaf2} .code.missing{border-color:#f3c2c2;background:#fff5f5} .code .lab{font-size:12px;font-weight:700;color:var(--muted);display:flex;justify-content:space-between;align-items:center;gap:10px} .code .val{font-size:13.5px;font-weight:700;margin-top:3px;word-break:break-word;line-height:1.4} .pill{font-size:12px;font-weight:700;padding:2px 8px;border-radius:7px;display:inline-flex;align-items:center;flex-wrap:wrap;white-space:normal;overflow-wrap:anywhere;max-width:100%;border:1px solid color-mix(in srgb,currentColor 26%,transparent)} .pill.hi{background:#e7f6ec;color:#137a37}.pill.mid{background:#fdf0dc;color:#a85a06}.pill.lo{background:#fde7e7;color:#b42318} .bar{height:3px;border-radius:3px;background:#eef0f3;margin-top:6px;overflow:hidden} .bar i{display:block;height:100%;border-radius:4px;transition:width .6s var(--spring)} /* Slim pills at narrow widths — trim padding/font/line-height only, keep rounded shape + colours (desktop untouched). Placed after the base rules so source order wins. */ @media(max-width:860px){ .badge{font-size:11px;padding:1px 8px;line-height:1.45;gap:4px} .pill{font-size:11px;padding:1px 7px;line-height:1.45} } .resolve{display:flex;gap:8px;margin-top:10px;flex-wrap:wrap} select,.btn{border:1px solid var(--line);background:var(--panel);border-radius:9px;padding:9px 12px;font-size:14px;font-weight:600;color:var(--ink)} select{min-width:160px;-webkit-appearance:none;appearance:none;height:32px;padding:0 32px 0 11px;border:1px solid var(--line);border-radius:8px;background-color:var(--bg);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none' stroke='%239aa0a6' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 11px center;font:inherit;font-size:12px;font-weight:500;color:var(--ink);cursor:pointer;transition:border-color .15s ease,box-shadow .15s ease} select:hover{border-color:color-mix(in srgb,var(--ink) 28%,var(--line))} select:focus,select:focus-visible{outline:none;border-color:var(--btn-bg);box-shadow:0 0 0 3px color-mix(in srgb,var(--btn-bg) 13%,transparent)} select:focus{outline:none;border-color:var(--btn-bg);box-shadow:0 0 0 3px color-mix(in srgb,var(--btn-bg) 13%,transparent)} /* text-decoration AND display belong on the BASE rule, not per call site: .btn is used on both