/* The Help manuals' own styling — the gate, the topbar, the contents rail, the cards,
   the screenshot mock-ups and the search highlighting.

   SHARED BY EVERY HELP PAGE. It used to be a 309-line <style> block inside help.html, which
   was fine while there was one manual and impossible the moment there were eight: a page per
   product area would each have carried its own copy, and they would have drifted the way the
   pm* twins did. Tokens come from CSS/tokens.css; nothing here hardcodes a colour. */





  html{scroll-behavior:smooth;}

  body{
    background:var(--bg); color:var(--text); min-height:100vh;
    font-family:var(--app-font, "Segoe UI",-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif);
    /* 16px, not 15. "Improve readability" and "use the screen" are the same request here:
       the manual was 15px at 111 characters a line, and the fix for a long measure is a
       shorter line at a larger size, never a wider column at the same size. */
    font-size:16px; line-height:1.7;
  }
  a{color:var(--accent-text);}
  /* Same two-tier button system as the apps — design-system.md §3. */
  .btn{
    background:var(--panel-2); color:var(--text); border:1px solid var(--border);
    border-radius:var(--radius-sm); padding:7px 12px; font-size:13px; font-weight:600;
    display:inline-flex; align-items:center; gap:6px; white-space:nowrap;
    text-decoration:none; cursor:pointer; font-family:inherit;
  }
  .btn:hover{border-color:var(--accent); color:var(--accent-text);}
  .topbar{
    display:flex; align-items:center; gap:10px; padding:12px 18px;
    background:var(--panel); border-bottom:1px solid var(--border);
    position:sticky; top:0; z-index:var(--z-sticky); flex-wrap:wrap;
  }
  .brand{display:flex; align-items:center; gap:8px; font-weight:700; font-size:16px;}
  .spacer{flex:1;}
  /* ---------- The shell: manuals | this manual | this page ----------
     Both rails used to be in one left column, leaving dead space beside an over-wide text
     measure — the same defect design-system.md records for okrs.html's own cap, and the same
     fix: the shell uses the window, the text keeps the measure, never the other way round.

     So the section list moves out of the left column into a rail of its own on the right,
     where the width already existed. Three tracks wide; two at medium, where the section rail
     rejoins the left column under the area list; one on a phone, where the area list becomes a
     one-line scrolling strip rather than vanishing below the fold.

     Grid, not flex, since the medium step needs the left rail to span two rows and the narrow
     step needs the tracks reordered — both are one `grid-template-areas` line each. DOM order
     is nav → manual → sections, which is also the reading and tab order. */
  .layout{
    --help-nav:244px;        /* the eight manuals */
    --help-rail:268px;       /* this page's sections */
    --help-gap:40px;
    /* On the text, never on the page — design-system.md §Reading surface. 66ch, not 78ch,
       because `ch` is the width of a zero and a zero is wider than the average letter — the
       unit is the contract, and only measurement connects it to a readable character count. */
    --help-measure:66ch;
    --help-column:1000px;    /* what a table, a mock-up or a card grid may use */
    display:grid;
    grid-template-columns:var(--help-nav) minmax(0,1fr) var(--help-rail);
    grid-template-areas:"nav main aside";
    align-items:start;
    gap:var(--help-gap);
    max-width:1640px; margin:0 auto; padding:26px 28px 80px;
  }
  /* Sticky contents. Collapses away on narrow screens rather than squeezing the text. */
  /* Sticky and scrollable: sticky alone was enough while the list was short, but once it
     grew past the viewport its last entries were unreachable, since the column stays put by
     design. `calc` leaves room for the sticky top bar; `overscroll-behavior:contain` stops a
     scroll that reaches the end of the list from carrying on into the page behind it. */
  .toc{
    grid-area:nav;
    position:sticky; top:74px; align-self:start; min-width:0;
    font-size:14px; line-height:1.5;
    max-height:calc(100vh - 96px);
    overflow-y:auto;
    overscroll-behavior:contain;
    padding-right:6px;
  }
  /* This page's sections. Same rail behaviour as the area list — it is the same kind of
     thing — but it is the one that grows without limit, so its own scroll is what keeps
     the last entry reachable on a long manual. */
  .help-onthis{
    grid-area:aside;
    position:sticky; top:74px; align-self:start; min-width:0;
    font-size:13px; line-height:1.5;
    max-height:calc(100vh - 96px);
    overflow-y:auto;
    overscroll-behavior:contain;
    padding-left:14px;
    border-left:1px solid var(--border-soft);
  }
  .help-onthis::-webkit-scrollbar{width:8px;}
  .help-onthis::-webkit-scrollbar-thumb{background:var(--border); border-radius:6px;}
  .help-onthis::-webkit-scrollbar-thumb:hover{background:var(--border-strong);}
  .help-onthis::-webkit-scrollbar-track{background:transparent;}
  .help-onthis{scrollbar-width:thin; scrollbar-color:var(--border) transparent;}
  .help-onthis h4{font-size:11px; text-transform:uppercase; letter-spacing:.5px; color:var(--text-faint);
                  margin:0 0 7px; font-weight:700;}
  .help-onthis a{display:block; padding:4px 9px; border-radius:6px; color:var(--text-dim); text-decoration:none;}
  .help-onthis a:hover{background:var(--panel-2); color:var(--text);}
  .help-onthis a.sub{padding-left:18px; font-size:12px;}
  .help-onthis a.active{background:var(--accent-soft); color:var(--accent-text); font-weight:600;}
  /* Quiet scrollbar — the contents list is chrome, and a full-strength bar down the side
     of it competes with the text it is meant to serve. */
  .toc::-webkit-scrollbar{width:8px;}
  .toc::-webkit-scrollbar-thumb{background:var(--border); border-radius:6px;}
  .toc::-webkit-scrollbar-thumb:hover{background:var(--border-strong);}
  .toc::-webkit-scrollbar-track{background:transparent;}
  .toc{scrollbar-width:thin; scrollbar-color:var(--border) transparent;}
  .toc h4{font-size:11px; text-transform:uppercase; letter-spacing:.5px; color:var(--text-faint);
          margin:18px 0 7px; font-weight:700;}
  .toc a{display:block; padding:4px 9px; border-radius:6px; color:var(--text-dim); text-decoration:none;}
  .toc a:hover{background:var(--panel-2); color:var(--text);}
  /* The column is not the measure: the column is as wide as the shell can give it, so a
     table, a mock-up or a card grid is not squeezed into a paragraph's width, while the prose
     inside it is capped at `--help-measure` to keep the line readable. */
  .content{grid-area:main; min-width:0; max-width:var(--help-column);}
  /* Everything that is read as a line of text. Anything NOT listed here — table, .shot,
     .help-cards, .help-results — deliberately uses the whole column.

     Headings are NOT capped: h2 carries the section rule, and a divider that stops two
     hundred pixels short of the table under it reads as a rendering fault, not a measure. */
  .content > p,
  .content > ul,
  .content > ol,
  .content > dl,
  .content > .lede,
  .content > .card,
  .content > .callout,
  .content > .help-qa,
  .content > .help-related,
  .content > .help-noresults{max-width:var(--help-measure);}
  h1{font-size:29px; margin:0 0 6px; letter-spacing:-.01em;}
  .lede{font-size:17px; color:var(--text-dim); margin:0 0 30px;}
  h2{
    font-size:23px; margin:46px 0 4px; padding-top:22px; border-top:1px solid var(--border);
    scroll-margin-top:78px;
  }
  h2:first-of-type{border-top:none; padding-top:0; margin-top:34px;}
  h2 .sub{display:block; font-size:13px; font-weight:400; color:var(--text-faint); margin-top:3px;}
  h3{font-size:17px; margin:26px 0 6px; scroll-margin-top:78px;}
  p{margin:9px 0;}
  ul,ol{margin:9px 0; padding-left:22px;}
  li{margin:5px 0;}
  code{
    background:var(--panel-2); border:1px solid var(--border-soft); border-radius:4px;
    padding:1px 5px; font-size:13px; font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  }
  .card{
    background:var(--panel); border:1px solid var(--border-soft); border-radius:var(--radius);
    padding:15px 17px; margin:16px 0;
  }
  .card h4{margin:0 0 7px; font-size:14px;}
  .note{border-left:3px solid var(--accent); background:var(--accent-soft);}
  .warn{border-left:3px solid var(--yellow); background:var(--yellow-soft); color:var(--warn-text);}
  .warn code{background:rgba(0,0,0,.14); border-color:transparent; color:inherit;}
  /* Full column width by design — a table is the element the 760px measure hurt most,
     and it is the one the recovered width goes to first. */
  table{border-collapse:collapse; width:100%; margin:14px 0; font-size:15px; display:block; overflow-x:auto;}
  th,td{border:1px solid var(--border-soft); padding:7px 10px; text-align:left; vertical-align:top;}
  th{background:var(--panel-2); font-weight:600; white-space:nowrap;}
  kbd{
    background:var(--panel-2); border:1px solid var(--border); border-bottom-width:2px;
    border-radius:5px; padding:1px 6px; font-size:12px; font-family:inherit;
  }
  .steps{counter-reset:s; list-style:none; padding-left:0;}
  .steps > li{counter-increment:s; position:relative; padding-left:34px; margin:11px 0;}
  .steps > li::before{
    content:counter(s); position:absolute; left:0; top:1px;
    width:23px; height:23px; border-radius:50%; background:var(--accent-fill); color:#fff;
    font-size:13px; font-weight:700; display:flex; align-items:center; justify-content:center;
  }
  /* ---------- Search, and the state that goes with it ---------- */
  .help-search{position:relative; display:flex; align-items:center; flex:1 1 260px; max-width:420px;}
  .help-search input[type=search]{
    width:100%; background:var(--panel-2); color:var(--text);
    border:1px solid var(--border-strong); border-radius:999px;
    padding:7px 34px 7px 32px; font-size:13px; font-family:inherit;
  }
  .help-search input[type=search]:focus{border-color:var(--accent);}
  .help-search .ico{
    position:absolute; left:11px; width:14px; height:14px; pointer-events:none;
    color:var(--text-faint);
  }
  .help-search-clear{
    position:absolute; right:7px; background:none; border:none; cursor:pointer;
    color:var(--text-faint); font-size:16px; line-height:1; padding:3px 5px; border-radius:5px;
  }
  .help-search-clear:hover{color:var(--text); background:var(--panel);}
  .help-count{font-size:12px; color:var(--text-faint); white-space:nowrap;}
  /* Hidden, not removed: every deep link stays valid and clearing the box is instant. */
  .help-hidden{display:none !important;}
  mark.help-hit{background:var(--yellow-soft); color:var(--warn-text); border-radius:3px; padding:0 2px;}
  /* While filtering, a topic is a card in a list rather than a run of one long document —
     the rules and top margins that separate sections in prose read as gaps once most of
     what sat between them is gone. */
  .help-filtered h2{border-top:none; padding-top:0; margin-top:26px;}
  .help-filtered h3{margin-top:22px;}
  .help-noresults{
    background:var(--panel); border:1px solid var(--border-soft); border-radius:var(--radius);
    padding:22px; margin:24px 0; text-align:center;
  }
  .help-noresults h4{margin:0 0 6px; font-size:15px;}
  .help-noresults p{color:var(--text-dim); font-size:14px; margin:6px 0 0;}
  .help-noresults .help-noresults-q{color:var(--text); font-weight:600;}
  .help-suggest{display:flex; flex-wrap:wrap; gap:6px; justify-content:center; margin-top:14px;}
  .help-suggest button{
    background:var(--panel-2); border:1px solid var(--border); border-radius:999px;
    color:var(--text-dim); font-size:12px; font-family:inherit; padding:4px 11px; cursor:pointer;
  }
  .help-suggest button:hover{border-color:var(--accent); color:var(--accent-text);}
  .help-totop{
    position:fixed; right:22px; bottom:22px; z-index:var(--z-sticky);
    opacity:0; pointer-events:none; transition:opacity var(--dur-micro) linear;
  }
  .help-totop.show{opacity:1; pointer-events:auto;}
  /* Cross-links between topics — the "related" row under a section. */
  .help-related{
    display:flex; flex-wrap:wrap; gap:6px; align-items:center;
    margin:14px 0 4px; font-size:13px;
  }
  .help-related .lbl{color:var(--text-faint); font-size:11px; text-transform:uppercase;
                     letter-spacing:.5px; font-weight:700;}
  .help-related a{
    background:var(--panel-2); border:1px solid var(--border-soft); border-radius:999px;
    padding:3px 10px; text-decoration:none; color:var(--text-dim);
  }
  .help-related a:hover{border-color:var(--accent); color:var(--accent-text);}
  /* ---------- THE STEP DOWN: three tracks, then two, then one ----------
     One ladder, extending the 900px and 600px steps that were already here. Each step
     moves a rail rather than dropping it, except where keeping it would cost more height
     than the reader gets back. */

  /* Medium — two columns. The section rail gives up its own column and returns to the left
     one, under the area list, rather than becoming a band across the top of the manual — a
     list of around sixty `h3` sections as a top band pushed the page title well down the
     screen, a reader arriving at a manual meeting a wall of links before a word of prose.

     Stacked in a two-row column, so the section list gets the sticky slot rather than the
     area list: `grid-template-rows:auto 1fr` makes row 2 as tall as the manual, so a sticky
     box inside it has somewhere to travel. The area list scrolls away with the top of the
     page; the section list is the one a reader uses while reading, so it is the one that
     stays. */
  @media (max-width:1239px){
    .layout{
      --help-gap:34px;
      grid-template-columns:var(--help-nav) minmax(0,1fr);
      grid-template-rows:auto 1fr;
      grid-template-areas:"nav main" "aside main";
    }
    .toc{position:static; max-height:none; overflow:visible; padding-right:0;}
    .help-onthis{
      padding-left:0; padding-top:13px; border-left:none;
      border-top:1px solid var(--border-soft);
    }
  }

  /* Phone and small tablet — one column. The area list becomes a single-line scrolling strip
     instead of disappearing, costing one line of height and giving back a phone reader's way
     to reach another manual; it scrolls inside its own box, so the page still never scrolls
     sideways. The section rail does go here: forty in-page anchors above the text is a wall,
     and search plus the to-top button already cover moving around one page on a phone. */
  @media (max-width:900px){
    .layout{
      --help-gap:14px;
      /* the same line length as the wide steps, so crossing 900px changes how many columns
         are beside the text, never how long a line is */
      --help-column:66ch;
      --help-measure:100%;
      /* The track is capped and the grid is centred — the item is NOT centred with auto
         margins, which would suppress `justify-self:stretch` and let the item fall back to
         fit-content, growing past a narrow track and scrolling the whole page sideways
         whenever it holds something wide, like a two-column table. Capping the track keeps
         the item stretched, so a wide table scrolls inside its own box instead. */
      grid-template-columns:minmax(0,var(--help-column));
      grid-template-areas:"nav" "main";
      justify-content:center;
      padding:16px 16px 60px;
    }
    .toc{
      position:static; max-height:none; overflow:visible; padding:0 0 7px;
      display:flex; align-items:center; gap:6px;
      overflow-x:auto; overscroll-behavior-x:contain;
      border-bottom:1px solid var(--border-soft);
    }
    .toc h4{display:none;}
    .toc a{
      flex:0 0 auto; white-space:nowrap; padding:5px 11px;
      border:1px solid var(--border-soft); border-radius:999px;
    }
    .toc a.current{background:var(--accent-soft); border-color:var(--accent);}
    .help-onthis{display:none;}
    h1{font-size:25px;}
    .help-search{max-width:none; order:3; flex-basis:100%;}
  }

  /* ---------- Mocked screenshots — THE MANUALS' illustrations ----------
     Built from the app's own tokens rather than captured as images: a drawing goes stale the
     moment a colour or label changes and nobody re-shoots it. These re-render in the
     reader's theme and cost no extra request. Illustrative, not pixel-exact.

     Not what the five quick-reference guides use any more: a drawing costs nothing and
     cannot leak anybody's data, but it is also a drawing, and the owner's reading was that
     the pictures *"are not the actual system, they seem to be made up"*. Those five carry
     real captures now — see `.qr-shot` at the foot of this file. This block stays because the
     manuals still draw with it and the staleness argument above is still true of them. */
  .shot{
    border:1px solid var(--border); border-radius:var(--radius); overflow:hidden;
    background:var(--bg); margin:18px 0 6px; font-size:12px; line-height:1.45;
    box-shadow:0 6px 18px rgba(0,0,0,.22);
  }
  .shot-cap{font-size:12px; color:var(--text-faint); margin:0 0 20px; padding-left:2px;}
  .shot-bar{
    display:flex; align-items:center; gap:7px; padding:8px 10px;
    background:var(--panel); border-bottom:1px solid var(--border); flex-wrap:wrap;
  }
  .shot-bar .nm{font-weight:700; font-size:13px; margin-right:4px;}
  .shot-lbl{font-size:11px; text-transform:uppercase; letter-spacing:.5px; color:var(--text-faint); font-weight:700;}
  .shot-btn{
    background:var(--panel-2); border:1px solid var(--border); border-radius:5px;
    padding:3px 8px; font-size:11px; font-weight:600; color:var(--text); white-space:nowrap;
  }
  .shot-btn.on{background:var(--accent-soft); border-color:var(--accent); color:var(--accent-text);}
  .shot-btn.pri{background:var(--accent-fill); border-color:var(--accent); color:#fff;}
  .shot-ico{
    width:20px; height:20px; border-radius:5px; background:var(--panel-2);
    border:1px solid var(--border); display:inline-block;
  }
  .shot-sp{flex:1;}
  /* A ONE-PIXEL RULE INSIDE A MOCKUP BAR, for a toolbar that actually has one — the team
     board draws `.a-vrule` between its Sort control and Mine, and a mockup that omitted it
     would be a picture of a toolbar the reader does not have. Sized against `.shot-btn`'s
     own box (3px padding on an 11px line) rather than stretched, so it cannot grow taller
     than the buttons beside it in a bar that wraps. */
  .shot-sep{
    width:1px; height:16px; background:var(--border); display:inline-block;
    margin:0 2px; flex:0 0 auto;
  }
  .shot-body{padding:10px; display:flex; gap:10px; align-items:flex-start; flex-wrap:wrap;}
  .shot-col{flex:1; min-width:120px;}
  .shot-col h6{
    margin:0 0 6px; font-size:11px; text-transform:uppercase; letter-spacing:.5px;
    color:var(--text-faint); font-weight:700; display:flex; gap:6px; align-items:center;
  }
  .shot-col h6 .n{background:var(--panel-2); border-radius:999px; padding:0 6px; font-size:9px;}
  .shot-card{
    background:var(--panel); border:1px solid var(--border-soft); border-radius:7px;
    padding:7px 8px; margin-bottom:6px;
  }
  .shot-card .t{font-weight:600; font-size:12px; margin-bottom:4px;}
  .shot-pill{
    display:inline-block; border-radius:999px; padding:1px 7px; font-size:10px; font-weight:600;
    background:var(--accent-soft); color:var(--accent-text); margin-right:4px;
  }
  .shot-pill.g{background:var(--green-soft); color:var(--green-text);}
  .shot-pill.y{background:var(--yellow-soft); color:var(--warn-text);}
  .shot-pill.r{background:var(--red-soft); color:var(--red-text);}
  .shot-field{
    background:var(--panel-2); border:1px solid var(--border); border-radius:5px;
    padding:4px 7px; font-size:11px; color:var(--text-faint); margin-bottom:6px;
  }
  .shot-field b{color:var(--text); font-weight:600;}
  .shot-row{display:flex; gap:7px; align-items:center; flex-wrap:wrap; margin-bottom:6px;}
  .shot-note{
    background:var(--accent-soft); border-left:3px solid var(--accent);
    padding:6px 9px; font-size:11px; border-radius:0 5px 5px 0;
  }
  /* WRAPS, like .shot-bar. Without this a tab strip drawn at 390px runs past its own box —
     three manuals worked around it inline before the rule existed. A drawing that overflows
     is worse than a plain sentence: it teaches the reader the product is broken. */
  .shot-tabs{display:flex; flex-wrap:wrap; gap:2px; padding:0 10px; background:var(--bg); border-bottom:1px solid var(--border);}
  .shot-tab{padding:5px 10px; font-size:11px; color:var(--text-dim); border:1px solid transparent; border-bottom:none;}
  .shot-tab.on{background:var(--panel); border-color:var(--border); border-radius:5px 5px 0 0; color:var(--text);}
  @media (max-width:600px){ .shot-body{flex-direction:column;} }

  /* Sign-in gate. The manual is hidden until a session is confirmed. */
  .help-gate{
    /* The access curtain — above everything by definition. See tokens.css. */
    position:fixed; inset:0; z-index:var(--z-boot); display:flex; align-items:center;
    justify-content:center; background:var(--bg); padding:20px; text-align:center;
  }
  .help-gate-card{
    background:var(--panel); border:1px solid var(--border); border-radius:var(--radius);
    padding:26px; max-width:420px;
  }
  .help-gate-card h2{font-size:17px; margin:0 0 8px; border:none; padding:0;}
  .help-gate-card p{font-size:14px; color:var(--text-dim); line-height:1.55; margin:0 0 14px;}
  body.help-locked .layout, body.help-locked .topbar{display:none;}

  /* ==========================================================================
     Focus, placeholder, disabled — the three global state rules (design-system.md §18),
     and the only place any of them is defined. Position is load-bearing: these sat near the
     top of the sheet and lost the cascade tie to the base control rule; at the end they win
     every tie without `!important`. Add new ones here, not above.
     ========================================================================== */

  /* The focus ring, replacing bare `outline:none` declarations that left tabbing invisible —
     a WCAG 2.4.7 / 2.4.11 failure. `:focus-visible`, not `:focus`, so a mouse click does not
     leave a ring sitting there — the browser decides: keyboard navigation shows it, a click
     does not, and a text input shows it either way. Never add `outline:none` without a
     replacement in the same rule; specificity here is low so it is easy to override, which
     makes this rule the guard, not the cascade. */
  :focus-visible{
    outline:2px solid var(--focus-ring);
    outline-offset:2px;
  }

  /* `opacity:1` is load-bearing: Firefox applies its own opacity to `::placeholder` on top
     of the colour, silently dimming the token below the ratio it was chosen for. */
  ::placeholder{color:var(--text-faint); opacity:1;}

  /* Opacity alone used to be the signal, at several different values across the app, faint
     enough that a disabled button could read as an enabled secondary one. One opacity now,
     plus two signals that survive it: a flat neutral wash and a softened edge. */
  button:disabled, input:disabled, select:disabled, textarea:disabled, .is-disabled{
    opacity:.55;
    background:var(--gray-soft);
    border-color:var(--border-soft);
    cursor:not-allowed;
  }

/* ---------- The landing page and cross-manual search results ---------- */

/* Area cards: the first thing on the landing page, because "where do I go" is the question
   somebody arriving at Help actually has. */
.help-cards{
  display:grid; gap:10px; margin:14px 0 4px;
  grid-template-columns:repeat(auto-fill, minmax(240px, 1fr));
}
.help-card{
  display:block; padding:12px 14px; text-decoration:none;
  border:1px solid var(--border); border-radius:var(--radius-sm);
  background:var(--panel-2); transition:border-color var(--dur-micro) linear, transform var(--dur-micro) var(--ease-move);
}
.help-card:hover,.help-card:focus-visible{ border-color:var(--accent); transform:translateY(-1px); }
.help-card b{ display:block; color:var(--text); font-size:14px; margin-bottom:3px; }
.help-card span{ display:block; color:var(--text-dim); font-size:13px; line-height:1.55; }

.help-steps{ margin:10px 0 0; padding-left:22px; }
.help-steps li{ margin:7px 0; line-height:1.6; }
.help-steps b{ color:var(--text); }

/* A boxed aside — the thing on the page that must not be read past. Border-left rather than
   a full accent box: these sit inside running text, and a filled panel would compete with the
   section headings. */
.callout{
  margin:14px 0; padding:12px 14px;
  background:var(--panel-2); border:1px solid var(--border-soft);
  border-left:3px solid var(--accent); border-radius:var(--radius-sm);
}
.callout h4{
  margin:0 0 6px; font-size:14px; font-weight:600; color:var(--text);
}
.callout p{ margin:0 0 8px; color:var(--text-dim); line-height:1.6; }
.callout p:last-child{ margin-bottom:0; }
.callout ul,.callout ol{ margin:6px 0 0; padding-left:20px; color:var(--text-dim); line-height:1.6; }

/* Question/answer pairs, for the short answers people want without reading a section. */
.help-qa{ margin:10px 0 0; }
.help-qa dt{ font-weight:600; color:var(--text); margin-top:12px; }
.help-qa dd{ margin:4px 0 0; padding-left:0; color:var(--text-dim); line-height:1.6; }

.help-results{ margin:18px 0 6px; padding-top:14px; border-top:1px solid var(--border-soft); }
.help-results h4{
  margin:0 0 8px; font-size:11px; color:var(--text-dim);
  text-transform:uppercase; letter-spacing:.06em;
}
.help-result{
  display:block; padding:9px 11px; margin-bottom:7px; text-decoration:none;
  border:1px solid var(--border); border-radius:var(--radius-sm); background:var(--panel-2);
}
.help-result:hover,.help-result:focus-visible{ border-color:var(--accent); }
.help-result b{ color:var(--text); font-size:13px; }
/* Which manual the answer is in — the difference between "go read that" and "go hunt". */
.help-result-area{
  display:inline-block; margin-left:8px; padding:1px 6px; border-radius:4px;
  font-size:10px; text-transform:uppercase; letter-spacing:.05em;
  background:var(--accent-soft); color:var(--accent-text); border:1px solid var(--accent);
}
.help-result-text{ display:block; margin-top:4px; color:var(--text-faint); font-size:12px; line-height:1.55; }

/* The area list — the eight manuals. The `.sub` and `.active` rules that used to sit here
   moved to .help-onthis with the section links themselves; nothing in .toc carries either
   any more, so leaving them would be two selectors that can never match. */
.toc a.current{ color:var(--accent-text); font-weight:600; }

/* ---------- REDUCED MOTION ----------
   The manuals had no answer to this at all: the area cards' hover lift and the to-top
   button's fade ran whatever the reader had asked for. Same shape as the application's own
   block in CSS/base.css — the travel goes, the state change stays — and `!important` because
   a media query adds no specificity and each manual's own `<style>` loads after this file. */
@media (prefers-reduced-motion: reduce){
  .help-card, .help-totop, .toc a, .help-onthis a, .help-suggest button{
    transition-duration:1ms !important;
  }
}

/* ================================================================================
   THE FIVE QUICK-REFERENCE GUIDES — quick-tasks · quick-notes · quick-calendar ·
   quick-team · quick-okrs

   One copy, here, not five in five `<style>` blocks. The guides load tokens.css, base.css and
   this file and nothing else, so this is where their layout belongs.

   A guide is NOT the manual: no topbar, no contents rail, no search, no sign-in gate. It is
   sized to sit inside the application's own preview frame (JS/alt/alt-layers.js
   altPreviewOpen()) or to stand alone by URL. */
body.qr-body{ padding:0; }

/* The prose is capped and the pictures are not — the same split `.content` makes between
   `.content > p` and `.content > .shot`: a screenshot of a wide toolbar shown in a narrow
   column is a picture nobody can read, and widening the guide to fit it would put the prose
   on an unreadable line. */
.qr{ max-width:1100px; margin:0 auto; padding:22px 22px 46px; }
.qr > *{ max-width:600px; }
.qr > .qr-shot{ max-width:none; }

/* Product identity, above the breadcrumb — sys_branding.md requires the STRIDE mark in Help
   and Quick Start headers; the full manuals already carry it in their topbar, but the
   quick-start guides are deliberately chromeless and had never gained an equivalent. This is
   that equivalent: a small, muted line above `.qr-crumb`. The mark is decorative (`alt=""` +
   `aria-hidden`) because "STRIDE" is live text right beside it, or a screen reader would
   announce it twice. */
.qr-brand{
  display:flex; align-items:center; gap:6px; font-size:12px; font-weight:700;
  color:var(--text-faint); margin:0 0 10px;
}
.qr-brand img{ flex:0 0 auto; }

.qr-crumb{ font-size:12px; color:var(--text-faint); margin:0 0 16px; }
.qr-crumb a{ color:var(--text-faint); text-decoration:none; }
.qr-crumb a:hover{ color:var(--accent-text); text-decoration:underline; }
.qr-top{ display:flex; align-items:flex-start; gap:12px; }
.qr-ico{
  width:34px; height:34px; border-radius:9px; flex:0 0 auto; margin-top:1px;
  background:var(--accent-soft); color:var(--accent-text);
  display:flex; align-items:center; justify-content:center;
}
/* The eyebrow above the title, in the same mono-cap voice `.eyebrow` uses on the landing
   page — its own rule rather than a shared selector, since the landing page's version sets a
   fixed mono font this guide's body text does not load. */
.qr-eyebrow{
  font-size:11px; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  color:var(--accent-text); margin:0 0 4px;
}
.qr-top h1{ margin:0; font-size:21px; }
.qr-lede{ font-size:15px; color:var(--text-dim); margin:6px 0 0; }
.qr h2{ font-size:16px; margin:30px 0 8px; padding-top:0; border-top:none; }
.qr h2:first-of-type{ margin-top:28px; }
.qr dl{ margin:8px 0 4px; }
.qr dt{ font-weight:700; margin-top:12px; }
.qr dd{ margin:2px 0 0; color:var(--text-dim); }
/* The closing summary cards — shared by every quick guide that ends on one, not just this
   guide's three; if a third guide needs the same "why this page matters" close, it reuses
   this rather than a second version. The tip callout and the numbered legend are the how;
   these are the so-what, reusing `.card` rather than a second box — core rule 4 (one
   canonical implementation).

   auto-fit/minmax, not a fixed column count plus a breakpoint: cards fit the prose column
   three-up on desktop and fold to two-up then one-up as the column narrows, with no media
   query needed. */
.qr-cards{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(160px, 1fr));
  gap:12px; margin:18px 0 8px;
}
.qr-cards .card{ margin:0; }        /* .card already sets the box and its h4 — nothing to redo */
.qr-check{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:7px; }
.qr-check li{
  position:relative; padding-left:20px;
  color:var(--text-dim); font-size:13px; line-height:1.5;
}
/* Green, not the accent colour: the same glyph and logic as login.css's requirement ticks
   and alt-storage-retention.css's saved-clean state — one visual language for "this is done
   or true" across the product. */
.qr-check li::before{
  content:'\2713'; position:absolute; left:0; top:0;
  color:var(--green-text); font-weight:700;
}
.qr-check b{ color:var(--text); }
.qr-more{
  margin-top:30px; padding-top:16px; border-top:1px solid var(--border);
  font-size:13px; color:var(--text-dim);
}
@media (max-width:420px){ .qr{ padding:16px 14px 34px; } }

/* ---------- REAL CAPTURES OF THE REAL PRODUCT ----------
   Headless Chrome drives the actual page, the page's in-memory rows are replaced with an
   invented cast, and the region the surrounding prose is about is clipped out of it. Nothing
   with real data in it may be committed here — not blurred and not cropped, but never
   captured. The utilities rail is the specific trap, since its quick links and weather
   locations are the reader's own configuration; it is put away before every shot.

   Two files per picture, and `prefers-color-scheme` is the wrong switch for them: a help
   page's theme is the application's, written by the suite's own control with no "system"
   setting at all, so the switch is the `data-theme` attribute the guide has already stamped
   rather than a media feature. The cost is the second file always being fetched even when
   hidden; crops are tight and the format is WebP to keep that cheap. `width`/`height` are on
   every `<img>` so the column does not jump while they arrive. */
.qr-shot{ margin:20px 0 8px; }
.qr-shot img{
  display:block; width:auto; max-width:100%; height:auto;
  border:1px solid var(--border); border-radius:var(--radius);
  background:var(--bg); box-shadow:0 6px 18px rgba(0,0,0,.22);
}
/* The size scale. `width:auto` above is the floor — a capture never renders past its own
   intrinsic pixel size — which stops a small screenshot being blown up, but still leaves every
   guide showing whatever size its capture happened to be, *"all over the place"* in the
   owner's words. These modifiers cap how much of the column a capture may reach, sized by
   what it is showing rather than its raw file dimensions.

   They land on the `<img>` itself, alongside `qr-img-dark`/`qr-img-light`, not on the
   `<figure>`: two suites this lane does not own match the figure tag as an exact literal
   string, so a second class there would fail them, while the `<img>` classes are read with a
   word-boundary check and tolerate one. That placement also means these rules must out-specify
   `.qr-shot img` above with two classes on one element rather than a bare class, or the base
   rule's `max-width:100%` would simply win.
     --lg  the full column — no cap tighter than the base rule's own `max-width:100%`. Dense
           full-page captures and wide, short strips both read worse at any less. The value
           stays `100%`, matching the base rule, rather than `none`: `none` removes the
           ceiling entirely, and a capture wider than the column would overflow `.qr-shot` and
           widen the whole page.
     --md  a self-contained panel or modal, not a full page — capped a little past the prose
           column so its own text stays crisp without pulling level with a full-page capture.
     --sm  a small, single control — the narrowest of the three. */
.qr-shot img.qr-shot--lg{ max-width:100%; }
.qr-shot img.qr-shot--md{ max-width:680px; }
.qr-shot img.qr-shot--sm{ max-width:460px; }
/* The one portrait capture is taller than it is wide, so a width cap does nothing useful for
   it and it gets a max-height instead — `width` and `height` stay `auto` from the base rule,
   so the image's own aspect ratio picks the matching width. */
.qr-shot img.qr-shot--tall{ max-height:640px; }
/* Two classes deep, all three of them, for specificity rather than taste: `.qr-shot img`
   above scores higher than a bare class, so the default-hidden half was painted underneath
   the other one in dark mode without this. */
.qr-shot .qr-img-light{ display:none; }
:root[data-theme="light"] .qr-shot .qr-img-dark{ display:none; }
:root[data-theme="light"] .qr-shot .qr-img-light{ display:block; }
.qr-shot figcaption{
  font-size:12px; color:var(--text-faint); margin:8px 0 0; padding-left:2px;
  max-width:600px;
}

/* On a phone the picture scrolls inside its own box, and the page does not — a wide capture
   scaled down to a narrow column is unreadable, which is worse than no picture. The design
   system's rule for wide content is that it scrolls in its own container rather than widening
   the document, the same treatment `.content > table` gets. */
@media (max-width:760px){
  .qr-shot{
    overflow-x:auto; -webkit-overflow-scrolling:touch;
    border-radius:var(--radius);
  }
  /* `width:auto; max-width:760px`, not a fixed width: `width:auto` stops a capture narrower
     than 760 being stretched up to it, and the 760px ceiling stops a dense, very wide capture
     growing the scroll distance beyond a readable width. */
  .qr-shot img{ width:auto; max-width:760px; }
  /* The desktop size scale stops here on purpose: the `--lg`/`--md`/`--sm` rules above
     out-specify this one, so without this override they would keep binding under a
     phone-width viewport and either do nothing or hold a capture below this breakpoint's own
     ceiling instead of letting `width:auto` size it up to it. `--tall`'s cap is a max-height
     and is not part of this problem. */
  .qr-shot img.qr-shot--lg,
  .qr-shot img.qr-shot--md,
  .qr-shot img.qr-shot--sm{ max-width:760px; }
  .qr-shot figcaption{ position:sticky; left:0; }
}
@media (prefers-reduced-motion: reduce){
  .qr-shot{ scroll-behavior:auto; }
}

/* ================= THE CONCEPT-MODEL COMPONENT (`.qr-cm-*`) =================
   One component, three guides: quick-okrs.html, quick-team.html and quick-tasks.html each
   draw a chain of linked concept cards — icon, name, cardinality badge, explanation — plus
   callout cards underneath. This class contract is what lets guides built independently land
   as one canonical component instead of rival ones: sys_engineering-principles.md rule 4, one
   implementation per question. Every class name is frozen by that contract; extend it with a
   modifier instead of renaming or forking it (`.qr-cm-row.is-sub` below).

   Built as real HTML, not a picture — a screen reader gets nothing from an embedded graphic.
   Declared here, not inline, since quick-reference.test.js asserts all five guides carry no
   page-level `<style>` copy.

   This component replaces quick-team.html's own one-off hierarchy diagram rather than sitting
   beside it, since restating the same containment facts in a second visual language is the
   duplication rule 4 forbids. Two facts that diagram carried and this one's mockup did not ask
   for were preserved rather than dropped, moved into `.qr-cm-lede` and a row's own note.

   A real `<ol>`, not a row of divs: each concept is read by a screen reader as "1 of N", "2 of
   N" and so on. Cardinality is a badge of text, never colour alone, and sits in the normal
   reading order of its row. Every claim a guide makes with this component is verified against
   the schema and the real source in that guide's own quick-reference.test.js grounding block
   — this file only owns how the claim is drawn, never whether it is true. */
.qr-cm{ margin:8px 0 0; }
.qr-cm-lede{ font-size:14px; color:var(--text-dim); margin:10px 0 0; }
.qr-cm-chain{ list-style:none; margin:14px 0 18px; padding:0; }

/* One row, two halves: `.qr-cm-card` on the left, `.qr-cm-note` on the right — the mockups'
   own layout at desktop width. `position:relative` lets the connector below anchor off this
   element rather than the card inside it, so a narrower `.is-sub` row still draws its
   connector from the row's own left edge. */
.qr-cm-row{
  position:relative; margin:0 0 18px;
  display:grid; grid-template-columns:168px 1fr; gap:4px 16px; align-items:start;
}
.qr-cm-row:last-child{ margin-bottom:0; }
/* The connector: a short vertical drop from one row into the next, positioned off the icon's
   own left edge so the chain reads top to bottom with no extra element in the DOM. */
.qr-cm-row:not(:last-child)::after{
  content:""; position:absolute; left:29px; bottom:-18px; width:2px; height:18px;
  background:var(--border-strong);
}
.qr-cm-card{
  grid-column:1; padding:14px 15px;
  border:1px solid var(--border); border-radius:var(--radius); background:var(--panel-2);
  display:flex; flex-direction:column; align-items:flex-start; gap:6px;
}
.qr-cm-ico{
  width:28px; height:28px; border-radius:8px; flex:0 0 auto;
  background:var(--accent-soft); color:var(--accent-text);
  display:flex; align-items:center; justify-content:center;
}
.qr-cm-name{ font-weight:700; font-size:14px; color:var(--text); }
.qr-cm-eg{ font-size:12px; color:var(--text-faint); }
.qr-cm-badge{
  font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.03em;
  color:var(--accent-text); background:var(--accent-soft); border-radius:999px;
  padding:2px 8px; white-space:nowrap;
}
/* Neutral, not a second cardinality colour: the ordinary case a chain is the exception to is
   not a relationship fact of the same kind as "1 : many", so it gets its own modifier rather
   than the bare class's accent colour. */
.qr-cm-badge.is-neutral{
  color:var(--text-dim); background:var(--panel); border:1px solid var(--border-strong);
}
.qr-cm-note{
  grid-column:2; padding-top:2px; font-size:13px; color:var(--text-dim); line-height:1.6;
}
.qr-cm-note-h{ margin:0 0 3px; font-weight:700; color:var(--text); }
.qr-cm-note p{ margin:0 0 6px; }
.qr-cm-note p:last-child{ margin-bottom:0; }
.qr-cm-chips{ list-style:none; margin:9px 0 0; padding:0; display:flex; flex-wrap:wrap; gap:6px; }
.qr-cm-chip{
  font-size:12px; color:var(--text); background:var(--panel);
  border:1px solid var(--border); border-radius:999px; padding:3px 10px;
}

/* A nested/branching row, a modifier on `.qr-cm-row` rather than a second component: a
   narrower card column so the indent reads as "part of the row above", and its own connector
   sits closer in so a chain of sub-rows still joins visibly to the row that introduced them. */
.qr-cm-row.is-sub{
  margin-left:32px; grid-template-columns:136px 1fr;
}
.qr-cm-row.is-sub:not(:last-child)::after{ left:-15px; }
.qr-cm-row.is-sub .qr-cm-card{ padding:11px 13px; }

/* Two callouts, side by side at desktop. `.qr-cm-call` is its own component rather than a
   reuse of the manuals' `.callout`, which is an inline aside inside running prose with no room
   for two side by side; these are freestanding cards a reader compares, a different job.
   `.is-info`/`.is-tip` are a colour difference only, never the sole way the two are told apart
   — the heading text always says which is which. */
.qr-cm-calls{
  display:grid; grid-template-columns:1fr 1fr; gap:12px; margin:18px 0 0;
}
.qr-cm-call{
  padding:13px 15px; border-radius:var(--radius); background:var(--panel-2);
  border:1px solid var(--border); border-top:3px solid var(--border-strong);
}
.qr-cm-call.is-info{ border-top-color:var(--accent); }
.qr-cm-call.is-tip{ border-top-color:var(--green); }
.qr-cm-call-h{ margin:0 0 6px; font-size:14px; font-weight:700; color:var(--text); }
.qr-cm-call p{ margin:0 0 6px; font-size:13px; color:var(--text-dim); line-height:1.6; }
.qr-cm-call p:last-child{ margin-bottom:0; }
.qr-cm-list{ list-style:none; margin:8px 0 0; padding:0; display:flex; flex-direction:column; gap:5px; }
.qr-cm-list li{
  font-size:13px; color:var(--text-dim); line-height:1.5; padding-left:20px; position:relative;
}
/* A checkmark, drawn, not typed, so it can never drift from a glyph a screen reader would
   otherwise try and fail to pronounce meaningfully. `aria-hidden` is implicit: a `::before`
   with no `role` is never exposed to the accessibility tree. */
.qr-cm-list li::before{
  content:""; position:absolute; left:1px; top:6px; width:9px; height:5px;
  border-left:2px solid var(--green-text); border-bottom:2px solid var(--green-text);
  transform:rotate(-45deg);
}

/* The closing "big picture" card. Not every guide needs one, so this is defined for the
   guides that do use it rather than assumed universal. */
.qr-cm-big{
  margin:18px 0 0; padding:14px 16px; border-radius:var(--radius);
  background:var(--accent-soft); border:1px solid var(--accent);
}
.qr-cm-big-h{ margin:0 0 6px; font-size:14px; font-weight:700; color:var(--text); }
.qr-cm-big p{ margin:0; font-size:13px; color:var(--text-dim); line-height:1.6; }

/* One column on a phone: below the point a 168px card column and readable prose no longer
   both fit, the note drops under the card instead of squeezing unreadable. The connector line
   is hidden with it, since stacked cards already touch; the two callouts stack to one column. */
@media (max-width:620px){
  .qr-cm-row{ grid-template-columns:1fr; }
  .qr-cm-row.is-sub{ grid-template-columns:1fr; margin-left:20px; }
  .qr-cm-note{ grid-column:1; }
  .qr-cm-row:not(:last-child)::after{ display:none; }
  .qr-cm-calls{ grid-template-columns:1fr; }
}


/* ═══ THE QUICK-START SUMMARY PANEL, AND THE DIVIDER UNDER IT ═══════════════════════════
   Each of the seven guides opens with a wide bordered panel that says the whole page at a
   glance before handing over to the written guide below it.

   Only the shell lives here, and that is the whole point: the seven panels are genuinely
   different inside — a screenshot with overlaid badges, a hierarchy diagram with connectors,
   an icon grid — so there is no shared interior to factor out, and inventing one would be a
   component nobody asked for. What is shared is the box, its width, and the divider announcing
   the written guide below. Each page styles its own interior in its own `<style>` block — the
   same split that keeps seven parallel writers safe, the comment above `.qr-cards` records
   what happens otherwise.

   The panel is uncapped, like a screenshot and for the same reason: `.qr > *` caps children at
   the prose measure, and a diagram squeezed into that column is a picture nobody can read, so
   this joins `.qr-shot` in opting out. */
.qr > .qs-card{ max-width:none; }
.qs-card{
  border:1px solid var(--border); border-radius:14px; background:var(--surface);
  padding:26px 26px 24px; margin:22px 0 6px;
}
/* The header inside the panel is deliberately absent — every supplied design repeated the
   page's own title block redundantly inside the panel, so the panel opens on its description,
   and `.qs-lede` is that description rather than a second title. */
.qs-lede{ margin:0 0 18px; color:var(--text-dim); line-height:1.6; max-width:78ch; }

/* The handover: a quiet rule and a mono-cap label in the same voice as `.qr-eyebrow`, marking
   where the at-a-glance panel ends and the written guide begins. */
.qs-divider{
  margin:30px 0 0; padding-top:18px; border-top:1px solid var(--border);
  font-size:11px; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  color:var(--text-faint);
}