/* Component layer — Apple-style system controls and News-inspired surfaces shared by both apps. Adds .btn / .input / .pill / .card / .field-label primitives, plus a global :focus-visible ring so every interactive element gets keyboard focus feedback without an opt-in. Apps mount with or . The .kid scope overrides the primary CTA palette to warm orange while keeping the rest of the Geist palette intact. */ /* ── Reset & baseline ─────────────────────────────────────────────── */ html, body { font-family: var(--font-sans); color: var(--gray-1000); background: var(--background-200); min-height: 100%; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } [x-cloak] { display: none !important; } /* Strip the browser's blue outline; the global :focus-visible rule below puts a proper two-layer ring back on every interactive node. */ button, [role="button"], a, input, select, textarea, [tabindex] { outline: none; } button, [role="button"], select, input[type="checkbox"], input[type="radio"] { cursor: pointer; } :where(button, a, input, textarea, select, [tabindex]):focus-visible { outline: none; box-shadow: 0 0 0 2px var(--background-100), 0 0 0 4px rgba(0, 113, 227, 0.36); border-radius: var(--radius-sm); } /* ── Buttons — Geist sizes: 32 / 40 / 48 px, padding 6 / 10 / 14, ─── */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 40px; padding: 0 14px; font: var(--button-14); font-family: var(--font-sans); font-weight: 600; border-radius: var(--radius-sm); border: 0; cursor: pointer; white-space: nowrap; letter-spacing: 0; transition: background var(--duration-state) var(--ease-out), color var(--duration-state) var(--ease-out), box-shadow var(--duration-state) var(--ease-out), opacity var(--duration-state) var(--ease-out); user-select: none; } .btn svg, .btn [x-html] svg, .segmented-option svg { width: 16px; height: 16px; flex-shrink: 0; } .btn:disabled, .btn[aria-disabled="true"] { background: var(--gray-100); color: var(--gray-700); cursor: not-allowed; box-shadow: none; } .btn-sm { height: 32px; padding: 0 10px; } .btn-lg { height: 48px; padding: 0 18px; font: var(--button-16); font-family: var(--font-sans); font-weight: 600; } .btn-primary { background: var(--blue-700); color: var(--background-100); box-shadow: 0 1px 2px rgba(0, 113, 227, 0.12); } .btn-primary:hover { background: var(--blue-800); } .btn-primary:active { background: var(--blue-900); } /* kid app — primary CTA stays warm; secondary / tertiary / error inherit the neutral Geist palette so the warm accent stays scarce. */ body.kid .btn-primary { background: var(--warm-700); color: #fff; } body.kid .btn-primary:hover { background: var(--warm-800); } body.kid .btn-primary:active { background: var(--warm-900); } .btn-secondary { background: var(--background-100); color: var(--gray-1000); box-shadow: inset 0 0 0 1px var(--gray-alpha-400); } .btn-secondary:hover { background: var(--background-200); } .btn-secondary:active { background: var(--gray-100); } .btn-tertiary { background: transparent; color: var(--gray-900); } .btn-tertiary:hover { background: var(--gray-alpha-100); color: var(--gray-1000); } .btn-tertiary:active { background: var(--gray-alpha-200); } .btn-error { background: var(--red-800); color: #fff; } .btn-error:hover { background: var(--red-900); } .btn-error:active { background: var(--red-1000); } /* Subtle press feedback for every button — capped at 1px so it stays physical without becoming bouncy. Disabled under reduced-motion. */ .btn:not(:disabled):not([aria-disabled="true"]):active { transform: translateY(0.5px); } /* Loading variant — hides label spacing isn't disrupted, swaps in a spinner using the inherited text color. Caller adds .btn-loading while keeping the button enabled or disabled at their discretion. */ .btn-loading { position: relative; color: transparent !important; pointer-events: none; } .btn-loading > * { visibility: hidden; } .btn-loading::after { content: ""; position: absolute; inset: 0; margin: auto; width: 16px; height: 16px; border-radius: 50%; border: 2px solid currentColor; border-top-color: transparent; color: var(--background-100); animation: kr-spin 0.8s linear infinite; } .btn-secondary.btn-loading::after, .btn-tertiary.btn-loading::after { color: var(--gray-900); } @keyframes kr-spin { to { transform: rotate(360deg); } } /* Square icon-only button — sized to match neighboring controls. Stays in the same family as .btn so focus rings, disabled state and active press feedback all apply automatically. */ .btn-icon { width: 40px; padding: 0; flex-shrink: 0; } .btn-icon.btn-sm { width: 32px; } .btn-icon.btn-xs { width: 28px; height: 28px; } .btn-icon.btn-lg { width: 48px; } .btn-icon svg { width: 18px; height: 18px; } .btn-icon.btn-sm svg { width: 16px; height: 16px; } .btn-icon.btn-xs svg { width: 14px; height: 14px; } /* ── Input / select / textarea ────────────────────────────────────── */ .input { display: block; width: 100%; height: 40px; padding: 0 12px; font: var(--label-14); font-family: var(--font-sans); color: var(--gray-1000); background: var(--background-100); border-radius: var(--radius-sm); border: 0; box-shadow: inset 0 0 0 1px var(--gray-alpha-400); transition: background var(--duration-state) var(--ease-out), box-shadow var(--duration-state) var(--ease-out); } .input::placeholder { color: var(--gray-700); } .input:hover { box-shadow: inset 0 0 0 1px var(--gray-alpha-500); } .input:focus { box-shadow: inset 0 0 0 1px var(--blue-700), 0 0 0 4px rgba(0, 113, 227, 0.12); } .input:disabled { background: var(--gray-100); color: var(--gray-700); cursor: not-allowed; } .input-sm { height: 32px; padding: 0 10px; font: var(--label-13); font-family: var(--font-sans); } .input-lg { height: 48px; padding: 0 14px; font: var(--label-16); font-family: var(--font-sans); } textarea.input { height: auto; padding-top: 10px; padding-bottom: 10px; line-height: 1.5; } .field-label { display: block; font: var(--label-13); font-family: var(--font-sans); color: var(--gray-800); margin-bottom: 8px; letter-spacing: 0; font-weight: 600; } .field-hint { font: var(--label-12); font-family: var(--font-sans); color: var(--gray-700); margin-top: 8px; } /* Inline validation states — sit on top of .input. Append .input-error to the same node and the focus ring switches to a red glow so the field stays the field, not a new component. */ .input-error, .input.input-error { box-shadow: inset 0 0 0 1px var(--red-700), var(--ring-error); } .input-error:focus, .input.input-error:focus { box-shadow: inset 0 0 0 1px var(--red-700), var(--ring-error); } .input-success, .input.input-success { box-shadow: inset 0 0 0 1px var(--green-700), var(--ring-success); } /* The small line of red text that sits under a field. Pair an icon (icons.circleX or similar) before the message via a flex parent. */ .field-error { display: flex; align-items: flex-start; gap: 6px; font: var(--label-12); font-family: var(--font-sans); color: var(--red-900); margin-top: 6px; animation: kr-field-error-in var(--duration-state) var(--ease-out) both; } .field-error svg { width: 14px; height: 14px; flex-shrink: 0; margin-top: 1px; } @keyframes kr-field-error-in { from { transform: translateY(-2px); opacity: 0; } to { transform: translateY(0); opacity: 1; } } /* ── Pills (status, count) ────────────────────────────────────────── */ .pill { display: inline-flex; align-items: center; gap: 4px; height: 22px; padding: 0 8px; font: var(--button-12); font-family: var(--font-sans); border-radius: var(--radius-full); white-space: nowrap; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.46); } .pill-neutral { background: var(--gray-100); color: var(--gray-900); } .pill-success { background: var(--green-100); color: var(--green-900); } .pill-warning { background: var(--amber-100); color: var(--amber-900); } .pill-error { background: var(--red-100); color: var(--red-900); } .pill-info { background: var(--blue-100); color: var(--blue-900); } .pill-violet { background: var(--violet-100, #ede9fe); color: var(--violet-900, #4c1d95); } .pill-warm { background: var(--warm-100); color: var(--warm-900); } .pill-solid { background: var(--gray-1000); color: var(--background-100); } /* ── Cards & surfaces ─────────────────────────────────────────────── */ /* Default card: restrained system surface. Individual repeated items, modals, and genuinely framed tools can use it; larger page sections should stay as open layouts or bands. */ .card { background: var(--background-100); border-radius: var(--radius-md); box-shadow: inset 0 0 0 1px var(--gray-alpha-300), var(--shadow-raised); overflow: hidden; } /* Surface that should visually "lift" — hero, modal, important panels. Combines a 1px border with a soft 2-layer shadow. */ .surface-elevated { background: var(--background-100); border-radius: var(--radius-lg); box-shadow: inset 0 0 0 1px var(--gray-alpha-300), var(--shadow-popover); } /* Subtle inset surface — for grouped panels inside a card. */ .surface-200 { background: var(--background-200); } /* Reading prose container — Apple News standard width. */ .reading-column { max-width: 680px; margin-left: auto; margin-right: auto; } .reading-column-wide { max-width: 760px; margin-left: auto; margin-right: auto; } /* A single 1px top hairline — for grouping related rows without the "card-in-card" feel. */ .section-hairline { border-top: 1px solid var(--gray-alpha-400); } .metric-card { background: var(--background-100); border-radius: var(--radius-md); padding: 20px; box-shadow: inset 0 0 0 1px var(--gray-alpha-300), var(--shadow-raised); transition: transform var(--duration-state) var(--ease-out), box-shadow var(--duration-state) var(--ease-out); } .metric-card-interactive { cursor: pointer; } .metric-card-interactive:hover { transform: translateY(-1px); box-shadow: inset 0 0 0 1px var(--gray-alpha-500), var(--shadow-popover); } .metric-label { font: var(--label-12); font-family: var(--font-sans); color: var(--gray-700); font-weight: 600; letter-spacing: 0; } .metric-value { font: var(--heading-32); font-family: var(--font-sans); font-weight: 700; color: var(--gray-1000); font-variant-numeric: tabular-nums; letter-spacing: 0; } .subtile { background: var(--background-200); border-radius: var(--radius-sm); box-shadow: inset 0 0 0 1px var(--gray-alpha-200); } /* Segmented control — used for in-page tab strips (read/parent toggle, pending/mastered words tab, article keywords/practice/quiz tabs). Inspired by macOS NSSegmentedControl + iOS UISegmentedControl. */ .segmented { display: inline-flex; align-items: center; gap: 2px; padding: 2px; background: var(--gray-alpha-100); border-radius: 10px; box-shadow: inset 0 0 0 1px var(--gray-alpha-300); } .segmented-option { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 32px; padding: 0 12px; border-radius: 8px; font: var(--button-14); font-family: var(--font-sans); font-weight: 600; color: var(--gray-900); background: transparent; border: 0; cursor: pointer; transition: background var(--duration-state) var(--ease-out), color var(--duration-state) var(--ease-out), box-shadow var(--duration-state) var(--ease-out); white-space: nowrap; } .segmented-option:hover { color: var(--gray-1000); } .segmented-option[data-active="true"], .segmented-option[aria-selected="true"] { background: var(--background-100); color: var(--gray-1000); box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06), inset 0 0 0 1px rgba(255, 255, 255, 0.64); } table { border-collapse: separate; border-spacing: 0; } thead th { font-weight: 600; } tbody tr { transition: background var(--duration-state) var(--ease-out); } /* ── Scrollbars — match new neutral palette ───────────────────────── */ .kr-scroll::-webkit-scrollbar { width: 10px; height: 10px; } .kr-scroll::-webkit-scrollbar-track { background: transparent; } .kr-scroll::-webkit-scrollbar-thumb { background: var(--gray-alpha-400); border-radius: 9999px; border: 2px solid transparent; background-clip: padding-box; } .kr-scroll::-webkit-scrollbar-thumb:hover { background: var(--gray-alpha-500); background-clip: padding-box; } /* ── Typography helpers — for places Tailwind can't easily reach ──── */ .display-56 { font: var(--display-56); font-family: var(--font-sans); letter-spacing: 0; } .display-44 { font: var(--display-44); font-family: var(--font-sans); letter-spacing: 0; } .display-36 { font: var(--display-36); font-family: var(--font-sans); letter-spacing: 0; } .heading-32 { font: var(--heading-32); font-family: var(--font-sans); letter-spacing: 0; } .heading-28 { font: var(--heading-28); font-family: var(--font-sans); letter-spacing: 0; } .heading-24 { font: var(--heading-24); font-family: var(--font-sans); letter-spacing: 0; } .heading-20 { font: var(--heading-20); font-family: var(--font-sans); letter-spacing: 0; } .heading-17 { font: var(--heading-17); font-family: var(--font-sans); letter-spacing: 0; } .heading-16 { font: var(--heading-16); font-family: var(--font-sans); letter-spacing: 0; } .label-17 { font: var(--label-17); font-family: var(--font-sans); } .label-14 { font: var(--label-14); font-family: var(--font-sans); } .label-13 { font: var(--label-13); font-family: var(--font-sans); } .label-12 { font: var(--label-12); font-family: var(--font-sans); } .prose-21 { font: var(--prose-21); font-family: var(--font-sans); } .prose-19 { font: var(--prose-19); font-family: var(--font-sans); } .prose-17 { font: var(--prose-17); font-family: var(--font-sans); } .copy-16 { font: var(--copy-16); font-family: var(--font-sans); } .copy-14 { font: var(--copy-14); font-family: var(--font-sans); } .copy-13 { font: var(--copy-13); font-family: var(--font-sans); } .mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; } /* Make all