/* Two-pane explorer. Left = live R47 calculator (iframe). Right = reusable navigation-tree component, themed to match the calculator's key visuals. Mobile (< 768 px): stacks vertically. Tablet+ (≥ 768 px): side-by-side. The .tree-pane is intentionally self-contained — the live calculator app's in-app help drawer will mount it as the body of its help drawer. */ /* ── Calculator-key colour tokens. These are the FALLBACK values; calc.js reads the matching variables from the iframe's element on every theme tick and republishes them here so the right pane visually matches whatever LCD / Keys theme the user picked inside the calc. ── */ :root { --calc-bg: #2B2A29; --calc-key-bg: #212121; --calc-key-border: #25292F; --calc-key-hover: #744a2e; --calc-key-label: #ffffff; --calc-letter-grey: #a5a5a5; --calc-f-gold: #E5AE5A; --calc-f-hover-gold: #ffff00; --calc-g-blue: #7EB6BA; --calc-g-hover-blue: #00ffff; --calc-lcd-bg: #e0e0e0; /* Paired default for --calc-lcd-fg so that modals / buttons / badges always have a readable fg/bg combo even before calc.js syncs the theme from the iframe. Without this, hundreds of `var(--calc-lcd-fg, …)` fallbacks could disagree with --calc-lcd-bg during the first paint and produce invisible text. */ --calc-lcd-fg: #303030; /* Semantic status colours. Defaults are tuned for a light LCD; the `:root.dark-lcd` override below lifts the *-fg variants so they stay readable on dark LCD backgrounds. The -accent pair is the full-saturation hue used for borders, icons, and background tints — those work on both light and dark panels unchanged. */ --r47-ok-fg: #2d7a3f; --r47-ok-accent: #3c9a4a; --r47-warn-fg: #8a4f20; --r47-warn-accent: #c47a2a; --r47-err-fg: #7a2020; --r47-err-accent: #c24040; /* R47 editor syntax-highlight tokens. Defaults target a light LCD; the dark-lcd override below shifts them lighter for contrast. */ --r47-ed-comment: #7a7a80; --r47-ed-string: #c27a2a; --r47-ed-number: #3c6ea5; --r47-ed-op: #2b5080; --r47-ed-flow: #a0408a; --r47-ed-test: #227a4a; } /* Dark LCD overrides. `.dark-lcd` is toggled by calc.js on the element whenever the LCD's computed luminance falls below 0.5 (see applyTheme in calc.js). Every light-on-light colour that would be unreadable against a dark panel gets a brighter counterpart here. */ :root.dark-lcd { --r47-ok-fg: #7ed890; --r47-warn-fg: #e0a870; --r47-err-fg: #f08080; --r47-ed-comment: #9a9aa5; --r47-ed-string: #e0a868; --r47-ed-number: #7eb0e0; --r47-ed-op: #a0c0e0; --r47-ed-flow: #e090c4; --r47-ed-test: #7ed890; } /* Forced off-white page palette — overrides docs.css's default. The calc pane and the nav panel do their own themed backgrounds (calc body colour and LCD colour respectively), so the page stays a clean neutral frame around them. */ html, body { --bg: #f7f7f8; --bg-elev: #ffffff; --fg: #1a1a1c; --fg-muted: #5a5a62; --fg-dim: #9a9ba1; --line: #e4e4e8; background: #f7f7f8 !important; color: #1a1a1c !important; } @media (prefers-color-scheme: dark), (prefers-color-scheme: light) { :root, html, body { --bg: #f7f7f8; --bg-elev: #ffffff; --fg: #1a1a1c; --fg-muted: #5a5a62; --fg-dim: #9a9ba1; --line: #e4e4e8; background: #f7f7f8; color: #1a1a1c; } } .home-intro { margin-bottom: 12px; } .home-intro .ai-tag { font-size: 13px; color: var(--fg-muted); margin: 0; } /* ─── Layout ───────────────────────────────────────────────────────── */ .explorer { display: grid; grid-template-columns: 1fr; gap: 12px; margin-top: 4px; } @media (min-width: 768px) { /* Column width derived from viewport height so the iframe fills the column with no leftover horizontal padding on page load. Target is ~80% of viewport height — leaves comfortable room for the page header, browser chrome (URL bar, tabs), and a bit of bottom gutter. Clamped to [360, 480] so short viewports don't collapse the calc and tall viewports don't overshoot the natural skin width. The + button can grow beyond this; this is just the initial load size. */ .explorer { grid-template-columns: max(360px, min(480px, calc(80vh * 482 / 930))) 1fr; align-items: start; } .explorer--flipped { grid-template-columns: 1fr max(360px, min(480px, calc(80vh * 482 / 930))); } /* Toggle state driven by the calc-iframe's toolbar-version button (shell.js on 47expl). Hides the docs panel + its floating scroll- nav button and collapses the grid so the calc keeps its size on the left with no empty column to its right. */ .explorer--panel-hidden { grid-template-columns: max(360px, min(480px, calc(80vh * 482 / 930))) 0fr; } .explorer--panel-hidden.explorer--flipped { grid-template-columns: 0fr max(360px, min(480px, calc(80vh * 482 / 930))); } .explorer--flipped .tree-pane { order: -1; } } /* On narrow screens, extend the calc and tree panes past the
12px horizontal padding so the calc reaches the viewport edges like the standalone calculator (no "floaty" gutter around it). Text content — breadcrumbs, headings, home-intro — keeps its 12px gutter. */ @media (max-width: 767px) { .calc-pane, .tree-pane { margin-left: -12px; margin-right: -12px; border-radius: 0; border-left-width: 0; border-right-width: 0; } } /* Reduce the page's top padding so there's less dead space above the two columns. */ main { padding-top: 4px; } /* ─── Calc iframe (left) ───────────────────────────────────────────── */ /* Calc pane flows with the page — default iframe height is the viewport, and the Suggest-a-correction button sits just below it. Scrolling the page past the calc reveals the button. shell.js forwards wheel events from inside the iframe to the parent window so "scroll wheel over the calc" == "scroll the page". */ .calc-pane { background: var(--calc-bg); border: 1px solid var(--line); border-radius: 10px; padding: 0; overflow: hidden; display: flex; flex-direction: column; } .calc-toolbar { display: flex; justify-content: flex-end; gap: 4px; padding: 4px 6px; background: var(--calc-bg); flex-shrink: 0; } .calc-zoom-btn { background: transparent; color: var(--calc-key-label, #fff); border: 1px solid rgba(255,255,255,0.18); border-radius: 4px; padding: 2px 9px; font-size: 13px; font-weight: 600; cursor: pointer; line-height: 1; opacity: 0.6; transition: opacity 80ms, color 80ms, border-color 80ms; } .calc-zoom-btn:hover { opacity: 1; color: var(--calc-f-gold, #E5AE5A); border-color: var(--calc-f-gold, #E5AE5A); } .calc-zoom-btn:disabled { opacity: 0.2; cursor: default; } /* Iframe always fills its column at the calc's natural 482×930 aspect ratio. On desktop the column itself is viewport-height-capped (see .explorer above), so there's no iframe-level width cap to compute. */ #calcFrame { display: block; width: 100%; aspect-ratio: 482 / 930; margin: 0 auto; flex: 0 0 auto; border: 0; background: var(--calc-bg); } /* ─── Navigation tree (right) ──────────────────────────────────────── */ /* The panel is styled as an extension of the calculator's LCD: its background tracks --calc-lcd-bg, text tracks --calc-lcd-fg. Every element inside (header, filter input, buttons, rows) inherits from these so the whole panel reads as one themed surface — no stripes, no mismatched sections. */ .explorer--panel-hidden .tree-pane { display: none; } /* Fullscreen-calc mode. Triggered by the toolbar-version toggle inside the iframe (shell.js adds .r47-explorer-fullscreen to our body when the panel is hidden). The goal is to make the embedded calc match the standalone r47.dansbeesllc.com experience: no page chrome, no calc-toolbar, no border — just the calc filling the viewport, with shell.js's fitScale handling resize + URL-bar wobble on mobile. */ body.r47-explorer-fullscreen { overflow: hidden; /* page doesn't scroll behind the fullscreen calc */ } body.r47-explorer-fullscreen .home-intro, body.r47-explorer-fullscreen .calc-toolbar { display: none; } body.r47-explorer-fullscreen main { padding: 0; max-width: none; margin: 0; } body.r47-explorer-fullscreen .explorer { grid-template-columns: 1fr 0fr !important; gap: 0; margin: 0; } body.r47-explorer-fullscreen .calc-pane { background: transparent; border: 0; border-radius: 0; padding: 0; margin: 0; overflow: visible; } body.r47-explorer-fullscreen #calcFrame { width: 100vw; height: 100vh; height: 100dvh; /* dynamic viewport height — tracks URL-bar wobble */ aspect-ratio: auto; max-width: none; margin: 0; display: block; } .tree-pane { background: var(--calc-lcd-bg, #e0e0e0); color: var(--calc-lcd-fg, #303030); border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; /* Scrolls internally (not with the whole page) so the header + filter input stay fixed at the top of the visible panel while the key/menu rows below scroll. Mouse wheel over the panel scrolls only the panel; mouse wheel over the calc pane scrolls the whole page (see shell.js wheel-forwarder for that). */ position: sticky; top: 6px; height: calc(100vh - 12px); max-height: calc(100vh - 12px); overflow: hidden; overscroll-behavior: contain; display: flex; flex-direction: column; } .tree-head { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; padding-bottom: 10px; border-bottom: 1px solid color-mix(in srgb, var(--calc-lcd-fg, #303030) 18%, transparent); margin-bottom: 10px; /* Pin the title + filter + font controls + Reset at the top of the scrolling pane. Opaque bg matches the pane so there's no stripe. */ position: sticky; top: -12px; background: var(--calc-lcd-bg, #e0e0e0); margin-top: -12px; padding-top: 12px; z-index: 2; } .tree-head .tree-title { flex: 0 0 100%; font-size: 0.73em; text-transform: uppercase; letter-spacing: 0.06em; color: color-mix(in srgb, var(--calc-lcd-fg, #303030) 70%, transparent); } /* ─── Calc-state banner (sticky strip above the tab bar) ─────────── */ .calc-state { display: flex; align-items: center; gap: 10px; padding: 4px 10px; margin-bottom: 4px; border-radius: 4px; font-size: 0.75em; background: color-mix(in srgb, var(--calc-lcd-fg, #303030) 8%, var(--calc-lcd-bg, #e0e0e0)); color: color-mix(in srgb, var(--calc-lcd-fg, #303030) 85%, transparent); border: 1px solid color-mix(in srgb, var(--calc-lcd-fg, #303030) 12%, transparent); letter-spacing: 0.02em; user-select: none; } .calc-state-mode { font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; font-size: 0.95em; padding: 1px 6px; border-radius: 3px; background: color-mix(in srgb, var(--calc-lcd-fg, #303030) 10%, transparent); } .calc-state-mode[data-mode="3"] { background: color-mix(in srgb, var(--calc-f-gold) 30%, transparent); color: color-mix(in srgb, var(--calc-f-gold) 70%, var(--calc-lcd-fg, #3a2800)); } .calc-state-mode[data-mode="6"], .calc-state-mode[data-mode="5"], .calc-state-mode[data-mode="17"] { background: color-mix(in srgb, var(--calc-g-blue) 30%, transparent); } .calc-state-prog { color: color-mix(in srgb, var(--calc-lcd-fg, #303030) 75%, transparent); font-family: var(--font-mono, monospace); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; min-width: 0; } .calc-state-run { font-weight: 600; color: var(--r47-ok-fg); animation: calc-state-blink 1.2s ease-in-out infinite; } @keyframes calc-state-blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } } .calc-state-run[hidden] { display: none; } /* ─── Tab bar (replaces the former tree-title). See docsmd/rejig_tabs.md. ─── */ .tree-tabs { display: flex; flex-wrap: wrap; gap: 2px; flex: 0 0 100%; align-items: flex-end; } .tree-tab { flex: 0 0 auto; /* content-sized, NOT equal-width */ padding: 5px 8px; font: inherit; font-size: 0.78em; font-weight: 600; letter-spacing: 0.03em; border-radius: 6px 6px 0 0; border: 1px solid transparent; background: transparent; color: color-mix(in srgb, var(--calc-lcd-fg, #303030) 60%, transparent); cursor: pointer; white-space: nowrap; line-height: 1.2; transition: color 100ms, border-color 100ms, background 100ms; } .tree-tab:hover { color: var(--calc-lcd-fg, #303030); background: color-mix(in srgb, var(--calc-lcd-fg, #303030) 5%, transparent); } .tree-tab:focus-visible { outline: 2px solid var(--calc-f-gold); outline-offset: 1px; } .tree-tab[aria-selected="true"] { color: var(--calc-lcd-fg, #303030); background: color-mix(in srgb, var(--calc-lcd-fg, #303030) 10%, transparent); border-color: color-mix(in srgb, var(--calc-lcd-fg, #303030) 22%, transparent); border-bottom-color: var(--calc-lcd-bg, #e0e0e0); /* blend into panel */ position: relative; } /* Badge decoration on Files tab (file count), Program tab (status dot). */ .tree-tab .tab-badge { display: inline-block; margin-left: 5px; padding: 0 5px; min-width: 16px; font-size: 0.85em; font-weight: 500; text-align: center; border-radius: 8px; background: color-mix(in srgb, var(--calc-lcd-fg, #303030) 18%, transparent); } .tree-tab .tab-dot { display: inline-block; width: 8px; height: 8px; margin-left: 5px; border-radius: 50%; vertical-align: middle; } .tree-tab .tab-dot-ok { background: var(--r47-ok-accent); } .tree-tab .tab-dot-err { background: var(--r47-err-accent); } /* Hide badges/dots when the tab bar is too narrow to avoid wrap-flicker. */ .tree-tabs { container-type: inline-size; } @container (max-width: 440px) { .tab-badge, .tab-dot { display: none; } } /* App-wide active-layout badge. Lives at the right of the calc-state bar. */ .app-layout-badge { margin-left: auto; align-self: center; font-size: 0.72em; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; padding: 2px 7px; border-radius: 3px; user-select: none; background: color-mix(in srgb, var(--calc-lcd-fg, #303030) 10%, transparent); color: color-mix(in srgb, var(--calc-lcd-fg, #303030) 60%, transparent); } .app-layout-badge-r47 { background: color-mix(in srgb, var(--calc-f-gold) 18%, transparent); color: color-mix(in srgb, var(--calc-f-gold) 80%, var(--calc-lcd-fg, #000)); } .app-layout-badge-c47 { background: color-mix(in srgb, var(--calc-g-blue) 18%, transparent); color: color-mix(in srgb, var(--calc-g-blue) 80%, var(--calc-lcd-fg, #000)); } .app-layout-badge-dm42 { background: color-mix(in srgb, var(--calc-lcd-fg, #303030) 12%, transparent); color: color-mix(in srgb, var(--calc-lcd-fg, #303030) 60%, transparent); } /* The Explorer-tab-specific row (filter, font, reset) lives inside a dedicated wrapper so it's easy to hide on other tabs. */ .tree-head-explorer { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; flex: 0 0 100%; } .tree-pane:not(.tab-explorer) .tree-head-explorer { display: none; } .font-controls { display: flex; gap: 4px; } .filter-wrap { flex: 1; min-width: 80px; position: relative; display: flex; } .filter-input { flex: 1; min-width: 0; font: inherit; font-size: 0.9em; padding: 4px 26px 4px 8px; /* right pad leaves room for the × button */ /* Blend with the LCD surface so the input reads as part of the panel, not a foreign widget. A small fg-tint lifts it just enough to be recognisable as a field on any theme. */ background: color-mix(in srgb, var(--calc-lcd-fg, #303030) 6%, var(--calc-lcd-bg, #e0e0e0)); color: var(--calc-lcd-fg, #303030); border: 1px solid color-mix(in srgb, var(--calc-lcd-fg, #303030) 22%, transparent); border-radius: 5px; } .filter-input:focus { outline: none; border-color: var(--calc-f-gold); } .filter-input::placeholder { color: color-mix(in srgb, var(--calc-lcd-fg, #303030) 50%, transparent); } .filter-clear { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); width: 20px; height: 20px; border: 0; border-radius: 50%; background: color-mix(in srgb, var(--calc-lcd-fg, #303030) 14%, transparent); color: inherit; opacity: 0.85; font-size: 14px; line-height: 1; padding: 0; cursor: pointer; display: flex; align-items: center; justify-content: center; } .filter-clear[hidden] { display: none; } .filter-clear:hover { opacity: 1; background: color-mix(in srgb, var(--calc-lcd-fg, #303030) 24%, transparent); } .font-btn, .tree-reset { background: transparent; color: color-mix(in srgb, var(--calc-lcd-fg, #303030) 70%, transparent); border: 1px solid color-mix(in srgb, var(--calc-lcd-fg, #303030) 22%, transparent); border-radius: 5px; cursor: pointer; line-height: 1; } .font-btn { padding: 3px 7px; font-size: 0.73em; font-weight: 600; } .tree-reset { padding: 4px 10px; font-size: 0.8em; } .font-btn:hover, .tree-reset:hover { color: var(--calc-f-gold); border-color: var(--calc-f-gold); } .tree-path { list-style: none; margin: 0 0 12px; padding: 0; } .tree-empty { color: var(--fg-muted); font-style: italic; padding: 4px 0; } /* Each step in the path renders as a small "calc key" tile so the right pane visually echoes the calculator on the left. */ .tree-step { display: grid; grid-template-columns: 16px auto 1fr; gap: 10px; align-items: center; padding: 8px 0; font-size: 13px; border-bottom: 1px dashed color-mix(in srgb, var(--calc-lcd-fg, #303030) 15%, transparent); } .tree-step .step-arrow { color: color-mix(in srgb, var(--calc-lcd-fg, #303030) 35%, transparent); font-family: var(--font-mono); text-align: right; } .tree-step .step-tile { display: inline-flex; align-items: center; justify-content: center; min-width: 56px; min-height: 36px; padding: 4px 10px; background: var(--calc-key-bg); color: var(--calc-key-label); border: 2px solid var(--calc-key-border); border-radius: 3px; font-family: var(--font-calc); font-size: 15px; white-space: nowrap; } .tree-step.shift-f .step-tile { background: var(--calc-f-gold); color: #1a140a; border-color: var(--calc-f-gold); } .tree-step.shift-g .step-tile { background: var(--calc-g-blue); color: #0f1f20; border-color: var(--calc-g-blue); } .tree-step.kind-menu .step-tile { background: var(--calc-key-bg); border-color: var(--calc-f-gold); color: var(--calc-f-gold); } .tree-step.kind-fn .step-tile { font-style: italic; } .tree-step .step-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .tree-step .step-name { font-weight: 600; font-size: 13px; color: inherit; } .tree-step .step-desc { font-size: 12px; color: color-mix(in srgb, var(--calc-lcd-fg, #303030) 65%, transparent); } .tree-step .step-meta { font-size: 10px; letter-spacing: 0.04em; text-transform: uppercase; opacity: 0.6; margin-top: 1px; } .tree-step .step-meta a { color: var(--calc-f-gold); text-decoration: underline dotted; } /* The children pane shows softkeys of the currently-open menu, drawn as full-height calc keys so tapping one feels like tapping a softkey on the real device. */ .tree-children-label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; color: color-mix(in srgb, var(--calc-lcd-fg, #303030) 65%, transparent); margin: 14px 0 6px; } .tree-children { display: grid; grid-template-columns: 1fr; gap: 6px; } @media (min-width: 1100px) { /* Two columns when there's plenty of horizontal room. */ .tree-children { grid-template-columns: 1fr 1fr; } } .tree-children button.softkey { display: grid; grid-template-rows: auto auto auto; align-items: start; text-align: left; gap: 4px; padding: 10px 12px; background: var(--calc-key-bg); color: var(--calc-key-label); border: 2px solid var(--calc-key-border); border-radius: 4px; cursor: pointer; min-height: 70px; width: 100%; } .tree-children button.softkey:hover { background: var(--calc-key-hover); border-color: var(--calc-f-gold); } .tree-children .softkey .softkey-fn { font-size: 9px; color: rgba(255,255,255,0.55); font-family: var(--font-prose); text-transform: uppercase; letter-spacing: 0.05em; } .tree-children .softkey .softkey-label { font-family: var(--font-calc); font-size: 16px; line-height: 1.1; } .tree-children .softkey .softkey-desc { font-family: var(--font-prose); font-size: 11px; color: rgba(255,255,255,0.7); line-height: 1.3; } .tree-children button.softkey.is-menu { border-color: var(--calc-f-gold); } .tree-children button.softkey.is-menu .softkey-label { color: var(--calc-f-gold); } .tree-children button.softkey.is-menu .softkey-desc::after { content: " ▸"; color: var(--calc-f-gold); } .tree-children-empty { color: color-mix(in srgb, var(--calc-lcd-fg, #303030) 60%, transparent); font-size: 13px; padding: 8px 0; } /* ─── LCD-themed surround for the entire tree pane ────────────────── */ .tree-pane { background: var(--calc-lcd-bg, var(--bg-elev)); /* tracks LCD theme */ color: var(--calc-lcd-fg, #1a1a1a); /* Base font size for the whole panel. JS steps this up/down via inline style; em units throughout the panel scale with it. */ font-size: 15px; } .tree-head strong { color: inherit; } .tree-empty { color: color-mix(in srgb, var(--calc-lcd-fg, #303030) 55%, transparent); } .tree-step { color: inherit; border-bottom-color: color-mix(in srgb, var(--calc-lcd-fg, #303030) 15%, transparent); } .tree-children-label { color: inherit; opacity: 0.7; } /* ─── "Navigation Display" panel (top-to-bottom keypad list) ── */ /* "You just pressed X" banner — populated by iframe (calc) key presses only, never by panel row clicks. */ .opts-press { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 12px; padding: 8px 10px; margin-bottom: 12px; background: color-mix(in srgb, var(--calc-lcd-fg, #303030) 6%, transparent); border: 1px solid color-mix(in srgb, var(--calc-lcd-fg, #303030) 12%, transparent); border-radius: 6px; } .opts-press .step-tile { min-width: 44px; min-height: 32px; padding: 4px 8px; } .opts-press .opts-press-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .opts-press .opts-press-label { font-weight: 600; font-size: 1em; font-family: var(--font-calc); } .opts-press .opts-press-label.color-f { color: var(--calc-f-gold); } .opts-press .opts-press-label.color-g { color: var(--calc-g-blue); } .opts-press .opts-press-desc-line { display: block; line-height: 1.35; } .opts-press .opts-press-desc-human { font-size: 0.88em; opacity: 1; } .opts-press .opts-press-desc-mechanical { font-size: 0.82em; opacity: 0.8; font-style: italic; } /* step-tile colouring reused from the inline style generated by calc.js */ .opts-press .step-tile { display: inline-flex; align-items: center; justify-content: center; background: var(--calc-key-bg); color: var(--calc-key-label); border: 2px solid var(--calc-key-border); border-radius: 3px; font-family: var(--font-calc); font-size: 1em; white-space: nowrap; text-align: center; } .opts-body { display: flex; flex-direction: column; gap: 14px; } .opts-section { border-top: 1px dashed color-mix(in srgb, var(--calc-lcd-fg, #303030) 14%, transparent); padding-top: 8px; } .opts-section h4 { margin: 0 0 6px; font-size: 0.73em; text-transform: uppercase; letter-spacing: 0.06em; font-weight: 600; opacity: 0.65; } .opts-row { display: grid; grid-template-columns: minmax(54px, auto) 1fr; gap: 10px; align-items: center; padding: 5px 6px; border-radius: 4px; } .opts-row.is-clickable { cursor: pointer; } .opts-row.is-clickable:hover { background: color-mix(in srgb, var(--calc-lcd-fg, #303030) 6%, transparent); } .opts-row.is-active { background: color-mix(in srgb, var(--calc-f-gold, #E5AE5A) 18%, transparent); outline: 1px solid var(--calc-f-gold); } .opts-row .row-tile { display: inline-flex; align-items: center; justify-content: center; min-height: 2.1em; padding: 0.25em 0.4em; background: var(--calc-key-bg); color: var(--calc-key-label); border: 2px solid var(--calc-key-border); border-radius: 3px; font-family: var(--font-calc); font-size: 1em; white-space: nowrap; text-align: center; } .opts-row.shift-f .row-tile { background: var(--calc-f-gold); color: #1a140a; border-color: var(--calc-f-gold); } .opts-row.shift-g .row-tile { background: var(--calc-g-blue); color: #0f1f20; border-color: var(--calc-g-blue); } .opts-row.is-menu .row-tile { background: var(--calc-key-bg); border-color: var(--calc-f-gold); color: var(--calc-f-gold); } .opts-row.is-disabled { opacity: 0.4; } .opts-row-dim { opacity: 0.55; } .opts-page-head { font-size: 0.67em; text-transform: uppercase; letter-spacing: 0.06em; font-weight: 600; opacity: 0.5; padding: 6px 0 2px; margin-top: 4px; border-top: 1px dotted color-mix(in srgb, var(--calc-lcd-fg, #303030) 14%, transparent); } .opts-page-head.is-active { opacity: 1; color: var(--calc-f-gold); font-weight: 700; letter-spacing: 0.08em; } .opts-page-head:first-child { border-top: 0; margin-top: 0; } .opts-row .row-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .opts-row .row-name { font-family: var(--font-calc); font-size: 1em; font-weight: 600; } /* Colour the bold action name to match the shift label on the calculator keypad: f-shift = orange / gold, g-shift = cyan / blue. Primary actions stay default colour. */ .opts-row .row-name.color-f { color: var(--calc-f-gold); } .opts-row .row-name.color-g { color: var(--calc-g-blue); } .opts-row .row-desc { font-family: var(--font-prose); font-size: 0.8em; opacity: 0.85; line-height: 1.35; } .opts-row .row-desc-line { display: block; font-family: var(--font-prose); line-height: 1.35; } /* Human line: the concept — primary reading weight */ .opts-row .row-desc-human { font-size: 0.82em; opacity: 1; } /* Mechanical line: the technical detail — dimmer, italic, slightly smaller */ .opts-row .row-desc-mechanical { font-size: 0.78em; opacity: 0.8; font-style: italic; } .opts-row .row-fn-badge { font-family: var(--font-prose); font-size: 0.6em; letter-spacing: 0.05em; text-transform: uppercase; opacity: 0.55; } /* ─── Diagnostic log (bottom of tree pane) ────────────────────────── */ .tree-diag { margin-top: 14px; padding-top: 10px; border-top: 1px dashed color-mix(in srgb, var(--calc-lcd-fg, #303030) 18%, transparent); font-size: 11px; color: color-mix(in srgb, var(--calc-lcd-fg, #303030) 65%, transparent); } .tree-diag summary { cursor: pointer; user-select: none; padding: 2px 0; } .tree-diag ol { margin: 6px 0 0; padding-left: 18px; max-height: 180px; overflow: auto; } .tree-diag li { font-family: var(--font-mono); padding: 1px 0; line-height: 1.3; word-break: break-all; } .tree-diag li { color: color-mix(in srgb, var(--calc-lcd-fg, #303030) 70%, transparent); } /* ─── Feedback button + modal ───────────────────────────────────────── */ /* The button sits inside .calc-pane, which tracks the calc's active theme via --calc-bg / --calc-key-label. Using those tokens directly guarantees the button stays legible on every LCD/keys theme (light, dark, HP classic, amber, Tokyo Night, Solarized, etc.) — no hard-coded greys that could disappear against a similarly-coloured background. */ .feedback-open { align-self: center; padding: 1px 5px; background: transparent; color: color-mix(in srgb, var(--calc-lcd-fg, #303030) 55%, transparent); border: 1px solid transparent; border-radius: 4px; font-size: 0.9em; line-height: 1; cursor: pointer; transition: background 100ms, color 100ms; } .feedback-open:hover, .feedback-open:focus-visible { background: color-mix(in srgb, var(--calc-lcd-fg, #303030) 10%, transparent); color: var(--calc-lcd-fg, #303030); outline: none; } .feedback-open:active { opacity: 0.7; } .feedback-modal { position: fixed; inset: 0; z-index: 60; display: flex; align-items: center; justify-content: center; } .feedback-modal[hidden] { display: none; } .feedback-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,0.55); backdrop-filter: blur(4px); } .feedback-panel { position: relative; width: min(92vw, 520px); max-height: 86vh; /* Fallbacks must be a readable pair — light bg + dark text — matching the :root defaults. Mismatched fallbacks (dark bg + light text) break rendering before the first theme sync. */ background: var(--calc-lcd-bg, #e0e0e0); color: var(--calc-lcd-fg, #303030); border: 1px solid color-mix(in srgb, var(--calc-lcd-fg, #303030) 22%, transparent); border-radius: 10px; box-shadow: 0 18px 50px rgba(0,0,0,0.7); display: flex; flex-direction: column; overflow: hidden; transform: translateZ(0); will-change: transform; -webkit-font-smoothing: antialiased; } .feedback-head { display: flex; align-items: center; padding: 12px 16px; border-bottom: 1px solid color-mix(in srgb, var(--calc-lcd-fg, #303030) 12%, transparent); font: 14px/1 var(--font-prose, system-ui), sans-serif; font-weight: 600; background: color-mix(in srgb, var(--calc-lcd-fg, #303030) 8%, transparent); } .feedback-head span { flex: 1; } .feedback-close { background: transparent; border: 0; color: color-mix(in srgb, var(--calc-lcd-fg, #303030) 55%, transparent); font-size: 22px; line-height: 1; cursor: pointer; padding: 0 6px; } .feedback-close:hover { color: var(--calc-lcd-fg, #303030); } .feedback-form { display: flex; flex-direction: column; gap: 12px; padding: 14px 16px; overflow: auto; } .feedback-row { display: flex; flex-direction: column; gap: 4px; } .feedback-row > span { font: 12px/1.2 var(--font-prose, system-ui), sans-serif; font-weight: 600; opacity: 0.85; } .feedback-row > span em { font-style: normal; font-weight: 400; opacity: 0.6; margin-left: 4px; } .feedback-input, .feedback-textarea { background: color-mix(in srgb, var(--calc-lcd-fg, #303030) 6%, var(--calc-lcd-bg, #e0e0e0)); color: inherit; border: 1px solid color-mix(in srgb, var(--calc-lcd-fg, #303030) 22%, transparent); border-radius: 5px; padding: 8px 10px; font: inherit; font-size: 0.92em; resize: vertical; } .feedback-input:focus, .feedback-textarea:focus { outline: none; border-color: var(--calc-f-gold, #E5AE5A); } .feedback-input[readonly] { opacity: 0.75; cursor: default; } .feedback-actions { display: flex; align-items: center; gap: 8px; margin-top: 4px; } .feedback-status { flex: 1; font-size: 0.85em; opacity: 0.85; } .feedback-status.is-error { color: var(--r47-err-fg); } .feedback-status.is-ok { color: var(--r47-ok-fg); } .feedback-btn { border: 1px solid color-mix(in srgb, var(--calc-lcd-fg, #303030) 22%, transparent); background: transparent; color: inherit; padding: 7px 14px; border-radius: 5px; cursor: pointer; font: inherit; font-size: 0.9em; } .feedback-btn-ghost:hover { background: color-mix(in srgb, var(--calc-lcd-fg, #303030) 8%, transparent); } .feedback-btn-primary { background: var(--calc-f-gold, #E5AE5A); border-color: var(--calc-f-gold, #E5AE5A); color: var(--calc-bg, #1a140a); font-weight: 600; } .feedback-btn-primary:hover { filter: brightness(1.05); } .feedback-btn:disabled { opacity: 0.45; cursor: not-allowed; } /* Honeypot field — off-screen for sighted users, invisible to screen readers (aria-hidden + tabindex=-1 on the input), but naive bots see a form field called "website" and fill it in. Server rejects any submission with a non-empty honeypot. */ .feedback-honey { position: absolute; left: -9999px; top: -9999px; width: 1px; height: 1px; overflow: hidden; opacity: 0; pointer-events: none; } /* ─── Tutorial disclaimer popup ──────────────────────────────────── */ .tut-disclaimer-panel { width: min(92vw, 420px); } .tut-disclaimer-body { padding: 16px 16px 8px; font: 14px/1.55 var(--font-prose, system-ui), sans-serif; } .tut-disclaimer-body p { margin: 0 0 10px; } .tut-disclaimer-check { display: flex; align-items: center; gap: 8px; font-size: 13px; opacity: 0.85; cursor: pointer; margin-top: 4px; } .tut-disclaimer-check input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--calc-f-gold, #E5AE5A); cursor: pointer; flex-shrink: 0; } /* ─── Home header ─────────────────────────────────────────────────── */ /* Visually hidden but kept in the DOM so search crawlers index the title + tagline + feature list as real page content (the calc iframe + canvas is opaque to crawlers). Standard clip-path approach used by screen-reader-only utility classes. */ .home-intro { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* Search-engine-only content: in the DOM so crawlers can index it, not rendered for human visitors. */ .seo-content { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* ══════════════════════════════════════════════════════════════════════ Tab panels (shared) ══════════════════════════════════════════════════════════════════════ */ .tab-panel { display: flex; flex-direction: column; gap: 10px; flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; } .tab-panel[hidden] { display: none !important; } .tab-panel:focus-visible { outline: none; } /* Tutorial panel controls its own internal scroll regions. */ #panel-tutorial { overflow: hidden; } /* Program panel: editor fills remaining height; toolbar/meta scroll if needed. */ #panel-program { overflow: hidden; } /* ══════════════════════════════════════════════════════════════════════ Program tab ══════════════════════════════════════════════════════════════════════ */ .program-toolbar { display: flex; flex-wrap: wrap; gap: 4px; } .program-btn { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; font: inherit; font-size: 0.65em; line-height: 1; padding: 2px; width: 44px; border-radius: 5px; border: 1px solid color-mix(in srgb, var(--calc-lcd-fg, #303030) 22%, transparent); background: color-mix(in srgb, var(--calc-lcd-fg, #303030) 4%, transparent); color: color-mix(in srgb, var(--calc-lcd-fg, #303030) 70%, transparent); cursor: pointer; white-space: nowrap; transition: background 100ms, color 100ms, border-color 100ms; } .program-btn:hover:not(:disabled) { background: color-mix(in srgb, var(--calc-lcd-fg, #303030) 10%, transparent); color: var(--calc-lcd-fg, #303030); } .program-btn:disabled { opacity: 0.5; cursor: not-allowed; } .program-btn[hidden] { display: none; } .program-btn-icon { width: 14px; height: 14px; display: block; flex-shrink: 0; pointer-events: none; } .program-btn-label { font-size: 0.95em; letter-spacing: 0.02em; } .program-btn-primary, .program-btn-active { background: color-mix(in srgb, var(--calc-f-gold) 35%, var(--calc-lcd-bg, #e0e0e0)); color: var(--calc-lcd-fg, #303030); border-color: color-mix(in srgb, var(--calc-f-gold) 55%, transparent); font-weight: 600; } .program-btn-primary:hover:not(:disabled), .program-btn-active:hover:not(:disabled) { background: color-mix(in srgb, var(--calc-f-gold) 55%, var(--calc-lcd-bg, #e0e0e0)); } .program-formats { display: flex; flex-wrap: wrap; gap: 10px; font-size: 0.8em; } .program-formats label { display: flex; align-items: center; gap: 4px; color: color-mix(in srgb, var(--calc-lcd-fg, #303030) 70%, transparent); } .program-formats select { font: inherit; font-size: 0.95em; padding: 2px 14px 2px 4px; -webkit-appearance: none; appearance: none; background: color-mix(in srgb, var(--calc-lcd-fg, #303030) 6%, var(--calc-lcd-bg, #e0e0e0)) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5'%3E%3Cpath d='M0 0l4 5 4-5z' fill='%23666'/%3E%3C/svg%3E") no-repeat right 4px center; color: var(--calc-lcd-fg, #303030); border: 1px solid color-mix(in srgb, var(--calc-lcd-fg, #303030) 22%, transparent); border-radius: 4px; } /* Symbol reference modal — searchable table of canonical Unicode ops and their ASCII aliases, lazy-loaded from /data/aliases.json. */ .r47-modal-aliases { max-width: 900px; width: min(92vw, 900px); max-height: 85vh; display: flex; flex-direction: column; } .aliases-prose-wrap { margin: 0 0 8px; border: 1px solid color-mix(in srgb, var(--calc-lcd-fg, #303030) 12%, transparent); border-radius: 4px; background: color-mix(in srgb, var(--calc-lcd-fg, #303030) 4%, transparent); } .aliases-prose-wrap > summary { cursor: pointer; padding: 5px 10px; font-size: 0.85em; color: color-mix(in srgb, var(--calc-lcd-fg, #303030) 70%, transparent); list-style-position: inside; } .aliases-prose-wrap[open] > summary { border-bottom: 1px solid color-mix(in srgb, var(--calc-lcd-fg, #303030) 10%, transparent); } .aliases-prose { font-size: 0.85em; color: color-mix(in srgb, var(--calc-lcd-fg, #303030) 78%, transparent); padding: 6px 12px 2px; max-height: 260px; overflow: auto; } .aliases-prose p { margin: 4px 0; } .aliases-prose h4 { margin: 10px 0 4px; font-size: 1em; } .aliases-prose h5 { margin: 8px 0 3px; font-size: 0.95em; } .aliases-prose ul { margin: 4px 0 8px 20px; padding: 0; } .aliases-prose li { margin: 2px 0; } .aliases-prose code { font-size: 0.95em; padding: 0 3px; background: color-mix(in srgb, var(--calc-lcd-fg, #303030) 10%, transparent); border-radius: 3px; } .aliases-search { width: 100%; box-sizing: border-box; font: inherit; font-size: 0.95em; padding: 4px 8px; margin-bottom: 8px; border: 1px solid color-mix(in srgb, var(--calc-lcd-fg, #303030) 22%, transparent); border-radius: 4px; background: var(--calc-lcd-bg, #e0e0e0); color: var(--calc-lcd-fg, #303030); } .aliases-table-wrap { flex: 1 1 auto; min-height: 0; overflow: auto; border: 1px solid color-mix(in srgb, var(--calc-lcd-fg, #303030) 12%, transparent); border-radius: 4px; } .aliases-table { width: 100%; border-collapse: collapse; font-size: 0.92em; } .aliases-table thead th { position: sticky; top: 0; text-align: left; padding: 6px 6px; background: color-mix(in srgb, var(--calc-lcd-fg, #303030) 8%, var(--calc-lcd-bg, #e0e0e0)); border-bottom: 1px solid color-mix(in srgb, var(--calc-lcd-fg, #303030) 18%, transparent); z-index: 1; } .aliases-table td { padding: 4px 6px; border-bottom: 1px solid color-mix(in srgb, var(--calc-lcd-fg, #303030) 7%, transparent); vertical-align: top; } .aliases-table tr:hover td { background: color-mix(in srgb, var(--calc-f-gold, #e5ae5a) 8%, transparent); } .aliases-table .aliases-name { font-family: var(--font-mono, ui-monospace, monospace); font-weight: 600; white-space: nowrap; } .aliases-table .aliases-list code { font-family: var(--font-mono, ui-monospace, monospace); font-size: 0.95em; padding: 0 3px; margin-right: 4px; background: color-mix(in srgb, var(--calc-lcd-fg, #303030) 8%, transparent); border-radius: 3px; } .aliases-table .aliases-none { color: color-mix(in srgb, var(--calc-lcd-fg, #303030) 45%, transparent); font-style: italic; } .aliases-table .aliases-action { text-align: right; padding: 2px 4px; white-space: nowrap; } .aliases-insert-btn { font: inherit; font-size: 0.78em; padding: 2px 6px; background: color-mix(in srgb, var(--calc-f-gold, #e5ae5a) 22%, var(--calc-lcd-bg, #e0e0e0)); color: var(--calc-lcd-fg, #303030); border: 1px solid color-mix(in srgb, var(--calc-lcd-fg, #303030) 22%, transparent); border-radius: 4px; cursor: pointer; } .aliases-insert-btn:hover, .aliases-insert-btn:focus-visible { background: color-mix(in srgb, var(--calc-f-gold, #e5ae5a) 45%, var(--calc-lcd-bg, #e0e0e0)); outline: none; } .aliases-footer { font-size: 0.78em; color: color-mix(in srgb, var(--calc-lcd-fg, #303030) 55%, transparent); margin-top: 8px; } .aliases-empty { padding: 16px; text-align: center; color: color-mix(in srgb, var(--calc-lcd-fg, #303030) 55%, transparent); } /* Meta bar — wraps the metadata area (left) and Ref/Clear utility buttons (right) in a single flex row. */ .program-meta-bar { display: flex; align-items: center; gap: 6px; } .program-meta-bar .program-metadata { flex: 1; min-width: 0; } .program-meta-utils { display: flex; gap: 4px; flex-shrink: 0; margin-left: auto; } .program-util-btn { display: inline-flex; align-items: center; gap: 3px; font: inherit; font-size: 0.72em; line-height: 1; padding: 3px 7px; border-radius: 4px; border: 1px solid color-mix(in srgb, var(--calc-lcd-fg, #303030) 22%, transparent); background: color-mix(in srgb, var(--calc-lcd-fg, #303030) 4%, transparent); color: color-mix(in srgb, var(--calc-lcd-fg, #303030) 70%, transparent); cursor: pointer; white-space: nowrap; transition: background 100ms, color 100ms; } .program-util-btn:hover { background: color-mix(in srgb, var(--calc-lcd-fg, #303030) 10%, transparent); color: var(--calc-lcd-fg, #303030); } .program-util-icon { width: 12px; height: 12px; display: block; flex-shrink: 0; pointer-events: none; } /* Metadata strip — at-a-glance stats from the editor's current source (step count, labels, registers, XEQ/GTO targets, LocR). Sits between the format row and the editor. */ .program-metadata { font-size: 0.78em; padding: 4px 10px; border-radius: 4px; background: color-mix(in srgb, var(--calc-lcd-fg, #303030) 5%, transparent); color: color-mix(in srgb, var(--calc-lcd-fg, #303030) 75%, transparent); } .program-metadata strong { color: var(--calc-lcd-fg, #303030); font-weight: 600; } .program-metadata code { font-size: 0.95em; background: color-mix(in srgb, var(--calc-lcd-fg, #303030) 10%, transparent); padding: 0 3px; border-radius: 2px; } .program-metadata-label { margin-right: 6px; color: color-mix(in srgb, var(--calc-lcd-fg, #303030) 70%, transparent); } .program-template-chip { font: inherit; font-size: 0.92em; padding: 2px 8px; margin-right: 3px; margin-bottom: 2px; border-radius: 4px; border: 1px solid color-mix(in srgb, var(--calc-f-gold) 55%, transparent); background: color-mix(in srgb, var(--calc-f-gold) 25%, transparent); color: var(--calc-lcd-fg, #303030); cursor: pointer; font-weight: 500; transition: background 100ms; } .program-template-chip:hover { background: color-mix(in srgb, var(--calc-f-gold) 45%, transparent); } .program-label-link { font: inherit; padding: 0; margin: 0 2px; background: none; border: 0; cursor: pointer; color: inherit; } .program-label-link code { background: color-mix(in srgb, var(--calc-lcd-fg, #303030) 10%, transparent); padding: 0 3px; border-radius: 2px; } .program-label-link:hover code { background: color-mix(in srgb, var(--calc-f-gold) 40%, transparent); } /* Conversion coverage — compatibility check against the target machine (HP-15C, DM32, HP-42S, etc.). Positioned under the metadata strip. */ .program-coverage { font-size: 0.78em; padding: 4px 10px; border-radius: 4px; border-left: 3px solid; } .program-coverage-pending { color: color-mix(in srgb, var(--calc-lcd-fg, #303030) 55%, transparent); background: color-mix(in srgb, var(--calc-lcd-fg, #303030) 4%, transparent); border-left-color: color-mix(in srgb, var(--calc-lcd-fg, #303030) 25%, transparent); font-style: italic; } .program-coverage-ok { color: var(--r47-ok-fg); background: color-mix(in srgb, var(--r47-ok-accent) 12%, transparent); border-left-color: var(--r47-ok-accent); } .program-coverage-warn { color: var(--r47-warn-fg); background: color-mix(in srgb, var(--r47-warn-accent) 14%, transparent); border-left-color: var(--r47-warn-accent); } .program-coverage-error { color: var(--r47-err-fg); background: color-mix(in srgb, var(--r47-err-accent) 14%, transparent); border-left-color: var(--r47-err-accent); } .program-coverage code { font-size: 0.95em; background: color-mix(in srgb, var(--calc-lcd-fg, #303030) 10%, transparent); padding: 0 3px; border-radius: 2px; } .program-editor-wrap { display: flex; flex-direction: column; flex: 1; min-height: 0; } /* Editor mount — holds either a CodeMirror instance or the textarea fallback. Both sit inside #programEditorMount (which carries the .program-editor class from the HTML) so they inherit border/radius consistently. */ .program-editor { flex: 1; min-height: 300px; width: 100%; box-sizing: border-box; background: color-mix(in srgb, var(--calc-lcd-fg, #303030) 3%, var(--calc-lcd-bg, #e0e0e0)); color: var(--calc-lcd-fg, #303030); border: 1px solid color-mix(in srgb, var(--calc-lcd-fg, #303030) 22%, transparent); border-radius: 5px; overflow: hidden; /* CM's own scroller handles overflow */ } .program-editor:focus-within { border-color: var(--calc-f-gold); } /* CodeMirror sub-element fills the mount. */ .program-editor .cm-editor { height: 100%; min-height: 300px; } /* HTML preview iframe shares the same slot as the editor. Blends with the LCD theme so it doesn't present as a bright-white patch when the user has a dark LCD active. The iframe's own document applies its own styling on top, so this shows through only where the rendered HTML is transparent. */ .program-preview { min-height: 300px; background: var(--calc-lcd-bg, #ffffff); border: 1px solid color-mix(in srgb, var(--calc-lcd-fg, #303030) 22%, transparent); border-radius: 5px; } /* Textarea fallback inherits sizing but keeps its own padding/font. */ .program-editor-textarea { min-height: 300px; width: 100%; box-sizing: border-box; padding: 8px 10px; font-family: var(--font-mono, ui-monospace, "Cascadia Mono", "Source Code Pro", monospace); font-size: 14px; line-height: 1.5; background: transparent; color: inherit; border: 0; resize: vertical; tab-size: 2; } .program-editor-textarea:focus { outline: none; } .program-diagnostics { font-size: 0.88em; padding: 7px 12px; border-radius: 5px; background: color-mix(in srgb, var(--calc-lcd-fg, #303030) 4%, transparent); color: color-mix(in srgb, var(--calc-lcd-fg, #303030) 70%, transparent); min-height: 2.4em; line-height: 1.45; } .program-diagnostics .program-diag-error { color: var(--r47-err-accent); } .program-diagnostics .program-diag-warn { color: var(--r47-warn-accent); } .program-diag-list { margin: 2px 0 2px 18px; padding: 0; } .program-diag-list li { margin: 1px 0; } .program-diag-link { font: inherit; font-weight: 600; background: none; border: 0; padding: 0 2px; margin: 0; cursor: pointer; text-decoration: underline; text-underline-offset: 2px; color: inherit; } .program-diag-link:hover { background: color-mix(in srgb, var(--calc-f-gold) 20%, transparent); } .program-diag-link.program-diag-link-err { color: var(--r47-err-accent); } .program-diag-link.program-diag-link-warn { color: var(--r47-warn-accent); } .program-diag-hint { display: inline-block; margin-top: 2px; font-style: italic; color: color-mix(in srgb, var(--calc-lcd-fg, #303030) 70%, transparent); font-weight: normal; } .program-diag-hint code { font-size: 0.95em; background: color-mix(in srgb, var(--calc-f-gold) 18%, transparent); padding: 0 3px; border-radius: 2px; } /* CodeMirror lint gutter + diagnostic squiggles: pull in theme colours so errors/warnings are obvious against both dark- and light-LCD backgrounds. CM provides the structure; we just override the colours. */ .program-editor .cm-lint-marker { width: 12px; height: 12px; } .program-editor .cm-lint-marker-error { color: var(--r47-err-accent); } .program-editor .cm-lint-marker-warning { color: var(--r47-warn-accent); } .program-editor .cm-diagnostic-error { border-left: 3px solid var(--r47-err-accent); padding: 2px 6px; background: color-mix(in srgb, var(--r47-err-accent) 12%, var(--calc-lcd-bg, #e0e0e0)); } .program-editor .cm-diagnostic-warning { border-left: 3px solid var(--r47-warn-accent); padding: 2px 6px; background: color-mix(in srgb, var(--r47-warn-accent) 12%, var(--calc-lcd-bg, #e0e0e0)); } .program-editor .cm-lintRange-error { background: url("data:image/svg+xml;utf8,") repeat-x bottom / 6px 3px !important; } .program-editor .cm-lintRange-warning { background: url("data:image/svg+xml;utf8,") repeat-x bottom / 6px 3px !important; } /* ══════════════════════════════════════════════════════════════════════ Modal (diff view, obsolete-op preview, etc.) ══════════════════════════════════════════════════════════════════════ */ .r47-modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.45); display: flex; align-items: center; justify-content: center; z-index: 9999; padding: 24px; } .r47-modal { background: var(--calc-lcd-bg, #e0e0e0); color: var(--calc-lcd-fg, #303030); border-radius: 8px; box-shadow: 0 8px 40px rgba(0,0,0,0.3); max-width: min(1000px, 95vw); max-height: 90vh; display: flex; flex-direction: column; width: 100%; } .r47-modal-head { display: flex; justify-content: space-between; align-items: center; padding: 10px 16px; border-bottom: 1px solid color-mix(in srgb, var(--calc-lcd-fg, #303030) 15%, transparent); } .r47-modal-head h3 { margin: 0; font-size: 1em; font-weight: 600; } .r47-modal-close { border: 0; background: transparent; font-size: 1.6em; line-height: 1; padding: 2px 8px; cursor: pointer; color: inherit; border-radius: 4px; } .r47-modal-close:hover { background: color-mix(in srgb, var(--calc-lcd-fg, #303030) 10%, transparent); } .r47-modal-body { padding: 12px 16px; overflow: auto; flex: 1; } .r47-modal-foot { display: flex; justify-content: flex-end; gap: 6px; padding: 10px 16px; border-top: 1px solid color-mix(in srgb, var(--calc-lcd-fg, #303030) 15%, transparent); } .r47-modal-btn { font: inherit; font-size: 0.85em; padding: 5px 12px; border-radius: 5px; border: 1px solid color-mix(in srgb, var(--calc-lcd-fg, #303030) 22%, transparent); background: transparent; color: inherit; cursor: pointer; } .r47-modal-btn:hover { background: color-mix(in srgb, var(--calc-lcd-fg, #303030) 10%, transparent); } .r47-modal-btn-primary { background: color-mix(in srgb, var(--calc-f-gold) 30%, var(--calc-lcd-bg, #e0e0e0)); border-color: color-mix(in srgb, var(--calc-f-gold) 55%, transparent); font-weight: 600; } /* Tri-button modal footer (docsmd/program_dedup.md §6): Cancel on the left, Send-as-copy + Replace grouped on the right. Standard "destructive choice distant from the primary" pattern. */ .r47-modal-foot-tri .r47-modal-btn[data-act="cancel"] { margin-right: auto; } /* Bullet list styling for modal body prose (used by the duplicate-program dialog to enumerate the three options). The default .r47-modal-body overflow: auto handles long labels. */ .r47-modal-body ul { margin: 0.5em 0 0 1.2em; padding: 0; } .r47-modal-body ul li { margin: 0.2em 0; } /* Diff table inside the modal. */ .diff-table { border-collapse: collapse; width: 100%; font-family: var(--font-mono, monospace); font-size: 0.85em; } .diff-table th { text-align: left; padding: 3px 6px; background: color-mix(in srgb, var(--calc-lcd-fg, #303030) 8%, transparent); position: sticky; top: 0; } .diff-table th.diff-ln-head { width: 1%; } .diff-table td { padding: 2px 6px; vertical-align: top; white-space: pre-wrap; word-break: break-word; } .diff-table td.diff-ln { user-select: none; text-align: right; color: color-mix(in srgb, var(--calc-lcd-fg, #303030) 40%, transparent); padding-right: 8px; width: 1%; } .diff-table td.diff-same { color: color-mix(in srgb, var(--calc-lcd-fg, #303030) 70%, transparent); } .diff-table td.diff-del { background: color-mix(in srgb, var(--r47-err-accent) 14%, transparent); } .diff-table td.diff-add { background: color-mix(in srgb, var(--r47-ok-accent) 14%, transparent); } .diff-table td.diff-missing { background: color-mix(in srgb, var(--calc-lcd-fg, #303030) 5%, transparent); } /* Header stats (counts of deletions / additions). */ .diff-stats { font-family: var(--font-mono, monospace); font-size: 0.78em; font-weight: 600; margin-left: 10px; } .diff-stat-del { color: var(--r47-err-accent); margin-right: 4px; } .diff-stat-add { color: var(--r47-ok-accent); } /* Keyboard-nav hint in the diff modal header. */ .diff-nav-hint { font-size: 0.75em; color: color-mix(in srgb, var(--calc-lcd-fg, #303030) 55%, transparent); margin-left: auto; margin-right: 10px; } .diff-nav-hint kbd { font-family: var(--font-mono, monospace); font-size: 0.9em; padding: 1px 5px; background: color-mix(in srgb, var(--calc-lcd-fg, #303030) 12%, transparent); border: 1px solid color-mix(in srgb, var(--calc-lcd-fg, #303030) 25%, transparent); border-radius: 3px; margin: 0 1px; } /* Currently-selected change row in the diff modal (set by the j/k keyboard navigation). Outline rather than fill so the red/green hue of the row itself remains visible. */ .diff-row-current td { outline: 2px solid var(--calc-f-gold); outline-offset: -2px; } /* Obsolete-op preview table. */ .obs-table { border-collapse: collapse; font-family: var(--font-mono, monospace); font-size: 0.9em; margin-top: 6px; } .obs-table th, .obs-table td { padding: 3px 8px; text-align: left; border-bottom: 1px solid color-mix(in srgb, var(--calc-lcd-fg, #303030) 10%, transparent); } .obs-table th { font-family: inherit; font-weight: 600; } .obs-table .obs-arrow { color: color-mix(in srgb, var(--calc-lcd-fg, #303030) 55%, transparent); } /* Cheat-sheet modal variant + floating [?] button. */ .r47-modal-cheatsheet { max-width: 720px; } .r47-modal-cheatsheet .cheatsheet-body { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 12px 18px; } .r47-modal-cheatsheet .cheatsheet-body section h4 { margin: 0 0 4px 0; font-size: 0.82em; text-transform: uppercase; letter-spacing: 0.06em; color: color-mix(in srgb, var(--calc-lcd-fg, #303030) 70%, transparent); } .r47-modal-cheatsheet .cheatsheet-body table { width: 100%; border-collapse: collapse; font-size: 0.85em; } .r47-modal-cheatsheet .cheatsheet-body td { padding: 2px 4px; vertical-align: top; } .r47-modal-cheatsheet .cheatsheet-body td:first-child { width: 110px; white-space: nowrap; } .r47-modal-cheatsheet kbd { font-family: var(--font-mono, monospace); font-size: 0.85em; padding: 1px 5px; background: color-mix(in srgb, var(--calc-lcd-fg, #303030) 10%, transparent); border: 1px solid color-mix(in srgb, var(--calc-lcd-fg, #303030) 22%, transparent); border-radius: 3px; } .cheatsheet-btn { /* Fixed to the viewport so it's always reachable while the user scrolls the pane. Small enough (26 px) not to obscure content; high z so it rides above modals' backdrop-free regions. Tracks the LCD theme so the button stays legible on dark themes. */ position: fixed; right: 10px; bottom: 10px; width: 28px; height: 28px; border-radius: 50%; border: 1px solid color-mix(in srgb, var(--calc-lcd-fg, #303030) 25%, transparent); background: var(--calc-lcd-bg, #f7f7f8); color: var(--calc-lcd-fg, #303030); font-weight: 600; font-size: 1em; cursor: pointer; z-index: 100; box-shadow: 0 2px 8px rgba(0,0,0,0.15); } .cheatsheet-btn:hover { background: var(--calc-f-gold); color: var(--calc-bg, #2b2a29); border-color: var(--calc-f-gold); } /* Mobile nav state: showing the R47 icon to return to the calculator. Always uses the calc body colour (dark) since the icon is rendered against the calculator's bezel, not the LCD. */ .cheatsheet-btn--nav-up { background: var(--calc-key-bg, #1a1a1a); border-color: color-mix(in srgb, var(--calc-key-label, #fff) 25%, transparent); padding: 0; display: flex; align-items: center; justify-content: center; } .cheatsheet-btn--nav-up:hover { background: var(--calc-key-hover, #333); border-color: color-mix(in srgb, var(--calc-key-label, #fff) 40%, transparent); } .cheatsheet-btn-icon { width: 22px; height: 22px; border-radius: 3px; display: block; pointer-events: none; } /* Compact modal variant (name chooser, small confirmations). */ .r47-modal-compact { max-width: 440px; } .r47-modal-field { display: flex; flex-direction: column; gap: 4px; margin-top: 8px; font-size: 0.88em; } .r47-modal-field > span { font-weight: 600; } .r47-modal-input { font: inherit; font-family: var(--font-mono, monospace); font-size: 0.95em; padding: 5px 8px; background: color-mix(in srgb, var(--calc-lcd-fg, #303030) 5%, var(--calc-lcd-bg, #e0e0e0)); color: var(--calc-lcd-fg, #303030); border: 1px solid color-mix(in srgb, var(--calc-lcd-fg, #303030) 22%, transparent); border-radius: 4px; } .r47-modal-input:focus { outline: none; border-color: var(--calc-f-gold); } .r47-modal-hint { margin-top: 4px; font-size: 0.8em; color: color-mix(in srgb, var(--calc-lcd-fg, #303030) 55%, transparent); } /* Send-to-Calc progress modal: checklist of steps + final instructions block. Icons animate between ○ (pending), … (running), ✓ (ok), ✕ (error). */ .send-steps { list-style: none; padding: 0; margin: 0 0 10px 0; display: flex; flex-direction: column; gap: 6px; } .send-step { display: flex; align-items: flex-start; gap: 10px; padding: 8px 10px; border-radius: 5px; background: color-mix(in srgb, var(--calc-lcd-fg, #303030) 4%, transparent); border-left: 3px solid color-mix(in srgb, var(--calc-lcd-fg, #303030) 20%, transparent); transition: background 200ms, border-left-color 200ms; } .send-step-icon { font-weight: 700; font-size: 1.2em; min-width: 1.5em; text-align: center; line-height: 1.4; color: color-mix(in srgb, var(--calc-lcd-fg, #303030) 50%, transparent); } .send-step-body { flex: 1; min-width: 0; } .send-step-title { font-size: 0.92em; } .send-step-detail { font-size: 0.8em; color: color-mix(in srgb, var(--calc-lcd-fg, #303030) 60%, transparent); font-family: var(--font-mono, monospace); margin-top: 2px; word-break: break-all; } .send-step-running { background: color-mix(in srgb, var(--calc-f-gold) 18%, transparent); border-left-color: var(--calc-f-gold); } .send-step-running .send-step-icon { color: var(--calc-f-gold); animation: send-step-pulse 1s ease-in-out infinite; } @keyframes send-step-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } } .send-step-ok { background: color-mix(in srgb, var(--r47-ok-accent) 12%, transparent); border-left-color: var(--r47-ok-accent); } .send-step-ok .send-step-icon { color: var(--r47-ok-accent); } .send-step-error { background: color-mix(in srgb, var(--r47-err-accent) 12%, transparent); border-left-color: var(--r47-err-accent); } .send-step-error .send-step-icon { color: var(--r47-err-accent); } /* Finish block: shown after all steps complete (success) or on error. Holds the "how to run" instructions. */ .send-finish { margin-top: 12px; padding: 10px 12px; border-radius: 5px; background: color-mix(in srgb, var(--calc-lcd-fg, #303030) 3%, transparent); } .send-finish h4 { margin: 0 0 8px 0; font-size: 1em; } .send-finish ol, .send-finish ul { margin: 6px 0 6px 20px; padding: 0; } .send-finish li { margin-bottom: 4px; font-size: 0.9em; line-height: 1.45; } .send-finish kbd { font-family: var(--font-mono, monospace); font-size: 0.9em; padding: 1px 5px; background: color-mix(in srgb, var(--calc-lcd-fg, #303030) 12%, transparent); border: 1px solid color-mix(in srgb, var(--calc-lcd-fg, #303030) 22%, transparent); border-radius: 3px; } .send-hint { font-size: 0.85em; color: color-mix(in srgb, var(--calc-lcd-fg, #303030) 60%, transparent); font-style: italic; margin: 6px 0 0 0; } .send-warn { font-size: 0.88em; color: var(--r47-warn-fg); margin: 0 0 6px 0; padding: 4px 8px; background: color-mix(in srgb, var(--r47-warn-accent) 14%, transparent); border-left: 3px solid var(--r47-warn-accent); border-radius: 3px; } .send-err-list { font-family: var(--font-mono, monospace); font-size: 0.85em; color: var(--r47-err-fg); background: color-mix(in srgb, var(--r47-err-accent) 10%, transparent); border-left: 3px solid var(--r47-err-accent); padding: 6px 8px 6px 24px; border-radius: 3px; margin: 6px 0; } .send-success h4 { color: var(--r47-ok-fg); } .send-failure h4 { color: var(--r47-err-fg); } /* ══════════════════════════════════════════════════════════════════════ Files tab ══════════════════════════════════════════════════════════════════════ */ .files-actions { display: flex; flex-wrap: wrap; gap: 4px; } .files-btn { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; font: inherit; font-size: 0.65em; line-height: 1; padding: 2px; width: 44px; border-radius: 5px; border: 1px solid color-mix(in srgb, var(--calc-lcd-fg, #303030) 22%, transparent); background: color-mix(in srgb, var(--calc-lcd-fg, #303030) 4%, transparent); color: color-mix(in srgb, var(--calc-lcd-fg, #303030) 70%, transparent); cursor: pointer; white-space: nowrap; transition: background 100ms, color 100ms, border-color 100ms; } .files-btn:hover { background: color-mix(in srgb, var(--calc-lcd-fg, #303030) 10%, transparent); color: var(--calc-lcd-fg, #303030); } .files-btn-icon { width: 14px; height: 14px; display: block; flex-shrink: 0; pointer-events: none; } .files-btn-label { font-size: 0.95em; letter-spacing: 0.02em; } /* Drag-over state for the Files panel — becomes a gold-outlined drop target so the user sees the drop is valid. */ #panel-files.files-drop-active { outline: 3px dashed var(--calc-f-gold, #e5ae5a); outline-offset: -3px; border-radius: 5px; background: color-mix(in srgb, var(--calc-f-gold) 6%, transparent); } #panel-files.files-drop-active::before { content: "Drop files to upload"; display: block; font-weight: 600; color: var(--calc-f-gold); text-align: center; padding: 4px 0; margin-bottom: 4px; background: color-mix(in srgb, var(--calc-f-gold) 12%, transparent); border-radius: 4px; } /* Filter + sort row above the three file sections. */ .files-filter-row { display: flex; gap: 6px; margin-bottom: 4px; } .files-filter-input { flex: 1; min-width: 0; font: inherit; font-size: 0.85em; padding: 4px 8px; background: color-mix(in srgb, var(--calc-lcd-fg, #303030) 5%, var(--calc-lcd-bg, #e0e0e0)); color: var(--calc-lcd-fg, #303030); border: 1px solid color-mix(in srgb, var(--calc-lcd-fg, #303030) 22%, transparent); border-radius: 4px; } .files-filter-input:focus { outline: none; border-color: var(--calc-f-gold); } .files-sort-select { font: inherit; font-size: 0.82em; padding: 2px 6px; background: color-mix(in srgb, var(--calc-lcd-fg, #303030) 5%, var(--calc-lcd-bg, #e0e0e0)); color: var(--calc-lcd-fg, #303030); border: 1px solid color-mix(in srgb, var(--calc-lcd-fg, #303030) 22%, transparent); border-radius: 4px; } .files-section { margin: 0; } .files-section h3 { font-size: 0.88em; text-transform: uppercase; letter-spacing: 0.06em; margin: 0 0 6px 0; color: color-mix(in srgb, var(--calc-lcd-fg, #303030) 70%, transparent); font-weight: 600; } .files-count { font-weight: 400; text-transform: none; letter-spacing: 0; margin-left: 4px; color: color-mix(in srgb, var(--calc-lcd-fg, #303030) 50%, transparent); } .files-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 2px; } .files-list li { display: flex; align-items: center; gap: 6px; padding: 5px 8px; border-radius: 4px; font-size: 0.95em; background: color-mix(in srgb, var(--calc-lcd-fg, #303030) 3%, transparent); } .files-list li:hover { background: color-mix(in srgb, var(--calc-lcd-fg, #303030) 8%, transparent); } .files-list .files-empty { font-style: italic; color: color-mix(in srgb, var(--calc-lcd-fg, #303030) 50%, transparent); background: transparent; } .files-list .file-name { font-family: var(--font-mono, ui-monospace, monospace); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .files-list .file-size { font-size: 0.9em; color: color-mix(in srgb, var(--calc-lcd-fg, #303030) 50%, transparent); white-space: nowrap; } .files-list .file-actions { display: flex; gap: 2px; } .file-action-btn { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; font: inherit; font-size: 0.65em; line-height: 1; padding: 2px; width: 44px; border-radius: 5px; border: 1px solid color-mix(in srgb, var(--calc-lcd-fg, #303030) 18%, transparent); background: color-mix(in srgb, var(--calc-lcd-fg, #303030) 4%, transparent); color: color-mix(in srgb, var(--calc-lcd-fg, #303030) 70%, transparent); cursor: pointer; white-space: nowrap; transition: background 100ms, color 100ms, border-color 100ms; } .file-action-btn:hover { background: color-mix(in srgb, var(--calc-lcd-fg, #303030) 10%, transparent); color: var(--calc-lcd-fg, #303030); } .file-action-btn.file-action-danger:hover { border-color: var(--r47-err-accent); color: var(--r47-err-accent); } .file-action-btn-icon { width: 14px; height: 14px; display: block; flex-shrink: 0; pointer-events: none; } .file-action-btn-label { font-size: 0.95em; letter-spacing: 0.02em; } /* In-memory program row: show the slot number and mark the active program with a coloured border + "active" badge. */ .files-list-mem .file-slot { font-family: var(--font-mono, monospace); font-size: 0.88em; color: color-mix(in srgb, var(--calc-lcd-fg, #303030) 55%, transparent); min-width: 2.4em; } .files-list-mem .file-row-current { background: color-mix(in srgb, var(--calc-f-gold) 18%, transparent); border-left: 3px solid var(--calc-f-gold); padding-left: 3px; } .files-list-mem .file-badge-current { font-size: 0.78em; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; padding: 1px 6px; border-radius: 8px; background: var(--calc-f-gold); color: var(--calc-bg, #2b2a29); } /* ══════════════════════════════════════════════════════════════════════ Docs tab (accordion sections) ══════════════════════════════════════════════════════════════════════ */ .docs-section { border: 1px solid color-mix(in srgb, var(--calc-lcd-fg, #303030) 18%, transparent); border-radius: 5px; overflow: hidden; } .docs-section > summary { padding: 8px 12px; font-weight: 600; font-size: 0.9em; cursor: pointer; background: color-mix(in srgb, var(--calc-lcd-fg, #303030) 4%, transparent); user-select: none; list-style: none; } .docs-section > summary::-webkit-details-marker { display: none; } .docs-section > summary::before { content: "▸"; display: inline-block; margin-right: 6px; transition: transform 150ms; color: color-mix(in srgb, var(--calc-lcd-fg, #303030) 60%, transparent); } .docs-section[open] > summary::before { transform: rotate(90deg); } .docs-section > summary:hover { background: color-mix(in srgb, var(--calc-lcd-fg, #303030) 10%, transparent); } .docs-body { padding: 10px 14px; font-size: 0.88em; line-height: 1.5; max-height: 50vh; overflow-y: auto; } .docs-body h4 { font-size: 0.95em; margin: 8px 0 4px 0; color: color-mix(in srgb, var(--calc-lcd-fg, #303030) 85%, transparent); } .docs-body p { margin: 0 0 8px 0; } .docs-body ul, .docs-body ol { margin: 4px 0 8px 18px; padding: 0; } .docs-body code { font-family: var(--font-mono, monospace); font-size: 0.92em; background: color-mix(in srgb, var(--calc-lcd-fg, #303030) 8%, transparent); padding: 1px 4px; border-radius: 3px; } .docs-body pre { background: color-mix(in srgb, var(--calc-lcd-fg, #303030) 5%, var(--calc-lcd-bg, #e0e0e0)); border: 1px solid color-mix(in srgb, var(--calc-lcd-fg, #303030) 15%, transparent); padding: 8px 10px; margin: 4px 0 8px 0; border-radius: 4px; font-family: var(--font-mono, monospace); font-size: 0.88em; overflow-x: auto; } .docs-body table { border-collapse: collapse; font-size: 0.95em; margin: 4px 0 8px 0; width: 100%; } .docs-body th, .docs-body td { text-align: left; padding: 3px 6px; border-bottom: 1px solid color-mix(in srgb, var(--calc-lcd-fg, #303030) 12%, transparent); } .docs-body th { font-weight: 600; } .docs-loading { font-style: italic; color: color-mix(in srgb, var(--calc-lcd-fg, #303030) 50%, transparent); } /* Tutorial browser + player fill the available panel height. #tutBrowser scrolls as a unit; #tutPlayer pins the nav bar at the bottom and only the viewport div scrolls. */ #tutBrowser { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; } #tutPlayer { flex: 1; min-height: 0; display: flex; flex-direction: column; overflow: hidden; } /* display:flex above beats the UA [hidden] rule — override explicitly */ #tutPlayer[hidden] { display: none; } /* Tutorial slide viewport. Reset font-size so we don't inherit the .docs-body 0.88em shrink — tutorial text wants to be comfortable reading size (~15px), not the same scale as Reference / Credits. */ .tutorial-viewport { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; padding: 8px 4px; font-size: 15px; line-height: 1.55; } .tutorial-nav { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 8px; padding-bottom: 8px; border-bottom: 1px solid color-mix(in srgb, var(--calc-lcd-fg, #303030) 12%, transparent); } .tutorial-nav-btn { font: inherit; font-size: 0.9em; padding: 4px 8px; border-radius: 5px; border: 1px solid color-mix(in srgb, var(--calc-lcd-fg, #303030) 22%, transparent); background: transparent; color: color-mix(in srgb, var(--calc-lcd-fg, #303030) 80%, transparent); cursor: pointer; } .tutorial-nav-btn:disabled { opacity: 0.4; cursor: not-allowed; } .tutorial-nav-btn:hover:not(:disabled) { background: color-mix(in srgb, var(--calc-lcd-fg, #303030) 10%, transparent); color: var(--calc-lcd-fg, #303030); } .tutorial-jump { font: inherit; font-size: 0.85em; padding: 4px 8px; flex: 1 1 0; min-width: 0; max-width: 100%; border-radius: 5px; border: 1px solid color-mix(in srgb, var(--calc-lcd-fg, #303030) 22%, transparent); background: transparent; color: color-mix(in srgb, var(--calc-lcd-fg, #303030) 80%, transparent); cursor: pointer; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; } .tutorial-jump:hover { background: color-mix(in srgb, var(--calc-lcd-fg, #303030) 10%, transparent); } .tut-layout-badge { display: inline-block; font-size: 0.75em; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; padding: 1px 5px; border-radius: 3px; margin-left: 5px; vertical-align: middle; background: color-mix(in srgb, var(--calc-lcd-fg, #303030) 10%, transparent); color: color-mix(in srgb, var(--calc-lcd-fg, #303030) 55%, transparent); } .tut-layout-badge-r47 { background: color-mix(in srgb, var(--calc-f-gold) 18%, transparent); color: color-mix(in srgb, var(--calc-f-gold) 80%, var(--calc-lcd-fg, #000)); } .tut-layout-badge-c47 { background: color-mix(in srgb, var(--calc-g-blue) 18%, transparent); color: color-mix(in srgb, var(--calc-g-blue) 80%, var(--calc-lcd-fg, #000)); } .tut-layout-badge-dm42 { background: color-mix(in srgb, var(--calc-lcd-fg, #303030) 12%, transparent); color: color-mix(in srgb, var(--calc-lcd-fg, #303030) 60%, transparent); } .tutorial-slide-title { font-size: 1.2em; font-weight: 700; margin: 0 0 8px 0; } .tutorial-slide-body { margin: 4px 0; overflow-wrap: break-word; } .tutorial-slide-body p { margin: 0 0 10px 0; } .tutorial-slide-body ul, .tutorial-slide-body ol { margin: 6px 0 10px 22px; padding: 0; } .tutorial-slide-body li { margin-bottom: 4px; } .tutorial-slide-body code { font-size: 0.95em; } /* ASCII graphs / indented code blocks: preserve alignment (no wrap), clamp to column width, and scroll horizontally inside the 
   instead of pushing the page sideways on narrow screens. */
.tutorial-slide-body pre {
  font-size: 0.92em;
  line-height: 1.4;
  max-width: 100%;
  overflow-x: auto;
  white-space: pre;
  -webkit-overflow-scrolling: touch;
}
/* Clipboard-copy button for 
 blocks that hold an R47 program
   (decorateProgramBlocks in tutorialTab.js wraps only LBL-bearing listings).
   The wrapper sits outside the pre's scroll container so the button stays
   pinned to the top-right regardless of horizontal scrolling. */
.tutorial-program-wrap {
  position: relative;
}
.tutorial-copy-btn {
  position: absolute;
  top: 4px;
  right: 4px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 7px;
  font-family: var(--font-body);
  font-size: 0.78em;
  line-height: 1.6;
  color: var(--calc-lcd-fg, #303030);
  background: color-mix(in srgb, var(--calc-lcd-bg, #e0e0e0) 85%, transparent);
  border: 1px solid color-mix(in srgb, var(--calc-lcd-fg, #303030) 20%, transparent);
  border-radius: 3px;
  cursor: pointer;
  opacity: 0.55;
  transition: opacity 140ms, background 140ms, color 140ms, border-color 140ms;
}
.tutorial-copy-btn:hover,
.tutorial-copy-btn:focus-visible {
  opacity: 1;
  outline: none;
}
.tutorial-copy-btn-icon {
  width: 12px;
  height: 12px;
  flex-shrink: 0;
  pointer-events: none;
}
.tutorial-copy-btn.tutorial-copy-btn-ok {
  opacity: 1;
  color: #2b7a2b;
  border-color: #2b7a2b;
}
.tutorial-copy-btn.tutorial-copy-btn-fail {
  opacity: 1;
  color: #b23939;
  border-color: #b23939;
}
.tutorial-try-it {
  margin-top: 8px;
  padding: 8px 10px;
  background: color-mix(in srgb, var(--calc-f-gold) 15%, transparent);
  border-left: 3px solid var(--calc-f-gold);
  border-radius: 3px;
  font-family: var(--font-mono, monospace);
  font-size: 0.95em;
  overflow-wrap: anywhere;
}
.tutorial-try-it strong { font-family: var(--font-body); }
/* Progress bar sits above the slide viewport. */
.tutorial-progress-wrap {
  height: 3px;
  background: color-mix(in srgb, var(--calc-lcd-fg, #303030) 10%, transparent);
  border-radius: 2px;
  overflow: hidden;
  margin-bottom: 6px;
}
.tutorial-progress {
  height: 100%;
  background: var(--calc-f-gold);
  transition: width 220ms;
}
.tutorial-section-badge {
  display: inline-block;
  font-size: 0.72em;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 3px;
  background: color-mix(in srgb, var(--calc-lcd-fg, #303030) 10%, transparent);
  color: color-mix(in srgb, var(--calc-lcd-fg, #303030) 65%, transparent);
  margin-bottom: 6px;
}
/* Action list used by button slides (Primary / f / g / In a program). */
.tutorial-action-list {
  margin: 6px 0;
  display: grid;
  grid-template-columns: minmax(80px, auto) 1fr;
  gap: 3px 10px;
}
.tutorial-action-list dt {
  font-weight: 600;
  font-size: 0.82em;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: color-mix(in srgb, var(--calc-lcd-fg, #303030) 60%, transparent);
}
.tutorial-action-list dt.tut-shift-f { color: var(--calc-f-gold); }
.tutorial-action-list dt.tut-shift-g { color: var(--calc-g-blue); }
.tutorial-action-list dd {
  margin: 0;
  font-size: 0.92em;
}
.tutorial-action-list dd code { font-size: 0.95em; }

/* Walkthrough live checklist — ticks auto-light as the user
   completes each step on the live calculator (docsTab.js
   walkthrough runner). */
.walkthrough-checks-wrap {
  margin-top: 12px;
  padding: 10px 12px;
  background: color-mix(in srgb, var(--calc-lcd-fg, #303030) 4%, transparent);
  border: 1px solid color-mix(in srgb, var(--calc-lcd-fg, #303030) 12%, transparent);
  border-radius: 5px;
}
.walkthrough-checks {
  list-style: none;
  padding: 0;
  margin: 0 0 8px 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.walk-step {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 3px 4px;
  font-size: 0.92em;
}
.walk-step .walk-check {
  width: 1.5em;
  font-weight: 700;
  text-align: center;
  color: color-mix(in srgb, var(--calc-lcd-fg, #303030) 45%, transparent);
  transition: color 200ms;
}
.walk-step.walk-done {
  background: color-mix(in srgb, var(--r47-ok-accent) 12%, transparent);
  border-radius: 3px;
}
.walk-step.walk-done .walk-check {
  color: var(--r47-ok-accent);
}
.walk-step.walk-done .walk-label {
  text-decoration: line-through;
  text-decoration-thickness: 1px;
  color: color-mix(in srgb, var(--calc-lcd-fg, #303030) 70%, transparent);
}

/* ══════════════════════════════════════════════════════════════════════
   Tutorial tab — browser + player
   ══════════════════════════════════════════════════════════════════════ */

/* Browser — search + category sections */
.tut-browser {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.tut-search {
  font: inherit;
  font-size: 0.9em;
  width: 100%;
  box-sizing: border-box;
  padding: 6px 10px;
  border: 1px solid color-mix(in srgb, var(--calc-lcd-fg, #303030) 22%, transparent);
  border-radius: 5px;
  background: color-mix(in srgb, var(--calc-lcd-fg, #303030) 4%, transparent);
  color: var(--calc-lcd-fg, #303030);
  outline: none;
}
.tut-search:focus {
  border-color: color-mix(in srgb, var(--calc-lcd-fg, #303030) 45%, transparent);
}
.tut-cat-section {
  border: 1px solid color-mix(in srgb, var(--calc-lcd-fg, #303030) 12%, transparent);
  border-radius: 6px;
  overflow: hidden;
}
.tut-cat-section > summary {
  cursor: pointer;
  list-style: none;
  padding: 7px 10px;
  font-size: 0.82em;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  background: color-mix(in srgb, var(--calc-lcd-fg, #303030) 6%, transparent);
  color: color-mix(in srgb, var(--calc-lcd-fg, #303030) 75%, transparent);
  user-select: none;
  display: flex;
  align-items: center;
  gap: 6px;
}
.tut-cat-section > summary::-webkit-details-marker { display: none; }
.tut-cat-section > summary::before {
  content: "▶";
  font-size: 0.7em;
  transition: transform 180ms;
  color: color-mix(in srgb, var(--calc-lcd-fg, #303030) 45%, transparent);
}
.tut-cat-section[open] > summary::before { transform: rotate(90deg); }

/* Tutorial entry — card-style button */
.tut-entry {
  display: block;
  width: 100%;
  box-sizing: border-box;
  text-align: left;
  padding: 10px 12px;
  background: transparent;
  border: none;
  border-top: 1px solid color-mix(in srgb, var(--calc-lcd-fg, #303030) 8%, transparent);
  color: var(--calc-lcd-fg, #303030);
  cursor: pointer;
  font: inherit;
  font-size: 0.9em;
}
.tut-entry:hover {
  background: color-mix(in srgb, var(--calc-lcd-fg, #303030) 6%, transparent);
}
.tut-entry:active {
  background: color-mix(in srgb, var(--calc-lcd-fg, #303030) 10%, transparent);
}
.tut-entry-top {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 3px;
}
.tut-entry-title {
  font-weight: 600;
  font-size: 1em;
}
.tut-entry-done {
  font-size: 0.8em;
  color: var(--r47-ok-accent);
  font-weight: 600;
}
.tut-entry-desc {
  font-size: 0.92em;
  color: color-mix(in srgb, var(--calc-lcd-fg, #303030) 65%, transparent);
  line-height: 1.4;
  margin-bottom: 5px;
}
.tut-entry-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.78em;
  color: color-mix(in srgb, var(--calc-lcd-fg, #303030) 55%, transparent);
  margin-bottom: 5px;
}
.tut-difficulty {
  padding: 1px 6px;
  border-radius: 3px;
  font-weight: 600;
  font-size: 0.95em;
}
.tut-difficulty-beginner     { background: color-mix(in srgb, var(--r47-ok-accent) 15%, transparent); color: var(--r47-ok-fg); }
.tut-difficulty-intermediate { background: color-mix(in srgb, var(--calc-f-gold) 20%, transparent); color: color-mix(in srgb, var(--calc-f-gold) 85%, var(--calc-lcd-fg, #000)); }
.tut-difficulty-advanced     { background: color-mix(in srgb, var(--r47-err-accent) 15%, transparent); color: var(--r47-err-fg); }
.tut-entry-progress-wrap {
  height: 3px;
  background: color-mix(in srgb, var(--calc-lcd-fg, #303030) 10%, transparent);
  border-radius: 2px;
  overflow: hidden;
}
.tut-entry-progress {
  height: 100%;
  background: var(--calc-f-gold);
  border-radius: 2px;
}

/* Player — back button + title above the slide viewer */
.tut-player-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
  min-width: 0;
}
.tut-back-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font: inherit;
  font-size: 0.9em;
  padding: 6px 8px 6px 0;
  background: transparent;
  border: none;
  color: var(--calc-lcd-fg, #303030);
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
}
.tut-back-btn:hover {
  text-decoration: underline;
}
.tut-player-title {
  font-size: 0.78em;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: color-mix(in srgb, var(--calc-lcd-fg, #303030) 55%, transparent);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

/* About tab — external link buttons at the top of the panel */
.about-links {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 10px;
}
.about-link {
  display: block;
  padding: 10px 14px;
  border: 1px solid color-mix(in srgb, var(--calc-lcd-fg, #303030) 18%, transparent);
  border-radius: 6px;
  background: color-mix(in srgb, var(--calc-lcd-fg, #303030) 5%, transparent);
  color: var(--calc-lcd-fg, #303030);
  text-decoration: none;
  font-size: 0.92em;
  font-weight: 600;
}
.about-link:hover {
  background: color-mix(in srgb, var(--calc-lcd-fg, #303030) 10%, transparent);
  border-color: color-mix(in srgb, var(--calc-lcd-fg, #303030) 30%, transparent);
}
.about-link::after {
  content: " ↗";
  font-size: 0.85em;
  opacity: 0.55;
}