/* aidocusource
   Palette: machine yellow accent (hour meters, caution decals) on cool graphite/warm paper.
   Semantic confidence colors are deliberately separate from the accent. */

:root {
  --ink:        #17191d;
  --paper:      #efeeea;
  --surface:    #f7f6f3;
  --surface-2:  #e6e4dd;
  --line:       #d5d2c8;
  --muted:      #6e6b63;
  --steel:      #3c4753;
  --accent:     #e3a81e;
  --accent-ink: #7a5605;

  --ok:      #2c7a54;
  --ok-bg:   #dfeee6;
  --warn:    #a6392c;
  --warn-bg: #f6e3df;
  --info:    #6e6b63;
  --info-bg: #e8e6df;

  --sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", SFMono-Regular, "Cascadia Mono", Menlo, Consolas, monospace;
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;

  --r: 3px;
  --shadow: 0 1px 2px rgba(23, 25, 29, .06), 0 6px 18px rgba(23, 25, 29, .05);

  --topbar-h: 53px;
  --tabs-h: 56px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --ink:        #e7e5de;
    --paper:      #141619;
    --surface:    #1c1f24;
    --surface-2:  #262a31;
    --line:       #333841;
    --muted:      #939087;
    --steel:      #9fb0c0;
    --accent:     #e8b13a;
    --accent-ink: #f0c86e;

    --ok:      #62b98c;
    --ok-bg:   #163024;
    --warn:    #e0796a;
    --warn-bg: #341915;
    --info:    #939087;
    --info-bg: #23262c;

    --shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 6px 18px rgba(0, 0, 0, .3);
  }
}

/* The viewer's explicit toggle must win over the OS preference, both directions. */
:root[data-theme="light"] {
  --ink: #17191d; --paper: #efeeea; --surface: #f7f6f3; --surface-2: #e6e4dd;
  --line: #d5d2c8; --muted: #6e6b63; --steel: #3c4753; --accent: #e3a81e; --accent-ink: #7a5605;
  --ok: #2c7a54; --ok-bg: #dfeee6; --warn: #a6392c; --warn-bg: #f6e3df; --info: #6e6b63; --info-bg: #e8e6df;
}
:root[data-theme="dark"] {
  --ink: #e7e5de; --paper: #141619; --surface: #1c1f24; --surface-2: #262a31;
  --line: #333841; --muted: #939087; --steel: #9fb0c0; --accent: #e8b13a; --accent-ink: #f0c86e;
  --ok: #62b98c; --ok-bg: #163024; --warn: #e0796a; --warn-bg: #341915; --info: #939087; --info-bg: #23262c;
}

* { box-sizing: border-box; }

/* The hidden attribute is only `display: none` in the UA stylesheet, so ANY
   author display rule silently beats it — and this file sets display on almost
   everything. Without this, #gate stays painted over the whole app after sign-in
   and the app looks dead. Keep this rule above everything. */
[hidden] { display: none !important; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

.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;
}

:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

a { color: var(--accent-ink); text-underline-offset: 2px; }
a:hover { color: var(--ink); }

/* ================================================================== frame ===
   Top bar, a nav rail on desktop, the screen in the middle. On a phone the rail
   becomes a bottom tab bar — same DOM, different grid. */

#app {
  display: grid;
  grid-template-areas: "top top" "nav main";
  grid-template-columns: 208px 1fr;
  grid-template-rows: var(--topbar-h) 1fr;
  height: 100vh;
  height: 100dvh;
}

.topbar {
  grid-area: top;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 18px;
  border-bottom: 1px solid var(--line);
  background: var(--surface);
  min-width: 0;
}

.brand { display: flex; align-items: center; gap: 9px; text-decoration: none; color: var(--ink); flex: none; }

.brand__mark {
  width: 13px; height: 13px;
  background: var(--accent);
  /* a hex-head bolt, flat-top */
  clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%);
}

.brand__name { font-family: var(--mono); font-size: 14px; font-weight: 600; letter-spacing: .04em; }

/* Which machine you are looking at — the single most useful orienting fact. */
.topbar__machine {
  margin: 0;
  min-width: 0;
  font-size: 13.5px;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding-left: 12px;
  border-left: 1px solid var(--line);
}
.topbar__machine:empty { display: none; }

.pill {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 4px 9px;
  border-radius: 999px;
  border: 1px solid var(--line);
  color: var(--muted);
  white-space: nowrap;
}

.btn--log { margin-left: auto; flex: none; }

/* The machine header carries its own, right next to that machine's hour meter,
   so the global one would just be the same button twice. */
body[data-view="machine"] #topbar-log { display: none; }

.shell { grid-area: main; min-width: 0; min-height: 0; position: relative; }

/* ---- the four screens.
   Specificity note, the same trap as [hidden] above: .binder and .chat set their
   own display later in this file, so a bare `.view { display: none }` loses to
   anything similar. body[data-view] outranks a lone class; the id rules outrank
   that. Every screen must be off unless its route is active. */
body[data-view] .view { display: none; }
body[data-view="dashboard"] #view-dashboard { display: block; }
body[data-view="equipment"] #view-equipment { display: block; }
body[data-view="schedule"]  #view-schedule  { display: block; }
body[data-view="settings"]  #view-settings  { display: block; }
body[data-view="machine"]   #view-machine   { display: flex; flex-direction: column; }

.view { height: 100%; min-height: 0; }
.view--scroll { overflow-y: auto; overscroll-behavior: contain; }

.wrap {
  max-width: 940px;
  margin: 0 auto;
  padding: 26px 22px 70px;
  display: flex;
  flex-direction: column;
  gap: 26px;
}
.wrap--tight { max-width: 720px; }

.view__h { margin: 0; font-size: 24px; letter-spacing: -.01em; }

.view__bar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.view__bar .btn { margin-left: auto; }

/* =================================================================== nav === */

.tabs {
  grid-area: nav;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 14px 10px;
  border-right: 1px solid var(--line);
  background: var(--surface);
}

.tab {
  position: relative;
  display: flex;
  align-items: center;
  gap: 9px;
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  padding: 9px 12px;
  border: 0;
  border-radius: var(--r);
  background: none;
  color: var(--muted);
  cursor: pointer;
}
.tab:hover { background: var(--surface-2); color: var(--ink); }
.tab[aria-current="page"] { color: var(--ink); background: var(--surface-2); box-shadow: inset 2px 0 0 var(--accent); }

.tab__badge {
  margin-left: auto;
  min-width: 19px;
  text-align: center;
  padding: 1px 5px;
  border-radius: 999px;
  background: var(--accent);
  color: #17191d;
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 700;
  line-height: 1.6;
}
.tab__badge--warn { background: var(--warn); color: #fff; }

/* ================================================================ blocks === */

.block { display: flex; flex-direction: column; gap: 12px; }

.block__head { display: flex; align-items: baseline; gap: 12px; }

.block__h {
  margin: 0;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--muted);
}

.block__more {
  margin-left: auto;
  font: inherit;
  font-size: 12.5px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--accent-ink);
  cursor: pointer;
  white-space: nowrap;
}
.block__more:hover { color: var(--ink); text-decoration: underline; }

.blank {
  padding: 18px 16px;
  border: 1px dashed var(--line);
  border-radius: var(--r);
  color: var(--muted);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.blank__h { margin: 0; font-size: 14px; color: var(--ink); }
.blank__sub { margin: 0; font-size: 13.5px; }

/* "Nothing is due" is good news, and a grey dashed box reads as absence. */
.blank--ok {
  border-style: solid;
  border-color: var(--ok);
  background: var(--ok-bg);
  flex-direction: row;
  align-items: baseline;
  gap: 11px;
}
.blank--ok .blank__tick { color: var(--ok); font-weight: 700; }
.blank--ok .blank__h { color: var(--ok); font-weight: 600; }
.blank--doc { margin: 12vh auto 0; max-width: 40ch; text-align: center; align-items: center; }

.onboard {
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: flex-start;
  padding: 22px;
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  border-radius: var(--r);
  background: var(--surface);
}
.onboard__h { margin: 0; font-size: 17px; }
.onboard p { margin: 0; color: var(--muted); max-width: 60ch; }

/* ================================================================= stats === */

.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }

.stat {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--surface);
  text-decoration: none;
  color: var(--ink);
}
.stat:hover { border-color: var(--muted); }
.stat--warn { border-left: 3px solid var(--warn); }
.stat--attention { border-left: 3px solid var(--accent); }
.stat--ok { border-left: 3px solid var(--ok); background: var(--ok-bg); }

.stat__n { font-family: var(--mono); font-size: 30px; font-weight: 600; line-height: 1.1; font-variant-numeric: tabular-nums; }
.stat--warn .stat__n { color: var(--warn); }
.stat--attention .stat__n { color: var(--accent-ink); }
.stat--ok .stat__n { color: var(--ok); }
.stat--ok .stat__label { color: var(--ok); }
.stat__label { font-size: 12.5px; color: var(--muted); }

/* ============================================================== running === */
/* The "we are working on it" strip. This is what stops people re-asking. */

.running {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 13px 15px;
  border: 1px solid var(--accent);
  border-radius: var(--r);
  background: var(--surface);
}
.running--inline { border-radius: 0; border-width: 0 0 1px; border-color: var(--line); border-bottom-color: var(--accent); }

.running__row { display: flex; align-items: center; gap: 11px; font-size: 13.5px; }
.running__text { min-width: 0; }
.running__text strong { font-weight: 600; }
.running__link { margin-left: auto; flex: none; font-size: 12.5px; white-space: nowrap; }

.running__spinner {
  flex: none;
  width: 13px; height: 13px;
  border: 2px solid var(--accent);
  border-right-color: transparent;
  border-radius: 50%;
  animation: spin 900ms linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .running__spinner { animation-duration: 3s; } }

/* =========================================================== equipment === */

.eqgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 12px; }

.eqcard {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--surface);
  text-decoration: none;
  color: var(--ink);
}
.eqcard:hover { border-color: var(--muted); box-shadow: var(--shadow); }
.eqcard--researching { border-left: 3px solid var(--accent); }
.eqcard--error { border-left: 3px solid var(--warn); }
.eqcard--new { border-style: dashed; }

.eqcard__head { display: flex; align-items: flex-start; gap: 10px; }
.eqcard__name { margin: 0; font-size: 15.5px; line-height: 1.3; min-width: 0; }
.eqcard__cat { margin: -4px 0 0; font-size: 12.5px; color: var(--muted); }

.eqcard__meter { display: flex; align-items: baseline; gap: 8px; margin-top: 2px; }
.eqcard__hours {
  font-family: var(--mono);
  font-size: 27px;
  font-weight: 600;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.eqcard__unit { font-family: var(--mono); font-size: 10.5px; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); }
.eqcard__nohours { font-size: 12.5px; color: var(--muted); font-style: italic; }

.eqcard__facts { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 3px; }
.eqcard__facts li { font-size: 12.5px; color: var(--muted); }
.eqcard__facts .is-warn { color: var(--warn); font-weight: 600; }
.eqcard__facts .is-attention { color: var(--accent-ink); font-weight: 600; }
.eqcard__facts .is-ok { color: var(--ok); font-weight: 600; }

.chip {
  flex: none;
  margin-left: auto;
  font-family: var(--mono);
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 3px 7px;
  border-radius: 999px;
  border: 1px solid var(--line);
  color: var(--muted);
  white-space: nowrap;
}
.chip--ready { color: var(--ok); background: var(--ok-bg); border-color: var(--ok); }
.chip--researching { color: var(--accent-ink); background: var(--info-bg); border-color: var(--accent); }
.chip--error { color: var(--warn); background: var(--warn-bg); border-color: var(--warn); }
.chip--new { border-style: dashed; }

/* ================================================================== due === */

.due__card {
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 13px 14px;
  border: 1px solid var(--line);
  border-left-width: 3px;
  border-radius: var(--r);
  background: var(--surface);
  margin-bottom: 8px;
}
.due__card:last-child { margin-bottom: 0; }

/* A ramp from alarm to calm, not a wall of red. Red is reserved for a job that
   is genuinely past its recorded service point — everything else is amber, then
   steel, then quiet. If everything shouts, nothing does. */
.due__card--overdue { border-left-color: var(--warn); background: var(--warn-bg); }
.due__card--now   { border-left-color: var(--accent); }
.due__card--soon  { border-left-color: var(--steel); }
.due__card--later { border-left-color: var(--line); }
.due__card--done  { border-left-color: var(--ok); }

.due__top { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }

.due__when {
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.due__card--overdue .due__when { color: var(--warn); }
.due__card--now .due__when { color: var(--accent-ink); }
.due__card--soon .due__when { color: var(--steel); }
.due__card--later .due__when { color: var(--muted); }
.due__card--done .due__when { color: var(--ok); }

/* The moment of payoff: the card goes green and says what was recorded, and
   holds there long enough to read before the list re-sorts underneath it. */
.due__card--justdone {
  border-color: var(--ok);
  border-left-color: var(--ok);
  background: var(--ok-bg);
  transition: background .25s ease, border-color .25s ease;
}
.due__card--justdone .due__when { color: var(--ok); }
.due__card--justdone .due__task { text-decoration: line-through; text-decoration-color: var(--ok); }
.due__card--justdone .due__go--do { border-color: var(--ok); background: var(--ok); color: #fff; }

@media (prefers-reduced-motion: reduce) { .due__card--justdone { transition: none; } }

.due__every { margin-left: auto; font-family: var(--mono); font-size: 11px; color: var(--muted); white-space: nowrap; }

.due__machine { font-size: 12.5px; font-weight: 600; }

.due__task { margin: 0; font-size: 14.5px; line-height: 1.4; font-weight: 600; }

.due__more { font-size: 13px; color: var(--muted); }
.due__more summary {
  cursor: pointer;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.due__more p { margin: 6px 0 0; line-height: 1.5; }

.due__parts { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.due__parts li { display: flex; align-items: baseline; gap: 8px; font-size: 13px; }
.due__part-name { color: var(--muted); }
.due__pn {
  margin-left: auto;
  font-family: var(--mono);
  font-size: 12.5px;
  letter-spacing: .03em;
  padding: 1px 6px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--surface-2);
  white-space: nowrap;
}

.due__estimate, .due__last { margin: 0; font-size: 11.5px; color: var(--muted); font-style: italic; }

.due__actions { display: flex; gap: 7px; flex-wrap: wrap; margin-top: 1px; }

.due__go {
  font: inherit;
  font-size: 12.5px;
  padding: 5px 10px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--paper);
  color: var(--ink);
  cursor: pointer;
}
.due__go:hover { border-color: var(--muted); }
.due__go--do { border-color: var(--ok); color: var(--ok); }

/* One scannable line, for anything you are not about to act on today. */
.due__row {
  display: flex;
  align-items: baseline;
  gap: 12px;
  width: 100%;
  text-align: left;
  font: inherit;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  border-radius: var(--r);
  background: var(--surface);
  color: var(--ink);
  cursor: pointer;
  margin-bottom: 5px;
}
.due__row:hover { border-color: var(--muted); border-left-color: var(--accent); }
.due__row--later { border-left-color: var(--line); }

.due__row-when {
  flex: none;
  width: 8.5em;
  font-family: var(--mono);
  font-size: 11.5px;
  font-variant-numeric: tabular-nums;
  color: var(--accent-ink);
}
.due__row-mid { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.due__row-task { font-size: 13.5px; font-weight: 600; line-height: 1.3; }
.due__row-machine { font-size: 11.5px; color: var(--muted); }

.due__more-btn {
  font: inherit;
  font-size: 12.5px;
  width: 100%;
  padding: 8px;
  margin-top: 4px;
  border: 1px dashed var(--line);
  border-radius: var(--r);
  background: none;
  color: var(--muted);
  cursor: pointer;
}
.due__more-btn:hover { color: var(--ink); border-color: var(--muted); }

/* ============================================================ done log === */

.donelog { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 5px; }

.donelog li {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--ok);
  border-left-width: 3px;
  border-radius: var(--r);
  background: var(--ok-bg);
}

.donelog__tick { flex: none; color: var(--ok); font-weight: 700; }
.donelog__mid { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1; }
.donelog__task { font-size: 13.5px; font-weight: 600; line-height: 1.3; }
.donelog__when { font-family: var(--mono); font-size: 11px; color: var(--ok); }

.donelog__undo {
  flex: none;
  font: inherit;
  font-size: 11.5px;
  padding: 3px 9px;
  border: 1px solid transparent;
  border-radius: var(--r);
  background: none;
  color: var(--ok);
  cursor: pointer;
}
.donelog__undo:hover { border-color: var(--ok); }

/* =============================================================== toast === */

.toast {
  position: fixed;
  left: 50%;
  bottom: calc(18px + env(safe-area-inset-bottom, 0px));
  transform: translateX(-50%);
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 11px;
  /* An explicit width, not a max: shrink-to-fit lets the action button squeeze
     the message into "Marked done at 99 / h." over three lines. */
  width: min(430px, calc(100vw - 28px));
  padding: 11px 14px;
  border: 1px solid var(--ok);
  border-radius: var(--r);
  background: var(--ok-bg);
  color: var(--ink);
  box-shadow: var(--shadow);
  font-size: 13.5px;
  animation: toast-in .18s ease;
}
.toast--warn { border-color: var(--warn); background: var(--warn-bg); }

.toast__tick { flex: none; color: var(--ok); font-weight: 700; }
.toast__text { flex: 1; min-width: 0; line-height: 1.45; }

.toast__action {
  flex: none;
  margin-left: auto;
  font: inherit;
  font-size: 12.5px;
  font-weight: 600;
  padding: 4px 10px;
  border: 1px solid currentColor;
  border-radius: var(--r);
  background: none;
  color: var(--ok);
  cursor: pointer;
}
.toast--warn .toast__action { color: var(--warn); }

@keyframes toast-in { from { opacity: 0; transform: translate(-50%, 8px); } }
@media (prefers-reduced-motion: reduce) { .toast { animation: none; } }

/* The tab bar owns the bottom of a phone screen, so the toast sits above it. */
@media (max-width: 899px) {
  .toast { bottom: calc(var(--tabs-h) + 14px + env(safe-area-inset-bottom, 0px)); }
}

/* ============================================================= calendar === */

.cal { display: flex; flex-direction: column; gap: 10px; }

.cal__bar { display: flex; align-items: center; gap: 10px; }
.cal__month { margin: 0; font-size: 15px; font-weight: 600; }

.cal__nav {
  font: inherit;
  font-size: 17px;
  line-height: 1;
  width: 32px; height: 32px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--surface);
  color: var(--ink);
  cursor: pointer;
}
.cal__nav:hover { border-color: var(--muted); }
.cal__nav:last-of-type { margin-right: auto; }

.cal__grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 3px;
}

.cal__dow {
  text-align: center;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .08em;
  color: var(--muted);
  padding-bottom: 2px;
}

.cal__day {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  aspect-ratio: 1;
  min-height: 38px;
  font: inherit;
  font-family: var(--mono);
  font-size: 12.5px;
  font-variant-numeric: tabular-nums;
  border: 1px solid transparent;
  border-radius: var(--r);
  background: var(--surface);
  color: var(--ink);
  cursor: pointer;
}
.cal__day:disabled { cursor: default; background: none; color: var(--muted); }
.cal__day--out { opacity: .38; }
.cal__day--today { border-color: var(--ink); font-weight: 700; }
.cal__day--has:not(:disabled):hover { border-color: var(--muted); }
.cal__day[aria-current="date"] { background: var(--surface-2); border-color: var(--accent); }

.cal__dots { display: flex; gap: 2px; }
.cal__dots span { width: 4px; height: 4px; border-radius: 50%; background: var(--accent); }
.cal__dots--now span { background: var(--warn); }

.cal__note { margin: 0; font-size: 12.5px; color: var(--muted); }

/* ========================================================== one machine === */

.mhead {
  flex: none;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 20px;
  border-bottom: 1px solid var(--line);
  background: var(--surface);
}

.mhead__back {
  flex: none;
  display: none;
  align-items: center;
  justify-content: center;
  width: 30px; height: 30px;
  font-size: 20px;
  line-height: 1;
  text-decoration: none;
  border: 1px solid var(--line);
  border-radius: var(--r);
  color: var(--ink);
}
.mhead__back:hover { border-color: var(--muted); }

.mhead__id { min-width: 0; flex: 1; }
/* Categories run long ("Backpack outdoor power equipment — 2-stroke gasoline")
   and wrapping to three lines pushes the whole document down a phone screen. */
.mhead__cat {
  margin: 0;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mhead__cat:empty { display: none; }
.mhead__name { margin: 0; font-size: 18px; line-height: 1.25; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.mhead__meter { display: flex; align-items: baseline; gap: 6px; flex: none; }
.mhead__hours { font-family: var(--mono); font-size: 24px; font-weight: 600; line-height: 1; font-variant-numeric: tabular-nums; }
.mhead__unit { font-family: var(--mono); font-size: 10px; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); }
.mhead .btn--log { margin-left: 0; }

.subtabs {
  flex: none;
  display: flex;
  gap: 2px;
  padding: 0 16px;
  border-bottom: 1px solid var(--line);
  background: var(--surface);
}

.subtab {
  display: flex;
  align-items: center;
  gap: 6px;
  font: inherit;
  font-size: 13.5px;
  font-weight: 600;
  padding: 11px 14px;
  border: 0;
  border-bottom: 2px solid transparent;
  background: none;
  color: var(--muted);
  cursor: pointer;
}
.subtab[aria-current="true"] { color: var(--ink); border-bottom-color: var(--accent); }
.subtab__dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }

.mbody { flex: 1; min-height: 0; min-width: 0; }

.mpane { display: none; height: 100%; min-height: 0; }
#view-machine[data-mtab="overview"] #mtab-overview { display: block; overflow-y: auto; }
#view-machine[data-mtab="binder"]   #mtab-binder   { display: grid; }
#view-machine[data-mtab="notes"]    #mtab-notes    { display: block; overflow-y: auto; }
#view-machine[data-mtab="chat"]     #mtab-chat     { display: flex; flex-direction: column; }

.mnote { font-size: 13.5px; color: var(--muted); border-left: 2px solid var(--accent); padding-left: 12px; }
.mnote summary { cursor: pointer; list-style-position: outside; }
.mnote__peek { font-style: italic; }
.mnote[open] .mnote__peek { display: none; }
.mnote[open] summary::after { content: "Hide"; font-family: var(--mono); font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; }
.mnote p { margin: 8px 0 0; line-height: 1.6; }
.mrate { margin: 0; font-size: 13.5px; color: var(--muted); }

.checklist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.checklist li {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 9px 0 9px 22px;
  border-top: 1px solid var(--line);
  position: relative;
}
.checklist li::before {
  content: "";
  position: absolute;
  left: 2px; top: 14px;
  width: 10px; height: 10px;
  border: 1px solid var(--muted);
  border-radius: 2px;
}
.checklist__task { font-size: 14px; font-weight: 600; line-height: 1.35; }

.checklist__more { font-size: 13px; color: var(--muted); }
.checklist__more summary {
  cursor: pointer;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .07em;
  text-transform: uppercase;
}
.checklist__more p { margin: 6px 0 0; line-height: 1.55; }

.hourlog { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.hourlog li {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 8px 0;
  border-top: 1px solid var(--line);
  font-size: 13px;
}
.hourlog__h { font-family: var(--mono); font-weight: 600; font-variant-numeric: tabular-nums; }
.hourlog__when { color: var(--muted); }
.hourlog__note { margin-left: auto; color: var(--muted); font-style: italic; text-align: right; }

.hourlog__x {
  margin-left: auto;
  flex: none;
  font: inherit;
  font-size: 15px;
  line-height: 1;
  padding: 2px 7px;
  border: 1px solid transparent;
  border-radius: var(--r);
  background: none;
  color: var(--muted);
  cursor: pointer;
}
.hourlog__x:hover { color: var(--warn); border-color: var(--warn); }
.hourlog__note + .hourlog__x { margin-left: 8px; }

.btn--danger { align-self: flex-start; color: var(--warn); border-color: var(--line); background: none; }
.btn--danger:hover:not(:disabled) { border-color: var(--warn); background: var(--warn-bg); }

/* ============================================================== binder === */

/* minmax(0, …) on both tracks, not a bare 1fr. A grid track's automatic minimum
   is its content's min-content width, so a long monospace file path or an
   unbreakable URL silently pushes the whole pane wider than the phone. */
/* Three rows: the bar, the requests strip, then the binder itself. The strip is
   an `auto` row, so when nothing is outstanding it collapses to nothing. */
.binder {
  grid-template-columns: minmax(0, 244px) minmax(0, 1fr);
  grid-template-rows: auto auto 1fr;
  min-height: 0;
}

.docbar {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 14px;
  border-bottom: 1px solid var(--line);
  background: var(--surface);
}

.docbar__toggle {
  display: flex;
  align-items: center;
  gap: 9px;
  flex: 1;
  min-width: 0;
  font: inherit;
  font-size: 13.5px;
  font-weight: 600;
  text-align: left;
  padding: 5px 8px;
  border: 1px solid transparent;
  border-radius: var(--r);
  background: none;
  color: var(--ink);
  cursor: pointer;
}
.docbar__toggle span:not(.docbar__icon) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.docbar__icon {
  flex: none;
  width: 13px; height: 9px;
  border-top: 2px solid var(--accent);
  border-bottom: 2px solid var(--accent);
  position: relative;
}
.docbar__icon::after {
  content: ""; position: absolute; left: 0; top: 3px;
  width: 100%; border-top: 2px solid var(--accent);
}

/* --- things asked for that are not documents yet -------------------------- */
/* A pending or empty request has nowhere to sit in a contents list, so it sits
   above one. Spans both columns so it is visible on a phone, where the contents
   list itself is hidden behind a toggle. */

.askstrip {
  grid-column: 1 / -1;
  grid-row: 2;
  display: flex;
  flex-direction: column;
  border-bottom: 1px solid var(--line);
  background: var(--surface);
}

.ask {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px 10px;
  padding: 9px 14px;
  font-size: 12.5px;
  border-left: 3px solid var(--accent);
}
.ask + .ask { border-top: 1px solid var(--line); }
.ask--empty { border-left-color: var(--info); background: var(--info-bg); }
.ask--error { border-left-color: var(--warn); background: var(--warn-bg); }

.ask__spin {
  flex: none;
  width: 11px; height: 11px;
  border: 2px solid var(--accent);
  border-right-color: transparent;
  border-radius: 50%;
  animation: spin 900ms linear infinite;
}
@media (prefers-reduced-motion: reduce) { .ask__spin { animation-duration: 3s; } }

.ask__req { font-weight: 600; min-width: 0; overflow-wrap: anywhere; }
.ask__state { color: var(--muted); min-width: 0; overflow-wrap: anywhere; }
.ask--error .ask__state { color: var(--warn); }

.ask__acts { display: flex; gap: 6px; margin-left: auto; }
.ask__act {
  font: inherit;
  font-size: 11.5px;
  padding: 3px 9px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--surface);
  color: var(--ink);
  cursor: pointer;
}
.ask__act:hover { background: var(--surface-2); }

.tree {
  grid-column: 1;
  grid-row: 3;
  display: flex;
  flex-direction: column;
  min-width: 0;
  gap: 2px;
  padding: 10px 8px 16px;
  overflow-y: auto;
  border-right: 1px solid var(--line);
  background: var(--surface);
}

.tree__group { border: 0; }

.tree__folder {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  list-style: none;
  padding: 7px 8px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--muted);
}
.tree__folder::-webkit-details-marker { display: none; }
.tree__folder::before {
  content: "";
  flex: none;
  width: 0; height: 0;
  border-left: 4px solid var(--muted);
  border-top: 3.5px solid transparent;
  border-bottom: 3.5px solid transparent;
  transition: transform .15s ease;
}
.tree__group[open] > .tree__folder::before { transform: rotate(90deg); }

.tree__count { margin-left: auto; font-size: 10px; padding: 1px 5px; border-radius: 999px; background: var(--surface-2); }

.tree__doc {
  display: flex;
  align-items: baseline;
  gap: 8px;
  width: 100%;
  text-align: left;
  font: inherit;
  font-size: 13.5px;
  line-height: 1.35;
  padding: 7px 9px 7px 12px;
  margin-left: 9px;
  border: 0;
  border-left: 2px solid var(--line);
  border-radius: 0 var(--r) var(--r) 0;
  background: none;
  color: var(--ink);
  cursor: pointer;
}
.tree__doc:hover { background: var(--surface-2); }
.tree__doc[aria-current="true"] { background: var(--surface-2); border-left-color: var(--accent); font-weight: 600; }
.tree__doc-title { min-width: 0; }

/* The parts list and the sources sit above the folders, so they read as
   destinations rather than as one more document inside one more folder. */
.tree__index { display: flex; flex-direction: column; gap: 4px; margin-bottom: 10px; }

.tree__doc--index {
  margin: 0;
  padding: 9px 10px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--paper);
  font-weight: 600;
}
.tree__doc--index[aria-current="true"] { border-color: var(--accent); background: var(--surface-2); }

.tree__vid {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--accent-ink);
  border: 1px solid var(--accent);
  border-radius: 999px;
  padding: 0 5px;
}

/* Organise-by. The documents do not change; how you reach them does. */
.treemode {
  display: flex;
  gap: 2px;
  padding: 3px;
  margin-bottom: 10px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--paper);
}

.treemode__btn {
  flex: 1;
  font: inherit;
  font-size: 11.5px;
  font-weight: 600;
  padding: 5px 4px;
  border: 0;
  border-radius: 2px;
  background: none;
  color: var(--muted);
  cursor: pointer;
  white-space: nowrap;
}
.treemode__btn:hover { color: var(--ink); }
.treemode__btn[aria-pressed="true"] { background: var(--surface-2); color: var(--ink); box-shadow: inset 0 -2px 0 var(--accent); }

/* ================================================================ parts === */

.parts { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }

.parts__row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 14px;
  padding: 12px 0;
  border-top: 1px solid var(--line);
}
.parts__main { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.parts__name { font-size: 14.5px; font-weight: 600; line-height: 1.35; }
.parts__used { font-size: 11.5px; color: var(--muted); }

.parts__right { display: flex; align-items: center; gap: 8px; flex: none; }
.parts__pn {
  font-family: var(--mono);
  font-size: 13.5px;
  letter-spacing: .03em;
  padding: 2px 8px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--surface-2);
  white-space: nowrap;
}
.parts__alt { flex-basis: 100%; margin: 0; font-size: 11.5px; color: var(--muted); font-style: italic; }

/* ================================================================ watch === */
/* Watching someone do the job is what people were opening YouTube for. It gets
   its own block rather than being entry four of a list at the bottom. */

.watch {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 14px;
  border: 1px solid var(--accent);
  border-radius: var(--r);
  background: var(--surface);
}
.watch .facts__h { padding-top: 0; }

.watch__row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 10px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--paper);
  text-decoration: none;
  color: var(--ink);
}
.watch__row:hover { border-color: var(--accent); }

.watch__play {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px; height: 30px;
  border-radius: 50%;
  background: var(--accent);
  color: #17191d;
  font-size: 11px;
}
.watch__mid { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.watch__title { font-size: 14px; font-weight: 600; line-height: 1.35; }
.watch__note { font-size: 12px; color: var(--muted); }

.sources__kind {
  margin-left: 8px;
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0 5px;
}
.sources__note { display: block; font-size: 11.5px; color: var(--muted); font-style: italic; }

.tree__flag {
  margin-left: auto;
  flex: none;
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--warn);
  border: 1px dashed var(--warn);
  border-radius: 999px;
  padding: 0 5px;
}

/* A document that arrived because someone asked for it. Marked, not demoted —
   it went through the same sieve as everything else in here. */
.tree__added {
  margin-left: auto;
  flex: none;
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ok);
  border: 1px solid var(--ok);
  border-radius: 999px;
  padding: 0 5px;
}
/* Both badges on one row would push the title out; the flag is the louder one. */
.tree__added + .tree__flag { margin-left: 6px; }

/* ============================================================ document === */

.doc { grid-column: 2; grid-row: 3; min-width: 0; overflow-y: auto; padding: 32px 40px 80px; }

.doc__inner { max-width: min(68ch, 100%); min-width: 0; display: flex; flex-direction: column; gap: 18px; }

.doc__title {
  margin: 0;
  font-family: var(--serif);
  font-size: 31px;
  line-height: 1.15;
  text-wrap: balance;
  letter-spacing: -.01em;
}
.doc__path { margin: 0; font-family: var(--mono); font-size: 11.5px; color: var(--muted); letter-spacing: .04em; overflow-wrap: anywhere; }

.doc__from { margin: -8px 0 0; display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 8px; }
.doc__from-tag {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ok);
  border: 1px solid var(--ok);
  border-radius: 999px;
  padding: 1px 6px;
}
.doc__from-req { font-size: 12.5px; color: var(--muted); min-width: 0; overflow-wrap: anywhere; }
.doc__lede { margin: 0; font-size: 14.5px; color: var(--muted); }

.prose { font-family: var(--serif); font-size: 16.5px; line-height: 1.68; display: flex; flex-direction: column; gap: 14px; }
.prose p, .prose ol, .prose ul { margin: 0; }
.prose ol, .prose ul { padding-left: 1.3em; display: flex; flex-direction: column; gap: 7px; }
.prose strong { font-weight: 700; }
.prose em { font-style: italic; }
.prose code { font-family: var(--mono); font-size: .86em; background: var(--surface-2); padding: 1px 5px; border-radius: var(--r); }

/* Headings and quotes inside a generated document. The agent writes Markdown
   bodies, so these have to exist or they render as literal ## and >. */
.prose__h { margin: 8px 0 -4px; font-family: var(--sans); font-weight: 600; line-height: 1.3; text-wrap: balance; }
h3.prose__h { font-size: 17px; }
h4.prose__h { font-size: 15px; color: var(--muted); letter-spacing: .01em; }
h5.prose__h { font-size: 14px; color: var(--muted); }

.prose__quote {
  margin: 0;
  padding: 2px 0 2px 14px;
  border-left: 2px solid var(--accent);
  color: var(--muted);
  font-size: 15.5px;
}

/* ---- sections. A 600-word document is split at its own ## headings so you
   land on the job rather than on an essay. Closed sections stay visible as
   headings, so nothing is hidden — it is just not all shouting at once. */

.prose--sectioned { gap: 4px; }

.sec { border-top: 1px solid var(--line); padding: 2px 0; }
.sec:first-of-type { border-top: 0; }

.sec__h {
  display: flex;
  align-items: center;
  gap: 9px;
  cursor: pointer;
  list-style: none;
  padding: 10px 0;
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 600;
}
.sec__h::-webkit-details-marker { display: none; }
.sec__h::before {
  content: "";
  flex: none;
  width: 0; height: 0;
  border-left: 5px solid var(--muted);
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
  transition: transform .15s ease;
}
.sec[open] > .sec__h::before { transform: rotate(90deg); }
.sec[open] > .sec__h { color: var(--ink); }
.sec:not([open]) > .sec__h { color: var(--muted); }
.sec > .prose { padding: 0 0 14px 14px; }

@media (prefers-reduced-motion: reduce) { .sec__h::before { transition: none; } }

/* ---- steps. The action is the line; the reason it matters folds away. Nine
   short instructions beat nine paragraphs when you are holding a wrench. */

.prose ol.steps { gap: 11px; counter-reset: step; list-style: none; padding-left: 0; }

.prose ol.steps > li {
  position: relative;
  padding-left: 34px;
  counter-increment: step;
}
.prose ol.steps > li::before {
  content: counter(step);
  position: absolute;
  left: 0; top: 1px;
  width: 23px; height: 23px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--surface-2);
  border: 1px solid var(--line);
  font-family: var(--mono);
  font-size: 11.5px;
  font-weight: 600;
  color: var(--muted);
}

.step__lead { display: block; }

.step__why { margin-top: 3px; font-family: var(--sans); font-size: 13.5px; color: var(--muted); }
.step__why summary {
  cursor: pointer;
  display: inline-block;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--muted);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 1px 8px;
}
.step__why summary::-webkit-details-marker { display: none; }
.step__why summary::marker { content: ""; }
.step__why[open] summary { border-color: var(--accent); color: var(--accent-ink); }
.step__why p { margin: 7px 0 0; line-height: 1.55; }

.caution {
  display: flex;
  gap: 11px;
  padding: 12px 14px;
  background: var(--warn-bg);
  border: 1px solid var(--warn);
  border-radius: var(--r);
  font-size: 14px;
  line-height: 1.5;
}
.caution__label {
  flex: none;
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .1em;
  color: var(--warn);
  padding-top: 2px;
}

.caution__body { min-width: 0; }
.caution__more { margin-top: 6px; }
.caution__more summary {
  cursor: pointer;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--warn);
}
.caution__more p { margin: 7px 0 0; }

/* ================================================================ facts === */

.facts { display: flex; flex-direction: column; gap: 0; border-top: 1px solid var(--line); }

.facts__h {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--muted);
  padding: 14px 0 8px;
  margin: 0;
}

.fact { display: grid; grid-template-columns: 1fr auto; gap: 4px 14px; padding: 11px 0; border-top: 1px solid var(--line); }

.fact__label { font-size: 13px; color: var(--muted); grid-column: 1; }

.fact__value { grid-column: 1; font-family: var(--mono); font-size: 14.5px; font-variant-numeric: tabular-nums; line-height: 1.4; }

.fact__pn {
  display: inline-block;
  margin-left: 8px;
  padding: 1px 6px;
  border-radius: var(--r);
  background: var(--surface-2);
  border: 1px solid var(--line);
  font-size: 13px;
  letter-spacing: .03em;
}

.fact__note {
  grid-column: 1 / -1;
  font-size: 13px;
  line-height: 1.5;
  color: var(--muted);
  border-left: 2px solid var(--line);
  padding-left: 10px;
}
.fact--conflicting .fact__note { border-left-color: var(--warn); }
.fact--unverified .fact__note { border-left-color: var(--info); }

.fact__meta { grid-column: 2; grid-row: 1 / span 2; display: flex; flex-direction: column; align-items: flex-end; gap: 5px; }

.tag {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 3px 7px;
  border-radius: 999px;
  white-space: nowrap;
}
.tag--verified    { color: var(--ok);   background: var(--ok-bg);   border: 1px solid var(--ok); }
.tag--community   { color: var(--info); background: var(--info-bg); border: 1px solid var(--line); }
.tag--conflicting { color: var(--warn); background: var(--warn-bg); border: 1px solid var(--warn); }
.tag--unverified  { color: var(--info); background: transparent;    border: 1px dashed var(--muted); }

.fact__src { font-size: 11.5px; color: var(--muted); max-width: 22ch; text-align: right; }
.fact__src a { color: var(--muted); }

.sources { display: flex; flex-direction: column; gap: 7px; border-top: 1px solid var(--line); padding-top: 14px; }
.sources ol { margin: 0; padding-left: 1.3em; display: flex; flex-direction: column; gap: 6px; font-size: 13px; }

/* ================================================ manuals & videos page === */

.links { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }

.links__row { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; padding: 11px 0; border-top: 1px solid var(--line); }
.links__main { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.links__title { font-size: 14.5px; }
.links__host { font-family: var(--mono); font-size: 11.5px; color: var(--muted); }

.links__kind {
  flex: none;
  font-family: var(--mono);
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 3px 7px;
  border-radius: 999px;
  border: 1px solid var(--line);
  color: var(--muted);
}
.links__kind--manual { color: var(--ok); border-color: var(--ok); background: var(--ok-bg); }
.links__kind--video { color: var(--accent-ink); border-color: var(--accent); }

.links__cited { flex-basis: 100%; margin: 0; font-size: 11.5px; color: var(--muted); }

/* ================================================================= chat === */

.chat { background: var(--surface); }

.transcript {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 20px 18px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.hello { color: var(--muted); display: flex; flex-direction: column; gap: 9px; max-width: 56ch; }
.hello p { margin: 0; }
.hello__sub { font-size: 13.5px; }

.msg { display: flex; flex-direction: column; gap: 4px; max-width: 68ch; }

.msg__who {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
}

.msg__body { display: flex; flex-direction: column; gap: 8px; }
.msg__body p { margin: 0; }

.msg--user .msg__body {
  background: var(--surface-2);
  border-radius: var(--r);
  padding: 9px 12px;
  border-left: 2px solid var(--accent);
}
.msg--assistant .msg__body { font-size: 15px; line-height: 1.6; }

/* System lines are the app talking, not the agent — quieter, and set apart. */
.msg--system {
  flex-direction: row;
  gap: 9px;
  align-items: baseline;
  font-size: 13px;
  color: var(--muted);
  padding: 7px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.msg--system .msg__mark { font-family: var(--mono); color: var(--accent); }
.msg--system .msg__body p { margin: 0; }

.typing { display: flex; gap: 4px; padding: 4px 0; }
.typing span { width: 5px; height: 5px; border-radius: 50%; background: var(--muted); animation: blink 1.3s infinite ease-in-out; }
.typing span:nth-child(2) { animation-delay: .18s; }
.typing span:nth-child(3) { animation-delay: .36s; }
@keyframes blink { 0%, 80%, 100% { opacity: .25; } 40% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .typing span { animation: none; opacity: .5; } }

.composer {
  flex: none;
  display: flex;
  gap: 8px;
  align-items: flex-end;
  padding: 12px 14px calc(12px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--line);
  background: var(--paper);
}
.composer textarea { flex: 1; resize: none; min-height: 46px; max-height: 140px; line-height: 1.4; }
.composer .btn { flex: none; }

/* ============================================================ controls === */

textarea, input[type="number"], input[type="text"], input[type="email"], input[type="password"], select {
  font: inherit;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 9px 10px;
  width: 100%;
}
textarea { resize: vertical; }
textarea::placeholder, input::placeholder { color: var(--muted); }

.btn {
  font: inherit;
  font-size: 13px;
  padding: 7px 13px;
  border-radius: var(--r);
  border: 1px solid var(--line);
  background: var(--surface-2);
  color: var(--ink);
  cursor: pointer;
  transition: background .12s ease, border-color .12s ease;
  white-space: nowrap;
}
.btn:hover:not(:disabled) { border-color: var(--muted); }
.btn:disabled { opacity: .45; cursor: not-allowed; }

.btn--primary { background: var(--accent); border-color: var(--accent); color: #17191d; font-weight: 600; }
.btn--primary:hover:not(:disabled) { filter: brightness(1.06); }

.btn--wide { width: 100%; margin-top: auto; }

.btn--ghost { background: none; border-color: transparent; color: var(--muted); font-size: 12.5px; }
.btn--ghost:hover:not(:disabled) { color: var(--ink); border-color: var(--line); }

.field { display: flex; flex-direction: column; gap: 5px; }
.field > span {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--muted);
}

/* ========================================================== log hours === */

.sheet { border: 0; padding: 0; background: transparent; max-width: min(400px, calc(100vw - 32px)); }
.sheet::backdrop { background: rgba(10, 11, 13, .55); }

.sheet__card {
  display: flex;
  flex-direction: column;
  gap: 13px;
  padding: 24px 22px 20px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r);
  box-shadow: var(--shadow);
}
.sheet__h { margin: 0; font-size: 18px; }
.sheet__sub { margin: -6px 0 4px; font-size: 13px; color: var(--muted); }
.sheet__ctx {
  margin: 0;
  font-size: 12.5px;
  color: var(--muted);
  padding: 7px 10px;
  border-left: 2px solid var(--accent);
  background: var(--paper);
  overflow-wrap: anywhere;
}
.sheet__actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 4px; }

/* ============================================================= sign in === */

.gate { position: fixed; inset: 0; display: grid; place-items: center; padding: 24px; background: var(--paper); z-index: 10; }

.gate__card {
  display: flex;
  flex-direction: column;
  gap: 14px;
  width: 100%;
  max-width: 360px;
  padding: 30px 28px 26px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r);
  box-shadow: var(--shadow);
}

.brand--lg .brand__mark { width: 17px; height: 17px; }
.brand--lg .brand__name { font-size: 17px; }

.gate__tag { margin: -6px 0 6px; font-size: 13.5px; color: var(--muted); padding-bottom: 12px; border-bottom: 1px solid var(--line); }

.gate__err { margin: 0; font-size: 13px; color: var(--warn); min-height: 1.2em; }
.gate__err:empty { min-height: 0; }
.gate__note { margin: 0; font-size: 12.5px; color: var(--muted); }
.gate__note:empty { display: none; }

/* ========================================================== responsive === */

/* Below this the nav rail costs more than it gives, so it becomes a bottom tab
   bar and each screen gets the full width. */
@media (max-width: 899px) {
  #app {
    grid-template-areas: "top" "main" "nav";
    grid-template-columns: 1fr;
    grid-template-rows: var(--topbar-h) 1fr auto;
  }

  .tabs {
    flex-direction: row;
    gap: 0;
    padding: 0;
    border-right: 0;
    border-top: 1px solid var(--line);
  }

  .tab {
    flex: 1;
    justify-content: center;
    border-radius: 0;
    padding: 11px 4px calc(11px + env(safe-area-inset-bottom, 0px));
    font-size: 13px;
  }
  .tab[aria-current="page"] { background: none; box-shadow: inset 0 2px 0 var(--accent); }
  .tab__badge { margin-left: 0; }

  .wrap { padding: 20px 16px 40px; gap: 22px; }
  .view__h { font-size: 21px; }

  /* Back out of the drill-down — on desktop the nav rail already does this. */
  .mhead { display: flex; padding: 12px 14px; gap: 10px; }
  .mhead__back { display: flex; }
  .mhead__name { font-size: 16px; }
  .mhead__meter { display: none; }

  .subtabs { padding: 0 8px; }
  .subtab { flex: 1; justify-content: center; padding: 11px 6px; }

  /* The contents list drops in below the bar rather than over it, so the toggle
     that closes it is never covered. */
  .binder { grid-template-columns: minmax(0, 1fr); }
  /* Two ghost buttons plus the contents toggle is too much for a phone bar. */
  .docbar__long { display: none; }
  .tree {
    grid-column: 1;
    max-height: 60vh;
    border-right: 0;
    border-bottom: 1px solid var(--line);
    display: none;
  }
  .tree.is-open { display: flex; }
  .doc { grid-column: 1; padding: 22px 16px 60px; }

  .topbar { padding: 0 14px; gap: 10px; }
  .topbar .pill { display: none; }
  .brand__name { display: none; }

  .stats { gap: 8px; }
  .stat { padding: 12px; }
  .stat__n { font-size: 25px; }
  .stat__label { font-size: 11.5px; }
}

@media (max-width: 560px) {
  .doc__title { font-size: 25px; }
  .fact { grid-template-columns: 1fr; }
  .fact__meta { grid-column: 1; grid-row: auto; flex-direction: row; align-items: center; }
  .fact__src { text-align: left; max-width: none; }
  .eqgrid { grid-template-columns: 1fr; }
  .cal__day { min-height: 34px; font-size: 11.5px; }
  .hourlog__note { flex-basis: 100%; margin-left: 0; text-align: left; }
  .btn--log { padding: 7px 10px; }
}

/* ============================================================= account === */

.account { position: relative; flex: none; }

.account__btn {
  display: flex;
  align-items: center;
  gap: 8px;
  font: inherit;
  font-size: 13px;
  padding: 5px 9px 5px 5px;
  border: 1px solid transparent;
  border-radius: 999px;
  background: none;
  color: var(--ink);
  cursor: pointer;
}
.account__btn:hover, .account__btn[aria-expanded="true"] { border-color: var(--line); background: var(--surface-2); }

.account__avatar {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px; height: 26px;
  border-radius: 50%;
  background: var(--steel);
  color: var(--surface);
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 700;
}
.account__name { max-width: 12ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.account__menu {
  position: absolute;
  right: 0;
  top: calc(100% + 7px);
  z-index: 30;
  min-width: 210px;
  display: flex;
  flex-direction: column;
  padding: 6px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--surface);
  box-shadow: var(--shadow);
}

.account__email {
  margin: 0;
  padding: 7px 10px 9px;
  border-bottom: 1px solid var(--line);
  font-size: 12px;
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
}

.account__item {
  font: inherit;
  font-size: 13.5px;
  text-align: left;
  text-decoration: none;
  padding: 9px 10px;
  margin-top: 2px;
  border: 0;
  border-radius: var(--r);
  background: none;
  color: var(--ink);
  cursor: pointer;
}
.account__item:hover { background: var(--surface-2); color: var(--ink); }

/* ============================================================ settings === */

.card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--surface);
}
.card--danger { border-color: var(--warn); }

.card__h { margin: 0; font-size: 16px; }
.card__h3 { margin: 0; font-size: 13.5px; }
.card__sub { margin: -6px 0 0; font-size: 13px; color: var(--muted); max-width: 62ch; }
.card__row { display: flex; align-items: center; gap: 12px; }
.card__row .btn { margin-left: auto; }

.form { display: flex; flex-direction: column; gap: 12px; }
.form__actions { display: flex; gap: 8px; }
.field__hint { font-size: 11.5px; color: var(--muted); font-style: normal; }

/* ============================================================= billing === */

.plan__head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 4px; }
.plan__name { font-size: 19px; font-weight: 650; }

.plan__state {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .07em;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: 999px;
}
.plan__state--ok   { color: var(--ok);   background: var(--ok-bg); }
.plan__state--warn { color: var(--warn); background: var(--warn-bg); }

.meters { display: flex; flex-direction: column; gap: 12px; margin: 16px 0 4px; }

.meter { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; align-items: baseline; }
.meter__label { font-size: 13.5px; }
.meter__n { font-family: var(--mono); font-size: 12px; color: var(--muted); }
.meter__n--full { color: var(--warn); }

.meter__track {
  grid-column: 1 / -1;
  height: 5px;
  border-radius: 999px;
  background: var(--surface-2);
  overflow: hidden;
}
.meter__bar { height: 100%; background: var(--accent); border-radius: 999px; }
.meter__bar--full { background: var(--warn); }

.plan__acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.plan__acts .btn:disabled { opacity: .5; cursor: not-allowed; }

.segmented {
  display: inline-flex;
  gap: 2px;
  padding: 3px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--paper);
  align-self: flex-start;
  flex-wrap: wrap;
}
.segmented__btn {
  font: inherit;
  font-size: 12.5px;
  font-weight: 600;
  padding: 6px 13px;
  border: 0;
  border-radius: 2px;
  background: none;
  color: var(--muted);
  cursor: pointer;
}
.segmented__btn:hover { color: var(--ink); }
.segmented__btn[aria-pressed="true"] { background: var(--surface-2); color: var(--ink); box-shadow: inset 0 -2px 0 var(--accent); }

.invites { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.invite {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 9px 11px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--paper);
}
/* The corpus list reuses the invite row, but its label is a machine name rather
   than a short code — long enough that whether the action fits beside it varies
   row to row. Giving the label its own line makes every row line up the same
   way instead of wrapping only when the name happens to be long. */
.invites--corpus .invite__code { flex-basis: 100%; letter-spacing: 0; line-height: 1.35; }

.invite--used { opacity: .6; }
.invite__code { font-family: var(--mono); font-size: 13.5px; letter-spacing: .06em; font-weight: 600; }
.invite__meta { font-size: 11.5px; color: var(--muted); margin-right: auto; }

/* =============================================================== notes === */

.notes__intro { display: flex; flex-direction: column; gap: 10px; }

.note-form {
  display: flex;
  flex-direction: column;
  gap: 9px;
  padding: 14px;
  border: 1px solid var(--line);
  border-left: 3px solid var(--steel);
  border-radius: var(--r);
  background: var(--surface);
}
.note-form__row { display: flex; gap: 8px; align-items: center; }
.note-form__row select { flex: 1; min-width: 0; }
.note-form__row .btn { flex: none; }

.notes { display: flex; flex-direction: column; gap: 9px; }

.note {
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 13px 14px;
  border: 1px solid var(--line);
  border-left: 3px solid var(--steel);
  border-radius: var(--r);
  background: var(--surface);
}
.note__head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.note__when { font-family: var(--mono); font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.note__pin {
  font-size: 11px;
  color: var(--steel);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 1px 8px;
}
.note__body { margin: 0; white-space: pre-wrap; line-height: 1.6; }

.note__actions { display: flex; gap: 7px; }
.note__act {
  font: inherit;
  font-size: 12px;
  padding: 4px 10px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--paper);
  color: var(--ink);
  cursor: pointer;
}
.note__act:hover { border-color: var(--muted); }
.note__act--danger:hover { border-color: var(--warn); color: var(--warn); }

.note__edit { display: flex; flex-direction: column; gap: 9px; }

.subtab__count {
  min-width: 17px;
  text-align: center;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 700;
}

/* The owner's note, shown on the document it was pinned to. Deliberately not
   styled like the researched content — it is the one thing on the page the
   agent did not write and can never change. */
.yournote {
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 13px 15px;
  border: 1px solid var(--steel);
  border-left: 3px solid var(--steel);
  border-radius: var(--r);
  background: var(--surface);
}
.yournote__h {
  margin: 0;
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--steel);
}
.yournote__body { margin: 0; white-space: pre-wrap; line-height: 1.6; font-size: 14.5px; }

/* -------------------------------------------------------------- gate bits */

.gate__switch { margin: 0; text-align: center; }

.linkish {
  font: inherit;
  font-size: 13px;
  padding: 4px;
  border: 0;
  background: none;
  color: var(--accent-ink);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.linkish:hover { color: var(--ink); }

@media (max-width: 899px) {
  .account__name { display: none; }
  .card { padding: 16px; }
}

/* What the manufacturer actually said, when the interval is a conversion.
   "every 10 h" alone is putting words in their mouth. */
.due__trigger, .checklist__trigger {
  margin: 0;
  font-size: 11.5px;
  color: var(--steel);
  font-style: italic;
}
.checklist__trigger { display: block; }