/* ── Help Center app shell ─────────────────────────────────────────────────
   A charcoal 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, so it comes down with it - keep them in step
     or the logo overflows into the seam. */
  --nav-w:228px; --head-h:76px; --curve:60px;
  --seam:var(--gold); --seam-w:5px;
  /* 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:#9aa0a8; --line-soft:#f0eee9;
}

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}
.hd__logo{height:24px;width:auto;display:block}
.hd__help{font-size:17px;font-weight:400;color:rgba(255,255,255,.92);
  letter-spacing:-.01em;margin-left:8px;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:#faf8f4}
.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:var(--charcoal);font-weight:600}
.hbtn--gold:hover{background:var(--gold-deep);color:var(--charcoal)}
.hbtn--white{background:#fff;color:var(--charcoal);font-weight:600}
.hbtn--white:hover{background:#ece9e3;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(--gold)}
.snav__sec.is-on .snav__n{color:var(--gold)}

/* ── 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 #e4e2dc;
  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:#f7f5f1;border-color:#d7d4cc}
.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,#f0eee9);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,#f0eee9);text-decoration:none}
.rrow:hover{background:#fbfaf8}
.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:#b9bcc4;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,#f0eee9)}
.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,#f0eee9);
  display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.pfoot__logo{height:20px;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:28px}
  .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,.st-addrow{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:#3a3d45;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(--gold);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(--gold)}
.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:var(--charcoal)}
.st-bar__btn--go:hover{background:var(--gold-deep);border-color:var(--gold-deep);color:var(--charcoal)}
.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:#b6b9c1}
.st-edit:focus{outline:2px solid var(--gold);outline-offset:3px;background:rgba(244,166,33,.07)}
.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:#fdf3da;
  border-radius:4px;padding:1px 5px;margin-left:8px;vertical-align:1px}

/* editable tiles */
/* An editable tile grows with its text. The blurb is unclamped here, and inside a
   fixed 152px the title (the one flex child with overflow:hidden) was what shrank,
   so it rendered cut in half. The grid row stretches the neighbours to match. */
.tile--edit{cursor:default;height:auto;min-height:152px}
.tile--edit .tile__t{display:block;-webkit-line-clamp:none}
.tile--edit:hover{background:#fff;border-color:#e4e2dc}
.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:#b0b4bd;color:var(--ink)}
.tile.is-off{opacity:.55}
.tileadd{display:flex;align-items:center;justify-content:center;height:auto;min-height:152px;
  border:1px dashed #cfccc4;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)}
.st-addrow{display:flex;align-items:center;justify-content:center;width:100%;max-width:880px;height:52px;
  margin:16px 0 0;border:1px dashed #cfccc4;border-radius:10px;background:none;cursor:pointer;
  font-family:inherit;font-size:13.5px;font-weight:600;color:var(--muted)}
.st-addrow: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:#c3c6cd;
  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:#b0b4bd;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%;min-height:44px;
  padding:6px 10px 6px 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(--gold);background:rgba(244,166,33,.12)}
.snav[data-navedit] .st-edit:empty::before{color:rgba(255,255,255,.4)}
.snav__tools{display:flex;align-items:center;gap:12px;padding:2px 10px 4px 44px}
.snav__tools button{font-family:inherit;font-size:12px;font-weight:600;cursor:pointer;
  background:none;border:0;color:rgba(255,255,255,.5);padding:6px 0;line-height:1.2;white-space:nowrap}
.snav__tools button:hover{color:#fff}
.snav__tools [data-a="off"]{margin-left:auto}
/* In edit mode the accordion is off, so the header is a div, not a button, and the
   dead chevron's slot holds the topic's own arrows (a button cannot hold buttons). */
.grp__hd--edit{cursor:default}
.grp__hd--edit .snav__mv{opacity:0;transition:opacity .12s}
.grp__hd--edit:hover .snav__mv,.grp__hd--edit:focus-within .snav__mv{opacity:1}
@media (hover:none) and (pointer:coarse){ .grp__hd--edit .snav__mv{opacity:1} }
.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). It is on screen on every edit view, so it
   was the obvious thing to drag, and before this it could only follow a drag made
   elsewhere. Topic groups drag among each other; section rows drag inside their
   own group. Grip only where there is a mouse, same rule as everywhere else. */
.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:#5b6068;opacity:0;transition:opacity .12s}
.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 too, so unlike every other grip in this app the
   nav grip STAYS on a coarse pointer. touch-action:none stops the panel scrolling
   out from under the finger mid-drag. */
.snav__grip{touch-action:none}
@media (hover:none) and (pointer:coarse){ .snav__grip{opacity:1} }

/* Nav reorder arrows. Unlike the list rows elsewhere, these stay on at every
   pointer type: a drag is unprovable before it ships and dead on some devices,
   so the buttons are the guaranteed path, not the fallback. */
.snav__mv{
  flex:0 0 auto;width:20px;height:20px;line-height:1;font-size:8px;cursor:pointer;
  border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.04);border-radius:5px;
  color:#9aa0a8;display:grid;place-items:center;font-family:inherit;padding:0}
.snav__mv:hover{border-color:rgba(255,255,255,.4);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 other topics get an
   expander. It has to read as the same rank in the list, so it borrows the group
   header's box exactly and only drops the chevron. */
.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(--gold)}