syndes 0.1.0

package/dashboard/web/app.css

@@ -0,0 +1,532 @@
+/**
+ * syndes — theme.
+ *
+ * Palette sampled directly from the reference: lime #B9FF66, orange #FF9B22,
+ * card #1F1F1F on a pure black shell, sitting on a #C5E1A5 page.
+ *
+ * Two rules the whole design follows:
+ *   • Lime means healthy, orange means "look at this", white means neutral
+ *     volume. Nothing is coloured for decoration — if a thing is coloured, the
+ *     colour is carrying meaning, and the legend says which.
+ *   • Every shape is a capsule. Bars, chips, buttons, avatars and meters all
+ *     use the same fully-rounded end, which is what makes the surface read as
+ *     one object rather than a pile of widgets.
+ */
+
+:root {
+  /* Sampled from the reference image */
+  --mint:      #C5E1A5;
+  --black:     #000000;
+  --surface:   #1F1F1F;
+  --surface-2: #171717;
+  --surface-3: #262626;
+  --line:      #2E2E2E;
+
+  --ink:    #FFFFFF;
+  --ink-2:  #A6A6A6;
+  --ink-3:  #6E6E6E;
+
+  --lime:   #B9FF66;
+  --orange: #FF9B22;
+  --red:    #E5484D;
+
+  /* Semantic aliases. Views name meaning, never hue. */
+  --good:    var(--lime);
+  --warn:    var(--orange);
+  --neutral: #FFFFFF;
+  --track:   #313131;
+
+  --r-shell: 40px;
+  --r-card:  28px;
+  --r-pill:  999px;
+  --r-chip:  14px;
+
+  --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px;
+  --s5: 22px; --s6: 28px; --s7: 40px; --s8: 56px;
+
+  --rail: 56px;
+
+  --font: -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
+  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
+}
+
+*, *::before, *::after { box-sizing: border-box; }
+
+/* The page itself never scrolls. Every view is sized to the viewport and the
+   scrolling happens inside whichever section actually has more than fits —
+   which is what keeps the shell's rounded corners on screen at all times. */
+html, body { height: 100%; overflow: hidden; }
+
+body {
+  margin: 0;
+  padding: 18px;
+  background: var(--mint);
+  color: var(--ink);
+  font: 13px/1.5 var(--font);
+  -webkit-font-smoothing: antialiased;
+}
+
+/* Thin, quiet scrollbars. A default 15px grey trough beside a black card reads
+   as a seam in the design rather than as a control. */
+* { scrollbar-width: thin; scrollbar-color: var(--surface-3) transparent; }
+::-webkit-scrollbar { width: 8px; height: 8px; }
+::-webkit-scrollbar-track { background: transparent; }
+::-webkit-scrollbar-thumb { background: var(--surface-3); border-radius: var(--r-pill); }
+::-webkit-scrollbar-thumb:hover { background: #3d3d3d; }
+::-webkit-scrollbar-corner { background: transparent; }
+
+h1, h2, h3, p, figure { margin: 0; }
+button, input, select { font: inherit; color: inherit; }
+a { color: inherit; text-decoration: none; }
+:focus-visible { outline: 2px solid var(--lime); outline-offset: 3px; border-radius: var(--r-chip); }
+
+.num, .tnum { font-variant-numeric: tabular-nums; }
+
+/* ── Shell ────────────────────────────────────────────────────────────── */
+
+.shell {
+  background: var(--black);
+  border-radius: var(--r-shell);
+  height: calc(100vh - 36px);
+  padding: var(--s5) var(--s6) var(--s6);
+  display: flex;
+  flex-direction: column;
+  gap: var(--s4);
+  overflow: hidden;
+}
+
+/* ── Top bar ──────────────────────────────────────────────────────────── */
+
+.topbar { display: flex; align-items: center; gap: var(--s3); }
+
+.logo {
+  width: 46px; height: 46px;
+  border-radius: var(--r-pill);
+  background: var(--ink);
+  display: grid; place-items: center;
+  flex: none;
+  overflow: hidden;
+}
+/* The mark is black ink on transparency, so it sits directly on the white chip.
+   72% keeps an even optical margin inside the circle — the glyph is wider than
+   it is tall, so a full-bleed fit would crowd the sides. */
+.logo img { width: 72%; height: 72%; object-fit: contain; display: block; }
+
+.nav { display: flex; gap: var(--s2); }
+
+.navpill {
+  display: inline-flex; align-items: center; gap: var(--s2);
+  height: 46px; padding: 0 var(--s5);
+  border: 0; border-radius: var(--r-pill);
+  background: var(--surface);
+  color: var(--ink-2);
+  font-weight: 550;
+  cursor: pointer;
+  white-space: nowrap;
+}
+.navpill:hover { background: var(--surface-3); color: var(--ink); }
+.navpill[aria-current="page"] { background: var(--ink); color: var(--black); font-weight: 650; }
+.navpill__dot {
+  min-width: 18px; height: 18px; padding: 0 5px;
+  border-radius: var(--r-pill);
+  background: var(--orange); color: var(--black);
+  font-size: 11px; font-weight: 700;
+  display: grid; place-items: center;
+}
+.navpill[aria-current="page"] .navpill__dot { background: var(--black); color: var(--lime); }
+
+.topbar__right { margin-left: auto; display: flex; align-items: center; gap: var(--s3); }
+
+.status {
+  display: flex; align-items: center; gap: var(--s2);
+  height: 46px; padding: 0 var(--s4) 0 var(--s3);
+  border-radius: var(--r-pill);
+  background: var(--surface);
+  font-size: 12px; color: var(--ink-2);
+}
+.status__led { width: 8px; height: 8px; border-radius: var(--r-pill); background: var(--lime); flex: none; }
+.status__led--bad { background: var(--orange); }
+
+/* ── Page head ────────────────────────────────────────────────────────── */
+
+.pagehead { display: flex; align-items: center; gap: var(--s4); flex-wrap: wrap; }
+
+.title {
+  font-size: 38px;
+  font-weight: 800;
+  letter-spacing: -0.025em;
+  text-transform: uppercase;
+  line-height: 1;
+}
+.title__sub { font-size: 13px; font-weight: 400; color: var(--ink-3); text-transform: none; letter-spacing: 0; margin-top: 6px; }
+
+.filters { margin-left: auto; display: flex; gap: var(--s2); flex-wrap: wrap; }
+
+.filter {
+  display: inline-flex; align-items: center; gap: var(--s2);
+  height: 44px; padding: 0 var(--s4);
+  border: 0; border-radius: var(--r-pill);
+  background: var(--surface);
+  color: var(--ink-2);
+  cursor: pointer;
+}
+.filter__key { color: var(--ink-3); }
+.filter__value { color: var(--ink); font-weight: 600; }
+
+/* ── Dropdown ─────────────────────────────────────────────────────────── */
+
+.dropdown {
+  display: inline-flex; align-items: center; gap: var(--s2);
+  height: 44px; padding: 0 var(--s4);
+  border: 0; border-radius: var(--r-pill);
+  background: var(--surface); color: var(--ink);
+  cursor: pointer; font: inherit;
+}
+.dropdown:hover { background: var(--surface-3); }
+.dropdown--on-card { background: var(--surface-3); height: 34px; padding: 0 var(--s3) 0 var(--s4); font-size: 12px; }
+.dropdown--on-card:hover { background: #333; }
+.dropdown__label { color: var(--ink-3); }
+.dropdown__value { font-weight: 600; }
+.dropdown svg { color: var(--ink-3); transition: transform 0.15s ease; flex: none; }
+.dropdown[aria-expanded="true"] svg { transform: rotate(180deg); }
+.dropdown[aria-expanded="true"] { background: var(--surface-3); }
+
+.dropdown__menu {
+  position: fixed;
+  z-index: 60;
+  padding: 6px;
+  border-radius: 18px;
+  background: var(--surface-3);
+  box-shadow: 0 18px 40px rgb(0 0 0 / 0.55);
+  display: grid;
+  gap: 2px;
+  max-height: min(70vh, 420px);
+  overflow-y: auto;
+}
+.dropdown__item {
+  display: flex; align-items: center; gap: var(--s2);
+  width: 100%; text-align: left;
+  padding: 9px var(--s3);
+  border: 0; border-radius: 12px;
+  background: transparent; color: var(--ink-2);
+  cursor: pointer; font: inherit; white-space: nowrap;
+}
+.dropdown__item:hover, .dropdown__item:focus-visible { background: rgb(255 255 255 / 0.06); color: var(--ink); outline: none; }
+/* The selected row carries its own raised surface. Leaving it to :focus-visible
+   made the highlight appear or not depending on where focus happened to be, so
+   the same menu looked different from one screenshot to the next. */
+.dropdown__item[aria-selected="true"] {
+  background: rgb(255 255 255 / 0.08);
+  color: var(--ink);
+  font-weight: 600;
+}
+.dropdown__item[aria-selected="true"]:hover { background: rgb(255 255 255 / 0.12); }
+.dropdown__item[aria-selected="true"] .dropdown__item-hint { color: var(--ink-2); }
+.dropdown__check { width: 15px; display: grid; place-items: center; color: var(--lime); flex: none; }
+.dropdown__item-name { display: block; }
+.dropdown__item-hint { display: block; font-size: 11px; color: var(--ink-3); font-weight: 400; margin-top: 1px; }
+
+/* ── Body: rail + content ─────────────────────────────────────────────── */
+
+/* min-height:0 is what lets a flex child actually shrink and scroll instead of
+   growing the page. Without it the whole viewport lock silently does nothing. */
+.body { display: grid; grid-template-columns: var(--rail) minmax(0, 1fr); gap: var(--s4); flex: 1; min-height: 0; }
+
+.rail { display: flex; flex-direction: column; gap: var(--s3); }
+.railbtn {
+  width: var(--rail); height: var(--rail);
+  border: 0; border-radius: var(--r-pill);
+  background: var(--surface);
+  color: var(--ink-2);
+  display: grid; place-items: center;
+  cursor: pointer;
+  flex: none;
+}
+.railbtn svg { width: 20px; height: 20px; display: block; }
+.railbtn[aria-current="page"] { background: var(--ink); color: var(--black); }
+.railbtn:hover { background: var(--surface-3); color: var(--ink); }
+.railbtn--accent { background: var(--lime); color: var(--black); }
+.railbtn--accent:hover { background: var(--lime); filter: brightness(1.08); }
+.rail__spacer { flex: 1; }
+
+.content { display: grid; gap: var(--s4); align-content: start; min-width: 0; min-height: 0; overflow-y: auto; padding-right: 4px; }
+/* A view that fits exactly: fixed top row, remaining space to the rest. */
+.content--fit { align-content: stretch; overflow: hidden; }
+.fill { min-height: 0; overflow: hidden; }
+.fill > .card { height: 100%; }
+
+/* ── Card ─────────────────────────────────────────────────────────────── */
+
+.card {
+  background: var(--surface);
+  border-radius: var(--r-card);
+  padding: var(--s5);
+  display: flex;
+  flex-direction: column;
+  gap: var(--s3);
+  min-width: 0;
+  min-height: 0;
+}
+/* The scrolling region inside a card: the head stays put, the body moves. */
+.card__scroll { overflow-y: auto; min-height: 0; flex: 1; margin-right: -6px; padding-right: 6px; }
+.card--flush { padding: var(--s6) 0; }
+.card--tight { gap: var(--s3); }
+
+.card__head { display: flex; align-items: center; gap: var(--s3); }
+.card__title {
+  font-size: 14px; font-weight: 700;
+  letter-spacing: 0.04em; text-transform: uppercase;
+}
+.card__note { font-size: 12px; color: var(--ink-3); }
+/* Actions sit far right; the note stays next to the title it qualifies. Both
+   claiming margin-left:auto is what stranded the note in the middle. */
+.card__actions { margin-left: auto; display: flex; align-items: center; gap: var(--s2); }
+.card__more {
+  margin-left: auto; background: none; border: 0; color: var(--ink-3);
+  cursor: pointer; font-size: 18px; line-height: 1; letter-spacing: 2px;
+}
+
+/* ── Grids ────────────────────────────────────────────────────────────── */
+
+.grid { display: grid; gap: var(--s5); }
+/* Two-column rows pair cards of genuinely unequal length, so they hang from the
+   top. The 3- and 4-up rows stay stretched, because a row of counters only
+   scans as a row when the boxes match. */
+.g-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
+.g-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
+.g-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
+/* The reference layout: two stacked cards on the left, one tall card at right. */
+.g-hero { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.15fr); }
+.span-2 { grid-column: span 2; }
+.row-2 { grid-row: span 2; }
+
+/* ── Numbers ──────────────────────────────────────────────────────────── */
+
+.figure { display: grid; gap: 2px; }
+.figure__value {
+  font-size: 40px; font-weight: 750; letter-spacing: -0.035em; line-height: 1;
+  font-variant-numeric: tabular-nums;
+}
+.figure__value--sm { font-size: 28px; }
+.figure__label { font-size: 12px; color: var(--ink-2); }
+.figure__unit { font-size: 16px; font-weight: 600; color: var(--ink-2); letter-spacing: 0; }
+
+/* The reference's ▲/▼ marks: a filled triangle in the meaning colour. */
+.trend { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; }
+.trend__mark { font-size: 10px; line-height: 1; }
+.trend--up   .trend__mark { color: var(--lime); }
+.trend--down .trend__mark { color: var(--orange); }
+.trend--flat .trend__mark { color: var(--ink-3); }
+.trend__text { color: var(--ink-2); }
+
+.pair { display: flex; gap: var(--s7); flex-wrap: wrap; }
+
+/* ── Chips, meters, dots ──────────────────────────────────────────────── */
+
+.chip {
+  display: inline-flex; align-items: center; gap: 6px;
+  padding: 4px 11px; border-radius: var(--r-pill);
+  background: var(--surface-3); color: var(--ink-2);
+  font-size: 11px; font-weight: 550; white-space: nowrap;
+}
+.chip--lime { background: var(--lime); color: var(--black); }
+.chip--orange { background: var(--orange); color: var(--black); }
+.chip--ghost { background: transparent; border: 1px solid var(--line); }
+
+.dot { width: 9px; height: 9px; border-radius: var(--r-pill); flex: none; }
+.dot--lime { background: var(--lime); }
+.dot--orange { background: var(--orange); }
+.dot--white { background: var(--neutral); }
+.dot--ring { background: transparent; box-shadow: inset 0 0 0 2px currentColor; }
+
+.meter { height: 8px; border-radius: var(--r-pill); background: var(--track); overflow: hidden; }
+.meter__fill { height: 100%; border-radius: var(--r-pill); background: var(--lime); }
+.meter__fill--orange { background: var(--orange); }
+.meter__fill--white { background: var(--neutral); }
+.meter--thin { height: 5px; }
+
+.legend { display: flex; align-items: center; gap: var(--s5); flex-wrap: wrap; font-size: 12px; color: var(--ink-2); }
+.legend__item { display: inline-flex; align-items: center; gap: 7px; }
+.legend__total { margin-left: auto; color: var(--ink-3); }
+.legend__total b { color: var(--ink); font-weight: 650; }
+
+/* ── Pillar rows ──────────────────────────────────────────────────────── */
+
+.pillars { display: grid; gap: var(--s3); }
+.pillar { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; gap: var(--s3); align-items: center; }
+.pillar__n { font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums; }
+.pillar__name { font-size: 12px; color: var(--ink-2); margin-bottom: 5px; }
+
+/* ── Buttons ──────────────────────────────────────────────────────────── */
+
+.btn {
+  display: inline-flex; align-items: center; gap: var(--s2);
+  height: 38px; padding: 0 var(--s4);
+  border: 0; border-radius: var(--r-pill);
+  background: var(--surface-3); color: var(--ink);
+  cursor: pointer; font-weight: 550;
+}
+.btn:hover { background: #333; }
+.btn--lime { background: var(--lime); color: var(--black); font-weight: 650; }
+.btn--ghost { background: transparent; box-shadow: inset 0 0 0 1px var(--line); color: var(--ink-2); }
+.btn--sm { height: 30px; padding: 0 var(--s3); font-size: 12px; }
+.btn:disabled { opacity: 0.45; cursor: default; }
+
+/* ── Table ────────────────────────────────────────────────────────────── */
+
+.table { width: 100%; border-collapse: collapse; }
+.table th {
+  text-align: left; padding: 0 var(--s3) var(--s3);
+  font-size: 11px; font-weight: 600; letter-spacing: 0.08em;
+  text-transform: uppercase; color: var(--ink-3); white-space: nowrap;
+}
+.table td { padding: var(--s3); border-top: 1px solid var(--line); font-size: 13px; }
+.table tbody tr { cursor: pointer; }
+.table tbody tr:hover td { background: var(--surface-3); }
+.table tbody tr:hover td:first-child { border-radius: var(--r-chip) 0 0 var(--r-chip); }
+.table tbody tr:hover td:last-child { border-radius: 0 var(--r-chip) var(--r-chip) 0; }
+.table .r { text-align: right; font-variant-numeric: tabular-nums; }
+.scroll-x { overflow-x: auto; }
+.scroll-y { overflow-y: auto; min-height: 0; }
+/* A sticky header keeps the column names visible while the rows move under it. */
+.scroll-y thead th { position: sticky; top: 0; background: var(--surface); z-index: 1; }
+
+/* ── Findings ─────────────────────────────────────────────────────────── */
+
+.finding { display: grid; gap: var(--s2); padding: var(--s4) 0; border-top: 1px solid var(--line); }
+.finding:first-child { border-top: 0; padding-top: 0; }
+.finding__head { display: flex; align-items: center; gap: var(--s3); }
+.finding__title { font-weight: 650; font-size: 14px; }
+.finding__evidence { color: var(--ink); font-size: 13px; }
+.finding__fix { color: var(--ink-2); font-size: 12px; display: flex; gap: 7px; }
+.finding__fix::before { content: "→"; color: var(--lime); }
+.finding--muted { opacity: 0.45; }
+
+/* ── Charts ───────────────────────────────────────────────────────────── */
+
+.chart { display: block; width: 100%; overflow: visible; }
+.chart text { font-family: var(--font); font-size: 11px; fill: var(--ink-3); }
+.chart .grid-line { stroke: var(--line); stroke-dasharray: 3 5; }
+.chart .cap-lime { fill: var(--lime); }
+.chart .cap-orange { fill: var(--orange); }
+.chart .cap-white { fill: var(--neutral); }
+.chart .cap-label { fill: var(--black); font-weight: 700; font-size: 12px; }
+.chart .cap-stem { stroke: var(--line); stroke-width: 1; }
+.chart .series-lime { stroke: var(--lime); fill: none; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
+.chart .series-orange { stroke: var(--orange); fill: none; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
+
+/* ── Unlock screen ────────────────────────────────────────────────────── */
+
+.unlock { min-height: calc(100vh - 44px); display: grid; place-items: center; background: var(--black); border-radius: var(--r-shell); }
+.unlock__box { display: grid; gap: var(--s5); justify-items: center; text-align: center; padding: var(--s7); max-width: 380px; }
+.unlock__title { font-size: 30px; font-weight: 800; letter-spacing: -0.02em; text-transform: uppercase; }
+.unlock__note { color: var(--ink-3); font-size: 13px; line-height: 1.6; }
+.unlock__error { color: var(--orange); font-size: 12px; min-height: 16px; }
+.pin {
+  height: 52px; width: 200px; text-align: center; letter-spacing: 0.5em;
+  border: 0; border-radius: var(--r-pill); background: var(--surface); color: var(--ink);
+  font-size: 20px; font-variant-numeric: tabular-nums;
+}
+
+/* ── Settings page ────────────────────────────────────────────────────── */
+
+.settings { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s4); align-content: start; }
+/* A fixed minimum band, so a one-line row and a two-line row read as the same
+   kind of thing and the control sits on the centre line of both. Without it the
+   pills drifted relative to the dividers as the label wrapped. */
+.setrow {
+  display: flex; align-items: center; gap: var(--s4);
+  min-height: 62px; padding: var(--s3) 0;
+  border-top: 1px solid var(--line);
+}
+.setrow:first-of-type { border-top: 0; }
+.setrow__label { font-size: 13px; }
+.setrow__help { font-size: 11px; color: var(--ink-3); margin-top: 2px; line-height: 1.5; }
+.setrow__control { margin-left: auto; flex: none; }
+
+.optioncard {
+  display: flex; align-items: center; gap: var(--s3);
+  width: 100%; text-align: left; cursor: pointer;
+  padding: var(--s3) var(--s4);
+  border: 0; border-radius: var(--r-chip);
+  background: var(--surface-2); color: var(--ink);
+}
+.optioncard:hover { background: var(--surface-3); }
+.optioncard[aria-pressed="true"] { background: var(--lime); color: var(--black); }
+.optioncard:disabled { opacity: 0.4; cursor: default; }
+.optioncard__name { font-weight: 650; text-transform: capitalize; }
+.optioncard__desc { font-size: 11px; opacity: 0.75; margin-top: 1px; }
+
+/* ── Modal ───────────────────────────────────────────────────────────── */
+
+.modal {
+  position: fixed; z-index: 70;
+  top: 50%; left: 50%; transform: translate(-50%, -50%);
+  width: min(400px, calc(100vw - 40px));
+  background: var(--surface);
+  border-radius: var(--r-card);
+  padding: var(--s6);
+  display: grid; gap: var(--s4);
+  box-shadow: 0 30px 70px rgb(0 0 0 / 0.6);
+}
+.modal__title { font-size: 17px; font-weight: 700; letter-spacing: -0.01em; }
+.modal__note { font-size: 12px; color: var(--ink-3); line-height: 1.6; }
+.modal__input {
+  height: 46px; width: 100%;
+  padding: 0 var(--s4);
+  border: 0; border-radius: var(--r-pill);
+  background: var(--surface-2); color: var(--ink);
+  font: inherit; font-variant-numeric: tabular-nums;
+}
+.modal__input:focus-visible { outline: 2px solid var(--lime); outline-offset: 2px; }
+.modal__error { font-size: 12px; color: var(--orange); min-height: 15px; }
+.modal__actions { display: flex; gap: var(--s2); justify-content: flex-end; }
+
+/* ── Drawer ───────────────────────────────────────────────────────────── */
+
+.scrim { position: fixed; inset: 0; background: rgb(0 0 0 / 0.6); z-index: 39; }
+.drawer {
+  position: fixed; top: 22px; right: 22px; bottom: 22px;
+  width: min(520px, calc(100vw - 44px));
+  background: var(--surface); border-radius: var(--r-card);
+  z-index: 40; display: flex; flex-direction: column;
+}
+.drawer__head { display: flex; align-items: center; gap: var(--s3); padding: var(--s6) var(--s6) var(--s4); }
+.drawer__title { font-size: 18px; font-weight: 700; letter-spacing: -0.01em; }
+.drawer__body { padding: 0 var(--s6) var(--s6); overflow-y: auto; display: grid; gap: var(--s5); }
+
+.kv { display: grid; gap: var(--s3); }
+.kv__row { display: flex; align-items: baseline; gap: var(--s4); }
+.kv__k { font-size: 12px; color: var(--ink-3); min-width: 116px; }
+.kv__v { font-size: 13px; font-variant-numeric: tabular-nums; }
+
+.tl { display: grid; gap: 0; }
+.tl__row { display: grid; grid-template-columns: 58px 12px minmax(0, 1fr); gap: var(--s3); align-items: center; padding: 7px 0; border-top: 1px solid var(--line); }
+.tl__row:first-child { border-top: 0; }
+.tl__t { font-size: 11px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
+.tl__x { font-size: 12px; }
+.tl__d { font-size: 12px; color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+
+/* ── States ───────────────────────────────────────────────────────────── */
+
+.empty { padding: var(--s7) var(--s4); text-align: center; color: var(--ink-3); }
+.skel { background: var(--surface); border-radius: var(--r-card); animation: pulse 1.3s ease-in-out infinite; }
+@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } }
+@media (prefers-reduced-motion: reduce) { .skel { animation: none; } }
+
+/* ── Responsive ───────────────────────────────────────────────────────── */
+
+@media (max-width: 1240px) {
+  .g-hero { grid-template-columns: repeat(2, minmax(0, 1fr)); }
+  .g-hero > .row-2 { grid-row: auto; grid-column: span 2; }
+  .g-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
+}
+@media (max-width: 860px) {
+  body { padding: 10px; }
+  .shell { padding: var(--s5) var(--s4); border-radius: 28px; }
+  .body { grid-template-columns: minmax(0, 1fr); }
+  .rail { flex-direction: row; overflow-x: auto; }
+  .title { font-size: 32px; }
+  .g-hero, .g-2, .g-3, .g-4 { grid-template-columns: minmax(0, 1fr); }
+  .span-2, .g-hero > .row-2 { grid-column: auto; }
+}