/*
 * Klusplanner product polish layer.
 *
 * This file deliberately sits after app.css. It gives the complete Symfony UI
 * one calm, accessible component language while preserving the playful theme
 * and all existing layout contracts.
 */

:root {
    --radius-sm: .55rem;
    --radius-md: .8rem;
    --radius-lg: 1rem;
    --radius-xl: 1.25rem;
    --content-max: 92rem;
    --touch-target: 2.75rem;
    --transition-fast: 150ms ease;
    --transition-base: 220ms cubic-bezier(.2, .8, .2, 1);
}

body {
    line-height: 1.5;
}

body::selection {
    color: var(--ink);
    background: color-mix(in srgb, var(--yellow) 68%, white);
}

.main-content {
    min-width: 0;
}

.page-header,
.page-content,
.scope-notice {
    width: min(100%, var(--content-max));
    margin-inline: auto;
}

.page-content {
    display: grid;
    gap: 1rem;
}

.page-content > :first-child {
    margin-top: 0;
}

.page-header {
    position: relative;
    padding-bottom: 1rem;
    border-bottom: 1px solid color-mix(in srgb, var(--line) 72%, transparent);
}

.page-header h1 {
    max-width: 24ch;
    text-wrap: balance;
}

.page-header .muted {
    max-width: 72ch;
    margin-bottom: 0;
}

.scope-label {
    margin-bottom: -.25rem;
}

.section-heading h2,
.section-heading h3,
.surface-card > h2,
.panel > h2,
.empty-state h2 {
    text-wrap: balance;
}

.muted,
.lede,
.project-card p,
.record-row p,
.management-row p {
    text-wrap: pretty;
}

.button,
.text-button,
.nav-link,
.workspace-button,
.project-tabs a,
.filter-chip,
.mobile-nav a,
.mobile-nav button {
    -webkit-tap-highlight-color: transparent;
}

.button {
    min-height: var(--touch-target);
    justify-content: center;
    border-radius: var(--radius-md);
    transition:
        color var(--transition-fast),
        border-color var(--transition-fast),
        background-color var(--transition-fast),
        box-shadow var(--transition-fast),
        transform var(--transition-fast);
}

.button:hover:not(:disabled):not([aria-disabled="true"]) {
    transform: translateY(-1px);
}

.button:active:not(:disabled):not([aria-disabled="true"]) {
    transform: translateY(0);
}

.button[aria-busy="true"] {
    position: relative;
    padding-right: 2.6rem;
}

.button[aria-busy="true"]::after {
    position: absolute;
    right: .9rem;
    width: .9rem;
    height: .9rem;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    content: "";
    animation: polish-spin .7s linear infinite;
}

.text-button {
    min-height: 2rem;
    padding: .25rem .35rem;
    border-radius: var(--radius-sm);
    text-underline-offset: .2em;
}

.text-button:hover {
    background: color-mix(in srgb, currentColor 9%, transparent);
}

input:not([type="checkbox"]):not([type="radio"]),
select,
textarea {
    min-height: var(--touch-target);
    border-radius: var(--radius-md);
    transition:
        border-color var(--transition-fast),
        box-shadow var(--transition-fast),
        background-color var(--transition-fast);
}

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

input:not([type="checkbox"]):not([type="radio"]):hover,
select:hover,
textarea:hover {
    border-color: color-mix(in srgb, var(--line) 78%, var(--ink));
}

input::placeholder,
textarea::placeholder {
    color: color-mix(in srgb, var(--muted) 72%, transparent);
}

.field,
label {
    gap: .45rem;
}

.field > span:first-child,
label > span:first-child,
.choice-field legend {
    line-height: 1.3;
}

.choice-field {
    border-style: solid;
    border-width: 1px;
    border-radius: var(--radius-lg);
}

.check-row {
    transition: background-color var(--transition-fast);
}

.check-row:hover {
    background: color-mix(in srgb, var(--violet-soft) 62%, transparent);
}

.project-card,
.empty-card,
.surface-card,
.panel,
.share-result,
.action-panel,
.metric,
.property-visual-card,
.project-context-header,
.management-section {
    border-radius: var(--radius-lg);
}

.project-card,
.surface-card,
.panel,
.action-panel,
.record-row,
.management-row,
.step-card {
    scroll-margin-top: 6rem;
}

.project-card--link {
    position: relative;
    overflow: hidden;
    transition:
        border-color var(--transition-fast),
        box-shadow var(--transition-base),
        transform var(--transition-base);
}

.project-card--link::after {
    position: absolute;
    right: 1rem;
    bottom: .9rem;
    color: var(--muted);
    content: "→";
    font-size: 1.1rem;
    transition: transform var(--transition-fast);
}

.project-card--link:hover::after,
.project-card--link:focus-visible::after {
    transform: translateX(.2rem);
}

.project-card--link:focus-visible {
    outline-offset: 4px;
}

.project-card__title {
    padding-right: 1.5rem;
}

.progress {
    height: .55rem;
    overflow: hidden;
    border: 0;
    border-radius: 999px;
    background: color-mix(in srgb, var(--line) 55%, transparent);
}

.progress span {
    border-radius: inherit;
}

.record-list,
.record-list--spacious,
.management-list {
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--line) 78%, transparent);
    border-radius: var(--radius-lg);
    background: var(--surface);
}

.record-row,
.management-row {
    border: 0;
    border-bottom: 1px solid color-mix(in srgb, var(--line) 72%, transparent);
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    transition: background-color var(--transition-fast);
}

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

.record-row:hover,
.management-row:hover {
    background: color-mix(in srgb, var(--violet-soft) 34%, transparent);
}

.empty-state,
.empty-note {
    border-style: dashed;
}

.empty-state {
    display: grid;
    min-height: 13rem;
    align-content: center;
    justify-items: start;
    background:
        linear-gradient(135deg, color-mix(in srgb, var(--violet-soft) 42%, transparent), transparent 68%),
        var(--surface);
}

.sticky-action-bar,
.sticky-filter-bar,
.project-context-header {
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

.sticky-action-bar {
    top: .75rem;
}

.filter-chip[aria-pressed="true"] {
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--focus) 24%, transparent);
}

.status,
.category-badge,
.attention-badge,
.access-badge,
.count-badge {
    letter-spacing: .01em;
}

.flash {
    border-width: 1px;
    border-radius: var(--radius-lg);
    box-shadow: 0 12px 32px rgb(15 23 42 / 16%);
}

.confirmation-dialog {
    border-width: 1px;
    border-radius: var(--radius-xl);
    box-shadow: 0 24px 80px rgb(15 23 42 / 24%);
}

.confirmation-dialog::backdrop,
body.has-panel::before {
    background: rgb(15 23 42 / 48%);
    backdrop-filter: blur(3px);
}

.ui-panel {
    border-width: 1px;
    border-radius: var(--radius-xl) 0 0 var(--radius-xl);
    box-shadow: -20px 0 60px rgb(15 23 42 / 18%);
    animation: polish-panel-in var(--transition-base);
}

.ui-panel__close {
    display: grid;
    width: var(--touch-target);
    height: var(--touch-target);
    border-width: 1px;
    place-items: center;
    transition: background-color var(--transition-fast), transform var(--transition-fast);
}

.ui-panel__close:hover {
    background: var(--primary-soft, #eef6f2);
    transform: rotate(4deg);
}

.tab-list {
    display: flex;
    padding: .3rem;
    gap: .25rem;
    overflow-x: auto;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background: color-mix(in srgb, var(--canvas) 74%, white);
    scrollbar-width: none;
}

.tab-list::-webkit-scrollbar {
    display: none;
}

.tab-list .button {
    flex: 0 0 auto;
    border-color: transparent;
    box-shadow: none;
}

.setup-checklist li {
    border-width: 1px;
    border-radius: var(--radius-md);
    box-shadow: none;
}

.setup-checklist li > span {
    font-size: .82rem;
}

.attention-strip,
.scope-notice {
    border-radius: var(--radius-lg);
}

/* Modern is the default product expression: architectural, warm and calm. */
body.theme--modern {
    --canvas: #f5f6f4;
    --surface: #fff;
    --surface-strong: #edf1ee;
    --ink: #1d2924;
    --line: #d9dfdb;
    --muted: #64706b;
    --violet: #183c31;
    --violet-hover: #225545;
    --violet-soft: #e6f0eb;
    --yellow: #e9b85f;
    --yellow-soft: #fff7e8;
    --pink: #1f6b54;
    --pink-soft: #edf7f3;
    --aqua: #167d69;
    --aqua-soft: #ecf8f5;
    --success: #147552;
    --warning: #9a5a12;
    --danger: #b42318;
    --action-primary-bg: #1f6b54;
    --action-primary-border: #1f6b54;
    --action-primary-fg: #fff;
    --action-secondary-bg: #fff;
    --action-secondary-border: #cdd6d1;
    --action-secondary-fg: #26362f;
    --shadow: 0 1px 2px rgb(20 34 28 / 5%), 0 10px 28px rgb(20 34 28 / 6%);
    --shadow-small: 0 1px 2px rgb(20 34 28 / 7%);
    background:
        radial-gradient(circle at 78% -10%, rgb(233 184 95 / 10%), transparent 26rem),
        var(--canvas);
}

.theme--modern .sidebar {
    border-right: 1px solid rgb(255 255 255 / 7%);
    background:
        radial-gradient(circle at 20% 5%, rgb(233 184 95 / 12%), transparent 15rem),
        #15352c;
}

.theme--modern .brand__mark {
    color: #19352d;
    background: #efc271;
    box-shadow: 0 4px 12px rgb(0 0 0 / 16%);
}

.theme--modern .eyebrow {
    color: #557069;
    font-size: .68rem;
    font-weight: 700;
}

.theme--modern .nav-link,
.theme--modern .workspace-button {
    position: relative;
    border-color: transparent;
    color: #d9e5e0;
    transition: color var(--transition-fast), background-color var(--transition-fast);
}

.theme--modern .nav-link:hover,
.theme--modern .workspace-button:hover {
    color: #fff;
    background: rgb(255 255 255 / 7%);
}

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

.theme--modern .nav-link.is-active::before,
.theme--modern .nav-link[aria-current="page"]::before {
    position: absolute;
    top: 50%;
    left: -.35rem;
    width: .2rem;
    height: 1.25rem;
    border-radius: 999px;
    background: #efc271;
    content: "";
    transform: translateY(-50%);
}

.theme--modern .workspace-button__icon {
    color: #21483d;
    background: #e9b85f;
}

.theme--modern .workspace-list__heading,
.theme--modern .nav-section-label,
.theme--modern .create-property label small,
.theme--modern .sidebar__user small {
    color: #9fb7ae;
}

.theme--modern .sidebar__user {
    border-color: rgb(255 255 255 / 10%);
    background: rgb(0 0 0 / 10%);
}

.theme--modern .button--primary {
    box-shadow: 0 1px 2px rgb(14 66 50 / 18%), 0 7px 18px rgb(14 66 50 / 12%);
}

.theme--modern .button--primary:hover:not(:disabled):not([aria-disabled="true"]) {
    border-color: #174f3e;
    background: #174f3e;
    box-shadow: 0 2px 4px rgb(14 66 50 / 18%), 0 10px 24px rgb(14 66 50 / 18%);
}

.theme--modern .button--quiet:hover:not(:disabled):not([aria-disabled="true"]) {
    border-color: #abbab2;
    background: #f8faf8;
}

.theme--modern input:not([type="checkbox"]):not([type="radio"]),
.theme--modern select,
.theme--modern textarea {
    background: #fbfcfb;
}

.theme--modern input:not([type="checkbox"]):not([type="radio"]):focus,
.theme--modern select:focus,
.theme--modern textarea:focus {
    border-color: #2b8066;
    box-shadow: 0 0 0 3px rgb(43 128 102 / 14%);
    background: #fff;
}

.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,
.theme--modern .management-section {
    border-color: #dde3df;
    border-radius: var(--radius-lg);
}

.theme--modern .project-card--link:hover {
    border-color: #b7c9c0;
    box-shadow: 0 3px 8px rgb(20 34 28 / 7%), 0 18px 44px rgb(20 34 28 / 10%);
    transform: translateY(-3px);
}

.theme--modern .metric {
    position: relative;
    min-height: 6rem;
    overflow: hidden;
    border-left-width: 1px;
}

.theme--modern .metric::before {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    height: .2rem;
    background: #aab8b2;
    content: "";
}

.theme--modern .metric--pink::before { background: #397d67; }
.theme--modern .metric--aqua::before { background: #3b8f82; }
.theme--modern .metric--yellow::before { background: #d69b39; }

.theme--modern .progress span {
    background: linear-gradient(90deg, #267058, #4a9b7f);
}

.theme--modern .sticky-action-bar,
.theme--modern .sticky-filter-bar,
.theme--modern .project-context-header {
    border-color: rgb(210 219 214 / 88%);
    background: rgb(255 255 255 / 88%);
    box-shadow: 0 8px 30px rgb(20 34 28 / 7%);
}

.theme--modern .access-badge {
    color: #275544;
    background: #edf7f2;
}

.theme--modern .language-switch button {
    border-color: #d6ded9;
    background: rgb(255 255 255 / 90%);
    box-shadow: 0 8px 24px rgb(20 34 28 / 9%);
}

/* Public entry points share the same premium product character. */
.login-shell {
    background: #f5f6f4;
}

.login-intro {
    position: relative;
    overflow: hidden;
    color: #f7faf8;
    background:
        radial-gradient(circle at 18% 16%, rgb(239 194 113 / 20%), transparent 18rem),
        linear-gradient(145deg, #173c31, #10271f 72%);
}

.login-intro::after {
    position: absolute;
    right: -6rem;
    bottom: -8rem;
    width: 22rem;
    height: 22rem;
    border: 1px solid rgb(255 255 255 / 10%);
    border-radius: 38% 62% 56% 44%;
    content: "";
    transform: rotate(18deg);
}

.login-intro :is(h1, p) {
    position: relative;
    z-index: 1;
    color: inherit;
}

.login-intro .eyebrow {
    color: #efc271;
}

.login-intro .brand__mark {
    border-color: #efc271;
    color: #17352c;
    background: #efc271;
    box-shadow: none;
}

.login-panel {
    background:
        radial-gradient(circle at 90% 10%, rgb(233 184 95 / 14%), transparent 18rem),
        #f5f6f4;
}

.login-card {
    width: min(100%, 29rem);
    padding: clamp(1.5rem, 4vw, 2.5rem);
    border: 1px solid #dce2de;
    border-radius: 1.25rem;
    background: #fff;
    box-shadow: 0 24px 70px rgb(20 34 28 / 12%);
}

.login-card > p:last-child a {
    color: #1f6b54;
    font-weight: 650;
    text-decoration: underline;
    text-decoration-color: rgb(31 107 84 / 35%);
    text-underline-offset: .2em;
}

@media (max-width: 1023px) {
    .sidebar {
        position: sticky;
        z-index: 70;
        top: 0;
        box-shadow: 0 10px 30px rgb(15 23 42 / 14%);
    }

    .page-header,
    .page-content,
    .scope-notice {
        width: 100%;
    }

    .language-switch {
        top: .62rem;
        right: .7rem;
    }
}

@media (max-width: 700px) {
    body {
        padding-bottom: calc(4.75rem + env(safe-area-inset-bottom));
    }

    .main-content {
        padding-inline: .9rem;
    }

    .page-header {
        display: grid;
        padding-bottom: .85rem;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: start;
    }

    .page-header h1 {
        font-size: clamp(1.75rem, 8vw, 2.25rem);
    }

    .page-header .access-badge {
        max-width: 7.5rem;
        white-space: normal;
        text-align: center;
    }

    .page-content {
        gap: .8rem;
    }

    .sticky-action-bar,
    .sticky-filter-bar {
        top: 4.3rem;
        margin-inline: -.2rem;
        overflow-x: auto;
        flex-wrap: nowrap;
        scrollbar-width: none;
    }

    .sticky-action-bar::-webkit-scrollbar,
    .sticky-filter-bar::-webkit-scrollbar {
        display: none;
    }

    .sticky-action-bar .button {
        display: inline-flex;
        flex: 0 0 auto;
    }

    .project-grid,
    .project-grid--index,
    .sharing-grid,
    .dashboard-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .project-card,
    .surface-card,
    .panel,
    .action-panel,
    .empty-state {
        padding: 1rem;
    }

    .record-list,
    .record-list--spacious,
    .management-list {
        margin-inline: -.15rem;
    }

    .record-row,
    .management-row {
        padding: .9rem;
    }

    .mobile-nav {
        min-height: calc(4.3rem + env(safe-area-inset-bottom));
        padding: .35rem .3rem env(safe-area-inset-bottom);
        border-top: 1px solid #dce3df;
        background: rgb(255 255 255 / 94%);
        box-shadow: 0 -10px 30px rgb(15 23 42 / 10%);
        backdrop-filter: blur(16px);
        -webkit-backdrop-filter: blur(16px);
    }

    .mobile-nav a,
    .mobile-nav button {
        position: relative;
        min-height: 3.3rem;
        border-radius: .7rem;
        color: #6b7772;
        font-size: .7rem;
        font-weight: 650;
    }

    .mobile-nav :is(a, button).is-active,
    .mobile-nav a[aria-current="page"] {
        color: #1f6b54;
        background: #edf7f3;
    }

    .floating-add {
        right: 1rem;
        bottom: calc(5rem + env(safe-area-inset-bottom));
        width: 3.5rem;
        height: 3.5rem;
        border: 0;
        color: #fff;
        background: #1f6b54;
        box-shadow: 0 12px 28px rgb(20 70 54 / 28%);
    }

    .ui-panel {
        top: auto;
        width: 100%;
        max-height: min(88dvh, 52rem);
        overflow-y: auto;
        border-radius: var(--radius-xl) var(--radius-xl) 0 0;
        box-shadow: 0 -20px 60px rgb(15 23 42 / 20%);
        animation-name: polish-sheet-in;
    }

    .ui-panel--menu {
        right: .65rem;
        bottom: calc(4.75rem + env(safe-area-inset-bottom));
        left: .65rem;
        width: auto;
        border-radius: var(--radius-xl);
    }

    .form-actions .button {
        flex: 1 1 12rem;
    }

    .login-intro {
        min-height: auto;
        padding: 1.25rem 1.25rem 2rem;
    }

    .login-intro h1 {
        font-size: clamp(2rem, 10vw, 3rem);
    }

    .login-panel {
        padding: 1rem;
        align-items: start;
    }

    .login-card {
        padding: 1.35rem;
        border-radius: 1rem;
    }
}

@media (hover: none) {
    .button:hover,
    .project-card--link:hover {
        transform: none;
    }
}

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

@keyframes polish-spin {
    to { transform: rotate(360deg); }
}

@keyframes polish-panel-in {
    from { opacity: 0; transform: translateX(1.5rem); }
    to { opacity: 1; transform: translateX(0); }
}

@keyframes polish-sheet-in {
    from { opacity: 0; transform: translateY(1.5rem); }
    to { opacity: 1; transform: translateY(0); }
}

/* Premium project-template catalog */
.catalog-intro,
.catalog-toolbar,
.template-builder {
    width: 100%;
}

.catalog-intro {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 1.5rem;
    padding: clamp(1.2rem, 2vw, 1.8rem);
    border: 1px solid color-mix(in srgb, var(--primary) 16%, var(--line));
    border-radius: var(--radius-xl);
    background:
        radial-gradient(circle at 92% 10%, color-mix(in srgb, var(--accent, #d99b49) 16%, transparent), transparent 32%),
        linear-gradient(135deg, #fff 0%, color-mix(in srgb, var(--primary-soft, #eef6f2) 54%, #fff) 100%);
    box-shadow: var(--shadow-sm);
}

.catalog-intro h2,
.template-builder h2 {
    margin: .15rem 0 .35rem;
    font-size: clamp(1.25rem, 2vw, 1.75rem);
}

.catalog-intro p:last-child {
    max-width: 68ch;
    margin-bottom: 0;
}

.catalog-toolbar {
    position: sticky;
    z-index: 12;
    top: .75rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    padding: .65rem;
    border: 1px solid color-mix(in srgb, var(--line) 75%, transparent);
    border-radius: var(--radius-lg);
    background: color-mix(in srgb, var(--paper, #fff) 88%, transparent);
    box-shadow: var(--shadow-xs);
    backdrop-filter: blur(18px) saturate(130%);
}

.catalog-search {
    flex: 1 1 22rem;
    margin: 0;
}

.catalog-search input {
    width: 100%;
    padding-left: 2.6rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%2361746d' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: .85rem center;
}

.filter-pills,
.badge-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .45rem;
}

.filter-pills button {
    min-height: 2.5rem;
    padding: .45rem .8rem;
    border: 1px solid var(--line);
    border-radius: 999px;
    color: var(--ink-muted, #5d6c67);
    background: #fff;
    cursor: pointer;
}

.filter-pills button:hover,
.filter-pills button[aria-pressed="true"] {
    border-color: color-mix(in srgb, var(--primary) 42%, var(--line));
    color: var(--primary-strong, #174c3c);
    background: var(--primary-soft, #eef6f2);
}

.template-gallery {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
    align-items: start;
}

.template-card {
    position: relative;
    display: grid;
    gap: 1rem;
    overflow: visible;
    min-width: 0;
    padding: 1.1rem;
    border-color: color-mix(in srgb, var(--primary) 12%, var(--line));
}

.template-card:hover {
    border-color: color-mix(in srgb, var(--primary) 32%, var(--line));
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
}

.template-card__top {
    position: relative;
    z-index: 4;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
}

.template-card__category,
.template-card__rooms {
    color: var(--ink-muted, #60706a);
    font-size: .82rem;
}

.template-card__body {
    display: grid;
    gap: .65rem;
}

.template-card__body > * {
    margin: 0;
}

.template-card__body > p:not(.template-card__rooms) {
    min-height: 3.2em;
    color: var(--ink-muted, #60706a);
}

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

.template-card__metrics span {
    display: grid;
    gap: .1rem;
    min-width: 0;
    padding: .55rem .35rem;
    border-radius: var(--radius-md);
    color: var(--ink-muted, #60706a);
    background: var(--surface-muted, #f4f6f4);
    font-size: .72rem;
    text-align: center;
}

.template-card__metrics strong {
    color: var(--ink, #1e2c27);
    font-size: .95rem;
}

.template-card__rooms {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.template-apply {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(8.5rem, .75fr);
    gap: .7rem;
    padding-top: 1rem;
    border-top: 1px solid var(--line);
}

.template-apply .button {
    grid-column: 1 / -1;
    width: 100%;
}

.template-card__menu {
    position: relative;
}

.template-card__menu > summary {
    display: grid;
    width: var(--touch-target);
    min-height: var(--touch-target);
    place-items: center;
    border-radius: 50%;
    color: var(--ink-muted, #60706a);
    cursor: pointer;
    list-style: none;
}

.template-card__menu > summary::-webkit-details-marker {
    display: none;
}

.template-card__menu > summary:hover,
.template-card__menu[open] > summary {
    background: var(--primary-soft, #eef6f2);
}

.template-card__menu-content {
    position: absolute;
    z-index: 8;
    top: calc(100% + .35rem);
    right: 0;
    width: min(20rem, calc(100vw - 2rem));
    padding: .9rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background: #fff;
    box-shadow: var(--shadow-lg);
}

.template-card__menu-content form {
    display: grid;
    gap: .6rem;
}

.template-card__menu-content form + form {
    margin-top: .8rem;
    padding-top: .8rem;
    border-top: 1px solid var(--line);
}

.template-card__edit {
    padding-top: .15rem;
    color: var(--ink-muted, #60706a);
}

.template-card__edit > summary {
    min-height: var(--touch-target);
    cursor: pointer;
    font-weight: 700;
}

.template-card__edit form {
    margin-top: .75rem;
    padding: .85rem;
    border-radius: var(--radius-md);
    background: var(--surface-muted, #f4f6f4);
}

.template-builder {
    margin-top: 1.25rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--line);
}

.template-builder .surface-card {
    align-content: start;
}

.template-builder h3 {
    margin: .15rem 0 .35rem;
}

@media (max-width: 720px) {
    .catalog-intro,
    .catalog-toolbar {
        align-items: stretch;
        flex-direction: column;
    }

    .catalog-toolbar {
        top: .5rem;
    }

    .filter-pills {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }

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

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

    .template-apply .button {
        grid-column: auto;
    }
}