/* =====================================================================
   Visibility, consent and audience (SH-J-009) — styles for the page shell
   and for the server-rendered fragment it carries.

   The whole page is an answer to one question: who can see what I have
   shared. So the answer is words first, in a real table, with the tone
   supporting the word and never replacing it. Shared and Not shared are
   readable at any zoom, in any theme, and with colour turned off.

   Tokens only; no colour or font literal lives here.

   LIF-REVIEW-GR001-005 still applies: the page head, the prototype
   marking, the section head and the badge base are repeated here rather
   than promoted into components.css, because those definitions have
   already diverged between the Dashboard, Events and Groups pages and one
   shared definition would silently restyle a signed-off journey.
   Reconciling them is a LiF visual decision, not a refactor.
   ===================================================================== */

.lif-sharing { display: flex; flex-direction: column; gap: var(--lif-space-6); }

/* ---- Page head ---- */
.lif-page-head { display: flex; flex-direction: column; gap: var(--lif-space-3); }
.lif-page-head__title {
  font-size: var(--lif-size-xxl);
  color: var(--lif-accent-deep);
  max-width: var(--lif-measure);
}
.lif-page-head__orientation { font-size: var(--lif-size-lg); }
.lif-page-head__promise {
  font-family: var(--lif-font-ui);
  font-size: var(--lif-size-sm);
  color: var(--lif-ink-soft);
}

/* ---- Prototype marking ---- */
.lif-prototype-banner {
  display: flex;
  flex-wrap: wrap;
  gap: var(--lif-space-2) var(--lif-space-3);
  align-items: baseline;
  padding: var(--lif-space-2) var(--lif-space-4);
  border: 1px dashed var(--lif-status-attention);
  border-radius: var(--lif-radius);
  font-family: var(--lif-font-ui);
  font-size: var(--lif-size-xs);
  color: var(--lif-ink-soft);
}
.lif-prototype-banner__status { font-weight: 700; letter-spacing: 0.04em; color: var(--lif-status-attention); }

/* ---- Sections ---- */
.lif-sharing__preview,
.lif-sharing__attention,
.lif-sharing__narrower,
.lif-sharing__consent,
.lif-sharing__routes {
  display: flex;
  flex-direction: column;
  gap: var(--lif-space-4);
}
.lif-sharing__section-head { display: flex; flex-direction: column; gap: var(--lif-space-2); }
.lif-sharing__section-title { font-family: var(--lif-font-ui); font-size: var(--lif-size-xl); }
.lif-sharing__subtitle { font-family: var(--lif-font-ui); font-size: var(--lif-size-lg); }
.lif-sharing__section-note { color: var(--lif-ink-soft); }
.lif-sharing__counts {
  font-family: var(--lif-font-ui);
  font-size: var(--lif-size-sm);
  display: flex;
  flex-wrap: wrap;
  gap: var(--lif-space-2) var(--lif-space-3);
}
.lif-sharing__awaiting { color: var(--lif-status-attention); font-weight: 600; }

/* ---- The preview table ----------------------------------------------
   Wide content scrolls inside its own container, so the page itself
   never scrolls sideways at any review size. The container is
   focusable, so the scroll is reachable from the keyboard alone.
   -------------------------------------------------------------------- */
.lif-sharing__table-scroll {
  max-width: 100%;
  overflow-x: auto;
  /* Without paint containment Chromium still counts the table's full width
     in the document's own scrollable area, so the whole page gains a
     horizontal scrollbar even though the table is visibly clipped here.
     Containment keeps the sideways movement where it belongs: inside this
     box. Nothing inside the table takes focus, so no focus ring is clipped
     by it. The visual capture run fails the journey if the page itself ever
     scrolls sideways at any review size, so this is held in place by a test. */
  contain: paint;
  border: 1px solid var(--lif-hairline);
  border-radius: var(--lif-radius-lg);
  background: var(--lif-surface-raised);
}
.lif-sharing__table {
  border-collapse: collapse;
  width: 100%;
  min-width: 46rem;
  font-family: var(--lif-font-ui);
  font-size: var(--lif-size-sm);
  text-align: left;
}
.lif-sharing__table th,
.lif-sharing__table td {
  padding: var(--lif-space-3) var(--lif-space-4);
  border-bottom: 1px solid var(--lif-hairline);
  vertical-align: top;
}
.lif-sharing__table thead th {
  background: var(--lif-accent-quiet);
  color: var(--lif-ink);
  font-weight: 600;
  border-bottom: 2px solid var(--lif-accent);
}
.lif-sharing__head-viewer { white-space: nowrap; }
/* The letter is a mnemonic beside the label, never a substitute for it. */
.lif-sharing__letter {
  display: inline-block;
  min-width: 1.6rem;
  margin-right: var(--lif-space-2);
  padding: 0 var(--lif-space-1);
  border: 1px solid var(--lif-accent-deep);
  border-radius: var(--lif-radius-sm);
  text-align: center;
  font-weight: 700;
  color: var(--lif-accent-deep);
}
.lif-sharing__viewer-label { font-weight: 600; }

.lif-sharing__group { background: var(--lif-surface); }
.lif-sharing__group-title { display: block; font-weight: 700; }
.lif-sharing__group-note { display: block; color: var(--lif-ink-soft); font-size: var(--lif-size-xs); max-width: var(--lif-measure); }

.lif-sharing__field { font-weight: 600; }
.lif-sharing__field-name { display: block; }
.lif-sharing__field-note { display: block; font-weight: 400; font-size: var(--lif-size-xs); color: var(--lif-ink-soft); }
.lif-sharing__audience { color: var(--lif-ink-soft); }

/* Shared and Not shared are words. The weight and the tone only support
   them, so meaning survives with colour removed and at high zoom. */
.lif-sharing__word { font-weight: 600; }
.lif-sharing__cell[data-shared="true"] .lif-sharing__word { color: var(--lif-status-restful); }
.lif-sharing__cell[data-shared="false"] .lif-sharing__word { color: var(--lif-ink-soft); font-weight: 400; }

/* A row whose real outcome does not match the audience the member chose is
   marked here and explained in words below the table. The mark is an edge
   and an underline rather than a tinted row: a tint would put text on a
   background it cannot keep 4.5:1 against in every theme. */
.lif-sharing__row[data-mismatch="wider"] .lif-sharing__field {
  border-left: 4px solid var(--lif-status-problem);
}
.lif-sharing__row[data-mismatch="wider"] .lif-sharing__field-name { text-decoration: underline; }
.lif-sharing__row[data-mismatch="narrower"] .lif-sharing__field {
  border-left: 4px solid var(--lif-status-attention);
}
.lif-sharing__row[data-mismatch="narrower"] .lif-sharing__audience { font-style: italic; }

/* ---- The same answer, said per person ---- */
.lif-sharing__seen-by { display: flex; flex-direction: column; gap: var(--lif-space-3); }
.lif-sharing__seen-list { display: flex; flex-direction: column; gap: var(--lif-space-3); margin: 0; }
.lif-sharing__seen {
  display: grid;
  grid-template-columns: minmax(9rem, 14rem) minmax(0, 1fr);
  gap: var(--lif-space-4);
  font-family: var(--lif-font-ui);
  font-size: var(--lif-size-sm);
  padding: var(--lif-space-3) var(--lif-space-4);
  border: 1px solid var(--lif-hairline);
  border-radius: var(--lif-radius);
  background: var(--lif-surface);
}
.lif-sharing__seen-term { font-weight: 700; }
.lif-sharing__seen-value { margin: 0; min-width: 0; display: flex; flex-direction: column; gap: var(--lif-space-1); }
.lif-sharing__seen-meaning { color: var(--lif-ink-soft); font-size: var(--lif-size-xs); }
.lif-sharing__seen-fields { overflow-wrap: break-word; }

/* ---- Where a choice is not being applied ---- */
.lif-sharing__attention-list { list-style: none; display: flex; flex-direction: column; gap: var(--lif-space-3); }
.lif-sharing__reported {
  font-family: var(--lif-font-ui);
  font-size: var(--lif-size-xs);
  color: var(--lif-ink-soft);
  max-width: var(--lif-measure);
}
.lif-sharing__reported-title { font-weight: 700; }

/* ---- Narrower audiences ---- */
.lif-sharing__narrower-list { display: flex; flex-direction: column; gap: var(--lif-space-3); margin: 0; }
.lif-sharing__narrower-item {
  display: grid;
  grid-template-columns: minmax(10rem, 16rem) minmax(0, 1fr);
  gap: var(--lif-space-4);
  font-family: var(--lif-font-ui);
  font-size: var(--lif-size-sm);
  padding: var(--lif-space-3) var(--lif-space-4);
  border: 1px solid var(--lif-hairline);
  border-left: 4px solid var(--lif-status-quiet);
  border-radius: var(--lif-radius);
  background: var(--lif-surface);
}
.lif-sharing__narrower-item[data-applies="true"] { border-left-color: var(--lif-accent); }
.lif-sharing__narrower-term { font-weight: 700; }
.lif-sharing__narrower-value { margin: 0; min-width: 0; display: flex; flex-direction: column; gap: var(--lif-space-1); }
.lif-sharing__narrower-body { color: var(--lif-ink-soft); }
.lif-sharing__narrower-you { font-weight: 600; }

/* ---- The consent summary ---- */
.lif-sharing__consent-list { list-style: none; display: flex; flex-direction: column; gap: var(--lif-space-3); }
.lif-sharing__consent-item {
  padding: var(--lif-space-4) var(--lif-space-5);
  border: 1px solid var(--lif-hairline);
  border-radius: var(--lif-radius-lg);
  background: var(--lif-surface-raised);
  display: flex;
  flex-direction: column;
  gap: var(--lif-space-2);
}
.lif-sharing__consent-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--lif-space-3);
}
.lif-sharing__consent-label { font-family: var(--lif-font-ui); font-size: var(--lif-size-md); font-weight: 700; }
.lif-sharing__consent-body { color: var(--lif-ink); }
.lif-sharing__consent-when,
.lif-sharing__consent-line { font-family: var(--lif-font-ui); font-size: var(--lif-size-sm); color: var(--lif-ink-soft); }
.lif-sharing__consent-when-label { margin-right: var(--lif-space-2); }
.lif-sharing__consent-note {
  font-family: var(--lif-font-ui);
  font-size: var(--lif-size-xs);
  color: var(--lif-status-attention);
}

/* The word carries the meaning; the tone only supports it. */
.lif-badge {
  font-family: var(--lif-font-ui);
  font-size: var(--lif-size-sm);
  font-weight: 600;
  padding: var(--lif-space-1) var(--lif-space-4);
  border-radius: var(--lif-radius-lg);
  border: 1px solid var(--lif-hairline);
  background: var(--lif-surface);
  color: var(--lif-ink);
}
.lif-badge--given { border-color: var(--lif-status-restful); color: var(--lif-status-restful); }
.lif-badge--withdrawn { border-color: var(--lif-status-attention); color: var(--lif-status-attention); }
.lif-badge--not-asked { border-color: var(--lif-status-quiet); color: var(--lif-status-quiet); }

/* ---- Where changing happens ---- */
.lif-sharing__route-links { display: flex; flex-wrap: wrap; gap: var(--lif-space-3); }

/* ---- Responsive ---- */
@media (max-width: 60rem) {
  .lif-sharing__seen,
  .lif-sharing__narrower-item { grid-template-columns: minmax(0, 1fr); gap: var(--lif-space-1); }
  .lif-sharing__consent-item { padding: var(--lif-space-4); }
  .lif-sharing__table { min-width: 40rem; }
}