/* ── Help Center app shell ─────────────────────────────────────────────────
   An indigo L (header across the top, nav down the left) with a single white
   plane tucked into the corner. The page reads as one surface cut by the nav
   and header, rather than cards floating on a tinted field.

   Content-block styling still comes from guide.css / help.css; this file only
   owns the frame, the nav, the landing tiles and the list rows.            */

:root{
  /* 240, not 300: the nav was eating horizontal space the content needed. The brand
     lockup lives in the same grid column - check it still fits before narrowing further. */
  --nav-w:228px; --head-h:76px; --curve:60px;
  --seam:#818cf8; --seam-w:5px;   /* lighter indigo: --gold reads as invisible on the indigo nav */
  /* the accent for DARK surfaces (nav, header, edit bar). --gold is the accent
     for white ones; on this palette the two cannot be the same colour. */
  --on-dark:#c7ccff; --on-dark-line:#818cf8;
  /* one step lighter than --muted, for footer text, eyebrows and placeholders.
     Undefined it is not "grey by default" - the declaration is invalid and the
     text silently inherits full ink. */
  --faint:#8c92a8; --line-soft:#eceef6;
}

body.shell-body{background:var(--charcoal);margin:0}
.shell{display:grid;grid-template-columns:var(--nav-w) minmax(0,1fr);
       grid-template-rows:var(--head-h) minmax(0,1fr);min-height:100vh}

/* ── header ── */
.hd{grid-column:1/-1;display:grid;grid-template-columns:var(--nav-w) minmax(0,1fr);
    align-items:center;background:var(--charcoal);position:sticky;top:0;z-index:30}
.hd__brand{display:flex;align-items:center;padding:0 20px;text-decoration:none}
/* The real brand lockup has PURPLE brackets on dark grey text, so it needs a
   light ground - on the indigo nav the brackets all but vanish. The knockout
   version reads, but throws the brackets away, which are the brand. Give the
   real one a white plate instead. */
.hd__plate{display:inline-flex;align-items:center;background:#fff;border-radius:9px;
  padding:6px 11px;line-height:0}
.hd__logo{height:26px;width:auto;display:block}
.hd__help{font-size:24px;font-weight:400;color:rgba(255,255,255,.92);
  letter-spacing:-.01em;margin-left:11px;line-height:1}
.hd__bar{display:flex;align-items:center;gap:12px;padding:0 28px 0 22px}
.hd__spacer{flex:1 1 auto}

.hsearch{position:relative;flex:1 1 auto;max-width:480px}
.hsearch input{width:100%;font:inherit;font-size:14px;color:#fff;padding:9px 14px 9px 38px;
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.15);
  border-radius:9px;outline:none}
.hsearch input::placeholder{color:rgba(255,255,255,.52)}
.hsearch input:focus{border-color:rgba(255,255,255,.36);background:rgba(255,255,255,.12)}
.hsearch__i{position:absolute;left:13px;top:50%;transform:translateY(-50%);
  color:rgba(255,255,255,.55);pointer-events:none}
.hsearch__res{position:absolute;top:calc(100% + 7px);left:0;right:0;z-index:60;background:#fff;
  border:1px solid var(--card-border);border-radius:12px;overflow:hidden;text-align:left;
  box-shadow:0 12px 34px rgba(0,0,0,.28)}
.hsearch__res a{display:block;padding:10px 15px;text-decoration:none;border-bottom:1px solid var(--card-border)}
.hsearch__res a:last-child{border-bottom:0}
.hsearch__res a:hover{background:#f5f6fc}
.hsearch__res strong{display:block;color:var(--ink);font-size:14px}
.hsearch__res span{display:block;color:var(--muted);font-size:12.5px;margin-top:2px}
.hsearch__none{margin:0;padding:13px 15px;color:var(--muted);font-size:13.5px}

/* header buttons all share one metric so they measure identically */
.hbtn,.hbtn--gold,.hbtn--white{font-family:inherit;font-size:13px;line-height:1.35;
  padding:8px 15px;border-radius:9px;white-space:nowrap;border:1px solid transparent;
  cursor:pointer;text-decoration:none;display:inline-block}
.hbtn{border-color:rgba(255,255,255,.35);color:rgba(255,255,255,.9);font-weight:500;background:none}
.hbtn:hover{border-color:rgba(255,255,255,.7);color:#fff}
.hbtn--gold{background:var(--gold);color:#fff;font-weight:600}
.hbtn--gold:hover{background:var(--gold-deep);color:#fff}
.hbtn--white{background:#fff;color:var(--charcoal);font-weight:600}
.hbtn--white:hover{background:#e7e9f4;color:var(--charcoal)}
.hbtn--topics{display:none}

/* ── nav: collapsed groups, one open at a time, colour is the only signal ── */
/* 10px side padding, so a nav label's text starts on the same 20px as the brand. */
.snav{background:var(--charcoal);padding:14px 10px 40px;overflow-y:auto;
      position:sticky;top:var(--head-h);height:calc(100vh - var(--head-h))}
.grp{border-bottom:1px solid rgba(255,255,255,.07)}
.grp:last-child{border-bottom:0}
.grp__hd{display:flex;align-items:center;gap:10px;width:100%;height:54px;text-align:left;
  cursor:pointer;font-family:inherit;font-size:14px;font-weight:400;color:rgba(255,255,255,.9);
  background:none;border:0;padding:0 10px;line-height:1.3;border-radius:8px}
.grp__hd:hover{color:#fff}
.grp__t{flex:1 1 auto;min-width:0;display:-webkit-box;-webkit-line-clamp:2;
  -webkit-box-orient:vertical;overflow:hidden}
.grp__chev{flex:0 0 auto;width:16px;height:16px;color:rgba(255,255,255,.45);
  transition:transform .16s ease}
.grp.is-open .grp__chev{transform:rotate(180deg)}
/* an animatable 0fr -> 1fr row: slides to the real content height, no max-height guess */
.grp__body{display:grid;grid-template-rows:0fr;transition:grid-template-rows .24s ease}
.grp.is-open .grp__body{grid-template-rows:1fr}
.grp__inner{overflow:hidden;min-height:0}
.grp.is-open .grp__inner{padding-bottom:8px}
.grp.is-off .grp__hd{opacity:.5}

.snav__sec{display:flex;align-items:center;gap:9px;width:100%;min-height:44px;text-align:left;
  cursor:pointer;font-family:inherit;font-size:13.5px;font-weight:400;
  color:rgba(255,255,255,.66);background:none;border:0;border-radius:8px;
  padding:6px 10px 6px 20px;line-height:1.3;text-decoration:none}
.snav__sec:hover{color:#fff}
/* three lines, not two: at 228px the longest section names took an ellipsis. The row
   grows to fit them, which is why the height below is a MINIMUM. */
.snav__t{flex:1 1 auto;min-width:0;display:-webkit-box;-webkit-line-clamp:3;
  -webkit-box-orient:vertical;overflow:hidden}
.snav__n{flex:0 0 auto;font-size:11px;color:rgba(255,255,255,.42)}
/* clicked = colour only. No wash, no bar. */
.snav__sec.is-on{color:var(--on-dark)}
.snav__sec.is-on .snav__n{color:var(--on-dark)}

/* ── the white plane ── */
.plane{background:#fff;border-top-left-radius:var(--curve);
  min-height:calc(100vh - var(--head-h));padding:34px 40px 30px;
  display:flex;flex-direction:column;
  border-top:var(--seam-w) solid var(--seam);border-left:var(--seam-w) solid var(--seam)}
.plane__body{flex:1 1 auto}
.plane h1{margin:0;font-size:27px;font-weight:800;letter-spacing:-.02em;line-height:1.15}
.plane .lead-intro{margin:8px 0 0;color:var(--muted);font-size:14.5px;max-width:64ch;text-wrap:pretty}
.crumb-top{font-size:11.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;
  color:var(--faint);margin:0 0 6px}

/* ── landing tiles: name + what it covers ── */
.tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:16px;
  margin:26px 0 0;max-width:1080px}
.tile{display:flex;flex-direction:column;height:152px;background:#fff;border:1px solid #e5e7f0;
  border-radius:14px;padding:20px 22px;cursor:pointer;text-align:left;font-family:inherit;
  text-decoration:none;transition:background .13s ease,border-color .13s ease}
.tile:hover{background:#f5f6fc;border-color:#d5d9ea}
.tile__t{margin:0;font-size:17.5px;font-weight:750;color:var(--ink);letter-spacing:-.01em;
  line-height:1.25;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.tile__b{margin:9px 0 0;font-size:13.5px;color:var(--muted);line-height:1.5;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}

/* ── list rows: every row the same height, text clamps instead ── */
.rlist{margin:24px 0 0;border-top:1px solid var(--line-soft,#eceef6);max-width:880px}
.rrow{display:flex;align-items:center;gap:18px;height:76px;padding:0 6px 0 4px;
  border-bottom:1px solid var(--line-soft,#eceef6);text-decoration:none}
.rrow:hover{background:#fafbff}
.rrow__txt{flex:1 1 auto;min-width:0}
.rrow__t{display:block;font-size:15.5px;font-weight:650;color:var(--ink);line-height:1.35;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rrow__d{display:block;margin-top:2px;font-size:13.5px;color:var(--muted);line-height:1.45;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rrow__go{flex:0 0 auto;width:26px;height:26px;color:#bcc0da;transition:color .12s,transform .12s}
.rrow:hover .rrow__go{color:var(--ink);transform:translateX(2px)}

/* ── article ── */
.backlink{display:inline-flex;align-items:center;gap:6px;margin:0 0 12px;font-size:13px;
  font-weight:600;color:var(--muted);text-decoration:none}
.backlink:hover{color:var(--ink)}
.artwrap{max-width:760px;margin-top:20px}
.morein{max-width:760px;margin:44px 0 0;padding-top:22px;border-top:1px solid var(--line-soft,#eceef6)}
.morein h2{margin:0 0 4px;font-size:11px;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--faint)}
.morein .rlist{margin-top:6px;border-top:0}
.morein .rrow{height:56px}
.morein .rrow__t{font-size:14.5px}

/* ── footer: part of the white surface, pinned to its bottom ── */
.pfoot{margin-top:46px;padding-top:20px;border-top:1px solid var(--line-soft,#eceef6);
  display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.pfoot__logo{height:30px;width:auto;display:block;opacity:.9}
.pfoot__c{font-size:12.5px;color:var(--faint)}
.pfoot__spacer{flex:1 1 auto}
.pfoot a{font-size:12.5px;color:var(--muted);font-weight:500;text-decoration:none}
.pfoot a:hover{color:var(--ink)}

/* ── mobile: stack everything ──
   Every track is minmax(0,..) because a bare 1fr refuses to shrink below its
   content and pushes the page sideways. The nav becomes a drawer rather than a
   wall of rows you must scroll past to reach any content. */
@media (max-width:900px){
  :root{--nav-w:0px;--curve:0px;--seam-w:4px}
  .shell{grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto auto auto}
  .hd{grid-column:1;display:flex;flex-wrap:wrap;align-items:center;gap:10px;
      height:auto;padding:12px 16px}
  .hd__brand{padding:0}
  .hd__logo{height:21px}
  .hd__plate{padding:5px 9px;border-radius:8px}
  .hd__help{font-size:20px;margin-left:9px}
  .hd__bar{padding:0;width:100%;gap:8px;flex-wrap:wrap}
  .hd__spacer{display:none}
  .hsearch{max-width:none;flex:1 1 100%;order:-1}
  .hbtn--topics{display:inline-block}
  .snav{display:none;position:static;height:auto;padding:8px 12px 20px}
  body.nav-open .snav{display:block}
  .plane{border-left:0;padding:22px 16px 26px;min-height:0}
  .tiles{grid-template-columns:minmax(0,1fr);max-width:none;margin-top:20px}
  .tile{height:auto;min-height:120px}
  .rlist,.artwrap,.morein{max-width:none}
  .rrow{height:92px}
  .rrow__t{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
  .pfoot__spacer{flex-basis:100%}
}

/* ── structure editor (app shell) ─────────────────────────────────────────
   Only applies on the /edit routes, which render [data-structure].          */
.st-bar{grid-column:1/-1;display:flex;align-items:center;gap:14px;padding:9px 22px;
  background:#413ea0;border-bottom:1px solid rgba(255,255,255,.12);
  color:rgba(255,255,255,.8);font-size:12.5px;position:sticky;top:var(--head-h);z-index:29}
.st-bar b{color:var(--on-dark);font-weight:600}
.st-bar__sp{flex:1 1 auto}
.st-bar__st{font-size:12px;color:rgba(255,255,255,.55)}
.st-bar__st.is-dirty{color:var(--on-dark)}
.st-bar__btn{font-family:inherit;font-size:12.5px;font-weight:600;border-radius:8px;
  padding:6px 14px;cursor:pointer;border:1px solid rgba(255,255,255,.3);background:none;
  color:rgba(255,255,255,.9);text-decoration:none;line-height:1.35}
.st-bar__btn:hover{border-color:rgba(255,255,255,.65);color:#fff}
.st-bar__btn--go{background:var(--gold);border-color:var(--gold);color:#fff}
.st-bar__btn--go:hover{background:var(--gold-deep);border-color:var(--gold-deep);color:#fff}
.st-bar__btn[disabled]{opacity:.45;cursor:default}

/* anything you can type into */
.st-edit{outline:1px dashed transparent;outline-offset:3px;border-radius:3px;cursor:text}
.st-edit:hover{outline-color:#b9bdd7}
.st-edit:focus{outline:2px solid var(--gold);outline-offset:3px;background:rgba(99,102,241,.09)}
.st-edit:empty::before{content:attr(data-ph);color:var(--faint);font-style:italic}
/* a description still pulled from the article body, not yet written */
.rrow__d.is-auto{color:var(--faint);font-style:italic}
.rrow__d.is-auto::after{content:"auto";font-style:normal;font-size:10px;font-weight:700;
  letter-spacing:.06em;text-transform:uppercase;color:var(--gold-text);background:#eef0ff;
  border-radius:4px;padding:1px 5px;margin-left:8px;vertical-align:1px}

/* editable tiles */
.tile--edit{cursor:default}
.tile--edit:hover{background:#fff;border-color:#e5e7f0}
.tile--edit .tile__b{display:block;-webkit-line-clamp:none}
.tile__ctl{margin-top:auto;padding-top:10px;display:flex;align-items:center;gap:8px}
.tile__ctl button,.tile__ctl a{font-family:inherit;font-size:12px;font-weight:600;cursor:pointer;
  border:1px solid var(--card-border);background:#fff;border-radius:7px;padding:5px 11px;
  color:var(--muted);text-decoration:none}
.tile__ctl button:hover,.tile__ctl a:hover{border-color:#b7bbd6;color:var(--ink)}
.tile.is-off{opacity:.55}
.tileadd{display:flex;align-items:center;justify-content:center;height:152px;
  border:1px dashed #c9cde3;border-radius:14px;background:none;cursor:pointer;
  font-family:inherit;font-size:13.5px;font-weight:600;color:var(--muted)}
.tileadd:hover{border-color:var(--muted);color:var(--ink)}

/* editable rows: grip, reorder, drop line */
.rrow--edit{cursor:default}
.rrow--edit.is-dragging{opacity:.4}
.st-grip{flex:0 0 auto;width:22px;text-align:center;cursor:grab;color:#c6c9e2;
  font-size:13px;letter-spacing:-2px;user-select:none}
.st-grip:active{cursor:grabbing}
.rrow__ctl{flex:0 0 auto;display:flex;gap:4px}
.rrow__ctl button,.rrow__ctl a{width:26px;height:26px;line-height:1;font-size:11px;cursor:pointer;
  border:1px solid var(--card-border);background:#fff;border-radius:6px;color:var(--muted);
  display:grid;place-items:center;text-decoration:none;font-family:inherit}
.rrow__ctl button:hover,.rrow__ctl a:hover{border-color:#b7bbd6;color:var(--ink)}
.st-dropline{height:2px;background:var(--gold);margin:0;border-radius:2px}

/* Dragging by the grip is the reorder affordance wherever there is a mouse, so
   the up/down arrows are redundant there and are hidden. On a COARSE pointer
   they are the only way: HTML5 drag-and-drop never fires on touch, so an iPad
   would otherwise be unable to reorder at all. There, the arrows come back and
   the grip goes away rather than sitting there doing nothing. */
.rrow__ctl [data-a="up"],.rrow__ctl [data-a="down"]{display:none}
@media (hover:none) and (pointer:coarse){
  .rrow__ctl [data-a="up"],.rrow__ctl [data-a="down"]{display:grid}
  .st-grip{display:none}
  /* no drag on touch, so the tile grip would be a dead control; the arrows in
     the tile's control row take over, exactly as they do for list rows */
  .tile__grip{display:none}
  .tile__mv{display:grid}
}
/* the grip now carries the whole affordance, so make it findable */
.rrow--edit:hover .st-grip{color:var(--muted)}

/* topics reorder by dragging their tile. The grip sits in the corner rather than
   the tile itself being draggable, because draggable on a parent kills text
   selection in the contenteditable fields inside it. */
.tile--edit{position:relative}
.tile__grip{position:absolute;top:10px;right:10px;width:auto;font-size:12px;opacity:0;
  transition:opacity .14s ease}
.tile--edit:hover .tile__grip,.tile__grip:focus{opacity:1;color:var(--muted)}
.tile--edit.is-dragging{opacity:.35}
.tiles [draggable="true"]{cursor:grab}
.tile__mv{display:none}

.st-toast{position:fixed;left:50%;bottom:26px;transform:translate(-50%,14px);z-index:99999;
  background:var(--charcoal);color:#fff;font-size:13px;font-weight:600;padding:10px 18px;
  border-radius:10px;box-shadow:0 8px 26px rgba(0,0,0,.3);opacity:0;transition:opacity .2s,transform .2s}
.st-toast.is-in{opacity:1;transform:translate(-50%,0)}
.st-toast.is-bad{background:#b3341c}

/* ── editable nav (structure mode) ── */
.snav[data-navedit] .grp__hd{cursor:default}
.snav__sec--edit{display:flex;align-items:center;gap:9px;width:100%;height:44px;
  padding:0 10px 0 20px;color:rgba(255,255,255,.66);font-size:13.5px;line-height:1.3}
.snav__sec--edit .snav__t{flex:1 1 auto;min-width:0}
.snav__go{flex:0 0 auto;width:22px;height:22px;display:grid;place-items:center;border-radius:6px;
  color:rgba(255,255,255,.45);text-decoration:none;font-size:15px;border:1px solid rgba(255,255,255,.18)}
.snav__go:hover{color:#fff;border-color:rgba(255,255,255,.5)}
.snav[data-navedit] .st-edit:hover{outline-color:rgba(255,255,255,.5)}
.snav[data-navedit] .st-edit:focus{outline-color:var(--on-dark-line);background:rgba(129,140,248,.16)}
.snav[data-navedit] .st-edit:empty::before{color:rgba(255,255,255,.4)}
.snav__tools{display:flex;gap:6px;padding:6px 10px 10px 20px}
.snav__tools button{font-family:inherit;font-size:11.5px;font-weight:600;cursor:pointer;
  background:none;border:1px solid rgba(255,255,255,.22);color:rgba(255,255,255,.62);
  border-radius:7px;padding:4px 9px}
.snav__tools button:hover{border-color:rgba(255,255,255,.5);color:#fff}
.snav__add{display:block;width:100%;margin-top:12px;font-family:inherit;font-size:12.5px;
  font-weight:600;cursor:pointer;background:none;border:1px dashed rgba(255,255,255,.3);
  color:rgba(255,255,255,.7);border-radius:9px;padding:9px}
.snav__add:hover{border-color:rgba(255,255,255,.6);color:#fff}

/* the edit bar keeps its controls on one line on a phone; the hint would wrap
   to four lines and push Save off the first screenful */
@media (max-width:600px){
  .st-bar__l{display:none}
  .st-bar__st{margin-left:0}
}

/* The nav reorders itself (2026-08-21, ported from LiveJudge). Topic groups drag
   among each other; section rows drag inside their own group. */
.snav[data-navedit] .grp__hd{display:flex;align-items:center;gap:2px}
.snav[data-navedit] .snav__sec--edit{display:flex;align-items:center;gap:2px}
.snav__grip{color:var(--on-dark);opacity:0;transition:opacity .12s;touch-action:none}
.snav[data-navedit] .grp:hover .snav__grip,
.snav[data-navedit] .snav__sec--edit:hover .snav__grip{opacity:1}
.snav[data-navedit] .grp.is-dragging,
.snav[data-navedit] .snav__sec--edit.is-dragging{opacity:.4}
/* pointer drag works on touch, so unlike every other grip this one stays */
@media (hover:none) and (pointer:coarse){ .snav__grip{opacity:1} }

/* Reorder arrows. They stay on at every pointer type: a drag cannot be proven
   before it ships, a button can. */
.snav__mv,.snav__tools [data-a="cup"],.snav__tools [data-a="cdown"]{
  flex:0 0 auto;width:20px;height:20px;line-height:1;font-size:8px;cursor:pointer;
  border:1px solid rgba(255,255,255,.22);background:rgba(255,255,255,.06);border-radius:5px;
  color:var(--on-dark);display:grid;place-items:center;font-family:inherit;padding:0}
.snav__mv:hover,.snav__tools [data-a="cup"]:hover,.snav__tools [data-a="cdown"]:hover{
  border-color:rgba(255,255,255,.5);color:#fff}
.snav[data-navedit] .snav__sec--edit .snav__mv{opacity:0;transition:opacity .12s}
.snav[data-navedit] .snav__sec--edit:hover .snav__mv,
.snav[data-navedit] .snav__sec--edit:focus-within .snav__mv{opacity:1}
@media (hover:none) and (pointer:coarse){
  .snav[data-navedit] .snav__sec--edit .snav__mv{opacity:1}
}

/* A topic that is a single article gets a link where the others get an expander.
   Same rank in the list, so it borrows .grp__hd's box exactly, minus the chevron.
   On this clone the "current" accent is --on-dark, not --gold: gold on indigo is
   unreadable here. */
.snav__top{display:flex;align-items:center;gap:10px;width:100%;height:54px;text-align:left;
  cursor:pointer;font-family:inherit;font-size:14px;font-weight:400;color:rgba(255,255,255,.9);
  background:none;border:0;padding:0 10px;line-height:1.3;border-radius:8px;text-decoration:none}
.snav__top:hover{color:#fff}
.snav__top.is-on{color:var(--on-dark)}