/* 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
   `@container (max-width: 479px)` rule loads later than this file, 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%;
}