/* PLens. The parts of D4's vocabulary the shell sheet did not need:
   the ladder, the settings groups, the saved grid, and the login mark.
   linse.css owns the tokens, the rail, the panes and every widget shared
   with Search and Property; nothing here redefines any of them.

   Loaded by ejer, saved, settings and login only, so the selectors can
   stay plain: no other page carries this sheet. */

/* A hidden node stays hidden. .tag and .chip both set a display, and an
   author rule beats the UA's [hidden] whatever the specificity, so the
   count tags settings.js and saved.js fill in would otherwise show
   themselves empty for one frame. */
[hidden] { display: none !important; }

/* ---------- the header action row ---------- */

/* Addendum 4: the Owner page carries no coloured panel, so its doors sit
   in the header row instead. */
.head-acts { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px; }

/* Under 640 the two columns stack: the actions keep their own line rather
   than squeezing the name into a column two words wide. */
@media (max-width: 639px) {
  .head { flex-direction: column; align-items: stretch; gap: 10px; }
  .head-r { flex-direction: row; align-items: center; justify-content: space-between; width: 100%; }
  .head-acts { justify-content: flex-start; }
}

/* ---------- the prepared prompt ---------- */

/* A door that opens nowhere: the prompt is handed to the reader, and the
   app sends nothing anywhere. <details> + .pop is the shell's own popover,
   which linse.js already closes on Escape and on a click outside. */
.ask { position: relative; }
.ask > summary { display: inline-flex; }
/* Opening at the right edge: the header row sits against it, and the
   shell's .pop opens leftward from a left corner it does not have here. */
.ask > .pop { left: auto; right: 0; }
.ask-p { margin: 0; padding: 12px 13px; border-radius: var(--r-sm); background: var(--marker); font-size: 13px; line-height: 1.55; }
@media (max-width: 639px) { .ask > .pop { right: auto; left: 0; } }

/* ---------- the one line a pane may lead with ---------- */

.lead { margin: 0 0 14px; font-size: 17px; line-height: 1.4; }
.lead .m { font-family: var(--mono); }

/* ---------- the flag filter over a list ---------- */

/* Real controls, no JS: radios carry the state and their labels are the
   chips. The radio is not a hidden pixel beside its chip, though: it lies
   over the chip it names, the way the pin's checkbox lies over its face, so
   the box the hand meets and the box the browser focuses are one. The ring
   is drawn on the chip around it. */
/* The pane is a flex column with no gap of its own, so the row brings
   its own air above; .listwrap under it brings the air below. */
.filter { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 14px 0 0; }
.filter .chip { position: relative; }
.flt { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.chip:has(.flt:checked) { background: var(--action); color: var(--action-ink); box-shadow: inset 0 0 0 1px var(--action-ring); }
.chip:has(.flt:checked) .mono { color: inherit; }
.chip:has(.flt:focus-visible) { outline: 2px solid var(--ink-muted); outline-offset: -3px; }

/* The pick hides what it is not about, headers included, so a group title
   never stands over an empty stretch. Read on the pane rather than as a
   sibling chain, because the chips sit in their own row: an engine
   without :has() shows every row, which is the honest fallback. */
.pane:has(#pf-direct:checked) [data-flag]:not([data-flag~="direct"]) { display: none; }
.pane:has(#pf-group:checked) [data-flag]:not([data-flag~="group"]) { display: none; }

/* ---------- the ownership ladder ---------- */

/* Stepped rows, never a graph. The step says which level a rung sits on,
   so co-owners of the same company read as siblings at one indent. */
.ladder { display: flex; flex-direction: column; gap: 8px; }
.rung { padding: 12px 14px; border-radius: var(--r-md); background: var(--card); border: 1px solid var(--edge); }
.rung--l1 { margin-left: 24px; }
.rung--l2 { margin-left: 48px; }
.rung--l3 { margin-left: 72px; }
/* The lifted rung is where the walk stopped: a person, a foreign owner, a
   ring, or a register that holds nobody above. */
.rung--stop { background: var(--surface); border-color: var(--edge-strong); box-shadow: var(--lift); }
.rung-k { margin: 0; font-size: 12.5px; color: var(--ink-muted); }
.rung-n { margin: 2px 0 0; font-size: 17px; font-weight: 600; }
.rung-n a { text-decoration: none; }
.rung-n a:hover { text-decoration: underline; }
.rung-s { margin: 4px 0 0; font-size: 13px; color: var(--ink-muted); }
.rung-s .m { font-family: var(--mono); }

@media (max-width: 519px) {
  .rung--l1 { margin-left: 12px; }
  .rung--l2 { margin-left: 24px; }
  .rung--l3 { margin-left: 36px; }
}

/* ---------- settings groups ---------- */

/* The switcher keeps its own width in here. On an entity page it is a
   flex item and align-self holds it in; a card is a plain block, where
   the same rule does nothing and the pill would run the whole width. */
.card > .seg { width: fit-content; max-width: 100%; }

/* One column on a phone, two from 768 up, and a group that carries a
   whole subject spans both. */
.setgrid { display: grid; grid-template-columns: 1fr; gap: 12px; align-content: start; }
@media (min-width: 768px) { .setgrid { grid-template-columns: 1fr 1fr; } }
.span2 { grid-column: 1 / -1; }

.keyline { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 12px 0 0; }
.keyval { flex: 1 1 260px; min-width: 0; padding: 8px 12px; border-radius: var(--r-sm); background: var(--marker); font-family: var(--mono); font-size: 13px; line-height: 1.5; overflow-wrap: anywhere; }

/* The seven tools, as seven pips. Empty pips are an honest zero, never a
   bar that fills itself. Scoped to the card, because the tour draws its
   own pips in the same words and hangs them at the end of its row: two
   readings of one vocabulary, kept apart by where they stand. */
.card > .pips { display: flex; gap: 6px; margin: 10px 0 0; }
.card .pip { width: 9px; height: 9px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--edge-strong); }
.card .pip--on { background: var(--action); box-shadow: inset 0 0 0 1px var(--action-ring); }

.meter { margin: 0; height: 8px; border-radius: 999px; background: var(--marker); overflow: hidden; }
.meter-v { display: block; height: 100%; border-radius: 999px; background: var(--action); box-shadow: inset 0 0 0 1px var(--action-ring); }

/* A client, its name in plain text, and the one line that sets it up. */
.clients { display: flex; flex-direction: column; gap: 12px; margin: 12px 0 0; }
.client-n { margin: 0; font-size: 15.5px; font-weight: 600; }
.client-l { margin: 3px 0 0; font-size: 13px; line-height: 1.5; color: var(--ink-muted); }
.prompt { margin: 0 0 10px; }
.prompt:last-of-type { margin-bottom: 0; }

/* ---------- saved: a card that is a door ---------- */

/* No verb on it (Addendum 5). The title link stretches over the whole
   card, and the pin control rides above it so both stay clickable. */
.card--door { position: relative; }
.card--door:hover { border-color: var(--edge-strong); }
.card-door { text-decoration: none; }
.card-door::after { content: ""; position: absolute; inset: 0; border-radius: var(--r-md); }
.card--door .pin { position: relative; z-index: 1; }
.card--door:active { transform: scale(.995); }
@media (prefers-reduced-motion: no-preference) {
  .card--door { transition: border-color 150ms ease, transform 180ms var(--spring); }
}

/* The row under a saved card: the pin sits alone, so it holds the right
   edge rather than the left. */
.pinline { display: flex; justify-content: flex-end; margin: 12px 0 0; }

/* The recents label, when a grid of pins stands above it. */
.mini--gap { margin-top: 22px; }

/* ---------- non-price outliers (docs/IDEA-LEDGER.md §C 18) ---------- */

/* A quiet block between the tiles and the list: one line per property that
   sits at the far end of the opened set's own spread. No panel and no colour
   of its own (Addendum 4) — the address is the door, the observation the muted
   text beside it. It adds no motion, so prefers-reduced-motion needs no rule. */
.outliers { margin-top: 18px; }
.outlier-list { margin: 0; padding: 0; list-style: none; }
.outlier { margin: 6px 0 0; font-size: 13px; line-height: 1.5; }
.outlier-a { font-weight: 600; text-decoration: none; }
.outlier-a:hover { text-decoration: underline; }
.outlier-w { color: var(--ink-muted); }

/* ---------- login ---------- */

/* The mark from the one ruled geometry (P-b, the Courtyard P), navy on
   paper and paper on navy, because it takes its colour from the ink. */
.mark { display: block; width: 44px; height: 44px; margin: 0 auto 14px; color: var(--ink); }
.login-block { width: 100%; max-width: 420px; }