/* Gemi Leads — Signal Ledger Product UI (Scoped to authenticated layout) */

:root {
  --product-ink: #12201e;
  --product-muted: #66716e;
  --product-line: #cbd0cb;
  --product-paper: #f3f2ec;
  --product-white: #fbfbf7;
  --product-amber: #e6a029;
  --product-amber-soft: #f6e5bd;
  --product-green: #295c4c;
  --product-red: #99443b;
  --product-rail-width: 184px;
  --product-state-rule: #8e9793;

  /* Type scale -- one ladder for every surface (product, public, admin).
     Readable text starts at 12px; only compact uppercase operational labels sit below it,
     and nothing goes under 10px. Change a size here, not in a selector. */
  --type-micro: 10px;        /* tight rail eyebrows, flow markers            (was 7px)       */
  --type-label: 11px;        /* uppercase labels, column heads, state tags   (was 8px)       */
  --type-meta: 12px;         /* GEMI · AFM · KAD · dates, eyebrows, buttons  (was 9–10px)    */
  --type-small: 13px;        /* secondary copy, timestamps, public nav       (was 11px)      */
  --type-secondary: 14px;    /* notes, table cells, notices                  (was 12–12.5px) */
  --type-nav: 14px;          /* rail and brand navigation                                    */
  --type-body: 15px;         /* interface and body text, form controls       (was 13–14px)   */
  --type-name: 16px;         /* company · Radar · Lead names                 (was 13–15px)   */
  --type-control-touch: 16px;/* form controls on phones (below 16px iOS zooms the page)      */
  --type-lead: 17px;         /* emphasised lines                             (was 16px)      */
  --type-title: 19px;        /* row and panel titles                         (was 17px)      */
  --type-h5: 20px;           /* (was 18px)    */
  --type-h4: 22px;           /* (was 20–21px) */
  --type-h3: 24px;           /* (was 22px)    */
  --type-h2: 27px;           /* (was 24–25px) */
  --type-h1: 29px;           /* (was 26–28px) */
  --type-display: 33px;      /* (was 30–32px) */
  --type-hero: 44px;         /* (unchanged)   */
}

body.product-body {
  margin: 0;
  background-color: var(--product-paper) !important;
  color: var(--product-ink) !important;
  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: var(--type-body);
}

/* Monospace utility for metadata */
.product-body .font-mono,
.product-body .mono-text {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !important;
}

/* TOPBAR */
.product-topbar {
  height: 58px;
  position: fixed;
  z-index: 40;
  top: 0;
  left: 0;
  right: 0;
  display: grid;
  grid-template-columns: var(--product-rail-width) 1fr auto;
  align-items: center;
  border-bottom: 1px solid var(--product-ink);
  background: var(--product-white);
}

.product-brand {
  height: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 17px;
  border-right: 1px solid var(--product-ink);
  color: var(--product-ink);
  text-decoration: none;
  font-size: var(--type-nav);
  letter-spacing: .08em;
  font-weight: 600;
}

.product-brand small {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: var(--type-meta);
  font-weight: 700;
  padding: 2px 5px;
  background: var(--product-amber-soft);
  color: #775215;
  border-radius: 2px;
  letter-spacing: 0.05em;
}

/* The brand artwork (icon + GEMI LEADS wordmark) -- one size in every topbar.
   25px keeps logo + BETA inside the 184px rail column, next to its 17px padding. */
.brand-logo {
  display: block;
  height: 25px;
  width: auto;
  flex-shrink: 0;
}

.product-source-meta {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 16px;
  padding-left: 22px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: var(--type-meta);
  font-weight: 500;
  color: var(--product-muted);
}

.product-source-meta b {
  color: var(--product-ink);
  font-weight: 700;
  letter-spacing: .11em;
}

.product-source-meta > span + span {
  border-left: 1px solid var(--product-line);
  padding-left: 16px;
}

.product-account {
  height: 100%;
  display: flex;
  align-items: center;
  gap: 14px;
  border-left: 1px solid var(--product-ink);
  padding: 0 22px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: var(--type-meta);
  font-weight: 600;
}

.product-account a {
  color: #6b21a8; /* purple for superadmin */
  text-decoration: none;
  font-weight: 700;
}

.product-account button {
  background: transparent;
  border: 0;
  color: var(--product-muted);
  cursor: pointer;
  font: inherit;
  padding: 0;
  text-decoration: underline;
}

.product-account button:hover {
  color: var(--product-ink);
}

/* SIDE RAIL NAVIGATION */
.product-rail {
  position: fixed;
  z-index: 30;
  left: 0;
  top: 58px;
  bottom: 0;
  width: var(--product-rail-width);
  border-right: 1px solid var(--product-ink);
  background: var(--product-white);
  display: flex;
  flex-direction: column;
}

.product-rail > a {
  min-height: 64px;
  display: grid;
  /* 56px, not 44px: the stage eyebrows (MARKET / CRITERIA / OUTCOME / SYSTEM) are set at the
     10px label size now, and CRITERIA no longer fit the old column. */
  grid-template-columns: 56px 1fr;
  grid-template-rows: auto auto;
  column-gap: 8px;
  align-content: center;
  padding: 0 15px;
  border-bottom: 1px solid var(--product-line);
  color: var(--product-ink);
  text-decoration: none;
}

.product-rail > a span {
  grid-row: 1 / 3;
  align-self: center;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: var(--type-micro);
  letter-spacing: .05em;
  color: var(--product-muted);
  font-weight: 600;
}

.product-rail > a b {
  font-size: var(--type-nav);
  line-height: 1.1;
  font-weight: 700;
}

.product-rail > a small {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: var(--type-label);
  color: var(--product-muted);
  line-height: 1.2;
}

.product-rail > a[aria-current="page"] {
  background: var(--product-ink);
  color: var(--product-white);
  box-shadow: inset 3px 0 var(--product-amber);
}

.product-rail > a[aria-current="page"] span,
.product-rail > a[aria-current="page"] small {
  color: #bdc5c1;
}

.product-rail > a[aria-current="page"] b {
  color: var(--product-white);
}

/* The organization's primary navigation has seven entries and longer labels (Opportunities, Notifications) than
   the 90px label column of the rail grammar above, so the eyebrow sits above the label: same eyebrow, label,
   descriptor and "selected" signature, stacked. The rail scrolls on short screens instead of clipping. */
.product-rail--workspace {
  overflow-y: auto;
}

.product-rail--workspace > a {
  min-height: 56px;
  grid-template-columns: 1fr;
  grid-template-rows: auto auto auto;
  row-gap: 2px;
  padding-top: 8px;
  padding-bottom: 8px;
}

.product-rail--workspace > a span {
  grid-row: auto;
  align-self: start;
}

/* G4 transition: the "current service" group (Signals, Leads) below the organization navigation. Same grammar as
   the workspace group; temporary, removed with organizations/_transition_nav.html after the LIVE cutover. */
.product-rail-transition p small {
  display: block;
  margin-top: 2px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: var(--type-label);
  color: var(--product-muted);
}

.product-flow {
  margin: 18px 15px 0;
  padding-top: 12px;
  border-top: 1px solid var(--product-line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: var(--type-micro);
  font-weight: 600;
  color: var(--product-muted);
}

.product-flow i {
  width: 13px;
  height: 1px;
  background: var(--product-line);
  position: relative;
}

.product-flow i::after {
  content: '';
  position: absolute;
  right: 0;
  top: -2px;
  width: 4px;
  height: 4px;
  border-top: 1px solid var(--product-line);
  border-right: 1px solid var(--product-line);
  transform: rotate(45deg);
}

.product-source {
  margin-top: auto;
  border-top: 1px solid var(--product-ink);
  padding: 14px 15px;
}

.product-source span {
  display: block;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: var(--type-micro);
  color: var(--product-muted);
  letter-spacing: .1em;
}

.product-source b {
  display: block;
  margin-top: 4px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: var(--type-meta);
  font-weight: 700;
  color: var(--product-ink);
}

/* ORGANIZATION WORKSPACE (Gemi Leads 2.0): rail group, workspace bar and section tabs.
   Same grammar as the rail above: mono eyebrows, ink text, the shared "selected" signature
   (inset 3px amber rule on ink). Only rendered for organization members. */
.product-rail-workspace {
  border-top: 1px solid var(--product-ink);
  padding: 10px 0 4px;
}

.product-rail-workspace p {
  margin: 0;
  padding: 4px 15px 6px;
}

.product-rail-workspace p span,
.product-workspace-context span {
  display: block;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: var(--type-micro);
  letter-spacing: .05em;
  color: var(--product-muted);
  font-weight: 600;
}

.product-rail-workspace p b {
  display: block;
  margin-top: 2px;
  font-size: var(--type-secondary);
  line-height: 1.2;
  overflow-wrap: anywhere;
}

.product-rail-workspace a {
  display: block;
  padding: 6px 15px;
  font-size: var(--type-secondary);
  font-weight: 600;
  color: var(--product-ink);
  text-decoration: none;
}

.product-rail-workspace a[aria-current="page"],
.product-workspace-tabs a[aria-current="page"] {
  background: var(--product-ink);
  color: var(--product-white);
  box-shadow: inset 3px 0 var(--product-amber);
}

.product-workspace-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 24px;
  padding: 10px 28px;
  border-bottom: 1px solid var(--product-ink);
  background: var(--product-white);
}

.product-workspace-context {
  margin: 0;
  display: flex;
  align-items: baseline;
  gap: 8px;
  min-width: 0;
}

.product-workspace-context b {
  font-size: var(--type-body);
  overflow-wrap: anywhere;
}

.product-workspace-context small {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: var(--type-label);
  color: var(--product-muted);
}

.product-workspace-tabs {
  display: flex;
  max-width: 100%;
  overflow-x: auto;
}

.product-workspace-tabs a {
  padding: 7px 12px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: var(--type-meta);
  font-weight: 600;
  color: var(--product-ink);
  text-decoration: none;
  white-space: nowrap;
}

/* Workspace pages: registers in the Leads grammar (white sheet, line-separated rows, mono meta). */
.product-workspace-section {
  background: var(--product-white);
  border-bottom: 1px solid var(--product-ink);
}

.product-workspace-section h2 {
  margin: 0;
  padding: 12px 28px;
  display: flex;
  justify-content: space-between;
  gap: 16px;
  border-bottom: 1px solid var(--product-line);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: var(--type-meta);
  font-weight: 600;
  color: var(--product-muted);
}

.product-workspace-section h2 a {
  color: var(--product-ink);
  white-space: nowrap;
}

.product-workspace-row {
  padding: 14px 28px;
  border-bottom: 1px solid var(--product-line);
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
}

.product-workspace-empty,
.product-workspace-note {
  margin: 0;
  padding: 16px 28px;
  font-size: var(--type-small);
  color: var(--product-muted);
}

.product-workspace-note {
  background: var(--product-white);
  border-bottom: 1px solid var(--product-line);
}

.product-workspace-filters {
  padding: 16px 28px;
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: 12px;
  background: var(--product-paper);
  border-bottom: 1px solid var(--product-ink);
}

.product-workspace-filters label {
  display: grid;
  gap: 4px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: var(--type-label);
  font-weight: 600;
  color: var(--product-muted);
}

.product-workspace-filters select {
  min-width: 180px;
  padding: 9px 12px;
  border: 1px solid var(--product-line);
  background: var(--product-white);
  color: var(--product-ink);
  font-size: var(--type-body);
}

/* Organization Radar form (create / edit): the filter grammar above, stacked. */
.product-workspace-errors {
  margin: 0;
  padding: 14px 28px;
  background: var(--product-white);
  border-bottom: 1px solid var(--product-ink);
  box-shadow: inset 3px 0 var(--product-amber);
  font-size: var(--type-small);
  color: #775215;
}

.product-workspace-errors p,
.product-workspace-errors ul {
  margin: 0;
}

.product-workspace-errors ul {
  padding-left: 18px;
}

.product-radar-fields {
  padding: 16px 28px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
  align-items: start;
}

.product-radar-fields label,
.product-radar-fields legend {
  display: grid;
  gap: 4px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: var(--type-label);
  font-weight: 600;
  color: var(--product-muted);
}

.product-radar-fields fieldset {
  margin: 0;
  padding: 0;
  border: 0;
  display: grid;
  gap: 6px;
}

.product-radar-fields input:not([type="checkbox"]),
.product-radar-fields select,
.product-radar-fields textarea {
  width: 100%;
  box-sizing: border-box;
  padding: 9px 12px;
  border: 1px solid var(--product-line);
  background: var(--product-white);
  color: var(--product-ink);
  font-family: Inter, sans-serif;
  font-size: var(--type-body);
}

.product-radar-fields small {
  font-weight: 400;
}

.product-radar-fields .product-radar-check {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: Inter, sans-serif;
  font-size: var(--type-small);
  font-weight: 500;
  color: var(--product-ink);
}

/* --- Organization Radar criteria pickers ---------------------------------------------------------------
   A searchable multi-select per criterion (templates/includes/reference_picker.html). The panels are wide
   and tall on purpose: the previous controls were narrow boxes that made choosing a KAD out of ~19.000 a
   guessing game. Same primitives as the rest of the product surface -- paper, ink rule, amber selection. */
.product-radar-events {
  margin: 0;
  padding: 16px 28px;
  border: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
}
.product-radar-events legend {
  padding: 0 0 8px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: var(--type-label);
  font-weight: 600;
  color: var(--product-muted);
}
.product-radar-events .product-radar-check {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: Inter, sans-serif;
  font-size: var(--type-small);
  font-weight: 500;
  color: var(--product-ink);
}
.product-picker-grid {
  padding: 16px 28px 24px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(420px, 1fr));
  gap: 24px;
  align-items: start;
}
.product-picker {
  display: grid;
  gap: 10px;
  min-width: 0;
  padding: 16px;
  background: var(--product-white);
  border: 1px solid var(--product-line);
}
.product-picker-head {
  display: grid;
  gap: 4px;
}
.product-picker-head label {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: var(--type-label);
  font-weight: 600;
  color: var(--product-muted);
}
.product-picker-head small {
  font-family: Inter, sans-serif;
  font-size: var(--type-small);
  font-weight: 400;
  color: var(--product-muted);
}
.product-picker-field {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 12px;
  border: 1px solid var(--product-line);
  background: var(--product-paper);
}
.product-picker-field:focus-within,
.product-picker.is-open .product-picker-field {
  border-color: var(--product-green);
  box-shadow: inset 3px 0 var(--product-amber);
}
.product-picker-field svg {
  width: 16px;
  height: 16px;
  flex: none;
  color: var(--product-muted);
}
.product-picker-field input {
  width: 100%;
  border: 0;
  background: transparent;
  padding: 11px 0;
  font-family: Inter, sans-serif;
  font-size: var(--type-body);
  color: var(--product-ink);
  outline: none;
}
/* The chevron: this field is a dropdown, not just a search box. */
.product-picker-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 24px;
  height: 24px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--product-muted);
  cursor: pointer;
}
.product-picker-toggle:hover { color: var(--product-ink); }
.product-picker-toggle svg { transition: transform 0.15s ease; }
.product-picker.is-open .product-picker-toggle svg { transform: rotate(180deg); }
@media (prefers-reduced-motion: reduce) { .product-picker-toggle svg { transition: none; } }
.product-picker-spinner {
  width: 14px;
  height: 14px;
  flex: none;
  border: 2px solid var(--product-amber-soft);
  border-top-color: var(--product-amber);
  border-radius: 50%;
  animation: product-picker-spin 0.7s linear infinite;
}
@keyframes product-picker-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .product-picker-spinner { animation: none; } }
.product-picker-results {
  max-height: 400px;
  overflow-y: auto;
  border: 1px solid var(--product-ink);
  background: var(--product-white);
  box-shadow: 0 6px 18px rgba(17, 17, 17, 0.08);
}
.product-picker-option {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  padding: 10px 12px;
  border: 0;
  border-bottom: 1px solid var(--product-line);
  background: transparent;
  text-align: left;
  cursor: pointer;
  font-family: Inter, sans-serif;
  font-size: var(--type-small);
  color: var(--product-ink);
}
.product-picker-option:last-child { border-bottom: 0; }
.product-picker-option:hover,
.product-picker-option.is-active {
  background: var(--product-amber-soft);
  box-shadow: inset 3px 0 var(--product-amber);
}
.product-picker-option:focus-visible {
  outline: 2px solid var(--product-green);
  outline-offset: -2px;
}
.product-picker-option em,
.product-picker-chip em {
  flex: none;
  font-style: normal;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: var(--type-label);
  color: var(--product-muted);
}
.product-picker-empty {
  margin: 0;
  padding: 16px 12px;
  text-align: center;
  font-family: Inter, sans-serif;
  font-size: var(--type-small);
  color: var(--product-muted);
}
.product-picker-chips {
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  gap: 8px;
  min-height: 44px;
  max-height: 280px;
  overflow-y: auto;
  padding: 8px;
  background: var(--product-paper);
  border: 1px solid var(--product-line);
}
.product-picker-chips:empty { display: none; }
.product-picker-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  max-width: 100%;
  padding: 6px 8px 6px 10px;
  background: var(--product-white);
  border: 1px solid var(--product-line);
  box-shadow: inset 3px 0 var(--product-green);
  font-family: Inter, sans-serif;
  font-size: var(--type-small);
  color: var(--product-ink);
}
.product-picker-chip-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.product-picker-chip button {
  flex: none;
  width: 20px;
  height: 20px;
  border: 0;
  background: var(--product-paper);
  color: var(--product-muted);
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
}
.product-picker-chip button:hover {
  background: var(--product-amber-soft);
  color: var(--product-ink);
}
.product-picker-status {
  margin: 0;
  font-family: Inter, sans-serif;
  font-size: var(--type-label);
  color: var(--product-muted);
}
.product-picker-status:empty { display: none; }
.product-picker-fallback label {
  display: grid;
  gap: 4px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: var(--type-label);
  font-weight: 600;
  color: var(--product-muted);
}
.product-picker-fallback select,
.product-picker-fallback textarea {
  width: 100%;
  box-sizing: border-box;
  padding: 9px 12px;
  border: 1px solid var(--product-line);
  background: var(--product-white);
  color: var(--product-ink);
  font-family: Inter, sans-serif;
  font-size: var(--type-body);
}

/* MAIN CONTENT CONTAINER */
.product-main {
  margin-left: var(--product-rail-width);
  padding-top: 58px;
  min-height: calc(100vh - 58px);
}

/* MOBILE BOTTOM NAV */
.product-mobile-nav {
  display: none;
}

/* SHARED PAGE HEADINGS & STRUCTURE */
.product-workspace {
  min-height: calc(100vh - 58px);
}

.product-pagehead {
  min-height: 100px;
  padding: 20px 28px;
  display: grid;
  grid-template-columns: minmax(270px, 1fr) auto auto;
  align-items: end;
  gap: 28px;
  border-bottom: 1px solid var(--product-ink);
  background: var(--product-paper);
}

.product-eyebrow {
  margin: 0 0 4px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: var(--type-meta);
  font-weight: 600;
  letter-spacing: .15em;
  color: var(--product-green);
}

.product-pagehead h1 {
  font-size: var(--type-h1);
  letter-spacing: -.03em;
  line-height: 1.1;
  margin: 0;
  font-weight: 700;
  color: var(--product-ink);
}

.product-facts {
  display: flex;
  border-left: 1px solid var(--product-line);
}

.product-facts span {
  display: flex;
  flex-direction: column;
  min-width: 96px;
  padding-left: 16px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: var(--type-meta);
  font-weight: 500;
  color: var(--product-muted);
  text-transform: uppercase;
}

.product-facts b {
  font-family: Inter, sans-serif;
  font-size: var(--type-h4);
  font-weight: 700;
  color: var(--product-ink);
}

/* BUTTON PRIMITIVES */
.product-ink-button {
  background: var(--product-ink);
  color: var(--product-white);
  border: 1px solid var(--product-ink);
  padding: 10px 16px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: var(--type-meta);
  font-weight: 600;
  letter-spacing: .06em;
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.product-ink-button:hover {
  background: var(--product-green);
  border-color: var(--product-green);
  color: var(--product-white);
}

.product-amber-button {
  background: var(--product-amber);
  color: var(--product-ink);
  border: 1px solid var(--product-amber);
  padding: 10px 16px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: var(--type-meta);
  font-weight: 700;
  letter-spacing: .06em;
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.product-amber-button:hover {
  background: #d49221;
}

.product-text-button {
  border: 0;
  background: transparent;
  padding: 6px 10px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: var(--type-meta);
  font-weight: 600;
  color: var(--product-muted);
  cursor: pointer;
}

.product-text-button:hover,
.product-text-button.active {
  color: var(--product-ink);
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* SIGNAL REGISTER LAYOUT & STATE GRAMMAR */
.product-workgrid {
  display: grid;
  grid-template-columns: minmax(540px, 1fr) 360px;
  min-height: calc(100vh - 158px);
}

/* Small desktops (rail visible, ≤1180px): 184 rail + 540 register + 360 inspector = 1084px
   overflowed a 1024px viewport. Let the register flex and take 60px off the inspector.
   Above 1180px the rule above is untouched; ≤900px the single-column layout takes over. */
@media (min-width: 901px) and (max-width: 1180px) {
  .product-workgrid {
    grid-template-columns: minmax(0, 1fr) 300px;
  }
}

.product-ledger {
  border-right: 1px solid var(--product-ink);
}

.product-ledger-tools {
  height: 44px;
  padding: 0 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--product-line);
  background: var(--product-paper);
}

.product-ledger-tools p {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: var(--type-meta);
  font-weight: 500;
  letter-spacing: .08em;
  color: var(--product-muted);
  margin: 0;
}

/* Infinite-scroll sentinel at the foot of the Signals register: loading, end and retry states.
   Visible (never display:none) because it is what the IntersectionObserver watches. */
.product-ledger-status {
  min-height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 14px 18px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: var(--type-secondary);
  letter-spacing: .04em;
  color: var(--product-muted);
}

.product-ledger-status.is-loading { color: var(--product-ink); }
.product-ledger-status.is-error { color: var(--product-red); }

.product-signal {
  width: 100%;
  min-height: 80px;
  display: grid;
  grid-template-columns: 58px 4px minmax(220px, 1fr) 90px;
  align-items: center;
  gap: 14px;
  padding: 10px 18px;
  border: 0;
  border-bottom: 1px solid var(--product-line);
  background: transparent;
  text-align: left;
  color: var(--product-ink);
  cursor: pointer;
  text-decoration: none;
  box-sizing: border-box;
}

.product-signal:hover,
.product-signal.selected {
  background: var(--product-white);
}

.product-signal.selected {
  box-shadow: inset 3px 0 var(--product-amber);
}

.product-signal time {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: var(--type-small);
  font-weight: 500;
  color: var(--product-ink);
}

.product-match-stroke {
  height: 48px;
  background: var(--product-amber);
}

.product-match-stroke.empty {
  background: transparent;
}

.product-signal-copy b {
  display: block;
  font-size: var(--type-name);
  font-weight: 700;
  letter-spacing: .01em;
  color: var(--product-ink);
  line-height: 1.3;
}

.product-signal-copy small {
  display: block;
  margin-top: 3px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: var(--type-meta);
  color: var(--product-muted);
}

.product-signal-copy em {
  display: block;
  margin-top: 5px;
  font-style: normal;
  font-size: var(--type-small);
  color: #775215;
}

.product-signal-copy em.quiet {
  color: var(--product-muted);
}

/* State grammar column */
.product-signal .state {
  align-self: stretch;
  min-width: 80px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0;
  border: 0;
  text-align: left;
}

.product-signal .state i {
  display: block;
  width: 100%;
  height: 1px;
  margin-bottom: 6px;
  background: var(--product-state-rule);
}

.product-signal .state b {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: var(--type-label);
  font-weight: 600;
  letter-spacing: .07em;
  text-transform: uppercase;
}

.product-signal .state small {
  display: block;
  margin-top: 2px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: var(--type-micro);
  color: var(--product-muted);
}

.product-signal.is-signal .state i { width: 28px; opacity: .6; }
.product-signal.is-signal .state b { color: var(--product-muted); font-weight: 500; }
.product-signal.is-new .state i { height: 3px; background: var(--product-amber); }
.product-signal.is-new .state b { font-weight: 700; color: var(--product-ink); }
.product-signal.is-viewed .state i { width: 55%; }
.product-signal.is-viewed .state b { color: var(--product-muted); font-weight: 500; }
.product-signal.is-contacted .state i { height: 3px; background: repeating-linear-gradient(to bottom, var(--product-ink) 0 1px, transparent 1px 2px, var(--product-ink) 2px 3px); }
.product-signal.is-contacted .state b { font-weight: 600; color: var(--product-ink); }
.product-signal.is-interested .state i { height: 4px; background: var(--product-ink); position: relative; }
.product-signal.is-interested .state i::after { content: ''; width: 15px; height: 4px; position: absolute; right: 0; top: 0; background: var(--product-amber); }
.product-signal.is-interested .state b { font-weight: 700; color: var(--product-ink); }

.product-day-separator {
  padding: 11px 20px;
  background: var(--product-ink);
  color: var(--product-white);
  display: flex;
  justify-content: space-between;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: var(--type-meta);
  font-weight: 600;
}

.product-day-separator span {
  color: var(--product-amber);
}

/* SELECTED SIGNAL INSPECTOR PANEL */
.product-inspect {
  background: var(--product-white);
  padding: 22px 24px 26px;
  position: sticky;
  top: 58px;
  height: calc(100vh - 58px);
  overflow-y: auto;
  box-sizing: border-box;
}

.product-inspect-kicker {
  display: flex;
  justify-content: space-between;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: var(--type-label);
  font-weight: 600;
  color: var(--product-muted);
  letter-spacing: .08em;
  text-transform: uppercase;
}

.product-inspect h2 {
  margin: 16px 0 6px;
  font-size: var(--type-h3);
  line-height: 1.2;
  font-weight: 700;
  color: var(--product-ink);
}

.product-inspect .identity {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: var(--type-meta);
  color: var(--product-muted);
  margin: 0;
}

.product-inspect-meta {
  margin: 18px 0 0;
  border-top: 1px solid var(--product-line);
  border-bottom: 1px solid var(--product-line);
}

.product-inspect-meta div {
  display: grid;
  grid-template-columns: 96px 1fr;
  padding: 8px 0;
}

.product-inspect-meta div + div {
  border-top: 1px solid var(--product-line);
}

.product-inspect-meta dt {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: var(--type-label);
  font-weight: 500;
  color: var(--product-muted);
  text-transform: uppercase;
}

.product-inspect-meta dd {
  margin: 0;
  font-size: var(--type-small);
  font-weight: 600;
  color: var(--product-ink);
}

.product-chain {
  margin: 18px 0 0;
  padding: 12px 0;
  background: transparent;
  color: var(--product-ink);
  border-bottom: 1px solid var(--product-ink);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.product-chain span b {
  display: block;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: var(--type-label);
  font-weight: 600;
}

.product-chain span small {
  color: var(--product-muted);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: var(--type-micro);
}

.product-chain i {
  color: var(--product-amber);
  font-weight: 700;
  font-style: normal;
}

.product-reason {
  padding: 20px 0;
  border-bottom: 1px solid var(--product-ink);
}

.product-reason > p {
  margin: 0 0 6px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: var(--type-label);
  font-weight: 600;
  color: #775215;
  letter-spacing: .08em;
}

.product-reason h3 {
  margin: 0;
  font-size: var(--type-title);
  font-weight: 700;
  color: var(--product-ink);
}

.product-reason-intro {
  display: block;
  margin-top: 6px;
  color: var(--product-muted);
  line-height: 1.45;
  font-size: var(--type-secondary);
}

.product-reason dl {
  margin: 14px 0 0;
}

.product-reason dl div {
  display: grid;
  grid-template-columns: 88px 1fr;
  padding: 8px 0;
  border-top: 1px solid var(--product-line);
}

.product-reason dt {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: var(--type-label);
  font-weight: 500;
  color: var(--product-muted);
}

.product-reason dd {
  margin: 0;
  font-size: var(--type-small);
  line-height: 1.4;
}

.product-next {
  padding-top: 18px;
}

.product-next > p {
  margin: 0 0 8px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: var(--type-label);
  font-weight: 600;
  color: var(--product-muted);
  letter-spacing: .08em;
}

.product-next button,
.product-next a {
  width: 100%;
}

.product-next .favorite {
  margin-top: 8px;
  background: transparent;
  color: var(--product-ink);
  border: 1px solid var(--product-line);
}

/* RADARS REGISTER */
.product-radar-register {
  padding: 0 28px 50px;
}

.product-radar-register > header,
.product-radar-row {
  display: grid;
  grid-template-columns: 1.1fr 1.5fr .7fr 220px;
  gap: 24px;
}

.product-radar-register > header {
  padding: 14px 13px;
  border-bottom: 1px solid var(--product-ink);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: var(--type-label);
  font-weight: 600;
  color: var(--product-muted);
  text-transform: uppercase;
}

.product-radar-row {
  padding: 20px 13px;
  border-bottom: 1px solid var(--product-ink);
  align-items: start;
}

.product-radar-row.paused {
  opacity: .6;
}

.product-radar-row h2 {
  margin: 8px 0 4px;
  font-size: var(--type-title);
  font-weight: 700;
}

.product-radar-row small {
  color: var(--product-muted);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: var(--type-meta);
}

.product-radar-state {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: var(--type-label);
  font-weight: 700;
  color: var(--product-muted);
  letter-spacing: .08em;
}

.product-radar-state.on {
  color: var(--product-green);
}

.product-criteria p {
  margin: 0 0 6px;
  font-size: var(--type-secondary);
}

.product-criteria b {
  display: inline-block;
  width: 58px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: var(--type-label);
  font-weight: 600;
  color: var(--product-muted);
}

.product-radar-row > div:nth-child(3) strong {
  display: block;
  font-size: var(--type-h1);
  font-weight: 700;
}

.product-radar-row > div:nth-child(3) span {
  font-size: var(--type-meta);
  color: var(--product-muted);
}

.product-radar-row > div:nth-child(3) p {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: var(--type-meta);
  margin: 4px 0 0;
}

.product-radar-row > div:last-child {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.product-radar-row > div:last-child button,
.product-radar-row > div:last-child a {
  padding: 7px 10px;
  border: 1px solid var(--product-ink);
  background: transparent;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: var(--type-label);
  font-weight: 600;
  color: var(--product-ink);
  cursor: pointer;
  text-decoration: none;
}

.product-radar-row > div:last-child button:hover,
.product-radar-row > div:last-child a:hover {
  background: var(--product-ink);
  color: var(--product-white);
}

/* BUSINESS DOSSIER */
.product-dossier-head {
  padding: 20px 28px;
  border-bottom: 1px solid var(--product-ink);
}

.product-back {
  border: 0;
  background: transparent;
  padding: 0;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: var(--type-meta);
  font-weight: 600;
  color: var(--product-ink);
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.product-record-no {
  margin-top: 20px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: var(--type-meta);
  color: var(--product-muted);
}

.product-dossier-title {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-top: 8px;
  gap: 16px;
}

.product-dossier-title h1 {
  max-width: 750px;
  margin: 0;
  font-size: var(--type-h1);
  font-weight: 700;
}

.product-dossier-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 380px;
  min-height: calc(100vh - 240px);
}

.product-public-record {
  padding: 24px 28px;
  border-right: 1px solid var(--product-ink);
}

.product-public-record > h2 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 0 0 20px;
  font-size: var(--type-lead);
  font-weight: 700;
}

.product-public-record > h2 a {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: var(--type-meta);
  font-weight: 600;
  color: var(--product-ink);
}

.product-record-fields {
  margin: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  border-top: 1px solid var(--product-ink);
}

.product-record-fields > div {
  padding: 12px 10px 12px 0;
  border-bottom: 1px solid var(--product-line);
}

.product-record-fields > div:nth-child(odd) {
  border-right: 1px solid var(--product-line);
}

.product-record-fields > div:nth-child(even) {
  padding-left: 18px;
}

.product-record-fields dt,
.product-record-section h3,
.product-lead-control label,
.product-notes label {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: var(--type-label);
  font-weight: 600;
  color: var(--product-muted);
  letter-spacing: .08em;
  text-transform: uppercase;
}

.product-record-fields dd {
  margin: 4px 0 0;
  font-size: var(--type-body);
  font-weight: 600;
}

.product-record-fields a {
  color: var(--product-green);
}

.product-record-section {
  margin-top: 24px;
}

.product-record-section h3 {
  padding-bottom: 8px;
  border-bottom: 1px solid var(--product-ink);
  margin: 0 0 12px;
}

.product-activity {
  display: grid;
  grid-template-columns: 60px 1fr auto;
  gap: 14px;
  padding: 11px 0;
  border-bottom: 1px solid var(--product-line);
}

.product-activity b {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: var(--type-small);
  font-weight: 600;
}

.product-activity p {
  margin: 0;
}

.product-activity span {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: var(--type-label);
  font-weight: 600;
  color: var(--product-muted);
}

.product-person {
  padding: 11px 0;
  border-bottom: 1px solid var(--product-line);
}

.product-person p {
  margin: 2px 0;
  color: var(--product-muted);
}

.product-lead-work {
  background: var(--product-white);
  align-self: stretch;
}

.product-lead-work > section {
  padding: 22px;
  border-bottom: 1px solid var(--product-ink);
}

.product-match-proof > p,
.product-history > p {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: var(--type-label);
  font-weight: 600;
  color: var(--product-muted);
  margin: 0 0 6px;
  text-transform: uppercase;
}

.product-match-proof h2 {
  font-size: var(--type-h5);
  margin: 4px 0 16px;
  font-weight: 700;
}

.product-proof-row {
  display: grid;
  grid-template-columns: 28px 1fr;
  padding: 10px 0;
  border-top: 1px solid var(--product-line);
}

.product-proof-row span {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: var(--type-label);
  font-weight: 700;
  /* The product's amber-as-text tone, not the amber fill. --product-amber (#e6a029) is for
     strokes and rules; as a glyph on white it measured 2.15:1. #775215 is the same amber the
     signal-reason line and BETA chip already use for text, and reads 6.7:1 here (5.6:1 on the
     amber-soft ground of .final). */
  color: #775215;
}

.product-proof-row p {
  margin: 0;
  font-size: var(--type-small);
}

.product-proof-row b {
  display: block;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: var(--type-label);
  font-weight: 600;
  color: var(--product-muted);
  margin-bottom: 2px;
}

.product-proof-row.final {
  background: var(--product-amber-soft);
  margin: 0 -22px;
  padding: 11px 22px;
}

.product-lead-control select,
.product-notes textarea {
  display: block;
  width: 100%;
  margin: 8px 0 10px;
  padding: 10px;
  border: 1px solid var(--product-line);
  background: var(--product-paper);
  color: var(--product-ink);
  font-family: inherit;
  box-sizing: border-box;
}

.product-lead-control .product-ink-button {
  width: 100%;
}

.product-notes button {
  border: 0;
  border-bottom: 1px solid var(--product-ink);
  background: transparent;
  padding: 5px 0;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: var(--type-meta);
  font-weight: 600;
  cursor: pointer;
}

.product-history dl {
  margin: 8px 0 0;
}

.product-history dl div {
  display: flex;
  justify-content: space-between;
  border-top: 1px solid var(--product-line);
  padding: 8px 0;
  font-size: var(--type-meta);
}

.product-history dd {
  margin: 0;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}

/* Opportunity detail workbench: restrained, explicit controls inside the established Dossier grammar. */
.product-contact dd,
.product-contact a {
  overflow-wrap: anywhere;
  word-break: break-word;
}

.product-opportunity-work {
  border-bottom: 1px solid var(--product-ink);
}

.product-opportunity-work {
  padding: 22px;
}

.product-opportunity-work > p {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: var(--type-label);
  font-weight: 600;
  color: var(--product-muted);
  letter-spacing: .08em;
  text-transform: uppercase;
}

.product-opportunity-work > p {
  margin: 0 0 8px;
}

.product-opportunity-launchers {
  border-top: 1px solid var(--product-line);
}

.product-action-launch {
  display: grid;
  width: 100%;
  gap: 3px;
  padding: 12px 0;
  border: 0;
  border-bottom: 1px solid var(--product-line);
  background: transparent;
  color: var(--product-ink);
  text-align: left;
  cursor: pointer;
}

.product-action-launch span {
  overflow-wrap: anywhere;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: var(--type-label);
  color: var(--product-muted);
  text-transform: uppercase;
}

.product-action-launch strong {
  font-size: var(--type-body);
}

.product-action-launch.selected {
  box-shadow: inset 3px 0 var(--product-amber);
  padding-left: 12px;
}

.product-action-launch:focus-visible,
.product-modal-close:focus-visible,
.product-modal-back:focus-visible {
  outline: 2px solid var(--product-amber);
  outline-offset: -2px;
}

.product-action-modal {
  width: min(620px, calc(100vw - 32px));
  max-width: none;
  max-height: min(820px, calc(100vh - 32px));
  padding: 0;
  border: 1px solid var(--product-ink);
  border-radius: 0;
  background: var(--product-white);
  color: var(--product-ink);
  box-shadow: 0 18px 60px rgba(18, 32, 30, .22);
}

.product-action-modal::backdrop {
  background: rgba(18, 32, 30, .56);
}

.product-action-modal-head {
  position: sticky;
  z-index: 1;
  top: 0;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 20px;
  padding: 18px 22px;
  border-bottom: 1px solid var(--product-ink);
  background: var(--product-white);
}

.product-action-modal-head > div {
  flex: 1;
  min-width: 0;
}

.product-action-modal-head span {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: var(--type-label);
  font-weight: 600;
  color: var(--product-muted);
  letter-spacing: .08em;
}

.product-action-modal-head h2 {
  margin: 4px 0 0;
  font-size: var(--type-h5);
}

.product-modal-close,
.product-modal-back {
  width: 34px;
  height: 34px;
  padding: 0;
  border: 1px solid var(--product-ink);
  background: transparent;
  color: var(--product-ink);
  font: 400 22px/1 sans-serif;
  cursor: pointer;
}

.product-modal-back {
  flex: 0 0 auto;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 18px;
}

.product-action-modal-body {
  max-height: calc(100vh - 112px);
  padding: 20px 22px 26px;
  overflow-y: auto;
}

.product-opportunity-panel-body {
  min-width: 0;
}

.product-opportunity-meta {
  margin: 0;
  color: var(--product-muted);
  font-size: var(--type-small);
  line-height: 1.55;
}

.product-company-action-body {
  min-width: 0;
}

.product-action-section {
  margin-top: 18px;
  padding-top: 16px !important;
  border-top: 1px solid var(--product-line) !important;
}

.product-action-section h3,
.product-action-form > label:not(.product-check) {
  margin: 0;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: var(--type-label);
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--product-muted);
}

.product-action-section h3 {
  margin-bottom: 10px;
  color: var(--product-ink);
}

.product-action-form {
  display: grid;
  gap: 7px;
  margin-top: 12px;
  min-width: 0;
}

.product-action-form input:not([type="checkbox"]),
.product-action-form select,
.product-action-form textarea {
  display: block;
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  border: 1px solid #98a19d;
  border-radius: 2px;
  background: var(--product-paper);
  color: var(--product-ink);
  padding: 10px 11px;
  font: inherit;
  line-height: 1.35;
}

.product-action-form select {
  cursor: pointer;
}

.product-action-form textarea {
  min-height: 112px;
  resize: vertical;
}

.product-action-form input::placeholder,
.product-action-form textarea::placeholder {
  color: var(--product-muted);
  opacity: 1;
}

.product-action-form input:focus-visible,
.product-action-form select:focus-visible,
.product-action-form textarea:focus-visible,
.product-action-form button:focus-visible,
.product-inline-action button:focus-visible,
.product-text-button:focus-visible {
  outline: 2px solid var(--product-amber);
  outline-offset: 2px;
}

.product-action-form input:disabled,
.product-action-form select:disabled,
.product-action-form textarea:disabled,
.product-action-form button:disabled {
  cursor: not-allowed;
  opacity: .55;
}

.product-check {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: 8px;
  font-family: inherit;
  font-size: var(--type-small);
  color: var(--product-ink);
  cursor: pointer;
}

.product-check input {
  width: 16px;
  height: 16px;
  margin: 2px 0 0;
  accent-color: var(--product-green);
}

.product-inline-action {
  margin-top: 10px;
}

.product-secondary-button {
  width: fit-content;
  max-width: 100%;
  border: 1px solid var(--product-ink);
  border-radius: 2px;
  background: var(--product-white);
  color: var(--product-ink);
  padding: 9px 12px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: var(--type-meta);
  font-weight: 600;
  cursor: pointer;
}

.product-secondary-button:hover {
  background: var(--product-paper);
}

.product-task-form .product-ink-button {
  width: 100%;
  margin-top: 4px;
}

.product-action-section [data-task] {
  padding: 9px 0 !important;
  border-top: 1px solid var(--product-line) !important;
}

.product-action-section [data-task] > p {
  margin: 0 0 3px;
}

.product-action-section [data-task-state="overdue"] {
  box-shadow: inset 3px 0 var(--product-amber);
  padding-left: 10px !important;
}

.product-action-section [data-task-state="completed"] {
  opacity: .75;
}

@media (min-width: 901px) and (max-width: 1120px) {
  .product-dossier-grid {
    grid-template-columns: minmax(0, 1fr) minmax(320px, 36%);
  }
}

/* RESPONSIVE LAYOUT RULES */
@media (max-width: 900px) {
  :root {
    --product-rail-width: 0px;
  }

  .product-topbar {
    grid-template-columns: 1fr auto;
    height: 52px;
  }

  .product-brand {
    border-right: 0;
  }

  .product-source-meta,
  .product-rail,
  .product-account {
    display: none;
  }

  .product-main {
    margin-left: 0;
    padding-top: 52px;
    padding-bottom: 57px;
  }

  .product-workspace-bar,
  .product-workspace-errors,
  .product-radar-fields,
  .product-radar-events,
  .product-picker-grid,
  .product-workspace-section h2,
  .product-workspace-row,
  .product-workspace-empty,
  .product-workspace-note,
  .product-workspace-filters {
    padding-left: 16px;
    padding-right: 16px;
  }

  /* One picker per row, and shorter panels so the page stays scrollable on a phone. */
  .product-picker-grid { grid-template-columns: 1fr; gap: 16px; }
  .product-picker { padding: 12px; }
  .product-picker-results { max-height: 300px; }
  .product-picker-chips { max-height: 200px; }

  .product-workspace-row {
    flex-direction: column;
  }

  .product-workspace-row > div:last-child {
    text-align: left !important;
  }

  .product-workspace-tabs {
    flex-wrap: wrap;
    overflow: visible;
  }

  .product-pagehead .product-workspace-facts {
    flex-wrap: wrap;
    row-gap: 12px;
  }

  .product-pagehead .product-workspace-facts span {
    flex: 1 1 30%;
  }

  /* five entries (members get «Οργανισμός»): the label size keeps every word on one line */
  .product-mobile-nav:has(> a:nth-child(5)) a {
    font-size: var(--type-label);
  }

  .product-pagehead {
    min-height: auto;
    padding: 16px;
    grid-template-columns: 1fr auto;
    align-items: start;
    gap: 14px;
  }

  .product-pagehead .product-facts {
    grid-column: 1 / -1;
    order: 3;
    border: 0;
    border-top: 1px solid var(--product-line);
    padding-top: 12px;
  }

  .product-facts span {
    min-width: 0;
    flex: 1;
    padding: 0 12px 0 0;
  }

  .product-facts b {
    font-size: var(--type-h5);
  }

  .product-workgrid {
    display: block;
    min-height: 0;
  }

  .product-ledger {
    border-right: 0;
  }

  .product-ledger-tools {
    padding: 0 14px;
  }

  .product-signal {
    grid-template-columns: 42px 3px 1fr 78px;
    padding: 10px 12px;
    gap: 9px;
    min-height: 84px;
  }

  .product-signal .state {
    grid-column: 4;
    grid-row: 1;
    margin: 0;
    align-self: center;
    min-width: 68px;
  }

  .product-signal .state small {
    display: none;
  }

  .product-inspect {
    display: none;
  }

  .product-mobile-selection {
    display: block;
    padding: 15px 14px 16px 58px;
    border-bottom: 1px solid var(--product-ink);
    background: var(--product-white);
    box-shadow: inset 3px 0 var(--product-amber);
  }

  .product-mobile-selection > p {
    margin: 0 0 8px;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-size: var(--type-label);
    font-weight: 600;
    color: #775215;
  }

  .product-mobile-selection h3 {
    margin: 0 0 10px;
    font-size: var(--type-name);
    line-height: 1.3;
  }

  .product-mobile-selection dl {
    margin: 0 0 12px;
  }

  .product-mobile-selection dl div {
    display: grid;
    grid-template-columns: 48px 1fr;
    padding: 5px 0;
    border-top: 1px solid var(--product-line);
  }

  .product-mobile-selection dt {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-size: var(--type-micro);
    color: var(--product-muted);
  }

  .product-mobile-selection dd {
    margin: 0;
    font-size: var(--type-meta);
  }

  .product-mobile-selection button,
  .product-mobile-selection a {
    width: 100%;
    border: 0;
    background: var(--product-ink);
    color: var(--product-white);
    padding: 11px;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-size: var(--type-label);
    font-weight: 600;
    text-align: center;
    box-sizing: border-box;
  }

  .product-radar-register {
    padding: 0 14px 30px;
  }

  .product-radar-register > header {
    display: none;
  }

  .product-radar-row {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 14px;
    padding: 16px 6px;
  }

  .product-radar-row > div:nth-child(2) {
    grid-column: 1 / -1;
    order: 3;
    border-top: 1px solid var(--product-line);
    padding-top: 10px;
  }

  .product-radar-row > div:nth-child(3) {
    text-align: right;
  }

  .product-radar-row > div:last-child {
    grid-column: 1 / -1;
    order: 4;
  }

  .product-dossier-grid {
    display: flex;
    flex-direction: column;
    min-height: 0;
  }

  .product-lead-work {
    order: 1;
    border-top: 0;
    display: flex;
    flex-direction: column;
  }

  .product-public-record {
    order: 2;
    padding: 20px 16px;
    border: 0;
  }

  .product-lead-work .product-match-proof { order: 1; }
  .product-lead-work .product-lead-control { order: 2; }
  .product-lead-work .product-notes { order: 3; }
  .product-lead-work .product-history { order: 4; }

  .product-record-fields {
    display: block;
  }

  .product-record-fields > div,
  .product-record-fields > div:nth-child(odd),
  .product-record-fields > div:nth-child(even) {
    border-right: 0;
    padding: 10px 0;
  }

  .product-mobile-nav {
    position: fixed;
    z-index: 50;
    display: grid;
    /* four legacy entries, plus «Οργανισμός» for organization members */
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    inset: auto 0 0;
    background: var(--product-ink);
    height: 57px;
  }

  .product-mobile-nav a {
    display: grid;
    place-items: center;
    color: #bbc2bf;
    text-decoration: none;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-size: var(--type-meta);
    font-weight: 600;
  }

  .product-mobile-nav a[aria-current="page"] {
    color: var(--product-amber);
    border-top: 2px solid var(--product-amber);
  }

  /* The organization's seven entries do not fit a phone's width at a readable size, so the bar scrolls
     sideways (app.js brings the current entry into view) rather than shrinking the labels. */
  .product-mobile-nav--workspace {
    grid-auto-columns: max-content;
    column-gap: 4px;
    padding: 0 8px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
  }

  .product-mobile-nav--workspace::-webkit-scrollbar {
    display: none;
  }

  .product-mobile-nav--workspace a {
    padding: 0 10px;
    font-size: var(--type-label);
  }

  /* G4 transition: separates the current service (Signals, Leads) from the organization's sections. */
  .product-mobile-nav-divider {
    align-self: center;
    width: 1px;
    height: 24px;
    background: #4a5754;
  }
}

@media (max-width: 460px) {
  .product-pagehead {
    grid-template-columns: 1fr;
  }

  .product-signal {
    grid-template-columns: 38px 3px minmax(0, 1fr) 70px;
  }

  .product-signal-copy b {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

/* ============================================================================
   PUBLIC & ADMIN SURFACES — Signal Ledger extended outward
   ----------------------------------------------------------------------------
   Everything below reuses the SAME tokens and the SAME primitives as the
   authenticated product (--product-ink / --product-paper / --product-amber,
   .product-signal, .product-radar-row, .product-ink-button, .product-eyebrow).
   It is scoped to body.public-body / body.admin-body so nothing here can reach
   the approved authenticated screens, which stay visually identical.
   ========================================================================== */

body.public-body,
body.admin-body {
  margin: 0;
  background-color: var(--product-paper) !important;
  color: var(--product-ink) !important;
  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: var(--type-body);
}

body.public-body .font-mono,
body.admin-body .font-mono,
body.public-body .mono-text {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !important;
}

/* ---------- PUBLIC HEADER: same brand family as .product-topbar ---------- */
.public-topbar {
  position: fixed;
  z-index: 40;
  top: 0; left: 0; right: 0;
  height: 58px;
  display: flex;
  align-items: center;
  gap: 22px;
  padding: 0 22px;
  border-bottom: 1px solid var(--product-ink);
  background: var(--product-white);
}

.public-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--product-ink);
  text-decoration: none;
  font-size: var(--type-nav);
  letter-spacing: .08em;
  font-weight: 600;
  flex-shrink: 0;
}

.public-brand small {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: var(--type-meta);
  font-weight: 700;
  padding: 2px 5px;
  background: var(--product-amber-soft);
  color: #775215;
  border-radius: 2px;
  letter-spacing: .05em;
  text-transform: uppercase;
}

.public-nav {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-left: auto;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: var(--type-small);
  font-weight: 600;
  letter-spacing: .07em;
}

.public-nav a {
  color: var(--product-muted);
  text-decoration: none;
  padding: 4px 0;
  border-bottom: 1px solid transparent;
}

.public-nav a:hover,
.public-nav a:focus-visible {
  color: var(--product-ink);
  border-bottom-color: var(--product-amber);
}

.public-nav a.is-current {
  color: var(--product-ink);
  border-bottom-color: var(--product-amber);
}

.public-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-left: 20px;
  border-left: 1px solid var(--product-line);
}

.public-menu-toggle {
  display: none;
  margin-left: auto;
  padding: 7px 9px;
  border: 1px solid var(--product-ink);
  background: transparent;
  color: var(--product-ink);
  cursor: pointer;
}

.public-menu {
  position: fixed;
  z-index: 39;
  top: 58px; left: 0; right: 0;
  border-bottom: 1px solid var(--product-ink);
  background: var(--product-white);
  padding: 6px 0 14px;
}

.public-menu a {
  display: block;
  min-height: 44px;
  line-height: 44px;
  padding: 0 22px;
  border-bottom: 1px solid var(--product-line);
  color: var(--product-ink);
  text-decoration: none;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: var(--type-small);
  font-weight: 600;
  letter-spacing: .06em;
}

.public-menu a:last-child { border-bottom: 0; }

.public-menu .public-menu-cta {
  margin: 12px 22px 0;
  padding: 0;
  text-align: center;
  background: var(--product-ink);
  color: var(--product-white);
  border-bottom: 0;
}

/* ---------- PUBLIC PAGE SHELL ---------- */
.public-main { padding-top: 58px; }

.public-section { border-bottom: 1px solid var(--product-ink); }

.public-inner {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 28px;
}

.public-section-head { padding: 34px 0 18px; }

.public-section-head h2 {
  margin: 0;
  font-size: var(--type-h3);
  font-weight: 700;
  letter-spacing: -.02em;
  color: var(--product-ink);
}

.public-section-head p {
  margin: 8px 0 0;
  max-width: 62ch;
  font-size: var(--type-body);
  color: var(--product-muted);
  line-height: 1.6;
}

/* ---------- HERO ---------- */
.public-hero { padding: 46px 0 0; }

.public-hero h1 {
  margin: 0;
  max-width: 20ch;
  font-size: var(--type-hero);
  line-height: 1.06;
  letter-spacing: -.035em;
  font-weight: 700;
  color: var(--product-ink);
}

.public-hero-copy {
  margin: 16px 0 0;
  max-width: 58ch;
  font-size: var(--type-name);
  line-height: 1.6;
  color: var(--product-muted);
}

.public-hero-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  margin: 26px 0 0;
}

/* Structural metadata — factual labels only, never invented metrics */
.public-meta {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 34px 0 0;
  border-top: 1px solid var(--product-ink);
  border-bottom: 1px solid var(--product-ink);
}

.public-meta > div {
  padding: 14px 20px 16px;
  border-right: 1px solid var(--product-line);
}

.public-meta > div:last-child { border-right: 0; }

.public-meta span {
  display: block;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: var(--type-label);
  font-weight: 600;
  letter-spacing: .12em;
  color: var(--product-muted);
  text-transform: uppercase;
}

.public-meta b {
  display: block;
  margin-top: 5px;
  font-size: var(--type-body);
  font-weight: 700;
  color: var(--product-ink);
}

/* ---------- PUBLIC INTAKE REGISTER (reuses .product-signal) ---------- */
.public-intake {
  border: 1px solid var(--product-ink);
  background: var(--product-paper);
  margin: 30px 0 40px;
}

.public-intake > header {
  height: 44px;
  padding: 0 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--product-ink);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: var(--type-meta);
  font-weight: 600;
  letter-spacing: .1em;
  color: var(--product-muted);
  text-transform: uppercase;
}

.public-intake > header b { color: var(--product-ink); }

.public-intake .product-signal:last-child { border-bottom: 0; }

/* ---------- PRODUCT MODEL CHAIN (scaled .product-flow grammar) ---------- */
.public-chain {
  display: flex;
  align-items: stretch;
  border-top: 1px solid var(--product-ink);
}

.public-chain > div {
  flex: 1;
  min-width: 0;
  padding: 18px 20px 22px;
  border-right: 1px solid var(--product-line);
}

.public-chain > div:last-child { border-right: 0; }

.public-chain i {
  display: block;
  width: 26px;
  height: 3px;
  margin-bottom: 10px;
  background: var(--product-amber);
}

.public-chain span {
  display: block;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: var(--type-label);
  font-weight: 600;
  letter-spacing: .12em;
  color: var(--product-muted);
}

.public-chain b {
  display: block;
  margin: 6px 0 5px;
  font-size: var(--type-name);
  font-weight: 700;
  color: var(--product-ink);
}

.public-chain p {
  margin: 0;
  font-size: var(--type-secondary);
  line-height: 1.55;
  color: var(--product-muted);
}

/* ---------- FACT LIST (audience, faq, dossier preview) ---------- */
.public-list { border-top: 1px solid var(--product-ink); }

.public-list > div {
  padding: 16px 0;
  border-bottom: 1px solid var(--product-line);
  display: grid;
  grid-template-columns: 190px 1fr;
  gap: 24px;
  align-items: start;
}

.public-list > div > b {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: var(--type-meta);
  font-weight: 600;
  letter-spacing: .09em;
  color: var(--product-muted);
  text-transform: uppercase;
  line-height: 1.6;
}

.public-list > div > p {
  margin: 0;
  font-size: var(--type-body);
  line-height: 1.6;
  color: var(--product-ink);
}

/* ---------- NOTICE (beta / billing truth) ---------- */
.public-notice {
  padding: 14px 18px;
  border: 1px solid var(--product-ink);
  border-left: 3px solid var(--product-amber);
  background: var(--product-white);
}

.public-notice b {
  display: block;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: var(--type-meta);
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--product-ink);
}

.public-notice p {
  margin: 5px 0 0;
  max-width: 88ch;
  font-size: var(--type-secondary);
  line-height: 1.6;
  color: var(--product-muted);
}

/* ---------- PRICING REGISTER (derived from .product-radar-register) ---------- */
.public-plan-register { padding: 0 0 46px; }

/* Six columns -- PLAN / TARGET / RADARS / FREQUENCY / PRICE / ACTION -- against the Radars
   register's four. Targeting and frequency are separate facts about a plan, so they get
   separate aligned columns rather than being buried in a feature list. */
.public-plan-register > header,
.public-plan-row {
  display: grid;
  grid-template-columns: .95fr 1.15fr .5fr .72fr .5fr 180px;
  gap: 18px;
}

.public-plan-register > header {
  padding: 14px 13px;
  border-bottom: 1px solid var(--product-ink);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: var(--type-label);
  font-weight: 600;
  color: var(--product-muted);
  text-transform: uppercase;
  letter-spacing: .09em;
}

.public-plan-row {
  padding: 22px 13px;
  border-bottom: 1px solid var(--product-ink);
  align-items: start;
}

.public-plan-row.featured {
  background: var(--product-white);
  box-shadow: inset 3px 0 var(--product-amber);
}

.public-plan-row h2 {
  margin: 7px 0 4px;
  font-size: var(--type-title);
  font-weight: 700;
  color: var(--product-ink);
}

.public-plan-row .plan-state {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: var(--type-label);
  font-weight: 700;
  letter-spacing: .08em;
  color: var(--product-muted);
  text-transform: uppercase;
}

.public-plan-row .plan-state.on { color: var(--product-green); }

.public-plan-row ul { margin: 0; padding: 0; list-style: none; }

.public-plan-row ul li {
  position: relative;
  margin: 0 0 5px;
  padding-left: 14px;
  font-size: var(--type-secondary);
  line-height: 1.55;
  color: var(--product-ink);
}

.public-plan-row ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  width: 6px;
  height: 1px;
  background: var(--product-state-rule);
}

/* Free row: what the plan includes and what it leaves to a subscription, in the same
   register. Included items read at full ink with a green check; the rest are muted with a
   dash and name where they start ("από Pro"), so the row reads as a starting point rather
   than a crossed-out card. The group labels carry the meaning, not colour alone. */
.public-plan-row .plan-scope-label {
  margin: 0 0 6px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: var(--type-label);
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--product-muted);
}

.public-plan-row ul + .plan-scope-label { margin-top: 12px; }

.public-plan-row ul.plan-included li { padding-left: 18px; }

.public-plan-row ul.plan-included li::before {
  content: "✓";
  content: "✓" / "";
  top: 0;
  width: auto;
  height: auto;
  background: none;
  color: var(--product-green);
  font-weight: 700;
}

.public-plan-row ul.plan-excluded li {
  padding-left: 18px;
  color: var(--product-muted);
}

.public-plan-row ul.plan-excluded li::before {
  width: 8px;
  left: 1px;
  top: 11px;
  background: var(--product-line);
}

.public-plan-row ul.plan-excluded li span {
  margin-left: 4px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: var(--type-label);
  letter-spacing: .04em;
  white-space: nowrap;
}

/* Frequency is a phrase, not a numeral, so it takes the same slot at a smaller size --
   the figure grammar stays for the two columns that really are figures. */
.public-plan-row .plan-frequency strong {
  display: block;
  font-size: var(--type-name);
  font-weight: 700;
  color: var(--product-ink);
  line-height: 1.2;
}

.public-plan-row .plan-frequency span {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: var(--type-meta);
  color: var(--product-muted);
}

.public-plan-row .plan-price strong,
.public-plan-row .plan-radars strong {
  display: block;
  font-size: var(--type-h1);
  font-weight: 700;
  color: var(--product-ink);
  line-height: 1.1;
}

.public-plan-row .plan-price span,
.public-plan-row .plan-radars span {
  font-size: var(--type-meta);
  color: var(--product-muted);
}

.public-plan-row .plan-action {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.public-plan-row .plan-action .plan-note {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: var(--type-label);
  line-height: 1.5;
  color: var(--product-muted);
}

.public-plan-row .plan-action a.outline {
  padding: 9px 12px;
  border: 1px solid var(--product-ink);
  background: transparent;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: var(--type-meta);
  font-weight: 600;
  letter-spacing: .06em;
  color: var(--product-ink);
  text-decoration: none;
  text-align: center;
}

.public-plan-row .plan-action a.outline:hover {
  background: var(--product-ink);
  color: var(--product-white);
}

/* ---------- PUBLIC FOOTER ---------- */
.public-footer {
  padding: 26px 0 34px;
  background: var(--product-white);
}

.public-footer .public-inner {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 30px;
  justify-content: space-between;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: var(--type-meta);
  color: var(--product-muted);
  line-height: 1.7;
}

.public-footer a {
  color: var(--product-muted);
  text-decoration: none;
  border-bottom: 1px solid var(--product-line);
}

.public-footer a:hover { color: var(--product-ink); }

/* ---------- FOCUS VISIBILITY (shared, all surfaces) ---------- */
body.public-body a:focus-visible,
body.public-body button:focus-visible,
body.admin-body a:focus-visible,
body.admin-body button:focus-visible,
body.admin-body select:focus-visible,
body.admin-body input:focus-visible {
  outline: 2px solid var(--product-amber);
  outline-offset: 2px;
}

/* ============================================================================
   PUBLIC RESPONSIVE
   ========================================================================== */
@media (max-width: 900px) {
  .public-nav,
  .public-actions { display: none; }

  .public-menu-toggle { display: block; }

  .public-hero { padding: 30px 0 0; }
  .public-hero h1 { font-size: var(--type-display); max-width: none; }
  .public-hero-copy { font-size: var(--type-body); }

  .public-meta { grid-template-columns: 1fr; }

  .public-meta > div {
    border-right: 0;
    border-bottom: 1px solid var(--product-line);
  }

  .public-meta > div:last-child { border-bottom: 0; }

  .public-chain { display: block; }

  .public-chain > div {
    border-right: 0;
    border-bottom: 1px solid var(--product-line);
  }

  .public-chain > div:last-child { border-bottom: 0; }

  .public-list > div { grid-template-columns: 1fr; gap: 6px; }

  /* Pricing becomes a structured vertical record, not a SaaS card */
  .public-plan-register > header { display: none; }

  .public-plan-row {
    display: block;
    padding: 20px 0;
  }

  .public-plan-row > div { margin-bottom: 14px; }
  .public-plan-row > div:last-child { margin-bottom: 0; }

  .public-plan-row .plan-price,
  .public-plan-row .plan-radars,
  .public-plan-row .plan-frequency {
    display: flex;
    align-items: baseline;
    gap: 10px;
    padding-top: 12px;
    border-top: 1px solid var(--product-line);
  }

  .public-plan-row .plan-frequency strong { font-size: var(--type-name); }

  .public-plan-row .plan-price strong,
  .public-plan-row .plan-radars strong { font-size: var(--type-h4); }

  .public-plan-row .plan-action { padding-top: 4px; }
}

@media (max-width: 460px) {
  .public-inner { padding: 0 18px; }
  .public-hero h1 { font-size: var(--type-h1); }
  .public-topbar { padding: 0 18px; }
}

/* ============================================================================
   SUPERADMIN — the same product, at higher operational density
   ----------------------------------------------------------------------------
   The admin rail is the .product-rail component with one extra level of
   grouping and a slightly wider measure. Same canvas, same ink rule, same mono
   eyebrows, same inset-amber active state. "Operations Ledger" describes the
   information architecture here, not a second visual identity.
   ========================================================================== */

:root { --admin-rail-width: 218px; }

/* Admin topbar reuses .product-topbar's proportions, with a rail-width column */
.admin-topbar {
  height: 58px;
  position: fixed;
  z-index: 40;
  top: 0; left: 0; right: 0;
  display: grid;
  grid-template-columns: var(--admin-rail-width) 1fr auto;
  align-items: center;
  border-bottom: 1px solid var(--product-ink);
  background: var(--product-white);
}

.admin-brand {
  height: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 17px;
  border-right: 1px solid var(--product-ink);
  color: var(--product-ink);
  text-decoration: none;
  font-size: var(--type-nav);
  letter-spacing: .08em;
  font-weight: 600;
}

.admin-brand small {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: var(--type-meta);
  font-weight: 700;
  padding: 2px 5px;
  background: var(--product-ink);
  color: var(--product-white);
  border-radius: 2px;
  letter-spacing: .05em;
}

.admin-topbar-meta {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 16px;
  padding-left: 22px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: var(--type-meta);
  font-weight: 500;
  color: var(--product-muted);
}

.admin-topbar-meta b {
  color: var(--product-ink);
  font-weight: 700;
  letter-spacing: .11em;
}

.admin-topbar-meta > span + span {
  border-left: 1px solid var(--product-line);
  padding-left: 16px;
}

.admin-account {
  height: 100%;
  display: flex;
  align-items: center;
  gap: 14px;
  border-left: 1px solid var(--product-ink);
  padding: 0 22px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: var(--type-meta);
  font-weight: 600;
  color: var(--product-ink);
}

.admin-account a { color: var(--product-muted); text-decoration: none; }
.admin-account a:hover { color: var(--product-ink); }

/* ---------- ADMIN RAIL ---------- */
.admin-rail {
  position: fixed;
  z-index: 30;
  left: 0;
  top: 58px;
  bottom: 0;
  width: var(--admin-rail-width);
  border-right: 1px solid var(--product-ink);
  background: var(--product-white);
  overflow-y: auto;
}

.admin-rail-group { border-bottom: 1px solid var(--product-line); }

.admin-rail-group > p {
  margin: 0;
  padding: 11px 15px 5px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: var(--type-micro);
  font-weight: 600;
  letter-spacing: .13em;
  color: var(--product-muted);
  text-transform: uppercase;
}

.admin-rail a,
.admin-rail button {
  width: 100%;
  min-height: 34px;
  display: block;
  padding: 8px 15px;
  border: 0;
  background: transparent;
  color: var(--product-ink);
  text-decoration: none;
  text-align: left;
  font-size: var(--type-nav);
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
}

.admin-rail a:hover,
.admin-rail button:hover { background: var(--product-paper); }

.admin-rail a[aria-current="page"] {
  background: var(--product-ink);
  color: var(--product-white);
  box-shadow: inset 3px 0 var(--product-amber);
}

/* Disabled compliance entries stay readable — they are audit surfaces, not dead links */
.admin-rail a .admin-off {
  display: block;
  margin-top: 2px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: var(--type-label);
  font-weight: 700;
  letter-spacing: .1em;
  color: var(--product-red);
}

/* On the active rail item the ground is ink, and --product-red on ink measures 2.59:1.
   A lightened tint of the same red keeps "red means disabled" while reading at ~7:1.
   These labels are compliance state, so they have to stay legible in every state. */
.admin-rail a[aria-current="page"] .admin-off {
  color: #e9a79f;
}

.admin-rail-foot {
  border-top: 1px solid var(--product-ink);
  padding: 12px 15px;
}

.admin-rail-foot a {
  padding: 6px 0;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: var(--type-meta);
  font-weight: 600;
  letter-spacing: .07em;
  color: var(--product-muted);
}

.admin-rail-foot a:hover { background: transparent; color: var(--product-ink); }

/* ---------- ADMIN MAIN ---------- */
.admin-main {
  margin-left: var(--admin-rail-width);
  padding-top: 58px;
  min-height: calc(100vh - 58px);
}

.admin-pagehead {
  min-height: 84px;
  padding: 18px 26px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 26px;
  flex-wrap: wrap;
  border-bottom: 1px solid var(--product-ink);
  background: var(--product-paper);
}

.admin-pagehead h1 {
  margin: 0;
  font-size: var(--type-h2);
  font-weight: 700;
  letter-spacing: -.03em;
  line-height: 1.1;
  color: var(--product-ink);
}

.admin-body-inner { padding: 0 26px 46px; }

/* ---------- ADMIN FACT STRIP (open facts, not KPI cards) ---------- */
.admin-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  border-bottom: 1px solid var(--product-ink);
  background: var(--product-white);
}

.admin-facts > div {
  padding: 14px 20px 16px;
  border-right: 1px solid var(--product-line);
}

.admin-facts > div:last-child { border-right: 0; }

.admin-facts span {
  display: block;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: var(--type-label);
  font-weight: 600;
  letter-spacing: .11em;
  color: var(--product-muted);
  text-transform: uppercase;
}

.admin-facts b {
  display: block;
  margin-top: 5px;
  font-size: var(--type-h3);
  font-weight: 700;
  color: var(--product-ink);
  line-height: 1.1;
}

.admin-facts small {
  display: block;
  margin-top: 3px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: var(--type-label);
  color: var(--product-muted);
}

/* ---------- ADMIN SECTION ---------- */
.admin-section { padding: 26px 0 0; }

.admin-section > h2 {
  margin: 0 0 4px;
  font-size: var(--type-meta);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-weight: 600;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--product-green);
}

.admin-section > p {
  margin: 0 0 14px;
  font-size: var(--type-secondary);
  color: var(--product-muted);
}

/* ---------- ADMIN REGISTER (Leads register grammar) ---------- */
.admin-register {
  width: 100%;
  border-collapse: collapse;
  border-top: 1px solid var(--product-ink);
}

.admin-register thead th {
  padding: 10px 12px;
  border-bottom: 1px solid var(--product-ink);
  text-align: left;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: var(--type-label);
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--product-muted);
  white-space: nowrap;
}

.admin-register tbody td {
  padding: 12px;
  border-bottom: 1px solid var(--product-line);
  font-size: var(--type-secondary);
  color: var(--product-ink);
  vertical-align: top;
}

.admin-register tbody tr:hover { background: var(--product-white); }

.admin-register .mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: var(--type-meta);
  color: var(--product-muted);
}

.admin-register b { font-weight: 700; }

.admin-register .empty {
  padding: 26px 12px;
  text-align: center;
  font-size: var(--type-secondary);
  color: var(--product-muted);
}

/* ---------- STATE TAGS (same restraint as the product state column) ---------- */
.admin-tag {
  display: inline-block;
  padding: 2px 6px;
  border: 1px solid var(--product-line);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: var(--type-label);
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--product-muted);
  white-space: nowrap;
}

/* .admin-tag doubles as a status chip and as a row action link. As a link it needs a
   usable target, so anchors get extra padding without changing the chip's look. */
a.admin-tag {
  padding: 6px 9px;
  text-decoration: none;
}

a.admin-tag:hover {
  background: var(--product-ink);
  color: var(--product-white);
  border-color: var(--product-ink);
}

.admin-tag.on { color: var(--product-green); border-color: var(--product-green); }
.admin-tag.warn { color: #775215; border-color: var(--product-amber); }
.admin-tag.off { color: #99443b; border-color: #99443b; }

/* ---------- FILTERS (Leads filter grammar) ---------- */
.admin-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 10px;
  padding: 14px 0;
  border-bottom: 1px solid var(--product-line);
}

.admin-filters label {
  display: block;
  margin-bottom: 4px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: var(--type-label);
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--product-muted);
}

.admin-filters input[type="text"],
.admin-filters input[type="search"],
.admin-filters select {
  min-height: 32px;
  padding: 6px 9px;
  border: 1px solid var(--product-ink);
  border-radius: 0;
  background: var(--product-white);
  color: var(--product-ink);
  font-family: inherit;
  font-size: var(--type-body);
}

/* ---------- COMPLIANCE BANNER ---------- */
.admin-compliance {
  margin: 22px 0 0;
  border: 1px solid var(--product-ink);
  border-left: 3px solid #99443b;
  background: var(--product-white);
  padding: 15px 18px;
}

.admin-compliance p:first-child {
  margin: 0 0 8px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: var(--type-meta);
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--product-ink);
}

.admin-compliance dl {
  margin: 0 0 8px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: var(--type-meta);
}

.admin-compliance dt { color: var(--product-muted); letter-spacing: .08em; }
.admin-compliance dd { margin: 0 0 0 6px; font-weight: 700; color: #99443b; }
.admin-compliance dl > div { display: flex; }

.admin-compliance > p:last-child {
  margin: 0;
  font-size: var(--type-secondary);
  line-height: 1.6;
  color: var(--product-muted);
  max-width: 92ch;
}

/* ---------- MESSAGES ---------- */
.admin-message {
  margin: 14px 0 0;
  padding: 11px 15px;
  border: 1px solid var(--product-ink);
  border-left: 3px solid var(--product-amber);
  background: var(--product-white);
  font-size: var(--type-secondary);
  font-weight: 600;
}

.admin-message.error { border-left-color: #99443b; }
.admin-message.success { border-left-color: var(--product-green); }

/* ---------- IMPERSONATION BAR ---------- */
.admin-impersonation {
  position: relative;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 8px 16px;
  background: var(--product-amber);
  color: var(--product-ink);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: var(--type-meta);
  font-weight: 700;
  letter-spacing: .06em;
}

.admin-impersonation button {
  padding: 5px 10px;
  border: 1px solid var(--product-ink);
  background: var(--product-ink);
  color: var(--product-white);
  font: inherit;
  cursor: pointer;
}

/* ---------- ADMIN RESPONSIVE ---------- */
.admin-rail-toggle { display: none; }

@media (max-width: 1024px) {
  .admin-topbar { grid-template-columns: auto 1fr auto; }
  .admin-brand { border-right: 0; }

  .admin-rail {
    transform: translateX(-100%);
    transition: transform .18s ease;
    box-shadow: 0 0 0 100vmax rgba(18, 32, 30, 0);
  }

  .admin-rail.open { transform: translateX(0); }

  .admin-main { margin-left: 0; }

  .admin-rail-toggle {
    display: inline-flex;
    align-items: center;
    padding: 6px 9px;
    margin-left: 14px;
    border: 1px solid var(--product-ink);
    background: transparent;
    color: var(--product-ink);
    cursor: pointer;
  }

  .admin-topbar-meta { display: none; }

  /* Registers stay readable by scrolling inside their own container */
  .admin-scroll { overflow-x: auto; }
  .admin-register { min-width: 720px; }
}

@media (max-width: 600px) {
  .admin-body-inner { padding: 0 16px 40px; }
  .admin-pagehead { padding: 14px 16px; }
  .admin-account span { display: none; }
}

/* ============================================================================
   AUTH, ACCOUNT & LEGAL SURFACES
   ----------------------------------------------------------------------------
   Simpler than the application, but unmistakably the same product: same paper,
   same ink, same mono labels, same rectangular controls. Deliberately NOT a
   centred floating card -- the form sits on the page canvas between two ink
   rules, the way a record does in the product.
   Scoped under body.public-body, so the authenticated screens are untouched.
   ========================================================================== */

.auth-shell {
  max-width: 460px;
  margin: 0 auto;
  padding: 52px 28px 64px;
}

.auth-shell.wide { max-width: 720px; }

.auth-head {
  padding-bottom: 16px;
  border-bottom: 1px solid var(--product-ink);
}

.auth-head h1 {
  margin: 0;
  font-size: var(--type-display);
  font-weight: 700;
  letter-spacing: -.03em;
  line-height: 1.1;
  color: var(--product-ink);
}

.auth-head p {
  margin: 10px 0 0;
  font-size: var(--type-body);
  line-height: 1.6;
  color: var(--product-muted);
}

.auth-form { margin: 0; }

.auth-field {
  padding: 16px 0;
  border-bottom: 1px solid var(--product-line);
}

.auth-field > label,
.auth-field .auth-label {
  display: block;
  margin-bottom: 7px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: var(--type-label);
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--product-muted);
}

.auth-field input[type="text"],
.auth-field input[type="email"],
.auth-field input[type="password"],
.auth-field input[type="number"],
.auth-field select,
.auth-field textarea {
  width: 100%;
  box-sizing: border-box;
  min-height: 42px;
  padding: 10px 12px;
  border: 1px solid var(--product-ink);
  border-radius: 0;
  background: var(--product-white);
  color: var(--product-ink);
  font-family: inherit;
  font-size: var(--type-body);
  outline: none;
}

.auth-field input:focus,
.auth-field select:focus,
.auth-field textarea:focus {
  /* Kills the legacy Tailwind focus ring that ships on the shared INPUT widget class,
     which is still emitted by forms.py for the approved Settings/Radars screens. */
  box-shadow: none;
  border-color: var(--product-ink);
}

.auth-field input:focus-visible,
.auth-field select:focus-visible,
.auth-field textarea:focus-visible {
  outline: 2px solid var(--product-amber);
  outline-offset: 1px;
}

.auth-field .auth-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.auth-field .auth-row a {
  flex-shrink: 0;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: var(--type-label);
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--product-muted);
  text-decoration: none;
  border-bottom: 1px solid var(--product-line);
}

.auth-field .auth-row a:hover { color: var(--product-ink); }

/* Password reveal sits inside the field, square, no chip */
.auth-reveal { position: relative; }

.auth-reveal input { padding-right: 44px; }

.auth-reveal button {
  position: absolute;
  right: 1px;
  top: 1px;
  bottom: 1px;
  width: 40px;
  border: 0;
  border-left: 1px solid var(--product-line);
  background: transparent;
  color: var(--product-muted);
  cursor: pointer;
  font-size: var(--type-body);
}

.auth-reveal button:hover { background: var(--product-paper); color: var(--product-ink); }

.auth-help {
  margin: 7px 0 0;
  font-size: var(--type-small);
  line-height: 1.55;
  color: var(--product-muted);
}

.auth-help ul { margin: 4px 0 0; padding-left: 16px; }

.auth-actions { padding: 20px 0 0; }

.auth-actions .product-ink-button { width: 100%; padding: 13px 16px; }

.auth-links {
  margin: 0;
  padding: 18px 0 0;
  border-top: 1px solid var(--product-line);
  font-size: var(--type-secondary);
  line-height: 1.9;
  color: var(--product-muted);
}

.auth-links a {
  font-weight: 700;
  color: var(--product-ink);
  text-decoration: none;
  border-bottom: 1px solid var(--product-line);
}

.auth-links a:hover { border-bottom-color: var(--product-amber); }

/* Notices: reuse the settings/pricing notice grammar */
.auth-notice {
  margin: 18px 0 0;
  padding: 12px 15px;
  border: 1px solid var(--product-ink);
  border-left: 3px solid var(--product-amber);
  background: var(--product-white);
  font-size: var(--type-secondary);
  line-height: 1.6;
  color: var(--product-ink);
}

.auth-notice.error { border-left-color: #99443b; }
.auth-notice.ok { border-left-color: var(--product-green); }

.auth-notice b {
  display: block;
  margin-bottom: 4px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: var(--type-meta);
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}

/* Social sign-in: same rectangular control language */
.auth-social {
  padding: 18px 0 0;
  border-top: 1px solid var(--product-line);
  margin-top: 18px;
}

.auth-social > p {
  margin: 0 0 10px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: var(--type-label);
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--product-muted);
  text-align: center;
}

.auth-social a {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  width: 100%;
  box-sizing: border-box;
  padding: 11px 14px;
  border: 1px solid var(--product-ink);
  background: var(--product-white);
  color: var(--product-ink);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: var(--type-meta);
  font-weight: 600;
  letter-spacing: .06em;
  text-decoration: none;
}

.auth-social a:hover { background: var(--product-paper); }

/* ---------- LEGAL / PROSE PAGES ---------- */
.prose-page {
  max-width: 760px;
  margin: 0 auto;
  padding: 46px 28px 66px;
}

.prose-page > header {
  padding-bottom: 18px;
  border-bottom: 1px solid var(--product-ink);
  margin-bottom: 12px;
}

.prose-page > header h1 {
  margin: 0;
  font-size: var(--type-display);
  font-weight: 700;
  letter-spacing: -.03em;
  line-height: 1.1;
  color: var(--product-ink);
}

.prose-page > header p {
  margin: 9px 0 0;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: var(--type-meta);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--product-muted);
}

.prose-page h2 {
  margin: 34px 0 10px;
  padding-top: 16px;
  border-top: 1px solid var(--product-line);
  font-size: var(--type-title);
  font-weight: 700;
  letter-spacing: -.01em;
  color: var(--product-ink);
}

.prose-page h3 {
  margin: 22px 0 8px;
  font-size: var(--type-body);
  font-weight: 700;
  color: var(--product-ink);
}

.prose-page p,
.prose-page li {
  font-size: var(--type-body);
  line-height: 1.75;
  color: var(--product-ink);
}

.prose-page p { margin: 0 0 13px; }

/* Tailwind's preflight sets list-style:none, and the original markup restored the markers
   with a list-disc / list-decimal utility class. Those classes were stripped with the rest of
   the presentational ones, so the markers are re-declared here instead. */
.prose-page ul,
.prose-page ol { margin: 0 0 15px; padding-left: 22px; }

.prose-page ul { list-style: disc outside; }
.prose-page ol { list-style: decimal outside; }
.prose-page li::marker { color: var(--product-muted); }

.prose-page li { margin-bottom: 6px; }

.prose-page a {
  color: var(--product-ink);
  text-decoration: none;
  border-bottom: 1px solid var(--product-line);
}

.prose-page a:hover { border-bottom-color: var(--product-amber); }

.prose-page strong { font-weight: 700; }

.prose-page table {
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 18px;
  border-top: 1px solid var(--product-ink);
}

.prose-page th {
  padding: 9px 10px;
  border-bottom: 1px solid var(--product-ink);
  text-align: left;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: var(--type-label);
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--product-muted);
}

.prose-page td {
  padding: 10px;
  border-bottom: 1px solid var(--product-line);
  font-size: var(--type-body);
  line-height: 1.6;
  vertical-align: top;
}

/* ---------- COOKIE CONSENT BANNER ---------- */
.cookie-banner {
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  z-index: 60;
  border-top: 1px solid var(--product-ink);
  background: var(--product-white);
  padding: 14px 22px;
}

.cookie-banner > div {
  max-width: 1180px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.cookie-banner p {
  margin: 0;
  max-width: 76ch;
  font-size: var(--type-secondary);
  line-height: 1.6;
  color: var(--product-muted);
}

.cookie-banner p a {
  color: var(--product-ink);
  font-weight: 700;
  text-decoration: none;
  border-bottom: 1px solid var(--product-line);
}

.cookie-banner .cookie-actions {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}

.cookie-banner button {
  padding: 9px 14px;
  border: 1px solid var(--product-ink);
  background: transparent;
  color: var(--product-ink);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: var(--type-meta);
  font-weight: 600;
  letter-spacing: .06em;
  cursor: pointer;
}

.cookie-banner button.primary {
  background: var(--product-ink);
  color: var(--product-white);
}

.cookie-banner button:hover { background: var(--product-paper); }
.cookie-banner button.primary:hover { background: var(--product-green); border-color: var(--product-green); color: var(--product-white); }

/* ---------- SHARED TOAST (all surfaces) ---------- */
.ledger-toast {
  border: 1px solid var(--product-ink);
  border-left: 3px solid var(--product-amber);
  background: var(--product-white);
  padding: 12px 16px;
  font-size: var(--type-secondary);
  font-weight: 600;
  color: var(--product-ink);
  max-width: 380px;
}

@media (max-width: 600px) {
  .auth-shell { padding: 34px 18px 48px; }
  .auth-head h1 { font-size: var(--type-h2); }
  .prose-page { padding: 32px 18px 48px; }
  .prose-page > header h1 { font-size: var(--type-h2); }
  .cookie-banner > div { flex-direction: column; align-items: stretch; }
  .cookie-banner .cookie-actions button { flex: 1; }
}

/* ---------- ADMIN PANEL: a flat grouped surface, not a floating card ---------- */
.admin-panel {
  border: 1px solid var(--product-ink);
  background: var(--product-white);
  padding: 18px 20px;
  margin-bottom: 20px;
}

.admin-panel > h2,
.admin-panel > h3 {
  margin: 0 0 12px;
  padding-bottom: 9px;
  border-bottom: 1px solid var(--product-line);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: var(--type-meta);
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--product-ink);
}

.admin-panel p { font-size: var(--type-secondary); line-height: 1.6; color: var(--product-ink); }

.admin-panel dl { margin: 0; }

.admin-panel a { color: var(--product-ink); }

/* A sub-block inside a panel (complimentary access, criteria summary, ...) */
.admin-subpanel {
  border: 1px solid var(--product-line);
  border-left: 3px solid var(--product-amber);
  background: var(--product-paper);
  padding: 14px 16px;
  margin: 12px 0;
}

.admin-subpanel.quiet { border-left-color: var(--product-line); }

/* Key/value rows inside panels */
.admin-kv {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 10px 0;
  border-bottom: 1px solid var(--product-line);
  font-size: var(--type-secondary);
}

.admin-kv:last-child { border-bottom: 0; }

/* ---------- ADMIN BUTTONS ---------- */
.admin-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 9px 13px;
  border: 1px solid var(--product-ink);
  background: transparent;
  color: var(--product-ink);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: var(--type-meta);
  font-weight: 600;
  letter-spacing: .06em;
  text-decoration: none;
  cursor: pointer;
}

.admin-btn:hover { background: var(--product-ink); color: var(--product-white); }

.admin-btn.primary { background: var(--product-ink); color: var(--product-white); }
.admin-btn.primary:hover { background: var(--product-green); border-color: var(--product-green); }

.admin-btn.danger { border-color: #99443b; color: #99443b; }
.admin-btn.danger:hover { background: #99443b; color: var(--product-white); }

.admin-btn.ok { border-color: var(--product-green); color: var(--product-green); }
.admin-btn.ok:hover { background: var(--product-green); color: var(--product-white); }

/* Inline form controls inside panels use the same rectangular language as the filters */
.admin-panel input[type="text"],
.admin-panel input[type="email"],
.admin-panel input[type="date"],
.admin-panel input[type="number"],
.admin-panel input[type="password"],
.admin-panel select,
.admin-panel textarea,
.admin-subpanel input[type="text"],
.admin-subpanel input[type="email"],
.admin-subpanel input[type="date"],
.admin-subpanel input[type="number"],
.admin-subpanel select,
.admin-subpanel textarea {
  min-height: 34px;
  padding: 7px 10px;
  border: 1px solid var(--product-ink);
  border-radius: 0;
  background: var(--product-white);
  color: var(--product-ink);
  font-family: inherit;
  font-size: var(--type-body);
}

.admin-panel input:focus,
.admin-panel select:focus,
.admin-panel textarea:focus,
.admin-subpanel input:focus,
.admin-subpanel select:focus,
.admin-subpanel textarea:focus {
  /* Same reason as .auth-field: forms.py still emits the shared INPUT class here. */
  box-shadow: none;
  border-color: var(--product-ink);
  outline: 2px solid var(--product-amber);
  outline-offset: 1px;
}

.admin-panel label,
.admin-subpanel label {
  display: block;
  margin-bottom: 4px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: var(--type-label);
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--product-muted);
}

/* ---------- ADMIN MODAL (pipeline run confirmation) ---------- */
.admin-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(18, 32, 30, .55);
}

/* product-ui.css loads after app.css, so .admin-modal-backdrop's display:flex would beat
   Tailwind's .hidden at equal specificity and leave the dialog permanently open. */
.admin-modal-backdrop.hidden { display: none !important; }

.admin-modal {
  width: 100%;
  max-width: 520px;
  border: 1px solid var(--product-ink);
  background: var(--product-white);
  padding: 22px 24px;
}

.admin-modal h2,
.admin-modal h3 {
  margin: 0 0 12px;
  font-size: var(--type-title);
  font-weight: 700;
  color: var(--product-ink);
}

.admin-modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--product-line);
}

/* ---------- ADMIN PAGE HEAD ACTION ROW ---------- */
.admin-headrow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 0;
  border-bottom: 1px solid var(--product-line);
  margin-bottom: 4px;
}

.admin-headrow .admin-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

/* ---------- CONTROL LETTERCASE (appearance only) ----------
   The ledger renders controls in uppercase. That is done here, not by rewriting the copy in
   the templates, so the underlying wording stays exactly as it was authored and reviewed.
   Scoped to the public/auth/admin shells -- .product-ink-button on the approved authenticated
   screens keeps its own casing. */
.public-nav a,
.public-menu a,
.public-actions .product-ink-button,
.public-actions .product-text-button,
.public-hero-cta .product-ink-button,
.public-hero-cta .product-text-button,
.public-plan-row .plan-action a.outline,
.auth-shell .product-ink-button,
.auth-shell .product-text-button,
.auth-social a,
.cookie-banner button,
.admin-filters .product-ink-button,
.admin-filters .product-text-button,
.admin-btn,
.admin-modal-actions .admin-btn {
  text-transform: uppercase;
}

/* ---------- django-allauth entrance pages ----------
   allauth renders its own raw element markup (<h1>, <p>, <form>, <p><label><input>, <button>)
   with no classes. Scoped to body.allauth-page -- set only by templates/allauth/layouts/
   entrance.html -- these rules give that markup the same auth grammar as /login/ and /signup/
   without touching allauth's templates or behaviour. */
.allauth-page .public-main {
  max-width: 460px;
  margin: 0 auto;
  padding: 110px 28px 64px;
  box-sizing: border-box;
}

.allauth-page .public-main h1 {
  margin: 0 0 14px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--product-ink);
  font-size: var(--type-display);
  font-weight: 700;
  letter-spacing: -.03em;
  line-height: 1.1;
  color: var(--product-ink);
}

.allauth-page .public-main h2 {
  margin: 22px 0 8px;
  font-size: var(--type-name);
  font-weight: 700;
  color: var(--product-ink);
}

.allauth-page .public-main p {
  margin: 0 0 12px;
  font-size: var(--type-body);
  line-height: 1.6;
  color: var(--product-muted);
}

.allauth-page .public-main a {
  color: var(--product-ink);
  font-weight: 700;
  text-decoration: none;
  border-bottom: 1px solid var(--product-line);
}

.allauth-page .public-main a:hover { border-bottom-color: var(--product-amber); }

.allauth-page .public-main form > p {
  margin: 0;
  padding: 16px 0;
  border-bottom: 1px solid var(--product-line);
  color: var(--product-ink);
}

.allauth-page .public-main label {
  display: block;
  margin-bottom: 7px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: var(--type-label);
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--product-muted);
}

.allauth-page .public-main input[type="text"],
.allauth-page .public-main input[type="email"],
.allauth-page .public-main input[type="password"],
.allauth-page .public-main textarea,
.allauth-page .public-main select {
  width: 100%;
  box-sizing: border-box;
  min-height: 42px;
  padding: 10px 12px;
  border: 1px solid var(--product-ink);
  border-radius: 0;
  background: var(--product-white);
  color: var(--product-ink);
  font-family: inherit;
  font-size: var(--type-body);
}

.allauth-page .public-main input:focus-visible,
.allauth-page .public-main textarea:focus-visible,
.allauth-page .public-main select:focus-visible {
  outline: 2px solid var(--product-amber);
  outline-offset: 1px;
}

.allauth-page .public-main button,
.allauth-page .public-main a[href][role="button"] {
  margin-top: 20px;
  width: 100%;
  padding: 13px 16px;
  border: 1px solid var(--product-ink);
  border-radius: 0;
  background: var(--product-ink);
  color: var(--product-white);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: var(--type-meta);
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  cursor: pointer;
}

.allauth-page .public-main button:hover {
  background: var(--product-green);
  border-color: var(--product-green);
}

.allauth-page .public-main ul.errorlist {
  margin: 0 0 8px;
  padding: 10px 14px;
  list-style: none;
  border: 1px solid var(--product-ink);
  border-left: 3px solid var(--product-red);
  background: var(--product-white);
  font-size: var(--type-secondary);
  color: var(--product-ink);
}

.allauth-page .public-main hr {
  border: 0;
  border-top: 1px solid var(--product-line);
  margin: 20px 0;
}

@media (max-width: 600px) {
  .allauth-page .public-main { padding: 88px 18px 48px; }
  .allauth-page .public-main h1 { font-size: var(--type-h2); }
}


/* ---------- FORM CONTROL SIZE FLOOR ----------
   Below 16px, iOS Safari zooms the whole page when a field is focused, and at desktop sizes
   anything under the body size reads as fine print. Controls follow the body size on desktop and
   are floored at 16px on phones. !important only because several controls carry an inline size. */
body.product-body input:not([type="checkbox"]):not([type="radio"]),
body.product-body select,
body.product-body textarea {
  font-size: var(--type-body);
}

@media (max-width: 600px) {
  body.product-body input:not([type="checkbox"]):not([type="radio"]),
  body.product-body select,
  body.product-body textarea,
  body.public-body input:not([type="checkbox"]):not([type="radio"]),
  body.public-body select,
  body.public-body textarea,
  body.admin-body input:not([type="checkbox"]):not([type="radio"]),
  body.admin-body select,
  body.admin-body textarea {
    font-size: var(--type-control-touch) !important;
  }
}

/* ======================================================================================
   CAMPAIGN LANDING PAGES (/for/horeca/, /for/insurance/)
   Derived from the Radars register: a campaign page shows the visitor the Radar they would
   define, in the product's own row grammar. Everything else on those pages reuses the public
   primitives above (.public-hero, .public-chain, .public-list, .public-intake, .public-notice).
   ====================================================================================== */
.public-radar-sample {
  margin: 0 0 40px;
  border: 1px solid var(--product-ink);
  background: var(--product-white);
}

.public-radar-sample > header,
.public-radar-sample .product-radar-row {
  grid-template-columns: 1.05fr 1.7fr .75fr;
}

.public-radar-sample > header {
  display: grid;
  gap: 24px;
  padding: 12px 13px;
  border-bottom: 1px solid var(--product-ink);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: var(--type-label);
  font-weight: 600;
  letter-spacing: .09em;
  color: var(--product-muted);
  text-transform: uppercase;
}

.public-radar-sample .product-radar-row:last-child { border-bottom: 0; }
.public-radar-sample .product-radar-row.featured { box-shadow: inset 3px 0 var(--product-amber); }
.public-radar-sample .product-criteria b { width: 74px; }

.public-radar-sample .radar-note {
  font-size: var(--type-secondary);
  line-height: 1.55;
  color: var(--product-muted);
}

/* Two honest columns: what the product does for this audience / what it does not promise. */
.public-fit {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-top: 1px solid var(--product-ink);
  margin: 0 0 40px;
}

.public-fit > div { padding: 18px 20px 20px 0; }
.public-fit > div + div { padding-left: 20px; border-left: 1px solid var(--product-line); }

.public-fit h3 {
  margin: 0 0 10px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: var(--type-meta);
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--product-ink);
}

.public-fit ul { margin: 0; padding: 0; list-style: none; }

.public-fit li {
  position: relative;
  margin: 0 0 8px;
  padding-left: 16px;
  font-size: var(--type-secondary);
  line-height: 1.55;
  color: var(--product-ink);
}

.public-fit li::before { content: "✓"; position: absolute; left: 0; color: var(--product-green); font-weight: 700; }
.public-fit .not li { color: var(--product-muted); }
.public-fit .not li::before { content: "—"; color: var(--product-muted); }

@media (max-width: 900px) {
  .public-radar-sample > header { display: none; }
  .public-radar-sample .product-radar-row { grid-template-columns: 1fr; gap: 10px; }
  .public-radar-sample .product-radar-row > div { order: 0; grid-column: auto; text-align: left; }
  .public-fit { grid-template-columns: 1fr; }
  .public-fit > div { padding: 16px 0; }
  .public-fit > div + div { padding-left: 0; border-left: 0; border-top: 1px solid var(--product-line); }
}

/* Footer / privacy-page control that reopens the analytics consent choice (includes/analytics.html). */
.cookie-settings-link {
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  letter-spacing: inherit;
  color: inherit;
  text-decoration: underline;
  cursor: pointer;
}

/* Free vs paid, stated right under the campaign CTA. */
.public-cta-note {
  margin: 14px 0 0;
  max-width: 70ch;
  font-size: var(--type-small);
  line-height: 1.6;
  color: var(--product-muted);
}
.public-cta-note b { color: var(--product-ink); }

/* Authenticated account security. Same square ledger grammar as Settings and the product forms. */
.product-settings-panel {
  margin-bottom: 24px;
  padding: 24px;
  border: 1px solid var(--product-ink);
  background: var(--product-white);
}

.product-settings-label {
  margin: 0 0 12px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: var(--type-label);
  font-weight: 700;
  letter-spacing: .08em;
  color: var(--product-muted);
}

.product-settings-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.product-settings-row h2 { margin: 0; font-size: var(--type-lead); color: var(--product-ink); }
.product-settings-row p { margin: 6px 0 0; max-width: 62ch; font-size: var(--type-secondary); line-height: 1.55; color: var(--product-muted); }
.product-settings-row .product-ink-button { flex: 0 0 auto; }

.product-password-page { max-width: 620px; margin: 0 auto; padding: 44px 28px 72px; }
.product-password-head { padding-bottom: 18px; border-bottom: 1px solid var(--product-ink); }
.product-password-head h1 { margin: 5px 0 0; font-size: var(--type-display); line-height: 1.1; color: var(--product-ink); }
.product-password-head > p:last-child { margin: 12px 0 0; font-size: var(--type-secondary); line-height: 1.6; color: var(--product-muted); }
.product-password-form { margin: 0; }
.product-password-actions { display: flex; justify-content: flex-end; align-items: center; gap: 16px; padding-top: 22px; }
.product-form-error,
.product-field-errors { border-left: 3px solid var(--product-red); color: var(--product-ink); font-size: var(--type-secondary); }
.product-form-error { margin-top: 18px; padding: 10px 12px; background: var(--product-white); border-top: 1px solid var(--product-line); border-right: 1px solid var(--product-line); border-bottom: 1px solid var(--product-line); }
.product-field-errors { margin-top: 8px; padding-left: 10px; }
.product-form-error ul,
.product-field-errors ul { margin: 0; padding: 0; list-style: none; }

@media (max-width: 600px) {
  .product-settings-row { align-items: stretch; flex-direction: column; }
  .product-settings-row .product-ink-button { width: 100%; }
  .product-password-page { padding: 28px 18px 56px; }
  .product-password-actions { align-items: stretch; flex-direction: column-reverse; }
  .product-password-actions .product-ink-button,
  .product-password-actions .product-text-button { width: 100%; text-align: center; }
}