/* 12:32PM Oct 13 - 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; exactly one layer. It holds real values and reads
   nothing: no var(--site-...) (CURRENT RULES 4, Shawn 2026-10-09).

   The faces of the two families below, so the page has them from the CSS
   alone (CURRENT RULES 5): nothing reads the Site store to load them. */
@import url("../accid-webfonts/metropolis/stylesheet.css");
@import url("../accid-webfonts/bebasneue/stylesheet.css");

@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 STARTING TEXT, HEADINGS AND LINKS, AS REAL VALUES (CURRENT RULES
     4, 2026-10-09). These were pointers at --site-* names; each is now the
     value style-guide-b2 painted with them: the family and transform the
     Site had set, the six sizes below. A pointer that resolved to nothing
     painted what CSS gives an unset property, so it is simply gone — except
     where the browser's own sheet would then show through: a heading's
     weight and a link's colour, which are written as `inherit`, what they
     were. The Site, a page and a module write plain rules outside this layer
     and beat every line here. */
  body { font-family: "Metropolis", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;}
  /* THE CONTENT CONTAINER's starting look (the column inside the Site): no
     top/bottom gutter, 24px at the sides, shrinking on a narrow screen (12px
     floor, 5vw), centred. The Site's and a Page's content container settings
     are real properties on that column and beat these. */
  .accid-layer-wrap { margin: 0 auto; padding: 0 clamp(12px, 5vw, 24px); }
  /* 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; }
  /* Each link's starting radius and size, moved out of accid_grid.css, where
     they were the fallbacks of --site-radius and --site-body-size, which
     nothing writes (Shawn, 2026-10-13). */
  :root { --nav-link-radius: 4px; }
  .accid-nav-link { font-size: 14px; }
  /* CONTAINER FLOW — a container lays its columns out side by side and wraps
     them, unless its own settings say otherwise: real values on the flex
     element itself (2026-10-14; the --flow-* hop is gone). Direction,
     justify, align and gap need none: unset is the CSS initial value. */
  .module-container, .container-children-area { display: flex; flex-wrap: wrap; }
  /* 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). */
  .mddoc > *:first-child { margin-top: 0; }
  .mddoc > *:last-child  { margin-bottom: 0; }
  :root h1, :root [data-role="h1"] { font-size: 3rem; }
  :root h2, :root [data-role="h2"] { font-size: 2.25rem; }
  :root h3, :root [data-role="h3"] { font-size: 1.75rem; }
  :root h4, :root [data-role="h4"] { font-size: 1.375rem; }
  :root h5, :root [data-role="h5"] { font-size: 1.125rem; }
  :root h6, :root [data-role="h6"] { font-size: 1rem; }
  :root :is(h1, h2, h3, h4, h5, h6, [data-role="h1"], [data-role="h2"], [data-role="h3"],
            [data-role="h4"], [data-role="h5"], [data-role="h6"]) {
    font-family: "bebasneue", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; text-transform: uppercase; font-weight: inherit;
  }
  a { color: inherit; }

  /* ── the six heading sizes as names too, for the hero's size choice and the
     panel only (CURRENT RULES 4). Plain values; the Site's h*_size writes the
     same names in site.css, outside this layer. */
  :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 box (search-module.js): the starting look. Structure is in
     modules-misc.css. */
  .accid-search-box { padding: 12px 0; }
  .accid-search-input { padding: 10px 16px; border: 1px solid var(--neutral-r30); border-radius: 999px;
    background: var(--page-surface); color: inherit; font: inherit; }
  .accid-search-button { padding: 10px 20px; border: 0; border-radius: 999px;
    background: var(--c5-r45); color: var(--on-c5); font: inherit; font-weight: 600; cursor: pointer; }
  .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, 8px corners — 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; }
  /* the image module: a picture fills its frame. With no ratio set the frame
     IS the picture's shape, so nothing is cut; with one set (crop to 16 / 9,
     4 / 3, 1 / 1…), the picture is cropped to it, centred. Fit and Position on
     the module's image part beat this. */
  .module-image img { object-fit: cover; object-position: center; }
  .accid-items-list [data-field="picture"] { aspect-ratio: 4 / 3; object-fit: cover; object-position: center; border-radius: 8px; }
  .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 circle shape: category rings 2px wide, 2px apart; tag squares 8px,
     3px apart. A term with no line in the project's terms.css shows neutral. */
  .accid-item-ring { border-width: 2px; padding: 2px; }
  .accid-item-circle { --item-pip-size: 8px; --item-pip-gap: 3px; }
  [data-term] { --term: var(--neutral-r30); }
  /* The display pills' rows (accid-pill.js): under the page title, and under
     an item. */
  .accid-page-header .accid-term-pills { margin-top: 6px; }
  .accid-item > .accid-term-pills { margin-top: 4px; }
  /* 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); }

  /* ── the button's own look, when nothing is set on its tab (SPI-640 ruling,
     2026-10-09): what b2's button painted, as the button's defaults — never
     the main panel. Set on the module, where its tab writes the same names,
     outside this layer, and wins. */
  [data-accid-type="button"] {
    --button-fill: transparent;
    --button-label-color: var(--on-page);
    --button-font: "Metropolis", Helvetica, Arial, sans-serif;
    --button-font-size: 16px;
    --button-weight: 600;
    --button-padding: 12px 30px;
    --button-radius: 4px;
    --button-border-width: 0;
    --button-border-color: transparent;
    --button-hover-fill: transparent;
    --button-hover-label-color: var(--on-page);
  }

  /* ── box: the border is on the module (solid 1px); the box's colour
     (--box-color, its own tab) is the bar and the border, with the page surface
     as the title's text — what a box painted. The main panel's border and
     margin, and the title part, override these. */
  [data-accid-type="box"] {
    --box-color: var(--neutral-r70);
    border-width: 1px;
    border-style: solid;
    margin: 8px 0;
  }
  [data-accid-type="box"] .accid-box-title {
    color: var(--page-surface);
  }

  /* ── calendar: tall enough to show a month, the standard radius with the
     embed clipped to it (the old panel's 8px). */
  [data-accid-type="calendar"] {
    --calendar-height: 600px;
    border-radius: 8px;
    overflow: hidden;
  }

  /* ── the link's own look, when nothing is set on its tab (like the button):
     what a link painted — the page's text colour, underlined, at body size —
     as the link's defaults, never the main panel. */
  [data-accid-type="link"] {
    --link-fill: transparent;
    --link-label-color: var(--on-page);
    --link-font: "Metropolis", Helvetica, Arial, sans-serif;
    --link-font-size: 16px;
    --link-weight: 400;
    --link-underline: underline;
    --link-radius: 0;
    --link-border-width: 0;
    --link-border-color: transparent;
    --link-hover-fill: transparent;
    --link-hover-label-color: var(--on-page);
  }

  /* ── 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; }
  /* The hero's starting box (was inline in hero-module.js, 2026-10-14). */
  [data-accid-type="hero"] .module-hero { min-height: 300px; border-radius: 8px; margin-bottom: 20px; }
  [data-accid-type="hero"] .hero-row { padding: 20px; }
  [data-accid-type="hero"] [data-field="logo"] img { filter: drop-shadow(0 2px 4px var(--c6-a30)); }
  /* An expand's starting preview height (was the code's '100' when blank). */
  .accid-expand { --expand-preview: 100px; }

}