/* =====================================================================
   The Trailhead — kiosk landing page
   Extends style.css + grove.css's palette. No new hex values beyond the
   existing --wood/--cork-*/--parch/--loam/--clay/--creek tokens already in
   style.css. See redesign/MASTER_PLAN.md §2-4, §6-7.
   ===================================================================== */

/* ---------- Intro (kiosk header, PART 2 §6: bigger title, one-line sub) ---------- */
.th-intro{margin-bottom:1.2rem;}
.th-intro .board-title{font-size:clamp(2.1rem,6vw,3rem);}
.th-intro .board-lead{max-width:56ch;margin-bottom:0;}

/* ---------- The kiosk frame (wood) ---------- */
.kiosk{
  border:16px solid var(--wood);
  border-radius:14px;
  background:linear-gradient(125deg,var(--wood-light),var(--wood) 40%,var(--wood-dark));
  box-shadow:
    0 2px 0 #00000022 inset,
    0 20px 44px rgba(40,25,8,.38);
  padding:14px;
  margin:1rem 0 2.2rem;

  /* the one theatrical moment on the site — walking up to the sign */
  animation:kiosk-walkup .5s ease-out both;
}
@keyframes kiosk-walkup{
  from{opacity:0;transform:scale(.96);}
  to{opacity:1;transform:scale(1);}
}
@media (prefers-reduced-motion: reduce){
  .kiosk{animation:none;}
}

.kiosk-grid{
  background:var(--parch);
  border-radius:8px;
  padding:1.1rem;
  display:grid;
  grid-template-columns:1fr;
  gap:1.4rem;
}
@media(min-width:900px){
  .kiosk-grid{grid-template-columns:2.1fr 1fr;align-items:start;}
}
.kiosk-main{display:flex;flex-direction:column;gap:2.1rem;min-width:0;}

/* ---------- Shared panel chrome ---------- */
.th-panel{
  position:relative;
  background:linear-gradient(180deg,var(--bone),var(--parch));
  border:1px solid #d9cdb4;
  border-radius:10px;
  padding:1.6rem 1.4rem 1.7rem;
  box-shadow:0 6px 16px rgba(60,38,12,.18);
}
.th-panel-h{
  display:flex;align-items:center;gap:.5rem;
  font-family:var(--font-serif);color:var(--green-deep);
  font-size:1.6rem;font-weight:700;margin:0 0 .6rem;
}
.th-panel-h-btn{
  all:unset;display:inline-flex;align-items:center;gap:.5rem;
  font:inherit;color:inherit;cursor:pointer;min-height:44px;
}
.th-panel-h-btn:focus-visible{
  outline:3px solid var(--green);outline-offset:3px;border-radius:6px;
}
.th-expand-ic{font-size:1rem;opacity:.55;margin-left:.1rem;}
.th-panel-lead{margin:0 0 1rem;color:#45524a;font-size:.94rem;max-width:60ch;}
.th-panel-links{
  display:flex;flex-wrap:wrap;gap:.4rem 1.1rem;
  margin:1rem 0 0;font-weight:600;
}
.th-panel-links a{text-decoration:none;}
.th-panel-links a:hover{text-decoration:underline;}

/* ---------- Map panel ---------- */
.th-map-card{
  background:var(--cork-base);
  background-image:
    radial-gradient(circle at 20% 30%, rgba(120,72,28,.35) 0 1px, transparent 1px),
    radial-gradient(circle at 70% 60%, rgba(90,52,18,.32) 0 1.5px, transparent 2px),
    radial-gradient(ellipse at 50% 50%, var(--cork-base), var(--cork-dark) 85%);
  background-size:13px 13px,17px 17px,100% 100%;
  border-radius:8px;
  padding:1.1rem 1.2rem;
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1rem;
}
.th-map-counts{
  margin:0;font-family:var(--font-mono);font-size:.95rem;
  color:#fff5e6;text-shadow:0 1px 2px rgba(40,22,4,.5);
}
.th-map-counts strong{color:#fff;font-size:1.1rem;}
.th-map-cta{
  display:inline-flex;align-items:center;gap:.4rem;
  background:var(--green-deep);color:#fff;text-decoration:none;
  font-weight:700;padding:.75rem 1.2rem;border-radius:10px;
  min-height:44px;box-shadow:0 4px 10px rgba(47,93,58,.35);
  white-space:nowrap;
}
.th-map-cta:hover,.th-map-cta:focus-visible{background:var(--green);}

/* ---------- Cork panel ---------- */
.th-cork-frame{padding:8px;min-width:0;}
.th-cork{min-height:0;padding:1.1rem .9rem;}
.th-cork .note-grid{gap:1.5rem 1.1rem;}
.th-cork .note{min-width:0;}
.th-cork .note-title{font-size:1rem;}
.th-photo-placeholder{
  height:170px;display:flex;align-items:center;justify-content:center;
  background:#efe9da;color:#8a8168;font-size:.85rem;font-style:italic;
  border-bottom:1px solid #ece7da;
}

/* ---------- Calendar panel ---------- */
.th-cal-lanes{
  display:grid;grid-template-columns:1fr;gap:1.3rem;
  margin-bottom:1.4rem;
}
/* Two lanes sit side-by-side only when there's genuine room (tablet & up).
   At/below 700px they STACK full-width — Coming up over The rhythm, in DOM
   order — never shrinking into two cramped side-by-side columns.
   (Wave B, 2026-07-17: was min-width:640px.) */
@media(min-width:701px){
  .th-cal-lanes{grid-template-columns:1fr 1fr;}
}
.th-lane-h{
  font-family:var(--font-serif);color:var(--green-deep);
  font-size:1.05rem;margin:0 0 .6rem;
  border-bottom:2px dashed #cdbf7f;padding-bottom:.35rem;
}
.th-event-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.7rem;}
.th-event-row{
  background:#fffdf7;border:1px solid #e7e2d4;border-left:4px solid var(--green-soft);
  border-radius:6px;padding:.6rem .8rem;min-width:0;
}
.th-event-main{display:flex;flex-wrap:wrap;justify-content:space-between;gap:.4rem .8rem;align-items:baseline;min-width:0;}
.th-event-name{font-weight:700;color:var(--green-deep);font-size:1rem;min-width:0;overflow-wrap:anywhere;}
/* The "when" text carries long PROSE, not just dates ("Semester kickoff
   window, tentatively Feb-March 2026…"). nowrap here was the root cause of
   Andrew's "spilling off the page": the unbreakable line forced its lane's
   grid track to the prose's width — panning the page on phones, overflowing
   tablets (701-950px), and leaving desktop's two lanes comically unbalanced
   (741px next to 61px). Wrapping at ALL widths fixes all three at once and
   lets the desktop lanes share the panel sanely (Wave B2, 2026-07-17). */
.th-event-when{font-family:var(--font-mono);font-size:.75rem;color:#5a6359;white-space:normal;overflow-wrap:anywhere;}
.th-event-sub{margin:.3rem 0 0;font-size:.85rem;color:#5a6359;min-width:0;overflow-wrap:anywhere;}
.th-del-form{margin:.5rem 0 0;}

/* ---- Narrow-width containment (Wave B, 2026-07-17) ----------------------
   At/below the stack breakpoint the lanes are full-width; let each lane's
   grid track shrink to the viewport rather than to its content. */
@media(max-width:700px){
  .th-cal-lane{min-width:0;}
}

.area-empty--light{
  background:#fffdf3;border:1px dashed #cdbf7f;color:#6a7468;
  text-shadow:none;border-radius:8px;padding:.7rem .9rem;font-size:.9rem;
}

/* Dream Board */
.th-dream-section{margin-bottom:.4rem;}
.th-dream-grid{
  display:grid;grid-template-columns:1fr;gap:1.4rem 1.1rem;margin-bottom:1.3rem;
}
@media(min-width:560px){ .th-dream-grid{grid-template-columns:repeat(2,1fr);} }
@media(min-width:880px){ .th-dream-grid{grid-template-columns:repeat(3,1fr);} }
.th-dream-card{padding:1.3rem 1rem .9rem;min-width:0;}
.th-dream-card .note-title{font-size:1rem;}
.th-dream-form{max-width:100%;margin:0;padding:1.6rem 1.3rem 1.3rem;}

/* Story-so-far strip */
.th-history-strip{
  margin-top:1rem;border-top:2px dashed #cdbf7f;padding-top:1rem;
}
.th-history-row{
  display:flex;gap:.9rem;overflow-x:auto;padding-bottom:.3rem;
  scrollbar-width:thin;
}
.th-history-card{
  flex:0 0 auto;width:190px;min-width:0;
  background:#fffdf7;border:1px solid #e7e2d4;border-radius:8px;
  padding:.7rem .8rem;
}
.th-history-card h4{
  margin:0 0 .3rem;font-family:var(--font-serif);color:var(--green-deep);
  font-size:.95rem;line-height:1.25;overflow-wrap:anywhere;
}
.th-history-when{margin:0;font-size:.75rem;color:#6a7468;font-family:var(--font-mono);overflow-wrap:anywhere;}

/* ---------- Clipboard (side column) ---------- */
.kiosk-clipboard{
  position:relative;
  background:#efe6cd;
  border:1px solid #cdbf7f;
  border-radius:6px;
  padding:1.8rem 1.1rem 1.3rem;
  box-shadow:0 4px 12px rgba(60,38,12,.14);
}
.kiosk-clipboard::before{ /* the metal clip */
  content:"";position:absolute;top:-14px;left:50%;transform:translateX(-50%);
  width:74px;height:26px;border-radius:6px;
  background:linear-gradient(180deg,#d3d3d3,#8f8f8f);
  box-shadow:0 3px 6px rgba(0,0,0,.35);
}
.kiosk-clipboard::after{
  content:"";position:absolute;top:-6px;left:50%;transform:translateX(-50%);
  width:36px;height:10px;border-radius:3px;background:#b7b7b7;
}
.th-clip-h{
  display:flex;align-items:center;gap:.5rem;
  font-family:var(--font-serif);color:var(--green-deep);
  font-size:1.2rem;margin:0 0 1rem;
}
.th-clip-section{margin-bottom:1.3rem;}
.th-clip-section:last-child{margin-bottom:0;}
.th-clip-sub{
  font-family:var(--font-mono);text-transform:uppercase;letter-spacing:.03em;
  font-size:.76rem;color:#6a5a20;margin:0 0 .5rem;
}
.th-clip-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.55rem;}
.th-clip-list li{
  background:#fffdf3;border:1px solid #e7cf3f;border-radius:8px;
  padding:.4rem .6rem;font-size:.8rem;min-width:0;
}
.th-clip-list a{font-weight:700;text-decoration:none;color:var(--green-deep);overflow-wrap:anywhere;}
.th-clip-list a:hover{text-decoration:underline;}
.th-clip-meta{
  display:block;margin-top:.15rem;font-family:var(--font-mono);
  font-size:.75rem;color:#6a5a20;overflow-wrap:anywhere;
}
.th-clip-empty{color:#6a7468;font-style:italic;font-size:.85rem;margin:0;}

/* =====================================================================
   Trailhead calm-down (PART 2) — panel budgets, partner chips, the
   focus-in-place interaction, and small utilities they share.
   ===================================================================== */

/* ---------- Screen-reader-only text ---------- */
.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;
}

/* ---------- Panel budgets (§1): anything past the default slice stays in
   the DOM (so the focused view has full content with no extra fetch) but
   is hidden until its panel is expanded. ---------- */
.th-more{display:none;}
.is-focused .th-more{display:block;}

/* ---------- "…see more" links (§1) ---------- */
.th-seemore{margin:.7rem 0 0;}
.th-seemore-link{font-weight:600;text-decoration:none;font-size:.9rem;color:var(--green-deep);}
.th-seemore-link:hover,.th-seemore-link:focus-visible{text-decoration:underline;}
.is-focused .th-seemore{display:none;} /* full content is already showing */

/* ---------- Partner-chip overflow fix (§2): never print a full partner
   list inline on a compact card — a small mono chip stands in, and the
   full list (a sibling element) is revealed only once the panel is
   focus-expanded. ---------- */
.th-partner-chip{
  display:inline-block;font-family:var(--font-mono);font-size:.7rem;
  background:var(--parch);border:1px solid #cdbf7f;border-radius:999px;
  padding:.05rem .55rem;color:#5a6359;white-space:nowrap;
}
.th-partner-full{display:none;overflow-wrap:anywhere;}
.is-focused .th-partner-chip{display:none;}
.is-focused .th-partner-full{display:inline;}

/* ---------- Panel-header expand button + close button (§3) ---------- */
.th-panel-close{
  display:none;position:absolute;top:1rem;right:1rem;z-index:4;
  align-items:center;gap:.3rem;
  font:inherit;font-weight:700;font-size:.8rem;cursor:pointer;
  background:var(--bone);border:1px solid #cdbf7f;border-radius:999px;
  padding:.3rem .8rem;min-height:36px;color:var(--green-deep);
}
.th-panel-close:hover,.th-panel-close:focus-visible{background:#e3f3e7;border-color:var(--green);}
.is-focused .th-panel-close{display:inline-flex;}

/* ---------- Focus-in-place layout (§3) ----------
   JS toggles .has-focus on .kiosk-grid and .is-focused on one .th-panel;
   the ?panel= server fallback sets the same classes with no JS at all. The
   ~350ms transition is nulled site-wide by style.css's reduced-motion rule
   (`*{transition:none!important}`), giving the required instant swap. */
.kiosk-grid.has-focus .kiosk-main{
  flex-direction:row;flex-wrap:wrap;align-items:flex-start;
}
.kiosk-grid.has-focus .kiosk-main .th-panel{
  transition:flex-basis .35s ease-out, opacity .35s ease-out, transform .35s ease-out, max-height .35s ease-out;
}
.kiosk-grid.has-focus .kiosk-main .th-panel:not(.is-focused){
  flex:1 1 200px;max-height:210px;overflow:hidden;opacity:.6;
  padding:1.1rem 1.2rem;cursor:pointer;
}
.kiosk-grid.has-focus .kiosk-main .th-panel:not(.is-focused) > *:not(.th-panel-h){
  pointer-events:none;
}
.kiosk-grid.has-focus .kiosk-main .th-panel.is-focused{
  flex:1 1 100%;order:-1;opacity:1;transform:scale(1.008);
  box-shadow:0 18px 36px rgba(40,25,8,.4);
}
.kiosk-grid.has-focus .kiosk-clipboard{
  opacity:.6;filter:saturate(.7);cursor:pointer;
  transition:opacity .35s ease-out;
}
.kiosk-grid.has-focus .kiosk-clipboard > *{pointer-events:none;}
@media(min-width:900px){
  .kiosk-grid.has-focus .kiosk-main{grid-column:1/-1;}
  .kiosk-grid.has-focus .kiosk-clipboard{grid-column:1/-1;}
}
/* Narrow kiosk screens: stack the compact rail full-width instead of
   letting two 200px tiles overflow a ~375px viewport. */
@media(max-width:480px){
  .kiosk-grid.has-focus .kiosk-main .th-panel:not(.is-focused){
    flex:1 1 100%;max-height:64px;
  }
}
/* A focused panel is flex:1 1 100% inside the (already min-width:0) kiosk-main,
   but a flex item defaults to min-width:auto — so the EXPANDED calendar panel
   (every event revealed, incl. the long "when" prose) ballooned to its intrinsic
   content width and panned a phone viewport sideways, exactly like the collapsed
   bug. min-width:0 makes each panel in the focus layout honour its flex basis and
   wrap its content instead. Narrow widths only; the >=701px focus layout — which
   spreads panels across a wide kiosk — is left untouched. (Wave B, 2026-07-17) */
@media(max-width:700px){
  .kiosk-grid.has-focus .kiosk-main .th-panel{min-width:0;}
}

/* ---------- Reduced motion (covers this file's own animation too) ---------- */
@media (prefers-reduced-motion: reduce){
  .kiosk{animation:none !important;}
}