/* Friends page — the bone-colored editorial counterpart to the console.

   Same system, inverted ground: warm bone page, ink type, and one dark
   composer module breaking through it. Theme flips by re-pointing the
   semantic tokens from style.css; anything inside .composer points them
   back to the dark defaults, so the shared input/button rules just work
   on both grounds.

   The page is composed as one faceplate, not a container with panels in
   it: rules run edge to edge, a rail stands in the empty ninth column,
   and a single oversized state index sits behind the right column. */

html:has(body.friends) { background: var(--bone); color-scheme: light; }

body.friends {
  --ground: var(--bone);
  --ground-2: #f7f5ef;
  --ground-3: #e4e1d7;
  --line: var(--border-dark);
  --line-strong: var(--border-dark-strong);
  --text: var(--ink);
  --text-muted: #5d615d;
  --text-dim: #8a8d88;
  --mark: rgba(32, 35, 33, .35);
  --coral-text: #b83327;
  --signal-orange-text: #b34715;
  --sel-ground: var(--ink);
  --sel-text: var(--bone);
  --bg-idx: rgba(32, 35, 33, .05);
  color-scheme: light;
  font-size: 16px;
}

/* ---------- header ---------- */

.friends-top .title { text-transform: uppercase; letter-spacing: -.01em; }
.who {
  display: flex;
  align-items: center;
  gap: 14px;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--text-muted);
}
.who-name {
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -.01em;
  color: var(--text);
}
/* ---------- page grid ---------- */

.friends-main {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gutter);
  padding: 40px max(var(--gutter), calc((100% - 1360px) / 2 + var(--gutter))) 160px;
  overflow: clip;
}

.card {
  position: relative;
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gutter);
  align-items: start;
  min-width: 0;
  animation: card-in var(--med) var(--ease);
}
@keyframes card-in {
  from { opacity: 0; translate: 0 6px; }
  to { opacity: 1; translate: 0 0; }
}
.card > * { grid-column: 1 / -1; min-width: 0; }

/* ---------- head: kicker, architectural title, side copy, long rule ---------- */

.card-head {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(240px, 4fr);
  column-gap: var(--gutter);
  align-items: end;
  padding-bottom: 14px;
}
/* Edge to edge: the rule belongs to the page, not the title. The title's
   descenders are meant to hang across it. */
.card-head::after {
  content: "";
  position: absolute;
  left: -100vw;
  right: -100vw;
  bottom: 0;
  height: 1px;
  background: var(--line-strong);
}
.card h1 {
  grid-column: 1;
  margin: 0;
  font-family: var(--sans);
  font-size: clamp(72px, 7.4vw, 132px);
  font-weight: 700;
  line-height: .82;
  letter-spacing: -.055em;
  color: var(--text);
}
.card h1.display {
  grid-column: 1 / -1;
  font-size: clamp(64px, 12vw, 192px);
  line-height: .8;
  text-transform: uppercase;
}
.card h2 {
  margin: 0;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.card p { margin: 0; }
.lead {
  max-width: 34ch;
  font-size: 16px;
  line-height: 1.45;
  color: var(--text);
}
.dim { color: var(--text-muted); }
.hint {
  margin-top: 8px;
  font-family: var(--mono);
  font-size: 11px;
  line-height: 1.5;
  color: var(--text-muted);
}
/* ---------- loading ---------- */

.card[data-state="loading"] { padding: 48px 0; }

/* ---------- guest: the poster ---------- */

.card[data-state="guest"] .card-head { grid-template-columns: minmax(0, 1fr); }
.card[data-state="guest"] .lead {
  grid-column: 1 / span 5;
  margin-top: 28px;
}
.guest-actions {
  grid-column: 8 / -1;
  align-self: end;
  display: grid;
  gap: 8px;
  margin-top: 28px;
}
.guest-actions button { width: 100%; min-height: 52px; justify-content: space-between; padding-inline: 18px; }
/* ---------- register / login / reset ---------- */

.form-side {
  grid-column: 1 / span 5;
  margin-top: 40px;
}
.form-card form {
  position: relative;
  grid-column: 7 / -1;
  margin-top: 40px;
  padding: 32px 28px 24px;
  border: 1px solid var(--line-strong);
  background: var(--ground-2);
}
.form-card form > label:first-of-type { margin-top: 0; }

label .label {
  display: block;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.row { display: flex; gap: 8px; margin-top: 24px; flex-wrap: wrap; }
.row > button { flex: 1; min-width: 120px; min-height: 46px; }

/* ---------- pending / blocked: status regions ---------- */

.pending-card,
.blocked-card {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gutter);
  position: relative;
  overflow: hidden;
  padding: 32px;
  border: 1px solid var(--line);
}
.pending-card .card-head::after,
.blocked-card .card-head::after { display: none; }
.pending-card .card-head,
.blocked-card .card-head { padding-bottom: 0; }
.pending-card .bg-idx,
.blocked-card .bg-idx { top: -.1em; right: -.06em; }

.pending-card {
  --text: var(--ink);
  --text-muted: var(--ink);
  --line: rgba(32, 35, 33, .3);
  --line-strong: rgba(32, 35, 33, .65);
  --ground: var(--signal-orange-fill);
  /* Focus paint has to be ink here: orange-on-orange vanishes. */
  --signal-orange-text: var(--ink);
  --bg-idx: rgba(32, 35, 33, .08);
  background: var(--signal-orange-fill);
  color: var(--ink);
}
.pending-card .card-head { grid-column: 1 / span 7; grid-template-columns: 1fr; }
.pending-stamp {
  display: block;
  margin: 0 0 24px -.04em;
  font-family: var(--sans);
  font-size: clamp(64px, 14vw, 200px);
  font-weight: 700;
  line-height: .8;
  letter-spacing: -.06em;
  text-transform: uppercase;
}
.pending-card h1 { font-size: clamp(28px, 3.4vw, 44px); line-height: 1; }
.pending-card p { margin-top: 12px; max-width: 44ch; }
.pending-card code { background: rgba(32, 35, 33, .14); color: var(--ink); }
.pending-card .row { grid-column: 9 / -1; align-self: end; margin-top: 24px; }
.pending-card .row > button { min-height: 52px; }
.pending-card .hint { margin-top: 16px; }

.blocked-card {
  --text: var(--bone);
  --text-muted: #aeb1ac;
  --line: var(--border-light);
  --ground: var(--ink);
  --signal-orange-text: var(--signal-orange);
  --sel-ground: rgba(235, 94, 40, .35);
  --sel-text: var(--bone);
  --bg-idx: rgba(239, 236, 227, .05);
  background: var(--ink);
  color: var(--bone);
}
.blocked-card .card-head { grid-column: 1 / span 8; grid-template-columns: 1fr; }
.blocked-card h1 {
  font-size: clamp(56px, 11vw, 168px);
  line-height: .84;
  text-transform: uppercase;
  color: var(--signal-coral);
}
.blocked-card p { margin-top: 24px; max-width: 40ch; }

/* ---------- allowed: composer spread ---------- */

.card[data-state="allowed"] {
  grid-template-areas:
    "h h h h h h h h h h h h"
    "b b b b b b b b b b b b"
    "c c c c c c c c . s s s"
    "c c c c c c c c . y y y";
  /* The composer spans two rows; pinning the settings row to its own
     content keeps history snug under it instead of halfway down. */
  grid-template-rows: auto auto auto 1fr;
  align-items: start;
}
.card[data-state="allowed"] .card-head { grid-area: h; grid-template-columns: minmax(0, 1fr); margin-bottom: 40px; }
.card[data-state="allowed"] .printer-banner { grid-area: b; }
.card[data-state="allowed"] .composer-wrap { grid-area: c; }
.card[data-state="allowed"] .settings { grid-area: s; }
.card[data-state="allowed"] .history { grid-area: y; }
/* The rail stands in the empty ninth column and climbs up to the rule. */
.card[data-state="allowed"] .rail {
  grid-column: 9;
  grid-row: 3 / span 2;
  justify-self: center;
  align-self: stretch;
  margin-top: -40px;
}

.printer-banner {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 24px;
  padding: 12px 16px;
  background: var(--signal-orange-fill);
  color: var(--ink);
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: .02em;
}
.printer-banner::before {
  content: "";
  width: 8px;
  height: 8px;
  flex: none;
  background: var(--ink);
  animation: lamp 900ms steps(2, end) infinite;
}

/* The composer is the dark engineered object on the pale page. */
.composer-wrap { position: relative; z-index: 1; }
.composer {
  --ground: var(--ink);
  --ground-2: var(--ink-2);
  --ground-3: var(--ink-3);
  --line: var(--border-light);
  --line-strong: var(--border-light-strong);
  --text: var(--bone);
  --text-muted: #aeb1ac;
  --text-dim: #8f918c;
  --mark: rgba(239, 236, 227, .35);
  --coral-text: #f3665b;
  --signal-orange-text: var(--signal-orange);
  --sel-ground: rgba(235, 94, 40, .35);
  --sel-text: var(--bone);
  --cut-ground: var(--bone);
  color-scheme: dark;
  background: var(--ink);
  color: var(--text);
  border: 1px solid var(--border-dark-strong);
  padding: 0 0 24px;
}
.composer.cut::after { background: linear-gradient(225deg, var(--bone) 0 50%, var(--border-dark-strong) 50% calc(50% + 1.4px), transparent calc(50% + 1.4px)); }
.composer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 30px 12px 16px;
  border-bottom: 1px solid var(--line);
}
.composer > form,
.composer > #doodle-panel { padding: 0 24px; }

/* Composer modes use the same tab grammar as the console. */
.mode-switch {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 0 0 8px;
  border-bottom: 1px solid var(--line);
}
.mode-tab {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 48px;
  padding: 10px 8px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--text-muted);
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color var(--fast) var(--ease);
}
.mode-tab + .mode-tab { border-left: 1px solid var(--line); }
.mode-tab .tab-idx { font-size: 9px; color: var(--text-dim); transition: color var(--fast) var(--ease); }
.mode-tab::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  background: var(--signal-orange);
  scale: 0 1;
  transform-origin: left;
  transition: scale var(--med) var(--ease);
}
.mode-tab:hover:not(:disabled) { color: var(--text); background: transparent; }
.mode-tab.active { color: var(--text); }
.mode-tab.active .tab-idx { color: var(--signal-orange); }
.mode-tab.active::after { scale: 1 1; }
.mode-tab:focus-visible { outline: 2px solid var(--signal-orange-text); outline-offset: -2px; }

/* PHOTO BOOTH */
.photo-controls { border: 0; padding: 8px 0 0; margin: 0; min-width: 0; }
.photo-upload > .label { display: flex; justify-content: space-between; gap: 12px; }
#photo-count, #photo-frame-label { font-variant-numeric: tabular-nums; }
.photo-frames { display: flex; gap: 8px; margin: 16px 0; }
.photo-frame {
  flex: 1;
  min-width: 44px;
  max-width: 96px;
  padding: 4px;
  border: 1px solid var(--line);
  background: var(--ground-2);
  color: var(--text-muted);
  font: 11px var(--mono);
  font-variant-numeric: tabular-nums;
  transition: border-color var(--fast) var(--ease), color var(--fast) var(--ease);
}
.photo-frame[aria-pressed="true"] { border-color: var(--signal-orange-text); color: var(--signal-orange-text); }
.photo-frame:focus-visible { outline: 2px solid var(--signal-orange-text); outline-offset: 2px; }
.photo-frame canvas { display: block; width: 100%; height: auto; margin-bottom: 6px; }
.photo-frame canvas, #photo-canvas { outline: 1px solid rgba(255, 255, 255, .1); outline-offset: -1px; }
.photo-crop-heading { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.photo-crop-heading .row { gap: 8px; margin: 0; }
.photo-crop-heading button { min-height: 44px; }
#photo-canvas { display: block; width: 100%; max-width: 320px; height: auto; margin: 0 auto; background: #fff; }
.photo-sliders { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 16px 0; }
.photo-sliders input[type="range"] { height: 44px; margin: 0; }
.photo-options { display: grid; grid-template-columns: 1fr 2fr; align-items: end; gap: 16px; margin-top: 16px; }
.photo-options input, .photo-options select { min-height: 44px; }
.photo-saved { padding: 12px; border-left: 2px solid var(--signal-orange); text-wrap: pretty; }
.photo-paper { gap: 0; }
.photo-paper .preview-img { width: 100%; }
@media (max-width: 480px) {
  .mode-tab { gap: 5px; font-size: 10px; letter-spacing: .04em; }
  .photo-options { grid-template-columns: 1fr; }
  .photo-sliders { gap: 10px; }
  .photo-sliders .label { font-size: 9px; letter-spacing: .02em; }
}

#msg-body { margin-top: 8px; min-height: 160px; font-size: 15px; }
.msg-meta {
  display: flex;
  justify-content: flex-end;
  margin-top: 8px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .08em;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}
.msg-hint {
  margin: 10px 0 0;
  font-family: var(--mono);
  font-size: 10.5px;
  line-height: 1.8;
  color: var(--text-muted);
}
.msg-hint code { font-size: 10px; white-space: nowrap; }

/* ANONYMOUS toggle */
.anon-toggle {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  margin-top: 8px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text-muted);
  cursor: pointer;
}
.anon-toggle input { width: 16px; height: 16px; margin: 0; accent-color: var(--signal-orange); }
.anon-toggle em { font-style: normal; color: var(--text-dim); text-transform: none; letter-spacing: 0; }

/* PREVIEW */
.preview-block {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}
.preview-label-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}
.preview-label {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.preview-paper {
  --sel-ground: var(--ink);
  --sel-text: var(--paper);
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  min-height: 120px;
  padding: 20px 16px;
  overflow-x: auto;
  background: var(--paper);
  color: var(--paper-ink);
  border-radius: 2px;
}
.preview-paper::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0; height: 8px;
  background: linear-gradient(180deg, rgba(0, 0, 0, .2), transparent);
  pointer-events: none;
}
.preview-paper[aria-busy="true"]::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 34%;
  height: 2px;
  background: var(--signal-orange);
  animation: friend-preview-progress 850ms ease-in-out infinite alternate;
}
.preview-img {
  display: block;
  max-width: 100%;
  height: auto;
  /* 1-bit source: keep edges crisp when scaled down. */
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  outline: 1px solid rgba(0, 0, 0, .12);
  outline-offset: -1px;
}
.preview-cut {
  width: 100%;
  height: 12px;
  background:
    linear-gradient(135deg, var(--paper) 48%, transparent 52%) 0 0 / 10px 12px,
    linear-gradient(45deg, var(--paper) 48%, transparent 52%) 5px 0 / 10px 12px;
  background-repeat: repeat-x;
  opacity: .85;
}
.preview-placeholder {
  margin: 20px 0;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  text-align: center;
  color: #5d615d;
}
.preview-error {
  margin: 16px 0;
  font-family: var(--mono);
  font-size: 12px;
  text-align: center;
  color: #b83327;
}
@keyframes friend-preview-progress {
  from { translate: 0 0; }
  to { translate: 194% 0; }
}

/* DOODLE */
.doodle-toolbar {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  margin-top: 12px;
}
.doodle-history,
.brush-options { display: flex; gap: 4px; }
.doodle-tool,
.brush-size { min-width: 44px; min-height: 44px; }
.doodle-tool { padding: 9px 12px; font-size: 10px; }
/* Undo and redo start life disabled; keep them discoverable. */
.doodle-tool:disabled { opacity: .5; }
.brush-picker { min-width: 0; margin: 0; padding: 0; border: 0; }
.brush-picker legend {
  width: 100%;
  margin: 0 0 6px;
  padding: 0;
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: .12em;
  text-align: right;
  text-transform: uppercase;
  color: var(--text-muted);
}
.brush-size {
  min-width: 60px;
  padding: 6px 8px;
  flex-direction: column;
  gap: 4px;
  font-size: 10px;
  letter-spacing: .08em;
  color: var(--text-muted);
}
.brush-size.active {
  color: var(--text);
  border-color: var(--signal-orange);
  box-shadow: inset 0 0 0 1px var(--signal-orange);
}
.brush-dot { display: block; flex: none; border-radius: 999px; background: currentColor; }
.brush-dot-thin { width: 4px; height: 4px; }
.brush-dot-medium { width: 8px; height: 8px; }
.brush-dot-thick { width: 14px; height: 14px; }
#doodle-canvas {
  display: block;
  width: 100%;
  /* The backing store is 576px; never upscale past it on wide screens. */
  max-width: 576px;
  aspect-ratio: 1;
  margin: 12px auto 0;
  border: 1px solid var(--line-strong);
  background: #fff;
  touch-action: none;
  cursor: crosshair;
}

/* ---------- settings: name-style picker ---------- */

.settings {
  position: relative;
  z-index: 1;
  margin: 0 0 40px;
  border: 1px solid var(--line-strong);
  background: var(--ground);
}
.settings summary { font-family: var(--mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--text-muted); }
.settings summary::after { content: "S-01"; }
.settings-current { color: var(--text); }
.settings .hint { margin: 12px 16px 12px; }
/* Cells draw their own right/bottom hairlines, the same trick as the
   console widget grid: a short last row leaves an open slot instead of
   a painted block where no chip exists. */
.name-style-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  margin: 0 16px;
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
}
.style-chip {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: space-between;
  gap: 8px;
  min-height: 72px;
  padding: 10px;
  border: 0;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  background: var(--ground);
  color: var(--text);
  text-align: left;
  text-transform: none;
  letter-spacing: 0;
  transition: background-color var(--fast) var(--ease), color var(--fast) var(--ease), box-shadow var(--fast) var(--ease);
}
.style-chip:hover:not(:disabled) { background: var(--ground-3); color: var(--text); }
.style-chip.active { box-shadow: inset 0 0 0 2px var(--signal-orange-text); }
.style-chip-label {
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.style-chip-preview { font-size: 15px; min-height: 20px; color: var(--text); }
/* Flavor the preview string in the same spirit as the thermal-render font
   the style selects. Not pixel-perfect matches (the printer uses TTFs we
   don't bundle), but enough of a hint to pick. */
.style-plain  .style-chip-preview { font-family: var(--sans); }
.style-big    .style-chip-preview { font-family: var(--sans); font-size: 18px; font-weight: 700; letter-spacing: -.02em; }
.style-caps   .style-chip-preview { font-family: var(--sans); font-weight: 700; letter-spacing: .08em; }
.style-serif  .style-chip-preview { font-family: "New York", "Times New Roman", Georgia, serif; font-weight: 700; }
.style-script .style-chip-preview { font-family: "Snell Roundhand", "Brush Script MT", "Apple Chancery", cursive; font-size: 17px; }
.style-gothic .style-chip-preview { font-family: Papyrus, "Herculanum", fantasy; letter-spacing: .5px; }
.style-mono   .style-chip-preview { font-family: var(--mono); }

/* ---------- history: the archive column ---------- */

.delivery-controls { border: 0; border-bottom: 1px solid var(--line); padding: 0 0 20px; margin: 20px 24px; display: grid; grid-template-columns: 1fr 1.5fr; gap: 12px; min-width: 0; }
.delivery-controls legend { font-family: var(--mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--text-muted); padding: 0 0 8px; }
.delivery-controls label { min-width: 0; margin: 0; }
.delivery-controls input, .delivery-controls select { min-height: 44px; min-width: 0; font-variant-numeric: tabular-nums; }
.delivery-controls .hint { grid-column: 1 / -1; text-wrap: pretty; }
.delivery-controls .delivery-quiet { border-left: 2px solid var(--signal-orange-text); padding-left: 10px; }
.history-delivery { grid-column: 2 / -1; margin-top: 10px; font-family: var(--mono); font-size: 11px; line-height: 1.5; font-variant-numeric: tabular-nums; color: var(--text-muted); }
.history-capsule { cursor: default; }
.history-cancel { grid-column: 2 / -1; justify-self: start; min-height: 44px; margin-top: 10px; }
.history-when { flex-wrap: wrap; }
.history-status.scheduled { color: var(--signal-orange-text); }
.history-status.scheduled::before { background: currentColor; }

@media (max-width: 480px) {
  .delivery-controls { grid-template-columns: 1fr; }
}

.history { position: relative; z-index: 1; }
.history-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: auto auto;
  column-gap: 16px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line-strong);
}
.history-head .metric { display: contents; }
/* The count is the column's architecture: it crowds the rule beneath it. */
.history-head .metric-num {
  grid-column: 1;
  grid-row: 1;
  margin: 0 0 -.04em -.05em;
  font-size: clamp(104px, 9.5vw, 176px);
  line-height: .78;
  letter-spacing: -.07em;
}
.history-head h2 { grid-column: 1; grid-row: 2; align-self: end; margin-top: 12px; }
.history-meta {
  grid-column: 2;
  grid-row: 1;
  display: grid;
  align-content: start;
  justify-items: end;
  gap: 6px;
  padding-top: 4px;
}
.history-head .tiny { grid-column: 2; grid-row: 2; align-self: end; }
.history-hint {
  margin: 10px 0 0;
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.history-list {
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
  counter-reset: hist;
}
.history-item {
  position: relative;
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) auto;
  column-gap: 12px;
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
  cursor: pointer;
  transition: background-color var(--fast) var(--ease);
}
.history-item::before {
  counter-increment: hist;
  content: counter(hist, decimal-leading-zero);
  grid-column: 1;
  grid-row: 1 / span 2;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 500;
  line-height: 1.6;
  letter-spacing: .1em;
  color: var(--signal-orange-text);
  font-variant-numeric: tabular-nums;
}
.history-item[role="button"]::after {
  content: "\2192";
  grid-column: 3;
  grid-row: 1 / span 2;
  align-self: start;
  font-family: var(--mono);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.1;
  color: var(--text-muted);
  transition: translate var(--fast) var(--ease), color var(--fast) var(--ease);
}
.history-item:hover { background: var(--ground-3); }
.history-item:hover::after { translate: 4px 0; color: var(--text); }
.history-item:focus-visible { outline: 2px solid var(--signal-orange-text); outline-offset: 2px; }
.history-when {
  grid-column: 2;
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 6px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}
.history-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: 0;
  padding: 3px 6px;
  border: 1px solid var(--line);
  border-radius: 2px;
  font-size: 9px;
  letter-spacing: .1em;
}
.history-status::before { content: ""; width: 6px; height: 6px; }
.history-status.failed { color: var(--coral-text); border-color: rgba(240, 79, 67, .5); }
.history-status.failed::before { background: var(--signal-coral); }
.history-status.queued { color: var(--text); }
.history-status.queued::before { background: var(--signal-orange-text); }
.history-body {
  grid-column: 2;
  margin: 0;
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.4;
  white-space: pre-wrap;
  word-break: break-word;
  color: var(--text);
  /* Keep long ASCII-art prints from blowing up the row. */
  max-height: 9em;
  overflow: hidden;
  mask-image: linear-gradient(180deg, #000 70%, transparent);
  -webkit-mask-image: linear-gradient(180deg, #000 70%, transparent);
}
.history-doodle { font-family: var(--mono); font-size: 12px; color: var(--text-muted); }
.history-doodle-row { cursor: default; }
.history-doodle-row:hover { background: transparent; }
.history-empty {
  margin: 12px 0 0;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--text-muted);
}

/* A brief outline flash on the composer confirms the queue took it. */
.print-confirmed .composer { animation: print-confirmed .6s var(--ease); }
@keyframes print-confirmed {
  0%, 100% { box-shadow: none; }
  35% { box-shadow: 0 0 0 3px var(--signal-orange-text); }
}

/* ---------- responsive ---------- */

@media (max-width: 1100px) {
  .card-head { grid-template-columns: minmax(0, 1fr); }
  .card[data-state="allowed"] {
    grid-template-areas:
      "h h h h h h h h h h h h"
      "b b b b b b b b b b b b"
      "c c c c c c c c c c c c"
      "s s s s s s s s s s s s"
      "y y y y y y y y y y y y";
    grid-template-rows: none;
  }
  .card[data-state="allowed"] .rail { display: none; }
  .settings { margin: 48px 0 0; }
  .history { margin-top: 40px; }
}

@media (max-width: 960px) {
  .card[data-state="guest"] .lead,
  .guest-actions,
  .form-side,
  .form-card form,
  .pending-card .card-head,
  .pending-card .row,
  .blocked-card .card-head { grid-column: 1 / -1; }
  .guest-actions { margin-top: 32px; }
  .form-card form { margin-top: 32px; }
  .form-side { margin-top: 32px; }
}

@media (max-width: 640px) {
  .friends-main { padding: 28px var(--gutter) 96px; }
  .who-name { display: none; }
  .card h1 { font-size: clamp(56px, 15vw, 72px); }
  .card h1.display { font-size: clamp(56px, 15vw, 80px); }
  .bg-idx { font-size: clamp(150px, 44vw, 220px); top: -.08em; right: calc(-1 * var(--gutter) - .1em); }
  .lead { font-size: 16px; }
  .guest-actions { margin-top: 28px; }
  .form-card form { padding: 24px 18px 20px; }
  .pending-card, .blocked-card { padding: 22px 18px; }
  .pending-card .row { margin-top: 20px; }
  .row { flex-direction: column; }
  .row > button { width: 100%; }
  .composer > form, .composer > #doodle-panel { padding: 0 16px; }
  .composer { padding-bottom: 16px; }
  .name-style-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .doodle-toolbar { gap: 8px; }
  .doodle-tool { padding-inline: 10px; }
  .brush-size { min-width: 48px; padding-inline: 4px; }
  .card[data-state="allowed"] .card-head { margin-bottom: 28px; }
  .history-head .metric-num { font-size: clamp(88px, 26vw, 120px); }
}