:root {
    --canvas: #fff7e8;
    --surface: #fffef9;
    --surface-strong: #fff0c2;
    --ink: #23213a;
    --line: #2f2b48;
    --muted: #625f73;
    --violet: #30245f;
    --violet-hover: #4d3b8a;
    --violet-soft: #eee9ff;
    --yellow: #ffd84d;
    --yellow-soft: #fff8d6;
    --pink: #ff5d8f;
    --pink-soft: #fff4f8;
    --aqua: #32d6c1;
    --aqua-soft: #eafffb;
    --success: #17865f;
    --warning: #9b4b00;
    --danger: #a12f4f;
    --action-primary-bg: var(--pink);
    --action-primary-border: var(--line);
    --action-primary-fg: var(--ink);
    --action-secondary-bg: var(--yellow);
    --action-secondary-border: var(--line);
    --action-secondary-fg: var(--ink);
    --action-danger-bg: var(--danger);
    --action-danger-border: var(--danger);
    --action-danger-fg: #fff;
    --status-default-bg: var(--aqua-soft);
    --status-default-fg: #145c54;
    --status-default-border: #8bded1;
    --status-planned-bg: var(--yellow-soft);
    --status-planned-fg: #745100;
    --status-planned-border: #e4bf54;
    --status-active-bg: var(--aqua-soft);
    --status-active-fg: #145c54;
    --status-active-border: #8bded1;
    --status-neutral-bg: #f1f2f5;
    --status-neutral-fg: #4a4b5a;
    --status-neutral-border: #c9ccd5;
    --status-success-bg: #e8f8ef;
    --status-success-fg: #176b4d;
    --status-success-border: #8fd1ae;
    --status-blocked-bg: var(--pink-soft);
    --status-blocked-fg: #8f2547;
    --status-blocked-border: #e99ab2;
    --shadow: 6px 6px 0 rgb(47 43 72 / 95%);
    --shadow-small: 3px 3px 0 var(--line);
    --focus: #1262d3;
    --control-height: 2.75rem;
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    color: var(--ink);
    background: var(--canvas);
}

* {
    box-sizing: border-box;
}

html {
    min-width: 20rem;
    color-scheme: light;
    scroll-behavior: smooth;
}

body {
    min-height: 100vh;
    margin: 0;
    background-color: var(--canvas);
    background-image:
        radial-gradient(circle at 9% 7%, rgb(255 93 143 / 17%) 0 5.5rem, transparent 5.6rem),
        radial-gradient(circle at 92% 17%, rgb(50 214 193 / 19%) 0 7rem, transparent 7.1rem),
        linear-gradient(rgb(47 43 72 / 4.5%) 1px, transparent 1px),
        linear-gradient(90deg, rgb(47 43 72 / 4.5%) 1px, transparent 1px);
    background-size: auto, auto, 28px 28px, 28px 28px;
    background-attachment: fixed;
}

button,
input,
select,
textarea {
    font: inherit;
}

button,
summary {
    cursor: pointer;
}

a {
    color: inherit;
    text-decoration: none;
}

img,
svg,
canvas {
    max-width: 100%;
}

h1,
h2,
h3,
p {
    margin-top: 0;
}

h1,
h2,
h3 {
    color: var(--ink);
    font-family: "Segoe UI Variable Display", "Aptos Display", "Segoe UI Variable Text", system-ui, sans-serif;
    line-height: 1.08;
    letter-spacing: -.035em;
}

h1 {
    margin-bottom: .65rem;
    font-size: clamp(2.25rem, 5vw, 4.75rem);
    font-weight: 850;
}

h2 {
    margin-bottom: .5rem;
    font-size: clamp(1.55rem, 3vw, 2.25rem);
    font-weight: 820;
}

h3 {
    margin-bottom: .45rem;
    font-size: 1.1rem;
    font-weight: 800;
}

:where(a, button, input, select, textarea, summary):focus-visible {
    outline: 3px solid var(--focus);
    outline-offset: 3px;
}

.visually-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

.brand {
    display: inline-flex;
    min-height: 2.75rem;
    gap: .75rem;
    align-items: center;
    font-size: 1.05rem;
    font-weight: 850;
    letter-spacing: -.025em;
}

.brand__mark {
    display: grid;
    width: 2.35rem;
    height: 2.35rem;
    flex: 0 0 auto;
    place-items: center;
    border: 2px solid var(--line);
    border-radius: .7rem .55rem .8rem .6rem;
    color: var(--ink);
    background: var(--yellow);
    box-shadow: var(--shadow-small);
    transform: rotate(-2deg);
}

.eyebrow {
    display: inline-block;
    margin-bottom: .7rem;
    padding: .35rem .55rem;
    border: 2px solid var(--line);
    border-radius: .55rem;
    color: var(--ink);
    background: var(--yellow);
    box-shadow: 2px 2px 0 var(--line);
    font-size: .7rem;
    font-weight: 850;
    letter-spacing: .12em;
    line-height: 1;
    text-transform: uppercase;
    transform: rotate(-1deg);
}

.muted,
.lede {
    color: var(--muted);
    line-height: 1.65;
}

.lede {
    max-width: 38rem;
    font-size: clamp(1rem, 2vw, 1.15rem);
}

.stack-lg {
    display: grid;
    gap: 1.75rem;
}

.cluster {
    display: flex;
    flex-wrap: wrap;
    gap: .65rem;
    align-items: center;
}

.flash-stack {
    position: fixed;
    z-index: 100;
    top: 1rem;
    right: 1rem;
    display: grid;
    width: min(28rem, calc(100vw - 2rem));
    gap: .65rem;
    pointer-events: none;
}

.language-switch {
    position: fixed;
    z-index: 110;
    top: 1rem;
    right: 1rem;
}

.language-switch button {
    display: grid;
    width: 2.75rem;
    height: 2.75rem;
    padding: 0;
    place-items: center;
    border: 2px solid var(--line);
    border-radius: .75rem;
    background: var(--surface);
    box-shadow: var(--shadow-small);
    font-size: 1.2rem;
}

.flash {
    padding: .9rem 1rem;
    border: 2px solid var(--line);
    border-radius: .8rem;
    background: var(--surface);
    box-shadow: var(--shadow-small);
    font-weight: 700;
    line-height: 1.45;
    pointer-events: auto;
    transition: opacity .18s ease, transform .18s ease;
}

.flash.is-dismissing {
    opacity: 0;
    transform: translateY(-.35rem);
    pointer-events: none;
}

.flash--error {
    background: var(--pink-soft);
}

.flash--warning {
    background: var(--yellow-soft);
}

.flash--success {
    background: var(--aqua-soft);
}

.stack-form,
.form-grid {
    display: grid;
    gap: 1rem;
}

.stack-form {
    margin-top: 1.35rem;
}

.stack-form--compact,
.form-grid--compact {
    gap: .75rem;
}

.form-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding: 1.25rem;
}

.field,
label {
    display: grid;
    min-width: 0;
    gap: .4rem;
    color: var(--ink);
    font-size: .86rem;
    font-weight: 750;
}

.field--full,
.form-actions {
    grid-column: 1 / -1;
}

label small,
.field small {
    color: var(--muted);
    font-weight: 550;
    line-height: 1.45;
}

fieldset {
    min-width: 0;
    margin: 0;
}

.choice-field {
    display: grid;
    padding: 1rem;
    gap: .35rem;
    border: 2px dashed rgb(47 43 72 / 45%);
    border-radius: .85rem;
    background: rgb(255 255 255 / 55%);
}

.choice-field legend {
    padding: 0 .4rem;
    font-weight: 800;
}

.check-row {
    display: flex;
    min-height: 2.75rem;
    padding: .45rem .55rem;
    gap: .65rem;
    align-items: center;
    border-radius: .65rem;
    font-weight: 650;
}

.check-row input[type="checkbox"],
.check-row input[type="radio"] {
    width: 1.2rem;
    height: 1.2rem;
    margin: 0;
    flex: 0 0 auto;
    accent-color: var(--violet);
}

input:not([type="checkbox"]):not([type="radio"]),
select,
textarea {
    width: 100%;
    min-height: var(--control-height);
    padding: .68rem .8rem;
    border: 2px solid var(--line);
    border-radius: .72rem;
    color: var(--ink);
    background: var(--surface);
    box-shadow: 3px 3px 0 rgb(47 43 72 / 17%);
}

textarea {
    min-height: 6rem;
    resize: vertical;
}

input::placeholder,
textarea::placeholder {
    color: #878296;
}

input:not([type="checkbox"]):not([type="radio"]):focus-visible,
select:focus-visible,
textarea:focus-visible {
    border-color: var(--focus);
    outline: 3px solid rgb(18 98 211 / 24%);
    outline-offset: 1px;
    box-shadow: none;
}

.sidebar input:not([type="checkbox"]):not([type="radio"]),
.sidebar select,
.sidebar textarea {
    border-color: var(--line);
    background: #fffef9;
}

.form-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    justify-content: flex-start;
}

.button {
    display: inline-flex;
    min-height: var(--control-height);
    padding: .65rem 1rem;
    gap: .45rem;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--line);
    border-radius: .75rem;
    color: var(--ink);
    background: var(--surface);
    box-shadow: var(--shadow-small);
    font-weight: 800;
    line-height: 1.2;
    text-align: center;
}

.button--primary {
    border-color: var(--action-primary-border);
    color: var(--action-primary-fg);
    background: var(--action-primary-bg);
}

.button--quiet {
    border-color: var(--action-secondary-border);
    color: var(--action-secondary-fg);
    background: var(--action-secondary-bg);
}

.button--danger {
    border-color: var(--action-danger-border);
    color: var(--action-danger-fg);
    background: var(--action-danger-bg);
}

.button:active {
    box-shadow: 1px 1px 0 var(--line);
    transform: translate(2px, 2px);
}

.text-button {
    display: inline-flex;
    min-height: var(--control-height);
    padding: .45rem .25rem;
    align-items: center;
    border: 0;
    color: inherit;
    background: transparent;
    font-weight: 750;
    text-decoration: underline;
    text-decoration-thickness: .12em;
    text-underline-offset: .2em;
}

.text-button--danger {
    color: var(--danger);
}

.surface-card.property-danger {
    display: flex;
    margin-top: 2rem;
    gap: 1.5rem;
    align-items: center;
    justify-content: space-between;
    border-color: var(--danger);
}

.property-danger h2 {
    margin-bottom: .35rem;
}

.property-danger p:last-child {
    max-width: 52rem;
    margin-bottom: 0;
    color: var(--muted);
}

.property-danger form {
    flex: 0 0 auto;
}

button:disabled,
.button[aria-disabled="true"] {
    cursor: not-allowed;
    filter: grayscale(.35);
    opacity: .58;
}

.login-shell {
    display: grid;
    min-height: 100vh;
    grid-template-columns: minmax(0, 1.2fr) minmax(24rem, .8fr);
}

.login-intro {
    display: flex;
    min-width: 0;
    padding: clamp(2rem, 6vw, 6rem);
    gap: 3rem;
    flex-direction: column;
    justify-content: space-between;
    background: rgb(255 247 232 / 76%);
}

.login-intro > div {
    max-width: 55rem;
}

.login-intro h1 {
    max-width: 15ch;
}

.login-intro__note {
    max-width: 38rem;
    margin: 0;
    color: var(--muted);
    font-size: .86rem;
    line-height: 1.55;
}

.login-panel {
    display: grid;
    min-width: 0;
    padding: clamp(1.25rem, 4vw, 3rem);
    place-items: center;
    border-left: 2px solid var(--line);
    background: var(--violet);
}

.login-card {
    width: min(100%, 29rem);
    padding: clamp(1.5rem, 4vw, 2.5rem);
    border: 2px solid var(--line);
    border-radius: 1.25rem 1rem 1.45rem 1.1rem;
    background: var(--surface);
    box-shadow: 8px 8px 0 #161329;
}

.login-card h2 {
    font-size: clamp(1.65rem, 3vw, 2.3rem);
}

.login-card > :last-child {
    margin-bottom: 0;
}

.app-shell {
    display: grid;
    min-height: 100vh;
    grid-template-columns: 17.5rem minmax(0, 1fr);
}

.sidebar {
    position: sticky;
    z-index: 20;
    top: 0;
    display: flex;
    height: 100vh;
    min-width: 0;
    padding: 1.35rem 1rem;
    gap: .9rem;
    flex-direction: column;
    overflow: hidden;
    border-right: 2px solid var(--line);
    color: var(--surface);
    background: var(--violet);
}

.sidebar .brand {
    color: var(--surface);
}

.brand--sidebar {
    padding: 0 .4rem .7rem;
}

.workspace-list {
    display: grid;
    min-height: 0;
    gap: .4rem;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-color: rgb(255 255 255 / 38%) transparent;
}

.workspace-list__heading {
    display: flex;
    padding: .3rem .5rem;
    align-items: center;
    justify-content: space-between;
    color: #d8d1ff;
    font-size: .68rem;
    font-weight: 850;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.workspace-list__heading p {
    margin: 0;
}

.workspace-list__heading span,
.count-badge {
    display: inline-grid;
    min-width: 1.65rem;
    min-height: 1.65rem;
    padding: .15rem .35rem;
    place-items: center;
    border: 2px solid var(--line);
    border-radius: 999px;
    color: var(--ink);
    background: var(--yellow);
    font-size: .72rem;
    font-weight: 850;
}

.workspace-button {
    display: grid;
    width: 100%;
    min-height: 3.25rem;
    padding: .55rem;
    grid-template-columns: 2rem minmax(0, 1fr);
    gap: .6rem;
    align-items: center;
    border: 2px solid transparent;
    border-radius: .75rem;
    color: var(--surface);
    background: transparent;
    text-align: left;
}

.customer-account-switcher {
    display: grid;
    gap: .35rem;
    margin: .9rem 0 .8rem;
    padding-bottom: .85rem;
    border-bottom: 1px solid color-mix(in srgb, var(--surface) 28%, transparent);
}

.customer-account-switcher__heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 .55rem .15rem;
    color: var(--surface);
    font-size: .68rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
    opacity: .76;
}

.customer-account-switcher__heading p {
    margin: 0;
}

.customer-account-switcher__heading span {
    display: grid;
    min-width: 1.35rem;
    height: 1.35rem;
    place-items: center;
    border: 1px solid currentColor;
    border-radius: 999px;
    font-size: .62rem;
}

.customer-account-button {
    min-height: 3rem;
}

.customer-account-button .workspace-button__icon {
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 999px;
    background: var(--pink);
}

.workspace-button.is-active,
.workspace-button[aria-current="true"] {
    border-color: var(--line);
    color: var(--ink);
    background: var(--yellow);
    box-shadow: 3px 3px 0 #161329;
}

.workspace-button__icon {
    display: grid;
    width: 2rem;
    height: 2rem;
    place-items: center;
    border: 2px solid var(--line);
    border-radius: .55rem;
    color: var(--ink);
    background: var(--aqua);
}

.workspace-button strong,
.workspace-button small,
.sidebar__user strong,
.sidebar__user small {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.workspace-button strong {
    font-size: .85rem;
}

.workspace-button small {
    margin-top: .15rem;
    color: inherit;
    font-size: .7rem;
    opacity: .78;
}

.empty-note {
    padding: .6rem;
    color: inherit;
    font-size: .8rem;
    line-height: 1.5;
    opacity: .78;
}

.create-property {
    flex: 0 0 auto;
    border-top: 1px dashed rgb(255 255 255 / 38%);
    border-bottom: 1px dashed rgb(255 255 255 / 38%);
}

.create-property summary {
    display: flex;
    min-height: var(--control-height);
    padding: .7rem .5rem;
    align-items: center;
    justify-content: space-between;
    color: var(--surface);
    font-size: .82rem;
    font-weight: 850;
    list-style: none;
}

.create-property summary::-webkit-details-marker,
.action-panel summary::-webkit-details-marker,
.inline-action summary::-webkit-details-marker {
    display: none;
}

.create-property summary::after,
.action-panel summary::after,
.inline-action summary::after {
    content: "+";
    font-size: 1.25rem;
    line-height: 1;
}

.create-property[open] summary::after,
.action-panel[open] summary::after,
.inline-action[open] summary::after {
    content: "−";
}

.create-property .stack-form {
    max-height: min(58vh, 31rem);
    margin: 0;
    padding: .5rem .45rem 1rem;
    overflow-y: auto;
}

.create-property label {
    color: var(--surface);
}

.create-property label small {
    color: #d8d1ff;
}

.primary-nav {
    display: grid;
    gap: .35rem;
}

.nav-link {
    display: flex;
    min-height: var(--control-height);
    padding: .6rem .75rem;
    align-items: center;
    border: 2px solid transparent;
    border-radius: .75rem;
    color: var(--surface);
    font-size: .86rem;
    font-weight: 780;
}

.nav-link.is-active,
.nav-link[aria-current="page"] {
    border-color: var(--line);
    color: var(--ink);
    background: var(--yellow);
    box-shadow: 3px 3px 0 #161329;
    transform: rotate(-.35deg);
}

.sidebar__user {
    display: grid;
    margin-top: auto;
    padding: .85rem .35rem 0;
    grid-template-columns: 2.35rem minmax(0, 1fr);
    gap: .55rem .65rem;
    align-items: center;
    border-top: 1px dashed rgb(255 255 255 / 38%);
}

.sidebar__user strong {
    font-size: .8rem;
}

.sidebar__user small {
    color: #d8d1ff;
    font-size: .68rem;
}

.sidebar__user form {
    grid-column: 2;
}

.sidebar__user .text-button {
    min-height: 2.25rem;
    color: var(--surface);
    font-size: .74rem;
}

.avatar {
    display: grid;
    width: 2.35rem;
    height: 2.35rem;
    grid-row: span 2;
    place-items: center;
    border: 2px solid var(--line);
    border-radius: 50%;
    color: var(--ink);
    background: var(--pink);
    box-shadow: 2px 2px 0 #161329;
    font-weight: 850;
}

.main-content {
    width: 100%;
    max-width: 100rem;
    min-width: 0;
    padding: clamp(1.5rem, 4vw, 4rem);
}

.page-header {
    display: flex;
    margin-bottom: 1.5rem;
    gap: 2rem;
    align-items: flex-start;
    justify-content: space-between;
}

.page-header > div {
    min-width: 0;
}

.page-header h1 {
    max-width: 18ch;
    overflow-wrap: anywhere;
}

.access-badge,
.status,
.category-badge {
    display: inline-flex;
    min-height: 1.9rem;
    padding: .3rem .6rem;
    align-items: center;
    border: 2px solid var(--line);
    border-radius: 999px;
    color: var(--ink);
    background: var(--status-default-bg);
    border-color: var(--status-default-border);
    font-size: .7rem;
    font-weight: 850;
    line-height: 1.1;
    text-transform: capitalize;
    white-space: nowrap;
}

.access-badge {
    min-height: var(--control-height);
    background: var(--yellow);
    box-shadow: var(--shadow-small);
}

.access-badge--shared {
    background: var(--aqua);
}

.scope-notice,
.phone-plan-notice {
    margin: 1.2rem 0 1.75rem;
    padding: .9rem 1rem;
    border: 2px solid var(--line);
    border-radius: .8rem;
    color: var(--ink);
    background: var(--yellow-soft);
    box-shadow: var(--shadow-small);
    font-size: .88rem;
    line-height: 1.55;
}

.phone-plan-notice {
    display: none;
    background: var(--aqua-soft);
}

.metric-grid {
    display: grid;
    margin: 1.75rem 0 3rem;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1rem;
}

.metric {
    min-height: 8.5rem;
    padding: 1.2rem;
    border: 2px solid var(--line);
    border-radius: 1.05rem 1.35rem .95rem 1.2rem;
    background: var(--surface);
    box-shadow: var(--shadow);
}

.metric:nth-child(4n + 1),
.metric--pink {
    background: var(--pink-soft);
}

.metric:nth-child(4n + 2),
.metric--aqua {
    background: var(--aqua-soft);
}

.metric:nth-child(4n + 3),
.metric--yellow {
    background: var(--yellow-soft);
}

.metric:nth-child(4n + 4) {
    background: var(--violet-soft);
}

.metric > span {
    display: block;
    min-height: 2.4rem;
    margin-bottom: .75rem;
    color: var(--muted);
    font-size: .78rem;
    font-weight: 750;
}

.metric strong {
    display: block;
    font-size: clamp(1.55rem, 3vw, 2.15rem);
    font-weight: 850;
    letter-spacing: -.04em;
}

.metric strong small,
.metric > small {
    color: var(--muted);
    font-size: .72rem;
    font-weight: 650;
}

.section-heading,
.record-header {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
    justify-content: space-between;
}

.section-heading {
    margin-bottom: 1rem;
    align-items: center;
}

.section-heading h2,
.section-heading h3 {
    margin-bottom: 0;
}

.project-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
}

.project-card,
.empty-card,
.surface-card,
.panel,
.share-result,
.action-panel {
    border: 2px solid var(--line);
    background: var(--surface);
    box-shadow: var(--shadow);
}

.project-card,
.empty-card,
.surface-card,
.panel,
.share-result {
    padding: 1.25rem;
    border-radius: 1.05rem 1.35rem .95rem 1.2rem;
}

.project-card__top {
    display: flex;
    gap: .75rem;
    align-items: center;
    justify-content: space-between;
    color: var(--muted);
    font-size: .72rem;
}

.project-card h3,
.empty-card h3 {
    margin-bottom: .4rem;
}

.project-card p,
.empty-card p {
    color: var(--muted);
    font-size: .82rem;
    line-height: 1.5;
}

.project-card--link {
    display: grid;
    grid-template-rows: auto minmax(3.2rem, auto) minmax(2.35rem, auto) minmax(2.8rem, auto) auto;
    row-gap: .7rem;
}

.project-card__title,
.project-card__schedule,
.project-card__progress {
    margin: 0;
}

.project-card__title {
    align-self: start;
    font-size: clamp(1.2rem, 2vw, 1.55rem);
    line-height: 1.18;
}

.project-card__schedule {
    align-self: start;
}

.project-card__progress {
    align-self: end;
}

.project-card__progress > strong {
    display: block;
    margin-top: .45rem;
    font-size: .8rem;
    line-height: 1.25;
}

.progress {
    height: .65rem;
    overflow: hidden;
    border: 2px solid var(--line);
    border-radius: 999px;
    background: var(--surface);
}

.progress span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: var(--pink);
}

.status--planned,
.status--researching {
    color: var(--status-planned-fg);
    background: var(--status-planned-bg);
    border-color: var(--status-planned-border);
}

.status--todo,
.status--draft {
    color: var(--status-neutral-fg);
    background: var(--status-neutral-bg);
    border-color: var(--status-neutral-border);
}

.status--pending,
.status--needed {
    color: var(--status-planned-fg);
    background: var(--status-planned-bg);
    border-color: var(--status-planned-border);
}

.status--active,
.status--in_progress,
.status--claimed,
.status--in_use {
    color: var(--status-active-fg);
    background: var(--status-active-bg);
    border-color: var(--status-active-border);
}

.status--complete,
.status--done,
.status--approved,
.status--purchased,
.status--ready {
    color: var(--status-success-fg);
    background: var(--status-success-bg);
    border-color: var(--status-success-border);
}

.status--blocked,
.status--revoked,
.status--cancelled,
.status--rejected {
    color: var(--status-blocked-fg);
    background: var(--status-blocked-bg);
    border-color: var(--status-blocked-border);
}

.category-badge {
    background: var(--violet-soft);
}

.status {
    gap: .4rem;
    padding-inline: .55rem .7rem;
}

.status::before {
    width: .45rem;
    height: .45rem;
    flex: 0 0 auto;
    border-radius: 50%;
    background: currentColor;
    content: "";
}

.empty-state {
    display: grid;
    min-height: 18rem;
    max-width: 46rem;
    padding: clamp(1.35rem, 4vw, 2.5rem);
    align-content: center;
    border: 2px dashed var(--line);
    border-radius: 1.15rem;
    color: var(--muted);
    background: rgb(255 254 249 / 80%);
}

.empty-state--compact {
    min-height: 0;
    max-width: none;
    padding: 1rem;
    border-width: 1px;
    border-radius: .75rem;
}

.empty-state p:last-child,
.empty-card p:last-child {
    margin-bottom: 0;
}

.action-panel {
    margin: 0 0 1.75rem;
    overflow: clip;
    border-radius: 1.1rem 1.35rem 1rem 1.2rem;
}

.action-panel > summary {
    display: flex;
    min-height: 3.5rem;
    padding: .9rem 1.2rem;
    align-items: center;
    justify-content: space-between;
    color: var(--ink);
    background: var(--yellow);
    font-weight: 850;
    list-style: none;
}

.action-panel[open] > summary {
    border-bottom: 2px solid var(--line);
}

.action-panel > .stack-form {
    margin: 0;
    padding: 1.25rem;
}

.project-workspace {
    padding: clamp(1.1rem, 3vw, 1.6rem);
}

.project-workspace > .progress {
    margin: 1.25rem 0 1.5rem;
}

.project-columns {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.5rem;
}

.project-columns > section {
    min-width: 0;
    padding: 1rem;
    border: 2px dashed rgb(47 43 72 / 35%);
    border-radius: .9rem;
    background: rgb(255 255 255 / 46%);
}

.record-list {
    display: grid;
    gap: .75rem;
}

.record-list--spacious {
    gap: 1rem;
}

.record-row {
    display: grid;
    min-width: 0;
    padding: .85rem;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: .85rem;
    align-items: center;
    border: 2px solid rgb(47 43 72 / 42%);
    border-radius: .75rem;
    background: var(--surface);
}

.record-row > div {
    min-width: 0;
}

.record-row p {
    margin: .25rem 0 0;
    color: var(--muted);
    font-size: .78rem;
    line-height: 1.5;
    overflow-wrap: anywhere;
}

.record-actions,
.inline-form,
.money-pair {
    display: flex;
    flex-wrap: wrap;
    gap: .65rem;
    align-items: center;
    justify-content: flex-end;
}

.record-actions select,
.inline-form select,
.inline-form input:not([type="checkbox"]):not([type="radio"]) {
    width: auto;
    max-width: 13rem;
}

.inline-action {
    margin-top: .8rem;
    border: 2px dashed rgb(47 43 72 / 42%);
    border-radius: .75rem;
    background: var(--violet-soft);
}

.inline-action > summary {
    display: flex;
    min-height: var(--control-height);
    padding: .65rem .8rem;
    align-items: center;
    justify-content: space-between;
    font-size: .82rem;
    font-weight: 800;
    list-style: none;
}

.inline-action[open] > summary {
    border-bottom: 2px dashed rgb(47 43 72 / 42%);
}

.inline-action > form {
    margin: 0;
    padding: .85rem;
}

.inline-link {
    min-height: var(--control-height);
    padding: .65rem .3rem;
    color: var(--violet);
    font-weight: 800;
    text-decoration: underline;
    text-underline-offset: .2em;
}

.money-pair {
    flex-direction: column;
    align-items: flex-end;
    color: var(--muted);
    font-size: .78rem;
}

.money-pair strong {
    color: var(--ink);
}

.level-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
    gap: 1rem;
}

.level-card {
    display: flex;
    min-height: 13rem;
    gap: 1.25rem;
    align-items: flex-start;
    justify-content: space-between;
}

.level-card > div:first-child {
    min-width: 0;
}

.level-card h2 {
    margin-top: .75rem;
}

.level-card .record-actions {
    flex: 0 0 auto;
    flex-direction: column;
    align-items: stretch;
}

.lock-note {
    margin: .75rem 0 0;
    padding: .65rem .75rem;
    border: 2px solid var(--line);
    border-radius: .65rem;
    color: var(--warning);
    background: var(--yellow-soft);
    font-size: .78rem;
    font-weight: 750;
    line-height: 1.45;
}

.activity-list {
    display: grid;
    margin: 0;
    padding: 0;
    gap: .85rem;
    list-style: none;
}

.activity-group {
    overflow: hidden;
    border: 2px solid var(--line);
    border-radius: .9rem;
    background: var(--surface);
    box-shadow: var(--shadow-small);
}

.activity-group__header {
    display: flex;
    padding: .7rem .85rem;
    gap: .75rem;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid var(--line);
    background: var(--paper);
}

.activity-group__header span {
    color: var(--muted);
    font-size: .75rem;
    font-weight: 750;
}

.activity-group__events {
    margin: 0;
    padding: 0;
    list-style: none;
}

.activity-event {
    display: grid;
    padding: .7rem .85rem;
    grid-template-columns: 1.15rem minmax(0, 1fr);
    gap: .75rem;
    align-items: start;
}

.activity-event + .activity-event {
    border-top: 1px dashed var(--line);
}

.activity-event p {
    margin-bottom: .25rem;
    line-height: 1.5;
}

.activity-event small {
    color: var(--muted);
}

.activity-dot {
    width: 1.05rem;
    height: 1.05rem;
    margin-top: .2rem;
    border: 2px solid var(--line);
    border-radius: 50%;
    background: var(--aqua);
}

.activity-dot--note_added {
    background: var(--yellow);
}

.activity-dot--task_updated,
.activity-dot--project_updated {
    background: var(--pink);
}

.sharing-page {
    margin: 0 auto;
}

.page-nav {
    display: flex;
    margin-bottom: clamp(2rem, 6vw, 4rem);
    gap: 1rem;
    align-items: center;
    justify-content: space-between;
}

.sharing-grid {
    display: grid;
    margin: 1.75rem 0 3rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

.panel h2,
.share-result h2 {
    overflow-wrap: anywhere;
}

.share-result {
    margin-top: 1.75rem;
    background: var(--aqua-soft);
}

.share-result input {
    background: var(--surface);
}

.plain-list {
    display: grid;
    margin: 1.15rem 0 0;
    padding-left: 1.2rem;
    gap: .7rem;
    color: var(--muted);
    line-height: 1.5;
}

.management-section {
    margin-top: 3rem;
}

.management-list {
    display: grid;
    overflow: hidden;
    border: 2px solid var(--line);
    border-radius: 1rem;
    background: var(--surface);
    box-shadow: var(--shadow);
}

.management-row {
    display: flex;
    min-height: 4.5rem;
    padding: 1rem 1.1rem;
    gap: 1rem;
    align-items: center;
    justify-content: space-between;
    border-bottom: 2px dashed rgb(47 43 72 / 28%);
}

.management-row:last-child {
    border-bottom: 0;
}

.management-row > div:first-child {
    min-width: 0;
}

.management-row p {
    margin: .3rem 0 0;
    color: var(--muted);
    font-size: .78rem;
    line-height: 1.5;
    overflow-wrap: anywhere;
}

.management-row__actions {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    align-items: center;
    justify-content: flex-end;
}

.management-row--editable {
    display: block;
}

.management-row--editable > summary {
    display: flex;
    cursor: pointer;
    gap: 1rem;
    align-items: center;
    justify-content: space-between;
    list-style: none;
}

.management-row--editable > summary::-webkit-details-marker {
    display: none;
}

.management-row--editable > summary span:first-child {
    display: grid;
    min-width: 0;
    gap: .25rem;
}

.management-row--editable > summary small {
    color: var(--muted);
    overflow-wrap: anywhere;
}

.management-row--editable[open] > summary {
    margin-bottom: 1rem;
}

.management-row--editable > form + form {
    margin-top: .85rem;
}

.management-row--account {
    align-items: stretch;
}

.management-row__account-form {
    flex: 1 1 34rem;
}

.management-row__identity {
    display: flex;
    gap: .8rem;
    align-items: center;
}

.management-row__identity p {
    margin: .15rem 0;
}

.permission-grid {
    display: flex;
    flex-wrap: wrap;
    gap: .7rem 1.1rem;
    padding: .85rem;
    border: 1px solid var(--line);
    border-radius: .75rem;
}

.permission-grid legend {
    padding: 0 .35rem;
    font-weight: 900;
}

.directory-picker {
    display: grid;
    padding: 1rem;
    gap: .8rem;
    border: 1px solid var(--line);
    border-radius: .85rem;
    background: rgb(255 255 255 / 45%);
}

.directory-picker legend {
    padding: 0 .35rem;
    font-weight: 900;
}

.directory-picker .field {
    display: grid;
    gap: .35rem;
}

.directory-picker__list {
    display: grid;
    max-height: 16rem;
    overflow-y: auto;
    padding: .25rem;
    gap: .35rem;
    border: 1px solid rgb(47 43 72 / 25%);
    border-radius: .7rem;
    background: var(--surface);
}

.directory-option {
    display: grid;
    padding: .65rem .7rem;
    grid-template-columns: 1.2rem minmax(0, 1fr);
    gap: .65rem;
    align-items: start;
    border: 1px solid transparent;
    border-radius: .6rem;
    cursor: pointer;
}

.directory-option:hover,
.directory-option:focus-within,
.directory-option:has(input:checked) {
    border-color: var(--line);
    background: var(--violet-soft);
}

.directory-option input {
    width: 1.15rem;
    height: 1.15rem;
    margin: .1rem 0 0;
    accent-color: var(--violet);
}

.directory-option strong,
.directory-option small {
    display: block;
    overflow-wrap: anywhere;
}

.directory-option small {
    margin-top: .15rem;
    color: var(--muted);
    font-size: .76rem;
    line-height: 1.4;
}

.invite-shell {
    display: grid;
    min-height: 100vh;
    padding: clamp(1.5rem, 6vw, 5rem);
    grid-template-rows: auto 1fr;
    gap: 2rem;
}

.invite-card {
    width: min(100%, 50rem);
    margin: auto;
    padding: clamp(1.25rem, 4vw, 2.5rem);
    border: 2px solid var(--line);
    border-radius: 1.25rem 1rem 1.4rem 1.05rem;
    background: rgb(255 254 249 / 92%);
    box-shadow: var(--shadow);
}

.invite-card .panel {
    margin-top: 1.5rem;
    background: var(--violet-soft);
}

@media (hover: hover) {
    .button:hover {
        filter: saturate(1.08) brightness(.98);
        transform: translate(-1px, -1px);
    }

    .nav-link:hover,
    .workspace-button:hover {
        border-color: rgb(255 255 255 / 55%);
        background: var(--violet-hover);
    }

    .nav-link.is-active:hover,
    .nav-link[aria-current="page"]:hover,
    .workspace-button.is-active:hover,
    .workspace-button[aria-current="true"]:hover {
        border-color: var(--line);
        color: var(--ink);
        background: var(--yellow);
    }

    .check-row:hover {
        background: var(--violet-soft);
    }

    .text-button:hover,
    .inline-link:hover {
        text-decoration-thickness: .18em;
    }
}

@media (max-width: 1100px) {
    .metric-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .project-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .project-columns {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 1023px) {
    .app-shell {
        grid-template-columns: 1fr;
    }

    .sidebar {
        position: static;
        display: grid;
        height: auto;
        padding: 1rem;
        grid-template-columns: auto minmax(12rem, 1fr) auto auto;
        gap: .75rem 1rem;
        align-items: start;
        overflow: visible;
        border-right: 0;
        border-bottom: 2px solid var(--line);
    }

    .brand--sidebar {
        padding: 0;
    }

    .workspace-list {
        display: flex;
        min-width: 0;
        overflow-x: auto;
    }

    .workspace-list__heading {
        flex: 0 0 auto;
        gap: .45rem;
    }

    .workspace-list form {
        min-width: 12rem;
        flex: 0 0 auto;
    }

    .create-property {
        grid-column: 4;
        border: 0;
    }

    .create-property summary {
        border: 2px solid var(--line);
        border-radius: .7rem;
        color: var(--ink);
        background: var(--yellow);
        box-shadow: var(--shadow-small);
    }

    .create-property[open] {
        grid-column: 1 / -1;
    }

    .create-property[open] .stack-form {
        max-height: none;
        padding: 1rem 0 0;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .create-property[open] .button {
        align-self: end;
    }

    .primary-nav {
        grid-column: 1 / -1;
        display: flex;
        padding-bottom: .3rem;
        overflow-x: auto;
        scrollbar-width: thin;
    }

    .nav-link {
        flex: 0 0 auto;
    }

    .sidebar__user {
        display: flex;
        grid-column: 3;
        grid-row: 1;
        margin: 0;
        padding: 0;
        gap: .45rem;
        border: 0;
    }

    .sidebar__user form {
        display: contents;
    }

    .sidebar__user small {
        display: none;
    }

    .sidebar__user .text-button {
        min-height: var(--control-height);
        white-space: nowrap;
    }

    .main-content {
        padding: clamp(1.5rem, 4vw, 3rem);
    }
}

@media (max-width: 767px) {
    body {
        background-image:
            linear-gradient(rgb(47 43 72 / 4%) 1px, transparent 1px),
            linear-gradient(90deg, rgb(47 43 72 / 4%) 1px, transparent 1px);
        background-size: 24px 24px;
        background-attachment: scroll;
    }

    h1 {
        font-size: clamp(2rem, 11vw, 3.25rem);
    }

    .flash-stack {
        top: .65rem;
        right: .65rem;
        width: calc(100vw - 1.3rem);
    }

    .login-shell {
        grid-template-columns: 1fr;
    }

    .login-intro {
        min-height: 42vh;
        padding: 1.4rem;
        gap: 2.5rem;
    }

    .login-intro h1 {
        max-width: 18ch;
    }

    .login-panel {
        padding: 1.4rem;
        border-top: 2px solid var(--line);
        border-left: 0;
    }

    .login-card {
        padding: 1.35rem;
        box-shadow: 5px 5px 0 #161329;
    }

    .sidebar {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        padding: .75rem .8rem .8rem;
        gap: .55rem .7rem;
    }

    .brand--sidebar {
        grid-column: 1;
        padding: 0;
    }

    .mobile-sidebar-controls {
        display: grid;
        grid-column: 1 / -1;
        grid-template-columns: minmax(0, 1fr) auto;
        gap: .5rem;
    }

    .mobile-workspace-trigger,
    .mobile-menu-trigger {
        min-height: 3.35rem;
        border: 1px solid rgb(255 255 255 / 22%);
        border-radius: .8rem;
        color: var(--surface);
        background: rgb(255 255 255 / 8%);
    }

    .mobile-workspace-trigger {
        display: grid;
        padding: .45rem .55rem;
        grid-template-columns: 2rem minmax(0, 1fr) auto;
        gap: .55rem;
        align-items: center;
        text-align: left;
    }

    .mobile-workspace-trigger strong,
    .mobile-workspace-trigger small {
        display: block;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .mobile-workspace-trigger strong { font-size: .82rem; }
    .mobile-workspace-trigger small { margin-top: .12rem; color: #d8d1ff; font-size: .68rem; }
    .mobile-workspace-trigger__chevron { color: #d8d1ff; font-size: 1.25rem; }

    .mobile-menu-trigger {
        display: grid;
        width: 3.35rem;
        padding: 0;
        place-items: center;
        font-size: 1.2rem;
    }

    .desktop-workspace-switchers,
    .sidebar > .create-property,
    .sidebar > .primary-nav,
    .sidebar > .sidebar__user {
        display: none;
    }

    .workspace-list {
        grid-column: 1 / -1;
        order: 3;
    }

    .create-property {
        grid-column: 2;
    }

    .create-property[open] {
        grid-column: 1 / -1;
        order: 4;
    }

    .create-property[open] .stack-form {
        grid-template-columns: 1fr;
    }

    .sidebar__user {
        grid-column: 1 / -1;
        grid-row: auto;
        order: 5;
        display: grid;
        padding-top: .75rem;
        border-top: 1px dashed rgb(255 255 255 / 38%);
    }

    .sidebar__user small {
        display: block;
    }

    .sidebar__user form {
        display: block;
    }

    .primary-nav {
        position: fixed;
        z-index: 80;
        right: .5rem;
        bottom: .5rem;
        left: .5rem;
        display: flex;
        min-width: 0;
        padding: .45rem;
        gap: .3rem;
        overflow-x: auto;
        border: 2px solid var(--line);
        border-radius: .9rem;
        color: var(--ink);
        background: rgb(255 254 249 / 96%);
        box-shadow: var(--shadow-small);
        backdrop-filter: blur(10px);
    }

    .nav-link {
        min-width: max-content;
        padding: .55rem .7rem;
        color: var(--ink);
        font-size: .78rem;
    }

    .nav-link.is-active,
    .nav-link[aria-current="page"] {
        box-shadow: 2px 2px 0 var(--line);
    }

    .main-content {
        padding: 1.25rem 1rem 6.5rem;
    }

    .page-header,
    .section-heading,
    .record-header,
    .page-nav,
    .property-danger {
        flex-direction: column;
        gap: .75rem;
        align-items: stretch;
    }

    .property-danger form {
        align-self: flex-start;
    }

    .page-header {
        margin-bottom: 1.25rem;
    }

    .access-badge {
        align-self: flex-start;
    }

    .metric-grid,
    .project-grid,
    .sharing-grid,
    .form-grid {
        grid-template-columns: 1fr;
    }

    .metric-grid {
        margin-bottom: 2.25rem;
    }

    .metric {
        min-height: 7.25rem;
        box-shadow: 4px 4px 0 var(--line);
    }

    .surface-card,
    .project-card,
    .empty-card,
    .panel,
    .share-result,
    .action-panel,
    .management-list {
        box-shadow: 4px 4px 0 var(--line);
    }

    .project-columns > section {
        padding: .8rem;
    }

    .record-row,
    .record-row--task {
        grid-template-columns: 1fr;
    }

    .record-actions,
    .inline-form,
    .money-pair {
        justify-content: flex-start;
        align-items: stretch;
    }

    .record-actions {
        flex-direction: column;
    }

    .record-actions form,
    .record-actions select,
    .record-actions .button,
    .inline-form,
    .inline-form select,
    .inline-form input:not([type="checkbox"]):not([type="radio"]) {
        width: 100%;
        max-width: none;
    }

    .money-pair {
        align-items: flex-start;
    }

    .level-card {
        min-height: 0;
        flex-direction: column;
    }

    .level-card .record-actions {
        width: 100%;
    }

    .management-row,
    .management-row__actions {
        align-items: stretch;
        flex-direction: column;
    }

    .management-row__actions {
        justify-content: flex-start;
    }

    .management-row__actions form,
    .management-row__actions .text-button {
        width: 100%;
    }

    .invite-shell {
        padding: 1rem;
    }

    .invite-card {
        padding: 1.15rem;
        box-shadow: 4px 4px 0 var(--line);
    }

    .phone-plan-notice {
        display: block;
    }
}

@media (max-width: 420px) {
    .sidebar {
        padding: .85rem;
    }

    .brand {
        font-size: .96rem;
    }

    .workspace-list form {
        min-width: 10.5rem;
    }

    .page-nav .button {
        width: 100%;
    }

    .form-grid,
    .action-panel > .stack-form {
        padding: 1rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        transition-duration: .01ms !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
    }

    .brand__mark,
    .eyebrow,
    .nav-link.is-active,
    .nav-link[aria-current="page"] {
        transform: none;
    }
}
/* Hierarchical workspace UX */
.skip-link {
    position: fixed;
    z-index: 1000;
    top: 0.75rem;
    left: 0.75rem;
    padding: 0.75rem 1rem;
    background: var(--ink, #211849);
    color: #fff;
    transform: translateY(-200%);
}

.skip-link:focus { transform: translateY(0); }

.nav-section-label {
    margin: 1rem 0 0.25rem;
    padding: 0 0.8rem;
    color: rgba(255,255,255,.7);
    font-size: .72rem;
    font-weight: 900;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.sticky-action-bar,
.sticky-filter-bar {
    position: sticky;
    z-index: 18;
    top: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    min-height: 3.25rem;
    margin: 0 0 1.25rem;
    padding: .7rem;
    border: 2px solid var(--ink, #211849);
    border-radius: 16px;
    background: rgba(255, 250, 238, .96);
    box-shadow: 4px 4px 0 var(--ink, #211849);
    backdrop-filter: blur(10px);
}

.sticky-filter-bar { justify-content: flex-start; top: .5rem; }
.sticky-filter-bar input { flex: 1; min-width: 10rem; }
.sticky-action-bar > .button { flex: 0 0 auto; white-space: nowrap; }

.project-context-header {
    position: sticky;
    z-index: 18;
    top: 0;
    display: grid;
    margin-bottom: .65rem;
    padding: .5rem .6rem;
    grid-template-columns: minmax(15rem, 1fr) auto;
    gap: .45rem .75rem;
    align-items: center;
    border: 2px solid var(--ink, #211849);
    border-radius: 14px;
    background: rgba(255, 250, 238, .96);
    box-shadow: 3px 3px 0 var(--ink, #211849);
    backdrop-filter: blur(10px);
}

.project-breadcrumb {
    display: flex;
    min-width: 0;
    gap: .4rem;
    align-items: center;
    font-size: .88rem;
    font-weight: 800;
    white-space: nowrap;
}

.project-breadcrumb a,
.project-breadcrumb strong {
    overflow: hidden;
    text-overflow: ellipsis;
}

.project-breadcrumb a {
    color: var(--muted);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: .18em;
}

.project-breadcrumb span {
    color: var(--muted);
}

.project-context-actions {
    display: flex;
    min-width: 0;
    gap: .4rem;
    align-items: center;
    justify-content: flex-end;
}

.project-health {
    display: inline-flex;
    min-height: 2rem;
    padding: .35rem .6rem;
    align-items: center;
    border: 2px solid var(--ink, #211849);
    border-radius: 999px;
    font-size: .75rem;
    white-space: nowrap;
}

.project-health--normal { background: #d8f8ee; }
.project-health--critical { background: #ffd5e2; }

.project-context-header .access-badge,
.project-context-header .button,
.project-context-header .export-menu > summary {
    min-height: 2.15rem;
    padding: .4rem .65rem;
    box-shadow: none;
}

.project-context-header > .project-tabs {
    grid-column: 1 / -1;
}

.attention-legend--inline {
    position: relative;
    margin: 0;
    font-size: .75rem;
}

.attention-legend--inline > summary {
    min-height: 2rem;
    padding: .4rem .55rem;
    align-content: center;
    border-radius: .55rem;
    white-space: nowrap;
}

.attention-legend--inline[open] > summary {
    background: var(--yellow-soft, #fff8d6);
}

.attention-legend--inline .attention-legend__items {
    position: absolute;
    z-index: 30;
    top: calc(100% + .4rem);
    right: 0;
    display: grid;
    width: min(38rem, calc(100vw - 2rem));
    padding: .8rem;
    border: 2px solid var(--ink, #211849);
    border-radius: .75rem;
    background: var(--surface, #fffef9);
    box-shadow: 4px 4px 0 var(--ink, #211849);
}

.filter-chip {
    display: inline-flex;
    min-height: var(--control-height);
    padding: .55rem .85rem;
    align-items: center;
    border: 2px solid var(--ink, #211849);
    border-radius: .7rem;
    color: var(--ink, #211849);
    background: var(--surface, #fffaf0);
    box-shadow: 2px 2px 0 var(--ink, #211849);
    font-weight: 800;
    white-space: nowrap;
}
.filter-chip[aria-pressed="true"] { background: var(--yellow, #ffd55e); }
.filter-chip:active { box-shadow: none; transform: translate(2px, 2px); }

.project-tabs { display: flex; gap: .25rem; overflow-x: auto; }
.project-tabs a { min-height: 44px; padding: .7rem .8rem; border-radius: 10px; white-space: nowrap; font-weight: 800; text-decoration: none; }
.project-tabs a.is-active { background: var(--ink, #211849); color: #fff; }

.attention-strip {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin: 0 0 1.25rem;
    padding: 1rem 1.2rem;
    border: 3px solid var(--ink, #211849);
    border-radius: 18px;
}
.attention-strip--critical { background: #ffd5e2; }
.attention-strip--normal { background: #d8f8ee; }
.attention-strip a { margin-left: auto; font-weight: 800; }
.blocker-overview {
    margin: 0 0 1.5rem;
    border-left: 7px solid #9c244c;
}
.blocker-overview--clear { border-left-color: #236650; }
.blocker-overview__header {
    display: flex;
    gap: 1rem;
    align-items: center;
    justify-content: space-between;
}
.blocker-overview__header h2 { margin-bottom: .2rem; }
.blocker-overview__grid {
    display: grid;
    margin-top: 1rem;
    grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
    gap: 1rem;
}
.blocker-overview__group {
    min-width: 0;
    padding: .85rem;
    border: 1px solid var(--line);
    border-radius: .75rem;
    background: color-mix(in srgb, var(--pink-soft, #ffe1ea) 45%, var(--surface));
}
.blocker-overview__group h3 { margin-bottom: .55rem; font-size: 1rem; }
.blocker-list { display: grid; margin: 0; padding: 0; gap: .4rem; list-style: none; }
.blocker-link {
    display: grid;
    padding: .55rem .65rem;
    gap: .15rem;
    border-radius: .5rem;
    color: inherit;
    text-decoration: none;
}
.blocker-link:hover,
.blocker-link:focus-visible { background: var(--surface); }
.blocker-link small { color: var(--muted); line-height: 1.35; }
.attention-badge { display: inline-flex; padding: .2rem .55rem; border: 2px solid currentColor; border-radius: 999px; font-size: .75rem; font-weight: 900; }
.attention-badge--critical { color: #9c244c; background: #ffe1ea; }
.attention-badge--soon { color: #7a5710; background: #fff0a8; }
.attention-badge--normal { color: #236650; background: #d8f8ee; }
.attention-reason, .requirement-warning { color: #9c244c; font-weight: 800; }
.attention-dot { display: inline-block; width: .65rem; height: .65rem; margin-right: .5rem; border-radius: 50%; background: #69dfc0; }
.attention-dot--critical { background: #ff729f; }
.attention-dot--soon { background: #ffd55e; }

.dashboard-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.dashboard-span-2 { grid-column: span 2; }
.big-number { margin: .25rem 0; font-size: 3rem; font-weight: 950; }
.project-grid--index { grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); }
.project-card--link { display: grid; color: inherit; text-decoration: none; transition: transform .18s ease, box-shadow .18s ease; }
.project-card--link:hover { transform: translate(-2px, -2px); box-shadow: 8px 8px 0 var(--ink, #211849); }
.project-card__meta { display: flex; justify-content: space-between; margin-top: 0; gap: .75rem; font-size: .85rem; font-weight: 800; }

.step-list, .stack-lg { display: grid; gap: 1rem; }
.task-planning-heading { align-items: end; margin-bottom: 1rem; }
.task-planning-heading h2,
.task-planning-heading p { margin-bottom: 0; }
.task-planning-heading .button { flex: 0 0 auto; white-space: nowrap; }
.step-card > summary { display: flex; min-height: 54px; align-items: center; justify-content: space-between; cursor: pointer; }
.step-card > summary span:first-child { display: grid; }
.step-card__actions { display: flex; justify-content: flex-end; margin: -.25rem 0 .75rem; }
.task-row__main { min-width: 0; }
.pin-badge { color: #7250c9; }

.ui-panel {
    position: fixed;
    z-index: 120;
    inset: 0 0 0 auto;
    width: min(34rem, 94vw);
    overflow-y: auto;
    padding: 2rem;
    border-left: 4px solid var(--ink, #211849);
    background: #fffaf0;
    box-shadow: -12px 0 0 rgba(33,24,73,.16);
}
.ui-panel[hidden] { display: none; }
.ui-panel__close { float: right; width: 44px; height: 44px; border: 2px solid var(--ink, #211849); border-radius: 50%; background: #fff; font-size: 1.5rem; }
.ui-panel--menu { inset: auto 1rem 5.5rem auto; width: min(22rem, calc(100vw - 2rem)); border: 3px solid var(--ink, #211849); border-radius: 18px; }
.ui-panel--menu a { display: block; min-height: 44px; padding: .75rem; font-weight: 800; }
.ui-panel--workspace { background: #fffaf0; }
.ui-panel--workspace h2 { margin-right: 3rem; }
.ui-panel--workspace .customer-account-switcher { margin: 1.25rem 0 .9rem; padding-bottom: .9rem; border-bottom: 1px solid rgb(47 43 72 / 18%); }
.ui-panel--workspace .customer-account-switcher__heading,
.ui-panel--workspace .workspace-list__heading { color: var(--muted); }
.ui-panel--workspace .workspace-list { max-height: none; overflow: visible; }
.ui-panel--workspace .workspace-button { color: var(--ink); border-color: transparent; background: transparent; }
.ui-panel--workspace .workspace-button.is-active,
.ui-panel--workspace .workspace-button[aria-current="true"] { border-color: var(--line); color: var(--ink); background: var(--violet-soft); box-shadow: none; transform: none; }
.ui-panel--workspace .workspace-button__icon { flex: 0 0 auto; }
.ui-panel--workspace .create-property { margin-top: 1rem; border-top: 1px dashed rgb(47 43 72 / 18%); border-bottom: 1px dashed rgb(47 43 72 / 18%); }
.ui-panel--workspace .create-property summary { color: var(--ink); }
.ui-panel--workspace .create-property label { color: var(--ink); }
.ui-panel--workspace .create-property label small { color: var(--muted); }
.ui-panel--workspace form > .button { width: 100%; }
.mobile-sidebar-controls { display: none; }
.desktop-workspace-switchers { display: contents; }
.mobile-panel-user { display: flex; margin-top: 1.25rem; padding-top: 1rem; gap: .7rem; align-items: center; border-top: 1px solid rgb(47 43 72 / 18%); }
.mobile-panel-user strong,
.mobile-panel-user small { display: block; }
.mobile-panel-user small { margin-top: .1rem; color: var(--muted); font-size: .75rem; }
.record-detail { display: block; }
.record-link { color: inherit; text-decoration-thickness: 2px; text-underline-offset: .18em; }
.detail-list { display: grid; gap: .7rem; }
.detail-list div { display: grid; grid-template-columns: minmax(8rem, .7fr) 1fr; gap: 1rem; padding-bottom: .7rem; border-bottom: 1px solid rgba(33,24,73,.2); }
.detail-list dt { font-weight: 900; }
.detail-list dd { margin: 0; }
body.has-panel::before { content: ""; position: fixed; z-index: 110; inset: 0; background: rgba(33,24,73,.38); }

.mobile-nav, .floating-add { display: none; }
.property-hero { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(18rem, .7fr); gap: 1rem; margin-bottom: 1.25rem; }
.property-visual-card { display: grid; grid-template-columns: minmax(0, 1fr) minmax(9.5rem, .42fr); gap: 1rem; align-items: center; padding: 1rem; border: 3px solid var(--ink, #211849); border-radius: 24px; background: #fff4a8; box-shadow: 7px 7px 0 var(--ink, #211849); }
.property-visual__asset-stack { display: grid; gap: .75rem; min-width: 0; }
.property-visual__header,
.property-visual__footer { display: flex; align-items: center; justify-content: space-between; gap: .75rem; }
.property-visual__header h2 { margin: .15rem 0 0; font-size: clamp(1.05rem, 2vw, 1.45rem); }
.property-visual__footer { flex-wrap: wrap; color: var(--muted, #6e6884); font-size: .78rem; font-weight: 800; }
.property-level-stack { display: grid; gap: .65rem; max-height: 42rem; overflow: auto; padding: .15rem .2rem .2rem 0; scrollbar-width: thin; }
.property-level-visual { position: relative; display: grid; grid-template-columns: minmax(9rem, 42%) minmax(0, 1fr); min-height: 8rem; overflow: hidden; color: var(--ink, #211849); text-decoration: none; border: 2px solid var(--ink, #211849); border-radius: 16px; background: #2c3032; box-shadow: 4px 4px 0 rgba(33,24,73,.22); transition: transform .2s ease, box-shadow .2s ease, filter .2s ease; }
.property-level-visual:hover,
.property-level-visual:focus-visible { z-index: 1; transform: translateY(-2px); box-shadow: 5px 6px 0 var(--ink, #211849); filter: saturate(1.05); }
.property-level-visual img { display: block; width: 100%; height: 100%; min-height: 8rem; object-fit: cover; object-position: center; }
.property-level-visual__copy { display: grid; align-content: center; gap: .2rem; padding: .8rem .9rem; background: rgba(255,255,255,.94); }
.property-level-visual__copy small { color: var(--muted, #6e6884); font-size: .72rem; font-weight: 900; letter-spacing: .05em; text-transform: uppercase; }
.property-level-visual__copy strong { font-size: 1rem; line-height: 1.1; }
.property-level-visual__copy span { color: var(--muted, #6e6884); font-size: .78rem; font-weight: 800; }
.property-level-visual__alert { position: absolute; top: .6rem; left: .6rem; display: grid; width: 1.8rem; height: 1.8rem; place-items: center; border: 2px solid var(--ink, #211849); border-radius: 50%; background: var(--pink, #f5a7bf); font-weight: 950; }
.property-progress-badge { display: inline-flex; min-width: 3.4rem; justify-content: center; padding: .4rem .65rem; border: 2px solid var(--ink, #211849); border-radius: 999px; background: var(--yellow, #f9db57); font-size: .82rem; font-weight: 950; }
.property-progress-badge--preparing { background: var(--yellow, #f9db57); }
.property-progress-badge--in_progress { background: var(--aqua, #8ce1d1); }
.property-progress-badge--completed { background: #a8dc88; }
.property-level-visual--preparing .property-level-visual__copy { border-left: .35rem solid var(--yellow, #f9db57); }
.property-level-visual--in_progress .property-level-visual__copy { border-left: .35rem solid var(--aqua, #8ce1d1); }
.property-level-visual--completed .property-level-visual__copy { border-left: .35rem solid #79bb61; }
.property-level-visual--not_started .property-level-visual__copy { border-left: .35rem solid #d9d4c9; }
.property-visual-summary { min-width: 0; }
.property-visual-summary h2 { margin: .1rem 0; }

@media (max-width: 700px) {
    .property-level-stack { max-height: none; }
    .property-level-visual { grid-template-columns: minmax(7.5rem, 38%) minmax(0, 1fr); min-height: 6.5rem; }
    .property-level-visual img { min-height: 6.5rem; }
    .property-level-visual__copy { padding: .65rem .7rem; }
}
.property-garden__lawn { fill: #dff2b6; stroke: var(--ink); stroke-width: 5; stroke-linejoin: round; }
.property-garden__path { fill: #f7d7a7; stroke: var(--ink); stroke-width: 4; stroke-linejoin: round; }
.property-garden__tree path { fill: #8d6039; stroke: var(--ink); stroke-width: 4; stroke-linejoin: round; }
.property-garden__tree circle,
.property-garden__shrubs circle { fill: #68b96b; stroke: var(--ink); stroke-width: 4; }
.property-garden__tree circle:nth-of-type(2),
.property-garden__shrubs circle:nth-of-type(2) { fill: #84ca72; }
.iso-level__left,
.iso-level__right { stroke: var(--ink); stroke-width: 6; }
.iso-level__left { fill: #fff; }
.iso-level__right { fill: #f4f1e9; }
.property-roof polygon,
.property-roof__ridge { stroke: var(--ink); stroke-width: 6; stroke-linejoin: round; }
.property-roof__rear-left { fill: #d97463; }
.property-roof__rear-right { fill: #c86455; }
.property-roof__front-left { fill: #f49b75; }
.property-roof__front-right { fill: #dc755f; }
.property-roof__ridge { fill: none; stroke-linecap: round; }
.property-roof__chimney polygon { fill: #f4e4cc; stroke-width: 4; }
.property-level-overflow circle { fill: var(--yellow); stroke: var(--ink); stroke-width: 5; }
.property-level-overflow text { fill: var(--ink); font-size: 20px; font-weight: 900; }
.iso-level { transition: filter .25s ease; }
.iso-level:hover { filter: brightness(1.06); }
.advanced-fields { grid-column: 1 / -1; padding: .7rem; border: 1px dashed rgba(33,24,73,.35); border-radius: 12px; }
.advanced-fields > summary { cursor: pointer; font-weight: 800; }
.advanced-fields[open] > summary { margin-bottom: .7rem; }
.property-summary { display: grid; gap: .75rem; }

.plan-entry-card { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1.25rem; }
.plan-entry-card h2,
.plan-entry-card p { margin: 0; }

@media (max-width: 680px) {
    .plan-entry-card { align-items: flex-start; flex-direction: column; }
}
.permit-fields { display: grid; gap: .9rem; padding: 1rem; border: 2px dashed #7250c9; border-radius: 14px; background: #f0eaff; }

.property-appearance {
    margin-top: 2rem;
}

.property-appearance > summary,
.property-danger > summary {
    font-size: 1rem;
    font-weight: 850;
}

.property-appearance__content {
    display: grid;
    margin-top: 1.25rem;
    grid-template-columns: minmax(12rem, .45fr) minmax(20rem, 1fr);
    gap: 1.5rem;
}

.property-appearance__content p {
    margin-bottom: 0;
    color: var(--muted);
    line-height: 1.55;
}

.property-appearance__content form {
    display: grid;
    gap: 1rem;
}

.property-appearance__content .button {
    justify-self: start;
}

.theme-options {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
    gap: .8rem;
}

.theme-option {
    position: relative;
    display: block;
}

.theme-option input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
}

.theme-option__card {
    display: grid;
    height: 100%;
    padding: .75rem;
    gap: .55rem;
    border: 2px solid var(--line);
    border-radius: .85rem;
    background: var(--surface);
    box-shadow: 2px 2px 0 rgb(47 43 72 / 18%);
}

.theme-option input:checked + .theme-option__card {
    border-color: var(--focus);
    box-shadow: 0 0 0 3px rgb(18 98 211 / 18%);
}

.theme-option input:focus-visible + .theme-option__card {
    outline: 3px solid var(--focus);
    outline-offset: 3px;
}

.theme-option__card strong,
.theme-option__card small {
    display: block;
}

.theme-option__card small {
    color: var(--muted);
    line-height: 1.4;
}

.theme-option__preview {
    display: grid;
    height: 4.25rem;
    padding: .6rem;
    grid-template-columns: .35fr 1fr;
    grid-template-rows: repeat(2, 1fr);
    gap: .4rem;
    overflow: hidden;
    border: 1px solid #d8dce3;
    border-radius: .55rem;
    background: #fff;
}

.theme-option__preview i {
    display: block;
    border-radius: .25rem;
}

.theme-option__preview i:first-child {
    grid-row: 1 / 3;
    background: #30245f;
}

.theme-option__preview i:nth-child(2) {
    background: #ffd84d;
}

.theme-option__preview i:nth-child(3) {
    background: #ff5d8f;
}

.theme-option__preview--modern {
    background: #f4f5f7;
}

.theme-option__preview--modern i:first-child {
    background: #18202a;
}

.theme-option__preview--modern i:nth-child(2) {
    background: #fff;
    box-shadow: inset 0 0 0 1px #d5dae1;
}

.theme-option__preview--modern i:nth-child(3) {
    background: #2563eb;
}

/* Theme: modern. Theme-specific presentation stays behind the body class. */
body.theme--modern {
    --canvas: #f4f5f7;
    --surface: #ffffff;
    --surface-strong: #e9edf2;
    --ink: #17202a;
    --line: #d5dae1;
    --muted: #667085;
    --violet: #18202a;
    --violet-hover: #334155;
    --violet-soft: #e8eef5;
    --yellow: #eef2f6;
    --yellow-soft: #f8fafc;
    --pink: #2563eb;
    --pink-soft: #eff6ff;
    --aqua: #0f766e;
    --aqua-soft: #f0fdfa;
    --success: #087f5b;
    --warning: #9a6700;
    --danger: #b42318;
    --action-primary-bg: #2563eb;
    --action-primary-border: #1d4ed8;
    --action-primary-fg: #fff;
    --action-secondary-bg: #fff;
    --action-secondary-border: #cbd5e1;
    --action-secondary-fg: #17202a;
    --action-danger-bg: #b42318;
    --action-danger-border: #b42318;
    --action-danger-fg: #fff;
    --status-default-bg: #f2f4f7;
    --status-default-fg: #475467;
    --status-default-border: #d0d5dd;
    --status-planned-bg: #eff6ff;
    --status-planned-fg: #1d4ed8;
    --status-planned-border: #bfdbfe;
    --status-active-bg: #ecfdf3;
    --status-active-fg: #067647;
    --status-active-border: #abefc6;
    --status-neutral-bg: #f2f4f7;
    --status-neutral-fg: #475467;
    --status-neutral-border: #d0d5dd;
    --status-success-bg: #ecfdf3;
    --status-success-fg: #067647;
    --status-success-border: #abefc6;
    --status-blocked-bg: #fff1f3;
    --status-blocked-fg: #b42318;
    --status-blocked-border: #fecdca;
    --shadow: 0 1px 2px rgb(16 24 40 / 7%), 0 5px 16px rgb(16 24 40 / 5%);
    --shadow-small: 0 1px 2px rgb(16 24 40 / 8%);
    background-color: var(--canvas);
    background-image: none;
}

.theme--modern .brand__mark,
.theme--modern .eyebrow,
.theme--modern .button,
.theme--modern .language-switch button,
.theme--modern .workspace-button.is-active,
.theme--modern .workspace-button[aria-current="true"],
.theme--modern .nav-link.is-active,
.theme--modern .nav-link[aria-current="page"],
.theme--modern .avatar,
.theme--modern .access-badge,
.theme--modern .scope-notice,
.theme--modern .phone-plan-notice,
.theme--modern .filter-chip,
.theme--modern .sticky-action-bar,
.theme--modern .sticky-filter-bar {
    box-shadow: none;
    transform: none;
}

.theme--modern .brand__mark {
    border: 0;
    border-radius: .55rem;
    color: #17202a;
    background: #fff;
}

.theme--modern .eyebrow {
    padding: 0;
    border: 0;
    border-radius: 0;
    color: #667085;
    background: transparent;
    letter-spacing: .14em;
}

.theme--modern .sidebar {
    border-right: 0;
    background: #18202a;
}

.theme--modern .workspace-list__heading,
.theme--modern .create-property label small,
.theme--modern .sidebar__user small {
    color: #aab4c2;
}

.theme--modern .workspace-button,
.theme--modern .nav-link {
    border-width: 1px;
    border-radius: .55rem;
}

.theme--modern .workspace-button.is-active,
.theme--modern .workspace-button[aria-current="true"],
.theme--modern .nav-link.is-active,
.theme--modern .nav-link[aria-current="page"] {
    border-color: rgb(255 255 255 / 14%);
    color: #fff;
    background: rgb(255 255 255 / 10%);
}

.theme--modern .workspace-button__icon {
    border: 0;
    border-radius: .45rem;
    color: #17202a;
    background: #dbeafe;
}

.theme--modern .button,
.theme--modern input:not([type="checkbox"]):not([type="radio"]),
.theme--modern select,
.theme--modern textarea,
.theme--modern .access-badge,
.theme--modern .status,
.theme--modern .category-badge {
    border-width: 1px;
    border-radius: .55rem;
}

.theme--modern .button--primary {
    border-color: var(--action-primary-border);
    color: var(--action-primary-fg);
    background: var(--action-primary-bg);
}

.theme--modern .button--quiet {
    border-color: var(--action-secondary-border);
    color: var(--action-secondary-fg);
    background: var(--action-secondary-bg);
}

.theme--modern .button--danger {
    border-color: var(--action-danger-border);
    color: var(--action-danger-fg);
    background: var(--action-danger-bg);
}

.theme--modern .sticky-action-bar,
.theme--modern .sticky-filter-bar {
    border-color: var(--line);
    border-radius: .75rem;
    background: rgb(255 255 255 / 96%);
}

.theme--modern .sticky-action-bar > p {
    max-width: 70ch;
    margin: 0;
}

.theme--modern .project-card,
.theme--modern .empty-card,
.theme--modern .surface-card,
.theme--modern .panel,
.theme--modern .share-result,
.theme--modern .action-panel,
.theme--modern .metric,
.theme--modern .property-visual-card {
    border-width: 1px;
    border-radius: .75rem;
    background: #fff;
    box-shadow: var(--shadow);
}

.theme--modern .metric {
    min-height: 7.5rem;
    border-left: 3px solid #cbd5e1;
}

.theme--modern .metric--pink {
    border-left-color: #2563eb;
}

.theme--modern .metric--aqua {
    border-left-color: #0f766e;
}

.theme--modern .metric--yellow {
    border-left-color: #d97706;
}

.theme--modern .attention-strip {
    border: 1px solid var(--line);
    border-radius: .75rem;
}

.theme--modern .attention-strip--critical {
    background: #fff1f2;
}

.theme--modern .attention-strip--normal {
    background: #f0fdfa;
}

.theme--modern .property-visual-card {
    padding: 1.25rem;
}

.theme--modern .iso-level polygon,
.theme--modern .iso-level circle,
.theme--modern .property-visual > svg > path {
    stroke-width: 3;
}

.theme--modern .property-garden__lawn { fill: #d9ead1; }
.theme--modern .property-garden__path { fill: #dfd2bd; }
.theme--modern .property-garden__tree circle,
.theme--modern .property-garden__shrubs circle { fill: #78a77b; }
.theme--modern .property-garden__lawn,
.theme--modern .property-garden__path,
.theme--modern .property-garden__tree path,
.theme--modern .property-garden__tree circle,
.theme--modern .property-garden__shrubs circle,
.theme--modern .property-roof polygon,
.theme--modern .property-roof__ridge { stroke-width: 3; }
.theme--modern .property-roof__chimney polygon { stroke-width: 2.5; }
.theme--modern .property-roof__rear-left { fill: #a95f52; }
.theme--modern .property-roof__rear-right { fill: #8f4e44; }
.theme--modern .property-roof__front-left { fill: #c97863; }
.theme--modern .property-roof__front-right { fill: #955348; }

.theme--modern .project-context-header {
    border-width: 1px;
    border-radius: .75rem;
    background: rgb(255 255 255 / 96%);
    box-shadow: var(--shadow);
}

.theme--modern .project-health,
.theme--modern .attention-legend--inline .attention-legend__items {
    border-width: 1px;
    box-shadow: var(--shadow-small);
}

.theme--modern .theme-option__card {
    border-width: 1px;
    box-shadow: none;
}

.theme--modern .theme-option input:checked + .theme-option__card {
    border-color: #2563eb;
    box-shadow: 0 0 0 3px rgb(37 99 235 / 12%);
}

@media (max-width: 900px) {
    .property-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .property-appearance__content { grid-template-columns: 1fr; }
    .project-context-header { grid-template-columns: 1fr; }
    .project-context-actions { justify-content: flex-start; }
}

@media (max-width: 700px) {
    body { padding-bottom: 5.5rem; }
    .mobile-nav {
        position: fixed;
        z-index: 80;
        right: 0;
        bottom: 0;
        left: 0;
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        min-height: 72px;
        border-top: 3px solid var(--ink, #211849);
        background: #fffaf0;
    }
    .mobile-nav a, .mobile-nav button { display: grid; place-items: center; min-width: 0; padding: .35rem; border: 0; background: transparent; color: var(--ink, #211849); font-size: .72rem; font-weight: 900; text-align: center; text-decoration: none; }
    .floating-add { position: fixed; z-index: 85; right: 1rem; bottom: 5.6rem; display: block; width: 58px; height: 58px; border: 3px solid var(--ink, #211849); border-radius: 50%; background: #ffd55e; box-shadow: 4px 4px 0 var(--ink, #211849); font-size: 2rem; font-weight: 900; }
    .sticky-action-bar .button { display: none; }
    .dashboard-grid { grid-template-columns: 1fr; }
    .dashboard-span-2 { grid-column: auto; }
    .record-row { align-items: flex-start; }
    .record-row .inline-form { width: 100%; }
    .property-summary { grid-template-columns: 1fr 1fr; }
    .sticky-filter-bar { overflow-x: auto; }
    .task-planning-heading { align-items: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
    .project-card--link, .iso-level { transition: none; }
}

/* Shared compact density: structure is identical in playful and modern themes. */
:root {
    --control-height: 2.5rem;
}

h1 {
    margin-bottom: .35rem;
    font-size: clamp(2rem, 3.5vw, 3.15rem);
}

h2 {
    font-size: clamp(1.3rem, 2vw, 1.7rem);
}

.app-shell {
    grid-template-columns: 15.5rem minmax(0, 1fr);
}

.sidebar {
    padding: 1rem .75rem;
    gap: .55rem;
}

.sidebar .brand {
    min-height: 2.25rem;
}

.brand--sidebar {
    padding: 0 .3rem .35rem;
}

.brand__mark {
    width: 2rem;
    height: 2rem;
}

.workspace-button {
    min-height: 2.8rem;
    padding: .4rem;
}

.nav-link {
    padding: .48rem .65rem;
}

.nav-section-label {
    margin-top: .55rem;
}

.main-content {
    padding: clamp(1.25rem, 2.5vw, 2.25rem);
}

.page-header {
    margin-bottom: .9rem;
    gap: 1rem;
}

.eyebrow {
    margin-bottom: .45rem;
    padding: .28rem .48rem;
}

.metric-grid {
    margin: .9rem 0 1.5rem;
    gap: .7rem;
}

.metric,
.theme--modern .metric {
    min-height: 5.8rem;
    padding: .8rem;
}

.metric > span {
    min-height: 0;
    margin-bottom: .35rem;
}

.metric strong {
    font-size: clamp(1.25rem, 2vw, 1.65rem);
}

.project-card,
.empty-card,
.surface-card,
.panel,
.share-result {
    padding: .9rem;
}

.property-hero {
    grid-template-columns: minmax(0, 1.65fr) minmax(14rem, .55fr);
    gap: .7rem;
    margin-bottom: .85rem;
}

.property-visual-card,
.theme--modern .property-visual-card {
    padding: .75rem;
}


.property-summary {
    gap: .55rem;
}

.attention-strip {
    margin-bottom: .9rem;
    padding: .7rem .85rem;
    gap: .7rem;
}

.sticky-action-bar,
.sticky-filter-bar {
    margin-bottom: .85rem;
    padding: .5rem;
    gap: .5rem;
}

.project-tabs a {
    min-height: 40px;
    padding: .55rem .65rem;
}

.workspace-actions,
.page-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    align-items: center;
    justify-content: flex-end;
}

.page-actions {
    margin: -.25rem 0 .75rem;
}

.export-menu {
    position: relative;
}

.export-menu > summary {
    list-style: none;
    cursor: pointer;
}

.export-menu > summary::-webkit-details-marker {
    display: none;
}

.export-menu > summary::after {
    content: " ▾";
    font-size: .75em;
}

.export-menu[open] > summary::after {
    content: " ▴";
}

.export-menu__options {
    position: absolute;
    z-index: 45;
    top: calc(100% + .4rem);
    right: 0;
    display: grid;
    min-width: 12rem;
    padding: .45rem;
    border: 2px solid var(--ink, #211849);
    border-radius: .8rem;
    background: var(--surface, #fff);
    box-shadow: 4px 4px 0 var(--ink, #211849);
}

.export-menu__options a {
    padding: .65rem .75rem;
    border-radius: .5rem;
    color: inherit;
    font-weight: 800;
    text-decoration: none;
}

.export-menu__options a:hover,
.export-menu__options a:focus-visible {
    background: var(--yellow-soft, #fff4a8);
}

.export-menu__status {
    min-height: 1.25rem;
    margin: .25rem .5rem 0;
    color: var(--muted);
    font-size: .78rem;
}

.field-error {
    display: block;
    margin-top: .35rem;
    color: var(--danger, #a52142);
    font-weight: 800;
}

[aria-invalid="true"] {
    border-color: var(--danger, #a52142);
    box-shadow: 0 0 0 2px rgb(165 33 66 / 18%);
}

.confirmation-dialog {
    width: min(31rem, calc(100vw - 2rem));
    padding: 1.5rem;
    border: 3px solid var(--ink, #211849);
    border-radius: 1rem;
    color: var(--ink, #211849);
    background: var(--surface, #fffaf0);
    box-shadow: 8px 8px 0 var(--ink, #211849);
}

.confirmation-dialog::backdrop {
    background: rgb(33 24 73 / 48%);
}

.confirmation-dialog h2 {
    margin-top: 0;
}

.button--danger {
    border-color: var(--action-danger-border, var(--danger, #a52142));
    background: var(--action-danger-bg, var(--danger, #a52142));
    color: var(--action-danger-fg, #fff);
}

.setup-checklist {
    display: grid;
    margin-bottom: 1.25rem;
    grid-template-columns: minmax(15rem, .7fr) minmax(22rem, 1.3fr);
    gap: 1.25rem;
}

.setup-checklist h2,
.setup-checklist p {
    margin-bottom: .45rem;
}

.setup-checklist ol {
    display: grid;
    padding: 0;
    margin: 0;
    gap: .55rem;
    list-style: none;
}

.setup-checklist li {
    display: grid;
    padding: .65rem;
    grid-template-columns: 2rem 1fr;
    gap: .65rem;
    align-items: center;
    border: 2px solid var(--ink, #211849);
    border-radius: .7rem;
    background: var(--yellow-soft, #fff4a8);
}

.setup-checklist li > span {
    display: grid;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    place-items: center;
    background: var(--ink, #211849);
    color: #fff;
    font-weight: 900;
}

.setup-checklist li > div {
    display: flex;
    min-width: 0;
    justify-content: space-between;
    gap: .75rem;
}

.setup-checklist li.is-complete {
    background: #d8f8ee;
}

@media (max-width: 800px) {
    .setup-checklist {
        grid-template-columns: 1fr;
    }

    .setup-checklist li > div {
        display: grid;
    }
}

.scope-label {
    margin: 0 0 .55rem;
    color: var(--muted);
    font-size: .82rem;
    font-weight: 750;
}

.attention-legend {
    margin: -0.5rem 0 1rem;
    font-size: .82rem;
}

.attention-legend summary {
    cursor: pointer;
    font-weight: 800;
}

.attention-legend__items {
    display: flex;
    padding-top: .65rem;
    flex-wrap: wrap;
    gap: .65rem 1.25rem;
}

.task-context {
    display: flex;
    padding: 0;
    margin: .45rem 0;
    flex-wrap: wrap;
    gap: .35rem .9rem;
    color: var(--muted);
    font-size: .78rem;
    list-style: none;
}

@media (min-width: 1024px) {
    .project-tabs {
        display: none;
    }
}

.dashboard-grid,
.project-grid,
.step-list,
.stack-lg {
    gap: .7rem;
}

.project-columns {
    gap: .8rem;
}

.record-list,
.record-list--spacious {
    gap: .5rem;
}

.record-row {
    padding: .6rem .7rem;
    gap: .6rem;
}

.record-actions,
.inline-form,
.money-pair {
    gap: .45rem;
}

.section-heading {
    margin-bottom: .65rem;
}

.step-card > summary {
    min-height: 42px;
}

.step-card__actions {
    margin: -.15rem 0 .45rem;
    gap: .45rem;
}

.form-grid--compact {
    padding: 0;
}

.stack-form {
    margin-top: .85rem;
    gap: .75rem;
}

.compact-edit-form {
    display: grid;
    margin-top: .8rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .6rem;
    align-items: end;
}

.compact-edit-form > label:first-of-type,
.compact-edit-form > .button {
    grid-column: 1 / -1;
}

.compact-edit-form > .button {
    justify-self: end;
}

.ui-panel {
    width: min(30rem, 94vw);
    padding: 1.25rem;
}

.ui-panel__close {
    width: 40px;
    height: 40px;
}

.empty-state {
    min-height: 10rem;
}

.project-settings,
.property-appearance,
.property-danger {
    margin-top: 1rem;
}

@media (max-width: 1023px) {
    .app-shell {
        grid-template-columns: 1fr;
    }

    .main-content {
        padding: 1.25rem;
    }
}

@media (max-width: 700px) {
    h1 {
        font-size: clamp(1.8rem, 9vw, 2.5rem);
    }

    .main-content {
        padding: 1rem .8rem 6rem;
    }

    .metric {
        min-height: 5.25rem;
    }

    .property-hero {
        grid-template-columns: 1fr;
    }

    .property-visual-card {
        grid-template-columns: 1fr;
    }

    .project-context-header .access-badge,
    .project-context-primary-action {
        display: none;
    }

    .project-context-actions {
        overflow-x: auto;
    }

    .compact-edit-form {
        grid-template-columns: 1fr;
    }

    .workspace-actions .button--quiet {
        display: inline-flex;
    }
}

/* Modern typography: quieter hierarchy, fewer synthetic heavy weights. */
body.theme--modern {
    font-family: "Segoe UI Variable Text", Aptos, Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-weight: 400;
    line-height: 1.5;
    text-rendering: optimizeLegibility;
}

body.theme--modern :is(h1, h2, h3) {
    font-family: inherit;
    letter-spacing: -.02em;
    line-height: 1.2;
}

body.theme--modern h1 {
    font-size: clamp(1.9rem, 3.5vw, 2.75rem);
    font-weight: 600;
}

body.theme--modern h2 {
    font-size: clamp(1.35rem, 2.5vw, 1.85rem);
    font-weight: 600;
}

body.theme--modern h3 {
    font-size: 1.05rem;
    font-weight: 600;
}

body.theme--modern :is(strong, b, th, dt) {
    font-weight: 600;
}

body.theme--modern :is(
    .brand,
    .button,
    .workspace-button,
    .nav-link,
    .project-tabs a,
    .ui-panel--menu a,
    .advanced-fields > summary,
    .property-danger > summary,
    .attention-legend summary,
    .mobile-nav a,
    .mobile-nav button
) {
    font-weight: 600;
}

body.theme--modern :is(
    .eyebrow,
    .workspace-list__heading,
    .field label,
    .choice-field legend,
    .access-badge,
    .status,
    .category-badge,
    .attention-badge,
    .project-card__meta,
    .attention-reason,
    .requirement-warning
) {
    font-weight: 600;
}

body.theme--modern :is(.metric strong, .big-number) {
    font-weight: 650;
    letter-spacing: -.025em;
}

body.theme--modern :is(.muted, .lede, small) {
    font-weight: 400;
}

/* Final responsive shell contract: keep the header compact after all theme
   and density overrides have loaded. */
@media (max-width: 1023px) {
    .sidebar {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr);
        padding: .55rem 4rem .55rem .75rem;
        gap: .45rem .65rem;
        align-items: center;
    }

    .sidebar .brand--sidebar {
        grid-column: 1;
        min-width: 0;
        padding: 0;
    }

    .sidebar .mobile-sidebar-controls {
        display: grid;
        grid-column: 2;
        grid-template-columns: minmax(0, 1fr) auto;
        gap: .45rem;
        min-width: 0;
    }

    .sidebar .desktop-workspace-switchers,
    .sidebar > .create-property,
    .sidebar > .primary-nav,
    .sidebar > .sidebar__user {
        display: none;
    }

    .mobile-workspace-trigger,
    .mobile-menu-trigger {
        min-height: 2.75rem;
        border: 1px solid rgb(255 255 255 / 22%);
        border-radius: .65rem;
        color: var(--surface);
        background: rgb(255 255 255 / 8%);
    }

    .mobile-workspace-trigger {
        display: grid;
        min-width: 0;
        padding: .3rem .45rem;
        grid-template-columns: 1.7rem minmax(0, 1fr) auto;
        gap: .4rem;
        align-items: center;
        text-align: left;
    }

    .mobile-workspace-trigger .workspace-button__icon {
        width: 1.7rem;
        height: 1.7rem;
        border: 0;
        border-radius: .4rem;
    }

    .mobile-workspace-trigger strong,
    .mobile-workspace-trigger small {
        display: block;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .mobile-workspace-trigger strong { font-size: .78rem; }
    .mobile-workspace-trigger small { margin-top: .05rem; color: #d8d1ff; font-size: .64rem; }
    .mobile-workspace-trigger__chevron { color: #d8d1ff; font-size: 1.05rem; }

    .mobile-menu-trigger {
        display: grid;
        width: 2.75rem;
        padding: 0;
        place-items: center;
        font-size: 1rem;
    }
}

@media (max-width: 420px) {
    .sidebar .brand--sidebar > span:last-child {
        display: none;
    }

    .sidebar {
        grid-template-columns: 2rem minmax(0, 1fr);
    }
}

.action-panel > .form-grid {
    margin: 0;
    padding: 1.25rem;
}

@media (max-width: 700px) {
    .action-panel > .form-grid {
        padding: 1rem;
    }
}