/* ── 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{
  --nav-w:300px; --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:34px;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:#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 ── */
.snav{background:var(--charcoal);padding:14px 12px 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%;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:0 10px 0 20px;line-height:1.3;text-decoration:none}
.snav__sec:hover{color:#fff}
.snav__t{flex:1 1 auto;min-width:0;display:-webkit-box;-webkit-line-clamp:2;
  -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{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 */
.tile--edit{cursor:default}
.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: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)}

/* 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%;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(--gold);background:rgba(244,166,33,.12)}
.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}
}

/* ── Event Day Guide specifics ── */
/* the label here is three words, not "Help", so it must not wrap the lockup */
.hd__help{white-space:nowrap;font-size:16px;letter-spacing:.01em;align-self:center}
@media (max-width:900px){ .hd__help{font-size:14px} }
/* numbered sections: the number is a quiet index, not part of the title */
.tile__num{display:inline-block;min-width:1.4em;color:var(--gold-text);font-weight:800}
.article h1 .tile__num{min-width:1.6em}
/* section number in the structure editor's rows */
.rrow__num{flex:0 0 auto;width:24px;text-align:center;font-weight:800;color:var(--gold-text);font-size:13px}
.rrow__ctl [data-a="del"]{width:auto;padding:0 8px;font-size:11px;font-weight:600}
.rrow__ctl [data-a="del"][data-armed="1"]{border-color:#b3341c;color:#b3341c}