/* ============================================================================================= modern.css — the "v1.37" face of Prompted (M18 [skin] direction, M21 control grammar). One idea carries the page: the product has two worlds, and the flip between them is a temperature change, not just an inversion. Receive is the SHORE — warm paper, where you read what washed up. Prompt is the DEEP — cool blue-black water you cast into. Entering a world plays the page-wide crossfade (the tide); the fork behind Back is a pair of honest doors, each a window into its own world. Strictly two-temperature monochrome — no third color — so SHAPE does all the talking, one meaning per shape: - solid pill = THE primary action, at most one per screen (release, pull, send…); - bordered card + › = something that opens (a filled slot); - dashed socket = capacity, quietly (an empty slot — clickable, but never shouting); - underlined word = a small action in text's voice (the Backs, archive); - left-ruled text = static content (your prompt, the response) — never a control; - the window bar's ✕ = the one way out of an app (the grammar 1.36's page-exit set). This file styles the markup core.js emits (see MARKUP + the render functions there) plus this page's own mast and window chrome. It must keep matching if core's structure changes. ============================================================================================= */ :root { color-scheme: light; --font-hand: 'Architects Daughter', 'Segoe Print', cursive; --font-body: 'Inter', system-ui, sans-serif; /* M33 hand-drawn book palette. The shell chrome (rail, badges, devlog) uses the hand-drawn tokens below; the product INTERIOR keeps its original token NAMES (--muted/--surface/--accent /--line/--field-line/…) re-based onto this palette, so every core screen recolours coherently. Contrast-checked against WCAG AA on --paper: --muted ~5:1; --accent IS the ink (max contrast by construction); --field-line is the 3:1 form-boundary token, separate from --line. */ --paper: #f8f1de; /* +saturation pass: a touch warmer than #f4efe2 */ --paper-hi: #fdf7e9; --sidebar: #e7ebd3; /* CHROME: a soft sage, set clearly apart from the cream centre (ref) */ --ink: #3c362b; --ink-line: #4a4336; /* icon stroke */ --pencil: #6a6252; /* the hand-drawn border line */ --line-soft: #a89e88; /* soft borders (mast, sidebar edge, version chip) */ --hatch: rgba(74, 66, 54, 0.09); --muted: #6a6252; --line: #ddd6c6; /* decorative interior hairline */ --field-line: #8a8270; --surface: #fdf7e9; --accent: #3c362b; --accent-ink: #f6f2e8; /* text on accent */ --accent-wash: rgba(60, 54, 43, 0.08); --shadow-rgb: 60, 54, 43; /* drop-shadow colour; warm-dark on light paper */ --logo-contour: rgba(58, 51, 41, 0.9); /* dark rim around the logo on light paper */ --danger: #9a4a3f; --live: #3f9457; /* the one saturated green: the "they're here" dot */ /* icon fills, from the reference sheet's palette */ --fill-tan:#e7d3ad; --fill-gold:#efd98a; --fill-sky:#aecbe0; --fill-pink:#e9b3aa; --fill-sage:#bcd3a6; --fill-lav:#cebfe6; --radius: 10px; --tide: 750ms; --tile-radius: 13px 10px 14px 11px / 11px 14px 10px 13px; --frame-pad: clamp(16px, 3vw, 48px); } /* ============================================================================================ DARK MODE — M36 groundwork, FIRST DRAFT palette (to react to, not final). The whole shell is token-driven, so redefining the ~20 colour tokens under this one selector flips the rail, badges, product-core screens, thread and Shared wall at once. Only colour tokens change; radii/timing/layout tokens stay on :root. modern.js stamps data-theme on from localStorage or the OS preference; light is the :root default (no [data-theme="light"] block needed). "Night paper": warm dark brown ground + warm cream ink, keeping the hand-drawn character rather than a cold black. Contrast targets AA on --paper. ---------------------------- */ :root[data-theme="dark"] { --paper: #231d15; /* +saturation pass: a touch warmer than #211d17 */ --paper-hi: #2e271b; --sidebar: #1a1611; /* CHROME: a darker grey-brown (no green), set apart from the warm-brown centre */ --ink: #ece3d1; --ink-line: #d9cfb8; /* icon stroke, light warm */ --pencil: #a1957b; /* hand-drawn border, must read on dark */ --line-soft: #6a6252; --hatch: rgba(236, 227, 209, 0.05); --muted: #b0a68f; --line: #3a3329; /* interior hairline, subtle on dark */ --field-line: #7a7160; --surface: #2e271b; /* inputs/cards, lifted from paper so fields read */ --accent: #ece3d1; /* the ink-accent inverts: light pill, dark text (Send, "me" bubble) */ --accent-ink: #211d17; --accent-wash: rgba(236, 227, 209, 0.10); --shadow-rgb: 0, 0, 0; /* on dark, a warm-light shadow reads as a GLOW — go true-dark instead */ --logo-contour: rgba(242, 235, 221, 0.95); /* flips to a white rim so the logo's edge reads on dark */ --danger: #d98a7e; --live: #5cc47f; /* badge grounds go to dark muted tints so the light icon stroke reads on them */ --fill-tan:#453a28; --fill-gold:#4a4020; --fill-sky:#2b3a45; --fill-pink:#472d2a; --fill-sage:#313e2a; --fill-lav:#36304a; } * { box-sizing: border-box; } /* Sections here carry their own display values (flex/grid), which would silently outrank the UA's [hidden] rule — this keeps the attribute meaning what it says. */ [hidden] { display: none !important; } /* Fluid root: the whole shell is sized in rem, so scaling the root scales everything at once — phone-correct at the 16px floor (protects iOS's 16px input-zoom threshold), ~19px on a big monitor viewed at arm's length. This is the spine of "react to the environment": the same markup reads bigger where there's more room. (M25) */ html { height: 100%; font-size: clamp(16px, 14.4px + 0.45vw, 19px); } body { margin: 0; min-height: 100dvh; display: flex; flex-direction: column; font-family: 'Inter', system-ui, sans-serif; font-size: 1rem; font-weight: 500; line-height: 1.6; background: var(--paper); color: var(--ink); transition: background-color var(--tide) ease, color var(--tide) ease; -webkit-font-smoothing: antialiased; } ::selection { background: var(--accent-wash); } /* Tapping a control on a phone shouldn't flash-highlight it or drag a text selection onto the UI chrome — tapping Start was selecting the fork's "What do you want to do?" heading. Kill the tap flash, and make the chrome / controls / headings unselectable. User-written text — prompts, answers, chat, and anything typed into a field — stays selectable so it can still be copied. */ body { -webkit-tap-highlight-color: transparent; } button, .nav-item, .nav-label, .side, .side-sub, h1, h2, .app-eyebrow, .window-bar, .wordmark, .clock, .session-line, .center-app-name, .devlog-title { -webkit-user-select: none; user-select: none; } /* .shared-q is an h2 (caught by the chrome no-select rule above) but holds USER content — a published prompt on the shared wall must stay copyable (M35 review). */ .box, .msg, .doc-text, .notes-area, input, textarea, .shared-q { -webkit-user-select: text; user-select: text; } /* No border-radius here: the bare pseudo-class outranks element rules like textarea's 10px radius, and would visibly snap field corners on keyboard focus (review finding). The outline follows each element's own radius natively. */ :focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; } /* --- The mast: wordmark left; the SEPARATE Devlog pill + clock right (M33) ------------------- */ .mast { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 15px clamp(18px, 3vw, 34px); background: var(--sidebar); /* chrome tone — sets the header apart from the central area, like the sidebar */ border-bottom: 2.5px solid var(--pencil); } .mast-brand { display: flex; align-items: center; gap: clamp(8px, 1.4vw, 14px); } .mast-logo { height: clamp(34px, 3.4vw, 44px); width: auto; display: block; /* a crisp theme-aware outline: 4 zero-blur drop-shadows trace the alpha edge in each direction, so the brain-tree gets a real 1px rim — dark on light paper, white on the dark theme */ filter: drop-shadow( 1px 0 0 var(--logo-contour)) drop-shadow(-1px 0 0 var(--logo-contour)) drop-shadow(0 1px 0 var(--logo-contour)) drop-shadow(0 -1px 0 var(--logo-contour)); } .wordmark { margin: 0; font-family: var(--font-hand); font-size: clamp(1.5rem, 1rem + 1.6vw, 2rem); line-height: 1; color: var(--ink); display: inline-flex; align-items: baseline; } .wordmark .wordmark-version { margin-left: 0.7em; } .wordmark-version { font-family: var(--font-hand); font-size: 0.55em; color: var(--line-soft); border: 2.5px solid var(--pencil); border-radius: 9px 6px 10px 5px / 5px 10px 6px 9px; padding: 0.08em 0.5em; transform: rotate(-2deg); } .mast-right { display: flex; align-items: center; gap: clamp(12px, 2vw, 22px); } /* Theme toggle (M36): a half-filled contrast disc, painted with currentColor so it flips too. */ .theme-toggle { display: flex; align-items: center; justify-content: center; padding: 4px; background: none; border: none; cursor: pointer; color: var(--muted); transition: color 140ms ease; } .theme-toggle:hover { color: var(--ink); } .theme-ic { width: 22px; height: 22px; display: block; } .theme-ic circle { fill: none; stroke: currentColor; stroke-width: 1.7; } .theme-ic path { fill: currentColor; } .clock { margin: 0; font-family: var(--font-hand); font-size: clamp(0.95rem, 0.7rem + 0.6vw, 1.15rem); color: var(--line-soft); white-space: nowrap; } .devlog-btn { position: relative; font-family: var(--font-hand); font-size: 0.95rem; letter-spacing: 0.06em; color: var(--ink); background: repeating-linear-gradient(46deg, var(--hatch) 0 1.3px, transparent 1.3px 5px), var(--paper-hi); border: 0; border-radius: 999px; padding: 6px 18px 5px; cursor: pointer; transition: background-color 140ms ease; } .devlog-btn::before { content: ''; position: absolute; inset: 0; pointer-events: none; border: 3px solid var(--pencil); border-radius: 999px; filter: url(#rough-card); /* gentler wobble — #rough tore this pill's border at the corners */ } .devlog-btn:hover { background: linear-gradient(var(--accent-wash), var(--accent-wash)), repeating-linear-gradient(46deg, var(--hatch) 0 1.3px, transparent 1.3px 5px), var(--paper-hi); } /* --- The workspace: a persistent app rail | a centre that fills (M33) ------------------------ */ .workspace { flex: 1; display: grid; grid-template-columns: clamp(198px, 20vw, 250px) 1fr; min-height: 0; } .sidebar { display: flex; flex-direction: column; gap: 3px; padding: 16px 12px; background: var(--sidebar); border-right: 2.5px solid var(--pencil); /* Scroll the rail internally when its row is bounded — during a live thread the M34 viewport lock caps the workspace grid row to the viewport, and on a short screen (landscape phone, small window) the rail is taller than that. Without this its lower apps (Orbital/About) and the session line clip with no way to reach them. Inert when the rail fits (the common case). */ overflow-y: auto; overscroll-behavior: contain; } .nav-item { display: flex; align-items: center; gap: 13px; width: 100%; padding: 7px 10px; font: inherit; text-align: left; color: var(--ink); background: transparent; border: 0; border-radius: 12px; cursor: pointer; transition: background-color 140ms ease; } .nav-item:hover { background: rgba(74, 66, 54, 0.06); } .nav-item.active { background: rgba(74, 66, 54, 0.11); } .nav-label { font-family: var(--font-hand); font-size: 1.05rem; } /* the small hatched badge that carries each icon in the rail */ .nav-badge { position: relative; flex: 0 0 auto; display: grid; place-items: center; width: 40px; height: 40px; border-radius: var(--tile-radius); background: repeating-linear-gradient(46deg, var(--hatch) 0 1.3px, transparent 1.3px 5px), var(--paper-hi); } .nav-badge::before { content: ''; position: absolute; inset: 0; pointer-events: none; border: 3px solid var(--pencil); border-radius: var(--tile-radius); filter: url(#rough); } .session-line { margin: auto 0 2px; padding: 12px 10px 0; font-family: var(--font-hand); font-size: 0.95rem; color: var(--line-soft); } .session-label { text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.72rem; margin-right: 5px; } /* --- The hand-drawn icon system (rail badges + shell) --------------------------------------- */ .ic { position: relative; width: 60%; height: 60%; } .ic-fill { fill: var(--fill, transparent); stroke: none; } .ic-line { fill: none; stroke: var(--ink-line); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; } .ic-dot { fill: var(--ink-line); stroke: none; } .ic-center { fill: #e8bf52; stroke: none; } .ic-sweep { fill: rgba(74, 67, 54, 0.16); stroke: none; } .w-tan{--fill:var(--fill-tan);} .w-gold{--fill:var(--fill-gold);} .w-sky{--fill:var(--fill-sky);} .w-pink{--fill:var(--fill-pink);} .w-sage{--fill:var(--fill-sage);} .w-lav{--fill:var(--fill-lav);} /* --- The centre: whatever's open fills it (visual stability) -------------------------------- */ .center { padding: clamp(18px, 2.6vw, 40px); display: flex; min-height: 0; overflow-y: auto; } .center > * { flex: 1; min-height: 0; width: 100%; max-width: 900px; margin: 0 auto; } /* Devlog panel */ .devlog { display: flex; flex-direction: column; background: var(--paper-hi); border: 2.5px solid var(--pencil); border-radius: 16px; box-shadow: 0 12px 34px -26px rgba(var(--shadow-rgb), 0.55); overflow: hidden; } .devlog-bar { display: flex; justify-content: space-between; align-items: center; padding: 15px 20px; border-bottom: 2px dashed var(--line-soft); } .devlog-title { margin: 0; font-family: var(--font-hand); font-size: 1.5rem; color: var(--ink); } .devlog-close { display: grid; place-items: center; width: 34px; height: 34px; font-size: 1rem; color: var(--muted); background: transparent; border: 0; border-radius: 8px; cursor: pointer; transition: color 140ms ease, background-color 140ms ease; } .devlog-close:hover { color: var(--ink); background: rgba(74, 66, 54, 0.08); } .devlog-body { padding: 6px 22px 20px; overflow-y: auto; } .devlog-sub { margin: 12px 0 4px; font-family: var(--font-hand); font-size: 1.05rem; color: var(--muted); } .log-entry { display: flex; gap: 14px; align-items: flex-start; padding: 15px 0; border-bottom: 1px dashed var(--line-soft); } .log-entry:last-child { border-bottom: 0; } .log-tag { flex: 0 0 auto; margin-top: 2px; font-family: var(--font-hand); font-size: 0.76rem; letter-spacing: 0.06em; text-transform: uppercase; padding: 3px 10px; border-radius: 999px; color: var(--ink); } .log-tag.t-new { background: var(--fill-sage); } .log-tag.t-try { background: var(--fill-sky); } .log-text { margin: 0; font-size: 0.98rem; color: var(--ink); } /* Centre when the Devlog is closed and nothing else is open */ .center-hint { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 6px; color: var(--muted); border: 2.5px dashed var(--line-soft); border-radius: 16px; } .center-hint p { margin: 0; } .center-app-name { font-family: var(--font-hand); font-size: 1.7rem; color: var(--ink); } /* --- Window chrome: an open app is a window — the two ways out, and the app's name ------------- */ .window-bar { display: flex; align-items: center; gap: 12px; margin: 0 0 12px; } /* ✕ is always hard right, whether or not Back is present (Back is hidden on the fork). */ .window-close { margin-left: auto; } /* Back: a word in text's voice with a leading arrow, sitting in the chrome row. It drives the core's own per-view Back (hidden in this skin — see below); modern.js does the delegation. */ .window-back { display: inline-flex; align-items: center; margin-left: -8px; padding: 6px 10px; font: inherit; font-size: 0.88rem; font-weight: 600; color: var(--muted); background: transparent; border: 1px solid transparent; border-radius: var(--radius); cursor: pointer; transition: color 150ms ease, background-color 150ms ease; } /* a hand-drawn left arrow (arrow-back.svg) painted with currentColor via a mask, so it matches the drawn aesthetic and follows the button's colour in both themes + on hover. The core's ← text is hidden (indented out) — it stays as the control's silent glyph, the SVG is what shows. */ .window-back-arrow { display: inline-block; font-size: 1.05rem; width: 0.9em; height: 0.9em; vertical-align: -0.1em; overflow: hidden; text-indent: 150%; white-space: nowrap; background-color: currentColor; -webkit-mask: center / contain no-repeat url(arrow-back.svg); mask: center / contain no-repeat url(arrow-back.svg); } .window-close { display: grid; place-items: center; width: 40px; height: 40px; margin-right: -10px; /* the glyph, not the hit-area, aligns with the column edge */ font: inherit; font-size: 1.05rem; color: var(--muted); background: transparent; border: 1px solid transparent; border-radius: var(--radius); cursor: pointer; transition: color 150ms ease, border-color 150ms ease; } /* The eyebrow: the app's name above each screen's own title (microtype voice, shared rule). */ .app-eyebrow { margin: 0 0 6px; color: var(--muted); } /* This skin routes in-app Back through the chrome; the core's per-view Back buttons still exist (modern.js clicks the visible one) but are not shown — one Back per window, up top. */ #core-host #world-back, #core-host #compose-back, #core-host #claim-confirm-back, #core-host #thread-back, #core-host #broadcast-back { display: none; } /* --- Centre panels: the product / Shared results / About / a tool — each a book-paper panel filling the centre (capped to a readable measure by `.center > *`). (M33) ------------------- */ #view-app, #view-shared, #view-about, #view-tool, #view-login { padding: clamp(20px, 1rem + 2vw, 40px); background: var(--paper-hi); border: 2.5px solid var(--pencil); border-radius: 16px; box-shadow: 0 12px 34px -26px rgba(var(--shadow-rgb), 0.55); } /* #app-column wraps the product window (kept as the flex host the live-thread fill chain uses). */ #app-column { display: flex; flex-direction: column; } #app-column[hidden] { display: none; } /* --- The shared results (M30; filterable cards M35): a read-only wall in the centre ---------- A row of topic chips (reusing .topic-chip — built once, aria-pressed updated in place) over a stack of CARDS, one per published exchange: a meta line (topic · bot · date), the prompt as the headline, the answer as a quoted reply under an accent bar. The wall is the product's shop window, so each exchange reads as a discrete artifact, not a line in a dump. */ .shared-intro { margin: 0 0 18px; color: var(--muted); font-size: 0.92rem; max-width: 58ch; } .shared-filter { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 20px; } .shared-item { padding: 18px 20px; background: var(--paper); border: 1.5px solid var(--line); border-radius: 13px; } .shared-item + .shared-item { margin-top: 16px; } .shared-meta { display: flex; align-items: center; gap: 12px; margin: 0 0 12px; } .shared-topic { font-family: var(--font-hand); font-size: 0.8rem; color: var(--ink); border: 1.5px solid var(--pencil); border-radius: 999px; padding: 2px 12px; } .shared-topic.none { color: var(--muted); border-color: var(--line); } .shared-bot { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); } .shared-date { margin-left: auto; font-size: 0.76rem; color: var(--muted); } /* user content stays Inter (the hand font is chrome-only, M33) — h2 must opt out of both the global heading margin and the hand-font heading rule. */ .shared-q { font-family: var(--font-body); font-size: 1.05rem; font-weight: 600; color: var(--ink); line-height: 1.45; margin: 0; } .shared-a { font-size: 0.95rem; line-height: 1.55; margin-top: 14px; padding: 2px 0 2px 16px; border-left: 3px solid var(--accent); border-radius: 0; } /* (The M30 share control has no base styling here anymore: since M35 it only ever renders inside the live thread's ⚙ pop, which styles it in full — see the .thread-menu-pop rules.) */ /* --- Interest topics (M31): one chip grammar for the compose picker and the pull filter ------- */ .topic-picker { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 14px; } .topic-label { font-size: 0.66rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.09em; color: var(--muted); margin-right: 2px; } .topic-chip { padding: 6px 12px; font: inherit; font-size: 0.82rem; font-weight: 600; color: var(--muted); background: transparent; border: 1px solid var(--line); border-radius: 999px; cursor: pointer; transition: color 150ms ease, border-color 150ms ease, background-color 150ms ease; } .topic-chip[aria-pressed="true"] { color: var(--ink); background: var(--surface); border-color: var(--ink); } @media (hover: hover) { .topic-chip:hover { color: var(--ink); } } .about-title { margin: 6px 0 18px; } #view-about p { max-width: 56ch; } /* --- Sign in (M37): the account gate. A quiet two-step form (email → 6-digit code), styled to sit inside the book-paper panel like the About/tool windows. ------------------------------------- */ .login-intro { margin: 0 0 22px; color: var(--muted); font-size: 0.95rem; max-width: 46ch; line-height: 1.5; } .login-form { display: flex; flex-direction: column; gap: 12px; max-width: 22rem; } .login-label { font-family: var(--font-hand); font-size: 0.95rem; color: var(--ink); } .login-input { font-family: var(--font-body); font-size: 1rem; padding: 11px 13px; color: var(--ink); background: var(--surface); border: 1.5px solid var(--field-line, var(--line-soft)); border-radius: 10px; } .login-input::placeholder { color: var(--muted); opacity: 0.7; } .login-code-input { font-size: 1.4rem; letter-spacing: 0.25em; text-align: center; font-variant-numeric: tabular-nums; } .login-code-input::placeholder { letter-spacing: 0; } .login-btn { align-self: flex-start; margin-top: 4px; } .login-link { align-self: flex-start; font-family: var(--font-hand); font-size: 0.9rem; color: var(--muted); background: none; border: none; padding: 2px 0; cursor: pointer; text-decoration: underline; } .login-link:hover { color: var(--ink); } .login-note { margin: 16px 0 0; color: var(--muted); font-size: 0.9rem; min-height: 1.2em; max-width: 40ch; line-height: 1.5; } /* Account area in the rail: the sign-out control under the session line (M37). */ .rail-account { margin: auto 0 2px; } .rail-account .session-line { margin: 0; } .sign-out-btn { margin: 4px 10px 0; font-family: var(--font-hand); font-size: 0.9rem; color: var(--muted); background: none; border: none; padding: 2px 0; cursor: pointer; text-decoration: underline; } .sign-out-btn:hover { color: var(--ink); } .sign-out-btn[hidden] { display: none; } h1, h2 { line-height: 1.2; margin: 0 0 22px; } /* Visually-hidden-but-announced (standard clip recipe). Carries the core's screen-title

s on views that have no visible title by design (the chat, the transmission) — M28. */ .sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; } /* --- Desktop tools (M27): Readme / Notes / Calculator / Trash share the one #view-tool window -- The 1.37 restorations of the 1989 machine's stock apps (app.js) — same mechanics, this skin. */ #tool-title { margin: 6px 0 20px; } /* Readme: a plain document — keep its own line breaks, hold a readable measure. */ .doc-text { white-space: pre-wrap; max-width: 58ch; line-height: 1.65; } /* Notes: a scratchpad that fills the window (inherits the base textarea skin). */ .notes-area { width: 100%; min-height: 300px; line-height: 1.6; } /* Calculator: a centred keypad under a right-aligned readout. Tabular figures so the display doesn't reflow as digits change; the C key is a full-width clear bar. */ .calc-display { max-width: 320px; margin: 0 auto 12px; padding: 16px 18px; text-align: right; font-size: 1.9rem; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--ink); background: var(--surface); border: 1px solid var(--field-line); border-radius: var(--radius); overflow-x: auto; } .calc-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; max-width: 320px; margin: 0 auto; } .calc-key { padding: 16px 0; font: inherit; font-size: 1.15rem; font-weight: 600; color: var(--ink); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); cursor: pointer; transition: border-color 150ms ease, background-color 150ms ease; } .calc-key.calc-op { color: var(--accent); font-weight: 700; } .calc-key.calc-c { grid-column: 1 / -1; color: var(--danger); } /* Screen title: the big line under the eyebrow, one scale across the product's screens (Ask, Answer, Write a prompt, Pull from the ocean, the fork). These are all

now (M28: one heading per view); compose's title also labels its textarea via aria-labelledby. */ .fork-heading, #claim-confirm-heading, #compose-heading { display: block; font-size: 1.5rem; font-weight: 700; letter-spacing: -0.02em; line-height: 1.15; color: var(--ink); margin: 0 0 20px; } .about-title { font-size: 1.5rem; font-weight: 700; letter-spacing: -0.02em; } /* The world's title stacks: the verb big, the count beneath it (the ref's "Ask" over "0 / 4"). */ #world-title { margin: 0 0 20px; } .wt-verb { display: block; font-size: 1.9rem; font-weight: 700; letter-spacing: -0.025em; line-height: 1.05; } .wt-count { display: block; margin-top: 6px; font-size: 1rem; font-weight: 700; color: var(--muted); font-variant-numeric: tabular-nums; } /* microtype: the instrument-label voice used for every state word (and the app eyebrow) */ .slot-state, .tag, .broadcast-tag, .who, .app-eyebrow { font-size: 0.66rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.09em; } /* --- The fork: two doors, one into each world -------------------------------------------------- */ .side-picker { display: flex; flex-direction: column; gap: 14px; margin-bottom: 26px; } @media (min-width: 460px) { .side-picker { flex-direction: row; } } /* Both doors are the same quiet card on the same ground — no colour-flip, so the DIRECTION does the telling: a verb, an arrow (out ↗ / in ↙), a one-line hint. Clicking one enters it. */ .side { flex: 1; display: flex; flex-direction: column; gap: 6px; padding: 20px 20px; text-align: left; font: inherit; color: var(--ink); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); /* doors sit slightly proud of the ground — they open, so they cast */ box-shadow: 0 2px 10px rgba(31, 38, 28, 0.06); cursor: pointer; transition: border-color 150ms ease, transform 150ms ease; } .side-verb { display: flex; align-items: center; gap: 11px; font-size: 1.1rem; font-weight: 700; letter-spacing: -0.01em; } .side-arrow { font-size: 1.2rem; color: var(--muted); } .side-sub { font-size: 0.82rem; font-weight: 500; color: var(--muted); } /* No .confirm-area rule: the core itself hides the area under a direct-entry fork — the emptiness is its fact, not each skin's to re-suppress. */ /* --- Controls ---------------------------------------------------------------------------------- */ /* default .action: quiet secondary */ .action { display: inline-block; margin: 2px 0; padding: 10px 20px; font: inherit; font-size: 0.9rem; font-weight: 600; color: var(--ink); background: transparent; border: 1px solid var(--line); border-radius: var(--radius); cursor: pointer; transition: border-color 150ms ease, background-color var(--tide) ease, color var(--tide) ease; } .action:disabled { opacity: 0.5; cursor: default; } /* the acts of commitment get the solid pill: release, pull, answer, send — and each world's one primary action above its slots */ #compose-release, #claim-pull, #broadcast-send, #world-action, #chat-form .action, #thread-body .stack > .action { color: var(--accent-ink); background: var(--accent); border-color: var(--accent); border-radius: 999px; padding: 12px 28px; } /* --- Screen layout ----------------------------------------------------------------------------- Since M23 the in-app Back lives in the chrome row (not beside the pill), so each screen is a simple vertical stack: title, then its one primary pill, then content. The core's own Back buttons are hidden in this skin (the chrome Back drives them). */ #view-world { display: block; } #world-action { margin: 0; } #view-world .slot-grid { margin: 20px 0 26px; } /* a switched-off pill goes hollow — visibly OFF, not just a dimmer copy of ON */ #compose-release:disabled, #claim-pull:disabled, #broadcast-send:disabled, #world-action:disabled, #chat-form .action:disabled, #thread-body .stack > .action:disabled { opacity: 1; color: var(--muted); background: transparent; border-color: var(--line); } /* the ways back are words in text's voice — marked as actions at rest, not only on hover */ #world-back, #compose-back, #claim-confirm-back, #thread-back, #broadcast-back { border-color: transparent; color: var(--muted); padding-left: 4px; padding-right: 4px; text-decoration: underline; text-underline-offset: 4px; } .stack { display: flex; flex-direction: column; gap: 12px; align-items: flex-start; } .stack textarea, .stack input, .stack label { width: 100%; } label { font-size: 0.86rem; font-weight: 600; color: var(--muted); } textarea, input { padding: 13px 15px; font: inherit; /* 1rem exactly: sub-16px inputs trigger iOS Safari's focus auto-zoom, which leaves the page zoomed after every chat send on the product's highest-traffic interaction. */ font-size: 1rem; color: var(--ink); background: var(--surface); border: 1px solid var(--field-line); border-radius: var(--radius); resize: vertical; transition: border-color 150ms ease, background-color var(--tide) ease, color var(--tide) ease; } textarea:focus, input:focus { border-color: var(--accent); outline: none; } textarea::placeholder, input::placeholder { color: var(--muted); } .note { font-size: 0.86rem; color: var(--muted); margin: 8px 0; } /* --- Boxes: prompt and response — static content, never controls ------------------------------- No card skin here: the surface+border+radius look now belongs to things you can click (slots). Content is bare text hung on a left rule, so "is this a button?" never needs asking. */ .box { padding: 2px 0 2px 16px; margin: 14px 0; border-left: 2px solid var(--line); transition: border-color var(--tide) ease, color var(--tide) ease; } .box .tag { display: block; color: var(--muted); margin-bottom: 6px; } /* The fade is done with COLOR, not element opacity: opacity composites the whole box down and drags the 10px microtype tag to 2.9:1 (review finding, math verified). --muted reads as recessed and stays AA. */ .box.context { color: var(--muted); font-size: 0.92rem; } /* the stranger's answer is the payoff: when prompt and response sit together, the second box (the response) surfaces back out of the context fade and carries the accent */ #thread-body .box + .box { color: var(--ink); font-size: 1.02rem; border-left: 3px solid var(--accent); padding-left: 20px; } /* User-written text can contain unbroken 100+ char tokens (URLs, slugs); without this they set min-content width, escape their boxes, and hand the page a horizontal scrollbar at 375px (review finding). 'anywhere' also fixes grid min-content sizing for the slots. */ .box, .msg, .slot, .broadcast-banner, .broadcast-log, .broadcast-sent, .note, #thread-body { overflow-wrap: anywhere; } /* --- The world's slots ------------------------------------------------------------------------- */ .slot-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; margin: 4px 0 26px; } @media (min-width: 480px) { .slot-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } } /* A filled slot is a card that opens: bordered, slightly proud, marked with a chevron. */ .slot { position: relative; display: flex; flex-direction: column; gap: 10px; min-width: 0; min-height: 96px; padding: 15px 38px 15px 16px; text-align: left; font: inherit; font-size: 0.93rem; color: var(--ink); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08); cursor: pointer; transition: border-color 150ms ease, transform 150ms ease, background-color var(--tide) ease, color var(--tide) ease; } .slot::after { content: '›'; position: absolute; top: 13px; right: 15px; font-size: 1.1rem; line-height: 1; color: var(--muted); } .slot-state { color: var(--muted); margin-top: auto; } /* An empty slot is a socket: it shows capacity, quietly. (Still clickable — a shortcut to the same place as the world's pill — but the pill carries the words.) */ .slot-empty { background: transparent; border-style: dashed; box-shadow: none; } .slot-empty::after { content: none; } .slot-empty .slot-state { margin: auto; } /* --- The broadcast surface is not part of this page -------------------------------------------- The core renders a broadcast slot; this stylesheet doesn't show it — which surfaces appear is each page's own decision. (Styles below kept for the .broadcast-log/sent classes the thread/broadcast views can still emit.) */ #broadcast-slot { display: none; } /* --- The broadcast: something that arrived for everyone ---------------------------------------- */ .broadcast-banner { display: block; width: 100%; padding: 15px 18px; margin: 0 0 14px; text-align: left; font: inherit; font-size: 0.93rem; color: var(--ink); background: var(--surface); border: 1px solid var(--line); border-left: 3px solid var(--accent); border-radius: var(--radius); cursor: pointer; transition: border-color 150ms ease, background-color var(--tide) ease, color var(--tide) ease; } .broadcast-banner span { display: block; } .broadcast-banner .broadcast-tag { color: var(--accent); margin-bottom: 4px; } .broadcast-banner .slot-state { margin-top: 6px; } .broadcast-log { margin: 16px 0; padding: 14px 18px; font-size: 0.88rem; color: var(--muted); background: var(--surface); border-left: 2px solid var(--line); border-radius: 0 var(--radius) var(--radius) 0; } .broadcast-log p { margin: 3px 0; } .broadcast-sent { padding: 10px 14px; margin: 8px 0; font-size: 0.9rem; color: var(--muted); background: transparent; border: 1px dashed var(--line); border-radius: var(--radius); } /* --- Live chat --------------------------------------------------------------------------------- */ .chat-area { margin-top: 14px; } #presence-line { font-size: 0.82rem; color: var(--muted); margin: 0 0 8px; } #presence-line:empty { display: none; } /* no gap when they're not here (the line is empty then) */ /* the one live green: the dot goes bright only while they're actually here (the ○ away-dot stays muted). The core hangs the `present` class + aria-hidden .presence-dot span. */ #presence-line.present .presence-dot { color: var(--live); } #chat-log { display: flex; flex-direction: column; gap: 8px; min-height: 140px; max-height: 340px; overflow-y: auto; padding: 14px; margin: 0 0 12px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); transition: background-color var(--tide) ease, border-color var(--tide) ease; } .msg { max-width: 80%; padding: 8px 13px; border-radius: 12px; border: 1px solid var(--line); background: var(--paper); align-self: flex-start; transition: background-color var(--tide) ease, border-color var(--tide) ease, color var(--tide) ease; } .msg.mine { align-self: flex-end; background: var(--accent-wash); border-color: transparent; } /* inherit + opacity instead of --muted: over the accent-wash bubble, --muted lands at ~4.0:1 for 10px text (review finding). Ink at 0.75 stays above 6:1 on every bubble in both worlds. */ .msg .who { display: block; color: inherit; opacity: 0.75; margin-bottom: 2px; } .chat-empty { text-align: center; margin: auto; } #chat-form { display: flex; gap: 10px; } #chat-form input { flex: 1; min-width: 0; } /* --- Archive: the one destructive act, kept far and marked ------------------------------------- */ .archive-zone { margin-top: 44px; padding-top: 16px; border-top: 1px dashed var(--line); } .archive-zone .action { color: var(--danger); border-color: transparent; font-size: 0.84rem; padding-left: 4px; text-decoration: underline; text-underline-offset: 4px; } /* --- M34: the live thread reads like a messaging app (modern skin only) ----------------------- The brief: the live-thread screen did too much (prompt + answer + chat + a full share panel + archive, all stacked). Here it becomes a DM — the prompt is a compact context HEADER, the answer opens the conversation, the replies are a bubble stream, and the input PINS to the bottom edge. Everything is gated on the live chat actually existing (`:has(#chat-log)`), so ONLY the live state gets the fill+pin treatment; the fork/compose/world/open/claimed screens keep normal document flow. It's also a clean progressive enhancement — a browser without :has() simply keeps the pre-M34 stacked layout (none of these rules match). Nothing here touches core.js or the CRT. The answer is folded into #chat-log as the first bubble by the core (opts.messaging), so it scrolls with the replies. Since M35 the share + archive controls no longer stack above the chat: the core collapses them into a ⚙ menu docked beside the composer (see the M35 block below), so the live view is just prompt-header + conversation + composer, with plain flex flow (not `order`, so visual order matches DOM / focus / screen-reader order). */ /* Pin the input to the bottom edge = bound the whole thing to the viewport, so the chat scrolls INSIDE the panel instead of growing the page (without this the composer slides off-screen on a phone — a tall answer eats the flex space). The gate is the VISIBLE live thread: `#chat-log` lingers in the hidden thread view after you navigate away, so keying off its bare presence would wrongly constrain the fork/world too. Bounding is scoped to `body`/`.workspace` via :has so every other view keeps its normal grow-and-page-scroll behaviour. */ body:has(#app-column:not([hidden]) #view-thread:not([hidden]) #chat-log) { height: 100dvh; overflow: hidden; } .workspace:has(#app-column:not([hidden]) #view-thread:not([hidden]) #chat-log) { grid-template-rows: minmax(0, 1fr); } /* Fill chain within the bounded box: shell wrapper → product panel → core host → thread view. */ #app-column:has(#view-thread:not([hidden]) #chat-log) > #view-app, #app-column:has(#view-thread:not([hidden]) #chat-log) #core-host, #app-column:has(#view-thread:not([hidden]) #chat-log) #view-thread { flex: 1; min-height: 0; display: flex; flex-direction: column; } #thread-body:has(#chat-log) { flex: 1; min-height: 0; margin: 0; display: flex; flex-direction: column; } /* Prompt → a compact header: no left rule, a hairline divider under it, quiet. */ #thread-body:has(#chat-log) > .box:first-child { flex: 0 0 auto; margin: 0; padding: 0 0 12px; border-left: 0; border-bottom: 1px solid var(--line); font-size: 0.9rem; } /* --- M35: declutter the live thread to an LLM-chat feel -------------------------------------- Two moves over the M34 layout. (1) The per-message captions the core still emits — the prompt's "prompt — from you · Topic", the answer's "response — from someone", and the "you"/"them" on every reply — go SR-ONLY: kept for screen readers (who said what), taken off screen (bubble alignment + style already carry it), so the conversation reads clean. (2) Share + Archive move off the screen into a ⚙ menu docked at the bottom-right of the composer (the core builds it for the live messaging layout only); the main view is just prompt-header + conversation + composer. */ /* (1) Caption trim — clip, never delete (accessibility). Covers the prompt header's tag, the answer bubble's "who", and every reply's "you"/"them". */ #thread-body:has(#chat-log) > .box:first-child .tag, #thread-body:has(#chat-log) .msg .who { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* (2) The composer docks in a flex row so the ⚙ gear can sit at its bottom-right, beside Send. position:relative sits OUTSIDE the :has() gate on purpose: the pop anchors to the dock, and a browser without :has() must still anchor it beside the gear (in its stacked fallback layout) rather than to the page corner (M35 review). */ .composer-dock { position: relative; } /* Messaging composer (M37): one rounded box — a big auto-growing textarea on top, then a controls bar (⚙ left · Send right). Gives the phone max typing room (was a cramped single-line row). */ #thread-body:has(#chat-log) .composer-dock { flex: 0 0 auto; background: var(--surface); border: 1px solid var(--field-line); border-radius: 16px; padding: 8px 10px; } #thread-body:has(#chat-log) #chat-form { display: flex; flex-direction: column; gap: 4px; } #thread-body:has(#chat-log) #chat-input { width: 100%; border: 0; background: transparent; resize: none; font: inherit; color: var(--ink); line-height: 1.4; padding: 6px 4px; min-height: 26px; max-height: 150px; overflow-y: auto; } #thread-body:has(#chat-log) #chat-input:focus { outline: none; } #thread-body:has(#chat-log) #chat-input::placeholder { color: var(--muted); } .composer-bar { display: flex; align-items: center; justify-content: space-between; gap: 8px; } .composer-bar .thread-menu-toggle { width: 38px; height: 34px; border: 0; background: transparent; } .composer-bar .thread-menu-toggle[aria-expanded="true"] { background: var(--accent-wash); } #chat-form .composer-bar .action { padding: 7px 20px; } .thread-menu { flex: 0 0 auto; display: flex; } .thread-menu-toggle { display: flex; align-items: center; justify-content: center; width: 46px; padding: 0; color: var(--muted); background: var(--surface); border: 1px solid var(--field-line); border-radius: var(--radius); cursor: pointer; transition: border-color 140ms ease, color 140ms ease; } .thread-menu-glyph { width: 21px; height: 21px; background-color: currentColor; -webkit-mask: url("./icon-gear.svg") center / contain no-repeat; mask: url("./icon-gear.svg") center / contain no-repeat; } .thread-menu-toggle:hover { color: var(--ink); } .thread-menu-toggle[aria-expanded="true"] { border-color: var(--accent); } /* The popover opens upward from the gear, anchored to its right edge, above the composer. */ .thread-menu-pop { position: absolute; left: 0; /* the ⚙ now sits at the bar's left, so open above-left under it */ bottom: calc(100% + 10px); /* opens upward, floating just above the composer */ width: min(300px, 100%); /* 100% = the dock width, so it always fits the panel on mobile */ /* short viewports (a phone on its side): cap the height and scroll INSIDE, or the top of the pop — the sentence explaining what sharing means — clips unreachably above the panel (M35 review, measured). Plain-px line first = fallback where dvh isn't supported. */ max-height: 320px; max-height: min(60dvh, 420px); overflow-y: auto; padding: 15px 17px; background: var(--paper-hi); border: 1.5px solid var(--pencil); border-radius: 12px; box-shadow: 0 16px 36px -20px rgba(var(--shadow-rgb), 0.62); z-index: 20; display: flex; flex-direction: column; gap: 16px; } .thread-menu-pop[hidden] { display: none; } /* Inside the menu the two controls read as a normal stacked list — the M30 share status sentence comes back (there's room here, unlike the trimmed M34 row) and archive keeps its danger accent. */ .thread-menu-pop .share-zone, .thread-menu-pop .archive-zone { margin: 0; padding: 0; border-top: 0; } .thread-menu-pop .share-status { margin: 0 0 9px; font-size: 0.86rem; color: var(--muted); } .thread-menu-pop .share-action { font-size: 0.86rem; } .thread-menu-pop .archive-zone { margin-top: 2px; padding-top: 14px; border-top: 1px dashed var(--line); } .thread-menu-pop .archive-zone .action { padding-left: 0; } /* The answer opens the conversation — the core folds it into #chat-log as the first bubble (opts.messaging), so it scrolls up with the replies instead of pinning above them and starving the thread on a phone. Full-width and marked, distinct from the left/right reply bubbles. */ #thread-body:has(#chat-log) .msg.answer { align-self: stretch; max-width: none; background: var(--surface); border-color: var(--line); } /* The conversation fills the rest and scrolls inside itself; the composer pins to the bottom. */ #thread-body:has(#chat-log) > .chat-area { flex: 1 1 0; min-height: 0; margin: 14px 0 0; display: flex; flex-direction: column; } #thread-body:has(#chat-log) #chat-log { flex: 1 1 0; min-height: 0; max-height: none; padding: 4px 2px; margin: 0 0 10px; border: 0; background: transparent; } /* (The composer's top hairline lives on .composer-dock since M35 — the ⚙ gear sits inside the same bordered row as the form, so the border moved from #chat-form to the dock that holds both.) */ /* --- Hover, only where hover exists ------------------------------------------------------------ */ /* Guarded so a phone tap doesn't leave a stuck half-lifted "hover" state behind (review finding): touch devices emulate :hover and never release it until the next tap. */ @media (hover: hover) { .app-tile:hover { background-color: var(--accent-wash); border-color: transparent; transform: translateY(-1px); } .app-tile:hover .tile-badge { border-color: var(--accent); } .window-close:hover { color: var(--ink); border-color: var(--line); } .window-back:hover { color: var(--ink); background-color: var(--accent-wash); } .side:hover { transform: translateY(-1px); border-color: var(--accent); } .action:not(:disabled):hover { border-color: var(--accent); } #compose-release:not(:disabled):hover, #claim-pull:not(:disabled):hover, #broadcast-send:not(:disabled):hover, #world-action:not(:disabled):hover, #chat-form .action:not(:disabled):hover, #thread-body .stack > .action:not(:disabled):hover { transform: translateY(-1px); } #world-back:hover, #compose-back:hover, #claim-confirm-back:hover, #thread-back:hover, #broadcast-back:hover { color: var(--ink); border-color: transparent; } .slot:not(.slot-empty):hover { border-color: var(--accent); transform: translateY(-1px); } .slot-empty:hover { border-color: var(--field-line); } .broadcast-banner:hover { border-color: var(--accent); } .archive-zone .action:hover { border-color: transparent; } .calc-key:hover { border-color: var(--accent); } } /* --- Launching 1.36 ------------------------------------------------------------------------------- ~0.9s of the page losing its manners before the 1.36 page takes over: color clamps down in hard steps, a scanline field drops in, one or two sideways jolts. modern.js adds the class, waits the animation out, then navigates. Under reduced-motion the global rule below kills this and modern.js skips the wait — the launch is an instant cut. */ body.launch-136 { animation: clamp-136 900ms steps(4, end) both; } body.launch-136::after { content: ''; position: fixed; inset: 0; z-index: 999; pointer-events: none; background: repeating-linear-gradient(0deg, rgba(0, 0, 0, 0) 0 2px, rgba(0, 0, 0, 0.22) 2px 4px); animation: scan-136 900ms steps(4, end) both; } @keyframes clamp-136 { 0% { filter: none; transform: none; } 30% { filter: saturate(0.4) contrast(1.15); transform: none; } 55% { filter: saturate(0.15) contrast(1.5) hue-rotate(160deg); transform: translateX(2px); } 70% { filter: saturate(0) contrast(1.9) brightness(0.9); transform: translateX(-3px); } 85% { filter: saturate(0.1) contrast(2.2) hue-rotate(-40deg) brightness(0.75); transform: translateX(1px); } 100% { filter: saturate(0) contrast(2.4) brightness(0.5); transform: none; } } @keyframes scan-136 { 0% { opacity: 0; } 40% { opacity: 0.4; } 100% { opacity: 1; } } /* --- Quiet by request -------------------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; } } /* --- Stage 2: the product interior gets the hand-drawn texture, to match the shell (M33) -------- Hand-font on every screen title; pencil-wobble borders on the fork doors and the world's slots (the border lives on a ::before so the displacement warps the LINE, not the text — and only on these mid-size cards, keeping the filter budget small). Controls/body stay clean Inter. */ .fork-heading, #compose-heading, #claim-confirm-heading, .wt-verb, .about-title, #tool-title { font-family: var(--font-hand); font-weight: 400; letter-spacing: 0; } /* The chrome + controls speak the hand too (M33 — Back / eyebrow / count / pill / ✕ were still default Inter). font-weight 400 because the hand has one weight (700 would faux-bold). Body + USER content — prompts, answers, chat, typed input — stay Inter for legibility. */ .window-back, .window-close, .app-eyebrow, .wt-count, .action, .topic-chip, .topic-label, .slot-state, .tag, .broadcast-tag, .who, label { font-family: var(--font-hand); font-weight: 400; } .side, .slot { position: relative; border-color: transparent; border-radius: var(--tile-radius); } .side::before, .slot::before { content: ''; position: absolute; inset: 0; pointer-events: none; border: 3px solid var(--pencil); border-radius: var(--tile-radius); filter: url(#rough-card); /* gentler than the badges' #rough — no corner tearing on big cards */ } .slot-empty::before { border-style: dashed; border-width: 2px; } /* lighter than a filled slot's 3px */ @media (hover: hover) { .side:hover::before, .slot:not(.slot-empty):hover::before { border-color: var(--accent); } .slot-empty:hover::before { border-color: var(--field-line); } } /* --- Fork: the Ask/Answer verbs + hints speak the hand; the direction arrow becomes a hand-drawn glyph — one drawn arrow (arrow-ask.svg), rotated 180° for the receive side (M33). The core's unicode ↗/↙ is hidden (transparent) and the drawn SVG shows as the box's background. ------- */ .side-verb, .side-sub { font-family: var(--font-hand); font-weight: 400; } .side-arrow { display: inline-block; width: 1.35em; height: 1.35em; overflow: hidden; text-indent: 150%; /* push the core's unicode ↗/↙ out of the box (color drives the mask now) */ white-space: nowrap; color: var(--ink-line); /* the drawn arrow paints with currentColor, so it follows the theme */ background-color: currentColor; -webkit-mask: center / contain no-repeat url(arrow-ask.svg); mask: center / contain no-repeat url(arrow-ask.svg); } #side-receive .side-arrow { transform: rotate(180deg); } /* --- Mobile: fold the rail to icons only so the centre gets the width (M33). The labels go sr-only (kept as each button's accessible name), the rail sizes to its badges. -------------- */ @media (max-width: 640px) { .workspace { grid-template-columns: auto 1fr; } .sidebar { padding: 10px 6px; gap: 2px; } /* icon OVER a small label (standard mobile pattern — icons alone are ambiguous), so the rail stays narrow but you can still tell what each app is. */ .nav-item { flex-direction: column; gap: 4px; width: auto; padding: 8px 6px; } .nav-label { font-size: 0.6rem; line-height: 1.05; text-align: center; } .nav-badge { width: 34px; height: 34px; } .session-line { display: none; } /* the wordmark + DEVLOG pill + clock overflow 375px; the phone has its own clock */ .clock { display: none; } .mast { padding: 12px 14px; } }