/* page-paid-gates.css: Ask signed out, the Ask paywall card and used-up box, Science GPA locked (spec/page-paid-gates.md).
   Card anatomy from Linear 0338 (title, price, one primary, checklist under a rule, grey bar), the same as Labs no-pass
   (page-labs.css .lf-offer); the access card beside the work column from Perplexity 0000; the slot replacement from
   Vercel 0295 and Supabase 0130. Tokens only (spec/system.md). */

/* ---------- Ask signed out ---------- */
.gt-guest { container-type: inline-size; max-width: calc(780px + 32px + 320px + 2 * var(--s-8)); padding: var(--s-8) var(--s-8) var(--s-12); }
@media (max-width: 1023px) { .gt-guest { padding-top: var(--s-6); } }
.gt-grid { display: grid; grid-template-columns: minmax(0, 780px); grid-template-areas: "top" "card" "samples"; row-gap: var(--s-6); }
.gt-top { grid-area: top; min-width: 0; }
.gt-card { grid-area: card; }
.gt-samples { grid-area: samples; min-width: 0; }
@container (min-width: 1100px) {
  .gt-grid { grid-template-columns: minmax(0, 780px) 320px; grid-template-areas: "top card" "samples card"; column-gap: var(--s-8); row-gap: var(--s-8); align-items: start; }
  .gt-card { position: sticky; top: var(--s-6); }
  .gt-card .gt-card-head { flex-direction: column; align-items: stretch; }
  .gt-card .gt-card-act { flex-direction: column; align-items: stretch; }
  .gt-card .gt-card-act .btn-lg { width: 100%; }
  .gt-card .gt-checks { grid-template-columns: 1fr; }
}
.gt-guest h1 { margin: 0; font: var(--t-title); color: var(--ink); }
.gt-lead { max-width: 640px; margin: var(--s-2) 0 0; font: var(--t-body); color: var(--ink-2); }
.gt-gcomp { margin-top: var(--s-4); }
.gt-gcomp textarea { flex: 1; }
.gt-gcomp-foot { display: flex; align-items: center; gap: var(--s-2); padding: 0 var(--s-3) var(--s-3) var(--s-4); }
.gt-gcomp-note { flex: 1; min-width: 0; margin: 0; font: var(--t-label); font-weight: 400; color: var(--muted); }
.gt-gcomp-foot > button { flex: none; }

/* the inline sign-in panel (R2 content, R3 placement; never a modal) */
.gt-panel { margin-top: var(--s-2); padding: var(--s-3) var(--s-4) var(--s-4); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-panel); transform-origin: top center; }
.gt-panel[hidden] { display: none; }
.gt-panel h2 { margin: 0; font: var(--t-item); color: var(--ink); }
.gt-panel h2:focus { outline: none; }
.gt-panel h2:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: var(--r-control); }
.gt-panel-say { margin: var(--s-1) 0 0; font: var(--t-meta); color: var(--ink-2); }
.gt-panel-saved { margin: var(--s-1) 0 0; font: var(--t-meta); color: var(--muted); }
.gt-panel-act { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); margin-top: var(--s-3); }
.gt-panel-foot { margin: var(--s-3) 0 0; font: var(--t-label); font-weight: 400; color: var(--muted); }

/* ---------- the offer card: access card, paywall card, locked card share one anatomy ---------- */
.gt-card, .gt-wall { padding: var(--s-4); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-panel); }
.gt-card-head, .gt-wall-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s-4); }
.gt-card-t { min-width: 0; }
.gt-card-t h2 { margin: 0; font: var(--t-item); color: var(--ink); }
.gt-price { margin: 2px 0 0; font: var(--t-meta); color: var(--ink-2); }
.gt-card-act { display: flex; flex: none; flex-direction: column; align-items: flex-end; gap: var(--s-2); }
.gt-card-note { max-width: 320px; margin: 0; font: var(--t-label); font-weight: 400; color: var(--muted); }
.gt-wall-act { flex: none; }
.gt-checks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-2) var(--s-6); margin: var(--s-4) 0 0; padding: var(--s-4) 0 0; list-style: none; border-top: 1px solid var(--line); }
.gt-checks li { display: flex; gap: var(--s-2); font: var(--t-meta); color: var(--ink); }
.gt-checks .icon { flex: none; width: 16px; height: 16px; margin-top: 2px; color: var(--accent); }
.gt-bar { display: flex; gap: var(--s-2); margin: var(--s-4) 0 0; padding: 10px var(--s-3); border-radius: var(--r-control); background: var(--surface-2); font: var(--t-label); font-weight: 400; color: var(--ink-2); }
.gt-bar .icon { flex: none; width: 16px; height: 16px; margin-top: 1px; color: var(--muted); }
.gt-link { display: inline-flex; align-items: center; min-height: 32px; margin-top: var(--s-2); font: var(--t-control); color: var(--accent); }

/* the paywall card: the composer's slot and width (SCREEN-signed-in 4) */
.gt-wall-body { margin-top: var(--s-4); padding-top: var(--s-3); border-top: 1px solid var(--line); }
.gt-checks + .gt-wall-body { border-top: 0; padding-top: 0; }
.gt-wall-say { max-width: 680px; margin: 0; font: var(--t-meta); color: var(--ink-2); }
.gt-more { margin-top: var(--s-2); }
.gt-more > summary { display: flex; align-items: center; min-height: 32px; font: var(--t-control); color: var(--ink-2); cursor: pointer; }
.gt-more > p { max-width: 680px; margin: var(--s-1) 0 var(--s-2); font: var(--t-meta); color: var(--muted); }
.gt-more > p strong { color: var(--ink); font-weight: 600; }
.gt-avail { margin-top: 0; }
.gt-wall-foot { margin-top: var(--s-2); padding-top: var(--s-2); border-top: 1px solid var(--line); }
.gt-wall-foot .gt-link { margin-top: 0; }
.gt-saved { display: flex; align-items: flex-start; gap: var(--s-3); margin-top: var(--s-3); padding: 10px var(--s-3); border-radius: var(--r-control); background: var(--surface-2); }
.gt-saved p { flex: 1; min-width: 0; margin: 0; font: var(--t-meta); color: var(--ink-2); overflow-wrap: anywhere; }
.gt-saved q { color: var(--ink); }

/* the used-up box (form C): the composer's size, sunk, reason first, one quiet next step (Supabase 0130) */
.gt-shell { display: flex; flex-direction: column; justify-content: space-between; min-height: 96px; padding: var(--s-3) var(--s-3) var(--s-2) var(--s-4); background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-panel); }
.gt-shell-body { display: flex; gap: var(--s-2); }
.gt-shell-body .icon { flex: none; width: 16px; height: 16px; margin-top: 3px; color: var(--muted); }
.gt-shell-body p { margin: 0; font: var(--t-meta); color: var(--ink-2); }
.gt-shell-body strong { font-weight: 600; color: var(--ink); }
.gt-shell-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-1) var(--s-3); margin-top: var(--s-2); }
.gt-shell-bal { margin: 0; font: var(--t-label); font-weight: 400; color: var(--muted); }
.gt-shell-foot .gt-link { margin-top: 0; }
.gt-shell-foot > .gt-step, .gt-shell-foot > .gt-link { margin-left: auto; } /* the one next step sits right even when there is no balance */
.gt-shell[aria-busy="true"] .gt-shell-body { opacity: .72; }
.gt-slot-link { margin: 0; }
.gt-slot-more .gt-more { margin-top: var(--s-1); }
.ask-dock .gt-wall { max-height: 60vh; overflow: auto; }
.gt-fold { display: none; }
.gt-checks--fold { margin-top: var(--s-2); padding-top: 0; border-top: 0; grid-template-columns: 1fr; }

/* the question saved before sign-in, above the real composer */
.gt-handover { display: flex; align-items: center; gap: var(--s-3); margin: var(--s-3) 0 calc(-1 * var(--s-1)); font: var(--t-meta); color: var(--muted); transform-origin: left center; }
.gt-handover p { flex: 1; margin: 0; }
.ask-empty .gt-wall, .ask-empty .gt-shell { margin-top: var(--s-3); }

/* ---------- sample answers ---------- */
.gt-samples h2 { margin: 0; font: var(--t-h2); color: var(--ink); }
.gt-samples-note { margin: var(--s-1) 0 0; font: var(--t-meta); color: var(--muted); }
.gt-picker { margin-top: var(--s-3); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-panel); overflow: hidden; }
.gt-tab { display: flex; align-items: center; justify-content: flex-start; gap: var(--s-2); width: 100%; min-height: 44px; padding: 0 var(--s-4); border: 0; border-radius: 0; background: transparent; color: var(--ink-2); font: var(--t-meta); text-align: left; }
.gt-tab + .gt-tab { border-top: 1px solid var(--line); }
.gt-tab:hover { background: var(--surface-2); color: var(--ink); }
.gt-tab[aria-selected="true"] { background: var(--surface-2); color: var(--ink); font-weight: 600; }
.gt-tab:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
.gt-tab-icon { display: inline-flex; flex: none; color: var(--muted); }
.gt-tab-icon .icon { width: 16px; height: 16px; }
.gt-tab-t { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gt-turn { margin-top: var(--s-6); }
.gt-turn:focus-visible { outline: 2px solid var(--focus); outline-offset: 4px; border-radius: var(--r-control); }
.gt-band { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-1) var(--s-2); margin-bottom: var(--s-3); font: var(--t-label); font-weight: 400; color: var(--muted); }
.gt-answer { margin-top: var(--s-3); }
.gt-tools { margin: 0; font: var(--t-label); font-weight: 400; color: var(--muted); }
.gt-tools span { color: var(--ink-2); font-weight: 500; }
.gt-scard { margin-top: var(--s-3); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-panel); }
.gt-scard + .gt-scard { margin-top: var(--s-4); }
.gt-scard-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s-3); padding: var(--s-3) var(--s-4); border-bottom: 1px solid var(--line); }
.gt-scard-head h3 { margin: 0; font: var(--t-control); font-weight: 600; color: var(--ink); }
.gt-scard-head p { margin: 2px 0 0; font: var(--t-label); font-weight: 400; color: var(--muted); }
.gt-scard-head .badge { flex: none; }
.gt-rows { margin: 0; padding: 0; list-style: none; }
.gt-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--s-1) var(--s-3); padding: var(--s-3) var(--s-4); }
.gt-row + .gt-row { border-top: 1px solid var(--line); }
.gt-row-t { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 var(--s-2); margin: 0; font: var(--t-meta); color: var(--ink-2); }
.gt-code { font: var(--t-control); font-weight: 600; color: var(--ink); }
a.gt-code { color: var(--accent); }
.gt-row-title--first { font: var(--t-control); color: var(--ink); }
.gt-row-meta { margin: 2px 0 0; font: var(--t-label); font-weight: 400; color: var(--muted); }
.gt-row-side { display: flex; flex-direction: column; align-items: flex-end; gap: var(--s-1); }
.gt-row-note { font: var(--t-label); font-weight: 400; color: var(--muted); text-align: right; }
.gt-row-hint { grid-column: 1 / -1; margin: 0; font: var(--t-label); font-weight: 400; color: var(--muted); }
.gt-st { font: var(--t-label); color: var(--ink-2); white-space: nowrap; }
.gt-st.is-done { color: var(--positive); }
.gt-week { margin: 0; padding: var(--s-1) 0; list-style: none; }
.gt-day { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: var(--s-3); padding: var(--s-2) var(--s-4); }
.gt-day-n { font: var(--t-label); color: var(--muted); padding-top: 3px; }
.gt-day-items { display: flex; flex-wrap: wrap; gap: var(--s-1) var(--s-2); }
.gt-blk { display: inline-flex; flex-wrap: wrap; gap: 0 6px; padding: 3px var(--s-2); border-radius: var(--r-control); font: var(--t-label); font-weight: 400; }
.gt-blk--opt { border: 1px dashed var(--accent); color: var(--ink); background: transparent; }
.gt-blk-t { color: var(--muted); }
.gt-blk--busy { background: var(--surface-2); color: var(--ink-2); }
.gt-prov { margin: 0; padding: var(--s-2) var(--s-4); border-top: 1px solid var(--line); font: var(--t-label); font-weight: 400; color: var(--muted); }

/* ---------- Science GPA and Premed, locked ---------- */
.gt-lock .page-head h1 { margin: 0; }
.gt-wall--page { max-width: 780px; margin-top: var(--s-6); }
.gt-sec { max-width: 780px; margin-top: var(--s-8); }
.gt-sec h2 { margin: 0; font: var(--t-h2); color: var(--ink); }
.gt-checks--plain { grid-template-columns: 1fr; border-top: 0; padding-top: 0; margin-top: var(--s-3); }
.gt-checks--plain strong { font-weight: 600; }
.gt-free p { max-width: 680px; margin: var(--s-2) 0 0; font: var(--t-meta); color: var(--ink-2); }

/* ---------- phones (390 down to 320) ---------- */
@media (max-width: 767px) {
  .gt-guest { padding: var(--s-4) var(--s-4) var(--s-8); }
}
@media (max-width: 599px) {
  .gt-card-head, .gt-wall-head { flex-direction: column; align-items: stretch; gap: var(--s-3); }
  .gt-card-act { align-items: stretch; }
  .gt-card-act > .btn-lg, .gt-wall-act > .primary { width: 100%; }
  .gt-card-note { max-width: none; }
  .gt-checks { grid-template-columns: 1fr; }
  .gt-panel-act { flex-direction: column; align-items: stretch; }
  .gt-panel-act > .text-btn { align-self: flex-start; }
  .gt-gcomp-foot { flex-wrap: wrap; }
  .gt-row { grid-template-columns: 1fr; }
  .gt-row-side { flex-direction: row; flex-wrap: wrap; align-items: center; }
  .gt-row-note { text-align: left; }
  .gt-gcomp textarea { font-size: 16px; }
  /* in a thread on a phone: the checklist folds into "What the pass includes", and the card sits in the page's flow
     at the end of the thread instead of a sticky box with its own scroll (check 0 m5) */
  .ask-dock:has(.gt-wall) { position: static; }
  .ask-dock .gt-wall { max-height: none; overflow: visible; }
  .gt-checks--unfold { display: none; }
  .gt-fold { display: block; }
}
@media (pointer: coarse) { .gt-gcomp textarea { font-size: 16px; } }