@import url('fonts.css');

/* City Clinics — Clinic Console
   One system: the same palette and typefaces as the clinic's printed documents,
   so the screen and the paperwork look like they came from the same place. */

:root {
  /* Straight from the Brand Guidelines: forest green and gold carry the brand,
     paper and ivory hold the ground, and everything else supports them. */
  --forest: #1C2B21;
  --forest-deep: #25382B;
  --gold: #9A7B4C;
  --gold-light: #C9AE7E;
  --gold-text: #7D6238;
  --gold-hover: #86693F;

  --ground: #FBF9F3;      /* Paper */
  --panel: #FFFFFF;
  --panel-2: #F4F0E7;     /* Ivory */
  --tint: #EDE7DA;
  --sage: #E6EBDD;
  --sage-2: #DCE4D2;

  --ink: #1B1813;
  --ink-2: #5E574B;
  --ink-3: #8A8272;
  --line: #DCD3C1;
  --line-2: #EDE7DA;

  /* Brand roles, mapped onto the palette. */
  --brand: #1C2B21;
  --brand-deep: #25382B;
  --brand-wash: #E6EBDD;
  --accent: #9A7B4C;
  --accent-wash: #F4EDE1;

  /* Status is separate from the accent, and means the same thing everywhere:
     green on track, amber needs attention, red past the point it should have moved. */
  --go: #2F6B45;
  --go-wash: #E4EFE7;
  --watch: #9A7B4C;
  --watch-wash: #F7F0E3;
  --stop: #8E3B25;
  --stop-wash: #F8EAE4;

  --clinical: #3E6E7C;
  --imaging: #55609B;

  --shadow: 0 1px 2px rgba(27, 24, 19, .05), 0 8px 24px -14px rgba(27, 24, 19, .22);

  /* Depth, so a surface can say how much it matters. One flat card for
     everything is what made the console feel like a spreadsheet. */
  --lift-1: 0 1px 2px rgba(27, 24, 19, .04), 0 2px 8px -4px rgba(27, 24, 19, .10);
  --lift-2: 0 2px 4px rgba(27, 24, 19, .05), 0 12px 28px -12px rgba(27, 24, 19, .20);
  --lift-3: 0 4px 10px rgba(27, 24, 19, .07), 0 28px 60px -22px rgba(27, 24, 19, .30);

  /* Reserved for the live state — what is happening now, and nothing else.
     If this starts appearing on ordinary furniture it stops meaning anything. */
  --lume: #2F6B45;
  --lume-glow: rgba(47, 107, 69, .22);

  /* One master calendar for the whole house, so every business's bookings sit
     on the same grid — which only works if you can tell them apart at a
     glance. Each gets a hue at matched chroma so they read as one family
     rather than eight competing brands. Jey, 30 Sep 2026. */
  --e-city: #2F6B45;
  --e-becosmetics: #A8556B;
  --e-bedental: #2F7E8C;
  --e-pharmacy: #6B5CA5;
  --e-fertility: #C2703E;
  --e-regenerative: #3E7F63;
  --e-premier: #8A6A3B;
  --e-rooms: #5B6472;

  --ease: cubic-bezier(.32, .72, 0, 1);
  --fast: 140ms;
  --radius: 12px;
  --radius-sm: 8px;
  --rail: 244px;
  --sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, Helvetica, Arial, sans-serif;
  --serif: 'Cormorant', Georgia, 'Times New Roman', serif;
  --tabular: 'SF Mono', ui-monospace, Menlo, Consolas, monospace;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --forest: #0F1712;
    --forest-deep: #16211A;
    --gold: #C9AE7E;
    --gold-light: #DCC79E;
    --gold-text: #C9AE7E;
    --gold-hover: #DCC79E;

    --ground: #11170F;
    --panel: #18211A;
    --panel-2: #1F2A21;
    --tint: #24301F;
    --sage: #1F2A21;
    --sage-2: #24301F;

    --lift-1: 0 1px 2px rgba(0, 0, 0, .30), 0 2px 8px -4px rgba(0, 0, 0, .40);
    --lift-2: 0 2px 6px rgba(0, 0, 0, .36), 0 14px 32px -14px rgba(0, 0, 0, .60);
    --lift-3: 0 6px 14px rgba(0, 0, 0, .42), 0 32px 70px -24px rgba(0, 0, 0, .75);

    --lume: #7FD1A6;
    --lume-glow: rgba(127, 209, 166, .26);

    --e-city: #7FD1A6;
    --e-becosmetics: #E294A9;
    --e-bedental: #6FC6D6;
    --e-pharmacy: #A99AE0;
    --e-fertility: #F0A472;
    --e-regenerative: #7CC9A6;
    --e-premier: #D6B279;
    --e-rooms: #9AA6B6;

    --ink: #F0EDE4;
    --ink-2: #B5B3A5;
    --ink-3: #8A8878;
    --line: #2C3829;
    --line-2: #222C20;

    --brand: #9FC7AC;
    --brand-deep: #C9E0D1;
    --brand-wash: #1C2A1F;
    --accent: #C9AE7E;
    --accent-wash: #2A2318;

    --go: #7FBF97;
    --go-wash: #16251B;
    --watch: #D3B47C;
    --watch-wash: #261F12;
    --stop: #D98A6C;
    --stop-wash: #2A1A14;

    --clinical: #7FB3C1;
    --imaging: #9AA3DC;

    --shadow: 0 1px 2px rgba(0, 0, 0, .45), 0 10px 30px -14px rgba(0, 0, 0, .75);
  }
}

* { box-sizing: border-box; }

/* Several components set display, which would otherwise beat [hidden]. */
[hidden] { display: none !important; }

html {
  -webkit-text-size-adjust: 100%;
  background: var(--ground);
}

body {
  margin: 0;
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.5;
  color: var(--ink);
  background: var(--ground);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior-y: none;
}

h1, h2, h3, h4 { margin: 0; font-weight: 600; letter-spacing: -0.01em; }
p { margin: 0 0 .75em; }
a { color: var(--brand); }
svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; border-radius: 4px; }

/* ---------------------------------------------------------------- booting */

.boot {
  position: fixed; inset: 0; display: grid; place-content: center; justify-items: center;
  gap: 14px; background: var(--ground); z-index: 60;
}
.boot__logo { display: block; width: 180px; height: auto; }
.boot__text { color: var(--ink-3); font-size: 14px; margin: 0; }

/* ----------------------------------------------------------------- layout */

#app { min-height: 100dvh; }

.main {
  min-height: 100dvh;
  padding-bottom: calc(76px + env(safe-area-inset-bottom));
}

@media (min-width: 900px) {
  #app { display: grid; grid-template-columns: var(--rail) 1fr; }
  .main { padding-bottom: 40px; }
}

/* Side rail (iPad landscape, laptop, iMac) */

.rail {
  display: none;
  position: sticky; top: 0; height: 100dvh;
  flex-direction: column;
  padding: 18px 12px calc(14px + env(safe-area-inset-bottom));
  background: var(--panel-2);
  border-right: 1px solid var(--line);
}
@media (min-width: 900px) { .rail { display: flex; } }

/* The real logo, not a drawn stand-in — it is the same lockup that goes on
   the paperwork, so the screen and the printed documents agree. Black on the
   cream ground, white when the palette flips. */
.rail__brand { display: block; padding: 4px 8px 20px; }
.rail__logo { display: block; width: 152px; height: auto; }
.rail__name { font-family: var(--serif); font-size: 18px; font-weight: 500; line-height: 1.15; }
.rail__name em {
  display: block; font-style: normal; font-weight: 400; font-size: 12.5px;
  color: var(--ink-3); letter-spacing: .02em; padding-left: 2px;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .rail__logo,
  :root:not([data-theme="light"]) .brand-logo { content: url('/assets/img/logo-cc-white.png'); }
}
:root[data-theme="dark"] .rail__logo,
:root[data-theme="dark"] .brand-logo { content: url('/assets/img/logo-cc-white.png'); }

.rail__links { display: flex; flex-direction: column; gap: 2px; flex: 1; }

.navlink {
  display: flex; align-items: center; gap: 11px;
  padding: 10px 10px; border-radius: var(--radius-sm);
  color: var(--ink-2); text-decoration: none; font-size: 14.5px;
  border: none; background: none; width: 100%; text-align: left; cursor: pointer;
  font-family: inherit;
}
.navlink:hover { background: var(--panel-2); color: var(--ink); }
.navlink[aria-current="page"] { background: var(--forest); color: var(--panel-2); font-weight: 600; }
.navlink svg { width: 19px; height: 19px; flex: none; }
.navlink__count {
  margin-left: auto; font-size: 12px; font-variant-numeric: tabular-nums;
  color: var(--ink-3); background: var(--panel-2); padding: 1px 7px; border-radius: 20px;
}
.navlink[aria-current="page"] .navlink__count { background: rgba(255, 255, 255, .18); color: var(--panel-2); }
.navlink__count--alert { background: var(--stop-wash); color: var(--stop); font-weight: 600; }

.rail__user {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 9px 10px; border-radius: var(--radius-sm);
  border: 1px solid var(--line); background: var(--panel);
  font-family: inherit; font-size: 13px; color: var(--ink-2); cursor: pointer; text-align: left;
}
.rail__user:hover { background: var(--panel-2); }
.rail__user b { display: block; color: var(--ink); font-size: 13.5px; font-weight: 600; }

/* Bottom tab bar (iPhone) */

.tabbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
  display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
  background: color-mix(in srgb, var(--panel) 92%, transparent);
  -webkit-backdrop-filter: saturate(180%) blur(18px);
  backdrop-filter: saturate(180%) blur(18px);
  border-top: 1px solid var(--line);
  padding-bottom: env(safe-area-inset-bottom);
}
@media (min-width: 900px) { .tabbar { display: none; } }

.tab {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  min-height: 54px; padding: 7px 4px 5px;
  border: none; background: none; cursor: pointer;
  font-family: inherit; font-size: 10.5px; color: var(--ink-3);
  position: relative; touch-action: manipulation;
}
.tab[aria-current="page"] { color: var(--forest); font-weight: 600; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .tab[aria-current="page"] { color: var(--brand); } }
.tab svg { width: 22px; height: 22px; }
.tab__dot {
  position: absolute; top: 6px; left: 50%; margin-left: 6px;
  min-width: 16px; height: 16px; padding: 0 4px; border-radius: 9px;
  background: var(--stop); color: #fff; font-size: 10px; line-height: 16px;
  font-variant-numeric: tabular-nums;
}

/* Top bar */

.topbar {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; gap: 10px;
  padding: calc(10px + env(safe-area-inset-top)) 16px 10px;
  background: color-mix(in srgb, var(--ground) 88%, transparent);
  -webkit-backdrop-filter: saturate(180%) blur(16px);
  backdrop-filter: saturate(180%) blur(16px);
  border-bottom: 1px solid var(--line-2);
}
.topbar__title { font-family: var(--serif); font-weight: 500; font-size: 25px; flex: 1; letter-spacing: -0.01em; }
.topbar__actions { display: flex; align-items: center; gap: 8px; }
.topbar__menu { display: none; }

.iconbtn {
  display: grid; place-content: center; width: 40px; height: 40px;
  border-radius: 10px; border: 1px solid transparent; background: none;
  color: var(--ink-2); cursor: pointer; touch-action: manipulation;
}
.iconbtn:hover { background: var(--panel-2); color: var(--ink); }

/* ------------------------------------------------------------- view frame */

.view { padding: 18px 16px 24px; max-width: 1180px; }
@media (min-width: 900px) { .view { padding: 22px 28px 40px; } }

.offline {
  margin: 0; padding: 9px 16px; font-size: 13px;
  background: var(--watch-wash); color: var(--watch);
  border-bottom: 1px solid var(--line);
}

/* Section heading: a rule that carries a count, not a decorative eyebrow. */
.section { margin: 0 0 28px; }
.section__head {
  display: flex; align-items: baseline; gap: 4px 10px; flex-wrap: wrap;
  padding-bottom: 8px; margin-bottom: 12px; border-bottom: 1px solid var(--line);
}
/* On a phone the note drops under the heading rather than squeezing it. */
@media (max-width: 599px) {
  .section__head h2 { flex: 1 1 auto; }
  .section__note { flex: 1 0 100%; order: 3; }
  .section__action { order: 2; }
}
.section__head h2 { font-family: var(--serif); font-weight: 500; font-size: 22px; letter-spacing: -0.01em; line-height: 1.15; }
.section__note { font-size: 13px; color: var(--ink-3); }
.section__action { margin-left: auto; }

/* ------------------------------------------------------------- components */

.card {
  background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 16px;
}

.stats { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); margin-bottom: 24px; }
.stat {
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 13px 14px;
}
.stat b { display: block; font-family: var(--serif); font-size: 34px; font-weight: 500; letter-spacing: -0.01em;
  line-height: 1.05; font-variant-numeric: tabular-nums; }
.stat span { font-size: 12.5px; color: var(--ink-3); }
.stat--alert { border-color: color-mix(in srgb, var(--stop) 40%, var(--line)); background: var(--stop-wash); }
.stat--alert b { color: var(--stop); }

/* A list of people, not a table of rows. */
.list { display: flex; flex-direction: column; gap: 1px; background: var(--line-2); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.row {
  display: flex; align-items: center; gap: 12px; width: 100%;
  padding: 13px 14px; background: var(--panel); border: none;
  font-family: inherit; font-size: 15px; color: inherit; text-align: left;
  cursor: pointer; touch-action: manipulation; min-height: 58px;
}
.row:hover { background: var(--panel-2); }
.row__avatar {
  width: 38px; height: 38px; flex: none; display: grid; place-content: center;
  border-radius: 50%; background: var(--sage); color: var(--forest);
  font-size: 13px; font-weight: 600;
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .row__avatar { color: var(--brand); } }
.row__body { flex: 1; min-width: 0; }
.row__title { font-weight: 550; letter-spacing: -0.01em; display: block; }
.row__sub { font-size: 13px; color: var(--ink-3); display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row__meta { flex: none; text-align: right; font-size: 12.5px; color: var(--ink-3); }

/* The clock: the one live thing on the screen. */
.waiting { font-variant-numeric: tabular-nums; font-weight: 600; font-size: 14px; color: var(--ink-2); }
.waiting--warn { color: var(--watch); }
.waiting--breach { color: var(--stop); }
.waiting small { display: block; font-weight: 400; font-size: 11px; color: var(--ink-3); }

.chip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 2px 8px; border-radius: 20px; font-size: 11.5px; font-weight: 550;
  background: var(--panel-2); color: var(--ink-2); white-space: nowrap;
}
.chip--brand { background: var(--brand-wash); color: var(--go); }
.chip--gold { background: var(--accent-wash); color: var(--gold-text); }
.chip--clinical { background: color-mix(in srgb, var(--clinical) 12%, transparent); color: var(--clinical); }
.chip--attention { background: var(--watch-wash); color: var(--watch); }
.chip--breach { background: var(--stop-wash); color: var(--stop); }
.chip--imaging { background: color-mix(in srgb, var(--imaging) 12%, transparent); color: var(--imaging); }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  min-height: 44px; padding: 0 16px; border-radius: 10px;
  border: 1px solid var(--line); background: var(--panel); color: var(--ink);
  font-family: inherit; font-size: 15px; font-weight: 550; cursor: pointer;
  touch-action: manipulation; text-decoration: none;
}
.btn:hover { background: var(--panel-2); }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn--primary { background: var(--forest); border-color: var(--forest); color: var(--panel-2); }
.btn--primary:hover { background: var(--forest-deep); border-color: var(--forest-deep); }
/* In the dark theme both --forest and --panel-2 resolve to near-black, which
   left every primary button unreadable. Dark mode gets the sage brand colour
   with the dark ground on top of it instead. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .btn--primary {
    background: var(--brand); border-color: var(--brand); color: var(--ground);
  }
  :root:not([data-theme="light"]) .btn--primary:hover {
    background: var(--gold-light); border-color: var(--gold-light); color: var(--ground);
  }
  /* A chosen filter was --forest on --panel-2, which in this theme is
     #0F1712 on #1F2A21 — about 1.3:1, so the selected pill was the one you
     could not read. Same treatment as the primary button. */
  :root:not([data-theme="light"]) .filter[aria-pressed="true"] {
    background: var(--brand); border-color: var(--brand); color: var(--ground);
  }
}
.btn--gold { background: var(--gold); border-color: var(--gold); color: #fff; }
.btn--gold:hover { background: var(--gold-hover); border-color: var(--gold-hover); }
.btn--ghost { border-color: transparent; background: none; color: var(--gold-text); }
.btn--danger { color: var(--stop); border-color: color-mix(in srgb, var(--stop) 35%, var(--line)); }
.btn--compact { min-height: 38px; padding: 0 13px; font-size: 14px; }
.btn--full { width: 100%; }
.btn svg { width: 18px; height: 18px; }


.btnrow { display: flex; flex-wrap: wrap; gap: 8px; }

.empty { padding: 34px 20px; text-align: center; color: var(--ink-3); }
.empty strong { display: block; color: var(--ink-2); font-weight: 600; margin-bottom: 4px; }

/* -------------------------------------------------------------- the board */

.board {
  display: grid; grid-auto-flow: column; grid-auto-columns: 272px;
  gap: 12px; overflow-x: auto; padding-bottom: 12px;
  scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch;
}
.col { display: flex; flex-direction: column; min-height: 200px; scroll-snap-align: start; }
.col__head {
  position: sticky; top: 0; padding: 9px 12px; border-radius: var(--radius) var(--radius) 0 0;
  background: var(--panel-2); border: 1px solid var(--line); border-bottom: none;
}
.col__head { display: flex; align-items: baseline; gap: 8px; }
.col__head h3 { font-size: 13.5px; flex: 1; }
.col__head span { font-size: 12px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.col__body {
  flex: 1; display: flex; flex-direction: column; gap: 8px; padding: 8px;
  background: var(--panel-2); border: 1px solid var(--line); border-top: none;
  border-radius: 0 0 var(--radius) var(--radius);
}
.col--drop .col__body { background: var(--accent-wash); outline: 2px dashed var(--gold-light); outline-offset: -4px; }

.dealcard {
  display: block; width: 100%; text-align: left; padding: 11px 12px;
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-sm);
  font-family: inherit; font-size: 14px; color: inherit; cursor: grab;
  box-shadow: 0 1px 1px rgba(20, 37, 28, .03);
  touch-action: manipulation;
}
.dealcard:active { cursor: grabbing; }
.dealcard.dragging { opacity: .4; }
.dealcard__name { font-weight: 600; letter-spacing: -0.01em; display: block; }
.dealcard__meta { font-size: 12.5px; color: var(--ink-3); display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; align-items: center; }
.dealcard--stale { border-left: 3px solid var(--watch); }

/* ---------------------------------------------------------------- records */

.record__head { margin-bottom: 20px; }
.record__name { font-family: var(--serif); font-size: clamp(30px, 6vw, 40px); font-weight: 500; letter-spacing: -0.01em; line-height: 1.08; }
.record__sub { color: var(--ink-3); font-size: 13.5px; margin-top: 4px; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.record__actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }

.cols { display: grid; gap: 22px; }
@media (min-width: 1100px) { .cols { grid-template-columns: 1fr 340px; align-items: start; } }

.facts { display: grid; gap: 0; }
.fact {
  display: grid; grid-template-columns: 116px 1fr; gap: 10px;
  padding: 9px 0; border-bottom: 1px solid var(--line-2); font-size: 14px;
}
.fact:last-child { border-bottom: none; }
.fact dt { color: var(--ink-3); font-size: 13px; }
.fact dd { margin: 0; overflow-wrap: anywhere; }

.timeline { display: flex; flex-direction: column; gap: 0; }
.event { display: grid; grid-template-columns: 30px 1fr; gap: 12px; padding-bottom: 16px; position: relative; }
.event::before {
  content: ""; position: absolute; left: 14px; top: 28px; bottom: 0; width: 1px; background: var(--line);
}
.event:last-child::before { display: none; }
.event__dot {
  width: 30px; height: 30px; border-radius: 50%; display: grid; place-content: center;
  background: var(--panel-2); color: var(--ink-2); border: 1px solid var(--line); z-index: 1;
}
.event__dot svg { width: 15px; height: 15px; }
.event__body { padding-top: 4px; min-width: 0; }
.event__title { font-size: 14px; font-weight: 550; }
.event__meta { font-size: 12.5px; color: var(--ink-3); }
.event__note { font-size: 14px; color: var(--ink-2); margin-top: 4px; white-space: pre-wrap; overflow-wrap: anywhere; }

/* Guidance carried with the work, from the stage definition. */
.guidance {
  border-left: 3px solid var(--gold); background: var(--accent-wash);
  padding: 11px 13px; border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  font-size: 13.5px; color: var(--gold-text); margin-bottom: 16px;
}

.notice { padding: 11px 13px; border-radius: var(--radius-sm); font-size: 13.5px; margin-bottom: 10px; display: flex; gap: 9px; }
.notice svg { width: 18px; height: 18px; flex: none; margin-top: 1px; }
.notice--warn { background: var(--watch-wash); color: var(--watch); }
.notice--block { background: var(--stop-wash); color: var(--stop); }
.notice--info { background: var(--brand-wash); color: var(--go); }

/* ----------------------------------------------------------------- diary */

.day { margin-bottom: 22px; }
.day__head { display: flex; align-items: baseline; gap: 9px; padding-bottom: 7px; border-bottom: 1px solid var(--line); margin-bottom: 8px; }
.day__head h3 { font-size: 14.5px; }
.day__head span { font-size: 12.5px; color: var(--ink-3); }
.day--today .day__head h3 { color: var(--gold-text); }

.slot { display: grid; grid-template-columns: 62px 1fr; gap: 12px; padding: 10px 2px; border-bottom: 1px solid var(--line-2); align-items: start; cursor: pointer; }
.slot:last-child { border-bottom: none; }
.slot__time { font-variant-numeric: tabular-nums; font-size: 13.5px; font-weight: 600; color: var(--ink-2); padding-top: 1px; }
.slot__time small { display: block; font-weight: 400; color: var(--ink-3); font-size: 12px; }
.slot__title { font-weight: 550; font-size: 14.5px; }
.slot__meta { font-size: 12.5px; color: var(--ink-3); display: flex; flex-wrap: wrap; gap: 7px; align-items: center; margin-top: 3px; }

/* ----------------------------------------------------------------- forms */

.field { margin-bottom: 15px; }
.field > label { display: block; font-size: 13px; color: var(--ink-2); margin-bottom: 5px; font-weight: 550; }
.field__hint { font-size: 12.5px; color: var(--ink-3); margin-top: 5px; }

input[type="text"], input[type="email"], input[type="tel"], input[type="number"],
input[type="date"], input[type="datetime-local"], input[type="time"], input[type="password"],
input[type="search"], select, textarea {
  width: 100%; padding: 11px 12px; border-radius: 10px;
  border: 1px solid var(--line); background: var(--panel); color: var(--ink);
  font-family: inherit; font-size: 16px; /* 16px stops iOS zooming on focus */
  -webkit-appearance: none; appearance: none; min-height: 46px;
}
textarea { min-height: 92px; resize: vertical; line-height: 1.5; }
select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2378877F' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 10px center; background-size: 18px; padding-right: 36px;
}
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px var(--accent-wash); }

.check { display: flex; align-items: flex-start; gap: 10px; padding: 10px 0; font-size: 14px; cursor: pointer; }
.check input { width: 22px; height: 22px; margin: 0; flex: none; accent-color: var(--gold); }

.grid2 { display: grid; gap: 0 12px; grid-template-columns: 1fr; }
@media (min-width: 560px) { .grid2 { grid-template-columns: 1fr 1fr; } }

.searchbar { position: relative; margin-bottom: 14px; }
.searchbar svg { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--ink-3); width: 19px; height: 19px; }
.searchbar input { padding-left: 40px; }

.filters { display: flex; gap: 7px; overflow-x: auto; padding-bottom: 12px; margin-bottom: 4px; -webkit-overflow-scrolling: touch; }
.filter {
  flex: none; padding: 7px 13px; border-radius: 20px; border: 1px solid var(--line);
  background: var(--panel); color: var(--ink-2); font-family: inherit; font-size: 13.5px;
  cursor: pointer; white-space: nowrap; min-height: 36px;
}
.filter[aria-pressed="true"] { background: var(--forest); border-color: var(--forest); color: var(--panel-2); }

/* ----------------------------------------------------- sheets and toasts */

.sheet { position: fixed; inset: 0; z-index: 50; display: flex; align-items: flex-end; justify-content: center; }
.sheet__scrim { position: absolute; inset: 0; background: rgba(12, 19, 16, .45); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); }
.sheet__panel {
  position: relative; width: 100%; max-height: 92dvh; display: flex; flex-direction: column;
  background: var(--panel); border-radius: 18px 18px 0 0; box-shadow: var(--shadow);
  animation: sheet-up .22s cubic-bezier(.32, .72, 0, 1);
}
@media (min-width: 720px) {
  .sheet { align-items: center; padding: 20px; }
  .sheet__panel { max-width: 560px; border-radius: 16px; max-height: 88dvh; animation: sheet-in .18s ease-out; }
  .sheet__grip { display: none; }
}
@keyframes sheet-up { from { transform: translateY(100%); } }
@keyframes sheet-in { from { transform: scale(.97); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .sheet__panel { animation: none; } }

.sheet__grip { width: 38px; height: 4px; border-radius: 3px; background: var(--line); margin: 9px auto 0; }
.sheet__head { display: flex; align-items: center; gap: 10px; padding: 13px 16px 10px; border-bottom: 1px solid var(--line-2); }
.sheet__head h2 { font-size: 17px; flex: 1; }
.sheet__body { padding: 16px; overflow-y: auto; -webkit-overflow-scrolling: touch; padding-bottom: calc(20px + env(safe-area-inset-bottom)); }

.toasts {
  position: fixed; left: 50%; transform: translateX(-50%);
  bottom: calc(86px + env(safe-area-inset-bottom)); z-index: 70;
  display: flex; flex-direction: column; gap: 8px; width: min(440px, calc(100vw - 32px));
}
@media (min-width: 900px) { .toasts { bottom: 26px; } }
.toast {
  padding: 12px 14px; border-radius: 11px; font-size: 14px; box-shadow: var(--shadow);
  background: var(--ink); color: var(--ground); animation: toast-in .18s ease-out;
}
.toast--good { background: var(--forest); color: var(--panel-2); }
.toast--bad { background: var(--stop); color: #fff; }
@keyframes toast-in { from { transform: translateY(8px); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .toast { animation: none; } }

/* ------------------------------------------------------------ sign-in */

.signin { min-height: 100dvh; display: grid; place-content: center; padding: 24px; }
.signin__card { width: min(400px, 100%); }
.signin__logo { display: block; width: 200px; height: auto; margin-bottom: 30px; }
/* Read out by screen readers, not shown: the logo already says the name. */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.signin h1 { font-family: var(--serif); font-weight: 500; font-size: 32px; margin-bottom: 4px; letter-spacing: -0.01em; }
.signin p { color: var(--ink-3); font-size: 14px; margin-bottom: 22px; }

.skeleton { background: var(--panel-2); border-radius: var(--radius); height: 58px; margin-bottom: 1px; }

table.data { width: 100%; border-collapse: collapse; font-size: 14px; }
table.data th { text-align: left; font-size: 12.5px; color: var(--ink-3); font-weight: 550; padding: 0 10px 8px 0; border-bottom: 1px solid var(--line); }
table.data td { padding: 11px 10px 11px 0; border-bottom: 1px solid var(--line-2); vertical-align: top; }
table.data td:last-child, table.data th:last-child { padding-right: 0; text-align: right; }
.scroller { overflow-x: auto; -webkit-overflow-scrolling: touch; }

.bar { height: 7px; border-radius: 4px; background: var(--forest); min-width: 3px; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .bar { background: var(--brand); } }
.bar--muted { background: var(--line); }

.funnelstep { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; padding: 11px 0; border-bottom: 1px solid var(--line-2); }
.funnelstep__name { font-size: 14px; font-weight: 550; }
.funnelstep__num { font-variant-numeric: tabular-nums; font-size: 14px; text-align: right; }
.funnelstep__num small { color: var(--ink-3); display: block; font-size: 12px; }
.funnelstep__bar { grid-column: 1 / -1; }

@media print {
  .rail, .tabbar, .topbar__actions, .btn { display: none !important; }
  body { background: #fff; }
}

/* =========================================================================
   Traffic lights
   One vocabulary everywhere: a stripe on a card, a dot in a list, a chip on
   a record. Never colour on its own — always colour plus a word.
   ========================================================================= */

.light { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 550; white-space: nowrap; }
.light::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: currentColor; flex: none; }
.light--green { color: var(--go); }
.light--amber { color: var(--watch); }
.light--red   { color: var(--stop); }
.light--grey  { color: var(--ink-3); }

.legend { display: flex; flex-wrap: wrap; gap: 14px; padding: 11px 14px; background: var(--panel-2);
  border: 1px solid var(--line); border-radius: var(--radius); margin-bottom: 18px; font-size: 12.5px; color: var(--ink-2); }

/* =========================================================================
   Inbox
   ========================================================================= */

.inbox-item { display: grid; grid-template-columns: 40px 1fr auto; gap: 12px; align-items: start;
  padding: 14px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); margin-bottom: 8px; }
.inbox-item__icon { width: 40px; height: 40px; border-radius: 10px; display: grid; place-content: center;
  background: var(--panel-2); color: var(--ink-3); }
.inbox-item__subject { font-weight: 600; font-size: 14.5px; }
.inbox-item__from { font-size: 13px; color: var(--ink-2); }
.inbox-item__body { font-size: 13.5px; color: var(--ink-3); margin-top: 6px; white-space: pre-wrap;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.inbox-item__actions { display: flex; flex-direction: column; gap: 6px; align-items: flex-end; }
@media (max-width: 599px) {
  .inbox-item { grid-template-columns: 1fr; }
  .inbox-item__icon { display: none; }
  .inbox-item__actions { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 8px; }
  /* The clock gets its own line rather than fighting the buttons for space. */
  .inbox-item__actions .light { flex: 1 0 100%; }
  .inbox-item__actions .btn { flex: 1; }
}

.assignbar { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 10px;
  padding-top: 10px; border-top: 1px dashed var(--line); }
.assignbar span { font-size: 12.5px; color: var(--ink-3); margin-right: 2px; }

.who { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--ink-2); }
.who i { width: 22px; height: 22px; border-radius: 50%; background: var(--sage); color: var(--forest);
  display: grid; place-content: center; font-size: 9.5px; font-weight: 700; font-style: normal; }

/* =========================================================================
   Chat
   ========================================================================= */

.chat { display: grid; gap: 0; border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden; background: var(--panel); height: calc(100dvh - 210px); min-height: 420px; }
@media (min-width: 900px) { .chat { grid-template-columns: 250px 1fr; height: calc(100dvh - 180px); } }

.chat__list { border-right: 1px solid var(--line); background: var(--panel-2); overflow-y: auto;
  -webkit-overflow-scrolling: touch; }
@media (max-width: 899px) { .chat__list { display: none; } .chat--list .chat__list { display: block; } .chat--list .chat__room { display: none; } }

.chat__group { padding: 12px 14px 6px; font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink-3); font-weight: 600; }
.chan { display: flex; align-items: center; gap: 9px; width: 100%; padding: 9px 14px; border: none;
  background: none; font-family: inherit; font-size: 14px; color: var(--ink-2); cursor: pointer; text-align: left; }
.chan:hover { background: var(--tint); }
.chan[aria-current="true"] { background: var(--forest); color: var(--panel-2); }
.chan__name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chan__unread { min-width: 19px; height: 19px; padding: 0 5px; border-radius: 10px; background: var(--stop);
  color: #fff; font-size: 11px; line-height: 19px; text-align: center; font-variant-numeric: tabular-nums; }

.chat__room { display: flex; flex-direction: column; min-width: 0; }
.chat__head { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--line); }
.chat__head h3 { font-family: var(--serif); font-weight: 500; font-size: 20px; flex: 1; }
.chat__head p { margin: 0; font-size: 12.5px; color: var(--ink-3); }
.chat__back { display: grid; place-content: center; width: 36px; height: 36px; border-radius: 9px;
  border: 1px solid var(--line); background: var(--panel); cursor: pointer; color: var(--ink-2); }
@media (min-width: 900px) { .chat__back { display: none; } }

.chat__log { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 16px;
  display: flex; flex-direction: column; gap: 3px; }
.chat__day { align-self: center; font-size: 11.5px; color: var(--ink-3); background: var(--panel-2);
  padding: 3px 11px; border-radius: 20px; margin: 12px 0 8px; }

.msg { max-width: min(78%, 560px); padding: 9px 13px; border-radius: 14px; background: var(--panel-2);
  align-self: flex-start; }
.msg--mine { align-self: flex-end; background: var(--forest); color: var(--panel-2); }
.msg--run { border-top-left-radius: 5px; }
.msg--mine.msg--run { border-top-right-radius: 5px; border-top-left-radius: 14px; }
.msg__who { font-size: 12px; font-weight: 650; color: var(--gold-text); margin-bottom: 2px; }
.msg--mine .msg__who { display: none; }
.msg__body { font-size: 14.5px; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; }
.msg__time { font-size: 10.5px; color: var(--ink-3); margin-top: 3px; font-variant-numeric: tabular-nums; }
.msg--mine .msg__time { color: rgba(244, 240, 231, .6); }
.msg__link { display: inline-block; margin-top: 6px; font-size: 12.5px; }
.msg--system { align-self: center; background: none; color: var(--ink-3); font-size: 12.5px; max-width: 90%; text-align: center; }

.chat__compose { display: flex; gap: 8px; padding: 12px; border-top: 1px solid var(--line); background: var(--panel); }
.chat__compose textarea { flex: 1; min-height: 44px; max-height: 140px; resize: none; padding: 11px 13px; }

/* =========================================================================
   Performance
   ========================================================================= */

.scorecard { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 18px; margin-bottom: 14px; }
.scorecard__head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 16px; }
.scorecard__head h3 { font-family: var(--serif); font-weight: 500; font-size: 24px; }
.scorecard__head span { font-size: 13px; color: var(--ink-3); }
.scorecard__earned { margin-left: auto; text-align: right; }
.scorecard__earned b { display: block; font-family: var(--serif); font-size: 30px; font-weight: 600;
  color: var(--gold-text); line-height: 1; font-variant-numeric: tabular-nums; }
.scorecard__earned span { font-size: 12px; color: var(--ink-3); }

.meter { margin-bottom: 14px; }
.meter__top { display: flex; align-items: baseline; gap: 8px; font-size: 13px; margin-bottom: 5px; }
.meter__top b { font-variant-numeric: tabular-nums; font-size: 15px; }
.meter__top span { color: var(--ink-3); }
.meter__top em { margin-left: auto; font-style: normal; color: var(--ink-3); font-size: 12.5px; }
.meter__track { height: 8px; border-radius: 5px; background: var(--tint); overflow: hidden; }
.meter__fill { height: 100%; border-radius: 5px; background: var(--forest); }
.meter__fill--gold { background: var(--gold); }
.meter__fill--over { background: var(--stop); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .meter__fill { background: var(--brand); } }

.ladder { display: flex; gap: 0; border: 1px solid var(--line); border-radius: var(--radius-sm); overflow: hidden; }
.ladder__step { flex: 1; padding: 10px 8px; text-align: center; background: var(--panel-2);
  border-right: 1px solid var(--line); }
.ladder__step:last-child { border-right: none; }
.ladder__step[data-active="true"] { background: var(--forest); color: var(--panel-2); }
.ladder__step b { display: block; font-size: 17px; font-weight: 600; font-variant-numeric: tabular-nums; }
.ladder__step span { font-size: 10.5px; opacity: .8; }

.pool { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }

/* =========================================================================
   Quote builder and files
   ========================================================================= */

.quoteline { display: grid; grid-template-columns: 1fr 86px; gap: 8px; align-items: center;
  padding: 9px 0; border-bottom: 1px solid var(--line-2); font-size: 13.5px; }
.quoteline b { font-variant-numeric: tabular-nums; text-align: right; }
.quoteline small { display: block; color: var(--ink-3); font-size: 12px; }

.quotetotal { display: flex; align-items: baseline; gap: 10px; padding: 14px 0 4px; border-top: 2px solid var(--gold); }
.quotetotal span { font-family: var(--serif); font-size: 22px; }
.quotetotal b { margin-left: auto; font-family: var(--serif); font-size: 30px; font-weight: 600;
  font-variant-numeric: tabular-nums; }

.photos { display: grid; gap: 8px; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); }
.photos a { display: block; aspect-ratio: 1; border-radius: var(--radius-sm); overflow: hidden;
  border: 1px solid var(--line); background: var(--panel-2); }
.photos img { width: 100%; height: 100%; object-fit: cover; display: block; }

.pipeline-map { display: flex; gap: 4px; margin: 4px 0 14px; }
.pipeline-map span { flex: 1; height: 5px; border-radius: 3px; background: var(--tint); }
.pipeline-map span[data-done="true"] { background: var(--forest); }
.pipeline-map span[data-now="true"] { background: var(--gold); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .pipeline-map span[data-done="true"] { background: var(--brand); } }


/* The stripe is defined last so it wins over any component's own border
   shorthand — a card, a row and an inbox item all set one of their own. */
.stripe { border-left: 4px solid transparent; }
.stripe--green { border-left-color: var(--go); }
.stripe--amber { border-left-color: var(--watch); }
.stripe--red   { border-left-color: var(--stop); }
.stripe--grey  { border-left-color: var(--line); }


/* =========================================================================
   The work order
   A run sheet, ordered by what it costs to get wrong. Printable, because it
   lives at a desk as well as on a screen.
   ========================================================================= */

.wo__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px 16px; margin-bottom: 4px; }
.wo__head h2 { font-family: var(--serif); font-weight: 500; font-size: clamp(26px, 5vw, 34px); line-height: 1.05; }
.wo__head .who { font-size: 14px; }
.wo__shift { font-size: 13px; color: var(--ink-3); }

.wo__counts { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0 20px; }
.pcount {
  display: inline-flex; align-items: center; gap: 7px; padding: 7px 13px;
  border-radius: 20px; border: 1px solid var(--line); background: var(--panel);
  font-size: 13.5px; font-weight: 550;
}
.pcount::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: currentColor; }
.pcount--red   { color: var(--stop);  background: var(--stop-wash);  border-color: color-mix(in srgb, var(--stop) 35%, var(--line)); }
.pcount--amber { color: var(--watch); background: var(--watch-wash); border-color: color-mix(in srgb, var(--watch) 35%, var(--line)); }
.pcount--green { color: var(--go);    background: var(--go-wash);    border-color: color-mix(in srgb, var(--go) 30%, var(--line)); }
.pcount--grey  { color: var(--ink-3); }
.pcount b { font-variant-numeric: tabular-nums; }

.wo__group { margin-bottom: 26px; }
.wo__grouphead {
  display: flex; align-items: baseline; gap: 10px; padding-bottom: 7px; margin-bottom: 10px;
  border-bottom: 2px solid currentColor;
}
.wo__grouphead h3 { font-family: var(--serif); font-weight: 500; font-size: 22px; }
.wo__grouphead--red   { color: var(--stop); }
.wo__grouphead--amber { color: var(--watch); }
.wo__grouphead--green { color: var(--go); }
.wo__grouphead--grey  { color: var(--ink-3); }
.wo__groupsub { font-size: 13px; color: var(--ink-3); font-weight: 400; }

.wo__item {
  display: grid; grid-template-columns: 30px 60px 1fr auto; gap: 12px; align-items: start;
  padding: 13px 14px 13px 11px; background: var(--panel);
  border: 1px solid var(--line); border-radius: var(--radius); margin-bottom: 8px;
}
/* On a phone the tick stays in its own column and everything else stacks
   beside it, rather than the text being squeezed into a sliver. */
@media (max-width: 599px) {
  .wo__item { grid-template-columns: 30px 1fr; row-gap: 4px; }
  .wo__tick { grid-column: 1; grid-row: 1 / span 2; }
  .wo__time { grid-column: 2; grid-row: 1; padding-top: 0; }
  .wo__item .wo__time small { display: inline; color: var(--ink-3); }
  .wo__item .wo__time small::before { content: "–"; }
  .wo__body { grid-column: 2; grid-row: 2; }
  .wo__do { grid-column: 1 / -1; grid-row: 3; margin-top: 4px; }
  .wo__do .btn { flex: 1; }
}

.wo__tick {
  width: 26px; height: 26px; border-radius: 7px; border: 1.5px solid var(--line);
  background: var(--panel); cursor: pointer; display: grid; place-content: center;
  color: transparent; padding: 0; flex: none;
}
.wo__tick:hover { border-color: var(--gold); }
.wo__tick[aria-pressed="true"] { background: var(--forest); border-color: var(--forest); color: var(--panel-2); }
.wo__tick svg { width: 16px; height: 16px; }

.wo__time { font-variant-numeric: tabular-nums; font-size: 13px; font-weight: 600; color: var(--ink-2); padding-top: 3px; }
.wo__time small { display: block; font-weight: 400; color: var(--ink-3); font-size: 11.5px; }

.wo__body { min-width: 0; display: block; }
.wo__title { display: block; font-size: 15px; font-weight: 600; letter-spacing: -0.005em; }
.wo__item[data-done="true"] .wo__title { text-decoration: line-through; color: var(--ink-3); }
.wo__detail { display: block; font-size: 13.5px; color: var(--ink-2); margin-top: 3px; max-width: 74ch; }
.wo__tags { display: flex !important; flex-wrap: wrap; gap: 6px; margin-top: 7px; align-items: center; }
.wo__do { display: flex; gap: 6px; flex-wrap: wrap; }

.wo__empty { padding: 26px; text-align: center; color: var(--ink-3); border: 1px dashed var(--line); border-radius: var(--radius); }

.handover { background: var(--panel-2); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 14px 16px; margin-top: 8px; font-size: 14px; color: var(--ink-2); }
.handover b { color: var(--ink); }

/* Dialling: a timer, an outcome, and nothing else to think about. */
.dialer { text-align: center; }
.dialer__number { font-family: var(--serif); font-size: 32px; font-weight: 500; letter-spacing: .01em; }
.dialer__timer { font-variant-numeric: tabular-nums; font-size: 44px; font-weight: 600;
  font-family: var(--serif); color: var(--gold-text); margin: 10px 0 4px; }
.dialer__hint { font-size: 13px; color: var(--ink-3); }
.dialer__outcomes { display: grid; gap: 8px; grid-template-columns: 1fr 1fr; margin-top: 18px; }
.dialer__attempts { font-size: 13px; color: var(--ink-3); margin-top: 10px; }

.segmeter { font-size: 12.5px; color: var(--ink-3); display: flex; justify-content: space-between; margin-top: 6px; }
.segmeter b { font-variant-numeric: tabular-nums; color: var(--ink-2); }
.segmeter--over b { color: var(--watch); }

.stagehist { display: flex; flex-direction: column; gap: 0; }
.stagehist__row { display: grid; grid-template-columns: 1fr auto auto; gap: 10px; padding: 9px 0;
  border-bottom: 1px solid var(--line-2); font-size: 13.5px; align-items: baseline; }
.stagehist__row b { font-weight: 600; }
.stagehist__row time { color: var(--ink-3); font-variant-numeric: tabular-nums; font-size: 12.5px; }
.stagehist__row span { color: var(--ink-2); font-variant-numeric: tabular-nums; }
.stagehist__row--now b { color: var(--gold-text); }

@media print {
  .wo__tick, .wo__do, .wo__counts button { display: none !important; }
  .wo__item { break-inside: avoid; border-color: #999; }
  .view { padding: 0; max-width: none; }
}


/* =========================================================================
   Depth, light and touch
   -------------------------------------------------------------------------
   The console is read for nine hours a day, often on an iPad held in one
   hand. Three things carry that here: surfaces that say how much they matter,
   colour that carries meaning rather than decoration, and a press that answers
   your finger straight away. The brand palette is untouched — forest, gold and
   ivory still hold the ground. What is added is depth and light on top of it.
   ========================================================================= */

/* ---------------------------------------------------------- the ground */

body {
  background:
    radial-gradient(1200px 600px at 78% -8%, var(--brand-wash), transparent 62%),
    radial-gradient(900px 500px at -6% 4%, var(--accent-wash), transparent 58%),
    var(--ground);
  background-attachment: fixed;
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior-y: none;
}

/* ------------------------------------------------------------ surfaces */

.card,
.list {
  box-shadow: var(--lift-1);
  transition: box-shadow var(--fast) var(--ease);
}
.list { box-shadow: var(--lift-2); }

/* A panel is a sheet of paper on a desk, not a box drawn on a screen: the
   light comes from above, so the top edge catches it. */
.card,
.stat,
.list {
  background-image: linear-gradient(var(--panel), var(--panel));
  position: relative;
}
.card::before,
.stat::before,
.list::before {
  content: ""; position: absolute; inset: 0 0 auto; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .55), transparent);
  border-radius: inherit; pointer-events: none;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .card::before,
  :root:not([data-theme="light"]) .stat::before,
  :root:not([data-theme="light"]) .list::before {
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .10), transparent);
  }
}

/* ----------------------------------------------- the numbers that lead */

/* Six identical tiles make you read all six. The one that needs you is
   bigger, lit, and breathing; the rest wait quietly behind it. */
.stats { gap: 12px; align-items: stretch; }
.stat {
  box-shadow: var(--lift-1);
  transition: transform var(--fast) var(--ease), box-shadow var(--fast) var(--ease);
}
.stat b { font-variant-numeric: tabular-nums lining-nums; }

.stat--alert {
  box-shadow: var(--lift-2), 0 0 0 1px color-mix(in srgb, var(--stop) 30%, transparent);
}
.stat--alert::after {
  content: ""; position: absolute; inset: -1px; border-radius: inherit;
  border: 1px solid color-mix(in srgb, var(--stop) 55%, transparent);
  animation: breathe 3.4s var(--ease) infinite; pointer-events: none;
}
@keyframes breathe {
  0%, 100% { opacity: .30; transform: scale(1); }
  50%      { opacity: .85; transform: scale(1.012); }
}
@media (prefers-reduced-motion: reduce) {
  .stat--alert::after { animation: none; opacity: .6; }
}

/* ----------------------------------- one calendar, eight businesses on it */

/* Colour is how you read a shared grid. Every element that belongs to a
   business carries its hue through one variable, so a dot, a calendar block
   and a filter pill all agree without repeating the palette three times. */
[data-entity] { --entity: var(--e-rooms); }
[data-entity="city_clinics"]            { --entity: var(--e-city); }
[data-entity="becosmetics"]             { --entity: var(--e-becosmetics); }
[data-entity="bedental"]                { --entity: var(--e-bedental); }
[data-entity="pharmacy"]                { --entity: var(--e-pharmacy); }
[data-entity="global_fertility"]        { --entity: var(--e-fertility); }
[data-entity="regenerative_aesthetics"] { --entity: var(--e-regenerative); }
[data-entity="premier_medical"]         { --entity: var(--e-premier); }
[data-entity="medical_rooms"]           { --entity: var(--e-rooms); }

[data-entity]::before {
  content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%;
  margin-right: 8px; vertical-align: 1px; background: var(--entity);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--entity) 18%, transparent);
}

/* On the master calendar the hue is the block itself, not a dot beside it. */
.event[data-entity]::before { display: none; }
.event[data-entity] .event__dot { background: var(--entity); box-shadow: 0 0 0 3px color-mix(in srgb, var(--entity) 18%, transparent); }
.day__item[data-entity] {
  border-left: 3px solid var(--entity);
  background: color-mix(in srgb, var(--entity) 8%, var(--panel));
}

/* ------------------------------------------------------ answer the hand */

/* On a touch screen there is no hover to tell you anything happened. The
   press is the feedback, and it has to land inside 100ms to feel like the
   device rather than a web page. */
.btn, .filter, .row, .navlink, .tab, .iconbtn, .chip {
  transition: transform var(--fast) var(--ease), background-color var(--fast) var(--ease),
              box-shadow var(--fast) var(--ease), color var(--fast) var(--ease);
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.btn:active, .filter:active, .iconbtn:active { transform: scale(.965); }
.row:active { background: var(--panel-2); transform: scale(.995); }
.navlink:active { transform: scale(.98); }

.btn--primary { box-shadow: var(--lift-1); }
.btn--primary:active { box-shadow: none; }

@media (prefers-reduced-motion: reduce) {
  .btn, .filter, .row, .navlink, .tab, .iconbtn, .chip { transition: none; }
  .btn:active, .filter:active, .iconbtn:active, .row:active, .navlink:active { transform: none; }
}

/* Keyboard users get the same clarity a finger gets. */
.btn:focus-visible, .filter:focus-visible, .row:focus-visible,
.navlink:focus-visible, .iconbtn:focus-visible, .tab:focus-visible {
  outline: 2px solid var(--gold); outline-offset: 2px;
}

/* --------------------------------------------------------------- on iOS */

/* Home-screen apps run under the notch and over the home indicator. Without
   these the rail sits beneath the clock and the tab bar under the gesture bar. */
.rail { padding-left: env(safe-area-inset-left); }
.tabbar {
  padding-bottom: env(safe-area-inset-bottom);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  /* Frosted, not see-through: at 82% the list behind it stayed readable and
     looked like a rendering fault rather than a material. */
  background: color-mix(in srgb, var(--panel) 94%, transparent);
  border-top: 1px solid var(--line);
}
.view { padding-bottom: calc(40px + env(safe-area-inset-bottom)); }
.chat__log, .list, .view { -webkit-overflow-scrolling: touch; }

/* Every target a finger has to find is at least 44px, which is the size of a
   fingertip and the floor Apple sets. */
.filter, .chip, .iconbtn { min-height: 44px; display: inline-flex; align-items: center; }
@media (min-width: 900px) {
  .filter, .chip { min-height: 36px; }
}

/* Numbers line up in a column so they can be compared down the page rather
   than read one at a time. */
.row__meta, .navlink__count, .quoteline, .quotetotal, .dialer__timer, .meter__top {
  font-variant-numeric: tabular-nums lining-nums;
}

/* The tile that needs you takes the room. Six of equal weight is six things to
   read; one that leads is one decision and five references. */
/* Weight, not width. Spanning columns looked right with one alert and broke
   the row with two — and how many things are urgent is not ours to decide. */
@media (min-width: 720px) {
  .stats { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
  .stat--alert b { font-size: 44px; }
  .stat--alert span { font-size: 13.5px; color: color-mix(in srgb, var(--stop) 80%, var(--ink-2)); }
}

/* Backlit, not tinted: the urgent tile reads as lit from within, which is what
   separates it from a card someone coloured in. */
.stat--alert {
  background-image:
    radial-gradient(120% 140% at 0% 0%, color-mix(in srgb, var(--stop) 12%, transparent), transparent 58%),
    linear-gradient(var(--panel), var(--panel));
}

/* A quiet tile should recede, so the loud one has somewhere to be loud. */
.stat:not(.stat--alert) { background-image: linear-gradient(var(--panel), var(--panel)); }
.stat:not(.stat--alert) b { color: var(--ink); }
.stat:not(.stat--alert) span { color: var(--ink-3); }


/* =========================================================================
   Choosing the theme
   -------------------------------------------------------------------------
   The console follows the device by default, which is why a Mac set to Dark
   Appearance showed the dark palette. These are the same rules again, keyed to
   an explicit choice instead of the system, so somebody can pin it either way
   from Settings. Generated from the blocks above — if you change one, change
   its twin.
   ========================================================================= */

:root[data-theme="dark"] {
    --forest: #0F1712;
    --forest-deep: #16211A;
    --gold: #C9AE7E;
    --gold-light: #DCC79E;
    --gold-text: #C9AE7E;
    --gold-hover: #DCC79E;

    --ground: #11170F;
    --panel: #18211A;
    --panel-2: #1F2A21;
    --tint: #24301F;
    --sage: #1F2A21;
    --sage-2: #24301F;

    --lift-1: 0 1px 2px rgba(0, 0, 0, .30), 0 2px 8px -4px rgba(0, 0, 0, .40);
    --lift-2: 0 2px 6px rgba(0, 0, 0, .36), 0 14px 32px -14px rgba(0, 0, 0, .60);
    --lift-3: 0 6px 14px rgba(0, 0, 0, .42), 0 32px 70px -24px rgba(0, 0, 0, .75);

    --lume: #7FD1A6;
    --lume-glow: rgba(127, 209, 166, .26);

    --e-city: #7FD1A6;
    --e-becosmetics: #E294A9;
    --e-bedental: #6FC6D6;
    --e-pharmacy: #A99AE0;
    --e-fertility: #F0A472;
    --e-regenerative: #7CC9A6;
    --e-premier: #D6B279;
    --e-rooms: #9AA6B6;

    --ink: #F0EDE4;
    --ink-2: #B5B3A5;
    --ink-3: #8A8878;
    --line: #2C3829;
    --line-2: #222C20;

    --brand: #9FC7AC;
    --brand-deep: #C9E0D1;
    --brand-wash: #1C2A1F;
    --accent: #C9AE7E;
    --accent-wash: #2A2318;

    --go: #7FBF97;
    --go-wash: #16251B;
    --watch: #D3B47C;
    --watch-wash: #261F12;
    --stop: #D98A6C;
    --stop-wash: #2A1A14;

    --clinical: #7FB3C1;
    --imaging: #9AA3DC;

    --shadow: 0 1px 2px rgba(0, 0, 0, .45), 0 10px 30px -14px rgba(0, 0, 0, .75);
  }

:root[data-theme="dark"] .tab[aria-current="page"] { color: var(--brand); }

:root[data-theme="dark"] .row__avatar { color: var(--brand); }

:root[data-theme="dark"] .btn--primary {
    background: var(--brand); border-color: var(--brand); color: var(--ground);
  }
  :root[data-theme="dark"] .btn--primary:hover {
    background: var(--gold-light); border-color: var(--gold-light); color: var(--ground);
  }
  /* A chosen filter was --forest on --panel-2, which in this theme is
     #0F1712 on #1F2A21 — about 1.3:1, so the selected pill was the one you
     could not read. Same treatment as the primary button. */
  :root[data-theme="dark"] .filter[aria-pressed="true"] {
    background: var(--brand); border-color: var(--brand); color: var(--ground);
  }

:root[data-theme="dark"] .bar { background: var(--brand); }

:root[data-theme="dark"] .meter__fill { background: var(--brand); }

:root[data-theme="dark"] .pipeline-map span[data-done="true"] { background: var(--brand); }

:root[data-theme="dark"] .card::before,
  :root[data-theme="dark"] .stat::before,
  :root[data-theme="dark"] .list::before {
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .10), transparent);
  }

/* The appearance switch, sitting above the account button in the rail. */
.themepick {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px;
  padding: 2px; margin-bottom: 8px;
  background: var(--panel-2); border: 1px solid var(--line); border-radius: 10px;
}
.themepick button {
  min-height: 30px; padding: 0 6px; border: none; border-radius: 8px;
  background: transparent; color: var(--ink-3);
  font-family: inherit; font-size: 12px; font-weight: 550; cursor: pointer;
  transition: background-color var(--fast) var(--ease), color var(--fast) var(--ease);
}
.themepick button:hover { color: var(--ink); }
.themepick button[aria-pressed="true"] {
  background: var(--panel); color: var(--ink); box-shadow: var(--lift-1);
}
.themepick button:focus-visible { outline: 2px solid var(--gold); outline-offset: 1px; }
.themepick--sheet { margin-bottom: 0; }
.themepick--sheet button { min-height: 40px; font-size: 14px; }
@media (min-width: 900px) { .topbar__account { display: none; } }


/* The room-hire board borrows the patient board's columns and needs two bits
   it does not have: a count on the head, and a line of guidance where a column
   is empty, so an empty stage tells you what it is for. */
.col__count {
  margin-left: auto; font-size: 12px; font-variant-numeric: tabular-nums;
  color: var(--ink-3); background: var(--panel-2); padding: 1px 7px; border-radius: 20px;
}
.col__empty {
  margin: 0; padding: 12px; font-size: 12.5px; line-height: 1.5;
  color: var(--ink-3); border: 1px dashed var(--line); border-radius: var(--radius-sm);
}

/* The desk's two jobs, joined. One line at the top of the front desk saying
   what is waiting on the lettings side, because that work is slow and valuable
   and would otherwise sit behind a day's worth of parcels. */
.lettings {
  display: flex; align-items: center; gap: 12px; width: 100%;
  padding: 13px 16px; margin-bottom: 20px;
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--lift-1); cursor: pointer; text-align: left;
  font-family: inherit; font-size: 14.5px; color: var(--ink);
  transition: transform var(--fast) var(--ease), box-shadow var(--fast) var(--ease);
}
.lettings:hover { box-shadow: var(--lift-2); }
.lettings:active { transform: scale(.995); }
.lettings b { font-variant-numeric: tabular-nums; }
.lettings__late {
  padding: 2px 9px; border-radius: 20px; font-size: 12.5px; font-weight: 550;
  background: var(--stop-wash); color: var(--stop);
}
.lettings__go { margin-left: auto; display: inline-flex; align-items: center; gap: 4px; color: var(--gold-text); font-weight: 550; }
.lettings__go svg { width: 16px; height: 16px; }
.lettings:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

/* What each room is actually for. The three theatres are graded by anaesthetic
   and are not interchangeable, so the desk should not have to remember which
   is which while somebody is on the phone. */
.roomkey { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.roomkey__item {
  display: flex; flex-direction: column; gap: 1px;
  padding: 8px 12px; border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--panel); font-size: 12px; color: var(--ink-3);
}
.roomkey__item b { font-size: 13px; font-weight: 600; color: var(--ink); }

/* The building's day, grouped by practice. Reception reads this down the page
   while somebody is standing in front of them, so the time is the anchor and
   the practice heading carries its own colour. */
.arrgroup { margin-bottom: 22px; }
.arrgroup h3 {
  display: flex; align-items: center; gap: 8px; margin: 0 0 8px;
  font-family: var(--serif); font-size: 18px; font-weight: 500;
}
.arrgroup h3 span {
  font-family: var(--sans); font-size: 12px; font-variant-numeric: tabular-nums;
  color: var(--ink-3); background: var(--panel-2); padding: 1px 8px; border-radius: 20px;
}
.arrtime {
  flex: none; width: 52px; font-variant-numeric: tabular-nums lining-nums;
  font-size: 15px; font-weight: 600; color: var(--ink);
}

/* The organisation chart. The group sits above everything, the directors sit
   under it as one row, and each business is a card carrying its own colour. */
.orgtop { text-align: center; padding: 8px 0 20px; }
.orgtop h2 { font-family: var(--serif); font-size: 26px; font-weight: 500; margin: 0 0 4px; }
.orgtop p { margin: 0; color: var(--ink-3); font-size: 14px; }

.orgdirs { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-bottom: 8px; }
.orgdir {
  display: flex; flex-direction: column; gap: 2px; padding: 12px 16px; min-width: 190px;
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--lift-1);
}
.orgdir b { font-size: 14.5px; }
.orgdir span { font-size: 12.5px; color: var(--ink-3); }

.orggrid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.orgcard {
  padding: 16px; background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--lift-1);
  border-top: 3px solid var(--entity, var(--line));
}
.orgcard h3 { font-family: var(--serif); font-size: 19px; font-weight: 500; margin: 0 0 2px; }
.orgcard h3::before { content: none; }
.orgcard__does { margin: 0 0 2px; font-size: 13px; color: var(--ink-3); }
.orgcard__lead { margin: 0 0 12px; font-size: 13px; color: var(--gold-text); font-weight: 550; }
.orgcard__none { margin: 8px 0 0; font-size: 13px; color: var(--ink-3); font-style: italic; }
.orgcard__depts {
  margin: 12px 0 0; padding-top: 10px; border-top: 1px solid var(--line-2);
  font-size: 11.5px; color: var(--ink-3);
}
.orgpeople { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 7px; }
.orgpeople li { display: flex; flex-direction: column; }
.orgpeople b { font-size: 14px; font-weight: 600; }
.orgpeople span { font-size: 12.5px; color: var(--ink-3); }

/* People who run a business without being based in it. Set apart from the
   team so the chart does not imply they sit there. */
.orgpeople--run {
  padding-bottom: 8px; margin-bottom: 2px; border-bottom: 1px dashed var(--line);
}
.orgpeople--run span { font-style: italic; }

/* Reception's day, as a grid. The building's hours down the side, everybody
   placed where they fall. Empty hours stay but recede, so the shape of the
   day is readable at a glance rather than counted. */
.daygrid { display: grid; gap: 0; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: var(--panel); box-shadow: var(--lift-1); }
.daygrid__row { display: grid; grid-template-columns: 68px 1fr; border-bottom: 1px solid var(--line-2); min-height: 52px; }
.daygrid__row:last-child { border-bottom: none; }
.daygrid__row--empty { min-height: 34px; background: color-mix(in srgb, var(--panel-2) 45%, transparent); }
.daygrid__hour {
  padding: 9px 12px; font-size: 12.5px; font-variant-numeric: tabular-nums;
  color: var(--ink-3); border-right: 1px solid var(--line-2);
}
.daygrid__slot { display: flex; flex-wrap: wrap; gap: 6px; padding: 6px; }

.dayitem {
  display: grid; gap: 1px; text-align: left; padding: 8px 12px; min-width: 210px;
  border: 1px solid var(--line); border-left: 3px solid var(--entity, var(--line));
  border-radius: var(--radius-sm); background: var(--panel);
  font-family: inherit; color: var(--ink); cursor: pointer;
  transition: transform var(--fast) var(--ease), box-shadow var(--fast) var(--ease);
}
.dayitem::before { content: none; }
.dayitem:hover { box-shadow: var(--lift-1); }
.dayitem:active { transform: scale(.985); }
.dayitem b { font-size: 13px; font-variant-numeric: tabular-nums; color: var(--ink-3); font-weight: 600; }
.dayitem span { font-size: 14.5px; font-weight: 600; }
.dayitem em { font-style: normal; font-size: 12px; color: var(--ink-3); }
.dayitem i { font-style: normal; font-size: 11.5px; font-weight: 600; color: var(--go); }
.dayitem--here { opacity: .62; cursor: default; }
.dayitem:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

/* What we send. A list of messages that opens in place, so the wording can be
   read where it sits rather than in a sheet over the top of it. */
.tpl { border-bottom: 1px solid var(--line-2); background: var(--panel); }
.tpl:last-child { border-bottom: none; }
.tpl__head {
  display: flex; align-items: center; gap: 12px; width: 100%;
  padding: 12px 14px; background: none; border: none; cursor: pointer;
  font-family: inherit; text-align: left; color: inherit;
}
.tpl__kind {
  flex: none; display: inline-flex; align-items: center; gap: 5px; min-width: 74px;
  font-size: 11.5px; font-weight: 600; color: var(--ink-3);
}
.tpl__kind svg { width: 15px; height: 15px; }
.tpl__body { flex: 1; display: grid; gap: 1px; min-width: 0; }
.tpl__subject { font-size: 14.5px; font-weight: 600; }
.tpl__when { font-size: 12.5px; color: var(--ink-3); }
.tpl__chev { flex: none; color: var(--ink-3); transition: transform var(--fast) var(--ease); }
.tpl__chev svg { width: 16px; height: 16px; }
.tpl--open .tpl__chev { transform: rotate(90deg); }
.tpl__text {
  margin: 0; padding: 14px 16px 18px 100px; white-space: pre-wrap; word-break: break-word;
  font-family: inherit; font-size: 14px; line-height: 1.62; color: var(--ink-2);
  background: color-mix(in srgb, var(--panel-2) 55%, transparent);
  border-top: 1px solid var(--line-2);
}
@media (max-width: 599px) { .tpl__text { padding-left: 16px; } }

/* Reception calendar — day, week, month and a list over any dates
   (Jey, 3 Oct 2026). Practice colour comes from [data-entity] above. */
.calbar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px;
  margin-bottom: 18px;
}
.calbar__modes { display: flex; gap: 6px; flex-wrap: wrap; }
.calbar__nav { display: flex; align-items: center; gap: 6px; flex: 1; min-width: 0; }
.calbar__nav .iconbtn { font-size: 22px; line-height: 1; width: 40px; justify-content: center; }
.calbar__label {
  font-family: var(--serif); font-weight: 500; font-size: 22px; margin: 0 0 0 8px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.calbar__range { display: flex; flex-wrap: wrap; align-items: end; gap: 8px; flex: 1; }
.calbar__range label { display: grid; gap: 3px; font-size: 12px; color: var(--ink-3); font-weight: 600; }
.calbar__range input { min-height: 40px; padding: 0 10px; border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--panel); color: var(--ink); font: inherit; }
.calbar__count { color: var(--ink-3); font-size: 13.5px; margin-left: auto; }

.calchip {
  display: block; padding: 4px 8px; border-radius: 6px; font-size: 12.5px; line-height: 1.3;
  background: color-mix(in srgb, var(--entity) 12%, var(--panel));
  border-left: 3px solid var(--entity); color: var(--ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: left;
}
.calchip::before { content: none; }
.calchip b { font-variant-numeric: tabular-nums; font-weight: 600; color: var(--ink-3); }

.weekgrid { display: grid; grid-template-columns: 1fr; gap: 10px; }
@media (min-width: 900px) { .weekgrid { grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; } }
.weekcol { border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); box-shadow: var(--lift-1); overflow: hidden; }
.weekcol--today { border-color: var(--gold); }
.weekcol__head {
  display: flex; align-items: baseline; gap: 6px; width: 100%; padding: 10px 12px;
  border: none; border-bottom: 1px solid var(--line-2); background: var(--panel-2);
  font: inherit; color: var(--ink); cursor: pointer; text-align: left;
}
.weekcol__head span { font-size: 12.5px; color: var(--ink-3); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
.weekcol__head b { font-family: var(--serif); font-size: 20px; font-weight: 500; }
.weekcol__head em { margin-left: auto; font-style: normal; font-size: 12px; color: var(--ink-3); }
.weekcol--today .weekcol__head b { color: var(--gold); }
.weekcol__body { display: grid; gap: 5px; padding: 8px; min-height: 60px; }
@media (min-width: 900px) { .weekcol__body { min-height: 260px; align-content: start; } }
.weekcol__none { font-size: 12.5px; color: var(--ink-3); padding: 4px; }

.monthgrid {
  display: grid; grid-template-columns: repeat(7, minmax(0, 1fr));
  border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden;
  background: var(--line-2); gap: 1px; box-shadow: var(--lift-1);
}
.monthgrid__dow { background: var(--panel-2); padding: 7px 8px; font-size: 11.5px; font-weight: 600; color: var(--ink-3); text-transform: uppercase; letter-spacing: .04em; }
.monthcell {
  display: flex; flex-direction: column; gap: 3px; min-height: 104px; padding: 6px;
  border: none; background: var(--panel); font: inherit; color: var(--ink); cursor: pointer; text-align: left; position: relative;
  min-width: 0;
}
.monthcell:hover { background: color-mix(in srgb, var(--panel-2) 60%, var(--panel)); }
.monthcell--out { background: var(--panel-2); }
.monthcell--out .monthcell__num { opacity: .45; }
.monthcell__num { font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; }
.monthcell--today .monthcell__num {
  display: inline-grid; place-content: center; width: 24px; height: 24px; border-radius: 50%;
  background: var(--gold); color: var(--panel);
}
.monthcell__more { font-size: 11.5px; color: var(--ink-3); padding-left: 4px; }
.monthcell__count { display: none; }
@media (max-width: 599px) {
  /* On a phone the day shows a count, not names — tap it to open the day. */
  .monthcell { min-height: 58px; }
  .monthcell .calchip, .monthcell__more { display: none; }
  .monthcell__count {
    display: inline-grid; place-content: center; margin-top: auto; align-self: flex-start;
    min-width: 22px; height: 22px; padding: 0 6px; border-radius: 11px;
    background: var(--forest); color: var(--panel-2); font-size: 12px; font-weight: 600;
  }
  .calbar__label { font-size: 18px; }
  .calbar__count { margin-left: 0; width: 100%; }
}
/* In a week column a name may wrap: the full name matters more than one line. */
.weekcol .calchip { white-space: normal; overflow: visible; }