/* Ultimate Reloader PRO - Announcements + What's New
   Scoped to body.ur-pro-shell and built on the shell's existing tokens
   (--hot, --panel, --line, --ink, --muted, --cond) so these blocks inherit the
   flat/tactical treatment rather than restating it.
*/

/* =========================================================================
   Announcements
   ====================================================================== */

body.ur-pro-shell .ur-ann{
  margin:0 0 28px;
}

body.ur-pro-shell .ur-ann-heading{
  font-family:var(--cond);
  font-weight:900;
  letter-spacing:.12em;
  text-transform:uppercase;
  font-size:18px;
  margin:0 0 12px;
}

body.ur-pro-shell .ur-ann-list{
  display:grid;
  gap:10px;
}

body.ur-pro-shell .ur-ann-item{
  position:relative;
  display:grid;
  grid-template-columns:4px 1fr;
  gap:0;
  background:var(--panel);
  border:1px solid var(--line);
}

/* The bar is the whole colour story - one accent edge per severity. */
body.ur-pro-shell .ur-ann-bar{ background:var(--muted2); }
body.ur-pro-shell .ur-ann-item.is-new   .ur-ann-bar{ background:var(--hot); }
body.ur-pro-shell .ur-ann-item.is-info  .ur-ann-bar{ background:var(--ok); }
body.ur-pro-shell .ur-ann-item.is-alert .ur-ann-bar{ background:var(--warn); }

body.ur-pro-shell .ur-ann-body{
  padding:14px 44px 14px 16px;
  min-width:0;
}

body.ur-pro-shell .ur-ann-meta{
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:6px;
  font-size:12px;
  color:var(--muted);
}

body.ur-pro-shell .ur-ann-chip{
  font-family:var(--cond);
  font-weight:900;
  letter-spacing:.12em;
  text-transform:uppercase;
  font-size:11px;
  padding:3px 8px;
  border:1px solid var(--line);
  color:var(--ink);
}

body.ur-pro-shell .ur-ann-item.is-new   .ur-ann-chip{ border-color:var(--hot);  color:var(--hot); }
body.ur-pro-shell .ur-ann-item.is-info  .ur-ann-chip{ border-color:var(--ok);   color:var(--ok); }
body.ur-pro-shell .ur-ann-item.is-alert .ur-ann-chip{ border-color:var(--warn); color:var(--warn); }

body.ur-pro-shell .ur-ann-title{
  font-family:var(--cond);
  font-weight:800;
  letter-spacing:.02em;
  font-size:20px;
  line-height:1.15;
  margin:0 0 6px;
}

body.ur-pro-shell .ur-ann-copy{ color:var(--ink); font-size:15px; line-height:1.5; }
body.ur-pro-shell .ur-ann-copy > :first-child{ margin-top:0; }
body.ur-pro-shell .ur-ann-copy > :last-child{ margin-bottom:0; }

body.ur-pro-shell .ur-ann-actions{ margin:10px 0 0; }

body.ur-pro-shell .ur-ann-btn{
  display:inline-block;
  padding:8px 16px;
  background:var(--hot);
  color:#0b0c0f;
  font-family:var(--cond);
  font-weight:900;
  letter-spacing:.1em;
  text-transform:uppercase;
  font-size:13px;
  border:1px solid var(--hot);
}

body.ur-pro-shell .ur-ann-btn:hover{ background:transparent; color:var(--hot); }

body.ur-pro-shell .ur-ann-dismiss{
  position:absolute;
  top:8px;
  right:8px;
  width:28px;
  height:28px;
  line-height:1;
  font-size:20px;
  background:transparent;
  color:var(--muted);
  border:1px solid transparent;
  cursor:pointer;
}

body.ur-pro-shell .ur-ann-dismiss:hover{ color:var(--hot); border-color:var(--line); }

/* =========================================================================
   What's New slider
   ====================================================================== */

body.ur-pro-shell .ur-wn{
  margin:0 0 32px;
}

body.ur-pro-shell .ur-wn-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:12px;
}

body.ur-pro-shell .ur-wn-heading{
  font-family:var(--cond);
  font-weight:900;
  letter-spacing:.12em;
  text-transform:uppercase;
  font-size:18px;
  margin:0;
}

body.ur-pro-shell .ur-wn-controls{
  display:flex;
  align-items:center;
  gap:8px;
}

body.ur-pro-shell .ur-wn-dots{
  display:flex;
  align-items:center;
  gap:6px;
  margin-right:6px;
}

body.ur-pro-shell .ur-wn-dot{
  width:8px;
  height:8px;
  padding:0;
  border:1px solid var(--muted2);
  background:transparent;
  cursor:pointer;
}

body.ur-pro-shell .ur-wn-dot[aria-selected="true"]{
  background:var(--hot);
  border-color:var(--hot);
}

body.ur-pro-shell .ur-wn-arrow{
  width:32px;
  height:32px;
  line-height:1;
  font-size:20px;
  background:var(--panel);
  color:var(--ink);
  border:1px solid var(--line);
  cursor:pointer;
}

body.ur-pro-shell .ur-wn-arrow:hover{ border-color:var(--hot); color:var(--hot); }

/* Pause / play. Two bars that become a triangle when rotation is stopped, so
   the control always shows what clicking it will do next. */
body.ur-pro-shell .ur-wn-toggle{
  display:inline-flex;
  align-items:center;
  justify-content:center;
}

body.ur-pro-shell .ur-wn-ico{
  display:block;
  width:10px;
  height:11px;
  border-left:3px solid currentColor;
  border-right:3px solid currentColor;
}

body.ur-pro-shell .ur-wn-toggle.is-paused .ur-wn-ico{
  width:0;
  height:0;
  border-left:9px solid currentColor;
  border-right:0;
  border-top:6px solid transparent;
  border-bottom:6px solid transparent;
  margin-left:3px;
}

body.ur-pro-shell .ur-wn-viewport{
  overflow:hidden;
  border:1px solid var(--line);
  background:var(--panel);
}

body.ur-pro-shell .ur-wn-track{
  display:flex;
  transition:transform .42s cubic-bezier(.22,.61,.36,1);
  will-change:transform;
}

body.ur-pro-shell .ur-wn-slide{
  flex:0 0 100%;
  min-width:0;
  display:grid;
  grid-template-columns:minmax(0,45fr) minmax(0,55fr);
  gap:0;
}

/* Text column: block at the top, button pinned to the bottom, so the CTA
   lands on the same baseline no matter how long the blurb runs. */
body.ur-pro-shell .ur-wn-copy{
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  gap:16px;
  padding:20px;
  min-width:0;
}

body.ur-pro-shell .ur-wn-kicker{
  display:flex;
  align-items:center;
  gap:10px;
  margin:0 0 8px;
  font-size:12px;
  color:var(--muted);
}

body.ur-pro-shell .ur-wn-chip{
  font-family:var(--cond);
  font-weight:900;
  letter-spacing:.12em;
  text-transform:uppercase;
  font-size:11px;
  padding:3px 8px;
  border:1px solid var(--line);
}

/* Five sources need five tells. The shell palette supplies three; the last two
   are defined here rather than in the shell, since only this block uses them. */
body.ur-pro-shell .ur-wn{
  --wn-download:#4aa3ff;
  --wn-tool:#b98cff;
}

body.ur-pro-shell .ur-wn-chip.is-video   { border-color:var(--hot);          color:var(--hot); }
body.ur-pro-shell .ur-wn-chip.is-topic   { border-color:var(--ok);           color:var(--ok); }
body.ur-pro-shell .ur-wn-chip.is-default { border-color:var(--line);         color:var(--muted); }
body.ur-pro-shell .ur-wn-chip.is-download{ border-color:var(--wn-download);  color:var(--wn-download); }
body.ur-pro-shell .ur-wn-chip.is-tool    { border-color:var(--wn-tool);      color:var(--wn-tool); }

body.ur-pro-shell .ur-wn-title{
  font-family:var(--cond);
  font-weight:800;
  letter-spacing:.01em;
  font-size:24px;
  line-height:1.12;
  margin:0 0 8px;
}

/* Clamped so every slide is the same height and the track does not jump. */
body.ur-pro-shell .ur-wn-blurb{
  margin:0;
  color:var(--muted);
  font-size:14px;
  line-height:1.5;
  display:-webkit-box;
  -webkit-line-clamp:3;
  -webkit-box-orient:vertical;
  overflow:hidden;
}

body.ur-pro-shell .ur-wn-facts{
  display:flex;
  flex-wrap:wrap;
  gap:6px 14px;
  list-style:none;
  margin:10px 0 0;
  padding:0;
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:.04em;
  text-transform:uppercase;
  color:var(--muted2);
}

body.ur-pro-shell .ur-wn-bottom{ margin:0; }

body.ur-pro-shell .ur-wn-btn{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:11px 20px;
  background:var(--hot);
  color:#0b0c0f;
  font-family:var(--cond);
  font-weight:900;
  letter-spacing:.1em;
  text-transform:uppercase;
  font-size:14px;
  border:1px solid var(--hot);
}

body.ur-pro-shell .ur-wn-btn:hover{ background:transparent; color:var(--hot); }
body.ur-pro-shell .ur-wn-btn-arrow{ transition:transform .18s ease; }
body.ur-pro-shell .ur-wn-btn:hover .ur-wn-btn-arrow{ transform:translateX(3px); }

/* --- Media column ----------------------------------------------------- */

body.ur-pro-shell .ur-wn-media{
  position:relative;
  border-left:1px solid var(--line);
  background:#0b0c0f;
  min-width:0;
}

body.ur-pro-shell .ur-wn-media-link{
  position:relative;
  display:block;
  width:100%;
  height:100%;
  aspect-ratio:16/9;
  overflow:hidden;
}

body.ur-pro-shell .ur-wn-media img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

/* Skiv only serves a 352px thumbnail. Rather than upscale it to mush across
   the full column, centre it at its native size on a dark field. */
body.ur-pro-shell .ur-wn-media.is-lowres{
  display:flex;
  align-items:center;
  justify-content:center;
  background:
    radial-gradient(120% 120% at 50% 0%, rgba(255,30,45,.10), transparent 60%),
    #0b0c0f;
}

body.ur-pro-shell .ur-wn-media.is-lowres .ur-wn-media-link{
  width:auto;
  max-width:100%;
  height:auto;
  aspect-ratio:auto;
}

body.ur-pro-shell .ur-wn-media.is-lowres img{
  width:auto;
  max-width:100%;
  height:auto;
  max-height:240px;
  object-fit:contain;
  border:1px solid var(--line);
}

body.ur-pro-shell .ur-wn-play{
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  width:56px;
  height:56px;
  border:2px solid rgba(255,255,255,.9);
  border-radius:50%;
  background:rgba(11,12,15,.55);
  pointer-events:none;
}

body.ur-pro-shell .ur-wn-play:after{
  content:"";
  position:absolute;
  top:50%;
  left:54%;
  transform:translate(-50%,-50%);
  border-style:solid;
  border-width:9px 0 9px 15px;
  border-color:transparent transparent transparent #fff;
}

body.ur-pro-shell .ur-wn-media-link:hover .ur-wn-play{ border-color:var(--hot); }
body.ur-pro-shell .ur-wn-media-link:hover .ur-wn-play:after{ border-left-color:var(--hot); }

/* Drawn card: what a discussion thread gets instead of artwork. */
body.ur-pro-shell .ur-wn-card{
  position:absolute;
  inset:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:6px;
  text-align:center;
  padding:20px;
  background:
    linear-gradient(135deg, rgba(54,209,139,.10), transparent 55%),
    repeating-linear-gradient(45deg, rgba(255,255,255,.02) 0 2px, transparent 2px 10px),
    var(--panel);
}

body.ur-pro-shell .ur-wn-card-mark{
  display:flex;
  align-items:center;
  justify-content:center;
  width:64px;
  height:64px;
  font-family:var(--cond);
  font-weight:900;
  font-size:30px;
  color:var(--ok);
  border:2px solid var(--ok);
}

/* Drawn cards inherit their source's colour, so a card and its chip agree. */
body.ur-pro-shell .ur-wn-card.is-tool{
  background:
    linear-gradient(135deg, rgba(185,140,255,.12), transparent 55%),
    repeating-linear-gradient(45deg, rgba(255,255,255,.02) 0 2px, transparent 2px 10px),
    var(--panel);
}

body.ur-pro-shell .ur-wn-card.is-tool .ur-wn-card-mark{
  color:var(--wn-tool);
  border-color:var(--wn-tool);
}

body.ur-pro-shell .ur-wn-card.is-download{
  background:
    linear-gradient(135deg, rgba(74,163,255,.12), transparent 55%),
    repeating-linear-gradient(45deg, rgba(255,255,255,.02) 0 2px, transparent 2px 10px),
    var(--panel);
}

body.ur-pro-shell .ur-wn-card.is-download .ur-wn-card-mark{
  color:var(--wn-download);
  border-color:var(--wn-download);
}

body.ur-pro-shell .ur-wn-card-label{
  font-family:var(--cond);
  font-weight:900;
  letter-spacing:.14em;
  text-transform:uppercase;
  font-size:12px;
  color:var(--ink);
}

body.ur-pro-shell .ur-wn-card-sub{
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:.04em;
  color:var(--muted);
}

/* --- Admin-only placeholder ------------------------------------------- */

body.ur-pro-shell .ur-wn-empty{
  padding:12px 16px;
  border:1px dashed var(--line);
  color:var(--muted);
  font-size:14px;
}

body.ur-pro-shell .ur-wn-empty a{ color:var(--hot); text-decoration:underline; }

/* =========================================================================
   Responsive
   ====================================================================== */

@media (max-width:760px){
  body.ur-pro-shell .ur-wn-slide{
    grid-template-columns:1fr;
  }

  /* Image first on a phone: it is what stops the scroll. */
  body.ur-pro-shell .ur-wn-media{
    order:-1;
    border-left:0;
    border-bottom:1px solid var(--line);
  }

  body.ur-pro-shell .ur-wn-media.is-lowres img{ max-height:200px; }

  body.ur-pro-shell .ur-wn-title{ font-size:21px; }

  body.ur-pro-shell .ur-wn-head{
    flex-direction:column;
    align-items:flex-start;
  }

  body.ur-pro-shell .ur-ann-body{ padding-right:40px; }
}

@media (prefers-reduced-motion:reduce){
  body.ur-pro-shell .ur-wn-track{ transition:none; }
  body.ur-pro-shell .ur-wn-btn-arrow{ transition:none; }
}