/* ===== MOBILE OVERFLOW PATCHES (append to end of styles.css) ===== */

/* 1) Absolute overflow kill-switch (keeps layout from panning sideways) */
html, body { overflow-x: hidden; }

/* 2) Containers never exceed the viewport width */
#ts-ref, .ts-wrap, .ts-card { max-width: 100%; }

/* 3) Media scales down */
img, video { max-width: 100%; height: auto; }

/* 4) Long strings wrap instead of pushing layout wide */
.ts-label,
.ts-chip,
.ts-checkrow label,
.ts-inline label {
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* 5) Chips: allow multi-line text and full-width stacking on small screens */
.ts-optrow { gap: 8px; }
.ts-chip {
  white-space: normal;         /* was nowrap — this caused overflow */
  max-width: 100%;
}
@media (max-width: 640px) {
  .ts-optrow {                 /* stack chips into one column on phones */
    display: grid;
    grid-template-columns: 1fr;
  }
  .ts-chip { width: 100%; }
}

/* 6) “Other:” inline rows can wrap cleanly */
.ts-inline { flex-wrap: wrap; min-width: 0; }
.ts-inline > * { min-width: 0; }

/* 7) Header compacts on very narrow screens (logo + pill won’t overflow) */
@media (max-width: 420px) {
  .site-header__inner { flex-direction: column; align-items: flex-start; gap: 8px; }
  .brand img { max-width: 180px; }
  .brand-tag { align-self: flex-start; }
  .ts-brand img { max-width: 150px; }
}

/* 8) Action buttons: stack and fill width on small phones */
@media (max-width: 420px) {
  .ts-actions { flex-direction: column; align-items: stretch; }
  .ts-actions .ts-btn { width: 100%; }
}

/* 9) Grids collapse earlier so inputs don’t feel cramped */
@media (max-width: 900px){
  .ts-grid { grid-template-columns: 1fr; }
}

/* 10) iOS safe-area polish (keeps edges from clipping behind notches) */
.site-header {
  padding-top: calc(12px + env(safe-area-inset-top));
  padding-left: calc(16px + env(safe-area-inset-left));
  padding-right: calc(16px + env(safe-area-inset-right));
}
.site-footer {
  padding-left: calc(16px + env(safe-area-inset-left));
  padding-right: calc(16px + env(safe-area-inset-right));
  padding-bottom: calc(16px + env(safe-area-inset-bottom));
}

/* ========= Root + body ========= */
:root{
  --bg:#0c1320; --card:#121a2a; --ink:#e8eefb; --muted:#a7b4d4;
  --accent:#15a1ff; --accent2:#3bd1c6; --warn:#d4af37;
  --radius:16px; --line:rgba(255,255,255,.08);
}
html,body{margin:0;padding:0}
html{color-scheme:dark light}
body{
  background: var(--bg);
  color: var(--ink);
  font-family: Inter, system-ui, Segoe UI, Roboto, Arial, sans-serif;
  -webkit-text-size-adjust: 100%; /* iOS no-zoom scaling */
  text-rendering: optimizeLegibility;
}

/* avoid iOS zoom: inputs >= 16px */
input, select, textarea { font-size: 16px; line-height: 1.3; }

/* ========= Site header/footer (mimic main site vibe) ========= */
.site-header{
  position: sticky; top: 0; z-index: 50;
  background: rgba(6, 10, 20, .75);
  backdrop-filter: saturate(140%) blur(8px);
  border-bottom: 1px solid rgba(255,255,255,.06);
  padding: calc(12px + env(safe-area-inset-top)) 16px 12px;
}
.site-header__inner{
  max-width: 1200px; margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between;
}
.brand img{ display:block; height:auto; max-width: 220px; }
.brand-tag{
  font-weight: 700; letter-spacing: .08em; font-size: 12px;
  padding: 6px 10px; border-radius: 999px;
  color: #04243b; background: linear-gradient(90deg,var(--accent),var(--accent2));
}

.site-footer{
  border-top: 1px solid rgba(255,255,255,.06);
  background: rgba(6, 10, 20, .6);
  padding: 16px calc(16px + env(safe-area-inset-right)) calc(16px + env(safe-area-inset-bottom)) calc(16px + env(safe-area-inset-left));
}
.site-footer__inner{ max-width: 1200px; margin: 0 auto; color: var(--muted); }

/* ========= Layout container ========= */
#ts-ref *{box-sizing:border-box}
#ts-ref a,#ts-ref p,#ts-ref h1,#ts-ref h2,#ts-ref h3,#ts-ref label{margin:0}

.ts-wrap{
  /* stack a subtle brandy background */
  min-height: 100vh;       /* fallback */
  min-height: 100svh;      /* small viewport units (mobile) */
  min-height: 100dvh;      /* dynamic viewport units (iOS/Chrome) */
  display:flex;align-items:flex-start;justify-content:center;
  padding: 32px 16px;
  background:
    radial-gradient(1200px 600px at 80% 20%, rgba(21,161,255,.08), transparent 60%),
    radial-gradient(900px 500px at 20% 80%, rgba(59,209,198,.08), transparent 60%);
}

/* ========= Card ========= */
.ts-card{
  width:100%;max-width:980px;
  background:var(--card);
  border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:0 20px 50px rgba(0,0,0,.35);overflow:hidden
}
.ts-head{padding:22px 22px 0}
.ts-brand{display:flex;gap:12px;align-items:center}
.ts-brand img{height:auto; max-height: 40px; width:auto}
.ts-mini{font-weight:700;letter-spacing:.04em;color:var(--muted);font-size:14px}
h1{margin:14px 0 8px;font-size: clamp(20px, 2.2vw + 12px, 28px);line-height:1.2}

/* ========= Form ========= */
.ts-body{padding:20px 22px;display:grid;gap:18px}
.ts-section{border-top:1px solid var(--line);padding-top:16px;margin-top:2px}
.ts-section:first-of-type{border-top:0;padding-top:0}
.ts-section h2{font-size: clamp(14px, 1.2vw + 10px, 16px);margin:0 0 10px;color:#d5def6;letter-spacing:.02em}

.ts-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.ts-grid1{display:grid;grid-template-columns:1fr;gap:12px}

.ts-label{font-size:12px;color:var(--muted);margin-bottom:6px;display:block}

.hp{position:absolute !important; left:-10000px !important; width:1px !important; height:1px !important; overflow:hidden !important}

input, textarea, select{
  width:100%;background:#0c1526;border:1px solid var(--line);color:var(--ink);
  border-radius:12px;padding:12px 14px;outline:none;
  transition:border .15s ease, box-shadow .15s ease;
  min-height: 44px; /* touch target */
}
input:focus, textarea:focus, select:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(21,161,255,.2)}
textarea{min-height:120px;resize:vertical}

.ts-optrow{display:flex;flex-wrap:wrap;gap:10px}
.ts-chip{display:inline-flex;align-items:center;gap:8px;background:#0c1526;border:1px solid var(--line);border-radius:12px;padding:10px 12px;white-space:nowrap}
.ts-inline{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.ts-checkrow{display:grid;grid-template-columns:auto 1fr;gap:10px;align-items:start}

input[type="checkbox"], input[type="radio"]{
  width:18px;height:18px;accent-color:var(--accent);
  flex:0 0 auto; transform: translateY(1px);
}

.ts-actions{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:0 22px 20px}
.ts-btn{appearance:none;border:0;cursor:pointer;padding:14px 18px;border-radius:12px;font-weight:700;min-height:44px}
.ts-btn-primary{background:linear-gradient(90deg,var(--warn),#f6d05f);color:#1a1400}
.ts-btn-ghost{background:transparent;color:var(--muted)}

.ts-error{color:#ff6b6b;font-size:13px;margin-top:6px;display:none}
.ts-ok{color:#3bd1c6;font-size:13px;margin-top:6px;display:none}

.mt-10{ margin-top:10px }

/* ========= Responsive tweaks ========= */
@media (max-width: 900px){
  .ts-grid{grid-template-columns:1fr}
  .ts-head{padding:18px 16px 0}
  .ts-body{padding:16px}
  .ts-actions{padding:0 16px 16px}
}

@media (min-width: 1200px){
  .site-header__inner, .site-footer__inner{ max-width: 1280px }
}

/* ========= Reduced motion ========= */
@media (prefers-reduced-motion: reduce){
  *{scroll-behavior:auto !important; transition:none !important}
}

/* ========= Tap polish ========= */
a, button, input, label{ -webkit-tap-highlight-color: transparent; }
button, input[type="button"], input[type="submit"]{ touch-action: manipulation; }

/* === HARD STOP for sideways scroll === */
html, body { overflow-x: hidden; }
#ts-ref, .ts-wrap, .ts-card, .ts-head, .ts-body { max-width: 100%; width: 100%; }
img, video { max-width: 100%; height: auto; display: block; }

/* === CRITICAL: allow grid/flex children to shrink inside columns === */
.ts-grid > *, .ts-grid1 > *,
.ts-checkrow > *, .ts-inline > *,
.ts-optrow > * {
  min-width: 0;   /* <-- fixes min-content overflow in CSS Grid/Flex */
}

/* Inputs can shrink; keep 100% but allow below intrinsic min */
input, textarea, select { min-width: 0; }

/* Headings/labels can wrap instead of forcing layout wide */
.ts-section h2, .ts-label, .ts-chip, .ts-checkrow label, .ts-inline label {
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* Chips: multi-line + no overflow */
.ts-optrow { gap: 8px; }
.ts-chip {
  display: inline-flex;
  /* align-items: flex-start; */
  gap: 8px;
  white-space: normal;          /* was nowrap; caused overflow on phones */
  max-width: 100%;
}
.ts-chip input { flex: 0 0 auto; }

/* On smaller phones, stack chips to one column */
@media (max-width: 640px) {
  .ts-optrow { display: grid; grid-template-columns: 1fr; }
  .ts-chip { width: 100%; }
}

/* Inline "Other:" rows can wrap cleanly */
.ts-inline { flex-wrap: wrap; min-width: 0; }
.ts-inline > * { min-width: 0; }

/* Header compacts; buttons stack on very narrow screens */
@media (max-width: 420px) {
  .site-header__inner { flex-direction: column; align-items: flex-start; gap: 8px; }
  .brand img { max-width: 180px; }
  .ts-brand img { max-width: 150px; }
  .ts-actions { flex-direction: column; align-items: stretch; }
  .ts-actions .ts-btn { width: 100%; }
}

/* Collapse two-column grids earlier so fields don't squeeze */
@media (max-width: 900px) { .ts-grid { grid-template-columns: 1fr; } }

/* Safe-area polish for iOS notches */
.site-header {
  padding-top: calc(12px + env(safe-area-inset-top));
  padding-left: calc(16px + env(safe-area-inset-left));
  padding-right: calc(16px + env(safe-area-inset-right));
}
.site-footer {
  padding-left: calc(16px + env(safe-area-inset-left));
  padding-right: calc(16px + env(safe-area-inset-right));
  padding-bottom: calc(16px + env(safe-area-inset-bottom));
}
p, label, h2, h1 {
  padding-top: 10px;
  padding-bottom: 5px;
}