/* glass-found-sky.css — the sky of a search, as a sheet.
 *
 * Split out of glass-term.css when that file crossed 800 lines (Dan's law:
 * split by responsibility, never by line count). The responsibility is the
 * one the modules already have: glass-found-sky.js owns the answer,
 * glass-found-sky-draw.js draws it, and this is what that picture is made of.
 * The terminal's own sheet keeps the terminal.
 *
 * Two rules that are NOT here, and must not come back:
 *   - no `font-size` on `.fs-l`. The drawing module computes the size that
 *     puts a label on the app's 11px floor and emits it as an attribute; an
 *     author rule beats an attribute, and that is how the page came to draw
 *     8.8px labels on a desk and 4.36px on a phone (New-I-3).
 *   - no width or height on `.fs-svg`. The box is measured from the panel and
 *     the module writes the height inline with the viewBox it belongs to, so
 *     there is one rule for the geometry and no copy of it to drift (New-I-1).
 */

/* ── the found sky (§18) ──────────────────────────────────────────────
 * Under the list, in the same panel, so it is the same answer at two scales.
 * Its height is a CONSTANT: a layout change must never reflow the paper
 * under it (graph fix §5), and "bigger"/"smaller" is the reader asking, not
 * the picture deciding.
 */
.found-sky {
  margin: 0.6rem 0 0.2rem; padding-top: 0.5rem;
  border-top: 1px solid color-mix(in srgb, var(--amber) 30%, transparent);
  /* §18: "it appears after the list … the list stays scrollable above it".
     Under ten rows of quoted paragraphs that is three thousand pixels down,
     which is a picture nobody sees. Sticky is that sentence made literal: the
     sky holds the bottom edge while the rows run past it, and it takes its own
     box in the flow, so nothing reflows when it arrives or goes. */
  position: sticky; bottom: 0; z-index: 2;
  background: color-mix(in srgb, var(--amber) 7%, #0b0f16);
}
.found-sky[hidden] { display: none; }
/* NO width cap and NO height here (New-I-1): the drawing box is the panel's,
   measured, and glass-found-sky-draw.js writes the height inline with the
   viewBox it belongs to — one rule, in the file that decides the geometry.
   A copy of it here is exactly the M-5 this sheet's own comment records. */
.found-sky .fs-svg { display: block; width: 100%; margin: 0 auto; touch-action: none; cursor: grab; }
.found-sky .fs-svg:active { cursor: grabbing; }
.found-sky .fs-e { stroke: color-mix(in srgb, var(--amber) 34%, transparent); stroke-width: 1; }
.found-sky .fs-n { cursor: pointer; }
.found-sky .fs-n circle { stroke: #0b0f16; stroke-width: 1.2; }
/* §21: the centre of the sky is the query — the reader's own words, in the
   surface's own colour, with the answers hanging off it */
.found-sky .fs-hub circle { fill: var(--amber); stroke: #0b0f16; stroke-width: 1.4; }
.found-sky .fs-hub .fs-l { fill: var(--amber); font-weight: 700; letter-spacing: var(--track-label); }
.found-sky .fs-q { stroke: color-mix(in srgb, var(--amber) 52%, transparent); }
.found-sky .fs-near circle { opacity: 0.55; }
/* the page you are ON is the brightest thing here (graph §1, M-2) */
.found-sky .fs-here circle { stroke: var(--amber); stroke-width: 1.4; opacity: 1; }
.found-sky .fs-here .fs-l { font-weight: 700; fill: var(--amber); }
.found-sky .fs-focus circle { stroke: var(--fg); stroke-width: 3; }
/* …and what the focused row is joined to is lit, not merely present (I-3) */
.found-sky .fs-lit circle { stroke: color-mix(in srgb, var(--fg) 70%, transparent); stroke-width: 2; }
.found-sky .fs-lit .fs-l, .found-sky .fs-focus .fs-l { fill: var(--fg); }
.found-sky .fs-n:focus-visible { outline: none; }
.found-sky .fs-n:focus-visible circle { stroke: var(--amber); stroke-width: 3; }
/* the ordinal is type too, and the box is in CSS pixels now */
.found-sky .fs-o { font-family: var(--font-display); font-size: 11px; font-weight: 700;
  fill: var(--amber); text-anchor: middle; }
/* NO font-size here (New-I-3). glass-found-sky-draw.js computes the size that
   puts a label on the app's 11px floor and emits it as a presentation
   attribute; an author rule beats an attribute, so this line — 4px, in the
   box's own units — was what the page actually drew: 8.8px on a desk and
   4.4px on a phone, while the collision pass reserved room for the size it
   had asked for. The floor is the module's to compute and this is not the
   place to overrule it. */
.found-sky .fs-l { font-family: var(--font-display); fill: var(--fg); text-anchor: middle; }
/* "by time" is a clock now — oldest at twelve o'clock, clockwise — so the
   horizontal axis and its two end labels are gone; the rule line says which
   end is which, and the hub is no longer a point on a date scale (M-5). */
/* graph §7 / I-4: the colour never carries the topic alone */
.found-sky .fs-keys { display: flex; flex-wrap: wrap; gap: 0.15rem 0.7rem; margin: 0.3rem 0 0; }
.found-sky .fs-key { display: inline-flex; align-items: center; gap: 0.3rem;
  font-family: var(--font-display); font-size: var(--fs-1); letter-spacing: var(--track-label);
  text-transform: uppercase; color: var(--muted); }
.found-sky .fs-key i { width: 0.55rem; height: 0.55rem; border-radius: 50%; display: inline-block; }
/* the chips print the phrases the grammar answers — one table, two doors */
.found-sky .fs-chips { display: flex; flex-wrap: wrap; gap: 0.3rem; margin-bottom: 0.4rem; }
.found-sky .fs-chip { min-height: 44px; padding: 0.2rem 0.6rem; cursor: pointer;
  font-family: var(--font-display); font-size: var(--fs-1); letter-spacing: var(--track-label);
  text-transform: uppercase; color: var(--amber); background: transparent;
  border: 1px solid color-mix(in srgb, var(--amber) 45%, transparent); border-radius: 3px; }
.found-sky .fs-chip.on { background: var(--amber); color: #0b0f16; }
.found-sky .fs-chip:hover { border-color: var(--amber); }
.found-sky .fs-chip:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; }
.found-sky .fs-rule { margin: 0.15rem 0 0; font-family: var(--font-display);
  font-size: var(--fs-1); letter-spacing: var(--track-label); color: var(--muted); }
/* §18 "the names", where the reader is looking (New3-C-2). The verb exists
   because a phone has no room to draw eleven names at the 11px floor; round 3
   wrote them into `.term-log`, which `glass-term.css` hides for as long as the
   hits panel is up — so ten rows were rendered into `display: none` and the
   reader saw nothing. They are the PANEL's rows now, in the box the picture
   was in, and each is a button: the number a reader says is written on it. */
.found-sky[data-names] .fs-names { display: grid; gap: 0.1rem 0.9rem; margin: 0.25rem 0 0;
  padding: 0; list-style: none; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); }
.found-sky .fs-names li { margin: 0; }
.found-sky .fs-name { display: flex; align-items: baseline; gap: 0.45rem; width: 100%;
  min-height: 28px; padding: 0.2rem 0.15rem; text-align: left; cursor: pointer;
  background: transparent; border: 0;
  border-bottom: 1px solid color-mix(in srgb, var(--amber) 18%, transparent);
  color: var(--fg); font-family: var(--font-display); font-size: var(--fs-1); }
/* New4-M-5: NO letter-spacing here. The ordinal is the handle a reader SAYS,
   and tracked apart "10" reads as "1 0" — visible on row 10 of the phone shot.
   The label rules above track their type because it is a label; a number a
   person reads out is not. */
.found-sky .fs-name .fs-nn { color: var(--amber); font-weight: 700; min-width: 1.3rem; }
.found-sky .fs-name .fs-nt { flex: 1 1 auto; }
.found-sky .fs-name .fs-nk { color: var(--muted); font-style: normal;
  text-transform: uppercase; letter-spacing: var(--track-label); }
.found-sky .fs-name:hover { color: var(--amber); }
.found-sky .fs-name:focus-visible { outline: 2px solid var(--amber); outline-offset: 1px; }

@media (max-width: 900px) {
  /* one column, and a row a thumb can hit (§13) */
  .found-sky[data-names] .fs-names { grid-template-columns: 1fr; }
  .found-sky .fs-name { min-height: 44px; }
  /* NOTHING about the label's size here either (New-I-3): the box is measured
     in CSS pixels on a phone too, so the ordinal and the name are the same
     numbers they are on a desk, and the module's floor is what runs. */
  /* M-9: twelve chips took five rows and 200px — more of the phone than the
     picture they label. One row that scrolls, like the contents shelf. */
  .found-sky .fs-chips { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch;
    padding-bottom: 0.2rem; }
  .found-sky .fs-chip { flex: 0 0 auto; }
}