@usableapp/cardds 0.1.0

package/css/media.css

@@ -0,0 +1,232 @@
+/* ============================================================
+   cardds/media.css — media & display inside cards:
+   cover card · quote · tile grid · fold · waveform
+   ============================================================ */
+
+/* ---- cover: the image IS the card; text over a scrim ----
+   <article class="card card--cover"><div class="ph" role="img"></div>
+     <div class="card__head"><span class="t-overline">Featured</span><button class="icon-btn icon-btn--sm">♥</button></div>
+     <div><h2 class="t-h1">Art Institute</h2><p class="t-body">111 South Michigan Ave</p></div>
+     <div class="row">…meta…</div></article> */
+.card--cover {
+  --card-bg: var(--card-3-bg);
+  --card-ink: var(--card-3-ink);
+  --accent: var(--card-3-ink);
+  --on-accent: var(--card-3-bg);
+  min-height: 22.5rem;
+  align-content: space-between;
+  overflow: hidden;
+  isolation: isolate;
+}
+.card--cover > img,
+.card--cover > .ph {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  z-index: -2;
+  border: 0;
+  border-radius: 0;
+  min-height: 0;
+}
+/* scrim: dark at both ends so overline and meta stay readable */
+.card--cover::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  z-index: -1;
+  background: linear-gradient(to bottom, var(--scrim), transparent 40% 60%, var(--scrim));
+}
+.card--cover .t-muted { color: inherit; opacity: 0.75; }
+.card--cover .row__meta { color: inherit; opacity: 0.85; }
+
+/* ---- quote: giant mark, big text, attribution ----
+   <blockquote class="quote"><p class="quote__text">It's overcast…</p><footer class="quote__by">Wednesday 15</footer></blockquote> */
+.quote { margin: 0; display: grid; gap: var(--sp-3); }
+.quote::before {
+  content: "\201C";
+  font: 900 calc(var(--fs-h1) * 3)/0.55 var(--font-display);
+  height: var(--sp-10);
+  opacity: 0.9;
+}
+.quote__text { margin: 0; font: var(--type-h1); letter-spacing: var(--track-h1); text-wrap: balance; }
+.quote--sm .quote__text { font: var(--type-h2); letter-spacing: var(--track-h2); }
+.quote__by { font: var(--type-overline); letter-spacing: var(--track-overline); text-transform: uppercase; color: var(--card-muted); }
+.card--3 .quote__by { color: inherit; opacity: 0.7; }
+
+/* ---- tile grid: big square tiles — icon top, label bottom ----
+   <div class="tile-grid"><button class="tile"><svg class="icon"/><span class="tile__label">Light</span></button>
+   <label class="tile tile--pick"><input type="checkbox"><svg class="icon"/><span class="tile__label">Music</span></label></div> */
+.tile-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(min(var(--tile-min), 100%), 1fr));
+  gap: var(--sp-3);
+}
+.tile-grid--3 { --tile-min: 6rem; } /* three across on a phone (attachments, upload kinds) */
+.tile {
+  display: grid;
+  align-content: space-between;
+  justify-items: start;
+  gap: var(--sp-5);
+  min-height: var(--tile-h);
+  min-width: 0;
+  padding: var(--sp-4);
+  border: var(--border-w) solid var(--outline);
+  border-radius: var(--r-card);
+  background: var(--action-bg);
+  color: var(--action-ink);
+  font: inherit;
+  text-align: left;
+  position: relative;
+  cursor: pointer;
+}
+.tile__label { font: var(--type-title); }
+.tile__value { font: var(--type-h2); letter-spacing: var(--track-h2); font-variant-numeric: tabular-nums; }
+.tile__sub { font: var(--type-caption); opacity: 0.7; }
+.tile__text { display: grid; gap: var(--sp-0); }
+.tile--on { background: var(--accent); color: var(--on-accent); border-color: transparent; }
+.tile--pick > input { appearance: none; position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
+.tile--pick:has(:checked) { background: var(--accent); color: var(--on-accent); border-color: transparent; }
+.tile--pick:has(:focus-visible) { outline: var(--focus); outline-offset: var(--sp-1); }
+.tile--wide { grid-column: 1 / -1; }
+.tile--stat { min-height: var(--avatar-xl); gap: var(--sp-3); grid-template-columns: auto 1fr; align-items: center; }
+/* upload: dashed, centred plus + label */
+.tile--upload {
+  border-style: dashed;
+  background: transparent;
+  color: inherit;
+  align-content: center;
+  justify-items: center;
+  gap: var(--sp-2);
+  text-align: center;
+}
+/* tinted tiles: slot colors inside a card (schedule, notes) */
+.tile--2 { background: var(--card-2-bg); color: var(--card-2-ink); border-color: transparent; }
+.tile--3 { background: var(--card-3-bg); color: var(--card-3-ink); border-color: transparent; }
+
+/* ---- fold: a sticky-note corner on any card (decorative) ----
+   No border. The card's outline follows its border box, so it ran straight
+   across the squared bottom-right corner and cut through the fold's diagonal —
+   the corner read as a notch with a line through it rather than a lifted flap.
+   The COLOUR goes transparent rather than the border going to 0, so the box
+   keeps its geometry and a fold card still measures the same as the cards
+   beside it in a deck. */
+.card--fold {
+  border-color: transparent;
+  border-bottom-right-radius: 0;
+  background-image: linear-gradient(to top left,
+    var(--surface) 0 50%,
+    color-mix(in srgb, currentColor 18%, var(--card-bg)) 50% 100%);
+  background-repeat: no-repeat;
+  background-position: bottom right;
+  background-size: var(--sp-8) var(--sp-8);
+}
+
+/* ---- wave: audio waveform stand-in for voice rows ----
+   <span class="wave"></span> — sits in a .row__body, fills the width */
+.wave {
+  display: block;
+  height: var(--icon);
+  width: 100%;
+  background: repeating-linear-gradient(90deg, currentColor 0 var(--sp-1), transparent var(--sp-1) var(--sp-2));
+  /* masks only read alpha: currentColor = "opaque" without naming a color */
+  mask: radial-gradient(ellipse 60% 100% at 50% 50%, currentColor 55%, transparent 58%) 0 0 / var(--tap-lg) 100% repeat-x;
+  -webkit-mask: radial-gradient(ellipse 60% 100% at 50% 50%, currentColor 55%, transparent 58%) 0 0 / var(--tap-lg) 100% repeat-x;
+  opacity: 0.8;
+}
+
+/* ---- mosaic: one big photo + two small, inside a card ----
+   <div class="mosaic"><div class="ph"></div><div class="ph"></div><div class="ph"></div></div> */
+.mosaic {
+  display: grid;
+  grid-template-columns: 2fr 1fr;
+  grid-auto-rows: 1fr;
+  gap: var(--sp-1);
+  aspect-ratio: 4 / 3;
+  border-radius: var(--r-media);
+  overflow: hidden;
+}
+.mosaic > :first-child { grid-row: span 2; }
+.mosaic > * { min-height: 0; border-radius: 0; opacity: 1; border-width: 0; }
+.mosaic > .ph { opacity: 0.4; border-width: var(--border-w); }
+.mosaic > img { width: 100%; height: 100%; object-fit: cover; }
+
+/* ---- postcard: a member's introduction, a card in the hand — photo in front,
+   words on the back; tap to turn it over (Lh, 2026-09-12; card #63) ----
+   <div class="postcard">
+     <button class="postcard__face postcard__front" type="button" aria-label="พลิกดูด้านหลัง">
+       <img src="…" alt=""> — or <div class="ph"></div> —
+       <span class="postcard__label">ป้าแจ๋ว</span>
+     </button>
+     <button class="postcard__face postcard__back" type="button" aria-label="พลิกดูด้านหน้า">
+       <p class="postcard__caption">ชอบชงกาแฟดริปตอนเช้า</p>
+       <span class="postcard__label">ป้าแจ๋ว</span>
+     </button>
+   </div>
+   Each face is the whole tap target; cardds.js toggles .is-flipped on the
+   postcard (either face, Enter/Space too). A voice note, a like, a reply live
+   OUTSIDE the postcard (a Row under it): a face is a button, and a button
+   holds no button. The faces share one box (a 3:2 landscape card, the media
+   radius); the turn is a Y rotation at --motion-flip, a plain swap under
+   prefers-reduced-motion. Reads ink from the card slot it sits in. */
+.postcard {
+  position: relative;
+  aspect-ratio: 3 / 2;
+  perspective: 60rem;
+  border-radius: var(--r-media);
+}
+.postcard__face {
+  position: absolute;
+  inset: 0;
+  display: grid;
+  align-content: end;
+  padding: var(--sp-4);
+  gap: var(--sp-2);
+  border: var(--border-w) solid var(--card-border);
+  border-radius: inherit;
+  overflow: hidden;
+  isolation: isolate;
+  color: inherit;
+  text-align: left;
+  backface-visibility: hidden;
+  -webkit-backface-visibility: hidden;
+  transition: transform var(--motion-flip) ease-in-out;
+  box-shadow: var(--shadow-float);
+}
+.postcard__face:focus-visible { outline: var(--focus); outline-offset: var(--sp-1); }
+/* the front: the photo (or the wireframe box) fills it, the name reads on a scrim */
+.postcard__front { background: var(--card-3-bg); color: var(--card-3-ink); }
+.postcard__front > img,
+.postcard__front > .ph {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  z-index: -2;
+  border: 0;
+  border-radius: 0;
+  min-height: 0;
+}
+.postcard__front::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  z-index: -1;
+  background: linear-gradient(to top, var(--scrim), transparent 45%);
+}
+/* the back: paper — the words, big enough to read at arm's length */
+.postcard__back {
+  background: var(--card-2-bg);
+  color: var(--card-2-ink);
+  align-content: space-between;
+  transform: rotateY(180deg);
+}
+.postcard__caption { margin: 0; font: var(--type-title); text-wrap: pretty; }
+.postcard__label { font: var(--type-overline); letter-spacing: var(--track-overline); text-transform: uppercase; opacity: 0.85; }
+.postcard.is-flipped > .postcard__front { transform: rotateY(-180deg); }
+.postcard.is-flipped > .postcard__back { transform: rotateY(0); }
+@media (prefers-reduced-motion: reduce) {
+  .postcard__face { transition: none; }
+}

package/css/numbers.css

@@ -0,0 +1,258 @@
+/* ============================================================
+   cardds/numbers.css — big numbers inside cards:
+   ring gauge · step track · data band · dot grid · value picker
+   Data goes in as unitless custom properties on the element
+   (--value, --done, --total); the math lives here.
+   ============================================================ */
+
+/* ---- ring: conic gauge, --value 0–100, content centred ----
+   <div class="ring" style="--value: 60"><span class="ring__value">60%</span><span class="ring__label">done</span></div> */
+.ring {
+  --value: 0;
+  --_size: var(--ring);
+  --_w: var(--ring-w);
+  width: var(--_size);
+  height: var(--_size);
+  flex: none;
+  border-radius: 50%;
+  display: grid;
+  place-content: center;
+  text-align: center;
+  position: relative;
+  font-variant-numeric: tabular-nums;
+}
+.ring::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  border-radius: 50%;
+  background: conic-gradient(var(--accent) calc(var(--value) * 1%), var(--ink-tint) 0);
+  /* masks only read alpha: currentColor = "opaque" without naming a color */
+  mask: radial-gradient(farthest-side, transparent calc(100% - var(--_w) - 1px), currentColor calc(100% - var(--_w)));
+  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - var(--_w) - 1px), currentColor calc(100% - var(--_w)));
+}
+.ring__value { font: var(--type-stat); letter-spacing: var(--track-display); }
+.ring__label { font: var(--type-caption); color: var(--card-muted); }
+.card--3 .ring__label { color: inherit; opacity: 0.7; }
+.ring--sm { --_size: var(--avatar-xl); --_w: var(--sp-3); }
+.ring--sm .ring__value { font: 800 var(--fs-2xl)/1 var(--font-display); }
+.ring--xs { --_size: var(--tap-sm); --_w: var(--dot-xs); } /* inline counter (step 3 of 5) */
+.ring--xs .ring__value { font: var(--type-overline); }
+
+/* ---- track: step progress in a pill — done · done · todo ----
+   <ol class="track"><li class="track__step is-done">icon</li> …</ol> */
+.track {
+  --_bg: var(--card-3-bg);
+  --_ink: var(--card-3-ink);
+  /* the track lays down its own dark ground, so like the dark card slot it
+     re-points the accent to its own ink (README rule 10). Without this, any
+     palette where --accent equals --card-3-bg — field, hydro, and the
+     wireframe default — paints done steps invisibly on the track. */
+  --accent: var(--_ink);
+  --on-accent: var(--_bg);
+  list-style: none;
+  margin: 0;
+  padding: var(--sp-2);
+  display: flex;
+  align-items: center;
+  border-radius: var(--r-chip);
+  background: var(--_bg);
+  color: var(--_ink);
+}
+.card--3 .track { --_bg: var(--card-3-ink); --_ink: var(--card-3-bg); }
+.track__step {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  min-width: 0;
+}
+.track__step:first-child { flex: none; }
+/* the connector runs INTO each step; it lights up when that step is done */
+.track__step::before {
+  content: "";
+  flex: 1;
+  height: var(--sp-3);
+  background: color-mix(in srgb, var(--_ink) 30%, transparent);
+}
+.track__step:first-child::before { display: none; }
+.track__step.is-done::before { background: var(--accent); }
+.track__step > .icon,
+.track__step > .track__dot {
+  width: var(--tap-lg);
+  height: var(--tap-lg);
+  flex: none;
+  padding: calc((var(--tap-lg) - var(--icon)) / 2);
+  border-radius: 50%;
+  background: color-mix(in srgb, var(--_ink) 30%, transparent);
+  color: var(--_ink);
+}
+.track__step.is-done > .icon,
+.track__step.is-done > .track__dot { background: var(--accent); color: var(--on-accent); }
+
+/* ---- band: data card — 2-line label · giant number · footnote ----
+   <article class="card card--band"><span class="band__label">Hours<br>banked</span><span class="band__num">18</span><span class="band__foot">this week</span></article> */
+.card--band {
+  grid-template-columns: 1fr auto;
+  grid-template-areas: "label num" "foot num";
+  align-items: end;
+  gap: var(--sp-2) var(--sp-4);
+  min-height: var(--tile-h);
+}
+.band__label { grid-area: label; align-self: start; font: var(--type-label); font-size: var(--fs-body); line-height: 1.2; }
+.band__num {
+  grid-area: num;
+  font: 800 var(--fs-giant) / 0.9 var(--font-display);
+  letter-spacing: var(--track-display);
+  font-variant-numeric: tabular-nums;
+}
+.band__num small { font-size: 0.5em; font-weight: 700; margin-right: 0.1em; } /* unit or % */
+.band__foot { grid-area: foot; font: var(--type-caption); color: var(--card-muted); }
+.card--3 .band__foot { color: inherit; opacity: 0.7; }
+/* band stack: ONE card boundary; bands are frameless inside it, a hairline
+   between each. Bands may still carry slot tints (card--2 / card--3). */
+.band-stack {
+  display: grid;
+  border: var(--border-w) solid var(--card-border);
+  border-radius: var(--r-card);
+  overflow: hidden;
+}
+.band-stack > .card--band { border: 0; border-radius: 0; box-shadow: none; }
+.band-stack > .card--band + .card--band { border-top: var(--border-w) solid var(--hairline); }
+
+/* ---- dotgrid: progress over time as dots — --total, --done, --cols ----
+   one element, no children:
+   <div class="dotgrid" style="--total: 365; --done: 128" role="img" aria-label="128 of 365 days"></div> */
+.dotgrid {
+  --cols: 12;
+  --total: 100;
+  --done: 0;
+  --_rows: round(up, var(--total) / var(--cols));
+  --_full: round(down, var(--done) / var(--cols));   /* complete rows */
+  --_part: calc(var(--done) - var(--_full) * var(--cols)); /* dots in the partial row */
+  --_cell-x: calc(100% / var(--cols));
+  --_cell-y: calc(100% / var(--_rows));
+  width: 100%;
+  aspect-ratio: calc(var(--cols) / var(--_rows));
+  position: relative;
+  background: radial-gradient(circle, var(--hairline) 0 34%, transparent 37%) 0 0 / var(--_cell-x) var(--_cell-y);
+}
+.dotgrid::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  background: radial-gradient(circle, var(--accent) 0 34%, transparent 37%) 0 0 / var(--_cell-x) var(--_cell-y);
+  clip-path: polygon(
+    0 0,
+    100% 0,
+    100% calc(var(--_full) * var(--_cell-y)),
+    calc(var(--_part) * var(--_cell-x)) calc(var(--_full) * var(--_cell-y)),
+    calc(var(--_part) * var(--_cell-x)) calc((var(--_full) + 1) * var(--_cell-y)),
+    0 calc((var(--_full) + 1) * var(--_cell-y))
+  );
+}
+/* no round(): show the grid without the done fill rather than a broken shape */
+@supports not (width: round(up, 1px, 1px)) {
+  .dotgrid::before { display: none; }
+}
+.dotgrid--stars {
+  background-image: none;
+}
+.dotgrid--stars,
+.dotgrid--stars::before {
+  --_star: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%);
+}
+
+/* ---- picker: horizontal snap picker, centre value big ----
+   <div class="picker"><div class="picker__rail"><button class="picker__item">100</button>…</div><span class="picker__unit">ml</span></div> */
+.picker { display: grid; gap: var(--sp-1); justify-items: center; position: relative; }
+.picker__rail {
+  width: 100%;
+  display: grid;
+  grid-auto-flow: column;
+  /* side padding = one third of the rail, so the first and last value can sit
+     in the centre; the content box is then one third wide, and each column
+     fills it (percent columns resolve against the content box) */
+  padding-inline: calc(100% / 3);
+  grid-auto-columns: 100%;
+  overflow-x: auto;
+  scroll-snap-type: x mandatory;
+  scrollbar-width: none;
+  position: relative;
+}
+.picker__rail::-webkit-scrollbar { display: none; }
+.picker__item {
+  scroll-snap-align: center;
+  border: 0;
+  background: transparent;
+  color: inherit;
+  padding: var(--sp-2) 0;
+  font: var(--type-stat);
+  letter-spacing: var(--track-display);
+  font-variant-numeric: tabular-nums;
+  opacity: 0.3;
+  text-align: center;
+}
+.picker__item[aria-selected="true"] { opacity: 1; }
+/* centre rules either side of the selected value */
+.picker::before,
+.picker::after {
+  content: "";
+  position: absolute;
+  top: var(--sp-2);
+  height: calc(var(--sp-10) + var(--sp-3));
+  width: var(--rule-w);
+  background: var(--accent);
+  left: calc(100% / 3);
+}
+.picker::after { left: auto; right: calc(100% / 3); }
+.picker__unit { font: var(--type-caption); color: var(--card-muted); }
+.card--3 .picker__unit { color: inherit; opacity: 0.7; }
+/* the scrolled-to item lights up by position — no JS */
+@supports (animation-timeline: view(x)) {
+  .picker__item { opacity: 0.3; animation: picker-focus linear both; animation-timeline: view(x); }
+  @keyframes picker-focus {
+    0%, 100% { opacity: 0.3; }
+    45%, 55% { opacity: 1; }
+  }
+}
+
+/* ---- badge: tiny count next to a title or tab ("Leads +9", "All 23") ----
+   <h3 class="t-h2">Leads <span class="badge">+9</span></h3> */
+.badge {
+  display: inline-grid;
+  place-items: center;
+  min-width: var(--badge);
+  height: var(--badge);
+  padding: 0 var(--sp-2);
+  border-radius: var(--r-chip);
+  background: var(--accent);
+  color: var(--on-accent);
+  font: var(--type-label);
+  font-variant-numeric: tabular-nums;
+  vertical-align: middle;
+}
+.badge--soft { background: var(--ink-tint); color: inherit; }
+
+/* ---- bars: three or four bars with a count on top — the glance chart ----
+   <div class="bars"><div class="bar" style="--v: 16"><span>+16</span></div>… --max on the parent */
+.bars { --max: 20; --_h: 5rem; display: flex; align-items: end; gap: var(--sp-2); height: calc(var(--_h) + var(--sp-8)); }
+.bar {
+  flex: 1;
+  min-width: 0;
+  display: grid;
+  align-content: end;
+  justify-items: center;
+  gap: var(--sp-1);
+  height: 100%;
+  font: var(--type-caption);
+  font-weight: 700;
+}
+.bar::after {
+  content: "";
+  width: 100%;
+  height: max(var(--sp-2), calc(var(--v) / var(--max) * var(--_h)));
+  border-radius: var(--r-badge);
+  background: var(--ink-tint);
+}
+.bar--on::after { background: var(--accent); }
+.bar--on > span { background: var(--accent); color: var(--on-accent); padding: var(--sp-0) var(--sp-2); border-radius: var(--r-chip); }

package/css/palette.css

@@ -0,0 +1,112 @@
+/* ============================================================
+   cardds/palette.css — COLOR SETTINGS. The only file you tune.
+   Apply with <html data-palette="clay"> (or <body>).
+   No attribute = wireframe grayscale from tokens.css.
+   Each palette overrides role tokens only — components never change.
+   ============================================================ */
+
+/* ---- CLAY — earth-toned: cream surface, terracotta / mustard / ink cards ---- */
+[data-palette="clay"] {
+  --surface: #ece5d8;
+  --on-surface: #191713;
+  --on-surface-muted: #6f675a;
+
+  --card-1-bg: #e8b647;  --card-1-ink: #191713;  /* mustard hero */
+  --card-2-bg: #e05c3a;  --card-2-ink: #191713;  /* terracotta */
+  --card-3-bg: #1c1a17;  --card-3-ink: #f4efe4;  /* ink */
+
+  --card-border: transparent;
+  --card-muted: #45412f;       /* 5.5:1 on the mustard card — AA for captions and metas (#55503f was 4.3:1) */
+  --card-2-muted: var(--card-2-ink); /* terracotta holds 5:1 for its ink alone; nothing lighter passes AA, so tone 2 has no muted */
+
+  --accent: #1c1a17;     --on-accent: #f4efe4;
+  --action-bg: #f7f3e9;  --action-ink: #191713;  --action-border: transparent;
+
+  --pos: #3e7d4f;  --neg: #c23c1d;
+  --dot-a: #e05c3a;  --dot-b: #6f6be0;
+}
+
+/* ---- SHINE — shiny: periwinkle surface, coral / black / gold cards ---- */
+[data-palette="shine"] {
+  --surface: #6d6ae4;
+  --on-surface: #ffffff;
+  --on-surface-muted: #d3d2f7;
+
+  --card-1-bg: #eec85a;  --card-1-ink: #16161a;
+  --card-2-bg: #e8624a;  --card-2-ink: #16161a;
+  --card-3-bg: #1b1b1f;  --card-3-ink: #ffffff;
+
+  --card-border: transparent;
+  --card-muted: #4c4a44;
+
+  --accent: #1b1b1f;     --on-accent: #ffffff;
+  --action-bg: #ffffff;  --action-ink: #16161a;  --action-border: transparent;
+
+  --pos: #2e9e5b;  --neg: #d6402a;
+  --dot-a: #e8624a;  --dot-b: #6d6ae4;
+}
+
+/* ---- FIELD — warm peach editorial: cream surface, orange accent ---- */
+[data-palette="field"] {
+  --surface: #f9e8dc;
+  --on-surface: #241f1b;
+  --on-surface-muted: #8a7d72;
+
+  --card-1-bg: #ffffff;  --card-1-ink: #241f1b;
+  --card-2-bg: #f6d9c5;  --card-2-ink: #241f1b;
+  --card-3-bg: #ef4e0b;  --card-3-ink: #fff4ec;
+
+  --card-border: transparent;
+  --card-muted: #8a7d72;
+
+  --accent: #ef4e0b;     --on-accent: #fff4ec;
+  --action-bg: #ffffff;  --action-ink: #241f1b;  --action-border: transparent;
+
+  --pos: #2e8f52;  --neg: #d13b1a;
+  --dot-a: #ef4e0b;  --dot-b: #241f1b;
+}
+
+/* ---- ROAST — coffee: warm cream surface, caramel accent ---- */
+[data-palette="roast"] {
+  --surface: #f6f1e7;
+  --on-surface: #2b211a;
+  --on-surface-muted: #8c7f70;
+
+  --card-1-bg: #ffffff;  --card-1-ink: #2b211a;
+  --card-2-bg: #e9dcc6;  --card-2-ink: #2b211a;
+  --card-3-bg: #b97e3c;  --card-3-ink: #fdf9f1;
+
+  --card-border: transparent;
+  --card-muted: #8c7f70;
+
+  --accent: #b97e3c;     --on-accent: #fdf9f1;
+  --action-bg: #ffffff;  --action-ink: #2b211a;  --action-border: transparent;
+
+  --pos: #3e7d4f;  --neg: #bf4028;
+  --dot-a: #b97e3c;  --dot-b: #2b211a;
+}
+
+/* ---- HYDRO — cool shiny blue: airy surface, saturated blue CTA ---- */
+[data-palette="hydro"] {
+  --surface: #e9f0fb;
+  --on-surface: #17203a;
+  --on-surface-muted: #64729a;
+
+  --card-1-bg: #ffffff;  --card-1-ink: #17203a;
+  --card-2-bg: #cddcf7;  --card-2-ink: #17203a;
+  --card-3-bg: #3d63e0;  --card-3-ink: #f2f6ff;
+
+  --card-border: transparent;
+  --card-muted: #64729a;
+
+  --accent: #3d63e0;     --on-accent: #f2f6ff;
+  --action-bg: #ffffff;  --action-ink: #17203a;  --action-border: transparent;
+
+  --pos: #2e8f52;  --neg: #d13b1a;
+  --dot-a: #3d63e0;  --dot-b: #eec85a;
+}
+
+/* Colored palettes trade wireframe outlines for soft elevation. */
+[data-palette] :is(.card, .band-stack) { box-shadow: var(--shadow-card); }
+/* …but controls keep a faint edge so they still read as controls */
+[data-palette] { --outline: color-mix(in srgb, currentColor 25%, transparent); }

package/css/people.css

@@ -0,0 +1,79 @@
+/* ============================================================
+   cardds/people.css — avatars: single, stacked, chooser row.
+   A person row = .row with an .avatar as lead (see lists.css).
+   ============================================================ */
+
+.avatar--center { margin-inline: auto; } /* centred in a sheet head */
+
+/* ---- avatar: initials by default, <img> when there is a photo ----
+   <span class="avatar">LH</span> · <span class="avatar"><img src alt></span> */
+.avatar {
+  --_size: var(--avatar);
+  width: var(--_size);
+  height: var(--_size);
+  flex: none;
+  border-radius: 50%;
+  display: grid;
+  place-items: center;
+  background: var(--card-2-bg);
+  color: var(--card-2-ink);
+  font: var(--type-label);
+  font-size: calc(var(--_size) * 0.3);
+  text-transform: uppercase;
+  letter-spacing: 0.02em;
+  position: relative;
+  text-decoration: none; /* .avatar works as <a> too */
+}
+.avatar > img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
+.avatar > .icon { width: 50%; height: 50%; }
+.avatar--sm { --_size: var(--avatar-sm); }
+.avatar--lg { --_size: var(--avatar-lg); }
+.avatar--xl { --_size: var(--avatar-xl); } /* sheet head icon ring */
+/* outline avatar: no fill, an edge — icons in a ring, "add" slots */
+.avatar--outline { background: transparent; color: inherit; border: var(--border-w) solid var(--outline); }
+.avatar--add { background: transparent; color: inherit; border: var(--border-w) dashed var(--outline); cursor: pointer; }
+/* accent avatar: the "+7" tail, the selected person */
+.avatar--on { background: var(--accent); color: var(--on-accent); }
+/* halo: faint concentric rings behind a hero avatar (decorative) */
+.avatar--halo::before {
+  content: "";
+  position: absolute;
+  inset: calc(-0.55 * var(--_size));
+  border-radius: 50%;
+  background: repeating-radial-gradient(circle, transparent 0 calc(var(--_size) * 0.5), currentColor calc(var(--_size) * 0.5) calc(var(--_size) * 0.5 + var(--border-w)), transparent calc(var(--_size) * 0.5 + var(--border-w)) calc(var(--_size) * 0.68));
+  opacity: 0.25;
+  pointer-events: none;
+}
+
+/* ---- avatar stack: overlapping heads, optional +N tail ----
+   <span class="avatar-stack"><span class="avatar avatar--sm">A</span>…<span class="avatar avatar--sm avatar--on">+7</span></span> */
+.avatar-stack { display: inline-flex; align-items: center; }
+.avatar-stack > .avatar { box-shadow: 0 0 0 var(--sp-1) var(--card-bg, var(--surface)); }
+.avatar-stack > .avatar + .avatar { margin-left: calc(-1 * var(--sp-3)); }
+
+/* ---- avatar chooser: big heads with name + role under, scrolls sideways ----
+   <div class="avatar-pick"><button class="avatar-pick__item"><span class="avatar avatar--lg avatar--add">+</span><span class="avatar-pick__name">Add</span><span class="avatar-pick__role">member</span></button>…</div> */
+.avatar-pick {
+  display: flex;
+  gap: var(--sp-4);
+  overflow-x: auto;
+  scroll-snap-type: x proximity;
+  scrollbar-width: none; /* starts at the card's padding edge, like every row */
+}
+.avatar-pick::-webkit-scrollbar { display: none; }
+.avatar-pick__item {
+  scroll-snap-align: start;
+  flex: none;
+  width: var(--avatar-lg);
+  display: grid;
+  justify-items: center;
+  gap: var(--sp-2);
+  border: 0;
+  background: transparent;
+  color: inherit;
+  padding: 0;
+  text-align: center;
+}
+.avatar-pick__name { font: var(--type-label); font-size: var(--fs-sm); }
+.avatar-pick__role { font: var(--type-caption); color: var(--card-muted); margin-top: calc(-1 * var(--sp-1)); }
+.card--3 .avatar-pick__role { color: inherit; opacity: 0.7; }