/* ============================================================ Bonsai — light, earthy app UI parchment & forest · no gradients · no glow · no dark mode ============================================================ */ :root { --paper: #efe6d3; /* parchment ground */ --paper-panel: #f6efdf; /* bars / surfaces */ --paper-edge: #e7dcc4; /* pressed / active tint */ --ink: #2b2618; /* primary text */ --ink-soft: #5b5340; /* secondary text */ --ink-faint: #8c8068; /* inactive / labels */ --line: #d6c8a8; /* hairline */ --line-strong: #c3b290; --forest: #34503a; /* primary green */ --forest-deep: #25402b; --leaf: #4c6b46; /* canopy mid */ --leaf-light: #6f8d5a; /* canopy highlight */ --leaf-warm: #9a8a4e; /* occasional warm leaf */ --bark: #5a4a35; /* trunk / branches */ --water: #6d949b; /* pond surface */ --water-deep: #46707a; /* pond depth */ --water-light: #a7c6c8; /* shimmer */ --correct: #3f7a4e; /* graded right */ --incorrect: #b4513f; /* graded wrong */ /* Home-garden text over the canvas — flips with the REAL sky, not the chrome theme toggle (see body.garden-night). Day values: */ --garden-head: #25402b; --garden-text: #2b2618; --garden-soft: #5b5340; --garden-faint: #8c8068; --bar-h: 3.25rem; --tab-h: 4rem; } /* ── Night mode · the whole UI darkens to match the night sky ── The garden script adds .is-night to when it's nighttime where the user is. Because the app is entirely token-driven, overriding the colour tokens here recolours every surface (bars, panels, text, buttons). The tree/water palette is read once by the canvas at load, so it's untouched. */ body.is-night { --paper: #20263a; --paper-panel: #2a3148; --paper-edge: #38415c; --ink: #e7e9f1; --ink-soft: #b3b9cb; --ink-faint: #828ba3; --line: #3a4258; --line-strong: #4b5571; --forest: #9bbf93; /* One consistent green in dark mode: deep + correct collapse onto the primary green, so every green UI accent matches. (The tree keeps its own canopy colours — the canvas reads --leaf/--leaf-* separately at load.) */ --forest-deep: var(--forest); --correct: var(--forest); --incorrect: #d98b78; } /* Switching Appearance (light ⇄ dark) recolours every token at once, which would otherwise snap the whole UI in one frame. The theme controller adds .theme-anim to for the length of the change, so the colour swap cross-fades smoothly. It's only on during the switch, so normal hover/press transitions keep their own faster timing; and it's gated to motion-OK users (the reduced-motion block below already disables transitions outright). */ @media (prefers-reduced-motion: no-preference) { body.theme-anim, body.theme-anim *, body.theme-anim *::before, body.theme-anim *::after { transition: background-color 0.35s ease, color 0.35s ease, border-color 0.35s ease, fill 0.35s ease, box-shadow 0.35s ease !important; } } /* The home-garden text flips light in two cases: when the chrome is in dark mode (.is-night) so it stays readable on the dark UI, and when it's actually night where the user is (.garden-night) so it reads over the real dark sky even if the chrome is kept light. (The garden tree/sky canvas itself still follows the real sky only — see the JS theme controller.) */ body.is-night, body.garden-night { --garden-head: #eef1f6; --garden-text: #e7e9f1; --garden-soft: #c3c9d8; --garden-faint: #aab2c6; } /* Night mode: the dim grey text along the bottom (tab labels, the Prompts panel, and the weather caption) is hard to read on the dark UI — brighten it a step. :not(.active) keeps the active tab's green; hover still brightens fully. */ body.is-night .tab:not(.active) { color: var(--ink-soft); } body.is-night .tab:not(.active):hover { color: var(--ink); } body.is-night .garden-control-handle { color: var(--ink-soft); } body.is-night .garden-weather, body.garden-night .garden-weather { color: var(--garden-soft); } body.is-night .garden-weather.is-shown, body.garden-night .garden-weather.is-shown { opacity: 1; } /* The CO₂ stat dot uses the tree's --leaf green; in dark mode point it at the one UI green so every green accent matches (the tree itself is unaffected). */ body.is-night .garden-stat[data-kind="co2"] .garden-stat-dot { background: var(--forest); } /* The title + slogan float over the canvas, and clouds drift right behind them. At night the text is light, so a white cloud passing behind would wash it out. Fix: a soft dark scrim behind the header (darkens whatever's behind — sky OR cloud) plus a dense dark halo on the glyphs, so it's always readable. */ body.is-night .home-head::before, body.garden-night .home-head::before { content: ""; position: absolute; left: 50%; top: 46%; transform: translate(-50%, -50%); width: 40rem; max-width: 94vw; height: 13rem; border-radius: 50%; background: radial-gradient(ellipse at center, rgba(16, 22, 40, 0.85) 0%, rgba(16, 22, 40, 0.6) 38%, rgba(16, 22, 40, 0) 70%); filter: blur(3px); z-index: -1; /* behind the text, above the canvas/clouds */ pointer-events: none; } body.is-night .home-title, body.is-night .home-subtitle, body.is-night .home-greeting, body.garden-night .home-title, body.garden-night .home-subtitle, body.garden-night .home-greeting { text-shadow: 0 0 12px rgba(8, 12, 28, 0.92), 0 1px 3px rgba(8, 12, 28, 0.95); } /* ease the chrome between day and night instead of snapping */ body, .topbar, .tabbar, .garden-control, .composer, .msg-body { transition: background-color 0.6s ease, color 0.6s ease, border-color 0.6s ease; } * { margin: 0; padding: 0; box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { min-height: 100dvh; background-color: var(--paper); background-image: repeating-linear-gradient(0deg, rgba(120,100,60,0.018) 0 1px, transparent 1px 3px); color: var(--ink); font-family: 'Spectral', Georgia, serif; font-size: 1.0625rem; line-height: 1.6; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } ::selection { background: rgba(52,80,58,0.18); } /* ── Top bar ─────────────────────────────────────────────── */ .topbar { position: fixed; top: 0; left: 0; right: 0; height: var(--bar-h); display: flex; align-items: center; padding: 0 1.25rem; background: var(--paper-panel); border-bottom: 1px solid var(--line); z-index: 20; } .wordmark { display: inline-flex; align-items: center; background: none; border: none; font-family: inherit; font-size: 1.25rem; font-weight: 600; letter-spacing: 0.01em; color: var(--forest-deep); cursor: pointer; padding: 0.25rem 0; } .wordmark-text { display: inline-block; /* exit (default): gentle, slightly slower */ transition: transform 0.42s cubic-bezier(0.22, 1, 0.36, 1); } .wordmark-leaf { width: 1.05em; height: 1.05em; margin-left: 0.1em; color: var(--forest); transform: translateX(-0.5em) scale(0.4) rotate(-25deg); transform-origin: left center; opacity: 0; /* exit (default): softer, eases the leaf back in without snapping */ transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.4s ease; } .wordmark:hover .wordmark-text, .wordmark:focus-visible .wordmark-text { transform: translateX(-1px); /* enter: springy */ transition: transform 0.26s cubic-bezier(0.34, 1.56, 0.64, 1); } .wordmark:hover .wordmark-leaf, .wordmark:focus-visible .wordmark-leaf { transform: translateX(0) scale(1) rotate(0deg); opacity: 1; /* enter: springy */ transition: transform 0.32s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.22s ease-out; } .wordmark:focus-visible { outline: 2px solid var(--forest-deep); outline-offset: 2px; border-radius: 6px; } @media (prefers-reduced-motion: reduce) { .wordmark-text, .wordmark-leaf { transition: opacity 0.2s ease; } .wordmark:hover .wordmark-text, .wordmark:focus-visible .wordmark-text { transform: none; } .wordmark:hover .wordmark-leaf, .wordmark:focus-visible .wordmark-leaf { transform: none; opacity: 1; } } /* ── Screens ─────────────────────────────────────────────── */ .screens { position: fixed; top: var(--bar-h); left: 0; right: 0; bottom: calc(var(--tab-h) + env(safe-area-inset-bottom, 0px)); overflow-y: auto; -webkit-overflow-scrolling: touch; } .page { display: none; } .page.active { display: block; } .content-page { max-width: 44rem; margin: 0 auto; padding: 1.75rem 1.5rem 2.5rem; } .screen-title { font-weight: 600; font-size: clamp(2rem, 7vw, 2.75rem); line-height: 1.1; color: var(--forest-deep); margin-bottom: 0.6rem; } .screen-intro { font-style: italic; font-size: 1.0625rem; color: var(--ink-soft); max-width: 36rem; padding-bottom: 1.25rem; border-bottom: 1px solid var(--line); margin-bottom: 1.5rem; text-wrap: pretty; } .page-content { min-height: 40vh; } /* ── Home ── */ #page-home.active { display: flex; } .home { position: relative; min-height: 100%; flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; text-align: center; padding: 0.5rem 1rem 0.4rem; width: 100%; } /* The title floats over the top of the garden so the weather/sky canvas can extend all the way up to just below the top bar. pointer-events:none keeps the canvas (drag the tree, tap the pond) fully interactive underneath. */ .home-head { position: fixed; top: calc(var(--bar-h) - 0.4rem); left: 0; right: 0; z-index: 5; text-align: center; pointer-events: none; } .home-title { font-weight: 600; font-size: clamp(2.25rem, 9vw, 3.5rem); line-height: 1; letter-spacing: 0.01em; color: var(--garden-head); } .home-subtitle { font-style: italic; font-size: 1.0625rem; color: var(--garden-soft); margin-top: 0.5rem; } /* Personalized, time-aware greeting floating in the garden header */ .home-greeting { font-style: italic; font-size: 1.05rem; letter-spacing: 0.01em; color: var(--garden-soft); margin-top: 0.65rem; /* drop the greeting back down… */ margin-bottom: -0.4rem; /* …without pushing the title down with it */ animation: home-greeting-in 0.7s cubic-bezier(0.22, 1, 0.36, 1) both; } .home-greeting[hidden] { display: none; } @keyframes home-greeting-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } } @media (prefers-reduced-motion: reduce) { .home-greeting { animation: none; } } /* ── Digital garden ── */ .garden { flex: 1 1 auto; width: 100%; margin: 0 auto; display: flex; flex-direction: column; min-height: 0; } /* Full-bleed garden: fills the whole home area, from just below the top bar down to just above the bottom mode bar, so the sky + weather cover the entire scene edge to edge. The title and prompts panel float on top. */ .garden-stage { position: fixed; top: var(--bar-h); left: 0; right: 0; bottom: calc(var(--tab-h) + env(safe-area-inset-bottom, 0px)); z-index: 0; overflow: visible; } .garden-canvas { position: absolute; top: 0; left: 0; width: 100%; /* height is set in JS so the buffer can extend below the stage and give the pond's lower lip room to render instead of being clipped at the edge */ display: block; touch-action: pan-y; cursor: pointer; } .garden-stats { position: absolute; top: 0.85rem; left: 0.85rem; right: 0.85rem; display: flex; justify-content: space-between; gap: 0.75rem; pointer-events: none; } .garden-weather { position: absolute; bottom: 0.85rem; left: 0.85rem; display: flex; align-items: center; gap: 0.4rem; font-size: 0.78rem; font-style: italic; color: var(--garden-faint); pointer-events: none; opacity: 0; transition: opacity 0.8s ease; letter-spacing: 0.01em; } .garden-weather.is-shown { opacity: 0.85; } .garden-weather .garden-weather-glyph { font-style: normal; font-size: 0.95rem; line-height: 1; } .garden-stat { display: flex; align-items: flex-start; gap: 0.45rem; text-align: left; } .garden-stat[data-kind="water"] { flex-direction: row-reverse; text-align: right; } .garden-stat-dot { margin-top: 0.42rem; width: 0.5rem; height: 0.5rem; border-radius: 999px; flex: 0 0 auto; } .garden-stat[data-kind="co2"] .garden-stat-dot { background: var(--leaf); } .garden-stat[data-kind="water"] .garden-stat-dot { background: var(--water-deep); } .garden-stat-text { display: flex; flex-direction: column; line-height: 1.15; } .garden-stat-value { font-weight: 600; font-size: 1.5rem; color: var(--garden-text); font-variant-numeric: tabular-nums; letter-spacing: -0.01em; } .garden-stat-unit { font-size: 0.75rem; font-style: italic; color: var(--garden-faint); margin-top: 0.05rem; } .garden-control { position: fixed; right: 0.75rem; bottom: calc(var(--tab-h) + env(safe-area-inset-bottom, 0px) + 0.75rem); width: 14rem; z-index: 30; padding: 0.5rem 0.75rem 0.6rem; background: var(--paper-panel); border: 1px solid var(--line-strong); border-radius: 0.85rem; box-shadow: 0 6px 18px rgba(43,38,24,0.14), 0 1px 2px rgba(43,38,24,0.08); touch-action: none; user-select: none; -webkit-user-select: none; } .garden-control.is-dragging { box-shadow: 0 12px 28px rgba(43,38,24,0.22); cursor: grabbing; } .garden-control-handle { display: flex; align-items: center; gap: 0.4rem; margin-bottom: 0.4rem; cursor: grab; font-size: 0.6875rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-faint); } .garden-control.is-dragging .garden-control-handle { cursor: grabbing; } .garden-control-grip { display: inline-flex; color: var(--line-strong); } .garden-control-grip svg { fill: currentColor; } .garden-control-title { flex: 1 1 auto; text-align: left; } .garden-control-count { font-weight: 600; font-size: 0.8125rem; letter-spacing: 0; text-transform: none; color: var(--forest-deep); font-variant-numeric: tabular-nums; } .garden-slider { -webkit-appearance: none; appearance: none; width: 100%; height: 1.1rem; background: transparent; cursor: pointer; } .garden-slider:focus-visible { outline: none; } /* track */ .garden-slider::-webkit-slider-runnable-track { height: 3px; border-radius: 999px; background: var(--line-strong); } .garden-slider::-moz-range-track { height: 3px; border-radius: 999px; background: var(--line-strong); } /* thumb */ .garden-slider::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; margin-top: -6px; width: 14px; height: 14px; border-radius: 999px; background: var(--forest); border: 2px solid var(--paper-panel); box-shadow: 0 1px 3px rgba(43,38,24,0.25); transition: transform 0.15s ease, background-color 0.15s ease; } .garden-slider::-moz-range-thumb { width: 14px; height: 14px; border-radius: 999px; background: var(--forest); border: 2px solid var(--paper-panel); box-shadow: 0 1px 3px rgba(43,38,24,0.25); } .garden-slider:active::-webkit-slider-thumb { transform: scale(1.12); background: var(--forest-deep); } .garden-slider:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 4px rgba(52,80,58,0.22); } .garden-slider:focus-visible::-moz-range-thumb { box-shadow: 0 0 0 4px rgba(52,80,58,0.22); } @media (prefers-reduced-motion: reduce) { .garden-slider::-webkit-slider-thumb { transition: none; } } .home-about { margin-left: auto; font-family: inherit; font-size: 0.9375rem; color: var(--forest-deep); background: var(--paper-panel); border: 1px solid var(--line-strong); border-radius: 999px; padding: 0.45rem 1.1rem; cursor: pointer; transition: background-color 0.18s ease, border-color 0.18s ease; } /* Dark-mode toggle — same pill language as the topbar, icon-only to stay light */ .theme-toggle { flex: 0 0 auto; margin-left: 0.6rem; width: 2.4rem; height: 2.4rem; display: inline-flex; align-items: center; justify-content: center; color: var(--forest-deep); background: var(--paper-panel); border: 1px solid var(--line-strong); border-radius: 999px; cursor: pointer; transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease; } .theme-toggle:hover { border-color: var(--forest); } .theme-toggle:active { background: var(--paper-edge); } .theme-toggle:focus-visible { outline: 2px solid var(--forest-deep); outline-offset: 2px; } /* Greeting next to the sign-out pill — shown only while signed in */ .topbar-greeting { flex: 0 0 auto; margin-left: 0.6rem; font-size: 0.92rem; color: var(--ink-soft); white-space: nowrap; max-width: 11rem; overflow: hidden; text-overflow: ellipsis; } .topbar-greeting[hidden] { display: none; } /* Sign-out pill — shown only while signed in */ .topbar-account { flex: 0 0 auto; margin-left: 0.6rem; font-family: inherit; font-size: 0.9rem; color: var(--forest-deep); background: var(--paper-panel); border: 1px solid var(--line-strong); border-radius: 999px; padding: 0.4rem 0.95rem; cursor: pointer; transition: background-color 0.18s ease, border-color 0.18s ease; } .topbar-account:hover { border-color: var(--forest); } .topbar-account:active { background: var(--paper-edge); } .topbar-account:focus-visible { outline: 2px solid var(--forest-deep); outline-offset: 2px; } .topbar-account[hidden] { display: none; } /* ── Profile button (topbar) + Profile page ─────────────────── */ .topbar-profile { flex: 0 0 auto; margin-left: 0.6rem; width: 2.4rem; height: 2.4rem; display: inline-flex; align-items: center; justify-content: center; color: var(--forest-deep); background: var(--paper-panel); border: 1px solid var(--line-strong); border-radius: 999px; cursor: pointer; transition: background-color 0.18s ease, border-color 0.18s ease; } .topbar-profile:hover { border-color: var(--forest); } .topbar-profile:active { background: var(--paper-edge); } .topbar-profile:focus-visible { outline: 2px solid var(--forest-deep); outline-offset: 2px; } .topbar-profile svg { width: 1.25rem; height: 1.25rem; display: block; } .topbar-profile[hidden] { display: none; } .profile-screen { position: fixed; inset: 0; z-index: 1500; background: var(--paper); overflow-y: auto; -webkit-overflow-scrolling: touch; } .profile-screen[hidden] { display: none; } body.profile-open { overflow: hidden; } .profile-bar { position: sticky; top: 0; z-index: 1; display: flex; align-items: center; gap: 0.75rem; height: var(--bar-h); padding: 0 1rem; background: var(--paper-panel); border-bottom: 1px solid var(--line); } .profile-back { display: inline-flex; align-items: center; gap: 0.25rem; font-family: inherit; font-size: 0.95rem; font-weight: 500; color: var(--ink-soft); background: none; border: none; cursor: pointer; padding: 0.35rem 0.5rem 0.35rem 0; border-radius: 6px; } .profile-back:hover { color: var(--ink); } .profile-back:focus-visible { outline: 2px solid var(--forest-deep); outline-offset: 2px; } .profile-back svg { width: 1.15rem; height: 1.15rem; } .profile-bar-title { font-weight: 600; font-size: 1.05rem; color: var(--forest-deep); } .profile-body { max-width: 34rem; margin: 0 auto; padding: 1.5rem 1.25rem 4rem; } .profile-section { background: var(--paper-panel); border: 1px solid var(--line); border-radius: 0.9rem; padding: 1.1rem 1.15rem; margin-bottom: 1.1rem; } .profile-section h2 { font-size: 0.78rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-faint); margin-bottom: 0.9rem; font-weight: 600; } .profile-field { margin-bottom: 1rem; } .profile-field:last-child { margin-bottom: 0; } .profile-field > label { display: block; font-size: 0.9rem; font-weight: 500; color: var(--ink-soft); margin-bottom: 0.35rem; } .profile-input { width: 100%; font-family: inherit; font-size: 1rem; color: var(--ink); background: var(--paper); border: 1px solid var(--line-strong); border-radius: 10px; padding: 0.7rem 0.85rem; min-height: 3rem; transition: border-color 0.16s ease, box-shadow 0.16s ease; } .profile-input:focus { outline: none; border-color: var(--forest); box-shadow: 0 0 0 3px rgba(52,80,58,0.16); } .profile-input::placeholder { color: var(--ink-faint); } .profile-readonly { color: var(--ink); padding: 0.15rem 0; } .profile-readonly-sub { font-size: 0.85rem; color: var(--ink-faint); } .profile-row { display: flex; gap: 0.6rem; align-items: stretch; } .profile-row .profile-input { flex: 1; } .profile-btn-save, .profile-action { font-family: inherit; font-size: 1rem; font-weight: 600; color: var(--paper-panel); background: var(--forest); border: 1px solid var(--forest); border-radius: 10px; padding: 0 1.1rem; min-height: 3rem; cursor: pointer; transition: background-color 0.18s ease; } .profile-btn-save:hover, .profile-action:hover { background: var(--forest-deep); } .profile-btn-save:focus-visible, .profile-action:focus-visible { outline: 2px solid var(--forest-deep); outline-offset: 2px; } .profile-action { width: 100%; margin-top: 0.25rem; } .profile-status { display: block; margin-top: 0.4rem; font-size: 0.85rem; min-height: 1rem; color: var(--ink-faint); } .profile-status.is-ok { color: var(--correct); } .profile-status.is-error { color: var(--incorrect); } .profile-toggle-row, .profile-row-between { display: flex; align-items: center; justify-content: space-between; gap: 1rem; } .profile-toggle-row > span, .profile-row-between > span:first-child { color: var(--ink); } /* dark-mode switch */ .profile-switch { position: relative; flex: 0 0 auto; width: 3.1rem; height: 1.7rem; background: var(--line-strong); border: none; border-radius: 999px; cursor: pointer; transition: background-color 0.2s ease; } .profile-switch::after { content: ""; position: absolute; top: 0.2rem; left: 0.2rem; width: 1.3rem; height: 1.3rem; border-radius: 50%; background: var(--paper-panel); transition: transform 0.2s ease; } .profile-switch.is-on { background: var(--forest); } .profile-switch.is-on::after { transform: translateX(1.4rem); } .profile-switch:focus-visible { outline: 2px solid var(--forest-deep); outline-offset: 2px; } .profile-badge { font-size: 0.8rem; font-weight: 600; color: var(--forest-deep); background: var(--paper-edge); border: 1px solid var(--line-strong); border-radius: 999px; padding: 0.15rem 0.7rem; } .profile-badge.is-blocked { color: var(--incorrect); border-color: color-mix(in srgb, var(--incorrect) 45%, transparent); background: color-mix(in srgb, var(--incorrect) 12%, transparent); } .profile-badge.is-allowed { color: var(--correct); border-color: color-mix(in srgb, var(--correct) 45%, transparent); background: color-mix(in srgb, var(--correct) 12%, transparent); } .profile-hint { font-size: 0.85rem; color: var(--ink-faint); margin-top: 0.5rem; } .profile-signout { width: 100%; font-family: inherit; font-size: 1rem; font-weight: 600; color: var(--incorrect); background: var(--paper-panel); border: 1px solid var(--line-strong); border-radius: 10px; padding: 0.8rem; min-height: 3rem; cursor: pointer; margin-top: 0.25rem; transition: background-color 0.18s ease, border-color 0.18s ease; } .profile-signout:hover { border-color: var(--incorrect); background: var(--paper-edge); } .profile-signout:focus-visible { outline: 2px solid var(--forest-deep); outline-offset: 2px; } /* Danger zone — delete account */ .profile-danger { border-color: color-mix(in srgb, var(--incorrect) 22%, var(--line-strong)); } .profile-danger .profile-hint { margin-top: 0.35rem; } /* clean full-width outlined danger button (mirrors Sign out, in red) */ .profile-delete-btn { width: 100%; margin-top: 0.95rem; font-family: inherit; font-size: 1rem; font-weight: 600; color: var(--incorrect); background: none; border: 1px solid color-mix(in srgb, var(--incorrect) 40%, transparent); border-radius: 10px; padding: 0.8rem; min-height: 3rem; cursor: pointer; transition: background-color 0.18s ease, border-color 0.18s ease; } .profile-delete-btn:hover { background: color-mix(in srgb, var(--incorrect) 10%, transparent); border-color: var(--incorrect); } .profile-delete-btn:focus-visible { outline: 2px solid var(--incorrect); outline-offset: 2px; } /* higher specificity so the danger color beats .profile-edit-save */ .profile-edit-actions .profile-delete-confirm { color: #fff; background: var(--incorrect); border: 1px solid var(--incorrect); } .profile-edit-actions .profile-delete-confirm:hover { background: var(--incorrect); filter: brightness(0.92); } .profile-edit-actions .profile-delete-confirm:disabled { opacity: 0.6; cursor: default; } /* view-first rows: show info, with a subtle Edit/Change action */ .profile-info-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; } .profile-info-row + .profile-info-row { border-top: 1px solid var(--line); padding-top: 0.85rem; margin-top: 0.85rem; } .profile-info-label { font-size: 0.78rem; color: var(--ink-faint); margin-bottom: 0.15rem; } .profile-info-value { font-size: 1.05rem; color: var(--ink); word-break: break-word; } .profile-edit-link { flex: 0 0 auto; font-family: inherit; font-size: 0.9rem; font-weight: 500; color: var(--forest); background: none; border: none; cursor: pointer; padding: 0.3rem 0.4rem; border-radius: 6px; } .profile-edit-link:hover { text-decoration: underline; } .profile-edit-link:focus-visible { outline: 2px solid var(--forest-deep); outline-offset: 2px; } .profile-edit { margin-top: 0.9rem; } .profile-edit[hidden] { display: none; } .profile-edit > label { display: block; font-size: 0.9rem; font-weight: 500; color: var(--ink-soft); margin-bottom: 0.35rem; } .profile-edit-actions { display: flex; gap: 0.6rem; margin-top: 0.7rem; } .profile-edit-actions button { flex: 1; min-height: 2.8rem; border-radius: 10px; font-family: inherit; font-size: 0.95rem; font-weight: 600; cursor: pointer; transition: background-color 0.18s ease, border-color 0.18s ease; } .profile-edit-cancel { color: var(--ink-soft); background: var(--paper); border: 1px solid var(--line-strong); } .profile-edit-cancel:hover { border-color: var(--forest); color: var(--ink); } .profile-edit-save { color: var(--paper-panel); background: var(--forest); border: 1px solid var(--forest); } .profile-edit-save:hover { background: var(--forest-deep); } .profile-edit-actions button:focus-visible { outline: 2px solid var(--forest-deep); outline-offset: 2px; } /* segmented Auto / Light / Dark control */ .profile-segment { display: flex; gap: 0.25rem; background: var(--paper); border: 1px solid var(--line-strong); border-radius: 999px; padding: 0.25rem; } .profile-seg { flex: 1; font-family: inherit; font-size: 0.92rem; font-weight: 500; color: var(--ink-soft); background: none; border: none; border-radius: 999px; padding: 0.5rem 0.4rem; min-height: 2.4rem; cursor: pointer; transition: background-color 0.18s ease, color 0.18s ease; } .profile-seg:hover { color: var(--ink); } .profile-seg.is-active { background: var(--forest); color: var(--paper-panel); } .profile-seg:focus-visible { outline: 2px solid var(--forest-deep); outline-offset: 2px; } .theme-toggle svg { width: 1.2rem; height: 1.2rem; display: block; } /* show the moon in light mode, the sun in dark mode (icon = current state) */ .theme-toggle .icon-sun { display: none; } body.is-night .theme-toggle .icon-moon { display: none; } body.is-night .theme-toggle .icon-sun { display: block; } .home-about:hover { border-color: var(--forest); background: var(--paper); } .home-about:focus-visible { outline: 2px solid var(--forest-deep); outline-offset: 2px; } /* ── Thinking toggle · compact icon button in the chat composer (Learn/Explain/Discuss) ── */ .composer-think { flex: 0 0 auto; align-self: center; width: 2.7rem; height: 2.7rem; display: flex; align-items: center; justify-content: center; background: var(--paper-panel); border: 1px solid var(--line-strong); border-radius: 10px; color: var(--ink); cursor: pointer; transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease; } .composer-think svg { width: 20px; height: 20px; } .composer-think:hover { border-color: var(--forest); } .composer-think:focus-visible { outline: 2px solid var(--forest-deep); outline-offset: 2px; } /* on = the model reasons before replying */ .composer-think.is-on { background: var(--leaf); border-color: var(--leaf); color: var(--paper-panel); } /* In dark/night mode, match the send button's lighter green when thinking is on. */ body.is-night .composer-think.is-on { background: var(--forest); border-color: var(--forest); } /* the model's streamed "thinking", shown above its answer in chat */ .msg-think { margin-bottom: 0.5rem; padding: 0.4rem 0.65rem; border-left: 2px solid var(--line-strong); background: rgba(140,128,104,0.06); border-radius: 0 0.4rem 0.4rem 0; } .msg-think-label { display: flex; align-items: center; gap: 0.35rem; width: 100%; margin: 0; padding: 0; border: none; background: none; font-family: inherit; font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--ink-faint); cursor: pointer; } .msg-think-label:focus-visible { outline: 2px solid var(--forest-deep); outline-offset: 2px; } .msg-think-caret { display: inline-block; width: 0.5rem; border-left: 4px solid currentColor; border-top: 3px solid transparent; border-bottom: 3px solid transparent; transform: rotate(90deg); /* points down while expanded */ transition: transform 0.15s ease; } .msg-think.is-collapsed .msg-think-caret { transform: rotate(0deg); } /* points right */ .msg-think-text { font-size: 0.85rem; font-style: italic; color: var(--ink-faint); white-space: pre-wrap; line-height: 1.4; margin-top: 0.2rem; max-height: 11rem; overflow-y: auto; opacity: 1; /* animate open/closed so condensing doesn't snap the bubble height */ transition: max-height 0.3s ease, opacity 0.22s ease, margin-top 0.3s ease; } .msg-think.is-collapsed .msg-think-text { max-height: 0; margin-top: 0; opacity: 0; overflow: hidden; pointer-events: none; } @media (prefers-reduced-motion: reduce) { .msg-think-text { transition: none; } } /* ── Our Mission · standalone page ── */ .about-overlay { position: fixed; inset: 0; z-index: 40; background: var(--paper); overflow-y: auto; -webkit-overflow-scrolling: touch; } .about-overlay[hidden] { display: none; } .about-bar { position: sticky; top: 0; display: flex; align-items: center; gap: 0.75rem; height: var(--bar-h); padding: 0 1rem; background: var(--paper-panel); border-bottom: 1px solid var(--line); } .about-back { display: flex; align-items: center; justify-content: center; width: 2.4rem; height: 2.4rem; background: none; border: none; border-radius: 8px; color: var(--ink); cursor: pointer; transition: background-color 0.18s ease; } .about-back:hover { background: var(--paper); } .about-back svg { width: 22px; height: 22px; } .about-bar-title { font-size: 1.15rem; font-weight: 600; color: var(--forest-deep); } .about-content { max-width: 44rem; margin: 0 auto; padding: 2rem 1.5rem 3rem; } .about-title { font-weight: 600; font-size: clamp(2.25rem, 8vw, 3rem); line-height: 1.1; color: var(--forest-deep); margin-bottom: 0.75rem; } .about-lead { font-style: italic; font-size: 1.2rem; line-height: 1.5; color: var(--ink-soft); margin-bottom: 1.75rem; text-wrap: pretty; } .about-h { font-weight: 600; font-size: 1.35rem; color: var(--forest-deep); margin: 2rem 0 0.6rem; } .about-content p { font-size: 1.0625rem; line-height: 1.65; color: var(--ink); margin-bottom: 1rem; text-wrap: pretty; } .about-stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.85rem; margin: 1.5rem 0 1rem; } .about-stat { display: flex; flex-direction: column; gap: 0.3rem; padding: 1.1rem 1.2rem; background: var(--paper-panel); border: 1px solid var(--line); border-radius: 12px; } .about-stat-num { font-weight: 600; font-size: 2rem; line-height: 1; color: var(--forest); } .about-stat-label { font-size: 0.9rem; line-height: 1.35; color: var(--ink-soft); } .about-note { font-size: 0.85rem !important; color: var(--ink-faint) !important; margin-top: 0.25rem; } /* ── Learn · chat ────────────────────────────────────────── */ .chat-page.active { display: flex; flex-direction: column; min-height: 100%; } .chat { width: 100%; /* Grow with the viewport when there's room (smaller side gaps on wide screens), but never below the old 44rem and capped at 58rem to keep lines readable. */ max-width: clamp(44rem, 70vw, 58rem); margin: 0 auto; flex: 1; display: flex; flex-direction: column; min-height: 0; padding: 1.75rem 1.25rem 0; } .chat-header .screen-intro { margin-bottom: 1.25rem; } /* highlight while dragging a photo onto the Learn chat (Gemma vision) */ .chat.chat-dragover { border-radius: 14px; box-shadow: inset 0 0 0 2px var(--forest); background: rgba(52, 80, 58, 0.05); } .chat-log { flex: 1; display: flex; flex-direction: column; gap: 1.1rem; padding-bottom: 1.25rem; } .msg { display: flex; flex-direction: column; gap: 0.3rem; max-width: 86%; } .msg.assistant { align-self: flex-start; } .msg.user { align-self: flex-end; align-items: flex-end; } .msg-role { font-size: 0.66rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-faint); padding: 0 0.3rem; } .msg-body { font-size: 1.0625rem; line-height: 1.6; padding: 0.7rem 0.95rem; border: 1px solid var(--line); border-radius: 12px; white-space: pre-wrap; word-break: break-word; } .msg.assistant .msg-body { background: var(--paper-panel); color: var(--ink); border-top-left-radius: 4px; } .msg.user .msg-body { background: rgba(52, 80, 58, 0.10); border-color: var(--line-strong); color: var(--ink); border-top-right-radius: 4px; } /* Rendered Markdown/math from the model (assistant bubbles + quiz prompts) */ .msg.assistant .msg-body { white-space: normal; } .msg-body p, .q-prompt p { margin: 0 0 0.55rem; } .msg-body p:first-child, .q-prompt p:first-child { margin-top: 0; } .msg-body p:last-child, .q-prompt p:last-child { margin-bottom: 0; } .msg-body h1, .msg-body h2, .msg-body h3, .msg-body h4, .msg-body h5, .msg-body h6 { font-weight: 600; line-height: 1.25; margin: 0.8rem 0 0.35rem; color: var(--forest-deep); } .msg-body h1 { font-size: 1.2rem; } .msg-body h2 { font-size: 1.12rem; } .msg-body h3 { font-size: 1.04rem; } .msg-body h4, .msg-body h5, .msg-body h6 { font-size: 0.98rem; } .msg-body ul, .msg-body ol { margin: 0.35rem 0 0.6rem; padding-left: 1.4rem; } .msg-body li { margin: 0.15rem 0; } .msg-body hr { border: none; border-top: 1px solid var(--line); margin: 0.75rem 0; } .msg-body strong, .q-prompt strong { font-weight: 600; } .msg-body code, .q-prompt code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.92em; background: rgba(140, 128, 104, 0.14); padding: 0.05rem 0.3rem; border-radius: 4px; } /* Composer pinned above the tab bar */ .composer { position: sticky; bottom: 0; display: flex; gap: 0.6rem; align-items: flex-end; padding: 0.75rem 0 1rem; background: var(--paper); border-top: 1px solid var(--line); } .composer-input { flex: 1; resize: none; font-family: inherit; font-size: 1rem; /* 16px — avoids mobile zoom, stays readable */ line-height: 1.5; color: var(--ink); background: var(--paper-panel); border: 1px solid var(--line-strong); border-radius: 10px; padding: 0.65rem 0.85rem; max-height: 8rem; overflow-y: auto; } .composer-input::placeholder { color: var(--ink-faint); } .composer-input:focus { outline: none; border-color: var(--forest); } .composer-mic { flex: 0 0 auto; align-self: center; width: 2.7rem; height: 2.7rem; display: flex; align-items: center; justify-content: center; background: var(--paper-panel); border: 1px solid var(--line-strong); border-radius: 10px; color: var(--ink); cursor: pointer; transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease; } .composer-mic:hover { border-color: var(--forest); } .composer-mic svg { width: 20px; height: 20px; } .composer-mic:focus-visible { outline: 2px solid var(--forest-deep); outline-offset: 2px; } .composer-mic.recording { background: var(--forest); border-color: var(--forest); color: var(--paper-panel); } /* Photo attach button — only shown when a vision model (Gemma) is selected */ .composer-img { flex: 0 0 auto; align-self: center; width: 2.7rem; height: 2.7rem; display: none; align-items: center; justify-content: center; background: var(--paper-panel); border: 1px solid var(--line-strong); border-radius: 10px; color: var(--ink); cursor: pointer; transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease; } body.model-gemma .composer-img { display: flex; } .composer-img:hover { border-color: var(--forest); } .composer-img svg { width: 20px; height: 20px; } .composer-img:focus-visible { outline: 2px solid var(--forest-deep); outline-offset: 2px; } /* let the attachment preview sit on its own row above the input */ .composer { flex-wrap: wrap; } .composer-attach { flex: 1 0 100%; display: flex; align-items: center; gap: 0.5rem; } .composer-attach[hidden] { display: none; } /* a non-vision model can't use a photo, so hide any leftover preview for it */ body:not(.model-gemma) .composer-attach { display: none; } .composer-attach-img { height: 3rem; max-width: 6rem; object-fit: cover; border-radius: 8px; border: 1px solid var(--line-strong); } .composer-attach-remove { width: 1.4rem; height: 1.4rem; display: inline-flex; align-items: center; justify-content: center; font-size: 1rem; line-height: 1; color: var(--ink-soft); background: var(--paper-panel); border: 1px solid var(--line-strong); border-radius: 50%; cursor: pointer; } .composer-attach-remove:hover { color: var(--ink); border-color: var(--forest); } /* a photo shown inside a chat bubble */ .msg-photo { display: block; max-width: 16rem; max-height: 16rem; margin-top: 0.5rem; border-radius: 10px; border: 1px solid var(--line); } .composer-send { flex: 0 0 auto; align-self: center; /* match the mic/photo buttons (composer is align-items: flex-end) */ width: 2.7rem; height: 2.7rem; display: flex; align-items: center; justify-content: center; background: var(--forest); border: none; border-radius: 10px; color: var(--paper-panel); cursor: pointer; transition: background-color 0.18s ease; } .composer-send:hover { background: var(--forest-deep); } .composer-send:active { background: var(--forest-deep); } .composer-send svg { width: 20px; height: 20px; } /* stop button while a reply is generating */ .composer-send.is-stop { background: var(--incorrect); } .composer-send.is-stop:hover { background: var(--incorrect); filter: brightness(0.92); } .composer-send:focus-visible { outline: 2px solid var(--forest-deep); outline-offset: 2px; } /* ── Bottom tab bar ──────────────────────────────────────── */ .tabbar { position: fixed; left: 0; right: 0; bottom: 0; height: calc(var(--tab-h) + env(safe-area-inset-bottom, 0px)); padding-bottom: env(safe-area-inset-bottom, 0px); display: flex; background: var(--paper-panel); border-top: 1px solid var(--line); z-index: 20; } .tab { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.2rem; min-height: 44px; background: none; border: none; border-top: 2px solid transparent; font-family: inherit; font-size: 0.72rem; letter-spacing: 0.02em; color: var(--ink-faint); cursor: pointer; transition: color 0.18s ease, background-color 0.18s ease; } .tab svg { width: 24px; height: 24px; display: block; } .tab:hover { color: var(--ink); } .tab:active { background: var(--paper-edge); } .tab.active { color: var(--forest-deep); /* the green line is now drawn by the sliding .tab-indicator below */ } /* Sliding active-tab indicator. The bar is positioned by its left + right edges (tabs are equal flex:1 fifths) and simply slides between tabs — both edges move together with one ease, so it accelerates out and decelerates in with no stretch. */ .tab-indicator { position: absolute; top: 0; height: 2px; left: calc(var(--tab-i, 0) * (100% / 5)); right: calc((4 - var(--tab-i, 0)) * (100% / 5)); background: var(--forest); border-radius: 1px; pointer-events: none; transition: left 0.26s cubic-bezier(0.4, 0, 0.2, 1), right 0.26s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.18s ease; } /* No tab is selected on the home screen — hide the bar there. */ body.home-active .tab-indicator { opacity: 0; } @media (prefers-reduced-motion: reduce) { .tab-indicator { transition: left 0.2s ease, right 0.2s ease, opacity 0.18s ease; } } /* ── Focus (keyboard) ── */ .tab:focus-visible, .wordmark:focus-visible { outline: 2px solid var(--forest); outline-offset: -2px; } /* ── Review · quiz builder ──────────────────────────────── */ .review-view { display: block; } .review-view[hidden] { display: none; } .quiz-builder { display: flex; flex-direction: column; gap: 1.6rem; } .qb-field { display: flex; flex-direction: column; gap: 0.6rem; } .qb-label { font-size: 0.7rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-faint); } .qb-opt { text-transform: none; letter-spacing: 0; font-style: italic; } .qb-input { resize: none; font-family: inherit; font-size: 1rem; line-height: 1.5; color: var(--ink); background: var(--paper-panel); border: 1px solid var(--line-strong); border-radius: 10px; padding: 0.7rem 0.85rem; } .qb-input::placeholder { color: var(--ink-faint); } .qb-input:focus { outline: none; border-color: var(--forest); } /* file drop / browse */ .qb-drop { display: flex; align-items: center; justify-content: center; gap: 0.55rem; font-family: inherit; font-size: 0.95rem; color: var(--ink-soft); background: var(--paper-panel); border: 1px dashed var(--line-strong); border-radius: 10px; padding: 1.1rem; cursor: pointer; transition: border-color 0.15s ease, background-color 0.15s ease; } .qb-drop:hover { border-color: var(--forest); color: var(--forest-deep); } .qb-drop.qb-dragover { border-color: var(--forest); background: rgba(52, 80, 58, 0.08); } .qb-drop svg { width: 20px; height: 20px; } .qb-files { list-style: none; display: flex; flex-direction: column; gap: 0.35rem; } .qb-files li { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; font-size: 0.9rem; color: var(--ink); background: var(--paper-panel); border: 1px solid var(--line); border-radius: 8px; padding: 0.4rem 0.65rem; } .qb-files button { flex: 0 0 auto; background: none; border: none; font-family: inherit; font-size: 1.2rem; line-height: 1; color: var(--ink-faint); cursor: pointer; } .qb-files button:hover { color: var(--forest-deep); } /* segmented length control */ .qb-seg { display: inline-flex; align-self: flex-start; border: 1px solid var(--line-strong); border-radius: 10px; overflow: hidden; } .qb-seg button { font-family: inherit; font-size: 1rem; min-width: 3.2rem; padding: 0.55rem 0; background: var(--paper-panel); border: none; border-left: 1px solid var(--line); color: var(--ink-soft); cursor: pointer; transition: background-color 0.15s ease, color 0.15s ease; } .qb-seg button:first-child { border-left: none; } .qb-seg button:hover { background: var(--paper-edge); } .qb-seg button.active { background: var(--forest); color: var(--paper-panel); } /* multi-select type chips */ .qb-chips { display: flex; flex-wrap: wrap; gap: 0.5rem; } .qb-chips button { font-family: inherit; font-size: 0.95rem; padding: 0.5rem 0.85rem; background: var(--paper-panel); border: 1px solid var(--line-strong); border-radius: 999px; color: var(--ink-soft); cursor: pointer; transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease; } .qb-chips button:hover { border-color: var(--forest); } .qb-chips button.active { background: rgba(52, 80, 58, 0.12); border-color: var(--forest); color: var(--forest-deep); font-weight: 600; } .qb-generate { align-self: flex-start; font-family: inherit; font-size: 1rem; font-weight: 600; letter-spacing: 0.01em; color: var(--paper-panel); background: var(--forest); border: none; border-radius: 10px; padding: 0.75rem 1.4rem; cursor: pointer; transition: background-color 0.18s ease; } .qb-generate:hover { background: var(--forest-deep); } .qb-generate:disabled { opacity: 0.55; cursor: default; } .qb-generate:focus-visible { outline: 2px solid var(--forest-deep); outline-offset: 2px; } .qb-generate-row { display: flex; align-items: center; gap: 0.7rem; align-self: flex-start; } .dot-loader { display: inline-flex; align-items: center; gap: 0.3rem; } .dot-loader[hidden] { display: none; } .dot-loader span { width: 0.42rem; height: 0.42rem; border-radius: 50%; background: var(--forest); opacity: 0.3; animation: dot-bounce 1s infinite ease-in-out; } .dot-loader span:nth-child(2) { animation-delay: 0.16s; } .dot-loader span:nth-child(3) { animation-delay: 0.32s; } @keyframes dot-bounce { 0%, 80%, 100% { opacity: 0.3; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-0.2rem); } } @media (prefers-reduced-motion: reduce) { .dot-loader span { animation: none; opacity: 0.6; } } /* ── Review · taking the quiz ── */ .quiz-top { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: 1.5rem; } .quiz-title { font-size: 1.5rem; font-weight: 600; color: var(--forest-deep); line-height: 1.2; } .quiz-back { flex: 0 0 auto; font-family: inherit; font-size: 0.9rem; color: var(--ink-faint); background: none; border: none; cursor: pointer; text-decoration: underline; } .quiz-back:hover { color: var(--forest-deep); } .q-card { border: 1px solid var(--line); border-radius: 12px; background: var(--paper-panel); padding: 1.1rem 1.2rem; margin-bottom: 1.1rem; } .q-head { display: flex; align-items: baseline; justify-content: space-between; gap: 0.8rem; margin-bottom: 0.55rem; } .q-num { font-size: 0.66rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-faint); } .q-type { font-size: 0.66rem; letter-spacing: 0.04em; font-style: italic; color: var(--ink-faint); } .q-prompt { font-size: 1.0625rem; line-height: 1.5; color: var(--ink); margin-bottom: 0.9rem; } .q-options { display: flex; flex-direction: column; gap: 0.5rem; } .q-option { display: flex; align-items: flex-start; gap: 0.6rem; padding: 0.55rem 0.7rem; border: 1px solid var(--line); border-radius: 9px; background: var(--paper); cursor: pointer; transition: border-color 0.12s ease, background-color 0.12s ease; } .q-option:hover { border-color: var(--line-strong); } .q-option input { margin-top: 0.28rem; accent-color: var(--forest); flex: 0 0 auto; } .q-option span { font-size: 1rem; line-height: 1.5; } .q-text { width: 100%; resize: vertical; font-family: inherit; font-size: 1rem; line-height: 1.5; color: var(--ink); background: var(--paper); border: 1px solid var(--line-strong); border-radius: 9px; padding: 0.6rem 0.75rem; } .q-text:focus { outline: none; border-color: var(--forest); } input.q-text { resize: none; } /* ── Review · results ── */ .quiz-score { font-size: 1.5rem; font-weight: 600; color: var(--forest-deep); margin-bottom: 0.4rem; } .quiz-score small { display: block; font-size: 0.95rem; font-weight: 400; font-style: italic; color: var(--ink-soft); margin-top: 0.3rem; } #quiz-review { margin: 1.5rem 0; } .q-card.correct { border-color: var(--correct); box-shadow: inset 0 0 0 1px var(--correct); /* reads as a clear ~2px outline */ background: rgba(63, 122, 78, 0.06); } .q-card.incorrect { border-color: var(--incorrect); box-shadow: inset 0 0 0 1px var(--incorrect); background: rgba(180, 81, 63, 0.06); } .q-result { font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase; } .q-result.ok { color: var(--forest-deep); } .q-result.no { color: #9a5a3a; } .q-result.review { color: var(--ink-faint); } .q-answer { margin-top: 0.7rem; font-size: 0.95rem; line-height: 1.5; color: var(--ink-soft); } .q-answer strong { color: var(--ink); font-weight: 600; } .q-yours { margin-top: 0.35rem; } /* ── Motion preference ── */ @media (prefers-reduced-motion: reduce) { * { transition: none !important; } } /* ── Notebook · interactive canvas ───────────────────────── */ .notebook-page.active { display: flex; flex-direction: column; min-height: 100%; } .notebook { width: 100%; max-width: 60rem; margin: 0 auto; flex: 1; display: flex; flex-direction: column; min-height: 0; padding: 1.75rem 1.25rem 1.25rem; /* Positioned so the floating tutor panel + Next button (absolute) anchor to the notebook even outside OS fullscreen. In OS fullscreen the UA's :fullscreen rule (position: fixed !important) wins, so it still fills the viewport. */ position: relative; } .nb-head { flex: 0 0 auto; } .nb-head .screen-intro { margin-bottom: 1rem; } .nb-stage-wrap { position: relative; flex: 1; min-height: 22rem; border: 1px solid var(--line-strong); border-radius: 12px; overflow: hidden; background: var(--paper-panel); } .nb-stage { position: absolute; inset: 0; /* ruled grid is drawn on the canvas (see drawGrid) so it scales smoothly with zoom and the 1px lines stay crisp instead of flickering. */ } /* infinite-canvas layer: items live here and pan as a group */ .nb-world { position: absolute; top: 0; left: 0; transform: translate(0px, 0px); will-change: transform; } .nb-grid-canvas { position: absolute; inset: 0; z-index: 0; /* grid sits behind items (and behind the ink) */ pointer-events: none; } .nb-draw { position: absolute; inset: 0; z-index: 4; /* drawing sits on top of items */ pointer-events: none; /* enabled only in pen / eraser mode */ touch-action: none; } /* tool-driven cursors */ .nb-stage-wrap[data-tool="text"] .nb-stage { cursor: text; } .nb-stage-wrap[data-tool="pan"] .nb-stage { cursor: grab; } .nb-stage-wrap.nb-panning .nb-stage { cursor: grabbing; } .nb-stage-wrap[data-tool="pen"] .nb-draw, .nb-stage-wrap[data-tool="eraser"] .nb-draw { pointer-events: auto; } .nb-stage-wrap[data-tool="pen"] .nb-stage, .nb-stage-wrap[data-tool="eraser"] .nb-stage, .nb-stage-wrap[data-tool="pen"] .nb-draw, .nb-stage-wrap[data-tool="eraser"] .nb-draw { cursor: none; } /* circle brush cursor (grows with size) */ .nb-cursor { position: absolute; display: none; transform: translate(-50%, -50%); border-radius: 50%; pointer-events: none; z-index: 9; border: 1.5px solid var(--ink); background: rgba(43, 38, 24, 0.10); } .nb-cursor.nb-cursor-erase { border-style: dashed; border-color: var(--forest); background: rgba(52, 80, 58, 0.08); } /* items are only interactive with the select tool */ .nb-stage-wrap:not([data-tool="select"]) .nb-world { pointer-events: none; } .nb-hint { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); max-width: 24rem; text-align: center; font-style: italic; color: var(--ink-faint); pointer-events: none; padding: 0 1rem; z-index: 1; } /* ── Items (text + image) ── */ .nb-item { position: absolute; z-index: 2; border: 1px solid transparent; border-radius: 6px; } .nb-stage-wrap[data-tool="select"] .nb-item:hover { border-color: var(--line-strong); } .nb-text { box-sizing: border-box; min-width: 2ch; padding: 0.25rem 0.4rem; font-family: 'Spectral', Georgia, serif; font-size: 1.0625rem; line-height: 1.5; color: var(--ink); outline: none; white-space: pre; /* grow rightward; only Enter makes a new line */ cursor: default; } /* once a width is set with the side handle, text reflows to fit the box */ .nb-text.wrap { white-space: pre-wrap; overflow-wrap: break-word; word-break: break-word; } .nb-item.editing .nb-text { cursor: text; } /* Text the AI sketches onto the canvas: a handwriting font + a slight tilt so it reads like the model is jotting alongside you, not pasting a label. */ .nb-item[data-author="ai"] .nb-text { font-family: 'Caveat', 'Bradley Hand', 'Segoe Print', cursive; line-height: 1.25; transform: rotate(-1.2deg); transform-origin: left top; } .nb-text:empty::before { content: 'Type…'; color: var(--ink-faint); } .nb-img { display: block; max-width: none; user-select: none; -webkit-user-drag: none; border-radius: 4px; } .nb-stage-wrap[data-tool="select"] .nb-item[data-type="image"] { cursor: move; } /* ── Selection box + resize handles ── */ .nb-selbox { position: absolute; z-index: 6; border: 1px solid var(--forest); background: rgba(52, 80, 58, 0.06); pointer-events: none; /* box body transparent; handles re-enable */ } .nb-selbox .nb-grab { position: absolute; width: 12px; height: 12px; background: var(--paper-panel); border: 1.5px solid var(--forest); border-radius: 2px; pointer-events: auto; } .nb-grab[data-h="nw"] { top: -7px; left: -7px; cursor: nwse-resize; } .nb-grab[data-h="ne"] { top: -7px; right: -7px; cursor: nesw-resize; } .nb-grab[data-h="se"] { bottom: -7px; right: -7px; cursor: nwse-resize; } .nb-grab[data-h="sw"] { bottom: -7px; left: -7px; cursor: nesw-resize; } /* side handle for setting text-box width — only shown for a selected text box */ .nb-grab[data-h="e"] { top: 50%; right: -7px; transform: translateY(-50%); cursor: ew-resize; } .nb-selbox .nb-grab[data-h="e"] { display: none; } .nb-selbox.is-text .nb-grab[data-h="e"] { display: block; } /* marquee selection rectangle */ .nb-marquee { position: absolute; z-index: 7; border: 1px dashed var(--forest); background: rgba(52, 80, 58, 0.07); pointer-events: none; } /* ── Tool option sliders ── */ .nb-options { position: absolute; left: 14px; bottom: 14px; z-index: 10; display: none; flex-direction: column; gap: 0.5rem; padding: 0.7rem 0.85rem; background: var(--paper-panel); border: 1px solid var(--line-strong); border-radius: 10px; box-shadow: 0 2px 8px rgba(43, 38, 24, 0.10); } .nb-stage-wrap[data-tool="pen"] .nb-options, .nb-stage-wrap[data-tool="eraser"] .nb-options { display: flex; } .nb-opt { display: none; flex-direction: column; gap: 0.5rem; } .nb-stage-wrap[data-tool="pen"] .nb-opt-pen { display: flex; } .nb-stage-wrap[data-tool="eraser"] .nb-opt-eraser { display: flex; } .nb-stage-wrap.nb-opts-hidden .nb-options { display: none; } .nb-size { display: flex; align-items: center; gap: 0.75rem; } /* circular well + live size preview */ .nb-preview { width: 40px; height: 40px; flex: 0 0 auto; display: flex; align-items: center; justify-content: center; border: 1px solid var(--line-strong); border-radius: 50%; background: var(--paper); box-shadow: inset 0 1px 3px rgba(43, 38, 24, 0.12); overflow: hidden; } .nb-dot { width: 3px; height: 3px; background: var(--ink); border-radius: 50%; transition: width 0.08s ease, height 0.08s ease; } .nb-ring { width: 28px; height: 28px; border: 1.5px solid var(--forest); background: rgba(52, 80, 58, 0.07); border-radius: 50%; transition: width 0.08s ease, height 0.08s ease; } .nb-size-ctl { display: flex; flex-direction: column; gap: 0.4rem; } .nb-size-row { display: flex; align-items: baseline; justify-content: space-between; gap: 0.8rem; } .nb-size-label { font-size: 0.64rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-faint); } .nb-size-val { font-family: 'Spectral', Georgia, serif; font-size: 1.1rem; font-weight: 600; line-height: 1; color: var(--forest-deep); font-variant-numeric: tabular-nums; } .nb-size-val::after { content: ' px'; font-size: 0.58rem; letter-spacing: 0.08em; color: var(--ink-faint); } .nb-mini { display: flex; flex-direction: column; gap: 0.3rem; font-size: 0.62rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-faint); } /* pen color swatches */ .nb-colors { display: flex; align-items: center; gap: 0.45rem; margin-top: 0.2rem; } .nb-color { width: 1.3rem; height: 1.3rem; padding: 0; border-radius: 50%; background: var(--sw); border: 2px solid var(--paper-panel); box-shadow: 0 0 0 1px var(--line-strong); cursor: pointer; transition: transform 0.12s ease, box-shadow 0.12s ease; } /* the black "Ink" swatch is invisible on the dark night panel — show it light to match how its strokes render at night (!important beats the inline --sw). */ body.is-night .nb-color[data-color="#2b2618"] { --sw: #e7e9f1 !important; } .nb-color:hover { transform: scale(1.12); } .nb-color.is-active { box-shadow: 0 0 0 2px var(--forest); } .nb-color:focus-visible { outline: 2px solid var(--forest-deep); outline-offset: 2px; } /* slim, themed slider */ .nb-options input[type="range"] { -webkit-appearance: none; appearance: none; width: 150px; height: 3px; border-radius: 3px; background: var(--line-strong); cursor: pointer; } .nb-options input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 15px; height: 15px; border-radius: 50%; background: var(--paper-panel); border: 1.5px solid var(--forest); box-shadow: 0 1px 2px rgba(43, 38, 24, 0.22); } .nb-options input[type="range"]::-moz-range-thumb { width: 15px; height: 15px; border-radius: 50%; background: var(--paper-panel); border: 1.5px solid var(--forest); } /* ── Floating toolbar ── */ .nb-toolbar { position: absolute; top: 14px; left: 14px; z-index: 10; display: flex; flex-direction: column; gap: 4px; padding: 6px; background: var(--paper-panel); border: 1px solid var(--line-strong); border-radius: 12px; box-shadow: 0 2px 8px rgba(43, 38, 24, 0.10); } .nb-grip { display: flex; align-items: center; justify-content: center; height: 18px; background: none; border: none; color: var(--ink-faint); cursor: grab; } .nb-grip:active { cursor: grabbing; } .nb-grip svg { width: 20px; height: 14px; } .nb-tool { width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; background: none; border: 1px solid transparent; border-radius: 8px; color: var(--ink-soft); cursor: pointer; transition: background-color 0.15s ease, color 0.15s ease; } .nb-tool:hover { background: var(--paper-edge); color: var(--ink); } .nb-tool.active { background: rgba(52, 80, 58, 0.12); border-color: var(--forest); color: var(--forest-deep); } .nb-tool svg { width: 22px; height: 22px; } /* ── Expand / fullscreen button ── */ .nb-expand { position: absolute; top: 14px; right: 14px; z-index: 10; width: 38px; height: 38px; display: flex; align-items: center; justify-content: center; background: var(--paper-panel); border: 1px solid var(--line-strong); border-radius: 9px; color: var(--ink-soft); cursor: pointer; transition: background-color 0.15s ease, color 0.15s ease; } .nb-expand:hover { background: var(--paper-edge); color: var(--forest-deep); } .nb-expand svg { width: 20px; height: 20px; } /* undo / redo, pinned top-right just left of the expand button */ .nb-history { position: absolute; top: 14px; right: 60px; z-index: 10; display: flex; gap: 6px; } .nb-hist-btn { width: 34px; height: 38px; display: flex; align-items: center; justify-content: center; background: var(--paper-panel); border: 1px solid var(--line-strong); border-radius: 9px; color: var(--ink-soft); cursor: pointer; transition: background-color 0.15s ease, color 0.15s ease, opacity 0.15s ease; } .nb-hist-btn:hover { background: var(--paper-edge); color: var(--forest-deep); } .nb-hist-btn svg { width: 20px; height: 20px; } .nb-hist-btn:disabled { opacity: 0.32; cursor: default; pointer-events: none; } .nb-hist-btn:focus-visible { outline: 2px solid var(--forest); outline-offset: 1px; } /* fullscreen fills the screen with paper */ /* ── Full screen: the whole notebook fills the screen; the canvas fills it and the tutor chat floats over it as a draggable panel. Driven by the .nb-fs class. ── */ .notebook.nb-fs { max-width: none; margin: 0; padding: 0; flex-direction: row; /* canvas on the left, chat sidebar on the right */ background: var(--paper-panel); } .notebook.nb-fs .nb-head { display: none; } /* no page header in full screen */ .notebook.nb-fs .nb-stage-wrap { border: none; border-radius: 0; min-height: 0; /* fill height instead of the 22rem normal-mode floor */ } .notebook.nb-fs .nb-stage { background-color: var(--paper-panel); } /* the tutor chat floats over the canvas as a small, draggable panel */ .notebook.nb-fs .nb-tutor { position: absolute; bottom: 16px; right: 16px; width: 18rem; max-height: 56vh; margin: 0; z-index: 30; box-sizing: border-box; background: var(--paper-panel); border: 1px solid var(--line-strong); border-radius: 12px; box-shadow: 0 8px 28px rgba(43, 38, 24, 0.22); overflow: hidden; } .notebook.nb-fs .nb-tutor-log { flex: 1 1 auto; min-height: 0; /* allow the log to shrink + scroll inside the capped panel */ max-height: none; padding: 0.6rem 0.8rem 0.4rem; } /* tidy the composer row inside the small floating panel */ .notebook.nb-fs .nb-tutor-form { padding: 0.55rem 0.6rem 0.65rem; gap: 0.45rem; align-items: center; /* line mic / input / send up on one row */ background: transparent; /* blend with the panel instead of a darker strip */ } .notebook.nb-fs .nb-tutor-form .composer-mic, .notebook.nb-fs .nb-tutor-form .composer-send { width: 2.5rem; height: 2.5rem; /* equal, slightly smaller buttons for the narrow panel */ align-self: center; } .notebook.nb-fs .nb-tutor-form .composer-input { min-height: 2.5rem; box-sizing: border-box; padding: 0.55rem 0.7rem; /* match the button height for a clean baseline */ } .notebook.nb-fs .nb-next { display: none; } /* no Next button in the floating chat */ /* thin grab strips at the top + bottom edges to resize the panel's height */ .nb-tutor-resize { display: none; } .notebook.nb-fs .nb-tutor-resize { display: block; position: absolute; left: 0; right: 0; height: 8px; z-index: 6; cursor: ns-resize; touch-action: none; } .notebook.nb-fs .nb-tutor-resize-top { top: 0; } .notebook.nb-fs .nb-tutor-resize-bottom { bottom: 0; } /* drag / minimize header — only present while the chat is a floating panel */ .nb-tutor-bar { display: none; } .notebook.nb-fs .nb-tutor-bar { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; padding: 0.4rem 0.45rem 0.4rem 0.85rem; cursor: move; touch-action: none; /* pointer drag without scroll-jank */ border-bottom: 1px solid var(--line); background: var(--paper-edge); } .nb-tutor-title { font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 600; color: var(--ink-soft); } .nb-tutor-min { display: flex; align-items: center; justify-content: center; width: 26px; height: 26px; background: none; border: none; border-radius: 7px; color: var(--ink-soft); cursor: pointer; } .nb-tutor-min:hover { background: var(--paper-panel); color: var(--forest-deep); } .nb-tutor-min svg { width: 16px; height: 16px; } /* minimized: hide the panel, show a round launcher button to bring it back */ .nb-tutor-launch { display: none; } .notebook.nb-fs.nb-chat-hidden .nb-tutor { display: none; } .notebook.nb-fs.nb-chat-hidden .nb-tutor-launch { display: flex; align-items: center; justify-content: center; position: absolute; bottom: 16px; right: 16px; z-index: 30; width: 46px; height: 46px; background: var(--forest); color: var(--paper-panel); border: none; border-radius: 50%; box-shadow: 0 6px 18px rgba(43, 38, 24, 0.28); cursor: pointer; } .notebook.nb-fs.nb-chat-hidden .nb-tutor-launch:hover { background: var(--forest-deep); } .nb-tutor-launch svg { width: 22px; height: 22px; } .nb-tool:focus-visible, .nb-expand:focus-visible, .nb-grip:focus-visible { outline: 2px solid var(--forest); outline-offset: 1px; } .nb-stage-wrap.nb-dragover { border-color: var(--forest); box-shadow: inset 0 0 0 2px var(--forest); } /* ── Image "what is this?" chip ── */ .nb-ask { position: absolute; left: 0; top: -2.6rem; z-index: 8; display: flex; align-items: center; gap: 0.4rem; padding: 0.3rem 0.45rem; white-space: nowrap; background: var(--paper-panel); border: 1px solid var(--line-strong); border-radius: 9px; box-shadow: 0 2px 8px rgba(43, 38, 24, 0.12); } /* A vision model (Gemma) sees the image directly, so the "what is this?" prompt (which only exists to label images for the text-only snapshot) is hidden. */ body.model-gemma .nb-ask { display: none; } .nb-ask span { font-size: 0.7rem; letter-spacing: 0.04em; color: var(--ink-faint); padding: 0 0.2rem; } .nb-ask button { font-family: inherit; font-size: 0.78rem; color: var(--ink); background: var(--paper); border: 1px solid var(--line-strong); border-radius: 7px; padding: 0.2rem 0.5rem; cursor: pointer; } .nb-ask button:hover { background: rgba(52, 80, 58, 0.12); border-color: var(--forest); color: var(--forest-deep); } /* ── "Reading image…" overlay while the vision model runs ── */ .nb-item-status { position: absolute; inset: 0; z-index: 8; display: flex; align-items: center; justify-content: center; text-align: center; padding: 0.5rem; font-size: 0.8rem; font-style: italic; color: var(--forest-deep); background: rgba(246, 239, 223, 0.78); border-radius: 4px; pointer-events: none; } /* ── Socratic tutor panel ── */ .nb-tutor { flex: 0 0 auto; display: flex; flex-direction: column; margin-top: 1rem; } .nb-tutor-log { display: flex; flex-direction: column; gap: 0.9rem; max-height: 16rem; overflow-y: auto; padding-bottom: 0.75rem; } .nb-tutor-form { border-top: 1px solid var(--line); } .nb-next { flex: 0 0 auto; align-self: stretch; font-family: inherit; font-size: 0.92rem; font-weight: 600; letter-spacing: 0.02em; color: var(--paper-panel); background: var(--forest); border: none; border-radius: 10px; padding: 0 1rem; cursor: pointer; transition: background-color 0.18s ease; } .nb-next:hover { background: var(--forest-deep); } .nb-next:disabled { opacity: 0.55; cursor: default; } .nb-next:focus-visible { outline: 2px solid var(--forest-deep); outline-offset: 2px; } /* The Next button shows a dot loader while the model works (it's the primary action both under the canvas and in the full-screen chat sidebar). */ .nb-next { display: inline-flex; align-items: center; justify-content: center; min-width: 5.5rem; } .nb-next-label { display: inline-flex; align-items: center; } .nb-next-loader { display: none; } .nb-next.is-loading .nb-next-label { display: none; } .nb-next.is-loading .nb-next-loader { display: inline-flex; } .nb-next.is-loading { opacity: 1; } /* loader speaks for itself; don't dim */ .nb-next .dot-loader span { background: var(--paper-panel); } /* light dots on the green button */ /* Floating Next: appears over the canvas in full screen (not in the chat panel), pinned bottom-centre so it clears the toolbar and the top-right chat. */ .nb-fs-next { display: none; } .notebook.nb-fs .nb-fs-next { display: inline-flex; position: absolute; bottom: 18px; left: 50%; transform: translateX(-50%); z-index: 25; align-items: center; justify-content: center; gap: 0.4rem; min-width: 96px; font-family: inherit; font-size: 0.92rem; font-weight: 600; letter-spacing: 0.02em; color: var(--paper-panel); background: var(--forest); border: none; border-radius: 10px; padding: 0.55rem 1.05rem; cursor: pointer; box-shadow: 0 4px 14px rgba(43, 38, 24, 0.28); transition: background-color 0.18s ease; } .nb-fs-next:hover { background: var(--forest-deep); } .nb-fs-next:disabled { opacity: 0.55; cursor: default; } .nb-fs-next.is-loading { opacity: 1; } /* loader speaks for itself; don't dim */ .nb-fs-next:focus-visible { outline: 2px solid var(--forest-deep); outline-offset: 2px; } .nb-fs-next svg { width: 18px; height: 18px; } .nb-fs-next-label { display: inline-flex; align-items: center; gap: 0.4rem; } .nb-fs-next-loader { display: none; } .nb-fs-next.is-loading .nb-fs-next-label { display: none; } .nb-fs-next.is-loading .nb-fs-next-loader { display: inline-flex; } .nb-fs-next .dot-loader span { background: var(--paper-panel); } /* light dots on the green button */ /* ════════════════════════════════════════════════════════════ Account · auth gate (sign in / create / reset) — front-end UI Token-driven, so it adopts parchment by day and the night palette automatically. No new colours: only the existing design tokens. ════════════════════════════════════════════════════════════ */ .auth-gate { position: fixed; inset: 0; z-index: 2000; /* above topbar (10/20) and everything else */ display: flex; align-items: flex-start; justify-content: center; overflow-y: auto; -webkit-overflow-scrolling: touch; background-color: var(--paper); background-image: radial-gradient(120% 80% at 50% -10%, rgba(52,80,58,0.08) 0%, transparent 55%), repeating-linear-gradient(0deg, rgba(120,100,60,0.018) 0 1px, transparent 1px 3px); padding: max(1.25rem, env(safe-area-inset-top)) 1.25rem 2rem; transition: opacity 0.35s ease; } .auth-gate.is-leaving { opacity: 0; pointer-events: none; } .auth-gate[hidden] { display: none; } /* lock the app scroll behind the gate */ body.auth-open { overflow: hidden; } .auth-stage { width: 100%; max-width: 27rem; margin: auto; display: flex; flex-direction: column; gap: 1rem; } .auth-card { background: var(--paper-panel); border: 1px solid var(--line); border-radius: 1.1rem; box-shadow: 0 18px 44px rgba(43,38,24,0.18), 0 2px 6px rgba(43,38,24,0.08); padding: 1.9rem 1.75rem 1.75rem; } /* brand lockup */ .auth-brand { display: flex; align-items: center; justify-content: center; gap: 0.5rem; margin-bottom: 1.4rem; } .auth-brand-leaf { width: 1.65rem; height: 1.65rem; color: var(--forest); } .auth-brand-name { font-weight: 600; font-size: 1.4rem; letter-spacing: 0.01em; color: var(--forest-deep); } /* views: only one visible at a time, with a soft cross-fade/slide */ .auth-view { display: none; } .auth-view.is-active { display: block; animation: auth-in 0.32s cubic-bezier(0.22, 1, 0.36, 1) both; } @keyframes auth-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } } .auth-title { font-weight: 600; font-size: clamp(1.6rem, 6vw, 2rem); line-height: 1.15; color: var(--forest-deep); text-align: center; } .auth-sub { font-style: italic; color: var(--ink-soft); text-align: center; margin-top: 0.3rem; margin-bottom: 1.4rem; } /* social / oauth buttons */ .auth-social { display: flex; flex-direction: column; gap: 0.6rem; } .auth-oauth { display: flex; align-items: center; justify-content: center; gap: 0.6rem; width: 100%; min-height: 3rem; padding: 0.7rem 1rem; font-family: inherit; font-size: 1rem; font-weight: 500; color: var(--ink); background: var(--paper); border: 1px solid var(--line-strong); border-radius: 10px; cursor: pointer; transition: border-color 0.18s ease, background-color 0.18s ease, transform 0.1s ease; } /* Apple sign-in not set up yet (needs a paid Apple Developer account). Hide the buttons so users don't hit "provider not enabled". DELETE this rule to re-enable. */ .auth-oauth[data-oauth="apple"] { display: none; } .auth-oauth:hover { border-color: var(--forest); } .auth-oauth:active { transform: scale(0.985); background: var(--paper-edge); } .auth-oauth:focus-visible { outline: 2px solid var(--forest-deep); outline-offset: 2px; } .auth-oauth-icon { width: 1.25rem; height: 1.25rem; flex: 0 0 auto; } /* "or" divider */ .auth-divider { display: flex; align-items: center; gap: 0.75rem; margin: 1.25rem 0; color: var(--ink-faint); font-size: 0.85rem; } .auth-divider::before, .auth-divider::after { content: ""; flex: 1; height: 1px; background: var(--line); } /* fields */ .auth-field { margin-bottom: 1rem; } .auth-field label { display: block; font-size: 0.9rem; font-weight: 500; color: var(--ink-soft); margin-bottom: 0.35rem; } .auth-field-row { display: flex; align-items: baseline; justify-content: space-between; } .auth-field input[type="text"], .auth-field input[type="email"], .auth-field input[type="password"] { width: 100%; font-family: inherit; font-size: 1rem; /* 16px — no mobile zoom */ line-height: 1.5; color: var(--ink); background: var(--paper); border: 1px solid var(--line-strong); border-radius: 10px; padding: 0.7rem 0.85rem; min-height: 3rem; transition: border-color 0.16s ease, box-shadow 0.16s ease; } .auth-field input::placeholder { color: var(--ink-faint); } .auth-field input:focus { outline: none; border-color: var(--forest); box-shadow: 0 0 0 3px rgba(52,80,58,0.16); } /* password field with a show/hide eye inside */ .auth-input-wrap { position: relative; } .auth-input-wrap input { padding-right: 3rem; } .auth-eye { position: absolute; right: 0.4rem; top: 50%; transform: translateY(-50%); width: 2.2rem; height: 2.2rem; display: flex; align-items: center; justify-content: center; background: none; border: none; border-radius: 8px; color: var(--ink-faint); cursor: pointer; transition: color 0.16s ease; } .auth-eye:hover { color: var(--ink); } .auth-eye:focus-visible { outline: 2px solid var(--forest-deep); outline-offset: 1px; } .auth-eye svg { width: 1.15rem; height: 1.15rem; } /* invalid state + inline error text */ .auth-field.is-invalid input { border-color: var(--incorrect); } .auth-field.is-invalid input:focus { box-shadow: 0 0 0 3px rgba(180,81,63,0.16); } .auth-error { display: none; margin-top: 0.35rem; font-size: 0.85rem; color: var(--incorrect); } .auth-error.is-shown { display: block; } /* Cloudflare Turnstile captcha slot — spacing only when a widget is present */ .auth-captcha { margin-top: 0.85rem; } .auth-captcha:empty { margin: 0; } /* positive confirmation notice (e.g. "check your email") — looks like good news, not a failure: soft green card with a check badge instead of red text */ .auth-formerror.is-success { color: var(--correct); background: color-mix(in srgb, var(--correct) 12%, transparent); border: 1px solid color-mix(in srgb, var(--correct) 32%, transparent); border-radius: 0.7rem; padding: 0.7rem 0.9rem 0.7rem 2.4rem; margin-top: 0.6rem; font-size: 0.9rem; line-height: 1.45; position: relative; } .auth-formerror.is-success::before { content: "✓"; position: absolute; left: 0.8rem; top: 0.72rem; width: 1.2rem; height: 1.2rem; display: flex; align-items: center; justify-content: center; background: var(--correct); color: #fff; border-radius: 50%; font-size: 0.72rem; font-weight: 700; line-height: 1; } /* password strength meter */ .auth-strength { display: flex; align-items: center; gap: 0.6rem; margin-top: 0.55rem; } .auth-strength-bars { display: flex; gap: 0.3rem; flex: 1; } .auth-strength-bars i { flex: 1; height: 5px; border-radius: 999px; background: var(--line); transition: background-color 0.2s ease; } .auth-strength-label { font-size: 0.78rem; color: var(--ink-faint); min-width: 4.5rem; text-align: right; } .auth-strength[data-score="1"] i:nth-child(-n+1), .auth-strength[data-score="2"] i:nth-child(-n+2), .auth-strength[data-score="3"] i:nth-child(-n+3), .auth-strength[data-score="4"] i:nth-child(-n+4) { background: var(--forest); } .auth-strength[data-score="1"] i:nth-child(-n+1) { background: var(--incorrect); } .auth-strength[data-score="2"] i:nth-child(-n+2) { background: var(--leaf-warm); } /* checkbox row (remember / terms) */ .auth-check { display: flex; align-items: flex-start; gap: 0.55rem; font-size: 0.92rem; color: var(--ink-soft); cursor: pointer; margin: 0.4rem 0 0.2rem; } .auth-check input { flex: 0 0 auto; width: 1.15rem; height: 1.15rem; margin-top: 0.12rem; accent-color: var(--forest); cursor: pointer; } .auth-link-inline { color: var(--forest); text-decoration: underline; } /* primary submit */ .auth-submit { position: relative; width: 100%; min-height: 3.1rem; margin-top: 1.3rem; font-family: inherit; font-size: 1.05rem; font-weight: 600; color: var(--paper-panel); background: var(--forest); border: 1px solid var(--forest); border-radius: 10px; cursor: pointer; transition: background-color 0.18s ease, transform 0.1s ease, box-shadow 0.18s ease; box-shadow: 0 6px 16px rgba(37,64,43,0.22); } .auth-submit:hover { background: var(--forest-deep); } .auth-submit:active { transform: scale(0.99); } .auth-submit:focus-visible { outline: 2px solid var(--forest-deep); outline-offset: 2px; } .auth-submit.is-loading { color: transparent; pointer-events: none; } .auth-submit .auth-spinner { position: absolute; left: 50%; top: 50%; width: 1.2rem; height: 1.2rem; margin: -0.6rem 0 0 -0.6rem; border: 2px solid rgba(246,239,223,0.45); border-top-color: var(--paper-panel); border-radius: 50%; opacity: 0; } .auth-submit.is-loading .auth-spinner { opacity: 1; animation: auth-spin 0.7s linear infinite; } @keyframes auth-spin { to { transform: rotate(360deg); } } /* swap line + small text links */ .auth-swap { margin-top: 1.1rem; text-align: center; font-size: 0.95rem; color: var(--ink-soft); } .auth-link { font-family: inherit; font-size: inherit; font-weight: 500; color: var(--forest); background: none; border: none; padding: 0.1rem 0.15rem; cursor: pointer; border-radius: 4px; } .auth-link:hover { text-decoration: underline; } .auth-link:focus-visible { outline: 2px solid var(--forest-deep); outline-offset: 1px; } /* back button (forgot view) */ .auth-back { display: inline-flex; align-items: center; gap: 0.25rem; margin-bottom: 0.6rem; font-family: inherit; font-size: 0.95rem; font-weight: 500; color: var(--ink-soft); background: none; border: none; cursor: pointer; border-radius: 6px; } .auth-back:hover { color: var(--ink); } .auth-back:focus-visible { outline: 2px solid var(--forest-deep); outline-offset: 2px; } .auth-back svg { width: 1.05rem; height: 1.05rem; } /* reset-link sent confirmation */ .auth-sent { text-align: center; padding-top: 0.5rem; } .auth-sent-icon { width: 3.25rem; height: 3.25rem; margin: 0.5rem auto 0.9rem; display: flex; align-items: center; justify-content: center; color: var(--forest); background: rgba(52,80,58,0.12); border-radius: 50%; } .auth-sent-icon svg { width: 1.6rem; height: 1.6rem; } .auth-sent h2 { font-weight: 600; font-size: 1.3rem; color: var(--forest-deep); } .auth-sent p { color: var(--ink-soft); margin: 0.4rem 0 0.4rem; } /* footer line under the card */ .auth-foot { text-align: center; font-size: 0.85rem; color: var(--ink-faint); } @media (prefers-reduced-motion: reduce) { .auth-view.is-active { animation: none; } .auth-gate { transition: none; } .auth-submit.is-loading .auth-spinner { animation-duration: 1.4s; } }