/* brand/tokens.css */
/* Aludel design tokens. Brand colors and type are copied exactly from the trademark reference
   (06c: "A at 114%, bar on the E's crossbar"); the light theme and the app tokens below are ours.
   The app's stylesheet builds on these and nothing else. */

/* Dark: the brand's own look, and the default before the phone says otherwise. */
:root {
  --void: #000000;
  --surface-1: #0b0b0b;
  --surface-2: #151515;
  --line: #262626;
  --line-strong: #666666;
  --ink: #ffffff;
  --ink-muted: #a6a6a6;
  --ink-faint: #858585;
  --aurum: #c8a46a;
  --signal: #ff5a4a;

  --space-2: 8px;
  --space-4: 16px;
  --space-8: 32px;
  --space-16: 64px;

  --radius-0: 0;
  --radius-sm: 2px;
  --radius-pill: 999px;

  --font-sans: "Geist", "Helvetica Neue", Arial, sans-serif;
  --font-mono: "Geist Mono", ui-monospace, Menlo, monospace;

  --text-display: 300 72px/72px var(--font-sans);
  --text-headline: 300 40px/44px var(--font-sans);
  --text-title: 500 22px/28px var(--font-sans);
  --text-body: 400 16px/26px var(--font-sans);
  --text-caption: 400 13px/20px var(--font-sans);
  --text-eyebrow: 500 12px/16px var(--font-mono);
  --text-code: 400 13px/20px var(--font-mono);

  /* The app, mobile first: bold names, big targets, nothing under 15px. */
  --text-screen: 700 30px/36px var(--font-sans);   /* a screen's title */
  --text-row: 600 17px/22px var(--font-sans);      /* a name in a list */
  --text-meta: 400 15px/20px var(--font-sans);     /* the detail under it */
  --text-button: 600 18px/24px var(--font-sans);
  --text-status: 500 12px/16px var(--font-mono);   /* OPEN, OVERDUE: uppercase, 0.08em */
  --tap-primary: 56px;                             /* the one main button, full width */
  --tap: 48px;                                     /* every other control */
  --row: 64px;                                     /* a list row, at least */
  --radius-control: 14px;                          /* toggles and steppers */
  --tablet: 768px;                                 /* list beside detail from here */

  color-scheme: dark;
}

/* Light: black ink on white, for daylight. Every text color passes WCAG AA on --void and
   --surface-1; aurum and signal are darkened to keep 4.5:1 on white. */
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --void: #ffffff;
    --surface-1: #f7f7f7;
    --surface-2: #ededed;
    --line: #e5e5e5;
    --line-strong: #8c8c8c;
    --ink: #000000;
    --ink-muted: #4d4d4d;
    --ink-faint: #6b6b6b;
    --aurum: #7d5f28;
    --signal: #c62a1a;
    color-scheme: light;
  }
}
:root[data-theme="light"] {
  --void: #ffffff;
  --surface-1: #f7f7f7;
  --surface-2: #ededed;
  --line: #e5e5e5;
  --line-strong: #8c8c8c;
  --ink: #000000;
  --ink-muted: #4d4d4d;
  --ink-faint: #6b6b6b;
  --aurum: #7d5f28;
  --signal: #c62a1a;
  color-scheme: light;
}

/* app/styles/base.css */
/* The app's base: the mockup's components (brand/app-screens.html) on a full screen, built on
   brand/tokens.css alone (its colors and type; no other values of color). Mobile first: rows of
   64px split by hairlines, controls of 48px, one 56px pill at the bottom; a centred column from
   768px. Screen families add their own files after this one, in name order. */

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; min-height: 100dvh; background: var(--void); color: var(--ink); font: var(--text-body);
  padding-left: env(safe-area-inset-left, 0px); padding-right: env(safe-area-inset-right, 0px);
  -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent;
}
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 2px solid var(--aurum); outline-offset: 2px; }
.noscript { padding: var(--space-4); color: var(--ink-muted); }

/* The space the fixed bars take at the bottom: the tabs inside a company, then the cta bar. */
#app { --tabs: 0px; }
#app:has(> .tabs) { --tabs: calc(64px + env(safe-area-inset-bottom, 0px)); }
.screen { padding-bottom: calc(var(--tabs) + var(--space-8)); }
.screen.has-cta { padding-bottom: calc(var(--tabs) + 132px); }

/* The head: back, eyebrow, title, sub. */
.app-head { padding: calc(12px + env(safe-area-inset-top, 0px)) 20px 12px; display: flex; flex-direction: column; gap: 4px; }
.app-head h1 { margin: 0; font: var(--text-screen); letter-spacing: -0.015em; overflow-wrap: anywhere; }
.eyebrow, .group { font: var(--text-eyebrow); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-faint); }
.sub { font: var(--text-meta); color: var(--ink-muted); }
.back { font: var(--text-row); text-decoration: none; display: inline-flex; align-items: center; min-height: var(--tap); align-self: flex-start; }

.offline {
  margin: 0 20px 8px; display: flex; align-items: center; gap: 10px; padding: 10px 14px;
  border: 1px solid var(--line); border-radius: var(--radius-control); font: var(--text-meta); color: var(--ink-muted);
}
.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--aurum); flex: none; }

/* Filters that combine. */
.chips { display: flex; gap: var(--space-2); padding: 4px 20px 12px; overflow-x: auto; scrollbar-width: none; }
.chip {
  flex: none; min-height: var(--tap); padding: 0 var(--space-4); border: 1px solid var(--line-strong);
  border-radius: var(--radius-pill); background: transparent; font: 600 15px/20px var(--font-sans);
}
.chip[aria-pressed="true"] { background: var(--ink); color: var(--void); border-color: var(--ink); }

/* Lists, not cards. A row that opens something is one big link or button. */
.group { padding: var(--space-4) 20px var(--space-2); display: flex; justify-content: space-between; gap: var(--space-4); }
.rows { list-style: none; margin: 0; padding: 0; }
.rows > li { border-top: 1px solid var(--line); }
.rows > li:last-child { border-bottom: 1px solid var(--line); }
.row, .item > a, .item > button {
  min-height: var(--row); padding: 12px 20px; display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; align-items: center;
}
.rows > li.item { padding: 0; }
.item > a, .item > button { width: 100%; text-decoration: none; background: none; border: 0; text-align: left; }
.item > a:active, .item > button:active { background: var(--surface-1); }
.name { font: var(--text-row); min-width: 0; overflow-wrap: anywhere; }
.meta { grid-column: 1; font: var(--text-meta); color: var(--ink-muted); min-width: 0; overflow-wrap: anywhere; }
.state { grid-column: 2; grid-row: 1 / span 2; justify-self: end; text-align: right; display: flex; flex-direction: column; align-items: flex-end; }

/* Status in words: the word carries it, the dot and color reinforce it. */
.st { font: var(--text-status); letter-spacing: 0.08em; text-transform: uppercase; display: inline-flex; align-items: center; gap: 6px; }
.st::before { content: ""; width: 8px; height: 8px; border-radius: 50%; border: 1.5px solid currentColor; }
.st.open { color: var(--ink); }
.st.overdue { color: var(--signal); }
.st.late { color: var(--aurum); }
.st.open::before, .st.overdue::before, .st.late::before { background: currentColor; }
.st.upcoming { color: var(--ink-faint); }
.st.done { color: var(--ink-muted); }
.st.done::before { content: "✓"; border: 0; width: auto; height: auto; font-size: 13px; }
.when { display: block; font: var(--text-caption); color: var(--ink-faint); margin-top: 2px; }

.facts { margin: 0; padding: 0 20px 4px; display: grid; grid-template-columns: auto 1fr; gap: 6px var(--space-4); font: var(--text-meta); }
.facts dt { color: var(--ink-faint); }
.facts dd { margin: 0; font-weight: 500; overflow-wrap: anywhere; }

.empty { padding: var(--space-8) 20px; display: flex; flex-direction: column; gap: var(--space-2); color: var(--ink-muted); }
.empty p { margin: 0; font: var(--text-meta); }
.empty .empty-title { font: var(--text-title); color: var(--ink); }

/* The tabs, fixed at the bottom, above the home indicator. */
.tabs {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 10; display: grid; grid-template-columns: repeat(5, 1fr);
  border-top: 1px solid var(--line); background: var(--void); padding: 6px 4px calc(6px + env(safe-area-inset-bottom, 0px));
}
.tab {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: 52px;
  font: 600 12px/16px var(--font-sans); color: var(--ink-faint); text-decoration: none;
}
.tab::before { content: ""; width: 24px; height: 24px; background: currentColor; mask: var(--icon) center / contain no-repeat; }
.tab.on { color: var(--ink); }
.tab[data-tab="today"] { --icon: url("/icons/today.svg"); }
.tab[data-tab="routes"] { --icon: url("/icons/routes.svg"); }
.tab[data-tab="vault"] { --icon: url("/icons/vault.svg"); }
.tab[data-tab="outbox"] { --icon: url("/icons/outbox.svg"); }
.tab[data-tab="more"] { --icon: url("/icons/more.svg"); }
.badge {
  position: absolute; top: 2px; left: calc(50% + 6px); min-width: 18px; height: 18px; border-radius: var(--radius-pill); padding: 0 5px;
  background: var(--aurum); color: var(--void); font: 700 11px/18px var(--font-sans); text-align: center;
}

/* The one main action: a 56px pill in thumb reach, above the tabs. */
.cta-bar {
  position: fixed; left: 0; right: 0; bottom: var(--tabs); z-index: 9; padding: 12px 20px; display: flex; flex-direction: column; gap: var(--space-2);
  border-top: 1px solid var(--line); background: var(--void);
}
#app:not(:has(> .tabs)) .cta-bar { padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px)); }
.cta {
  min-height: var(--tap-primary); width: 100%; border: 0; border-radius: var(--radius-pill); background: var(--ink); color: var(--void);
  font: var(--text-button);
}
/* The pill as a link (Sign in with Google), looking as the button does. */
a.cta { display: flex; align-items: center; justify-content: center; text-decoration: none; }
.cta-note { text-align: center; font: var(--text-caption); color: var(--ink-faint); }

/* Every other action: an outlined pill of 48px. Danger is in red; one that needs signal is dimmed offline. */
.btn, .ghost {
  min-height: var(--tap); padding: 0 20px; border: 1px solid var(--line-strong); border-radius: var(--radius-pill);
  background: transparent; font: var(--text-button);
}
.ghost { border-color: transparent; width: 100%; }
.btn.danger { color: var(--signal); border-color: var(--signal); }
.cta.danger { background: var(--signal); color: var(--void); }
[aria-disabled="true"] { opacity: 0.45; }
.actions { display: flex; flex-wrap: wrap; gap: var(--space-2); padding: 12px 20px; }

/* Fields: a label, then the control. */
.field { padding: 14px 20px; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 10px; }
.field .label { font: var(--text-row); display: flex; justify-content: space-between; gap: var(--space-2); }
.req { font: var(--text-status); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-faint); line-height: 22px; }
input, select, textarea {
  width: 100%; min-height: var(--tap); padding: 10px 14px; border: 1px solid var(--line-strong); border-radius: var(--radius-control);
  background: var(--surface-1); font: 400 17px/24px var(--font-sans);
}
textarea { resize: vertical; }
input::placeholder, textarea::placeholder { color: var(--ink-faint); }

/* A choice: big toggles in a row; seven or more wrap (weekdays). */
.seg { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: var(--space-2); }
.seg:has(> :nth-child(5)) { grid-auto-flow: row; grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); }
.seg button {
  min-height: 52px; padding: 0 6px; border: 1px solid var(--line-strong); border-radius: var(--radius-control); background: transparent;
  font: 600 16px/20px var(--font-sans);
}
.seg button[aria-pressed="true"] { background: var(--ink); color: var(--void); border-color: var(--ink); }

/* A number: − and + around it, the keypad a tap away. */
.stepper { display: grid; grid-template-columns: 52px 1fr 52px; gap: var(--space-2); align-items: center; }
.stepper > button {
  min-height: 52px; border: 1px solid var(--line-strong); border-radius: var(--radius-control); background: transparent;
  font: 400 26px/1 var(--font-sans);
}
.stepper .val { display: flex; align-items: baseline; gap: 6px; min-width: 0; }
.stepper input {
  flex: 1 1 0; min-width: 0; border: 0; background: transparent; padding: 0; text-align: right;
  font: 600 30px/36px var(--font-sans); font-variant-numeric: tabular-nums;
}
.stepper small { flex: 1 1 0; font: var(--text-meta); color: var(--ink-muted); }
.stepper .val:not(:has(small)) input { text-align: center; }

/* Yes or no. */
.toggle {
  width: 64px; min-height: 36px; margin: 6px 0; border-radius: var(--radius-pill); border: 1px solid var(--line-strong);
  background: var(--surface-2); position: relative; align-self: flex-start;
}
.toggle::after {
  content: ""; position: absolute; top: 3px; left: 3px; width: 28px; height: 28px; border-radius: 50%; background: var(--ink-muted);
}
.toggle[aria-checked="true"] { background: var(--ink); border-color: var(--ink); }
.toggle[aria-checked="true"]::after { left: 31px; background: var(--void); }

/* The sheet that asks first, and the toast that says what happened. */
.scrim { position: fixed; inset: 0; z-index: 30; background: color-mix(in srgb, var(--void) 70%, transparent); display: flex; align-items: flex-end; }
.sheet {
  width: 100%; max-width: 600px; margin: 0 auto; padding: 20px 20px calc(16px + env(safe-area-inset-bottom, 0px));
  background: var(--surface-1); border-top: 1px solid var(--line-strong); border-radius: 20px 20px 0 0;
  display: flex; flex-direction: column; gap: var(--space-2);
}
.sheet p { margin: 0; }
.sheet-q { font: var(--text-title); }
.sheet-detail { font: var(--text-meta); color: var(--ink-muted); padding-bottom: var(--space-2); }
#toast { position: fixed; left: 0; right: 0; top: calc(8px + env(safe-area-inset-top, 0px)); z-index: 40; display: flex; justify-content: center; pointer-events: none; padding: 0 16px; }
.toast {
  max-width: 600px; padding: 12px 18px; border-radius: var(--radius-control); background: var(--ink); color: var(--void);
  font: 500 15px/20px var(--font-sans);
}
.toast.bad { background: var(--signal); }

/* What the assistant is about to use: an aurum ring that draws in. */
.agent-focus { outline: 3px solid var(--aurum); outline-offset: 2px; border-radius: var(--radius-control); animation: agent-focus 0.35s ease-out; }
@keyframes agent-focus { from { outline-color: transparent; outline-offset: 12px; } }

@media (prefers-reduced-motion: no-preference) {
  .seg button, .chip, .cta, .toggle, .toggle::after { transition: background-color 0.15s, color 0.15s, left 0.15s; }
}
@media (prefers-reduced-motion: reduce) { .agent-focus { animation: none; } }

/* Tablets: one centred column. */
@media (min-width: 768px) {
  .screen, .tabs, .cta-bar { max-width: 600px; margin-inline: auto; }
  .tabs, .cta-bar { border-inline: 1px solid var(--line); }
}

/* app/styles/admin.css */
/* Outside a company and the admin's panel (views/home.ts, views/admin.ts): the sign-in page, a
   notice line, a hint under a group, and the buttons a row carries (Forget, Restore, Let in). */

/* The sign-in page: the wordmark, one line of what Aludel is, the pill. */
.welcome { display: flex; flex-direction: column; gap: var(--space-4); padding: calc(var(--space-16) + env(safe-area-inset-top, 0px)) 20px 0; }
.welcome .logo { width: 220px; height: auto; }
.lede { margin: 0; font: var(--text-title); color: var(--ink-muted); max-width: 30ch; }

/* A line the screen wants read first (a request sent, a zone change coming). */
.notice { margin: 0 20px 12px; padding: 12px 14px; border: 1px solid var(--line-strong); border-radius: var(--radius-control); font: var(--text-meta); }
.welcome .notice { margin: 0; }
/* A plain explanation under a group or field. */
.hint { margin: 0; padding: 4px 20px 8px; font: var(--text-meta); color: var(--ink-muted); }

/* A row's own buttons, beneath its name and detail. */
.row-acts { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: var(--space-2); padding-top: 8px; }
.row-acts .btn { padding: 0 16px; }

/* app/styles/agent.css */
/* The assistant: a pill above the tabs (and above the screen's main action), and a panel at the
   bottom that leaves that action and the tabs in view, so each button the assistant uses is seen
   ringed where it is, and can still be tapped. Built on brand/tokens.css alone. */

#assistant { --below: env(safe-area-inset-bottom, 0px); --cta: 0px; }
body:has(#app > .tabs) #assistant { --below: calc(64px + env(safe-area-inset-bottom, 0px)); }
body:has(.cta-bar) #assistant { --cta: 81px; }
body:has(.cta-note) #assistant { --cta: 109px; }
/* While the panel is open, the screen scrolls clear of it, and the ring is scrolled into the space above it. */
html:has(.ai-panel:not([hidden])) { scroll-padding-bottom: 46dvh; }
body:has(.ai-panel:not([hidden])) .screen { padding-bottom: 50dvh; }
.ai-fab[hidden], .ai-panel[hidden] { display: none; }

.ai-fab {
  position: fixed; right: 16px; bottom: calc(var(--below) + var(--cta) + 12px); z-index: 20; min-height: var(--tap); padding: 0 20px;
  display: inline-flex; align-items: center; gap: 10px; border: 1px solid var(--aurum); border-radius: var(--radius-pill);
  background: var(--surface-2); font: var(--text-button);
}
.ai-fab::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--aurum); }

.ai-panel {
  position: fixed; left: 0; right: 0; bottom: calc(var(--below) + var(--cta)); z-index: 20; max-height: 46dvh; display: flex; flex-direction: column;
  background: var(--surface-1); border-top: 1px solid var(--line-strong); border-radius: 20px 20px 0 0;
}
.ai-head { display: flex; align-items: center; gap: var(--space-2); padding: 4px 8px 4px 20px; border-bottom: 1px solid var(--line); }
.ai-title { font: var(--text-row); }
.ai-status { flex: 1; font: var(--text-status); letter-spacing: 0.08em; text-transform: uppercase; color: var(--aurum); }
.ai-close { min-height: var(--tap); padding: 0 12px; border: 0; background: none; color: var(--ink-muted); font: var(--text-meta); }

/* The transcript: the person's lines at the right, the answers at the left, what was done in grey. */
.ai-log { flex: 1; min-height: 56px; overflow-y: auto; list-style: none; margin: 0; padding: 10px 20px; display: flex; flex-direction: column; gap: var(--space-2); }
.ai-log li { max-width: 88%; font: var(--text-meta); overflow-wrap: anywhere; }
.ai-you { align-self: flex-end; padding: 8px 12px; border-radius: var(--radius-control); background: var(--surface-2); }
.ai-ai { font: 500 17px/24px var(--font-sans); }
.ai-did { color: var(--ink-faint); }
.ai-did::before { content: "✓ "; }
.ai-hint { color: var(--ink-muted); }
.ai-log img { display: block; max-width: 160px; max-height: 120px; margin-bottom: 6px; border-radius: 8px; }

.ai-ask { display: flex; gap: var(--space-2); padding: 0 20px 10px; }
.ai-ask:empty { display: none; }
.ai-ask > * { flex: 1; }
.ai-bar { display: grid; grid-template-columns: 1fr auto; gap: var(--space-2); padding: 10px 20px 12px; border-top: 1px solid var(--line); }
.ai-tools { grid-column: 1 / -1; display: flex; gap: var(--space-2); }
.ai-tools .chip { padding: 0 14px; }
.ai-talk { flex: 1; min-height: var(--tap); border: 0; border-radius: var(--radius-pill); background: var(--ink); color: var(--void); font: var(--text-button); }
.ai-talk[aria-pressed="true"] { background: var(--aurum); }
@media (prefers-reduced-motion: no-preference) {
  .ai-talk[aria-pressed="true"] { animation: ai-listen 1.2s ease-in-out infinite; }
}
@keyframes ai-listen { 50% { box-shadow: 0 0 0 6px color-mix(in srgb, var(--aurum) 35%, transparent); } }

@media (min-width: 768px) {
  .ai-panel { max-width: 600px; margin-inline: auto; border-inline: 1px solid var(--line); }
  .ai-fab { right: calc(50% - 284px); }
}

/* app/styles/field.css */
/* The field's screens: today, routes, a client, a job (views/today.ts, routes.ts, clients.ts).
   Only what base.css lacks: a filter chip that is on (its button is an action's, so the state is
   a class), the move buttons of a route being put in order, and a link inside an empty state. */

.chip.on { background: var(--ink); color: var(--void); border-color: var(--ink); }

/* Up and Down at a row's right, while a route is put in order. */
.move { display: flex; flex-direction: row; gap: var(--space-2); }
.move .btn { padding: 0 var(--space-4); }

/* Several jobs' standings stack at a row's right. */
.state .st + .st { margin-top: 4px; }

.empty a { font: var(--text-row); min-height: var(--tap); display: inline-flex; align-items: center; }

/* app/styles/report.css */
/* Filling in a report, the outbox and the vault (views/report.ts, views/vault.ts). Only what
   base.css lacks: the client's card shown inert above the report, and a line of fine print. */

/* The card's details: shown, not edited here, so set apart and quieter than the fields below. */
.card-block { margin: 4px 20px 8px; padding: 12px 0 4px; border: 1px dashed var(--line-strong); border-radius: var(--radius-control); background: var(--surface-1); }
.card-block .facts { padding: 0 14px 4px; }
.card-block .fine { padding: 4px 14px 8px; }

/* A caution or source line under a control or block. */
.fine { margin: 0; font: var(--text-caption); color: var(--ink-faint); }

/* The vault's scope: each part one line, its name at the left and the choice at the right. */
.scope .field { flex-direction: row; align-items: center; justify-content: space-between; padding: 8px 20px; }
.scope .field .label { flex: none; }
.scope select { width: auto; max-width: 62%; }

/* A total at a row's right. */
.num { font: 600 20px/24px var(--font-sans); font-variant-numeric: tabular-nums; }

/* app/styles/templates.css */
/* The template builder (views/templates.ts): the client's details shown inert, a locked part's
   line, a task's option (its label, then "counts as done" and remove beneath), and a block's
   separation from the next. Everything else is base.css. */

/* The client's details: greyed, not a control; they come from the client's card. */
.inert { color: var(--ink-faint); background: var(--surface-1); margin: var(--space-2) 0; }
.inert .name { color: var(--ink-muted); font-weight: 500; }
.inert .state { font: var(--text-caption); }

/* What is locked, and why, in one plain line. */
.lock { margin: 0; padding: 4px 20px 8px; font: var(--text-meta); color: var(--ink-muted); }
.opt .lock { padding: 0; align-self: center; }

/* An option: its label across, then its switch and its remove button. */
.opt { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2); }
.opt > input { flex: 1 1 100%; }
.done { display: flex; align-items: center; gap: 10px; min-height: var(--tap); font: var(--text-meta); }

/* Each block starts on a stronger line. */
.block { border-top: 1px solid var(--line-strong); margin-top: var(--space-4); }