/* Shared stylesheet for the Return Grid documentation guides
 * (/docs/tenant, /docs/owner, /docs/first-property).
 *
 * Extracted under Task List ID 786. These ~200 lines used to be copy-pasted
 * into all three guides, which is why a four-line mobile fix (PR #46) landed as
 * a +454/-273 diff across three files, and why the screenshot runbook had to
 * tell sessions to "copy the widget from an existing guide". One edit here now
 * reaches every guide, and a fourth guide costs two <link>/<script> tags.
 *
 * Served by express.static at /assets (server.js) and shipped to Vercel by the
 * "assets/**" entry in vercel.json includeFiles. No build step.
 *
 * The /docs hub (docs.html) has its own small stylesheet and is NOT wired here:
 * it is a link directory, it shares almost none of these rules, and pulling it
 * in would mean shipping the whole guide stylesheet to a 144-line page.
 */

:root {
  --ink: #152536;
  --muted: #556171;
  --navy: #17324d;
  --blue: #2667a8;
  --surface: #ffffff;
  --soft: #eef3f7;
  --line: #dce5ec;
  --success: #18794e;
  --success-bg: #e6f4ec;
  --warn: #92620a;
  --warn-bg: #fbf1de;
  --danger: #b42318;
  --danger-bg: #fbe9e7;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--ink);
  background: var(--soft);
}
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; display: flex; flex-direction: column; line-height: 1.6; }
h1, h2, h3, h4, p { margin-top: 0; }
a { color: var(--blue); }

.skip-link { position: fixed; left: 1rem; top: -4rem; z-index: 100; display: inline-flex; align-items: center; min-height: 44px; padding: .75rem 1rem; background: white; color: var(--navy); border-radius: 8px; }
.skip-link:focus-visible { top: 1rem; }
:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }

.doc-header { border-bottom: 1px solid var(--line); background: white; }
.doc-header-inner { max-width: 1180px; margin: 0 auto; padding: 1rem 1.5rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.doc-brand { font-weight: 800; color: var(--navy); text-decoration: none; font-size: 1.05rem; }
.doc-header-tag { font-size: .82rem; color: var(--muted); }
.doc-header-actions { display: flex; gap: .75rem; align-items: center; }
.btn-print { appearance: none; border: 1px solid var(--line); background: white; color: var(--navy); font: inherit; font-size: .85rem; font-weight: 600; padding: .5rem .9rem; border-radius: 8px; cursor: pointer; min-height: 40px; }
.btn-print:hover { background: var(--soft); }

.layout { max-width: 1180px; margin: 0 auto; padding: 2rem 1.5rem 4rem; width: 100%; display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 2.5rem; flex: 1; }
@media (max-width: 900px) { .layout { grid-template-columns: minmax(0, 1fr); gap: 1.5rem; } }

.toc { align-self: start; position: sticky; top: 1.5rem; font-size: .88rem; }
@media (max-width: 900px) { .toc { position: static; background: white; border: 1px solid var(--line); border-radius: 10px; padding: 1rem 1.25rem; } }
.toc h2 { font-size: .78rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin-bottom: .6rem; }
.toc ol { list-style: none; margin: 0; padding: 0; counter-reset: toc; }
.toc li { margin-bottom: .1rem; counter-increment: toc; }
.toc a { display: block; padding: .35rem .5rem .35rem 1.9rem; border-radius: 6px; text-decoration: none; color: var(--ink); position: relative; }
.toc a::before { content: counter(toc); position: absolute; left: .5rem; color: var(--muted); font-variant-numeric: tabular-nums; font-size: .78rem; }
.toc a:hover { background: white; }
/* Below the sidebar breakpoint the expanded TOC is up to 969px of nav in
   front of the first paragraph, so it collapses into a <details>. The open
   state is driven from script, not CSS: overriding display on the
   non-summary children of a closed <details> is not reliable across
   engines. */
.toc-summary { display: none; }
@media (max-width: 899.98px) {
  .toc > h2 { display: none; }
  .toc-summary { display: list-item; list-style-position: inside; cursor: pointer; min-height: 44px; padding: .7rem .25rem; border-radius: 6px; font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
  .toc-collapse[open] > .toc-summary { border-bottom: 1px solid var(--line); margin-bottom: .5rem; }
}

main { min-width: 0; }
.eyebrow { text-transform: uppercase; letter-spacing: .06em; font-size: .78rem; font-weight: 700; color: var(--blue); margin-bottom: .5rem; }
h1 { font-size: clamp(1.7rem, 3.2vw, 2.2rem); color: var(--navy); margin-bottom: .5rem; line-height: 1.25; }
.lede { font-size: 1.05rem; color: var(--muted); margin-bottom: 1.25rem; max-width: 62ch; }
.doc-meta { color: var(--muted); font-size: .87rem; margin-bottom: 2rem; padding-bottom: 1.5rem; border-bottom: 1px solid var(--line); }
.doc-meta strong { color: var(--ink); }

section.stage { margin-bottom: 2.75rem; scroll-margin-top: 1.5rem; }
section.stage > h2 { font-size: 1.3rem; color: var(--navy); margin-bottom: .35rem; padding-top: .25rem; display: flex; align-items: baseline; gap: .6rem; }
.stage-num { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 1.7rem; height: 1.7rem; border-radius: 999px; background: var(--navy); color: white; font-size: .82rem; font-weight: 700; }
.stage-sub { color: var(--muted); font-size: .92rem; margin-bottom: 1.1rem; }
h3 { font-size: 1.02rem; color: var(--navy); margin-bottom: .5rem; margin-top: 1.5rem; }
h4 { font-size: .92rem; color: var(--navy); margin-bottom: .4rem; margin-top: 1rem; }
p { margin-bottom: .85rem; max-width: 72ch; }
ul, ol { margin: 0 0 .9rem 1.3rem; padding: 0; max-width: 72ch; }
li { margin-bottom: .4rem; }

.card { background: white; border: 1px solid var(--line); border-radius: 10px; padding: 1.15rem 1.35rem; margin-bottom: 1rem; }
.card > :last-child { margin-bottom: 0; }
.card h3 { margin-top: 0; }

.steps { list-style: none; margin: 0 0 1rem; padding: 0; counter-reset: step; max-width: 72ch; }
.steps > li { counter-increment: step; position: relative; padding-left: 2.4rem; margin-bottom: .9rem; }
.steps > li::before { content: counter(step); position: absolute; left: 0; top: -.05rem; width: 1.6rem; height: 1.6rem; border-radius: 999px; background: var(--soft); border: 1px solid var(--line); color: var(--navy); font-size: .8rem; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.steps > li > strong { color: var(--navy); }

.ui { display: inline-block; background: var(--soft); border: 1px solid var(--line); border-radius: 5px; padding: .05rem .4rem; font-size: .88em; font-weight: 600; color: var(--navy); white-space: nowrap; }
/* Long menu paths ("Settings -> Tenant Portal Providers -> ...") are wider
   than a phone. Keep nowrap on desktop so short labels never split, but let
   them wrap below 640px rather than pushing the page sideways. */
@media (max-width: 640px) { .ui { white-space: normal; } }
/* Roboto Mono is self-hosted alongside Inter (assets/docs/fonts.css, #392). The
 * old stack started at ui-monospace, i.e. "whatever this machine calls its
 * system mono" -- which resolved to a DIFFERENT DejaVu Sans Mono build on the
 * CI runner than in the agent sandbox, so a page carrying one of these chips
 * could not have a stable pixel baseline. Keep the system stack behind it as a
 * fallback for anyone the font file fails to reach. */
.path { font-family: "Roboto Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .88em; background: var(--soft); border: 1px solid var(--line); border-radius: 5px; padding: .05rem .35rem; word-break: break-all; }

.note { border-left: 3px solid var(--blue); background: white; border-radius: 0 8px 8px 0; padding: .85rem 1.1rem; margin-bottom: 1rem; font-size: .93rem; max-width: 72ch; }
.note.warn { border-left-color: var(--warn); background: var(--warn-bg); }
.note.danger { border-left-color: var(--danger); background: var(--danger-bg); }
.note.ok { border-left-color: var(--success); background: var(--success-bg); }
.note > :last-child { margin-bottom: 0; }
.note strong { color: var(--navy); }
.note.warn strong { color: var(--warn); }
.note.danger strong { color: var(--danger); }
.note.ok strong { color: var(--success); }

.screen { background: white; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; margin-bottom: 1.15rem; }
.screen-bar { background: var(--navy); color: white; padding: .5rem .9rem; font-size: .78rem; font-weight: 600; display: flex; align-items: center; gap: .5rem; }
.screen-bar .dot { width: .5rem; height: .5rem; border-radius: 999px; background: rgba(255,255,255,.5); flex: none; }
.screen-body { padding: 1rem 1.15rem; }
.screen-body > :last-child { margin-bottom: 0; }
.screen-nav { display: flex; flex-wrap: wrap; gap: .3rem; padding: .55rem .9rem; border-bottom: 1px solid var(--line); background: var(--soft); font-size: .8rem; }
.screen-nav span { padding: .2rem .55rem; border-radius: 5px; color: var(--muted); }
.screen-nav span.on { background: white; border: 1px solid var(--line); color: var(--navy); font-weight: 700; }
.field-row { display: grid; grid-template-columns: minmax(140px, 32%) minmax(0, 1fr); gap: .5rem 1rem; padding: .45rem 0; border-bottom: 1px dashed var(--line); font-size: .9rem; }
.field-row:last-child { border-bottom: 0; }
.field-row dt { color: var(--muted); }
.field-row dd { margin: 0; color: var(--ink); }
dl.fields { margin: 0; }

.flow { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; margin-bottom: 1.1rem; font-size: .85rem; }
.flow .node { background: white; border: 1px solid var(--line); border-radius: 999px; padding: .3rem .8rem; font-weight: 600; color: var(--navy); }
.flow .arrow { color: var(--muted); font-weight: 700; }

table.tbl { width: 100%; border-collapse: collapse; font-size: .89rem; margin-bottom: 1.1rem; background: white; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
table.tbl th, table.tbl td { text-align: left; padding: .6rem .8rem; border-bottom: 1px solid var(--line); vertical-align: top; }
table.tbl th { background: var(--soft); color: var(--navy); font-size: .8rem; text-transform: uppercase; letter-spacing: .04em; }
table.tbl tr:last-child td { border-bottom: 0; }
/* A three-column table has a min-content width wider than a 320px phone,
   which pushed the last column off-screen with no way to reach it. Scroll
   the wrapper rather than the page. Screen only -- an overflow container
   around every table would change how the approved PDFs paginate. */
@media screen { .tbl-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; margin-bottom: 1.1rem; } .tbl-wrap > table.tbl { margin-bottom: 0; } }

.pill { display: inline-block; padding: .12rem .5rem; border-radius: 999px; font-size: .74rem; font-weight: 700; white-space: nowrap; }
.pill.open { background: var(--warn-bg); color: var(--warn); }
.pill.paid { background: var(--success-bg); color: var(--success); }
.pill.info { background: #e7eff8; color: var(--blue); }

.faq dt { font-weight: 700; color: var(--navy); margin-top: .9rem; }
.faq dd { margin: .25rem 0 0; color: var(--ink); max-width: 72ch; }

figure.shot { margin: 1.5rem 0; }
figure.shot img { display: block; width: 100%; height: auto; border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 1px 4px rgba(21, 37, 54, .09); background: #fff; }
figure.shot figcaption { margin-top: .55rem; font-size: .85rem; color: var(--muted); line-height: 1.5; }
/* Issue #136 -- injected by assets/docs/guide.js from /docs/docs-shot-freshness.json.
   Quieter than the figcaption above (smaller, lighter) since it is metadata
   about the picture rather than a description of it. */
.shot-freshness { margin: .3rem 0 0; font-size: .75rem; color: var(--muted); opacity: .8; line-height: 1.4; }
.doc-footer { border-top: 1px solid var(--line); background: white; }
.doc-footer-inner { max-width: 1180px; margin: 0 auto; padding: 1.25rem 1.5rem; font-size: .85rem; color: var(--muted); display: flex; gap: 1rem; flex-wrap: wrap; justify-content: space-between; }

/* --- In-page search ------------------------------------------------
   The widget's own rules moved to assets/docs/search.css under ID 791, so the
   /docs hub -- which does not load this stylesheet -- can carry the same search
   box without a second copy of them. Everything below is guide-layout styling
   that the hub has no use for. */
@media (max-width: 900px) { .btn-print { min-height: 44px; } }
/* Sharing one row squeezed the field to 155px ("Search this g") and wrapped
   the print button onto three lines, so each gets its own row. */
@media (max-width: 640px) { .doc-header-actions { flex-wrap: wrap; } .btn-print { flex: 1 1 100%; white-space: nowrap; } }
/* Brief flash on the target so you can see where the jump landed. */
@keyframes docFlash { from { background: #fdf0c8; } to { background: transparent; } }
.doc-flash { animation: docFlash 1.6s ease-out; border-radius: 6px; }
@media print {
  :root { background: white; }
  body { background: white; }
  .skip-link, .toc, .doc-header-actions, .btn-print, .doc-search { display: none !important; }
  .layout { display: block; max-width: none; padding: 0; }
  .doc-header, .doc-footer { border: 0; }
  .doc-header-inner, .doc-footer-inner { padding: 0 0 .5rem; max-width: none; }
  a { color: var(--ink); text-decoration: none; }
  section.stage { page-break-inside: auto; margin-bottom: 1.6rem; }
  section.stage > h2 { page-break-after: avoid; }
  h3, h4 { page-break-after: avoid; }
  .card, .screen, .note, .steps > li { page-break-inside: avoid; }
  /* Tall tables must be allowed to split, but never mid-row, and the header
     row should repeat on the continuation page. */
  table.tbl { page-break-inside: auto; }
  table.tbl thead { display: table-header-group; }
  table.tbl tr, dl.fields .field-row { page-break-inside: avoid; }
  .screen-bar { background: var(--soft) !important; color: var(--navy) !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .stage-num { background: var(--navy) !important; color: white !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .card, .screen, table.tbl { box-shadow: none; }
  p, ul, ol, .note, .lede { max-width: none; }
  figure.shot { page-break-inside: avoid; }
  figure.shot img { box-shadow: none; max-height: 4.4in; width: auto; max-width: 100%; margin: 0 auto; }
  @page { margin: 16mm 14mm; }
}
