/* =====================================================================================================================
   Prezlab Today: design foundation (design.css)
   ---------------------------------------------------------------------------------------------------------------------
   What this file holds
   - The brand fonts, the color, space and type tokens with Light and Dark themes, the app shell (rail, phone header,
     tab bar, More sheet, account menu, sync line) and global restyles of the existing component classes, so every
     page already looks right at a basic level.
   - style.css, brand.css and auth.css (the legacy styles) still load first. This file wins by order; where a legacy
     selector is more specific, the rule here repeats that selector (search the legacy files before restyling).

   Load order (static/index.html, every file is in the server allowlist)
     theme.js (blocking: sets data-theme before the first paint) > style.css > brand.css > auth.css > design.css
     > design-work.css > design-requests.css > design-admin.css

   Page styles go in one file per page area, loaded after this one. Never add page rules here:
     design-work.css      Projects, My tasks and All tasks, the task page, Planning
     design-requests.css  Time off, Overtime, Expenses, Time Off Management, Utilization
     design-admin.css     IT Support, Admin, Profile, Messages, the sign-in gate
   Rules for page files
     - Colors only through the tokens below (var(--ink), var(--panel), ...), never raw hex, so both themes work.
       The palette tokens (--lavender, --orange, ...) are the same in both themes; text on them is --dark-teal.
     - Scope rules to the page: the body classes .planning-page, .task-page and .profile-page, the page's own
       wrapper class (.ut-page, .admin-page, ...) or the classes its script renders into #content.
     - Square corners, no shadows, 1px borders in --line (--line-strong for emphasis), 2px gaps between color
       blocks, Figtree for text and PP Editorial New italic only for accents (big numbers, an <em> in a title).
     - Keep every ID and data-* attribute: the scripts and the UI tests (test_*.cjs) read them.

   Theme
     <html data-theme="light|dark"> forces a theme; without the attribute the device decides (System). theme.js
     keeps the choice in localStorage (nasma.theme) and the account menu sets it. Dark values live in two blocks
     below (the media query and the attribute); a new semantic token needs a value in both.

   Tokens
     Palette    --dark-teal --teal-900 --teal-800 --teal-700 --light-teal --sand --slate --slate-300 --off-white
                --white --burgundy --orange --lavender --yellow (the same in both themes)
     Semantic   --bg (canvas) --panel (color blocks, cards) --ink (text) --ink-soft (secondary text) --line
                --line-strong --btn / --btn-ink (primary button) --accent (selected) --focus --scrim --danger
                --danger-soft --success --soft (subtle tint)
     Rail       --rail --rail-ink --rail-soft --rail-hover --rail-line (the rail is dark teal in both themes)
     Type       --sans (Figtree) --editorial (PP Editorial New italic; weights 400 and 200)
     Space      --s1 4px  --s2 8px  --s3 12px  --s4 16px  --s5 24px  --s6 48px
     Size       --control 40px  --control-sm 32px  --rail-w 248px  --content-max 1280px  --gutter (page side)
     Legacy     --muted --primary --page --surface --soft --link --radius --r-control --r-inner --r-chip
                --h-control --h-compact are mapped onto the tokens, so the legacy rules follow the theme too.

   Components (existing class names restyled; "new" marks classes added for page files to use)
     Buttons      .button, .button.primary, .button.danger, .button.ghost, .button.icon, td .button (compact),
                  .icon-button (40px square)
     Fields       input, select, textarea, label, .search-box, kbd, [aria-invalid="true"]
     Segmented    .segmented, .view-tabs, .ut-view-toggle, .seg (new); on: [aria-pressed="true"], .active,
                  [aria-current="page"]
     Chips        .status-filters button, .chip (new); on: [aria-pressed="true"]
     Panels       .panel and .panel-head (new), .metrics/.metric, .project-card, .timeoff-balance, .team-request,
                  .ut-panel, .loading-card
     Tables       .table-wrap > table, th, td; buttons and links in cells read as links
     Empty        .empty (its strong is the headline), .planning-empty, .team-empty
     Labels       .pill + .pending .approved .declined .cancelled .draft .submitted (new), .badge (new),
                  .task-status-label (.open .closed), .ut-status, .tag, .admin-badge, .eyebrow
     Dialogs      every <dialog> is the design's sheet: a side panel on desktop, a bottom sheet on phones;
                  .dialog-heading is its sticky head, .dialog-actions its sticky foot
     Toast        #toast and #toast.error
     Page header  #breadcrumbs, #page-title (an <em> inside is set in PP Editorial italic), #page-subtitle,
                  #request-tabs (new: Time off | Overtime | Expenses)
     Shell        .rail, .wordmark (new), .tabbar (new), #more-sheet (new), .me (new, the account button),
                  .user-menu, .sync (new, the sync line)
     Utilities    .i (20px stroke icon), .ed (editorial accent), .sr-only, .muted, .num (tabular figures)
   ===================================================================================================================== */

/* ---------- Fonts (self-hosted; Prezlab holds the web license for PP Editorial New) ---------- */
@font-face{font-family:"Figtree Brand";src:url("/fonts/Figtree-Variable.ttf") format("truetype");font-weight:300 900;font-style:normal;font-display:swap}
@font-face{font-family:"PP Editorial New";src:url("/fonts/PPEditorialNew-Italic.otf") format("opentype");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"PP Editorial New";src:url("/fonts/PPEditorialNew-UltralightItalic.otf") format("opentype");font-weight:200;font-style:italic;font-display:swap}

/* ---------- Tokens: Light (default) ---------- */
:root{
 --dark-teal:#002528;--teal-900:#043135;--teal-800:#0d3d42;--teal-700:#1d4a50;--light-teal:#b6edf3;--sand:#e3d8cc;--slate:#62848c;
 --slate-300:#bfcfd2;--off-white:#f4f6f6;--white:#fff;--burgundy:#40182d;--orange:#ff7c4a;--lavender:#cabefc;--yellow:#f9f99b;
 --sans:"Figtree Brand",Figtree,"Segoe UI",system-ui,-apple-system,sans-serif;--editorial:"PP Editorial New",Georgia,"Times New Roman",serif;
 --bg:var(--white);--panel:var(--off-white);--ink:var(--dark-teal);--ink-soft:#3c5b60;--line:#d3dfe1;--line-strong:var(--slate);
 --btn:var(--dark-teal);--btn-ink:var(--off-white);--accent:var(--light-teal);--focus:var(--dark-teal);--scrim:rgba(0,37,40,.42);
 --danger:var(--burgundy);--danger-soft:#f4e9ee;--success:#2fae8f;--soft:#e6f6f8;--gate-card:var(--white);
 --rail:var(--dark-teal);--rail-ink:var(--off-white);--rail-soft:var(--slate-300);--rail-hover:var(--teal-900);--rail-line:var(--teal-700);
 --s1:4px;--s2:8px;--s3:12px;--s4:16px;--s5:24px;--s6:48px;
 --control:40px;--control-sm:32px;--rail-w:248px;--content-max:1280px;--gutter:clamp(16px,4vw,48px);
 --muted:var(--ink-soft);--primary:var(--ink);--page:var(--panel);--surface:var(--bg);--link:var(--ink);
 --radius:0;--r-control:0;--r-inner:0;--r-chip:0;--h-control:var(--control);--h-compact:var(--control-sm);
 color-scheme:light;font-family:var(--sans);color:var(--ink);
}
/* ---------- Tokens: Dark (System on a dark device, or the Dark choice) ---------- */
@media (prefers-color-scheme:dark){
 :root:not([data-theme="light"]){
  --bg:var(--dark-teal);--panel:var(--teal-900);--ink:var(--off-white);--ink-soft:var(--slate-300);--line:#1d4a50;--line-strong:var(--slate);
  --btn:var(--light-teal);--btn-ink:var(--dark-teal);--focus:var(--light-teal);--scrim:rgba(0,12,14,.6);
  --danger:#f2a8c4;--danger-soft:#33192a;--soft:var(--teal-800);--gate-card:var(--teal-900);
  --level-low-fg:#ffb4b4;--level-mid-fg:#f3d27a;--level-high-fg:#9fe0aa;color-scheme:dark;
 }
}
:root[data-theme="dark"]{
 --bg:var(--dark-teal);--panel:var(--teal-900);--ink:var(--off-white);--ink-soft:var(--slate-300);--line:#1d4a50;--line-strong:var(--slate);
 --btn:var(--light-teal);--btn-ink:var(--dark-teal);--focus:var(--light-teal);--scrim:rgba(0,12,14,.6);
 --danger:#f2a8c4;--danger-soft:#33192a;--soft:var(--teal-800);--gate-card:var(--teal-900);
 --level-low-fg:#ffb4b4;--level-mid-fg:#f3d27a;--level-high-fg:#9fe0aa;color-scheme:dark;
}

/* ---------- Base ---------- */
html{background:var(--bg);scroll-padding-top:var(--s4)}
body{margin:0;min-height:100vh;background:var(--bg);color:var(--ink);font:500 14px/1.45 var(--sans);letter-spacing:-.005em;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
button,input,select,textarea{font-family:inherit;letter-spacing:inherit}
h1,h2,h3,h4{font-family:var(--sans);text-wrap:balance}
::selection{background:var(--accent);color:var(--dark-teal)}
:focus-visible,button:focus-visible,a:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
button:disabled{opacity:.45;cursor:not-allowed}
a{color:inherit}
.i{width:20px;height:20px;flex:none;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;vertical-align:middle}
.ed,em.ed{font-family:var(--editorial);font-style:italic;font-weight:400;letter-spacing:-.03em}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
.num,.tnum{font-variant-numeric:tabular-nums}
.muted{color:var(--ink-soft)}
.danger{color:var(--danger)}
.required-star{color:var(--orange)}

/* ---------- Wordmark: the logo + italic "today" ----------
   The logo is the official vector from the brand guidelines (page 13), one symbol in index.html (#prezlab-logo):
   the logotype and the colon, which spans the x-height and sits on the baseline. The letters take the text color;
   the colon takes --logo-mark (here the light teal of "today"; elsewhere the letters' color). Its baseline is 79.88%
   down the box, so the box moves down by the rest to share the baseline with "today". */
.wordmark{display:inline-flex;align-items:baseline;gap:2px;padding-inline:var(--s2);font:700 22px/1 var(--sans);letter-spacing:-.03em;color:var(--off-white);text-decoration:none;white-space:nowrap}
.wordmark .logo{display:block;flex:none;width:calc(19px * 923.74 / 212.24);height:19px;fill:currentColor;--logo-mark:var(--light-teal);transform:translateY(calc(19px * .2012))}
.wordmark small{margin-inline-start:var(--s2);font:italic 400 20px/1 var(--editorial);letter-spacing:-.02em;color:var(--light-teal)}

/* ---------- Shell: rail on the left, page on the right ---------- */
.layout{display:grid;grid-template-columns:var(--rail-w) minmax(0,1fr);min-height:100vh;min-height:100dvh}
.rail{position:sticky;top:0;z-index:20;display:flex;flex-direction:column;gap:var(--s5);height:100vh;height:100dvh;min-width:0;padding:var(--s5) 0 var(--s4);background:var(--rail);color:var(--rail-ink);border-inline-end:1px solid var(--line)}
.rail-brand{align-self:flex-start;margin-inline:var(--s4)}
.rail-scroll{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;display:flex;flex-direction:column;gap:var(--s5);padding-inline:var(--s4);scrollbar-width:thin;scrollbar-color:var(--rail-line) transparent}
#workspace-nav{display:grid;gap:2px}
.rail .side-link:not(.nav-group),.rail .nav-group-toggle,.rail .rail-item,.rail .assistant-launch{position:relative;display:flex;align-items:center;justify-content:flex-start;gap:var(--s3);width:100%;min-height:40px;margin:0;padding:9px var(--s3);border:0;border-radius:0;background:none;color:var(--rail-soft);font:600 14.5px/1.2 var(--sans);letter-spacing:-.005em;text-align:start;text-decoration:none;box-shadow:none;cursor:pointer}
.rail .side-link:not(.nav-group):hover,.rail .nav-group-toggle:hover,.rail .rail-item:hover,.rail .assistant-launch:hover{background:var(--rail-hover);color:var(--rail-ink)}
.rail .side-link[aria-current="page"],.rail .side-link[aria-current="page"]:hover,.rail .nav-child[aria-current="page"],.rail .nav-child[aria-current="page"]:hover{background:var(--light-teal);color:var(--dark-teal)}
.rail :focus-visible{outline:2px solid var(--light-teal);outline-offset:-2px}
.rail [aria-current="page"]:focus-visible,.rail .nav-group.active>.nav-group-toggle[aria-expanded="false"]:focus-visible{outline-color:var(--dark-teal);outline-offset:-4px}
.rail .nav-label{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rail .nav-group,.rail .nav-group.active{display:block;margin:0;padding:0;border:0;border-radius:0;background:none;color:inherit;font-weight:inherit}
.rail .nav-group-toggle .chev{width:16px;height:16px;margin-inline-start:auto;opacity:.7;transition:transform .15s ease}
.rail .nav-group-toggle[aria-expanded="true"] .chev{transform:rotate(180deg)}
.rail .nav-group.active>.nav-group-toggle{color:var(--rail-ink)}
.rail .nav-group.active>.nav-group-toggle[aria-expanded="false"]{background:var(--light-teal);color:var(--dark-teal)}
.rail .nav-submenu{display:grid;gap:2px;padding:2px 0 4px}
.rail .nav-child{display:flex;align-items:center;gap:var(--s2);width:100%;min-height:36px;margin:0;padding:8px var(--s3) 8px 44px;border:0;border-radius:0;background:none;color:var(--rail-soft);font:600 13.5px/1.2 var(--sans);text-align:start;cursor:pointer}
.rail .nav-child:hover{background:var(--rail-hover);color:var(--rail-ink)}
.rail .nav-child b{margin-inline-start:auto;padding:0;border-radius:0;background:none;font:700 11.5px/1 var(--sans);opacity:.75}
/* Starred projects, the create button and Create with Nasma (both stay hidden while the mirror is read-only) */
.rail-projects{display:grid;gap:2px}
.rail .sidebar-heading{display:flex;align-items:center;justify-content:space-between;gap:var(--s2);margin:0;padding:0 var(--s3) var(--s2);font:700 11.5px/1 var(--sans);letter-spacing:.06em;text-transform:uppercase;color:var(--rail-soft)}
.rail .sidebar-heading button{display:grid;place-items:center;width:28px;height:28px;padding:0;border:1px solid var(--rail-line);border-radius:0;background:none;color:var(--rail-ink);cursor:pointer}
.rail .sidebar-heading button .i{width:16px;height:16px}
#project-nav{display:grid;gap:2px}
.rail #project-nav .side-link{min-height:36px;padding-block:8px;font-size:13.5px}
.rail .project-dot{width:10px;height:10px;flex:none;border-radius:50%;outline:1px solid rgba(244,246,246,.3)}
.rail .nav-title{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rail .nav-drag-handle{position:absolute;inset-inline-start:-14px;top:50%;display:inline-flex;align-items:center;justify-content:center;width:12px;height:24px;margin:0;transform:translateY(-50%);color:var(--rail-soft);font-size:0;opacity:0;cursor:grab;user-select:none}
.rail #project-nav .side-link:hover .nav-drag-handle,.rail #project-nav .side-link:focus-visible .nav-drag-handle{opacity:.8}
.rail .nav-drag-handle:active{cursor:grabbing}
.rail .nav-drag-handle svg{display:block;pointer-events:none}
.rail .side-link.nav-dragging{opacity:.4}
.rail .side-link.nav-drop-before{box-shadow:inset 0 2px 0 var(--light-teal)}
.rail .side-link.nav-drop-after{box-shadow:inset 0 -2px 0 var(--light-teal)}
.rail .assistant-launch{border:1px solid var(--rail-line);color:var(--rail-ink);font-size:13.5px}
.rail .assistant-launch .i:first-child{color:var(--light-teal)}
.rail .assistant-launch .i:last-child{width:16px;height:16px;margin-inline-start:auto;opacity:.7}
/* Rail foot: Messages, the sync line and the account button with its menu */
.rail-foot{display:grid;gap:var(--s1);margin-inline:var(--s4);padding-top:var(--s3);border-top:1px solid var(--rail-line)}
.rail .inbox-button svg{width:20px;height:20px;stroke-width:1.6}
.badge{display:inline-grid;place-items:center;min-width:20px;height:20px;padding:0 6px;border-radius:999px;background:var(--yellow);color:var(--dark-teal);font:700 11.5px/1 var(--sans)}
.rail .inbox-button .badge{position:static;display:inline-grid;place-items:center;min-width:20px;height:20px;margin-inline-start:auto;padding:0 6px;border-radius:999px;background:var(--yellow);color:var(--dark-teal);font:700 11.5px/1 var(--sans)}
.sync{display:flex;align-items:center;gap:var(--s2);width:100%;min-height:32px;margin:0;padding:6px var(--s3);border:0;border-radius:0;background:none;color:var(--ink-soft);font:500 12.5px/1.3 var(--sans);text-align:start;cursor:pointer}
.rail .sync{color:var(--rail-soft)}
.rail .sync:hover{color:var(--rail-ink)}
.sync .dot{width:8px;height:8px;flex:none;border-radius:50%;background:var(--success)}
.sync.is-busy{cursor:progress}
.sync.is-busy .dot{background:var(--orange);animation:sync-pulse .8s ease-in-out infinite}
.sync.is-error .dot{background:var(--orange)}
.sync:hover .sync-text{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
@keyframes sync-pulse{50%{opacity:.35}}
.user-menu-container{position:relative;display:block}
#profile-avatar.me{display:flex;align-items:center;gap:var(--s3);width:100%;height:auto;margin:0;padding:var(--s2);border:0;border-radius:0;background:none;color:var(--rail-ink);text-align:start;overflow:hidden;cursor:pointer}
#profile-avatar.me:hover,#profile-avatar.me[aria-expanded="true"]{background:var(--rail-hover)}
.me-avatar{display:grid;place-items:center;width:34px;height:34px;flex:none;overflow:hidden;border:0;border-radius:50%;background:var(--lavender);color:var(--dark-teal);font:700 13px/1 var(--sans)}
.me-avatar img{display:block;width:100%;height:100%;object-fit:cover;border-radius:50%}
.me-txt{display:grid;min-width:0}
.me-txt b{overflow:hidden;font-size:13.5px;font-weight:700;text-overflow:ellipsis;white-space:nowrap}
.me-txt span{overflow:hidden;font-size:12px;color:var(--rail-soft);text-overflow:ellipsis;white-space:nowrap}
.me-txt b:empty,.me-txt span:empty{display:none}
.user-menu{position:absolute;inset:auto auto calc(100% + var(--s2)) 0;z-index:60;display:grid;width:260px;max-width:calc(100vw - 32px);padding:6px;border:1px solid var(--line-strong);border-radius:0;background:var(--bg);color:var(--ink);box-shadow:none}
.user-menu .mh{display:grid;gap:2px;margin-bottom:6px;padding:10px;border-bottom:1px solid var(--line)}
.user-menu .mh b{font-size:14px}
.user-menu .mh .me-title{font-size:12.5px;color:var(--ink-soft)}
.user-menu .mh b:empty,.user-menu .mh .me-title:empty{display:none}
#auth-identity{max-width:none;margin-bottom:2px;overflow:visible;font:700 11px/1.3 var(--sans);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-soft)}
#auth-identity:empty{display:none}
.user-menu>button{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);width:100%;padding:10px;border:0;border-radius:0;background:none;color:var(--ink);font:600 13.5px/1.2 var(--sans);text-align:start;cursor:pointer}
.user-menu>button:hover,.user-menu>button[aria-current="page"]{background:var(--panel)}
.user-menu>button:focus-visible{outline:2px solid var(--focus);outline-offset:-2px;background:var(--panel)}
.rail .user-menu :focus-visible{outline:2px solid var(--focus);outline-offset:-2px}
#auth-sign-out{color:var(--ink)}
.user-menu .lbl{padding:10px 10px 4px;font:700 11px/1 var(--sans);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-soft)}
.user-menu .theme-choice{display:flex;margin:0 10px 8px}
.user-menu .theme-choice button{flex:1;justify-content:center}
.user-menu-footer{margin-top:6px;padding:10px;border-top:1px solid var(--line)}
.user-menu-footer .local-label{display:flex;align-items:center;gap:var(--s2);font-size:12px;line-height:1.4;white-space:normal;color:var(--ink-soft)}
.local-label i{display:inline-block;flex:none;width:6px;height:6px;border-radius:50%;background:var(--success)}

/* ---------- Page area ---------- */
main{min-width:0;padding-block:28px 64px;padding-inline:max(var(--gutter),calc((100% - var(--content-max)) / 2))}
.breadcrumbs{display:flex;flex-wrap:wrap;align-items:center;gap:6px;font:600 12.5px/1.4 var(--sans);letter-spacing:0;color:var(--ink-soft)}
.breadcrumbs>span{color:var(--line-strong)}
.breadcrumbs button{padding:0;border:0;background:none;color:inherit;font:inherit;text-decoration:underline;text-decoration-color:transparent;text-underline-offset:3px;cursor:pointer}
.breadcrumbs button:hover{color:var(--ink);text-decoration-color:currentColor}
.page-heading{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:var(--s4);margin:var(--s3) 0 var(--s5)}
.page-heading h1{margin:0;font:700 34px/1.05 var(--sans);letter-spacing:-.03em;color:var(--ink)}
.page-heading h1 em{font-family:var(--editorial);font-style:italic;font-weight:400;letter-spacing:-.035em;color:inherit}
.page-heading p{margin:var(--s2) 0 0;font-size:14.5px;line-height:1.45;color:var(--ink-soft)}
.page-heading p:empty{display:none}
.request-tabs{display:flex;width:fit-content;max-width:100%;margin-top:var(--s4)}
.request-tabs button::before{content:"";width:10px;height:10px;flex:none;background:var(--sw,var(--line))}
.request-tabs [data-nav="timeoff"]{--sw:var(--lavender)}
.request-tabs [data-nav="approvals"]{--sw:var(--orange)}
.request-tabs [data-nav="expenses"]{--sw:var(--sand)}
.work-surface{min-height:420px}
.toolbar{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s2);padding-bottom:var(--s4);border-bottom:1px solid var(--line)}
.view-tabs{margin-inline-end:auto}
.surface-meta{display:flex;justify-content:space-between;padding:var(--s4) 0 var(--s3);font-size:12.5px;color:var(--ink-soft)}

/* ---------- Buttons ---------- */
.button{display:inline-flex;align-items:center;justify-content:center;gap:var(--s2);min-height:var(--control);padding:0 var(--s4);border:1px solid var(--ink);border-radius:0;background:transparent;color:var(--ink);font:700 14px/1.2 var(--sans);letter-spacing:-.005em;white-space:nowrap;box-shadow:none;cursor:pointer}
.button:not(:disabled):not(.primary):hover{border-color:var(--ink);background:var(--panel)}
.button.primary{border-color:var(--btn);background:var(--btn);color:var(--btn-ink)}
.button.primary:hover{border-color:var(--btn);background:var(--btn)}
.button.primary:not(:disabled):hover{filter:brightness(1.15)}
.button.ghost{border-color:transparent;background:none}
.button.ghost:not(:disabled):hover{border-color:var(--line);background:none}
.button.danger{border-color:var(--danger);color:var(--danger)}
.button.danger:not(:disabled):hover{border-color:var(--danger);background:var(--danger-soft)}
.button.icon{width:var(--control);padding:0;font-size:16px}
.button:disabled{opacity:.45;cursor:not-allowed}
td .button{min-height:var(--control-sm);padding:0 var(--s3);font-size:13px}
.icon-button{display:inline-grid;place-items:center;width:var(--control);height:var(--control);flex:none;padding:0;border:1px solid var(--line);border-radius:0;background:var(--bg);color:var(--ink);font-size:20px;line-height:1;cursor:pointer}
.icon-button:hover{border-color:var(--ink)}
.dialog-heading .icon-button{border-color:var(--line);font-size:20px}

/* ---------- Fields ---------- */
label{gap:6px;font-size:13px;font-weight:700;color:inherit}
:where(input:not([type=checkbox],[type=radio],[type=range],[type=file],[type=color],[type=hidden],[type=image],[type=submit],[type=button],[type=reset])),select,textarea,
label input:not([type=checkbox]):not([type=radio]):not([type=file]),label select,label textarea,.toolbar select,td select,.timeoff-controls select,.timeoff-controls input,
.planning-group-label select,.planning-nav-segment select,.planning-week-nav input,.ut-filters select,.admin-filters select{min-height:var(--control);padding:0 12px;border:1px solid var(--line);border-radius:0;background-color:var(--bg);color:var(--ink);font:500 14px/1.3 var(--sans);letter-spacing:-.005em;box-shadow:none}
textarea,label textarea{min-height:88px;padding:10px 12px;line-height:1.5;resize:vertical}
select[multiple],#odoo-write-dialog select[multiple]{padding:6px}
:where(input:not([type=checkbox],[type=radio],[type=range],[type=file],[type=color],[type=hidden])):hover,select:hover,textarea:hover{border-color:var(--line-strong)}
input:focus,select:focus,textarea:focus{outline:2px solid transparent;outline-offset:0;border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
input[type=checkbox]:focus,input[type=radio]:focus{box-shadow:none}
input[type=checkbox]:focus-visible,input[type=radio]:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
input[type=checkbox],input[type=radio]{accent-color:var(--btn)}
[aria-invalid="true"]{border-color:var(--orange)!important;box-shadow:inset 0 0 0 1px var(--orange)}
::placeholder,.search-box input::placeholder{color:var(--ink-soft);opacity:.8}
.toolbar select{max-width:220px;font-size:13.5px}
td select{min-height:var(--control-sm);font-size:13px}
.search-box{display:flex;flex:1 1 220px;align-items:center;gap:var(--s2);min-height:var(--control);max-width:320px;padding:0 12px;border:1px solid var(--line);border-radius:0;background:var(--bg);color:var(--ink-soft)}
.toolbar .search-box{max-width:320px}
.planning-page .toolbar .search-box{max-width:560px}
.search-box:hover{border-color:var(--line-strong)}
.search-box:focus-within{border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
.search-box input{width:100%;min-width:0;min-height:0;padding:8px 0;border:0;background:none;color:var(--ink);font:500 14px/1.3 var(--sans);outline:none}
.search-box input:focus{outline:none;box-shadow:none}
kbd,.search-box kbd{padding:3px 6px;border:1px solid var(--line);border-radius:0;background:none;color:var(--ink-soft);font:600 11px/1 var(--sans)}

/* ---------- Segmented controls and chips ---------- */
.segmented,.view-tabs,.ut-view-toggle,.seg{display:inline-flex;flex-wrap:wrap;align-items:stretch;gap:2px;padding:2px;border:1px solid var(--line);border-radius:0;background:var(--bg)}
.segmented button,.view-tabs button,.ut-view-toggle button,.seg button{display:inline-flex;align-items:center;justify-content:center;gap:var(--s2);min-height:34px;padding:0 var(--s3);border:0;border-radius:0;background:none;color:var(--ink-soft);font:600 13px/1 var(--sans);white-space:nowrap;box-shadow:none;cursor:pointer}
.segmented button:hover,.view-tabs button:hover,.ut-view-toggle button:hover,.seg button:hover{color:var(--ink)}
.segmented [aria-pressed=true],.segmented [aria-current=page],.view-tabs .active,.ut-view-toggle [aria-pressed=true],.seg [aria-pressed=true]{background:var(--btn);color:var(--btn-ink);box-shadow:none}
.view-tabs .i{width:18px;height:18px}
.status-filters{display:flex;flex-wrap:wrap;gap:var(--s2);padding-top:var(--s4)}
.status-filters button,.chip{min-height:34px;padding:0 12px;border:1px solid var(--line);border-radius:0;background:var(--bg);color:var(--ink);font:700 13px/1 var(--sans);cursor:pointer}
.status-filters button:hover,.chip:hover{border-color:var(--ink);color:var(--ink)}
.status-filters button[aria-pressed=true],.chip[aria-pressed=true]{border-color:var(--accent);background:var(--accent);color:var(--dark-teal);font-weight:700}

/* ---------- Panels, cards and metrics ---------- */
.panel{display:grid;align-content:start;gap:var(--s4);min-width:0;padding:var(--s5);background:var(--panel)}
.panel-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--s3)}
.panel-head h2{margin:0;font:700 17px/1.2 var(--sans);letter-spacing:-.015em}
.eyebrow{margin:0;font:700 11.5px/1.2 var(--sans);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-soft)}
.metrics{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:2px;margin:0 0 var(--s5)}
.metric{position:relative;display:grid;align-content:start;gap:var(--s2);min-width:0;padding:var(--s5) var(--s4);border:0;border-radius:0;background:var(--panel)}
.metric-label{font:700 11.5px/1.2 var(--sans);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-soft)}
.metric-value{margin:0;font:700 28px/1 var(--sans);letter-spacing:-.02em;font-variant-numeric:tabular-nums;color:var(--ink)}
.project-card,.timeoff-balance,.team-request,.team-chip,.ut-panel,.loading-card,.support-notice,.task-sheet{border:0;border-radius:0;background:var(--panel);color:var(--ink);box-shadow:none}
.project-card{padding:var(--s5);transition:none}
.project-card:hover{transform:none;box-shadow:none;outline:1px solid var(--line-strong);outline-offset:-1px}
.project-card h2{font:700 17px/1.25 var(--sans);letter-spacing:-.015em}
.project-card h2 button{color:inherit}
.project-card p{font-size:13px;line-height:1.55;color:var(--ink-soft)}
.project-progress-label,.task-number{font-size:12px;color:var(--ink-soft)}
.project-card-bottom{border-top-color:var(--line)}
.progress-track{height:4px;border-radius:0;background:var(--line)}
.progress-track>div{border-radius:0}
.star{color:var(--line-strong)}
.star.on{color:var(--ink)}
.new-project-tile{border:1px dashed var(--line-strong);border-radius:0;color:var(--ink-soft)}
.new-project-tile span{border-radius:0;background:var(--accent);color:var(--dark-teal)}
.column{border-radius:0;background:var(--panel)}
.column-header{font:700 13px/1.2 var(--sans);color:var(--ink)}
.column-header .count{padding:2px 8px;border-radius:999px;background:var(--bg);color:var(--ink-soft);font:700 11.5px/1.2 var(--sans)}
.task-card{border:1px solid var(--line);border-radius:0;background:var(--bg);color:var(--ink);box-shadow:none}
.task-card:hover{border-color:var(--ink)}
.task-card h3{font:700 14px/1.4 var(--sans)}
.task-card .task-code,.due{font-size:12px;color:var(--ink-soft)}
.card-bottom{border-top-color:var(--line);font-size:12px;color:var(--ink-soft)}
.tag{display:inline-flex;align-items:center;padding:3px 8px;border:1px solid var(--line-strong);border-radius:0;background:transparent;color:var(--ink-soft);font:700 11.5px/1.2 var(--sans);white-space:nowrap}
.avatar{border-color:var(--bg)}
.priority.high,.priority.urgent{color:var(--danger)}
.pagination{color:var(--ink-soft);font-size:13px}

/* ---------- Tables ---------- */
.table-wrap{overflow:auto;border:0;border-radius:0;background:var(--panel)}
th{padding:14px var(--s4) 10px;border-bottom:1px solid var(--line-strong);background:transparent;color:var(--ink-soft);font:700 11.5px/1.2 var(--sans);letter-spacing:.06em;text-align:start;text-transform:uppercase}
td{padding:12px var(--s4);border-top:0;border-bottom:1px solid var(--line);color:var(--ink);font-size:13.5px;line-height:1.4;vertical-align:middle}
tbody tr:last-child td{border-bottom:0}
tbody tr:hover>td{background:color-mix(in srgb,var(--accent) 16%,transparent)}
tfoot th,tfoot td{border-top:1px solid var(--line-strong);border-bottom:0}
td button:not(.button),td a[href],dd a[href],.odoo-rich-text a[href]{color:var(--link);text-decoration-color:color-mix(in srgb,currentColor 45%,transparent)}
.ut-total td{background:var(--panel)}

/* ---------- Empty states ---------- */
.empty,.planning-empty{padding:var(--s6) var(--s4);color:var(--ink-soft);font-size:14px;line-height:1.6;text-align:center}
.empty strong,.planning-empty strong{display:block;margin-bottom:var(--s1);color:var(--ink);font:700 15px/1.3 var(--sans)}
.team-empty{border:0;border-radius:0;background:var(--panel);color:var(--ink-soft)}

/* ---------- Status labels, pills, badges ---------- */
.pill,.task-status-label,.ut-status,.admin-badge,.profile-link-status{display:inline-flex;align-items:center;gap:6px;min-height:24px;padding:0 10px;border-radius:999px;font:700 12px/1.1 var(--sans);white-space:nowrap;color:var(--dark-teal)}
.pill.pending{background:var(--yellow)}
.pill.approved,.task-status-label,.task-status-label.open,.ut-status.healthy{background:var(--light-teal);color:var(--dark-teal)}
.pill.declined,.ut-status.critical{background:var(--burgundy);color:var(--off-white)}
.pill.cancelled,.pill.draft,.task-status-label.closed,.ut-status.unavailable{border:1px solid var(--line-strong);background:transparent;color:var(--ink-soft)}
.pill.submitted,.admin-badge{background:var(--lavender);color:var(--dark-teal)}
.ut-status.warning,.profile-link-status{background:var(--sand);color:var(--dark-teal)}
.task-time-flag{border-radius:0;background:var(--yellow);color:var(--dark-teal);font-size:11.5px;font-weight:700}

/* ---------- Dialogs: the design's sheet ---------- */
dialog{position:fixed;inset:0 0 0 auto;width:min(560px,100%);max-width:100%;height:100%;max-height:none;margin:0;padding:0 var(--s5);overflow:auto;overscroll-behavior:contain;border:0;border-inline-start:1px solid var(--line);border-radius:0;background:var(--bg);color:var(--ink);box-shadow:none}
dialog[open]{display:flex;flex-direction:column;animation:sheet-in .26s cubic-bezier(.2,.8,.2,1)}
dialog::backdrop{background:var(--scrim);backdrop-filter:none}
dialog>form{display:flex;flex:1 0 auto;flex-direction:column;min-width:0}
dialog>*,dialog>form>*{flex-shrink:0}
dialog>:last-child:not(form):not(.dialog-actions),dialog>form>:last-child:not(.dialog-actions),dialog>:has(+ .dialog-actions),dialog>form>:has(+ .dialog-actions){margin-bottom:var(--s5)}
.dialog-heading{position:sticky;top:0;z-index:2;display:flex;align-items:center;justify-content:space-between;gap:var(--s3);margin:0 calc(var(--s5) * -1) var(--s5);padding:var(--s4) var(--s5);border-bottom:1px solid var(--line);background:var(--bg)}
.dialog-heading strong{font:700 19px/1.2 var(--sans);letter-spacing:-.02em}
/* The foot sits at the bottom of the sheet and stays in view while the sheet scrolls. */
.dialog-actions{position:sticky;bottom:0;z-index:2;display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:var(--s2);margin:auto calc(var(--s5) * -1) 0;padding:var(--s4) var(--s5);border-top:1px solid var(--line);background:var(--bg)}
dialog h2{margin:0 0 var(--s2);font:700 22px/1.2 var(--sans);letter-spacing:-.02em}
#odoo-write-dialog{inset:0 0 0 auto;width:min(660px,100%);height:100%;max-height:none;margin:0}
/* The form sheet is not modal (the save notice stays usable), so a scrim dims the page behind it, as dialog::backdrop does. */
.sheet-scrim{position:fixed;inset:0;z-index:85;background:var(--scrim)}
#odoo-background-status{border:1px solid var(--line-strong);border-radius:0;background:var(--bg);color:var(--ink);box-shadow:none}
#odoo-background-status .icon-button{width:var(--control-sm);height:var(--control-sm);margin-inline-start:calc(var(--s2) * -1)}
@keyframes sheet-in{from{transform:translateX(100%)}}
@keyframes sheet-up{from{transform:translateY(100%)}}

/* ---------- Toast ---------- */
#toast{position:fixed;z-index:1000;left:50%;bottom:max(24px,env(safe-area-inset-bottom));width:max-content;max-width:min(520px,calc(100vw - 32px));padding:12px var(--s4);border:1px solid var(--teal-700);border-radius:0;background:var(--dark-teal);color:var(--off-white);font:500 14px/1.45 var(--sans);box-shadow:none;transform:none;translate:-50% 0;animation:toast-rise .22s ease-out}
#toast.error{border-color:var(--burgundy);background:var(--burgundy)}
@keyframes toast-rise{from{transform:translateY(8px);opacity:0}}

/* ---------- Page surfaces: the basics for both themes (page files refine the details) ---------- */
.team-request{padding:var(--s4) var(--s5)}
.team-chip strong,.timeoff-balance>strong{color:var(--ink)}
.support-notice.error{border-inline-start:3px solid var(--danger);background:var(--danger-soft)}
.support-shots img{border-color:var(--line);border-radius:0;background:var(--panel)}
.support-form-status.error,.task-chat-status.error{color:var(--danger)}
.expense-per-diem-total{border-radius:0;background:var(--panel)}
.expense-per-diem-total.error{background:var(--danger-soft);color:var(--danger)}
.task-sync-error{background:var(--panel);color:var(--ink)}
.inbox-item{border-color:var(--line);border-radius:0}
.inbox-item.unread{border-color:var(--ink);background:var(--panel)}
.admin-menu-list{border:1px solid var(--line-strong);border-radius:0;background:var(--bg);box-shadow:none}
.admin-menu .admin-menu-list button{border-radius:0;color:var(--ink)}
.admin-menu .admin-menu-list button:hover,.admin-menu .admin-menu-list button:focus-visible{background:var(--panel)}
.admin-menu .admin-menu-list button.danger{color:var(--danger)}
.admin-status.on{color:var(--success)}
.admin-status.off{color:var(--danger)}
.task-detail-tabs{border-bottom-color:var(--line)}
.task-detail-tabs button{margin:0;padding:12px var(--s4);border:0;border-bottom:2px solid transparent;background:transparent;color:var(--ink-soft);font:600 13px/1.2 var(--sans)}
.task-detail-tabs button.active{border-top:0;border-bottom-color:var(--ink);background:transparent;color:var(--ink)}
.task-detail-tabs small{border-radius:999px;background:var(--line)}
.task-state{border-color:var(--line-strong);border-radius:999px}
.task-message .resource-initials{border-radius:50%;background:var(--ink);color:var(--bg)}
.planning-scroll,.timeoff-calendar{border-color:var(--line);border-radius:0;background:var(--bg)}
.planning-header,.planning-resource-head,.timeoff-weekdays,.timeoff-day.unusual,.timeline-cell.is-weekend,.planning-detail-grid>div{border-radius:0;background:var(--panel)}
.planning-resource-head span,.planning-resource .resource-initials{background:var(--accent);color:var(--dark-teal)}
.timeline-row .planning-resource,.timeline-cell{background:var(--bg)}
.timeline-cell:hover{background:var(--soft)}
.timeline-cell.is-today,.planning-day-head.is-today,.planning-day-cell.is-today,.timeoff-day.today{background:color-mix(in srgb,var(--accent) 24%,var(--bg));box-shadow:none}
.planning-week-nav{background:var(--bg);border-top-color:var(--line)}
.planning-total{background:var(--panel);border-top-color:var(--ink)}
.planning-total-day{border-left-color:var(--line)}
.shift-card,.shift-card.published{border-left-color:var(--dark-teal);border-radius:0;background:var(--light-teal);color:var(--dark-teal)}
.shift-card.draft{border-left-color:var(--slate);background-color:var(--sand)}
.shift-card:hover{box-shadow:none}
.timeoff-event{border-radius:0;color:var(--dark-teal)}
.timeoff-day-number,.timeoff-month-title{color:var(--ink)}
.timeoff-day{border-color:var(--line)}
.ut-page{--ut-ink:var(--ink);--ut-muted:var(--ink-soft);--ut-line:var(--line);--ut-soft:var(--panel);--ut-logged:var(--ink);--ut-logged-track:var(--accent);--ut-booked:var(--line-strong);--ut-booked-track:var(--line)}
.ut-panel{padding:var(--s5)}
.ut-filters select,.ut-refresh,.ut-icon-button{border-radius:0;box-shadow:none}
.ut-refresh,.ut-icon-button{border-color:var(--line);background:var(--bg);color:var(--ink)}
.ut-chart-grid i,.ut-tc-calc div,.ut-tc-holidays li{border-color:var(--line)}
.ut-chart-grid i{background:var(--line)}
.ut-bar-fill{border-radius:0}
.ut-bar-tip{border-radius:0;box-shadow:none}

/* ---------- Loading skeletons ---------- */
#workspace-loading{background:var(--bg)}
.workspace-loading:not(.auth-locked) #workspace-loading{background:var(--bg)}
.workspace-skeleton{display:grid;grid-template-columns:var(--rail-w) minmax(0,1fr);min-height:100vh;color:var(--ink)}
.skeleton-rail{display:flex;flex-direction:column;gap:var(--s5);padding:var(--s5) var(--s4);background:var(--rail)}
.skeleton-rail .wordmark{align-self:flex-start}
.skeleton-rail-items{display:grid;gap:var(--s4);padding:var(--s2) var(--s3)}
.skeleton-rail-items .skeleton-block{width:70%;height:12px;background:var(--teal-700)}
.skeleton-rail-items .skeleton-block:nth-child(2n){width:55%}
.skeleton-rail-foot{display:flex;align-items:center;gap:var(--s3);margin-top:auto;padding:var(--s3) var(--s2) 0;border-top:1px solid var(--rail-line)}
.skeleton-rail-foot .skeleton-block{width:110px;background:var(--teal-700)}
.skeleton-rail-foot .skeleton-avatar{width:34px;height:34px;border-radius:50%}
.skeleton-main{padding:28px var(--gutter)}
.skeleton-heading{margin:var(--s3) 0 var(--s5)}
.skeleton-block{border-radius:0;background:var(--line)}
.skeleton-block::after{background:linear-gradient(100deg,transparent 15%,color-mix(in srgb,var(--bg) 55%,transparent) 50%,transparent 85%)}
.skeleton-rail .skeleton-block::after{background:linear-gradient(100deg,transparent 15%,rgba(182,237,243,.12) 50%,transparent 85%)}
.skeleton-table,.loading-calendar{border:0;border-radius:0;background:var(--panel)}
.skeleton-table-row,.loading-calendar-row,.loading-tab-row{border-color:var(--line)}
.skeleton-table-head{background:transparent}
.skeleton-statuses .skeleton-block{border-radius:0}
.skeleton-toolbar{border-bottom-color:var(--line)}
.loading-calendar-cell{border-color:var(--line)}

/* ---------- Sign-in gate ---------- */
.auth-gate{position:relative;display:grid;place-items:center;min-height:100vh;min-height:100dvh;padding:96px 24px;background:var(--dark-teal);color:var(--off-white)}
.auth-brand.wordmark{position:absolute;top:32px;left:32px;padding:0}
.auth-card{width:min(100%,460px);padding:40px;border:0;border-radius:0;background:var(--gate-card);color:var(--ink);box-shadow:none}
.auth-card h1{margin:0 0 var(--s4);font:700 34px/1.05 var(--sans);letter-spacing:-.03em}
.auth-card h1 em{font-family:var(--editorial);font-style:italic;font-weight:400;letter-spacing:-.035em}
.auth-card p{margin:0 0 var(--s5);font-size:15px;line-height:1.55;color:var(--ink-soft)}
.auth-card .button{display:flex;width:100%;max-width:100%;margin:0 0 var(--s2)}
.auth-card small{display:block;margin-top:var(--s4);font-size:12.5px;line-height:1.55;color:var(--ink-soft)}

/* ---------- Phone tab bar and More sheet (hidden on desktop) ---------- */
.tabbar{display:none}
.more-nav{display:grid;gap:var(--s4)}
.more-section{display:grid;gap:var(--s2)}
.more-section h3{margin:0}
.more-list{display:grid;gap:2px}
.more-item{display:flex;align-items:center;gap:var(--s3);width:100%;min-height:48px;padding:10px var(--s4);border:0;border-radius:0;background:var(--panel);color:var(--ink);font:600 15px/1.2 var(--sans);text-align:start;cursor:pointer}
.more-item:hover{background:var(--soft)}
.more-item[aria-current="page"]{background:var(--accent);color:var(--dark-teal)}
.more-item .project-dot{width:10px;height:10px;flex:none;border-radius:50%}
.more-item span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.more-sync{margin:var(--s4) 0 var(--s5);padding:12px var(--s4);border:1px solid var(--line);font-size:13.5px}

/* ---------- Responsive ---------- */
@media (max-width:1100px){
 .metrics{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:860px){
 html{scroll-padding-top:72px}
 .layout{grid-template-columns:minmax(0,1fr);grid-template-rows:auto 1fr}
 .rail{flex-direction:row;align-items:center;justify-content:space-between;gap:var(--s3);height:auto;padding:calc(10px + env(safe-area-inset-top)) max(var(--s4),env(safe-area-inset-right)) 10px max(var(--s4),env(safe-area-inset-left));border-inline-end:0;border-bottom:1px solid var(--rail-line)}
 .rail-brand{align-self:center;margin:0;padding:0;font-size:20px}
 .rail-brand small{font-size:18px}
 .rail-scroll,#sync-odoo{display:none}
 .rail-foot{display:flex;align-items:center;gap:var(--s2);margin:0;padding:0;border:0}
 .rail .inbox-button{justify-content:center;width:var(--control);min-height:var(--control);padding:0;border:1px solid var(--rail-line);color:var(--rail-ink)}
 .rail .inbox-button .rail-label{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
 .rail .inbox-button .badge{position:absolute;top:-7px;right:-7px;min-width:18px;height:18px;margin:0;padding:0 5px;font-size:10.5px}
 #profile-avatar.me{width:auto;padding:0;border-radius:50%}
 #profile-avatar.me:hover,#profile-avatar.me[aria-expanded="true"]{background:none}
 #profile-avatar.me[aria-expanded="true"] .me-avatar{outline:2px solid var(--light-teal);outline-offset:2px}
 .rail .me-txt{display:none}
 .user-menu{inset:calc(100% + var(--s2)) 0 auto auto}
 main{padding-block:20px 96px}
 .layout>main{padding-bottom:calc(96px + env(safe-area-inset-bottom))}
 .page-heading{margin-bottom:var(--s4)}
 .page-heading h1{font-size:28px}
 .search-box,.toolbar .search-box,.planning-page .toolbar .search-box{flex:1 1 100%;max-width:none}
 .tabbar{position:fixed;inset:auto 0 0;z-index:30;display:grid;grid-auto-columns:minmax(0,1fr);grid-auto-flow:column;padding:0 env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);border-top:1px solid var(--line);background:var(--bg)}
 .tabbar button{position:relative;display:grid;justify-items:center;align-content:center;gap:3px;min-width:0;min-height:58px;padding:9px 4px 8px;border:0;border-radius:0;background:none;color:var(--ink-soft);font:700 11.5px/1.1 var(--sans);cursor:pointer}
 .tabbar button span{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
 .tabbar button[aria-current="page"],.tabbar button.is-current{color:var(--ink)}
 .tabbar button[aria-current="page"]::before,.tabbar button.is-current::before{content:"";position:absolute;top:-1px;inset-inline:22%;height:3px;background:var(--ink)}
 .tabbar button:focus-visible{outline-offset:-3px}
 dialog{inset:auto 0 0;width:100%;height:auto;max-height:92vh;max-height:92dvh;padding:0 var(--s4) env(safe-area-inset-bottom);border-inline-start:0;border-top:1px solid var(--line-strong)}
 dialog[open]{animation-name:sheet-up}
 .dialog-heading,.dialog-actions{margin-inline:calc(var(--s4) * -1);padding-inline:var(--s4)}
 #odoo-write-dialog{inset:auto 0 0;width:100%;height:auto;max-height:92vh;max-height:92dvh}
 #toast{bottom:calc(74px + env(safe-area-inset-bottom))}
 .workspace-skeleton{grid-template-columns:minmax(0,1fr);grid-template-rows:auto 1fr}
 .skeleton-rail{flex-direction:row;align-items:center;padding:14px var(--s4)}
 .skeleton-rail-items,.skeleton-rail-foot{display:none}
 .skeleton-main{padding:20px var(--s4)}
 .auth-brand.wordmark{top:24px;left:24px}
 .auth-card{padding:28px}
 .auth-card h1{font-size:28px}
}
@media (max-width:480px){
 .metrics{gap:2px}
 .metric{padding:var(--s4)}
 .metric-value{font-size:24px}
}
@media (prefers-reduced-motion:reduce){
 dialog[open],#toast,.sync.is-busy .dot{animation:none}
 .rail .nav-group-toggle .chev{transition:none}
}
@media (forced-colors:active){
 .rail [aria-current="page"],.tabbar [aria-current="page"],.more-item[aria-current="page"]{outline:2px solid CanvasText;outline-offset:-2px}
}