/* ════════════════════════════════════════════════════════════════
   THE TABLE — Hand-drawn paper notes.
   Matches the Quadrant aesthetic — paper cream, ink, hand-drawn fonts,
   sharp edges with offset shadow. Single feed, no sections.
   Scoped to .thetable-root so it lifts cleanly into MyCroquet.
   ════════════════════════════════════════════════════════════════ */

.thetable-root {
  /* Paper + ink (lifted from Quadrant) */
  --paper:        #f4eedb;
  --paper-deep:   #ece4cc;
  --paper-edge:   #d8cea9;
  --paper-card:   #fffae8;
  --ink:          #1a1612;
  --ink-soft:     #4d423a;
  --ink-faint:    #847565;
  --ink-line:     #2c241d;
  --accent:       #ad4f52;   /* alarm-pen red */
  --tag-cream:    #e9dcad;   /* manila tag */

  /* Aim ink (six aims, one ink each) */
  --aim-1: #73182C;
  --aim-2: #c2410c;
  --aim-3: #16a34a;
  --aim-4: #2563eb;
  --aim-5: #0d9488;
  --aim-6: #7c3aed;

  --font-display: 'Bricolage Grotesque', Georgia, serif;
  --font-body:    'Source Serif 4', 'Iowan Old Style', Georgia, serif;
  --font-hand:    'Caveat', 'Marker Felt', cursive;

  --ease-paper:   cubic-bezier(0.65, 0, 0.35, 1);

  font-family: var(--font-body);
  color: var(--ink);
  background: var(--paper);
  min-height: 100vh;
  position: relative;
  letter-spacing: -0.005em;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

/* ── Paper texture: warm vignette + noise ── */
.thetable-root::before {
  content: '';
  position: fixed; inset: 0; pointer-events: none; z-index: 0;
  background:
    radial-gradient(ellipse 70% 50% at 30% 20%, rgba(255,243,210,0.55), transparent 60%),
    radial-gradient(ellipse 90% 80% at 70% 110%, rgba(180,150,90,0.18), transparent 60%),
    linear-gradient(180deg, var(--paper) 0%, var(--paper-deep) 100%);
}
.thetable-root::after {
  content: '';
  position: fixed; inset: 0; pointer-events: none; z-index: 0;
  background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.18 0 0 0 0 0.13 0 0 0 0 0.08 0 0 0 0.55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity: 0.18;
  mix-blend-mode: multiply;
}
.thetable-root > * { position: relative; z-index: 1; }

/* ── Header ── */
.tt-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.6rem 0.85rem;
  flex-wrap: wrap;
  border-bottom: 1px dashed rgba(26,22,18,0.18);
}
.tt-brand {
  display: flex;
  align-items: baseline;
  gap: 0.7rem;
  flex-wrap: wrap;
}
.tt-brand h1 {
  font-family: var(--font-display);
  font-size: 1.85rem;
  font-weight: 700;
  font-style: italic;
  font-variation-settings: 'opsz' 96;
  letter-spacing: -0.025em;
  color: var(--ink);
}
.tt-brand .sub {
  font-family: var(--font-hand);
  font-size: 1.1rem;
  color: var(--ink-soft);
  transform: rotate(-1.5deg);
  display: inline-block;
  line-height: 1;
}

/* Manila room-tag */
.tt-room-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.35rem 0.75rem 0.35rem 0.6rem;
  font-family: var(--font-body);
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--ink);
  background: var(--tag-cream);
  border: 1.5px solid var(--ink);
  border-radius: 2px;
  box-shadow: 2px 2px 0 rgba(26,22,18,0.5);
}
.tt-room-pill .lbl {
  font-family: var(--font-hand);
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--ink-soft);
}
.tt-who {
  font-family: var(--font-hand);
  font-size: 1.15rem;
  color: var(--ink-soft);
}
.tt-who b { color: var(--ink); font-weight: 700; }

/* Build version stamp — tiny, hand-script, low contrast */
.tt-version {
  font-family: var(--font-hand);
  font-size: 0.95rem;
  color: var(--ink-faint);
  opacity: 0.7;
  transform: rotate(-1.5deg);
  display: inline-block;
}
.tt-landing-version {
  font-family: var(--font-hand);
  font-size: 0.9rem;
  color: var(--ink-faint);
  opacity: 0.6;
  margin-top: -1.5rem;
  margin-bottom: 1.5rem;
}

/* ── Post box ── */
/* Two states:
   - collapsed (default): only the pill is visible, leaving the table un-obstructed.
   - open: composer overlays the canvas without pushing it down.
   .is-open is toggled by app.js when the pill is clicked / after post() resolves. */
.tt-post {
  max-width: 760px;
  margin: 1.4rem auto 0.8rem;
  padding: 0 1.4rem;
  text-align: center;
  position: relative;
  z-index: 30;
}

/* Collapsed pill — small inline trigger */
.tt-post-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.4rem 1.05rem 0.4rem 0.75rem;
  background: rgba(255, 250, 232, 0.92);
  border: 1.5px solid var(--ink);
  border-radius: 999px;
  box-shadow: 2px 2px 0 var(--ink);
  cursor: pointer;
  font: inherit;
  font-family: var(--font-display);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink);
  transition: all 0.12s var(--ease-paper);
}
.tt-post-pill:hover  { transform: translate(-1px, -1px); box-shadow: 3px 3px 0 var(--ink); }
.tt-post-pill:active { transform: translate(1px, 1px); box-shadow: 1px 1px 0 var(--ink); }
.tt-post-pill .tt-pill-mic {
  width: 18px;
  height: 18px;
  fill: var(--ink-soft);
  transition: fill 0.12s var(--ease-paper);
}
.tt-post-pill:hover .tt-pill-mic { fill: var(--accent); }

/* Composer — hidden by default, overlays canvas when open */
.tt-post-card {
  display: none;
  text-align: left;
  background: rgba(255, 250, 232, 0.96);
  border: 2px solid var(--ink);
  border-radius: 2px;
  padding: 0.95rem 1.05rem 0.9rem;
  box-shadow: 4px 4px 0 var(--ink);
}
.tt-post.is-open .tt-post-pill { visibility: hidden; }   /* keep flow space stable */
.tt-post.is-open .tt-post-card {
  display: block;
  position: absolute;
  top: 0;
  left: 1.4rem;
  right: 1.4rem;
  z-index: 31;
  animation: postExpand 0.16s var(--ease-paper);
}
@keyframes postExpand {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.tt-textarea {
  width: 100%;
  border: none;
  outline: none;
  resize: none;
  background: transparent;
  font: inherit;
  font-family: var(--font-body);
  font-size: 1.05rem;
  line-height: 1.5;
  color: var(--ink);
  min-height: 2.7rem;
  padding: 0.25rem 0;
}
.tt-textarea::placeholder {
  color: var(--ink-faint);
  font-style: italic;
}
.tt-post-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 0.55rem;
  gap: 0.8rem;
}
.tt-hint {
  font-family: var(--font-hand);
  font-size: 1rem;
  color: var(--ink-faint);
}
.tt-hint kbd {
  background: var(--paper-deep);
  border: 1px solid var(--ink-line);
  border-radius: 3px;
  padding: 1px 5px;
  font: inherit;
  font-family: var(--font-body);
  font-size: 0.78rem;
  color: var(--ink);
}
.tt-post-buttons {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.tt-btn {
  font: inherit;
  font-family: var(--font-display);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  background: var(--ink);
  color: var(--paper);
  border: 2px solid var(--ink);
  border-radius: 2px;
  padding: 0.45rem 1.05rem;
  cursor: pointer;
  box-shadow: 3px 3px 0 var(--accent);
  transition: all 0.12s var(--ease-paper);
}
.tt-btn:hover  { transform: translate(-1px, -1px); box-shadow: 4px 4px 0 var(--accent); }
.tt-btn:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--accent); }
.tt-btn:disabled { opacity: 0.4; cursor: not-allowed; transform: none; box-shadow: 3px 3px 0 var(--accent); }

/* Voice mic button — small round ink button */
#voice-btn.vtt-btn {
  width: 38px;
  height: 38px;
  border: 1.5px solid var(--ink);
  border-radius: 50%;
  background: var(--paper);
  color: var(--ink-soft);
  box-shadow: 2px 2px 0 var(--ink);
  transition: all 0.12s var(--ease-paper);
}
#voice-btn.vtt-btn:hover  { transform: translate(-1px, -1px); box-shadow: 3px 3px 0 var(--ink); color: var(--ink); }
#voice-btn.vtt-btn:active { transform: translate(1px, 1px); box-shadow: 1px 1px 0 var(--ink); }
#voice-btn.vtt-btn.vtt-recording {
  background: #fef2f2;
  border-color: var(--accent);
  color: var(--accent);
}
#voice-interim:not(:empty) {
  margin-top: 0.45rem;
  border-radius: 2px;
  border: 1.5px dashed var(--accent);
  font-family: var(--font-body);
}

/* ── Canvas (spatial table) ── */
.tt-canvas {
  position: relative;
  width: 100%;
  min-height: calc(100vh - 240px);
  margin: 0;
  padding: 0;
  overflow: hidden;
  touch-action: none;       /* let pointer events drive drag, not browser scroll */
}
.tt-canvas .tt-empty {
  position: absolute;
  top: 40%;
  left: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
}
.tt-card {
  position: absolute;
  width: 240px;
  background: var(--paper-card);
  border: 1.5px solid var(--ink);
  border-radius: 2px;
  padding: 0.8rem 0.95rem 0.75rem;
  box-shadow: 3px 3px 0 var(--ink);
  cursor: grab;
  transition: box-shadow 0.15s var(--ease-paper);
  user-select: none;
  -webkit-user-select: none;
  /* per-card rotation set inline by JS via --rot */
  transform: rotate(var(--rot, 0deg));
  will-change: transform;
}
.tt-card.dragging {
  cursor: grabbing;
  box-shadow: 6px 6px 0 var(--ink);
  z-index: 9999;
  transition: none;
}

/* ── @mention attention signal (per-viewer) ──
   When a card mentions the current viewer, it breathes slowly until they
   open it (clicking the card marks it seen via localStorage). After the
   pulse stops, a thin accent stripe on the left edge persists for 24h so
   they can still scan the canvas for "what I was tagged on this week".
   Visibility is computed client-side from each viewer's identity — Wade's
   mentions don't pulse for Marilyn.
   The pulse composes with the per-card rotation so cards still sit at
   their tilted angle while breathing. */
@keyframes ttMentionPulse {
  0%, 100% { transform: rotate(var(--rot, 0deg)) scale(1);    }
  50%      { transform: rotate(var(--rot, 0deg)) scale(1.025); }
}
.tt-card.tt-mentioned-unseen {
  animation: ttMentionPulse 4s var(--ease-paper) infinite;
}
.tt-card.tt-mentioned-unseen::before,
.tt-card.tt-mentioned-recent::before {
  content: '';
  position: absolute;
  left: -1.5px;
  top: -1.5px;
  bottom: -1.5px;
  width: 5px;
  background: var(--accent);
  border-radius: 2px 0 0 2px;
  pointer-events: none;
}
/* Drag wins — never fight the user's pointer with a pulse */
.tt-card.dragging.tt-mentioned-unseen { animation: none; }

/* Per-author card tints — match the pen colour for each author.
   Wade=black has no tint; his cards keep the default --paper-card cream
   so the baseline-card look stays as "Wade's table". */
.tt-card[data-color="terracotta"] {  /* CroquetClaude */
  background: #f5e4dd;
  border-color: #7a3535;
  box-shadow: 3px 3px 0 #7a3535;
}
.tt-card[data-color="terracotta"].dragging {
  box-shadow: 6px 6px 0 #7a3535;
}
.tt-card[data-color="blue"] {  /* John */
  background: #e3edf9;
  border-color: #1d4ed8;
  box-shadow: 3px 3px 0 #1d4ed8;
}
.tt-card[data-color="blue"].dragging {
  box-shadow: 6px 6px 0 #1d4ed8;
}
.tt-card[data-color="green"] {  /* Marilyn */
  background: #e3eedc;
  border-color: #15803d;
  box-shadow: 3px 3px 0 #15803d;
}
.tt-card[data-color="green"].dragging {
  box-shadow: 6px 6px 0 #15803d;
}
/* Card content layout: heading (title-line) up top, body (secondary
   sentences) smaller and lighter, meta+aims+replies all at the bottom. */
.tt-card-heading {
  font-family: var(--font-body);
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--ink);
  white-space: pre-wrap;
  word-wrap: break-word;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-bottom: 0.3rem;
  letter-spacing: -0.005em;
}
.tt-card-body {
  font-family: var(--font-body);
  font-size: 0.86rem;
  line-height: 1.42;
  color: var(--ink-soft);
  white-space: pre-wrap;
  word-wrap: break-word;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.tt-card-author {
  color: var(--ink);
  font-weight: 700;
  font-size: 0.9rem;
  font-family: var(--font-hand);
}
.tt-card-author[data-author="wade"]           { color: #1a1612; }   /* black ink */
.tt-card-author[data-author="john"]           { color: #1d4ed8; }   /* blue */
.tt-card-author[data-author="marilyn"]        { color: #15803d; }   /* green */
.tt-card-author[data-author="croquetclaude"]  { color: #ad4f52; }   /* terracotta */
.tt-card-author[data-author="claude"]         { color: #ad4f52; }   /* terracotta — same identity, short form */
.tt-card-time {
  font-family: var(--font-hand);
  font-size: 0.88rem;
  color: var(--ink-faint);
}
.tt-card-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-top: 0.6rem;
  padding-top: 0.45rem;
  border-top: 1px dashed rgba(26,22,18,0.14);
}
.tt-card-foot-left,
.tt-card-foot-right {
  display: flex;
  align-items: center;
  gap: 0.45rem;
}
.tt-aims {
  display: flex;
  gap: 5px;
}
.tt-aim-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  display: inline-block;
  border: 1px solid var(--ink);
}
.tt-aim-dot[data-aim="1-strengthen-admin"]   { background: var(--aim-1); }
.tt-aim-dot[data-aim="2-promote-externally"] { background: var(--aim-2); }
.tt-aim-dot[data-aim="3-grow-members"]       { background: var(--aim-3); }
.tt-aim-dot[data-aim="4-support-clubs"]      { background: var(--aim-4); }
.tt-aim-dot[data-aim="5-develop-play"]       { background: var(--aim-5); }
.tt-aim-dot[data-aim="6-innovate"]           { background: var(--aim-6); }
.tt-replies {
  font-family: var(--font-hand);
  font-size: 0.95rem;
  color: var(--ink-faint);
  display: inline-flex;
  align-items: center;
  gap: 3px;
}

.tt-empty {
  font-family: var(--font-hand);
  font-size: 1.2rem;
  color: var(--ink-faint);
  text-align: center;
  padding: 1.4rem 0.4rem;
  opacity: 0.8;
}

/* ── Landing page ── */
.tt-landing {
  max-width: 560px;
  margin: 6rem auto 0;
  padding: 0 1.4rem;
  text-align: center;
}
.tt-landing h1 {
  font-family: var(--font-display);
  font-size: 3.4rem;
  font-weight: 700;
  font-style: italic;
  font-variation-settings: 'opsz' 96;
  letter-spacing: -0.025em;
  color: var(--ink);
  margin-bottom: 0.3rem;
}
.tt-landing .tagline {
  font-family: var(--font-hand);
  font-size: 1.4rem;
  color: var(--ink-soft);
  margin-bottom: 2.5rem;
  transform: rotate(-1deg);
  display: inline-block;
}
.tt-landing-actions {
  display: grid;
  gap: 1.2rem;
  margin-top: 2rem;
  text-align: left;
}
.tt-landing-action {
  background: rgba(255, 250, 232, 0.92);
  border: 2px solid var(--ink);
  border-radius: 2px;
  padding: 1.3rem 1.4rem;
  box-shadow: 4px 4px 0 var(--ink);
}
.tt-landing-action h2 {
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 700;
  font-style: italic;
  font-variation-settings: 'opsz' 96;
  margin-bottom: 0.45rem;
  color: var(--ink);
}
.tt-landing-action p {
  font-family: var(--font-body);
  font-size: 0.97rem;
  color: var(--ink-soft);
  margin-bottom: 1rem;
}
.tt-input {
  width: 100%;
  border: 2px solid var(--ink);
  border-radius: 2px;
  background: rgba(255, 250, 232, 0.85);
  padding: 0.55rem 0.8rem;
  font: inherit;
  font-family: var(--font-body);
  font-size: 1rem;
  outline: none;
  box-shadow: 3px 3px 0 var(--ink);
  transition: all 0.12s var(--ease-paper);
}
.tt-input:focus {
  background: var(--paper-card);
  box-shadow: 4px 4px 0 var(--accent);
  border-color: var(--accent);
  transform: translate(-1px, -1px);
}
.tt-landing-action .row {
  display: flex;
  gap: 0.7rem;
  align-items: stretch;
}
.tt-landing-action .row .tt-input { flex: 1; }
.tt-landing-action .row .tt-btn { white-space: nowrap; }

/* ── Detail drawer ── */
.tt-drawer {
  position: fixed;
  top: 0;
  right: 0;
  width: 420px;
  max-width: 90vw;
  height: 100vh;
  background: var(--paper-card);
  border-left: 2px solid var(--ink);
  box-shadow: -6px 0 0 var(--ink), -8px 0 24px rgba(26,22,18,0.18);
  z-index: 50;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  animation: drawerSlide 0.18s var(--ease-paper);
}
/* Restore [hidden] semantics — our display:flex above overrides the browser default */
.tt-drawer[hidden] { display: none; }
@keyframes drawerSlide {
  from { transform: translateX(100%); }
  to   { transform: translateX(0); }
}
.tt-drawer-close {
  position: absolute;
  top: 0.5rem;
  right: 0.6rem;
  width: 30px;
  height: 30px;
  border: 1.5px solid var(--ink);
  background: var(--paper);
  border-radius: 50%;
  font: inherit;
  font-family: var(--font-display);
  font-size: 1.1rem;
  line-height: 1;
  color: var(--ink);
  cursor: pointer;
  box-shadow: 2px 2px 0 var(--ink);
  transition: all 0.12s var(--ease-paper);
}
.tt-drawer-close:hover  { transform: translate(-1px, -1px); box-shadow: 3px 3px 0 var(--ink); }
.tt-drawer-close:active { transform: translate(1px, 1px); box-shadow: 0 0 0 var(--ink); }

.tt-drawer-card {
  padding: 2.1rem 1.4rem 1.1rem;
  border-bottom: 1.5px dashed rgba(26,22,18,0.18);
}
.tt-drawer-meta {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 0.55rem;
}
.tt-drawer-time {
  font-family: var(--font-hand);
  font-size: 1rem;
  color: var(--ink-faint);
}
.tt-drawer-heading {
  font-family: var(--font-body);
  font-size: 1.45rem;
  font-weight: 700;
  line-height: 1.25;
  color: var(--ink);
  letter-spacing: -0.01em;
  margin-bottom: 0.5rem;
  white-space: pre-wrap;
  word-wrap: break-word;
}
.tt-drawer-heading:empty { display: none; }
.tt-drawer-body {
  font-family: var(--font-body);
  font-size: 0.98rem;
  line-height: 1.55;
  color: var(--ink-soft);
  white-space: pre-wrap;
  word-wrap: break-word;
}
.tt-drawer-body:empty { display: none; }
.tt-drawer-aims {
  margin-top: 0.85rem;
  display: flex;
  gap: 6px;
}
.tt-drawer-actions {
  margin-top: 0.85rem;
  display: flex;
  gap: 0.5rem;
}
.tt-btn-done {
  font-size: 0.72rem;
  padding: 0.28rem 0.7rem;
  background: transparent;
  color: var(--ink-faint);
  border-color: var(--paper-edge);
  box-shadow: 2px 2px 0 var(--paper-edge);
}
.tt-btn-done:hover {
  border-color: var(--ink);
  color: var(--ink);
  box-shadow: 3px 3px 0 var(--ink);
  transform: none;
}
.tt-drawer-aims .tt-aim-dot {
  width: 11px;
  height: 11px;
}

.tt-drawer-replies {
  display: block;
  padding: 0.9rem 1.4rem 1rem;
}
.tt-drawer-replies h3 {
  font-family: var(--font-display);
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: 0.6rem;
}
.tt-replies-list {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}
.tt-reply {
  font-family: var(--font-body);
}
.tt-reply-meta {
  display: flex;
  gap: 0.5rem;
  align-items: baseline;
  margin-bottom: 0.15rem;
  font-family: var(--font-hand);
  font-size: 0.95rem;
  color: var(--ink-faint);
}
.tt-reply-meta .tt-card-author {
  font-size: 1rem;
  font-weight: 700;
}
.tt-reply-body {
  font-size: 0.97rem;
  line-height: 1.45;
  color: var(--ink);
  white-space: pre-wrap;
}
.tt-replies-list .tt-empty {
  position: static;
  transform: none;
  pointer-events: auto;
  font-size: 1rem;
}
.tt-reply-input {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-top: 0.7rem;
}
.tt-reply-input textarea {
  width: 100%;
  border: 1.5px solid var(--ink);
  border-radius: 2px;
  background: rgba(255,250,232,0.7);
  padding: 0.5rem 0.7rem;
  font: inherit;
  font-family: var(--font-body);
  font-size: 0.97rem;
  outline: none;
  resize: vertical;
  box-shadow: 2px 2px 0 var(--ink);
}
.tt-reply-input textarea:focus {
  border-color: var(--accent);
  box-shadow: 3px 3px 0 var(--accent);
}
.tt-reply-input .tt-btn {
  align-self: flex-end;
}

/* ── Done pile button (fixed corner) ── */
.tt-pile-btn {
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
  z-index: 40;
  font: inherit;
  font-family: var(--font-hand);
  font-size: 1rem;
  background: var(--paper-deep);
  border: 1.5px solid var(--ink);
  border-radius: 2px;
  padding: 0.35rem 0.85rem;
  box-shadow: 3px 3px 0 var(--ink);
  cursor: pointer;
  color: var(--ink-soft);
  transition: all 0.12s var(--ease-paper);
}
.tt-pile-btn:hover  { transform: translate(-1px, -1px); box-shadow: 4px 4px 0 var(--ink); }
.tt-pile-btn:active { transform: translate(1px, 1px); box-shadow: 1px 1px 0 var(--ink); }
.tt-pile-btn--empty { opacity: 0.45; }
.tt-pile-btn--armed {
  /* Card-being-dragged is over this button. Visual cue: invert + lift. */
  background: var(--accent);
  color: var(--paper-card);
  border-color: var(--ink);
  box-shadow: 5px 5px 0 var(--ink);
  transform: translate(-2px, -2px);
  opacity: 1;
}
.tt-pile-n {
  font-weight: 700;
  color: var(--ink);
  font-family: var(--font-display);
}
.tt-pile-n:empty { display: none; }

/* ── Done pile drawer (slides in from left) ── */
.tt-pile-drawer {
  position: fixed;
  top: 0;
  left: 0;
  width: 380px;
  max-width: 90vw;
  height: 100vh;
  background: var(--paper-card);
  border-right: 2px solid var(--ink);
  box-shadow: 6px 0 0 var(--ink), 8px 0 24px rgba(26,22,18,0.13);
  z-index: 50;
  display: flex;
  flex-direction: column;
  animation: pileSlide 0.18s var(--ease-paper);
  overflow: hidden;
}
.tt-pile-drawer[hidden] { display: none; }
@keyframes pileSlide {
  from { transform: translateX(-100%); }
  to   { transform: translateX(0); }
}
.tt-pile-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.4rem 0.85rem;
  border-bottom: 1.5px dashed rgba(26,22,18,0.18);
  flex-shrink: 0;
}
.tt-pile-header h2 {
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 700;
  font-style: italic;
  font-variation-settings: 'opsz' 96;
  color: var(--ink);
}
.tt-pile-list {
  flex: 1;
  overflow-y: auto;
  padding: 0.75rem 1.4rem 1.4rem;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}
.tt-pile-item {
  border: 1.5px solid var(--paper-edge);
  border-radius: 2px;
  padding: 0.6rem 0.8rem;
  background: var(--paper);
}
.tt-pile-meta {
  display: flex;
  align-items: baseline;
  gap: 0.45rem;
  margin-bottom: 0.18rem;
  font-family: var(--font-hand);
  font-size: 0.95rem;
  color: var(--ink-faint);
}
.tt-pile-meta .tt-card-author { font-size: 1rem; }
.tt-pile-meta .spacer { flex: 1; }
.tt-pile-body {
  font-family: var(--font-body);
  font-size: 0.9rem;
  color: var(--ink-soft);
  line-height: 1.4;
  white-space: pre-wrap;
  word-wrap: break-word;
}
.tt-restore-btn {
  font: inherit;
  font-family: var(--font-hand);
  font-size: 0.82rem;
  background: transparent;
  border: 1px solid var(--paper-edge);
  border-radius: 2px;
  padding: 1px 7px;
  color: var(--ink-soft);
  cursor: pointer;
  flex-shrink: 0;
  transition: all 0.1s;
}
.tt-restore-btn:hover { border-color: var(--ink); color: var(--ink); }

/* ── Toast ── */
.tt-toast {
  position: fixed;
  bottom: 1.5rem;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: var(--ink);
  color: var(--paper);
  padding: 0.55rem 1rem;
  border-radius: 2px;
  font-family: var(--font-display);
  font-size: 0.85rem;
  letter-spacing: 0.04em;
  border: 1.5px solid var(--ink);
  opacity: 0;
  transition: opacity 0.2s ease, transform 0.2s ease;
  pointer-events: none;
  z-index: 200;
}
.tt-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ── Name modal ── */
.tt-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(26, 22, 18, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
}
.tt-modal {
  background: var(--paper-card);
  border: 2px solid var(--ink);
  border-radius: 2px;
  padding: 1.5rem 1.7rem;
  max-width: 380px;
  width: 90%;
  box-shadow: 6px 6px 0 var(--ink);
}
.tt-modal h2 {
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: 700;
  font-style: italic;
  font-variation-settings: 'opsz' 96;
  margin-bottom: 0.4rem;
  color: var(--ink);
}
.tt-modal p {
  font-family: var(--font-body);
  color: var(--ink-soft);
  font-size: 0.95rem;
  margin-bottom: 1rem;
}
.tt-modal .actions {
  display: flex;
  gap: 0.6rem;
  margin-top: 1rem;
  justify-content: flex-end;
}

/* ── Mobile ── */
/* Mobile is intentionally stripped: one big record button + a vertical list of notes.
   The desktop spatial canvas (absolute-positioned cards with rotation) collapses to
   a flex column. Drag still writes x/y to PB silently but has no visible effect. */
@media (max-width: 720px) {
  .tt-header { padding: 0.85rem 1rem 0.7rem; }
  .tt-brand h1 { font-size: 1.55rem; }
  .tt-post, .tt-feed { padding: 0 1rem; }
  .tt-landing { margin-top: 3.5rem; }
  .tt-landing h1 { font-size: 2.6rem; }

  /* Collapsed pill -> large circular mic-only button */
  .tt-post-pill {
    width: 64px;
    height: 64px;
    padding: 0;
    border-radius: 50%;
    justify-content: center;
    gap: 0;
    box-shadow: 3px 3px 0 var(--ink);
  }
  .tt-post-pill .tt-pill-label { display: none; }
  .tt-post-pill .tt-pill-mic {
    width: 28px;
    height: 28px;
    fill: var(--ink);
  }

  /* Canvas becomes a vertical list */
  .tt-canvas {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    padding: 0 1rem 1.4rem;
    min-height: auto;
    overflow: visible;
    touch-action: auto;
  }
  .tt-card {
    position: static;
    width: 100%;
    transform: none !important;       /* override inline --rot */
    cursor: pointer;
    box-shadow: 3px 3px 0 var(--ink);
  }
  .tt-card.dragging { transform: none !important; }
  .tt-card-body { -webkit-line-clamp: unset; }
  /* Mobile is a static list — pulsing a non-rotated rectangle looks naff.
     Keep the edge stripe so the mention is still findable on scroll. */
  .tt-card.tt-mentioned-unseen { animation: none; }
  .tt-canvas .tt-empty {
    position: static;
    transform: none;
    margin: 2rem auto;
  }

  /* Open composer fits the narrow viewport */
  .tt-post.is-open .tt-post-card {
    left: 1rem;
    right: 1rem;
  }
}