/* Karmik UI kit: frosted glass frame over soft colour glows, solid tables, teal accent, light + dark. */
@import url("https://fonts.googleapis.com/css2?family=Outfit:wght@500;600;700;800&family=Nunito+Sans:opsz,wght@6..12,400;6..12,600;6..12,700&family=JetBrains+Mono:wght@500&family=Lexend:wght@600&family=Space+Grotesk:wght@700&display=swap");

:root {
  color-scheme: light;
  --bg: #eef6f4; --bg-2: #e2efec; --side: #ffffff; --panel: #ffffff; --panel-2: #f5faf9;
  --edge: rgba(13, 148, 136, 0.16); --edge-strong: rgba(13, 148, 136, 0.36);
  --text: #10302d; --muted: #48625f; --faint: #7a9793;
  --accent: #0d9488; --accent-2: #c2700f; --accent-soft: rgba(13, 148, 136, 0.10);
  --on-accent: #ffffff; --grad: linear-gradient(135deg, #2dd4bf, #0f766e);
  --good: #15803d; --warn: #b45309; --bad: #b91c1c; --info: #0369a1; --vio: #6d28d9; --gold: #a16207; --slate: #52606d;
  --shadow: 0 10px 30px rgba(15, 118, 110, 0.10);
  /* Glass: see-through panels over the colour glows in --backdrop. Tables stay on solid --panel. */
  --glass: rgba(255, 255, 255, 0.55); --glass-strong: rgba(255, 255, 255, 0.84);
  --glass-edge: rgba(255, 255, 255, 0.75); --glass-hi: inset 0 1px 0 rgba(255, 255, 255, 0.9);
  --inner: rgba(255, 255, 255, 0.5); --inner-edge: rgba(255, 255, 255, 0.85); --nav-on: rgba(255, 255, 255, 0.78);
  --blur: blur(18px) saturate(160%);
  --backdrop: radial-gradient(640px 520px at 0% 0%, rgba(45, 212, 191, 0.42), transparent 70%),
    radial-gradient(520px 460px at 78% 0%, rgba(196, 181, 253, 0.38), transparent 70%),
    radial-gradient(620px 560px at 100% 100%, rgba(251, 191, 36, 0.30), transparent 70%),
    radial-gradient(560px 520px at 40% 100%, rgba(125, 211, 252, 0.38), transparent 70%),
    linear-gradient(170deg, #eaf6f3, #e0efec);
  --display: "Outfit", "Segoe UI", system-ui, sans-serif;
  --body: "Nunito Sans", "Segoe UI", system-ui, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, Consolas, monospace;
  --wordmark: "Lexend", "Segoe UI", system-ui, sans-serif;
  --mark: "Space Grotesk", "Segoe UI", system-ui, sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #0b181b; --bg-2: #0f2226; --side: #0a1417; --panel: #12262a; --panel-2: #0f2023;
    --edge: rgba(94, 234, 212, 0.13); --edge-strong: rgba(94, 234, 212, 0.38);
    --text: #e6f6f3; --muted: #93b5b0; --faint: #6b8c87;
    --accent: #2dd4bf; --accent-2: #f5b041; --accent-soft: rgba(45, 212, 191, 0.13);
    --on-accent: #042f2b; --grad: linear-gradient(135deg, #5eead4, #0d9488);
    --good: #4ade80; --warn: #f5b041; --bad: #fb7185; --info: #7dd3fc; --vio: #c4b5fd; --gold: #facc15; --slate: #94a3b8;
    --shadow: 0 12px 32px rgba(0, 0, 0, 0.35);
  --glass: rgba(16, 34, 38, 0.55); --glass-strong: rgba(14, 30, 34, 0.9);
  --glass-edge: rgba(94, 234, 212, 0.16); --glass-hi: inset 0 1px 0 rgba(255, 255, 255, 0.07);
  --inner: rgba(255, 255, 255, 0.04); --inner-edge: rgba(94, 234, 212, 0.12); --nav-on: rgba(45, 212, 191, 0.14);
  --backdrop: radial-gradient(640px 520px at 0% 0%, rgba(13, 148, 136, 0.40), transparent 70%),
    radial-gradient(520px 460px at 78% 0%, rgba(109, 40, 217, 0.28), transparent 70%),
    radial-gradient(620px 560px at 100% 100%, rgba(180, 83, 9, 0.22), transparent 70%),
    radial-gradient(560px 520px at 40% 100%, rgba(3, 105, 161, 0.32), transparent 70%),
    linear-gradient(170deg, #081417, #0b1c20);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0b181b; --bg-2: #0f2226; --side: #0a1417; --panel: #12262a; --panel-2: #0f2023;
  --edge: rgba(94, 234, 212, 0.13); --edge-strong: rgba(94, 234, 212, 0.38);
  --text: #e6f6f3; --muted: #93b5b0; --faint: #6b8c87;
  --accent: #2dd4bf; --accent-2: #f5b041; --accent-soft: rgba(45, 212, 191, 0.13);
  --on-accent: #042f2b; --grad: linear-gradient(135deg, #5eead4, #0d9488);
  --good: #4ade80; --warn: #f5b041; --bad: #fb7185; --info: #7dd3fc; --vio: #c4b5fd; --gold: #facc15; --slate: #94a3b8;
  --shadow: 0 12px 32px rgba(0, 0, 0, 0.35);
  --glass: rgba(16, 34, 38, 0.55); --glass-strong: rgba(14, 30, 34, 0.9);
  --glass-edge: rgba(94, 234, 212, 0.16); --glass-hi: inset 0 1px 0 rgba(255, 255, 255, 0.07);
  --inner: rgba(255, 255, 255, 0.04); --inner-edge: rgba(94, 234, 212, 0.12); --nav-on: rgba(45, 212, 191, 0.14);
  --backdrop: radial-gradient(640px 520px at 0% 0%, rgba(13, 148, 136, 0.40), transparent 70%),
    radial-gradient(520px 460px at 78% 0%, rgba(109, 40, 217, 0.28), transparent 70%),
    radial-gradient(620px 560px at 100% 100%, rgba(180, 83, 9, 0.22), transparent 70%),
    radial-gradient(560px 520px at 40% 100%, rgba(3, 105, 161, 0.32), transparent 70%),
    linear-gradient(170deg, #081417, #0b1c20);
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background: var(--backdrop); background-color: var(--bg);
  background-attachment: fixed; color: var(--text); font-family: var(--body); font-size: 14.5px; line-height: 1.5; min-height: 100vh;
}
h1, h2, h3, h4 { font-family: var(--display); margin: 0; text-wrap: balance; }
p { margin: 0; }
a { color: var(--accent); }
button { font: inherit; color: inherit; cursor: pointer; }
input, select, textarea { font: inherit; color: var(--text); }
/* A dropdown's open list is drawn by the browser on a solid surface; give it the theme's solid colours
   (the fields themselves are translucent glass, which the list can't use). */
select option, select optgroup { background-color: var(--panel); color: var(--text); }
select option:checked { background-color: var(--accent); color: var(--on-accent); }
select option:disabled { color: var(--muted); }
.mono { font-family: var(--mono); font-size: .9em; }
.muted { color: var(--muted); }
.small { font-size: 12.5px; }
.num, .tnum { font-variant-numeric: tabular-nums; }
/* Numbers line up on the right in every table (headers too); dates and times use .tnum and stay left. */
td.num, th.num { text-align: right; }
td.tnum { white-space: nowrap; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* Buttons, chips, fields */
.btn { border: 1px solid transparent; border-radius: 999px; padding: 8px 16px; font-weight: 700; font-size: 13.5px; background: var(--grad); color: var(--on-accent); display: inline-flex; gap: 6px; align-items: center; justify-content: center; white-space: nowrap; text-decoration: none; }
.btn.ghost { background: var(--panel); color: var(--text); border-color: var(--edge-strong); }
.btn.danger { background: transparent; color: var(--bad); border-color: color-mix(in srgb, var(--bad) 45%, transparent); }
.btn.sm { padding: 5px 12px; font-size: 12.5px; }
.btn.block { width: 100%; }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn:focus-visible, .nav-btn:focus-visible, .tab:focus-visible, .role-btn:focus-visible, .chip-btn:focus-visible { outline: 2px solid var(--accent-2); outline-offset: 2px; }
.chip { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 700; padding: 3px 10px; border-radius: 999px; white-space: nowrap; border: 1px solid currentColor; }
.c-good { color: var(--good); background: color-mix(in srgb, var(--good) 12%, transparent); }
.c-warn { color: var(--warn); background: color-mix(in srgb, var(--warn) 13%, transparent); }
.c-bad { color: var(--bad); background: color-mix(in srgb, var(--bad) 11%, transparent); }
.c-info { color: var(--info); background: color-mix(in srgb, var(--info) 12%, transparent); }
.c-slate { color: var(--slate); background: color-mix(in srgb, var(--slate) 12%, transparent); }
.c-teal { color: var(--accent); background: var(--accent-soft); }
.chip-btn { border: 1px solid var(--inner-edge); background: var(--inner); border-radius: 999px; padding: 4px 11px; font-size: 12.5px; font-weight: 700; color: var(--muted); text-decoration: none; }
.chip-btn[aria-current="true"] { background: var(--grad); color: var(--on-accent); border-color: transparent; }
.field { display: grid; gap: 5px; align-content: start; }  /* in a row of fields, a short one keeps its own height instead of stretching its box */
.field.has-error .input { border-color: var(--bad); box-shadow: 0 0 0 3px color-mix(in srgb, var(--bad) 15%, transparent); }
.field-error { color: var(--bad); font-size: 12.5px; font-weight: 700; }
.field label, .label { font-size: 12.5px; font-weight: 700; color: var(--muted); }
/* Mandatory fields get a red asterisk automatically: any field whose input is marked required. */
.field:has(> :is(input, select, textarea)[required]) > label::after { content: " *"; color: var(--bad); font-weight: 800; }
.req-note { font-size: 12.5px; color: var(--muted); }
.req-note b { color: var(--bad); }
.input { width: 100%; background: var(--panel-2); border: 1px solid var(--edge-strong); border-radius: 12px; padding: 9px 12px; }
.input:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
select.input[multiple] { min-height: 96px; }
.check { display: flex; gap: 8px; align-items: center; font-size: 13.5px; }
.check input, .matrix input { width: 17px; height: 17px; accent-color: var(--accent); }
.note { font-size: 12.5px; color: var(--muted); }
.alert { border-radius: 14px; padding: 10px 14px; font-size: 13.5px; border: 1px solid var(--edge-strong); background: var(--accent-soft); }
.alert.error { border-color: color-mix(in srgb, var(--bad) 45%, transparent); background: color-mix(in srgb, var(--bad) 9%, transparent); color: var(--bad); }
.alert.ok { border-color: color-mix(in srgb, var(--good) 45%, transparent); background: color-mix(in srgb, var(--good) 10%, transparent); color: var(--good); }

/* Shell */
/* Sidebar: icon and label side by side; collapses to icons only (html[data-side="closed"]), a drawer on phones. */
.app { display: grid; grid-template-columns: var(--side-w, 212px) 1fr; min-height: 100vh; }
.side { position: sticky; top: 0; height: 100vh; box-sizing: border-box; background: var(--glass); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); border-right: 1px solid var(--glass-edge); display: flex; flex-direction: column; gap: 2px; padding: 14px 8px; overflow-y: auto; overflow-x: hidden; scrollbar-width: thin; }
.side-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 0 4px 12px; flex: none; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--text); font-family: var(--wordmark); font-weight: 600; font-size: 20px; letter-spacing: -0.01em; }
/* Logo tile: "leaf" shape, two rounded and two sharp corners. */
.logo { width: 40px; height: 40px; border-radius: 16px 4px 16px 4px; background: var(--grad); color: var(--on-accent); display: grid; place-items: center; font-family: var(--mark); font-weight: 700; font-size: 19px; letter-spacing: 0; flex: none; text-decoration: none; }
/* In the app, the logo shines once: right after signing in, and when the mouse is over it. It never loops. */
.side .brand .logo { position: relative; overflow: hidden; }
.side .brand .logo::after { content: ""; position: absolute; top: -40%; left: -90%; width: 55%; height: 180%; transform: rotate(22deg); pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .75), transparent); }
.side .brand .logo.shine::after, .side .brand:hover .logo::after, .side .brand:focus-visible .logo::after { animation: logo-shine 1.1s ease-in-out 1; }
@keyframes logo-shine { from { left: -90%; } to { left: 150%; } }
@media (prefers-reduced-motion: reduce) { .side .brand .logo::after { animation: none !important; } }
.side-toggle { width: 32px; height: 32px; border-radius: 10px; border: 1px solid var(--inner-edge); background: var(--inner); color: var(--muted); display: grid; place-items: center; padding: 0; flex: none; }
.side-toggle:hover { color: var(--text); border-color: var(--edge-strong); }
.nav-btn { position: relative; display: flex; align-items: center; gap: 12px; height: 38px; padding: 0 12px; border: 0; border-radius: 12px; background: transparent; color: var(--muted); font-size: 14px; font-weight: 700; text-decoration: none; white-space: nowrap; flex: none; }
.nav-btn .ico { font-size: 18px; width: 22px; text-align: center; flex: none; }
.nav-btn .side-label { flex: 1; overflow: hidden; text-overflow: ellipsis; }
.side-version { margin-top: auto; padding: 12px 12px 2px; font-size: 11.5px; font-weight: 700; color: var(--muted); opacity: .75; white-space: nowrap; font-variant-numeric: tabular-nums; flex: none; }
.side-version .side-byline { display: block; margin-top: 2px; font-size: 10.5px; font-weight: 600; letter-spacing: .02em; }
.nav-btn .badge { background: var(--accent-2); color: #1b1203; font-size: 11px; font-weight: 800; border-radius: 999px; padding: 1px 7px; }
.nav-btn:hover { background: var(--accent-soft); color: var(--text); }
.nav-btn[aria-current="page"] { background: var(--nav-on); color: var(--accent); box-shadow: inset 0 0 0 1px var(--edge-strong), 0 4px 14px rgba(15, 118, 110, 0.10); }
.drawer-open, .drawer-close, .drawer-backdrop { display: none; }
.side-tip { position: fixed; z-index: 50; background: var(--text); color: var(--bg); font-size: 13px; font-weight: 700; padding: 5px 10px; border-radius: 8px; pointer-events: none; white-space: nowrap; }
@media (min-width: 761px) {
  :root[data-side="closed"] { --side-w: 64px; }
  :root[data-side="closed"] .side .side-label { display: none; }
  :root[data-side="closed"] .side-head { flex-direction: column; gap: 10px; padding: 0 0 8px; }
  :root[data-side="closed"] .side-toggle { width: 48px; }
  :root[data-side="closed"] .side-toggle svg { transform: rotate(180deg); }
  :root[data-side="closed"] .nav-btn { padding: 0; justify-content: center; }
  :root[data-side="closed"] .side-version { padding: 12px 0 2px; text-align: center; font-size: 10px; }
  :root[data-side="closed"] .nav-btn .badge { position: absolute; top: 1px; right: 2px; font-size: 10px; padding: 0 5px; }
}

/* Account menu on the avatar */
.account { position: relative; }
.account > summary { list-style: none; cursor: pointer; }
.account > summary::-webkit-details-marker { display: none; }
.account-menu { position: absolute; right: 0; top: 46px; width: 240px; box-sizing: border-box; background: var(--glass-strong); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); border: 1px solid var(--glass-edge); border-radius: 14px; box-shadow: var(--shadow); padding: 8px; display: grid; gap: 2px; z-index: 40; }
.account-menu .who { display: grid; gap: 2px; padding: 6px 10px 10px; border-bottom: 1px solid var(--edge); margin-bottom: 4px; overflow-wrap: anywhere; }
.account-menu a, .account-menu button { display: flex; gap: 10px; align-items: center; width: 100%; padding: 9px 10px; border: 0; border-radius: 10px; background: transparent; color: var(--text); font: inherit; font-size: 14px; font-weight: 700; text-decoration: none; text-align: left; cursor: pointer; }
.account-menu a:hover, .account-menu button:hover { background: var(--accent-soft); }
.account-menu .out { color: var(--bad); }
.main { min-width: 0; display: grid; align-content: start; }
.topbar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; padding: 14px 28px; }
.topbar .left, .topbar .right { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.tenant-name { border-radius: 999px; padding: 7px 14px; font-weight: 700; font-size: 13px; }
/* Frosted glass surfaces */
.tenant-name, .theme-toggle, .bell, .drawer-open, .card, .tile { background: var(--glass); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); border: 1px solid var(--glass-edge); box-shadow: var(--shadow), var(--glass-hi); }
.avatar { width: 38px; height: 38px; border-radius: 50%; background: var(--grad); color: var(--on-accent); display: grid; place-items: center; font-family: var(--display); font-weight: 800; font-size: 14px; flex: none; text-decoration: none; }
.theme-toggle { border-radius: 999px; width: 38px; height: 38px; }
.content { padding: 4px 28px 72px; display: grid; gap: 18px; }
.page-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 12px; }
.page-head h1 { font-size: 26px; font-weight: 800; }
/* A dialog stays hidden until it's opened, whatever class it carries (e.g. .card sets display: grid) */
dialog:not([open]) { display: none !important; }
dialog::backdrop { background: rgba(4, 20, 22, .45); }
/* Back to the page above: a clear button, the same on every page */
.back { display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 6px 14px 6px 12px; margin-bottom: 10px;
  border: 1px solid var(--glass-edge); border-radius: 999px; background: var(--glass); color: var(--text); font-size: 14px; font-weight: 700;
  text-decoration: none; transition: border-color .15s, background .15s, color .15s; }
.back span { font-size: 16px; line-height: 1; color: var(--accent); transition: transform .15s; }
.back:hover { border-color: var(--accent); color: var(--accent); }
.back:hover span { transform: translateX(-2px); }
.back:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .back, .back span { transition: none; } }
/* "See more" from a card: a compact pill that fits the card title's height. Bordered, so it never blends into the card */
.more { display: inline-flex; align-items: center; gap: 6px; min-height: 28px; padding: 3px 10px 3px 12px; flex: none;
  border: 1px solid var(--glass-edge); border-radius: 999px; background: var(--glass); color: var(--text); font-size: 13px; font-weight: 700;
  line-height: 1.2; text-decoration: none; white-space: nowrap; transition: border-color .15s, color .15s; }
.more span { color: var(--accent); transition: transform .15s; }
.more:hover { border-color: var(--accent); color: var(--accent); }
.more:hover span { transform: translateX(2px); }
.more:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.more.wide { display: flex; justify-content: center; margin-top: 4px; }
/* Inside a table the pill would blend into the row, so it keeps a visible border and reads as a button */
td .more { border-color: var(--glass-edge); color: var(--accent); background: var(--panel, var(--glass)); }
td .more:hover { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, transparent); }
@media (prefers-reduced-motion: reduce) { .more, .more span { transition: none; } }
.page-head p { color: var(--muted); }

/* Cards, tiles, lists, tables */
.card { border-radius: 20px; padding: 18px; display: grid; gap: 12px; align-content: start; min-width: 0; }
.card.flat { box-shadow: none; background: var(--inner); border-color: var(--inner-edge); -webkit-backdrop-filter: none; backdrop-filter: none; }
.card-h { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; }
.card-h h3 { font-size: 15.5px; font-weight: 700; }
.grid { display: grid; gap: 14px; }
.g2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.g3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(175px, 1fr)); gap: 12px; }
.tile { border-radius: 18px; padding: 14px 16px; display: grid; grid-template-columns: 50px 1fr; gap: 12px; align-items: center; }
.ring { width: 50px; height: 50px; border-radius: 50%; position: relative; display: grid; place-items: center; }
/* The ring is cut out with a mask so the glass shows through its middle. */
.ring::before { content: ""; position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(var(--accent) 0 var(--p, 100%), var(--accent-soft) var(--p, 100%) 100%);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 5px), #000 calc(100% - 4.5px)); mask: radial-gradient(farthest-side, transparent calc(100% - 5px), #000 calc(100% - 4.5px)); }
.ring span { position: relative; font-size: 17px; }
.tv { font-family: var(--display); font-weight: 800; font-size: 22px; line-height: 1.1; font-variant-numeric: tabular-nums; }
.tl { font-size: 12.5px; font-weight: 700; color: var(--muted); }
.list { display: grid; gap: 8px; }
.row { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center; padding: 10px 12px; border-radius: 14px; background: var(--inner); border: 1px solid var(--inner-edge); }
.row .t { font-weight: 700; }
.row .s { font-size: 12.5px; color: var(--muted); }
/* Tables and grids sit on a solid panel so numbers stay easy to read. */
.table-wrap { overflow-x: auto; border: 1px solid var(--edge); border-radius: 16px; background: var(--panel); }
table { width: 100%; border-collapse: collapse; font-size: 13.5px; min-width: 620px; }
th, td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--edge); vertical-align: middle; }
th { font-family: var(--display); font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); font-weight: 700; background: var(--panel-2); }
tr:last-child td { border-bottom: 0; }
.matrix td, .matrix th { text-align: center; }
.matrix td:first-child, .matrix th:first-child { text-align: left; }
.matrix-all { display: inline-flex; flex-direction: column; align-items: center; gap: 4px; cursor: pointer; white-space: nowrap; }
.matrix td:nth-child(2), .matrix th:nth-child(2) { border-right: 1px solid var(--line, rgba(127,127,127,.25)); }
/* Section tabs, e.g. on an employee's profile */
.tabs { display: flex; flex-wrap: wrap; gap: 6px; padding-bottom: 12px; border-bottom: 1px solid var(--edge); }
.tab { display: inline-flex; align-items: center; padding: 7px 14px; border-radius: 999px; border: 1px solid var(--edge-strong);
  background: var(--inner); color: var(--text); font-size: 13.5px; font-weight: 700; text-decoration: none; white-space: nowrap; }
.tab:hover { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); }
.tab[aria-current="page"] { background: var(--grad); border-color: transparent; color: var(--on-accent); box-shadow: 0 4px 12px rgba(13, 148, 136, 0.25); }

/* Payroll working: salary → per day → deductions → net */
table.working { min-width: 0; font-size: 13.5px; }
table.working td { padding: 6px 8px; }
table.working td.num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
table.working tr.total td { font-weight: 800; border-top: 2px solid var(--edge-strong); }

/* Small form that opens in place, e.g. "Set password" in a table row */
details.pop { display: inline-block; vertical-align: top; }
details.pop > summary { list-style: none; cursor: pointer; }
details.pop > summary::-webkit-details-marker { display: none; }
.pop-panel.wide { width: 340px; }
.pop-panel { display: grid; gap: 8px; width: 270px; margin-top: 8px; padding: 12px; border-radius: 12px; text-align: left; white-space: normal; background: var(--panel-2); border: 1px solid var(--edge); }
.kv { display: grid; grid-template-columns: 170px 1fr; gap: 8px 16px; font-size: 14px; }
.kv dt { color: var(--muted); font-weight: 700; }
.kv dd { margin: 0; }

/* Roles */
.roles { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 14px; }
.role-btn { width: 100%; text-align: left; border: 1px solid var(--inner-edge); background: var(--inner); border-radius: 14px; padding: 10px 12px; display: grid; gap: 2px; text-decoration: none; color: var(--text); }
.role-btn[aria-current="true"] { border-color: var(--accent); background: var(--accent-soft); }
.role-btn b { font-size: 14px; }
.role-btn span { font-size: 12px; color: var(--muted); }
.switch { display: flex; justify-content: space-between; gap: 10px; align-items: center; padding: 8px 12px; border-radius: 12px; background: var(--inner); border: 1px solid var(--inner-edge); font-size: 13.5px; }
.switch input { width: 18px; height: 18px; accent-color: var(--accent); }

/* Auth pages */
.auth { min-height: 100vh; display: grid; grid-template-columns: 1fr 1fr;
  background: radial-gradient(620px 560px at 0% 0%, rgba(45, 212, 191, 0.7), transparent 70%),
    radial-gradient(560px 520px at 90% 100%, rgba(251, 191, 36, 0.45), transparent 70%),
    radial-gradient(420px 420px at 85% 0%, rgba(125, 211, 252, 0.45), transparent 70%),
    radial-gradient(420px 420px at 30% 100%, rgba(167, 139, 250, 0.35), transparent 70%),
    linear-gradient(135deg, #0f766e, #115e59);
  background-attachment: fixed; }
.auth-brand { color: #ffffff; padding: 48px; display: grid; align-content: space-between; gap: 24px; }
.auth-brand h2 { font-size: clamp(30px, 4vw, 44px); font-weight: 800; line-height: 1.1; text-shadow: 0 2px 20px rgba(4, 47, 43, 0.35); }
.auth-brand p { opacity: .9; max-width: 42ch; }
.auth-brand .brandrow { display: flex; gap: 12px; align-items: center; font-family: var(--wordmark); font-weight: 600; font-size: 24px; letter-spacing: -0.01em; }
.auth-brand .brandrow .logo { background: rgba(255, 255, 255, .22); border: 1px solid rgba(255, 255, 255, .45); color: inherit; margin: 0; }
.auth-form { display: grid; place-items: center; padding: 32px 20px; }
/* Sign-in: big glass logo with a sweeping shine and a soft breathing glow */
.auth-hero { display: grid; gap: 14px; justify-items: start; }
.auth-brand .brand-addr { font-family: var(--body); font-size: 15px; font-weight: 600; opacity: .75; }  /* the address this page was opened at, to bookmark */
.auth-foot { display: grid; gap: 4px; } .auth-brand .auth-version { opacity: .7; font-variant-numeric: tabular-nums; }
.auth-logo { --size: 128px; position: relative; width: var(--size); height: var(--size); border-radius: 50px 14px 50px 14px; display: grid; place-items: center;
  isolation: isolate; margin-bottom: 6px; animation: auth-logo-breathe 3.6s ease-in-out infinite; }
.auth-logo::before { content: ""; position: absolute; inset: 0; border-radius: inherit; z-index: -1; background: linear-gradient(135deg, rgba(255, 255, 255, .7), rgba(255, 255, 255, .15)); }
.auth-logo .face { position: absolute; inset: 4px; border-radius: 46px 10px 46px 10px; overflow: hidden; background: linear-gradient(145deg, rgba(20, 110, 100, .55), rgba(13, 80, 74, .45));
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55), 0 18px 40px rgba(4, 47, 43, .35); }
.auth-logo .face::after { content: ""; position: absolute; top: -40%; left: -80%; width: 55%; height: 180%; transform: rotate(22deg);
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .55), transparent); animation: auth-logo-sheen 3.6s ease-in-out infinite; }
.auth-logo .k { position: relative; z-index: 2; font-family: var(--mark); font-weight: 700; font-size: 62px; line-height: 1; color: #ffffff; text-shadow: 0 4px 18px rgba(4, 47, 43, .35); }
@keyframes auth-logo-sheen { 0%, 55% { left: -80%; } 85%, 100% { left: 140%; } }
@keyframes auth-logo-breathe { 0%, 100% { box-shadow: 0 0 0 0 rgba(94, 234, 212, 0); } 50% { box-shadow: 0 0 34px 6px rgba(94, 234, 212, .45); } }
@media (max-width: 860px) { .auth-logo { --size: 104px; border-radius: 42px 12px 42px 12px; } .auth-logo .face { border-radius: 38px 8px 38px 8px; } .auth-logo .k { font-size: 50px; } }
@media (prefers-reduced-motion: reduce) { .auth-logo, .auth-logo .face::after { animation: none; } }
.auth-card { width: 100%; max-width: 440px; display: grid; gap: 16px; padding: 32px; border-radius: 28px; color: var(--text);
  background: var(--glass-strong); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); border: 1px solid var(--glass-edge);
  box-shadow: 0 24px 60px rgba(4, 47, 43, 0.30), var(--glass-hi); }
.auth-card h1 { font-size: 26px; font-weight: 800; }

@media (max-width: 1000px) { .g3, .roles { grid-template-columns: 1fr; } }
@media (max-width: 760px) {
  .app { grid-template-columns: 1fr; }
  .side { position: fixed; left: 0; top: 0; bottom: 0; height: 100%; width: 272px; z-index: 60; padding: 16px 10px; border-right: 0; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2); transform: translateX(-100%); visibility: hidden; transition: transform .2s ease, visibility .2s; }
  :root[data-drawer="open"] .side { transform: none; visibility: visible; }
  .side-toggle { display: none; }
  .drawer-close { display: grid; place-items: center; width: 44px; height: 44px; border: 0; background: transparent; color: var(--muted); padding: 0; }
  .drawer-open { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; color: var(--text); padding: 0; }
  .side { background: var(--glass-strong); }
  .drawer-backdrop { display: block; position: fixed; inset: 0; z-index: 55; background: rgba(16, 48, 45, 0.45); opacity: 0; pointer-events: none; transition: opacity .2s; }
  :root[data-drawer="open"] .drawer-backdrop { opacity: 1; pointer-events: auto; }
  .nav-btn { height: 44px; font-size: 15px; }
  .topbar, .content { padding-inline: 16px; }
  .g2 { grid-template-columns: 1fr; }
  .auth { grid-template-columns: 1fr; }
  .auth-brand { padding: 28px 20px; }
  .kv { grid-template-columns: 1fr; gap: 2px 0; }
  .kv dd { margin-bottom: 8px; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; scroll-behavior: auto !important; } }
/* No blur support, or the person asked for less transparency: use near-solid panels instead. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  :root, :root[data-theme], :root:not([data-theme]) { --glass: var(--glass-strong); }
}
@media (prefers-reduced-transparency: reduce) {
  :root, :root[data-theme], :root:not([data-theme]) { --glass: var(--panel); --glass-strong: var(--panel); --inner: var(--panel-2); }
}

/* Header bell and nav badges */
.bell { position: relative; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; text-decoration: none; }
.bell i { position: absolute; top: -2px; right: -2px; background: var(--accent-2); color: #1b1203; font-style: normal; font-size: 10px; font-weight: 800; border-radius: 999px; padding: 0 5px; }
.hub { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 12px; }
.hub a.card { text-decoration: none; color: var(--text); }
.hub a.card:hover { border-color: var(--accent); }
.hub .ico { font-size: 24px; }

/* Attendance calendar and register */
.cal { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.cal .dow { font-family: var(--display); font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); text-align: center; font-weight: 700; }
.day { border: 1px solid var(--edge); background: var(--inner); border-radius: 14px; padding: 8px; min-height: 84px; display: grid; align-content: space-between; gap: 3px; text-decoration: none; color: var(--text); }
.day.pad { visibility: hidden; }
.day .dn { font-family: var(--display); font-weight: 800; font-size: 15px; display: flex; justify-content: space-between; }
.day .in { font-family: var(--mono); font-size: 11px; color: var(--muted); }
.day .chip { font-size: 10.5px; padding: 1px 7px; justify-self: start; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.day .cutv { font-family: var(--mono); font-size: 11px; color: var(--warn); }
.day.future { opacity: .55; }
.day.today { box-shadow: inset 0 0 0 2px var(--accent); }
.day[aria-current="true"] { background: var(--accent-soft); border-color: var(--accent); }
.c-vio { color: var(--vio); background: color-mix(in srgb, var(--vio) 12%, transparent); }
.c-gold { color: var(--gold); background: color-mix(in srgb, var(--gold) 13%, transparent); }
.reg td, .reg th { padding: 4px 5px; text-align: center; font-size: 11.5px; }
.reg td:first-child, .reg th:first-child { text-align: left; white-space: nowrap; position: sticky; left: 0; background: var(--panel); }
.reg .s { display: inline-block; min-width: 24px; border-radius: 6px; padding: 1px 3px; font-weight: 700; }
.seg { display: inline-flex; border: 1px solid var(--edge-strong); border-radius: 999px; overflow: hidden; }
.seg a, .seg button { border: 0; background: transparent; padding: 6px 12px; font-size: 12.5px; font-weight: 700; color: var(--muted); text-decoration: none; }
.seg [aria-current="true"] { background: var(--accent); color: var(--on-accent); }
@media (max-width: 760px) { .day { min-height: 60px; padding: 5px; } .day .in, .day .cutv { display: none; } .day .chip { font-size: 9.5px; padding: 0 4px; } }

/* Punch grid */
.pgrid input { width: 88px; font-family: var(--mono); padding: 5px 8px; }
.pgrid input.changed { border-color: var(--accent-2); background: color-mix(in srgb, var(--accent-2) 10%, transparent); }
.pgrid input.bad { border-color: var(--bad); background: color-mix(in srgb, var(--bad) 10%, transparent); }
.pgrid tr.off td { opacity: .6; }

/* ---------- Home ---------- */
.home-grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.home-col { display: grid; gap: 16px; align-content: start; }
.tile-link { text-decoration: none; color: var(--text); transition: border-color .15s; }
.tile-link:hover, .row-link:hover { border-color: var(--accent); }
.row-link { text-decoration: none; color: var(--text); }
.ico-box { width: 34px; height: 34px; border-radius: 11px; display: grid; place-items: center; background: var(--accent-soft); font-size: 16px; flex: none; }
.c-text-good { color: var(--good); } .c-text-warn { color: var(--warn); } .c-text-bad { color: var(--bad); } .c-text-info { color: var(--info); }
.today-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.today-grid div { background: var(--inner); border: 1px solid var(--inner-edge); border-radius: 14px; padding: 10px 12px; display: grid; }
.today-grid b { font-family: var(--display); font-size: 22px; font-variant-numeric: tabular-nums; }
.today-grid span { font-size: 12.5px; color: var(--muted); font-weight: 700; }
.week-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; }
.week-day { border-radius: 12px; padding: 8px; background: var(--inner); border: 1px solid var(--inner-edge); min-height: 74px; display: grid; align-content: start; gap: 4px; }
.week-day h4 { margin: 0; font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.week-day.is-today { outline: 2px solid var(--accent); }
.week-day.is-holiday { background: color-mix(in srgb, var(--gold) 12%, var(--inner)); }
.week-who { font-size: 12px; font-weight: 700; border-radius: 8px; padding: 2px 6px; background: var(--accent-soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.week-hol { font-size: 12px; font-weight: 700; color: var(--gold); }
div.kv { display: grid; grid-template-columns: 1fr auto; gap: 5px 14px; font-size: 13.5px; }  /* home page tiles; <dl class="kv"> keeps the label | value layout above */
div.kv span { color: var(--muted); }
div.kv b { text-align: right; font-variant-numeric: tabular-nums; }
.bal-grid { display: grid; grid-template-columns: auto 1fr; gap: 18px; align-items: center; }
.big-ring { width: 96px; height: 96px; }
.big-ring span { display: grid; text-align: center; line-height: 1.1; }
.big-ring b { font-family: var(--display); font-size: 24px; }
.big-ring small { font-size: 11px; color: var(--muted); font-weight: 700; }
@media (max-width: 1100px) { .home-grid { grid-template-columns: 1fr; } }
@media (max-width: 640px) { .today-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .week-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* ---------- Company pill (top left) ---------- */
.co-pill { display: inline-flex; align-items: center; gap: 8px; padding: 4px 14px 4px 4px; cursor: default; }
summary.co-pill { cursor: pointer; list-style: none; }
summary.co-pill::-webkit-details-marker { display: none; }
.co-pill small { color: var(--muted); font-weight: 600; }
.co-logo { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--grad); color: var(--on-accent);
  font-family: var(--mark); font-weight: 700; font-size: 11.5px; flex: none; object-fit: cover; }
.co-warn { width: 8px; height: 8px; border-radius: 50%; background: var(--warn); display: inline-block; }
.co-pill .caret { color: var(--muted); font-size: 11px; }
.co-menu { position: relative; }
.co-panel { position: absolute; top: calc(100% + 8px); left: 0; z-index: 40; width: min(440px, calc(100vw - 32px)); display: grid; gap: 4px; padding: 10px;
  border-radius: 18px; background: var(--glass-strong); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur);
  border: 1px solid var(--glass-edge); box-shadow: var(--shadow); }
.co-panel h4 { margin: 4px 8px 4px; font-size: 11.5px; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); }
.co-row { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center; padding: 8px 10px; border-radius: 12px; text-decoration: none; color: var(--text); }
.co-row:hover, .co-row:focus-visible { background: var(--accent-soft); }
.co-row b { display: block; font-size: 13.5px; }
.co-row small { display: block; color: var(--muted); font-size: 12px; }
.co-foot { margin: 4px 8px 2px; padding-top: 8px; border-top: 1px solid var(--glass-edge); font-size: 12px; color: var(--muted); }
.list-label { font-size: 11.5px; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); font-weight: 800; margin: 4px 2px -4px; }
.co-logo.ico-box { border-radius: 11px; width: 34px; height: 34px; }

/* Office now (the computer's live board) */
.board-tiles { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; }
.board-cell.dim { opacity: .6; }  /* a day off or holiday: nobody is expected */
.board-tile { display: grid; gap: 2px; justify-items: center; padding: 12px 8px; border-radius: 14px; background: var(--glass); border: 1px solid var(--glass-edge); text-decoration: none; color: var(--muted); font-weight: 700; font-size: 13px; }
.board-tile b { font-size: 26px; line-height: 1.1; color: var(--text); font-variant-numeric: tabular-nums; }
.board-tile.on { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent) inset; }
.board-tile .c-good-text { color: var(--good, #16a34a); } .board-tile .c-warn-text { color: var(--warn, #d97706); }
.board-tile .c-info-text { color: var(--info, #0284c7); } .board-tile .c-bad-text { color: var(--bad, #dc2626); }
.board-tile .c-slate-text { color: var(--slate, #64748b); }
.board-search { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.board-search .input { flex: 1; min-width: 180px; }
.board-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 14px; align-items: start; }
@media (max-width: 640px) { .board-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); } .board-grid { grid-template-columns: 1fr; } }

/* Group by (any table with data-groupby) */
.gb-bar { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; justify-content: flex-end; font-size: 13px; }
.gb-bar label { font-weight: 800; color: var(--muted); }
.gb-bar select { width: auto; min-width: 150px; }
tr.gb-group td { background: color-mix(in srgb, var(--accent) 9%, transparent); font-weight: 800; }
.gb-toggle { font: inherit; font-weight: 800; background: none; border: 0; color: var(--text); cursor: pointer; display: inline-flex; gap: 8px; align-items: center; padding: 0; }
.gb-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 6px; }
.gb-arrow { color: var(--accent); display: inline-block; width: 14px; transition: transform .15s; }
tr.gb-group.closed .gb-arrow { transform: rotate(-90deg); }
.gb-count { font-weight: 700; color: var(--muted); }
@media (prefers-reduced-motion: reduce) { .gb-arrow { transition: none; } }

/* What's new: version badge, panel and page */
.wn-menu { position: relative; }
.wn-badge { list-style: none; display: inline-flex; align-items: center; gap: 7px; padding: 5px 12px; border-radius: 999px; border: 1px solid var(--glass-edge);
  background: var(--glass); font-size: 13px; font-weight: 800; color: var(--text); cursor: pointer; }
.wn-badge::-webkit-details-marker { display: none; }
.wn-badge:hover, .wn-menu[open] .wn-badge { border-color: var(--accent); color: var(--accent); }
.wn-badge:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.wn-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--bad); display: inline-block; }
.wn-panel { position: absolute; right: 0; top: calc(100% + 8px); width: min(400px, calc(100vw - 32px)); max-height: 70vh; overflow: auto; z-index: 70;
  background: var(--panel); border: 1px solid var(--glass-edge); border-radius: 16px; box-shadow: 0 18px 40px rgba(0, 0, 0, .18); padding: 14px 16px; display: grid; gap: 10px; }
.wn-title { font-family: var(--display, inherit); font-size: 16px; }
.wn-rel { display: grid; gap: 4px; border-top: 1px solid var(--glass-edge); padding-top: 8px; }
.wn-head { display: flex; justify-content: space-between; gap: 8px; font-size: 14px; }
.wn-head span { color: var(--muted); font-size: 12.5px; }
.wn-new { font-size: 10.5px; color: var(--bad); font-weight: 800; }
.wn-rel ul, .wn-release ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 4px; font-size: 13.5px; }
.wn-k { display: inline-block; font-size: 10.5px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; padding: 0 7px; border-radius: 999px;
  border: 1px solid currentColor; margin-right: 6px; vertical-align: 1px; }
.wn-k.wn-new { color: var(--accent); } .wn-k.wn-improved { color: var(--info); } .wn-k.wn-fixed { color: var(--warn); }
.wn-filters { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.wn-filters .input { width: 220px; max-width: 100%; }
.wn-release { display: grid; grid-template-columns: 140px minmax(0, 1fr); gap: 14px; padding: 12px 0; border-top: 1px solid var(--glass-edge); }
.wn-release:first-child { border-top: 0; }
.wn-when { display: grid; gap: 2px; align-content: start; justify-items: start; }
.wn-when b { font-size: 18px; }
.wn-when span { color: var(--muted); font-size: 13px; }
@media (max-width: 640px) { .wn-release { grid-template-columns: 1fr; gap: 6px; } }

/* Office board: a mark by the MD, Chief of Staff or HR is display only, so it's drawn dashed rather than solid */
.board-grid .list { grid-template-columns: minmax(0, 1fr); }  /* rows never grow wider than their card */
.board-grid .row { grid-template-columns: auto minmax(0, 1fr) auto; }
.board-cell { position: relative; }
.mark-btn { position: absolute; top: -7px; right: -7px; margin: 0; }
.mark-btn button { width: 20px; height: 20px; padding: 0; border-radius: 50%; border: 1px solid var(--edge-strong); background: var(--panel);
  color: var(--accent); font-size: 11px; line-height: 1; cursor: pointer; opacity: .55; box-shadow: var(--shadow); }
.board-cell:hover .mark-btn button, .mark-btn button:focus-visible { opacity: 1; }

/* Colleagues box: your manager (and their stand-in), your team, reporting to you */
.col-group { display: grid; gap: 6px; }
.col-group + .col-group { margin-top: 10px; }

/* Home: who's off this month (Mon–Sat, a row per week) */
.month-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; }
.month-dow { font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); text-align: center; }
.month-grid .week-day { min-height: 58px; }
.month-grid .week-day.is-out { background: transparent; border-style: dashed; opacity: .35; }
.month-grid .week-day.is-past { opacity: .6; }
.month-nav { display: flex; align-items: center; gap: 6px; }

/* Payroll → Salaries: one wide table */
.pay-table th, .pay-table td { white-space: nowrap; }
.pay-table tfoot th { border-top: 2px solid var(--edge-strong); }

/* Home: quick links */
.quick-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; margin-bottom: 14px; }
.quick-tile { position: relative; display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 14px; text-decoration: none;
  color: var(--text); font-weight: 700; font-size: 13.5px; background: var(--glass); border: 1px solid var(--glass-edge); box-shadow: var(--shadow); }
.quick-tile:hover { border-color: var(--accent); }
.quick-ico { width: 30px; height: 30px; border-radius: 10px; display: grid; place-items: center; background: var(--accent-soft); flex: none; }
.quick-new { position: absolute; top: -8px; right: -6px; font-size: 10.5px; padding: 1px 7px; }

/* Salary queries where they're fixed */
.query-item { display: grid; gap: 6px; padding: 10px 12px; border-radius: 12px; background: var(--inner); border: 1px solid var(--inner-edge); }
.query-item.is-open { border-left: 3px solid var(--info); }
.query-head { display: flex; justify-content: space-between; gap: 10px; align-items: start; }
.query-text { margin: 0; font-style: italic; }
.query-links { display: flex; gap: 6px; flex-wrap: wrap; }
.query-links a { display: inline-flex; align-items: center; gap: 5px; padding: 4px 11px; border-radius: 999px; font-size: 12.5px; font-weight: 700;
  text-decoration: none; color: var(--accent); background: var(--accent-soft); border: 1px solid var(--edge-strong); }
.query-links a:hover, .query-links a:focus-visible { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
.query-answer { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 6px; align-items: center; }
@media (max-width: 640px) { .query-answer { grid-template-columns: 1fr; } }
.cal .day.queried { outline: 2px solid var(--info); outline-offset: -2px; }

.query-links.inline { display: inline-flex; margin-left: 6px; vertical-align: middle; }
.query-links.inline a { padding: 3px 10px; }
.query-links { align-items: center; }
.query-go { font-size: 12px; font-weight: 700; color: var(--muted); margin-right: 2px; }
.query-links a.main { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
.query-links a.main:hover, .query-links a.main:focus-visible { filter: brightness(1.08); }

/* Tasks */
.task-quick-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; }
.task-quick-row .field { min-width: 140px; }
.task-quick-row .field.grow, .task-filters .field.grow { flex: 1 1 240px; }
.task-filters { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; }
.task-filters .field { min-width: 150px; }
.task-row { grid-template-columns: 6px minmax(0, 1fr) auto; }
.task-row .task-link { color: var(--text); text-decoration: none; }
.task-row .task-link:hover, .task-row .task-link:focus-visible { color: var(--accent); text-decoration: underline; }
.task-pr { align-self: stretch; width: 4px; border-radius: 4px; background: var(--edge-strong); }
.task-pr.pr-high { background: var(--bad); }
.task-pr.pr-low { background: var(--info); opacity: .55; }
.task-meta { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; align-items: center; }
.task-due { font-size: 12.5px; font-weight: 700; color: var(--muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.task-due.late, .late-text { color: var(--bad); }
.task-row.is-late { border-color: color-mix(in srgb, var(--bad) 35%, transparent); }
.task-sec.is-late .card-h h3 { color: var(--bad); }
.task-answer { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; padding: 0 0 4px 18px; }
.task-answer .input { flex: 1 1 200px; max-width: 360px; }
.task-grid { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 16px; align-items: start; }
.task-main, .task-side { display: grid; gap: 16px; min-width: 0; }
.task-head-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.task-details { white-space: pre-line; }
.task-status, .task-admin { display: flex; gap: 8px; flex-wrap: wrap; align-items: flex-start; }
.task-admin { padding-top: 10px; border-top: 1px solid var(--edge); }
.task-more { position: relative; }
.task-more > summary { list-style: none; cursor: pointer; }
.task-more > summary::-webkit-details-marker { display: none; }
.task-more-body { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin-top: 8px; }
.task-more-body .input { min-width: 200px; flex: 1 1 200px; }
.task-steps { display: grid; gap: 6px; }
.task-step { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 7px 10px; border-radius: 12px; background: var(--inner); border: 1px solid var(--inner-edge); }
.task-step.done .step-text { color: var(--muted); }
.step-by { display: block; font-size: 11.5px; font-weight: 700; color: var(--good); margin-top: 1px; }
.task-box { width: 22px; height: 22px; border-radius: 7px; border: 2px solid var(--edge-strong); background: var(--panel); color: var(--on-accent); font-weight: 800; font-size: 13px; display: grid; place-items: center; cursor: pointer; padding: 0; }
.task-step.done .task-box { background: var(--good); border-color: var(--good); color: #fff; }
.step-progress { height: 6px; border-radius: 6px; background: color-mix(in srgb, var(--good) 14%, transparent); overflow: hidden; }
.step-progress span { display: block; height: 100%; background: var(--good); border-radius: 6px; transition: width .2s; }
.steps-done > summary { cursor: pointer; font-size: 13px; font-weight: 700; color: var(--good); padding: 4px 0; }
.steps-done .task-steps { margin-top: 6px; }
@media (prefers-reduced-motion: reduce) { .step-progress span { transition: none; } }
.task-box:disabled { cursor: default; }
.task-x { border: 0; background: transparent; color: var(--muted); font-size: 18px; line-height: 1; cursor: pointer; padding: 2px 6px; border-radius: 6px; }
.task-x:hover, .task-x:focus-visible { color: var(--bad); background: color-mix(in srgb, var(--bad) 10%, transparent); }
.task-inline { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.task-inline .input { flex: 1 1 160px; }
.task-comment { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--edge); }
.task-comment.removed { opacity: .7; }
.avatar.sm { width: 30px; height: 30px; font-size: 11.5px; }
.task-comment-text { margin: 4px 0 0; overflow-wrap: anywhere; }
.mention { color: var(--accent); }
.link-like { color: var(--accent); font-weight: 700; }
.task-new-comment { display: grid; gap: 8px; }
.task-mention-list { display: flex; gap: 6px; flex-wrap: wrap; }
.task-mention-list .chip-btn { cursor: pointer; }
.input.file-sm { padding: 6px 8px; font-size: 12.5px; max-width: 260px; }
.task-file { display: block; font-size: 13px; font-weight: 700; color: var(--accent); text-decoration: none; padding: 3px 0; overflow-wrap: anywhere; }
.task-file:hover { text-decoration: underline; }
.task-watcher { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 13.5px; }
.task-history { display: grid; gap: 8px; font-size: 13px; max-height: 360px; overflow-y: auto; }
.task-share { border: 1px solid var(--warn); }
.check-line { display: flex; gap: 8px; align-items: center; font-size: 13.5px; }
.alert.warn { border-color: color-mix(in srgb, var(--warn) 45%, transparent); background: color-mix(in srgb, var(--warn) 10%, transparent); }
.alert.good { border-color: color-mix(in srgb, var(--good) 45%, transparent); background: color-mix(in srgb, var(--good) 10%, transparent); color: var(--good); }
.btn.is-on { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }
.task-board { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; align-items: start; }
.task-review { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.task-review .input { flex: 1 1 220px; max-width: 380px; }
.alert.info-alert { border-color: color-mix(in srgb, var(--accent) 45%, transparent); }
.task-col { display: grid; gap: 8px; padding: 10px; border-radius: 16px; background: var(--inner); border: 1px solid var(--inner-edge); min-width: 0; }
.task-col h4 { font-size: 12.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.task-card { display: grid; gap: 4px; padding: 10px 12px; border-radius: 12px; background: var(--panel); border: 1px solid var(--edge); text-decoration: none; color: var(--text); }
.task-card:hover, .task-card:focus-visible { border-color: var(--accent); }
.task-card.is-late { border-color: color-mix(in srgb, var(--bad) 45%, transparent); }
tr.is-late td:first-child a { color: var(--bad); }
@media (max-width: 980px) { .task-grid { grid-template-columns: 1fr; } .task-board { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .task-board { grid-template-columns: 1fr; } .task-row { grid-template-columns: 4px minmax(0, 1fr); } .task-meta { grid-column: 2; justify-content: flex-start; } }
.task-home { margin-bottom: 14px; gap: 10px; }
.task-home-chips { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.task-home-list { display: grid; gap: 6px; }
.task-home-row { display: grid; grid-template-columns: 4px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 8px 12px; border-radius: 12px;
  background: var(--inner); border: 1px solid var(--inner-edge); text-decoration: none; color: var(--text); }
.task-home-row:hover, .task-home-row:focus-visible { border-color: var(--accent); }
.task-home-row.late { border-color: color-mix(in srgb, var(--bad) 35%, transparent); }
.task-home-t { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.task-side .kv { grid-template-columns: 84px minmax(0, 1fr); gap: 6px 10px; font-size: 13.5px; }
.task-rich { font-size: 14.5px; line-height: 1.6; overflow-wrap: anywhere; }
.task-rich p { margin: 0 0 8px; }
.task-rich ul { margin: 0 0 8px; padding-left: 22px; }
.task-rich a { color: var(--accent); font-weight: 700; }
.task-desc-form { display: grid; gap: 8px; margin-top: 8px; }
.task-desc-input { min-height: 120px; resize: vertical; line-height: 1.55; }
/* Home: foldable boxes */
.fold-btn { margin-left: 4px; width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--edge-strong); background: var(--panel); color: var(--muted);
  display: inline-grid; place-items: center; cursor: pointer; font-size: 17px; line-height: 1; padding: 0; flex: none; }
.fold-btn::before { content: "▾"; transition: transform .15s; }
.fold-btn:hover, .fold-btn:focus-visible { color: var(--accent); border-color: var(--accent); outline: none; }
.card.is-folded > :not(.card-h) { display: none !important; }
.card.is-folded .fold-btn::before { transform: rotate(-90deg); }
.card.is-folded { padding-block: 12px; }
@media (prefers-reduced-motion: reduce) { .fold-btn::before { transition: none; } }
.card[data-fold] > .card-h { justify-content: flex-start; }
.card[data-fold] > .card-h > :first-child { margin-right: auto; }
/* Description editor (Quill) and formatted descriptions */
.rich-editor { border: 1px solid var(--edge-strong); border-radius: 12px; background: var(--panel-2); overflow: hidden; }
.rich-editor .ql-toolbar.ql-snow { border: 0; border-bottom: 1px solid var(--edge); background: var(--panel); padding: 6px 8px; font-family: var(--body); }
.rich-editor .ql-container.ql-snow { border: 0; font-family: var(--body); font-size: 14.5px; }
.rich-editor .ql-editor { min-height: 160px; max-height: 60vh; line-height: 1.6; color: var(--text); }
.rich-editor.is-phone .ql-editor { min-height: 120px; font-size: 16px; }
.rich-editor .ql-editor.ql-blank::before { color: var(--faint); font-style: normal; }
.rich-editor .ql-snow .ql-stroke { stroke: var(--muted); }
.rich-editor .ql-snow .ql-fill { fill: var(--muted); }
.rich-editor .ql-snow .ql-picker { color: var(--muted); }
.rich-editor .ql-snow.ql-toolbar button:hover .ql-stroke, .rich-editor .ql-snow.ql-toolbar button.ql-active .ql-stroke { stroke: var(--accent); }
.rich-editor .ql-snow.ql-toolbar button:hover .ql-fill, .rich-editor .ql-snow.ql-toolbar button.ql-active .ql-fill { fill: var(--accent); }
.rich-editor .ql-snow.ql-toolbar button.ql-active, .rich-editor .ql-snow.ql-toolbar button:hover { color: var(--accent); }
.rich-editor .ql-toolbar button:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; border-radius: 4px; }
.rich-editor .rich-txt-btn { font-size: 15px; line-height: 1; width: 28px; color: var(--muted); }
.rich-editor .ql-picker-options { background: var(--panel); border-color: var(--edge-strong) !important; }
.rich-view .ql-editor, .rich-editor .ql-editor { overflow-wrap: anywhere; }
.rich-view .ql-editor { padding: 0; height: auto; overflow: visible; font-size: 14.5px; line-height: 1.6; color: var(--text); }
.ql-snow .ql-editor mark, .rich-view mark { background: color-mix(in srgb, #facc15 45%, transparent); color: inherit; border-radius: 3px; padding: 0 2px; }
.ql-snow .ql-editor a { color: var(--accent); font-weight: 700; }
.ql-snow .ql-editor hr { border: 0; border-top: 1px solid var(--edge-strong); margin: 10px 0; }
.ql-snow .ql-editor blockquote { border-left: 3px solid var(--accent); padding-left: 12px; color: var(--muted); margin: 6px 0; }
.ql-snow .ql-editor h2 { font-size: 19px; font-family: var(--display); margin: 8px 0 4px; }
.ql-snow .ql-editor h3 { font-size: 16px; font-family: var(--display); margin: 6px 0 4px; }

/* Task views and tags */
.g4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 760px) { .g4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.tagchip { display: inline-flex; align-items: center; gap: 3px; padding: 1px 9px; border-radius: 999px; font-size: 11.5px; font-weight: 700; white-space: nowrap;
  color: var(--tc, var(--accent)); background: color-mix(in srgb, var(--tc, var(--accent)) 13%, transparent); border: 1px solid color-mix(in srgb, var(--tc, var(--accent)) 40%, transparent); text-decoration: none; }
a.tagchip:hover { background: color-mix(in srgb, var(--tc, var(--accent)) 22%, transparent); }
.tag-list { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 3px; }
.task-tags { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.link-btn { background: none; border: 0; padding: 0; color: var(--accent); font-weight: 700; cursor: pointer; list-style: none; }
.view-tabs { display: flex; gap: 2px; flex-wrap: wrap; padding: 3px; border-radius: 12px; background: var(--inner); border: 1px solid var(--inner-edge); width: max-content; max-width: 100%; }
.view-tabs a { padding: 6px 13px; border-radius: 9px; font-weight: 700; font-size: 13px; color: var(--muted); text-decoration: none; }
.view-tabs a[aria-current="page"] { background: var(--panel); color: var(--accent); box-shadow: 0 1px 3px rgba(0,0,0,.08); }
.view-tabs a.saved-tab { color: var(--vio, #6d28d9); }
.view-tabs a:hover { color: var(--accent); }
.save-view > summary { list-style: none; }
.who-chip { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.av-sm { width: 22px; height: 22px; border-radius: 6px; display: inline-grid; place-items: center; font-size: 10px; font-weight: 800; background: var(--grad); color: var(--on-accent); }
.inline-status { margin: 0; }
.st-select { border: 1px solid var(--edge-strong); border-radius: 8px; padding: 3px 6px; font: inherit; font-size: 12.5px; font-weight: 700; background: var(--panel); color: var(--text); }
.st-select.st-in_progress { color: var(--info); } .st-select.st-open { color: var(--muted); }
.cal-wrap { overflow-x: auto; }
.cal { display: grid; grid-template-columns: repeat(7, minmax(110px, 1fr)); border: 1px solid var(--edge); border-radius: 12px; overflow: hidden; min-width: 770px; }
.cal-dh { padding: 6px 8px; font-size: 12px; font-weight: 700; color: var(--muted); background: var(--panel-2); border-bottom: 1px solid var(--edge); }
.cal-day { min-height: 104px; border-right: 1px solid var(--edge); border-bottom: 1px solid var(--edge); padding: 4px 5px; display: grid; gap: 3px; align-content: start; }
.cal-day:nth-child(7n) { border-right: 0; }
.cal-day.other { background: var(--panel-2); color: var(--faint); }
.cal-day.sun { background: color-mix(in srgb, var(--panel-2) 70%, transparent); }
.cal-day.drop { background: var(--accent-soft); outline: 2px dashed var(--accent); outline-offset: -3px; }
.cal-dn { font-size: 12px; font-weight: 700; justify-self: start; padding: 0 5px; }
.cal-day.today .cal-dn { background: var(--accent); color: var(--on-accent); border-radius: 6px; }
.cal-ev { font-size: 11.5px; padding: 2px 6px; border-radius: 6px; background: var(--accent-soft); border-left: 3px solid var(--accent); color: var(--text); text-decoration: none;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
.cal-ev[draggable="true"] { cursor: grab; }
.cal-ev.late { border-left-color: var(--bad); background: color-mix(in srgb, var(--bad) 10%, transparent); }
.cal-ev.done { opacity: .55; border-left-color: var(--good); }
.cal-ev.hold { border-left-color: var(--slate); background: color-mix(in srgb, var(--slate) 10%, transparent); }
.tl-wrap { overflow-x: auto; border: 1px solid var(--edge); border-radius: 12px; }
.tl-wrap > .tl { display: grid; min-width: 1000px; }  /* the timeline only: .tl is also the tiles' label */
.tl-row { display: grid; grid-template-columns: 240px minmax(0, 1fr); border-bottom: 1px solid var(--edge); }
.tl-row:last-child { border-bottom: 0; }
.tl-name { padding: 6px 10px; font-size: 13px; border-right: 1px solid var(--edge); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tl-name a { color: var(--text); text-decoration: none; }
.tl-name a:hover { color: var(--accent); }
.tl-group { font-family: var(--display); font-weight: 700; background: var(--panel-2); }
.tl-track { position: relative; min-height: 32px; background-image: repeating-linear-gradient(to right, transparent 0, transparent calc(100% / 35 - 1px), var(--edge) calc(100% / 35 - 1px), var(--edge) calc(100% / 35)); }
.tl-days { display: grid; grid-template-columns: repeat(35, minmax(0, 1fr)); background: none; font-size: 10.5px; color: var(--muted); }
.tl-days span { display: grid; place-items: center; border-left: 1px solid var(--edge); }
.tl-days span.wk { color: var(--text); font-weight: 700; white-space: nowrap; overflow: visible; }
.tl-days span.sun { background: var(--panel-2); }
.tl-bar { position: absolute; top: 6px; height: 20px; border-radius: 6px; font-size: 11px; color: #fff; padding: 2px 6px; white-space: nowrap; overflow: hidden; font-weight: 700; text-decoration: none; background: var(--accent); }
.tl-bar.s-in_progress { background: #0369a1; } .tl-bar.s-waiting { background: #b45309; } .tl-bar.s-on_hold { background: #64748b; }
.tl-bar.s-review { background: #6d28d9; } .tl-bar.s-done { background: #15803d; } .tl-bar.s-cancelled { background: #9ca3af; } .tl-bar.late { background: #b91c1c; }
.tl-today { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--bad); }
.file-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; }
.file-card { display: grid; gap: 4px; padding: 10px; border: 1px solid var(--edge); border-radius: 12px; text-decoration: none; color: var(--text); background: var(--panel); overflow-wrap: anywhere; }
.file-card:hover { border-color: var(--accent); }
.file-ico { height: 70px; border-radius: 8px; display: grid; place-items: center; font-family: var(--mono); font-weight: 800; font-size: 16px; background: var(--panel-2); color: var(--muted); }
.file-ico.ext-pdf { background: color-mix(in srgb, #b91c1c 12%, transparent); color: #b91c1c; }
.file-ico.ext-xlsx, .file-ico.ext-xls, .file-ico.ext-csv { background: color-mix(in srgb, #15803d 12%, transparent); color: #15803d; }
.file-ico.ext-doc, .file-ico.ext-docx { background: color-mix(in srgb, #2563eb 12%, transparent); color: #2563eb; }
.file-ico.ext-jpg, .file-ico.ext-jpeg, .file-ico.ext-png, .file-ico.ext-webp, .file-ico.ext-heic { background: color-mix(in srgb, #c2700f 12%, transparent); color: #c2700f; }
.kpi-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
@media (max-width: 640px) { .kpi-row { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.kpi { border: 1px solid var(--edge); border-radius: 14px; padding: 12px 14px; background: var(--panel); }
.kpi b { display: block; font-family: var(--display); font-size: 26px; font-variant-numeric: tabular-nums; }
.kpi span { font-size: 12px; font-weight: 700; color: var(--muted); }
.hbars { display: grid; gap: 10px; }
.hb { display: grid; grid-template-columns: 170px minmax(0, 1fr) 40px; gap: 10px; align-items: center; font-size: 13.5px; }
.hb-track { display: flex; height: 20px; border-radius: 6px; overflow: hidden; min-width: 6px; }
.hb-n { font-variant-numeric: tabular-nums; text-align: right; font-weight: 700; }
.seg-open { background: #d4a019; } .seg-in_progress { background: #0284c7; } .seg-waiting { background: #ea7c2a; } .seg-on_hold { background: #94a3b8; }
.seg-review { background: #7c3aed; } .seg-done { background: #16a34a; } .seg-cancelled { background: #e57373; }
.legend { display: flex; gap: 12px; flex-wrap: wrap; font-size: 12px; color: var(--muted); }
.legend i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 4px; vertical-align: -1px; }
.tag-row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--edge); }
.tag-swatches { display: flex; gap: 4px; }
.swatch { width: 18px; height: 18px; border-radius: 50%; border: 2px solid transparent; padding: 0; cursor: pointer; }
.swatch.on { border-color: var(--text); }
.tl-days span.wk { border-left-color: var(--edge-strong); }
/* Board drag and drop */
.task-card .card-top { display: flex; gap: 6px; align-items: flex-start; }
.task-card .grip { color: var(--faint); font-size: 14px; line-height: 1.2; cursor: grab; flex: none; }
.task-card .lock { font-size: 11px; line-height: 1.6; flex: none; opacity: .75; }
.task-card.movable { cursor: grab; }
.task-card.movable:hover { box-shadow: 0 4px 14px rgba(15, 118, 110, .14); transform: translateY(-1px); }
.task-card.locked { border-style: dashed; }
.task-card .lock-why { display: block; }
.task-card.dragging { opacity: .45; }
.task-col.can-drop { outline: 2px dashed color-mix(in srgb, var(--accent) 55%, transparent); outline-offset: -2px; }
.task-col.drop-here { background: var(--accent-soft); outline-style: solid; }
.task-col.no-drop { opacity: .45; }
.move-ask { border: 1px solid var(--edge-strong); border-radius: 16px; padding: 0; background: var(--panel); color: var(--text); box-shadow: var(--shadow); width: min(420px, 92vw); }
.move-ask::backdrop { background: rgba(0, 0, 0, .25); }
.move-ask-body { display: grid; gap: 10px; padding: 18px; }
.board-toast { position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%); background: var(--text); color: var(--bg); padding: 8px 16px; border-radius: 999px; font-size: 13px; font-weight: 700; box-shadow: var(--shadow); z-index: 50; }
.board-toast.bad { background: var(--bad); color: #fff; }
@media (prefers-reduced-motion: reduce) { .task-card.movable:hover { transform: none; } }
/* Task views: the add bar */
.add-bar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 12px 14px; border: 1.5px solid color-mix(in srgb, var(--accent) 45%, transparent); }
.add-bar .input { width: auto; padding: 8px 10px; }
.add-bar-title { flex: 1 1 320px; display: flex; align-items: center; gap: 8px; }
.add-bar-title .input { flex: 1; font-size: 15px; }
.add-plus { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; background: var(--grad); color: var(--on-accent); font-weight: 800; flex: none; }
.add-bar .add-tags { max-width: 170px; }
@media (max-width: 760px) { .add-bar select, .add-bar input[type=date], .add-bar .add-tags { flex: 1 1 140px; max-width: none; } }
.task-tags .tag-btn { list-style: none; }
.task-tags .tag-btn::-webkit-details-marker { display: none; }
.task-tags details[open] > .tag-btn { border-color: var(--accent); color: var(--accent); }

/* Folders */
.views-layout { display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: 16px; align-items: start; }
.views-main { display: grid; gap: 16px; min-width: 0; }
@media (max-width: 980px) { .views-layout { grid-template-columns: 1fr; } }
.folder-tree { padding: 10px; gap: 2px; position: sticky; top: 12px; max-height: calc(100vh - 40px); overflow-y: auto; }
.ft-head { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); padding: 10px 10px 4px; }
.ft-item { display: block; padding: 6px 10px; border-radius: 9px; font-size: 13.5px; font-weight: 700; color: var(--text); text-decoration: none;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ft-item:hover { background: var(--accent-soft); }
.ft-item.on { background: var(--accent-soft); color: var(--accent); }
.ft-new { display: block; margin-top: 8px; padding: 7px 10px; border-radius: 9px; border: 1px dashed var(--edge-strong); font-size: 13px; font-weight: 700; color: var(--accent); text-decoration: none; text-align: center; }
.folder-path { margin-bottom: 2px; }
.task-folders { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.folder-chip { display: inline-flex; align-items: center; gap: 2px; padding: 2px 4px 2px 10px; border-radius: 8px; background: var(--panel); border: 1px solid var(--edge-strong); font-size: 13px; font-weight: 700; }
.folder-chip a { color: var(--text); text-decoration: none; }
.folder-chip a:hover { color: var(--accent); }
.folder-chip form { margin: 0; }
.folder-x { border: 0; background: none; color: var(--muted); cursor: pointer; font-size: 15px; padding: 0 5px; border-radius: 6px; }
.folder-x:hover { color: var(--bad); }
.folder-pick { position: relative; }
.folder-pick > summary { list-style: none; }
.folder-pick > summary::-webkit-details-marker { display: none; }
.folder-pick-body { position: absolute; z-index: 30; top: calc(100% + 6px); left: 0; width: min(360px, 90vw); background: var(--panel); border: 1px solid var(--edge-strong);
  border-radius: 14px; box-shadow: var(--shadow); padding: 10px; display: grid; gap: 8px; }
.folder-pick-list { display: grid; gap: 2px; max-height: 320px; overflow-y: auto; }
.folder-pick-list form { margin: 0; }
.folder-opt { width: 100%; text-align: left; display: grid; gap: 1px; padding: 7px 9px; border: 0; border-radius: 9px; background: none; color: var(--text); cursor: pointer; font: inherit; font-size: 13.5px; }
.folder-opt:hover, .folder-opt:focus-visible { background: var(--accent-soft); outline: none; }
.my-folders { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 12px 16px; }
.my-folders-h { font-weight: 800; margin-right: 4px; }
.my-folder { padding: 6px 12px; border-radius: 10px; border: 1px solid var(--edge-strong); background: var(--panel); font-size: 13.5px; font-weight: 700; color: var(--text); text-decoration: none; }
.my-folder:hover { border-color: var(--accent); color: var(--accent); }
.my-folder.new { border-style: dashed; color: var(--accent); }
.my-folders-all { margin-left: auto; }

/* Quick changes from a task row: tick, status menu, clickable due date; My tasks table */
/* no tick circle in front of a task (My tasks and workstreams): the status pill on the same line does Done */
.task-row .q-tick, .task-row .q-tick-none { display: none; }
.task-row.qrow { grid-template-columns: 6px minmax(0, 1fr) auto; }
@media (max-width: 560px) { .task-row.qrow { grid-template-columns: 4px minmax(0, 1fr); } .task-row.qrow .task-meta { grid-column: 2; } }
.q-tick, .q-tick-none { width: 24px; height: 24px; border-radius: 50%; align-self: center; }
.q-tick { border: 2px solid var(--edge-strong); background: var(--panel); color: transparent; display: grid; place-items: center; font-size: 13px; font-weight: 800;
  cursor: pointer; padding: 0; transition: border-color .15s, background .15s, color .15s; }
.q-tick:hover, .q-tick:focus-visible { border-color: var(--good); color: var(--good); outline: none; }
.q-tick.on { background: var(--good); border-color: var(--good); color: var(--on-accent); }
.q-st { cursor: pointer; font-family: inherit; }
.q-st::after { content: "\25BE"; font-size: 9px; opacity: .75; }
.q-st:focus-visible, .q-due:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.q-due { border: 1px dashed transparent; background: none; font-family: inherit; cursor: pointer; padding: 2px 6px; border-radius: 8px; }
.q-due:hover { border-color: var(--edge-strong); color: var(--accent); }
.q-due.none { color: var(--accent); opacity: .7; }
.q-due-input { width: auto; padding: 3px 6px; font-size: 13px; }
.qrow.q-gone { opacity: .4; transition: opacity .3s; }
.q-menu { position: absolute; z-index: 60; background: var(--panel); border: 1px solid var(--edge-strong); border-radius: 14px; box-shadow: var(--shadow);
  padding: 6px; display: grid; gap: 2px; }
.q-menu > button { text-align: left; border: 0; background: none; color: var(--text); font: inherit; font-size: 14px; font-weight: 700; padding: 8px 10px; border-radius: 9px; cursor: pointer; }
.q-menu > button:hover, .q-menu > button:focus-visible { background: var(--accent-soft); outline: none; }
.q-menu form { display: grid; gap: 8px; padding: 6px; font-size: 13.5px; }
.q-toast { position: fixed; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); z-index: 80; display: flex; gap: 14px; align-items: center;
  background: var(--text); color: var(--panel); padding: 10px 16px; border-radius: 12px; font-weight: 700; font-size: 14px; box-shadow: var(--shadow); max-width: calc(100vw - 32px); }
.q-toast button { background: none; border: 0; color: inherit; font: inherit; text-decoration: underline; cursor: pointer; padding: 0; }
.q-table td { vertical-align: middle; }
.q-table select, .q-table .q-date { font: inherit; font-size: 13px; font-weight: 600; padding: 3px 6px; border-radius: 8px; border: 1px solid transparent; background: transparent; color: var(--text); }
.q-table select:hover, .q-table .q-date:hover, .q-table select:focus, .q-table .q-date:focus { border-color: var(--edge-strong); background: var(--panel); outline: none; }
.q-table select.q-stsel { border: 1px solid currentColor; border-radius: 999px; font-weight: 700; }
.q-table .q-date.late { color: var(--bad); font-weight: 700; }
.q-table .task-link { color: var(--text); font-weight: 700; text-decoration: none; }
.q-table .task-link:hover { color: var(--accent); text-decoration: underline; }
/* phone list rows */
.m-task.qrow .m-task-link { display: grid; gap: 1px; min-width: 0; color: inherit; text-decoration: none; }
.m-task-side { display: grid; gap: 4px; justify-items: end; }
.m-task-side .q-due { font-size: 11.5px; font-weight: 800; padding: 3px 9px; }
.m-task-side .chip { font-size: 11px; padding: 2px 8px; }

/* Rename, tags and the ▸ details panel on task rows */
.q-tw { display: flex; align-items: center; gap: 4px; min-width: 0; }
.q-caret { width: 22px; height: 22px; flex: none; border: 0; border-radius: 7px; background: none; color: var(--muted); cursor: pointer; display: grid; place-items: center; padding: 0; }
.q-caret svg { width: 11px; height: 11px; fill: currentColor; transition: transform .18s; }
.q-caret:hover, .q-caret:focus-visible { background: var(--accent-soft); color: var(--accent); outline: none; }
.q-open .q-caret { color: var(--accent); }
.q-open .q-caret svg { transform: rotate(90deg); }
.q-title { font-weight: 700; color: var(--text); cursor: text; border: 1px solid transparent; border-radius: 7px; padding: 1px 5px; min-width: 0; overflow-wrap: anywhere; }
.q-title:hover, .q-title:focus-visible { border-color: var(--edge-strong); background: var(--panel); outline: none; }
.q-title-in { font-weight: 700; padding: 2px 6px; min-width: 200px; flex: 1; }
.q-link { font-weight: 700; color: var(--text); text-decoration: none; }
.q-link:hover { color: var(--accent); text-decoration: underline; }
.q-open-link { margin-left: auto; padding-left: 8px; font-size: 12px; font-weight: 700; color: var(--accent); text-decoration: none; white-space: nowrap; }
.q-tags { display: flex; gap: 4px; flex-wrap: wrap; align-items: center; }
.q-tags-cell { min-height: 26px; min-width: 110px; border: 1px solid transparent; border-radius: 8px; padding: 2px 4px; cursor: pointer; }
.q-tags-cell:hover, .q-tags-cell:focus-visible { border-color: var(--edge-strong); background: var(--panel); outline: none; }
.q-tags-add { font-size: 12px; color: var(--muted); opacity: 0; }
.q-tags-cell:hover .q-tags-add, .q-tags-cell:focus-visible .q-tags-add, .q-tags-cell:not(:has(.tagchip)) .q-tags-add { opacity: 1; }
.q-tagbtn { border: 1px dashed var(--edge-strong); background: none; color: var(--muted); border-radius: 999px; font: inherit; font-size: 11.5px; font-weight: 700; padding: 1px 8px; cursor: pointer; }
.q-tagbtn:hover, .q-tagbtn:focus-visible { color: var(--accent); border-color: var(--accent); outline: none; }
.q-tag-ed { position: relative; display: flex; gap: 4px; flex-wrap: wrap; align-items: center; min-width: 210px; padding: 3px 5px; border: 1px solid var(--accent);
  border-radius: 9px; background: var(--panel); box-shadow: 0 0 0 3px var(--accent-soft); }
.q-tag-ed input { border: 0; outline: none; background: none; font: inherit; font-size: 13px; color: var(--text); flex: 1; min-width: 90px; padding: 2px; }
.q-tag-ed .tagchip button { border: 0; background: none; color: inherit; cursor: pointer; padding: 0 0 0 2px; font-size: 13px; line-height: 1; }
.q-sugg { position: absolute; left: -1px; top: calc(100% + 5px); z-index: 40; min-width: 220px; display: grid; gap: 1px; padding: 5px; background: var(--panel);
  border: 1px solid var(--edge-strong); border-radius: 12px; box-shadow: var(--shadow); }
.q-sugg button { text-align: left; border: 0; background: none; color: var(--text); font: inherit; font-size: 13px; font-weight: 600; padding: 6px 9px; border-radius: 8px; cursor: pointer; }
.q-sugg button:hover, .q-sugg button.hi { background: var(--accent-soft); }
tr.qrow.q-open > td, .task-row.q-open { background: color-mix(in srgb, var(--accent-soft) 55%, transparent); }
tr.qrow.q-open > td { border-bottom-color: transparent; }
tr.q-detail > td { padding: 0 10px 14px; background: color-mix(in srgb, var(--accent-soft) 55%, transparent); }
div.q-detail { margin: -2px 0 6px; }
.q-panel { position: relative; margin-top: 8px; display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, .75fr); gap: 18px; padding: 16px;
  background: var(--panel); border: 1px solid var(--accent); border-radius: 14px; text-align: left; white-space: normal; }
.q-panel::before { content: ""; position: absolute; top: -8px; left: 14px; width: 14px; height: 14px; background: var(--panel); border-left: 1px solid var(--accent);
  border-top: 1px solid var(--accent); transform: rotate(45deg); }
div.q-detail .q-panel::before { left: 46px; }
.q-panel.loading { display: block; color: var(--muted); font-size: 13px; }
.q-panel section { display: grid; gap: 8px; align-content: start; min-width: 0; }
.q-panel h4 { margin: 4px 0 0; font-size: 11.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.q-desc { min-height: 64px; padding: 8px 11px; border: 1px solid var(--edge); border-radius: 10px; font-size: 14px; outline: none; overflow-wrap: anywhere; }
.q-desc[contenteditable]:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.q-desc[contenteditable]:empty::before { content: attr(data-placeholder); color: var(--muted); }
.q-desc p { margin: 0 0 4px; } .q-desc.ro { border-style: dashed; }
.q-p-note { font-size: 11.5px; color: var(--muted); }
.q-steps { display: grid; gap: 3px; }
/* a step's text: click to change it; × removes it (task page and ▸ details) */
[data-edit-step] { cursor: text; border-radius: 6px; }
[data-edit-step]:hover { background: var(--accent-soft); }
.q-step-edit, .step-edit { display: block; padding: 3px 8px; font: inherit; font-size: 14px; line-height: 1.4; width: 100%; min-width: 180px; resize: none; overflow: hidden; }
[data-edit-step]:has(> .q-step-edit), [data-edit-step]:has(> .step-edit) { display: block; justify-self: stretch; width: 100%; }
.q-step-x { border: 0; background: none; color: var(--faint); font-size: 16px; line-height: 1; cursor: pointer; padding: 0 5px; border-radius: 6px; opacity: 0; }
.q-step:hover .q-step-x, .q-step-x:focus-visible { opacity: 1; }
.q-step-x:hover { color: var(--bad); background: color-mix(in srgb, var(--bad) 10%, transparent); }
@media (hover: none) { .q-step-x { opacity: 1; } }
.q-step { display: flex; gap: 8px; align-items: flex-start; font-size: 14px; cursor: pointer; }
.q-step input { appearance: none; -webkit-appearance: none; width: 20px; height: 20px; flex: none; margin: 1px 0 0; border-radius: 6px; border: 2px solid var(--edge-strong);
  background: var(--panel); display: grid; place-items: center; cursor: pointer; }
.q-step input:checked { background: var(--good); border-color: var(--good); }
.q-step input:checked::after { content: "✓"; color: #fff; font-weight: 800; font-size: 12px; line-height: 1; }
.q-step input:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.q-step input:disabled { cursor: default; }
.q-step.done .q-step-text { color: var(--muted); }  /* a green ✓ and grey text, as on the task page: no strikethrough */
.q-add { font-size: 13.5px; padding: 6px 10px; border-style: dashed; }
.q-add:focus { border-style: solid; }
.q-cm { display: grid; gap: 1px; padding: 7px 10px; border-radius: 10px; background: var(--panel-2, var(--accent-soft)); }
.q-cm p { margin: 0; font-size: 13.5px; overflow-wrap: anywhere; }
.q-kv { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; margin: 0; font-size: 13.5px; }
.q-kv dt { color: var(--muted); } .q-kv dd { margin: 0; font-weight: 600; }
.q-p-error { margin: 0; grid-column: 1 / -1; color: var(--bad); font-weight: 700; font-size: 13.5px; }
.q-p-head { grid-column: 1 / -1; }
.q-p-label { font-size: 11.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
@media (max-width: 860px) { .q-panel { grid-template-columns: 1fr; } }
.q-panel.phone { grid-template-columns: 1fr; padding: 14px; }
div.q-detail .q-panel.phone::before { left: auto; right: 22px; }
.m-task-side .q-caret { justify-self: end; }

/* Folder tree: colours, counts, fold, ⋯ menu, rename, drag and drop */
.ft-icon { display: inline-block; width: 15px; height: 11px; flex: none; position: relative; border-radius: 2px 3px 3px 3px; background: var(--fc, var(--accent)); margin-top: 3px; }
.ft-icon::before { content: ""; position: absolute; top: -3px; left: 0; width: 7px; height: 4px; border-radius: 2px 2px 0 0; background: var(--fc, var(--accent)); }
.ft-icon.lg { width: 22px; height: 16px; vertical-align: -1px; margin-top: 0; } .ft-icon.lg::before { top: -4px; width: 10px; height: 5px; }
.fc-none { --fc: var(--accent); } .fc-red { --fc: #ef4444; } .fc-amber { --fc: #f59e0b; } .fc-green { --fc: #22c55e; }
.fc-blue { --fc: #3b82f6; } .fc-violet { --fc: #8b5cf6; } .fc-slate { --fc: #94a3b8; }
.ft-list { display: grid; gap: 1px; }
.ft-node { display: flex; align-items: center; gap: 2px; padding: 2px 2px 2px calc(var(--d, 0) * 14px); border-radius: 9px; position: relative; min-width: 0; }
.ft-node:hover, .ft-node.menu-open { background: var(--accent-soft); }
.ft-node.on { background: var(--accent-soft); }
.ft-node.on .ft-name { color: var(--accent); }
.ft-fold { width: 18px; height: 22px; flex: none; border: 0; background: none; color: var(--muted); cursor: pointer; padding: 0; font-size: 10px; border-radius: 5px; }
.ft-fold:hover, .ft-fold:focus-visible { color: var(--accent); background: var(--panel); outline: none; }
.ft-fold.none { visibility: hidden; }
.ft-link { display: flex; align-items: flex-start; gap: 6px; flex: 1; min-width: 0; padding: 4px 2px; color: var(--text); text-decoration: none; font-size: 13.5px; font-weight: 700; }
.ft-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; border-radius: 6px; }
.ft-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ft-kind { font-size: 11px; opacity: .8; }
.ft-name-in { flex: 1; min-width: 0; font: inherit; font-size: 13px; font-weight: 700; padding: 2px 6px; border: 1px solid var(--accent); border-radius: 7px; background: var(--panel); color: var(--text); outline: none; box-shadow: 0 0 0 3px var(--accent-soft); }
.ft-cnt { font-size: 11.5px; font-weight: 700; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; padding: 0 2px; }
.ft-cnt b { color: var(--bad); }
.ft-dots { width: 24px; height: 22px; flex: none; border: 0; border-radius: 6px; background: none; color: var(--muted); cursor: pointer; font-size: 15px; line-height: 1; padding: 0; opacity: 0; }
.ft-node:hover .ft-dots, .ft-node.menu-open .ft-dots, .ft-dots:focus-visible { opacity: 1; }
.ft-dots:hover, .ft-dots:focus-visible { background: var(--panel); color: var(--accent); outline: none; }
@media (hover: none) { .ft-dots { opacity: 1; } }
.ft-item.ft-pin { display: flex; align-items: flex-start; gap: 6px; }
.ft-item.ft-pin .ft-name { flex: 1; }
.ft-node[draggable="true"] { cursor: default; }
.ft-node.drop { outline: 2px dashed var(--accent); background: var(--accent-soft); }
.ft-node.drop-above { box-shadow: inset 0 3px 0 var(--accent); }
.ft-node.no-drop { opacity: .5; }
.folder-tree.dragging-task .ft-node { outline: 1px dashed var(--edge-strong); outline-offset: -1px; }
.ft-tip { margin: 6px 4px 0; font-size: 11.5px; color: var(--muted); }
.qrow .q-tw[draggable="true"] { cursor: grab; }
.ft-menu { position: absolute; z-index: 70; width: 230px; display: grid; gap: 1px; padding: 6px; background: var(--panel); border: 1px solid var(--edge-strong); border-radius: 14px; box-shadow: var(--shadow); }
.ft-menu > button { text-align: left; border: 0; background: none; color: var(--text); font: inherit; font-size: 13.5px; font-weight: 700; padding: 7px 10px; border-radius: 9px; cursor: pointer; }
.ft-menu > button:hover, .ft-menu > button:focus-visible { background: var(--accent-soft); outline: none; }
.ft-menu > button.danger { color: var(--bad); }
.ft-menu hr { border: 0; border-top: 1px solid var(--edge); margin: 4px 2px; width: auto; }
.ft-menu-label { font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); padding: 4px 10px 0; }
.ft-swatches { display: flex; gap: 6px; padding: 6px 10px 8px; flex-wrap: wrap; }
.ft-sw { width: 20px; height: 20px; border-radius: 50%; padding: 0; cursor: pointer; background: var(--fc); border: 2px solid var(--panel); box-shadow: 0 0 0 1px var(--edge-strong); }
.ft-sw.fc-none { background: repeating-linear-gradient(45deg, var(--panel) 0 3px, var(--edge-strong) 3px 5px); }
.ft-sw.on, .ft-sw:hover, .ft-sw:focus-visible { box-shadow: 0 0 0 2px var(--accent); outline: none; }
.ft-confirm { display: grid; gap: 6px; padding: 8px; font-size: 13.5px; }
.ft-confirm span { color: var(--muted); font-size: 12.5px; }
.ft-confirm div { display: flex; gap: 6px; }
.table-wrap .q-tw { min-width: 220px; }

/* Folder chips on rows and the Folder column */
.fchip { display: inline-flex; align-items: center; gap: 5px; padding: 1px 8px 1px 6px; border-radius: 7px; border: 1px solid var(--edge-strong); background: var(--panel);
  color: var(--text); font-size: 11.5px; font-weight: 700; text-decoration: none; white-space: nowrap; max-width: 180px; }
.fchip .ft-icon { width: 12px; height: 9px; margin-top: 0; } .fchip .ft-icon::before { width: 6px; height: 3px; top: -2px; }
a.fchip:hover, a.fchip:focus-visible { border-color: var(--accent); color: var(--accent); outline: none; }
.fchip button { border: 0; background: none; color: var(--muted); cursor: pointer; padding: 0 0 0 2px; font-size: 13px; line-height: 1; }
.fchip button:hover { color: var(--bad); }
.q-folders { display: flex; gap: 4px; flex-wrap: wrap; align-items: center; }
.q-folders-cell { min-height: 26px; min-width: 120px; border: 1px solid transparent; border-radius: 8px; padding: 2px 4px; cursor: pointer; }
.q-folders-cell:hover, .q-folders-cell:focus-visible { border-color: var(--edge-strong); background: var(--panel); outline: none; }
.q-folders-cell:hover .q-tags-add, .q-folders-cell:focus-visible .q-tags-add, .q-folders-cell:not(:has(.fchip)) .q-tags-add { opacity: 1; }
/* tables stay one line per task: chips don't wrap, and "＋ tag" / "＋ folder" only take room when the cell is empty or pointed at */
.q-table .q-tags-cell, .q-table .q-folders-cell { white-space: nowrap; }
.q-table .q-tags-cell:has(.tagchip):not(:hover):not(:focus-visible) .q-tags-add,
.q-table .q-folders-cell:has(.fchip):not(:hover):not(:focus-visible) .q-tags-add { display: none; }
.q-table .q-date { max-width: 138px; }
.ws-table .ws-td-seq { padding-right: 4px; }
.q-folderbtn { border: 1px dashed var(--edge-strong); background: none; color: var(--muted); border-radius: 999px; font: inherit; font-size: 11.5px; font-weight: 700; padding: 1px 8px; cursor: pointer; }
.q-folderbtn:hover, .q-folderbtn:focus-visible { color: var(--accent); border-color: var(--accent); outline: none; }
.q-fold-ed { min-width: 240px; }
.q-sugg button { display: grid; gap: 0; }
.q-sugg-f { display: flex; gap: 6px; align-items: center; } .q-sugg-f .ft-icon { width: 12px; height: 9px; margin-top: 0; }
.q-sugg-path { font-size: 11.5px; color: var(--muted); font-weight: 600; padding-left: 18px; }
.q-sugg-none { margin: 0; padding: 6px 9px; font-size: 12.5px; color: var(--muted); }
.q-panel .q-folders-cell { min-width: 0; }
.q-sugg { max-height: min(320px, 60vh); overflow-y: auto; z-index: 90; }

/* My tasks filter bar */
.mf-out { display: none !important; }
/* a chat message coming in on any page (chatping.js) */
.kc-ntfs { position: fixed; right: 16px; bottom: 16px; z-index: 90; display: grid; gap: 8px; width: min(340px, calc(100vw - 32px)); }
.kc-ntfs.phone { top: 12px; bottom: auto; left: 50%; right: auto; transform: translateX(-50%); }
.kc-ntf { display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 10px; padding: 10px 12px; border-radius: 14px; background: var(--glass-strong);
  border: 1px solid var(--edge-strong); box-shadow: 0 16px 40px rgba(4, 47, 43, .22); color: var(--text); text-decoration: none; animation: kc-in .25s ease-out;
  backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur); }
.kc-ntf:hover { border-color: var(--accent); }
.kc-lg { width: 36px; height: 36px; border-radius: 14px 4px 14px 4px; background: var(--grad); display: grid; place-items: center; font-size: 17px; }
.kc-t { min-width: 0; } .kc-t b { font-size: 13.5px; } .kc-t small { float: right; color: var(--faint); font-size: 11px; }
.kc-t p { margin: 1px 0 0; font-size: 13px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@keyframes kc-in { from { transform: translateY(8px); opacity: 0; } to { transform: none; opacity: 1; } }
/* due chips: All · Overdue · Today · Next 7 days · Later · No date, each with its count */
.mf-chips { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; }
.mf-chip { border: 1px solid color-mix(in srgb, var(--slate) 28%, transparent); background: var(--panel); border-radius: 999px; padding: 3px 11px;
  font: 800 12.5px var(--body); color: var(--muted); cursor: pointer; white-space: nowrap; }
.mf-chip .n { font-weight: 700; opacity: .8; }
.mf-chip:hover { border-color: var(--accent); color: var(--accent); }
.mf-chip.bad.has { color: var(--bad); border-color: color-mix(in srgb, var(--bad) 45%, transparent); }
.mf-chip.zero { opacity: .5; }
.mf-chip[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--on-accent); opacity: 1; }
.mf-chip.bad[aria-pressed="true"] { background: var(--bad); border-color: var(--bad); color: #fff; }
.ws-due { margin: 0 0 10px; }
.my-filter { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; padding: 8px 10px; border-radius: 14px;
  background: color-mix(in srgb, var(--slate) 7%, var(--panel)); border: 1px solid color-mix(in srgb, var(--slate) 22%, transparent); }
.my-filter.on { border-color: var(--accent); }
.my-filter .input { padding: 5px 10px; font-size: 13px; background: var(--panel); border-color: color-mix(in srgb, var(--slate) 25%, transparent); }
.my-filter select.input { border-radius: 999px; }
.card > .my-filter.in-card { margin: -18px -18px 0; border-radius: 20px 20px 0 0; border-width: 0 0 1px; }
.my-filter .gb-bar { margin-left: auto; font-size: 12.5px; }
.my-filter .gb-bar select { min-width: 130px; }
.mf-search { flex: 1 1 260px; display: flex; align-items: center; gap: 6px; min-width: 0; }
.mf-search input { flex: 1; min-width: 0; }
.my-filter select.input { width: auto; flex: 0 1 auto; min-width: 0; max-width: 220px; }
.mf-count { margin-left: auto; white-space: nowrap; font-variant-numeric: tabular-nums; }
.mf-none p { margin: 0; }
.mf-none .link-like { background: none; border: 0; padding: 0; cursor: pointer; font: inherit; }
@media (max-width: 640px) { .my-filter select.input { flex: 1 1 45%; max-width: none; } .mf-count { margin-left: 0; } }
.mf-none[hidden], .my-filter [hidden] { display: none !important; }

/* Quick add stands out a little from the cards around it (My tasks, Task views, phone) */
.card.task-quick, .card.add-bar, .m-card.m-quick-task { background: color-mix(in srgb, var(--accent) 9%, var(--glass)); border-color: color-mix(in srgb, var(--accent) 35%, transparent); }
.card.task-quick .input, .card.add-bar .input, .m-card.m-quick-task input, .m-card.m-quick-task select { background: var(--panel); }

/* My tasks quick add: a teal action bar, so it doesn't look like the search toolbar under it */
.card.task-quick.qa, .qa.qa-home { display: grid; gap: 6px; padding: 12px 14px; border: 2px solid var(--accent);
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 13%, var(--panel)), var(--panel) 75%);
  box-shadow: 0 6px 18px color-mix(in srgb, var(--accent) 16%, transparent); }
.qa.qa-open { position: relative; z-index: 60; }
.qa-line { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.qa.qa-home { padding: 10px; border-radius: 16px; }
/* the place you type: a white box with a border, the ＋ just a mark inside it */
.qa-field { flex: 1 1 320px; display: flex; align-items: center; gap: 10px; min-width: 0; cursor: text; padding: 4px 8px 4px 12px; border-radius: 12px;
  background: var(--panel); border: 1.5px solid var(--edge-strong); box-shadow: inset 0 1px 2px color-mix(in srgb, var(--text) 6%, transparent);
  transition: border-color .15s, box-shadow .15s; }
.qa-field:hover { border-color: var(--accent); }
.qa-field:focus-within { border-color: var(--accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 18%, transparent); }
.qa-ic { color: var(--accent); font-size: 20px; font-weight: 800; line-height: 1; flex: none; }
.qa-input { flex: 1; min-width: 0; border: 0; background: transparent; outline: none; font: 700 16px var(--body); color: var(--text); padding: 8px 0; caret-color: var(--accent); }
.qa-input::placeholder { color: var(--faint); font-weight: 600; }
.qa-key { font-family: ui-monospace, Consolas, monospace; font-size: 11px; font-weight: 700; padding: 1px 6px; border-radius: 6px; border: 1px solid var(--edge-strong);
  color: var(--muted); background: var(--panel); }
.qa-field:focus-within .qa-key { visibility: hidden; }
.qa-extra { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.qa-opt { min-width: 140px; }
.qa-opt.qa-enh { min-width: 0; display: block; }
.qa-pick { position: relative; }
.qa-pill { display: inline-flex; align-items: center; gap: 5px; font: 700 13px var(--body); padding: 6px 11px; border-radius: 999px; border: 1px solid var(--edge-strong);
  background: var(--panel); color: var(--text); cursor: pointer; white-space: nowrap; max-width: 240px; }
.qa-pill b { overflow: hidden; text-overflow: ellipsis; }
.qa-pill .k { color: var(--faint); font-weight: 600; }
.qa-pill:hover, .qa-pill[aria-expanded="true"] { border-color: var(--accent); background: var(--accent-soft); }
.qa-pill:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.qa-pop { position: absolute; top: calc(100% + 6px); left: 0; z-index: 70; width: max-content; min-width: 230px; max-width: min(320px, 90vw); display: grid; gap: 4px;
  padding: 6px; background: var(--panel); border: 1px solid var(--edge-strong); border-radius: 12px; box-shadow: var(--shadow); }
.qa-pop[hidden] { display: none; }
.qa-pop .input { padding: 6px 9px; font-size: 13px; }
.qa-opts { display: grid; gap: 1px; max-height: 260px; overflow-y: auto; }
.qa-opts button { font: 600 13px var(--body); text-align: left; padding: 6px 9px; border-radius: 8px; border: 0; background: none; color: var(--text); cursor: pointer;
  display: flex; justify-content: space-between; gap: 10px; }
.qa-opts button small { color: var(--faint); font-weight: 600; }
.qa-opts button:hover, .qa-opts button.hi { background: var(--accent-soft); }
.qa-opts button[aria-selected="true"] { color: var(--accent); }
.qa-pop-note { margin: 2px 4px 2px; font-size: 11.5px; color: var(--muted); max-width: 300px; }
.qa-pop-date { display: flex; align-items: center; gap: 6px; padding: 4px 4px 2px; border-top: 1px solid var(--edge); font-size: 12.5px; color: var(--muted); }
.qa-pop-date .input { width: auto; flex: 1; }
.qa-hide { display: none !important; }
.btn.qa-add { padding: 9px 18px; font-size: 14px; box-shadow: 0 4px 12px color-mix(in srgb, var(--accent) 30%, transparent); }
.qa-more { background: none; border: 0; padding: 6px 4px; cursor: pointer; font: inherit; font-weight: 700; white-space: nowrap; }
.qa-note { margin: 0; font-size: 12px; color: var(--muted); padding-left: 2px; }
@media (max-width: 640px) { .btn.qa-add { flex: 1; } .qa-key { display: none; } }

/* Reordering steps: the ⠿ handle (computer) and ↑ ↓ (phone) */
.step-grip { width: 16px; padding: 0; border: 0; background: none; color: var(--muted); font-size: 14px; line-height: 1; cursor: grab; border-radius: 5px; align-self: center; }
.step-grip:hover, .step-grip:focus-visible { color: var(--accent); outline: none; background: var(--accent-soft); }
.task-step.has-grip { grid-template-columns: 16px 26px minmax(0, 1fr) auto; }
.q-step .step-grip { margin-top: 2px; }
.step-dragging { opacity: .45; }
.m-step:has(.m-step-move) { grid-template-columns: 32px minmax(0, 1fr) auto; }
.m-step-move { display: flex; gap: 4px; }
.m-step-arrow { width: 30px; height: 30px; border-radius: 9px; border: 1px solid var(--edge-strong); background: var(--panel); color: var(--muted); font-weight: 800; padding: 0; }
.m-step-arrow:disabled { opacity: .35; }

/* Task rows: who, tags and folders share one line under the title */
.task-sub { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; margin-top: 2px; min-width: 0; }
.task-sub .s { margin: 0; }
.task-sub .tag-list { margin: 0; gap: 4px; }
/* wide screens: one line per task (name, then whose / tags / folders, then status and date), as in workstreams */
@media (min-width: 900px) {
  .task-row > div:not(.task-meta) { display: flex; align-items: center; gap: 14px; min-width: 0; }
  .task-row .q-tw, .task-row > div:not(.task-meta) > .t { flex: 0 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .task-row .q-tw .q-title, .task-row .q-tw .q-link { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .task-row .task-sub { flex: 0 1 auto; flex-wrap: nowrap; margin: 0; white-space: nowrap; min-width: 0; }
  .task-row .task-sub .s { overflow: hidden; text-overflow: ellipsis; min-width: 0; }
  .task-row .task-meta { flex-wrap: nowrap; }
  .task-row.qrow { padding-top: 7px; padding-bottom: 7px; min-height: 0; }
}
.task-sub .tag-list + .tag-list { padding-left: 12px; border-left: 1px solid var(--edge); }
.task-sub .q-tagbtn, .task-sub .q-folderbtn { padding: 0 7px; font-size: 11px; line-height: 18px; }
.task-row.qrow { padding-top: 8px; padding-bottom: 8px; }

/* Ticked steps: who and when on the right, one line per step; underneath when the list is narrow */
.task-steps, .q-steps { container-type: inline-size; }
.task-step { grid-template-columns: 26px minmax(0, 1fr) auto auto; grid-template-areas: "box text meta x"; }
.task-step.has-grip { grid-template-columns: 16px 26px minmax(0, 1fr) auto auto; grid-template-areas: "grip box text meta x"; }
.task-step .step-grip, .q-step .step-grip { grid-area: grip; }
.task-step .task-box, .q-step input { grid-area: box; }
.task-step .step-text, .q-step .q-step-text { grid-area: text; min-width: 0; overflow-wrap: anywhere; }
.task-step .task-x { grid-area: x; }
.step-meta { grid-area: meta; font-size: 12px; font-weight: 600; color: var(--muted); white-space: nowrap; font-variant-numeric: tabular-nums; text-align: right; }
.step-meta:empty { display: none; }
.q-step { display: grid; grid-template-columns: 20px minmax(0, 1fr) auto auto; grid-template-areas: "box text meta x"; column-gap: 8px; align-items: center; }
.q-step.has-grip { grid-template-columns: 16px 20px minmax(0, 1fr) auto auto; grid-template-areas: "grip box text meta x"; }
.q-step .q-step-x { grid-area: x; }
@container (max-width: 460px) {
  .task-step { grid-template-columns: 26px minmax(0, 1fr) auto; grid-template-areas: "box text x" ". meta ."; row-gap: 1px; }
  .task-step.has-grip { grid-template-columns: 16px 26px minmax(0, 1fr) auto; grid-template-areas: "grip box text x" ". . meta ."; }
  .q-step { grid-template-columns: 20px minmax(0, 1fr) auto; grid-template-areas: "box text x" ". meta ."; row-gap: 1px; }
  .q-step.has-grip { grid-template-columns: 16px 20px minmax(0, 1fr) auto; grid-template-areas: "grip box text x" ". . meta ."; }
  .step-meta { text-align: left; color: var(--good); font-weight: 700; font-size: 11.5px; }
  .step-meta::before { content: "✓ "; }
}

/* Shared folders: 🤝 and how many people, hover for who */
.ft-share { flex: none; font-size: 11px; font-weight: 800; color: var(--accent); background: var(--accent-soft); border-radius: 999px; padding: 0 6px; line-height: 17px; margin-top: 1px; white-space: nowrap; }

/* Quick add inside the Home page's My tasks */

/* @ list in comment boxes */
.mention-box { position: absolute; z-index: 95; min-width: 240px; max-width: min(380px, 92vw); display: grid; gap: 1px; padding: 5px; background: var(--panel);
  border: 1px solid var(--edge-strong); border-radius: 12px; box-shadow: var(--shadow); max-height: 300px; overflow-y: auto; }
.mention-box button { display: grid; gap: 1px; text-align: left; border: 0; background: none; color: var(--text); font: inherit; font-size: 13.5px; padding: 6px 9px; border-radius: 8px; cursor: pointer; }
.mention-box button.hi, .mention-box button:hover { background: var(--accent-soft); }
.mention-share { font-size: 11.5px; color: var(--warn); font-weight: 600; }

/* sortable column titles */
th.th-sort { cursor: pointer; user-select: none; white-space: nowrap; }
th.th-sort:hover, th.th-sort:focus-visible { color: var(--accent); outline: none; }
th.th-sort::after { content: " ⇅"; opacity: .35; font-size: 10px; }
th.th-sort.sorted { color: var(--accent); }
th.th-sort.sorted[data-dir="asc"]::after { content: " ▲"; opacity: 1; }
th.th-sort.sorted[data-dir="desc"]::after { content: " ▼"; opacity: 1; }

/* person dropdowns you can type in */
.pp { position: relative; min-width: 0; }
.pp-native { display: none !important; }
.pp-input { cursor: text; padding-right: 26px; background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position: calc(100% - 15px) 52%, calc(100% - 10px) 52%; background-size: 5px 5px; background-repeat: no-repeat; }
.pp-list { position: absolute; left: 0; top: calc(100% + 4px); z-index: 90; min-width: 100%; width: max-content; max-width: min(340px, 92vw); max-height: 280px; overflow-y: auto;
  display: grid; gap: 1px; padding: 5px; background: var(--panel); border: 1px solid var(--edge-strong); border-radius: 12px; box-shadow: var(--shadow); }
.pp-list button { text-align: left; border: 0; background: none; color: var(--text); font: inherit; font-size: 13.5px; padding: 6px 10px; border-radius: 8px; cursor: pointer; white-space: nowrap; }
.pp-list button.hi, .pp-list button:hover { background: var(--accent-soft); }
.pp-list button.on { font-weight: 800; color: var(--accent); }
.pp-none { margin: 0; padding: 6px 10px; font-size: 13px; color: var(--muted); }
.pp-filter { margin-bottom: 6px; }

/* a card with an open person list sits above the cards after it */
.pp-host-open { position: relative; z-index: 60; }

/* the panel's "share it with them?" question */
.q-share-ask { display: grid; gap: 6px; padding: 10px 12px; border-radius: 12px; font-size: 13.5px;
  background: color-mix(in srgb, var(--warn) 10%, var(--panel)); border: 1px solid color-mix(in srgb, var(--warn) 40%, transparent); }
.q-share-btns { display: flex; gap: 6px; flex-wrap: wrap; }

/* Command palette (Ctrl+K) */
.pal-open { flex: 0 1 380px; min-width: 0; display: flex; align-items: center; gap: 8px; margin: 0 12px; padding: 7px 12px; border-radius: 12px;
  border: 1px solid var(--edge-strong); background: var(--panel); color: var(--muted); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; }
.pal-open:hover, .pal-open:focus-visible { border-color: var(--accent); color: var(--text); outline: none; }
.pal-open-t { flex: 1; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pal-open kbd, .pal kbd { font-family: ui-monospace, Consolas, monospace; font-size: 11px; font-weight: 700; padding: 1px 6px; border-radius: 6px;
  border: 1px solid var(--edge-strong); border-bottom-width: 2px; background: var(--panel-2); color: var(--muted); white-space: nowrap; }
@media (max-width: 760px) { .pal-open { flex: 0 0 auto; } .pal-open-t, .pal-open kbd { display: none; } }
.pal-veil { position: fixed; inset: 0; z-index: 200; background: color-mix(in srgb, var(--text) 30%, transparent); display: grid; justify-items: center;
  align-items: start; padding: 9vh 16px 16px; }
.pal-veil[hidden] { display: none !important; }
.pal { width: min(680px, 100%); max-height: min(620px, 80vh); display: grid; grid-template-rows: auto minmax(0, 1fr) auto; background: var(--panel);
  border: 1px solid var(--edge-strong); border-radius: 18px; box-shadow: 0 24px 60px rgba(0, 0, 0, .25); overflow: hidden; }
.pal-in { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--edge); }
.pal-in input { flex: 1; min-width: 0; border: 0; outline: none; background: none; color: var(--text); font: inherit; font-size: 17px; font-weight: 600; }
.pal-scope { font-size: 12px; font-weight: 800; color: var(--accent); background: var(--accent-soft); border-radius: 999px; padding: 2px 9px; white-space: nowrap; }
.pal-res { overflow-y: auto; padding: 6px 8px 10px; }
.pal-grp { display: flex; justify-content: space-between; padding: 10px 10px 4px; font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.pal-item { width: 100%; display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; gap: 10px; align-items: center; text-align: left; border: 0; background: none;
  color: var(--text); font: inherit; padding: 8px 10px; border-radius: 10px; cursor: pointer; }
.pal-item.hi, .pal-item:hover { background: var(--accent-soft); }
.pal-ic { font-size: 16px; text-align: center; }
.pal-txt { min-width: 0; }
.pal-txt b { display: block; font-size: 14.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pal-txt small { display: block; font-size: 12.5px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pal-go { font-size: 12px; color: var(--muted); white-space: nowrap; }
.pal-item.hi .pal-go { color: var(--accent); font-weight: 800; }
.pal-ans { margin: 4px 4px 6px; padding: 12px 14px; border-radius: 14px; display: grid; gap: 8px; border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent);
  background: color-mix(in srgb, var(--accent) 7%, var(--panel)); }
.pal-ans .q { font-size: 12.5px; font-weight: 800; color: var(--accent); }
.pal-ans .a { font-size: 15px; font-weight: 600; white-space: pre-line; }
.pal-ans table { border-collapse: collapse; width: 100%; font-size: 13.5px; }
.pal-ans td { padding: 4px 6px; border-top: 1px solid var(--edge); }
.pal-ans td.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pal-ans.no { border-color: color-mix(in srgb, var(--warn) 45%, transparent); background: color-mix(in srgb, var(--warn) 8%, var(--panel)); }
.pal-ans.no .q { color: var(--warn); }
.pal-ans.none { border-style: dashed; background: var(--panel-2); }
.pal-think { color: var(--muted); }
.pal-note { margin: 2px 12px 6px; font-size: 12.5px; color: var(--muted); }
.pal-empty { padding: 24px 14px; text-align: center; color: var(--muted); font-size: 14px; }
.pal-foot { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; padding: 8px 14px; border-top: 1px solid var(--edge); background: var(--panel-2); font-size: 12px; color: var(--muted); }
.pal-hint { margin-left: auto; }
html.pal-on { overflow: hidden; }

/* Tasks › My activity */
.act-tools { display: grid; gap: 8px; }
.act-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.act-label { font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--faint); min-width: 44px; }
.act-chip { text-decoration: none; font: 700 12.5px var(--body); padding: 5px 11px; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--slate) 25%, transparent);
  background: var(--panel); color: var(--muted); cursor: pointer; white-space: nowrap; display: inline-flex; gap: 5px; align-items: center; }
.act-chip:hover { border-color: var(--accent); color: var(--text); }
.act-chip.on { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.act-chip .n { font-family: var(--mono); font-size: 10.5px; opacity: .8; }
.act-range { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px; font-size: 12.5px; color: var(--muted); }
.act-range .input { width: auto; }
.act-sum { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font-size: 13px; color: var(--muted); }
.act-sum b { color: var(--text); font-family: var(--display); font-size: 15px; }
.act-sum .p { padding: 2px 10px; border-radius: 999px; background: var(--panel); border: 1px solid var(--edge); }
.act-day-h { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; padding: 4px 2px 0; }
.act-day-h h3 { font-size: 15.5px; }
.act-list { padding: 4px 0; gap: 0; }
.act-item { display: grid; grid-template-columns: 52px 30px minmax(0, 1fr); gap: 0 10px; padding: 10px 16px; border-top: 1px solid var(--edge); align-items: start; }
.act-item:first-child { border-top: 0; }
.act-item:hover { background: var(--accent-soft); }
.act-time { font-family: var(--mono); font-size: 12px; color: var(--faint); padding-top: 3px; font-variant-numeric: tabular-nums; }
.act-ic { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-size: 14px; background: var(--panel); border: 1px solid var(--edge); }
.act-ic.k-comments { border-color: var(--info); } .act-ic.k-status { border-color: var(--good); } .act-ic.k-created { border-color: var(--accent); }
.act-ic.k-files { border-color: var(--vio); } .act-ic.k-edits, .act-ic.k-steps { border-color: var(--slate); }
.act-body { min-width: 0; display: grid; gap: 3px; }
.act-line { font-size: 13.5px; color: var(--muted); }
.act-line a { color: var(--text); font-weight: 800; text-decoration: none; }
.act-line a:hover { color: var(--accent); text-decoration: underline; }
.act-quote { font-size: 14px; color: var(--text); background: var(--panel); border: 1px solid var(--edge); border-left: 3px solid var(--info); border-radius: 10px;
  padding: 7px 10px; overflow-wrap: anywhere; white-space: pre-line; }
.act-what { font-weight: 700; color: var(--text); overflow-wrap: anywhere; }
.act-meta { display: flex; flex-wrap: wrap; gap: 8px; font-size: 11.5px; color: var(--faint); }
@media (max-width: 640px) { .act-item { grid-template-columns: 44px minmax(0, 1fr); } .act-ic { display: none; } .act-label { width: 100%; } }
.act-replies { margin-top: 2px; }
.act-replies summary { cursor: pointer; font-size: 12.5px; font-weight: 800; color: var(--accent); list-style: none; display: inline-flex; gap: 6px; flex-wrap: wrap; }
.act-replies summary::-webkit-details-marker { display: none; }
.act-replies summary::after { content: "▸"; transition: rotate .15s; }
.act-replies[open] summary::after { rotate: 90deg; }
.act-replies summary .muted { font-weight: 600; }
.act-thread { display: grid; gap: 4px; margin: 6px 0 0 6px; padding-left: 14px; border-left: 2px solid var(--edge-strong); }
.act-reply { position: relative; display: grid; gap: 1px; padding: 6px 10px; border-radius: 10px; background: var(--panel); border: 1px solid var(--edge); color: var(--text); }
.act-reply.is-new { border-color: var(--accent); }
.act-reply::before { content: ""; position: absolute; left: -16px; top: 16px; width: 14px; border-top: 2px solid var(--edge-strong); }
.act-reply:hover { border-color: var(--accent); }
.act-reply-h { display: flex; gap: 8px; align-items: baseline; font-size: 12.5px; }
.act-reply-t { font-size: 13.5px; overflow-wrap: anywhere; white-space: pre-line; }
.act-noreply { font-size: 12px; font-weight: 700; color: var(--warn); }
.task-comment:target { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 10px; }

/* Dropdowns: the open list looks like Karmik's own pickers (white card, rounded, teal highlight), not the system's grey
   box. Uses the browser's customisable <select> (Chrome / Edge 135+); other browsers keep their normal list. */
@supports (appearance: base-select) {
  select:not([multiple]):not([size]), select:not([multiple]):not([size])::picker(select) { appearance: base-select; }
  select:not([multiple]):not([size]) { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
  select.input:not([multiple]):not([size]) { display: flex; }
  select:not([multiple]):not([size])::picker-icon { content: "▾"; font-size: .8em; color: var(--faint); transition: rotate .15s; }
  select:not([multiple]):not([size]):open::picker-icon { rotate: 180deg; }
  select::picker(select) { margin-block: 6px; padding: 5px; min-width: anchor-size(width); max-height: min(320px, 60vh); overflow-y: auto;
    background: var(--panel); color: var(--text); border: 1px solid var(--edge-strong); border-radius: 12px; box-shadow: var(--shadow); }
  select:not([multiple]):not([size]) option { padding: 6px 10px; border-radius: 8px; font: 600 13.5px var(--body); color: var(--text); background: transparent;
    display: flex; align-items: center; gap: 8px; cursor: pointer; white-space: nowrap; }
  select:not([multiple]):not([size]) option:hover, select:not([multiple]):not([size]) option:focus-visible { background: var(--accent-soft); outline: none; }
  select:not([multiple]):not([size]) option:checked { background: transparent; color: var(--accent); font-weight: 800; }
  select:not([multiple]):not([size]) option:checked:hover, select:not([multiple]):not([size]) option:checked:focus-visible { background: var(--accent-soft); }
  select:not([multiple]):not([size]) option::checkmark { content: "✓"; color: var(--accent); order: 1; margin-left: auto; }
  select:not([multiple]):not([size]) option:disabled { color: var(--faint); cursor: default; background: transparent; }
  select:not([multiple]):not([size]) optgroup { font: 800 11px var(--body); letter-spacing: .06em; text-transform: uppercase; color: var(--faint); padding: 6px 4px 2px; }
}

/* Comment replies: ↩ Reply, the box it opens, and threads on the task page */
.reply-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 2px; }
.reply-acts .link-like, .reply-acts .m-link { background: none; border: 0; padding: 0; cursor: pointer; font: inherit; font-size: 12.5px; font-weight: 800; color: var(--accent); }
.reply-acts .link-like:hover { text-decoration: underline; }
.reply-acts .task-more { display: inline; }
.reply-box { display: grid; gap: 6px; margin-top: 6px; padding: 8px; border-radius: 12px; background: var(--panel); border: 1.5px solid var(--accent);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 14%, transparent); }
.reply-box textarea { border: 0; box-shadow: none; background: transparent; resize: vertical; min-height: 54px; padding: 4px 6px; }
.reply-box textarea:focus { outline: none; }
.reply-row { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px; }
.reply-btns { display: flex; gap: 6px; }
.reply-msg:empty { display: none; }
.reply-msg { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.task-thread { margin: -4px 0 4px 14px; padding-left: 16px; border-left: 2px solid var(--edge-strong); }
.task-thread .task-comment { grid-template-columns: 26px minmax(0, 1fr); padding: 8px 0; }
.task-thread .task-comment:last-child { border-bottom: 0; }
.task-thread .avatar.sm { width: 26px; height: 26px; font-size: 11px; }

/* My tasks: To me | By me | All */
.who-seg { display: inline-flex; gap: 3px; padding: 3px; border-radius: 14px; background: var(--panel); border: 1px solid var(--edge-strong); }
.who-seg a { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 11px; font-weight: 800; font-size: 13px; color: var(--muted); text-decoration: none; }
.who-seg a:hover { color: var(--text); background: var(--accent-soft); }
.who-seg a .n { font-family: ui-monospace, Consolas, monospace; font-size: 11px; padding: 0 7px; border-radius: 999px; background: var(--accent-soft); color: var(--accent); }
.who-seg a[aria-current="true"] { background: var(--accent); color: var(--on-accent); }
.who-seg a[aria-current="true"] .n { background: color-mix(in srgb, var(--on-accent) 25%, transparent); color: inherit; }
.who-explain .who-to, .who-explain .who-from { font-weight: 700; }
.who-to { color: var(--vio); font-weight: 700; }
.who-from { color: var(--info); font-weight: 700; }
/* My tasks › List: Group by */
.lg-by { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 800; color: var(--muted); }
.lg-by select { width: auto; }
.lg-hide { display: none !important; }
.lg-box { display: contents; }
details.lg-grp > summary { list-style: none; cursor: pointer; }
details.lg-grp > summary::-webkit-details-marker { display: none; }
details.lg-grp > summary h3::before { content: "▾ "; color: var(--faint); }
details.lg-grp:not([open]) > summary h3::before { content: "▸ "; }
details.lg-grp:not([open]) > summary { margin-bottom: 0; }

/* My tasks › 📝 Today: the notepad */
.paper { --rule: color-mix(in srgb, var(--accent) 14%, transparent); background: color-mix(in srgb, #fff8e1 70%, var(--panel)); border: 1px solid var(--edge-strong);
  border-radius: 18px; box-shadow: var(--shadow); padding: 16px 18px 18px; max-width: 1100px; margin: 14px 0 8px; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .paper { background: var(--panel); } }
:root[data-theme="dark"] .paper { background: var(--panel); }
.paper-day { display: flex; gap: 10px; align-items: center; margin-bottom: 10px; }
.paper-day h2 { margin: 0; font-family: var(--display); font-size: 21px; flex: 1; }
.paper-day h2 small { font-family: var(--body); font-size: 13px; color: var(--muted); font-weight: 700; margin-left: 8px; }
.paper-write { display: flex; gap: 10px; align-items: center; padding: 6px 10px; border-radius: 12px; background: var(--panel); border: 2px dashed var(--edge-strong); }
.paper-write:focus-within { border-style: solid; border-color: var(--accent); }
.paper-write span { font-size: 18px; }
.paper-in { flex: 1; min-width: 0; border: 0; outline: 0; background: none; color: var(--text); font: inherit; font-size: 15.5px; padding: 6px 0; }
.paper-preview { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin: 6px 2px 4px; min-height: 22px; font-size: 12px; color: var(--muted); }
.paper-preview b { font-size: 11.5px; padding: 1px 8px; border-radius: 999px; background: var(--accent-soft); color: var(--accent); }
.paper-preview b.pv-t { background: none; color: var(--text); padding: 0 2px; font-size: 12.5px; }
.paper-hint { font-size: 12px; color: var(--faint); margin: 0 2px 6px; }
.paper-sec { margin-top: 12px; }
.paper-sec h3 { margin: 6px 0 2px; font-family: var(--display); font-size: 13.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--faint); }
.paper-sec h3 span { letter-spacing: 0; }
.paper-empty { color: var(--faint); font-size: 13.5px; margin: 0; padding: 6px 6px 2px; }
.nl { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; gap: 10px; align-items: center; min-height: 38px; padding: 0 6px; border-bottom: 1px solid var(--rule); }
.nl-box { width: 20px; height: 20px; border-radius: 5px; border: 2px solid var(--edge-strong); background: var(--panel); cursor: pointer; display: grid; place-items: center;
  font-size: 13px; line-height: 1; color: transparent; padding: 0; }
button.nl-box:hover { border-color: var(--good); color: var(--good); }
.nl-box.off { cursor: default; opacity: .55; }
.nl.done .nl-box { background: var(--good); border-color: var(--good); color: #fff; opacity: 1; }
.nl.review .nl-box { border-style: dashed; }
.nl-t { font-size: 15.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--text); text-decoration: none; min-width: 0; }
.nl-t:hover { text-decoration: underline; }
.nl.done .nl-t { text-decoration: line-through; color: var(--faint); }
.nl-m { display: flex; gap: 8px; align-items: center; font-size: 12px; color: var(--muted); white-space: nowrap; }
.nl-m .chip { font-size: 11px; }
.nl-due.late { color: var(--bad); font-weight: 700; }
.nl-m { position: relative; }
.nl-dbtn { font: inherit; font-size: 12px; color: var(--muted); background: none; border: 1px dashed transparent; border-radius: 8px; padding: 2px 7px; cursor: pointer; }
.nl-dbtn:hover, .nl-dbtn:focus-visible { border-color: var(--edge-strong); background: var(--panel); color: var(--accent); outline: none; }
.nl-dbtn.late { color: var(--bad); font-weight: 700; }
.nl-dbtn.none { color: var(--faint); border-color: var(--edge); }
.nl-dmenu { position: absolute; z-index: 40; right: 0; top: calc(100% + 4px); display: grid; gap: 4px; min-width: 170px; padding: 8px; border-radius: 12px;
  background: var(--panel); border: 1px solid var(--edge-strong); box-shadow: var(--shadow); white-space: nowrap; }
.nl-dmenu button { text-align: left; font: inherit; font-size: 13px; font-weight: 700; padding: 6px 10px; border: 0; border-radius: 8px; background: none; color: var(--text); cursor: pointer; }
.nl-dmenu button:hover, .nl-dmenu button:focus-visible { background: var(--accent-soft); outline: none; }
.nl-dmenu button.on { color: var(--accent); }
.nl-dmenu .input { padding: 5px 8px; font-size: 13px; }
.nl-at { color: var(--faint); font-size: 11.5px; font-family: ui-monospace, Consolas, monospace; }
.paper-carry { margin-top: 14px; }
.paper-carry summary { cursor: pointer; font-weight: 800; color: var(--bad); font-size: 13.5px; padding: 8px 12px; border-radius: 12px;
  border: 1px dashed color-mix(in srgb, var(--bad) 55%, transparent); background: color-mix(in srgb, var(--bad) 6%, var(--panel)); }
.paper-carry summary:hover { border-style: solid; }
.paper-carry[open] summary { margin-bottom: 6px; }
@media (max-width: 700px) { .nl { grid-template-columns: 26px minmax(0, 1fr); } .nl-m { grid-column: 2; flex-wrap: wrap; white-space: normal; padding-bottom: 6px; } }

/* a task's files, each with 🗑 */
.task-file-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.task-file-row .task-file { min-width: 0; overflow-wrap: anywhere; }

/* Workstreams */
.ws-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 14px 20px; align-items: start; margin-bottom: 4px; }
.ws-title { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.ws-title h1 { font-size: 26px; font-weight: 800; }
.ws-ic { width: 42px; height: 42px; flex: none; border-radius: 13px; display: grid; place-items: center; font-size: 21px; background: var(--grad); box-shadow: var(--shadow); }
.ws-ic.sm { width: 36px; height: 36px; font-size: 18px; border-radius: 11px; }
.ws-ic.xs { width: 26px; height: 26px; font-size: 14px; border-radius: 8px; box-shadow: none; }
.ws-goal { margin: 6px 0 0; color: var(--muted); }
.ws-goal b { color: var(--text); }
.ws-facts { display: flex; flex-wrap: wrap; gap: 6px 16px; align-items: center; margin-top: 8px; font-size: 13px; color: var(--muted); }
.ws-facts b { color: var(--text); }
.ws-ref { font-family: var(--mono); font-size: 12px; padding: 1px 8px; border-radius: 7px; background: var(--panel); border: 1px solid var(--edge); color: var(--text); }
.ws-people { display: inline-flex; align-items: center; }
.avatar.xs { width: 26px; height: 26px; font-size: 10.5px; border: 2px solid var(--panel); margin-left: -7px; }
.ws-people .avatar.xs:first-child { margin-left: 0; }
.ws-head-side { display: grid; gap: 8px; justify-items: end; min-width: 240px; }
.ws-prog { display: grid; gap: 4px; width: 100%; }
.ws-prog small { color: var(--muted); font-size: 12px; }
.ws-bar { display: block; height: 10px; border-radius: 999px; background: var(--panel); border: 1px solid var(--edge); overflow: hidden; }
.ws-bar.sm { height: 7px; }
.ws-bar > span { display: block; height: 100%; background: var(--grad); }
.ws-actions { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; align-items: flex-start; }
.ws-actions form { display: inline; }
.ws-more { position: relative; }
.ws-more > summary { list-style: none; cursor: pointer; }
.ws-more > summary::-webkit-details-marker { display: none; }
.ws-more-body { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 8px; }
.ws-actions .ws-more[open] .ws-more-body { position: absolute; right: 0; z-index: 30; width: min(360px, 90vw); padding: 10px; border-radius: 12px; background: var(--panel); border: 1px solid var(--edge-strong); box-shadow: var(--shadow); }
.ws-more-body .input { flex: 1 1 160px; width: auto; min-width: 0; }
.ws-grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 16px; align-items: start; margin-top: 12px; }
.ws-col { display: grid; gap: 16px; min-width: 0; }
.ws-tasks { display: grid; gap: 6px; }
.ws-task { display: grid; grid-template-columns: 18px 24px 26px minmax(0, 1fr) auto auto; gap: 10px; align-items: center; padding: 8px 10px; border-radius: 12px; background: var(--panel); border: 1px solid var(--edge); }
.ws-task.late { border-color: var(--bad); }
.ws-task.done { opacity: .66; }
.ws-task.cancelled { opacity: .45; }
.ws-task.cancelled .ws-tt a { text-decoration: line-through; }
.ws-task .step-grip { cursor: grab; }
.ws-task form { display: contents; }
.ws-seq { width: 24px; height: 24px; border-radius: 8px; display: grid; place-items: center; font: 800 11.5px ui-monospace, Consolas, monospace; color: var(--accent); background: var(--accent-soft); }
.ws-tick { width: 24px; height: 24px; border-radius: 50%; border: 2px solid var(--edge-strong); background: var(--panel); display: grid; place-items: center; font-size: 12px; font-weight: 800; color: var(--on-accent); cursor: pointer; padding: 0; }
button.ws-tick:hover { border-color: var(--good); background: color-mix(in srgb, var(--good) 15%, var(--panel)); }
.ws-tick.on { background: var(--good); border-color: var(--good); cursor: default; }
span.ws-tick:not(.on) { cursor: default; opacity: .5; }
.ws-tt { min-width: 0; display: grid; }
.ws-tt a { font-weight: 700; color: var(--text); text-decoration: none; overflow-wrap: anywhere; }
.ws-tt a:hover { color: var(--accent); text-decoration: underline; }
.ws-tt small { color: var(--faint); font-size: 12px; }
.ws-tt-line { display: flex; align-items: center; gap: 4px; min-width: 0; }
.ws-tasks > .q-detail { margin: -2px 0 2px 44px; }
.ws-tasks.list { gap: 6px; }
.ws-item { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px; align-items: start; }
.ws-item-lead { display: flex; align-items: center; gap: 4px; padding-top: 12px; }
.ws-item-lead .step-grip { cursor: grab; }
.ws-item-row { min-width: 0; display: grid; gap: 4px; }
.ws-item-row > .task-row { margin: 0; }
.ws-item.done .task-row { opacity: .6; }
.ws-item .task-meta { flex-wrap: nowrap; }
/* List layout on one line: name, then whose / tags / folders, then status and date */
.ws-item .task-row > div:not(.task-meta) { display: flex; align-items: center; gap: 14px; min-width: 0; }
.ws-item .task-row .q-tw, .ws-item .task-row > div:not(.task-meta) > .t { flex: 0 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ws-item .task-row .q-tw .q-title, .ws-item .task-row .q-tw .q-link { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ws-item .task-sub { flex: 0 0 auto; flex-wrap: nowrap; margin: 0; white-space: nowrap; }
.ws-item:has(.task-row.mf-out) { display: none; }  /* filtered out: hide its number too */
.ws-item .task-row.qrow, .ws-item .task-row { grid-template-columns: 6px minmax(0, 1fr) auto; }
.ws-item .task-row { padding-top: 7px; padding-bottom: 7px; min-height: 0; }
.ws-tasks.list > .ws-item, .ws-tree .ws-item { align-items: center; }
.ws-tasks.list > .ws-item > .ws-item-lead { padding-top: 0; }
.ws-item .task-meta .task-due { min-width: 150px; text-align: right; justify-content: flex-end; }
.ws-item.cancelled .task-row { opacity: .45; }
.ws-item .q-detail { margin: 0; }
.ws-wait-line { font-size: 12px; font-weight: 700; color: var(--warn); padding-left: 14px; }
.ws-hidden { opacity: .7; }
.ws-table .ws-td-seq { white-space: nowrap; width: 1%; }
.ws-table .ws-td-seq > * { vertical-align: middle; }
.ws-table .ws-td-seq .step-grip { display: inline-flex; align-items: center; }
.ws-table .ws-seq { display: inline-grid; place-items: center; text-align: center; line-height: 1; }
/* Table layout: the tasks take the full width, the side boxes sit underneath side by side */
.ws-grid.wide { grid-template-columns: 1fr; }
.ws-grid.wide > .ws-col:last-child { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); align-items: start; }
.ws-table .ws-td-seq .step-grip { cursor: grab; margin-right: 2px; }
.ws-table tr.done td { opacity: .6; }
.ws-table tr.cancelled td { opacity: .45; }
.ws-table .ws-wait-line { padding-left: 0; }
#tasks .card-h .seg { margin-left: auto; }
#tasks > .my-filter.in-card { margin: 2px -18px 0; border-radius: 0; border-width: 1px 0; }  /* under the Tasks header, edge to edge */
#tasks > .card-h { margin-bottom: 0; }
.ws-wait { color: var(--warn); font-weight: 700; }
.ws-due { font-size: 12px; font-weight: 700; color: var(--muted); white-space: nowrap; }
.ws-due.late { color: var(--bad); }
.ws-add { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; padding: 8px; border-radius: 14px; border: 1.5px dashed var(--edge-strong); }
.ws-add-plus { color: var(--accent); font-weight: 800; font-size: 18px; padding-left: 4px; }
.ws-add .input[name=title] { flex: 1 1 200px; min-width: 0; }
.ws-add select.input, .ws-add input[type=date], .ws-add .pp-wrap { width: auto; flex: 0 1 150px; min-width: 0; }
.ws-note { display: grid; gap: 6px; justify-items: start; }
.ws-note textarea { width: 100%; }
.ws-tl { display: grid; }
.ws-tl-i { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 10px; position: relative; padding-bottom: 12px; font-size: 13.5px; color: var(--muted); }
.ws-tl-i::before { content: ""; position: absolute; left: 11px; top: 26px; bottom: 0; border-left: 2px solid var(--edge); }
.ws-tl-i:last-child::before { display: none; }
.ws-tl-i b { color: var(--text); }
.ws-tl-i small { display: block; color: var(--faint); font-size: 11.5px; }
.ws-tl-dot { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; background: var(--panel); border: 1px solid var(--edge-strong); }
.ws-note-text { margin: 2px 0 0; padding: 7px 10px; border-radius: 10px; background: var(--panel); border: 1px solid var(--edge); border-left: 3px solid var(--accent); color: var(--text); white-space: pre-line; overflow-wrap: anywhere; }
.ws-kd { display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 6px 0; border-bottom: 1px solid var(--edge); }
.ws-kd:last-of-type { border-bottom: 0; }
.ws-kd-date { text-align: center; border-radius: 10px; padding: 3px 0; background: var(--panel); border: 1px solid var(--edge); line-height: 1.15; }
.ws-kd-date b { display: block; font-family: var(--display); font-size: 18px; }
.ws-kd-date small { font-size: 10.5px; font-weight: 800; color: var(--faint); text-transform: uppercase; }
.ws-kd.next .ws-kd-date { border-color: var(--warn); background: color-mix(in srgb, var(--warn) 10%, var(--panel)); }
.ws-kd.past { opacity: .62; }
.ws-kd-t { font-size: 13.5px; font-weight: 700; min-width: 0; }
.ws-kd-t small { display: block; color: var(--faint); font-weight: 600; font-size: 11.5px; }
.ws-date-form .input[name=label] { flex: 1 1 100%; }
.ws-kd.overdue .ws-kd-date { border-color: var(--bad); background: color-mix(in srgb, var(--bad) 10%, var(--panel)); color: var(--bad); }
.ws-kd.met { opacity: .62; }
.ws-kd.met .ws-kd-t { text-decoration: none; }
.ws-kd-act { display: inline-flex; align-items: center; gap: 4px; }
.ws-kd-tick { width: 24px; height: 24px; border-radius: 50%; border: 2px solid var(--edge-strong); background: var(--panel); color: transparent; font-size: 12px; font-weight: 800; cursor: pointer; padding: 0; }
.ws-kd-tick:hover { border-color: var(--good); color: var(--good); }
.ws-kd-tick.on { background: var(--good); border-color: var(--good); color: var(--on-accent); }
.cal-ev.cal-ws { background: color-mix(in srgb, var(--vio) 12%, var(--panel)); border-color: color-mix(in srgb, var(--vio) 40%, transparent); color: var(--vio); font-weight: 800; }
.ws-docsec h4 { display: flex; justify-content: space-between; font-family: var(--body); font-size: 11.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--faint); margin: 2px 0 4px; }
.ws-doc { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 6px 10px; margin-bottom: 4px; border-radius: 10px; background: var(--panel); border: 1px solid var(--edge); font-size: 13px; }
.ws-doc a { font-weight: 700; color: var(--text); text-decoration: none; min-width: 0; overflow-wrap: anywhere; flex: 1; }
.ws-doc a:hover { color: var(--accent); }
.ws-doc form { display: inline; }
.ws-upload { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.ws-upload select.input { width: auto; }
.ws-member { display: flex; align-items: center; gap: 8px; padding: 3px 0; font-size: 13.5px; }
.ws-member .avatar.xs { margin-left: 0; }
.ws-member form { margin-left: auto; }
.ws-list { display: grid; gap: 8px; }
.ws-row { display: grid; grid-template-columns: 36px minmax(0, 1.6fr) minmax(0, 1fr) 170px minmax(0, 190px); gap: 14px; align-items: center; padding: 12px 14px; border-radius: 16px;
  background: var(--glass); border: 1px solid var(--edge); color: var(--text); text-decoration: none; box-shadow: var(--shadow); }
.ws-row:hover { border-color: var(--accent); }
/* Workstreams list: ▸ folds a workstream open to its tasks */
.ws-node { display: grid; border-radius: 16px; }
.ws-node .ws-row { grid-template-columns: 26px 36px minmax(0, 1.6fr) minmax(0, 1fr) 170px minmax(0, 190px); cursor: pointer; }
.ws-node.open .ws-row { border-color: var(--edge-strong); border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.ws-node .ws-row-t a { color: var(--text); text-decoration: none; }
.ws-node .ws-row-t a:hover b { color: var(--accent); text-decoration: underline; }
.ws-car { width: 24px; height: 24px; border-radius: 7px; border: 0; background: none; color: var(--faint); display: grid; place-items: center; cursor: pointer; padding: 0; transition: rotate .15s; }
.ws-car svg { width: 11px; height: 11px; fill: currentColor; }
.ws-car:hover { background: var(--accent-soft); color: var(--accent); }
.ws-node.open .ws-car { rotate: 90deg; color: var(--accent); }
.ws-tree { display: grid; gap: 6px; padding: 10px 14px 14px 52px; margin-top: -1px; border: 1px solid var(--edge-strong); border-top: 0;
  border-radius: 0 0 16px 16px; background: color-mix(in srgb, var(--panel) 55%, transparent); position: relative; }
.ws-tree[hidden] { display: none; }
.ws-tree::before { content: ""; position: absolute; left: 32px; top: 0; bottom: 26px; border-left: 2px solid var(--edge-strong); }
.ws-tree .ws-item { position: relative; }
.ws-tree .ws-item::before { content: ""; position: absolute; left: -20px; top: 22px; width: 16px; border-top: 2px solid var(--edge-strong); }
.ws-tree-h { display: flex; justify-content: space-between; gap: 8px; font-size: 12px; color: var(--faint); padding: 0 2px 2px; }
.ws-tree-h a { color: var(--accent); font-weight: 800; text-decoration: none; }
.ws-tree-list, .ws-tree-items { display: grid; gap: 6px; }
.ws-tree .ws-table { background: var(--panel); border-radius: 12px; }
.ws-tree::before, .ws-tree .ws-item::before { display: none; }  /* the table has its own lines */
.ws-tree { padding-left: 14px; }
@media (max-width: 980px) { .ws-node .ws-row { grid-template-columns: 26px 36px minmax(0, 1fr); } .ws-node .ws-row > :nth-child(n+4) { grid-column: 3; }
  .ws-tree { padding-left: 30px; } .ws-tree::before { left: 14px; } .ws-tree .ws-item::before { left: -14px; width: 10px; } }
.ws-row-t { min-width: 0; display: grid; }
.ws-row-t b { font-size: 14.5px; }
.ws-row small { display: block; color: var(--faint); font-size: 12px; }
.ws-row-prog { display: grid; gap: 4px; }
.ws-row-date { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; justify-content: flex-end; }
.ws-partof { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 8px 12px; margin: 6px 0; border-radius: 12px; font-size: 13.5px;
  background: color-mix(in srgb, var(--vio) 8%, var(--panel)); border: 1px solid color-mix(in srgb, var(--vio) 30%, transparent); }
.ws-partof a { color: var(--text); text-decoration: none; }
.ws-partof a:hover b { text-decoration: underline; }
.ws-partof form { margin-left: auto; }
.ws-pick { margin: 6px 0; }
.ws-pick .task-more-body { display: grid; gap: 8px; }
.ws-lab { display: inline-flex; align-items: center; gap: 3px; margin-left: 4px; padding: 0 8px; border-radius: 999px; font-size: 11.5px; font-weight: 800; white-space: nowrap;
  color: var(--vio); background: color-mix(in srgb, var(--vio) 10%, transparent); text-decoration: none; max-width: 260px; overflow: hidden; text-overflow: ellipsis; vertical-align: middle; }
.ws-lab:hover { text-decoration: underline; }
.ws-icons { display: flex; flex-wrap: wrap; gap: 6px; border: 0; padding: 0; margin: 0; }
.ws-icons legend { font-weight: 700; font-size: 12.5px; color: var(--muted); margin-bottom: 4px; }
.ws-icon-opt input { position: absolute; opacity: 0; }
.ws-icon-opt span { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 11px; font-size: 19px; background: var(--panel); border: 1px solid var(--edge); cursor: pointer; }
.ws-icon-opt input:checked + span { border: 2px solid var(--accent); background: var(--accent-soft); }
.ws-icon-opt input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
.form-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; }
/* Workstreams overview */
.ov-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 16px; margin: 16px 0; align-items: start; }
.ov-att, .ov-date { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 8px 10px; border-radius: 12px; background: var(--panel); border: 1px solid var(--edge); color: var(--text); text-decoration: none; margin-bottom: 6px; }
.ov-att:hover, .ov-date:hover { border-color: var(--accent); }
.ov-att-t { display: grid; min-width: 0; }
.ov-att-t small { color: var(--faint); font-size: 12px; }
.ov-why { display: flex; flex-wrap: wrap; gap: 4px; justify-content: flex-end; }
.ov-date .ws-kd-date { width: 46px; }
.ov-name { display: flex; gap: 8px; align-items: center; color: var(--text); text-decoration: none; }
.ov-name small { display: block; color: var(--faint); font-size: 12px; }
.ov-name:hover b { color: var(--accent); }
.ov-prog { display: grid; gap: 2px; min-width: 110px; }
.ov-prog small { color: var(--muted); font-size: 11.5px; }
.ov-table td { vertical-align: middle; }
@media (max-width: 980px) { .ws-grid { grid-template-columns: 1fr; } .ws-head { grid-template-columns: 1fr; } .ws-head-side { justify-items: start; } .ws-actions { justify-content: flex-start; }
  .ws-actions .ws-more[open] .ws-more-body { left: 0; right: auto; }
  .ws-row { grid-template-columns: 36px minmax(0, 1fr); } .ws-row > :nth-child(n+3) { grid-column: 2; } .ws-row-date { justify-content: flex-start; } }
@media (max-width: 560px) { .ws-task { grid-template-columns: 18px 24px 26px minmax(0, 1fr); } .ws-task .chip, .ws-task .ws-due { grid-column: 4; justify-self: start; } }

/* Approvals: decided recently */
.decided { display: grid; gap: 10px; margin-top: 22px; }
.decided-h { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.decided-h h2 { font-size: 18px; margin: 0; }
.chips-row { display: flex; gap: 6px; flex-wrap: wrap; }
.decided-list { padding: 0; gap: 0; overflow: hidden; }
.decided-day { padding: 6px 16px; font-size: 11.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); background: var(--inner); border-bottom: 1px solid var(--inner-edge); }
.decided-row { display: grid; grid-template-columns: 1fr auto; gap: 6px 14px; padding: 10px 16px; border-bottom: 1px solid var(--inner-edge); align-items: center; color: inherit; text-decoration: none; }
.decided-row:last-child { border-bottom: 0; }
.decided-row:hover { background: var(--inner); }
.decided-row.notme { opacity: .75; }
.decided-right { display: flex; gap: 8px; align-items: center; justify-content: end; flex-wrap: wrap; }
.tnum { font-variant-numeric: tabular-nums; white-space: nowrap; }
@media (max-width: 640px) { .decided-row { grid-template-columns: 1fr; } .decided-right { justify-content: start; } }

/* Task page: workstream, folders and tags side by side in one bar */
.task-meta-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; padding: 8px 12px; margin: 6px 0 2px; border-radius: 14px;
  background: var(--inner); border: 1px solid var(--inner-edge); position: relative; }
.task-meta-bar .ws-partof { margin: 0; padding: 4px 10px; }
.task-meta-bar > .task-more > .task-more-body, .task-meta-bar .task-tags .task-more > .task-more-body { position: absolute; z-index: 30; top: calc(100% + 6px); left: 0;
  width: min(420px, 90vw); margin: 0; padding: 10px; background: var(--panel); border: 1px solid var(--edge-strong); border-radius: 12px;
  box-shadow: 0 12px 28px rgba(4, 47, 43, .16); }

/* Add someone or a team */
.addpick { position: relative; }
.ap-box { position: relative; display: block; }
.ap-plus { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--accent); font-weight: 800; pointer-events: none; }
.ap-in { padding-left: 32px; border-style: dashed; }
.ap-in:focus { border-style: solid; }
.ap-list { position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 70; display: grid; gap: 1px; padding: 6px; max-height: 320px; overflow-y: auto; overflow-x: hidden;
  background: var(--panel); border: 1px solid var(--edge-strong); border-radius: 12px; box-shadow: var(--shadow); }
.ap-grp { font-size: 10.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--faint); padding: 6px 8px 2px; }
.ap-opt { display: flex; align-items: center; gap: 8px; width: 100%; padding: 6px 8px; border: 0; border-radius: 8px; background: none; color: var(--text);
  font: 600 13.5px var(--body); text-align: left; cursor: pointer; }
.ap-opt:hover, .ap-opt.hi { background: var(--accent-soft); }
.ap-opt:disabled { opacity: .5; cursor: default; }
.ap-opt small { margin-left: auto; color: var(--faint); font-size: 11.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ap-opt { min-width: 0; }
.ap-av { width: 24px; height: 24px; flex: none; border-radius: 50%; display: grid; place-items: center; font-size: 10px; font-weight: 800; color: var(--on-accent); background: var(--grad); }
.ap-av.team { border-radius: 7px; background: var(--vio); }
.ap-none { margin: 6px 8px; color: var(--faint); font-size: 13px; }

/* ⧉ next to Chat in the menu: Chat in its own window (chatping.js) */
.nav-btn .chat-popbtn { margin-left: auto; width: 26px; height: 26px; border-radius: 8px; border: 1px solid var(--edge); background: var(--panel); color: var(--accent); font-size: 13px; line-height: 1; cursor: pointer; display: grid; place-items: center; opacity: 0; flex: none; }
.nav-btn:hover .chat-popbtn, .nav-btn .chat-popbtn:focus-visible { opacity: 1; }
.nav-btn .chat-popbtn:hover { background: var(--accent-soft); border-color: var(--edge-strong); }
.nav-btn .badge + .chat-popbtn { margin-left: 6px; }
.nav-btn .chat-popstate { flex: none; margin-left: 6px; width: 20px; height: 20px; border-radius: 6px; display: grid; place-items: center;
  font-size: 12px; line-height: 1; color: var(--on-accent); background: var(--accent); }  /* Chat is popped out: a small ⧉ instead of words */
.nav-btn:has(.chat-popstate:not([hidden])) .chat-popbtn { display: none; }  /* while popped out, clicking Chat brings it forward */
.nav-btn .chat-popstate[hidden] { display: none; }
:root[data-side="closed"] .nav-btn .chat-popbtn, :root[data-side="closed"] .nav-btn .chat-popstate { display: none; }
@media (hover: none) { .nav-btn .chat-popbtn { display: none; } }

/* 📝 Today in its own pop-out window */
body.today-pop { margin: 0; padding: 8px; min-height: 100vh; background: var(--bg); }
body.today-pop .alert { margin: 0 0 8px; }
.paper.in-pop { max-width: none; margin: 0; padding: 12px 12px 14px; }
.paper.in-pop .paper-day { gap: 6px; }
.paper.in-pop .paper-day h2 { font-size: 18px; }
.paper.in-pop .paper-day h2 small { display: block; margin-left: 0; font-size: 12px; }
.paper.in-pop .nl { grid-template-columns: 26px minmax(0, 1fr); align-items: start; padding: 5px 4px; }
.paper.in-pop .nl-box { margin-top: 2px; }
.paper.in-pop .nl-t { white-space: normal; overflow-wrap: anywhere; }
.paper.in-pop .nl-m { grid-column: 2; flex-wrap: wrap; white-space: normal; gap: 6px; }
.today-sync { position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%); z-index: 80; border: 0; border-radius: 12px; padding: 9px 16px; background: #10302d; color: #e6f6f3; font-weight: 800; cursor: pointer; box-shadow: var(--shadow); }
@media (hover: none) { .today-popbtn { display: none; } }

/* "Open ↗": goes to the full page (a task, a payslip, a file). Pastel sky, so it sits with the mint and teal theme yet never
   looks like teal's "do something here". In task rows a small ↗ after the name, the full pill when the row is hovered. */
:root { --open: #2b7bb9; --open-soft: #e3f2fc; --open-edge: #b9dcf3; --on-open: #fff; --open-grad: linear-gradient(135deg, #7cc8f2, #3a8fcc); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --open: #9fd3f5; --open-soft: rgba(124, 200, 242, .14); --open-edge: rgba(124, 200, 242, .38); --on-open: #0b2233; --open-grad: linear-gradient(135deg, #9fd3f5, #5aa9dc); }
}
:root[data-theme="dark"] { --open: #9fd3f5; --open-soft: rgba(124, 200, 242, .14); --open-edge: rgba(124, 200, 242, .38); --on-open: #0b2233; --open-grad: linear-gradient(135deg, #9fd3f5, #5aa9dc); }
.op-pill { display: inline-flex; align-items: center; gap: 3px; padding: 2px 10px; border-radius: 999px; background: var(--open-soft); color: var(--open);
  border: 1px solid var(--open-edge); font-size: 12px; font-weight: 800; line-height: 1.5; text-decoration: none; white-space: nowrap; cursor: pointer; flex: none; }
.op-pill:hover, .op-pill:focus-visible { background: var(--open-grad); color: var(--on-open); border-color: transparent; text-decoration: none; }
.op-pill.solid { background: var(--open-grad); color: var(--on-open); border-color: transparent; padding: 5px 14px; font-size: 13px; }
.op-pill.solid:hover { filter: brightness(1.07); }
/* in a task row: just ↗ until the row is hovered */
.op-row { margin-left: 6px; padding: 0 5px; background: none; border-color: transparent; opacity: .6; }
.op-row .op-w { display: none; }
.qrow:hover .op-row, .task-row:hover .op-row, tr:hover .op-row, .op-row:focus-visible { opacity: 1; background: var(--open-soft); border-color: var(--open-edge); padding: 0 9px; }
.qrow:hover .op-row .op-w, .task-row:hover .op-row .op-w, tr:hover .op-row .op-w, .op-row:focus-visible .op-w { display: inline; }
.op-row:hover { background: var(--open-grad) !important; color: var(--on-open); border-color: transparent !important; }
@media (hover: none) { .op-row { opacity: 1; background: var(--open-soft); border-color: var(--open-edge); padding: 0 9px; } .op-row .op-w { display: inline; } }
.ws-tree-add { margin: 8px 0 4px; }

/* workstream comments: replies sit under the comment they answer */
.ws-thread { margin: -6px 0 6px 34px; padding-left: 12px; border-left: 2px solid var(--edge-strong); }
.ws-thread .ws-tl-i { padding-bottom: 8px; }
.ws-thread .ws-tl-i::before { display: none; }
.ws-tl-i .reply-acts { display: flex; gap: 10px; align-items: center; margin-top: 3px; }
.ws-tl-i .reply-box { margin-top: 6px; }
.ws-tl-i:target .ws-note-text, .ws-tl-i.is-new .ws-note-text { box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 35%, transparent); }

/* a workstream's finished and cancelled tasks, folded away under the open ones */
details.ws-fold { margin-top: 10px; border: 1px dashed color-mix(in srgb, var(--good) 45%, transparent); border-radius: 12px; background: color-mix(in srgb, var(--good) 5%, var(--panel)); }
details.ws-fold > summary { list-style: none; cursor: pointer; padding: 8px 12px; font-weight: 800; font-size: 13.5px; color: var(--good); display: flex; gap: 8px; align-items: center; }
details.ws-fold > summary::-webkit-details-marker { display: none; }
details.ws-fold > summary::before { content: "▸"; color: var(--faint); }
details.ws-fold[open] > summary::before { content: "▾"; }
details.ws-fold > summary .x { color: var(--faint); font-weight: 700; }
details.ws-fold > summary .hint { margin-left: auto; font-size: 12px; color: var(--faint); font-weight: 700; }
details.ws-fold[open] > summary .hint { visibility: hidden; }
details.ws-fold > .table-wrap, details.ws-fold > table, details.ws-fold > .ws-tasks { margin: 0 6px 6px; }
details.ws-fold .ws-fold-table { width: calc(100% - 12px); }
.ws-alldone td, p.ws-alldone { padding: 10px 8px; }

/* pink, for the status colour palette (task_look): a soft shade, and a lighter one in dark mode */
:root { --pink: #c2477f; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --pink: #f29ac0; } }
:root[data-theme="dark"] { --pink: #f29ac0; }
.st-row .st-preview { min-width: 96px; justify-content: center; text-align: center; }
.kv-act { margin-left: 8px; padding: 1px 10px; font-size: 12px; vertical-align: middle; }

/* Home › My tasks: Earlier / Today / Coming up, each task's status changed in place */
.hcol-act { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 6px 10px; border-radius: 12px; background: var(--panel-2); border: 1px dashed var(--edge-strong); font-size: 13px; margin: 2px 0 10px; }
.hcol-act a { text-decoration: none; }
.hcols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 900px) { .hcols { grid-template-columns: 1fr; } }
.hcol { border-radius: 14px; background: var(--panel-2); border: 1px solid var(--edge); padding: 8px; min-width: 0; }
.hcol.late { border-color: color-mix(in srgb, var(--bad) 35%, transparent); background: color-mix(in srgb, var(--bad) 4%, var(--panel-2)); }
.hcol h4 { margin: 2px 4px 8px; font-family: var(--display); font-size: 14.5px; }
.hcol h4 small { color: var(--faint); font-family: var(--body); font-weight: 700; font-size: 12px; }
.hcol.late h4 { color: var(--bad); }
.hcol-t { position: relative; display: grid; grid-template-columns: 4px minmax(0, 1fr); gap: 9px; padding: 8px 9px; border-radius: 12px; background: var(--panel); border: 1px solid var(--edge); margin-bottom: 6px; transition: opacity .4s; }
.hcol-t .task-pr { width: 4px; height: auto; align-self: stretch; border-radius: 3px; }
.hcol-t.q-gone { opacity: .35; }
.hcol-name { font-weight: 700; color: var(--text); text-decoration: none; overflow-wrap: anywhere; }
.hcol-name:hover { text-decoration: underline; }
.hcol-sub { display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: center; margin-top: 4px; font-size: 12px; color: var(--muted); }
.hcol-sub .late { color: var(--bad); font-weight: 800; }
.hcol-sub .chip { font-size: 11.5px; }
.hcol-sub .q-st { cursor: pointer; border: 1px solid currentColor; }
.hcol-empty { color: var(--faint); font-size: 13px; text-align: center; margin: 10px 0; }
.hcol-more { display: block; text-align: center; font-size: 12.5px; font-weight: 800; padding: 4px; text-decoration: none; }

/* 👤 My details */
.md-page { max-width: 900px; }
.md-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 12.5px; color: var(--muted); margin-bottom: 10px; }
.md-legend span { display: inline-flex; gap: 6px; align-items: center; }
.md-dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.md-dot.ok { background: var(--good); } .md-dot.hr { background: var(--warn); } .md-dot.wait { background: var(--info); }
.md-group { margin-bottom: 12px; }
.md-group h3 { margin: 0 0 6px; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.md-f { display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: 4px 12px; align-items: start; padding: 8px 0; border-bottom: 1px solid var(--edge); }
.md-f:last-child { border-bottom: 0; }
.md-f > label, .md-confirm > label { font-weight: 800; font-size: 13px; color: var(--muted); padding-top: 7px; }
.md-val, .md-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; min-height: 34px; }
.md-in { flex: 1 1 220px; min-width: 0; width: auto; }
.md-in.md-blank { border-style: dashed; border-width: 2px; background: color-mix(in srgb, var(--accent) 4%, var(--panel)); }
.md-in.bad { border-color: var(--bad); }
.md-in.ok { border-color: var(--good); }
.md-err { grid-column: 2; font-size: 12px; color: var(--bad); font-weight: 700; }
.md-confirm { grid-column: 1 / -1; display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: 4px 12px; }
.md-confirm[hidden], .md-box[hidden], .md-err[hidden] { display: none; }
.md-box { grid-column: 2; display: grid; gap: 6px; padding: 8px 10px; border-radius: 12px; background: var(--panel-2); border: 1px solid var(--edge); }
.md-box .md-err { grid-column: auto; }
.md-proof label { font-size: 12.5px; font-weight: 700; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.md-tag { font-size: 11px; font-weight: 800; padding: 1px 8px; border-radius: 999px; white-space: nowrap; }
.md-tag.ok { color: var(--good); background: color-mix(in srgb, var(--good) 12%, transparent); }
.md-tag.hr { color: var(--warn); background: color-mix(in srgb, var(--warn) 13%, transparent); }
.md-tag.wait { color: var(--info); background: color-mix(in srgb, var(--info) 12%, transparent); white-space: normal; }
.md-tag.new { color: var(--accent); background: var(--accent-soft); }
.md-bar { position: sticky; bottom: 8px; display: flex; flex-wrap: wrap; gap: 10px; align-items: center; padding: 10px 16px; border-radius: 16px; background: var(--panel); border: 1px solid var(--edge-strong); box-shadow: var(--shadow); z-index: 5; }
.md-sum { flex: 1; font-size: 13px; color: var(--muted); }
.md-bad { color: var(--bad); font-weight: 800; }
.md-phone .md-f, .md-phone .md-confirm { grid-template-columns: 1fr; }
.md-phone .md-err, .md-phone .md-box { grid-column: 1; }
.md-phone .md-bar { bottom: 70px; }
@media (max-width: 640px) { .md-f, .md-confirm { grid-template-columns: 1fr; } .md-err, .md-box { grid-column: 1; } }

/* 📊 My day */
.dy-tools { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.dy-nav { display: inline-flex; gap: 6px; align-items: center; }
.dy-nav b { font-family: var(--display); font-size: 14px; padding: 0 4px; white-space: nowrap; }
.dy-nav [aria-disabled="true"] { opacity: .4; pointer-events: none; }
.dy-note { display: flex; flex-wrap: wrap; gap: 6px 16px; align-items: center; font-size: 13px; color: var(--info); background: color-mix(in srgb, var(--info) 9%, transparent);
  border-radius: 12px; padding: 8px 12px; margin: 0 0 12px; }
.dy-remind { display: inline-flex; gap: 6px; align-items: center; margin-left: auto; color: var(--muted); }
.dy-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; margin-bottom: 14px; }
.dy-t { display: grid; gap: 2px; align-content: start; text-align: left; font: inherit; color: var(--text); padding: 10px 12px; border-radius: 14px; cursor: pointer;
  background: var(--panel); border: 1px solid var(--edge); transition: border-color .15s, box-shadow .15s; }
.dy-t b { font: 800 26px/1.15 var(--display); }
.dy-t b.dy-time { font-size: 18px; padding-top: 6px; }
.dy-t span { font-size: 12.5px; color: var(--muted); }
.dy-t small { font-size: 11.5px; color: var(--accent); }
button.dy-t:hover, .dy-t.on { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); }
.dy-t.quiet { cursor: default; }
.dy-t.warn b, .dy-warn { color: var(--warn); }
.dy-cols { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 16px; align-items: start; }
@media (max-width: 1000px) { .dy-cols { grid-template-columns: 1fr; } }
.dy-trail { list-style: none; margin: 0; padding: 0; }
.dy-trail li { display: grid; grid-template-columns: 58px 24px 1fr; gap: 6px; padding: 7px 0; border-bottom: 1px dashed var(--edge); font-size: 13.5px; }
.dy-trail li[hidden] { display: none; }
.dy-trail .dy-at { color: var(--muted); font-variant-numeric: tabular-nums; }
.dy-trail .dy-at small { display: block; font-size: 11px; color: var(--faint); }
.dy-trail .chip { margin-left: 4px; padding: 1px 8px; }
.dy-trail .dy-empty { display: block; color: var(--muted); }
.dy-done { font-size: 13px; }
.dy-last { font-size: 13px; background: var(--inner); border: 1px solid var(--inner-edge); border-radius: 12px; padding: 8px 12px; }
.dy-last ul { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 2px; }
.dy-form { display: grid; gap: 8px; }
.dy-lbl { font-weight: 700; font-size: 13px; margin-top: 4px; }
.dy-lbl .muted, .dy-lbl span { font-weight: 400; }
.dy-plan { display: grid; gap: 4px; }
.dy-plan label { display: flex; gap: 6px; align-items: center; font-size: 13.5px; }
.dy-plan .chip { padding: 1px 8px; font-size: 11px; }
.dy-rate { display: flex; gap: 5px; flex-wrap: wrap; }
.dy-r { position: relative; }
.dy-r input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.dy-r span { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; border: 1px solid var(--edge-strong); background: var(--panel); font: 800 14px var(--display); }
.dy-r input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
.dy-r.on span { color: #fff; border-color: transparent; }
.dy-r.on.bad span, .dy-rt.bad { background: #dc2626; color: #fff; }
.dy-r.on.warn span, .dy-rt.warn { background: #d97706; color: #fff; }
.dy-r.on.good span, .dy-rt.good { background: #16a34a; color: #fff; }
.dy-rt { display: inline-block; min-width: 26px; text-align: center; border-radius: 7px; color: #fff; font: 800 12.5px var(--display); padding: 2px 6px; }
.dy-save { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.dy-read { display: grid; grid-template-columns: max-content 1fr; gap: 6px 14px; margin: 0; font-size: 13.5px; }
.dy-read dt { color: var(--muted); }
.dy-read dd { margin: 0; }
.dy-bars { display: flex; gap: 10px; align-items: flex-end; height: 150px; }
.dy-bars a { flex: 1; display: grid; grid-template-rows: 1fr auto auto; height: 100%; text-align: center; text-decoration: none; color: var(--muted); font-size: 12px; }
.dy-bars i { align-self: end; width: 70%; justify-self: center; background: color-mix(in srgb, var(--accent) 40%, transparent); border-radius: 6px 6px 0 0; min-height: 2px; }
.dy-bars a.on i { background: var(--accent); }
.dy-bars a.off { pointer-events: none; opacity: .4; }
.dy-bars b { color: var(--text); }

/* Home: polished alignment (1.70.1). One rhythm: 20px between rows of boxes, 16px between boxes in a column, 12px between
   small tiles; every box pads 20px · 22px; every header control (more pill, count pill, fold button) is 30px / 26px tall.
   The same numbers are meant for the other pages as they get the same treatment. */
.home-page { display: grid; gap: 20px; min-width: 0; }
.home-page .page-head { padding: 4px 2px 0; }
.home-page .page-head h1 { font-size: 28px; letter-spacing: -.01em; }
.home-page .page-head p { margin-top: 2px; }
/* quick links: one row of equal tiles, one line each, New sits inside the tile */
.home-page .quick-grid { grid-template-columns: repeat(auto-fit, minmax(176px, 1fr)); gap: 12px; margin: 0; }
.home-page .quick-tile { height: 56px; padding: 0 14px; gap: 12px; border-radius: 16px; box-shadow: 0 4px 14px rgba(15,118,110,.07); font-size: 14px; }
.home-page .quick-tile > span:nth-child(2) { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.home-page .quick-ico { width: 34px; height: 34px; border-radius: 11px; font-size: 16px; }
.home-page .quick-new { position: absolute; top: 7px; right: 8px; font-size: 9.5px; padding: 0 6px; line-height: 16px; border-width: 0; }
/* every box: the same padding, the same header height */
.home-page .card { padding: 20px 22px; gap: 14px; border-radius: 22px; }
.home-page .card-h { min-height: 32px; gap: 10px; flex-wrap: nowrap; }
.home-page .card-h h3 { font-size: 16px; display: flex; align-items: center; gap: 8px; }
.home-page .card.is-folded { padding-block: 14px; }
.home-page .more { height: 30px; min-height: 30px; padding: 0 12px 0 14px; font-size: 13px; }
.home-page .fold-btn { width: 30px; height: 30px; margin-left: 2px; font-size: 15px; }
.home-page .card-h .chip { height: 26px; padding: 0 11px; }
.home-page .month-nav { gap: 8px; }
.home-page .month-nav .more[aria-label] { width: 30px; padding: 0; justify-content: center; }
/* My tasks */
.home-page .task-home { margin: 0; gap: 16px; }
.home-page .task-home-chips { gap: 8px; }
.home-page .task-home-chips .chip, .home-page .task-home-chips .btn.sm { height: 30px; padding: 0 12px; display: inline-flex; align-items: center; border-radius: 999px; font-size: 12.5px; }
.home-page .qa.qa-home { padding: 8px; border-radius: 18px; }
.home-page .qa-line { gap: 10px; flex-wrap: nowrap; }
.home-page .qa-field { height: 46px; padding: 0 12px 0 16px; }
.home-page .qa-extra { gap: 8px; flex-wrap: nowrap; }
.home-page .qa-pill { height: 38px; padding: 0 14px; }
.home-page .qa-add { height: 40px; padding: 0 18px; border-radius: 999px; }
.home-page .qa-more { padding: 0 8px; white-space: nowrap; }
.home-page .hcols { gap: 16px; align-items: stretch; }
.home-page .hcol { padding: 14px; border-radius: 18px; display: flex; flex-direction: column; gap: 8px; }
.home-page .hcol.late { background: color-mix(in srgb, var(--bad) 3%, var(--panel-2)); border-color: color-mix(in srgb, var(--bad) 22%, transparent); }
.home-page .hcol h4 { margin: 0 2px 4px; }
.home-page .hcol-t { margin: 0; min-height: 66px; padding: 10px 12px; gap: 11px; border-radius: 14px; align-items: start; }
.home-page .hcol-sub { margin-top: 6px; gap: 6px 10px; }
.home-page .hcol-sub .chip { height: 22px; padding: 0 9px; }
.home-page .hcol-more { margin-top: auto; padding: 8px 4px 0; }
.home-page .hcol-empty { margin: auto 0; padding: 24px 0; font-size: 13.5px; }
.home-page .hcol-act { margin: 0; }
/* the four numbers: same height, same gap as the boxes below */
.home-page .tiles { gap: 16px; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.home-page .tile { height: 84px; padding: 0 20px; grid-template-columns: 48px 1fr; gap: 14px; border-radius: 20px; }
.home-page .ring { width: 48px; height: 48px; }
.home-page .tv { font-size: 24px; }
.home-page .tl { margin-top: 2px; }
/* the two columns */
.home-page .home-grid { gap: 20px; }
.home-page .home-col { gap: 16px; }
.home-page .list { gap: 8px; }
.home-page .row { min-height: 56px; padding: 8px 14px; gap: 14px; }
.home-page .row .s { margin-top: 1px; }
.home-page .ico-box { width: 36px; height: 36px; }
.home-page .row .chip { height: 26px; padding: 0 11px; }
.home-page .col-group .label { display: block; font-size: 11.5px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); margin: 0 2px 2px; }
/* the month */
.home-page .month-grid { gap: 8px; }
.home-page .month-dow { padding-bottom: 2px; }
.home-page .month-grid .week-day { min-height: 70px; padding: 8px 10px; border-radius: 14px; }
.home-page .week-day h4 { font-size: 12px; }
.home-page .week-who, .home-page .week-hol { padding: 3px 8px; }
@media (max-width: 1100px) {
  .home-page .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .home-page .qa-line, .home-page .qa-extra { flex-wrap: wrap; }
  .home-page .card-h { flex-wrap: wrap; }
}

/* My tasks: polished alignment (1.70.2), the same rhythm as Home: toolbar controls 36px, filters 32px, folder chips 34px,
   task rows 52px with the name in a fixed column and status / due in fixed columns, so everything lines up row under row. */
.tasks-page { display: grid; gap: 16px; }
.tasks-page .page-head { align-items: center; padding: 4px 2px 0; }
.tasks-page .page-head h1 { font-size: 28px; letter-spacing: -.01em; }
.tasks-page .page-head > div:last-child { gap: 8px !important; }
/* the toolbar: every control 36px tall */
.tasks-page .who-seg { height: 36px; box-sizing: border-box; padding: 3px; align-items: stretch; }
.tasks-page .who-seg a { padding: 0 12px; }
.tasks-page .page-head .seg { height: 36px; box-sizing: border-box; align-items: stretch; }
.tasks-page .page-head .seg a { display: inline-flex; align-items: center; padding: 0 14px; }
.tasks-page .page-head .btn { height: 36px; box-sizing: border-box; padding: 0 14px; }
/* folders: equal chips, the "all" link as a pill */
.tasks-page .my-folders { padding: 12px 18px; gap: 8px; border-radius: 22px; }
.tasks-page .my-folders-h { margin-right: 6px; }
.tasks-page .my-folder { height: 34px; box-sizing: border-box; display: inline-flex; align-items: center; gap: 6px; padding: 0 14px; border-radius: 12px; }
.tasks-page .my-folders-all { height: 30px; display: inline-flex; align-items: center; padding: 0 12px; border-radius: 999px; border: 1px solid var(--glass-edge); background: var(--glass); text-decoration: none; font-weight: 700; color: var(--text); }
/* quick add: one line, one height */
.tasks-page .task-quick { padding: 10px 12px; border-radius: 22px; gap: 8px; }
.tasks-page .qa-line { gap: 10px; flex-wrap: nowrap; }
.tasks-page .qa-field { height: 46px; padding: 0 12px 0 16px; }
.tasks-page .qa-extra { gap: 8px; flex-wrap: nowrap; }
.tasks-page .qa-pill { height: 38px; padding: 0 14px; }
.tasks-page .qa-add { height: 40px; padding: 0 18px; border-radius: 999px; }
.tasks-page .qa-more { padding: 0 8px; white-space: nowrap; }
.tasks-page .qa-note { margin: 0 4px; }
/* filters: every control 32px */
.tasks-page .my-filter { padding: 10px 14px; gap: 8px; border-radius: 18px; }
.tasks-page .my-filter .input { height: 32px; box-sizing: border-box; padding: 0 12px; }
.tasks-page .mf-search input { border-radius: 999px; }
.tasks-page .mf-chips { gap: 6px; }
.tasks-page .mf-chip { height: 32px; box-sizing: border-box; padding: 0 12px; display: inline-flex; align-items: center; gap: 5px; }
.tasks-page .lg-by { margin-left: auto; }
/* the sections */
.tasks-page .task-sec { padding: 18px 20px; gap: 12px; border-radius: 22px; }
.tasks-page .task-sec > .card-h h3 { font-size: 16px; }
.tasks-page .task-sec .list { gap: 8px; }
/* each task: one height; titles in one column so what follows lines up underneath */
.tasks-page .task-row.qrow { min-height: 52px; box-sizing: border-box; padding: 0 16px 0 12px; border-radius: 14px; align-items: center; }
.tasks-page .task-row .q-tw { flex: 0 0 clamp(280px, 30%, 460px) !important; }
.tasks-page .task-row .task-sub { gap: 10px; }
.tasks-page .task-row .task-sub .s { min-width: 64px; flex: 0 0 auto; overflow: visible; }
.tasks-page .task-row .tagchip, .tasks-page .task-row .fchip, .tasks-page .task-row .ws-lab,
.tasks-page .task-row .q-tagbtn, .tasks-page .task-row .q-folderbtn { height: 22px; box-sizing: border-box; display: inline-flex; align-items: center; }
/* status and date in fixed columns on the right, so they line up row under row */
.tasks-page .task-meta { gap: 10px; }
.tasks-page .task-meta .q-st { min-width: 104px; height: 26px; box-sizing: border-box; justify-content: center; }
.tasks-page .task-meta .task-due { min-width: 128px; text-align: right; }
/* the two links at the end, as buttons */
.tasks-page .my-summary-btn { justify-self: start; margin: 4px 0 -8px; }
.tasks-page .my-summary-btn button, .tasks-page .my-summary-btn + p a { display: inline-flex; align-items: center; height: 32px; padding: 0 14px; border-radius: 999px;
  border: 1px solid var(--edge-strong); background: var(--panel); color: var(--text); font-weight: 700; font-size: 13px; text-decoration: none; }
.tasks-page .my-summary-btn + p { justify-self: start; margin: 0; }
@media (max-width: 1100px) {
  .tasks-page .qa-line, .tasks-page .qa-extra { flex-wrap: wrap; }
  .tasks-page .task-row .q-tw { flex: 0 1 auto !important; }
  .tasks-page .task-row .task-sub { overflow: hidden; }
  .tasks-page .task-row .tag-list { flex-wrap: nowrap; }
  .tasks-page .task-meta .q-st { min-width: 0; }
  .tasks-page .task-meta .task-due { min-width: 0; }
  .tasks-page .lg-by { margin-left: 0; }
}

/* 📊 My day: polished (1.70.3). One colour and icon per kind, the same on its number tile and its trail rows; zebra rows in
   the trail, the plan and the tables; toolbar 36px; tiles in rows of five. */
.myday-page { --k-new:#0d9488; --k-gave:#0369a1; --k-got:#4f46e5; --k-done:#16a34a; --k-step:#7c3aed; --k-ws:#b45309; --k-comment:#db2777;
  --k-chat:#64748b; --k-carry:#c2410c; --k-time:#475569; --k-edit:#64748b; --zebra: color-mix(in srgb, var(--accent) 10%, var(--panel)); }
.myday-page { display: grid; gap: 20px; min-width: 0; }
.myday-page .page-head { align-items: center; padding: 4px 2px 0; }
.myday-page .page-head h1 { font-size: 28px; letter-spacing: -.01em; }
/* toolbar: every control 36px */
.myday-page .dy-tools { gap: 8px; }
.myday-page .dy-nav .btn.sm { height: 36px; box-sizing: border-box; padding: 0 14px; }
.myday-page .dy-nav .btn.sm[title], .myday-page .dy-nav .btn.sm[aria-disabled] { width: 36px; padding: 0; justify-content: center; }
.myday-page .dy-nav b { padding: 0 8px; font-size: 15px; }
.myday-page .dy-tools .seg { height: 36px; box-sizing: border-box; align-items: stretch; }
.myday-page .dy-tools .seg a { display: inline-flex; align-items: center; padding: 0 16px; }
.myday-page .dy-tools select.input, .myday-page .dy-tools > .btn { height: 36px; box-sizing: border-box; padding: 0 14px; }
/* the note: one line, the reminder as a pill on the right */
.myday-page .dy-note { min-height: 44px; box-sizing: border-box; padding: 6px 8px 6px 16px; border-radius: 14px; margin: 0; }
.myday-page .dy-remind button { height: 30px; padding: 0 12px; border-radius: 999px; border: 1px solid currentColor; background: var(--panel); }
/* tiles: equal, each with its kind's icon and colour */
.myday-page .dy-tiles { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; margin: 0; }
@media (max-width: 1300px) { .myday-page .dy-tiles { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); } }
.myday-page .dy-t { position: relative; min-height: 96px; padding: 14px 16px 12px; border-radius: 18px; gap: 3px; border-top: 4px solid var(--kc, var(--edge)); --kc: var(--k-time); }
.myday-page .dy-t::after { content: var(--ki, "🕘"); position: absolute; top: 12px; right: 12px; width: 30px; height: 30px; border-radius: 10px; display: grid; place-items: center;
  font-size: 15px; background: color-mix(in srgb, var(--kc) 12%, transparent); }
.myday-page .dy-t b { font-size: 28px; }
.myday-page .dy-t b.dy-time { font-size: 22px; padding-top: 4px; }
.myday-page .dy-t span { padding-right: 34px; }
.myday-page .dy-t small { color: var(--kc); font-weight: 700; }
.myday-page .dy-t[data-f="new"] { --kc: var(--k-new); --ki: "＋"; }
.myday-page .dy-t[data-f="gave"] { --kc: var(--k-gave); --ki: "➡️"; }
.myday-page .dy-t[data-f="got"] { --kc: var(--k-got); --ki: "📥"; }
.myday-page .dy-t[data-f="done"] { --kc: var(--k-done); --ki: "✅"; }
.myday-page .dy-t[data-f="step"] { --kc: var(--k-step); --ki: "☑️"; }
.myday-page .dy-t[data-f="ws"] { --kc: var(--k-ws); --ki: "🧩"; }
.myday-page .dy-t[data-f="comment"] { --kc: var(--k-comment); --ki: "💬"; }
.myday-page .dy-t[data-kind="chat"] { --kc: var(--k-chat); --ki: "💭"; }
.myday-page .dy-t[data-f="carry"] { --kc: var(--k-carry); --ki: "⏳"; }
.myday-page .dy-t.on { box-shadow: 0 0 0 2px color-mix(in srgb, var(--kc) 35%, transparent); border-color: var(--kc); }
.myday-page .dy-t.warn b { color: var(--k-carry); }
/* the two columns */
.myday-page .dy-cols { gap: 20px; }
.myday-page .dy-cols > .card { padding: 20px 22px; border-radius: 22px; gap: 14px; }
.myday-page .dy-cols .card-h { min-height: 32px; }
.myday-page .dy-cols .card-h h3 { font-size: 16px; }
.myday-page [data-dy-all] { height: 30px; padding: 0 12px; }
/* the trail: zebra rows, a colour bar and icon badge per kind, times in one column */
.myday-page .dy-trail { display: grid; gap: 4px; }
.myday-page .dy-trail li { background: transparent; grid-template-columns: 64px 30px 1fr; align-items: center; gap: 10px; padding: 7px 12px 7px 10px; border: 0;
  border-left: 3px solid var(--kc, var(--edge)); border-radius: 10px; --kc: var(--k-edit); }
.myday-page .dy-trail li:nth-child(odd) { background: var(--zebra); }
.myday-page .dy-trail li > span:nth-child(2) { width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; font-size: 14px;
  background: color-mix(in srgb, var(--kc) 12%, transparent); }
.myday-page .dy-trail .dy-at { font-weight: 800; color: var(--text); font-size: 13px; }
.myday-page .dy-trail .dy-at small { font-weight: 600; }
.myday-page .dy-trail a { color: var(--text); font-weight: 700; text-decoration: none; border-bottom: 1px solid color-mix(in srgb, var(--kc) 45%, transparent); }
.myday-page .dy-trail a:hover { color: var(--kc); }
.myday-page .dy-trail li[data-k="new"] { --kc: var(--k-new); }
.myday-page .dy-trail li[data-k="gave"] { --kc: var(--k-gave); }
.myday-page .dy-trail li[data-k="got"] { --kc: var(--k-got); }
.myday-page .dy-trail li[data-k="done"] { --kc: var(--k-done); }
.myday-page .dy-trail li[data-k="step"] { --kc: var(--k-step); }
.myday-page .dy-trail li[data-k="ws"] { --kc: var(--k-ws); }
.myday-page .dy-trail li[data-k="comment"] { --kc: var(--k-comment); }
.myday-page .dy-trail li[data-k="chat"] { --kc: var(--k-chat); }
.myday-page .dy-trail li[data-k="carry"] { --kc: var(--k-carry); }
.myday-page .dy-trail li[data-k="in"], .myday-page .dy-trail li[data-k="out"] { --kc: var(--k-time); }
.myday-page .dy-trail li.dy-empty { border-left-color: transparent; }
/* how did today go: clear sub-sections */
.myday-page .dy-ev .dy-done { padding: 10px 14px; border-radius: 14px; background: color-mix(in srgb, var(--k-done) 7%, var(--panel));
  border: 1px solid color-mix(in srgb, var(--k-done) 22%, transparent); line-height: 1.8; }
.myday-page .dy-ev .dy-done a { color: var(--text); font-weight: 700; text-decoration: none; }
.myday-page .dy-form { gap: 10px; }
.myday-page .dy-lbl { display: block; margin: 8px 0 0; padding-top: 12px; border-top: 1px solid var(--edge); font-size: 14px; }
.myday-page .dy-form > .dy-lbl:first-of-type { border-top: 0; padding-top: 0; margin-top: 4px; }
.myday-page .dy-form textarea.input, .myday-page .dy-form input.input { border-radius: 12px; }
.myday-page .dy-form input.input { height: 40px; box-sizing: border-box; }
.myday-page .dy-plan { gap: 2px; }
.myday-page .dy-plan label { min-height: 38px; padding: 0 10px; border-radius: 10px; gap: 10px; }
.myday-page .dy-plan label:nth-child(odd) { background: var(--zebra); }
.myday-page .dy-plan label input { width: 17px; height: 17px; accent-color: var(--accent); flex: none; }
.myday-page .dy-plan .chip { margin-left: auto; min-width: 96px; justify-content: center; height: 22px; box-sizing: border-box; }
.myday-page .dy-rate { gap: 6px; }
.myday-page .dy-r span { width: 40px; height: 40px; border-radius: 12px; }
.myday-page .dy-save { margin-top: 6px; padding-top: 14px; border-top: 1px solid var(--edge); }
.myday-page .dy-save .btn { height: 40px; padding: 0 22px; }
/* week and my people tables: zebra rows, numbers centred, names bold */
.myday-page .table-wrap table tbody tr:nth-child(odd) td { background: var(--zebra); }
.myday-page .table-wrap table td, .myday-page .table-wrap table th { padding: 11px 14px; }
.myday-page .table-wrap table td:not(:first-child), .myday-page .table-wrap table th:not(:first-child) { text-align: center; }
.myday-page .table-wrap table td:last-child, .myday-page .table-wrap table th:last-child { text-align: left; }
.myday-page .table-wrap table td:first-child { font-weight: 700; }
.myday-page .table-wrap table td:first-child a { color: var(--text); text-decoration: none; }
.myday-page .table-wrap table td:first-child a:hover { color: var(--accent); }
.myday-page .table-wrap table tbody tr:hover td { background: color-mix(in srgb, var(--accent) 10%, var(--panel)); }
.myday-page .dy-bars { height: 170px; gap: 14px; }
.myday-page .dy-bars i { border-radius: 8px 8px 0 0; }

/* Workstreams (list, overview, a workstream): polished (1.70.4). Toolbars 36px, filters 32px, zebra rows in the list, the
   tables and the timeline, equal tiles and cards. */
.ws-page { --zebra: color-mix(in srgb, var(--accent) 10%, var(--panel)); }
.ws-page { display: grid; gap: 20px; min-width: 0; }
.ws-page .page-head { align-items: center; padding: 4px 2px 0; }
.ws-page .page-head h1, .ws-page .ws-title h1 { font-size: 28px; letter-spacing: -.01em; }
/* toolbars: every control 36px, 8px apart */
.ws-page .page-head > div:last-child, .ws-page .page-head > nav ~ * { gap: 8px; }
.ws-page .page-head .who-seg { height: 36px; box-sizing: border-box; align-items: stretch; }
.ws-page .page-head .who-seg a, .ws-page .page-head .who-seg button { display: inline-flex; align-items: center; padding: 0 12px; }
.ws-page .page-head .btn, .ws-page .page-head select.input { height: 36px; box-sizing: border-box; padding: 0 14px; }
.ws-page .back { height: 34px; box-sizing: border-box; }
/* due chips */
.ws-page .ws-due.mf-chips { gap: 6px; margin: 0; }
.ws-page .mf-chip { height: 32px; box-sizing: border-box; padding: 0 12px; display: inline-flex; align-items: center; gap: 5px; }
/* the list: zebra rows, one height, columns lined up */
.ws-page .ws-list { gap: 6px; }
.ws-page .ws-node .ws-row { min-height: 64px; box-sizing: border-box; padding: 10px 18px 10px 12px; border-radius: 14px; gap: 18px;
  grid-template-columns: 26px 36px minmax(0, 1.6fr) minmax(0, 1fr) 220px minmax(0, 150px); }
.ws-page .ws-node:nth-child(odd) .ws-row { background: var(--zebra); }
.ws-page .ws-node:nth-child(even) .ws-row { background: var(--panel); }
.ws-page .ws-row-t b, .ws-page .ws-row-t { font-size: 15px; font-weight: 700; }
.ws-page .ws-row-lead { line-height: 1.45; }
.ws-page .ws-row-prog { gap: 6px; }
.ws-page .ws-row-prog .ws-bar.sm { height: 8px; }
/* overview: equal number tiles, cards and zebra rows */
.ws-page .tiles { gap: 16px; grid-template-columns: repeat(5, minmax(0, 1fr)); }
.ws-page .tile { height: 84px; padding: 0 20px; grid-template-columns: 48px 1fr; gap: 14px; border-radius: 20px; }
.ws-page .ring { width: 48px; height: 48px; }
.ws-page .tv { font-size: 24px; }
.ws-page .ov-grid { gap: 20px; margin: 0; align-items: stretch; }
.ws-page .card { padding: 20px 22px; border-radius: 22px; gap: 14px; }
.ws-page .card-h { min-height: 32px; }
.ws-page .card-h h3 { font-size: 16px; }
.ws-page .ov-att, .ws-page .ov-date { min-height: 56px; box-sizing: border-box; padding: 8px 14px; border: 0; border-radius: 12px; }
.ws-page .ov-att:nth-child(odd), .ws-page .ov-date:nth-child(odd) { background: var(--zebra); }
.ws-page .ov-att .chip, .ws-page .ov-date .chip { height: 26px; box-sizing: border-box; }
/* tables (overview and a workstream's tasks): zebra rows, roomy cells, numbers centred */
.ws-page .table-wrap table tbody tr:nth-child(odd) > td { background: var(--zebra); }
.ws-page .table-wrap table tbody tr:hover > td { background: color-mix(in srgb, var(--accent) 16%, var(--panel)); }
.ws-page .table-wrap table td, .ws-page .table-wrap table th { padding: 11px 14px; }
.ws-page .ov-table td:nth-child(n+4), .ws-page .ov-table th:nth-child(n+4) { text-align: center; }
.ws-page .ov-table td:last-child, .ws-page .ov-table th:last-child { text-align: right; }
.ws-page .ov-prog { min-width: 160px; gap: 4px; }
.ws-page .ws-table tr.qrow > td { height: 52px; box-sizing: border-box; }
.ws-page .ws-table .q-st { min-width: 104px; height: 26px; box-sizing: border-box; justify-content: center; }
.ws-page .ws-table .tagchip, .ws-page .ws-table .fchip { height: 22px; box-sizing: border-box; display: inline-flex; align-items: center; }
/* a workstream: head, actions, the tasks card */
.ws-page .ws-crumb { margin-bottom: -4px; }
.ws-page .ws-head { align-items: center; gap: 14px 24px; margin: 0; }
.ws-page .ws-title .ws-ic { width: 44px; height: 44px; }
.ws-page .ws-facts { margin-top: 10px; }
.ws-page .ws-head-side { min-width: 360px; gap: 10px; }
.ws-page .ws-prog .ws-bar { height: 10px; }
.ws-page .ws-actions { gap: 8px; }
.ws-page .ws-actions .btn, .ws-page .ws-actions summary.btn { height: 34px; box-sizing: border-box; padding: 0 14px; display: inline-flex; align-items: center; }
.ws-page .ws-grid { gap: 20px; margin-top: 0; }
.ws-page .ws-col { gap: 20px; }
.ws-page .card-h .seg { height: 34px; box-sizing: border-box; align-items: stretch; }
.ws-page .card-h .seg a, .ws-page .card-h .seg button { display: inline-flex; align-items: center; padding: 0 14px; }
.ws-page .my-filter.in-card { padding: 10px 14px; gap: 8px; border-radius: 16px; }
.ws-page .my-filter .input { height: 32px; box-sizing: border-box; padding: 0 12px; }
.ws-page .ws-fold > summary { min-height: 44px; box-sizing: border-box; display: flex; align-items: center; }
.ws-page .ws-add { padding: 8px 10px; gap: 8px; border-radius: 16px; }
.ws-page .ws-add .input, .ws-page .ws-add .pp-input, .ws-page .ws-add select.input { height: 40px; box-sizing: border-box; }
.ws-page .ws-add .btn { height: 40px; padding: 0 20px; }
/* the timeline: zebra rows, the line kept */
.ws-page .ws-note textarea { border-radius: 14px; }
.ws-page .ws-note .btn { height: 36px; padding: 0 18px; }
.ws-page .ws-tl { gap: 4px; }
.ws-page .ws-tl-i { padding: 9px 12px; border-radius: 12px; align-items: center; }
.ws-page .ws-tl-i:nth-child(odd) { background: var(--zebra); }
.ws-page .ws-tl-i::before { left: 23px; top: 36px; bottom: -8px; }
.ws-page .ws-tl-dot { width: 26px; height: 26px; }
/* key dates, documents, people: same height, rows striped */
.ws-page .ws-grid.wide > .ws-col:last-child { align-items: stretch; gap: 20px; }
.ws-page .ws-docsec { padding: 8px 12px; border-radius: 12px; }
.ws-page .ws-docsec:nth-of-type(odd) { background: var(--zebra); }
.ws-page .ws-upload { gap: 8px; align-items: center; }
.ws-page .ws-upload .input, .ws-page .ws-upload select, .ws-page .ws-upload .btn { height: 36px; box-sizing: border-box; }
.ws-page .ws-member { min-height: 40px; padding: 4px 10px; border-radius: 10px; }
.ws-page .ws-member:nth-of-type(odd) { background: var(--zebra); }
@media (max-width: 1100px) {
  .ws-page .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ws-page .ws-node .ws-row { grid-template-columns: 26px 36px minmax(0, 1fr) minmax(0, 1fr) 150px; }
  .ws-page .ws-row-date { display: none; }
  .ws-page .ws-head-side { min-width: 0; }
}

/* Attendance (my month, office now, register, edit punches, missed check-outs, month close, import): polished (1.70.5).
   Toolbars 36px, tiles 84px, zebra rows in every list and table, chips lined up. */
.att-page { --zebra: color-mix(in srgb, var(--accent) 10%, var(--panel)); }
.att-page { display: grid; gap: 20px; min-width: 0; }
/* title and toolbar: every control 36px, 8px apart */
.att-page .page-head { align-items: center; padding: 4px 2px 0; gap: 12px; }
.att-page .page-head h1 { font-size: 28px; letter-spacing: -.01em; }
.att-page .page-head > div:last-child { gap: 8px !important; }
.att-page .page-head .btn, .att-page .page-head select.input { height: 36px; box-sizing: border-box; padding: 0 14px; }
.att-page .page-head .seg { height: 36px; box-sizing: border-box; align-items: stretch; }
.att-page .page-head .seg a { display: inline-flex; align-items: center; padding: 0 14px; }
.att-page .back { height: 34px; box-sizing: border-box; }
.att-page .card { padding: 20px 22px; border-radius: 22px; gap: 14px; }
.att-page .card-h { min-height: 32px; }
.att-page .card-h h3 { font-size: 16px; }
.att-page .grid { gap: 20px; align-items: stretch; }
/* number tiles: equal, 84px */
.att-page .tiles { gap: 16px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.att-page .tile { height: 84px; box-sizing: border-box; padding: 0 22px; gap: 14px; border-radius: 20px; }
.att-page .tile:not(:has(.ring)) { grid-template-columns: 1fr; align-content: center; }
.att-page .ring { width: 48px; height: 48px; }
.att-page .tv { font-size: 24px; }
/* my month: even day boxes, holidays and days off shaded */
.att-page .cal { gap: 8px; }
.att-page .cal .dow { padding-bottom: 2px; }
.att-page .cal .day { min-height: 96px; padding: 10px 12px; border-radius: 14px; gap: 6px; }
.att-page .cal .day .dn { font-size: 16px; }
.att-page .cal .day .in { font-size: 12px; color: var(--text); }
.att-page .cal .day .chip { height: 22px; box-sizing: border-box; padding: 0 9px; font-size: 11px; display: inline-flex; align-items: center; }
.att-page .cal .day:has(.chip.c-gold) { background: color-mix(in srgb, var(--gold) 10%, var(--panel)); }
.att-page .cal .day:has(.chip.c-slate):not(.future) { background: color-mix(in srgb, var(--slate) 7%, var(--panel)); }
.att-page ul.small.muted { list-style: none; padding: 0; margin: 0; display: grid; gap: 4px; font-size: 13.5px; }
.att-page ul.small.muted li { padding: 9px 12px; border-radius: 10px; line-height: 1.5; }
.att-page ul.small.muted li:nth-child(odd) { background: var(--zebra); }
/* office now: equal number tiles, search, team cards with zebra rows */
.att-page .board-tiles { gap: 12px; }
.att-page .board-tile { height: 84px; box-sizing: border-box; align-content: center; border-radius: 18px; }
.att-page .board-tile b { font-size: 28px; }
.att-page .board-search { padding: 12px 14px; border-radius: 18px; gap: 10px; }
.att-page .board-search .input { height: 42px; box-sizing: border-box; border-radius: 999px; padding: 0 16px; }
.att-page .board-search .btn { height: 42px; padding: 0 22px; }
.att-page .board-grid { gap: 20px; align-items: stretch; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); }
.att-page .board-grid .list { gap: 4px; }
.att-page .board-grid .row { min-height: 56px; box-sizing: border-box; padding: 8px 14px; border: 0; border-radius: 12px; background: transparent; }
.att-page .board-grid .board-cell:nth-child(odd) .row { background: var(--zebra); }
.att-page .board-grid .row .chip { min-width: 88px; height: 26px; box-sizing: border-box; justify-content: center; }
.att-page .board-grid .card-h .chip { height: 26px; box-sizing: border-box; }
/* tables (register, edit punches, missed check-outs): zebra rows */
.att-page .table-wrap table tbody tr:nth-child(odd) > td { background: var(--zebra); }
.att-page .table-wrap table tbody tr:hover > td { background: color-mix(in srgb, var(--accent) 16%, var(--panel)); }
.att-page .table-wrap table td:first-child a { color: var(--text); font-weight: 700; text-decoration: none; }
.att-page .table-wrap table td:first-child a:hover { color: var(--accent); }
/* register: even day cells */
.att-page .reg td, .att-page .reg th { padding: 6px 4px; }
.att-page .reg td:first-child, .att-page .reg th:first-child { padding-left: 12px; padding-right: 14px; }
.att-page .reg .s { min-width: 30px; height: 22px; box-sizing: border-box; display: inline-grid; place-items: center; border-radius: 7px; }
.att-page .reg td.num { font-weight: 700; }
/* edit punches */
.att-page .pgrid td, .att-page .pgrid th { padding: 11px 14px; }
.att-page .pgrid td { height: 48px; box-sizing: border-box; }
.att-page .pgrid .chip { min-width: 104px; height: 26px; box-sizing: border-box; justify-content: center; }
.att-page .pgrid .more { height: 30px; }
/* missed check-outs */
.att-page .table-wrap table:not(.reg) td, .att-page .table-wrap table:not(.reg) th { padding: 11px 14px; }
.att-page .table-wrap table:not(.reg):not(.pgrid) td .chip { min-width: 48px; height: 26px; box-sizing: border-box; justify-content: center; }
/* forms and lists (month close, import) */
.att-page .field .input, .att-page .card > form .input, .att-page .card input.input { height: 42px; box-sizing: border-box; }
.att-page .card .btn { height: 40px; padding: 0 20px; }
.att-page .alert { border-radius: 12px; padding: 10px 14px; }
.att-page .list { gap: 4px; }
.att-page .card > .list > .row { min-height: 56px; box-sizing: border-box; padding: 8px 14px; border: 0; border-radius: 12px; }
.att-page .card > .list > .row:nth-child(odd) { background: var(--zebra); }
.att-page .card > .list > .row:nth-child(even) { background: transparent; }
@media (max-width: 1100px) {
  .att-page .board-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .att-page .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* 🌙 Plan tomorrow (computer and phone) */
.pt { display: grid; gap: 12px; --zebra: color-mix(in srgb, var(--accent) 10%, var(--panel)); }
.pt-h { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.pt-h h2 { margin: 0; font-size: 21px; }
.pt-cnt { color: var(--muted); font-size: 13.5px; }
.pt-seg { margin-left: auto; display: inline-flex; border: 1px solid var(--edge-strong); border-radius: 999px; overflow: hidden; height: 36px; }
.pt-seg button { border: 0; background: var(--panel); padding: 0 14px; font: 700 13px var(--body); color: var(--muted); cursor: pointer; }
.pt-seg button.on { background: var(--accent); color: var(--on-accent); }
.pt-note { margin: 0; padding: 8px 12px; border-radius: 12px; background: var(--accent-soft); font-size: 13.5px; }
.pt-list { display: grid; gap: 3px; outline: none; max-height: 62vh; overflow: auto; border-radius: 12px; }
.pt-grp { font: 800 11px var(--body); letter-spacing: .08em; text-transform: uppercase; color: var(--faint); padding: 10px 12px 2px; }
.pt-row { display: grid; grid-template-columns: 26px 22px minmax(0, 1fr) auto auto; gap: 10px; align-items: center; min-height: 46px; padding: 0 12px;
  border-radius: 12px; border: 2px solid transparent; cursor: pointer; user-select: none; }
.pt-row:nth-child(odd of .pt-row) { background: var(--zebra); }
.pt-row:hover { border-color: var(--edge-strong); }
.pt-list:focus-visible .pt-row.cur { border-color: var(--accent); }
.pt-n { font: 800 13px ui-monospace, Consolas, monospace; color: var(--accent); text-align: right; }
.pt-box { width: 20px; height: 20px; border-radius: 6px; border: 2px solid var(--edge-strong); display: grid; place-items: center; background: var(--panel);
  color: #fff; font-size: 12px; font-weight: 900; }
.pt-row.on .pt-box { background: var(--accent); border-color: var(--accent); }
.pt-t { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 600; }
.pt-row.on .pt-t { font-weight: 800; }
.pt-st { font-size: 11px; }
.pt-why { font-size: 12px; font-weight: 700; padding: 3px 10px; border-radius: 999px; white-space: nowrap; min-width: 112px; text-align: center; }
.pt-why.late { background: color-mix(in srgb, var(--bad) 13%, var(--panel)); color: var(--bad); }
.pt-why.today { background: color-mix(in srgb, var(--warn) 15%, var(--panel)); color: var(--warn); }
.pt-why.tom { background: color-mix(in srgb, var(--info) 13%, var(--panel)); color: var(--info); }
.pt-why.later { background: var(--inner); color: var(--muted); }
.pt-why.none { color: var(--faint); border: 1px dashed var(--edge); }
.pt-why.chg { background: color-mix(in srgb, var(--vio) 12%, var(--panel)); color: var(--vio); min-width: 0; }
.pt-nudge { margin: 0; padding: 8px 12px; border-radius: 12px; background: color-mix(in srgb, var(--warn) 12%, var(--panel)); color: var(--warn); font-size: 13.5px; }
.pt-add { display: flex; align-items: center; gap: 10px; height: 44px; padding: 0 14px; border: 1.5px dashed var(--edge-strong); border-radius: 12px; color: var(--accent); font-weight: 900; }
.pt-add input { flex: 1; min-width: 0; border: 0; background: none; font: inherit; font-weight: 600; color: var(--text); outline: none; }
.pt-foot { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.pt-foot .btn { height: 40px; padding: 0 20px; }
.pt-keys kbd { font: 11px ui-monospace, Consolas, monospace; border: 1px solid var(--edge-strong); border-radius: 5px; padding: 0 5px; background: var(--panel); }
.pt-done { margin: 0; padding: 8px 12px; border-radius: 12px; background: color-mix(in srgb, var(--good) 12%, var(--panel)); color: var(--good); font-weight: 700; font-size: 13.5px; }
.pt-done.bad { background: color-mix(in srgb, var(--bad) 12%, var(--panel)); color: var(--bad); }
@media (max-width: 700px) {
  .pt-seg { margin-left: 0; width: 100%; } .pt-seg button { flex: 1; padding: 0 6px; font-size: 12px; }
  .pt-row { grid-template-columns: 22px 20px minmax(0, 1fr) auto; padding: 6px 8px; } .pt-row > :nth-child(4) { display: none; } .pt-why { min-width: 0; }
  .pt-keys { display: none; } .pt-list { max-height: none; }
}
.m-plan { padding: 14px 12px; } .m-plan .pt-h h2 { font-size: 18px; }
/* ☀ Today's plan: the Home card and the phone sheet */
.plan-card { background: linear-gradient(135deg, color-mix(in srgb, var(--gold) 9%, var(--panel)), var(--panel)); border-color: color-mix(in srgb, var(--gold) 35%, transparent); }
.plan-rows { display: grid; gap: 3px; }
.plan-row { display: grid; grid-template-columns: 22px 24px minmax(0, 1fr) auto; gap: 10px; align-items: center; min-height: 44px; padding: 0 12px; border-radius: 12px; }
.plan-row:nth-child(odd) { background: color-mix(in srgb, var(--accent) 8%, var(--panel)); }
.plan-n { font: 800 12.5px ui-monospace, Consolas, monospace; color: var(--accent); text-align: right; }
.plan-box { width: 22px; height: 22px; border-radius: 7px; border: 2px solid var(--edge-strong); background: var(--panel); color: #fff; font-weight: 900; font-size: 12px; cursor: pointer; padding: 0; }
.plan-box:hover { border-color: var(--good); }
.plan-row.done .plan-box { background: var(--good); border-color: var(--good); }
.plan-row.done .plan-t { text-decoration: line-through; color: var(--faint); }
.plan-t { color: var(--text); text-decoration: none; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.plan-t:hover { color: var(--accent); }
.m-plan-next { display: block; text-align: center; font-weight: 800; color: var(--accent); text-decoration: none; padding: 6px; }
.paper-plan h3 { color: var(--gold) !important; display: flex; align-items: baseline; gap: 6px; }
.nl-planlink { margin-left: auto; font-size: 12px; letter-spacing: 0; text-transform: none; color: var(--accent); text-decoration: none; font-family: var(--body); }

/* Tasks area (a task, Team views, My activity, Tags, Entities, New task): polished (1.72.1). Toolbars 36px, filters 40px,
   inputs 42px, zebra rows in tables, steps, comments, history and lists. */
.tka-page { --zebra: color-mix(in srgb, var(--accent) 10%, var(--panel)); }
.tka-page { display: grid; gap: 20px; min-width: 0; }
.tka-page .page-head { align-items: flex-end; padding: 4px 2px 0; gap: 12px; }
.tka-page .page-head h1 { font-size: 28px; letter-spacing: -.01em; }
.tka-page .page-head .btn, .tka-page .page-head select.input { height: 36px; box-sizing: border-box; padding: 0 14px; }
.tka-page .back { height: 34px; box-sizing: border-box; }
.tka-page .card { padding: 20px 22px; border-radius: 22px; gap: 14px; }
.tka-page .card-h { min-height: 32px; }
.tka-page .card-h h3, .tka-page .card > h3 { font-size: 16px; }
.tka-page .card-h .btn.sm { height: 30px; box-sizing: border-box; padding: 0 12px; }
/* ---- a task's page ---- */
.tka-page .task-head-chips { gap: 8px; }
.tka-page .task-head-chips .chip { height: 30px; box-sizing: border-box; padding: 0 14px; font-size: 13px; }
.tka-page .task-meta-bar { min-height: 52px; padding: 8px 14px; gap: 10px 14px; border-radius: 16px; margin: 0; }
.tka-page .task-meta-bar .btn.sm, .tka-page .task-meta-bar summary.btn, .tka-page .folder-chip { height: 32px; box-sizing: border-box; display: inline-flex; align-items: center; }
.tka-page .task-meta-bar .tagchip { height: 26px; box-sizing: border-box; padding: 0 10px; }
.tka-page .task-grid { gap: 20px; grid-template-columns: minmax(0, 1fr) 340px; }
.tka-page .task-main, .tka-page .task-side { gap: 20px; }
.tka-page .rich-editor { border-radius: 14px; }
.tka-page .task-desc .btn, .tka-page .task-status .btn, .tka-page .task-admin .btn { height: 34px; box-sizing: border-box; padding: 0 16px; }
.tka-page .alert { border-radius: 12px; padding: 10px 14px; }
.tka-page .task-steps { display: grid; gap: 3px; }
.tka-page .task-step { min-height: 44px; box-sizing: border-box; padding: 6px 12px; border: 0; border-radius: 12px; }
.tka-page .task-steps > .task-step:nth-child(odd), .tka-page .steps-done > .task-step:nth-child(even) { background: var(--zebra); }
.tka-page .task-steps > .task-step:nth-child(even), .tka-page .steps-done > .task-step:nth-child(odd) { background: transparent; }
.tka-page .steps-done > summary { min-height: 36px; display: flex; align-items: center; }
.tka-page .task-inline .input { height: 42px; box-sizing: border-box; border-radius: 12px; }
.tka-page .task-inline .btn { height: 42px; padding: 0 20px; }
.tka-page .task-comment { padding: 12px 14px; border: 0; border-radius: 14px; gap: 12px; grid-template-columns: 34px minmax(0, 1fr); }
.tka-page .task-comment:nth-of-type(odd) { background: var(--zebra); }
.tka-page .task-comment .avatar.sm { width: 32px; height: 32px; }
.tka-page .task-comment-text { font-size: 14.5px; margin-top: 6px; }
.tka-page .task-new-comment textarea { border-radius: 14px; min-height: 84px; }
.tka-page .task-new-comment .btn { height: 38px; padding: 0 22px; }
.tka-page .task-side .kv { grid-template-columns: 96px minmax(0, 1fr); gap: 0; font-size: 13.5px; }
.tka-page .task-side .kv > * { padding: 8px 10px; margin: 0; }
.tka-page .task-side .kv > dt:nth-of-type(odd), .tka-page .task-side .kv > dt:nth-of-type(odd) + dd { background: var(--zebra); }
.tka-page .task-side .kv > dt { border-radius: 10px 0 0 10px; color: var(--muted); font-weight: 700; }
.tka-page .task-side .kv > dd { border-radius: 0 10px 10px 0; }
.tka-page .task-inline .file-sm { height: 36px; }
.tka-page .task-watcher { min-height: 38px; padding: 0 10px; border-radius: 10px; display: flex; align-items: center; gap: 8px; }
.tka-page .task-watcher:nth-of-type(odd) { background: var(--zebra); }
.tka-page .task-history { gap: 4px; max-height: 420px; }
.tka-page .task-history > div { padding: 8px 10px; border-radius: 10px; }
.tka-page .task-history > div:nth-child(odd) { background: var(--zebra); }
/* ---- Team views: folder tree, tabs, filters, add bar ---- */
.tka-page .views-layout { gap: 20px; grid-template-columns: 250px minmax(0, 1fr); }
.tka-page .views-main { display: grid; gap: 16px; }
.tka-page .folder-tree { padding: 12px; border-radius: 20px; }
.tka-page .ft-item, .tka-page .ft-node { min-height: 34px; box-sizing: border-box; }
.tka-page .ft-cnt { min-width: 34px; text-align: right; }
.tka-page .view-tabs { height: 40px; box-sizing: border-box; padding: 3px; gap: 3px; align-items: stretch; border-radius: 14px; }
.tka-page .view-tabs a { display: inline-flex; align-items: center; gap: 6px; padding: 0 16px; border-radius: 11px; }
.tka-page .task-filters { padding: 14px 18px; gap: 12px; border-radius: 20px; align-items: end; }
.tka-page .task-filters .input, .tka-page .task-filters .pp-input { height: 40px; box-sizing: border-box; }
.tka-page .task-filters .btn, .tka-page .task-filters summary.btn { height: 40px; box-sizing: border-box; padding: 0 16px; display: inline-flex; align-items: center; }
.tka-page .add-bar { padding: 10px 14px; gap: 10px; border-radius: 18px; flex-wrap: nowrap; }
.tka-page .add-bar .input { height: 42px; box-sizing: border-box; }
.tka-page .add-bar .btn { height: 42px; padding: 0 20px; white-space: nowrap; }
.tka-page .add-plus { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 10px; }
/* the table */
.tka-page .gb-bar { margin-bottom: 4px; }
.tka-page .table-wrap table tbody tr.qrow:nth-child(odd of tr.qrow) > td { background: var(--zebra); }
.tka-page .table-wrap table tbody tr.qrow:nth-child(even of tr.qrow) > td { background: var(--panel); }
.tka-page .table-wrap table tbody tr.qrow:hover > td { background: color-mix(in srgb, var(--accent) 16%, var(--panel)); }
.tka-page .table-wrap table tbody tr:not(.qrow):not(.gb-group) > td { background: var(--panel); }
.tka-page .table-wrap table tbody tr:nth-child(odd):not(.gb-group) > td:only-child { background: var(--zebra); }
.tka-page .table-wrap td, .tka-page .table-wrap th { padding: 11px 14px; }
.tka-page tr.qrow > td { height: 52px; box-sizing: border-box; }
.tka-page tr.gb-group > td { padding: 10px 14px; background: color-mix(in srgb, var(--accent) 5%, var(--panel-2)); font-weight: 800; }
.tka-page .st-select { min-width: 112px; height: 28px; box-sizing: border-box; white-space: nowrap; }
.tka-page .q-table .tagchip, .tka-page .q-table .fchip, .tka-page .table-wrap .tagchip, .tka-page .table-wrap .fchip { height: 22px; box-sizing: border-box; display: inline-flex; align-items: center; }
/* the board */
.tka-page .task-board { gap: 14px; }
.tka-page .task-col { padding: 12px; border-radius: 18px; gap: 8px; }
.tka-page .task-col h4 { min-height: 28px; display: flex; align-items: center; gap: 6px; margin: 0 2px; }
.tka-page .task-card { border-radius: 14px; padding: 12px 14px; gap: 6px; min-height: 96px; align-content: start; }
/* calendar */
.tka-page .cal { border-radius: 16px; }
.tka-page .cal-dh { padding: 10px 10px; text-align: center; }
.tka-page .cal-day { min-height: 118px; padding: 6px 7px; gap: 4px; }
.tka-page .cal-dn { font-size: 13px; padding: 1px 7px; }
.tka-page .cal-ev { padding: 3px 7px; font-size: 12px; border-radius: 7px; }
/* timeline */
.tka-page .tl-wrap { border-radius: 16px; }
.tka-page .tl-row { min-height: 36px; }
.tka-page .tl > .tl-row:not(.tl-head):nth-child(even) .tl-name, .tka-page .tl > .tl-row:not(.tl-head):nth-child(even) .tl-track { background-color: color-mix(in srgb, var(--accent) 6%, transparent); }
.tka-page .tl-name { padding: 8px 12px; }
.tka-page .tl-bar { top: 7px; height: 22px; border-radius: 7px; }
/* chart */
.tka-page .kpi-row { gap: 16px; }
.tka-page .kpi { height: 84px; box-sizing: border-box; padding: 14px 18px; border-radius: 18px; display: grid; align-content: center; }
.tka-page .hbars { display: grid; gap: 4px; }
.tka-page .hb { min-height: 40px; padding: 0 10px; border-radius: 10px; }
.tka-page .hb:nth-child(odd) { background: var(--zebra); }
.tka-page .hb-track { height: 22px; border-radius: 7px; }
/* ---- My activity ---- */
.tka-page .act-tools { padding: 14px 18px; gap: 10px; border-radius: 20px; }
.tka-page .act-chip { height: 32px; box-sizing: border-box; display: inline-flex; align-items: center; padding: 0 13px; }
.tka-page .act-tools .input, .tka-page .act-tools .btn { height: 32px; box-sizing: border-box; }
.tka-page .act-sum { gap: 8px; }
.tka-page .act-sum .p { height: 28px; box-sizing: border-box; display: inline-flex; align-items: center; padding: 0 11px; }
.tka-page .act-list { padding: 8px; gap: 4px; display: grid; }
.tka-page .act-item { border: 0 !important; border-radius: 12px; padding: 12px 16px; }
.tka-page .act-item:nth-child(odd) { background: var(--zebra); }
.tka-page .act-day-h { padding: 6px 4px 2px; }
.tka-page .act-quote { border-radius: 10px; }
/* ---- Tags ---- */
.tka-page .tag-row, .tka-page .look-row { min-height: 56px; box-sizing: border-box; padding: 8px 12px; border: 0 !important; border-radius: 12px; }
.tka-page .tag-row:nth-child(odd of .tag-row), .tka-page .look-row:nth-child(odd of .look-row) { background: var(--zebra); }
.tka-page .tag-row .btn, .tka-page .tag-row summary.btn, .tka-page .tag-row .st-preview { height: 32px; box-sizing: border-box; padding: 0 14px; display: inline-flex; align-items: center; }
.tka-page .tag-row > .tagchip, .tka-page .tag-row > .st-preview { min-width: 120px; justify-content: center; }
.tka-page .tag-row > .tagchip + .small { min-width: 64px; }
/* ---- Entities and New task: forms ---- */
.tka-page .field input.input, .tka-page .field select.input, .tka-page .field .pp-input, .tka-page form.card input.input:not([type=file]), .tka-page form.card select.input { height: 42px; box-sizing: border-box; }
.tka-page form.card textarea.input { min-height: 120px; }
.tka-page .field > label { margin-bottom: 2px; }
.tka-page form.card { gap: 16px; }
.tka-page form.card .btn { height: 40px; padding: 0 22px; }
.tka-page form.card textarea.input { border-radius: 14px; }
@media (max-width: 1100px) {
  .tka-page .task-grid { grid-template-columns: 1fr; }
  .tka-page .views-layout { grid-template-columns: 1fr; }
  .tka-page .add-bar { flex-wrap: wrap; }
  .tka-page .kpi-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Approvals and Requests: polished (1.72.2). A colour per request type (bar and badge), zebra rows, 40px actions. */
.apr-page { --zebra: color-mix(in srgb, var(--accent) 10%, var(--panel));
  --k-leave: #0d9488; --k-half_day: #b45309; --k-permission: #0369a1; --k-wfh: #4f46e5; --k-on_duty: #4f46e5; --k-late_ok: #64748b;
  --k-profile_change: #7c3aed; --k-pay_query: #db2777; --k-device: #475569; --k-punch_fix: #c2410c; --k-claim: #a16207; --k-loan: #a16207; --k-outstation: #4f46e5; --k-trade: #0f766e; --k-task_review: #7c3aed; --k-other: #64748b; }
.apr-page [data-k], .apr-page[data-k] { --kc: var(--k-other); }
.apr-page [data-k="leave"], .apr-page[data-k="leave"] { --kc: var(--k-leave); } .apr-page [data-k="half_day"], .apr-page[data-k="half_day"] { --kc: var(--k-half_day); }
.apr-page [data-k="permission"], .apr-page[data-k="permission"] { --kc: var(--k-permission); } .apr-page [data-k="wfh"], .apr-page[data-k="wfh"], .apr-page [data-k="on_duty"], .apr-page[data-k="on_duty"] { --kc: var(--k-wfh); }
.apr-page [data-k="profile_change"], .apr-page[data-k="profile_change"] { --kc: var(--k-profile_change); } .apr-page [data-k="pay_query"], .apr-page[data-k="pay_query"] { --kc: var(--k-pay_query); }
.apr-page [data-k="device"], .apr-page[data-k="device"] { --kc: var(--k-device); } .apr-page [data-k="punch_fix"], .apr-page[data-k="punch_fix"] { --kc: var(--k-punch_fix); }
.apr-page [data-k="claim"], .apr-page[data-k="claim"], .apr-page [data-k="loan"], .apr-page[data-k="loan"] { --kc: var(--k-claim); }
.apr-page { display: grid; gap: 20px; min-width: 0; }
.apr-page .page-head { align-items: flex-end; padding: 4px 2px 0; gap: 12px; }
.apr-page .page-head h1 { font-size: 28px; letter-spacing: -.01em; }
.apr-page .page-head .btn { height: 36px; box-sizing: border-box; padding: 0 14px; }
.apr-page .page-head > .chip { height: 30px; box-sizing: border-box; padding: 0 14px; font-size: 13px; }
/* ---- Approvals: one card per request ---- */
.apr-page > .list { gap: 14px; }
.apr-page .apr-card { padding: 18px 22px 18px 20px; border-radius: 20px; gap: 12px; border-left: 5px solid var(--kc); }
.apr-page .card[data-k] .card-h b { font-size: 16px; }
.apr-page .kbadge { display: inline-flex; align-items: center; height: 22px; padding: 0 9px; border-radius: 999px; background: var(--kc); color: #fff;
  font: 800 10.5px var(--body); letter-spacing: .04em; text-transform: uppercase; margin-right: 6px; vertical-align: 2px; }
.apr-page .card[data-k] .avatar { width: 40px !important; height: 40px !important; }
.apr-page .card[data-k] .chip { height: 26px; box-sizing: border-box; padding: 0 11px; }
.apr-page .card[data-k] form { align-items: flex-end !important; gap: 10px !important; flex-wrap: nowrap !important; }
.apr-page .card[data-k] form .input { height: 40px; box-sizing: border-box; border-radius: 12px; }
.apr-page .card[data-k] form .btn { height: 40px; min-width: 108px; padding: 0 18px; justify-content: center; }
.apr-page .card[data-k] form .btn.danger { background: color-mix(in srgb, var(--bad) 8%, var(--panel)); }
/* decided recently */
.apr-page .decided { margin-top: 6px; gap: 12px; }
.apr-page .chip-btn { height: 32px; box-sizing: border-box; display: inline-flex; align-items: center; padding: 0 13px; }
.apr-page .decided-list { padding: 8px; gap: 3px; display: grid; }
.apr-page .decided-day { background: none; padding: 10px 10px 4px; }
.apr-page .decided-row { min-height: 56px; box-sizing: border-box; border: 0 !important; border-radius: 12px; padding: 8px 14px; border-left: 4px solid var(--kc) !important; }
.apr-page .decided-row:nth-child(odd of .decided-row) { background: var(--zebra); }
.apr-page .decided-right .chip { min-width: 96px; height: 26px; box-sizing: border-box; justify-content: center; }
.apr-page .decided-right .tnum { min-width: 92px; text-align: right; }
/* ---- a request's page ---- */
.apr-page .grid.g2 { gap: 20px; }
.apr-page .grid.g2 > .card { padding: 20px 22px; border-radius: 22px; gap: 14px; }
.apr-page .kv { gap: 0 !important; }
.apr-page .kv > dt, .apr-page .kv > dd { padding: 9px 12px; margin: 0; }
.apr-page .kv > dt:nth-of-type(odd), .apr-page .kv > dt:nth-of-type(odd) + dd { background: var(--zebra); }
.apr-page .kv > dt { border-radius: 10px 0 0 10px; color: var(--muted); font-weight: 700; }
.apr-page .kv > dd { border-radius: 0 10px 10px 0; }
.apr-page .grid.g2 .list { gap: 4px; }
.apr-page .grid.g2 .list > .row { min-height: 56px; box-sizing: border-box; border: 0; padding: 8px 14px; }
.apr-page .grid.g2 .list > .row:nth-child(odd) { background: var(--zebra); }
.apr-page .grid.g2 .list > .row:nth-child(even) { background: transparent; }
.apr-page .grid.g2 .row .chip { min-width: 96px; height: 26px; box-sizing: border-box; justify-content: center; }
.apr-page .grid.g2 .input { height: 40px; box-sizing: border-box; border-radius: 12px; }
.apr-page .grid.g2 .btn { height: 40px; min-width: 108px; padding: 0 18px; justify-content: center; }
/* ---- My requests ---- */
.apr-page .table-wrap table tbody tr:nth-child(odd) > td { background: var(--zebra); }
.apr-page .table-wrap table tbody tr:hover > td { background: color-mix(in srgb, var(--accent) 16%, var(--panel)); }
.apr-page .table-wrap td, .apr-page .table-wrap th { padding: 0 16px; height: 52px; }
.apr-page .table-wrap th { height: 44px; }
.apr-page .table-wrap td a { color: var(--text); font-weight: 700; text-decoration: none; }
.apr-page .table-wrap td a:hover { color: var(--accent); }
.apr-page .table-wrap tr[data-k] > td:first-child { border-left: 4px solid var(--kc); }
.apr-page .table-wrap td .chip { min-width: 96px; height: 26px; box-sizing: border-box; justify-content: center; }
.apr-page .ktype { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; color: var(--kc); }
.apr-page [data-k="outstation"], .apr-page[data-k="outstation"] { --kc: var(--k-outstation); }
.apr-page [data-k="trade"], .apr-page[data-k="trade"] { --kc: var(--k-trade); }
.apr-page [data-k="task_review"], .apr-page[data-k="task_review"] { --kc: var(--k-task_review); }
.apr-page h1 .kbadge { vertical-align: 6px; margin: 0 0 0 4px; }
@media (max-width: 1100px) { .apr-page .apr-card form { flex-wrap: wrap !important; } .apr-page .apr-card form .field { flex-basis: 100% !important; } }

/* People (list, org chart, an employee's tabs, My details, My profile): polished (1.72.3). Zebra rows, 40px filters,
   46px detail rows with Edit at the row's end, chips lined up. */
.ppl-page { --zebra: color-mix(in srgb, var(--accent) 10%, var(--panel)); }
.ppl-page { display: grid; gap: 20px; min-width: 0; }
.ppl-page .page-head { align-items: flex-end; padding: 4px 2px 0; gap: 12px; }
.ppl-page .page-head h1 { font-size: 28px; letter-spacing: -.01em; }
.ppl-page .page-head .btn { height: 36px; box-sizing: border-box; padding: 0 14px; }
.ppl-page .back { height: 34px; box-sizing: border-box; }
.ppl-page .card { padding: 20px 22px; border-radius: 22px; gap: 14px; }
.ppl-page .card-h { min-height: 32px; }
.ppl-page .card h3, .ppl-page .card-h h3 { font-size: 16px; }
/* list: filter bar and table */
.ppl-page form.card:has(> .field) { flex-direction: row; align-items: end; gap: 12px; padding: 14px 18px; }
.ppl-page form.card .input { height: 40px; box-sizing: border-box; }
.ppl-page form.card .btn { height: 40px; padding: 0 20px; }
.ppl-page .table-wrap table tbody tr:not(.gb-group):nth-child(odd) > td { background: var(--zebra); }
.ppl-page .table-wrap table tbody tr:not(.gb-group):hover > td { background: color-mix(in srgb, var(--accent) 16%, var(--panel)); }
.ppl-page .table-wrap td, .ppl-page .table-wrap th { padding: 0 14px; height: 52px; }
.ppl-page .table-wrap th { height: 44px; }
.ppl-page .table-wrap td .avatar { width: 32px; height: 32px; }
.ppl-page .table-wrap td a { color: var(--text); font-weight: 700; text-decoration: none; }
.ppl-page .table-wrap td a:hover { color: var(--accent); }
.ppl-page .table-wrap td .chip { height: 24px; box-sizing: border-box; }
.ppl-page .table-wrap td .chip:first-child { min-width: 96px; justify-content: center; }
/* stage colours, the same everywhere: probation amber, confirmed green, internship blue, notice red */
.ppl-page .chip.c-warn { background: color-mix(in srgb, #d97706 14%, var(--panel)); }
/* org chart: zebra rows, the tree lines kept by indentation */
.ppl-page .card > .list { gap: 3px; }
.ppl-page .card > .list > .row { min-height: 56px; box-sizing: border-box; border: 0; padding: 8px 14px; border-radius: 12px; }
.ppl-page .card > .list > .row:nth-child(odd) { background: var(--zebra); }
.ppl-page .card > .list > .row:nth-child(even) { background: transparent; }
.ppl-page .card > .list > .row a.t { color: var(--text); font-weight: 800; text-decoration: none; }
.ppl-page .card > .list > .row a.t:hover { color: var(--accent); }
.ppl-page .card > .list > .row .chip { min-width: 84px; height: 26px; box-sizing: border-box; justify-content: center; }
/* an employee: the header card and the tabs */
.ppl-page > .card:first-of-type { padding: 18px 22px; }
.ppl-page > .card:first-of-type .avatar { width: 56px !important; height: 56px !important; font-size: 20px !important; }
.ppl-page > .card:first-of-type .chip { height: 26px; box-sizing: border-box; padding: 0 11px; }
.ppl-page > .card:first-of-type .btn { height: 38px; padding: 0 18px; }
.ppl-page .tabs { gap: 6px; padding-bottom: 14px; }
.ppl-page .tab { height: 34px; box-sizing: border-box; padding: 0 15px; }
/* the details lists (Overview, Personal, Bank & IDs) */
.ppl-page dl.kv { grid-template-columns: 200px minmax(0, 1fr); gap: 0 !important; }
.ppl-page dl.kv > dt, .ppl-page dl.kv > dd { padding: 0 14px; margin: 0; min-height: 46px; display: flex; align-items: center; }
.ppl-page dl.kv > dt:nth-of-type(odd), .ppl-page dl.kv > dt:nth-of-type(odd) + dd { background: var(--zebra); }
.ppl-page dl.kv > dt { border-radius: 10px 0 0 10px; color: var(--muted); font-weight: 700; }
.ppl-page dl.kv > dd { border-radius: 0 10px 10px 0; gap: 8px; flex-wrap: wrap; }
.ppl-page .kv-act, .ppl-page dl.kv summary.btn.sm { height: 28px; box-sizing: border-box; padding: 0 12px; margin-left: auto; display: inline-flex; align-items: center; }
/* history: zebra rows, the date chip in one column */
.ppl-page .card .list > .row .chip { min-width: 84px; justify-content: center; }
/* lifecycle: two equal cards */
.ppl-page .grid.g2 { gap: 20px; align-items: stretch; }
.ppl-page .card.flat { padding: 18px 20px; border-radius: 18px; gap: 12px; }
.ppl-page .card.flat .btn { height: 38px; padding: 0 18px; }
/* My profile: tiles, cards, switches */
.ppl-page .tiles { gap: 16px; }
.ppl-page .tile { height: 84px; box-sizing: border-box; padding: 0 22px; border-radius: 20px; }
.ppl-page .switch { min-height: 46px; box-sizing: border-box; border: 0; border-radius: 12px; }
.ppl-page .grid.g2 > .switch:nth-child(4n+1), .ppl-page .grid.g2 > .switch:nth-child(4n+2) { background: var(--zebra); }
.ppl-page .grid.g2 > .switch:nth-child(4n+3), .ppl-page .grid.g2 > .switch:nth-child(4n) { background: transparent; }
.ppl-page .page-head > div:last-child .btn, .ppl-page .page-head > .btn { height: 36px; }
/* My details */
.ppl-page .md-group { padding: 18px 22px; gap: 6px; }
.ppl-page .md-f { min-height: 54px; padding: 6px 12px; border-radius: 12px; border-bottom: 0 !important; }
.ppl-page .md-group .md-f:nth-of-type(odd) { background: var(--zebra); }
.ppl-page .md-in { height: 40px; box-sizing: border-box; border-radius: 12px; }
.ppl-page .md-chg { height: 30px; box-sizing: border-box; padding: 0 12px; display: inline-flex; align-items: center; }
.ppl-page .md-bar { border-radius: 18px; padding: 10px 14px; }
.ppl-page .md-bar .btn { height: 40px; padding: 0 24px; }
@media (max-width: 1100px) {
  .ppl-page dl.kv { grid-template-columns: 140px minmax(0, 1fr); }
  .ppl-page form.card:has(> .field) { flex-wrap: wrap; }
}

/* Leave and Holidays: polished (1.72.4). Request-type colours as in Approvals, zebra rows, 42px form boxes, waiting tags. */
.lv-page { --zebra: color-mix(in srgb, var(--accent) 10%, var(--panel));
  --k-leave: #0d9488; --k-half_day: #b45309; --k-permission: #0369a1; --k-wfh: #4f46e5; --k-on_duty: #4f46e5; --k-late_ok: #64748b; }
.lv-page [data-k] { --kc: var(--k-leave); }
.lv-page [data-k="half_day"] { --kc: var(--k-half_day); } .lv-page [data-k="permission"] { --kc: var(--k-permission); }
.lv-page [data-k="wfh"], .lv-page [data-k="on_duty"] { --kc: var(--k-wfh); } .lv-page [data-k="late_ok"] { --kc: var(--k-late_ok); }
.lv-page { display: grid; gap: 20px; min-width: 0; }
.lv-page .page-head { align-items: flex-end; padding: 4px 2px 0; gap: 12px; }
.lv-page .page-head h1 { font-size: 28px; letter-spacing: -.01em; }
.lv-page .page-head .btn, .lv-page .page-head select.input, .lv-page .page-head .seg { height: 36px; box-sizing: border-box; }
.lv-page .page-head .btn, .lv-page .page-head select.input { padding: 0 14px; }
.lv-page .page-head .seg a { display: inline-flex; align-items: center; padding: 0 14px; }
.lv-page .card { padding: 20px 22px; border-radius: 22px; gap: 14px; }
.lv-page .card h3 { font-size: 16px; }
.lv-page .grid.g2 { gap: 20px; }
/* the two numbers */
.lv-page .tiles { gap: 20px; }
.lv-page .tile { height: 84px; box-sizing: border-box; padding: 0 22px; border-radius: 20px; }
.lv-page .tv { font-size: 26px; }
/* the request form: every box one height */
.lv-page form.card .input { height: 42px; box-sizing: border-box; border-radius: 12px; }
.lv-page form.card .grid.g2 { gap: 14px 16px; }
.lv-page form.card .btn { height: 40px; padding: 0 22px; justify-self: start; }
.lv-page form.card .note { padding: 10px 14px; border-radius: 12px; background: var(--zebra); }
/* lists: who's off, requests, holidays */
.lv-page .card .list { gap: 4px; }
.lv-page .card .list > .row { min-height: 52px; box-sizing: border-box; padding: 6px 14px; border: 0; border-radius: 12px; }
.lv-page .card .list > .row:nth-child(odd) { background: var(--zebra); }
.lv-page .card .list > .row:nth-child(even) { background: transparent; }
.lv-page .card .list > .row[data-k] { border-left: 4px solid var(--kc); }
.lv-page .card .list > .row .chip { min-width: 96px; height: 26px; box-sizing: border-box; justify-content: center; }
.lv-page .card .list > .row[data-k] > .chip:first-child { background: color-mix(in srgb, var(--kc) 12%, var(--panel)); color: var(--kc); border-color: color-mix(in srgb, var(--kc) 45%, transparent); }
.lv-page .card .list > a.row .t { font-weight: 700; }
.lv-page .wait-tag { display: inline-flex; align-items: center; height: 20px; padding: 0 8px; margin-left: 6px; border-radius: 999px; font-size: 11px; font-weight: 800;
  color: var(--info); background: color-mix(in srgb, var(--info) 12%, var(--panel)); }
/* balance history */
.lv-page .table-wrap table tbody tr:not(.gb-group):nth-child(odd) > td { background: var(--zebra); }
.lv-page .table-wrap td, .lv-page .table-wrap th { padding: 0 16px; height: 46px; }
.lv-page .table-wrap th { height: 40px; }
.lv-page .table-wrap td.num { font-weight: 800; font-variant-numeric: tabular-nums; }
.lv-page .gb-bar .input { height: 32px; }

/* Payroll, Claims and Loans: polished (1.72.5). 36px toolbars, 42px form boxes, zebra money tables with amounts lined up, totals on a band. */
.pay-page { --zebra: color-mix(in srgb, var(--accent) 10%, var(--panel)); }
.pay-page { display: grid; gap: 20px; min-width: 0; }
.pay-page .page-head { align-items: flex-end; padding: 4px 2px 0; gap: 12px; }
.pay-page .page-head h1 { font-size: 28px; letter-spacing: -.01em; }
.pay-page .page-head .btn, .pay-page .page-head select.input { height: 36px; box-sizing: border-box; padding: 0 14px; white-space: nowrap; }
.pay-page .page-head select.input { min-width: 190px; }
.pay-page .page-head > div:last-child { gap: 8px !important; }
.pay-page .page-head > div > .chip, .pay-page .page-head p .chip { height: 26px; box-sizing: border-box; }
.pay-page .back { height: 34px; box-sizing: border-box; }
.pay-page .card { padding: 20px 22px; border-radius: 22px; gap: 14px; }
.pay-page .card h3, .pay-page .card-h h3 { font-size: 16px; }
.pay-page .grid.g2, .pay-page .grid { gap: 20px; align-items: stretch; }
/* numbers at the top */
.pay-page .tiles { gap: 16px; }
.pay-page .tile { height: 84px; box-sizing: border-box; padding: 0 22px; border-radius: 20px; }
.pay-page .tv { font-size: 24px; font-variant-numeric: tabular-nums; }
/* forms */
.pay-page .card input.input:not([type=checkbox]):not([type=file]), .pay-page .card select.input { height: 42px; box-sizing: border-box; border-radius: 12px; }
.pay-page .card .btn:not(.sm) { height: 40px; padding: 0 22px; }
.pay-page .card .btn.sm { height: 34px; padding: 0 16px; }
.pay-page .note, .pay-page p.alert, .pay-page .alert { border-radius: 12px; }
.pay-page .card > .note { padding: 10px 14px; background: var(--zebra); }
/* lists */
.pay-page .card .list { gap: 4px; }
.pay-page .card .list > .row, .pay-page .card .list > a.row { min-height: 56px; box-sizing: border-box; padding: 6px 14px; border: 0; border-radius: 12px; }
.pay-page .card .list > .row:nth-child(odd), .pay-page .card .list > a.row:nth-child(odd) { background: var(--zebra); }
.pay-page .card .list > .row:nth-child(even), .pay-page .card .list > a.row:nth-child(even) { background: transparent; }
.pay-page .card .list > .row .chip, .pay-page .card .list > a.row .chip { min-width: 96px; height: 26px; box-sizing: border-box; justify-content: center; }
.pay-page .card .list .row .num { font-variant-numeric: tabular-nums; font-weight: 800; }
/* salaries: the person picker */
.pay-page .role-btn { min-height: 52px; box-sizing: border-box; border: 0 !important; border-radius: 12px; }
.pay-page .card .list > .role-btn:nth-child(odd) { background: var(--zebra); }
/* tables: zebra, money right-aligned and lined up, totals bold on a band */
.pay-page .table-wrap table tbody tr:not(.gb-group):not(.total):nth-child(odd) > td { background: var(--zebra); }
.pay-page .table-wrap table tbody tr:not(.gb-group):not(.total):hover > td { background: color-mix(in srgb, var(--accent) 16%, var(--panel)); }
.pay-page .table-wrap td, .pay-page .table-wrap th { padding: 0 12px; height: 48px; }
.pay-page .table-wrap th { height: 42px; }
.pay-page .table-wrap td.num, .pay-page .table-wrap th.num { font-variant-numeric: tabular-nums; text-align: right; }
.pay-page .table-wrap td a { color: var(--text); font-weight: 700; text-decoration: none; }
.pay-page .table-wrap td a:hover { color: var(--accent); }
.pay-page .table-wrap td .chip { height: 24px; box-sizing: border-box; }
.pay-page .table-wrap td > .chip:first-child { min-width: 104px; justify-content: center; }
.pay-page .table-wrap tfoot td, .pay-page .table-wrap tr.total td { background: color-mix(in srgb, var(--accent) 7%, var(--panel-2)) !important; font-weight: 800; height: 50px; }
.pay-page .table-wrap td .btn.sm, .pay-page .table-wrap td summary.btn, .pay-page .table-wrap td .op-pill { height: 28px; box-sizing: border-box; }
/* working-out tables (payslip, run) */
.pay-page table.working tr > td { padding: 8px 12px; }
.pay-page table.working tr:nth-child(odd):not(.total) > td { background: var(--zebra); }
.pay-page table.working td.num { font-variant-numeric: tabular-nums; }
/* my salary */
.pay-page .query-item { border-radius: 14px; padding: 12px 14px; }
.pay-page .kv > * { padding: 7px 12px; margin: 0; }
.pay-page .kv > :nth-child(4n+1), .pay-page .kv > :nth-child(4n+2) { background: var(--zebra); }
@media (max-width: 1100px) { .pay-page .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* News and Policies: polished (1.72.6). Zebra rows, 42px form boxes, read / not-yet-read dots on who has read it. */
.nws-page { --zebra: color-mix(in srgb, var(--accent) 10%, var(--panel)); }
.nws-page { display: grid; gap: 20px; min-width: 0; }
.nws-page .page-head { align-items: flex-end; padding: 4px 2px 0; gap: 12px; }
.nws-page .page-head h1 { font-size: 28px; letter-spacing: -.01em; }
.nws-page .page-head .btn { height: 36px; box-sizing: border-box; padding: 0 14px; }
.nws-page .back { height: 34px; box-sizing: border-box; }
.nws-page .card { padding: 20px 22px; border-radius: 22px; gap: 14px; }
.nws-page .card h3, .nws-page .card-h h3 { font-size: 16px; }
.nws-page .grid.g2 { gap: 20px; align-items: stretch; }
/* For you */
.nws-page .card .list { gap: 4px; }
.nws-page .card .list > .row, .nws-page .card .list > a.row { min-height: 60px; box-sizing: border-box; padding: 8px 14px; border: 0; border-radius: 12px; }
.nws-page .card .list > .row:nth-child(odd), .nws-page .card .list > a.row:nth-child(odd) { background: var(--zebra); }
.nws-page .card .list > .row:nth-child(even), .nws-page .card .list > a.row:nth-child(even) { background: transparent; }
.nws-page .card .list a.row .t { font-weight: 800; }
.nws-page .card .list .chip { min-width: 104px; height: 26px; box-sizing: border-box; justify-content: center; }
/* forms */
.nws-page form.card input.input:not([type=file]):not([type=checkbox]), .nws-page form.card > .field > select.input { height: 42px; box-sizing: border-box; border-radius: 12px; }
.nws-page form.card textarea.input { border-radius: 14px; min-height: 140px; }
.nws-page form.card select[multiple] { border-radius: 12px; min-height: 110px; }
.nws-page form.card .btn { height: 40px; padding: 0 24px; justify-self: start; }
/* tables (sent, who has read it) */
.nws-page .table-wrap table tbody tr:nth-child(odd) > td { background: var(--zebra); }
.nws-page .table-wrap table tbody tr:hover > td { background: color-mix(in srgb, var(--accent) 16%, var(--panel)); }
.nws-page .table-wrap td, .nws-page .table-wrap th { padding: 0 14px; height: 46px; }
.nws-page .table-wrap th { height: 40px; }
.nws-page .table-wrap td a { color: var(--text); font-weight: 700; text-decoration: none; }
.nws-page .table-wrap td a:hover { color: var(--accent); }
.nws-page .table-wrap td.num, .nws-page .table-wrap th.num { text-align: center; font-variant-numeric: tabular-nums; }
.nws-page tr.not-read > td:first-child::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--warn); margin-right: 8px; vertical-align: 1px; }
.nws-page tr.has-read > td:first-child::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--good); margin-right: 8px; vertical-align: 1px; }
.nws-page tr.not-read > td { color: var(--muted); }
/* the message itself */
.nws-page > .card:first-of-type:not(:has(.list)) { font-size: 15px; line-height: 1.7; padding: 24px 28px; }

/* ☀ Today's plan on Home: the 📝 Today notepad's yellow paper (1.72.7); dark mode uses the panel, like the notepad */
.plan-card { --rule: color-mix(in srgb, var(--accent) 14%, transparent);
  background: color-mix(in srgb, #fff8e1 70%, var(--panel)); border: 1px solid var(--edge-strong); box-shadow: var(--shadow); }
.plan-card .card-h h3 { font-family: var(--display); font-size: 19px; }
.plan-card .plan-rows { gap: 0; }
.plan-card .plan-row { background: transparent !important; border-radius: 0; min-height: 42px; padding: 0 6px; border-bottom: 1px solid var(--rule); grid-template-columns: 22px 26px minmax(0, 1fr) auto; }
.plan-card .plan-row:last-child { border-bottom: 0; }
.plan-card .plan-n { color: var(--faint); font-weight: 700; }
.plan-card .plan-box { width: 20px; height: 20px; border-radius: 5px; }
.plan-card .plan-t { font-weight: 600; font-size: 15.5px; }
.plan-card .more { background: var(--panel); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .plan-card { background: var(--panel); } }
:root[data-theme="dark"] .plan-card { background: var(--panel); }

/* 🌙 Lamp-lit paper (1.72.8): in dark mode the 📝 Today notepad and Home's ☀ Today's plan keep a warm amber notepad look */
:root[data-theme="dark"] .plan-card, :root[data-theme="dark"] .paper {
  --rule: color-mix(in srgb, #f5b041 18%, transparent);
  background: color-mix(in srgb, #f5b041 12%, var(--panel)) !important;
  border-color: color-mix(in srgb, #f5b041 32%, transparent) !important; }
:root[data-theme="dark"] .plan-card .card-h h3, :root[data-theme="dark"] .paper-day h2, :root[data-theme="dark"] .paper-sec h3 { color: #f5c26b; }
:root[data-theme="dark"] .plan-card .plan-box, :root[data-theme="dark"] .paper .nl-box { border-color: color-mix(in srgb, #f5b041 55%, transparent); background: transparent; }
:root[data-theme="dark"] .plan-card .plan-row.done .plan-box, :root[data-theme="dark"] .paper .nl.done .nl-box { background: var(--good); border-color: var(--good); }
:root[data-theme="dark"] .paper-write { background: color-mix(in srgb, #f5b041 5%, var(--panel)); border-color: color-mix(in srgb, #f5b041 35%, transparent); }
:root[data-theme="dark"] .plan-card .plan-n { color: color-mix(in srgb, #f5b041 70%, var(--muted)); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .plan-card, :root:not([data-theme="light"]) .paper {
  --rule: color-mix(in srgb, #f5b041 18%, transparent);
  background: color-mix(in srgb, #f5b041 12%, var(--panel)) !important;
  border-color: color-mix(in srgb, #f5b041 32%, transparent) !important; }
  :root:not([data-theme="light"]) .plan-card .card-h h3, :root:not([data-theme="light"]) .paper-day h2, :root:not([data-theme="light"]) .paper-sec h3 { color: #f5c26b; }
  :root:not([data-theme="light"]) .plan-card .plan-box, :root:not([data-theme="light"]) .paper .nl-box { border-color: color-mix(in srgb, #f5b041 55%, transparent); background: transparent; }
  :root:not([data-theme="light"]) .plan-card .plan-row.done .plan-box, :root:not([data-theme="light"]) .paper .nl.done .nl-box { background: var(--good); border-color: var(--good); }
  :root:not([data-theme="light"]) .paper-write { background: color-mix(in srgb, #f5b041 5%, var(--panel)); border-color: color-mix(in srgb, #f5b041 35%, transparent); }
  :root:not([data-theme="light"]) .plan-card .plan-n { color: color-mix(in srgb, #f5b041 70%, var(--muted)); }
}

/* Notifications and What's new: polished (1.72.9). Day headings, unread tinted with a blue bar and dot, All / Unread, zebra releases. */
.nf-page { --zebra: color-mix(in srgb, var(--accent) 10%, var(--panel)); }
.nf-page { display: grid; gap: 20px; min-width: 0; }
.nf-page .page-head { align-items: flex-end; padding: 4px 2px 0; gap: 12px; }
.nf-page .page-head h1 { font-size: 28px; letter-spacing: -.01em; }
.nf-page .page-head .btn { height: 36px; box-sizing: border-box; padding: 0 16px; }
.nf-page .nf-tools { display: flex; gap: 8px; align-items: center; }
.nf-page .nf-chip { text-decoration: none; height: 32px; box-sizing: border-box; padding: 0 14px; border-radius: 999px; border: 1px solid var(--edge-strong); background: var(--panel);
  font: 700 13px var(--body); color: var(--muted); cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.nf-page .nf-chip.on { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.nf-page .nf-chip b { background: var(--bad); color: #fff; border-radius: 999px; padding: 0 7px; font-size: 11px; }
.nf-page .nf-chip.on b { background: #fff; color: var(--accent); }
.nf-page .nf-list { gap: 3px; background: var(--glass); border: 1px solid var(--glass-edge); border-radius: 22px; padding: 10px 12px 14px; box-shadow: var(--shadow); }
.nf-page .nf-day { display: block; font: 800 11.5px var(--body); letter-spacing: .07em; text-transform: uppercase; color: var(--muted); padding: 12px 10px 4px; }
.nf-page .nf-list > .row { min-height: 58px; box-sizing: border-box; border: 0 !important; border-left: 4px solid transparent !important; border-radius: 12px;
  padding: 8px 16px 8px 12px; grid-template-columns: 22px minmax(0, 1fr) 150px; background: transparent; }
.nf-page .nf-list > .row:nth-child(odd of .row.is-read) { background: var(--zebra); }
.nf-page .nf-list > .row.is-unread { background: color-mix(in srgb, var(--info) 9%, var(--panel)); border-left-color: var(--info) !important; }
.nf-page .nf-dot { width: 10px; height: 10px; }
.nf-page .nf-list > .row.is-unread .nf-dot { border-radius: 50%; background: var(--info); }
.nf-page .nf-list > .row .t a { color: var(--text); text-decoration: none; font-weight: 700; }
.nf-page .nf-list > .row.is-unread .t a { font-weight: 800; }
.nf-page .nf-list > .row.is-read .t a { font-weight: 600; color: var(--muted); }
.nf-page .nf-list > .row .t a:hover { color: var(--accent); text-decoration: underline; }
.nf-page .nf-time { text-align: right; font-variant-numeric: tabular-nums; }
.nf-page .nf-list > .row.hide-r { display: none; }
.nf-page .wn-filters { gap: 8px; }
.nf-page .wn-filters .input { height: 36px; box-sizing: border-box; border-radius: 999px; padding: 0 16px; min-width: 260px; }
.nf-page .wn-filters .tab { height: 32px; box-sizing: border-box; padding: 0 15px; }
.nf-page #wn-list { padding: 12px 14px; gap: 4px; }
.nf-page .wn-release { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 4px 18px; padding: 14px 16px; border-radius: 14px; border: 0 !important; margin: 0; }
.nf-page .wn-release:nth-child(odd) { background: var(--zebra); }
.nf-page .wn-release:first-child { background: color-mix(in srgb, var(--accent) 16%, var(--panel)); box-shadow: inset 4px 0 0 var(--accent); }
.nf-page .wn-when { display: grid; align-content: start; gap: 2px; }
.nf-page .wn-when b { font-size: 16px; }
.nf-page .wn-release ul { margin: 0; padding: 0; display: grid; gap: 8px; }
.nf-page .wn-release li { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 12px; align-items: start; line-height: 1.55; }
.nf-page .wn-k { min-width: 84px; height: 22px; box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; }

/* KRAs and Reports: polished (1.73.0). Zebra lists and tables, even form boxes, weight chips and counts lined up. */
.kr-page { --zebra: color-mix(in srgb, var(--accent) 10%, var(--panel)); }
.kr-page { display: grid; gap: 20px; min-width: 0; }
.kr-page .page-head { align-items: flex-end; padding: 4px 2px 0; gap: 12px; }
.kr-page .page-head h1 { font-size: 28px; letter-spacing: -.01em; }
.kr-page .page-head .btn, .kr-page .page-head select.input { height: 36px; box-sizing: border-box; padding: 0 14px; white-space: nowrap; }
.kr-page .page-head select.input { min-width: 190px; }
.kr-page .page-head > div:last-child { gap: 8px !important; }
.kr-page .page-head > div > .chip, .kr-page .page-head p .chip { height: 26px; box-sizing: border-box; }
.kr-page .back { height: 34px; box-sizing: border-box; }
.kr-page .card { padding: 20px 22px; border-radius: 22px; gap: 14px; }
.kr-page .card h3, .kr-page .card-h h3 { font-size: 16px; }
.kr-page .grid.g2, .kr-page .grid { gap: 20px; align-items: stretch; }
/* numbers at the top */
.kr-page .tiles { gap: 16px; }
.kr-page .tile { height: 84px; box-sizing: border-box; padding: 0 22px; border-radius: 20px; }
.kr-page .tv { font-size: 24px; font-variant-numeric: tabular-nums; }
/* forms */
.kr-page .card input.input:not([type=checkbox]):not([type=file]), .kr-page .card select.input { height: 42px; box-sizing: border-box; border-radius: 12px; }
.kr-page .card .btn:not(.sm) { height: 40px; padding: 0 22px; }
.kr-page .card .btn.sm { height: 34px; padding: 0 16px; }
.kr-page .note, .kr-page p.alert, .kr-page .alert { border-radius: 12px; }
.kr-page .card > .note { padding: 10px 14px; background: var(--zebra); }
/* lists */
.kr-page .card .list { gap: 4px; }
.kr-page .card .list > .row, .kr-page .card .list > a.row { min-height: 56px; box-sizing: border-box; padding: 6px 14px; border: 0; border-radius: 12px; }
.kr-page .card .list > .row:nth-child(odd), .kr-page .card .list > a.row:nth-child(odd) { background: var(--zebra); }
.kr-page .card .list > .row:nth-child(even), .kr-page .card .list > a.row:nth-child(even) { background: transparent; }
.kr-page .card .list > .row .chip, .kr-page .card .list > a.row .chip { min-width: 96px; height: 26px; box-sizing: border-box; justify-content: center; }
.kr-page .card .list .row .num { font-variant-numeric: tabular-nums; font-weight: 800; }
/* salaries: the person picker */
.kr-page .role-btn { min-height: 52px; box-sizing: border-box; border: 0 !important; border-radius: 12px; }
.kr-page .card .list > .role-btn:nth-child(odd) { background: var(--zebra); }
/* tables: zebra, money right-aligned and lined up, totals bold on a band */
.kr-page .table-wrap table tbody tr:not(.gb-group):not(.total):nth-child(odd) > td { background: var(--zebra); }
.kr-page .table-wrap table tbody tr:not(.gb-group):not(.total):hover > td { background: color-mix(in srgb, var(--accent) 16%, var(--panel)); }
.kr-page .table-wrap td, .kr-page .table-wrap th { padding: 0 12px; height: 48px; }
.kr-page .table-wrap th { height: 42px; }
.kr-page .table-wrap td.num, .kr-page .table-wrap th.num { font-variant-numeric: tabular-nums; text-align: right; }
.kr-page .table-wrap td a { color: var(--text); font-weight: 700; text-decoration: none; }
.kr-page .table-wrap td a:hover { color: var(--accent); }
.kr-page .table-wrap td .chip { height: 24px; box-sizing: border-box; }
.kr-page .table-wrap td > .chip:first-child { min-width: 104px; justify-content: center; }
.kr-page .table-wrap tfoot td, .kr-page .table-wrap tr.total td { background: color-mix(in srgb, var(--accent) 7%, var(--panel-2)) !important; font-weight: 800; height: 50px; }
.kr-page .table-wrap td .btn.sm, .kr-page .table-wrap td summary.btn, .kr-page .table-wrap td .op-pill { height: 28px; box-sizing: border-box; }
/* working-out tables (payslip, run) */
.kr-page table.working tr > td { padding: 8px 12px; }
.kr-page table.working tr:nth-child(odd):not(.total) > td { background: var(--zebra); }
.kr-page table.working td.num { font-variant-numeric: tabular-nums; }
/* my salary */
.kr-page .query-item { border-radius: 14px; padding: 12px 14px; }
.kr-page .kv > * { padding: 7px 12px; margin: 0; }
.kr-page .kv > :nth-child(4n+1), .kr-page .kv > :nth-child(4n+2) { background: var(--zebra); }
/* KRAs and Reports extras */
.kr-page .roles .role-btn, .kr-page .card .list > a.role-btn { min-height: 46px; box-sizing: border-box; padding: 6px 14px; border: 0 !important; border-radius: 12px; display: flex; align-items: center; }
.kr-page .card .list > a.role-btn:nth-child(odd) { background: var(--zebra); }
.kr-page .card .list > a.role-btn[aria-current="page"], .kr-page .card .list > a.role-btn.on { background: var(--accent) !important; color: var(--on-accent); }
.kr-page .card .list > .row > .chip.c-teal:first-child { min-width: 64px; }
.kr-page .card .list > .row .btn.sm { height: 30px; padding: 0 14px; }
.kr-page .table-wrap td select.input, .kr-page .table-wrap td input.input { height: 38px; box-sizing: border-box; border-radius: 10px; }
.kr-page .table-wrap td:has(select) { padding-top: 8px; padding-bottom: 8px; height: auto; }
.kr-page .card .list > .row .bar { height: 10px; border-radius: 999px; }
.kr-page .card .list > .row b.num { min-width: 56px; text-align: right; font-variant-numeric: tabular-nums; }
.kr-page .card .list > .row:has(.bar) { min-height: 52px; }
@media (max-width: 1100px) { .kr-page .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ===== Trading & Admin, polished (1.73.1): the same rhythm as the other polished screens ===== */
.adm-page { --zebra: color-mix(in srgb, var(--accent) 10%, var(--panel)); }
.adm-page { display: grid; gap: 20px; min-width: 0; }
.adm-page .page-head { align-items: flex-end; padding: 4px 2px 0; gap: 12px; }
.adm-page .page-head h1 { font-size: 28px; letter-spacing: -.01em; }
.adm-page .page-head .btn { height: 36px; box-sizing: border-box; padding: 0 16px; white-space: nowrap; }
.adm-page .page-head .seg { height: 36px; box-sizing: border-box; align-items: stretch; }
.adm-page .page-head .seg a { display: inline-flex; align-items: center; padding: 0 16px; font-size: 13px; }
.adm-page .page-head .chip { height: 28px; box-sizing: border-box; padding: 0 14px; }
.adm-page .back { height: 34px; box-sizing: border-box; }
.adm-page .card { padding: 20px 22px; border-radius: 22px; gap: 14px; }
.adm-page .card h3, .adm-page .card-h h3 { font-size: 16px; }
.adm-page .card-h { min-height: 32px; align-items: center; }
.adm-page .card-h > .chip { height: 26px; box-sizing: border-box; min-width: 40px; justify-content: center; }
.adm-page .grid.g2, .adm-page .grid.g3 { gap: 20px; align-items: stretch; }
.adm-page .card .grid.g2, .adm-page .card .grid.g3 { gap: 14px 16px; }
/* forms: one height for every box, one for every button */
.adm-page .card input.input:not([type=checkbox]):not([type=file]):not([type=radio]), .adm-page .card select.input:not([multiple]) { height: 42px; box-sizing: border-box; border-radius: 12px; }
.adm-page .card input[type=file].input { height: 42px; box-sizing: border-box; border-radius: 12px; padding: 5px 8px; }
.adm-page .card select[multiple].input { border-radius: 12px; padding: 6px 8px; }
.adm-page .card textarea.input { border-radius: 14px; }
.adm-page .card .btn:not(.sm):not(.ghost) { height: 40px; padding: 0 22px; }
.adm-page .card .btn.sm { height: 34px; padding: 0 16px; }
.adm-page .field > label { font-size: 12.5px; }
.adm-page .switch { min-height: 44px; box-sizing: border-box; padding: 0 16px; border: 0; background: var(--zebra); }
.adm-page .note, .adm-page .alert { border-radius: 12px; }
/* lists: zebra, one row height, chips lined up */
.adm-page .card .list { gap: 4px; }
.adm-page .card .list > .row, .adm-page .card .list > a.row { min-height: 56px; box-sizing: border-box; padding: 6px 14px; border: 0; border-radius: 12px; }
.adm-page .card .list > .row:nth-child(odd), .adm-page .card .list > a.row:nth-child(odd) { background: var(--zebra); }
.adm-page .card .list > .row:nth-child(even), .adm-page .card .list > a.row:nth-child(even) { background: transparent; }
.adm-page .card .list > a.row:hover { background: color-mix(in srgb, var(--accent) 16%, var(--panel)) !important; }
.adm-page .card .list > .row .chip, .adm-page .card .list > a.row .chip { min-width: 104px; height: 26px; box-sizing: border-box; justify-content: center; }
.adm-page .card .list > .row .t { font-weight: 700; }
.adm-page .card .list > .row .btn.sm, .adm-page .card .list > .row .btn.ghost.sm { height: 32px; padding: 0 14px; }
/* tables: zebra, 48px rows, numbers lined up */
.adm-page .table-wrap table tbody tr:nth-child(odd) > td { background: var(--zebra); }
.adm-page .table-wrap table tbody tr:hover > td { background: color-mix(in srgb, var(--accent) 16%, var(--panel)); }
.adm-page .table-wrap td, .adm-page .table-wrap th { padding: 0 12px; height: 48px; }
.adm-page .table-wrap th { height: 42px; }
.adm-page .table-wrap td.num, .adm-page .table-wrap th.num, .adm-page .table-wrap td.tnum { font-variant-numeric: tabular-nums; }
.adm-page .table-wrap td a { color: var(--text); font-weight: 700; text-decoration: none; }
.adm-page .table-wrap td a:hover { color: var(--accent); }
.adm-page .table-wrap td .chip { height: 24px; box-sizing: border-box; min-width: 84px; justify-content: center; }
.adm-page .table-wrap td .btn.sm, .adm-page .table-wrap td summary.btn { height: 30px; box-sizing: border-box; padding: 0 12px; display: inline-flex; align-items: center; }

/* ---- Admin hub: even tiles, icon in a soft square ---- */
.adm-page .hub { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
.adm-page .hub a.card { display: grid; grid-template-columns: 48px minmax(0, 1fr); grid-template-rows: auto 1fr; gap: 4px 14px; align-items: start; min-height: 108px; padding: 18px 20px; }
.adm-page .hub .ico { grid-row: 1 / 3; width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; font-size: 22px; background: var(--zebra); }
.adm-page .hub a.card h3 { margin: 2px 0 0; font-size: 15.5px; }
.adm-page .hub a.card p { margin: 0; line-height: 1.45; }
.adm-page .hub a.card:hover { background: color-mix(in srgb, var(--accent) 8%, var(--panel)); transform: translateY(-1px); }

/* ---- Roles / Positions: the picker on the left, zebra and one height ---- */
.adm-page .roles { grid-template-columns: 280px minmax(0, 1fr); gap: 20px; align-items: start; }
.adm-page .roles > .card:first-child .list { gap: 3px; }
.adm-page .role-btn { min-height: 54px; box-sizing: border-box; border: 0 !important; border-radius: 12px; padding: 8px 14px; align-content: center; background: transparent; }
.adm-page .roles .list > .role-btn:nth-child(odd) { background: var(--zebra); }
.adm-page .roles .list > .role-btn[aria-current="true"] { background: var(--accent) !important; color: var(--on-accent); }
.adm-page .roles .list > .role-btn[aria-current="true"] span { color: color-mix(in srgb, var(--on-accent) 80%, transparent); }
.adm-page .roles .card.flat { padding: 16px; border-radius: 16px; }
.adm-page .roles .card.flat .btn.sm { height: 38px; width: 100%; }
.adm-page table.matrix tbody tr:nth-child(odd) > td { background: var(--zebra); }
.adm-page table.matrix td { height: 42px; }
.adm-page table.matrix td:first-child { font-weight: 700; }
.adm-page table.matrix th { height: 64px; vertical-align: bottom; padding-bottom: 8px; }

/* ---- Rules: settings-saved chip lined up; unchanged ones quiet ---- */
.adm-page .rl-list > a.row > span:first-child { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: var(--panel); font-size: 15px; }
.adm-page .rl-list > a.row > .chip { min-width: 140px; }
.adm-page .rl-list > a.row > .chip.c-slate { background: transparent; border-color: var(--edge); color: var(--faint); font-weight: 600; }
.adm-page .rl-list > a.row .s { max-width: 1100px; }

/* ---- Users ---- */
.adm-page .table-wrap td .avatar { width: 36px !important; height: 36px !important; }
.adm-page .table-wrap td:last-child .btn.sm, .adm-page .table-wrap td:last-child summary { min-width: 92px; justify-content: center; }
.adm-page .table-wrap td:last-child { padding-right: 16px; }

/* ---- Setup: letter templates fold like rows ---- */
.adm-page .card > details.card.flat { border: 0; border-radius: 12px; margin: 0; padding: 0; gap: 0; background: transparent; box-shadow: none; }
.adm-page .card > details.card.flat:nth-of-type(odd) { background: var(--zebra); }
.adm-page .card > details.card.flat > summary { min-height: 52px; box-sizing: border-box; display: flex; align-items: center; gap: 10px; padding: 0 18px; font-weight: 700; cursor: pointer; }
.adm-page .card > details.card.flat[open] { padding-bottom: 16px; background: var(--panel-2); box-shadow: inset 4px 0 0 var(--accent); }
.adm-page .card > details.card.flat[open] > :not(summary) { margin-left: 18px; margin-right: 18px; }
.adm-page .card > details.card.flat > summary .small { font-weight: 500; }
.adm-page .card:has(> details.card.flat) { gap: 4px; }
/* user row pop-ups: one button size */
.adm-page details.pop > summary.btn { height: 30px; box-sizing: border-box; display: inline-flex; align-items: center; }
.adm-page .card .list > .row > .chip:last-child { justify-self: end; }
.adm-page .card textarea.input.mono, .adm-page .card textarea.mono { min-height: 200px; line-height: 1.6; }

/* ---- Companies ---- */
.adm-page dl.kv { gap: 0; }
.adm-page dl.kv > * { padding: 7px 12px; margin: 0; }
.adm-page dl.kv > :nth-child(4n+1), .adm-page dl.kv > :nth-child(4n+2) { background: var(--zebra); }
.adm-page dl.kv > dt:first-child, .adm-page dl.kv > dt:first-child + dd { border-radius: 0; }
.adm-page .table-wrap td input.input.mono { height: 36px; width: 72px; text-align: center; border-radius: 10px; }

/* ---- Holidays: date chip fixed, reason + remove the same height ---- */
.adm-page .card .list > .row > .chip.c-gold:first-child { min-width: 76px; height: 28px; font-variant-numeric: tabular-nums; }
.adm-page .card .list > .row input.input { height: 34px !important; border-radius: 10px; }

/* ---- Email / Activity: filter chips and bar ---- */
.adm-page .card-h .chip { height: 28px; box-sizing: border-box; min-width: 72px; justify-content: center; }
.adm-page .gb-bar select.input { height: 36px; box-sizing: border-box; border-radius: 999px; }
.adm-page .gb-bar .btn { height: 36px; }
.adm-page .table-wrap td .chip.c-teal:first-child { min-width: 76px; }

/* ---- AI / privacy: label | value rows ---- */
.adm-page div.kv { gap: 0; }
.adm-page div.kv > * { padding: 9px 12px; }
.adm-page div.kv > :nth-child(4n+1), .adm-page div.kv > :nth-child(4n+2) { background: var(--zebra); }

/* ---- System: jobs and backups ---- */
.adm-page .card .list > .row .t.mono { font-size: 13px; }
.adm-page .card .list > .row > .small:last-child { min-width: 90px; text-align: right; font-variant-numeric: tabular-nums; }

/* ---- Email: the status filters as pills ---- */
.adm-page .card-h > div > a.chip { height: 32px; box-sizing: border-box; padding: 0 14px; border-radius: 999px; text-decoration: none; font: 700 13px var(--body); min-width: 0; }
.adm-page .card-h > div > a.chip.c-slate { background: var(--panel); border: 1px solid var(--edge-strong); color: var(--muted); }
.adm-page .card-h > div > a.chip:not(.c-slate) { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.adm-page .card-h > div { gap: 8px !important; align-items: center; }

/* ---- Activity: filters on one line; each area its own colour ---- */
.adm-page .card > form[action="/admin/activity"] { gap: 12px !important; }
.adm-page .card > form[action="/admin/activity"] #q { width: 340px; }
.adm-page .card > form[action="/admin/activity"] #module { min-width: 200px; }
.adm-page .card > form[action="/admin/activity"] .btn { height: 42px; }
.adm-page .card:has(> form[action="/admin/activity"]) .gb-bar { margin-top: -54px; }
.adm-page .table-wrap td > .chip[data-m] { min-width: 84px; margin-right: 6px; background: color-mix(in srgb, var(--m) 12%, var(--panel)); color: var(--m); border-color: color-mix(in srgb, var(--m) 35%, transparent); }
.adm-page .chip[data-m] { --m: #475569; }
.adm-page .chip[data-m="tasks"] { --m: #7c3aed; }
.adm-page .chip[data-m="checkin"] { --m: #0f766e; }
.adm-page .chip[data-m="leave"] { --m: #0d9488; }
.adm-page .chip[data-m="attendance"], .adm-page .chip[data-m="files"] { --m: #0369a1; }
.adm-page .chip[data-m="payroll"], .adm-page .chip[data-m="claims"], .adm-page .chip[data-m="loans"] { --m: #a16207; }
.adm-page .chip[data-m="employees"], .adm-page .chip[data-m="people"] { --m: #4f46e5; }
.adm-page .chip[data-m="approvals"], .adm-page .chip[data-m="requests"] { --m: #db2777; }
.adm-page .chip[data-m="chat"], .adm-page .chip[data-m="announcements"] { --m: #c2410c; }
.adm-page .table-wrap td:first-child.tnum { white-space: nowrap; }
@media (max-width: 1100px) {
  .adm-page .roles { grid-template-columns: 220px minmax(0, 1fr); }
  .adm-page .card > form[action="/admin/activity"] #q { width: 100%; }
  .adm-page .card:has(> form[action="/admin/activity"]) .gb-bar { margin-top: 0; }
}
@media (max-width: 760px) { .adm-page .roles { grid-template-columns: 1fr; } }

/* ===== 📝 Today notepad, polished (1.73.3): one line per task, status / tags / date in columns, lighter labels ===== */
.paper { max-width: 980px; padding: 26px 30px 22px; border-radius: 24px; box-shadow: var(--shadow); --rule-strong: color-mix(in srgb, var(--accent) 22%, transparent); }
.paper-day { margin-bottom: 18px; gap: 12px; }
.paper-day h2 { font-size: 26px; letter-spacing: -.01em; display: flex; align-items: baseline; gap: 10px; }
.paper-day h2 small { margin: 0; font-size: 13.5px; font-weight: 600; }
.paper-day .btn.sm { height: 34px; box-sizing: border-box; padding: 0 14px; display: inline-flex; align-items: center; gap: 6px; }
.paper-write { min-height: 54px; box-sizing: border-box; padding: 0 16px; border: 1.5px solid var(--edge-strong); border-radius: 16px; gap: 12px; box-shadow: 0 2px 10px rgba(16, 48, 45, .05); }
.paper-write:focus-within { border-color: var(--accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 14%, transparent); }
.paper-in { font-size: 16px; }
.paper-preview:empty { display: none; }
.paper-hint { margin: 10px 4px 0; font-size: 12px; line-height: 1.9; }
.paper-hint b { display: inline-block; padding: 0 7px; line-height: 20px; border-radius: 6px; background: var(--panel); border: 1px solid var(--edge); color: var(--muted); font-weight: 700; }
.paper-sec { margin-top: 28px; }
.paper-sec h3 { display: flex; align-items: center; gap: 8px; margin: 0 0 4px; padding: 0 8px 8px; font-size: 12px; letter-spacing: .09em; border-bottom: 1.5px solid var(--rule-strong); }
.paper-sec h3 .paper-n { letter-spacing: 0; font: 800 11.5px var(--body); padding: 2px 9px; border-radius: 999px; background: color-mix(in srgb, var(--accent) 12%, transparent); color: var(--accent); }
.paper-plan h3 .paper-n { background: color-mix(in srgb, var(--gold) 16%, transparent); color: var(--gold); }
.paper .nl-planlink { height: 28px; display: inline-flex; align-items: center; padding: 0 12px; border-radius: 999px; border: 1px solid var(--edge-strong); background: var(--panel); font-weight: 700; }
.paper .nl-planlink:hover { border-color: var(--accent); }
.paper-empty { padding: 12px 8px 4px; }
.paper .nl { grid-template-columns: 22px minmax(0, 1fr) auto 104px; gap: 14px; min-height: 46px; padding: 0 8px; border-bottom: 1px solid var(--rule); border-radius: 8px; }
.paper .nl:last-child { border-bottom: 0; }
.paper .nl:hover { background: color-mix(in srgb, var(--accent) 6%, transparent); }
.paper .nl-box { width: 20px; height: 20px; border-radius: 6px; }
.paper .nl-t { font-size: 15px; }
.paper .nl.done .nl-m, .paper .nl.done .nl-d { opacity: .6; }
.paper .nl-m { gap: 12px; justify-content: flex-end; font-size: 12px; position: static; }
.paper .nl-m > .nl-s { width: 96px; display: flex; }
.paper .nl-m > .nl-g { width: 112px; display: flex; gap: 8px; overflow: hidden; }
/* status and High: a coloured dot and a word, no box */
.paper .nl-m .chip { background: none !important; border: 0 !important; padding: 0; height: auto; font: 700 12px var(--body); box-shadow: none; }
.paper .nl-m .chip::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; display: inline-block; margin-right: 5px; vertical-align: 1px; }
/* tags: the tag's own colour as text */
.paper .nl-m .tagchip { background: none; border: 0; padding: 0; color: color-mix(in srgb, var(--tc) 85%, var(--text)); font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 112px; }
.paper .nl-mark { color: var(--gold); font-weight: 700; }
.paper .nl-at { min-width: 40px; text-align: right; }
/* the date: its own column on the right (the date menu opens under it) */
.paper .nl-d { position: relative; justify-self: end; text-align: right; font-size: 12.5px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.paper .nl-d .nl-dbtn { font-size: 12.5px; padding: 4px 8px; }
.paper .nl-d .nl-due.late { color: var(--bad); font-weight: 700; }
.paper-carry { margin-top: 26px; }
.paper-carry summary { min-height: 42px; box-sizing: border-box; display: flex; align-items: center; gap: 8px; padding: 0 16px; border-radius: 12px; font-size: 13px;
  background: color-mix(in srgb, var(--bad) 6%, var(--panel)); border: 1px solid color-mix(in srgb, var(--bad) 25%, transparent); }
.paper + p.small.muted { max-width: 980px; text-align: center; margin-top: 4px; }
/* narrow (phone width, the pop-out window): name and date on the first line, the rest under the name */
@media (max-width: 700px) {
  .paper { padding: 18px 16px; }
  .paper .nl { grid-template-columns: 22px minmax(0, 1fr) auto; padding: 6px 4px; }
  .paper .nl-m { grid-column: 2 / 4; grid-row: 2; justify-content: flex-start; flex-wrap: wrap; white-space: normal; }
  .paper .nl-m > .nl-s, .paper .nl-m > .nl-g { width: auto; }
  .paper .nl-m > :empty { display: none; }
  .paper .nl { row-gap: 4px; }
  .paper .nl-m:not(:has(> :not(:empty))) { display: none; }
  .paper .nl-d { grid-row: 1; grid-column: 3; }
}
.paper.in-pop { padding: 12px 12px 14px; }
.paper.in-pop .nl { grid-template-columns: 22px minmax(0, 1fr) auto; align-items: start; padding: 6px 4px; }
.paper.in-pop .nl-m { grid-column: 2 / 4; grid-row: 2; justify-content: flex-start; flex-wrap: wrap; white-space: normal; gap: 8px; }
.paper.in-pop .nl-m > .nl-s, .paper.in-pop .nl-m > .nl-g { width: auto; }
.paper.in-pop .nl-m > :empty { display: none; }
.paper.in-pop .nl { row-gap: 4px; }
.paper.in-pop .nl-m:not(:has(> :not(:empty))) { display: none; }
.paper.in-pop .nl-d { grid-row: 1; grid-column: 3; }
.paper.in-pop .paper-day h2 { font-size: 18px; display: block; }
.paper.in-pop .paper-sec { margin-top: 18px; }

/* ===== 🔁 Recurring tasks (1.74.0) ===== */
.rec-box { display: grid; gap: 12px; padding: 14px 16px; border-radius: 16px; border: 1.5px solid var(--edge-strong); background: var(--panel); }
.rec-box:has([data-rec-toggle]:checked) { border-color: color-mix(in srgb, var(--vio) 55%, transparent); background: color-mix(in srgb, var(--vio) 5%, var(--panel)); }
.rec-switch { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; cursor: pointer; }
.rec-switch input { width: 18px; height: 18px; accent-color: var(--vio); }
.rec-switch .muted { font-size: 13px; }
.rec-fields { display: grid; gap: 12px; }
.rec-fields[hidden], .rec-fields .rec-only[hidden] { display: none; }
.rec-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px 16px; align-items: start; }
.rec-pills, .rec-days { display: flex; gap: 6px; flex-wrap: wrap; }
.rec-pill, .rec-day { display: inline-flex; align-items: center; height: 34px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--edge-strong);
  background: var(--panel); font: 700 13px var(--body); color: var(--muted); cursor: pointer; user-select: none; }
.rec-day { padding: 0 12px; min-width: 46px; justify-content: center; }
.rec-pill input, .rec-day input { position: absolute; opacity: 0; pointer-events: none; }
.rec-pill.on, .rec-day.on { background: var(--vio); border-color: var(--vio); color: #fff; }
.rec-pill:focus-within, .rec-day:focus-within { outline: 2px solid var(--accent-2); outline-offset: 2px; }
.rec-every select { max-width: 170px; }
.rec-next { font-size: 13.5px; padding: 10px 14px; border-radius: 12px; background: color-mix(in srgb, var(--vio) 8%, var(--panel)); }
.rec-next b { color: var(--vio); }
.rec-next .rec-why { color: var(--muted); font-size: 12.5px; }
.rec-mark { margin-right: 4px; font-size: .92em; }
.rec-chip { text-decoration: none; }
.rec-acts { display: flex; gap: 8px; align-items: flex-start; flex-wrap: wrap; }
.rec-row-acts { display: flex; gap: 6px; align-items: center; }
.rec-marks { white-space: nowrap; letter-spacing: 2px; font-weight: 800; }
.rec-m[data-m="✓"] { color: var(--good); } .rec-m[data-m="⚠"] { color: var(--warn); } .rec-m[data-m="✗"] { color: var(--bad); }
/* the calendar: 🔁 Show expected + what the marks mean */
.exp-tog { display: inline-flex; align-items: center; gap: 8px; height: 32px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--edge-strong);
  background: var(--panel); font: 700 12.5px var(--body); color: var(--muted); cursor: pointer; white-space: nowrap; }
.exp-tog input { width: 15px; height: 15px; accent-color: var(--vio); }
.cal-card.show-exp .exp-tog { border-color: var(--vio); color: var(--vio); background: color-mix(in srgb, var(--vio) 8%, var(--panel)); }
.cal-ev.exp { display: none; background: transparent; border: 1.5px dashed color-mix(in srgb, var(--vio) 55%, transparent); border-left-width: 1.5px;
  color: color-mix(in srgb, var(--vio) 80%, var(--text)); cursor: pointer; }
.cal-card.show-exp .cal-ev.exp { display: block; }
.cal-ev.exp.comp { border-color: color-mix(in srgb, var(--gold) 60%, transparent); color: color-mix(in srgb, var(--gold) 85%, var(--text)); }
.cal-legend { display: flex; gap: 6px 18px; flex-wrap: wrap; align-items: center; font-size: 12.5px; color: var(--muted); padding: 9px 14px; border-radius: 12px;
  background: color-mix(in srgb, var(--accent) 6%, var(--panel)); }
.cal-legend > b { color: var(--text); }
.cal-legend .sw { display: inline-block; font-size: 11.5px; padding: 1px 7px; border-radius: 6px; margin-right: 5px; font-weight: 600; color: var(--text);
  background: var(--accent-soft); border-left: 3px solid var(--accent); }
.cal-legend .sw.exp { background: transparent; border: 1.5px dashed color-mix(in srgb, var(--vio) 55%, transparent); color: var(--vio); }
.cal-legend .sw.late { border-left-color: var(--bad); background: color-mix(in srgb, var(--bad) 10%, transparent); }
.cal-legend .sw.done { border-left-color: var(--good); opacity: .6; }
.cal-legend .sw.hold { border-left-color: var(--slate); background: color-mix(in srgb, var(--slate) 10%, transparent); }
.cal-legend .sw.ws { border-left: 0; background: color-mix(in srgb, var(--vio) 12%, var(--panel)); color: var(--vio); font-weight: 800; }
.cal-card:not(.show-exp) .cal-legend .only-exp { opacity: .45; }
.exp-pop { position: absolute; z-index: 60; width: 340px; max-width: calc(100vw - 24px); padding: 14px 16px; border-radius: 16px; background: var(--panel);
  border: 1px solid var(--edge-strong); box-shadow: 0 18px 40px rgba(0, 0, 0, .18); display: grid; gap: 7px; font-size: 13px; }
.exp-pop h4 { margin: 0 0 2px; font-size: 14.5px; }
.exp-pop .k { color: var(--muted); font-weight: 700; }
.exp-pop .acts { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin-top: 4px; }
.exp-pop .exp-form { display: flex; gap: 6px; align-items: center; }
.exp-pop .exp-form .input { height: 32px; padding: 0 8px; width: 140px; }
.exp-pop .btn.sm { height: 32px; }
.rec-page .table-wrap td a { color: var(--text); font-weight: 700; text-decoration: none; }
.rec-page .table-wrap td a:hover { color: var(--accent); text-decoration: underline; }
.rec-page .table-wrap tbody tr:nth-child(odd) > td { background: color-mix(in srgb, var(--accent) 10%, var(--panel)); }

/* ===== 📋 Tax compliance (1.75.0) ===== */
.cp-head-acts { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.cp-tiles { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; }
.cp-tile { height: 84px; box-sizing: border-box; border-radius: 20px; padding: 0 20px; display: grid; align-content: center; gap: 2px; background: var(--glass); border: 1px solid var(--glass-edge); box-shadow: var(--shadow); }
.cp-tile b { font-size: 26px; font-variant-numeric: tabular-nums; }
.cp-tile span { font-size: 12.5px; color: var(--muted); font-weight: 700; }
.cp-tile.good b { color: var(--good); } .cp-tile.bad b { color: var(--bad); } .cp-tile.exp b { color: var(--vio); } .cp-tile.gap b { color: var(--warn); }
.cp-bar { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.cp-bar .seg { height: 36px; box-sizing: border-box; } .cp-bar .seg a { display: inline-flex; align-items: center; padding: 0 16px; }
.cp-bar select.input { height: 36px; box-sizing: border-box; border-radius: 999px; padding: 0 14px; width: auto; min-width: 150px; }
.cp-legend { margin-left: auto; display: flex; gap: 14px; flex-wrap: wrap; font-size: 12.5px; color: var(--muted); align-items: center; }
.cp-legend .cp-c { width: 24px; height: 22px; font-size: 12px; margin-right: 4px; }
.cp-ev { font-size: 11.5px; padding: 2px 6px; border-radius: 6px; line-height: 1.35; font-weight: 600; text-decoration: none; display: block; color: var(--text); }
.cp-ev small { font-weight: 500; opacity: .85; }
.cp-ev.open { background: var(--accent-soft); border-left: 3px solid var(--accent); }
.cp-ev.done { background: color-mix(in srgb, var(--good) 10%, transparent); border-left: 3px solid var(--good); color: var(--muted); }
.cp-ev.late { background: color-mix(in srgb, var(--bad) 10%, transparent); border-left: 3px solid var(--bad); color: var(--bad); }
.cp-ev.exp { border: 1.5px dashed color-mix(in srgb, var(--vio) 55%, transparent); color: color-mix(in srgb, var(--vio) 80%, var(--text)); }
.cp-ev.gap { border: 1.5px dashed var(--warn); background: color-mix(in srgb, var(--warn) 8%, transparent); color: var(--warn); }
.cp-ev.skipped { opacity: .5; text-decoration: line-through; }
.cp-hol { font-size: 11px; color: var(--bad); font-weight: 700; }
.cp-ent { margin: 18px 0 8px; display: flex; align-items: center; gap: 12px; font-size: 15px; }
.cp-ent span { font-size: 12.5px; color: var(--muted); font-weight: 600; }
.cp-ent form { margin-left: auto; }
.cp-year table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 13px; table-layout: fixed; }
.cp-year col.c1 { width: 230px; } .cp-year col.c2 { width: 150px; }
.cp-year th, .cp-year td { padding: 0 6px; height: 40px; text-align: center; border-bottom: 1px solid var(--edge); }
.cp-year th { font-size: 11.5px; color: var(--muted); letter-spacing: .05em; height: 36px; }
.cp-year td:first-child, .cp-year th:first-child, .cp-year td:nth-child(2), .cp-year th:nth-child(2) { text-align: left; }
.cp-year td:first-child { font-weight: 700; } .cp-year td:first-child a { color: var(--text); text-decoration: none; }
.cp-year tbody tr:nth-child(odd) td { background: color-mix(in srgb, var(--accent) 7%, var(--panel)); }
.cp-year th.now { color: var(--accent); }
.cp-c { display: inline-grid; place-items: center; width: 30px; height: 26px; border-radius: 8px; font-weight: 800; font-size: 13px; text-decoration: none; }
.cp-c.done { background: color-mix(in srgb, var(--good) 14%, transparent); color: var(--good); }
.cp-c.donelate { background: color-mix(in srgb, var(--warn) 16%, transparent); color: var(--warn); }
.cp-c.open { background: var(--accent-soft); color: var(--accent); }
.cp-c.late { background: color-mix(in srgb, var(--bad) 14%, transparent); color: var(--bad); }
.cp-c.exp { border: 1.5px dashed color-mix(in srgb, var(--vio) 55%, transparent); color: var(--vio); }
.cp-c.gap { border: 1.5px dashed var(--warn); color: var(--warn); }
.cp-c.skipped { color: var(--faint); }
.cp-nobody { color: var(--warn); font-weight: 700; font-size: 12.5px; }
.cp-setup .btn.sm { height: 28px; padding: 0 10px; color: var(--warn); border-color: color-mix(in srgb, var(--warn) 45%, transparent); }
.cal-ev.comp:not(.exp) { border-left-color: var(--gold); background: color-mix(in srgb, var(--gold) 10%, var(--panel)); }
.cal-legend .sw.comp { border-left-color: var(--gold); background: color-mix(in srgb, var(--gold) 10%, var(--panel)); }
@media (max-width: 1100px) { .cp-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } .cp-legend { margin-left: 0; } }

/* ===== ⏳ Follow-ups on the 📝 Today notepad (1.76.0) ===== */
.paper .nl { grid-template-columns: 22px minmax(0, 1fr) auto auto 104px; }
.fu-slot { display: flex; gap: 6px; justify-content: flex-end; align-items: center; }
.fu-slot:empty { display: none; }
.fu-btn { opacity: 0; transition: opacity .15s; border: 1px solid var(--edge-strong); background: var(--panel); border-radius: 999px; height: 26px; padding: 0 10px;
  font: 700 11.5px var(--body); color: var(--muted); cursor: pointer; white-space: nowrap; }
.paper .nl:hover .fu-btn, .paper .nl:focus-within .fu-btn, .paper-fu .fu-btn { opacity: 1; }
.fu-btn:hover, .fu-btn:focus-visible { border-color: #b45309; color: #b45309; outline: none; }
.fu-did { border: 1px solid color-mix(in srgb, var(--good) 45%, transparent); background: color-mix(in srgb, var(--good) 9%, var(--panel)); color: var(--good);
  border-radius: 999px; height: 26px; padding: 0 10px; font: 700 11.5px var(--body); cursor: pointer; white-space: nowrap; }
.paper-fu h3 { color: #b45309 !important; }
.paper-fu h3 .paper-n { background: color-mix(in srgb, #f59e0b 18%, transparent); color: #b45309; }
.paper-fu .nl { background: color-mix(in srgb, #f59e0b 9%, transparent); border-radius: 10px; margin: 4px 0; border-bottom: 0; min-height: 54px; padding: 6px 10px; }
.fu-wrap { display: grid; min-width: 0; }
.fu-note { display: block; font-size: 12.5px; color: #92400e; font-weight: 600; margin-top: 2px; white-space: normal; }
.fu-note small { color: var(--muted); font-weight: 500; }
.paper-snz { margin-top: 12px; }
.paper-snz summary { min-height: 42px; box-sizing: border-box; display: flex; align-items: center; gap: 8px; padding: 0 16px; border-radius: 12px; font-size: 13px;
  font-weight: 800; cursor: pointer; color: #92400e; background: color-mix(in srgb, #f59e0b 7%, var(--panel)); border: 1px solid color-mix(in srgb, #f59e0b 30%, transparent); }
.paper-snz[open] summary { margin-bottom: 4px; }
.snz-row { display: grid; grid-template-columns: 110px minmax(0, 1fr) auto; gap: 12px; align-items: center; min-height: 46px; padding: 4px 10px; border-bottom: 1px solid var(--rule); font-size: 14px; }
.snz-row:last-child { border-bottom: 0; }
.snz-row b { color: #b45309; font-size: 12.5px; }
.snz-row a { color: var(--text); text-decoration: none; }
.snz-row a:hover { text-decoration: underline; }
.snz-row button { height: 28px; border-radius: 999px; border: 1px solid var(--edge-strong); background: var(--panel); font: 700 12px var(--body); color: var(--muted); padding: 0 12px; cursor: pointer; }
.fu-pop { position: absolute; z-index: 60; width: 370px; max-width: calc(100vw - 24px); padding: 16px 18px; border-radius: 18px; background: var(--panel); border: 1px solid var(--edge-strong);
  box-shadow: 0 18px 40px rgba(0, 0, 0, .2); display: grid; gap: 10px; font-size: 13px; }
.fu-pop h4 { margin: 0; font-size: 15px; }
.fu-pop .sub { color: var(--muted); font-size: 12.5px; margin-top: -6px; }
.fu-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.fu-chips button { height: 32px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--edge-strong); background: var(--panel); font: 700 13px var(--body); color: var(--muted); cursor: pointer; }
.fu-chips button.on { background: #b45309; border-color: #b45309; color: #fff; }
.fu-pop .row2 { display: grid; grid-template-columns: 1fr 120px; gap: 8px; }
.fu-pop .row2 > div:only-child { grid-column: 1 / -1; }
.fu-pop label { display: block; font-size: 11.5px; font-weight: 800; color: var(--muted); margin-bottom: 3px; }
.fu-pop .input { height: 38px; box-sizing: border-box; border-radius: 10px; width: 100%; }
.fu-pop .go { height: 40px; border-radius: 999px; border: 0; background: #b45309; color: #fff; font: 800 14px var(--body); cursor: pointer; }
.fu-pop .fine { font-size: 12px; color: var(--muted); }
:root[data-theme="dark"] .fu-note { color: #f5c26b; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .fu-note { color: #f5c26b; } }
@media (max-width: 700px) {
  .paper .nl { grid-template-columns: 22px minmax(0, 1fr) auto; }
  .paper .fu-slot { grid-row: 3; grid-column: 2 / 4; justify-content: flex-start; }
  .paper .fu-btn { opacity: 1; }
}
.paper.in-pop .nl { grid-template-columns: 22px minmax(0, 1fr) auto; }
.paper.in-pop .fu-slot { grid-row: 2; grid-column: 3; }  /* the pop-out has a mouse: ⏳ shows on hover, beside the second line */
.fu-chip { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 4px 0 10px; border-radius: 999px; font: 700 12px var(--body);
  color: #92400e; background: color-mix(in srgb, #f59e0b 14%, var(--panel)); border: 1px solid color-mix(in srgb, #f59e0b 40%, transparent); max-width: 420px; }
.fu-chip span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fu-chip button { border: 0; background: none; color: inherit; font-size: 15px; cursor: pointer; padding: 0 6px; }
.fu-taskpop > summary { cursor: pointer; list-style: none; }
.fu-taskpop > summary::-webkit-details-marker { display: none; }

/* ===== One company / one rule, polished (1.76.1) ===== */
/* company: section headings with their hint under them, a Save bar that stays in view */
.adm-page form.card > h3 + p.note, .adm-page form.card > h3 + .small { margin-top: -6px; }
.adm-page .card input.input.mono { font-size: 13.5px; letter-spacing: .02em; }
.adm-page .pl-save { position: sticky; bottom: 14px; z-index: 5; display: flex; align-items: center; gap: 14px; padding: 12px 16px; border-radius: 18px;
  background: color-mix(in srgb, var(--panel) 92%, transparent); backdrop-filter: blur(8px); border: 1px solid var(--edge-strong); box-shadow: var(--shadow); }
.adm-page .pl-save .btn { height: 40px; padding: 0 24px; }
.adm-page .pl-save span { color: var(--muted); font-size: 13px; }
/* rule: the defaults as label | value rows */
.adm-page .card > dl.kv { grid-template-columns: minmax(0, 1fr) auto; font-size: 14px; }
.adm-page .card > dl.kv > dt { color: var(--text); font-weight: 600; }
.adm-page .card > dl.kv > dd { font-weight: 800; text-align: right; font-variant-numeric: tabular-nums; }
.adm-page .card > dl.kv > :nth-child(4n+1), .adm-page .card > dl.kv > :nth-child(4n+2) { background: var(--zebra); }
.adm-page .card > dl.kv > dt { border-radius: 10px 0 0 10px; } .adm-page .card > dl.kv > dd { border-radius: 0 10px 10px 0; }
/* rule: saved settings, two columns, what differs from everyone's default in bold */
.adm-page .rs-who b { display: block; font-size: 14px; }
.adm-page .rs-who span { font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.adm-page .rs-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 3px 22px; padding: 8px 0; }
.adm-page .rs-grid div { display: flex; gap: 8px; align-items: baseline; font-size: 12.5px; color: var(--faint); min-width: 0; }
.adm-page .rs-grid div span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.adm-page .rs-grid div b { font-variant-numeric: tabular-nums; min-width: 42px; color: var(--faint); font-weight: 600; }
.adm-page .rs-grid div.diff { color: var(--text); }
.adm-page .rs-grid div.diff b { color: var(--accent); font-weight: 800; }
.adm-page .rs-grid .rs-note { grid-column: 1 / -1; color: var(--muted); font-style: italic; }
.adm-page tr.rs-ended > td { opacity: .5; }
.adm-page tr.rs-ended .rs-who b::after { content: " · ended"; font-size: 11px; font-weight: 800; color: var(--bad); }
.adm-page .table-wrap td form .input[type=date] { height: 34px; width: 150px !important; border-radius: 10px; }
.adm-page .table-wrap td form .btn.sm { height: 34px; }
.adm-page .table-wrap td:has(.rs-grid) { height: auto; }
.adm-page .rs-legend { font-size: 12.5px; color: var(--muted); margin: -4px 0 4px; }
.adm-page .rs-legend b { color: var(--accent); }

/* ===== Zebra rows on Home and My tasks (1.76.2): the two screens polished before the zebra standard ===== */
.home-page, .tasks-page { --zebra: color-mix(in srgb, var(--accent) 10%, var(--panel)); }
/* ---- Home: the three task columns as striped rows inside each column ---- */
.home-page .hcol { padding: 8px 6px; }
.home-page .hcol-t { border: 0; border-radius: 10px; margin-bottom: 2px; background: transparent; box-shadow: none; }
.home-page .hcol > .hcol-t:nth-of-type(odd) { background: var(--zebra); }
.home-page .hcol.late > .hcol-t:nth-of-type(odd) { background: color-mix(in srgb, var(--bad) 7%, var(--panel)); }
.home-page .hcol-t:hover { background: color-mix(in srgb, var(--accent) 16%, var(--panel)) !important; }
/* Home: other list cards (approvals, requests, colleagues, news) */
.home-page .card:not(.plan-card) .list { gap: 2px; }
.home-page .card:not(.plan-card) .list > .row { border: 0; border-radius: 10px; background: transparent; }
.home-page .card:not(.plan-card) .list > .row:nth-child(odd of .row) { background: var(--zebra); }
/* ---- My tasks: List view, each section's rows ---- */
.tasks-page .task-sec .list { gap: 2px; }
.tasks-page .task-row.qrow { border: 0 !important; background: transparent; }
.tasks-page .task-sec .list > .task-row:nth-child(odd of .task-row:not(.mf-out)) { background: var(--zebra); }
.tasks-page .task-sec.is-late .list > .task-row:nth-child(odd of .task-row:not(.mf-out)) { background: color-mix(in srgb, var(--bad) 7%, var(--panel)); }
.tasks-page .task-sec.is-late .list > .task-row { box-shadow: inset 3px 0 0 var(--bad); }
.tasks-page .task-row.qrow:hover { background: color-mix(in srgb, var(--accent) 16%, var(--panel)) !important; }
/* ---- My tasks: Table view ---- */
/* stripes restart under each group heading (class zb set per group): a heading is always followed by a plain row */
.tasks-page table.q-table tbody tr.qrow > td { background: var(--panel); }
.tasks-page table.q-table tbody tr.qrow.zb > td { background: var(--zebra); }
.tasks-page table.q-table tbody tr.qrow.is-late.zb > td { background: color-mix(in srgb, var(--bad) 7%, var(--panel)); }
/* group headings: a clear band, not another row */
.tasks-page table.q-table tr.gb-group > td { background: color-mix(in srgb, var(--accent) 22%, var(--panel)) !important; color: var(--text);
  font-size: 13.5px; font-weight: 800; height: 40px; padding: 0 14px; box-shadow: inset 4px 0 0 var(--accent); border-top: 10px solid var(--panel); border-bottom: 1px solid color-mix(in srgb, var(--accent) 40%, transparent); }
.tasks-page table.q-table tr.gb-group:first-child > td { border-top: 0; }
.tasks-page table.q-table tr.gb-group .gb-count { color: var(--muted); font-weight: 700; }
.tasks-page table.q-table tbody tr.qrow:hover > td { background: color-mix(in srgb, var(--accent) 16%, var(--panel)); }