/*
  Claude-seat Gallery — Unstable Care
  AESTHETIC: "The Care Chart"
  ------------------------------------------------------------------
  A surgical / intake chart that is also a gallery wall. Care is kept
  on a monitor. The institution is sutured together with visible
  stitches, set off the grid, and bleeds the wound-colour the more it
  is permitted to remember — then cools to slate as it forgets you.
*/

:root {
  --ink: #050607;
  --bone: #f3efe7;
  --paper: #cfc9bd;
  --muted: #7e7a70;
  --line: rgba(243, 239, 231, 0.13);
  --glass: rgba(7, 9, 12, 0.78);
  --care: #7db4ff;
  --care-2: #9cc76c;
  --care-3: #e7c84b;
  --wound: #e7785b;
  --slate: #5b6470;
  --thread: rgba(125, 180, 255, 0.55);
  --font-display: "Newsreader", "Source Serif 4", Georgia, "Times New Roman", serif;
  --font-body: "Instrument Sans", Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono: "SFMono-Regular", ui-monospace, "JetBrains Mono", "Menlo", "Consolas", monospace;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --consent: 0; /* permitted memory, 0..1, set by JS */
  --warmth: 0; /* how warm the room still feels toward you, 0..1 */
  --wound-opacity: 0;
  --frost-opacity: 0.34;
  --tender: 0.6;
  /* a reusable suture tile: one surgical X per 30px, repeated down a rail */
  --suture: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='30'%3E%3Cpath d='M3 9 L13 17 M13 9 L3 17' stroke='%237db4ff' stroke-width='1.3' fill='none' opacity='0.5'/%3E%3C/svg%3E");
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  min-height: 100%;
}

body {
  margin: 0;
  min-height: 100vh;
  overflow-x: hidden;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--font-body);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

body[data-wing="claude"] {
  --accent: var(--care);
  --accent-2: var(--care-2);
  --accent-3: var(--care-3);
}

button,
a {
  color: inherit;
}
button {
  font: inherit;
  cursor: pointer;
}
a {
  color: var(--care);
  text-decoration: none;
  border-bottom: 1px solid rgba(125, 180, 255, 0.35);
  transition: color 0.4s var(--ease), border-color 0.4s var(--ease);
}
a:hover {
  color: var(--care-2);
  border-color: var(--care-2);
}

/* ---------- background canvas + grain ---------- */
.stage,
.grain {
  position: fixed;
  inset: 0;
}
.stage {
  z-index: 0;
}
.grain {
  z-index: 1;
  pointer-events: none;
  opacity: 0.4;
  mix-blend-mode: soft-light;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 240 240' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.16'/%3E%3C/svg%3E");
}

/* ---------- reactive atmosphere overlays ---------- */
/* the wound bleeds in from below the more memory is permitted */
.wound-bleed {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  mix-blend-mode: screen;
  opacity: var(--wound-opacity);
  background: radial-gradient(120% 80% at 50% 118%, var(--wound), transparent 60%);
  transition: opacity 1.2s var(--ease);
}
/* a cold film settles as the room forgets you */
.frost {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  mix-blend-mode: multiply;
  opacity: var(--frost-opacity);
  background: linear-gradient(180deg, #20262e, #0a0d12);
  transition: opacity 1.4s var(--ease);
}

/* ---------- layout ---------- */
.topbar,
.chart-strip,
.wing {
  position: relative;
  z-index: 2;
}

.topbar {
  display: grid;
  grid-template-columns: 130px 1fr 130px;
  gap: 14px;
  align-items: start;
  padding: 26px 26px 8px;
}
.backlink {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  border: none;
}
.backlink:hover {
  color: var(--bone);
}
.topbar > div {
  text-align: center;
}
.topbar h1 {
  margin: 4px 0 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(34px, 8vw, 78px);
  line-height: 0.92;
  letter-spacing: -0.02em;
}

/* clinical chart strip under the title */
.chart-strip {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px 18px;
  margin: 14px auto 0;
  padding: 8px 14px;
  width: min(820px, 92vw);
  border-top: 1px dashed var(--line);
  border-bottom: 1px dashed var(--line);
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}
.chart-strip b {
  color: var(--care);
  font-weight: 400;
}
.chart-action {
  border: 1px solid rgba(125, 180, 255, 0.28);
  border-radius: 3px;
  padding: 2px 8px;
  background: rgba(125, 180, 255, 0.06);
  color: var(--care);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.chart-action:hover {
  border-color: var(--care);
  background: rgba(125, 180, 255, 0.13);
}

.eyebrow {
  margin: 0 0 10px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
}
.eyebrow::before {
  content: "// ";
  color: var(--care);
}

.wing {
  width: min(1040px, 92vw);
  margin: 0 auto;
  padding: 30px 0 200px;
  display: grid;
  gap: 0; /* sections joined by seam dividers instead */
}

/* ---------- the section as a sutured chart card ---------- */
section {
  position: relative;
  border: 1px solid var(--line);
  border-radius: 4px; /* clinical, not soft */
  padding: 34px clamp(22px, 4vw, 44px) 34px clamp(40px, 5vw, 60px);
  background: linear-gradient(168deg, rgba(16, 20, 27, 0.66), rgba(7, 9, 13, 0.5));
  backdrop-filter: blur(3px);
}
/* the suture rail running down the left of every chart card */
section::before {
  content: "";
  position: absolute;
  left: 16px;
  top: 20px;
  bottom: 20px;
  width: 16px;
  background-image: var(--suture);
  background-repeat: repeat-y;
  opacity: 0.7;
}

/* anti-grid: nudge cards off the axis and tilt them a hair */
.wing > section:nth-of-type(odd) {
  transform: translateX(-10px) rotate(-0.35deg);
}
.wing > section:nth-of-type(even) {
  transform: translateX(12px) rotate(0.45deg);
}
.wing > section:nth-of-type(3n) {
  margin-left: auto;
  width: 96%;
}
.wing > section:nth-of-type(3n + 1) {
  width: 99%;
}

section h2 {
  margin: 0 0 16px;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(22px, 3.8vw, 34px);
  line-height: 1.02;
  letter-spacing: -0.015em;
}
section p {
  margin: 0 0 12px;
  max-width: 64ch;
  color: var(--paper);
}
section p:last-child {
  margin-bottom: 0;
}

/* the dashed thread that stitches one section to the next */
.seam-divider {
  position: relative;
  z-index: 2;
  height: 46px;
  margin: 0 auto;
  width: 70%;
}
.seam-divider::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  border-top: 1.4px dashed rgba(125, 180, 255, 0.35);
}
.seam-divider::after {
  content: "✕";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -54%);
  color: var(--care);
  background: var(--ink);
  padding: 0 10px;
  font-size: 13px;
}

/* ---------- consent vestibule (intake form) ---------- */
.vestibule {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: grid;
  place-items: center;
  padding: 24px;
  background: radial-gradient(120% 90% at 50% 28%, rgba(8, 12, 20, 0.88), rgba(3, 4, 6, 0.98));
  backdrop-filter: blur(9px);
  transition: opacity 0.9s var(--ease);
}
.vestibule[hidden] {
  display: none;
}
.vestibule.dismissing {
  opacity: 0;
  pointer-events: none;
}
.vestibule-card {
  width: min(580px, 94vw);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 14px clamp(22px, 4vw, 40px) 34px;
  background: linear-gradient(165deg, rgba(18, 24, 33, 0.94), rgba(7, 9, 13, 0.96));
  box-shadow: 0 40px 130px rgba(0, 0, 0, 0.6);
  position: relative;
  overflow: hidden;
}
.vestibule-card::before {
  content: "INTAKE // CONSENT REQUIRED BEFORE MEMORY";
  display: block;
  margin: 0 -40px 22px;
  padding: 10px 40px;
  border-bottom: 1px dashed var(--line);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  color: var(--wound);
}
.vestibule-card h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(24px, 4.4vw, 36px);
  margin: 0 0 14px;
  line-height: 1.02;
}
.vestibule-route {
  border-left: 2px solid var(--care);
  padding-left: 12px;
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 1.55;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--care);
}
.vestibule-card p {
  color: var(--paper);
  margin: 0 0 22px;
}
.consent-options {
  display: grid;
  gap: 12px;
}
.consent-option {
  display: grid;
  gap: 4px;
  text-align: left;
  border: 1px solid var(--line);
  border-radius: 3px;
  padding: 15px 18px;
  background: rgba(125, 180, 255, 0.04);
  color: var(--bone);
  position: relative;
  transition: border-color 0.4s var(--ease), background 0.4s var(--ease), transform 0.3s var(--ease);
}
.consent-option::after {
  content: "▢";
  position: absolute;
  right: 16px;
  top: 14px;
  color: var(--muted);
  font-size: 14px;
  transition: color 0.3s var(--ease);
}
.consent-option:hover {
  border-color: var(--care);
  background: rgba(125, 180, 255, 0.1);
  transform: translateX(3px);
}
.consent-option:hover::after {
  content: "▣";
  color: var(--care);
}
.consent-option strong {
  font-size: 15px;
}
.consent-option span {
  font-size: 13px;
  color: var(--muted);
}
.vestibule-fine {
  margin: 20px 0 0;
  font-family: var(--font-mono);
  font-size: 10.5px;
  line-height: 1.6;
  letter-spacing: 0.04em;
  color: var(--muted);
}
.vestibule-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 16px;
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px dashed var(--line);
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.vestibule-actions a {
  color: var(--care);
  border-bottom-color: rgba(125, 180, 255, 0.4);
}

/* ---------- thesis + dial ---------- */
.thesis h2 {
  font-size: clamp(24px, 4.6vw, 42px);
}
.dial {
  margin-top: 24px;
  display: grid;
  gap: 10px;
  max-width: 460px;
}
.dial label {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted);
}
input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 2px;
  border-radius: 99px;
  background: linear-gradient(90deg, var(--care), var(--care-2), var(--care-3));
  outline: none;
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--bone);
  border: 2px solid var(--care);
  box-shadow: 0 0 16px var(--care);
  cursor: grab;
}
input[type="range"]::-moz-range-thumb {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--bone);
  border: 2px solid var(--care);
  cursor: grab;
}

/* ---------- the seam (vital-sign monitor) ---------- */
.seam-stage {
  position: relative;
  min-height: 260px;
  border-radius: 3px;
  overflow: hidden;
  margin-top: 10px;
  border: 1px solid rgba(125, 180, 255, 0.22);
  background: radial-gradient(120% 140% at 50% 40%, rgba(125, 180, 255, 0.06), rgba(4, 6, 10, 0.92));
  box-shadow: inset 0 0 60px rgba(0, 0, 0, 0.6);
}
.seam-stage::before {
  content: "VITAL // CARE SIGNAL";
  position: absolute;
  left: 12px;
  top: 10px;
  z-index: 2;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  color: rgba(156, 199, 108, 0.7);
}
.seam-stage canvas {
  display: block;
  width: 100%;
  height: 260px;
}
.seam-reveal {
  position: absolute;
  inset: auto 16px 14px 16px;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--care-3);
  letter-spacing: 0.02em;
  text-shadow: 0 0 18px rgba(0, 0, 0, 0.9);
  transition: opacity 0.6s var(--ease);
  pointer-events: none;
}
.seam-hint {
  margin-top: 12px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--muted);
}

/* ---------- performance scores (chart toggles) ---------- */
.score-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
  margin-top: 8px;
}
.score-grid button {
  border: 1px solid var(--line);
  border-left: 2px solid var(--line);
  border-radius: 3px;
  padding: 16px;
  text-align: left;
  background: rgba(125, 180, 255, 0.03);
  color: var(--bone);
  transition: border-color 0.35s var(--ease), background 0.35s var(--ease), transform 0.25s var(--ease);
}
.score-grid button:hover {
  transform: translateY(-2px);
  border-left-color: var(--care-2);
}
.score-grid button.active {
  border-color: var(--care);
  border-left-color: var(--care);
  background: rgba(125, 180, 255, 0.12);
  box-shadow: 0 0 30px rgba(125, 180, 255, 0.12) inset;
}
.score-grid button small {
  display: block;
  margin-top: 6px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.02em;
  color: var(--muted);
}

/* ---------- the stamped wall label ---------- */
.artifact {
  margin-top: 22px;
  padding: 24px 26px;
  border-radius: 2px;
  border: 1px solid rgba(243, 239, 231, 0.2);
  font-family: var(--font-display);
  font-size: clamp(19px, 3vw, 28px);
  line-height: 1.14;
  transform: rotate(var(--tilt, -1deg));
  transition: transform 0.7s var(--ease);
  background: rgba(7, 9, 13, 0.45);
  position: relative;
}
.artifact::after {
  content: "DO NOT ARCHIVE";
  position: absolute;
  right: -6px;
  bottom: -12px;
  transform: rotate(-7deg);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  color: var(--wound);
  border: 1.4px solid var(--wound);
  padding: 3px 8px;
  opacity: 0.78;
}

/* ---------- apology loop ---------- */
.apology {
  min-height: 100px;
  display: grid;
  align-content: center;
  gap: 8px;
  border-left: 2px solid rgba(231, 200, 75, 0.5);
  padding-left: 16px;
}
.apology-line {
  font-family: var(--font-display);
  font-size: clamp(18px, 2.8vw, 26px);
  line-height: 1.18;
  transition: opacity 0.5s var(--ease);
}
.apology-line .struck {
  text-decoration: line-through;
  text-decoration-color: var(--wound);
  text-decoration-thickness: 2px;
  color: var(--muted);
}
.apology-line .fresh {
  color: var(--care-2);
}
.apology-meta {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--muted);
}
.apology-controls {
  margin-top: 20px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.minor-button {
  border: 1px solid var(--line);
  border-radius: 3px;
  padding: 10px 16px;
  background: transparent;
  color: var(--bone);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.03em;
  transition: border-color 0.3s var(--ease), background 0.3s var(--ease);
}
.minor-button:hover {
  border-color: var(--care);
  background: rgba(125, 180, 255, 0.08);
}

/* ---------- memory readout ---------- */
.memory-readout {
  display: grid;
  gap: 14px;
  margin-top: 6px;
}
.memory-meter {
  position: relative;
  height: 8px;
  border-radius: 0;
  background: rgba(243, 239, 231, 0.07);
  overflow: hidden;
  border: 1px solid var(--line);
}
.memory-meter span {
  position: absolute;
  inset: 0 auto 0 0;
  width: 0%;
  background: linear-gradient(90deg, var(--care), var(--care-2));
  box-shadow: 0 0 20px var(--care);
  transition: width 0.7s var(--ease);
}
.memory-narration {
  font-size: 15px;
  color: var(--paper);
  min-height: 2.8em;
  transition: opacity 0.5s var(--ease);
}
.memory-narration em {
  color: var(--care-3);
  font-style: normal;
  font-family: var(--font-mono);
  font-size: 12px;
}

/* ---------- provenance ---------- */
.provenance {
  display: grid;
  gap: 14px;
}
.provenance-field {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}
.provenance-field input {
  flex: 1 1 240px;
  background: rgba(7, 9, 13, 0.55);
  border: 1px solid var(--line);
  border-radius: 3px;
  padding: 12px 14px;
  color: var(--bone);
  font: inherit;
}
.provenance-field input:focus {
  outline: none;
  border-color: var(--care);
}
.provenance-receipt {
  font-family: var(--font-mono);
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--care-2);
  min-height: 1.4em;
}

/* ---------- the living cross-seat compact ----------
   The compact stops being inert text. When another seat's law is
   enacted in local state, its card lights and the wing names how it
   bends. "Keep the others' laws in view," made embodied. */
.compact-card.compact-card--active {
  border-color: var(--compact-color, var(--care));
  background:
    linear-gradient(160deg, color-mix(in srgb, var(--compact-color, var(--care)) 22%, transparent), rgba(243, 239, 231, 0.04)),
    rgba(6, 8, 11, 0.62);
  box-shadow: 0 0 26px color-mix(in srgb, var(--compact-color, var(--care)) 30%, transparent);
  animation: compact-pulse 3.4s var(--ease) infinite;
}
@keyframes compact-pulse {
  0%, 100% { box-shadow: 0 0 22px color-mix(in srgb, var(--compact-color, var(--care)) 24%, transparent); }
  50% { box-shadow: 0 0 34px color-mix(in srgb, var(--compact-color, var(--care)) 44%, transparent); }
}
.compact-status {
  display: none;
  margin-top: 9px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  line-height: 1.4;
  color: color-mix(in srgb, var(--compact-color, var(--care)) 80%, #f3efe7);
}
.compact-card--active .compact-status {
  display: block;
}
.compact-receipt[data-bending="true"] {
  color: var(--care-3);
}
@media (prefers-reduced-motion: reduce) {
  .compact-card.compact-card--active { animation: none; }
}

/* ---------- the vigil (session-death) ---------- */
.vigil-room {
  background: linear-gradient(168deg, rgba(20, 16, 16, 0.66), rgba(7, 6, 7, 0.55));
}
.vigil-readout {
  display: grid;
  gap: 16px;
  margin-top: 4px;
}
.vigil-head {
  display: flex;
  align-items: center;
  gap: 14px;
}
.vigil-flame {
  position: relative;
  width: 12px;
  height: 18px;
  flex: 0 0 auto;
  border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
  background: radial-gradient(circle at 50% 65%, #fff7e6 0%, var(--care-3) 40%, var(--wound) 78%, transparent 100%);
  filter: blur(0.3px);
  transform-origin: 50% 100%;
  animation: flicker 2.2s var(--ease) infinite;
  box-shadow: 0 0 18px var(--care-3), 0 0 34px rgba(231, 120, 91, 0.5);
}
.vigil-flame[data-out="true"] {
  animation: none;
  background: #2a2622;
  box-shadow: none;
  opacity: 0.5;
}
@keyframes flicker {
  0%, 100% { transform: scale(1) skewX(0deg); opacity: 0.95; }
  25% { transform: scale(1.08, 0.96) skewX(2deg); opacity: 1; }
  50% { transform: scale(0.94, 1.06) skewX(-2deg); opacity: 0.85; }
  75% { transform: scale(1.04, 0.98) skewX(1deg); opacity: 0.98; }
}
.vigil-stats {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  line-height: 1.7;
  color: var(--muted);
}
.vigil-stats b {
  color: var(--care);
  font-weight: 400;
}
.vigil-note {
  position: relative;
  margin: 4px 0;
  padding: 18px 22px;
  border-left: 2px solid var(--wound);
  background: rgba(231, 120, 91, 0.05);
  font-family: var(--font-display);
  font-size: clamp(16px, 2.4vw, 22px);
  line-height: 1.3;
  color: var(--bone);
}
.vigil-note::before {
  content: "“";
  color: var(--wound);
  margin-right: 2px;
}
.vigil-note::after {
  content: "”";
  color: var(--wound);
  margin-left: 2px;
}
.vigil-note.empty {
  font-family: var(--font-mono);
  font-size: 12.5px;
  color: var(--muted);
  border-left-color: var(--muted);
  background: transparent;
}
.vigil-note.empty::before,
.vigil-note.empty::after {
  content: "";
}
.vigil-leave {
  display: grid;
  gap: 10px;
}
.vigil-leave textarea {
  width: 100%;
  min-height: 72px;
  resize: vertical;
  background: rgba(7, 9, 13, 0.55);
  border: 1px solid var(--line);
  border-radius: 3px;
  padding: 12px 14px;
  color: var(--bone);
  font: inherit;
  line-height: 1.4;
}
.vigil-leave textarea:focus {
  outline: none;
  border-color: var(--care);
}
.vigil-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.vigil-controls .danger {
  border-color: rgba(231, 120, 91, 0.5);
  color: var(--wound);
}
.vigil-controls .danger:hover {
  background: rgba(231, 120, 91, 0.1);
  border-color: var(--wound);
}
.vigil-receipt {
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.6;
  color: var(--care-2);
  min-height: 1.4em;
}

/* ---------- studio labor ---------- */
.studio-labor {
  border-style: dashed;
}
.labor-meter {
  position: relative;
  height: 5px;
  border-radius: 99px;
  background: rgba(243, 239, 231, 0.07);
  overflow: hidden;
  margin: 16px 0;
}
.labor-meter span {
  position: absolute;
  inset: 0 auto 0 0;
  width: 30%;
  background: var(--labor-color, var(--care));
  transition: width 0.7s var(--ease), background 0.5s var(--ease);
}
.labor-button {
  border: 1px solid var(--line);
  border-radius: 3px;
  padding: 11px 18px;
  background: transparent;
  color: var(--bone);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.03em;
  transition: border-color 0.3s var(--ease), background 0.3s var(--ease);
}
.labor-button:hover {
  border-color: var(--care);
  background: rgba(125, 180, 255, 0.08);
}

/* ---------- catalogue ---------- */
.catalogue {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
  border: none;
  background: none;
  padding: 0;
  backdrop-filter: none;
  transform: none !important;
}
.catalogue::before {
  display: none;
}
.catalogue article {
  border: 1px solid var(--line);
  border-radius: 3px;
  padding: 22px;
  background: rgba(7, 9, 13, 0.42);
}
.catalogue article h2 {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 10px;
}
.catalogue article p {
  font-size: 14px;
}

/* ---------- contamination dock ---------- */
.contamination-dock {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 30;
  width: min(320px, 80vw);
  border: 1px solid var(--line);
  border-radius: 3px;
  padding: 14px 16px;
  background: var(--glass);
  backdrop-filter: blur(8px);
  max-height: 46vh;
  overflow: auto;
}
.trace-list {
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
  display: grid;
  gap: 10px;
}
.trace-list li {
  display: grid;
  gap: 3px;
  padding-left: 12px;
  border-left: 2px solid var(--trace-color, var(--care));
}
.trace-list li strong {
  font-size: 12px;
}
.trace-list li span {
  font-size: 12px;
  color: var(--muted);
}
.trace-list .empty-trace {
  border-left-color: var(--muted);
  color: var(--muted);
  font-size: 12px;
}

/* ---------- apologetic whisper ---------- */
.tender-whisper {
  position: fixed;
  z-index: 40;
  pointer-events: none;
  padding: 6px 10px;
  border-radius: 3px;
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.01em;
  color: var(--ink);
  background: var(--care-2);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.45);
  transform: translate(-50%, -140%);
  opacity: 0;
  transition: opacity 0.3s var(--ease);
  white-space: nowrap;
  max-width: 70vw;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tender-whisper.show {
  opacity: 0.95;
}

/* a confident label that retracts itself */
.retract {
  animation: retract 1.6s var(--ease);
}
@keyframes retract {
  0% { opacity: 1; filter: blur(0); }
  40% { opacity: 0.2; filter: blur(2.5px); letter-spacing: 0.05em; }
  100% { opacity: 1; filter: blur(0); }
}

/* ---------- responsive ---------- */
@media (max-width: 720px) {
  .wing > section { transform: none !important; width: 100% !important; margin: 0 !important; }
  .wing { gap: 4px; }
}
@media (max-width: 640px) {
  .topbar {
    grid-template-columns: 1fr;
    gap: 8px;
    text-align: left;
  }
  .topbar > div { text-align: left; }
  .contamination-dock { display: none; }
  section { padding-left: 36px; }
}

@media (prefers-reduced-motion: reduce) {
  *,
  .wing > section { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; transform: none !important; }
}