/* ═══════════════════════════════════════════════════════════════════════════
   GOOD COMPANY — SKINS AND SHARED PRIMITIVES
   The one place a color is decided. Linked by room.html, build.html and
   album.html.

   EXTRACTED BECAUSE IT WAS ABOUT TO BE COPIED A THIRD TIME. It already lived
   in two files, and the first skin fix (deepening the seaside coral for
   contrast) would have had to be made twice. Three copies is where a palette
   starts drifting between pages without anybody noticing.

   Pattern is Founder Studio's: one block per skin, all redefining the same
   names, and adding a skin is one more block plus one entry in the SKINS list
   in the page script. Nothing else changes.

   THE RULE FOUNDER STUDIO WROTE IN ITS OWN MARGIN, applied to what matters
   here: a skin dresses the ROOM. It never touches the friend and it never
   touches whether the conversation can be read.
     * No skin variable may appear in the .portrait block. Nothing tints,
       filters, overlays or borders that face.
     * Chat text is full-strength ink on the panel in every skin, and the
       pairs below are contrast-measured rather than eyeballed. The weakest
       thing on the page sits at 5.2:1; these readers are mostly older.
   ═══════════════════════════════════════════════════════════════════════════ */

:root{
  --mono:'Courier New', ui-monospace, monospace;

  /* Emotion colors for the LIGHT skins. Only Fireside overrides the set; no
     other skin should, because seven more values per skin is how a palette
     rots. */
  --happy:#4F7040; --sad:#3F6685; --fear:#6B5C90;
  --disgust:#6E6733; --anger:#9C4630; --surprise:#8A6E1E; --curious:#8A5B21;
}

/* ── HARVEST. Pumpkin spice, falling leaves, browns and greens. ──────────── */
[data-skin="harvest"]{
  --paper:#F7F1E6; --panel:#EFE5D3; --chrome:rgba(247,241,230,.93);
  --ink:#241C12; --ink-dim:#665441; --line:#DDCEB6;
  --accent:#9E4E27; --accent-hover:#7A3A1B; --accent-ink:#FFF8ED;
  --moss:#5C6B3F;
}

/* ── SEASIDE. Blues, coral, sea green. ───────────────────────────────────── */
[data-skin="seaside"]{
  --paper:#F1F7F8; --panel:#E1EFF1; --chrome:rgba(241,247,248,.93);
  --ink:#0F2429; --ink-dim:#4A666D; --line:#C7DDE1;
  /* Coral, deepened. The brighter seaside coral measured 4.59:1 on the scene
     chips, which passes on paper and is too thin for 11px letter-spaced caps
     read at arm's length. Still coral, still the seaside. */
  --accent:#9A4630; --accent-hover:#7C3323; --accent-ink:#FFF6F3;
  --moss:#2F6B62;
}

/* ── SNOWLINE. Mountaintop whites, pine, cold light. ─────────────────────── */
[data-skin="snowline"]{
  --paper:#F6F8FA; --panel:#EAEEF3; --chrome:rgba(246,248,250,.93);
  --ink:#171A1F; --ink-dim:#555C67; --line:#D8DEE7;
  --accent:#3A6355; --accent-hover:#274740; --accent-ink:#F4F9F7;
  --moss:#3A6355;
}

/* ── FIRESIDE. The dark one. Embers, char, brass. ────────────────────────── */
[data-skin="fireside"]{
  --paper:#171310; --panel:#221C17; --chrome:rgba(23,19,16,.93);
  --ink:#F4ECE0; --ink-dim:#AC9D8B; --line:#382E24;
  --accent:#E08A4E; --accent-hover:#EFA871; --accent-ink:#1A1410;
  --moss:#8FA86A;

  --happy:#8FBF74; --sad:#7FA8CE; --fear:#B2A2D4;
  --disgust:#BDB05E; --anger:#E08A70; --surprise:#E0BE55; --curious:#E0A458;
}

/* ── GROVE. The other dark one. Actually green, not brown wearing green's
   name. Added 2026-08-19 per Dr. O directly: "a dark green and gold skin
   option." First pass ("leaning into the fall season") pushed the paper/
   panel values so far toward neutral that red and green sat almost equal
   in the hex -- the classic way a "dark" anything quietly turns into
   brown-black no matter what color was intended, and exactly what she
   called out: "no color change, no green... I am so tired of Claude dark
   brown and cream." Corrected by keeping green clearly dominant in every
   background value below (green channel meaningfully higher than both
   red and blue, not just barely), checked against the deep-forest
   reference photo she sent rather than eyeballed. Gold stays as the
   accent, which is the actual "and gold" half of what was asked for.

   Same reason Fireside carries its own emotion-colour overrides just
   above: the shared LIGHT-skin set at the top of this file is tuned for
   a pale background and reads too dim on a dark one. Reused Fireside's
   own values rather than inventing a third set — they were already
   contrast-checked against a dark panel, and the comment on the shared
   set ("only Fireside overrides... seven more values per skin is how a
   palette rots") now means "only the dark skins," for the same original
   reason, not literally only Fireside. */
[data-skin="grove"]{
  --paper:#0E1A10; --panel:#17281A; --chrome:rgba(14,26,16,.93);
  --ink:#EFE6CC; --ink-dim:#93AE85; --line:#2C4530;
  --accent:#D4A72C; --accent-hover:#E8C24A; --accent-ink:#14210F;
  --moss:#5C8A4A;

  --happy:#8FBF74; --sad:#7FA8CE; --fear:#B2A2D4;
  --disgust:#BDB05E; --anger:#E08A70; --surprise:#E0BE55; --curious:#E0A458;
}

/* ── NINETEEN MORE, 2026-08-29. Real photos, real sampled swatches, contrast-
   verified the same way as the five above (ink/paper, ink-dim/paper 5.2:1
   minimum, accent-ink/accent). Same rule as the comment at the top of this
   file: one block here, one entry in GC_SKINS in gc-skin.js, nothing else.
   The six dark ones reuse Fireside/Grove's own emotion-color overrides
   rather than inventing a seventh set. ────────────────────────────────── */

/* ── BRAMBLE. Blueberries, denim blues, cool and crisp. ── */
[data-skin="bramble"]{
  --paper:#D2E2EE; --panel:#BAD3E8; --chrome:rgba(210,226,238,.93);
  --ink:#0F1215; --ink-dim:#40596D; --line:#9AC0DF;
  --accent:#0A385F; --accent-hover:#062035; --accent-ink:#F7F7F8;
  --moss:#2B6397;
}

/* ── TIDEPOOL. Tidepool teal and dusty rose. ── */
[data-skin="tidepool"]{
  --paper:#D2EEEE; --panel:#BAE7E8; --chrome:rgba(210,238,238,.93);
  --ink:#0B1D19; --ink-dim:#2B6559; --line:#9ADEDF;
  --accent:#A33E70; --accent-hover:#823159; --accent-ink:#F8F7F7;
  --moss:#9D2448;
}

/* ── CONFETTI. Blush and cream, party pastels. ── */
[data-skin="confetti"]{
  --paper:#EED4D2; --panel:#E8BDBA; --chrome:rgba(238,212,210,.93);
  --ink:#080806; --ink-dim:#5C5539; --line:#DF9F9A;
  --accent:#F8A49E; --accent-hover:#FBD1CE; --accent-ink:#23211A;
  --moss:#7E7244;
}

/* ── BLUEPRINT. Navy blueprint lines, antique gold. ── */
[data-skin="blueprint"]{
  --paper:#0F1E29; --panel:#142C3D; --chrome:rgba(15,30,41,.93);
  --ink:#EEECE7; --ink-dim:#C2B38E; --line:#1D425D;
  --accent:#BB894C; --accent-hover:#C9A171; --accent-ink:#171A1C;
  --moss:#6498C4;

  --happy:#8FBF74; --sad:#7FA8CE; --fear:#B2A2D4;
  --disgust:#BDB05E; --anger:#E08A70; --surprise:#E0BE55; --curious:#E0A458;
}

/* ── UMBER. Fallen oak leaves, warm browns. ── */
[data-skin="umber"]{
  --paper:#241B14; --panel:#37271B; --chrome:rgba(36,27,20,.93);
  --ink:#EEEBE7; --ink-dim:#C2AB8E; --line:#533A27;
  --accent:#7D5430; --accent-hover:#9A683B; --accent-ink:#F3F2F1;
  --moss:#B49174;

  --happy:#8FBF74; --sad:#7FA8CE; --fear:#B2A2D4;
  --disgust:#BDB05E; --anger:#E08A70; --surprise:#E0BE55; --curious:#E0A458;
}

/* ── BLAZE. Wildfire orange against char black. ── */
[data-skin="blaze"]{
  --paper:#290F12; --panel:#3D1419; --chrome:rgba(41,15,18,.93);
  --ink:#EEEBE7; --ink-dim:#C2AD8E; --line:#5D1D25;
  --accent:#FDA829; --accent-hover:#FDBD5C; --accent-ink:#1C1817;
  --moss:#EF394F;

  --happy:#8FBF74; --sad:#7FA8CE; --fear:#B2A2D4;
  --disgust:#BDB05E; --anger:#E08A70; --surprise:#E0BE55; --curious:#E0A458;
}

/* ── UNDERSTORY. Foggy forest floor, dark and green. ── */
[data-skin="understory"]{
  --paper:#222711; --panel:#323A18; --chrome:rgba(34,39,17,.93);
  --ink:#F6F7F6; --ink-dim:#A1B39E; --line:#4C5823;
  --accent:#A2B645; --accent-hover:#B5C668; --accent-ink:#1B1C17;
  --moss:#A4B474;

  --happy:#8FBF74; --sad:#7FA8CE; --fear:#B2A2D4;
  --disgust:#BDB05E; --anger:#E08A70; --surprise:#E0BE55; --curious:#E0A458;
}

/* ── WILDFLOWER. Wildflower gold, mauve dusk. ── */
[data-skin="wildflower"]{
  --paper:#251319; --panel:#371B24; --chrome:rgba(37,19,25,.93);
  --ink:#EEECE7; --ink-dim:#C2B68E; --line:#532736;
  --accent:#FEB641; --accent-hover:#FEC974; --accent-ink:#171C19;
  --moss:#74B488;

  --happy:#8FBF74; --sad:#7FA8CE; --fear:#B2A2D4;
  --disgust:#BDB05E; --anger:#E08A70; --surprise:#E0BE55; --curious:#E0A458;
}

/* ── TWILIGHT. Purple dusk over still water. ── */
[data-skin="twilight"]{
  --paper:#1B0F29; --panel:#27153D; --chrome:rgba(27,15,41,.93);
  --ink:#EEE7EE; --ink-dim:#C28EC2; --line:#3A1E5C;
  --accent:#993A7D; --accent-hover:#B74595; --accent-ink:#F3F1F3;
  --moss:#756CBC;

  --happy:#8FBF74; --sad:#7FA8CE; --fear:#B2A2D4;
  --disgust:#BDB05E; --anger:#E08A70; --surprise:#E0BE55; --curious:#E0A458;
}

/* ── ALPINE. Misty slate peaks, cold blue light. ── */
[data-skin="alpine"]{
  --paper:#0F1D29; --panel:#152A3C; --chrome:rgba(15,29,41,.93);
  --ink:#E7EEEE; --ink-dim:#8EC2C2; --line:#1F405B;
  --accent:#405265; --accent-hover:#50667E; --accent-ink:#F1F3F3;
  --moss:#7492B4;

  --happy:#8FBF74; --sad:#7FA8CE; --fear:#B2A2D4;
  --disgust:#BDB05E; --anger:#E08A70; --surprise:#E0BE55; --curious:#E0A458;
}

/* ── CANOPY. Deep jungle canopy, black to green. ── */
[data-skin="canopy"]{
  --paper:#1F1919; --panel:#2E2424; --chrome:rgba(31,25,25,.93);
  --ink:#EDEEE7; --ink-dim:#B9C28E; --line:#463535;
  --accent:#3FA75A; --accent-hover:#59C074; --accent-ink:#1C1717;
  --moss:#A8B474;

  --happy:#8FBF74; --sad:#7FA8CE; --fear:#B2A2D4;
  --disgust:#BDB05E; --anger:#E08A70; --surprise:#E0BE55; --curious:#E0A458;
}

/* ── AMETHYST. Amethyst violet, deep and cool. ── */
[data-skin="amethyst"]{
  --paper:#DBD7EA; --panel:#C7C1E2; --chrome:rgba(219,215,234,.93);
  --ink:#0B0A0E; --ink-dim:#574D7F; --line:#AEA4D6;
  --accent:#5740A8; --accent-hover:#463387; --accent-ink:#F8F7F8;
  --moss:#444A7E;
}

/* ── DRIFTWOOD. Sun-bleached shells, warm neutral sand. ── */
[data-skin="driftwood"]{
  --paper:#E4E4DD; --panel:#D7D7CB; --chrome:rgba(228,228,221,.93);
  --ink:#151514; --ink-dim:#5A5A48; --line:#C7C7B3;
  --accent:#D7AE96; --accent-hover:#E5CABB; --accent-ink:#1F1F1E;
  --moss:#44577E;
}

/* ── ORCHARD. Spring garden, navy and lavender. ── */
[data-skin="orchard"]{
  --paper:#D6DCEB; --panel:#BECAE4; --chrome:rgba(214,220,235,.93);
  --ink:#090F06; --ink-dim:#395C28; --line:#A1B2D9;
  --accent:#6642AE; --accent-hover:#52358D; --accent-ink:#F8F7F7;
  --moss:#538939;
}

/* ── TERRARIUM. Succulent teal-greens, glasshouse light. ── */
[data-skin="terrarium"]{
  --paper:#0F2629; --panel:#14393D; --chrome:rgba(15,38,41,.93);
  --ink:#EFF3EE; --ink-dim:#9DC28E; --line:#1D565D;
  --accent:#41AA92; --accent-hover:#5DC1AA; --accent-ink:#17191C;
  --moss:#53D5B4;

  --happy:#8FBF74; --sad:#7FA8CE; --fear:#B2A2D4;
  --disgust:#BDB05E; --anger:#E08A70; --surprise:#E0BE55; --curious:#E0A458;
}

/* ── BORDEAUX. Deep rose red, garden at dusk. ── */
[data-skin="bordeaux"]{
  --paper:#290F13; --panel:#3D141A; --chrome:rgba(41,15,19,.93);
  --ink:#EEE7E7; --ink-dim:#C2918E; --line:#5D1D27;
  --accent:#8E201A; --accent-hover:#B02820; --accent-ink:#F3F1F1;
  --moss:#FF2948;

  --happy:#8FBF74; --sad:#7FA8CE; --fear:#B2A2D4;
  --disgust:#BDB05E; --anger:#E08A70; --surprise:#E0BE55; --curious:#E0A458;
}

/* ── COPPER. Weathered copper, verdigris and rust. ── */
[data-skin="copper"]{
  --paper:#29160F; --panel:#3D1F14; --chrome:rgba(41,22,15,.93);
  --ink:#EEE9E7; --ink-dim:#C29F8E; --line:#5D2E1D;
  --accent:#522C1F; --accent-hover:#703C2A; --accent-ink:#F3F2F1;
  --moss:#74B4A5;

  --happy:#8FBF74; --sad:#7FA8CE; --fear:#B2A2D4;
  --disgust:#BDB05E; --anger:#E08A70; --surprise:#E0BE55; --curious:#E0A458;
}

/* ── TIDE. Beach pastels, pink sand and sea glass. ── */
[data-skin="tide"]{
  --paper:#EED2E6; --panel:#E8BADA; --chrome:rgba(238,210,230,.93);
  --ink:#090B0C; --ink-dim:#415867; --line:#DF9ACB;
  --accent:#B08EB7; --accent-hover:#C6ADCB; --accent-ink:#1B1F22;
  --moss:#3A6787;
}

/* ── SLATE. True neutral gray, misty and quiet. ── */
[data-skin="slate"]{
  --paper:#E0E0E0; --panel:#D2D0D0; --chrome:rgba(224,224,224,.93);
  --ink:#101211; --ink-dim:#535A5A; --line:#BFBBBB;
  --accent:#3E4A4B; --accent-hover:#293132; --accent-ink:#F8F7F7;
  --moss:#506672;
}

/* ── BLACK. True black, brushed silver. ── */
[data-skin="black"]{
  --paper:#1C1C1C; --panel:#292828; --chrome:rgba(28,28,28,.93);
  --ink:#EBEBEB; --ink-dim:#A8A8A8; --line:#3E3C3C;
  --accent:#D8D8D8; --accent-hover:#F2F2F2; --accent-ink:#1C1717;
  --moss:#949494;

  --happy:#8FBF74; --sad:#7FA8CE; --fear:#B2A2D4;
  --disgust:#BDB05E; --anger:#E08A70; --surprise:#E0BE55; --curious:#E0A458;
}

/* ── EMBER. Rust and maroon, gold ember glow. ── */
[data-skin="ember"]{
  --paper:#29110F; --panel:#3D1814; --chrome:rgba(41,17,15,.93);
  --ink:#EEECE7; --ink-dim:#C2B08E; --line:#5D221D;
  --accent:#DB930E; --accent-hover:#F1AC2B; --accent-ink:#1C1A17;
  --moss:#F64032;

  --happy:#8FBF74; --sad:#7FA8CE; --fear:#B2A2D4;
  --disgust:#BDB05E; --anger:#E08A70; --surprise:#E0BE55; --curious:#E0A458;
}

/* ── shared primitives ───────────────────────────────────────────────────── */
*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
body{
  background:var(--paper); color:var(--ink);
  font-family:Georgia,'Iowan Old Style','Palatino Linotype',serif;
  line-height:1.6; font-size:17px;   /* a notch large: read at arm's length */
}

/* BORDER ON --ink-dim, NOT --line, fixed 2026-08-28: Pookie thought "Buy
   credits" was not a real button ("she thought the other two were not
   clickable"). Checked the actual dark-green skin's values: --chrome is
   nearly identical to the page's own --paper, and --line is barely
   brighter than that, so the button all but disappeared against its own
   background. --ink-dim is the one token guaranteed to read as visible
   text against paper on every skin by design, so a border in that color
   reads as a real, clickable edge everywhere, not just the skins where
   --line happened to have enough contrast by luck. */
.btn{
  font-family:var(--mono); font-size:11.5px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--ink-dim); background:var(--chrome); border:1px solid var(--ink-dim);
  border-radius:3px; padding:.6rem .85rem; cursor:pointer;
}
.btn:hover{ color:var(--accent); border-color:var(--accent); }
.btn.wide{ flex:1; }
.btn.go{ color:var(--accent-ink); background:var(--accent); border-color:var(--accent); }
.btn.go:hover{ background:var(--accent-hover); border-color:var(--accent-hover); color:var(--accent-ink); }

/* ── the mark ────────────────────────────────────────────────────────────────
   TWO FILES, ONE PER INK, AND EXACTLY ONE IS EVER SHOWN. Both were rendering
   stacked because the markup carried the pair and nothing decided between
   them. Navy ink on the pale skins, cream ink on the dark ones.

   Not a colour swap on one file: the mark is a photograph-quality PNG with
   antialiased serifs, and recolouring it with a filter muddies the edges. Two
   files is the honest way, and it is what the brand sheet draws.

   GROVE ADDED HERE TOO, 2026-08-19: this used to name only "fireside," and
   a second dark skin left out of this selector would show the dark-ink mark
   on its own dark background -- illegible, not just mismatched. Anywhere a
   skin is dark, both rules below need it.

   NINE MORE DARK SKINS ADDED HERE, 2026-08-29, same reason: every isDark:true
   skin from the new batch (blueprint, blaze, understory, canopy, terrarium,
   bordeaux, copper, black, ember) needs the same swap or its mark is
   unreadable on its own background. */
.mark{ display:inline-flex; align-items:center; text-decoration:none; }
.mark .logo{ height:34px; width:auto; display:block; }
.mark .logo-light-ink{ display:none; }
[data-skin="fireside"] .mark .logo-dark-ink, [data-skin="grove"] .mark .logo-dark-ink,
[data-skin="blueprint"] .mark .logo-dark-ink, [data-skin="blaze"] .mark .logo-dark-ink,
[data-skin="understory"] .mark .logo-dark-ink, [data-skin="canopy"] .mark .logo-dark-ink,
[data-skin="terrarium"] .mark .logo-dark-ink, [data-skin="bordeaux"] .mark .logo-dark-ink,
[data-skin="copper"] .mark .logo-dark-ink, [data-skin="black"] .mark .logo-dark-ink,
[data-skin="ember"] .mark .logo-dark-ink, [data-skin="umber"] .mark .logo-dark-ink,
[data-skin="wildflower"] .mark .logo-dark-ink, [data-skin="twilight"] .mark .logo-dark-ink,
[data-skin="alpine"] .mark .logo-dark-ink{ display:none; }
[data-skin="fireside"] .mark .logo-light-ink, [data-skin="grove"] .mark .logo-light-ink,
[data-skin="blueprint"] .mark .logo-light-ink, [data-skin="blaze"] .mark .logo-light-ink,
[data-skin="understory"] .mark .logo-light-ink, [data-skin="canopy"] .mark .logo-light-ink,
[data-skin="terrarium"] .mark .logo-light-ink, [data-skin="bordeaux"] .mark .logo-light-ink,
[data-skin="copper"] .mark .logo-light-ink, [data-skin="black"] .mark .logo-light-ink,
[data-skin="ember"] .mark .logo-light-ink, [data-skin="umber"] .mark .logo-light-ink,
[data-skin="wildflower"] .mark .logo-light-ink, [data-skin="twilight"] .mark .logo-light-ink,
[data-skin="alpine"] .mark .logo-light-ink{ display:block; }

.sec-head{
  font-family:var(--mono); font-size:11px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--accent);
  border-bottom:1px solid var(--line); padding-bottom:.5rem; margin-bottom:1.3rem;
}

/* ── chips ───────────────────────────────────────────────────────────────────
   MOVED HERE FROM build.html, where they were the intake's private styling.
   The identity panel uses the same markup in the room, so pronoun chips were
   rendering as bare browser buttons with no selected state whatsoever. You
   could not tell what you had picked, which on the pronoun question is the
   worst possible place for it.

   A CHOSEN CHIP IS FILLED, not merely tinted. The old selected state was a
   colour change on the text and border, which is somewhere between subtle and
   invisible on a pale skin. This is the one control in the product where
   somebody has to be certain what they picked. */
.chips{ display:flex; flex-wrap:wrap; gap:.4rem; }
.chip{
  font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--ink-dim); background:transparent; border:1px solid var(--line);
  border-radius:3px; padding:.45rem .7rem; cursor:pointer;
}
.chip:hover{ color:var(--accent); border-color:var(--accent); }
.chip.on{
  color:var(--accent-ink); background:var(--accent); border-color:var(--accent);
  font-weight:600;
}
.chip.on:hover{ background:var(--accent-hover); border-color:var(--accent-hover); color:var(--accent-ink); }

/* ── who you are ─────────────────────────────────────────────────────────────
   Built by gcMountYou() in gc-you.js. Shared, because the host fills it in and
   so does a guest who arrived on a link with no account. */
.you-panel{ padding:.9rem 1rem 1.1rem; border-top:1px solid var(--line); }
.you-row{ margin-bottom:1rem; }
.you-label{
  display:block; margin-bottom:.4rem;
  font-family:var(--mono); font-size:10.5px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--ink-dim);
}
.you-note{ font-size:12.5px; color:var(--ink-dim); margin:-.15rem 0 .5rem; }
.you-face{ display:flex; align-items:center; gap:.7rem; flex-wrap:wrap; }
.you-preview{
  width:52px; height:52px; flex:none; border-radius:50%; overflow:hidden;
  border:1px solid var(--line); background:var(--panel);
  display:grid; place-content:center; font-size:24px;
}
.you-preview img, .you-preview svg{ width:100%; height:100%; object-fit:cover; display:block; }
/* SIZED UP 2026-08-26, Dr. O direct ("human avatars"), after "the size/number
   makes them feel less like an image substitute and more like an emoji" on
   the old row. Bigger, fewer per row, and genuinely circular (was a 4px
   square radius) so each one reads as a small portrait rather than a strip
   of tiny glyphs. */
.you-emoji{ display:flex; flex-wrap:wrap; gap:.5rem; flex:1; min-width:0; }
.you-e{
  width:44px; height:44px; line-height:1; cursor:pointer; padding:0;
  background:var(--panel); border:2px solid transparent; border-radius:50%;
  overflow:hidden;
}
.you-e svg{ width:100%; height:100%; display:block; }
.you-e:hover{ border-color:var(--line); }
.you-e.on{ border-color:var(--accent); }
.you-upload{ flex:none; cursor:pointer; }
.you-err{ display:block; margin-top:.45rem; font-size:12.5px; color:var(--accent); }
.you-panel input[type=text]{
  width:100%; font:inherit; font-size:15.5px; color:var(--ink);
  background:var(--panel); border:1px solid var(--line); border-radius:3px;
  padding:.5rem .6rem;
}
.you-panel input[type=text]:focus{ outline:none; border-color:var(--accent); }
.you-other{ margin-top:.4rem; }
.you-save{ width:100%; }

/* The little face beside a line in the transcript. */
.who-face{
  display:inline-grid; place-content:center; vertical-align:-3px;
  width:18px; height:18px; margin-right:.4rem; border-radius:50%;
  overflow:hidden; font-size:11px; background:var(--panel);
}
.who-face img, .who-face svg{ width:100%; height:100%; object-fit:cover; display:block; }

/* ── the skin picker ─────────────────────────────────────────────────────────
   Built by gcMountSkinPicker() in gc-skin.js. The host needs position:relative
   and to contain the button; everything else is here. */
.picker{ position:relative; }
.skins{
  position:absolute; top:calc(100% + 6px); right:0; z-index:40;
  background:var(--chrome); border:1px solid var(--line); border-radius:4px;
  padding:.35rem; min-width:215px; display:none;
  box-shadow:0 10px 30px rgba(0,0,0,.18);
}
.skins.open{ display:block; }
.skin-opt{
  display:flex; align-items:center; gap:.55rem; width:100%;
  background:transparent; border:1px solid transparent; border-radius:3px;
  padding:.45rem .5rem; cursor:pointer; text-align:left;
  font-family:var(--mono); font-size:11px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--ink-dim);
}
.skin-opt:hover{ color:var(--ink); border-color:var(--line); }
.skin-opt.on{ color:var(--accent); border-color:var(--accent); }
.swatch{ display:flex; gap:3px; flex:none; }
.swatch i{ width:11px; height:11px; border-radius:2px; display:block;
  border:1px solid rgba(128,128,128,.35); }

/* ── links in running text ───────────────────────────────────────────────────
   There was no rule for these because until now no page had one. The footer
   points at the other two products, and left alone those would render as
   browser-default blue: wrong in every skin and unreadable in Fireside.

   Underlined as well as coloured. Colour alone is not a link, and this
   audience skews older. */
footer a{ color:var(--accent); text-decoration:underline; text-underline-offset:2px; }
footer a:hover{ color:var(--accent-hover); }

/* ── header nav ───────────────────────────────────────────────────────────
   Added 2026-08-26 on index.html only, MOVED here 2026-08-27 per Dr. O
   direct ("have the nav bar on the build and questions page too") so all
   three pages that share a <header> can share this one rule instead of each
   carrying its own copy. build.html and faq.html point their four links back
   at index.html's own sections (index.html#demos etc.) since neither page
   has those sections itself; index.html's own copy uses the bare #demos
   anchors, already in place before this file existed. */
.topnav{ display:flex; gap:1.6rem; }
.topnav a{
  font-family:var(--mono); font-size:.78rem; letter-spacing:.08em;
  text-transform:uppercase; color:var(--ink-dim); text-decoration:none;
}
.topnav a:hover{ color:var(--ink); }
@media (max-width:680px){ .topnav{ display:none; } }