/* site-interiors.css
   Scoped interior-page styles loaded only by Sonnet-owned pages.
   All values reference the CSS variables declared in styles.css.
   Do not add styles that affect Sol-owned shared files.
*/

/* ── How AI Works — step navigation controls ─────────────────── */
.aifw-stepper{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:10px 0 2px;
  margin-top:6px;
}
.aifw-step-num{
  flex:1;
  font-size:13px;
  font-weight:900;
  color:var(--accent);
  text-align:center;
  letter-spacing:.04em;
}
.aifw-step-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:44px;
  min-height:44px;
  padding:0 8px;
  border:1px solid var(--line);
  border-radius:8px;
  background:var(--panel);
  color:var(--deep);
  font:inherit;
  font-size:18px;
  font-weight:900;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  transition:border-color .12s ease,color .12s ease;
}
.aifw-step-btn:hover:not(:disabled){
  border-color:var(--accent);
  color:var(--accent);
}
.aifw-step-btn:disabled{
  opacity:.35;
  cursor:default;
}
.aifw-step-btn:focus-visible{
  outline:3px solid var(--rose);
  outline-offset:2px;
}

/* ── suggestions.html / contact pages — form status feedback ──── */
.form-status{
  min-height:1.4em;
  color:var(--muted);
  font-size:14px;
}
.form-status.success{color:#0f6b3f;font-weight:800}
.form-status.error{color:var(--rose);font-weight:800}

/* ── Account pages — table scroll wrapper ─────────────────────── */
.table-scroll{
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  border:1px solid var(--line);
  border-radius:8px;
}
.table-scroll table{
  width:100%;
  border-collapse:collapse;
  font-size:.9rem;
  min-width:420px;
}
.table-scroll th,
.table-scroll td{
  padding:.5rem .7rem;
  text-align:left;
  border-bottom:1px solid var(--line);
  white-space:nowrap;
}
.table-scroll tr:last-child td{border-bottom:0}
.account-actions{display:flex;align-items:center;gap:10px;margin-left:auto;color:var(--muted);font-size:13px}
.account-actions .button{min-height:44px;white-space:nowrap}

/* ── Phone overrides for interior pages at 390px ──────────────── */
@media(max-width:640px){
  .account-actions span{display:none}
  /* Prevent iOS auto-zoom on form inputs — keep 16px+ on phone */
  .interior-form input,
  .interior-form textarea,
  .interior-form select{
    font-size:16px !important;
  }
  /* Store card grid: single column below 480px */
  .card-grid{
    grid-template-columns:1fr;
  }
  /* sample-output grid */
  .sample-output{
    grid-template-columns:1fr;
  }
}

@media(max-width:480px){
  /* buy-box in transcriber-app: price fits */
  .buy-price{font-size:38px}
  /* compare-grid in transcriber-app */
  .compare-grid{grid-template-columns:1fr}
  /* flow-rail steps */
  .flow-rail-steps{grid-template-columns:1fr}
}