/* ===================================================================== Pathline — Learning Tracker · App styles Built on the Pathline design tokens (tokens.css). Light default + dark theme override + responsive shell. ===================================================================== */ *{ box-sizing:border-box; } html,body{ margin:0; padding:0; height:100%; } body{ font-family:var(--font-sans); color:var(--ink); background:var(--canvas); -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; } #root{ height:100vh; } button{ font-family:inherit; } ::selection{ background:rgba(30,143,240,0.22); } ::-webkit-scrollbar{ width:10px; height:10px; } ::-webkit-scrollbar-thumb{ background:var(--line-strong); border-radius:99px; border:3px solid transparent; background-clip:padding-box; } ::-webkit-scrollbar-track{ background:transparent; } /* ---------------------------------------------------------------- DYSLEXIA-FRIENDLY FONT */ /* OpenDyslexic — weighted-bottom glyphs that resist visually flipping/rotating. Loaded from the Fontsource CDN; falls back to Comic Sans / system if offline. */ @font-face{ font-family:'OpenDyslexic'; src:url('https://cdn.jsdelivr.net/npm/@fontsource/opendyslexic/files/opendyslexic-latin-400-normal.woff2') format('woff2'); font-weight:400; font-style:normal; font-display:swap; } @font-face{ font-family:'OpenDyslexic'; src:url('https://cdn.jsdelivr.net/npm/@fontsource/opendyslexic/files/opendyslexic-latin-700-normal.woff2') format('woff2'); font-weight:700; font-style:normal; font-display:swap; } /* Turning on “Dyslexia-friendly font” sets data-dyslexia="1" on . We remap every type token to OpenDyslexic and add the letter/word spacing the British Dyslexia Association recommends, without touching color, layout, or theme. */ [data-dyslexia="1"]{ --font-sans:'OpenDyslexic','Comic Sans MS',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; --display-font:'OpenDyslexic','Comic Sans MS',sans-serif; --font-logo:'OpenDyslexic','Comic Sans MS',sans-serif; --font-mono:'OpenDyslexic',ui-monospace,'SFMono-Regular',Menlo,monospace; --display-tracking:0em; --display-weight:700; } [data-dyslexia="1"] body{ letter-spacing:0.012em; word-spacing:0.06em; -webkit-font-smoothing:auto; } /* OpenDyslexic is wider/taller than the grotesque — relax leading a touch and drop the tight negative tracking on headings so nothing crowds or clips. */ [data-dyslexia="1"] body :where(p,li,.t-body,.t-lead,.desc,.vb-sub){ line-height:1.65; } [data-dyslexia="1"] body :where(h1,h2,h3,.t-display,.t-h1,.t-h2,.t-h3){ letter-spacing:0; } /* ---------------------------------------------------------------- DARK THEME */ /* ---------------------------------------------------------------- TEXT TOKENS */ /* Light: words on white read as black (keep --ink-4 faint for non-text UI). */ :root{ --ink:#15171E; --ink-2:#23262F; --ink-3:#474C57; } /* Dark: all words read as white. */ [data-theme="dark"]{ --ink:#FFFFFF; --ink-2:#FFFFFF; --ink-3:#FFFFFF; --ink-4:#8A909C; --paper:#1B1D27; --surface-2:#242732; --canvas:#111320; --canvas-2:#0C0E18; --line:rgba(255,255,255,0.10); --line-2:rgba(255,255,255,0.055); --line-strong:rgba(255,255,255,0.18); --sky:#13263C; --shadow-sm:0 1px 2px rgba(0,0,0,0.4); --shadow-md:0 4px 14px rgba(0,0,0,0.45); --shadow-lg:0 18px 48px rgba(0,0,0,0.55); --shadow-card:0 24px 60px rgba(0,0,0,0.6); } /* ===================================================================== SHELL */ .app{ display:flex; height:100vh; overflow:hidden; background:var(--canvas); } .sidebar{ width:248px; flex:none; background:var(--paper); border-right:1px solid var(--line); display:flex; flex-direction:column; padding:18px 14px; gap:4px; z-index:30; } .sidebar .brand{ padding:6px 8px 18px; } .nav{ display:flex; flex-direction:column; gap:3px; } .nav-item{ display:flex; align-items:center; gap:12px; padding:10px 11px; border-radius:var(--r-sm); border:none; cursor:pointer; background:transparent; text-align:left; width:100%; font-size:14.5px; font-weight:500; color:var(--ink-2); transition:background .14s, color .14s; } .nav-item:hover{ background:var(--surface-2); color:var(--ink); } .nav-item.on{ background:var(--surface-2); color:var(--ink); font-weight:600; } .nav-item.on .nav-ico{ color:var(--blue-ink); } .nav-ico{ color:var(--ink-3); flex:none; } .nav-item .count{ margin-left:auto; font-family:var(--font-mono); font-size:11px; font-weight:600; color:var(--ink-3); background:var(--surface-2); border:1px solid var(--line); border-radius:999px; padding:1px 8px; } .nav-item.on .count{ background:var(--sky); color:var(--blue-ink); border-color:transparent; } .sidebar .grow{ flex:1; } .workspace{ margin-top:8px; padding:10px; border-radius:var(--r-md); background:var(--surface-2); display:flex; align-items:center; gap:10px; cursor:pointer; } .workspace .ava{ width:32px;height:32px;border-radius:9px; background:var(--blue); color:#fff; display:flex;align-items:center;justify-content:center; font-size:13px; font-weight:600; flex:none; } /* dark mode: the workspace switcher avatar initial reads as dark grey on the lighter accent */ [data-theme="dark"] .workspace .ava{ color:#1B1D27; } /* main column */ .main{ flex:1; display:flex; flex-direction:column; min-width:0; height:100vh; } .topbar{ display:flex; align-items:center; gap:14px; padding:14px 26px; flex:none; border-bottom:1px solid var(--line); background:color-mix(in srgb, var(--paper) 82%, transparent); backdrop-filter:blur(12px); position:sticky; top:0; z-index:20; } .topbar .page-title{ font-size:19px; font-weight:600; letter-spacing:-0.02em; margin:0; white-space:nowrap; } .searchbox{ display:flex; align-items:center; gap:9px; border:1px solid var(--line-strong); border-radius:var(--r-pill); padding:8px 14px; background:var(--paper); flex:1; max-width:420px; color:var(--ink-3); } .searchbox input{ border:none; outline:none; background:transparent; font-family:var(--font-sans); font-size:14px; width:100%; color:var(--ink); } .searchbox kbd{ font-family:var(--font-mono); font-size:10.5px; color:var(--ink-3); border:1px solid var(--line); border-radius:5px; padding:1px 5px; background:var(--surface-2); } .topbar .spacer{ flex:1; } .icon-btn{ width:38px; height:38px; flex:none; border-radius:var(--r-sm); border:1px solid var(--line-strong); background:var(--paper); cursor:pointer; display:flex; align-items:center; justify-content:center; color:var(--ink-2); position:relative; transition:background .14s, border-color .14s; } .icon-btn:hover{ background:var(--surface-2); } .icon-btn.active{ background:var(--surface-2); border-color:var(--line-strong); } .icon-btn.primary{ background:var(--blue); color:#fff; border-color:var(--blue); } .icon-btn.primary:hover{ background:var(--blue-ink); } .icon-btn .badge{ position:absolute; top:-5px; right:-5px; min-width:17px; height:17px; padding:0 4px; background:var(--critical); color:#fff; border-radius:999px; font-family:var(--font-mono); font-size:10px; font-weight:600; display:flex; align-items:center; justify-content:center; border:2px solid var(--paper); } /* Topic card hover actions */ .topic-card .tc-act{ opacity:0; transform:translateY(-1px); transition:opacity .14s, background .14s, color .14s; } .topic-card:hover .tc-act, .topic-card:focus-within .tc-act{ opacity:1; } .topic-card .tc-arrow{ transition:opacity .14s; } .topic-card:hover .tc-arrow{ opacity:0; position:absolute; pointer-events:none; } .topic-card .tc-del:hover{ color:var(--critical); border-color:transparent; background:color-mix(in srgb,var(--critical) 12%, var(--paper)); } /* Material card hover delete */ .material-card .mc-del{ opacity:0; transform:translateY(-1px); transition:opacity .14s, background .14s, color .14s; background:color-mix(in srgb,var(--paper) 78%, transparent); backdrop-filter:blur(3px); } .material-card:hover .mc-del, .material-card:focus-within .mc-del{ opacity:1; } .material-card .mc-del:hover{ color:var(--critical); background:color-mix(in srgb,var(--critical) 14%, var(--paper)); } .avatar{ width:38px; height:38px; border-radius:999px; background:var(--blue); color:#fff; flex:none; display:flex; align-items:center; justify-content:center; font-size:14px; font-weight:600; cursor:pointer; border:none; } .content{ flex:1; overflow-y:auto; } .content-pad{ max-width:1180px; margin:0 auto; padding:30px 30px 120px; } .content-pad.wide{ max-width:1320px; } /* page header */ .page-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:18px; margin-bottom:24px; flex-wrap:wrap; } .page-head .eyebrow{ font-family:var(--font-mono); font-size:11.5px; letter-spacing:0.05em; text-transform:uppercase; color:var(--ink-3); margin:0 0 8px; } .page-head h1{ font-size:clamp(26px,3vw,34px); font-weight:600; letter-spacing:-0.025em; margin:0; line-height:1.05; } .page-head .sub{ font-size:14.5px; color:var(--ink-2); margin:7px 0 0; } /* Ask Rocky header — keep the mascot pinned to the RIGHT, beside the heading, even on iPad/phone (where .page-head would otherwise wrap it below-left). */ .rocky-head{ flex-wrap:nowrap; align-items:flex-start; } .rocky-head-text{ min-width:0; } .rocky-hero{ margin-left:auto; } @media (max-width:1000px){ .rocky-head{ flex-wrap:nowrap; } .rocky-hero{ margin-left:auto; align-self:flex-start; } .rocky-hero img{ width:152px !important; height:152px !important; margin:-12px 0 -44px 0 !important; } } @media (max-width:560px){ .rocky-hero img{ width:118px !important; height:118px !important; margin:-6px 0 -30px 0 !important; } } /* ===================================================================== MOBILE NAV */ .mobile-topbar{ display:none; } .mobile-nav{ display:none; } /* ===================================================================== CARDS */ .card{ background:var(--paper); border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--shadow-sm); } /* buttons styled as cards must inherit theme text color (UA default would force black) */ button.card{ color:var(--ink); } button.lrow{ color:var(--ink); } .card.pad{ padding:20px; } .card.tight{ padding:16px; } .card.hover{ transition:transform .16s ease, box-shadow .16s ease, border-color .16s; cursor:pointer; } .card.hover:hover{ transform:translateY(-3px); box-shadow:var(--shadow-md); border-color:var(--line-strong); } .section-title{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:14px; } .section-title h2{ font-size:16px; font-weight:600; letter-spacing:-0.01em; margin:0; display:flex; align-items:center; gap:9px; } .count-pill{ font-family:var(--font-mono); font-size:11px; font-weight:600; color:var(--ink-3); border:1px solid var(--line); border-radius:999px; padding:1px 8px; } /* grids */ .grid{ display:grid; gap:18px; } .cards-2{ grid-template-columns:repeat(2,1fr); } .cards-3{ grid-template-columns:repeat(3,1fr); } .cards-4{ grid-template-columns:repeat(4,1fr); } .col-main{ display:grid; grid-template-columns:1.55fr 1fr; gap:20px; align-items:start; } .col-split{ display:grid; grid-template-columns:1fr 1.15fr; gap:20px; align-items:start; } /* ===================================================================== BUTTONS */ .btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; cursor:pointer; font-family:var(--font-sans); font-size:14px; font-weight:600; letter-spacing:-0.01em; border-radius:var(--r-sm); padding:9px 15px; border:1px solid var(--line-strong); background:var(--paper); color:var(--ink); transition:transform .1s ease, background .14s, border-color .14s, box-shadow .14s; white-space:nowrap; } .btn:hover{ background:var(--surface-2); } .btn:active{ transform:scale(.975); } .btn.primary{ background:var(--blue); color:#fff; border-color:var(--blue); } .btn.primary:hover{ background:var(--blue-ink); } .btn.blue{ background:var(--blue); color:#fff; border-color:var(--blue); } .btn.blue:hover{ background:var(--blue-ink); } /* Dark mode: accent fills are bright, so their label text/icon is dark grey for contrast */ [data-theme="dark"] .btn.primary, [data-theme="dark"] .btn.blue, [data-theme="dark"] .icon-btn.primary, [data-theme="dark"] .chip.on, [data-theme="dark"] .theme-seg button.on, [data-theme="dark"] .map-legend.in-stage .li.on{ color:#20232C; } .btn.ghost{ border-color:transparent; background:transparent; } .btn.ghost:hover{ background:var(--surface-2); } .btn.sm{ padding:6px 11px; font-size:13px; } .btn.lg{ padding:12px 20px; font-size:15px; } .btn.block{ width:100%; } .btn:disabled{ opacity:.5; cursor:default; } /* pills / chips / tags */ .chip{ display:inline-flex; align-items:center; gap:6px; font-size:13px; font-weight:500; color:var(--ink-2); border:1px solid var(--line-strong); border-radius:var(--r-pill); padding:5px 13px; background:var(--paper); cursor:pointer; transition:background .14s, color .14s, border-color .14s; } .chip:hover{ background:var(--surface-2); } .chip.on{ background:var(--ink); color:var(--paper); border-color:var(--ink); } [data-theme="dark"] .chip.on{ background:var(--blue); border-color:var(--blue); color:#20232C; } .tag{ display:inline-flex; align-items:center; gap:6px; font-size:11.5px; font-weight:600; border-radius:999px; padding:3px 10px; white-space:nowrap; } .tag .dot{ width:7px; height:7px; border-radius:99px; } /* segmented control */ .segmented{ display:inline-flex; background:var(--surface-2); border:1px solid var(--line); border-radius:var(--r-pill); padding:3px; gap:2px; } .segmented button{ border:none; background:transparent; cursor:pointer; font-family:var(--font-sans); font-size:13px; font-weight:600; color:var(--ink-2); padding:7px 15px; border-radius:var(--r-pill); transition:all .14s; white-space:nowrap; } .segmented button.on{ background:var(--paper); color:var(--ink); box-shadow:var(--shadow-sm); } /* progress */ .progress{ height:8px; border-radius:999px; background:var(--surface-2); overflow:hidden; border:1px solid var(--line-2); } .progress > i{ display:block; height:100%; border-radius:999px; background:var(--blue); transition:width .6s cubic-bezier(.22,1,.36,1); } .progress.lg{ height:11px; } /* mono meta */ .mono{ font-family:var(--font-mono); font-variant-numeric:tabular-nums; } .muted{ color:var(--ink-2); } .faint{ color:var(--ink-3); } /* list rows */ .lrow{ display:flex; align-items:center; gap:13px; padding:13px 0; border-bottom:1px solid var(--line-2); } .lrow:last-child{ border-bottom:none; } .lrow .thumb{ width:46px; height:46px; flex:none; border-radius:var(--r-sm); display:flex; align-items:center; justify-content:center; } /* generic icon tile */ .itile{ width:36px; height:36px; border-radius:10px; display:flex; align-items:center; justify-content:center; flex:none; } /* ===================================================================== STREAK */ .streak{ display:flex; align-items:center; gap:14px; padding:14px 18px; border-radius:var(--r-lg); background:linear-gradient(100deg, var(--sky), color-mix(in srgb, var(--paper) 70%, var(--sky))); border:1px solid var(--line); position:relative; overflow:hidden; } [data-theme="dark"] .streak{ background:linear-gradient(100deg, var(--sky), var(--surface-2)); } .streak .flame{ width:46px; height:46px; border-radius:12px; background:var(--paper); border:1px solid var(--line); display:flex; align-items:center; justify-content:center; flex:none; color:var(--warning); } .streak .x{ position:absolute; top:10px; right:10px; width:26px; height:26px; border-radius:7px; border:none; background:transparent; color:var(--ink-3); cursor:pointer; display:flex; align-items:center; justify-content:center; } .streak .x:hover{ background:rgba(0,0,0,.05); color:var(--ink); } /* ===================================================================== MIND MAP */ .map-stage{ position:relative; width:100%; aspect-ratio:16/9; max-height:1100px; border-radius:var(--r-xl); background:radial-gradient(circle at 50% 46%, color-mix(in srgb,var(--blue) 7%, var(--paper)), var(--paper) 62%); border:1px solid var(--line); box-shadow:var(--shadow-sm); overflow:hidden; resize:both; min-height:340px; min-width:420px; } .map-stage::after{ content:''; position:absolute; right:5px; bottom:5px; width:13px; height:13px; pointer-events:none; opacity:.55; background:repeating-linear-gradient(135deg, var(--ink-4) 0 1.5px, transparent 1.5px 4px); border-radius:2px; } .map-stage .field{ position:absolute; inset:0; pointer-events:none; } .map-lines{ position:absolute; inset:0; width:100%; height:100%; } .map-node{ position:absolute; transform:translate(-50%,-50%); cursor:pointer; } .mn-center{ width:clamp(110px,13vw,168px); aspect-ratio:1; border-radius:50%; background:var(--ink); color:var(--paper); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px; text-align:center; box-shadow:var(--shadow-lg); border:3px solid var(--paper); } [data-theme="dark"] .mn-center{ border-color:var(--canvas-2); } .mn-center .nm{ font-weight:600; font-size:clamp(13px,1.5vw,18px); letter-spacing:-0.02em; } .mn-center .mt{ font-family:var(--font-mono); font-size:10.5px; color:rgba(255,255,255,.7); } .mn-domain{ background:var(--paper); border:1.5px solid var(--ink); border-radius:var(--r-md); padding:10px 13px; min-width:128px; box-shadow:var(--shadow-md); transition:transform .16s, box-shadow .16s; } .mn-domain:hover{ transform:translate(-50%,-50%) scale(1.05); box-shadow:var(--shadow-lg); } .mn-domain .nm{ font-weight:600; font-size:14px; display:flex; align-items:center; gap:8px; letter-spacing:-0.01em; } .mn-domain .accent{ width:10px; height:10px; border-radius:99px; flex:none; } .mn-domain .mt{ font-family:var(--font-mono); font-size:10.5px; color:var(--ink-3); margin-top:7px; } .mn-domain .progress{ margin-top:7px; height:6px; } .mn-leaf{ background:var(--surface-2); border:1px solid var(--line-strong); border-radius:var(--r-pill); padding:5px 12px; font-size:12.5px; font-weight:500; color:var(--ink-2); white-space:nowrap; display:flex; align-items:center; gap:7px; box-shadow:var(--shadow-sm); transition:transform .16s; } .mn-leaf:hover{ transform:translate(-50%,-50%) scale(1.06); color:var(--ink); } .mn-leaf .accent{ width:7px; height:7px; border-radius:99px; flex:none; } .map-legend{ display:flex; gap:20px; flex-wrap:wrap; margin-top:16px; align-items:center; } .map-legend .li{ display:flex; align-items:center; gap:8px; font-size:12.5px; color:var(--ink-3); } .map-legend .sw{ width:14px; height:14px; border-radius:5px; border:1.5px solid var(--ink); } .map-legend .sw.circle{ border-radius:99px; background:var(--ink); } .map-legend .sw.leaf{ border-radius:99px; background:var(--surface-2); border-color:var(--line-strong); } /* domain list (mobile fallback for map) */ .map-list{ display:none; } /* ===================================================================== FLASHCARD / REVIEW */ .review-wrap{ max-width:760px; margin:0 auto; } .flashcard{ position:relative; width:100%; min-height:380px; perspective:1600px; cursor:pointer; } .fc-face{ position:relative; width:100%; min-height:380px; transform-origin:center; background:var(--paper); border:1px solid var(--line); border-radius:var(--r-xl); box-shadow:var(--shadow-md); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:18px; padding:46px 40px; text-align:center; animation:flipIn .34s cubic-bezier(.22,1,.36,1); } @keyframes flipIn{ from{ transform:rotateY(-34deg) scale(.985); } to{ transform:rotateY(0) scale(1); } } /* voice assistance bar */ .voice-bar{ display:flex; align-items:center; gap:12px; padding:11px 14px; border-radius:var(--r-md); border:1px solid var(--line); background:var(--sky); margin-bottom:16px; } [data-theme="dark"] .voice-bar{ background:var(--surface-2); } .voice-bar .mic{ width:34px; height:34px; border-radius:50%; display:flex; align-items:center; justify-content:center; background:var(--paper); color:var(--blue-ink); border:1px solid var(--line); flex:none; } .voice-bar .mic.on{ animation:micpulse 1.5s ease-in-out infinite; color:#fff; background:var(--blue); border-color:var(--blue); } @keyframes micpulse{ 0%,100%{ box-shadow:0 0 0 0 rgba(30,143,240,.45); } 50%{ box-shadow:0 0 0 8px rgba(30,143,240,0); } } .voice-bar .vb-title{ font-size:13.5px; font-weight:600; } .voice-bar .vb-sub{ font-size:12px; color:var(--ink-3); margin-top:1px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } /* flagged state — light orange (light) / yellow (dark), white label + icon */ .btn.act:active{ background:#E8924A; border-color:#E8924A; color:#fff; } .btn.act:active svg{ color:#fff; } [data-theme="dark"] .btn.act:active{ background:#EE9544; border-color:#EE9544; } .btn.flag-on{ background:#E8924A; border-color:#E8924A; color:#fff; } .btn.flag-on:hover{ background:#E0853B; } [data-theme="dark"] .btn.flag-on{ background:#EE9544; border-color:#EE9544; color:#fff; } [data-theme="dark"] .btn.flag-on:hover{ background:#E5862F; } .fc-face .ftag{ position:absolute; top:18px; left:22px; font-family:var(--font-mono); font-size:10.5px; letter-spacing:0.05em; text-transform:uppercase; color:var(--ink-3); } .fc-face .flip-hint{ position:absolute; bottom:18px; font-size:12px; color:var(--ink-3); display:flex; align-items:center; gap:6px; } .fc-face .q{ font-size:clamp(20px,2.6vw,28px); font-weight:600; letter-spacing:-0.02em; line-height:1.25; max-width:90%; } .fc-face .a{ font-size:clamp(16px,2vw,20px); font-weight:400; color:var(--ink); line-height:1.5; max-width:92%; } .fc-face .label{ font-family:var(--font-mono); font-size:11px; color:var(--blue-ink); text-transform:uppercase; letter-spacing:.05em; } .rate-row{ display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin-top:18px; } .rate{ display:flex; flex-direction:column; align-items:center; gap:3px; padding:13px 8px; border-radius:var(--r-md); border:1px solid var(--line-strong); background:var(--paper); cursor:pointer; transition:transform .1s, background .14s, border-color .14s; } .rate:hover{ background:var(--surface-2); transform:translateY(-2px); } .rate:active{ transform:scale(.97); } .rate .lab{ font-size:14px; font-weight:600; } .rate .iv{ font-family:var(--font-mono); font-size:11px; color:var(--ink-3); } .rate.again{ border-color:color-mix(in srgb,var(--critical) 40%, var(--line-strong)); } .rate.again .lab{ color:var(--critical); } .rate.hard .lab{ color:var(--warning); } .rate.good .lab{ color:var(--blue-ink); } .rate.easy .lab{ color:var(--positive); } .deckbar{ display:flex; align-items:center; gap:14px; margin-bottom:18px; } .seg-dots{ display:flex; gap:5px; } .seg-dots i{ width:18px; height:5px; border-radius:99px; background:var(--line-strong); } .seg-dots i.done{ background:var(--positive); } .seg-dots i.cur{ background:var(--blue); } /* ===================================================================== SETTINGS */ .settings-grid{ display:grid; grid-template-columns:230px 1fr; gap:26px; align-items:start; } .settings-menu{ display:flex; flex-direction:column; gap:2px; position:sticky; top:18px; } .set-item{ display:flex; align-items:center; gap:11px; padding:9px 12px; border-radius:var(--r-sm); border:none; background:transparent; cursor:pointer; text-align:left; font-size:14px; font-weight:500; color:var(--ink-2); transition:background .14s; } .set-item:hover{ background:var(--surface-2); } .set-item.on{ background:var(--surface-2); color:var(--ink); font-weight:600; } .set-row{ display:flex; align-items:center; justify-content:space-between; gap:18px; padding:18px 0; border-bottom:1px solid var(--line-2); } .set-row:last-child{ border-bottom:none; } .set-row .label{ font-size:14.5px; font-weight:600; } .set-row .desc{ font-size:13px; color:var(--ink-2); margin-top:3px; max-width:46ch; } /* toggle switch */ .switch{ width:46px; height:27px; border-radius:999px; background:var(--line-strong); border:none; cursor:pointer; position:relative; flex:none; transition:background .18s; } .switch.on{ background:var(--blue); } .switch::after{ content:''; position:absolute; top:3px; left:3px; width:21px; height:21px; border-radius:99px; background:#fff; transition:transform .18s cubic-bezier(.22,1,.36,1); box-shadow:0 1px 3px rgba(0,0,0,.3); } .switch.on::after{ transform:translateX(19px); } /* theme 3-way */ .theme-seg{ display:inline-flex; border:1px solid var(--line-strong); border-radius:var(--r-pill); overflow:hidden; } .theme-seg button{ border:none; background:var(--paper); cursor:pointer; font-family:var(--font-sans); font-size:13px; font-weight:600; color:var(--ink-2); padding:8px 16px; display:flex; align-items:center; gap:7px; border-right:1px solid var(--line); } .theme-seg button:last-child{ border-right:none; } .theme-seg button.on{ background:var(--blue); color:#fff; } /* connection row */ .conn-row{ display:flex; align-items:center; gap:14px; padding:16px; border:1px solid var(--line); border-radius:var(--r-md); background:var(--surface-2); } .conn-logo{ width:42px; height:42px; border-radius:10px; background:#fff; border:1px solid var(--line); color:#181A24; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:18px; flex:none; } /* ===================================================================== MODAL */ .scrim{ position:fixed; inset:0; background:rgba(12,14,24,0.5); backdrop-filter:blur(4px); z-index:100; display:flex; align-items:flex-start; justify-content:center; padding:80px 20px; animation:fade .18s ease; } .modal{ width:100%; max-width:540px; background:var(--paper); border:1px solid var(--line); border-radius:var(--r-xl); box-shadow:var(--shadow-card); animation:pop .24s cubic-bezier(.22,1,.36,1); overflow:hidden; } .modal .mhead{ display:flex; align-items:center; justify-content:space-between; padding:18px 22px; border-bottom:1px solid var(--line); } .modal .mbody{ padding:22px; } .modal .mfoot{ display:flex; justify-content:flex-end; gap:10px; padding:16px 22px; border-top:1px solid var(--line); background:var(--surface-2); } .field-label{ font-size:12.5px; font-weight:600; color:var(--ink-2); margin-bottom:7px; display:block; } .input, .textarea{ width:100%; border:1px solid var(--line-strong); border-radius:var(--r-sm); padding:11px 13px; font-family:var(--font-sans); font-size:14.5px; background:var(--paper); color:var(--ink); outline:none; transition:border-color .14s, box-shadow .14s; } .input:focus, .textarea:focus{ border-color:var(--blue); box-shadow:0 0 0 3px rgba(30,143,240,.16); } .textarea{ resize:none; line-height:1.5; } /* dropdown menu (avatar/notifications) */ .menu{ position:absolute; top:52px; right:0; min-width:230px; background:var(--paper); border:1px solid var(--line); border-radius:var(--r-md); box-shadow:var(--shadow-lg); padding:7px; z-index:60; animation:pop .16s ease; } .menu .mi{ display:flex; align-items:center; gap:11px; padding:9px 11px; border-radius:var(--r-sm); cursor:pointer; font-size:14px; color:var(--ink); border:none; background:transparent; width:100%; text-align:left; } .menu .mi:hover{ background:var(--surface-2); } .menu .sep{ height:1px; background:var(--line); margin:6px 4px; } .menu .mh{ padding:8px 11px 4px; font-family:var(--font-mono); font-size:10.5px; letter-spacing:.05em; text-transform:uppercase; color:var(--ink-3); } .notif{ display:flex; gap:11px; padding:11px; border-radius:var(--r-sm); width:100%; text-align:left; border:none; background:transparent; cursor:pointer; font:inherit; color:inherit; } .notif:hover{ background:var(--surface-2); } .notif .ndot{ width:8px; height:8px; border-radius:99px; margin-top:5px; flex:none; } /* generating shimmer */ .gen-skel{ height:14px; border-radius:6px; background:linear-gradient(90deg,var(--surface-2) 25%,var(--line) 37%,var(--surface-2) 63%); background-size:400% 100%; animation:shimmer 1.3s linear infinite; } /* toast */ .toast{ position:fixed; bottom:26px; left:50%; transform:translateX(-50%); z-index:200; background:var(--ink); color:var(--paper); padding:12px 20px; border-radius:var(--r-pill); box-shadow:var(--shadow-lg); font-size:14px; font-weight:500; display:flex; align-items:center; gap:10px; animation:toastin .3s cubic-bezier(.22,1,.36,1); } [data-theme="dark"] .toast{ background:var(--surface-2); border:1px solid var(--line); color:var(--ink); } /* Progress over time (your past vs now) — reused proportional bars */ .cmp-track{ flex:1; height:9px; border-radius:99px; background:var(--surface-2); overflow:hidden; } .cmp-track.sm{ height:7px; } .cmp-track > i{ display:block; height:100%; border-radius:99px; transition:width .6s cubic-bezier(.22,1,.36,1); } .pg-tag{ font-size:10px; text-transform:uppercase; letter-spacing:.05em; font-weight:700; width:34px; flex:none; } .pg-delta{ display:inline-flex; align-items:center; gap:4px; font-family:var(--font-mono); font-weight:700; font-size:11.5px; color:var(--positive); background:color-mix(in srgb,var(--positive) 13%, var(--paper)); border-radius:var(--r-pill); padding:2px 9px; } .pg-delta.sm{ font-size:11px; padding:1px 7px; } .pg-delta.lg{ font-size:13px; padding:4px 12px; } /* Centered capture confirmation */ .capture-confirm{ position:fixed; inset:0; z-index:240; display:flex; align-items:center; justify-content:center; pointer-events:none; } .capture-confirm .cc-card{ display:flex; flex-direction:column; align-items:center; gap:6px; text-align:center; background:var(--paper); color:var(--ink); border:1px solid var(--line); border-radius:var(--r-lg); padding:26px 38px 24px; box-shadow:var(--shadow-lg); animation:ccPop .34s cubic-bezier(.22,1,.36,1) both, ccOut .42s ease-in 1.72s forwards; } .capture-confirm .cc-ic{ width:54px; height:54px; border-radius:50%; display:grid; place-items:center; margin-bottom:6px; background:color-mix(in srgb, var(--positive) 16%, var(--paper)); color:var(--positive); animation:ccCheck .5s cubic-bezier(.22,1.4,.36,1) both .08s; } .capture-confirm .cc-title{ font-size:16px; font-weight:700; } .capture-confirm .cc-sub{ font-size:13px; color:var(--ink-3); } @keyframes ccPop{ from{ opacity:0; transform:scale(.92) translateY(8px); } to{ opacity:1; transform:none; } } @keyframes ccOut{ to{ opacity:0; transform:scale(.97); } } @keyframes ccCheck{ from{ transform:scale(.5); opacity:0; } to{ transform:scale(1); opacity:1; } } /* One-time light-up of the Ideas nav item after a capture */ @keyframes navFlash{ 0%{ box-shadow:0 0 0 0 color-mix(in srgb, var(--blue) 50%, transparent); } 35%{ box-shadow:0 0 0 5px color-mix(in srgb, var(--blue) 26%, transparent); background:color-mix(in srgb, var(--blue) 16%, transparent); } 100%{ box-shadow:0 0 0 0 transparent; } } .rail-btn.nav-flash, .nav-item.nav-flash{ animation:navFlash 1s ease-out 1; color:var(--blue-ink); } .rail-btn.nav-flash svg, .nav-item.nav-flash svg{ animation:navIcoFlash 1s ease-out 1; } @keyframes navIcoFlash{ 0%,100%{ transform:none; } 35%{ transform:scale(1.18); } } @media (prefers-reduced-motion: reduce){ .capture-confirm .cc-card, .capture-confirm .cc-ic, .rail-btn.nav-flash, .nav-item.nav-flash, .rail-btn.nav-flash svg, .nav-item.nav-flash svg{ animation:none; } .capture-confirm .cc-card{ opacity:1; } } /* Dark mode: make all neutral text white on the topics page (accents keep their color) */ [data-theme="dark"] .topics-page{ --ink-2:#FFFFFF; --ink-3:#FFFFFF; --ink-4:#FFFFFF; } /* global search results panel */ .search-panel{ position:absolute; top:calc(100% + 8px); left:0; right:0; background:var(--paper); border:1px solid var(--line); border-radius:var(--r-md); box-shadow:var(--shadow-lg); z-index:60; padding:7px; max-height:64vh; overflow-y:auto; animation:pop .14s ease; } .search-empty{ padding:18px 14px; text-align:center; color:var(--ink-3); font-size:13.5px; } .search-item{ display:flex; align-items:center; gap:11px; width:100%; text-align:left; border:none; background:transparent; cursor:pointer; padding:9px 10px; border-radius:var(--r-sm); color:var(--ink); } .search-item:hover{ background:var(--surface-2); } .si-text{ flex:1; min-width:0; display:flex; flex-direction:column; } .si-title{ font-size:14px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .si-sub{ font-size:11.5px; color:var(--ink-3); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } /* learning-map legend filter (inside the stage) */ .map-legend.in-stage{ position:static; display:inline-flex; gap:6px; flex-wrap:wrap; margin:0 0 12px; background:var(--surface-2); border:1px solid var(--line); border-radius:var(--r-pill); padding:5px 7px; box-shadow:var(--shadow-sm); } .map-legend.in-stage .li{ border:none; background:transparent; cursor:pointer; font:inherit; color:#9AA0A8; padding:5px 11px; border-radius:var(--r-pill); transition:background .14s, color .14s; } .map-legend.in-stage .li:hover{ background:var(--surface-2); color:var(--ink-2); } .map-legend.in-stage .li.on{ background:var(--blue); color:#fff; font-weight:600; } /* time-layer switcher above the map */ .map-layers{ display:flex; align-items:center; flex-wrap:wrap; gap:10px 14px; margin-bottom:12px; } .map-layers .segmented button{ display:inline-flex; align-items:center; gap:7px; } .map-layers .layer-n{ font-family:var(--font-mono); font-size:10.5px; font-weight:600; color:var(--ink-3); background:color-mix(in srgb,var(--ink) 7%, transparent); border-radius:99px; padding:1px 6px; min-width:18px; text-align:center; } .map-layers .segmented button.on .layer-n{ color:var(--ink); background:color-mix(in srgb,var(--ink) 11%, transparent); } .map-layers .layer-dot{ width:7px; height:7px; border-radius:99px; background:var(--positive); flex:none; } .new-strip{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; min-width:0; } .new-strip-label{ display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:600; color:var(--positive); white-space:nowrap; } .new-strip-chips{ display:flex; flex-wrap:wrap; gap:6px; } .new-chip{ display:inline-flex; align-items:center; gap:6px; font:inherit; font-size:12px; font-weight:500; color:var(--ink-2); cursor:pointer; background:var(--paper); border:1px solid var(--line); border-radius:var(--r-pill); padding:4px 10px; transition:border-color .14s, background .14s; } .new-chip:hover{ border-color:var(--positive); background:color-mix(in srgb,var(--positive) 8%, var(--paper)); } .new-chip .accent{ width:7px; height:7px; border-radius:99px; flex:none; } /* new-this-month topic node: green ring + corner tag */ .mn-leaf.is-new{ border-color:color-mix(in srgb,var(--positive) 55%, var(--line-strong)); box-shadow:0 0 0 3px color-mix(in srgb,var(--positive) 16%, transparent), var(--shadow-sm); } .mn-leaf .new-tag{ font-family:var(--font-mono); font-size:8.5px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:#fff; background:var(--positive); border-radius:99px; padding:1px 5px; margin-left:1px; } /* ===================================================================== MASTERY PANEL */ .mastery-pct{ font-family:var(--font-mono); font-size:18px; font-weight:700; letter-spacing:-0.01em; color:var(--blue-ink); } .mastery-track{ position:relative; height:9px; border-radius:99px; background:color-mix(in srgb,var(--ink) 9%, transparent); overflow:visible; margin:10px 0 7px; } .mastery-track > i{ display:block; height:100%; border-radius:99px; background:linear-gradient(90deg,var(--blue),color-mix(in srgb,var(--positive) 70%, var(--blue))); transition:width .5s cubic-bezier(.22,1,.36,1); } .mastery-track .mastery-gate{ position:absolute; top:-3px; width:2px; height:15px; background:var(--paper); box-shadow:0 0 0 1px color-mix(in srgb,var(--ink) 22%, transparent); border-radius:2px; transform:translateX(-1px); } .mastery-cap{ font-size:11px; color:var(--ink-3); margin-bottom:14px; } .mastery-steps{ display:flex; flex-direction:column; gap:8px; } .mastery-step{ display:flex; align-items:center; gap:12px; padding:11px 13px; border-radius:var(--r-md); border:1px solid var(--line); background:var(--surface-2); } .mastery-step.done{ border-color:color-mix(in srgb,var(--positive) 38%, var(--line)); background:color-mix(in srgb,var(--positive) 7%, var(--paper)); } .mastery-step.locked{ opacity:.62; } .mastery-step .ms-check{ width:28px; height:28px; border-radius:8px; flex:none; display:flex; align-items:center; justify-content:center; background:var(--paper); border:1px solid var(--line-strong); color:var(--ink-3); } .mastery-step.done .ms-check{ background:var(--positive); border-color:var(--positive); color:#fff; } .mastery-step .ms-label{ font-size:13.5px; font-weight:600; color:var(--ink); display:flex; align-items:center; gap:8px; } .mastery-step .ms-frac{ font-family:var(--font-mono); font-size:10.5px; font-weight:600; color:var(--blue-ink); background:color-mix(in srgb,var(--blue) 11%, transparent); border-radius:99px; padding:1px 7px; } .mastery-step.done .ms-frac{ color:var(--positive); background:color-mix(in srgb,var(--positive) 13%, transparent); } .mastery-step .ms-hint{ font-size:11.5px; color:var(--ink-3); margin-top:2px; } .mastery-step .ms-weight{ font-family:var(--font-mono); font-size:11px; font-weight:600; color:var(--ink-3); flex:none; } .mastery-step .ms-actiondone{ width:28px; height:28px; border-radius:99px; flex:none; display:flex; align-items:center; justify-content:center; color:var(--positive); } /* nav widget — draggable floating navigation (replaces the sidebar) */ .nav-rail{ position:fixed; left:0; top:0; bottom:0; width:60px; z-index:110; background:var(--paper); border-right:1px solid var(--line); display:flex; flex-direction:column; align-items:center; gap:6px; padding:14px 0; box-shadow:var(--shadow-md); } .rail-btn{ width:42px; height:42px; border-radius:var(--r-sm); border:none; background:transparent; cursor:pointer; color:var(--ink-2); display:flex; align-items:center; justify-content:center; transition:background .14s, color .14s; position:relative; } .rail-btn::after{ content:attr(title); position:absolute; left:calc(100% + 12px); top:50%; transform:translateY(-50%); background:var(--ink); color:var(--paper); font-size:12px; font-weight:600; padding:5px 10px; border-radius:var(--r-sm); white-space:nowrap; opacity:0; pointer-events:none; transition:opacity .12s; box-shadow:var(--shadow-md); z-index:130; } .rail-btn:hover::after{ opacity:1; } .rail-btn:hover{ background:var(--surface-2); color:var(--ink); } .rail-btn.on{ background:var(--surface-2); color:var(--blue-ink); } .rail-btn.primary{ background:var(--blue); color:#fff; } .rail-btn.primary:hover{ background:var(--blue-ink); } /* in dark mode the accent is a lighter shade, so the "+" glyph reads as dark grey */ [data-theme="dark"] .rail-btn.primary{ color:#1B1D27; } body.nav-docked .main{ padding-left:60px; } .nav-widget{ position:fixed; z-index:110; width:238px; background:var(--paper); border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--shadow-lg); overflow:hidden; } .nw-head{ display:flex; align-items:center; gap:8px; padding:10px 10px 10px 13px; border-bottom:1px solid var(--line); background:var(--surface-2); cursor:grab; user-select:none; touch-action:none; } .nw-head:active{ cursor:grabbing; } .nw-body{ padding:10px; } .nw-sep{ height:1px; background:var(--line); margin:8px 4px; } /* create widget — draggable floating menu */ .create-widget{ position:fixed; z-index:120; width:236px; background:var(--paper); border:1px solid var(--line); border-radius:var(--r-md); box-shadow:var(--shadow-lg); overflow:hidden; animation:pop .16s ease; } .cw-head{ display:flex; align-items:center; gap:8px; padding:10px 10px 10px 13px; border-bottom:1px solid var(--line); background:var(--surface-2); cursor:grab; user-select:none; touch-action:none; } .cw-head:active{ cursor:grabbing; } .cw-head .cw-title{ font-size:12px; font-weight:700; letter-spacing:.02em; text-transform:uppercase; color:var(--ink-2); flex:1; } .cw-head .cw-grip{ color:var(--ink-4); display:flex; } .cw-head .cw-x{ width:24px; height:24px; border:none; background:transparent; color:var(--ink-3); border-radius:6px; cursor:pointer; display:flex; align-items:center; justify-content:center; } .cw-head .cw-x:hover{ background:rgba(0,0,0,.06); color:var(--ink); } .cw-body{ padding:8px; display:flex; flex-direction:column; gap:2px; } /* raccoon study buddy */ .rocky-chat{ border:1px solid var(--line); border-radius:var(--r-lg); background:var(--paper); display:flex; flex-direction:column; height:520px; max-height:58vh; overflow:hidden; box-shadow:var(--shadow-sm); } .rocky-chat .rac-body{ position:relative; } .rocky-chat .rac-body::before{ display:none; } .rac-launch{ position:fixed; left:70px; bottom:16px; z-index:140; width:112px; height:112px; border-radius:0; border:none; background:transparent; box-shadow:none; cursor:pointer; padding:0; overflow:visible; } .rac-launch img{ width:100%; height:100%; object-fit:contain; border-radius:0; filter:drop-shadow(0 6px 14px rgba(0,0,0,.22)); } .rac-launch:hover{ transform:translateY(-2px); } .rac-cheer{ position:absolute; bottom:calc(100% + 6px); left:50%; transform:translateX(-50%); white-space:nowrap; background:var(--blue); color:#fff; font-size:13px; font-weight:700; padding:5px 12px; border-radius:var(--r-pill); box-shadow:var(--shadow-md); animation:pop .2s ease; } .rac-cheer::after{ content:''; position:absolute; top:100%; left:50%; transform:translateX(-50%); border:5px solid transparent; border-top-color:var(--blue); } .rac-panel{ position:fixed; left:70px; bottom:136px; z-index:140; width:330px; max-width:calc(100vw - 90px); height:440px; max-height:70vh; background:var(--paper); border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--shadow-card); display:flex; flex-direction:column; overflow:hidden; animation:pop .18s ease; } .rac-head{ display:flex; align-items:center; gap:10px; padding:11px 12px; border-bottom:1px solid var(--line); background:var(--surface-2); } .rac-avatar{ width:34px; height:34px; border-radius:50%; border:1px solid var(--line); background:var(--paper); object-fit:contain; } .rac-body{ flex:1; overflow-y:auto; padding:14px; display:flex; flex-direction:column; gap:12px; } .rac-msg{ display:flex; gap:8px; align-items:flex-end; max-width:100%; } .rac-msg.user{ justify-content:flex-end; } .rac-msg-ava{ width:26px; height:26px; border-radius:50%; flex:none; border:1px solid var(--line); background:var(--surface-2); display:grid; place-items:center; color:var(--blue); } .rac-bubble{ font-size:13.5px; line-height:1.45; padding:9px 12px; border-radius:14px; max-width:76%; } .rac-msg.rocky .rac-bubble{ background:var(--surface-2); color:var(--ink); border-bottom-left-radius:4px; } .rac-msg.user .rac-bubble{ background:var(--blue); color:#fff; border-bottom-right-radius:4px; } .rac-typing{ display:flex; gap:4px; } .rac-typing span{ width:6px; height:6px; border-radius:50%; background:var(--ink-3); animation:racdot 1s infinite; } .rac-typing span:nth-child(2){ animation-delay:.15s; } .rac-typing span:nth-child(3){ animation-delay:.3s; } @keyframes racdot{ 0%,60%,100%{ opacity:.3; transform:translateY(0); } 30%{ opacity:1; transform:translateY(-3px); } } .rac-input{ display:flex; gap:8px; padding:10px; border-top:1px solid var(--line); } .rac-suggest{ padding:10px 12px; border-top:1px solid var(--line); display:flex; flex-direction:column; gap:8px; } .rac-suggest-lab{ display:inline-flex; align-items:center; gap:6px; font-size:11.5px; font-weight:600; color:var(--ink-3); } .rac-suggest-row{ display:flex; flex-wrap:wrap; gap:8px; } .rac-input input{ flex:1; border:1px solid var(--line-strong); border-radius:var(--r-pill); padding:9px 13px; font-family:var(--font-sans); font-size:13.5px; background:var(--paper); color:var(--ink); outline:none; } .rac-input input:focus{ border-color:var(--blue); } .rac-input .btn{ border-radius:var(--r-pill); width:38px; padding:0; } .rac-input .mic-btn{ flex:0 0 auto; } .rac-input .mic-btn.rec{ background:var(--blue); border-color:var(--blue); color:#fff; } .rac-input .mic-btn.rec svg{ animation:micpulse 1.1s ease-in-out infinite; } @keyframes micpulse{ 0%,100%{ opacity:.55; } 50%{ opacity:1; } } .rac-dictate{ display:flex; align-items:center; gap:8px; padding:8px 13px; font-size:12px; color:var(--blue-ink); } .rac-dictate.err{ color:var(--ink-3); } .rac-dictate-dot{ width:8px; height:8px; border-radius:50%; background:var(--blue); box-shadow:0 0 0 0 color-mix(in srgb,var(--blue) 55%, transparent); animation:micpulse-dot 1.3s ease-out infinite; } @keyframes micpulse-dot{ 0%{ box-shadow:0 0 0 0 color-mix(in srgb,var(--blue) 55%, transparent); } 70%{ box-shadow:0 0 0 7px transparent; } 100%{ box-shadow:0 0 0 0 transparent; } } .rac-foot{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:9px 12px; border-top:1px solid var(--line); background:var(--surface-2); } .rac-foot .t-small{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } @media (max-width:1000px){ .rac-launch{ left:auto; right:16px; bottom:84px; } .rac-panel{ left:auto; right:16px; bottom:156px; } } /* entrance — transform-only so content is never hidden if animation is paused */ .fade-up{ animation:fadeUp .45s cubic-bezier(.22,1,.36,1) both; } @keyframes fadeUp{ from{ transform:translateY(10px); } to{ transform:none; } } @keyframes fade{ from{ opacity:0; } to{ opacity:1; } } @keyframes pop{ from{ opacity:0; transform:translateY(8px) scale(.98); } to{ opacity:1; transform:none; } } @keyframes shimmer{ to{ background-position:-400% 0; } } @keyframes spin{ to{ transform:rotate(360deg); } } @keyframes toastin{ from{ opacity:0; transform:translate(-50%,12px); } } @media (prefers-reduced-motion:reduce){ *{ animation-duration:.001ms !important; transition-duration:.001ms !important; } } /* ===================================================================== RESPONSIVE */ @media (max-width:1000px){ .sidebar{ display:none; } .nav-widget{ display:none; } .nav-rail{ display:none; } body.nav-docked .main{ padding-left:0; } .topbar{ display:none; } .mobile-topbar{ display:flex; align-items:center; gap:12px; padding:12px 16px; flex:none; border-bottom:1px solid var(--line); background:color-mix(in srgb,var(--paper) 88%, transparent); backdrop-filter:blur(12px); position:sticky; top:0; z-index:20; } .mobile-topbar .spacer{ flex:1; } .mobile-nav{ display:flex; position:fixed; bottom:0; left:0; right:0; z-index:40; background:var(--paper); border-top:1px solid var(--line); padding:8px 6px calc(8px + env(safe-area-inset-bottom)); justify-content:space-around; } .mobile-nav button{ flex:1; border:none; background:transparent; cursor:pointer; display:flex; flex-direction:column; align-items:center; gap:3px; padding:5px 2px; color:var(--ink-3); font-size:10.5px; font-weight:600; border-radius:var(--r-sm); } .mobile-nav button.on{ color:var(--blue-ink); } .content-pad{ padding:20px 16px 96px; } .col-main, .col-split{ grid-template-columns:1fr; } .cards-4{ grid-template-columns:repeat(2,1fr); } .cards-3{ grid-template-columns:repeat(2,1fr); } .settings-grid{ grid-template-columns:1fr; } .settings-menu{ position:static; flex-direction:row; overflow-x:auto; gap:6px; padding-bottom:6px; } .set-item{ white-space:nowrap; } /* map → list on small screens */ .map-stage{ display:none; } .map-list{ display:grid; gap:14px; grid-template-columns:1fr; } } @media (max-width:560px){ .cards-2, .cards-3, .cards-4{ grid-template-columns:1fr; } .rate-row{ grid-template-columns:repeat(2,1fr); } .page-head{ gap:12px; } .page-head .actions{ width:100%; } .modal{ border-radius:var(--r-lg); } .scrim{ padding:20px 12px; align-items:flex-end; } } /* friend streak chip — warm brown that lifts toward white in dark mode */ .streak-chip{ background:rgba(199,147,125,.16); color:#9C5B40; } [data-theme="dark"] .streak-chip{ background:rgba(199,147,125,.22); color:#ECD4C7; } /* ---- Idea board ---- */ .idea-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(218px,1fr)); gap:12px; } .idea-card{ position:relative; border:1px solid var(--line); border-radius:var(--r-md); background:var(--paper); padding:14px 15px; display:flex; flex-direction:column; gap:7px; transition:border-color .14s, box-shadow .14s, background .14s; } .idea-card:hover{ border-color:var(--line-strong); } .idea-card.on{ background:color-mix(in srgb, var(--blue) 5%, var(--paper)); } .idea-card.isgoal{ opacity:.82; } /* Freshly captured idea: pulsing accent glow so it's easy to find. Hover cancels it. */ @keyframes ideaGlowPulse{ 0%,100%{ box-shadow:0 0 0 2px color-mix(in srgb, var(--glow,var(--blue)) 36%, transparent), 0 0 16px -2px color-mix(in srgb, var(--glow,var(--blue)) 46%, transparent); } 50%{ box-shadow:0 0 0 3px color-mix(in srgb, var(--glow,var(--blue)) 58%, transparent), 0 0 26px 0 color-mix(in srgb, var(--glow,var(--blue)) 60%, transparent); } } .idea-card.isnew{ border-color:color-mix(in srgb, var(--glow,var(--blue)) 68%, var(--line)); animation:ideaGlowPulse 1.5s ease-in-out infinite; } .idea-card.isnew:hover{ animation:none; box-shadow:none; border-color:var(--line-strong); } @media (prefers-reduced-motion: reduce){ .idea-card.isnew{ animation:none; box-shadow:0 0 0 2px color-mix(in srgb, var(--glow,var(--blue)) 48%, transparent); } } .idea-tag{ display:inline-flex; align-items:center; gap:6px; font-family:var(--font-mono); font-size:10.5px; letter-spacing:.03em; text-transform:uppercase; color:var(--ink-3); } .idea-check{ width:20px; height:20px; border-radius:6px; border:1.5px solid var(--line-strong); flex:none; display:flex; align-items:center; justify-content:center; transition:background .14s, border-color .14s; } .idea-title{ font-size:14.5px; font-weight:600; letter-spacing:-0.01em; line-height:1.25; } .idea-blurb{ font-size:12.5px; color:var(--ink-3); line-height:1.45; } .idea-title[contenteditable], .idea-blurb[contenteditable]{ cursor:text; border-radius:5px; } .idea-title[contenteditable]:hover, .idea-blurb[contenteditable]:hover{ background:color-mix(in srgb, var(--ink) 5%, transparent); } .idea-title[contenteditable]:focus, .idea-blurb[contenteditable]:focus{ outline:1px dashed var(--blue); outline-offset:2px; background:transparent; } .idea-goalbadge{ display:inline-flex; align-items:center; gap:5px; font-size:11.5px; font-weight:600; margin-top:2px; } .idea-del{ position:absolute; bottom:10px; right:10px; width:26px; height:26px; border:none; opacity:0; transition:opacity .14s; } .idea-card:hover .idea-del{ opacity:1; } .idea-add{ margin-top:14px; padding:12px 14px; border:1px solid var(--line); border-radius:var(--r-md); background:var(--surface-2); } .idea-actionbar{ position:sticky; bottom:14px; margin-top:16px; display:flex; align-items:center; gap:10px; padding:11px 14px; border-radius:var(--r-md); background:var(--paper); border:1px solid var(--line-strong); box-shadow:var(--shadow-md); } .idea-empty{ text-align:center; padding:26px 18px; border:1.5px dashed var(--line-strong); border-radius:var(--r-md); background:var(--surface-2); } .goal-row{ border:1px solid var(--line); border-radius:var(--r-md); background:var(--paper); overflow:hidden; } .goal-row.done{ background:color-mix(in srgb, var(--positive) 5%, var(--paper)); } .goal-head{ display:flex; align-items:center; gap:11px; padding:11px 12px; } .goal-toggle{ width:22px; height:22px; border-radius:7px; border:1.5px solid var(--line-strong); background:transparent; flex:none; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:background .14s, border-color .14s; } .goal-title{ font-size:14.5px; font-weight:600; letter-spacing:-0.01em; } .goal-meta{ display:flex; align-items:center; gap:12px; margin-top:3px; font-size:11.5px; color:var(--ink-3); } .goal-meta span{ display:inline-flex; align-items:center; gap:4px; } .goal-collect{ padding:4px 14px 16px; border-top:1px solid var(--line-2); } .goal-link{ display:flex; align-items:center; gap:8px; font-size:13px; padding:6px 9px; border-radius:8px; background:var(--surface-2); } .rec-dot{ width:9px; height:9px; border-radius:50%; background:var(--critical); flex:none; animation:recpulse 1s ease-in-out infinite; } @keyframes recpulse{ 0%,100%{ opacity:1; transform:scale(1); } 50%{ opacity:.35; transform:scale(.7); } } .goal-save-row{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:12px; padding-top:12px; border-top:1px solid var(--line-2); } textarea.input{ font-family:inherit; width:100%; } /* ===================================================================== READ IT FOR ME */ /* Collapsed call-to-action */ .ra-cta{ display:flex; align-items:center; gap:13px; width:100%; padding:13px 15px; margin-bottom:22px; border:1px solid var(--line); border-radius:var(--r-md); background:linear-gradient(180deg, color-mix(in srgb,var(--blue) 7%, var(--paper)), var(--paper)); } .ra-cta.as-btn{ cursor:pointer; text-align:left; font:inherit; color:inherit; transition:border-color .16s, box-shadow .16s, transform .16s; } .ra-cta.as-btn:hover{ border-color:color-mix(in srgb,var(--blue) 45%, var(--line)); box-shadow:var(--shadow-md); } .ra-cta.as-btn:active{ transform:scale(.992); } .ra-badge{ width:38px; height:38px; border-radius:11px; flex:none; display:grid; place-items:center; background:var(--blue); color:#fff; box-shadow:0 2px 8px -2px color-mix(in srgb,var(--blue) 60%, transparent); } .ra-cta-title{ font-size:14.5px; font-weight:600; letter-spacing:-0.01em; } .ra-cta-sub{ font-size:12.5px; color:var(--ink-3); margin-top:1px; } .ra-cta-sub.ra-prep{ color:var(--blue-ink); } /* "Ready" check stamped on the badge once narration is pre-generated & stored */ .ra-badge{ position:relative; } .ra-ready-dot{ position:absolute; right:-3px; bottom:-3px; width:15px; height:15px; border-radius:50%; background:var(--positive); color:#fff; display:grid; place-items:center; border:2px solid var(--paper); } .ra-spin{ width:15px; height:15px; border-radius:50%; border:2px solid color-mix(in srgb,var(--blue) 28%, transparent); border-top-color:var(--blue); display:block; animation:ra-spin .7s linear infinite; } @keyframes ra-spin{ to{ transform:rotate(360deg); } } /* Settings: voice-library (backend) status panel */ .vlib{ margin:4px 0 14px; padding:14px; border:1px solid var(--line); border-radius:var(--r-md); background:color-mix(in srgb,var(--blue) 5%, var(--paper)); } .vlib-top{ display:flex; align-items:center; gap:11px; } .vlib-ic{ width:30px; height:30px; border-radius:9px; flex:none; display:grid; place-items:center; background:var(--blue); color:#fff; transition:background .2s; } .vlib-ic.ok{ background:var(--positive); } .vlib-title{ font-size:13.5px; font-weight:600; letter-spacing:-0.01em; } .vlib-sub{ font-size:12px; color:var(--ink-3); margin-top:1px; } .vlib-count{ font-size:12px; color:var(--ink-2); flex:none; } .vlib-track{ height:5px; border-radius:99px; margin:11px 0 12px; background:color-mix(in srgb,var(--ink) 9%, transparent); overflow:hidden; } .vlib-fill{ display:block; height:100%; border-radius:99px; background:var(--blue); transition:width .4s cubic-bezier(.22,1,.36,1); } .vlib-actions{ display:flex; gap:8px; } .ra-cta-play{ width:34px; height:34px; border-radius:50%; flex:none; display:grid; place-items:center; background:var(--paper); border:1px solid var(--line); color:var(--blue-ink); } /* Expanded mini-player */ .ra-player{ width:100%; padding:12px 14px; margin-bottom:22px; border:1px solid color-mix(in srgb,var(--blue) 26%, var(--line)); border-radius:var(--r-md); background:color-mix(in srgb,var(--blue) 6%, var(--paper)); animation:raIn .3s cubic-bezier(.22,1,.36,1) both; } /* transform-only entrance — never hides the player if the animation is paused/throttled */ @keyframes raIn{ from{ transform:translateY(8px); } to{ transform:none; } } .ra-row{ display:flex; align-items:center; gap:14px; } .ra-play{ width:44px; height:44px; border-radius:50%; flex:none; cursor:pointer; display:grid; place-items:center; background:var(--blue); color:#fff; border:none; box-shadow:0 3px 10px -2px color-mix(in srgb,var(--blue) 60%, transparent); transition:transform .14s, filter .14s; } .ra-play:hover{ filter:brightness(1.05); } .ra-play:active{ transform:scale(.95); } .ra-play svg{ margin-left:1px; } .ra-play.on svg{ margin-left:0; } .ra-body{ flex:1; min-width:0; } .ra-line{ display:flex; align-items:center; gap:8px; margin-bottom:7px; } .ra-status{ font-size:13px; font-weight:600; color:var(--ink); display:flex; align-items:center; gap:6px; min-width:0; } .ra-status .ra-dot{ color:var(--ink-4); } .ra-topic{ color:var(--ink-3); font-weight:500; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .ra-time{ margin-left:auto; font-size:11.5px; color:var(--ink-3); flex:none; } .ra-hint{ display:flex; align-items:flex-start; gap:6px; margin-top:8px; font-size:12px; line-height:1.45; color:var(--warning); } .ra-hint svg{ flex:none; margin-top:1px; } .ra-track{ height:5px; border-radius:99px; background:color-mix(in srgb,var(--ink) 10%, transparent); overflow:hidden; } .ra-fill{ display:block; height:100%; border-radius:99px; background:var(--blue); transition:width .35s cubic-bezier(.22,1,.36,1); } /* Tools row: voice + speed segmented controls */ .ra-tools{ display:flex; align-items:center; flex-wrap:wrap; gap:8px 18px; margin-top:12px; padding-top:11px; border-top:1px solid color-mix(in srgb,var(--blue) 14%, var(--line)); } .ra-seg-group{ display:flex; align-items:center; gap:8px; } .ra-seg-lab{ display:inline-flex; align-items:center; gap:4px; font-size:11px; font-weight:600; letter-spacing:.02em; text-transform:uppercase; color:var(--ink-3); } .ra-seg-lab svg{ color:var(--ink-4); } .ra-mini{ width:32px; height:32px; border-radius:9px; flex:none; cursor:pointer; display:grid; place-items:center; background:var(--paper); border:1px solid var(--line); color:var(--ink-2); transition:border-color .14s, color .14s; } .ra-mini:hover{ color:var(--ink); border-color:var(--line-strong); } .ra-seg{ display:flex; background:var(--paper); border:1px solid var(--line); border-radius:9px; padding:2px; gap:2px; } .ra-seg button{ font-family:var(--font-mono); font-size:11.5px; padding:5px 9px; border:none; background:transparent; border-radius:6px; color:var(--ink-3); cursor:pointer; transition:background .14s, color .14s; } .ra-seg button:hover{ color:var(--ink); } .ra-seg button.on{ background:var(--blue); color:#fff; } /* Flashcard "Listen" button */ .fc-listen{ display:flex; justify-content:center; margin:14px 0 2px; } .fc-listen .btn.ra-listening{ background:var(--blue); border-color:var(--blue); color:#fff; } .fc-listen .btn.ra-listening svg{ animation:micpulse 1.1s ease-in-out infinite; } /* Compact "Listen" button on concept-map key-concept cards */ .ra-mini{ width:30px; height:30px; flex:none; color:var(--ink-3); } .ra-mini:hover{ color:var(--blue-ink); } .ra-mini.ra-listening{ background:var(--blue); border-color:var(--blue); color:#fff; } .ra-mini.ra-listening svg{ animation:micpulse 1.1s ease-in-out infinite; } /* Equalizer bars while speaking */ .ra-eq{ display:inline-flex; align-items:flex-end; gap:2px; height:13px; flex:none; } .ra-eq i{ width:2.5px; height:4px; border-radius:2px; background:var(--blue); opacity:.5; } .ra-eq.on i{ animation:raEq .9s ease-in-out infinite; opacity:1; } .ra-eq.on i:nth-child(2){ animation-delay:.18s; } .ra-eq.on i:nth-child(3){ animation-delay:.36s; } .ra-eq.on i:nth-child(4){ animation-delay:.12s; } @keyframes raEq{ 0%,100%{ height:4px; } 50%{ height:13px; } } /* Highlight on the block currently being read */ .ra-active{ background:color-mix(in srgb,var(--blue) 11%, transparent); box-shadow:0 0 0 6px color-mix(in srgb,var(--blue) 11%, transparent); border-radius:7px; transition:background .25s, box-shadow .25s; } @media (max-width:640px){ .ra-tools{ gap:10px 14px; } .ra-seg-group{ flex:1 1 auto; } } @media (prefers-reduced-motion:reduce){ .ra-eq.on i{ animation:none; height:9px; } }