/* ==========================================================================
   upload_studio.css — the "Waypoint" upload studio (upload.studio_v1).

   Ported from the approved mockup: mockups/upload-sheets-2026-08-29/.
   Colour is load-bearing: SAND means place and nothing else, BLUE means action,
   MONO means a machine fact (coordinates, file size, duration).

   Styled per call site and scoped entirely under `.ags`. There is deliberately
   no [data-theme] hook: dark mode is removed on both platforms, and this
   surface is dark by design rather than by theme.

   Inert until a studio template renders — nothing here matches existing markup.
   ========================================================================== */

@font-face{
  font-family:"AG Mono";
  src:url("../admin/fonts/FiraCode-Variable.24b4e480e340.woff2") format("woff2-variations");
  font-weight:300 700; font-display:swap;
}

/* Tokens are shared with .ags-story (the story modal borrows the palette but
   keeps its own layout); the layout rules below stay on .ags alone. */
.ags,.ags-story{
  /* ---- navy (default) ---- */
  --ags-canvas:#0E1428;
  --ags-surface:#19203C;
  --ags-raise:#232C4E;
  --ags-raise-2:#2B3556;
  --ags-stage:#070A16;
  --ags-line:rgba(255,255,255,.09);
  --ags-line-2:rgba(255,255,255,.17);
  --ags-ink:#EDF1FA;
  --ags-muted:#8E9BBC;
  --ags-dim:#5F6B8B;
  --ags-blue:#4A9AE8;
  --ags-blue-deep:#2E74B8;
  --ags-blue-soft:rgba(74,154,232,.15);
  --ags-place:#F1C9AE;              /* sand — place, and nothing else */
  --ags-place-soft:rgba(241,201,174,.13);
  --ags-place-line:rgba(241,201,174,.34);
  --ags-green:#34D399;
  --ags-red:#F1594A;
  --ags-shadow:0 30px 80px rgba(0,0,0,.55);
  --ags-mono:"AG Mono","Fira Code",ui-monospace,Consolas,monospace;
}

/* The studio root's OWN presentation. Deliberately NOT shared with
   .ags-story: position:relative here overrode .sc-backdrop{position:fixed},
   which dropped the story modal 8455px down the document instead of pinning it
   to the viewport -- it opened, it just opened where nobody could see it. The
   rule above shares tokens and nothing else. */
.ags{
  font-family:"Poppins","Segoe UI",system-ui,sans-serif;
  color:var(--ags-ink);
  height:100%;
  position:relative;
  font-size:14px;
  line-height:1.5;
}

/* Bright skin — NOT shipped. Kept so a change of direction is a token swap
   rather than a rebuild. Never wire this to [data-theme]. */
.ags[data-skin="bright"]{
  --ags-canvas:#FFFFFF;
  --ags-surface:#F7F9FC;
  --ags-raise:#FFFFFF;
  --ags-raise-2:#F0F3F9;
  --ags-stage:#E7ECF4;
  --ags-line:#E4E9F2;
  --ags-line-2:#C9D3E2;
  --ags-ink:#1E284A;
  --ags-muted:#69738F;
  --ags-dim:#96A1B8;
  --ags-blue:#2E74B8;
  --ags-blue-deep:#245F98;
  --ags-blue-soft:rgba(46,116,184,.10);
  --ags-place:#B4703C;              /* same hue, AA-safe on white */
  --ags-place-soft:rgba(241,201,174,.30);
  --ags-place-line:rgba(180,112,60,.34);
  --ags-shadow:0 30px 80px rgba(15,23,42,.22);
}

.ags *,.ags *::before,.ags *::after{box-sizing:border-box}

/* [hidden] is a UA rule at element specificity, so any class that sets display
   (.ags-drop is display:flex, .ags-ring is inline-flex) silently defeats it.
   Step panels toggle via .hidden, so this has to win. */
.ags [hidden]{display:none !important}
.ags button{font:inherit;border:0;background:none;color:inherit;cursor:pointer}
.ags :focus-visible{outline:2px solid var(--ags-blue);outline-offset:2px;border-radius:6px}

/* backdrop + page behind (web only) */

/* ---------- shell ------------------------------------------------------- */




/* ---------- top bar + THE TRAIL ---------------------------------------- */

.ags-top{
  flex-shrink:0;height:60px;display:flex;align-items:center;gap:16px;
  padding:0 16px;border-bottom:1px solid var(--ags-line);
  background:var(--ags-surface);
}
.ags-top__x{
  width:34px;height:34px;border-radius:10px;display:grid;place-items:center;
  color:var(--ags-muted);background:var(--ags-raise);flex-shrink:0;
  transition:background .15s,color .15s;
}
.ags-top__x:hover{background:var(--ags-raise-2);color:var(--ags-ink)}
.ags-top__name{font-size:14.5px;font-weight:650;letter-spacing:-.01em;flex-shrink:0;white-space:nowrap}
.ags-top__spacer{flex:1;min-width:0}

/* the trail: an actual route line with waypoints, not a dot stepper.
   It is the app's own vocabulary (globe/trails) doing a UI job. */
.ags-trail{display:flex;align-items:center;gap:0;flex-shrink:0}
.ags-trail__node{display:flex;align-items:center;gap:8px;padding:0 4px;background:none}
.ags-trail__pin{
  width:22px;height:22px;border-radius:50%;flex-shrink:0;
  display:grid;place-items:center;position:relative;
  background:var(--ags-raise);color:var(--ags-dim);
  box-shadow:inset 0 0 0 1.5px var(--ags-line-2);
  font-family:var(--ags-mono,"AG Mono",monospace);font-size:10px;font-weight:700;
  transition:background .2s,color .2s,box-shadow .2s;
}
.ags-trail__lbl{
  font-size:11.5px;font-weight:600;color:var(--ags-dim);white-space:nowrap;
  transition:color .2s;
}
.ags-trail__seg{
  width:34px;height:2px;flex-shrink:0;margin:0 3px;border-radius:2px;
  background:var(--ags-line-2);position:relative;overflow:hidden;
}
.ags-trail__seg::after{
  content:"";position:absolute;inset:0;width:0;border-radius:2px;
  background:var(--ags-place);transition:width .45s cubic-bezier(.4,0,.2,1);
}
/* done */
.ags-trail__node.is-done .ags-trail__pin{background:var(--ags-place-soft);color:var(--ags-place);box-shadow:inset 0 0 0 1.5px var(--ags-place-line)}
.ags-trail__node.is-done .ags-trail__lbl{color:var(--ags-muted)}
.ags-trail__seg.is-done::after{width:100%}
/* current — the "you are here" puck */
.ags-trail__node.is-now .ags-trail__pin{
  background:var(--ags-place);color:#231607;box-shadow:0 0 0 4px var(--ags-place-soft);
}
.ags-trail__node.is-now .ags-trail__lbl{color:var(--ags-ink);font-weight:700}

.ags-cta{
  display:inline-flex;align-items:center;gap:7px;flex-shrink:0;
  padding:9px 18px;border-radius:999px;
  font-size:13px;font-weight:700;color:#fff;
  background:linear-gradient(135deg,var(--ags-blue-deep),var(--ags-blue));
  box-shadow:0 4px 16px rgba(46,116,184,.4);
  transition:transform .14s,box-shadow .14s,filter .14s;
}
.ags-cta:hover{transform:translateY(-1px);box-shadow:0 7px 22px rgba(46,116,184,.5)}
.ags-cta:active{transform:translateY(0)}
.ags-cta[disabled],.ags-cta.is-off{
  background:var(--ags-raise);color:var(--ags-dim);box-shadow:none;cursor:not-allowed;transform:none;
}

/* ---------- main split -------------------------------------------------- */

.ags-main{flex:1;display:flex;min-height:0}

/* ---------- stage ------------------------------------------------------- */

.ags-stage{
  flex:1;min-width:0;display:flex;flex-direction:column;
  background:var(--ags-stage);position:relative;
}
.ags-stage__media{
  flex:1;min-height:0;display:grid;place-items:center;padding:20px;position:relative;
}
.ags-frame{
  position:relative;border-radius:12px;overflow:hidden;
  box-shadow:0 18px 46px rgba(0,0,0,.5);
  max-width:100%;max-height:100%;
}
.ags-frame--sq{aspect-ratio:1;height:100%}
.ags-frame--v{aspect-ratio:9/16;height:100%}
.ags-frame img,.ags-frame .ags-photo{display:block;width:100%;height:100%;object-fit:cover}
.ags-photo{background-size:cover;background-position:center}

/* upload happens on drop, not on submit — the ring proves it */
.ags-ring{
  position:absolute;top:12px;inset-inline-start:12px;
  display:inline-flex;align-items:center;gap:8px;
  padding:5px 12px 5px 6px;border-radius:999px;
  background:rgba(8,12,24,.78);backdrop-filter:blur(8px);
  font-size:11.5px;font-weight:650;color:#fff;
  box-shadow:0 2px 10px rgba(0,0,0,.4);
}
.ags-ring svg{transform:rotate(-90deg)}
.ags-ring__track{stroke:rgba(255,255,255,.2)}
.ags-ring__bar{stroke:var(--ags-green);stroke-linecap:round;transition:stroke-dashoffset .3s linear}
.ags-ring.is-done .ags-ring__bar{stroke:var(--ags-green)}
.ags-ring__pct{font-family:var(--ags-mono,"AG Mono",monospace);font-size:10.5px;letter-spacing:-.02em}

/* tool rail under the stage — per media type, and only real capabilities */
.ags-tools{
  flex-shrink:0;display:flex;align-items:center;gap:6px;
  padding:10px 14px;border-top:1px solid var(--ags-line);
  background:rgba(0,0,0,.22);
}
.ags[data-skin="bright"] .ags-tools{background:rgba(15,23,42,.04)}
.ags-tool{
  display:inline-flex;align-items:center;gap:6px;
  padding:7px 12px;border-radius:9px;
  font-size:12px;font-weight:600;color:var(--ags-muted);
  background:transparent;transition:background .15s,color .15s;
}
.ags-tool:hover{background:rgba(255,255,255,.08);color:var(--ags-ink)}
.ags[data-skin="bright"] .ags-tool:hover{background:rgba(15,23,42,.06)}
.ags-tool.is-on{background:var(--ags-blue-soft);color:var(--ags-blue)}
.ags-tools__spacer{flex:1}
.ags-meta{
  font-family:var(--ags-mono,"AG Mono",monospace);
  font-size:10.5px;color:var(--ags-dim);letter-spacing:-.02em;white-space:nowrap;
}

/* trim timeline (reel) */
.ags-timeline{
  flex-shrink:0;padding:10px 14px 12px;border-top:1px solid var(--ags-line);
  background:rgba(0,0,0,.3);
}
.ags[data-skin="bright"] .ags-timeline{background:rgba(15,23,42,.05)}
.ags-timeline__strip{
  height:44px;border-radius:8px;overflow:hidden;display:flex;position:relative;
  box-shadow:inset 0 0 0 1px var(--ags-line);
}
.ags-timeline__f{flex:1;background-size:cover;background-position:center}
.ags-timeline__sel{
  position:absolute;top:0;bottom:0;
  border:2px solid var(--ags-place);border-radius:8px;
  box-shadow:0 0 0 2000px rgba(7,10,22,.62);
  pointer-events:none;
}
.ags[data-skin="bright"] .ags-timeline__sel{box-shadow:0 0 0 2000px rgba(231,236,244,.7)}
.ags-timeline__grip{
  position:absolute;top:50%;transform:translateY(-50%);
  width:5px;height:22px;border-radius:3px;background:var(--ags-place);
}
.ags-timeline__grip--a{inset-inline-start:-3px}
.ags-timeline__grip--b{inset-inline-end:-3px}
.ags-timeline__row{
  display:flex;align-items:center;justify-content:space-between;
  margin-top:7px;font-family:var(--ags-mono,"AG Mono",monospace);
  font-size:10px;color:var(--ags-dim);
}

/* carousel thumb strip — reorderable, with per-item alt status */
.ags-strip{
  flex-shrink:0;display:flex;gap:8px;padding:12px 14px;overflow-x:auto;
  border-top:1px solid var(--ags-line);background:rgba(0,0,0,.24);
}
.ags[data-skin="bright"] .ags-strip{background:rgba(15,23,42,.04)}
.ags-strip::-webkit-scrollbar{height:6px}
.ags-strip::-webkit-scrollbar-thumb{background:var(--ags-line-2);border-radius:6px}
.ags-thumb{
  width:56px;height:56px;border-radius:9px;flex-shrink:0;position:relative;
  background-size:cover;background-position:center;
  box-shadow:0 0 0 2px transparent;transition:box-shadow .15s,transform .15s;
}
.ags-thumb:hover{transform:translateY(-2px)}
.ags-thumb.is-sel{box-shadow:0 0 0 2px var(--ags-blue)}
.ags-thumb__n{
  position:absolute;top:3px;inset-inline-start:3px;
  min-width:15px;height:15px;padding:0 3px;border-radius:5px;
  background:rgba(7,10,22,.8);color:#fff;
  font-family:var(--ags-mono,"AG Mono",monospace);font-size:9px;font-weight:700;
  display:grid;place-items:center;
}
/* the dot that fixes "alt text only reachable for item 1" */
.ags-thumb__alt{
  position:absolute;bottom:3px;inset-inline-end:3px;
  width:9px;height:9px;border-radius:50%;
  box-shadow:0 0 0 1.5px rgba(7,10,22,.7);
}
.ags-thumb__alt--ok{background:var(--ags-green)}
.ags-thumb__alt--no{background:var(--ags-red)}
.ags-thumb--add{
  display:grid;place-items:center;color:var(--ags-muted);
  background:var(--ags-raise);box-shadow:inset 0 0 0 1.5px var(--ags-line-2);
}

/* ---------- details rail ------------------------------------------------ */

.ags-rail{
  width:376px;flex-shrink:0;display:flex;flex-direction:column;min-height:0;
  background:var(--ags-surface);border-inline-start:1px solid var(--ags-line);
}
.ags-rail__scroll{flex:1;min-height:0;overflow-y:auto;padding:16px 16px 6px}
.ags-rail__scroll::-webkit-scrollbar{width:8px}
.ags-rail__scroll::-webkit-scrollbar-thumb{background:var(--ags-line-2);border-radius:8px;border:2px solid transparent;background-clip:content-box}

.ags-field{margin-bottom:16px}
.ags-field__head{display:flex;align-items:center;gap:8px;margin-bottom:7px}
.ags-label{
  font-size:10.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ags-muted);
}
.ags-field__spacer{flex:1}
.ags-cnt{font-family:var(--ags-mono,"AG Mono",monospace);font-size:10px;color:var(--ags-dim)}
.ags-cnt.is-warn{color:var(--ags-red)}

.ags-in{
  width:100%;padding:10px 12px;border-radius:11px;
  background:var(--ags-raise);color:var(--ags-ink);
  border:1px solid transparent;box-shadow:inset 0 0 0 1px var(--ags-line);
  font-family:inherit;font-size:13.5px;line-height:1.55;
  transition:box-shadow .15s,background .15s;resize:none;
}
.ags-in::placeholder{color:var(--ags-dim)}
.ags-in:focus{outline:none;box-shadow:inset 0 0 0 1.5px var(--ags-blue);background:var(--ags-raise-2)}
textarea.ags-in{min-height:74px}

/* hashtag chips parsed live out of the caption */
.ags-chips{display:flex;flex-wrap:wrap;gap:5px;margin-top:8px;min-height:0}
.ags-chip{
  display:inline-flex;align-items:center;gap:4px;
  padding:3px 9px;border-radius:999px;
  font-size:11px;font-weight:600;
  background:var(--ags-blue-soft);color:var(--ags-blue);
}
.ags-chip--ghost{background:transparent;color:var(--ags-dim);box-shadow:inset 0 0 0 1px var(--ags-line-2)}

/* small inline assist button (alt text, hashtags) */
.ags-assist{
  display:inline-flex;align-items:center;gap:5px;
  padding:3px 9px;border-radius:999px;
  font-size:10.5px;font-weight:700;letter-spacing:.02em;
  color:var(--ags-blue);background:var(--ags-blue-soft);
  transition:filter .15s;
}
.ags-assist:hover{filter:brightness(1.15)}

/* accessibility nudge — currently there is no prompt at all */
.ags-nudge{
  display:flex;gap:8px;align-items:flex-start;
  margin-top:8px;padding:9px 11px;border-radius:10px;
  font-size:11.5px;line-height:1.45;
  background:rgba(241,89,74,.10);color:#FFB3A8;
  box-shadow:inset 0 0 0 1px rgba(241,89,74,.26);
}
.ags[data-skin="bright"] .ags-nudge{background:rgba(241,89,74,.08);color:#9B3225}
.ags-nudge.is-ok{background:rgba(52,211,153,.10);color:#6EE7B7;box-shadow:inset 0 0 0 1px rgba(52,211,153,.26)}
.ags[data-skin="bright"] .ags-nudge.is-ok{color:#0F6E4E}

/* segmented audience control */
.ags-seg{display:flex;gap:3px;padding:3px;border-radius:12px;background:var(--ags-raise)}
.ags-seg button{
  flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;
  padding:8px 4px;border-radius:9px;
  font-size:11px;font-weight:600;color:var(--ags-muted);
  transition:background .15s,color .15s;
}
.ags-seg button:hover{color:var(--ags-ink)}
.ags-seg button[aria-pressed="true"]{background:var(--ags-blue-soft);color:var(--ags-blue)}
.ags[data-skin="navy"] .ags-seg button[aria-pressed="true"]{background:rgba(74,154,232,.2)}

/* ---------- THE WAYPOINT CARD (signature) ------------------------------- */

.ags-way{
  border-radius:14px;overflow:hidden;margin-bottom:16px;
  background:var(--ags-place-soft);
  box-shadow:inset 0 0 0 1px var(--ags-place-line);
}
.ags-way__map{
  height:104px;position:relative;overflow:hidden;
  background:
    radial-gradient(120px 80px at 50% 50%,rgba(46,116,184,.28),transparent 70%),
    linear-gradient(160deg,#10203A,#0A1526);
}
.ags[data-skin="bright"] .ags-way__map{
  background:
    radial-gradient(120px 80px at 50% 50%,rgba(46,116,184,.14),transparent 70%),
    linear-gradient(160deg,#DDE7F2,#EAF0F7);
}
.ags-way__grid{position:absolute;inset:0;opacity:.5}
.ags-way__pin{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-100%);
  color:var(--ags-place);filter:drop-shadow(0 3px 6px rgba(0,0,0,.5));z-index:3;
}
/* the precision radius — one control replacing four radios, and you can SEE it */
.ags-way__rad{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  border-radius:50%;
  background:var(--ags-place-soft);
  box-shadow:inset 0 0 0 1.5px var(--ags-place-line);
  transition:width .4s cubic-bezier(.4,0,.2,1),height .4s cubic-bezier(.4,0,.2,1),opacity .3s;
  z-index:2;
}
.ags-way__body{padding:11px 13px 13px}
.ags-way__row{display:flex;align-items:center;gap:9px;margin-bottom:10px}
.ags-way__name{flex:1;min-width:0;font-size:13px;font-weight:650;color:var(--ags-ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ags-way__co{
  font-family:var(--ags-mono,"AG Mono",monospace);font-size:10px;
  color:var(--ags-place);letter-spacing:-.02em;white-space:nowrap;
}
.ags-way__edit{
  font-size:11px;font-weight:650;color:var(--ags-place);
  padding:3px 8px;border-radius:7px;background:rgba(241,201,174,.12);
}
/* precision as a 4-stop slider, labelled */
.ags-prec{display:flex;gap:2px;padding:3px;border-radius:10px;background:rgba(0,0,0,.25)}
.ags[data-skin="bright"] .ags-prec{background:rgba(15,23,42,.05)}
.ags-prec button{
  flex:1;padding:6px 2px;border-radius:7px;
  font-size:10.5px;font-weight:650;color:var(--ags-muted);
  transition:background .15s,color .15s;
}
.ags-prec button:hover{color:var(--ags-ink)}
.ags-prec button[aria-pressed="true"]{background:var(--ags-place);color:#231607}
.ags-way__note{
  margin-top:8px;font-size:11px;line-height:1.45;color:var(--ags-muted);
  display:flex;gap:6px;align-items:flex-start;
}

/* ---------- disclosures ------------------------------------------------- */

.ags-disc{
  border-radius:12px;margin-bottom:8px;overflow:hidden;
  background:var(--ags-raise);box-shadow:inset 0 0 0 1px var(--ags-line);
}
.ags-disc__btn{
  width:100%;display:flex;align-items:center;gap:10px;
  padding:11px 13px;text-align:start;
}
.ags-disc__ico{color:var(--ags-muted);display:grid;place-items:center;flex-shrink:0}
.ags-disc__t{flex:1;font-size:12.5px;font-weight:600;color:var(--ags-ink)}
.ags-disc__v{
  font-size:11px;color:var(--ags-muted);
  max-width:44%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.ags-disc__chev{color:var(--ags-dim);transition:transform .22s;flex-shrink:0}
.ags-disc.is-open .ags-disc__chev{transform:rotate(180deg)}
.ags-disc__body{
  display:none;padding:0 13px 13px;
  border-top:1px solid var(--ags-line);margin-top:-1px;padding-top:12px;
}
.ags-disc.is-open .ags-disc__body{display:block}
.ags-disc__row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:7px 0}
.ags-disc__row + .ags-disc__row{border-top:1px solid var(--ags-line)}
.ags-disc__lab{font-size:12.5px;color:var(--ags-ink)}
.ags-disc__sub{font-size:11px;color:var(--ags-muted);margin-top:1px}

.ags-sw{
  width:38px;height:22px;border-radius:99px;background:var(--ags-line-2);
  position:relative;flex-shrink:0;transition:background .2s;
}
.ags-sw::after{
  content:"";position:absolute;top:3px;inset-inline-start:3px;
  width:16px;height:16px;border-radius:50%;background:#fff;
  box-shadow:0 1px 3px rgba(0,0,0,.35);transition:transform .2s;
}
.ags-sw.is-on{background:var(--ags-blue)}
.ags-sw.is-on::after{transform:translateX(16px)}
.ags-rail__scroll [dir="rtl"] .ags-sw.is-on::after{transform:translateX(-16px)}

.ags-mini{display:flex;gap:5px;flex-wrap:wrap}
.ags-mini button{
  padding:6px 11px;border-radius:8px;font-size:11.5px;font-weight:600;
  color:var(--ags-muted);background:var(--ags-raise-2);transition:background .15s,color .15s;
}
.ags-mini button[aria-pressed="true"]{background:var(--ags-blue-soft);color:var(--ags-blue)}

/* ---------- action bar -------------------------------------------------- */

.ags-bar{
  flex-shrink:0;display:flex;align-items:center;gap:9px;
  padding:12px 16px;border-top:1px solid var(--ags-line);
  background:var(--ags-surface);
}
.ags-ghost{
  display:inline-flex;align-items:center;gap:6px;
  padding:9px 13px;border-radius:10px;
  font-size:12.5px;font-weight:600;color:var(--ags-muted);
  box-shadow:inset 0 0 0 1px var(--ags-line);
  transition:background .15s,color .15s;
}
.ags-ghost:hover{background:var(--ags-raise);color:var(--ags-ink)}
.ags-bar__spacer{flex:1}
.ags-ready{
  display:inline-flex;align-items:center;gap:6px;
  font-size:11px;font-weight:650;color:var(--ags-green);
}

/* ---------- empty / drop state ------------------------------------------ */

.ags-drop{
  flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:16px;text-align:center;padding:32px;position:relative;
  border-radius:16px;margin:18px;
  box-shadow:inset 0 0 0 2px var(--ags-line);
  transition:box-shadow .2s,background .2s;
}
.ags-drop.is-over{box-shadow:inset 0 0 0 2px var(--ags-place);background:var(--ags-place-soft)}
.ags-drop__vis{
  width:104px;height:104px;display:grid;place-items:center;position:relative;color:var(--ags-muted);
}
.ags-drop__ring{
  position:absolute;border-radius:50%;box-shadow:inset 0 0 0 1.5px var(--ags-line-2);
  animation:ags-pulse 3.2s ease-in-out infinite;
}
.ags-drop__ring:nth-child(1){inset:14px}
.ags-drop__ring:nth-child(2){inset:0;animation-delay:.55s;box-shadow:inset 0 0 0 1.5px var(--ags-place-line)}
.ags-drop__ring:nth-child(3){inset:-16px;animation-delay:1.1s;box-shadow:inset 0 0 0 1.5px rgba(74,154,232,.2)}
@keyframes ags-pulse{0%,100%{opacity:.45;transform:scale(.96)}50%{opacity:1;transform:scale(1.03)}}
.ags-drop__t{margin:0;font-size:19px;font-weight:650;letter-spacing:-.015em;color:var(--ags-ink)}
.ags-drop__s{margin:0;font-size:13px;color:var(--ags-muted)}

/* multi-source: the fix for "file picker or nothing" */
.ags-src{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin-top:4px}
.ags-srcbtn{
  display:inline-flex;align-items:center;gap:7px;
  padding:10px 16px;border-radius:11px;
  font-size:12.5px;font-weight:650;
  background:var(--ags-raise);color:var(--ags-ink);
  box-shadow:inset 0 0 0 1px var(--ags-line);
  transition:background .15s,transform .12s,box-shadow .15s;
}
.ags-srcbtn:hover{background:var(--ags-raise-2);transform:translateY(-1px)}
.ags-srcbtn--go{
  background:linear-gradient(135deg,var(--ags-blue-deep),var(--ags-blue));color:#fff;box-shadow:0 4px 16px rgba(46,116,184,.35);
}
.ags-srcbtn--go:hover{box-shadow:0 7px 22px rgba(46,116,184,.45)}

/* "from this trip" — content ActivGate already has and never offers */
.ags-recent{margin-top:20px;width:100%;max-width:460px}
.ags-recent__h{
  display:flex;align-items:center;gap:7px;margin-bottom:9px;
  font-size:10.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--ags-dim);
}
.ags-recent__h b{color:var(--ags-place);font-weight:700;letter-spacing:.02em;text-transform:none;font-size:11.5px}
.ags-recent__row{display:flex;gap:7px}
.ags-recent__i{
  flex:1;aspect-ratio:1;border-radius:9px;background-size:cover;background-position:center;
  box-shadow:0 0 0 1px var(--ags-line);transition:transform .15s,box-shadow .15s;
}
.ags-recent__i:hover{transform:translateY(-2px);box-shadow:0 0 0 2px var(--ags-blue)}

/* ---------- MOBILE ------------------------------------------------------ */

.ags-m{display:flex;flex-direction:column;height:100%;background:var(--ags-canvas);position:relative}
.ags-m__top{
  flex-shrink:0;display:flex;align-items:center;gap:12px;
  padding:6px 14px 12px;
}
.ags-m__x{width:32px;height:32px;border-radius:10px;display:grid;place-items:center;background:var(--ags-raise);color:var(--ags-muted)}
.ags-m__name{font-size:15px;font-weight:650;flex:1}
.ags-m__trail{flex-shrink:0}

.ags-m__stage{
  flex:1;min-height:0;position:relative;overflow:hidden;
  background:var(--ags-stage);
}
.ags-m__media{position:absolute;inset:0;background-size:cover;background-position:center}
.ags-m__scrim{position:absolute;inset:auto 0 0 0;height:110px;background:linear-gradient(180deg,transparent,rgba(6,9,20,.85))}

/* floating tool column, thumb-reachable */
.ags-m__tools{
  position:absolute;top:10px;inset-inline-end:10px;
  display:flex;flex-direction:column;gap:6px;z-index:4;
}
.ags-m__tool{
  width:36px;height:36px;border-radius:11px;display:grid;place-items:center;
  background:rgba(8,12,24,.6);backdrop-filter:blur(10px);color:#fff;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.14);
}

/* the bottom sheet — details, in reach, over the media */
.ags-sheet{
  position:absolute;inset-inline:0;bottom:0;z-index:6;
  background:var(--ags-surface);
  border-radius:20px 20px 0 0;
  box-shadow:0 -10px 40px rgba(0,0,0,.45);
  display:flex;flex-direction:column;
  max-height:64%;
  transition:transform .32s cubic-bezier(.4,0,.2,1);
}
.ags-sheet__grab{
  flex-shrink:0;padding:9px 0 5px;display:grid;place-items:center;
}
.ags-sheet__grab i{width:36px;height:4px;border-radius:99px;background:var(--ags-line-2);display:block}
.ags-sheet__scroll{flex:1;min-height:0;overflow-y:auto;padding:4px 14px 8px}
.ags-sheet__bar{
  flex-shrink:0;display:flex;align-items:center;gap:9px;
  padding:10px 14px 16px;border-top:1px solid var(--ags-line);
}

/* collapsed sheet peek: shows what's set without opening anything */
.ags-peek{display:flex;gap:6px;flex-wrap:wrap;padding:2px 0 10px}
.ags-peek span{
  display:inline-flex;align-items:center;gap:5px;
  padding:5px 10px;border-radius:999px;font-size:11px;font-weight:600;
  background:var(--ags-raise);color:var(--ags-muted);
}
.ags-peek span.is-place{background:var(--ags-place-soft);color:var(--ags-place)}
.ags-peek span.is-warn{background:rgba(241,89,74,.12);color:#FFB3A8}
.ags[data-skin="bright"] .ags-peek span.is-warn{color:#9B3225}

/* mobile drop state */
.ags-m__drop{
  flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:14px;text-align:center;padding:24px;
}

@media (prefers-reduced-motion:reduce){
  .ags *,.ags *::before,.ags *::after{animation:none !important;transition-duration:.01ms !important}
}

/* ==========================================================================
   Integration with the shared upload modal (static/css/upload_modal.css).

   In the mockup the dialog was faked by .np-shell/.np-dialog. Here the real
   dialog is .agu__dialog, so the studio form itself becomes the flex column
   and the modal gets a wider frame with its chrome stood down — the studio
   carries its own top bar, so the .agu header would be a second one.

   Keyed on .agu--studio, which upload_studio.js adds when a .ags is present,
   rather than :has() — the class is explicit and cannot silently stop matching.
   ========================================================================== */

/* Layout for a real studio root only. This must not reach .sc-backdrop: an
   author rule setting display beats the UA [hidden] rule, which would pin the
   story modal open at z-index 10000 with an opaque background. */
.ags:not(.ags-story){
  display:flex;
  flex-direction:column;
  min-height:0;
  background:var(--ags-canvas);
}

.agu--studio .agu__dialog{
  width:min(1000px,100%);
  max-height:min(88vh,720px);
  background:var(--ags-canvas);
}
.agu--studio .agu__head{ display:none; }
.agu--studio .agu__body{
  padding:0;
  overflow:hidden;
  display:flex;
  flex-direction:column;
}
/* upload_modal.css strips the card chrome off the legacy form; the studio has
   none to strip, but the rule must not re-add padding here. */
.agu--studio .agu__body > form.ags{ padding:0 !important; flex:1; min-height:0; }

@media (max-width:640px){
  .agu--studio .agu__dialog{ max-height:100dvh; border-radius:0; }
  /* the two-pane split collapses: media on top, details beneath */
  .ags-main{ flex-direction:column; }
  .ags-rail{ width:100%; border-inline-start:0; border-top:1px solid var(--ags-line); }
  .ags-stage{ min-height:38vh; }
}

/* Real form controls the studio drives through its own chrome. Kept in the DOM
   and submittable -- display:none would drop them from the POST in some
   browsers and makes them unreachable to validation focus. */
.ags-hidden-field{
  position:absolute;
  width:1px;height:1px;
  margin:-1px;padding:0;border:0;
  overflow:hidden;clip-path:inset(50%);
  white-space:nowrap;
}
/* Django's widgets inside the rail should look like the studio's own inputs. */
.ags-rail input[type="text"],
.ags-rail input[type="url"],
.ags-rail input[type="datetime-local"],
.ags-rail textarea,
.ags-rail select{
  width:100%;padding:10px 12px;border-radius:11px;
  background:var(--ags-raise);color:var(--ags-ink);
  border:1px solid transparent;box-shadow:inset 0 0 0 1px var(--ags-line);
  font-family:inherit;font-size:13.5px;line-height:1.55;
}
.ags-rail textarea{min-height:74px;resize:vertical}
.ags-rail input:focus,.ags-rail textarea:focus,.ags-rail select:focus{
  outline:none;box-shadow:inset 0 0 0 1.5px var(--ags-blue);background:var(--ags-raise-2);
}
.ags-rail ul.errorlist{
  list-style:none;margin:6px 0 0;padding:0;
  font-size:11.5px;color:#FFB3A8;
}

/* Anchors used as studio controls must not inherit the page's link styling. */
.ags a{text-decoration:none}
.ags a:hover{text-decoration:none}
.ags-ghost,.ags-cta{text-decoration:none}

/* The precision radius reads as a filled disc on the dark map; a ring with a
   soft fill keeps it legible as "an area", not "a blob". */
.ags-way__rad{
  background:radial-gradient(circle,rgba(241,201,174,.16) 0%,rgba(241,201,174,.05) 70%);
}

/* ---- Hosted video editor -------------------------------------------------
   video_editor.js builds its own .ve-* UI inside #video-editor. Rather than
   rebuild a filmstrip, the studio hosts it and restyles it to match. */
.ags-editor{
  flex-shrink:0;padding:10px 14px;border-top:1px solid var(--ags-line);
  background:rgba(0,0,0,.3);max-height:210px;overflow-y:auto;
}
.ags .ve-editor{color:var(--ags-ink);font-size:12px}
.ags .ve-player-wrap{display:none}          /* the stage already shows the video */
.ags .ve-time-display{
  display:flex;justify-content:space-between;
  font-family:var(--ags-mono);font-size:10px;color:var(--ags-dim);margin-bottom:6px;
}
.ags .ve-timeline{
  position:relative;height:44px;border-radius:8px;overflow:hidden;
  box-shadow:inset 0 0 0 1px var(--ags-line);
}
.ags .ve-frame-strip{display:flex;height:100%}
.ags .ve-frame-strip img,.ags .ve-frame-strip canvas{flex:1;height:100%;object-fit:cover;display:block}
.ags .ve-trim-overlay{position:absolute;top:0;bottom:0;background:rgba(7,10,22,.62)}
.ags .ve-trim-active{position:absolute;top:0;bottom:0;box-shadow:inset 0 0 0 2px var(--ags-place);border-radius:8px}
.ags .ve-handle{
  position:absolute;top:50%;transform:translateY(-50%);
  width:12px;height:100%;cursor:ew-resize;display:grid;place-items:center;
}
.ags .ve-handle-bar{width:5px;height:22px;border-radius:3px;background:var(--ags-place)}
.ags .ve-playhead{position:absolute;top:0;bottom:0;width:2px;background:#fff;opacity:.85}
.ags .ve-speed-row{display:flex;align-items:center;gap:5px;margin-top:9px;flex-wrap:wrap}
.ags .ve-speed-label{font-size:10.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--ags-muted)}
.ags .ve-speed-btn{
  padding:5px 10px;border-radius:8px;font-size:11.5px;font-weight:600;
  color:var(--ags-muted);background:var(--ags-raise-2);border:0;cursor:pointer;
}
.ags .ve-speed-btn.active{background:var(--ags-blue-soft);color:var(--ags-blue)}
.ags .ve-cover-section{margin-top:10px}
.ags .ve-cover-label{font-size:10.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--ags-muted);margin-bottom:6px}
.ags .ve-cover-grid{display:flex;gap:6px;overflow-x:auto}
.ags .ve-cover-grid img,.ags .ve-cover-grid canvas{
  width:44px;height:60px;object-fit:cover;border-radius:7px;cursor:pointer;
  box-shadow:0 0 0 2px transparent;flex-shrink:0;
}
.ags .ve-cover-grid .selected,.ags .ve-cover-grid img:hover{box-shadow:0 0 0 2px var(--ags-blue)}
.ags .ve-status{font-family:var(--ags-mono);font-size:10px;color:var(--ags-dim);margin-top:6px}
.ags .d-none{display:none !important}

/* Carousel keeps its standalone page, so the studio needs a frame of its own
   rather than borrowing the modal dialog's. */
.ags-page{
  max-width:1000px;margin:20px auto;height:min(80vh,700px);
  border-radius:20px;overflow:hidden;
  box-shadow:var(--ags-shadow),0 0 0 1px var(--ags-line);
}
.ags-page > .ags{height:100%}
@media (max-width:640px){
  .ags-page{margin:0;height:100dvh;border-radius:0}
}