/* ═══════════════════════════════════════════════════════════════════════════
   room-practice.css — THE PRACTICE, the coach's room (2026-09-25).
   The same family as room-forecasts.css; every value is DESIGN-CONSTITUTION.md.
   Object 5fr left (points of ice on a level line, or one client's trace),
   words 7fr right; the one Syne sentence with its one Cormorant turn; rows on
   the ground with hairlines; no colour for state; quiet exits. js/69 paints.
   ═══════════════════════════════════════════════════════════════════════════ */

/* the room replaces the old header line and the 900px column while it paints */
#view-practice:has(#pc-root.pr) .pc-head{ display:none; }
#view-practice #pc-root.pr{ max-width:var(--room-max,1180px); margin:0 auto; }
#view-practice .pr-room{ display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); column-gap:40px; align-items:center;
  min-height:calc(100vh - var(--hdr-h,60px) - 96px); padding:12px 0 36px; }

#view-practice .pr-room.is-prep{ align-items:start; padding-top:36px; }
#view-practice .pr-room.is-prep .pr-objcol{ position:sticky; top:120px; }

/* ── the object ── */
#view-practice .pr-objcol{ display:flex; align-items:center; justify-content:center; }
#view-practice .pr-obj{ display:block; width:100%; max-height:50vh; overflow:visible; }
#view-practice .pr-level{ stroke:rgba(160,225,255,.22); stroke-width:1; }
#view-practice .pr-stem{ stroke:rgba(160,225,255,.2); stroke-width:1; stroke-dasharray:1 4; stroke-linecap:round; }
#view-practice .pr-pt{ fill:var(--mg-ice); }
#view-practice .pr-pt.is-open{ fill:#03101f; stroke:rgba(160,225,255,.55); stroke-width:1.4; }
#view-practice .pr-pt.is-on{ fill:#dff4ff; stroke:none; filter:drop-shadow(0 0 10px rgba(0,191,255,.5)); }
#view-practice .pr-cast{ fill:none; stroke:rgba(0,191,255,.32); stroke-width:10; stroke-linecap:round; filter:blur(10px); }
#view-practice .pr-line{ fill:none; stroke-width:2.5; stroke-linecap:round; stroke-dasharray:1; stroke-dashoffset:1; animation:pr-draw .6s .08s cubic-bezier(.2,.8,.2,1) forwards; }
@keyframes pr-draw{ to{ stroke-dashoffset:0; } }
#view-practice .pr-lab{ font:400 13px var(--f-body); fill:rgb(var(--ink3)); }
#view-practice .pr-lab.is-on{ fill:rgb(var(--ink2)); }

/* ── the words ── */
#view-practice .pr-words{ text-align:left; max-width:560px; }
#view-practice .pr-stamp{ margin:0; font:400 13px/1.5 var(--f-body); color:rgb(var(--ink3)); }
#view-practice .pr-tag{ display:inline-block; padding:5px 12px; border-radius:999px; border:1px solid rgba(160,225,255,.3); font:500 13px/1.2 var(--f-body); color:rgb(var(--ink2)); }
#view-practice .pr-sentence{ margin:10px 0 0; max-width:22ch; font:500 clamp(28px,2.6vw,36px)/1.08 var(--f-disp); letter-spacing:-.022em; color:rgb(var(--ink)); text-wrap:balance; }
#view-practice .pr-sentence em{ font:italic 500 1.08em var(--f-em); color:#dff4ff; }

/* the clients: rows on the ground, a hairline between (§4, §6) */
#view-practice .pr-act{ margin-top:30px; }
#view-practice .pr-rows{ margin-top:48px; }
#view-practice .pr-act + .pr-rows{ margin-top:36px; }
#view-practice .pr-head{ display:flex; align-items:center; gap:14px; }
#view-practice .pr-link .ui-btn--primary{ margin-right:6px; }
#view-practice .pr-row{ display:grid; grid-template-columns:minmax(0,1fr) auto auto auto; align-items:center; gap:18px; width:100%; min-height:60px;
  padding:10px 2px; border:0; border-top:1px solid var(--hair); background:none; text-align:left; cursor:pointer;
  transition:background-color var(--dur-1,180ms) ease; }
#view-practice .pr-row:last-child{ border-bottom:1px solid var(--hair); }
#view-practice .pr-row:hover{ background:rgba(0,191,255,.035); }
#view-practice .pr-row:active{ transform:scale(.995); }
#view-practice .pr-row:focus-visible{ outline:2px solid var(--ice2); outline-offset:2px; border-radius:6px; }
#view-practice .pr-row__who{ min-width:0; }
#view-practice .pr-row__name{ display:block; font:500 16px/1.35 var(--f-body); color:rgb(var(--ink)); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
#view-practice .pr-row__bs{ display:block; margin-top:2px; font:400 13px/1.35 var(--f-body); color:rgb(var(--ink3)); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
#view-practice .pr-row__state{ font:400 14px var(--f-body); color:rgb(var(--ink2)); white-space:nowrap; }
#view-practice .pr-row__detail{ font:400 14px var(--f-body); color:rgb(var(--ink3)); white-space:nowrap; font-variant-numeric:tabular-nums; }
#view-practice .pr-row__go{ width:36px; height:36px; pointer-events:none; }
#view-practice .pr-row__go svg{ width:16px; height:16px; }
#view-practice .pr-row:hover .pr-row__go, #view-practice .pr-row.is-on .pr-row__go{ background:rgba(140,220,255,.12); color:rgb(var(--ink)); }
#view-practice .pr-empty{ margin:48px 0 0; padding-top:30px; border-top:1px solid var(--hair); font:400 16px/1.6 var(--f-body); color:rgb(var(--ink2)); max-width:46ch; }

/* the link: one quiet exit and one stamp */
#view-practice .pr-link{ display:flex; align-items:center; flex-wrap:wrap; gap:4px 18px; margin-top:30px; }
#view-practice .pr-meta{ font:400 13px/1.5 var(--f-body); color:rgb(var(--ink3)); }
#view-practice .pr-code{ font:300 22px var(--f-body); letter-spacing:.08em; color:rgb(var(--ink)); }
#view-practice .pr-sr{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
#view-practice .pr-q{ display:inline-flex; align-items:center; min-height:44px; padding:0 2px; border:0; background:transparent; cursor:pointer;
  font:500 14px var(--f-body); color:rgb(var(--ink2)); transition:color var(--dur-1,180ms) cubic-bezier(.2,.8,.2,1); }
#view-practice .pr-q:hover{ color:rgb(var(--ink)); }
#view-practice .pr-q:focus-visible{ outline:2px solid var(--ice2); outline-offset:3px; border-radius:8px; }
#view-practice .pr-exits{ display:flex; flex-wrap:wrap; gap:0 28px; margin-top:6px; }
#view-practice .pr-exits:empty{ display:none; }
#view-practice .pr-fine{ margin:30px 0 0; max-width:46ch; font:400 13px/1.55 var(--f-body); color:rgb(var(--ink3)); }

/* the session preparation: its lines as rows, the gaps a rung quieter */
#view-practice .pr-prep{ margin-top:36px; }
#view-practice .pr-prep__l{ margin:0; padding:14px 2px; border-top:1px solid var(--hair); font:400 15px/1.6 var(--f-body); color:rgb(var(--ink)); max-width:52ch; }
#view-practice .pr-prep .pr-prep__l:last-child{ border-bottom:1px solid var(--hair); }
#view-practice .pr-prep--gap{ margin-top:18px; }
#view-practice .pr-prep--gap .pr-prep__l{ color:rgb(var(--ink3)); font-size:14px; }
#view-practice .pr-rep{ margin-top:30px; }
#view-practice .pr-prep + .pr-exits, #view-practice .pr-rep + .pr-exits, #view-practice .pr-fine + .pr-exits{ margin-top:24px; }

/* phone (§11): object first, then the sentence, then the rows */
@media (max-width:1023px){
  #view-practice .pr-room.is-prep .pr-objcol{ position:static; }
  #view-practice .pr-room{ grid-template-columns:minmax(0,1fr); row-gap:18px; min-height:0; padding:4px 0 28px; }
  #view-practice .pr-obj{ max-height:30vh; }
  #view-practice .pr-words{ max-width:none; }
}
@media (max-width:767px){
  #view-practice .pr-sentence{ font-size:26px; }
  #view-practice .pr-rows{ margin-top:30px; }
  #view-practice .pr-row{ grid-template-columns:minmax(0,1fr) auto; grid-template-areas:"who go" "meta meta"; row-gap:4px; }
  #view-practice .pr-row__who{ grid-area:who; }
  #view-practice .pr-row__go{ grid-area:go; }
  #view-practice .pr-row__state{ grid-area:meta; font-size:13px; }
  #view-practice .pr-row__detail{ display:none; }
}
@media (prefers-reduced-motion:reduce){ #view-practice .pr-line{ animation:none; stroke-dashoffset:0; } #view-practice .pr-row{ transition:none; } }

/* the coach as her own first client (2026-09-25) */
/* a plain second word, not a Cormorant turn: the room's one turn is its sentence (§2) */
#view-practice .pr-row__self{ font:400 14px/1 var(--f-body); color:rgb(var(--ink3)); margin-left:8px; letter-spacing:0; }

/* the released report's label is a stamp in the prep, not a second Cormorant turn (§2) */
#view-practice .pr-rep .pc-rep__label{ font:400 13px/1.5 var(--f-body); color:rgb(var(--ink3)); }

/* ── the client's side (js/70, 2026-09-25): the window they opened ──
   the sentence and the one exit on the left, the evidence as rows on the right */
#view-practice .pr-room.is-client{ align-items:start; padding-top:36px; }
#view-practice .prc-lead{ position:sticky; top:120px; max-width:460px; }
#view-practice .prc-lede{ margin-top:18px; }
#view-practice .prc-lead .pr-exits{ margin-top:24px; }
#view-practice .prc-lead .pr-fine{ margin-top:6px; }
#view-practice .prc-sec{ margin-top:36px; }
#view-practice .prc-sec--first{ margin-top:0; }
#view-practice .prc-list{ margin-top:10px; }
#view-practice .prc-li{ margin:0; padding:11px 2px; border-top:1px solid var(--hair); font:400 15px/1.5 var(--f-body); color:rgb(var(--ink)); }
#view-practice .prc-li:last-child{ border-bottom:1px solid var(--hair); }
#view-practice .prc-list.is-kept .prc-li{ color:rgb(var(--ink3)); }
#view-practice .prc-name{ margin:12px 0 0; font:500 17px/1.35 var(--f-body); color:rgb(var(--ink)); }
#view-practice .prc-body{ margin:6px 0 0; max-width:52ch; font:400 15px/1.55 var(--f-body); color:rgb(var(--ink2)); }
#view-practice .prc-note{ margin:6px 0 0; font:400 13px/1.5 var(--f-body); color:rgb(var(--ink3)); }
#view-practice .prc-act{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:6px 24px; margin-top:14px; padding-top:12px; border-top:1px solid var(--hair); }
#view-practice .prc-act .prc-body{ margin:0; flex:1 1 280px; font-size:14px; }
/* the report's label is a stamp here, not a second Cormorant turn (§2) */
#view-practice .prc-words .pc-rep__label{ font:400 13px/1.5 var(--f-body); color:rgb(var(--ink3)); }
#view-practice .prc-words .pc-rep__grid{ margin-top:10px; }
@media (max-width:1023px){
  #view-practice .pr-room.is-client{ padding-top:8px; row-gap:36px; }
  #view-practice .prc-lead{ position:static; max-width:none; }
}
@media (max-width:767px){
  #view-practice .prc-act{ flex-direction:column; align-items:stretch; }
  #view-practice .prc-act .prc-body{ flex:none; }
  #view-practice .prc-act .ui-btn{ align-self:flex-start; }
}

/* ── what came due (js/69, 2026-09-25, build 7): one row on the ground under the
   sentence, a hairline above and below (§4), the ask a quiet text exit (§9) ── */
#view-practice .pr-bets{ margin-top:30px; padding:14px 2px 0; border-top:1px solid var(--hair); }
#view-practice .pr-bets__l{ margin:0; font:400 15px/1.6 var(--f-body); color:rgb(var(--ink)); }
#view-practice .pr-bets__ask{ min-height:44px; margin-top:2px; padding:0; border:0; background:transparent; cursor:pointer; font:500 14px var(--f-body); color:rgb(var(--ink2)); }
#view-practice .pr-bets__ask:hover{ color:rgb(var(--ink)); }
#view-practice .pr-bets__ask:disabled{ opacity:.35; cursor:default; }
#view-practice .pr-bets__ask:focus-visible{ outline:2px solid var(--ice2); outline-offset:3px; }
#view-practice .pr-bets__s{ margin:4px 0 0; font:400 13px/1.45 var(--f-body); color:rgb(var(--ink3)); }
#view-practice .pr-bets__s:empty{ display:none; }
/* one hairline between the two groups, one row width (2026-09-25 audit, §4 §6):
   the gap rows continue the prep rows instead of starting a second ruled list */
#view-practice .pr-prep, #view-practice .pr-bets{ max-width:480px; }
#view-practice .pr-prep__l{ max-width:none; }
#view-practice .pr-prep + .pr-prep--gap{ margin-top:0; }
#view-practice .pr-prep + .pr-prep--gap .pr-prep__l:first-child{ border-top:0; }

/* SWEEP 2026-09-25 (design constitution §9, §2): the set-up fields lose their boxes and
   keep a wash; the invite code stops being tracked monospace; the two set-up halves sit
   on the ground, not in bordered boxes (§4, §13 cards in cards). */
#view-practice #pc-state input:not([type=checkbox]){ border:0 !important; border-radius:12px !important; background:rgba(140,220,255,.045) !important;
  font:400 16px/1.3 var(--f-body) !important; letter-spacing:0 !important; color:rgb(var(--ink)) !important; min-height:44px; }
#view-practice #pc-state input:not([type=checkbox]):focus-visible{ background:rgba(0,191,255,.08) !important; outline:2px solid var(--ice2,#7FD3FF); outline-offset:2px; }
#view-practice #pc-state input[type=checkbox]{ accent-color:#0b7acd; }
#view-practice #pc-state .rounded-\[2px\]{ border:0 !important; border-top:1px solid rgba(160,225,255,.12) !important; border-radius:0 !important; padding-left:0 !important; padding-right:0 !important; }

/* THE FORMING CUBE (her 09-27 audit): the anchor while a client's baseline forms. The witness
   cube's build (css/witness.css): the held cube, fragments docked in or dim at the edge, one stamp. */
#view-practice .pr-form{ display:grid; justify-items:center; row-gap:18px; width:100%; }
#view-practice .pr-form__cube{ --ics:124px; --k:1.5; width:460px; height:420px; position:relative; perspective:1000px; perspective-origin:50% 45%; }
#view-practice .pr-frag{ opacity:.3; transition:transform 1.2s cubic-bezier(.2,.8,.2,1), opacity 1.2s cubic-bezier(.2,.8,.2,1); }
#view-practice .pr-frag.is-in{ opacity:.9; }
#view-practice .pr-form__stamp{ font:400 13px/1.4 var(--f-body); color:rgb(var(--ink3)); margin:0; letter-spacing:0; text-transform:none; }
@media (min-width:1024px) and (max-width:1279px){
  #view-practice .pr-form__cube{ --ics:100px; --k:1.1; width:360px; height:340px; }
}
@media (max-width:1023px){
  #view-practice .pr-form__cube{ --ics:70px; --k:.85; width:260px; height:210px; }
}
@media (prefers-reduced-motion:reduce){ #view-practice .pr-frag{ transition:none; } }