/* Look: soft, airy and rounded. Light mode is a frosted, translucent surface over a calm tinted background; dark mode (follows the device
   setting) is deep and quiet. Everything is made from the tokens below; nothing here is copied from another product. */
:root {
  --bg: #f8fafb;
  --bg-a: #f8fafb;
  --bg-b: #f8fafb;
  --surface: #ffffff;
  --glass: rgba(255, 255, 255, 0.92);
  --glass-strong: #ffffff;
  --glass-edge: #ececec;
  --text: #15181d;
  --muted: #5f6468;
  --line: #ececec;
  --field: #8b9197;
  --soft: rgba(90, 123, 253, 0.1);
  --chip: rgba(21, 24, 29, 0.06);
  --accent: #4a69e8; /* the picture's blue is #5a7bfd; white text on it is 3.69:1, so this is a hair deeper (4.7:1) */
  --accent-ink: #3a53b0;
  --accent-text: #ffffff;
  --focus: #4560c0;
  --side-bg: #1e2228;
  --side-text: #eceef0;
  --side-muted: #81878c;
  --side-hover: rgba(255, 255, 255, 0.1);
  --side-active: #e97b48;
  --side-active-text: #15181d;
  --side-mark: #e97b48;
  --danger: #a3262b;
  --ok: #146c3b;
  --warn-text: #8a5a00;
  --track: rgba(21, 24, 29, 0.1);
  --chart-warn: #d98e04;
  --chart-muted: #9aa1a8;
  --shadow: 0 1px 2px rgba(16, 24, 40, 0.05);
  --shadow-pop: 0 18px 44px rgba(16, 24, 40, 0.22);
  --head-h: 60px;
  --head-bg: #1e2228;
  --head-text: #ffffff;
  --head-muted: #81878c;
  --sb-collapsed: 64px;
  --sb-expanded: 203px;
  --radius: 8px;
  --radius-md: 8px;
  --radius-field: 6px;
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0d1013;
    --bg-a: #0d1013;
    --bg-b: #0d1013;
    --surface: #151a1f;
    --glass: rgba(21, 26, 31, 0.92);
    --glass-strong: #151a1f;
    --glass-edge: rgba(255, 255, 255, 0.08);
    --text: #e8eaed;
    --muted: #a0a6ac;
    --line: rgba(255, 255, 255, 0.1);
    --field: #747b82;
    --soft: rgba(127, 155, 255, 0.14);
    --chip: rgba(255, 255, 255, 0.07);
    --accent: #7f9bff;
    --accent-ink: #9db2ff;
    --accent-text: #0b1020;
    --focus: #a9bcff;
    --head-bg: #14181c;
    --danger: #ff8a8f;
    --ok: #5fd49a;
    --warn-text: #f2b84b;
    --track: rgba(255, 255, 255, 0.12);
    --chart-warn: #f2b84b;
    --chart-muted: #5d777d;
    --shadow: 0 10px 30px rgba(0, 0, 0, 0.35), 0 1px 2px rgba(0, 0, 0, 0.3);
    --shadow-pop: 0 18px 44px rgba(0, 0, 0, 0.6);
  }
}
@media (prefers-contrast: more) {
  :root { --glass: var(--surface); --glass-edge: var(--text); --line: var(--muted); }
}
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body {
  background-color: var(--bg);
  background-image: radial-gradient(900px 520px at 6% -8%, var(--bg-a), transparent 65%), radial-gradient(800px 480px at 100% 0%, var(--bg-b), transparent 60%);
  background-attachment: fixed;
  color: var(--text);
  font: 16px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
h1, h2 { line-height: 1.25; margin: 0; }
h1 { font-size: 1.3rem; }
h2 { font-size: 1.05rem; }
p { margin: 0; }
ul, ol { list-style: none; margin: 0; padding: 0; }
a { color: inherit; }
.muted { color: var(--muted); }
.small { font-size: 0.85rem; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
h1:focus-visible { outline-offset: 5px; border-radius: 10px; }
.icon { width: 22px; height: 22px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* Frosted surfaces: a translucent fill with a soft blur where the browser supports it, a solid fill where it does not */
.tile, .card, .table-wrap, .bottombar, .day, .request-card, .news-item {
  background: var(--glass-strong);
  border: 1px solid var(--glass-edge);
}
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
  .tile, .card, .table-wrap, .bottombar, .day, .request-card, .news-item {
    background: var(--glass);
    -webkit-backdrop-filter: blur(16px) saturate(1.2);
    backdrop-filter: blur(16px) saturate(1.2);
  }
}

.skip { position: absolute; left: 8px; top: -60px; z-index: 100; background: var(--accent); color: var(--accent-text); padding: 8px 16px; border-radius: 999px; }
.skip:focus { top: 8px; }

/* Layout: a dark header across the top, the main menu attached on the left under it, then the tab strip and the content */
.shell { --sb: var(--sb-collapsed); min-height: 100vh; }
.shell[data-pinned="true"] { --sb: var(--sb-expanded); }

.topbar {
  position: fixed; inset: 0 0 auto 0; z-index: 40; height: var(--head-h); display: flex; align-items: center; gap: 16px; padding: 0 20px;
  background: var(--head-bg); color: var(--head-text); border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.topbar :focus-visible { outline-color: var(--side-mark); }
.topbar { font-size: 14px; line-height: 20px; }
.top-left { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex: none; width: calc(var(--sb) - 8px); margin-right: -7px; transition: width 0.2s ease; }
.brand { display: flex; align-items: center; gap: 10px; min-width: 0; color: var(--side-mark); }
.brand-name { color: var(--head-text); font-weight: 650; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.shell:not([data-pinned="true"]) .brand-name { display: none; }
.pin { display: grid; place-items: center; width: 30px; height: 30px; padding: 0; flex: none; border: 1px solid rgba(255, 255, 255, 0.3); border-radius: 50%; background: rgba(255, 255, 255, 0.06); color: var(--head-text); cursor: pointer; }
.pin:hover { background: rgba(255, 255, 255, 0.16); }
.pin .icon { width: 16px; height: 16px; transition: transform 0.2s ease; }
.shell[data-pinned="false"] .pin .icon { transform: rotate(180deg); }
.heading { flex: 1; min-width: 0; }
.heading h1 { font-size: 22px; line-height: 28px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.icon-btn { display: grid; place-items: center; width: 32px; height: 32px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: inherit; cursor: pointer; flex: none; }
.icon-btn:hover { background: rgba(255, 255, 255, 0.12); }
.search-toggle, .search-close { display: none; }
.tools { display: flex; align-items: center; gap: 8px; flex: none; }

/* Main menu: white, attached, with a filled active item; it is slim (icons only) until opened by hover, focus or the round arrow */
.sidebar {
  position: fixed; top: var(--head-h); bottom: 0; left: 0; z-index: 30; width: var(--sb-collapsed); padding-top: 20px; font-size: 14px; line-height: 20px;
  background: var(--surface); color: var(--text); border-right: 1px solid var(--line);
  overflow-x: hidden; overflow-y: auto; scrollbar-width: none; transition: width 0.2s ease, box-shadow 0.2s ease;
}
.sidebar::-webkit-scrollbar { display: none; }
.sidebar[data-open="true"] { width: var(--sb-expanded); }
.side-nav { padding: 0 10px 16px; }
.sidebar[data-open="false"] .side-nav { padding: 0 12px 16px; }
.side-group { margin: 16px 12px 6px; font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); white-space: nowrap; height: 16px; line-height: 16px; overflow: hidden; }
.sidebar[data-open="false"] .side-group { height: 1px; margin: 14px 8px 10px; background: var(--line); font-size: 0; }
.sidebar .icon, .inner .icon { width: 18px; height: 18px; }
.navlink {
  display: flex; align-items: center; gap: 11px; width: 100%; height: 34px; margin: 0; padding: 0 12px; border: 0; border-radius: 6px;
  background: transparent; color: var(--text); font: inherit; text-decoration: none; cursor: pointer; text-align: left;
}
.navlink:hover { background: var(--soft); }
.navlink[aria-current="page"] { background: var(--accent); color: var(--accent-text); font-weight: 500; }
.label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: opacity 0.15s ease; }
/* Closed icon rail: icons only, 40 px apart, thin and light; the open item is a filled rounded square; the label shows in a tip */
.sidebar[data-open="false"] .label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); opacity: 0; }
.sidebar[data-open="false"] .navlink { width: 40px; height: 40px; margin: 0 auto; padding: 0; justify-content: center; gap: 0; color: var(--muted); }
.sidebar[data-open="false"] .navlink:hover { color: var(--text); }
.sidebar[data-open="false"] .navlink[aria-current="page"] { color: var(--accent-text); }
.sidebar[data-open="false"] .icon { stroke-width: 1.5; }
.rail-tip { position: fixed; z-index: 70; transform: translateY(-50%); padding: 5px 10px; border-radius: 6px; background: var(--head-bg); color: var(--head-text); font-size: 13px; line-height: 18px; white-space: nowrap; pointer-events: none; box-shadow: var(--shadow-pop); }
.rail-tip[hidden] { display: none; }

.main { margin-left: var(--sb); padding-top: var(--head-h); min-height: 100vh; display: flex; flex-direction: column; transition: margin-left 0.2s ease; }
.workspace { flex: 1; display: flex; flex-direction: column; min-width: 0; }

/* Search: a dark pill in the header; the results drop down below it */
.search { position: relative; flex: 0 1 237px; min-width: 0; }
.search-field { position: relative; display: flex; align-items: center; gap: 8px; height: 32px; padding: 0 12px; border-radius: 999px; background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.2); color: var(--head-muted); }
.search-field:focus-within { background: rgba(255, 255, 255, 0.14); outline: 3px solid var(--side-mark); outline-offset: 2px; }
.search-input { flex: 1; min-width: 0; min-height: 28px; padding: 0; border: 0; border-radius: 0; background: transparent; color: var(--head-text); font: inherit; }
.search-input::placeholder { color: var(--head-muted); opacity: 1; }
.search-input:focus-visible { outline: none; }
.search-input::-webkit-search-cancel-button { appearance: none; }
.search-pop { position: absolute; top: calc(100% + 8px); left: 0; right: 0; min-width: 260px; z-index: 50; padding: 6px; border-radius: 8px; background: var(--surface); color: var(--text); border: 1px solid var(--line); box-shadow: var(--shadow-pop); }
.search-pop[hidden] { display: none; }
.search-opt { display: grid; gap: 1px; padding: 9px 14px; border-radius: 6px; cursor: pointer; }
.search-opt:hover { background: var(--soft); }
.search-opt[aria-selected="true"] { background: var(--soft); box-shadow: inset 0 0 0 2px var(--accent); }
.search-opt-last { font-weight: 600; }
.search-status { padding: 6px 14px 4px; }

/* Tabs (the sub-menu): a plain white strip, the open tab in the accent colour with an underline */
.tabs { position: sticky; top: var(--head-h); z-index: 9; background: var(--surface); border-bottom: 1px solid var(--line); padding: 0 19px; overflow-x: auto; scrollbar-width: none; font-size: 14px; line-height: 20px; }
.tabs::-webkit-scrollbar { display: none; }
.tabs ul { display: flex; gap: 21px; }
.tabs a { display: block; min-width: 44px; text-align: center; padding: 15px 0 11px; border-bottom: 2px solid transparent; text-decoration: none; color: var(--muted); white-space: nowrap; font-weight: 500; }
.tabs a:hover { color: var(--text); }
.tabs a[aria-current="page"] { color: var(--accent-ink); border-bottom-color: var(--accent-ink); font-weight: 600; }
.body { flex: 1; display: flex; align-items: flex-start; gap: 20px; min-width: 0; padding: 24px 28px 32px; }
/* The inner menu follows the main menu: the same flat white column, 34 px rows, 6 px corners, filled open item */
.body.with-inner { gap: 0; padding: 0; }
.with-inner .content { padding: 24px 28px 32px; }
.inner { flex: none; align-self: flex-start; width: 203px; height: calc(100vh - var(--head-h) - 49px); position: sticky; top: calc(var(--head-h) + 49px); overflow-y: auto; padding: 20px 10px; background: var(--surface); border-right: 1px solid var(--line); font-size: 14px; line-height: 20px; }
.inner a { display: flex; align-items: center; height: 34px; padding: 0 12px; margin: 0; border-radius: 6px; text-decoration: none; color: var(--text); }
.inner a:hover { background: var(--soft); }
.inner a[aria-current="page"] { background: var(--accent); color: var(--accent-text); font-weight: 500; }
.content { flex: 1; min-width: 0; }
.content:focus-visible { outline: none; }
.stack { display: grid; gap: 16px; }
.narrow { max-width: 520px; }
.card { border-radius: var(--radius); padding: 22px; display: grid; gap: 10px; box-shadow: var(--shadow); }
.empty { max-width: 640px; }
.empty-note { padding: 8px 0; }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* Language switch: a pill with two segments */
.lang { display: inline-flex; gap: 2px; padding: 2px; border-radius: 999px; background: var(--chip); }
.lang-btn { min-width: 36px; min-height: 28px; padding: 0 8px; border: 0; border-radius: 999px; background: transparent; color: var(--muted); font: inherit; font-size: 0.76rem; font-weight: 600; letter-spacing: 0.04em; cursor: pointer; }
.lang-btn:hover { color: var(--text); }
.lang-btn[aria-pressed="true"] { background: var(--accent); color: var(--accent-text); }
.user-panel .lang { justify-self: start; margin: 4px 0 6px 12px; }
@media (pointer: coarse) { .lang-btn { min-height: 36px; min-width: 44px; } }

/* Sign-in */
.signin { min-height: 100vh; min-height: 100dvh; display: grid; align-content: center; justify-items: center; gap: 20px; padding: 24px; }
@media (max-width: 640px) { .signin { align-content: start; padding-top: 7vh; } }
.signin-top { width: min(420px, 100%); display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.signin-top .brand { padding: 0; color: var(--accent); }
.signin-top .brand-name { color: var(--text); }
.signin-card { width: min(420px, 100%); gap: 16px; padding: 28px; }
.field { display: grid; gap: 6px; }
.field > select, .field > input:not([type="checkbox"]):not([type="radio"]) { max-width: 480px; }
.field label { font-weight: 600; font-size: 0.92rem; }

/* Fields and buttons: large radius everywhere */
input, select, textarea { border: 1px solid var(--field); border-radius: var(--radius-field); background: var(--surface); color: var(--text); font: inherit; }
input, select, textarea { font-size: 14px; line-height: 20px; }
input, select { min-height: 36px; padding: 0 12px; }
textarea { padding: 7px 12px; resize: vertical; }
input[type="checkbox"], input[type="radio"] { accent-color: var(--accent); width: 24px; height: 24px; min-height: 0; padding: 0; }
/* Buttons are the width of their text, 34 px high with 6 px corners; full width only on a phone (and the sign-in card) */
button.primary { width: fit-content; min-height: 34px; padding: 0 16px; border: 0; border-radius: 6px; background: var(--accent); color: var(--accent-text); font: inherit; font-weight: 500; cursor: pointer; }
button.primary:hover { background: color-mix(in srgb, var(--accent) 88%, var(--text)); }
button.secondary { width: fit-content; min-height: 34px; padding: 0 16px; border: 1px solid var(--accent); border-radius: 6px; background: transparent; color: var(--accent-ink); font: inherit; font-weight: 500; cursor: pointer; }
button.secondary:hover { background: var(--soft); }
button.secondary:disabled, button.primary:disabled { opacity: 0.6; cursor: progress; }
button.primary, button.secondary { font-size: 14px; line-height: 20px; }
.signin-card button.primary { width: 100%; }
/* The Show / Hide button of every password field (lib/password-toggle.ts) sits inside the field, on its right. */
.pw-wrap { position: relative; display: block; width: 100%; max-width: 480px; }
.pw-wrap > input { width: 100%; box-sizing: border-box; padding-right: 84px; }
.pw-toggle { position: absolute; top: 50%; right: 4px; transform: translateY(-50%); min-width: 64px; min-height: 30px; padding: 0 10px; border: 0; border-radius: 6px; background: transparent; color: var(--accent-ink); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }
.pw-toggle:hover { background: var(--soft); }
.pw-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
@media (max-width: 640px) { .pw-toggle { min-height: 36px; } }
.form-status:empty { display: none; }
.form-status { color: var(--danger); display: grid; gap: 4px; }
.form-status .muted { color: var(--muted); }
.form { display: grid; gap: 14px; max-width: 480px; }
.check { display: flex; align-items: center; gap: 8px; }
.check input { min-height: 0; width: 24px; height: 24px; flex: none; }
.filters { display: flex; flex-wrap: wrap; gap: 12px; align-items: end; }
.filters .field { min-width: 160px; }

/* Header: bell and profile button */
.bell-wrap { position: relative; }
.bell-panel { position: absolute; right: 0; top: calc(100% + 10px); z-index: 45; width: min(380px, 92vw); background: var(--surface); color: var(--text); border: 1px solid var(--line); border-radius: 8px; box-shadow: var(--shadow-pop); font-size: 14px; line-height: 20px; }
.bell-panel[hidden] { display: none; }
.bell-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 12px; border-bottom: 1px solid var(--line); font-weight: 600; }
.bell-list { max-height: 60vh; overflow-y: auto; padding: 6px; display: grid; gap: 2px; align-content: start; }
.bell-item { display: grid; gap: 2px; padding: 8px 10px; border-radius: 6px; text-decoration: none; color: var(--text); }
.bell-item:hover { background: var(--soft); }
.bell-item.unread { background: color-mix(in srgb, var(--accent) 8%, transparent); }
.bell-item.unread .bell-text { font-weight: 600; }
.bell-foot { padding: 10px 12px; border-top: 1px solid var(--line); }
.bell-panel .form-status { padding: 0 12px; }
.choices { display: grid; gap: 10px; margin: 0; padding: 0; border: 0; }
.choices legend { padding: 0; margin-bottom: 8px; font-weight: 600; }
.choices.indent { margin-left: 32px; }
.bell { position: relative; display: grid; place-items: center; width: 32px; height: 32px; padding: 0; border: 0; background: transparent; font: inherit; cursor: pointer; flex: none; border-radius: 50%; color: var(--head-text); text-decoration: none; }
.bell:hover { background: rgba(255, 255, 255, 0.12); }
.badge { position: absolute; top: 1px; right: 0; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--side-mark); color: #10252a; font-size: 0.7rem; font-weight: 700; display: grid; place-items: center; }
.badge[hidden], .user-panel[hidden] { display: none; }
.user { position: relative; }
.user-btn { display: flex; align-items: center; gap: 8px; height: 32px; padding: 0 10px 0 4px; border: 1px solid rgba(255, 255, 255, 0.28); border-radius: 6px; background: transparent; color: var(--head-text); font: inherit; cursor: pointer; }
.user-btn:hover { background: rgba(255, 255, 255, 0.12); }
.user-caret .icon { width: 16px; height: 16px; }
.avatar { width: 24px; height: 24px; border-radius: 50%; background: var(--side-mark); color: #10252a; display: grid; place-items: center; font-weight: 700; font-size: 0.85rem; flex: none; }
.user-panel { position: absolute; right: 0; top: calc(100% + 10px); z-index: 45; min-width: 230px; padding: 8px; background: var(--surface); color: var(--text); border: 1px solid var(--line); border-radius: 8px; box-shadow: var(--shadow-pop); display: grid; gap: 4px; }
.user-name { padding: 8px 12px; font-weight: 650; border-bottom: 1px solid var(--line); margin-bottom: 4px; }
.navlink-light { display: flex; align-items: center; gap: 10px; min-height: 36px; padding: 0 12px; border: 0; border-radius: 6px; background: transparent; color: var(--text); font: inherit; cursor: pointer; text-align: left; }
.navlink-light:hover { background: var(--soft); }

/* Tiles: a title bar with a thin divider, then the body */
.home { display: grid; gap: 16px; max-width: 1200px; }
.home-head { display: grid; gap: 2px; padding: 0 4px; }
.dash { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; align-items: start; }
.tile { border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); }
.tile.wide { grid-column: 1 / -1; }
.tile-title { padding: 16px 22px; border-bottom: 1px solid var(--line); font-size: 1rem; font-weight: 650; }
.tile-body { padding: 20px 22px; display: grid; gap: 12px; }
.big { font-size: 1.6rem; font-weight: 650; line-height: 1.2; }
.status { display: flex; align-items: center; gap: 10px; }
.dot { width: 12px; height: 12px; border-radius: 50%; background: var(--muted); flex: none; }
.dot.on { background: var(--ok); box-shadow: 0 0 0 4px color-mix(in srgb, var(--ok) 25%, transparent); }
.chip { display: inline-block; justify-self: start; padding: 3px 14px; border-radius: 999px; background: var(--chip); border: 1px solid var(--line); font-size: 0.9rem; }
.more { display: inline-flex; align-items: center; min-height: 40px; color: var(--accent); font-weight: 600; justify-self: start; }
.problem { display: grid; gap: 8px; color: var(--danger); }
.problem .muted { color: var(--muted); }
.news-list { display: grid; gap: 8px; }
.news-list li { display: flex; gap: 8px; align-items: baseline; }
.new { flex: none; padding: 0 9px; border-radius: 999px; background: var(--accent); color: var(--accent-text); font-size: 0.72rem; font-weight: 700; }
.news-title { min-width: 0; overflow-wrap: anywhere; }
.week { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 8px; height: 150px; align-items: stretch; }
.week li { display: grid; grid-template-rows: auto 1fr auto; justify-items: center; gap: 4px; min-width: 0; }
.week-value { font-size: 0.78rem; color: var(--muted); min-height: 1.1em; }
.week-bar { width: 70%; display: flex; align-items: flex-end; background: var(--track); border-radius: 999px; overflow: hidden; }
.week-bar span { display: block; width: 100%; background: var(--accent); border-radius: 999px; }
.week-day { font-size: 0.8rem; color: var(--muted); text-transform: capitalize; }
/* Manager tiles: a number and what it counts; each row opens the screen where the work is done */
.counts { display: grid; gap: 2px; }
.count-row { display: flex; align-items: center; gap: 14px; min-height: 48px; padding: 4px 12px; margin: 0 -12px; border-radius: 6px; text-decoration: none; }
.count-row:hover { background: var(--soft); }
.count { min-width: 2.4ch; font-size: 1.6rem; font-weight: 650; line-height: 1.2; color: var(--accent); text-align: right; font-variant-numeric: tabular-nums; }
.count.zero { color: var(--muted); font-weight: 500; }
.count-label { min-width: 0; overflow-wrap: anywhere; }

/* Charts drawn by us */
.tone-accent { --tone: var(--accent); }
.tone-warn { --tone: var(--chart-warn); }
.tone-muted { --tone: var(--chart-muted); }
.tone-ok { --tone: var(--ok); }
.ring { position: relative; width: 96px; height: 96px; flex: none; }
.ring-svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.ring-svg circle { fill: none; stroke-width: 11; }
.ring-track { stroke: var(--track); }
.ring-arc { stroke: var(--tone); }
.ring-centre { position: absolute; inset: 0; display: grid; place-items: center; font-size: 1.2rem; font-weight: 650; font-variant-numeric: tabular-nums; }
.rings { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 20px 12px; }
.rings li { display: grid; justify-items: center; gap: 6px; text-align: center; }
.gauge { position: relative; width: 170px; height: 96px; margin: 0 auto; }
.gauge-svg { width: 100%; height: 100%; }
.gauge-svg path { fill: none; stroke-width: 10; stroke-linecap: round; }
.gauge-track { stroke: var(--track); }
.gauge-arc { stroke: var(--accent); }
.gauge-centre { position: absolute; left: 0; right: 0; bottom: 0; text-align: center; font-size: 1.5rem; font-weight: 650; line-height: 1; font-variant-numeric: tabular-nums; }
.segbar { display: flex; gap: 3px; height: 12px; border-radius: 999px; overflow: hidden; background: var(--track); }
.seg { display: block; height: 100%; min-width: 4px; background: var(--tone); border-radius: 999px; }
.balances { display: grid; gap: 18px; }
.balances li { display: grid; gap: 6px; }
.ring-name { font-weight: 600; }
.dial { display: grid; justify-items: center; gap: 6px; text-align: center; }

/* Shared kit: pills, tables, dialogs, toast, pager */
.pill { display: inline-block; padding: 2px 12px; border-radius: 999px; font-size: 0.8rem; font-weight: 650; border: 1px solid currentColor; background: color-mix(in srgb, currentColor 10%, transparent); white-space: nowrap; }
.pill.ok { color: var(--ok); }
.pill.warn { color: var(--warn-text); }
.pill.info { color: var(--accent-ink); }
.pill.muted { color: var(--muted); }
.pill.danger { color: var(--danger); }
.table-wrap { overflow-x: auto; border-radius: 8px; }
table { width: 100%; border-collapse: collapse; font-size: 0.95rem; }
th, td { padding: 12px 14px; text-align: left; vertical-align: middle; border-bottom: 1px solid var(--line); }
th { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); background: var(--chip); white-space: nowrap; }
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover td { background: var(--soft); }
td { overflow-wrap: break-word; min-width: 4.5em; }
.summary-row { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; }
.row-actions { display: flex; gap: 8px; flex-wrap: wrap; max-width: 26rem; }
.row-actions button, td button { min-height: 30px; padding: 0 12px; font-size: 13px; }
.row-actions > a { display: inline-flex; align-items: center; justify-content: center; min-width: 36px; padding: 0 6px; }
/* On a phone every table row becomes a small card: the first cell is its title, the other cells show "label  value", the buttons sit at the bottom. */
@media (max-width: 640px) {
  .table-wrap { overflow: visible; background: none; border: 0; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
  table, tbody { display: block; }
  thead { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  tbody tr { display: grid; gap: 6px; margin-bottom: 10px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); }
  tbody tr:last-child { margin-bottom: 0; }
  tbody tr:hover td { background: none; }
  td { display: grid; grid-template-columns: minmax(84px, 36%) 1fr; align-items: baseline; gap: 10px; min-width: 0; padding: 0; border: 0; }
  td::before { content: attr(data-label); font-size: 0.74rem; font-weight: 650; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); }
  td:empty { display: none; }
  td.cell-title { display: block; font-size: 1rem; font-weight: 650; }
  td.cell-title::before, td.cell-actions::before, td[data-label=""]::before { display: none; }
  td.cell-actions { display: flex; flex-wrap: wrap; gap: 8px; padding-top: 6px; }
  td.cell-actions .row-actions { max-width: none; }
}
.pager { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.page-btn { display: grid; place-items: center; width: 40px; height: 40px; min-height: 40px; padding: 0; border: 1px solid var(--line); border-radius: 50%; background: var(--glass-strong); color: var(--text); font: inherit; font-variant-numeric: tabular-nums; cursor: pointer; }
.page-btn:hover:not(:disabled) { background: var(--soft); }
.page-btn:disabled { opacity: 0.45; cursor: default; }
.page-btn[aria-current="page"] { background: var(--accent); color: var(--accent-text); border-color: transparent; font-weight: 650; }
.page-gap { width: 24px; text-align: center; color: var(--muted); }
.dialog { width: min(520px, 92vw); border: 1px solid var(--line); border-radius: 8px; background: var(--surface); color: var(--text); padding: 24px; box-shadow: var(--shadow-pop); }
.dialog::backdrop { background: rgba(6, 16, 18, 0.5); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.dialog h2 { margin-bottom: 14px; }
.dialog-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 16px; }
.toast { position: fixed; left: 50%; bottom: 40px; transform: translateX(-50%) translateY(20px); z-index: 60; max-width: 90vw; padding: 12px 22px; border-radius: 999px; background: var(--text); color: var(--bg); opacity: 0; pointer-events: none; transition: opacity 0.2s, transform 0.2s; box-shadow: var(--shadow-pop); }
.toast.show { opacity: 1; transform: translateX(-50%); }

/* My schedule */
.week-nav { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.week-label { margin-left: auto; }
.days { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 12px; }
.day { border-radius: var(--radius-md); padding: 12px; display: grid; gap: 8px; align-content: start; }
.day.today { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.day h3 { font-size: 0.9rem; margin: 0; }
.day ul { display: grid; gap: 6px; }
.shift { display: grid; gap: 2px; padding: 8px 12px; border-radius: 6px; background: var(--chip); justify-items: start; }
.shift.mine { box-shadow: inset 4px 0 0 var(--accent); }

/* Documents and news */
.request-card { display: grid; gap: 10px; padding: 16px; border-radius: var(--radius-md); max-width: 520px; }
.news-item { display: grid; gap: 8px; padding: 16px; border-radius: var(--radius-md); }
.news-item.unread { box-shadow: inset 4px 0 0 var(--accent); }
.news-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.news-body { white-space: pre-wrap; overflow-wrap: anywhere; }
.news-item button { justify-self: start; }

.scrim { display: none; }
.bottombar { display: none; }

/* Touch devices and narrow windows: the menu becomes a drawer, and a floating bar gives quick access */
@media (max-width: 899px), (hover: none) {
  :root { --head-h: 56px; }
  .sidebar, .sidebar[data-open="true"], .sidebar[data-open="false"] { top: 0; width: min(300px, 86vw); padding-top: 20px; z-index: 60; border-radius: 0 20px 20px 0; transform: translateX(-105%); visibility: hidden; transition: transform 0.22s ease, visibility 0.22s; }
  .sidebar[data-drawer="open"] { transform: none; visibility: visible; box-shadow: 14px 0 40px rgba(0, 0, 0, 0.45); }
  .pin, .brand-name, .shell:not([data-pinned="true"]) .brand-name { display: none; }
  .top-left { width: auto; }
  .main, .shell[data-pinned="true"] .main { margin-left: 0; padding-bottom: 92px; }
  .topbar { padding: 0 10px 0 16px; gap: 8px; }
  .heading h1 { font-size: 1.05rem; }
  .user-label, .user-caret { display: none; }
  .user-btn { padding: 0 6px; border: 0; }
  /* The search becomes a button; opened, its field covers the header (the header is the positioned parent, so .search must not be) */
  .search { position: static; flex: none; }
  .search-toggle { display: grid; width: 36px; height: 36px; }
  .search-field { display: none; }
  .search[data-open="true"] .search-field { display: flex; position: absolute; z-index: 5; inset: 8px 10px; height: auto; background: var(--head-bg); }
  .search-close { display: grid; margin-right: -8px; }
  .search-pop { max-height: 60vh; overflow-y: auto; }
  .tabs { padding: 0 16px; }
  .tabs ul { gap: 22px; }
  .body { padding: 16px 12px 24px; }
  .body.with-inner { flex-direction: column; align-items: stretch; gap: 12px; padding: 16px 12px 24px; }
  .with-inner .content { padding: 0; }
  .inner { position: static; align-self: stretch; width: auto; height: auto; padding: 6px; overflow-x: auto; scrollbar-width: none; border: 1px solid var(--line); border-radius: 8px; }
  button.wide-btn { width: 100%; }
  .bell-wrap { position: static; }
  .bell-panel { left: 8px; right: 8px; top: calc(100% + 4px); width: auto; }
  button.primary, button.secondary { min-height: 44px; }
  input, select { min-height: 44px; }
  .bell { width: 36px; height: 36px; }
  .user-btn { height: 36px; }
  .inner a { height: 40px; }
  .rail-tip { display: none; }
  .inner ul { display: flex; gap: 4px; }
  .inner a { white-space: nowrap; }
  .scrim[data-drawer="open"] { display: block; position: fixed; inset: 0; z-index: 55; background: rgba(0, 0, 0, 0.5); }
  .bottombar { display: block; position: fixed; left: 10px; right: 10px; bottom: max(10px, env(safe-area-inset-bottom)); z-index: 20; border-radius: 30px; box-shadow: var(--shadow-pop); }
  .bottombar ul { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; padding: 4px; gap: 2px; }
  .bottomlink { display: grid; justify-items: center; align-content: start; gap: 2px; width: 100%; min-height: 56px; padding: 9px 2px 6px; border: 0; border-radius: 26px; background: transparent; color: var(--muted); font: inherit; font-size: 0.72rem; text-decoration: none; cursor: pointer; }
  .bottomlink span { text-align: center; line-height: 1.15; }
  .bottomlink[aria-current="page"] { background: var(--soft); color: var(--accent-ink); font-weight: 650; }
  .toast { bottom: 100px; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}

/* Owner portal (the operator door): a plain header and one centred column; it reuses the tiles, tables, dialogs and sign-in card. */
.owner-shell { min-height: 100vh; background: var(--bg); }
.owner-top { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; min-height: var(--head-h); padding: 8px 20px; background: var(--head-bg); color: var(--head-text); font-size: 14px; line-height: 20px; }
.owner-top :focus-visible { outline-color: var(--side-mark); }
.owner-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.owner-name { color: #a9afb4; }
.owner-top h1.brand { margin: 0; font: inherit; }
.owner-top button { display: inline-flex; align-items: center; gap: 6px; min-height: 34px; padding: 0 12px; border: 1px solid var(--side-hover); border-radius: 6px; background: transparent; color: var(--head-text); font: inherit; cursor: pointer; }
.owner-top button:hover { background: var(--side-hover); }
@media (max-width: 899px), (hover: none) { .owner-top button { min-height: 44px; } }
.owner-main { max-width: 980px; margin: 0 auto; padding: 24px 16px 48px; display: grid; gap: 16px; }
.owner-main:focus-visible { outline: none; }
.owner-customer { margin: 0; font-size: 1.25rem; }

/* On a phone the three week buttons share one row (the label goes below them). */
@media (max-width: 640px) {
  .week-nav { display: grid; grid-template-columns: repeat(3, 1fr); }
  .week-nav > :not(button) { grid-column: 1 / -1; }
  .week-nav button { padding: 6px 8px; line-height: 1.2; text-align: center; }
}

/* Kiosk terminal: the screen of a shared device. Big controls, few choices. */
.kiosk-form { display: grid; gap: 14px; max-width: 420px; margin: 0 auto; }
.kiosk-input { font-size: 24px; min-height: 56px; text-align: center; letter-spacing: 2px; }
.kiosk-keypad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.kiosk-key { min-height: 64px; font-size: 24px; justify-content: center; text-align: center; }
.kiosk-punch { min-height: 64px; font-size: 22px; justify-content: center; width: 100%; }
.kiosk-status { min-height: 56px; font-size: 20px; text-align: center; }
.kiosk-ok { color: #1f7a3d; font-weight: 600; }
.kiosk-bad { color: #b3261e; }