/* LifeOps owner's guide — shared styles for every page in guide/.
   Grounded in the product palette: warm paper, sage, terracotta. Both themes.
   These pages are opened directly (file://), so everything is dependency-free. */

:root {
  --paper:        #FAF8F5;
  --paper-raised: #FFFFFF;
  --ink:          #2B2A26;
  --ink-soft:     #5E5A52;
  --ink-faint:    #8A857A;
  --rule:         #E7E2D8;
  --sage:         #6E7F66;
  --sage-deep:    #566450;
  --terracotta:   #B85450;
  --terracotta-soft: #f3e4e1;
  --sage-soft:    #eaeee6;
  --shadow:       0 1px 2px rgba(43,42,38,.04), 0 8px 24px rgba(43,42,38,.05);
}
@media (prefers-color-scheme: dark) {
  :root {
    --paper:#1A1917; --paper-raised:#232220; --ink:#ECE8E1; --ink-soft:#B7B1A6;
    --ink-faint:#857F73; --rule:#34322E; --sage:#9DB093; --sage-deep:#B7C7AE;
    --terracotta:#D98A85; --terracotta-soft:#362a28; --sage-soft:#24291f;
    --shadow:0 1px 2px rgba(0,0,0,.2), 0 10px 30px rgba(0,0,0,.28);
  }
}
:root[data-theme="light"] {
  --paper:#FAF8F5; --paper-raised:#FFFFFF; --ink:#2B2A26; --ink-soft:#5E5A52;
  --ink-faint:#8A857A; --rule:#E7E2D8; --sage:#6E7F66; --sage-deep:#566450;
  --terracotta:#B85450; --terracotta-soft:#f3e4e1; --sage-soft:#eaeee6;
  --shadow:0 1px 2px rgba(43,42,38,.04), 0 8px 24px rgba(43,42,38,.05);
}
:root[data-theme="dark"] {
  --paper:#1A1917; --paper-raised:#232220; --ink:#ECE8E1; --ink-soft:#B7B1A6;
  --ink-faint:#857F73; --rule:#34322E; --sage:#9DB093; --sage-deep:#B7C7AE;
  --terracotta:#D98A85; --terracotta-soft:#362a28; --sage-soft:#24291f;
  --shadow:0 1px 2px rgba(0,0,0,.2), 0 10px 30px rgba(0,0,0,.28);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 17px; line-height: 1.65; -webkit-font-smoothing: antialiased;
}
.serif { font-family: "Iowan Old Style", "Charter", Georgia, "Times New Roman", serif; }
.wrap { max-width: 720px; margin: 0 auto; padding: 0 22px 96px; }

/* Two-column shell: sticky TOC sidebar + readable content column */
.layout {
  display: grid; grid-template-columns: 244px minmax(0, 720px);
  gap: 56px; max-width: 1044px; margin: 0 auto; padding: 0 24px 96px;
  align-items: start;
}
aside.sidebar {
  position: sticky; top: 0; align-self: start;
  max-height: 100vh; overflow-y: auto; padding: 40px 4px 40px 0; font-size: 14px;
}
.sidebar .brand {
  display: block; text-decoration: none; margin: 0 0 24px; color: var(--ink);
  font-family: "Iowan Old Style", Charter, Georgia, serif;
  font-size: 1.15rem; font-weight: 600; line-height: 1.1;
}
.sidebar .brand:hover { color: var(--sage-deep); }
.sidebar .brand .brand-sub {
  display: block; font-family: system-ui, sans-serif; font-size: 11px;
  letter-spacing: .14em; text-transform: uppercase; color: var(--ink-faint);
  font-weight: 600; margin-top: 5px;
}

/* Index catalog: one card per document, generated from the manifest */
.catalog { display: grid; gap: 16px; margin-top: 8px; }
.doc-card {
  display: block; text-decoration: none; color: inherit;
  background: var(--paper-raised); border: 1px solid var(--rule);
  border-radius: 14px; padding: 24px 26px; box-shadow: var(--shadow);
  transition: border-color .15s ease;
}
.doc-card:hover { border-color: var(--sage); }
.doc-card h3 {
  font-family: "Iowan Old Style", Charter, Georgia, serif;
  font-size: 1.3rem; font-weight: 600; letter-spacing: -.01em;
  margin: 0 0 8px; color: var(--ink);
}
.doc-card p { margin: 0 0 14px; color: var(--ink-soft); font-size: .98rem; }
.doc-card .open { font-size: .85rem; font-weight: 600; color: var(--sage-deep); letter-spacing: .02em; }
.sidebar .side-nav { display: flex; flex-direction: column; gap: 2px; }
.sidebar .doc-link {
  color: var(--ink); text-decoration: none; font-weight: 600;
  padding: 7px 12px; border-radius: 8px; display: block;
}
.sidebar .doc-link:hover { background: var(--sage-soft); }
.sidebar .doc-link[aria-current="page"] { color: var(--sage-deep); }
.sidebar .toc {
  display: flex; flex-direction: column; gap: 1px;
  margin: 4px 0 16px; padding-left: 11px; border-left: 1px solid var(--rule);
}
.sidebar .toc a {
  color: var(--ink-soft); text-decoration: none; font-size: 13.5px; line-height: 1.35;
  padding: 5px 12px; border-radius: 0 6px 6px 0; border-left: 2px solid transparent; margin-left: -12px;
}
.sidebar .toc a:hover { color: var(--sage-deep); }
/* A section that named a parent: indented under it, one step quieter. Ten API
   families as siblings buried every other section on the backend page. */
.sidebar .toc a.sub { padding-left: 26px; font-size: 13px; color: var(--ink-soft); opacity: .85; }
.sidebar .toc a.sub:hover { opacity: 1; }
.sidebar .toc a.active {
  color: var(--sage-deep); font-weight: 600;
  border-left-color: var(--sage); background: var(--sage-soft);
}
/* Sub-pages: separate documents you navigate to. Page-weight links, indented
   under the parent, no anchor rule — so they don't read like an in-page TOC. */
.sidebar .child-group {
  display: flex; flex-direction: column; gap: 1px; margin: 4px 0 8px 12px;
}
.sidebar .child-link {
  color: var(--ink); text-decoration: none; font-weight: 600; font-size: 14px;
  padding: 7px 12px; border-radius: 8px;
}
.sidebar .child-link:hover { background: var(--sage-soft); color: var(--sage-deep); }
.sidebar .child-link[aria-current="page"] { color: var(--sage-deep); }

/* "On this page": the current page's in-page jumps, clearly labelled and light. */
.sidebar .nav-cap {
  font-size: 10.5px; letter-spacing: .11em; text-transform: uppercase;
  color: var(--ink-faint); font-weight: 600; margin: 8px 0 3px 13px;
}
.sidebar .on-page { margin: 2px 0 8px; }
.sidebar .on-page .toc { margin: 2px 0 6px; }
.sidebar .child-group .on-page { margin-left: 6px; }
.content { min-width: 0; }
.content header.mast { padding-top: 40px; }
/* Prose links pick up the accent, not browser blue (cards keep their own style) */
.content a:not(.doc-card) {
  color: var(--sage-deep); text-decoration: underline;
  text-underline-offset: 2px; text-decoration-thickness: 1px;
}
.content a:not(.doc-card):hover { color: var(--sage); }
[id] { scroll-margin-top: 16px; }

@media (max-width: 900px) {
  .layout { grid-template-columns: 1fr; gap: 0; }
  aside.sidebar {
    position: static; max-height: none; overflow: visible;
    padding: 22px 0 6px; border-bottom: 1px solid var(--rule); margin-bottom: 6px;
    /* A grid item is min-content wide by default, so the scrolling row of
       section links inside would push the whole page sideways. */
    min-width: 0;
  }
  .sidebar .side-nav { flex-direction: row; flex-wrap: wrap; gap: 6px 4px; align-items: center; }
  .sidebar .brand { margin-bottom: 12px; width: 100%; }
  /* A phone kept no way to move inside a page, so the two longest guides were
     seventeen screens of thumb-scrolling. The current page's sections become a
     row of pills you can swipe; the other documents' section lists stay out. */
  .sidebar .toc { display: none; }
  .sidebar .on-page { display: block; margin: 8px 0 2px; flex: 0 0 100%; min-width: 0; max-width: 100%; }
  .sidebar .on-page .nav-cap { margin: 0 0 6px; }
  .sidebar .on-page .toc {
    display: flex; flex-direction: row; flex-wrap: nowrap; overflow-x: auto;
    gap: 6px; margin: 0; padding: 0 0 2px; border-left: 0; max-width: 100%;
    -webkit-overflow-scrolling: touch; scrollbar-width: none;
  }
  .sidebar .on-page .toc::-webkit-scrollbar { display: none; }
  .sidebar .on-page .toc a {
    white-space: nowrap; margin-left: 0; padding: 7px 13px;
    border: 1px solid var(--rule); border-radius: 999px; font-size: 13px;
  }
  .sidebar .on-page .toc a.active {
    border-color: var(--sage); background: var(--sage-soft);
  }
  .sidebar .child-group { flex-direction: row; flex-wrap: wrap; margin: 0; gap: 6px 4px; }
  .content header.mast { padding-top: 26px; border-top: 0; }
}

/* Sibling nav across guide pages */
nav.guide-nav {
  max-width: 720px; margin: 0 auto; padding: 20px 22px 0;
  display: flex; gap: 20px; align-items: baseline; flex-wrap: wrap;
  font-size: 13px; letter-spacing: .02em;
}
nav.guide-nav a { color: var(--ink-faint); text-decoration: none; }
nav.guide-nav a[aria-current="page"] { color: var(--sage-deep); font-weight: 600; }
nav.guide-nav a:hover { color: var(--sage-deep); }

header.mast { padding: 44px 0 40px; border-bottom: 1px solid var(--rule); }
.eyebrow {
  font-size: 12px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--sage-deep); font-weight: 600; margin: 0 0 18px;
}
h1 {
  font-family: "Iowan Old Style", "Charter", Georgia, serif;
  font-weight: 600; font-size: clamp(2.1rem, 6vw, 3rem); line-height: 1.08;
  letter-spacing: -.01em; margin: 0 0 18px; text-wrap: balance;
}
.standfirst { font-size: 1.18rem; color: var(--ink-soft); margin: 0; max-width: 34em; }

section { padding: 44px 0; border-bottom: 1px solid var(--rule); }
section:last-of-type { border-bottom: 0; }
/* A sub-section sits INSIDE its subject: tighter, and no rule of its own, so
   the page breaks where the subject changes rather than ten times inside one. */
section[data-toc-parent] { padding: 26px 0 0; border-bottom: 0; }
section[data-toc-parent] + section:not([data-toc-parent]) { padding-top: 44px; border-top: 1px solid var(--rule); }
h2 {
  font-family: "Iowan Old Style", "Charter", Georgia, serif;
  font-weight: 600; font-size: 1.5rem; letter-spacing: -.01em;
  margin: 0 0 6px; text-wrap: balance;
}
h2 .n {
  font-family: system-ui, sans-serif; font-size: .8rem; font-weight: 600;
  color: var(--sage-deep); letter-spacing: .1em; display: block; margin-bottom: 10px;
}
/* A sub-section inside a section: same voice as h2, one step down, and it does
   not restart the top rule — an API family is part of the API, not a new
   subject. */
h3 {
  font-family: "Iowan Old Style", "Charter", Georgia, serif;
  font-weight: 600; font-size: 1.2rem; letter-spacing: -.01em;
  margin: 0 0 6px; text-wrap: balance;
}
h3 .n {
  font-family: system-ui, sans-serif; font-size: .75rem; font-weight: 600;
  color: var(--sage-deep); letter-spacing: .1em; display: block; margin-bottom: 8px;
}
.lede { color: var(--ink-soft); margin: 0 0 26px; max-width: 40em; }
p { max-width: 40em; }

/* Inventory tables. These had no styles at all, so the browser sized every
   column by its longest word and the result wrapped "every 15 minutes" into
   three lines. Fixed layout, columns declared per table, and the reading
   column gets the room. */
table.inv {
  width: 100%; border-collapse: collapse; margin: 18px 0 0;
  font-size: 14.5px; line-height: 1.45; table-layout: fixed;
}
table.inv th {
  text-align: left; font-family: system-ui, sans-serif; font-weight: 600;
  font-size: 11.5px; letter-spacing: .09em; text-transform: uppercase;
  color: var(--ink-soft); padding: 0 14px 8px 0; border-bottom: 1px solid var(--rule);
}
table.inv td {
  padding: 11px 14px 11px 0; border-bottom: 1px solid var(--rule);
  vertical-align: top; overflow-wrap: break-word;
}
table.inv tr:last-child td { border-bottom: 0; }
table.inv td:last-child, table.inv th:last-child { padding-right: 0; }
table.inv code {
  font-size: 13px; background: none; padding: 0; color: var(--ink);
  overflow-wrap: anywhere;
}
table.inv p { margin: 6px 0 0; max-width: none; }
/* The compact greys: a table list under a store, hosts under a service. */
table.inv .tables {
  font-size: 12.5px; color: var(--ink-soft); font-family: system-ui, sans-serif;
}
table.inv .without { font-size: 13.5px; color: var(--ink-soft); }

/* Per-table column widths. Declared here rather than guessed by the browser,
   which is the whole reason these looked broken. */
table.inv.api th:nth-child(1), table.inv.api td:nth-child(1) { width: 38%; }
table.inv.api th:nth-child(3), table.inv.api td:nth-child(3) { width: 48px; text-align: center; }
table.inv.jobs th:nth-child(1), table.inv.jobs td:nth-child(1) { width: 18%; }
table.inv.jobs th:nth-child(2), table.inv.jobs td:nth-child(2) { width: 22%; white-space: nowrap; }
table.inv.stores th:nth-child(1), table.inv.stores td:nth-child(1) { width: 16%; }
table.inv.stores th:nth-child(3), table.inv.stores td:nth-child(3) { width: 26%; }
table.inv.services th:nth-child(1), table.inv.services td:nth-child(1) { width: 26%; }
/* A hostname wraps between its parts, never inside one: "accounts.google.c om"
   is not a thing anybody can read or paste. */
table.inv.services td:first-child code { overflow-wrap: normal; word-break: keep-all; }
table.inv.services th:nth-child(3), table.inv.services td:nth-child(3) { width: 26%; }
table.inv.doors th:nth-child(1), table.inv.doors td:nth-child(1) { width: 34%; }
@media (max-width: 700px) {
  table.inv { font-size: 13.5px; }
  table.inv.api th:nth-child(1), table.inv.api td:nth-child(1) { width: 46%; }
}
.gap { color: var(--terracotta); font-weight: 600; }

.callout {
  background: var(--sage-soft); border-radius: 12px; padding: 22px 24px;
  margin: 8px 0 0; border: 1px solid var(--rule);
}
.callout p { margin: 0; }
.callout strong { color: var(--ink); }

/* say -> does pairs (phrasebook) */
.group { margin-top: 30px; }
.group:first-of-type { margin-top: 22px; }
.group-label {
  font-size: 12px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink-faint); font-weight: 600; margin: 0 0 14px;
}
.say { display: grid; grid-template-columns: 1fr; gap: 4px; padding: 15px 0; border-top: 1px solid var(--rule); }
.say:first-of-type { border-top: 0; padding-top: 4px; }
.say .q { font-family: "Iowan Old Style", Charter, Georgia, serif; font-size: 1.08rem; color: var(--ink); font-style: italic; }
.say .q::before { content: "“"; color: var(--sage); }
.say .q::after  { content: "”"; color: var(--sage); }
.say .a { color: var(--ink-soft); font-size: .98rem; }

/* protections / shields */
.shield { display: grid; grid-template-columns: auto 1fr; gap: 0 16px; padding: 16px 0; border-top: 1px solid var(--rule); }
.shield:first-of-type { border-top: 0; }
.shield .mark { width: 9px; height: 9px; border-radius: 50%; background: var(--terracotta); margin-top: 9px; box-shadow: 0 0 0 4px var(--terracotta-soft); }
.shield .title { font-weight: 600; margin: 0 0 2px; }
.shield .body { color: var(--ink-soft); margin: 0; font-size: .98rem; }

/* glossary */
dl.gloss { margin: 22px 0 0; display: grid; gap: 0; }
dl.gloss > div { display: grid; grid-template-columns: minmax(0, 190px) 1fr; gap: 4px 20px; padding: 15px 0; border-top: 1px solid var(--rule); align-items: baseline; }
/* Terms as long as charger_disconnected used to run straight over their
   description; they wrap inside their own column now. */
dl.gloss dt { overflow-wrap: anywhere; }
dl.gloss dt { font-weight: 600; color: var(--ink); }
dl.gloss dd { margin: 0; color: var(--ink-soft); font-size: .98rem; }
dl.gloss .need { display: inline-block; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--terracotta); font-weight: 600; margin-top: 4px; }

/* ordered lifecycle steps (numbering justified: real sequence) */
ol.steps { list-style: none; counter-reset: step; margin: 24px 0 0; padding: 0; }
ol.steps > li {
  counter-increment: step; position: relative; padding: 0 0 24px 52px; margin: 0;
}
ol.steps > li::before {
  content: counter(step); position: absolute; left: 0; top: 0;
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--sage-soft); color: var(--sage-deep);
  border: 1px solid var(--rule);
  display: grid; place-items: center; font-size: .92rem; font-weight: 700;
  font-variant-numeric: tabular-nums;
}
ol.steps > li:not(:last-child)::after {
  content: ""; position: absolute; left: 17px; top: 38px; bottom: 6px;
  width: 1px; background: var(--rule);
}
ol.steps .step-title { font-weight: 600; margin: 4px 0 4px; }
ol.steps .step-body { color: var(--ink-soft); margin: 0; font-size: .98rem; }

/* state table (assignee -> meaning) */
.state { display: grid; gap: 0; margin: 22px 0 0; }
.state .row { display: grid; grid-template-columns: 150px 1fr; gap: 6px 20px; padding: 14px 0; border-top: 1px solid var(--rule); align-items: baseline; }
.state .row:first-child { border-top: 0; }
.state .who { display: flex; align-items: center; gap: 9px; font-weight: 600; }
.state .dot { width: 10px; height: 10px; border-radius: 50%; flex: none; }
.state .dot.you { background: var(--terracotta); }
.state .dot.claude { background: var(--sage); }
.state .dot.none { background: var(--ink-faint); }
.state .mean { color: var(--ink-soft); font-size: .98rem; }

/* closing card. --sage-deep flips LIGHT in the dark theme, so the card keeps
   its own deep fill there — white text on the flipped token was ~1.7:1
   (Aug 2026 docs review, the "Say this" sentences unreadable at night). */
.blank { background: var(--sage-deep); color: #fff; border-radius: 16px; padding: 34px 32px; box-shadow: var(--shadow); margin-top: 8px; }
@media (prefers-color-scheme: dark) { .blank { background: #3F4B38; } }
:root[data-theme="dark"] .blank { background: #3F4B38; }
:root[data-theme="light"] .blank { background: var(--sage-deep); }
.blank .eyebrow { color: rgba(255,255,255,.7); }
.blank .say-this { font-family: "Iowan Old Style", Charter, Georgia, serif; font-size: 1.5rem; line-height: 1.3; margin: 0 0 14px; text-wrap: balance; }
/* Links inside the deep card: the prose accent equals this card's LIGHT fill,
   which rendered a link invisible (Aug 2026 final pass). White, both themes. */
.content .blank a { color: #fff; }
.blank p { color: rgba(255,255,255,.85); margin: 0; max-width: 42em; }

footer { padding: 40px 0 0; color: var(--ink-faint); font-size: .85rem; }
footer code { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: .82rem; background: var(--sage-soft); padding: 2px 6px; border-radius: 5px; color: var(--ink-soft); }

@media (prefers-reduced-motion: no-preference) {
  a, nav.guide-nav a { transition: color .15s ease; }
}

/* In-page editor (opt-in via ?edit) — fix the writing without touching code */
.editbar {
  position: fixed; right: 18px; bottom: 18px; z-index: 50;
  display: flex; gap: 8px; align-items: center;
  background: var(--paper-raised); border: 1px solid var(--rule);
  border-radius: 12px; padding: 8px 10px; box-shadow: var(--shadow); font-size: 13px;
}
.editbar button {
  font: inherit; font-weight: 600; cursor: pointer;
  border: 1px solid var(--rule); background: var(--paper); color: var(--ink);
  padding: 7px 12px; border-radius: 8px;
}
.editbar button:hover { border-color: var(--sage); }
.editbar .eb-edit, .editbar .eb-save { background: var(--sage-deep); color: #fff; border-color: transparent; }
.editbar .eb-hint { color: var(--ink-soft); margin-right: 2px; max-width: 220px; }
body.editing main.content { outline: 2px dashed var(--sage); outline-offset: 16px; border-radius: 3px; }
body.editing main.content:focus { outline-color: var(--sage-deep); }
@media print { .editbar { display: none !important; } }

/* Search across every guide (#199). Sits under the page list in the sidebar;
   on a phone the sidebar is the top of the page, so it is the first thing a
   reader hunting one fact can reach. */
.docsearch { margin: 14px 0 4px; }
.docsearch input {
  width: 100%; font: inherit; font-size: 13.5px; color: var(--ink);
  background: var(--paper-raised); border: 1px solid var(--rule);
  border-radius: 9px; padding: 8px 11px;
}
.docsearch input::placeholder { color: var(--ink-faint); }
.docsearch input:focus-visible { outline: 2px solid var(--sage); outline-offset: 1px; }
.docsearch-results { display: flex; flex-direction: column; gap: 2px; margin-top: 6px; }
.docsearch-results a {
  display: block; text-decoration: none; padding: 7px 10px; border-radius: 8px;
  border: 1px solid transparent;
}
.docsearch-results a:hover { background: var(--sage-soft); border-color: var(--rule); }
.docsearch-where {
  display: block; font-size: 11px; font-weight: 600; letter-spacing: .02em;
  color: var(--sage-deep);
}
.docsearch-line {
  display: block; font-size: 12.5px; line-height: 1.4; color: var(--ink-soft);
}
.docsearch-none { font-size: 12.5px; color: var(--ink-faint); margin: 6px 0 0; }
@media (max-width: 900px) {
  .docsearch { width: 100%; flex: 0 0 100%; min-width: 0; }
  .docsearch-results a { border-color: var(--rule); }
}