/* Upload wizard. Same exp- vocabulary as the rest of the site so the page still
   reads as EXP Tube; only the wizard-specific pieces below are new. */
:root{
  --exp-ink:#062238;
  --exp-line:rgba(58,220,235,.45);
  --exp-soft:rgba(255,255,255,.82);
  --exp-card:rgba(255,255,255,.72);
  --exp-accent:#1dd3e6;
  --exp-green:#25dd58;
  --exp-dark:#031d29;
  --exp-red:#b91c1c;
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:var(--exp-ink)}
body.exp-page{background:radial-gradient(circle at 12% 10%,#eaffdf 0,#f7ffff 35%,#e4fbff 100%);overflow:hidden}
a{color:inherit;text-decoration:none}

/* --- shared page chrome ---------------------------------------------------- */
.exp-page-nav{height:86px;display:flex;align-items:center;justify-content:space-between;gap:18px;padding:12px 28px;position:relative;z-index:50;background:transparent}
.exp-page-brand{height:56px;min-width:170px;border-radius:18px;background:rgba(255,255,255,.78);display:flex;align-items:center;gap:12px;padding:8px 16px;font-weight:1000;letter-spacing:.02em;box-shadow:0 12px 34px rgba(19,173,190,.1)}
.exp-page-brand img{width:48px;height:48px;object-fit:contain}
.exp-page-links{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:8px;border-radius:999px;background:rgba(255,255,255,.74);border:1px solid rgba(67,220,237,.45)}
.exp-page-link,.exp-page-btn{border:1px solid rgba(9,49,68,.08);border-radius:999px;padding:11px 18px;background:rgba(255,255,255,.9);color:#062238;font:inherit;font-weight:1000;cursor:pointer;box-shadow:0 8px 24px rgba(0,0,0,.06)}
.exp-page-link--accent,.exp-page-btn--primary{background:linear-gradient(135deg,#23e04e,#16dccb);border:0;color:#031d29}
.exp-page-btn[disabled]{opacity:.45;cursor:not-allowed;box-shadow:none}
.exp-auth-warning{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);z-index:100;border:1px solid rgba(245,158,11,.35);background:rgba(255,251,235,.95);color:#92400e;padding:16px 18px;border-radius:18px;font-weight:1000;box-shadow:0 22px 70px rgba(0,0,0,.18)}
.exp-page-wrap{height:calc(100vh - 86px);overflow:auto;padding:22px 30px 60px}
.exp-hero-card,.exp-card{border:1px solid rgba(67,220,237,.45);border-radius:28px;background:rgba(255,255,255,.78);box-shadow:0 24px 80px rgba(18,160,175,.14);padding:26px}
.exp-eyebrow{font-size:12px;font-weight:1000;letter-spacing:.16em;text-transform:uppercase;color:#0bbfd0;margin-bottom:10px}
.exp-title{font-size:clamp(36px,5vw,70px);line-height:.92;letter-spacing:-.06em;margin:0 0 14px;font-weight:1000}
.exp-copy,.exp-muted{font-weight:800;color:rgba(6,34,56,.72);line-height:1.45}

/* --- step indicator -------------------------------------------------------- */
.exp-wizard{margin-top:22px;max-width:920px}
.exp-steps{list-style:none;display:flex;align-items:center;gap:10px;margin:0 0 18px;padding:10px;border-radius:999px;background:rgba(255,255,255,.74);border:1px solid rgba(67,220,237,.45)}
.exp-step{flex:1;display:flex;align-items:center;justify-content:center;gap:10px;padding:10px 14px;border-radius:999px;font-weight:1000;color:rgba(6,34,56,.5)}
.exp-step-dot{width:28px;height:28px;flex:0 0 28px;border-radius:999px;display:flex;align-items:center;justify-content:center;background:rgba(6,34,56,.1);color:rgba(6,34,56,.62);font-size:13px}
.exp-step.is-active{background:linear-gradient(135deg,#23e04e,#16dccb);color:#031d29}
.exp-step.is-active .exp-step-dot{background:rgba(255,255,255,.86);color:#03414c}
.exp-step.is-done{color:#0b7790}
.exp-step.is-done .exp-step-dot{background:#25dd58;color:#03291a}
.exp-step-label{white-space:nowrap}

/* --- panels ---------------------------------------------------------------- */
.exp-panel{display:flex;flex-direction:column;gap:14px}
.exp-panel[hidden]{display:none}
.exp-panel h2{margin:0}
.exp-panel-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:8px}
.exp-blocked-panel{margin-top:22px;max-width:920px;border-color:rgba(185,28,28,.35);background:rgba(255,241,242,.9)}
.exp-blocked-panel h2{margin:0 0 10px;color:var(--exp-red)}

/* --- fields ---------------------------------------------------------------- */
.exp-field{display:flex;flex-direction:column;gap:8px;font-weight:1000}
.exp-inline-note{font-size:12px}
.exp-field input[type=text],.exp-field input[type=file],.exp-field textarea,.exp-field select{width:100%;border:1px solid rgba(67,220,237,.55);border-radius:18px;background:rgba(255,255,255,.9);padding:14px 16px;font:inherit;font-weight:900;color:#062238}
.exp-field textarea{resize:vertical;min-height:110px;line-height:1.45}
.exp-field.is-invalid input,.exp-field.is-invalid textarea,.exp-field.is-invalid select{border-color:rgba(185,28,28,.7);background:rgba(255,241,242,.9)}
.exp-counter{align-self:flex-end;font-size:12px;font-weight:1000;color:#0b7790}
.exp-counter.is-over{color:var(--exp-red)}
.exp-field-error{min-height:0;font-size:13px;font-weight:1000;color:var(--exp-red)}
.exp-field-error:empty{display:none}
.exp-file-drop{position:relative;display:flex;flex-direction:column;gap:8px;align-items:flex-start;border:2px dashed rgba(29,211,230,.7);border-radius:22px;background:rgba(242,253,255,.78);padding:22px;cursor:pointer}
.exp-file-drop input{position:absolute;inset:0;opacity:0;cursor:pointer}
/* Purely visual. The invisible input above covers the whole drop zone, so this
   never needs its own click handler — it just gives the eye something to aim at. */
.exp-file-btn{display:inline-block;margin-top:4px;border-radius:999px;padding:11px 20px;background:linear-gradient(135deg,#23e04e,#16dccb);color:#031d29;font-weight:1000;box-shadow:0 8px 24px rgba(0,0,0,.08)}
.exp-file-drop:hover .exp-file-btn{filter:brightness(1.05)}
/* Deliberately quiet next to the green Select video button — cancelling throws
   away a transfer, so it should be findable without inviting a stray click. */
.exp-cancel-btn{align-self:flex-start;border:1px solid rgba(185,28,28,.45);border-radius:999px;padding:9px 16px;background:rgba(255,241,242,.9);color:var(--exp-red);font:inherit;font-weight:1000;cursor:pointer}
.exp-cancel-btn:hover:not(:disabled){background:rgba(255,228,230,.95)}
.exp-cancel-btn:disabled{opacity:.6;cursor:default}
.exp-cancel-btn[hidden]{display:none}
.exp-file-name{font-size:13px;font-weight:1000;color:#0b7790}
.exp-thumb-preview{max-width:280px;border-radius:18px;border:1px solid rgba(67,220,237,.55);display:block}
.exp-thumb-preview[hidden]{display:none}
.exp-fieldset{border:1px solid rgba(67,220,237,.55);border-radius:22px;background:rgba(255,255,255,.6);padding:18px;margin:0;display:flex;flex-direction:column;gap:10px}
.exp-fieldset legend{font-weight:1000;padding:0 8px}
.exp-fieldset.is-invalid{border-color:rgba(185,28,28,.7);background:rgba(255,241,242,.7)}
.exp-radio,.exp-check{display:flex;align-items:flex-start;gap:12px;font-weight:1000;line-height:1.4;cursor:pointer}
.exp-radio input,.exp-check input{width:20px;height:20px;flex:0 0 20px;margin-top:1px;accent-color:var(--exp-accent)}
/* Clarifier under a checkbox. Indented to the label text (20px box + 12px gap)
   and pulled up tight against it so it reads as part of that statement rather
   than as a seventh thing to agree to.
   The margin reset on the box is what makes that 32px exact: browsers ship
   their own left margin on a checkbox (4px in Chrome), and without zeroing it
   the note sits a few pixels adrift of the text it belongs to. Checkboxes only
   — the radios in step 1 have no note under them and are left alone. */
.exp-check input{margin-left:0;margin-right:0}
.exp-check-note{margin:-8px 0 0;padding-left:32px;font-size:13px;font-weight:800;line-height:1.4;color:rgba(6,34,56,.62)}
.exp-probe-video{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none;left:-9999px}

/* --- inline explainer (licences) -------------------------------------------
   A helper, not a warning: quiet until it is opened, and never the loudest
   thing next to the field it explains. */
.exp-explainer{margin-top:-6px;border:1px solid rgba(67,220,237,.35);border-radius:16px;background:rgba(255,255,255,.5);padding:10px 14px}
.exp-explainer summary{cursor:pointer;font-size:13px;font-weight:1000;color:#0b7790;list-style:none}
.exp-explainer summary::-webkit-details-marker{display:none}
.exp-explainer summary::before{content:"▸ ";display:inline-block;transition:transform .15s ease}
.exp-explainer[open] summary::before{content:"▾ "}
.exp-explainer p{margin:10px 0 0;font-size:13px;font-weight:800;line-height:1.5;color:rgba(6,34,56,.78)}
.exp-explainer strong{font-weight:1000;color:var(--exp-ink)}

/* --- schedule picker --------------------------------------------------------
   An option, not a warning. The date only appears once "Schedule for later" is
   chosen, and it sits inside the same fieldset as the radios so it reads as
   part of that one choice rather than a new question. */
.exp-schedule-fields{display:flex;flex-direction:column;gap:8px;margin-top:2px;padding-top:12px;border-top:1px solid rgba(67,220,237,.35)}
.exp-schedule-fields[hidden]{display:none}
.exp-field input[type=datetime-local]{width:100%;max-width:340px;border:1px solid rgba(67,220,237,.55);border-radius:18px;background:rgba(255,255,255,.9);padding:14px 16px;font:inherit;font-weight:900;color:#062238}
/* Quiet, but always present while the date is: a wall-clock field with no zone
   on it is exactly where a creator guesses wrong. */
.exp-schedule-tz{margin:0;font-size:12px}

/* --- AI content policy ------------------------------------------------------
   Two columns so the line between generating a video (banned) and using AI to
   help edit one (fine) is visible without reading every bullet. */
.exp-ai-policy{border:1px solid rgba(67,220,237,.4);border-radius:22px;background:rgba(255,255,255,.55);padding:16px;margin:0}
.exp-ai-lists{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.exp-ai-col{border-radius:18px;padding:14px 16px;border:1px solid transparent}
.exp-ai-col h3{margin:0 0 8px;font-size:13px;font-weight:1000;letter-spacing:.1em;text-transform:uppercase}
.exp-ai-col ul{margin:0;padding-left:18px;display:flex;flex-direction:column;gap:6px}
.exp-ai-col li{font-size:13.5px;font-weight:800;line-height:1.4;color:rgba(6,34,56,.82)}
.exp-ai-col--banned{border-color:rgba(185,28,28,.35);background:rgba(255,241,242,.9)}
.exp-ai-col--banned h3{color:var(--exp-red)}
.exp-ai-col--banned li::marker{color:var(--exp-red)}
.exp-ai-col--allowed{border-color:rgba(37,221,88,.45);background:rgba(236,255,241,.9)}
.exp-ai-col--allowed h3{color:#15803d}
.exp-ai-col--allowed li::marker{color:#15803d}
.exp-ai-rule{margin:12px 0 0;font-size:13.5px;font-weight:1000;line-height:1.45;color:#0b7790;text-align:center}

/* Asset consent. Carries its own card so the optional offer never reads as a
   continuation of the required policy checkboxes above it. */
/* margin-top, not the panel's gap: #stepTerms is display:block, so its gap
   declaration is inert and every child spaces itself. Without this the dashed
   card sits flush against the AI policy card above it. */
.exp-consent{border:1px dashed rgba(67,220,237,.55);border-radius:22px;background:rgba(255,255,255,.45);padding:16px;margin:14px 0 0;display:flex;flex-direction:column;gap:12px}
.exp-consent h3{margin:0;display:flex;align-items:center;gap:10px;font-size:15px;font-weight:1000}
.exp-consent-optional{font-size:11px;font-weight:1000;letter-spacing:.1em;text-transform:uppercase;color:#0b7790;border:1px solid rgba(67,220,237,.6);border-radius:999px;padding:3px 9px}
.exp-consent .exp-muted{margin:0}
.exp-check--nested{margin-left:32px}
/* Greyed rather than hidden: a creator should be able to see the resale offer
   exists and what unlocks it, not discover it by accident later. */
.exp-check--nested input:disabled{opacity:.45}
.exp-check--nested:has(input:disabled) span{opacity:.55;cursor:default}
.exp-consent .exp-check-note{margin:0;padding-left:32px}

/* --- progress + stages ----------------------------------------------------- */
.exp-progress-track{height:16px;border-radius:999px;background:#041923;border:3px solid #061d2b;overflow:hidden}
.exp-progress-fill{height:100%;width:0%;border-radius:999px;background:linear-gradient(90deg,#23e04e,#16dccb);transition:width .18s ease}
.exp-progress-meta{display:flex;justify-content:space-between;gap:12px;font-weight:1000;font-size:12px;color:#0b7790}
.exp-stages{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.exp-stage{display:flex;align-items:center;gap:12px;padding:12px 16px;border-radius:18px;border:1px solid rgba(67,220,237,.32);background:rgba(255,255,255,.7);font-weight:1000}
.exp-stage-mark{width:20px;height:20px;flex:0 0 20px;border-radius:999px;border:3px solid rgba(6,34,56,.2);background:transparent}
.exp-stage.is-pending{color:rgba(6,34,56,.45)}
.exp-stage.is-active{border-color:rgba(29,211,230,.8);background:rgba(232,253,255,.92);color:#062238}
.exp-stage.is-active .exp-stage-mark{border-color:var(--exp-accent);border-right-color:transparent;animation:exp-spin .9s linear infinite}
.exp-stage.is-done{border-color:rgba(37,221,88,.6);background:rgba(236,255,241,.92);color:#15803d}
.exp-stage.is-done .exp-stage-mark{border-color:var(--exp-green);background:var(--exp-green)}
.exp-stage.is-failed{border-color:rgba(185,28,28,.55);background:rgba(255,241,242,.92);color:var(--exp-red)}
.exp-stage.is-failed .exp-stage-mark{border-color:var(--exp-red);background:var(--exp-red)}
@keyframes exp-spin{to{transform:rotate(360deg)}}
.exp-status-message{min-height:22px;font-weight:1000;color:#0d7188}
.exp-status-message.is-error{color:var(--exp-red)}
.exp-status-message.is-ok{color:#15803d}

@media(max-width:900px){
  body.exp-page{overflow:auto}
  .exp-page-nav{height:auto;align-items:flex-start;padding:8px}
  .exp-page-brand span{display:none}
  .exp-page-wrap{height:auto;padding:12px}
  .exp-card,.exp-hero-card{padding:18px}
  .exp-page-links{border-radius:18px}
  .exp-page-link,.exp-page-btn{padding:9px 12px}
  .exp-steps{border-radius:18px;flex-direction:column;align-items:stretch}
  .exp-step{justify-content:flex-start}
  .exp-ai-lists{grid-template-columns:1fr}
}

/* ---- Topic Hubs picker ------------------------------------------------------
   Added by /upload/upload-topics.js, brought across from the v0 upload page.
   The shell class changed from .exp-hand-effect-card to .exp-topic-picker when
   this form became a wizard; the inner .upload-topic-* rules are unchanged. */
.exp-topic-picker {
  margin: 18px 0 6px;
  padding: 14px 16px;
  border: 1px solid rgba(22, 200, 210, .28);
  border-radius: 12px;
  background: rgba(22, 200, 210, .05);
}
.exp-topic-picker:empty { display: none; }
.upload-topics__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 4px;
}
.upload-topic-count { font-size: 12.5px; opacity: .7; }
.upload-topic-hint { font-size: 12.5px; opacity: .75; margin: 4px 0; }

.upload-topic-search {
  width: 100%;
  padding: 9px 12px;
  margin: 8px 0;
  font: inherit;
  font-size: 14px;
  border: 1px solid rgba(22, 200, 210, .28);
  border-radius: 10px;
  outline: none;
}
.upload-topic-search:focus { border-color: #39df37; }

.upload-topic-chips { display: flex; flex-wrap: wrap; gap: 6px; min-height: 26px; }
.upload-topic-chip {
  padding: 5px 11px;
  font: inherit;
  font-size: 12.5px;
  font-weight: 700;
  color: #06210f;
  background: linear-gradient(135deg, #39df37, #16c8d2);
  border: 0;
  border-radius: 999px;
  cursor: pointer;
}

.upload-topic-results {
  display: flex;
  flex-direction: column;
  gap: 3px;
  max-height: 220px;
  overflow-y: auto;
  margin-top: 8px;
}
.upload-topic-results:empty { display: none; }
.upload-topic-result {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 11px;
  font: inherit;
  font-size: 13.5px;
  text-align: left;
  background: rgba(255, 255, 255, .7);
  border: 1px solid rgba(22, 200, 210, .2);
  border-radius: 9px;
  cursor: pointer;
}
.upload-topic-result:hover { background: rgba(22, 200, 210, .1); }
.upload-topic-result.is-selected { border-color: #39df37; background: rgba(57, 223, 55, .12); }
.upload-topic-result__name { font-weight: 600; }
.upload-topic-result__meta { font-size: 12px; opacity: .7; white-space: nowrap; }

.upload-topic-status { font-size: 12.5px; margin: 6px 0 0; }
.upload-topic-status:empty { display: none; }
.upload-topic-status[data-kind="error"] { color: #b00020; }

/* Publishing indicator (step 2). Two network calls run before step 3 can be
   shown, and a disabled button alone reads as a frozen page. */
.exp-busy{display:flex;align-items:center;gap:10px;margin-top:4px;padding:12px 16px;border:1px solid rgba(29,211,230,.45);border-radius:16px;background:rgba(232,253,255,.85);font-weight:1000;color:#0d7188}
.exp-busy[hidden]{display:none}
.exp-busy-spinner{width:18px;height:18px;flex:0 0 18px;border-radius:999px;border:3px solid rgba(29,211,230,.35);border-right-color:transparent;animation:exp-spin .9s linear infinite}

/* The step indicator only becomes navigation after publishing — before that
   jumping ahead would skip the content policy, so it stays a read-only
   progress display and gets no affordance. */
.exp-step.is-clickable { cursor: pointer; }
.exp-step.is-clickable:hover { background: rgba(29,211,230,.16); }
.exp-step.is-clickable:focus-visible { outline: 3px solid var(--exp-accent); outline-offset: 2px; }

/* "You can leave" banner. Deliberately its own block rather than a clause at
   the end of the status line — that is where it lived before, and creators
   sat watching a spinner they were never required to watch. */
.exp-leave-hint{display:flex;flex-direction:column;gap:8px;margin-top:6px;padding:16px 18px;border:1px solid rgba(29,211,230,.45);border-radius:18px;background:rgba(232,253,255,.72);font-weight:800;line-height:1.5;color:#0d7188}
.exp-leave-hint[hidden]{display:none}
.exp-leave-hint strong{font-weight:1000;color:#062238}
.exp-leave-hint__links{display:flex;gap:10px;flex-wrap:wrap;margin-top:4px}