/* pages/trainer/skin-playful-shell.css — the trainer chrome in the playful voice (decision 0015). Same two levers as the landing's skin: remap the tokens the ember skin reads to the --play-* group, then a handful of structural touches (ink rules, chunky primaries, the hand-drawn display face on headings). Loaded last so it wins the whole cascade; every value is a var() reference (decision 0008). Scoped to body.shellui — the planner page converts in its own PR. */ body.shellui{ --pl-base:var(--play-bg); --pl-surface:var(--play-bg); --pl-card:var(--play-card); --pl-line:var(--play-track); --pl-mute:var(--play-mute); --pl-ink:var(--play-ink); --pl-track:var(--play-track); --pl-faint:var(--play-paper); --pl-accent-deep:var(--play-link); --pl-shadow:transparent; --bg:var(--play-bg); --panel:var(--play-card); --panel2:var(--play-paper); --card:var(--play-card); --line:var(--play-track); --line2:var(--play-soft); --ink:var(--play-ink); --dim:var(--play-mute); --mute:var(--play-mute); --accent:var(--play-accent); --accent2:var(--play-link); --accent-soft:var(--play-accent-soft); --hover:var(--play-paper); --shadow1:transparent; --shadow2:transparent; /* The inset ground the clip boxes paint (glyphclip.css, strokeorder.css). Unremapped it stays tokens.css's cold #eef1f5 in light theme, which put a blue-grey card on the warm paper wherever a character draws itself. landing/skin-playful.css:18 already remaps it; the trainer skin did not. */ --cell:var(--play-paper); } body.shellui{background:var(--play-bg)} /* Chrome rules — the sidebar and topbar take the ink line. */ .shellui .side{border-right:2px solid var(--play-ink)} .shellui .topbar{border-bottom:2px solid var(--header-line, transparent)} /* Headings carry the playful display face; body copy stays on the proven text faces for dense tables and notes. */ .shellui h2,.shellui h3,.shellui .dh-kicker{font-family:var(--play-display)} .shellui .viewtabs button{font-family:var(--play-display)} /* Primary buttons join the chunky pressable family. Ghosts stay quiet. */ .shellui .btn:not(.ghost):not(.sm){border:2px solid var(--play-ink);border-radius:14px;background:var(--play-accent);color:var(--play-accent-ink);box-shadow:0 4px 0 var(--play-edge);font-family:var(--play-display)} .shellui .btn:not(.ghost):not(.sm):hover{transform:translateY(1px);box-shadow:0 3px 0 var(--play-edge)} .shellui .btn:not(.ghost):not(.sm):active{transform:translateY(4px);box-shadow:0 0 0 var(--play-edge)} .shellui .btn:focus-visible{outline:3px solid var(--play-link);outline-offset:2px} /* Rail cards and the goal card pick up the ink outline. */ .shellui .railcard,.shellui .tipcard,.shellui .card,.shellui .stagecard{border:2px solid var(--play-ink);border-radius:12px} .shellui .railcard.tclick:hover{box-shadow:0 3px 0 var(--play-edge);transform:translateY(-1px)} /* The speech pill (#264). zoom.css draws .say as a --panel2 fill in a 1px --line border, and the remap above points --panel2 at --play-paper (the ground it sits on) and --line at --play-track (the faint progress track): measured 1.20-1.37:1 border-vs-ground, so both declarations were dead and the button read as a bare floating icon. Restated on the play tokens the way .kz-step, .lb-chip and the guide's .cdx-termcard .say draw a pill — ink outline (14:1 on card and paper), card fill. Not --play-soft: it measures 2.0-2.9:1 on these grounds and fails the 3:1 non-text floor. The hover is restated because this rule ties zoom.css's .say:hover at (0,2,0) and loads later, which would otherwise kill the link fill. */ .shellui .say{border:2px solid var(--play-ink);background:var(--play-card)} .shellui .say:hover{border-color:var(--accent2);background:var(--accent2)} @media (prefers-reduced-motion: reduce){ .shellui .btn,.shellui .railcard,.shellui .ric{transition:none} } /* ---- the icon rail (wireframes 1d/1e) --------------------------------- */ @media(min-width:900px){ /* Shell parity for pages that skip the ember skin-shell (the planner): full-height frame, rail pinned from the very top, main as the one scroller — identical geometry to the trainer. */ .shellui .shell{height:100vh} .shellui .shellcol{height:100vh} .shellui main{flex:1;overflow-y:auto} .shellui .side{width:88px;padding:14px 10px;align-items:center;gap:10px;position:static;top:0;height:100vh} .shellui .sbrand{margin-bottom:4px} /* The wordmark stays brand.css's to RENDER; the rail only removes it from layout, accessibly. */ .shellui .sbrand .brandlink h1, .shellui .sbrand .brandlink span:last-child{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;margin:0} .shellui .tabs{align-items:center;gap:10px} .shellui .foot{margin-left:88px} /* The library used to park a contextual panel beside the rail, and main reserved 300px for it. The panel retired with the in-place detail (0015 v2), and the reservation went on holding an empty band to the left of every library page — the dead space turn 3 called out. */ } .shellui .tabs button{padding:4px;border-right:0;background:none} .shellui .tabs button.active{background:none} .shellui .tabs button>span:last-child,.shellui .railplan>span:last-child{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap} .shellui .ric{width:44px;height:44px;border:2px solid var(--play-ink);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:19px;background:var(--play-card);color:var(--play-ink);transition:box-shadow .06s ease} /* Hover raises the ledge, and nothing moves. The rail is a row of neighbours a pointer crosses on its way to one of them, so a 1px lift on each meant the icons bobbed the whole way across — read as the panel itself shifting up and down (bhassa-feedback#15). The ledge alone still says "pressable", and it says it without displacing anything. */ .shellui .tabs button:hover .ric,.shellui .railplan:hover .ric{box-shadow:0 3px 0 var(--play-edge)} .shellui .tabs button.active .ric{background:var(--play-accent);color:var(--play-accent-ink)} .shellui .tabs button:focus-visible,.shellui .railplan:focus-visible{outline:3px solid var(--play-link);outline-offset:2px;border-radius:50%} .shellui .railplan{display:flex;text-decoration:none} .shellui .goalcard{display:none} @media(max-width:899px){ .shellui .tabs button{flex:1;display:flex;justify-content:center} .shellui .ric{width:38px;height:38px;font-size:16px} .shellui .railplan{margin:0} } /* ---- the league screen (wireframe 1p) --------------------------------- */ .lg-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px;font-family:var(--play-display)} .lg-head>b{font-size:1.35rem} .lg-tiers{display:flex;align-items:center;justify-content:center;gap:0;margin-bottom:4px} .lg-tierlabel{text-align:center;margin-bottom:14px} .lg-board{padding:0;overflow:hidden} .lg-row{display:flex;align-items:center;gap:10px;padding:8px 14px;border-bottom:1px solid var(--play-track);font-family:var(--play-display)} .lg-row:last-child{border-bottom:0} .lg-row.is-ghost{opacity:.75} .lg-sk{height:12px;border-radius:999px;background:var(--play-track)} .lg-pill{margin:12px;text-align:center} .lg-pill b{display:block} .lg-pill span{color:var(--play-mute);font-size:.85rem} /* The rail is the ONE navigation (0015 v2): it never hides — the ember skin's subview/noside collapses are overridden, not removed, so a revert stays one file. */ @media(min-width:900px){ body.shellui.subview .tabs{display:flex} body.shellui.noside .side{display:flex} } /* Rail stops as links (the planner page's rail deep-links into the app). */ .shellui .tabs .railstop{display:flex;flex-direction:column;align-items:center;padding:4px;text-decoration:none;color:var(--play-ink)} .shellui .tabs .railstop>span:last-child{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap} .shellui .tabs .railstop:hover .ric{box-shadow:0 3px 0 var(--play-edge)} .shellui .tabs .railstop:focus-visible{outline:3px solid var(--play-link);outline-offset:2px;border-radius:50%} .shellui .tabs .railstop[aria-current="page"] .ric{background:var(--play-accent);color:var(--play-accent-ink)} @media(max-width:899px){ .shellui .tabs .railstop{flex:1} } /* The planner loads this skin without the ember skin-shell, so the column flex lives here too — otherwise the shellcol shrink-wraps its content and the page huddles in the left corner on wide screens. */ .shellui .shellcol{flex:1;display:flex;flex-direction:column;min-width:0} /* ---- the Dojo (wireframe 7a) ------------------------------------------ */ /* community.html's four zones, made into a board: pulse, cohort bar, the ladder with the reader inside it, and the milestone feed beside it. */ .dj-pulse{display:flex;gap:8px;margin-bottom:10px;flex-wrap:wrap} .dj-stat{flex:1;min-width:150px;text-align:center;padding:8px} .dj-stat b{display:block;font-size:1.35rem;font-family:var(--play-display)} .dj-cohort{display:flex;align-items:center;gap:10px;margin-bottom:14px;flex-wrap:wrap} .dj-bar{flex:1;min-width:160px;position:relative;overflow:visible} /* The reader's own pin rides ON the cohort's fill, so "ahead" and "behind" are one glance rather than two numbers to compare. */ .dj-you{position:absolute;top:-14px;transform:translateX(-50%);font-size:.95rem;font-weight:400} .dj-grid{display:grid;grid-template-columns:1fr 250px;gap:12px;align-items:start} .dj-side{display:flex;flex-direction:column;gap:10px;min-width:0} .dj-rank{width:22px;flex:none;text-align:right} .dj-days{white-space:nowrap} /* Pinned in flow at the rank the reader's streak earns — not floated below the board, which would say they are not in it. */ .lg-row.is-me{background:var(--play-accent);color:var(--play-accent-ink)} .lg-row.is-me .lg-name{font-weight:700} .dj-goal{text-align:center;display:flex;flex-direction:column;gap:4px} .dj-goal b{font-size:1.3rem;font-family:var(--play-display)} .dj-feed{display:flex;flex-direction:column;gap:6px} .dj-ms{display:flex;align-items:center;gap:8px} .dj-ms .p-tag:first-of-type{flex:1} .dj-when{white-space:nowrap} @media (max-width:820px){ .dj-grid{grid-template-columns:1fr} } /* ---- the rail's ⋯ overflow and hover names (wireframes 13a + 13b) ------ * * Everything above still owns the rail: 88px, .ric circles, hidden labels. * This adds only what the frames asked for — the three low-frequency rooms * behind ⋯, and the name appearing beside an icon on hover. */ /* The name and the drawer both sit outside the 88px column, and .side scrolls on the y axis, which clips the x axis with it — so the scroll is off where the rail FITS, and only there. Its natural height (brand, the stops, the foot) measures 474px at desktop width; under 480px a viewport would clip stops with no way to reach them, which is worse than a clipped flyout — the accessible name survives, the hover pill does not (#218). Re-measure if the rail gains a stop. The ⋯ drawer is navigation, not decoration, so it must not be clipped with the pills: in that state it is pinned to the viewport beside the rail instead of to its button (a fixed box escapes an ancestor's overflow; nothing above it transforms). Three classes deep on purpose: the drawer's own position rule sits later in this file at two, and would win an equal-specificity tie. */ .shellui .side{overflow:visible} @media (min-width:900px) and (max-height:480px){ .shellui .side{overflow-y:auto} .shellui .railmore .raildrawer{position:fixed;left:98px;top:auto;bottom:12px} } .shellui .tabs button,.shellui .railplan,.shellui .tabs .railstop{position:relative} /* 13b: hover reveals the room's name. The same element the rail hides — one string, so the flyout can never disagree with the accessible name. The ⋯ is excluded: it opens the drawer on the same gesture, so its own tooltip would land on top of the rooms it just revealed. Its span stays put as the button's accessible name. */ .shellui .tabs button:not(.tabmore):hover>span:last-child, .shellui .tabs button:not(.tabmore):focus-visible>span:last-child, .shellui .railfb:hover>span:last-child, .shellui .railfb:focus-visible>span:last-child, .shellui .railplan:hover>span:last-child, .shellui .railplan:focus-visible>span:last-child, .shellui .tabs .railstop:hover>span:last-child, .shellui .tabs .railstop:focus-visible>span:last-child{ position:absolute;left:calc(100% + 10px);top:50%;transform:translateY(-50%); width:auto;height:auto;overflow:visible;clip-path:none;z-index:40; border:2px solid var(--play-ink);border-radius:999px; background:var(--play-card);color:var(--play-ink); padding:2px 12px;font:400 .85rem/1.35 var(--play-display); /* Load-bearing: the flyout's containing block is the 44px icon, so an auto width shrink-fits to a sliver and the name wraps per character. */ white-space:nowrap;pointer-events:none; } .railmore{position:relative;display:flex;flex-direction:column;align-items:center} .shellui .tabmore{background:none;border:0;padding:4px;cursor:pointer} .shellui .tabmore:focus-visible{outline:3px solid var(--play-link);outline-offset:2px;border-radius:50%} .shellui .tabmore:hover .ric{box-shadow:0 3px 0 var(--play-edge)} .shellui .tabmore[aria-expanded="true"] .ric{background:var(--play-accent);color:var(--play-accent-ink)} /* When the room you are in lives behind the ⋯, the ⋯ has to carry the "you are here" mark — otherwise the rail shows no current stop at all on the planner, on Trophies, and in the guide. */ .shellui .railmore:has([aria-current="page"]) .tabmore .ric, .shellui .railmore:has(button.active) .tabmore .ric{ background:var(--play-accent);color:var(--play-accent-ink); } /* Peeked: the three icons alone. Latched: the same three with their names. */ .shellui .raildrawer{ position:absolute;left:calc(100% + 10px);top:0;z-index:35; display:flex;align-items:center;gap:8px; } .shellui .raildrawer[hidden]{display:none} .shellui .raildrawer.is-latched{ flex-direction:column;align-items:stretch;gap:4px; border:2px solid var(--play-ink);border-radius:14px;padding:8px; background:var(--play-card);box-shadow:4px 4px 0 var(--play-edge); } .shellui .raildrawer button,.shellui .raildrawer .railplan,.shellui .raildrawer .railstop{ display:flex;align-items:center;gap:8px;padding:2px; } .shellui .raildrawer.is-latched .ric{width:32px;height:32px;font-size:15px} /* Names show only once it is latched; the peek is icons, as 13b draws it. */ .shellui .raildrawer.is-latched button>span:last-child, .shellui .raildrawer.is-latched .railplan>span:last-child, .shellui .raildrawer.is-latched .railstop>span:last-child{ position:static;width:auto;height:auto;clip-path:none;overflow:visible; transform:none;border:0;background:none;padding:0 6px 0 0; font:400 .9rem/1 var(--play-display);color:var(--play-ink);white-space:nowrap; } /* …and the hover flyout must not fire inside the panel, where the name is already printed. This has to match the flyout's own specificity and undo everything it sets — a lighter `*:hover` selector lost to it for