:root{
    /* spacing scale, everything below uses these instead of ad hoc numbers */
    --s1:4px;--s2:8px;--s3:12px;--s4:16px;--s5:24px;--s6:32px;--s7:48px;--s8:64px;

    /* Vertical rhythm by relationship, not by taste. Things that belong together
       sit at a tighter tier than things that do not, which is what tells the eye
       where one idea stops and the next starts. */
    --gap-tight:4px;    /* a control and its hint: one object */
    --gap-pair:6px;     /* a label and the thing it labels */
    --gap-field:20px;   /* one field to the next inside a section */
    --gap-block:32px;   /* a heading block to the content it introduces */
    --gap-region:44px;  /* one region of a page to the next */

    --blue:#1b2cf8;--blue-d:#1120c9;--tint:#eef1ff;
    --bg:#f6f7fb;--card:#fff;--txt:#0b0b12;--txt-2:#454b5a;--mut:#616875;--bord:#e8e9f1;--bord-2:#f1f2f7;
    --green:#15803d;--green-bg:#e6f7ec;--red:#dc2626;--red-bg:#fdeaea;--amber:#a35a06;--amber-bg:#fdf3e3;
    --shadow:0 1px 2px rgba(16,24,40,.04);--shadow-l:0 12px 32px rgba(16,24,40,.14);
    --r:14px;--sp:20px}
  *{box-sizing:border-box;margin:0;padding:0}
  html{-webkit-text-size-adjust:100%}
  body{font-family:'Poppins','Segoe UI',system-ui,sans-serif;background:var(--bg);color:var(--txt);
    font-size:14px;line-height:1.55;overflow-x:hidden;touch-action:manipulation;
    -webkit-tap-highlight-color:rgba(27,44,248,.12)}
  svg{flex:none}
  img{max-width:100%}
  .hidden{display:none!important}
  :focus-visible{outline:3px solid #8f9bff;outline-offset:2px;border-radius:8px}
  @media (prefers-reduced-motion: reduce){
    *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;
      transition-duration:.01ms!important}
  }
  /* ---------------- login ---------------- */
  #login{min-height:100vh;display:flex;align-items:center;justify-content:center;flex-direction:column;
    background:var(--blue);position:relative;padding:24px}
  .brandmark{position:absolute;top:28px;left:32px;color:#fff;font-weight:900;font-size:22px;letter-spacing:.5px}
  .login-card{width:620px;max-width:94vw;text-align:center;color:#fff}
  .login-card h1{font-size:clamp(32px,6vw,58px);font-weight:900;line-height:1.03;margin-bottom:10px;
    letter-spacing:-1.4px;text-wrap:balance}
  .login-card p{color:rgba(255,255,255,.86);margin-bottom:var(--gap-region);font-size:16px}
  .pill{background:#fff;color:var(--blue);border:none;border-radius:999px;padding:17px 36px;font-size:16px;
    font-weight:700;cursor:pointer;display:inline-flex;align-items:center;gap:11px;font-family:inherit;
    transition:transform .14s,box-shadow .14s}
  .pill:hover{transform:translateY(-2px);box-shadow:0 12px 28px rgba(0,0,0,.2)}
  /* ---------------- buttons ---------------- */
  .btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;border:none;border-radius:10px;
    padding:10px 16px;font-size:13.5px;font-weight:600;cursor:pointer;font-family:inherit;line-height:1.2;
    transition:background-color .14s,border-color .14s,color .14s,box-shadow .14s}
  .btn:disabled{opacity:.55;cursor:default}
  .btn-primary{background:var(--blue);color:#fff}.btn-primary:hover{background:var(--blue-d)}
  .btn-outline{background:#fff;color:var(--txt-2);border:1px solid var(--bord)}
  .btn-outline:hover{background:#f7f8fc;border-color:#d3d6e6;color:var(--txt)}
  .btn-green{background:var(--green);color:#fff}.btn-green:hover{background:#12692f}
  .btn-red{background:var(--red);color:#fff}.btn-red:hover{background:#b91c1c}
  .btn-ghost-red{background:#fff;color:var(--red);border:1px solid #f2cfcf}.btn-ghost-red:hover{background:#fff6f6}
  .btn-save{background:#eef0f5;color:var(--mut);cursor:default}
  .btn-save.dirty{background:var(--amber);color:#fff;cursor:pointer;box-shadow:0 0 0 3px rgba(180,83,9,.18)}
  .btn-save.dirty:hover{background:#8f4806}
  tr.dirty td{background:#fffaf0}
  .unsaved{font-size:11.5px;color:var(--amber);font-weight:700;align-self:center;white-space:nowrap}
  .btn-sm{padding:8px 13px;font-size:13px}
  .w100{width:100%}
  #submit-btn{margin-top:var(--gap-block)}
  input,textarea,select{width:100%;padding:11px 13px;border:1px solid var(--bord);border-radius:10px;
    font-size:14px;font-family:inherit;background:#fff;color:var(--txt);
    transition:border-color .14s,box-shadow .14s}
  input:hover,textarea:hover,select:hover{border-color:#d3d6e6}
  input:focus,textarea:focus,select:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(27,44,248,.13)}
  ::placeholder{color:#8c93a1}
  /* ---------------- shell ----------------
     A fixed rail beside a scrolling page. The rail is the only navigation, so
     it does not scroll away with the content the way the old top bar did. */
  #app{--rail-lg:250px;--rail-sm:76px;--rail:var(--rail-lg)}
  #app.sb-collapsed{--rail:var(--rail-sm)}
  #sidebar{position:fixed;top:0;left:0;bottom:0;width:var(--rail);background:#fff;
    border-right:1px solid var(--bord);display:flex;flex-direction:column;z-index:60;
    transition:width .18s ease;overflow:hidden}
  .shell{margin-left:var(--rail);transition:margin-left .18s ease;min-height:100vh}
  .scrim{position:fixed;inset:0;background:rgba(11,13,30,.45);z-index:55;border:none}

  /* The identity block owns this row outright. Sharing it with the collapse
     control meant a 34px circle, two lines of text and a button competing for
     76px once the rail shrank, and they overlapped. */
  .sb-head{display:flex;align-items:center;gap:11px;padding:var(--s5) var(--s4);flex:none;
    border-bottom:1px solid var(--bord-2);min-height:88px}
  .avatar{width:36px;height:36px;border-radius:50%;background:var(--blue);color:#fff;flex:none;
    display:flex;align-items:center;justify-content:center;font-weight:800;font-size:14.5px}
  .sb-id{display:flex;flex-direction:column;gap:3px;min-width:0;flex:1;line-height:1.3}
  .sb-id .em{font-weight:700;font-size:13px;color:var(--txt);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

  /* min-height:0 is what actually lets this shrink. A flex item defaults to
     min-height:auto, so nav refused to go below its content height and pushed
     the footer past the bottom of a fixed, overflow-hidden sidebar, which is
     why Sign out was clipped off the screen. */
  nav{display:flex;flex-direction:column;gap:2px;padding:var(--s4) var(--s3);
    flex:1 1 auto;min-height:0;overflow-y:auto}
  .sb-foot{padding:var(--s3) var(--s3) var(--s4);border-top:1px solid var(--bord-2);flex:none;
    display:flex;flex-direction:column;gap:3px;background:#fff}
  .sb-toggle{color:var(--mut)}
  .sb-item{display:flex;align-items:center;gap:11px;width:100%;padding:10px 12px;border-radius:10px;
    border:none;background:none;cursor:pointer;font:inherit;font-size:13.5px;font-weight:600;
    color:var(--mut);text-align:left;text-decoration:none;white-space:nowrap;
    transition:background-color .14s,color .14s}
  .sb-item:hover{background:#f2f3f8;color:var(--txt)}
  .sb-item.active{background:var(--tint);color:var(--blue)}
  .sb-lbl{flex:1;overflow:hidden;text-overflow:ellipsis}
  .sb-badge{display:none;min-width:20px;height:20px;padding:0 6px;border-radius:999px;background:var(--red);
    color:#fff;font-size:11px;font-weight:800;align-items:center;justify-content:center;flex:none}
  .sb-badge.on{display:flex}
  /* Collapsed: icons only, with the label as a tooltip so the rail stays usable */
  .sb-collapsed #sidebar .sb-lbl,
  .sb-collapsed #sidebar .sb-id{display:none}
  .sb-collapsed #sidebar .sb-head{justify-content:center;padding:var(--s5) var(--s2)}
  .sb-collapsed #sidebar .sb-item{justify-content:center;padding:11px 0}
  .sb-collapsed #sidebar .sb-badge{position:absolute;transform:translate(14px,-11px);min-width:17px;height:17px;
    font-size:10px;padding:0 4px}
  .sb-collapsed #sidebar .sb-item[data-lbl]{position:relative}
  .sb-collapsed #sidebar .sb-item[data-lbl]:hover::after{content:attr(data-lbl);position:absolute;left:calc(100% + 10px);
    top:50%;transform:translateY(-50%);background:#12141d;color:#fff;padding:5px 10px;border-radius:7px;
    font-size:12px;font-weight:600;white-space:nowrap;z-index:70;box-shadow:var(--shadow-l)}

  /* ---------------- peek ----------------
     Hovering the collapsed rail opens it, leaving it shuts it again, so the
     labels are one movement away without giving up the width.

     It grows over the page rather than pushing it: the sidebar is already
     fixed, and the shell's margin stays pinned to the narrow rail, so nothing
     below reflows while the pointer passes across.

     Guarded by hover:hover so it never fires on a touch screen, where there is
     no such thing as hovering out again and the rail would simply stick open.

     .no-peek suppresses it for as long as the pointer stays on the rail after a
     collapse, so pressing Collapse visibly collapses rather than appearing to do
     nothing. It is dropped the first time the pointer leaves. */
  @media (hover:hover) and (min-width:901px){
    .sb-collapsed #sidebar:not(.no-peek):hover{width:var(--rail-lg);box-shadow:var(--shadow-l);z-index:65}
    .sb-collapsed #sidebar:not(.no-peek):hover .sb-lbl,
    .sb-collapsed #sidebar:not(.no-peek):hover .sb-id{display:revert}
    .sb-collapsed #sidebar:not(.no-peek):hover .sb-head{justify-content:flex-start;padding:var(--s5) var(--s4)}
    .sb-collapsed #sidebar:not(.no-peek):hover .sb-item{justify-content:flex-start;padding:10px 12px}
    .sb-collapsed #sidebar:not(.no-peek):hover .sb-badge{position:static;transform:none;min-width:20px;
      height:20px;font-size:11px}
    /* the words are back, so the tooltip that stood in for them is not needed */
    .sb-collapsed #sidebar:not(.no-peek):hover .sb-item[data-lbl]:hover::after{content:none}
  }

  .topbar{display:none;align-items:center;gap:var(--s3);height:60px;padding:0 var(--s4);background:#fff;
    border-bottom:1px solid var(--bord);position:sticky;top:0;z-index:40}
  .hamburger{background:none;border:none;color:var(--txt);cursor:pointer;padding:8px;border-radius:9px;
    display:inline-flex}
  .hamburger:hover{background:#f2f3f8}
  .logo{font-weight:900;font-size:18px;color:var(--blue);white-space:nowrap;letter-spacing:.3px}
  .logo small{color:var(--mut);font-weight:600;font-size:11px;margin-left:6px;letter-spacing:.5px}
  .rolebadge{display:inline-block;padding:1px 8px;border-radius:999px;font-size:10px;font-weight:800;
    letter-spacing:.5px;text-transform:uppercase;align-self:flex-start;margin-top:2px}
  .role-requestor{background:#eef1ff;color:#2a37c9}
  .role-team_lead{background:#e6f7ec;color:#15803d}
  .role-manager{background:#ede9fe;color:#5b21b6}
  .role-admin{background:#fdf3e3;color:#8a4a05}
  main{max-width:1500px;margin:0 auto;padding:var(--s6) var(--s6) calc(104px + env(safe-area-inset-bottom))}
  /* ---------------- page header ---------------- */
  .pagehead{margin-bottom:var(--s5)}
  .pagehead.row{display:flex;align-items:center;justify-content:space-between;gap:var(--s4);flex-wrap:wrap}
  .pagehead h2{font-size:20px;font-weight:800;letter-spacing:-.5px;line-height:1.2;text-wrap:balance}
  .pagehead p{color:var(--mut);font-size:13.5px;margin-top:var(--gap-tight)}
  .card{background:var(--card);border:1px solid var(--bord);border-radius:var(--r);padding:24px;
    box-shadow:var(--shadow)}
  /* ---------------- form ---------------- */
  .formcard{max-width:760px;margin:0 auto;padding:34px}
  .fsec{padding:var(--s5) 0;border-top:1px solid var(--bord-2)}
  .fsec:first-of-type{padding-top:0;border-top:none}
  .frow{margin-bottom:var(--gap-field)}
  .frow:last-child{margin-bottom:0}
  .frow label{display:block;font-weight:600;margin-bottom:var(--gap-pair);font-size:13px}
  .frow .opt-req{color:var(--mut);font-weight:400}
  .hint{color:var(--mut);font-size:12.5px;margin-top:var(--gap-tight)}
  /* a rejection of what was just typed, so it sits with the field, not floating */
  .fielderr{color:#b91c1c;font-size:12.5px;font-weight:600;margin-top:var(--gap-pair);
    background:#fdeaea;border:1px solid #f3c4c4;border-radius:6px;padding:7px 10px}
  .seg{display:flex;flex-wrap:wrap;gap:8px}
  .seg button{padding:11px 18px;border:1px solid var(--bord);background:#fff;border-radius:10px;cursor:pointer;
    font-weight:600;font-size:13px;font-family:inherit;color:var(--txt-2);
    transition:background-color .14s,border-color .14s,color .14s}
  .seg button:hover{border-color:#b9c0f7;background:#fafbff;color:var(--txt)}
  .seg button.sel{background:var(--blue);border-color:var(--blue);color:#fff}
  .grid2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
  .car-res{border:1px solid var(--bord);border-radius:11px;margin-top:6px;max-height:240px;overflow:auto;
    background:#fff;position:absolute;width:100%;z-index:20;box-shadow:var(--shadow-l);overscroll-behavior:contain}
  .car-res div{padding:12px 13px;cursor:pointer;border-bottom:1px solid var(--bord-2);font-size:13px}
  .car-res div:last-child{border-bottom:none}
  .car-res div:hover{background:var(--tint)}
  .car-pick{background:var(--tint);border-radius:11px;padding:13px 14px;display:flex;justify-content:space-between;
    align-items:center;gap:10px;font-size:13.5px;flex-wrap:wrap;overflow-wrap:anywhere}
  .tagbox{position:relative}
  .tagbox input{padding-right:40px}
  .tagbtn{position:absolute;top:0;right:0;height:100%;width:38px;border:none;background:none;cursor:pointer;
    color:var(--mut);display:flex;align-items:center;justify-content:center;border-radius:0 10px 10px 0}
  .tagbtn:hover{color:var(--txt)}
  .tag-panel{position:absolute;top:calc(100% + 5px);left:0;right:0;z-index:30;background:#fff;
    border:1px solid var(--bord);border-radius:11px;box-shadow:var(--shadow-l);max-height:260px;overflow:auto;
    overscroll-behavior:contain}
  .tag-panel div{padding:12px 13px;font-size:13.5px;cursor:pointer;border-bottom:1px solid var(--bord-2)}
  /* Two level picker. The panel lists categories; the parts inside sit in a
     flyout that opens on hover, or inline when the row is tapped on a touch
     screen, which has no hover to give. */
  .tag-cat-row{position:relative;display:flex;align-items:center;justify-content:space-between;
    font-weight:600}
  .tag-cat-row .arr{color:var(--mut);font-size:16px;line-height:1}
  .tag-cat-row .tag-sub{display:none;padding:0;border:none}
  .tag-panel .in-cat{float:right;color:var(--mut);font-size:11.5px;font-weight:400}
  @media (hover:hover){
    .tag-cat-row:hover{background:#eef1f8}
    .tag-cat-row:hover .tag-sub{display:block;position:absolute;left:100%;top:-1px;min-width:210px;
      max-height:280px;overflow:auto;background:#fff;border:1px solid var(--bord);
      border-radius:10px;box-shadow:var(--shadow-l);z-index:5}
    /* the last categories would open off the bottom, so they rise instead */
    .tag-cat-row:nth-last-child(-n+3):hover .tag-sub{top:auto;bottom:-1px}
  }
  /* tapped open, the parts sit underneath rather than beside */
  .tag-cat-row.open .tag-sub{display:block;position:static;background:#fbfbfe;
    margin:6px -13px -12px;border-top:1px solid var(--bord-2)}
  .tag-cat-row.open .arr{transform:rotate(90deg)}
  .tag-sub div{font-weight:400;padding-left:26px}
  .item-card{border:1px solid var(--bord);border-radius:12px;padding:18px;margin-bottom:var(--gap-field);background:#fbfbfe;
    position:relative}
  .item-card:last-child{margin-bottom:var(--s3)}
  .item-card .itemno{font-size:11px;font-weight:800;color:var(--mut);letter-spacing:.7px;text-transform:uppercase;
    margin-bottom:var(--s3)}
  .item-card .del{position:absolute;top:11px;right:11px;background:none;border:none;color:var(--mut);cursor:pointer;
    display:inline-flex;padding:7px;border-radius:9px;transition:background-color .14s,color .14s}
  .item-card .del:hover{background:var(--red-bg);color:var(--red)}
  .thumbs{display:flex;gap:9px;flex-wrap:wrap;margin-top:var(--s2)}
  .thumb{position:relative;display:inline-flex;line-height:0}
  .thumb img{width:62px;height:62px;object-fit:cover;border-radius:9px;border:1px solid var(--bord)}
  .thumb .tx{position:absolute;top:-7px;right:-7px;width:22px;height:22px;border-radius:50%;border:1px solid var(--bord);
    background:#fff;color:var(--txt-2);cursor:pointer;display:flex;align-items:center;justify-content:center;
    box-shadow:var(--shadow);transition:background-color .14s,color .14s}
  .thumb .tx:hover{background:var(--red);color:#fff;border-color:var(--red)}
  /* ---------------- request table ----------------
     One white panel per table, rounded, with the rules running only between
     rows. The dense grid of borders the old table used made every cell shout
     equally; letting the rows breathe puts the emphasis back on the content. */
  .panel{background:#fff;border:1px solid var(--bord);border-radius:var(--r);box-shadow:var(--shadow);
    overflow:hidden}
  /* The table is wider than the panel and always will be, so the bar that says
     so has to be permanently visible. Left to the platform default it is an
     overlay that fades out, and the columns past the right edge simply look
     missing. */
  .tablewrap{overflow:auto;-webkit-overflow-scrolling:touch;
    scrollbar-width:thin;scrollbar-color:#b9c0d2 #eef0f5}
  .tablewrap::-webkit-scrollbar{height:13px;width:13px}
  .tablewrap::-webkit-scrollbar-track{background:#eef0f5;border-top:1px solid var(--bord)}
  .tablewrap::-webkit-scrollbar-thumb{background:#b9c0d2;border-radius:999px;border:3px solid #eef0f5}
  .tablewrap::-webkit-scrollbar-thumb:hover{background:#98a1b8}
  /* A list table scrolls inside its own panel rather than making the whole page
     long. Otherwise the horizontal bar lives at the bottom of a hundred rows
     and you have to scroll to the end of the list to reach it. The header is
     already sticky, so both bars stay on screen wherever you are in the data. */
  .panel-scroll .tablewrap{max-height:calc(100vh - 268px);min-height:240px}
  .panel-scroll .ctable .act{right:0}
  .ctable{width:100%;border-collapse:separate;border-spacing:0;font-size:13px;line-height:1.5}
  .ctable th,.ctable td{padding:13px 16px;text-align:left;vertical-align:middle;white-space:nowrap}
  /* Column labels sit above every value in the column, so they have to read as
     the level above them. At --mut they were lighter than the data underneath
     and the hierarchy inverted. */
  .ctable th{background:#f4f5f9;font-weight:700;color:#333a4d;font-size:11.5px;text-transform:uppercase;
    border-bottom:1px solid var(--bord);position:sticky;top:0;z-index:2;letter-spacing:.5px}
  .ctable td{border-bottom:1px solid var(--bord-2)}
  .ctable tbody > tr:last-child > td{border-bottom:none}
  .ctable td.wrap{white-space:normal;min-width:240px;max-width:420px}
  .ctable td.nw{white-space:nowrap}
  .ctable .c-id{font-weight:700}
  .ctable .c-gist{color:var(--txt-2)}
  .ctable a{color:var(--blue);text-decoration:none;font-weight:600}
  .ctable a:hover{text-decoration:underline}
  /* Actions sit at the right edge and stay there while the rest scrolls */
  .ctable .act{position:sticky;right:0;z-index:2;white-space:nowrap;text-align:right;
    background:#fff;box-shadow:-8px 0 8px -8px rgba(16,24,40,.12)}
  .ctable th.act{z-index:3;background:#f4f5f9}
  .crow{cursor:pointer}
  .crow>td{background:#fff;transition:background-color .12s}
  .crow:hover>td,.crow:hover>td.act{background:#f7f9ff}
  .utable td{vertical-align:middle}
  .note{color:var(--mut);margin-top:4px;white-space:normal;font-size:12.5px}
  .dim{color:#9aa0ab}
  .ph{margin-top:3px}
  .ph a{margin-right:6px}

  /* ---------------- status pills ----------------
     Shape first, colour second. Scanning a column for "the amber ones" is
     slower than scanning it for a word, so the word stays full length. */
  .chip{display:inline-block;padding:3px 11px;border-radius:999px;font-size:11.5px;font-weight:700;
    line-height:1.55;white-space:nowrap;border:1px solid transparent}
  .chip-quiet{background:#f2f3f8;color:var(--txt-2);border-color:var(--bord)}
  /* .s-Issued is kept only for rows exported before the rename */
  .s-Issued,.s-Pending,.s-Reopened{background:var(--amber-bg);color:#8a4a05;border-color:#f2e0c0}
  /* work has started but nothing is settled: its own colour, so it cannot be
     mistaken for either the untouched amber or the decided green */
  .s-UnderReview{background:#e4f3f8;color:#0b6a86;border-color:#c2e3ef}
  .s-Escalated{background:#f1ebff;color:#5b21b6;border-color:#e0d5fb}
  .s-PartiallyDecided{background:#e9edff;color:#2a37c9;border-color:#d3daff}
  .s-Approved,.s-Closed{background:var(--green-bg);color:#136c35;border-color:#c9ecd6}
  .s-Rejected{background:var(--red-bg);color:#b91c1c;border-color:#f3cccc}
  /* substatus only: a settled request where some items went each way. Amber
     rather than green or red, because calling it either would misreport half of it. */
  .s-PartiallyApproved{background:var(--amber-bg);color:#8a4a05;border-color:#f2e0c0}

  /* ---------------- row overflow menu ---------------- */
  .rowmenu{background:none;border:none;color:var(--mut);cursor:pointer;padding:6px;border-radius:8px;
    display:inline-flex;transition:background-color .14s,color .14s}
  .rowmenu:hover{background:#eceef5;color:var(--txt)}
  .rowmenu-pop{position:fixed;z-index:320;background:#fff;border:1px solid var(--bord);border-radius:11px;
    box-shadow:var(--shadow-l);padding:5px;min-width:190px;display:flex;flex-direction:column;gap:1px}
  .rowmenu-pop a,.rowmenu-pop button{display:flex;align-items:center;gap:9px;padding:9px 11px;border-radius:8px;
    border:none;background:none;font:inherit;font-size:13px;font-weight:600;color:var(--txt-2);cursor:pointer;
    text-align:left;text-decoration:none;white-space:nowrap}
  .rowmenu-pop a:hover,.rowmenu-pop button:hover{background:#f2f3f8;color:var(--txt)}
  .rowmenu-pop .danger{color:var(--red)}
  .rowmenu-pop .danger:hover{background:var(--red-bg)}

  /* ---------------- summary ----------------
     The filters that narrow the whole page sit in one bar at the top. Controls
     that act on a single section live inside that section instead, so where a
     control sits tells you what it changes. */
  .filterbar{padding:var(--s4) var(--s5);margin-bottom:var(--s4);display:flex;flex-direction:column;gap:var(--s3)}
  .fb-row{display:flex;align-items:center;gap:var(--s4);flex-wrap:wrap}
  .fb-lbl{font-size:11.5px;font-weight:800;letter-spacing:.5px;text-transform:uppercase;color:#333a4d;
    min-width:96px}
  .fb-warn{font-size:12.5px;color:#8a4a05;font-weight:600}
  .daterange{display:inline-flex;align-items:center;gap:9px}
  .daterange input{width:auto;height:40px;padding:0 12px;font-size:13px;font-weight:600;color:var(--txt-2)}
  .daterange .to{color:var(--mut);font-size:12.5px;font-weight:600}
  .checks{display:flex;gap:var(--s3);flex-wrap:wrap;align-items:center}
  .check{display:inline-flex;align-items:center;gap:8px;cursor:pointer;font-size:13px;font-weight:600;
    color:var(--txt-2);padding:6px 12px 6px 10px;border:1px solid var(--bord);border-radius:999px;
    background:#fff;transition:border-color .14s,background-color .14s,color .14s;user-select:none}
  .check:hover{border-color:#c8cddd;color:var(--txt)}
  .check:has(input:checked){border-color:#c1c9f6;background:var(--tint);color:var(--blue)}
  .check input{width:16px;height:16px;min-height:0;margin:0;padding:0;flex:none;accent-color:var(--blue);cursor:pointer}

  .kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s3);margin-bottom:var(--s4)}
  .kpis.three{grid-template-columns:repeat(3,1fr)}
  .kpi{background:#fff;border:1px solid var(--bord);border-radius:var(--r);padding:var(--s4) var(--s5);
    box-shadow:var(--shadow);display:flex;flex-direction:column;gap:2px;min-width:0}
  .kpi-n{font-size:28px;font-weight:800;letter-spacing:-1px;line-height:1.1}
  .kpi-l{font-size:12.5px;font-weight:600;color:var(--txt-2)}
  .kpi-s{font-size:11.5px;color:var(--mut)}

  .sumgrid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:var(--s4);align-items:start}
  .sumcard{padding:var(--s5)}
  .sumhead{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);flex-wrap:wrap}
  .sumhead h3{font-size:15px;font-weight:800;letter-spacing:-.2px}
  .sumctl{display:flex;align-items:center;gap:var(--s2);flex-wrap:wrap}
  .numin{width:92px;height:40px;padding:0 12px;font-size:13px;font-weight:600;text-align:center}
  .sumsub{font-size:12.5px;color:var(--mut);margin:var(--gap-tight) 0 var(--s4)}
  .sumfoot{font-size:12px;color:var(--mut);margin-top:var(--s3)}
  .sumh4{font-size:11.5px;font-weight:800;letter-spacing:.5px;text-transform:uppercase;color:#333a4d;
    margin-bottom:var(--s3)}
  .sumsplit{display:flex;flex-direction:column;gap:var(--s5)}
  .sumsplit .checks{margin-bottom:var(--s3)}
  .empty.sm{padding:var(--s3) 0;font-size:13px}

  /* A bar is only meaningful against a fixed reference, so every row is drawn
     relative to the largest row in its own list. */
  .bars{display:flex;flex-direction:column;gap:9px}
  .bar{display:grid;grid-template-columns:minmax(90px,34%) 1fr auto;align-items:center;gap:12px}
  .bar-l{font-size:12.5px;font-weight:600;color:var(--txt-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .bar-t{height:9px;border-radius:999px;background:#eef0f5;overflow:hidden}
  .bar-t>span{display:block;height:100%;border-radius:999px;background:var(--blue);min-width:3px}
  .bar-n{font-size:12.5px;font-weight:800;color:var(--txt);min-width:28px;text-align:right;font-variant-numeric:tabular-nums}

  /* ---------------- @ mention picker ---------------- */
  .mention-pop{position:fixed;z-index:360;background:#fff;border:1px solid var(--bord);border-radius:11px;
    box-shadow:var(--shadow-l);padding:5px;min-width:240px;max-height:min(46vh,300px);overflow-y:auto;
    display:flex;flex-direction:column;gap:1px}
  .mention-pop button{display:flex;align-items:center;justify-content:space-between;gap:12px;
    padding:8px 11px;border:none;border-radius:8px;background:none;cursor:pointer;font:inherit;
    font-size:13px;text-align:left;color:var(--txt-2);white-space:nowrap}
  .mention-pop button:hover,.mention-pop button.sel{background:var(--tint);color:var(--blue)}
  .mention-pop .mh{font-weight:700}
  .mention-pop .mr{font-size:11px;color:var(--mut);text-transform:uppercase;letter-spacing:.4px}

  /* ---------------- mentions tab ---------------- */
  .mlist{display:flex;flex-direction:column;gap:var(--s2)}
  .mrow{display:block;background:#fff;border:1px solid var(--bord);border-radius:var(--r);
    padding:var(--s4) var(--s5);text-decoration:none;color:inherit;box-shadow:var(--shadow);
    transition:border-color .14s,box-shadow .14s}
  .mrow:hover{border-color:#c3caf5;box-shadow:0 6px 18px rgba(16,24,40,.1)}
  /* an unread one carries a bar down its left edge, so the eye finds the new
     ones without reading a single word */
  .mrow.unread{border-left:3px solid var(--blue);background:#fcfdff}
  .mrow-top{display:flex;align-items:center;gap:8px;margin-bottom:6px;flex-wrap:wrap}
  .mwho{font-weight:700;font-size:13.5px;color:var(--txt)}
  .mdim{font-size:12.5px;color:var(--mut)}
  .mwhen{margin-left:auto}
  .mnew{font-size:10.5px;font-weight:800;letter-spacing:.4px;text-transform:uppercase;
    background:var(--tint);color:var(--blue);border-radius:999px;padding:2px 8px}
  .mtext{font-size:13.5px;line-height:1.55;color:var(--txt-2);margin-bottom:9px;white-space:pre-wrap;
    overflow-wrap:anywhere}
  .mrow-foot{display:flex;align-items:center;gap:10px;flex-wrap:wrap;
    border-top:1px solid var(--bord-2);padding-top:9px}
  /* the handle inside the comment, with yours picked out from the rest */
  .mtag{font-weight:700;color:var(--txt-2)}
  .mtag.me{background:var(--tint);color:var(--blue);border-radius:5px;padding:0 4px}

  /* ---------------- kanban ----------------
     A second reading of the same list. Cards are links, nothing drags: status
     is what a decision produced, not a property you set by moving a card. */
  .kboard{display:flex;gap:var(--s4);overflow-x:auto;padding-bottom:var(--s3);align-items:flex-start;
    scrollbar-width:thin;scrollbar-color:#b9c0d2 transparent}
  .kboard::-webkit-scrollbar{height:12px}
  .kboard::-webkit-scrollbar-track{background:#eef0f5;border-radius:999px}
  .kboard::-webkit-scrollbar-thumb{background:#b9c0d2;border-radius:999px;border:3px solid #eef0f5}
  .kboard::-webkit-scrollbar-thumb:hover{background:#98a1b8}
  .kcol{flex:0 0 300px;background:#f2f3f8;border:1px solid var(--bord);border-radius:var(--r);
    display:flex;flex-direction:column;max-height:calc(100vh - 260px)}
  .kcol-h{padding:12px 14px;font-size:12px;font-weight:800;letter-spacing:.5px;text-transform:uppercase;
    color:#333a4d;display:flex;align-items:center;gap:8px;border-bottom:1px solid var(--bord)}
  .kcount{background:#fff;border:1px solid var(--bord);border-radius:999px;padding:1px 8px;font-size:11px;
    color:var(--txt-2);letter-spacing:0}
  .kcol-b{padding:10px;display:flex;flex-direction:column;gap:9px;overflow-y:auto}
  .kcard{display:block;background:#fff;border:1px solid var(--bord);border-radius:11px;padding:13px;
    text-decoration:none;color:inherit;box-shadow:var(--shadow);
    transition:border-color .14s,box-shadow .14s,transform .14s}
  .kcard:hover{border-color:#c3caf5;box-shadow:0 6px 18px rgba(16,24,40,.1);transform:translateY(-1px)}
  .kcard-top{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:8px}
  .kcode{font-weight:800;font-size:12.5px;color:var(--blue)}
  .kgist{font-size:13px;color:var(--txt);line-height:1.5;margin-bottom:10px;
    display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
  .kmeta{display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin-bottom:9px}
  .kfoot{display:flex;align-items:center;justify-content:space-between;gap:8px;
    border-top:1px solid var(--bord-2);padding-top:8px}
  .kdim{font-size:11.5px;color:var(--mut);font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  /* Action buttons: pills, outlined by default and filled only for the ones
     that end something. Four saturated blocks side by side read as a warning
     stripe rather than as choices. */
  .act button,.act a.btnlink,.backbtn{font:inherit;font-size:12px;font-weight:600;padding:6px 12px;margin:2px 0 2px 5px;
    border:1px solid var(--bord);border-radius:999px;cursor:pointer;background:#fff;color:var(--txt-2);
    transition:background-color .14s,border-color .14s,color .14s;white-space:nowrap}
  .act button:hover,.act a.btnlink:hover,.backbtn:hover{background:#f2f3f8;border-color:#c8cddd;color:var(--txt)}
  .act a.btnlink{display:inline-block;text-decoration:none}
  .act button.b-ok{background:var(--green);border-color:var(--green);color:#fff}
  .act button.b-ok:hover{background:#11692f;border-color:#11692f}
  .act button.b-no{background:#fff;border-color:#f0c7c7;color:#b91c1c}
  .act button.b-no:hover{background:var(--red-bg);border-color:#e5aaaa}
  .act button.b-up{background:#fff;border-color:#eed9b4;color:#8a4a05}
  .act button.b-up:hover{background:var(--amber-bg);border-color:#e5c68e}
  .act button.b-alt{background:#fff;border-color:#c9d0f7;color:var(--blue)}
  .act button.b-alt:hover{background:var(--tint);border-color:#b3bdf3}
  /* The only button on the page that starts work rather than finishing it, and
     the only way a request leaves Pending, so it is filled rather than outlined.
     It wears the colour of the status it produces, so the button and the badge
     it creates read as the same thing. */
  .act button.b-rev{display:inline-flex;align-items:center;gap:7px;padding:9px 16px;font-size:12.5px;
    font-weight:700;background:#0b6a86;border-color:#0b6a86;color:#fff;
    box-shadow:0 1px 2px rgba(11,106,134,.35)}
  .act button.b-rev:hover{background:#08556c;border-color:#08556c}
  /* The requestor's only lever on their own request, so it is filled rather
     than outlined. Amber because it is a nudge, not a decision. */
  .act button.b-remind{display:inline-flex;align-items:center;gap:7px;padding:9px 16px;font-size:12.5px;
    font-weight:700;background:#a35a06;border-color:#a35a06;color:#fff;
    box-shadow:0 1px 2px rgba(163,90,6,.32)}
  .act button.b-remind:hover:not(:disabled){background:#8a4a05;border-color:#8a4a05}
  .act button.b-remind:disabled{background:#f2f3f8;border-color:var(--bord);color:var(--mut);
    cursor:default;box-shadow:none}
  /* the reason sits beside the greyed button rather than only in a tooltip,
     because a tooltip on a disabled control is unreachable by keyboard */
  .dbar-why{font-size:12px;color:var(--mut);align-self:center;margin-left:4px}
  /* Back sits on its own line above the page title and needs room under it */
  .backbtn{display:inline-flex;align-items:center;gap:6px;padding:7px 14px;margin:0 0 var(--s5)}
  /* Request fields, three label/value pairs to a row */
  .dtable th{background:#f4f5f9;white-space:nowrap;width:1%;font-size:11px;position:static;font-weight:700;
    text-transform:uppercase;letter-spacing:.5px;color:#333a4d;border-bottom:1px solid var(--bord-2)}
  .dtable td{white-space:normal;min-width:120px}
  .dsec{font-size:13px;font-weight:700;margin:var(--gap-region) 0 var(--gap-pair)}
  .dbar{margin-top:var(--gap-block)}
  /* ---------------- toolbar ---------------- */
  /* Doubling ladder on a list page: 8px between the controls inside the toolbar,
     16px from the toolbar down to the table it acts on, 32px from the page
     heading down to the pair. Each step is twice the one below, so no two levels
     can be mistaken for each other. */
  .toolbar{display:flex;gap:var(--s2);margin-bottom:var(--s4);flex-wrap:wrap;align-items:center}
  /* A search field and a row of filter pills, the way the reference lays them
     out. Each chip is a native select underneath, so the picker, the keyboard
     and the screen reader all still behave. */
  .searchbox{position:relative;display:inline-flex;align-items:center;min-width:270px;flex:0 1 320px}
  .searchbox svg{position:absolute;left:13px;color:var(--mut);pointer-events:none}
  .searchbox input{padding-left:38px;height:40px;border-radius:10px;font-size:13.5px}
  .chipsel{display:inline-flex;align-items:center;gap:9px;height:40px;padding:0 14px;cursor:pointer;
    border:1px solid var(--bord);border-radius:10px;background:#fff;color:var(--txt-2);
    font:inherit;font-size:13px;font-weight:600;white-space:nowrap;
    transition:border-color .14s,background-color .14s,color .14s}
  .chipsel:hover{border-color:#c8cddd;color:var(--txt)}
  .chipsel svg{flex:none;pointer-events:none}
  .chiptxt{overflow:hidden;text-overflow:ellipsis;max-width:230px}
  .chipcar{width:7px;height:7px;flex:none;margin-left:2px;opacity:.6;
    border-right:1.8px solid currentColor;border-bottom:1.8px solid currentColor;
    transform:translateY(-2px) rotate(45deg)}
  .chipsel[aria-expanded="true"]{border-color:#b3bdf3;background:var(--tint);color:var(--blue)}
  /* The list we draw instead of the native popup, so the padding is ours */
  .chip-pop{position:fixed;z-index:320;background:#fff;border:1px solid var(--bord);border-radius:12px;
    box-shadow:var(--shadow-l);padding:6px;display:flex;flex-direction:column;gap:1px;
    max-height:min(60vh,420px);overflow-y:auto}
  .chip-pop button{display:flex;align-items:center;justify-content:space-between;gap:14px;
    padding:10px 13px;border-radius:8px;border:none;background:none;cursor:pointer;
    font:inherit;font-size:13px;font-weight:600;color:var(--txt-2);text-align:left;white-space:nowrap}
  .chip-pop button:hover{background:#f2f3f8;color:var(--txt)}
  .chip-pop button.sel{background:var(--tint);color:var(--blue)}
  .chip-pop svg{flex:none}
  /* a filter that is doing something says so, so a narrowed list is never a mystery */
  .chipsel.on{border-color:#c1c9f6;background:var(--tint);color:var(--blue)}
  /* List and Kanban as one control, because they are one choice */
  .segview{display:inline-flex;gap:3px;padding:3px;background:#f2f3f8;border:1px solid var(--bord);
    border-radius:11px}
  .segview button{display:inline-flex;align-items:center;gap:7px;padding:7px 13px;border:none;border-radius:8px;
    background:none;font:inherit;font-size:12.5px;font-weight:700;color:var(--mut);cursor:pointer;
    transition:background-color .14s,color .14s,box-shadow .14s}
  .segview button:hover{color:var(--txt)}
  .segview button.on{background:#fff;color:var(--txt);box-shadow:var(--shadow)}
  /* adding a user is a separate act from reading the list of them */
  .addrow{display:flex;gap:var(--s2);flex-wrap:wrap;margin:var(--s4) var(--s5) var(--s5)}
  /* Refresh sits at the far end of the toolbar, away from the filters, because
     it acts on the whole table rather than narrowing it. */
  /* Teal, because every other colour in the app is already spoken for: green
     approves, red rejects, amber escalates, blue opens. Refresh is none of those,
     so it gets its own. */
  .refreshbtn{font:inherit;font-size:12.5px;font-weight:700;padding:0 16px;height:40px;cursor:pointer;
    background:#0f766e;color:#fff;border:1px solid #0b5d57;border-radius:10px;margin-left:auto}
  .refreshbtn:hover{background:#0b5d57}
  .refreshbtn:disabled{opacity:.55;cursor:default}
  .stale{font-size:11.5px;color:var(--mut);white-space:nowrap;align-self:center}
  table{width:100%;border-collapse:collapse}
  th,td{text-align:left;padding:12px 10px;border-bottom:1px solid var(--bord-2);font-size:13px}
  th{color:var(--mut);font-size:11px;text-transform:uppercase;letter-spacing:.6px;font-weight:700}
  tr:last-child td{border-bottom:none}
  /* ---------------- feedback ---------------- */
  .toast{position:fixed;bottom:26px;left:50%;transform:translateX(-50%);background:#12141d;color:#fff;display:flex;
    align-items:center;gap:10px;padding:14px 20px;border-radius:12px;z-index:300;box-shadow:var(--shadow-l);
    font-size:13.5px;max-width:90vw;animation:tin .2s ease-out}
  @keyframes tin{from{opacity:0;transform:translate(-50%,12px)}to{opacity:1;transform:translate(-50%,0)}}
  .toast.err{background:#a51b1b}
  .toast.ok{background:#0f5132}
  .empty{padding:24px 2px;color:var(--mut)}
  .empty .big{font-size:17px;font-weight:700;color:var(--txt);margin-bottom:var(--gap-pair)}
  .empty p{margin-bottom:var(--s5)}
  .sk{background:#fff;border:1px solid var(--bord);border-radius:var(--r);padding:22px;margin-bottom:12px}
  .sk div{height:12px;border-radius:6px;background:linear-gradient(90deg,#eef0f6 25%,#f8f9fd 50%,#eef0f6 75%);
    background-size:200% 100%;animation:sh 1.4s infinite;margin-bottom:11px}
  .sk div:last-child{margin-bottom:0}
  @keyframes sh{to{background-position:-200% 0}}
  .lightbox{position:fixed;inset:0;background:rgba(6,8,20,.88);display:flex;align-items:center;justify-content:center;
    z-index:400;cursor:zoom-out;padding:24px}
  .lightbox img{max-width:100%;max-height:90vh;border-radius:12px;object-fit:contain}
  /* ---------------- modal ---------------- */
  .backdrop{position:fixed;inset:0;background:rgba(11,13,30,.55);z-index:350;display:flex;align-items:center;
    justify-content:center;padding:20px;animation:fade .16s;overscroll-behavior:contain}
  @keyframes fade{from{opacity:0}to{opacity:1}}
  .modal{background:#fff;border-radius:18px;padding:26px;width:440px;max-width:100%;box-shadow:var(--shadow-l);
    animation:pop .19s ease-out}
  @keyframes pop{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
  .modal h3{font-size:18px;font-weight:800;margin-bottom:var(--gap-pair);letter-spacing:-.3px;text-wrap:balance}
  .modal p{color:var(--mut);font-size:13.5px;line-height:1.6;margin-bottom:var(--s5);white-space:pre-line}
  .modal-wide{width:560px}
  .modal .frow{margin-bottom:var(--s4)}
  .modal .mact{display:flex;gap:9px;justify-content:flex-end;margin-top:var(--gap-block);flex-wrap:wrap}
  /* ---------------- responsive ---------------- */
  /* ---------- laptop ---------- */
  @media(max-width:1100px){
    main{padding-left:var(--s5);padding-right:var(--s5)}
  }
  /* ---------- the rail becomes a drawer ----------
     Below this there is no width to spend on a permanent column, so the
     sidebar slides in over the page and a top bar carries the way to open it. */
  @media(max-width:900px){
    #app,#app.sb-collapsed{--rail:270px}
    #sidebar{transform:translateX(-100%);transition:transform .2s ease;box-shadow:var(--shadow-l)}
    #app.sb-open #sidebar{transform:none}
    .shell{margin-left:0}
    .topbar{display:flex}
    /* the collapsed rail's icon-only rules must not leak into the drawer */
    .sb-collapsed #sidebar .sb-lbl,.sb-collapsed #sidebar .sb-id{display:revert}
    .sb-collapsed #sidebar .sb-item{justify-content:flex-start;padding:10px 12px}
    .sb-collapsed #sidebar .sb-head{justify-content:flex-start;padding:var(--s5) var(--s4)}
    .sb-collapsed #sidebar .sb-badge{position:static;transform:none;min-width:20px;height:20px;font-size:11px}
    /* the drawer is always full width, so there is nothing to collapse into */
    #sb-toggle{display:none}
    .sb-collapsed #sidebar .sb-item[data-lbl]:hover::after{content:none}
  }
  /* ---------- tablet ---------- */
  @media(max-width:860px){
    /* Only the field tier tightens. The block and region tiers hold, because
       vertical room is cheap on a page you scroll anyway, and shrinking them is
       what flattens the grouping back into a wall of evenly spaced things. */
    :root{--gap-field:16px}
    main{padding:var(--s5) var(--s5) calc(100px + env(safe-area-inset-bottom))}
    .formcard{padding:var(--s5)}
    .pagehead h2{font-size:19px}
    /* The table keeps its shape and scrolls sideways. */
    .ctable th,.ctable td{padding:11px 12px}
    .ctable td.wrap{min-width:200px}
    .dtable th{width:110px}
    .kcol{flex-basis:270px}
    .sumgrid{grid-template-columns:1fr}
    .kpis,.kpis.three{grid-template-columns:repeat(2,1fr)}
    .fb-lbl{min-width:0;flex-basis:100%}
    .tag-panel{max-height:min(50vh,260px)}
    .car-res{max-height:min(45vh,230px)}
  }
  /* ---------- phone ---------- */
  @media(max-width:640px){
    :root{--gap-field:16px}
    .grid2{grid-template-columns:1fr}
    input,textarea,select{font-size:16px;min-height:44px}          /* 44px touch targets */
    textarea{min-height:76px}
    .btn{min-height:44px}
    .btn-sm{min-height:40px;padding:9px 13px}
    .sb-item{min-height:44px}
    .brandmark{top:20px;left:20px;font-size:19px}
    .pill{width:100%;justify-content:center;min-height:52px}
    .card,.formcard{padding:var(--s5) var(--s4)}
    .item-card{padding:var(--s4)}
    .toolbar{margin-bottom:var(--s5);gap:var(--s2)}
    .seg button{flex:1 1 calc(50% - 6px);min-width:0;min-height:46px;padding:10px 8px;font-size:12.5px;text-align:center}
      .actions .btn{flex:1 1 calc(50% - 4px)}
    .toolbar{gap:8px}
    /* search takes the row, the filter pills share the next one */
    .searchbox{flex:1 1 100%;min-width:0}
    .chipsel{flex:1 1 calc(50% - 4px);min-width:0}
    .chiptxt{flex:1;min-width:0;max-width:none}
    .refreshbtn{margin-left:0;flex:1 1 100%}
    .panel-scroll .tablewrap{max-height:calc(100vh - 300px)}
    .segview{width:100%}
    .segview button{flex:1;justify-content:center;min-height:40px}
    .kcol{flex-basis:min(84vw,300px);max-height:none}
    .kpis,.kpis.three{grid-template-columns:1fr 1fr;gap:var(--s2)}
    .kpi{padding:var(--s3) var(--s4)}
    .kpi-n{font-size:23px}
    .daterange{flex:1 1 100%}
    .daterange input{flex:1;min-width:0}
    .bar{grid-template-columns:minmax(76px,42%) 1fr auto;gap:9px}
    .thumb img{width:58px;height:58px}
    .thumb .tx{width:26px;height:26px;top:-8px;right:-8px}
    .toast{left:12px;right:12px;transform:none;max-width:none;bottom:14px}
    .modal{padding:20px}
    .modal .mact .btn{flex:1}
    table td:first-child{max-width:38vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
    th,td{padding:10px 7px}
  }
  /* ---------- very small, 320px must not scroll sideways ---------- */
  @media(max-width:380px){
    main{padding-left:var(--s4);padding-right:var(--s4)}
    .chipsel{flex:1 1 100%}
    .seg button{flex:1 1 100%}
    .actions .btn{flex:1 1 100%}
    .toolbar select{flex:1 1 100%}
    .card,.formcard{padding:14px}
  }