/* =========================================================================
   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 ---------- */

/* A table wider than the screen scrolls inside its own box. Without this it
   widens the page instead, and every other line of prose starts scrolling
   sideways with it. */
.s-scroll-x {
  overflow-x: auto;
  max-width: 100%;
}

.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);
}

/* ---------- Flow diagram ---------- */

/* Built from real text rather than an image: it stays selectable, honours a
   reader's font size, reflows on a narrow screen, and needs no alt text
   restating what is already written in it. */
.s-flow {
  margin: var(--s-8) auto 0;
  display: grid;
  gap: var(--s-4);
  /* Wider than the reading measure so three steps fit side by side, but not
     the full page: centred on the same axis as the prose it sits among, so it
     reads as a figure belonging to the text rather than a separate band. */
  max-width: 56rem;
}

/* The load-bearing claim of the whole page: everything inside this boundary
   happens on the reader's machine. */
.s-flow-device {
  border: 1px solid var(--s-signal);
  border-radius: var(--s-radius-lg);
  background: color-mix(in srgb, var(--s-signal) 5%, transparent);
  padding: var(--s-6) var(--s-4) var(--s-4);
  position: relative;
}
.s-flow-device > .s-flow-tag {
  position: absolute;
  top: 0;
  left: var(--s-4);
  transform: translateY(-50%);
  background: var(--s-base);
  padding: 0 var(--s-2);
  font-family: var(--s-mono);
  font-size: var(--s-step--1);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--s-signal);
}

.s-flow-steps {
  display: grid;
  gap: var(--s-3);
  grid-auto-flow: row;
}
@media (min-width: 52rem) {
  /* Explicit tracks, not grid-auto-columns: the arrows are children too, and
     an even split gave each one a full column's width while the steps wrapped
     every other word. */
  .s-flow-steps {
    grid-template-columns: 1fr auto 1fr auto 1fr;
    align-items: stretch;
  }
}

.s-flow-step {
  border: 1px solid var(--s-line-bright);
  border-radius: var(--s-radius);
  background: var(--s-surface);
  padding: var(--s-3);
  display: grid;
  gap: var(--s-1);
  align-content: start;
}
.s-flow-step h3 {
  margin: 0;
  font-family: var(--s-mono);
  font-size: var(--s-step--1);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--s-ink);
}
.s-flow-step p {
  margin: 0;
  font-size: var(--s-step--1);
  color: var(--s-ink-mid);
}

/* Arrows are decoration around text that already reads in order, so they are
   hidden from assistive tech rather than announced as punctuation. */
.s-flow-arrow {
  align-self: center;
  justify-self: center;
  color: var(--s-signal);
  font-family: var(--s-mono);
}
@media (max-width: 51.999rem) {
  .s-flow-arrow::before { content: "\2193"; }
}
@media (min-width: 52rem) {
  .s-flow-arrow::before { content: "\2192"; }
}

.s-flow-verdicts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  margin: var(--s-3) 0 0;
  padding: 0;
  list-style: none;
}
.s-flow-verdicts li {
  font-family: var(--s-mono);
  font-size: var(--s-step--1);
  border-radius: var(--s-radius);
  padding: 0.1rem var(--s-2);
  border: 1px solid currentColor;
}
.s-flow-verdicts li:nth-child(1) { color: var(--s-ok); }
.s-flow-verdicts li:nth-child(2) { color: var(--s-signal); }
.s-flow-verdicts li:nth-child(3) { color: var(--s-warn); }
.s-flow-verdicts li:nth-child(4) { color: var(--s-stop); }

/* The two edges of the boundary, stated as their own rows so neither is
   something a reader has to infer from an absence. */
.s-flow-edge {
  display: grid;
  gap: var(--s-1);
  border-left: 2px solid var(--s-line-bright);
  padding: var(--s-2) 0 var(--s-2) var(--s-4);
}
.s-flow-edge--in { border-left-color: var(--s-signal); }
.s-flow-edge--out { border-left-color: var(--s-stop); }
.s-flow-edge h3 {
  margin: 0;
  font-family: var(--s-mono);
  font-size: var(--s-step--1);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--s-ink);
}
.s-flow-edge p {
  margin: 0;
  font-size: var(--s-step--1);
  color: var(--s-ink-mid);
  max-width: var(--s-measure);
}