/* ==========================================================================
   Sanctions and export controls (/sanctions). Builds on trade.css (the
   Observatory frame). Showpiece: the case-file wall, an archive cabinet with
   one drawer per year a listing took effect and one manila folder per entry,
   its tab inked by list. Prefix sx-.
   List inks (marks only; text stays ink):
     SDN #6E42A6 violet · EL #C9A24A gold · UVL #B5793A · MEU #8A5A2B
     DPL #9C3D54 · ISN #3F6E8C · DTC #4E7D5B · other sanctions violet, other export gold
   ========================================================================== */

.sx {
  --sx-sdn: #6E42A6; --sx-el: #C9A24A; --sx-uvl: #B5793A; --sx-meu: #8A5A2B; --sx-dpl: #9C3D54; --sx-isn: #3F6E8C; --sx-dtc: #4E7D5B; --sx-other: #7A7385;
  --sx-manila: #EFE2C2; --sx-manila-2: #E3D2A8; --sx-brass: #C9A24A;
}
.sx .is-sdn, .sx .is-sanctions { --sx-tab: var(--sx-sdn); }
.sx .is-el, .sx .is-export { --sx-tab: var(--sx-el); }
.sx .is-uvl { --sx-tab: var(--sx-uvl); }
.sx .is-meu { --sx-tab: var(--sx-meu); }
.sx .is-dpl { --sx-tab: var(--sx-dpl); }
.sx .is-isn { --sx-tab: var(--sx-isn); }
.sx .is-dtc { --sx-tab: var(--sx-dtc); }
.sx .is-other { --sx-tab: var(--sx-other); }

/* The notice: always first, plain and firm. */
.sx-notice {
  max-width: 52rem; margin: 0 0 var(--s-4); padding: var(--s-2) var(--s-3);
  border: 1px solid var(--line); border-left: 4px solid var(--ink); background: var(--mist); font-size: 0.95rem; line-height: 1.6;
}
.sx-notice p { margin: 0; }
.sx-notice-kicker { margin-bottom: 0.3rem !important; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent-dark); }
.sx-kpi-small { font-size: 0.9rem; font-weight: 500; color: var(--muted); }
.sx-kpi-date { font-size: clamp(1.4rem, 2.2vw, 1.8rem) !important; }

/* ------------------------------------------------------------ The wall */
.sx-wall-band {
  position: relative; margin: 0 calc(50% - 50vw) var(--s-4); padding: var(--s-5) max(var(--s-3), calc(50vw - var(--max) / 2 + var(--s-3))) var(--s-4);
  color: #EDE6F5;
  background:
    radial-gradient(90% 60% at 20% 0%, rgba(201, 162, 74, 0.14), transparent 60%),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.025) 0 1px, transparent 1px 64px),
    linear-gradient(180deg, #2A1B45 0%, #1E1333 100%);
}
.sx-wall-head { max-width: 46rem; margin-bottom: var(--s-3); }
.sx-wall-kicker { margin: 0 0 0.4rem; font-family: var(--font-serif); font-variant-caps: all-small-caps; letter-spacing: 0.2em; font-size: 1.05rem; color: var(--sx-brass); }
.sx-wall-title { margin: 0 0 0.6rem; font-family: var(--font-serif); font-weight: 500; font-size: var(--fs-h2); line-height: 1.05; color: #fff; letter-spacing: -0.01em; }
.sx-wall-sub { margin: 0; font-size: 0.95rem; line-height: 1.6; color: var(--on-ink); }
.sx-key { list-style: none; display: flex; flex-wrap: wrap; gap: 0.4rem 1.2rem; margin: 1rem 0 0; padding: 0; font-size: 0.82rem; color: var(--on-ink); }
.sx-key li { display: inline-flex; align-items: center; gap: 0.45rem; font-weight: 600; }
.sx-key-name { font-weight: 400; color: var(--on-ink-muted); }
.sx-tabkey { width: 18px; height: 10px; border-radius: 3px 3px 0 0; background: var(--sx-tab); box-shadow: 0 2px 0 var(--sx-manila); }

.sx-cabinet { position: relative; overflow-x: auto; overscroll-behavior-x: contain; padding: 1.5rem 0 0.5rem; scrollbar-color: rgba(201, 162, 74, 0.5) transparent; }
.sx-cabinet:focus-visible { outline: 2px solid var(--sx-brass); outline-offset: 4px; }
.sx-drawers { list-style: none; margin: 0; padding: 0 0 0 2px; display: flex; align-items: flex-end; gap: 10px; min-width: min-content; }
.sx-drawer { flex: 1 1 0; min-width: 104px; max-width: 170px; display: flex; flex-direction: column; justify-content: flex-end; }
.sx-drawer.is-empty { flex: 0 0 26px; min-width: 0; }
.sx-drawer.is-empty .sx-drawer-label { writing-mode: vertical-rl; transform: rotate(180deg); font-size: 0.68rem; }
.sx-drawer.is-empty .sx-drawer-count { display: none; }
.sx-drawer.is-undated { min-width: 136px; margin-left: 14px; }
.sx-stack { display: flex; flex-direction: column-reverse; padding: 0 6px; }
.sx-file {
  position: relative; display: flex; align-items: center; gap: 6px; height: 30px; margin-top: -10px; padding: 0 8px 0 0;
  background: linear-gradient(180deg, var(--sx-manila) 0%, var(--sx-manila-2) 100%); color: #3A2E1B; text-decoration: none;
  border-radius: 2px 6px 2px 2px; box-shadow: 0 -1px 0 rgba(0, 0, 0, 0.18), 0 6px 10px -8px rgba(0, 0, 0, 0.7);
  transform-origin: 50% 100%; transition: transform 0.25s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.25s;
}
.sx-stack > .sx-file:last-child { margin-top: 0; }
.sx-file::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--sx-tab); border-radius: 2px 0 0 2px; }
.sx-file-tab { flex: 0 0 auto; margin-left: 9px; padding: 1px 5px; border-radius: 3px; font-size: 0.6rem; font-weight: 700; letter-spacing: 0.08em; color: #fff; background: var(--sx-tab); }
.sx-file-name { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-family: var(--font-serif); font-size: 0.8rem; }
.sx-file:hover, .sx-file:focus-visible { z-index: 3; transform: translateY(-8px) rotate(-1.2deg); box-shadow: 0 -1px 0 rgba(0, 0, 0, 0.2), 0 14px 18px -10px rgba(0, 0, 0, 0.8); outline: none; }
.sx-file:focus-visible { box-shadow: 0 0 0 2px var(--sx-brass), 0 14px 18px -10px rgba(0, 0, 0, 0.8); }
.sx-file.is-open { z-index: 4; transform: translateY(-12px) rotate(-2deg); box-shadow: 0 0 0 2px #fff, 0 14px 18px -10px rgba(0, 0, 0, 0.8); }
.sx-more { display: block; margin: 0 0 6px; padding: 4px 6px; font-size: 0.76rem; font-weight: 600; color: var(--sx-brass); text-align: center; }
.sx-drawer-front {
  position: relative; display: flex; align-items: center; justify-content: space-between; gap: 6px; min-height: 44px; margin-top: 4px; padding: 6px 10px;
  border-radius: 3px; background: linear-gradient(180deg, #4A3570 0%, #382656 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), inset 0 -2px 0 rgba(0, 0, 0, 0.25), 0 10px 16px -10px rgba(0, 0, 0, 0.9);
}
.sx-drawer-front::after { content: ""; position: absolute; left: 50%; bottom: 7px; width: 26px; height: 5px; margin-left: -13px; border-radius: 3px; background: linear-gradient(180deg, #E2C377, #9C7A2E); opacity: 0.85; }
.sx-drawer-label { font-family: var(--font-serif); font-size: 1rem; font-weight: 600; color: #fff; font-variant-numeric: lining-nums tabular-nums; }
.sx-drawer.is-undated .sx-drawer-label { font-size: 0.8rem; font-weight: 500; font-style: italic; }
.sx-drawer-count { min-width: 1.6rem; padding: 1px 6px; border-radius: 2px; background: var(--sx-manila); color: #3A2E1B; font-size: 0.74rem; font-weight: 700; text-align: center; font-variant-numeric: tabular-nums; }
.sx-drawer.is-empty .sx-drawer-front { justify-content: center; padding: 8px 2px 14px; min-height: 64px; background: rgba(74, 53, 112, 0.45); }
.sx-drawer.is-empty .sx-drawer-front::after { display: none; }

/* Filed in on first view (assets/js/sanctions.js arms it; without JS the files simply show). */
.sx-cabinet.is-armed .sx-file { opacity: 0; transform: translateY(-46px) rotate(-3deg); }
.sx-cabinet.is-in .sx-file { opacity: 1; transform: none; transition: opacity 0.4s ease, transform 0.55s cubic-bezier(0.2, 0.9, 0.25, 1.15); transition-delay: calc(min(var(--di), 30) * 45ms + min(var(--i), 14) * 28ms); }
.sx-cabinet.is-in.is-settled .sx-file { transition-delay: 0s; transition-duration: 0.25s; }

/* The opened file. */
.sx-dossier {
  position: relative; z-index: 5; max-width: 30rem; margin: var(--s-3) 0 0; padding: 1.4rem 1.4rem 1.2rem;
  color: #2E2416; background: linear-gradient(180deg, #F6EBD0 0%, var(--sx-manila) 100%);
  border-radius: 2px 14px 2px 2px; box-shadow: 0 30px 50px -24px rgba(0, 0, 0, 0.9);
  animation: sx-open 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.sx-dossier::before { content: ""; position: absolute; top: -12px; left: 18px; width: 110px; height: 14px; border-radius: 6px 6px 0 0; background: #F6EBD0; }
.sx-dossier[hidden] { display: none; }
@keyframes sx-open { from { opacity: 0; transform: translateY(18px) rotate(-1deg); } }
.sx-dossier-close { position: absolute; top: 10px; right: 10px; width: 2rem; height: 2rem; border: 1px solid rgba(46, 36, 22, 0.35); border-radius: 50%; background: transparent; color: inherit; font-size: 1.2rem; line-height: 1; cursor: pointer; }
.sx-dossier-close:hover, .sx-dossier-close:focus-visible { background: #2E2416; color: var(--sx-manila); }
.sx-dossier-kicker { margin: 0; padding-right: 2.4rem; font-family: var(--font-serif); font-variant-caps: all-small-caps; letter-spacing: 0.14em; color: #6B5A3E; }
.sx-dossier-name { margin: 0.2rem 0 0.8rem; font-family: var(--font-serif); font-weight: 500; font-size: 1.6rem; line-height: 1.12; color: var(--ink); outline: none; }
.sx-dossier-facts { margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.6rem 1rem; }
.sx-dossier-facts div { border-top: 1px solid rgba(46, 36, 22, 0.22); padding-top: 0.35rem; }
.sx-dossier-facts dt { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: #6B5A3E; }
.sx-dossier-facts dd { margin: 0.1rem 0 0; font-size: 0.92rem; }
.sx-dossier-stamp {
  position: absolute; right: 18px; bottom: 54px; margin: 0; padding: 4px 10px; border: 2px solid rgba(110, 66, 166, 0.55); border-radius: 3px;
  color: rgba(110, 66, 166, 0.7); font-size: 0.68rem; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; transform: rotate(-8deg); pointer-events: none;
}
.sx-dossier-link { display: inline-block; margin-top: 1rem; font-size: 0.88rem; font-weight: 600; color: var(--accent-dark); }

/* ------------------------------------------------------------ Stats */
.sx-bar { background: var(--sx-tab) !important; }
.sx-years { list-style: none; margin: 0; padding: 0 0 0.2rem; display: flex; align-items: flex-end; gap: 3px; height: 13rem; border-bottom: 1px solid #B9B2C6; }
.sx-years li { flex: 1 1 0; min-width: 0; height: 100%; }
.sx-years a { position: relative; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; height: 100%; text-decoration: none; color: var(--ink); }
.sx-ybar { display: block; width: 100%; max-width: 28px; min-height: 2px; background: var(--accent); border-radius: 2px 2px 0 0; }
.sx-years .is-undated .sx-ybar { background: repeating-linear-gradient(45deg, #9C8BBE 0 3px, #C9B8DE 3px 6px); }
.sx-years a:hover .sx-ybar, .sx-years a:focus-visible .sx-ybar { background: var(--accent-dark); }
.sx-yn { order: -1; font-size: 0.7rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.sx-yl { position: absolute; top: 100%; margin-top: 0.3rem; font-size: 0.66rem; color: var(--muted); white-space: nowrap; }
.sx-years li:nth-child(even):not(:last-child) .sx-yl { visibility: hidden; }
.sx-years + * { margin-top: 1.6rem; }

/* ------------------------------------------------------------ Change log */
.sx-changes { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; max-width: 52rem; }
.sx-change { display: grid; grid-template-columns: 6rem minmax(0, 1fr) auto auto; align-items: baseline; gap: 0.3rem 1rem; padding: 0.55rem 0; border-bottom: 1px solid var(--line); font-size: 0.92rem; }
.sx-change-mark { font-size: 0.7rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: #2F6B45; }
.sx-change.is-removed .sx-change-mark { color: var(--danger); }
.sx-change.is-removed .sx-change-name { text-decoration: line-through; text-decoration-color: rgba(139, 58, 58, 0.5); }
.sx-change-name { font-family: var(--font-serif); font-size: 1.02rem; color: var(--ink); }
.sx-change-list { font-size: 0.74rem; font-weight: 700; color: var(--muted); }
.sx-change time { font-size: 0.82rem; color: var(--muted); white-space: nowrap; }

/* ------------------------------------------------------------ Table */
.sx-filters {
  display: flex; flex-wrap: wrap; align-items: flex-end; gap: 0.75rem 1rem; margin: 0 0 var(--s-2); padding: var(--s-2);
  border: 1px solid var(--line); background: var(--mist); border-radius: 4px;
}
.sx-field { display: grid; gap: 0.25rem; min-width: 0; flex: 1 1 12rem; }
.sx-field-q { flex: 2 1 16rem; }
.sx-field label { font-size: 0.74rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.sx-field select, .sx-field input { width: 100%; min-width: 0; padding: 0.45rem 0.5rem; font: inherit; font-size: 0.9rem; color: var(--ink); background: var(--paper); border: 1px solid var(--line); border-radius: 3px; }
.sx-q-wrap { position: relative; display: block; }
.sx-q-wrap .tr-icon { position: absolute; left: 0.55rem; top: 50%; transform: translateY(-50%); color: var(--muted); }
.sx-q-wrap input { padding-left: 2rem; }
.sx-field select:focus-visible, .sx-field input:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.sx-actions { display: flex; align-items: center; gap: 0.9rem; padding-bottom: 0.1rem; }
.sx-actions a { font-size: 0.88rem; font-weight: 600; color: var(--accent-dark); }
.sx-count { margin: 0 0 0.5rem; font-size: 0.86rem; color: var(--muted); }
.sx-table-wrap { max-height: 40rem; }
.sx-table th[scope="row"] { min-width: 13rem; text-align: left; }
.sx-table td { font-size: 0.86rem; vertical-align: top; }
.sx-table tr:target { background: #FFF6DC; }
.sx-name { font-family: var(--font-serif); font-size: 1rem; font-weight: 600; color: var(--ink); }
.sx .tr-source a { overflow-wrap: anywhere; }
.sx-sub { display: block; margin-top: 0.15rem; font-size: 0.76rem; font-weight: 400; color: var(--muted); }
.sx-pill { display: inline-block; padding: 0 5px; border-radius: 3px; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.06em; color: #fff; background: var(--sx-tab); }
.sx-table a { color: var(--accent-dark); font-weight: 600; }
.sx-table tr[hidden] { display: none; }

@media (max-width: 720px) {
  .sx-wall-band { padding-top: var(--s-4); }
  .sx-cabinet { overflow: visible; padding-top: 0.5rem; }
  .sx-drawers { flex-direction: column; align-items: stretch; gap: 12px; min-width: 0; }
  .sx-drawer, .sx-drawer.is-undated { flex: none; display: grid; grid-template-columns: 4.6rem minmax(0, 1fr); align-items: start; gap: 8px; margin: 0; }
  .sx-drawer.is-empty { display: none; }
  .sx-drawer-front { order: -1; flex-direction: column; justify-content: center; margin: 0; min-height: 52px; padding: 6px 4px 14px; text-align: center; }
  .sx-drawer.is-undated .sx-drawer-label { font-size: 0.7rem; }
  .sx-stack { flex-direction: row; flex-wrap: wrap; gap: 6px; padding: 0; }
  .sx-file, .sx-stack > .sx-file:last-child { margin: 0; width: calc(50% - 3px); height: 28px; }
  .sx-cabinet.is-armed .sx-file { transform: translateX(-24px); }
  .sx-dossier { position: fixed; left: 0; right: 0; bottom: 0; max-width: none; margin: 0; max-height: 75vh; overflow: auto; border-radius: 14px 14px 0 0; padding-bottom: calc(1.2rem + env(safe-area-inset-bottom)); }
  .sx-dossier::before { display: none; }
  .sx-dossier-facts { grid-template-columns: minmax(0, 1fr); }
  .sx-change { grid-template-columns: 4.8rem minmax(0, 1fr); }
  .sx-change-list, .sx-change time { grid-column: 2; }
  .sx-years li:not(:last-child):not(:first-child) .sx-yl { visibility: hidden; }
}
@media (prefers-reduced-motion: reduce) {
  .sx-cabinet.is-armed .sx-file { opacity: 1; transform: none; }
  .sx-cabinet.is-in .sx-file, .sx-file { transition: none; }
  .sx-dossier { animation: none; }
}
@media print {
  .sx-wall-band { color: #000; background: none; }
  .sx-filters, .sx-dossier { display: none; }
}