/* One compact policy for native activities and their same-origin frames. */
[data-activity-layout] { --activity-safe-bottom: env(safe-area-inset-bottom, 0px); }
[data-activity-layout], [data-activity-layout] * { box-sizing: border-box; }
[data-activity-compact] { min-width: 0; max-width: 100%; }
[data-activity-compact]#page { padding-top: 50px; }
[data-activity-compact] [data-activity-stage],
[data-activity-compact] [data-activity-flow] > *,
[data-activity-compact] [data-activity-grid] > * { min-width: 0; max-width: 100%; }
[data-activity-compact] [data-activity-page] { padding-top: 8px; padding-bottom: 24px; }
[data-activity-compact] [data-activity-heading] { font-size: 28px; line-height: 1.1; margin: 0 0 6px; }
[data-activity-compact] [data-activity-intro] { font-size: 15px; line-height: 1.35; margin: 0 0 10px; }
[data-activity-compact] button { min-height: 44px; }
[data-activity-compact] [data-activity-grid] { display: grid; gap: 8px; }
[data-activity-compact] [data-activity-grid="2"] { grid-template-columns: repeat(var(--activity-columns, 2), minmax(0, 1fr)); }
[data-activity-compact] [data-activity-grid="3"] { grid-template-columns: repeat(var(--activity-columns, 3), minmax(0, 1fr)); }
[data-activity-compact] [data-activity-grid="4"] { grid-template-columns: repeat(var(--activity-columns, 2), minmax(0, 1fr)); }
[data-activity-compact] [data-activity-flow] { display: flex; flex-direction: column; align-items: stretch; gap: 10px; }
[data-activity-compact] [data-activity-flow] > :not([data-activity-visual]) { width: 100%; }
[data-activity-compact] [data-activity-visual],
[data-activity-compact] [data-activity-choice] {
    height: var(--activity-visual-height, auto);
    min-height: 0;
    flex-shrink: 0;
}
[data-activity-compact] [data-activity-visual]:not([data-activity-visual="portrait"]) > svg,
[data-activity-compact] [data-activity-visual] > canvas { width: 100%; height: 100%; object-fit: contain; }
[data-activity-compact] [data-activity-visual="card"] { padding: 6px; aspect-ratio: auto; }
[data-activity-compact] [data-activity-picture] {
    display: flex; align-items: center; justify-content: center;
    width: 100%; height: 100%; min-height: 0;
}
[data-activity-compact] [data-activity-picture] img,
[data-activity-compact] img[data-activity-picture] { width: 100%; height: 100%; object-fit: contain; }
[data-activity-compact] [data-activity-word] {
    aspect-ratio: auto; min-height: 44px; height: auto; padding: 6px 3px;
    font-size: 16px; line-height: 1.15;
}
[data-activity-compact] [data-activity-word] > span { font-size: inherit; }
[data-activity-compact] [data-activity-feedback] { min-height: 24px; margin-top: 7px; padding-top: 0; font-size: 16px; }
[data-activity-compact] [data-activity-prompt] { min-height: 0; padding: 9px; margin-bottom: 8px; }
[data-activity-compact] [data-activity-prompt-text] { font-size: 21px; line-height: 1.2; }
[data-activity-compact] [data-activity-label] { font-size: 16px; padding: 3px 5px; }
[data-activity-compact] [data-activity-progress] { margin-bottom: 8px; }
[data-activity-compact] [data-activity-frame] { min-height: 0; max-width: 100%; }
[data-activity-compact] [data-activity-figure] { height: calc(100% - 12px); max-height: 100%; width: auto; max-width: 100%; object-fit: contain; }
[data-activity-compact] [data-activity-figure="weather"] { height: calc(100% - 70px); width: calc((var(--activity-visual-height, 240px) - 70px) * 210 / 275); margin-bottom: 4px; }
[data-activity-compact] [data-activity-figure="missing"] { width: calc((var(--activity-visual-height, 370px) - 12px) * 260 / 370); }
[data-activity-compact] [data-activity-controls] { padding: 8px; }
[data-activity-compact] [data-activity-controls] h2 { font-size: 21px; margin: 0 0 6px; }
[data-activity-compact] [data-activity-choice] { min-height: 64px; padding: 5px; gap: 3px; display: flex; flex-direction: column; align-items: center; justify-content: center; font-size: 16px; line-height: 1.15; }
[data-activity-compact] [data-activity-choice] > span { font-size: inherit; max-width: 100%; }
[data-activity-compact] [data-activity-choice] svg,
[data-activity-compact] [data-activity-choice] img { width: min(100%, calc((var(--activity-visual-height, 80px) - var(--activity-label-space, 36px)) * var(--activity-ratio, 1))); height: calc(var(--activity-visual-height, 80px) - var(--activity-label-space, 36px)); object-fit: contain; }
[data-activity-compact] [data-activity-toolbar] { gap: 6px; flex-wrap: wrap; margin-bottom: 6px; }
[data-activity-compact] [data-activity-legacy-stage] { width: 100%; max-width: 100%; }
[data-activity-compact] [data-activity-visual="legacy"] {
    width: min(100%, calc(var(--activity-visual-height) * var(--activity-ratio)));
}
[data-activity-compact] [data-activity-visual="legacy"] > iframe {
    position: absolute; inset: 0; width: 100%; height: 100%;
}

@media (orientation: landscape) and (min-width: 600px) {
    [data-activity-compact][data-activity-legacy]#page { padding-top: 0; }
    [data-activity-compact] [data-activity-flow] {
        display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        align-items: start; gap: 10px;
    }
    [data-activity-compact] [data-activity-grid="4"] { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* Fit the artwork itself to both dimensions; preserve its drawing proportions. */
[data-activity-compact] [data-activity-visual="card"],
[data-activity-compact] [data-activity-visual="scene-card"],
[data-activity-compact] [data-activity-visual="scene"],
[data-activity-compact] [data-activity-visual="legacy"] {
    width: min(100%, calc(var(--activity-visual-height, 100000px) * var(--activity-ratio, 1)));
    justify-self: center;
    align-self: center;
}
[data-activity-compact] [data-activity-flow][data-activity-arrangement="stacked"] {
    display: flex; flex-direction: column; align-items: stretch;
}
[data-activity-compact] [data-activity-flow][data-activity-arrangement="beside"] {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: start;
}