/*
 * CARE authenticated app shell — chrome + shared primitives only.
 * Domain UI loads as page/feature sheets (see docs/standard-ui-components.md).
 * Linked from AuthenticatedShellRenderer::documentHead().
 */

/*
 * HTML `hidden` must always win. Author display:flex / inline-flex otherwise
 * overrides the UA [hidden] { display: none } rule (same bug as care-btn / care-label).
 */
[hidden] {
    display: none !important;
}

/* —— Document shell —— */
html.care-app {
    font-family: var(--care-app-type-family-body);
    font-size: var(--care-app-type-size-body);
    font-weight: var(--care-app-type-weight-body);
    line-height: var(--care-app-type-leading-body);
    -webkit-text-size-adjust: 100%;
}

html.care-app body {
    margin: 0;
    min-height: 100dvh;
    color: var(--care-app-color-ink-primary);
    background-color: var(--care-app-color-canvas);
    background-image: var(--care-app-color-canvas-tint);
}

/* —— Main landmark (layout roles — not data-care-page) —— */
.care-app-shell__main,
.care-auth-main {
    box-sizing: border-box;
    width: min(100%, var(--care-app-width-shell-max));
    margin-inline: auto;
    padding-inline: var(--care-app-width-shell-pad-inline);
    padding-block: var(--care-app-width-shell-pad-block);
}

/* —— Typography roles —— */
html.care-app h1 {
    margin: 0 0 var(--care-app-space-md);
    font-size: var(--care-app-type-size-heading-1);
    font-weight: var(--care-app-type-weight-heading);
    line-height: var(--care-app-type-leading-tight);
    letter-spacing: var(--care-app-type-tracking-heading);
    color: var(--care-app-color-ink-primary);
}

html.care-app h2 {
    margin: var(--care-app-space-section) 0 var(--care-app-space-sm);
    font-size: var(--care-app-type-size-heading-2);
    font-weight: var(--care-app-type-weight-heading);
    line-height: var(--care-app-type-leading-snug);
    letter-spacing: var(--care-app-type-tracking-heading);
    color: var(--care-app-color-ink-primary);
}

/* Assessment runner uses h3.gap-domain-column__heading with its own typography */
html.care-app h3:not(.gap-domain-column__heading) {
    margin: var(--care-app-space-lg) 0 var(--care-app-space-sm);
    font-size: var(--care-app-type-size-heading-3);
    font-weight: var(--care-app-type-weight-heading);
    line-height: var(--care-app-type-leading-snug);
    color: var(--care-app-color-ink-secondary);
}

.care-app-shell__main > h2:first-of-type,
.care-auth-main > h2:first-of-type,
section:first-of-type > h2:first-child {
    margin-top: var(--care-app-space-lg);
}

.care-app-surface > h2:first-child {
    margin-top: 0;
}

:where(html.care-app) p {
    margin: 0 0 var(--care-app-space-md);
    color: var(--care-app-color-ink-secondary);
}

/* Shell main: paragraphs follow column width */
.care-app-shell__main p {
    max-width: none;
}

:where(html.care-app) ul {
    margin: 0 0 var(--care-app-space-md);
    padding-inline-start: var(--care-app-space-lg);
    color: var(--care-app-color-ink-secondary);
}

:where(html.care-app) li {
    margin-block: var(--care-app-space-xs);
}

:where(html.care-app) strong {
    font-weight: var(--care-app-type-weight-heading);
    color: var(--care-app-color-ink-primary);
}

/* —— Text links (emit .care-link; do not paint every a via :not(.care-btn)) —— */
.care-link {
    color: var(--care-app-color-accent);
    text-decoration: var(--care-app-link-underline-default);
    text-underline-offset: 0.15em;
    transition: color var(--care-app-motion-duration-interaction) var(--care-app-motion-ease);
}

.care-link:hover {
    color: var(--care-app-color-accent-hover);
}

.care-link:focus-visible {
    outline: var(--care-app-focus-ring-width) solid var(--care-app-color-focus-ring);
    outline-offset: var(--care-app-focus-ring-offset);
    border-radius: var(--care-app-radius-sm);
}

button.care-link {
    background: none;
    border: 0;
    padding: 0;
    font: inherit;
    cursor: pointer;
}

/* Emphasized in-table / roster name links (weight + underline on hover only). */
.care-link--emphasis {
    font-weight: var(--care-app-type-weight-heading);
    text-decoration: none;
}

.care-link--emphasis:hover {
    text-decoration: underline;
}

/* —— Status lights (emit .care-status-light + tone modifier) —— */
.care-status-light {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.25rem;
    height: 1.25rem;
    border-radius: 50%;
    flex-shrink: 0;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.12);
}

.care-status-light--ok {
    background: #2e7d32;
}

.care-status-light--warning {
    background: #ef6c00;
}

.care-status-light--danger {
    background: #c62828;
}

.care-status-light--glyph {
    width: 1.05rem;
    height: 1.05rem;
    font-size: 0.62rem;
    font-weight: 700;
    line-height: 1;
    color: #fff;
}

.care-status-light--glyph.care-status-light--ok::before {
    content: '✓';
}

.care-status-light--glyph.care-status-light--warning::before {
    content: '!';
}

.care-status-light--glyph.care-status-light--danger::before {
    content: '✕';
}

/* —— Assessment level (risk / maturity category pill + dimmed score) —— */
.care-assessment-level {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 0.15rem;
    min-width: 0;
    text-align: center;
}

.care-assessment-level__pill {
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.3;
    border-radius: var(--care-app-radius-sm, 0.35rem);
    padding: 0.15rem 0.45rem;
    border: 1px solid transparent;
    max-width: 100%;
    overflow-wrap: anywhere;
}

.care-assessment-level__score {
    font-size: 0.8rem;
    font-weight: 500;
    font-variant-numeric: tabular-nums;
    color: var(--care-app-color-ink-muted);
    line-height: 1.2;
}

.care-assessment-level--unknown .care-assessment-level__pill {
    color: var(--care-app-color-ink-muted);
    background: var(--care-app-color-surface-muted);
    border-color: var(--care-app-color-border-subtle);
}

.care-assessment-level--maturity-normal-l5 .care-assessment-level__pill,
.care-assessment-level--maturity-reversed-l0 .care-assessment-level__pill {
    color: var(--care-app-color-success-ink);
    background: var(--care-app-color-success-surface);
    border-color: var(--care-app-color-success-border);
}

.care-assessment-level--maturity-normal-l0 .care-assessment-level__pill,
.care-assessment-level--maturity-reversed-l5 .care-assessment-level__pill {
    color: var(--care-app-color-danger-ink);
    background: var(--care-app-color-danger-surface);
    border-color: var(--care-app-color-danger-border);
}

.care-assessment-level--maturity-normal-l1 .care-assessment-level__pill {
    color: var(--care-app-color-danger-ink);
    background: color-mix(in srgb, var(--care-app-color-danger-surface) 72%, var(--care-app-color-surface-default));
    border-color: color-mix(in srgb, var(--care-app-color-danger-border) 65%, var(--care-app-color-border-subtle));
}

.care-assessment-level--maturity-normal-l2 .care-assessment-level__pill {
    color: var(--care-app-color-accent-hover);
    background: color-mix(in srgb, var(--care-app-color-accent-muted-bg) 50%, var(--care-app-color-danger-surface) 35%);
    border-color: color-mix(in srgb, var(--care-app-color-accent) 22%, var(--care-app-color-border-subtle));
}

.care-assessment-level--maturity-normal-l3 .care-assessment-level__pill {
    color: var(--care-app-color-accent-hover);
    background: color-mix(in srgb, var(--care-app-color-success-surface) 38%, var(--care-app-color-accent-muted-bg) 45%);
    border-color: color-mix(in srgb, var(--care-app-color-success-border) 25%, var(--care-app-color-accent) 20%);
}

.care-assessment-level--maturity-normal-l4 .care-assessment-level__pill {
    color: var(--care-app-color-success-ink);
    background: color-mix(in srgb, var(--care-app-color-success-surface) 78%, var(--care-app-color-surface-default));
    border-color: var(--care-app-color-success-border);
}

.care-assessment-level--maturity-reversed-l1 .care-assessment-level__pill {
    color: var(--care-app-color-success-ink);
    background: color-mix(in srgb, var(--care-app-color-success-surface) 72%, var(--care-app-color-surface-default));
    border-color: color-mix(in srgb, var(--care-app-color-success-border) 55%, var(--care-app-color-border-subtle));
}

.care-assessment-level--maturity-reversed-l2 .care-assessment-level__pill {
    color: var(--care-app-color-accent-hover);
    background: color-mix(in srgb, var(--care-app-color-accent-muted-bg) 48%, var(--care-app-color-success-surface) 32%);
    border-color: color-mix(in srgb, var(--care-app-color-accent) 24%, var(--care-app-color-border-subtle));
}

.care-assessment-level--maturity-reversed-l3 .care-assessment-level__pill {
    color: var(--care-app-color-accent-hover);
    background: color-mix(in srgb, var(--care-app-color-danger-surface) 35%, var(--care-app-color-accent-muted-bg) 42%);
    border-color: color-mix(in srgb, var(--care-app-color-danger-border) 22%, var(--care-app-color-accent) 18%);
}

.care-assessment-level--maturity-reversed-l4 .care-assessment-level__pill {
    color: var(--care-app-color-danger-ink);
    background: color-mix(in srgb, var(--care-app-color-danger-surface) 78%, var(--care-app-color-surface-default));
    border-color: var(--care-app-color-danger-border);
}

/* —— Agent name + pending-review light (emit .care-agent-name-with-pending) —— */
.care-agent-name-with-pending {
    display: inline-flex;
    align-items: center;
    gap: var(--care-app-space-xs);
    min-width: 0;
    max-width: 100%;
}

.care-agent-name-with-pending .care-link {
    min-width: 0;
}

.care-pending-review-light {
    width: 0.65rem;
    height: 0.65rem;
}

/* Truncate long link text inside fixed table cells. */
.care-link--truncate {
    display: block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* —— Shared callouts (status strips, pending notices, quiet status) —— */
.care-callout {
    margin: 0 0 var(--care-app-space-md);
    padding: var(--care-app-space-sm) var(--care-app-space-md);
    border-radius: var(--care-app-radius-sm);
    border: var(--care-app-border-width-hairline) solid var(--care-app-color-border);
    background: var(--care-app-color-surface-muted);
    font-size: var(--care-app-type-size-caption);
    line-height: var(--care-app-type-leading-snug);
}

.care-callout > :first-child,
.care-nest__body > :first-child {
    margin-block-start: 0;
}

.care-callout > :last-child {
    margin-block-end: 0;
}

.care-callout--info {
    max-width: var(--care-app-measure-prose);
    padding: var(--care-app-space-md) var(--care-app-space-lg);
    border-radius: var(--care-app-radius-md);
    border-color: var(--care-app-color-info-border);
    border-left: 4px solid var(--care-app-color-accent-info);
    background: var(--care-app-color-info-surface);
    color: var(--care-app-color-info-ink);
}

.care-callout--info strong {
    color: inherit;
}

.care-callout--quiet {
    color: var(--care-app-color-ink-muted);
}

.care-callout--ok {
    background: var(--care-app-color-surface-elevated);
}

.care-callout__error {
    margin: 0.35rem 0;
    color: var(--care-app-color-danger);
}

/* —— Nested details inside a section (docs nests, tool panels) —— */
.care-nest {
    margin-block-start: var(--care-app-space-sm);
    border: var(--care-app-border-width-hairline) solid var(--care-app-color-border);
    border-radius: var(--care-app-radius-sm);
    background: var(--care-app-color-surface-muted);
}

.care-nest__summary {
    padding: var(--care-app-space-xs) var(--care-app-space-sm);
    cursor: pointer;
    font-weight: var(--care-app-type-weight-heading);
    font-size: var(--care-app-type-size-caption);
    list-style-position: outside;
}

.care-nest__body {
    padding: 0 var(--care-app-space-sm) var(--care-app-space-sm);
    font-size: var(--care-app-type-size-caption);
    line-height: 1.45;
}

/* Plain prose lists only — classed rosters (e.g. .care-improvement-list) keep their own chrome. */
.care-nest__body ul:not([class]) {
    margin: 0.35rem 0 0;
    padding-inline-start: 1.15rem;
}

/* —— Scrollable mono code / payload blocks —— */
.care-code-block {
    max-height: 12rem;
    overflow: auto;
    margin: 0.35rem 0 0.5rem;
    padding: var(--care-app-space-sm);
    border-radius: var(--care-app-radius-sm);
    background: var(--care-app-color-surface-muted);
    font-family: ui-monospace, monospace;
    font-size: 0.75rem;
    white-space: pre-wrap;
    word-break: break-word;
}

.care-code-block--roomy {
    max-height: 18rem;
}

.care-code-block--compact {
    max-height: 10rem;
}

.care-code-block--break-all {
    word-break: break-all;
}

code.care-code-inline {
    font-size: 0.92em;
    word-break: break-all;
}

/* —— File drop target around a field —— */
.care-dropzone {
    margin: 0.35rem 0 0;
    padding: var(--care-app-space-md);
    border: 1px dashed var(--care-app-color-border-subtle);
    border-radius: var(--care-app-radius-md);
    background: var(--care-app-color-surface-default);
    transition: border-color var(--care-app-motion-duration-interaction) var(--care-app-motion-ease),
        background-color var(--care-app-motion-duration-interaction) var(--care-app-motion-ease);
}

.care-dropzone--active {
    border-color: var(--care-app-color-accent-primary);
    background: var(--care-app-color-surface-muted);
}

.care-dropzone--wide {
    max-width: 52rem;
}

.care-dropzone__hint {
    margin: 0 0 var(--care-app-space-sm);
    font-size: var(--care-app-type-size-caption);
    color: var(--care-app-color-ink-muted);
}

.care-dropzone__actions {
    margin: 0 0 var(--care-app-space-sm);
}

/* Horizontal button / control cluster (start-aligned); also page CTA rows under titles. */
.care-btn-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--care-app-space-sm);
    margin-block-start: var(--care-app-space-sm);
    margin-block-end: var(--care-app-space-md);
}

.care-muted {
    color: var(--care-app-color-ink-muted);
}

/* —— Forms: field groups —— */
:where(html.care-app) form p {
    margin: 0 0 var(--care-app-space-md);
    max-width: var(--care-app-measure-prose);
}

/* Wide form hosts already emit .care-form-fields--full (do not list data-care-page). */
.care-form-fields--full form p,
form.care-form-fields--full p,
.care-form-fields--full > p {
    max-width: none;
}

/* Form labels — emit .care-label (do not paint every label). */
.care-label {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--care-app-space-xs);
    font-size: var(--care-app-type-size-caption);
    font-weight: var(--care-app-type-weight-heading);
    color: var(--care-app-color-ink-secondary);
}

.care-label:has(.care-check) {
    flex-direction: row;
    align-items: flex-start;
    gap: var(--care-app-space-sm);
    font-weight: var(--care-app-type-weight-body);
}

/* Standard field — emit .care-control (text / select / textarea). Textareas get a taller default measure. */
.care-control {
    box-sizing: border-box;
    width: 100%;
    max-width: min(100%, 28rem);
    padding: var(--care-app-space-xs) var(--care-app-space-md);
    font: inherit;
    line-height: var(--care-app-type-leading-snug);
    color: var(--care-app-color-control-text);
    background: var(--care-app-color-control-bg);
    border: var(--care-app-border-width-hairline) solid var(--care-app-color-control-border);
    border-radius: var(--care-app-radius-md);
    box-shadow: var(--care-app-shadow-none);
    transition:
        border-color var(--care-app-motion-duration-interaction) var(--care-app-motion-ease),
        box-shadow var(--care-app-motion-duration-interaction) var(--care-app-motion-ease);
}

textarea.care-control {
    min-height: 8rem;
    resize: vertical;
    max-width: min(100%, 36rem);
}

.care-control--mono {
    font-family: ui-monospace, monospace;
    font-size: 0.8125rem;
}

textarea.care-control--mono {
    min-height: 14rem;
}

.care-control:disabled,
button:disabled:not(.gsi-material-button) {
    opacity: 0.55;
    cursor: not-allowed;
}

.care-control:focus-visible {
    outline: none;
    border-color: var(--care-app-color-accent);
    box-shadow: 0 0 0 1px var(--care-app-color-accent);
}

/* Checkbox — emit .care-check (not .care-control). Switches stay on .care-switch. */
.care-check {
    width: auto;
    max-width: none;
    margin-top: var(--care-app-space-2xs);
    accent-color: var(--care-app-color-accent);
}

/* Shared go / open affordance — filled disc + chevron (not a literal “>”).
 * Disc inherits host text color (currentColor). See docs/standard-ui-components.md §11. */
.care-go-icon {
    display: block;
    width: 1.15rem;
    height: 1.15rem;
    flex: 0 0 auto;
    color: inherit;
    opacity: 0.5;
    transition: opacity var(--care-app-motion-duration-interaction) var(--care-app-motion-ease);
}

.care-go-icon__disc {
    fill: currentColor;
}

.care-go-icon__chevron {
    stroke: var(--care-app-color-surface-default);
}

:is(a, button):hover .care-go-icon,
:is(a, button):focus-visible .care-go-icon {
    opacity: 1;
}

/* Collapsible admin sections: agent governance + manage-organization */
.care-section-details-shell,
.care-section-details {
    margin-block-start: var(--care-app-space-md);
}

.care-section-details-shell {
    position: relative;
}

.care-section-details-shell > .care-section-details {
    margin-block-start: 0;
}

.care-section-details {
    border: var(--care-app-border-width-hairline) solid var(--care-app-color-border-subtle);
    border-radius: var(--care-app-radius-md);
    background: var(--care-app-color-surface-subtle);
}

.care-form-fields--full fieldset > .care-section-details-shell:first-of-type,
.care-form-fields--full > .care-section-details-shell:first-of-type,
.care-app-shell__main > .care-section-details-shell:first-of-type,
.care-form-fields--full fieldset > .care-section-details:first-of-type,
.care-form-fields--full > .care-section-details:first-of-type,
.care-app-shell__main > .care-section-details:first-of-type {
    margin-block-start: var(--care-app-space-lg);
}

.care-section-details__summary {
    display: flex;
    align-items: center;
    gap: var(--care-app-space-sm);
    padding: var(--care-app-space-sm) var(--care-app-space-md);
    font-size: var(--care-app-type-size-heading-2);
    font-weight: var(--care-app-type-weight-heading);
    line-height: var(--care-app-type-leading-snug);
    letter-spacing: var(--care-app-type-tracking-heading);
    color: var(--care-app-color-ink-primary);
    cursor: pointer;
}

.care-section-details__title {
    display: inline-block;
    flex: 1 1 auto;
    min-width: 0;
}

.care-section-details__summary-tools {
    display: inline-flex;
    align-items: center;
    gap: var(--care-app-space-xs);
}

/* Outside <summary>, overlaid on the header so tools stay visible when collapsed. */
.care-section-details-shell > .care-section-details__summary-tools {
    position: absolute;
    inset-block-start: 0;
    inset-inline-end: 0;
    z-index: 1;
    box-sizing: border-box;
    min-block-size: calc(
        var(--care-app-space-sm) * 2 + var(--care-app-type-leading-snug) * var(--care-app-type-size-heading-2)
    );
    padding-block: var(--care-app-space-sm);
    padding-inline: var(--care-app-space-md);
}

.care-section-details-shell > .care-section-details > .care-section-details__summary {
    /* Reserve room so the title does not sit under absolute tools (? ± trash). */
    padding-inline-end: calc(var(--care-app-space-md) + 4.5rem);
}

.care-section-details__summary-tools .care-field-help {
    cursor: default;
}

.care-section-details__body {
    padding: var(--care-app-space-sm) var(--care-app-space-md) var(--care-app-space-md);
    border-block-start: var(--care-app-border-width-hairline) solid var(--care-app-color-border-subtle);
}

/* —— Settings boolean: switch (checkbox + track), not assessment tiles —— */
label.care-switch {
    position: relative;
    display: inline-block;
    flex-shrink: 0;
    width: 2.75rem;
    height: 1.5rem;
    vertical-align: middle;
    cursor: pointer;
    margin: 0;
}

.care-switch input {
    opacity: 0;
    width: 0;
    height: 0;
    margin: 0;
    position: absolute;
}

.care-switch-track {
    position: absolute;
    cursor: pointer;
    inset: 0;
    border-radius: 999px;
    background-color: var(--care-app-color-border-subtle);
    transition: background-color var(--care-app-motion-duration-interaction) var(--care-app-motion-ease);
}

.care-switch-track::after {
    position: absolute;
    content: "";
    width: 1.125rem;
    height: 1.125rem;
    left: 0.1875rem;
    bottom: 0.1875rem;
    border-radius: 50%;
    background-color: var(--care-app-color-surface-elevated);
    box-shadow: 0 0.06rem 0.2rem rgb(15 23 42 / 0.2);
    transition: transform var(--care-app-motion-duration-interaction) var(--care-app-motion-ease);
}

.care-switch input:checked + .care-switch-track {
    background-color: var(--care-app-color-accent);
}

.care-switch input:focus-visible + .care-switch-track {
    outline: 2px solid var(--care-app-color-focus-ring);
    outline-offset: 2px;
}

.care-switch input:checked + .care-switch-track::after {
    transform: translateX(1.125rem);
}

.care-switch input:disabled + .care-switch-track {
    cursor: not-allowed;
    opacity: 0.55;
}

.care-switch input:disabled + .care-switch-track::after {
    background-color: var(--care-app-color-surface-default);
}

/* Dense preference / privilege lists: label left, switch right (prefer over card grid for ≤~6 peers). */
.care-settings-switch-stack {
    display: flex;
    flex-direction: column;
    gap: var(--care-app-space-sm);
    margin: 0;
    padding: 0;
    max-width: min(100%, 40rem);
}

.care-settings-switch-stack > .care-settings-switch-row {
    margin-block-start: 0;
    width: 100%;
    max-width: none;
    align-items: center;
    padding-block: var(--care-app-space-xs);
    border-block-end: var(--care-app-border-width-hairline) solid var(--care-app-color-border-subtle);
}

.care-settings-switch-stack > .care-settings-switch-row:last-child {
    border-block-end: none;
}

/* Switch on the left, label/copy on the right — easier vertical scanning. */
.care-settings-switch-row {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: flex-start;
    gap: var(--care-app-space-md);
    width: 100%;
    max-width: min(100%, 40rem);
    margin-block-start: var(--care-app-space-md);
    font-size: var(--care-app-type-size-caption);
    color: var(--care-app-color-ink-secondary);
}

.care-settings-switch-row__copy {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: var(--care-app-space-2xs, 0.25rem);
}

label.care-settings-switch-row__text,
.care-settings-switch-row__text {
    flex: 1;
    min-width: 0;
    margin: 0;
    line-height: var(--care-app-type-leading-snug);
    cursor: pointer;
    font-weight: var(--care-app-type-weight-heading);
    color: var(--care-app-color-ink-primary);
}

.care-settings-switch-row .care-switch {
    flex-shrink: 0;
    order: -1;
    margin-block-start: 0.15rem;
}

.care-settings-switch-stack > .care-settings-switch-row .care-switch {
    margin-block-start: 0;
}

.care-tabular-view code {
    font-size: var(--care-app-type-size-caption);
}

/* Full-bleed fields: drop .care-control’s 28rem cap (hosts emit these contexts). */
.care-form-fields--full {
    min-width: 0;
    max-width: 100%;
}

.care-form-fields--full .care-control,
.care-form-stack__row .care-control,
.care-field-grid__field .care-control {
    max-width: 100%;
    min-width: 0;
}

/* Tabular data in the authenticated app: `care-tabular-view` (+ wrap). */
.care-tabular-view-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    margin-block-end: var(--care-app-space-md);
    min-width: 0;
    max-width: 100%;
}

table.care-tabular-view {
    width: 100%;
    /* Wide layouts: do not use percentage min-width — it often resolves a few px wider than the scrollport
       (scrollbar gutter, subpixels) and forces a pointless horizontal bar. Narrow viewports: floor below. */
    min-width: 0;
    table-layout: fixed;
    border-collapse: collapse;
    font-size: var(--care-app-type-size-caption);
    color: var(--care-app-color-ink-secondary);
}

table.care-tabular-view :is(td, th) {
    min-width: 0;
}

/* UA styles often center `th`; keep ownership / stakeholder role labels left-aligned */
table.care-tabular-view th {
    text-align: start;
    padding: var(--care-app-space-sm) var(--care-app-space-md);
    font-weight: var(--care-app-type-weight-heading);
    color: var(--care-app-color-ink-primary);
    border-bottom: var(--care-app-border-width-hairline) solid var(--care-app-color-border-subtle);
    vertical-align: middle;
    white-space: nowrap;
}

/* Action / icon columns: extra class on `th`/`td` beats `th { text-align: start }` (0,1,3). */
table.care-tabular-view tbody td {
    /* Fixed layout: cell boxes are authoritative — do not paint into neighbors. */
    overflow: hidden;
    padding: var(--care-app-space-sm) var(--care-app-space-md);
    border-bottom: var(--care-app-border-width-hairline) solid var(--care-app-color-border-subtle);
    vertical-align: middle;
}

table.care-tabular-view :is(th.care-tabular-view__col-actions, td.care-tabular-view__col-actions) {
    text-align: end;
    vertical-align: middle;
    white-space: nowrap;
    width: 1%;
    min-width: 6.5rem;
}

table.care-tabular-view th.care-tabular-view__col-actions {
    vertical-align: bottom;
}

/*
 * Multi-button clusters need a real column share under table-layout:fixed.
 * width:1% alone leaves ~nothing; content then overflows and covers Status/Reporter.
 * Size the column in thead terms and keep buttons compact so they fit inside it.
 */
table.care-tabular-view:has(.care-tabular-actions) :is(th, td).care-tabular-view__col-actions {
    width: 13.5rem;
    min-width: 13.5rem;
}

/* Inline row forms (confirm + submit) must stay on one line inside the actions column. */
table.care-tabular-view .care-tabular-view__col-actions .care-form-inline {
    flex-wrap: nowrap;
}

/* End-aligned body cells (team, lifecycle, timestamps, …). */
.care-tabular-view__cell--end {
    text-align: end;
}

/* Tabular / stamp cells (relative “updated” etc.). */
.care-tabular-view__stamp {
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

/* Cluster of end-aligned actions inside a cell or card field. */
.care-tabular-actions {
    display: flex;
    flex-wrap: nowrap;
    gap: var(--care-app-space-xs);
    justify-content: flex-end;
    align-items: center;
    max-width: 100%;
}

/* Row-action density: fit the reserved column; do not force equal wide tiles. */
table.care-tabular-view .care-tabular-actions > .care-btn {
    flex: 0 1 auto;
    min-width: 0;
    padding-block: var(--care-app-space-xs);
    padding-inline: var(--care-app-space-sm);
    font-size: var(--care-app-type-size-caption);
}

/* Roster / tool section headings (h2/h3 under a surface). */
.care-section-heading {
    margin: 0 0 var(--care-app-space-md);
    font-size: var(--care-app-type-size-heading-3);
    font-weight: var(--care-app-type-weight-heading);
}

/* Cap / create cluster: blocked-hint spacing under the CTA. */
.care-create-cap .care-quota-blocked-hint,
.care-create-cap .care-agent-blocked-hint {
    margin-block-start: var(--care-app-space-sm);
    margin-block-end: 0;
    text-align: start;
}

/*
 * Sortable column headers: emit `care-th-sort-cell` on `th` + `care-th-sort` on the button.
 * Direction modifiers live on the cell (`--asc` / `--desc`); `--end` right-aligns the control.
 */
.care-th-sort-cell {
    padding: 0;
    vertical-align: top;
    min-width: 0;
}

.care-th-sort {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: var(--care-app-space-xs);
    width: 100%;
    min-width: 0;
    margin: 0;
    padding: var(--care-app-space-sm) var(--care-app-space-md);
    font: inherit;
    font-weight: var(--care-app-type-weight-heading);
    text-align: start;
    color: var(--care-app-color-ink-primary);
    background: transparent;
    border: none;
    border-radius: var(--care-app-radius-sm);
    cursor: pointer;
    box-sizing: border-box;
}

.care-th-sort:hover {
    background: var(--care-app-color-surface-subtle);
}

.care-th-sort:focus-visible,
.care-app-sidebar__group-summary:focus-visible,
.care-app-nav-toggle:focus-visible,
.care-app-topbar .care-inty-topbar-account__tools-label:focus-visible {
    outline: var(--care-app-focus-ring-width) solid var(--care-app-color-focus-ring);
    outline-offset: var(--care-app-focus-ring-offset);
}

.care-th-sort::after {
    content: '';
    flex-shrink: 0;
    width: 0.65rem;
    height: 0.65rem;
    opacity: 0.35;
    border-inline-end: 2px solid currentColor;
    border-block-end: 2px solid currentColor;
    transform: rotate(45deg);
    margin-block-end: 0.15rem;
}

.care-th-sort-cell--asc .care-th-sort::after {
    opacity: 1;
    transform: rotate(-135deg);
    margin-block-end: -0.1rem;
}

.care-th-sort-cell--desc .care-th-sort::after {
    opacity: 1;
    transform: rotate(45deg);
    margin-block-end: 0.2rem;
}

.care-th-sort-cell--end .care-th-sort {
    justify-content: flex-end;
    text-align: end;
}

table.care-tabular-view thead th {
    border-bottom: var(--care-app-border-width-emphasis) solid var(--care-app-color-border-subtle);
}

/* —— Fieldset —— */
:where(html.care-app) fieldset {
    margin: var(--care-app-space-md) 0;
    padding: var(--care-app-space-md) var(--care-app-space-lg);
    max-width: min(100%, 44rem);
    border: var(--care-app-border-width-hairline) solid var(--care-app-color-border-subtle);
    border-radius: var(--care-app-radius-md);
    background: var(--care-app-color-surface-subtle);
}

:where(html.care-app) fieldset ul {
    list-style: none;
    padding-inline-start: 0;
    margin-block-end: 0;
}

:where(html.care-app) legend {
    padding-inline: var(--care-app-space-xs);
    font-weight: var(--care-app-type-weight-heading);
    color: var(--care-app-color-ink-primary);
}

/* —— Inline forms (table row actions) —— */
.care-form-inline {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--care-app-space-sm);
    margin: 0;
    vertical-align: middle;
}

.care-form-inline label {
    display: inline;
    font-weight: var(--care-app-type-weight-body);
}

.care-form-inline select {
    width: auto;
    max-width: 12rem;
}

/* —— Markup/docs tables only (app data tables emit .care-tabular-view and own their paint) —— */
:where(html.care-app) section:has(> table:not(.care-tabular-view):not(.care-compare-table)) {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

:where(html.care-app) table:not(.care-tabular-view):not(.care-compare-table) {
    width: 100%;
    min-width: min(100%, 32rem);
    border-collapse: collapse;
    font-size: var(--care-app-type-size-caption);
    color: var(--care-app-color-ink-secondary);
}

:where(html.care-app) table:not(.care-tabular-view):not(.care-compare-table) thead th {
    text-align: left;
    padding: var(--care-app-space-sm) var(--care-app-space-md);
    font-weight: var(--care-app-type-weight-heading);
    color: var(--care-app-color-ink-primary);
    border-bottom: var(--care-app-border-width-emphasis) solid var(--care-app-color-border-subtle);
    white-space: nowrap;
}

:where(html.care-app) table:not(.care-tabular-view):not(.care-compare-table) tbody td {
    padding: var(--care-app-space-sm) var(--care-app-space-md);
    border-bottom: var(--care-app-border-width-hairline) solid var(--care-app-color-border-subtle);
    vertical-align: middle;
}

:where(html.care-app) table:not(.care-tabular-view):not(.care-compare-table) tbody tr:nth-child(even) {
    background: var(--care-app-table-stripe);
}

/* —— Inline code fallback (payload blocks emit .care-code-block / .care-code-inline) —— */
:where(html.care-app) code:not(.care-code-inline) {
    font-family: var(--care-app-type-family-mono);
    font-size: 0.9em;
    padding: var(--care-app-space-2xs) var(--care-app-space-xs);
    border-radius: var(--care-app-radius-sm);
    background: var(--care-app-color-code-surface);
    color: var(--care-app-color-code-ink);
}

.care-code-block code {
    padding: 0;
    background: transparent;
    color: inherit;
    border-radius: 0;
    font-size: inherit;
}

/* Quota-blocked primary create (subscription toggles) */
button.care-btn--quota-blocked:disabled,
button[disabled].care-btn--quota-blocked {
    opacity: 0.45;
    cursor: not-allowed;
}

.care-quota-blocked-hint,
.care-agent-blocked-hint {
    margin-block-start: var(--care-app-space-sm);
    max-width: min(100%, 40rem);
    font-size: var(--care-app-type-size-caption);
    line-height: var(--care-app-type-leading-snug);
    color: var(--care-app-color-ink-muted);
}

.care-agent-blocked-hint {
    margin-block-start: 0;
    margin-block-end: var(--care-app-space-md);
}

.care-quota-upgrade-link {
    font-weight: 600;
}

/* Quiet status captions (retired / no-access / locked map notes). */
.care-readonly-note {
    margin: 0 0 var(--care-app-space-md);
    font-size: var(--care-app-type-size-caption);
    line-height: var(--care-app-type-leading-snug);
    color: var(--care-app-color-ink-muted);
}

/* Required-slot suffix on ownership / form labels. */
.care-req {
    font-weight: var(--care-app-type-weight-body);
    color: var(--care-app-color-ink-muted);
}

/* —— Screen reader utility —— */
.care-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* —— Back link prominence (wide manage hosts) —— */
.care-app-shell__main.care-form-fields--full > p:first-of-type {
    margin-block-end: var(--care-app-space-lg);
}

/* —— Authenticated shell: full-width top bar + sidebar row —— */
.care-app-shell {
    --care-app-topbar-height: 3.5rem;

    display: flex;
    flex-direction: column;
    align-items: stretch;
    min-height: 100dvh;
    width: 100%;
}

.care-app-shell--scroll-lock,
.care-app-shell--scroll-lock body {
    overflow: hidden;
}

.care-app-shell__main-row {
    display: flex;
    flex: 1;
    min-height: 0;
    align-items: stretch;
    width: 100%;
}

.care-app-sidebar {
    box-sizing: border-box;
    flex: 0 0 15rem;
    max-width: 100%;
    padding: var(--care-app-space-md) var(--care-app-space-lg);
    border-inline-end: var(--care-app-border-width-hairline) solid var(--care-app-color-border-subtle);
    background: var(--care-app-color-surface-default);
    box-shadow: var(--care-app-shadow-raised);
    /* Stay under the main column so field-help tooltips are not covered by the sidebar chrome/shadow. */
    position: relative;
    z-index: 0;
}

.care-app-shell__column {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    background: var(--care-app-color-canvas);
    /* Above the sidebar stacking context so field-help tooltips clear the sidebar edge/shadow. */
    position: relative;
    z-index: 1;
}

.care-app-sidebar__section--scope {
    margin-block-end: var(--care-app-space-lg);
    padding-block-end: var(--care-app-space-md);
    border-block-end: var(--care-app-border-width-hairline) solid var(--care-app-color-border-subtle);
}

.care-app-sidebar__scope-form {
    display: flex;
    flex-direction: column;
    gap: var(--care-app-space-xs);
}

.care-app-sidebar__scope-label {
    display: block;
    margin: 0;
    font-size: var(--care-app-type-size-caption);
    font-weight: var(--care-app-type-weight-heading);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--care-app-color-ink-muted);
}

.care-app-sidebar__scope-select {
    width: 100%;
    box-sizing: border-box;
    font: inherit;
    font-size: var(--care-app-type-size-caption);
    padding: 0.35rem 0.5rem;
    border-radius: var(--care-app-radius-sm);
    border: 1px solid var(--care-app-color-border-subtle);
    background: var(--care-app-color-control-bg);
    color: var(--care-app-color-control-text);
}

.care-app-sidebar__section {
    margin-block-end: var(--care-app-space-md);
}

/* Sidebar section cards */
.care-app-sidebar__group {
    border: 1px dashed var(--care-app-color-border-subtle);
    border-radius: var(--care-app-radius-lg);
    padding: 0.625rem 0.75rem;
    background: var(--care-app-color-surface-subtle);
}

.care-app-sidebar__group[open] {
    background: color-mix(in srgb, var(--care-app-color-surface-default) 86%, var(--care-app-color-accent-muted-bg));
}

.care-app-sidebar__group-summary {
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--care-app-space-sm);
    padding: var(--care-app-space-xs) var(--care-app-space-sm);
    margin-inline: calc(-1 * var(--care-app-space-sm));
    border-radius: var(--care-app-radius-sm);
    cursor: pointer;
    user-select: none;
}

.care-app-sidebar__group-summary::-webkit-details-marker,
.care-app-topbar .care-inty-topbar-account__summary::-webkit-details-marker,
.care-app-topbar .care-inty-topbar-account__tools-label::-webkit-details-marker {
    display: none;
}

.care-app-sidebar__group-summary::after {
    content: "";
    inline-size: 0.45rem;
    block-size: 0.45rem;
    border-inline-end: var(--care-app-border-width-hairline) solid currentColor;
    border-block-end: var(--care-app-border-width-hairline) solid currentColor;
    transform: rotate(45deg);
    transition: transform var(--care-app-motion-duration-interaction) var(--care-app-motion-ease);
    opacity: 0.8;
}

.care-app-sidebar__group[open] > .care-app-sidebar__group-summary::after,
.care-app-topbar .care-inty-topbar-account__tools[open] > .care-inty-topbar-account__tools-label::after {
    transform: rotate(225deg);
}

.care-app-sidebar__group-summary:hover {
    color: var(--care-app-color-ink-secondary);
    background: color-mix(in srgb, var(--care-app-color-surface-default) 74%, var(--care-app-color-accent-muted-bg));
}

.care-app-sidebar__group-body {
    padding-block-start: var(--care-app-space-xs);
}

.care-app-sidebar__heading {
    margin: 0 0 var(--care-app-space-sm);
    font-size: var(--care-app-type-size-caption);
    font-weight: var(--care-app-type-weight-heading);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--care-app-color-ink-muted);
}

.care-app-sidebar__group-summary.care-app-sidebar__heading {
    margin: 0;
}

.care-app-sidebar__list,
.care-app-topbar .care-inty-topbar-account__list,
.care-app-topbar .care-inty-topbar-account__sublist {
    list-style: none;
    margin: 0;
    padding: 0;
}

.care-app-sidebar__list li {
    margin-block: var(--care-app-space-xs);
}

.care-app-sidebar__link,
.care-app-sidebar__agent-link {
    display: block;
    padding: var(--care-app-space-xs) 0;
    font-size: var(--care-app-type-size-caption);
    text-decoration: none;
    color: var(--care-app-color-ink-secondary);
    border-radius: var(--care-app-radius-sm);
}

.care-app-sidebar__agent-link {
    display: flex;
    align-items: center;
    gap: var(--care-app-space-xs);
}

.care-app-sidebar__link:hover,
.care-app-sidebar__agent-link:hover {
    color: var(--care-app-color-accent-hover);
}

.care-app-sidebar__link--current {
    color: var(--care-app-color-accent);
    font-weight: var(--care-app-type-weight-heading);
    background: var(--care-app-color-accent-muted-bg);
    padding-inline: var(--care-app-space-sm);
    margin-inline: calc(-1 * var(--care-app-space-sm));
}

.care-app-sidebar__empty {
    font-size: var(--care-app-type-size-caption);
    color: var(--care-app-color-ink-muted);
    font-style: italic;
}

.care-app-sidebar__add {
    margin: var(--care-app-space-sm) 0 0;
}

/* Assessment index inside the shell sidebar (emit from AppShellSidebarRenderer). */
.care-app-sidebar__assess-group {
    display: block;
    font-size: var(--care-app-type-size-caption);
    font-weight: var(--care-app-type-weight-heading);
    color: var(--care-app-color-ink-muted);
    margin-block: var(--care-app-space-sm) var(--care-app-space-2xs);
}

li.care-app-sidebar__subheading {
    list-style: none;
    margin-inline: 0;
    padding: 0;
}

.care-app-sidebar__list--assessments .care-app-sidebar__assess-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--care-app-space-2xs);
    font-size: var(--care-app-type-size-caption);
    padding-block: 0.2rem;
}

.care-app-sidebar__assess-title {
    flex: 1 1 auto;
    min-width: 0;
}

/* Compact Clearance outcome chip (mirrors assessment tile tones). */
.care-assessment-outcome-badge {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.25rem;
    padding: 0.05rem 0.3rem;
    border-radius: var(--care-app-radius-sm, 0.25rem);
    border: 1px solid var(--care-app-color-border-subtle);
    font-size: 0.7rem;
    font-weight: var(--care-app-type-weight-heading);
    line-height: 1.2;
    background: var(--care-app-color-surface-muted, var(--care-app-color-surface-default));
    color: var(--care-app-color-ink-muted);
}

.care-assessment-outcome-badge--empty {
    background: var(--care-app-color-surface-muted, var(--care-app-color-surface-default));
    color: var(--care-app-color-ink-muted);
    border-color: var(--care-app-color-border-subtle);
}

.care-assessment-outcome-badge--binary-pass,
.care-assessment-outcome-badge--maturity-normal-l5,
.care-assessment-outcome-badge--maturity-reversed-l0 {
    background: var(--care-app-color-success-surface);
    border-color: var(--care-app-color-success-border);
    color: var(--care-app-color-success-ink);
}

.care-assessment-outcome-badge--binary-fail,
.care-assessment-outcome-badge--maturity-normal-l0,
.care-assessment-outcome-badge--maturity-reversed-l5 {
    background: var(--care-app-color-danger-surface);
    border-color: var(--care-app-color-danger-border);
    color: var(--care-app-color-danger-ink);
}

.care-assessment-outcome-badge--maturity-normal-l1 {
    background: color-mix(in srgb, var(--care-app-color-danger-surface) 72%, var(--care-app-color-surface-default));
    border-color: color-mix(in srgb, var(--care-app-color-danger-border) 65%, var(--care-app-color-border-subtle));
    color: var(--care-app-color-danger-ink);
}

.care-assessment-outcome-badge--maturity-normal-l2 {
    background: color-mix(in srgb, var(--care-app-color-accent-muted-bg) 50%, var(--care-app-color-danger-surface) 35%);
    border-color: color-mix(in srgb, var(--care-app-color-accent) 22%, var(--care-app-color-border-subtle));
    color: var(--care-app-color-accent-hover);
}

.care-assessment-outcome-badge--maturity-normal-l3 {
    background: color-mix(in srgb, var(--care-app-color-success-surface) 38%, var(--care-app-color-accent-muted-bg) 45%);
    border-color: color-mix(in srgb, var(--care-app-color-success-border) 25%, var(--care-app-color-accent) 20%);
    color: var(--care-app-color-accent-hover);
}

.care-assessment-outcome-badge--maturity-normal-l4 {
    background: color-mix(in srgb, var(--care-app-color-success-surface) 78%, var(--care-app-color-surface-default));
    border-color: var(--care-app-color-success-border);
    color: var(--care-app-color-success-ink);
}

.care-assessment-outcome-badge--maturity-reversed-l1 {
    background: color-mix(in srgb, var(--care-app-color-success-surface) 72%, var(--care-app-color-surface-default));
    border-color: color-mix(in srgb, var(--care-app-color-success-border) 55%, var(--care-app-color-border-subtle));
    color: var(--care-app-color-success-ink);
}

.care-assessment-outcome-badge--maturity-reversed-l2 {
    background: color-mix(in srgb, var(--care-app-color-accent-muted-bg) 48%, var(--care-app-color-success-surface) 32%);
    border-color: color-mix(in srgb, var(--care-app-color-accent) 24%, var(--care-app-color-border-subtle));
    color: var(--care-app-color-accent-hover);
}

.care-assessment-outcome-badge--maturity-reversed-l3 {
    background: color-mix(in srgb, var(--care-app-color-danger-surface) 35%, var(--care-app-color-accent-muted-bg) 42%);
    border-color: color-mix(in srgb, var(--care-app-color-danger-border) 22%, var(--care-app-color-accent) 18%);
    color: var(--care-app-color-accent-hover);
}

.care-assessment-outcome-badge--maturity-reversed-l4 {
    background: color-mix(in srgb, var(--care-app-color-danger-surface) 78%, var(--care-app-color-surface-default));
    border-color: var(--care-app-color-danger-border);
    color: var(--care-app-color-danger-ink);
}

/* Empty sidebar placeholder */
.care-app-sidebar__placeholder {
    margin: 0;
    font-size: var(--care-app-type-size-caption);
    color: var(--care-app-color-ink-muted);
}

.care-app-topbar__end {
    display: flex;
    align-items: center;
    gap: var(--care-app-space-md);
    margin-inline-start: auto;
    flex-shrink: 0;
}

.care-app-topbar__locale {
    position: relative;
    z-index: 35;
    color: var(--care-app-color-ink-primary);
}

/* care-lang-switch.css: panel is absolutely positioned; keep above topbar chrome */
.care-app-topbar__locale .care-lang-switch__panel {
    z-index: 50;
    background: var(--care-app-color-surface-default);
    border-color: var(--care-app-color-border-subtle);
    box-shadow: var(--care-app-shadow-raised);
}

.care-app-topbar__locale .care-lang-switch__summary {
    color: var(--care-app-color-ink-secondary);
    border-color: transparent;
}

.care-app-topbar__locale .care-lang-switch__summary:hover {
    background: var(--care-app-color-surface-subtle);
    border-color: var(--care-app-color-border-subtle);
    color: var(--care-app-color-accent);
}

.care-app-topbar__locale .care-lang-switch[open] > .care-lang-switch__summary {
    background: var(--care-app-color-surface-subtle);
    border-color: var(--care-app-color-border-subtle);
    color: var(--care-app-color-ink-primary);
}

.care-app-topbar__locale .care-lang-switch__opt {
    color: var(--care-app-color-ink-secondary);
}

.care-app-topbar__locale a.care-lang-switch__opt:hover {
    background: var(--care-app-color-accent-muted-bg);
    color: var(--care-app-color-accent);
}

.care-app-topbar {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: var(--care-app-space-md) var(--care-app-space-lg);
    box-sizing: border-box;
    width: 100%;
    min-height: var(--care-app-topbar-height);
    padding: var(--care-app-space-sm) var(--care-app-space-lg);
    border-block-end: var(--care-app-border-width-hairline) solid var(--care-app-color-border-subtle);
    background: var(--care-app-color-surface-default);
    flex-shrink: 0;
    /* Scrolling is confined to .care-app-shell__body; no sticky needed — avoids subpixel gaps vs. the sidebar row */
    z-index: 30;
}

.care-app-nav-toggle {
    display: none;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    margin: 0;
    padding: 0;
    border: var(--care-app-border-width-hairline) solid var(--care-app-color-border-subtle);
    border-radius: var(--care-app-radius-md);
    background: var(--care-app-color-surface-subtle);
    color: var(--care-app-color-ink-primary);
    cursor: pointer;
    transition:
        background var(--care-app-motion-duration-interaction) var(--care-app-motion-ease),
        border-color var(--care-app-motion-duration-interaction) var(--care-app-motion-ease);
}

.care-app-nav-toggle:hover {
    background: var(--care-app-color-surface-default);
    border-color: var(--care-app-color-accent);
}

.care-app-nav-toggle__bars {
    display: block;
    width: 1.125rem;
    height: 0.1rem;
    background: currentColor;
    border-radius: var(--care-app-radius-pill);
    box-shadow:
        0 0.35rem 0 currentColor,
        0 -0.35rem 0 currentColor;
}

.care-app-brand {
    display: inline-flex;
    align-items: center;
    gap: var(--care-app-space-sm);
    text-decoration: none;
    color: inherit;
    min-width: 0;
}

.care-app-brand__mark {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    line-height: 0;
}

.care-app-brand__logo {
    display: block;
    height: 2.25rem;
    width: auto;
    max-width: 2.6rem;
    object-fit: contain;
}

.care-app-brand__text {
    display: flex;
    flex-direction: column;
    line-height: var(--care-app-type-leading-tight);
}

.care-app-brand__title {
    font-size: var(--care-app-type-size-heading-3);
    font-weight: var(--care-app-type-weight-heading);
    letter-spacing: var(--care-app-type-tracking-heading);
    color: var(--care-app-color-ink-primary);
}

.care-app-brand__tagline {
    font-size: 0.65rem;
    font-weight: var(--care-app-type-weight-body);
    letter-spacing: 0.02em;
    color: var(--care-app-color-ink-muted);
    max-width: 14rem;
}

/* Topbar account menu (scoped under .care-app-topbar). */
.care-app-topbar .care-inty-topbar-account {
    position: relative;
    margin-inline-start: auto;
    border: none;
    padding: 0;
    background: transparent;
    border-radius: 0;
}

.care-app-topbar .care-inty-topbar-account__summary {
    list-style: none;
    cursor: pointer;
    font-size: var(--care-app-type-size-caption);
    font-weight: var(--care-app-type-weight-heading);
    padding: var(--care-app-space-xs) var(--care-app-space-md);
    border-radius: var(--care-app-radius-pill);
    border: var(--care-app-border-width-hairline) solid var(--care-app-color-border-subtle);
    background: var(--care-app-color-surface-subtle);
    color: var(--care-app-color-ink-primary);
}

.care-app-topbar .care-inty-topbar-account__panel {
    position: absolute;
    inset-inline-end: 0;
    margin-block-start: var(--care-app-space-xs);
    min-width: 14.5rem;
    max-height: min(70vh, 32rem);
    overflow-y: auto;
    padding: var(--care-app-space-sm);
    border-radius: var(--care-app-radius-md);
    border: var(--care-app-border-width-hairline) solid var(--care-app-color-border-subtle);
    background: var(--care-app-color-surface-default);
    box-shadow: var(--care-app-shadow-floating);
    z-index: 20;
}

.care-inty-topbar-account__link {
    display: block;
    padding: var(--care-app-space-sm) var(--care-app-space-md);
    border-radius: var(--care-app-radius-sm);
    font-size: var(--care-app-type-size-caption);
    color: var(--care-app-color-ink-primary);
    text-decoration: none;
}

.care-inty-topbar-account__link:hover {
    background: var(--care-app-color-surface-subtle);
}

/* Platform tools — collapsible toolkit in the account menu (always on shell; not page-sheet–gated). */
.care-app-topbar .care-inty-topbar-account__group {
    margin-block: var(--care-app-space-xs);
}

.care-app-topbar .care-inty-topbar-account__tools {
    margin: 0;
    padding: var(--care-app-space-sm);
    border-radius: var(--care-app-radius-md);
    border: var(--care-app-border-width-hairline) solid color-mix(in srgb, var(--care-app-color-accent) 28%, var(--care-app-color-border-subtle));
    background: color-mix(in srgb, var(--care-app-color-accent) 9%, var(--care-app-color-surface-subtle));
    box-shadow: inset 0.2rem 0 0 var(--care-app-color-accent);
}

.care-app-topbar .care-inty-topbar-account__tools-label {
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--care-app-space-sm);
    margin: 0;
    padding: var(--care-app-space-xs) var(--care-app-space-sm);
    border-radius: var(--care-app-radius-sm);
    font-size: 0.65rem;
    font-weight: var(--care-app-type-weight-heading);
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--care-app-color-accent);
    line-height: var(--care-app-type-leading-tight);
    cursor: pointer;
}

.care-app-topbar .care-inty-topbar-account__tools-label::after {
    content: "";
    flex: 0 0 auto;
    inline-size: 0.45rem;
    block-size: 0.45rem;
    border-inline-end: var(--care-app-border-width-hairline) solid currentColor;
    border-block-end: var(--care-app-border-width-hairline) solid currentColor;
    transform: rotate(45deg);
    transition: transform var(--care-app-motion-duration-interaction) var(--care-app-motion-ease);
    opacity: 0.8;
}

.care-app-topbar .care-inty-topbar-account__tools[open] > .care-inty-topbar-account__tools-label {
    margin-block-end: var(--care-app-space-xs);
}

.care-app-topbar .care-inty-topbar-account__tools-label:hover {
    background: color-mix(in srgb, var(--care-app-color-accent) 12%, var(--care-app-color-surface-default));
}

.care-app-topbar .care-inty-topbar-account__tools .care-inty-topbar-account__sublist a {
    font-weight: var(--care-app-type-weight-body);
    padding-block: 0.4rem;
}

.care-app-topbar .care-inty-topbar-account__tools .care-inty-topbar-account__sublist a:hover {
    background: color-mix(in srgb, var(--care-app-color-accent) 12%, var(--care-app-color-surface-default));
}

/* Main column scroller — grows beside the sidebar; overflow stays here. */
.care-app-shell__body {
    flex: 1;
    min-height: 0;
    min-width: 0;
    overflow: auto;
    scrollbar-gutter: stable;
}

/* Main column inside shell: full width of content area */
.care-app-shell__body > .care-app-shell__main {
    box-sizing: border-box;
    width: 100%;
    max-width: var(--care-app-width-shell-max);
    min-width: 0;
    margin-inline: 0;
    padding-inline: var(--care-app-width-shell-pad-inline);
    padding-block: var(--care-app-width-shell-pad-block);
}

.care-app-main-context {
    margin-block: 0 var(--care-app-space-md);
    font-size: var(--care-app-type-size-caption);
}

/*
 * Constrain overflow in the scrollable main column.
 * Emit .care-app-main--constrain on main; page titles emit .care-app-page-title.
 */
.care-app-main--constrain {
    min-width: 0;
}

.care-app-main--constrain .care-section-details-shell,
.care-app-main--constrain .care-section-details,
.care-app-main--constrain .care-section-details__body,
.care-app-main--constrain .care-assessment-tiles {
    min-width: 0;
    max-width: 100%;
}

.care-app-page-title {
    overflow-wrap: anywhere;
}

.care-app-main--constrain > .care-app-page-title,
.care-app-main--constrain > .care-app-main-context {
    min-width: 0;
    max-width: 100%;
}

.care-app-main--constrain > .care-app-main-context .care-link {
    overflow-wrap: anywhere;
}

/* Shell mobile nav drawer + backdrop (global chrome) */
.care-app-shell__backdrop {
    display: none;
}

.care-app-shell__backdrop:not([hidden]) {
    display: block;
    position: fixed;
    inset: 0;
    top: var(--care-app-topbar-height);
    z-index: 25;
    background: color-mix(in srgb, var(--care-app-color-ink-primary) 40%, transparent);
    border: 0;
    padding: 0;
    margin: 0;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

/* Stacked CRUD form rows (shared dialogs). */
.care-form-stack {
    margin: 0;
}

.care-form-stack__row {
    margin: 0 0 var(--care-app-space-md);
    min-width: 0;
    max-width: 100%;
}

.care-form-stack__row .care-label {
    color: var(--care-app-color-ink-primary);
    overflow-wrap: anywhere;
}

.care-form-stack__row .care-control {
    overflow-x: auto;
}

/* Shared: person cells, empty roster (icon delete → care-btn.css) */
.care-person-cell {
    display: flex;
    flex-direction: column;
    gap: var(--care-app-space-xs);
    align-items: flex-start;
    max-width: min(100%, 28rem);
}

.care-person-cell__primary {
    font-weight: var(--care-app-type-weight-heading);
    color: var(--care-app-color-ink-primary);
}

.care-person-cell__secondary {
    font-size: var(--care-app-type-size-caption);
    color: var(--care-app-color-ink-muted);
    word-break: break-word;
}

.care-empty-roster {
    color: var(--care-app-color-ink-secondary);
    font-style: italic;
}

/* Member / invite lifecycle chips (UM + platform admin). */
.care-member-blocked-badge {
    display: inline-block;
    margin-inline-start: var(--care-app-space-xs);
    padding: 0.1em 0.45em;
    font-size: var(--care-app-type-size-caption);
    font-weight: var(--care-app-type-weight-heading);
    color: var(--care-app-color-danger-ink);
    background: var(--care-app-color-danger-surface);
    border: var(--care-app-border-width-hairline) solid var(--care-app-color-danger-border);
    border-radius: var(--care-app-radius-sm);
    vertical-align: middle;
}

/* Label / field rows (UM org basics + platform admin override). */
.care-field-grid {
    display: flex;
    flex-direction: column;
    gap: var(--care-app-space-lg);
    margin-block-end: var(--care-app-space-md);
    min-width: 0;
    max-width: 100%;
}

.care-field-grid__row {
    display: grid;
    gap: var(--care-app-space-xs) var(--care-app-space-md);
    grid-template-columns: minmax(10rem, 38%) minmax(0, 1fr);
    align-items: start;
    min-width: 0;
}

/* Grid puts label beside the field; undo .care-label’s stacked flex (ink/type already match). */
.care-field-grid__label .care-label {
    display: inline;
}

.care-field-grid__field {
    min-width: 0;
}

.care-field-grid__readonly {
    margin: 0;
    padding: .625rem .75rem;
    border: var(--care-app-border-width-hairline) solid var(--care-app-color-border-subtle);
    border-radius: var(--care-app-radius-sm);
    background: var(--care-app-color-surface-subtle);
    color: var(--care-app-color-ink-muted);
    font-weight: var(--care-app-type-weight-heading);
    font-size: var(--care-app-type-size-body);
    line-height: var(--care-app-type-leading-normal);
    word-break: break-word;
}

/* ----- Media (Desktop First: sole shell layout width = 47.99rem; plus reduced-motion + print) ----- */
@media (max-width: 47.99rem) {
    table.care-tabular-view {
        min-width: 42rem;
    }

    .care-app-nav-toggle {
        display: inline-flex;
    }

    .care-app-brand__tagline {
        display: none;
    }

    .care-app-sidebar {
        position: fixed;
        top: var(--care-app-topbar-height);
        left: 0;
        bottom: 0;
        width: min(17.5rem, 88vw);
        max-width: 100%;
        z-index: 26;
        transform: translateX(-100%);
        transition: transform var(--care-app-motion-duration-interaction) var(--care-app-motion-ease);
        border-inline-end: var(--care-app-border-width-hairline) solid var(--care-app-color-border-subtle);
        border-block-end: none;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        box-shadow: var(--care-app-shadow-floating);
    }

    .care-app-shell--nav-open .care-app-sidebar {
        transform: translateX(0);
    }

    .care-app-shell__main-row {
        flex: 1;
        min-height: 0;
    }

    .care-app-shell__column {
        width: 100%;
    }

    .care-field-grid__row {
        grid-template-columns: 1fr;
    }
}

/* Durations already collapse via the motion tokens; these are the largest movements, so stop them outright. */
@media (prefers-reduced-motion: reduce) {
    .care-switch-track,
    .care-switch-track::after,
    .care-app-sidebar {
        transition: none;
    }
}

@media print {
    .no-print,
    dialog {
        display: none !important;
    }

    .print-flow {
        display: block !important;
        overflow: visible !important;
        min-height: 0 !important;
        max-height: none !important;
        height: auto !important;
        width: 100% !important;
        max-width: none !important;
        scrollbar-gutter: auto !important;
        background: #fff !important;
    }
}