/* =========================================================================
   Sessyn data visualisation components
   =========================================================================
   Privacy information has to be *understandable*, not decorative (§5).
   Every component here pairs a visual signal with a text label, states its
   confidence, and explains itself — §47 forbids presenting inference as fact.
   ========================================================================= */

/* ---------- Cookie nutrition label (§8) ---------- */

.s-nutrition {
  --edge: var(--s-line);
  background: var(--s-surface);
  border: 1px solid var(--edge);
  border-radius: var(--s-radius-lg);
  overflow: hidden;
  font-family: var(--s-mono);
  font-size: var(--s-step--1);
}
.s-nutrition[data-verdict='blocked'] { --edge: color-mix(in srgb, var(--s-stop) 45%, var(--s-line)); }
.s-nutrition[data-verdict='allowed'] { --edge: color-mix(in srgb, var(--s-ok) 45%, var(--s-line)); }
.s-nutrition[data-verdict='restricted'] { --edge: color-mix(in srgb, var(--s-warn) 45%, var(--s-line)); }

.s-nutrition__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  padding: var(--s-3) var(--s-4);
  border-bottom: 1px solid var(--edge);
  background: var(--s-raised);
}
.s-nutrition__name {
  font-size: var(--s-step-0);
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--s-ink);
}
.s-nutrition__rows {
  margin: 0;
  display: grid;
  grid-template-columns: auto 1fr;
}
.s-nutrition__rows dt {
  padding: var(--s-2) var(--s-4);
  color: var(--s-ink-dim);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-size: 0.72rem;
  border-top: 1px solid var(--s-line);
}
.s-nutrition__rows dd {
  margin: 0;
  padding: var(--s-2) var(--s-4);
  color: var(--s-ink);
  border-top: 1px solid var(--s-line);
  text-align: right;
}
.s-nutrition__why {
  padding: var(--s-3) var(--s-4);
  border-top: 1px solid var(--edge);
  background: var(--s-base);
  color: var(--s-ink-mid);
  font-family: var(--s-display);
  line-height: 1.5;
}
.s-nutrition__why b {
  color: var(--s-ink);
  font-weight: 650;
}

/* ---------- Data destination map (§13) ---------- */

.s-destinations {
  display: grid;
  gap: var(--s-2);
}
.s-dest {
  display: grid;
  grid-template-columns: 1.2fr auto 1fr auto;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-3) var(--s-4);
  background: var(--s-surface);
  border: var(--s-rule);
  border-radius: var(--s-radius);
  font-family: var(--s-mono);
  font-size: var(--s-step--1);
}
@media (max-width: 46rem) {
  .s-dest {
    grid-template-columns: 1fr auto;
    row-gap: var(--s-2);
  }
  .s-dest__wire { display: none; }
}
.s-dest__host { color: var(--s-ink); }
.s-dest__kind { color: var(--s-ink-dim); text-transform: uppercase; letter-spacing: 0.08em; }

/* The wire: a travelling pulse that stops dead when the request is blocked. */
.s-dest__wire {
  position: relative;
  height: 2px;
  background: var(--s-line-bright);
  border-radius: 2px;
  overflow: hidden;
}
.s-dest__wire::after {
  content: '';
  position: absolute;
  inset-block: 0;
  width: 34%;
  border-radius: inherit;
  background: linear-gradient(90deg, transparent, var(--s-signal), transparent);
  animation: s-flow 2.4s linear infinite;
}
.s-dest[data-state='blocked'] .s-dest__wire {
  background: repeating-linear-gradient(
    90deg,
    var(--s-stop) 0 4px,
    transparent 4px 8px
  );
}
.s-dest[data-state='blocked'] .s-dest__wire::after {
  animation: none;
  display: none;
}

@keyframes s-flow {
  from { transform: translateX(-100%); }
  to { transform: translateX(320%); }
}

@media (prefers-reduced-motion: reduce) {
  .s-dest__wire::after { animation: none; opacity: 0.55; }
}

/* ---------- Activity timeline (§12) ---------- */

.s-timeline {
  list-style: none;
  margin: 0;
  padding: 0;
  border-left: 1px solid var(--s-line);
}
.s-timeline li {
  position: relative;
  padding: var(--s-3) 0 var(--s-3) var(--s-6);
  font-family: var(--s-mono);
  font-size: var(--s-step--1);
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2) var(--s-4);
  align-items: baseline;
}
.s-timeline li::before {
  content: '';
  position: absolute;
  left: -4px;
  top: 1.35rem;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--s-ink-dim);
  border: 1px solid var(--s-base);
}
.s-timeline li[data-state='blocked']::before { background: var(--s-stop); }
.s-timeline li[data-state='allowed']::before { background: var(--s-ok); }
.s-timeline li[data-state='restricted']::before { background: var(--s-warn); }
.s-timeline time {
  color: var(--s-ink-dim);
  font-variant-numeric: tabular-nums;
}
.s-timeline__what { color: var(--s-ink); }
.s-timeline__why { color: var(--s-ink-mid); font-family: var(--s-display); flex-basis: 100%; }

/* ---------- Exposure readout (§9) ---------- */

.s-readout {
  display: grid;
  gap: var(--s-1);
  padding: var(--s-4);
  background: var(--s-surface);
  border: var(--s-rule);
  border-radius: var(--s-radius-lg);
}
.s-readout__value {
  font-family: var(--s-mono);
  font-size: var(--s-step-2);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  color: var(--s-signal);
  overflow-wrap: anywhere;
}
.s-readout__value[data-empty='true'] { color: var(--s-ink-dim); }
.s-readout__key {
  font-family: var(--s-mono);
  font-size: var(--s-step--1);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--s-ink-dim);
}
.s-readout__note {
  color: var(--s-ink-mid);
  font-size: var(--s-step--1);
  line-height: 1.5;
}

/* ---------- Scanline chassis texture, very restrained ---------- */

.s-chassis {
  position: relative;
  isolation: isolate;
}
.s-chassis::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(60rem 30rem at 78% -10%, color-mix(in srgb, var(--s-signal) 11%, transparent), transparent 70%),
    radial-gradient(44rem 26rem at 8% 4%, color-mix(in srgb, var(--s-warn) 6%, transparent), transparent 72%);
}

/* Hairline grid — reads as an instrument face, not a "cyber" grid. */
.s-ruled {
  background-image:
    linear-gradient(var(--s-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--s-line) 1px, transparent 1px);
  background-size: 100% 4.5rem, 4.5rem 100%;
  -webkit-mask-image: radial-gradient(52rem 30rem at 50% 0%, #000 10%, transparent 76%);
  mask-image: radial-gradient(52rem 30rem at 50% 0%, #000 10%, transparent 76%);
  opacity: 0.5;
}

/* ---------- Tool panels (sessyn.app) ---------- */

.s-tool {
  display: grid;
  gap: var(--s-4);
}
.s-tool label {
  font-family: var(--s-mono);
  font-size: var(--s-step--1);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--s-ink-dim);
}
.s-input {
  width: 100%;
  font-family: var(--s-mono);
  font-size: var(--s-step-0);
  color: var(--s-ink);
  background: var(--s-void);
  border: 1px solid var(--s-line-bright);
  border-radius: var(--s-radius);
  padding: var(--s-3) var(--s-4);
}
.s-input:focus-visible {
  border-color: var(--s-signal);
}
.s-output {
  font-family: var(--s-mono);
  font-size: var(--s-step--1);
  background: var(--s-void);
  border: 1px solid var(--s-line);
  border-radius: var(--s-radius);
  padding: var(--s-4);
  color: var(--s-signal);
  overflow-wrap: anywhere;
  min-height: 3.5rem;
  white-space: pre-wrap;
}
.s-removed {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  padding: 0;
  margin: 0;
  list-style: none;
}
.s-removed li {
  font-family: var(--s-mono);
  font-size: var(--s-step--1);
  color: var(--s-stop);
  border: 1px solid color-mix(in srgb, var(--s-stop) 40%, transparent);
  border-radius: var(--s-radius);
  padding: 0.1rem var(--s-2);
  text-decoration: line-through;
}

/* ---------- Tables ---------- */

.s-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--s-mono);
  font-size: var(--s-step--1);
}
.s-table th {
  text-align: left;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--s-ink-dim);
  padding: var(--s-2) var(--s-3);
  border-bottom: 1px solid var(--s-line-bright);
}
.s-table td {
  padding: var(--s-3);
  border-bottom: 1px solid var(--s-line);
  color: var(--s-ink-mid);
  vertical-align: top;
}
.s-table tr:hover td {
  background: var(--s-surface);
  color: var(--s-ink);
}