/* Home Mastery Member Portal: the portal's own styles, on top of site.css. */

/* The Project Assistant, draft 0.2: an app shell after Ed's earlier mock-up (eds-own 192), a navy bar on the
   left and a light working area of cards, so the first screen shows the project at a glance. Colours, faces
   and section tones come from the website stylesheet (site.css); one navy card carries the Map, the focal
   point of every screen. Single look by design: the brand palette is locked. */
:root { color-scheme: dark; --side-w: 252px; --radius: 6px; }
body { background: var(--navy); }
[hidden] { display: none !important; }

/* The shell */
.app { display: grid; grid-template-columns: var(--side-w) minmax(0, 1fr); align-items: start; }
/* The bar folds to a strip of its icons on every page, as in the course mock-up (Ed, eds-own 203) */
:root { --rail-w: 76px; }
.side-h { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.logo-mark { display: none; }
.side-fold { flex: none; width: 32px; height: 32px; display: grid; place-items: center; background: none; border: 1px solid var(--rule-2); border-radius: 4px; color: var(--fg-2); cursor: pointer; }
.side-fold:hover { border-color: var(--accent-line); color: var(--accent); }
.side-fold svg { width: 16px; height: 16px; transition: transform .2s; }
.side-lbl { min-width: 0; }
.ext { margin-left: 6px; font-size: .85em; color: var(--fg-2); }
.later-body .more { display: inline-block; margin-top: 8px; }
@media (min-width: 961px) {
  .shell.is-rail { grid-template-columns: var(--rail-w) minmax(0, 1fr); }
  .shell.is-rail .side { padding: 22px 10px 18px; gap: 22px; align-items: center; }
  .shell.is-rail .side-h { flex-direction: column; gap: 16px; }
  .shell.is-rail .logo-full { display: none; }
  .shell.is-rail .logo-mark { display: block; width: 46px; height: auto; }
  .shell.is-rail .side-fold svg { transform: rotate(180deg); }
  .shell.is-rail .side-nav, .shell.is-rail .side-later { width: 100%; }
  .shell.is-rail .side-nav a, .shell.is-rail .side-later > span { justify-content: center; padding: 11px 0; }
  .shell.is-rail .side-lbl, .shell.is-rail .side-later em { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .shell.is-rail .side-later .pa-k, .shell.is-rail .help, .shell.is-rail .me > div, .shell.is-rail .side > .rn { display: none; }
  .shell.is-rail .side-later { border-top: 1px solid var(--rule); padding-top: 10px; }
  .shell.is-rail .side-foot { width: 100%; }
  .shell.is-rail .me { justify-content: center; }
}
.side { position: sticky; top: env(safe-area-inset-top, 0px); height: 100vh; overflow-y: auto; display: flex; flex-direction: column; gap: 26px; padding: 26px 16px 20px; border-right: 1px solid var(--rule); background: var(--bg); }
.side .logo img { height: 32px; }
.side-nav { display: grid; gap: 4px; }
.side-nav a, .side-later > span { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid transparent; border-radius: 4px; color: var(--fg); text-decoration: none; font-size: 14.5px; }
.side-nav a:hover { background: rgba(216,207,188,.05); }
.side-nav a[aria-current="page"] { background: rgba(216,207,188,.08); border-color: rgba(216,207,188,.18); color: var(--heading); }
.side-nav a[aria-current="page"] .ui { color: var(--accent); }
.ui { width: 19px; height: 19px; flex: none; color: var(--fg-2); }
.side-later { display: grid; gap: 4px; }
.side-later .pa-k { padding: 0 12px 4px; }
.side-later > span { color: var(--fg-2); opacity: .7; cursor: default; }
.side-later em { margin-left: auto; font-style: normal; font-family: var(--label); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; border: 1px solid var(--rule-2); padding: 1px 6px; }
.side-foot { margin-top: auto; display: grid; gap: 14px; }
.help { border: 1px solid var(--rule); border-radius: var(--radius); padding: 14px; display: grid; gap: 4px; background: rgba(216,207,188,.04); }
.help b { font-weight: 500; color: var(--heading); font-size: 14px; }
.help span { font-size: 12.5px; color: var(--fg-2); user-select: all; white-space: nowrap; }
.me { display: flex; align-items: center; gap: 12px; border-top: 1px solid var(--rule); padding-top: 16px; }
.me i { width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--accent-line); color: var(--accent); font-style: normal; font-family: var(--label); font-size: 12px; display: grid; place-items: center; flex: none; }
.me b { display: block; font-weight: 500; color: var(--heading); font-size: 14px; }
.me small { color: var(--fg-2); font-size: 12.5px; }

.work { min-width: 0; min-height: 100vh; padding: 26px clamp(16px, 3vw, 40px) 72px; }
.top { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px 24px; flex-wrap: wrap; margin-bottom: 24px; }
.top-l { display: grid; gap: 6px; min-width: 0; }
.top-l .hi { color: var(--fg-2); font-size: 14px; }
.top-l h1 { font-size: clamp(30px, 3.4vw, 42px); line-height: 1.08; }
.top-l .vsub { color: var(--fg-2); font-size: 15px; max-width: 62ch; }
.top-r { display: flex; align-items: center; gap: 12px; }
.top-search { position: relative; }
.top-search input { width: min(280px, 60vw); background: var(--surface); color: var(--fg); border: 1px solid var(--rule-2); border-radius: 4px; padding: 10px 12px 10px 36px; font: 300 14px var(--body); }
.top-search input:focus { outline: none; border-color: var(--accent-line); }
.top-search input::placeholder { color: var(--fg-2); opacity: .8; }
.top-search .ui { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; }
.burger { display: none; background: none; border: 1px solid var(--rule-2); border-radius: 4px; color: var(--fg); font: 500 13px var(--body); padding: 9px 12px; cursor: pointer; align-items: center; gap: 8px; }
.scrim { display: none; }
@media (max-width: 960px) {
  .app { grid-template-columns: minmax(0, 1fr); }
  .side-fold { display: none; }
  .side { position: fixed; z-index: 40; left: 0; top: 0; bottom: 0; width: min(290px, 86vw); height: auto; padding-top: calc(26px + env(safe-area-inset-top, 0px)); transform: translateX(-104%); visibility: hidden; transition: transform .25s ease, visibility 0s linear .25s; box-shadow: 0 20px 60px rgba(0,0,0,.4); }
  .side.open { transform: none; visibility: visible; transition: transform .25s ease, visibility 0s; }
  .scrim.open { display: block; position: fixed; inset: 0; z-index: 35; background: rgba(11,21,41,.5); }
  /* The Menu bar on a narrow screen in navy with gold, set apart from the page, with room before the title
     (Ed, 14 October 2026: "make the menu bar in contrast colour, blue with gold text is ok. also give some spacing before the title text") */
  .burger { display: inline-flex; background: #0E1A33; border-color: #0E1A33; color: #CF9C63; padding: 12px 14px; font-size: 14px; margin-bottom: 18px; }
  .burger .ui { color: #CF9C63; }
  .burger:hover, .burger[aria-expanded="true"] { background: #13223F; }
  .top-r { width: 100%; }
  .top-search { flex: 1; } .top-search input { width: 100%; }
}

/* Cards */
.grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; align-items: start; }
.span2 { grid-column: span 2; }
.span3 { grid-column: 1 / -1; }
@media (max-width: 1180px) { .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .span2 { grid-column: 1 / -1; } }
@media (max-width: 700px) { .grid { grid-template-columns: minmax(0, 1fr); } }
.card { background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius); padding: 20px 22px; display: grid; gap: 14px; align-content: start; min-width: 0; }
.card.t-navy { border-color: transparent; background: var(--bg); box-shadow: 0 18px 40px rgba(14,26,51,.18); }
.card-h { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.card-h h2 { font-size: 21px; line-height: 1.2; }
.more { background: none; border: 0; padding: 0; font: 500 13px var(--body); color: var(--accent); cursor: pointer; text-decoration: none; white-space: nowrap; }
.more:hover { text-decoration: underline; text-underline-offset: 3px; }
.pa-k { font-family: var(--label); font-size: 12px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--fg-2); }
.note { font-size: 13px; color: var(--fg-2); }
.pa-msg { font-size: 13px; color: var(--accent); min-height: 1.2em; }

/* The Map card */
/* The Dial leads the overview (Ed, 10 October 2026, eds-own 210): "It should be the main feature and something
   people remember about home mastery for." The Map card spans the page and the Dial takes the larger half of it. */
/* The overview's Dial is a preview that opens the Map; the Project Map screen keeps the large one (Ed, 10 October 2026) */
/* The Overview's Dial stays the small preview without step names, so it is not confused with the Map screen's
   (Ed, 10 October 2026, eds-own 248; confirmed 14 October 2026: "Go back to the small Overview Dial without names") */
.mapcard { display: grid; grid-template-columns: minmax(200px, 290px) minmax(0, 1fr); gap: clamp(22px, 3.4vw, 48px); align-items: center; }
.mapcard .dash-dial { max-width: 290px; width: 100%; }
/* The band stacks by its own width, not the window's, so the text never runs off the card with the bar open or folded
   (Ed, 14 October 2026: "when i make the screen smaller, it overlaps the side") */
.ov-top > .card.t-navy { container-type: inline-size; }
@container (max-width: 560px) { .mapcard { grid-template-columns: minmax(0, 1fr); } .mapcard .dash-dial { margin-inline: auto; } .mapcard-t { max-width: none; } }
.ov-dial { display: block; border-radius: 50%; }
.ov-dial:hover svg { filter: brightness(1.12); }
.mapcard-t { display: grid; gap: 14px; min-width: 0; max-width: 640px; }
.mapcard-t h2 { font-size: clamp(26px, 2.6vw, 34px); line-height: 1.1; }
.mapcard-t .line { color: var(--fg-2); font-size: 16px; line-height: 1.6; }
.ov-top > .card.t-navy { padding: clamp(20px, 2.6vw, 34px); }
.nd { display: grid; gap: 8px; border-top: 1px solid var(--rule); padding-top: 14px; }
.nd-title { display: flex; gap: 10px; align-items: flex-start; font-weight: 500; color: var(--heading); font-size: 15px; line-height: 1.4; }
.nd .dash-look { font-size: 13.5px; }
@media (max-width: 900px) { .mapcard { grid-template-columns: minmax(0, 1fr); } .mapcard .dash-dial { margin-inline: auto; width: 100%; max-width: 300px; } .mapcard-t { max-width: none; } }

/* Compact lists */
.mini { list-style: none; margin: 0; padding: 0; }
.mini li { border-top: 1px solid var(--rule); }
.mini li:first-child { border-top: 0; }
.mini button, .mini .row { width: 100%; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 10px 0; background: none; border: 0; color: var(--fg); font: 400 14px var(--body); text-align: left; cursor: pointer; }
.mini button:hover .tt { color: var(--accent); }
.mini .tt { line-height: 1.4; min-width: 0; }
.mini .tt small { display: block; color: var(--fg-2); font-size: 12px; margin-top: 2px; }
.mini .dot { width: 26px; height: 26px; font-size: 12px; }
.mini li.is-next .dot { background: var(--accent-line); color: #0E1A33; }
.mini .dia { margin: 0 6px; }
.mini .thumb { width: 26px; height: 26px; border: 1px solid var(--rule-2); border-radius: 4px; display: grid; place-items: center; color: var(--accent); }
.mini .thumb .ui { width: 14px; height: 14px; color: currentColor; }
.empty { color: var(--fg-2); font-size: 14px; padding: 6px 0; }
.mini li.lockhead { border-top: 0; padding: 12px 0 2px; }
.mini li.locked .row { cursor: pointer; color: var(--fg-2); }
.mini li.locked .thumb { color: var(--fg-2); }
.mini li.locked .thumb svg { width: 10px; height: 12px; }

/* Quick actions */
.qa { display: grid; gap: 8px; }
.qa a, .qa button { display: flex; align-items: center; gap: 12px; border: 1px solid var(--rule); border-radius: 4px; background: transparent; padding: 11px 12px; font: 400 14px var(--body); color: var(--fg); text-align: left; cursor: pointer; text-decoration: none; }
.qa a:hover, .qa button:hover { border-color: var(--accent-line); }
.qa .ui { width: 17px; height: 17px; color: var(--accent); }
.qa .go { margin-left: auto; color: var(--fg-2); }

/* Recommendation, plan and record */
.rec { border: 1px solid var(--accent-line); border-radius: 4px; padding: 16px; display: grid; gap: 8px; }
.rec h3 { font-size: 19px; color: var(--accent); } /* the darker gold at this size reads at 4.5 to 1 (interface review, 13 October 2026) */
.rec p { font-size: 14px; }
.state { justify-self: start; font-family: var(--label); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--fg-2); border: 1px dashed var(--rule-2); padding: 2px 7px; }
.plan { display: grid; gap: 10px; }
.plan .field input { padding: 10px 12px; font-size: 14px; border-radius: 4px; }
.plan .field label { font-size: 12.5px; }
.plan .btn { min-height: 40px; padding: 8px 16px; font-size: 14px; justify-self: start; border-radius: 4px; }
.record { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0; border: 1px solid var(--rule); border-radius: 4px; }
.record > div { padding: 10px 14px; border-left: 1px solid var(--rule); display: grid; gap: 3px; min-width: 0; }
.record > div:first-child { border-left: 0; }
.record b { font-weight: 400; font-size: 14px; color: var(--heading); }
.record .rev { font-family: var(--label); color: var(--accent); letter-spacing: .08em; }
@media (max-width: 1000px) { .record { grid-template-columns: repeat(3, minmax(0, 1fr)); } .record > div:nth-child(4) { border-left: 0; } .record > div:nth-child(n+4) { border-top: 1px solid var(--rule); } }
@media (max-width: 560px) { .record { grid-template-columns: repeat(2, minmax(0, 1fr)); } .record > div { border-left: 0 !important; border-top: 1px solid var(--rule); } .record > div:nth-child(-n+2) { border-top: 0; } .record > div:nth-child(even) { border-left: 1px solid var(--rule) !important; } }

/* The Project Map screen */
/* The Dial heads the Project Map screen too, at the overview's size (Ed, 10 October 2026, eds-own 210: "yes, make
   it bigger on the map tab too"). The narrow side column becomes a hero above the tabs, and the cards take the width. */
.mv { display: grid; grid-template-columns: minmax(0, 1fr); gap: 22px; align-items: start; }
/* The Project Map screen holds more than the overview (Ed, 10 October 2026) */
.mv-facts { margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 24px; border-top: 1px solid var(--rule); padding-top: 14px; }
.mv-facts > div { display: grid; gap: 3px; min-width: 0; }
.mv-facts dt { font-family: var(--label); font-size: 12px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--fg-2); }
.mv-facts dd { margin: 0; font-size: 14px; line-height: 1.5; color: var(--fg); }
.mv-facts .more { margin-left: 6px; }
/* Go to the course sits on its own line under the stage, so it never starts a wrapped line with a gap (Ed, 14 October 2026: "say go to course or something like that, see is odd") */
.mv-facts .more.mv-go { display: table; margin: 4px 0 0; }
@media (max-width: 560px) { .mv-facts { grid-template-columns: minmax(0, 1fr); } }
.pa-lib { padding: 14px 20px 4px; display: grid; gap: 6px; border-top: 1px solid var(--rule); }
.pa-ev .pa-lib { padding-inline: 0; }
.pa-lib ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.pa-lib li { display: flex; align-items: center; gap: 8px; font-size: 14px; }
.pa-lib li a { color: var(--heading); text-underline-offset: 3px; }
.pa-lib li a:hover { color: var(--accent); }
.pa-lib li.locked { color: var(--fg-2); cursor: pointer; }
.pa-lib li.locked svg { width: 9px; height: 11px; flex: none; }
.mv-side { padding: clamp(22px, 3.2vw, 44px); }
.mv-hero { display: grid; grid-template-columns: minmax(300px, 1.15fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 60px); align-items: center; }
.mv-dialcol { display: grid; gap: 12px; min-width: 0; }
.mv-side .dash-dial { max-width: 620px; width: 100%; }
.mv-info { display: grid; gap: 14px; min-width: 0; max-width: 460px; }
.mv-side h2 { font-size: clamp(30px, 3.2vw, 44px); line-height: 1.08; }
.mv-side .btns { display: grid; gap: 8px; }
.mv-side .btn { min-height: 42px; padding: 9px 14px; font-size: 14px; border-radius: 4px; width: 100%; }
@media (max-width: 900px) { .mv-hero { grid-template-columns: minmax(0, 1fr); } .mv-side .dash-dial { max-width: 540px; margin-inline: auto; } .mv-info { max-width: none; } }
.mv-rec { display: grid; gap: 3px; border-top: 1px solid var(--rule); padding-top: 12px; }
.mv-rec div { display: flex; justify-content: space-between; gap: 12px; font-size: 13.5px; }
.mv-rec span { color: var(--fg-2); }
.mv-rec b { font-weight: 400; color: var(--heading); text-align: right; }

.tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--rule-2); overflow-x: auto; scrollbar-width: none; }
.tab { background: none; border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px; padding: 11px 14px; font: 500 14px var(--body); color: var(--fg-2); cursor: pointer; white-space: nowrap; }
.tab:hover { color: var(--fg); }
.tab[aria-selected="true"] { color: var(--heading); border-bottom-color: var(--accent-line); }
.tab .c { font-family: var(--label); font-size: 12px; margin-left: 6px; color: var(--accent); }
.panel { padding-top: 18px; display: grid; gap: 16px; }
.panel > .note { max-width: 70ch; }

/* Decision and event cards, as in draft 0.1, on the card surface */
.pa-card { border: 1px solid var(--rule); border-radius: var(--radius); background: var(--surface); display: grid; min-width: 0; scroll-margin-top: 20px; }
.pa-card-head { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 14px; align-items: start; padding: 16px 20px 14px; border-bottom: 1px solid var(--rule); }
.pa-card-head h3 { font-size: 20px; line-height: 1.25; }
.pa-card.is-next .dot { background: var(--accent-line); color: #0E1A33; }
/* The decision the needle points at: the warm tint of the member's own step on the Library screen, a shade off
   white, with a gold border, so it is told apart from the decisions ahead without competing (eds-own 199) */
.pa-card.is-next { background: #FBF6EE; border-color: rgba(184,132,77,.38); }
.pa-card.is-next .pa-card-head, .pa-card.is-next .pa-parts > div { border-color: rgba(184,132,77,.22); }
.pa-k.now { color: var(--accent); margin-bottom: 4px; }
.mini li.is-next button { background: var(--accent-soft); margin-inline: -10px; padding-inline: 10px; width: calc(100% + 20px); border-radius: 4px; }
.pa-card.flash { box-shadow: 0 0 0 2px var(--accent-line); }
.pa-jur { font-family: var(--label); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--fg-2); border: 1px solid var(--rule-2); padding: 2px 7px; white-space: nowrap; }
.pa-parts { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.pa-parts > div { padding: 14px 20px 16px; display: grid; gap: 6px; align-content: start; border-top: 1px solid var(--rule); min-width: 0; }
.pa-parts > div:nth-child(-n+2) { border-top: 0; }
.pa-parts > div:nth-child(even) { border-left: 1px solid var(--rule); }
.pa-parts p { font-size: 14px; line-height: 1.6; }
.pa-parts .look p:last-child { border-left: 2px solid var(--accent-line); padding-left: 10px; }
@media (max-width: 600px) { .pa-parts { grid-template-columns: minmax(0, 1fr); } .pa-parts > div:nth-child(2) { border-top: 1px solid var(--rule); } .pa-parts > div:nth-child(even) { border-left: 0; } }
.pa-ev { border: 1px solid var(--rule); border-radius: var(--radius); background: var(--surface); padding: 18px 20px; display: grid; gap: 12px; min-width: 0; }
.pa-ev-head { display: flex; gap: 14px; align-items: flex-start; }
.pa-ev-head .dia { flex: none; margin-top: 7px; }
.pa-ev ul { margin: 0; padding-left: 18px; display: grid; gap: 4px; font-size: 14px; }
.pa-ev p { font-size: 14px; }
.two { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px; align-items: start; }
@media (max-width: 760px) { .two { grid-template-columns: minmax(0, 1fr); } }
.ans { margin: 0; }
.ans > div { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 14px; align-items: baseline; padding: 10px 0; border-top: 1px solid var(--rule); }
.ans > div:first-child { border-top: 0; }
.ans dt { font-size: 14px; color: var(--fg-2); }
.ans dd { margin: 0; font-size: 14px; color: var(--heading); font-weight: 500; text-align: right; }
.limit { border-left: 2px solid var(--accent-line); padding-left: 14px; display: grid; gap: 8px; font-size: 14px; color: var(--fg-2); }
.limit b { color: var(--heading); font-weight: 500; }

/* Library and saved */
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { background: none; border: 1px solid var(--rule-2); border-radius: 4px; color: var(--fg); font: 400 13px var(--body); padding: 6px 11px; cursor: pointer; }
.chip:hover { border-color: var(--accent-line); }
.chip[aria-pressed="true"] { background: var(--accent-line); border-color: var(--accent-line); color: #0E1A33; font-weight: 500; }
.rows { list-style: none; margin: 0; padding: 0; }
.rows li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px 20px; align-items: center; padding: 14px 0; border-top: 1px solid var(--rule); }
.rows li:first-child { border-top: 0; }
/* Scoped to the article button (fixed 13 October 2026): as a bare .open it also caught every drawer opened with the same
   class, the phone menu, the course outline and the Library's browse panel, and wiped their background (Ed) */
/* The name at the foot of the bar opens the account (Ed, 13 October 2026) */
a.me { text-decoration: none; color: inherit; border-radius: 4px; }
a.me:hover b, a.me[aria-current] b { color: var(--accent); }
button.open { background: none; border: 0; padding: 0; text-align: left; cursor: pointer; color: inherit; font: inherit; display: grid; gap: 3px; min-width: 0; }
.open .s { font-family: var(--display); font-size: 19px; line-height: 1.2; color: var(--heading); }
.open:hover .s { color: var(--accent); }
.open .t { font-size: 14px; color: var(--fg-2); }
.open .m { font-family: var(--label); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--fg-2); margin-top: 3px; }
.acts { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; justify-content: flex-end; }
.badge { font-family: var(--label); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; padding: 3px 8px; border: 1px solid var(--rule-2); color: var(--fg-2); display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.badge.free { border-color: var(--accent-line); color: var(--accent); }
.badge svg { width: 9px; height: 11px; }
.save { background: none; border: 1px solid var(--rule-2); border-radius: 4px; color: var(--fg); font: 400 13px var(--body); padding: 5px 11px; cursor: pointer; white-space: nowrap; }
.save:hover { border-color: var(--accent-line); }
.save[aria-pressed="true"] { border-color: var(--accent-line); color: var(--accent); }
@media (max-width: 640px) { .rows li { grid-template-columns: minmax(0, 1fr); } .acts { justify-content: flex-start; } }
.reader { gap: 16px; }
.reader-top { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.reader h2 { font-size: clamp(26px, 3vw, 34px); line-height: 1.1; }
.reader .prose { font-size: 16px; }
.reader .prose h4 { font-family: var(--display); font-weight: 400; font-size: 21px; line-height: 1.2; color: var(--heading); margin: 1.5em 0 .5em; text-wrap: balance; }
.reader .prose h4:first-child { margin-top: .3em; }
.reader .prose ul, .reader .prose ol { padding-left: 20px; margin: 0 0 1.1em; }
.lock { border-left: 2px solid var(--accent-line); padding-left: 14px; display: grid; gap: 6px; max-width: 62ch; font-size: 15px; }

/* Account */
.kv { display: grid; gap: 3px; }
.kv b { font-weight: 400; color: var(--heading); overflow-wrap: anywhere; }
.btn.small { min-height: 40px; padding: 8px 15px; font-size: 14px; border-radius: 4px; }
.toggle { display: flex; gap: 12px; align-items: flex-start; font-size: 14px; }
.toggle input { width: 18px; height: 18px; accent-color: #B8844D; margin-top: 2px; flex: none; }
.confirm { border: 1px dashed var(--rule-2); border-radius: 4px; padding: 14px; display: grid; gap: 12px; }
.card p { font-size: 14.5px; }
.strip .seg button { min-width: 30px; }
.strip .strip-go { color: var(--gold); text-decoration: none; border: 1px solid rgba(207,156,99,.5); padding: 4px 10px; }
.strip .strip-go:hover { background: rgba(207,156,99,.12); }
.work > .strip { margin: -26px calc(-1 * clamp(16px, 3vw, 40px)) 24px; }
.rn { border-radius: 4px; }

/* Draft 0.3: the overview grouped by purpose (eds-own 194). The Map and quick actions on top; then three
   columns, each under its own heading: the project at this step, the member's learning, and what is
   recommended for the step. Column headings carry the display face; card titles drop to the body face. */
.ov { display: grid; gap: 30px; }
.ov-top { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; align-items: stretch; }
.zones { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; align-items: start; }
.zone { display: grid; gap: 14px; align-content: start; min-width: 0; }
.zone-h { display: grid; gap: 4px; padding-bottom: 12px; border-bottom: 1px solid var(--accent-line); }
.zone-h h2 { font-size: 26px; line-height: 1.15; }
.zone-h p { font-size: 13.5px; color: var(--fg-2); }
.zone .card-h h3 { font-family: var(--body); font-size: 15.5px; font-weight: 500; color: var(--heading); letter-spacing: 0; }
.card.later { background: transparent; border-style: dashed; }
.later-body { display: flex; gap: 14px; align-items: flex-start; color: var(--fg-2); }
.later-body .ui { width: 28px; height: 28px; color: var(--accent); opacity: .75; }
.later-body p { font-size: 14px; color: var(--fg-2); }
.later-body .pa-k { margin-bottom: 4px; }
@media (max-width: 1180px) {
  .zones { grid-template-columns: minmax(0, 1fr); gap: 30px; }
  .zone { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .zone-h { grid-column: 1 / -1; }
}
@media (max-width: 700px) { .zone { grid-template-columns: minmax(0, 1fr); } }
/* ---------- The Knowledge Library, merged from exports/2026-10-10/mockups/member-library (eds-own 193, 195) ---------- */
.lib { --lib-tint: #F2EDE3; display: grid; grid-template-columns: minmax(290px, 330px) minmax(0, 1fr); gap: 20px; align-items: start; }
.lib-main { display: grid; gap: 18px; min-width: 0; }
.lib-notes { display: grid; gap: 4px; margin: -8px 0 18px; }
.lib-notes .rn { margin-top: 0; max-width: 90ch; }

/* The browse panel, draft 0.2 (Ed: "visually not clear enough"). Each step is one block: its number, its
   name on a line of its own, and how many articles it holds beneath. The open step sits on a tinted ground
   with its subjects indented under the name, each with its count in a pill; the subject open in the page is
   filled navy, and the article open under it carries a gold rule. */
.lib-browse { position: sticky; top: calc(18px + env(safe-area-inset-top, 0px)); max-height: calc(100vh - 36px); overflow-y: auto; padding: 18px 12px 12px; gap: 10px; scrollbar-width: thin; }
.lib-browse-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding: 0 10px 4px; }
.lib-tree, .lib-tree ul { list-style: none; margin: 0; padding: 0; }
.lib-tree { display: grid; }
.lib-cat { border-top: 1px solid var(--rule); border-radius: 6px; }
.lib-cat:first-child { border-top-color: transparent; }
.lib-cat.is-open { background: var(--lib-tint); border-top-color: transparent; }
.lib-cat.is-open + .lib-cat { border-top-color: transparent; }
.lib-cat-a { display: grid; grid-template-columns: 26px minmax(0, 1fr) 12px; gap: 12px; align-items: start; padding: 13px 12px 13px 10px; color: var(--heading); text-decoration: none; border-radius: 6px; }
.lib-cat-a:hover .lib-cat-name { color: var(--accent); }
.lib-cat-a .dot { width: 26px; height: 26px; font-size: 12px; background: var(--surface); }
.lib-cat.is-on .lib-cat-a .dot { background: #0E1A33; border-color: #0E1A33; color: #EDE7DA; }
.lib-cat-t { display: grid; gap: 4px; min-width: 0; }
.lib-cat-name { font-size: 14.5px; font-weight: 500; line-height: 1.32; transition: color .15s; }
.lib-cat-m { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-size: 12px; color: var(--fg-2); font-variant-numeric: tabular-nums; }
.lib-cat-a > svg { width: 12px; height: 12px; margin-top: 7px; color: var(--fg-2); transition: transform .2s; }
.lib-cat.is-open .lib-cat-a > svg { transform: rotate(90deg); color: var(--heading); }
.lib-subs { display: grid; gap: 2px; margin: -4px 8px 0 40px !important; padding: 0 0 12px !important; }
.lib-sub-a { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 8px 10px; border-radius: 4px; color: var(--fg); text-decoration: none; font-size: 13.5px; font-weight: 400; line-height: 1.35; }
.lib-sub-a:hover { background: rgba(255,255,255,.75); }
.lib-pill { flex: none; box-sizing: border-box; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 11px; display: inline-grid; place-items: center; background: rgba(14,26,51,.07); color: var(--fg-2); font-size: 12px; line-height: 1; text-align: center; font-variant-numeric: tabular-nums; } /* a true circle for one digit (Ed, 11 October 2026) */
.lib-sub-a[aria-current="true"] { background: #0E1A33; color: #EDE7DA; font-weight: 500; }
.lib-sub-a[aria-current="true"] .lib-pill { background: rgba(237,231,218,.16); color: #EDE7DA; }
.lib-arts { display: grid; margin: 6px 0 8px 10px !important; border-left: 1px solid var(--rule-2); }
.lib-art-a, .lib-art-x { display: block; margin-left: -1px; padding: 6px 8px 6px 12px; border-left: 2px solid transparent; font-size: 12.5px; line-height: 1.4; }
.lib-art-a { color: var(--fg); text-decoration: none; }
.lib-art-a:hover { color: var(--accent); }
.lib-art-a[aria-current="true"] { border-left-color: var(--accent-line); color: var(--heading); font-weight: 500; }
.lib-art-x { color: var(--fg-2); opacity: .62; }
.lib-art-x svg { width: 8px; height: 10px; margin-right: 6px; vertical-align: -1px; }
.lib-you { font-family: var(--label); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); border: 1px solid var(--accent-line); border-radius: 3px; padding: 1px 6px; white-space: nowrap; }

/* Where you are */
.lib-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; font-size: 13px; color: var(--fg-2); }
.lib-crumbs a { color: var(--fg-2); text-decoration: none; }
.lib-crumbs a:hover { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.lib-crumbs .sep { opacity: .5; }
.lib-crumbs [aria-current] { color: var(--heading); }

/* The empty reading pane, and the count */
.lib-count { font-size: 14px; color: var(--fg-2); }
.lib-line { font-size: 14px; color: var(--fg-2); line-height: 1.55; }

/* Search results */
.lib-head { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 16px; align-items: start; }
.lib-head h2 { font-size: clamp(26px, 2.8vw, 34px); line-height: 1.1; margin-top: 4px; }
.lib-head.plain { grid-template-columns: minmax(0, 1fr); }
.lib-group-h { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; border-bottom: 1px solid var(--rule-2); padding-bottom: 10px; }
.lib-group-h h3 { font-size: 21px; line-height: 1.2; }
.lib-group-h h3 a { color: inherit; text-decoration: none; }
.lib-group-h h3 a:hover { color: var(--accent); }
.lib-group-h .pa-k { white-space: nowrap; }
.lib-rows { list-style: none; margin: 0; padding: 0; }
.lib-rows li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px 20px; align-items: center; padding: 14px 0; border-top: 1px solid var(--rule); }
.lib-rows li:first-child { border-top: 0; }
.lib-rows li:last-child { padding-bottom: 2px; }
.lib-open { display: grid; gap: 3px; min-width: 0; color: inherit; text-decoration: none; }
.lib-open .s { font-family: var(--display); font-size: 19px; line-height: 1.22; color: var(--heading); }
.lib-open:hover .s { color: var(--accent); }
.lib-open .t { font-size: 14px; color: var(--fg-2); line-height: 1.5; }
.lib-open .m { font-family: var(--label); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--fg-2); margin-top: 3px; }
.lib-acts { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; justify-content: flex-end; }
.lib-save { display: inline-flex; align-items: center; gap: 6px; background: none; border: 1px solid var(--rule-2); border-radius: 4px; color: var(--fg); font: 400 13px var(--body); padding: 5px 11px; cursor: pointer; white-space: nowrap; }
.lib-save svg { width: 13px; height: 13px; }
.lib-save:hover { border-color: var(--accent-line); }
.lib-save[aria-pressed="true"] { border-color: var(--accent-line); color: var(--accent); }
.lib-save[aria-pressed="true"] svg path { fill: currentColor; }
.lib-empty { color: var(--fg-2); font-size: 14.5px; padding: 6px 0; }
@media (max-width: 640px) { .lib-rows li { grid-template-columns: minmax(0, 1fr); } .lib-acts { justify-content: flex-start; } }

.lib-later { display: grid; gap: 4px; border-top: 1px solid var(--rule-2); padding-top: 12px; margin-top: 4px; }
.lib-later:first-child { border-top: 0; padding-top: 0; margin-top: 0; }
.lib-later-h { display: flex; align-items: center; gap: 7px; }
.lib-later-h svg { width: 9px; height: 11px; }
.lib-rows.is-locked li { grid-template-columns: minmax(0, 1fr); padding: 11px 0; }
.lib-dim { display: grid; gap: 2px; min-width: 0; cursor: pointer; }
.lib-dim .s { font-family: var(--display); font-size: 17px; line-height: 1.25; color: var(--fg-2); }
.lib-dim .t { font-size: 13.5px; color: var(--fg-2); line-height: 1.45; }

/* Reading an article: read on the site only, so there is no download control */
.lib-reader { padding: clamp(22px, 3.4vw, 40px); gap: 18px; }
.lib-reader-top { display: flex; justify-content: flex-end; align-items: center; gap: 10px; flex-wrap: wrap; }
.lib-reader h2 { font-size: clamp(30px, 3.4vw, 42px); line-height: 1.08; }
.lib-lead { font-size: clamp(17px, 1.5vw, 19px); line-height: 1.5; color: var(--accent); max-width: 56ch; }
.lib-meta { font-size: 13px; line-height: 1.6; color: var(--fg-2); word-spacing: .06em; }
.lib-body { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: clamp(24px, 3vw, 40px); align-items: start; border-top: 1px solid var(--rule); padding-top: 22px; }
.lib-toc-top { display: none !important; }
.lib-rail { position: sticky; top: calc(18px + env(safe-area-inset-top, 0px)); display: grid; gap: 14px; align-self: start; max-height: calc(100vh - 36px); overflow-y: auto; scrollbar-width: thin; }
.lib-rail .lib-toc { position: static; }
.lib-rail .lib-nt { padding: 16px; }
.lib-nt p.pa-k { font-size: 12px; }
.lib-nt p.note { font-size: 13px; line-height: 1.5; }
.lib-nt .nt-list p { font-size: 14px; }
.lib-addnote { display: inline-flex; align-items: center; gap: 6px; background: none; border: 1px solid var(--accent-line); border-radius: 4px; color: var(--accent); font: 500 13px var(--body); padding: 5px 11px; cursor: pointer; white-space: nowrap; }
.lib-addnote svg { width: 13px; height: 13px; }
.lib-addnote:hover { background: var(--accent-soft); }
.lib-toc { position: sticky; top: calc(18px + env(safe-area-inset-top, 0px)); display: grid; gap: 10px; border: 1px solid var(--rule); border-radius: var(--radius); padding: 16px; background: var(--bg); }
.lib-toc ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; counter-reset: toc; }
.lib-toc li { counter-increment: toc; }
.lib-toc button { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 6px; width: 100%; text-align: left; background: none; border: 0; padding: 6px 0; font: 400 13px/1.4 var(--body); color: var(--fg); cursor: pointer; }
.lib-toc button::before { content: counter(toc); font-family: var(--label); font-size: 12px; color: var(--accent); padding-top: 1px; }
.lib-toc button:hover { color: var(--accent); }
.lib-prose.prose { max-width: 68ch; font-size: 16.5px; line-height: 1.78; }
.lib-prose.prose > p { font-size: 16.5px; }
.lib-prose.prose h4 { font-family: var(--display); font-weight: 400; font-size: 23px; line-height: 1.2; color: var(--heading); margin: 1.5em 0 .5em; text-wrap: balance; scroll-margin-top: 24px; }
.lib-prose.prose h4:first-child { margin-top: 0; }
.lib-prose.prose ol, .lib-prose.prose ul { padding-left: 22px; margin: 0 0 1.15em; display: grid; gap: .55em; }
.lib-prose.prose li { padding-left: 4px; }
.lib-prose.prose li::marker { color: var(--accent); font-family: var(--label); font-size: .85em; }
.lib-prose .tw { overflow-x: auto; margin: 0 0 1.3em; border: 1px solid var(--rule); border-radius: 4px; }
.lib-prose table { border-collapse: collapse; width: 100%; font-size: 14.5px; line-height: 1.5; }
.lib-prose th { text-align: left; font-weight: 500; color: var(--heading); background: var(--bg); padding: 10px 12px; border-bottom: 1px solid var(--rule-2); vertical-align: bottom; }
.lib-prose td { padding: 10px 12px; border-top: 1px solid var(--rule); vertical-align: top; }
.lib-xref { color: var(--accent); text-decoration: underline; text-decoration-color: var(--accent-line); text-underline-offset: 3px; }
.lib-xref:hover { text-decoration-thickness: 2px; }
.lib-lock { border-left: 2px solid var(--accent-line); padding-left: 16px; display: grid; gap: 8px; max-width: 62ch; font-size: 15.5px; }
.lib-lock b { font-weight: 500; color: var(--heading); }
.lib-mock { font-size: 13px; color: var(--fg-2); }
.lib-pn { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; border-top: 1px solid var(--rule); padding-top: 18px; }
.lib-pn a { display: grid; gap: 4px; border: 1px solid var(--rule); border-radius: 4px; padding: 12px 14px; text-decoration: none; color: var(--heading); min-width: 0; }
.lib-pn a:hover { border-color: var(--accent-line); }
.lib-pn a .pa-k { color: var(--accent); }
.lib-pn a span:last-child { font-family: var(--display); font-size: 17px; line-height: 1.25; }
.lib-pn .next { text-align: right; grid-column: 2; }
.lib-back { font: 500 13px var(--body); color: var(--accent); text-decoration: none; }
.lib-back:hover { text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 1320px) {
  .lib-body { grid-template-columns: minmax(0, 1fr); }
  .lib-toc-top { display: grid !important; position: static; }
  .lib-rail { position: static; max-height: none; overflow: visible; }
  .lib-rail .lib-toc { display: none; }
}

/* One scene (Ed, 14 October 2026): the list on the left, and the right side empty until an article is chosen */
.lib-blank { min-height: calc(100vh - 230px); display: grid; place-content: center; justify-items: center; gap: 10px; text-align: center; padding: 48px 28px; }
.lib-blank svg { width: 44px; height: 44px; color: var(--fg-2); opacity: .45; margin-bottom: 4px; }
.lib-blank p { font-size: 15px; color: var(--fg-2); max-width: 40ch; line-height: 1.55; }
.lib-blank .lib-count { font-size: 13px; }
.lib-subs > li.is-open > .lib-sub-a:not([aria-current="true"]) { color: var(--heading); font-weight: 500; }
#lib .lib-back { display: none; }
.lib-clear { background: none; border: 0; padding: 0; font: 500 13px var(--body); color: var(--accent); cursor: pointer; justify-self: start; }
.lib-clear:hover { text-decoration: underline; text-underline-offset: 3px; }

/* Narrow: the list fills the screen, and an article opens in its place with a link back to it */
@media (max-width: 1100px) {
  .lib { grid-template-columns: minmax(0, 1fr); }
  .lib-browse { position: static; max-height: none; overflow: visible; }
  #portal[data-screen="library"][data-lib="list"] #libMain { display: none; }
  #portal[data-screen="library"][data-lib="art"] #libBrowse, #portal[data-screen="library"][data-lib="search"] #libBrowse { display: none; }
  #lib .lib-crumbs { display: none; }
  #lib .lib-up { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; margin: -6px 0 2px; font: 500 14px var(--body); color: var(--accent); text-decoration: none; }
  #lib .lib-up svg { width: 12px; height: 12px; flex: none; }
  #lib .lib-back { display: inline; }
}
@media (max-width: 560px) {
  .lib-pn { grid-template-columns: minmax(0, 1fr); }
  .lib-pn .next { grid-column: 1; }
}
@media (prefers-reduced-motion: reduce) { .lib-cat-a > svg { transition: none; } }
.lib a:focus-visible, .lib button:focus-visible { outline: 2px solid var(--accent-line); outline-offset: 2px; }

/* Notes on each decision (Ed, 10 October 2026, eds-own 202). A note is filed under the decision it concerns,
   so it is there again on that decision's card whenever the decision is in front of the member, and every note
   is gathered on the Saved page. Private by default. The box sits on white, inside the tinted next card too. */
.nt { display: grid; gap: 10px; padding: 14px 20px 18px; border-top: 1px solid var(--rule); }
.pa-ev .nt { padding: 14px 0 0; }
.nt-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.nt-list li { border-left: 2px solid var(--accent-line); padding: 1px 0 1px 12px; display: grid; gap: 3px; }
.nt-list p { font-size: 14px; line-height: 1.55; white-space: pre-wrap; overflow-wrap: anywhere; color: var(--fg); }
.nt-meta { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: baseline; font-size: 12px; color: var(--fg-2); }
.nt-ex { font-family: var(--label); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); border: 1px solid var(--accent-line); border-radius: 3px; padding: 0 5px; }
.nt-rm { background: none; border: 0; padding: 0; font: 400 12px var(--body); color: var(--fg-2); text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.nt-rm:hover { color: var(--accent); }
.nt-form { display: grid; gap: 8px; }
.nt-form textarea, .nt-form select { width: 100%; background: #FFFFFF; color: var(--fg); border: 1px solid var(--rule-2); border-radius: 4px; padding: 9px 11px; font: 300 14px/1.5 var(--body); }
.nt-form textarea { min-height: 62px; resize: vertical; }
.nt-form select { font-weight: 400; }
.nt-form textarea:focus, .nt-form select:focus { outline: none; border-color: var(--accent-line); }
.nt-form label { font-size: 12.5px; color: var(--fg-2); }
.nt-form .btn { justify-self: start; min-height: 36px; padding: 6px 14px; font-size: 13.5px; border-radius: 4px; }
.nt-c { color: var(--accent) !important; }
.nt-panel { display: grid; gap: 20px; padding-top: 16px; }
.nt-any { max-width: 640px; border: 1px solid var(--rule); border-radius: var(--radius); padding: 16px; background: var(--bg); }
.nt-groups { display: grid; gap: 22px; }
.nt-step { display: grid; gap: 12px; }
.nt-step > h3 { font-size: 19px; line-height: 1.2; padding-bottom: 8px; border-bottom: 1px solid var(--rule-2); }
.nt-dec { display: grid; gap: 8px; }
.nt-dec-h { display: flex; align-items: center; gap: 10px; background: none; border: 0; padding: 0; text-align: left; font: 500 14.5px var(--body); color: var(--heading); }
button.nt-dec-h { cursor: pointer; }
button.nt-dec-h:hover span:last-child { color: var(--accent); }
.nt-dec-h .dot { width: 24px; height: 24px; font-size: 12px; flex: none; }
.nt-dec-h .dia { margin: 0 6px; flex: none; }
.nt-dec .nt-list { margin-left: 34px; }

/* Notes in a Library article (Ed, 10 October 2026) */
.lib-nt { border: 1px solid var(--rule); border-radius: var(--radius); padding: 18px 20px; background: var(--bg); scroll-margin-top: 24px; }
.lib-nt .note { margin-top: -4px; }
.nt-src { color: var(--accent); text-decoration: underline; text-decoration-color: var(--accent-line); text-underline-offset: 2px; }
.nt-src:hover { text-decoration-thickness: 2px; }
a.nt-dec-h { text-decoration: none; }
a.nt-dec-h:hover span { color: var(--accent); }

/* ---------- The Foundations course, merged from exports/2026-10-10/mockups/foundations-course (Ed, 11 October 2026) ---------- */
:root { --crs-w: 340px; --crs-tint: #FBF6EE; }
.shell > .work, .shell > .crs-player { grid-column: 2; grid-row: 1; min-width: 0; }
@media (max-width: 960px) { .shell > .work, .shell > .crs-player { grid-column: 1; } }
.btn svg { width: 16px; height: 16px; flex: none; }
.btn.small { white-space: nowrap; }
body.in-player .rn-toggle { bottom: calc(84px + env(safe-area-inset-bottom, 0px)); }
.crs-page { display: grid; gap: 22px; }
/* ---------- The Courses page ---------- */
.crs-elsewhere { border: 1px dashed var(--rule-2); border-radius: 4px; padding: 12px 14px; font-size: 14px; color: var(--fg-2); margin-bottom: 18px; }
.crs-elsewhere a { color: var(--accent); }
.crs-page { display: grid; gap: 22px; }
.crs-panel { padding-top: 20px; display: grid; gap: 18px; }
.crs-quiet { font-size: 13.5px; color: var(--fg-2); }
/* A course the member holds: one wide card, the cover on the left */
.crs-mine { display: grid; grid-template-columns: minmax(220px, 340px) minmax(0, 1fr); gap: 0; padding: 0; overflow: hidden; align-items: stretch; }
.crs-mine > .crs-cover { aspect-ratio: auto; min-height: 260px; }
.crs-cover { position: relative; background: #0E1A33; color: #EDE7DA; aspect-ratio: 16 / 11; display: grid; align-content: space-between; padding: 22px; min-width: 0; }
.crs-cover::before { content: ""; position: absolute; inset: 10px; border: 1px solid rgba(207,156,99,.35); pointer-events: none; }
.crs-cover img { width: 74px; height: auto; position: relative; }
.crs-cover b { position: relative; font-family: var(--display); font-weight: 400; font-size: clamp(24px, 2.4vw, 30px); line-height: 1.08; color: #EDE7DA; }
.crs-cover span { position: relative; font-family: var(--label); font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: #CF9C63; }
.crs-body { padding: 22px 24px; display: grid; gap: 12px; align-content: start; min-width: 0; }
.crs-body h2 { font-size: clamp(25px, 2.4vw, 30px); line-height: 1.1; }
.crs-body > p { font-size: 14.5px; color: var(--fg-2); max-width: 60ch; }
.crs-meta { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 13px; color: var(--fg-2); }
.crs-meta span { display: inline-flex; align-items: center; gap: 7px; }
.crs-meta svg { width: 15px; height: 15px; color: var(--accent); }
.crs-prog { display: grid; gap: 7px; max-width: 420px; }
.crs-prog-l { font-size: 13px; color: var(--fg-2); font-variant-numeric: tabular-nums; }
.crs-prog-l b { font-weight: 500; color: var(--heading); }
.crs-bar { height: 5px; border-radius: 3px; background: rgba(14,26,51,.09); overflow: hidden; }
.crs-bar i { display: block; height: 100%; background: var(--accent-line); border-radius: 3px; }
.crs-next { border-top: 1px solid var(--rule); padding-top: 12px; display: grid; gap: 3px; }
.crs-next b { font-weight: 500; color: var(--heading); font-size: 15px; }
.crs-next small { font-size: 13px; color: var(--fg-2); }
.crs-acts { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
@media (max-width: 760px) { .crs-mine { grid-template-columns: minmax(0, 1fr); } .crs-mine > .crs-cover { aspect-ratio: 16 / 8; min-height: 0; } }
/* Every course, as a catalogue of cards */
.crs-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 360px)); gap: 18px; }
.crs-tile .crs-cover img { width: 52px; }
.crs-tile .crs-cover b { font-size: 25px; }
.crs-tile { padding: 0; overflow: hidden; gap: 0; }
.crs-tile .crs-cover { aspect-ratio: 16 / 10; }
.crs-tile-b { padding: 16px 18px 18px; display: grid; gap: 8px; }
.crs-tile-b h3 { font-family: var(--display); font-weight: 400; font-size: 21px; line-height: 1.15; color: var(--heading); }
.crs-tile-b p { font-size: 13.5px; color: var(--fg-2); }
.crs-chip { justify-self: start; display: inline-flex; align-items: center; gap: 6px; font-family: var(--label); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; padding: 3px 8px; border: 1px solid var(--rule-2); color: var(--fg-2); }
.crs-cpchip { padding: 3px 8px; }
.crs-chip.own { border-color: var(--accent-line); color: var(--accent); }
.crs-chip svg { width: 9px; height: 11px; }
.crs-buy { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 14px; border-top: 1px solid var(--rule); padding-top: 12px; margin-top: 4px; }
.crs-price { font-size: 13.5px; color: var(--fg-2); }
.crs-empty { border: 1px dashed var(--rule-2); border-radius: var(--radius); padding: 22px; display: grid; gap: 8px; justify-items: start; }
.crs-empty b { font-weight: 500; color: var(--heading); font-size: 16px; }
.crs-empty p { font-size: 14px; color: var(--fg-2); max-width: 58ch; }
.crs-outline { border-top: 1px solid var(--rule); padding-top: 10px; }
.crs-outline summary { cursor: pointer; font: 500 13.5px var(--body); color: var(--accent); list-style: none; }
.crs-outline summary::-webkit-details-marker { display: none; }
.crs-outline ol { margin: 10px 0 0; padding-left: 20px; display: grid; gap: 6px; font-size: 13.5px; }
.crs-outline li::marker { color: var(--accent); font-family: var(--label); font-size: .85em; }
.crs-outline li span { display: block; color: var(--fg-2); font-size: 12.5px; }

/* ---------- The course player ---------- */
.crs-player { display: grid; grid-template-columns: var(--crs-w) minmax(0, 1fr); min-height: 100vh; }
.crs-player.no-outline { grid-template-columns: minmax(0, 1fr); }
.crs-player.no-outline .crs-side { display: none; }
.crs-side { position: sticky; top: env(safe-area-inset-top, 0px); height: 100vh; overflow-y: auto; background: var(--bg); border-right: 1px solid var(--rule); display: flex; flex-direction: column; scrollbar-width: thin; }
.crs-side-h { position: sticky; top: 0; z-index: 2; background: var(--bg); padding: 22px 20px 16px; display: grid; gap: 14px; border-bottom: 1px solid var(--rule); }
.crs-side-h .mark { width: 54px; height: auto; }
.crs-side-h h2 { font-size: 26px; line-height: 1.1; }
.crs-side .crs-bar { background: rgba(216,207,188,.14); }
.crs-side .crs-prog-l b { color: var(--heading); }
.crs-find { position: relative; }
.crs-find input { width: 100%; background: var(--surface); color: var(--fg); border: 1px solid var(--rule-2); border-radius: 4px; padding: 9px 12px 9px 34px; font: 300 13.5px var(--body); }
.crs-find input::placeholder { color: var(--fg-2); opacity: .85; }
.crs-find input:focus { outline: none; border-color: var(--accent-line); }
.crs-find svg { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); width: 15px; height: 15px; color: var(--fg-2); }
.crs-tree { list-style: none; margin: 0; padding: 8px 10px 30px; display: grid; }
.crs-tree ul { list-style: none; margin: 0; padding: 0; }
.crs-ch { border-top: 1px solid var(--rule); }
.crs-ch:first-child { border-top: 0; }
.crs-ch-b { width: 100%; display: grid; grid-template-columns: 26px minmax(0, 1fr) 12px; gap: 12px; align-items: start; padding: 13px 10px; background: none; border: 0; border-radius: 6px; color: var(--fg); text-align: left; cursor: pointer; font: inherit; }
.crs-ch-b:hover .crs-ch-name { color: var(--accent); }
.crs-ch-t { display: grid; gap: 3px; min-width: 0; }
.crs-ch-k { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.crs-ch-name { font-size: 14.5px; font-weight: 500; line-height: 1.3; color: var(--heading); transition: color .15s; }
.crs-ch-m { font-size: 12px; color: var(--fg-2); font-variant-numeric: tabular-nums; }
.crs-ch-b > svg { width: 12px; height: 12px; margin-top: 8px; color: var(--fg-2); transition: transform .2s; }
.crs-ch.is-open > .crs-ch-b > svg { transform: rotate(90deg); color: var(--heading); }
.crs-you { font-family: var(--label); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); border: 1px solid var(--accent-line); border-radius: 3px; padding: 1px 6px; white-space: nowrap; }
/* Completion marks: an empty ring, a ring carrying the count, and a filled gold disc with a tick */
.crs-ring { width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--rule-2); display: grid; place-items: center; font-family: var(--label); font-size: 12px; color: var(--fg-2); font-variant-numeric: tabular-nums; flex: none; }
.crs-ring.is-part { border-color: var(--accent-line); color: var(--accent); }
.crs-ring.is-done { border-color: var(--accent-line); background: var(--accent-line); color: #0E1A33; }
.crs-ring svg { width: 12px; height: 12px; }
.crs-mods { padding: 0 6px 12px 46px !important; display: grid; gap: 2px; }
.crs-mod { font-family: var(--label); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--fg-2); padding: 12px 0 4px; line-height: 1.5; }
.crs-mod:first-child { padding-top: 2px; }
.crs-v { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 10px; align-items: start; padding: 8px 10px; margin-left: -10px; border-left: 2px solid transparent; border-radius: 0 4px 4px 0; color: var(--fg); text-decoration: none; font-size: 13.5px; line-height: 1.4; }
.crs-v:hover { background: rgba(216,207,188,.05); }
.crs-v[aria-current="true"] { background: rgba(207,156,99,.12); border-left-color: var(--accent-line); color: var(--heading); font-weight: 500; }
.crs-tick { width: 16px; height: 16px; margin-top: 1px; border-radius: 50%; border: 1px solid var(--rule-2); display: grid; place-items: center; }
.crs-v.is-done .crs-tick { background: var(--accent-line); border-color: var(--accent-line); color: #0E1A33; }
.crs-tick svg { width: 9px; height: 9px; }
.crs-v.is-done:not([aria-current]) { color: var(--fg-2); }
.crs-nohit { padding: 14px 10px; font-size: 13.5px; color: var(--fg-2); }
/* The When this happens track: a diamond, the Map's mark for an event, in place of the ring */
.crs-diam { width: 11px; height: 11px; transform: rotate(45deg); border: 1px solid var(--accent-line); flex: none; }
.crs-ring.is-track { border-color: transparent; }
.crs-ch.is-track { border-top: 1px dashed var(--rule-2); margin-top: 10px; padding-top: 4px; }
.crs-also { font-size: 12px; color: var(--fg-2); padding: 0 0 4px; line-height: 1.45; }
.crs-v.crs-ref { color: var(--fg-2); }
.crs-v.crs-ref .crs-tick { border: 0; }
.crs-v.crs-ref .crs-diam { width: 8px; height: 8px; margin: 4px 0 0 4px; }
/* A lesson that takes the member through a commitment point carries a labelled line above its title (Ed, eds-own 258) */
.crs-cpk { margin-bottom: 3px !important; }
.crs-pt { flex: none; width: 17px; height: 17px; border-radius: 50%; display: inline-grid; place-items: center; background: var(--accent-line); color: #0E1A33; font-family: var(--label); font-size: 12px; letter-spacing: 0; line-height: 1; }
.crs-v small { display: block; font-family: var(--label); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); margin-bottom: 2px; }

.crs-main { min-width: 0; display: flex; flex-direction: column; min-height: 100vh; background: var(--bg); }
.crs-main > .strip { position: relative; }
#crsBody { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.card .crs-link, .crs-pane > .crs-link { justify-self: start; }
.crs-bar-top { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 20; display: flex; align-items: center; gap: 10px 16px; padding: 12px clamp(16px, 3vw, 40px); background: rgba(247,245,240,.94); backdrop-filter: blur(6px); border-bottom: 1px solid var(--rule); }
.crs-back, .crs-tog { display: inline-flex; align-items: center; gap: 8px; background: none; border: 1px solid var(--rule-2); border-radius: 4px; padding: 7px 11px; font: 500 13px var(--body); color: var(--fg); text-decoration: none; cursor: pointer; white-space: nowrap; }
.crs-back:hover, .crs-tog:hover { border-color: var(--accent-line); color: var(--accent); }
.crs-back svg, .crs-tog svg { width: 15px; height: 15px; }
.crs-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-size: 13px; color: var(--fg-2); min-width: 0; }
.crs-crumbs .sep { opacity: .5; }
.crs-crumbs b { font-weight: 400; color: var(--heading); }
.crs-bar-top .crs-tog { margin-left: auto; }
.crs-menu { display: none !important; }
@media (max-width: 960px) { .crs-menu { display: inline-flex !important; } }
.crs-lesson { flex: 1; width: 100%; max-width: 980px; margin: 0 auto; padding: 28px clamp(16px, 3vw, 40px) 40px; display: grid; gap: 20px; align-content: start; }
.crs-head { display: grid; gap: 8px; }
.crs-head h1 { font-size: clamp(30px, 3.6vw, 44px); line-height: 1.06; text-wrap: balance; }
.crs-head-m { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; }
/* The video: a poster in the brand, never a stock photograph */
.crs-video { position: relative; aspect-ratio: 16 / 9; max-width: 100%; background: #0E1A33; color: #EDE7DA; border-radius: var(--radius); overflow: hidden; display: grid; grid-template-rows: auto 1fr auto; padding: clamp(16px, 3vw, 30px); box-shadow: 0 18px 40px rgba(14,26,51,.18); }
.crs-video::before { content: ""; position: absolute; inset: 12px; border: 1px solid rgba(207,156,99,.3); border-radius: 3px; pointer-events: none; }
.crs-video img { width: clamp(46px, 7vw, 70px); height: auto; position: relative; }
.crs-play { justify-self: center; align-self: center; width: clamp(58px, 9vw, 84px); height: clamp(58px, 9vw, 84px); border-radius: 50%; border: 1px solid #CF9C63; background: rgba(207,156,99,.1); display: grid; place-items: center; color: #CF9C63; cursor: pointer; position: relative; transition: background .2s; }
.crs-play:hover { background: rgba(207,156,99,.22); }
.crs-play svg { width: 34%; height: 34%; margin-left: 6%; }
.crs-video-t { position: relative; display: grid; gap: 6px; }
.crs-video-t span { font-family: var(--label); font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: #CF9C63; }
.crs-video-t b { font-family: var(--display); font-weight: 400; font-size: clamp(19px, 2.6vw, 30px); line-height: 1.12; color: #EDE7DA; max-width: 26ch; }
.crs-video-t small { font-size: 12px; color: #B4AE9F; }
.crs-tabs { margin-top: 4px; }
.crs-pane { padding-top: 20px; display: grid; gap: 18px; }
.crs-pane .prose { max-width: 66ch; font-size: 16px; }
.crs-h3 { font-family: var(--display); font-weight: 400; font-size: 21px; line-height: 1.2; color: var(--heading); }
.crs-chaps { margin: 0; padding-left: 22px; display: grid; gap: 8px; font-size: 15px; max-width: 62ch; }
.crs-chaps li::marker { color: var(--accent); font-family: var(--label); font-size: .85em; }
.crs-two { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; align-items: stretch; }
@media (max-width: 760px) { .crs-two { grid-template-columns: minmax(0, 1fr); } }
.crs-point { background: var(--crs-tint); border-color: rgba(184,132,77,.38); }
.crs-point .dot { flex: none; width: 30px; height: 30px; background: var(--accent-line); color: #0E1A33; }
.crs-point-h { display: flex; gap: 12px; align-items: flex-start; }
.crs-point-h b { display: block; font-weight: 500; color: var(--heading); font-size: 15.5px; line-height: 1.35; margin-top: 3px; }
.crs-pr b { font-family: var(--display); font-weight: 400; font-size: 21px; line-height: 1.2; color: var(--heading); }
.crs-pr p { font-size: 14px; color: var(--fg-2); }
.crs-later { color: var(--fg-2); font-size: 14.5px; border-left: 2px solid var(--rule-2); padding-left: 14px; max-width: 62ch; }
.crs-list { margin: 0; padding-left: 20px; display: grid; gap: 6px; font-size: 14.5px; max-width: 62ch; }
.crs-list li::marker { color: var(--accent); }
.crs-hold { border-left: 2px solid var(--accent-line); padding-left: 14px; display: grid; gap: 4px; max-width: 62ch; }
.crs-hold b { font-weight: 500; color: var(--heading); }
.crs-kit { border-style: dashed; background: transparent; }
.crs-actions { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; max-width: 70ch; counter-reset: act; }
.crs-actions li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 12px; align-items: start; border: 1px solid var(--rule); border-radius: 4px; background: var(--surface); padding: 14px 16px; }
.crs-actions input { width: 18px; height: 18px; margin-top: 3px; accent-color: #B8844D; }
.crs-actions label { display: grid; gap: 4px; cursor: pointer; }
.crs-actions b { font-weight: 500; color: var(--heading); font-size: 15px; line-height: 1.45; }
.crs-actions small { font-size: 13px; color: var(--fg-2); }
.crs-actions li.is-done b { color: var(--fg-2); text-decoration: line-through; text-decoration-color: var(--accent-line); }
.crs-tools { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)); gap: 16px; }
.crs-tool { gap: 10px; }
.crs-tool h4 { margin: 0; font-family: var(--display); font-weight: 400; font-size: 22px; line-height: 1.2; color: var(--heading); }
.crs-tool p { margin: 0; font-size: 14px; }
.crs-tool .lim { border-left: 2px solid var(--rule-2); padding-left: 12px; color: var(--fg-2); font-size: 13.5px; }
.crs-tool .crs-acts { justify-content: space-between; }
.crs-kit h4 { margin: 0; font-family: var(--display); font-weight: 400; font-size: 20px; line-height: 1.2; color: var(--accent-display); }
.crs-kit p { margin: 0; }
.crs-notes .note { max-width: 66ch; }
.crs-state { justify-self: start; font-family: var(--label); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--fg-2); border: 1px dashed var(--rule-2); padding: 2px 7px; }
.crs-notes .field textarea { min-height: 110px; border-radius: 4px; font-size: 14.5px; }
.crs-notes-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.crs-notes-list li { border: 1px solid var(--rule); border-radius: 4px; background: var(--surface); padding: 12px 14px; display: grid; gap: 6px; }
.crs-notes-list p { font-size: 14.5px; }
.crs-notes-list .m { display: flex; justify-content: space-between; gap: 10px; font-size: 12px; color: var(--fg-2); }
.crs-link { background: none; border: 0; padding: 0; font: 500 13px var(--body); color: var(--accent); cursor: pointer; text-decoration: none; }
.crs-link:hover { text-decoration: underline; text-underline-offset: 3px; }
.crs-arts { list-style: none; margin: 0; padding: 0; }
.crs-arts li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 18px; align-items: center; padding: 14px 0; border-top: 1px solid var(--rule); }
.crs-arts li:first-child { border-top: 0; padding-top: 4px; }
.crs-arts .s { display: block; font-family: var(--display); font-size: 19px; line-height: 1.22; color: var(--heading); }
.crs-arts .t { display: block; font-size: 14px; color: var(--fg-2); line-height: 1.5; margin-top: 2px; }
.crs-arts .m { display: block; font-family: var(--label); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--fg-2); margin-top: 4px; }
@media (max-width: 600px) { .crs-arts li { grid-template-columns: minmax(0, 1fr); } }
/* The bar beneath the lesson: back one video, or complete this one and continue */
.crs-foot { position: sticky; bottom: 0; z-index: 15; display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px clamp(16px, 3vw, 40px) calc(12px + env(safe-area-inset-bottom, 0px)); background: rgba(255,255,255,.96); backdrop-filter: blur(6px); border-top: 1px solid var(--rule); }
.crs-prev { display: grid; gap: 1px; text-align: left; background: none; border: 0; padding: 4px 0; color: var(--fg); cursor: pointer; font: inherit; min-width: 0; max-width: 46%; text-decoration: none; }
.crs-prev .pa-k { display: inline-flex; align-items: center; gap: 6px; }
.crs-prev .pa-k svg { width: 12px; height: 12px; }
.crs-prev span:last-child { font-size: 13.5px; color: var(--heading); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.crs-prev:hover span:last-child { color: var(--accent); }
.crs-done-btn { min-height: 46px; padding: 10px 20px; border-radius: 4px; font-size: 14.5px; margin-left: auto; white-space: nowrap; }
.crs-done-btn svg { width: 15px; height: 15px; }
/* Between modules: what the member now holds, and what comes next */
.crs-inter { flex: 1; width: 100%; max-width: 760px; margin: 0 auto; padding: clamp(28px, 6vw, 64px) clamp(16px, 3vw, 40px); display: grid; gap: 22px; align-content: start; }
.crs-inter-h { display: grid; gap: 10px; justify-items: start; }
.crs-big { width: 56px; height: 56px; border-radius: 50%; background: var(--accent-line); color: #0E1A33; display: grid; place-items: center; }
.crs-big svg { width: 24px; height: 24px; }
.crs-inter-h h1 { font-size: clamp(32px, 4vw, 46px); line-height: 1.05; }
.crs-inter-h p { font-size: 16px; color: var(--fg-2); }
@media (max-width: 940px) {
  .crs-player { grid-template-columns: minmax(0, 1fr); }
  .crs-side { position: fixed; z-index: 45; left: var(--side-w); top: 0; bottom: 0; width: min(360px, 90vw); height: auto; padding-top: env(safe-area-inset-top, 0px); transform: translateX(-104%); visibility: hidden; transition: transform .25s ease, visibility 0s linear .25s; box-shadow: 0 20px 60px rgba(0,0,0,.4); }
  .crs-player.no-outline .crs-side { display: flex; }
  /* Closed, the outline is wholly off screen and hidden, so no edge of it covers the menu bar (fixed 11 October 2026) */
  .crs-side.open { transform: none; visibility: visible; transition: transform .25s ease, visibility 0s; }
  .crs-scrim.open { display: block; position: fixed; inset: 0; z-index: 42; background: rgba(11,21,41,.5); }
  .shell.is-rail .crs-side { left: var(--rail-w); }
}
@media (max-width: 960px) { .crs-side, .shell.is-rail .crs-side { left: 0; } }
.crs-scrim { display: none; }
@media (max-width: 560px) {
  .crs-crumbs { display: none; }
  .crs-prev { max-width: 38%; }
  .crs-done-btn { padding: 10px 14px; }
}
@media (prefers-reduced-motion: reduce) { .side, .crs-side, .crs-ch-b > svg { transition: none; } }
/* The Project Map set-up inside the portal (eds-own 259): one question to a screen, large single-choice buttons,
   no progress bar (round 8, proposals 4 and 5), on the portal's own card surface */
.su { display: grid; justify-items: center; gap: 16px; }
.su-card { width: 100%; max-width: 660px; padding: clamp(22px, 4vw, 40px); gap: 16px; }
.su-sec { color: var(--accent); }
.su-card h2 { font-size: clamp(26px, 3vw, 34px); line-height: 1.12; }
.su-help { color: var(--fg-2); font-size: 15px; max-width: 58ch; }
.su-form { display: grid; gap: 4px; }
.su-two { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }
.su-form select { width: 100%; background: var(--field-bg); color: var(--fg); border: 1px solid var(--rule-2); padding: 12px 14px; font: 300 15px var(--body); border-radius: 0; }
.su-form select:focus { outline: none; border-color: var(--accent-line); }
.su-form .btns { margin-top: 10px; }
.su-choices { display: grid; gap: 10px; }
.su-choice { display: flex; justify-content: space-between; align-items: center; gap: 12px; min-height: 54px; padding: 13px 16px; text-align: left; background: var(--surface); border: 1px solid var(--rule-2); border-radius: 4px; color: var(--fg); font: 400 16px var(--body); cursor: pointer; }
.su-choice:hover { border-color: var(--accent-line); }
.su-choice[aria-pressed="true"] { border-color: var(--accent-line); background: #FBF6EE; }
.su-choice .tick { width: 18px; height: 18px; flex: none; border: 1px solid var(--rule-2); border-radius: 50%; }
.su-choice[aria-pressed="true"] .tick { background: var(--accent-line); border-color: var(--accent-line); }
.su-yn { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.su-yn .su-choice { justify-content: center; font-weight: 500; }
.su-yn .tick { display: none; }
.su-nav { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; border-top: 1px solid var(--rule); padding-top: 14px; margin-top: 4px; }
.su-back { background: none; border: 0; padding: 6px 0; color: var(--fg-2); font: 400 14px var(--body); cursor: pointer; }
.su-back:hover { color: var(--accent); }
.su-consent { display: grid; gap: 6px; margin: 6px 0 12px; padding: 14px 16px; border-left: 2px solid var(--accent-line); background: #FBF6EE; font-size: 14px; color: var(--fg-2); }
.su-consent b { color: var(--heading); font-weight: 500; }
.su-err { color: #9A3B2E; font-size: 14px; }
.su-before { border-top: 1px solid var(--rule); padding-top: 12px; }
.su-before summary { cursor: pointer; font-weight: 500; font-size: 14.5px; color: var(--heading); }
.su-before dl { margin: 10px 0 0; display: grid; }
.su-before dl > div { display: grid; grid-template-columns: 11rem minmax(0, 1fr); gap: 12px; padding: 9px 0; border-top: 1px solid var(--rule); font-size: 14px; }
.su-before dt { font-weight: 500; color: var(--heading); }
.su-before dd { margin: 0; color: var(--fg-2); }
.su-prov { border: 1px dashed var(--accent-line); padding: 10px 12px; font-size: 14px; margin-bottom: 6px; }
@media (max-width: 560px) { .su-yn { grid-template-columns: minmax(0, 1fr); } .su-two { grid-template-columns: minmax(0, 1fr); } .su-before dl > div { grid-template-columns: minmax(0, 1fr); gap: 2px; } }

/* The Toolkits screen, draft 2 (Ed, 11 October 2026: "i prefer like my old mock up"). A column of categories beside
   a shelf of tool cards, each with its own icon in a warm tile, its type, Open and a bookmark. Colours stay inside
   the locked palette: the types are told apart by tints of navy, gold and stone rather than by new colours. */

/* The tool icons: navy line, one gold part, and a tile-coloured fill for a shape that sits in front */
.tki { --tki-w: #F7F1E7; }
.tki .g { stroke: #B8844D; }
.tki .gf { fill: rgba(207,156,99,.34); stroke: #B8844D; }
.tki .gs { fill: #CF9C63; stroke: none; }
.tki .w { fill: var(--tki-w); }

/* The shell: the column of categories, then the shelf */
.tk-shell { display: grid; grid-template-columns: 252px minmax(0, 1fr); gap: 22px; align-items: start; }
.tk-nav { position: sticky; top: calc(18px + env(safe-area-inset-top, 0px)); max-height: calc(100vh - 36px); overflow-y: auto; scrollbar-width: thin; background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius); padding: 12px 10px 14px; }
.tk-nav-toggle { display: none; }
.tk-nav-body { display: grid; gap: 2px; }
.tk-nav-a { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 8px 10px; border-radius: 6px; color: var(--fg); text-decoration: none; font-size: 14px; line-height: 1.3; }
.tk-nav-a:hover { background: #F7F2E9; }
.tk-nav-a.is-on { background: #0E1A33; color: #EDE7DA; }
.tk-nav-a.is-on .tki { --tki-w: #0E1A33; }
.tk-nav-a.is-on .tk-nav-n, .tk-nav-a.is-on small { color: rgba(237,231,218,.72); }
.tk-nav-i { width: 28px; height: 28px; display: grid; place-items: center; color: var(--heading); }
.tk-nav-a.is-on .tk-nav-i { color: #EDE7DA; }
.tk-nav-i > svg { width: 17px; height: 17px; }
.tk-nav-step .ico, .tk-nav-ico .tki { width: 26px; height: 26px; display: block; }
.tk-nav-step .ico { color: currentColor; }
.tk-nav-ico .tki { --tki-w: var(--surface); }
.tk-nav-dot { width: 22px; height: 22px; border: 1px solid currentColor; border-radius: 50%; display: grid; place-items: center; font-size: 13px; line-height: 1; }
.tk-nav-l { min-width: 0; }
.tk-nav-l small { display: block; font-family: var(--label); font-size: 12px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--fg-2); margin-bottom: 1px; }
.tk-nav-n { font-size: 12px; color: var(--fg-2); font-variant-numeric: tabular-nums; }
.tk-nav-h { font-family: var(--label); font-size: 12px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--fg-2); padding: 14px 10px 6px; margin-top: 6px; border-top: 1px solid var(--rule); }
.tk-quick { margin-top: 14px; border: 1px solid rgba(184,132,77,.3); border-radius: 6px; background: #FBF7F0; padding: 14px; display: grid; gap: 10px; }
.tk-quick .pa-k { display: flex; align-items: center; gap: 7px; color: var(--heading); }
.tk-quick .pa-k svg { width: 14px; height: 14px; color: var(--accent); }
.tk-quick ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.tk-quick li a { display: flex; align-items: center; gap: 10px; color: var(--fg); text-decoration: none; font-size: 13px; line-height: 1.3; }
.tk-quick li a:hover { color: var(--accent); }
.tk-quick li small { display: block; color: var(--fg-2); font-size: 12px; margin-top: 1px; }
.tk-quick p:not(.pa-k) { font-size: 13px; color: var(--fg-2); }
.tk-quick .more svg { width: 13px; height: 13px; vertical-align: -2px; }
.tk-qi { flex: none; width: 30px; height: 30px; border-radius: 6px; background: #F7F1E7; border: 1px solid rgba(184,132,77,.25); display: grid; place-items: center; color: #0E1A33; }
.tk-qi .tki { width: 22px; height: 22px; }

/* The bar above the shelf */
.tk-main { min-width: 0; }
.tk-bar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.tk-find { position: relative; flex: 1 1 220px; min-width: 0; }
.tk-find svg { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; color: var(--fg-2); }
.tk-find input { width: 100%; background: var(--surface); color: var(--fg); border: 1px solid var(--rule-2); border-radius: 4px; padding: 10px 12px 10px 36px; font: 300 14px var(--body); }
.tk-find input:focus, .tk-sel:focus { outline: none; border-color: var(--accent-line); }
.tk-sel { appearance: none; -webkit-appearance: none; background: var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3 4.5 6 7.5 9 4.5' fill='none' stroke='%2357514A' stroke-width='1.4'/%3E%3C/svg%3E") no-repeat right 10px center / 12px; border: 1px solid var(--rule-2); border-radius: 4px; padding: 10px 32px 10px 12px; font: 400 13.5px var(--body); color: var(--fg); max-width: 210px; min-width: 0; text-overflow: ellipsis; cursor: pointer; }
.tk-sel-wide { max-width: 250px; }
.tk-lay { display: inline-flex; border: 1px solid var(--rule-2); border-radius: 4px; overflow: hidden; }
.tk-lay button { width: 40px; height: 39px; display: grid; place-items: center; background: var(--surface); border: 0; color: var(--fg-2); cursor: pointer; }
.tk-lay button + button { border-left: 1px solid var(--rule-2); }
.tk-lay button svg { width: 16px; height: 16px; }
.tk-lay button[aria-pressed="true"] { background: #0E1A33; color: #EDE7DA; }
.tk-howto { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--rule-2); border-radius: 4px; background: var(--surface); padding: 9px 13px; font: 500 13px var(--body); color: var(--heading); cursor: pointer; white-space: nowrap; }
.tk-howto svg { width: 16px; height: 16px; color: var(--accent); }
.tk-howto:hover, .tk-howto[aria-expanded="true"] { border-color: var(--accent-line); }
.tk-help { margin-top: 12px; border: 1px solid rgba(184,132,77,.35); background: #FBF6EE; border-radius: 6px; padding: 16px 18px; }
.tk-help ol { margin: 0; padding-left: 20px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 28px; font-size: 14px; line-height: 1.5; }
.tk-help li::marker { color: var(--accent); font-family: var(--label); font-size: .85em; }
.tk-help b { font-weight: 500; color: var(--heading); }
@media (max-width: 900px) { .tk-help ol { grid-template-columns: minmax(0, 1fr); } }

/* The shelf */
.tk-body { display: grid; gap: 26px; padding-top: 22px; min-width: 0; }
.tk-sec-h { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px 20px; flex-wrap: wrap; }
.tk-sec-h h2 { font-size: 23px; line-height: 1.2; display: flex; align-items: center; gap: 9px; }
.tk-sec-h h2 svg { width: 17px; height: 17px; color: var(--accent); flex: none; }
.tk-sec-h p { font-size: 13.5px; color: var(--fg-2); margin-top: 4px; max-width: 70ch; }
.tk-pt-head { border-bottom: 1px solid var(--accent-line); padding-bottom: 14px; }
.tk-pinned { display: grid; gap: 14px; }
/* The saved tools stand apart from the shelf (Ed, 11 October 2026: "make the saved tools section visually separated
   from the bottom, make it hightlighted"). The navy band was too much (Ed, same day), so the band takes the warm
   tint and gold edge that mark the member's own step on the Library and the Project Map (eds-own 199), with space
   and a rule beneath it before the shelf begins */
.tk-pinned { background: #FBF6EE; border: 1px solid rgba(184,132,77,.38); border-top: 3px solid #CF9C63; border-radius: var(--radius); padding: clamp(18px, 2.4vw, 26px); gap: 16px; margin-bottom: 12px; }
.tk-pinned .tk-sec-h h2 svg { color: var(--accent); }
.tk-pinned .tk-card { border-color: rgba(184,132,77,.22); box-shadow: 0 6px 18px rgba(14,26,51,.06); }
.tk-pinned .tk-card:hover { border-color: rgba(184,132,77,.6); }
.tk-pinned .tk-pack-strip { background: #FFFFFF; }
.tk-pinned + .tk-chips { padding-top: 22px; border-top: 1px solid var(--rule-2); }
.tk-shelf { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 14px; align-items: stretch; }
.tk-card { position: relative; background: var(--surface); border: 1px solid var(--rule); border-radius: 8px; padding: 14px 14px 13px; display: grid; grid-template-rows: auto auto auto auto auto; align-content: start; gap: 9px; min-width: 0; height: 100%; box-sizing: border-box; transition: border-color .15s, box-shadow .15s; }
.tk-card:hover { border-color: rgba(184,132,77,.55); box-shadow: 0 10px 26px rgba(14,26,51,.08); }
.tk-card-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; }
.tk-card-tr { display: flex; align-items: center; gap: 8px; }
.tk-ico { flex: none; width: 56px; height: 56px; border-radius: 10px; background: #F7F1E7; border: 1px solid rgba(184,132,77,.28); display: grid; place-items: center; color: #0E1A33; }
.tk-ico .tki { width: 42px; height: 42px; }
/* Every card is the same size wherever it sits (Ed, 11 October 2026): two lines held for the name, three for the
   line under it, one for the tags, whatever each tool's own wording needs */
.tk-card h4 { margin: 2px 0 0; font: 500 15px/1.3 var(--body); color: var(--heading); letter-spacing: 0; min-height: 2.6em; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.tk-card h4 a { color: inherit; text-decoration: none; }
.tk-card h4 a:hover { color: var(--accent); }
.tk-short, .card .tk-card .tk-short { font-size: 12.5px; line-height: 1.45; color: var(--fg-2); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; min-height: 4.35em; }
.tk-card-meta { display: flex; flex-wrap: nowrap; align-items: center; gap: 8px; min-height: 22px; min-width: 0; overflow: hidden; }
.tk-card-meta .tk-pt { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.tk-card-meta .state { flex: none; }
.tk-pt { font-size: 12px; color: var(--fg-2); }
.tk-card-acts { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; border-top: 1px solid var(--rule); padding-top: 11px; }
.tk-card-acts .btn.small { min-height: 34px; padding: 6px 16px; font-size: 13.5px; }
.tk-card-acts .state { margin-left: auto; }
.tk-used, .tk-lock { display: inline-grid; place-items: center; color: var(--fg-2); }
.tk-used svg { width: 15px; height: 15px; color: var(--accent); }
.tk-lock svg { width: 10px; height: 12px; }
.tk-save { flex: none; width: 32px; height: 32px; display: grid; place-items: center; background: none; border: 1px solid var(--rule-2); border-radius: 4px; color: var(--fg-2); cursor: pointer; }
.tk-save svg { width: 14px; height: 14px; }
.tk-save:hover { border-color: var(--accent-line); color: var(--accent); }
.tk-save[aria-pressed="true"] { border-color: var(--accent-line); color: var(--accent); background: rgba(207,156,99,.12); }
.tk-save[aria-pressed="true"] svg path { fill: currentColor; }
.tk-save-l { width: auto; display: inline-flex; gap: 6px; padding: 0 12px; height: 40px; font: 400 14px var(--body); color: var(--fg); }

/* A tool the account cannot open: greyed, with nothing to click (Ed, 11 October 2026: "free account can see the greyed
   out tool, but cannot click into it and view"), as the Library greys its members-only articles. Same size as the rest */
.tk-card.is-locked { background: #FBFAF7; cursor: pointer; }
.tk-card.is-locked:hover { border-color: var(--rule); box-shadow: none; }
/* Locked shows as the lock line and a muted icon, never as faded words (interface review, 13 October 2026, finding 4) */
.tk-card.is-locked .tk-card-top .tk-ico { opacity: .55; }
.tk-card.is-locked h4 { color: var(--fg-2); }
.tk-card.is-locked .tk-ico, .tk-lrow.is-locked .tk-ico, .tk-rec-icons .is-locked, .pa-kit-a.is-locked .tk-qi, .tk-next-i li.locked .tk-qi { filter: grayscale(1); }
.tk-locknote { display: inline-flex; align-items: center; gap: 7px; min-height: 36px; min-width: 0; font-size: 12.5px; color: var(--fg-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tk-locknote svg { width: 9px; height: 11px; flex: none; }
.tk-lrow.is-locked { cursor: pointer; }
.tk-lrow.is-locked .tk-ico { opacity: .55; }
.tk-lrow.is-locked .tk-lrow-t b { color: var(--fg-2); }
.tk-pinned .tk-card.is-locked { background: #FBFAF7; box-shadow: none; }
.tk-rec-icons .is-locked { width: 42px; height: 42px; border-radius: 8px; background: #F7F1E7; border: 1px solid rgba(184,132,77,.28); display: grid; place-items: center; color: #0E1A33; opacity: .55; }
.tk-rec-icons .is-locked .tki { width: 30px; height: 30px; }
.tk-next-i li.locked .tk-qi { opacity: .7; }
.tk-pk-own svg { width: 13px; height: 13px; color: var(--accent); }
.tk-quick-sub { margin-top: 4px; }
.tk-sec-h h2 svg { flex: none; }

/* The tool named on each decision card of the Project Map (Ed, 11 October 2026: "only the most relevant ones") */
.pa-kit { padding: 12px 20px 4px; display: grid; gap: 8px; border-top: 1px solid var(--rule); }
.pa-ev .pa-kit { padding-inline: 0; }
.pa-kit-a { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: center; border: 1px solid rgba(184,132,77,.3); border-radius: 6px; background: #FFFFFF; padding: 10px 12px; color: var(--fg); text-decoration: none; max-width: 560px; }
a.pa-kit-a:hover { border-color: var(--accent-line); }
a.pa-kit-a:hover b { color: var(--accent); }
.pa-kit-a .tk-qi { width: 40px; height: 40px; border-radius: 8px; }
.pa-kit-a .tk-qi .tki { width: 30px; height: 30px; }
.pa-kit-t { display: grid; gap: 2px; min-width: 0; }
.pa-kit-t b { font-weight: 500; font-size: 14.5px; color: var(--heading); }
.pa-kit-t small { font-size: 12.5px; color: var(--fg-2); line-height: 1.45; display: flex; gap: 6px; align-items: baseline; }
.pa-kit-t small svg { width: 9px; height: 11px; flex: none; }
.pa-kit-a .go { color: var(--fg-2); }
.pa-kit-a.is-locked { background: #FBFAF7; border-color: var(--rule); cursor: pointer; }
.pa-kit-a.is-locked b { color: var(--fg-2); }

/* The types, told apart inside the palette */
.tk-type { display: inline-flex; align-items: center; font-family: var(--label); font-size: 12px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; padding: 3px 8px; border-radius: 3px; border: 1px solid transparent; white-space: nowrap; }
.tk-type-checklist { background: #EFE9DD; color: #4A443D; }
.tk-type-comparison { background: rgba(207,156,99,.22); color: #87582A; }
.tk-type-worksheet { background: rgba(14,26,51,.07); color: #0E1A33; }
.tk-type-questions { background: #FBF9F5; border-color: rgba(26,24,23,.22); border-style: dashed; color: #57514A; }
.tk-type-template { background: #FFFFFF; border-color: rgba(184,132,77,.55); color: #87582A; }
.tk-type-record { background: #0E1A33; color: #EDE7DA; }

/* A step, and the commitment points inside it */
.tk-chips { gap: 8px; }
.tk-chips .chip { text-decoration: none; display: inline-flex; align-items: center; gap: 6px; }
.tk-chips .chip b { font-weight: 600; }
.tk-step { display: grid; gap: 14px; }
.tk-step-h { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 14px; align-items: center; border-bottom: 1px solid var(--accent-line); padding-bottom: 12px; }
.tk-step-ico { width: 46px; height: 46px; display: grid; place-items: center; color: var(--heading); }
.tk-step-ico .ico { width: 44px; height: 44px; color: var(--heading); }
.tk-step-h .pa-k { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.tk-step-h h2 { font-size: 25px; line-height: 1.15; margin-top: 3px; }
.tk-pk-line { display: flex; align-items: center; gap: 7px; font-size: 13px; color: var(--fg-2); margin-top: 6px; }
.tk-pk-line svg { width: 9px; height: 11px; flex: none; }
.tk-pk-line b { font-weight: 500; color: var(--heading); }
.tk-pt-h { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 12px; margin-top: 4px; }
.tk-cp { flex-basis: 100%; font-family: var(--label); font-size: 12px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); }
.tk-pt-h h3 { font: 500 16.5px/1.3 var(--body); color: var(--heading); letter-spacing: 0; }
.tk-pt-h h3 a { color: inherit; text-decoration: none; }
.tk-pt-h h3 a:hover { color: var(--accent); }
.tk-pt-n { margin-left: auto; font-size: 12px; color: var(--fg-2); }
.tk-count, .tk-none { font-size: 13px; color: var(--fg-2); }
.tk-none { font-size: 14.5px; padding: 8px 0; }

/* The list layout */
.tk-lrows { list-style: none; margin: 0; padding: 0; background: var(--surface); border: 1px solid var(--rule); border-radius: 8px; }
/* Four columns since the Point tag left the row (interface review, 13 October 2026): icon, name, type, actions */
.tk-lrow { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto auto; gap: 14px; align-items: center; padding: 12px 16px; border-top: 1px solid var(--rule); }
.tk-lrow:first-child { border-top: 0; }
.tk-lrow-t { display: grid; gap: 2px; min-width: 0; color: inherit; text-decoration: none; }
.tk-lrow-t b { font: 500 15px/1.3 var(--body); color: var(--heading); }
.tk-lrow-t:hover b { color: var(--accent); }
.tk-lrow-t span { font-size: 13px; color: var(--fg-2); line-height: 1.45; }
.tk-lrow-acts { display: flex; gap: 8px; align-items: center; justify-content: flex-end; }
.tk-lrow-acts .btn.small { min-height: 34px; padding: 6px 14px; font-size: 13.5px; }
@media (max-width: 760px) { .tk-lrow { grid-template-columns: 56px minmax(0, 1fr); } .tk-lrow > .tk-type, .tk-lrow > .tk-pt { display: none; } .tk-lrow-acts { grid-column: 2; justify-content: flex-start; } }

/* For a free account: the package for the step, and how a tool opens */
.tk-pack-strip { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px 20px; border: 1px solid rgba(184,132,77,.42); background: #FBF6EE; border-radius: 6px; padding: 14px 16px; }
.tk-pack-strip > div:first-child { display: flex; gap: 9px; align-items: baseline; font-size: 14px; max-width: 70ch; }
.tk-pack-strip > div:first-child svg { width: 10px; height: 12px; flex: none; color: var(--accent); }
.tk-pack-strip b { font-weight: 500; color: var(--heading); }
.tk-buy { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
.tk-buy .pa-msg { flex-basis: 100%; }
.tk-buy .pa-msg:empty { display: none; }
.tk-lockp { max-width: 74ch; }
.tk-pack-icons, .tk-rec-icons { display: flex; flex-wrap: wrap; gap: 8px; }
.tk-pack-icons a, .tk-rec-icons a { width: 42px; height: 42px; border-radius: 8px; background: #F7F1E7; border: 1px solid rgba(184,132,77,.28); display: grid; place-items: center; color: #0E1A33; }
.tk-pack-icons a:hover, .tk-rec-icons a:hover { border-color: var(--accent-line); }
.tk-pack-icons .tki, .tk-rec-icons .tki { width: 30px; height: 30px; }

/* The overview's Saved toolkits card */
.mini a.row { color: var(--fg); text-decoration: none; }
.mini a.row:hover .tt { color: var(--accent); }
.mini .go { color: var(--fg-2); }
.tk-mini-ico { width: 34px; height: 34px; border-radius: 7px; background: #F7F1E7; border: 1px solid rgba(184,132,77,.25); display: grid; place-items: center; color: #0E1A33; }
.tk-mini-ico .tki { width: 25px; height: 25px; }
.tk-shelf-saved { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); padding-top: 14px; }

/* One tool's page */
.tk-page { padding: clamp(22px, 3.4vw, 40px); gap: 22px; }
.tk-head { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: 16px 24px; }
.tk-ico-l { width: 84px; height: 84px; border-radius: 14px; }
.tk-ico-l .tki { width: 64px; height: 64px; }
.tk-head-t { display: grid; gap: 8px; min-width: 0; }
.tk-head-k { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.tk-head h2 { font-size: clamp(30px, 3.4vw, 42px); line-height: 1.08; }
.tk-head .lib-lead { max-width: 60ch; }
.tk-top-acts { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 6px; }
.tk-page-msg:empty { display: none; }
@media (max-width: 560px) { .tk-head { grid-template-columns: minmax(0, 1fr); } .tk-ico-l { width: 68px; height: 68px; } .tk-ico-l .tki { width: 52px; height: 52px; } }
.tk-sec { display: grid; gap: 14px; border-top: 1px solid var(--rule); padding-top: 20px; }
.tk-sec > h3 { font-size: 22px; line-height: 1.2; }
.tk-open-block { margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 28px; }
.tk-open-block > div { display: grid; gap: 4px; align-content: start; }
.tk-open-block > div:first-child, .tk-open-block > div:last-child { grid-column: 1 / -1; }
.tk-open-block dt { font-family: var(--label); font-size: 12px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--fg-2); }
.tk-open-block dd { margin: 0; font-size: 15px; line-height: 1.55; max-width: 72ch; }
.tk-open-block > div:last-child dd { border-left: 2px solid var(--accent-line); padding-left: 12px; color: var(--fg-2); font-size: 14.5px; }
.tk-tbc { color: var(--fg-2); font-style: italic; }
@media (max-width: 760px) { .tk-open-block { grid-template-columns: minmax(0, 1fr); } }
.tk-frame { border: 1px solid var(--rule-2); border-radius: var(--radius); padding: 20px 22px; background: var(--bg); }
.tk-frame-h { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.tk-mock { font-size: 13px; color: var(--fg-2); border: 1px dashed var(--rule-2); border-radius: 4px; padding: 9px 12px; }
.tk-mock a { color: var(--accent); font-weight: 500; text-decoration: none; display: inline-flex; align-items: center; gap: 5px; }
.tk-mock a:hover { text-decoration: underline; text-underline-offset: 3px; }
.tk-mock a svg { width: 13px; height: 13px; }
.tk-sect { display: flex; align-items: center; gap: 12px; font-family: var(--display); font-size: 19px; color: var(--heading); }
.tk-bar-ph { display: block; height: 8px; border-radius: 4px; background: rgba(14,26,51,.09); margin-top: 7px; }
.tk-sect .tk-bar-ph { margin-top: 0; flex: none; height: 10px; }
.tk-fitems { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.tk-fitem { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 14px; border: 1px solid var(--rule); border-radius: 4px; background: var(--surface); padding: 16px 18px; }
.tk-no { font-family: var(--label); font-size: 12px; letter-spacing: .08em; color: var(--accent); padding-top: 2px; }
.tk-parts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 22px; }
.tk-ans { grid-column: 1 / -1; display: grid; gap: 6px; }
.tk-ans input { font: 400 14.5px var(--body); color: var(--fg); background: var(--field-bg); border: 1px solid var(--rule-2); border-radius: 4px; padding: 10px 12px; }
.tk-ans input:focus { outline: none; border-color: var(--accent-line); }
.tk-closing { display: grid; gap: 4px; border-left: 2px solid var(--accent-line); padding-left: 14px; }
.tk-closing .tk-mock { margin-top: 8px; }
@media (max-width: 760px) { .tk-parts { grid-template-columns: minmax(0, 1fr); } .tk-fitem { grid-template-columns: minmax(0, 1fr); gap: 6px; } }
.tk-limit { max-width: 80ch; }
.tk-prov { font-size: 13px; }
.tk-next-g { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr)); gap: 14px; }
.tk-next-i { display: grid; gap: 8px; align-content: start; border: 1px solid var(--rule); border-radius: 4px; padding: 14px 16px; }
.tk-next-i > a { display: grid; gap: 3px; text-decoration: none; color: var(--fg); }
.tk-next-i > a b { font-family: var(--display); font-weight: 400; font-size: 18px; line-height: 1.25; color: var(--heading); }
.tk-next-i > a:hover b { color: var(--accent); }
.tk-next-i > a span { font-size: 12.5px; color: var(--fg-2); }
.tk-next-i ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.tk-next-i li { font-size: 14px; line-height: 1.4; }
.tk-next-i li a { color: var(--fg); text-decoration: none; display: flex; align-items: center; gap: 10px; }
.tk-next-i li a:hover { color: var(--accent); }
.tk-next-i li.locked { display: flex; gap: 7px; align-items: baseline; color: var(--fg-2); opacity: .62; }
.tk-next-i li.locked svg { width: 9px; height: 11px; flex: none; }

/* Narrow: the column of categories folds into one bar above the shelf, as the Library's browse panel does */
@media (max-width: 1100px) {
  .tk-shell { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .tk-nav { position: static; max-height: none; padding: 0; overflow: visible; }
  .tk-nav-toggle { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: center; width: 100%; background: none; border: 0; padding: 14px 18px; text-align: left; cursor: pointer; color: var(--heading); font: 500 14.5px var(--body); }
  .tk-nav-toggle small { display: block; font-weight: 400; font-size: 12.5px; color: var(--fg-2); margin-top: 2px; }
  .tk-nav-toggle svg { width: 12px; height: 12px; transition: transform .2s; }
  .tk-nav.open .tk-nav-toggle svg { transform: rotate(90deg); }
  .tk-nav-body { display: none; padding: 0 10px 14px; }
  .tk-nav.open .tk-nav-body { display: grid; }
  .tk-howto { margin-left: 0; }
}
@media (max-width: 560px) {
  .tk-shelf { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .tk-card { padding: 12px 12px 11px; }
  .tk-ico { width: 48px; height: 48px; }
  .tk-ico .tki { width: 36px; height: 36px; }
  .tk-sel { max-width: none; flex: 1 1 140px; width: 100%; }
  .tk-sel-wide { flex-basis: 100%; }
}
.tk-shell a:focus-visible, .tk-shell button:focus-visible, .tk-shell select:focus-visible { outline: 2px solid var(--accent-line); outline-offset: 2px; }

/* Interface review, 13 October 2026: order and layout in one menu (finding 2); on a phone, the filters behind one button (finding 1) */
.tk-bar-more { display: contents; }
.tk-filt { display: none; align-items: center; gap: 8px; border: 1px solid var(--rule-2); border-radius: 4px; background: var(--surface); padding: 10px 14px; font: 500 13.5px var(--body); color: var(--heading); cursor: pointer; }
.tk-filt svg { width: 16px; height: 16px; color: var(--accent); }
.tk-filt[aria-expanded="true"] { border-color: var(--accent-line); }
.tk-viewm { position: relative; }
.tk-viewm > summary { list-style: none; display: inline-flex; align-items: center; gap: 8px; height: 41px; border: 1px solid var(--rule-2); border-radius: 4px; background: var(--surface); padding: 0 13px; font: 500 13px var(--body); color: var(--heading); cursor: pointer; }
.tk-viewm > summary::-webkit-details-marker { display: none; }
.tk-viewm > summary svg { width: 16px; height: 16px; color: var(--fg-2); }
.tk-viewm[open] > summary { border-color: var(--accent-line); }
.tk-viewm-p { position: absolute; z-index: 30; top: calc(100% + 6px); left: 0; min-width: 220px; display: grid; gap: 2px; padding: 10px; background: var(--surface); border: 1px solid var(--rule-2); border-radius: 6px; box-shadow: 0 12px 28px rgba(14,26,51,.14); }
.tk-viewm-p .pa-k { padding: 6px 8px 2px; }
.tk-viewm-p button { display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 0 10px; background: none; border: 0; border-radius: 4px; font: 400 14px var(--body); color: var(--fg); text-align: left; cursor: pointer; }
.tk-viewm-p button svg { width: 16px; height: 16px; color: var(--fg-2); }
.tk-viewm-p button:hover { background: rgba(14,26,51,.05); }
.tk-viewm-p button[aria-pressed="true"] { color: var(--heading); font-weight: 500; background: rgba(184,132,77,.1); }
@media (max-width: 760px) {
  .tk-filt { display: inline-flex; }
  .tk-bar-more { display: none; }
  .tk-bar.is-open .tk-bar-more { display: flex; flex-wrap: wrap; gap: 10px; width: 100%; }
  .tk-bar.is-open .tk-bar-more .tk-sel { flex: 1 1 100%; max-width: none; width: 100%; }
  .tk-bar.is-open .tk-howto { margin-left: 0; }
}


/* ---------- Interface review, 13 October 2026 (Ed chose fixes 1 to 10) ---------- */
/* Finding 1: on a phone every screen but the overview starts on its content */
.lib-up { display: none; }
@media (max-width: 960px) {
  #portal:not([data-screen="overview"]) .top-l .hi, #portal:not([data-screen="overview"]) .top-l .vsub { display: none !important; }
  #portal:not([data-screen="overview"]) .top { margin-bottom: 16px; }
  .top-l { width: 100%; } /* the Menu bar keeps its full width on every screen */
  .lib-crumbs { display: none; }
  .lib-up { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; margin: -6px 0 2px; font: 500 14px var(--body); color: var(--accent); text-decoration: none; }
  .lib-up svg { width: 12px; height: 12px; flex: none; }
  #portal[data-screen="library"][data-lib="art"] .top-r, #portal[data-screen="library"][data-lib="art"] #libBrowse { display: none !important; }
}
/* Finding 3: the note a locked item shows when tapped */
[data-lockmsg] { cursor: pointer; }
[data-lockmsg]:focus-visible { outline: 2px solid var(--accent-line); outline-offset: 2px; }
.lockpop { position: absolute; z-index: 70; display: flex; gap: 10px; align-items: flex-start; background: #0E1A33; color: #EDE7DA; border-radius: 6px; padding: 12px 14px; font: 400 13.5px/1.5 var(--body); box-shadow: 0 12px 32px rgba(14,26,51,.28); }
.lockpop svg { width: 10px; height: 12px; flex: none; margin-top: 4px; color: #CF9C63; }
.lockpop a { color: #CF9C63; font-weight: 500; white-space: nowrap; }
/* Finding 7: before the account exists, the bar shows only the logo */
.shell.pre-account .side-nav, .shell.pre-account .side-foot, .shell.pre-account .side > .rn, .shell.pre-account .side-fold, .shell.pre-account .side-later { display: none !important; }
.shell.pre-account .burger { display: none !important; }
/* Finding 8: the name beside a folded icon */
.rail-tip { position: fixed; z-index: 80; transform: translateY(-50%); background: #0E1A33; color: #EDE7DA; border: 1px solid rgba(216,207,188,.28); border-radius: 4px; padding: 6px 10px; font: 500 13px var(--body); white-space: nowrap; pointer-events: none; box-shadow: 0 8px 20px rgba(0,0,0,.25); }
/* Finding 9: a short link is still easy to tap: the area grows, the layout does not */
.more { position: relative; }
.more::after { content: ""; position: absolute; inset: -12px -8px; }
/* Fix 11: what membership adds, in one card for a free account */
.ov-adds { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.ov-adds li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 12px; align-items: start; }
.ov-adds .ui { width: 20px; height: 20px; color: var(--accent); margin-top: 1px; }
.ov-adds b { display: block; font-weight: 500; font-size: 14px; color: var(--heading); line-height: 1.4; }
.ov-adds small { display: block; font-size: 13px; color: var(--fg-2); line-height: 1.5; margin-top: 2px; }
/* The Map screen's drawing (Ed, 14 October 2026): the homepage's .pl-* drawing, made personal, on the light card so
   the Dial's navy band stays the one dark block on the screen (Ed: "it looks like two big block of blue") */
.mv-route.t-white { background: #FFFFFF; }
.mv-route .pl-step.on { background: #FBF6EE; }
.mv-route .pl-pts::before { opacity: .28; }
.mv-route .pl-n { font-size: 12px; }
/* The portal is narrower than the homepage, so the one-decision steps take a little more of the width */
.mv-route .pl-grid, .mv-route .pl-ev-grid { grid-template-columns: 4.1fr 2.2fr 4.4fr 4.1fr 2.2fr 2.2fr; }
/* Room for the labels (Ed, 14 October 2026: "the text spacing is not good in the flow chart"): Step 3, whose decision 8
   carries the longest label, takes more of the width; the row above the line holds five lines, so a label never runs
   up into its step's name; and a label at the edge of its step may be a little wider, still inside the step */
.mv-route .pl-pts { padding-inline: 4px; }
.mv-route .pl-pts li { grid-template-rows: 84px 27px auto; }
.mv-route .pl-pts::before { top: 114.5px; }
.mv-route .pl-pts li .lbl { width: 128%; line-height: 1.4; text-wrap: balance; }
.mv-route .pl-pts li:not(:first-child):not(:last-child) .lbl { width: 175%; }
.mv-route .pl-pts li:only-child .lbl { width: 100%; }
.mv-route .pl-head { padding-bottom: 16px; }
.mv-route .pl-legend .dot.pl-past { opacity: .6; }
.mv-route .dot { font-size: 12px; }
.mv-route .pl-head { cursor: default; }
.mv-route .pl-head:hover .pl-name { color: inherit; }
.mv-route .pl-step.past .pl-n, .mv-route .pl-step.past .pl-name, .mv-route .pl-step.past .lbl { color: var(--fg-2); }
.mv-route .pl-step.past .dot { opacity: .6; }
.mv-route .pl-step.on .pl-name { color: var(--heading); font-weight: 500; }
.mv-route .pl-pts li[role="button"] { cursor: pointer; }
.mv-route .pl-pts li[role="button"]:hover .lbl { color: var(--accent); }
.mv-route .pl-pts li[role="button"]:focus-visible { outline: 2px solid var(--accent-line); outline-offset: 4px; border-radius: 4px; }
.mv-route .pl-pts li.is-next .dot { box-shadow: 0 0 0 4px rgba(207,156,99,.28); }
.mv-route .pl-pts li.is-next .lbl { font-weight: 500; }
.mv-route .ev[role="button"] { cursor: pointer; }
.mv-route .ev[role="button"]:hover .lbl { color: var(--accent); }
.mv-route .ev.on .lbl { color: var(--fg); }
.mv-route .pl-legend .pl-you { width: 16px; height: 12px; background: var(--accent-soft); border-top: 2px solid var(--accent-line); display: inline-block; }
.mv-route .pl-legend { padding-inline: 0; }
.mv-route > .note { color: var(--fg-2); }
@media (max-width: 1180px) {
  .mv-route .pl-grid { display: block; }
  .mv-route .pl-step { display: block; border-left: 0; border-top: 1px solid var(--rule); }
  .mv-route .pl-step:first-child { border-top: 0; }
  .mv-route .pl-head { padding: 14px 18px 6px; }
  .mv-route .pl-pts { flex-direction: column; padding: 6px 18px 18px 18px; gap: 12px; }
  .mv-route .pl-pts::before { left: 31px !important; right: auto !important; top: 12px; bottom: 30px; width: 1px; height: auto; }
  .mv-route .pl-pts li { display: flex; flex-direction: row; text-align: left; gap: 14px; padding: 0; align-items: center; }
  .mv-route .pl-pts li .lbl { width: auto !important; max-width: none; font-size: 13.5px; }
  .mv-route .pl-pts li .dot { flex: none; }
  .mv-route .pl-ends { display: none; }
  .mv-route .pl-ev-grid { display: flex; flex-direction: column; gap: 12px; padding: 0 18px 8px; }
  .mv-route .pl-ev-grid::before { display: none; }
  .mv-route .ev { grid-column: auto !important; flex-direction: row; text-align: left; gap: 16px; padding: 0 0 0 7px; }
}
/* The simplified Overview (Ed, 14 October 2026): three cards of one size under the Map band */
.ov-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; align-items: stretch; }
@media (max-width: 1180px) { .ov-cards { grid-template-columns: minmax(0, 1fr); } }
.ov-cards .card.later { background: var(--surface); border-style: solid; }
/* Prepare for Step N stands out on the warm tint the portal uses for the member's own step, with a gold edge
   (Ed, 14 October 2026: "change the background colour to emphasise this"); the toolkit inside stays white */
.ov-cards .ov-for { background: #FBF6EE; border-color: rgba(184,132,77,.38); box-shadow: inset 0 3px 0 var(--accent-line); }
.ov-cards .ov-for .rec { background: #FFFFFF; }
.ov-cards .ov-for .ov-subh, .ov-cards .ov-for .mini li { border-color: rgba(184,132,77,.22); }
.ov-col { display: grid; gap: 18px; grid-template-rows: auto 1fr; min-width: 0; }
.ov-notes { list-style: none; margin: 0; padding: 0; display: grid; align-content: start; }
.ov-notes li { display: grid; gap: 4px; padding: 10px 0 10px 12px; border-left: 2px solid var(--accent-line); margin-top: 10px; }
.ov-notes li:first-child { margin-top: 0; }
.ov-notes li p { font-size: 14px; line-height: 1.5; color: var(--fg); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ov-notes li small { font-size: 12.5px; color: var(--fg-2); line-height: 1.45; }
.ov-notes li:has(.empty) { border-left: 0; padding-left: 0; }
.ov-subh { border-top: 1px solid var(--rule); padding-top: 12px; margin-top: 2px; align-items: center; }
.ov-cards #ovKits .mini { border-top: 1px solid var(--rule); }
.ov-cards #ovSaved:empty { display: none; }
.ov-cards #ovSaved:empty + #ovKits .mini { border-top: 0; }
.pa-plan { display: grid; gap: 10px; padding: 14px 20px 18px; border-top: 1px solid var(--rule); }
.pa-plan .plan { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; gap: 10px 12px; align-items: end; }
.pa-plan .plan .pa-msg { grid-column: 1 / -1; min-height: 0; }
@media (max-width: 760px) { .pa-plan .plan { grid-template-columns: minmax(0, 1fr); } }
/* The Account screen's lists (Ed, 14 October 2026) */
/* Every Account card the same size (Ed, 14 October 2026: "please also make the blocks same size"); a phone keeps one column at its own height */
@media (min-width: 701px) { .ac-grid { grid-auto-rows: 1fr; align-items: stretch; } }
.ac-buys, .ac-list { list-style: none; margin: 0; padding: 0; display: grid; }
.ac-buys li, .ac-list li { display: grid; gap: 2px; padding: 10px 0; border-top: 1px solid var(--rule); }
.ac-buys li:first-child, .ac-list li:first-child { border-top: 0; padding-top: 0; }
.ac-buys b, .ac-list b { display: block; font-weight: 500; font-size: 14px; color: var(--heading); }
.ac-buys small, .ac-list small { display: block; font-size: 13px; color: var(--fg-2); }
.ac-buys .btns { margin-top: 8px; align-items: center; }
.ac-list .more { justify-self: start; margin-top: 2px; }
.ac-row { display: flex; gap: 8px; }
.ac-row input { flex: 1; min-width: 0; }
/* Finding 10: on Saved the button says what it does */
.sv-remove { display: inline-flex; align-items: center; gap: 7px; }
.sv-remove svg { width: 11px; height: 13px; fill: currentColor; }