/* ═══════════════════════════════════════════════════════════════════════════
   Spec Media CRM — the design system.

   The 1718pos console's calm glass (header pill nav with a liquid bead, a
   light neutral canvas with a dot grid, frosted cards with a white hairline
   and no drop shadows, dot-matrix figures, feathered colour cards) — in
   Spec Media's colours:

   - the canvas is neutral and light: no colour wash, no tinted glow;
   - colour lives only in the tiles, and is rationed to the brand red and its charcoal —
       wine     (deep forest-to-sage green: the lead tiles) .fx-wine
       amber    (soft peach: attention, the second)       .fx-amber
       slate    (misty blue-grey: the quiet third)         .fx-slate
     (the names are kept from the first palette; --alert, a muted brick,
     is only for what is wrong: overdue, absent, declined)
     plus ink (near black) for buttons and the odd dark tile, and a pale
     champagne for the tiny tags;
   - icons are ink on glass; text is ink, never a colour.
   Light only.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  color-scheme: light;
  /* the one accent, in ten steps — theme.js swaps these */
  --k900: #1E2F8E; --k900-rgb: 30, 47, 142;
  --k800: #2A3FB8; --k800-rgb: 42, 63, 184;
  --k600: #3B55E6; --k600-rgb: 59, 85, 230;
  --k500: #4F68EA; --k500-rgb: 79, 104, 234;
  --k400: #6A80F0; --k400-rgb: 106, 128, 240;
  --k300: #8DA0F2; --k300-rgb: 141, 160, 242;
  --k250: #A9B8F5; --k250-rgb: 169, 184, 245;
  --k200: #C6D0F8; --k200-rgb: 198, 208, 248;
  --k100: #DDE3F2; --k100-rgb: 221, 227, 242;
  --k50: #EEF1FB; --k50-rgb: 238, 241, 251;
  --bg: #F1F3F6;
  --ink: #2C2E33; --ink2: #565A61; --ink3: #8E9298; --ink4: #BCBFC4;
  --line: rgba(20,22,24,.07); --line2: rgba(20,22,24,.12);
  --glass: rgba(255,255,255,.5); --glass2: rgba(255,255,255,.66); --edge: rgba(255,255,255,.85);
  --blur: blur(22px) saturate(1.5);
  --ease: cubic-bezier(.1,.9,.2,1);
  /* the three hues */
  --wine: var(--k600); --wine-d: var(--k800); --wine-l: var(--k400); --wine-soft: rgba(var(--k600-rgb),.09);
  --amber: var(--k300); --amber-d: var(--k800); --amber-soft: rgba(var(--k300-rgb),.13);
  --slate: #4A4F54; --slate-d: #2E3235; --slate-soft: rgba(74,79,84,.13);
  --cream: var(--k100); --cream-ink: var(--k900);
  --alert: #D2553F; --alert-soft: rgba(210,85,63,.12); /* only for what is wrong: overdue, absent, declined */
  --ok: #2E3235; --ok-soft: rgba(46,50,53,.1);
  /* older names, pointed at the new system */
  --red: var(--alert); --red-d: #9E3F2F; --red-soft: var(--alert-soft); --rose: #ECEFEC;
  --grad-red: linear-gradient(135deg, var(--k600) 0%, var(--k600) 50%, var(--k900) 100%);
  --grad-black: linear-gradient(140deg, #3A3C3E 0%, #1B1D1E 55%, #0B0C0D 100%);
  --warn: var(--amber-d);
  --mono: 'JetBrains Mono', ui-monospace, monospace;
  --sans: 'Inter Tight', 'Segoe UI', system-ui, sans-serif;
  --dot: 'Doto', 'Inter Tight', monospace;
}

* { box-sizing: border-box; }
html { background: var(--bg); }
body {
  margin: 0; min-height: 100vh; font-family: var(--sans); color: var(--ink); font-size: 14px; line-height: 1.45; letter-spacing: -.005em;
  -webkit-font-smoothing: antialiased; background: transparent; overflow-x: hidden;
}
/* the room: a light neutral canvas, a fine dot grid, a whisper of grain — drawn once, never moves */
body::before {
  content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .05 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),
    radial-gradient(circle, rgba(20,22,24,.07) 1px, transparent 1.4px) 0 0 / 22px 22px,
    radial-gradient(60% 45% at 92% 0%, rgba(44,46,51,.10), transparent 70%),
    radial-gradient(55% 40% at 0% 100%, rgba(44,46,51,.08), transparent 70%),
    linear-gradient(180deg, #F6F8FB 0%, #F1F3F2 100%);
}
button, input, select, textarea { font: inherit; color: inherit; }
a { color: inherit; }
::selection { background: rgba(44,46,51,.12); }
.hidden, [hidden] { display: none !important; }
svg.i { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; flex: none; }
svg.i.sm { width: 15px; height: 15px; }
.mono { font-family: var(--mono); font-size: .86em; letter-spacing: .02em; }
.muted { color: var(--ink3); }
.red { color: var(--alert); }
.num { font-variant-numeric: tabular-nums; }
.grow { flex: 1; min-width: 0; }
.row { display: flex; align-items: center; gap: 10px; }
.row.wrap { flex-wrap: wrap; }
.stack { display: flex; flex-direction: column; gap: 10px; }
.sp { flex: 1; }
.dotnum { font-family: var(--dot); font-weight: 600; letter-spacing: -.02em; font-variation-settings: 'ROND' 100; }
.dotnum small { font-family: var(--sans); font-variation-settings: normal; }
.tag { display: inline-flex; align-items: center; height: 20px; padding: 0 9px; border-radius: 999px; font-style: normal; font-size: 10.5px; font-weight: 500;
  background: rgba(255,255,255,.78); color: var(--ink2); white-space: nowrap; }
.tag.cream { background: var(--cream); color: var(--cream-ink); }
.tag.wine { background: var(--wine); color: #fff; }

/* ── glass ─────────────────────────────────────────────────────────────── */
.glass, .card, .gl {
  position: relative; background: var(--glass); border: 1px solid var(--edge); border-radius: 30px;
  -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); transition: background .35s;
}
.card, .gl { padding: 20px 22px; }
.card:hover, .gl:hover { background: rgba(255,255,255,.6); }
.card.tight { padding: 14px 16px; }
.card.flush { padding: 0; overflow: hidden; }
.card-head, .gl > header { display: flex; align-items: center; gap: 10px; margin: 0 0 14px; }
.card-head h3, .gl > header h3 { margin: 0; font-weight: 500; font-size: 15px; letter-spacing: -.01em; white-space: nowrap; }
.card-head .sub, .gl-muted { color: var(--ink3); font-size: 12px; }
.card-head .icon, .gl-ic, .fx-ic { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; flex: none; color: var(--ink2);
  background: rgba(255,255,255,.82); transition: transform .4s var(--ease); }
.gl:hover .gl-ic { transform: rotate(-10deg); }
.gl-ic svg, .fx-ic svg { width: 16px; height: 16px; }
.fx-ic { background: rgba(255,255,255,.2); color: #fff; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.gl-n { margin-left: auto; min-width: 28px; height: 28px; padding: 0 9px; border-radius: 999px; display: grid; place-items: center; font-size: 12px;
  background: rgba(255,255,255,.85); color: var(--ink); }
.gl-n + .gl-go { margin-left: 6px; }
.gl-go { margin-left: auto; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; color: var(--ink); text-decoration: none;
  background: rgba(255,255,255,.85); border: 0; cursor: pointer; transition: transform .4s var(--ease), background .25s; }
.gl-go svg { width: 14px; height: 14px; }
.gl-go:hover { transform: rotate(45deg); background: #fff; }
.gl-note { margin: 12px 0 0; font-size: 12.5px; color: var(--ink3); line-height: 1.5; }
.gl-note b { color: var(--ink2); font-weight: 500; }
.gl-note a { color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--line2); }

/* feathered colour tiles: deepest in the middle, softening toward the rounded
   edge, which a white hairline still draws. The glow is clipped to the tile. */
.fx { position: relative; isolation: isolate; overflow: hidden; color: #fff; text-decoration: none; border-radius: 34px;
  background: rgba(255,255,255,.08); border: 0; box-shadow: inset 0 0 0 1px rgba(255,255,255,.45), inset 0 1px 0 rgba(255,255,255,.5);
  transition: transform .5s var(--ease); text-shadow: 0 1px 14px rgba(60,8,20,.18); }
.fx::before { content: ''; position: absolute; inset: -22px; z-index: -2; border-radius: inherit; background: var(--fx); filter: blur(16px);
  transition: filter .6s var(--ease), transform .6s var(--ease); }
.fx::after { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .3; mix-blend-mode: soft-light;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .5 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
a.fx:hover, .fx.lift:hover { transform: translateY(-3px); }
.fx:hover::before { filter: blur(20px); transform: scale(1.02); }
/* the screens written before this palette call their lead tile fx-black and their second fx-red: lead = wine, second = amber */
.fx-wine, .fx-black { color: #fff; --fx: radial-gradient(farthest-corner at 55% 66%, var(--k800) 0%, var(--k600) 38%, var(--k400) 68%, var(--k250) 90%, var(--k100) 100%); text-shadow: 0 1px 14px rgba(var(--k900-rgb),.2); }
.fx-amber, .fx-red, .fx-rose { color: var(--ink); text-shadow: none; --fx: radial-gradient(farthest-corner at 45% 64%, var(--k300) 0%, var(--k250) 36%, var(--k200) 66%, var(--k100) 90%, var(--k50) 100%); }
.fx-slate { --fx: radial-gradient(farthest-corner at 52% 62%, #121418 0%, #1E2128 40%, #3A3F4A 72%, #747B8A 100%); text-shadow: 0 1px 14px rgba(0,0,0,.2); }
.fx-ink { --fx: radial-gradient(farthest-corner at 50% 62%, #0B0C0D 0%, #1C1E20 38%, #3D4144 70%, #8B9093 100%); }
.fx .muted, .fx .sub, .fx .gl-muted { color: rgba(255,255,255,.7); }
.fx .card-head .sub { color: rgba(255,255,255,.72); }
.fx-top { display: flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 500; }
.glass-pill { margin-left: auto; height: 32px; padding: 0 15px; border-radius: 999px; display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 500;
  background: rgba(255,255,255,.18); border: 1px solid rgba(255,255,255,.34); color: #fff; text-decoration: none; cursor: pointer;
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); transition: background .25s; text-shadow: none; font-family: inherit; }
.glass-pill:hover, .fx:hover .glass-pill { background: rgba(255,255,255,.3); }
.fx-big { margin-top: auto; display: flex; align-items: baseline; gap: 8px; }
.fx-big b { font-size: clamp(60px, 6.2vw, 100px); line-height: .85; }
.fx-big small { font-size: 14px; font-weight: 500; opacity: .85; }
.fx-sub { margin-top: 14px; font-size: 13px; opacity: .92; }
.fx-dot { margin: 0 6px; opacity: .6; }
.fx-av { width: 36px; height: 36px; border-radius: 50%; flex: none; display: grid; place-items: center; font-size: 12px; font-weight: 500; overflow: hidden;
  background: rgba(255,255,255,.22); box-shadow: inset 0 0 0 1px rgba(255,255,255,.45); text-shadow: none; }
.fx-av img { width: 100%; height: 100%; object-fit: cover; }
.fx-chip { margin-left: auto; height: 22px; padding: 0 10px; border-radius: 999px; display: inline-flex; align-items: center; font-size: 11px; font-weight: 500;
  background: rgba(255,255,255,.2); box-shadow: inset 0 0 0 1px rgba(255,255,255,.4); text-shadow: none; white-space: nowrap; }
/* cash drifting up through the money tile */
.cash { position: absolute; inset: 14px; z-index: -1; border-radius: 30px; overflow: hidden; pointer-events: none;
  -webkit-mask-image: radial-gradient(closest-side, #000 55%, transparent); mask-image: radial-gradient(closest-side, #000 55%, transparent); }
.cash i { position: absolute; left: var(--x); bottom: -40px; opacity: 0; animation: cash-up 7.5s linear infinite; animation-delay: var(--d); }
.cash .note { width: 38px; height: 22px; border-radius: 5px; border: 1.5px solid rgba(255,255,255,.7);
  background: radial-gradient(circle at 50% 50%, transparent 4px, rgba(255,255,255,.7) 4.5px, rgba(255,255,255,.7) 5.5px, transparent 6px), rgba(255,255,255,.12); }
.cash .coin { width: 15px; height: 15px; border-radius: 50%; border: 1.5px solid rgba(255,255,255,.75); background: rgba(255,255,255,.16); }
@keyframes cash-up { 0% { transform: translateY(0) rotate(var(--r,0deg)) scale(var(--s)); opacity: 0; } 12% { opacity: .85; } 70% { opacity: .6; }
  100% { transform: translateY(-460px) rotate(calc(var(--r,0deg) * -1.4)) scale(var(--s)); opacity: 0; } }
/* pulse rings in the attention tile */
.rings { position: absolute; right: 20%; top: 50%; width: 0; height: 0; z-index: -1; }
.rings i { position: absolute; left: 50%; top: 50%; width: 160px; height: 160px; margin: -80px 0 0 -80px; border-radius: 50%;
  border: 1.5px solid rgba(255,255,255,.55); animation: ring 3.6s cubic-bezier(.2,.6,.3,1) infinite; opacity: 0; }
.rings i:nth-child(2) { animation-delay: 1.2s; } .rings i:nth-child(3) { animation-delay: 2.4s; }
.rings i.core { width: 22px; height: 22px; margin: -11px 0 0 -11px; border: 0; background: #fff; opacity: .95; animation: none; box-shadow: 0 0 0 7px rgba(255,255,255,.3); }
@keyframes ring { 0% { transform: scale(.15); opacity: .9; } 100% { transform: scale(1); opacity: 0; } }

/* the feathered pill: icon, title over a line, a glass "Open" bubble */
.fxp { position: relative; display: flex; align-items: center; gap: 14px; padding: 9px 9px 9px 20px; min-height: 64px; border-radius: 999px; margin-bottom: 12px;
  color: #fff; text-decoration: none; overflow: hidden; isolation: isolate; cursor: pointer; border: 0; width: 100%; text-align: left; font: inherit;
  background: linear-gradient(100deg, var(--k400) 0%, var(--k600) 48%, var(--k800) 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.3), inset 0 0 0 1px rgba(255,255,255,.14);
  -webkit-backdrop-filter: blur(14px) saturate(1.3); backdrop-filter: blur(14px) saturate(1.3); transition: transform .45s var(--ease), filter .3s; }
.fxp::before { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(60% 120% at 18% 0%, rgba(255,255,255,.22), transparent 70%), radial-gradient(50% 90% at 80% 110%, rgba(50,8,18,.12), transparent 70%); }
.fxp:hover { transform: translateY(-1px); filter: brightness(1.05); }
.fxp-amber { color: var(--ink); background: linear-gradient(100deg, var(--k100) 0%, var(--k250) 50%, var(--k300) 100%); }
.fxp-slate { background: linear-gradient(100deg, #5A6065 0%, #3A3E42 50%, #2C2E33 100%); }
.fxp-ic { width: 28px; height: 28px; display: grid; place-items: center; flex: none; opacity: .95; }
.fxp-t { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.2; }
.fxp-t b { font-size: 15.5px; font-weight: 400; letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fxp-t i { font-style: normal; font-size: 12.5px; color: rgba(255,255,255,.66); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fxp-go { height: 44px; padding: 0 20px; border-radius: 999px; display: inline-flex; align-items: center; font-size: 13.5px; flex: none;
  background: rgba(255,255,255,.14); box-shadow: inset 0 1px 0 rgba(255,255,255,.28), inset 0 0 0 1px rgba(255,255,255,.12); transition: background .25s; }
.fxp:hover .fxp-go { background: rgba(255,255,255,.24); }

/* ── type ──────────────────────────────────────────────────────────────── */
h1, h2, h3, h4 { font-family: var(--sans); }
.big { font-weight: 300; letter-spacing: -.045em; line-height: 1; }
.fig { font-weight: 300; font-size: 40px; letter-spacing: -.045em; line-height: 1.05; font-variant-numeric: tabular-nums; }
.fig small { font-size: .32em; font-weight: 500; letter-spacing: 0; margin-left: 4px; color: var(--ink3); }
.fx .fig small { color: rgba(255,255,255,.8); }
.fig i { font-style: normal; opacity: .38; }
.kicker { font-family: var(--mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--ink3); display: inline-flex; align-items: center; gap: 7px; }

/* ── buttons ───────────────────────────────────────────────────────────── */
.btn {
  height: 40px; padding: 0 18px; border-radius: 999px; border: 1px solid var(--edge); background: var(--glass2);
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; cursor: pointer; white-space: nowrap;
  font-size: 13.5px; font-weight: 500; color: var(--ink); transition: background .25s, transform .2s var(--ease), opacity .2s;
  -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); text-decoration: none;
}
.btn:hover { background: rgba(255,255,255,.95); }
.btn:active { transform: scale(.97); }
.btn:disabled { opacity: .45; cursor: not-allowed; transform: none; }
.btn.primary, .btn.dark { background: var(--ink); color: #fff; border-color: var(--ink); }
.btn.primary:hover, .btn.dark:hover { background: #2C2F31; }
.btn.ghost { background: transparent; border-color: var(--line2); -webkit-backdrop-filter: none; backdrop-filter: none; }
.btn.ghost:hover { background: rgba(255,255,255,.65); }
.btn.danger { color: var(--alert); }
.btn.danger.solid { background: var(--alert); color: #fff; border-color: var(--alert); }
.btn.sm { height: 32px; padding: 0 13px; font-size: 12.5px; }
.btn.lg { height: 48px; padding: 0 24px; font-size: 14.5px; }
.btn.icon { width: 40px; padding: 0; }
.btn.sm.icon { width: 32px; }
.link { border: 0; background: none; padding: 0; cursor: pointer; color: var(--ink); font-weight: 500; font-size: inherit; text-decoration: none; border-bottom: 1px solid var(--line2); }
.link:hover { border-bottom-color: var(--ink); }
.link.ink { color: var(--ink2); border-bottom: 0; }

/* ── forms ─────────────────────────────────────────────────────────────── */
.field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.field > span { font-size: 12px; font-weight: 500; color: var(--ink2); }
.field > span em { font-style: normal; color: var(--ink3); font-weight: 400; }
.input, .field input:not([type=checkbox]):not([type=radio]):not([type=file]), .field select, .field textarea, select.input, textarea.input {
  width: 100%; height: 42px; padding: 0 14px; border-radius: 14px; border: 1px solid var(--line2); background: rgba(255,255,255,.65);
  outline: none; transition: border-color .2s, box-shadow .2s, background .2s; font-size: 14px;
}
.field textarea, textarea.input { height: auto; min-height: 90px; padding: 10px 14px; resize: vertical; line-height: 1.5; }
.input:focus, .field input:focus, .field select:focus, .field textarea:focus { background: #fff; border-color: var(--ink2); box-shadow: 0 0 0 4px rgba(44,46,51,.07); }
.field .hint { font-size: 11.5px; color: var(--ink3); }
.grid2 { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 12px; }
.grid3 { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 12px; }
.grid4 { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 12px; }
.span2 { grid-column: span 2; } .span3 { grid-column: span 3; } .spanall { grid-column: 1 / -1; }
.search { display: flex; align-items: center; gap: 8px; height: 44px; padding: 0 18px; border-radius: 999px; background: var(--glass2); border: 1px solid var(--edge); min-width: 240px;
  -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); }
.search input { border: 0; background: none; outline: none; flex: 1; min-width: 0; font-size: 14px; }
.search:focus-within { background: #fff; }
.switch { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; user-select: none; font-size: 13.5px; }
.switch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.switch i { position: relative; width: 40px; height: 23px; border-radius: 999px; background: rgba(20,22,24,.14); flex: none; transition: background .25s; }
.switch i::after { content: ''; position: absolute; top: 2px; left: 2px; width: 19px; height: 19px; border-radius: 50%; background: #fff; transition: transform .3s cubic-bezier(.3,1.4,.5,1); }
.switch input:checked + i { background: var(--ink); }
.switch input:checked + i::after { transform: translateX(17px); }
.switch input:focus-visible + i { outline: 2px solid var(--ink); outline-offset: 2px; }
.days { display: flex; gap: 6px; flex-wrap: wrap; }
.days button, .chip-btn { height: 34px; min-width: 44px; padding: 0 13px; border-radius: 999px; border: 1px solid var(--line2); background: rgba(255,255,255,.7); cursor: pointer; font-size: 12.5px; }
.days button.on, .chip-btn.on { background: var(--ink); border-color: var(--ink); color: #fff; }
.drop { border: 1.5px dashed var(--line2); border-radius: 18px; padding: 16px; text-align: center; color: var(--ink3); cursor: pointer; transition: border-color .2s, background .2s; font-size: 13px;
  background: ; }
.drop:hover, .drop.over { border-color: var(--ink2); background: rgba(255,255,255,.7); color: var(--ink2); }
.drop input { display: none; }
.picked { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.picked span { font-size: 12px; background: #fff; border-radius: 999px; padding: 4px 10px; border: 1px solid var(--line); }
/* people pickers: tick people as chips */
.pick { display: flex; flex-wrap: wrap; gap: 6px; max-height: 170px; overflow-y: auto; padding: 2px; }
.pick label { display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 12px 0 4px; border-radius: 999px; background: rgba(255,255,255,.7);
  border: 1px solid var(--line2); cursor: pointer; font-size: 12.5px; transition: background .2s, border-color .2s; }
.pick input { display: none; }
.pick label:has(input:checked) { background: var(--ink); border-color: var(--ink); color: #fff; }

/* ── pills, badges, avatars ────────────────────────────────────────────── */
.pill { display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 10px; border-radius: 999px; font-size: 11px; font-weight: 500; white-space: nowrap;
  background: rgba(20,22,24,.06); color: var(--ink2); }
.pill::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .75; }
.pill.plain::before { display: none; }
.pill.red { background: var(--alert-soft); color: var(--alert); }
.pill.dark { background: var(--ink); color: #fff; }
.pill.ok { background: var(--ok-soft); color: var(--ok); }
.pill.warn { background: var(--amber-soft); color: var(--amber-d); }
.pill.slate { background: var(--slate-soft); color: var(--slate-d); }
.pill.soft { background: rgba(255,255,255,.82); }
.pill.grad { background: var(--cream); color: var(--cream-ink); }
.badge { min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--alert); color: #fff; font-size: 10.5px; font-weight: 600;
  display: inline-grid; place-items: center; line-height: 1; font-style: normal; }
.av { width: 34px; height: 34px; border-radius: 50%; flex: none; display: grid; place-items: center; font-size: 12px; font-weight: 500; color: #fff; overflow: hidden;
  background: radial-gradient(closest-side at 50% 58%, var(--k800), var(--k300) 60%, var(--k50)); }
.av img { width: 100%; height: 100%; object-fit: cover; }
.av.sm { width: 26px; height: 26px; font-size: 10px; }
.av.lg { width: 64px; height: 64px; font-size: 20px; }
.av.xl { width: 92px; height: 92px; font-size: 28px; }
.av.r1 { background: radial-gradient(closest-side at 50% 58%, var(--k300), var(--k200) 60%, var(--k50)); }
.av.r2 { background: radial-gradient(closest-side at 50% 58%, #3F4448, #8E9498 60%, #E6E8E9); }
.avs { display: flex; } .avs .av { border: 2px solid #fff; margin-left: -8px; } .avs .av:first-child { margin-left: 0; }

/* ── the shell: a header of pills, the page under it ───────────────────── */
.shell { min-height: 100vh; }
.gx-top { position: sticky; top: 0; z-index: 50; display: flex; align-items: center; gap: 14px; padding: 16px 28px 14px; max-width: 1480px; margin: 0 auto; }
.gx-lead, .gx-tail { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0; }
.gx-tail { justify-content: flex-end; }
.gxg { background: var(--glass2); border: 1px solid var(--edge); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); }
.gx-brand, .gx-ic { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; flex: none; color: var(--ink2); cursor: pointer;
  transition: background .25s, transform .25s var(--ease); text-decoration: none; position: relative; }
.gx-brand img { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; }
.gx-ic:hover, .gx-brand:hover, .gx-crumb:hover, .gx-me:hover, .gx-duty:hover { background: rgba(255,255,255,.95); }
.gx-ic:active { transform: scale(.93); }
.gx-ic .badge { position: absolute; top: -2px; right: -2px; }
.gx-crumb { height: 44px; padding: 0 16px 0 18px; border-radius: 999px; display: flex; align-items: center; gap: 6px; font-size: 14px; color: var(--ink3); cursor: pointer;
  white-space: nowrap; transition: background .25s; }
.gx-crumb b { color: var(--ink); font-weight: 500; }
.gx-nav { display: flex; align-items: center; gap: 0; padding: 5px; border-radius: 999px; position: relative; flex: none; background: rgba(255,255,255,.4) !important; }
.gx-nav button { position: relative; z-index: 1; height: 38px; padding: 0 16px; border: 0; border-radius: 999px; background: none; cursor: pointer;
  font-size: 13.5px; color: var(--ink2); display: flex; align-items: center; gap: 7px; white-space: nowrap; transition: color .25s, transform .35s cubic-bezier(.3,1.6,.5,1); }
.gx-nav button:hover, .gx-nav button.on, .gx-nav button.pop { color: var(--ink); }
.gx-nav button.pop { transform: scale(1.06); }
.gx-nav .more { width: 38px; padding: 0; justify-content: center; }
.gx-nav em { font-style: normal; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; display: grid; place-items: center; font-size: 10.5px; font-weight: 600;
  background: var(--alert); color: #fff; }
.gx-duty { height: 44px; padding: 0 16px 0 14px; border-radius: 999px; display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ink2);
  cursor: pointer; white-space: nowrap; transition: background .25s; max-width: 230px; min-width: 0; flex: 0 1 auto; }
.gx-duty span { overflow: hidden; text-overflow: ellipsis; }
.gx-duty .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ink4); flex: none; }
.gx-duty.in .dot { background: var(--ok); box-shadow: 0 0 0 4px var(--ok-soft); }
.gx-duty.live { background: var(--ink) !important; color: #fff; border-color: var(--ink); }
.gx-duty.live .dot { background: #fff; animation: live 2s ease-in-out infinite; }
@keyframes live { 50% { box-shadow: 0 0 0 6px rgba(255,255,255,.15); } }
.gx-me { height: 44px; padding: 4px 14px 4px 4px; border-radius: 999px; display: flex; align-items: center; gap: 10px; cursor: pointer; color: var(--ink); transition: background .25s; }
.gx-me .av { width: 36px; height: 36px; }
.gx-who { display: flex; flex-direction: column; text-align: left; line-height: 1.15; }
.gx-who b, .gx-who i { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 150px; }
.gx-who b { font-size: 13px; font-weight: 500; } .gx-who i { font-style: normal; font-size: 11px; color: var(--ink3); }
.view { max-width: 1480px; margin: 0 auto; padding: 18px 28px 90px; }

/* the liquid bead under the chosen pill of any pill bar */
.lq-ind { position: absolute; z-index: 0; left: 0; top: 0; border-radius: 999px; pointer-events: none;
  background: radial-gradient(120% 140% at 50% 120%, rgba(255,255,255,.98), rgba(255,255,255,.62) 60%, rgba(255,255,255,.42));
  box-shadow: inset 0 1px 1px #fff, inset 0 -1.5px 2px rgba(255,255,255,.7), inset 0 0 0 1px rgba(255,255,255,.88), inset 0 -6px 12px rgba(20,22,24,.035), 0 0 0 .5px rgba(20,22,24,.07); }
.lq-ind::before { content: ''; position: absolute; left: 14%; right: 14%; top: 2px; height: 38%; border-radius: 999px; background: linear-gradient(180deg, rgba(255,255,255,.95), rgba(255,255,255,0)); opacity: .8; }

/* menus */
.menu { position: fixed; z-index: 950; min-width: 240px; padding: 6px; border-radius: 22px; background: rgba(255,255,255,.86); border: 1px solid #fff;
  -webkit-backdrop-filter: blur(24px) saturate(1.5); backdrop-filter: blur(24px) saturate(1.5); animation: rise .22s var(--ease); max-height: calc(100vh - 90px); overflow-y: auto; }
.menu button, .menu a { width: 100%; display: flex; align-items: center; gap: 10px; padding: 7px 12px 7px 7px; border: 0; background: none; border-radius: 16px; cursor: pointer; text-align: left;
  text-decoration: none; font-size: 13.5px; color: var(--ink2); }
.menu button:hover, .menu a:hover { background: rgba(255,255,255,.98); color: var(--ink); }
.menu button.on { color: var(--ink); font-weight: 500; }
.menu button > svg.i { width: 32px; height: 32px; padding: 8px; border-radius: 50%; background: rgba(255,255,255,.9); color: var(--ink2); }
.menu button i.hint { margin-left: auto; font-style: normal; font-size: 11px; color: var(--ink3); }
.menu .sep { height: 1px; background: var(--line); margin: 5px 8px; }
.menu .head { padding: 10px 12px 8px; }
.menu .danger { color: var(--alert); }
.notes { width: min(400px, 92vw); max-height: min(560px, 80vh); }
.note { display: flex; gap: 10px; padding: 11px 12px; border-radius: 16px; cursor: pointer; }
.note:hover { background: rgba(255,255,255,.95); }
.note .d { width: 8px; height: 8px; margin-top: 6px; border-radius: 50%; background: transparent; flex: none; }
.note.unread .d { background: var(--alert); }
.note b { font-weight: 500; font-size: 13px; display: block; }
.note p { margin: 2px 0 0; font-size: 12px; color: var(--ink3); }
.note time { font-size: 11px; color: var(--ink4); }

/* ── page furniture ────────────────────────────────────────────────────── */
.page { max-width: 1480px; margin: 0 auto; }
.page-head { display: flex; align-items: flex-end; gap: 30px; flex-wrap: wrap; padding: 14px 4px 28px; }
.page-head h1 { margin: 0; font-weight: 300; font-size: clamp(36px, 3.4vw, 52px); letter-spacing: -.045em; line-height: 1.02; }
.page-head p { margin: 8px 0 0; color: var(--ink3); font-size: 14px; max-width: 52ch; }
.page-head .acts { margin-left: auto; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.figs { display: flex; gap: clamp(22px, 3vw, 50px); margin-left: auto; flex-wrap: wrap; }
.figs > div { display: grid; grid-template-columns: auto auto; align-items: start; column-gap: 8px; }
.figs b { font-family: var(--dot); font-weight: 600; font-variation-settings: 'ROND' 100; font-size: 46px; line-height: .9; letter-spacing: -.02em; color: var(--ink); font-variant-numeric: tabular-nums; }
.figs b small { font-family: var(--sans); font-size: 13px; font-weight: 500; letter-spacing: 0; color: var(--ink3); margin-left: 4px; }
.figs span { grid-column: 1 / -1; margin-top: 10px; font-size: 12px; color: var(--ink3); }
.figs em { font-style: normal; display: inline-flex; align-items: center; height: 20px; padding: 0 9px; border-radius: 999px; font-size: 10.5px; font-weight: 500;
  background: rgba(255,255,255,.8); color: var(--ink2); white-space: nowrap; align-self: start; }
.figs em.red { background: var(--alert); color: #fff; }
.figs em.cream { background: var(--cream); color: var(--cream-ink); }
.toolbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0 4px 16px; }
.section-title { font-size: 13px; font-weight: 600; color: var(--ink2); margin: 24px 6px 10px; display: flex; align-items: center; gap: 8px; }
.section-title .count { font-weight: 500; color: var(--ink3); font-size: 12px; }
.bento { display: grid; grid-template-columns: repeat(12, minmax(0,1fr)); gap: 16px; }
.b3 { grid-column: span 3; } .b4 { grid-column: span 4; } .b5 { grid-column: span 5; } .b6 { grid-column: span 6; }
.b7 { grid-column: span 7; } .b8 { grid-column: span 8; } .b9 { grid-column: span 9; } .b12 { grid-column: span 12; }

/* tab bars and segmented choices; core/liquid.js lays the bead under the chosen one */
.seg { position: relative; display: inline-flex; align-items: center; gap: 2px; padding: 4px; border-radius: 999px; background: var(--glass2);
  border: 1px solid var(--edge); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.seg::-webkit-scrollbar { display: none; }
.seg > button { position: relative; z-index: 1; height: 36px; padding: 0 16px; border: 0; background: none; border-radius: 999px; cursor: pointer; flex: none;
  font-size: 13.5px; color: var(--ink2); white-space: nowrap; display: inline-flex; align-items: center; gap: 6px; transition: color .2s, transform .35s cubic-bezier(.3,1.6,.5,1); }
.seg > button:hover, .seg > button.on, .seg > button.pop { color: var(--ink); }
.seg > button.on { font-weight: 500; }
.seg > button.pop { transform: scale(1.05); }
.seg > button .badge { transform: scale(.9); }
.seg > button em { font-style: normal; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; display: inline-grid; place-items: center; font-size: 11px;
  background: rgba(20,22,24,.06); color: var(--ink2); }
.seg > button.on em { background: var(--cream); color: var(--cream-ink); }
.seg.sm > button { height: 28px; padding: 0 12px; font-size: 12px; }
.seg.dark, .seg.flat { background: rgba(20,22,24,.05); border-color: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; }

/* tables as glass rows */
.tbl { width: 100%; border-collapse: separate; border-spacing: 0; }
.tbl th { text-align: left; font-size: 11px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: var(--ink3); padding: 8px 14px; white-space: nowrap;
  border-bottom: 1px solid var(--line2); }
.tbl td { padding: 13px 14px; border-bottom: 1px dashed var(--line2); vertical-align: middle; }
.tbl tr:last-child td { border-bottom: 0; }
.tbl tr.click { cursor: pointer; }
.tbl tr.click td { transition: background .2s; }
.tbl tr.click:hover td { background: rgba(255,255,255,.7); }
.tbl tr.click:hover td:first-child { border-radius: 16px 0 0 16px; } .tbl tr.click:hover td:last-child { border-radius: 0 16px 16px 0; }
.tbl .r { text-align: right; } .tbl .c { text-align: center; }
.tbl-wrap { overflow-x: auto; padding: 8px 10px; border-radius: 30px; background: var(--glass); border: 1px solid var(--edge); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); }
.card .tbl-wrap, .gl .tbl-wrap, .card.flush .tbl-wrap { background: none; border: 0; padding: 0; -webkit-backdrop-filter: none; backdrop-filter: none; }
.list-row { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 20px; background: rgba(255,255,255,.55); margin-bottom: 6px;
  transition: background .2s, transform .35s var(--ease); }
.list-row.click { cursor: pointer; }
.list-row.click:hover { background: rgba(255,255,255,.92); transform: translateX(3px); }
.list-row b { font-weight: 500; }
.list-row .meta { font-size: 12px; color: var(--ink3); }
.empty { padding: 30px 20px; text-align: center; color: var(--ink3); border-radius: 22px; font-size: 13.5px;
  background: ; }
.empty b { display: block; color: var(--ink2); font-weight: 500; font-size: 15px; margin-bottom: 4px; }
.loading { padding: 60px; text-align: center; color: var(--ink3); }
.loading i { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--ink); margin: 0 3px; animation: dotb 1s ease-in-out infinite; }
.loading i:nth-child(2) { animation-delay: .15s; } .loading i:nth-child(3) { animation-delay: .3s; }
@keyframes dotb { 50% { transform: translateY(-7px); opacity: .35; } }
.track { position: relative; height: 4px; border-radius: 999px; background: repeating-linear-gradient(90deg, rgba(20,22,24,.16) 0 3px, transparent 3px 7px); overflow: hidden; }
.track i { display: block; height: 100%; border-radius: 999px; background: var(--ink); transform-origin: left; animation: grow .9s var(--ease) both; }
.track.wine i { background: var(--wine); }
.fx .track { background: repeating-linear-gradient(90deg, rgba(255,255,255,.4) 0 3px, transparent 3px 7px); } .fx .track i { background: #fff; }
@keyframes grow { from { transform: scaleX(0); } }
.kv { display: grid; grid-template-columns: 130px minmax(0,1fr); gap: 8px 14px; font-size: 13.5px; }
.kv dt { color: var(--ink3); } .kv dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }

/* ── modal, drawer, toast ──────────────────────────────────────────────── */
.modal-back { position: fixed; inset: 0; z-index: 900; display: grid; place-items: center; padding: 20px; background: rgba(232,234,233,.5);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); animation: fade .2s ease; }
@keyframes fade { from { opacity: 0; } }
.modal { width: min(560px, 100%); max-height: calc(100vh - 40px); overflow-y: auto; border-radius: 30px; padding: 26px 26px 22px;
  background: rgba(255,255,255,.88); border: 1px solid #fff; -webkit-backdrop-filter: blur(30px) saturate(1.5); backdrop-filter: blur(30px) saturate(1.5);
  animation: rise .35s var(--ease); }
.modal.wide { width: min(860px, 100%); }
.modal.xwide { width: min(1100px, 100%); }
@keyframes rise { from { opacity: 0; transform: translateY(14px) scale(.985); } }
.modal h3 { margin: 0; font-weight: 300; font-size: 28px; letter-spacing: -.04em; }
.modal .sub { margin: 6px 0 18px; color: var(--ink3); font-size: 13.5px; }
.modal .body { display: flex; flex-direction: column; gap: 14px; }
.modal .foot { display: flex; align-items: center; gap: 10px; justify-content: flex-end; margin-top: 20px; padding-top: 14px; border-top: 1px solid var(--line); }
.modal .foot .left { margin-right: auto; }
.drawer-back { position: fixed; inset: 0; z-index: 850; background: rgba(232,234,233,.4); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); animation: fade .2s ease; }
.drawer { position: fixed; top: 14px; right: 14px; bottom: 14px; z-index: 860; width: min(720px, calc(100vw - 28px)); border-radius: 32px; overflow-y: auto;
  background: rgba(255,255,255,.88); border: 1px solid #fff; -webkit-backdrop-filter: blur(30px) saturate(1.5); backdrop-filter: blur(30px) saturate(1.5);
  animation: slidein .4s var(--ease); padding: 24px 26px; overscroll-behavior: contain; }
@keyframes slidein { from { transform: translateX(40px); opacity: 0; } }
.drawer .x { position: absolute; top: 18px; right: 18px; }
.toasts { position: fixed; bottom: 22px; left: 50%; transform: translateX(-50%); z-index: 1000; display: flex; flex-direction: column; gap: 8px; align-items: center; pointer-events: none; }
.toast { pointer-events: auto; padding: 11px 20px; border-radius: 999px; background: rgba(255,255,255,.92); border: 1px solid #fff; color: var(--ink); font-size: 13.5px;
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); animation: rise .3s var(--ease); max-width: min(560px, 92vw); }
.toast.err { background: var(--ink); color: #fff; border-color: var(--ink); }

/* ── task timeline (in the task drawer) ────────────────────────────────── */
.tl { position: relative; padding-left: 22px; }
.tl::before { content: ''; position: absolute; left: 6px; top: 6px; bottom: 6px; width: 1px; background: var(--line2); }
.tl-item { position: relative; padding: 0 0 16px; }
.tl-item::before { content: ''; position: absolute; left: -20px; top: 4px; width: 9px; height: 9px; border-radius: 50%; background: #fff; border: 2px solid var(--ink4); }
.tl-item.k-accepted::before, .tl-item.k-approved::before, .tl-item.k-completed::before { border-color: var(--ink); background: var(--ink); }
.tl-item.k-submitted::before, .tl-item.k-started::before, .tl-item.k-resumed::before, .tl-item.k-preponed::before { border-color: var(--slate); background: var(--slate); }
.tl-item.k-changes::before, .tl-item.k-declined::before, .tl-item.k-carried_over::before, .tl-item.k-pending::before, .tl-item.k-cancelled::before, .tl-item.k-rescheduled::before { border-color: var(--amber); background: var(--amber); }
.tl-item .h { font-size: 13px; } .tl-item .h b { font-weight: 500; }
.tl-item time { font-size: 11.5px; color: var(--ink3); margin-left: 6px; }
.tl-item .n { margin-top: 4px; font-size: 13px; color: var(--ink2); background: rgba(255,255,255,.75); border-radius: 14px; padding: 8px 12px; white-space: pre-wrap; }

/* ── sign-in ───────────────────────────────────────────────────────────── */
.signin { position: fixed; inset: 0; z-index: 800; overflow-y: auto; display: flex; flex-direction: column; }
.si-top { display: flex; align-items: center; gap: 10px; padding: 20px 26px; }
.si-brand { height: 44px; padding: 0 16px 0 6px; border-radius: 999px; display: inline-flex; align-items: center; gap: 10px; background: var(--glass2); border: 1px solid var(--edge); }
.si-brand img { width: 32px; height: 32px; border-radius: 50%; }
.si-brand b { font-weight: 600; letter-spacing: -.02em; } .si-brand b i { font-style: normal; font-weight: 300; }
.si-main { flex: 1; display: grid; grid-template-columns: minmax(0,1.1fr) minmax(360px,440px); gap: clamp(30px,6vw,96px); align-items: center;
  width: min(1180px,100%); margin: 0 auto; padding: 10px 28px 30px; }
.si-side { max-width: 560px; animation: rise .7s var(--ease) both; }
.si-side h1 { margin: 14px 0 0; font-weight: 300; font-size: clamp(40px,4.6vw,66px); line-height: 1; letter-spacing: -.05em; }
.si-side h1 em { font-style: normal; color: var(--ink3); }
.si-side .lede { margin: 18px 0 26px; font-size: 15.5px; color: var(--ink2); max-width: 46ch; line-height: 1.55; }
.si-feats { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.si-feat { display: grid; grid-template-columns: auto 1fr; column-gap: 12px; row-gap: 2px; padding: 14px 16px; border-radius: 24px; background: var(--glass); border: 1px solid var(--edge); }
.si-feat:nth-child(2) { isolation: isolate; overflow: hidden; color: #fff; border: 0; background: none; position: relative; box-shadow: inset 0 0 0 1px rgba(255,255,255,.4); }
.si-feat:nth-child(2)::before { content: ''; position: absolute; inset: -20px; z-index: -1; filter: blur(14px);
  background: radial-gradient(farthest-corner at 50% 62%, var(--k600) 0%, var(--k500) 34%, var(--k300) 62%, var(--k200) 86%, var(--k50) 100%); }
.si-feat:nth-child(2) span { color: rgba(255,255,255,.75); }
.si-feat:nth-child(2) .ic { background: rgba(255,255,255,.2); color: #fff; }
.si-feat .ic { grid-row: 1 / span 2; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: rgba(255,255,255,.85); color: var(--ink2); }
.si-feat b { font-weight: 500; font-size: 14px; } .si-feat span { font-size: 12.5px; color: var(--ink3); line-height: 1.4; }
.si-card { position: relative; padding: 34px 34px 28px; border-radius: 38px; background: rgba(255,255,255,.62); border: 1px solid #fff;
  -webkit-backdrop-filter: blur(26px) saturate(1.5); backdrop-filter: blur(26px) saturate(1.5); animation: rise .7s .08s var(--ease) both; }
.si-card .logo { display: block; width: 52px; height: 52px; margin: 0 auto 18px; border-radius: 50%; }
.si-card h2 { margin: 0; text-align: center; font-weight: 300; font-size: 40px; letter-spacing: -.05em; }
.si-card .sub { text-align: center; margin: 8px 0 22px; color: var(--ink3); font-size: 13.5px; }
.si-in { display: flex; align-items: center; gap: 10px; height: 54px; padding: 0 18px; border-radius: 999px; background: rgba(255,255,255,.7); border: 1px solid var(--line); margin-bottom: 12px; transition: all .2s; }
.si-in:focus-within { background: #fff; border-color: var(--ink2); box-shadow: 0 0 0 4px rgba(44,46,51,.06); }
.si-in input { flex: 1; border: 0; background: none; outline: none; font-size: 15px; min-width: 0; height: 100%; }
.si-in svg { width: 18px; height: 18px; stroke: var(--ink3); fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.si-row { display: flex; align-items: center; justify-content: space-between; margin: 2px 4px 18px; font-size: 12.5px; color: var(--ink2); }
.si-go { width: 100%; height: 56px; border: 0; border-radius: 999px; background: var(--ink); color: #fff; font-size: 15px; font-weight: 500; cursor: pointer;
  display: flex; align-items: center; justify-content: center; position: relative; transition: background .2s; }
.si-go:hover { background: #2C2F31; }
.si-go i { position: absolute; right: 6px; top: 6px; width: 44px; height: 44px; border-radius: 50%; background: rgba(255,255,255,.14); display: grid; place-items: center; }
.si-go i svg { width: 18px; height: 18px; stroke: #fff; fill: none; stroke-width: 2; }
.si-msg { min-height: 20px; text-align: center; font-size: 13px; color: var(--alert); margin: 10px 0 0; }
.si-foot { text-align: center; padding: 16px; font-size: 12px; color: var(--ink3); }

/* ── boot splash ───────────────────────────────────────────────────────── */
.boot { position: fixed; inset: 0; z-index: 2000; display: grid; place-items: center; background: var(--bg); transition: opacity .35s; }
.boot img { width: 72px; height: 72px; border-radius: 50%; animation: bootin .6s var(--ease) both; }
@keyframes bootin { from { opacity: 0; transform: scale(.9); filter: blur(6px); } }

/* ── shared bits used by several screens ───────────────────────────────── */
.kanban { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(260px, 1fr); gap: 14px; overflow-x: auto; padding-bottom: 10px; align-items: start; }
.kcol { border-radius: 28px; padding: 12px; background: rgba(255,255,255,.36); border: 1px solid var(--edge); min-height: 200px; transition: background .2s; }
.kcol.over { background: rgba(255,255,255,.75); }
.kcol-head { display: flex; align-items: center; gap: 8px; padding: 4px 6px 10px; }
.kcol-head b { font-weight: 500; font-size: 13.5px; }
.kcol-head span { font-size: 12px; color: var(--ink3); }
.kcard { padding: 13px 14px; border-radius: 20px; background: rgba(255,255,255,.82); border: 1px solid #fff; margin-bottom: 8px; cursor: grab; transition: transform .3s var(--ease); }
.kcard:hover { transform: translateY(-2px); }
.kcard.dragging { opacity: .4; }
.kcard b { display: block; font-weight: 500; font-size: 13.5px; }
.kcard .v { font-weight: 300; font-size: 20px; letter-spacing: -.03em; margin: 6px 0 4px; }
.prio { width: 8px; height: 8px; border-radius: 50%; flex: none; background: var(--ink4); }
.prio.high { background: var(--amber); } .prio.urgent { background: var(--alert); box-shadow: 0 0 0 3px var(--alert-soft); } .prio.low { background: rgba(20,22,24,.18); }
/* attendance month */
.cal { display: grid; grid-template-columns: repeat(7, minmax(0,1fr)); gap: 6px; }
.cal .dow { font-size: 11px; color: var(--ink3); text-align: center; padding-bottom: 2px; }
.cal .d { min-height: 74px; border-radius: 16px; padding: 7px 9px; background: rgba(255,255,255,.5); font-size: 11.5px; display: flex; flex-direction: column; gap: 2px; transition: background .2s; }
.cal .d .n { font-weight: 500; font-size: 12px; }
.cal .d.off, .cal .d.none { background: transparent; color: var(--ink4); }
.cal .d.present { background: rgba(255,255,255,.85); }
.cal .d.late { background: #fff; box-shadow: inset 0 -3px 0 var(--amber); }
.cal .d.absent { background: var(--alert-soft); color: var(--alert); }
.cal .d.leave { background: var(--slate-soft); color: var(--slate-d); }
.cal .d.holiday { background: var(--cream); color: var(--cream-ink); }
.cal .d.flagged { background: #fff; box-shadow: inset 0 0 0 1.5px var(--amber); }
.cal .d.today { outline: 2px solid var(--ink); outline-offset: 1px; }
.legend { display: flex; flex-wrap: wrap; gap: 12px; font-size: 12px; color: var(--ink3); }
.legend i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 5px; vertical-align: -1px; }
/* thin bars (money in / out) */
.bars { display: flex; align-items: flex-end; gap: 4px; height: 140px; }
.bars .bw { flex: 1; display: flex; align-items: flex-end; justify-content: center; gap: 2px; height: 100%; position: relative; }
.bars .bw i { width: 3px; max-width: 40%; border-radius: 2px; min-height: 2px; transform-origin: bottom; animation: barup .8s var(--ease) both; }
.bars .bw i.in { background: var(--ink); } .bars .bw i.out { background: var(--alert); }
.fx .bars .bw i.in { background: #fff !important; } .fx .bars .bw i.out { background: rgba(255,255,255,.4); }
@keyframes barup { from { transform: scaleY(0); } }
.bars-x { display: flex; gap: 4px; margin-top: 6px; } .bars-x span { flex: 1; text-align: center; font-size: 10.5px; color: var(--ink3); }
.split { display: flex; height: 10px; gap: 3px; }
.split i { display: block; height: 100%; border-radius: 999px; min-width: 6px; }
.file-list { display: flex; flex-direction: column; gap: 6px; }
.file { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 18px; background: rgba(255,255,255,.7); text-decoration: none; }
.file:hover { background: #fff; }
.file .ext { width: 34px; height: 34px; border-radius: 12px; display: grid; place-items: center; font-family: var(--mono); font-size: 9.5px; font-weight: 600; text-transform: uppercase; background: var(--ink); color: #fff; flex: none; overflow: hidden; }
.file .ext img { width: 100%; height: 100%; object-fit: cover; }
.file b { font-weight: 500; font-size: 13px; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.file small { color: var(--ink3); font-size: 11.5px; }

/* ═══ the overview (console composition) ═══════════════════════════════════ */
.ov-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 30px; padding: 14px 4px 30px; flex-wrap: wrap; }
.ov-head h1 { margin: 6px 0 0; font-weight: 300; font-size: clamp(36px, 3.6vw, 52px); line-height: 1.02; letter-spacing: -.045em; }
/* sixty days as a dotted strip, a glass pill riding on it */
.strip { position: relative; margin: -6px 0 22px; padding: 30px 18px 14px; border-radius: 999px; }
.strip::before { content: ''; position: absolute; left: 0; right: 0; top: 22px; bottom: 4px; border-radius: 999px; background: rgba(255,255,255,.42);
  border: 1px solid rgba(255,255,255,.8); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); }
.strip-days { position: relative; display: flex; align-items: center; height: 46px; }
.st-d { position: relative; flex: 1; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; cursor: default; }
.st-d i { display: block; border-radius: 50%; transition: transform .3s var(--ease); }
.st-d i.a { width: 3px; height: 3px; background: rgba(20,22,24,calc(.12 + var(--a) * .55)); }
.st-d i.p { width: 7px; height: 7px; background: var(--wine); }
.st-d i.s { width: 7px; height: 7px; background: var(--amber); }
.st-d.today::after { content: ''; position: absolute; top: 8px; bottom: 8px; width: 2px; border-radius: 2px; background: var(--ink); }
.st-d.hot i { transform: scale(1.6); } .st-d.hot i.a { background: var(--ink); }
.st-d em { position: absolute; left: 0; bottom: -2px; font-style: normal; font-size: 10.5px; color: var(--ink3); white-space: nowrap; }
.st-d em::before { content: ''; position: absolute; left: 0; bottom: 16px; width: 1.5px; height: 14px; border-radius: 2px; background: rgba(20,22,24,.25); }
.st-pill { position: absolute; top: 2px; left: 50%; z-index: 2; padding: 10px 20px 10px 16px; border-radius: 999px; pointer-events: none; white-space: nowrap;
  background: linear-gradient(180deg, rgba(255,255,255,.94), rgba(255,255,255,.72)); border: 1px solid #fff;
  box-shadow: inset 0 1px 0 #fff, inset 0 -8px 16px rgba(255,255,255,.5), 0 0 0 .5px rgba(20,22,24,.06);
  -webkit-backdrop-filter: blur(10px) saturate(1.6); backdrop-filter: blur(10px) saturate(1.6); transition: left .55s cubic-bezier(.3,1.25,.5,1); }
.st-pill b { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 400; letter-spacing: -.01em; }
.st-pill b svg { width: 16px; height: 16px; }
.st-pill i { display: block; font-style: normal; font-size: 11.5px; color: var(--ink3); margin-top: 2px; }

.ov-bento { display: grid; grid-template-columns: repeat(12, minmax(0,1fr)); grid-template-rows: repeat(2, minmax(200px,auto)); gap: 16px; }
.ov-money { grid-column: 1 / span 5; grid-row: 1 / span 2; display: flex; flex-direction: column; padding: 26px 28px; min-height: 420px; }
.ov-cal { grid-column: 6 / span 7; grid-row: 1; }
.ov-attn { grid-column: 6 / span 3; grid-row: 2; display: flex; flex-direction: column; padding: 24px 26px; }
.ov-next { grid-column: 9 / span 4; grid-row: 2; }
.attn-n { margin-top: auto; font-size: 72px; line-height: .85; }
.ov-attn .fx-sub { max-width: 70%; }
/* fourteen days ahead */
.cal14 { display: grid; grid-template-columns: repeat(14, minmax(0,1fr)); gap: 4px; }
.c14 { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 9px 0 10px; border-radius: 999px; transition: background .25s; cursor: default; border: 0; background: none; font: inherit; color: inherit; }
.c14:hover { background: rgba(255,255,255,.7); }
.c14 i { font-style: normal; font-size: 10.5px; color: var(--ink3); }
.c14 b { font-size: 15px; font-weight: 400; }
.c14.wk b { color: var(--ink3); }
.c14.today { background: #fff; }
.c14 em { min-width: 24px; height: 24px; padding: 0 4px; border-radius: 999px; display: grid; place-items: center; font-style: normal; font-size: 9.5px; font-weight: 600; color: #fff;
  background: radial-gradient(circle at 50% 60%, var(--k500), var(--k200)); }
.c14 em.amber { background: radial-gradient(circle at 50% 60%, var(--k300), var(--k250)); }
.c14 em.slate { background: radial-gradient(circle at 50% 60%, #2E3235, #A9AEB2); }
.c14 em.ink { background: var(--ink); }
.c14 em.no { min-width: 4px; width: 4px; height: 4px; margin: 10px 0; padding: 0; background: rgba(20,22,24,.18); }
.c14-list { display: flex; flex-direction: column; gap: 2px; margin-top: 12px; }
/* a bead travelling to a ringed goal (days to the next shoot) */
.trk { position: relative; height: 30px; margin: 12px 0 0; }
.trk::before { content: ''; position: absolute; left: 0; right: 46px; top: 50%; height: 1.5px; margin-top: -.75px; background: repeating-linear-gradient(90deg, rgba(20,22,24,.16) 0 3px, transparent 3px 7px); }
.trk .line { position: absolute; top: 50%; right: 46px; height: 1.5px; margin-top: -.75px; background: rgba(20,22,24,.32); }
.trk .knob { position: absolute; top: 50%; z-index: 1; width: 20px; height: 16px; margin-top: -8px; border-radius: 50%; background: var(--cream); box-shadow: inset 0 0 0 1.5px rgba(90,20,36,.25); }
.goalpt { position: absolute; right: 16px; top: 50%; width: 30px; height: 30px; margin-top: -15px; }
.goalpt .ring { position: absolute; inset: 0; border-radius: 50%; border: 1.5px solid rgba(20,22,24,.2); background: radial-gradient(circle, rgba(20,22,24,.16) 0 7px, transparent 7.5px); }
.goalpt .b1, .goalpt .b2, .goalpt .b3 { position: absolute; border-radius: 50%; }
.goalpt .b1 { right: -10px; top: 4px; width: 6px; height: 6px; background: rgba(20,22,24,.2); animation: bub 3s ease-in-out infinite; }
.goalpt .b2 { right: -12px; bottom: 3px; width: 5px; height: 5px; background: rgba(20,22,24,.22); animation: bub 3s ease-in-out infinite .8s; }
.goalpt .b3 { right: -26px; top: 9px; width: 11px; height: 11px; border: 1.5px solid rgba(20,22,24,.22); animation: bub 3s ease-in-out infinite 1.4s; }
@keyframes bub { 50% { transform: translate(2px,-2px) scale(1.15); } }
.big-days { display: flex; align-items: flex-start; gap: 4px; margin-top: 2px; }
.big-days b { font-weight: 300; font-size: 52px; line-height: 1; letter-spacing: -.05em; }
.big-days i { font-style: normal; font-size: 12px; color: var(--ink3); margin-top: 6px; }
.big-days.none b { color: var(--ink3); }

/* the band: money in (thin bars) beside cards */
.ov-band { margin-top: 16px; display: grid; grid-template-columns: minmax(0,1.05fr) minmax(0,1fr); gap: 30px; padding: 28px 30px 24px; border-radius: 36px;
  background: var(--glass); border: 1px solid var(--edge); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); }
.ov-dhead { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.ov-dhead h2 { margin: 0; font-weight: 300; font-size: 28px; letter-spacing: -.035em; white-space: nowrap; }
.ov-count { font-size: 13px; color: var(--ink3); white-space: nowrap; } .ov-count b { font-size: 24px; color: var(--ink); margin-right: 4px; }
.hist { position: relative; height: 250px; display: flex; align-items: flex-end; gap: 10px; padding-top: 84px; }
.hist-col { flex: 1; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; cursor: pointer; }
.hist-bar { position: relative; width: 2px; height: var(--h); border-radius: 2px; background: rgba(20,22,24,.16); transition: background .3s, width .3s var(--ease);
  animation: bar-up .9s var(--ease) both; transform-origin: bottom; }
.hist-bar::before { content: ''; position: absolute; top: -1px; left: 50%; width: 14px; height: 2px; margin-left: -7px; border-radius: 2px; background: rgba(20,22,24,.3); }
.hist-bar.out { position: absolute; bottom: 0; left: calc(50% + 6px); width: 2px; background: rgba(var(--k600-rgb),.25); }
.hist-bar.out::before { display: none; }
@keyframes bar-up { from { transform: scaleY(0); } }
.hist-col .bw2 { position: relative; height: calc(100% - 30px); width: 100%; display: flex; justify-content: center; align-items: flex-end; }
.hist-col.on .hist-bar:not(.out) { width: 3px; background: linear-gradient(180deg, var(--wine), rgba(var(--k600-rgb),.08)); }
.hist-col.on .hist-bar:not(.out)::before { background: var(--wine); height: 3px; }
.hist-col.hot .hist-bar:not(.out) { width: 3px; background: linear-gradient(180deg, var(--ink), rgba(20,22,24,.06)); }
.hist-col.hot .hist-bar:not(.out)::before { background: var(--ink); }
.hist-col > span { margin-top: 12px; font-size: 11.5px; color: var(--ink3); }
.hist-col.on > span, .hist-col.hot > span { color: var(--ink); font-weight: 500; }
.hist-flag { position: absolute; top: 0; left: 0; padding: 12px 16px; border-radius: 20px; white-space: nowrap;
  background: linear-gradient(180deg, rgba(255,255,255,.95), rgba(255,255,255,.72)); border: 1px solid #fff;
  box-shadow: inset 0 1px 0 #fff, 0 0 0 .5px rgba(20,22,24,.06); transition: left .5s cubic-bezier(.3,1.25,.5,1); }
.hist-flag b { font-weight: 300; font-size: 26px; letter-spacing: -.035em; margin-right: 6px; }
.hist-flag em { font-style: normal; font-size: 11px; font-weight: 600; color: var(--ok); }
.hist-flag em.down { color: var(--alert); }
.hist-flag i { display: block; font-style: normal; font-size: 11.5px; color: var(--ink3); margin-top: 3px; }
.ov-cards { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(210px,1fr); gap: 14px; overflow-x: auto; padding: 6px 4px 10px; scrollbar-width: none; }
.ov-cards::-webkit-scrollbar { display: none; }
.fx-card { min-height: 178px; padding: 20px 22px; border-radius: 30px; display: flex; flex-direction: column; }
.fxc-top { display: flex; align-items: center; gap: 10px; }
.fxc-top b { font-weight: 500; font-size: 15px; line-height: 1.15; }
.fxc-row { display: flex; gap: 20px; margin-top: auto; padding-top: 16px; }
.fxc-row i { display: block; font-style: normal; font-size: 11px; opacity: .8; }
.fxc-row b { font-weight: 300; font-size: 22px; letter-spacing: -.03em; } .fxc-row small { font-size: 11px; font-weight: 500; }

/* attendance as flip cards: the month's share on the front, the daily times on the back */
.att-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 16px; }
.flip { position: relative; height: 270px; perspective: 1400px; cursor: pointer; border: 0; padding: 0; background: none; font: inherit; color: inherit; text-align: left; }
.flip-in { position: absolute; inset: 0; transform-style: preserve-3d; transition: transform .8s cubic-bezier(.3,1.25,.4,1); }
.flip.on .flip-in { transform: rotateY(180deg); }
.flip-f, .flip-b { position: absolute; inset: 0; -webkit-backface-visibility: hidden; backface-visibility: hidden; border-radius: 30px; padding: 18px 20px; display: flex; flex-direction: column; }
.flip-b { transform: rotateY(180deg); background: rgba(255,255,255,.78); border: 1px solid #fff; color: var(--ink); }
.flip-f .who { display: flex; align-items: center; gap: 10px; }
.flip-f .who b { font-weight: 500; font-size: 14.5px; display: block; line-height: 1.2; }
.flip-f .who span { font-size: 11.5px; opacity: .8; }
.flip-pct { margin-top: auto; display: flex; align-items: baseline; gap: 6px; }
.flip-pct b { font-size: 64px; line-height: .85; }
.flip-pct small { font-size: 13px; font-weight: 500; opacity: .85; }
.flip-sub { font-size: 12px; opacity: .88; margin-top: 8px; }
.mbars { display: flex; align-items: flex-end; gap: 6px; height: 46px; margin-top: 14px; }
.mbars span { flex: 1; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 4px; }
.mbars i { width: 4px; height: var(--h); border-radius: 2px; background: rgba(255,255,255,.45); transform-origin: bottom; animation: bar-up .8s var(--ease) both; }
.mbars span.now i { background: #fff; width: 5px; }
.mbars em { font-style: normal; font-size: 9.5px; opacity: .8; }
.flip-hint { position: absolute; right: 16px; top: 16px; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: rgba(255,255,255,.2);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.4); transition: transform .5s var(--ease); }
.flip:hover .flip-hint { transform: rotate(180deg); }
.flip-hint svg { width: 14px; height: 14px; }
.flip-b header { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.flip-b header b { font-weight: 500; font-size: 13.5px; }
.flip-b header span { margin-left: auto; font-size: 11px; color: var(--ink3); }
.times { flex: 1; min-height: 0; overflow-y: auto; display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 4px 10px; align-content: start; scrollbar-width: thin; }
.times div { display: flex; align-items: center; gap: 8px; padding: 4px 8px; border-radius: 10px; font-size: 12px; background: rgba(20,22,24,.03); }
.times div b { font-weight: 500; min-width: 18px; font-variant-numeric: tabular-nums; }
.times div span { margin-left: auto; font-variant-numeric: tabular-nums; color: var(--ink2); }
.times div.late span { color: var(--amber-d); font-weight: 500; }
.times div.absent span { color: var(--alert); }
.times div.off { opacity: .45; }
.times div.leave span, .times div.holiday span { color: var(--slate-d); }

/* the bottom row of four */
.ov-four { margin-top: 16px; display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 16px; align-items: stretch; }
.goal-wrap { position: relative; margin: -4px auto 0; max-width: 260px; }
.goal { display: block; width: 100%; height: auto; overflow: visible; }
.g-halo { fill: none; stroke: rgba(var(--k600-rgb),.12); stroke-width: 18; stroke-linecap: round; }
.g-wedge { fill: url(#goalW); }
.g-arc { fill: none; stroke: url(#goalG); stroke-width: 2.5; stroke-linecap: round; stroke-dasharray: 600; stroke-dashoffset: 600; animation: arc-in 1.4s var(--ease) .2s forwards; }
@keyframes arc-in { to { stroke-dashoffset: 0; } }
.g-bead { fill: var(--wine); } .g-bead-h { fill: rgba(var(--k600-rgb),.18); animation: halo 2.4s steps(18) infinite; transform-box: fill-box; transform-origin: center; }
@keyframes halo { 50% { transform: scale(1.35); opacity: .5; } }
.goal-c { position: absolute; left: 0; right: 0; top: 44%; text-align: center; }
.goal-c b { font-weight: 300; font-size: 44px; letter-spacing: -.04em; line-height: 1; }
.goal-c sup { font-size: 15px; vertical-align: top; margin-right: 3px; position: relative; top: 4px; color: var(--ink2); }
.goal-c i { display: block; font-style: normal; font-size: 12px; color: var(--ink3); margin-top: 6px; }
.goal-leg { display: flex; justify-content: space-between; margin-top: -6px; font-size: 12px; color: var(--ink3); }
.goal-leg span:last-child { text-align: right; }
.goal-leg b { display: block; margin-top: 2px; font-weight: 300; font-size: 20px; color: var(--ink); letter-spacing: -.02em; }
.goal-leg i { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; }
.goal-leg i.y { background: var(--wine); } .goal-leg i.g { background: rgba(20,22,24,.18); }
/* the side panel: a soft wine-tinted glass with a rising curve */
.mp { position: relative; display: flex; flex-direction: column; padding: 20px 20px 18px; border-radius: 30px; color: var(--ink); overflow: hidden; isolation: isolate;
  background: linear-gradient(170deg, rgba(238,241,251,.96), rgba(var(--k200-rgb),.72) 48%, rgba(230,235,251,.82)); border: 1px solid rgba(255,255,255,.75); }
.mp::before { content: ''; position: absolute; inset: 0; z-index: -1; background: radial-gradient(80% 50% at 30% 0%, rgba(255,255,255,.6), transparent 70%); }
.mp header { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--ink2); }
.mp header .gl-muted { margin-left: auto; }
.mp-figs { display: flex; gap: 26px; margin: 12px 0 6px; }
.mp-figs b { font-weight: 300; font-size: 30px; letter-spacing: -.04em; }
.mp-figs i { display: block; font-style: normal; font-size: 11.5px; color: var(--ink3); }
.mp-chart { position: relative; height: 118px; margin: 4px -4px 0; }
.mp-chart svg { width: 100%; height: 100px; overflow: visible; }
.mp-grid { stroke: rgba(20,22,24,.08); stroke-width: 1; stroke-dasharray: 3 4; vector-effect: non-scaling-stroke; }
.mp-band { fill: none; stroke: rgba(255,255,255,.6); stroke-width: 16; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.mp-line { fill: none; stroke: var(--wine); stroke-width: 2; stroke-linecap: round; vector-effect: non-scaling-stroke; stroke-dasharray: 900; stroke-dashoffset: 900; animation: arc-in 1.6s var(--ease) .2s forwards; }
.mp-pt { fill: #fff; stroke: rgba(20,22,24,.25); stroke-width: 1; vector-effect: non-scaling-stroke; }
.mp-tag { position: absolute; transform: translate(-50%,-150%); padding: 4px 10px; border-radius: 999px; font-size: 11px; white-space: nowrap; color: var(--ink2);
  background: rgba(255,255,255,.78); border: 1px solid #fff; }
.mp-tag:last-of-type { transform: translate(-90%,-150%); }
.mp-tag b { font-weight: 500; color: var(--ink); }
.mp-wk { display: flex; justify-content: space-between; font-size: 10.5px; color: var(--ink3); padding: 0 8px; }
.mp-act { display: flex; gap: 8px; margin: 10px 0 14px; }
.mp-btn { flex: 1; height: 44px; border-radius: 999px; display: grid; place-items: center; background: linear-gradient(100deg, var(--k400), var(--k600)); color: #fff; text-decoration: none; font-size: 13.5px; transition: background .2s; }
.mp-btn:hover { filter: brightness(1.05); }
.mp-round { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: rgba(255,255,255,.85); color: var(--ink2);  transition: transform .3s var(--ease); }
.mp-round svg { width: 16px; height: 16px; } .mp-round:hover { transform: rotate(-12deg); }
.mp-low { margin-top: auto; padding-top: 14px; border-top: 1px solid rgba(255,255,255,.6); }
.mp-split { display: flex; gap: 3px; height: 10px; margin: 12px 0 10px; }
.mp-split i { border-radius: 999px; min-width: 8px; }
.s0 { background: var(--wine); } .s1 { background: rgba(var(--k600-rgb),.4); } .s2 { background: rgba(44,46,51,.5); } .s3 { background: #fff; }
.mp-plans { display: flex; flex-direction: column; gap: 6px; }
.mp-plans span { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--ink2); }
.mp-plans span i { width: 8px; height: 8px; border-radius: 50%; }
.mp-plans b { margin-left: auto; font-weight: 500; color: var(--ink); }
/* lists */
.glist { display: flex; flex-direction: column; }
.gli { display: flex; align-items: center; gap: 12px; padding: 9px 4px; border-bottom: 1px dashed var(--line2); border-radius: 14px; text-decoration: none; color: inherit; }
.gli:last-child { border-bottom: 0; }
.gli .grow { display: flex; flex-direction: column; }
.gli .grow b { font-size: 14px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gli .grow span { font-size: 12px; color: var(--ink3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
a.gli:hover, .gli.click:hover { background: rgba(255,255,255,.65); }
.gli.click { cursor: pointer; }
.gamt { font-weight: 400; font-size: 16px; letter-spacing: -.02em; white-space: nowrap; }
.gamt i { font-style: normal; opacity: .35; font-size: .75em; } .gamt small { font-size: 11px; color: var(--ink3); }
.gdate { width: 44px; height: 48px; border-radius: 16px; flex: none; display: flex; flex-direction: column; align-items: center; justify-content: center; background: rgba(255,255,255,.88); }
.gdate b { font-weight: 400; font-size: 17px; line-height: 1; } .gdate i { font-style: normal; font-size: 9.5px; text-transform: uppercase; letter-spacing: .1em; color: var(--ink3); margin-top: 3px; }
.gempty { padding: 24px 16px; text-align: center; font-size: 13px; color: var(--ink3); border-radius: 20px; background: ; }
.gops { display: flex; flex-direction: column; gap: 6px; }
.gops > * { display: flex; align-items: center; gap: 10px; padding: 11px 12px; border-radius: 18px; background: rgba(255,255,255,.55); text-decoration: none; color: inherit; transition: background .2s; }
.gops > a:hover { background: rgba(255,255,255,.92); }
.gops span { flex: 1; font-size: 13px; color: var(--ink2); } .gops b { font-size: 13px; font-weight: 500; }
.gled { width: 8px; height: 8px; border-radius: 50%; background: #C3C8C6; flex: none; }
.gled.ok { background: var(--ok); } .gled.warn { background: var(--amber); } .gled.bad { background: var(--alert); }

/* ═══ person / item cards (Team, Shoots, Clients) ══════════════════════════ */
.card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(310px, 1fr)); gap: 16px; }
.pcard { display: flex; flex-direction: column; gap: 14px; padding: 18px 20px 16px; border-radius: 30px; color: inherit; text-decoration: none; cursor: pointer;
  background: var(--glass); border: 1px solid var(--edge); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur);
  transition: background .3s, transform .45s var(--ease); text-align: left; font: inherit; }
.pcard:hover { background: rgba(255,255,255,.75); transform: translateY(-4px); }
.pcard:hover .gl-go { transform: rotate(45deg); background: #fff; }
.pcard.off { opacity: .6; }
.pcard header { display: flex; align-items: center; gap: 12px; }
.pcard header .grow { display: flex; flex-direction: column; }
.pcard header b { font-size: 15.5px; font-weight: 500; letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pcard header .grow span { font-size: 12px; color: var(--ink3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pcard .gl-go { margin-left: 0; }
.pc-mid { display: flex; justify-content: space-between; gap: 12px; padding: 14px 16px; border-radius: 20px; background: rgba(255,255,255,.58); }
.pc-mid > div { display: flex; flex-direction: column; }
.pc-mid .r { text-align: right; align-items: flex-end; }
.pc-mid i { font-style: normal; font-size: 11px; color: var(--ink3); }
.pc-mid b { font-weight: 300; font-size: 24px; letter-spacing: -.035em; line-height: 1.15; }
.pc-mid b small { font-size: 11px; font-weight: 500; color: var(--ink3); letter-spacing: 0; }
.pcard footer { display: flex; align-items: center; gap: 10px; padding-top: 12px; border-top: 1px dashed var(--line2); font-size: 12px; color: var(--ink3); }
.pcard footer b { color: var(--ink); font-weight: 500; }
.pcard.add { align-items: center; justify-content: center; text-align: center; gap: 6px; min-height: 180px;
  background: rgba(255,255,255,.3); border-style: dashed; border-color: rgba(20,22,24,.14); }
.pcard.add b { font-weight: 500; font-size: 14px; } .pcard.add span { font-size: 12px; color: var(--ink3); }
.dots { display: flex; gap: 3px; flex-wrap: wrap; }
.dots i { width: 6px; height: 6px; border-radius: 50%; background: rgba(20,22,24,.1); }
.dots i.on { background: var(--ink); } .dots i.w { background: var(--alert); } .dots i.a { background: var(--amber); }
.ptrack { position: relative; height: 2px; border-radius: 2px; margin: 6px 0; background: repeating-linear-gradient(90deg, rgba(20,22,24,.18) 0 3px, transparent 3px 7px); }
.ptrack .fill { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 2px; background: var(--ink); transform-origin: left; animation: grow 1s var(--ease) both; }
.ptrack .knob { position: absolute; top: 50%; width: 16px; height: 12px; margin: -6px 0 0 -8px; border-radius: 50%; background: var(--cream); box-shadow: inset 0 0 0 1.5px rgba(90,20,36,.25); }

/* steps of an approval: Manager → CEO */
.chain { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.chain .st { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 11px 0 4px; border-radius: 999px; font-size: 11.5px; background: rgba(20,22,24,.05); color: var(--ink3); white-space: nowrap; }
.chain .st i { width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-size: 10px; background: #fff; color: var(--ink3); }
.chain .st.done { background: var(--ink); color: #fff; } .chain .st.done i { background: rgba(255,255,255,.2); color: #fff; }
.chain .st.waiting { background: var(--cream); color: var(--cream-ink); } .chain .st.waiting i { background: #fff; color: var(--cream-ink); animation: pulse 2s ease-in-out infinite; }
.chain .st.declined { background: var(--alert); color: #fff; } .chain .st.declined i { background: rgba(255,255,255,.2); color: #fff; }
.chain .st.skipped { opacity: .55; text-decoration: line-through; }
.chain .arrow { color: var(--ink4); font-size: 12px; }
@keyframes pulse { 50% { box-shadow: 0 0 0 4px rgba(44,46,51,.8); } }
.rq { display: grid; grid-template-columns: auto minmax(0,1fr) auto; align-items: center; gap: 14px; padding: 12px 14px 12px 12px; border-radius: 24px; background: rgba(255,255,255,.66); margin-bottom: 8px; }
.rq .grow { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.rq .grow > b { font-size: 14.5px; font-weight: 500; }
.rq .grow > span { font-size: 12.5px; color: var(--ink3); }
.rq .grow > em { font-size: 12.5px; color: var(--ink2); font-style: normal; }
.rq-act { display: flex; gap: 6px; align-items: center; }
.rq-card { border-color: rgba(var(--k300-rgb),.3); background: linear-gradient(180deg, rgba(250,242,228,.78), rgba(255,255,255,.55)); margin-bottom: 18px; }

/* the month calendar (Calendar screen) */
.mcal { display: grid; grid-template-columns: repeat(7, minmax(0,1fr)); gap: 6px; }
.mcal .dow { font-size: 11px; color: var(--ink3); text-align: center; padding: 0 0 4px; font-weight: 500; }
.mc { min-height: 118px; border-radius: 20px; padding: 8px; background: rgba(255,255,255,.5); display: flex; flex-direction: column; gap: 3px; cursor: pointer; transition: background .2s; min-width: 0; }
.mc:hover { background: rgba(255,255,255,.85); }
.mc.out { background: transparent; opacity: .45; }
.mc.wk { background: rgba(255,255,255,.28); }
.mc.today { background: #fff; box-shadow: inset 0 0 0 1.5px var(--ink); }
.mc .n { font-size: 12.5px; font-weight: 500; display: flex; align-items: center; gap: 6px; padding: 2px 4px; }
.mc .n i { font-style: normal; font-weight: 400; font-size: 10.5px; color: var(--ink3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ev { display: flex; align-items: center; gap: 5px; height: 21px; padding: 0 7px; border-radius: 8px; font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  background: rgba(20,22,24,.06); color: var(--ink2); border: 0; font-family: inherit; cursor: pointer; text-align: left; min-width: 0; flex: none; text-decoration: none; }
.ev b { font-weight: 500; overflow: hidden; text-overflow: ellipsis; }
.ev small { font-size: 10px; opacity: .7; flex: none; }
.ev.t-event, .ev.t-meeting, .ev.t-pitch, .ev.t-launch, .ev.t-reminder, .ev.t-deadline, .ev.t-company { background: var(--ink); color: #fff; }
.ev.t-deadline { background: var(--alert); }
.ev.t-company { background: var(--slate-d); }
.ev.t-shoot { background: linear-gradient(100deg, var(--k600), var(--k500)); color: #fff; }
.ev.t-holiday { background: var(--cream); color: var(--cream-ink); }
.ev.t-leave { background: var(--slate-soft); color: var(--slate-d); }
.ev.t-task { background: rgba(255,255,255,.9); color: var(--ink2); box-shadow: inset 0 0 0 1px var(--line2); }
.ev.t-birthday, .ev.t-anniversary { background: var(--amber-soft); color: var(--amber-d); }
.ev.t-invoice { background: rgba(255,255,255,.9); color: var(--wine); box-shadow: inset 0 0 0 1px rgba(var(--k600-rgb),.2); }
.ev.pending { opacity: .6; border: 1px dashed currentColor; }
.ev.more { background: none; color: var(--ink3); }
.kinds { display: flex; flex-wrap: wrap; gap: 6px; }
.kinds button { height: 30px; padding: 0 12px 0 8px; border-radius: 999px; border: 0; background: rgba(255,255,255,.6); cursor: pointer; font-size: 12px; color: var(--ink2); display: inline-flex; align-items: center; gap: 6px; }
.kinds button i { width: 10px; height: 10px; border-radius: 3px; }
.kinds button.off { opacity: .4; text-decoration: line-through; }
.agenda .day { display: grid; grid-template-columns: 70px minmax(0,1fr); gap: 14px; padding: 10px 0; border-bottom: 1px dashed var(--line2); }
.agenda .day:last-child { border-bottom: 0; }

/* timesheet grid */
.ts-wrap { overflow-x: auto; padding: 10px; border-radius: 30px; background: var(--glass); border: 1px solid var(--edge); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); }
.ts { border-collapse: separate; border-spacing: 2px; font-size: 11.5px; }
.ts th { font-weight: 500; color: var(--ink3); font-size: 10.5px; padding: 4px 0; text-align: center; min-width: 26px; }
.ts th.wk { color: var(--ink4); }
.ts th.who, .ts td.who { position: sticky; left: 0; z-index: 2; text-align: left; min-width: 190px; padding: 6px 10px; background: rgba(246,247,246,.96); border-radius: 12px; }
.ts td.who b { font-weight: 500; font-size: 13px; display: block; } .ts td.who span { font-size: 11px; color: var(--ink3); }
.ts td.c { width: 26px; height: 30px; text-align: center; border-radius: 8px; font-weight: 600; font-size: 10.5px; cursor: default; }
.c-P { background: rgba(20,22,24,.08); color: var(--ink2); }
.c-L { background: var(--amber-soft); color: var(--amber-d); }
.c-A { background: var(--alert); color: #fff; }
.c-V { background: var(--slate); color: #fff; }
.c-H { background: var(--cream); color: var(--cream-ink); }
.c-F { background: #fff; color: var(--amber-d); box-shadow: inset 0 0 0 1.5px var(--amber); }
.c-O { background: transparent; color: var(--ink4); }
.c-  { background: rgba(20,22,24,.02); }
.ts td.t { text-align: right; padding: 0 8px; font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--ink2); }
.ts td.t b { color: var(--ink); font-weight: 500; }
.ts-key { display: flex; gap: 12px; flex-wrap: wrap; font-size: 12px; color: var(--ink3); align-items: center; }
.ts-key span { display: inline-flex; align-items: center; gap: 6px; }
.ts-key i { width: 20px; height: 20px; border-radius: 6px; display: grid; place-items: center; font-style: normal; font-size: 10px; font-weight: 600; }
.lbar { display: flex; height: 10px; gap: 2px; border-radius: 999px; overflow: hidden; background: rgba(20,22,24,.05); min-width: 120px; }
.lbar i { height: 100%; }

/* ═══ tasks: the path every task walks, and the team watched person by person ═══ */
.path { display: flex; align-items: center; gap: 0; margin: 0 4px 16px; padding: 8px 10px; border-radius: 999px; background: var(--glass); border: 1px solid var(--edge);
  -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); overflow-x: auto; scrollbar-width: none; }
.path::-webkit-scrollbar { display: none; }
.pstep { flex: none; display: inline-flex; align-items: center; gap: 9px; height: 46px; padding: 0 18px 0 8px; border: 0; border-radius: 999px; background: none; cursor: pointer; color: var(--ink2);
  transition: background .25s, transform .35s cubic-bezier(.3,1.6,.5,1), color .2s; }
.pstep b { min-width: 34px; height: 34px; padding: 0 8px; border-radius: 999px; display: grid; place-items: center; font-size: 14px; font-weight: 600; line-height: 1; font-variant-numeric: tabular-nums; background: rgba(255,255,255,.85); color: var(--ink); transition: background .25s, color .25s; }
.pstep span { font-size: 13px; white-space: nowrap; }
.pstep:hover { background: rgba(255,255,255,.7); transform: translateY(-1px); color: var(--ink); }
.pstep.on { background: var(--ink); color: #fff; }
.pstep.on b { background: var(--cream); color: var(--cream-ink); }
.pstep.zero b { color: var(--ink4); }
.pstep.all { padding: 0 16px; height: 36px; }
.path-line { flex: 1 1 14px; min-width: 14px; height: 1.5px; background: repeating-linear-gradient(90deg, rgba(20,22,24,.2) 0 3px, transparent 3px 7px); }
.live-ring { position: absolute; right: 12%; top: 46%; width: 0; height: 0; z-index: -1; }
.live-ring i { position: absolute; left: 50%; top: 50%; width: 200px; height: 200px; margin: -100px 0 0 -100px; border-radius: 50%; border: 1.5px solid rgba(255,255,255,.4); animation: ring 4s cubic-bezier(.2,.6,.3,1) infinite; opacity: 0; }
.live-ring i:nth-child(2) { animation-delay: 1.3s; } .live-ring i:nth-child(3) { animation-delay: 2.6s; }
.watch-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 6px 14px; }
.wrow { display: flex; align-items: center; gap: 12px; padding: 9px 14px 9px 9px; border-radius: 999px; border: 0; background: rgba(255,255,255,.5); cursor: pointer; text-align: left; font: inherit; color: inherit;
  transition: background .25s, transform .35s var(--ease); min-width: 0; }
.wrow:hover { background: rgba(255,255,255,.95); transform: translateX(3px); }
.wrow.on { background: var(--ink); color: #fff; }
.wrow .grow { display: flex; flex-direction: column; min-width: 0; }
.wrow .grow b { font-weight: 500; font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wrow .grow span { font-size: 11.5px; color: var(--ink3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: flex; align-items: center; gap: 6px; }
.wrow .grow span.now { color: var(--ink); }
.wrow.on .grow span, .wrow.on .wn i { color: rgba(255,255,255,.65); } .wrow.on .grow span.now { color: #fff; }
.pulse { width: 7px; height: 7px; border-radius: 50%; background: var(--ok); flex: none; animation: pulse-ok 1.8s ease-in-out infinite; }
@keyframes pulse-ok { 50% { box-shadow: 0 0 0 5px rgba(46,50,53,.18); } }
.wbar { width: 70px; height: 3px; border-radius: 3px; flex: none; background: repeating-linear-gradient(90deg, rgba(20,22,24,.16) 0 3px, transparent 3px 7px); overflow: hidden; }
.wbar i { display: block; height: 100%; background: var(--ink); border-radius: 3px; transform-origin: left; animation: grow .9s var(--ease) both; }
.wrow.on .wbar i { background: #fff; }
.wn { display: flex; flex-direction: column; align-items: center; min-width: 36px; flex: none; }
.wn b { font-weight: 400; font-size: 16px; line-height: 1.1; font-variant-numeric: tabular-nums; } .wn i { font-style: normal; font-size: 9.5px; color: var(--ink3); text-transform: uppercase; letter-spacing: .06em; }
.wn.bad b { color: var(--alert); font-weight: 600; } .wrow.on .wn.bad b { color: #F5B9AE; }

/* thirty days ahead as a row of day beads */
.d30 { display: grid; grid-template-columns: repeat(15, minmax(0,1fr)); gap: 6px 4px; }
.d30 span { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 6px 0; border-radius: 999px; transition: background .25s, transform .35s cubic-bezier(.3,1.6,.5,1); }
.d30 span i { font-style: normal; font-size: 9.5px; color: var(--ink3); }
.d30 span b { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-size: 12.5px; font-weight: 400; }
.d30 span.wk b { color: var(--ink4); }
.d30 span.today b { background: #fff; box-shadow: inset 0 0 0 1.5px var(--ink); }
.d30 span.on { cursor: pointer; } .d30 span.on b { color: #fff; background: radial-gradient(circle at 50% 60%, var(--k800), var(--k500)); font-weight: 500; }
.d30 span.on:hover { background: rgba(255,255,255,.8); transform: translateY(-3px); }
.watch-list { display: flex; flex-direction: column; gap: 6px; }
.watch-list .wrow { text-decoration: none; }
.ov-me { margin-top: 22px; display: grid; grid-template-columns: 280px minmax(0,1fr); gap: 22px; align-items: start; }
.ov-me .flip { display: block; width: 100%; }
@media (max-width: 1100px) { .watch-grid { grid-template-columns: 1fr; } .wbar { display: none; } }
@media (max-width: 760px) { .ov-me { grid-template-columns: 1fr; } .wn i { display: none; } .wn { min-width: 24px; } }

/* ═══ tiles: one thing per tile — a task, a person, a deal — with one big figure ═══ */
.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 14px; }
.ttile { position: relative; display: flex; flex-direction: column; gap: 10px; min-height: 164px; padding: 16px 18px 14px; border-radius: 28px; text-align: left; font: inherit; color: inherit;
  background: var(--glass); border: 1px solid var(--edge); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); cursor: pointer;
  transition: background .3s, transform .45s var(--ease); }
.ttile:hover { background: rgba(255,255,255,.78); transform: translateY(-3px); }
.ttile.live { background: rgba(255,255,255,.86); box-shadow: inset 0 0 0 1.5px var(--ink); }
.ttile.dim { opacity: .62; }
.tt-top { display: flex; align-items: flex-start; gap: 12px; }
.tt-ic { width: 40px; height: 40px; border-radius: 50%; flex: none; display: grid; place-items: center; background: rgba(255,255,255,.9); color: var(--ink2); }
.tt-ic svg { width: 17px; height: 17px; }
.tt-ic.run { background: radial-gradient(circle at 50% 60%, var(--k800), var(--k500)); color: #fff; animation: pulse-run 2s ease-in-out infinite; }
@keyframes pulse-run { 50% { box-shadow: 0 0 0 7px rgba(var(--k600-rgb),.12); } }
.tt-ic.warn { background: var(--cream); color: var(--cream-ink); }
.tt-ic.ok { background: var(--ink); color: #fff; }
.tt-ic.wait { background: var(--slate-soft); color: var(--slate-d); }
.tt-top .grow { display: flex; flex-direction: column; gap: 2px; }
.tt-top b { font-weight: 500; font-size: 15px; line-height: 1.25; letter-spacing: -.01em; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.tt-top .grow span { font-size: 12px; color: var(--ink3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tt-chips { display: flex; gap: 5px; flex-wrap: wrap; }
.tt-bot { margin-top: auto; display: flex; align-items: flex-end; gap: 10px; }
.tt-fig { display: flex; align-items: baseline; gap: 6px; }
.tt-fig b { font-weight: 300; font-size: 30px; letter-spacing: -.04em; line-height: 1; font-variant-numeric: tabular-nums; }
.tt-fig small { font-size: 11.5px; color: var(--ink3); }
.tt-meta { margin-left: auto; text-align: right; font-size: 11.5px; color: var(--ink3); line-height: 1.35; }
.tt-bot .btn { margin-left: auto; }
.tt-meta + .btn { margin-left: 8px; }
.daydots { display: inline-flex; gap: 3px; vertical-align: 1px; margin-left: 4px; }
.daydots i { width: 6px; height: 6px; border-radius: 50%; background: var(--ink); } .daydots i.e { background: var(--amber); }
/* a day as a heading: the date in a block, the day's total beside it */
.dayhead { display: flex; align-items: center; gap: 14px; margin: 26px 6px 12px; }
.dayhead:first-child { margin-top: 4px; }
.dayhead .gdate { width: 50px; height: 54px; }
.dayhead h3 { margin: 0; font-weight: 400; font-size: 20px; letter-spacing: -.03em; }
.dayhead p { margin: 2px 0 0; font-size: 12.5px; color: var(--ink3); }
.dayhead .tot { margin-left: auto; text-align: right; }
.dayhead .tot b { font-weight: 300; font-size: 26px; letter-spacing: -.04em; } .dayhead .tot span { display: block; font-size: 11.5px; color: var(--ink3); }
/* the running task as one slim bar */
.runbar { display: flex; align-items: center; gap: 14px; padding: 10px 10px 10px 20px; border-radius: 999px; margin: 0 0 16px; color: #fff; isolation: isolate; position: relative; overflow: hidden;
  background: linear-gradient(100deg, rgba(var(--k500-rgb),.9) 0%, rgba(var(--k600-rgb),.96) 40%, rgba(var(--k800-rgb),.98) 100%); box-shadow: inset 0 1px 0 rgba(255,255,255,.28); }
.runbar .pulse { background: #fff; }
.runbar b { font-weight: 400; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.runbar .clock { font-family: var(--dot); font-weight: 800; font-size: 26px; font-variation-settings: 'ROND' 100; margin-left: auto; font-variant-numeric: tabular-nums; }
.runbar button { height: 40px; padding: 0 18px; border-radius: 999px; border: 0; cursor: pointer; font: inherit; font-size: 13px; color: #fff; background: rgba(255,255,255,.16); box-shadow: inset 0 0 0 1px rgba(255,255,255,.2); }
.runbar button:hover { background: rgba(255,255,255,.28); } .runbar button.solid { background: #fff; color: var(--ink); }
/* people as a row of chips to pick from or filter by */
.who-row { display: flex; gap: 8px; overflow-x: auto; padding: 2px 4px 12px; scrollbar-width: none; }
.who-row::-webkit-scrollbar { display: none; }
.who { flex: none; display: inline-flex; align-items: center; gap: 9px; height: 46px; padding: 0 14px 0 5px; border-radius: 999px; border: 1px solid var(--edge); background: var(--glass2); cursor: pointer; font: inherit; color: inherit;
  transition: background .2s, transform .35s cubic-bezier(.3,1.6,.5,1); }
.who:hover { background: #fff; transform: translateY(-2px); }
.who.on { background: var(--ink); border-color: var(--ink); color: #fff; }
.who b { font-weight: 500; font-size: 13px; } .who em { font-style: normal; font-size: 11px; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; display: grid; place-items: center; background: rgba(20,22,24,.07); }
.who.on em { background: var(--cream); color: var(--cream-ink); } .who em.bad { background: var(--alert); color: #fff; }
/* quick choices in a form: one press instead of a dropdown */
.choice { display: flex; gap: 6px; flex-wrap: wrap; }
.choice button { height: 38px; padding: 0 15px; border-radius: 999px; border: 1px solid var(--line2); background: rgba(255,255,255,.7); cursor: pointer; font: inherit; font-size: 13px; color: var(--ink2); display: inline-flex; align-items: center; gap: 7px;
  transition: background .2s, transform .3s cubic-bezier(.3,1.6,.5,1); }
.choice button:hover { background: #fff; transform: translateY(-1px); }
.choice button.on { background: var(--ink); border-color: var(--ink); color: #fff; }
.choice button .av { width: 24px; height: 24px; font-size: 9.5px; margin-left: -8px; }
details.more > summary { cursor: pointer; font-size: 13px; color: var(--ink2); list-style: none; display: inline-flex; align-items: center; gap: 6px; padding: 6px 0; }
details.more > summary::-webkit-details-marker { display: none; }
details.more[open] > summary svg { transform: rotate(180deg); }
/* the bar of joined pills: parts of one amount, or the steps of one procedure */
.flow { display: flex; gap: 4px; align-items: stretch; }
.flow > * { position: relative; min-width: 104px; height: 58px; padding: 0 16px 0 8px; border-radius: 999px; display: flex; align-items: center; gap: 10px; border: 0; cursor: pointer; font: inherit; color: var(--ink); text-align: left;
  background: rgba(255,255,255,.6); box-shadow: inset 0 0 0 1px var(--edge); transition: transform .4s var(--ease), filter .25s; overflow: hidden; text-decoration: none; }
.flow > *:hover { transform: translateY(-2px); filter: brightness(1.04); }
.flow .fl-ic { width: 40px; height: 40px; border-radius: 50%; flex: none; display: grid; place-items: center; background: rgba(255,255,255,.8); font-size: 13px; font-weight: 500; }
.flow .fl-t { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; }
.flow .fl-t i { font-style: normal; font-size: 11px; opacity: .7; white-space: nowrap; }
.flow .fl-t b { font-weight: 400; font-size: 17px; letter-spacing: -.02em; white-space: nowrap; }
.flow .f-wine { background: linear-gradient(100deg, var(--k500), var(--k500)); color: #fff; box-shadow: none; } .flow .f-wine .fl-ic, .flow .f-ink .fl-ic, .flow .f-slate .fl-ic { background: rgba(255,255,255,.2); color: #fff; }
.flow .f-amber { background: linear-gradient(100deg, var(--k50), var(--k250)); box-shadow: none; }
.flow .f-cream { background: var(--cream); box-shadow: none; }
.flow .f-slate { background: linear-gradient(100deg, var(--k300), var(--k500)); color: #fff; box-shadow: none; }
.flow .f-ink { background: var(--ink); color: #fff; box-shadow: none; }
.flow .f-hatch { background: rgba(255,255,255,.88); box-shadow: inset 0 0 0 1px var(--line2); color: var(--ink); }
.flow .on { box-shadow: inset 0 0 0 2px var(--ink); }
/* a procedure as dots on a line, each with its day */
.steps5 { display: flex; align-items: flex-start; }
.steps5 > div { flex: 1; position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; min-width: 0; }
.steps5 > div::before { content: ''; position: absolute; top: 13px; left: -50%; right: 50%; height: 1.5px; background: repeating-linear-gradient(90deg, rgba(20,22,24,.2) 0 3px, transparent 3px 7px); }
.steps5 > div:first-child::before { display: none; }
.steps5 > div.done::before, .steps5 > div.current::before { background: var(--ink); }
.steps5 i { position: relative; z-index: 1; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-size: 11px; font-weight: 600; background: #fff; color: var(--ink3); box-shadow: inset 0 0 0 1.5px rgba(20,22,24,.14); }
.steps5 .done i { background: var(--ink); color: #fff; box-shadow: none; }
.steps5 .current i { background: var(--cream); color: var(--cream-ink); box-shadow: 0 0 0 5px rgba(44,46,51,.6); }
.steps5 .lost i { background: var(--alert); color: #fff; box-shadow: none; }
.steps5 b { font-weight: 500; font-size: 12px; } .steps5 span { font-size: 11px; color: var(--ink3); }
.steps5.mini i { width: 9px; height: 9px; font-size: 0; } .steps5.mini > div::before { top: 4px; } .steps5.mini b, .steps5.mini span { display: none; }
.steps5.mini .current i { box-shadow: 0 0 0 3px rgba(44,46,51,.9); }
/* people tiles in a row you can scroll (the overview's team) */
.ppl { display: grid; grid-auto-flow: column; grid-auto-columns: 208px; gap: 12px; overflow-x: auto; padding: 4px 2px 12px; scrollbar-width: thin; scrollbar-color: rgba(20,22,24,.15) transparent; scroll-snap-type: x proximity; }
.ptile { scroll-snap-align: start; display: flex; flex-direction: column; gap: 10px; min-height: 168px; padding: 14px 16px; border-radius: 26px; background: rgba(255,255,255,.6); border: 1px solid #fff; text-decoration: none; color: inherit;
  transition: background .25s, transform .4s var(--ease); }
.ptile:hover { background: #fff; transform: translateY(-3px); }
.ptile header { display: flex; align-items: center; gap: 10px; min-width: 0; }
.ptile header > span:not(.av) > b { font-weight: 500; font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
.ptile header > span:not(.av) > span { font-size: 11px; color: var(--ink3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
.ptile .now { font-size: 12px; color: var(--ink2); display: flex; align-items: center; gap: 6px; min-height: 18px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ptile footer { margin-top: auto; display: flex; align-items: flex-end; gap: 8px; }
.ptile footer b { font-weight: 300; font-size: 34px; letter-spacing: -.04em; line-height: .95; } .ptile footer small { font-size: 11.5px; color: var(--ink3); padding-bottom: 3px; }
.ptile footer .pill { margin-left: auto; }

/* ═══ a stack of papers that fans out — invoices, documents ═══════════════ */
.docs { position: relative; height: 150px; margin: 6px 0 10px; perspective: 900px; }
.doc { position: absolute; left: 50%; bottom: 6px; width: 104px; height: 132px; margin-left: -52px; border-radius: 12px; padding: 12px 11px; background: linear-gradient(180deg, #fff, #F4F5F4);
  border: 1px solid #fff; box-shadow: inset 0 0 0 1px rgba(20,22,24,.05); transform-origin: 50% 100%; transition: transform .7s cubic-bezier(.3,1.35,.45,1); display: flex; flex-direction: column; gap: 6px; }
.doc::before { content: ''; height: 7px; width: 46%; border-radius: 4px; background: var(--ink); opacity: .85; }
.doc i { display: block; height: 4px; border-radius: 3px; background: rgba(20,22,24,.1); } .doc i:nth-child(2) { width: 82%; } .doc i:nth-child(3) { width: 64%; } .doc i:nth-child(4) { width: 74%; }
.doc b { margin-top: auto; align-self: flex-end; font-size: 11px; font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.doc em { position: absolute; left: 10px; bottom: 10px; height: 16px; padding: 0 7px; border-radius: 999px; font-style: normal; font-size: 8.5px; font-weight: 600; display: inline-flex; align-items: center; background: var(--cream); color: var(--cream-ink); }
.doc.d1 { transform: translateX(-34px) rotate(-9deg); } .doc.d2 { transform: translateX(4px) rotate(3deg); z-index: 1; } .doc.d3 { transform: translateX(38px) rotate(11deg); z-index: 2; }
.doc.d3::before { background: var(--alert); } .doc.d3 em { background: var(--alert); color: #fff; }
.docs-card:hover .doc.d1 { transform: translate(-78px, -8px) rotate(-16deg); } .docs-card:hover .doc.d2 { transform: translate(0, -18px) rotate(0deg); } .docs-card:hover .doc.d3 { transform: translate(78px, -8px) rotate(16deg); }
.docs-card { cursor: pointer; display: flex; flex-direction: column; }
.docs-card .plus { position: absolute; right: 18px; top: 18px; }
/* a round "plus" that turns on hover */
.plus { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: rgba(255,255,255,.9); color: var(--ink); border: 0; cursor: pointer; transition: transform .45s var(--ease), background .2s; }
.plus:hover, .docs-card:hover .plus { transform: rotate(90deg); background: #fff; }
.fx .plus { background: rgba(255,255,255,.22); color: #fff; box-shadow: inset 0 0 0 1px rgba(255,255,255,.4); }
/* a coin that fills as an invoice is paid */
.coin-ring { position: relative; width: 132px; height: 132px; margin: 4px auto 0; }
.coin-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.coin-ring circle { fill: none; stroke-width: 6; stroke-linecap: round; }
.coin-ring .bg { stroke: rgba(255,255,255,.22); } .coin-ring .fg { stroke: #fff; transition: stroke-dashoffset 1.2s var(--ease); }
@keyframes ring-in { to { stroke-dashoffset: var(--off); } }
.coin-ring div { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; }
.coin-ring div b { font-size: 44px; line-height: 1; } .coin-ring div span { font-size: 11px; opacity: .85; }
.wave { display: flex; align-items: flex-end; gap: 3px; height: 26px; }
.wave i { width: 3px; border-radius: 2px; background: rgba(255,255,255,.75); animation: wave 1.6s ease-in-out infinite; animation-delay: calc(var(--i) * -.13s); }
@keyframes wave { 0%, 100% { height: 20%; } 50% { height: 100%; } }

/* ── smaller screens ──────────────────────────────────────────────────── */
@media (max-width: 1240px) {
  .gx-who, .gx-crumb span.lbl { display: none; }
  .gx-nav button { padding: 0 12px; }
}
@media (max-width: 1100px) {
  .bento > * { grid-column: span 12 !important; }
  .si-main { grid-template-columns: 1fr; } .si-side { display: none; }
  .ov-bento { grid-template-columns: repeat(6, minmax(0,1fr)); grid-template-rows: none; }
  .ov-money { grid-column: 1 / -1; grid-row: auto; min-height: 320px; }
  .ov-cal { grid-column: 1 / -1; grid-row: auto; }
  .ov-attn, .ov-next { grid-column: span 3; grid-row: auto; min-height: 200px; }
  .ov-band { grid-template-columns: 1fr; }
  .ov-four { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .gx-top { flex-wrap: wrap; } .gx-nav { order: 3; width: 100%; overflow-x: auto; scrollbar-width: none; }
}
@media (max-width: 760px) {
  .gx-top { padding: 12px 14px; } .gx-crumb { display: none; }
  .gx-duty { max-width: 140px; }
  .view { padding: 6px 14px 60px; }
  .grid2, .grid3, .grid4 { grid-template-columns: 1fr; } .span2, .span3 { grid-column: auto; }
  .figs { margin-left: 0; width: 100%; justify-content: space-between; gap: 14px; } .figs b { font-size: 32px; }
  .figs > div { grid-template-columns: auto; }
  .ov-attn, .ov-next { grid-column: 1 / -1; }
  .cal14 { grid-template-columns: repeat(7, minmax(0,1fr)); row-gap: 6px; }
  .ov-four { grid-template-columns: 1fr; }
  .strip { padding: 30px 10px 14px; } .st-d em { display: none; } .st-pill i { display: none; }
  .mc { min-height: 70px; } .mc .ev b { display: none; }
  .search { min-width: 0; width: 100%; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } .cash { display: none; } }
@media print {
  body { background: #fff; } body::before, .gx-top, .no-print { display: none !important; }
  .view { padding: 0; }
  .card, .glass, .gl, .tbl-wrap { background: #fff; border-color: #ddd; -webkit-backdrop-filter: none; backdrop-filter: none; }
}

/* ── Tasks · by person: a strip of days, the day's tasks, and a place to give several at once ── */
.dstrip-wrap { display: flex; align-items: center; gap: 8px; margin: 0 0 14px; }
.dstrip-wrap .dprev svg { transform: rotate(90deg); } .dstrip-wrap .dnext svg { transform: rotate(-90deg); }
.dstrip-wrap .gl-go { margin-left: 0; flex: none; } .dstrip-wrap .gl-go:hover { transform: none; }
.dstrip { flex: 1; min-width: 0; display: grid; grid-template-columns: repeat(14, minmax(46px, 1fr)); gap: 6px; overflow-x: auto; padding: 2px; scrollbar-width: none; }
.dstrip button { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 9px 4px 8px; border-radius: 22px; border: 1px solid #fff; cursor: pointer;
  background: rgba(255,255,255,.55); color: var(--ink); font-family: inherit; transition: background .25s, transform .35s var(--ease); }
.dstrip button:hover { background: #fff; transform: translateY(-2px); }
.dstrip button small { font-size: 10.5px; color: var(--ink3); text-transform: uppercase; letter-spacing: .06em; }
.dstrip button b { font-size: 18px; font-weight: 500; line-height: 1; }
.dstrip button.past { opacity: .72; }
.dstrip button.today small { color: var(--wine); }
.dstrip button.on { background: radial-gradient(farthest-corner at 50% 70%, var(--k800) 0%, var(--k500) 62%, var(--k200) 100%); border-color: transparent; color: #fff; opacity: 1; }
.dstrip button.on small { color: rgba(255,255,255,.8); }
.dstrip .dd { display: flex; gap: 3px; height: 6px; align-items: center; }
.dstrip .dd i { width: 5px; height: 5px; border-radius: 50%; background: var(--slate); } .dstrip .dd i.late { background: var(--alert); } .dstrip .dd i.no { background: rgba(20,22,24,.14); width: 3px; height: 3px; }
.dstrip button.on .dd i { background: #fff; }
.tp-split { display: grid; grid-template-columns: minmax(280px, 340px) 1fr; gap: 16px; align-items: start; }
.plan.card { position: sticky; top: 96px; }
.prows { display: flex; flex-direction: column; gap: 8px; margin-bottom: 10px; }
.prow { display: flex; align-items: center; gap: 6px; }
.prow input { flex: 1; min-width: 0; height: 44px; padding: 0 16px; border-radius: 999px; border: 1px solid #fff; background: rgba(255,255,255,.8); font: inherit; outline: 0; }
.prow input:focus { background: #fff; box-shadow: 0 0 0 3px rgba(var(--k500-rgb),.18); }
.prow .px { width: 32px; height: 32px; border-radius: 50%; border: 0; display: grid; place-items: center; background: rgba(20,22,24,.05); color: var(--ink3); cursor: pointer; flex: none; }
.prow .px:hover { background: rgba(20,22,24,.1); color: var(--ink); }
@media (max-width: 860px) { .tp-split { grid-template-columns: 1fr; } .plan.card { position: static; } }

/* "late" is the one tile allowed to look like a warning — a soft coral, not a red */
.flow .f-alert { background: linear-gradient(100deg, #F4A590, #D9604C); color: #fff; box-shadow: none; } .flow .f-alert .fl-ic { background: rgba(255,255,255,.22); color: #fff; }

/* By person: everyone is a tile; a tile opens that person's window */
.ptiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(236px, 1fr)); gap: 12px; margin: 4px 0 8px; }
.pt { display: flex; flex-direction: column; gap: 12px; text-align: left; padding: 16px 16px 14px; border-radius: 28px; border: 1px solid #fff; cursor: pointer; font: inherit; color: inherit;
  background: rgba(255,255,255,.58); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); transition: background .3s, transform .45s var(--ease); }
.pt:hover { background: #fff; transform: translateY(-3px); }
.pt-top { display: flex; align-items: center; gap: 12px; }
.pt-top .av { width: 44px; height: 44px; font-size: 14px; }
.pt-top b { display: block; font-weight: 500; font-size: 15px; letter-spacing: -.01em; }
.pt-top i { display: block; font-style: normal; font-size: 12px; color: var(--ink3); }
.pt-go { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: rgba(255,255,255,.9); color: var(--ink2); transition: transform .4s var(--ease); flex: none; }
.pt:hover .pt-go { transform: rotate(-45deg); }
.pt-state { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--ink2); min-height: 18px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pt-state .st { width: 7px; height: 7px; border-radius: 50%; background: var(--ink4); flex: none; } .pt-state .st.in { background: var(--ink); }
.pt-figs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; padding-top: 10px; border-top: 1px solid var(--line); }
.pt-figs span { display: flex; flex-direction: column; } .pt-figs b { font-weight: 300; font-size: 22px; letter-spacing: -.03em; line-height: 1.1; } .pt-figs small { font-size: 10.5px; color: var(--ink3); }
.pt-figs .bad b { color: var(--alert); }
.pt.live { background: linear-gradient(180deg, rgba(255,255,255,.85), rgba(255,255,255,.6)); }
.modal .plan.card { position: static; }
.modal .tp-split { grid-template-columns: minmax(260px, 320px) 1fr; }

.plan .card-head h3 { font-size: 15px; }

/* By person — tiles */
.pt-go { width: auto; padding: 0 10px 0 12px; height: 30px; border-radius: 999px; gap: 6px; display: inline-flex; align-items: center; font-size: 12px; font-weight: 500; color: var(--ink); }
.pt:hover .pt-go { transform: none; background: var(--ink); color: #fff; }
.pt-go svg { width: 13px; height: 13px; }
.pt-bar { display: flex; gap: 3px; height: 6px; }
.pt-bar i { border-radius: 999px; min-width: 6px; }
.pt-bar .b-late { background: var(--alert); } .pt-bar .b-open { background: var(--wine); } .pt-bar .b-done { background: var(--slate); } .pt-bar .b-none { background: rgba(20,22,24,.1); }
.pt.live { background: linear-gradient(180deg, rgba(240,200,208,.7), rgba(255,255,255,.62)); }
.pt-state .pulse { flex: none; }
/* By person — the window */
.pw-head { display: flex; align-items: center; gap: 16px; margin: 0 0 18px; flex-wrap: wrap; }
.pw-head .av { width: 56px; height: 56px; font-size: 18px; }
.pw-head h3 { margin: 0; font-size: 26px; font-weight: 400; letter-spacing: -.03em; }
.pw-head p { margin: 2px 0 0; display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ink3); }
.pw-head .st { width: 8px; height: 8px; border-radius: 50%; background: var(--ink4); } .pw-head .st.in { background: var(--ink); } .pw-head .st.run { background: var(--amber); }
.pw-figs { display: flex; gap: 22px; margin-left: auto; }
.pw-figs span { display: flex; flex-direction: column; } .pw-figs b { font-size: 30px; font-weight: 300; letter-spacing: -.04em; line-height: 1; } .pw-figs small { font-size: 11px; color: var(--ink3); margin-top: 3px; }
.pw-figs .bad b { color: var(--alert); }
.pw-empty { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 38px 16px; border-radius: 26px; text-align: center; background: rgba(255,255,255,.4); }
.pw-empty b { font-weight: 500; font-size: 15px; } .pw-empty span { font-size: 13px; color: var(--ink3); margin-bottom: 8px; }
.pt-state .pt-go { margin-left: auto; flex: none; height: 26px; font-size: 11.5px; }
.pt-top .grow b, .pt-top .grow i { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pt-state .grow { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ── Tasks, minimal: flat tiles, a person's page, quiet rows, a form that opens in place ── */
.ptiles { gap: 10px; }
.pt { gap: 10px; padding: 14px 16px 12px; border-radius: 22px; border: 1px solid var(--line2); background: rgba(255,255,255,.4); -webkit-backdrop-filter: none; backdrop-filter: none; }
.pt:hover { background: rgba(255,255,255,.85); transform: none; border-color: rgba(20,22,24,.2); }
.pt.live { background: rgba(255,255,255,.4); border-color: rgba(var(--k600-rgb),.45); }
.pt-top .av { width: 38px; height: 38px; font-size: 13px; }
.pt-top b { font-size: 14.5px; }
.pt-bar { height: 4px; }
.pt-figs { border-top: 0; padding-top: 2px; grid-template-columns: repeat(3, auto); justify-content: start; gap: 22px; }
.pt-figs b { font-size: 20px; }

.pp-head { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 4px 0 16px; border-bottom: 1px solid var(--line); margin-bottom: 14px; }
.pp-back { width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--line2); background: transparent; display: grid; place-items: center; cursor: pointer; color: var(--ink2); transition: background .2s; }
.pp-back:hover { background: #fff; } .pp-back svg { transform: rotate(90deg); }
.pp-head .av { width: 48px; height: 48px; font-size: 16px; }
.pp-head h2 { margin: 0; font-size: 24px; font-weight: 400; letter-spacing: -.03em; }
.pp-head p { margin: 1px 0 0; display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ink3); }
.pp-head .st { width: 7px; height: 7px; border-radius: 50%; background: var(--ink4); } .pp-head .st.in { background: var(--ink); } .pp-head .st.run { background: var(--amber); }
.pp-head .pw-figs { margin-left: auto; gap: 20px; } .pp-head .pw-figs b { font-size: 24px; }
.iform { margin: 0 0 18px; padding: 18px 20px 16px; border-radius: 24px; background: rgba(255,255,255,.7); border: 1px solid #fff; animation: fade .25s ease; }
.iform-head h3 { margin: 0; font-weight: 400; font-size: 20px; letter-spacing: -.02em; } .iform-head .sub { margin: 4px 0 12px; color: var(--ink3); font-size: 13px; }
.iform .body { display: flex; flex-direction: column; gap: 14px; }
.iform .foot { display: flex; justify-content: flex-end; gap: 10px; margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--line); }
.pp .dstrip button { background: transparent; border-color: transparent; }
.pp .dstrip button:hover { background: rgba(255,255,255,.8); transform: none; }
.pp .dstrip button.on { border-color: transparent; }
.pp .dstrip-wrap .gl-go { background: transparent; border: 1px solid var(--line2); }
.pp-day { display: flex; align-items: baseline; gap: 12px; margin: 6px 2px 8px; }
.pp-day h3 { margin: 0; font-size: 20px; font-weight: 400; letter-spacing: -.02em; } .pp-day span { font-size: 12.5px; color: var(--ink3); }
.trows { display: flex; flex-direction: column; border-top: 1px solid var(--line); }
.trow { display: flex; align-items: center; gap: 12px; padding: 13px 6px; border-bottom: 1px solid var(--line); cursor: pointer; transition: background .2s; }
.trow:hover { background: rgba(255,255,255,.6); }
.trow .grow b { display: block; font-weight: 500; font-size: 14px; } .trow .grow i { display: block; font-style: normal; font-size: 12px; color: var(--ink3); }
.tr-ic { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; flex: none; background: rgba(20,22,24,.05); color: var(--ink2); }
.tr-ic.warn { background: var(--amber-soft); color: var(--amber-d); } .tr-ic.ok { background: var(--ok-soft); color: var(--ok); } .tr-ic.wait { background: var(--slate-soft); color: var(--slate-d); }
.tr-ic.run { background: var(--wine); color: #fff; }
.tr-ic svg { width: 15px; height: 15px; }
.tr-time { min-width: 64px; text-align: right; font-size: 14px; display: flex; flex-direction: column; } .tr-time small { font-size: 10.5px; color: var(--ink3); }
.tr-gap { width: 78px; }
.iform { max-width: 860px; }
.pp .dstrip button.on { background: radial-gradient(farthest-corner at 50% 70%, var(--k800) 0%, var(--k500) 62%, var(--k200) 100%); color: #fff; }
.pp .dstrip button.on small { color: rgba(255,255,255,.85); }

/* By person — a plain list: one line per person, hairlines, nothing floating */
.plist { display: flex; flex-direction: column; margin-top: 6px; }
.pl-head, .pl { display: flex; align-items: center; gap: 14px; padding: 0 6px; }
.pl-head { height: 30px; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink3); border-bottom: 1px solid var(--line2); }
.pl { width: 100%; min-height: 62px; border: 0; border-bottom: 1px solid var(--line); background: transparent; font: inherit; color: inherit; text-align: left; cursor: pointer; transition: background .2s; }
.pl:hover { background: rgba(255,255,255,.6); }
.pl .av { width: 36px; height: 36px; font-size: 12.5px; flex: none; }
.pl .grow b { display: block; font-weight: 500; font-size: 14.5px; } .pl .grow i { display: block; font-style: normal; font-size: 12px; color: var(--ink3); }
.pl-st { width: 250px; display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ink2); min-width: 0; }
.pl-st span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pl-st .st { width: 7px; height: 7px; border-radius: 50%; background: var(--ink4); flex: none; } .pl-st .st.in { background: var(--ink); }
.pl-n { width: 64px; text-align: right; font-size: 17px; font-weight: 300; font-variant-numeric: tabular-nums; flex: none; }
.pl-head .pl-n { font-size: 11px; font-weight: 400; }
.pl-n.bad { color: var(--alert); font-weight: 500; } .pl-n.zero { color: var(--ink4); }
.pl-go { width: 28px; flex: none; display: grid; place-items: center; color: var(--ink4); transition: transform .3s var(--ease), color .2s; }
.pl:hover .pl-go { color: var(--ink); transform: translateX(3px); }
@media (max-width: 760px) { .pl-st { display: none; } .pl-n { width: 44px; } }
.pl-head .pl-st { font-size: 11px; color: var(--ink3); }
.pl-head .grow { padding-left: 0; }

/* By person — minimal tiles: borderless, a whisper of fill, three numbers, nothing else */
.ptiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; margin-top: 6px; }
.pt { gap: 14px; padding: 16px 16px 14px; border: 0; border-radius: 22px; background: rgba(255,255,255,.5); box-shadow: none; }
.pt:hover { background: #fff; transform: none; }
.pt.live { background: rgba(255,255,255,.5); box-shadow: inset 0 0 0 1px rgba(var(--k600-rgb),.4); }
.pt-top .av { width: 36px; height: 36px; font-size: 12.5px; }
.pt-top b { font-size: 14.5px; font-weight: 500; }
.pt-state { font-size: 12.5px; color: var(--ink3); }
.pt-figs { grid-template-columns: repeat(3, auto); justify-content: space-between; gap: 8px; padding: 0; border: 0; }
.pt-figs b { font-size: 24px; font-weight: 300; }
.pt-figs .zero b { color: var(--ink4); }
.pt-figs .bad b { color: var(--alert); font-weight: 400; }
.pt-bar { display: none; }

/* ── Tasks: calmer tiles, a colour stripe for the state, approval shown where it is waiting ── */
.tiles { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; }
.ttile { min-height: 150px; padding: 16px 18px 14px 20px; border-radius: 24px; background: rgba(255,255,255,.55); border: 0; box-shadow: none; overflow: hidden; }
.ttile:hover { background: #fff; transform: none; }
.ttile::before { content: ''; position: absolute; left: 0; top: 18px; bottom: 18px; width: 3px; border-radius: 0 3px 3px 0; background: rgba(20,22,24,.1); }
.ttile.s-in_progress::before, .ttile.live::before { background: var(--wine); }
.ttile.s-submitted::before { background: var(--amber); }
.ttile.s-done::before { background: var(--slate); }
.ttile.s-assigned::before, .ttile.s-changes::before, .ttile.s-pending::before { background: var(--cream); }
.ttile.late::before { background: var(--alert); }
.ttile.live { box-shadow: none; background: rgba(255,255,255,.8); }
.ttile.s-submitted { background: linear-gradient(135deg, rgba(255,255,255,.75), rgba(255,255,255,.55) 60%); }
.tt-bot { align-items: center; }
.tt-btns { margin-left: auto; display: flex; gap: 6px; }
.tt-btns .btn { margin: 0; }
.tt-meta + .tt-btns { margin-left: 8px; }
.btn.ghost.sm { background: rgba(20,22,24,.05); border-color: transparent; }
.btn.ghost.sm:hover { background: rgba(20,22,24,.1); }

.pt-ap { margin-left: auto; align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 10px 0 8px; border-radius: 999px; font-size: 11.5px; font-weight: 500; white-space: nowrap;
  background: linear-gradient(100deg, var(--k200), var(--k300)); color: #4A0E1A; }
.pt-ap i { width: 6px; height: 6px; border-radius: 50%; background: #fff; animation: pulse 2s ease-in-out infinite; }
.pt.ap { box-shadow: inset 0 0 0 1px rgba(var(--k300-rgb),.55); }
.pt-top .grow { min-width: 0; }

.pp-wait { margin: 0 0 18px; padding: 14px 16px 6px; border-radius: 24px; background: linear-gradient(135deg, rgba(255,255,255,.8), rgba(255,255,255,.5) 70%); }
.pp-wait h3 { display: flex; align-items: center; gap: 8px; margin: 0 0 4px; font-size: 15px; font-weight: 500; }
.pp-wait h3 i { width: 8px; height: 8px; border-radius: 50%; background: var(--k300); }
.pp-wait h3 span { font-weight: 400; color: var(--ink3); }
.pp-wait .trows { border-top: 0; }
.pp-wait .trow:last-child { border-bottom: 0; }

.pt-ap { margin-left: 0; }
.tt-fig { white-space: nowrap; flex: none; }
.tt-fig b { font-size: 27px; }
.tt-bot { flex-wrap: wrap; row-gap: 8px; }
.tt-meta { min-width: 0; }

/* ── By task / By day: room to breathe — title, one quiet state line, the time, one button ── */
.tiles { grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 16px; }
.ttile { min-height: 148px; padding: 20px 22px 18px 26px; gap: 14px; border-radius: 26px; }
.ttile::before { top: 22px; bottom: 22px; }
.tt-top { display: flex; flex-direction: column; gap: 4px; }
.tt-top b { font-weight: 500; font-size: 15.5px; line-height: 1.3; -webkit-line-clamp: 2; }
.tt-top > span { font-size: 12.5px; color: var(--ink3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tt-state { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--ink2); }
.tt-state i { width: 7px; height: 7px; border-radius: 50%; background: var(--ink4); flex: none; }
.tt-state i.run, .tt-state i.ok { background: var(--wine); } .tt-state i.warn { background: var(--amber); } .tt-state i.wait { background: var(--slate); }
.tt-state em { font-style: normal; color: var(--alert); font-weight: 500; }
.tt-bot { margin-top: auto; padding-top: 2px; }
.tt-fig b { font-size: 24px; }
.tt-meta { margin-left: auto; font-size: 12px; color: var(--ink3); white-space: nowrap; }
.btn.icon.sm { width: 34px; height: 34px; padding: 0; justify-content: center; }
.dayhead { margin: 34px 6px 16px; }
.dayhead:first-child { margin-top: 8px; }

/* ── a colour for every page: two soft washes behind the top of the page, chosen per screen ── */

/* ── Overview: room to breathe ── */
.ov-bento { gap: 20px; }
.ov-band { margin-top: 40px; gap: 44px; padding: 34px 36px 30px; }
.ov-me { margin-top: 40px; }
.ov-four { margin-top: 40px; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.ov-head { padding-bottom: 36px; }
.strip { margin-bottom: 8px; }
.ov-dhead { margin-bottom: 20px; }
section.gl[style*="margin-top:16px"] { margin-top: 40px !important; }
@media (max-width: 900px) { .ov-four { grid-template-columns: 1fr; } }

/* ── Overview · My week ── */
.my-wk { display: grid; grid-template-columns: minmax(220px, 1.2fr) repeat(2, minmax(0, 1fr)); gap: 14px; }
.wk-lead { grid-row: span 2; display: flex; flex-direction: column; padding: 22px 24px; min-height: 230px; }
.wk-lead .fx-big b { font-size: clamp(56px, 5vw, 84px); }
.wk-t { display: flex; flex-direction: column; justify-content: space-between; gap: 6px; padding: 16px 18px; border-radius: 24px; text-decoration: none; color: inherit; background: rgba(255,255,255,.55); transition: background .25s; }
.wk-t:hover { background: #fff; }
.wk-t i { font-style: normal; font-size: 12px; color: var(--ink3); }
.wk-t b { font-size: 38px; font-weight: 300; letter-spacing: -.04em; line-height: 1; }
.wk-t span { font-size: 11.5px; color: var(--ink3); }
.wk-t.bad b { color: var(--alert); }
@media (max-width: 760px) { .my-wk { grid-template-columns: 1fr 1fr; } .wk-lead { grid-column: span 2; grid-row: auto; } }

/* ── My day: two equal cards, then quiet rows ── */
.dy-figs { margin-left: auto; display: flex; gap: 30px; }
.dy-figs span, .dy-stats span { display: flex; flex-direction: column; }
.dy-figs b { font-size: 34px; font-weight: 300; letter-spacing: -.04em; line-height: 1; }
.dy-figs small, .dy-stats small { font-size: 11.5px; color: var(--ink3); margin-top: 4px; }
.dy-top { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin-bottom: 8px; }
.dy-card { display: flex; flex-direction: column; min-height: 270px; padding: 24px 26px 22px; border-radius: 34px; }
.dy-plain { background: rgba(255,255,255,.6); border: 1px solid #fff; color: var(--ink); }
.dy-head { display: flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 500; }
.dy-ic { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: rgba(255,255,255,.9); color: var(--ink2); }
.dy-big { margin-top: auto; font-family: var(--dot); font-weight: 600; font-size: clamp(46px, 4.4vw, 68px); letter-spacing: -.03em; line-height: 1; font-variation-settings: 'ROND' 100; }
.dy-title { margin-top: 18px; font-size: 22px; font-weight: 400; letter-spacing: -.02em; line-height: 1.25; }
.dy-card .dy-title + .dy-big { margin-top: 14px; }
.dy-sub { margin-top: 10px; font-size: 13.5px; opacity: .88; }
.dy-hint { margin-top: 22px; max-width: 44ch; font-size: 15px; color: var(--ink2); opacity: 1; }
.dy-foot { display: flex; align-items: center; gap: 10px; margin-top: 22px; flex-wrap: wrap; }
.dy-foot.dy-stats { margin-top: auto; padding-top: 18px; gap: 34px; flex-wrap: nowrap; }
.dy-stats b { font-size: 34px; font-weight: 600; }
.dy-link { margin-left: auto; display: inline-flex; align-items: center; gap: 4px; font-size: 13px; color: inherit; text-decoration: none; opacity: .9; }
.dy-link:hover { opacity: 1; text-decoration: underline; }
.dy-w { background: #fff !important; color: var(--ink) !important; border-color: transparent !important; }
.dy-g { background: rgba(255,255,255,.2) !important; color: #fff !important; border-color: rgba(255,255,255,.45) !important; }
.dy-sec { margin-top: 34px; }
.dy-sec > header { display: flex; align-items: center; gap: 10px; margin: 0 4px 6px; }
.dy-sec > header h3 { margin: 0; font-size: 17px; font-weight: 400; letter-spacing: -.02em; display: flex; align-items: center; gap: 8px; }
.dy-sec > header span { height: 20px; min-width: 20px; padding: 0 7px; border-radius: 999px; display: grid; place-items: center; font-size: 11.5px; background: rgba(20,22,24,.06); color: var(--ink2); }
.tr-st { font-size: 12.5px; color: var(--ink2); white-space: nowrap; } .tr-st em { font-style: normal; color: var(--alert); font-weight: 500; }
.tr-btns { display: flex; gap: 6px; align-items: center; min-width: 40px; justify-content: flex-end; }
.tr-btns .btn { margin: 0; }
@media (max-width: 900px) { .dy-top { grid-template-columns: 1fr; } .dy-figs { margin-left: 0; flex-wrap: wrap; } .tr-st { display: none; } }

/* ═══ Three colours — lime, teal, ink — on a quiet grey canvas; a side rail for the screens ═══ */
body::before { background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .04 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),
    radial-gradient(circle, rgba(20,22,24,.06) 1px, transparent 1.4px) 0 0 / 22px 22px,
    linear-gradient(180deg, #F3F5F8 0%, #E9ECF1 100%); }
body::after { content: none; }

/* the second tile is a light cobalt tint, so its writing is ink */
.fx-amber .fx-ic, .fx-red .fx-ic { background: rgba(44,46,51,.08); color: var(--ink); -webkit-backdrop-filter: none; backdrop-filter: none; }
.fx-amber .glass-pill, .fx-red .glass-pill { background: rgba(44,46,51,.07); border-color: rgba(44,46,51,.12); color: var(--ink); }
.fx-amber .muted, .fx-amber .sub, .fx-amber .gl-muted, .fx-amber .fx-sub, .fx-red .fx-sub { color: rgba(44,46,51,.62); opacity: 1; }
.fx-amber .fx-dot { opacity: .5; }
.fx-amber .fx-chip, .fx-amber .fx-av { background: rgba(44,46,51,.08); color: var(--ink); border-color: rgba(44,46,51,.12); }
.fx-amber .rings i, .fx-amber .cash i { border-color: rgba(44,46,51,.18); }
.fx-amber .track { background: repeating-linear-gradient(90deg, rgba(44,46,51,.25) 0 3px, transparent 3px 7px); } .fx-amber .track i { background: var(--ink); }
.fx-amber .dy-w { background: var(--ink) !important; color: #fff !important; }
.fx-amber .dy-link { color: var(--ink); }
.fx-amber .plus { background: rgba(44,46,51,.08); color: var(--ink); box-shadow: inset 0 0 0 1px rgba(44,46,51,.15); }
.fx-amber .coin-ring .bg { stroke: rgba(44,46,51,.15); } .fx-amber .coin-ring .fg { stroke: var(--ink); }
.fx-amber .mbars span i { background: var(--ink); } .fx-amber .mbars em { color: rgba(44,46,51,.6); }
.fx-amber .flip-pct, .fx-amber .flip-sub { color: var(--ink); }
.fxp-amber .fxp-t i { color: rgba(44,46,51,.6); }
.fxp-amber .fxp-go { background: rgba(44,46,51,.08); box-shadow: inset 0 0 0 1px rgba(44,46,51,.12); }
.c14 em.amber { color: var(--ink); }
.flow .f-amber { color: var(--ink); }
.pt-ap { color: var(--ink); background: var(--k300); }
.pt-ap i { background: var(--ink); }
.pt.ap { box-shadow: inset 0 0 0 1px rgba(var(--k500-rgb),.9); }
.pp-wait { background: linear-gradient(135deg, rgba(var(--k200-rgb),.55), rgba(255,255,255,.5) 70%); }
.pp-wait h3 i { background: var(--k300); }
.ttile.s-submitted { background: linear-gradient(135deg, rgba(var(--k200-rgb),.5), rgba(255,255,255,.55) 60%); }
.ttile.s-submitted::before { background: var(--k300); }
.ttile.s-assigned::before, .ttile.s-changes::before, .ttile.s-pending::before { background: var(--k300); }
.ttile.s-done::before { background: var(--wine); }
.ttile.s-in_progress::before, .ttile.live::before { background: var(--ink); }
.tt-state i.warn { background: var(--k300); } .tt-state i.run, .tt-state i.ok { background: var(--ink); } .tt-state i.wait { background: var(--wine-l); }

/* team icons: one flat colour each — no gradient */
.av, .av.r1, .av.r2 { background: var(--k600) !important; color: #fff; }
.av.r1 { background: var(--k300) !important; color: var(--ink); }
.av.r2 { background: #2C2E33 !important; color: #fff; }
.fx-av { background: rgba(255,255,255,.22); }
.fx-amber .fx-av { background: rgba(44,46,51,.1); }
.gx-me .av { background: #2C2E33 !important; color: #fff; }


/* cobalt: the lead tile keeps white writing, the quiet tile ink; the running-task bar and runbar follow */
.fx-wine .dy-g, .fx-black .dy-g { background: rgba(255,255,255,.2) !important; color: #fff !important; border-color: rgba(255,255,255,.4) !important; }
.fx-wine .dy-w { background: #fff !important; color: var(--ink) !important; }
.pt-ap { background: var(--k600); color: #fff; } .pt-ap i { background: #fff; }
.pt.ap { box-shadow: inset 0 0 0 1px rgba(var(--k600-rgb),.5); }
.dstrip button.on, .pp .dstrip button.on { background: var(--k600); color: #fff; }

/* the colour picker */
.themes { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.theme { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; padding: 12px; border-radius: 20px; border: 1px solid var(--line2); background: rgba(255,255,255,.6); cursor: pointer; font: inherit; color: inherit; transition: background .2s, box-shadow .2s; }
.theme:hover { background: #fff; }
.theme.on { background: #fff; box-shadow: inset 0 0 0 2px var(--ink); }
.theme-bar { display: flex; width: 100%; height: 34px; border-radius: 12px; overflow: hidden; }
.theme-bar i { flex: 1; }
.theme b { font-weight: 500; font-size: 13px; }

/* no black cards: the third tile is the middle shade of the accent; black stays for buttons and small chips */
.fx-slate { --fx: radial-gradient(farthest-corner at 52% 62%, var(--k500) 0%, var(--k400) 36%, var(--k300) 66%, var(--k200) 90%, var(--k100) 100%); text-shadow: 0 1px 14px rgba(var(--k900-rgb), .18); }
.fx-ink { --fx: radial-gradient(farthest-corner at 52% 62%, var(--k800) 0%, var(--k600) 40%, var(--k400) 74%, var(--k250) 100%); }
.flow .f-ink { background: linear-gradient(100deg, var(--k400), var(--k800)); color: #fff; }
.c14 em.ink, .ev.t-event, .ev.t-meeting, .ev.t-pitch, .ev.t-launch, .ev.t-reminder, .ev.t-deadline, .ev.t-company { background: var(--k800); color: #fff; }
.av, .av.r1, .av.r2, .gx-me .av { color: #fff; }
.av { background: var(--k600) !important; }
.av.r1 { background: var(--k400) !important; }
.av.r2, .gx-me .av { background: var(--k800) !important; }
.fx-wine .fx-av, .fx-slate .fx-av { background: rgba(255,255,255,.22); }
.ptile .now, .wrow.on { }
.wrow.on { background: var(--k800); }
.pstep.on, .who.on, .choice button.on, .chain .st.done { background: var(--k800); border-color: var(--k800); }
.gx-duty.live { background: var(--k800) !important; border-color: var(--k800); }
.tt-ic.ok { background: var(--k800); }
.file .ext { background: var(--k800); }
.c14 em.slate { background: var(--k400); }
.c-V { background: var(--k400); }

.flow .f-hatch .fl-ic { background: rgba(var(--k600-rgb), .12); color: var(--ink); }
.flow .f-hatch .fl-t i { opacity: .75; }
.fx-slate .fx-ic, .fx-ink .fx-ic { background: rgba(44,46,51,.08); color: var(--ink); -webkit-backdrop-filter: none; backdrop-filter: none; }
.fx-slate .glass-pill, .fx-ink .glass-pill { background: rgba(44,46,51,.07); border-color: rgba(44,46,51,.12); color: var(--ink); }
.fx-slate .muted, .fx-slate .sub, .fx-slate .gl-muted, .fx-slate .fx-sub, .fx-ink .fx-sub { color: rgba(44,46,51,.62); opacity: 1; }
.fx-slate .fx-dot { opacity: .5; }
.fx-slate .fx-chip, .fx-slate .fx-av { background: rgba(44,46,51,.08); color: var(--ink); border-color: rgba(44,46,51,.12); }
.fx-slate .rings i, .fx-slate .cash i { border-color: rgba(44,46,51,.18); }
.fx-slate .track { background: repeating-linear-gradient(90deg, rgba(44,46,51,.25) 0 3px, transparent 3px 7px); } .fx-slate .track i { background: var(--ink); }
.fx-slate .dy-w { background: var(--ink) !important; color: #fff !important; }
.fx-slate .dy-link { color: var(--ink); }
.fx-slate .plus { background: rgba(44,46,51,.08); color: var(--ink); box-shadow: inset 0 0 0 1px rgba(44,46,51,.15); }
.fx-slate .coin-ring .bg { stroke: rgba(44,46,51,.15); } .fx-slate .coin-ring .fg { stroke: var(--ink); }
.fx-slate .mbars span i { background: var(--ink); } .fx-slate .mbars em { color: rgba(44,46,51,.6); }
.fx-slate .flip-pct, .fx-slate .flip-sub { color: var(--ink); }
.fx-slate .fx-av { background: rgba(44,46,51,.1); }

/* ═══ three colours: lead (k), second (s), third (t) ═══ */
:root {
  --s900: var(--k900); --s800: var(--k800); --s600: var(--k600); --s500: var(--k500); --s400: var(--k400); --s300: var(--k300); --s250: var(--k250); --s200: var(--k200); --s100: var(--k100); --s50: var(--k50);
  --t900: var(--k900); --t800: var(--k800); --t600: var(--k600); --t500: var(--k500); --t400: var(--k400); --t300: var(--k300); --t250: var(--k250); --t200: var(--k200); --t100: var(--k100); --t50: var(--k50);
  --s900-rgb: var(--k900-rgb); --s600-rgb: var(--k600-rgb); --s500-rgb: var(--k500-rgb); --s400-rgb: var(--k400-rgb); --s300-rgb: var(--k300-rgb); --t600-rgb: var(--k600-rgb); --t500-rgb: var(--k500-rgb); --t400-rgb: var(--k400-rgb);
  --amber: var(--s400); --amber-d: var(--s800); --amber-soft: rgba(var(--s400-rgb), .18);
  --slate: var(--t500); --slate-d: var(--t800); --slate-soft: rgba(var(--t500-rgb), .18);
  --cream: var(--t200); --cream-ink: var(--t900);
}
.fx-amber, .fx-red, .fx-rose { --fx: radial-gradient(farthest-corner at 45% 64%, var(--s400) 0%, var(--s300) 34%, var(--s250) 64%, var(--s200) 88%, var(--s100) 100%); color: var(--ink); text-shadow: none; }
.fx-slate, .fx-ink { color: var(--ink); text-shadow: none; --fx: radial-gradient(farthest-corner at 52% 62%, var(--t400) 0%, var(--t300) 36%, var(--t250) 66%, var(--t200) 90%, var(--t100) 100%); }
.fxp-amber { color: var(--ink); background: linear-gradient(100deg, var(--s200), var(--s400) 60%, var(--s500)); }
.fxp-slate { color: var(--ink); background: linear-gradient(100deg, var(--t200), var(--t400) 60%, var(--t500)); }
.fxp-slate .fxp-t i { color: rgba(44,46,51,.6); } .fxp-slate .fxp-go { background: rgba(44,46,51,.08); box-shadow: inset 0 0 0 1px rgba(44,46,51,.12); }
.flow .f-amber { background: linear-gradient(100deg, var(--s100), var(--s300)); color: var(--ink); }
.flow .f-slate { background: linear-gradient(100deg, var(--t200), var(--t400)); color: var(--ink); } .flow .f-slate .fl-ic { background: rgba(255,255,255,.55); color: var(--ink); }
.c14 em.amber { background: var(--s400); color: var(--ink); }
.c14 em.slate { background: var(--t400); color: var(--ink); }
.c-V { background: var(--t400); color: var(--ink); }
.av.r1 { background: var(--s500) !important; color: #fff; }
.av.r2, .gx-me .av { background: var(--t600) !important; color: #fff; }
.pill.warn { background: var(--amber-soft); color: var(--amber-d); }
.pill.slate { background: var(--slate-soft); color: var(--slate-d); }
.pt-ap { background: var(--s600); color: #fff; } .pt-ap i { background: #fff; }
.theme-bar i { flex: 1; }

/* Team's work: what fills the space under the pills */
.tw-fill { display: flex; flex-direction: column; gap: 14px; margin-top: 18px; }
.tw-card { padding: 16px 18px 14px; border-radius: 24px; background: rgba(255,255,255,.6); border: 1px solid #fff; }
.tw-card header { display: flex; align-items: baseline; gap: 10px; margin-bottom: 12px; }
.tw-card header b { font-weight: 500; font-size: 14px; } .tw-card header span { font-size: 12px; color: var(--ink3); margin-left: auto; }
.tw-bars { display: grid; grid-template-columns: repeat(14, minmax(0, 1fr)); gap: 6px; align-items: end; height: 110px; }
.tw-bars > span { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 4px; height: 100%; }
.tw-bars b { font-size: 10.5px; font-weight: 500; color: var(--ink3); height: 13px; }
.tw-bars i { display: block; width: 100%; max-width: 22px; height: calc(var(--h) * .62); border-radius: 8px; background: var(--k250); transition: background .25s; }
.tw-bars > span.now i { background: var(--k600); }
.tw-bars > span:hover i { background: var(--k500); }
.tw-bars em { font-style: normal; font-size: 10px; color: var(--ink3); }
.tw-seg { display: flex; gap: 3px; height: 14px; }
.tw-seg i { border-radius: 999px; min-width: 10px; }
.tw-seg .in, .tw-leg .in { background: var(--k600); } .tw-seg .out, .tw-leg .out { background: var(--s400); } .tw-seg .leave, .tw-leg .leave { background: var(--t400); } .tw-seg .absent, .tw-leg .absent { background: var(--alert); } .tw-seg .none { background: rgba(20,22,24,.1); }
.tw-leg { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 12px; }
.tw-leg span { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--ink2); }
.tw-leg i { width: 8px; height: 8px; border-radius: 50%; } .tw-leg b { font-weight: 500; color: var(--ink); margin-left: 2px; }
/* Shoots on the overview: the three nearest, side by side, each a small poster */
.sh-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.sh-card { display: flex; flex-direction: column; gap: 12px; min-height: 252px; padding: 18px 18px 16px; border-radius: 28px; }
.sh-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.sh-date { display: flex; flex-direction: column; line-height: 1; }
.sh-date b { font-size: 46px; font-weight: 300; letter-spacing: -.05em; }
.sh-date i { font-style: normal; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; opacity: .75; margin-top: 6px; }
.sh-when { font-size: 11.5px; font-weight: 500; padding: 4px 10px; border-radius: 999px; background: rgba(255,255,255,.22); white-space: nowrap; }
.fx-amber .sh-when, .fx-slate .sh-when { background: rgba(44,46,51,.08); }
.sh-title { font-size: 16px; font-weight: 500; line-height: 1.3; letter-spacing: -.01em; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.sh-meta { display: flex; flex-direction: column; gap: 5px; font-size: 12.5px; opacity: .9; margin-top: auto; }
.sh-meta span { display: flex; align-items: center; gap: 7px; min-width: 0; }
.sh-meta span svg { flex: none; width: 14px; height: 14px; opacity: .8; }
.sh-foot { display: flex; align-items: center; justify-content: space-between; }
.sh-go { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: rgba(255,255,255,.22); transition: transform .4s var(--ease); }
.fx-amber .sh-go, .fx-slate .sh-go { background: rgba(44,46,51,.08); }
.sh-card:hover .sh-go { transform: rotate(45deg); }
@media (max-width: 1200px) { .sh-grid { grid-template-columns: 1fr; } .sh-card { min-height: 0; } }

/* shoot cards: sturdier type — heavier weights, no shadow, easier sizes */
.sh-card { text-shadow: none; font-feature-settings: 'tnum' 1, 'cv11' 1; }
.sh-date b { font-size: 44px; font-weight: 500; letter-spacing: -.03em; }
.sh-date i { font-size: 11.5px; font-weight: 600; letter-spacing: .1em; opacity: .85; }
.sh-when { font-size: 12px; font-weight: 600; padding: 5px 11px; }
.sh-title { font-size: 17px; font-weight: 600; line-height: 1.25; letter-spacing: -.005em; }
.sh-meta { font-size: 13px; font-weight: 500; opacity: 1; gap: 6px; }
.sh-meta span { align-items: flex-start; line-height: 1.3; }
.sh-meta span svg { margin-top: 2px; opacity: .9; }
.sh-foot .fx-chip { font-size: 11.5px; font-weight: 600; height: 24px; }

.sh-card, .sh-card * { text-shadow: none !important; -webkit-font-smoothing: antialiased; }
.sh-title { font-weight: 560; font-size: 16.5px; }
.sh-meta { font-weight: 450; }
.sh-card.fx-wine .sh-title, .sh-card.fx-wine .sh-meta { font-weight: 500; }
.sh-foot .fx-chip { margin: 0 !important; }
.sh-date i { font-weight: 550; }

/* the Spec Media logo: the wordmark on the sign-in page, the SP mark everywhere small */
.gx-brand { width: auto; min-width: 44px; padding: 0 15px; border-radius: 999px; }
.gx-brand img { width: auto; height: 15px; border-radius: 0; object-fit: contain; }
.si-brand { padding: 0 18px; }
.si-brand img.wordmark { width: auto; height: 15px; border-radius: 0; }
.si-card .logo { width: auto; height: 30px; border-radius: 0; margin: 0 auto 22px; }
.boot img { width: auto; height: 38px; border-radius: 0; }
.gl-ic, .fx-ic { }

/* shoot cards: light and minimal again */
.sh-date b { font-weight: 300; font-size: 46px; letter-spacing: -.045em; }
.sh-date i { font-weight: 400; letter-spacing: .12em; opacity: .75; }
.sh-when { font-weight: 400; font-size: 11.5px; }
.sh-title { font-weight: 400; font-size: 17px; line-height: 1.3; letter-spacing: -.01em; }
.sh-meta { font-weight: 400; font-size: 12.5px; opacity: .85; }
.sh-card.fx-wine .sh-title, .sh-card.fx-wine .sh-meta { font-weight: 400; }
.sh-foot .fx-chip { font-weight: 400; font-size: 11px; }

/* shoot cards: a size smaller all round */
.sh-card { gap: 10px; min-height: 226px; padding: 16px 16px 14px; }
.sh-date b { font-size: 38px; }
.sh-date i { font-size: 10px; margin-top: 5px; }
.sh-when { font-size: 10.5px; padding: 3px 9px; }
.sh-title { font-size: 14.5px; line-height: 1.3; }
.sh-meta { font-size: 11.5px; gap: 4px; }
.sh-meta span svg { width: 12px; height: 12px; margin-top: 2px; }
.sh-foot .fx-chip { font-size: 10px; height: 21px; padding: 0 9px; }
.sh-go { width: 26px; height: 26px; }

/* the sign-in card carries the full wordmark */
.si-card .logo { height: 24px; width: auto; max-width: 78%; margin: 4px auto 24px; }

/* team members: one flat green, no variants */
.av, .av.r1, .av.r2, .gx-me .av, .pt-top .av, .pp-head .av, .pl .av { background: #3E7B5A !important; color: #fff !important; }

/* the lead tile: one smooth sweep from a lighter corner to a deeper one — no dark pool in the middle */
.fx-wine, .fx-black {
  --fx: radial-gradient(130% 100% at 0% 0%, rgba(255,255,255,.22) 0%, transparent 62%),
        linear-gradient(155deg, var(--k500) 0%, var(--k600) 38%, var(--k600) 58%, var(--k800) 100%);
}

/* the lead tile: from the middle out to the sides, eased so no step shows */
.fx-wine, .fx-black {
  --fx: radial-gradient(farthest-corner at 50% 58%,
      var(--k600) 0%,
      color-mix(in srgb, var(--k600) 55%, var(--k500)) 16%,
      var(--k500) 30%,
      color-mix(in srgb, var(--k500) 55%, var(--k400)) 44%,
      var(--k400) 58%,
      color-mix(in srgb, var(--k400) 55%, var(--k300)) 72%,
      var(--k300) 86%,
      var(--k250) 100%);
}

/* Tasks · Today */
.td-sum { display: flex; align-items: flex-end; gap: 34px; flex-wrap: wrap; padding: 6px 4px 22px; }
.td-sum > div { display: flex; flex-direction: column; }
.td-sum b { font-size: 34px; font-weight: 600; line-height: 1; letter-spacing: -.02em; } .td-sum span { font-size: 12px; color: var(--ink3); margin-top: 6px; }
.td-sum .btn { margin-left: auto; }
.td-g { margin: 0 0 24px; padding: 14px 18px 8px; border-radius: 26px; background: rgba(255,255,255,.55); }
.td-g > header { display: flex; align-items: center; gap: 12px; padding-bottom: 8px; }
.td-g > header .av { width: 38px; height: 38px; font-size: 13px; }
.td-g > header b { display: block; font-weight: 500; font-size: 15px; } .td-g > header i { display: block; font-style: normal; font-size: 12px; color: var(--ink3); }
.td-prog { width: 120px; height: 5px; border-radius: 999px; background: rgba(20,22,24,.08); overflow: hidden; flex: none; }
.td-prog i { display: block; height: 100%; border-radius: 999px; background: var(--k500); }
.td-n { font-size: 12px; color: var(--ink2); white-space: nowrap; min-width: 84px; text-align: right; }
.td-g .trows { border-top: 1px solid var(--line); }
.td-g .trow:last-child { border-bottom: 0; }
.td-quiet { margin: 4px 6px 0; font-size: 12.5px; color: var(--ink3); }

/* the lead tile, deeper again: a rich core easing out to a still-strong rust at the sides (no pale edge) */
.fx-wine, .fx-black {
  --fx: radial-gradient(farthest-corner at 50% 60%,
      var(--k800) 0%,
      color-mix(in srgb, var(--k800) 50%, var(--k600)) 14%,
      var(--k600) 30%,
      color-mix(in srgb, var(--k600) 50%, var(--k500)) 46%,
      var(--k500) 60%,
      color-mix(in srgb, var(--k500) 50%, var(--k400)) 76%,
      var(--k400) 90%,
      color-mix(in srgb, var(--k400) 55%, var(--k300)) 100%);
}

/* lead tile, final: a broad deep core that opens out evenly — rich red all the way to the sides */
.fx-wine, .fx-black {
  --fx: radial-gradient(farthest-corner at 50% 58%,
      color-mix(in srgb, var(--k800) 60%, var(--k600)) 0%,
      color-mix(in srgb, var(--k800) 30%, var(--k600)) 14%,
      var(--k600) 30%,
      color-mix(in srgb, var(--k600) 50%, var(--k500)) 50%,
      var(--k500) 70%,
      color-mix(in srgb, var(--k500) 62%, var(--k400)) 100%);
}

.fx-wine, .fx-black {
  --fx: radial-gradient(farthest-corner at 50% 58%,
      color-mix(in srgb, var(--k800) 34%, var(--k600)) 0%,
      color-mix(in srgb, var(--k800) 16%, var(--k600)) 18%,
      var(--k600) 38%,
      color-mix(in srgb, var(--k600) 50%, var(--k500)) 58%,
      var(--k500) 78%,
      color-mix(in srgb, var(--k500) 62%, var(--k400)) 100%);
}

/* the lead tile, as it was when it was made smooth: one even sweep from a lighter corner to a deeper one */
.fx-wine, .fx-black {
  --fx: radial-gradient(130% 100% at 0% 0%, rgba(255,255,255,.22) 0%, transparent 62%),
        linear-gradient(155deg, var(--k500) 0%, var(--k600) 38%, var(--k600) 58%, var(--k800) 100%);
}

/* team members: one flat colour — the palette's soft sage (its second colour), not the deep green */
.av, .av.r1, .av.r2, .gx-me .av, .pt-top .av, .pp-head .av, .pl .av, .td-g > header .av { background: var(--s600) !important; color: #fff !important; }

/* a chosen pill is ink, not red: the people chips, quick choices and steps */
.who.on, .choice button.on, .pstep.on, .chain .st.done, .wrow.on { background: var(--ink); border-color: var(--ink); color: #fff; }
.who.on em { background: rgba(255,255,255,.18); color: #fff; }
.who.on em.bad { background: var(--alert); color: #fff; }

/* the light tiles (second and third colour) write in ink — every text inside them, not just some */
.fx-amber, .fx-red, .fx-rose, .fx-slate, .fx-ink { color: var(--ink); }
.fx-amber .fig, .fx-red .fig, .fx-rose .fig, .fx-slate .fig, .fx-ink .fig,
.fx-amber .fig small, .fx-red .fig small, .fx-slate .fig small,
.fx-amber b, .fx-red b, .fx-slate b, .fx-ink b,
.fx-amber .card-head, .fx-red .card-head { color: var(--ink); }
.fx-amber .sub, .fx-red .sub, .fx-rose .sub, .fx-slate .sub, .fx-ink .sub,
.fx-red .card-head .sub, .fx-amber .card-head .sub, .fx-slate .card-head .sub,
.fx-red .muted, .fx-slate .muted, .fx-ink .muted, .fx-red .gl-muted, .fx-slate .gl-muted, .fx-red .fx-sub, .fx-slate .fx-sub { color: rgba(44,46,51,.62); opacity: 1; }
.fx-red .fx-ic, .fx-slate .fx-ic, .fx-ink .fx-ic { background: rgba(44,46,51,.08); color: var(--ink); }
.fx-red .glass-pill, .fx-slate .glass-pill, .fx-ink .glass-pill { background: rgba(44,46,51,.07); border-color: rgba(44,46,51,.12); color: var(--ink); }

/* the ••• in the bar now says "More" */
.gx-nav .more { width: auto; padding: 0 12px 0 14px; gap: 5px; }
.gx-nav .more svg { width: 13px; height: 13px; opacity: .7; }

.gx-nav button { padding: 0 13px; }
.gx-nav .more { padding: 0 10px 0 12px; }
.gx-duty { flex: none; }
.gx-tail { flex: 0 1 auto; }
.gx-lead { flex: 1 1 0; }

/* arriving: a person's page rises in piece by piece; their rows settle in; the tiles come back the same way */
@keyframes ppRise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes ppFade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.pp.enter > * { animation: ppRise .55s var(--ease) both; }
.pp.enter > *:nth-child(2) { animation-delay: .06s; } .pp.enter > *:nth-child(3) { animation-delay: .12s; }
.pp.enter > *:nth-child(4) { animation-delay: .18s; } .pp.enter > *:nth-child(5) { animation-delay: .24s; }
.pp .trow { animation: ppFade .4s var(--ease) both; }
.pp .trow:nth-child(2) { animation-delay: .05s; } .pp .trow:nth-child(3) { animation-delay: .1s; } .pp .trow:nth-child(4) { animation-delay: .15s; }
.pp .trow:nth-child(5) { animation-delay: .2s; } .pp .trow:nth-child(n+6) { animation-delay: .25s; }
.pp.enter .pp-head .av { animation: ppPop .6s var(--ease) .1s both; }
@keyframes ppPop { from { opacity: 0; transform: scale(.6); } to { opacity: 1; transform: none; } }
.ptiles .pt { animation: ppRise .45s var(--ease) both; }
.ptiles .pt:nth-child(2) { animation-delay: .04s; } .ptiles .pt:nth-child(3) { animation-delay: .08s; } .ptiles .pt:nth-child(4) { animation-delay: .12s; }
.ptiles .pt:nth-child(5) { animation-delay: .16s; } .ptiles .pt:nth-child(6) { animation-delay: .2s; } .ptiles .pt:nth-child(n+7) { animation-delay: .24s; }
.pt:active { transform: scale(.98); }
@media (prefers-reduced-motion: reduce) { .pp.enter > *, .pp .trow, .ptiles .pt, .pp.enter .pp-head .av { animation: none; } }

/* On time: the gauge sits in the middle of the card and the legend on its floor — no blank strip underneath */
.ov-four > .gl:first-child { display: flex; flex-direction: column; }
.ov-four > .gl:first-child .goal-wrap { margin: auto; width: min(100%, 360px); transform: scale(1.12); transform-origin: 50% 55%; }
.ov-four > .gl:first-child .goal-leg { margin-top: auto; padding-top: 16px; border-top: 1px solid var(--line); }

/* the header: logo left, the screens exactly in the middle, your tools right */
.gx-top { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; }
.gx-top .gx-lead { justify-self: start; flex: none; }
.gx-top .gx-nav { justify-self: center; margin: 0; }
.gx-top .gx-tail { justify-self: end; flex: none; min-width: 0; }
.gx-duty { max-width: 230px; }
@media (max-width: 1640px) { .gx-me { padding-right: 4px; } .gx-me .gx-who, .gx-me > svg { display: none; } }
@media (max-width: 1000px) { .gx-top { grid-template-columns: auto 1fr auto; } .gx-top .gx-nav { justify-self: start; overflow-x: auto; max-width: 100%; } }

/* ═══ Sign in: a brand panel on the left, a quiet form on the right ═══ */
.si2 { min-height: 100%; display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr); gap: 16px; padding: 16px; }
.si2-hero { position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column; justify-content: space-between; gap: 32px; padding: clamp(28px, 4vw, 52px); border-radius: 40px; color: #fff;
  background: radial-gradient(130% 100% at 0% 0%, rgba(255,255,255,.2) 0%, transparent 60%), linear-gradient(155deg, var(--k500) 0%, var(--k600) 40%, var(--k800) 100%); animation: siIn .7s var(--ease) both; }
.si2-glow { position: absolute; z-index: -1; width: 70%; aspect-ratio: 1; right: -18%; bottom: -26%; border-radius: 50%; background: radial-gradient(circle, rgba(var(--s300-rgb), .55), transparent 68%); filter: blur(30px); animation: siDrift 14s ease-in-out infinite alternate; }
.si2-logo { height: 22px; width: auto; align-self: flex-start; }
.si2-kick { font-family: var(--mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; opacity: .78; }
.si2-copy h1 { margin: 16px 0 0; font-weight: 300; font-size: clamp(36px, 4.2vw, 62px); line-height: 1.04; letter-spacing: -.045em; }
.si2-copy h1 em { font-style: normal; opacity: .72; }
.si2-copy p { margin: 18px 0 0; max-width: 44ch; font-size: 15px; line-height: 1.55; opacity: .85; }
.si2-feats { display: flex; flex-wrap: wrap; gap: 8px; }
.si2-feats span { display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 16px 0 12px; border-radius: 999px; font-size: 13px; background: rgba(255,255,255,.16); box-shadow: inset 0 0 0 1px rgba(255,255,255,.28); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.si2-main { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px; padding: 24px; animation: siIn .7s var(--ease) .1s both; }
.si2-card { width: min(100%, 420px); padding: 38px 36px 30px; border-radius: 36px; background: rgba(255,255,255,.72); border: 1px solid #fff; }
.si2-mark { display: block; height: 22px; width: auto; margin: 0 0 26px; }
.si2-hi { margin: 0; font-family: var(--mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--ink3); }
.si2-card h2 { margin: 8px 0 0; font-weight: 300; font-size: 40px; letter-spacing: -.05em; line-height: 1.05; }
.si2-card .sub { margin: 8px 0 26px; color: var(--ink3); font-size: 13.5px; }
.si2-foot { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--ink3); margin: 0; }
.si2-foot svg { width: 13px; height: 13px; }
@keyframes siIn { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes siDrift { from { transform: translate(0, 0) scale(1); } to { transform: translate(-8%, -6%) scale(1.15); } }
@media (max-width: 880px) {
  .si2 { grid-template-columns: 1fr; padding: 12px; }
  .si2-hero { min-height: 0; gap: 22px; border-radius: 30px; }
  .si2-copy h1 { font-size: 34px; } .si2-feats { display: none; }
  .si2-main { padding: 8px 0 20px; }
}
@media (prefers-reduced-motion: reduce) { .si2-hero, .si2-main, .si2-glow { animation: none; } }

/* sign-in: the full SPECMEDIA wordmark, large, on both halves */
.si2-logo { height: 34px; }
.si2-mark { height: 30px; max-width: 100%; margin: 0 0 30px; }
@media (max-width: 880px) { .si2-logo { height: 28px; } .si2-mark { height: 26px; } }

/* ═══ Sign in, third draft: one centred glass card over three slow colour orbs ═══ */
.si3 { position: relative; isolation: isolate; min-height: 100%; display: flex; flex-direction: column; overflow: hidden; }
.si3-orb { position: absolute; z-index: -1; border-radius: 50%; filter: blur(70px); opacity: .55; animation: si3Float 18s ease-in-out infinite alternate; }
.si3-orb.a { width: 520px; height: 520px; left: -140px; top: -120px; background: radial-gradient(circle, var(--k500), transparent 68%); }
.si3-orb.b { width: 460px; height: 460px; right: -120px; top: 12%; background: radial-gradient(circle, var(--s400), transparent 68%); animation-delay: -6s; }
.si3-orb.c { width: 560px; height: 560px; left: 30%; bottom: -260px; background: radial-gradient(circle, var(--t300), transparent 68%); animation-delay: -11s; }
@keyframes si3Float { from { transform: translate(0, 0) scale(1); } to { transform: translate(40px, -30px) scale(1.12); } }
.si3-top { display: flex; align-items: center; justify-content: space-between; padding: 22px 28px; }
.si3-date { font-family: var(--mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--ink3); }
.si3-main { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 26px; padding: 12px 20px 30px; }
.si3-logo { height: 38px; width: auto; animation: siIn .7s var(--ease) both; }
.si3-card { width: min(100%, 440px); padding: 40px 38px 30px; border-radius: 40px; background: rgba(255,255,255,.7); border: 1px solid rgba(255,255,255,.9);
  -webkit-backdrop-filter: blur(26px) saturate(1.4); backdrop-filter: blur(26px) saturate(1.4); animation: siIn .75s var(--ease) .08s both; }
.si3-hi { margin: 0; font-family: var(--mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--ink3); }
.si3-card h2 { margin: 10px 0 0; font-weight: 300; font-size: 34px; line-height: 1.08; letter-spacing: -.045em; }
.si3-card .sub { margin: 10px 0 26px; color: var(--ink3); font-size: 13.5px; }
.si3-feats { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; animation: siIn .75s var(--ease) .18s both; }
.si3-feats span { display: inline-flex; align-items: center; gap: 7px; height: 32px; padding: 0 14px 0 11px; border-radius: 999px; font-size: 12.5px; color: var(--ink2); background: rgba(255,255,255,.55); border: 1px solid rgba(255,255,255,.8); }
.si3-feats svg { width: 14px; height: 14px; }
.si3-foot { text-align: center; padding: 0 16px 20px; font-size: 12px; color: var(--ink3); }
.si3 .si-go { transition: transform .25s var(--ease), box-shadow .25s; }
.si3 .si-go:hover:not(:disabled) { transform: translateY(-1px); }
.si3 .si-go:disabled { opacity: .7; cursor: progress; }
@media (max-width: 560px) { .si3-card { padding: 30px 22px 24px; border-radius: 32px; } .si3-card h2 { font-size: 28px; } .si3-top { padding: 16px; } }
@media (prefers-reduced-motion: reduce) { .si3-orb, .si3-logo, .si3-card, .si3-feats { animation: none; } }
.si3-orb { opacity: .85; }

/* sign-in: the form on the left, the picture on the right */
.si3-body { flex: 1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 16px; padding: 0 16px 8px; min-height: 0; }
.si3-visual { position: relative; overflow: hidden; border-radius: 40px; background: #fff; border: 1px solid rgba(255,255,255,.9); animation: siIn .8s var(--ease) .12s both; }
.si3-visual img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 28%; transform: scale(1.04); animation: siZoom 18s ease-in-out infinite alternate; }
.si3-visual::after { content: ''; position: absolute; inset: 0; pointer-events: none; box-shadow: inset 0 0 0 1px rgba(44,46,51,.06); border-radius: inherit; }
@keyframes siZoom { from { transform: scale(1.04); } to { transform: scale(1.12); } }
@media (max-width: 960px) { .si3-body { grid-template-columns: 1fr; } .si3-visual { display: none; } }
@media (prefers-reduced-motion: reduce) { .si3-visual img { animation: none; } }

/* sign-in: the picture becomes the page's backdrop, blurred, with the card in front */
.si3-body { display: flex; padding: 0; }
.si3-body > .si3-main { flex: 1; }
.si3-orb { display: none; }
.si3-visual, .si3-visual::after { position: absolute; inset: 0; z-index: -1; border-radius: 0; border: 0; background: #F3F5F8; animation: none; box-shadow: none; }
.si3-visual img { filter: blur(30px) saturate(1.15); transform: scale(1.2); opacity: .8; object-position: 50% 32%; animation: siBlur 24s ease-in-out infinite alternate; }
.si3-visual::before { content: ''; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(243,245,248,.5) 0%, rgba(243,245,248,.15) 55%, rgba(243,245,248,.4) 100%); }
.si3-visual::after { display: none; }
@keyframes siBlur { from { transform: scale(1.2) translate(0, 0); } to { transform: scale(1.28) translate(-1.5%, 1%); } }
.si3-card { background: rgba(255,255,255,.62); }
@media (max-width: 960px) { .si3-visual { display: block; } }

/* lighter touch: a soft haze, the figure to the right of the card, text always readable */
.si3-visual img { opacity: .42; filter: blur(34px) saturate(1.25); object-position: 50% 32%; animation: siBlur2 26s ease-in-out infinite alternate; }
@keyframes siBlur2 { from { transform: translate(22%, 0) scale(1.18); } to { transform: translate(18%, 1.5%) scale(1.26); } }
.si3-visual::before { background: linear-gradient(180deg, rgba(246,248,250,.55) 0%, rgba(246,248,250,.2) 60%, rgba(246,248,250,.5) 100%); }
.si3-card { background: rgba(255,255,255,.78); }
.si3-card .sub, .si3-hi { color: var(--ink2); }
.si3-feats span { background: rgba(255,255,255,.75); }
.si3-foot { color: var(--ink2); }

/* sign-in, evening version: a deep rust backdrop with the blurred figure pressed into it (multiply) — nothing glaring */
.si3-visual { background: linear-gradient(160deg, var(--k600) 0%, var(--k800) 62%, #2a1512 100%); }
.si3-visual img { opacity: 1; mix-blend-mode: multiply; filter: blur(30px) saturate(1.2); animation: siBlur2 26s ease-in-out infinite alternate; }
.si3-visual::before { background: radial-gradient(90% 70% at 50% 40%, rgba(0,0,0,0) 0%, rgba(20,8,6,.42) 100%); }
.si3-date { color: rgba(255,255,255,.7); }
.si3-foot { color: rgba(255,255,255,.65); }
.si3-top .pill { background: rgba(255,255,255,.16); color: #fff; box-shadow: inset 0 0 0 1px rgba(255,255,255,.28); }
.si3-feats span { background: rgba(255,255,255,.14); color: #fff; border-color: rgba(255,255,255,.26); }
.si3-card { background: rgba(255,255,255,.9); border-color: rgba(255,255,255,.6); }
.si3-card .sub, .si3-hi { color: var(--ink2); }

/* sign-in: the card sits higher, and carries a smaller logo inside */
.si3-main { justify-content: flex-start; padding-top: clamp(20px, 7vh, 80px); }
.si3-mark { display: block; height: 20px; width: auto; margin: 0 0 26px; }
.si3-card { padding-top: 34px; }
.si3-mark { margin: 0 auto 26px; }

/* sign-in logo, smaller */
.si3-mark { height: 15px; margin: 0 auto 24px; }

/* the loading screen: the same rust backdrop and blurred figure as the sign-in page, the wordmark settling in, a line sweeping under it */
.boot { background: linear-gradient(160deg, var(--k600, #B8553F) 0%, var(--k800, #7A2F22) 62%, #2a1512 100%); transition: opacity .5s ease; overflow: hidden; display: grid; place-items: center; }
.boot-bg { position: absolute; inset: -6%; z-index: 0; background: url('../img/login-visual.jpg') 50% 32% / cover no-repeat; mix-blend-mode: multiply; filter: blur(30px) saturate(1.2); transform: translateX(20%) scale(1.15); animation: bootDrift 6s ease-in-out infinite alternate; }
.boot::after { content: ''; position: absolute; inset: 0; z-index: 1; background: radial-gradient(90% 70% at 50% 45%, rgba(0,0,0,0) 0%, rgba(20,8,6,.42) 100%); }
.boot .boot-logo { position: relative; z-index: 2; height: 34px; width: auto; border-radius: 0; animation: bootLogo 1s var(--ease) both; }
.boot-bar { position: absolute; z-index: 2; left: 50%; top: calc(50% + 46px); width: 150px; height: 2px; margin-left: -75px; border-radius: 2px; background: rgba(255,255,255,.2); overflow: hidden; animation: bootLogo 1s var(--ease) .15s both; }
.boot-bar i { display: block; width: 45%; height: 100%; border-radius: 2px; background: #fff; animation: bootSweep 1.1s cubic-bezier(.6,0,.4,1) infinite; }
@keyframes bootLogo { from { opacity: 0; transform: translateY(10px); letter-spacing: .12em; filter: blur(6px); } to { opacity: 1; transform: none; filter: none; } }
@keyframes bootSweep { from { transform: translateX(-110%); } to { transform: translateX(240%); } }
@keyframes bootDrift { from { transform: translateX(22%) scale(1.15); } to { transform: translateX(17%) scale(1.25); } }
@media (prefers-reduced-motion: reduce) { .boot-bg, .boot-bar i, .boot .boot-logo, .boot-bar { animation: none; } }

/* loader logo smaller; the sign-in card's text centred under its logo */
.boot .boot-logo { height: 24px; }
.boot-bar { top: calc(50% + 34px); width: 120px; margin-left: -60px; }
.si3-card .si3-hi, .si3-card h2, .si3-card .sub { text-align: center; }
.si3-card h2 { font-size: 32px; }
.si3-card .sub { margin: 10px auto 26px; max-width: 30ch; }
.si3-card .si-row { margin-left: 6px; margin-right: 6px; }
.si3-card h2 { font-size: 38px; font-weight: 300; letter-spacing: -.05em; }

/* the browser's autofill paints fields pale blue — keep them as designed */
.si-in input:-webkit-autofill,
.si-in input:-webkit-autofill:hover,
.si-in input:-webkit-autofill:focus,
.si-in input:-webkit-autofill:active {
  -webkit-text-fill-color: var(--ink) !important;
  caret-color: var(--ink);
  -webkit-box-shadow: 0 0 0 1000px #fff inset !important;
  box-shadow: 0 0 0 1000px #fff inset !important;
  transition: background-color 600000s 0s, color 600000s 0s;
  border-radius: 999px;
}
.si-in input:autofill { background: #fff !important; -webkit-text-fill-color: var(--ink) !important; box-shadow: 0 0 0 1000px #fff inset !important; }
input:-webkit-autofill, textarea:-webkit-autofill, select:-webkit-autofill {
  -webkit-text-fill-color: var(--ink);
  transition: background-color 600000s 0s;
}

/* ═══ Sign-in card, new arrangement: a wide card — a rust welcome tile on the left, the fields on the right ═══ */
.si-main-wide, .si3-main:has(.si4-card) { }
.si4-card { width: min(100%, 820px); display: grid; grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); gap: 8px; padding: 8px; border-radius: 44px;
  background: rgba(255,255,255,.55); border: 1px solid rgba(255,255,255,.7); -webkit-backdrop-filter: blur(26px) saturate(1.3); backdrop-filter: blur(26px) saturate(1.3);
  animation: siIn .75s var(--ease) .08s both; }
.si4-brand { position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column; justify-content: space-between; gap: 28px; min-height: 420px; padding: 26px 26px 24px; border-radius: 36px; color: #fff;
  background: radial-gradient(130% 100% at 0% 0%, rgba(255,255,255,.22) 0%, transparent 60%), linear-gradient(155deg, var(--k500) 0%, var(--k600) 40%, var(--k800) 100%); }
.si4-glow { position: absolute; z-index: -1; width: 80%; aspect-ratio: 1; right: -30%; bottom: -34%; border-radius: 50%; background: radial-gradient(circle, rgba(var(--s300-rgb), .6), transparent 68%); filter: blur(26px); animation: siDrift 12s ease-in-out infinite alternate; }
.si4-logo { height: 15px; width: auto; align-self: flex-start; }
.si4-kick { font-family: var(--mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; opacity: .8; }
.si4-hello h2 { margin: 12px 0 0; font-weight: 300; font-size: 46px; line-height: 1; letter-spacing: -.05em; }
.si4-hello p { margin: 14px 0 0; font-size: 13.5px; line-height: 1.5; opacity: .85; max-width: 26ch; }
.si4-clock { display: flex; flex-direction: column; gap: 4px; }
.si4-clock b { font-family: var(--dot); font-weight: 600; font-size: 38px; letter-spacing: -.02em; line-height: 1; font-variation-settings: 'ROND' 100; }
.si4-clock span { font-size: 12px; opacity: .8; }
.si4-fields { display: flex; flex-direction: column; justify-content: center; gap: 12px; padding: 24px 26px 20px; }
.si4-f { position: relative; display: block; padding: 11px 16px 9px; border-radius: 20px; background: rgba(255,255,255,.75); border: 1px solid transparent; transition: background .2s, border-color .2s, box-shadow .2s; cursor: text; }
.si4-f:focus-within { background: #fff; border-color: var(--ink2); box-shadow: 0 0 0 4px rgba(44,46,51,.06); }
.si4-f span { display: block; font-size: 11.5px; color: var(--ink3); letter-spacing: .02em; }
.si4-f input { display: block; width: 100%; border: 0; background: none; outline: none; font-size: 15.5px; height: 26px; padding: 0; color: var(--ink); }
.si4-f input::placeholder { color: var(--ink4); }
.si4-eye { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); width: 34px; height: 34px; border-radius: 50%; border: 0; background: rgba(44,46,51,.05); color: var(--ink3); display: grid; place-items: center; cursor: pointer; }
.si4-eye:hover { background: rgba(44,46,51,.1); color: var(--ink); }
.si4-fields .si-row { margin: 2px 4px 6px; }
.si4-fields .si-go { height: 54px; }
.si4-fields .si-msg { margin: 4px 0 0; }
.si4-f input:-webkit-autofill, .si4-f input:-webkit-autofill:hover, .si4-f input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--ink) !important; -webkit-box-shadow: 0 0 0 1000px #fff inset !important; box-shadow: 0 0 0 1000px #fff inset !important; transition: background-color 600000s 0s; }
@media (max-width: 760px) {
  .si4-card { grid-template-columns: 1fr; border-radius: 36px; }
  .si4-brand { min-height: 0; gap: 18px; padding: 22px; border-radius: 30px; }
  .si4-hello h2 { font-size: 36px; } .si4-clock { display: none; }
  .si4-fields { padding: 18px 16px 14px; }
}

/* the form half reads on white */
.si4-card { background: rgba(255,255,255,.93); border-color: rgba(255,255,255,.8); }
.si4-f { background: #F1F2F5; }
.si4-f:focus-within { background: #fff; }
.si4-fields .si-row, .si4-fields .si-row .link { color: var(--ink2); }
.si4-fields .switch span { color: var(--ink2); }

/* the welcome tile carries a little of the same blurred picture */
.si4-brand::before { content: ''; position: absolute; inset: -8%; z-index: -1; background: url('../img/login-visual.jpg') 62% 30% / cover no-repeat;
  filter: blur(9px) saturate(1.15); mix-blend-mode: multiply; opacity: .8; transform: scale(1.12); animation: siTile 16s ease-in-out infinite alternate; }
@keyframes siTile { from { transform: scale(1.12) translate(0, 0); } to { transform: scale(1.2) translate(-2%, 1.5%); } }
@media (prefers-reduced-motion: reduce) { .si4-brand::before { animation: none; } }

/* barely there: the picture is only a trace in the welcome tile */
.si4-brand::before { opacity: .2; filter: blur(16px) saturate(1.1); }

/* alignment: the top label lines up with the logo, the button with the clock, the fields sit between */
.si4-fields { justify-content: space-between; gap: 18px; padding: 26px 26px 24px; }
.si4-top { display: block; height: 15px; line-height: 15px; font-family: var(--mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--ink3); }
.si4-mid { display: flex; flex-direction: column; gap: 12px; }
.si4-end { display: flex; flex-direction: column; gap: 0; }
.si4-end .si-go { height: 56px; }
.si4-end .si-msg { margin: 8px 0 0; min-height: 18px; text-align: left; }
.si4-brand { padding: 26px 26px 24px; }

/* ═══ Phones ═══ */
@media (max-width: 820px) {
  /* header: logo and tools on one line, the screens in a bar of their own that scrolls sideways */
  .gx-top { display: grid !important; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "lead tail" "nav nav"; gap: 8px; padding: 10px 12px 6px; }
  .gx-top .gx-lead { grid-area: lead; flex: none; }
  .gx-top .gx-tail { grid-area: tail; justify-self: end; gap: 6px; min-width: 0; }
  .gx-top .gx-nav { grid-area: nav; justify-self: stretch; margin: 0; max-width: 100%; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; justify-content: flex-start; -webkit-overflow-scrolling: touch; }
  .gx-nav::-webkit-scrollbar { display: none; }
  .gx-nav button { flex: none; }
  .gx-brand { width: auto; min-width: 42px; height: 42px; padding: 0 12px; }
  .gx-ic { width: 42px; height: 42px; }
  .gx-duty { height: 42px; padding: 0 12px; max-width: 140px; flex: 0 1 auto; }
  .gx-me { height: 42px; padding: 3px; }
  .page, .view { padding-left: 14px; padding-right: 14px; }
}
@media (max-width: 640px) {
  .page-head { gap: 16px; padding: 8px 2px 18px; }
  .figs, .dy-figs { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 18px; margin-left: 0 !important; width: 100%; }
  .page-head > #tFigs { margin-left: 0 !important; width: 100%; }
  .flow { flex-wrap: wrap; }
  .flow > * { flex: 1 1 calc(50% - 4px) !important; min-width: 0; }
  .toolbar { flex-wrap: wrap; gap: 8px; }
  .toolbar .seg, .seg { max-width: 100%; overflow-x: auto; scrollbar-width: none; }
  .seg::-webkit-scrollbar { display: none; }
  .toolbar .search { flex: 1 1 100%; min-width: 0 !important; }
  .toolbar #tNew, .toolbar .btn.primary { flex: 1 1 100%; justify-content: center; }
  .trow { flex-wrap: wrap; row-gap: 8px; padding: 12px 4px; }
  .trow .grow { flex: 1 1 calc(100% - 50px); }
  .trow .tr-st, .trow .tr-time { display: none; }
  .trow .tr-btns { margin-left: 44px; width: calc(100% - 44px); justify-content: flex-start; }
  .pp-head { gap: 10px; } .pp-head .pw-figs { margin-left: 0; width: 100%; gap: 22px; }
  .dyn, .dy-top { grid-template-columns: 1fr; }
  .td-sum { gap: 18px 26px; } .td-sum .btn { margin-left: 0; }
  .td-g > header { flex-wrap: wrap; } .td-prog { width: 90px; }
  .ov-head { padding-bottom: 20px; }
  .ov-band { padding: 22px 16px 18px; gap: 26px; }
  .ov-four { grid-template-columns: 1fr; }
  .sh-grid { grid-template-columns: 1fr; } .sh-card { min-height: 0; }
  .dayhead { flex-wrap: wrap; }
  .modal { padding: 22px 18px 18px; border-radius: 26px; }
  .modal-back { padding: 10px; }
  .tbl-wrap { overflow-x: auto; }
  .tiles { grid-template-columns: 1fr; }
  .wk { grid-template-columns: 1fr 1fr; } .wk-lead { grid-column: span 2; grid-row: auto; }
  .cal14 { gap: 2px; }
  .c14 { padding: 7px 0 8px; }
}
@media (max-width: 400px) {
  .si3-card, .si4-card { border-radius: 30px; }
  .si4-hello h2 { font-size: 32px; }
  .gx-duty span { display: none; } .gx-duty { padding: 0 14px; }
}
html, body { max-width: 100%; overflow-x: hidden; }

@media (max-width: 640px) {
  /* the figures always start at the left edge, whatever wraps them */
  .page-head > *, .ov-head > * { width: 100%; margin-left: 0 !important; }
  .page-head .figs, .ov-head .figs { justify-content: flex-start; }
  .figs > div { grid-template-columns: auto 1fr; }
  .figs b { font-size: 38px; }
  /* month grids: just the day number and its state — the times are on the day's page */
  .cal { gap: 4px; }
  .cal .d { min-height: 48px; padding: 6px 2px; align-items: center; justify-content: center; border-radius: 14px; }
  .cal .d > *:not(.n) { display: none; }
  .cal .d .n { font-size: 13px; }
  .mc { min-height: 64px; padding: 5px 4px; border-radius: 14px; }
  .mc .n i { display: none; }
  .mc > *:not(.n) { max-width: 100%; }
}

@media (max-width: 640px) {
  .figs > div { grid-template-columns: auto auto; justify-content: start; }
  .figs em { width: auto; justify-self: start; }
  /* calendar: events are colour bars here; the agenda view and the day's page carry the words */
  .mc .ev { font-size: 0; height: 12px; min-height: 12px; padding: 0; border-radius: 6px; }
  .mc .ev * { display: none; }
  .mc .more, .mc .ev + .ev { margin-top: 0; }
  .kinds { gap: 6px; } .kinds button { font-size: 11.5px; padding: 0 10px; }
}

/* ── two offices ── */
.gx-office { height: 44px; padding: 0 14px 0 12px; border-radius: 999px; display: inline-flex; align-items: center; gap: 7px; font-size: 13px; color: var(--ink2); cursor: pointer; flex: none; white-space: nowrap; font-family: inherit; }
.gx-office svg { width: 15px; height: 15px; opacity: .75; }
.gx-office:hover:not(.static) { background: rgba(255,255,255,.95); }
.gx-office.static { cursor: default; }
.office-tag { display: inline-flex; align-items: center; height: 18px; padding: 0 7px; margin-right: 8px; border-radius: 999px; font-size: 10px; font-weight: 600; letter-spacing: .05em; background: rgba(var(--s500-rgb), .18); color: var(--s800); }
.office-note { display: flex; align-items: center; gap: 10px; margin: 0 4px 14px; padding: 10px 16px; border-radius: 999px; font-size: 12.5px; color: var(--ink2); background: rgba(var(--s500-rgb), .12); }
.office-note svg { flex: none; }
.office-note b { font-weight: 600; color: var(--ink); }
.office-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; }
.office-card { padding: 20px 22px; border-radius: 28px; background: rgba(255,255,255,.6); border: 1px solid #fff; display: flex; flex-direction: column; gap: 14px; }
.office-card h4 { margin: 0; font-weight: 500; font-size: 18px; letter-spacing: -.02em; }
.office-card .kv { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; font-size: 13px; margin: 0; }
.office-card .kv dt { color: var(--ink3); } .office-card .kv dd { margin: 0; }
@media (max-width: 820px) { .gx-office span { max-width: 74px; overflow: hidden; text-overflow: ellipsis; } .gx-office { height: 42px; padding: 0 10px; } .office-note { border-radius: 18px; align-items: flex-start; } }


/* ── two offices ── */
.gx-office { height: 44px; padding: 0 14px 0 12px; border-radius: 999px; display: inline-flex; align-items: center; gap: 7px; font-size: 13px; color: var(--ink2); cursor: pointer; flex: none; white-space: nowrap; font-family: inherit; }
.gx-office svg { width: 15px; height: 15px; opacity: .75; }
.gx-office:hover:not(.static) { background: rgba(255,255,255,.95); }
.gx-office.static { cursor: default; }
.office-tag { display: inline-flex; align-items: center; height: 18px; padding: 0 7px; margin-right: 8px; border-radius: 999px; font-size: 10px; font-weight: 600; letter-spacing: .05em; background: rgba(var(--s500-rgb), .18); color: var(--s800); }
.office-note { display: flex; align-items: center; gap: 10px; margin: 0 4px 14px; padding: 10px 16px; border-radius: 999px; font-size: 12.5px; color: var(--ink2); background: rgba(var(--s500-rgb), .12); }
.office-note svg { flex: none; }
.office-note b { font-weight: 600; color: var(--ink); }
.office-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; }
.office-card { padding: 20px 22px; border-radius: 28px; background: rgba(255,255,255,.6); border: 1px solid #fff; display: flex; flex-direction: column; gap: 14px; }
.office-card h4 { margin: 0; font-weight: 500; font-size: 18px; letter-spacing: -.02em; }
.office-card .kv { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; font-size: 13px; margin: 0; }
.office-card .kv dt { color: var(--ink3); } .office-card .kv dd { margin: 0; }
@media (max-width: 820px) { .gx-office span { max-width: 74px; overflow: hidden; text-overflow: ellipsis; } .gx-office { height: 42px; padding: 0 10px; } .office-note { border-radius: 18px; align-items: flex-start; } }


/* profile: the two access switches */
.access-card { margin-top: 14px; padding: 18px 22px; }
.access-row { display: flex; gap: 14px; align-items: flex-start; padding: 10px 0; border-top: 1px solid var(--line); cursor: pointer; }
.access-row:first-of-type { border-top: 0; }
.access-row b { display: block; font-weight: 500; font-size: 14px; }
.access-row small { display: block; margin-top: 3px; font-size: 12.5px; color: var(--ink3); line-height: 1.45; max-width: 70ch; }
.access-row .switch { flex: none; margin-top: 2px; }

/* ═══ Office tags: the word, not the code, and easy to spot ═══ */
.office-tag { height: 22px; padding: 0 10px; margin-right: 8px; font-size: 11.5px; font-weight: 600; letter-spacing: .02em; text-transform: none;
  background: rgba(var(--s500-rgb), .22); color: var(--s800); border: 1px solid rgba(var(--s500-rgb), .35); flex: none; white-space: nowrap; }
.office-tag::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; margin-right: 6px; opacity: .8; }
.office-tag[data-o="AE"] { background: rgba(var(--t500-rgb), .24); color: var(--t800); border-color: rgba(var(--t500-rgb), .4); }
.office-tag[data-o="EG"] { background: rgba(var(--k500-rgb), .16); color: var(--k800); border-color: rgba(var(--k500-rgb), .32); }

/* in-page office switch on the money screens */
.office-bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0 4px 16px; }
.office-bar > span { font-size: 12.5px; color: var(--ink3); }
.office-bar .ob { display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 16px; border-radius: 999px; font: inherit; font-size: 13px; cursor: pointer;
  color: var(--ink2); background: rgba(255,255,255,.7); border: 1px solid rgba(255,255,255,.9); }
.office-bar .ob small { font-size: 11px; color: var(--ink3); }
.office-bar .ob:hover { background: rgba(255,255,255,.95); }
.office-bar .ob.on { background: var(--ink); color: #fff; border-color: var(--ink); cursor: default; }
.office-bar .ob.on small { color: rgba(255,255,255,.7); }

/* phones: the office switch is a round button, so it never gets pushed out of the header */
@media (max-width: 820px) {
  .gx-office { width: 42px; height: 42px; padding: 0; justify-content: center; }
  .gx-office > span, .gx-office > svg:last-child { display: none; }
  .gx-office svg { width: 18px; height: 18px; opacity: 1; }
  .gx-top .gx-tail { flex-wrap: nowrap; }
  .gx-duty { max-width: 104px; }
  .office-bar .ob { flex: 1 1 0; justify-content: center; }
}