/* Flat Content — OpenShip-dashboard density for authenticated shell.
   Scope: .shell (site_shell). Guest portal / entrance layouts stay untouched. */

/* Kill panel/card chrome on ops content */
.shell .surface-band,
.shell .surface-panel,
.shell .surface-form,
.shell .surface-table,
.shell .page-toolbar,
.shell .panel,
.shell .form-card,
.shell .hero {
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

.shell .surface-band,
.shell .surface-panel,
.shell .surface-form,
.shell .surface-table,
.shell .panel,
.shell .form-card,
.shell .hero {
    padding: 0;
}

.shell .surface-header {
    padding-bottom: var(--space-4);
    margin-bottom: var(--space-2);
    border-bottom: 0;
}

.shell .surface-form,
.shell .surface-panel,
.shell .surface-table,
.shell .surface-band {
    gap: var(--space-5);
}

.shell .surface-table__row {
    border-top-color: var(--color-line-subtle);
}

/* Helper rails: flat, no mist cards. Prefer gap over hairlines in stacks. */
.shell .surface-inline:has(.actions),
.shell .surface-inline:has(form),
.shell .surface-inline:has(.button) {
    padding: var(--space-3) 0;
    background: transparent;
    border: 0;
    border-radius: 0;
}

/* Two-column layouts: gap rhythm only — no hairlines that collide across columns */
.shell .split-overview,
.shell .page-grid--two,
.shell .page-grid--sidebar,
.shell .pricing-faq-grid {
    align-items: start;
    column-gap: var(--space-6);
    row-gap: var(--space-5);
}

.shell .split-overview .surface-header,
.shell .split-overview .surface-inline,
.shell .page-grid--two .surface-inline,
.shell .page-grid--sidebar .surface-inline,
.shell .page-grid--two .surface-header,
.shell .page-grid--sidebar .surface-header,
.shell .detail-rail .surface-inline,
.shell .kv-grid .surface-inline,
.shell .pricing-faq-grid .surface-inline,
.shell .pricing-page .surface-inline,
.shell .pricing-page .surface-header,
.shell .billing-page .surface-inline,
.shell .billing-page .surface-header {
    border: 0;
    border-top: 0;
    border-bottom: 0;
    box-shadow: none;
}

.shell .split-overview .surface-header,
.shell .page-grid--two .surface-header,
.shell .page-grid--sidebar .surface-header,
.shell .pricing-page .surface-header {
    margin-bottom: var(--space-5);
    padding-bottom: 0;
}

/* Paired fact rows: left/right cells share the same grid row → vertical lock */
.shell .split-overview.pricing-facts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
}

.shell .split-overview.pricing-facts > .surface-inline {
    padding: 0;
    background: transparent;
}

.shell .detail-rail {
    display: grid;
    gap: var(--space-5);
}

.shell .detail-rail > .surface-inline {
    padding-top: 0;
    padding-bottom: 0;
}

.shell .kv-grid {
    gap: var(--space-4);
}

.shell .pricing-faq-grid {
    gap: var(--space-5);
}

.shell .pricing-faq-grid > .surface-inline {
    padding: 0;
    background: transparent;
}

@media (max-width: 900px) {
    .shell .split-overview.pricing-facts {
        grid-template-columns: 1fr;
    }
}

/* Notices: soft fill, full-width callouts with breathing room */
.shell .notice {
    display: block;
    width: 100%;
    max-width: none;
    box-sizing: border-box;
    border-radius: var(--radius-md, 16px);
    border: 0;
    background: color-mix(in srgb, var(--color-info, #2563eb) 12%, var(--surface-page));
    padding: var(--space-4) var(--space-5);
    margin-block: var(--space-5);
}

.shell .notice > :last-child {
    margin-bottom: 0;
}

.shell .surface-header + .notice,
.shell .page-band + .notice,
.shell .actions + .notice {
    margin-top: var(--space-5);
}

.shell .notice + .section-body,
.shell .notice + .detail-list,
.shell .notice + .surface-header,
.shell .notice + p {
    margin-top: var(--space-5);
}

.shell .notice--warm {
    background: color-mix(in srgb, var(--color-warning, #f59e0b) 14%, var(--surface-page));
}

.shell .notice--info {
    background: color-mix(in srgb, var(--color-info, #2563eb) 12%, var(--surface-page));
}

.shell .notice .detail,
.shell .notice .section-body {
    max-width: none;
    text-wrap: pretty;
}

/* Stat / metric strips: OpenShip status rows, not card grids */
.shell .stat-strip {
    gap: 0;
    border-top: 1px solid var(--color-line-subtle);
    border-bottom: 1px solid var(--color-line-subtle);
    padding: var(--space-2) 0;
}

.shell .stat-card,
.shell .stat-block,
.shell .metric-card {
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    min-height: 0;
    padding: var(--space-3) var(--space-4);
    border-right: 1px solid var(--color-line-subtle);
}

.shell .stat-card:last-child,
.shell .stat-block:last-child,
.shell .metric-card:last-child {
    border-right: 0;
}

.shell .stat-block:hover,
.shell .stat-card:hover {
    background: transparent;
}

.shell .stat-block--accent,
.shell .stat-block--info,
.shell .stat-block--warm {
    background: transparent;
}

/* Empty states: flat */
.shell .empty-state {
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

/* Ops page bands: no hero card chrome */
.shell .page-band,
.shell .page-band--hero,
.shell .settings-page__header {
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    padding-left: 0;
    padding-right: 0;
}

.shell .settings-page__header {
    max-width: 52rem;
}

/* Selectable pricing cards keep interaction chrome; drop mist wall fill */
.shell .pricing-surface .pricing-card,
.shell .pricing-carousel__track > .pricing-card {
    background: var(--surface-page);
    box-shadow: inset 0 0 0 1px var(--color-line-subtle);
}

.shell .settings-plan-compare.surface-panel,
.shell .settings-plan-compare {
    background: transparent;
    border: 0;
    border-radius: 0;
    padding: 0;
    padding-top: var(--space-5);
}

/* Ops page titles: fixed rem tokens, not marketing display clamp */
.shell .section-title {
    font-size: var(--type-page-title, var(--type-headline));
    line-height: 1.15;
    letter-spacing: -0.02em;
    max-width: none;
}

.shell .section-title--compact,
.shell[data-density="dense"] .section-title {
    font-size: var(--type-display-dense, var(--type-page-title));
}

.shell .settings-page .section-title {
    font-size: var(--type-display-dense, var(--type-page-title));
}

/* Blocked / empty workspace bands: centered CTA stack (not left ops chrome) */
.shell .page-band--empty {
    justify-items: center;
    text-align: center;
    padding-block: var(--space-8) var(--space-10);
    gap: var(--space-5);
}

.shell .page-band--empty .section-header,
.shell .page-band--empty .empty-state {
    justify-items: center;
    text-align: center;
    width: 100%;
    max-width: 36rem;
}

.shell .page-band--empty .section-title,
.shell .page-band--empty .section-body,
.shell .page-band--empty .empty-state__title,
.shell .page-band--empty .empty-state__body {
    text-align: center;
    margin-inline: auto;
}

.shell .page-band--empty .section-title + .section-body {
    margin-top: var(--space-3);
}

.shell .page-band--empty .actions {
    justify-content: center;
    margin-top: var(--space-2);
}

.shell .meta--centered {
    text-align: center;
}

/* Home setup flow: centered steps + arrows, no capsules */
.shell .setup-section .actions {
    justify-content: center;
}

.shell .setup-flow {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
    margin: var(--space-6) 0 var(--space-5);
    padding: 0;
    list-style: none;
}

.shell .setup-flow__step {
    position: relative;
    width: 100%;
    max-width: 28rem;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: var(--color-text-strong);
    font-size: var(--type-body);
    font-weight: 500;
    line-height: 1.45;
    text-align: center;
}

.shell .setup-flow__step:not(:last-child) {
    padding-bottom: var(--space-6);
}

.shell .setup-flow__step:not(:last-child)::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: var(--space-2);
    width: 10px;
    height: 10px;
    border-right: 1.5px solid var(--color-text-muted);
    border-bottom: 1.5px solid var(--color-text-muted);
    transform: translateX(-50%) rotate(45deg);
    opacity: 0.7;
}

.shell .setup-section.is-steps-animate .setup-flow__step {
    opacity: 0;
    animation: setup-flow-in 220ms cubic-bezier(0.32, 0.72, 0, 1) forwards;
    animation-delay: calc(var(--i, 0) * 90ms);
}

@keyframes setup-flow-in {
    from {
        opacity: 0;
        transform: translateY(0.5rem);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (prefers-reduced-motion: reduce) {
    .shell .setup-section.is-steps-animate .setup-flow__step {
        animation: none;
        opacity: 1;
        transform: none;
    }
}

/* OpenShip-style fields: page canvas + hairline border, no mist fill */
.shell .field input:not([type="checkbox"]):not([type="radio"]),
.shell .field select,
.shell .field textarea,
.shell input[type="email"],
.shell input[type="password"],
.shell input[type="text"],
.shell input[type="tel"],
.shell input[type="url"],
.shell input[type="number"],
.shell input[type="search"],
.shell input[type="date"],
.shell input[type="datetime-local"],
.shell input[type="time"] {
    background: transparent;
    border: 1px solid var(--color-line-strong, rgba(20, 20, 20, 0.12));
    border-radius: var(--radius-sm);
    box-shadow: none;
}

.shell .field input:not([type="checkbox"]):not([type="radio"]):focus,
.shell .field select:focus,
.shell .field textarea:focus,
.shell input[type="email"]:focus,
.shell input[type="password"]:focus,
.shell input[type="text"]:focus,
.shell input[type="tel"]:focus,
.shell input[type="url"]:focus,
.shell input[type="number"]:focus,
.shell input[type="search"]:focus,
.shell input[type="date"]:focus,
.shell input[type="datetime-local"]:focus,
.shell input[type="time"]:focus {
    background: transparent;
    border-color: var(--color-text-muted, rgba(0, 0, 0, 0.58));
    box-shadow: 0 0 0 3px var(--color-accent-subtle, rgba(0, 0, 0, 0.08));
}

.shell .field input:not([type="checkbox"]):not([type="radio"]):disabled,
.shell .field select:disabled,
.shell .field textarea:disabled,
.shell input[type="email"]:disabled,
.shell input[type="password"]:disabled,
.shell input[type="text"]:disabled {
    background: transparent;
    opacity: 0.64;
    cursor: not-allowed;
}

/* Kill browser autofill blue wash on cool paper */
.shell input:-webkit-autofill,
.shell input:-webkit-autofill:hover,
.shell input:-webkit-autofill:focus,
.shell textarea:-webkit-autofill,
.shell select:-webkit-autofill {
    -webkit-text-fill-color: var(--color-text-strong, #0d0d0d);
    caret-color: var(--color-text-strong, #0d0d0d);
    box-shadow: 0 0 0 1000px var(--surface-page, #ffffff) inset;
    transition: background-color 99999s ease-out 0s;
}

/* ── Shell overlays (toasts + install tip) ─────────────────────────
   One bottom stack so transient chrome never overlaps. Cards are
   opaque, borderless, and lifted — matching the ops canvas. */
.shell-overlays {
    position: fixed;
    right: max(1.25rem, env(safe-area-inset-right, 0px));
    bottom: max(1.25rem, env(safe-area-inset-bottom, 0px));
    top: auto;
    left: auto;
    z-index: 80;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.5rem;
    width: min(23.75rem, calc(100vw - 2.5rem));
    margin: 0;
    padding: 0;
    pointer-events: none;
}

.shell-overlays > * {
    pointer-events: auto;
}

.overlay-card {
    width: 100%;
    margin: 0;
    padding: 0.75rem 1rem;
    border: 0;
    border-radius: var(--radius-md, 16px);
    background: var(--surface-elevated, var(--surface-page));
    box-shadow: 0 10px 28px color-mix(in srgb, var(--color-text-heading) 8%, transparent);
    color: var(--color-text-strong);
    font-size: var(--type-body-sm, 0.875rem);
    line-height: 1.5;
}

.messages-stack {
    position: static;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.5rem;
    width: 100%;
    margin: 0;
    padding: 0;
}

.messages-stack .flash--toast {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 0.75rem;
    min-width: 0;
    max-width: none;
    max-height: none;
    overflow: hidden;
    cursor: pointer;
    transition: none;
    animation: flash-toast-in 200ms var(--easing-standard, ease-out) both;
}

.messages-stack .flash--toast.flash--success {
    background: color-mix(in srgb, var(--color-success) 18%, var(--surface-page));
    color: var(--color-success);
}

.messages-stack .flash--toast.flash--error {
    background: color-mix(in srgb, var(--color-danger) 18%, var(--surface-page));
    color: var(--color-danger);
}

.messages-stack .flash--toast.flash--info,
.messages-stack .flash--toast.flash--warning {
    background: var(--surface-elevated, var(--surface-page));
    color: var(--color-text-strong);
}

.messages-stack .flash__icon {
    display: inline-flex;
    flex-shrink: 0;
    margin-top: 1px;
    color: inherit;
}

.messages-stack .flash__body {
    flex: 1 1 auto;
    min-width: 0;
    overflow-wrap: anywhere;
    text-wrap: pretty;
}

.messages-stack .flash-dismiss {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.75rem;
    min-height: 2.75rem;
    margin: -0.45rem -0.55rem -0.45rem 0;
    padding: 0;
    border: 0;
    border-radius: var(--radius-sm, 10px);
    background: transparent;
    color: inherit;
    cursor: pointer;
}

.messages-stack .flash-dismiss:hover,
.messages-stack .flash-dismiss:focus-visible,
.messages-stack .flash--toast:hover .flash-dismiss {
    background: color-mix(in srgb, currentColor 10%, transparent);
}

.messages-stack .flash-dismiss:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px;
}

@keyframes flash-toast-in {
    from {
        opacity: 0;
        transform: translateY(0.5rem);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (max-width: 720px) {
    .shell-overlays {
        right: max(0.75rem, env(safe-area-inset-right, 0px));
        bottom: max(0.75rem, env(safe-area-inset-bottom, 0px));
        left: max(0.75rem, env(safe-area-inset-left, 0px));
        width: auto;
    }
}