/* ═══════════════════════════════════════════════════════════════
   youX Manage — login screen
   Tokens mirror youx-manage-ui-library/tailwind.config.ts
   (brand #55c2ff · pressed #2c77a3 · ink #292929 · navy #142f3d ·
    button radius 8px · Inter body / DM Sans display)
   ═══════════════════════════════════════════════════════════════ */

:root{
  --brand:#55c2ff;
  --brand-press:#2c77a3;
  --brand-link:#3f9fdc;          /* link blue as drawn in the design */
  --navy:#142f3d;

  --ink:#1e2a33;
  --ink-2:#4a5a68;
  --ink-3:#6b7785;
  --ink-4:#9aa7b4;

  --line:#dbe3ec;
  --line-soft:#e8eef4;

  --card-shadow:0 1px 3px rgba(18,48,71,.05), 0 10px 30px -8px rgba(18,48,71,.12);

  --r:8px;
  --r-card:10px;

  --auth-col:32%;                /* width of the sign-in column */
}

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

html,body{height:100%}
body{
  margin:0;
  font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  font-size:16px; line-height:1.5; color:var(--ink);
  background:#fff;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{font-family:"DM Sans",Inter,sans-serif; margin:0; text-wrap:balance}
img,svg{max-width:100%}
a{color:var(--brand-link)}

:focus-visible{outline:2px solid var(--brand-press); outline-offset:2px; border-radius:4px}

/* ── Shell ─────────────────────────────────────────────────────
   .screen is a container, not a viewport query, so the whole thing
   can be dropped into a narrower shell and still lay out correctly.
   ───────────────────────────────────────────────────────────── */
.stage{min-height:100dvh; display:flex}
/* .screen is the query container; .screen-grid is what responds to it.
   An element can never query itself, hence the two levels. */
.screen{
  container-type:inline-size;
  container-name:screen;
  flex:1 1 auto; display:flex;
  min-width:0; min-height:100dvh;
}
.screen-grid{
  flex:1 1 auto; min-width:0;
  display:grid;
  grid-template-columns:minmax(0, 1fr);
  grid-template-rows:1fr auto;
}
@container screen (min-width: 960px){
  .screen-grid{grid-template-columns:minmax(420px, var(--auth-col)) minmax(0, 1fr); grid-template-rows:1fr}
}

/* ── Left: sign in ─────────────────────────────────────────── */
.auth{
  display:flex; align-items:center; justify-content:center;
  min-width:0; padding:56px 40px;
  background:
    radial-gradient(120% 80% at 0% 0%, rgba(85,194,255,.16) 0%, rgba(85,194,255,0) 60%),
    linear-gradient(175deg, #e9f5fc 0%, #f5fafd 48%, #ffffff 100%);
}
.auth-inner{width:100%; min-width:0; max-width:508px; display:flex; flex-direction:column; align-items:center}

.lockup{width:100%; text-align:center; margin-bottom:56px}
.lockup img{display:inline-block; width:322px; max-width:100%; height:auto}

.card{
  width:100%; min-width:0;
  background:#fff;
  border-radius:var(--r-card);
  box-shadow:var(--card-shadow);
  padding:40px 42px 44px;
}
.card h1{font-size:28px; font-weight:700; letter-spacing:-.02em; text-align:center; margin-bottom:6px}
.card-sub{margin:0 0 30px; text-align:center; font-size:15.5px; color:var(--ink-3)}

.field{margin-bottom:18px}
.field label{display:block; font-size:15px; font-weight:600; color:var(--ink); margin-bottom:8px}

.input-wrap{position:relative; display:flex; align-items:center}
.input-wrap input{
  width:100%; height:50px;
  font:inherit; font-size:15.5px; color:var(--ink);
  background:#fff;
  border:1px solid var(--line); border-radius:var(--r);
  padding:0 46px 0 46px;
  transition:border-color .15s, box-shadow .15s;
}
.input-wrap input::placeholder{color:var(--ink-4)}
.input-wrap input:focus{
  outline:none; border-color:var(--brand);
  box-shadow:0 0 0 3px rgba(85,194,255,.22);
}
.input-icon{
  position:absolute; left:15px; width:19px; height:19px; pointer-events:none;
  fill:none; stroke:var(--ink-4); stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round;
}
.reveal{
  position:absolute; right:8px; display:grid; place-items:center;
  width:34px; height:34px; padding:0; border:0; border-radius:6px;
  background:none; cursor:pointer;
}
.reveal svg{width:20px; height:20px; fill:none; stroke:var(--ink-4); stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round}
.reveal:hover svg{stroke:var(--ink-2)}
.reveal[aria-pressed="true"] svg{stroke:var(--brand-press)}

.forgot{margin:16px 0 26px}
.forgot a{font-size:15px; font-weight:600; color:var(--brand-link); text-decoration:none}
.forgot a:hover{text-decoration:underline}

.btn{
  width:100%; height:54px;
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  font:inherit; font-size:16.5px; font-weight:600; color:#fff;
  background:var(--brand); border:0; border-radius:var(--r);
  cursor:pointer; transition:background .15s;
}
.btn svg{width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round}
.btn:hover{background:#3faff5}
.btn:active{background:var(--brand-press)}

.form-note{
  margin:16px 0 0; font-size:14px; color:var(--ink-2);
  background:#f2f8fc; border:1px solid var(--line-soft); border-radius:var(--r);
  padding:10px 13px;
}

/* ═══════════════════════════════════════════════════════════════
   RIGHT: the sponsor slot
   Every visual below is driven by one record in sponsors.js.
   Nothing here is hard-coded to a particular advertiser.
   ═══════════════════════════════════════════════════════════════ */
.promo{
  position:relative; overflow:hidden; min-width:0;
  container-type:inline-size; container-name:promo;
  min-height:340px;
  background:var(--slot-bg, linear-gradient(180deg,#ffffff 0%, #f4fafd 70%, #e9f4fc 100%));
}

.slide{
  position:absolute; inset:0;
  display:flex; flex-direction:column; align-items:center;
  opacity:0; visibility:hidden;
  transition:opacity .55s ease, visibility .55s;
}
.slide.is-current{opacity:1; visibility:visible}
.slide-bg{position:absolute; inset:0; z-index:0}
.slide-bg img{width:100%; height:100%; object-fit:cover; display:block}
.slide > *:not(.slide-bg):not(.slide-flag){position:relative; z-index:1}

.slide-badge{
  margin:44px 0 0;
  display:inline-flex; align-items:center; gap:9px;
  font-size:13px; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
  color:var(--accent-ink, #3f9fdc);
  background:var(--accent-soft, #e2f2fd);
  border-radius:999px; padding:9px 20px;
}
.slide-badge::before{content:""; width:8px; height:8px; border-radius:999px; background:currentColor}

.slide-flag{
  position:absolute; top:22px; right:26px; z-index:3;
  display:inline-flex; align-items:center; gap:9px;
  font-size:14px; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  color:#fff; background:var(--accent, #55c2ff);
  border-radius:999px; padding:11px 24px;
  box-shadow:0 6px 18px -6px rgba(85,194,255,.7);
}
.slide-flag::before{content:""; width:8px; height:8px; border-radius:999px; background:#fff}

/* Advertiser logo. Height-constrained so a wide wordmark and a square mark
   read at the same visual weight, the way a logo wall does. */
.slide-logo{margin:20px 0 0; display:flex; justify-content:center; align-items:center; height:46px}
/* with no badge above it the logo carries the top spacing itself */
.slide > .slide-logo:first-child{margin-top:44px}
.slide > .slide-head:first-child{margin-top:44px}
/* height-driven, not auto: an SVG with only a viewBox has no intrinsic size,
   so width:auto/height:auto collapses it to nothing (this is what hid Plenti). */
.slide-logo img{height:100%; width:auto; max-width:240px; object-fit:contain}
.slide[data-layout="editorial"] .slide-logo{justify-content:flex-start; margin-left:52px}

.slide-logo + .slide-head{margin-top:16px}
.slide-head{
  margin:2px 0 0;
  font-size:clamp(32px, 5.7cqw, 80px);
  line-height:1.08; font-weight:700; letter-spacing:-.025em;
  color:var(--head-ink, #123047);
  text-align:center; padding:0 32px; max-width:18ch;
}
.slide-head em{font-style:normal; color:var(--accent, #55c2ff)}

.slide-body{
  margin:10px 0 0; padding:0 32px;
  font-size:clamp(15px, 1.35cqw, 18.5px); line-height:1.55;
  color:var(--body-ink, #4a5a68);
  text-align:center; max-width:min(72ch, 86%);
}
.slide-body p{margin:0}
.slide-body p + p{margin-top:2px}

.slide-ctas{
  margin-top:26px; display:flex; flex-wrap:wrap;
  gap:12px; justify-content:center; align-items:center;
}
.slide-cta{
  display:inline-flex; align-items:center; gap:9px;
  font-size:16px; font-weight:600; text-decoration:none;
  color:var(--cta-ink, #fff); background:var(--accent, #55c2ff);
  border-radius:var(--r); padding:14px 26px;
  transition:transform .15s, filter .15s;
}
.slide-cta:hover{transform:translateY(-1px); filter:brightness(1.05)}
.slide-cta span{transition:transform .15s}
.slide-cta:hover span{transform:translateX(3px)}
/* Secondary action: same shape, no fill, so it reads as the lesser of the two */
.slide-cta--ghost{
  background:transparent; color:var(--accent, #55c2ff);
  box-shadow:inset 0 0 0 1.5px currentColor;
}
.slide-cta--ghost:hover{filter:none; background:var(--accent-soft, rgba(0,0,0,.04))}

/* Media well — sits at the bottom and deliberately bleeds off the
   right and bottom edges, the way the current design does. */
.slide-media{
  position:relative; flex:1 1 auto; min-height:0; width:100%;
  margin-top:40px; padding:0 5%;
}
.slide-media .media-frame{
  position:absolute; left:5%; right:5%; top:0; bottom:52px;
  border-radius:12px;
}
.slide-media .media-frame:has(> img){overflow:hidden}
/* A supplied image is cropped to fill the frame (cover). The house mock is a
   screenshot of a real product, so it is never cropped — it scales to fit and
   keeps its own corners and shadow. */
.slide-media .media-frame > img{
  width:100%; height:100%; object-fit:cover;
  border-radius:12px;
  box-shadow:0 -2px 12px rgba(18,48,71,.06), 0 26px 60px -18px rgba(18,48,71,.28);
}
/* A finished creative is shown whole — never cropped — and carries no frame
   of ours, because it already has its own edge treatment. */
/* Contained artwork sits in a wrapper that shrink-wraps the image exactly,
   so anything overlaid on it lands on the picture rather than in the gap
   above it. */
.slide-media .media-frame.fit-contain{
  display:flex; align-items:flex-end; justify-content:center;
  box-shadow:none;
}
.media-shot{position:relative; display:flex; max-width:100%; max-height:100%}
.media-shot > img{
  width:auto; height:auto; max-width:100%; max-height:100%;
  object-fit:contain; display:block;
  border-radius:14px; box-shadow:0 22px 50px -18px rgba(18,48,71,.34);
}
/* The house mock is drawn once at a fixed size and scaled to cover, exactly
   like a supplied screenshot would be — so its type and spacing never reflow
   into something that looks nothing like the real product. panel.js sets the
   transform; MOCK_W / MOCK_H there must match these. */
/* Logo laid over the artwork. Given a soft shadow because a white mark on a
   light patch of photo disappears otherwise. */
.media-overlay{position:absolute; z-index:2; display:flex; pointer-events:none}
.media-overlay img{
  height:clamp(26px, 3.4cqw, 52px); width:auto; display:block;
  filter:drop-shadow(0 2px 10px rgba(0,0,0,.45));
}
.media-overlay[data-at="top-left"]{top:5%; left:4%}
.media-overlay[data-at="top-right"]{top:5%; right:4%}
.media-overlay[data-at="bottom-left"]{bottom:6%; left:4%}
.media-overlay[data-at="bottom-right"]{bottom:6%; right:4%}

.slide-media .media-frame .mock{
  position:absolute; top:0; left:0;
  width:1240px; height:740px;
  transform-origin:top left;
  border-radius:12px;
  box-shadow:0 -2px 12px rgba(18,48,71,.06), 0 26px 60px -18px rgba(18,48,71,.28);
}
/* cover, centred: the frame is 1.4:1 – 2.1:1 depending on screen width, so
   a supplied image is always cropped on one axis. Centring loses half as
   much as anchoring to a corner. See the 10% safe margin in partner-spec. */
.slide-media img{width:100%; height:100%; object-fit:cover; object-position:center}

/* Layout variants ------------------------------------------------
   showcase — badge + headline + copy, product shot anchored bottom
   plain    — copy only, centred in the slot
   editorial— full-bleed image, copy bottom-left over it            */
/* An unsold spot is outlined, so nobody mistakes it for a real placement,
   and carries the youX X as a watermark so it reads as our own house ad
   rather than a half-finished advertiser creative. */
.slide.is-available::before{
  content:""; position:absolute; inset:30px; z-index:0;
  border:2px dashed var(--accent, #55c2ff); border-radius:16px; opacity:.3;
  pointer-events:none;
}
.slide.is-available::after{
  content:""; position:absolute; z-index:0; pointer-events:none;
  left:50%; top:50%; transform:translate(-50%,-50%);
  width:min(74cqw, 780px); aspect-ratio:2108/2025;
  background:url("assets/youx-x.svg") center/contain no-repeat;
  opacity:.07;
}

.slide[data-layout="plain"]{justify-content:center}
.slide[data-layout="plain"] .slide-badge{margin-top:0}

.slide[data-layout="editorial"]{align-items:flex-start; justify-content:flex-end}
.slide[data-layout="editorial"]::after{
  content:""; position:absolute; inset:0; z-index:0;
  background:linear-gradient(180deg, rgba(5,14,23,.05) 0%, rgba(5,14,23,.55) 55%, rgba(5,14,23,.88) 100%);
}
.slide[data-layout="editorial"] .slide-badge{margin:0 0 16px 52px}
.slide[data-layout="editorial"] .slide-head,
.slide[data-layout="editorial"] .slide-body{text-align:left; padding:0 52px; max-width:20ch}
.slide[data-layout="editorial"] .slide-body{max-width:52ch}
.slide[data-layout="editorial"] .slide-ctas{margin:26px 0 60px 52px; justify-content:flex-start}
.slide[data-layout="editorial"] .slide-media{display:none}

/* Rotation controls */
.promo-dots{
  position:absolute; left:0; right:0; bottom:18px; z-index:4;
  display:flex; justify-content:center; gap:8px;
}
.promo-dots button{
  width:8px; height:8px; padding:0; border:0; border-radius:999px; cursor:pointer;
  background:var(--dot, rgba(18,48,71,.22)); transition:width .22s, background .22s;
}
.promo-dots button[aria-current="true"]{width:24px; background:var(--dot-on, #55c2ff)}

.promo-disclosure{
  position:absolute; left:26px; bottom:16px; z-index:4;
  font-size:11px; letter-spacing:.04em; color:var(--disclosure, #8b9aa8);
}

/* ── Narrow: the slot drops below the form as a banner ───────── */
@container screen (max-width: 959.98px){
  .auth{padding:44px 24px}
  .lockup{margin-bottom:44px}
  .card{padding:32px 26px 34px}
  .promo{min-height:0; height:340px; border-top:1px solid var(--line-soft)}
  .slide{justify-content:center; padding:26px 0 80px}
  .slide-badge{margin-top:0}
  .slide.is-available::before{inset:14px; border-radius:12px}
  .slide.is-available::after{width:min(70cqw, 300px); opacity:.06}
  .slide-logo{height:30px; margin-top:12px}
  .slide > .slide-logo:first-child,
  .slide > .slide-head:first-child{margin-top:0}
  .slide-logo img{max-width:150px}
  .slide-logo + .slide-head{margin-top:10px}
  .slide-flag{top:14px; right:14px; font-size:11.5px; padding:8px 16px}
  .slide-head{font-size:clamp(23px, 6.2cqw, 32px); margin-top:14px; max-width:26ch}
  .slide-body{font-size:14.5px; margin-top:10px; max-width:min(58ch, 88%)}
  .slide-body p{display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden}
  .slide-body p + p{display:none}
  .slide-ctas{margin-top:18px; gap:8px}
  .slide-cta{font-size:14.5px; padding:11px 20px}
  .slide-cta--ghost{display:none}   /* one action only in a 340px banner */
  .slide-media{display:none}
  .promo-dots{bottom:16px}
  .promo-disclosure{left:0; right:0; text-align:center; bottom:38px}
  .slide[data-layout="editorial"] .slide-badge{margin-left:24px}
  .slide[data-layout="editorial"] .slide-head,
  .slide[data-layout="editorial"] .slide-body{padding:0 24px}
  .slide[data-layout="editorial"]{justify-content:center}
  .slide[data-layout="editorial"] .slide-ctas{margin:16px 0 0 24px}
}
@container screen (max-width: 620px){
  .promo{height:230px}
  .slide-body{display:none}
}

/* ═══════════════════════════════════════════════════════════════
   House creative: a rendered Manage worklist. Decorative only.
   ═══════════════════════════════════════════════════════════════ */
.mock{
  position:relative; background:#fff; font-size:13px; color:#33414d;
  display:flex; flex-direction:column; overflow:hidden;
}
.mock::after{
  content:""; position:absolute; inset:0; z-index:3;
  background:rgba(120,134,146,.34); pointer-events:none;
}
.mock-bar{display:flex; align-items:center; gap:12px; padding:16px 22px; border-bottom:1px solid #eef2f6}
.mock-chip{
  width:30px; height:30px; border-radius:7px; background:var(--brand);
  color:#fff; font-weight:700; font-size:13px; display:grid; place-items:center;
}
.mock-word{font-family:"DM Sans",sans-serif; font-size:23px; font-weight:700; color:var(--brand)}
.mock-divider{width:1px; height:30px; background:#e6ecf2; margin-left:14px}
.mock-actions{margin-left:auto; display:flex; align-items:center; gap:18px}
.mock-actions svg{width:20px; height:20px; fill:none; stroke:#7d8b97; stroke-width:1.7;
  stroke-linecap:round; stroke-linejoin:round; display:block}
.mock-avatar{
  width:30px; height:30px; border-radius:999px; background:var(--brand-press); color:#fff;
  display:grid; place-items:center; font-size:12px; font-weight:600; letter-spacing:.02em;
}

.mock-body{display:flex; flex:1 1 auto; min-height:0}
.mock-rail{
  width:71px; flex:0 0 71px; border-right:1px solid #eef2f6;
  display:flex; flex-direction:column; align-items:center; gap:22px; padding:22px 0;
}
.mock-rail svg{width:21px; height:21px; fill:none; stroke:#9fb0bd; stroke-width:1.7;
  stroke-linecap:round; stroke-linejoin:round; display:block}
.mock-rail .on{background:#e3f3fd; border-radius:8px; padding:6px; margin:-6px 0}
.mock-rail .on svg{stroke:var(--brand-press)}

.mock-main{flex:1 1 auto; min-width:0; min-height:0; padding:24px 28px; display:flex; flex-direction:column}
.mock-head{display:flex; align-items:center; gap:18px}
.mock-head h3{font-size:26px; font-weight:700; color:#1e2a33; margin-right:6px}
.mock-search{
  flex:1 1 auto; max-width:300px; border:1px solid #dde5ed; border-radius:7px;
  padding:9px 14px 9px 34px; position:relative; color:#33414d; font-size:14px;
  background:
    radial-gradient(circle at 6px 6px, transparent 4.4px, #98a6b3 4.4px, #98a6b3 5.6px, transparent 5.6px) 12px 10px / 14px 14px no-repeat;
}
.mock-btn{
  border:1px solid var(--brand); color:var(--brand-press); border-radius:7px;
  padding:9px 18px; font-size:14px; font-weight:500;
}
.mock-filters{margin:14px 0 12px; color:#5b6975; font-size:13.5px}
.mock-none{
  border:1px solid #bfe3fb; color:var(--brand-press); border-radius:6px;
  padding:4px 12px; margin-left:6px; font-size:13px;
}

.mock-table{width:100%; border-collapse:collapse; font-size:13.5px; table-layout:fixed}
.mock-table th:nth-child(1),.mock-table th:nth-child(2){width:19%}
.mock-table th:nth-child(3){width:18%}
.mock-table th{
  background:#b8d4e6; color:#22414f; text-align:left; font-weight:700;
  text-transform:uppercase; font-size:12px; letter-spacing:.05em; padding:12px 16px;
}
.mock-table td{padding:16px 16px; border-bottom:1px solid #eef2f6; vertical-align:top; color:#2b3a45}
.mock-table td i{display:block; font-style:normal; font-size:12px; color:#7d8b97; margin-top:2px}
.mock-table td.id{color:var(--brand-press)}
.mock-total{margin-top:auto; padding-top:22px; color:#5b6975; font-size:13.5px}
.mock-total b{color:#1e2a33}

.mock-drawer{
  position:absolute; top:66px; right:0; bottom:0; width:40%; min-width:290px; z-index:4;
  background:#fff; box-shadow:-18px 0 40px -20px rgba(18,48,71,.3);
  padding:24px 26px; display:flex; flex-direction:column;
}
.mock-drawer-head{display:flex; align-items:center; justify-content:space-between; margin-bottom:20px}
.mock-drawer-head h4{font-size:23px; font-weight:700; color:#1e2a33}
.mock-x{font-size:22px; color:#6b7785}
.mock-group{
  margin:0 0 14px; font-size:16px; font-weight:600; color:var(--brand-press);
  display:flex; align-items:center; gap:9px;
}
.mock-group::before{content:""; width:17px; height:14px; border-radius:3px; border:2px solid currentColor}
.mock-selects{display:grid; grid-template-columns:1fr 1fr; gap:12px 18px; margin-bottom:24px}
.mock-selects label{display:block; font-size:12.5px; color:#5b6975}
.mock-selects span{
  display:block; margin-top:6px; border:1px solid #dde5ed; border-radius:7px;
  padding:9px 12px; color:#8b98a4; font-size:13.5px;
  background:linear-gradient(45deg, transparent 48%, #8b98a4 48%, #8b98a4 52%, transparent 52%) right 16px top 15px / 7px 7px no-repeat;
}
.mock-clear{
  margin-top:auto; align-self:flex-end;
  border:1px solid #dde5ed; border-radius:7px; padding:11px 18px;
  font-size:14px; color:#33414d;
}

@media (prefers-reduced-motion: reduce){
  *{animation-duration:.001ms !important; transition-duration:.001ms !important}
}