/* 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;
    box-sizing: border-box;   /* these two were inline on every container */
    width: 100%;              /* (container-module.js _boxStyle), 2026-10-14 */
}

/* An auto-stack always stacks, in view and edit: a column that does not wrap
   (a wrapping column sizes from its children's max-content height). Was the
   inline _stackStyle in container-module.js. */
.module-container--stack,
.module-container.module-container--stack {
    box-sizing: border-box;
    width: 100%;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
}

/* 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%;
    }
}
*/