/* ============================================================================ Puhekieli Web App — native design system port. Mirrors PuhekieliApp Core/DesignSystem (Theme.swift / Palette.swift / Typography.swift): one ink color per theme, ink-opacity fills/strokes, one accent, navy↔cool-white gradient, SF type ramp, capsule + continuous- corner chrome. Desktop ([data-platform="desktop"]) renders the macOS layout at 1.15× chrome scale; mobile renders the iOS layout at 1×. Dark values live on :root (dark is the brand default); [data-theme="light"] overrides. JS stamps data-theme + data-platform on (main.js). ========================================================================== */ :root{ /* ---- ink + theme colors (dark) ---- */ --ink-rgb:255,255,255; --accent:#64D2FF; /* Palette.accent dark = systemCyan (dark) */ --accent-rgb:100,210,255; --on-accent:#12141A; /* Label.onAccent dark */ --panel:#0F121A; /* Palette.panel dark */ --elev:#1C1F29; /* elevatedPanel dark */ --bg-top:#060912; /* backgroundTop dark */ --bg-mid:#05141F; --bg-bot:#03050B; --bg-flat:#0A0D16; /* Background.primary dark (lesson runner) */ --success:#30D158; --success-rgb:48,209,88; --danger:#FF453A; --danger-rgb:255,69,58; --warning:#FF9F0A; --warning-rgb:255,159,10; --favorite:#FFD60A; --favorite-rgb:255,214,10; --rec-active:#FF1F2E; --scrim:rgba(0,0,0,.45); --shadow-card:0 12px 30px -14px rgba(0,0,0,.5); /* ---- derived neutrals (auto-invert via --ink-rgb) ---- */ --text:rgb(var(--ink-rgb)); --text-2:rgba(var(--ink-rgb),.7); /* Label.secondary */ --text-3:rgba(var(--ink-rgb),.5); /* Label.tertiary */ --text-4:rgba(var(--ink-rgb),.3); /* Label.quaternary */ --fill:rgba(var(--ink-rgb),.055); /* surfaceFill */ --fill-2:rgba(var(--ink-rgb),.08); /* chip idle */ --fill-3:rgba(var(--ink-rgb),.06); --fill-4:rgba(var(--ink-rgb),.04); --fill-hover:rgba(var(--ink-rgb),.16); --stroke:rgba(var(--ink-rgb),.10); --stroke-strong:rgba(var(--ink-rgb),.12); --stroke-hover:rgba(var(--ink-rgb),.22); --sep:rgba(var(--ink-rgb),.08); --accent-fill:rgba(var(--accent-rgb),.16); --accent-fill-strong:rgba(var(--accent-rgb),.20); --accent-stroke:rgba(var(--accent-rgb),.60); --accent-soft:rgba(var(--accent-rgb),.14); /* ---- radius ladder ---- */ --r-sm:9px; --r-md:10px; --r-chip:12px; --r-cta:14px; --r-panel:16px; --r-card:18px; --r-editor:20px; --r-hero:22px; --pill:999px; /* ---- type ramp (mobile = iOS ×1.0; desktop overrides below) ---- */ --f-sys:-apple-system,BlinkMacSystemFont,'SF Pro Text','SF Pro Display',system-ui,'Segoe UI',Roboto,'Helvetica Neue',sans-serif; --f-mono:ui-monospace,'SF Mono',SFMono-Regular,Menlo,monospace; --fs-display:1.875rem; /* 30 displayLarge */ --fs-title:1.375rem; /* 22 */ --fs-headline:1.0625rem; /* 17 */ --fs-subhead:.9375rem; /* 15 */ --fs-body:.8125rem; /* 13 */ --fs-caption:.72rem; /* 11.5 */ --fs-caption2:.625rem; /* 10 */ --fs-editor:1.36rem; /* 21.7 editorBody */ --fs-editor-title:1.5rem;/* 24 */ --fs-lesson-opt:.975rem; /* 15.6 */ --fs-lesson-fb:1.06rem; /* 16.9 */ --fs-prose:.9375rem; /* web prose (lessons, about) */ /* ---- chrome dims (mobile) ---- */ --dim-inline:36px; /* inline corner buttons 36.4 */ --dim-card-btn:30px; --dim-gear:44px; --editor-minh:111px; --content-max:640px; --pad-x:14px; } /* Desktop = macOS at default chromeScale 1.15 */ [data-platform="desktop"]{ --fs-display:2.16rem; /* 34.5 */ --fs-title:1.58rem; /* 25.3 */ --fs-headline:1.22rem; /* 19.6 */ --fs-subhead:1.08rem; /* 17.25 */ --fs-body:.935rem; /* 14.95 */ --fs-caption:.83rem; /* 13.2 */ --fs-caption2:.72rem; /* 11.5 */ --fs-editor:1.56rem; /* 24.96 */ --fs-editor-title:1.72rem; --fs-lesson-opt:1.12rem; --fs-lesson-fb:1.21rem; --fs-prose:1rem; --dim-inline:42px; --dim-card-btn:34px; --dim-gear:50px; --editor-minh:271px; --content-max:1040px; --pad-x:22px; } [data-theme="light"]{ --ink-rgb:18,20,26; --accent:#007099; /* deep teal */ --accent-rgb:0,112,153; --on-accent:#FFFFFF; --panel:#FFFFFF; --elev:#F7F7FA; --bg-top:#F5F7FC; --bg-mid:#EDF2FA; --bg-bot:#E6EBF5; --bg-flat:#F5F7FD; --success:#249942; --success-rgb:36,153,66; --danger:#C92921; --danger-rgb:201,41,33; --warning:#C78000; --warning-rgb:199,128,0; --favorite:#C79400; --favorite-rgb:199,148,0; --scrim:rgba(0,0,0,.45); --shadow-card:0 12px 30px -18px rgba(10,20,40,.25); } /* Legacy aliases — inline styles in JS still reference these. */ :root{ --bg:var(--bg-top); --bg-2:var(--panel); --surface:var(--fill); --border:var(--stroke); --border-strong:var(--stroke-strong); --muted:var(--text-2); --faint:var(--text-3); --accent-hi:var(--accent); --success-bg:rgba(var(--success-rgb),.18); --danger-bg:rgba(var(--danger-rgb),.18); --r:var(--r-card); --f-display:var(--f-sys); --f-body:var(--f-sys); } /* ============================== base ==================================== */ *{box-sizing:border-box} html{scroll-behavior:smooth} body{ margin:0; color:var(--text); font-family:var(--f-sys); font-size:var(--fs-body); line-height:1.45; -webkit-font-smoothing:antialiased; min-height:100vh;min-height:100dvh; background:var(--bg-top); } /* Native window gradient: diagonal 3-stop + two radial accent glows, painted on a fixed underlay (iOS Safari ignores background-attachment:fixed). */ body::before{ content:"";position:fixed;inset:0;z-index:-1;pointer-events:none; background: radial-gradient(circle 520px at top left, rgba(var(--accent-rgb),.14), transparent 70%), radial-gradient(circle 520px at bottom right, rgba(var(--accent-rgb),.12), transparent 70%), linear-gradient(150deg, var(--bg-top), var(--bg-mid) 50%, var(--bg-bot)); } a{color:inherit;text-decoration:none} img,svg{display:block} button{font-family:inherit;color:inherit} :focus-visible{outline:2px solid var(--accent);outline-offset:3px} ::selection{background:rgba(var(--accent-rgb),.3)} .hidden{display:none !important} .mono{font-family:var(--f-mono)} .muted{color:var(--text-2)} .faint{color:var(--text-3)} .eyebrow{ font-size:var(--fs-caption);font-weight:600;letter-spacing:.1em; text-transform:uppercase;color:var(--accent); } /* interactive cursor (macOS pointing hand) */ [data-platform="desktop"] button:not(:disabled), [data-platform="desktop"] a, [data-platform="desktop"] label, [data-platform="desktop"] select{cursor:pointer} /* ============================== shell =================================== */ #app{display:flex;flex-direction:column;min-height:100vh;min-height:100dvh} .shell{ flex:1;display:flex;flex-direction:column; width:100%;max-width:calc(var(--content-max) + 2*var(--pad-x)); margin:0 auto; padding:8px var(--pad-x) 12px; } [data-platform="desktop"] .shell{padding:22px var(--pad-x) 16px} .app-main{flex:1;display:flex;flex-direction:column;min-width:0;padding-top:16px} /* ---- header ---- */ .hd{display:flex;flex-direction:column;gap:10px} .hd-row1{display:flex;align-items:center;gap:12px} .hd-home,.hd-learn{ display:flex;align-items:center;gap:8px; background:none;border:none;padding:0; font-size:var(--fs-title);font-weight:700;letter-spacing:-.02em; color:var(--text-2); transition:color .2s ease; } .hd-home.active,.hd-learn.active{color:var(--text)} .hd-learn{gap:6px;margin-left:auto} .hd-logo{ width:28px;height:28px;border-radius:7px; box-shadow:0 8px 14px -6px rgba(0,0,0,.35); } [data-platform="desktop"] .hd-logo{width:52px;height:52px;border-radius:12px} .hd-chevron{ width:12px;height:12px;color:var(--text-3); transition:transform .2s ease,color .2s ease; } .hd-home.active .hd-chevron,.hd-learn.active .hd-chevron{ color:var(--accent);transform:rotate(180deg); } .hd-learn svg.cap{width:1.1em;height:1.1em;color:var(--text-3)} .hd-learn.active svg.cap{color:var(--accent)} .hd-gear{ width:var(--dim-gear);height:var(--dim-gear);flex:none; display:flex;align-items:center;justify-content:center; border:none;border-radius:15px; background:rgba(var(--ink-rgb),.075); color:rgba(var(--ink-rgb),.82); opacity:.45; transition:opacity .18s ease,background .18s ease,box-shadow .18s ease; } .hd-gear svg{width:20px;height:20px} .hd-gear:hover{opacity:1} .hd-gear.active{ opacity:1;background:var(--accent-fill-strong);color:var(--accent); box-shadow:inset 0 0 0 1px var(--accent-stroke); } /* ---- section tab row ---- */ .hd-row2{display:flex;align-items:center;gap:12px;min-width:0} .hd-tabs{ display:flex;align-items:flex-start;gap:22px; overflow-x:auto;scrollbar-width:none;min-width:0; } .hd-tabs::-webkit-scrollbar{display:none} [data-platform="desktop"] .hd-tabs{overflow:visible} .stab{ display:flex;flex-direction:column;gap:6px;align-items:flex-start; background:none;border:none;padding:0;flex:none; font-size:var(--fs-headline);font-weight:600; color:var(--text-3);white-space:nowrap; transition:color .2s ease; } .stab.active{color:var(--text)} .stab i{ display:block;height:3px;width:100%;border-radius:var(--pill); background:transparent; } .stab.active i{background:var(--accent)} /* streak pill (pinned trailing on mobile, after tabs on desktop) */ .streak-pill{ display:inline-flex;align-items:center;gap:5px;flex:none;margin-left:auto; padding:4px 12px;border-radius:var(--pill);border:1.5px solid transparent; background:rgba(var(--ink-rgb),.06); font-size:var(--fs-headline);font-weight:600;color:var(--text); } .streak-pill svg{width:1em;height:1em;color:#FF8D28;fill:currentColor} .streak-pill.lit{background:rgba(249,184,128,.28);border-color:#F9B880} [data-theme="light"] .streak-pill.lit{background:#F2E4D9} /* the macOS header has no streak pill — iOS only */ [data-platform="desktop"] .streak-pill{display:none} /* ---- footer status (native ContentViewFooter) ---- */ .ftr{ display:flex;align-items:center;gap:10px;min-height:0; padding-top:10px;font-size:var(--fs-caption);color:var(--text-2); } .ftr:empty{display:none} .ftr .dot{ width:8px;height:8px;border-radius:50%;flex:none; background:var(--warning);box-shadow:0 0 6px rgba(var(--warning-rgb),.7); } .ftr.err .dot{background:var(--danger);box-shadow:0 0 6px rgba(var(--danger-rgb),.7)} .ftr.err{color:rgba(var(--danger-rgb),.95)} .offline-banner{ /* re-skinned as native footer-status text; kept for JS contract */ display:flex;align-items:center;gap:10px;order:99; padding:10px 0 0;font-size:var(--fs-caption);color:var(--text-2); } .offline-banner::before{ content:"";width:8px;height:8px;border-radius:50%;flex:none; background:var(--warning);box-shadow:0 0 6px rgba(var(--warning-rgb),.7); } /* ============================ primitives ================================ */ /* page transition */ .page{animation:fadein .18s ease;display:flex;flex-direction:column;min-width:0} @keyframes fadein{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}} /* page head: native screens carry no in-page titles — nav lives in the header. h1 stays for a11y; extras (count tags, quiz button, info chip) right-align. */ .page-head{display:flex;align-items:center;justify-content:flex-end;gap:8px;margin-bottom:12px;min-height:0} .page-head:empty{display:none} .page-head h1{ position:absolute;width:1px;height:1px;overflow:hidden; clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap; } .page-head.bar{justify-content:flex-start} /* sub-screens with back buttons */ .page-head.bar h1{ position:static;width:auto;height:auto;overflow:visible;clip:auto;clip-path:none; font-size:var(--fs-title);font-weight:700;letter-spacing:-.02em;flex:1;min-width:0; white-space:normal; } /* native chip: caption text, radius-12, ink fill + hairline */ .chip,.btn-ghost,.btn-sm.btn-ghost{ display:inline-flex;align-items:center;justify-content:center;gap:.4rem; padding:9px 12px;border-radius:var(--r-chip); border:1px solid var(--stroke-strong); background:rgba(var(--ink-rgb),.07); color:rgba(var(--ink-rgb),.9); font-size:var(--fs-caption);font-weight:500;font-family:var(--f-sys); cursor:pointer;white-space:nowrap; transition:background .15s ease,border-color .15s ease,transform .12s ease; } .chip:not(.static):hover,.btn-ghost:hover{background:rgba(var(--ink-rgb),.12);border-color:var(--stroke-hover)} .chip:active,.btn-ghost:active{transform:scale(.98)} .chip.active{ background:var(--accent-fill);border-color:rgba(var(--accent-rgb),.5); color:var(--accent);font-weight:600; } .chip.static{cursor:default} .chips{display:flex;gap:.5rem;flex-wrap:wrap} /* accent CTA (QuizCTAButton / PrimaryTranslateButton) */ .btn,.btn-primary{ display:inline-flex;align-items:center;justify-content:center;gap:.5rem; font-family:var(--f-sys);font-weight:600;font-size:var(--fs-subhead); border:none;border-radius:var(--r-cta);cursor:pointer; transition:background .15s ease,opacity .15s ease,transform .12s ease; } .btn-primary{ background:rgba(var(--accent-rgb),.92);color:var(--on-accent); padding:13px 22px; } .btn-primary:hover{background:var(--accent)} .btn-primary:active{transform:scale(.985)} .btn-primary:disabled{opacity:.35;cursor:default} .btn-danger{ background:rgba(var(--danger-rgb),.16);color:var(--danger); border:1px solid rgba(var(--danger-rgb),.55); padding:9px 14px;border-radius:var(--r-chip); font-size:var(--fs-caption);font-weight:600;cursor:pointer; } .btn-danger:hover{background:rgba(var(--danger-rgb),.24)} .btn-sm{padding:8px 14px;font-size:var(--fs-caption)} .btn-sm.btn-primary{padding:8px 16px;border-radius:var(--r-chip)} .cta{ /* full-width lesson/quiz CTA */ display:flex;width:100%;align-items:center;justify-content:center; padding:13px 16px;border:none;border-radius:var(--r-cta); background:rgba(var(--accent-rgb),.92);color:var(--on-accent); font-size:var(--fs-headline);font-weight:600;cursor:pointer; transition:background .15s ease,opacity .15s ease,transform .12s ease; } .cta:hover{background:var(--accent)} .cta:active{transform:scale(.985)} .cta:disabled{opacity:.4;cursor:default} [data-theme="light"] .cta:disabled,[data-theme="light"] .btn-primary:disabled{ opacity:1;background:#9FC8DA;color:#fff; } /* icon buttons — chromeless native inline buttons (fills removed) */ .icon-btn{ display:inline-flex;align-items:center;justify-content:center;flex:none; width:var(--dim-inline);height:var(--dim-inline); border:none;border-radius:var(--r-sm);background:transparent; color:rgba(var(--ink-rgb),.78);cursor:pointer; transition:background .15s ease,color .15s ease; } .icon-btn svg{width:18px;height:18px} .icon-btn:hover{background:rgba(var(--ink-rgb),.08);color:var(--text)} .icon-btn.small{width:var(--dim-card-btn);height:var(--dim-card-btn)} .icon-btn.small svg{width:16px;height:16px} .icon-btn.boxed{background:rgba(var(--ink-rgb),.08)} .icon-btn.boxed:hover{background:var(--fill-hover)} .icon-btn.fav{color:rgba(var(--accent-rgb),.95)} /* saved star = accent (native) */ .icon-btn[disabled]{opacity:.4;cursor:default;background:none} .icon-btn.accent{color:var(--accent)} /* tags → native capsule badges */ .tag{ display:inline-flex;align-items:center; font-size:var(--fs-caption2);font-weight:600;letter-spacing:.02em; border:1px solid var(--stroke-strong);border-radius:var(--pill); padding:2px 7px;color:var(--text-2);background:rgba(var(--ink-rgb),.06); } .tag.blue{ color:var(--accent);border-color:rgba(var(--accent-rgb),.35); background:var(--accent-soft); } .tag.gold{ color:var(--favorite);border-color:rgba(var(--favorite-rgb),.35); background:rgba(var(--favorite-rgb),.14); } .tag.green{ color:var(--success);border-color:rgba(var(--success-rgb),.35); background:rgba(var(--success-rgb),.14); } /* segmented control (native register/settings pickers) */ .seg{ display:inline-flex;align-items:center;gap:2px; background:rgba(var(--ink-rgb),.05); border:1px solid var(--stroke-strong);border-radius:var(--r-chip); padding:2px 4px; } .seg button{ border:none;background:transparent;color:var(--text-2);cursor:pointer; font-family:var(--f-sys);font-weight:600;font-size:var(--fs-body); padding:6px 10px;border-radius:8px; transition:background .15s ease,color .15s ease; } .seg button:hover{color:var(--text)} .seg button.active{background:rgba(var(--accent-rgb),.22);color:var(--text)} .seg .sub{display:block;font-weight:400;font-size:var(--fs-caption2);opacity:.7} /* inputs */ textarea,input[type=text],input[type=search],input[type=password],select{ width:100%; background:var(--fill); border:1px solid var(--stroke); color:var(--text);border-radius:var(--r-chip);padding:9px 12px; font-family:var(--f-sys);font-size:var(--fs-subhead); transition:border-color .15s ease; } textarea:focus,input[type=text]:focus,input[type=search]:focus, input[type=password]:focus,select:focus{outline:none;border-color:rgba(var(--accent-rgb),.6)} textarea{resize:vertical;min-height:120px;line-height:1.4} select{appearance:none;-webkit-appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M7 10l5 5 5-5'/%3E%3C/svg%3E"); background-repeat:no-repeat;background-position:right 10px center;background-size:14px; padding-right:32px;width:auto; } /* search field (native: magnifier + field, radius 12, ink .07) */ .list-tools{display:flex;gap:8px;align-items:center;margin-bottom:12px;flex-wrap:wrap} .list-tools input[type=search]{ flex:1;min-width:180px; background:rgba(var(--ink-rgb),.07); border:1px solid var(--stroke); font-size:var(--fs-body); padding:9px 12px 9px 34px; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23808690' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M16.5 16.5 21 21'/%3E%3C/svg%3E"); background-repeat:no-repeat;background-position:12px center;background-size:15px; } /* cards (grouped panels) */ .card{ background:var(--fill); border:1px solid var(--stroke); border-radius:var(--r-card); padding:1rem 1.1rem; } /* empty states: 38pt light icon ink-.35 + subheadline + caption */ .empty{ display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px; text-align:center;color:var(--text-2); padding:3.5rem 1rem;border:none;border-radius:var(--r-card); font-size:var(--fs-subhead);font-weight:600; } .empty svg{width:38px;height:38px;color:rgba(var(--ink-rgb),.35);stroke-width:1.2} .empty small{font-size:var(--fs-caption);font-weight:400;color:rgba(var(--ink-rgb),.45)} /* toast — native capsule: blur + hairline + shadow */ .toast-host{ position:fixed;bottom:calc(24px + env(safe-area-inset-bottom));left:50%; transform:translateX(-50%);z-index:90; display:flex;flex-direction:column;gap:8px;align-items:center; } .toast{ display:flex;align-items:center;gap:6px; background:color-mix(in srgb, var(--panel) 65%, transparent); backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px); border:1px solid var(--stroke-strong);color:var(--text); border-radius:var(--pill);padding:9px 16px;font-size:var(--fs-caption);font-weight:600; box-shadow:0 8px 14px -4px rgba(0,0,0,.4); animation:fadein .18s ease;max-width:min(480px,90vw);text-align:center; } .toast.err{color:var(--danger);border-color:rgba(var(--danger-rgb),.4)} .toast.ok{color:var(--success);border-color:rgba(var(--success-rgb),.4)} /* modal — native overlay: scrim .45, panel r16, ink-.12 stroke, deep shadow */ .modal-backdrop{ position:fixed;inset:0;background:var(--scrim);z-index:80; display:flex;align-items:center;justify-content:center;padding:20px; } .modal{ background:var(--panel); border:1px solid var(--stroke-strong);border-radius:var(--r-panel); padding:1.5rem;max-width:460px;width:100%;max-height:85vh;overflow:auto; box-shadow:0 30px 60px -14px rgba(0,0,0,.6); } .modal h2{font-size:var(--fs-title);font-weight:700;letter-spacing:-.02em;margin:0 0 .6rem} .modal p{color:var(--text-2);font-size:var(--fs-subhead);margin:0 0 1rem;line-height:1.5} .modal .row{display:flex;gap:.6rem;justify-content:flex-end;margin-top:1.2rem} /* bottom sheet (mobile) */ .sheet-backdrop{position:fixed;inset:0;background:var(--scrim);z-index:70} .sheet{ position:fixed;left:0;right:0;bottom:0;z-index:71; background:var(--panel);border-top:1px solid var(--stroke-strong); border-radius:20px 20px 0 0; padding:12px 16px calc(24px + env(safe-area-inset-bottom)); box-shadow:0 -20px 50px -20px rgba(0,0,0,.5); } .sheet a{ display:flex;align-items:center;gap:.8rem;padding:.85rem .6rem;border-radius:var(--r-chip); font-weight:600;font-size:var(--fs-subhead);color:var(--text); } .sheet a svg{width:20px;height:20px;color:var(--text-2)} .sheet a:active{background:var(--fill)} .sheet .grab{width:36px;height:4px;border-radius:2px;background:var(--stroke-strong);margin:0 auto 10px} /* info slide-over (desktop) / bottom sheet (mobile) */ .info-panel{ position:fixed;top:0;right:0;bottom:0;width:min(400px,100vw);z-index:81; background:var(--panel);border-left:1px solid var(--stroke-strong); padding:1.6rem;overflow:auto;animation:slidein .2s ease; box-shadow:-20px 0 50px -24px rgba(0,0,0,.5); } @keyframes slidein{from{transform:translateX(30px);opacity:0}to{transform:none;opacity:1}} .info-panel h2{font-size:var(--fs-title);font-weight:700;letter-spacing:-.02em;margin:0 0 .35rem;padding-right:2.2rem} .info-panel .close{position:absolute;top:1rem;right:1rem;background:rgba(var(--ink-rgb),.08);border-radius:var(--r-sm)} .info-panel ul{list-style:none;margin:1rem 0 1.4rem;padding:0} .info-panel li{ display:flex;gap:.6rem;padding:.45rem 0;color:var(--text-2); font-size:var(--fs-subhead);line-height:1.45; } .info-panel li::before{ content:"";flex:none;width:7px;height:7px;border-radius:50%; background:var(--accent);margin-top:.55em; } [data-platform="mobile"] .info-panel{ top:auto;left:0;width:100%;max-height:80vh;border-left:none; border-top:1px solid var(--stroke-strong);border-radius:20px 20px 0 0; } /* tooltips (desktop): native bubble — elevatedPanel, r9, hairline, 0.4s delay. Absolutely-positioned controls (submit circle) are already positioned — don't demote them to relative. */ [data-platform="desktop"] [data-tip]:not(.submit-circle){position:relative} [data-platform="desktop"] [data-tip]::after{ content:attr(data-tip); position:absolute;bottom:calc(100% + 8px);left:50%;transform:translateX(-50%); background:color-mix(in srgb, var(--elev) 98%, transparent); color:var(--text);border:1px solid rgba(var(--ink-rgb),.14); border-radius:9px;padding:6px 11px; font-size:var(--fs-caption);font-weight:500;line-height:1.3; white-space:nowrap;max-width:320px; box-shadow:0 5px 12px rgba(0,0,0,.45); opacity:0;pointer-events:none;z-index:99; transition:opacity .12s ease;transition-delay:0s; } [data-platform="desktop"] [data-tip]:hover::after{opacity:1;transition-delay:.4s} /* header controls sit at the viewport top — flip their tooltips below */ [data-platform="desktop"] .hd [data-tip]::after{ bottom:auto;top:calc(100% + 8px); } /* onboarding list */ .onb-list{list-style:none;margin:1rem 0;padding:0} .onb-list li{display:flex;gap:.7rem;padding:.45rem 0;color:var(--text-2);font-size:var(--fs-subhead)} .onb-list li svg{width:18px;height:18px;flex:none;color:var(--accent);margin-top:.15rem} /* ============================ translate ================================= */ /* control strip: [input pill] [swap] [output pill / register control]. Mobile: pill + swap left-aligned; the output control renders in .tr-outrow between the cards (JS moves it). Desktop: halves flank a centered swap. */ .tr-strip{display:flex;align-items:center;gap:8px;margin-bottom:10px} [data-platform="desktop"] .tr-strip{margin-bottom:8px} .strip-slot{display:flex;min-width:0} [data-platform="desktop"] .strip-slot{flex:1} [data-platform="desktop"] .strip-slot.left{justify-content:flex-end} [data-platform="desktop"] .strip-slot.right{justify-content:flex-start} .swapbtn .v{display:block} .swapbtn .h{display:none} [data-platform="desktop"] .swapbtn .v{display:none} [data-platform="desktop"] .swapbtn .h{display:block} .desktop-only{display:none} [data-platform="desktop"] .desktop-only{display:inline-flex} [data-platform="desktop"] .desktop-only.hidden{display:none} .pill-lang{ display:inline-flex;align-items:center;gap:8px; padding:6px 12px;border-radius:var(--r-chip); background:var(--accent-fill-strong); border:1px solid var(--accent-stroke); color:var(--text);font-size:var(--fs-subhead);font-weight:600;letter-spacing:.04em; cursor:pointer;white-space:nowrap; transition:background .15s ease; } .pill-lang svg{width:14px;height:14px;color:rgba(var(--ink-rgb),.8)} .pill-lang:hover{background:rgba(var(--accent-rgb),.28)} /* macOS: the INPUT pill wears neutral chrome (native PaneTabButton neutralChrome); the accent chrome stays on the output side only. */ [data-platform="desktop"] .pill-lang.in{ background:rgba(var(--ink-rgb),.05); border-color:rgba(var(--ink-rgb),.10); } [data-platform="desktop"] .pill-lang.in:hover{ background:rgba(var(--ink-rgb),.09); border-color:rgba(var(--ink-rgb),.20); } .swapbtn{ display:inline-flex;align-items:center;justify-content:center;flex:none; width:53px;height:33px;border-radius:var(--r-md); background:color-mix(in srgb, var(--panel) 55%, transparent); border:1.5px solid rgba(var(--accent-rgb),.75); color:rgba(var(--ink-rgb),.98);cursor:pointer; transition:background .15s ease,transform .28s ease; } [data-platform="desktop"] .swapbtn{width:53px;height:39px;margin:0 8px} .swapbtn svg{width:17px;height:17px} .swapbtn svg path{stroke-width:2.2} .swapbtn:hover{background:color-mix(in srgb, var(--panel) 72%, transparent)} .swapbtn.flip svg{transform:rotate(180deg)} .swapbtn svg{transition:transform .28s ease} /* EN→FI output register control: [🔊 chip | divider | register face] in one shell */ .reg-shell{ display:inline-flex;align-items:center;padding:0 4px;gap:0; border-radius:var(--r-chip); background:rgba(var(--ink-rgb),.05); border:1px solid var(--stroke-strong); } .reg-shell .spk{ display:inline-flex;align-items:center;justify-content:center; padding:6px 12px;border:none;border-radius:var(--r-sm); background:transparent;color:rgba(var(--ink-rgb),.8);cursor:pointer; } .reg-shell .spk svg{width:14px;height:14px} .reg-shell .spk.playing,.reg-shell .spk:hover{background:var(--accent-fill-strong);color:var(--text)} .reg-shell .div{width:1px;height:18px;background:rgba(var(--ink-rgb),.14);margin:0 5px} .reg-shell .face{ border:none;border-radius:8px;padding:6px 10px;cursor:pointer; background:rgba(var(--accent-rgb),.22);color:var(--text); font-size:var(--fs-subhead);font-weight:600;white-space:nowrap; transition:background .3s ease; } .reg-shell .face.dim{background:rgba(var(--ink-rgb),.05)} /* editor panes */ .tr-panes{display:flex;flex-direction:column;gap:10px} [data-platform="desktop"] .tr-panes.tr-wide{flex-direction:row;align-items:stretch;gap:16px} [data-platform="desktop"] .tr-panes.tr-wide .tr-pane{flex:1;min-width:0} .tr-pane{display:flex;flex-direction:column;gap:10px;min-width:0} .tr-outrow{display:flex;align-items:center;gap:8px;margin:6px 0 0} .tr-outrow:empty{display:none} .editor-card{ position:relative;display:flex;flex-direction:column; min-height:var(--editor-minh); background:var(--fill); border:1px solid var(--stroke); border-radius:var(--r-editor); transition:border-color .15s ease; } .editor-card.streaming{border-color:rgba(var(--accent-rgb),.6);border-width:1.5px} .editor-card textarea{ flex:1;width:100%;background:transparent;border:none;resize:none; padding:12px 52px 48px 14px;min-height:0; font-size:var(--fs-editor);line-height:1.3;color:var(--text); } .editor-card textarea:focus{outline:none;border:none} .editor-card textarea::placeholder{color:rgba(var(--ink-rgb),.3)} .tr-out{ flex:1;padding:12px 52px 48px 14px; font-size:var(--fs-editor);line-height:1.3;white-space:pre-wrap; overflow:auto;color:var(--text); } .tr-out .placeholder-text{color:rgba(var(--ink-rgb),.3)} /* gutter buttons: chromeless glyphs stacked in the top-right */ .gutter{ position:absolute;top:8px;right:8px; display:flex;flex-direction:column;gap:6px;align-items:center; } .gutter .icon-btn{width:var(--dim-inline);height:var(--dim-inline);background:transparent} .gutter .icon-btn:hover{background:rgba(var(--ink-rgb),.08)} /* submit circle (EditorSubmitButton): accent circle, arrow-up */ .submit-circle{ position:absolute;bottom:10px;right:10px; width:34px;height:34px;border-radius:50%; display:flex;align-items:center;justify-content:center; border:1px solid rgba(var(--accent-rgb),.65); background:rgba(var(--accent-rgb),.92);color:var(--on-accent);cursor:pointer; box-shadow:0 2px 4px rgba(0,0,0,.18); transition:background .15s ease,box-shadow .15s ease,transform .12s ease; } .submit-circle svg{width:15px;height:15px} [data-platform="desktop"] .submit-circle{width:37px;height:37px} .submit-circle:hover{background:var(--accent);box-shadow:0 2px 8px rgba(0,0,0,.3)} .submit-circle:active{transform:scale(.94)} .submit-circle.stop{background:rgba(var(--danger-rgb),.9);border-color:rgba(var(--danger-rgb),.6);color:#fff} /* input assist row pinned to the card's bottom-left (no clip — tooltips render above the chips) */ .assist{ position:absolute;left:12px;bottom:9px;right:52px; display:flex;align-items:center;gap:8px; } .assist-gated{display:flex;align-items:center;gap:8px} .assist-chip{ display:inline-flex;align-items:center;justify-content:center;gap:6px;flex:none; height:31px;min-width:31px;padding:0 8px;border:none;border-radius:var(--r-md); background:transparent;color:rgba(var(--ink-rgb),.8);cursor:pointer; font-size:var(--fs-subhead);font-weight:600; transition:background .15s ease,color .15s ease; } .assist-chip svg{width:19px;height:19px} .assist-chip:hover{background:rgba(var(--ink-rgb),.08);color:var(--text)} .assist-chip.char{font-size:1.05rem} [data-platform="desktop"] .assist-chip{color:rgba(var(--ink-rgb),.92)} [data-platform="desktop"] .assist-chip .lbl{font-size:var(--fs-caption);font-weight:500} [data-platform="mobile"] .assist-chip .lbl{display:none} /* output bottom-left cases pill (auto for Finnish output) */ .cases-pill{ position:absolute;left:12px;bottom:10px; display:inline-flex;align-items:center;gap:6px; padding:10px 17px;border-radius:var(--pill);border:1px solid rgba(var(--accent-rgb),.5); background:var(--accent-fill);color:var(--accent); font-size:var(--fs-body);font-weight:600;cursor:pointer; } .cases-pill svg{width:16px;height:16px} .tr-error{color:var(--danger);font-size:var(--fs-body);margin-top:.6rem} .tr-note{margin-top:1.6rem;font-size:var(--fs-caption);color:var(--text-3)} .tr-note a{color:var(--accent)} /* ==================== phrase cards (history / saved) ==================== */ .entry-list{display:grid;grid-template-columns:1fr;gap:10px} [data-platform="desktop"] .entry-list{grid-template-columns:1fr 1fr} .entry{ display:flex;gap:12px;align-items:flex-start; background:var(--fill); border:1px solid var(--stroke);border-radius:var(--r-card); padding:14px;min-width:0; transition:background .2s ease,border-color .2s ease; } [data-platform="desktop"] .entry:hover{background:rgba(var(--ink-rgb),.085);border-color:rgba(var(--ink-rgb),.18)} .entry .body{flex:1;min-width:0;display:flex;flex-direction:column;gap:8px} .entry .src{color:rgba(var(--ink-rgb),.92);font-size:var(--fs-body);line-height:1.4} .entry .dst{color:rgba(var(--accent-rgb),.95);font-size:var(--fs-subhead);font-weight:600;line-height:1.4} .entry .note{color:var(--text-2);font-size:var(--fs-caption)} .entry .meta{ display:flex;align-items:center;gap:.5rem;flex-wrap:wrap; color:rgba(var(--ink-rgb),.38);font-size:var(--fs-caption); } .entry .meta .spacer{flex:1} /* desktop: vertical action rail on the left */ .entry .rail{display:none} [data-platform="desktop"] .entry .rail{ display:flex;flex-direction:column;gap:8px;flex:none;order:-1; } [data-platform="desktop"] .entry .rail .icon-btn{width:var(--dim-card-btn);height:var(--dim-card-btn)} /* mobile: bottom action strip */ .entry .strip{display:flex;align-items:center;gap:10px;flex-wrap:wrap} [data-platform="desktop"] .entry .strip{display:none} /* ============================== puhepath ================================ */ .pp-wrap{max-width:560px;width:100%;margin:0 auto;display:flex;flex-direction:column} .pp-stats{display:flex;align-items:center;gap:8px;margin-bottom:12px} .stat-chip{ display:inline-flex;align-items:center;gap:5px; padding:8px 12px;border-radius:var(--pill); background:rgba(var(--ink-rgb),.06);border:1px solid var(--stroke); font-size:var(--fs-body);font-weight:600;color:var(--text); } .stat-chip svg{width:13px;height:13px} .stat-chip .lbl{font-size:var(--fs-caption);font-weight:500;color:rgba(var(--ink-rgb),.55)} .stat-chip.xp svg{color:var(--favorite)} .stat-chip.due svg{color:var(--accent)} .pp-stats .where{margin-left:auto;text-align:right} .pp-stats .where .t{font-size:var(--fs-body);font-weight:600} .pp-stats .where .c{font-size:var(--fs-caption2);color:var(--text-3)} /* section / chapter banner cards */ .pp-banner{ border-radius:var(--r-card);padding:16px;text-align:center; background:rgba(var(--accent-rgb),.08); border:1px solid rgba(var(--accent-rgb),.22); margin:18px 0 10px; } .pp-banner .code{ font-size:var(--fs-caption2);font-weight:600;letter-spacing:.14em; text-transform:uppercase;color:var(--accent); } .pp-banner h2{font-size:var(--fs-title);font-weight:700;letter-spacing:-.02em;margin:.2rem 0} .pp-banner .sub{font-size:var(--fs-caption);color:rgba(var(--ink-rgb),.55)} /* unit header row */ .pp-unit-head{display:flex;align-items:center;gap:12px;padding:12px 0;text-align:left;width:100%} .pp-unit-head .t{font-size:var(--fs-headline);font-weight:600} .pp-unit-head .o{font-size:var(--fs-caption);color:rgba(var(--ink-rgb),.55)} .pp-unit-head .bookbtn{ margin-left:auto;flex:none;width:36px;height:36px;border-radius:50%; display:flex;align-items:center;justify-content:center;border:none;cursor:pointer; background:var(--accent-soft);color:var(--accent); } .pp-unit-head .bookbtn svg{width:16px;height:16px} /* the serpentine node path */ .pp-path{display:flex;flex-direction:column;align-items:center} .pp-noderow{position:relative;height:91px;width:100%;display:flex;justify-content:center} .pp-bubble{ position:relative;width:76px;height:76px;border:none;background:none; padding:0;cursor:pointer;flex:none; transform:translateX(var(--sx,0)); } .pp-bubble:disabled{cursor:default} .pp-ring{position:absolute;inset:0} .pp-ring svg{width:100%;height:100%} .pp-ring .track{stroke:rgba(var(--ink-rgb),.10);fill:none;stroke-width:6} .pp-ring .arc{ stroke:var(--accent);fill:none;stroke-width:6;stroke-linecap:round; transform:rotate(-90deg);transform-origin:center; } .pp-bubble.done .arc{stroke:var(--favorite)} .pp-core{ position:absolute;inset:8px;border-radius:50%; display:flex;align-items:center;justify-content:center; background:var(--accent);color:var(--on-accent); } .pp-core svg{width:26px;height:26px} .pp-bubble.locked .pp-core{background:rgba(var(--ink-rgb),.12);color:rgba(var(--ink-rgb),.4)} .pp-bubble.done .pp-core{background:var(--favorite);color:#12141A} .pp-bubble.next .pp-core svg{fill:currentColor} /* native solid star */ /* frontier pulsing halo */ .pp-bubble.next::before{ content:"";position:absolute;inset:-6px;border-radius:50%; background:var(--accent);filter:blur(16px);z-index:-1; animation:pp-halo 2.4s ease-in-out infinite; } @keyframes pp-halo{ 0%,100%{opacity:.24;transform:scale(1)} 50%{opacity:.44;transform:scale(1.14)} } @media (prefers-reduced-motion: reduce){ .pp-bubble.next::before{animation:none;opacity:.3} } /* connectors between nodes (SVG S-curves drawn by JS). Fixed 200px-wide coordinate space centered under the nodes so curve endpoints track the nodes' fixed-px serpentine offsets at every viewport width. */ .pp-conn{height:48px;width:200px;display:block;overflow:visible;margin:0 auto} .pp-conn path{fill:none;stroke-width:5;stroke-linecap:round} .pp-conn.done path{stroke:rgba(var(--favorite-rgb),.85)} .pp-conn.active path{stroke:var(--accent)} .pp-conn.locked path{stroke:rgba(var(--ink-rgb),.13);stroke-dasharray:5 7} /* download gate */ .pp-gate{ border:1px solid rgba(var(--accent-rgb),.4); background:linear-gradient(180deg, rgba(var(--accent-rgb),.12), transparent); border-radius:var(--r-card);padding:1.4rem;text-align:center;margin-top:1rem; } .pp-gate h3{font-size:var(--fs-headline);font-weight:700;margin:.2rem 0 .4rem} .pp-gate p{color:var(--text-2);margin:0 0 1rem;font-size:var(--fs-subhead)} /* ---- lesson runner (native full-bleed) ---- */ .lesson{max-width:620px;width:100%;margin:0 auto;display:flex;flex-direction:column;flex:1} .ex-top{display:flex;align-items:center;gap:12px;padding:4px 0 12px;margin-bottom:8px;border-bottom:1px solid var(--sep)} .ex-close{ width:34px;height:34px;flex:none;border:none;border-radius:var(--r-sm); background:rgba(var(--ink-rgb),.08);color:var(--text);cursor:pointer; display:flex;align-items:center;justify-content:center; } .ex-close svg{width:16px;height:16px} .ex-bar{flex:1;height:12px;border-radius:var(--pill);background:rgba(var(--ink-rgb),.10);overflow:hidden} .ex-bar i{display:block;height:100%;background:var(--accent);border-radius:var(--pill);transition:width .25s ease} .ex-q{font-size:var(--fs-editor-title);font-weight:600;margin:14px 0 18px;line-height:1.3} .ex-instruction{font-size:var(--fs-body);font-weight:600;color:var(--text-2);margin-bottom:6px} .ex-opts{display:flex;flex-direction:column;gap:14px} .ex-opt{ text-align:left;border-radius:var(--r-cta); padding:17px 16px;cursor:pointer; background:rgba(var(--ink-rgb),.06); border:1px solid rgba(var(--ink-rgb),.14); color:var(--text);font-size:var(--fs-lesson-opt);font-weight:600;font-family:var(--f-sys); transition:background .15s ease,border-color .15s ease; } [data-platform="desktop"] .ex-opt:hover{background:rgba(var(--ink-rgb),.1)} .ex-opt.sel{background:var(--accent-fill);border:1.5px solid rgba(var(--accent-rgb),.8)} .ex-opt.good{background:rgba(var(--success-rgb),.18);border:1.5px solid rgba(var(--success-rgb),.85);color:var(--text)} .ex-opt.bad{background:rgba(var(--danger-rgb),.18);border:1.5px solid rgba(var(--danger-rgb),.8);color:var(--text)} .ex-opt:disabled:not(.good):not(.bad){opacity:.6} /* word bank */ .ex-tiles{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:14px} .ex-tile{ background:var(--panel); border:1px solid rgba(var(--accent-rgb),.4); color:var(--text);border-radius:var(--r-md);padding:10px 14px;cursor:pointer; font-size:var(--fs-body);font-weight:600;font-family:var(--f-sys); } .ex-tile:disabled{opacity:.35;cursor:default} .ex-built{ min-height:52px;border-radius:var(--r-chip); background:rgba(var(--ink-rgb),.04);border:1px solid var(--stroke); padding:10px;display:flex;flex-wrap:wrap;gap:10px;margin-bottom:14px; } /* typed answers */ .ex-typed input[type=text]{ font-size:var(--fs-editor);padding:14px;border-radius:var(--r-chip); border-width:1.5px; } .ex-typed input.good{border-color:rgba(var(--success-rgb),.8)} .ex-typed input.bad{border-color:rgba(var(--danger-rgb),.8)} /* verdict / feedback banner */ .ex-verdict{ display:flex;align-items:flex-start;gap:10px; border-radius:var(--r-chip);padding:12px 14px;margin-top:16px; font-size:var(--fs-lesson-fb);font-weight:600; } .ex-verdict.good{background:rgba(var(--success-rgb),.14);color:var(--success)} .ex-verdict.bad{background:rgba(var(--danger-rgb),.12);color:var(--danger)} .ex-verdict small{display:block;font-size:var(--fs-body);font-weight:600;color:var(--text);margin-top:2px} .ex-foot{display:flex;flex-direction:column;margin-top:auto;padding-top:16px;gap:10px} .match-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px 14px} .match-grid .ex-opt{padding:12px 10px;border-radius:var(--r-md);text-align:center} .gb-item{display:flex;align-items:center;gap:.6rem;padding:.4rem 0;border-bottom:1px solid var(--sep)} .gb-item:last-child{border-bottom:none} .gb-item .fi{font-weight:600;color:var(--accent)} .gb-item .k{color:var(--text-3);font-size:var(--fs-caption)} .gb-item .e{color:var(--text-2);font-size:var(--fs-body);margin-left:auto;text-align:right} /* audio prompt button (exercise) */ .ex-audio{ width:54px;height:54px;border-radius:50%;border:none;cursor:pointer; background:var(--accent);color:var(--on-accent); display:flex;align-items:center;justify-content:center; } .ex-audio svg{width:26px;height:26px} /* ============================== decks =================================== */ .deck-grid{display:grid;grid-template-columns:1fr;gap:10px} [data-platform="desktop"] .deck-grid{grid-template-columns:1fr 1fr} .deck-card{ position:relative;display:flex;flex-direction:column;gap:8px; background:var(--fill);border:1px solid var(--stroke); border-radius:var(--r-card);padding:14px;cursor:pointer;text-align:left; color:var(--text);font-family:var(--f-sys);min-height:0; transition:background .2s ease,border-color .2s ease; } [data-platform="desktop"] .deck-card:not(.locked):hover{background:rgba(var(--ink-rgb),.085);border-color:rgba(var(--ink-rgb),.18)} .deck-card .toprow{display:flex;align-items:center;gap:10px;min-width:0} .deck-glyph{ width:34px;height:34px;flex:none;border-radius:var(--r-md); display:flex;align-items:center;justify-content:center; background:rgba(var(--ink-rgb),.06);color:rgba(var(--accent-rgb),.9); } .deck-glyph svg{width:18px;height:18px} .deck-card .t{font-size:var(--fs-headline);font-weight:600;min-width:0} .deck-card .n{color:rgba(var(--ink-rgb),.6);font-size:var(--fs-caption)} .deck-badges{display:flex;align-items:center;gap:6px;flex-wrap:wrap} .deck-prog{display:flex;align-items:center;gap:8px} .deck-prog .track{flex:1;height:6px;border-radius:var(--pill);background:rgba(var(--ink-rgb),.10);overflow:hidden} .deck-prog .track i{display:block;height:100%;border-radius:var(--pill);background:rgba(var(--accent-rgb),.85)} .deck-prog.zero .track i{background:rgba(var(--ink-rgb),.3)} .deck-prog.donefill .track i{background:rgba(var(--success-rgb),.85)} .deck-prog .st{font-size:var(--fs-caption2);color:var(--text-3);white-space:nowrap} .deck-card.locked{cursor:default} .deck-card.locked .t,.deck-card.locked .n{opacity:.45} .deck-lock{ position:absolute;inset:0;border-radius:var(--r-card); display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.3rem; background:color-mix(in srgb, var(--bg-top) 45%, transparent); backdrop-filter:blur(1.5px);-webkit-backdrop-filter:blur(1.5px); color:var(--text);font-size:var(--fs-caption);text-align:center;padding:0 .8rem; } .deck-lock svg{width:20px;height:20px;color:var(--favorite)} /* flashcard review — native review panel chrome */ .flip-wrap{max-width:520px;width:100%;margin:0 auto} .flip-meta{ display:flex;justify-content:space-between;align-items:center; margin-bottom:12px;color:var(--text-3);font-size:var(--fs-caption); } .flip-card{ width:100%;min-height:260px;cursor:pointer; display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.7rem; background:var(--panel); border:1px solid rgba(var(--accent-rgb),.35); border-radius:var(--r-editor);padding:1.6rem;text-align:center; color:var(--text);font-family:var(--f-sys); box-shadow:0 18px 40px -18px rgba(0,0,0,.7); } .flip-card .big{font-weight:700;font-size:var(--fs-editor-title);letter-spacing:-.02em;line-height:1.25} .flip-card .side-label{ font-size:var(--fs-caption);font-weight:600;letter-spacing:.1em; text-transform:uppercase;color:rgba(var(--accent-rgb),.85); } .flip-card .ex{color:var(--text-2);font-size:var(--fs-subhead)} .reg-forms{display:flex;flex-direction:column;gap:.4rem;width:100%} .reg-forms .rf{display:flex;justify-content:space-between;gap:1rem;border-top:1px solid var(--sep);padding-top:.4rem;font-size:var(--fs-subhead)} .reg-forms .rf b{font-weight:600;color:var(--accent)} .flip-foot{display:flex;gap:.6rem;justify-content:center;margin-top:1rem;flex-wrap:wrap} /* ============================== word ==================================== */ .word-hero{ position:relative;max-width:560px;width:100%; border-radius:var(--r-hero);padding:22px; border:1px solid rgba(var(--ink-rgb),.12); overflow:hidden;min-height:300px; display:flex;flex-direction:column; background: linear-gradient(135deg,#0D1A3D 0%,#083B45 38%,#291A57 72%,#04102A 100%); box-shadow:inset 0 1px 0 rgba(255,255,255,.18); } [data-theme="light"] .word-hero{ background: linear-gradient(135deg,#D6EFEB 0%,#CDEBF8 30%,#EAF5FB 55%,#E2E0FC 80%,#DDF1ED 100%); box-shadow:inset 0 1px 0 rgba(255,255,255,.8); } .word-hero .eyebrow{ color:rgba(var(--ink-rgb),.55);letter-spacing:.1em;font-weight:600; } .word-hero .fi{ font-weight:700;font-size:var(--fs-display);letter-spacing:-.02em; line-height:1.15;margin-top:1.6rem;display:flex;align-items:baseline;gap:.4rem;flex-wrap:wrap; } .word-hero .en{color:rgba(var(--ink-rgb),.65);font-size:var(--fs-headline);font-weight:600;margin:.2rem 0 1.4rem} .word-ex{margin:.9rem 0} .word-ex .x-fi{font-size:var(--fs-editor);line-height:1.35;display:block} .word-ex .x-fi .icon-btn{display:inline-flex;vertical-align:middle;margin-left:.2rem} .word-ex .x-en{color:rgba(var(--ink-rgb),.5);font-size:var(--fs-body);margin-top:.3rem} .word-actions{display:flex;align-items:center;gap:.5rem;margin-top:auto;padding-top:1.6rem} .word-actions .icon-btn.boxed{border-radius:var(--r-md)} .word-prev{margin-top:1.6rem;max-width:560px} .word-prev h2{font-size:var(--fs-headline);font-weight:600;margin-bottom:.6rem} /* ============================ resources ================================= */ .res-tier{margin-bottom:1.5rem} .res-tier>h2{font-size:var(--fs-headline);font-weight:600;margin-bottom:.2rem} .res-tier>.sub{color:var(--text-3);font-size:var(--fs-caption);margin-bottom:.7rem} .res-row{ display:flex;align-items:baseline;gap:.7rem;padding:.7rem .3rem; border-bottom:1px solid var(--sep);font-size:var(--fs-subhead); } .res-row .n{font-weight:600} .res-row .d{color:var(--text-3);font-size:var(--fs-caption)} .res-row a{color:var(--accent);font-size:var(--fs-caption);font-weight:600;white-space:nowrap;margin-left:auto} .res-fold{margin:.4rem 0 .8rem} .res-fold>button{ display:flex;align-items:center;gap:.5rem;width:100%;text-align:left; background:rgba(var(--ink-rgb),.07);border:1px solid var(--stroke); border-radius:var(--r-chip);padding:.7rem .95rem;color:var(--text);cursor:pointer; font-family:var(--f-sys);font-weight:600;font-size:var(--fs-subhead); } .res-fold>button svg{width:16px;height:16px;transition:transform .15s} .res-fold.open>button svg{transform:rotate(90deg)} .lesson-row{ display:flex;align-items:baseline;gap:.6rem;padding:.55rem .3rem; border-bottom:1px solid var(--sep);cursor:pointer;font-size:var(--fs-subhead); } .lesson-row:hover .n{color:var(--accent)} .lesson-view{font-size:var(--fs-prose)} .lesson-view h2{font-size:var(--fs-title);font-weight:700;letter-spacing:-.02em;margin:.6rem 0 .4rem} .lesson-view .rule{margin:.8rem 0;line-height:1.6} .lesson-view table{width:100%;border-collapse:separate;border-spacing:0;margin:.8rem 0;font-size:var(--fs-body); border:1px solid var(--stroke);border-radius:var(--r-md);overflow:hidden} .lesson-view th,.lesson-view td{border-bottom:1px solid var(--sep);padding:.5rem .7rem;text-align:left} .lesson-view th{background:rgba(var(--ink-rgb),.05);color:var(--text-2);font-weight:600} .lesson-view tr:last-child td{border-bottom:none} .lesson-view .exrow{padding:.45rem 0;border-bottom:1px solid var(--sep)} .lesson-view .exrow .fi{font-weight:600;color:var(--accent)} .lesson-view .exrow .note{color:var(--text-3);font-size:var(--fs-caption)} .lesson-view h3{font-size:var(--fs-headline);font-weight:600;margin:1.1rem 0 .4rem} .err-list{margin:0;padding:0} .err-list li{color:var(--text-2);font-size:var(--fs-body);padding:.25rem 0;list-style:none} .teacher-card{margin-top:.8rem} .teacher-card h3{font-size:var(--fs-headline);font-weight:600;margin:0 0 .2rem} .teacher-card ul{margin:.5rem 0 .8rem 1.1rem;color:var(--text-2);font-size:var(--fs-body);padding:0} /* ============================ settings ================================== */ .set-wrap{max-width:640px;width:100%} [data-platform="mobile"] .set-wrap{max-width:none} .set-group{margin-bottom:28px} .set-group>h2{ font-size:var(--fs-body);font-weight:600;letter-spacing:.06em;text-transform:uppercase; color:rgba(var(--ink-rgb),.5);margin:0 0 8px;padding-left:16px; } .set-card{ background:color-mix(in srgb, var(--panel) 40%, transparent); backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px); border:1px solid var(--sep);border-radius:var(--r-panel); overflow:hidden; } .set-row{ display:flex;align-items:center;justify-content:space-between;gap:1rem; min-height:44px;padding:11px 16px;flex-wrap:wrap; } .set-row + .set-row{border-top:.5px solid var(--sep);margin-left:16px;padding-left:0} .set-row .l{font-weight:500;font-size:var(--fs-subhead)} .set-row .d{color:rgba(var(--ink-rgb),.45);font-size:var(--fs-body)} .set-foot{font-size:var(--fs-body);color:rgba(var(--ink-rgb),.45);padding:8px 16px 0} /* toggle switch (native 40×24 capsule) */ .toggle{ position:relative;width:40px;height:24px;flex:none;border:none;cursor:pointer; border-radius:var(--pill);background:rgba(var(--ink-rgb),.22); transition:background .2s ease; } .toggle::after{ content:"";position:absolute;top:2px;left:2px;width:20px;height:20px;border-radius:50%; background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.3); transition:transform .2s ease; } .toggle.on{background:var(--accent)} .toggle.on::after{transform:translateX(16px)} /* three-card appearance selector (System = diagonal split) */ .appearance-cards{display:flex;gap:10px;width:100%} .app-card{ flex:1;display:flex;flex-direction:column;gap:6px;align-items:center; background:none;border:none;padding:0;cursor:pointer;min-width:0; } .app-card .prev{ position:relative;width:100%;height:62px;border-radius:var(--r-md);overflow:hidden; border:1px solid rgba(var(--ink-rgb),.16); transition:box-shadow .2s ease,border-color .2s ease; } .app-card.sel .prev{border-color:transparent;box-shadow:0 0 0 2px var(--accent)} .app-card .lbl{ font-size:var(--fs-body);font-weight:500;color:var(--text-2); display:flex;align-items:center;gap:4px; } .app-card.sel .lbl{color:var(--text);font-weight:600} .app-card .lbl svg{width:14px;height:14px;color:var(--accent)} /* mini-UI halves */ .mini{position:absolute;inset:0;padding:6px 8px;display:flex;flex-direction:column;gap:4px} .mini .bar{height:8px;border-radius:3px;display:flex;align-items:center;gap:3px;padding:0 3px} .mini .dot{width:4px;height:4px;border-radius:50%} .mini .ln{height:3px;border-radius:2px;width:70%} .mini .cap{height:6px;border-radius:var(--pill);width:40%} .mini.light{background:#F5F7FC} .mini.light .bar{background:#fff;box-shadow:0 0 0 .5px rgba(18,20,26,.1)} .mini.light .dot{background:#007099} .mini.light .ln{background:rgba(18,20,26,.16)} .mini.light .cap{background:#007099} .mini.dark{background:#0A0D16} .mini.dark .bar{background:#1C1F29} .mini.dark .dot{background:#64D2FF} .mini.dark .ln{background:rgba(255,255,255,.16)} .mini.dark .cap{background:#64D2FF} .mini.split-d{clip-path:polygon(100% 0,100% 100%,0 100%)} .mini-divider{ position:absolute;inset:0; background:linear-gradient(to top right,transparent calc(50% - .5px),rgba(var(--ink-rgb),.25) 50%,transparent calc(50% + .5px)); } /* text-size slider */ .size-slider{display:flex;align-items:center;gap:10px;min-width:180px} .size-slider span{font-weight:600;color:var(--text-2)} .size-slider span:first-child{font-size:.7rem} .size-slider span:last-child{font-size:1.05rem} input[type=range]{ flex:1;appearance:none;-webkit-appearance:none;height:4px;border-radius:2px; background:rgba(var(--ink-rgb),.2);outline:none;padding:0;border:none; } input[type=range]::-webkit-slider-thumb{ appearance:none;-webkit-appearance:none;width:20px;height:20px;border-radius:50%; background:#fff;box-shadow:0 1px 4px rgba(0,0,0,.35);cursor:pointer; } input[type=range]::-moz-range-thumb{ width:20px;height:20px;border-radius:50%;border:none; background:#fff;box-shadow:0 1px 4px rgba(0,0,0,.35);cursor:pointer; } /* ========================= puhepal / gates ============================== */ .gate-page{ max-width:560px;width:100%;margin:4vh auto 0;text-align:center; background:rgba(var(--ink-rgb),.05); border:1px solid var(--stroke);border-radius:var(--r-card); padding:24px;display:flex;flex-direction:column;align-items:center;gap:.6rem; } .gate-page .glyph{ width:76px;height:76px;border-radius:50%;margin:0 auto .6rem; background:var(--accent-soft); display:flex;align-items:center;justify-content:center;color:var(--accent); } .gate-page .glyph svg{width:36px;height:36px} .gate-page h1{font-size:var(--fs-title);font-weight:700;letter-spacing:-.02em;margin:0} .gate-page p{color:rgba(var(--ink-rgb),.6);margin:0 0 .8rem;font-size:var(--fs-subhead);max-width:400px} /* ===================== page-module additions ============================ */ /* lists: empty states span the desktop 2-col grid */ .entry-list > .empty{grid-column:1/-1} /* PuhePath lesson additions */ .ex-verdict svg{width:18px;height:18px;flex:none;margin-top:2px} .ex-keys{display:flex;gap:10px;margin-top:10px} .ex-keys .assist-chip{min-width:46px;height:40px;border-radius:var(--r-md);background:rgba(var(--ink-rgb),.06)} .ex-keys .assist-chip:hover{background:rgba(var(--ink-rgb),.12)} /* decks */ .deck-card.locked .deck-glyph{opacity:.45} .flip-meta label{display:inline-flex;align-items:center;gap:5px;cursor:pointer} .flip-meta input[type=checkbox]{accent-color:var(--accent);margin:0} .flip-card .hint{font-size:var(--fs-caption);color:rgba(var(--ink-rgb),.45)} /* word of the day */ .word-hero .fi .icon-btn, .word-hero .x-fi .icon-btn{align-self:center} .word-prev .res-row .acts{margin-left:auto;display:flex;gap:.2rem;align-self:center} /* resources */ .lesson-row .n{font-weight:600} .lesson-row .d{margin-left:auto;white-space:nowrap;color:var(--text-3);font-size:var(--fs-caption)} .res-fold .fold-note{color:var(--text-3);font-size:var(--fs-caption);padding:.5rem .3rem} .lesson-view .exrow .fi-line{display:flex;align-items:center;gap:.5rem} .lesson-view .exrow .en{color:var(--text-2);font-size:var(--fs-body);margin-top:.15rem} /* icon sizing inside CTAs and chips */ .btn-primary svg{width:18px;height:18px} .chip svg{width:15px;height:15px} .gate-page .faint{font-size:var(--fs-caption);color:var(--text-3);margin:.2rem 0 0;max-width:400px} /* ---- opened deck (native LearningOpenedDeck) ---- */ .deck-head{display:flex;align-items:flex-start;gap:12px;margin-bottom:12px} .deck-head .chip.back{flex:none;margin-top:4px} .deck-head .chip.back svg{width:14px;height:14px} .deck-head .tt{min-width:0} .deck-head h1{ font-size:var(--fs-title);font-weight:700;letter-spacing:-.02em; margin:0 0 6px;line-height:1.2; } .chip.prominent{ background:rgba(var(--accent-rgb),.92);color:var(--on-accent); border-color:transparent;font-weight:600; } .chip.prominent:hover{background:var(--accent);border-color:transparent} /* rotating picture-tile tints (native Palette.cardTints; index 0 = accent) */ .dtile{ width:44px;height:44px;flex:none;border-radius:var(--r-chip); display:flex;align-items:center;justify-content:center; background:rgba(var(--tint),.10); box-shadow:inset 0 0 0 1px rgba(var(--tint),.22); color:rgba(var(--tint),.85); } .dtile svg{width:20px;height:20px} .tint-0{--tint:var(--accent-rgb)} .tint-1{--tint:122,176,255} .tint-2{--tint:186,158,255} .tint-3{--tint:255,140,189} .tint-4{--tint:255,184,92} .tint-5{--tint:120,214,140} [data-theme="light"] .tint-1{--tint:33,92,199} [data-theme="light"] .tint-2{--tint:112,69,194} [data-theme="light"] .tint-3{--tint:184,41,112} [data-theme="light"] .tint-4{--tint:199,105,15} [data-theme="light"] .tint-5{--tint:33,128,69} /* study-status glyph pinned top-right of the row (native DeckCardRow) */ .entry{position:relative} .deck-row .body{padding-right:26px} .row-status{ position:absolute;top:12px;right:12px; color:rgba(var(--ink-rgb),.35); } .row-status svg{width:15px;height:15px} .row-status.on{color:var(--success)} .row-status i{display:block;width:13px;height:13px;border-radius:50%;border:1.7px solid currentColor} /* ---- PuhePath tier strip (native TierBarView) ---- */ .tier-bar{display:flex;align-items:center;gap:10px;margin:2px 0 14px} .tier-me{display:flex;flex-direction:column;align-items:center;gap:2px;flex:none} .tier-me .ava{ width:53px;height:53px;border-radius:50%; background:var(--accent-fill); box-shadow:inset 0 0 0 1.5px rgba(var(--accent-rgb),.45); display:flex;align-items:center;justify-content:center;font-size:24px; } .tier-me .nm{font-size:var(--fs-caption2);font-weight:500;color:var(--text)} .tier-track{position:relative;flex:1;height:10px;border-radius:var(--pill);background:rgba(var(--ink-rgb),.08);margin-right:16px} .tier-track i{ position:absolute;left:0;top:0;bottom:0;border-radius:var(--pill); background:var(--accent); } .tier-track .med{ position:absolute;top:50%;transform:translate(-50%,-50%); width:32px;height:32px;border-radius:50%; background:var(--panel); box-shadow:inset 0 0 0 1px rgba(var(--ink-rgb),.20); display:flex;align-items:center;justify-content:center;font-size:16px; filter:grayscale(1);opacity:.55; } .tier-track .med.earned{ background:var(--accent-fill);filter:none;opacity:1; box-shadow:inset 0 0 0 1.5px var(--accent); } .tier-track .med .q{ position:absolute;top:calc(100% + 2px);font-size:var(--fs-caption2); color:rgba(var(--ink-rgb),.55);filter:none; } .tier-next{font-size:var(--fs-caption);color:rgba(var(--ink-rgb),.55);text-align:right;margin:-4px 0 14px} /* touch devices: neutralize sticky :hover states (iOS keeps hover after tap) */ @media (hover: none){ .chip:not(.static):hover,.btn-ghost:hover{background:rgba(var(--ink-rgb),.07);border-color:var(--stroke-strong)} .icon-btn:hover{background:transparent;color:rgba(var(--ink-rgb),.78)} .icon-btn.boxed:hover{background:rgba(var(--ink-rgb),.08)} .hd-gear:not(.active):hover{opacity:.45;background:rgba(var(--ink-rgb),.075)} .swapbtn:hover{background:color-mix(in srgb, var(--panel) 55%, transparent)} .pill-lang:hover{background:var(--accent-fill-strong)} .assist-chip:hover{background:transparent;color:rgba(var(--ink-rgb),.8)} .reg-shell .spk:hover{background:transparent;color:rgba(var(--ink-rgb),.8)} .btn-primary:hover{background:rgba(var(--accent-rgb),.92)} .cta:hover{background:rgba(var(--accent-rgb),.92)} .seg button:not(.active):hover{color:var(--text-2)} } /* ============================ scrollbars ================================ */ [data-platform="desktop"] ::-webkit-scrollbar{width:10px;height:10px} [data-platform="desktop"] ::-webkit-scrollbar-thumb{ background:rgba(var(--ink-rgb),.18);border-radius:5px; border:2px solid transparent;background-clip:content-box; } [data-platform="desktop"] ::-webkit-scrollbar-track{background:transparent}