/* top-right-panel.css — the header controls, styled once for every page. * * Scoped to .top-right-panel throughout, so these rules reach the panel and * nothing else: the landing's .lbtn CTAs, the trainer's .btn family and the * admin toolbar all keep their own looks, and no page can catch the panel's * styling by accident. The scope also carries enough specificity that a page * stylesheet loading later (pages layer) cannot silently re-skin one page's * controls — the drift this component exists to end. * * Voice: the playful design system (decision 0015) — ink outlines, paper * fills, one ember accent. Colours come from the --play-* tokens only. */ .top-right-panel{display:flex;align-items:center;gap:10px;margin-left:auto} /* The locale pills and the round theme button both left in wireframe turn 25: the pills are the panel's third block (course-switcher.js) and the theme is the lantern (lantern.css), an object whose own state is the theme. Their rules left with them rather than lingering here unused. */ /* Account button — the chunky pressable, ghost variant. */ .top-right-panel .lbtn{ display:inline-flex;align-items:center;justify-content:center;gap:8px; white-space:nowrap;flex:none; border:2px solid var(--play-ink);border-radius:14px; background:var(--play-card);color:var(--play-ink); box-shadow:0 4px 0 var(--play-edge); font:700 15px/1 var(--play-display);padding:8px 18px; text-decoration:none;cursor:pointer; transition:transform .06s ease,box-shadow .06s ease; } .top-right-panel .lbtn:hover{transform:translateY(1px);box-shadow:0 3px 0 var(--play-edge)} .top-right-panel .lbtn:active{transform:translateY(4px);box-shadow:0 0 0 var(--play-edge)} .top-right-panel .lbtn:focus-visible{outline:3px solid var(--play-link);outline-offset:2px} /* The course chip (decision 0019) — the locale pills' idiom, one control wide (the DIRECT child: the menu's rows are buttons too, and inherited this pill look once): the open course's glyph and short name, pressed look while its menu is open. Hidden until a page loads js/core/course.js; [hidden] must win over the flex display below (lint.mjs checks this rule's two files, this sheet checks its own). */ .top-right-panel .course{position:relative;flex:none} .top-right-panel .course[hidden]{display:none} .top-right-panel .course > button{ display:inline-flex;align-items:center;gap:6px;height:40px;padding:0 12px; border:2px solid var(--play-ink);border-radius:999px; background:var(--play-card);color:var(--play-ink); font:700 13px var(--play-display);cursor:pointer; transition:transform .06s ease,box-shadow .06s ease; } .top-right-panel .course > button:hover{box-shadow:0 3px 0 var(--play-edge);transform:translateY(-1px)} .top-right-panel .course > button[aria-expanded="true"]{background:var(--play-accent);color:var(--play-accent-ink)} .top-right-panel .course > button:focus-visible{outline:3px solid var(--play-link);outline-offset:2px} .top-right-panel .course .course-glyph{font-size:15px;line-height:1} /* The chip is the one control on the bar with no ember in it, which left it reading as the odd grey one beside the accent buttons. The torii, the interface language and the caret wear the brand ember itself — the same #f97316 the buttons are filled with, by explicit choice, so the chip reads as one of them rather than as a near-miss shade. That is under the 4.5:1 AA floor on the light card (2.76:1), which is a deliberate, recorded departure — see docs/bugs.md, "Known limitations". Do not "fix" it to a darker orange without asking; that was tried and rejected. The menu's own rows keep their ink, so this is scoped to the button. */ .top-right-panel .course > button .course-glyph{color:var(--play-accent)} /* The interface language, and which way the panel will move. Small and muted next to the language's own name: it is the fact you check, not the one you read (25d). On the open chip both sit on the accent, so they take its ink. */ .top-right-panel .course > button .course-ui{font-size:10px;color:var(--play-accent)} .top-right-panel .course > button .course-caret{font-size:9px;color:var(--play-accent)} /* Open, the chip itself is the ember, so everything on it takes the ink measured for that fill — an ember glyph on an ember ground would vanish. */ .top-right-panel .course > button[aria-expanded="true"] .course-glyph, .top-right-panel .course > button[aria-expanded="true"] .course-ui, .top-right-panel .course > button[aria-expanded="true"] .course-caret{color:var(--play-accent-ink)} .top-right-panel .course > button[aria-expanded="true"] .course-ui, .top-right-panel .course > button[aria-expanded="true"] .course-caret{opacity:.85} /* The menu: the rail drawer's latched look (skin-playful-shell.css), hung under the chip. Rows are buttons — the open course pressed, the rest plain — and a course still to come is an inert, muted row. */ .top-right-panel .course-menu{ position:absolute;right:0;top:calc(100% + 8px);z-index:40; width:min(92vw,320px);display:flex;flex-direction:column;gap:2px;padding:8px; border:2px solid var(--play-ink);border-radius:14px; background:var(--play-card);color:var(--play-ink);box-shadow:4px 4px 0 var(--play-edge); font-family:var(--play-display);text-align:left; } .top-right-panel .course-menu[hidden]{display:none} .top-right-panel .course-h{font:400 .72rem var(--play-display);letter-spacing:.06em;color:var(--play-mute);padding:4px 10px 2px} .top-right-panel .course-row{ display:grid;grid-template-columns:auto 1fr;column-gap:10px;row-gap:2px;align-items:start; width:100%;padding:8px 10px;border:2px solid transparent;border-radius:12px; background:none;color:var(--play-ink);font:inherit;text-align:left;cursor:pointer; } .top-right-panel .course-row:hover{background:var(--play-paper);border-color:var(--play-track)} .top-right-panel .course-row[aria-pressed="true"]{border-color:var(--play-ink);background:var(--play-paper)} .top-right-panel .course-row:focus-visible{outline:3px solid var(--play-link);outline-offset:2px} /* Placed by hand, not by auto-flow: a