/* Guest-only details for guest_start.html and the shared workspace.html.
   The existing palette, controls and two-panel practice layout stay in use.
   These rules add the explicit start/data notice, allowance and save invitation
   without creating a second conversation interface or a frontend framework. */

/* The doorway is a calm, readable two-column invitation. A single action starts
   the real conversation after its short explanation of data handling. */
.guest-introduction { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr); align-items: center; gap: 80px; padding-block: 70px 100px; }
.guest-invitation h1 { margin: 20px 0; font: 52px/1.12 var(--serif); letter-spacing: -1.8px; }
.guest-invitation h1 em, .guest-start-card h2 em { color: var(--teal-strong); font-weight: normal; }
.guest-lede { max-width: 43ch; font-size: 17px; color: var(--body-text); line-height: 1.8; }
.guest-experience { list-style: none; padding: 0; margin: 32px 0; display: grid; gap: 22px; }
.guest-experience li { display: flex; align-items: baseline; gap: 18px; }
.guest-experience li > span { color: var(--ochre-strong); font: italic 17px var(--serif); }
.guest-experience strong { font-size: 15px; font-weight: 600; }
.guest-experience p { max-width: 43ch; margin: 4px 0 0; color: var(--muted); line-height: 1.7; }
.guest-start-card { position: relative; padding: 38px; background: var(--surface); border: 1px solid var(--line-strong); border-radius: 10px; box-shadow: 9px 9px 0 var(--surface-soft); }
.guest-card-star { position: absolute; top: 27px; right: 29px; color: var(--ochre); font-size: 30px; }
.guest-start-card h2 { margin: 22px 0 18px; font: 40px/1.16 var(--serif); letter-spacing: -1px; }
.guest-start-card > p:not(.landing-kicker) { color: var(--body-text); line-height: 1.75; }
.guest-start-allowance { display: flex; align-items: center; gap: 15px; margin: 24px 0; padding-block: 17px; border-block: 1px solid var(--line); }
.guest-start-allowance > strong { color: var(--teal-strong); font: 40px/1 var(--serif); }
.guest-start-allowance span { font-weight: 600; }
.guest-start-allowance small { color: var(--muted); font-size: 12px; font-weight: normal; }
.guest-start-card .guest-start-disclosure { font-size: 12px; margin-block: 0 23px; }
.guest-start-card .landing-button { width: 100%; justify-content: space-between; border: 0; }
.guest-start-card .guest-start-footnote { text-align: center; margin-bottom: 0; font-size: 11px; color: var(--muted); }
.guest-unavailable { border-left: 2px solid var(--ochre); padding-left: 16px; }
.guest-unavailable p { color: var(--muted); }

/* An allowance is quiet context, not a timer or a countdown pressure tactic.
   The two pieces wrap on phones; server-returned JSON owns the actual number. */
.guest-header-save { margin-left: auto; }
.guest-header-save button { padding: 8px 0; white-space: nowrap; }
.guest-allowance { flex: none; display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 3px 12px; padding: 9px 22px; border-bottom: 1px solid var(--line); background: var(--teal-wash); font-size: 11px; color: var(--muted); }
.guest-allowance strong { color: var(--teal-strong); }
.guest-data-note { margin: 9px 0 0; font-size: 11px; line-height: 1.65; color: var(--muted); }
.guest-data-note summary { cursor: pointer; }
.guest-data-note p { margin: 6px 0; }
/* The guest trial adds an allowance above the conversation. Reserve at least
   half of the remaining panel for dialogue; expanded editor tools scroll inside
   the composer instead of squeezing the coach's response to a few lines. */
.guest-practice[data-layout-ready] .composer-area { max-height: 48%; }
.guest-practice .editor-heading { padding-top: 6px; padding-bottom: 0; }
.guest-practice .editor-toolbar { padding-top: 0; }
.guest-practice .composer-box { padding-top: 8px; padding-bottom: 5px; }
.guest-practice .reasoning-editor textarea { min-height: 70px; }
.guest-exhausted-card { flex: none; margin: 0 18px 12px; padding: 16px 18px; border: 1px solid var(--teal-line); border-radius: 8px; background: var(--teal-soft); }
.guest-exhausted-card h3 { margin: 0; font: 22px/1.25 var(--serif); }
.guest-exhausted-card p { margin: 7px 0 12px; font-size: 12px; }
.guest-exhausted-card .primary-button { font-size: 12px; padding: 9px 12px; }
.guest-completion .completion-actions form { margin: 0; }

/* Once the allowance ends, leave the transcript and unsent draft inspectable.
   The browser adds this attribute after the last delivered turn as well as on
   reload. Removing editor decorations gives the save card useful breathing room. */
.guest-practice[data-guest-exhausted="true"] .editor-toolbar,
.guest-practice[data-guest-exhausted="true"] .coach-actions,
.guest-practice[data-guest-exhausted="true"] .composer-hint,
.guest-practice[data-guest-exhausted="true"] .guest-data-note { display: none; }
.guest-practice[data-layout-ready][data-guest-exhausted="true"] .composer-area { max-height: 23%; }
.guest-practice[data-guest-exhausted="true"] .send-button { cursor: default; }

/* Stack the invitation on narrow screens and keep the workspace header compact.
   Existing workspace.css still owns the Problem / Discussion phone switcher. */
@media (max-width: 900px) {
  .guest-introduction { gap: 36px; padding-block: 44px 70px; }
  .guest-invitation h1 { font-size: 42px; }
  .guest-start-card { padding: 28px; }
  .guest-allowance { padding-inline: 16px; }
}
@media (max-width: 700px) {
  /* The phone doorway prioritizes the actual start form. Its card repeats the
     essential explanation; the longer optional introduction is desktop-only. */
  .guest-introduction { grid-template-columns: minmax(0, 1fr); gap: 20px; padding-top: 24px; }
  .guest-invitation h1 { margin: 8px 0 0; font-size: 33px; letter-spacing: -1px; }
  .guest-invitation .landing-kicker { margin: 0; font-size: 9px; }
  .guest-lede, .guest-experience, .guest-invitation > a { display: none; }
  .guest-start-card { padding: 24px; }
  .guest-start-card h2 { font-size: 32px; margin-block: 16px; }
  .guest-start-allowance { margin-block: 18px; padding-block: 12px; }
  .guest-practice .practice-header { gap: 8px 10px; }
  .guest-header-save button { font-size: 11px; }
  .guest-allowance { font-size: 10px; }
  .guest-allowance > span:last-child { display: none; }
  .guest-exhausted-card { margin-inline: 12px; padding: 13px 14px; }
  .guest-exhausted-card h3 { font-size: 20px; }
}