/* =========================================================
   Community Life Map

   Sits on top of form.css, which is the waiting list's own
   stylesheet — the deck, the panels, the intro cards, .opt,
   .cta, .fields and .done all come from there unchanged. This
   file only adds what the exercise has and the waiting list
   doesn't: the ring of names, the tag pills, the week, the live
   map, and the larger single-column question layout the
   artboards draw.
   ========================================================= */

/* ---- The exercise's panels ----
   The artboards set the question as the page's only big moment,
   left-aligned, with everything else beneath it in one column —
   unlike the waiting list's side-by-side question layout. */
.panel--x{ padding:72px 28px 56px; }
.panel--x .panel__inner{ max-width:760px; display:flex; flex-direction:column; gap:clamp(22px,4vh,36px); }

.x__head{ display:flex; flex-direction:column; gap:12px; }
.x__title{
  font-family:var(--font-serif); font-weight:300;
  font-size:clamp(44px,10vw,80px); line-height:1.02; letter-spacing:-.02em;
  color:var(--color-black); text-wrap:balance;
}
/* The whole panel is the question (name, space, why): bigger, and
   held to a narrow measure so it stacks the way the artboard does. */
.x__title--display{ font-size:clamp(46px,11.5vw,88px); max-width:11ch; text-wrap:pretty; }
.x__sub{ font:400 clamp(17px,4.4vw,22px)/1.4 var(--font-sans); color:var(--color-black); max-width:42ch; text-wrap:pretty; }
.x__note{ font:400 11px/1.6 var(--font-mono); text-transform:uppercase; letter-spacing:.09em; color:var(--color-evergreen); max-width:52ch; }

.x__foot{ display:flex; align-items:center; gap:18px; flex-wrap:wrap; }

/* One line, underlined — the name and the why. */
.line-input{
  width:100%; max-width:560px;
  font:400 clamp(20px,5vw,26px)/1.3 var(--font-sans); color:var(--color-black);
  background:transparent; border:none; border-bottom:1px solid var(--color-black);
  border-radius:0; padding:10px 0;
}
.line-input:focus{ outline:none; border-bottom-width:2px; padding-bottom:9px; }
textarea.line-input{ resize:none; overflow:hidden; min-height:0; }

/* ---- Small questions under a big one: Yes / Not yet ---- */
.mini{ display:flex; flex-direction:column; gap:12px; }
.mini__q{ font:400 clamp(15px,4vw,18px)/1.4 var(--font-sans); color:var(--color-black); }
.chips{ display:flex; gap:8px; flex-wrap:wrap; }
.chip{
  font:400 15px var(--font-sans); color:var(--color-espresso);
  background:var(--color-white); border:1px solid var(--color-latte);
  border-radius:var(--radius-pill); padding:9px 20px; min-height:42px;
  transition:all var(--transition-base);
}
.chip:hover{ border-color:var(--color-espresso); }
.chip.is-selected{ background:var(--color-espresso); border-color:var(--color-espresso); color:var(--color-cream); }

.x__answers{ display:flex; flex-direction:column; gap:10px; max-width:560px; }

/* ---- Your People: the ring ---- */
.ring{ position:relative; width:min(100%, 58vh, 540px); aspect-ratio:1; align-self:center; }
.spot{
  position:absolute; width:23%; aspect-ratio:1;
  transform:translate(-50%,-50%);
  border:2px solid var(--color-black); border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:transparent;
  transition:background var(--transition-base), opacity .35s ease, transform .35s ease;
}
.spot[hidden]{ display:flex; opacity:0; transform:translate(-50%,-50%) scale(.8); pointer-events:none; }
.spot.is-filled{ background:var(--color-white); }
.spot--you{ width:25%; }
.spot input, .spot span{
  width:88%; text-align:center;
  font:400 clamp(10px,2.6vw,13px)/1.2 var(--font-mono); text-transform:uppercase; letter-spacing:.06em;
  color:var(--color-black); background:transparent; border:none; padding:4px 0;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.spot input::placeholder{ color:rgba(58,40,30,.38); }
.spot input:focus{ outline:none; }
.spot:focus-within{ border-color:var(--color-ruby); }

/* ---- Connections ---- */
.names{ display:flex; flex-wrap:wrap; gap:8px; }
.name-chip{
  font:400 11px/1 var(--font-mono); text-transform:uppercase; letter-spacing:.09em;
  border:1px solid var(--color-espresso); border-radius:var(--radius-pill);
  padding:9px 14px; min-height:34px; transition:all var(--transition-base);
}
.name-chip.is-current{ background:var(--color-espresso); color:var(--color-cream); }
.name-chip small{ font:inherit; opacity:.6; margin-left:6px; }

.pair{ display:flex; align-items:center; gap:clamp(24px,6vw,64px); flex-wrap:wrap; }
.big-circle{
  flex:0 0 auto; width:clamp(150px,34vw,280px); aspect-ratio:1;
  border:2px solid var(--color-black); border-radius:50%;
  display:flex; align-items:center; justify-content:center; padding:12px;
  font:400 clamp(12px,3vw,15px)/1.2 var(--font-mono); text-transform:uppercase; letter-spacing:.06em;
  text-align:center; overflow-wrap:anywhere;
}
.big-circle.is-swapping{ animation:cp-rise .35s ease; }
.tags{ flex:1 1 260px; display:flex; flex-direction:column; align-items:center; gap:14px; }

/* Each tag keeps its own ground, as the artboard colours them. Off,
   the colour is held back to a tint so the choice reads as a choice;
   on, it is the artboard's full swatch. */
.tag{
  font:400 clamp(11px,2.9vw,13px)/1.2 var(--font-mono); text-transform:uppercase; letter-spacing:.08em;
  padding:7px 11px; border-radius:6px; min-height:34px;
  background:color-mix(in srgb, var(--g) 30%, var(--color-cream));
  color:var(--color-espresso);
  box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--g) 70%, transparent);
  transition:background var(--transition-base), color var(--transition-base), transform .15s ease;
}
.tag:hover{ transform:translateY(-1px); }
.tag.is-on{ background:var(--g); color:var(--i); box-shadow:none; }
.tag.is-on::before{ content:'✓ '; }

.person-nav{ display:flex; align-items:center; gap:18px; flex-wrap:wrap; }
.textlink{
  font:400 11px/1 var(--font-mono); text-transform:uppercase; letter-spacing:.09em;
  color:var(--color-black); padding:10px 0; border-bottom:1px solid currentColor;
}
.textlink[disabled]{ opacity:.3; pointer-events:none; }

.panel--connect .panel__inner{ max-width:1180px; }
.panel--connect .tags{ flex:1 1 300px; }
.minimap{ flex:1 1 260px; display:flex; flex-direction:column; gap:10px; align-items:flex-start; }
.minimap svg{ width:min(100%, 300px); height:auto; overflow:visible; }
.minimap .person{ transition:transform .6s cubic-bezier(.33,0,.12,1); }

/* ---- Availability ---- */
.week{ display:grid; grid-template-columns:repeat(3,1fr); gap:2px; width:min(100%, 620px, 62vh); }
.day{
  position:relative; aspect-ratio:1.03; background:var(--color-olive);
  color:var(--color-cream); text-align:left; padding:12px 14px;
  display:flex; flex-direction:column; justify-content:space-between;
  transition:background var(--transition-base);
}
.day:last-child{ grid-column:1 / -1; aspect-ratio:auto; min-height:clamp(64px,13vw,120px); }
.day:hover{ background:#9A9C6F; }
.day.is-busy{ background:var(--color-espresso); }
.day__name{ font:400 11px/1 var(--font-mono); text-transform:uppercase; letter-spacing:.09em; }
.day__state{ font:400 10px/1 var(--font-mono); text-transform:uppercase; letter-spacing:.09em; opacity:0; transition:opacity var(--transition-base); }
.day.is-busy .day__state{ opacity:.8; }

/* ---- Confirmation ---- */
.done__actions{ display:flex; gap:12px; flex-wrap:wrap; align-items:center; }
.done__guide{ border-top:1px solid rgba(1,1,1,.2); padding-top:22px; display:grid; gap:6px; }
.done__guide .mono{ color:var(--color-steel-navy); }
.done__guide p{ font:400 clamp(18px,4.6vw,22px)/1.35 var(--font-sans); color:var(--color-black); }

@media (min-width:760px){
  .panel--x{ padding:88px 48px 64px; }
}

/* On a wide screen the display question takes the left half and
   its answer sits beside it, as the waiting list's questions do —
   otherwise the artboard's portrait stack pushes the answer below
   the fold. */
@media (min-width:1000px){
  .panel--display .panel__inner{
    max-width:1100px; display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);
    column-gap:72px; row-gap:28px; align-items:center; align-content:center;
  }
  .panel--display .x__head{ grid-row:1 / span 4; }
  .panel--display .panel__inner > :not(.x__head){ grid-column:2; }
}

/* On a phone the name chips already say whose turn it is, and the
   big circle would push the live map a screen further down. */
@media (max-width:599px){
  .big-circle{ display:none; }
  .tags{ align-items:flex-start; }
}