/* The Unburied / When Two Meet: component library v0.1 (subset of web/shared/components.css for this site). */
/* ---------- 0. Derived tokens (alpha versions of the primitives) ---------- */
:root{
  --text-muted:var(--ash-500);
  --border-hair:var(--ash-800);
  --border-strong:var(--ash-500);
  --r-xs:2px;
  --bone-a02:rgba(243,239,231,.02);
  --bone-a04:rgba(243,239,231,.04);
  --bone-a06:rgba(243,239,231,.06);
  --bone-a10:rgba(243,239,231,.10);
  --bone-a16:rgba(243,239,231,.16);
  --bone-a24:rgba(243,239,231,.24);
  --gold-a06:rgba(201,162,74,.06);
  --gold-a10:rgba(201,162,74,.10);
  --gold-a16:rgba(201,162,74,.16);
  --gold-a24:rgba(201,162,74,.24);
  --gold-a40:rgba(201,162,74,.40);
  --soil-a00:rgba(12,11,10,0);
  --soil-a60:rgba(12,11,10,.60);
  --soil-a78:rgba(12,11,10,.78);
  --soil-a92:rgba(12,11,10,.92);
  --ash-a40:rgba(42,41,38,.40);
  --returned-a08:rgba(201,119,74,.08);
  --returned-a14:rgba(201,119,74,.14);
  --returned-a40:rgba(201,119,74,.40);
  --sprout-a10:rgba(124,154,62,.10);
  --sprout-a16:rgba(124,154,62,.16);
  --sprout-a40:rgba(124,154,62,.40);
  --memorial-a20:rgba(123,31,36,.20);
  --memorial-a60:rgba(123,31,36,.60);
  --shadow-1:0 1px 2px rgba(0,0,0,.40);
  --shadow-2:0 12px 32px rgba(0,0,0,.45), 0 2px 6px rgba(0,0,0,.30);
  --shadow-3:0 32px 80px rgba(0,0,0,.60), 0 4px 16px rgba(0,0,0,.40);
  --ring-gold:0 0 0 3px var(--gold-a24);
  --ring-bone:0 0 0 3px var(--bone-a16);
  --ring-returned:0 0 0 3px var(--returned-a14);
}
/* ---------- 1. Board layout ---------- */
.stack{display:flex;flex-direction:column}
.row{display:flex;align-items:center}
.row-top{display:flex;align-items:flex-start}
.row-between{display:flex;align-items:center;justify-content:space-between}
.wrap{flex-wrap:wrap}
.grow{flex:1 1 0;min-width:0}
.center{display:flex;align-items:center;justify-content:center}
.gap-1{gap:var(--s1)}.gap-2{gap:var(--s2)}.gap-3{gap:var(--s3)}.gap-4{gap:var(--s4)}.gap-5{gap:var(--s5)}
.gap-6{gap:var(--s6)}.gap-7{gap:var(--s7)}.gap-8{gap:var(--s8)}.gap-9{gap:var(--s9)}.gap-10{gap:var(--s10)}
.rule{height:1px;background:var(--border-hair);flex:none;align-self:stretch}
.rule-v{width:1px;background:var(--border-hair);flex:none;align-self:stretch}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.seam-h{height:1px;flex:none;align-self:stretch;background:linear-gradient(90deg,var(--gold-a06),var(--accent-seam) 50%,var(--gold-a06))}
.seam-h.is-solid{background:var(--accent-seam)}
.seam-v{width:1px;flex:none;align-self:stretch;background:linear-gradient(180deg,var(--gold-a06),var(--accent-seam) 50%,var(--gold-a06))}
.seam-v.is-solid{background:var(--accent-seam)}
/* ---------- 2. Brand marks ---------- */
.mark{display:block;flex:none;color:var(--accent-seam);fill:currentColor}
.mark-xxs{width:6px;height:15px}.mark-xs{width:10px;height:25px}.mark-sm{width:16px;height:40px}
.mark-md{width:32px;height:80px}.mark-lg{width:64px;height:160px}.mark-xl{width:120px;height:300px}
.mark-bone{color:var(--bone-50)}.mark-dim{color:var(--ash-700)}.mark-soil{color:var(--soil-950)}
.wordmark{font-family:var(--font-display);font-weight:600;font-size:18px;line-height:1;letter-spacing:.22em;text-transform:uppercase;color:var(--text-primary);white-space:nowrap}
.lockup{display:flex;align-items:center;gap:14px}
/* ---------- 3. Typography ---------- */
.eyebrow{font-family:var(--font-sans);font-weight:500;font-size:12px;line-height:1.3;letter-spacing:.18em;text-transform:uppercase;color:var(--text-secondary)}
.eyebrow-sm{font-size:11px;letter-spacing:.16em}
.caption{font-size:12px;line-height:1.45;color:var(--text-secondary)}
.mono-sm{font-family:var(--font-mono);font-weight:400;font-size:12px;line-height:1.4;letter-spacing:.02em}
.quote{font-family:var(--font-display);font-style:italic;font-weight:400;font-size:40px;line-height:1.2}
.t-primary{color:var(--text-primary)}.t-secondary{color:var(--text-secondary)}.t-muted{color:var(--text-muted)}
.t-accent{color:var(--text-accent)}.t-accent-light{color:var(--accent-seam-light)}.t-inverse{color:var(--text-inverse)}
.t-bone{color:var(--bone-100)}.t-returned{color:var(--status-returned)}.t-approved{color:var(--status-approved)}
.link{color:var(--text-primary);text-decoration:underline;text-decoration-color:var(--ash-500);text-underline-offset:3px;text-decoration-thickness:1px}
/* ---------- 4. Icons ---------- */
.icon{display:inline-block;flex:none;width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;vertical-align:middle}
.icon-xs{width:12px;height:12px}.icon-sm{width:14px;height:14px}.icon-md{width:18px;height:18px}
.icon-lg{width:20px;height:20px}.icon-xl{width:24px;height:24px}
.icon-fill{fill:currentColor;stroke:none}
/* ---------- 5. Buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;flex:none;width:max-content;height:48px;padding:0 28px;border:1px solid transparent;border-radius:var(--r-xs);background:transparent;color:var(--text-primary);font-family:var(--font-sans);font-weight:500;font-size:13px;line-height:1;letter-spacing:.14em;text-transform:uppercase;white-space:nowrap;text-decoration:none;cursor:pointer}
.btn .icon{width:16px;height:16px}
.btn-sm{height:36px;padding:0 16px;gap:8px;font-size:11px}
.btn-sm .icon{width:14px;height:14px}
.btn-lg{height:56px;padding:0 40px;font-size:14px;letter-spacing:.16em}
.btn-block{display:flex;width:100%}
.btn-primary{background:var(--accent-seam);border-color:var(--accent-seam);color:var(--text-inverse)}
.btn-primary:hover,.btn-primary.is-hover{background:var(--accent-seam-light);border-color:var(--accent-seam-light)}
.btn-primary.is-pressed{background:var(--accent-seam-deep);border-color:var(--accent-seam-deep);color:var(--text-inverse)}
.btn-secondary{background:transparent;border-color:var(--bone-100);color:var(--text-primary)}
.btn-secondary:hover,.btn-secondary.is-hover{background:var(--bone-a06)}
.btn-secondary.is-pressed{background:var(--bone-a16)}
.btn-ghost{background:transparent;border-color:transparent;color:var(--text-secondary)}
.btn-ghost:hover,.btn-ghost.is-hover{background:var(--bone-a04);color:var(--text-primary)}
.btn-ghost.is-pressed{background:var(--bone-a10);color:var(--text-primary)}
.btn.is-focus,.btn:focus-visible{outline:none;box-shadow:0 0 0 2px var(--surface-base),0 0 0 4px var(--accent-seam-light)}
.btn.is-disabled,.btn:disabled{background:var(--surface-muted);border-color:var(--surface-muted);color:var(--text-muted);box-shadow:none;cursor:not-allowed}
.btn-secondary.is-disabled,.btn-secondary:disabled{background:transparent;border-color:var(--ash-700)}
.btn-ghost.is-disabled,.btn-ghost:disabled{background:transparent;border-color:transparent}
.btn.is-loading{cursor:progress}
.btn-primary.is-loading{background:var(--accent-seam-deep);border-color:var(--accent-seam-deep)}
.spinner{display:inline-block;flex:none;width:14px;height:14px;border-radius:50%;border:1.5px solid currentColor;border-right-color:transparent;animation:spin .9s linear infinite}
.spinner-lg{width:22px;height:22px;border-width:2px}
@keyframes spin{to{transform:rotate(360deg)}}
/* ---------- 6. Form fields ---------- */
.field{display:flex;flex-direction:column;gap:8px;min-width:0}
.field-label{display:flex;align-items:baseline;justify-content:space-between;gap:12px;font-family:var(--font-sans);font-weight:500;font-size:13px;line-height:1.3;color:var(--bone-100)}
.field-optional{font-weight:400;font-size:12px;color:var(--text-muted)}
.field-hint{font-size:12px;line-height:1.45;color:var(--text-secondary)}
.field-error{display:flex;align-items:center;gap:6px;font-size:12px;line-height:1.45;color:var(--status-returned)}
.field-error .icon{width:14px;height:14px}
.input,.textarea,.select{display:flex;align-items:center;width:100%;height:48px;padding:0 16px;gap:10px;background:var(--surface-raised);border:1px solid var(--border-subtle);border-radius:var(--r-xs);color:var(--text-primary);font-family:var(--font-sans);font-weight:400;font-size:15px;line-height:1.4;outline:none;-webkit-appearance:none;appearance:none}
.input::placeholder,.textarea::placeholder{color:var(--text-muted)}
.input-placeholder{color:var(--text-muted)}
.input:hover,.select:hover,.textarea:hover,.input.is-hover{border-color:var(--ash-500)}
.input:focus,.textarea:focus,.input.is-focus,.textarea.is-focus,.select.is-focus,.input-affix.is-focus{border-color:var(--accent-seam);box-shadow:var(--ring-gold)}
.input.is-error,.textarea.is-error,.select.is-error,.input-affix.is-error{border-color:var(--status-returned);box-shadow:var(--ring-returned)}
.input.is-disabled,.input:disabled,.textarea.is-disabled,.select.is-disabled,.input-affix.is-disabled{background:var(--surface-base);border-color:var(--ash-800);color:var(--text-muted);cursor:not-allowed}
.input-affix{display:flex;align-items:center;gap:10px;width:100%;height:48px;padding:0 6px 0 14px;background:var(--surface-raised);border:1px solid var(--border-subtle);border-radius:var(--r-xs);color:var(--text-secondary)}
.input-bare{flex:1;min-width:0;height:100%;border:0;background:transparent;outline:none;color:var(--text-primary);font-family:var(--font-sans);font-size:15px}
.input-bare::placeholder{color:var(--text-muted)}
/* ---------- 10. Tags, pills, badges ---------- */
.pill{display:inline-flex;align-items:center;gap:6px;flex:none;width:max-content;height:24px;padding:0 10px;border:1px solid var(--border-subtle);border-radius:999px;font-family:var(--font-sans);font-weight:500;font-size:11px;line-height:1;letter-spacing:.1em;text-transform:uppercase;color:var(--text-secondary);white-space:nowrap}
.pill .icon{width:12px;height:12px}
.pill-dot{flex:none;width:6px;height:6px;border-radius:50%;background:currentColor}
.pill-open{color:var(--status-open)}
.pill-review{color:var(--status-review);border-color:var(--gold-a40);background:var(--gold-a06)}
.pill-returned{color:var(--status-returned);border-color:var(--returned-a40);background:var(--returned-a08)}
.pill-approved{color:var(--status-approved);border-color:var(--sprout-a40);background:var(--sprout-a10)}
.pill-locked{color:var(--text-muted);border-color:var(--ash-800)}
.pill-overdue{color:var(--status-returned);border-color:var(--status-returned)}
.pill-new{color:var(--text-primary);border-color:var(--bone-a24)}
.pill-stage{color:var(--accent-seam-light);border-color:var(--accent-seam-deep);letter-spacing:.16em}
.pill-series{color:var(--bone-100);border-color:var(--ash-700);background:var(--surface-muted)}
.pill-public{color:var(--text-secondary);border-color:var(--ash-700)}
.pill-flag{color:var(--status-returned);border-color:var(--returned-a40)}
.pill-sm{height:20px;padding:0 8px;font-size:10px}
/* ---------- 14. Cards & stats ---------- */
.callout{display:flex;align-items:flex-start;gap:12px;padding:14px 16px;background:var(--surface-raised);border:1px solid var(--border-hair);border-radius:var(--r-sm);font-size:13px;line-height:1.55;color:var(--ash-100)}
.callout .icon{margin-top:2px;color:var(--text-secondary)}
.callout-title{display:block;font-weight:500;color:var(--text-primary)}
.callout-safety{box-shadow:inset 2px 0 0 var(--bone-100)}
.callout-review{background:var(--gold-a06);border-color:var(--gold-a24)}
.callout-review .icon{color:var(--status-review)}
.callout-returned{background:var(--returned-a08);border-color:var(--returned-a40)}
.callout-returned .icon{color:var(--status-returned)}
.callout-approved{background:var(--sprout-a10);border-color:var(--sprout-a40)}
.callout-approved .icon{color:var(--status-approved)}