:root { --bg: #f6f5f0; --surface: #ffffff; --surface-sunken: #f0efe9; --text: #22261f; --muted: #6b7166; --border: #e1ddd1; --accent: #3e7c6b; --accent-contrast: #ffffff; --error: #b3453c; --bubble-user-bg: #22261f; --bubble-user-text: #f6f5f0; --bubble-bot-bg: #f0efe9; --bubble-bot-text: #22261f; --shadow: 0 1px 2px rgba(30, 30, 20, 0.04), 0 8px 24px rgba(30, 30, 20, 0.06); --chalk: #22261f; --chalk-muted: #6b7166; } /* ========================================================================== "Family Chalkboard" — the parent-facing app's visual identity. Scoped to (index.html only) so every rule below still just reads the tokens above by name (--bg, --text, --accent, ...) — the admin dashboard (admin.html) has no .pwl-app body class, so it keeps reading the plain :root values and is untouched by any of this. To retune the palette later, edit ONLY the values in this block — every component (auth card, chat bubbles, memory sidebar, buttons) is built on top of these named tokens rather than hardcoded colors. The idea: the page itself is a kitchen chalkboard (--bg, a deep board green). The login card and the chat live on a "paper notepad" clipped to it (--surface). --chalk / --chalk-muted are for text sitting directly on the board (headline, footer, sidebar labels); --text / --muted stay dark ink for text sitting on the paper cards, same role they always had. See the "page-level overrides" block at the end of this file for the handful of spots that assumed --text/--bg were interchangeable as a light/dark pair — that assumption breaks now that --bg is dark too. ========================================================================== */ body.pwl-app { --bg: #2e4a3d; /* the board itself: deep chalkboard green */ --surface: #fffdf6; /* cards: warm paper, clipped to the board */ --surface-sunken: #f5eedd; /* input rows, dividers: a shade deeper paper */ --text: #33302a; /* ink: for text written on the paper cards */ --muted: #7d7364; /* soft ink: captions, labels, timestamps on paper */ --border: #e7dfc9; /* hairlines on paper: warm, not cool grey */ --accent: #e4573d; /* marker red: buttons, the one bright accent */ --accent-contrast: #fffdf6; /* warm white, for text on the red buttons */ --bubble-user-bg: #fffdf6; /* the parent's own words: quiet paper, bordered */ --bubble-user-text: #33302a; --bubble-bot-bg: #e3f0ec; /* the assistant's replies: a soft chalk-blue wash */ --bubble-bot-text: #263630; /* chalk colors: for text and doodles sitting directly on the board */ --chalk: #f4f1e8; --chalk-muted: rgba(244, 241, 232, 0.7); /* tokens used by the memory sidebar's hanging notes */ --honey: #f4c95d; /* chalk yellow */ --honey-tint: #35594a; /* a lighter fleck of board, behind the sidebar */ --plum: #f2879e; /* chalk pink, used as each note's "pin" */ --note-bg: #fff8e8; --chalk-blue: #8fc7de; } * { box-sizing: border-box; } html, body { margin: 0; min-height: 100vh; background: var(--bg); color: var(--text); font-family: "Karla", system-ui, -apple-system, sans-serif; } body { display: flex; flex-direction: column; align-items: center; padding: clamp(1.5rem, 5vw, 3.5rem) 1.25rem 3rem; } .wrap { width: 100%; max-width: 880px; } .eyebrow { font-size: 0.72rem; letter-spacing: 0.09em; text-transform: uppercase; color: var(--muted); font-weight: 600; } h1 { font-family: "Fraunces", Georgia, serif; font-weight: 600; font-size: clamp(1.5rem, 4vw, 2rem); margin: 0.3rem 0 0.4rem; letter-spacing: -0.01em; } .page-head { margin-bottom: 1.75rem; } .page-head p { margin: 0; color: var(--muted); font-size: 0.95rem; max-width: 60ch; } .brand-lockup { display: flex; align-items: center; gap: 0.55rem; margin-bottom: 0.6rem; } .brand-mark { flex-shrink: 0; } .brand-wordmark { display: flex; align-items: baseline; font-family: "Fraunces", Georgia, serif; } .brand-parents { font-size: 1.4rem; font-weight: 600; color: var(--text); } .brand-with { font-family: "Karla", system-ui, sans-serif; font-size: 0.75rem; font-weight: 500; color: var(--accent); margin: 0 0.14rem; align-self: center; } .brand-love { font-size: 1.4rem; font-weight: 500; font-style: italic; color: var(--plum); } .demo-banner { background: var(--surface-sunken); border: 1px solid var(--border); border-radius: 10px; padding: 0.65rem 0.9rem; font-size: 0.83rem; color: var(--muted); margin-bottom: 1.25rem; } /* ---------- auth ---------- */ .auth-card { max-width: 400px; margin: 0 auto; background: var(--surface); border: 1px solid var(--border); border-radius: 16px; padding: 1.75rem; box-shadow: var(--shadow); } .auth-tabs { display: flex; gap: 0.5rem; margin-bottom: 1.25rem; } .auth-tab { flex: 1; padding: 0.55rem; text-align: center; border-radius: 8px; border: 1px solid var(--border); background: var(--surface); color: var(--muted); font-family: inherit; font-size: 0.85rem; font-weight: 600; cursor: pointer; } .auth-tab.active { background: var(--text); color: var(--bg); border-color: var(--text); } .field { margin-bottom: 0.9rem; } .field label { display: block; font-size: 0.78rem; font-weight: 600; color: var(--muted); margin-bottom: 0.3rem; } .field input { width: 100%; padding: 0.6rem 0.75rem; border-radius: 8px; border: 1px solid var(--border); font-size: 0.93rem; font-family: inherit; background: var(--surface); color: var(--text); } .field input:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; } .btn-primary { width: 100%; padding: 0.7rem; border-radius: 8px; border: none; background: var(--accent); color: var(--accent-contrast); font-size: 0.93rem; font-weight: 700; font-family: inherit; cursor: pointer; } .btn-primary:hover { filter: brightness(1.05); } .btn-primary:disabled { opacity: 0.6; cursor: default; } .social-auth { margin-top: 1.1rem; display: flex; flex-direction: column; gap: 0.6rem; } .social-divider { display: flex; align-items: center; gap: 0.75rem; color: var(--muted); font-size: 0.8rem; margin: 0.2rem 0 0.3rem; } .social-divider::before, .social-divider::after { content: ""; flex: 1; height: 1px; background: var(--border); } .btn-social { width: 100%; box-sizing: border-box; padding: 0.65rem; border-radius: 8px; border: 1px solid var(--border); background: #fff; color: var(--text); font-size: 0.9rem; font-weight: 600; font-family: inherit; text-align: center; text-decoration: none; display: block; cursor: pointer; } .btn-social:hover { filter: brightness(0.97); } .btn-google { border-color: var(--border); } .btn-facebook { border-color: var(--border); } /* .btn-social sets display:block above, which (author styles always beat the UA stylesheet, regardless of specificity) would otherwise override the [hidden] attribute's default display:none and show the button anyway. These restore that. */ .btn-social[hidden] { display: none; } .social-auth[hidden] { display: none; } .form-error { background: color-mix(in srgb, var(--error) 12%, transparent); color: var(--error); border-radius: 8px; padding: 0.55rem 0.75rem; font-size: 0.83rem; margin-bottom: 0.9rem; display: none; } .form-error.visible { display: block; } /* ---------- app shell ---------- */ .app-header { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: 1.25rem; } .logout-link { font-size: 0.82rem; color: var(--muted); background: none; border: none; cursor: pointer; font-family: inherit; text-decoration: underline; padding: 0; } .app-grid { display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: 1.25rem; align-items: start; } @media (max-width: 720px) { .app-grid { grid-template-columns: 1fr; } } /* ---------- chat ---------- */ .chat-card { border: 1px solid var(--border); border-radius: 18px; overflow: hidden; background: var(--surface); box-shadow: var(--shadow); } .chat-header { display: flex; align-items: center; gap: 0.75rem; padding: 1.1rem 1.35rem; background: var(--text); color: var(--bg); } .chat-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--accent); flex-shrink: 0; box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 25%, transparent); } .chat-title { font-weight: 700; font-size: 0.98rem; } .chat-subtitle { font-size: 0.78rem; opacity: 0.65; } .voice-toggle { margin-left: auto; flex-shrink: 0; background: rgba(255, 255, 255, 0.12); border: 1px solid rgba(255, 255, 255, 0.28); color: var(--bg); font-size: 0.72rem; font-family: inherit; padding: 0.35rem 0.7rem; border-radius: 999px; cursor: pointer; white-space: nowrap; } .voice-toggle[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--accent-contrast); } .chat-log { padding: 1.25rem; display: flex; flex-direction: column; gap: 0.65rem; min-height: 320px; max-height: 480px; overflow-y: auto; } .msg { max-width: 82%; padding: 0.6rem 0.9rem; border-radius: 14px; font-size: 0.93rem; line-height: 1.5; white-space: pre-wrap; } .msg.bot { align-self: flex-start; background: var(--bubble-bot-bg); color: var(--bubble-bot-text); border-bottom-left-radius: 4px; } .msg.user { align-self: flex-end; background: var(--bubble-user-bg); color: var(--bubble-user-text); border: 1px solid var(--border); border-bottom-right-radius: 4px; } .msg.pending { opacity: 0.6; } .chat-inputrow { display: flex; gap: 0.5rem; padding: 1rem 1.25rem; border-top: 1px solid var(--border); background: var(--surface-sunken); } .chat-input { flex: 1; min-width: 0; /* lets the input actually shrink on narrow phones instead of pushing Send off the edge */ padding: 0.65rem 0.9rem; border-radius: 10px; border: 1px solid var(--border); font-size: 0.93rem; font-family: inherit; background: var(--surface); color: var(--text); } .chat-send { padding: 0.65rem 1.15rem; border-radius: 10px; border: none; background: var(--accent); color: var(--accent-contrast); font-size: 0.9rem; font-weight: 700; cursor: pointer; font-family: inherit; } .chat-send:disabled { opacity: 0.6; cursor: default; } .mic-btn { flex-shrink: 0; width: 42px; height: 42px; border-radius: 10px; border: 1px solid var(--border); background: var(--surface); color: var(--text); font-size: 1.05rem; cursor: pointer; display: flex; align-items: center; justify-content: center; font-family: inherit; } .mic-btn.recording { background: #d64545; border-color: #d64545; color: #fff; animation: mic-pulse 1.2s ease-in-out infinite; } .mic-btn:disabled { opacity: 0.5; cursor: default; } @keyframes mic-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(214, 69, 69, 0.45); } 50% { box-shadow: 0 0 0 8px rgba(214, 69, 69, 0); } } .chat-footer { display: flex; justify-content: center; padding: 0.6rem 1.25rem; border-top: 1px solid var(--border); background: var(--surface-sunken); } .rate-session-link { background: none; border: none; cursor: pointer; font-family: inherit; font-size: 0.8rem; color: var(--muted); text-decoration: underline; padding: 0.2rem 0.4rem; } .rate-session-link:hover { color: var(--text); } /* ---------- memory sidebar: a corkboard, not a table ---------- */ /* This is the one part of the redesign with a genuinely new layout idea: each remembered topic/note is a small pinned card rather than a data row, because what's here is closer to a family's own bulletin board than a database export. */ .memory-card { border: 1px solid var(--border); border-radius: 14px; background: var(--honey-tint); background-image: radial-gradient(color-mix(in srgb, var(--text) 8%, transparent) 1px, transparent 1px); background-size: 14px 14px; padding: 1.1rem; box-shadow: var(--shadow); } .memory-card h2 { font-family: "Karla", sans-serif; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); margin: 0 0 0.75rem; } .memory-last-active { display: inline-block; font-size: 0.72rem; font-weight: 700; color: #5b4420; background: color-mix(in srgb, var(--honey) 30%, var(--surface)); border-radius: 999px; padding: 0.2rem 0.65rem; margin: -0.2rem 0 0.9rem; } /* Same recurring cascade bug this codebase has hit three times before (.btn-social, .modal-backdrop, .modal-backdrop again): setting an explicit `display` above beats the browser's default [hidden] rule regardless of source order. Restore it explicitly. */ .memory-last-active[hidden] { display: none; } .memory-section { margin-bottom: 0.9rem; } .memory-section:last-child { margin-bottom: 0; } .memory-label { font-size: 0.75rem; color: var(--muted); margin-bottom: 0.4rem; } .memory-empty { font-size: 0.83rem; color: var(--muted); font-style: italic; } .pill-row { display: flex; flex-wrap: wrap; gap: 0.4rem; } .kid-pill { font-size: 0.83rem; padding: 0.22rem 0.7rem; border-radius: 999px; background: var(--surface); border: 1px solid var(--border); } .pin-list { display: flex; flex-direction: column; gap: 0.55rem; } .pin-note { position: relative; background: var(--surface); border: 1px solid var(--border); border-radius: 3px; padding: 0.5rem 0.65rem; font-size: 0.82rem; color: var(--text); box-shadow: 0 6px 12px -8px rgba(40, 50, 39, 0.35); transition: transform 0.15s ease; } .pin-note:hover { transform: rotate(0deg) !important; } .pin-note::before { content: ""; position: absolute; top: -5px; left: 12px; width: 7px; height: 7px; border-radius: 50%; background: var(--plum); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3); } .pin-list > :nth-child(odd) { transform: rotate(-1deg); } .pin-list > :nth-child(even) { transform: rotate(0.9deg); } .pin-note.note-pin { background: var(--note-bg); font-family: "Caveat", cursive; font-size: 1.05rem; line-height: 1.3; color: #4a3a1c; } @media (prefers-reduced-motion: reduce) { .pin-note { transition: none; } } /* .chip-row/.chip/.child-row/.note-item below are the ORIGINAL (pre-Held Steady) memory styles. The parent-facing app (app.js) no longer uses them — it renders .pill-row/.kid-pill/.pin-list/.pin-note now — but the admin dashboard's user-detail modal (admin.js) still builds this exact markup for its read-only view of a family's data, so these stay as-is, unscoped, reading the plain :root tokens admin.html was already using. */ .chip-row { display: flex; flex-wrap: wrap; gap: 0.4rem; } .chip { font-size: 0.78rem; padding: 0.25rem 0.6rem; border-radius: 999px; background: var(--surface-sunken); border: 1px solid var(--border); } .child-row { font-size: 0.88rem; padding: 0.15rem 0; } .note-item { font-size: 0.83rem; color: var(--text); margin: 0.2rem 0; } /* ---------- app header actions ---------- */ .app-header-actions { display: flex; align-items: baseline; gap: 1rem; } /* ---------- session self-review ---------- */ .review-panel { border-top: 1px solid var(--border); background: var(--surface); padding: 1.1rem 1.35rem 1.35rem; } .review-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.6rem; } .review-head h2 { font-family: "Fraunces", Georgia, serif; font-size: 1.05rem; font-weight: 600; margin: 0; } .review-close { background: none; border: none; font-size: 1.3rem; line-height: 1; color: var(--muted); cursor: pointer; padding: 0 0.25rem; } .review-loading, .review-error, .review-unavailable { font-size: 0.88rem; color: var(--muted); } .review-score-row { display: flex; align-items: baseline; gap: 0.6rem; margin-bottom: 0.9rem; } .review-score-big { font-family: "Fraunces", Georgia, serif; font-size: 1.9rem; font-weight: 600; color: var(--accent); } .review-score-label { font-size: 0.8rem; color: var(--muted); } .review-dims { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 1rem; } .review-dim-chip { font-size: 0.76rem; padding: 0.25rem 0.55rem; border-radius: 999px; background: var(--surface-sunken); border: 1px solid var(--border); color: var(--text); } .review-section { margin-bottom: 0.9rem; } .review-section:last-child { margin-bottom: 0; } .review-section-label { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); margin-bottom: 0.35rem; } .review-list { margin: 0; padding-left: 1.1rem; font-size: 0.88rem; line-height: 1.5; } .review-list li { margin-bottom: 0.3rem; } .review-empty { font-size: 0.85rem; color: var(--muted); font-style: italic; } .review-prompt-note { font-size: 0.78rem; color: var(--muted); margin-top: 0.5rem; font-style: italic; } /* ---------- account settings ---------- */ .account-link { font-size: 0.82rem; color: var(--muted); background: none; border: none; cursor: pointer; font-family: inherit; text-decoration: underline; padding: 0; } .modal-backdrop { position: fixed; inset: 0; background: rgba(20, 22, 18, 0.45); display: flex; align-items: flex-start; justify-content: center; padding: clamp(1.25rem, 6vh, 4rem) 1rem; overflow-y: auto; z-index: 20; } /* .modal-backdrop sets display:flex above, which (author styles always beat the UA stylesheet, regardless of specificity) would otherwise override the [hidden] attribute's default display:none and keep the modal visible and intercepting clicks. Same cascade bug as .btn-social/.social-auth earlier in this project — same fix. */ .modal-backdrop[hidden] { display: none; } .modal-card { width: 100%; max-width: 440px; background: var(--surface); border: 1px solid var(--border); border-radius: 16px; padding: 1.5rem 1.5rem 1.65rem; box-shadow: var(--shadow); } .modal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.1rem; } .modal-head h2 { font-family: "Fraunces", Georgia, serif; font-size: 1.15rem; font-weight: 600; margin: 0; } .modal-close { background: none; border: none; font-size: 1.3rem; line-height: 1; color: var(--muted); cursor: pointer; padding: 0 0.25rem; } .modal-section { margin-bottom: 1.35rem; } .modal-label { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); margin-bottom: 0.5rem; } .modal-static { font-size: 0.93rem; } .modal-hint { font-size: 0.83rem; color: var(--muted); margin: 0 0 0.7rem; } .account-children-list { display: flex; flex-direction: column; gap: 0.5rem; } .account-child-row { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; } .account-child-row input { padding: 0.5rem 0.6rem; border-radius: 8px; border: 1px solid var(--border); font-size: 0.88rem; font-family: inherit; background: var(--surface); color: var(--text); min-width: 0; } .account-child-row input.account-child-name { flex: 1 1 8rem; } .account-child-row input.account-child-age { flex: 0 1 4.5rem; } .account-child-row input:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; } .account-child-save, .account-child-delete { padding: 0.45rem 0.7rem; border-radius: 8px; font-size: 0.82rem; font-family: inherit; cursor: pointer; border: 1px solid var(--border); background: var(--surface); color: var(--text); } .account-child-save:hover { border-color: var(--accent); color: var(--accent); } .account-child-delete:hover { border-color: var(--error); color: var(--error); } .account-child-save:disabled, .account-child-delete:disabled { opacity: 0.6; cursor: default; } .disclaimer-body p { margin: 0 0 0.95rem; font-size: 0.9rem; line-height: 1.55; color: var(--text); } .disclaimer-body p:last-child { margin-bottom: 0; } /* Always-visible AI/professional-advice disclaimer, in the page footer rather than inside #auth-screen or #app-screen, so it shows no matter which of those two is currently [hidden]. */ .site-disclaimer { width: 100%; max-width: 880px; margin-top: 2rem; padding-top: 1rem; border-top: 1px solid var(--border); } .site-disclaimer p { margin: 0; font-size: 0.78rem; line-height: 1.5; color: var(--muted); } .disclaimer-link { display: inline; margin-left: 0.35rem; font: inherit; font-size: inherit; color: var(--muted); background: none; border: none; cursor: pointer; text-decoration: underline; padding: 0; } .disclaimer-link:hover { color: var(--text); } .form-success { background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--accent); border-radius: 8px; padding: 0.55rem 0.75rem; font-size: 0.83rem; margin-bottom: 0.9rem; } .modal-danger-zone { border-top: 1px solid var(--border); padding-top: 1.1rem; } .modal-danger-copy { font-size: 0.83rem; color: var(--muted); margin: 0 0 0.9rem; line-height: 1.5; } .btn-danger-outline { width: 100%; padding: 0.6rem; border-radius: 8px; border: 1px solid var(--error); background: var(--surface); color: var(--error); font-size: 0.88rem; font-weight: 600; font-family: inherit; cursor: pointer; } .btn-danger-outline:hover { background: color-mix(in srgb, var(--error) 8%, transparent); } .btn-danger { width: 100%; padding: 0.65rem; border-radius: 8px; border: none; background: var(--error); color: #fff; font-size: 0.9rem; font-weight: 700; font-family: inherit; cursor: pointer; } .btn-danger:hover { filter: brightness(1.05); } .btn-danger:disabled, .btn-danger-outline:disabled { opacity: 0.6; cursor: default; } .delete-confirm-block { margin-top: 0.9rem; } /* ---------- admin dashboard ---------- */ .admin-wrap { max-width: 1040px; } .admin-tabs { display: flex; gap: 0.5rem; margin-bottom: 1.25rem; border-bottom: 1px solid var(--border); } .admin-tab { padding: 0.6rem 0.9rem; border: none; background: none; color: var(--muted); font-family: inherit; font-size: 0.88rem; font-weight: 600; cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; } .admin-tab.active { color: var(--text); border-bottom-color: var(--accent); } .admin-card { border: 1px solid var(--border); border-radius: 14px; background: var(--surface); padding: 1.1rem 1.25rem; box-shadow: var(--shadow); margin-bottom: 1.25rem; } .admin-card h2 { font-family: "Fraunces", Georgia, serif; font-size: 1.05rem; font-weight: 600; margin: 0 0 0.9rem; } .admin-stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 0.75rem; margin-bottom: 1.25rem; } .admin-stat-card { border: 1px solid var(--border); border-radius: 12px; background: var(--surface); padding: 0.9rem 1rem; box-shadow: var(--shadow); } .admin-stat-value { font-family: "Fraunces", Georgia, serif; font-size: 1.6rem; font-weight: 600; color: var(--accent); } .admin-stat-label { font-size: 0.78rem; color: var(--muted); margin-top: 0.2rem; } .admin-signup-row { display: flex; justify-content: space-between; gap: 1rem; padding: 0.4rem 0; border-bottom: 1px solid var(--border); font-size: 0.88rem; } .admin-signup-row:last-child { border-bottom: none; } .admin-muted { color: var(--muted); font-size: 0.82rem; } .admin-table-wrap { overflow-x: auto; } .admin-table { width: 100%; border-collapse: collapse; font-size: 0.85rem; } .admin-table th { text-align: left; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); padding: 0.5rem 0.6rem; border-bottom: 1px solid var(--border); white-space: nowrap; } .admin-table td { padding: 0.55rem 0.6rem; border-bottom: 1px solid var(--border); vertical-align: middle; white-space: nowrap; } .admin-row-actions { display: flex; gap: 0.6rem; } .admin-link-btn { background: none; border: none; cursor: pointer; font-family: inherit; font-size: 0.82rem; color: var(--accent); text-decoration: underline; padding: 0; } .admin-link-btn-danger { color: var(--error); } .admin-badge { display: inline-block; font-size: 0.72rem; font-weight: 700; padding: 0.2rem 0.55rem; border-radius: 999px; } .admin-badge-ok { background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--accent); } .admin-badge-warn { background: color-mix(in srgb, var(--error) 14%, transparent); color: var(--error); } .admin-user-modal-card { max-width: 520px; } .admin-review-links { display: flex; flex-direction: column; gap: 0.3rem; align-items: flex-start; } .admin-review-link { background: none; border: none; cursor: pointer; font-family: inherit; font-size: 0.85rem; color: var(--accent); text-decoration: underline; padding: 0; } .admin-reviews-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.9rem; } .admin-reviews-head h2 { margin: 0; } .admin-review-card { border: 1px solid var(--border); border-radius: 10px; margin-bottom: 0.7rem; overflow: hidden; } .admin-review-card-head { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 0.7rem 0.9rem; background: var(--surface-sunken); border: none; cursor: pointer; font-family: inherit; font-size: 0.88rem; color: var(--text); text-align: left; } .admin-review-card-body { padding: 0.9rem; } .admin-prompt-head { display: flex; align-items: center; gap: 0.7rem; margin-bottom: 0.6rem; } .admin-prompt-head h2 { margin: 0; } .admin-prompt-textarea { width: 100%; min-height: 420px; padding: 0.9rem; border-radius: 10px; border: 1px solid var(--border); font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.82rem; line-height: 1.5; background: var(--surface-sunken); color: var(--text); resize: vertical; margin-bottom: 0.9rem; } .admin-prompt-actions { display: flex; gap: 0.75rem; } .admin-prompt-actions .btn-primary { width: auto; padding: 0.6rem 1.3rem; } .admin-prompt-actions .btn-danger-outline { width: auto; padding: 0.6rem 1.3rem; } /* ========================================================================== Family Chalkboard — page-level overrides. Everything above this point is unchanged "Held Steady" component CSS, still driven by the same named tokens. The pieces below are the small number of spots that assumed a specific light/dark relationship between two tokens (e.g. "--text is always dark, so it's safe to use as a background") which broke once --bg became a dark board color, plus new decorative pieces (background doodles, hanging-note string, binder clips) unique to this look. All of it is scoped under body.pwl-app so admin.html — which has no .pwl-app class — is completely unaffected. ========================================================================== */ body.pwl-app { font-family: "Rubik", system-ui, -apple-system, sans-serif; } body.pwl-app h1 { font-family: "Permanent Marker", cursive; font-weight: 400; color: var(--chalk); } body.pwl-app .eyebrow { color: var(--chalk-muted); } body.pwl-app .page-head p { color: var(--chalk-muted); } body.pwl-app .brand-wordmark { font-family: "Permanent Marker", cursive; } body.pwl-app .brand-parents { color: var(--chalk); font-weight: 400; } body.pwl-app .brand-with { font-family: "Rubik", sans-serif; } body.pwl-app #account-email, body.pwl-app .account-link, body.pwl-app .logout-link { color: var(--chalk-muted); } body.pwl-app .site-disclaimer { border-top-color: rgba(244, 241, 232, 0.2); } body.pwl-app .site-disclaimer p, body.pwl-app .disclaimer-link { color: var(--chalk-muted); } body.pwl-app .disclaimer-link:hover { color: var(--chalk); } /* the chat is the point of the page — give it more room and more visual weight than a plain bordered box */ body.pwl-app .wrap { max-width: 960px; } body.pwl-app .app-grid { grid-template-columns: minmax(0, 1fr) 240px; } body.pwl-app .chat-card { border: none; box-shadow: 0 22px 48px rgba(0, 0, 0, 0.32), 0 0 0 6px rgba(244, 201, 93, 0.1); } body.pwl-app .chat-log { min-height: 380px; font-size: 0.97rem; } body.pwl-app .chat-title { font-family: "Caveat", cursive; font-size: 1.35rem; font-weight: 700; } /* the chat header becomes a strip of the board itself, as if the notepad were clipped on top of it */ body.pwl-app .chat-header { background: var(--bg); color: var(--chalk); } body.pwl-app .voice-toggle { color: inherit; } /* .auth-tab.active used to flip --text/--bg as background/foreground; with --bg now a dark board color that pairing goes unreadable, so pin it to the same red-button look used everywhere else instead */ body.pwl-app .auth-tab.active { background: var(--accent); border-color: var(--accent); color: var(--accent-contrast); } /* binder clips, holding the login card and the chat card to the board */ body.pwl-app .auth-card, body.pwl-app .chat-card { position: relative; margin-top: 14px; } body.pwl-app .auth-card::before, body.pwl-app .auth-card::after, body.pwl-app .chat-card::before, body.pwl-app .chat-card::after { content: ""; position: absolute; top: -13px; width: 34px; height: 20px; background: linear-gradient(#c7c0b2, #9a9285); border-radius: 4px; box-shadow: 0 3px 5px rgba(0, 0, 0, 0.25); } body.pwl-app .auth-card::before, body.pwl-app .chat-card::before { left: 26px; transform: rotate(-6deg); } body.pwl-app .auth-card::after, body.pwl-app .chat-card::after { right: 26px; transform: rotate(5deg); } /* memory sidebar: chalk-dust texture instead of a tan corkboard */ body.pwl-app .memory-card { background: var(--honey-tint); background-image: radial-gradient(color-mix(in srgb, var(--chalk) 12%, transparent) 1px, transparent 1px); border: none; } body.pwl-app .memory-card h2 { font-family: "Caveat", cursive; font-size: 1.15rem; font-weight: 700; letter-spacing: 0; text-transform: none; color: var(--chalk); } body.pwl-app .memory-label { color: var(--chalk-muted); } body.pwl-app .memory-empty { color: var(--chalk-muted); } /* topics & notes hang from a drawn string instead of just floating in a list */ body.pwl-app .memory-section.hanging { position: relative; padding-top: 16px; margin-top: 6px; } body.pwl-app .memory-section.hanging::before { content: ""; position: absolute; top: 0; left: 0; right: 0; border-top: 2px dashed rgba(244, 241, 232, 0.35); } body.pwl-app .memory-section.hanging .pin-list { padding-top: 6px; } /* "See N more" toggle for topics/notes beyond the first 3 (app.js) */ body.pwl-app .memory-more-btn { display: block; margin: 8px auto 0; background: none; border: none; padding: 2px; font-family: "Caveat", cursive; font-size: 1.05rem; font-weight: 600; color: var(--honey); text-decoration: underline; text-decoration-style: dashed; text-underline-offset: 3px; cursor: pointer; } body.pwl-app .memory-more-btn:hover { color: var(--chalk); } body.pwl-app .modal-head h2, body.pwl-app .review-head h2 { font-family: "Caveat", cursive; font-weight: 700; } body.pwl-app .rate-session-link { font-family: "Caveat", cursive; font-size: 0.95rem; } body.pwl-app .review-score-big { font-family: "Caveat", cursive; } /* background doodles: purely decorative, fixed behind the page content. Hidden on narrow/mobile widths so they never crowd the actual content. */ .chalk-deco { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; } body.pwl-app .wrap, body.pwl-app .site-disclaimer { position: relative; z-index: 1; } .chalk-deco svg { position: absolute; opacity: 0.5; } .chalk-deco .star { width: 26px; height: 26px; animation: chalk-twinkle 3s ease-in-out infinite; } .chalk-deco .star-1 { top: 8%; left: 5%; animation-delay: 0.3s; } .chalk-deco .star-2 { top: 20%; right: 7%; width: 20px; height: 20px; animation-delay: 1.1s; } .chalk-deco .moon { width: 150px; height: 150px; bottom: 6%; right: 4%; opacity: 0.14; } .chalk-deco .plane { width: 110px; height: 110px; top: 42%; left: 4%; opacity: 0.14; } @keyframes chalk-twinkle { 0%, 100% { opacity: 0.35; transform: scale(1); } 50% { opacity: 0.8; transform: scale(1.12); } } @media (max-width: 640px) { .chalk-deco { display: none; } } @media (prefers-reduced-motion: reduce) { .chalk-deco .star { animation: none; } }