/* ui/lens.css — the persona lens. Owned by W19.
   EVERY SELECTOR IS PREFIXED .lx- (SHELL_CONTRACT 3.2). These are concatenated into styles.css
   at build; an unprefixed rule silently restyles somebody else's surface. */

/* ---- the question this person is here to answer, and the decision it drives -------------- */
.lx-head{ margin-bottom:18px; }
.lx-q{ font-size:19px; font-weight:600; color:var(--ink, #1a1a1a); line-height:1.35; }
.lx-decision{ font-size:12.5px; color:var(--muted-ink, #55555f); margin-top:5px; }
.lx-decision-k{
  display:inline-block; font-size:10px; font-weight:700; letter-spacing:.06em;
  text-transform:uppercase; color:var(--faint, #8a8a94); margin-right:7px;
}

/* ---- the one sentence a CEO repeats to the board ---------------------------------------- */
.lx-board{
  background:var(--accent-wash, #f2f2fd); border-left:3px solid var(--accent, #3b3bd6);
  border-radius:0 8px 8px 0; padding:12px 15px; margin-bottom:18px;
  font-size:14.5px; line-height:1.55; color:var(--ink, #1a1a1a);
}
.lx-board-k{
  display:block; font-size:10px; font-weight:700; letter-spacing:.06em;
  text-transform:uppercase; color:var(--accent, #3b3bd6); margin-bottom:5px;
}

/* ---- panels ----------------------------------------------------------------------------- */
.lx-panel{
  border:1px solid var(--rule, #e6e6e6); border-radius:10px;
  padding:16px 18px; margin-bottom:14px; background:var(--card, #fff);
}
.lx-panel-t{ font-size:13px; font-weight:650; margin:0 0 6px; color:var(--ink, #1a1a1a); }

/* THE NARRATION. Junior tells this window's story, in this persona's voice, leading with the
   decision. It is the loudest text in the panel, because it is the point of the panel. */
.lx-narration{
  margin:0 0 14px; font-size:15px; line-height:1.55; color:var(--ink, #1a1a1a); max-width:74ch;
}

/* LESS IS MORE. The reasoning is DISCOVERABLE, not DECLAIMED. */
.lx-detail{ margin-top:12px; }
.lx-detail summary{
  cursor:pointer; font-size:12px; color:var(--faint, #8a8a94); user-select:none;
}
.lx-detail summary:hover{ color:var(--accent, #3b3bd6); }
.lx-detail p{
  margin:8px 0 0; font-size:12.5px; line-height:1.6; color:var(--muted-ink, #55555f);
  max-width:80ch;
}

/* ---- what we can say, and what we cannot ------------------------------------------------
   "We can see you're on Humanforce and Acredia; we cannot see your pharmacy system" is a
   product. Nine green ticks for everyone is a mock-up, and any CIO knows it in a second.
   THE HONESTY IS THE FEATURE. It gets its own styling because it is doing real work. */
.lx-claim{
  margin:0 0 12px; font-size:14px; line-height:1.55; color:var(--ink, #1a1a1a); max-width:74ch;
}
.lx-cannot{
  background:var(--wash, #fafafb); border:1px dashed var(--rule, #d8d8dd); border-radius:8px;
  padding:12px 14px; margin:0 0 14px; font-size:13px; line-height:1.55;
  color:var(--muted-ink, #55555f); max-width:76ch;
}
.lx-cannot-k{
  display:block; font-size:10px; font-weight:700; letter-spacing:.06em;
  text-transform:uppercase; color:var(--faint, #8a8a94); margin-bottom:5px;
}

/* ---- facts ------------------------------------------------------------------------------ */
.lx-facts{ display:flex; flex-wrap:wrap; gap:22px; }
.lx-fact{ min-width:96px; position:relative; }
.lx-fact-v{ font-size:22px; font-weight:600; color:var(--ink, #1a1a1a); letter-spacing:-.01em; }
.lx-fact-k{ font-size:11.5px; color:var(--faint, #8a8a94); margin-top:3px; max-width:22ch; }
.lx-per{ font-size:11px; color:var(--faint, #8a8a94); margin-left:3px; font-weight:400; }
.lx-fact-n{
  position:absolute; top:-2px; right:-12px; width:14px; height:14px; border-radius:50%;
  background:var(--rule, #e6e6e6); color:var(--faint, #8a8a94);
  font-size:9px; font-weight:700; text-align:center; line-height:14px; cursor:help;
}

/* ---- ABSENCE IS NOT ZERO, AND IT MUST NOT LOOK LIKE ONE ---------------------------------
   A withheld figure is rendered in a visibly different weight and colour from a real value.
   It can never be mistaken for a number, because it is not one. */
.lx-nodata{
  font-size:13px; font-weight:400; font-style:italic;
  color:var(--faint, #8a8a94); border-bottom:1px dotted var(--faint, #8a8a94); cursor:help;
}
.lx-fact.is-absent .lx-fact-v{ font-size:15px; }

/* ---- verdicts --------------------------------------------------------------------------- */
.lx-verdict{
  display:inline-block; font-size:10px; font-weight:700; letter-spacing:.06em;
  text-transform:uppercase; padding:3px 8px; border-radius:4px; margin-right:9px;
}
.lx-verdict-act{ background:#e7f3ec; color:#1c6b3f; }
.lx-verdict-leave{ background:#f1f1f3; color:#6a6a74; }
/* THE SAFETY FLOOR. It is the loudest thing on any lens it appears on. It is never quiet and
   it is NEVER BLANK — four of six below-floor homes once rendered as an empty row, and an
   empty row reads as "nothing to do here". */
.lx-verdict-staff{ background:#fdeceb; color:#a3231b; }

/* ---- the refusal ------------------------------------------------------------------------ */
.lx-refusals{ display:flex; flex-direction:column; gap:12px; }
.lx-refusal{
  border:1px solid #f3cfcc; border-left:3px solid #c0392b; border-radius:0 8px 8px 0;
  background:#fefaf9; padding:14px 16px;
}
.lx-refusal-h{ display:flex; align-items:center; margin-bottom:8px; }
.lx-refusal-n{ font-size:14px; font-weight:600; color:var(--ink, #1a1a1a); }
.lx-refusal-b{ margin:0 0 10px; font-size:15px; font-weight:600; color:#a3231b; }
.lx-refusal-x{
  margin:12px 0 0; font-size:12.5px; line-height:1.6; color:var(--muted-ink, #55555f);
  max-width:80ch;
}
.lx-refusal-next{
  margin:8px 0 0; font-size:12.5px; line-height:1.6; color:var(--ink, #1a1a1a);
  max-width:80ch; font-weight:500;
}

/* ---- lines (the roster lens) ------------------------------------------------------------ */
.lx-lines{ display:flex; flex-direction:column; gap:10px; }
.lx-line{
  border:1px solid var(--rule, #e6e6e6); border-radius:8px; padding:12px 14px;
}
.lx-line-h{ display:flex; align-items:center; margin-bottom:9px; }
.lx-line-n{ font-size:13.5px; font-weight:600; color:var(--ink, #1a1a1a); }

/* ---- the CEO's switch: close the right ones, or close every gap -------------------------- */
.lx-scen{ display:flex; gap:12px; flex-wrap:wrap; margin-bottom:14px; }
.lx-scen-card{
  flex:1 1 260px; border:1.5px solid var(--rule, #e6e6e6); border-radius:9px;
  padding:13px 15px; cursor:pointer; transition:border-color .12s, background .12s;
}
.lx-scen-card:hover{ border-color:var(--accent, #3b3bd6); }
.lx-scen-card.is-on{ border-color:var(--accent, #3b3bd6); background:var(--accent-wash, #f2f2fd); }
.lx-scen-t{ font-size:12.5px; font-weight:650; margin-bottom:10px; color:var(--ink, #1a1a1a); }

/* ---- the CFO's controls ----------------------------------------------------------------- */
.lx-controls-panel{ background:var(--wash, #fafafb); }
.lx-controls{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(196px, 1fr)); gap:16px 22px;
}
.lx-ctrl-h{ display:flex; justify-content:space-between; align-items:baseline; }
.lx-ctrl-l{ font-size:12px; font-weight:550; color:var(--ink, #1a1a1a); }
.lx-ctrl-v{
  font-size:13px; font-weight:650; color:var(--accent, #3b3bd6);
  font-variant-numeric:tabular-nums;
}
.lx-slider{ width:100%; margin:7px 0 3px; accent-color:var(--accent, #3b3bd6); cursor:pointer; }
/* PROVENANCE ON EVERY CONTROL. Where we do not hold the figure, we say we do not hold it. */
.lx-ctrl-src{ font-size:10.5px; line-height:1.4; color:var(--faint, #8a8a94); }
.lx-ctrl.is-oncost .lx-ctrl-l::after{
  content:"on-cost"; font-size:9px; font-weight:700; letter-spacing:.05em;
  text-transform:uppercase; color:var(--faint, #8a8a94); margin-left:6px;
}
.lx-ctrl-foot{
  display:flex; align-items:center; gap:14px; margin-top:16px;
  padding-top:13px; border-top:1px solid var(--rule, #e6e6e6);
}
.lx-ctrl-note{ font-size:11.5px; color:var(--faint, #8a8a94); line-height:1.5; }
.lx-reset{
  flex:0 0 auto; font-size:11.5px; padding:5px 11px; cursor:pointer;
  background:transparent; border:1px solid var(--rule, #e6e6e6); border-radius:6px;
  color:var(--muted-ink, #55555f);
}
.lx-reset:hover{ border-color:var(--accent, #3b3bd6); color:var(--accent, #3b3bd6); }

/* ---- the ledger: every total equals the sum of its lines --------------------------------- */
.lx-ledger{ display:flex; gap:22px; flex-wrap:wrap; }
.lx-led-block{ flex:1 1 260px; min-width:0; }
.lx-led-t{ font-size:11.5px; font-weight:650; color:var(--faint, #8a8a94); margin-bottom:6px; }
.lx-led-tbl{ width:100%; border-collapse:collapse; font-size:12.5px; }
.lx-led-tbl td{ padding:4px 0; border-bottom:1px solid var(--rule, #f0f0f2); }
.lx-led-tbl td:last-child{ text-align:right; font-variant-numeric:tabular-nums; }
.lx-led-tbl tfoot td{
  font-weight:700; border-top:1.5px solid var(--ink, #1a1a1a); border-bottom:none;
  padding-top:7px;
}

/* ---- the next click --------------------------------------------------------------------- */
.lx-next{ margin-top:18px; }
.lx-tap{ margin-top:14px; }
.lx-cta{
  font-size:13px; font-weight:600; padding:9px 17px; cursor:pointer;
  background:var(--accent, #3b3bd6); color:#fff; border:none; border-radius:7px;
}
.lx-cta:hover{ filter:brightness(1.08); }
/* The Facility Manager's ONE TAP. Sixty seconds, on a phone, one thumb. */
.lx-cta-big{ width:100%; padding:14px; font-size:15px; }

.lx-names{ margin:10px 0 0; padding-left:18px; font-size:12.5px; color:var(--muted-ink,#55555f); }
.lx-names li{ margin:3px 0; }
.lx-err{ padding:14px; border-radius:8px; background:#fdeceb; color:#a3231b; font-size:13px; }

/* ---- the Facility Manager is on a phone. This is the only lens that must survive 360px. -- */
@media (max-width:640px){
  .lx-facts{ gap:16px; }
  .lx-fact-v{ font-size:19px; }
  .lx-scen{ flex-direction:column; }
  .lx-ledger{ flex-direction:column; gap:16px; }
  .lx-controls{ grid-template-columns:1fr; }
}