/* accid-container.css — THE CONTAINER'S FIXED RULES (SPI-642 item 7, Shawn,
   2026-10-06 21:34). Shipped, hand-written, the same on every site, changed
   only when we change it — so export copies it as-is (SPI-641).

   ONLY what no setting can change lives here. A container's own settings
   (direction, wrap, gap, padding…) are emitted per container and load after
   this sheet, so they still win; our starting values are in our-choices.css.

   ⚠ NOT container.css. A bare `container.css` is the per-site GENERATED file
   cancelled on 2026-09-27 (accid-css-emit.js), and the palette-tokens suite
   flags any {site}-accid/container.css as generated. This one is shipped.

   Linked on its own in brains/index.html, right after accid-layers.css. Each
   rule below was MOVED here; a comment marks where it was. */

/* The container is the positioning context for its own chrome.
   (was accid_grid.css, CONTAINER MODULE, "View mode") */
.module-container {
    position: relative;
}

/* Every column sizes from its border box and may shrink below its content's
   min width — without min-width:0 a long word or a wide image forces the
   column wider than its share. These two were inline on every column
   (container-module.js renderView / renderEdit / the empty container). */
.container-child-slot {
    min-width: 0;
    box-sizing: border-box;
}

/* COLUMN WIDTHS (SPI-645). A column with no pin is a full row; a pinned
   column (class container-col, `--col: N` inline from container-module.js)
   grows in proportion to its share from a basis of 0, so the space left after
   the gaps is shared out in the pinned proportions, wherever the gap was set.
   Two 50% columns plus a gap stay on one row. Was inline on every column:
   `flex: 0 0 calc(N% - gap/count)` with the gap read from data.gap only.
   A column's own border or padding sits OUTSIDE its share now (it was
   inside the old percentage): measured on sg-container-005 (44/28/28, no
   gap), whose two empty columns wear a 1px border each side — 934.6 / 594.7 /
   594.7 became 932.8 / 595.6 / 595.6.
   PHONE STACKING IS KEPT (Shawn, 2026-10-07): responsive.css's unlayered
   `@container (max-width: 479px)` rule outranks .container-col, so pinned
   columns in a container under 479px wide stack. That is what phones should
   do; do not raise .container-col to beat it.
   ⚠ ORDER MATTERS: .container-col must come after .container-child-slot. */
.container-child-slot {
    flex: 0 0 100%;
}
.container-col {
    flex: var(--col) 1 0%;
}

/* Responsive: columns stack on phones — ⚠ MOVED HERE DISABLED, NOT LIVE.
   (was accid_grid.css @media (max-width: 640px); the stage (#moduleContainer)
   and module wrapper lines of that block stayed there.)

   MEASURED 2026-10-06 (SPI-642 item 7a): these lines did NOTHING where they
   were. On styleguide and style-guide-b2 at 480px, view and edit, taking them
   out changed no element. Each one lost the cascade:
     .module-container display:block   lost to modules-styles.css
                                       `display: var(--flow-display, flex)`,
                                       same weight, loaded later;
     .container-child-slot max-width   lost to accid_grid.css's own later
                                       `max-width: calc(100% - 4px)`.
   Moved LIVE into this later-loading sheet they start winning: slots 4px
   wider, containers block, 1284 elements different on the styleguide (view)
   and 4577 (edit). That is a change to the phone layout, not a move.
   RULED (Shawn, 2026-10-07): it stays commented out — it never ran. Kept
   here, word for word, so nothing is lost:

@media (max-width: 640px) {
    .module-container {
        display: block;
    }
    .container-child-slot {
        display: block;
        width: 100%;
        max-width: 100%;
    }
}
*/

/* ⚠ --flow-gap STOPS AT ONE LEVEL, AND IT HAS TO BE SAID OUT LOUD.
   (was modules-styles.css, after the --flow-* reader)
   `gap` is a BOX property, and the ruling is that box values must not leak onto
   children. But --flow-gap cannot simply be non-inheriting: the value is written
   on the module's OWNER ([data-accid-id], the .module-wrapper-v2) while the flex
   box that consumes it is .module-container INSIDE that owner. Inheritance is the
   only thing carrying it those few nodes, so `@property { inherits: false }`
   would stop it reaching its own reader.

   ⚠ THAT WAS TRIED, MEASURED AND REVERTED 2026-09-27 — DO NOT RETRY IT. Shawn
   preferred `@property --flow-gap { syntax:'*'; inherits:false; }` as a one-liner
   with no reset, and in VIEW mode it is flawless: all 60 container gaps identical
   to baseline, both nav leaks closed. In EDIT mode it fails silently and almost
   totally — 66 frames, and 36 of them declared a gap the children-area never got:
       .container-edit-frame     style="--flow-gap: 12px"   (inline, scopeDecls)
       .container-children-area  computed gap: 0px
   Which is exactly what the --flow-* block in modules-styles.css predicts under
   "WHY A PROPERTY AND NOT THE DECLARATION ITSELF": in edit mode a container is
   TWO elements — the frame carries data-accid-id, the children-area carries the
   flow — and only inheritance crosses that boundary. Registering it
   non-inheriting would break all six --flow-* props, not just this one. After
   the switchover it gets worse, not better: the generated rule targets
   [data-accid-id], an ancestor of the flex box in BOTH modes. Inheritance plus
   the one reset below is the only shape that holds in view and edit at once.

   So it inherits, and every module owner RESETS it. Measured when this was
   missing: four nested containers that set no gap of their own went 0px -> 8px,
   12px, 12px, 12px, silently adopting their parent's — which is the same class of
   bug --site-gap was killed for, one layer down.

   An owner that DOES set a gap still wins: its value arrives inline, or in the
   module style block, which loads after this sheet. Unset means 0px. */
.module-wrapper-v2 {
    --flow-gap: initial;
}