/* ==========================================================================
   Main (setup) screen — mobile-first corrections.

   Measured at 390x844 before changing anything:
     start button      102x64, left:16, centre at 17% of the width
                       -> a right thumb has to cross the whole screen for the
                          single most important action
     rail              631px tall, starting at y=578
     work area         526px tall
                       -> the supporting reference (bank table, exam structure)
                          is TALLER than the thing the user came to do
     gap after CTA     48px of dead space
     ดูแพ็กและราคา       37px tall -> below the 44px minimum
     doc height        1209px on an 844px screen

   The desktop composition is fine: rail beside work area, CTA inline with its
   summary. These rules only reshape the phone layout, where a side rail becomes
   a stack and the CTA has to be thumb-reachable.
   ========================================================================== */

/* ---------- length picker notice ---------- */

/* Out-of-range presets are hidden in JS rather than dimmed, so there is no
   "capped" state to style. What remains is one line of prose stating the free
   limit and what the full bank offers. */
#lengthNotice {
  margin-top: 10px;
  border-color: rgba(245, 158, 11, 0.22);
  background: rgba(245, 158, 11, 0.07);
  color: #fcd34d;
}

/* The picker is a grid, so a hidden option must not leave a gap. */
#lengthPicker .seg[hidden] { display: none !important; }

/* ---------- desktop: the folds are plain sections, always open ---------- */

/* <details> is used so phones can collapse the reference material, but on a wide
   screen there is room for all of it — so the disclosure affordance is removed
   entirely rather than inviting a pointless click. */
/* Desktop must never hide the reference, regardless of the open attribute state
   a phone visit may have left behind. */
@media (min-width: 721px) {
  .rail-fold > summary {
    display: block;
    list-style: none;
    cursor: default;
    pointer-events: none;   /* not interactive at this width */
  }
  .rail-fold > summary::-webkit-details-marker { display: none; }
  .rail-fold > summary::after { content: none; }
  .rail-fold { margin-bottom: 14px; }
  /* Content stays visible even when the element is closed. */
  .rail-fold:not([open]) > *:not(summary) { display: revert; }
  .rail-fold > table { display: table; }
}

@media (max-width: 720px) {

  /* ---------- the CTA becomes a full-width, thumb-height action ---------- */

  /* At 102px wide and hard left it was both small and out of reach. Full width
     removes the reach problem entirely — there is no wrong side to a full-width
     button. */
  #btnStart {
    width: 100%;
    min-height: 52px;
    justify-content: center;
    font-size: 15.5px;
    font-weight: 560;
    border-radius: 11px;
    box-shadow:
      inset 0 1px 0 0 rgba(255, 255, 255, 0.18),
      0 8px 20px -8px rgba(79, 70, 229, 0.55);
  }
  #btnStart:active { transform: translateY(1px); }

  /* The action row stacks: summary above, button below, so the button sits at
     the bottom of the block nearest the thumb. The setup screen's action row is
     .exam-actions (shared with the exam view), so scope it to the setup view
     only — the exam's prev/next row must keep its horizontal layout. */
  #viewSetup .exam-actions {
    display: flex;
    flex-direction: column-reverse;   /* summary reads above the button */
    align-items: stretch;
    gap: 10px;
    margin-top: 8px;
  }
  #viewSetup .exam-actions .score-detail {
    text-align: center;
    font-size: 12px;
    line-height: 1.6;
  }

  /* Reclaim the 48px of dead space between the action and the reference below. */
  .work { padding-bottom: 12px; }
  .rail { margin-top: 4px; }

  /* ---------- reference material is collapsed by default ---------- */

  /* The bank table and exam-structure prose are useful but not why anyone opened
     the app. On a phone they become a disclosure the user can open, instead of
     631px of scrolling placed before the footer. */
  .rail-fold > summary {
    display: flex; align-items: center; gap: 8px;
    min-height: 48px;
    padding: 0 12px;
    list-style: none;
    cursor: pointer;
    color: var(--ink-2);
    font-size: 13px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--sheen-1);
    transition: background .14s, border-color .14s;
  }
  .rail-fold > summary::-webkit-details-marker { display: none; }
  .rail-fold > summary:hover { background: var(--sheen-2); border-color: var(--line-hi); }
  .rail-fold > summary::after {
    content: "";
    margin-left: auto;
    width: 7px; height: 7px;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: rotate(45deg);
    transition: transform .18s ease;
    opacity: .6;
  }
  .rail-fold[open] > summary::after { transform: rotate(-135deg); }
  .rail-fold[open] > summary { margin-bottom: 8px; }
  .rail-fold { margin: 0 0 10px; }

  /* ---------- section cards: tap-sized, less dense ---------- */

  [data-section] { min-height: 56px; }

  /* ---------- length picker: 2x2 instead of four cramped columns ---------- */

  /* Four 68px columns on a 390px screen left each option barely wider than its
     own label. Two rows of two gives each option room to breathe. */
  #lengthPicker {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }
  #lengthPicker .seg { min-height: 56px; width: auto; }

  /* ---------- every remaining control clears 44px ---------- */

  /* #upgradePanel is rendered from JS, so target it directly rather than relying
     on a .rail .btn descendant match — a first pass missed this button and it
     stayed at 37px. */
  .rail .btn,
  .rail a.btn,
  #upgradePanel .btn,
  #upgradePanel a.btn {
    min-height: 46px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
}

/* Very narrow phones: keep the summary readable rather than shrinking it away. */
@media (max-width: 380px) {
  #viewSetup .exam-actions .score-detail { font-size: 11.5px; }
  #lengthPicker .seg { min-height: 52px; }
}