/* /docs: OrgoMedia's sheet for the shared knowledge-base shell (assets/docs.css, a copy of SkailSites/shared/docs.css),
   which orgo/build_docs.py draws on /docs, every /docs/<topic> and every /docs/<topic>/<guide>. docs.css speaks its own
   token names; the first rule maps them to OrgoMedia's. The rest are the guide's own blocks (steps, callouts, tables,
   chips, renames, cards, the glossary), which only OrgoMedia's guides use. */

.rf-wrap, .rf-home {
  --ink: var(--txt); --ink2: var(--muted); --ink3: var(--muted); --page: var(--bg);
  --brand: var(--accent-2); --rf-link: var(--accent-3); --rf-pop: var(--bg-elev);
  --brand-tint: rgba(132,120,240,.16); --brand-tint2: rgba(132,120,240,.2);
  --nav-h: 76px; --dc-line: var(--line);
  /* the step numbers: Framer's gradient ended on #3B82F6, where white text measured 3.7:1; #2563EB gives 5.2:1 */
  --dc-grad: linear-gradient(135deg, #6c3aed 0%, #4f46e5 50%, #2563eb 100%);
  --dc-nest: #262638;   /* a box inside the guide card: 1.33:1 lighter than the card over --bg (the guard asks 1.25) */
}
.rf-art { --dc-block: 100%; --dc-measure: 70ch; color: var(--body); }
/* Headings sized for the 29em column, not for docs.css's wider one: at 42px and 31px a title fit 22 characters a line,
   so most wrapped and stopped far short of the column (the board, 2026-10-23 and 10-31). Across every article the
   headings wrapping 20% short of the column fell from 12 to 2 at 1280 and from 13 to 5 at 390, none ending on a lone word (20 and 21px left "to be" alone at 390). */
@media (min-width: 801px) { .rf-art > h1 { font-size: 28px; } .rf-art h2 { font-size: 21px; } .rf-art h3 { font-size: 18px; } }
@media (max-width: 800px) { .rf-art h2 { font-size: 19px; } }   /* a phone title keeps docs.css's 28px: 24 and 26px left "start" and "step" alone */
/* The tree's "Guide" title (in the aside, build_docs.py) level with the card's top edge and the rail's "On this page". */
@media (min-width: 801px) { .rf-side { margin-top: 37px; } }
/* One measure for the whole guide column (item 129): the card's text box is 29em, 64 to 70 characters of the body
   face a line, and every block in it (prose, callouts, tables, renames, the glossary's dividers) ends on that edge
   because each is as wide as the box. */
/* The tree and the rail take the room the narrower card leaves (the tree 248px to 400px, the rail the rest from 200px
   to 340px), so their longest titles sit on one line instead of wrapping beside an empty margin. The tree's links end
   12px inside its column (docs.css), so the rail starts 12px inside its own: the gaps either side of the card read the
   same (item 129's board). */
.rf-wrap { --dc-col: 29em;   /* the article is the page, no card (shared docs.css): its column is the measure itself */
  max-width: 1480px; justify-content: center;
  --dc-free: calc(min(100vw, 1480px) - 2 * var(--rf-pad-x) - var(--dc-col) - 2 * var(--rf-gap) - 16px);
  --rf-side-w: clamp(248px, calc(var(--dc-free) * .55), 400px);
  --rf-rail-w: clamp(200px, calc(var(--dc-free) - var(--rf-side-w)), 340px); }
@media (min-width: 1200px) {
  .rf-wrap { grid-template-columns: var(--rf-side-w) minmax(0, var(--dc-col)) var(--rf-rail-w); }
  /* A page without a rail (the hub and the topic pages) centres its tree and card: holding the rail's place would leave
     a dead strip on the right, which the layout guard refuses. Every article has a rail, contents or related articles
     (build_docs.py RELATED), so the frame holds still from one article to the next (item 129's board). */
  .rf-wrap:has(> .rf-rail:empty), .rf-wrap:not(:has(> .rf-rail)) { grid-template-columns: var(--rf-side-w) minmax(0, var(--dc-col)); }
  .rf-rail { padding-left: 12px; margin-top: 37px; }   /* the heading level with the card's top edge (the card sits 37px below the tree's top) */
  /* Related articles, on an article too short for contents: the title, then its summary, so the rail says why to go there */
  .rf-rel li + li { margin-top: 16px; }
  .rf-rel a { padding-right: 0; text-wrap: pretty; }
  .rf-rel .rf-rel-t { display: block; color: var(--ink); font-weight: 500; }
  .rf-rel .rf-rel-d { display: block; margin-top: 2px; color: var(--ink2); }
  .rf-rel a:hover .rf-rel-t { text-decoration: underline; text-underline-offset: 3px; }
}
@media (max-width: 1199px) { .rf-wrap { grid-template-columns: var(--rf-side-w) minmax(0, var(--dc-col)); } }
@media (max-width: 1100px) { .rf-wrap { --rf-side-w: 224px; } }
@media (max-width: 800px) { .rf-wrap { grid-template-columns: minmax(0, 1fr); max-width: calc(var(--dc-col) + 2 * var(--rf-pad-x)); } }
/* The tree's name and the rail's heading in one style, the rail's heading level with the card's top. */
.rf-hub, .rf-side > .rf-hub, .rf-toc-h { font-size: 15px; line-height: 20px; font-weight: 600; color: var(--ink); }
.rf-toc-h { padding-left: 8px; }
/* The tree's topic names in the weight they have on a phone, over their articles. */
.rf-side a.rf-g { font-weight: 600; color: var(--ink); }
/* The rail's current section is a filled row, as the tree's current page is, not a colour change alone; its titles
   wrap inside the rail. */
.rf-toc a { padding-left: 8px; padding-right: 8px; border-radius: 6px; text-wrap: pretty; }
.rf-toc a[aria-current=true] { background: var(--brand-tint); font-weight: 600; }
/* A phone shows the guide on the page itself: the card's border and padding inside the 16px gutter left the text 33px
   from the screen's edge. */
@media (max-width: 800px) { .rf-art { padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; } }
.rf-art p code, .rf-art li code { white-space: nowrap; }   /* a path or token is read as one unit, so it never splits across two lines (the longest is 20 characters) */
.rf-art p, .rf-art li { color: var(--body); }
.rf-art strong { color: var(--txt-2); font-weight: 600; }
.rf-art em { color: var(--txt-2); font-style: normal; font-weight: 500; }
.rf-art code { font-family: var(--mono); font-size: var(--fs-label); padding: 1px 6px; background: var(--bg-soft); border-radius: 6px; color: var(--txt-2); }
.rf-art kbd { font-family: var(--mono); font-size: var(--fs-label); margin: 0 1px; padding: 2px 6px; background: var(--bg-soft); border: 1px solid var(--dc-line); border-bottom-width: 2px; border-radius: 6px; color: var(--txt-2); }
.rf-art a { color: var(--accent-3); }
.dc-hl { color: #3b82f6; }
.rf-steps li::before { color: var(--accent-3); }
.rf-band .btn { flex: none; }

/* numbered steps */
.dc-steps { margin: 16px 0; display: flex; flex-direction: column; gap: 14px; max-width: var(--dc-measure); }
.dc-step { display: flex; gap: 14px; align-items: flex-start; }
.dc-step-n { flex-shrink: 0; width: 30px; height: 30px; border-radius: 50%; background: var(--dc-grad); color: #fff; display: grid; place-items: center; font-size: var(--fs-label); font-weight: 700; line-height: 1; }
.dc-step-b { padding-top: 3px; font-size: 16px; line-height: 1.6; color: var(--body); }

/* callouts */
.dc-callout { max-width: var(--dc-block);   /* the box hugs its text: 15px copy fills 44em of 16px */ margin: 18px 0; padding: 14px 18px; border-radius: 10px; border: 1px solid var(--dc-line); background: var(--dc-nest); font-size: 15px; line-height: 1.65; color: var(--body); }
.dc-tag { display: inline-block; margin-bottom: 6px; font-size: var(--fs-label); line-height: 1.4; font-weight: 700; }   /* sentence case: these are whole phrases */
.dc-tag.tip { color: var(--green); }
.dc-tag.warn { color: #f59e0b; }
.dc-tag.info { color: #3b82f6; }
.dc-tag.key { color: var(--accent-3); }
.dc-callout a { color: var(--accent-3); text-decoration: underline; }
.dc-callout a:hover { color: #3b82f6; }

/* tables */
.dc-table { overflow-x: auto; max-width: var(--dc-block);   /* every block ends on the prose edge (--dc-block) */ margin: 18px 0; background: var(--dc-nest); border: 1px solid var(--dc-line); border-radius: 10px; }
.dc-table table { width: 100%; border-collapse: collapse; font-size: var(--fs-label); }
.dc-table th { text-align: left; padding: 10px 14px; border-bottom: 1px solid var(--dc-line); background: var(--surface-2); color: var(--txt-2); font-weight: 700; font-size: var(--fs-label); }   /* sentence case: some headers run to 38 characters */
.dc-table td { text-align: left; padding: 10px 14px; border-bottom: 1px solid var(--dc-line); vertical-align: top; color: var(--body); line-height: 1.55; text-wrap: pretty; }   /* no description ends on one word alone */
.dc-table tr:last-child td { border-bottom: 0; }
.dc-table td code { white-space: nowrap; }   /* a token is copied as one unit, so it never breaks inside its chip */
@media (max-width: 359.98px) { .dc-table td code { font-size: 12px; } .dc-table td:has(> code:only-child) { padding-right: 6px; } }   /* at 320 the longest token still leaves its example two lines, not one word a line */
.dc-table--keys table { min-width: 0; }
.dc-table--values td code { font-size: .9em; }   /* a monospaced example beside a proportional name reads a size larger at the same size, so it steps down to match the name's x-height */
ul.dc-plans { display: none; }   /* the phone list of the plans table (below) */
@media (max-width: 599.98px) {   /* the plans table becomes a list in the App Store's subscription shape (plans.py docs_block) */
  .dc-table--plans { display: none; }
  ul.dc-plans { display: block; margin: 18px 0; padding: 0; list-style: none; border: 1px solid var(--dc-line); border-radius: 14px; background: var(--dc-nest); }
  ul.dc-plans > li { display: grid; grid-template-columns: 1fr auto; align-items: baseline; column-gap: 12px; row-gap: 4px; margin: 0; padding: 14px 16px; border-bottom: 1px solid var(--dc-line); }
  ul.dc-plans > li:last-child { border-bottom: 0; }
  ul.dc-plans > li::before { content: none; }
  .dc-plan-name { font-size: 17px; font-weight: 600; color: var(--txt); }
  .dc-plan-price { font-size: 17px; font-weight: 400;   /* the value in regular weight beside its bold name, as in the iOS subscriptions sheet */
    color: var(--txt); font-variant-numeric: tabular-nums; white-space: nowrap; }
  .dc-plan-price small { font-size: 14px; font-weight: 400; color: var(--muted); }
  .dc-plan-meta { grid-column: 1 / -1; font-size: 15px; line-height: 1.4; color: var(--txt-2); }
}
.dc-table--keys kbd { font-size: var(--fs-body, 15px); }
@media (max-width: 599.98px) { .dc-table { max-width: none; } .dc-table table { min-width: 0; } .dc-table th, .dc-table td { padding: 10px 12px; overflow-wrap: break-word; } .dc-table :is(th, td):first-child:nth-last-child(2) { width: 1%; white-space: nowrap; } }   /* a two-column table's name column hugs its name (a long name breaks only at its br.dc-ph) and gives the rest to the description; the four-column plans table shares the width */
@media (min-width: 600px) { .dc-keys :is(th, td):first-child { width: 1%; white-space: nowrap; padding-right: 32px; } }   /* a key column (a token, a tool) hugs its longest key at every width, so the description does not sit 240px away from it */
.dc-table br.dc-ph { display: none; }
@media (max-width: 599.98px) { .dc-table br.dc-ph { display: inline; } }   /* the one chosen break in a long name, on phones only */
@media (max-width: 359.98px) { .dc-table :is(th, td):first-child:nth-last-child(2) { white-space: normal; } }   /* at 320 a one-line name would squeeze its description to a word a line, so the name wraps instead */   /* every docs table is two to four short columns: on a phone it wraps inside the 16px gutters instead of running off the edge */
.dc-table--keys td:first-child { width: 6em; white-space: nowrap; }
@media (min-width: 600px) { .dc-table :is(th, td):first-child:nth-last-child(2) { white-space: nowrap; } }   /* a two-column table's name column (30 characters at most) hugs its name, so "TRaSH Guides" never splits while the description column has room */

/* before → after filenames: one code box (docs.js gives it Copy, the sideways scroll and the fade at its edge), each
   source name over its result, so a long name stays on its line instead of breaking mid-tag (item 129's board). */
.rf-art pre.dc-ex code { font-size: var(--fs-label); line-height: 1.6; }
/* An example's source name is the point of it, so Copy gets a row of its own above the code and the first line runs the
   box's full width instead of fading under the button (item 129's board, round 3). */
.rf-code:has(> pre.dc-ex) { --rf-cut: 0px !important; }
.rf-art pre.dc-ex { padding-top: 44px; }
.dc-was { color: var(--muted); }
.dc-now { color: var(--green); }

/* cards */
.dc-cards { max-width: var(--dc-block); display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; margin: 18px 0; }
.dc-cards:has(> .dc-card:nth-child(3):last-child) { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }   /* three cards sit three across in the article column, so none is left alone on a row of its own */
.dc-cards:not(:has(> .dc-card:nth-child(3):last-child)) > .dc-card:last-child:nth-child(odd) { grid-column: 1 / -1; }   /* any other odd count: the lone last card takes the whole row, edge to edge with the cards above (owner's board 2026-10-22: a hugging card centred under two read as misaligned) */
.dc-card { padding: 16px 18px; border: 1px solid var(--dc-line); border-radius: 10px; background: var(--dc-nest); }
.rf-art .dc-card h3 { margin: 0 0 6px; font-size: 15px; line-height: 1.4; }
.rf-art .dc-card p { margin: 0; max-width: var(--dc-measure); font-size: var(--fs-label); line-height: 1.6; }

/* the glossary */
.rf-art dl { max-width: var(--dc-block); font-size: 15px; margin: 16px 0; display: flex; flex-direction: column; gap: 0; }   /* the list ends on the prose edge, as every other block does */
.dc-term { padding: 14px 0; border-bottom: 1px solid var(--dc-line); }
.dc-term:last-child { border-bottom: 0; }
.rf-art dt { margin-bottom: 4px; font-size: 16px; font-weight: 700; color: var(--txt-2); }
.rf-art dd { margin: 0; max-width: none;   /* the definition runs to its divider's edge, the list's own */ font-size: 15px; line-height: 1.6; color: var(--body); }
/* Each term over its definition at every width: in the 29em column a term column beside it left the definitions a
   third of the measure. */

.dc-arrow { transform: rotate(90deg); }
/* A block's table sits flush in its bordered box; docs.css's table margin would leave a strip above and below. */
.rf-art .dc-table table { margin: 0; }
/* The box scrolls a wide table itself, so the table stays a table: docs.css makes a bare one a block under 1100px, and
   a block table's rows shrank to their content, 29px short of the box's edge at 1000 (the board, 2026-10-23). */
.rf-art .dc-table table { display: table; }
/* The help band's text ends the band: no paragraph margin under it. */
.rf-band p { margin: 0; }

/* The hub's eight topics as one list in two columns (item 129's board: a 4 by 2 grid of icon cards read as a template),
   in the shape the phone list already had: the icon beside the topic, its line and count under its name, a rule
   between rows and no boxes. build_docs.py HUB_COLUMNS refuses a short last row. */
/* The owner, 2026-10-23: the hub's rows "blend in way too much with the background", ruled at .1 white on black. The
   three first reads, the topics and the help band now each sit in one raised panel (--bg-elev, a .16 edge), rows split
   by rules inside it, the way a grouped list in System Settings reads: one box per group, never a box per row. */
.rf-home { --rf-card: var(--bg-elev); --rf-card-line: var(--line-2); }
/* The rules between rows are the panel showing through a 1px grid gap, not a border on one side of a row: a one-sided
   border is what check_text_fills_box.js reads as a side stripe. */
.rf-home .rf-steps, .rf-home .rf-cats { gap: 1px; background: var(--line-2); border: 1px solid var(--line-2); border-radius: 16px; overflow: hidden; }
.rf-home .rf-steps li, .rf-home .rf-cats > li { background: var(--bg-elev); border: 0; }
.rf-home .rf-steps li { padding: 28px; }
.rf-home .rf-steps li:hover { background: linear-gradient(rgba(255, 255, 255, .04), rgba(255, 255, 255, .04)) var(--bg-elev); }
.rf-home .rf-cat:hover { background: rgba(255, 255, 255, .04); }
@media (max-width: 600px) {
  .rf-home .rf-steps li { padding: 20px; }
}
.rf-home .rf-cats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.rf-home .rf-cats > li { display: block; grid-row: auto; }
.rf-home .rf-cat { position: relative; display: grid; grid-template-columns: 36px minmax(0, 1fr); grid-template-rows: none; column-gap: 16px; row-gap: 4px;
  height: 100%; padding: 22px 52px 22px 24px; border: 0; border-radius: 0; background: none; box-shadow: none; }
.rf-home .rf-cat:hover { box-shadow: none; }
.rf-home .rf-cat:hover .rf-cat-t { color: var(--brand); }
.rf-home .rf-cat::after { content: ""; position: absolute; right: 24px; top: 50%; width: 8px; height: 8px; border: solid var(--ink3); border-width: 2px 2px 0 0; transform: translateY(-50%) rotate(45deg); }
.rf-home .rf-cat-i { grid-row: 1 / span 3; width: 36px; height: 36px; place-items: start center; }
.rf-home .rf-cat-i svg, .rf-home .rf-cat-i .rf-ico { width: 28px; height: 28px; }
.rf-home .rf-cat-t { grid-column: 2; align-self: start; font-size: 17px; text-wrap: wrap; }
.rf-home .rf-cat-d, .rf-home .rf-cat-n { grid-column: 2; padding-top: 0; }
.rf-home .rf-cat-d { text-wrap: pretty; }   /* no description ends on one word alone */
@media (max-width: 800px) {
  .rf-home .rf-cats { grid-template-columns: minmax(0, 1fr); }
  .rf-home .rf-cat { padding: 16px 44px 16px 16px; }
  .rf-home .rf-cat::after { right: 18px; }
}
/* "Read these first" leads the hub, straight under the search. */
.rf-home .rf-home-top + .rf-sec { margin-top: 0; }

/* A table of names and what each does (the integrations' cast, the tokens): on a phone each row stacks, the name over
   what it does at the full width, and the header row goes, as Settings lists do. Side by side at 390 the description
   column was 170px and Jellyfin's ran to seven lines beside an empty name column (the design board, 2026-10-23). */
@media (max-width: 599.98px) {
  .dc-keys thead { display: none; }
  .dc-keys table, .dc-keys tbody, .dc-keys tr, .dc-keys td { display: block; width: auto; }
  .dc-keys td:first-child { padding-bottom: 0; border-bottom: 0; font-weight: 700; color: var(--txt); }
  .dc-keys td:first-child + td { padding-top: 4px; }   /* the description sits under its own name, closer to it than to the next row */
}
.rf-stuck { margin: 32px 0 0; }
.rf-art dd { text-wrap: pretty; }   /* no definition ends on one word alone */
/* On a phone the scrolled guide ran up behind the pill (item 122 point 2): the shared nav's band of the page's colour
   (nav.css .nav::after) covers it once the page scrolls, so this sheet draws none of its own. */