/* app.css — hand-written classes for layout and no-JS disclosure controls.
   Tachyons (loaded first, via CDN) still does all "inside the box" styling
   (padding, colour, type); these classes own only structure/behaviour that
   atomic utilities cannot express. See CLAUDE.md "CSS - atomic skin plus
   named classes for layout/grid". */

/* ── Rename disclosure on the session detail page ──────────────────────────
   A pure HTML+CSS disclosure (label + hidden checkbox), NOT <details>, so that
   ONLY the caret toggles the form — not a whole clickable region. */

/* The checkbox holds open/closed state. Visually hidden but still in the DOM
   (focusable, screen-reader reachable) — off-screen rather than display:none. */
.rename-toggle {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* Title + caret share one baseline row. */
.title-line { display: flex; align-items: baseline; gap: .5rem; }

/* The caret is the sole toggle target. */
.rename-caret { cursor: pointer; user-select: none; }
.rename-caret::after { content: "\25B8"; }                 /* ▸ closed */
.rename-toggle:checked ~ .title-line .rename-caret::after { content: "\25BE"; } /* ▾ open */
/* focus-visible ring matches tachyons' dark-blue (#357edd) */
.rename-toggle:focus-visible ~ .title-line .rename-caret { outline: 2px solid #357edd; }

/* The revealed form: hidden until the caret's checkbox is checked. */
.rename-form { display: none; margin: .5rem 0 0; }
.rename-toggle:checked ~ .rename-form { display: block; }