/* ============================================================
   TOWN FILING DRAWER — homepage (content/index.njk)
   A-material system: charcoal folders, accent as label/edge/wash
   only. Loaded only where the drawer renders.
============================================================ */

/* Cross-document view-transition opt-in: the flying folder carries
   view-transition-name: town-folder; town pages that also opt in
   will morph in Chromium/Safari. Others get the GSAP flight. */
/* cross-doc view-transition opt-in REMOVED 2026-07-15: caused renderer
   freeze on arrival in Chrome (verified under automation). GSAP flight only. */


.td-kicker {
  margin: 0 0 0.35rem;
  font-family: "Space Mono", var(--mono, ui-monospace), monospace;
  font-size: 0.66rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(242, 239, 232, 0.55);
}

/* ── the drawer frame: double bezel ─────────────────────────── */
.td-drawer {
  position: relative;
  max-width: var(--container, 78rem);
  margin: 0 auto;
  border: 1px solid rgba(242, 239, 232, 0.10);
  border-radius: 18px;
  background: #0a2529;
  box-shadow: inset 0 1px 0 rgba(242, 239, 232, 0.07), 0 24px 70px rgba(0, 0, 0, 0.55);
  padding: clamp(0.55rem, 1.4vw, 0.85rem);
}
.td-drawer::after {              /* scoped grain */
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 18px;
  background: repeating-linear-gradient(0deg, transparent 0 2px, rgba(242, 239, 232, 0.015) 2px 3px);
  pointer-events: none;
}
.td-drawer-panel {
  border: 1px solid rgba(242, 239, 232, 0.10);
  border-radius: 12px;
  background:
    radial-gradient(120% 90% at 15% -10%, rgba(56, 204, 223, 0.05), transparent 55%),
    radial-gradient(110% 80% at 95% 110%, rgba(236, 85, 72, 0.04), transparent 60%),
    #06191c;
  box-shadow: inset 0 1px 0 rgba(242, 239, 232, 0.07);
  overflow: hidden;
}

/* ── bands ──────────────────────────────────────────────────── */
.td-band { position: relative; }
.td-band + .td-band { border-top: 1px solid rgba(242, 239, 232, 0.14); }
.td-band[data-accent="red"]  { --td-a: #ec5548; --td-a-text: #f4685c; --td-wash: rgba(236, 85, 72, 0.05); }
.td-band[data-accent="teal"] { --td-a: #38ccdf; --td-a-text: #38ccdf; --td-wash: rgba(56, 204, 223, 0.05); }

.td-band-toggle {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: flex-end;
  gap: 0.6rem;
  padding: 0.85rem clamp(1rem, 2.4vw, 1.6rem);
  background: none;
  border: 0;
  cursor: pointer;
  color: rgba(242, 239, 232, 0.72);
  font-family: "Space Mono", var(--mono, ui-monospace), monospace;
  font-size: 0.68rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  transition: color 0.35s cubic-bezier(0.32, 0.72, 0, 1);
}
.td-band-toggle:hover { color: #f2efe8; }
.td-band-toggle:focus-visible {
  outline: 2px solid var(--td-a);
  outline-offset: -2px;
  border-radius: 8px;
  color: #f2efe8;
}
.td-band-caption::before {
  content: "";
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-right: 0.6rem;
  border-radius: 50%;
  background: var(--td-a);
  vertical-align: 1px;
}
.td-chev {
  flex: none;
  transition: transform 0.5s cubic-bezier(0.32, 0.72, 0, 1);
}
html:not(.td-armed) .td-chev { display: none; }   /* button is inert without JS */
.td-band:not(.is-open) .td-chev { transform: rotate(-90deg); }

/* fold — hidden state gates behind html.td-armed (no-JS = expanded) */
html.td-armed .td-fold {
  display: grid;
  grid-template-rows: 1fr;
  transition: grid-template-rows 0.55s cubic-bezier(0.32, 0.72, 0, 1);
}
html.td-armed .td-band:not(.is-open) .td-fold { grid-template-rows: 0fr; }
html.td-armed .td-fold-inner { overflow: hidden; min-height: 0; }
/* RM block removed — owner decision 2026-07-16 */

.td-fold-inner { padding: 0 clamp(1rem, 2.4vw, 1.6rem); }

.td-desc {
  margin: 0 0 1.9rem;
  max-width: 52ch;
  font-family: "Space Mono", var(--mono, ui-monospace), monospace;
  font-size: 0.72rem;
  line-height: 1.75;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgba(242, 239, 232, 0.55);
}

/* ── the rack: drawer lip the folders sit behind ────────────── */
.td-rack {
  border-top: 1px solid rgba(242, 239, 232, 0.10);
  margin-top: 2.1rem;
  padding-bottom: 1.5rem;
}
.td-folders {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 0 0.9rem;
  margin-top: -1.35rem;          /* tabs overlap the lip above */
}

/* ── folder tab + body ──────────────────────────────────────── */
.td-folder {
  position: relative;
  display: block;
  flex: 1 1 150px;
  max-width: 226px;
  min-width: 148px;
  text-decoration: none;
  transition: transform 0.5s cubic-bezier(0.32, 0.72, 0, 1);
  will-change: transform;
}
.td-folder:hover { transform: translateY(-5px); }
.td-folder:focus-visible {
  outline: 2px solid var(--td-a);
  outline-offset: 4px;
  border-radius: 12px;
}

.td-tab {
  position: relative;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  max-width: calc(100% - 1rem);
  height: 2.35rem;
  margin-left: 0.6rem;
  margin-bottom: -1px;
  padding: 0 0.85rem;
  background: #183a35;
  border: 1px solid rgba(242, 239, 232, 0.14);
  border-bottom: none;
  border-radius: 10px 12px 0 0;
  box-shadow: inset 0 2px 0 var(--td-a);      /* 2px accent top edge */
  font-family: "Fraunces", var(--display, Georgia), serif;
  font-size: 0.92rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--td-a-text);
  white-space: nowrap;
}
.td-tab-label { overflow: visible; text-overflow: clip; }
/* curved shoulders — quarter-circle flares at the tab base */
.td-tab::before,
.td-tab::after {
  content: "";
  position: absolute;
  bottom: 0;
  width: 11px;
  height: 11px;
}
.td-tab::before {
  left: -11px;
  background: radial-gradient(circle at 0 0, transparent 10.5px, #183a35 11px);
}
.td-tab::after {
  right: -11px;
  background: radial-gradient(circle at 100% 0, transparent 10.5px, #183a35 11px);
}

.td-body {
  position: relative;
  z-index: 1;
  display: block;
  min-height: 5.4rem;
  padding: 0.85rem 1rem 0.9rem;
  background:
    linear-gradient(180deg, var(--td-wash), rgba(0, 0, 0, 0) 62%),
    linear-gradient(180deg, #183a35, #0e3034);
  border: 1px solid rgba(242, 239, 232, 0.10);
  border-radius: 12px;
  box-shadow: inset 0 1px 0 rgba(242, 239, 232, 0.07), 0 14px 34px rgba(0, 0, 0, 0.35);
}
.td-folder:hover .td-body { border-color: rgba(242, 239, 232, 0.14); }

.td-meta {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  font-family: "Space Mono", var(--mono, ui-monospace), monospace;
  font-size: 0.62rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(242, 239, 232, 0.72);
}
.td-flag { color: var(--td-a-text); }
.td-status, .td-upd { color: rgba(242, 239, 232, 0.55); }

.td-open-hint {
  display: block;
  margin-top: 0.55rem;
  font-family: "Space Mono", var(--mono, ui-monospace), monospace;
  font-size: 0.6rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(242, 239, 232, 0.35);
  opacity: 0;
  transform: translateY(3px);
  transition: opacity 0.35s cubic-bezier(0.32, 0.72, 0, 1), transform 0.35s cubic-bezier(0.32, 0.72, 0, 1);
}
.td-folder:hover .td-open-hint,
.td-folder:focus-visible .td-open-hint { opacity: 1; transform: none; color: var(--td-a-text); }

/* ── the extraction clone (fixed, mid-flight) ───────────────── */
.td-flying {
  pointer-events: none;
  transform-origin: 50% 50%;
}
.td-flying,
.td-flying:hover { transition: none; }
.td-flying .td-body { box-shadow: inset 0 1px 0 rgba(242, 239, 232, 0.07), 0 24px 70px rgba(0, 0, 0, 0.55); }
.td-flying .td-open-hint { opacity: 0; }
/* clones inherit band accent vars from the band they left — re-pin
   both accents on the clone via data attr copied with cloneNode:
   the clone sits on <body>, outside its band, so defaults apply. */
.td-flying { --td-a: #ec5548; --td-a-text: #f4685c; --td-wash: rgba(236, 85, 72, 0.05); }
.td-flying[data-td-accent="teal"] { --td-a: #38ccdf; --td-a-text: #38ccdf; --td-wash: rgba(56, 204, 223, 0.05); }

/* ── reduced motion: no lift, no flight, no fold animation ──── */
/* RM block removed — owner decision 2026-07-16 */

/* ── mobile ≤640px: 2-up tabs, stacked bands ────────────────── */
@media (max-width: 640px) {
  .td-folders {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.1rem 0.7rem;
    margin-top: -1.2rem;
  }
  .td-folder { max-width: none; min-width: 0; }
  .td-tab {
    max-width: calc(100% - 1.4rem);
    margin-left: 0.6rem;
    height: 2.1rem;
    padding: 0 0.75rem;
    font-size: 0.88rem;
  }
  .td-body { min-height: 5rem; padding: 0.7rem 0.75rem 0.8rem; }
  .td-desc { font-size: 0.66rem; }
  .td-band-toggle { padding: 0.75rem 1rem; }
  .td-fold-inner { padding: 0 1rem; }
}

@media (max-width: 440px) {
  .td-folders { grid-template-columns: 1fr; }
  .td-tab { max-width: calc(100% - 1.4rem); }
}

/* forced-colors: keep folder boundaries visible */
@media (forced-colors: active) {
  .td-tab, .td-body { border: 1px solid CanvasText; box-shadow: none; }
}


/* ── post-verify fixes 2026-07-15 ─────────────────────────────── */
/* folded bands leave the tab order (keyboard trap fix) */
html.td-armed .td-band:not(.is-open) .td-fold-inner {
  visibility: hidden;
  transition: visibility 0s 0.55s;
}
html.td-armed .td-band.is-open .td-fold-inner {
  visibility: visible;
  transition: visibility 0s;
}
/* mobile: full town names — Plymouth vs Plympton must be distinguishable */
@media (max-width: 640px) {
  .td-tab-label {
    font-size: 0.92rem;
    letter-spacing: 0;
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    line-height: 1.15;
  }
}