/* THE BINDER: WORKSPACE DESIGN SYSTEM (Sprint 01). Loaded LAST in both builds, so it refines binder.css and the platform theme without editing them. Colours come only from the theme tokens (palette.css), so light and dark mode both work.
   Principles: one restrained accent (brass, used for rules and highlights, never for body text), navy for primary actions, green only for completion, hairline borders, small radii, no gradients, no texture, no decorative animation. */

/* ---------- 1. TOKENS ---------- */
:root {
  --radius: 6px; --radius-lg: 8px;
  --shadow: 0 1px 2px rgb(var(--shadow-c, 32 43 54) / .05); --shadow-lg: 0 12px 32px -12px rgb(var(--shadow-c, 32 43 54) / .22);
  /* type scale */
  --fs-xs: .75rem; --fs-sm: .875rem; --fs-base: 1rem; --fs-md: 1.0625rem; --fs-lg: 1.25rem; --fs-xl: 1.5rem; --fs-2xl: 2rem; --lh-tight: 1.25; --lh-body: 1.6;
  /* spacing scale */
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px; --sp-7: 48px;
  /* semantic aliases: fall back sensibly in the standalone build, which has no palette file */
  --ws-action: var(--btn-bg, var(--ink)); --ws-action-fg: var(--btn-fg, #fff); --ws-action-hover: var(--btn-bg-hover, var(--ink-2));
  --ws-rule: var(--brand, #b08a50); --ws-accent: var(--accent, #7a5a22); --ws-soft: var(--brand-soft, #f1e8d6); --ws-focus: var(--focus, var(--ink-2));
}
body { font-family: var(--font-ui, 'Inter', system-ui, sans-serif); font-size: var(--fs-base); line-height: var(--lh-body); }
h1, h2 { font-family: var(--font-display, 'Source Serif 4', Georgia, serif); font-weight: 600; letter-spacing: -.01em; line-height: var(--lh-tight); }

/* ---------- 2. CALM THE FRAME: no texture, no glow, no gradients, no brand-coloured borders ---------- */
#main::before, .pdash::before, .pauth::before, .padmin::before { content: none !important; }
#spine, #mobtop, .ptop { background: var(--nav-1, #202b36) !important; }
#spine { border-right: 1px solid rgba(255, 255, 255, .06); }
#spine .brand .mark svg { filter: none; }
.tab-btn { border-radius: var(--radius); background-image: none !important; }
.tab-btn.active { background-color: rgba(255, 255, 255, .07); border-color: transparent; box-shadow: inset 2px 0 0 var(--ws-rule); }
.tab-btn.active .dot { background: var(--ws-rule); box-shadow: none; }
.xppill { border-radius: var(--radius); }
.foot-btn, .foot-btn-primary { border-radius: var(--radius); border: 1px solid rgba(255, 255, 255, .12); background: transparent; color: var(--nav-text, #e8e6e0); }
.foot-btn:hover, .foot-btn-primary:hover { background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .2); }
.lvl-item { border-radius: var(--radius); }
.lvl-item.active { box-shadow: inset 2px 0 0 var(--ws-rule); }
#page { max-width: 1120px; padding: 36px 40px 96px; }
@media (max-width: 860px) { #page { padding: 22px 16px 80px; } }

/* ---------- 3. COMPONENT LIBRARY ---------- */
.ws-crumbs ol { display: flex; flex-wrap: wrap; gap: 0; list-style: none; margin: 0 0 var(--sp-4); padding: 0; font-size: var(--fs-sm); color: var(--text-soft); }
.ws-crumbs li + li::before { content: '/'; margin: 0 .55em; color: var(--text-faint); }
.ws-crumbs li:last-child { color: var(--ink); font-weight: 600; }
.ws-eyebrow { margin: 0 0 var(--sp-2); font-size: var(--fs-xs); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--ws-accent); }
.ws-lead { max-width: 62ch; margin: var(--sp-3) 0 0; font-size: var(--fs-md); color: var(--text-soft); }
.ws-muted { color: var(--text-soft); font-size: var(--fs-sm); margin: 0 0 var(--sp-3); }
.ws-h3 { font-family: var(--font-ui, 'Inter', sans-serif); font-size: var(--fs-sm); font-weight: 600; letter-spacing: .01em; color: var(--ink); margin: var(--sp-5) 0 var(--sp-2); }
.ws-tag { display: inline-block; margin-left: var(--sp-2); padding: 1px 8px; border: 1px solid var(--line); border-radius: 999px; font-size: var(--fs-xs); font-weight: 500; color: var(--text-soft); vertical-align: 2px; }
.ws-sim { display: inline-block; margin-right: var(--sp-1); padding: 1px 7px; border: 1px solid var(--ws-rule); border-radius: 3px; font-size: var(--fs-xs); font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--ws-accent); }
.ws-i { vertical-align: -2px; }
.ws-bar { height: 6px; margin-top: var(--sp-2); border-radius: 3px; background: var(--line); overflow: hidden; }
.ws-bar span { display: block; height: 100%; background: var(--green); border-radius: 3px; transition: width .3s ease; }
@media (prefers-reduced-motion: reduce) { .ws-bar span { transition: none; } }

/* buttons */
.ws-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 40px; padding: 9px 16px; border-radius: var(--radius); border: 1px solid transparent; font: 600 var(--fs-sm) var(--font-ui, 'Inter', sans-serif); cursor: pointer; text-align: center; }
.ws-btn-primary { background: var(--ws-action); color: var(--ws-action-fg); }
.ws-btn-primary:hover { background: var(--ws-action-hover); }
.ws-btn-quiet { background: transparent; color: var(--ink); border-color: var(--line); margin-top: var(--sp-2); }
.ws-btn-quiet:hover { background: var(--paper-2); }
.ws-btn:focus-visible, .ws-row-btn:focus-visible, .modebtn:focus-visible, .ws-details summary:focus-visible { outline: 2px solid var(--ws-focus); outline-offset: 2px; }

/* lists, definition lists, panels */
.ws-list { margin: 0; padding: 0; list-style: none; }
.ws-list li { position: relative; padding: 9px 0 9px 22px; border-top: 1px solid var(--line-soft); }
.ws-list li:first-child { border-top: 0; }
.ws-list li::before { content: ''; position: absolute; left: 4px; top: 1.05em; width: 6px; height: 6px; border-radius: 50%; background: var(--ws-rule); }
.ws-list-check li::before { width: 10px; height: 6px; top: 1em; left: 3px; border: 0; border-left: 2px solid var(--green); border-bottom: 2px solid var(--green); border-radius: 0; background: none; transform: rotate(-45deg); }
.ws-list-plain li { display: flex; justify-content: space-between; gap: var(--sp-3); padding: 7px 0; font-size: var(--fs-sm); }
.ws-list-plain li::before { content: none; }
.ws-list-plain small { color: var(--text-faint); white-space: nowrap; }
.ws-def { margin: var(--sp-3) 0 var(--sp-4); }
.ws-def dt { font-size: var(--fs-xs); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--text-soft); margin-top: var(--sp-3); }
.ws-def dd { margin: 2px 0 0; font-size: var(--fs-sm); }
.ws-panel { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: var(--sp-5); }
.ws-panel + .ws-panel { margin-top: var(--sp-4); }
.ws-panel h2 { margin: 0 0 var(--sp-3); font-size: var(--fs-lg); }
.ws-continue { border-top: 3px solid var(--ws-rule); }
.ws-kicker { margin: 0; font-size: var(--fs-xs); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--text-soft); }
.ws-ptitle { margin: var(--sp-1) 0; font-family: var(--font-display, 'Source Serif 4', serif); font-size: var(--fs-lg); font-weight: 600; line-height: var(--lh-tight); color: var(--ink); }
.ws-pmeta { margin: 0 0 var(--sp-2); font-size: var(--fs-sm); color: var(--text-soft); }
.ws-continue .ws-btn { width: 100%; margin-top: var(--sp-2); }
.ws-details { margin-top: var(--sp-5); border-top: 1px solid var(--line); padding-top: var(--sp-3); }
.ws-details summary { cursor: pointer; font-size: var(--fs-sm); font-weight: 600; color: var(--ink); }
.ws-note { margin-top: var(--sp-3); font-size: var(--fs-sm); color: var(--text-soft); line-height: 1.55; }
.ws-note .currency-note { margin: 0; padding: 0; border: 0; background: none; }
.ws-empty { padding: var(--sp-6); border: 1px dashed var(--line); border-radius: var(--radius); background: var(--card); max-width: 640px; }
.ws-empty h2 { font-size: var(--fs-lg); margin: 0 0 var(--sp-2); }

/* mode tabs */
.modebar { display: flex; gap: var(--sp-1); margin: 0 0 var(--sp-5); padding: 0; background: none; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; box-shadow: none; }
.modebtn { background: none; border: 0; border-bottom: 2px solid transparent; border-radius: 0; margin-bottom: -1px; padding: 10px 14px; font: 600 var(--fs-sm) var(--font-ui, 'Inter', sans-serif); color: var(--text-soft); box-shadow: none; cursor: pointer; }
.modebtn:hover { color: var(--ink); background: none; }
.modebtn.active { color: var(--ink); background: none; border-bottom-color: var(--ws-rule); box-shadow: none; }

/* ---------- 4. LEVEL PAGE ---------- */
.ws-head h1 { margin: 0; font-size: var(--fs-2xl); }
.ws-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(0, 1.8fr); gap: var(--sp-5); margin: var(--sp-6) 0 0; padding: var(--sp-4) 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.ws-stats dt { font-size: var(--fs-xs); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--text-soft); }
.ws-stats dd { margin: 2px 0 0; font-size: var(--fs-xl); font-weight: 600; font-variant-numeric: tabular-nums; color: var(--ink); }
.ws-stats dd small { margin-left: var(--sp-2); font-size: var(--fs-sm); font-weight: 400; color: var(--text-soft); }
.ws-grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; grid-template-areas: "main side1" "main side2"; grid-template-rows: auto 1fr; column-gap: var(--sp-7); row-gap: var(--sp-4); margin-top: var(--sp-6); align-items: start; }
.ws-col-main { grid-area: main; } .ws-side-1 { grid-area: side1; } .ws-side-2 { grid-area: side2; }
.ws-side .ws-panel + .ws-panel { margin-top: 0; }
.ws-section { margin-bottom: var(--sp-6); }
.ws-section h2 { margin: 0 0 var(--sp-3); font-size: var(--fs-xl); }
.ws-path { list-style: none; margin: 0; padding: 0; }
.ws-row { margin-bottom: var(--sp-2); }
.ws-row-btn { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; gap: var(--sp-4); align-items: start; width: 100%; text-align: left; padding: var(--sp-4) var(--sp-4); background: var(--card); color: var(--text); border: 1px solid var(--line); border-radius: var(--radius); cursor: pointer; font: inherit; }
.ws-row-btn:hover { border-color: var(--slate); }
.ws-row.next .ws-row-btn { border-color: var(--ws-rule); box-shadow: inset 3px 0 0 var(--ws-rule); }
.ws-num { display: grid; place-items: center; width: 28px; height: 28px; border: 1px solid var(--line); border-radius: 50%; font-size: var(--fs-sm); font-weight: 600; font-variant-numeric: tabular-nums; color: var(--text-soft); }
.ws-row.done .ws-num { background: var(--green); border-color: var(--green); color: #fff; }
.ws-row.next .ws-num { border-color: var(--ws-rule); color: var(--ws-accent); }
.ws-main { display: block; min-width: 0; }
.ws-rtitle { display: block; font-weight: 600; font-size: var(--fs-md); color: var(--ink); line-height: 1.35; }
.ws-rmeta { display: block; margin-top: 2px; font-size: var(--fs-sm); color: var(--text-soft); font-variant-numeric: tabular-nums; }
.ws-deliv { display: block; margin-top: var(--sp-2); font-size: var(--fs-sm); color: var(--text-soft); }
.ws-deliv b { display: inline-block; margin-right: var(--sp-2); font-size: var(--fs-xs); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--ws-accent); }
.ws-status { align-self: center; padding: 3px 10px; border-radius: 999px; font-size: var(--fs-xs); font-weight: 600; white-space: nowrap; border: 1px solid var(--line); color: var(--text-soft); }
.ws-st-done { background: var(--green-bg); border-color: transparent; color: var(--green); }
.ws-st-next { background: var(--ws-soft); border-color: transparent; color: var(--ws-accent); }
.ws-row.challenge .ws-row-btn { background: var(--paper-2); }

@media (max-width: 900px) {
  .ws-grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: "side1" "main" "side2"; grid-template-rows: none; row-gap: var(--sp-5); }
  .ws-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ws-stat-wide { grid-column: 1 / -1; }
  .ws-head h1 { font-size: var(--fs-xl); }
}
@media (max-width: 560px) {
  .ws-row-btn { grid-template-columns: 28px minmax(0, 1fr); }
  .ws-status { grid-column: 2; justify-self: start; }
}

.ws-collapse > summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); }
.ws-collapse > summary::-webkit-details-marker { display: none; }
.ws-collapse > summary h2 { margin: 0 0 var(--sp-3); }
.ws-collapse > summary::after { content: ''; width: 9px; height: 9px; margin-bottom: var(--sp-3); border-right: 2px solid var(--text-soft); border-bottom: 2px solid var(--text-soft); transform: rotate(45deg); transition: transform .15s; }
.ws-collapse[open] > summary::after { transform: rotate(-135deg); margin-bottom: 0; }
.ws-collapse > summary:focus-visible { outline: 2px solid var(--ws-focus); outline-offset: 3px; }

/* ---------- 5. LESSON WORKSPACE ---------- */
.lplayer { max-width: 780px; margin: 0 auto; }
.lw-head { display: flex; align-items: center; gap: var(--sp-4); margin-bottom: var(--sp-3); }
.lp-exit { width: auto; height: auto; padding: 7px 12px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--card); font: 600 var(--fs-sm) var(--font-ui, 'Inter', sans-serif); color: var(--ink); cursor: pointer; white-space: nowrap; }
.lp-exit:hover { background: var(--paper-2); }
.lp-exit:focus-visible { outline: 2px solid var(--ws-focus); outline-offset: 2px; }
.lw-ctx { min-width: 0; display: flex; flex-direction: column; }
.lw-ctx-l { font-size: var(--fs-xs); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--text-soft); }
.lw-ctx-t { font-weight: 600; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lw-step { margin: var(--sp-4) 0 var(--sp-2); font-size: var(--fs-sm); font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }
.lp-top { margin-bottom: var(--sp-4); }
.lp-dots { gap: 4px; }
.lp-dot { height: 4px; border-radius: 2px; background: var(--line); }
.lp-dot.past { background: var(--ink-2); }
.lp-dot.on { background: var(--ws-rule); box-shadow: none; }

.lw-brief { margin-bottom: var(--sp-4); border: 1px solid var(--line); border-radius: var(--radius); background: var(--card); }
.lw-brief > summary { cursor: pointer; padding: var(--sp-3) var(--sp-4); font-size: var(--fs-sm); font-weight: 600; letter-spacing: .02em; color: var(--ink); }
.lw-brief > summary:focus-visible { outline: 2px solid var(--ws-focus); outline-offset: -2px; }
.lw-brief-grid { margin: 0; padding: 0 var(--sp-4) var(--sp-4); display: grid; gap: var(--sp-3); }
.lw-brief-grid dt { font-size: var(--fs-xs); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--text-soft); }
.lw-brief-grid dd { margin: 2px 0 0; font-size: var(--fs-sm); color: var(--text); }
.lw-brief .skiplink { padding: 0; }

/* cards: flat, hairline, small radius, no lift or glow */
.lplayer > .lcard, .lplayer > .lp-check { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: none; padding: var(--sp-6) var(--sp-6) var(--sp-5); min-height: 0; }
@media (max-width: 620px) { .lplayer > .lcard, .lplayer > .lp-check { padding: var(--sp-5) var(--sp-4); border-radius: var(--radius); } }
.lcard .kicker, .lp-check .kicker { display: flex; align-items: center; gap: var(--sp-3); margin-bottom: var(--sp-4); font-size: var(--fs-xs); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--ws-accent); }
.lcard.concept .kicker, .lcard.example .kicker, .lp-check .kicker { color: var(--ws-accent); }
.lcard .kicker::after, .lp-check .kicker::after { content: ''; flex: 1; height: 1px; background: var(--line-soft); }
.lcard h2 { font-size: clamp(1.375rem, 1.1rem + 1vw, 1.75rem); line-height: var(--lh-tight); margin-bottom: var(--sp-4); letter-spacing: -.01em; }
.lp-check h2 { font-size: var(--fs-lg); line-height: 1.35; margin: var(--sp-4) 0; font-family: var(--font-display, 'Source Serif 4', serif); }
.lcard .body { max-width: 66ch; font-size: var(--fs-md); line-height: 1.7; }
.lcard.example { background: var(--paper-2); border-left: 3px solid var(--ws-rule); border-radius: var(--radius); padding: var(--sp-6) var(--sp-6) var(--sp-5); }
.jobnote { border: 1px solid var(--line); border-left: 3px solid var(--slate); border-radius: var(--radius); background: var(--paper-2); padding: var(--sp-3) var(--sp-4); font-size: var(--fs-sm); margin-top: var(--sp-5); }
.jobnote b { display: block; margin-bottom: 2px; font-size: var(--fs-xs); letter-spacing: .06em; text-transform: uppercase; color: var(--text-soft); }
.lcard table, .lcard .body table { font-size: var(--fs-sm); }

/* decision exercise: evidence first, then the decision, then the outcome and the reviewer's feedback */
.evidence { border: 1px solid var(--line); border-left: 3px solid var(--ws-rule); border-radius: var(--radius); background: var(--paper-2); padding: var(--sp-4); margin-bottom: var(--sp-4); }
.evidence-head { margin-bottom: var(--sp-2); font-size: var(--fs-xs); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--text-soft); }
.evidence .casebanner { margin: 0 0 var(--sp-3); padding: 0; border: 0; background: none; font-size: var(--fs-sm); color: var(--text-soft); }
.evidence .cb-note { display: block; margin-top: 2px; font-size: var(--fs-xs); }
.scenario, .scn { border: 0; border-radius: 0; background: none; padding: 0; margin: 0; font-size: var(--fs-md); line-height: 1.65; }
.decide-opts .opt { display: block; width: 100%; text-align: left; }
.opt, .mitem { padding: var(--sp-3) var(--sp-4); border: 1px solid var(--line); border-radius: var(--radius); background: var(--card); font-size: var(--fs-base); box-shadow: none; transition: border-color .12s, background .12s; }
.opt:hover:not([disabled]), .mitem:hover:not(:disabled) { border-color: var(--slate); background: var(--paper-2); transform: none; box-shadow: none; }
.opt:focus-visible, .mitem:focus-visible { outline: 2px solid var(--ws-focus); outline-offset: 2px; }
.fb { border-radius: var(--radius); padding: var(--sp-3) var(--sp-4); font-size: var(--fs-sm); animation: none; }
.reviewer { border: 1px solid var(--line); border-left: 3px solid var(--ink-2); border-radius: var(--radius); background: var(--card); padding: var(--sp-3) var(--sp-4); font-size: var(--fs-sm); animation: none; }
.rv-head { display: flex; align-items: baseline; gap: var(--sp-2); margin-bottom: var(--sp-1); font-size: var(--fs-xs); letter-spacing: .08em; color: var(--ink); }
.rv-by { font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--text-soft); }

/* practical deliverable workspace */
.ws-deliv-line { margin: 0 0 var(--sp-3); padding: var(--sp-2) var(--sp-3); border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper-2); font-size: var(--fs-sm); }
.ws-deliv-line b { margin-right: var(--sp-2); font-size: var(--fs-xs); letter-spacing: .06em; text-transform: uppercase; color: var(--ws-accent); }
.applybox { border: 1px solid var(--line); border-radius: var(--radius); background: var(--card); padding: var(--sp-3) var(--sp-4); font-size: var(--fs-base); line-height: 1.6; }
.applybox:focus { outline: 2px solid var(--ws-focus); outline-offset: 1px; border-color: var(--ws-focus); box-shadow: none; }
.rubric-head { margin: var(--sp-4) 0 var(--sp-2); font-size: var(--fs-xs); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--text-soft); }

/* navigation bar under the card */
.lp-continue { position: sticky; bottom: 0; z-index: 5; background: var(--paper); border-top: 1px solid var(--line); margin-top: var(--sp-4); padding: var(--sp-3) 0 calc(var(--sp-3) + env(safe-area-inset-bottom, 0px)); }
.btn-continue { border-radius: var(--radius); padding: 13px var(--sp-4); font-size: var(--fs-base); background: var(--ws-action); color: var(--ws-action-fg); box-shadow: none; }
.btn-continue:hover:not(:disabled) { background: var(--ws-action-hover); transform: none; box-shadow: none; }
.btn-continue:disabled { background: var(--paper-2); color: var(--text-faint); border: 1px solid var(--line); }
.btn-continue:focus-visible, .btn-back:focus-visible, .btn-skip:focus-visible { outline: 2px solid var(--ws-focus); outline-offset: 2px; }
.btn-primary { background: var(--ws-action); color: var(--ws-action-fg); border-radius: var(--radius); box-shadow: none; }
.btn-primary:hover { background: var(--ws-action-hover); transform: none; }
.btn-secondary { border-radius: var(--radius); }
.copybtn { border-radius: var(--radius); }

/* completion screen */
.celebrate .badge { width: 56px; height: 56px; display: grid; place-items: center; border-radius: 50%; background: var(--green); color: #fff; box-shadow: none; }
.celebrate .badge svg { width: 26px; height: 26px; }
.celebrate .badge::before, .celebrate .badge::after { content: none; }
.ws-done-deliv { max-width: 46ch; margin: var(--sp-3) auto; color: var(--text-soft); font-size: var(--fs-sm); }
.ws-simnote { display: flex; gap: var(--sp-3); align-items: baseline; margin: 0 0 var(--sp-5); padding: var(--sp-3) var(--sp-4); border: 1px solid var(--line); border-left: 3px solid var(--ws-rule); border-radius: var(--radius); background: var(--card); font-size: var(--fs-sm); max-width: 760px; }

/* ---------- 6. CONTRAST: the light brass is for non-text marks and for text on dark surfaces only. On light pages, text uses the darker accent. ---------- */
.peyebrow, .presume-t small { color: var(--ws-accent); }
.phero .peyebrow, .pauth-side .peyebrow, .phero .presume-t small { color: var(--brand-2, #c9a56a); }
.pstat.warn { background: var(--ws-soft); }

/* Ghost buttons were designed for the dark hero (white text). On light pages (admin, landing) they use the ink colour. */
.padmin .pbtn-ghost, .pdash .pwrap .pbtn-ghost, .pwrap .pbtn-ghost { color: var(--ink); background: transparent; border-color: var(--line); }
.phero .pbtn-ghost, .pauth-side .pbtn-ghost { color: var(--nav-title, #fff); background: rgba(255, 255, 255, .07); border-color: rgba(255, 255, 255, .22); }
.padmin .pbtn-ghost:hover, .pwrap .pbtn-ghost:hover { background: var(--paper-2); }

/* The landing hero keeps its navy field but loses the grid texture and glows (design direction: no decorative backgrounds). */
.phero-bg { background: none !important; }