/* Regulatory Watch (first issue 1 Nov 2026).
   Adrien: "Make it visually appealing, not just plain text ... People have very
   short attention span. Maybe put somethings inside 3d pills, maybe some
   stickers, icons". Built on the navy stage and its pills (Modules and
   Features, 2026-10-23): navy cards, one color per source, raised pills.
   Only pages that link this file get it; site.css is not touched. */

.rw {
  --rw-navy: #0F1A33;
  --rw-navy-2: #14223F;
  --rw-ivory: #FAF7F0;
  --rw-gold: #E6C870;
  /* Wider than the reading column, never wider than the screen. */
  --rw-w: min(960px, calc(100vw - 2rem));
  position: relative;
  left: 50%;
  width: var(--rw-w);
  margin: 2.5rem 0 0 calc(var(--rw-w) / -2);
  font-family: var(--sans);
  line-height: 1.6;
}
/* One color per source. The ink is for text on a pale ground. */
.rw-fda { --c: #E8A08C; --c-ink: #A4523D; }
.rw-eu  { --c: #86B6E0; --c-ink: #2F6696; }
.rw-vet { --c: #8FCB9F; --c-ink: #356F47; }

/* ── In 30 seconds: the issue as five raised pills ── */
.rw-glance {
  padding: 1.6rem 1.6rem 1.8rem;
  border-radius: 22px;
  background: linear-gradient(160deg, #172848 0%, var(--rw-navy) 100%);
  box-shadow: 0 30px 60px -34px rgba(0, 0, 0, 0.7);
}
.rw .rw-glance-title {
  margin: 0 0 1rem;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--rw-gold);
}
.rw .rw-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.rw .rw-pills li { margin: 0; }
/* The raised pill: a light top edge, a darker bottom edge and a soft shadow
   of its own color, so it reads as an object rather than a flat label. */
.rw a.rw-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.5rem 1.15rem 0.55rem 0.5rem;
  border-radius: 999px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--c) 72%, #fff) 0%, var(--c) 55%, color-mix(in srgb, var(--c) 82%, #000) 100%);
  box-shadow:
    inset 0 1.5px 0 rgba(255, 255, 255, 0.55),
    inset 0 -2px 0 rgba(0, 0, 0, 0.14),
    0 10px 22px -10px var(--c);
  color: #0C162C;
  font-size: 0.9rem;
  font-weight: 500;
  line-height: 1.25;
  text-decoration: none;
  transition: transform 0.2s, box-shadow 0.2s;
}
.rw a.rw-pill:hover, .rw a.rw-pill:focus-visible {
  color: #0C162C;
  transform: translateY(-2px);
  box-shadow:
    inset 0 1.5px 0 rgba(255, 255, 255, 0.55),
    inset 0 -2px 0 rgba(0, 0, 0, 0.14),
    0 16px 28px -10px var(--c);
}
.rw-pill-num {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 50%;
  background: #0C162C;
  color: var(--c);
  font-family: var(--serif);
  font-size: 1rem;
  font-weight: 600;
  font-variant-numeric: lining-nums;
}

/* ── One card per event ── */
.rw-item {
  position: relative;
  margin-top: 1.8rem;
  padding: 2rem 2rem 1.6rem;
  border: 1px solid rgba(250, 247, 240, 0.09);
  border-radius: 22px;
  background: linear-gradient(155deg, color-mix(in srgb, var(--c) 16%, var(--rw-navy-2)) 0%, #111D38 45%, var(--rw-navy) 100%);
  box-shadow: 0 30px 60px -32px rgba(0, 0, 0, 0.75);
  color: rgba(250, 247, 240, 0.8);
  scroll-margin-top: 6.5rem;
}

/* The sticker: a tilted label with a white edge, as if stuck on the card. */
.rw-sticker {
  position: absolute;
  top: -0.85rem;
  right: 1.4rem;
  z-index: 1;
  padding: 0.35rem 0.85rem 0.4rem;
  border: 2.5px solid #fff;
  border-radius: 10px;
  background: var(--c);
  box-shadow: 0 6px 14px -4px rgba(0, 0, 0, 0.45);
  color: #0C162C;
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
  transform: rotate(4deg);
}
.rw-item:nth-of-type(even) .rw-sticker { transform: rotate(-3deg); }

.rw-head {
  display: flex;
  gap: 1.1rem;
  align-items: flex-start;
  margin-bottom: 1.4rem;
}
/* The icon on a raised tile of its color. */
.rw-icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 3.1rem;
  height: 3.1rem;
  border-radius: 14px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--c) 70%, #fff) 0%, var(--c) 60%, color-mix(in srgb, var(--c) 80%, #000) 100%);
  box-shadow: inset 0 1.5px 0 rgba(255, 255, 255, 0.5), 0 10px 20px -10px var(--c);
}
.rw-icon svg {
  width: 1.6rem;
  height: 1.6rem;
  fill: none;
  stroke: #0C162C;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.rw .rw-source {
  margin: 0.1rem 0 0.45rem;
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  color: rgba(250, 247, 240, 0.62);
}
.rw-tag {
  display: inline-block;
  margin-right: 0.4rem;
  padding: 0.05rem 0.5rem;
  border: 1px solid var(--c);
  border-radius: 6px;
  color: var(--c);
  font-weight: 500;
  letter-spacing: 0.08em;
}
.rw .rw-title {
  margin: 0;
  font-family: var(--serif);
  font-size: 1.75rem;
  font-weight: 500;
  /* Lining figures: in old-style ones, "Annex 11" reads "Annex ıı". */
  font-variant-numeric: lining-nums;
  line-height: 1.2;
  color: var(--rw-ivory);
}
.rw-num {
  margin-right: 0.55rem;
  color: var(--c);
  font-variant-numeric: lining-nums;
}

.rw-grid {
  display: grid;
  grid-template-columns: minmax(0, 15rem) minmax(0, 1fr);
  gap: 1.6rem;
  align-items: start;
}
/* The number to remember, large. */
.rw-stat {
  padding: 1.2rem 1.2rem 1.3rem;
  border-radius: 16px;
  background: rgba(250, 247, 240, 0.05);
  border: 1px solid rgba(250, 247, 240, 0.08);
}
.rw-stat-big {
  display: block;
  font-family: var(--serif);
  font-size: 3.2rem;
  font-weight: 600;
  font-variant-numeric: lining-nums;
  line-height: 1;
  color: var(--c);
}
.rw-stat-label {
  display: block;
  margin-top: 0.6rem;
  font-size: 0.85rem;
  line-height: 1.45;
  color: rgba(250, 247, 240, 0.72);
}
.rw-quote {
  margin: 0;
  padding: 1.2rem 1.2rem 1.3rem;
  border-left: 3px solid var(--c);
  border-radius: 0 16px 16px 0;
  background: rgba(250, 247, 240, 0.05);
}
.rw-quote p {
  margin: 0;
  font-family: var(--serif);
  font-size: 1.3rem;
  font-style: italic;
  line-height: 1.35;
  color: var(--rw-ivory);
}
.rw-quote cite {
  display: block;
  margin-top: 0.7rem;
  font-size: 0.78rem;
  font-style: normal;
  color: var(--c);
}

.rw h3 {
  margin: 0 0 0.6rem;
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--rw-gold);
}
.rw ul {
  margin: 0;
  padding-left: 1.1rem;
}
.rw li {
  margin-bottom: 0.45rem;
  font-size: 0.95rem;
  line-height: 1.55;
}
.rw-happened li::marker { color: var(--c); }

/* What to check: a pale panel of ticks, the part a reader takes away. */
.rw-check {
  margin-top: 1.4rem;
  padding: 1.2rem 1.3rem 1rem;
  border-radius: 16px;
  background: color-mix(in srgb, var(--c) 18%, var(--rw-ivory));
  color: #1A1612;
}
.rw-check h3 { color: var(--c-ink); }
.rw-check ul { padding-left: 0; list-style: none; }
.rw-check li {
  position: relative;
  padding-left: 2rem;
  color: #2A241C;
}
.rw-check li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.1rem;
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 6px;
  background: var(--c-ink) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 0.9rem no-repeat;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35);
}

.rw .rw-cite {
  margin: 1.1rem 0 0;
  font-size: 0.82rem;
  color: rgba(250, 247, 240, 0.6);
}
.rw .rw-cite a {
  color: var(--c);
  text-decoration-color: currentColor;
  white-space: nowrap;
}
.rw .rw-cite a:hover { color: var(--rw-ivory); }

.rw .rw-note {
  margin: 1.8rem 0 0;
  font-size: 0.82rem;
  color: var(--ink-soft);
  text-align: center;
}

/* ── A phone ── */
@media (max-width: 640px) {
  .rw-glance { padding: 1.3rem 1.1rem 1.4rem; }
  .rw a.rw-pill { font-size: 0.85rem; }
  .rw-item { padding: 1.9rem 1.2rem 1.3rem; }
  .rw-head { gap: 0.8rem; }
  .rw-icon { width: 2.6rem; height: 2.6rem; border-radius: 12px; }
  .rw-icon svg { width: 1.35rem; height: 1.35rem; }
  .rw .rw-title { font-size: 1.4rem; }
  .rw-grid { grid-template-columns: minmax(0, 1fr); gap: 1.1rem; }
  .rw-stat-big { font-size: 2.6rem; }
  .rw-sticker { right: 1rem; }
}

@media (prefers-reduced-motion: reduce) {
  .rw a.rw-pill { transition: none; }
  .rw a.rw-pill:hover, .rw a.rw-pill:focus-visible { transform: none; }
}