/* shared.css — common UI for the harmonic suite (Player, Prioritizer, Generator, Admin).
   Single source of truth for the cross-page nav and the base button/card/input styling.
   MUST sit in the same directory as the HTML files on Netlify (like semantic-rules.js).
   Page-specific stylesheets load AFTER this file, so a page can still override any rule. */

/* ======== COMMUNITY PAGE (28en, item 71) ========
   Moved here from the <style> block inside community.html, unchanged. It sits FIRST on purpose: the block used to load
   before this file, so every rule below still wins over it exactly as before — the page's look does not change.
   Everything is scoped to .pg-community (or to its own .cm-modal / .cm-back windows). ======== */
/* Community is a separate space (hosted apart from the main site later): same identity — swirl, fonts —
   but its own frame: white brand bar, sage-green accent for member content, no tool tabs. Navy is kept
   only for actions that go to the main site (Open in Player, plans). */
.pg-community{--cm:#b8663f;--cm-d:#8f4a2a;--cm-l:#f7efe6;--cm-b:#e6cdb8}   /* 28cw: sand (Dan picked from the 4-way mock) */
.pg-community *{box-sizing:border-box}
.pg-community body{font-family:Arial,sans-serif;margin:0;background:#f6f8f7;color:#1f2a27}
.pg-community .container{max-width:1240px;margin:0 auto;padding:0 20px 24px}
.pg-community .cm-top{display:flex;align-items:center;gap:8px 12px;padding:14px 0;flex-wrap:wrap}   /* 28dc: wraps on a phone instead of pushing the page sideways */
.pg-community .cm-teaser-gate .nh-btn, .pg-community .cm-teaser-gate button{margin-top:8px}.pg-community .cm-teaser-gate{line-height:1.5}
.pg-community .cm-brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:#1f2a27;font-size:18px}
.pg-community .cm-brand b{font-weight:700}.pg-community .cm-brand span{letter-spacing:.2px}
.pg-community .cm-pill{font-size:11px;font-weight:700;color:#fff;background:#1066c4;border:1px solid #1066c4;border-radius:999px;padding:2px 9px}
.pg-community .cm-topbtn{margin-left:auto;font-size:13.5px;font-weight:700;color:#fff;background:var(--cm);border-radius:8px;padding:7px 12px;text-decoration:none}
.pg-community .cm-home{margin-left:14px;font-size:13.5px;font-weight:600;color:#1066c4;text-decoration:none}

.pg-community .cm-hero{background:var(--cm-l);border:1px solid var(--cm-b);border-radius:14px;padding:18px 20px;margin:16px 0 12px}
.pg-community .cm-hero h1{margin:0 0 4px;font-size:26px;color:var(--cm-d)}.pg-community .cm-hero p{margin:0;font-size:15px;color:#35514a}
.pg-community [id]{scroll-margin-top:12px}

.pg-community .cm-label{background:#fff8e6;border:1px solid #f1d58a;color:#1a3b63;border-radius:10px;padding:9px 14px;font-size:13px;margin:0 0 14px; border-left: 4px solid #ffc107;}
.pg-community .cm-tabs{display:flex;flex-wrap:wrap;margin:0 0 16px}
.pg-community .cm-tabs span{border:1px solid #cfd8e3;margin-left:-1px;padding:9px 16px;font-size:14px;font-weight:600;color:#495057;background:#fff;cursor:default}
.pg-community .cm-tabs span:first-child{border-radius:8px 0 0 8px;margin-left:0}.pg-community .cm-tabs span:last-child{border-radius:0 8px 8px 0}
.pg-community .cm-tabs span.on{background:#e8f1fd;color:#1066c4;border-bottom:3px solid #1066c4}
.pg-community .cm-grid{display:grid;grid-template-columns:230px minmax(0,1fr);gap:18px;align-items:start}   /* 28dc: the empty third column (left from the mock-up) is gone */
.pg-community .cm-card{background:#fff;border:1px solid #e1e8e5;border-radius:12px;padding:14px 16px}
.pg-community .cm-h{font-size:15px;font-weight:700;margin:0 0 8px}
.pg-community .small{font-size:12px;color:#6c757d}
.pg-community .cm-search{border:1px solid #cfd8e3;border-radius:8px;padding:9px 10px;font-size:13px;color:#8a94a0;margin:0 0 12px;background:#fff}
.pg-community .cm-search-wrap{position:relative;margin:0 0 12px}
.pg-community .cm-search-wrap .cm-search{margin:0;padding-right:30px}
.pg-community .cm-search-x{position:absolute;right:4px;top:50%;transform:translateY(-50%);width:26px;height:26px;border:none;background:transparent;color:#8a94a0;font-size:20px;line-height:1;cursor:pointer;border-radius:50%;padding:0;font-family:inherit}
.pg-community .cm-search-x:hover{color:#1066c4;background:transparent}
.pg-community .cm-search-x[hidden]{display:none}   /* 28iq: the × that clears the search */
.pg-community .tag{display:inline-block;border:1px solid var(--cm-b);background:var(--cm-l);color:var(--cm-d);border-radius:999px;padding:3px 9px;font-size:12px;margin:0 4px 6px 0}
.pg-community .tag.on{background:var(--cm);color:#fff;border-color:var(--cm)}
.pg-community .cm-pers{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin:0 0 14px}
.pg-community .cm-pc{background:#fff;border:1px solid #e3e6ea;border-left:4px solid var(--cm);border-radius:10px;padding:10px 12px;display:flex;flex-direction:column;gap:3px}
.pg-community .cm-pc{cursor:pointer;text-align:left;font:inherit;color:inherit;box-shadow:none;min-height:0}.pg-community .cm-pc:hover{border-color:var(--cm);background:#fcf7f3}   /* 28gf: a collection card is a <button>, so the site's blue button hover (line ~368) filled it and hid its text — the card keeps a pale warm tint instead */.pg-community .cm-pc.on{background:#f7ede6;border-color:var(--cm)}
.pg-community .cm-colls-h{font-weight:700;font-size:13.5px;margin:0 0 8px}.pg-community .cm-collchips{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin:0 0 12px;font-size:12.5px;color:#5a6472}
.pg-community .cm-pc b{font-size:13.5px}.pg-community .cm-pc span{font-size:12px;color:#495057;line-height:1.35}.pg-community .cm-pc i{font-size:11.5px;color:var(--cm);font-style:normal;font-weight:600}
.pg-community .cm-bar{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:6px;margin:0 0 10px}
.pg-community .cm-sort span{font-size:12.5px;margin-left:10px;color:#6c757d}.pg-community .cm-sort b{color:var(--cm)}
.pg-community .cm-sets{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
@media (max-width:1180px){.pg-community .cm-sets{grid-template-columns:repeat(2,minmax(0,1fr))}}
.pg-community .cm-set h3{margin:0 0 3px;font-size:16px}.pg-community .cm-set h3 a{color:#212529;text-decoration:none}
.pg-community .cm-meta{font-size:12px;color:#6c757d;margin:0 0 8px}
.pg-community .cm-ph{font-size:12.5px;line-height:1.55;color:#343a40;background:#f7f9fb;border-radius:8px;padding:7px 10px;margin:6px 0 8px}
.pg-community .hid{color:#8a94a0;font-style:italic}

.pg-community .badge{display:inline-block;font-size:11px;font-weight:600;border-radius:999px;padding:2px 8px;margin-right:4px}
.pg-community .ok{background:#e7f6ec;color:#0f5132}.pg-community .warn{background:#fff4e5;color:#8a5300}.pg-community .upd{background:#e8f1fd;color:#0b4f9f}.pg-community .need{background:#fff;color:#1a3b63; border-left: 4px solid #ffc107;}.pg-community .off,.pg-community .info{background:#eef0f3;color:#495057}
.pg-community .cm-act{display:flex;gap:10px;align-items:center;margin-top:8px}
.pg-community .cm-btn{white-space:nowrap;background:#1066c4;color:#fff;border-radius:8px;padding:7px 12px;font-size:13px;font-weight:600;cursor:pointer;border:0;text-decoration:none}
.pg-community .cm-btn2:hover,.pg-community .cm-btn2:focus-visible,.pg-community .cm-btn2:active{background:var(--cm-l);color:var(--cm-d);border-color:var(--cm)}   /* 28ej (Dan: "on click on mobile is red on blue"): its own pressed colours */
.pg-community .cm-btn2{white-space:nowrap;border:1px solid var(--cm-b);color:var(--cm-d);border-radius:8px;padding:6px 11px;font-size:13px;font-weight:600;background:#fff;text-decoration:none}
.pg-community .cm-rep{margin-left:auto;font-size:12px;color:#8a94a0;white-space:nowrap;text-decoration:none}
.pg-community .cm-home--left{margin-left:0;margin-right:auto;font-size:13px}
.pg-community .cm-teaser-gate{background:#fff;border:1px solid var(--cm-b);border-left:4px solid var(--cm);border-radius:10px;padding:12px 14px;margin:0 0 14px;font-size:13.5px}
.pg-community .cm-teaser .cm-ph{color:#8a94a0;font-style:italic}
.pg-community .cm-mine-row{display:flex;justify-content:space-between;gap:8px;font-size:13px;padding:5px 0;border-bottom:1px solid #f0f2f5}
.pg-community .cm-mine-row b{font-weight:600}
.pg-community .cm-st{font-size:11.5px;border-radius:999px;padding:1px 8px;white-space:nowrap}
.pg-community .cm-st-published{background:#e7f6ec;color:#0f5132}.pg-community .cm-st-waiting{background:#fff;color:#1a3b63; border-left: 4px solid #ffc107;}.pg-community .cm-st-declined,.pg-community .cm-st-removed{background:#fff;color:#1a3b63; border-left: 4px solid #ffc107;}.pg-community .cm-st-replaced{background:#eef1f5;color:#5a6472}
.pg-community .cm-state{font-size:13px;color:#5a6472;margin:0 0 10px}
.pg-community .cm-empty{background:#fff;border:1px dashed var(--cm-b);border-radius:12px;padding:22px;text-align:center;color:#4b5a55}
.pg-community .tag{cursor:pointer}
.cm-modal input[type=text],.cm-modal textarea{width:100%;box-sizing:border-box;border:1px solid #cfd8e3;border-radius:8px;padding:8px 10px;font-size:13.5px;font-family:inherit}
.cm-modal textarea{min-height:64px;resize:vertical}
.cm-modal .chips span{cursor:pointer}
.cm-modal .chk p{display:flex;gap:8px;align-items:flex-start}
.cm-modal .chk .fix{color:#1066c4;font-weight:600;cursor:pointer}
.cm-modal .cs-ro-l{font-size:12.5px;font-weight:700;color:#33404d;margin:10px 0 3px}.cm-modal .cs-ro-l:first-of-type{margin-top:0}
.cm-modal .cs-ro{margin:0;padding:1px 0 1px 12px;border-left:3px solid #e6d5c9;font-size:13.5px;line-height:1.55;color:#212529;background:none}
.cm-modal .cs-ro-scroll{max-height:190px;overflow:auto;-webkit-overflow-scrolling:touch}.cm-modal .cs-ro-scroll div{white-space:normal}
.cm-modal .cs-fail{margin:0 0 10px;padding:10px 12px;border-left:4px solid #e0b100;background:#fff8e1;color:#4a3c00;border-radius:0}
.cm-modal .chk .cs-fail p{display:block;margin:0}.cm-modal .cs-fail .cs-fail-h{font-weight:700;font-size:13.5px;margin:0 0 6px}
.cm-modal .cs-fail ul{margin:0 0 10px;padding:0;list-style:none}.cm-modal .cs-fail li{margin:0 0 6px;font-size:13px;line-height:1.4}.cm-modal .cs-fail li b{display:block;font-weight:600}.cm-modal .cs-fail li span{display:block;color:#5c4a00}
.cm-modal .cs-fail .cm-btn{display:inline-block;margin:0 0 8px}.cm-modal .cs-fail .cs-fail-n{font-size:12.5px;color:#5c4a00}
.cm-modal #cs-send:disabled{opacity:.5;cursor:not-allowed}
.cm-modal .conf{display:flex;gap:8px;align-items:flex-start;font-size:13px;margin:0 0 6px}
.cm-modal .conf input{margin-top:3px}
.cm-modal .ft .cm-btn{margin-left:auto}
.cm-modal .err{color:#1a3b63;font-size:13px; border-left: 4px solid #ffc107;}

.pg-community .cm-row{font-size:13px;margin:0 0 3px}
.pg-community .cm-steps{margin:0;padding-left:18px;font-size:13px;line-height:1.6}

.pg-community .cm-note{font-size:11.5px;color:#8a94a0;text-align:center;margin-top:8px}
.pg-community .cm-side>.cm-card+.cm-card{margin-top:14px}
@media (max-width:1000px){.pg-community .cm-grid{grid-template-columns:1fr}.pg-community .cm-pers{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.pg-community .cm-sets{grid-template-columns:1fr}}
/* 28ea — folded cards, and the phone order: Collections first, then search and one row of tags, then the sets; How sharing works and the rest after. */
.pg-community .cm-fold>summary{cursor:pointer;list-style:none;display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:13px;margin:0}
.pg-community .cm-fold>summary::-webkit-details-marker{display:none}
.pg-community .cm-fold>summary::after{content:"\25BE";color:#6c757d;font-weight:400}
.pg-community .cm-fold[open]>summary::after{content:"\25B4"}
.pg-community .cm-fold[open]>summary{margin-bottom:8px}
@media (max-width:1000px){
  .pg-community .cm-grid{display:flex;flex-direction:column;gap:12px;align-items:stretch}   /* 28fr (235): full width — the two-column grid's align-items:start left the search card and How sharing works at half width */
  .pg-community .cm-side,.pg-community .cm-main{display:contents}
  .pg-community .cm-side>.cm-card+.cm-card{margin-top:0}
  .pg-community .cm-side>*,.pg-community .cm-main>*{min-width:0;max-width:100%;box-sizing:border-box}
  .pg-community #cm-colls{order:1}.pg-community #cm-find{order:2}.pg-community .cm-bar{order:3}.pg-community #cm-collchips{order:4}.pg-community #cm-state{order:5}.pg-community #cm-sets{order:6}
  .pg-community #cm-mine{order:7}.pg-community #cm-how{order:8}.pg-community #feedback{order:9}
  .pg-community #cm-find{padding:12px}
  .pg-community #cm-tagbar{display:flex;flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;gap:6px;padding-bottom:4px;scrollbar-width:none}
  .pg-community #cm-tagbar::-webkit-scrollbar{display:none}
  .pg-community #cm-tagbar .tag{flex:0 0 auto;margin:0}
  .pg-community #cm-find .cm-h{margin-top:10px !important}
  
  .pg-community .cm-hero{padding:12px 14px;margin:10px 0 8px}.pg-community .cm-hero h1{font-size:21px}.pg-community .cm-hero p{font-size:13.5px}
  .pg-community .cm-label{padding:7px 12px;font-size:12.5px;margin:0 0 10px}
}
/* Modal */
.cm-back{display:none;position:fixed;inset:0;background:rgba(20,30,45,.55);z-index:20000}
.cm-modal{display:none;position:fixed;left:50%;top:40px;transform:translateX(-50%);width:min(760px,calc(100vw - 24px));max-height:calc(100vh - 80px);background:#fff;border-radius:14px;overflow:hidden;box-shadow:0 20px 50px rgba(0,0,0,.3);z-index:20001;flex-direction:column}
.cm-modal .hd{background:linear-gradient(90deg,#c9784f,#8f4a2a);color:#fff;padding:16px 20px;position:relative}
.cm-modal .hd h2{margin:0 0 4px;font-size:22px;color:#fff}.cm-modal .hd p{margin:0;font-size:13.5px;opacity:.95}
.cm-modal .x{position:absolute;right:16px;top:14px;width:30px;height:30px;border-radius:50%;background:rgba(255,255,255,.2) !important;border:0;color:#fff;font-size:15px;cursor:pointer;padding:0 !important;display:flex;align-items:center;justify-content:center;line-height:1}
.cm-modal .bd{padding:16px 20px;overflow:auto;flex:1 1 auto;min-height:0}   /* 28cx: the body scrolls, the footer stays (Dan: above the fold) */
.cm-modal .sec{margin:14px 0 0}.cm-modal .sec h4{margin:0 0 6px;font-size:13px;text-transform:uppercase;letter-spacing:.04em;color:#5a6472}
.cm-modal .note{background:#f7f9fb;border:1px solid #e3e6ea;border-radius:10px;padding:10px 12px;font-size:13.5px;line-height:1.5}

.cm-modal ol{margin:0;padding-left:22px;font-size:13.5px;line-height:1.7}
.cm-modal ol.cm-scroll{max-height:38vh;overflow:auto;border:1px solid #eef0f3;border-radius:8px;padding:8px 8px 8px 30px;background:#fbfcfd}
.cm-modal .cm-use{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 8px}
.cm-modal .cm-use .cm-btn,.cm-modal .cm-use .cm-btn2{flex:1 1 44%;text-align:center}

.cm-modal .ft{flex:0 0 auto}
.cm-modal .chips span{display:inline-block;border:1px solid #bfdccf;border-radius:999px;padding:5px 11px;font-size:12.5px;color:#23574a;margin:0 5px 6px 0;background:#fff;cursor:default}
.cm-modal .ta{border:1px solid #cfd8e3;border-radius:8px;padding:8px 10px;font-size:13px;color:#8a94a0;min-height:54px}
.cm-modal .two{display:grid;grid-template-columns:1.1fr .9fr;gap:18px}
.cm-modal .ft{display:flex;gap:10px;align-items:center;flex-wrap:wrap;padding:14px 20px;border-top:1px solid #eef0f3;background:#fbfcfd}
.cm-modal .fl{font-size:13px;font-weight:700;margin:10px 0 4px}.cm-modal .in{border:1px solid #cfd8e3;border-radius:8px;padding:8px 10px;font-size:13.5px;color:#1f2a27;background:#fff}
.cm-modal .sel{border:1px solid #cfd8e3;border-radius:6px;padding:3px 8px;background:#fff}
.cm-modal .chips span.on{background:#2f6f5e;color:#fff;border-color:#2f6f5e}
.cm-modal .cs-tagopts{display:flex;flex-wrap:wrap;gap:6px;margin:6px 0 2px;padding:8px;max-height:138px;overflow:auto;-webkit-overflow-scrolling:touch;border:1px solid #d9e2dd;border-radius:10px;background:#fbfdfc}
.cm-modal .cs-tagopts[hidden]{display:none}
.cm-modal .cs-tagopt{border:1px solid #bfdccf;border-radius:999px;padding:6px 12px;font:inherit;font-size:13px;color:#23574a;background:#fff;cursor:pointer;min-height:32px}
.cm-modal .cs-tagopt:hover,.cm-modal .cs-tagopt:focus-visible{background:#eaf5f0;border-color:#2f6f5e}
.cm-modal .cs-tagnote{font-size:12.5px;color:#5f6b7a}
.cm-modal .chk p{margin:0 0 5px;font-size:13px}.cm-modal .ok-t{color:#0f5132}.cm-modal .bad-t{color:#1a3b63; border-left: 4px solid #ffc107;}
@media (max-width:700px){.cm-modal .two{grid-template-columns:1fr}.cm-modal{top:12px;max-height:calc(100vh - 24px)}}
/* 28jq (564 build 5): a Community session listed by its summary — the ask and the directions on the card; the Summary block in the window */
.pg-community .cm-sum i { color:#1a3b63; }
.pg-community .cm-sum-ask { font-style:italic; color:#1a3b63; margin:0 0 6px; }
.pg-community .cm-sum-h { font-size:12px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:#6c757d; margin:8px 0 4px; }
.pg-community .cm-sum-list { list-style:none; margin:0; padding:0; }
.pg-community .cm-sum-list > li { display:flex; justify-content:space-between; gap:12px; padding:3px 0; border-top:1px solid #edf2f8; }
.pg-community .cm-sum-list > li:first-child { border-top:none; }
/* ======== end COMMUNITY PAGE ======== */

/* ---- Radius scale (2026-09-13) ------------------------------------------------------------
   Three steps, not nine. The suite had 6px x111, 4px x46, 8px x28, 12px x28, 10px x17, 5px x12
   plus stray 3/7/9/14/16 — no two components agreeing on what a "rounded" corner meant.
     --r-control  6px   buttons, inputs, tabs, pills, list rows
     --r-card    10px   cards, panels, banners, toasts, nav track
     --r-modal   12px   modal shells only
   999px (full pill) and 50% (dots) are deliberate shapes, not scale steps, and stay literal.
   Page files still carry literal values; migrate them as each component is next touched rather
   than in one blind sweep — typography-wide edits are what produced three drift bugs. */
:root {
  --r-control: 6px;
  --r-card: 10px;
  --r-modal: 12px;
}

/* ---- Cross-page nav (identical on all five pages) ----
   Replaced the browser-tab look (2026-09-12): stacked borders, a 2px rule across the page and a
   -2px margin hack to punch the active tab through it. It read as a 2005 desktop app and broke
   awkwardly when the Admin tab appeared and the row wrapped.
   Now a segmented control: one soft track, pills inside it, the active page filled. No border
   arithmetic, nothing to misalign when items are added, and it degrades to a horizontal scroll
   on narrow screens instead of wrapping into a second row. */
.xnav {
  display: flex;
  gap: 3px;
  align-items: center;
  margin: 14px 0 18px 0;
  padding: 4px;
  background: #eef2f7;
  border: 1px solid #e1e7ef;
  border-radius: var(--r-card);
  /* Scroll rather than wrap. A wrapped nav shifts the whole page down by a row the moment a fifth
     item appears, which is exactly what the Admin tab does under ?z=1. */
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.xnav::-webkit-scrollbar { display: none; }

/* Pinned to the top of the window on every page (2026-09-22, Dan: "top nav should always be at
   top"). Sticky, so it scrolls into place rather than covering the page header at rest. Opaque:
   the upward shadow paints the page colour over its own top margin, so content never shows
   through above it once stuck. Below every popup (9999+), above the Player bar (9000) and the
   Generator's pick bar. Anchor jumps and scrollIntoView stop below it via scroll-padding-top. */
.xnav {
  position: sticky;
  top: env(safe-area-inset-top, 0px);
  z-index: 9500;
  box-shadow: 0 -16px 0 0 #f8f9fa, 0 6px 10px -8px rgba(16, 24, 40, .22);
}
html { scroll-padding-top: 64px; }

.xnav a,
.xnav span {
  /* Reset everything the old tab styling set, so no stale rule leaks through. */
  border: none;
  margin: 0;
  background: transparent;
  padding: 7px 14px;
  border-radius: var(--r-control);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.2;
  color: #5a6472;
  text-decoration: none;
  white-space: nowrap;
  flex: 0 0 auto;
  transition: background .14s ease, color .14s ease, box-shadow .14s ease;
}

.xnav a:hover {
  background: #fff;
  color: #1066c4;
  box-shadow: 0 1px 2px rgba(16, 24, 40, .06);
}
.xnav a:active { transform: translateY(1px); }

/* Keyboard focus must be visible — the old nav had none at all. */
.xnav a:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(22, 116, 220, .35);
  color: #1066c4;
}

.xnav .active {
  /* White raised chip, not a filled blue block. The nav sits directly above the "Build Your
     Session" band, which is a larger and more saturated blue — two stacked blues competed with
     each other and squeezed the page title between them. Keeping the blue for the band means it
     still signals something when it appears. */
  background: #fff;
  color: #1066c4;
  font-weight: 700;
  box-shadow: 0 1px 2px rgba(16, 24, 40, .10);
}

/* The Admin tab is appended at runtime under ?z=1. Marking it visually keeps it from reading as a
   normal destination for anyone who lands on an admin URL by accident. */
.xnav a[data-classifier-tab] { color: #b25c00; }
.xnav a[data-classifier-tab]:hover { color: #8a4700; background: #fff6ec; }

@media (max-width: 680px) {
  /* One slim scrolling row on phones (2026-09-22, Dan). The nav is pinned to the top, and the two-row
     wrap cost ~80px of an iPhone screen all the time. The 2026-09-13 objections to scrolling are
     handled: site-common.js scrolls the ACTIVE tab into view on load, and a fade at the right edge
     shows that more tabs exist. */
  html { scroll-padding-top: 60px; }
  .xnav {
    margin: 10px 0 12px 0;
    flex-wrap: nowrap;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 20px, #000 calc(100% - 44px), transparent 100%);
            mask-image: linear-gradient(to right, transparent 0, #000 20px, #000 calc(100% - 44px), transparent 100%);
  }
  /* 28jb (531 item 4): a chevron pinned at the right edge while more tabs sit off screen; site-common's showActiveTab
     sets .xnav--end when the row is scrolled to its end. The fade above is wider too (44 px, was 24). */
  .xnav::after { content: "\203A"; position: sticky; right: 0; flex: 0 0 auto; margin-left: -14px; padding: 0 6px 0 10px; font-size: 22px; line-height: 1; color: #1066c4; opacity: .75; pointer-events: none; transition: opacity .2s; }
  .xnav.xnav--end::after { opacity: 0; }
  .xnav a, .xnav span {
    padding: 7px 11px;
    font-size: 13px;
    flex: 0 0 auto;
    text-align: center;
    scroll-snap-align: center;
  }
}

/* The mobile section picker buildGuideSectionSelects() inserts. Hidden by default and shown only
   inside the mobile block below — declared FIRST so source order lets the media query win. */
.guide-sec-select { display: none; }

/* ---- Guide (start-guide.html fragment, rendered inside each page's docs modal) ----
   Mobile only. The guide has two tab levels above its content: four tier tabs and up to six
   section pills. On a phone they filled the screen and the content itself was below the fold —
   you saw nothing but navigation. The tier row also carried `overflow-x:auto` inline with nowrap
   buttons, so it scrolled invisibly exactly like the site nav did.
   !important is required throughout: the fragment sets these as inline styles, and the per-page
   restyle() rewrites cssText on every tab switch. restyle() only strips background / color /
   border-color / border-bottom, so nothing here is at risk of being wiped — but nothing here can
   win against inline without !important either. */
@media (max-width: 680px) {
  #guide-tabs {
    flex-wrap: wrap !important;
    overflow-x: visible !important;
    gap: 4px !important;
  }
  #guide-tabs .guide-tab1 {
    /* flex-grow only. With `1 1 auto` a long label ("Phrase Methodology") was allowed to shrink
       below its own text instead of wrapping to the next row, and clipped mid-word on a phone. */
    flex: 1 0 auto;
    max-width: 100%;
    padding: 8px 10px !important;
    font-size: 12.5px !important;
    text-align: center;
  }
  /* Tiers 2 and 3 carry 15+ section pills — a whole screen of navigation before any content.
     Below 680px the pills are swapped for the <select> that buildGuideSectionSelects() inserts
     just above them. The pills stay in the DOM and keep driving everything; the select only
     clicks them, so there is no second source of truth for the active section. */
  /* Two-column comparison blocks (good-vs-bad, Mode A vs Mode B, and seven others) are inline
     `grid-template-columns: 1fr 1fr` in the fragment. They never overflowed, so they looked fine to
     a width check — they just squeezed two columns into ~170px each and the text became unreadable
     slivers. Stack them instead. !important because the columns are set inline. */
  .g-2col { grid-template-columns: 1fr !important; }

  /* Reference tables are wider than a phone. Scrolling the table alone beats scrolling the page,
     and beats shrinking type until it cannot be read. */
  .guide-sec table { display: block; width: 100%; overflow-x: auto; }

  .guide-subtabs { display: none !important; }
  .guide-sec-select {
    display: block;
    width: 100%;
    margin: 0 0 16px;
    padding: 10px 12px;
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    color: #1066c4;
    background: #fff;
    border: 1px solid #1066c4;
    border-radius: var(--r-control);
  }
}

/* Guide reference tables: 52 <th> carried a class but no alignment, so they fell back to the
   browser default (centre) above left-aligned cells — the mismatch that reads as random styling
   from table to table. One rule, rather than editing 52 tags. */
.guide-sec th,
.guide-sec .ref-th-purple,
.guide-sec .ref-th-blue { text-align: left; }

/* ---- Text-entry fields ----------------------------------------------------------------
   One tint for anywhere you type, so the places that accept words are recognisable before you
   click. Deliberately near-neutral rather than the blue used elsewhere: an input is not a status,
   and a saturated fill on a dozen fields turns the page into stripes. Focus goes white, so the
   field you are in is the brightest thing on screen. */
/* !important because page stylesheets load AFTER this file, so every page-level `background:#fff`
   on a field beat the rule and the tint only landed where a page had no opinion — which is the
   opposite of consistent. Excludes disabled fields, which keep their own flatter grey. */
input[type="text"]:not(:disabled), input[type="password"]:not(:disabled),
input[type="search"]:not(:disabled), input[type="number"]:not(:disabled),
input[type="time"]:not(:disabled), textarea:not(:disabled) {
  background: #f7f9fb !important;
  border: 1px solid #d7dfe8 !important;
}
input[type="text"]:focus, input[type="password"]:focus, input[type="search"]:focus,
input[type="number"]:focus, input[type="time"]:focus, textarea:focus {
  background: #fff !important;
  border-color: #7fb2ee !important;
}
input::placeholder, textarea::placeholder { color: #98a2b0; }

/* ---- Buttons (blue theme) ---- */
button { padding:10px 18px; border:none; border-radius:var(--r-control); font-family:inherit; font-size:14px; font-weight:600; cursor:pointer; background:#1674dc; color:#fff; transition:background .12s; }
/* 28er (95, Dan: yes): the blue fill under the pointer applies only where there is a real mouse. A touch screen keeps a
   tapped button "under the pointer" until the next tap; there it now keeps its resting look. The same for the four
   page-level copies of this rule (Player, Generator, Prioritizer, Setup). */
@media (hover: hover) { button:hover:not(:disabled){ background:#1066c4; } }
button:active:not(:disabled){ transform:translateY(1px); }
button:disabled { background:#adb5bd; cursor:not-allowed; }
button.secondary { background:#fff; color:#1674dc; border:1px solid #1674dc; }
button.secondary:hover:not(:disabled){ background:#eef5ff; }
button.tiny { padding:4px 10px; font-size:12px; }

/* ---- Cards ---- */
.card { background:#fff; border:1px solid #e3e6ea; border-radius:var(--r-card); padding:22px; margin-bottom:18px; box-shadow:0 1px 3px rgba(0,0,0,.04); }
.card h2 { font-size:16px; margin:0 0 16px; display:flex; align-items:center; gap:9px; font-weight:700; }

/* ---- Form inputs ---- */
label { display:block; font-size:12px; font-weight:600; color:#495057; margin:0 0 5px; }
input[type=text], select, textarea { width:100%; padding:9px 11px; border:1px solid #ced4da; border-radius:var(--r-control); font-family:inherit; font-size:14px; background:#fff; transition:border-color .12s, box-shadow .12s; }
input:focus, select:focus, textarea:focus { outline:none; border-color:#1674dc; box-shadow:0 0 0 3px rgba(22, 116, 220,.15); }

/* ---- Misc shared ---- */
.muted { color:#6c757d; font-size:12px; }
.row { display:grid; gap:14px; }
.row.two { grid-template-columns:1fr 1fr; }
@media(max-width:680px){ .row.two{ grid-template-columns:1fr; } }

/* ---- Cross-page footer (Player, Generator, Prioritizer, Setup) ----
   Was three stacked centred paragraphs of grey text — disclaimer, last-updated, session cost —
   which gave equal weight to a legal line and a debug number and left a tall ragged column at the
   bottom of every page. Now one quiet bar: the disclaimer reads as a sentence on the left, the
   meta sits right as small monospaced-ish detail, and they stack on narrow screens. */
.xfoot {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
  margin: 34px auto 26px auto;
  max-width: 1400px;   /* same width as the page container (Dan, 2026-09-28) */
  padding: 16px 2px 0 2px;
  border-top: 1px solid #e6eaf0;
}
.xfoot .xfoot-note {
  margin: 0;
  font-size: 12px;
  color: #7b848f;
  line-height: 1.5;
  max-width: 640px;
}
.xfoot .xfoot-meta {
  margin: 0;
  font-size: 11.5px;
  color: #97a0ab;
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
  white-space: nowrap;
}
.xfoot .xfoot-meta .sep { color: #cdd4dd; }
.xfoot .xfoot-meta strong { color: #6c757d; font-weight: 600; }
.xfoot .xfoot-meta a { color: #97a0ab; text-decoration: underline; }
.xfoot .xfoot-meta a:hover { color: #1066c4; }
@media (max-width: 680px) {
  .xfoot { flex-direction: column; gap: 10px; margin: 26px auto 20px auto; }
  .xfoot .xfoot-meta { white-space: normal; }
}

/* ---- Page header (all four tool pages) ----
   Was a centred title over a grey gradient box with a blue stripe and a drop shadow, which gave a
   single sentence of intro the visual weight of a section — and the blue band immediately below it
   then had to compete. Now the title and subtitle are plain text aligned left with the content,
   so the first coloured element on the page is the band that actually means something.
   index.html previously hand-styled its own version inline; all four now share this. */
h1 {
  text-align: left;
  margin: 6px 0 6px 0;
  color: #1a1f26;
  font-size: 32px;
  font-weight: 800;
  letter-spacing: -0.022em;
  line-height: 1.12;
}
.hero-subtitle { text-align: left; margin: 0 0 20px 0; }
.hero-subtitle p {
  margin: 0;
  /* Was 760px, chosen for a comfortable ~90-character measure. Against the site's 1400px
     container that wrapped at roughly half the available width and read as a bug rather than a
     choice — the Player's intro broke after "personal harmonic sessions." with the rest of the
     line empty. 1120px fits every current subtitle on one line at desktop width while still
     stopping the text stretching the full span on an ultrawide monitor. */
  max-width: 1120px;
  font-size: 15px;
  font-weight: 400;
  color: #66707c;
  line-height: 1.55;
  /* Explicitly unset the old box — page stylesheets load after this file, so anything they still
     define is overridden at the element level below. */
  background: none;
  padding: 0;
  border: none;
  border-radius: 0;
  box-shadow: none;
}
@media (max-width: 900px) { h1 { font-size: 29px; } }
@media (max-width: 600px) { h1 { font-size: 25px; } .hero-subtitle p { font-size: 14.5px; } }
@media (max-width: 380px) { h1 { font-size: 22px; } }

/* ---- "What is this" panel ----
   Was a yellow box with a 2px amber border, which reads as a caution. The content is background
   reading, not a warning — the only real warning on these pages is the medical disclaimer in the
   footer, and having two yellow-adjacent things competing weakened it. Now a quiet neutral card
   with a small blue info dot. */
.what-is-panel {
  background: #fbfcfe;
  border: 1px solid #e6eaf0;
  border-radius: var(--r-modal);
  padding: 16px 18px;
  margin: 20px 0;
  font-size: 14px;
  color: #4b5561;
  line-height: 1.6;
}
.what-is-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 700;
  color: #2c3540;
  margin: 0 0 8px 0;
}
.what-is-title::before {
  content: "i";
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #e7f1ff;
  color: #1066c4;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  font-style: italic;
}
.what-is-panel strong { color: #2c3540; }

/* ---- Section banner (the blue band above a group of sections) ----
   phrase-match and api-setup each carried their own copy; index and phrase-finder hand-styled
   theirs inline instead, which is why index's bands sat taller than the others — the inline
   version had no line-height, so 22px text rendered at the browser default leading.
   One definition now. `.spaced` adds breathing room when a band follows a content section
   rather than opening the page. */
.page-banner {
  background: #1066c4;
  color: #fff;
  padding: 12px 16px;
  border-radius: var(--r-card);
  font-size: 22px;
  font-weight: bold;
  line-height: 1.2;
  margin: 0 0 15px 0;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .15);
}
/* Mid-page band headers are quiet rules, not slabs (2026-09-14). One solid blue banner per page
   reads as "this is the page"; four of them read as four interruptions, and the eye stops
   treating any of them as important. The hero banner (first on the page, no .band) keeps the
   fill; every band below it becomes a white card header with a blue keyline. */
.page-banner.band {
  background: #fff;
  color: #212529;
  border: 1px solid #e3e9f0;
  border-left: 3px solid #1e87fd;
  box-shadow: none;
  font-size: 17px;
  padding: 10px 14px;
}
.page-banner.band span { color: #6c757d; opacity: 1; font-size: 13px; }
.page-banner.spaced { margin-top: 28px; }
/* A hero banner IS the page's heading (2026-09-16, Dan: one title per page, the blue one). The h1
   inside it inherits the banner's size and colour instead of the page-title styling above. */
.page-banner > h1 { font-size: inherit; font-weight: inherit; line-height: inherit; color: inherit;
  margin: 0; padding: 0; border: 0; letter-spacing: normal; }
.page-banner span {
  display: block;
  font-size: 14px;
  font-weight: normal;
  opacity: 0.9;
  line-height: 1.3;
  margin-top: 3px;
}
@media (max-width: 600px) {
  .page-banner { font-size: 18px; padding: 11px 14px; }
  .page-banner.spaced { margin-top: 20px; }
}

/* ---- Consolidated 2026-09-12 ----
   Every rule below was defined IDENTICALLY on two or more pages and in none of them differently.
   Moving them here removes the copies without changing any page: each is class-scoped (or inert,
   in the case of :root), so a page that has no matching element is unaffected.
   NOT moved, deliberately: `* { box-sizing: border-box }`. Four pages set it and api-setup.html
   does not — hoisting it would silently change that page's box model, which is a layout decision
   rather than a cleanup. Also not moved: the ~27 selectors that DIFFER between pages (body,
   .container, .section, .status, .info-btn, .main-layout and friends). Consolidating those means
   choosing which page's version wins, and every choice changes something visually. */
:root { color-scheme: light; }
.btn-secondary { background: transparent; color: #6c757d; border: 1px solid #6c757d; }
.info-btn:hover { background: #1066c4; }
.section-header .section-title { display: inline-flex; align-items: center; gap: 6px; }
.what-is-panel p:last-child { margin-bottom: 0; }

.cap-step-num { width: 22px; height: 22px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: bold; flex-shrink: 0; margin-left: -33px; background: #fff; border: 2px solid #ced4da; color: #adb5bd; }
.cap-step-num.active { border-color: #1674dc; color: #1674dc; }
.cap-step-num.done { border-color: #1066c4; background: #1066c4; color: #fff; }
.cap-step-body { flex: 1; min-width: 0; }
.cap-step-label { font-size: 13px; font-weight: 600; color: #212529; margin-bottom: 6px; }
.cap-step-label.locked { color: #adb5bd; }
.signal-pill { background: #f8f9fa; border: 1px solid #dee2e6; border-radius: 999px; padding: 3px 10px; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 11px; }
.signal-pill .label { color: #6c757d; margin-right: 4px; }
.section-title { font-size: 17px; font-weight: bold; margin: 0 0 4px 0; color: #212529; }

/* ===== Category / area picker modals =========================================================
   ONE shell for every picker on the site: the Prioritizer's area picker (prefix .ap-) and the
   Player's tag and browse pickers (prefix .tp-). They were already the same skeleton — head,
   tools, list, foot — maintained twice under two prefixes, and had drifted: the Prioritizer
   marked selection in leftover lavender (#ece5f7), the Player in indigo (#4a6cf7), neither the
   site blue. Both page-level blocks were deleted when this arrived (2026-09-13); adding rules
   back into a page's own <style> will silently win, since page CSS loads after this file.
   ============================================================================================ */
.tp-backdrop {
  position:fixed; inset:0; background:rgba(15,23,42,.45); z-index:10000;
  display:flex; align-items:center; justify-content:center; padding:16px;
}
.tp-modal {
  background:#fff; border-radius:var(--r-modal); width:100%; max-width:720px; height:auto; max-height:84vh;
  display:flex; flex-direction:column; overflow:hidden;
  box-shadow:0 12px 32px rgba(16,24,40,.25); font-family:inherit;
}
.tp-modal.tp-auto { height:auto; max-height:82vh; max-width:720px; }

/* Head: the site's page-banner gradient, so a picker reads as part of the page rather than as a
   system dialog. The sub line says what the picker is FOR, not what it contains. */
/* Big blue window header everywhere (2026-09-23, Dan: back to the snapshot look). Pickers use
   .tp-/.ap-head; built windows use .nh-win-head via nhWinHead() in site-common.js. */
.tp-head, .nh-win-head { background:#1066c4; color:#fff; padding:14px 18px 12px; border-radius:12px 12px 0 0; }
.tp-title, .nh-win-title { font-size:17px; font-weight:700; line-height:1.25; color:#fff; }
.tp-sub, .nh-win-sub { font-size:13px; color:#dbe8fb; margin-top:4px; line-height:1.4; }
.nh-win-titlebar { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.nh-win-logo { display:inline-flex; align-items:center; justify-content:center; width:34px; height:34px; border-radius:50%; background:rgba(255,255,255,.18); flex-shrink:0; margin-right:10px; }   /* 28gy (360): the swirl in a window head */
.nh-win-logo img { display:block; width:26px; height:26px; border-radius:50%; }
.nh-win-head--logo .nh-win-titlebar .nh-win-title { flex:1; }
.nh-win-head--logo .nh-win-sub { margin-left:44px; }
.nh-win-x { background:rgba(255,255,255,.18); color:#fff; border:none; width:30px; height:30px; border-radius:50%; cursor:pointer; font-size:16px; line-height:1; flex-shrink:0; }
.nh-win-steps { display:flex; align-items:center; flex-wrap:wrap; gap:6px; margin-top:10px; font-size:12.5px; }
.nh-step { display:inline-flex; align-items:center; gap:6px; background:rgba(255,255,255,.14); border-radius:999px; padding:3px 10px 3px 4px; color:#fff; }
.nh-step b { width:18px; height:18px; border-radius:50%; background:#fff; color:#1066c4; font-size:11px; display:inline-flex; align-items:center; justify-content:center; }
.nh-step-arrow { color:#bcd4f6; }

/* Controls strip. Search and the level tabs used to sit loose in the head, giving five stacked
   lines with no break before the list. Collected here they read as one block. */
.tp-search {
  width:100%; margin-top:10px; padding:9px 12px; border:1px solid #cfdcee; border-radius:var(--r-control);
  font-family:inherit; font-size:14px; background:#fff; box-sizing:border-box;
}
.tp-search:focus { outline:none; border-color:#1e87fd; box-shadow:0 0 0 3px rgba(30, 135, 253,.15); }
.tp-head .tp-search { margin-top:12px; }
.tp-tools {
  display:flex; align-items:center; gap:14px; flex-wrap:wrap; padding:10px 18px; font-size:13px;
  background:#f6f9fe; border-bottom:1px solid #dbe6f5;
}
.tp-tools a { color:#1674dc; text-decoration:none; cursor:pointer; font-weight:600; }
.tp-tools a:hover { text-decoration:underline; }

.tp-list {
  overflow-y:auto; padding:6px 14px 14px; flex:1 1 auto;
  display:grid; grid-template-columns:repeat(auto-fill, minmax(250px, 1fr)); gap:2px 10px; align-content:start;
}

.tp-modal.tp-auto .tp-list { max-height:58vh; }
/* Grouped mode stacks groups in one column; items inside each group flow in their own grid. */

/* Same escape hatch for .tp-list (2026-09-14). The auto-fill grid above flows ITEMS into
   columns with no knowledge of which ones belong together, so a hierarchical list — stage,
   then its categories, then their phrases — had its children torn from their heading at the
   column break. Any picker whose rows have a parent-child relationship wants this. */
.tp-list.tp-grouped { display:block; }

.tp-item {
  display:flex; align-items:center; gap:10px; padding:8px 10px; font-size:14px; color:#212529;
  cursor:pointer; border-radius:var(--r-control); border-left:3px solid transparent; min-width:0;
}
.tp-item:hover { background:#f2f7fe; }
.tp-item.tp-selected { background:#eaf2fd; border-left-color:#1e87fd; font-weight:bold; }
.tp-item input[type=checkbox] { accent-color:#1e87fd; width:16px; height:16px; flex-shrink:0; margin:0; }
.tp-item > span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* Counts are the signal you scan when deciding where to dig, so they get a fixed tabular column:
   4, 40 and 213 line up instead of floating at the end of labels of different lengths. */

/* Level tabs — a segmented control, since exactly one level applies per run. */

.tp-foot {
  padding:10px 18px 14px; display:flex; justify-content:space-between; align-items:center; gap:10px;
  flex-wrap:wrap; border-top:1px solid #eef1f5; background:#fff;
}
/* Pill buttons in picker feet, matching the other modern windows. */
.tp-foot button { border-radius:999px !important; padding:7px 16px !important; font-size:13px !important; font-weight:600 !important; }
.tp-foot .tp-selcount { font-size:13px; color:#495057; }
.tp-foot .tp-selcount b { color:#1066c4; }
.tp-list { min-height:0; }

/* A phone has no mouse: the capture card used to promise mouse capture there anyway, and the
   keyboard/mouse signal rows are already hidden at this width (2026-09-16, Dan). */

/* iPhone focus-zoom (2026-09-16, Dan's 3:18 screenshot). iOS Safari zooms the page into any
   focused field whose text is under 16px, and does not zoom back out. Every picker focuses its
   filter box on open, so the modal appeared cut off until the user pinched out. 16px on phones
   removes the trigger everywhere — pickers, the playlist, the Prioritizer and Generator boxes. */
@media (max-width: 680px) {
  input[type="text"], input[type="search"], input[type="number"], input[type="email"],
  input[type="url"], input[type="tel"], input[type="password"], input:not([type]),
  textarea, select { font-size:16px !important; }
}

/* Phones (2026-09-16). On iOS Safari `vh` is the viewport with the toolbars hidden, so an
   84vh modal ran under the bottom toolbar and cut the foot off — Cancel and Add were unreachable.
   `dvh` is the visible height; the vh line above stays as the fallback for browsers without it.
   The head, tools and foot are compacted so the list, the only part worth the room, gets it. */
@media (max-width: 680px) {
  /* Centred like every other window (2026-09-23, Dan: "why is it low on the page") — was a bottom sheet. */
  .ap-backdrop, .tp-backdrop { padding:8px; align-items:center; }
  .ap-modal, .tp-modal, .tp-modal.tp-auto {
    max-height:calc(100vh - 16px); max-height:calc(100dvh - 16px); border-radius:14px;
  }
  .ap-modal .ap-list, .tp-modal.tp-auto .tp-list { max-height:none; }
  .ap-head, .tp-head { padding:10px 14px; }
  .ap-title, .tp-title { font-size:16px; }
  .ap-sub, .tp-sub { font-size:12px; }
  .ap-tools, .tp-tools { padding:8px 14px; gap:10px; }
  .ap-list, .tp-list { padding:4px 8px 10px; grid-template-columns:1fr; }
  
  .ap-foot, .tp-foot { padding:8px 12px; flex-wrap:nowrap; padding-bottom:calc(8px + env(safe-area-inset-bottom, 0px)); }
  .ap-foot .ap-selcount, .tp-foot .tp-selcount { font-size:12px; flex:1 1 auto; min-width:0; }
  .ap-btn, .tp-btn { padding:8px 12px; }
  .ap-foot-btns, .tp-foot > span:last-child { display:flex; gap:6px; flex:0 0 auto; }
     /* the tabs and the filter placeholder already say it */
  
}
.tp-btn {
  padding:9px 18px; border-radius:var(--r-control); cursor:pointer; font-family:inherit; font-size:14px; font-weight:bold;
}
.tp-btn-secondary { background:#fff; color:#495057; border:1px solid #cfd6df; }
.tp-btn-secondary:hover { background:#f4f6f9; }
.tp-btn-primary { background:#1066c4; color:#fff; border:1px solid #1066c4; }
.tp-btn-primary:hover { background:#1066c4; }

/* ===== Site notice (toast) ===================================================================
   Replaces native alert() on the tool pages (2026-09-13). alert() blocks the page, renders as
   browser chrome rather than as part of the site, and cannot show two things at once. Three
   pages had grown their own toast — c.html's .toast, index.html's showCopyToast — so this is the
   shared one. Behaviour lives in semantic-rules.js (siteNotice), the only file every page loads.
   ============================================================================================ */
.sn-wrap { position:fixed; left:50%; bottom:24px; transform:translateX(-50%); z-index:2147483000;
           display:flex; flex-direction:column; gap:8px; align-items:center; pointer-events:none;
           width:min(520px, calc(100vw - 32px)); }
.sn {
  pointer-events:auto; display:flex; align-items:flex-start; gap:10px; width:100%;
  padding:11px 14px; border-radius:var(--r-card); font-size:14px; line-height:1.4; font-weight:bold;
  color:#fff; background:#1066c4; box-shadow:0 8px 24px rgba(11,44,92,.28);
  opacity:0; transform:translateY(8px); transition:opacity .18s ease, transform .18s ease;
}
.sn.sn-in { opacity:1; transform:translateY(0); }
.sn-msg  { flex:1 1 auto; min-width:0; }
.sn-x { background:none; border:none; color:inherit; font-size:17px; line-height:1; cursor:pointer;
        padding:0 2px; opacity:.85; font-family:inherit; }
.sn-x:hover { opacity:1; background:none; }
@media (prefers-reduced-motion: reduce) { .sn { transition:none; } }

/* Toasts must sit above everything (2026-09-22). At z-index 20000 they were hidden behind the Player's
   floating play bar (999999) and the phrase check window (1000001) — so on the Player, confirmations such
   as "Copied" never showed. On pages with the play bar, lift them clear of it rather than over it. */
body:has(.floating-controls) .sn-wrap { bottom: calc(env(safe-area-inset-bottom, 0px) + 120px); }

/* Help text as a short lead + bullets, anywhere (tooltips, "Tell me more"): 2026-09-23, Dan. */
.tip-lead { margin:0 0 6px; font-weight:600; color:#212529; }
.tip-list { margin:0 0 6px; padding-left:18px; }
.tip-list li { margin:3px 0; line-height:1.45; }
.tip-foot { margin:6px 0 0; color:#495057; }

/* ===================================================================================
   SHARED COMPONENTS (2026-09-23, CSS consolidation step 2). Use these instead of inline styles.
   .nh-backdrop  full-screen dimmer that centres a window
   .nh-card      the window itself (set only max-width inline); .nh-card-body / .nh-card-foot
   .nh-btn       rounded button; --primary (blue), --outline (blue border), --sm (compact)
   .nh-row       a list row with a hairline above; .nh-chip small amber reason tag
   =================================================================================== */
.nh-backdrop { position:fixed; inset:0; background:rgba(15,23,42,.45); z-index:10000; display:flex; align-items:center; justify-content:center; padding:16px; box-sizing:border-box; }
.nh-card { background:#fff; width:100%; max-height:85vh; display:flex; flex-direction:column; border-radius:12px; box-shadow:0 12px 32px rgba(16,24,40,.25); }
.nh-card-body { padding:0 18px 6px; overflow-y:auto; flex:1; -webkit-overflow-scrolling:touch; }
.nh-card-foot { padding:10px 18px 14px; border-top:1px solid #eef1f5; display:flex; gap:8px; align-items:center; justify-content:flex-end; flex-wrap:wrap; }
.nh-btn { padding:7px 18px; margin:0; font-size:13px; font-weight:600; line-height:normal; border-radius:999px; cursor:pointer; white-space:nowrap; background:#fff; color:#495057; border:1px solid #ced4da; }
.nh-btn--primary { background:#1066c4; color:#fff; border-color:#1066c4; }
.nh-btn--outline { background:#fff; color:#1066c4; border-color:#1066c4; }
/* 28cr (Dan: "mouseover on these buttons unreadable"): the generic button hover fills brand blue, which hid an outline
   button's blue text. Outline buttons hover pale, text stays blue — Save and Share tiles, Open, Save and Share, Close. */
.nh-btn--outline:hover:not(:disabled), :where(.pg-player) .nh-btn--outline:hover:not(:disabled) { background:#eef5ff; color:#1066c4; border-color:#0d5bb0; }
.nh-btn--sm { padding:3px 11px; font-size:12px; flex-shrink:0; }
.nh-chip { display:inline-block; margin-top:3px; padding:1px 8px; border-radius:999px; background:#fff4e5; color:#8a5300; font-size:11.5px; }

/* Guide components (2026-09-23, CSS step 3) — were ~250 repeated inline styles in start-guide.html. */
.g-card { background:#fff;border:1px solid #e3e6ea;border-radius:10px;padding:22px;margin-bottom:18px;box-shadow:0 1px 3px rgba(0,0,0,.04); }
.g-hero { background:#1066c4;color:#fff;padding:14px 18px;border-radius:8px;margin:0 0 16px;box-shadow:0 2px 6px rgba(0,0,0,.15); }
.g-hero-title { font-size:20px;font-weight:700;line-height:1.2; }
.g-hero-sub { font-size:14px;opacity:.92;margin-top:3px;line-height:1.35; }
.g-tab { padding:7px 14px;border:1px solid #e3e8ef;border-radius:999px;cursor:pointer;box-shadow:none;font-size:12.5px;font-weight:600;margin:0 6px 8px 0;white-space:nowrap;background:#fff;color:#5a6472; }
.g-cell { padding: 8px; border: 1px solid #dee2e6; }
.g-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.g-h4 { margin: 16px 0 8px 0; color: #495057; font-size: 14px; font-weight: 600; }
.g-bad { background: #fff; padding: 12px; border-radius: 6px; border-left: 4px solid #ffc107; color: #1a3b63; }
.g-good { background: #d4edda; padding: 12px; border-radius: 6px; border-left: 4px solid #28a745; }
.g-tier-title { color:#1066c4;border-bottom:2px solid #1674dc;padding-bottom:6px; }
.g-fs13 { font-size: 13px; }
.g-scroll { overflow-x: auto; margin-top: 8px; }
.g-gap { margin-bottom:36px; }
.g-left { text-align:left; }

/* Small shared pieces (2026-09-23, CSS step 3) — were repeated inline styles on the pages. */
.nh-link { color:#1674dc; text-decoration:none; font-weight:600; }
.nh-nowrap { white-space:nowrap; }
.nh-more { margin:10px 0 0; font-size:12px; }
.nh-note { font-size:11px; color:#6c757d; }
.nh-docs-body { overflow-y:auto; padding:24px 32px; flex:1; font-size:14px; line-height:1.65; color:#333; }

/* Snapshot window shown inside the Player (phrase-finder.html?embed=snapshot, 2026-09-23):
   hide everything but the snapshot window; transparent so the Player shows through its dimmer. */
html.nh-embed-snapshot, html.nh-embed-snapshot body { background:transparent !important; }
html.nh-embed-snapshot body > *:not(#signal-modal-overlay) { display:none !important; }

/* ===================================================================================
   PAGE STYLES — moved here from each page's own <style> blocks (2026-09-23, Dan: one shared CSS).
   Step 1 of the consolidation: every rule is scoped to its page with :where(.pg-…) on <html>,
   which adds no specificity, so each page looks exactly as before. Step 2 folds repeated
   patterns into the shared components above.
   =================================================================================== */

/* ---------- index.html (.pg-player) ---------- */
/* Rules identical across pages were consolidated into shared.css on 2026-09-12. */
:where(.pg-player) * { box-sizing: border-box; }
:where(.pg-player) body { 
            font-family: Arial, sans-serif; 
            margin: 0; 
            padding: 20px; 
            background-color: #f8f9fa; 
            color: #212529;
            line-height: 1.5;
            /* Was 100px for the old fixed 70px-tall bar, then 160px when the bar grew
               to 2 status lines. Bumped to 165px now that a plain-text Play/Pause/Stop
               fallback row was added above the styled buttons (~20-25px taller). */
            /* Was 165px for the full-width band plus its plain-text fallback row. The dock is
               shorter and floats clear of the edge, so the reserve comes down with it. */
            /* Measured, not guessed (2026-09-13). The dock is auto-height — one status line idle,
               two while playing, two rows on a phone — so any fixed reserve is wrong in some
               state. 120px was tuned for the desktop idle dock and left the phone dock sitting on
               top of content. setDockReserve() keeps the variable current; the literal is only the
               pre-script fallback. */
            padding-bottom: var(--dock-reserve, 120px);
        }
:where(.pg-player) .container {
            max-width: 1400px;
            margin: 0 auto;
        }
:where(.pg-player) .main-layout {
            /* Top/bottom bands: Build Your Session (full-width, 2×2 phrase grid) stacked
               above Controls (full-width). Was a 1fr 1fr side-by-side grid; switched so
               the phrase sections get the full page width. */
            display: flex;
            flex-direction: column;
            gap: 20px;
            margin: 10px 0;
        }
/* Build band: two EXPLICIT fixed columns (flex), not CSS columns. CSS column
           auto-balancing broke in Safari (it packed 3 sections left, 1 right), so we
           assign sections to columns deterministically: Foundation + Rife + Preset on
           the left, Playlist alone on the right. The Playlist textarea's height is set
           explicitly by JS (matchPlaylistHeightToLeftColumn(), desktop widths only —
           see its own comment) to match the left column's rendered height, rather than
           a CSS flex/stretch trick. */
:where(.pg-player) .build-grid {
            display: flex;
            gap: 20px;
            align-items: flex-start;
        }
:where(.pg-player) .build-col {
            flex: 1;
            min-width: 0;
            display: flex;
            flex-direction: column;
            gap: 20px;
        }
/* Cards size to their content (2026-09-14). Stretching the last one to level the columns
           made sense when it was a stack of sections; with tabs it holds one panel at a time, so
           the stretch just padded the card with the empty space you could see below the tabs. */
:where(.pg-player) .build-grid { align-items: flex-start; }
/* Controls band: single full-width column — its 7 boxes have mismatched heights
           with no natural pairing, so any 2-col grid left dead gaps. Controls is a
           set-and-forget config area (below the fold), so a clean full-width stack with
           zero gaps beats a gappy grid. */
/* ONE card for the whole Controls band (2026-09-14). Waveforms, Options, Session Name and
           Saved Options were four separate cards stacked with 20px gaps — four borders, four
           shadows and three gutters to say "these four things belong together". They are now
           sections of a single card divided by hairlines. */
:where(.pg-player) .controls-inline {
            display: grid;
            grid-template-columns: 1fr;
            gap: 0;
            align-items: start;
            background: #fff;
            border: 1px solid #e9ecef;
            border-radius: 10px;
            box-shadow: 0 1px 3px rgba(16,24,40,.04);
            overflow: hidden;
        }
:where(.pg-player) .controls-inline > .section {
            background: transparent;
            border: none;
            border-radius: 0;
            box-shadow: none;
            margin: 0;
            padding: 18px 20px;
        }
/* Divider on every section except the first. Adjacency (+) missed Options because two
           non-.section children sit in this grid between the blocks. */
:where(.pg-player) .controls-inline > .section { border-top: 1px solid #eef1f4; }
:where(.pg-player) .controls-inline > .section:first-of-type { border-top: none; }
/* Waveform zone: no box of its own. The uppercase zone label plus the checkbox rows are
           enough structure — a bordered box inside a card inside a column was three wrappers deep. */
:where(.pg-player) .controls-inline .waveform-grid { margin-top: 4px; }
:where(.pg-player) .controls-inline [class*="waveform"] > div[style*="border:1px"],
:where(.pg-player) .controls-inline .section > div[style*="border:1px"] {
            border: none !important; padding: 0 !important; background: transparent !important;
        }
/* Options fields on an even grid. They were inline-flex items sized to their own labels,
           so "Duration (Minutes):" and "Cycles" produced columns of different widths. */
:where(.pg-player) .controls-inline .section .options-row,
:where(.pg-player) .controls-inline .section > div[style*="display:flex"][style*="gap"] { row-gap: 10px; }
/* Three columns: five fields fall 3 + 2. auto-fit gave 4 + 1, leaving Frequency Mode
           orphaned on its own row under three empty cells. */
:where(.pg-player) .controls-inline .session-limits-grid {
            display: grid !important;
            grid-template-columns: repeat(4, minmax(0, 1fr)) !important;   /* four fields, one row (28ba: Frequency mode retired) */
            gap: 8px 12px !important;
            align-items: end;
        }
:where(.pg-player) .controls-inline .session-limits-grid label { font-size: 12.5px; }
:where(.pg-player) .controls-inline .session-limits-grid input,
:where(.pg-player) .controls-inline .session-limits-grid select { padding: 7px 9px !important; font-size: 13.5px !important; }
:where(.pg-player) .controls-inline .controls-panel.is-active { padding-top: 4px !important; padding-bottom: 4px !important; }
@media (max-width: 700px) {
:where(.pg-player) .controls-inline .session-limits-grid { grid-template-columns: repeat(2, minmax(0,1fr)) !important; }
}
:where(.pg-player) .controls-inline .session-limits-grid > * { min-width: 0; }
:where(.pg-player) .controls-inline .session-limits-grid input,
:where(.pg-player) .controls-inline .session-limits-grid select { width: 100% !important; box-sizing: border-box; }
/* Sections inside the build column sit tighter than they did as standalone cards. */
:where(.pg-player) .controls-inline > .section { padding: 14px 16px; }
/* Above-the-fold budget (2026-09-14). Options started at y=920 on a 900px viewport — one
           notch below the fold, so step 4 was invisible on arrival. Trimmed from the gaps rather
           than the content: banner margin, column gap, and the cards' own padding. */
@media (min-width: 861px) {
:where(.pg-player) .page-banner { margin-bottom: 10px; padding: 10px 16px; font-size: 19px; }
/* h1 inside the hero banner: shared.css sets it dark, 32px, with its own margins — all
           three are wrong on a blue slab that already supplies the padding. */
:where(.pg-player) #page-hero h1 { color: #fff; font-size: 22px; margin: 0; line-height: 1.2; }   /* 28el (item 66): 22px, as on every other page (was 27) */
@media (max-width: 600px) {
:where(.pg-player) #page-hero h1 { font-size: 22px; }
}
/* Session Records sits at the very bottom and is collapsed by default, so in its usual
           state it was a full card header — title, subtitle, 28px of space above — announcing
           something you cannot see (2026-09-14). Collapsed it is now one slim line; expanded it
           gets its subtitle and spacing back, because then it is heading real content. */
/* Collapsed, the space around this band came from three rules stacking: .main-layout's
           20px column gap above it, .page-banner's own 15px bottom margin, and .what-is-panel's
           20px top margin below — roughly 55px of air around one slim line with nothing under it
           (2026-09-14). The bottom margin in particular was spacing it from a body that is not
           displayed. */
:where(.pg-player) #session-records-head:not(.is-open) {
            margin-top: 6px; margin-bottom: 0; padding: 7px 14px; font-size: 15px;
            /* The 3px blue keyline is .page-banner.band's way of marking a header that introduces
               a section. Collapsed there is no section under it, so the accent was claiming a
               weight the row does not carry — and it is the last thing on the page, where a strong
               accent pulls the eye down. Matched to the rest of the border while collapsed; the
               keyline returns with the content it belongs to (2026-09-14). */
            border-left: 1px solid #e3e9f0;
        }
/* Only index stacks this directly under a collapsed band; shared.css keeps 20px for the
           other four pages, where it follows real content. */
:where(.pg-player) .what-is-panel { margin-top: 12px; max-width: 1400px; margin-left: auto; margin-right: auto; }   /* same width as the container (Dan, 2026-09-28) */
:where(.pg-player) #session-records-head:not(.is-open) > span:not([id]) { display: none; }
:where(.pg-player) .build-grid { gap: 14px; }
:where(.pg-player) .build-col { gap: 14px; }
:where(.pg-player) .build-col > .section { padding: 14px 16px; }
:where(.pg-player) .build-col > .section > .section-subtitle { margin-bottom: 8px; }
:where(.pg-player) .controls-inline > .section { padding: 12px 16px; }
/* Waveforms is the tallest block in this column — nine checkboxes over two rows plus a
               heading, a subtitle and a zone label. Tightened row spacing and dropped the subtitle
               (the info button carries the same explanation) to bring step 4 clear of the fold. */
:where(.pg-player) .controls-inline .waveform-grid { gap: 4px 10px !important; }
:where(.pg-player) .controls-inline .waveform-grid label { padding: 2px 0 !important; font-size: 13px; }
:where(.pg-player) .controls-inline .section > .section-subtitle:first-of-type { display: none; }
}
/* Select All / Unselect All rode on their own full-width line under the heading. Pulled up
           beside the heading — they act on the checkboxes below, they are not a step of their own. */
:where(.pg-player) .controls-inline .section:first-of-type { position: relative; }
/* No longer absolutely positioned: the row now carries the status message as well, so it
           needs the full width rather than a corner. */
:where(.pg-player) .controls-inline .section:first-of-type > div[style*="justify-content:space-between"] {
            margin: 0 0 6px !important;
        }

/* The waveform zone had its own bordered box INSIDE the Waveforms section — a third
           wrapper once the band became one card. The zone label and the checkbox rows are enough
           structure on their own. */
:where(.pg-player) .controls-inline .waveform-grid { margin-top: 6px; }
:where(.pg-player) .controls-inline .section > div[style*="border"] { border: none !important; padding-left: 0 !important; padding-right: 0 !important; }
/* Section titles step down: they are parts of one card now, not cards of their own. */
:where(.pg-player) .controls-inline > .section > .section-title,
:where(.pg-player) .controls-inline > .section > .section-header .section-title { font-size: 15px !important; }
/* Grid items default to min-width:auto, which uses their content's min-content
           size as a floor — so a wide-but-shrinkable child (like the sessionNotes row)
           could still force .section wider than the 1fr track on narrow screens instead
           of actually shrinking to fit. Same fix already applied to .sessions-grid's
           children; this was the one spot that still needed it (found via a real mobile
           screenshot showing horizontal overflow starting exactly at .section). */
:where(.pg-player) .controls-inline > .section { min-width: 0; }
/* Inner 3-column layout for the merged "Sessions & Downloads" card (Saved
           Configurations | History & Reports | Downloads), mirroring how Session Limits
           groups two fields in one card. Collapses to one column on narrow screens. */
:where(.pg-player) .sessions-grid {
            display: grid;
            grid-template-columns: 1fr 1fr 1fr;
            gap: 20px;
            align-items: start;
        }
:where(.pg-player) .sessions-grid > div { min-width: 0; }
/* Session Records, one consistent card (2026-09-14). It had become a mix: History and
           Downloads side by side in a grid, then Session Name and Saved Options stacked in their
           own bordered card below — rows, columns and containers with no single rule. Every block
           is now a full-width section of ONE card divided by hairlines, like the Controls band. */
/* Matches the build cards exactly (2026-09-14): they are #e0e0e0 / 12px / 0 4px 8px, and
           this card was #e9ecef / 10px / a much fainter shadow, so it read as a different family
           of object on the same page. */
:where(.pg-player) .records-card {
            background: #fff; border: 1px solid #e0e0e0; border-radius: 12px;
            box-shadow: 0 4px 8px rgba(0,0,0,.1); overflow: hidden;
        }
:where(.pg-player) .controls-tabs { border-radius: 0; }
:where(.pg-player) .records-card > .section,
:where(.pg-player) .records-card .sessions-grid > div {
            background: transparent; border: none; border-radius: 0; box-shadow: none;
            margin: 0; padding: 14px 16px;
        }
:where(.pg-player) .records-card .sessions-grid { display: block; gap: 0; }
:where(.pg-player) .records-card .sessions-grid > div + div { border-top: 1px solid #eef1f4; }
:where(.pg-player) .records-card > .section + .section { border-top: 1px solid #eef1f4; }
:where(.pg-player) .records-card .section-title { font-size: 15px !important; }
/* Three equal tabs (2026-09-14). Stacked sections meant scrolling past History to reach
           Saved Options; these three are alternatives you consult one at a time, not a sequence. */
/* Auto-flow, not repeat(3, 1fr) (2026-09-14). The count was pinned at three, so when Session
           Name / Notes moved out to the History tab row the two survivors kept a third of the width
           each and left a dead slot on the right. Divides by however many tabs are actually present.
           minmax(0, 1fr) rather than 1fr: a track's default minimum is min-content, which would let
           the longer label claim a wider tab. */
:where(.pg-player) .records-tabs { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); border-bottom: 1px solid #e0e0e0; }
:where(.pg-player) .records-tab {
            padding: 12px 10px; text-align: center; font-size: 14px; font-weight: 600;
            color: #6c757d; background: #f8f9fa; border: none; border-right: 1px solid #e9ecef;
            cursor: pointer; box-shadow: none; border-radius: 0;
        }
:where(.pg-player) .records-tab:last-child { border-right: none; }
:where(.pg-player) .records-tab:hover { background: #f1f3f5; color: #495057; }
:where(.pg-player) .records-tab.is-active { background: #fff; color: #1066c4; box-shadow: inset 0 -2px 0 #1e87fd; }
:where(.pg-player) .records-panel { display: none; }
:where(.pg-player) .records-panel.is-active { display: block; }
@media (max-width: 560px) {
:where(.pg-player) .records-tab { font-size: 12px; padding: 10px 4px; }
}
@media (max-width: 560px) {
:where(.pg-player) .controls-tab { font-size: 11px; padding: 10px 3px; }
}
/* Five tabs (2026-09-21): at 375px that is ~70px each; "Downloads" is the widest label. */
@media (max-width: 400px) {
:where(.pg-player) .controls-tab { font-size: 10.5px; padding: 10px 2px; letter-spacing: -0.1px; }
}
/* Same tabs inside the build column's controls card (2026-09-14). Waveforms and Options are
           both "how it sounds / how long it runs" settings you set once — stacking them cost ~200px
           of the build column for two things rarely touched in the same breath. */
/* grid-auto-flow instead of a fixed repeat(2, 1fr) (2026-09-14): the column count was
           pinned to two, so adding the Notes & Export tab pushed it onto a second row. Auto-flow
           divides the row evenly by however many tabs exist, so a fourth would not need a CSS
           change either. minmax(0, 1fr) rather than 1fr — a grid track's default minimum is
           min-content, which would let a long label widen its own tab and unbalance the row. */
:where(.pg-player) .controls-tabs { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); border-bottom: 1px solid #e9ecef; margin: 0; }
:where(.pg-player) .controls-tab {
            /* Three tabs in the build column leaves roughly 130px each, so the label has to be
               allowed to shrink rather than force the track wider. */
            min-width: 0; padding: 10px 6px; text-align: center; font-size: 13px; font-weight: 600;
            color: #6c757d; background: #f8f9fa; border: none; border-right: 1px solid #e9ecef;
            cursor: pointer; box-shadow: none; border-radius: 0;
        }
:where(.pg-player) .controls-tab:last-child { border-right: none; }
:where(.pg-player) .controls-tab:hover { background: #f1f3f5; color: #495057; }
:where(.pg-player) .controls-tab.is-active { background: #fff; color: #1066c4; box-shadow: inset 0 -2px 0 #1e87fd; }
:where(.pg-player) .controls-panel { display: none; }
:where(.pg-player) .controls-panel.is-active { display: block; }
/* Panel content shares the card's left edge too — it was inheriting a second 16px, so the
           intro sentence and checkboxes sat indented from the header above them. */
:where(.pg-player) .controls-panel { padding-left: 0 !important; padding-right: 0 !important; }
/* The card stretches to level the columns; without this its grid rows share out the extra
           height and the panel floats in the middle of a mostly empty card. */
:where(.pg-player) .controls-inline { align-content: start; }
/* Headers stay visible: they carry the info button and the Autoselect Waveforms link, not
           just the title. Hiding them to avoid repeating the tab name took those with it. Only the
           title TEXT is dropped, so the controls beside it survive. */
/* The panel header holds only the info button and (for Waveforms) the Autoselect link once
           the title text is hidden — a lone blue circle on its own line. Pulled inline with the
           intro sentence below it so each panel opens with one tidy line. */
/* Layout A (2026-09-14): one intro line per panel — description, then the tooltip, then
           the actions right-aligned. Before this the Autoselect link came BEFORE the sentence that
           explains what waveforms are, and Select All sat on a third line inside a box wrapping
           only the checkboxes: three bands for one idea. */
:where(.pg-player) .controls-panel > .section-header .section-title-text { display: none; }
:where(.pg-player) .controls-panel > .section-header { display: none; }
:where(.pg-player) .panel-intro {
            display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 0 0 10px;
        }
/* No font rules here: the sentence keeps its own .section-subtitle styling. */
:where(.pg-player) .panel-intro .section-subtitle { flex: 0 1 auto; }
/* Saved, Downloads and History intros (2026-09-23, Dan): same row, same spacing as Waveforms/Options. */
:where(.pg-player) .panel-intro.tab-row { margin: 12px 0 10px !important; }
/* !important: the tab builder zeroes the old heading margin inline */
/* Autoselect output (status line and the "Why these waveforms" disclosure) sits between the
           intro row and the checkboxes, flush with them. It was landing inside the checkbox wrapper
           at a different indent, which is where the ragged left edge came from. */
/* One treatment for every status state — the red error was the same size and weight as
           body copy, which made it shout next to the italic "same phrases as last time" note. */
:where(.pg-player) .controls-panel #aw-status,
:where(.pg-player) .controls-panel #aw-detail { margin: 0 0 8px; padding: 0; }
:where(.pg-player) .controls-panel #aw-status { font-size: 12px; font-style: italic; }
:where(.pg-player) .controls-panel #aw-status:empty { display: none; margin: 0; }
:where(.pg-player) .controls-panel #aw-detail:empty { display: none; margin: 0; }
/* Any wrapper still carrying a box around the checkboxes loses it — the grid aligns to the
           panel's own left edge like the intro line above it. */
:where(.pg-player) .controls-panel .waveform-grid { padding: 0 !important; }
/* The zone wrapper still had its box — I had only made the border transparent, which left
           a 1px gap and a 10px radius shaping the area. Removed outright. */
:where(.pg-player) .controls-panel > div:has(> .waveform-grid),
:where(.pg-player) .controls-panel > div[style*="border"] {
            border: none !important; border-radius: 0 !important; padding: 0 !important;
            background: transparent !important; box-shadow: none !important; margin: 0 !important;
        }
/* Left-aligned on its own line under the sentence (2026-09-23, Dan: right-aligned looked odd). */
:where(.pg-player) .panel-intro .panel-intro-actions {
            margin-left: 0; flex-basis: 100%; display: inline-flex; align-items: center; gap: 12px; white-space: nowrap; flex-wrap: wrap;
        }
/* All / None came from the zone header, where their styling was inline on the old markup.
           Moving them here left them as raw browser links — underlined, inherited size. Matched to
           the Autoselect link beside them. */
:where(.pg-player) .panel-intro-actions a {
            font-size: 12px; font-weight: 600; color: #1674dc; text-decoration: none;
        }
:where(.pg-player) .panel-intro-actions a:hover { text-decoration: underline; }
:where(.pg-player) .panel-intro .info-btn { flex: 0 0 auto; }
/* Checkbox grid: no box of its own, three columns of three rather than 5 + 4. */
:where(.pg-player) .controls-panel .waveform-grid {
            display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
            gap: 4px 14px !important; margin: 0 !important;
        }
@media (max-width: 700px) {
:where(.pg-player) .controls-panel .waveform-grid { grid-template-columns: repeat(2, minmax(0,1fr)) !important; }
}
:where(.pg-player) .controls-panel > .section-header {
            display: inline-flex; align-items: center; gap: 8px; margin: 0 8px 0 0; float: left;
        }
:where(.pg-player) .controls-panel > .section-subtitle { margin: 0 0 10px; overflow: hidden; }
:where(.pg-player) .controls-panel > .section-header .section-title { display: inline-flex; align-items: center; gap: 8px; }
/* Card header above the tabs, naming the group the two tabs belong to. */
/* Spacing only — the type comes from .section-title / .section-subtitle, same as every
           other card on the page. Hard-coding 17px/700 here is what let it drift to 15px earlier. */
/* No horizontal padding: the CARD already supplies 16px, and adding another 16 put this
           header at x=53 while Foundation and Rife sit at x=37. Vertical padding only. */
:where(.pg-player) .controls-card-head { padding: 0 0 6px; border-bottom: none; }   /* 28an: tighter, no divider */
/* The tab bar is a DIRECT child of .controls-inline, and that element has no padding of
           its own — the 20px belongs to `.controls-inline > .section`, which the bar is not. So the
           -16px here was not cancelling anything; it made the bar 32px wider than the card, and
           `overflow:hidden` then clipped it against the 10px rounded corner. With four tabs that
           showed up as the last tab and its underline running into the card's right edge
           (2026-09-14). Zero is correct: no padding to cancel. */
:where(.pg-player) .controls-tabs { margin-left: 0 !important; margin-right: 0 !important; }
:where(.pg-player) .controls-card-head .section-header { margin: 0; }
:where(.pg-player) .controls-card-head .section-subtitle { margin: 2px 0 0; }
:where(.pg-player) .controls-tabs { margin-top: 0 !important; }
@media (max-width: 860px) {
:where(.pg-player) .sessions-grid { grid-template-columns: 1fr; }
}
:where(.pg-player) .left-column,
:where(.pg-player) .right-column {
            display: flex;
            flex-direction: column;
            gap: 20px;
        }
/* The controls band is empty (2026-09-14). Its cards moved into the build column and
           Session Records; what is left is a wrapper around hidden <select>/<input> elements that
           exist only so the JS can read #phraseRepeat and friends by id. Every one
           of them is already display:none — but the WRAPPER was not, so it still counted as a flex
           child and collected a 20px gap on each side of nothing. getElementById and .value work
           regardless of an ancestor being hidden, so nothing that reads them is affected.
           The moment a visible card goes back in here, delete this rule. */
:where(.pg-player) .right-column > .controls-grid { display: none; }
/* Session Records is the last thing on the page; 28px above it was tuned when a full
           controls band sat between it and the build grid. */
:where(.pg-player) #session-records-head.is-open { margin-top: 16px; }
/* Belt and braces (2026-09-21): the Records band is removed once History moves into Sound &
           Session. If anything ever leaves it in the DOM, it must not reappear — initSessionRecordsCollapse()
           sets inline display, which an !important class rule beats. */
:where(.pg-player) #session-records-body.is-emptied,
:where(.pg-player) .records-card:not(:has(.sessions-grid)) { display: none !important; }
@media (max-width: 860px) {
/* Phones/tablets: both bands collapse to a single column. Override
               align-items back to stretch here — the desktop rule sets
               flex-start (needed so the two side-by-side columns don't stretch
               to match each other's height), but in this single-column
               (flex-direction:column) mode that same flex-start governs the
               CROSS axis, which is now width — so each .build-col was shrinking
               to fit its own content instead of spanning full width, causing
               inconsistent widths between sections. */
:where(.pg-player) .build-grid { flex-direction: column; align-items: stretch; }
:where(.pg-player) .controls-grid { grid-template-columns: 1fr; }
}
:where(.pg-player) .section {
            background: #fafafa;
            padding: 14px;
            border-radius: 12px;
            box-shadow: 0 4px 8px rgba(0,0,0,0.1);
            border: 1px solid #e0e0e0;
        }
/* Session status, relocated into the floating Play/Pause/Stop bar (see
           .floating-status below) from its old spot as a big blue box at the top of
           the page. Kept as plain inline text now that it lives inside the bar's own
           white background — no box chrome of its own needed. */
:where(.pg-player) .session-status {
            display: inline;
        }
/* Primary line — bold; the "where am I in the session" answer. Merges
           visually with #preflightEstimateText right after it (see .floating-status-line1). */
:where(.pg-player) .session-status-primary {
            font-size: 14px;
            font-weight: bold;
            color: var(--text-primary, #222);
        }
/* Secondary line — smaller, dimmer; the "what's playing right now" detail */
:where(.pg-player) .session-status-secondary {
            font-size: 11px;
            font-weight: normal;
            color: #6c757d;
            line-height: 1.3;
            /* Hidden until the secondary line has content (set via JS) */
            display: none;
        }
/* Legacy aliases — kept so any external CSS/printouts targeting
           the old class names continue to work without no-op restyling. */

/* Form Elements */
:where(.pg-player) input[type="text"],
:where(.pg-player) input[type="number"],
:where(.pg-player) input[type="time"],
:where(.pg-player) select,
:where(.pg-player) textarea {
            width: 100%;
            padding: 10px;
            border: 1px solid #ddd;
            border-radius: 6px;
            font-family: Arial, sans-serif;
            font-size: 14px;
        }
/* input[type=time] renders its clock icon/segments via internal browser
           shadow-DOM parts that the shared rule above can't reach — this tightens
           the remaining visual gaps (icon color, vertical centering) so it reads
           as "one of the same row of boxes" rather than a visibly different
           control next to Timer/Cycles/Delay Between Cycles. */
:where(.pg-player) input[type="time"] {
            box-sizing: border-box;
            color: #333;
        }
:where(.pg-player) input[type="time"]::-webkit-calendar-picker-indicator {
            opacity: 0.6;
            cursor: pointer;
        }
:where(.pg-player) textarea {
            resize: vertical;
            min-height: 100px;
        }
:where(.pg-player) button {
            background: #1674dc;
            color: white;
            border: none;
            padding: 10px 16px;
            border-radius: 6px;
            font-weight: bold;
            cursor: pointer;
            font-size: 14px;
            transition: all 0.3s ease;
        }
@media (hover: hover) {
:where(.pg-player) button:hover:not(:disabled) {
            background: #1066c4;
            transform: translateY(-1px);
        }
}
:where(.pg-player) button:disabled {
            background: #6c757d;
            cursor: not-allowed;
            opacity: 0.6;
        }
/* A Play button that is disabled BECAUSE a session is active in this tab.
           Overrides the grey disabled look with a clear green "Playing" state so an
           active tab is unmistakable at a glance — even when backgrounded — rather
           than reading as an idle/greyed-out control. */
:where(.pg-player) button.is-playing:disabled,
:where(.pg-player) button.is-playing {
            background: #1066c4;
            color: #fff;
            opacity: 1;
            cursor: default;
        }
:where(.pg-player) button.is-playing::before {
            content: '';
            display: inline-block;
            width: 8px;
            height: 8px;
            margin-right: 7px;
            border-radius: 50%;
            background: #fff;
            vertical-align: middle;
            animation: playingPulse 1.4s ease-in-out infinite;
        }
@keyframes playingPulse {
            0%, 100% { opacity: 1; }
            50% { opacity: 0.3; }
        }

   /* no red on the site (Dan, 2026-09-27): destructive actions are outline buttons */

/* Info Buttons */
:where(.pg-player) .info-btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 18px;
            height: 18px;
            line-height: 1;
            background: #1674dc;
            color: white;
            border: none;
            border-radius: 50%;
            font-size: 12px;
            font-weight: bold;
            cursor: pointer;
            margin-left: 8px;
            padding: 0;
        }
/* Select Links */
:where(.pg-player) .select-links {
            font-size: 12px;
            margin: 8px 0;
        }
:where(.pg-player) .select-links a {
            color: #1674dc;
            text-decoration: none;
            font-size: 13px;
        }
:where(.pg-player) .select-links a:hover {
            text-decoration: underline;
        }
/* Option Sections — only used by Preset Phrases' inner content now. Used to
           have its own border/background (a "box within a box" look, redundant with
           the outer .section card); simplified per Dan's call to just spacing. */
:where(.pg-player) .option-section {
            margin: 15px 0;
        }

/* Subcategory group styling — shared between browse view (#phraseResults)
           and search view (#searchResultsList). Single source of truth so both
           views look identical. Simplified per Dan's call: plain indentation only —
           no background colors, accent borders, or hover/expanded color changes.
           The chevron glyph (▶/▼) alone signals expand state.
           Class structure:
             .subcat-group      → outer container
             .subcat-header     → clickable header row (chevron + checkbox + label)
             .subcat-chevron    → ▶/▼ glyph
             .subcat-label      → "Category → Subcategory (N)" text
             .subcat-body       → phrase list wrapper (hidden when collapsed)
             .subcat-phrase     → individual phrase label row */

/* Plain indentation only — no connecting border. Body sits under and to
           the right of the header via margin/padding alone. */

/* ---- Preset Phrases results tree (2026-09-13) -------------------------------------
           Own classes rather than reusing .subcat-*, which #foundationalGrid also styles.
           Weight descends with depth: the group is loudest, the phrase quietest, because the
           phrase is the content and the two rows above it are only signposts. Indent is ONE
           step per level; it used to be five stacked margins (20 + 10 + 28 + 14 + 10), which
           pushed phrase text far right on a narrow screen. */

/* The results list and its action row share one container so the button can stick to the
           bottom of the list. Before this the button sat AFTER the scroll area, so expanding or
           selecting everything pushed it below the fold and there was no way to act on a
           selection without scrolling back. (2026-09-13) */

/* Both results views sit inside flex rows, so each needs to claim a full row of its own
           or it sizes to the space left beside a sibling. */

/* NOT sticky. Sticking it to the bottom put it under the fixed player dock; offsetting it
           above the dock left it floating over the middle of the list. The always-reachable copy
           lives in the header row instead (.pt-headbtn), where nothing can overlap it. This one is
           an ordinary row at the end of the list. (2026-09-13) */

/* Compact primary action in the header row, beside Select All / Expand All. Hidden until
           something is actually selected, so an empty list is not offering an action. */
/* Always present, disabled until something is checked (2026-09-14). Hiding it entirely
           meant the control you were looking for was absent rather than inactive, which reads as a
           bug — and it moved the rest of the header row every time a selection appeared. */

/* Rife Frequencies preset Subcategory row — label + dropdown side by side,
           vertically aligned with the Category row above. Set here as real CSS
           (not inline) because the old Rife dropdown code
           toggle this element's visibility via style.display = '' / 'none', which
           clears any inline display:flex override along with it. */

/* Unified section header — single source of truth for top-level section titles */
:where(.pg-player) .section-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-weight: bold;
            font-size: 16px;
            margin-bottom: 8px;
        }
/* Badge now follows the title and its info button (2026-09-14) — it annotates the section
           rather than prefixing it. Small pill ("Plays 1st"/"2nd") on Rife
           Frequencies / Phrase Playlist's titles, reinforcing the fixed play order
           stated once in the "Build Your Session" banner — easy to scroll past
           there, always visible here. */

/* Ensure label inside a section-header inherits its font (no browser default 'clickable' feel beyond its actual associated input) */
:where(.pg-player) .section-header label.section-title {
            cursor: pointer;
            font-size: 16px;
            margin: 0;
            padding: 0;
        }
:where(.pg-player) .section-header label.section-title:hover {
            background: transparent;
        }
/* Collapsible build-section pattern. Each of the 4 left-column sections gets a
           "(show)/(hide)" text toggle on the right side of its section-header. Click
           anywhere in the section-header to toggle. Default state: open (the user sees
           everything by default; they can collapse to compact the page). State persists
           in localStorage so the user's preferred layout sticks across visits. */

/* Core Phrases grid: cap height on desktop so the other 3 sections in the left
           column stay visible without endless scrolling. Mobile keeps natural page-scroll
           since internal scroll boxes conflict with touch gestures.
           Height raised so a typical first view (a couple expanded categories) fits without
           internal scrolling; the scrollbar still appears for very tall content. */

/* Core phrase lists use a 2-column GRID so items read row-wise — item 1
           top-left, item 2 top-right, item 3 second-row-left, etc. (CSS columns would
           flow down-then-over instead). Scoped to #foundationalGrid so the Preset
           Phrases browse list (also .subcat-body) stays single-column. */

/* Collapsed state — overrides the grid display to hide the phrase list.
           Using a class (not inline display:none) means expanding restores the grid
           display from the rule above rather than a hardcoded 'block'. */

@media (max-width: 600px) {
/* Mobile: drop the height cap so the grid expands naturally with the page.
               Internal scroll boxes on phones fight with page-scroll gestures.
               Also drop to a single column — two columns are too cramped on a phone. */

}
:where(.pg-player) .section-subtitle {
            font-size: 13px;
            color: #6c757d;
            margin: -4px 0 12px 0;
            line-height: 1.4;
            font-weight: normal;
        }
/* Search and Filter Inputs */

/* Tag chips */

/* Tag type-ahead suggestions */

/* Tag-picker modal (See tags) */
/* Tag/browse picker styles moved to shared.css (2026-09-13) — one shell shared with the
           Prioritizer's area picker. Do not re-add rules here: page CSS loads after shared.css
           and would silently override it. */
/* Breadcrumb browse nav */

/* Unpicked level shown as a solid Select… button (matches the Select Tags button) */

/* Content-sized modal: shrink to fit short lists instead of filling the screen */
/* .tp-auto sizing now lives in shared.css (2026-09-13). */
/* Results Areas */
:where(.pg-player) .results-area {
            max-height: 300px;
            overflow-y: auto;
            border: 1px solid #ddd;
            padding: 12px;
            background: #fafafa;
            border-radius: 6px;
        }
/* Category Styling for Option 3 */

/* Category Headers */

/* Zone Select All / Unselect All links inside the category header must
           NOT inherit the bold weight from .category-header. They match the
           page-wide section-action link style (not bold, smaller, link blue
           except where zone color is explicitly set inline). */

:where(.pg-player) .pathogen { background: #ffebee; color: #c62828; }
:where(.pg-player) .toxins { background: #fff3e0; color: #e65100; }
:where(.pg-player) .binders { background: #f3e5f5; color: #6a1b9a; }
:where(.pg-player) .ancestral { background: #e8f5e8; color: #2e7d32; }
:where(.pg-player) .recovery { background: #fce4ec; color: #ad1457; }

/* Enhanced Tooltips for Option 3 labels only */
:where(.pg-player) label[title] {
            position: relative;
            cursor: pointer;   /* 28ft (Dan: "mousing over the individual form checkboxes turn my cursor into a question mark"): the tooltip stays, the pointer is the usual one */
        }
:where(.pg-player) label[title]:hover {
            background: #f0f7ff !important;
            border-radius: 4px !important;
        }
:where(.pg-player) .default-core-foundations { font-weight: bold !important; color: #1565c0 !important; }
:where(.pg-player) .default-detox-clearing { font-weight: bold !important; color: #28a745 !important; }
:where(.pg-player) .default-pathogen { font-weight: bold !important; color: #c62828 !important; }
:where(.pg-player) .default-toxins { font-weight: bold !important; color: #e65100 !important; }
:where(.pg-player) .default-binders { font-weight: bold !important; color: #6a1b9a !important; }
:where(.pg-player) .default-ancestral { font-weight: bold !important; color: #2e7d32 !important; }
:where(.pg-player) .default-recovery { font-weight: bold !important; color: #ad1457 !important; }
:where(.pg-player) .default-nervous-system { font-weight: bold !important; color: #4527a0 !important; }
:where(.pg-player) label {
            display: flex;
            align-items: center;
            margin: 1px 0;
            font-size: 13px;
            padding: 2px 4px;
            cursor: pointer;
        }
:where(.pg-player) label:hover {
            background: #f5f5f5;
            border-radius: 3px;
        }
:where(.pg-player) input[type="checkbox"] {
            margin-right: 8px;
            transform: scale(1.1);
        }
/* Waveform Grid — used to have their own border/background
           (a "box within a box" against the outer .section card); simplified per
           Dan's call, same treatment as Preset Phrases' .option-section earlier. */
:where(.pg-player) .waveform-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
            gap: 8px;
            margin-top: 8px;
        }
/* Info Panels */
:where(.pg-player) .info-panel {
            margin: 10px 0;
            padding: 15px;
            background: #f0f7ff;
            border: 1px solid #b3d4fc;
            border-radius: 6px;
            font-size: 12px;
            color: #444;
            line-height: 1.5;
            display: none;
        }
/* Foundation Phrases toggle chips (dropdown-based redesign — click a chip to
           add/remove that phrase; off/gray by default, blue when selected). No
           Select All, mirrors the Rife Frequencies dropdown pattern instead of a
           full checkbox grid. */
:where(.pg-player) .toggle-chip {
            display: inline-flex;
            align-items: center;
            background: #fff;
            color: #495057;
            border: 1px solid #ced4da;
            border-radius: 14px;
            padding: 5px 12px;
            font-size: 12px;
            font-weight: 600;
            cursor: pointer;
            user-select: none;
            transition: background 0.1s, border-color 0.1s, color 0.1s;
        }
:where(.pg-player) .toggle-chip:hover { border-color: #1674dc; }
:where(.pg-player) .toggle-chip.on { background: #1674dc; color: #fff; border-color: #1674dc; }
/* Preset Phrases: plain hairline between Search / Tags / Browse, so the
           three read as alternative paths rather than one linear form — without
           the extra height a labeled "or" divider added. */

/* Apply link hover effects */

/* Advanced Settings Grid */

/* Session Limits Grid — same "box within a box" fix as above. */
:where(.pg-player) .session-limits-grid {
            display: grid;
            grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
            gap: 12px;
            margin-top: 8px;
        }
/* Configuration Controls */

/* History Tabs */
:where(.pg-player) .hist-tab {
            background: #f8f9fa;
            border: 1px solid #dee2e6;
            border-bottom: none;
            /* 16px each was comfortable for three tabs; four need the room back. */
            padding: 8px 12px;
            white-space: nowrap;
            cursor: pointer;
            font-size: 13px;
            border-radius: 4px 4px 0 0;
            color: #495057;
            font-weight: 500;
            transition: all 0.2s ease;
        }
:where(.pg-player) .hist-tab:hover {
            background: #e9ecef;
            color: #212529;
        }
:where(.pg-player) .hist-tab.active {
            background: #fafafa;
            border-bottom: 1px solid #fafafa;
            font-weight: bold;
            color: #1674dc;
        }
:where(.pg-player) .hist-tab-panel {
            max-height: 320px;
            overflow-y: auto;
            padding: 15px;
            border: 1px solid #dee2e6;
            border-radius: 0 0 4px 4px;
            background: #fafafa;
        }
/* What is Harmonic Player Panel */
/* moved to shared.css (2026-09-12) — see the page-header and what-is-panel blocks there */
/* moved to shared.css (2026-09-12) — see the page-header and what-is-panel blocks there */
/* Floating Audio Controls */
/* Preflight duration estimate — sits right after #timer on the same line
           (see .floating-status-line1), so no display:block/margin of its own; the
           wrapping span is `display:none` by default (toggled inline/none via JS)
           and the inner text stays close in size/weight to .session-status-primary
           since together they read as one sentence. */
:where(.pg-player) #preflightEstimateText {
            font-size: 14px;
            font-weight: normal;
            color: #495057;
        }
/* Floating bar: was a single fixed-height row; now a column so the button
           row and the status lines below it can stack. Height is now auto/content-driven
           instead of a fixed px value, since the status lines' height varies (idle:
           1 line, playing: up to 2 lines) — see body's increased padding-bottom below,
           sized to comfortably clear the tallest (playing, 2-line) state. */
/* Centred dock (2026-09-14), replacing the full-width band. The band pinned its controls
           to the left and the volume group to the right with a screen's width of nothing between
           them, which read as a page footer rather than a control. The dock is auto-width, sits
           centred, and shares its shell with the Generator's pending bar: same radius, one
           hairline border, one shadow. */
:where(.pg-player) .floating-controls {
            position: fixed !important;
            bottom: 14px !important;
            left: 50% !important;
            transform: translateX(-50%) !important;
            width: auto !important;
            max-width: calc(100vw - 24px) !important;
            background: #ffffff !important;
            border: 1px solid #cfdcea !important;
            border-radius: 999px !important;
            /* Below every popup (2026-09-22, Dan). At 999999 the dock sat over Templates, Upload, the
               pickers and the tag/family windows (z 9999–10050), hiding their Save/Close/Apply
               buttons. An open popup now covers the dock instead. Toasts, the phrase check window
               and the Guide stay above everything. */
            z-index: 9000 !important;
            display: flex !important;
            flex-direction: column !important;
            align-items: center !important;
            gap: 6px !important;
            padding: 10px 16px !important;
            box-sizing: border-box !important;
            box-shadow: 0 4px 18px rgba(16,24,40,.18) !important;
        }
/* Playing: the border carries the state so the buttons do not have to change colour. */
:where(.pg-player) .floating-controls.is-running { border-color: #7fb2ee !important; }
@media (max-width: 680px) {
/* A phone cannot fit one row; square the corners off so a two-row dock does not read
               as a lozenge with a bite out of it. */
:where(.pg-player) .floating-controls { border-radius: 14px !important; padding: 10px 12px !important; width: calc(100vw - 24px) !important; }
/* Explicit rows instead of letting flex wrap wherever it runs out of space — free
               wrapping produced Play+Pause, then Stop alone, then the volume group, three ragged
               centred rows. Transport is one row of three equal buttons; volume sits beneath. */
/* One row: Play / Pause / Stop / volume. The volume group on its own line cost ~40px
               of a phone screen for three words. Buttons flex, volume takes only what it needs. */
:where(.pg-player) .floating-controls-row {
                display: flex !important;
                flex-wrap: nowrap !important;
                align-items: center !important;
                gap: 4px !important;
                width: 100% !important;
            }
:where(.pg-player) .floating-controls-row > button {
                flex: 1 1 0 !important;
                min-width: 0 !important;
                padding: 9px 2px !important;
                font-size: 12px !important;
            }
:where(.pg-player) .floating-controls .volume-control {
                flex: 0 0 auto !important;
                margin-top: 0 !important;
                padding: 2px !important;
            }
:where(.pg-player) .floating-controls .vol-link { padding: 4px 5px !important; font-size: 11px !important; }
/* Smaller footprint (2026-09-16). The dock is fixed and sits over whatever is being
               scrolled past — on a phone that was ~95px, and the Phrase Playlist heading kept
               disappearing under it. Tighter padding and a 12px status line take it to ~64px. */
:where(.pg-player) .floating-controls { padding: 6px 10px !important; gap: 3px !important; }
:where(.pg-player) .floating-controls-row > button { padding: 7px 2px !important; }
:where(.pg-player) .floating-status-line1,
:where(.pg-player) .floating-controls .session-status-secondary { font-size: 12px !important; }
/* While the on-screen keyboard is up, the dock only covers the field being typed in. */
:where(.pg-player) body.dock-hidden .floating-controls { display: none !important; }
}
/* Desktop: a slim full-width bar (2026-09-22, Dan), like the Generator's pick bar. The centred
           pill was ~95px tall and floated over whatever scrolled past. One row: transport left,
           status in the middle, volume right, aligned with the 1400px page. The dock-reserve script
           measures it, so the end of the page always clears it. Phone layout above is unchanged. */
@media (min-width: 681px) {
:where(.pg-player) .floating-controls {
                left: 0 !important; right: 0 !important; bottom: 0 !important;
                transform: none !important; width: 100% !important; max-width: none !important;
                border: 0 !important; border-top: 1px solid #cfdcea !important; border-radius: 0 !important;
                box-shadow: 0 -4px 12px rgba(16,24,40,.08) !important;
                display: grid !important;
                grid-template-columns: auto auto auto minmax(0, max-content) auto;   /* one centred group, like the other pages' bars (Session 30, Dan) */
                justify-content: center !important;
                align-items: center !important; column-gap: 14px; row-gap: 0;
                padding: 7px max(20px, calc((100vw - 1400px) / 2 + 20px))
                         calc(7px + env(safe-area-inset-bottom, 0px)) !important;
            }
:where(.pg-player) .floating-controls.is-running { border-top-color: #7fb2ee !important; }
:where(.pg-player) .floating-controls-row { display: contents !important; }
/* Two classes deep so these beat the base button rules that come later in the file. */
:where(.pg-player) .floating-controls .floating-controls-row > button {
                padding: 7px 14px !important; font-size: 14px !important; min-width: 84px !important;
            }
:where(.pg-player) .floating-controls .floating-controls-row > button:hover:not(:disabled) { transform: none !important; }
:where(.pg-player) .floating-controls .volume-control { order: 2; margin: 0 !important; }
:where(.pg-player) .floating-status { order: 1; text-align: center !important; min-width: 0; padding: 0 6px; }
:where(.pg-player) .floating-status-line1,
:where(.pg-player) .floating-controls .session-status-secondary {
                white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 13px !important;
            }
}
/* Anchor jumps and focus scrolling stop short of the dock instead of landing under it. */
html:where(.pg-player) { scroll-padding-bottom: 110px; }
:where(.pg-player) .floating-controls-row {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 14px;
            flex-wrap: wrap;
        }
:where(.pg-player) .floating-status {
            text-align: center;
            margin-top: 0;
            padding-top: 0;
        }
:where(.pg-player) .floating-status-line1 {
            line-height: 1.3;
        }
:where(.pg-player) .floating-controls button {
            background: #1674dc !important;
            color: white !important;
            border: none !important;
            padding: 10px 20px !important;
            border-radius: 8px !important;
            font-weight: bold !important;
            font-size: 16px !important;
            cursor: pointer !important;
            min-width: 100px !important;
            transition: all 0.3s ease !important;
        }
:where(.pg-player) .floating-controls button:hover:not(:disabled) {
            transform: translateY(-2px) !important;
            box-shadow: 0 4px 8px rgba(0,0,0,0.2) !important;
        }
:where(.pg-player) .floating-controls button:disabled {
            background: #6c757d !important;
            cursor: not-allowed !important;
            opacity: 0.6 !important;
        }
/* The active "Playing" state must beat the grey :disabled rule above (which uses
           !important), so the floating Play button reads as a clear green active state
           rather than greyed-out while a session is running. */
:where(.pg-player) .floating-controls button.is-playing,
:where(.pg-player) /* Running: a tinted status chip rather than a filled button. A disabled blue button
           still looks pressable,
:where(.pg-player) which is what made "Playing…" read as a broken control. */
        .floating-controls button.is-playing:disabled {
            background: #e7f1ff !important;
            color: #1066c4 !important;
            border: 1px solid #b5d4f4 !important;
            /* A second `color:#fff !important` used to sit here, left over from when Playing was a
               filled blue button. It won on source order, so the chip rendered white text on a pale
               blue fill and looked broken. Removed 2026-09-13. */
            font-weight: bold !important;
            opacity: 1 !important;
            cursor: default !important;
        }
/* Pause and Stop are grey in both states (2026-09-13, Dan's call). They previously sat
           grey while idle and then turned blue and RED once playback started, so the same three
           buttons changed colour under the user mid-session and Stop read as a destructive
           action it is not — stopping a session loses nothing. Play carries the only colour;
           the enabled/disabled state already shows what is available. */
:where(.pg-player) .floating-controls .pause-btn,
:where(.pg-player) .floating-controls .stop-btn {
            background: #6c757d !important;
        }
/* Sized to their text, not to a block. An auto-width dock only centres if its contents
           are their natural size. */
:where(.pg-player) .floating-controls button {
            padding: 7px 15px !important;
            font-size: 13px !important;
            border-radius: 999px !important;
            white-space: nowrap !important;
        }
:where(.pg-player) .floating-controls .volume-control { border-radius: 999px !important; }
:where(.pg-player) .floating-controls .pause-btn:hover:not(:disabled),
:where(.pg-player) .floating-controls .stop-btn:hover:not(:disabled) {
            background: #5a6268 !important;
        }
/* Master volume links in floating controls */
:where(.pg-player) .volume-control {
            display: flex !important;
            align-items: center !important;
            gap: 4px !important;
            background: #f1f3f5;
            padding: 6px 10px;
            border-radius: 8px;
        }

:where(.pg-player) .volume-control .vol-link {
            color: #1674dc;
            text-decoration: none;
            font-size: 13px;
            font-weight: 500;
            padding: 6px 8px;
            border-radius: 4px;
            transition: background 0.15s ease;
            min-width: 36px;
            text-align: center;
        }
:where(.pg-player) .volume-control .vol-link:hover {
            background: rgba(22, 116, 220, 0.1);
        }
:where(.pg-player) .volume-control .vol-link.active {
            background: #1674dc;
            color: white;
            font-weight: bold;
        }
/* Responsive Design */
/* ---- Phone layout (2026-09-13) --------------------------------------------------------
           Observed on an iPhone: the Foundation Phrases card overflowed sideways, and Category /
           Focus / Rife Frequencies / Selected Foundation Phrases each squeezed their label into a
           100-140px gutter, leaving the control a sliver of the width. Those widths are inline, so
           a plain rule cannot reach them — hence !important here and nowhere else.
           NOT fixed here: the nav wrapping to two rows. shared.css wraps it deliberately on narrow
           screens (a suppressed-scrollbar nav gave no hint more tabs existed, and the active chip
           sat off-screen). That is a ruling, not a regression. */
@media (max-width: 768px) {
:where(.pg-player) .fieldrow {
                flex-direction: column !important;
                align-items: stretch !important;
                gap: 6px !important;
            }

/* Every ancestor in the chain needs this or a long phrase still forces the card wide:
               a flex item defaults to min-width:auto, which refuses to shrink below its content. */
:where(.pg-player) .fieldrow,
:where(.pg-player) .fieldrow > * { min-width: 0 !important; max-width: 100% !important; }
/* Chips held one unbroken line each, and the × sat past the right edge of the card.
               Let the text wrap inside the chip rather than pushing the layout. */
:where(.pg-player) .toggle-chip {
                max-width: 100%;
                white-space: normal;
                text-align: left;
                align-items: flex-start;
            }
:where(.pg-player) .main-layout {
                grid-template-columns: 1fr;
                gap: 20px;
            }

:where(.pg-player) .session-limits-grid {
                grid-template-columns: 1fr;
            }
/* Stack section-header rows vertically on mobile so the title and
               the right-side action links (Select All, Clear, etc.) don't crash
               into each other and wrap awkwardly. */
:where(.pg-player) .section-header {
                flex-direction: column;
                align-items: flex-start;
                gap: 10px;
            }
:where(.pg-player) .section-header .select-links {
                font-size: 13px;
                margin: 0;
            }

/* .cfg-list mobile-specific overrides removed — list is now full-width
               under a CTA button instead of beside one, so no special mobile rule needed. */
:where(.pg-player) .floating-controls {
                padding: 8px 10px !important;
            }
:where(.pg-player) .floating-controls-row {
                gap: 3px !important;
            }
:where(.pg-player) .floating-controls button {
                padding: 0 8px !important;
                height: 36px !important;
                font-size: 13px !important;
                min-width: 0 !important;
                display: inline-flex !important;
                align-items: center !important;
                justify-content: center !important;
            }
:where(.pg-player) .volume-control {
                padding: 0 6px !important;
                height: 36px !important;
                gap: 2px !important;
                box-sizing: border-box !important;
            }
:where(.pg-player) .volume-control .vol-link {
                padding: 0 6px;
                height: 28px;
                line-height: 28px;
                font-size: 12px;
                min-width: 30px;
            }
}
/* Methodology reference tables — consolidate ~150 inline styles into classes */
:where(.pg-player) .ref-cell { padding: 7px 10px; border: 1px solid #e9ecef; }
:where(.pg-player) .ref-cell-sm { padding: 6px 10px; border: 1px solid #e9ecef; }
:where(.pg-player) .ref-h3 { color: #6a1b9a; border-bottom: 2px solid #e9ecef; padding-bottom: 8px; margin-top: 32px; }
:where(.pg-player) .ref-th-purple { padding: 8px 10px; border: 1px solid #e9ecef; text-align: left; color: #6a1b9a; }
:where(.pg-player) .ref-th-blue { padding: 8px 10px; border: 1px solid #e9ecef; text-align: left; color: #1565c0; }

:where(.pg-player) .ref-tr-purple { background: #f3e5f5; }
:where(.pg-player) .ref-tr-blue { background: #e7f3ff; }

/* ===== Unified cross-page header & nav (shared verbatim with phrase-finder.html
   and phrase-match.html so all three pages match). Defines the H1 type scale with
   the same responsive breakpoints, and a .xnav-* class set for the page tabs.
   Nav order (deliberate): Phrase Player · AI Phrase Generator · Phrase Prioritizer · Setup · Guide. */
/* Page title. Was 26px, which sat only 4px above the "Build Your Session" band heading (22px) and
   8px above the intro paragraph (18px) — three near-equal sizes stacked, so nothing read as the
   top of the hierarchy. Raised to 34px with tighter letter-spacing so the page has one clear
   title and the band below it is plainly a section. */
/* moved to shared.css (2026-09-12) — see the page-header and what-is-panel blocks there */
/* .xnav nav styles now live in shared.css */
/* Tooltips as short lead + bullets (2026-09-23, Dan). */
:where(.pg-player) .info-panel .tip-lead { margin:0 0 6px; font-weight:600; color:#212529; }
:where(.pg-player) .info-panel .tip-list { margin:0 0 6px; padding-left:18px; }
:where(.pg-player) .info-panel .tip-list li { margin:3px 0; line-height:1.45; }
:where(.pg-player) .info-panel .tip-foot { margin:6px 0 0; color:#495057; }
:where(.pg-player) .bys-wrap { width:100%; }
:where(.pg-player) .bys-searchrow { display:flex; gap:8px; align-items:center; margin:4px 0 12px; }
:where(.pg-player) .bys-search { flex:1; min-width:0; box-sizing:border-box; padding:10px 12px; border:1px solid #c9d6e6; border-radius:8px; font-size:14px; margin:0; }
:where(.pg-player) .bys-clear { flex-shrink:0; padding:8px 12px !important; font-size:13px !important; font-weight:600; border-radius:8px !important; background:#fff !important; color:#1066c4 !important; border:1px solid #b8d4f0 !important; cursor:pointer; }
:where(.pg-player, .pg-prioritizer) .bys-head { padding:6px 10px 2px; font-size:11px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:#6c757d; }
:where(.pg-player) .bys-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
:where(.pg-player) .bys-tile { display:flex; flex-direction:column; align-items:flex-start; gap:2px; text-align:left; padding:10px 12px !important;
                                          background:#1066c4 !important; color:#fff !important; border:1px solid #1066c4 !important; border-radius:8px !important; cursor:pointer; min-width:0; }
/* 28bf (Dan: "I don't like the white tiles, make them the same blue as the header"): tiles use the banner's gradient,
   white text. Supersedes 28be option D. Was — 28be (Dan, mock-up option D): white tiles with a blue outline.
   Navy (#0d3b73, 24af) retired as a fill; Play stays the one solid button. Watch: if the tiles read as heavy as
   "Choose waveforms", drop the border to 1px. */

:where(.pg-player) .bys-tile:hover { background:#0d5bb0 !important; border-color:#0d5bb0 !important; }
:where(.pg-player) .bys-t { font-size:14px; font-weight:700; display:inline-flex; align-items:center; gap:7px; color:#fff; }
:where(.pg-player) .bys-ic { width:17px; height:17px; flex-shrink:0; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
:where(.pg-player) .bys-s { font-size:12px; color:#e3eeff; font-weight:400; }

:where(.pg-player, .pg-prioritizer) .bys-results { border:1px solid #d6e4f5; border-radius:8px; background:#fff; margin:-4px 0 12px; max-height:440px; overflow:auto; }
:where(.pg-player, .pg-prioritizer) .bys-row { display:flex; align-items:center; gap:10px; padding:7px 10px; border-top:1px solid #eef1f5; font-size:13px; }
:where(.pg-player, .pg-prioritizer) .bys-row:first-child { border-top:none; }
:where(.pg-player, .pg-prioritizer) .bys-row .bys-txt { flex:1; min-width:0; color:#212529; }
:where(.pg-player, .pg-prioritizer) .bys-row .bys-src { font-size:11px; color:#6c757d; white-space:nowrap; }
:where(.pg-player, .pg-prioritizer) .bys-row button { flex-shrink:0; padding:3px 10px !important; font-size:12px !important; font-weight:600; border-radius:999px !important; background:#fff !important; color:#1066c4 !important; border:1px solid #1066c4 !important; cursor:pointer; }
:where(.pg-player, .pg-prioritizer) .bys-empty { padding:10px; font-size:13px; color:#6c757d; }
:where(.pg-player, .pg-prioritizer) .bys-top { display:flex; justify-content:flex-end; padding:6px 10px 0; }   /* 28fm (188): one See all, top right of the results */
:where(.pg-player, .pg-prioritizer) .bys-top .bys-seeall { font-size:12px; font-weight:600; color:#1066c4; text-decoration:none; padding:4px 2px; }
:where(.pg-player, .pg-prioritizer) .bys-top .bys-seeall:hover { text-decoration:underline; }
:where(.pg-player) .tab-intro { font-size:13px; color:#5a6472; font-weight:400; }
:where(.pg-player) .dl-list { display: flex; flex-direction: column; border-top: 1px solid #eef1f5; }
/* no inner box (2026-09-23, Dan) */
:where(.pg-player) .dl-row { display: flex; align-items: center; gap: 12px; padding: 11px 0; background: transparent; }
:where(.pg-player) .dl-row + .dl-row { border-top: 1px solid #eef1f5; }
:where(.pg-player) .dl-row .dl-text { flex: 1 1 auto; min-width: 0; }
:where(.pg-player) .dl-row .dl-title { font-size: 14px; font-weight: 600; color: #212529; }
:where(.pg-player) .dl-row .dl-desc { font-size: 12px; color: #6c757d; line-height: 1.45; margin-top: 2px; }
:where(.pg-player) .dl-row .dl-btn { flex: 0 0 auto; padding: 7px 14px; background: #fff; color: #1674dc; border: 1px solid #1674dc;
                                        border-radius: 6px; font-size: 13px; font-weight: 600; cursor: pointer; white-space: nowrap; }
:where(.pg-player) .dl-row .dl-btn:hover { background: #1674dc; color: #fff; }
@media (max-width: 480px) {
:where(.pg-player) .dl-row { flex-wrap: wrap; }
:where(.pg-player) .dl-row .dl-btn { width: 100%; }
}

/* ---------- phrase-finder.html (.pg-generator) ---------- */
/* Rules identical across pages were consolidated into shared.css on 2026-09-12. */
:where(.pg-generator) * { box-sizing: border-box; }
:where(.pg-generator) body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 20px;
  background-color: #f8f9fa;
  color: #212529;
  line-height: 1.5;
  padding-bottom: 40px;
}
:where(.pg-generator) .container { max-width: 1400px; margin: 0 auto; }
:where(.pg-generator) .main-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin: 10px 0;
}
:where(.pg-generator) .left-column,
:where(.pg-generator) .right-column {
  display: flex;
  flex-direction: column;
  gap: 0;
}
:where(.pg-generator) .left-column .step-header:first-child,
:where(.pg-generator) .right-column .step-header:first-child {
  margin-top: 0;
}
/* Yellow "what is this" panel — mirrors index.html .what-is-panel */
/* moved to shared.css (2026-09-12) — see the page-header and what-is-panel blocks there */
/* moved to shared.css (2026-09-12) — see the page-header and what-is-panel blocks there */
:where(.pg-generator) .what-is-panel p { margin: 0 0 10px 0; }
:where(.pg-generator) .what-is-panel strong { color: #2c3540; }   /* 28el (item 68): was brown, left from the old yellow panel */
/* moved to shared.css (2026-09-12) — see the page-header and what-is-panel blocks there */
/* moved to shared.css (2026-09-12) — see the page-header and what-is-panel blocks there */
/* moved to shared.css (2026-09-12) — see the page-header and what-is-panel blocks there */
/* Section headers under the Build Your Phrases / Controls banners.
   Match index.html's .section-header style: plain bold text, no banner. */
:where(.pg-generator) .step-header {
  font-weight: bold;
  font-size: 16px;
  margin: 18px 0 8px 0;
  color: #212529;
}
:where(.pg-generator) .section {
  background: #fafafa;
  padding: 14px;
  border-radius: 12px;
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
  border: 1px solid #e0e0e0;
  margin-bottom: 14px;
}
/* ============================================================
   WORK AREA — the chat column (the Pending Phrases cart was removed 2026-09-25).
   ============================================================ */
:where(.pg-generator) .pf-work-area {
  display: flex;
  gap: 20px;
  align-items: flex-start;
  /* Breathing room before the Tune Personal AI Baselines section below. The inner
     cards' margin-bottom doesn't reliably create this gap once the columns have
     differing heights, so set it on the wrapper. */
  margin-bottom: 14px;
}
:where(.pg-generator) .pf-chat-col { flex: 1; min-width: 0; position: relative; }
/* The dock is fixed to the viewport now, so the reserve belongs on the page, not the column —
   otherwise the last rows of ANY column can end up underneath it. */
:where(.pg-generator) body { padding-bottom: 110px; }
:where(.pg-generator) .pf-chat-col > .section { margin-bottom: 14px; }
@media (max-width: 860px) {
:where(.pg-generator) .pf-work-area { flex-direction: column; align-items: stretch; }
}
/* Collapsible step-header — text-based "(show)" / "(hide)" toggle at the end of the
   label. Sits flush-left like other step-headers so all labels align horizontally.
   The toggle is the affordance; clicking anywhere on the header expands/collapses. */
:where(.pg-generator) .step-header.collapsible {
  cursor: pointer;
  user-select: none;
  display: flex;
  align-items: baseline;
  gap: 8px;
  transition: color 0.15s ease;
}
:where(.pg-generator) .step-header.collapsible:hover {
  color: #1674dc;
}

/* Mobile-friendly tap targets for collapsible section headers.
   Ensures the entire header acts as a generous touch target (44px min height —
   Apple/Google recommended minimum) so users on phones can reliably tap (show)/(hide). */
:where(.pg-generator) .section-header.collapsible,
:where(.pg-generator) .step-header.collapsible {
  min-height: 44px;
  /* Prevents the default 300ms tap delay on some mobile browsers */
  touch-action: manipulation;
  /* Removes the gray tap-highlight overlay that can mask tap-feedback */
  -webkit-tap-highlight-color: rgba(22, 116, 220, 0.1);
}
/* Make the chev/(show)/(hide) text itself a tap target — defensive in case
   the header's parent click handler doesn't fire on some mobile browsers. */

:where(.pg-generator) .section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: bold;
  font-size: 16px;
  margin-bottom: 8px;
}
:where(.pg-generator) .section-subtitle {
  font-size: 13px;
  color: #6c757d;
  margin: -4px 0 14px 0;
  line-height: 1.4;
  font-weight: normal;
}
:where(.pg-generator) .info-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  line-height: 1;
  background: #1674dc;
  color: white;
  border: none;
  border-radius: 50%;
  font-size: 12px;
  font-weight: bold;
  cursor: pointer;
  margin-left: 8px;
  padding: 0;
}
:where(.pg-generator) .info-panel {
  margin: 10px 0;
  padding: 14px 18px;
  background: #f0f7ff;
  border: 1px solid #b3d4fc;
  border-radius: 6px;
  font-size: 13px;
  color: #333;
  line-height: 1.55;
  display: none;
}
:where(.pg-generator) .info-panel.show { display: block; }
:where(.pg-generator) .info-panel > p {
  margin: 0 0 10px 0;
}
:where(.pg-generator) .info-panel > p:last-child { margin-bottom: 0; }
:where(.pg-generator) .info-panel h4 {
  margin: 14px 0 6px 0;
  font-size: 13px;
  color: #0c5cb3;
  font-weight: 700;
  letter-spacing: 0.01em;
}
:where(.pg-generator) .info-panel h4:first-child { margin-top: 0; }
:where(.pg-generator) .info-panel ul {
  margin: 4px 0 10px 0;
  padding-left: 20px;
}
:where(.pg-generator) .info-panel ul li { margin-bottom: 4px; }
:where(.pg-generator) .info-panel code {
  background: #fff;
  padding: 1px 5px;
  border-radius: 3px;
  border: 1px solid #d0dce8;
  font-size: 12px;
}
:where(.pg-generator) .option-section {
  margin: 15px 0 0 0;
  padding: 15px;
  border: 1px solid #ddd;
  border-radius: 8px;
  background: #f7f7f7;
}

:where(.pg-generator) input[type="text"],
:where(.pg-generator) input[type="number"],
:where(.pg-generator) select,
:where(.pg-generator) textarea {
  width: 100%;
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 6px;
  font-family: Arial, sans-serif;
  font-size: 14px;
  background: white;
}
:where(.pg-generator) textarea {
  resize: vertical;
  min-height: 80px;
}
:where(.pg-generator) input[type="file"] { font-size: 13px; }
:where(.pg-generator) button {
  background: #1674dc;
  color: white;
  border: none;
  padding: 10px 16px;
  border-radius: 6px;
  font-weight: bold;
  cursor: pointer;
  font-size: 14px;
  font-family: Arial, sans-serif;
  transition: all 0.3s ease;
}
@media (hover: hover) {
:where(.pg-generator) button:hover:not(:disabled) {
  background: #1066c4;
  transform: translateY(-1px);
}
}
:where(.pg-generator) button:disabled { background: #6c757d; cursor: not-allowed; opacity: 0.6; }
:where(.pg-generator) .btn-secondary:hover:not(:disabled) {
  background: #f0f0f0;
  color: #333;
}

:where(.pg-generator) .actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
  margin-top: 12px;
  /* position:relative was the positioning context for the old .copied-msg children (retired
     2026-09-13 in favour of siteNotice). Kept: other absolutely-positioned descendants may rely
     on it, and removing it is a layout change with nothing to gain. */
  position: relative;
}
/* Status pill */
:where(.pg-generator) .status {
  display: inline-block;
  font-size: 13px;
  padding: 6px 12px;
  border-radius: 6px;
  background: #f1f3f5;
  color: #495057;
  border: 1px solid #dee2e6;
}
:where(.pg-generator) .status.ok {
  background: #eef3fa;
  color: #1066c4;
  border-color: #cfe0f5;
}
:where(.pg-generator) .status.warn {
  background: #fff3e0;
  color: #e65100;
  border-color: #ffd4a3;
}
:where(.pg-generator) .status.loading {
  background: #f0f7ff;
  color: #1674dc;
  border-color: #b3d4fc;
}

/* "My Snapshot" capture-flow step timeline (mocked up and approved by Dan) —
   a single connected vertical list (Start → Voice → Type → Save) instead of
   a separate progress bar plus separate prose repeating the same sequence.
   Circle state (locked/active/done) is driven by updateMiniSteps(), which
   reads each control's real .disabled state rather than re-deriving the
   gating logic. */
:where(.pg-generator) .row { display: flex; gap: 16px; flex-wrap: wrap; }
:where(.pg-generator) .row > * { flex: 1; min-width: 220px; }
/* Chips */
:where(.pg-generator) .chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
:where(.pg-generator) .chip {
  display: inline-flex;
  align-items: center;
  padding: 5px 12px;
  border: 1px solid #ddd;
  background: white;
  font-size: 13px;
  color: #495057;
  border-radius: 16px;
  cursor: pointer;
  transition: all 0.15s ease;
  user-select: none;
}
:where(.pg-generator) .chip:hover {
  border-color: #1674dc;
  color: #1674dc;
}
:where(.pg-generator) .chip.active {
  background: #1674dc;
  color: white;
  border-color: #1674dc;
  font-weight: bold;
}
/* Form field spacing */
:where(.pg-generator) .field { margin-bottom: 14px; }

/* Results area */
:where(.pg-generator) .results-area {
  max-height: 500px;
  overflow-y: auto;
  border: 1px solid #ddd;
  padding: 12px;
  background: #fafafa;
  border-radius: 6px;
}
:where(.pg-generator) .result {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 8px;
  border-bottom: 1px solid #eee;
  background: white;
  border-radius: 4px;
  margin-bottom: 4px;
}
:where(.pg-generator) .result:last-child { border-bottom: none; }
:where(.pg-generator) .result:hover { background: #f0f7ff; }
:where(.pg-generator) .result input[type="checkbox"] {
  margin-top: 4px;
  cursor: pointer;
  transform: scale(1.1);
}

:where(.pg-generator) .empty {
  text-align: center;
  color: #6c757d;
  padding: 24px;
  font-style: italic;
  font-size: 14px;
}
:where(.pg-generator) details { margin-top: 12px; }
:where(.pg-generator) summary {
  cursor: pointer;
  font-size: 13px;
  color: #1674dc;
  font-weight: bold;
  padding: 4px 0;
}
:where(.pg-generator) summary:hover { color: #1066c4; }
:where(.pg-generator) details p {
  font-size: 13px;
  color: #495057;
  line-height: 1.5;
  margin: 8px 0;
}
/* .copied-msg is retired (2026-09-13). Absolute positioning kept it out of flow, but it was
   positioned against the action row, so on a narrow row it rendered off-row and the confirmation
   looked like it had never fired — the reported "Copy Chat as Text gives no acknowledgement" bug.
   It was also the last of four separate notice mechanisms in the suite. Both call sites now use
   the shared siteNotice, which owns its own placement and cannot land outside the viewport. */
/* Search details panel */

/* Signals panel — multi-modal overview */

:where(.pg-generator) .signal-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-bottom: 1px solid #f0ecf6;
  border-radius: 4px;
  margin-bottom: 4px;
}
:where(.pg-generator) .signal-row:last-child { border-bottom: none; }
:where(.pg-generator) .signal-row.future { opacity: 0.75; }

:where(.pg-generator) #gen-conv-signals { display: flex; flex-wrap: wrap; justify-content: flex-start; gap: 6px 6px; padding: 0; border: none; margin: 0; }
:where(.pg-generator) #gen-mouse-signals { display: flex; flex-wrap: wrap; justify-content: flex-start; gap: 6px 6px; padding: 0; border: none; margin: 0; }
:where(.pg-generator) #gen-voice-signals { display: flex; flex-wrap: wrap; justify-content: flex-start; gap: 6px 6px; padding: 0; border: none; margin: 8px 0 0 0; }
/* When the voice row is empty (no carried voice), collapse its top margin so it
   doesn't leave a phantom gap above "Reset signals". */
:where(.pg-generator) #gen-voice-signals:empty { margin: 0; }

/* Pill-style On/Off toggle for signal rows. Mirrors index.html's .vol-link pattern
   (High/Med/Mute in the persistent playback bar): two adjacent links sharing a single
   pill container, with the active state filled solid blue. The underlying checkbox
   is hidden but stays in the DOM so existing logic that reads .checked still works.
   refreshSignalsPanel() toggles the .active class on the two links to reflect state. */

/* API Settings */

:where(.pg-generator) .key-row {
  display: flex;
  gap: 8px;
  align-items: stretch;
}
:where(.pg-generator) .key-row input { flex: 1; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 13px; }
:where(.pg-generator) .hint { font-size: 12px; color: #6c757d; margin-top: 6px; line-height: 1.4; }
/* LLM toggle in Step 2 */

/* LLM concepts panel in Step 4 */

/* Keystroke state panel in Step 4 */

/* Two-column similarity bars (raw + normalized) */

/* Side-by-side baseline comparison table */

/* Retroactive tag-this-query buttons */

/* Generated phrases panel */

:where(.pg-generator) .gen-error {
  background: #fff;
  border: 1px solid #ffe69c;
  border-left: 3px solid #ffc107;
  color: #1a3b63;
  padding: 12px 14px;
  border-radius: 6px;
}

/* Conversational chat thread (v14-prompt-driven) */
/* .gen-conv-header rules removed — that element was merged into the "2. Chat with
   the AI" step header above it (#gen-conv-reply-label is the dynamic part now). */

/* Compose row: textarea on top (full width, generous height to use the card's
   vertical space at rest), action buttons in their own row below. Previously the
   textarea and buttons shared a horizontal row, which left the empty chat card
   short and squat next to the cart; stacking + a taller textarea fills the space
   and gives more room to type. (Mobile already stacked these — this brings the
   same layout to desktop.) */
:where(.pg-generator) .gen-conv-input-row {
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: stretch;
  margin-top: 10px;
}
:where(.pg-generator) .gen-conv-input-row input,
:where(.pg-generator) .gen-conv-input-row textarea { width: 100%; min-width: 0; box-sizing: border-box; }
/* Roomy at rest, compact once work exists (2026-09-14). On first load the input IS the page —
   there is no conversation or result list above it — so it fills the space instead of leaving a
   screen of grey. As soon as a conversation or a batch appears, the box shrinks so the thing you
   are reading gets the room and the action row stays above the fold. */
:where(.pg-generator) .gen-conv-input-row textarea { min-height: clamp(200px, 34vh, 420px); }
:where(.pg-generator) body.gen-has-conv .gen-conv-input-row textarea { min-height: 58px; }
:where(.pg-generator) #quick-build-input { min-height: clamp(200px, 34vh, 420px); }
:where(.pg-generator) body.qb-has-results #quick-build-input { min-height: 110px; }
/* Buttons sit in a right-aligned row immediately beneath the textarea. The wrapper is
   added in markup (.gen-conv-buttons) so the two buttons group together. Tight top
   margin keeps Send close to the input box (parity with phrase-match's action row). */
/* Once the header wraps (narrow screens) the right-hand cluster is no longer "the right end of a
   row" — it is its own line, and right-aligning it there left it floating with a ragged gap to
   its left. Full width, left-aligned, below the breakpoint. */

:where(.pg-generator) .gen-conv-buttons {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  flex-wrap: wrap;
  margin-top: 2px;
}
:where(.pg-generator) .gen-conv-input-row button { flex-shrink: 0; }
/* Mode toggle (Guided / Quick Build) — segmented control above the generator input. */

:where(.pg-generator) .qb-count-btn { background: #fff; color: #495057; }
:where(.pg-generator) .qb-count-btn.active { background: #1674dc; color: #fff; }
:where(.pg-generator) .qb-count-btn:not(.active):hover { background: #eef2fb; }
/* A bare-number reply re-rendered as the options it chose, so a saved transcript is readable. */
:where(.pg-generator) .chat-picks { display: flex; flex-direction: column; gap: 4px; }
:where(.pg-generator) .chat-pick { display: flex; align-items: baseline; gap: 6px; font-size: 13px; }
:where(.pg-generator) .chat-pick-n { flex-shrink: 0; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px;
  background: #e6f1fb; color: #0c447c; font-size: 11px; font-weight: 700; text-align: center;
  line-height: 18px; }
:where(.pg-generator) .chat-pick-path .chat-pick-n { background: #eceff2; color: #495057; }
/* Note shown in place of filtered phrases. Quiet — it explains a gap in the numbering, it is
   not an error the user has to act on. */

/* Busy state for a compose-row action button: the label becomes the status, so the button
   reads "Generating…" in place rather than sending the eye to a status line elsewhere. */
/* Compose-row action slots. The slot is stretched to the row height by align-items:stretch on
   the parent, and the button fills it — so Build matches the concept box, and Send matches the
   chips + reply box together. Width is capped so a long label ("Rebuild from state") does not
   steal room from the input. Below 560px the row wraps and the button goes full-width beneath,
   which reads better than a tall thin button on a phone. */
/* height:100% was written when this slot held ONE button (Submit, matching the textarea's
   height). With Reset Chat in the slot too, both stretched to the full card height. The primary
   still fills; anything after it sizes to its own content. */
:where(.pg-generator) .compose-action-slot > button {
  white-space: normal;
  line-height: 1.25;
  min-width: 104px;
  max-width: 140px;
}
:where(.pg-generator) .compose-action-slot > button:first-child { height: 100%; }
:where(.pg-generator) .compose-action-slot > button ~ button { height: auto; flex: 0 0 auto; }
@media (max-width: 560px) {
:where(.pg-generator) .compose-action-slot { width: 100%; }
:where(.pg-generator) .compose-action-slot > button { height: auto; max-width: none; width: 100%; }
}
/* Once results exist, Build becomes a quieter secondary "Rebuild" — Refine is primary. */
/* Accent secondary: white bg, theme-blue border/text. Reusable across the page. */
:where(.pg-generator) .btn-secondary-accent { background:#fff; color:#1674dc; border:1px solid #1674dc; box-shadow:none; }
/* Small inline "experimental" badge for testing-stage build buttons (replaces the noisier "(testing)" text). */

:where(.pg-generator) .btn-secondary-accent:hover:not(:disabled) { background:#eef2fb; }
/* Disabled accent-secondary: keep it light with muted text/border instead of the dark
   grey fill (which made the blue label unreadable on grey). */
:where(.pg-generator) .btn-secondary-accent:disabled { background:#f8f9fa; color:#adb5bd; border-color:#dee2e6; opacity:1; }

/* Quick Build phrase rows */
:where(.pg-generator) #qb-list { margin-left: 0; background: #fff; border: 1px solid #d9dee5; border-radius: 12px; padding: 2px 16px; box-shadow: 0 1px 3px rgba(16,24,40,.06); }   /* 28ka (678): the Player's card (.pl-how-card) — was an indented bare list */
/* Rows were 5px top and bottom with a divider on every one, so nine phrases filled the viewport
   and reading the list meant scrolling. 2px with a lighter divider keeps them scannable. */
:where(.pg-generator) #qb-list .qb-row { display:flex; align-items:flex-start; gap:8px; padding:7px 0; border-bottom:1px solid #edf2f8; }   /* 28ka (678): the Summary tab's row and divider */
:where(.pg-generator) #qb-list .qb-row:last-child { border-bottom:none; }
/* Two columns on a wide screen (2026-09-14). One phrase per full-width row left most of the
   column empty and made eight results a long scroll; two columns halve it and use the width. */
:where(.pg-generator) #qb-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 22px; }
@media (max-width: 860px) {
:where(.pg-generator) #qb-list { grid-template-columns: 1fr; }
}
:where(.pg-generator) .qb-row { display: flex; align-items: baseline; gap: 8px; padding: 4px 0; min-width: 0; }
/* Regular weight: every row was bold, the same weight as the step headings, so the list shouted
   and nothing receded. */
:where(.pg-generator) .qb-row-text { font-weight: 400; font-size: 13.5px; color: #212529; flex: 1; min-width: 0; cursor: default; }
:where(.pg-generator) .qb-row-drop {
  flex: 0 0 auto; background: none; border: none; padding: 0 4px;
  color: #adb5bd; font-size: 16px; line-height: 1; cursor: pointer; box-shadow: none;
}
:where(.pg-generator) .qb-row-drop:hover { background: none; color: #1066c4; }
/* Dropped rows fade in place rather than disappearing — removing them would shift every row
   below out from under the pointer mid-click. */
:where(.pg-generator) .qb-row-dropped .qb-row-text { opacity: .4; text-decoration: line-through; }
:where(.pg-generator) .qb-row-dropped .qb-row-drop { visibility: hidden; }
:where(.pg-generator) #qb-list.qb-added .qb-row { opacity: .45; }
:where(.pg-generator) #qb-list.qb-added .qb-row label { cursor: default; }
:where(.pg-generator) #qb-list.qb-added input[type=checkbox] { pointer-events: none; }
:where(.pg-generator) #qb-list .qb-row label { cursor:pointer; font-size:14px; line-height:1.3; }
/* Quick-pick panel: tappable chips for phrase numbers (multi-select) and the
   path options a–e (single-select), with a Go button that assembles the reply
   and sends it. Purely additive — the textarea below still accepts typed input,
   so if parsing the AI message finds no options this panel simply stays hidden. */
:where(.pg-generator) .gen-quickpick { margin: 0 0 4px 0; padding: 10px 12px; background: #f0f4ff; border: 1px solid #d6e0ff; border-radius: 8px; }
:where(.pg-generator) .gen-quickpick-label { font-size: 12px; font-weight: 600; color: #3a4a7a; margin: 0 0 6px 0; }
:where(.pg-generator) .gen-quickpick-group { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
:where(.pg-generator) .gen-quickpick-chip {
  font-size: 13px; padding: 6px 12px; border-radius: 16px; border: 1px solid #b9c6ee;
  background: #fff; color: #2a3a6a; cursor: pointer; user-select: none; line-height: 1.2;
}
:where(.pg-generator) .gen-quickpick-chip:hover { background: #e8eeff; }
:where(.pg-generator) .gen-quickpick-chip.selected { background: #1674dc; border-color: #1674dc; color: #fff; }
:where(.pg-generator) .gen-quickpick-path .gen-quickpick-chip.selected { background: #1066c4; border-color: #1066c4; }
/* "Select all" sits in the same row as the number chips but is an action, not a phrase
   number — a small left margin and italic label separate it visually without breaking
   the pill rhythm. */
:where(.pg-generator) .gen-quickpick-chip.gen-quickpick-all { margin-left: 8px; font-style: italic; border-style: dashed; }
:where(.pg-generator) .gen-quickpick-chip.gen-quickpick-all.selected { font-style: normal; border-style: solid; }
/* A numbered phrase the model produced that breaks current doctrine. Shown, not hidden —
   so the omission from the pick row is visible — but clearly unavailable. */

:where(.pg-generator) .gen-quickpick-hint { font-size: 11px; color: #6c757d; margin-top: 2px; }
/* Hint row sits below the reply box; shows "Will send: …" so the user sees what the
   chip selection (plus any typed comment) will submit when they hit Send. */
:where(.pg-generator) .gen-quickpick-break { display: none; }
/* The pick bar: the whole picker plus Submit, fixed to the bottom of the window at every width
   (2026-09-16, Dan). The chat scrolls above it; body padding and the pending bar's offset are set
   in JS from the bar's real height. */
:where(.pg-generator) #gen-qp-dock { display: none; }
:where(.pg-generator) #gen-qp-dock {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 999990;
  background: #fff; border-top: 1px solid #d6e0ff; box-shadow: 0 -4px 12px rgba(0,0,0,.08);
  padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px));
}
:where(.pg-generator) #gen-qp-dock-slot,
:where(.pg-generator) #gen-qp-dock-row { max-width: 1100px; margin-left: auto; margin-right: auto; }
/* The picker loses its own card chrome inside the bar, and scrolls if a batch is long. */
:where(.pg-generator) #gen-qp-dock .gen-quickpick { background: transparent; border: 0; padding: 0; margin: 0;
  max-height: 34vh; overflow-y: auto; }
:where(.pg-generator) #gen-qp-dock-row { display: flex; align-items: center; gap: 10px; margin-top: 8px; }
:where(.pg-generator) #gen-qp-dock-top:empty { display: none; }
/* 28ji (551, 552): the Start here line above the box; the first-batch tip in the dock's top */
:where(.pg-generator) .nh-tip--start { margin: 0 0 8px; }
:where(.pg-generator) .nh-tip--start[hidden] { display: none !important; }
:where(.pg-generator) #gen-qp-dock-top #gen-qp-tip { margin: 0 auto 6px; max-width: 900px; padding: 6px 10px; font-size: 13px; }
:where(.pg-generator) #gen-qp-dock-text { flex: 0 1 auto; min-width: 0; font-size: 12px; color: #6c757d; }
/* !important: moveComposeButtons() sets an inline flex:1 1 auto on Submit for the compose column,
   which would stretch it across the whole bar here. */
:where(.pg-generator) #gen-qp-dock #gen-conv-send-btn { flex: 1 1 auto !important; padding: 10px 28px; margin-left: auto; }
/* Reset sits to the right of Submit, outlined, and takes only the width of its words; Submit gets
   the rest of the row. !important because moveComposeButtons() sets its inline flex for the
   compose column. */
:where(.pg-generator) #gen-qp-dock #reset-session-btn { flex: 0 0 auto !important; width: auto !important;
  padding: 10px 16px !important; font-size: 14px !important; white-space: nowrap; }
@media (max-width: 600px) {

/* no mouse on phones (S24 fix was Prioritizer-only) */
/* Option B (Dan, 2026-09-16): compact number chips, actions on their own row, the a–d choices
     as a 2×2 grid, Submit in a bar pinned to the bottom. The page's own rule
     `.gen-conv-input-row button { width:100% }` was stretching every chip full width. */
:where(.pg-generator) .gen-conv-input-row .gen-quickpick-chip { width: auto; }
/* Tightened 2026-09-16 (Dan: "still takes a lot of real estate"). */
:where(.pg-generator) .gen-quickpick { padding: 8px 10px; }
:where(.pg-generator) .gen-quickpick-label { font-size: 11px; margin-bottom: 4px; }
:where(.pg-generator) .gen-quickpick-group { gap: 6px; margin-bottom: 6px; }
:where(.pg-generator) .gen-quickpick-chip { font-size: 15px; font-weight: 700; min-width: 40px; padding: 7px 4px; text-align: center; border-radius: 12px; }
:where(.pg-generator) .gen-quickpick-break { display: block; flex-basis: 100%; height: 0; }
:where(.pg-generator) .gen-quickpick-chip.gen-quickpick-action { flex: 0 1 auto; min-width: 0; padding: 7px 12px; font-size: 13px; font-weight: 600; }
:where(.pg-generator) .gen-quickpick-chip.gen-quickpick-all { margin-left: 0; }
:where(.pg-generator) .gen-quickpick-group.gen-quickpick-path { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
:where(.pg-generator) .gen-quickpick-path .gen-quickpick-chip { padding: 7px 6px; font-size: 13px; font-weight: 600; }
:where(.pg-generator) .gen-quickpick-group:last-child { margin-bottom: 0; }
/* Phone sizing for the bar; the bar itself is defined outside this query (used at all widths).
     Tighter side padding so eight number chips still fit one row at 390px. */
:where(.pg-generator) #gen-qp-dock { padding: 8px 10px calc(8px + env(safe-area-inset-bottom, 0px)); }
:where(.pg-generator) #gen-qp-dock-row { margin-top: 6px; }
/* ~15% tighter again (Dan, 2026-09-16) so the extra pending line costs nothing. */
:where(.pg-generator) .gen-quickpick-label { font-size: 10.5px; margin-bottom: 3px; }
:where(.pg-generator) .gen-quickpick-group { gap: 5px; margin-bottom: 5px; }
:where(.pg-generator) .gen-quickpick-chip { font-size: 14px; min-width: 36px; padding: 6px 3px; }
:where(.pg-generator) .gen-quickpick-chip.gen-quickpick-action { padding: 6px 10px; font-size: 12.5px; }
:where(.pg-generator) .gen-quickpick-path .gen-quickpick-chip { padding: 6px 4px; font-size: 12.5px; }
:where(.pg-generator) #gen-qp-dock #gen-conv-send-btn { padding: 9px 20px; }
:where(.pg-generator) #gen-qp-dock-top { margin-bottom: 6px; padding-bottom: 6px; }
:where(.pg-generator) #gen-qp-dock #gen-conv-send-btn { width: auto !important; flex: 1 1 auto !important; margin-left: 0; padding: 11px 22px; }
:where(.pg-generator) #gen-qp-dock #reset-session-btn { padding: 11px 14px !important; font-size: 13px !important; }
}
:where(.pg-generator) .gen-quickpick-gorow { display: flex; align-items: center; gap: 10px; margin: 2px 0 4px 0; justify-content: flex-start; }

/* Chat thread (rebuilt for v14-prompt-driven conversational flow) */
:where(.pg-generator) .chat-thread {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 4px 0;
}
/* Scrollable chat container so the page doesn't grow unbounded as conversations get long.
   The chat body is height-capped on desktop; mobile keeps natural page-scrolling since
   internal scroll boxes feel awkward on phones. Thin styled scrollbar to avoid visual heaviness. */
:where(.pg-generator) #generated-phrases-body {
  /* Lowered from clamp(400px, 60vh, 800px) on 2026-09-13. At 60vh the chat plus everything above
     it pushed the Refine / Add / Clear row below the fold on common laptop heights, so the primary
     actions had to be scrolled to. The chat scrolls internally; the buttons should not move. */
  max-height: clamp(220px, 34vh, 440px);
  overflow-y: auto;
  overflow-x: hidden;
  padding-right: 6px;  /* room for scrollbar without crowding content */
  scrollbar-width: thin;  /* Firefox */
  scrollbar-color: #c4cad8 transparent;  /* Firefox: thumb + track */
}
:where(.pg-generator) #generated-phrases-body::-webkit-scrollbar {
  width: 8px;
}
:where(.pg-generator) #generated-phrases-body::-webkit-scrollbar-track {
  background: transparent;
}
:where(.pg-generator) #generated-phrases-body::-webkit-scrollbar-thumb {
  background: #c4cad8;
  border-radius: 4px;
}
:where(.pg-generator) #generated-phrases-body::-webkit-scrollbar-thumb:hover {
  background: #1674dc;
}
@media (max-width: 600px) {
/* Reversed on 2026-09-13. Removing the cap meant the container grew by a turn's worth of text on
     every exchange, so the action row moved down the page each time — the "page bounces around"
     report — and the buttons ended up below the fold exactly where they were most needed. A cap
     keeps the chat scrolling inside itself and the controls in a fixed place. Kept well under half
     the viewport so the reply box and the action row are both visible with a keyboard open. */
:where(.pg-generator) #generated-phrases-body {
    max-height: 38vh;
    overflow-y: auto;
    padding-right: 4px;
  }
}
/* iPhone/iMessage-style layout, per Dan's call: You on the left, AI on the
   right (his explicit choice, opposite the usual Messages convention where
   "me" is on the right — kept as stated). Bubbles no longer stretch full
   width; each is capped and pushed to its side, with a small role caption
   above it instead of beside it (a fixed-width label column doesn't work
   once bubbles sit on opposite sides). */
:where(.pg-generator) .chat-turn {
  display: flex;
  margin-bottom: 4px;
}
:where(.pg-generator) .chat-turn.user { justify-content: flex-start; }
:where(.pg-generator) .chat-turn.ai { justify-content: flex-end; }
:where(.pg-generator) .chat-turn-stack {
  display: flex;
  flex-direction: column;
  max-width: 78%;
}
:where(.pg-generator) .chat-turn.user .chat-turn-stack { align-items: flex-start; }
:where(.pg-generator) .chat-turn.ai .chat-turn-stack { align-items: flex-end; }
:where(.pg-generator) .chat-role {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: bold;
  margin-bottom: 3px;
  padding: 0 4px;
  display: flex;
  align-items: center;
  gap: 4px;
  position: relative;
}
:where(.pg-generator) .chat-turn.user .chat-role { color: #1674dc; }
:where(.pg-generator) .chat-turn.ai .chat-role { color: #6c757d; }
/* "Context sent this turn" — Option 1 (Dan's pick): a small (i) dot next to
   the role label, hover/focus for a popover with the details. Fully out of
   the message bubble now — was previously a "▸ click to expand" line living
   inside the bubble itself, which read as part of the message. */
:where(.pg-generator) .info-dot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: #cfe0fc;
  color: #1066c4;
  font-size: 9px;
  font-weight: bold;
  cursor: pointer;
  flex-shrink: 0;
  text-transform: none;
  letter-spacing: normal;
}
:where(.pg-generator) .info-popover {
  display: none;
  position: absolute;
  top: 18px;
  left: 0;
  z-index: 10;
  background: #fff;
  border: 1px solid #dee2e6;
  border-radius: 8px;
  padding: 8px 10px;
  font-size: 11px;
  font-family: ui-monospace, Menlo, Consolas, monospace;
  color: #6c757d;
  white-space: pre-wrap;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  width: 220px;
  text-transform: none;
  letter-spacing: normal;
  font-weight: normal;
}
:where(.pg-generator) .info-dot:hover + .info-popover,
:where(.pg-generator) .info-dot:focus + .info-popover,
:where(.pg-generator) .info-popover:hover { display: block; }
:where(.pg-generator) .chat-bubble {
  background: white;
  padding: 10px 14px;
  border-radius: 16px;
  border: 1px solid #dee2e6;
  line-height: 1.55;
  word-break: break-word;
}
/* Tail-like corner on the side each bubble "points" toward its sender,
   mimicking the iMessage bubble shape. */
/* iMessage-style contrast: YOU in solid blue with white text, the AI plain white.
   The two were previously #f0f7ff and #f9f9fa — near-identical pale greys that made it hard to
   scan who said what in a long thread. The AI keeps a visible border since a white bubble on a
   white card needs an edge; the blue bubble does not. */
/* Toned down from a solid #1674dc — the saturated iMessage look was too heavy for a page that is
   mostly reading. A light blue fill with a blue border still separates the two speakers clearly
   against the AI's plain white, without the block of colour dominating the thread. */
:where(.pg-generator) .chat-turn.user .chat-bubble {
  background: #e3f0ff;
  border-color: #a8cdf5;
  color: #1a1a1a;
  border-bottom-left-radius: 4px;
}
:where(.pg-generator) .chat-turn.ai .chat-bubble {
  background: #fff;
  border-color: #dee2e6;
  border-bottom-right-radius: 4px;
}
/* Context-only turn (no typed message — just the info-dot popover with no
   bubble at all, since there's nothing left to show once context moved out
   of the bubble and into the label). Stays on the left (user side). */

:where(.pg-generator) .chat-prose {
  font-size: 14px;
  color: #212529;
  margin: 0;
}
:where(.pg-generator) .chat-prose code {
  background: rgba(0,0,0,0.05);
  padding: 1px 5px;
  border-radius: 3px;
  font-family: ui-monospace, Menlo, Consolas, monospace;
  font-size: 12px;
}
:where(.pg-generator) .chat-spacer { height: 6px; }
:where(.pg-generator) .chat-user-collapse summary {
  cursor: pointer;
  color: #6c757d;
  font-style: italic;
  font-size: 12px;
  outline: none;
}
:where(.pg-generator) .chat-user-collapse summary:hover { color: #1674dc; }
:where(.pg-generator) .chat-user-collapse[open] summary { margin-bottom: 6px; }

:where(.pg-generator) .chat-phrase-block {
  margin: 4px 0;
  padding: 6px 8px;
  background: rgba(255, 255, 255, 0.7);
  border-left: 3px solid #1066c4;
  border-radius: 4px;
}

/* Paste-in fallback for ai-prompt.txt */

@media (max-width: 900px) {
:where(.pg-generator) .main-layout { grid-template-columns: 1fr; gap: 0; }
}
@media (max-width: 600px) {
:where(.pg-generator) body { padding: 12px; }
/* h1 size now comes from shared.css at every breakpoint (2026-09-12) */
:where(.pg-generator) .step-header { font-size: 15px; }
/* Tab nav: stack the session cost below the tabs on narrow screens so it doesn't
     fight for horizontal space with the long "AI Phrase Generator" tab label. */
:where(.pg-generator) nav[style*="display:flex"] { flex-wrap: wrap; }
:where(.pg-generator) nav span[style*="margin-left:auto"] {
    margin-left: 0 !important;
    margin-top: 6px;
    width: 100%;
    text-align: center;
  }
/* Section headers: stack the status pill below the subtitle text instead of forcing
     them into a flex row that wraps awkwardly. */
:where(.pg-generator) .section-header {
    flex-direction: column;
    align-items: stretch !important;
    gap: 8px;
  }
:where(.pg-generator) .section-header .status,
:where(.pg-generator) .section-header .signals-status {
    align-self: flex-start;
  }
/* Chat actions row: ensure buttons/links have adequate touch targets (44px min height).
     Items already wrap via flex-wrap, but on phones they're too thin to tap reliably. */
:where(.pg-generator) .actions {
    gap: 8px;
  }
:where(.pg-generator) .actions > button,
:where(.pg-generator) .actions > a {
    min-height: 36px;
    display: inline-flex;
    align-items: center;
  }
/* API key row: stack the input and Show button vertically so neither gets cramped. */
:where(.pg-generator) .key-row {
    flex-direction: column;
    align-items: stretch !important;
    gap: 6px;
  }
:where(.pg-generator) .key-row input {
    width: 100% !important;
    box-sizing: border-box;
  }
/* Keyboard + mouse are desktop signals — touch keyboards with autocorrect
     don't produce meaningful keystroke timing, and there's no mouse on phones.
     Hide both rows on phones. (Input dynamics are also skipped in JS on mobile.) */

/* Chat input row: textarea above buttons (already the desktop layout now too).
     On phones, make the buttons full-width and stacked for easy tapping. */
:where(.pg-generator) .gen-conv-input-row textarea {
    width: 100% !important;
    box-sizing: border-box;
    /* Roomy at rest here too (2026-09-14). A flat 100px overrode the state-aware sizing, so on a
       phone the box stayed small on a screen that had nothing else on it. Capped lower than
       desktop because the on-screen keyboard takes roughly half the viewport. */
    min-height: clamp(160px, 26vh, 280px);
    font-size: 16px;  /* prevents iOS Safari zoom-on-focus */
  }
:where(.pg-generator) body.gen-has-conv .gen-conv-input-row textarea { min-height: 58px; }
:where(.pg-generator) .gen-conv-buttons {
    flex-direction: column;
  }
:where(.pg-generator) .gen-conv-input-row button {
    width: 100%;
  }
/* Info button (i): bump up touch target from 22px to 28px. */
:where(.pg-generator) .info-btn {
    width: 28px !important;
    height: 28px !important;
    min-width: 28px;
  }
/* Voice calibration help link (?): same — make touchable. */

/* Voice calibration row: prevent meter + button + duration from being cramped. */

/* Detection signal rows: shrink the right-side toggle so it doesn't push text. */
:where(.pg-generator) .signal-row { gap: 8px; }

/* Recording dot button: ensure it's at least 44px tall for thumb-tapping. */

/* (28en, item 13: the Generator's own nav tab size is gone — the nav is one size on every page.) */
}
@media (max-width: 380px) {
/* Very narrow phones (iPhone SE, older Androids): further compression. */
:where(.pg-generator) .step-header { font-size: 14px; }
:where(.pg-generator) .section { padding: 14px; }
:where(.pg-generator) nav a,
:where(.pg-generator) nav span[style*="background:#1674dc"] {
    font-size: 13px !important;
    padding: 7px 8px !important;
  }
}
/* ===== Unified cross-page nav (shared verbatim with index.html and phrase-match.html).
   H1 type scale is already defined above. Do not reorder the nav links:
   Phrase Player · Phrase Prioritizer · AI Phrase Generator. */
/* .xnav nav styles now live in shared.css */
/* First-run setup strip — ONE style for every page that shows it (28en, items 12 and 73). The Player, the Generator and
   the Prioritizer each carried a copy; the Prioritizer's had drifted (a brown × and a brown second line). */
.setup-strip { display:flex; align-items:center; gap:12px; margin:0 0 14px;
    padding:10px 14px; background:#eef5ff; border:1px solid #cfe0f5; border-radius:10px; }
.setup-strip-body { display:flex; align-items:center; gap:18px; flex-wrap:wrap; font-size:13px; color:#2a4d76; }
.setup-strip-body strong { color:#14487f; }
.setup-item { display:inline-flex; align-items:center; gap:6px; }
.setup-item a { color:#1066c4; text-decoration:none; font-weight:600; }
.setup-item.is-done,
.setup-item.is-done a,
.setup-item.is-done .setup-state { color:#2f6f3e; }
.setup-state { color:#5c7ea6; }
.setup-strip-x { margin-left:auto; background:none; border:none; font-size:20px; line-height:1;
    color:#7c9cc0; cursor:pointer; padding:0 4px; box-shadow:none; }
.setup-strip-x:hover { color:#14487f; }
/* Tooltips as short lead + bullets (2026-09-23, Dan). */
:where(.pg-generator) .info-panel .tip-lead { margin:0 0 6px; font-weight:600; color:#212529; }
:where(.pg-generator) .info-panel .tip-list { margin:0 0 6px; padding-left:18px; }
:where(.pg-generator) .info-panel .tip-list li { margin:3px 0; line-height:1.45; }
:where(.pg-generator) .info-panel .tip-foot { margin:6px 0 0; color:#495057; }

/* ---------- phrase-match.html (.pg-prioritizer) ---------- */
/* Rules identical across pages were consolidated into shared.css on 2026-09-12. */
/* .page-banner moved to shared.css (2026-09-12) — this page had its own copy while
     index and phrase-finder hand-styled theirs inline, so the bands differed in height. */
:where(.pg-prioritizer) * { box-sizing: border-box; }
:where(.pg-prioritizer) body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 20px;
    background-color: #f8f9fa;
    color: #212529;
    line-height: 1.5;
  }
:where(.pg-prioritizer) .container { max-width: 1400px; margin: 0 auto; }
/* Info button + collapsible info panel — matches the (i) pattern used on
     index.html and phrase-finder.html, matching the blue accent used across the whole site. */
:where(.pg-prioritizer) .info-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    line-height: 1;
    background: #1674dc;
    color: white;
    border: none;
    border-radius: 50%;
    font-size: 12px;
    font-weight: bold;
    font-style: italic;
    cursor: pointer;
    margin-left: 6px;
    padding: 0;
    vertical-align: middle;
  }
:where(.pg-prioritizer) .info-panel {
    margin: 10px 0 4px 0;
    padding: 12px 14px;
    background: #eef5ff;
    border: 1px solid #b3d4fc;
    border-radius: 6px;
    font-size: 12px;
    color: #333;
    line-height: 1.55;
    display: none;
  }
:where(.pg-prioritizer) .info-panel strong { color: #212529; }
/* Mobile: bigger tap targets for info buttons (same pattern as phrase-finder) */
@media (max-width: 600px) {
:where(.pg-prioritizer) .info-btn { width: 22px; height: 22px; font-size: 13px; }
/* moved to shared.css (2026-09-12) — see the page-header and what-is-panel blocks there */
}
/* h1 now defined in the unified cross-page header block at the end of this stylesheet */

/* Hero subtitle moved to shared.css (2026-09-12). This page kept a multi-line
   `.hero-subtitle p` rule — the boxed gradient intro — which loaded after shared.css
   and won, so the subtitle stayed in its box while the h1 had already updated. */
/* Banner — blue gradient, matching index.html and phrase-finder.html's banners.
     Was purple to mark this as a distinct third mode; now consistent site-wide. */
/* Experimental notice — separate from the banner, more sober */

:where(.pg-prioritizer) .section {
    background: #fff;
    padding: 13px;
    border-radius: 12px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.08);
    border: 1px solid #e0e0e0;
    margin-bottom: 13px;
  }
:where(.pg-prioritizer) .section-subtitle {
    font-size: 13px;
    color: #6c757d;
    margin: 0 0 12px 0;
    line-height: 1.5;
  }
:where(.pg-prioritizer) textarea {
    width: 100%;
    border: 1px solid #ced4da;
    border-radius: 6px;
    padding: 10px;
    font-family: inherit;
    font-size: 14px;
    resize: vertical;
    color: #212529;
  }
:where(.pg-prioritizer) textarea:focus {
    outline: none;
    border-color: #1674dc;
    box-shadow: 0 0 0 2px rgba(22, 116, 220,0.15);
  }
/* The phrase-list textarea grows to fill its column so the right box matches
     the left column's height (which expands with area results). A min-height
     keeps it usably tall even before any areas are scored. Only applies in the
     side-by-side layout; it stacks/relaxes on narrow screens via the media query. */
:where(.pg-prioritizer) #phrase-list { flex:1 1 auto; min-height:200px; }
@media (max-width: 900px) {
:where(.pg-prioritizer) #phrase-list { flex:0 0 auto; }
}
/* Buttons — blue, matching shared.css's default theme (was overridden purple before) */
:where(.pg-prioritizer) button {
    background: #1674dc;
    color: #fff;
    border: none;
    border-radius: 6px;
    padding: 10px 18px;
    font-size: 14px;
    font-weight: bold;
    cursor: pointer;
    line-height: 1.4;
    display: inline-flex;
    align-items: center;
    gap: 6px;
  }
@media (hover: hover) { :where(.pg-prioritizer) button:hover:not(:disabled) { background: #1066c4; } }
:where(.pg-prioritizer) button:disabled { background: #adb5bd; cursor: not-allowed; }
:where(.pg-prioritizer) button.secondary {
    background: #fff;
    color: #1674dc;
    border: 1px solid #1674dc;
    padding: 9px 17px;  /* Adjusted for 1px border to maintain visual alignment */
  }
:where(.pg-prioritizer) button.secondary:hover:not(:disabled) { background: #eef5ff; }
/* Signal pills — small status row, hidden until first keystroke */
:where(.pg-prioritizer) .signal-row {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    font-size: 12px;
    color: #495057;
    margin-top: 8px;
    min-height: 22px;  /* reserve space so the layout doesn't jump when pills appear */
  }
/* The optional voice-pill row collapses to nothing when empty (no recording yet),
     so "Reset signals" sits directly under the keyboard/mouse pills — matching the
     Generator. When it has a pill, its inline min-height:0 lets it size to content. */
:where(.pg-prioritizer) #voice-pill-row:empty { margin-top: 0; min-height: 0; }
:where(.pg-prioritizer) #mouse-signals-pills:empty { margin-top: 0; min-height: 0; }
/* Results — runs container holds N run cards. Each is a .section that opens
     collapsed (all but the newest) or expanded (the newest, automatically). */
:where(.pg-prioritizer) #results-area { display: none; }
:where(.pg-prioritizer) .run-card { margin-bottom: 14px; }
:where(.pg-prioritizer) .run-header {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    padding: 10px 14px;
    background: #eef5ff;
    border-radius: 8px;
    cursor: pointer;
    user-select: none;
  }
:where(.pg-prioritizer) .run-header:hover { background: #dceafd; }
:where(.pg-prioritizer) .run-chevron {
    font-size: 14px;
    color: #1066c4;
    width: 14px;
    display: inline-block;
    flex-shrink: 0;
  }
:where(.pg-prioritizer) .run-title { font-weight: bold; color: #1066c4; font-size: 14px; display: inline-flex; align-items: baseline; gap: 5px; position: relative; }
/* The run number is the thing you scan a stack of cards FOR — the mode is context once you have
     found the right card. Splitting them lets the number carry the weight and the mode step back,
     instead of both competing at one size (2026-09-14). Baseline alignment on .run-title above, so
     the larger number and the smaller mode sit on the same line rather than being centred against
     each other. */
:where(.pg-prioritizer) .run-num { font-size: 17px; font-weight: 800; letter-spacing: -0.2px; color: #0b4da2; }
:where(.pg-prioritizer) .run-mode { font-weight: 600; color: #3f6fa8; }
:where(.pg-prioritizer) .run-sep { color: #9dbbdd; font-weight: 400; }
/* Run-card metadata (Mode/Model/Phrases/State) moved behind an (i) dot next
     to the run title — matches the "context sent this turn" treatment on
     phrase-finder.html. "Your Words" (the user's own input) stays visible in
     the body; this popover is for the backend/signal metadata only. */
:where(.pg-prioritizer) .info-dot {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 13px;
    height: 13px;
    border-radius: 50%;
    background: #cfe0fc;
    color: #1066c4;
    font-size: 9px;
    font-weight: bold;
    cursor: pointer;
    flex-shrink: 0;
  }
:where(.pg-prioritizer) .info-popover {
    display: none;
    position: absolute;
    top: 20px;
    left: 0;
    z-index: 20;
    background: #fff;
    border: 1px solid #dee2e6;
    border-radius: 8px;
    padding: 10px 12px;
    font-size: 11px;
    font-family: ui-monospace, Menlo, Consolas, monospace;
    color: #6c757d;
    white-space: normal;
    line-height: 1.6;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
    width: 280px;
    font-weight: normal;
    cursor: auto;
  }
:where(.pg-prioritizer) .info-popover .meta-label { color: #495057; font-weight: 600; }
:where(.pg-prioritizer) .info-dot:hover + .info-popover,
:where(.pg-prioritizer) .info-dot:focus + .info-popover,
:where(.pg-prioritizer) .info-popover:hover { display: block; }
:where(.pg-prioritizer) .run-meta-inline {
    font-size: 12px;
    color: #6c757d;
    margin-left: auto;
    font-family: ui-monospace, Menlo, Consolas, monospace;
  }
:where(.pg-prioritizer) .run-body {
    border: 1px solid #e0e0e0;
    border-top: none;
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
    padding: 14px;
    background: #fff;
  }
:where(.pg-prioritizer) .run-card.collapsed .run-body { display: none; }
:where(.pg-prioritizer) .run-card.collapsed .run-header { border-radius: 8px; }
:where(.pg-prioritizer) .run-card:not(.collapsed) .run-header {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
  }
/* Metadata block — shown in each run body at top, sticky context for the user */

:where(.pg-prioritizer) .results-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    align-items: center;
    padding: 10px 14px;
    background: #eef5ff;
    border-radius: 6px;
    margin-bottom: 12px;
    font-size: 13px;
  }
:where(.pg-prioritizer) .results-toolbar label { font-weight: bold; color: #1066c4; }
:where(.pg-prioritizer) .results-toolbar input[type="range"] { flex: 1; min-width: 160px; }
:where(.pg-prioritizer) .threshold-display {
    background: #fff;
    border: 1px solid #b3d4fc;
    border-radius: 4px;
    padding: 2px 10px;
    font-weight: bold;
    color: #1066c4;
    min-width: 44px;
    text-align: center;
  }

/* Both result tables share these (2026-09-14). They used to have independent blocks that
     drifted: different padding, header weight and row rhythm, so the category list read as an
     older page than the phrase list. */
:where(.pg-prioritizer) .results-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
  }
:where(.pg-prioritizer) .results-table th {
    background: #f8f9fa;
    text-align: left;
    padding: 8px 10px;
    border-bottom: 2px solid #dee2e6;
    font-size: 12px;
    color: #495057;
    text-transform: uppercase;
    letter-spacing: 0.5px;
  }
:where(.pg-prioritizer) .results-table td {
    padding: 10px;
    border-bottom: 1px solid #eee;
    vertical-align: top;
  }
:where(.pg-prioritizer) .results-table tr:last-child td { border-bottom: none; }
:where(.pg-prioritizer) .results-table .col-check { width: 32px; }
:where(.pg-prioritizer) .results-table .col-score { width: 70px; text-align: center; }
:where(.pg-prioritizer) .results-table .col-phrase { width: auto; font-weight: bold; }
:where(.pg-prioritizer) .results-table .col-reasoning { font-size: 12px; color: #6c757d; }
/* Provenance (2026-09-13). A phrase loaded from a category used to arrive as plain text in the
     paste box and lose all record of where it came from; the run could not say. Narrow on purpose
     — it is context for a score, not a second thing to read. `.col-from em` is the
     "added directly" case: typed or pasted by hand, with no category behind it. */
:where(.pg-prioritizer) .results-table .col-from { font-size: 11px; color: #6c757d; max-width: 150px; line-height: 1.35; }
:where(.pg-prioritizer) .results-table .col-from em { color: #adb5bd; font-style: normal; }
:where(.pg-prioritizer) .results-table tr.below-threshold { opacity: 0.5; }
:where(.pg-prioritizer) .score-badge {
    display: inline-block;
    min-width: 42px;
    padding: 3px 8px;
    border-radius: 12px;
    font-weight: bold;
    font-size: 12px;
    text-align: center;
    color: #fff;
  }
:where(.pg-prioritizer) .score-high { background: #1066c4; }
/* >= 75 */
:where(.pg-prioritizer) .score-mid { background: #ffc107; color: #212529; }
/* 50–74 */
:where(.pg-prioritizer) .score-low { background: #adb5bd; }
/* < 50 */
/* Side-by-side row for the area-triage feeder + phrase scorer. Each child
     .section flexes to equal width. Stacks vertically below 900px so the
     columns don't get cramped on narrow screens / mobile. */
/* Single column (2026-09-14): the area route moved into a modal, so there is no second
   column left to sit beside. */
:where(.pg-prioritizer) .triage-row { display:block; }
/* The inline area panel is a detour INSIDE step 2, so it aligns with step 2's content and reads as
   a nested aside rather than a second column of the page. It was rendering flush to the page edge
   with its own heading, button and Score all at different indents. */
/* The Rife presets block gets the same treatment as "Find a category" under the phrases tab
   (2026-09-14): an indented sub-card with the blue keyline, so a step whose content is a
   self-contained chooser reads the same way in both modes. */
:where(.pg-prioritizer) #rife-preset-block {
  margin: 8px 0 12px 32px;
  padding: 14px 16px;
  background: #f8f9fa;
  border: 1px solid #e9ecef;
  border-left: 3px solid #1e87fd;
  border-radius: 10px;
}

/* Its Score button sits beside the chooser, not adrift above the paste box.
   The 10px used to sit on #score-areas-btn itself. That was the misalignment (2026-09-13, third
   attempt): `#area-triage-section #score-areas-btn` is two ids, so it beat the `margin: 0` in the
   single-id `#score-areas-btn, #area-load-selected` rule below — Score got a 10px top margin in an
   `align-items:center` flex row and Load selected did not, so the two sat 10px apart vertically.
   Equal padding and equal borders could never fix it because the cause was margin, not box size.
   `.box-action` already carries `padding-top:14px`, so the separation survives without it. */
/* Height budget (2026-09-14): the page needs to end near the fold so the first footer rows show at
   1440x900. The paste box was 200px of mostly-empty field on arrival; 140 still holds seven lines
   and it grows as you type. */
/* Taller (2026-09-14): the page ended well above the fold, leaving a band of empty space
   under "What is this". This spends it on the box you actually type in. */
:where(.pg-prioritizer) #phrase-list { min-height: 200px !important; height: 200px !important; }
:where(.pg-prioritizer) .pm-step { margin-bottom: 2px; }
:where(.pg-prioritizer) .what-is-panel { margin-top: 14px; }
/* The box is the step's content, not a card in its own right — it sat inside a bordered card that
   repeated the step heading above it. */
:where(.pg-prioritizer) .triage-row > .section { border:none !important; box-shadow:none !important; padding:0 !important;
  margin:0 !important; background:transparent !important; }
/* Visual column order: Phrases to Prioritize on the left, Find a category on the right.
     Achieved with flex order so the DOM/source order (and mobile stacking) is
     unaffected; the media query resets order so stacked mobile view keeps DOM order. */
:where(.pg-prioritizer) #phrase-list-section { order:1; }

:where(.pg-prioritizer) .triage-row > .section { flex:1 1 380px; min-width:0; display:flex; flex-direction:column; }
/* Pin a box's action row to the bottom so the two side-by-side boxes line up
     their buttons regardless of differing content height. */
:where(.pg-prioritizer) .box-action { margin-top:auto; padding-top:14px; display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
@media (max-width: 900px) {
:where(.pg-prioritizer) .triage-row { gap:0; }
:where(.pg-prioritizer) .triage-row > .section { flex-basis:100%; }
:where(.pg-prioritizer) #phrase-list-section { order:0; }

}
/* Area-triage results */
/* (area-table base styles removed — shared with .results-table above.) */

/* Brief "✓ Loaded" confirmation flash on the Load selected button. */

/* Area-picker modal styles moved to shared.css (2026-09-13) — one shell for this picker and
     the Player's tag/browse pickers. Do not re-add rules here: page CSS loads after shared.css
     and would silently override it, which is how the two pickers drifted apart before. */
/* Status / error messages */
/* .status-msg is retired (2026-09-14) — showStatus() now routes to the fixed-position
     siteNotice. Rules kept for now: clearStatusMsgs() still sweeps any legacy node that survives
     a partial deploy, and an unstyled one would look broken. Safe to delete once deployed. */

/* API key missing banner — shown if phrase-finder hasn't been used yet to set the key */
:where(.pg-prioritizer) .api-key-missing {
    background: #fff;
    border: 1px solid #ffc107;
    border-radius: 6px;
    padding: 12px 14px;
    margin-bottom: 14px;
    font-size: 14px; border-left: 4px solid #ffc107;}
:where(.pg-prioritizer) .api-key-missing a {
    color: #1a3b63;
    font-weight: bold;
    text-decoration: underline; border-left: 4px solid #ffc107;}
/* Action row at the bottom */
:where(.pg-prioritizer) .action-row {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid #eee;
  }
:where(.pg-prioritizer) .action-row .hint {
    font-size: 12px;
    color: #6c757d;
    margin-left: auto;
  }
/* Footer */
:where(.pg-prioritizer) footer {
    text-align: center;
    color: #6c757d;
    font-size: 12px;
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid #dee2e6;
  }
:where(.pg-prioritizer) footer a { color: #495057; }
/* "What is this?" intro box — mirrors the Player's yellow what-is-panel so the
     pages feel consistent. Same colors/spacing as index.html's .what-is-panel. */
/* moved to shared.css (2026-09-12) — see the page-header and what-is-panel blocks there */
/* moved to shared.css (2026-09-12) — see the page-header and what-is-panel blocks there */
:where(.pg-prioritizer) .what-is-panel p { margin: 0 0 8px 0; }
/* Results rebuild (2026-09-14) */
:where(.pg-prioritizer) .results-toolbar { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
:where(.pg-prioritizer) .results-toolbar label { font-size:12px; color:#6c757d; font-weight:600; }
:where(.pg-prioritizer) .pct-readout { font-size:12px; color:#6c757d; }

:where(.pg-prioritizer) tr.below-threshold.is-hidden { display:none; }
:where(.pg-prioritizer) .show-all-row { padding:8px 2px 0; }
:where(.pg-prioritizer) .empty-cut { padding:14px 2px 4px; font-size:13px; color:#6c757d; }
/* One card around steps 1-3, like the Generator's build panel. */
/* Mode tabs (2026-09-14). Phrases and Rife are two modes of one tool, not two tools stacked
     down one page — the snapshot, the state and the run history are shared either way. Same
     treatment as the Player's card tabs so the two pages read alike. */
:where(.pg-prioritizer) .pm-tabs { display:grid; grid-auto-flow:column; grid-auto-columns:minmax(0,1fr);
             border-bottom:1px solid #e9ecef; margin:0 0 14px; }
:where(.pg-prioritizer) .pm-tab { padding:12px 10px; text-align:center; font-size:14px; font-weight:600; color:#6c757d;
            background:#f8f9fa; border:none; border-right:1px solid #e9ecef; cursor:pointer;
            border-radius:0; box-shadow:none; }
:where(.pg-prioritizer) .pm-tab:last-child { border-right:none; }
:where(.pg-prioritizer) .pm-tab:hover { background:#f1f3f5; color:#495057; }
:where(.pg-prioritizer) .pm-tab.is-active { background:#fff; color:#1066c4; box-shadow:inset 0 -2px 0 #1e87fd; }
:where(.pg-prioritizer) .pm-panel { display:none; }
:where(.pg-prioritizer) .pm-panel.is-active { display:block; }
@media (max-width:560px) {
:where(.pg-prioritizer) .pm-tab { font-size:12px; padding:10px 4px; }
}
:where(.pg-prioritizer) .steps-card {
    background:#fafafa; border:1px solid #e0e0e0; border-radius:12px;
    box-shadow:0 4px 8px rgba(0,0,0,.1); padding:16px 18px 18px; margin:0 0 16px;
  }
/* Prioritize/Re-run and Load selected sat on different boxes — one default, one .secondary with
     its own padding — so they were a couple of pixels out and read as misaligned. */

:where(.pg-prioritizer) .show-all-row a { font-size:12px; color:#1066c4; text-decoration:none; font-weight:600; }
:where(.pg-prioritizer) .show-all-row a:hover { text-decoration:underline; }
/* Copy menu: one control instead of four peer buttons competing with Send. */
:where(.pg-prioritizer) .copy-menu { position:relative; display:inline-block; }
:where(.pg-prioritizer) .copy-menu > summary {
    list-style:none; cursor:pointer; font-size:13px; font-weight:600; color:#1066c4;
    border:1px solid #cfe0f5; border-radius:8px; padding:7px 14px; background:#fff;
  }
:where(.pg-prioritizer) .copy-menu > summary::-webkit-details-marker { display:none; }
/* CSS escapes are \25be with a trailing space — \u25be is JS syntax and printed literally. */
:where(.pg-prioritizer) .copy-menu > summary::after { content:" \25be "; }
:where(.pg-prioritizer) .copy-menu-items {
    position:absolute; z-index:50; top:calc(100% + 4px); left:0; min-width:210px;
    background:#fff; border:1px solid #e0e0e0; border-radius:10px; padding:6px;
    box-shadow:0 8px 20px rgba(0,0,0,.12); display:flex; flex-direction:column; gap:4px;
  }
:where(.pg-prioritizer) .copy-menu-items button { text-align:left; width:100%; }
/* (Area picker modal CSS removed — the panel is inline.) */
/* Numbered steps, matching the Generator (2026-09-14). These were four equal white cards in an
   unstated order, so nothing said the snapshot comes first, that the two middle cards are two
   routes into the same box, or that scoring is the last move. Same 22px badge, same 15px step
   label, same grey field surface the Generator uses. */
:where(.pg-prioritizer) .pm-step { display: flex; gap: 10px; align-items: flex-start; margin-bottom: 4px; }
:where(.pg-prioritizer) .pm-step-num {
  flex: 0 0 auto; width: 22px; height: 22px; border-radius: 50%;
  background: #e6f1fb; color: #0c447c; font-size: 12px; font-weight: 700;
  display: flex; align-items: center; justify-content: center; margin-top: 1px;
}
/* "or" badge in the connector column, same circle as the step numbers so the two routes read as
   alternatives at a glance rather than a sequence. */

:where(.pg-prioritizer) .pm-step-label { font-size: 15px; font-weight: 700; color: #212529; }
:where(.pg-prioritizer) .pm-step-hint { font-size: 13px; color: #6c757d; font-weight: 400; }
/* Step headings sit outside the cards, so the cards themselves drop to a quieter title — they
   were 17px bold, the same weight as the page's own section headings. */
:where(.pg-prioritizer) .triage-row .section-title { font-size: 14px !important; }
:where(.pg-prioritizer) .what-is-panel strong { color: #2c3540; }
/* Mobile */
@media (max-width: 600px) {
:where(.pg-prioritizer) body { padding: 12px; }
:where(.pg-prioritizer) textarea { font-size: 16px; }
/* prevents iOS zoom-on-focus */
:where(.pg-prioritizer) .results-table { font-size: 12px; }
:where(.pg-prioritizer) .results-table .col-reasoning { display: none; }
/* hide on phones; tap row to see full */
:where(.pg-prioritizer) .results-table .col-from { display: none; }
/* same reason — score and phrase only */

/* hide mouse capture claim on phones */
}
/* ===== Unified cross-page header & nav (shared verbatim with index.html and
   phrase-finder.html so all three pages match). Defines the H1 type scale with the
   same responsive breakpoints, and a .xnav-* class set for the page tabs.
   Nav order (deliberate): Phrase Player · AI Phrase Generator · Phrase Prioritizer · Setup · Guide. */
/* moved to shared.css (2026-09-12) — see the page-header and what-is-panel blocks there */
/* .xnav nav styles now live in shared.css */
/* "My Snapshot" capture-flow step timeline — matches phrase-finder.html's mocked
   up and approved redesign. A single connected vertical list (Start → Voice →
   Type → Save) instead of a separate progress bar plus separate prose repeating
   the same sequence. Circle state (locked/active/done) is driven by
   updateMiniSteps(), which reads each control's real .disabled state rather
   than re-deriving the gating logic. */
/* Tooltips as short lead + bullets (2026-09-23, Dan). */
:where(.pg-prioritizer) .info-panel .tip-lead { margin:0 0 6px; font-weight:600; color:#212529; }
:where(.pg-prioritizer) .info-panel .tip-list { margin:0 0 6px; padding-left:18px; }
:where(.pg-prioritizer) .info-panel .tip-list li { margin:3px 0; line-height:1.45; }
:where(.pg-prioritizer) .info-panel .tip-foot { margin:6px 0 0; color:#495057; }

/* ---------- api-setup.html (.pg-setup) ---------- */
:where(.pg-setup) .nh-setup-switch { display:inline-flex; align-items:center; gap:8px; font-size:14px; color:#212529; cursor:pointer; }   /* 28jm (564 build 1): the Show the phrases switch */
:where(.pg-setup) .nh-setup-switch input { width:18px; height:18px; margin:0; }
/* Rules identical across pages were consolidated into shared.css on 2026-09-12. */
/* .page-banner moved to shared.css (2026-09-12) — this page had its own copy while
     index and phrase-finder hand-styled theirs inline, so the bands differed in height. */
/* Styles mirror phrase-match/phrase-finder exactly: same body, .container, .section
     cards, .section-title/.section-subtitle, blue button palette, centered h1, footer. */
:where(.pg-setup) body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 20px;
    background-color: #f8f9fa;
    color: #212529;
    line-height: 1.5;
  }
:where(.pg-setup) .container { max-width: 1400px; margin: 0 auto; }
/* moved to shared.css (2026-09-12) — see the page-header and what-is-panel blocks there */
/* Hero subtitle + page banner — same styled intro pattern as index.html,
     phrase-finder.html, and phrase-match.html, for visual consistency site-wide. */
/* moved to shared.css (2026-09-12) — see the page-header and what-is-panel blocks there */
/* moved to shared.css (2026-09-12) — see the page-header and what-is-panel blocks there */

:where(.pg-setup) .section {
    background: #fff;
    padding: 13px;
    border-radius: 12px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.08);
    border: 1px solid #e0e0e0;
    margin-bottom: 13px;
  }
:where(.pg-setup) .section-subtitle { font-size: 13px; color: #6c757d; margin: 0 0 12px 0; line-height: 1.5; }
:where(.pg-setup) button {
    background: #1674dc;
    color: #fff;
    border: none;
    border-radius: 6px;
    padding: 10px 18px;
    font-size: 14px;
    font-weight: bold;
    cursor: pointer;
  }
@media (hover: hover) { :where(.pg-setup) button:hover:not(:disabled) { background: #1066c4; } }
:where(.pg-setup) button:disabled { background: #adb5bd; cursor: not-allowed; }
:where(.pg-setup) button.secondary { background: #fff; color: #1674dc; border: 1px solid #1674dc; }
:where(.pg-setup) button.secondary:hover:not(:disabled) { background: #eef5ff; }
:where(.pg-setup) input[type="password"],
:where(.pg-setup) input[type="text"],
:where(.pg-setup) select {
    width: 100%;
    border: 1px solid #ced4da;
    border-radius: 6px;
    padding: 10px;
    font-family: inherit;
    font-size: 14px;
    color: #212529;
    box-sizing: border-box;
  }

:where(.pg-setup) .key-row { display:flex; gap:8px; align-items:center; }
:where(.pg-setup) .key-row input { flex:1; }
:where(.pg-setup) .key-row button { flex-shrink:0; padding:9px 14px; font-size:13px; }
:where(.pg-setup) .actions { display:flex; gap:10px; flex-wrap:wrap; align-items:center; margin-top:16px; }
:where(.pg-setup) .hint { font-size:12px; color:#6c757d; line-height:1.55; }
:where(.pg-setup) .status { font-size:13px; padding:3px 9px; border-radius:12px; background:#eef1f3; color:#555; }
:where(.pg-setup) .status.ok { background:#e3f5ea; color:#1d6b45; }
:where(.pg-setup) #nh-advanced > summary { padding:8px 0; min-height:36px; box-sizing:border-box; }   /* 28hi: a tap target on a phone (check 25) — the row sits above the fold now */
:where(.pg-setup) .status.warn { background:#fff; color:#1a3b63; border-left: 4px solid #ffc107;}   /* yellow: a warning is not a failure (Session 30) */
:where(.pg-setup) .status.loading { background:#eaf1fb; color:#25508f; }
:where(.pg-setup) table.models { width:100%; border-collapse:collapse; font-size:13px; margin-top:8px; }
:where(.pg-setup) table.models th,
:where(.pg-setup) table.models td { text-align:left; padding:8px; border-bottom:1px solid #eee; vertical-align:top; }
:where(.pg-setup) table.models th { color:#495057; font-size:12px; text-transform:uppercase; letter-spacing:.03em; }
:where(.pg-setup) code { background:#f1f3f5; padding:1px 5px; border-radius:4px; font-size:13px; }
@media (max-width: 700px) {
:where(.pg-setup) body { padding: 12px; }
:where(.pg-setup) input[type="password"],
:where(.pg-setup) input[type="text"],
:where(.pg-setup) select { font-size: 16px; }
/* no iOS zoom */
:where(.pg-setup) table.models th:nth-child(2),
:where(.pg-setup) table.models td:nth-child(2) { display:none; }
}

/* ---------- c.html (.pg-admin) ---------- */
/* .muted / .row / .row.two / button.secondary / button:disabled removed 2026-09-12 —
     they were byte-identical to shared.css. .card, label and button.tiny are NOT removed:
     this page deliberately runs a denser layout than the public pages. */
:where(.pg-admin) * { box-sizing: border-box; }
:where(.pg-admin) body { font-family: Arial, sans-serif; margin:0; padding:20px; background-color:#f8f9fa; color:#212529; line-height:1.5; }
:where(.pg-admin) .container { max-width:1400px; margin:0 auto; }
/* h1 moved to shared.css (2026-09-12). This page kept a centred 26px rule that loaded AFTER
     shared.css and silently won, so the page header never picked up the site style. */
/* .intro replaced by the shared .hero-subtitle (2026-09-12) */
:where(.pg-admin) .card { background:#fff; border:1px solid #dee2e6; border-radius:8px; padding:14px; margin-bottom:12px; }
:where(.pg-admin) .card h2 { font-size:16px; margin:0 0 14px; display:flex; align-items:center; gap:9px; }
:where(.pg-admin) .stepnum { display:inline-flex; align-items:center; justify-content:center; width:22px; height:22px; border-radius:50%; background:#1674dc; color:#fff; font-size:12px; font-weight:bold; }
:where(.pg-admin) label { display:block; font-size:12px; font-weight:600; color:#495057; margin:0 0 4px; }
:where(.pg-admin) input[type=text],
:where(.pg-admin) select,
:where(.pg-admin) textarea { width:100%; padding:9px 11px; border:1px solid #ced4da; border-radius:6px; font-family:inherit; font-size:14px; background:#fff; }
/* Monospace was doing no work here — these fields hold phrases, which are prose, not aligned
     columns. It was the main thing that made an admin page read as a console (2026-09-14). */
:where(.pg-admin) textarea { font-family: inherit; }
:where(.pg-admin) input:focus,
:where(.pg-admin) select:focus,
:where(.pg-admin) textarea:focus { outline:none; border-color:#1674dc; box-shadow:0 0 0 3px rgba(22, 116, 220,.12); }
:where(.pg-admin) .row.two { grid-template-columns:1fr 1fr; }
@media(max-width:680px) {
:where(.pg-admin) .row.two { grid-template-columns:1fr; }
}
:where(.pg-admin) button { padding:10px 18px; border:none; border-radius:6px; font-family:inherit; font-size:14px; font-weight:600; cursor:pointer; background:#1674dc; color:#fff; }
:where(.pg-admin) button.tiny { padding:3px 9px; font-size:12px; }
:where(.pg-admin) .file-zone { border:2px dashed #ced4da; border-radius:8px; padding:26px; text-align:center; cursor:pointer; }
:where(.pg-admin) .file-zone:hover { border-color:#1674dc; background:#eef5ff; }
:where(.pg-admin) .file-zone.loaded { border-style:solid; border-color:#198754; background:#f0fbf4; }
:where(.pg-admin) .stat { display:flex; gap:20px; flex-wrap:wrap; margin-top:12px; font-size:13px; color:#6c757d; }
:where(.pg-admin) .stat b { color:#212529; }
:where(.pg-admin) .hidden { display:none; }
/* tabs */
/* Matched to .records-tab / .controls-tab on the Player (2026-09-14): same greys, same active
     treatment — white ground with a 2px underline rather than a coloured label on grey. */
:where(.pg-admin) .tabs { display:flex; margin-bottom:16px; flex-wrap:wrap; border-bottom:1px solid #e9ecef; }
:where(.pg-admin) .tab { padding:12px 18px; background:#f8f9fa; color:#6c757d; cursor:pointer; font-weight:600;
         font-size:14px; border:none; border-right:1px solid #e9ecef; border-radius:0; }
:where(.pg-admin) .tab:last-child { border-right:none; }
:where(.pg-admin) .tab:hover { background:#f1f3f5; color:#495057; }
:where(.pg-admin) .tab.active { background:#fff; color:#1066c4; box-shadow:inset 0 -2px 0 #1e87fd; }
:where(.pg-admin) table { width:100%; border-collapse:collapse; font-size:13px; margin-top:6px; }
:where(.pg-admin) th,
:where(.pg-admin) td { text-align:left; padding:7px 8px; border-bottom:1px solid #dee2e6; vertical-align:top; }
/* Sentence case, not all-caps: every other table in the suite reads its headers normally, and
     tracked-out caps is the loudest "internal tool" signal on the page. */
:where(.pg-admin) th { font-size:12px; font-weight:600; color:#6c757d; }
:where(.pg-admin) .edittbl input,
:where(.pg-admin) .edittbl select { padding:5px; font-size:12px; border:1px solid #e3e6ea; border-radius:4px; width:100%; }
/* Row states drawn from the palette the rest of the suite settled on (2026-09-14) — the amber
     and two pinks here were one-offs that appeared nowhere else. Tints only: the row still has to
     read as a table row, so the colour is a hint, not a highlight. */
:where(.pg-admin) .edittbl tr.dup { background:#fff8e6; }
:where(.pg-admin) .edittbl tr.lowconf { background:#fff8e1; }
:where(.pg-admin) .edittbl input.badcell,
:where(.pg-admin) #bTable input.badcell { border:1px solid #ffc107 !important; background:#fff8e1; box-shadow:0 0 0 2px rgba(255,193,7,.18); }
:where(.pg-admin) .edittbl td.phc input { min-width:200px; }
/* Review table: size columns to their content so M1..Status are readable.
     Columns: Conf, flag, Phrase, Tag1, Tag2, M1, M2, M3, Mode, Treatment, Status, del */
/* 1240px of fixed columns cannot fit a narrow screen. That is already contained — the table is
     wrapped in an overflow-x:auto div — so it scrolls inside its own box rather than widening the
     page. Kept as a note so the min-width does not get "fixed" by someone who assumes otherwise. */
:where(.pg-admin) #bTable { table-layout:fixed; min-width:1240px; }
:where(.pg-admin) #bTable th:nth-child(1),
:where(.pg-admin) #bTable td:nth-child(1) { width:34px; }
/* select checkbox */
:where(.pg-admin) #bTable th:nth-child(2),
:where(.pg-admin) #bTable td:nth-child(2) { width:52px; }
/* Conf */
:where(.pg-admin) #bTable th:nth-child(3),
:where(.pg-admin) #bTable td:nth-child(3) { width:44px; }
/* flag */
:where(.pg-admin) #bTable th:nth-child(4),
:where(.pg-admin) #bTable td:nth-child(4) { width:auto; min-width:260px; }
/* Phrase (flex) */
:where(.pg-admin) #bTable th:nth-child(5),
:where(.pg-admin) #bTable td:nth-child(5) { width:90px; }
/* Tag1 */
:where(.pg-admin) #bTable th:nth-child(6),
:where(.pg-admin) #bTable td:nth-child(6) { width:100px; }
/* Tag2 */
:where(.pg-admin) #bTable th:nth-child(7),
:where(.pg-admin) #bTable td:nth-child(7) { width:108px; }
/* M1 */
:where(.pg-admin) #bTable th:nth-child(8),
:where(.pg-admin) #bTable td:nth-child(8) { width:150px; }
/* M2 */
:where(.pg-admin) #bTable th:nth-child(9),
:where(.pg-admin) #bTable td:nth-child(9) { width:150px; }
/* M3 */
:where(.pg-admin) #bTable th:nth-child(10),
:where(.pg-admin) #bTable td:nth-child(10) { width:118px; }
/* Mode */
:where(.pg-admin) #bTable th:nth-child(11),
:where(.pg-admin) #bTable td:nth-child(11) { width:150px; }
/* Treatment */
:where(.pg-admin) #bTable th:nth-child(12),
:where(.pg-admin) #bTable td:nth-child(12) { width:120px; }
/* Status */
:where(.pg-admin) #bTable th:nth-child(13),
:where(.pg-admin) #bTable td:nth-child(13) { width:40px; }
/* del */
:where(.pg-admin) #bTable td.phc input { min-width:0; }
/* phrase fills its flex column */
:where(.pg-admin) .rowflag { font-size:10px; font-weight:600; padding:1px 6px; border-radius:10px; white-space:nowrap; display:inline-block; }
:where(.pg-admin) .rowflag.d { background:#ffe2a8; color:#7a4f00; }
:where(.pg-admin) .rowflag.n { background:#fff; color:#1a3b63; border-left: 4px solid #ffc107;}
:where(.pg-admin) .rowflag.ok { background:#cfe9d6; color:#14633a; }
:where(.pg-admin) .conf { font-weight:700; font-size:11px; }
:where(.pg-admin) .conf.hi { color:#14633a; }
:where(.pg-admin) .conf.mid { color:#9a6b00; }
:where(.pg-admin) .conf.lo { color:#a12a36; }
:where(.pg-admin) .sim { font-size:11px; color:#555; background:#eef5ff; border:1px solid #b3d4fc; border-radius:6px; padding:6px 8px; margin-top:4px; line-height:1.5; word-break:normal; overflow-wrap:anywhere; max-height:120px; overflow-y:auto; }
:where(.pg-admin) .sim a { color:#1674dc; cursor:pointer; text-decoration:underline; font-weight:600; white-space:nowrap; }
:where(.pg-admin) .sim .sphrase { color:#333; white-space:normal; }
:where(.pg-admin) .queue-empty { color:#6c757d; text-align:center; padding:14px 0; font-size:13px; }
:where(.pg-admin) .export-note { font-size:12px; color:#6c757d; border-left:3px solid #dee2e6; padding-left:11px; margin-top:14px; }
:where(.pg-admin) .keybar { display:flex; align-items:center; gap:10px; font-size:12px; color:#495057; background:#eef5ff; border:1px solid #b3d4fc; border-radius:6px; padding:8px 12px; margin-bottom:16px; flex-wrap:wrap; }
:where(.pg-admin) .dot { width:9px; height:9px; border-radius:50%; display:inline-block; }
:where(.pg-admin) .dot.on { background:#198754; }
:where(.pg-admin) .dot.off { background:#adb5bd; }
/* The page's own .toast is retired (2026-09-13). It was a third notice mechanism alongside
     index.html's green box and the shared siteNotice, so the same action looked different
     depending on which page you were standing on. toast() below now forwards to siteNotice and
     every existing call site keeps working unchanged. */
/* .modal / .modal-box retired 2026-09-25 — Admin's AI window uses the shared .nh-backdrop / .nh-card */
:where(.pg-admin) .diff-tbl { width:100%; border-collapse:collapse; font-size:12px; }
:where(.pg-admin) .diff-tbl th,
:where(.pg-admin) .diff-tbl td { padding:6px 8px; border-bottom:1px solid #eee; text-align:left; }
:where(.pg-admin) .agree { background:#e6f7ec; }
:where(.pg-admin) .override { background:#fff6e6; }
:where(.pg-admin) .diff-tbl td.malformed { background:#fff; color:#1a3b63; border-left: 4px solid #ffc107;}
:where(.pg-admin) .diff-tbl td.pickcell input[type=checkbox] { width:auto; margin:0 5px 0 0; vertical-align:middle; cursor:pointer; }
:where(.pg-admin) .diff-tbl td.override label { cursor:pointer; display:inline-flex; align-items:flex-start; gap:4px; }

:where(.pg-admin) .pickbar { font-size:12px; color:#495057; margin:0 0 8px; }
:where(.pg-admin) .pickbar a { color:#1674dc; cursor:pointer; text-decoration:underline; font-weight:600; margin-right:12px; }
:where(.pg-admin) .pickbar b { color:#212529; }
/* audit */
:where(.pg-admin) .audit-sec { border:1px solid #e3e6ea; border-radius:7px; margin-bottom:12px; overflow:hidden; }
:where(.pg-admin) .audit-head { background:#eef5ff; padding:10px 13px; font-weight:600; font-size:13px; cursor:pointer; display:flex; justify-content:space-between; align-items:center; }
:where(.pg-admin) .audit-head .badge { background:#1674dc; color:#fff; border-radius:12px; padding:1px 9px; font-size:12px; }
:where(.pg-admin) .audit-head .badge.zero { background:#cfe9d6; color:#14633a; }

:where(.pg-admin) .pill { display:inline-block; background:#e6f1fb; color:#1066c4; border-radius:10px; padding:1px 8px; font-size:11px; margin:2px; }
:where(.pg-admin) .rep-tbl { width:100%; border-collapse:collapse; font-size:12px; }
:where(.pg-admin) .rep-tbl td { padding:4px 13px; border-top:1px solid #f0f0f3; }
:where(.pg-admin) .rep-tbl td.n { text-align:right; width:70px; font-variant-numeric:tabular-nums; }
:where(.pg-admin) .rep-bar { height:8px; background:#1674dc; border-radius:4px; }
:where(.pg-admin) .rep-grp { font-weight:600; font-size:12px; color:#2d1a5a; padding:7px 13px 3px; background:#fbf9ff; border-top:1px solid #ececf2; }
/* ===== Unified cross-page nav (matches index/phrase-finder/phrase-match). Only shown
   when the z=1 reveal flag is active. Order: Phrase Player · Phrase Prioritizer · AI Phrase Generator · Admin. */
/* Cross-page nav styles moved to shared.css (2026-09-12) — this page had its own copy. */

/* 2026-09-23 (Dan: "the windows should look alike") — the native file chooser in the upload window
   takes the site's outline-button look instead of the browser's grey default. */
/* Two separate rules: a browser that does not know one of the pseudo-elements drops the whole rule. */

/* Generator, first message: Submit matches the height of the message box beside it (Dan, 2026-09-24). */
#gen-compose-action { align-items: stretch; }
#gen-compose-action > #gen-conv-send-btn { height: 100%; align-self: stretch; }
/* Start-with menu items: plain menu rows, not underlined links. */
#gen-start-menu { max-height: min(70vh, 460px); overflow-y: auto; -webkit-overflow-scrolling: touch; }   /* 28ev: never taller than the screen; scrolls inside */
#gen-start-menu .gen-start-item { text-decoration: none; color: #1066c4; font-size: 14px; font-weight: 600; line-height: 1.35; }
#gen-start-menu .gen-start-item span { font-weight: 400; }
#gen-start-menu .gen-start-item:hover { background: #f1f5fb; }

/* Prioritizer category picker, aligned with the Player's pickers (Dan, 2026-09-24): one column of rows
   rather than a grid of cards; the tabs sit on the light strip under the blue header. */

/* Sound & Session tabs (2026-09-24, Dan: one consistent design). The global button:hover rule beat
   these zero-specificity tab rules, so a hovered or just-tapped active tab turned dark blue with blue
   text (label invisible). Pinned here with real specificity. */
body .controls-tabs button.controls-tab:hover:not(:disabled) { background: #f1f3f5; color: #495057; }
body .controls-tabs button.controls-tab.is-active,
body .controls-tabs button.controls-tab.is-active:hover { background: #fff; color: #1066c4; box-shadow: inset 0 -2px 0 #1e87fd; }
body button.hist-tab:hover:not(:disabled) { background: #e9ecef; color: #212529; }
body button.hist-tab.active, body button.hist-tab.active:hover { background: #fff; color: #1066c4; }
/* History: no box inside the box — the sub-tabs underline, the content sits on the card. */
:where(.pg-player) .hist-tab-panel { border: none; background: transparent; padding: 12px 2px 4px; border-radius: 0; }
:where(.pg-player) .hist-tab.active { border-bottom-color: #fff; }
body.nh-mode-quick #gen-qp-dock { display: none !important; }
/* Guided's first box starts 6px under the title, the same as Quick Build (2026-09-24). The input row's
   10px top margin separates it from the chat thread; with no thread yet it only added a gap. */
body:not(.gen-has-conv) #gen-conv-input-row, body:not(.gen-has-conv) .gen-conv-input-row { margin-top: 0; }
/* Both modes' action buttons the same width, so the two boxes are the same width too (2026-09-24). */
@media (min-width: 561px) { :where(.pg-generator) .compose-action-slot > button:first-child { width: 140px; } }
/* ✦ Start with inside the message box's top-right corner (2026-09-24). The box keeps room for it on the
   right; on phones the button sits under the box instead. */
.gen-box-wrap > #gen-build-on-list { position: absolute; top: 8px; right: 8px; z-index: 3; }
@media (min-width: 561px) { .gen-box-wrap textarea#gen-conv-input, .gen-box-wrap textarea#quick-build-input { padding-right: 124px; } }
@media (max-width: 560px) { .gen-box-wrap > #gen-build-on-list { position: static; margin-top: 6px; } .gen-box-wrap { flex-wrap: wrap; } }
@media (max-width: 560px) { .gen-box-wrap textarea#gen-conv-input, .gen-box-wrap textarea#quick-build-input { min-height: 200px; height: 200px; } }

/* Disabled buttons in the site's windows (2026-09-24): the global button:disabled grey fill made
   outlined buttons grey blocks with pale blue text. Keep their shape, just faded. */
.nh-btn.nh-btn--outline:disabled, .nh-btn:disabled:not(.nh-btn--primary) { background:#fff; color:#9aa5b1; border-color:#d0d7de; cursor:not-allowed; opacity:1; }
.nh-btn.nh-btn--primary:disabled { background:#b9c9df; border-color:#b9c9df; color:#fff; cursor:not-allowed; opacity:1; }

/* Admin → Browse / Edit / Audit: bulk tools grouped (2026-09-24). */
#brActions.br-tools { display:flex; flex-direction:column; gap:10px; margin-bottom:12px; padding:0; background:none; border:none; }
#brActions.br-tools.hidden { display:none; }
#brActions .br-scope { display:flex; flex-wrap:wrap; align-items:center; gap:10px 16px; padding:10px 12px; background:#f1f6fd; border:1px solid #d6e4f5; border-radius:10px; font-size:14px; }
#brActions .br-scope-label { font-weight:700; color:#102a43; }
#brActions .br-scope label { display:inline-flex; align-items:center; gap:6px; cursor:pointer; }
#brActions .br-scope-side { margin-left:auto; display:inline-flex; gap:6px; }
#brActions .br-group { padding:10px 12px; background:#fff; border:1px solid #e3e8ef; border-radius:10px; }
#brActions .br-head { display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 10px; margin-bottom:8px; }
#brActions .br-head b { font-size:14px; color:#102a43; }
#brActions .br-head span { font-size:12.5px; color:#6c757d; }
#brActions .br-btns { display:flex; flex-wrap:wrap; align-items:center; gap:6px 8px; }
#brActions .br-note { font-size:12.5px; color:#6c757d; display:inline-flex; align-items:center; gap:6px; }
#brActions .br-note select { font-size:12.5px; padding:3px 6px; border:1px solid #ccd1d5; border-radius:6px; }
#brActions .br-primary { background:#1f6fd6; color:#fff; border:1px solid #1f6fd6; border-radius:8px; padding:7px 14px; font-weight:600; font-size:13.5px; }
#brActions .br-primary:hover:not(:disabled) { background:#185bb3; }
#brActions .br-danger { color:#1a3b63; border-left: 4px solid #ffc107;}
#brActions .br-group select, #brActions .br-group input[type=text] { width:auto; max-width:100%; }
#brActions .br-group > div { display:flex; flex-wrap:wrap; align-items:center; gap:6px 8px; }
#brActions .br-group > div.br-head { align-items:baseline; }
#brActions .br-group label.muted { display:inline-flex; align-items:center; gap:6px; }

/* Prioritizer: Find a category folds to one line once there are phrases; sticky Prioritize bar (2026-09-24). */

/* Prioritizer Phrases / Rife switch styled like the Generator's Quick Build / Guided toggle
   (Dan, 2026-09-24): a compact segmented control, not a full-width tab strip. Real specificity so
   the global button:hover rule can't turn it blue-on-blue. */
body .pm-tabs#pm-tabs { display:inline-flex; width:fit-content; gap:0; border:1px solid #ced4da; border-radius:8px; overflow:hidden; margin:4px 0 14px; background:#fff; box-shadow:none; grid-auto-flow:unset; }
body .pm-tabs#pm-tabs button.pm-tab { border:none; border-right:1px solid #ced4da; border-radius:0; background:#fff; color:#495057; padding:8px 18px; font-size:13px; font-weight:600; box-shadow:none; min-width:0; }
body .pm-tabs#pm-tabs button.pm-tab:last-child { border-right:none; }
body .pm-tabs#pm-tabs button.pm-tab:hover:not(:disabled):not(.is-active) { background:#eef2fb; color:#495057; }
body .pm-tabs#pm-tabs button.pm-tab.is-active, body .pm-tabs#pm-tabs button.pm-tab.is-active:hover { background:#1674dc; color:#fff; box-shadow:none; }

/* Prioritizer: one floating Prioritize bar for both tabs (2026-09-24). */
.pm-step3-hidden, .pm-bar-src { display:none !important; }
#pm-sticky { position:fixed; left:50%; transform:translateX(-50%); bottom:calc(12px + env(safe-area-inset-bottom, 0px)); z-index:900; width:max-content; max-width:calc(100vw - 24px); transform-origin:50% 100%; }
#pm-sticky .pm-bar-inner { display:flex; align-items:center; gap:12px; flex-wrap:wrap; background:#fff; border:1px solid #d6e4f5; border-radius:14px; padding:10px 12px; box-shadow:0 8px 24px rgba(16,24,40,.18); }
#pm-sticky #pm-sticky-btn { border-radius:999px; padding:10px 20px; font-size:15px; font-weight:700; }
#pm-sticky #pm-sticky-btn:disabled { background:#b9c9df; border-color:#b9c9df; color:#fff; }
#pm-sticky #pm-bar-note { max-width:360px; font-size:12.5px; color:#52606d; line-height:1.35; }
#pm-sticky #pm-bar-note:empty { display:none; }
#pm-sticky .pm-bar-inner { flex-wrap:nowrap; }
@media (max-width:560px) { #pm-sticky .pm-bar-inner { flex-wrap:wrap; } }
body.pm-has-bar { padding-bottom:96px; }

/* Windows (2026-09-24, Dan: "more white space on modals", "this is covering buttons"). More room
   inside, never taller than the screen, and the floating bars step aside while a window is open. */
.nh-card { max-height:calc(100dvh - 32px); }
.nh-card-body { padding:16px 22px 10px; }
.nh-card-foot { padding:14px 22px 18px; gap:10px; }
.nh-card-body:empty { display:none; }
body.nh-modal-open #gen-qp-dock, body.nh-modal-open #pm-sticky { display:none !important; }

/* Prioritizer Results in the same rounded card as step 2 (2026-09-24, Dan: consistency). */
:where(.pg-prioritizer) #results-area:not([style*="display: none"]):not([style*="display:none"]) {
  background:#fafafa; border:1px solid #e0e0e0; border-radius:12px; box-shadow:0 4px 8px rgba(0,0,0,.1);
  padding:16px 18px 18px; margin:0 0 16px;
}

/* UX review (2026-09-24, Dan approved all). */
/* Player: idle Pause / Stop read as faded outlines, not grey blocks. */
body.pg-player .floating-controls button:disabled,
.pg-player .floating-controls button.pause-btn:disabled,
.pg-player .floating-controls button.stop-btn:disabled { background:#fff !important; color:#9aa5b1 !important; border:1px solid #d0d7de !important; opacity:1 !important; box-shadow:none !important; }
.volume-control .vol-icon { font-size:14px; margin:0 2px 0 6px; opacity:.7; }
/* Player: Sound & Session tabs as the compact segmented switch used on the Generator and Prioritizer. */
body .controls-tabs { display:inline-flex !important; width:fit-content !important; gap:0 !important; border:1px solid #ced4da !important; border-radius:8px !important; overflow:hidden; margin:4px 0 12px !important; background:#fff; box-shadow:none !important; }
body .controls-tabs > button { border:none !important; border-right:1px solid #ced4da !important; border-radius:0 !important; background:#fff !important; color:#495057 !important; padding:8px 16px !important; font-size:13px !important; font-weight:600 !important; box-shadow:none !important; flex:0 0 auto !important; width:auto !important; }
body .controls-tabs > button:last-child { border-right:none !important; }
body .controls-tabs > button:hover:not(.is-active):not(.active) { background:#eef2fb !important; }
body .controls-tabs > button.is-active, body .controls-tabs > button.active, body .controls-tabs > button[aria-selected="true"] { background:#1674dc !important; color:#fff !important; }
@media (max-width:560px) { body .controls-tabs > button { padding:8px 10px !important; font-size:12.5px !important; } }
/* Setup: neutral "add your key" status (UX review 2026-09-24). */
.status.info { background:#e7f1ff; color:#0b3d7a; border-radius:8px; padding:6px 10px; display:inline-block; }
body.pm-has-bar { padding-bottom:0; }
/* Button hierarchy (Dan, 2026-09-24: "the most stand-out buttons on this page are the tabs"): segmented
   switches are quiet — a light tint for the selected option — so solid blue is kept for the one main
   action on each page (Play, Submit, Prioritize…). */
body .controls-tabs > button.is-active, body .controls-tabs > button.active, body .controls-tabs > button[aria-selected="true"],
body .pm-tabs#pm-tabs button.pm-tab.is-active, body .pm-tabs#pm-tabs button.pm-tab.is-active:hover,
body #gen-mode-toggle .gen-mode-btn.active { background:#e7f1ff !important; color:#1066c4 !important; box-shadow:inset 0 -2px 0 #1f6fd6 !important; }

/* Player step numbers (2026-09-24, Dan): Build Your Session = 1, Sound & Session Setup = 2, so the order
   reads without renaming either card. Same circle as the Prioritizer / Generator steps. */
:where(.pg-player) .pl-step-num {
  display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px;
  border-radius: 50%; background: #e6f1fb; color: #0c447c; font-size: 12px; font-weight: 700;
  margin-right: 8px; vertical-align: 2px; flex: 0 0 auto;
}

/* Shared window component (site-common.js nhWindow, 2026-09-25): stacking is set per window (z-index above
   the sticky nav); urgent windows (the safety stop) use a dark header and cannot be dismissed by tapping out. */
.nh-backdrop { z-index:20000; }
.nh-urgent .nh-win-head { background:#1d3557; }
.nh-btn--danger { background:#fff; color:#1066c4; border:1px solid #1066c4; }   /* same as nh-btn--outline: no red on the site (Dan, 2026-09-27) */
.nh-card-body { overflow:auto; }

/* Snapshot window (snapshot.js, 2026-09-25): wider, one active step at a time, readings folded, age colour. */
.snap-card { max-width:640px; }
.snap-body { padding:12px 20px 6px; font-size:14.5px; }
.snap-bar { display:flex; gap:6px; margin-top:10px; }
.snap-bar i { flex:1; height:5px; border-radius:3px; background:rgba(255,255,255,.35); }
.snap-bar i.on { background:#fff; }
.snap-age { font-size:13px; margin:0 0 10px; padding:6px 10px; border-radius:8px; background:#f1f5f9; color:#52606d !important; }
.snap-age:empty { display:none; }
.snap-age.snap-age-ok { background:#eef7f1; color:#1e7b4a !important; }
.snap-age.snap-age-warn { background:#fff4e5; color:#b45309 !important; font-weight:600; }
.snap-age.snap-age-stale { background:#fff; color:#1a3b63 !important; font-weight:700; border-left: 4px solid #ffc107;}
.snap-step { border:1px solid #e4e9ef; border-radius:12px; padding:12px 14px; margin:0 0 10px; background:#fff; transition:opacity .15s; }
.snap-step.is-done { background:#f3faf6; border-color:#cde9d8; }
.snap-step.is-act { border:2px solid #1e87fd; box-shadow:0 2px 10px rgba(30, 135, 253,.12); }
.snap-step.is-lock { opacity:.5; }
.snap-row { display:flex; align-items:center; gap:10px; }
.snap-num { width:26px; height:26px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; font-size:13px; font-weight:700; background:#e6f1fb; color:#0c447c; flex:0 0 auto; }
.snap-num.done, .snap-ok { background:#1e7b4a; color:#fff; }
.snap-num.active { background:#1066c4; color:#fff; }
.snap-title { font-size:15.5px; font-weight:700; }
.snap-title.locked { color:#6b7785; }
.snap-sub { font-size:13px; color:#52606d; margin:4px 0 0 36px; line-height:1.45; }
.snap-ctl { margin:10px 0 0 36px; }
.snap-step.is-done .snap-ctl textarea, .snap-step.is-done .snap-prog { display:none; }
.snap-ta { width:100%; box-sizing:border-box; min-height:84px; font-size:14px; border-radius:9px; }
.snap-prog { height:8px; border-radius:5px; background:#e9eef4; margin-top:8px; overflow:hidden; }
.snap-prog b { display:block; height:100%; width:0; background:#1e87fd; transition:width .25s; }
.snap-note { font-size:12.5px; color:#52606d; }
.snap-readings summary { cursor:pointer; color:#1066c4; font-size:13px; font-weight:600; margin:8px 0 0 36px; }
.snap-readings .signal-row { margin:6px 0 0 36px; }
.snap-chans { display:flex; gap:14px; flex-wrap:wrap; margin-top:8px; font-size:14px; }
.snap-foot { justify-content:space-between; }
@media (max-width:560px) { .snap-sub, .snap-ctl, .snap-readings summary, .snap-readings .signal-row { margin-left:0; } }
.snap-step.is-done .snap-ctl button { display:none; }
#signal-modal-done-view .snap-done-card .snap-sub { display:none; }

/* Shared action bar + focus mode (site-common.js nhActionBar / nhFocus, 2026-09-25). One look for the Player's play
   bar, the Generator's pick bar and the Prioritizer's Prioritize bar: full width at the bottom, white, a top edge,
   clear of the home bar; hidden when there is nothing to do. These rules outrank the pages' own bar styles. */
body .nh-actionbar { position:fixed !important; left:0 !important; right:0 !important; bottom:0 !important; top:auto !important;
  transform:none !important; width:auto !important; max-width:none !important; margin:0 !important;
  border:0 !important; border-top:1px solid #d6e4f5 !important; border-radius:0 !important; background:#fff !important;
  box-shadow:0 -6px 18px rgba(16,24,40,.12) !important; padding:10px 16px calc(10px + env(safe-area-inset-bottom, 0px)) !important;
  z-index:9000 !important; box-sizing:border-box !important; }
body .nh-actionbar.nh-bar-hidden { display:none !important; }
body.nh-has-actionbar { padding-bottom:calc(96px + env(safe-area-inset-bottom, 0px)) !important; }
body.nh-has-actionbar .sn-wrap { bottom:calc(env(safe-area-inset-bottom, 0px) + 96px); }
body.nh-focus .xfoot { display:none !important; }
/* Player: playing shows as a blue top edge instead of a blue outline. */
body .nh-actionbar.is-running { border-top-color:#7fb2ee !important; box-shadow:0 -6px 18px rgba(30, 135, 253,.18) !important; }
/* Prioritizer: the bar's contents centred; no inner card any more. */
#pm-sticky.nh-actionbar .pm-bar-inner { background:transparent; border:0; box-shadow:none; padding:0; justify-content:center; max-width:1240px; margin:0 auto; }

/* Every action bar centres its contents (2026-09-25, Dan: one alignment everywhere; the Generator's was left-aligned). */
body .nh-actionbar { text-align:center; }
#gen-qp-dock.nh-actionbar #gen-qp-dock-slot, #gen-qp-dock.nh-actionbar #gen-qp-dock-row { max-width:760px; margin-left:auto !important; margin-right:auto !important; }
#gen-qp-dock.nh-actionbar .gen-quickpick-group { justify-content:center; }
#gen-qp-dock.nh-actionbar .gen-quickpick-label { text-align:center; }
#gen-qp-dock.nh-actionbar #gen-qp-dock-row { display:flex; justify-content:center; gap:10px; }
/* The comment field's own row (Session 28, Dan): wider than the Submit row, above it. */
#gen-qp-dock.nh-actionbar #gen-qp-comment-row { max-width:1100px; margin:6px auto 0; }
#gen-qp-dock.nh-actionbar #gen-qp-comment-row textarea { width:100%; box-sizing:border-box; display:block; }

/* Rife tab: the preset box starts tall, so Frequencies sits at the foot of the first screen (2026-09-25, Dan). */
#rife-paste { min-height:200px; }

/* Generator chat (2026-09-25, Dan): only the thread scrolls; the page stays put. While a chat is on, the
   "What is" card hides, and on a phone the steps above the chat fold away to give the thread room. */
body.gen-has-conv #generated-phrases-body { overflow-y:auto; -webkit-overflow-scrolling:touch; overscroll-behavior:contain; }
body.gen-has-conv .what-is-panel { display:none !important; }
@media (max-width:680px) { body.gen-has-conv .gen-prechat { display:none !important; } }
/* Quick Build: the results list is the part that scrolls. */
#qb-list.qb-scroll { overflow-y:auto; -webkit-overflow-scrolling:touch; overscroll-behavior:contain; }

/* Generator pick bar while the AI is thinking: one centred status line (2026-09-25, Dan: the bar stays). */
#gen-qp-dock.gen-qp-thinking #gen-qp-dock-slot, #gen-qp-dock.gen-qp-thinking #gen-qp-dock-top { display:none !important; }
.gen-thinking { font-size:15px; font-weight:600; color:#1066c4; padding:10px 0; display:inline-block; }
.gen-thinking-dots i { font-style:normal; animation:genDot 1.2s infinite; opacity:.2; }
.gen-thinking-dots i:nth-child(2) { animation-delay:.2s; } .gen-thinking-dots i:nth-child(3) { animation-delay:.4s; }
@keyframes genDot { 0%,100% { opacity:.2; } 40% { opacity:1; } }
@media (prefers-reduced-motion: reduce) { .gen-thinking-dots i { animation:none; opacity:1; } }
/* 28fs (256, with 251): ONE "AI is working" look — site-common.js nhAiBusy. The button keeps its own colours (never faded or
   greyed) and reads its busy label with the dots above; the line beside it is the light-blue busy box. */
.nh-ai-busy:not(#_#_#_) { pointer-events:none; cursor:progress; opacity:1; }
.nh-ai-busy-line:not(#_#_#_) { background:#e7f1ff; color:#0b3d7a; border-radius:8px; padding:6px 10px; font-style:normal; }
.pg-player .pl-wf-status #aw-status.nh-ai-busy-line { display:inline-block !important; }

/* Pick bar: each label sits on the same line as its options and wraps with them (2026-09-25, Dan: save rows). */
:where(.pg-generator) .gen-quickpick-set { display:flex; flex-wrap:wrap; align-items:center; gap:6px 8px; margin-bottom:6px; }
:where(.pg-generator) .gen-quickpick-set > .gen-quickpick-label { margin:0 4px 0 0 !important; }
:where(.pg-generator) .gen-quickpick-set > .gen-quickpick-group:not(.gen-quickpick-path) { display:contents; }
#gen-qp-dock.nh-actionbar .gen-quickpick-set { justify-content:center; }
#gen-qp-dock.gen-qp-thinking #gen-qp-dock-row > :not(#gen-qp-dock-text) { display:none !important; }

/* Generator pick bar, compact (2026-09-25, Dan, Test #42: "less tall") — smaller chips and padding; the picker and
   Submit / Reset sit side by side when there is room (Submit beside the a–d row), stacking only on a narrow screen. */
body #gen-qp-dock.nh-actionbar { padding:6px 12px calc(6px + env(safe-area-inset-bottom, 0px)) !important; }
#gen-qp-dock .gen-quickpick-chip { padding:3px 11px !important; min-height:30px !important; font-size:13px !important; }
#gen-qp-dock .gen-quickpick-set { margin-bottom:4px !important; gap:4px 6px !important; }
#gen-qp-dock .gen-quickpick-label { font-size:12.5px !important; }
#gen-qp-dock #gen-qp-dock-slot { display:inline-block; vertical-align:bottom; max-width:100%; margin:0 !important; }
#gen-qp-dock #gen-qp-dock-row { display:inline-flex !important; vertical-align:bottom; align-items:center; gap:8px; margin:0 0 4px 10px !important; max-width:none !important; }
#gen-qp-dock #gen-qp-dock-row #gen-conv-send-btn { flex:0 0 auto !important; width:auto !important; min-width:120px; padding:8px 18px !important; }
#gen-qp-dock #gen-qp-dock-row #reset-session-btn { flex:0 0 auto !important; padding:8px 14px !important; }
/* A free reply: one row — the box and Submit (and Reset). */
#gen-qp-dock.gen-qp-compose #gen-qp-dock-slot { display:none !important; }
#gen-qp-dock.gen-qp-compose #gen-qp-dock-row { display:flex !important; width:100%; max-width:900px; margin:0 auto !important; }
#gen-qp-dock.gen-qp-compose #gen-conv-input { height:44px; }
/* After finalize: one row of the page's own next steps. */
#gen-qp-dock.gen-qp-final #gen-qp-dock-slot { display:none !important; }
#gen-qp-dock.gen-qp-final #gen-qp-dock-row > :not(#gen-final-actions) { display:none !important; }
#gen-final-actions { display:inline-flex; gap:8px; flex-wrap:wrap; justify-content:center; }
#gen-qp-dock:not(.gen-qp-final) #gen-final-actions { display:none !important; }
@media (max-width:680px) { #gen-qp-dock #gen-qp-dock-row { margin:4px 0 0 0 !important; } }

/* Generator steps 1–2 on one row (2026-09-25, Dan). */
.gen-steprow { display:flex; flex-wrap:wrap; align-items:center; gap:8px 26px; margin:6px 0 10px; }
.gen-steprow > .gen-prechat { margin:0 !important; align-items:center !important; }
.gen-steprow > .gen-prechat > div { flex:0 1 auto !important; }

.gen-steprow .gen-step-label { white-space:nowrap; }   /* 28io: "Pick a Mode" on one line beside its tabs */

.gen-steprow > .section-subtitle { margin:0 !important; }
.gen-steprow #gen-status { margin:0 0 0 auto !important; }
/* Replies use nearly the full width, with tighter spacing, so a long reply fits on one screen (2026-09-25, Dan). */
:where(.pg-generator) .chat-turn.ai .chat-turn-stack { max-width:96%; }
:where(.pg-generator) .chat-bubble { padding:8px 13px; line-height:1.45; }
:where(.pg-generator) .chat-prose p { margin:0 0 6px; }
:where(.pg-generator) .chat-prose ol, :where(.pg-generator) .chat-prose ul { margin:3px 0 6px; }
:where(.pg-generator) .chat-prose li { margin:1px 0; }
/* A slimmer page header while a chat is on: the title stays, the subtitle goes. */
body.gen-has-conv .page-banner > span { display:none !important; }
body.gen-has-conv .page-banner { padding-top:10px !important; padding-bottom:10px !important; }

/* Generator step labels: one size for 1, 2 and 3 (2026-09-25, Dan). */
.gen-step-label { font-size:14px !important; font-weight:700 !important; color:#212529; }

/* After finalize the bar's three buttons are the only choices: no inline Continue chips as well (2026-09-25). */
body.gen-state-final #gen-conv-quickpick { display:none !important; }

/* Prioritizer to the mockup (2026-09-25, Dan). One top row: snapshot state · tabs · How it works. */
:where(.pg-prioritizer) #pm-tabs { display:inline-flex; margin:0 6px 0 10px; vertical-align:middle; }

/* Results: compact header, the reason under the phrase, ⋯ for Delete. */
:where(.pg-prioritizer) .run-more { margin-left:8px; border:1px solid #d6e4f5; background:#fff; color:#1066c4; border-radius:8px; padding:0 9px; font-size:16px; line-height:24px; cursor:pointer; }
:where(.pg-prioritizer) .row-why { font-size:12.5px; color:#6c757d; font-weight:400; margin-top:2px; line-height:1.35; }
:where(.pg-prioritizer) .results-table td { padding-top:6px; padding-bottom:6px; }
:where(.pg-prioritizer) .run-card [data-action="delete"] { display:none !important; }
/* The bar carries the run's actions on the Results tab; the run's own rows hide meanwhile. */
:where(.pg-prioritizer) .run-card.pm-proxied .action-row, :where(.pg-prioritizer) .run-card.pm-proxied .results-toolbar { display:none !important; }
#pm-rbar { display:inline-flex; align-items:center; gap:10px; flex-wrap:wrap; justify-content:center; }
#pm-rbar .pm-rbar-cut { display:inline-flex; align-items:center; gap:8px; font-size:13px; color:#52606d; }
#pm-rbar #pm-rbar-range { width:160px; }
#pm-rbar #pm-rbar-val { min-width:26px; text-align:center; color:#1066c4; }
#pm-rbar .pm-rbar-copy { position:relative; }
#pm-rbar .pm-rbar-copy summary { list-style:none; cursor:pointer; }
#pm-rbar .pm-rbar-copy summary::-webkit-details-marker { display:none; }
#pm-rbar .pm-rbar-copy-items { position:absolute; bottom:calc(100% + 6px); right:0; background:#fff; border:1px solid #d6e4f5; border-radius:10px; box-shadow:0 8px 24px rgba(16,24,40,.18); padding:6px; display:flex; flex-direction:column; gap:4px; min-width:190px; z-index:5; }
#pm-rbar .pm-rbar-copy-items button { text-align:left; background:#fff; border:0; padding:7px 10px; border-radius:6px; font-size:13px; color:#1f2933; cursor:pointer; }
#pm-rbar .pm-rbar-copy-items button:hover { background:#eef5fd; }
/* While working (prioritizing or on Results): the header subtitle and the "What is" card step aside. */
/* 28bf (Dan): the banner's subtitle stays on Results and while working — the hide rule removed. */
body.pm-on-results .what-is-panel, body.pm-busy .what-is-panel { display:none !important; }

/* Rife tab, same shape as the Phrases tab (2026-09-25, Dan: "needs rework"): no box around the box, a normal-size
   list, Frequencies hidden until asked for. */
:where(.pg-prioritizer) #rife-preset-block { margin:0 !important; padding:0 !important; background:none !important; border:0 !important; border-radius:0 !important; }
#rife-score-card:not(.pm-show-freqs) #rife-freq-step, #rife-score-card:not(.pm-show-freqs) #rife-freq-block { display:none !important; }

#gen-final-actions .fa-short { display:none; }

/* Phone (2026-09-25, Dan's iPhone screenshots): the chat gets the screen. */
@media (max-width: 680px) {
  body.gen-has-conv .pg-generator .page-banner, body.gen-has-conv .page-banner { display:none !important; }
  body.gen-has-conv #gen-status { display:none !important; }
  /* pick bar: three rows — numbers + Select all / Choose for me · a–d in one row · Submit (+ Comment) and Reset */
  #gen-qp-dock .gen-quickpick-break { display:none !important; }
  #gen-qp-dock .gen-quickpick-group.gen-quickpick-path { display:grid !important; grid-template-columns:repeat(4, auto) !important; gap:5px !important; }
  #gen-qp-dock .gen-quickpick-chip { padding:3px 9px !important; min-height:30px !important; font-size:13px !important; }
  #gen-qp-dock .gen-quickpick-label { display:none !important; }
  #gen-qp-dock #gen-qp-dock-row #reset-session-btn { padding:7px 10px !important; font-size:13px !important; }
  #gen-final-actions .fa-long { display:none; }
  #gen-final-actions .fa-short { display:inline; }
  #gen-final-actions { flex-wrap:wrap; gap:6px; }   /* 28jf: five actions — two rows on a phone */
  #gen-final-actions .nh-btn { padding:8px 11px !important; font-size:13.5px !important; }
}
/* A suggestion already added (✓) can't be tapped again. */
.pf-companion[disabled] { pointer-events:none; }
@media (max-width: 680px) { #gen-qp-dock .gen-quickpick-path .gen-quickpick-chip { white-space:nowrap; } }

/* The Generator's "N phrases generated · N accepted" pill counts the chat: it shows on the Guided tab only (Dan, 2026-09-26). */
body.nh-mode-quick #gen-status, body.nh-mode-recent #gen-status { display:none !important; }

/* The Waveforms panel lives under the playlist now (26k): no panel minimum height, no inner frame. */
:where(.pg-player) .pl-wf-panel { min-height:0 !important; }

/* Player · Waveforms line under the Phrase Playlist (Session 30): same pattern as the ✦ Suggest phrases line —
   the ✦ trigger as the light outline button, the summary in body text, Edit as a small link. Shown only once the
   playlist has phrases (JS toggles [hidden]). All styling here, none inline (ways-of-working). */
:where(.pg-player) .pl-wf { margin: 12px 0 0; }
:where(.pg-player) .pl-wf-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
:where(.pg-player) .pl-wf-summary { font-size: 12.5px; color: #495057; }
:where(.pg-player) .pl-wf-summary .pl-wf-muted { color: #6c757d; }
:where(.pg-player) .pl-wf-summary .pl-wf-none { color: #1a3b63; border-left: 4px solid #ffc107;}   /* yellow family: "not yet", not an error */
:where(.pg-player) .pl-wf-summary .pl-wf-ai { color: #1066c4; }
:where(.pg-player) .pl-wf-toggle { font-size: 12px; white-space: nowrap; }
:where(.pg-player) .pl-wf-status { margin-top: 4px; font-size: 12px; color: #6c757d; font-style: italic; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px; }
.pg-player .pl-wf-status #aw-status { display: inline !important; flex: 1 1 auto; min-width: 0; }
:where(.pg-player) .pl-wf-body { margin-top: 8px; padding: 10px 12px; border: 1px solid #e6ebf1; border-radius: 10px; background: #f8fafc; }
.pg-player .pl-wf-intro { display: flex !important; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 12.5px; color: #6c757d; margin: 0 0 8px; }
.pg-player .pl-wf-intro .section-subtitle { display: inline !important; margin: 0 !important; font-size: 12.5px; }
.pg-player .pl-wf-intro .panel-intro-actions { display: inline !important; flex: 0 0 auto !important; width: auto !important; margin: 0; }
.pg-player .pl-wf-intro .panel-intro-actions a { margin-left: 2px; }
.pg-player .pl-wf-body { margin-top: 8px; border: none; padding: 0; background: transparent; }
.pg-player .pl-wf-grid label { font-weight: 400; }
.pg-player .pl-wf-grid label:has(input:checked) { font-weight: 600; }
:where(.pg-player) .pl-wf-intro .nh-link { font-size: 12.5px; }
:where(.pg-player) #aw-link.nh-btn { min-height: 34px; font-size: 13px; text-decoration: none; margin: 0; }

/* Notices, site-wide (Session 30, Dan): yellow for "not yet / nothing to do / skipped", red only for a real failure. */
.nh-inline-warn { background: #fff; border-left: 4px solid #ffc107; padding: 10px 12px; border-radius: 6px; font-size: 13px; color: #1a3b63; margin-top: 12px; line-height: 1.5; }

:where(.pg-player) #aw-status.is-error { color: #1a3b63; border-left: 4px solid #ffc107;}
:where(.pg-player) #aw-status.is-ok { color: #0f5132; }
:where(.pg-player) #aw-status.is-warn { color: #1a3b63; border-left: 4px solid #ffc107;}
:where(.pg-player) #aw-status.is-muted { color: #6c757d; }
:where(.pg-player) #pl-sg-note.is-error { color: #1a3b63; border-left: 4px solid #ffc107;}
:where(.pg-player) .pl-wf-panel { border: none !important; box-shadow: none !important; padding: 0 !important; margin: 0 !important; background: transparent !important; min-height: 0 !important; }
:where(.pg-player) .pl-wf-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px 8px; margin: 0; }
:where(.pg-player) .pl-wf-frame { border: none !important; padding: 0 !important; background: transparent !important; }
.nh-win-prose { font-size: 14px; line-height: 1.55; }
.nh-win-prose p { margin: 0 0 10px; }
.nh-win-prose .nh-win-prose-last { margin: 0; }

/* Player · the Phrase Playlist frame (27ah, Dan's mock-up): 🌀 note at the top (only with a marked phrase), the box,
   a bottom bar with "✦ Suggest more phrases", and the suggestion strip under the bar — one bordered frame. */
:where(.pg-player) .pl-frame { border: 1px solid #b8d4f0; border-radius: 6px; background: #f7f9fb; overflow: hidden; }
:where(.pg-player) .pl-frame-top { padding: 5px 10px; font-size: 12.5px; line-height: 1.4; color: #0b3d7a; background: #e7f1ff; border-bottom: 1px solid #dbe6f5; }
:where(.pg-player) .pl-frame-top[hidden] { display: none; }
:where(.pg-player) .pl-box { display: block; width: 100%; box-sizing: border-box; min-height: 200px; resize: vertical; background: #f7f9fb; border: none; border-radius: 0; margin: 0; }
:where(.pg-player) .pl-box:focus { outline: none; box-shadow: inset 0 0 0 2px #b8d4f0; }
:where(.pg-player) .pl-sg { margin: 0; }
:where(.pg-player) .pl-sg[hidden] { display: none; }
:where(.pg-player) .pl-frame-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 6px 10px; min-height: 20px; border-top: 1px solid #dbe6f5; background: #f1f6ff; }
:where(.pg-player) .pl-sg-link { font-size: 13px; font-weight: 600; color: #1674dc; text-decoration: none; white-space: nowrap; margin-left: auto; }
:where(.pg-player) .pl-sg-note { font-size: 12px; color: #6c757d; min-width: 0; }
:where(.pg-player) .pl-sg-note:empty { display: none; }
:where(.pg-player) .pl-sg-note.is-warn { color: #1a3b63; border-left: 4px solid #ffc107;}
:where(.pg-player) .pl-sg-strip { padding: 8px 10px 10px; background: #fff; border-top: 1px solid #dbe6f5; }
:where(.pg-player) .pl-sg-strip[hidden] { display: none; }
:where(.pg-player) .pl-sg-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0; }
:where(.pg-player) .pl-sg-chip { border: 1px solid #b8d4f0; border-radius: 999px; padding: 5px 10px; font-size: 12.5px; line-height: 1.3; cursor: pointer; text-align: left; background: #fff; color: #0b4f9f; font-weight: 400; }
.pg-player button.pl-sg-chip:hover:not(:disabled) { background: #f1f6ff; border-color: #1066c4; color: #0b4f9f; }   /* 28fp (Dan: "not great mouseover"): the site's button:hover:not(:disabled) (dark blue) out-ranked the :where() rule — the same fix as .pl-sg-x */
:where(.pg-player) .pl-sg-chip small { color: #6c757d; margin-left: 4px; }
:where(.pg-player) .pl-sg-all { color: #1674dc; font-weight: 600; text-decoration: none; font-size: 12.5px; margin: 0 0 0 4px; white-space: nowrap; display: inline-flex; align-items: center; min-height: 36px; padding: 0 6px; }   /* 28jc: a 36 px target of its own in the chips row (check 25 reached only 32 — the grown-padding rule's negative margin put it under the chips above) */
:where(.pg-player) .pl-sg-why { font-size: 12px; color: #6c757d; margin: 6px 0 0; }
:where(.pg-player) .pl-sg-why:empty { display: none; }
:where(.pg-player) .pl-wf-tail { flex: 1 1 260px; min-width: 0; font-size: 12.5px; line-height: 1.5; }
:where(.pg-player) .pl-wf-sep { color: #6c757d; font-size: 12.5px; }
:where(.pg-player) .pl-wf-link { white-space: nowrap; }
:where(.pg-player) .pl-wf-link[hidden] { display: none; }
:where(.pg-player) .pl-wf-why { font-size: 12px; white-space: nowrap; }

/* ---- The intro strip (28al, Dan's mock-up): one slim card for every level; three live steps as pills; More ▾ unfolds
   the old welcome card's content. Replaces .nh-welcome and the Player's .setup-strip. ---- */
:where(.pg-player) .nh-intro { background: #fff; border: 1px solid #cfe0f6; border-left: 5px solid #1066c4; border-radius: 12px; padding: 10px 16px; margin: 0 0 14px; }
:where(.pg-player) .nh-intro[hidden] { display: none; }
:where(.pg-player) .nh-intro-row { display: grid; grid-template-columns: auto 1fr auto; gap: 6px 18px; align-items: center; }
:where(.pg-player) .nh-intro-t { font-size: 13.5px; color: #343a40; white-space: nowrap; }
:where(.pg-player) .nh-intro-t b { color: #0b3d7a; }
:where(.pg-player) .nh-intro-steps { display: flex; gap: 8px; flex-wrap: wrap; }
:where(.pg-player) .nh-intro-step { display: inline-flex; align-items: center; gap: 6px; background: #f1f6ff; border: 1px solid #dbe6f5; border-radius: 999px; padding: 4px 11px 4px 5px; font-size: 12.5px; font-weight: 600; color: #0b3d7a; white-space: nowrap; cursor: pointer; font-family: inherit; line-height: 1.3; margin: 0; }
:where(.pg-player) .nh-intro-step:hover { border-color: #1066c4; background: #e7f1ff; }
:where(.pg-player) .nh-intro-step small { font-weight: 400; color: #6c757d; margin-left: 2px; font-size: 11.5px; }
:where(.pg-player) .nh-intro-n { width: 18px; height: 18px; border-radius: 50%; background: #1066c4; color: #fff; font-size: 11px; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
:where(.pg-player) .nh-intro-step.is-done { background: #eef8f1; border-color: #cfe9d8; color: #1e7b4a; }
:where(.pg-player) .nh-intro-step.is-done .nh-intro-n { background: #1e7b4a; }
:where(.pg-player) .nh-intro-links { display: flex; gap: 14px; align-items: center; font-size: 13px; font-weight: 600; white-space: nowrap; }
:where(.pg-player) .nh-intro-x { background: none; border: none; color: #8a94a0; font-size: 20px; line-height: 1; padding: 0 2px; cursor: pointer; font-family: inherit; }
:where(.pg-player) .nh-intro-x:hover { color: #1066c4; background: none; }
:where(.pg-player) .nh-intro-more { border-top: 1px solid #eef1f5; margin-top: 10px; padding-top: 8px; font-size: 13px; line-height: 1.45; color: #343a40; }
:where(.pg-player) .nh-intro-more[hidden] { display: none; }
:where(.pg-player) .nh-intro-more p { margin: 0 0 8px; }
:where(.pg-player) .nh-intro-doors { display: flex; gap: 16px; flex-wrap: wrap; font-weight: 600; font-size: 13px; margin: 0 0 8px; }
:where(.pg-player) .nh-intro-level { color: #6c757d; font-size: 12.5px; margin: 0; }
@media (max-width: 680px) {
  :where(.pg-player) .nh-intro { padding: 10px 12px; }
  :where(.pg-player) .nh-intro-row { grid-template-columns: 1fr auto; }
  :where(.pg-player) .nh-intro-t { white-space: normal; grid-column: 1; }
  :where(.pg-player) .nh-intro-links { grid-column: 2; grid-row: 1; }
  :where(.pg-player) .nh-intro-steps { grid-column: 1 / -1; }
  /* 28ha (Dan: "mobile only shows one pill"): every step is a pill on a phone too, wrapped — "More" is gone (the modal), so
     there is nothing for the hidden steps to be under. (Was: the next open step only, 2026-09-28; text links 28fk.) */
  :where(.pg-player) .nh-intro-steps { flex-wrap: wrap; }
  :where(.pg-player) .nh-intro-steplinks { display: none !important; }
}

/* 28fr (234, 140): between a phone and a laptop (681–900 px) the strip's title may wrap and its pills wrap under each other,
   so the More / × links never run past the card (a shared-link guest's strip scrolled 8 px sideways at 700 px). */
@media (min-width: 681px) and (max-width: 900px) {
  :where(.pg-player) .nh-intro-row { grid-template-columns: minmax(120px, max-content) minmax(0, 1fr) auto; }
  :where(.pg-player) .nh-intro-t { white-space: normal; }
  :where(.pg-player) .nh-intro-steps { flex-wrap: wrap; min-width: 0; }
}
/* ---- Playlist tabs — Phrases · Rife (28al) ---- */
:where(.pg-player) .pl-tabs { display: flex; gap: 6px; margin: 4px 0 8px; border-bottom: 1px solid #dbe6f5; }
:where(.pg-player) .pl-tab { background: transparent; border: 1px solid transparent; border-bottom: none; border-radius: 8px 8px 0 0; padding: 8px 14px; font-size: 13.5px; font-weight: 600; color: #5a6472; cursor: pointer; font-family: inherit; margin: 0; line-height: 1.3; }
:where(.pg-player) .pl-tab:hover { color: #1066c4; background: transparent; }
:where(.pg-player) .pl-tab.is-on { background: #fff; color: #1066c4; border-color: #dbe6f5; margin-bottom: -1px; }
:where(.pg-player) .pl-tab-count { display: inline-block; min-width: 18px; padding: 0 6px; border-radius: 999px; background: #e7f1ff; color: #1066c4; font-size: 11.5px; line-height: 18px; text-align: center; margin-left: 2px; }
:where(.pg-player) .pl-tab-count[hidden] { display: none; }
:where(.pg-player) .pl-tab.is-on .pl-tab-count { background: #1066c4; color: #fff; }
:where(.pg-player) .pl-panel[hidden] { display: none !important; }

:where(.pg-player) .controls-tabs[hidden] { display: none !important; }   /* 28al/28an: no tab bar on the Setup card */

/* ---- Save and Copy (28am): the bar under the Playlist, and the window's rows ---- */
:where(.pg-player) .nh-bar { padding: 10px 16px !important; }   /* Save and Copy · History & reports: one shape, no accent border (Dan, 2026-09-28) */

:where(.pg-player) .nh-bar .nh-btn { margin: 0; }
.snap-page { max-width: 640px; margin: 24px auto; padding: 0 12px; }
.snap-brand { font-size: 13px; font-weight: 700; color: #0b3d7a; margin: 0 0 10px; display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.snap-role { font-weight: 600; font-size: 11.5px; color: #1066c4; background: #e7f1ff; border-radius: 999px; padding: 2px 9px; }
.snap-client-card { padding: 18px 20px !important; }
.snap-client-title { font-size: 19px; font-weight: 700; margin: 0 0 6px; }
.snap-client-p { font-size: 14px; color: #495057; line-height: 1.5; margin: 0 0 12px; }
.snap-client-small { font-size: 12.5px; color: #6c757d; margin-top: 10px; }

.snap-client-foot { font-size: 12px; color: #6c757d; margin: 12px 4px 0; line-height: 1.5; }
.snap-frame { position: fixed; inset: 0; z-index: 100000; background: transparent; }
.snap-frame-iframe { width: 100%; height: 100%; border: 0; background: transparent; }
.snap-no-admin .snap-admin-only { display: none !important; }   /* readings and Use-in-AI: ?z=1 only (Dan, 2026-09-28) */
.snap-reset-btn { display: none; }   /* shown by refresh() only on the saved view (28bc) */
.snap-pills { display: inline-flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.snap-slot-btn { border: 1px solid #1066c4; color: #1066c4; background: #fff; border-radius: 999px; padding: 4px 12px; font-size: 12.5px; font-weight: 600; cursor: pointer; font-family: inherit; line-height: 1.3; margin: 0; }
/* 28du (Dan's iPad screenshot: "Request a client snapshot" turned into a blank blue pill under the pointer): a page's
   own button:hover fill won over this one and the blue text vanished on the blue. Pin both colours. */
.snap-slot-btn:hover, .snap-slot-btn:focus-visible, .snap-slot-btn:active { background: #f1f6ff !important; color: #1066c4 !important; border-color: #1066c4 !important; }
.snap-slot-btn.snap-slot-link, .snap-slot-btn.snap-slot-link:hover, .snap-slot-btn.snap-slot-link:focus-visible, .snap-slot-btn.snap-slot-link:active { border-color: transparent !important; background: transparent !important; font-weight: 600; padding: 4px 6px; }   /* 28iq (item 11): "Request a client snapshot" as a text link while no client snapshot is loaded */
.snap-pill, .snap-pill-l { cursor: pointer; }   /* 28fs (254): the whole pill takes the tap */
.snap-pill-x { width: 18px; height: 18px; border-radius: 50%; border: 1px solid #cfd8e3; background: #fff; color: #8a94a0; font-size: 12px; line-height: 1; display: inline-flex; align-items: center; justify-content: center; padding: 0; margin: 0 0 0 4px; cursor: pointer; font-family: inherit; }
.snap-pill-x:hover { color: #1066c4; border-color: #1066c4; background: #fff; }
.snap-pill-r { font-size: 13px; margin-left: 6px; }   /* 28gg: ↻ take a new snapshot (My snapshot only), beside the × */
.snap-pill-r + .snap-pill-x { margin-left: 3px; }
.snap-pill.is-on, .snap-pill.is-on .snap-pill-l { cursor: default; }   /* 28gg: the pill in use has nothing to switch to */

.snap-client-btns { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.snap-client-btns .nh-btn { margin: 0; }
.snap-client-after { margin-top: 10px; }
.snap-pill { display: inline-flex; align-items: center; gap: 4px; border: 1px solid #cfd8e3; border-radius: 999px; padding: 3px 5px 3px 11px; font-size: 12.5px; font-weight: 600; color: #5a6472; background: #fff; cursor: pointer; font-family: inherit; line-height: 1.3; margin: 0; }
.snap-pill small { font-weight: 400; color: #6c757d; margin-left: 5px; font-size: 11.5px; }
.snap-pill.is-on { background: #e7f1ff; color: #1066c4; border-color: #1066c4; }
.snap-pill.is-on small.is-ok { color: #1e7b4a; } .snap-pill small.is-warn { color: #b45309; } .snap-pill small.is-stale { color: #1a3b63; border-left: 4px solid #ffc107;}
.snap-pill:hover { border-color: #1066c4; background: #f1f6ff; }

.snap-foot--stacked { flex-direction: column; align-items: flex-end; gap: 6px; }
.snap-foot--stacked .snap-foot-btns { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.snap-note--under { font-size: 12px; }

.snap-request-lbl { display: block; font-size: 12.5px; font-weight: 600; color: #343a40; margin: 0 0 8px; }
.snap-request-lbl small { font-weight: 400; color: #6c757d; margin-left: 4px; }
.snap-request-input { display: block; width: 100%; box-sizing: border-box; margin-top: 4px; padding: 7px 9px; border: 1px solid #b8d4f0; border-radius: 6px; font: inherit; font-size: 13px; }

.nh-link-copy-input { width: 100%; box-sizing: border-box; padding: 9px 10px; border: 1px solid #b8d4f0; border-radius: 6px; font: inherit; font-size: 13px; }
.cs-sec { margin: 12px 0 6px; font-size: 11.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: #6c757d; }
.cs-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 0 0 4px; }
.cs-row:has(> :nth-child(3)) { grid-template-columns: 1fr 1fr 1fr; }
.cs-act { display: block; text-align: left; padding: 10px 12px !important; margin: 0; white-space: normal; line-height: 1.35; border-radius: 10px !important; min-height: 0; }
.cs-act-t { display: block; font-weight: 700; font-size: 13.5px; }
.cs-act-d { display: block; font-weight: 400; font-size: 12px; color: #5a6472; margin-top: 2px; }
.cs-act:disabled { opacity: .5; }
/* 28cv: four groups (Keep here · Save as a file · Send a link · Share with the Community) in a 2×2, copy actions as links under them. */
.cs-row--4, .cs-row--4:has(> :nth-child(3)) { grid-template-columns: 1fr 1fr; margin-top: 6px; }
.cs-links { margin: 10px 0 4px; font-size: 13px; color: #6c757d; }
.cs-link--off { opacity: .45; pointer-events: none; }
@media (max-width: 560px) { .cs-row, .cs-row:has(> :nth-child(3)), .cs-row--4 { grid-template-columns: 1fr; } }

/* Tree picker leaf rows (Session 30): the row template moved out of inline style. */
.tp-item.tpk-leafrow { font-size: 13px; align-items: baseline; }
.tp-item.tpk-pad-58 { padding-left: 58px; }
.tp-item.tpk-pad-30 { padding-left: 30px; }
.tpk-desc { color: #8a94a0; font-weight: 400; font-size: 12px; }
.tpk-leaftext { min-width: 0; }

/* Prioritizer · Browse phrases (Session 30, 27t): four plain buttons, one row. */
:where(.pg-prioritizer) .pm-browse { padding: 0; margin: 0 0 14px; background: transparent; border: none; box-shadow: none; }
:where(.pg-prioritizer) .pm-browse-row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin: 10px 0 12px; }   /* 28bd: air under the source buttons (Dan) */
:where(.pg-prioritizer) .pm-browse-info { margin-left: auto; }
/* 28jb (531 item 5): on a phone the (i) dots sat alone on their own line — the browse (i) follows the last pill; the snapshot (i)
   (a Guide jump whose title tooltip a touch screen never shows) is off on a phone; the Generator's mode (i) is joined to its last word with a no-break space. */
@media (max-width: 600px) { :where(.pg-prioritizer) .pm-browse-info { margin-left: 4px; } :where(.pg-prioritizer) .pm-snap-info { display: none; } }
:where(.pg-prioritizer) .pm-search { width: 100%; box-sizing: border-box; margin: 0; padding: 9px 12px; font-size: 14px; border: 1px solid #ced4da; border-radius: 8px; }

/* ---- Access-level mock-up + first-visit welcome (Session 30, 27ab) ---- */
.nh-level-pick { margin-left: auto; font-size: 12px; color: #6c757d; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.nh-level-pick select { font-size: 12px; padding: 2px 6px; border: 1px solid #ced4da; border-radius: 6px; background: #fff; color: #212529; min-width: 8.5em; }
@media (max-width: 480px) { .nh-level-pick { flex-basis: 100%; margin-left: 0; justify-content: flex-end; } }

#phrase[readonly] { background: #f8f9fa; color: #495057; }
.nh-gated { pointer-events: none; }
.nh-gated > :not(.nh-gate-note) { opacity: .45; filter: grayscale(1); }
.nh-gate-note { font-size: 12px; color: #1066c4; margin: 4px 0 8px; }
.nh-gated > .nh-gate-note { display: block; margin: 6px 0 0; font-size: 11.5px; color: #0b3d7a; opacity: 1; filter: none; }
:where(.pg-player) .bys-tile.nh-gated > .bys-s { display: none; }   /* a greyed tile shows its title and the note only (Dan, 2026-09-28) */
.bys-tile.nh-gated { background: #6c757d; }
.nh-gate-note--page { font-size: 13px; background: #e7f1ff; border-radius: 8px; padding: 9px 12px; margin: 0 0 12px; }
.nh-gate-page { display: none; }

.nh-win-head-link { color: #fff; text-decoration: underline; font-weight: 600; white-space: nowrap; }
.pg-player #aw-link.nh-btn { margin-left: 0 !important; }
:where(.pg-player) .pl-wf-row, :where(.pg-player) .pl-wf-status, :where(.pg-player) .pl-sg { padding-left: 0; margin-left: 0; }
.tp-views { display: flex; gap: 6px; margin-top: 8px; }
.tp-view { background: rgba(255,255,255,.18); color: #fff; border: 1px solid rgba(255,255,255,.45); border-radius: 999px; padding: 4px 12px; font-size: 12.5px; font-weight: 600; cursor: pointer; }
.tp-view.is-active { background: #fff; color: #1066c4; border-color: #fff; }
.cp-manage { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; padding: 8px 18px; background: #f6f9fe; border-bottom: 1px solid #dbe6f5; font-size: 13px; }
.cp-manage-meta { color: #6c757d; }
.ref-cell--b { font-weight: 600; }   /* Guide rules table, bold first cell (27aj) */
.guide-tab1--plain { padding: 9px 16px; border: 1px solid transparent; border-radius: 8px; box-shadow: none; cursor: pointer; font-weight: 600; font-size: 13.5px; white-space: nowrap; background: transparent; color: #5a6472; }   /* FAQ top-level tab (27ai); guide.js restyles on open */
.faq-item { border-bottom: 1px solid #e6eaf0; padding: 6px 0; }
.faq-item summary { cursor: pointer; font-weight: 600; font-size: 14px; color: #212529; padding: 4px 0; }
.faq-item p { margin: 4px 0 8px; font-size: 13.5px; color: #495057; line-height: 1.55; }

.faq-h { margin: 0 0 6px; }
.faq-sub { margin: 0 0 12px; }
.gen-suggest-reads { font-size: 12px; color: #6c757d; margin-left: 8px; }
.snap-sub.snap-warn { color: #1a3b63; background: #fff; border-radius: 6px; padding: 4px 8px; border-left: 4px solid #ffc107;}

/* 28be — quiet "edits apply next Play" line under the Playlist tabs (replaces the pop-up notice) */
:where(.pg-player) .pl-edit-note { margin: 6px 0 0; font-size: 12.5px; color: #5f6b7a; }

/* 28be — My Sessions window: the header already says it (no repeated sentence), no card inside the window */

/* 28be — Prioritizer: the tabs are step 1, the State (snapshot) row step 2 */
/* 28bg (Dan: "match design exactly to the same row on the Generator") — mirrors .gen-steprow / .gen-prechat */
:where(.pg-prioritizer) .pm-steprow { display:flex; flex-wrap:wrap; align-items:center; gap:8px 26px; margin:6px 0 10px; }
:where(.pg-prioritizer) .pm-pre { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.pm-steprow .pm-step-num { width:20px !important; height:20px !important; margin:0 !important; font-size:12px; }
.pm-steprow .pm-step-label { font-size:14px !important; font-weight:700 !important; color:#212529; }
.pm-steprow #pm-tabs { margin:0 !important; }
.pm-steprow #pm-tabs button.pm-tab { padding:6px 18px !important; line-height:normal !important; }

/* gated tiles: grey fill (28bf) */
:where(.pg-player) .bys-tile.nh-gated { position:relative; opacity:.55; pointer-events:auto; cursor:pointer; }   /* 28bl: blue, dimmed, locked (was grey) */
:where(.pg-player) .bys-tile.nh-gated > :not(.nh-gate-note) { opacity:1; filter:none; }
:where(.pg-player) .bys-tile.nh-gated > .nh-gate-note { color:#fff; font-weight:600; font-size:12px; margin:2px 0 0; }
:where(.pg-player) .bys-tile.nh-gated::after { content:""; position:absolute; top:10px; right:10px; width:14px; height:14px;
  background:no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='11' width='16' height='10' rx='2'/%3E%3Cpath d='M8 11V7a4 4 0 0 1 8 0v4'/%3E%3C/svg%3E"); }
/* 28bl: "More ways to build" — the separator above the Generator and Prioritizer tiles */
:where(.pg-player) .bys-sep { grid-column:1 / -1; display:flex; align-items:center; gap:10px; margin:6px 0 0; color:#5f6b7a; font-size:11.5px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; }
:where(.pg-player) .bys-sep::after { content:""; flex:1; height:1px; background:#dfe5ee; }   /* 28dc (Dan): the label sits at the left, one rule to its right — it was centred between two */
   /* 28cv: above the search box */

/* 28be — value proposition, headline 1 for now (Dan, 2026-09-28: "ok for now, keep open") */

/* 28bf (Dan): the three intro steps stay on one row on desktop at every level */

/* 28bf (Dan): the three intro steps stay on one row on desktop at every level */
@media (min-width: 900px) {
  :where(.pg-player) .nh-intro-steps { flex-wrap: nowrap; min-width: 0; }
  :where(.pg-player) .nh-intro-step { min-width: 0; flex: 0 1 auto; }
  :where(.pg-player) .nh-intro-step small { overflow: hidden; text-overflow: ellipsis; }
}

/* 28bl (Dan): Prioritizer steps 1–2 inside the bordered card, like the Generator */
:where(.pg-prioritizer) .pm-steprow.pm-steprow--in { margin:0 0 12px; }
:where(.pg-prioritizer) .pm-steprow-home { display:none !important; }

/* ---- 28bo: guided key setup, membership key (Setup), Plans window (site-common.js nhOpenPlans) ---- */

.nh-member-msg { margin:8px 0 0; font-size:13.5px; color:#3b4652; }
.nh-member-msg.is-warn, .nh-member-msg.is-limit { background:#fff; border-left:4px solid #ffc107; color:#1a3b63; padding:8px 12px; border-radius:6px; }
.nh-member-msg.is-ok { color:#0f5132; }

.nh-member-card { background:#f4f8fd; border:1px solid #d6e4f5; border-radius:10px; padding:10px 14px; font-size:14px; line-height:1.5; }
.nh-member-plan, .nh-member-seats { color:#5a6472; font-size:13px; }
.nh-member-status:empty { display:none; }
.nh-member-status { margin-top:6px; background:#fff; border-left:4px solid #ffc107; color:#1a3b63; padding:6px 10px; border-radius:6px; font-size:13px; }
.nh-plans { display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:10px; margin:12px 0; }
.nh-plan { border:1px solid #dfe5ee; border-radius:10px; padding:12px; display:flex; flex-direction:column; gap:6px; background:#fbfcfe; }
.nh-plan.is-pick { border:2px solid #1066c4; background:#f4f8fd; }
.nh-plan-name { font-weight:700; font-size:15px; }
.nh-plan-price { font-size:14px; color:#1066c4; font-weight:700; }
.nh-plan ul { margin:0; padding-left:18px; font-size:13px; line-height:1.5; color:#3b4652; flex:1; }
.nh-plan-now, .nh-plan-soon { font-size:12.5px; color:#5a6472; font-weight:600; }
.nh-plans-draft { background:#fff; border-left:4px solid #ffc107; color:#1a3b63; padding:7px 12px; border-radius:6px; font-size:13px; margin:12px 0 0; }
.nh-plans-note { font-size:13px; color:#3b4652; line-height:1.5; margin:8px 0; }
.nh-plans-legal { font-size:12px; color:#5a6472; margin:8px 0 6px; }
@media (max-width:760px) { .nh-plans { grid-template-columns:repeat(2, minmax(0,1fr)); } }
@media (max-width:420px) { .nh-plans { grid-template-columns:1fr; } }
/* Legal pages (terms / privacy / refunds — drafts, 28bo) */
.nh-legal { max-width:760px; margin:0 auto; font-size:15px; line-height:1.6; color:#1f2937; padding:4px 0 10px; }
.nh-legal h2 { font-size:17px; margin:22px 0 6px; color:#0b3f82; }
.nh-legal ul { padding-left:20px; }
.nh-legal a { color:#1066c4; }
.nh-sitemap { list-style:none; padding:0; margin:8px 0 0; }   /* 28fm (201): the Site map page */
.nh-sitemap li { padding:10px 0; border-top:1px solid #e6ebf1; }
.nh-sitemap li:first-child { border-top:none; }
.nh-sitemap a { font-weight:600; text-decoration:none; display:inline-block; padding:2px 0; }
.nh-sitemap a:hover { text-decoration:underline; }
.nh-sitemap span { display:block; font-size:14px; color:#5a6472; }
/* 28fn (220): My Phrase Presets — several files, a drop zone, the storage line (in the existing window, under its search) */
.cp-files { display:block; }
.cp-files-h { font-size:12px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:#6c757d; margin-bottom:2px; }
.cp-file { display:flex; align-items:center; gap:10px; padding:7px 0; border-top:1px solid #eef1f5; }
.pl-dupes { color:#6c757d; margin-left:14px; }   /* 28fs (258): repeated lines in the Phrases box — the muted hint text with its link (Dan: "no gold words, stick to current styles") */
.pl-dupes .nh-link { margin-left:2px; }
   /* 28fs (258): the set's running count beside Then */
/* 28gh (315b) / 28gj (318, Dan: "B is fine"): the Generator's fold while a Guided chat runs, its slim line, the Layer menu */
body.gen-folded:not(.nh-mode-quick):not(.nh-mode-recent) .page-banner,
body.gen-folded:not(.nh-mode-quick):not(.nh-mode-recent) .gen-prechat,
body.gen-folded:not(.nh-mode-quick):not(.nh-mode-recent) #gen-g-title-row,
body.gen-folded:not(.nh-mode-quick):not(.nh-mode-recent) .gen-step3-badge,
body.gen-folded:not(.nh-mode-quick):not(.nh-mode-recent) #reset-session-btn,
body.gen-folded:not(.nh-mode-quick):not(.nh-mode-recent) .gen-qp-count,
body.gen-folded:not(.nh-mode-quick):not(.nh-mode-recent) #gen-qp-dock .gen-quickpick-label { display:none !important; }
/* 28gq (Dan, phone markup: "there is white space that can be used"): the two emptied rows above the chat kept their margins (18px) while folded. */
body.gen-folded:not(.nh-mode-quick):not(.nh-mode-recent) .pf-chat-col > .section > .section-header, body.gen-folded:not(.nh-mode-quick):not(.nh-mode-recent) .pf-chat-col > .section > .gen-steprow { margin:0 !important; }
@media (max-width: 680px) { body.gen-folded:not(.nh-mode-quick):not(.nh-mode-recent) .pf-chat-col > .section { padding-top:8px; } }
.gen-chat-slim[hidden] { display:none; }   /* 28iq (489): the open header used to keep the slim line under it — display:flex beat hidden */
.gen-chat-slim { display:flex; flex-wrap:wrap; align-items:center; gap:4px 6px; font-size:14px; color:#495057; padding:0 0 6px; margin:0 0 8px; border-bottom:1px solid #eef1f5; }
.gen-slim-btn { background:none; border:0; border-radius:6px; padding:6px 4px; color:#1674dc; font:inherit; font-size:14px; font-weight:600; cursor:pointer; min-height:36px; }
.gen-slim-btn.gen-slim-snap { color:#495057; font-weight:400; }
.gen-slim-ok { color:#2b8a3e; font-weight:700; }
.gen-slim-sep { color:#adb5bd; }
.gen-slim-count { margin-left:auto; color:#6c757d; font-size:13px; white-space:nowrap; }
/* 28gy (359): the Layer pill wears the plain chip's border, background and colour — one outline treatment beside the filled Next layer. */
.gen-layer-btn { border:1px solid #b9c6ee; background:#fff; color:#2a3a6a; border-radius:16px; padding:6px 12px; font:inherit; font-size:13px; font-weight:600; line-height:1.2; cursor:pointer; min-height:34px; white-space:nowrap; }
.gen-layer-anchor { position:relative; }
.gen-layer-pop { position:absolute; bottom:calc(100% + 6px); left:0; z-index:9700; background:#fff; border:1px solid #dfe5ee; border-radius:10px; box-shadow:0 8px 24px rgba(16,24,40,.18); padding:6px; display:grid; gap:2px; min-width:260px; max-width:calc(100vw - 16px); max-height:60vh; overflow:auto; }
.gen-layer-pop-h { color:#6c757d; font-size:12.5px; padding:4px 10px; }
.gen-layer-item { text-align:left; background:none; border:0; border-radius:6px; padding:8px 10px; color:#1a5fb4; font:inherit; font-size:14px; line-height:1.3; cursor:pointer; min-height:36px; }
.gen-layer-item.is-current { background:#1674dc; color:#fff; font-weight:600; }
.gen-layer-item.is-next { color:#6c757d; border:1px dashed #c9d6ea; }
@media (hover: hover) {
  .gen-slim-btn:hover:not(:disabled), .gen-layer-btn:hover:not(:disabled), .gen-layer-item:hover:not(:disabled) { background:#e8eeff; }
  .gen-layer-item.is-current:hover:not(:disabled) { background:#1066c4; }
}
@media (max-width: 680px) {
  .gen-layer-btn { min-height:36px; }
  .gen-chat-slim { font-size:13.5px; flex-wrap:nowrap; gap:2px 4px; }
  #gen-qp-dock .gen-quickpick-group.gen-quickpick-path { display:flex !important; flex-wrap:wrap; align-items:center; }   /* 28gj: Layer + three steps no longer fit a 4-column grid */
  
  #gen-qp-dock .gen-quickpick-path .gen-quickpick-chip { padding-left:8px !important; padding-right:8px !important; min-width:0 !important; }
  #gen-qp-dock .gen-quickpick-group.gen-quickpick-path { gap:4px !important; justify-content:center; }
  .gen-layer-btn { padding:5px 9px; }
}
.gen-next-layer { font-weight:400; }   /* 28iv (515): only the label is bold */
.gen-refine-line { font-weight:400; }   /* 28gq (341): the line above Next layer; 28iv (515): only the label is bold */
.gen-quickpick-chip.gen-quickpick-deeper:not(.selected) { border-color:#1674dc; color:#1066c4; font-weight:700; }

#gen-qp-dock .gen-quickpick-path .gen-quickpick-chip.gen-quickpick-deeper { white-space:normal; text-align:left; }

   /* the phone's bar keeps its height; Finalize stays a quiet link there */
.g-chain { background:#f4f8fd; border:1px solid #c9d6ea; border-radius:8px; padding:8px 12px; color:#1a5fb4; font-weight:600; }   /* 28gh: the Guide's Going Deeper example */
.g-gear { list-style:none; padding:0; margin:8px 0 0; }   /* 28fs (222): Listening gear rows in the Guide's How to listen — the file-list look */
.g-gear-row { display:flex; align-items:center; gap:12px; padding:8px 0; border-top:1px solid #eef1f5; }
.g-gear-row:last-child { border-bottom:1px solid #eef1f5; }
.g-gear-t { flex:1 1 auto; min-width:0; }
.g-gear-t strong { display:block; }
.g-gear .g-gear-btn:not(#_#_#_) { flex:0 0 auto; white-space:nowrap; text-decoration:none; }   /* a button, not a text link: the Guide underlines its links */
.g-card--gear { display:flow-root; }   /* 28fu (270): holds the Listening gear column */
.g-gear-box { float:right; width:340px; max-width:46%; margin:0 0 14px 22px; padding:4px 14px 6px; border:1px solid #e3e6ea; border-radius:10px; background:#f8f9fa; box-sizing:border-box; }   /* 28fu (270): high on How to listen, the text wraps round it */
.g-gear-box h4 { margin:10px 0 4px; }
.g-gear-box .g-gear { margin-top:4px; }
.g-gear-box .g-gear-row:first-child { border-top:0; }
.g-gear-box .g-gear-row:last-child { border-bottom:0; }
@media (max-width:760px) { .g-gear-box { float:none; width:auto; max-width:none; margin:0 0 16px; } }   /* stacked on a phone */
.cp-local { font-size:12.5px; color:#6c757d; margin-top:6px; }   /* 28ft: "Files stay in this browser only" — the muted hint text */
.cp-files-local { font-weight:400; color:#6c757d; }   /* 28ft: on the folded row */
.cp-files-all { text-align:right; padding:6px 0 2px; font-size:13px; }   /* 28fs (250): Remove all files, a text link under the list */
.cp-file-name { flex:1; min-width:0; overflow-wrap:anywhere; }
.cp-file-list.is-scroll { max-height:132px; overflow-y:auto; -webkit-overflow-scrolling:touch; overscroll-behavior:contain; border-bottom:1px solid #eef1f5; }   /* 28fo: more than three files scroll; the fourth row peeks */
.cp-drop { display:block; margin-top:8px; border:2px dashed #b9cfe9; border-radius:10px; background:#f6f9fe; padding:12px; text-align:center; color:#0b3d7a; font-size:13.5px; }
.cp-drop.is-over { border-color:#1066c4; background:#e7f1ff; }
/* 28fp: one window in every phase — empty (no file: the drop zone only, no search, tools, list or foot), folded
   ("Your files · N  Show", the default once there are files) and open (after an add or a Remove, or on Show). */
.tp-modal.tp-empty .tp-search, .tp-modal.tp-empty .tp-tools, .tp-modal.tp-empty .tp-list, .tp-modal.tp-empty .tp-foot { display:none; }
.cp-files.is-empty { padding:14px 18px 16px; border-bottom:0; }
.cp-files.is-empty .cp-drop { margin-top:0; padding:22px 12px; }
.cp-files-tog { display:flex; align-items:center; justify-content:space-between; width:100%; gap:10px; margin:0; padding:2px 0; border:0; background:none; font:inherit; cursor:pointer; text-align:left; }
.cp-files-tog .cp-files-h { margin:0; }
.cp-files-tog-l { font-size:13px; font-weight:600; color:#1066c4; }
.cp-files-tog-l::after { content:' \25BE'; }
.cp-files.is-open .cp-files-tog-l::after { content:' \25B4'; }
.cp-files-body { margin-top:4px; }
.cp-drop-tpl { color:#5a6472; }
.cp-private { margin-top:8px; }
.cp-storage { margin-top:8px; font-size:12px; color:#5a6472; }
.cp-storage-bar { width:120px; height:6px; vertical-align:middle; margin-left:6px; border:0; border-radius:3px; background:#e6ebf1; -webkit-appearance:none; appearance:none; overflow:hidden; }
.cp-storage-bar::-webkit-progress-bar { background:#e6ebf1; border-radius:3px; }
.cp-storage-bar::-webkit-progress-value { background:#1066c4; border-radius:3px; }
.cp-storage-bar::-moz-progress-bar { background:#1066c4; border-radius:3px; }
.nh-legal-draft { background:#fff; border-left:4px solid #ffc107; color:#1a3b63; padding:8px 12px; border-radius:6px; font-size:13.5px; }

.nh-legal-see { margin-top:24px; font-size:13.5px; color:#5a6472; }
.nh-legal-links .sep { margin:0 2px; }
.pg-legal body { font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; background:#f7f9fb; margin:0; }
.pg-legal .container { max-width:1240px; margin:0 auto; padding:0 16px 24px; }
.pg-setup .actions .nh-link { font-size:14px; font-weight:600; }
/* Guide tabs marked proprietary — to come off before launch (placeholder, 28bp) */
.guide-tab1[data-nh-private]::after, .guide-tab2[data-nh-private]::after { content:""; display:inline-block; width:11px; height:11px; margin-left:6px; vertical-align:-1px; opacity:.75;
  background:no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235a6472' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='11' width='16' height='10' rx='2'/%3E%3Cpath d='M8 11V7a4 4 0 0 1 8 0v4'/%3E%3C/svg%3E"); }
/* Ask the Guide (28bq, disconnected) */
.nh-ask { border:1px solid #dfe5ee; border-radius:12px; background:#fbfcfe; padding:12px; }
.nh-ask-log { display:flex; flex-direction:column; gap:8px; max-height:340px; min-height:120px; overflow-y:auto; padding:2px 2px 8px; }
.nh-ask-msg { max-width:85%; padding:8px 12px; border-radius:12px; font-size:14px; line-height:1.5; white-space:pre-wrap; }
.nh-ask-msg--bot { align-self:flex-start; background:#eef3fa; color:#1f2937; }
.nh-ask-msg--me { align-self:flex-end; background:#1066c4; color:#fff; }
.nh-ask-row { display:flex; gap:8px; align-items:flex-end; border-top:1px solid #e6ebf2; padding-top:10px; }
.nh-ask-row textarea { flex:1; min-width:0; resize:vertical; font:inherit; font-size:16px; padding:8px 10px; border:1px solid #ccd4de; border-radius:8px; }
.nh-ask-note { margin:8px 0 0; font-size:12px; color:#5a6472; }
.guide-panel1[data-tier="5"] { display:none; }   /* hidden until its tab is picked; guide.js sets display inline */
/* Contact form (28br) */
.nh-contact { display:flex; flex-direction:column; gap:6px; max-width:560px; margin-top:14px; }
.nh-contact label { font-weight:600; font-size:14px; margin-top:8px; }
.nh-contact label small { font-weight:400; color:#5a6472; }
.nh-contact input, .nh-contact select, .nh-contact textarea { font:inherit; font-size:16px; padding:9px 10px; border:1px solid #ccd4de; border-radius:8px; background:#fff; box-sizing:border-box; width:100%; }
.nh-contact-hp { position:absolute; left:-9999px; }
.nh-contact-note { font-size:12.5px; color:#5a6472; margin:6px 0 0; }
.nh-contact-row { display:flex; align-items:center; gap:12px; margin-top:8px; flex-wrap:wrap; }
.nh-contact-status { font-size:13.5px; color:#1a3b63; border-left: 4px solid #ffc107;}
.nh-contact-done { margin-top:16px; background:#f4f8fd; border:1px solid #d6e4f5; border-radius:10px; padding:12px 14px; }
.nh-contact[hidden] { display:none; }
.nh-contact-fields { display:flex; flex-direction:column; gap:6px; }
.nh-contact-fields[hidden], .nh-contact-ls[hidden], .nh-contact-row[hidden] { display:none; }
.nh-contact-ls { background:#f4f8fd; border:1px solid #d6e4f5; border-radius:10px; padding:10px 14px; margin-top:8px; }
.nh-contact-ls p { margin:0 0 10px; font-size:14px; }
.nh-contact-biz { margin-top:22px; font-size:12.5px; color:#5a6472; }
.nh-legal a.nh-btn--primary { color:#fff; text-decoration:none; }
/* ======== Session 32 additions (28bt → 28cj), grouped by component (CSS fold, 28cj). A block only moved past
   blocks that style none of the same classes, so every override still lands as before. ======== */

/* ======== Locks and gating (Preview levels, lock notes, gate notes) ======== */
/* ---- 28bt: locks everywhere (lock map), following the Preview dropdown / membership key ---- */
.nh-gated { pointer-events:auto; cursor:pointer; }
.nh-gated[data-nh-note="icon"] { opacity:.6; }
.nh-gated[data-nh-note="icon"]::after { content:""; display:inline-block; width:11px; height:11px; margin-left:5px; vertical-align:-1px; background:currentColor;
  -webkit-mask:no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='11' width='16' height='10' rx='2'/%3E%3Cpath d='M8 11V7a4 4 0 0 1 8 0v4'/%3E%3C/svg%3E");
          mask:no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='11' width='16' height='10' rx='2'/%3E%3Cpath d='M8 11V7a4 4 0 0 1 8 0v4'/%3E%3C/svg%3E"); }
.xnav a.nh-gated[data-nh-note="icon"] { opacity:.75; }
.nh-gated.cs-act { opacity:.6; }
.nh-gated.cs-act > :not(.nh-gate-note) { opacity:1; filter:none; }
.nh-gated.cs-act > .nh-gate-note { display:block; color:#1066c4; font-weight:700; font-size:12px; margin:4px 0 0; }
.nh-page-dim { opacity:.45; filter:grayscale(.5); pointer-events:none; user-select:none; }
.nh-gate-note--page { display:flex; flex-wrap:wrap; align-items:center; gap:6px 12px; background:#e7f1ff; border-left:4px solid #1066c4; color:#0b3d7a; border-radius:8px; padding:10px 14px; margin:0 0 12px; font-size:13.5px; }   /* 28fn (219): a locked feature is information, not an error — the blue note (was the yellow stripe) */
.nh-gate-cta { display:inline-flex; align-items:center; gap:10px; flex-wrap:wrap; }
.nh-gate-cta small { font-size:12.5px; color:#0b3d7a; }

.bys-head--locked::after { content:""; display:inline-block; width:10px; height:10px; margin-left:5px; background:currentColor;
  -webkit-mask:no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='11' width='16' height='10' rx='2'/%3E%3Cpath d='M8 11V7a4 4 0 0 1 8 0v4'/%3E%3C/svg%3E");
          mask:no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='11' width='16' height='10' rx='2'/%3E%3Cpath d='M8 11V7a4 4 0 0 1 8 0v4'/%3E%3C/svg%3E"); }
.bys-locked { display:flex; flex-wrap:wrap; align-items:center; gap:6px 10px; padding:8px 10px; }
.bys-locked small { font-size:12px; color:#5a6472; }

.pg-community .nh-page-dim .cm-set, .pg-community .nh-page-dim .cm-card { filter:blur(1.5px); }
.pg-community .cm-level { margin-left:10px; font-size:12.5px; color:#4b5a55; display:inline-flex; align-items:center; gap:6px; }
.pg-community .cm-level select { font-size:12.5px; padding:3px 6px; border:1px solid #cfd8e3; border-radius:6px; }

/* 28bu: History & reports locked as a whole row below Member */

/* 28cg: the Visitor playlist gate note sits under the box */
.pg-player .nh-gate-note--page.nh-box-gate { margin:8px 0 0; }

/* ======== Player intro card ======== */
/* 28bv: intro pills — a solid call-to-action pill, the sample's playing state, the level-line button */
:where(.pg-player) .nh-intro-step.is-cta { background:#1066c4; border-color:#1066c4; color:#fff; padding:4px 12px; }
:where(.pg-player) .nh-intro-step.is-cta .nh-intro-n { display:none; }
:where(.pg-player) .nh-intro-step.is-cta:hover { background:#094fa3; }
:where(.pg-player) .nh-intro-step.is-live { background:#e7f1ff; border-color:#1066c4; }
.nh-eq { display:inline-flex; align-items:flex-end; gap:1.5px; height:10px; width:10px; font-style:normal; }
.nh-eq i { display:block; width:2px; height:100%; background:#fff; border-radius:1px; animation:nh-eq .9s ease-in-out infinite; transform-origin:bottom; }
.nh-eq i:nth-child(2) { animation-delay:.15s; } .nh-eq i:nth-child(3) { animation-delay:.3s; }
@keyframes nh-eq { 0%,100% { transform:scaleY(.3); } 50% { transform:scaleY(1); } }
.nh-glow { animation:nh-glow 1.6s ease-out 1; }
@keyframes nh-glow { 0% { box-shadow:0 0 0 0 rgba(16, 102, 196,.55); } 100% { box-shadow:0 0 0 12px rgba(16, 102, 196,0); } }
@media (prefers-reduced-motion: reduce) { .nh-eq i, .nh-glow { animation:none; } }
/* 28gc (305): the sample's window — swirl, centred title and length, a tip, the three phrases in bold. */
#nh-sample-win .nh-win-head{text-align:center;padding-top:18px;position:relative}
#nh-sample-win .nh-win-titlebar{justify-content:center;position:static}
#nh-sample-win .nh-win-title{font-size:19px}
#nh-sample-win .nh-win-x{position:absolute;right:12px;top:12px}
#nh-sample-win .nh-win-sub{margin-top:4px;opacity:.92}

.nh-sw-tip{display:flex;gap:10px;align-items:flex-start;background:#eef5ff;border-radius:10px;padding:10px 12px;font-size:14px;line-height:1.45}
.nh-sw-ic{font-size:16px;line-height:1.3}
.nh-sw-h{font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#6c757d;margin:16px 0 8px}
.nh-sw-list{margin:0;padding:0 0 0 22px;font-size:14.5px;line-height:1.35}
.nh-sw-list li{margin:0 0 9px;padding-left:4px}.nh-sw-list li::marker{color:#1066c4;font-weight:700}
.nh-sw-list li b{display:block;color:#12233b}.nh-sw-list li span{display:block;font-size:13px;color:#6c757d}
.nh-sw-sound{margin:12px 0 0;font-size:13px;color:#6c757d}.nh-sw-end{margin:10px 0 0;font-size:14px}
/* 28il: the member-code box (the welcome's tile, the Generator / Prioritizer card) */
.nh-codebox{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:8px}.nh-codebox-in{flex:1 1 180px;min-width:0;font-family:ui-monospace,Menlo,Consolas,monospace;font-size:13.5px;padding:8px 10px;border:1px solid #c9d6e5;border-radius:8px;background:#fff;color:#1a3b63}.nh-codebox-in:focus{outline:2px solid #1066c4;outline-offset:1px}
.nh-codebox-msg{flex:1 0 100%;font-size:13px;line-height:1.4;color:#1a3b63}.nh-codebox-msg.ok{font-weight:600}.nh-codebox-msg.warn{border-left:4px solid #ffc107;padding-left:8px}.nh-codebox-msg[hidden]{display:none}
.nhw-codetile .nh-codebox{flex-direction:column;align-items:stretch}.nhw-codetile .nh-codebox-in{flex:0 0 auto}.nhw-codetile .nh-codebox .nhw-btn{align-self:flex-start}.nhw-codetile-foot{margin-top:8px}
.nh-codecard{margin:0 0 14px}.nh-codecard .nh-codebox{max-width:520px}.nh-codecard-foot{margin-top:8px;font-size:12.5px;color:#6c757d}
/* 28in: the newcomer pass */
/* 28jc (532, Dan): the four sources and Search are one quiet line of links under Essentials (was four blue tiles, 28in item 9) —
   the buttons keep their ids and classes (the tour, the lock map and the pickers read them); only their look changes. */
:where(.pg-player) .bys-row4{grid-column:1 / -1;display:flex;flex-wrap:wrap;align-items:center;gap:0 18px;padding:0 2px}
:where(.pg-player) .bys-row4 .bys-tile{display:inline-flex!important;flex-direction:row;align-items:center;background:none!important;border:0!important;box-shadow:none!important;border-radius:6px;padding:6px 0!important;min-height:36px;color:#1066c4;font-weight:600;font-size:13px;transform:none}
:where(.pg-player) .bys-row4 .bys-tile:hover{background:none!important;color:#0b4f99;text-decoration:underline}
:where(.pg-player) .bys-row4 .bys-tile .bys-t{color:#1066c4;font-size:13px;display:inline}
:where(.pg-player) .bys-row4 .bys-tile .bys-ic,:where(.pg-player) .bys-row4 .bys-tile .bys-s{display:none}
:where(.pg-player) .bys-grid .bys-searchrow{grid-column:1 / -1;margin:2px 0 4px}
:where(.pg-player) .bys-grid .bys-searchrow[hidden]{display:none}
:where(.pg-player) .bys-grid .bys-results{grid-column:1 / -1}
:where(.pg-player) .nh-len{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:2px 0 6px}
:where(.pg-player) .nh-len-pill{display:inline-flex;align-items:center;gap:4px;font:inherit;font-size:13px;font-weight:600;color:#1066c4;background:#fff;border:1.5px solid #1066c4;border-radius:999px;padding:6px 12px;cursor:pointer;line-height:1.2}
:where(.pg-player) .nh-len-pill.is-on{background:#1066c4;color:#fff}
:where(.pg-player) .nh-len-pill .nh-len-est{font-weight:400;opacity:.85}

:where(.pg-player) .nh-len-more{margin-left:auto;font-size:13px}
:where(.pg-player) .nh-len-note{font-size:12.5px;color:#6c757d;margin:0 0 10px}
:where(.pg-player) #nh-len-grid[hidden]{display:none !important}
@media (hover:hover){:where(.pg-player) .nh-len-pill:not(.is-on):hover{background:#e6f1fb}:where(.pg-player) .nh-len-pill.is-on:hover{background:#0b57a8}}

   /* 28ip: the (i) at the end of the mode line (was its own .gen-how line, 28in–28io) */
.g-first h4{margin:0 0 8px}.g-first-list{margin:0;padding-left:20px;font-size:14px;line-height:1.55}.g-first-list li{margin:4px 0}

/* The intro strip as the left column's first card */

/* 28bz (Dan: "make better use of space — these pills could all be the same row"): title and links on one line, the pills
   side by side under it (wrapping only when the card is too narrow). */

/* ======== Player: Shape Your Session steps, supporting phrases, Keep and Share ======== */
/* ---- 28bx: Playlist steps (right column) and the intro card in the left column ---- */
:where(.pg-player) .build-grid.has-steps { align-items: stretch; }
:where(.pg-player) .build-grid.has-steps > .build-col:first-child > #preset-phrases-card { flex: 1; }
:where(.pg-player) .build-grid.has-steps > .build-col:last-child { gap: 10px; }
.pg-player .section.pl-step { padding: 0; overflow: visible; }
:where(.pg-player) .pl-step.is-open { border-color: #1066c4; box-shadow: 0 0 0 1px #1066c4 inset; }
.pg-player button.pl-step-h, .pg-player button.pl-step-h:hover, .pg-player button.pl-step-h:focus { width: 100%; box-shadow: none; transform: none; min-height: 0; }
.pl-step-h { width: 100%; display: flex; align-items: center; gap: 10px; padding: 12px 14px; background: none; border: 0; font: inherit; color: #1f2937; text-align: left; cursor: pointer; border-radius: 12px; }
.pg-player button.pl-step-h { background: none; color: #1f2937; padding: 12px 14px; }
.pg-player button.pl-step-h:hover { background: #f4f8fd; color: #1f2937; }
.pl-step-h:focus-visible { outline: 3px solid #b8d4f0; outline-offset: -3px; }
.pl-step-t { font-size: 16px; font-weight: 700; white-space: nowrap; }
.pl-step-st { margin-left: 10px; font-size: 12.5px; color: #5a6472; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }   /* 28iz (525, Dan: C): the status runs on after the title */
/* statuses stay the subtitle grey (28ca, Dan: no green) */
.pl-step-chev { font-size: 12px; color: #5a6472; flex: 0 0 auto; }
.pl-step.is-open .pl-step-chev { transform: rotate(180deg); }
.pl-step-h.nh-gated { opacity: 1; }
.pl-step-h.nh-gated .pl-step-t::after { content: ""; display: inline-block; width: 11px; height: 11px; margin-left: 6px; vertical-align: 0; background: currentColor; opacity: .6;
  -webkit-mask: no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='11' width='16' height='10' rx='2'/%3E%3Cpath d='M8 11V7a4 4 0 0 1 8 0v4'/%3E%3C/svg%3E");
          mask: no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='11' width='16' height='10' rx='2'/%3E%3Cpath d='M8 11V7a4 4 0 0 1 8 0v4'/%3E%3C/svg%3E"); }
.pl-step-h.nh-gated::after { display: none; }
.pl-step-b { padding: 0 14px 14px; display: flex; flex-direction: column; }
.pl-step-b[hidden] { display: none; }
.pl-step-next { align-self: flex-end; margin-top: 12px; }
/* 28cr: each step ends with "What is this?" at the left and Next / Play at the right. */
.pl-step-foot { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: 12px; }
.pl-step-foot .pl-step-next { margin-top: 0; align-self: auto; }
.pl-step-what { font-size: 12.5px; }
.pl-step-empty { margin: 0 0 6px; font-size: 13px; color: #5a6472; }
.pl-step-empty[hidden] { display: none; }

:where(.pg-player) .pl-step-card { background: none; border: 0; box-shadow: none; padding: 0; margin: 0; }
.pl-expand { margin-right: 14px; }
.pl-expand-box { width: 100%; box-sizing: border-box; height: min(60vh, 560px); font: inherit; font-size: 16px; line-height: 1.5; padding: 10px 12px; border: 1px solid #ccd4de; border-radius: 8px; resize: vertical; margin: 10px 0 4px; }
/* ---- 28by: steps polish ---- */
:where(.pg-player) .nh-intro-n.nh-intro-n--dot { width: 7px; height: 7px; margin: 0 2px 0 4px; }
.pl-wf-err { margin: 0 0 10px; background: #fff; border-left: 4px solid #ffc107; color: #1a3b63; border-radius: 6px; padding: 8px 12px; font-size: 13.5px; line-height: 1.45; }
.pl-wf-err[hidden] { display: none; }
.pl-pulse { animation: pl-pulse 1.4s ease-out 1; }
@keyframes pl-pulse { 0% { box-shadow: inset 0 0 0 2px rgba(16, 102, 196,.7); } 100% { box-shadow: inset 0 0 0 2px rgba(16, 102, 196,0); } }
@media (prefers-reduced-motion: reduce) { .pl-pulse { animation: none; } }
.pg-player button.pl-jump { display: none; }
@media (max-width: 860px) {
  .pg-player button.pl-jump:not([hidden]) { display: flex; width: max-content; max-width: 100%; margin: 0 0 8px auto; background: #1066c4; color: #fff; border: 0; border-radius: 999px; padding: 5px 12px; font: inherit; font-size: 13px; font-weight: 700; }
}
@media (max-width: 680px) {
  .pg-player button.pl-step-h { padding: 8px 12px; }
  .pl-step-t { font-size: 15px; }
  .pl-step-st { font-size: 12px; }
}
/* 28by: long step statuses must shrink, never widen the page on a phone */
:where(.pg-player) .build-grid.has-steps, :where(.pg-player) .build-grid.has-steps > .build-col, .pg-player .section.pl-step { min-width: 0; max-width: 100%; }
.pg-player button.pl-step-h { min-width: 0; max-width: 100%; overflow: hidden; }
.pl-step-t { flex: 0 0 auto; }
.pl-step-st { flex: 1 1 0; text-align: left; }   /* 28iz (525) */
/* ---- 28ca: Companion Presets step in the site's own styles ---- */
.pl-step-intro { margin: 0 0 10px; }
:where(.pg-player) .pl-sg--step .pl-frame-bar { background: none; border-top: 0; padding: 0; justify-content: flex-start; flex-wrap: wrap; }
:where(.pg-player) .pl-sg--step .pl-sg-strip { border-top: 0; padding: 10px 0 0; background: none; }
/* ---- 28cb: "2 Shape Your Session" card over the steps; dots on the steps; Play carries the 3 ---- */
.pg-player .section.pl-col-card { display: flex; flex-direction: column; gap: 8px; }
.pg-player .section.pl-col-card > .section-subtitle { margin: 0 0 4px; }
.pg-player .pl-col-card > .section.pl-step { background: #fff; }
.pl-step-dot { width: 8px; height: 8px; border-radius: 50%; background: #1066c4; flex: 0 0 8px; margin: 0 2px 0 4px; }

/* 28ck (Dan): Rife tab — room under the intro line, Clear above the box like the Phrases tab */
.pg-player .pl-rife-links { text-align:right; margin:10px 0 6px; min-height:18px; }

/* 28cm (Dan: "fonts are weird on the request client snapshot window"): the window's body on the site's 14px scale —
   it was 16px list text beside 11px hints, and the email box took the label's bold. */
.snap-request-body { font-size:14px; line-height:1.45; color:#343a40; }
.snap-request-body .tip-lead { font-size:14.5px; font-weight:700; margin:0 0 6px; }
.snap-request-body .tip-list { margin:0 0 12px; padding-left:20px; font-size:14px; }
.snap-request-body .tip-list li { margin:0 0 3px; }
.snap-request-body .snap-request-lbl { font-size:13px; }
.snap-request-body .snap-request-lbl small { display:block; margin:2px 0 0; font-size:12.5px; }
.snap-request-body .snap-request-input { font-weight:400; font-size:14px; padding:8px 10px; }

/* ======== Setup: checklist, membership, key, Refer a Friend ======== */
/* ---- 28cd: Setup, simplified ---- */
.nh-check-list { display: flex; flex-direction: column; gap: 6px; }
.nh-ci { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; padding: 8px 12px; border: 1px solid #d6e4f5; border-radius: 10px; background: #f4f8fd; font-size: 14px; }
.nh-ci-mk { width: 22px; height: 22px; border-radius: 50%; border: 2px solid #1066c4; color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; flex: 0 0 22px; }
.nh-ci-item.is-done .nh-ci-mk { background: #1066c4; }
.nh-ci-sub { color: #5a6472; font-size: 13px; margin-right: auto; }
.nh-ci .nh-link { font-size: 13px; white-space: nowrap; }
.nh-fold-line { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font-size: 14px; }
.nh-fold-ok { font-weight: 700; }
.nh-fold-sub, .nh-fold-sep { color: #5a6472; }
#nh-member.is-folded > .section-title, #nh-member.is-folded > .hint { display: none; }
#nh-member .nh-member-card { display: none; }

/* ======== Player: supporting phrase chips, What’s new, Generator share links (kept after the Setup block: it overrides .nh-fold-line / .nh-link there) ======== */
/* ---- 28cd: supporting phrases chips with ×, button on the left, What's new, Generator share links ---- */
:where(.pg-player) .pl-sg-chipwrap { display: inline-flex; align-items: stretch; border: 1px solid #b8d4f0; border-radius: 999px; background: #fff; overflow: hidden; }
:where(.pg-player) .pl-sg-chipwrap .pl-sg-chip { border: 0; border-radius: 0; }
.pg-player button.pl-sg-x { border: 0; border-left: 1px solid #dbe6f5; background: #fff; color: #5a6472; padding: 0 9px; font-size: 15px; line-height: 1; cursor: pointer; border-radius: 0; min-height: 0; box-shadow: none; }
.pg-player button.pl-sg-x:hover { background: #f1f6ff; color: #1066c4; }
:where(.pg-player) .pl-sg--step .pl-sg-link { order: -1; }
.gen-under-compose .nh-link, #qb-share-btn { font-size: 13px; }
#qb-share-btn { margin-left: 12px; }
.nh-fold-line[hidden] { display: none; }
.pg-player .pl-sg--step .pl-frame-bar { justify-content: flex-start; }
.pg-player .pl-sg--step .pl-sg-note { flex: 0 1 auto; margin: 0; order: 1; }
.pg-player .pl-sg--step .pl-sg-link { margin-left: 0; }

/* ======== Setup: checklist, membership, key, Refer a Friend ======== */
/* ---- 28ce: Setup checklist items unfold to their own forms ---- */
.nh-ci-item { border: 1px solid #d6e4f5; border-radius: 10px; background: #f4f8fd; overflow: hidden; }
.nh-ci-item.is-open { border-color: #1066c4; background: #fff; }
.nh-ci-item > .nh-ci { border: 0; border-radius: 0; background: none; width: 100%; text-align: left; cursor: pointer; font: inherit; color: inherit; }
.pg-setup button.nh-ci, .pg-setup button.nh-ci:hover { background: none; color: #1f2937; box-shadow: none; padding: 10px 12px; margin: 0; }
.pg-setup button.nh-ci:hover { background: #eef4fb; }
.nh-ci-chev { color: #5a6472; font-size: 12px; }
.nh-ci-item.is-open .nh-ci-chev { transform: rotate(180deg); }
.nh-ci-body { padding: 4px 14px 14px; }
.nh-ci-body[hidden] { display: none; }
.pg-setup .section.nh-ci-section { border: 0; box-shadow: none; padding: 0; margin: 0; background: none; }
.pg-setup .section.nh-ci-section > .section-title { display: none; }

/* 28ci: Refer a Friend (Setup) and the welcome page */
.nh-ref-code { display:inline-block; font:600 15px/1.2 ui-monospace,SFMono-Regular,Menlo,monospace; letter-spacing:.04em; background:#f4f8fd; border:1px dashed #1066c4; color:#1066c4; border-radius:6px; padding:6px 10px; }
.nh-ref-row { display:flex; flex-wrap:wrap; align-items:center; gap:8px 12px; margin:8px 0; }
.nh-ref-note { font-size:12.5px; color:#5a6472; margin:6px 0 0; }
.nh-welcome-steps { list-style:none; padding:0; margin:12px 0; display:flex; flex-direction:column; gap:10px; counter-reset:w; }
.nh-welcome-steps li { counter-increment:w; display:flex; gap:12px; align-items:flex-start; background:#fff; border:1px solid #dfe5ee; border-radius:10px; padding:12px 14px; }
.nh-welcome-steps li::before { content:counter(w); flex:0 0 26px; height:26px; border-radius:50%; background:#e3eefc; color:#1066c4; font-weight:700; display:grid; place-items:center; font-size:13px; }
.nh-welcome-steps b { display:block; font-size:15px; margin:0 0 2px; }
.nh-welcome-steps p { margin:0 0 8px; font-size:13.5px; color:#3b4652; }
.pg-setup .nh-ref-section { display:none; }
.pg-setup[data-level="member"] .nh-ref-section:not([hidden]), .pg-setup[data-level="practitioner"] .nh-ref-section:not([hidden]) { display:block; }   /* 28iq (item 16): hidden until referrals are live */
.nh-legal a.nh-btn, .nh-ref-row a.nh-btn { text-decoration:none; }

/* ======== Site banner (membership states, a friend’s referral) ======== */
/* 28ci: one banner under the nav — membership states (renews soon, cancelled, payment failed, expired) and a friend's referral */
.nh-site-banner { display:flex; align-items:flex-start; gap:10px; border-radius:8px; padding:10px 14px; margin:0 0 12px; font-size:13.5px; line-height:1.45; }
.nh-site-banner--info { background:#e7f1ff; border-left:4px solid #1066c4; color:#1f2937; }
.nh-site-banner--warn { background:#fff; border-left:4px solid #ffc107; color:#1a3b63; }
.nh-site-banner-t { flex:1 1 auto; min-width:0; display:flex; flex-wrap:wrap; align-items:center; gap:6px 12px; }
.nh-site-banner--warn .nh-gate-cta small { color:#1a3b63; border-left: 4px solid #ffc107;}
.nh-site-banner-x { flex:0 0 auto; background:none; border:0; font-size:18px; line-height:1; color:inherit; cursor:pointer; padding:2px 4px; opacity:.7; }
.nh-site-banner-x:hover { opacity:1; }
.nh-plans-ref { background:#e7f1ff; border-radius:8px; padding:8px 12px; }

/* ======== Generator links ======== */
/* 28cj: one quiet link weight (Dan: "be consistent, probably not bold") — the Generator chat and Quick Build links */
.nh-link.nh-link--plain { font-weight:400; font-size:13px; }
.nh-push-right { margin-left:auto; }

/* ======== Admin: Documentation ======== */
/* 28cj: Admin → Documentation (the Guide's private sections) */
/* Admin main tabs (28cz): Phrase Classifier · Community · Documentation — one pane at a time. */
.pg-admin .adm-main { display:inline-flex; max-width:100%; border:1px solid #ced4da; border-radius:8px; overflow:hidden; background:#fff; margin:6px 0 16px; }
.pg-admin .adm-main-tab { border:none; border-right:1px solid #ced4da; border-radius:0; background:#fff; color:#495057; padding:10px 20px; font-size:14px; font-weight:600; cursor:pointer; box-shadow:none; min-height:44px; }
.pg-admin .adm-main-tab:last-child { border-right:none; }
.pg-admin .adm-main-tab:hover:not(.is-active) { background:#eef2fb; }
.pg-admin .adm-main-tab.is-active, .pg-admin .adm-main-tab.is-active:hover { background:#1674dc; color:#fff; }
.pg-admin .adm-pane[hidden] { display:none; }
/* Relay tab (28hi): the codes table and the use-by-task table. */
.pg-admin .rl-card h3.rl-h3 { margin:18px 0 6px; font-size:15px; }
.pg-admin .rl-table { width:100%; border-collapse:collapse; font-size:13px; margin-top:10px; }
.pg-admin .rl-table th, .pg-admin .rl-table td { padding:6px 8px; border-bottom:1px solid #e6e9ee; text-align:left; vertical-align:middle; }
.pg-admin .rl-table th { font-size:11px; text-transform:uppercase; letter-spacing:.03em; color:#6c757d; font-weight:600; }
.pg-admin .rl-table td.rl-num { text-align:right; font-variant-numeric:tabular-nums; }
.pg-admin .rl-table td.rl-actions { white-space:nowrap; }  /* 28ht: Save + Email on one line */
.pg-admin .rl-table a.rl-code { text-decoration:none; border-bottom:1px dotted #8aa; }  /* 28ht: tap a code for one person's use */
.pg-admin .rl-clip { position:fixed; opacity:0; left:-9999px; }  /* 28hu: the off-screen textarea behind the copy fallback */
.pg-admin .rl-table input[type="text"] { width:140px; } .pg-admin .rl-table input[type="number"] { width:84px; }
.pg-admin .rl-table input, .pg-admin .rl-table select, .pg-admin .rl-add input, .pg-admin .rl-add select { padding:4px 6px; border:1px solid #ccd1d5; border-radius:6px; font-size:13px; }
.pg-admin .rl-paused td:first-child { border-left:4px solid #ffc107; }   /* yellow family: a paused code needs attention, not an error */
.pg-admin .rl-badge { display:inline-block; font-size:11px; font-weight:700; color:#1a3b63; background:#fff; border:1px solid #ffc107; border-radius:999px; padding:1px 7px; margin-left:6px; }
.pg-admin .rl-add { margin-top:14px; padding-top:12px; border-top:1px solid #e6e9ee; }
.pg-admin .rl-add input[type="number"] { width:84px; }
.pg-admin .rl-table tr.rl-ro td { color:#6c757d; }   /* 28jm (565): the Settings card's read-only inventory rows */
.pg-admin .st-settings input[type="number"] { width:96px; }
.pg-admin .rl-month-l { font-size:13px; color:#495057; } .pg-admin .rl-month { padding:4px 6px; border:1px solid #ccd1d5; border-radius:6px; font-size:13px; }
@media (max-width:700px) { .pg-admin .rl-table { display:block; overflow-x:auto; } }
@media (max-width:560px) { .pg-admin .adm-main { display:flex; } .pg-admin .adm-main-tab { flex:1 1 0; padding:10px 6px; font-size:13px; } }
.pg-admin .adm-docs-group { margin:12px 0 0; }
.pg-admin .adm-docs-h { font-weight:700; font-size:13px; color:#5a6472; margin:0 0 6px; }
.pg-admin .adm-docs-tabs { display:flex; flex-wrap:wrap; gap:6px; }

/* ======== Brand blue (28cl, Dan's pick "Deep, crisp" from the mock-up "Swirl Blue Match") ========
   One family from the swirl icon: icon #1e87fd (edges, dots, underlines, focus), button/link #1674dc, deep #1066c4
   (every fill with white text on it), tint unchanged. White text sits on a flat deep fill (the old #1f7ae0 → #0b5fc4
   fade put half of each line on the light end), small white text is full white and a little heavier, dark fills get
   smoother text rendering, and the icon blue shows as a 3px top edge (inset shadow, so nothing moves). */
.page-banner, .g-hero, .nh-win-head, .tp-head, :where(.pg-player) .bys-tile, .nh-btn--primary { -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; }
.page-banner { box-shadow: inset 0 3px 0 #1e87fd; }
.page-banner span { opacity: 1; }
.g-hero { box-shadow: inset 0 3px 0 #1e87fd, 0 2px 6px rgba(0,0,0,.15); }
.g-hero-sub { opacity: 1; }

/* ======== Guide: the intro videos side by side (28cq; three since 28cy) ======== */
.g-tours { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:0 18px; }   /* 28cy: three on one row (Dan); stacked on a phone */
.g-tour-one { min-width:0; display:grid; grid-template-rows:subgrid; grid-row:span 3; }   /* title / video / line share rows, so the videos stay level when a title wraps */
@media (max-width:760px) { .g-tours { grid-template-columns:1fr; } .g-tour-one + .g-tour-one { margin-top:18px; } }
.g-tour-one h4 { margin:0 0 8px; font-size:15px; }   /* 28cy: 15px so title + length sit on one line at three across */
.g-tour-len { display:inline-block; margin-left:8px; padding:1px 8px; border-radius:999px; background:#e7f1ff; color:#1066c4; font-size:12px; font-weight:700; vertical-align:middle; }
.g-tour-one video { width:100%; display:block; border-radius:10px; background:#000; aspect-ratio:16/9; }
.g-tour-sub { font-size:13px; color:#6c757d; margin:8px 0 0; }
:where(.pg-player) .bys-tile { box-shadow: inset 0 3px 0 #1e87fd; }
:where(.pg-player) .bys-s { color:#fff; font-weight:500; }
/* 28cl: the swirl icon in place of the device's 🌀 emoji (nhSwirlHtml / class nh-sw). The character stays in the text;
   the icon is painted over its slot and the glyph is pushed out of view. */
.nh-sw { display:inline-block; width:1.05em; height:1.05em; vertical-align:-0.16em; overflow:hidden; text-indent:200%; white-space:nowrap;
  background:url("art/swirl-mark.png") center / contain no-repeat; }
.xnav .nh-sw, .xnav a .nh-sw, .xnav span .nh-sw { padding:0; margin:0 0 0 2px; border-radius:0; font-size:13px; flex:none;
  background:url("art/swirl-mark.png") center / contain no-repeat; }

/* 28cr: FAQ regrouped (Dan: "put some thought into the order") */
.faq-group { font-size:12px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:#6c757d; margin:18px 0 6px; }
.faq-group:first-of-type { margin-top:8px; }

/* 28cx: the Generator chat marks confirmed / finalized phrases with a check, not the swirl glyph (Dan) */
:where(.pg-generator) .nh-kept { display:inline-block; width:1.1em; color:#1066c4; font-weight:700; }

/* ======== Admin: Community queue and Collections cards ========
   28da: these rules were written in 28cs but had landed inside the page's closing </html tag, so they never applied
   (the queue was unstyled and the admin key box was not masked). Moved here; the Collections card (28da) added. */
/* Community queue (28cs) */

.col-sets{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 8px;font-size:13px}.col-set{display:inline-flex;align-items:center;gap:4px;padding:3px 4px 3px 10px;border:1px solid #cfd8e3;border-radius:999px;background:#f4f7fb}
.col-x{border:none;background:none;box-shadow:none;color:#5a6472;font-size:16px;line-height:1;padding:2px 6px;cursor:pointer;min-height:0}
.cq-row{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:10px}
.cq-key{flex:1 1 260px;max-width:420px;-webkit-text-security:disc}   /* 28cu: a text field masked by CSS — Safari's password AutoFill sat on the password type and blocked typing / paste */
.cq-note{margin:6px 0;font-size:13px}
.cq-tags{font-size:12.5px}.cq-ph{margin:6px 0 8px;padding-left:22px;font-size:13px;line-height:1.6}.cq-bad{color:#1a3b63; border-left: 4px solid #ffc107;}.cq-reason{flex:1 1 220px;max-width:360px}
/* 28fx (295, Dan: "modernize it so i can follow"): the Community admin card — key row, three views, plain items, one save bar. */
.cm-head{display:flex;align-items:center;gap:12px;flex-wrap:wrap;justify-content:space-between}.cm-head h2{margin:0}
.cm-keyrow{display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-size:13px;color:#495057}.cm-keyask{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.cm-keyask[hidden],.cm-keyok[hidden],.cm-refresh[hidden],.cm-panel[hidden]{display:none}
.cm-intro{margin:6px 0 10px}.cm-status{min-height:1.2em;margin:0 0 8px;font-size:13px;color:#1066c4}.cm-status:empty{min-height:0;margin:0}
.cm-tabs{display:flex;gap:4px;flex-wrap:wrap;border-bottom:1px solid #dee2e6;margin:0 0 14px}
.cm-tab:not(#_#_){background:none;border:0;border-bottom:3px solid transparent;border-radius:0;box-shadow:none;padding:9px 14px 8px;margin:0 0 -1px;font-size:14px;font-weight:600;color:#495057;cursor:pointer;min-height:0}
.cm-tab:not(#_#_):hover{color:#1066c4}.cm-tab.is-active:not(#_#_){color:#1066c4;border-bottom-color:#1066c4}.cm-n{font-weight:500;color:#6c757d}
.cm-say{margin:0 0 12px;font-size:13px;line-height:1.5}
.cm-empty{padding:18px;text-align:center;color:#6c757d;font-size:13.5px;border:1px dashed #cfd8e3;border-radius:10px}
.cm-item{border:1px solid #e3e6ea;border-radius:10px;background:#fff;padding:12px 14px;margin:0 0 10px}
.cm-item-head{display:flex;align-items:baseline;gap:8px 10px;flex-wrap:wrap}.cm-item-head b{font-size:15px}.cm-item-head .muted{font-size:12.5px}
.cm-right{margin-left:auto;display:inline-flex;gap:6px;align-items:center}
.cm-badge{display:inline-block;padding:1px 8px;border-radius:999px;background:#e8f1fb;color:#1066c4;font-size:11.5px;font-weight:600}
.cm-actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:10px}
.cm-reason{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:10px}.cm-reason[hidden]{display:none}
.cm-phrases{margin:6px 0 0;font-size:13px}.cm-phrases summary{cursor:pointer;color:#1066c4}
.cm-bar{margin:0 0 12px}
.cm-col-top{display:flex;align-items:flex-end;gap:12px;flex-wrap:wrap;margin:0 0 10px}
.cm-col-n{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:50%;background:#e8f1fb;color:#1066c4;font-weight:700;font-size:13px;align-self:center}
.cm-field{display:flex;flex-direction:column;gap:4px;font-size:12px;color:#6c757d;margin:0 0 10px}.cm-col-top .cm-field{margin:0}
.cm-field > span{font-weight:600;letter-spacing:.02em}.cm-field input,.cm-field select{font-size:14px}
.cm-field--name{flex:1 1 220px;max-width:340px}.cm-field--name input{font-weight:600}.cm-field--wide{max-width:760px}
.cm-add{max-width:420px;margin-top:2px}
.col-set--gone{border-style:dashed;background:#fff;color:#6c757d}
.cm-hint{font-size:12.5px;color:#495057;margin:0 0 8px}
.cm-savebar{position:sticky;bottom:12px;z-index:5;display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:flex-end;padding:10px 14px;margin:6px 0 14px;border:1px solid #1066c4;border-radius:10px;background:#eef5ff;box-shadow:0 4px 14px rgba(16,102,196,.15);font-size:13.5px;color:#12233b}
.cm-savebar > span{margin-right:auto;font-weight:600}.cm-savebar[hidden]{display:none}
.cm-notice{margin:0 0 12px;padding:10px 14px;border:1px solid #b6d4fe;border-radius:10px;background:#eef5ff;font-size:13.5px;color:#12233b}.cm-notice[hidden]{display:none}   /* 28fy (263) */
.cm-notice-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.cm-notice-row + .cm-notice-row{margin-top:8px;padding-top:8px;border-top:1px solid #d6e6fb}.cm-notice-row > span{flex:1 1 260px}
.cm-badge--off{background:#f1f3f5;color:#495057}
.cm-starter{margin-top:18px;padding:14px;border:1px solid #e3e6ea;border-radius:10px;background:#f8f9fa}.cm-starter .cm-say{margin:6px 0 10px}
@media (max-width:600px){.cm-right{margin-left:0}.cm-tab:not(#_#_){padding:8px 10px;font-size:13px}}

/* ======== Info panels: a × to close (28dc) ======== */
.info-panel { position:relative; }
.info-panel .info-x { position:absolute; top:4px; right:6px; border:none; background:none; box-shadow:none; color:#5a6472; font-size:22px; line-height:1; padding:6px 10px; min-height:0; min-width:0; cursor:pointer; border-radius:8px; }
.info-panel .info-x:hover { background:rgba(16,102,196,.08); color:#1066c4; }
.info-panel .tip-lead { padding-right:34px; }

/* ======== Share confirmation (28dd) ======== */
.nh-share-sum { margin:10px 0; padding:8px 0 8px 22px; border-top:1px solid #e3e6ea; border-bottom:1px solid #e3e6ea; line-height:1.8; }
.nh-share-not { font-size:12.5px; color:#5f6b7a; margin:0; }

/* ======== Save and Share: the admin copy link, bottom left (28de) ======== */
.nh-card-foot .cs-admin-link { margin-right:auto; align-self:center; font-size:12.5px; font-weight:400; color:#5f6b7a; }

/* ======== Save and Share: "optional" on the preset fields; the Keep here step (28di) ======== */
.cs-opt { font-weight:400; color:#6c757d; }
.cs-keep-body { padding:10px 18px 12px; }
.cs-keep-label { display:block; font-size:13px; font-weight:600; color:#212529; margin:0; padding:0; background:transparent; cursor:default; }
.cs-keep-input { width:100%; box-sizing:border-box; padding:8px 10px; border:1px solid #c9d6e6; border-radius:6px; font-size:16px; margin-top:4px; }
.cs-keep-msg { margin:8px 0 0; padding:6px 10px; border-left:4px solid #e0b100; background:#fff8e1; color:#5c4a00; font-size:13px; border-radius:0; }

/* ======== Volume: High · Med · Low · Mute (28df) — on a phone the speaker icon makes way for the fourth step ======== */
@media (max-width:560px) { .volume-control .vol-icon { display:none; } }

/* ======== "Private Testing Feedback" in the nav, left of Preview as (28dh) ======== */
.nh-nav-right { margin-left:auto; display:inline-flex; align-items:center; gap:12px; flex-wrap:nowrap; justify-content:flex-end; }
.nh-nav-right .nh-level-pick { margin-left:0; }
.nh-nav-right .nh-level-pick select { max-width:160px; }   /* so the pill, the label and the dropdown fit an iPad held sideways */
a.nh-feedback { display:inline-flex; align-items:center; min-height:30px; padding:4px 14px; border-radius:999px; background:#1066c4; color:#fff !important; font-size:13px; font-weight:600; text-decoration:none; white-space:nowrap; }
a.nh-feedback:hover { background:#0c55a5; }
/* Where the nav cannot hold it (tabs + pill + dropdown need about 1,210 px with the Admin tab — so iPads and phones), the pill
   leaves the nav and a slim bar above it takes its place, so the link is always on screen. */
a.nh-feedback-bar { display:none; }
@media (max-width:1259px) {
  .nh-nav-right a.nh-feedback { display:none; }
  a.nh-feedback-bar { display:block; text-align:center; background:#1066c4; color:#fff !important; font-size:13px; font-weight:600; padding:8px 10px; border-radius:8px; margin:0 0 8px; text-decoration:none; }
}
.pg-community a.cm-feedback { margin-left:auto; }
.pg-community a.cm-feedback + .nh-level-pick { margin-left:0; }
@media (max-width:560px) { .nh-nav-right { display:contents; } }

/* ======== Feedback window (28dj) ======== */
.nh-fb { display:block; }
.nh-fb .nh-fb-l { display:block; font-size:13px; font-weight:600; color:#212529; margin:10px 0 4px; padding:0; background:transparent; cursor:default; }
.nh-fb .nh-fb-l:first-child { margin-top:0; }
.nh-fb .nh-fb-opt { font-weight:400; color:#6c757d; }
.nh-fb textarea, .nh-fb input[type=email], .nh-fb select { width:100%; box-sizing:border-box; padding:9px 10px; border:1px solid #c9d6e6; border-radius:6px; font:inherit; font-size:16px; background:#fff; color:#212529; }
.nh-fb textarea { min-height:120px; resize:vertical; }
.nh-fb .nh-fb-hp { position:absolute; left:-5000px; width:1px; height:1px; opacity:0; }
.nh-fb .nh-fb-note { font-size:12.5px; color:#5f6b7a; line-height:1.45; margin:10px 0 0; }
.nh-fb .nh-fb-status { font-size:13px; color:#5c4a00; margin:8px 0 0; min-height:1em; }
.nh-fb .nh-fb-done { margin:6px 0; font-size:15px; line-height:1.5; }
.nh-fb .nh-fb-ls { margin:12px 0 4px; padding:12px 14px; border:1px solid #d7e3f4; border-radius:8px; background:#f5f9ff; font-size:14px; line-height:1.5; }
.nh-fb .nh-fb-ls p { margin:0 0 10px; }

/* ======== "Take a snapshot first" — the ONE invitation (28en, item 47; site-common.js nhSnapCta) ========
   A page's main button becomes this while there is no snapshot: the Generator's Submit / Build button and the
   Prioritizer's bar button. Same two lines, same shape, wherever the button sits. */
.nh-needs-snap { white-space:normal !important; line-height:1.25 !important; padding-top:9px !important; padding-bottom:9px !important; border-radius:12px !important; text-align:center;
  flex-direction:column; align-items:center; justify-content:center; }   /* where the button is a flex box (the Prioritizer's bar on a phone) the two lines still stack */
.nh-needs-snap .nh-snap-cta { display:block; font-weight:700; }
.nh-needs-snap .nh-snap-sub { display:block; font-size:12px; font-weight:400; line-height:1.35; margin-top:5px; opacity:.92; }
.nh-two-line { white-space:normal !important; line-height:1.2 !important; text-align:center; }   /* 28fm (196): ✦ Suggest a starting point + (from your state) */
.nh-two-line .nh-btn-l1 { display:block; }
.nh-two-line .nh-btn-l2 { display:block; font-size:11px; font-weight:400; margin-top:2px; opacity:.9; }
#pm-sticky #pm-sticky-btn.nh-needs-snap { max-width:430px; }
/* 28fi (181, Dan's iPad: the words sat at the top of the tall button). On the Generator the invitation is stretched to the
   message box's height; Chrome centres a button's contents by itself, Safari does not. As a flex column the centring
   above applies on every browser. The button is a flex item there, so its own box does not change. */
:where(.pg-generator) .compose-action-slot > button.nh-needs-snap { display:flex; }

/* ======== Prioritizer, Rife tab: the picked presets as a read-only list (28dn) ======== */
body.pg-prioritizer textarea.pm-ro-list, textarea.pm-ro-list { width:100%; box-sizing:border-box; font:inherit; font-size:14px; line-height:1.55; padding:2px 0 2px 12px !important; margin-top:6px; border:none !important; border-left:3px solid #cfdcec !important; border-radius:0 !important; background:transparent !important; color:#212529; resize:none; outline:none !important; box-shadow:none !important; cursor:default; }
textarea.pm-ro-list::placeholder { color:#6c757d; }

/* ======== Choose Waveforms line: spacing (28dq, Dan: "make sure why these waveforms is spaced properly") ========
   The set, then Edit and Why these as their own items: they wrap to a new line together and cleanly — no orphaned
   dot at the start of a line, and "4 of 9" never splits. */
:where(.pg-player) .pl-wf-tail { display:flex; flex-wrap:wrap; align-items:baseline; gap:2px 14px; }
:where(.pg-player) .pl-wf-tail .pl-wf-sep { display:none; }
:where(.pg-player) .pl-wf-summary .pl-wf-muted { white-space:nowrap; }
:where(.pg-player) .pl-wf-tail .pl-wf-link a { font-size:12.5px; font-weight:600; }

/* ======== Picker windows: the Show control (28dv) — Categories · Subcategories · Phrases ======== */
.tp-tools .tpk-show { display:inline-flex; align-items:center; gap:0; flex-wrap:nowrap; }
.tp-tools .tpk-show-l { font-size:12px; color:#6c757d; margin-right:6px; }
.tp-tools .tpk-lv { font:inherit; font-size:12.5px; font-weight:600; color:#1066c4; background:#fff; border:1px solid #c9d6e6; border-left-width:0; padding:5px 10px; min-height:30px; cursor:pointer; border-radius:0; line-height:1.2; }
.tp-tools .tpk-lv:first-of-type { border-left-width:1px; border-radius:6px 0 0 6px; }
.tp-tools .tpk-lv:last-of-type { border-radius:0 6px 6px 0; }
.tp-tools .tpk-lv:only-of-type { border-radius:6px; }
.tp-tools .tpk-lv.is-active { background:#1066c4; color:#fff; border-color:#1066c4; }
@media (max-width:560px) { .tp-tools { flex-wrap:wrap; row-gap:8px; } .tp-tools .tpk-show { order:5; flex:1 1 100%; } .tp-tools .tpk-lv { flex:1 1 0; padding:7px 4px; min-height:36px; } }

/* Show levels: readable under a pointer (28dw — the site's button hover turned an unlit level solid blue with blue words). */
.tp-tools .tpk-lv:hover, .tp-tools .tpk-lv:focus-visible { background:#eaf2fc !important; color:#1066c4 !important; border-color:#9dbfe6 !important; }
.tp-tools .tpk-lv.is-active, .tp-tools .tpk-lv.is-active:hover, .tp-tools .tpk-lv.is-active:focus-visible { background:#1066c4 !important; color:#fff !important; border-color:#1066c4 !important; }

/* ======== Player layout, 28dy: the intro strip across both columns; the two columns end level ======== */
:where(.pg-player) .nh-intro.nh-intro--wide { margin: 0 0 12px; }
:where(.pg-player) .build-grid.has-steps > .build-col:last-child { display: flex; flex-direction: column; }
/* (28ek: the spare height goes to the last card, Keep and Share, not into the steps card — see the end of the file.) */

/* ======== Less space above the top navigation (28dz, Dan: "a lot of padding above the top nav") ========
   It sat 34px down (20px page padding + 14px nav margin). Now 12px on the Player, Generator, Prioritizer and Setup. */
html.pg-player body, html.pg-generator body, html.pg-prioritizer body, html.pg-setup body { padding-top: 12px; }
#xnav { margin-top: 0 !important; }

/* Plans window: "Why it's different" (28ea) */

/* ======== Keep and Share Your Session, 28ed: Save and Share is a solid tile (the call to action); Review History is a row with a › ======== */

.pg-player .nh-keep-row { display: flex; gap: 10px; }
.pg-player .nh-keep-btn { flex: 1 1 0; min-width: 0; min-height: 46px; font-size: 15px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; gap: 8px; border-radius: 10px; }

.pg-player .nh-keep-btn { font-size: 14px; padding-left: 6px; padding-right: 6px; }
/* Keep and Share Your Session: smaller buttons that fit their words (Dan: "smaller / shorter, they are overpowering the
   above"; "do not have to be equal width"); Review History in the step rows' type. */
.pg-player .nh-keep-row { flex-wrap: wrap; gap: 8px; }
.pg-player .nh-keep-btn { flex: 0 1 auto; min-height: 34px; padding: 5px 14px; font-size: 13.5px; font-weight: 600; border-radius: 999px; }
.pg-player #nh-history-line { cursor: pointer; }
.pg-player #nh-history-line:hover { background: #f5f9ff; }

/* ======== 28ee: tighter around the marketing strip; three white buttons; the history marker at the steps' weight ======== */
:where(.pg-player) .nh-intro.nh-intro--wide { margin: -18px 0 -8px; }   /* the page's own 20px gap sat on top of both neighbours' margins: 30px above, 32 below → 12 and 12 */

/* ======== Plans — the window and plans.html share this (28ee) ======== */
.nh-pp { font-size:14px; line-height:1.5; color:#212529; }
.nh-pp-hero { display:grid; grid-template-columns:minmax(0,1.25fr) minmax(0,1fr); gap:18px; align-items:center; margin:6px 0 12px; }
.nh-pp-brand { display:flex; align-items:center; gap:8px; font-size:13px; color:#5a6472; margin-bottom:6px; }
.nh-pp-h { font-size:26px; line-height:1.2; margin:0 0 6px; font-weight:700; color:#12233b; }
.nh-pp-uvp { margin:0 0 12px; font-size:15px; color:#33404d; }
.nh-pp-cta { min-height:44px; padding:10px 22px; font-size:15px; }

.nh-pp-vid { width:100%; max-height:210px; border-radius:10px; background:#0d1b2e; display:block; }
.nh-pp-play { display:none; }
.nh-pp-why { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin:0 0 12px; }
.nh-pp-why > div { border:1px solid #d7e3f4; border-radius:10px; background:#f5f9ff; padding:10px 14px; }
.nh-pp-why ul { margin:4px 0 0; padding-left:18px; } .nh-pp-why li { margin:2px 0; }
.nh-pp-plan { text-align:left; font:inherit; color:inherit; cursor:pointer; align-items:stretch; }
.nh-pp-plan:focus-visible { border-color:#1066c4 !important; background:#f4f8fd !important; color:inherit !important; }
@media (hover: hover) { .nh-pp-plan:hover { border-color:#1066c4 !important; background:#f4f8fd !important; color:inherit !important; } }   /* 28el (item 22): on a phone a tapped card kept its hover outline, so two cards looked picked */
.nh-pp-plan:hover { color:inherit !important; }
.nh-pp-plan ul { margin:2px 0 0; padding-left:18px; font-size:13px; }

.nh-pp-share { display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin:12px 0 4px; }
@media (max-width:700px) {
  .nh-pp-hero { grid-template-columns:1fr; gap:10px; }
  .nh-pp-h { font-size:22px; }
  .nh-pp-play { display:inline-flex; }                 /* on a phone the video stays folded behind one button (Dan: "is the whole screen going to be taken up by the video? Not sure I want that") */
  .nh-pp-video .nh-pp-vid { display:none; margin-top:8px; }
  .nh-pp-video.is-open .nh-pp-vid { display:block; }
  .nh-pp-why { grid-template-columns:1fr; gap:8px; }
  .nh-pp-cta { width:100%; }
}
.pg-plans .nh-pp-page { max-width:940px; margin:0 auto; background:#fff; border:1px solid #dfe5ee; border-radius:14px; padding:18px 20px; }
/* Plans window: sharing in the bottom bar, left of Close. */
.nh-pp-foot { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.nh-pp-foot .nh-pp-share { margin: 0 auto 0 0; }
/* Plans: the two calls to action on one row; See pricing shows on a phone only; the video behind a small link there. */
.nh-pp-ctas { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.nh-pp-see { display: none; min-height: 44px; }
.nh-pp-play { display: none; font-size: 13px; margin-top: 8px; }
.nh-pp-share a { text-decoration: none; }
@media (max-width: 700px) {
  .nh-pp-ctas { flex-wrap: nowrap; } .nh-pp-ctas > * { flex: 1 1 0; min-width: 0; padding-left: 8px; padding-right: 8px; }
  .nh-pp-see { display: inline-flex; align-items: center; justify-content: center; }
  .nh-pp-play { display: inline-block; }
}
/* Plans: the line a locked thing brings with it; "Share on" folds to one label on a phone so the bar stays short. */
.nh-pp-note { margin: 0 0 10px; padding: 8px 12px; border-radius: 8px; background: #fff; color: #1a3b63; font-size: 13.5px; font-weight: 600; border-left: 4px solid #ffc107;}
.nh-pp-onlbl { display: none; font-size: 12px; color: #5f6b7a; }
.nh-pp-em { text-transform: none; }
.nh-pp .nh-plans { margin:10px 0; }
.guide-signup { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; margin:0 0 14px; padding:10px 14px; border:1px solid #cfe0f6; border-left:5px solid #1066c4; border-radius:10px; background:#f5f9ff; font-size:14px; }
.guide-signup:last-child { margin:18px 0 0; }

/* 58 — the Guide on a phone: less margin inside margin, so text and videos use the width; the five tabs fit one row. */
@media (max-width: 680px) {
  .nh-docs-body { padding: 14px 12px; }
  .nh-docs-body .g-card { padding: 14px; }
  #guide-tabs { gap: 2px !important; }
  #guide-tabs .guide-tab1 { padding: 8px 3px !important; font-size: 12px !important; flex: 1 1 auto; letter-spacing: -.1px; }
}

/* ======== One look for every membership upsell (28ee, Dan: "not sure how we got to gold here… consistent styles across
   all membership upsells. If we use gold, it needs to be part of master style sheet and consistent") ========
   No gold. The words ("Membership", "Trial or membership") are the site's blue on a light control and white on a solid
   blue one; where there is no room for words (nav tabs, step titles, small buttons) the control carries a lock icon
   (data-nh-note="icon"). The page-level notice keeps the site's yellow-stripe notice style. */
.nh-gated > .nh-gate-note { color: #1066c4; font-weight: 600; }
.nh-btn--primary.nh-gated > .nh-gate-note, .bys-tile.nh-gated > .nh-gate-note { color: #fff; }

/* ================= 28ef ================= */
/* The upgrade badge — ONE look for every "Membership" / "Trial or membership" label (Dan: "is there a different… color?";
   replaces white-on-tile, grey-on-step and blue-on-button). The site's notice palette: pale yellow, dark amber, a pill.
   Where there is no room for words the lock icon alone is amber. Use .nh-upg for any new one. */
.nh-upg, .nh-gated > .nh-gate-note, .nh-bar-t.nh-gated .nh-bar-lock,
:where(.pg-player) .bys-tile.nh-gated > .nh-gate-note, .nh-gated.cs-act > .nh-gate-note, .nh-btn--primary.nh-gated > .nh-gate-note {
  display: inline-block; width: auto; background: #e7f1ff; color: #0b3d7a !important; border-radius: 999px; padding: 1px 9px;   /* 28fn (219, Dan: "fix the golds back to blue"): was pale yellow / dark gold */
  font-size: 11.5px; font-weight: 700; line-height: 1.5; opacity: 1; filter: none; }
.pl-step-st.nh-upg { flex: 0 0 auto; overflow: visible; }
.bys-tile.nh-gated > .nh-gate-note, .nh-gated.cs-act > .nh-gate-note { justify-self: start; align-self: flex-start; margin-top: 4px; }
.nh-gated[data-nh-note="icon"]::after { background: #1066c4; opacity: 1; }   /* 28fn (219): the lock beside a word is blue (was gold) */
.nh-btn--primary.nh-gated[data-nh-note="icon"]::after { background: #fff; }   /* …and white on a solid blue button */
@media (max-width: 700px) {
  .nh-pp-on { display: none; } .nh-pp-onlbl { display: inline; } .nh-pp-em { text-transform: capitalize; }
  .nh-pp-foot .nh-pp-share { gap: 6px; } .nh-pp-foot .nh-pp-share .nh-btn { padding-left: 9px; padding-right: 9px; }
}
@media (max-width: 700px) {
  .nh-pp-foot .nh-pp-share { display: contents; }
  .nh-pp-foot > .nh-btn:last-child { margin-left: auto; }
}
/* Navigation: logo and name at the left; Plans. The name hides on a phone (the mark stays). */
.xnav .nh-brand { display: inline-flex; align-items: center; gap: 7px; padding: 4px 10px 4px 6px; margin-right: 4px; font-weight: 700; font-size: 14px; color: #12233b; text-decoration: none; background: none; white-space: nowrap; flex: 0 0 auto; }
.xnav .nh-brand img { display: block; border-radius: 50%; }
@media (max-width: 1100px) { .xnav .nh-brand span { display: none; } .xnav .nh-brand { padding-right: 4px; } }
html[data-level="trial"] .xnav .nh-nav-plans { color: #1066c4; font-weight: 700; }   /* 28eq: a Visitor gets the solid "Subscribe" button instead (.is-cta) */

@media (max-width: 560px) {  .pg-player .nh-keep-btn { flex: 1 1 auto; } }
/* On a phone the window's bottom bar keeps Bookmark, Share and Close on one line — the Share button opens the phone's
   share sheet (X, Facebook, TikTok, Messages…), so the three "Share on …" links are for wider screens. */
/* (28eh: the per-network buttons show on a phone again — see below.) */
/* Keep and Share buttons take the step rows' look — white, grey outline, dark bold text — so the right column is one
   family (Dan: "weird that we are bouncing between black outlined things and blue outlined things"). Blue on hover. */
.pg-player .nh-keep-btn { background: #fff !important; border: 1px solid #d5dce6 !important; color: #1f2937 !important; font-weight: 700; box-shadow: 0 1px 2px rgba(16,24,40,.06); }
.pg-player .nh-keep-btn:hover, .pg-player .nh-keep-btn:focus-visible { border-color: #1066c4 !important; color: #1066c4 !important; background: #f5f9ff !important; }

/* 10, 65 — Save and Share Your Session: two by two on a phone and wherever four across will not fit; four across,
   one line, on wide screens. Even widths either way. */
.pg-player .nh-keep-row { display: grid; grid-template-columns: repeat(4, minmax(0, auto)); justify-content: start; gap: 8px; }
/* A window held out of sight while its own confirmation is up (one overlay, not two). */
.nh-backdrop.nh-win-held { visibility: hidden; }

/* ================= 28eg ================= */
/* A locked tile keeps its full blue — the amber badge and lock say it is locked (Dan: "I don't think we need the blue
   buttons faded, just the locked gold symbols enough"). */
:where(.pg-player) .bys-tile.nh-gated, .bys-tile.nh-gated { opacity: 1; background: #1066c4; }
:where(.pg-player) .bys-tile.nh-gated::after { background: #fff; opacity: 1; }
/* The upgrade badge looks the same wherever it sits (Dan: "be consistent with membership fonts"): a locked control greys
   its other children, never the badge; a locked step shows the badge alone (its grey lock is gone); on a phone the badge
   drops to its own line under the step's name so it is never cut off. */
.nh-gated > .nh-upg, .nh-gated > .nh-gate-note { opacity: 1 !important; filter: none !important; }
.pl-step-h.nh-gated .pl-step-t::after { display: none; }
@media (max-width: 560px) {
  .pl-step-h.nh-gated { flex-wrap: wrap; row-gap: 4px; }
  .pl-step-h.nh-gated .pl-step-chev { margin-left: auto; }
  .pl-step-h.nh-gated::before { content: ""; order: 9; flex: 0 0 100%; height: 0; }
  .pl-step-h.nh-gated .pl-step-st.nh-upg { order: 10; margin-left: 22px; }
}

/* ================= 28eh ================= */
/* The lock lives INSIDE the upgrade badge — one amber piece everywhere (Dan: "lock buttons in blue bad. Lock buttons
   elsewhere missing"). The separate corner lock on a tile (which 28eg turned into a yellow square) is gone. */
.nh-upg::before, .nh-gated > .nh-gate-note:not(.nh-gate-note--page)::before, .nh-bar-t.nh-gated .nh-bar-lock::before {
  content: ""; display: inline-block; width: 10px; height: 10px; margin-right: 5px; vertical-align: -1px;
  background: no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230b3d7a' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='11' width='16' height='10' rx='2'/%3E%3Cpath d='M8 11V7a4 4 0 0 1 8 0v4'/%3E%3C/svg%3E"); }
:where(.pg-player) .bys-tile.nh-gated::after, .bys-tile.nh-gated::after { display: none !important; }
/* Badges sit on one line across a row of tiles, whatever the title's length (Dan: "bottom align word membership"). */
:where(.pg-player) .bys-tile.nh-gated > .nh-gate-note, .bys-tile.nh-gated > .nh-gate-note { margin-top: auto; }
:where(.pg-player) .bys-tile.nh-gated { justify-content: flex-start; }
/* ===== 28fg — the search results' Next line (154, Dan: "X phrases should be a link to 'next'") =====
   One column only (two columns show Shape Your Session beside the results). It rests at the top of the results box,
   under the search field, and stays there while the list scrolls. */
:where(.pg-player) .bys-next { display: none; }
@media (max-width: 900px) {
  :where(.pg-player) .bys-results .bys-next:not([hidden]) { display: block; position: sticky; top: 0; z-index: 1; background: #f1f6ff; border-bottom: 1px solid #d6e4f5; padding: 10px 12px; min-height: 36px; box-sizing: border-box; font-size: 13px; font-weight: 700; line-height: 1.25; color: #0b3d7a; text-align: right; text-decoration: none; }
  :where(.pg-player) .bys-results .bys-next:hover, :where(.pg-player) .bys-results .bys-next:active { background: #e7f1ff; color: #0b3d7a; }
}
/* The badge never breaks onto two lines; on a phone the Plans bar's buttons and Close flow together (two lines, not three). */
.nh-upg, .nh-gated > .nh-gate-note:not(.nh-gate-note--page) { white-space: nowrap; max-width: 100%; }
.pg-community .cm-ph--locked .nh-upg { margin-left: 6px; font-style: normal; }
@media (max-width: 560px) { .bys-tile.nh-gated > .nh-gate-note { font-size: 11px; padding: 1px 7px; } }
/* The footer card's title is a real heading now (for search); keep the look it had as a div. */
h2.what-is-title { font-size: 14px; line-height: 1.35; margin: 0 0 8px; }

/* ================= 28ei ================= */
/* Locked looks one way everywhere: full strength, marked by the amber badge or the amber lock — no greying
   (Dan: "Yes they should lose their grey"). Step rows, nav tabs and the Keep and Share buttons join the tiles. */
.pl-step-h.nh-gated > * { opacity: 1 !important; filter: none !important; }
/* Step status: only the short part on a phone. */
@media (max-width: 560px) { .pl-step-st .pl-st-x { display: none; } }

/* ================= 28ek ================= */
/* The columns still end level, but the spare height sits at the foot of the last card (Keep and Share), not as a gap
   under Set Session Length (Dan: "we created a ton of white space under set session length"). */

:where(.pg-player) .pl-shape-sep { margin: 0 0 10px; }
.xnav a.nh-gated[data-nh-note="icon"], .pg-player .nh-keep-btn.nh-gated[data-nh-note="icon"] { opacity: 1; }

/* ================= 28ej — phone pass (Dan's review of 28ei and the phone-width scan) ================= */
/* Volume on a phone is ONE button in the play bar's own button style (it steps High → Med → Low → Mute); the four links
   stay on wider screens. 28ek (Dan: "volume font on mobile not following font standards… did you use existing styles?"):
   28ej's selector had its own type and iOS drew it larger still; this is a plain bar button, so it cannot drift. */
.floating-controls .vol-cycle { display: none; }
@media (max-width: 700px) { .volume-control .vol-link, .volume-control .vol-icon { display: none !important; } .floating-controls .vol-cycle { display: inline-flex; } }
/* The step number inside the Play button keeps its circle. */
body.nh-steps-on #playBtnFloat { display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
/* The Show control's words sit in the middle of each button. */
.tp-tools .tpk-lv { text-align: center; justify-content: center; }

/* 7, 8 — picker windows on a phone: a long phrase and its description wrap; nothing is cut with "…". */
@media (max-width: 700px) {
  .tp-item > span.tpk-leaftext { white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: anywhere; }
  .tp-item.tpk-leafrow { align-items: flex-start; }
  .tp-item.tpk-leafrow input[type=checkbox] { margin-top: 2px; }
  .tpk-leaftext .tpk-desc { display: block; margin-top: 1px; }
  .tp-item.tpk-pad-58 { padding-left: 40px; }
}
/* Plans: the fixed bar is the call to action alone; sharing ends the content. */
.nh-pp-foot { justify-content: center; }
.nh-pp-foot .nh-pp-cta { min-width: 220px; }
.nh-pp > .nh-pp-share { margin: 14px 0 4px; }
@media (max-width: 700px) { .nh-pp > .nh-pp-share { display: flex; } .nh-pp-foot .nh-pp-cta { width: 100%; } }
/* plans.html: the call to action sticks to the bottom of the screen, as the window's fixed bar does. */
.nh-pp-stick { position: sticky; bottom: 0; margin: 12px -20px -18px; padding: 10px 20px calc(10px + env(safe-area-inset-bottom, 0px)); background: #fff; border-top: 1px solid #e3e8ef; border-radius: 0 0 14px 14px; text-align: center; }
/* Tap targets on a phone: nothing a finger has to hit is under 36px tall. */
@media (max-width: 700px) {
  .nh-pp-share .nh-btn, .pl-step-foot .nh-btn, .pl-next, .nh-intro .nh-intro-step, .nh-snap-pill, .nh-snap-btn, .pf-count button, .pf-ideas, .pm-tabs button, .pm-tab,
  .tp-tools .tpk-lv, .tp-tools button, .nh-btn--sm, .nh-intro-x { min-height: 36px; }
  .nh-intro-x { min-width: 36px; }   /* 28el (item 35): the (i) is no longer in this rule — it made the disc itself 36px */
  .pg-community .tag { padding-top: 7px; padding-bottom: 7px; }
}
/* Plans: every share button centres its word the same way, link or button (Dan: "some are top aligned… some mid"). */
.nh-pp-share .nh-btn { display: inline-flex; align-items: center; justify-content: center; line-height: 1.2; }
/* Set Session Length's status wraps on a phone, so it is never cut. */
@media (max-width: 560px) { #pl-st-setup { white-space: normal; text-align: left; font-size: 11.5px; line-height: 1.25; } }   /* 28iz: left, under the title like every status */
/* Set Session Length: four fields of one size on one baseline — the label row is one height whether or not it holds
   the Clear link, and the time field cannot be wider than its column (Dan: "start time box size mismatch"). */
:where(.pg-player) .session-limits-grid > div { min-width: 0; }
:where(.pg-player) .session-limits-grid label { display: flex; align-items: center; gap: 6px; min-height: 20px; white-space: nowrap; }
:where(.pg-player) .session-limits-grid input, :where(.pg-player) .session-limits-grid select { width: 100%; min-width: 0; box-sizing: border-box; height: 38px; }
:where(.pg-player) .session-limits-grid input[type="time"] { -webkit-appearance: none; appearance: none; display: block; }

/* ================= 28el — Session 36, build pass 1 (the Session 35 review, items 1–69) ================= */
/* 1, 2 — locked is never grey. A locked page shows at full strength under its yellow notice (a tap on it opens Plans —
   site-common.js); every locked control with a lock icon, the tiles in the Share window and the Community's Submit a
   session show at full strength with the amber lock; a locked Community set carries the amber badge. */
.nh-page-dim { opacity: 1; filter: none; pointer-events: auto; cursor: pointer; }
.nh-gated[data-nh-note="icon"], .nh-gated.cs-act, .nh-bar-t.nh-gated { opacity: 1; }
.pg-community .cm-topbtn.nh-gated[data-nh-note="icon"]::after, .pg-community .cm-btn.nh-gated[data-nh-note="icon"]::after { background: #ffe08a; }   /* the lock reads on the brown button */
/* 32 — a locked Generator or Prioritizer does not ask a Visitor to add a key and set a state. */
html[data-level="visitor"].pg-generator #setup-strip, html[data-level="visitor"].pg-prioritizer #setup-strip, html[data-level="trial"].pg-prioritizer #setup-strip { display: none !important; }

/* 9, 35 — the (i): an upright "i" on a small disc on every page. On a phone the disc is 22px and the tap area around it
   is 36px — the area grows, not the drawing. */
.info-btn { position: relative; font-style: normal !important; }
@media (max-width: 700px) {
  .info-btn { width: 22px !important; height: 22px !important; min-width: 22px !important; min-height: 22px !important; flex: 0 0 22px; font-size: 13px !important; }
  .info-btn::after { content: ""; position: absolute; inset: -7px; }
}

/* 6 — tap targets on a phone, by the names the pages really use (28ej's rule named four that do not exist). Buttons
   are at least 36px tall; text links keep their size and get a 36px tap area around them. */
@media (max-width: 700px) {
  .nh-btn, .snap-slot-btn, .qb-count-btn, .xnav a, .xnav span.active, a.nh-feedback, a.nh-feedback-bar, .nh-level-pick select,
  .pg-setup button.secondary, .pg-player .nh-keep-btn, .pg-community .cm-btn, .pg-community .cm-btn2, .pg-community .cm-brand, .pg-community .cm-topbtn { min-height: 36px; box-sizing: border-box; }
  a.nh-btn:not([hidden]), .xnav a, .xnav span.active, .pg-community a.cm-btn:not([hidden]), .pg-community a.cm-btn2:not([hidden]), .pg-community a.cm-topbtn { display: inline-flex; align-items: center; justify-content: center; }
  a.nh-feedback-bar { display: flex; align-items: center; justify-content: center; }
  .setup-strip-x, .nh-link, .xfoot a, .pg-community .cm-home, .pg-community a.cm-open, .pg-community summary.cm-h, .pg-setup a.guide-jump,
  .pg-setup #reset-cost-inline, .pg-setup #spend-details-link, #phrase-list-copy, #phrase-list-clear, .setup-strip a, .pg-legal .container p a:not(.nh-btn), .pg-legal .container li a:not(.nh-btn) { position: relative; }
  .setup-strip-x::before, .nh-link::before, .xfoot a::before, .pg-community .cm-home::before, .pg-community a.cm-open::before, .pg-community summary.cm-h::before, .pg-setup a.guide-jump::before,
  .pg-setup #reset-cost-inline::before, .pg-setup #spend-details-link::before, #phrase-list-copy::before, #phrase-list-clear::before, .setup-strip a::before, .pg-legal .container p a:not(.nh-btn)::before, .pg-legal .container li a:not(.nh-btn)::before {
    content: ""; position: absolute; left: -5px; right: -5px; top: 50%; height: 36px; transform: translateY(-50%); }
  .setup-strip-x::before { left: -8px; right: -8px; }
}
.pg-player .nh-keep-btn { min-width: 0; padding-left: 12px; padding-right: 12px; }
/* 28fr (233): the lock follows the last word of the label — it is drawn on the label, not as its own flex item (which sat
   apart from the words wherever a label wrapped or a browser stretched the text item). */
.pg-player .nh-keep-btn.nh-gated[data-nh-note="icon"]::after { display:none; }
.pg-player .nh-keep-btn.nh-gated[data-nh-note="icon"] > .nh-keep-l { opacity:1; filter:none; }   /* the label stays as it was (locked buttons are not greyed — 28ei) */
.pg-player .nh-keep-btn.nh-gated[data-nh-note="icon"] .nh-keep-l::after { content:""; display:inline-block; width:11px; height:11px; margin-left:6px; vertical-align:-1px; background:#1066c4;
  -webkit-mask:no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='11' width='16' height='10' rx='2'/%3E%3Cpath d='M8 11V7a4 4 0 0 1 8 0v4'/%3E%3C/svg%3E"); mask:no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='11' width='16' height='10' rx='2'/%3E%3Cpath d='M8 11V7a4 4 0 0 1 8 0v4'/%3E%3C/svg%3E"); }
@media (max-width: 1259px) {
  .pg-player .nh-keep-row { grid-template-columns: 1fr 1fr; justify-content: stretch; }
  .pg-player .nh-keep-btn { width: 100%; white-space: normal; line-height: 1.2; }
}

/* 11, 39 — the play bar: Play is the only solid button. Pause and Stop are outline buttons while they can be pressed and
   pale while they cannot (dark grey read as disabled while a session played); the phone's volume button is an outline
   button. The speaker is drawn here, so an iPhone cannot show it as a colour emoji. */
.pg-player .floating-controls .pause-btn, .pg-player .floating-controls .stop-btn { background: #fff !important; color: #1f2937 !important; border: 1px solid #b8c4d3 !important; }
.pg-player .floating-controls .pause-btn:hover:not(:disabled), .pg-player .floating-controls .stop-btn:hover:not(:disabled) { background: #f1f6ff !important; border-color: #1066c4 !important; color: #1066c4 !important; box-shadow: none !important; }
.pg-player .floating-controls .pause-btn:disabled, .pg-player .floating-controls .stop-btn:disabled { background: #f3f5f8 !important; color: #9aa3ad !important; border-color: #e1e6ec !important; opacity: 1 !important; }
.pg-player .floating-controls .vol-cycle { background: #fff !important; color: #1066c4 !important; border: 1px solid #1066c4 !important; }
.pg-player .floating-controls .vol-cycle::before, .pg-player .volume-control .vol-icon::before { content: ""; display: inline-block; width: 15px; height: 15px; vertical-align: -3px; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 9v6h4l5 5V4L7 9H3zm13.5 3a4.5 4.5 0 0 0-2.5-4v8a4.5 4.5 0 0 0 2.5-4z'/%3E%3C/svg%3E") no-repeat center / contain; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 9v6h4l5 5V4L7 9H3zm13.5 3a4.5 4.5 0 0 0-2.5-4v8a4.5 4.5 0 0 0 2.5-4z'/%3E%3C/svg%3E") no-repeat center / contain; }
.pg-player .floating-controls .vol-cycle::before { margin-right: 5px; }
.pg-player .volume-control .vol-icon { color: #5a6472; }

/* 15, 59 — share and referral buttons: one height, words in the middle; "Share on" starts its own line on a phone so
   it stays with its buttons. */
.nh-pp-share { align-items: center; }
.nh-pp-share .nh-btn, .nh-ref-row .nh-btn { min-height: 36px; box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; line-height: 1.2; }

/* 68 — one focus ring on the site's buttons (the browser's own was orange on some). */
.nh-btn:focus-visible, .tp-btn:focus-visible, .nh-win-x:focus-visible, .nh-plan:focus-visible { outline: 2px solid #1e87fd; outline-offset: 2px; }

/* ======== 28ep — Session 38 ======== */
/* (87) Under the pointer (Dan: "miscoloration on mouse over all over the site"). The site-wide rule that fills a button
   brand blue under the pointer is right for a solid blue button only. A button that is white or pale at rest goes pale
   blue and keeps its own text colour. 28cr did this for outline buttons; these are the rest. Site-check 19 puts every
   control under a forced pointer, so a new white button without this cannot ship. */
body button.nh-btn:not(.nh-btn--primary):hover:not(:disabled), body button.tp-btn-secondary:hover:not(:disabled), body button.tp-view.is-active:hover:not(:disabled),
body button.nh-intro-step:not(.is-cta):hover:not(:disabled), body button.pl-tab:hover:not(:disabled) { background:#eef5ff; }
@media (max-width: 700px) { .nh-pp-share .nh-pp-onlbl { flex: 0 0 100%; } }
/* A tapped plan card on a phone (Dan, iPhone: "fix the black on blue for all those on clicks"). A phone keeps a tapped
   button "under the pointer" until the next tap; the card's own pointer rule is for a real mouse only (28el, item 22), so
   the site-wide blue fill took over and the card's dark text sat on blue. On touch the card keeps its resting fill.
   Site-check 19 now runs as a phone too, and with every control pressed and focused. */
@media (hover: none) { .nh-pp-plan:hover { background:#fbfcfe !important; } .nh-pp-plan.is-pick:hover { background:#f4f8fd !important; } }

/* 17 — Review History: no card inside the window's card; its four tabs are one row of pills. */
#nh-history-host .nh-history-src { border: 0; background: transparent; box-shadow: none; padding: 0; margin: 0; }
.hist-tabrow { display: flex; flex-wrap: nowrap; align-items: center; gap: 6px; margin-bottom: 10px; overflow-x: auto; scrollbar-width: none; }
.hist-tabrow::-webkit-scrollbar { display: none; }
:where(.pg-player) .hist-tabrow .hist-tab, body .hist-tabrow button.hist-tab { flex: 0 0 auto; border: 1px solid #cfd9e6; border-radius: 999px; background: #fff; color: #495057; padding: 6px 12px; font-size: 13px; font-weight: 600; }
body .hist-tabrow button.hist-tab.active, body .hist-tabrow button.hist-tab.active:hover { background: #1066c4; color: #fff; border-color: #1066c4; }
/* On a phone four pills do not fit one line: two even rows of two, rather than a row that runs off the edge. */
@media (max-width: 700px) { .hist-tabrow { display: grid; grid-template-columns: 1fr 1fr; overflow: visible; } .hist-tabrow .hist-tab { min-height: 36px; padding: 6px 10px; font-size: 12.5px; text-align: center; }
  .hist-tabrow > :not(.hist-tab) { grid-column: 1 / -1; justify-self: end; } }

/* 23 — Setup checklist on a phone: the circle sits beside its title, however long the title is. */
@media (max-width: 700px) {
  .nh-ci { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; column-gap: 10px; row-gap: 2px; align-items: center; }
  .nh-ci > b { grid-column: 2; }
  .nh-ci > .nh-ci-sub { grid-column: 2; grid-row: 2; margin-right: 0; }
  .nh-ci > .nh-ci-chev { grid-column: 3; grid-row: 1 / span 2; }
}

/* 62, 63, 64, 67 — the top of the page. The feedback bar is never under the nav's upper edge and never flush to the
   top; the nav fits an iPad and a laptop (the "Preview as" label and, below 1260px, the site name make way); on a
   phone the nav is opaque edge to edge (its faded ends let the banner show through beside it while scrolling) and a
   soft inner shadow at the right says there are more tabs. */
a.nh-feedback-bar { position: relative; z-index: 9501; }
.pg-legal .container { padding-top: 12px; }

/* (13) One side margin on a phone: 12 px, as on the Generator, the Prioritizer and Setup (the Player had 20, Plans and the
   legal pages 16). Community keeps its own frame. */
@media (max-width:600px) {
  html.pg-player body { padding-left:12px; padding-right:12px; }
  .pg-legal .container { padding-left:12px; padding-right:12px; }
}
@media (max-width: 1439px) { .xnav .nh-level-l { display: none; } }
/* "Subscribe" is 32 px wider than "Plans"; the testing dropdown gives that width back so the row still fits where it did. */
html[data-level="visitor"] .nh-nav-right .nh-level-pick select { max-width:128px; }
@media (max-width: 1259px) { .xnav .nh-brand span { display: none; } .xnav .nh-brand { padding-right: 4px; } }
@media (max-width: 680px) {
  .xnav { -webkit-mask-image: none; mask-image: none; box-shadow: 0 -16px 0 0 #f8f9fa, 0 6px 10px -8px rgba(16, 24, 40, .22), inset -18px 0 12px -12px rgba(16, 24, 40, .22); }
}

/* ======== 28en — pass 2 of the Session 35 review: one of each (Session 37, 2026-10-01) ======== */
/* (18) One footer on every page (site-common.js nhFooter). The first item is the © line, a link home. On a phone the
   dots go (a wrapped line used to start with a stray "·") and the items are simply spaced. */
.xfoot .xfoot-meta > a:first-child { text-decoration:none; }
.xfoot .xfoot-extra { display:block; margin-top:4px; }
@media (max-width:680px) {
  .xfoot .xfoot-meta { gap:4px 14px; }
  .xfoot .xfoot-meta .sep { display:none; }
  .xfoot .xfoot-meta .nh-legal-links { display:contents; }
}
/* Community keeps its own colours on the shared footer (Dan: its look is intended). */
.pg-community .xfoot { border-top-color:#dfe8e4; }
.pg-community .xfoot .xfoot-note, .pg-community .xfoot .xfoot-meta { color:#6b7a75; }
.pg-community .xfoot .xfoot-meta a { color:var(--cm); text-decoration:none; font-weight:600; }
.pg-community .xfoot .xfoot-meta a:hover { color:var(--cm-d); }

/* (12) Steps 1 and 2 on a phone: the Generator follows the Prioritizer — badge and label on one line, the control on the
   next, full width (the Generator had "Pick a Mode" squeezed beside its tabs, both wrapping to two lines). */
@media (max-width:680px) {
  .gen-steprow { gap:10px 26px; }
  .gen-steprow > .gen-prechat { flex:1 1 100%; flex-wrap:wrap; }

  .gen-steprow #signal-status-strip { display:contents !important; }
     /* on one line now, so they need their own 36 px (the Prioritizer's tabs already have it) */
}

/* (14) Button shapes: Community's buttons are pills like the rest of the site (colours unchanged). Setup's Show and
   Save and check became shared .nh-btn buttons in the page. */
.pg-community .cm-btn, .pg-community .cm-btn2, .pg-community .cm-topbtn { border-radius:999px; padding-left:14px; padding-right:14px; }
/* A bare × has no fill at rest and gets none under the pointer; its own rule turns the × blue. */
body button.nh-intro-x:hover:not(:disabled), body button.setup-strip-x:hover:not(:disabled) { background:transparent; }

/* ===== 28ex — the intro strip (Dan, 2026-10-01): row 1 = things to do, the membership action last; row 2 = one sentence; row 3 = things to read ===== */
:where(.pg-player) .nh-intro-level { margin: 0 0 8px; }
:where(.pg-player) .nh-intro-doors { margin: 0; }

/* ======== 28eq — Session 39 ======== */
/* The nav's Plans link is the one solid button for a Visitor and reads "Subscribe" (Dan: "make plans from nav the primary
   button in nav for visitor as subscribe"). site-common.js nhNavPlansPaint() sets the word and .is-cta. */
.xnav a.nh-nav-plans.is-cta { background:#1066c4; color:#fff; border-radius:999px; padding-left:16px; padding-right:16px; box-shadow:none; }
.xnav a.nh-nav-plans.is-cta:hover, .xnav a.nh-nav-plans.is-cta:focus-visible { background:#0c55a5; color:#fff; }
.xnav a.nh-nav-plans.is-cta:focus-visible { box-shadow:0 0 0 3px rgba(22, 116, 220, .35); }
/* On a phone the nav is one sideways-scrolling row and the button sat at its far end, off screen (Dan: "Yes" to moving it
   to the front). It comes first after the logo and stays at the left edge while the tabs scroll under it. The same
   wherever the row is too narrow to show every tab (an iPad held upright): under 1024 px. */
@media (max-width: 1023px) {
  html[data-level="visitor"] .xnav .nh-brand { order:-2; }
  .xnav a.nh-nav-plans.is-cta { order:-1; position:sticky; left:6px; z-index:1; margin-right:4px; box-shadow:0 0 0 4px #eef2f7; }
}
/* Found when check 19 was run over the lists the pages build while you work (item 90): the Generator's number and next-step
   chips and the Prioritizer's "…" on a result card took the site-wide blue fill under the pointer and after a tap, with
   their dark or blue text on it. A chip that is not picked goes pale and keeps its text (its own pale rule was there,
   but lost to the site-wide one); a picked chip is solid blue with white text and may darken. */
body button.gen-quickpick-chip:not(.selected):hover:not(:disabled) { background:#e8eeff; }
body button.run-more:hover:not(:disabled) { background:#eef5ff; }

/* ======== 28ep — pass 3 of the Session 35 review (items 70, 72): the styles that were written inside the pages ========
   Every style="…" attribute in the pages, the Guide and the shared scripts is now a set of u-* classes: one
   declaration each, named for it (u-fs-12 = font-size 12px, u-c-6c757d = that grey, u-mt-8 = margin-top 8px).
   An inline style beat every other rule, so each of these is written with :not(#_#_#_) — it matches everything and only
   lends the rule that strength — so the look is unchanged: 15,868 elements compared before and after, none differ.
   Shorthands come first (margin before margin-top) so a longhand on the same element still wins, as it did inline.
   New work uses the components above; a u-* class is for a one-off adjustment. Code may still set a style on top
   (el.style…) and wins, as before. Left inline on purpose: display:none (show / hide) and values worked out by code. */
.u-bg-1066c4:not(#_#_#_) { background:#1066c4; }
.u-bg-1674dc:not(#_#_#_) { background:#1674dc; }
.u-bg-d1ecf1:not(#_#_#_) { background:#d1ecf1; }
.u-bg-d4edda:not(#_#_#_) { background:#d4edda; }
.u-bg-e3f2fd:not(#_#_#_) { background:#e3f2fd; }
.u-bg-e6f1fb:not(#_#_#_) { background:#e6f1fb; }
.u-bg-e7f1ff:not(#_#_#_) { background:#e7f1ff; }
.u-bg-e7f3ff:not(#_#_#_) { background:#e7f3ff; }
.u-bg-eef3fa:not(#_#_#_) { background:#eef3fa; }
.u-bg-eef4fc:not(#_#_#_) { background:#eef4fc; }
.u-bg-eef5ff:not(#_#_#_) { background:#eef5ff; }

.u-bg-f3e5f5:not(#_#_#_) { background:#f3e5f5; }
.u-bg-f4f6f8:not(#_#_#_) { background:#f4f6f8; }
.u-bg-f4f7fb:not(#_#_#_) { background:#f4f7fb; }
.u-bg-f5f5f5:not(#_#_#_) { background:#f5f5f5; }
.u-bg-f8f9fa:not(#_#_#_) { background:#f8f9fa; }
.u-bg-fafafa:not(#_#_#_) { background:#fafafa; }
.u-bg-fff:not(#_#_#_) { background:#fff; }
.u-bg-fff3cd:not(#_#_#_) { background:#fff; border-left: 4px solid #ffc107;}

.u-bg-transparent:not(#_#_#_) { background:transparent; }
.u-bg-var-cm:not(#_#_#_) { background:var(--cm); }

.u-b-1-solid-1066c4:not(#_#_#_) { border:1px solid #1066c4; }
.u-b-1-solid-b3d4fc:not(#_#_#_) { border:1px solid #b3d4fc; }
.u-b-1-solid-c9d6e6:not(#_#_#_) { border:1px solid #c9d6e6; }
.u-b-1-solid-ccd1d5:not(#_#_#_) { border:1px solid #ccd1d5; }
.u-b-1-solid-ced4da:not(#_#_#_) { border:1px solid #ced4da; }

.u-b-1-solid-dee2e6:not(#_#_#_) { border:1px solid #dee2e6; }
.u-b-1-solid-dfe6ef:not(#_#_#_) { border:1px solid #dfe6ef; }
.u-b-1-solid-e3e6ea:not(#_#_#_) { border:1px solid #e3e6ea; }
.u-b-1-solid-transparent:not(#_#_#_) { border:1px solid transparent; }
.u-b-none:not(#_#_#_) { border:none; }

.u-c-0c5460:not(#_#_#_) { color:#0c5460; }
.u-c-1066c4:not(#_#_#_) { color:#1066c4; }
.u-c-1a3b63:not(#_#_#_) { color:#1a3b63; }
.u-c-155724:not(#_#_#_) { color:#155724; }
.u-c-212529:not(#_#_#_) { color:#212529; }
.u-c-495057:not(#_#_#_) { color:#495057; }
.u-c-664d03:not(#_#_#_) { color:#1a3b63; border-left: 4px solid #ffc107;}
.u-c-6a1b9a:not(#_#_#_) { color:#6a1b9a; }
.u-c-6c757d:not(#_#_#_) { color:#6c757d; }
.u-c-8a6d1d:not(#_#_#_) { color:#1a3b63; border-left: 4px solid #ffc107;}
.u-c-8a94a0:not(#_#_#_) { color:#8a94a0; }
.u-c-a02020:not(#_#_#_) { color:#a02020; }
.u-c-b45309:not(#_#_#_) { color:#b45309; }

.u-c-dee2e6:not(#_#_#_) { color:#dee2e6; }
.u-c-fff:not(#_#_#_) { color:#fff; }
.u-c-inherit:not(#_#_#_) { color:inherit; }
.u-cur-default:not(#_#_#_) { cursor:default; }
.u-cur-pointer:not(#_#_#_) { cursor:pointer; }
.u-d-block:not(#_#_#_) { display:block; }
.u-d-flex:not(#_#_#_) { display:flex; }
.u-d-grid:not(#_#_#_) { display:grid; }
.u-d-inline-block:not(#_#_#_) { display:inline-block; }
.u-d-inline-flex:not(#_#_#_) { display:inline-flex; }
.u-fx-0-0-auto:not(#_#_#_) { flex:0 0 auto; }
.u-fx-1:not(#_#_#_) { flex:1; }
.u-fx-1-1-240:not(#_#_#_) { flex:1 1 240px; }

.u-gap-10:not(#_#_#_) { gap:10px; }
.u-gap-12:not(#_#_#_) { gap:12px; }
.u-gap-14:not(#_#_#_) { gap:14px; }
.u-gap-15:not(#_#_#_) { gap:15px; }
.u-gap-16:not(#_#_#_) { gap:16px; }
.u-gap-4-16:not(#_#_#_) { gap:4px 16px; }

.u-gap-6:not(#_#_#_) { gap:6px; }
.u-gap-8:not(#_#_#_) { gap:8px; }

.u-h-20:not(#_#_#_) { height:20px; }
.u-h-22:not(#_#_#_) { height:22px; }
.u-h-6:not(#_#_#_) { height:6px; }
.u-m-0:not(#_#_#_) { margin:0; }
.u-m-0-0-0-18:not(#_#_#_) { margin:0 0 0 18px; }
.u-m-0-0-10:not(#_#_#_) { margin:0 0 10px; }
.u-m-0-0-12:not(#_#_#_) { margin:0 0 12px; }
.u-m-0-0-14:not(#_#_#_) { margin:0 0 14px; }

.u-m-0-0-16-0:not(#_#_#_) { margin:0 0 16px 0; }
.u-m-0-0-4:not(#_#_#_) { margin:0 0 4px; }
.u-m-0-0-4-0:not(#_#_#_) { margin:0 0 4px 0; }
.u-m-0-0-6:not(#_#_#_) { margin:0 0 6px; }
.u-m-0-0-6-0:not(#_#_#_) { margin:0 0 6px 0; }
.u-m-0-0-8:not(#_#_#_) { margin:0 0 8px; }
.u-m-0-0-8-0:not(#_#_#_) { margin:0 0 8px 0; }
.u-m-0-0-8-18:not(#_#_#_) { margin:0 0 8px 18px; }
.u-m-0-6-8-0:not(#_#_#_) { margin:0 6px 8px 0; }
.u-m-10-0:not(#_#_#_) { margin:10px 0; }
.u-m-10-0-0:not(#_#_#_) { margin:10px 0 0; }
.u-m-12-0:not(#_#_#_) { margin:12px 0; }
.u-m-12-0-0:not(#_#_#_) { margin:12px 0 0; }
.u-m-12-0-0-0:not(#_#_#_) { margin:12px 0 0 0; }
.u-m-14-0-0:not(#_#_#_) { margin:14px 0 0; }
.u-m-14-0-12:not(#_#_#_) { margin:14px 0 12px; }
.u-m-14-0-4:not(#_#_#_) { margin:14px 0 4px; }
.u-m-18-0-6:not(#_#_#_) { margin:18px 0 6px; }
.u-m-18-0-8:not(#_#_#_) { margin:18px 0 8px; }
.u-m-1-0-3:not(#_#_#_) { margin:1px 0 3px; }
.u-m-2-0:not(#_#_#_) { margin:2px 0; }
.u-m-4-0:not(#_#_#_) { margin:4px 0; }
.u-m-4-0-0:not(#_#_#_) { margin:4px 0 0; }
.u-m-4-0-2:not(#_#_#_) { margin:4px 0 2px; }
.u-m-6-0:not(#_#_#_) { margin:6px 0; }
.u-m-6-0-0:not(#_#_#_) { margin:6px 0 0; }
.u-m-6-0-10:not(#_#_#_) { margin:6px 0 10px; }
.u-m-6-0-2:not(#_#_#_) { margin:6px 0 2px; }
.u-m-6-0-4:not(#_#_#_) { margin:6px 0 4px; }

.u-m-8-0-0:not(#_#_#_) { margin:8px 0 0; }
.u-m-8-0-0-0:not(#_#_#_) { margin:8px 0 0 0; }
.u-m-8-0-20-0:not(#_#_#_) { margin:8px 0 20px 0; }
.u-m-8-0-4:not(#_#_#_) { margin:8px 0 4px; }
.u-m-8-0-2:not(#_#_#_) { margin:8px 0 2px; }
.u-m-10-0-6:not(#_#_#_) { margin:10px 0 6px; }
.u-op-_4:not(#_#_#_) { opacity:.4; }
.u-op-_55:not(#_#_#_) { opacity:.55; }

.u-op-_82:not(#_#_#_) { opacity:.82; }

.u-of-auto:not(#_#_#_) { overflow:auto; }
.u-of-hidden:not(#_#_#_) { overflow:hidden; }
.u-p-0:not(#_#_#_) { padding:0; }
.u-p-0-13:not(#_#_#_) { padding:0 13px; }
.u-p-0-13-8:not(#_#_#_) { padding:0 13px 8px; }
.u-p-0-18:not(#_#_#_) { padding:0 18px; }
.u-p-0-4:not(#_#_#_) { padding:0 4px; }
.u-p-10:not(#_#_#_) { padding:10px; }
.u-p-10-0:not(#_#_#_) { padding:10px 0; }
.u-p-10-12:not(#_#_#_) { padding:10px 12px; }
.u-p-10-14:not(#_#_#_) { padding:10px 14px; }
.u-p-10-18-14:not(#_#_#_) { padding:10px 18px 14px; }
.u-p-10-18-4:not(#_#_#_) { padding:10px 18px 4px; }
.u-p-11-14:not(#_#_#_) { padding:11px 14px; }
.u-p-12-14:not(#_#_#_) { padding:12px 14px; }
.u-p-12-18:not(#_#_#_) { padding:12px 18px; }
.u-p-14:not(#_#_#_) { padding:14px; }
.u-p-14-16:not(#_#_#_) { padding:14px 16px; }
.u-p-14-18-12:not(#_#_#_) { padding:14px 18px 12px; }
.u-p-15:not(#_#_#_) { padding:15px; }
.u-p-16:not(#_#_#_) { padding:16px; }

.u-p-1-7:not(#_#_#_) { padding:1px 7px; }
.u-p-2-8:not(#_#_#_) { padding:2px 8px; }
.u-p-3-0:not(#_#_#_) { padding:3px 0; }
.u-p-3-10-3-0:not(#_#_#_) { padding:3px 10px 3px 0; }
.u-p-3-5:not(#_#_#_) { padding:3px 5px; }
.u-p-4-0:not(#_#_#_) { padding:4px 0; }
.u-p-4-10-4-0:not(#_#_#_) { padding:4px 10px 4px 0; }
.u-p-4-13:not(#_#_#_) { padding:4px 13px; }
.u-p-4-13-10:not(#_#_#_) { padding:4px 13px 10px; }
.u-p-4-6:not(#_#_#_) { padding:4px 6px; }
.u-p-6:not(#_#_#_) { padding:6px; }
.u-p-6-10:not(#_#_#_) { padding:6px 10px; }
.u-p-6-13:not(#_#_#_) { padding:6px 13px; }
.u-p-6-18-12:not(#_#_#_) { padding:6px 18px 12px; }
.u-p-6-8:not(#_#_#_) { padding:6px 8px; }
.u-p-7-14:not(#_#_#_) { padding:7px 14px; }
.u-p-8:not(#_#_#_) { padding:8px; }
.u-p-8-0:not(#_#_#_) { padding:8px 0; }
.u-p-8-10:not(#_#_#_) { padding:8px 10px; }
.u-p-8-12:not(#_#_#_) { padding:8px 12px; }
.u-p-8-18-6:not(#_#_#_) { padding:8px 18px 6px; }
.u-p-9-0:not(#_#_#_) { padding:9px 0; }

.u-p-9-16:not(#_#_#_) { padding:9px 16px; }
.u-pos-relative:not(#_#_#_) { position:relative; }
.u-w-10p:not(#_#_#_) { width:10%; }
.u-w-100p:not(#_#_#_) { width:100%; }
.u-w-14:not(#_#_#_) { width:14px; }

.u-w-20:not(#_#_#_) { width:20px; }
.u-w-22p:not(#_#_#_) { width:22%; }
.u-w-22:not(#_#_#_) { width:22px; }
.u-w-24p:not(#_#_#_) { width:24%; }
.u-w-26p:not(#_#_#_) { width:26%; }
.u-w-28:not(#_#_#_) { width:28px; }
.u-w-30p:not(#_#_#_) { width:30%; }
.u-w-30:not(#_#_#_) { width:30px; }
.u-w-32p:not(#_#_#_) { width:32%; }
.u-w-35p:not(#_#_#_) { width:35%; }
.u-w-50p:not(#_#_#_) { width:50%; }
.u-ai-baseline:not(#_#_#_) { align-items:baseline; }
.u-ai-center:not(#_#_#_) { align-items:center; }
.u-ai-flex-start:not(#_#_#_) { align-items:flex-start; }
.u-ai-stretch:not(#_#_#_) { align-items:stretch; }

.u-bb-1-solid-dee2e6:not(#_#_#_) { border-bottom:1px solid #dee2e6; }
.u-bcl-collapse:not(#_#_#_) { border-collapse:collapse; }
.u-bc-e0a0a0:not(#_#_#_) { border-color:#e0a0a0; }
.u-bl-3-solid-6c757d:not(#_#_#_) { border-left:3px solid #6c757d; }
.u-bl-3-solid-ffd54f:not(#_#_#_) { border-left:3px solid #ffd54f; }
.u-bl-4-solid-17a2b8:not(#_#_#_) { border-left:4px solid #17a2b8; }
.u-bl-4-solid-2196f3:not(#_#_#_) { border-left:4px solid #2196f3; }
.u-bl-4-solid-28a745:not(#_#_#_) { border-left:4px solid #28a745; }
.u-bl-4-solid-6a1b9a:not(#_#_#_) { border-left:4px solid #6a1b9a; }
.u-bl-4-solid-6f42c1:not(#_#_#_) { border-left:4px solid #6f42c1; }
.u-bl-4-solid-c9d3e0:not(#_#_#_) { border-left:4px solid #c9d3e0; }
.u-bl-4-solid-f0ad4e:not(#_#_#_) { border-left:4px solid #f0ad4e; }
.u-bl-4-solid-ffc107:not(#_#_#_) { border-left:4px solid #ffc107; }
.u-br-0-6-6-0:not(#_#_#_) { border-radius:0 6px 6px 0; }
.u-br-10:not(#_#_#_) { border-radius:10px; }
.u-br-12:not(#_#_#_) { border-radius:12px; }
.u-br-3:not(#_#_#_) { border-radius:3px; }
.u-br-4:not(#_#_#_) { border-radius:4px; }
.u-br-50p:not(#_#_#_) { border-radius:50%; }
.u-br-5:not(#_#_#_) { border-radius:5px; }
.u-br-6:not(#_#_#_) { border-radius:6px; }
.u-br-8:not(#_#_#_) { border-radius:8px; }
.u-br-999:not(#_#_#_) { border-radius:999px; }
.u-bt-1-solid-e9ecef:not(#_#_#_) { border-top:1px solid #e9ecef; }
.u-bt-1-solid-eee:not(#_#_#_) { border-top:1px solid #eee; }
.u-bt-1-solid-eef1f5:not(#_#_#_) { border-top:1px solid #eef1f5; }
.u-box-shadow-0-1-3-rgba-0-0-0-_04:not(#_#_#_) { box-shadow:0 1px 3px rgba(0, 0, 0, .04); }
.u-box-shadow-none:not(#_#_#_) { box-shadow:none; }
.u-bxs-border-box:not(#_#_#_) { box-sizing:border-box; }

.u-fxd-column:not(#_#_#_) { flex-direction:column; }
.u-fxs-0:not(#_#_#_) { flex-shrink:0; }
.u-fxw-wrap:not(#_#_#_) { flex-wrap:wrap; }
.u-ff-monospace:not(#_#_#_) { font-family:monospace; }
.u-ff-ui-monospace-menlo-con-2f3e:not(#_#_#_) { font-family:ui-monospace, Menlo, Consolas, monospace; }
.u-ff-ui-monospace-menlo-monospace:not(#_#_#_) { font-family:ui-monospace, Menlo, monospace; }
.u-fs-11:not(#_#_#_) { font-size:11px; }
.u-fs-12:not(#_#_#_) { font-size:12px; }
.u-fs-13:not(#_#_#_) { font-size:13px; }
.u-fs-14:not(#_#_#_) { font-size:14px; }
.u-fs-15:not(#_#_#_) { font-size:15px; }
.u-fs-16:not(#_#_#_) { font-size:16px; }
.u-fs-24:not(#_#_#_) { font-size:24px; }
.u-fst-italic:not(#_#_#_) { font-style:italic; }
.u-fw-400:not(#_#_#_) { font-weight:400; }

.u-fw-600:not(#_#_#_) { font-weight:600; }
.u-fw-700:not(#_#_#_) { font-weight:700; }
.u-fw-bold:not(#_#_#_) { font-weight:bold; }
.u-fw-normal:not(#_#_#_) { font-weight:normal; }
.u-jc-center:not(#_#_#_) { justify-content:center; }
.u-jc-flex-end:not(#_#_#_) { justify-content:flex-end; }
.u-jc-flex-start:not(#_#_#_) { justify-content:flex-start; }
.u-jc-space-between:not(#_#_#_) { justify-content:space-between; }

.u-ls-_5:not(#_#_#_) { letter-spacing:.5px; }
.u-ls-0:not(#_#_#_) { letter-spacing:0; }
.u-ls-0_5:not(#_#_#_) { letter-spacing:0.5px; }
.u-ls-normal:not(#_#_#_) { letter-spacing:normal; }
.u-lh-1_35:not(#_#_#_) { line-height:1.35; }
.u-lh-1_4:not(#_#_#_) { line-height:1.4; }
.u-lh-1_45:not(#_#_#_) { line-height:1.45; }
.u-lh-1_5:not(#_#_#_) { line-height:1.5; }
.u-lh-1_55:not(#_#_#_) { line-height:1.55; }
.u-lh-1_6:not(#_#_#_) { line-height:1.6; }
.u-lh-1_7:not(#_#_#_) { line-height:1.7; }
.u-lh-1_8:not(#_#_#_) { line-height:1.8; }
.u-lst-none:not(#_#_#_) { list-style:none; }
.u-mb-0:not(#_#_#_) { margin-bottom:0; }
.u-mb-10:not(#_#_#_) { margin-bottom:10px; }
.u-mb-12:not(#_#_#_) { margin-bottom:12px; }
.u-mb-14:not(#_#_#_) { margin-bottom:14px; }
.u-mb-20:not(#_#_#_) { margin-bottom:20px; }
.u-mb-24:not(#_#_#_) { margin-bottom:24px; }
.u-mb-2:not(#_#_#_) { margin-bottom:2px; }
.u-mb-3:not(#_#_#_) { margin-bottom:3px; }
.u-mb-4:not(#_#_#_) { margin-bottom:4px; }
.u-mb-5:not(#_#_#_) { margin-bottom:5px; }
.u-mb-6:not(#_#_#_) { margin-bottom:6px; }
.u-mb-8:not(#_#_#_) { margin-bottom:8px; }
.u-ml-10:not(#_#_#_) { margin-left:10px; }
.u-ml-12:not(#_#_#_) { margin-left:12px; }

.u-ml-4:not(#_#_#_) { margin-left:4px; }
.u-ml-6:not(#_#_#_) { margin-left:6px; }
.u-ml-8:not(#_#_#_) { margin-left:8px; }
.u-ml-auto:not(#_#_#_) { margin-left:auto; }
.u-mr-4:not(#_#_#_) { margin-right:4px; }
.u-mr-8:not(#_#_#_) { margin-right:8px; }
.u-mr-auto:not(#_#_#_) { margin-right:auto; }
.u-mt-n4:not(#_#_#_) { margin-top:-4px; }
.u-mt-0:not(#_#_#_) { margin-top:0; }
.u-mt-10:not(#_#_#_) { margin-top:10px; }
.u-mt-12:not(#_#_#_) { margin-top:12px; }
.u-mt-14:not(#_#_#_) { margin-top:14px; }
.u-mt-16:not(#_#_#_) { margin-top:16px; }
.u-mt-20:not(#_#_#_) { margin-top:20px; }
.u-mt-24:not(#_#_#_) { margin-top:24px; }
.u-mt-28:not(#_#_#_) { margin-top:28px; }
.u-mt-4:not(#_#_#_) { margin-top:4px; }
.u-mt-6:not(#_#_#_) { margin-top:6px; }
.u-mt-8:not(#_#_#_) { margin-top:8px; }
.u-maxh-220:not(#_#_#_) { max-height:220px; }

.u-maxh-62vh:not(#_#_#_) { max-height:62vh; }
.u-maxw-1200:not(#_#_#_) { max-width:1200px; }
.u-maxw-440:not(#_#_#_) { max-width:440px; }
.u-maxw-560:not(#_#_#_) { max-width:560px; }
.u-maxw-600:not(#_#_#_) { max-width:600px; }
.u-maxw-620:not(#_#_#_) { max-width:620px; }
.u-maxw-680:not(#_#_#_) { max-width:680px; }

.u-minh-40:not(#_#_#_) { min-height:40px; }
.u-minw-0:not(#_#_#_) { min-width:0; }
.u-overflow-x-auto:not(#_#_#_) { overflow-x:auto; }
.u-overflow-y-auto:not(#_#_#_) { overflow-y:auto; }
.u-pl-12:not(#_#_#_) { padding-left:12px; }
.u-pl-18:not(#_#_#_) { padding-left:18px; }
.u-pl-20:not(#_#_#_) { padding-left:20px; }
.u-pl-26:not(#_#_#_) { padding-left:26px; }

.u-pt-12:not(#_#_#_) { padding-top:12px; }
.u-ta-center:not(#_#_#_) { text-align:center; }
.u-ta-left:not(#_#_#_) { text-align:left; }
.u-ta-right:not(#_#_#_) { text-align:right; }
.u-td-line-through:not(#_#_#_) { text-decoration:line-through; }
.u-td-none:not(#_#_#_) { text-decoration:none; }

.u-tt-none:not(#_#_#_) { text-transform:none; }
.u-tt-uppercase:not(#_#_#_) { text-transform:uppercase; }
.u-user-select-none:not(#_#_#_) { user-select:none; }
.u-ws-nowrap:not(#_#_#_) { white-space:nowrap; }
.u-word-break-break-word:not(#_#_#_) { word-break:break-word; }
.u-font-variant-numeric-tabular-nums:not(#_#_#_) { font-variant-numeric:tabular-nums; }
.u-gtc-1fr-1fr:not(#_#_#_) { grid-template-columns:1fr 1fr; }
.u--webkit-overflow-scrolling-touch:not(#_#_#_) { -webkit-overflow-scrolling:touch; }

/* ======== 28eq — pass 3, second slice (open-issues 88, 89, 91): the styles code used to set while the page runs ========
   Every `el.style.x = …` and `style.cssText = …` that set a look is now a class here that the code adds or removes
   (`classList`). One job each, named for it: a state (`st-op-06` = dimmed, `st-voice-rec`, `st-noscroll`) or a small
   piece the code builds (`st-recent-row`, `st-upload-modal`). Each is written `:not(#_#_#_#_)` — one step heavier than
   the u-* classes above — so it wins over component rules and u-* classes exactly where the style set by code did;
   a value code still works out (a measured height, a stacking order) is set on the element and wins over these.
   What code may still set directly: show / hide (`display`) and a size, position or stacking order it measures.
   Where one element moves between states of the same property, the code removes the other state's class first. */
/* -- Every page: a window is open, the page behind does not scroll (was body.style.overflow) -- */
.st-noscroll:not(#_#_#_#_) { overflow:hidden; }
/* -- Guide window (guide.js) -- */
.st-guide-back:not(#_#_#_#_) { position:fixed; inset:0; background:rgba(15,23,42,.45); }
.st-guide-card:not(#_#_#_#_) { position:fixed; top:5vh; left:50%; transform:translateX(-50%); width:min(900px,92vw); max-width:none; max-height:90vh; flex-direction:column; }
.st-guide-drift:not(#_#_#_#_) { margin:0 0 14px; padding:10px 14px; border-radius:6px; border-left:4px solid #b25c00; background:#fff6ec; color:#7a4100; font-size:13px; line-height:1.45; }
.st-gtab-on:not(#_#_#_#_) { background:#fff; color:#1066c4; border-color:#dfe6ef; }   /* Guide: the open tab / the others; the open section / the others */
.st-gtab-off:not(#_#_#_#_) { background:transparent; color:#5a6472; border-color:transparent; }
.st-gsec-on:not(#_#_#_#_) { border-color:#1066c4; background:#e7f1ff; color:#1066c4; }
.st-gsec-off:not(#_#_#_#_) { border-color:#e3e8ef; background:#fff; color:#5a6472; }
/* -- Shared code (site-common.js) -- */
.st-copy-ta:not(#_#_#_#_) { position:fixed; top:0; left:0; opacity:0; font-size:16px; }   /* the unseen box a copy goes through */
.st-copy-ta-plain:not(#_#_#_#_) { position:fixed; opacity:0; }
.st-recent-row:not(#_#_#_#_) { display:flex; flex-direction:column; gap:8px; padding:12px 14px; border:1px solid #dfe5ec; border-radius:12px; background:#fbfcfe; }   /* a row in a Recent list (nhRecentRow) */
.st-build-stamp:not(#_#_#_#_) { text-align:center; font-size:11px; color:#adb5bd; margin:18px 0 6px; }
.st-diag:not(#_#_#_#_) { position:fixed; right:6px; top:8px; z-index:9400; max-width:70vw; padding:6px 8px; border-radius:6px; background:rgba(15,23,42,.82); color:#e2e8f0; font:11px/1.35 ui-monospace,Menlo,monospace; white-space:pre; cursor:pointer; }   /* the admin diagnostics box */
/* -- Snapshot window (snapshot.js) -- */
.st-bg-f1f3f5:not(#_#_#_#_) { background:#f1f3f5; }   /* the typing box while it is locked */
.st-cur-not-allowed:not(#_#_#_#_) { cursor:not-allowed; }
.st-op-06:not(#_#_#_#_) { opacity:0.6; }   /* a button that cannot be used yet */
.st-cur-pointer:not(#_#_#_#_) { cursor:pointer; }
.st-cur-default:not(#_#_#_#_) { cursor:default; }
.st-voice-rec:not(#_#_#_#_) { background:#1066c4; color:#fff; }   /* Record voice: while recording. 28er (101): removed once the voice is saved or skipped — the button goes back to its own outline look on both pages (st-voice-idle retired) */
/* -- Prioritizer -- */

/* -- Admin -- */
.st-adm-ok:not(#_#_#_#_) { background:#e6f4ea; border-color:#a3d9b1; }   /* the load check: nothing to fix / something to fix */
.st-adm-bad:not(#_#_#_#_) { background:#fff; border-color:#ffe69c; border-left:4px solid #ffc107; color:#1a3b63; }   /* 28er (94): the yellow stripe, was pink */
.st-drag:not(#_#_#_#_) { border-color:#1674dc; }   /* a file held over the drop zone */
.st-pend-off:not(#_#_#_#_) { color:#6c757d; font-weight:normal; }   /* Admin: no pending changes / changes pending */
.st-pend-on:not(#_#_#_#_) { color:#1674dc; font-weight:600; }
/* -- Player -- */
.st-fxw-wrap:not(#_#_#_#_) { flex-wrap:wrap; }   /* the build grid on a phone; Session Setup and the two bars take a full row */
.st-fb-100p:not(#_#_#_#_) { flex-basis:100%; }
.st-mb-0:not(#_#_#_#_) { margin-bottom:0; }   /* headings and sub-lines moved into the Session Setup card */
.st-m-0:not(#_#_#_#_) { margin:0; }
.st-aw-status-0:not(#_#_#_#_) { font-size:12px; color:#6c757d; min-width:0; flex:1; order:2; }   /* the waveform status line and reasons box as first drawn, until the line is rebuilt (item 91) */
.st-aw-detail-0:not(#_#_#_#_) { margin:0 0 8px; }
.st-fs-12:not(#_#_#_#_) { font-size:12px; }
.st-bare:not(#_#_#_#_) { border:none; box-shadow:none; background:transparent; padding:0; }   /* a card moved inside another card loses its own frame */
.st-gtc-1fr:not(#_#_#_#_) { grid-template-columns:1fr; }
.st-bt-none:not(#_#_#_#_) { border-top:none; }

.st-tap-resume:not(#_#_#_#_) { position:fixed; left:50%; transform:translateX(-50%); bottom:calc(120px + env(safe-area-inset-bottom,0px)); z-index:10060; box-shadow:0 6px 20px rgba(0,0,0,.25); }   /* "Tap to continue the session" */
   /* the Library search results block */
   /* a row in the recent sessions list */
.st-snap-frame:not(#_#_#_#_) { position:fixed; inset:0; z-index:100000; background:transparent; }   /* the snapshot window opened from the Player */
.st-snap-frame-in:not(#_#_#_#_) { width:100%; height:100%; border:0; background:transparent; }
   /* Essentials data table rows (Admin view on the Player) */

   /* a status note: done / needs attention / information */

   /* the waveform link while the AI is choosing */

.st-minh-100:not(#_#_#_#_) { min-height:100px; }   /* the Playlist box: its floor while the columns are levelled */
.st-minh-140:not(#_#_#_#_) { min-height:140px; }
.st-act-1066c4:not(#_#_#_#_) { background:#1066c4; border-color:#1066c4; color:#fff; }   /* a window button in the colour its caller names (blue / grey / amber) — a new colour needs its class here */
.st-act-6c757d:not(#_#_#_#_) { background:#6c757d; border-color:#6c757d; color:#fff; }
.st-act-8a6d1d:not(#_#_#_#_) { background:#1a3b63; border-color:#1a3b63; color:#fff; border-left: 4px solid #ffc107;}
.st-range:not(#_#_#_#_) { padding:4px 10px; font-size:12px; border-radius:4px; cursor:pointer; }   /* Most played: the range buttons, picked / not */
.st-range-on:not(#_#_#_#_) { border:1px solid #1674dc; background:#1674dc; color:white; font-weight:bold; }
.st-range-off:not(#_#_#_#_) { border:1px solid #dee2e6; background:white; color:#495057; font-weight:500; }
.st-flash:not(#_#_#_#_) { background:#1066c4; }   /* a button flashing "Added" */
/* -- Generator -- */
.st-gen-slot:not(#_#_#_#_) { flex-direction:column; gap:6px; justify-content:flex-start; align-items:stretch; }   /* Submit with Reset chat under it */
.st-fx-1-1-auto:not(#_#_#_#_) { flex:1 1 auto; }
.st-gen-reset:not(#_#_#_#_) { flex:0 0 auto; white-space:nowrap; padding:8px 14px; font-size:13px; }
.st-comp-on:not(#_#_#_#_) { background:#1066c4; color:#fff; }   /* a chip picked / not picked; its small source label */
.st-comp-off:not(#_#_#_#_) { background:#fff; color:#1066c4; }
.st-c-dbe8fb:not(#_#_#_#_) { color:#dbe8fb; }
.st-c-6c757d:not(#_#_#_#_) { color:#6c757d; }
.st-op-055:not(#_#_#_#_) { opacity:0.55; }   /* a chip already added */
.st-gen-cmt:not(#_#_#_#_) { font-size:13px; align-self:center; white-space:nowrap; }   /* "+ Comment": beside Submit on a phone, in its slot elsewhere */
.st-gen-cmt-phone:not(#_#_#_#_) { font-weight:600; margin-right:4px; }
.st-gen-cmt-desk:not(#_#_#_#_) { font-weight:600; margin-left:6px; }
.st-gen-in-comment:not(#_#_#_#_) { width:100%; min-width:0; min-height:0; resize:none; font-size:16px; }   /* the reply box: in the comment row / in the bar / back in the page (16px: iOS zooms the page into smaller text fields) */
.st-gen-in-bar:not(#_#_#_#_) { flex:1 1 auto; width:auto; min-width:0; min-height:0; resize:none; font-size:16px; }
.st-gen-in-home:not(#_#_#_#_) { width:100%; }
.st-fxw-nowrap:not(#_#_#_#_) { flex-wrap:nowrap; }
.st-c-1066c4:not(#_#_#_#_) { color:#1066c4; }
.st-qb-problem:not(#_#_#_#_) { background:#fff; border-left:4px solid #ffc107; color:#1a3b63; padding:8px 12px; border-radius:6px; }   /* a Quick Build status line: as first drawn (grey / blue), a problem (28er, item 94: the yellow stripe, was red text), or — after Clear — the page's own text colour */
.st-menu-up:not(#_#_#_#_) { top:auto; bottom:calc(100% + 6px); }   /* 28ev: the Generator's Ideas menu opens upward when there is no room below (set by toggleGenStartMenu) */
.pf-companion:not(#_#_#_), .qb-companion:not(#_#_#_) { padding:4px 10px; font-size:12.5px; font-weight:600; border-radius:999px; cursor:pointer; background:#fff; color:#1066c4; border:1px solid #1066c4; text-align:left; }   /* a supporting-phrase chip (was written on each chip; the class attribute itself is matched by the page, so the rule hangs on it) */
:where(.pg-player) .nh-intro-step.is-cta.is-quiet { background: #fff; border-color: #1066c4; color: #1066c4; }
:where(.pg-player) .nh-intro-step.is-cta.is-quiet:hover { background: #e7f1ff; }
@media (max-width: 680px) {
  /* a phone shows the next step and the membership action — the action no longer has a copy among the links */
  :where(.pg-player) .nh-intro-step.is-cta { display: inline-flex; }
}
@media (min-width: 900px) and (max-width: 1180px) {
  /* four pills on a small laptop or an iPad on its side: the how-long hints give way before a label is cut */
  :where(.pg-player) .nh-intro-step small { display: none; }
}
@media (min-width: 900px) and (max-width: 1023px) {
  /* too narrow for four pills on one line: wrap rather than cut a label (they were cut here before) */
  :where(.pg-player) .nh-intro-steps { flex-wrap: wrap; }
  :where(.pg-player) .nh-intro-step { flex: 0 0 auto; }
}
/* ===== 28fg — the intro strip on a phone (Dan: "says three steps but I only see one pill") =====
   One step at a time stays the rule where the steps tick off (Visitor, Trial). Where they never tick (Member,
   Practitioner, an ended membership) every pill shows, wrapped. */
@media (max-width: 680px) {
  :where(.pg-player) .nh-intro-steps--all .nh-intro-step:not(.is-next) { display: inline-flex; }
  :where(.pg-player) .nh-intro-steps--all { flex-wrap: wrap; }
}
/* ===== 28fk — the Visitor's other steps as text links on a phone (183, Dan: "something smaller? Like text link?") =====
   The pills stay the next step and Start a free trial; the steps a phone hides are one line of links under them. A laptop
   shows them as pills, so the line is hidden there. Each link is a 36 px tap target. */
:where(.pg-player) .nh-intro-steplinks { display: none; }
@media (max-width: 680px) {
  :where(.pg-player) .nh-intro-steplinks:not([hidden]) { display: block; grid-column: 1 / -1; font-size: 13px; color: #6c757d; line-height: 1.3; margin-top: -2px; }
  :where(.pg-player) .nh-intro-steplink { display: inline-block; padding: 10px 2px; font-weight: 600; }
  /* 28fm (178f): the line never wraps — each link is unbreakable and the type steps down on the narrowest phones. */
  :where(.pg-player) .nh-intro-steplinks:not([hidden]) { white-space: nowrap; font-size: clamp(11px, 3.45vw, 13px); }
  :where(.pg-player) .nh-intro-steplink { white-space: nowrap; }
  /* 28fm (178f): row 1 is one row — the next step and the membership action (Upgrade) side by side; the how-long hint gives
     way and the type steps down on the narrowest phones rather than pushing the action to a second row. */
  :where(.pg-player) .nh-intro-steps--links { flex-wrap: nowrap; }
  :where(.pg-player) .nh-intro-steps--links.nh-intro-steps--wrap { flex-wrap: wrap; }   /* 28iq (437, item 3): the Previewer's three pills ran 17 px past a 390 phone and widened the page — with no membership action to hold on row 1, a third pill wraps */
  :where(.pg-player) .nh-intro-steps--links .nh-intro-step small { display: none; }
  :where(.pg-player) .nh-intro-steps--links .nh-intro-step { font-size: clamp(11px, 3.45vw, 12.5px); }
}
/* ===== 28ff — changes made while a session plays (Dan, 2026-09-30: "show clearly that … it does not take effect til stop then start again") =====
   The play bar's line "Changes waiting · Restart": dark amber like the site's other notices, the action a plain link. */

@media (max-width: 640px) {
     /* a 36 px target on a phone */
}

/* ======== 28fr — Session 51 ======== */
/* 239 (100): on a touch screen every control has at least 36 x 36 px to tap — the tap area grows, the type does not.
   Buttons get a 36 px minimum height (and width, for the × buttons); the small text links named below get 9 px of tap area
   above and below, taken back by a negative margin so nothing moves (named, not every link: a link's grown area must not
   cover its neighbour); rows in the picker windows are 36 px tall and a group checkbox sits in a label as tall as its row.
   pointer: coarse = a finger (phone, iPad), whatever the width. The phone scan: tap.py (LEARNINGS, Session 51). */
.tpk-cbhit { display:inline-flex; align-items:center; flex:0 0 auto; cursor:pointer; }
@media (pointer: coarse) {
  .tp-btn, .tp-view, .nh-btn, .gen-quickpick-chip, #reset-session-btn, #gen-conv-send-btn, .pl-sg-chip, .bys-clear, .bys-row button,
  .dl-btn, .cm-btn, .cm-btn2, .snap-slot-btn, .qb-count-btn, .hist-tab, .nh-intro-step { min-height:36px !important; box-sizing:border-box; }   /* !important: page rules set heights with ids and !important (the Generator's chip dock) */
  #gen-qp-dock .gen-quickpick-chip { min-height:36px !important; }
  .nh-win-x, button.pl-sg-x, .pg-player button.pl-sg-x { min-width:36px; min-height:36px; }
  .xnav a, .xnav span.active { min-width:36px; min-height:36px; box-sizing:border-box; display:inline-flex; align-items:center; justify-content:center; }
  :is(#nh-intro-more, .nh-intro-doors a, .nh-intro-steplink, a.bys-seeall, #nh-history-host a[onclick^="clearHistory"], .gate-report a, a[href^="mailto:"].u-fs-12,
  #copy-chat-btn, #resend-agreed-btn, #spend-details-link, #reset-cost-inline, .cs-links a, #phrase-list-clear, #rife-typed-clear, #rife-clear-link,
  #rife-freq-reveal, #rife-paste-copy, .xfoot a, .pg-community .cm-fold > summary, .pg-community h3 a.cm-open, .pg-community .cm-head a, .cp-files-tog, .cp-drop a):not(#_#_#_#_) {   /* beats the u- helpers' :not(#_#_#_) */
    padding-top:10px; padding-bottom:10px; margin-top:-10px; margin-bottom:-10px; }   /* an inline link's padding grows its tap area without moving the line */
  .pg-player .nh-intro-steplinks:not([hidden]) { margin-top:8px; }   /* room for the step links' tap area under the pill */
  .tp-list .tp-item { min-height:37px; padding-top:0; padding-bottom:0; box-sizing:border-box; }   /* the row's own 8 px padding moved into its height, so the checkbox, arrow and name can fill it */
  .tp-list .tp-item.u-gap-6 { gap:0; }
  .tp-list .tpk-leafrow { padding-top:4px; padding-bottom:4px; }
  .tpk-cbhit { align-self:stretch; padding:0 10px; margin-left:-10px; }
  .tpk-toggle { align-self:stretch; display:inline-flex !important; align-items:center; justify-content:center; width:auto !important; min-width:36px; }
  .tpk-gtoggle, .tpk-stoggle { align-self:stretch; align-items:center; }
  .info-btn::after { content:""; position:absolute; inset:-7px; }
     /* Setup: clear of the Guide link above it */
  .nh-pp-share .nh-btn { margin-bottom:6px; }   /* Plans: the share buttons clear of the Terms line under them (their row is display:contents on a phone) */
  #nh-history-host a[onclick^="clearHistory"]:not(#_#_#_#_) { margin-top:0; }   /* clear of the tabs above it: this one takes its 10 px of room */
}
/* 241: My Phrase Presets on a touch screen — the drop zone is one "Add files" button (nothing can be dropped there); the
   template link stays beside it. A mouse keeps "Drop phrase files here or choose files". */
.cp-drop-btn { display:none; }
@media (pointer: coarse) {
  .cp-drop .cp-drop-mouse { display:none; }
  .cp-drop .cp-drop-btn { display:inline-flex; align-items:center; justify-content:center; vertical-align:middle; }   /* 28fu (274): the label in the middle of the 36 px pill */
  .cp-drop .cp-drop-tpl { vertical-align:middle; }
  .cp-drop { border-style:solid; border-width:1px; padding:10px; }
  .cp-files.is-empty .cp-drop { padding:16px 12px; }
}
/* 242: Setup as a Visitor said one thing twice — "The AI features open with a free trial" above, and "Add your key to turn
   on the AI features." under Save and check. A Visitor sees the first only. */

/* 221 (Dan: "mock up approved"): Guide → Quick Start — the four main pages as blocks, two by two (one column on a phone).
   237: the three videos two then one between a phone and a laptop (they were about 200 px each on an iPad held upright). */
.g-blk-lbl { font-size:12px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:#6c757d; margin:4px 0 8px; }
.g-blocks { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:12px; margin-bottom:18px; }
.g-blk { background:#fff; border:1px solid #e3e6ea; border-radius:12px; padding:14px 16px; display:flex; flex-direction:column; min-width:0; }
.g-blk-h { display:flex; align-items:center; gap:10px; }
.g-blk-h h4 { margin:0; font-size:15.5px; color:#12233b; }
.g-blk-ic { width:34px; height:34px; border-radius:10px; background:#e7f1ff; color:#1066c4; display:flex; align-items:center; justify-content:center; flex:0 0 auto; }
.g-blk-ic svg { width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.g-blk > p { margin:6px 0 8px; color:#5a6472; font-size:13.5px; }
.g-blk ol { margin:0 0 10px; padding-left:20px; font-size:13.5px; }
.g-blk ol li { margin:2px 0; }
.g-blk-go { margin-top:auto; font-weight:600; font-size:13.5px; padding:6px 0; align-self:flex-start; }
@media (max-width:600px) { .g-blocks { grid-template-columns:1fr; } }
@media (min-width:761px) and (max-width:1000px) {
  .g-tours { grid-template-columns:repeat(2, minmax(0, 1fr)); gap:0 18px; }
  .g-tour-one:last-child { grid-column:1 / -1; margin-top:18px; }
}

.u-d-none-i:not(#_#_#_) { display:none !important; }   /* kept: the Generator's status line, whose class the code resets */
/* ======== 28fr — pass 5 (92 / 99): the helper classes folded into their components ========
   Each rule below is what one component carried as u- helpers in the markup, in the helpers' own order and weight
   (:not(#_#_#_)), so it draws the same. Written by a script (LEARNINGS, Session 51); edit them as ordinary rules. */
.band:not(#_#_#_) { cursor:pointer; }
.browse-pager:not(#_#_#_) { display:flex; gap:10px; align-items:center; margin-bottom:8px; }
.btn-secondary:not(#_#_#_) { padding:6px 14px; font-size:13px; }
.chips:not(#_#_#_) { margin-top:6px; }
.chk:not(#_#_#_) { margin-top:8px; }
.cm-search:not(#_#_#_) { border:1px solid #cfd8e3; padding:8px 10px; width:100%; border-radius:8px; box-sizing:border-box; font-size:14px; }

.compose-action-slot:not(#_#_#_) { display:flex; flex-shrink:0; }
.fieldrow:not(#_#_#_) { display:flex; gap:10px; align-items:flex-start; }
.g-2col:not(#_#_#_) { display:grid; grid-template-columns:1fr 1fr; }
.gen-box-wrap:not(#_#_#_) { flex:1 1 260px; position:relative; min-width:0; }
.gen-conv-buttons:not(#_#_#_) { display:flex; gap:12px; align-items:center; flex-wrap:wrap; justify-content:flex-start; margin-top:12px; }

.gen-recent-head:not(#_#_#_) { display:flex; gap:10px; margin:14px 0 12px; }
.gen-start-item:not(#_#_#_) { display:block; padding:8px 10px; border-radius:6px; }
.gen-under-compose:not(#_#_#_) { display:flex; gap:12px; align-items:center; flex-wrap:wrap; margin-top:8px; }
.guide-subtabs:not(#_#_#_) { display:flex; margin:0 0 16px; flex-wrap:wrap; }
.nh-bol-src:not(#_#_#_) { background:#fff; border:1px solid #dbe6f5; cursor:pointer; display:block; margin:0 0 8px; padding:10px 12px; width:100%; border-radius:10px; text-align:left; }
.nh-recent-lines:not(#_#_#_) { color:#212529; margin:0 0 0 36px; padding:0 0 0 18px; font-size:14px; line-height:1.55; }
.nh-recent-toggle:not(#_#_#_) { background:none; border:0; cursor:pointer; padding:0; font-size:13px; margin-top:2px; }
.nh-safety-item:not(#_#_#_) { border:1px solid #cfd8e3; display:block; margin:0 0 8px; border-radius:10px; text-decoration:none; }
.nh-spiral-legend:not(#_#_#_) { background:#e7f1ff; color:#0b3d7a; margin:8px 0 0; padding:7px 10px; border-radius:8px; font-size:13px; line-height:1.4; }
.pf-companions-pending:not(#_#_#_) { color:#6c757d; font-size:13px; font-style:italic; }
.pl-box:not(#_#_#_) { height:340px; }
.pm-bar-src:not(#_#_#_) { display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin-top:12px; }
.qb-count-btn:not(#_#_#_) { border:none; cursor:pointer; padding:4px 12px; font-size:12px; font-weight:600; }
.rep-grp:not(#_#_#_) { margin-top:10px; }
.row:not(#_#_#_) { margin-bottom:12px; }
.run-meta:not(#_#_#_) { margin-left:auto; }
.sessions-grid:not(#_#_#_) { grid-template-columns:1fr 1fr; }
.tpk-gtoggle:not(#_#_#_), .tpk-stoggle:not(#_#_#_) { color:inherit; display:flex; flex:1; gap:6px; min-width:0; text-decoration:none; }   /* 28js: the source bands toggle the same way */
.tpk-toggle:not(#_#_#_) { color:#6c757d; width:14px; flex-shrink:0; text-decoration:none; }
.waveform-grid:not(#_#_#_) { margin-top:0; }
[id="aiDiff"]:not(#_#_#_) { overflow-x:auto; }
[id="bAIConform"]:not(#_#_#_) { margin-left:8px; }
[id="bAIValidate"]:not(#_#_#_) { margin-left:8px; }
[id="bClear"]:not(#_#_#_) { margin-left:8px; }
[id="bCommitSel"]:not(#_#_#_) { margin-left:8px; }
[id="bDropDups"]:not(#_#_#_) { margin-left:8px; }
[id="bResuggest"]:not(#_#_#_) { margin-left:8px; }
[id="bReviewWrap"]:not(#_#_#_) { margin-top:18px; }
[id="bSelCount"]:not(#_#_#_) { margin-left:6px; }
[id="bSelLevelAll"]:not(#_#_#_) { margin-left:4px; }
[id="bSelectBar"]:not(#_#_#_) { font-size:13px; margin-bottom:8px; }
[id="brDedupDel"]:not(#_#_#_) { color:#1a3b63; border-left: 4px solid #ffc107;}
[id="brDedupKeep"]:not(#_#_#_) { padding:5px 7px; }
[id="brField"]:not(#_#_#_) { padding:6px 9px; }
[id="brIssue"]:not(#_#_#_) { padding:6px 9px; }
[id="brM1"]:not(#_#_#_) { padding:6px 9px; }
[id="brM2"]:not(#_#_#_) { padding:6px 9px; }
[id="brM3"]:not(#_#_#_) { padding:6px 9px; }
[id="brSetClear"]:not(#_#_#_) { color:#1a3b63; border-left: 4px solid #ffc107;}
[id="brSetField"]:not(#_#_#_) { padding:5px 7px; }
[id="brSetValue"]:not(#_#_#_) { padding:5px 7px; width:200px; }
[id="brTag1"]:not(#_#_#_) { padding:6px 9px; }
[id="brTag2"]:not(#_#_#_) { padding:6px 9px; }
[id="brText"]:not(#_#_#_) { padding:6px 9px; width:220px; }
[id="browseSummary"]:not(#_#_#_) { font-weight:normal; }
[id="clearBtn"]:not(#_#_#_) { margin-top:10px; }
[id="cm-rife"]:not(#_#_#_) { margin:6px 0 0; }
[id="cm-setup"]:not(#_#_#_) { margin:4px 0 0; }
[id="copyNewBtn"]:not(#_#_#_) { margin-left:8px; }
[id="cs-notechk"]:not(#_#_#_) { margin:4px 0 0; }
[id="cs-send"]:not(#_#_#_) { background:var(--cm); }
[id="dlNewBtn"]:not(#_#_#_) { margin-left:8px; }
[id="essentials"]:not(#_#_#_) { background:#f4f6f8; margin:36px 0 20px 0; padding:16px 18px; border-left:5px solid #c9d3e0; border-radius:8px; }
[id="g-costs"]:not(#_#_#_) { margin:18px 0 8px; }
[id="g-key"]:not(#_#_#_) { margin:18px 0 8px; }
[id="g-sessions"]:not(#_#_#_) { line-height:1.6; }
[id="gateAiStatus"]:not(#_#_#_) { color:#6c757d; font-size:12px; }
[id="gateCopyAll"]:not(#_#_#_) { color:#1066c4; }
[id="gateCopyFeedback"]:not(#_#_#_) { color:#1066c4; }
[id="gen-compose-card"]:not(#_#_#_) { margin-top:0; }
[id="gen-conv-input"]:not(#_#_#_) { width:100%; box-sizing:border-box; }
[id="gen-g-title-row"]:not(#_#_#_) { display:flex; gap:10px; align-items:center; flex-wrap:wrap; justify-content:space-between; margin-bottom:6px; }
[id="gen-mode-desc"]:not(#_#_#_) { margin:6px 0 0; }
[id="gen-mode-row"]:not(#_#_#_) { display:flex; gap:12px; align-items:center; flex-wrap:wrap; }
[id="gen-mode-toggle"]:not(#_#_#_) { border:1px solid #ced4da; display:flex; gap:0; overflow:hidden; width:fit-content; border-radius:8px; }
[id="gen-q-title-row"]:not(#_#_#_) { display:flex; gap:10px; align-items:center; flex-wrap:wrap; justify-content:space-between; margin-bottom:6px; }
[id="gen-recent-clear"]:not(#_#_#_) { font-size:13px; }
[id="gen-recent-count"]:not(#_#_#_) { background:#e3edfa; color:#1066c4; padding:0 6px; border-radius:9px; font-size:11px; margin-left:4px; min-width:18px; }
[id="gen-recent-empty"]:not(#_#_#_) { margin:6px 0; }
[id="gen-recent-list"]:not(#_#_#_) { display:flex; gap:10px; flex-direction:column; }
[id="gen-start-menu"]:not(#_#_#_) { background:#fff; border:1px solid #dbe6f5; left:0; padding:6px; position:absolute; top:calc(100% + 6px); border-radius:10px; box-shadow:0 8px 24px rgba(16, 24, 40, .14); min-width:300px; z-index:60; }
[id="guide-doctrine-live"]:not(#_#_#_) { background:#f8f9fa; border:1px solid #e9ecef; padding:14px; border-radius:6px; font-size:12px; overflow-x:auto; white-space:pre-wrap; }
[id="guide-tabs"]:not(#_#_#_) { background:#eef2f7; border:1px solid #e1e7ef; display:flex; gap:3px; margin:0 0 18px; padding:4px; border-radius:10px; overflow-x:auto; }
[id="hard-vocabulary-boundaries"]:not(#_#_#_) { background:#fff; margin:20px 0; padding:14px 16px; border-left:4px solid #ffc107; border-radius:6px; }
[id="index-hierarchy-live"]:not(#_#_#_) { color:#495057; font-size:13px; margin-top:10px; }
[id="infoScoringRuns"]:not(#_#_#_) { margin-top:6px; }
[id="model-readout-qb"]:not(#_#_#_) { color:#495057; font-weight:600; }
[id="nh-advanced"]:not(#_#_#_) { cursor:pointer; }
[id="nh-bol-paste"]:not(#_#_#_) { width:100%; box-sizing:border-box; font-size:16px; }
[id="nh-bol-paste-go"]:not(#_#_#_) { width:100%; margin-top:8px; min-height:44px; }
[id="ontPmBar"]:not(#_#_#_) { display:flex; gap:8px; padding:4px 13px; align-items:center; flex-wrap:wrap; }
[id="ontPmMin"]:not(#_#_#_) { width:74px; }
[id="part-3-domains"]:not(#_#_#_) { background:linear-gradient(135deg, #e7f0fe, #d4e3f8); margin:36px 0 20px 0; padding:16px 18px; border-left:5px solid #1674dc; border-radius:8px; }
[id="part-4-examples"]:not(#_#_#_) { background:linear-gradient(135deg, #e7f0fe, #d4e3f8); margin:36px 0 20px 0; padding:16px 18px; border-left:5px solid #1674dc; border-radius:8px; }
[id="pdocs-runs"]:not(#_#_#_) { margin-bottom:12px; }
[id="pendingSummary"]:not(#_#_#_) { font-variant-numeric:tabular-nums; }
[id="pfCopyChatText"]:not(#_#_#_) { height:40vh; width:100%; box-sizing:border-box; font-size:13px; }
[id="phrase-gate-note"]:not(#_#_#_) { background:#fff; border:1px solid #ffe69c; color:#1a3b63; margin:6px 0 0; padding:8px 10px; border-radius:8px; font-size:13px; line-height:1.4; border-left: 4px solid #ffc107;}
[id="phrase-list-clear"]:not(#_#_#_) { color:#1066c4; font-size:12px; font-weight:bold; text-decoration:none; }
[id="phrase-list-copy"]:not(#_#_#_) { color:#1066c4; font-size:12px; font-weight:bold; text-decoration:none; }
[id="phrase-list-signals"]:not(#_#_#_) { flex:1; min-width:0; }
[id="pm-load-note"]:not(#_#_#_) { background:#e7f1ff; color:#1066c4; margin:0 0 8px; padding:8px 12px; border-radius:8px; font-size:13px; }
[id="pm-move-to-rife"]:not(#_#_#_) { color:#1066c4; font-weight:600; }
[id="pm-recent"]:not(#_#_#_) { margin-top:18px; }
[id="pm-recent-clear"]:not(#_#_#_) { font-size:13px; }
[id="pm-recent-list"]:not(#_#_#_) { display:flex; gap:10px; flex-direction:column; }
[id="pm-results-empty"]:not(#_#_#_) { margin:6px 2px; }
[id="pm-size-note"]:not(#_#_#_) { background:#f8f9fa; color:#6c757d; margin:8px 0 0; padding:8px 12px; border-radius:8px; flex-basis:100%; font-size:12px; }
[id="qb-count-toggle"]:not(#_#_#_) { border:1px solid #ced4da; display:inline-flex; overflow:hidden; border-radius:6px; }
[id="qb-drop-note"]:not(#_#_#_) { font-size:12px; }
[id="qb-refine-btn"]:not(#_#_#_) { flex:0 0 auto; }
[id="qb-refine-input"]:not(#_#_#_) { flex:1; box-sizing:border-box; min-height:38px; min-width:200px; }
[id="qb-result-controls"]:not(#_#_#_) { gap:8px; align-items:center; margin-left:auto; }
[id="qb-sel-count"]:not(#_#_#_) { color:#6c757d; font-size:12px; }
[id="quick-build-input"]:not(#_#_#_) { flex:1 1 auto; width:100%; box-sizing:border-box; min-width:0; }
[id="quick-build-results"]:not(#_#_#_) { border-top:1px solid #eee; margin-top:14px; padding-top:12px; }
body:has(#gen-quick-slim:not([hidden])) [id="quick-build-results"]:not(#_#_#_) { border-top:0; margin-top:6px; padding-top:4px; }   /* 28ka (678): the slim line's own rule is the divider — two lines in a row read as an empty section */
[id="quick-build-status"]:not(#_#_#_) { flex:1 1 100%; font-size:12px; line-height:1.45; }
[id="repRefresh"]:not(#_#_#_) { margin-left:8px; }
[id="reset-cost-inline"]:not(#_#_#_) { color:#1066c4; font-size:12px; text-decoration:underline; }
[id="reset-runs-btn"]:not(#_#_#_) { padding:6px 12px; font-size:13px; }
[id="rife-clear-link"]:not(#_#_#_) { color:#1066c4; flex-shrink:0; font-size:12px; font-weight:bold; text-decoration:none; }
[id="rife-freq-gate-note"]:not(#_#_#_) { color:#6c757d; font-size:12px; }
[id="rife-freq-list"]:not(#_#_#_) { color:#495057; font-size:13px; line-height:1.9; margin-top:8px; }
[id="rife-freq-reveal"]:not(#_#_#_) { font-size:13px; margin-right:auto; }
[id="rife-freq-status"]:not(#_#_#_) { color:#6c757d; font-size:13px; }
[id="rife-freqs"]:not(#_#_#_) { border:1px solid #ced4da; padding:8px 10px; width:100%; border-radius:6px; font-family:inherit; font-size:13px; }
[id="rife-open-player"]:not(#_#_#_) { background:#dbe9f9; border:1px solid #b8d4f0; padding:12px 14px; border-radius:10px; margin-top:14px; }
[id="rife-paste-clear"]:not(#_#_#_) { font-size:13px; font-weight:600; }
[id="rife-paste-copy"]:not(#_#_#_) { font-size:13px; font-weight:600; }
[id="rife-paste-note"]:not(#_#_#_) { color:#6c757d; font-size:13px; margin-top:4px; }
[id="rife-preset-gate-note"]:not(#_#_#_) { color:#6c757d; font-size:12px; }
[id="rife-preset-status"]:not(#_#_#_) { color:#6c757d; font-size:13px; }
[id="rife-typed-clear"]:not(#_#_#_) { color:#1066c4; flex-shrink:0; font-size:12px; font-weight:bold; text-decoration:none; }
[id="rife-typed-note"]:not(#_#_#_) { color:#6c757d; font-size:12px; margin-top:4px; }
[id="rife-typed-wrap"]:not(#_#_#_) { margin-top:10px; }
[id="rifeBrowseBtn"]:not(#_#_#_) { padding:9px 14px; flex-shrink:0; font-size:13px; white-space:nowrap; }
[id="rifeFreq"]:not(#_#_#_) { background:#f7f9fb; border:1px solid #b8d4f0; flex:1; padding:10px; resize:vertical; border-radius:4px; font-family:inherit; min-height:44px; min-width:0; overflow-y:hidden; }
[id="rifeFreqNote"]:not(#_#_#_) { background:#fff; border:1px solid #ffe69c; color:#1a3b63; margin:4px 0 0; padding:5px 9px; border-radius:6px; font-size:13px; border-left: 4px solid #ffc107;}
[id="score-gate-note"]:not(#_#_#_) { color:#6c757d; font-size:12px; margin-left:2px; }
[id="score-status"]:not(#_#_#_) { color:#6c757d; font-size:13px; }
[id="send-gate-sep"]:not(#_#_#_) { color:#dee2e6; align-self:center; }
[id="session-cost-inline"]:not(#_#_#_) { color:#1066c4; font-size:20px; font-weight:700; }
[id="session-records-toggle"]:not(#_#_#_) { color:#1066c4; display:inline; float:none; font-size:12px; font-weight:normal; margin-left:8px; vertical-align:middle; }
[id="shared-capture-line"]:not(#_#_#_) { align-self:center; font-size:12px; margin-right:auto; }
[id="signal-status-strip"]:not(#_#_#_) { display:flex; flex:1; gap:6px; align-items:center; flex-wrap:wrap; font-size:13px; min-width:0; }
[id="spend-details-link"]:not(#_#_#_) { color:#1066c4; font-size:12px; text-decoration:underline; }
[id="startTimePhoneNote"]:not(#_#_#_) { margin-top:4px; }
[id="statusDetailsLink"]:not(#_#_#_) { font-size:12px; margin-left:8px; }
[id="tpk-note"]:not(#_#_#_) { color:#6c757d; font-size:12px; }
[id="validate-model"]:not(#_#_#_) { border:1px solid #ccd1d5; padding:3px 5px; border-radius:5px; font-size:12px; }
[id="validationResults"]:not(#_#_#_) { display:none !important; margin-top:15px; }
[id="voice-skip-link"]:not(#_#_#_) { font-size:13px; margin-left:8px; }
[id="zoneSub"]:not(#_#_#_) { margin-top:6px; }
.u-fs-20:not(#_#_#_) { font-size:20px; }
.u-c-0b3d7a:not(#_#_#_) { color:#0b3d7a; }

/* ---- 28gz (360): the Welcome modal ---- */
.nhw-wrap{position:fixed;inset:0;z-index:100000;background:rgba(16,24,40,.45);display:none;align-items:flex-start;justify-content:center;padding:24px 16px;overflow:auto}
body.nhw-open{overflow:hidden}
.nhw{background:#fff;border-radius:12px;width:100%;max-width:760px;box-shadow:0 12px 32px rgba(16,24,40,.25);font-family:inherit;margin-top:40px}
.nhw .nh-win-head{border-radius:12px 12px 0 0}
.nhw-body{padding:16px 20px 18px}
.nhw-hero{border:1.5px solid #1066c4;border-radius:10px;padding:14px 16px;background:#f7faff;display:flex;flex-wrap:wrap;gap:12px 20px;align-items:flex-start}
.nhw-hero .main{display:flex;flex-direction:column;gap:6px;flex:1 1 260px}
.nhw-hero .mt{font-size:16px;font-weight:700;color:#1a3b63}.nhw-hero .ms{font-size:13.5px;color:#333;line-height:1.45}
.nhw-hero .side{display:flex;flex-direction:column;gap:6px;min-width:220px}
.nhw-mini{display:flex;flex-direction:column;gap:5px;margin-top:4px}
.nhw-step{display:flex;align-items:center;gap:8px;font-size:14px;color:#1a3b63}
.nhw-step .n{width:22px;height:22px;border-radius:50%;background:#1066c4;color:#fff;font-size:12.5px;font-weight:700;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.nhw-step.done .n{background:#2e7d32}.nhw-step .h{color:#6c757d;font-size:12.5px}
.nhw-step a{color:#1066c4;font-weight:600;text-decoration:none}.nhw-step.done a{color:#1a3b63;font-weight:500}
.nhw-tile{border:1.5px solid #1066c4;border-radius:10px;padding:12px 14px;background:#fff;min-width:230px;max-width:280px;display:flex;flex-direction:column;gap:6px}
.nhw-tile .tn{font-size:15px;font-weight:700;color:#1a3b63}.nhw-tile .tp{font-size:13.5px;color:#1066c4;font-weight:600}
.nhw-tile ul{margin:2px 0 6px;padding-left:18px;font-size:13.5px;line-height:1.5;color:#333}.nhw-tile .nhw-btn{align-self:flex-start}
.nhw-level{font-size:14px;line-height:1.5;color:#1a3b63;margin:12px 0 0;font-weight:500}
.nhw-h{font-size:12.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:#6c757d;margin:16px 0 8px}
.nhw-list{display:flex;flex-direction:column;border:1px solid #dfe5ec;border-radius:10px;overflow:hidden}
.nhw-li{display:flex;align-items:center;gap:10px;padding:9px 12px;border-top:1px solid #eef1f5;text-decoration:none;color:#1a3b63;font-size:14px}
.nhw-li:first-child{border-top:none}.nhw-li:hover{background:#f7faff}.nhw-li .ic{width:22px;text-align:center;color:#1066c4}.nhw-li b{min-width:150px}.nhw-li .d{color:#555;flex:1}.nhw-li .go{color:#1066c4;font-weight:600;white-space:nowrap}
.nhw-row{display:flex;flex-wrap:wrap;align-items:center;gap:12px}
.nhw-actions{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-top:16px}
.nhw-btn{display:inline-block;border-radius:999px;padding:10px 18px;font:inherit;font-size:14.5px;font-weight:700;border:1.5px solid #1066c4;background:#1066c4;color:#fff;text-decoration:none;cursor:pointer;line-height:1.2}
.nhw-btn.q{background:#fff;color:#1066c4}.nhw-btn:hover{filter:brightness(.95)}
.nhw-links{margin-left:auto;display:flex;flex-wrap:wrap;gap:14px;font-size:13.5px}.nhw-links a{color:#1066c4;text-decoration:underline}
.nhw-foot{font-size:12.5px;color:#6c757d;margin-top:12px}
@media (max-width:680px){.nhw-wrap{padding:0;align-items:flex-end}.nhw{margin-top:0;max-height:100vh;height:100vh;border-radius:0;overflow:auto;display:flex;flex-direction:column}
.nhw .nh-win-head{position:sticky;top:0;z-index:2;border-radius:0}.nhw-body{padding:14px 16px 16px;flex:1}
.nhw-hero{flex-direction:column;align-items:stretch;gap:12px}.nhw-hero .main{flex:0 0 auto}.nhw-tile{max-width:none}
.nhw-row .nhw-btn{flex:1 1 auto;text-align:center}.nhw-li{padding:8px 10px}.nhw-li .d{display:none}.nhw-li .go{margin-left:auto}.nhw-li b{min-width:0}
.nhw-actions{padding:12px 0 6px;margin-top:12px;border-top:1px solid #e3e8ef}.nhw-links{margin-left:0;width:100%}}
/* 28gz (360): the strips are one row — rows 2–3 (the level line, the doors) live in the modal; the level line joins row 1 on a laptop. */
#nh-intro-more-body{display:none !important}
.nh-intro-level-inline{font-size:13px;color:#1a3b63;margin-left:6px}
@media (max-width:680px){.nh-intro-level-inline{display:none}}

/* 380 (Dan, 2026-10-05: "I thought we decided on yellow stripe"): one error treatment — white box, 4px #ffc107 left stripe, the site's dark text, blue links. The cream fill (#fff3cd) and gold text (#664d03 / #856404 / #8a6d1d) are gone from this file; check 16 refuses them. */
.u-c-664d03 { color: #1066c4 !important; }

.nh-params { border-collapse:collapse; font-size:13px; width:100%; } .nh-params th, .nh-params td { text-align:left; padding:6px 8px; border-bottom:1px solid #e3e8ef; vertical-align:top; } .nh-params code { font-size:12.5px; }   /* 371 */

   /* 378 (Dan: "looks like a font afterthought") */

/* ---- 28hf (384 / 385, Dan: "suggestive / helpful — not a triangle"; "No error icons") ----
   Three treatments only. A NUDGE (the person can improve something; nothing broke) is the blue tip: pale blue, a blue
   left stripe, a ✦ mark, "Tip:". A FAILURE (ours or the browser's) keeps the white box with the yellow stripe (380). A STATE
   or NOTE is neutral grey with no stripe. */
.nh-tip, [id="phrase-gate-note"]:not(#_#_#_), :where(.pg-player) #pl-sg-note.is-warn:not(#_#_#_), :where(.pg-player) .pl-sg-note.is-warn:not(#_#_#_), #rifeFreqNote:not(#_#_#_) {
  display:block; background:#eef4fd; border:1px solid #cfe0f7; border-left:4px solid #1066c4; color:#1a3b63; border-radius:8px; padding:8px 10px; }
.nh-tip-ic { display:inline-flex; align-items:center; justify-content:center; width:18px; height:18px; border-radius:50%; background:#1066c4; color:#fff; font-size:11px; font-weight:700; margin-right:2px; vertical-align:-3px; font-style:normal; }
/* States and notes: neutral, no stripe */
.nh-plans-draft:not(#_#_#_), .nh-legal-draft:not(#_#_#_), .nh-contact-status:not(#_#_#_), .nh-member-status:not(#_#_#_),
:where(.pg-generator) .exp-badge:not(#_#_#_), .pg-community .cm-st-waiting:not(#_#_#_), .pg-community .cm-st-declined:not(#_#_#_), .pg-community .cm-st-removed:not(#_#_#_),
.pg-community .need:not(#_#_#_), .pg-community .warn:not(#_#_#_) {
  background:#f3f5f8; color:#33475b; border-left:none; border-color:#e3e8ef; }
/* the six the 380 sweep striped by mistake: back to plain */
.snap-pill small.is-stale:not(#_#_#_), .nh-welcome-door--sub b:not(#_#_#_), .nh-vp-placeholder:not(#_#_#_), .pg-community .ok:not(#_#_#_),
.pg-community .cm-st-published:not(#_#_#_), .pg-community .cm-label:not(#_#_#_), :where(.pg-player) .pl-wf-summary .pl-wf-none:not(#_#_#_) { border-left:none; }
[id="phrase-gate-note"][hidden], #rifeFreqNote[hidden], .nh-tip[hidden], #pl-sg-note[hidden] { display:none !important; }
/* 28hf (385): the phrase-check flags are nudges — the tip's blue, not orange */
.nh-chip:not(#_#_#_) { background:#eef4fd; color:#1a3b63; }
/* 28hf (386, Dan: "make all four of those buttons same treatment"): ‹ Layer N, Refine, Next layer ›, Different direction — one
   outline chip; only a chosen step (Finalize when picked) is filled. */
:where(.pg-generator) .gen-quickpick-chip.gen-quickpick-deeper:not(.selected):not(#_#_#_) { border-color:#b9c6ee; color:#2a3a6a; font-weight:600; }
:where(.pg-generator) .gen-quickpick-path .gen-quickpick-chip:not(.selected):not(#_#_#_), .gen-layer-btn:not(#_#_#_) { font-weight:600; font-size:13px; }
/* 28if — the quick tour (site-common.js nhTour): a catcher over the page, a ring over one control that dims everything else, a small box. Code sets only the measured --x/--y/--w/--h and --bx/--by. */
.nht-catch{position:fixed;inset:0;z-index:100001;background:transparent}
.nht-ring{position:fixed;left:var(--x,0);top:var(--y,0);width:var(--w,0);height:var(--h,0);z-index:100002;border:3px solid #fff;border-radius:12px;box-shadow:0 0 0 3px #1066c4,0 0 0 200vmax rgba(16,24,40,.5);pointer-events:none;transition:left .2s,top .2s,width .2s,height .2s}
.nht-ring[hidden]{display:none}
.nht-box{position:fixed;left:var(--bx,12px);top:var(--by,12px);z-index:100003;width:360px;max-width:calc(100vw - 24px);background:#fff;border:1.5px solid #1066c4;border-radius:12px;padding:12px 16px 14px;box-shadow:0 10px 30px rgba(16,24,40,.25);display:flex;flex-direction:column;gap:6px;font-size:14px;line-height:1.45;color:#333}
.nht-box.nht-free{left:50%;top:50%;transform:translate(-50%,-50%);box-shadow:0 0 0 200vmax rgba(16,24,40,.5),0 10px 30px rgba(16,24,40,.25)}
.nht-top{display:flex;align-items:center;justify-content:space-between}
.nht-n{font-size:12.5px;font-weight:600;color:#6c757d}
.nht-x{background:none;border:0;font-size:22px;line-height:1;color:#6c757d;cursor:pointer;padding:2px 6px;min-width:36px;min-height:36px}
.nht-x:hover{color:#1066c4}
.nht-t{font-size:16px;font-weight:700;color:#1a3b63}
.nht-d{font-size:14px;color:#333}
.nht-row{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:6px}
.nht-row .nhw-btn{padding:8px 16px;font-size:14px;min-height:36px}

.nhw-tourtile .ts{font-size:13.5px;line-height:1.45;color:#333;margin-bottom:4px}

   /* 28iq (490): one tour link per page */
@media (max-width:600px){.nht-box{left:var(--bl,0);right:auto;top:auto;bottom:0;width:var(--bw,100%);max-width:none;box-sizing:border-box;border-radius:14px 14px 0 0;border-width:1.5px 0 0;padding-bottom:calc(14px + env(safe-area-inset-bottom))}.nht-box.nht-free{left:var(--bl,0);top:auto;transform:none}.nht-box.nht-up{top:0;bottom:auto;border-radius:0 0 14px 14px;border-width:0 0 1.5px;padding-bottom:14px}}

/* 28iq (item 12): Copy Chat and Restore picks only once there is a chat to copy */
:where(.pg-generator) body:not(.gen-has-conv) #copy-chat-btn, :where(.pg-generator) body:not(.gen-has-conv) #resend-agreed-btn { display:none; }
/* 28ir (494): the tour's door on the Generator / Prioritizer strip and the Community top bar */
/* 28ir (494): the tour's door — a link at the right end of the page banner, every page with a tour */
.page-banner.has-tour, .pg-community .cm-hero.has-tour { position: relative; padding-right: 150px; }
.nh-banner-tour { position: absolute; right: 16px; top: 50%; transform: translateY(-50%); font-size: 13px; font-weight: 600; color: #fff; text-decoration: none; background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.55); border-radius: 999px; padding: 0 12px; min-height: 36px; display: inline-flex; align-items: center; box-sizing: border-box; white-space: nowrap; }
.nh-banner-tour:hover { background: rgba(255,255,255,.26); color: #fff; }
.pg-community .nh-banner-tour { color: #1066c4; background: #fff; border-color: #cfe0f7; }
@media (max-width: 600px) { .page-banner.has-tour, .pg-community .cm-hero.has-tour { padding-right: 16px; } .nh-banner-tour { position: static; transform: none; display: flex; width: max-content; margin-top: 8px; } }   /* 28iu (509): on a phone the pill sits under the banner's text on its own line — it overlapped a long second line */
/* 28it (506): the folded rows' quick links — grey, at the right end of the header, before the chevron.
   28iz (525, Dan's pick "C" from the mock-ups): one layout for every row — the title, then the status running on after it
   in grey ("Playlist  3 phrases"; "optional" sits in that slot on the ✦ rows with nothing else to say), then at the right the
   quick links and the chevron. The status keeps clear of the links by their measured width (--pl-q-w, set in nhSteps.status).
   On a phone the status drops to a second line under the title; the links and the chevron stay on the first. */
:where(.pg-player) .pl-step { position: relative; }
:where(.pg-player) .pl-step-q { position: absolute; right: 34px; top: 0; height: 100%; display: flex; align-items: center; gap: 8px; font-size: 12.5px; white-space: nowrap; }
:where(.pg-player) .pl-step.is-open > .pl-step-q { display: none; }
:where(.pg-player) .pl-step-q[hidden] { display: none; }
:where(.pg-player) .pl-step-q a { color: #6c757d; text-decoration: none; font-weight: 600; padding: 0 2px; min-height: 36px; display: inline-flex; align-items: center; }
:where(.pg-player) .pl-step-q a:hover { color: #1066c4; text-decoration: underline; }
:where(.pg-player) .pl-step-q .pl-q-sep { color: #cdd4dd; }
:where(.pg-player) .pl-q-busy { color: #1066c4; font-weight: 600; }
:where(.pg-player) .pl-step-h.has-q .pl-step-st { padding-right: calc(var(--pl-q-w, 0px) + 16px); }
:where(.pg-player) .pl-step-st.is-opt { color: #9aa3ae; font-style: italic; }
:where(.pg-player) .pl-step-opt { display: none; }   /* 28iz: "optional" is the status now, not a word beside the title */
@media (max-width: 600px) {   /* a phone: the status under the title; the links and the chevron on the title's line */
  :where(.pg-player) .pl-step-h, .pg-player button.pl-step-h { flex-wrap: wrap; row-gap: 2px; position: relative; padding-right: 32px; }   /* the button rule above sets 8px 12px — the chevron needs the 32 */
  :where(.pg-player) .pl-step-t { flex: 1 1 auto; }
  :where(.pg-player) .pl-step-chev { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); }
  :where(.pg-player) .pl-step.is-open .pl-step-chev { transform: translateY(-50%) rotate(180deg); }
  :where(.pg-player) .pl-step-h .pl-step-st { order: 5; flex: 0 0 100%; text-align: left; margin-left: 0; padding: 0 0 0 20px; }
  :where(.pg-player) .pl-step-h.has-q .pl-step-st { padding-right: calc(var(--pl-q-w, 0px) + 12px); }   /* the links are centred over both lines — the text stays clear of them */
  :where(.pg-player) .pl-step-h .pl-step-st:empty { display: none; }
  :where(.pg-player) .pl-step-q { font-size: 12px; right: 30px; }
}

/* 28jc (532, Dan's C3 — the two ✦ phrase rows after Set Session Length, quieter, under one line; Choose Waveforms stays in the path) */
:where(.pg-player) .pl-opt-sep{margin:14px 0 8px}
:where(.pg-player) .pl-opt-sep[hidden]{display:none}
.pg-player .pl-col-card > .section.pl-step--opt{background:#f6f8fb;border-color:#e6ebf1;box-shadow:none}
:where(.pg-player) .pl-step--opt .pl-step-t{font-size:14.5px;font-weight:600;color:#3b4654}
:where(.pg-player) .pl-step--opt .pl-step-dot{background:#c3ccd8}
:where(.pg-player) .pl-step--opt.is-open{background:#fff;border-color:#1066c4}
:where(.pg-prioritizer) .pm-pre[hidden] { display: none; }   /* 28jc (532 item 13) */

/* 28je (535): the "✦ Choose for me" chip is the page's signal that the AI may choose from this batch — the button carries the
   action now ("✦ Let the AI pick" when nothing is picked), so the chip itself is not shown. */
:where(.pg-generator) #gen-conv-quickpick .gen-quickpick-chip[data-pick="choose for me"] { display: none; }
/* 28jg (545, Dan): Done is not a next step — the finalize chip is hidden and the Done button sits after Submit. */
:where(.pg-generator) #gen-conv-quickpick .gen-quickpick-chip[data-pick="finalize"] { display: none; }
:where(.pg-generator) #gen-conv-done-btn { flex: 0 0 auto !important; width: auto !important; white-space: nowrap; }
:where(.pg-generator) #gen-conv-done-btn[hidden] { display: none !important; }
:where(.pg-generator) #gen-qp-dock #gen-conv-done-btn { padding: 10px 16px !important; font-size: 14px !important; }
:where(.pg-generator) #gen-compose-action > #gen-conv-done-btn { margin-top: 6px; }
:where(.pg-generator) #gen-conv-done-btn .fa-short { display: none; }
@media (max-width: 680px) {
  :where(.pg-generator) #gen-qp-dock #gen-conv-done-btn { padding: 9px 12px !important; font-size: 13px !important; }
  :where(.pg-generator) #gen-conv-done-btn .fa-long { display: none; }
  :where(.pg-generator) #gen-conv-done-btn .fa-short { display: inline; }
}
/* 28je (535 item 2, Dan): on a phone the Practitioners page's collection tiles are one sideways-swiping row (ten tiles were five
   rows before the first session); the desktop keeps its grid (529). */
@media (max-width: 600px) {
  .pg-community .cm-pers { display: flex; overflow-x: auto; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; scrollbar-width: none; gap: 8px; padding: 0 0 6px; margin-bottom: 8px;
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent 100%); mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent 100%); }
  .pg-community .cm-pers::-webkit-scrollbar { display: none; }
  .pg-community .cm-pc { flex: 0 0 68%; scroll-snap-align: start; }
}

/* Summarize my session (28jf, 539): the path of discovery and the set by layer, in a window. */
.nh-sum { font-size:14px; line-height:1.45; }
.nh-sum .nh-sum-h { font-size:12px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:#6c757d; margin:14px 0 6px; }
.nh-sum .nh-sum-h:first-child { margin-top:0; }
.nh-sum .nh-sum-path { margin:0; padding-left:22px; }
.nh-sum .nh-sum-path > li { margin:0 0 10px; }
.nh-sum .nh-sum-layer { font-weight:700; }
.nh-sum .nh-sum-how { color:#495057; font-size:13px; margin:2px 0 4px; }
.nh-sum .nh-sum-dim { color:#6c757d; font-weight:400; }

.nh-sum .nh-sum-grp { margin:0 0 8px; }
.nh-sum .nh-sum-grp ul { margin:2px 0 0; padding-left:20px; }
/* 28jh (550): the AI's summary at the top; the Not taken block; the phrases left */
.nh-sum .nh-sum-ai p { margin:0 0 8px; }
.nh-sum .nh-sum-ai b { display:block; margin-top:6px; }

.nh-sum .nh-sum-nt { margin:0; padding-left:22px; }
.nh-sum .nh-sum-nt > li { margin:0 0 10px; }
.nh-sum .nh-sum-nt .nh-sum-how b { font-weight:600; color:#495057; }
.nh-sum .nh-sum-grp li { margin:1px 0; }

/* 28jk (555, Dan: "The ai select for newbies is actually pretty powerful and accurate … standing in its own without chat
   somehow?" → the three cards): the Generator's step 2 — three cards side by side, stacked on a phone. Card 1 (✦ Let the AI
   build it) is the primary one: a blue border. Card 3 holds the Quick Build box. The chat box is folded (body.gen-cards-fold)
   until "Type it instead" or a chat; an AI-built run (body.gen-auto) hides the compose and shows one status line + Stop in the bar. */
.gen-cards-step { align-items:flex-start !important; }
.gen-cards-label { margin:0 0 8px; display:flex; align-items:center; gap:4px; }
.gen-cards-label .gen-how-i { display:inline-flex; vertical-align:middle; }
.gen-cards { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:12px; }
@media (max-width:900px) { .gen-cards { grid-template-columns:1fr; gap:10px; } }
.gen-card { border:1px solid #d0d7de; border-radius:12px; padding:14px 16px; background:#fff; display:flex; flex-direction:column; gap:8px; min-width:0; }
.gen-card--primary { border:2px solid #1066c4; background:#f7faff; }
.gen-card-title { font-size:15px; font-weight:700; color:#1a3b63; }
.gen-card--primary .gen-card-title { color:#1066c4; }
.gen-card-text { margin:0; font-size:13px; line-height:1.45; color:#495057; flex:1 1 auto; }
.gen-card-actions { display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-top:auto; }
.gen-card-actions > .nh-btn { font-size:13.5px; padding:8px 18px; }
.gen-card-actions > .nh-btn.nh-needs-snap { white-space:normal !important; text-align:center; }
:where(.pg-generator) .gen-card-actions > #quick-build-btn { height:auto; max-width:none; min-width:0; width:auto; border-radius:999px; font-size:13.5px; padding:8px 18px; }
:where(.pg-generator) .gen-card-actions > #quick-build-btn:disabled:not(.nh-needs-snap) { background:#b9c9df; border-color:#b9c9df; color:#fff; opacity:1; }
.gen-card .gen-box-wrap { width:100%; flex:0 0 auto; }
:where(.pg-generator) .gen-card .gen-box-wrap textarea#quick-build-input, :where(.pg-generator) body.qb-has-results .gen-card textarea#quick-build-input { min-height:84px !important; height:auto; width:100%; font-size:13px; padding:8px 10px !important; border-radius:8px; border:1px solid #ced4da; resize:vertical; box-sizing:border-box; }
.gen-cards-note { margin:10px 0 0; }
.gen-cards-note[hidden] { display:none !important; }
.gen-cards-recent { margin:10px 0 0; font-size:13px; }
body.gen-cards-fold #gen-compose-card, body.gen-cards-fold #gen-action-row, body.gen-cards-fold .gen-under-compose { display:none !important; }
body.gen-auto #gen-compose-card, body.gen-auto #gen-action-row { display:none !important; }
#gen-qp-dock.gen-qp-auto #gen-qp-dock-top, #gen-qp-dock.gen-qp-auto #gen-qp-dock-slot { display:none !important; }
#gen-qp-dock.gen-qp-auto #gen-qp-dock-row { display:flex !important; align-items:center; justify-content:center; gap:8px 14px; flex-wrap:wrap; }
#gen-qp-dock.gen-qp-auto #gen-qp-dock-row > :not(#gen-qp-dock-text):not(.gen-auto-stop) { display:none !important; }
#gen-qp-dock.gen-qp-auto #gen-qp-dock-text { flex:1 1 auto; text-align:center; }
#gen-qp-dock.gen-qp-auto .gen-auto-stop { flex:0 0 auto; }
.gen-auto-stop .fa-short { display:none; }
@media (max-width:680px) { .gen-auto-stop .fa-long { display:none; } .gen-auto-stop .fa-short { display:inline; } #gen-qp-dock.gen-qp-auto #gen-qp-dock-text { font-size:13px; } }
.gen-card .gen-box-wrap:not(#_#_#_) { flex:0 0 auto; width:100%; }   /* the chat-row basis (260px) would stretch card 3's box */
#gen-g-title-row[hidden], .gen-step3-badge[hidden] { display:none !important; }   /* 28jk (555): the "3 · What are you noticing?" label is gone; display:flex beat hidden */
.gen-steprow > .gen-prechat.gen-cards-step { align-items:flex-start !important; flex:1 1 100% !important; margin-top:4px !important; }   /* the cards take the row's second line, badge at the top */
@media (max-width:680px) {   /* a phone: the badge and "Then choose how to begin" on one line, the cards under them (the Prioritizer's pattern) */
  .gen-steprow > .gen-prechat.gen-cards-step { flex-wrap:wrap; align-items:center !important; }
  .gen-cards-step > .u-fx-1 { display:contents; }
  .gen-cards-step .gen-cards-label { margin:0; flex:0 1 auto; }
  .gen-cards-step .gen-cards, .gen-cards-step .gen-cards-note, .gen-cards-step .gen-cards-recent { flex:1 1 100%; }
  .gen-cards-step .gen-cards-note { margin-top:2px; }
  .gen-cards-step .gen-cards-recent { margin-top:2px; }
}
#gen-qp-dock.gen-qp-auto #gen-qp-dock-row > .gen-auto-stop { display:inline-flex !important; }   /* the thinking rule hides the row's buttons; Stop stays */
#gen-qp-dock.gen-qp-auto #gen-qp-dock-row > .gen-auto-stop:not(#_#_) { display:inline-flex !important; }   /* outranks the thinking rule's :not(#id) */

/* 28jl (559c): a finished chat's Copy chat / Restore links stay while the box is folded; (559e) the progress panel while ✦ Let the AI
   build it runs or has just finished — the thread hidden, "Show the chat" brings it back. */
body.gen-cards-fold.gen-has-conv .gen-under-compose { display:flex !important; }
body.gen-auto-hide #generated-phrases-body { display:none !important; }
/* 28ka (678, Dan: "use site styles"): the built panel in the Player's Summary look — a white card (.pl-how-card), the small-caps
   label (.nh-sum .nh-sum-h), rows with thin dividers and the count on the right (.nh-sumtab-list); 682: a direction's phrases under it */
.gen-auto-panel { border:1px solid #d9dee5; background:#fff; border-radius:12px; padding:14px 16px 8px; margin:8px 0 10px; color:#212529; box-shadow:0 1px 3px rgba(16,24,40,.06); }
.gen-auto-panel[hidden] { display:none !important; }
.gen-auto-head { font-size:16px; font-weight:700; margin:0 0 6px; color:#1a3b63; }
.gen-auto-sub { color:#6c757d; font-size:13px; margin:0 0 8px; }
.gen-auto-path { list-style:none; margin:0; padding:0; }
.gen-auto-path > li { padding:6px 0; border-top:1px solid #edf2f8; }
.gen-auto-path > li:first-child { border-top:0; }
.gen-auto-row { display:flex; justify-content:space-between; align-items:baseline; gap:12px; }
.gen-auto-layer { min-width:0; }
.gen-auto-kept { color:#6c757d; font-size:13px; white-space:nowrap; }
.gen-auto-ph { margin:4px 0 2px; padding-left:18px; color:#495057; font-size:13.5px; }
@media (max-width:680px) { body.gen-auto .gen-chat-slim .gen-slim-count { display:none; } }
/* 28jm (564 build 1, Dan: "directions, not phrases"): the phrases hidden by default. A batch's number chips stay in the DOM,
   pre-selected whole, and are not drawn (.gen-qp-hidden); the reply reads as its direction, one line of why and "✓ N phrases
   added"; a pick turn's You bubble reads "✓ N phrases"; the finished summary window carries the finished dock's actions. */
:where(.pg-generator) #gen-conv-quickpick .gen-quickpick-set.gen-qp-hidden { display:none !important; }
:where(.pg-generator) .gen-dir-line { font-weight:700; font-size:15px; color:#1a3b63; margin-top:2px; }
:where(.pg-generator) .gen-why-line { color:#495057; }
:where(.pg-generator) .gen-added-line { font-weight:600; color:#1a3b63; }
:where(.pg-generator) .gen-added-line .nh-kept, :where(.pg-generator) .chat-pick-count .nh-kept { margin-right:2px; }
:where(.pg-generator) .chat-pick-count { background:#e6f1fb; color:#0b3d7a; font-weight:600; }

.nh-sum .nh-sum-foot { margin-top:10px; padding-top:8px; border-top:1px solid #eef1f5; }
.nh-sum--done .nh-sum-h:first-child { margin-top:0; }
@media (max-width:680px) { .nh-card:has(.nh-sum--done) .nh-card-foot .nh-btn--sm { flex:1 1 44%; } }   /* the summary window's five actions wrap two to a row on a phone */   /* the bar and the panel carry the count while the AI builds; the slim line stays one row */

/* ======== 28jn — 564 build 2: Your sessions (the one store) and the Summary tab ========
   The Your sessions row at the top of the Player (name · day · counts · Play · Open), the Your sessions window on every page
   (the same rows, with Rename · Delete), and the Playlist card's Summary tab — the session in plain English. */

.nh-ys-list { display:flex; flex-direction:column; }
.nh-ys-row { display:flex; align-items:center; gap:12px; padding:8px 0; border-top:1px solid #edf2f8; min-width:0; }
.nh-ys-row:first-child { border-top:none; }
.nh-ys-row.is-open { background:#f7faff; margin:0 -8px; padding-left:8px; padding-right:8px; border-radius:8px; }
.nh-ys-main { flex:1 1 auto; min-width:0; }
.nh-ys-name { font-size:14.5px; font-weight:600; color:#1a3b63; display:flex; align-items:center; gap:6px; flex-wrap:wrap; min-width:0; }
.nh-ys-nm { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:100%; }
.nh-ys-badge { display:inline-block; font-size:11px; font-weight:600; line-height:18px; padding:0 7px; border-radius:999px; background:#e7f1ff; color:#1066c4; white-space:nowrap; }
.nh-ys-meta { font-size:12.5px; color:#6c757d; margin-top:1px; }
.nh-ys-acts { display:flex; align-items:center; gap:8px; flex:0 0 auto; flex-wrap:wrap; justify-content:flex-end; }
.nh-ys-acts > .nh-btn { min-height:36px; }
.nh-ys-link { font-size:13px; white-space:nowrap; display:inline-flex; align-items:center; justify-content:center; min-height:36px; min-width:44px; padding:0 4px; }
.nh-ys-empty { color:#6c757d; font-size:14px; margin:4px 0; }
@media (max-width:600px) {
  
  .nh-ys-row { gap:8px; }
  .nh-ys-acts { flex-wrap:nowrap; gap:6px; }
  .nh-ys-acts > .nh-btn { padding-left:12px; padding-right:12px; }
  .nh-ys-link { display:none; }   /* on a phone the window's Rename · Delete sit under the row (below) */
  .nh-ys-row .nh-ys-acts .nh-ys-link { display:inline; }
  #nh-your-sessions .nh-ys-row { flex-wrap:wrap; }
  #nh-your-sessions .nh-ys-acts { flex:1 1 100%; justify-content:flex-start; flex-wrap:wrap; }
}
/* the Summary tab */
:where(.pg-player) .nh-sumtab { font-size:14px; line-height:1.45; padding:4px 2px 2px; }
:where(.pg-player) .nh-sumtab-empty { color:#6c757d; margin:6px 0; }

:where(.pg-player) .nh-sumtab-ask { margin:8px 0 2px; color:#1a3b63; font-style:italic; }
:where(.pg-player) .nh-sumtab .nh-sum-h { font-size:12px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:#6c757d; margin:14px 0 6px; }
:where(.pg-player) .nh-sumtab-list { list-style:none; margin:0; padding:0; }
:where(.pg-player) .nh-sumtab-list > li { display:flex; justify-content:space-between; gap:12px; padding:4px 0; border-top:1px solid #edf2f8; }
:where(.pg-player) .nh-sumtab-list > li:first-child { border-top:none; }
:where(.pg-player) .nh-sumtab-n { color:#6c757d; font-size:13px; white-space:nowrap; }
:where(.pg-player) .nh-sumtab-nt > li { color:#6c757d; }
:where(.pg-player) .nh-sumtab-dim { color:#6c757d; font-weight:400; }
:where(.pg-player) .nh-sumtab-play { color:#495057; font-size:13.5px; }
:where(.pg-player) .nh-sumtab-links { margin:14px 0 4px; font-size:13px; }
/* 28jo (564 build 3): a session by link lands on the Summary tab — the volume tip, one big Play, Save as your own under it */
:where(.pg-player) .nh-sumtab-land { margin-top:14px; }
:where(.pg-player) .nh-sumtab-land .nh-sw-tip { margin:0 0 10px; }
:where(.pg-player) .nh-sumtab-play { display:block; width:100%; min-height:48px; font-size:16px; border-radius:12px; }
:where(.pg-player) .nh-sumtab-land .nh-sumtab-links { margin-top:10px; text-align:center; }
/* 28jp (564 build 4): the Prioritizer's chooser — Essentials, Your sessions — and the pool line that stands in for the box */
:where(.pg-prioritizer) .pm-chooser { padding:12px 14px; }
:where(.pg-prioritizer) .pm-chooser-h { font-size:12px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:#6c757d; margin:0 0 6px; }
:where(.pg-prioritizer) .pm-chooser-h2 { font-size:13px; font-weight:600; color:#1a3b63; margin:10px 0 2px; }
:where(.pg-prioritizer) .pm-chooser-row { display:flex; align-items:center; gap:8px; padding:4px 0; min-height:36px; cursor:pointer; border-top:1px solid #edf2f8; min-width:0; flex-wrap:wrap; }
:where(.pg-prioritizer) .pm-chooser-row.pm-chooser-ess, :where(.pg-prioritizer) .pm-chooser-sessions .pm-chooser-row:first-child { border-top:none; }
:where(.pg-prioritizer) .pm-chooser-row input { margin:0; flex:0 0 auto; width:18px; height:18px; }
:where(.pg-prioritizer) .pm-chooser-name { font-size:14px; font-weight:600; color:#1a3b63; }
:where(.pg-prioritizer) .pm-chooser-meta { font-size:12.5px; color:#6c757d; }
:where(.pg-prioritizer) .pm-chooser-sessions { max-height:220px; overflow:auto; }
:where(.pg-prioritizer) .pm-chooser-dim { font-size:13px; color:#6c757d; padding:4px 0; }
:where(.pg-prioritizer) .pm-chooser-pool { margin-top:10px; font-size:13.5px; color:#495057; }
:where(.pg-prioritizer) .pm-chooser-pool[hidden] { display:none !important; }
:where(.pg-prioritizer) #phrase-list-section.pm-box-hidden { display:none !important; }
:where(.pg-prioritizer) .pm-run-line { font-size:14.5px; color:#1a3b63; margin:0 0 8px; }
:where(.pg-prioritizer) .pm-run-line-dim { color:#6c757d; font-size:13px; }
:where(.pg-player) .nh-sumtab-links .nh-link { display:inline-flex; align-items:center; justify-content:center; min-height:36px; min-width:44px; padding:0 2px; }
/* ===== 28jr — the Player as two things (572 / D2, Dan: "1 d" + "I like them all on the home page"): the Build your session bar
   (five tiles + two links) and the session card (its name and actions on the header; Summary · Phrases · Rife left; How it plays right) ===== */
:where(.pg-player) .nh-build { padding: 14px 16px 12px; }
:where(.pg-player) .nh-build-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px 16px; flex-wrap: wrap; margin-bottom: 10px; }
:where(.pg-player) .nh-build-sub { color: #6b7684; font-size: 13px; font-weight: 400; }
:where(.pg-player) .nh-build .bys-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
:where(.pg-player) .nh-build .bys-tile { min-height: 64px; }
:where(.pg-player) .nh-build .bys-s { font-size: 12px; }
:where(.pg-player) .nh-build .bys-row4 { margin-top: 10px; }
:where(.pg-player) .bys-n { font-weight: 700; }
:where(.pg-player) .bys-glyph { font-size: 13px; margin-right: 2px; }
:where(.pg-player) .nh-build .bys-row4 .bys-tile[hidden] { display: none !important; }
:where(.pg-player) .nh-session { padding: 16px 18px 18px; }
:where(.pg-player) .nh-ses-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px 16px; flex-wrap: wrap; padding-bottom: 12px; border-bottom: 1px solid #e6e9ee; margin-bottom: 14px; }
:where(.pg-player) .nh-ses-title { min-width: 0; flex: 1 1 320px; }
:where(.pg-player) .nh-ses-name-row { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
:where(.pg-player) .nh-ses-name { font-size: 20px; font-weight: 700; color: #1d2733; line-height: 1.25; overflow-wrap: anywhere; }
:where(.pg-player) .nh-ses-name .nh-ys-badge { font-size: 12px; vertical-align: middle; }
:where(.pg-player) .nh-ses-rename { font-size: 13px; }
:where(.pg-player) .nh-ses-rename[hidden] { display: none; }
:where(.pg-player) .nh-ses-meta { color: #6b7684; font-size: 13px; margin-top: 3px; }
:where(.pg-player) .nh-ses-acts { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
:where(.pg-player) .nh-ses-acts[hidden] { display: none; }
:where(.pg-player) .nh-ses-keep { display: contents; }
:where(.pg-player) .nh-ses-keep .nh-keep-btn { margin: 0; }
:where(.pg-player) .nh-ses-play { font-size: 16px; padding: 10px 22px; }
:where(.pg-player) .nh-ses-play:disabled { opacity: .7; cursor: default; }
:where(.pg-player) .nh-ses-more { display: none; font-size: 13px; }
:where(.pg-player) #nh-savebar[hidden], :where(.pg-player) #nh-history-line[hidden] { display: none !important; }
/* the Playlist card on the left: a plain white card, always open, no fold header, no Next */
:where(.pg-player) #preset-phrases-card { display: flex; flex-direction: column; }
.pg-player .section.pl-step.pl-step--card { background: #fff; border: 1px solid #d9dee5; border-radius: 12px; box-shadow: none; }
.pg-player .section.pl-step.pl-step--card.is-open { border-color: #d9dee5; box-shadow: none; }
.pg-player .pl-step--card > .pl-step-h[hidden] { display: none; }
.pg-player .pl-step--card > .pl-step-b { display: flex; padding-top: 12px; }
.pg-player .pl-step--card > .pl-step-b[hidden] { display: flex; }
:where(.pg-player) .pl-step--card .pl-tabs { position: relative; }
:where(.pg-player) .pl-clear { position: absolute; right: 2px; top: 50%; transform: translateY(-50%); font-size: 13px; font-weight: 600; min-height: 36px; display: inline-flex; align-items: center; padding: 0 6px; }
:where(.pg-player) .pl-clear[hidden] { display: none; }
/* the right column: the rows under one "How it plays" line, no card of their own */
.pg-player .pl-col-card--plain { display: flex; flex-direction: column; gap: 8px; background: none; border: 0; box-shadow: none; padding: 0; }
.pg-player .pl-col-card--plain > .section.pl-step { background: #fff; }
:where(.pg-player) .pl-shape-sep[hidden] { display: none; }
:where(.pg-player) .build-grid.has-steps > .build-col:last-child > .pl-col-card--plain { flex: 0 0 auto; }
@media (max-width: 900px) {
  :where(.pg-player) .nh-build .bys-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  :where(.pg-player) .nh-build .bys-tile#bysCommunity { grid-column: 1 / -1; }
}
@media (max-width: 600px) {
  :where(.pg-player) .nh-session { padding: 14px 12px 16px; }
  :where(.pg-player) .nh-ses-name { font-size: 18px; }
  :where(.pg-player) .nh-ses-acts .nh-keep-btn:not(:first-child) { display: none; }
  :where(.pg-player) .nh-ses-acts.is-more .nh-keep-btn { display: inline-flex; }
  :where(.pg-player) .nh-ses-more { display: inline-flex; align-items: center; min-height: 36px; }
  :where(.pg-player) .nh-ses-more[hidden] { display: none; }
  :where(.pg-player) .nh-build-sub { display: none; }
}
/* the left card is the Playlist card alone — no grey frame around it */
:where(.pg-player) .nh-session #preset-phrases-card { background: none; border: 0; box-shadow: none; padding: 0; margin: 0; }
:where(.pg-player) .nh-session .build-grid { margin: 0; }
:where(.pg-player) .nh-build .bys-row4 { gap: 4px 18px; }
:where(.pg-player) .nh-build .bys-row4 .bys-tile { min-height: 32px; padding: 4px 0 !important; }
:where(.pg-player) .bys-tile .bys-n { white-space: nowrap; }
:where(.pg-player) .bys-tt { display: inline; }
.pg-player .nh-ses-acts .nh-keep-btn { flex: 0 0 auto; width: auto; white-space: nowrap; }
/* 28jr (572 e): the quick set as the screen — the cards fold away; the slim line stands for them */
body.gen-quick-set #gen-cards, body.gen-quick-set #gen-cards-note, body.gen-quick-set .gen-cards-recent { display: none !important; }
.gen-quick-slim[hidden] { display: none; }
.gen-quick-slim .gen-slim-ask { color: #495057; font-style: italic; margin-right: 2px; }
@media (max-width: 680px) { .gen-quick-slim { flex-wrap: wrap; } .gen-quick-slim .gen-slim-ask { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } }
:where(.pg-generator) #qb-refine-row { display: none !important; }   /* 28jr (572 r): the quick set's Refine row is retired */
:where(.pg-generator) .nh-sum-ai-list { margin: 4px 0 10px; padding-left: 18px; }
:where(.pg-generator) .nh-sum-ai-list li { margin: 2px 0; line-height: 1.45; }
:where(.pg-generator) .nh-sum-ai > b { display: block; margin-top: 8px; }

/* ===== 28js — the UI/UX pass, package 1 (579: the Player + the Search window; Dan's calls of 2026-10-09 15:55–16:59) ===== */
/* the session card's header: "Session:" ahead of the name (Dan 16:10); no Play on the header (the foot bar is the Play) */
:where(.pg-player) .nh-ses-label { font-size: 14px; font-weight: 600; color: #6c757d; letter-spacing: .02em; margin-right: 6px; vertical-align: 2px; }
:where(.pg-player) .nh-ses-play[hidden] { display: none; }
/* the two column headers — What Plays over the card on the left, How It Plays over the tiles (Dan 16:04) */
:where(.pg-player) .pl-what-sep { margin: 0 0 10px; }
:where(.pg-player) .pl-what-sep[hidden] { display: none; }
/* the tiles' quick links as small outlined buttons where they run the AI or open the ticks (506's links back; Dan 15:55 / 16:55) */
:where(.pg-player) .pl-step-q a.pl-q-btn { color: #1066c4; padding: 0 10px; min-height: 28px; font-size: 12.5px; text-decoration: none; }
:where(.pg-player) .pl-step-q a.pl-q-btn:hover { text-decoration: none; }
/* the Summary tab (579 a′): You asked as a quote block; the foot row in an order */
:where(.pg-player) .nh-sumtab-ask { font-style: normal; font-size: 15px; color: #1a3b63; background: #f4f8fd; border-left: 3px solid #1066c4; padding: 8px 12px; border-radius: 0 8px 8px 0; margin: 2px 0 10px; }
:where(.pg-player) .nh-sumtab-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px 14px; flex-wrap: wrap; margin-top: 14px; padding-top: 12px; border-top: 1px solid #e9eef4; }
:where(.pg-player) .nh-sumtab-foot .nh-sumtab-show { margin: 0; }
:where(.pg-player) .nh-sumtab-next { font-size: 14px; }
:where(.pg-player) .nh-sumtab-next-l { color: #6c757d; margin-right: 4px; }
:where(.pg-player) .nh-sumtab-nt li span { color: #6c757d; }
/* walk 14: the Welcome modal and the New here strip never share a screen — the strip waits while the modal is open */
body.nhw-open #nh-intro { display: none !important; }
/* the Your sessions window (walk 16; 569 c): Play · Open, then ⋯ for Rename and Delete; the foot: download / load */
.nh-ys-more { position: relative; display: inline-flex; align-items: center; }
.nh-ys-more-btn { width: 36px; height: 36px; border-radius: 10px; border: 1px solid #cfd8e3; background: #fff; color: #5a6472; font-size: 18px; line-height: 1; cursor: pointer; padding: 0; margin: 0; }
.nh-ys-more-btn:hover, .nh-ys-more-btn:focus-visible, .nh-ys-more-btn:active { border-color: #1066c4 !important; color: #1066c4 !important; background: #f1f6ff !important; }   /* check 19: a white button goes pale blue and keeps its text colour */
.nh-ys-menu { position: absolute; right: 0; top: 40px; z-index: 5; background: #fff; border: 1px solid #dfe5ec; border-radius: 10px; box-shadow: 0 8px 24px rgba(16, 38, 70, .12); padding: 6px; display: flex; flex-direction: column; min-width: 160px; }
.nh-ys-menu[hidden] { display: none; }
.nh-ys-menu .nh-ys-link { padding: 8px 10px; min-height: 36px; display: inline-flex; align-items: center; border-radius: 8px; }
.nh-ys-menu .nh-ys-link:hover { background: #f1f6ff; text-decoration: none; }
.nh-ys-foot { margin: 14px 0 2px; font-size: 13.5px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.nh-ys-foot .nh-ys-dim { color: #6c757d; }
.nh-ys-foot .nh-ys-foot-note { margin-left: 6px; font-size: 12.5px; }
/* the Search window's source bands (579 i): the sources are the top level; their categories sit one step in */
.tp-src { background: #e9f1fb !important; }
.tp-under-src { padding-left: 26px !important; }
/* a phone: the Waveforms row's two links sit on the status line, under the title, so nothing overlaps (28js) */
@media (max-width: 600px) {
  :where(.pg-player) .pl-step[data-step="5"] .pl-step-q, :where(.pg-player) .pl-step[data-step="6"] .pl-step-q { position: static; height: auto; order: 6; flex: 0 0 100%; padding: 4px 0 8px 32px; justify-content: flex-start; }
  :where(.pg-player) .pl-step[data-step="5"] .pl-step-h.has-q .pl-step-st, :where(.pg-player) .pl-step[data-step="6"] .pl-step-h.has-q .pl-step-st { padding-right: 0; }
  :where(.pg-player) .pl-step-q a.pl-q-btn { padding: 0 8px; min-height: 26px; }
}
/* ===== 28js — package 2 (the Generator) ===== */
/* the three cards' "Take a snapshot first" the same width and weight (Dan 16:21) */
:where(.pg-generator) .gen-card-actions > .nh-btn.nh-needs-snap { width: 100%; }
/* the snapshot row under the cards (579 k): the pill, ↻, ×, Request a client snapshot — no step number */
:where(.pg-generator) .gen-snaprow { margin: 10px 0 0; }
:where(.pg-generator) .gen-snaprow[hidden] { display: none; }
/* the slim line's phrases toggle (579 m) */
/* the done panel's actions (579 l) */
/* the summary window (580): the path table carries the count and share; the set behind Show the phrases */
.nh-sum .nh-sum-row { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; }
.nh-sum .nh-sum-n { color: #6c757d; font-size: 13px; white-space: nowrap; }
.nh-sum .nh-sum-set[hidden] { display: none; }
.nh-sum .nh-sum-set { margin-top: 10px; }
/* card 2's own box (Dan 17:35: "Type what you're noticing" opens it right there, like the quick set's) */
:where(.pg-generator) .gen-card .gen-box-wrap textarea#gen-ask-input { min-height: 84px !important; height: auto; width: 100%; font-size: 13px; padding: 8px 10px !important; border-radius: 8px; border: 1px solid #ced4da; resize: vertical; box-sizing: border-box; margin-bottom: 10px; }
:where(.pg-generator) #gen-ask-box[hidden] { display: none; }
/* ===== 28js — package 3: the Prioritizer as the Player's shape (579 c) ===== */
body.pm-one .pm-steprow { display: none !important; }                                   /* the tabs row and the numbered snapshot step: the way-in card carries them */
body.pm-one #pm-panel-phrases > .pm-step, body.pm-one #pm-browse-section { display: none !important; }   /* step 3's label, the search box and the three buttons */
body.pm-one #pm-chooser > .pm-chooser-h, body.pm-one #pm-chooser > .pm-chooser-ess, body.pm-one #pm-chooser > .pm-chooser-h2, body.pm-one #pm-chooser > #pm-chooser-sessions { display: none !important; }   /* the tiles do this */
body.pm-one #pm-chooser { padding: 0; border: 0; background: transparent; box-shadow: none; margin: 0; }
body.pm-one #pm-panel-phrases.pm-panel { display: block !important; }
body.pm-one #pm-panel-results.pm-panel { display: none !important; }
body.pm-one.pm-has-runs #pm-panel-results.pm-panel { display: block !important; margin-top: 14px; }
body.pm-one #rife-score-card.pm-panel { display: none !important; }
body.pm-one #rife-score-card.pm-panel.pm-rife-open { display: block !important; margin-top: 14px; }
body.pm-one #pm-results-empty { display: none !important; }
:where(.pg-prioritizer) .pm-wayin { margin: 0 0 6px; }
:where(.pg-prioritizer) .pm-wayin-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px 16px; flex-wrap: wrap; margin-bottom: 12px; }
:where(.pg-prioritizer) .pm-wayin-head .section-title { font-size: 18px; }
:where(.pg-prioritizer) .pm-wayin .nh-build-sub { color: #6c757d; font-size: 13.5px; }
:where(.pg-prioritizer) .pm-wayin .bys-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
:where(.pg-prioritizer) .pm-wayin .bys-tile { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; text-align: left; padding: 10px 12px; background: #1066c4; color: #fff; border: 1px solid #1066c4; border-radius: 12px; cursor: pointer; font: inherit; min-height: 60px; width: 100%; }
:where(.pg-prioritizer) .pm-wayin .bys-tile .bys-t { font-weight: 700; font-size: 15px; display: inline-flex; align-items: center; gap: 6px; }
:where(.pg-prioritizer) .pm-wayin .bys-tile .bys-s { font-size: 12.5px; opacity: .92; }
:where(.pg-prioritizer) .pm-wayin .bys-tile .bys-n { font-weight: 600; opacity: .9; }
:where(.pg-prioritizer) .pm-wayin .bys-tile:hover { background: #0d5bb0; border-color: #0d5bb0; }
:where(.pg-prioritizer) .pm-wayin .pm-tick { display: inline-block; width: 16px; height: 16px; border-radius: 4px; border: 1.5px solid #fff; background: transparent; flex: 0 0 auto; }
:where(.pg-prioritizer) .pm-wayin .pm-tile.is-on .pm-tick { background: #fff; }
:where(.pg-prioritizer) .pm-wayin .pm-tile.is-on .pm-tick::after { content: "\2713"; color: #0d5bb0; font-size: 12px; line-height: 14px; display: block; text-align: center; font-weight: 700; }
:where(.pg-prioritizer) .pm-wayin .bys-row4 { margin-top: 10px; }
:where(.pg-prioritizer) .pm-wayin .bys-row4 .bys-tile { display: inline-flex; flex-direction: row; align-items: center; gap: 8px; background: transparent; color: #1066c4; border: 0; padding: 4px 2px; min-height: 36px; width: auto; }
:where(.pg-prioritizer) .pm-wayin .bys-row4 .bys-tile:hover { background: transparent; text-decoration: underline; }
:where(.pg-prioritizer) .pm-wayin .bys-row4 .bys-tile .bys-t { font-size: 14px; }

:where(.pg-prioritizer) .pm-snaprow { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 12px 2px 0; }
:where(.pg-prioritizer) .pm-snaprow .gen-step-label { font-weight: 700; color: #1f2937; }
:where(.pg-prioritizer) .pm-snaprow #pm-snap-step { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }
:where(.pg-prioritizer) .pm-snaprow #pm-snap-first { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 8px 14px; }
:where(.pg-prioritizer) .pm-snaprow #pm-snap-first[hidden] { display: none; }
:where(.pg-prioritizer) .pm-runrow { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: 14px 2px 4px; padding-top: 14px; border-top: 1px solid #e9eef4; }
:where(.pg-prioritizer) .pm-runrow .pm-pool-slot { font-size: 14px; color: #1f2937; }
:where(.pg-prioritizer) .pm-runrow #pm-chooser-pool { margin: 0; }
:where(.pg-prioritizer) .pm-runrow-r { display: inline-flex; align-items: center; gap: 10px; }
:where(.pg-prioritizer) .pm-go { font-size: 16px; padding: 10px 18px; }
:where(.pg-prioritizer) .pm-go:disabled:not(.nh-needs-snap) { opacity: .45; }
:where(.pg-prioritizer) .pm-go.nh-needs-snap { flex-direction: column; align-items: flex-start; gap: 2px; }
:where(.pg-prioritizer) .pm-runrow .pm-card-note { color: #6c757d; font-size: 13px; }
@media (max-width: 760px) { :where(.pg-prioritizer) .pm-wayin .bys-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) { :where(.pg-prioritizer) .pm-wayin .bys-grid { grid-template-columns: minmax(0, 1fr); } }
/* the result: the window chrome quietened, the reasons behind Why this order, the slider in the card, the bar's slider gone */
body.pm-one #results-area .info-btn, body.pm-one #results-area .section-subtitle { display: none !important; }
body.pm-one #results-area .section-title { font-size: 18px; }
body.pm-one .run-card .row-why { display: none; }
body.pm-one.pm-why-open .run-card .row-why { display: block; }
body.pm-one .run-card.pm-proxied .results-toolbar { display: flex !important; }
body.pm-one #pm-rbar .pm-rbar-cut { display: none !important; }
:where(.pg-prioritizer) .pm-run-foot { margin: 10px 0 4px; font-size: 13.5px; color: #6c757d; }
:where(.pg-prioritizer) .pm-ys-in-win .pm-chooser-row { display: flex; }
/* ===== 28js — package 4: the nav (579 n; Dan 16:49–16:50) ===== */
/* Site Feedback in the row at every width — the bar above the nav is retired */
a.nh-feedback-bar { display: none !important; }
@media (max-width: 1259px) { .nh-nav-right a.nh-feedback { display: inline-flex; } }
/* desktop: the full items; the ⋯ hidden */
.xnav .nh-nav-more { display: none; position: relative; }
/* a phone: one row — logo + wordmark · Phrase Player · Guide · Plans · ⋯ (Setup · Site Feedback · Admin) */
@media (max-width: 680px) {
  .xnav .nh-nav-full { display: none !important; }
  .xnav .nh-nav-more { display: inline-flex; align-items: center; margin-left: auto; }
  .xnav .nh-nav-more-btn { width: 36px; height: 34px; border-radius: 10px; border: 1px solid #cfd8e3; background: #fff; color: #5a6472; font-size: 18px; line-height: 1; cursor: pointer; padding: 0; margin: 0 2px 0 0; }
  .xnav .nh-nav-more-btn:hover, .xnav .nh-nav-more-btn:focus-visible { border-color: #1066c4 !important; color: #1066c4 !important; background: #f1f6ff !important; }
  .xnav .nh-nav-menu { position: absolute; right: 0; top: 40px; z-index: 9600; background: #fff; border: 1px solid #dfe5ec; border-radius: 10px; box-shadow: 0 8px 24px rgba(16, 38, 70, .12); padding: 6px; display: flex; flex-direction: column; min-width: 170px; }
  .xnav .nh-nav-menu[hidden] { display: none; }
  .xnav .nh-nav-menu a, .xnav .nh-nav-menu span { display: block; padding: 10px 12px; min-height: 36px; border-radius: 8px; color: #1f2937; }
  .xnav .nh-nav-menu a:hover { background: #f1f6ff; }
  .xnav .nh-nav-right { display: contents; }
  .xnav .nh-brand span { display: inline; margin-left: 4px; }   /* the words stay, tight against the swirl (Dan: "no 4") */
}
/* the wordmark shows at every width, tight against the swirl (Dan 16:50: "butt the words naturalist home up against the logo") */
.xnav .nh-brand span { display: inline !important; }
.xnav .nh-brand { gap: 4px; padding-right: 8px; }
@media (max-width: 680px) { .xnav .nh-brand { font-size: 13px; padding: 4px 6px 4px 4px; margin-right: 0; } .xnav a, .xnav span.active { padding: 7px 9px; } }
/* a phone, one row (28js): with Setup, Site Feedback and Admin behind ⋯ the row fits — no sideways scroll, no fade, no chevron; the menu can hang below */
@media (max-width: 680px) {
  .xnav::after { display: none; }                                   /* the ⋯ is the row's end now */
  .xnav { -webkit-mask-image: none; mask-image: none; gap: 2px; padding: 3px; }
  .xnav a, .xnav span.active { padding: 11px 4px; font-size: 11.5px; }   /* 28jt: a 36px tap target (check 25) — taller padding, no wider */
  .xnav .nh-brand, .xnav .nh-brand span { font-size: 11px !important; letter-spacing: -.3px; }
  .xnav .nh-brand { padding: 4px 2px 4px 2px !important; gap: 2px !important; margin-right: 0 !important; }
  .xnav .nh-nav-more { padding-left: 2px; }
  .xnav .nh-brand img { width: 18px; height: 18px; }
  .xnav .nh-nav-more-btn { width: 36px; height: 36px; font-size: 16px; }
  .xnav .nh-brand img { width: 20px; height: 20px; }
  .xnav .nh-nav-more { position: sticky; right: 0; flex: 0 0 auto; background: #eef2f7; padding-left: 6px; z-index: 2; }   /* pinned at the right edge even when the row scrolls */
  .xnav .nh-nav-menu { position: fixed; right: 14px; top: 58px; }   /* hangs below the row, outside the row's own scroll box */
}
@media (max-width: 380px) { .xnav .nh-brand span { display: none !important; } }   /* the narrowest phones: the swirl alone */
/* the Community's practitioner line, low in the left column (579 j) — quiet, not a stripe */
.pg-community .cm-label--low:not(#_#_#_) { background: transparent; border: 0; color: #6c757d; padding: 6px 2px; margin: 8px 0 0; font-size: 12.5px; }
/* 28js: parts of the Generator retired from view keep their markup for the code that reads them — the hidden attribute wins over their u- display classes */
:where(.pg-generator) .gen-prechat > span[hidden], :where(.pg-generator) .gen-cards-label[hidden], :where(.pg-generator) #quick-build-panel > div[hidden], :where(.pg-generator) [data-uxr="upto"][hidden] { display: none !important; }
:where(.pg-prioritizer) .what-is-title[hidden] { display: none !important; }
/* ===== 28jt (Dan 18:34–19:02, the first look at 28js) ===== */
/* 1. the three Generator cards on one skeleton (A): title · a two-line description · the same middle height · one button on the same baseline */
:where(.pg-generator) #gen-cards .gen-card-text { min-height: 2.9em; flex: 0 0 auto; margin: 0 0 2px; }
:where(.pg-generator) #gen-cards .gen-card .gen-box-wrap { margin: 0 0 2px; }
:where(.pg-generator) #gen-cards .gen-card .gen-box-wrap textarea#quick-build-input, :where(.pg-generator) #gen-cards .gen-card .gen-box-wrap textarea#gen-ask-input { margin: 0 !important; }
:where(.pg-generator) #gen-cards .gen-card-steps { list-style: none; margin: 0 0 2px; padding: 4px 0 0; font-size: 13px; line-height: 1.5; color: #4a5560; min-height: 84px; box-sizing: border-box; flex: 1 0 auto; }
:where(.pg-generator) #gen-cards .gen-card-steps li { position: relative; padding-left: 24px; margin-bottom: 4px; }
:where(.pg-generator) #gen-cards .gen-card-steps li b { position: absolute; left: 0; top: .15em; width: 16px; height: 16px; border-radius: 50%; background: #e6f1fb; color: #0b3d7a; font-size: 10px; font-weight: 700; line-height: 16px; text-align: center; }
:where(.pg-generator) #gen-cards .gen-card-actions { margin-top: auto; }
:where(.pg-generator) #gen-cards .gen-card-actions > .nh-btn:not(.nh-needs-snap) { min-width: 170px; }
:where(.pg-generator) #gen-cards #gen-card-type-link[hidden] { display: none !important; }
/* 2–6. the Prioritizer: four tiles (Essentials · Search More Presets · Your Sessions · Rife Presets), the Rife panel without its search box, one Prioritize, Send to Player on the bar */
:where(.pg-prioritizer) .pm-wayin .bys-grid.pm-grid4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 900px) { :where(.pg-prioritizer) .pm-wayin .bys-grid.pm-grid4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) { :where(.pg-prioritizer) .pm-wayin .bys-grid.pm-grid4 { grid-template-columns: minmax(0, 1fr); } }

body.pm-one #rife-score-card #rife-search, body.pm-one #rife-score-card .pm-browse-info, body.pm-one #rife-score-card > .pm-step.pm-rife-head { display: none !important; }   /* the button opens the picker; the search lives there (Dan 18:55) */
body.pm-one #rife-score-card .pm-browse-row { margin-top: 0; }
body.pm-one #rife-preset-block .pm-bar-src { display: none !important; }   /* the presets' own Prioritize button — the card's is the one; step 4 (the frequencies) keeps its button */
:where(.pg-prioritizer) .pm-pool-sep { color: #adb5bd; }
/* 14. How It Plays as ONE card in the Summary card's look (Dan 19:01: "make the UI and look and feel similar") — the same border and radius
   as .pl-step--card, the same small-caps section labels (.nh-sum-h), the same 14px rows with thin dividers; the tiles' borders, shadows,
   dots and bold titles are gone. The rows keep their ids, heads, quick links and bodies. */
:where(.pg-player) .pl-how-card { background: #fff; border: 1px solid #d9dee5; border-radius: 12px; padding: 6px 16px 10px; }
:where(.pg-player) .pl-how-card .section.pl-step { background: transparent !important; border: 0 !important; border-top: 1px solid #edf2f8 !important; border-radius: 0 !important; box-shadow: none !important; margin: 0 !important; padding: 10px 0 8px !important; position: relative; }
:where(.pg-player) .pl-how-card .section.pl-step:first-child { border-top: 0 !important; }
:where(.pg-player) .pl-how-card .section.pl-step.pl-step--opt { border-top: 1px solid #edf2f8 !important; }
:where(.pg-player) .pl-how-card .pl-step-h, :where(.pg-player) .pl-how-card button.pl-step-h { display: flex; flex-wrap: wrap; align-items: center; gap: 0 10px; padding: 0 !important; border-radius: 0; min-width: 0; overflow: visible; }
:where(.pg-player) .pl-how-card .pl-step-dot { display: none; }
:where(.pg-player) .pl-how-card .pl-step-t { flex: 0 0 100%; font-size: 12px; font-weight: 700; color: #6c757d; text-transform: uppercase; letter-spacing: .04em; white-space: normal; margin: 0 0 6px; }
:where(.pg-player) .pl-how-card .pl-step-h.has-q .pl-step-st, :where(.pg-player) .pl-how-card .pl-step-st { flex: 1 1 auto; margin: 0; padding: 0 !important; font-size: 14px; color: #212529; white-space: normal; overflow: visible; min-height: 22px; line-height: 22px; }
:where(.pg-player) .pl-how-card .pl-step-st.is-opt { color: #6c757d; font-style: normal; }
:where(.pg-player) .pl-how-card .pl-step-st:empty::before { content: "\2014"; color: #adb5bd; }
:where(.pg-player) .pl-how-card .pl-step-chev { position: static; transform: none; margin-left: auto; align-self: center; color: #6c757d; }
:where(.pg-player) .pl-how-card .pl-step.is-open .pl-step-chev { transform: rotate(180deg); }
:where(.pg-player) .pl-how-card .pl-step-q { position: absolute; right: 26px; top: auto; bottom: 8px; height: 22px; font-size: 12.5px; }
:where(.pg-player) .pl-how-card .pl-step-h.has-q .pl-step-st { padding-right: calc(var(--pl-q-w, 0px) + 40px) !important; }
:where(.pg-player) .pl-how-card .pl-step-q a { min-height: 22px; }
:where(.pg-player) .pl-how-card .pl-step-q a:not(.pl-q-btn) { color: #1066c4; font-weight: 600; }
:where(.pg-player) .pl-how-card .pl-step-b { padding: 10px 0 2px; }
:where(.pg-player) .pl-how-card .pl-opt-sep { margin: 12px 0 0; padding: 10px 0 0; border-top: 1px solid #edf2f8; }
:where(.pg-player) .pl-how-card .pl-opt-sep::before, :where(.pg-player) .pl-how-card .pl-opt-sep::after { display: none; }
:where(.pg-player) .pl-how-card .pl-opt-sep > span { font-size: 12px; font-weight: 700; color: #6c757d; text-transform: uppercase; letter-spacing: .04em; padding: 0; background: transparent; }
:where(.pg-player) .pl-how-card .pl-opt-sep + .pl-step { border-top: 0 !important; padding-top: 6px !important; }
:where(.pg-player) .pl-how-card .pl-opt-sep + .pl-step .pl-step-t { margin-top: 0; }
:where(.pg-player) .pl-how-card .pl-step-h.nh-gated .pl-step-chev { margin-left: 6px; }
:where(.pg-player) .pl-how-card .pl-step[hidden] { display: none !important; }
:where(.pg-player) .pl-how-card:not(:has(.pl-step:not([hidden]))) { display: none; }
@media (max-width: 600px) {
  :where(.pg-player) .pl-how-card { padding: 4px 12px 8px; }
  :where(.pg-player) .pl-how-card .pl-step-h, :where(.pg-player) .pl-how-card button.pl-step-h { padding-right: 0 !important; }
  :where(.pg-player) .pl-how-card .pl-step-h .pl-step-st, :where(.pg-player) .pl-how-card .pl-step-h.has-q .pl-step-st { order: 0; flex: 1 1 auto; padding: 0 !important; }
  :where(.pg-player) .pl-how-card .pl-step-chev { position: static; transform: none; }
  :where(.pg-player) .pl-how-card .pl-step.is-open .pl-step-chev { transform: rotate(180deg); }
  :where(.pg-player) .pl-how-card .pl-step-q, :where(.pg-player) .pl-how-card .pl-step[data-step="5"] .pl-step-q, :where(.pg-player) .pl-how-card .pl-step[data-step="6"] .pl-step-q { position: static; height: auto; margin: 6px 0 0; padding: 0 !important; justify-content: flex-start; left: auto; right: auto; }
  :where(.pg-player) .pl-how-card .pl-step-q > :first-child { margin-left: 0; }
  :where(.pg-player) .pl-how-card .pl-step-h .pl-step-st, :where(.pg-player) .pl-how-card .pl-step-st { font-size: 14px; }
  :where(.pg-player) .pl-how-card .pl-step-q a:not(.pl-q-btn) { padding: 0; }
  :where(.pg-player) .pl-how-card .pl-step-q a.pl-q-btn { padding: 5px 12px !important; min-height: 32px; }   /* 28ju: the small outline buttons keep their padding on a phone (they read cramped) */
  :where(.pg-player) .pl-how-card .pl-step-st .pl-st-x { display: inline; }
}
/* 7. the two column cards start at the same line: the same gap under each column header */
:where(.pg-player) .pl-what-sep, :where(.pg-player) #pl-how-sep { margin: 0 0 10px; }
/* 12. a shared link's big Play (28jo) carried the old play-line's grey — white, while it still exists */
:where(.pg-player) .nh-sumtab-play.nh-btn { color: #fff; }
:where(.pg-player) #nh-savebar-btn { display: none !important; }   /* 10. Save or copy retired from the header (its window stays for the Copy buttons and the download link) */
:where(.pg-player) .nh-ses-note { font-size: 12.5px; color: #6c757d; margin-top: 4px; }
:where(.pg-player) .nh-ses-note .nh-link { font-weight: 600; }
:where(.pg-player) .nh-ses-note[hidden] { display: none; }
/* 17. (Dan 19:22: "on mobile … snapshot is an important step ahead of the three options … same on prioritizer") — on a phone the snapshot row comes first */
@media (max-width: 680px) {
  :where(.pg-generator) .gen-prechat.gen-cards-step > .u-fx-1:has(> #gen-cards) { display: flex; flex-direction: column; }
  :where(.pg-generator) .gen-prechat.gen-cards-step > .u-fx-1:has(> #gen-cards) > #gen-snaprow { order: -1; margin: 0 0 12px; }
  :where(.pg-prioritizer) .pm-wayin .bys-wrap { display: flex; flex-direction: column; }
  :where(.pg-prioritizer) .pm-wayin .bys-wrap > .pm-snaprow { order: -1; margin: 0 0 12px; padding-top: 0; }
}
/* ===== 28ju (Dan 20:22–20:27, the look at 28jt) ===== */
/* 4–5. the Summary tab's foot: Show the phrases as the site's small outline button (no underline); the two AI links one unit on one row, phone and web */
:where(.pg-player) .nh-sumtab-foot .nh-sumtab-show, :where(.pg-player) .nh-sumtab-foot .nh-sumtab-show:hover { text-decoration: none; }
:where(.pg-player) .nh-sumtab-pair { white-space: nowrap; display: inline-block; }
@media (max-width: 600px) {
  :where(.pg-player) .nh-sumtab-foot { flex-direction: column; align-items: flex-start; }
  :where(.pg-player) .nh-sumtab-next { font-size: 13px; display: flex; flex-direction: column; gap: 4px; }
  :where(.pg-player) .nh-sumtab-next-l { margin: 0; }
  :where(.pg-player) .nh-sumtab-pair { font-size: 13.5px; }
}
/* 3. the phone nav on one row: the page's own name short, the Admin preview menu inside ⋯ */
.xnav .nh-nav-short { display: none; }
@media (max-width: 680px) {
  .xnav .nh-nav-long { display: none; }
  .xnav span.active > .nh-nav-short { display: inline !important; font: inherit !important; padding: 0 !important; margin: 0 !important; min-width: 0 !important; min-height: 0 !important; width: auto !important; }
  .xnav span.active > .nh-nav-long, .xnav a > .nh-nav-long { display: none !important; }
  .xnav a > .nh-nav-short { display: inline !important; font: inherit !important; padding: 0 !important; margin: 0 !important; min-width: 0 !important; min-height: 0 !important; }
  .xnav .nh-nav-menu .nh-level-pick { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: 8px 12px; margin: 4px 0 0; border-top: 1px solid #e9eef4; }
  .xnav .nh-nav-menu .nh-level-pick .nh-level-l { font-size: 11px; color: #6c757d; }
}
/* 6. the Generator's slim line on a phone: "Questions · Snapshot ✓ · New · Phrases ▾" on one row */
:where(.pg-generator) .gen-slim-short { display: none; }
@media (max-width: 680px) {
  /* 28ka (661): the slim line keeps its full words on a phone too (it wraps since 653) — was "Questions", "New", "Snapshot" */
  :where(.pg-generator) .gen-chat-slim { flex-wrap: nowrap; white-space: nowrap; gap: 6px; }
  :where(.pg-generator) .gen-chat-slim .gen-slim-btn { white-space: nowrap; }
}
@media (max-width: 680px) {   /* 28ju: the last 24px on the Generator and Prioritizer rows (one more item than the Player's) */
  .xnav a, .xnav span.active { padding-left: 3px !important; padding-right: 3px !important; }
  .xnav .nh-brand, .xnav .nh-brand span { font-size: 10.5px !important; letter-spacing: -.45px; }
  .xnav .nh-nav-more { padding-left: 2px !important; }
  .xnav { padding: 3px 1px !important; gap: 1px !important; }
  .xnav .nh-brand img { width: 18px !important; height: 18px !important; }
}
/* the shared-link window (Dan 20:40): the sender's note and what it is for lead; the directions, not the phrases */
.nh-lw-note { margin: 0 0 14px; padding: 12px 14px; background: #f4f8fd; border-left: 3px solid #1066c4; border-radius: 0 8px 8px 0; font-size: 15px; line-height: 1.5; color: #1a3b63; }
.nh-lw-note cite { display: block; margin-top: 6px; font-style: normal; font-size: 13px; color: #6c757d; }
.nh-lw-h { font-size: 11.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: #6c757d; margin: 12px 0 6px; }
.nh-lw-ask { margin: 0; font-size: 14px; line-height: 1.5; color: #212529; }
.nh-lw-dirs { list-style: none; margin: 0; padding: 0; }
.nh-lw-dirs li { display: flex; justify-content: space-between; gap: 12px; padding: 5px 0; border-top: 1px solid #edf2f8; font-size: 14px; color: #212529; }
.nh-lw-dirs li:first-child { border-top: 0; }
.nh-lw-n, .nh-lw-dim { color: #6c757d; font-size: 13px; white-space: nowrap; }
.nh-lw-dim { margin: 0; }
.nh-lw-how { margin: 12px 0 12px; font-size: 13px; color: #6c757d; line-height: 1.5; }
.nh-lw-tip { margin: 0; font-size: 13px; }
:where(.pg-player) .nh-sumtab-note { font-style: normal; }
:where(.pg-player) .cs-note-l { display: block; margin: 12px 0 0; font-size: 13px; font-weight: 600; color: #212529; }
:where(.pg-player) .cs-note-l textarea { display: block; width: 100%; box-sizing: border-box; margin-top: 6px; padding: 8px 10px; border: 1px solid #c9d6e6; border-radius: 8px; font: inherit; font-weight: 400; font-size: 14px; resize: vertical; }

/* ===== the session card's type scale (Dan 20:39: "many font types and sizes on this page — review and improve based on information hierarchy").
   Before: 26 text styles on the card at 390 (four link sizes in two blues, four greys, body text at 11.5 / 14 / 15 / 16, two
   upper-case label tiers a hair apart). After: SIX roles, one size each, the same on the phone and the desktop —
     1 Title        the session's name                    20px / 700 / ink        (18px on a phone)
     2 Column       WHAT PLAYS · HOW IT PLAYS             12px / 700 / ink, upper-case, the rule beside it
     3 Section      YOU ASKED · DIRECTIONS · WAVEFORMS …  11.5px / 700 / grey, upper-case
     4 Body         rows, statuses, the ask               14px / 400 / ink (muted rows grey)
     5 Meta         counts, the line under the name       13px / 400 / grey
     6 Action       every link and small button           13px / 600 / one blue
   Tabs stay a control (13.5px / 600). ===== */
#nh-session { --t-ink: #1f2937; --t-body: #212529; --t-grey: #6c757d; --t-blue: #1066c4; }
#nh-session .nh-ses-name { color: var(--t-ink); }
#nh-session .nh-ses-label { font-size: 13px !important; font-weight: 600 !important; color: var(--t-grey) !important; }
#nh-session .nh-ses-meta, #nh-session .nh-ses-note { font-size: 13px !important; color: var(--t-grey) !important; }
#nh-session .nh-ses-rename, #nh-session .nh-ses-more, #nh-session .nh-ses-note .nh-link { font-size: 13px !important; font-weight: 600 !important; color: var(--t-blue) !important; }
#nh-session #nh-ses-keep .nh-btn, #nh-session #nh-ses-keep .nh-btn .nh-keep-l { font-size: 13px !important; font-weight: 600 !important; }
#nh-session .pl-what-sep > span, #nh-session #pl-how-sep > span { font-size: 12px !important; font-weight: 700 !important; color: var(--t-ink) !important; letter-spacing: .06em !important; }
#nh-session .nh-sum-h, #nh-session .pl-how-card .pl-step-t { font-size: 11.5px !important; font-weight: 700 !important; color: var(--t-grey) !important; letter-spacing: .05em !important; }
#nh-session .nh-sumtab-ask { font-size: 14px !important; }
#nh-session .nh-sumtab-list > li, #nh-session .nh-sumtab-list > li > span:first-child { font-size: 14px !important; color: var(--t-body); }
#nh-session .nh-sumtab-nt > li, #nh-session .nh-sumtab-nt > li > span, #nh-session .nh-sumtab-dim { color: var(--t-grey) !important; }
#nh-session .nh-sumtab-n, #nh-session .nh-sumtab-next-l { font-size: 13px !important; color: var(--t-grey) !important; }
#nh-session .pl-how-card .pl-step-st, #nh-session .pl-how-card .pl-step-st span { font-size: 14px !important; color: var(--t-body) !important; font-weight: 400 !important; }
#nh-session .pl-how-card .pl-step-st.is-opt, #nh-session .pl-how-card .pl-step-st .pl-st-x { color: var(--t-grey) !important; }
#nh-session .pl-how-card .pl-step-st .pl-st-x { font-size: 13px !important; }
#nh-session .nh-link, #nh-session .pl-step-q a, #nh-session .nh-sumtab-pair a, #nh-session .nh-sumtab-links a, #nh-session .pl-step-what, #nh-session #pl-clear { font-size: 13px !important; font-weight: 600 !important; color: var(--t-blue) !important; }
#nh-session .nh-btn.nh-btn--sm, #nh-session .pl-q-btn, #nh-session .nh-sumtab-show { font-size: 13px !important; font-weight: 600 !important; }
#nh-session .pl-tab { color: var(--t-grey); }
#nh-session .pl-tab.is-on { color: var(--t-blue); }
#nh-session .pl-how-card .pl-opt-sep > span { font-size: 13px !important; font-weight: 400 !important; text-transform: none !important; letter-spacing: 0 !important; color: var(--t-grey) !important; }   /* a group note, not a section: "Optional — the AI can help" */
#nh-session .pl-how-card .pl-step--opt .pl-step-t { text-transform: uppercase; }
@media (max-width: 600px) { #nh-session .nh-ses-name { font-size: 18px !important; } }
/* 28jv: the contact pop-up's "I am" choice for a preview request */
.nh-fb-who { display: flex; gap: 8px 18px; flex-wrap: wrap; margin: 4px 0 10px; font-size: 14px; }
.nh-fb-who label { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
#nh-fb-who-w[hidden] { display: none; }

/* ===== 28jv (592, Session 73): the landing page — start.html (Naturalist Home's front door; the .st- classes are its own) ===== */
.pg-start body { background: #f7f9fc; }
.st-page { --ink: #1f2937; --body: #343a40; --grey: #6c757d; --blue: #1066c4; --line: #e3e9f1; --tint: #f1f6fd; max-width: 1080px; margin: 0 auto; padding: 0 0 40px; color: var(--body); }
.st-page h1, .st-page h2, .st-page h3 { color: var(--ink); margin: 0; }
/* hero */
.st-hero { text-align: center; padding: 56px 20px 40px; background: radial-gradient(120% 90% at 50% 0%, #e6f0fc 0%, #f7f9fc 70%); border-radius: 0 0 28px 28px; }

.st-h1 { font-size: 40px; line-height: 1.12; font-weight: 800; letter-spacing: -.02em; max-width: 720px; margin: 0 auto !important; }
.st-uvp { font-size: 18px; line-height: 1.5; color: var(--grey); max-width: 620px; margin: 14px auto 26px; }
.st-cta { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.st-cta .nh-btn { min-height: 46px; padding: 0 22px; font-size: 15px; }
.st-aud { display: inline-flex; margin-top: 34px; padding: 4px; border-radius: 999px; background: #fff; border: 1px solid var(--line); box-shadow: 0 1px 2px rgba(16,40,80,.06); }
.st-aud-b { border: 0; background: transparent; padding: 9px 20px; border-radius: 999px; font: inherit; font-size: 14px; font-weight: 600; color: var(--grey); cursor: pointer; min-height: 40px; }
.st-aud-b.is-on { background: var(--blue); color: #fff; }
/* sections */
.st-sec { padding: 52px 20px 0; }
.st-sec-h { text-align: center; max-width: 640px; margin: 0 auto 26px; }
.st-h2 { font-size: 28px; line-height: 1.2; font-weight: 800; letter-spacing: -.01em; }
.st-sub { font-size: 16px; line-height: 1.55; color: var(--grey); margin: 10px 0 0; }
.st-kicker { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--blue); margin-bottom: 10px; }
.st-page[data-aud="me"] [data-for="clients"], .st-page[data-aud="clients"] [data-for="me"] { display: none !important; }
/* moment cards */
.st-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.st-card { background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 18px 18px 16px; display: flex; flex-direction: column; gap: 8px; box-shadow: 0 1px 2px rgba(16,40,80,.04); }
.st-card-k { font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--blue); }
.st-card-t { font-size: 18px; font-weight: 700; line-height: 1.25; }
.st-card-q { margin: 0; font-size: 14.5px; line-height: 1.5; color: var(--body); flex: 1 0 auto; }
.st-card-tags { display: flex; gap: 6px; flex-wrap: wrap; }
.st-card-tags span { font-size: 12px; color: var(--grey); background: var(--tint); border-radius: 999px; padding: 3px 9px; }
.st-card-f { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 6px; padding-top: 12px; border-top: 1px solid #eef2f7; }

.st-more { text-align: center; margin-top: 18px; font-size: 14px; }
/* the deep example */

.st-path { list-style: none; margin: 0; padding: 22px; background: #fff; border: 1px solid var(--line); border-radius: 18px; position: relative; }
.st-path li { position: relative; padding: 10px 12px 10px 34px; font-size: 15px; color: var(--ink); }
.st-path li::before { content: ""; position: absolute; left: 10px; top: 16px; width: 10px; height: 10px; border-radius: 50%; background: var(--blue); }
.st-path li:not(:last-child)::after { content: ""; position: absolute; left: 14px; top: 28px; bottom: -14px; width: 2px; background: #cfe0f5; }
.st-path li b { float: right; font-weight: 600; font-size: 13px; color: var(--grey); }
.st-path li b::after { content: " phrases"; font-weight: 400; }
.st-path-k { display: block; font-size: 11.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--grey); margin-bottom: 2px; }
.st-path-ask { background: var(--tint); border-radius: 10px; font-style: italic; color: #1a3b63 !important; }
.st-path-end { background: #eef7f0; border-radius: 10px; }
.st-path-end::before { background: #2f9e5b !important; }
/* how it works */

.st-step-ic { width: 52px; height: 52px; border-radius: 14px; background: var(--tint); color: var(--blue); display: flex; align-items: center; justify-content: center; margin-bottom: 4px; }
/* practitioners */
.st-prac { text-align: center; }
.st-page[data-aud="clients"] .st-prac { order: -1; }
.st-feats { list-style: none; margin: 0 0 22px; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; text-align: left; }
.st-feats li { background: #fff; border: 1px solid var(--line); border-left: 4px solid var(--blue); border-radius: 12px; padding: 16px 18px; display: flex; flex-direction: column; gap: 6px; }
.st-feats b { font-size: 16px; color: var(--ink); }
.st-feats span { font-size: 14px; line-height: 1.5; color: var(--grey); }
/* ways in */
.st-ways { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.st-way { display: flex; flex-direction: column; gap: 4px; padding: 16px; border-radius: 14px; background: var(--blue); color: #fff !important; text-decoration: none !important; min-height: 88px; }
.st-way b { font-size: 15.5px; }
.st-way span { font-size: 13px; opacity: .92; }
.st-way:hover { background: #0d5bb0; }
/* plans + FAQ */
.st-end { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px; align-items: start; }
.st-plans { background: linear-gradient(160deg, #1066c4, #0b4f99); color: #fff; border-radius: 20px; padding: 30px 28px; }
.st-plans .st-h2 { color: #fff; }
.st-plans .st-sub { color: rgba(255,255,255,.88); margin-bottom: 20px; }
.st-plans .st-cta { justify-content: flex-start; }
.st-plans .nh-btn--primary { background: #fff; color: #0b4f99; border-color: #fff; }
.st-plans .nh-btn--outline { background: transparent; color: #fff; border-color: rgba(255,255,255,.7); }

.st-page { display: flex; flex-direction: column; }
/* phone */
@media (max-width: 760px) {
  .st-hero { padding: 36px 16px 30px; }
  .st-h1 { font-size: 30px; }
  .st-uvp { font-size: 16px; }
  .st-sec { padding: 40px 16px 0; }
  .st-h2 { font-size: 23px; }
  .st-grid, .st-steps, .st-feats, .st-deep, .st-end { grid-template-columns: minmax(0, 1fr); }
  .st-ways { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .st-cta .nh-btn { flex: 1 1 auto; }
  
  .st-grid .st-card:nth-child(n+5) { display: none; }
  .st-grid.is-all .st-card { display: flex; }
}
.st-page a.nh-btn, .st-page a.nh-btn:hover, .st-page .st-way, .st-page .st-more a { text-decoration: none !important; }
.st-page, .st-page button { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; }
.st-page .nh-btn { display: inline-flex; align-items: center; justify-content: center; }
.st-page .st-h1 { text-align: center !important; }
.st-hero { order: -2; }
.st-showmore-w { display: none; text-align: center; margin-top: 14px; }
@media (max-width: 760px) { .st-showmore-w { display: block; } .st-showmore-w .nh-btn[hidden] { display: none; } }
/* mock 2 (Dan 21:14): the UVP is the hero — copy on the left, the AI's path on the right */
.st-hero--split { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 40px; align-items: center; text-align: left; padding: 52px 32px 44px; }
.st-hero--split .st-h1 { text-align: left !important; margin: 0 !important; font-size: 42px; }
.st-hero--split .st-uvp { margin: 14px 0 24px; max-width: none; }
.st-hero--split .st-cta { justify-content: flex-start; }
.st-hero--split .st-aud { margin-top: 26px; }
.st-kicker { display: flex; align-items: center; gap: 8px; }
.st-kicker-mark { width: 22px; height: 22px; }
.st-hero .st-path { box-shadow: 0 8px 30px rgba(16, 60, 120, .10); }
@media (max-width: 760px) {
  .st-hero--split { grid-template-columns: minmax(0, 1fr); gap: 26px; padding: 30px 16px 28px; }
  .st-hero--split .st-h1 { font-size: 31px; }
  .st-kicker { font-size: 11px; }
}
@media (max-width: 760px) {
  .st-kicker-x { display: none; }
  .st-path li b { float: none; display: block; margin-top: 2px; text-align: left; }
}
/* mock 3 (Dan 21:26) */
.st-why { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.st-why li { background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 20px 18px; display: flex; flex-direction: column; gap: 8px; }
.st-why b { font-size: 16px; color: var(--ink); line-height: 1.3; }
.st-why span:not(.st-step-ic) { font-size: 14px; line-height: 1.5; color: var(--grey); }
.st-why .st-step-ic { width: 48px; height: 48px; }
.st-own { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 36px; align-items: center; }
.st-own-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.st-own-list li { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 16px; display: flex; flex-direction: column; gap: 6px; }
.st-own-list b { font-size: 15.5px; color: var(--ink); }
.st-own-list span { font-size: 13.5px; line-height: 1.5; color: var(--grey); }
.st-card-f { justify-content: flex-start; }
.st-end { grid-template-columns: minmax(0, 1fr); }
.st-plans { text-align: center; max-width: 760px; margin: 0 auto; }
.st-plans .st-cta { justify-content: center; }
@media (max-width: 900px) { .st-why { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) { .st-why, .st-own, .st-own-list { grid-template-columns: minmax(0, 1fr); } .st-own { gap: 18px; } }

/* Dan 21:34: no Site Feedback on this page (the row's link and the ⋯ menu's) */
.pg-start .xnav a.nh-feedback, .pg-start .xnav .nh-nav-menu a[href^="contact.html?topic=feedback"] { display: none !important; }

/* Dan 21:36: the code and the way to the Player, top right above the hero */
.st-topbar { order: -3; display: flex; justify-content: flex-end; align-items: center; flex-wrap: wrap; gap: 6px 22px; padding: 12px 20px 10px; font-size: 14px; color: var(--grey); }
.st-topbar > span { display: inline-flex; align-items: center; gap: 8px; }
.st-topbar .nh-link { font-weight: 600; }
@media (max-width: 760px) { .st-topbar { justify-content: flex-end; padding: 10px 16px 8px; font-size: 13px; gap: 6px 14px; } .st-topbar > span:first-child { order: 2; } }
/* Dan 21:37: a thin stripe above the hero instead */
.st-topbar { order: -3; display: flex; justify-content: space-between; align-items: center; gap: 6px 16px; flex-wrap: wrap; margin: 4px 0 10px; padding: 8px 16px; background: #eaf2fc; border: 1px solid #d6e4f6; border-radius: 10px; font-size: 13.5px; color: #3d5a80; }
.st-topbar > span { display: inline-flex; align-items: center; gap: 10px; }
.st-topbar .nh-link { font-weight: 700; color: #1066c4; }
.st-topbar-sep { color: #b9cbe3; }
.st-topbar-l { font-weight: 600; }
@media (max-width: 760px) { .st-topbar { padding: 8px 12px; font-size: 13px; justify-content: center; } .st-topbar-l { display: none !important; } .st-topbar > span:first-child { order: 0; } }
/* Dan 21:38: Request preview access on the stripe — the site's contact pop-up, its new "Request preview access" topic */
.st-req { min-height: 30px; padding: 0 14px; font-size: 13px; }
@media (max-width: 760px) {
  .st-topbar { flex-direction: column; gap: 8px; }
  .st-topbar-l { display: inline-flex !important; }
  .st-topbar-w { display: none; }
}
/* mock 4 (Dan 21:47: "agree on all the above") */
.st-trust { margin: 12px 0 0; font-size: 13px; color: var(--grey); }
.st-hero-r { display: flex; flex-direction: column; gap: 12px; align-items: stretch; }
.st-clip { display: inline-flex; align-items: center; gap: 10px; align-self: flex-start; border: 1px solid var(--line); background: #fff; color: var(--ink); border-radius: 999px; padding: 6px 16px 6px 6px; font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; min-height: 40px; box-shadow: 0 1px 2px rgba(16,40,80,.06); }
.st-clip-ic { width: 30px; height: 30px; border-radius: 50%; background: var(--blue); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; }
.st-clip-t { color: var(--grey); font-weight: 400; font-size: 13px; }
.st-clip--inline { margin: 14px auto 0; align-self: center; }
.st-sec-h .st-clip--inline { display: inline-flex; }

.st-band-cta { display: flex; align-items: center; justify-content: center; gap: 14px; flex-wrap: wrap; margin-top: 22px; }
.st-band-or { font-size: 13.5px; color: var(--grey); }
.st-own-cta { grid-column: 1 / -1; }
.st-dock { position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; display: flex; gap: 10px; padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0px)); background: rgba(255,255,255,.96); border-top: 1px solid var(--line); box-shadow: 0 -4px 16px rgba(16,40,80,.08); }
.st-dock[hidden] { display: none; }
.st-dock .nh-btn { flex: 1 1 auto; min-height: 44px; text-decoration: none; }
.st-dock .nh-btn--outline { flex: 0 0 auto; }
@media (min-width: 761px) { .st-dock { display: none !important; } }
@media (max-width: 760px) { .st-page { padding-bottom: 84px; } .st-clip { align-self: center; } }
/* Dan 21:56: two more practitioner notes — the grid takes five */
.st-feats { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }

.st-clip[hidden] { display: none !important; }

/* ===== 28jw — 598 no code = the Visitor, in the preview's words ===== */
/* the nav's ask for a visitor with no code, beside the plain Plans tab (desktop only — nh-nav-full) */
.xnav a.nh-nav-access { background:#1066c4; color:#fff; border-radius:999px; padding-left:16px; padding-right:16px; }
.xnav a.nh-nav-access:hover, .xnav a.nh-nav-access:focus-visible { background:#0c55a5; color:#fff; }
/* the code card at the top carries the ask; the page's gate line would repeat it (Dan 22:57: keep one) */
body:has(#nh-codecard) .nh-gate-note--page { display:none; }
@media (max-width: 680px) {
  /* 28ha (Dan: every step a pill on a phone, wrapped): 28fm's nowrap ran a strip with a CTA pill off a 390 phone */
  :where(.pg-player) .nh-intro-steps--links { flex-wrap: wrap; }
  /* …and 28fm's other half: row 1 is the next step and the ask (the membership action); the other steps wrap below them */
  :where(.pg-player) .nh-intro-steps--links:has(.is-cta) .nh-intro-step:not(.is-next):not(.is-cta) { order: 2; }   /* 28jy (Dan 10:05): only when the ask is there */
}
/* 28jw (Dan 23:05: "these sections are not aligned horizontally and are not the same height… the initial presentation aligned for both
   columns horizontally and vertically"): What Plays and How It Plays start on one line and end on one line. The How It Plays card was
   6 px higher (its column's gap was 8 px, the left one's 14) and kept its content height (7470's flex: 0 0 auto); it now fills the column. */
:where(.pg-player) .build-grid.has-steps > .build-col:last-child > .pl-col-card--plain { flex: 1 1 auto; gap: 14px; }
:where(.pg-player) .build-grid.has-steps > .build-col:last-child > .pl-col-card--plain > .pl-how-card { flex: 1 1 auto; }
/* the What Plays side: the bordered card fills its column; the empty .option-section under it (its old search row moved to the
   Build Your Session bar) added 30 px of margin, so the card ended above How It Plays */
:where(.pg-player) #preset-phrases-card > .pl-step--card { flex: 1 1 auto; }
:where(.pg-player) #preset-phrases-card > .option-section:not(:has(> * > *)) { display: none; }
/* 28jw: ↑ Back to top, centered at the foot of the session card */
:where(.pg-player) .nh-backtop { text-align: center; margin: 14px 0 2px; font-size: 13.5px; font-weight: 600; }
:where(.pg-player) .nh-backtop[hidden] { display: none; }
:where(.pg-player) .nh-backtop a { display: inline-block; padding: 8px 12px; }
@media (max-width: 340px) {
  /* 28jw: the narrowest phones — the next step and "Request preview" were 2 px too wide for one row */
  :where(.pg-player) .nh-intro-steps--links { column-gap: 6px; }
  :where(.pg-player) .nh-intro-steps--links .nh-intro-step.is-cta { padding-left: 10px; padding-right: 10px; }
}
@media (max-width: 680px) {
  /* 28jw (603): row 1 is always the next step and the ask — a row break after them (order 1), the other pills below (order 2);
     the next step may shrink and wrap its own words so a long one ("Enter your member code") never pushes the ask down */
  :where(.pg-player) .nh-intro-steps--links:has(.is-cta)::after { content: ""; order: 1; flex: 0 0 100%; height: 0; }   /* 28jy (Dan 10:05: "Pills … can be on same line and wrap vs one on each line"): the row break only with the ask; without it the pills share a line and wrap */
  :where(.pg-player) .nh-intro-steps--links .nh-intro-step.is-next { flex: 1 1 0; min-width: 0; max-width: max-content; white-space: normal; text-align: left; }
}
.xnav a.nh-nav-access.is-off { display: none !important; }   /* 28jw: shown only without a code (nhNavPlansPaint) */

/* 28jy (Dan, Session 75): the short not-a-diagnosis line under AI output (NH_NOT_DX, site-common.js) */
.nh-notdx { margin: 10px 0 0; font-size: 12.5px; line-height: 1.45; color: #5b6773; }
.nh-notdx--page { margin: 14px 2px 0; text-align: center; }
.nh-sum .nh-notdx { margin-top: 12px; padding-top: 10px; border-top: 1px solid #e6ebf1; }
.nh-lw-notdx { margin-top: 10px; text-align: center; }

/* 28jy (593): the clips — the Guide's overview and clip grid, the section links, the clip window */
.g-tours--one { grid-template-columns: minmax(0, 720px) !important; justify-content: center; }
.g-tours--one .g-tour-one:last-child { grid-column: auto; margin-top: 0; }
.g-clips-h { margin: 18px 0 8px; font-size: 15px; }
.g-clips { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 760px) { .g-clips { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.g-clip { text-decoration: none; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: 0 0 8px; border: 1px solid #d0d7de; border-radius: 10px; background: #fff; cursor: pointer; overflow: hidden; text-align: left; font: inherit; }
.g-clip img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block; border-bottom: 1px solid #e6ebf1; }
.g-clip-t { padding: 0 10px; font-size: 13.5px; font-weight: 700; color: #1066c4; }
.g-clip-len { font-size: 12px; font-weight: 400; color: #6c757d; }
.g-clip > .g-clip-len { padding: 0 10px; }
.g-clip:hover { border-color: #1066c4; }
.g-clip-row { margin: 10px 0 4px; display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 14px; }
.nh-clip-vid { width: 100%; display: block; border-radius: 10px; background: #000; aspect-ratio: 16 / 9; }

/* 28jy (619): the phone nav's ⋯ menu, pinned to the screen under its button (top / right set when it opens) */
.xnav .nh-nav-menu.is-pinned { position: fixed; left: auto; }
/* 28ka: open, the ⋯ menu lives on the page itself (iPhone Safari clipped it inside the nav's scrolling row) — the nav's menu look, unscoped */
.nh-nav-menu.nh-nav-menu--body { position: fixed; left: auto; z-index: 9600; background: #fff; border: 1px solid #dfe5ec; border-radius: 10px; box-shadow: 0 8px 24px rgba(16, 38, 70, .12); padding: 6px; display: flex; flex-direction: column; min-width: 170px; font-size: 14px; }
.nh-nav-menu.nh-nav-menu--body[hidden] { display: none; }
.nh-nav-menu.nh-nav-menu--body a, .nh-nav-menu.nh-nav-menu--body > span { display: block; padding: 10px 12px; min-height: 36px; border-radius: 8px; color: #1f2937; text-decoration: none; font-weight: 500; }
.nh-nav-menu.nh-nav-menu--body > span.active { color: #1066c4; font-weight: 600; }
@media (hover: hover) { .nh-nav-menu.nh-nav-menu--body a:hover { background: #f1f6ff; } }

/* ===== 28ka (Session 76) ===== */
/* 653 (the newcomer review): three phone screens ran wider than the screen — the Summary tab's "Optional, with the AI:" row, the
   Generator's slim line (the quick set's and the chat's) and the snapshot row; they wrap on a phone now */
@media (max-width: 680px) {
  :where(.pg-player) .nh-sumtab-next { flex-wrap: wrap; row-gap: 4px; }
  :where(.pg-player) .nh-sumtab-next > * { min-width: 0; }
  :where(.pg-generator) #gen-chat-slim { flex-wrap: wrap; row-gap: 0; }
  :where(.pg-generator) #gen-snaprow { flex-wrap: wrap; row-gap: 6px; }
  :where(.pg-generator) .gen-steprow > .gen-cards-step { min-width: 0; max-width: 100%; }   /* a flex item no wider than its row */
  :where(.pg-generator) #gen-quick-slim { flex-wrap: wrap; white-space: normal; row-gap: 0; }
  :where(.pg-generator) #gen-quick-slim .gen-slim-ask { white-space: normal; }
  :where(.pg-player) .nh-sumtab-foot > .nh-sumtab-next { min-width: 0; max-width: 100%; flex: 1 1 100%; }
  :where(.pg-player) .nh-sumtab-next a, :where(.pg-player) .nh-sumtab-next .nh-gate-note, :where(.pg-player) .nh-sumtab-next .nh-sumtab-pair { white-space: normal; }
  :where(.pg-player) .nh-sumtab-next .nh-gated { flex-wrap: wrap; }
  :where(.pg-player) .floating-controls-row { min-width: 0; max-width: 100%; }
  :where(.pg-player) .floating-controls-row > button { min-width: 0; }
}
/* 675: on a touch screen the snapshot pill's ↻ and × were 18 × 18 px — a 28 px circle with a 38 px reach */
@media (pointer: coarse) {
  .snap-pill-x { width: 28px; height: 28px; font-size: 14px; position: relative; }
  .snap-pill-x::after { content: ""; position: absolute; inset: -5px; border-radius: 50%; }
}
/* 659: a notice can carry one action — Undo after Clear (the notice's own white-on-blue, underlined like a link) */
.sn-act { background: none; border: 0; color: #fff; font: inherit; font-weight: 700; text-decoration: underline; cursor: pointer; padding: 0 4px; min-height: 24px; }
/* 669: Send a link in one window — what it shares, in one muted line at the top */
:where(.pg-player) .cs-share-what { margin: 2px 0 4px; font-size: 13px; line-height: 1.45; color: #6c757d; }
/* 670: with no code the card's locked actions are one line ("🔒 More with a preview code"), not six locked buttons; Download hides with them */
:where(.pg-player) #nh-ses-acts.is-visitor .nh-gated, :where(.pg-player) #nh-ses-acts.is-visitor .nh-ses-more { display: none !important; }
:where(.pg-player) #nh-session-head:has(#nh-ses-acts.is-visitor) .nh-ses-dl { display: none; }
:where(.pg-player) .nh-ses-locked { font-size: 14px; }
/* 655: with no code the Generator's three cards read as locked — dimmed, one line above them (a tap still opens the access window) */
:where(.pg-generator) .gen-cards.is-locked { opacity: .6; }
:where(.pg-generator) .gen-cards-locked { margin: 0 0 10px; font-size: 14px; color: #495057; }
/* 664: an empty snapshot row says so */
.snap-none { color: #6c757d; font-size: 14px; margin-right: 4px; align-self: center; }
.nh-clip-tip { margin: 8px 0 0; font-size: 13px; color: #6c757d; }
/* 647: the session card's header in What Plays' look — "SESSION" over the title, the facts on one line, Rename with Download */
:where(.pg-player) .nh-ses-head > .nh-ses-sep { flex: 1 1 100%; margin: 0 0 2px; }
:where(.pg-player) .nh-ses-rename[hidden] + .nh-ses-dl > .nh-ses-dot { display: none; }
/* 648 (Dan: "below the fold … very flat looking … stronger borders"): the site's card look on What plays' tab box and How it plays —
   a firmer border and the .card shadow; the Summary tab's sections divided the way How it plays' rows are */
.pg-player .section.pl-step.pl-step--card, .pg-player .section.pl-step.pl-step--card.is-open, :where(.pg-player) .pl-how-card { border-color: #cfd6df; box-shadow: 0 1px 3px rgba(16, 24, 40, .06); }
:where(.pg-player) .nh-sumtab > .nh-sum-h { border-top: 1px solid #edf2f8; padding-top: 12px; margin-top: 12px; }
:where(.pg-player) .nh-sumtab > .nh-sum-h:first-child { border-top: 0; padding-top: 0; margin-top: 4px; }
/* ===== 28kb (Session 76, Dan's look at 28ka live — 685) ===== */
/* (g) the session card's title in Build your session's style (.section-title: 17px bold #212529); the SESSION line is gone */
#nh-session .nh-ses-name { font-size: 17px !important; font-weight: 700 !important; color: #212529 !important; }
/* (a) one control on the card: the site's small outline button (.nh-btn--outline) — the header's actions, the tab row's Clear, the
   rows' quick actions, the Summary tab's three; links stay only for help (What is this?) */
#nh-session .nh-keep-btn, #nh-session .nh-btn--outline, #nh-session .pl-step-q a.pl-q-btn, #nh-session .pl-sg-all {
  background: #fff !important; color: #1066c4 !important; border: 1px solid #1066c4 !important; border-radius: 999px !important; box-shadow: none !important;
  font-size: 13px !important; font-weight: 600 !important; line-height: 1.2; min-height: 30px; padding: 4px 12px !important; text-decoration: none !important;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; flex: 0 0 auto; }
#nh-session .nh-keep-btn:hover, #nh-session .nh-btn--outline:hover:not(:disabled), #nh-session .pl-step-q a.pl-q-btn:hover { background: #eef5ff !important; border-color: #0d5bb0 !important; }
#nh-session .nh-keep-btn[hidden], #nh-session .nh-btn--outline[hidden] { display: none !important; }
#nh-session .pl-step-q { gap: 8px; }
#nh-session .pl-step-q .pl-q-sep { display: none; }
/* the header: Send a link · Copy phrases · Share with Community · More ▾ (Copy Rife list, History, Rename, Download behind it), every width */
:where(.pg-player) #nh-ses-acts .nh-ses-more { display: inline-flex; order: 10; }
:where(.pg-player) #nh-ses-acts .nh-ses-extra { order: 5; }
:where(.pg-player) #nh-ses-acts:not(.is-more) .nh-ses-extra { display: none !important; }
/* (c) the Summary tab's foot: three buttons in a row, no "Optional, with the AI:" */
:where(.pg-player) .nh-sumtab-foot.nh-sumtab-btns { justify-content: flex-start; gap: 8px; flex-wrap: wrap; }
/* (f) Directions taken and Other directions in one type — the counts and the label say which is which */
#nh-session .nh-sumtab-nt > li, #nh-session .nh-sumtab-nt > li > span { color: var(--t-body) !important; }
@media (max-width: 680px) { :where(.pg-player) .nh-sumtab-foot.nh-sumtab-btns { flex-direction: row; align-items: center; } }
/* (e) ✦ Add Supporting Phrases: with the button hidden and no note, the bar above the suggestions is empty — it drew a 40 px gap */
:where(.pg-player) #pl-suggest .pl-frame-bar:has(#pl-sg-link[hidden]):has(#pl-sg-note:empty) { display: none; }
:where(.pg-player) #pl-suggest .pl-frame-bar:has(#pl-sg-link[hidden]):has(#pl-sg-note:empty) + .pl-sg-strip { padding-top: 0; }
/* the tab row's Clear (now a button) sits at the row's end in the flow — absolute, it covered "Rife" on a phone */
#nh-session .pl-tabs > .pl-clear { position: static; transform: none; margin: 0 0 5px auto; align-self: center; min-height: 30px; }
@media (max-width: 600px) { #nh-session .pl-tab { padding: 8px 10px; } }
/* ===== 28kc (Session 77) ===== */
/* 692 (Dan 17:05): Set Session Length's two choices as a two-part toggle — Plays once | Repeats, the current one filled
   (the play bar's High · Med · Low look in the card's blue) */
#nh-session .nh-seg { display: inline-flex; align-items: stretch; border: 1px solid #1066c4; border-radius: 999px; overflow: hidden; flex: 0 0 auto; }
#nh-session .pl-step-q .nh-seg a.nh-seg-opt { display: inline-flex; align-items: center; min-height: 30px; padding: 4px 12px; font-size: 13px; font-weight: 600;
  color: #1066c4; background: #fff; text-decoration: none; line-height: 1.2; }
#nh-session .pl-step-q .nh-seg a.nh-seg-opt + a.nh-seg-opt { border-left: 1px solid #1066c4; }
#nh-session .pl-step-q .nh-seg a.nh-seg-opt.is-on { background: #1066c4; color: #fff; cursor: default; }
@media (hover:hover) { #nh-session .pl-step-q .nh-seg a.nh-seg-opt:not(.is-on):hover { background: #eef5ff; } }
@media (max-width: 680px) { #nh-session .pl-step-q .nh-seg a.nh-seg-opt { min-height: 32px; padding: 5px 12px; } }
/* 688 (Dan 17:05 "Yes"): one flash of a How it plays row when the AI changes it (the waveform set, new suggestions) */
@keyframes nh-row-flash { 0% { background-color: #fff3c4; } 100% { background-color: transparent; } }
#nh-session .pl-step.nh-row-flash { animation: nh-row-flash 1.5s ease-out 1; }
@media (prefers-reduced-motion: reduce) { #nh-session .pl-step.nh-row-flash { animation: none; outline: 2px solid #f1c40f; outline-offset: -2px; } }
/* 691: the summary window's AI lists wherever the window opens (the Player's Full summary too; was the Generator only) */
.nh-sum .nh-sum-ai-list { margin: 4px 0 10px; padding-left: 18px; }
.nh-sum .nh-sum-ai-list li { margin: 2px 0; line-height: 1.45; }
.nh-sum .nh-sum-ai > b { display: block; margin-top: 8px; }
/* 687: the Prioritizer's Your Sessions window — Select all · Untick all above the list, as in the other pickers */
.pm-ys-tools { padding: 0 0 10px; border-bottom: 1px solid #eef1f5; margin-bottom: 8px; }
.pm-ys-tools[hidden] { display: none; }
/* 692 fix (Dan's iPhone, 18:36): the card's link colour rule (#nh-session .pl-step-q a — blue, !important) painted the filled half
   blue on blue; the chosen half's words are white */
#nh-session .pl-step-q .nh-seg a.nh-seg-opt.is-on { color: #fff !important; background: #1066c4 !important; }
/* 688 fix (same screenshot): "optimizing…" as a small second line under Play, so the bar's button keeps its width on a phone */
#playBtnFloat .nh-play-sub { display: block; font-size: 10.5px; font-weight: 600; line-height: 1.1; opacity: .9; letter-spacing: 0; }
#playBtnFloat:has(.nh-play-sub) { flex-direction: column !important; justify-content: center !important; align-items: center !important; line-height: 1.1 !important; gap: 0 !important; white-space: nowrap; overflow: hidden; }
/* 28kc (Session 77): Admin's Inbox — the forms from the Cloudflare database — and the maintenance switch */
.pg-admin .ib-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.pg-admin .ib-key { margin: 6px 0 10px; padding: 8px 12px; border-left: 3px solid #f1c40f; background: #fffbea; font-size: 14px; }
.pg-admin .ib-key[hidden], .pg-admin .ib-more[hidden] { display: none; }
.pg-admin .ib-maint { margin: 8px 0 16px; padding: 12px 14px; border: 1px solid #e3e8ef; border-radius: 10px; background: #fbfcfe; display: grid; gap: 6px; justify-items: start; }
.pg-admin .ib-maint-state { font-weight: 600; color: #495057; }
.pg-admin .ib-maint-state.is-on { color: #8a6d1d; background: #fff3c4; padding: 1px 8px; border-radius: 999px; }
.pg-admin .ib-maint-d { font-size: 13px; }
.pg-admin .ib-tools { display: flex; gap: 8px; align-items: center; margin: 10px 0; flex-wrap: wrap; }
.pg-admin .ib-q { flex: 1 1 220px; min-width: 0; border: 1px solid #cfd8e3; border-radius: 8px; padding: 8px 10px; font: inherit; font-size: 14px; }
.pg-admin .ib-list { display: grid; gap: 6px; }
.pg-admin .ib-item { border: 1px solid #e3e8ef; border-radius: 8px; background: #fff; }
.pg-admin .ib-item > summary { list-style: none; cursor: pointer; padding: 8px 12px; display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; }
.pg-admin .ib-item > summary::-webkit-details-marker { display: none; }
.pg-admin .ib-when { font-size: 12.5px; color: #6c757d; white-space: nowrap; }
.pg-admin .ib-title { font-weight: 600; color: #212529; font-size: 14px; }
.pg-admin .ib-tag { font-size: 11.5px; font-weight: 600; color: #1066c4; background: #eef5ff; border-radius: 999px; padding: 1px 8px; }
.pg-admin .ib-line { flex-basis: 100%; font-size: 13px; color: #495057; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pg-admin .ib-body { padding: 4px 12px 12px; border-top: 1px solid #eef1f5; font-size: 13px; }
.pg-admin .ib-kv { display: flex; gap: 8px; padding: 2px 0; word-break: break-word; }
.pg-admin .ib-kv span { flex: 0 0 90px; color: #6c757d; }
.pg-admin .ib-pre { white-space: pre-wrap; word-break: break-word; font: 13px/1.5 ui-monospace, Menlo, monospace; background: #f8f9fb; border: 1px solid #eef1f5; border-radius: 6px; padding: 8px 10px; max-height: 420px; overflow: auto; margin: 8px 0; }
.pg-admin .ib-empty { padding: 8px 2px; }
.pg-admin .ib-more { margin-top: 10px; }
/* the Admin tab row with five tabs: on a phone it wraps to two rows instead of cutting the last one off */
@media (max-width: 680px) { .pg-admin .adm-main { display: flex; flex-wrap: wrap; } .pg-admin .adm-main-tab { flex: 1 1 30%; padding: 10px 8px; font-size: 13px; border-bottom: 1px solid #ced4da; } }