/* ============================================================================
   Carousel: the widget tier's first consumer.

   The markup is no longer written in a template. It comes from a description --
   `crate::quasi::widgets::carousel` says "an ordered set of pictures, called a
   carousel" -- and quasi-webview turns that into a region carrying
   `data-widget="carousel"` with one `.picture` or `.picture-img` per frame.

   So these rules key on the widget name rather than on a hand-written class.
   That is what "a renderer that recognises the name draws it its own way"
   means on this host: the name is the hook, and the stylesheet plus the island
   are the browser's idea of a carousel.

   THE FALLBACK RUNS THE OTHER WAY NOW. This used to render frame one and hide
   the rest, because the controls that reach them are the scripted part -- so
   with JS off, two of three screenshots were unreachable. Now the unenhanced
   page is the whole gallery, stacked in order.

   THE CHROME IS DESCRIBED TOO, as of makeover-layout 0.23.0. The description
   says `Showing::One` -- an ordered set of pictures with one showing -- and
   quasi-webview derives prev/position/next from that, once, for every widget
   there will ever be. Nothing here or in any renderer matches on the name
   "carousel" to get it. The island stopped injecting chrome and now only binds
   what is already on the page; the dot strip and the overlaid arrows are gone.

   The controls are still not shipped live to a reader with no script: makeover
   keeps `.showing` hidden until something sets [data-ready], so the markup no
   longer has to be absent to avoid lying.
   ========================================================================= */

/* Public gallery carousel sections (item + project pages). */
.item-gallery,
.project-gallery {
  margin: var(--gap-pane) 0;
}

/* <mnw-carousel> wraps the described region rather than being it: a custom
   element is what the browser upgrades automatically after an htmx swap, and
   the description emits a plain div because it does not know this host's tag
   prefix. Default display for an unknown element is inline, so say otherwise. */
mnw-carousel {
  display: block;
}

/* The default is ONE frame, which is what a visitor with JavaScript sees, so
   the page is settled from first paint and nothing rearranges on load. Showing
   all three and collapsing them was a 141px -> 58px jump on every load that
   everyone with JS paid; `no-js.css`, loaded from a <noscript>, is what opens
   the stack out for a visitor without scripting.

   This is the one half of the carousel that stays local, and it is host policy
   rather than a gap. makeover's generated sheet collapses the stack on
   [data-ready], which is the honest default for a renderer that cannot know
   whether this page has script: it ships every child and takes them away once
   something binds them. Trading a load-time jump for that is a decision about
   this site's landing page, and <noscript> is a mechanism a generated
   stylesheet has no way to reach.

   No padding-bottom and no position: relative any more. Both were for chrome
   that is gone -- the strip that had to be reserved and the arrows that were
   absolutely positioned over the frame. */
[data-widget="carousel"] > .showing-frame:not(.current) {
  /* respec-ok: the generated rule is the same claim gated on [data-ready], and
     what it cannot express is <noscript>. A renderer that cannot know whether a
     page has script has to ship every child and take them away once something
     binds them; this page collapses from first paint instead and lets no-js.css
     open it back, which is a trade about this landing page rather than about
     the vocabulary. */
  display: none;
}

[data-widget="carousel"] .picture {
  margin: 0;
}

/* Only the corner. `display`, `width`, `height` and the raised fill and bevel
   all come from makeover's own `.picture-img` rule, which layout.css puts on
   every page through crate::shell::head. Restating any of them here is a
   components-layer declaration quietly beating the design system, which is what the
   drift check in build.rs exists to catch -- and did, on the first attempt at
   this file. */
[data-widget="carousel"] .picture-img {
  border-radius: var(--radius-control);
}

/* No colour: makeover's `.picture-caption` already sets it to
   --content-muted, and this said the same thing one layer louder. What is
   local is the centring and the mono face, which are this widget's look and
   not a claim about what a caption is. */
[data-widget="carousel"] .picture-caption {
  margin-top: var(--gap-group);
  font-family: var(--font-mono);
  font-size: var(--text-note);
  text-align: center;
}

/* Landing showcase only: close the top edge.

   The three landing frames are screenshots of this site, so the parchment they
   were shot on is the parchment they sit on, and a 1px border between two
   identical grounds is not an edge anyone sees.

   THE ELEVATION IS GONE, and that is the point of the port. This carried
   `box-shadow: 0 4px 10px var(--elevation), 0 14px 36px var(--elevation)`,
   which is the defect `c0b63ea9` names: in-flow depth is a bevel and elevation
   is for what sits *over* the page. It survived this long because it was
   invisible -- a declaration in a later layer on the same class makeover
   sets, so it beat the design system's bevel silently. The drift check in build.rs found it
   the moment the frame became a described `.picture-img`.

   So the frame is raised by makeover's bevel now, from `Depth::Raised`, and
   what is left here is the one thing that was never about depth: a stronger
   border colour, because a shadow falling downward does nothing for the top
   edge and the top edge is where a parchment screenshot dissolves into a
   parchment page. */
.landing-showcase .picture-img {
  border-color: var(--border-strong);
}

/* ---------------------------------------------------------------------------
   Enhanced. Everything below needs the island, and the island sets
   [data-ready] once it has upgraded and bound the controls.
   --------------------------------------------------------------------------- */

[data-widget="carousel"][data-ready]:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 3px;
}

/* The control row is makeover's `.showing`, rendered by the description rather
   than injected here, and it needs no rules: it is two `.button`s and a muted
   readout, all three of which the generated sheet already styles. What used to
   sit here was `.carousel-nav`, `.carousel-prev`, `.carousel-next`,
   `.carousel-dots` and `.carousel-dot` -- 60 lines for chrome this host drew by
   hand because nothing could describe it.

   The arrows were absolutely positioned over the frame, which Max called
   cluttered and which a terminal cannot honestly do at all; the dots had no
   form past a handful of frames, and two of the three galleries here are
   creator uploads of arbitrary length. Both halves of that were the same half. */


/* ---------------------------------------------------------------------------
   Custom page editor (dashboard/custom_page_editor.html)
   Moved out of an inline <style> block per the extract-shared-CSS rule.
   --------------------------------------------------------------------------- */
.cp-editor { max-width: 1200px; margin: 0 auto; padding: var(--gap-section); }
.cp-editor-head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--gap-section); flex-wrap: wrap; }
.cp-editor-actions { display: flex; gap: var(--gap-section); }
.cp-intro { color: var(--content-muted); margin: var(--gap-bound) 0 var(--gap-section); }
/* Form beside preview. A code textarea below about 380px is not editable, so
   that number is the pane's, not the viewport's, and the pair stacks itself. */
.cp-editor-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(380px, 1fr)); gap: var(--gap-section); align-items: start; }
.cp-editor-form { display: flex; flex-direction: column; gap: var(--gap-peer); }
.cp-code { width: 100%; min-height: 220px; font-family: var(--font-mono, ui-monospace, monospace); font-size: var(--text-note); line-height: 1.4; resize: vertical; }
.cp-editor-buttons { display: flex; align-items: center; gap: var(--gap-section); margin-top: var(--gap-peer); }
.cp-preview-pane { border: 1px solid var(--border); border-radius: var(--radius-control); overflow: hidden; }
.cp-preview-bar { font-size: var(--text-fine); padding: var(--gap-bound) var(--gap-group); background: var(--surface-sunken); border-bottom: 1px solid var(--border); }
.cp-preview { width: 100%; height: 520px; border: 0; background: var(--primary-light); display: block; }
.cp-blocked { margin-top: var(--gap-section); }
.cp-blocked-title { font-weight: 600; margin-bottom: var(--gap-peer); }
.cp-blocked-empty { color: var(--content-muted); }
.cp-blocked-list { list-style: none; padding: 0; margin: 0; }
.cp-blocked-list li { padding: var(--gap-peer) 0; border-bottom: 1px solid var(--border); font-size: var(--text-note); display: flex; gap: var(--gap-peer); flex-wrap: wrap; align-items: baseline; }
.cp-blocked-kind { font-weight: 600; }
.cp-blocked-loc { color: var(--content-muted); }
.cp-blocked-val { background: var(--surface-sunken); padding: 0 var(--gap-bound); }
.cp-status.cp-ok { color: var(--success); }
.cp-status.cp-err { color: var(--warning); }
.cp-reset { margin-top: var(--gap-pane); }
.cp-locked-banner { margin: var(--gap-peer) 0 var(--gap-section); padding: var(--gap-section); border: 1px solid var(--warning); border-radius: var(--radius-control); background: color-mix(in oklch, var(--warning) 12%, var(--surface-page)); }
/* Layout-shift fix (audit Run 17 Frontend): reserve space for a cover image
   whose class didn't already set an aspect-ratio / fixed size. */
.proj-image-preview img { width: 120px; height: 120px; object-fit: cover; }

/* ---- Discover search: how well a result matched -------------------------
   Two surfaces, doing two different jobs (db/discover.rs, migration 179).

   .results-tier-break is the single heading, and it sits exactly where the
   claim it makes turns true: above it every row holds at least one word the
   searcher typed, below it none of them do. .row-match-note is the per-row
   half, "Matched 3 of 5 words", because coverage varies row to row and one
   page can hold a 4-of-5 beside a 1-of-5.

   Both are deliberately quiet. They explain a result the reader is already
   looking at; competing with the title would make search feel like it is
   apologising. Muted colour and small type, no accent, no border of their own
   beyond the rule that separates the tiers. */
.results-tier-break {
  display: flex;
  align-items: baseline;
  gap: var(--gap-peer);
  flex-wrap: wrap;
  padding: var(--gap-section) var(--gap-section) var(--gap-peer);
  border-top: 1px solid var(--border);
  background: var(--surface-page);
}

/* .results-table sets border-top: none and lets .table-row draw the rules, so
   the break supplies its own top border. Mid-list that sits against the
   preceding row's border-bottom and reads as one heavier 2px rule, which is
   wanted here: it is a section change, not another row. At the top of an
   all-fuzzy page there is no preceding row, and the same border supplies the
   table's missing top edge. */
.results-tier-label {
  font-family: var(--font-display);
  font-weight: bold;
  font-size: var(--text-fine);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--content);
}

.results-tier-hint {
  font-size: var(--text-fine);
  color: var(--content-muted);
}

/* The grid is `repeat(auto-fill, minmax(280px, 1fr))`, so without this the
   heading takes one card's slot and the tiers interleave visually. */
.results-container.results-grid .results-tier-break {
  grid-column: 1 / -1;
  padding-left: 0;
  padding-right: 0;
  background: none;
}

/* In list view this rides inside .row-info, under the creator line, not as
   another child of .table-row-link: that is a fixed five-column grid and a
   sixth child would invent a column and shift every row that carried one. */
.row-match-note {
  font-family: var(--font-mono);
  font-size: var(--text-fine);
  color: var(--content-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Grid cards have room to breathe; give the note its own line under the meta. */
.grid-card .row-match-note {
  display: block;
  margin-top: var(--gap-bound);
}

/* The narrow list layouts drop columns rather than wrap, and .row-info is the
   column that survives. Keeping the note there would crowd the title on a
   phone, where the tier heading above still carries the important half. */
@media (max-width: 599px) {
  .table-row .row-match-note { /* respec-ok: hiding a cell at a breakpoint. The
     generated sheet describes one `.table-row`; which of its children survive a
     narrow viewport is this page's call, not the design system's. */ display: none; }
}