/* * shells.css -- 5-tier page shell system per DECISION_LOG.md decision 645. * * Each tier is selected by `body[data-shell=""]` and provides * opinionated chrome for one class of admin page. The tier is set on the * by render_panel_page() based on the CGI's chosen shell template * under templates/shells/. * * Tiers: * explorer - edge-to-edge media browser (assets, galleries, zones) * content - constrained ~1280px form-oriented (settings, inspire, humor) * workflow - top toolbar + queue/detail split-pane (moderation, audit) * dashboard - KPI cards + primary/secondary panels (health, achievements) * editor - hero header + sectioned form + meta-aside (personality detail) * * Cross-tier rules: * - .page-shell is the outer wrapper inside .admin-main * - .page-shell__header is the title row (always 2 columns: heading | actions) * - .page-shell__about is the toggleable about-this-section slot * - Every named region is conditional: shell renders nothing for missing * regions, so a CGI can use only the regions it needs * * Token-aware: never invents colors. Uses the existing --c-text / * --c-text-muted / --c-border / --c-surface / --c-bg / --c-primary tokens * from tokens.css. Spacing uses --sp-* scale. * * Compatibility: the existing .ml-* (legacy media library) and .tx-* * (treatment editor) class families continue to work inside any shell. The * shells provide chrome; the body content is unchanged. */ /* ============================================================================= * Cross-tier base * ===========================================================================*/ .page-shell { display: flex; flex-direction: column; gap: var(--sp-4); width: 100%; } .page-shell__header { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-4); flex-wrap: wrap; } .page-shell__heading { flex: 1 1 auto; min-width: 0; } .page-shell__title { margin: 0; font-size: var(--fs-xl, 22px); font-weight: 650; color: var(--c-text); line-height: 1.25; } .page-shell__subtitle { margin: 4px 0 0; color: var(--c-text-muted); font-size: var(--fs-sm); line-height: 1.4; } .page-shell__actions { display: flex; gap: var(--sp-2); flex-wrap: wrap; flex-shrink: 0; } .page-shell__about { /* The about-panel itself styles its own border/background; this slot is just spacing. */ } .page-shell__body { display: flex; flex-direction: column; gap: var(--sp-4); } /* ============================================================================= * Tier 1: EXPLORER * Edge-to-edge media browser. The CGI owns 100% of body HTML; this tier * simply removes .admin-main padding and lets internal scroll containers * (.ml-grid-pane, etc) take over. * ===========================================================================*/ body[data-shell="explorer"] .admin-main { max-width: none; padding: 0; overflow: hidden; display: flex; flex-direction: column; } /* ============================================================================= * Tier 2: CONTENT * Constrained ~1280px form-oriented. Standard .admin-main padding restored; * .page-shell__header gets a card-like presentation. * ===========================================================================*/ body[data-shell="content"] .admin-main { max-width: none; padding: var(--sp-5) var(--sp-6) 80px; overflow-y: auto; } .page-shell--content { gap: var(--sp-5); } /* Health > Observability is a log/data workspace, not a prose page. Let the * table consume the full admin canvas so scrollbars do not appear mid-page. */ body[data-page="health"] .page-shell--content { max-width: none; } body[data-page="health"] .health-observability { width: 100%; } body[data-page="health"] .health-observability__table { margin-inline: calc(-1 * var(--space-4)); width: calc(100% + (2 * var(--space-4))); max-width: none; } .page-shell--content .page-shell__header { padding-bottom: var(--sp-3); border-bottom: 1px solid var(--c-border); } /* ============================================================================= * Tier 3: WORKFLOW * Top toolbar + split-pane (queue list + detail editor). Both panes scroll * independently. Detail collapses below queue on narrow screens. * ===========================================================================*/ body[data-shell="workflow"] .admin-main { max-width: none; padding: var(--sp-5) var(--sp-6) 0; display: flex; flex-direction: column; overflow: hidden; } .page-shell--workflow { flex: 1; min-height: 0; gap: var(--sp-3); } .page-shell--workflow .page-shell__toolbar { padding: var(--sp-3) 0; border-bottom: 1px solid var(--c-border); } .page-shell__split { display: grid; grid-template-columns: minmax(280px, 380px) 1fr; gap: var(--sp-4); flex: 1; min-height: 0; overflow: hidden; } .page-shell__queue { overflow-y: auto; border-right: 1px solid var(--c-border); padding-right: var(--sp-3); } .page-shell__detail { overflow-y: auto; padding-bottom: 80px; } @media (max-width: 960px) { .page-shell__split { grid-template-columns: 1fr; } .page-shell__queue { border-right: 0; border-bottom: 1px solid var(--c-border); padding-right: 0; padding-bottom: var(--sp-3); } } /* ============================================================================= * Tier 4: DASHBOARD * KPI cards across the top + primary/secondary panels below. * ===========================================================================*/ body[data-shell="dashboard"] .admin-main { max-width: none; padding: var(--sp-5) var(--sp-6) 80px; overflow-y: auto; } .page-shell--dashboard { max-width: var(--width-data); gap: var(--sp-5); } .page-shell__kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--sp-3); } .page-shell__dash-grid { display: grid; grid-template-columns: 2fr 1fr; gap: var(--sp-4); align-items: start; } .page-shell__primary { min-width: 0; } .page-shell__secondary { min-width: 0; } @media (max-width: 1100px) { .page-shell__dash-grid { grid-template-columns: 1fr; } } /* ============================================================================= * Tier 5: EDITOR * Hero header + sectioned form body + sticky meta-aside. * ===========================================================================*/ body[data-shell="editor"] .admin-main { max-width: 1400px; padding: var(--sp-4) var(--sp-6) 80px; overflow-y: auto; } .page-shell--editor { max-width: 1400px; gap: var(--sp-4); } .page-shell__breadcrumb { color: var(--c-text-muted); font-size: var(--fs-sm); } .page-shell__breadcrumb a { color: var(--c-primary); text-decoration: none; } .page-shell__breadcrumb a:hover { text-decoration: underline; } .page-shell__hero { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-4); flex-wrap: wrap; padding: var(--sp-4); background: var(--c-surface); border: 1px solid var(--c-border); border-radius: 12px; box-shadow: 0 1px 0 rgba(15, 23, 42, 0.04); } .page-shell__edit-grid { display: grid; grid-template-columns: 1fr 320px; gap: var(--sp-4); align-items: start; } .page-shell__sections { display: flex; flex-direction: column; gap: var(--sp-3); min-width: 0; } .page-shell__meta { position: sticky; top: var(--sp-4); display: flex; flex-direction: column; gap: var(--sp-3); min-width: 0; } @media (max-width: 1100px) { .page-shell__edit-grid { grid-template-columns: 1fr; } .page-shell__meta { position: static; } } /* Inline "coming next" pill (used by placeholder CGI body content). */ .tx-coming-next { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 999px; background: color-mix(in srgb, var(--c-primary) 12%, transparent); color: var(--c-primary); font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; }