/* our-choices.css — what WE think looks good, and nothing else (SPI-625).

   THE ONLY @layer IN THE PROJECT. Everything inside a layer loses to
   everything outside one, whatever the selectors and whichever file loads
   last. The Site's values, a person's settings and project_styles.css are in
   no layer, so each of them always beats a line in here. That is this file's
   whole job: the look of a thing nobody has set yet.

   Rules: only settings that exist in module-settings.json, on the same parts;
   plain selectors; no !important; exactly one layer. */

@layer ours {

  /* ── the reset (SPI-629): moved here from accid-reset.css, whose @import in
     accid-styles.css is commented out. Unlayered it beat every margin and
     padding in this layer; here it is the floor under our choices instead.
     The declarations are unchanged. */
  * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }

  /* ── THE SITE'S ELEMENT RULES (SPI-629, Shawn 2026-10-06): "stop pulling
     initial settings from the code". These only say "this element uses the
     Site's value"; the VALUES are the --site-* names page-renderer writes at
     :root, outside this layer, so a Site setting still wins. Here, inside the
     layer, plain CSS sorts the rest out: .accid-nav-link beats `a` by being
     more specific, and every rule outside the layer beats all of these.
     A blank name makes its declaration fall back to what CSS gives an unset
     property (margin 0, no border, no shadow, inherited text) — the same
     values the old fallbacks in page-renderer.js spelled out. Each side is
     its own property, so one blank side cannot cancel the others. */
  body {
    font-family: var(--site-body-family); font-size: var(--site-body-size);
    color: var(--site-body-color); text-align: var(--site-body-align);
    font-weight: var(--site-body-weight); font-style: var(--site-body-style);
    line-height: var(--site-body-line-height); letter-spacing: var(--site-body-letter-spacing);
    text-transform: var(--site-body-transform); text-decoration: var(--site-body-decoration);
    text-shadow: var(--site-body-shadow); writing-mode: var(--site-body-writing-mode);
    word-break: var(--site-body-word-break);
  }
  /* THE SITE CONTENT AREA's starting values (moved out of accid-layers.css,
     SPI-642): no top/bottom gutter, 24px at the sides (shrinking on narrow
     screens by the clamp in accid-layers.css), the column centred. The Site
     panel's Padding and Align (site.css) override them. */
  :root {
    --site-padding-top: 0; --site-padding-right: 24px;
    --site-padding-bottom: 0; --site-padding-left: 24px;
    --site-content-align: 0 auto;
  }
  /* THE NAV's own starting padding — the box 8px 20px, each link 6px 10px.
     It used to borrow the Site gutter (accid_grid.css); now it is the nav's,
     and the nav's own settings beat it (SPI-642). */
  .module-navigation { padding: 8px 20px; }
  :root { --nav-link-padding: 6px 10px; }
  /* MARKDOWN DOCUMENTS — the starting look of every role (moved out of
     modules-markdown.css's var() fallbacks, SPI-642). A content template sets
     the same names on <body>, which beats these. */
  :root {
    --mddoc-leading: 1.6;
    --mddoc-body-size: 1em;
    --mddoc-body-space: 0 0 1em;
    --mddoc-lead-size: 1.15em;
    --mddoc-lead-leading: 1.5;
    --mddoc-lead-opacity: .9;
    --mddoc-lead-space: 0 0 1.2em;
    --mddoc-list-space: 0 0 1em;
    --mddoc-list-indent: 1.5em;
    --mddoc-list-item-space: .25em 0;
    --mddoc-nested-indent: 1.5em;
    --mddoc-task-indent: .25em;
    --mddoc-task-accent: currentColor;
    --mddoc-task-done-opacity: .6;
    --mddoc-quote-space: 0 0 1em;
    --mddoc-quote-pad: .25em 0 .25em 1em;
    --mddoc-quote-border: 3px solid currentColor;
    --mddoc-quote-opacity: .8;
    --mddoc-pullquote-space: 1.6em 0;
    --mddoc-pullquote-size: 1.35em;
    --mddoc-pullquote-leading: 1.35;
    --mddoc-pullquote-align: center;
    --mddoc-pullquote-opacity: .85;
    --mddoc-callout-space: 1.2em 0;
    --mddoc-callout-pad: .9em 1.1em;
    --mddoc-callout-border: 3px solid currentColor;
    --mddoc-callout-radius: 4px;
    --mddoc-callout-bg: var(--c6-a10);
    --mddoc-tone-note: var(--c5-r45);
    --mddoc-tone-tip: var(--c3-r30);
    --mddoc-tone-warning: var(--c1-r20);
    --mddoc-figure-space: 1.6em 0;
    --mddoc-figure-align: center;
    --mddoc-caption-size: .875em;
    --mddoc-caption-opacity: .75;
    --mddoc-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    --mddoc-code-size: .9em;
    --mddoc-code-inline-bg: var(--c6-a10);
    --mddoc-code-space: 0 0 1em;
    --mddoc-code-pad: 14px 16px;
    --mddoc-code-radius: 6px;
    --mddoc-code-bg: var(--c6-a10);
    --mddoc-code-block-size: .875em;
    --mddoc-table-space: 0 0 1em;
    --mddoc-table-pad: 6px 10px;
    --mddoc-table-border: 1px solid var(--c6-a30);
    --mddoc-divider-border: 1px solid currentColor;
    --mddoc-divider-opacity: .25;
    --mddoc-divider-space: 2em 0;
  }
  /* a document's first and last block sit flush (moved from
     modules-markdown.css), and the six heading levels read the Site's
     heading values (moved too). Trims first, so a Site heading margin still
     wins, as it did. A blank value gives what CSS gives: inherited family,
     colour and line height. */
  .mddoc > *:first-child { margin-top: 0; }
  .mddoc > *:last-child  { margin-bottom: 0; }
  :root h1, :root [data-role="h1"] {
    font-size: var(--site-h1-size); font-weight: var(--site-h1-weight); font-family: var(--site-h1-family);
    color: var(--site-h1-color); text-transform: var(--site-h1-transform); line-height: var(--site-h1-leading);
    margin: var(--site-h1-margin);
  }
  :root h2, :root [data-role="h2"] {
    font-size: var(--site-h2-size); font-weight: var(--site-h2-weight); font-family: var(--site-h2-family);
    color: var(--site-h2-color); text-transform: var(--site-h2-transform); line-height: var(--site-h2-leading);
    margin: var(--site-h2-margin);
  }
  :root h3, :root [data-role="h3"] {
    font-size: var(--site-h3-size); font-weight: var(--site-h3-weight); font-family: var(--site-h3-family);
    color: var(--site-h3-color); text-transform: var(--site-h3-transform); line-height: var(--site-h3-leading);
    margin: var(--site-h3-margin);
  }
  :root h4, :root [data-role="h4"] {
    font-size: var(--site-h4-size); font-weight: var(--site-h4-weight); font-family: var(--site-h4-family);
    color: var(--site-h4-color); text-transform: var(--site-h4-transform); line-height: var(--site-h4-leading);
    margin: var(--site-h4-margin);
  }
  :root h5, :root [data-role="h5"] {
    font-size: var(--site-h5-size); font-weight: var(--site-h5-weight); font-family: var(--site-h5-family);
    color: var(--site-h5-color); text-transform: var(--site-h5-transform); line-height: var(--site-h5-leading);
    margin: var(--site-h5-margin);
  }
  :root h6, :root [data-role="h6"] {
    font-size: var(--site-h6-size); font-weight: var(--site-h6-weight); font-family: var(--site-h6-family);
    color: var(--site-h6-color); text-transform: var(--site-h6-transform); line-height: var(--site-h6-leading);
    margin: var(--site-h6-margin);
  }
  a { color: var(--site-link); }
  a:visited { color: var(--site-link-visited); }
  a:hover { color: var(--site-link-hover); }
  .module-wrapper-v2 {
    margin-top: var(--site-space-around-top); margin-right: var(--site-space-around-right);
    margin-bottom: var(--site-space-around-bottom); margin-left: var(--site-space-around-left);
    border-radius: var(--site-radius); box-shadow: var(--site-shadow);
    border-top-width: var(--site-border-width-top); border-right-width: var(--site-border-width-right);
    border-bottom-width: var(--site-border-width-bottom); border-left-width: var(--site-border-width-left);
    border-style: var(--site-border-style); border-color: var(--site-border-color);
  }

  /* ── the Site's six heading sizes, so a size picked as H1-H6 means something
     before the Site sets them. site.css is outside the layer and beats these. */
  :root {
    --site-h1-size: 3rem;     --site-h2-size: 2.25rem; --site-h3-size: 1.75rem;
    --site-h4-size: 1.375rem; --site-h5-size: 1.125rem; --site-h6-size: 1rem;
  }

  /* ── navigation links (SPI-629): the only rule that paints them when nothing
     is stored. They take the body text colour (inherit: this site sets no
     --site-body-color, so the text colour is what the page inherits). Hover
     keeps it, on an r15 fill of c3. Active is the c3 pair: --c3 under --on-c3,
     made to be read together. Stored nav settings, emitted outside this
     layer, beat all of these.
     The nav is a module, so it beats the Site: the Site's `a` rule is in this
     layer too (above), and .accid-nav-link is more specific than `a`.
     The dropdown is moved to <body> when it opens, so its links inherit the
     body text; it takes the page surface under them, the same pair as the
     page itself. */
  .accid-nav-link { color: inherit; background: transparent; }
  .accid-nav-link:hover,
  .accid-nav-item:focus-within > .accid-nav-link { color: inherit; background: var(--c3-r15); }
  .accid-nav-link.is-current { color: var(--on-c3); background: var(--c3); }
  .accid-nav-submenu { background: var(--page-surface); box-shadow: 0 6px 18px var(--c6-a20); }

  /* ── the image piece (SPI-629 Part 2): text and box. With nothing stored
     the picture sits on the left, 200px wide, 1em from the text. Position,
     Size and Gap, stored, are written outside this layer and win. The hero's
     logo reads the same gap name; it has no starting gap, so it is unchanged. */
  [data-field="image"] { float: left; margin-inline-end: var(--image-gap); --image-gap: 1em; }
  [data-field="image"] img { width: 200px; }
  [data-field="logo"] { margin-inline-end: var(--image-gap); }

  /* ── catalogue card pictures (SPI-630): one standard shape, 4:3, cropped to
     fill, centred. On the picture itself, so the frame's padding does not bend
     it. The generated word images are 400 x 300, so they show whole. The
     catalogue's `picture` part (aspectRatio, objectFit, objectPosition),
     stored, is written outside this layer and wins. */
  .accid-catalogue-img img { aspect-ratio: 4 / 3; object-fit: cover; object-position: center; }

  /* ── how many columns, when nothing is stored (SPI-631). Both grids read
     --grid-columns; a stored Columns value is written on the same element,
     outside this layer, and wins. Gallery: 3. Catalogue cards: as many 260px
     columns as fit (4 at 1280 wide), the look it has always had. */
  .gx-out-grid { --grid-columns: 3; }
  .gx-out-items { --grid-columns: 3; gap: 10px; }
  /* a slideshow's thumbnail strip: 80px thumbnails (thumbnailSize, stored, wins) */
  .gallery-thumbnails, .accid-items-strip { --thumb-size: 80px; }
  /* masonry's spacing when no Gap is stored: 10px across and down. */
  .gx-out-masonry { column-gap: 10px; --item-gap: 10px; }
  .accid-catalogue-grid { --grid-columns: auto-fill; }

  /* ── search results (search-module.js): the starting look. Structure is in
     accid-items.css. Moved out of the <style> the module injected; same
     values. */
  .accid-search-module { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; max-width: 1100px; }
  .asm-strip { gap: 12px; padding: 12px 2px 4px; }
  .asm-card { flex-basis: 168px; border: 1px solid var(--neutral-r12); border-radius: 10px;
    background: var(--page-surface); transition: box-shadow .15s, transform .15s; }
  .asm-card:hover { box-shadow: 0 6px 18px var(--c6-a10); transform: translateY(-2px); }
  .asm-thumb { aspect-ratio: 16 / 10; background-color: var(--neutral-r12); }
  .asm-body { padding: 9px 11px; }
  .asm-title { font-weight: 700; font-size: 13px; line-height: 1.25; }
  .asm-title mark { background: var(--c2-r12); }
  .asm-meta { font-size: 10px; color: var(--neutral-r30); margin-top: 4px; text-transform: uppercase; letter-spacing: .04em; }
  .asm-foot { padding: 4px 2px 8px; }
  .asm-more { color: var(--c5-r70); font-weight: 700; font-size: 12px; text-decoration: none; }
  .asm-more:hover { text-decoration: underline; }

  /* ── the Items module: its starting look. 3 columns, 10px apart; pictures
     4:3, cropped to fill, centred — except in masonry, where each keeps its
     own shape, and in the slideshow, where the whole picture shows. Anything
     stored on the module (its list and picture parts) beats these. */
  .accid-items-list { --grid-columns: 3; gap: 10px; --item-gap: 10px; }
  .accid-items-list [data-field="picture"] { aspect-ratio: 4 / 3; object-fit: cover; object-position: center; }
  .accid-items-list[data-view="masonry"] [data-field="picture"] { aspect-ratio: auto; }
  .accid-items-list[data-view="slideshow"] [data-field="picture"] { aspect-ratio: 16 / 9; object-fit: contain; }
  /* the slideshow's controls: round arrows and a counter in the c6 overlay
     pair, the strip as a soft band, the current thumbnail ringed in c5; a
     slide moves on every 3 seconds when Auto-advance is on (Every, stored,
     wins). */
  .accid-items { --items-advance-every: 3000; }
  /* list: a 120px picture beside its text; compact: a quiet address and
     a small Copy button above the list */
  .accid-items-list[data-view="list"] { --items-list-picture: 120px; }
  /* list and compact start at one column; Columns, set, changes them too */
  .accid-items-list:is([data-view="list"], [data-view="compact"]) { --grid-columns: 1; }
  .accid-items-pager { gap: 4px; margin-top: 12px; }
  .accid-items-pager button { min-width: 32px; padding: 4px 8px; border: 1px solid var(--neutral-r15); border-radius: 6px; background: var(--page-surface); color: inherit; }
  .accid-items-pager button.is-current { background: var(--c3); color: var(--on-c3); border-color: var(--c3); }
  .accid-items-list[data-view="compact"] { row-gap: 4px; }
  .accid-items-list[data-view="compact"] [data-field="title"] { font-size: 1rem; margin: 0; }
  .accid-items-list[data-view="compact"] [data-field="address"] { font-size: .85rem; color: var(--neutral-r45); }
  .accid-items-copy { margin-bottom: 8px; padding: 4px 10px; border: 1px solid var(--neutral-r15); border-radius: 6px; background: var(--page-surface); color: inherit; cursor: pointer; }
  .accid-items-prev, .accid-items-next { width: 40px; height: 40px; margin: 0 8px; border: 0; border-radius: 50%;
    background: var(--c6-a70); color: var(--page-surface); font-size: 24px; line-height: 40px; }
  .accid-items-count { margin: 8px; padding: 2px 10px; border-radius: 12px; background: var(--c6-a70); color: var(--page-surface); font-size: 12px; }
  .accid-items-strip { gap: 10px; padding: 10px; margin-top: 10px; background: var(--neutral-r12); border-radius: 8px; }
  .accid-items-thumb { border: 3px solid transparent; border-radius: 4px; background: var(--page-surface); }
  .accid-items-thumb.is-active { border-color: var(--c5-r45); }

  /* ── hero ── its three texts are plain divs, so with nothing set they would
     all be body size. The hero's own ink is the one made for its default c3
     background, on .module-hero (the hero's own root): the wrapper outside it is
     .module-wrapper-v2, whose unlayered colour rule would beat this layer.
     The texts inherit it, and a colour set in the panel beats it. */
  [data-accid-type="hero"] .module-hero { color: var(--on-c3); }
  /* The hero's starting colour is its colour layer, ::before on .module-hero,
     the hero's own box, where its background layers go (module-settings.json
     hero styles_map.background_host). Not the module itself: in edit mode that
     also holds the hero's settings bar. A colour or gradient set in the panel replaces it;
     an image sits above it; clear removes it (the emitter writes
     ::before { background: none }). */
  [data-accid-type="hero"] .module-hero { isolation: isolate; }
  [data-accid-type="hero"] .module-hero::before {
    content: ""; position: absolute; inset: 0; z-index: -2;
    border-radius: inherit; pointer-events: none;
    background: var(--c3);
  }
  [data-accid-type="hero"] [data-field="headline"]    { font-size: 2em; }
  [data-accid-type="hero"] [data-field="subheadline"] { font-size: 1.17em; }
  [data-accid-type="hero"] [data-field="tagline"]     { font-size: .83em; }

}