/* =====================================================================
   ICSONE portal shell — v27
   Navy sidebar for the Staff workspace and the Customer Support portal,
   a light top bar for Student Assistance, a split sign-in page.
   Loaded after app.css; everything here is scoped to the new classes.
   ===================================================================== */
/* ------------------------------------------------------------------ *
   34.9.3 — the portal is a light portal, and every browser is told so.

   A technician on a Samsung phone opened a ticket to write a report and the
   words came out pale grey on white, barely readable. Nothing was wrong with
   the text: Samsung Internet — and Chrome on Android with the system dark
   theme on — substitute their own colours into a page that has not declared
   which scheme it was designed for. The portal set a white background on
   every box somebody types into and never set a text colour, so the browser
   supplied one from its dark palette. White box, dark-mode letters.

   `color-scheme: light` is the declaration those browsers look for, and the
   rules under it state the two colours outright rather than leaving either to
   be guessed. `-webkit-text-fill-color` is included because that is the
   property Samsung's engine actually honours when it is overriding `color`.
 * ------------------------------------------------------------------ */
:root{ color-scheme: only light; }   /* "only" is the strict form: do not auto-darken this page */
html, body { background-color: #F3F6FB; color: #10233F; }

/* Only the boxes somebody types into. Buttons are left entirely alone: they
   carry their own colours already, and `color-scheme` above is all they
   needed. Touching them here would have meant redefining every button in the
   portal from the top of the file. */
input:not([type=submit]):not([type=button]):not([type=reset]):not([type=checkbox]):not([type=radio]),
textarea, select, option {
  color: #10233F;
  -webkit-text-fill-color: #10233F;
  background-color: #fff;
}
input::placeholder, textarea::placeholder { color: #68707E; -webkit-text-fill-color: #68707E; opacity: 1; }
input:disabled, textarea:disabled, select:disabled {
  color: #5B6B80; -webkit-text-fill-color: #5B6B80; background-color: #F3F6FB; opacity: 1;
}
/* Selected text, which on the same phone came out grey on grey. */
::selection { background: #1565D8; color: #fff; -webkit-text-fill-color: #fff; }

/*
   And if the phone reports a dark preference anyway, the same two colours are
   stated again rather than left to be worked out. A browser that honours the
   declaration above never reaches this; one that half-honours it lands on
   readable text instead of on its own guess.
 */
@media (prefers-color-scheme: dark) {
  html, body { background-color: #F3F6FB; color: #10233F; }
  input:not([type=submit]):not([type=button]):not([type=reset]):not([type=checkbox]):not([type=radio]),
  textarea, select, option {
    color: #10233F; -webkit-text-fill-color: #10233F; background-color: #fff;
  }
  input::placeholder, textarea::placeholder { color: #68707E; -webkit-text-fill-color: #68707E; }

  /* ---------------------------------------------------------------- *
     36.3 — and the same again for the rest of the page.

     34.9.3 pinned the body and the boxes somebody types into, which was
     where the complaint was that week. Everything else was left to tokens
     that app.css was still swapping for a dark palette the moment the phone
     asked for one — so a card went near-black while the page behind it
     stayed light, and a heading was painted for a black page that the
     declaration above had already promised would never arrive.

     app.css no longer carries that palette. This block states the light
     values a second time anyway, after it, for the two cases where that is
     not enough on its own: a browser holding a cached copy of the old
     stylesheet through an upgrade, and an engine that half-honours
     `color-scheme` and applies its own idea of a dark page regardless.

     Stating a colour twice costs nothing. A technician who cannot read the
     box he is typing into costs a report.
   * ---------------------------------------------------------------- */
  :root{
    --bg:#F5F6F8; --surface:#FFFFFF; --surface-2:#F5F6F8; --line:#E3E6EB;
    --text:#0F1115; --dim:#5A6270; --faint:#68707E;
    --brand:#1A67D2; --brand-2:#0F4FA8; --on-brand:#FFFFFF; --brand-soft:#E5EFFC;
    --accent:#C0450F; --accent-solid:#E65420; --accent-soft:#FFF1E6;
    --ok:#127A4B; --ok-soft:#E4F5EC;
    --warn:#A85806; --warn-soft:#FFF2E2;
    --bad:#C4331D; --bad-soft:#FDEAE6;
    --info:#1A67D2; --info-soft:#E8F0FD;
  }
  /* app.css set these directly rather than through a token, so they are
     answered directly: this is the line that made "My reports" invisible. */
  h1, h2, h3, .h2 { color: #10233F; }
  /* `.card` already draws itself from --surface, which is pinned above, so
     it is left alone rather than given a second background that a tinted
     variant would then have to fight. */
  table.summary .cell.s-active   { color: #1F6FD0; }
  table.summary .cell.s-pending,
  table.summary .cell.s-info     { color: #8A6A10; }
  table.summary .cell.s-awaiting { color: #B4520E; }
  table.summary .cell.s-approved { color: #127049; }
  table.summary .cell.s-rejected { color: #A32626; }
}

:root{
  --navy:#0B2A55; --navy-2:#0F3570; --navy-3:#153F82; --navy-ink:#DCE6F5;
  --blue:#1565D8; --blue-2:#0F52B5; --sky:#EAF2FD; --sky-2:#DCEAFB;
  --page:#F3F6FB; --ink:#10233F; --muted:#5B6B80; --card:#FFFFFF; --edge:#E1E8F2;
  --s-new:#E8F0FD; --s-new-t:#1B57B5;
  --s-prog:#E3EEFD; --s-prog-t:#1F5FC7;
  --s-wait:#FFF4D6; --s-wait-t:#8A5A00;
  --s-pend:#FFF0E0; --s-pend-t:#9A4E0A;
  --s-ok:#E2F5E9; --s-ok-t:#17784A;
  --s-closed:#EDF0F4; --s-closed-t:#56627A;
  --s-bad:#FDE7E4; --s-bad-t:#B3321D;
}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:-999px;top:8px;z-index:200;background:#fff;color:var(--navy);padding:8px 14px;border-radius:8px}
.skip:focus{left:8px}
.ic{width:20px;height:20px;flex:none;display:inline-block;vertical-align:middle}

/* ---------- navy sidebar shells ---------- */
body.shell-staff,body.shell-customer{background:var(--page);display:block}
.appside{position:fixed;inset:0 auto 0 0;width:264px;z-index:80;display:flex;flex-direction:column;
  background:linear-gradient(180deg,#0E2F63 0%,#0B2A55 55%,#0A244A 100%);color:var(--navy-ink);
  box-shadow:2px 0 18px rgba(8,26,56,.18)}
.sidebrand{position:relative;padding:16px 20px 14px;margin:0 0 4px;
  background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.02));
  border-bottom:1px solid rgba(255,255,255,.10);border-radius:0 0 18px 18px}
.sidelogo{display:block}
.sidelogo img{display:block;width:100%;max-width:196px;height:auto;margin:0 auto}
.drawerclose{display:none}
/* A menu that has to scroll says so with a fade rather than a hard cut, so
   a clipped last item reads as "there is more" instead of "this is broken". */
.sidenav{flex:1 1 auto;min-height:0;overflow:auto;padding:4px 14px 14px;display:flex;flex-direction:column;
  gap:2px;scrollbar-width:thin;overscroll-behavior:contain;
  -webkit-mask-image:linear-gradient(180deg,#000 0,#000 calc(100% - 22px),transparent 100%);
  mask-image:linear-gradient(180deg,#000 0,#000 calc(100% - 22px),transparent 100%)}
.sidenav::-webkit-scrollbar{width:8px}
.sidenav::-webkit-scrollbar-thumb{background:rgba(255,255,255,.16);border-radius:8px}
.sidenav::-webkit-scrollbar-track{background:transparent}

/* ---------------------------------------------------------------- *
 * 36.38 — search, pinned at the top of the menu.
 *
 * Sticky rather than scrolled away: in a menu of four groups it would
 * otherwise be the first thing to disappear, and it is the first thing
 * somebody reaches for. A plain GET form, so it works with JavaScript off.
 * ---------------------------------------------------------------- */
.sidesearch{position:sticky;top:0;z-index:2;display:flex;align-items:center;gap:9px;margin:2px 0 6px;
  padding:9px 12px;border-radius:12px;background:rgba(6,20,44,.55);border:1px solid rgba(255,255,255,.12);
  backdrop-filter:blur(8px)}
.sidesearch .ic{width:17px;height:17px;color:#8FA8CC;opacity:.9}
.sidesearch input{flex:1;min-width:0;border:0;outline:none;color:#fff;
  font:500 14px Inter,sans-serif;padding:0;min-height:0;
  /* The page declares `color-scheme: only light`, so the browser paints its
     own widgets light — which puts a white box inside a navy pill. These
     three lines are what stop it: tell the UA this control is dark, turn
     off its native appearance, and set the background ourselves. */
  color-scheme:dark;-webkit-appearance:none;appearance:none;
  /* !important because Chromium paints its own field background here and
     wins the cascade with it; the rule above parses and applies, and the
     box is still white without this. Verified by screenshot, not by
     reasoning about specificity. */
  background:transparent!important;box-shadow:none!important}
.sidesearch input:-webkit-autofill,
.sidesearch input:-webkit-autofill:hover,
.sidesearch input:-webkit-autofill:focus{
  -webkit-text-fill-color:#fff;-webkit-box-shadow:0 0 0 1000px rgba(6,20,44,.55) inset!important;
  caret-color:#fff}
/*
 * 36.44 — the typed letters, which were invisible.
 *
 * The rule at the top of this file paints every input in the portal dark
 * navy, with both `color` and `-webkit-text-fill-color`. The box above set
 * `color:#fff` and lost, and the reason is worth writing down because it is
 * not obvious: that rule's selector is
 *
 *   input:not([type=submit]):not([type=button]):not([type=reset])
 *        :not([type=checkbox]):not([type=radio])
 *
 * and a `:not()` carries the weight of what is inside it. Five attribute
 * selectors make it (0,5,1), against (0,1,1) for `.sidesearch input`. So the
 * global rule won on specificity, not on anything to do with Chromium, and
 * the letters came out dark navy on a dark navy pill: there, selectable,
 * spell-checked and unreadable.
 *
 * Hence !important rather than a longer selector — the same answer the
 * background above arrived at, for the same reason. Both properties are
 * stated because the fill colour is what paints the glyphs in WebKit and
 * `color` is what everything else uses. Measured in a browser, not reasoned
 * about: the computed value was rgb(16,35,63) before and #fff after.
 */
.sidesearch input{color:#fff!important;-webkit-text-fill-color:#fff!important;caret-color:#fff}
.sidesearch input::placeholder{color:#7F99BE!important;-webkit-text-fill-color:#7F99BE!important}
.sidesearch input::selection{background:#6FB0FF;color:#06142C;-webkit-text-fill-color:#06142C}
.sidesearch:focus-within{border-color:#6FB0FF;background:rgba(6,20,44,.75);
  box-shadow:0 0 0 3px rgba(111,176,255,.18)}
.sidesearch input::-webkit-search-cancel-button{filter:invert(1) opacity(.5)}

/* A hairline above each group but the first, so four groups read as four. */
.sidegroup{font-size:10.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:#8FA8CC;
  padding:13px 12px 5px;margin-top:4px;border-top:1px solid rgba(255,255,255,.07)}
.sidegroup:first-of-type{padding-top:6px;margin-top:0;border-top:0}
.sidenav a,.sidefoot a,.sidefoot button{display:flex;align-items:center;gap:12px;padding:9px 13px;border-radius:10px;
  color:var(--navy-ink);text-decoration:none;font-size:14.5px;font-weight:500;background:none;border:0;
  width:100%;text-align:left;cursor:pointer;font-family:Inter,sans-serif;position:relative}
.sidenav a:hover,.sidefoot a:hover,.sidefoot button:hover{background:rgba(255,255,255,.08);color:#fff}
.sidenav a.on,.sidefoot a.on{background:linear-gradient(90deg,#2A6BD6,#2260C7);color:#fff;font-weight:600;
  box-shadow:0 6px 16px -8px rgba(21,101,216,.9)}
.sidenav a.on::before{content:'';position:absolute;left:-14px;top:8px;bottom:8px;width:4px;border-radius:0 4px 4px 0;background:#6FB0FF}
.sidenav a span,.sidefoot a span,.sidefoot button span{flex:1;min-width:0}
.badge{min-width:22px;height:22px;padding:0 7px;border-radius:999px;background:rgba(255,255,255,.18);color:#fff;
  font-size:11.5px;font-weight:700;display:inline-grid;place-items:center}
.badge.red{background:#E5484D}
/* The foot never grows into the menu: the menu scrolls, the foot does not,
   and the foot is small enough that the last item of Resources is reachable
   on a laptop screen. */
.sidefoot{flex:none;border-top:1px solid rgba(255,255,255,.10);padding:8px 14px 14px;
  display:flex;flex-direction:column;gap:2px}
.sidefoot a,.sidefoot button{padding:9px 13px}
.sidefoot form{margin:0}

/* ---------------------------------------------------------------- *
 * 36.39 — the last two lines of the menu, in Tony's order.
 *
 * Above: the profile and the way out, sharing one row — the same errand,
 * and one row instead of two hands the menu above a whole item back.
 * Below: the three languages as codes, which is all they need to be once
 * they are three buttons side by side.
 * ---------------------------------------------------------------- */
.sideme{display:flex;align-items:center;gap:6px;margin-top:2px}
.sideme a{flex:1;min-width:0}
.sideme form{margin:0;flex:none}
/* The way out is an icon with its word read out to a screen reader: it is
   the one item in the menu nobody needs to read to find, and the space it
   gives back is a whole line. */
.sidefoot .sideme button{width:auto;padding:9px 11px;border-radius:10px}
.sideme button span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.sideme button:hover{background:rgba(229,72,77,.18);color:#fff}

.sidelang{display:flex;align-items:center;gap:6px;padding:8px 2px 2px;margin-top:4px;
  border-top:1px solid rgba(255,255,255,.08)}
.sidelang form{margin:0;flex:1;min-width:0}
.sidelang button{padding:6px 4px;border-radius:8px;border:1px solid transparent;background:none;
  color:#A9BFDD;font:700 11.5px Inter,sans-serif;letter-spacing:.06em;cursor:pointer;width:100%;
  text-align:center;display:block}
.sidelang button:hover{background:rgba(255,255,255,.08);color:#fff}
.sidelang button.on{background:rgba(111,176,255,.18);border-color:rgba(111,176,255,.5);color:#fff}

.appmain{margin-left:264px;min-height:100vh;display:flex;flex-direction:column}
.apptop{position:sticky;top:0;z-index:40;display:flex;align-items:center;gap:16px;
  background:rgba(255,255,255,.96);backdrop-filter:saturate(1.2) blur(6px);
  border-bottom:1px solid var(--edge);padding:14px 32px;min-height:84px}
.toptitle{flex:1;min-width:0}
.toptitle h1{font-family:Poppins,Inter,sans-serif;font-size:27px;font-weight:700;color:var(--navy);
  letter-spacing:-.02em;line-height:1.15;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.topsub{font-size:14px;color:var(--muted);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.toplogo{display:none}
.topright{display:flex;align-items:center;gap:12px;flex:none}
.drawerbtn{display:none;width:42px;height:42px;border-radius:10px;border:1px solid var(--edge);background:#fff;
  color:var(--navy);cursor:pointer;place-items:center}
.entitypick{display:flex;align-items:center;gap:8px;border:1px solid var(--edge);border-radius:10px;padding:0 10px;
  background:#fff;color:var(--blue);height:42px;margin:0}
.entitypick select{border:0;background:transparent;font-weight:600;color:var(--ink);padding:8px 2px;min-width:92px;cursor:pointer}
.entitypick select:focus-visible{outline:none}
.entitypick:focus-within{border-color:var(--blue);box-shadow:0 0 0 3px rgba(21,101,216,.15)}

.toplang,.usermenu{position:relative}
.toplang>summary,.usermenu>summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:7px}
.toplang>summary::-webkit-details-marker,.usermenu>summary::-webkit-details-marker{display:none}
.toplang>summary{height:42px;padding:0 10px;border-radius:10px;color:var(--ink);font-weight:600;font-size:13.5px}
.toplang>summary:hover,.toplang[open]>summary{background:var(--sky)}
.toplang>summary .ic:last-child,.usermenu>summary .ic:last-child{width:15px;height:15px;color:var(--muted)}
.dropdown{position:absolute;right:0;top:calc(100% + 8px);z-index:90;min-width:220px;background:#fff;
  border:1px solid var(--edge);border-radius:14px;box-shadow:0 18px 40px -12px rgba(11,42,85,.28);padding:6px;
  display:flex;flex-direction:column;gap:2px}
.dropdown form{margin:0}
.dropdown a,.dropdown button{display:flex;align-items:center;gap:9px;width:100%;text-align:left;padding:10px 11px;border-radius:9px;
  font-size:14px;color:var(--ink);text-decoration:none;background:none;border:0;cursor:pointer;font-weight:500;min-height:0}
.dropdown a:hover,.dropdown button:hover{background:var(--sky)}
.dropdown .on{background:var(--sky);color:var(--blue);font-weight:700}
.dropdown .signout{color:#B3321D;font-weight:600}
.dropdown .ic{width:17px;height:17px;color:var(--muted)}
.ddhead{padding:10px 11px 9px;border-bottom:1px solid var(--edge);margin-bottom:4px;display:flex;flex-direction:column;gap:2px}
.ddhead strong{font-size:14px;color:var(--ink)} .ddhead span{font-size:12px;color:var(--muted);overflow-wrap:anywhere}
.ddlabel{font-size:10.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);padding:8px 11px 3px}

.bell{position:relative;width:42px;height:42px;border-radius:10px;display:grid;place-items:center;color:var(--ink)}
.bell:hover{background:var(--sky)}
.bell .dot{position:absolute;top:5px;right:4px;min-width:17px;height:17px;padding:0 4px;border-radius:999px;background:#E5484D;
  color:#fff;font-size:10px;font-weight:700;display:grid;place-items:center;border:2px solid #fff}
.usermenu>summary{padding:4px 8px 4px 4px;border-radius:999px}
.usermenu>summary:hover,.usermenu[open]>summary{background:var(--sky)}
.usermenu .avatar{width:44px;height:44px;border-radius:999px;background:linear-gradient(135deg,#1D6EE0,#0F4FB0);color:#fff;
  font-size:15px;font-weight:700;display:grid;place-items:center;font-family:Poppins,sans-serif;flex:none}
.uname{display:flex;flex-direction:column;line-height:1.2;max-width:180px}
.uname strong{font-size:14px;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.uname small{font-size:12px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.shell-staff main,.shell-customer main{flex:1;width:100%;max-width:1440px;margin:0 auto;padding:28px 32px 60px}
.shell-staff main.wide,.shell-customer main.wide{max-width:1520px}

/* the footer band */
.sitefoot2{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;
  background:#E3EEFB;color:var(--navy-2);padding:18px 32px;font-size:15px;border-top:1px solid #D2E2F6;margin-top:auto}
.sitefoot2 .slogan{font-weight:500}
/*
 * 36.14 — the maker's mark at the foot, on the left.
 *
 * Two lines in one block: the Xone mark with the copyright beside it, and
 * the slogan under them. They are one block so that however the footer
 * wraps — and it wraps at three different widths — the mark and the line it
 * belongs to arrive together.
 */
.sitefoot2 .footbrand{display:flex;flex-direction:column;gap:3px;min-width:0}
.sitefoot2 .fb-top{display:flex;align-items:center;gap:9px;font-weight:600;color:var(--navy-2)}
.sitefoot2 .fb-top img{display:block;width:22px;height:22px;border-radius:6px;flex:0 0 auto}
.sitefoot2 .footbrand .slogan{font-size:12.5px;font-weight:500;color:var(--muted)}
.sitefoot2 a{color:var(--navy-2);text-decoration:none;font-weight:600}
.sitefoot2 .footmid{font-size:12.5px;color:var(--muted)} .sitefoot2 .footmid a{font-weight:500;color:var(--muted)}
.sitefoot2 .sep{margin:0 8px}
.sitefoot{display:none}

/* the sidebar becomes a drawer below 1080px */
@media(max-width:1080px){
  .appside{transform:translateX(-102%);transition:transform .22s ease,visibility .22s;width:min(300px,86vw);visibility:hidden}
  body.drawer-on .appside{transform:none;visibility:visible}
  body.drawer-on .scrim{display:block}
  .scrim{display:none;position:fixed;inset:0;background:rgba(6,20,44,.45);z-index:70}
  .drawerclose{display:grid;place-items:center;position:absolute;top:12px;right:12px;width:36px;height:36px;border-radius:9px;
    border:0;background:rgba(255,255,255,.12);color:#fff;cursor:pointer}
  .appmain{margin-left:0}
  .drawerbtn{display:grid}
  .apptop{padding:10px 16px;min-height:64px;gap:10px}
  .toptitle h1{font-size:20px}
  .topsub{font-size:12.5px}
  .shell-staff main,.shell-customer main{padding:18px 14px 50px}
  .sitefoot2{padding:16px;font-size:13.5px}
}
@media(max-width:720px){
  .uname{display:none}
  .usermenu .avatar{width:38px;height:38px;font-size:13px}
  .entitypick{padding:0 6px;height:38px} .entitypick select{min-width:0;font-size:13px} .entitypick .ic{display:none}
  .toplang>summary{padding:0 6px} .toplang>summary span{display:none}
  .topsub{display:none}
  .topright{gap:4px}
  .bell,.drawerbtn{width:38px;height:38px}
  .apptop{flex-wrap:nowrap}
  .toptitle h1{font-size:17px}
}
@media(max-width:420px){ .entitypick{display:none} }

/* ---------- the student bar ---------- */
body.shell-student,body.shell-public{background:linear-gradient(180deg,#EAF3FE 0,#F5F9FE 320px,#F7FAFE 100%);display:flex;flex-direction:column;min-height:100vh}
.stubar,.pubbar{position:sticky;top:0;z-index:40;display:flex;align-items:center;gap:22px;background:rgba(255,255,255,.95);
  backdrop-filter:blur(6px);border-bottom:1px solid var(--edge);padding:10px 32px;min-height:74px}
.stulogo img{height:52px;width:auto;display:block}
.stunav{display:flex;gap:4px;flex:1}
.stunav a{padding:9px 14px;border-radius:9px;color:var(--ink);text-decoration:none;font-weight:500;font-size:14.5px;position:relative}
.stunav a:hover{background:var(--sky)}
.stunav a.on{color:var(--blue);font-weight:600}
.stunav a.on::after{content:'';position:absolute;left:14px;right:14px;bottom:-15px;height:3px;border-radius:3px;background:var(--blue)}
.pubbar{justify-content:space-between}
.stumain,.shell-public main{flex:1;width:100%;max-width:1180px;margin:0 auto;padding:26px 24px 60px}
.shell-student .sitefoot2,.shell-public .sitefoot2{margin-top:auto}
@media(max-width:900px){
  .stubar{padding:8px 14px;min-height:62px;gap:8px;justify-content:space-between}
  .stulogo img{height:40px}
  body.shell-student{overflow-x:hidden}
  .stunav{position:fixed;inset:0 0 0 auto;width:min(300px,86vw);z-index:80;flex-direction:column;gap:2px;background:#fff;
    padding:64px 14px 20px;box-shadow:-6px 0 24px rgba(8,26,56,.18);display:none}
  body.drawer-on .stunav{display:flex}
  body.drawer-on .scrim{display:block}
  .scrim{display:none;position:fixed;inset:0;background:rgba(6,20,44,.4);z-index:70}
  .stunav a{padding:13px 14px;font-size:15.5px}
  .stunav a.on{background:var(--sky)} .stunav a.on::after{display:none}
  .stunav .drawerclose{display:grid;place-items:center;position:absolute;top:12px;right:12px;width:38px;height:38px;border-radius:9px;
    border:1px solid var(--edge);background:#fff;color:var(--navy)}
  .shell-student .drawerbtn{display:grid}
  .stumain,.shell-public main{padding:16px 14px 50px}
}

/* ---------- shared pieces for the new screens ---------- */
.pagehead{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;flex-wrap:wrap}
.pagehead h2{font-family:Poppins,Inter,sans-serif;font-size:24px;color:var(--navy);margin:0}
.pagehead p{margin:4px 0 0;color:var(--muted)}
.btn.primary{background:var(--blue);border-color:var(--blue)}
.btn.primary:hover{background:var(--blue-2);border-color:var(--blue-2)}
.btn .ic{width:18px;height:18px}
.kpi4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
.kpi4 .k{display:flex;align-items:center;gap:18px;background:#fff;border:1px solid var(--edge);border-radius:16px;padding:22px 22px;
  box-shadow:0 2px 10px -6px rgba(11,42,85,.18);text-decoration:none;color:inherit;min-width:0}
.kpi4 a.k:hover{border-color:#B9D2F4}
.kpi4 .k .ico{width:62px;height:62px;border-radius:999px;display:grid;place-items:center;flex:none}
.kpi4 .k .ico .ic{width:28px;height:28px}
.kpi4 .k b{display:block;font-family:Poppins,sans-serif;font-size:32px;color:var(--navy);line-height:1.05}
.kpi4 .k span{color:#44546B;font-size:15px}
.ico.blue{background:#E4EEFD;color:#1D63D6} .ico.sky{background:#E6F0FE;color:#2A74E6}
.ico.amber{background:#FFF1CF;color:#E0A106} .ico.green{background:#E1F5E8;color:#1E9A58}
@media(max-width:1180px){.kpi4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){.kpi4{gap:10px}.kpi4 .k{padding:14px;gap:12px}.kpi4 .k .ico{width:44px;height:44px}.kpi4 .k .ico .ic{width:22px;height:22px}.kpi4 .k b{font-size:24px}.kpi4 .k span{font-size:13px}}

.panel{background:#fff;border:1px solid var(--edge);border-radius:16px;box-shadow:0 2px 10px -6px rgba(11,42,85,.16)}
.panel-head{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:18px 22px 10px}
.panel-head h3{font-family:Poppins,Inter,sans-serif;font-size:19px;color:var(--navy);margin:0}
.panel-pad{padding:18px 22px}
/*
 * 36.13 — the tab row scrolls inside itself, instead of widening the page.
 *
 * It already said overflow-x:auto, which was the right intention and did
 * nothing. The row sits in a .spread, which wraps on a phone — and a flex
 * item that has wrapped onto a line of its own is sized by its content, not
 * by the line, so the tabs came out 421px wide inside a 363px panel and the
 * whole Workspace slid sideways under the thumb by 44px.
 *
 * `max-width:100%` is what actually fixed it — and it is worth writing down
 * that min-width:0 and flex:1 1 0 were both tried first and neither moved
 * it a pixel. Below 720px .wsbar turns into a COLUMN, so flex-basis is
 * sizing the height and has nothing to say about the width; the box was
 * taking its width from its own content and no amount of shrink applied.
 * max-width caps it against the container whatever route it took to get
 * there, and the tabs then scroll inside it as overflow-x always intended.
 * The other two stay because they cost nothing and each closes a different
 * way back to the same bug.
 *
 * Measured: the Workspace scrolled sideways by 44px before, 0 after.
 */
/*
 * 36.18 — and `flex:1 1 0` comes back out, because it was never the fix and
 * it was quietly doing harm.
 *
 * The note above is right that max-width:100% stopped the sideways scroll.
 * The other two were left in as belt and braces. But `flex-basis:0` is a
 * basis along the container's own axis, and .ptabs sits inside a COLUMN
 * flex container — so the basis it was setting to zero was the strip's
 * HEIGHT. With nothing to stretch it, the whole tab row collapsed:
 *
 *   measured on My tasks, 36.17 — .ptabs 952px wide, 9 tabs inside it,
 *   and 1px tall. Mine, Waiting, Following, Need Approval, Done, All work,
 *   Statistics and the Queue were all there in the page and none of them
 *   could be seen or tapped, on a phone or on a desktop, since 36.13.
 *
 * I measured the horizontal scroll that release and never measured the
 * height of the thing I had changed. test/browser.js now measures both, so
 * neither can be traded for the other again.
 */
.ptabs{display:flex;gap:6px;border-bottom:1px solid var(--edge);padding:0 22px;
  overflow-x:auto;scrollbar-width:none;min-width:0;max-width:100%;flex:0 0 auto;
  -webkit-overflow-scrolling:touch}
.ptabs::-webkit-scrollbar{display:none}
.ptabs a{padding:14px 12px 12px;color:#243650;text-decoration:none;font-weight:500;font-size:15px;white-space:nowrap;border-bottom:3px solid transparent;margin-bottom:-1px}
.ptabs a.on{color:var(--blue);border-bottom-color:var(--blue);font-weight:600}
.ptabs a .n{margin-left:6px;font-size:12px;background:var(--sky);color:var(--blue);border-radius:999px;padding:1px 7px}
.filters{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.filters select,.filters input{height:44px;border:1px solid var(--edge);border-radius:10px;padding:0 12px;background:#fff;min-width:150px}
.filters .search{position:relative;flex:1;min-width:200px}
.filters .search input{width:100%;padding-left:38px}
.filters .search .ic{position:absolute;left:11px;top:12px;color:var(--muted)}

/* a table that turns into cards on a phone */
.rtable{width:100%;border-collapse:separate;border-spacing:0}
.rtable th{background:#EEF4FC;color:#1D3558;font-weight:600;font-size:14px;text-align:left;padding:13px 16px}
.rtable th:first-child{border-radius:10px 0 0 10px} .rtable th:last-child{border-radius:0 10px 10px 0}
.rtable td{padding:15px 16px;border-bottom:1px solid #EDF1F6;font-size:14.5px;color:#22344F;vertical-align:middle}
.rtable tr:last-child td{border-bottom:0}
.rtable a.ref{color:#1B3A66;font-weight:600;text-decoration:none;font-variant-numeric:tabular-nums}
.rtable a.ref:hover{color:var(--blue);text-decoration:underline}
.rtable .subj{font-weight:500}
.rtable tr.late td:first-child{box-shadow:inset 3px 0 0 #E5484D}
.rwrap{padding:4px 22px 18px;overflow-x:auto}
@media(max-width:760px){
  .rwrap{padding:4px 12px 12px}
  .rtable thead{display:none}
  .rtable,.rtable tbody,.rtable tr,.rtable td{display:block;width:100%}
  .rtable tr{border:1px solid var(--edge);border-radius:12px;padding:10px 12px;margin-bottom:10px;background:#fff}
  .rtable td{border:0;padding:4px 0;display:flex;justify-content:space-between;gap:12px;font-size:14px;text-align:right}
  .rtable td>*{text-align:right}
  .rtable td::before{content:attr(data-label);color:var(--muted);font-size:12.5px;font-weight:500;flex:none}
  .rtable td.first{font-size:15px}
  .rtable td.first::before{display:none}
}
.st{display:inline-flex;align-items:center;gap:6px;padding:5px 11px;border-radius:8px;font-size:13px;font-weight:600;white-space:nowrap}
.st.new{background:var(--s-new);color:var(--s-new-t)} .st.progress{background:var(--s-prog);color:var(--s-prog-t)}
.st.waiting{background:var(--s-wait);color:var(--s-wait-t)} .st.pending{background:var(--s-pend);color:var(--s-pend-t)}
.st.ok{background:var(--s-ok);color:var(--s-ok-t)} .st.closed{background:var(--s-closed);color:var(--s-closed-t)}
.st.bad{background:var(--s-bad);color:var(--s-bad-t)}
.pri{font-size:12px;font-weight:700;padding:3px 8px;border-radius:6px;background:#EEF2F7;color:#43536B}
.pri.p1{background:#FDE3E1;color:#B3261E}.pri.p2{background:#FFEBD6;color:#A04A00}.pri.p3{background:#E7EFFD;color:#1C57B3}
.empty2{padding:36px 20px;text-align:center;color:var(--muted)}
.empty2 .ic{width:36px;height:36px;color:#9DB3D3;display:block;margin:0 auto 8px}

/* conversation */
.thread{display:flex;flex-direction:column;gap:12px}
.msg{border:1px solid var(--edge);border-radius:14px;padding:13px 15px;background:#fff;max-width:92%}
.msg.me{align-self:flex-end;background:#F1F7FF;border-color:#D6E6FB}
.msg.internal{background:#FFF8E6;border-color:#F3DFA8;align-self:stretch;max-width:none}
.msg .who2{display:flex;justify-content:space-between;gap:10px;font-size:12.5px;color:var(--muted);margin-bottom:6px;flex-wrap:wrap}
.msg .who2 strong{color:var(--ink)}
.msg .body{white-space:pre-wrap;overflow-wrap:anywhere;font-size:14.5px;line-height:1.55}
.msg .tag{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#8A5A00}
.files{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}
.files a{display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border:1px solid var(--edge);border-radius:8px;
  font-size:13px;text-decoration:none;color:#1B3A66;background:#fff;max-width:100%}
.files a .ic{width:15px;height:15px}
.files a span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:220px}
.files a.internal{background:#FFF8E6;border-color:#F3DFA8}
.facts{display:grid;grid-template-columns:minmax(120px,auto) 1fr;gap:8px 16px;margin:0;font-size:14px}
.facts dt{color:var(--muted)} .facts dd{margin:0;color:var(--ink);overflow-wrap:anywhere}
.split{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:20px;align-items:start}
@media(max-width:1080px){.split{grid-template-columns:1fr}}
.timeline{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.timeline li{display:grid;grid-template-columns:14px 1fr;gap:10px;font-size:13.5px}
.timeline li::before{content:'';width:10px;height:10px;border-radius:999px;background:#9DB9E4;margin-top:5px}
.timeline small{color:var(--muted);display:block}
.actionbox{border-top:1px solid var(--edge);padding-top:14px;margin-top:14px}
.actionbox details{border:1px solid var(--edge);border-radius:12px;margin-bottom:8px;background:#fff}
.actionbox summary{cursor:pointer;padding:11px 14px;font-weight:600;color:var(--navy);list-style:none;display:flex;align-items:center;gap:8px}
.actionbox summary::-webkit-details-marker{display:none}
.actionbox details[open] summary{border-bottom:1px solid var(--edge)}
.actionbox form{padding:12px 14px;display:flex;flex-direction:column;gap:10px;margin:0}
.actionbox textarea,.actionbox input,.actionbox select{width:100%;border:1px solid var(--edge);border-radius:10px;padding:10px}
.privacy{display:flex;gap:8px;align-items:center;font-size:12.5px;color:#8A5A00;background:#FFF8E6;border:1px solid #F3DFA8;border-radius:10px;padding:8px 11px}
.decision{display:inline-flex;gap:6px;align-items:center;font-size:13px;font-weight:600;padding:5px 11px;border-radius:8px;background:#EEF2F7;color:#43536B}
.decision.pending_review,.decision.need_info{background:#FFF4D6;color:#8A5A00}
.decision.approved{background:#E2F5E9;color:#17784A}.decision.rejected{background:#FDE7E4;color:#B3321D}

/* student home */
.hero{position:relative;border-radius:22px;overflow:hidden;padding:38px 40px 34px;
  background:radial-gradient(1200px 400px at 90% -10%,#CFE3FF 0,rgba(207,227,255,0) 60%),linear-gradient(180deg,#E6F1FF,#F2F8FF);
  border:1px solid #D7E7FB}
.hero h2{font-family:Poppins,Inter,sans-serif;font-size:40px;color:var(--navy);margin:0;letter-spacing:-.02em}
.hero p.lead{font-size:20px;color:#223B61;margin:6px 0 18px}
.hero .tag2{position:absolute;right:40px;top:34px;font-family:Poppins,sans-serif;font-weight:600;color:#1B4E9B;font-size:22px;line-height:1.25;text-align:right}
.hero form{display:flex;max-width:620px;position:relative}
.hero input{width:100%;height:56px;border-radius:14px;border:1px solid #D2E0F2;padding:0 16px 0 48px;font-size:16px;background:#fff;box-shadow:0 6px 18px -12px rgba(11,42,85,.4)}
.hero form .ic{position:absolute;left:16px;top:18px;color:var(--muted)}
.hero .city{position:absolute;right:28px;bottom:0;width:360px;height:120px;opacity:.9}
@media(max-width:900px){.hero{padding:24px 18px 22px}.hero h2{font-size:28px}.hero p.lead{font-size:16px}.hero .tag2,.hero .city{display:none}}
.cats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.cat{display:flex;gap:14px;align-items:center;background:#fff;border:1px solid var(--edge);border-radius:16px;padding:20px 18px;
  text-decoration:none;color:inherit;box-shadow:0 2px 10px -6px rgba(11,42,85,.18);min-width:0}
.cat:hover{border-color:#9EC2F2;box-shadow:0 8px 22px -12px rgba(21,101,216,.45)}
.cat .ic{width:40px;height:40px;color:#1560CE;flex:none}
.cat b{display:block;font-size:16.5px;color:var(--navy)} .cat small{display:block;color:var(--muted);font-size:13.5px;line-height:1.4}
.cat .ic.go{width:18px;height:18px;margin-left:auto;color:#1560CE}
@media(max-width:1000px){.cats{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:520px){.cats{grid-template-columns:1fr}.cat{padding:15px}}
.two2{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:18px;align-items:start}
@media(max-width:980px){.two2{grid-template-columns:1fr}}
.actions3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.actions3 a{display:flex;align-items:center;justify-content:center;gap:9px;padding:14px;border-radius:12px;font-weight:600;text-decoration:none;
  background:#fff;border:1px solid var(--edge);color:var(--navy)}
.actions3 a.primary{background:var(--blue);border-color:var(--blue);color:#fff}
@media(max-width:620px){.actions3{grid-template-columns:1fr}}
.catpick{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px}
.catpick label,.catpick a.devicecard{display:flex;flex-direction:column;gap:4px;border:1px solid var(--edge);border-radius:12px;padding:12px;cursor:pointer;background:#fff;
  text-transform:none;letter-spacing:0;font-size:14px;color:var(--ink);font-weight:600;text-decoration:none}
.catpick a.devicecard:hover{border-color:#9EC2F2}
.catpick label small,.catpick a.devicecard small{font-weight:400;color:var(--muted);font-size:12.5px}
.catpick input{position:absolute;opacity:0;pointer-events:none}
.catpick label:has(input:checked){border-color:var(--blue);box-shadow:0 0 0 3px rgba(21,101,216,.16);background:#F4F9FF}
.catpick label:focus-within{outline:2px solid var(--blue);outline-offset:2px}
.confirm{text-align:center;padding:34px 22px}
.confirm .big{font-family:"IBM Plex Mono",monospace;font-size:30px;color:var(--blue);font-weight:500}
.confirm .ok{width:64px;height:64px;border-radius:999px;background:#E1F5E8;color:#1E9A58;display:grid;place-items:center;margin:0 auto 10px}
.confirm .ok .ic{width:32px;height:32px}
.guide{border:1px solid var(--edge);border-radius:14px;background:#fff;margin-bottom:10px}
.guide summary{cursor:pointer;padding:15px 18px;font-weight:600;color:var(--navy);list-style:none;display:flex;gap:10px;align-items:center}
.guide summary::-webkit-details-marker{display:none}
.guide .gb{padding:0 18px 16px;color:#2A3C56;white-space:pre-wrap;line-height:1.6}

/* print: the page, not the shell */
@media print{
  .appside,.apptop,.stubar,.pubbar,.sitefoot2,.scrim,.skip,.actionbox,.help-widget{display:none!important}
  .appmain{margin:0!important} body{background:#fff!important}
  .shell-staff main,.shell-customer main,.stumain{padding:0!important;max-width:none!important}
}

/* =====================================================================
   the sign-in page
   ===================================================================== */
body.shell-login{background:#EAF1FB;min-height:100vh;margin:0;display:flex;align-items:center;justify-content:center;padding:28px}
.login{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);width:min(1180px,100%);min-height:640px;background:#fff;
  border-radius:24px;overflow:hidden;box-shadow:0 40px 80px -40px rgba(11,42,85,.45)}
.login-art{position:relative;overflow:hidden;color:#fff;padding:46px 44px;display:flex;flex-direction:column;
  background:radial-gradient(700px 500px at 110% 110%,#1F6BE6 0,rgba(31,107,230,0) 55%),linear-gradient(160deg,#0B2350 0%,#0A2A62 55%,#0B3A86 100%)}
.login-art .logo-card{background:#fff;border-radius:16px;padding:20px 24px;width:min(420px,100%);box-shadow:0 20px 40px -24px rgba(0,0,0,.6);position:relative;z-index:2}
.login-art .logo-card img{display:block;width:100%;height:auto}
.login-art .slogan{position:relative;z-index:2;font-family:Poppins,Inter,sans-serif;font-weight:700;font-size:46px;line-height:1.12;margin:auto 0 20px;letter-spacing:-.01em}
.login-art .bar{width:70px;height:4px;border-radius:4px;background:#2F7BF0;margin-bottom:auto;position:relative;z-index:2}
.login-art .site{position:relative;z-index:2;font-size:17px;opacity:.95;margin-top:28px;color:#fff;text-decoration:none}
.login-art .net{position:absolute;right:-120px;bottom:-140px;width:620px;height:620px;opacity:.9;z-index:1}
.login-form{padding:40px 64px;display:flex;flex-direction:column;justify-content:center;position:relative}
.login-langs{position:absolute;top:28px;right:32px;display:flex;gap:8px}
.login-langs form{margin:0}
.login-langs button{min-width:52px;height:44px;border-radius:10px;border:1px solid #CFD9E6;background:#fff;color:#0B2A55;font-weight:700;cursor:pointer;font-size:14px}
.login-langs button.on{background:#0B2A55;border-color:#0B2A55;color:#fff}
.login-form .eyebrow2{font-size:13px;letter-spacing:.28em;color:#44546B;font-weight:600;text-transform:uppercase}
.login-form h1{font-family:Poppins,Inter,sans-serif;font-size:44px;color:#0B1F3F;margin:10px 0 4px;letter-spacing:-.02em}
.login-form .lead2{font-size:18px;color:#5B6B80;margin:0 0 26px}
.lf-field{margin-bottom:18px}
.lf-field label{display:block;font-size:15px;font-weight:500;color:#1B2B45;margin-bottom:8px;text-transform:none;letter-spacing:0}
.lf-input{position:relative}
.lf-input .ic{position:absolute;left:15px;top:50%;transform:translateY(-50%);color:#5B6B80;width:20px;height:20px}
.lf-input input{width:100%;height:54px;border:1px solid #CFD9E6;border-radius:12px;padding:0 50px 0 48px;font-size:16px;background:#fff;color:#0B1F3F}
.lf-input input:focus{outline:none;border-color:#1565D8;box-shadow:0 0 0 4px rgba(21,101,216,.15)}
.lf-eye{position:absolute;right:8px;top:50%;transform:translateY(-50%);width:40px;height:40px;border:0;background:none;color:#5B6B80;cursor:pointer;border-radius:9px;display:grid;place-items:center}
.lf-eye:hover{background:#EEF4FC}
.lf-eye .ic{position:static;transform:none}
.lf-row{display:flex;justify-content:space-between;align-items:center;gap:10px;margin:4px 0 22px;flex-wrap:wrap}
.lf-row label{display:flex;align-items:center;gap:9px;font-size:15px;color:#2A3C56;text-transform:none;letter-spacing:0;cursor:pointer}
.lf-row input{width:20px;height:20px;accent-color:#1565D8}
.lf-row a{color:#1565D8;font-weight:500;text-decoration:none}
.lf-row a:hover{text-decoration:underline}
.lf-submit{height:58px;width:100%;border-radius:12px;border:0;background:linear-gradient(180deg,#1A6CE0,#1159C7);color:#fff;font-size:18px;font-weight:600;
  display:flex;align-items:center;justify-content:center;gap:12px;cursor:pointer;box-shadow:0 12px 24px -12px rgba(21,101,216,.8)}
.lf-submit:hover{filter:brightness(1.05)}
.lf-submit .ic{width:22px;height:22px}
/* 36.21 — the second door reads as the quieter one: the password form is the
   way most people sign in, and two equally loud blue buttons make the page
   ask a question it does not mean to ask. Still a full-width target, still
   58px, so it is no harder to press on a phone. */
.lf-submit.ms{background:#fff;color:#16283F;border:1.5px solid #C6D2E2;box-shadow:none;font-size:16px}
.lf-submit.ms:hover{filter:none;background:#F4F7FB;border-color:#9FB4D0}
.lf-submit.ms .ic{color:#1159C7}
.lf-divider{display:flex;align-items:center;gap:14px;color:#44546B;margin:26px 0 18px;font-size:15px;text-align:center}
.lf-divider::before,.lf-divider::after{content:'';flex:1;height:1px;background:#D6DEE9}
.lf-secure{display:flex;justify-content:center;align-items:center;gap:8px;color:#44546B;font-size:14.5px}
.lf-secure .ic{color:#3C4B61}
.lf-extra{text-align:center;font-size:14px;color:#5B6B80;margin-top:12px}
.lf-extra a{color:#1565D8}
.login .flash{margin-bottom:16px}
.login-mobile-banner{display:none}
[dir=rtl] .lf-input .ic{left:auto;right:15px} [dir=rtl] .lf-input input{padding:0 48px 0 50px}
[dir=rtl] .lf-eye{right:auto;left:8px} [dir=rtl] .login-langs{right:auto;left:32px}
[dir=rtl] .lf-submit .ic{transform:scaleX(-1)}
[dir=rtl] .login-form{font-family:"Segoe UI",Tahoma,Arial,sans-serif}
@media(max-width:980px){
  body.shell-login{padding:0;align-items:stretch;background:#fff}
  .login{grid-template-columns:1fr;border-radius:0;box-shadow:none;min-height:100vh}
  .login-art{display:none}
  .login-form{padding:18px 22px 30px;justify-content:flex-start}
  .login-mobile-banner{display:block;margin:0 -22px 18px}
  .login-mobile-banner .mlogo{display:block;width:78%;max-width:330px;margin:10px auto 14px}
  .login-mobile-banner .mnavy{position:relative;overflow:hidden;background:linear-gradient(160deg,#0B2350,#0B3A86);color:#fff;padding:20px 26px;
    font-family:Poppins,Inter,sans-serif;font-weight:700;font-size:25px;line-height:1.18}
  .login-mobile-banner .mnavy svg{position:absolute;right:-60px;top:-40px;width:240px;height:240px;opacity:.85}
  .login-langs{position:static;margin:0 0 16px}
  .login-langs button{min-width:46px;height:38px;font-size:13px}
  .login-form h1{font-size:32px}
  .login-form .lead2{font-size:16px;margin-bottom:18px}
  .lf-input input{height:50px}
  .lf-submit{height:52px;font-size:17px}
  [dir=rtl] .login-langs{left:auto}
}

@media(max-width:720px){.help-toggle{padding:10px 14px;font-size:13px}}
.wsbar{padding:0 22px 0 0}
@media(max-width:720px){.wsbar{flex-direction:column;align-items:stretch;padding:0}.wsbar .row{padding:0 12px 10px}}

/* ================= AI-Smart Reports ================= */
.sidenav a.aismart{display:block;position:relative;padding:10px 10px 8px;margin:6px 0 4px;border-radius:14px;
  background:linear-gradient(135deg,rgba(255,255,255,.07),rgba(255,255,255,.02));border:1px solid rgba(111,176,255,.28);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.03),0 8px 18px -12px rgba(0,0,0,.6)}
.sidenav a.aismart > svg{display:block;width:100%;max-width:196px;height:auto}
.sidenav a.aismart:hover{border-color:rgba(111,176,255,.6);background:linear-gradient(135deg,rgba(255,255,255,.12),rgba(255,255,255,.04))}
.sidenav a.aismart.on{background:linear-gradient(135deg,#1E5BC2,#15459A);border-color:#6FB0FF}
.sidenav a.aismart.on::before{top:14px;bottom:14px}
.sidenav a.aismart .badge{position:absolute;right:8px;top:8px}
.srhero{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:28px;align-items:center;border-radius:22px;padding:26px 30px;
  background:radial-gradient(circle at 12% 20%,#FFFFFF 0,#F4F8FE 45%,#E9F1FD 100%);border:1px solid #D8E5F7;
  box-shadow:0 18px 40px -30px rgba(11,42,85,.45);position:relative;overflow:hidden}
.srhero::after{content:'';position:absolute;right:-60px;top:-60px;width:220px;height:220px;border-radius:50%;
  background:conic-gradient(from 200deg,#FF2BB0,#FF7A1A,#FFD60A,#34D399,#1EC8FF,#FF2BB0);opacity:.08;filter:blur(2px)}
.srhero-logo > svg{width:280px;height:auto;display:block}
.srhero-text h2{font-family:Poppins,Inter,sans-serif;font-size:22px;color:var(--navy);margin:0 0 6px;letter-spacing:-.01em}
.srhero-text p{margin:0 0 12px;color:#3C4E68}
.srflow{display:flex;flex-wrap:wrap;gap:6px;list-style:none;margin:0;padding:0}
.srflow li{display:flex;align-items:center;gap:6px;background:#fff;border:1px solid #D9E6F7;border-radius:999px;padding:4px 11px 4px 4px;font-size:12.5px;color:#1B3A66;font-weight:600}
.srflow li b{display:grid;place-items:center;width:20px;height:20px;border-radius:50%;background:linear-gradient(135deg,#1565D8,#0B2A55);color:#fff;font-size:11px}
.btn.big{padding:14px 22px;font-size:16px;border-radius:14px;position:relative;z-index:1}
.srquick{display:flex;flex-wrap:wrap;gap:8px}
.srquick a{display:inline-flex;align-items:center;gap:7px;padding:9px 13px;border-radius:12px;background:#fff;border:1px solid var(--edge);color:#1D3557;font-weight:600;font-size:13.5px;text-decoration:none}
.srquick a:hover,.srquick a.on{border-color:#9FC3F4;background:var(--sky);color:var(--blue-2)}
.srquick .ic{width:17px;height:17px;color:var(--blue)}
.kpi6{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:14px}
.kpi6 .k{display:flex;align-items:center;gap:12px;background:#fff;border:1px solid var(--edge);border-radius:16px;padding:16px;text-decoration:none;color:inherit}
.kpi6 a.k:hover{border-color:#B9D2F4}
.kpi6 .ico{width:44px;height:44px;border-radius:999px;display:grid;place-items:center;flex:none}
.kpi6 b{display:block;font-family:Poppins,sans-serif;font-size:26px;color:var(--navy);line-height:1.05}
.kpi6 .k span span{color:#44546B;font-size:13px}
.ico.violet{background:#EFE8FD;color:#6B3FD1} .ico.red{background:#FDE7E4;color:#C0392B}
@media(max-width:1280px){.kpi6{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:620px){.kpi6{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.srhero{grid-template-columns:1fr;padding:20px}.srhero-logo > svg{width:220px}}
.srh3{font-family:Poppins,Inter,sans-serif;font-size:17px;color:var(--navy);margin:0 0 12px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.srh3 .ic{color:var(--blue)}
.srtypes{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:10px}
.srtype{display:flex;align-items:center;gap:12px;padding:12px;border:1px solid var(--edge);border-radius:14px;background:#fff;text-decoration:none;color:inherit;cursor:pointer}
.srtype:hover{border-color:#9FC3F4;box-shadow:0 10px 22px -18px rgba(11,42,85,.6)}
.srtype .ico{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;flex:none}
.srtype b{display:block;color:var(--navy);font-size:14px}
.srtype small{color:var(--muted);font-size:12px}
.srtype.more{opacity:.85}
.srtypes.pick .srtype{position:relative;padding-left:38px}
.srtypes.pick input{position:absolute;left:13px;top:50%;transform:translateY(-50%)}
.srtypes.pick .srtype:has(input:checked){border-color:var(--blue);background:var(--sky);box-shadow:0 0 0 2px rgba(21,101,216,.15)}
.srform fieldset{border:0;padding:0;margin:0 0 18px;min-width:0}
.srform legend{font-family:Poppins,Inter,sans-serif;font-weight:600;color:var(--navy);font-size:15px;margin:0 0 10px;padding:0}
.grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 16px}
.grid2 legend{grid-column:1/-1}
.grid2 .wide,.srphotoform .wide{grid-column:1/-1}
@media(max-width:700px){.grid2{grid-template-columns:1fr}}
.srform label,label.block{display:flex;flex-direction:column;gap:5px;font-size:13px;font-weight:600;color:#33445E}
.srform input,.srform select,.srform textarea,label.block textarea,label.block input,.sreditor textarea,.sreditor input,.sreditor select,.srphotoform input,.srphotoform select{
  width:100%;border:1px solid #D6E0EC;border-radius:10px;padding:9px 11px;font:inherit;font-weight:400;color:var(--ink);background:#fff}
.srform textarea:focus,.sreditor textarea:focus,.sreditor input:focus{outline:2px solid rgba(21,101,216,.25);border-color:#8DB6EE}
label.chk{display:flex;flex-direction:row;align-items:center;gap:6px;font-weight:500;font-size:12.5px;color:#33445E}
label.chk input{width:auto}
label.inline{display:flex;align-items:center;gap:10px;font-weight:600;font-size:13px;margin:0 0 8px}
label.inline select{width:auto}
.srtitle{font-family:Poppins,Inter,sans-serif;font-size:22px;color:var(--navy);margin:4px 0 2px;overflow-wrap:anywhere}
.srsteps{display:flex;list-style:none;margin:18px 0 0;padding:0;gap:0;overflow-x:auto}
.srsteps li{flex:1;min-width:92px;display:flex;flex-direction:column;align-items:center;gap:6px;position:relative;font-size:12px;color:var(--muted);text-align:center}
.srsteps li::before{content:'';position:absolute;top:14px;left:-50%;right:50%;height:2px;background:#DCE5F1;z-index:0}
.srsteps li:first-child::before{display:none}
.srsteps li b{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:#EEF2F7;color:#5B6B80;font-size:12px;z-index:1;border:2px solid #fff}
.srsteps li b .ic{width:16px;height:16px}
.srsteps li.done b{background:#1E9A58;color:#fff} .srsteps li.done::before{background:#7FCB9F}
.srsteps li.now b{background:linear-gradient(135deg,#1565D8,#0B2A55);color:#fff;box-shadow:0 0 0 4px rgba(21,101,216,.18)}
.srsteps li.now span{color:var(--navy);font-weight:700}
.srdrop{display:flex;flex-direction:column;align-items:center;gap:4px;padding:26px 16px;border:2px dashed #B7CDEB;border-radius:16px;
  background:linear-gradient(180deg,#F8FBFF,#EEF5FE);cursor:pointer;text-align:center;color:#33445E;transition:.15s}
.srdrop .ic{width:34px;height:34px;color:var(--blue)}
.srdrop b{color:var(--navy);font-size:15px}
.srdrop span{font-size:12.5px;color:var(--muted)}
.srdrop input{position:absolute;width:1px;height:1px;opacity:0}
.srdrop.drag{border-color:var(--blue);background:#E3EEFD}
.srdrop.busy{opacity:.6;pointer-events:none}
.srdrop:focus-within{outline:2px solid rgba(21,101,216,.35)}
.srfiles{display:grid;gap:8px;margin-top:12px}
.srfile{display:flex;align-items:center;gap:10px;padding:10px 12px;border:1px solid var(--edge);border-radius:12px;background:#fff}
.srfile.off{opacity:.55;background:#F7F9FC}
.srfile .kind,.srphoto .kind{font-family:"IBM Plex Mono",monospace;font-size:11px;font-weight:600;background:var(--sky);color:var(--blue-2);border-radius:8px;padding:8px 7px;min-width:44px;text-align:center}
.srfile .meta{flex:1;min-width:0;display:flex;flex-direction:column}
.srfile .meta a{color:var(--navy);overflow-wrap:anywhere}
.btn.on{background:#E2F5E9;border-color:#A8DDBD;color:#17784A}
.btn.ghost{background:transparent;border-color:transparent;color:var(--muted)}
.btn.danger{color:#B3321D} .btn.danger:hover{background:#FDE7E4}
.srphotos{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:12px;margin-top:6px}
.srphoto{margin:0;border:1px solid var(--edge);border-radius:14px;overflow:hidden;background:#fff;display:flex;flex-direction:column}
.srphoto.sel{border-color:#6FA6EE;box-shadow:0 0 0 2px rgba(21,101,216,.18)}
.srphoto.off{opacity:.55}
.srphoto .img{position:relative;display:grid;place-items:center;aspect-ratio:4/3;background:#EEF2F7;overflow:hidden}
.srphoto img{width:100%;height:100%;object-fit:cover}
.srphoto img.rot90{transform:rotate(90deg)} .srphoto img.rot180{transform:rotate(180deg)} .srphoto img.rot270{transform:rotate(270deg)}
.srphoto .pick{position:absolute;left:8px;top:8px;background:#1565D8;color:#fff;border-radius:999px;padding:2px 8px 2px 4px;font-size:12px;display:flex;align-items:center;gap:2px}
.srphoto .pick .ic{width:15px;height:15px}
.srphoto .pair{position:absolute;right:8px;top:8px;background:rgba(11,42,85,.85);color:#fff;border-radius:6px;padding:2px 7px;font-size:11px;text-transform:uppercase;letter-spacing:.05em}
.srphoto figcaption{padding:10px 11px;display:flex;flex-direction:column;gap:3px;font-size:13px}
.srphoto figcaption b{color:var(--navy);overflow-wrap:anywhere}
.srphoto .pcat{font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--blue);font-weight:700}
.srphoto .pcat em{font-style:normal;color:#8A5A00;text-transform:none;letter-spacing:0}
.srphotoform{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:8px}
.srphotoform label{display:flex;flex-direction:column;gap:3px;font-size:12px;font-weight:600;color:#33445E}
.srfind details{border:1px solid var(--edge);border-radius:12px;padding:8px 12px;margin:8px 0;background:#fff}
.srfind summary{cursor:pointer;color:var(--navy)}
.srfind ul{margin:8px 0 2px;padding-left:18px;display:grid;gap:6px;font-size:14px}
.srsrc{display:inline-flex;flex-wrap:wrap;gap:3px;vertical-align:middle}
.srsrc a,.srsrc span{font-family:"IBM Plex Mono",monospace;font-size:10.5px;padding:1px 6px;border-radius:6px;background:#EEF2F7;color:#43536B;text-decoration:none}
.srsrc a{background:#E4EEFD;color:#1D63D6}
.srsrc a:hover{background:#1565D8;color:#fff}
.srflag{display:inline-flex;align-items:center;gap:3px;font-size:11px;font-weight:700;color:#8A5A00;background:#FFF4D6;border:1px solid #F3DFA8;border-radius:6px;padding:1px 6px;vertical-align:middle}
.srflag .ic{width:12px;height:12px}
.srask{margin-top:14px;border:1px solid #F3DFA8;background:#FFFBEF;border-radius:14px;padding:14px}
.srask h4{margin:0 0 10px;color:#8A5A00;display:flex;gap:6px;align-items:center}
.sreditor{display:flex;flex-direction:column;gap:14px;margin-top:10px}
.srsec{border:1px solid var(--edge);border-radius:14px;padding:12px 14px;background:#FCFDFF}
.srsec.hidden{opacity:.6;background:#F5F7FA}
.srsechead{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:8px}
.srsechead h4{margin:0;color:var(--navy);font-family:Poppins,Inter,sans-serif;font-size:15px;display:flex;align-items:center;gap:8px}
.srsechead .no{display:grid;place-items:center;width:24px;height:24px;border-radius:7px;background:var(--navy);color:#fff;font-size:12px}
.srsechead select{width:auto;padding:5px 8px;font-size:12.5px}
.sritem{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;align-items:start;margin:6px 0}
.sritem.verify textarea,.srtable tr.verify input,.srtable tr.verify textarea{border-color:#EFC96B;background:#FFFCF2}
.srmeta{display:flex;flex-direction:column;gap:4px;align-items:flex-start;min-width:110px;max-width:180px}
@media(max-width:620px){.sritem{grid-template-columns:1fr}.srmeta{max-width:none;flex-direction:row;flex-wrap:wrap}}
.srtable{width:100%;min-width:640px;border-collapse:separate;border-spacing:0 6px;table-layout:fixed}
.srtable th{text-align:left;font-size:11.5px;color:var(--muted);text-transform:uppercase;letter-spacing:.05em;padding:0 6px}
.srtable td{padding:0 4px;vertical-align:top}
.srtable .srmeta{min-width:0}
@media(max-width:760px){.srtable{min-width:0;table-layout:auto}.srtable thead{display:none}.srtable tr{display:grid;gap:6px;border:1px solid var(--edge);border-radius:12px;padding:8px;margin-bottom:8px}
  .srtable td::before{content:attr(data-label);display:block;font-size:11px;color:var(--muted);text-transform:uppercase}}
.srsave{position:sticky;bottom:10px;display:flex;align-items:center;gap:12px;flex-wrap:wrap;background:rgba(255,255,255,.95);border:1px solid var(--edge);border-radius:14px;padding:10px 14px;box-shadow:0 10px 24px -18px rgba(11,42,85,.6)}
.srcheck{list-style:none;padding:0;margin:0 0 14px;display:grid;gap:6px}
.srcheck li{padding-left:26px;position:relative;font-size:14px;color:#8A5A00}
.srcheck li::before{content:'!';position:absolute;left:0;top:0;width:18px;height:18px;border-radius:50%;background:#FFF1CF;display:grid;place-items:center;font-size:11px;font-weight:700}
.srcheck li.ok{color:#17784A}.srcheck li.ok::before{content:'✓';background:#E1F5E8}
.srdecide{margin-top:12px;border:1px solid #D6E3F5;border-radius:14px;padding:14px;background:#F7FAFF}
.srnote{margin-top:16px;border:1px dashed #E6C874;border-radius:12px;padding:12px;background:#FFFCF3;display:flex;flex-direction:column;gap:8px}
.srnote .ic{width:15px;height:15px;color:#8A5A00}
.srlog{list-style:none;padding:0;margin:0;display:grid;gap:6px;font-size:13.5px;max-height:360px;overflow:auto}
.srlog li{padding:6px 10px;border-left:3px solid #D6E3F5;background:#FAFCFF;border-radius:0 8px 8px 0}
.srside{display:flex;flex-direction:column;gap:8px}
.srsidelogo{display:flex;align-items:center;gap:12px;margin-bottom:4px}
.srsidelogo > svg{width:52px;height:52px}
.srsidelogo b{font-family:Poppins,sans-serif;color:var(--navy)}
.srlist{margin:8px 0 0;padding-left:18px;display:grid;gap:6px}
.srarch summary{cursor:pointer;display:flex;align-items:center;gap:8px;color:var(--navy);padding:4px 0}
.srarch details{margin-left:18px}
form.busy{opacity:.75}

/* ---------- Administration Office: ticket left, conversation right ---------- */
.split.officeview{grid-template-columns:minmax(0,1fr) 400px}
.officeview .actionbox{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:10px;align-items:start}
.officeview .actionbox > h3,.officeview .actionbox > p{grid-column:1/-1}
.officeview .actionbox > details,.officeview .actionbox > form{margin:0!important}
.officeconvo{position:static}
.officeconvo .thread{max-height:none}
@media(max-width:1080px){.split.officeview{grid-template-columns:1fr}.officeconvo{position:static;max-height:none}}
.officeview .actionbox > form .btn{width:100%;margin:0}
.statusform{display:flex;flex-direction:column;gap:8px;padding:12px;border:1px solid #CFE0F7;border-radius:12px;background:#F5F9FF}
.statusform select,.statusform textarea{width:100%;border:1px solid #D6E0EC;border-radius:10px;padding:9px 11px;font:inherit;background:#fff}
.officeview .actionbox > .statusform{grid-column:1/-1}

/* 28.15 — company and language as a small line under the name; AI icsone at the top right */
.userblock{display:flex;flex-direction:column;align-items:flex-start;gap:0}
.userprefs{display:flex;align-items:center;gap:6px;padding-left:56px;margin-top:-4px}
.userprefs .entitypick{height:24px;border:0;background:none;padding:0;gap:3px;color:var(--muted)}
.userprefs .entitypick .ic{width:13px;height:13px}
.userprefs .entitypick select{font-size:11.5px;font-weight:600;color:var(--muted);padding:0 2px;min-width:0}
.userprefs .toplang>summary{height:24px;padding:0 4px;font-size:11.5px;color:var(--muted);gap:3px;border-radius:6px}
.userprefs .toplang>summary .ic{width:13px;height:13px}
.userprefs .entitypick+.toplang::before{content:"·";color:var(--muted);margin-right:2px}
.userprefs .toplang{display:flex;align-items:center}
.topai{display:block;position:relative;height:44px;padding:2px 8px;border-radius:12px;border:1px solid var(--edge);background:#fff}
.topai svg{height:40px;width:auto;display:block}
.topai:hover,.topai.on{border-color:var(--blue);box-shadow:0 0 0 3px rgba(21,101,216,.12)}
.topai .badge{position:absolute;top:-6px;right:-6px}
@media(max-width:720px){.userprefs{display:none}.topai svg{height:32px}.topai{height:36px}}

/* 28.18 — a client's own logo at the top of their portal. */
/* 28.42.1 — the client's own logo, at twice the size it was. */
.orglogo{max-height:92px;max-width:380px;object-fit:contain;margin-right:16px;flex:0 0 auto}
@media(max-width:700px){.orglogo{max-height:68px;max-width:220px;margin-right:12px}}

/* ------------------------------------------------------------------ *
 * 28.23 — the support desk's actions: one line of small buttons.
 *
 * Each button opens its own little form under it rather than growing the
 * page, so the four things somebody does to a ticket — who it is with, that
 * it is being worked on, that the client has to answer, that it is done —
 * stay readable at a glance.
 * ------------------------------------------------------------------ */
/* The row spans the whole actions panel — it is not one of its columns. */
.officeview .actionbox > .actionrow{grid-column:1/-1}
.actionrow{display:flex;flex-wrap:wrap;gap:6px;align-items:flex-start}
.actionrow > form{margin:0}
.actionrow > details{margin:0;position:relative}
.actionrow > details > summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:6px;
  background:var(--surface);border:1px solid var(--line);border-radius:9px;padding:6px 10px;
  font-size:12.5px;font-weight:600;color:var(--text);white-space:nowrap}
.actionrow > details > summary::-webkit-details-marker{display:none}
.actionrow > details > summary:hover{border-color:var(--brand);color:var(--brand)}
.actionrow > details[open] > summary{border-color:var(--brand);color:var(--brand)}
.actionrow > details > form{position:absolute;z-index:30;top:calc(100% + 6px);width:min(330px,80vw);
  display:flex;flex-direction:column;gap:8px;background:var(--surface);border:1px solid var(--line);
  border-radius:12px;padding:12px;box-shadow:var(--shadow)}
.actionrow > details > form textarea,.actionrow > details > form select,.actionrow > details > form input{width:100%}
.actionrow .btn.sm{padding:6px 10px;font-size:12.5px;white-space:nowrap}
.actionrow .btn.sm .ic,.actionrow > details > summary .ic{width:14px;height:14px}
@media(max-width:620px){
  .actionrow > details{position:static!important}
  .actionrow > details > form{position:static!important;width:100%;margin-top:6px}
}

/* ------------------------------------------------------------------ *
 * 34.5 — a client still waiting for a first answer.
 *
 * Two colours and no more. Orange says somebody should look today; red says
 * somebody should have looked already. A third colour would turn the list
 * into decoration, and a row that is merely open is not news.
 * ------------------------------------------------------------------ */
.st.orange{background:#FFEBD6;color:#A04A00}
.st.redhot{background:#FDE3E1;color:#B3261E}
tr.age-orange td.first{box-shadow:inset 3px 0 0 #E08A1E}
tr.age-red td.first{box-shadow:inset 3px 0 0 #C4331D}
tr.age-red{background:#FFF8F7}
.agebar{display:flex;align-items:center;gap:10px;padding:11px 14px;border-radius:12px;
  font-weight:600;font-size:14px;margin:0 0 4px}
.agebar.orange{background:#FFF3E3;color:#A04A00;border:1px solid #F3D3A8}
.agebar.red{background:#FDECEA;color:#B3261E;border:1px solid #F3BDB5}
.agebar .small{font-weight:500;font-size:13px;opacity:.9}
.wa{display:inline-flex;align-items:center;gap:7px;background:#25D366;color:#fff;
  text-decoration:none;padding:8px 13px;border-radius:9px;font-weight:600;font-size:13.5px}
.wa:hover{background:#1FB757}
.bcard.age-orange{border-left:3px solid #E08A1E}
.bcard.age-red{border-left:3px solid #C4331D}

/* ------------------------------------------------------------------ *
 * 34.7 — Settings → Roles.
 *
 * A role folded shut until somebody opens it, and its permissions laid out
 * as cards across the page instead of one long column. Thirty-six ticks in
 * a column is a list nobody reads to the end; the same thirty-six in eleven
 * labelled boxes is a job description.
 * ------------------------------------------------------------------ */
.rolecard{border:1px solid var(--edge);border-radius:14px;background:#fff;margin-bottom:12px;overflow:hidden}
.rolecard>summary{list-style:none;cursor:pointer;padding:14px 16px}
.rolecard>summary::-webkit-details-marker{display:none}
.rolecard>summary:hover{background:#F7FAFF}
.rolecard[open]>summary{border-bottom:1px solid var(--edge);background:#F7FAFF}
.rolehead{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap}
.rolehead strong{font-size:16px;color:#0B2A55}
.rolehead .mono{margin-left:8px;font-size:12px}
.rolesum{margin:3px 0 0;font-size:13px}
.rolemeta{display:flex;gap:6px;flex:none}
.permgrid{display:grid;gap:12px;grid-template-columns:1fr}
@media(min-width:760px){.permgrid{grid-template-columns:1fr 1fr}}
@media(min-width:1180px){.permgrid{grid-template-columns:1fr 1fr 1fr}}
.permbox{border:1px solid var(--edge);border-radius:12px;padding:12px 13px;background:#FCFDFF}
.permbox.keys{border-color:#F0D2CC;background:#FFFBFA}
.permbox>header{display:flex;align-items:center;gap:8px;margin-bottom:8px;flex-wrap:wrap}
.permcount{font-size:11.5px;font-weight:700;color:var(--muted);background:#EEF3FA;border-radius:999px;padding:2px 8px}
.permbox.keys .permcount{background:#FDE3E1;color:#B3261E}
.permall{margin-left:auto;display:flex;gap:8px}
.linky{background:none;border:0;padding:0;font:inherit;font-size:12px;color:var(--blue);cursor:pointer;text-decoration:underline}
.linky:hover{color:#0B2A55}
.permnote{margin:0 0 8px;font-size:12.5px}
label.check.perm{align-items:flex-start;padding:5px 0}
label.check.perm input{margin-top:3px}
.permhint{display:block;font-size:12.3px;line-height:1.45;margin-top:2px}
.keymark{display:inline-block;font-size:10px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
  background:#FDE3E1;color:#B3261E;border-radius:5px;padding:1px 5px;vertical-align:1px}

/* ------------------------------------------------------------------ *
   34.8 — choosing what goes on a ticket's paper, and what a report is
   written from. Both read as a short list of plain choices rather than a
   form: they are read once, answered once and pressed.
 * ------------------------------------------------------------------ */
.paperbox { gap: 10px; }
.talkpick, .srcpick {
  border: 1px solid #E1E8F2; border-radius: 12px; padding: 10px 12px; margin: 0;
  background: #F8FAFE;
}
.talkpick > legend, .srcpick > legend {
  font-family: Poppins, Inter, sans-serif; font-size: 12px; font-weight: 600;
  color: #5A6270; letter-spacing: .02em; padding: 0 4px;
}
.talkpick label, .srcpick label {
  display: flex; align-items: flex-start; gap: 8px; padding: 3px 0;
  font-size: 13.5px; color: #22344F; cursor: pointer;
}
.talkpick input, .srcpick input { margin: 3px 0 0; flex: none; }

/* 34.8 — a video clip attached to a record, played where it was attached. */
.thumbs .clip { margin: 0; width: 180px; }
.thumbs .clip video {
  width: 180px; height: 120px; display: block; border-radius: 10px;
  background: #0B2A55; object-fit: cover;
}
.thumbs .clip figcaption {
  font-size: 11.5px; color: #5A6270; margin-top: 4px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 180px;
}

/*
 * 36.12.1 — room for the phone's own furniture.
 *
 * An installed app on an iPhone can be drawn under the status bar, and a
 * page drawn under the status bar has to reserve that strip itself or the
 * clock lands on the title and the signal bars land on the buttons — which
 * is exactly what 36.12.0 did to Tony: the menu and the account menu could
 * not be opened at all, because the taps were going to the status bar.
 *
 * pwahead.ejs now tells iOS to keep the status bar to itself, which fixes
 * it outright. These rules are the second line: wherever the browser does
 * report an inset — a notch in landscape, a home indicator at the foot,
 * Android's gesture bar — the bars and the page now leave room for it.
 *
 * Every one of them is env(...) with a 0px default, so on a desktop and on
 * any browser that reports nothing they compute to exactly the padding that
 * was there before. Nothing moves anywhere it was already right.
 */
.apptop{padding-top:calc(14px + env(safe-area-inset-top,0px));
  padding-left:calc(32px + env(safe-area-inset-left,0px));
  padding-right:calc(32px + env(safe-area-inset-right,0px));
  min-height:calc(84px + env(safe-area-inset-top,0px))}
.appside{padding-top:env(safe-area-inset-top,0px);padding-left:env(safe-area-inset-left,0px)}
.stubar,.pubbar{padding-top:calc(10px + env(safe-area-inset-top,0px));
  padding-left:calc(32px + env(safe-area-inset-left,0px));
  padding-right:calc(32px + env(safe-area-inset-right,0px));
  min-height:calc(74px + env(safe-area-inset-top,0px))}
.stunav{padding-top:calc(64px + env(safe-area-inset-top,0px))}
/*
 * And the foot.
 *
 * Two things sit under it: the phone's home indicator, and the support
 * assistant, which floats at the bottom right of every page. The footer is
 * the last thing on the page, so the moment anybody scrolls far enough to
 * read it the button is on top of it — covering the build number on a phone
 * and the web address on a desktop. The build number is the one thing that
 * says for certain which version answered you, so it is not a good thing to
 * hide.
 *
 * The footer leaves room for both. 56px is the assistant's own height plus
 * the 20px it stands off the bottom.
 */
.sitefoot2{padding-bottom:calc(18px + 56px + env(safe-area-inset-bottom,0px))}
@media(max-width:1080px){
  .apptop{padding-top:calc(10px + env(safe-area-inset-top,0px));
    padding-left:calc(16px + env(safe-area-inset-left,0px));
    padding-right:calc(16px + env(safe-area-inset-right,0px));
    min-height:calc(64px + env(safe-area-inset-top,0px))}
  .sitefoot2{padding-bottom:calc(16px + 56px + env(safe-area-inset-bottom,0px))}
}
@media(max-width:900px){
  .stubar{padding-top:calc(8px + env(safe-area-inset-top,0px));
    padding-left:calc(14px + env(safe-area-inset-left,0px));
    padding-right:calc(14px + env(safe-area-inset-right,0px));
    min-height:calc(62px + env(safe-area-inset-top,0px))}
}
@media print{
  .apptop,.appside,.stubar,.pubbar,.stunav,.sitefoot2{padding:revert;min-height:revert}
}

/*
 * 36.12.1 — and the title on a phone, while the header is open on the bench.
 *
 * "Administration & Staff" was arriving as "Ad…". The row is the menu
 * button, the title, the AI-Smart badge, the bell and the avatar, and on a
 * 393px screen the badge — which is a picture of a logo and not a control
 * anybody is hunting for — was taking the room the title needed to say
 * which page you are on.
 *
 * Below 560px the badge steps out. It is still in the menu, where its own
 * entry has always been, and the title gets the width back.
 */
@media(max-width:560px){
  .topai{display:none}
  .toptitle h1{font-size:16px}
}

/*
 * 36.13 — the panel tabs, under a thumb.
 *
 * My tasks / Approvals / Team queue on the Workspace, and the four across
 * the reports: 29px tall, and between them the most-pressed controls in the
 * portal. This rule is in shell.css and not in app.css with the rest of the
 * 36.13 sizing because shell.css is loaded second, and the .ptabs rule it
 * already carries would otherwise win.
 */
@media(max-width:760px){
  .ptabs a{padding:14px 13px;font-size:15px;min-height:44px;display:flex;align-items:center}
  .ptabs a .n{font-size:12.5px;padding:2px 8px}
}