/* ============================================================================ growth-dashboard.css — FI-015 Student Growth Dashboard (Reports → Growth) Scoped: every rule hangs off .gd (the dashboard root) or .gd-modebar (the Report PDF | Growth Dashboard toggle, which sits outside that root). ============================================================================ Design decisions, one pass each (FI-015 §3.9): 1. /ui-ux-pro-max — structure + accessibility • Layout: summary band on top (header + headline cards, airy), then a 12-column panel grid (Grafana-like: identical panel header, one hairline rule, body). Container queries, so it adapts to the admin content column, not the viewport: 1 col < 640px, 2 col ≥ 640px, 12-col spans ≥ 960px. DOM order = §P4 order = visual order = tab order. • Palette: the five curriculum pillar colours are the only saturated hues (row/series accents); everything else is a cool neutral scale. The tool's suggested blue/orange SaaS palette was rejected — it would fight the pillar colours. All pillar colours clear 4.5:1 on white. • Type: no new font request. Helvetica Neue stack (the app's own) for UI with tabular figures; Playfair Display (already loaded by index.html) only for the student's name and the headline numerals. • Charts: cumulative line for growth (prior = grey, dashed — style, not colour alone, separates the series); topic growth as focusable DOM bars (keyboard tooltips, direct value labels); SVG ring for sessions of scheduled; line + dashed reference for quiz; 6-point SVG sparklines. Every chart has an aria-label summary and a visually hidden table. 2. /frontend-design — aesthetic • Subject: a child's growth, read the way a family reads pencil marks on a doorframe. Signature element: each headline card carries two "growth marks" on a thin vertical rule — a faint tick for last period, a solid tick for now, placed by the card's contract `tone` (up / down / steady / new; no marks for neutral). Direction only, never a quantity. It makes "×4.5" legible at a glance without a KPI-wall of big numbers. • Numerals are Playfair Display italic, 28–56px scaled to each card's width (container units), never broken mid-word: the ratio reads as a statement, not a metric tile. Labels stay small, sentence case. • Surfaces: chalk-white page (#f6f7f5, deliberately not cream), white panels with a 1px cool rule and 12px radius, no drop shadows. The toggle borrows the admin chrome's 2px black border so the two modes feel like one view. • Declines are slate with plain words ("Fewer · ×0.6"), never red. Habit colour follows the contract's `tone` (good → teal, bad → slate), so an Independence ratio going DOWN reads as good. Spintronics' red is a pillar colour, never used for state. 3. /emil-design-eng — motion + states • One easing token (cubic-bezier(.23,1,.32,1), strong ease-out), all motion ≤ 300ms: count-up + ring fill 280ms (JS, snap-safe: always ends on the exact payload value), card entrance 240ms with a 40ms stagger, mode switch 160ms crossfade + indicator slide. • Hover effects gated behind (hover:hover) and (pointer:fine); buttons scale to .97 on :active; focus-visible rings on every focusable. • Skeleton = static bones with a soft opacity pulse (no moving shimmer). • Reduced motion: CSS kills transforms/animations; JS checks matchMedia and skips count-up / ring fill / chart animation (values render final). • Empty states are sentences that say what would fill the panel. ========================================================================== */ .gd, .gd-modebar { --gd-font: 'Helvetica Neue', Helvetica, Arial, sans-serif; --gd-display: 'Playfair Display', Georgia, 'Times New Roman', serif; --gd-page: #f6f7f5; --gd-surface: #ffffff; --gd-ink: #15191c; --gd-ink-2: #4a5259; --gd-ink-3: #5f6870; --gd-rule: #e3e6e4; --gd-rule-strong: #cfd4d1; --gd-prior: #8a949a; --gd-accent: #0d7377; --gd-accent-soft: #e3f1f1; --gd-neutral: #5b6670; --gd-neutral-soft: #eef0f2; --gd-good: #0d7377; --gd-concern: #9a6212; --gd-pillar-coding: #0d7377; --gd-pillar-logic: #6d28d9; --gd-pillar-app: #0369a1; --gd-pillar-iot: #b45309; --gd-pillar-spin: #dc2626; --gd-radius: 12px; --gd-gap: 16px; --gd-ease: cubic-bezier(0.23, 1, 0.32, 1); --gd-fast: 160ms; --gd-slow: 300ms; font-family: var(--gd-font); color: var(--gd-ink); } /* Dark-ready tokens (opt-in; the admin shell is light today). */ .gd[data-theme="dark"] { --gd-page: #111416; --gd-surface: #181c1f; --gd-ink: #eef1f2; --gd-ink-2: #b7bfc5; --gd-ink-3: #9aa3a9; --gd-rule: #2a3034; --gd-rule-strong: #3a4247; --gd-prior: #7d878d; --gd-accent: #3fb6b0; --gd-accent-soft: #15302f; --gd-neutral: #a3adb5; --gd-neutral-soft: #22282c; } .gd { container-type: inline-size; container-name: gd; background: var(--gd-page); border-radius: var(--gd-radius); padding: 14px; margin-top: 16px; box-sizing: border-box; overflow-wrap: anywhere; } .gd *, .gd *::before, .gd *::after { box-sizing: border-box; } .gd p, .gd h3, .gd h4, .gd h5, .gd ul, .gd ol, .gd dl, .gd dd, .gd figure { margin: 0; padding: 0; } .gd ul, .gd ol { list-style: none; } .gd .gd-sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .gd :focus-visible { outline: 2px solid var(--gd-accent); outline-offset: 2px; border-radius: 6px; } /* ── summary band: header + headline ─────────────────────────────────────── */ .gd-page { display: flex; flex-direction: column; gap: 24px; } .gd-summary { display: flex; flex-direction: column; gap: 20px; } .gd-head { display: grid; grid-template-columns: auto 1fr; gap: 14px 16px; align-items: center; } .gd-avatar { width: 52px; height: 52px; border-radius: 50%; background: var(--gd-ink); color: var(--gd-surface); display: grid; place-items: center; font-family: var(--gd-display); font-size: 24px; font-style: italic; } .gd-name { font-family: var(--gd-display); font-weight: 400; font-size: 28px; line-height: 1.1; letter-spacing: -0.01em; } .gd-head-sub { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 4px; font-size: 13px; color: var(--gd-ink-3); } .gd-head-window { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; padding-top: 12px; border-top: 1px solid var(--gd-rule); } .gd-window { font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums; } .gd-prior { font-size: 13px; color: var(--gd-ink-2); } .gd-link { margin-left: auto; background: none; border: 0; padding: 10px 2px; min-height: 44px; font: inherit; font-size: 13px; font-weight: 600; color: var(--gd-accent); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; cursor: pointer; } .gd-notice { margin-top: 12px; padding: 10px 12px; border-radius: 8px; background: var(--gd-neutral-soft); color: var(--gd-ink-2); font-size: 13px; line-height: 1.5; } .gd-headline { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; } @container gd (min-width: 540px) { .gd-headline { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .gd-hcard { --gd-card-accent: var(--gd-accent); display: flex; gap: 12px; align-items: stretch; padding: 16px 14px; background: var(--gd-surface); border-radius: var(--gd-radius); border: 1px solid var(--gd-rule); min-height: 116px; animation: gd-rise 240ms var(--gd-ease) both; animation-delay: calc(var(--gd-i, 0) * 40ms); } .gd-hcard-body { min-width: 0; display: flex; flex-direction: column; } .gd-hcard-value { font-family: var(--gd-display); font-style: italic; font-size: clamp(28px, 15cqi, 56px); line-height: 1.05; color: var(--gd-card-accent); font-variant-numeric: lining-nums tabular-nums; letter-spacing: -0.02em; text-wrap: balance; } /* Display numerals never break inside a word (the root allows it for long names). Short values ("8 of 9", "Finished", "×4.5") stay on one line; longer ones wrap between words. */ .gd-hcard-value, .gd-ring-num, .gd-habit-value, .gd-plain-count { overflow-wrap: normal; word-break: normal; hyphens: manual; } .gd-hcard-value--short { white-space: nowrap; } /* Each card is its own size container, so the value (15cqi above) scales with the CARD: the longest single word ("Finished") always fits, at any grid column count. */ .gd-hcard { container-type: inline-size; } .gd-hcard-title { margin-top: 8px; font-size: 14px; font-weight: 700; line-height: 1.3; } .gd-hcard-sub { margin-top: 4px; font-size: 12.5px; color: var(--gd-ink-2); line-height: 1.4; } .gd-marks { flex: 0 0 auto; margin-top: 2px; overflow: visible; } .gd-marks-rule { stroke: var(--gd-rule-strong); stroke-width: 1.5; } .gd-marks-prev { stroke: var(--gd-prior); stroke-width: 2; stroke-dasharray: 3 2; stroke-linecap: round; } .gd-marks-now { stroke: var(--gd-card-accent); stroke-width: 3; stroke-linecap: round; } .gd-hcard--down, .gd-hcard--steady, .gd-hcard--neutral { --gd-card-accent: var(--gd-neutral); } .gd-hcard--neutral .gd-hcard-value { color: var(--gd-ink); } .gd-headline--empty { display: block; } /* ── panel grid (Grafana-like) ───────────────────────────────────────────── */ .gd-panels { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--gd-gap); } .gd-panel { background: var(--gd-surface); border: 1px solid var(--gd-rule); border-radius: var(--gd-radius); min-width: 0; display: flex; flex-direction: column; transition: border-color var(--gd-fast) ease; scroll-margin-top: 16px; } .gd-panel:focus { outline: none; } .gd-panel:focus-visible { outline: 2px solid var(--gd-accent); outline-offset: 2px; } .gd-panel-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 12px; padding: 12px 16px 10px; border-bottom: 1px solid var(--gd-rule); } .gd-panel-title { font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--gd-ink); } .gd-panel-meta { font-size: 12px; color: var(--gd-ink-3); } .gd-panel-body { padding: 16px; display: flex; flex-direction: column; gap: 14px; flex: 1; } .gd-sub-title { font-size: 12px; font-weight: 700; color: var(--gd-ink-2); margin-bottom: 4px; } .gd-chart { position: relative; height: 220px; } .gd-chart--short { height: 170px; } .gd-chart--fallback { height: auto; } .gd-chart--fallback canvas { display: none; } .gd-split { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; } @container gd (min-width: 640px) { .gd-page { padding: 6px; } .gd-headline { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); } .gd-panels { grid-template-columns: repeat(2, minmax(0, 1fr)); } .gd-panel--ladder, .gd-panel--sessions, .gd-panel--completed, .gd-panel--timeline, .gd-panel--caveats { grid-column: 1 / -1; } .gd-split { grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); } .gd-panel--completed .gd-split { grid-template-columns: repeat(2, minmax(0, 1fr)); } .gd-head { grid-template-columns: auto 1fr auto; } .gd-head-window { grid-column: auto; flex-direction: column; align-items: flex-end; border-top: 0; padding-top: 0; text-align: right; gap: 2px; } .gd-link { margin-left: 0; min-height: 32px; padding: 4px 0; } } @container gd (min-width: 960px) { .gd-page { padding: 14px; } .gd-panels { grid-template-columns: repeat(12, minmax(0, 1fr)); } .gd-panel--curve { grid-column: span 7; } .gd-panel--topics { grid-column: span 5; } .gd-panel--ladder { grid-column: span 12; } .gd-panel--sessions { grid-column: span 7; } .gd-panel--habits { grid-column: span 5; } .gd-panel--completed, .gd-panel--timeline, .gd-panel--caveats { grid-column: span 12; } .gd-panel--timeline { grid-column: span 7; } .gd-panel--caveats { grid-column: span 5; } .gd-name { font-size: 32px; } } /* ── trend chips (words first; the glyph only repeats them) ─────────────── */ .gd-trend { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 999px; font-size: 12px; font-weight: 600; line-height: 1.5; white-space: nowrap; } .gd-trend--up { background: var(--gd-accent-soft); color: var(--gd-accent); } .gd-trend--new { background: var(--gd-accent-soft); color: var(--gd-accent); } .gd-trend--steady, .gd-trend--down { background: var(--gd-neutral-soft); color: var(--gd-neutral); } .gd-trend-glyph { font-size: 11px; } .gd-chip { display: inline-flex; align-items: center; padding: 3px 9px; border-radius: 999px; background: var(--gd-neutral-soft); color: var(--gd-ink-2); font-size: 12px; font-weight: 600; line-height: 1.4; } .gd-chip--muted { background: var(--gd-neutral-soft); color: var(--gd-neutral); } .gd-chip--accent { background: var(--gd-accent-soft); color: var(--gd-accent); align-self: center; } .gd-chip--done { background: var(--gd-ink); color: var(--gd-surface); } /* ── topic growth ────────────────────────────────────────────────────────── */ .gd-legend { display: flex; gap: 16px; font-size: 12px; color: var(--gd-ink-2); } .gd-key { display: inline-flex; align-items: center; gap: 6px; } .gd-key::before { content: ''; width: 16px; height: 6px; border-radius: 3px; } .gd-key--prev::before { background: var(--gd-rule-strong); } .gd-key--curr::before { background: var(--gd-ink-2); } .gd-topics { display: flex; flex-direction: column; gap: 4px; } .gd-topic { --gd-row: var(--gd-accent); position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "name trend" "bars nums"; gap: 6px 10px; align-items: center; padding: 8px; margin: 0 -8px; border-radius: 8px; transition: background-color var(--gd-fast) ease; cursor: default; } .gd-topic-name { grid-area: name; font-size: 13.5px; font-weight: 600; min-width: 0; } .gd-topic .gd-trend { grid-area: trend; justify-self: end; } .gd-topic-bars { grid-area: bars; display: flex; flex-direction: column; gap: 3px; } .gd-bar { display: block; height: 6px; border-radius: 3px; min-width: 2px; transform-origin: left center; animation: gd-grow 300ms var(--gd-ease) both; } .gd-bar--prev { background: var(--gd-rule-strong); } .gd-bar--curr { background: var(--gd-row); height: 9px; } .gd-topic-nums { grid-area: nums; font-size: 12px; color: var(--gd-ink-2); font-variant-numeric: tabular-nums; } .gd-tip { position: absolute; left: 8px; right: 8px; bottom: calc(100% - 4px); z-index: 5; padding: 8px 10px; border-radius: 8px; background: var(--gd-ink); color: var(--gd-surface); font-size: 12.5px; line-height: 1.45; pointer-events: none; opacity: 0; transform: translateY(4px) scale(0.98); transform-origin: bottom left; transition: opacity 125ms ease-out, transform 125ms var(--gd-ease); visibility: hidden; } .gd-tip-skill { display: block; font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; opacity: 0.75; margin-bottom: 2px; } .gd-topic:focus-visible { outline-offset: 0; } .gd-topic:focus-visible .gd-tip, .gd-topic:focus .gd-tip { opacity: 1; transform: none; visibility: visible; } @media (hover: hover) and (pointer: fine) { .gd-topic:hover { background: var(--gd-page); } .gd-topic:hover .gd-tip { opacity: 1; transform: none; visibility: visible; transition-delay: 120ms; } .gd-panel:hover { border-color: var(--gd-rule-strong); } .gd-event:hover { background: var(--gd-page); } } /* ── milestone ladder ────────────────────────────────────────────────────── */ .gd-ladder { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; } @container gd (min-width: 640px) { .gd-ladder { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 28px; } } .gd-skill { --gd-row: var(--gd-accent); display: flex; flex-direction: column; gap: 8px; } .gd-skill-head { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; } .gd-skill-name { font-size: 13.5px; font-weight: 700; color: var(--gd-row); } .gd-skill-steps { font-size: 12px; font-weight: 600; color: var(--gd-ink-3); font-variant-numeric: tabular-nums; } .gd-skill--moved .gd-skill-steps { color: var(--gd-row); } .gd-track { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; } .gd-dot { width: 12px; height: 12px; border-radius: 50%; border: 1.5px solid var(--gd-rule-strong); background: var(--gd-surface); position: relative; } .gd-dot--done { background: var(--gd-row); border-color: var(--gd-row); opacity: 0.35; } .gd-dot--moved { opacity: 1; background: var(--gd-row); border-color: var(--gd-row); } .gd-dot--reached { opacity: 1; background: var(--gd-row); border-color: var(--gd-row); box-shadow: 0 0 0 3px color-mix(in srgb, var(--gd-row) 22%, transparent); } .gd-dot--before { box-shadow: 0 0 0 2px var(--gd-surface), 0 0 0 3.5px var(--gd-prior); } .gd-dot--after { width: 16px; height: 16px; border-width: 3px; border-color: var(--gd-row); background: var(--gd-surface); opacity: 1; } .gd-skill-path { font-size: 13px; color: var(--gd-ink-2); line-height: 1.45; } .gd-skill-path strong { color: var(--gd-ink); } .gd-from { color: var(--gd-ink-3); } .gd-prof { display: flex; flex-wrap: wrap; gap: 6px; } .gd-skill-note { font-size: 12px; color: var(--gd-ink-3); font-style: italic; } .gd-prof .gd-chip { background: color-mix(in srgb, var(--gd-row) 10%, var(--gd-surface)); color: var(--gd-ink); } /* ── sessions ring + quiz ────────────────────────────────────────────────── */ .gd-sessions { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; } .gd-ring-fig { position: relative; width: 112px; height: 112px; } .gd-ring { display: block; } .gd-ring-track { fill: none; stroke: var(--gd-neutral-soft); stroke-width: 10; } .gd-ring-arc { fill: none; stroke: var(--gd-accent); stroke-width: 10; stroke-linecap: round; } /* fill is driven by animate() so it can always snap to the payload */ .gd-ring-centre { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; } .gd-ring-num { font-family: var(--gd-display); font-style: italic; font-size: 34px; line-height: 1; font-variant-numeric: lining-nums tabular-nums; } .gd-ring-of { font-size: 12px; color: var(--gd-ink-2); margin-top: 2px; } .gd-sessions-cap { font-size: 13px; color: var(--gd-ink-2); } .gd-sessions-prev, .gd-sessions-days { font-size: 12.5px; color: var(--gd-ink-3); font-variant-numeric: tabular-nums; } .gd-plain-count { font-family: var(--gd-display); font-style: italic; font-size: 34px; line-height: 1.1; } .gd-caveat-inline { font-size: 12.5px; color: var(--gd-ink-2); max-width: 30ch; line-height: 1.45; } .gd-quiz { display: flex; flex-direction: column; gap: 10px; min-width: 0; } .gd-quiz-head { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; } .gd-quiz-avg { font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums; } .gd-quiz-prev { font-size: 13px; color: var(--gd-ink-2); } .gd-quiz-count { font-size: 12.5px; color: var(--gd-ink-3); } /* ── habits ──────────────────────────────────────────────────────────────── */ .gd-habits { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; } @container gd (min-width: 480px) { .gd-habits { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @container gd (min-width: 960px) { .gd-habits { grid-template-columns: minmax(0, 1fr); } } @container gd (min-width: 1240px) { .gd-habits { grid-template-columns: repeat(3, minmax(0, 1fr)); } } .gd-habit { display: flex; flex-direction: column; gap: 2px; padding: 12px; border-radius: 10px; background: var(--gd-page); min-width: 0; } .gd-habit-title { font-size: 12px; font-weight: 700; color: var(--gd-ink-2); margin-bottom: 4px; } .gd-habit-value { font-family: var(--gd-display); font-style: italic; font-size: 30px; line-height: 1.05; font-variant-numeric: lining-nums tabular-nums; } .gd-habit-value--none { color: var(--gd-ink-3); } .gd-habit-unit-inline { font-family: var(--gd-font); font-style: normal; font-size: 12px; color: var(--gd-ink-2); letter-spacing: 0; } .gd-habit-text, .gd-habit-note { font-size: 12.5px; color: var(--gd-ink-2); line-height: 1.45; } .gd-habit-note { color: var(--gd-ink-3); font-style: italic; font-size: 12px; } .gd-habit--up { box-shadow: inset 3px 0 0 var(--gd-accent); } .gd-habit--new { box-shadow: inset 3px 0 0 var(--gd-accent-soft); } .gd-habit--down, .gd-habit--steady { box-shadow: inset 3px 0 0 var(--gd-rule-strong); } .gd-habit-foot { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: space-between; margin-top: 8px; } .gd-spark { flex: 0 0 auto; overflow: visible; } .gd-spark-line { fill: none; stroke: var(--gd-ink-2); stroke-width: 1.75; stroke-linejoin: round; stroke-linecap: round; } .gd-spark-dot { fill: var(--gd-ink-2); } .gd-habit--up .gd-spark-dot, .gd-habit--new .gd-spark-dot { fill: var(--gd-accent); } .gd-spark-pt { fill: var(--gd-ink-2); } .gd-spark-split { stroke: var(--gd-rule-strong); stroke-width: 1; stroke-dasharray: 2 2; } .gd-spark-wrap { display: inline-flex; } /* ── completed ───────────────────────────────────────────────────────────── */ .gd-done-tasks, .gd-done-courses { display: flex; flex-direction: column; gap: 12px; min-width: 0; } .gd-task { padding-left: 12px; border-left: 2px solid var(--gd-rule); } .gd-task-title { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 14px; font-weight: 700; margin-bottom: 4px; } .gd-chip--lang { font-size: 11px; padding: 1px 7px; text-transform: capitalize; } .gd-task-qs { display: flex; flex-direction: column; } .gd-q { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px 12px; padding: 5px 0; border-bottom: 1px dashed var(--gd-rule); font-size: 13px; } .gd-q:last-child { border-bottom: 0; } .gd-q-meta { color: var(--gd-ink-3); font-size: 12px; font-variant-numeric: tabular-nums; } .gd-awaiting { align-self: flex-start; padding: 3px 10px; border-radius: 999px; border: 1px dashed var(--gd-rule-strong); font-size: 12px; color: var(--gd-ink-2); } .gd-course { display: flex; flex-direction: column; gap: 6px; } .gd-course-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; } .gd-course-title { font-size: 14px; font-weight: 700; min-width: 0; } .gd-lessons { display: flex; gap: 2px; height: 10px; } .gd-lesson { flex: 1 1 0; min-width: 2px; border-radius: 2px; background: var(--gd-neutral-soft); } .gd-lesson--before { background: color-mix(in srgb, var(--gd-accent) 30%, var(--gd-surface)); } .gd-lesson--now { background: var(--gd-accent); } .gd-course-meta { font-size: 12px; color: var(--gd-ink-3); font-variant-numeric: tabular-nums; } /* ── timeline + badges ───────────────────────────────────────────────────── */ .gd-feed { display: flex; flex-direction: column; } .gd-event { display: grid; grid-template-columns: 52px 14px minmax(0, 1fr); gap: 10px; padding: 8px; margin: 0 -8px; border-radius: 8px; transition: background-color var(--gd-fast) ease; } .gd-event-date { font-size: 12px; font-weight: 700; color: var(--gd-ink-2); font-variant-numeric: tabular-nums; padding-top: 1px; } .gd-event-dot { width: 10px; height: 10px; margin-top: 4px; border-radius: 50%; background: var(--gd-rule-strong); } .gd-event--approval .gd-event-dot, .gd-event--course .gd-event-dot { background: var(--gd-accent); } .gd-event--lesson .gd-event-dot { background: var(--gd-pillar-app); } .gd-event--reward .gd-event-dot { background: var(--gd-pillar-iot); } .gd-event--doubt .gd-event-dot { background: var(--gd-pillar-logic); } .gd-event--quiz .gd-event-dot { background: var(--gd-ink-2); } .gd-event--remark.gd-event--good .gd-event-dot { background: var(--gd-good); } .gd-event--remark.gd-event--neutral .gd-event-dot { background: var(--gd-rule-strong); } /* A "bad" item is a hollow ring (shape, not only colour) in muted amber, never red. */ .gd-event--bad .gd-event-dot { background: var(--gd-surface); border: 2px solid var(--gd-concern); } .gd-event-kind { font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--gd-ink-3); } .gd-event-title { font-size: 13.5px; font-weight: 600; line-height: 1.35; } .gd-event-sub { font-size: 12.5px; color: var(--gd-ink-2); line-height: 1.4; } .gd-badges { padding-top: 14px; border-top: 1px solid var(--gd-rule); display: flex; flex-direction: column; gap: 8px; } .gd-badges-count { font-size: 13px; font-weight: 600; } .gd-badge-list { display: flex; flex-wrap: wrap; gap: 6px; } .gd-badges-note { font-size: 12px; color: var(--gd-ink-3); font-style: italic; } /* ── caveats sheet ───────────────────────────────────────────────────────── */ .gd-panel--caveats { background: var(--gd-surface); } .gd-method { font-size: 13px; line-height: 1.55; color: var(--gd-ink-2); } .gd-caveats { display: flex; flex-direction: column; gap: 6px; } .gd-caveats li { position: relative; padding-left: 16px; font-size: 13px; line-height: 1.45; } .gd-caveats li::before { content: ''; position: absolute; left: 2px; top: 7px; width: 6px; height: 6px; border-radius: 50%; background: var(--gd-concern); } .gd-sources { display: flex; flex-direction: column; } .gd-source { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0 12px; padding: 6px 0; border-bottom: 1px dashed var(--gd-rule); font-size: 13px; } .gd-source dd { font-variant-numeric: tabular-nums; font-weight: 600; text-align: right; } .gd-source .gd-source-table { grid-column: 1 / -1; text-align: left; font-weight: 400; font-size: 11.5px; color: var(--gd-ink-3); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; } /* ── empty, error, skeleton ─────────────────────────────────────────────── */ .gd-empty { padding: 18px 16px; border-radius: 10px; background: var(--gd-page); border: 1px dashed var(--gd-rule-strong); } .gd-headline .gd-empty { background: var(--gd-surface); } .gd-empty-title { font-size: 14px; font-weight: 600; } .gd-empty-sub { margin-top: 4px; font-size: 12.5px; color: var(--gd-ink-2); line-height: 1.45; } .gd-error { padding: 20px; border-radius: var(--gd-radius); background: var(--gd-surface); border: 1px solid var(--gd-rule-strong); display: flex; flex-direction: column; gap: 6px; align-items: flex-start; } .gd-error-title { font-size: 15px; font-weight: 700; } .gd-error-sub { font-size: 13px; color: var(--gd-ink-2); } .gd-btn { margin-top: 8px; min-height: 44px; padding: 10px 18px; border: 2px solid #000; background: #000; color: #fff; font: inherit; font-size: 13px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; cursor: pointer; transition: transform var(--gd-fast) var(--gd-ease); } .gd-btn:active, .gd-modebar-btn:active, .gd-link:active { transform: scale(0.97); } .gd-bone { background: var(--gd-neutral-soft); border-color: transparent; animation: gd-pulse 1.2s ease-in-out infinite alternate; } .gd-bone--line { height: 28px; width: min(260px, 70%); border-radius: 8px; } .gd-bone--card { min-height: 116px; } .gd-bone--panel { min-height: 240px; } @keyframes gd-rise { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } } @keyframes gd-grow { from { transform: scaleX(0.6); opacity: 0; } to { transform: none; opacity: 1; } } @keyframes gd-pulse { from { opacity: 1; } to { opacity: 0.55; } } /* ── Report PDF | Growth Dashboard toggle (Reports view) ────────────────── */ .gd-modebar { position: relative; display: inline-grid; grid-template-columns: 1fr 1fr; margin-bottom: 16px; border: 2px solid #000; background: #fff; max-width: 100%; } .gd-modebar-ind { position: absolute; top: 0; bottom: 0; left: 0; width: 50%; background: #000; transition: transform 200ms var(--gd-ease); pointer-events: none; } .gd-modebar[data-mode="growth"] .gd-modebar-ind { transform: translateX(100%); } .gd-modebar-btn { position: relative; z-index: 1; min-height: 44px; padding: 10px 18px; border: 0; background: transparent; font: inherit; font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: #000; cursor: pointer; white-space: nowrap; transition: color var(--gd-fast) ease, transform var(--gd-fast) var(--gd-ease); } .gd-modebar-btn[aria-pressed="true"] { color: #fff; } .gd-modebar-btn:focus-visible { outline: 2px solid var(--gd-accent); outline-offset: -4px; } /* Inside the admin panel, app.css paints every