/* =============================================================
   canvas.css  ·  shared/  ·  standalone
   Implements DESIGN_RULES R1, R2, R3, R4, R5, R8, R14.
   - R1: one canvas wraps everything
   - R2: visibly rounded corners on every viewport
   - R3: small frame gutter around the canvas
   - R4: section heights are percentage-based, never flex
   - R5: canvas split is 10 / 80 / 10 (header / main / footer)
   - R8: layer-0 canvas never moves (no rubber-band, no address-bar drift)
   - R14: content NEVER drives container size
   Depends on: tokens.css (for the CSS variables it consumes).
   ============================================================= */

html,
body {
    background: var(--frame);
    color: var(--ink);
    font-family: var(--font-sans);
    font-size: 14px;
}

/* R8: lock html + body whenever a canvas-root is present.
   Also Layer 2 of the no-zoom triple lock — touch-action: pan-x pan-y
   blocks pinch-to-zoom while keeping native horizontal/vertical scroll
   working (the carousel needs pan-x). Without this, iOS still zooms
   despite the viewport meta tag. */
html:has(.canvas-root),
body:has(.canvas-root) {
    overflow: hidden;
    overscroll-behavior: none;
    touch-action: pan-x pan-y;
}

/* R8: fixed wrapper anchored to visual viewport (NOT body) */
.frame {
    position: fixed;
    inset: 0;
    padding: var(--gutter);
    overflow: hidden;
    overscroll-behavior: none;
    touch-action: pan-x pan-y;
}

/* R1, R2, R5: rounded canvas, hosts the 10/80/10 grid */
.canvas-root {
    height: 100%;
    width: 100%;
    background: var(--canvas);
    border: 1px solid var(--brand-active);          /* bright-green canvas outline */
    border-radius: var(--canvas-radius);
    overflow: hidden;
    touch-action: pan-x pan-y;       /* Layer 2 of no-zoom triple lock */

    /* R4 + R5: percentage rows, never flex */
    display: grid;
    grid-template-rows: 10% 80% 10%;
}

/* R5: header band — top 10%
   position+z-index lift the header above main so its drop-shadow lands
   on top of main. A bright-green hairline separates header from main. */
.canvas-header {
    position: relative;
    z-index: 1;
    background: var(--header-bg);
    /* no border-bottom: subheader continues the header band visually */
    box-shadow: 0 6px 10px -4px rgba(0, 0, 0, 0.45);
    overflow: hidden;
}

/* R5: main band — middle 80%, scrolls internally (R8) */
.canvas-main {
    background: var(--main-bg);
    overflow-y: auto;
    overflow-x: hidden;
    min-height: 0;            /* R14: required so % row clips correctly */
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
}

/* R5: footer band — bottom 10%
   Mirrors the header: lifted above main, casts shadow upward,
   bright-green hairline separates footer from main. */
.canvas-footer {
    position: relative;
    z-index: 1;
    background: var(--footer-bg);
    border-top: 1px solid var(--brand-active);
    box-shadow: 0 -6px 10px -4px rgba(0, 0, 0, 0.45);
    overflow: hidden;
}