/* Claude-style implementation for Catadores public + authenticated UI. Loaded last on purpose. */

html { background: var(--claude-canvas); }
body {
    background: var(--claude-canvas);
    color: var(--claude-body);
    font-family: var(--font-ui-claude);
}

body:has(.public-page) .main-auth { background: var(--claude-canvas); }
.container { max-width: var(--max-dashboard); }

/* Type: Claude editorial headings with safe fallbacks */
.public-page h1,
.public-page h2,
.landing-hero-copy h1,
.section-title h2,
.hero-banner h1,
.page-header h2,
.detail-title h2 {
    color: var(--claude-ink);
    font-family: var(--font-display-claude);
    font-weight: 500;
    letter-spacing: -0.035em;
    text-transform: none;
}

.public-page p,
.landing-section-copy,
.landing-dashboard-copy,
.form-help,
.empty-state p { color: var(--claude-muted); }

/* General components */
.btn,
.btn-public-calc,
.landing-tab-button,
.landing-dashboard-button {
    border-radius: var(--radius-claude-md) !important;
    font-family: var(--font-ui-claude);
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
}

.btn-primary,
.btn-action,
.btn-public-calc,
.login-submit {
    background: var(--claude-primary) !important;
    color: var(--claude-on-primary) !important;
    border-color: var(--claude-primary) !important;
}
.btn-primary:hover,
.btn-action:hover,
.btn-public-calc:hover,
.login-submit:hover { background: var(--claude-primary-active) !important; }
.btn-secondary,
.btn-outline,
.btn-ghost {
    background: var(--claude-canvas) !important;
    color: var(--claude-ink) !important;
    border: 1px solid var(--claude-hairline) !important;
    box-shadow: none !important;
}

.card,
.form-card,
.chart-card,
.table-container,
.empty-state,
.detail-card,
.confirm-card,
.page-header,
.detail-header {
    background: rgba(250, 249, 245, 0.92) !important;
    border: 1px solid var(--claude-hairline) !important;
    border-left-width: 1px !important;
    border-radius: var(--radius-claude-xl) !important;
    box-shadow: var(--shadow-claude-soft) !important;
}
.card:hover,
a.card:hover { box-shadow: var(--shadow-claude-float) !important; }

/* Authenticated shell */
.header {
    min-height: 64px !important;
    background: rgba(250, 249, 245, 0.94) !important;
    border-bottom: 1px solid var(--claude-hairline);
    box-shadow: none !important;
}
.header .container { max-width: 1480px; }
.logo-image--header { height: clamp(34px, 3.2vw, 44px) !important; }
.nav {
    background: var(--claude-surface-soft) !important;
    border: 1px solid var(--claude-hairline) !important;
    border-radius: var(--radius-claude-lg) !important;
    padding: 0.35rem !important;
}
.nav-link {
    border-radius: var(--radius-claude-md) !important;
    color: var(--claude-muted) !important;
    font-weight: 600 !important;
}
.nav-link:hover { background: var(--claude-surface-card) !important; color: var(--claude-ink) !important; }
.nav-link.active { background: var(--claude-primary) !important; color: var(--claude-on-primary) !important; box-shadow: none !important; }
.nav-user {
    border: 1px solid var(--claude-hairline);
    border-radius: 999px;
    background: var(--claude-canvas);
    padding: 0.3rem 0.65rem;
}
.btn-logout { background: var(--claude-surface-dark) !important; box-shadow: none !important; }
.main:not(.main-auth) {
    background:
        radial-gradient(circle at 18% 0%, rgba(204, 120, 92, 0.12), transparent 34%),
        radial-gradient(circle at 84% 10%, rgba(93, 184, 166, 0.10), transparent 30%),
        var(--claude-canvas) !important;
}
.footer { background: var(--claude-surface-dark) !important; border: 0 !important; }
.footer-text { color: var(--claude-on-dark-soft) !important; }

/* Internal dashboard/cards */
.hero-banner {
    background: var(--claude-surface-dark) !important;
    border: 0 !important;
    color: var(--claude-on-dark) !important;
    padding: clamp(1.5rem, 4vw, 3rem) !important;
}
.hero-banner h1 { color: var(--claude-on-dark) !important; font-size: clamp(2rem, 4vw, 4rem) !important; line-height: 1.04; }
.hero-banner p { color: var(--claude-on-dark-soft) !important; }
.dashboard-grid,
.quick-access-grid { gap: clamp(0.9rem, 2vw, 1.5rem) !important; }
.stats-card,
.stats-card-link {
    min-height: 116px;
    background: var(--claude-surface-card) !important;
}
.stats-icon { background: var(--claude-canvas) !important; box-shadow: none !important; }
.stats-value { color: var(--claude-ink) !important; letter-spacing: -0.04em; }
.quick-access-card {
    min-height: 176px;
    border-radius: var(--radius-claude-xl) !important;
    box-shadow: none !important;
    text-decoration: none !important;
}
.quick-access-card.blue,
.quick-access-card.green,
.quick-access-card.magenta,
.quick-access-card.orange,
.quick-access-card.darkgreen { background: var(--claude-surface-dark) !important; color: var(--claude-on-dark) !important; }
.quick-access-card.yellow { background: var(--claude-primary) !important; color: var(--claude-on-primary) !important; }
.quick-access-card p { color: currentColor; opacity: 0.72; }

/* Forms/tables */
.form-group input[type="text"],
.form-group input[type="email"],
.form-group input[type="password"],
.form-group input[type="number"],
.form-group input[type="date"],
.form-group input[type="file"],
.form-group select,
.form-group textarea,
.search-input,
.search-input-with-icon {
    background: var(--claude-canvas) !important;
    border: 1px solid var(--claude-hairline) !important;
    border-radius: var(--radius-claude-md) !important;
    color: var(--claude-ink) !important;
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus,
.search-input:focus,
.search-input-with-icon:focus {
    border-color: var(--claude-primary) !important;
    box-shadow: 0 0 0 3px rgba(204, 120, 92, 0.16) !important;
}
.data-table th {
    background: var(--claude-surface-soft) !important;
    color: var(--claude-muted) !important;
}
.data-table tbody tr:hover { background: var(--claude-surface-soft) !important; }

/* Public page: Claude warm editorial landing */
.public-page-shell { max-width: var(--max-dashboard) !important; }
.landing-hero-shell,
.landing-story-card,
.landing-points-card,
.landing-participation-card,
.landing-section,
.landing-dashboard-block,
.landing-dashboard-nav-shell,
.landing-highlight-card,
.landing-impact-card,
.landing-visual-card,
.landing-event-card,
.landing-faq-item,
.landing-explainer-card {
    border: 1px solid var(--claude-hairline) !important;
    border-radius: var(--radius-claude-xl) !important;
    box-shadow: none !important;
}
.landing-hero-shell {
    background:
        radial-gradient(circle at 88% 8%, rgba(204, 120, 92, 0.26), transparent 28%),
        var(--claude-canvas) !important;
    border-color: var(--claude-hairline) !important;
    color: var(--claude-ink) !important;
}
.landing-hero-copy h1 { color: var(--claude-ink) !important; max-width: 820px; }
.landing-hero-brand-copy span,
.landing-hero-impact-kicker,
.landing-hero-impact p,
.landing-hero-impact-main span,
.landing-hero-copy .hero-subtitle { color: var(--claude-muted) !important; }
.landing-hero-brand-copy strong,
.landing-hero-impact-main strong { color: var(--claude-ink) !important; }
.landing-hero-badge,
.landing-highlight-label,
.landing-mini-title,
.landing-story-meta {
    color: var(--claude-primary) !important;
    letter-spacing: 0.08em !important;
}
.landing-hero-impact,
.landing-hero-visual {
    background: var(--claude-surface-card) !important;
    border-color: var(--claude-hairline) !important;
}
.landing-admin-link-hero { background: var(--claude-primary) !important; color: var(--claude-on-primary) !important; }
.section-title .first { color: var(--claude-ink) !important; }
.section-title .second {
    background: var(--claude-surface-card) !important;
    color: var(--claude-ink) !important;
    border-radius: var(--radius-claude-md) !important;
}
.section-title-dot.blue,
.section-title-dot.yellow,
.section-title-dot.magenta { background: var(--claude-primary) !important; }
.landing-highlight-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)) !important;
    gap: clamp(0.85rem, 2vw, 1.25rem) !important;
}
.landing-highlight-card {
    background: var(--claude-surface-card) !important;
    min-height: 230px;
    display: flex !important;
    flex-direction: column;
    justify-content: space-between;
    padding: clamp(1.1rem, 2.2vw, 1.6rem) !important;
}
.landing-highlight-icon {
    width: 48px;
    height: 48px;
    display: inline-grid !important;
    place-items: center;
    border-radius: 50%;
    background: var(--claude-canvas) !important;
    color: var(--claude-primary) !important;
    font-size: 1.35rem !important;
}
.landing-highlight-card strong {
    color: var(--claude-ink) !important;
    font-family: var(--font-display-claude);
    font-weight: 500 !important;
    letter-spacing: -0.04em;
    line-height: 1;
}

/* ODS: proportional, square official symbols, no distortion */
.landing-ods-section {
    background: var(--claude-surface-soft) !important;
    border-radius: var(--radius-claude-2xl) !important;
    padding: clamp(1rem, 3vw, 2rem) !important;
}
.landing-ods-body { gap: clamp(1rem, 2vw, 1.5rem) !important; }
.landing-ods-stage {
    background: var(--claude-canvas) !important;
    border: 1px solid var(--claude-hairline) !important;
    border-radius: var(--radius-claude-xl) !important;
    box-shadow: none !important;
}
.landing-ods-mosaic {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: clamp(0.45rem, 1.2vw, 0.8rem) !important;
    max-width: 360px;
    margin-inline: auto;
}
.landing-ods-mosaic-tile {
    aspect-ratio: 1 / 1;
    width: 100%;
    min-width: 0;
    border-radius: 14px !important;
    overflow: hidden;
    background: #fff !important;
    border: 1px solid rgba(20, 20, 19, 0.08) !important;
    padding: 0 !important;
    display: grid !important;
    place-items: center;
    box-shadow: none !important;
}
.landing-ods-mosaic-tile img,
.landing-ods-icon {
    display: block;
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    object-position: center !important;
    aspect-ratio: 1 / 1;
    max-width: 100%;
    max-height: 100%;
}
.landing-ods-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)) !important;
    gap: clamp(0.85rem, 1.8vw, 1.15rem) !important;
    align-items: stretch;
}
.landing-ods-card {
    --ods-accent: var(--claude-primary);
    min-height: 235px;
    display: flex !important;
    flex-direction: column;
    gap: 0.85rem;
    background: var(--claude-canvas) !important;
    border: 1px solid var(--claude-hairline) !important;
    border-radius: var(--radius-claude-xl) !important;
    padding: clamp(1rem, 2vw, 1.35rem) !important;
    position: relative;
    overflow: hidden;
}
.landing-ods-card::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 5px;
    background: var(--ods-accent);
}
.landing-ods-card::after { display: none !important; }
.landing-ods-head { display: grid !important; gap: 0.8rem; }
.landing-ods-topline {
    display: flex !important;
    align-items: center;
    gap: 0.75rem;
}
.landing-ods-icon {
    flex: 0 0 58px;
    width: 58px !important;
    height: 58px !important;
    border-radius: 10px !important;
    background: #fff !important;
    box-shadow: none !important;
}
.landing-ods-number {
    background: color-mix(in srgb, var(--ods-accent) 14%, white) !important;
    color: var(--claude-ink) !important;
    border: 1px solid color-mix(in srgb, var(--ods-accent) 24%, white) !important;
    border-radius: 999px !important;
    box-shadow: none !important;
    font-weight: 700 !important;
}
.landing-ods-head strong {
    color: var(--claude-ink) !important;
    font-family: var(--font-display-claude);
    font-size: clamp(1.2rem, 2vw, 1.55rem) !important;
    font-weight: 500 !important;
    letter-spacing: -0.025em;
    line-height: 1.08 !important;
}
.landing-ods-card p {
    color: var(--claude-muted) !important;
    line-height: 1.55 !important;
    margin-top: auto !important;
}
.landing-ods-card.ods-4 { --ods-accent: #c5192d; }
.landing-ods-card.ods-6 { --ods-accent: #26bde2; }
.landing-ods-card.ods-8 { --ods-accent: #8f1838; }
.landing-ods-card.ods-10 { --ods-accent: #dd1367; }
.landing-ods-card.ods-11 { --ods-accent: #f59d23; }
.landing-ods-card.ods-12 { --ods-accent: #bf8b2e; }
.landing-ods-card.ods-13 { --ods-accent: #3f7e44; }
.landing-ods-card.ods-14 { --ods-accent: #0a97d9; }
.landing-ods-card.ods-17 { --ods-accent: #19486a; }

.landing-story-card,
.landing-points-card,
.landing-participation-card,
.landing-dashboard-block { background: var(--claude-canvas) !important; }
.landing-dashboard-block-emphasis,
.landing-participation-cta { background: var(--claude-surface-card) !important; }
.landing-tab-button.is-active,
.landing-dashboard-button.is-active {
    background: var(--claude-primary) !important;
    color: var(--claude-on-primary) !important;
}
.landing-tab-button:not(.is-active),
.landing-dashboard-button:not(.is-active) {
    background: var(--claude-surface-card) !important;
    color: var(--claude-muted) !important;
}

/* Login */
.login-background {
    background:
        radial-gradient(circle at top left, rgba(204, 120, 92, 0.28), transparent 30%),
        radial-gradient(circle at bottom right, rgba(93, 184, 166, 0.20), transparent 34%),
        var(--claude-surface-dark) !important;
}
.login-card {
    background: var(--claude-canvas) !important;
    border: 1px solid var(--claude-hairline) !important;
    border-radius: var(--radius-claude-2xl) !important;
    box-shadow: 0 24px 80px rgba(20, 20, 19, 0.18) !important;
}
.login-title { color: var(--claude-ink) !important; font-family: var(--font-display-claude); font-weight: 500; }
.login-title .sustentavel { color: var(--claude-primary) !important; }
.login-divider { background: var(--claude-primary) !important; }

@media (max-width: 1180px) {
    .header-content { flex-wrap: wrap; padding-block: 0.55rem; }
    .header-left { order: 1; }
    .header-right { order: 2; margin-left: auto; }
    .header-center { order: 3; flex-basis: 100%; justify-content: flex-start; }
    .nav { width: 100%; overflow-x: auto; }
}

@media (max-width: 900px) {
    .landing-hero-grid,
    .landing-ods-stage,
    .landing-overview-grid,
    .landing-dashboard-grid,
    .landing-visual-grid,
    .landing-story-grid,
    .landing-participation-grid { grid-template-columns: 1fr !important; }
    .landing-hero-visual { min-height: 240px !important; }
    .landing-ods-mosaic { max-width: 300px; }
}

@media (max-width: 767px) {
    .container,
    .public-page-shell { padding-inline: 0.85rem !important; }
    .layout-brand-bar { display: none !important; }
    .nav-link { min-height: 40px; padding: 0.48rem 0.65rem; }
    .nav-link span { max-width: 9rem; overflow: hidden; text-overflow: ellipsis; }
    .hero-banner h1,
    .landing-hero-copy h1 { font-size: clamp(2.1rem, 11vw, 3rem) !important; }
    .dashboard-grid,
    .quick-access-grid,
    .chart-grid,
    .landing-highlight-grid,
    .landing-ods-grid { grid-template-columns: 1fr !important; }
    .stats-card,
    .stats-card-link { flex-direction: row !important; text-align: left !important; min-height: 96px; }
    .quick-access-card { min-height: 140px; }
    .landing-highlight-card,
    .landing-ods-card { min-height: unset; }
    .landing-ods-icon { flex-basis: 52px; width: 52px !important; height: 52px !important; }
    .landing-ods-mosaic { grid-template-columns: repeat(3, 1fr) !important; max-width: 260px; }
    .form-actions .btn,
    .search-form .btn,
    .page-header .btn,
    .detail-header .btn { width: 100%; }
    .table-container { margin-inline: 0 !important; border-radius: var(--radius-claude-xl) !important; }
}

@media (max-width: 420px) {
    .container,
    .public-page-shell { padding-inline: 0.65rem !important; }
    .landing-ods-mosaic { max-width: 230px; gap: 0.42rem !important; }
    .landing-ods-topline { align-items: flex-start; }
    .landing-ods-head strong { font-size: 1.22rem !important; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
    }
}

/* QA contrast/responsiveness fixes - 2026-05-07 */
:root {
    --claude-primary-aa: #8f4a35;
    --claude-label-aa: #704433;
}

.btn-primary,
.btn-action,
.btn-public-calc,
.login-submit,
.nav-link.active,
.landing-tab-button.is-active,
.landing-dashboard-button.is-active,
.landing-admin-link-hero {
    background: var(--claude-primary-aa) !important;
    border-color: var(--claude-primary-aa) !important;
    color: #fff !important;
}
.btn-primary:hover,
.btn-action:hover,
.btn-public-calc:hover,
.login-submit:hover,
.nav-link.active:hover { background: #753925 !important; }

.landing-highlight-label,
.landing-mini-title,
.landing-story-meta,
.landing-hero-badge,
.landing-hero-impact-kicker {
    color: var(--claude-label-aa) !important;
}

.stats-label,
.nav-user-status,
.material-row h4,
.material-row .label,
.form-group label,
.peso-help {
    color: var(--claude-muted) !important;
}

.quick-access-card p,
.quick-access-card.blue p,
.quick-access-card.green p,
.quick-access-card.magenta p,
.quick-access-card.orange p,
.quick-access-card.darkgreen p {
    color: var(--claude-on-dark) !important;
    opacity: 0.88 !important;
}
.quick-access-card.yellow p { color: #fff !important; opacity: 0.96 !important; }

/* Hero with real media remains a dark Claude product surface for contrast. */
.landing-hero-shell.has-hero-media {
    background: var(--claude-surface-dark) !important;
    border-color: rgba(250, 249, 245, 0.14) !important;
}
.landing-hero-shell.has-hero-media .landing-hero-copy h1,
.landing-hero-shell.has-hero-media .landing-hero-brand-copy strong,
.landing-hero-shell.has-hero-media .landing-hero-impact-main strong {
    color: var(--claude-on-dark) !important;
}
.landing-hero-shell.has-hero-media .landing-hero-brand-copy span,
.landing-hero-shell.has-hero-media .landing-hero-copy .hero-subtitle,
.landing-hero-shell.has-hero-media .landing-hero-impact-main span,
.landing-hero-shell.has-hero-media .landing-hero-impact p {
    color: rgba(250, 249, 245, 0.86) !important;
}

/* Prevent nested public containers from exceeding viewport. */
.public-page,
.public-page-shell,
.public-page .container,
.public-page .tab-section,
.public-page .landing-section,
.public-page .landing-dashboard-toolbar,
.public-page .landing-dashboard-nav-shell,
.public-page .landing-utility-actions,
.public-page .btn-public-refresh {
    max-width: 100% !important;
    box-sizing: border-box !important;
}
.public-page-shell > .container.tab-section,
.public-page .container.tab-section {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}
.public-page .landing-dashboard-toolbar,
.public-page .landing-utility-actions,
.public-page .btn-public-refresh {
    min-width: 0 !important;
}
html, body { overflow-x: clip; }

@media (max-width: 767px) {
    .public-page-shell { width: calc(100vw - 1.3rem) !important; }
    .public-page .landing-dashboard-toolbar,
    .public-page .landing-utility-actions,
    .public-page .btn-public-refresh { width: 100% !important; }
}

/* QA contrast final pass */
:root { --claude-muted-aa: #55524b; }
.public-page p,
.landing-section-copy,
.landing-dashboard-copy,
.landing-highlight-card p,
.landing-ods-card p,
.form-help,
.empty-state p,
.stats-label,
.nav-user-status,
.form-group label,
.material-row h4,
.material-row .label,
.peso-help,
[style*="olinda-muted"] {
    color: var(--claude-muted-aa) !important;
}
.btn-danger {
    background: #b3261e !important;
    color: #fff !important;
}
.btn-danger:hover { background: #8f1d18 !important; }
.quick-access-card.yellow,
.quick-access-card.magenta,
.quick-access-card.orange,
.quick-access-card.green,
.quick-access-card.blue,
.quick-access-card.darkgreen {
    background: var(--claude-surface-dark) !important;
    color: var(--claude-on-dark) !important;
}
.quick-access-card p,
.quick-access-card.yellow p,
.quick-access-card.magenta p,
.quick-access-card.orange p,
.quick-access-card.green p,
.quick-access-card.blue p,
.quick-access-card.darkgreen p {
    color: #fdfaf8 !important;
    opacity: 1 !important;
}

/* QA contrast final-final pass */
:root {
    --olinda-muted: #55524b;
    --olinda-text: #141413;
}
.landing-highlight-icon { color: var(--claude-primary-aa) !important; }
.landing-tab-button:not(.is-active),
.landing-dashboard-button:not(.is-active) {
    color: var(--claude-muted-aa) !important;
}
.stats-label,
.form-group label,
.material-row h4,
.material-row .label,
.material-row small,
.peso-help {
    color: var(--claude-muted-aa) !important;
    opacity: 1 !important;
}
.material-row select,
.material-row input,
select[name="material_tipo[]"],
select[name="peso_unidade[]"],
input[name="peso_kg[]"] {
    color: var(--claude-ink) !important;
}
.material-row select:invalid,
select[name="material_tipo[]"]:invalid {
    color: var(--claude-muted-aa) !important;
}
.material-row option { color: var(--claude-ink) !important; }

/* Keep disabled material form readable; disabled state is indicated by pointer-events and helper copy, not opacity. */
.card-border-yellow.opacity-50,
.card-border-yellow[style*="pointer-events: none"] {
    opacity: 1 !important;
    filter: grayscale(0.08);
}

/* ODS clickable canvas - 2026-05-07 */
.landing-ods-grid {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 238px), 1fr)) !important;
}
.landing-ods-card {
    appearance: none;
    -webkit-appearance: none;
    width: 100%;
    border: 1px solid var(--claude-hairline) !important;
    text-align: left;
    cursor: pointer;
    font: inherit;
    color: inherit;
}
.landing-ods-card:hover {
    transform: translateY(-2px);
    border-color: color-mix(in srgb, var(--ods-accent) 42%, var(--claude-hairline)) !important;
    box-shadow: 0 18px 44px rgba(20, 20, 19, 0.09) !important;
}
.landing-ods-card:focus-visible {
    outline: 3px solid color-mix(in srgb, var(--ods-accent) 38%, transparent);
    outline-offset: 3px;
}
.landing-ods-open-hint {
    display: inline-flex;
    width: fit-content;
    margin-top: 0.2rem;
    padding: 0.32rem 0.55rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--ods-accent) 13%, white);
    color: var(--claude-ink);
    font-size: 0.76rem;
    font-weight: 700;
}
.ods-canvas[hidden] { display: none !important; }
.ods-canvas {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(320px, 520px);
}
.ods-canvas-backdrop {
    grid-column: 1 / -1;
    grid-row: 1;
    border: 0;
    background: rgba(20, 20, 19, 0.46);
    cursor: pointer;
}
.ods-canvas-panel {
    grid-column: 2;
    grid-row: 1;
    align-self: stretch;
    min-width: 0;
    overflow-y: auto;
    padding: clamp(1.15rem, 3vw, 2rem);
    background: var(--claude-canvas);
    border-left: 1px solid var(--claude-hairline);
    box-shadow: -28px 0 70px rgba(20, 20, 19, 0.16);
    outline: none;
}
.ods-canvas-close {
    float: right;
    width: 42px;
    height: 42px;
    border-radius: 999px;
    border: 1px solid var(--claude-hairline);
    background: var(--claude-surface-card);
    color: var(--claude-ink);
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
}
.ods-canvas-kicker {
    width: fit-content;
    margin-bottom: 1rem;
    padding: 0.35rem 0.7rem;
    border-radius: 999px;
    background: var(--claude-primary-aa);
    color: #fff;
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
.ods-canvas-head {
    clear: both;
    display: grid;
    grid-template-columns: 92px minmax(0, 1fr);
    gap: 1rem;
    align-items: center;
    margin-bottom: 1.25rem;
}
.ods-canvas-icon {
    width: 92px;
    height: 92px;
    aspect-ratio: 1 / 1;
    object-fit: contain;
    border-radius: 14px;
}
.ods-canvas-head h3 {
    margin: 0 0 0.35rem;
    color: var(--claude-ink);
    font-family: var(--font-display-claude);
    font-size: clamp(1.9rem, 4vw, 2.7rem);
    font-weight: 500;
    line-height: 1.02;
    letter-spacing: -0.04em;
}
.ods-canvas-head p,
.ods-canvas-section p {
    color: var(--claude-muted-aa);
    line-height: 1.62;
}
.ods-canvas-section {
    padding: 1rem 0;
    border-top: 1px solid var(--claude-hairline);
}
.ods-canvas-section span {
    display: block;
    margin-bottom: 0.35rem;
    color: var(--claude-label-aa);
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
.ods-canvas-source {
    display: inline-flex;
    margin-top: 1rem;
    color: var(--claude-primary-aa);
    font-weight: 800;
}
body.ods-canvas-open { overflow: hidden; }
@media (max-width: 720px) {
    .ods-canvas { grid-template-columns: 1fr; }
    .ods-canvas-panel {
        grid-column: 1;
        align-self: end;
        max-height: 88svh;
        border-left: 0;
        border-top: 1px solid var(--claude-hairline);
        border-radius: 22px 22px 0 0;
    }
    .ods-canvas-head { grid-template-columns: 70px minmax(0, 1fr); }
    .ods-canvas-icon { width: 70px; height: 70px; }
}

/* ODS intro card compact layout - 2026-05-07 */
.landing-ods-stage {
    grid-template-columns: minmax(0, 1fr) max-content !important;
    align-items: start !important;
    gap: clamp(0.85rem, 2vw, 1.25rem) !important;
    padding: clamp(0.8rem, 1.8vw, 1.05rem) !important;
}
.landing-ods-copy {
    align-content: start !important;
    padding: clamp(0.78rem, 1.6vw, 0.95rem) !important;
}
.landing-ods-mosaic {
    grid-template-columns: repeat(8, clamp(34px, 3.2vw, 46px)) !important;
    gap: clamp(0.24rem, 0.7vw, 0.38rem) !important;
    width: max-content !important;
    max-width: 100% !important;
    margin-inline: 0 !important;
    justify-self: end !important;
    align-self: start !important;
}
.landing-ods-mosaic-tile {
    width: clamp(34px, 3.2vw, 46px) !important;
    border-radius: 9px !important;
}
@media (max-width: 780px) {
    .landing-ods-stage {
        grid-template-columns: 1fr !important;
    }
    .landing-ods-mosaic {
        grid-template-columns: repeat(8, clamp(29px, 8vw, 38px)) !important;
        justify-self: center !important;
        margin-top: 0.1rem !important;
    }
    .landing-ods-mosaic-tile {
        width: clamp(29px, 8vw, 38px) !important;
        border-radius: 8px !important;
    }
}
@media (max-width: 360px) {
    .landing-ods-mosaic {
        grid-template-columns: repeat(8, 28px) !important;
        gap: 0.22rem !important;
    }
    .landing-ods-mosaic-tile { width: 28px !important; }
}

/* ODS mosaic square tiles after compact override */
.landing-ods-mosaic {
    grid-auto-rows: clamp(34px, 3.2vw, 46px) !important;
}
.landing-ods-mosaic-tile {
    height: clamp(34px, 3.2vw, 46px) !important;
}
@media (max-width: 780px) {
    .landing-ods-mosaic {
        grid-auto-rows: clamp(29px, 8vw, 38px) !important;
    }
    .landing-ods-mosaic-tile {
        height: clamp(29px, 8vw, 38px) !important;
    }
}
@media (max-width: 360px) {
    .landing-ods-mosaic { grid-auto-rows: 28px !important; }
    .landing-ods-mosaic-tile { height: 28px !important; }
}