/* ═══════════════════════════════════════════════════════════════
   Call the Stars — styles (ct- prefix)
   Aesthetic: HUD / Sci-Fi FUI — fine hairlines, glow, scanning
   lines, corner brackets, monospace telemetry. Dark, mission-control.
   ═══════════════════════════════════════════════════════════════ */

.ct-root{
  --bg:#030712; --bg2:#070B1F;
  --ink:#F8FAFC; --ink-dim:#94A3B8; --ink-faint:#475569;
  --purple:#7C3AED; --blue:#38BDF8;
  --hairline:rgba(148,163,184,.14);
  --hairline-soft:rgba(148,163,184,.08);
  --heading:'Space Grotesk',sans-serif;
  --body:'DM Sans',sans-serif;
  --mono:'IBM Plex Mono',monospace;
  --ease-out:cubic-bezier(.16,1,.3,1);

  position:relative;z-index:1;
  max-width:1280px;margin:0 auto;
  padding:clamp(7rem,12vh,9rem) clamp(1.25rem,4vw,4rem) 6rem;
  color:var(--ink);
  font-family:var(--body);
  -webkit-font-smoothing:antialiased;
  line-height:1.6;
}
.ct-root ::selection{background:rgba(124,58,237,.35);color:#fff}
.ct-page{position:relative;z-index:1}
.ct-root a:focus-visible,.ct-root button:focus-visible,.ct-root textarea:focus-visible,.ct-root input:focus-visible{
  outline:1px solid var(--blue);outline-offset:3px;
}

.ct-sky{position:fixed;inset:0;z-index:0;pointer-events:none;background:
  radial-gradient(ellipse 70% 50% at 80% -10%,rgba(124,58,237,.10),transparent 60%),
  radial-gradient(ellipse 60% 50% at 10% 110%,rgba(56,189,248,.06),transparent 60%),
  linear-gradient(180deg,#04060f,var(--bg) 70%)}

/* HUD corner-bracket frame */
.ct-hud{position:relative;border:1px solid var(--hairline);background:rgba(7,11,31,.45);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.ct-hud::before,.ct-hud::after,
.ct-hud > .ct-corner{content:"";position:absolute;width:14px;height:14px;pointer-events:none}
.ct-hud::before{top:-1px;left:-1px;border-top:2px solid var(--purple);border-left:2px solid var(--purple)}
.ct-hud::after{bottom:-1px;right:-1px;border-bottom:2px solid var(--purple);border-right:2px solid var(--purple)}
.ct-hud > .ct-corner.tl{top:-1px;left:-1px;border-top:2px solid var(--purple);border-left:2px solid var(--purple)}
.ct-hud > .ct-corner.br{bottom:-1px;right:-1px;border-bottom:2px solid var(--purple);border-right:2px solid var(--purple)}

/* header */
.ct-head{margin-bottom:clamp(2rem,5vh,3.5rem)}
.ct-kicker{font-family:var(--mono);font-size:.66rem;letter-spacing:.32em;text-transform:uppercase;color:var(--purple);display:flex;align-items:center;gap:.8rem}
.ct-kicker::before{content:"";width:34px;height:1px;background:var(--purple);box-shadow:0 0 8px var(--purple)}
.ct-title{font-family:var(--heading);font-weight:700;font-size:clamp(2.4rem,6vw,4.6rem);line-height:1.02;letter-spacing:-.02em;margin:.7rem 0 .6rem}
.ct-title em{font-style:normal;color:transparent;-webkit-text-stroke:1px rgba(148,163,184,.5)}
.ct-lede{color:var(--ink-dim);font-weight:300;max-width:54ch;font-size:clamp(1rem,1.3vw,1.12rem)}

/* compose */
.ct-compose{padding:clamp(1.4rem,3vw,2.2rem);margin-top:1.5rem}
.ct-field{margin-bottom:1.4rem}
.ct-label{display:block;font-family:var(--mono);font-size:.62rem;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-faint);margin-bottom:.6rem}
.ct-input,.ct-textarea{
  width:100%;background:rgba(3,7,18,.6);border:1px solid var(--hairline);color:var(--ink);
  font-family:var(--body);font-weight:300;font-size:1.02rem;padding:.95rem 1.1rem;
  transition:border-color .35s,box-shadow .35s;resize:none;
}
.ct-input::placeholder,.ct-textarea::placeholder{color:var(--ink-faint)}
.ct-input:focus,.ct-textarea:focus{border-color:rgba(124,58,237,.55);box-shadow:0 0 0 1px rgba(124,58,237,.25),0 0 40px rgba(124,58,237,.08)}
.ct-textarea{min-height:110px;line-height:1.7}
.ct-count{font-family:var(--mono);font-size:.6rem;letter-spacing:.12em;color:var(--ink-faint);text-align:right;margin-top:.4rem}

/* destination grid */
.ct-dests{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:12px;margin-top:.4rem}
.ct-dest{
  position:relative;text-align:left;cursor:pointer;color:inherit;font:inherit;
  background:rgba(5,9,28,.6);border:1px solid var(--hairline-soft);
  padding:1.1rem 1.15rem 1.2rem;transition:border-color .35s,transform .35s var(--ease-out),background .35s;
}
.ct-dest:hover{border-color:rgba(56,189,248,.4);transform:translateY(-3px)}
.ct-dest.active{border-color:var(--purple);background:rgba(124,58,237,.08);box-shadow:0 0 30px rgba(124,58,237,.12)}
.ct-dest-name{font-family:var(--heading);font-weight:600;font-size:1.05rem;letter-spacing:.02em}
.ct-dest-type{font-family:var(--mono);font-size:.58rem;letter-spacing:.1em;color:var(--ink-faint);text-transform:uppercase;margin-top:.25rem}
.ct-dest-time{font-family:var(--mono);font-size:.66rem;letter-spacing:.06em;color:var(--blue);margin-top:.7rem}
.ct-dest-time b{color:var(--blue);font-weight:500}
.ct-dest .ct-pick{position:absolute;top:.9rem;right:.9rem;width:16px;height:16px;border:1px solid var(--hairline);border-radius:50%;transition:.3s}
.ct-dest.active .ct-pick{border-color:var(--purple);background:var(--purple);box-shadow:0 0 10px var(--purple)}

/* transmit button */
.ct-transmit{
  display:inline-flex;align-items:center;gap:.8rem;margin-top:1.6rem;
  font-family:var(--mono);font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--ink);background:none;border:1px solid var(--purple);padding:1rem 1.8rem;cursor:pointer;
  transition:background .35s,box-shadow .35s,opacity .3s,transform .2s;
}
.ct-transmit:hover:not(:disabled){background:rgba(124,58,237,.14);box-shadow:0 0 40px rgba(124,58,237,.22)}
.ct-transmit:active:not(:disabled){transform:translateY(1px)}
.ct-transmit:disabled{opacity:.35;cursor:not-allowed;border-color:var(--hairline)}
.ct-transmit svg{width:15px;height:15px}

/* transmission view */
.ct-transmission{display:none;margin-top:1.5rem;padding:clamp(1.4rem,3vw,2.4rem)}
.ct-transmission.show{display:block;animation:ctFade .6s var(--ease-out)}
@keyframes ctFade{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.ct-stage{position:relative;width:100%;aspect-ratio:16/9;min-height:280px;border:1px solid var(--hairline);background:linear-gradient(180deg,#04060f,#070b1f);overflow:hidden}
.ct-canvas{position:absolute;inset:0;width:100%;height:100%}
.ct-scan{position:absolute;left:0;right:0;top:0;height:2px;background:linear-gradient(90deg,transparent,var(--blue),transparent);opacity:.5;animation:ctScan 4.5s linear infinite}
@keyframes ctScan{0%{transform:translateY(0)}100%{transform:translateY(280px)}}
.ct-stage-tag{position:absolute;top:.9rem;left:1rem;font-family:var(--mono);font-size:.58rem;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-faint)}
.ct-stage-tag b{color:var(--blue);font-weight:500}

.ct-readouts{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1px;background:var(--hairline-soft);border:1px solid var(--hairline-soft);margin-top:1.2rem}
.ct-ro{background:rgba(5,9,28,.7);padding:1rem 1.1rem}
.ct-ro-lab{font-family:var(--mono);font-size:.56rem;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-faint)}
.ct-ro-val{font-family:var(--heading);font-weight:600;font-size:clamp(1.05rem,2vw,1.5rem);margin-top:.35rem;font-variant-numeric:tabular-nums}
.ct-ro-val small{font-family:var(--mono);font-size:.62rem;color:var(--ink-dim);letter-spacing:.05em;font-weight:400}
.ct-ro-val.blue{color:var(--blue)}
.ct-ro-val.purple{color:var(--purple)}

.ct-milestone{margin-top:1.1rem;font-family:var(--mono);font-size:.68rem;letter-spacing:.08em;color:var(--ink-dim);display:flex;align-items:center;gap:.7rem;min-height:1.4em}
.ct-milestone::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--blue);box-shadow:0 0 10px var(--blue);flex:none;animation:ctPulse 1.8s ease-in-out infinite}
@keyframes ctPulse{0%,100%{opacity:.4}50%{opacity:1}}

.ct-delivered{display:none;margin-top:1.2rem;font-family:var(--mono);font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;color:var(--purple);align-items:center;gap:.7rem}
.ct-delivered.show{display:flex}
.ct-delivered svg{width:18px;height:18px}

.ct-actions{display:flex;flex-wrap:wrap;gap:1rem;margin-top:1.4rem}
.ct-btn{
  display:inline-flex;align-items:center;gap:.6rem;cursor:pointer;font:inherit;
  font-family:var(--mono);font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;
  padding:.85rem 1.4rem;border:1px solid var(--hairline);background:none;color:var(--ink);transition:.3s;
}
.ct-btn:hover{border-color:rgba(56,189,248,.5)}
.ct-btn.primary{border-color:var(--purple);color:var(--ink)}
.ct-btn.primary:hover{background:rgba(124,58,237,.14)}
.ct-btn svg{width:14px;height:14px}
.ct-btn:disabled{opacity:.35;cursor:not-allowed}

/* cosmic card */
.ct-card-wrap{display:none;margin-top:1.6rem}
.ct-card-wrap.show{display:block;animation:ctFade .6s var(--ease-out)}
.ct-card-preview{width:100%;max-width:340px;border:1px solid var(--hairline);display:block;margin-bottom:1rem}

/* transmission log */
.ct-log{margin-top:3rem}
.ct-log h2{font-family:var(--heading);font-size:1.2rem;font-weight:600;letter-spacing:.02em;margin-bottom:1rem;color:var(--ink-dim)}
.ct-log-list{display:flex;flex-direction:column;gap:.6rem}
.ct-log-item{display:flex;align-items:center;gap:1rem;border:1px solid var(--hairline-soft);padding:.8rem 1rem;background:rgba(5,9,28,.4);cursor:pointer;transition:border-color .3s,background .3s,transform .3s var(--ease-out)}
.ct-log-item:hover{border-color:rgba(124,58,237,.5);background:rgba(124,58,237,.07);transform:translateX(3px)}
.ct-li-del{flex:none;width:30px;height:30px;display:grid;place-items:center;background:none;border:1px solid var(--hairline-soft);color:var(--ink-faint);cursor:pointer;transition:.3s var(--ease-out)}
.ct-li-del:hover{border-color:rgba(244,63,94,.55);color:#FB7185;background:rgba(244,63,94,.1)}
.ct-li-del svg{width:13px;height:13px}
.ct-log-item .ct-li-name{font-family:var(--heading);font-weight:500;font-size:.95rem}
.ct-log-item .ct-li-meta{font-family:var(--mono);font-size:.58rem;letter-spacing:.1em;color:var(--ink-faint);text-transform:uppercase}
.ct-log-item .ct-li-msg{margin-left:auto;color:var(--ink-dim);font-size:.85rem;max-width:40%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ct-log-empty{color:var(--ink-faint);font-size:.9rem;font-weight:300}

@media(max-width:640px){
  .ct-dests{grid-template-columns:1fr 1fr}
  .ct-log-item .ct-li-msg{display:none}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  .ct-scan{display:none}
}

/* ═══════════════════════════════════════════════════════════════
   Mobile fixes (phones ≤640px, tighter at ≤400px)
   Goal: no horizontal overflow, stacked layouts, tap targets ≥44px,
   content clear of the fixed top nav.
   ═══════════════════════════════════════════════════════════════ */
@media (max-width:640px){
  /* width:100% inputs/textarea/img overflow by their border+padding
     unless border-box — this was the main 375px horizontal-scroll bug */
  .ct-root *{box-sizing:border-box}

  /* media never wider than the viewport */
  .ct-card-preview,img,canvas{max-width:100%}

  /* full-width, centered tappable controls */
  .ct-transmit{width:100%;justify-content:center}

  /* stack action buttons and make them comfortable tap targets */
  .ct-actions{flex-direction:column;gap:.75rem}
  .ct-actions .ct-btn{width:100%;justify-content:center;min-height:44px}

  /* log delete button is only 30×30 — bump to a 44px tap target */
  .ct-li-del{width:44px;height:44px}

  /* let the delivered banner wrap instead of forcing a single line */
  .ct-delivered{flex-wrap:wrap}

  /* title/lede already clamp()'d but keep them modest on phones */
  .ct-title{font-size:2.4rem;line-height:1.05}
  .ct-lede{font-size:1rem}
}

@media (max-width:400px){
  /* very small phones: single-column destination grid for readability,
     slightly tighter title, and explicit 2-up readouts keep ≤1fr fit */
  .ct-dests{grid-template-columns:1fr}
  .ct-title{font-size:2.1rem}
  .ct-readouts{grid-template-columns:1fr 1fr}
}