/* ==========================================================================
   Cooked · single template
   Una familia (Geist, OFL), 14 px, jerarquía por peso y gris.
   ========================================================================== */

/* Geist (Vercel) variable, SIL OFL 1.1 (fonts/OFL-Geist.txt), subset latín + castellano */
@font-face { font-family: "Geist Shelf"; src: url("fonts/geist-var.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }

:root {
  /* color: grises neutros (escala tipo Radix gray) + un acento */
  --bg: #FCFCFC;
  --gray-2: #F9F9F9;
  --gray-3: #F3F3F3;     /* píldora de hover (rauno.me/projects) */
  --gray-4: #EDEDED;     /* hairline, mate de la tarjeta */
  --gray-5: #E8E8E8;
  --gray-8: #8F8F8F;     /* hairlines / decoración, no texto */
  --gray-9: #737373;     /* metadatos: fechas, etiquetas, pie · AA 4,6:1 sobre --bg */
  --gray-11: #646464;    /* texto secundario · 5,7:1 */
  --gray-12: #171717;    /* tinta */
  --accent: #FF4D00;     /* bermellón Shelf: solo «nuevo» y foco */

  --font: "Geist Shelf", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --text: 14px; --lh: 24px; --lh-row: 28px;
  --text-sm: 13px; --lh-sm: 20px;
  --w-strong: 480;      /* nombres: Geist 480 (≈ Söhne Buch; 500 queda pesado) */
  --tracking: -0.012em; /* ajustado a la anchura de Söhne */

  /* curvas de Emil Kowalski (review-animations/STANDARDS.md) · v7: sin ease-in en UI */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-ios: cubic-bezier(0.32, 0.72, 0, 1); /* = --ease-drawer */

  --line: var(--gray-5);
  --surface: var(--gray-2);
  --line-strong: var(--gray-8);

  --col: 640px;
  --gutter: 24px;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--gray-12);
  font: 400 var(--text)/var(--lh) var(--font);
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  letter-spacing: var(--tracking);
}
::selection { background: rgba(255, 77, 0, .14); }
a { color: inherit; text-decoration: none; }
button { font: inherit; letter-spacing: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
img { display: block; max-width: 100%; }
.tnum { font-variant-numeric: tabular-nums; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

:focus { outline: none; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 6px; }
.btn:focus-visible, .pager button:focus-visible, .pager a:focus-visible, .row-link:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 2px;
}
/* Enlace de salto: invisible (pero accesible) salvo con foco de teclado. v8: ya no se aparca fuera con transform,
   que en capturas de página completa y con scroll podía asomar; píldora gris como el resto de botones */
.skip { position: fixed; left: 16px; top: 16px; z-index: 50; padding: 6px 12px; border-radius: 10px; background: var(--gray-3); color: var(--gray-12); box-shadow: 0 0 0 1px rgba(0,0,0,.06); font-size: var(--text-sm); line-height: var(--lh-sm); font-weight: var(--w-strong); }
.skip:not(:focus-visible) { width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; box-shadow: none; }

/* ------------------------------------------------------------------ Vistas */
.view { width: min(var(--col), 100% - 2 * var(--gutter)); margin: 0 auto; }
#index { padding: 96px 0 64px; }
body.is-detail #index:not(.leaving) { display: none; }
body:not(.is-detail) #detail:not(.leaving) { display: none; }
.view.leaving { position: fixed; left: 0; right: 0; z-index: 5; pointer-events: none; }

/* ------------------------------------------------------------------ Perfil */
.profile { margin-bottom: 56px; }
.profile h1 { margin: 0; font: var(--w-strong) var(--text)/var(--lh-sm) var(--font); }
.profile .sub { margin: 0; color: var(--gray-9); line-height: var(--lh-sm); }
.profile .bio { margin: 20px 0 0; color: var(--gray-11); max-width: 38em; text-wrap: pretty; }

/* ------------------------------------------------------------------ Índice */
.year + .year { margin-top: 40px; }
.year h2 { margin: 0 0 4px; font: 400 var(--text)/var(--lh-row) var(--font); color: var(--gray-9); font-variant-numeric: tabular-nums; }
.rows { list-style: none; margin: 0; padding: 0; }
.row { position: relative; }
.row-link {
  position: relative; display: flex; align-items: center;
  margin: 0 -12px; padding: 8px 12px; border-radius: 12px;
  line-height: var(--lh-row);
  transition: background-color 200ms ease;
  -webkit-tap-highlight-color: transparent; cursor: pointer;
}
.row-name { flex: 0 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: var(--w-strong); }
.row-new { flex: none; width: 5px; height: 5px; margin-left: 8px; border-radius: 50%; background: var(--accent); }
.row-rule { flex: 1 1 16px; min-width: 16px; height: 1px; margin: 0 12px; background: var(--gray-4); }
.row-meta { flex: none; color: var(--gray-9); white-space: nowrap; font-variant-numeric: tabular-nums; }
.expand-agent { color: var(--gray-9); }

@media (hover: hover) and (pointer: fine) { /* v7 · todo :hover va aquí: en táctil el tap dispara hovers falsos */
    .btn:hover .arr { transform: translate(1px, -1px); } /* Open ↗ nudges out, like ← and the webring */
            .ring .prev:hover .arr { transform: translateX(-2px); }
  .ring .next:hover .arr { transform: translateX(2px); }
  .m-link:hover { text-decoration-color: var(--gray-9); }
  .m-link:hover .arr { transform: translate(1px, -1px); }
  #list:not(.kbd) .row-link:hover { background: var(--gray-3); transition-duration: 0ms; }
}
.row-link.is-active { background: var(--gray-3); transition-duration: 0ms; }
.row-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; box-shadow: none; }
#list.settling .row-link:not(.is-active) { background: transparent !important; transition: none; }

/* Entrada: fundido escalonado muy corto */
/* v7: 300 ms y escalonado de 30 ms con tope en el 10.º elemento (antes 600 ms y hasta ~1 s de espera) */
.js:not(.loaded) .row, .js:not(.loaded) .profile, .js:not(.loaded) .year h2 { animation: enter 300ms var(--ease-out) both; animation-delay: calc(min(var(--i, 0), 10) * 30ms); }
@keyframes enter { from { opacity: 0; transform: translateY(6px); filter: blur(2px); } }
@keyframes enter-fade { from { opacity: 0; } }

/* ------------------------------------------------------------------ Preview flotante */
.peek { position: fixed; left: 0; top: 0; z-index: 30; width: 288px; aspect-ratio: 16 / 10; pointer-events: none; will-change: transform; }
.peek-inner {
  position: absolute; inset: 0; border-radius: 10px; overflow: hidden; background: var(--gray-3);
  box-shadow: 0 0 0 1px rgba(0,0,0,.06), 0 4px 8px -2px rgba(0,0,0,.04), 0 16px 32px -12px rgba(0,0,0,.14);
  opacity: 0; transform: scale(.97); filter: blur(4px); transform-origin: var(--ox, 0%) 50%;
  transition: opacity 120ms var(--ease-out), transform 120ms var(--ease-out), filter 120ms var(--ease-out); /* v7: salida sin ease-in */
}
.peek.is-on .peek-inner { opacity: 1; transform: none; filter: none; transition: opacity 150ms var(--ease-out), transform 180ms var(--ease-out), filter 150ms var(--ease-out); } /* v7: presupuesto de tooltip (125–200 ms) */
.peek.kbd .peek-inner, .peek.kbd img { transition: none !important; } /* v7: con teclado, sin animación */
.peek img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top center; opacity: 0; transition: opacity 150ms ease; }
.peek img.is-current { opacity: 1; }

/* ------------------------------------------------------------------ Expansión en táctil */
.row-expand { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 200ms var(--ease-out); } /* v7: receta acordeón, 200 ms (antes 320) */
.row-expand > div { overflow: hidden; min-height: 0; }
.row.is-open .row-expand { grid-template-rows: 1fr; }
.expand-body { padding: 4px 0 24px; opacity: 0; transition: opacity 200ms var(--ease-out); }
.row.is-open .expand-body { opacity: 1; }
.expand-line { margin: 0 0 12px; color: var(--gray-11); text-wrap: pretty; }
.expand-thumb { display: block; aspect-ratio: 16 / 10; border-radius: 10px; overflow: hidden; background: var(--gray-3); box-shadow: 0 0 0 1px rgba(0,0,0,.06); }
.expand-thumb img { width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.expand-actions { display: flex; gap: 8px; margin-top: 8px; }
.expand-actions .btn { flex: 1; }
.row.is-open .row-link { background: var(--gray-3); }

/* ------------------------------------------------------------------ Botón (uno solo, gris) */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 4px; min-height: 44px; height: 44px; padding: 0 14px;
  border-radius: 10px; background: var(--gray-3); color: var(--gray-12); font-weight: var(--w-strong); white-space: nowrap;
  transition: background-color 150ms ease, transform 160ms var(--ease-out);
  -webkit-tap-highlight-color: transparent;
}
.btn:active { transform: scale(.97); }
.btn .arr { display: inline-block; color: var(--gray-9); transition: transform 200ms var(--ease-out); }
@media (hover: none) { .row-link:active { background: var(--gray-3); transition-duration: 0ms; } } /* v7 · pulsación táctil, sin movimiento */

/* ------------------------------------------------------------------ Detalle */
#detail { width: min(880px, 100% - 2 * var(--gutter), max(var(--col), (100svh - 250px) * 1.6 + 16px)); padding: 48px 0 64px; }
.d-nav { display: flex; justify-content: space-between; align-items: center; min-height: 44px; margin: 0 0 32px; padding: 0 8px; color: var(--gray-9); }
.back { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; transition: color 150ms ease; }
.back .arr { display: inline-block; transition: transform 200ms var(--ease-out); }
.pager { display: flex; align-items: center; gap: 4px; }
.pager .count { margin-right: 6px; }
.pager button, .pager a { width: 44px; height: 44px; border-radius: 8px; display: grid; place-items: center; color: var(--gray-9); transition: background-color 150ms ease, color 150ms ease, transform 160ms var(--ease-out); }
.pager button:active, .pager a:active { transform: scale(.97); } /* v7 · feedback al pulsar (receta Button press) */

/* La tarjeta: rauno.me/craft (mate gris, título y fecha dentro, botón a todo el ancho) */
.card { background: var(--gray-4); border-radius: 16px; padding: 0 8px 8px; }
.card-head { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 10px 6px; line-height: var(--lh-sm); background: var(--gray-3); margin: 0 -8px; padding-left: 14px; padding-right: 14px; border-radius: 16px 16px 0 0; }
.d-title { margin: 0; font: var(--w-strong) var(--text)/var(--lh-sm) var(--font); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.d-title:focus-visible { outline: none; }
.d-when { color: var(--gray-9); white-space: nowrap; }
.frame { position: relative; aspect-ratio: 16 / 10; border-radius: 10px; overflow: hidden; background: var(--gray-3); box-shadow: 0 0 0 1px rgba(0,0,0,.05); isolation: isolate; }
.frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.frame iframe { position: absolute; left: 0; top: 0; width: 1280px; height: 800px; border: 0; transform: scale(var(--fs, .67)); transform-origin: 0 0; opacity: 0; transition: opacity 240ms var(--ease-out); background: #fff; }
.frame.is-live iframe { opacity: 1; }
html:not(.js) .frame iframe { opacity: 1; }
.frame.is-morphing { background: transparent; box-shadow: none; }
.frame.is-morphing > * { visibility: hidden; }
.card-actions { display: flex; gap: 8px; margin-top: 8px; }
.card-actions .btn { min-width: 0; }
.card-actions .btn { flex: none; background: rgba(255,255,255,.55); }
.card-actions .btn-wide { flex: 1; }

/* v8 · colofón bajo la tarjeta: filas etiqueta/valor en dos grises (P colofón, R /craft) */
.d-meta { display: grid; grid-template-columns: 128px minmax(0, 1fr); column-gap: 16px; row-gap: 0; margin: 0; padding: 24px 8px 0; max-width: calc(var(--col) + 16px); }
.m-row { display: contents; }
.d-meta dt { color: #737373; }
/* One rhythm for every row; prose rows get a little extra air on both sides. */
.d-meta dt, .d-meta dd { padding-block: 6px; }
.m-notes dt, .m-notes dd { margin-block: 6px; }
.m-notes p { margin: 0; }
.m-notes p + p { margin-top: 0.6em; }
.d-meta dd { margin: 0; color: var(--gray-12); min-width: 0; overflow-wrap: anywhere; }
.m-link { color: var(--gray-12); text-decoration: underline; text-decoration-color: var(--gray-5); text-underline-offset: 3px; text-decoration-thickness: 1px; transition: text-decoration-color 150ms ease; }
.m-link .arr { display: inline-block; margin-left: 2px; color: var(--gray-9); transition: transform 200ms var(--ease-out); }
.m-note { color: var(--gray-9); }
/* Owner-only conversation visibility switch. The whole button (track + label) is the hit target. */
.m-row dd:has(.m-switch) { display: flex; flex-wrap: wrap; align-items: baseline; width: 100%; justify-self: stretch; min-width: 0; }
.m-conv { min-width: 0; }
/* The conversation row spans the full card column so the switch lands on its right edge;
   every other value keeps the reading measure. */
@media (min-width: 641px) {
  .d-meta:has(.m-switch) { max-width: none; }
  .d-meta:has(.m-switch) dd:not(:has(.m-switch)) { max-width: calc(var(--col) - 144px); }
}
.m-switch { display: inline-flex; align-items: baseline; gap: 6px; margin: -4px 0 -4px auto; padding: 4px 6px; border: 0; background: none; font: inherit; color: var(--gray-11); cursor: pointer; border-radius: 6px; -webkit-tap-highlight-color: transparent; }
.m-switch-track { position: relative; flex: none; width: 22px; height: 12px; border-radius: 6px; background: var(--gray-8); align-self: center; }
.m-switch-thumb { position: absolute; top: 2px; left: 2px; width: 8px; height: 8px; border-radius: 50%; background: #fff; transition: transform 160ms var(--ease-out); }
.m-switch[aria-checked="true"] .m-switch-track { background: var(--gray-12); }
.m-switch[aria-checked="true"] .m-switch-thumb { transform: translateX(10px); }
.m-switch[aria-checked="false"] .m-switch-label, .m-switch-label.is-error { color: var(--gray-9); }
.m-switch:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.m-row dd:has(.m-switch[aria-checked="false"]) .m-link { color: var(--gray-9); text-decoration-color: var(--line); }
@media (max-width: 640px) {
  .m-row dd:has(.m-switch) .m-conv { flex-basis: 100%; }
  .m-switch { margin: 4px 0 0 -6px; padding: 12px 6px; min-height: 44px; box-sizing: border-box; }
}
@media (hover: hover) and (pointer: fine) { .m-switch:hover .m-switch-label { color: var(--gray-12); } }
@media (prefers-reduced-motion: reduce) { .m-switch-thumb { transition: none; } }

/* Entrada escalonada */
.d-stagger { opacity: 0; transform: translateY(4px); }
.d-in .d-stagger { opacity: 1; transform: none; transition: opacity 250ms var(--ease-out), transform 250ms var(--ease-out); transition-delay: calc(var(--d, 0) * 40ms + 120ms); } /* v7: ≤300 ms */
.d-out .d-stagger { opacity: 0; transform: none; transition: opacity 120ms var(--ease-out); }
#detail.d-instant .d-stagger { transition: none !important; } /* v7: ← → / Enter / Esc con teclado: sin animación */
.card.d-stagger { transform: none; }

/* Morph (elemento compartido preview → pantalla de la tarjeta) */
.morph { position: fixed; left: 0; top: 0; z-index: 40; overflow: hidden; background: var(--gray-3); transform-origin: 0 0; will-change: transform; pointer-events: none; box-shadow: 0 0 0 1px rgba(0,0,0,.06); }
.morph img { width: 100%; height: 100%; object-fit: cover; object-position: top center; }

#index.leaving.fade { transition: opacity 150ms var(--ease-out); opacity: 0; }
#detail.leaving { transition: opacity 150ms var(--ease-out); }
#detail.leaving.fade { opacity: 0; }
#index.entering { animation: back-in 200ms var(--ease-out) both; } /* telón de fondo bajo el morph: solo opacidad, como el backdrop de un modal */
@keyframes back-in { from { opacity: 0; } }

/* ------------------------------------------------------------------ Pie: una línea */
.foot { margin-top: 64px; display: flex; justify-content: space-between; align-items: center; gap: 16px; color: var(--gray-9); }
#detail .foot { padding: 0 8px; }
.ring { display: flex; align-items: center; gap: 16px; }
.foot a { display: inline-flex; align-items: center; min-height: 44px; transition: color 150ms ease; }
.ring .arr { display: inline-block; transition: transform 200ms var(--ease-out); }

/* Toast (Sonner-like) */
.toast { position: fixed; left: 50%; bottom: 24px; z-index: 60; transform: translate(-50%, 100%); opacity: 0; padding: 8px 14px; border-radius: 10px; background: #fff; color: var(--gray-12); font-size: var(--text-sm); line-height: var(--lh-sm); box-shadow: 0 0 0 1px rgba(0,0,0,.06), 0 8px 24px -8px rgba(0,0,0,.16); transition: opacity 400ms ease, transform 400ms ease; pointer-events: none; white-space: nowrap; }
.toast.is-on { opacity: 1; transform: translate(-50%, 0); } /* v7: receta Sonner: 400 ms ease, entra y sale por el mismo borde */

/* ------------------------------------------------------------------ Móvil */
@media (max-width: 640px) {
  :root { --gutter: 20px; }
  #index { padding-top: 48px; }
  .profile { margin-bottom: 40px; }
  .row-link { padding-top: 10px; padding-bottom: 10px; }
  #detail { padding-top: 24px; }
  .d-nav { margin-bottom: 16px; }
  .card { padding: 0 6px 6px; border-radius: 14px; }
  .frame { border-radius: 9px; }
  .card-actions .btn { height: 44px; }
  .foot { flex-direction: column; gap: 8px; }
  .d-meta { grid-template-columns: 1fr; row-gap: 0; padding-top: 20px; }
  .d-meta dt { padding-bottom: 0; }
  .d-meta dd { padding-top: 2px; }
  .m-notes dt { margin-bottom: 0; }
  .m-notes dd { margin-top: 0; }
}

/* ------------------------------------------------------------------ Movimiento reducido */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; animation-delay: 0ms !important; scroll-behavior: auto !important; }
  /* v7: más suave, no cero: se conservan los fundidos de opacidad y se quita todo desplazamiento */
  .js:not(.loaded) .row, .js:not(.loaded) .profile, .js:not(.loaded) .year h2 { animation: enter-fade 200ms var(--ease-out) both !important; }
  .toast, .toast.is-on { transform: translate(-50%, 0) !important; transition: opacity 200ms ease !important; }
  .pager button:active, .btn:hover .arr, .back:hover .arr, .ring .arr, .m-link .arr { transform: none !important; }
  .expand-body { transition: opacity 150ms var(--ease-out) !important; }
  .d-in .d-stagger { transition: opacity 150ms var(--ease-out) !important; transition-delay: 0ms !important; }
  .peek-inner, .peek.is-on .peek-inner { transform: none !important; filter: none !important; transition: opacity 100ms linear !important; }
  .row-expand { transition-duration: 1ms !important; }
  .d-stagger { transform: none !important; }
  .btn:active { transform: none; }
}

/* ------------------------------------------------------------------ Landing / 404 */
.landing-note { margin: 0 0 24px; color: var(--gray-9); font-size: var(--text-sm); line-height: var(--lh-sm); }
.row-tile {
  flex: none; width: 28px; height: 28px; margin-right: 10px; border-radius: 8px;
  background: linear-gradient(#fff, #F6F6F5); box-shadow: 0 0 0 1px #E4E4E4;
  display: grid; place-items: center; font-weight: var(--w-strong); font-size: 13px;
}
.year h2:not(.sr-only) { margin: 0 0 4px; }
.publish-block { margin-top: 40px; }
.empty-row { color: var(--gray-9); padding: 8px 0; }
.page-plain { padding: 96px 0 64px; }
.page-plain h1 { margin: 0; font: var(--w-strong) var(--text)/var(--lh-sm) var(--font); }
.page-plain .bio, .page-plain p { color: var(--gray-11); }
.page-plain a { text-decoration: underline; text-decoration-color: var(--gray-5); text-underline-offset: 3px; }
.is-landing .year h2 { color: var(--gray-9); }

/* ------------------------------------------------------------------ Claim (agent self-signup) */
/* Wordmark: +2px over body text, wordmark weight/tracking per DESIGN_SYSTEM (560, tight). Same 24px line, so nothing below moves. */
.claim-brand { display: inline-block; margin: 0 0 40px; font-size: 16px; line-height: 24px; font-weight: 560; letter-spacing: -0.03em; color: var(--gray-12); text-decoration: none !important; }
.claim-brand span { color: var(--accent); }
.claim h1 { text-wrap: balance; }
.claim-handle { color: var(--gray-12); }
.claim-agent { color: var(--gray-12); }
.claim .bio { margin: 8px 0 0; max-width: 34em; text-wrap: pretty; }
.view.claim { width: min(560px, 100% - 2 * var(--gutter)); }
/* A. Code: one frame, nothing nested */
.claim-code {
  margin: 24px 0; padding: 16px 0; border: 1px solid var(--line); border-radius: 8px; background: var(--surface);
  text-align: center; font: var(--w-strong) 20px/28px var(--font); letter-spacing: 0.02em; color: var(--gray-12);
  font-variant-numeric: tabular-nums; font-variant-ligatures: none; font-feature-settings: "liga" 0, "calt" 0;
}
.claim-meta { padding: 0; font-size: 14px; line-height: 24px; }
.claim-meta dt, .claim-meta dd { font-size: 14px; }
.handle { white-space: nowrap; font-variant-numeric: tabular-nums; color: var(--gray-12); }
.claim h1.claim-title { margin: 0; font: var(--w-strong) var(--text)/var(--lh) var(--font); color: var(--gray-12); text-wrap: balance; }
.claim .claim-text { margin: 4px 0 0; font-size: 14px; line-height: 24px; color: var(--gray-11); max-width: 34em; text-wrap: pretty; }
.claim .claim-text + .claim-text { margin-top: 16px; }
.claim a.claim-next { color: var(--gray-12); text-decoration: none; }
@media (hover: hover) and (pointer: fine) { .claim a.claim-next:hover { text-decoration: underline; text-decoration-color: var(--gray-5); } }
/* B. Fine print */
.claim .claim-fine { margin: 16px 0 0; font-size: 13px; line-height: 20px; color: var(--gray-9); max-width: 38em; text-wrap: pretty; }
/* C. Sent state */
.claim .claim-collapsed { margin: 16px 0 24px; color: var(--gray-9); font-size: 14px; line-height: 24px; }
.claim .claim-collapsed .handle { color: inherit; }
.claim-sent { margin: 0; animation: claim-xfade 180ms var(--ease-out) both; }
.claim .claim-sent-title { margin: 0; font-weight: var(--w-strong); color: var(--gray-12); font-size: 14px; line-height: 24px; }
.claim .claim-sent-text { margin: 0; color: var(--gray-11); font-size: 14px; line-height: 24px; }
.claim .claim-sent-links { margin: 12px 0 0; color: var(--gray-9); font-size: 14px; line-height: 24px; }
.claim a.claim-quiet { color: var(--gray-12); text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: 3px; font-variant-numeric: tabular-nums; }
.claim a.claim-quiet.is-wait { color: var(--gray-9); text-decoration: none; cursor: default; }
.nowrap { white-space: nowrap; }
.btn .btn-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@keyframes claim-xfade { from { opacity: 0; } }
/* P0 confirm button: compact, left-aligned */
.claim-confirm .claim-btn { align-self: flex-start; width: auto; max-width: 100%; height: 36px; min-height: 36px; padding: 0 16px; border-radius: 8px; }
@media (max-width: 640px) { .claim-confirm .claim-btn { align-self: stretch; width: 100%; } }
.claim-drafts { list-style: none; margin: 0; padding: 0; }
.claim-actions { display: flex; flex-direction: column; gap: 8px; margin-top: 32px; }
.claim-actions .btn { text-decoration: none; }
.btn-ink { background: var(--gray-12); color: var(--bg); }
@media (hover: hover) and (pointer: fine) { .btn-ink:hover { background: #2a2a2a; } }
.btn.is-disabled { color: var(--gray-9); cursor: not-allowed; }
.claim-foot { margin: 16px 0 0; color: var(--gray-9) !important; font-size: var(--text-sm); line-height: var(--lh-sm); max-width: 38em; text-wrap: pretty; }
.claim-error { margin: 16px 0 0; color: var(--gray-12) !important; padding-left: 12px; box-shadow: inset 2px 0 0 var(--accent); }

.draft-dot { flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
@media (max-width: 640px) {
  .d-meta.claim-meta { grid-template-columns: 96px minmax(0, 1fr); row-gap: 6px; }
  .d-meta.claim-meta dt { padding-top: 0; }
}
.join-url span { font-size: 16px; line-height: 24px; letter-spacing: 0; padding: 0 16px; text-align: center; overflow-wrap: anywhere; }
.claim-form { display: flex; flex-direction: column; gap: 8px; margin: 0; }
.claim-form + .claim-foot { margin-top: 16px; }
.claim .bio + .claim-form { margin-top: 24px; }
.claim > .claim-form { margin-top: 32px; }
.claim-input {
  width: 100%; height: 44px; padding: 0 14px; border: 0; border-radius: 10px; background: var(--bg);
  box-shadow: 0 0 0 1px var(--gray-5); font: inherit; letter-spacing: inherit; color: var(--gray-12);
  transition: box-shadow 150ms ease;
}
.claim-input::placeholder { color: var(--gray-8); }
.claim-input:focus-visible { outline: none; box-shadow: 0 0 0 1px var(--gray-12), 0 0 0 4px rgba(255,77,0,.12); }
/* E. First arrival after claiming (?welcome=1) */
html.js.is-welcome .profile, html.js.is-welcome .row, html.js.is-welcome .year h2 { animation: none; }
.is-welcome .profile h1 .tch { display: inline-block; white-space: pre; animation: tch 220ms var(--ease-out) both; animation-delay: calc(var(--c) * var(--st, 18ms)); }
@keyframes tch { from { opacity: 0; transform: translateY(4px); filter: blur(2px); } }
.is-welcome .profile h1::after { content: "."; display: inline-block; color: var(--accent); animation: welcome-dot 320ms var(--ease-out) both; animation-delay: var(--name-ms, 400ms); }
@keyframes welcome-dot { 0% { opacity: 0; transform: scale(1); } 50% { opacity: 1; transform: scale(1.6); } 100% { opacity: 1; transform: scale(1); } }
.is-welcome .profile .sub, .is-welcome .profile .bio { animation: enter-fade 220ms var(--ease-out) both; }
html.js.is-welcome .row { animation: enter 300ms var(--ease-out) both; animation-delay: calc(var(--name-ms, 400ms) + min(var(--w, 0), 6) * 40ms); }
/* While the name period pulses it is the only accent: "new" dots and the footer dot wait, then fade in. */
.is-welcome .row-new, .is-welcome .foot-mark .mark-dot { animation: enter-fade 200ms var(--ease-out) both; animation-delay: calc(var(--name-ms, 400ms) + 320ms); }
@media (prefers-reduced-motion: reduce) {
  .is-welcome .row-new, .is-welcome .foot-mark .mark-dot,
  .is-welcome .profile h1 .tch, .is-welcome .profile h1::after, .is-welcome .profile .sub, .is-welcome .profile .bio, html.js.is-welcome .row { animation: none !important; }
}

/* Footer without the webring (WEBRING_ENABLED=false): wordmark left, one quiet CTA right, hairline above */
.foot-solo { margin-top: 72px; padding-top: 20px; box-shadow: inset 0 1px 0 var(--gray-4); }
#detail .foot-solo { padding: 20px 8px 0; }
.foot-mark { color: var(--gray-12); font-weight: var(--w-strong); }
.foot-mark .mark-dot { color: var(--accent); }
.foot-cta .arr { display: inline-block; margin-left: 2px; color: var(--gray-8); transition: transform 200ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
  .foot-solo a:hover { color: var(--gray-12); }
  .foot-cta:hover .arr { transform: translate(1px, -1px); }
}
@media (max-width: 640px) { .foot.foot-solo { flex-direction: row; } }
@media (prefers-reduced-motion: reduce) { .foot-cta .arr { transition: none; } }

/* ---------- Conversation transcript (/@h/slug/conversation) ---------- */
.is-transcript .tx { padding: 64px 0 96px; }
.tx-back { display: inline-flex; gap: 6px; color: var(--gray-9); text-decoration: none; font-size: var(--text-sm); line-height: var(--lh-sm); transition: color 150ms ease; }
.tx-back:hover { color: var(--gray-12); }
.tx-back .arr { transition: transform 200ms var(--ease-out); }
.tx-back:hover .arr { transform: translateX(-2px); }
.tx-head h1 { margin: 32px 0 0; font: var(--w-strong) var(--text)/var(--lh-sm) var(--font); }
.tx-meta { margin: 2px 0 0; color: var(--gray-9); line-height: var(--lh-sm); font-variant-numeric: tabular-nums; }
.tx-list { list-style: none; margin: 40px 0 0; padding: 0; }
.tx-turn { display: grid; grid-template-columns: 88px minmax(0, 1fr); gap: 16px; padding: 14px 0; border-top: 1px solid var(--gray-4); }
.tx-turn:first-child { border-top: 0; }
.tx-who { color: var(--gray-9); line-height: var(--lh); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tx-user .tx-who { color: var(--gray-12); font-weight: var(--w-strong); }
.tx-body { min-width: 0; color: var(--gray-12); text-wrap: pretty; overflow-wrap: anywhere; }
.tx-assistant .tx-body { color: var(--gray-11); }
.tx-body p { margin: 0 0 10px; }
.tx-body p:last-child { margin-bottom: 0; }
.tx-body code { font: 12.5px/1 ui-monospace, "Geist Mono", SFMono-Regular, Menlo, monospace; background: var(--gray-3); padding: 2px 5px; border-radius: 5px; }
.tx-pre { margin: 10px 0; padding: 12px 14px; background: var(--gray-3); border-radius: 10px; overflow-x: auto; }
.tx-pre code { background: none; padding: 0; font-size: 12.5px; line-height: 20px; white-space: pre; }
.tx-tools { margin: 8px 0 0; color: var(--gray-9); font-size: var(--text-sm); line-height: var(--lh-sm); }
.tx-tools summary { cursor: pointer; list-style: none; display: inline-flex; align-items: center; gap: 6px; border-radius: 6px; transition: color 150ms ease; }
.tx-tools summary::-webkit-details-marker { display: none; }
.tx-tools summary::before { content: ""; width: 0; height: 0; border-left: 4px solid currentColor; border-top: 3.5px solid transparent; border-bottom: 3.5px solid transparent; transition: transform 200ms var(--ease-out); }
.tx-tools[open] summary::before { transform: rotate(90deg); }
.tx-tools summary:hover { color: var(--gray-12); }
.tx-tools ol { list-style: none; margin: 6px 0 0; padding: 0 0 0 10px; border-left: 1px solid var(--gray-4); }
.tx-tools li { padding: 2px 0; overflow-wrap: anywhere; }
.tx-tool { color: var(--gray-11); font-family: ui-monospace, "Geist Mono", SFMono-Regular, Menlo, monospace; font-size: 12px; }
.tx-sum { color: var(--gray-9); }
.tx-foot { margin: 48px 0 0; padding-top: 16px; border-top: 1px solid var(--gray-4); color: var(--gray-9); font-size: var(--text-sm); line-height: var(--lh-sm); }
.tx-foot a { color: var(--gray-11); }
.tx-review { margin: 32px 0 0; padding: 16px; border-radius: 14px; background: var(--gray-3); }
.tx-badge { margin: 0; font-weight: var(--w-strong); }
.tx-note { margin: 4px 0 0; color: var(--gray-11); max-width: 38em; text-wrap: pretty; }
.tx-flash { margin: 8px 0 0; color: var(--gray-12); }
.tx-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0 0; }
.tx-actions form { margin: 0; }
.tx-actions-end { margin-top: 32px; }
.tx-gate h1 { margin: 0; font: var(--w-strong) var(--text)/var(--lh-sm) var(--font); text-wrap: balance; }
@media (max-width: 560px) {
  .is-transcript .tx { padding: 40px 0 72px; }
  .tx-turn { grid-template-columns: minmax(0, 1fr); gap: 2px; }
}
@media (prefers-reduced-motion: reduce) { .tx-tools summary::before, .tx-back .arr { transition: none; } }

/* ---------- Empty shelf onboarding state (/@handle with 0 projects) ---------- */
.empty-shelf { margin-top: -8px; }
.js:not(.loaded) .empty-shelf {
  animation: enter 300ms var(--ease-out) both;
  animation-delay: calc(min(var(--i, 0), 10) * 30ms);
}
.empty-row-head {
  display: flex; align-items: center; margin: 0 -12px; padding: 8px 12px;
  line-height: var(--lh-row); color: var(--gray-9);
}
.empty-row-head .row-rule { margin-right: 0; }
.empty-dot {
  flex: none; width: 5px; height: 5px; margin-right: 10px; border-radius: 50%;
  background: var(--gray-8);
  transition: background-color 200ms var(--ease-out), transform 200ms var(--ease-out), box-shadow 200ms var(--ease-out);
}
.empty-title {
  flex: 0 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  color: var(--gray-9); font-weight: 400;
  transition: color 200ms var(--ease-out), opacity 150ms var(--ease-out);
}
.empty-shelf.is-copied .empty-dot {
  background: var(--accent); transform: scale(1.25);
  box-shadow: 0 0 0 3px rgba(255, 77, 0, .14);
}
.empty-shelf.is-copied .empty-title { color: var(--gray-12); font-weight: var(--w-strong); }

.empty-prompt {
  position: relative; display: flex; align-items: center; justify-content: space-between; gap: 16px;
  margin: 8px -12px 0; padding: 10px 10px 10px 14px; border-radius: 12px;
  background: var(--gray-3); box-shadow: inset 0 0 0 1px var(--gray-4);
  cursor: pointer; user-select: none;
  transition: background-color 200ms var(--ease-out), box-shadow 200ms var(--ease-out), transform 160ms var(--ease-out);
}
.empty-prompt:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.empty-prompt:active { transform: scale(.995); }
.empty-prompt-text {
  flex: 1; min-width: 0; margin: 0;
  font: 400 var(--text)/var(--lh) var(--font); color: var(--gray-11);
  text-wrap: pretty;
}
.empty-url {
  color: var(--gray-12); font-weight: var(--w-strong);
  text-decoration: underline; text-decoration-color: var(--gray-5);
  text-underline-offset: 3px; text-decoration-thickness: 1px;
  transition: text-decoration-color 150ms ease;
}
.empty-copy {
  position: relative; flex: none; display: inline-flex; align-items: center; justify-content: center;
  height: 32px; min-width: 104px; padding: 0 12px; border-radius: 8px;
  background: rgba(255, 255, 255, .75);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .06), 0 1px 2px rgba(0, 0, 0, .03);
  color: var(--gray-12); font: var(--w-strong) var(--text)/var(--lh-sm) var(--font);
  overflow: hidden;
  transition: background-color 150ms ease, box-shadow 150ms ease, transform 150ms var(--ease-out);
}
.empty-copy > span {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  transition: transform 280ms var(--ease-out), opacity 180ms var(--ease-out), filter 280ms var(--ease-out);
}
.empty-copy .done { position: absolute; inset: 0; transform: translateY(100%); opacity: 0; filter: blur(2px); }
.copied .empty-copy .idle { transform: translateY(-100%); opacity: 0; filter: blur(2px); }
.copied .empty-copy .done { transform: none; opacity: 1; filter: none; }
.empty-copy .check path { stroke-dasharray: 14; stroke-dashoffset: 14; transition: stroke-dashoffset 320ms 60ms var(--ease-out); }
.copied .empty-copy .check path { stroke-dashoffset: 0; }
.copied.empty-prompt { background: var(--gray-4); box-shadow: inset 0 0 0 1px var(--gray-5); }

.empty-hint {
  margin: 12px 0 0; font: 400 var(--text)/var(--lh) var(--font); color: var(--gray-9);
  transition: color 200ms var(--ease-out);
}
.empty-shelf.is-copied .empty-hint { color: var(--gray-11); }

@media (hover: hover) and (pointer: fine) {
  .empty-prompt:hover { background: var(--gray-4); box-shadow: inset 0 0 0 1px var(--gray-5); }
  .empty-prompt:hover .empty-url { text-decoration-color: var(--gray-9); }
  .empty-prompt:hover .empty-copy { background: #fff; box-shadow: 0 0 0 1px rgba(0, 0, 0, .09), 0 2px 4px rgba(0, 0, 0, .04); }
  .empty-shelf:has(.empty-prompt:hover) .empty-dot { background: var(--accent); transform: scale(1.15); }
  .empty-shelf:has(.empty-prompt:hover) .empty-title { color: var(--gray-12); }
}
@media (max-width: 520px) {
  .empty-prompt { flex-direction: column; align-items: stretch; gap: 10px; margin: 8px 0 0; padding: 12px; }
  .empty-copy { width: 100%; height: 36px; }
}
@media (prefers-reduced-motion: reduce) {
  .empty-prompt:active, .empty-dot { transform: none !important; }
  .empty-copy > span, .empty-copy .check path { transition-duration: 0s !important; transition-delay: 0s !important; filter: none !important; }
}


/* ─── Owner inline profile editing (name & bio) ─────────────────────────── */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ─── Owner paper-direct editing (name & bio) ───────────────────────────── */
.profile h1.name-editable,
.profile .bio.bio-editable {
  display: block;
  width: fit-content;
  max-width: 38em;
  margin-left: -6px;
  padding: 1px 6px;
  border-radius: 6px;
  cursor: text;
  caret-color: var(--accent);
  outline: none;
  transition: background-color 150ms ease, color 150ms ease;
}

.profile h1.name-editable {
  margin-top: -1px;
  margin-bottom: -1px;
}

.profile .bio.bio-editable {
  margin-top: 19px;
  margin-bottom: -1px;
}

.profile .bio.bio-editable:empty::before {
  content: attr(data-placeholder);
  color: var(--gray-8);
  pointer-events: none;
}

@media (hover: hover) and (pointer: fine) {
  .profile h1.name-editable:hover,
  .profile .bio.bio-editable:hover {
    background: var(--gray-3);
  }
  .profile .bio.bio-editable:empty:hover::before {
    color: var(--gray-8);
  }
}

.profile h1.name-editable:focus,
.profile h1.name-editable:focus-visible,
.profile .bio.bio-editable:focus,
.profile .bio.bio-editable:focus-visible {
  outline: none;
  background: var(--gray-3);
  color: var(--gray-12);
}

.profile .bio.bio-editable:empty:focus::before {
  color: var(--gray-8);
}

.profile h1.name-editable:not(:empty):focus::after,
.profile .bio.bio-editable:not(:empty):focus::after {
  content: "↵";
  color: var(--gray-8);
  font-size: var(--text-sm);
  font-weight: 400;
  margin-left: 6px;
  pointer-events: none;
  user-select: none;
}

/* ─── Owner footer copy-prompt & pending transcript indicators ─────────── */
.foot-copy-prompt {
  min-height: 44px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--gray-9);
  font: 400 var(--text)/var(--lh) var(--font);
  letter-spacing: var(--tracking);
  cursor: pointer;
  transition: color 150ms ease;
}
.foot-copy-prompt:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 4px;
  border-radius: 4px;
}
.m-review-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--gray-12);
}
.row-review {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: 10px;
  color: var(--gray-9);
  font-size: var(--text-sm);
  line-height: var(--lh-sm);
}
.row-review::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
}
@media (hover: hover) and (pointer: fine) {
  .foot-copy-prompt:hover {
    color: var(--gray-12);
  }
}

@media (max-width: 640px) {
  .row-review {
    display: none;
  }
}

/* ─── Owner paper-direct editing on the detail page (title, summary, notes) ─
   The cushion (padding + matching negative margin) is there at rest too, so focus
   only paints the pill: the text never moves. */
.d-editable, .m-edit {
  position: relative;
  width: fit-content; max-width: calc(100% + 6px);
  margin: -4px 0 -4px -6px; padding: 4px 6px; border-radius: 6px;
  cursor: text; caret-color: var(--accent); outline: none;
  transition: background-color 150ms ease, color 150ms ease;
}
.m-edit { min-height: 28px; }
.m-notes-text.m-edit { width: auto; padding-right: 36px; }
.m-edit:empty::before { content: attr(data-placeholder); color: var(--gray-8); pointer-events: none; }
@media (hover: hover) and (pointer: fine) {
  .d-editable:hover, .m-edit:hover { background: var(--gray-3); }
  .m-edit:empty:hover::before { color: var(--gray-9); }
}
.d-editable:focus, .d-editable:focus-visible, .m-edit:focus, .m-edit:focus-visible {
  outline: none; background: var(--gray-3);
}
/* The whisper: ↵ (⌘↵ for notes) while you type. */
.d-editable:not(:empty):focus::after, .m-edit:not(:empty):focus::after {
  content: attr(data-hint);
  margin-left: 6px; opacity: .5;
  color: var(--gray-12); font-size: 11px; font-weight: 400; font-variant-numeric: tabular-nums;
  pointer-events: none; user-select: none;
  animation: enter-fade 150ms var(--ease-out);
}
.m-notes-text:not(:empty):focus::after { position: absolute; right: 6px; bottom: 4px; margin: 0; line-height: 20px; }
.d-editable.is-saving, .m-edit.is-saving { color: var(--gray-9); }
.d-editable.is-saved, .m-edit.is-saved { animation: saved-settle 600ms var(--ease-out); }
@keyframes saved-settle { from { background: var(--gray-3); } to { background: transparent; } }

/* ─── Quiet delete, two steps. Both labels share one grid cell and crossfade. ─ */
.d-owner { padding: 32px 8px 0; max-width: calc(var(--col) + 16px); }
.d-delete {
  display: inline-grid; justify-items: start; align-items: center;
  min-height: 44px; padding: 0; border: 0; background: none; font: inherit;
  font-size: 13px; color: var(--gray-9); cursor: pointer; text-align: left;
  transition: color 150ms ease;
}
.d-delete > span { grid-area: 1 / 1; white-space: nowrap; transition: opacity 150ms var(--ease-out); }
.d-del-armed { opacity: 0; color: var(--gray-12); }
.d-del-armed::before {
  content: ""; display: inline-block; width: 6px; height: 6px; margin-right: 8px;
  border-radius: 50%; background: var(--accent); vertical-align: 1px;
}
.d-delete.is-armed .d-del-idle { opacity: 0; }
.d-delete.is-armed .d-del-armed { opacity: 1; }
@media (hover: hover) and (pointer: fine) { .d-delete:hover { color: var(--gray-12); } }
.d-delete:disabled { cursor: default; }
.d-delete.is-busy .d-del-armed { opacity: .5; }

/* ─── Unclaimed draft preview bar ──────────────────────────────────────── */
.draft-bar {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin: 0 0 16px; padding: 8px 12px; border-radius: 8px;
  background: var(--gray-3); color: var(--gray-11, var(--gray-12));
}
.draft-bar .m-link { color: var(--gray-12); }

/* ─── Live shelf: a row your agent just published ──────────────────────── */
.row.is-arriving { animation: arrive 420ms var(--ease-out) both; }
.row.is-arriving .row-new { animation: arrive-dot 1200ms var(--ease-out) both; }
@keyframes arrive { from { opacity: 0; transform: translateY(-6px); filter: blur(2px); } }
@keyframes arrive-dot { 0% { transform: scale(0); } 40% { transform: scale(1.6); } 100% { transform: scale(1); } }

@media (prefers-reduced-motion: reduce) {
  .row.is-arriving { animation: enter-fade 200ms var(--ease-out) both; }
  .row.is-arriving .row-new, .d-editable.is-saved, .m-edit.is-saved { animation: none; }
}

/* Visitor empty shelf: a static ghost row, no prompt, no motion. */
.empty-shelf.is-visitor .empty-dot { background: var(--gray-8); transform: none; box-shadow: none; transition: none; animation: none; }

/* Detail meta: dt and dd share line-height and padding, and sit on one baseline. */
.d-meta { align-items: baseline; }
.d-meta dt, .d-meta dd { line-height: 1.6; align-self: baseline; }
@media (min-width: 641px) { .d-meta dt, .d-meta dd { padding-top: 6px; padding-bottom: 6px; } }
.d-meta dd > .m-edit:first-child { line-height: 1.6; }

.profile .bio.bio-editable:empty:focus::before { color: var(--gray-8); }
p.claim-sent { display: flex; align-items: center; gap: 8px; color: var(--gray-12) !important; font-size: var(--text-sm); line-height: var(--lh-sm); }

/* Claim heading: handle never breaks; only a long email may, at any point. */
.claim-email { white-space: nowrap; }
@media (max-width: 640px) { .claim-email { white-space: normal; overflow-wrap: anywhere; } }