/* ========================================================================== */
/* Tidly clean product UI design system                                       */
/* ========================================================================== */

@font-face {
    font-family: "Inter";
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url("webfonts/inter-latin-variable.woff2") format("woff2-variations");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
        U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191,
        U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: "Plus Jakarta Sans";
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url("webfonts/plus-jakarta-sans-latin-variable.woff2") format("woff2-variations");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
        U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191,
        U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
    color-scheme: light;

    --font-sans: "Inter", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --font-display: "Plus Jakarta Sans", "Inter", "Segoe UI", sans-serif;
    --font-mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
    --bs-body-font-family: var(--font-sans);

    --text-xs: 0.8125rem;
    --text-sm: 0.875rem;
    --text-base: 1rem;
    --text-lg: 1.125rem;
    --text-xl: 1.25rem;
    --text-2xl: 1.5rem;
    --text-3xl: clamp(1.875rem, 1.55rem + 1.4vw, 2.75rem);
    --text-display: clamp(2.75rem, 2rem + 3.4vw, 5rem);
    --leading-tight: 1.08;
    --leading-heading: 1.2;
    --leading-body: 1.6;

    --color-primary-base: #0F172A;
    --color-primary-action: #EA580C;
    --color-ai-accent: #2563EB;
    --color-bg-main: #F8FAFC;
    --color-surface-card: #FFFFFF;
    --color-status-success: #16A34A;

    --color-brand-50: #FFF7ED;
    --color-brand-100: #FFEDD5;
    --color-brand-200: #FED7AA;
    --color-brand-500: var(--color-primary-action);
    --color-brand-600: var(--color-primary-action);
    --color-brand-700: var(--color-primary-action);
    --color-brand-800: var(--color-primary-base);
    --color-brand-disabled: var(--color-primary-action);
    --color-accent: var(--color-primary-action);

    --color-ink: var(--color-primary-base);
    --color-text: var(--color-primary-base);
    --color-text-secondary: #475569;
    --color-text-muted: #475569;
    --color-bg-marketing: var(--color-bg-main);
    --color-bg-app: var(--color-bg-main);
    --color-surface: var(--color-surface-card);
    --color-surface-subtle: var(--color-bg-main);
    --color-on-brand: #ffffff;
    --color-text-on-dark: #d0d6df;
    --color-text-on-dark-strong: #eef1f5;
    --color-success-on-dark: #78ddb7;
    --color-border: #E2E8F0;
    --color-border-strong: #CBD5E1;
    --color-overlay: rgb(15 23 42 / 64%);
    --color-focus-ring: rgb(234 88 12 / 22%);

    --color-success: var(--color-status-success);
    --color-success-bg: #F0FDF4;
    --color-warning: var(--color-primary-action);
    --color-warning-bg: #FFF7ED;
    --color-danger: var(--color-primary-action);
    --color-danger-bg: #FFF7ED;
    --color-info: var(--color-primary-base);
    --color-info-bg: var(--color-bg-main);

    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-6: 1.5rem;
    --space-8: 2rem;
    --space-12: 3rem;
    --space-16: 4rem;
    --space-24: 6rem;
    --space-32: 8rem;

    --radius-sm: 0.5rem;
    --radius-md: 0.5rem;
    --radius-lg: 0.75rem;
    --radius-xl: 0.75rem;
    --radius-pill: 0.75rem;

    --shadow-sm: 0 1px 2px rgb(15 23 42 / 5%);
    --shadow-md: 0 4px 14px rgb(15 23 42 / 7%);
    --shadow-lg: 0 10px 28px rgb(15 23 42 / 10%);

    --content-max: 75rem;
    --content-narrow: 42rem;
    --app-max: 90rem;
    --page-gutter: clamp(1rem, 3vw, 3rem);
    --section-space: clamp(4rem, 8vw, 7.5rem);

    --duration-fast: 120ms;
    --duration-normal: 180ms;
    --duration-slow: 280ms;
    --ease-standard: cubic-bezier(0.2, 0, 0, 1);
    --ease-enter: cubic-bezier(0, 0, 0, 1);

    --layer-base: 0;
    --layer-sticky: 20;
    --layer-dropdown: 40;
    --layer-overlay: 60;
    --layer-modal: 80;
    --layer-toast: 1090;

    /* Compatibility aliases used by existing application code. */
    --font-primary: var(--font-sans);
    --fw-regular: 400;
    --fw-medium: 500;
    --fw-semibold: 600;
    --fw-bold: 700;
    --brand-blue: var(--color-brand-600);
    --ink: var(--color-ink);
    --muted: var(--color-text-secondary);
    --surface: var(--color-surface);
    --surface-soft: var(--color-surface-subtle);
    --border-soft: var(--color-border);
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: 5.5rem;
    scrollbar-gutter: stable;
    font-family: var(--font-sans);
}

body {
    min-width: 0;
    min-height: 100vh;
    margin: 0;
    color: var(--color-text);
    background: var(--color-bg-marketing);
    font-family: var(--font-sans);
    font-size: var(--text-base);
    font-weight: 400;
    line-height: var(--leading-body);
    font-kerning: normal;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
}

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

.ui-widget,
.ui-widget input,
.ui-widget select,
.ui-widget textarea,
.ui-widget button {
    font-family: var(--font-sans);
}

::selection {
    color: var(--color-ink);
    background: var(--color-brand-200);
}

:where(a, button, input, textarea, select, [tabindex]):focus-visible {
    outline: 2px solid var(--color-brand-600);
    outline-offset: 3px;
}

a {
    color: var(--color-brand-700);
    text-underline-offset: 0.18em;
}

a:hover {
    color: var(--color-brand-800);
}

p {
    margin-top: 0;
    margin-bottom: 1em;
}

h1,
h2,
h3,
h4,
h5,
h6,
strong {
    color: var(--color-ink);
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--font-display);
    text-wrap: balance;
}

strong {
    font-weight: 700;
}

code {
    color: var(--color-brand-800);
    font-family: var(--font-mono);
}

.app-shell {
    display: flex;
    min-height: 100vh;
    flex-direction: column;
}

.route-boot-pending .app-shell {
    visibility: hidden;
}

.app-shell > main {
    min-height: 0;
    flex: 1 0 auto;
}

main {
    padding-top: 72px;
}

.container {
    width: min(100%, calc(var(--content-max) + (2 * var(--page-gutter))));
    max-width: none;
    margin-inline: auto;
    padding-inline: var(--page-gutter);
}

.container-fluid {
    padding-inline: var(--page-gutter);
}

.text-brand {
    color: var(--color-brand-600) !important;
}

.text-muted {
    color: var(--color-text-secondary) !important;
}

/* ========================================================================== */
/* Shared controls and Bootstrap compatibility                                */
/* ========================================================================== */

.btn {
    display: inline-flex;
    min-height: 44px;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    border-radius: var(--radius-md);
    font-size: var(--text-sm);
    font-weight: 500;
    line-height: 1.2;
    transition:
        color var(--duration-fast) var(--ease-standard),
        background-color var(--duration-fast) var(--ease-standard),
        border-color var(--duration-fast) var(--ease-standard),
        box-shadow var(--duration-fast) var(--ease-standard),
        transform var(--duration-fast) var(--ease-standard);
}

.tidly-button:active:not(:disabled) {
    transform: scale(0.98);
}

.btn-sm {
    min-height: 44px;
    border-radius: var(--radius-sm);
}

.btn-lg {
    min-height: 52px;
    border-radius: var(--radius-md);
    font-size: var(--text-base);
}

.btn-primary {
    --bs-btn-color: var(--color-on-brand);
    --bs-btn-bg: var(--color-brand-600);
    --bs-btn-border-color: var(--color-brand-600);
    --bs-btn-hover-color: var(--color-on-brand);
    --bs-btn-hover-bg: var(--color-brand-700);
    --bs-btn-hover-border-color: var(--color-brand-700);
    --bs-btn-focus-shadow-rgb: 36, 87, 230;
    --bs-btn-active-color: var(--color-on-brand);
    --bs-btn-active-bg: var(--color-brand-800);
    --bs-btn-active-border-color: var(--color-brand-800);
    --bs-btn-disabled-color: var(--color-on-brand);
    --bs-btn-disabled-bg: var(--color-brand-disabled);
    --bs-btn-disabled-border-color: var(--color-brand-disabled);
    box-shadow: none;
}

.btn-primary:hover {
    box-shadow: var(--shadow-sm);
}

.btn-outline-secondary {
    --bs-btn-color: var(--color-text);
    --bs-btn-border-color: var(--color-border-strong);
    --bs-btn-hover-color: var(--color-ink);
    --bs-btn-hover-bg: var(--color-surface-subtle);
    --bs-btn-hover-border-color: var(--color-text-secondary);
    --bs-btn-active-color: var(--color-ink);
    --bs-btn-active-bg: var(--color-brand-50);
    --bs-btn-active-border-color: var(--color-brand-600);
}

.btn-link {
    color: var(--color-brand-700);
    font-weight: 500;
}

.btn:disabled,
.btn.disabled {
    cursor: not-allowed;
    box-shadow: none;
    opacity: 0.65;
}

.form-label {
    margin-bottom: var(--space-2);
    color: var(--color-text);
    font-size: var(--text-sm);
    font-weight: 500;
}

.form-control,
.form-select {
    min-height: 48px;
    border-color: var(--color-border-strong);
    border-radius: var(--radius-md);
    color: var(--color-ink);
    background-color: var(--color-surface-subtle);
    font-size: var(--text-base);
    box-shadow: none;
}

.form-control::placeholder {
    color: var(--color-text-muted);
    opacity: 1;
}

.form-control:focus,
.form-select:focus {
    border-color: var(--color-brand-600);
    background-color: var(--color-surface);
    box-shadow: 0 0 0 3px var(--color-focus-ring);
}

.form-control[readonly] {
    color: var(--color-text-secondary);
    background: var(--color-surface-subtle);
}

.form-check-input {
    border-color: var(--color-border-strong);
}

.form-check-input:checked {
    border-color: var(--color-brand-600);
    background-color: var(--color-brand-600);
}

.dropdown-menu {
    padding: var(--space-2);
    border-color: var(--color-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
}

.dropdown-item {
    min-height: 44px;
    display: flex;
    align-items: center;
    gap: var(--space-2);
    border-radius: var(--radius-sm);
    color: var(--color-text);
    font-size: var(--text-sm);
}

.dropdown-item:hover,
.dropdown-item:focus {
    color: var(--color-ink);
    background: var(--color-brand-50);
}

.dropdown-item.active,
.dropdown-item.active:hover,
.dropdown-item.active:focus {
    color: var(--color-on-brand);
    background: var(--color-brand-600);
}

.modal-backdrop {
    background: var(--color-ink);
}

.modal-content {
    overflow: hidden;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-lg);
}

.modal-header,
.modal-footer {
    border-color: var(--color-border);
}

.modal-body {
    color: var(--color-text);
}

.tidly-confirmation-modal .modal-dialog {
    max-width: 30rem;
}

.tidly-confirmation-modal .modal-content {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-lg);
}

.tidly-confirmation-modal .modal-header {
    position: relative;
    display: block;
    padding: var(--space-8) var(--space-8) var(--space-2);
}

.tidly-confirmation-heading {
    display: flex;
    width: 100%;
    min-width: 0;
    align-items: center;
    flex-direction: column;
    gap: var(--space-4);
    text-align: center;
}

.tidly-confirmation-copy {
    max-width: 24rem;
    min-width: 0;
}

.tidly-confirmation-modal .modal-title {
    color: var(--color-ink);
    font-size: var(--text-2xl);
    font-weight: 700;
    letter-spacing: -0.025em;
    line-height: var(--leading-heading);
}

.tidly-confirmation-icon {
    display: inline-flex;
    width: 64px;
    height: 64px;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-md);
    color: var(--color-danger);
    background: var(--color-danger-bg);
    font-size: var(--text-xl);
}

.tidly-confirmation-icon[hidden] {
    display: none;
}

.tidly-confirmation-modal .modal-body {
    padding: var(--space-3) 0 0;
    color: var(--color-text-secondary);
    line-height: var(--leading-body);
}

.tidly-confirmation-modal .modal-footer {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-2);
    padding: var(--space-4) var(--space-8) var(--space-8);
}

.tidly-confirmation-modal .modal-footer > * {
    min-height: 48px;
    margin: 0;
}

.tidly-confirmation-modal .btn-close {
    position: absolute;
    z-index: 1;
    top: var(--space-4);
    right: var(--space-4);
}

.tidly-confirmation-modal .btn-danger {
    border-color: var(--color-danger);
    color: var(--color-on-brand);
    background: var(--color-danger);
}

.tidly-confirmation-modal .btn-danger:hover,
.tidly-confirmation-modal .btn-danger:active {
    border-color: var(--color-danger);
    color: var(--color-on-brand);
    background: var(--color-danger);
    box-shadow: var(--shadow-sm);
}

.modal-icon-circle {
    display: inline-flex;
    width: 56px;
    height: 56px;
    align-items: center;
    justify-content: center;
    margin-bottom: var(--space-4);
    border-radius: var(--radius-lg);
    color: var(--color-brand-700);
    background: var(--color-brand-50);
    font-size: var(--text-xl);
}

.input-group .toggle-password {
    min-width: 48px;
    border-color: var(--color-border-strong);
    color: var(--color-text-secondary);
    background: var(--color-surface);
}

.toggle-password:hover {
    color: var(--color-ink);
    background: var(--color-surface-subtle);
}

/* ========================================================================== */
/* App navigation and shared pages                                            */
/* ========================================================================== */

.navbar {
    min-height: 72px;
    border-color: var(--color-border) !important;
    background: var(--color-surface) !important;
    box-shadow: none;
}

.navbar .container {
    min-height: 71px;
}

.tidly-wordmark,
.navbar-brand.tidly-wordmark {
    display: inline-block;
    margin: 0;
    color: var(--color-ink) !important;
    font-family: var(--font-sans);
    font-size: 1.65rem;
    font-weight: 700;
    letter-spacing: -0.09em;
    line-height: 1;
    text-decoration: none;
}

.tidly-wordmark span {
    color: var(--color-brand-600);
}

.navbar-toggler {
    width: 44px;
    height: 44px;
    padding: var(--space-2);
    border-color: var(--color-border);
    border-radius: var(--radius-md);
}

.navbar-toggler:focus {
    box-shadow: 0 0 0 3px var(--color-focus-ring);
}

.nav-link {
    min-height: 44px;
    display: flex;
    align-items: center;
    padding-inline: var(--space-3) !important;
    border-radius: var(--radius-sm);
    color: var(--color-text-secondary);
    font-size: var(--text-sm);
    font-weight: 500;
}

.nav-link:hover,
.nav-link.active {
    color: var(--color-brand-700) !important;
    background: var(--color-brand-50);
}

.tidly-navbar-overview-link {
    display: inline-flex;
    min-height: 48px;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
}

.app-shell {
    --product-sidebar-width: 17rem;
    --product-toolbar-height: 4.5rem;
}

.app-shell.is-product-view {
    overflow-x: hidden;
    overflow-x: clip;
    background: var(--color-bg-app);
}

.app-shell.is-product-view > #site-navbar,
.app-shell.is-product-view > .site-footer {
    display: none;
}

.app-shell.is-product-view > main {
    min-width: 0;
    min-height: 100vh;
    margin-left: var(--product-sidebar-width);
    padding-top: var(--product-toolbar-height);
    background: var(--color-bg-app);
}

.tidly-product-sidebar {
    position: fixed;
    z-index: var(--layer-sticky);
    inset: 0 auto 0 0;
    display: flex;
    width: var(--product-sidebar-width);
    flex-direction: column;
    padding: var(--space-6) var(--space-4);
    border-right: 1px solid var(--color-border);
    background: var(--color-surface);
}

.tidly-product-sidebar[hidden],
.tidly-product-toolbar[hidden],
.tidly-product-nav-backdrop[hidden],
.tidly-product-onboarding-cta[hidden],
.tidly-notification-panel[hidden],
.tidly-product-account-menu[hidden] {
    display: none;
}

.tidly-product-brand {
    align-self: flex-start;
    min-width: 72px;
    margin: var(--space-2) var(--space-3) var(--space-8);
}

.tidly-product-nav,
.tidly-product-sidebar-footer {
    display: grid;
    gap: var(--space-1);
}

.tidly-product-nav a,
.tidly-product-sidebar-footer a {
    position: relative;
    display: grid;
    min-height: 48px;
    grid-template-columns: 24px minmax(0, 1fr);
    align-items: center;
    gap: var(--space-3);
    width: 100%;
    padding: var(--space-3);
    border: 0;
    border-radius: var(--radius-md);
    color: var(--color-text-secondary);
    background: transparent;
    font-size: var(--text-sm);
    font-weight: 500;
    text-align: left;
    text-decoration: none;
    transition: color var(--duration-fast) var(--ease-standard),
        background-color var(--duration-fast) var(--ease-standard);
}

.tidly-product-nav a:hover,
.tidly-product-sidebar-footer a:hover {
    color: var(--color-ink);
    background: var(--color-surface-subtle);
}

.tidly-product-nav a.active,
.tidly-product-sidebar-footer a.active {
    color: var(--color-brand-700);
    background: var(--color-brand-50);
}

.tidly-product-nav i,
.tidly-product-sidebar-footer i {
    width: 24px;
    font-size: var(--text-base);
    text-align: center;
}

.tidly-product-sidebar-footer {
    margin-top: auto;
    padding-top: var(--space-4);
    border-top: 1px solid var(--color-border);
}

.tidly-product-toolbar {
    position: fixed;
    z-index: var(--layer-sticky);
    top: 0;
    right: 0;
    left: var(--product-sidebar-width);
    display: flex;
    min-height: var(--product-toolbar-height);
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    padding-inline: var(--page-gutter);
    border-bottom: 1px solid var(--color-border);
    background: rgb(255 255 255 / 96%);
}

.tidly-product-toolbar-leading,
.tidly-product-toolbar-actions,
.tidly-product-account {
    display: flex;
    align-items: center;
}

.tidly-product-toolbar-leading,
.tidly-product-toolbar-actions {
    gap: var(--space-3);
}

.tidly-product-onboarding-cta {
    display: inline-flex;
    min-height: 44px;
    align-items: center;
    padding-inline: var(--space-4);
    white-space: nowrap;
}

.tidly-product-onboarding-cta-short {
    display: none;
}

#product-toolbar-title {
    margin: 0;
    color: var(--color-ink);
    font-size: var(--text-base);
    font-weight: 700;
}

.tidly-toolbar-button {
    position: relative;
    display: inline-flex;
    width: 44px;
    height: 44px;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 1px solid transparent;
    border-radius: var(--radius-md);
    color: var(--color-text-secondary);
    background: transparent;
}

.tidly-toolbar-button:hover,
.tidly-toolbar-button[aria-expanded="true"] {
    border-color: var(--color-border);
    color: var(--color-ink);
    background: var(--color-surface-subtle);
}

.tidly-product-nav-toggle {
    display: none;
}

.tidly-product-account-control {
    position: relative;
}

.tidly-product-account {
    min-height: 44px;
    gap: var(--space-2);
    padding: var(--space-1) var(--space-3) var(--space-1) var(--space-1);
    border: 0;
    border-radius: var(--radius-md);
    color: var(--color-text-secondary);
    background: transparent;
    font-size: var(--text-sm);
    font-weight: 500;
}

.tidly-product-account:hover,
.tidly-product-account[aria-expanded="true"] {
    color: var(--color-ink);
    background: var(--color-surface-subtle);
}

.tidly-product-account-icon {
    display: inline-flex;
    width: 36px;
    height: 36px;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    color: var(--color-text-secondary);
    background: var(--color-surface);
}

.tidly-product-account-chevron {
    margin-left: var(--space-1);
    font-size: 0.625rem;
}

.tidly-product-account-menu {
    position: absolute;
    z-index: var(--layer-dropdown);
    top: calc(100% + var(--space-2));
    right: 0;
    display: grid;
    min-width: 13rem;
    gap: var(--space-1);
    padding: var(--space-2);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface);
    box-shadow: var(--shadow-md);
}

.tidly-product-account-menu a,
.tidly-product-account-menu button {
    display: grid;
    min-height: 44px;
    grid-template-columns: 20px minmax(0, 1fr);
    align-items: center;
    gap: var(--space-3);
    width: 100%;
    padding: var(--space-2) var(--space-3);
    border: 0;
    border-radius: var(--radius-sm);
    color: var(--color-text-secondary);
    background: transparent;
    font-size: var(--text-sm);
    font-weight: 500;
    text-align: left;
    text-decoration: none;
}

.tidly-product-account-menu a:hover,
.tidly-product-account-menu a.active,
.tidly-product-account-menu button:hover {
    color: var(--color-ink);
    background: var(--color-surface-subtle);
}

.tidly-product-account-menu i {
    text-align: center;
}

.tidly-notification-control {
    position: relative;
}

.tidly-notification-dot {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 7px;
    height: 7px;
    border: 2px solid var(--color-surface);
    border-radius: 50%;
    background: var(--color-brand-600);
}

.tidly-notification-panel {
    position: absolute;
    z-index: var(--layer-dropdown);
    top: calc(100% + var(--space-2));
    right: 0;
    width: min(23rem, calc(100vw - 2rem));
    overflow: hidden;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-surface);
    box-shadow: var(--shadow-md);
}

.tidly-notification-panel > header {
    padding: var(--space-4) var(--space-6);
    border-bottom: 1px solid var(--color-border);
}

.tidly-notification-panel h2 {
    margin: 0;
    color: var(--color-ink);
    font-size: var(--text-base);
    font-weight: 700;
}

.tidly-notification-empty {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    gap: var(--space-3);
    padding: var(--space-6);
}

.tidly-notification-empty > span {
    display: inline-flex;
    width: 42px;
    height: 42px;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-md);
    color: var(--color-text-secondary);
    background: var(--color-surface-subtle);
}

.tidly-notification-empty strong {
    display: block;
    margin-bottom: var(--space-1);
    color: var(--color-ink);
    font-size: var(--text-sm);
}

.tidly-notification-empty p {
    margin: 0;
    color: var(--color-text-secondary);
    font-size: var(--text-sm);
    line-height: 1.55;
}

.tidly-product-page {
    width: min(100%, var(--app-max));
    min-height: calc(100vh - var(--product-toolbar-height));
    margin-inline: auto;
    padding: var(--space-8) var(--page-gutter) var(--space-16);
}

.tidly-product-page-header {
    margin-bottom: var(--space-6);
}

.tidly-product-page-header h1 {
    margin: 0 0 var(--space-2);
    color: var(--color-ink);
    font-size: var(--text-3xl);
    font-weight: 700;
    letter-spacing: -0.04em;
    line-height: var(--leading-heading);
}

.tidly-product-page-header p {
    max-width: 42rem;
    margin: 0;
    color: var(--color-text-secondary);
}

.tidly-overview-page {
    max-width: calc(var(--content-max) - (2 * var(--space-24)));
}

.tidly-overview-status-surface {
    overflow: hidden;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-surface);
}

.tidly-overview-status-header {
    display: flex;
    align-items: stretch;
    flex-direction: column;
    gap: var(--space-6);
    padding: var(--space-6);
}

.tidly-overview-status-label {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-bottom: var(--space-3);
}

.tidly-overview-status-icon {
    display: inline-flex;
    width: var(--space-5);
    height: var(--space-5);
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-pill);
    color: var(--color-text-secondary);
    background: var(--color-surface-subtle);
    font-size: var(--text-xs);
}

.tidly-overview-status-icon.is-active {
    color: var(--color-brand-700);
    background: var(--color-brand-50);
}

.tidly-overview-status-icon.is-attention {
    color: var(--color-warning);
    background: var(--color-warning-bg);
}

.tidly-overview-status-icon.is-error {
    color: var(--color-danger);
    background: var(--color-danger-bg);
}

.tidly-overview-status-copy {
    min-width: 0;
}

.tidly-overview-status-label p {
    margin: 0;
    color: var(--color-text-secondary);
    font-size: var(--text-sm);
    font-weight: 700;
}

.tidly-overview-status-copy h2 {
    margin: 0 0 var(--space-3);
    color: var(--color-ink);
    font-size: var(--text-2xl);
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: var(--leading-heading);
}

.tidly-overview-status-copy > p:last-child {
    max-width: var(--content-narrow);
    margin: 0;
    color: var(--color-text-secondary);
    font-size: var(--text-sm);
}

.tidly-overview-status-header .btn {
    width: 100%;
}

.tidly-overview-facts {
    margin: 0;
    padding: 0 var(--space-6);
    border-top: 1px solid var(--color-border);
    background: var(--color-surface-subtle);
}

.tidly-overview-facts > div {
    min-width: 0;
    padding: var(--space-4) 0;
}

.tidly-overview-facts > div + div {
    border-top: 1px solid var(--color-border);
}

.tidly-overview-facts dt {
    margin-bottom: var(--space-1);
    color: var(--color-text-secondary);
    font-size: var(--text-sm);
    font-weight: 500;
}

.tidly-overview-facts dd {
    overflow-wrap: anywhere;
    margin: 0;
    color: var(--color-ink);
    font-size: var(--text-sm);
    font-weight: 700;
}

.tidly-overview-facts dd.is-positive {
    color: var(--color-brand-700);
}

.tidly-overview-facts dd.is-warning {
    color: var(--color-warning);
}

.tidly-overview-facts dd.is-error {
    color: var(--color-danger);
}

.tidly-overview-followup {
    margin-top: var(--space-8);
    border-top: 1px solid var(--color-border);
}

.tidly-overview-followup article {
    min-width: 0;
    padding: var(--space-6) 0;
    border-bottom: 1px solid var(--color-border);
}

.tidly-overview-followup header {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-bottom: var(--space-3);
}

.tidly-overview-followup header > i {
    width: var(--space-5);
    flex: 0 0 auto;
    color: var(--color-brand-700);
    text-align: center;
}

.tidly-overview-followup h2 {
    margin: 0;
    color: var(--color-ink);
    font-size: var(--text-base);
    font-weight: 700;
}

.tidly-overview-followup p {
    margin: 0;
    color: var(--color-text-secondary);
    font-size: var(--text-sm);
}

.tidly-overview-followup .tidly-overview-all-clear {
    color: var(--color-success);
    font-weight: 700;
}

.tidly-overview-followup a {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    margin-top: var(--space-4);
    color: var(--color-brand-700);
    font-size: var(--text-sm);
    font-weight: 700;
    text-decoration: none;
}

.tidly-overview-followup a:hover {
    text-decoration: underline;
}

.tidly-placeholder-surface {
    max-width: 54rem;
    overflow: hidden;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-surface);
}

.tidly-placeholder-heading {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr);
    gap: var(--space-4);
    padding: var(--space-6);
}

.tidly-placeholder-heading > span {
    display: inline-flex;
    width: 48px;
    height: 48px;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-md);
    color: var(--color-brand-700);
    background: var(--color-brand-50);
}

.tidly-placeholder-heading h2 {
    margin: 0 0 var(--space-1);
    color: var(--color-ink);
    font-size: var(--text-xl);
    font-weight: 700;
}

.tidly-placeholder-heading p {
    max-width: 42rem;
    margin: 0;
    color: var(--color-text-secondary);
}

.tidly-placeholder-rows {
    border-top: 1px solid var(--color-border);
}

.tidly-placeholder-rows article {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-6);
    padding: var(--space-4) var(--space-6);
}

.tidly-placeholder-rows article + article {
    border-top: 1px solid var(--color-border);
}

.tidly-placeholder-rows strong {
    color: var(--color-ink);
}

.tidly-placeholder-rows p {
    margin: var(--space-1) 0 0;
    color: var(--color-text-secondary);
    font-size: var(--text-sm);
}

.tidly-placeholder-rows a {
    flex: 0 0 auto;
    color: var(--color-brand-700);
    font-size: var(--text-sm);
    font-weight: 700;
    text-decoration: none;
}

.tidly-placeholder-rows a:hover {
    text-decoration: underline;
}

.tidly-placeholder-status {
    margin-bottom: var(--space-2) !important;
    color: var(--color-text-secondary) !important;
    font-size: var(--text-xs);
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

.tidly-calendar-placeholder {
    min-height: 20rem;
}

.tidly-calendar-placeholder .tidly-placeholder-heading {
    min-height: 20rem;
    align-content: center;
}

.tidly-profile-page {
    max-width: calc(var(--content-max) - (2 * var(--space-24)));
}

.tidly-profile-surface {
    overflow: hidden;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-surface);
}

.tidly-profile-section {
    display: grid;
    gap: var(--space-6);
    padding: var(--space-6);
}

.tidly-profile-section + .tidly-profile-section {
    border-top: 1px solid var(--color-border);
}

.tidly-profile-section-header h2 {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin: 0 0 var(--space-2);
    color: var(--color-ink);
    font-size: var(--text-lg);
    font-weight: 700;
    letter-spacing: -0.02em;
}

.tidly-profile-section-header h2 i {
    display: inline-flex;
    width: var(--space-8);
    height: var(--space-8);
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-sm);
    color: var(--color-brand-700);
    background: var(--color-brand-50);
    font-size: var(--text-sm);
}

.tidly-profile-section-header p,
.tidly-profile-readonly-note,
.tidly-profile-save-status {
    margin: 0;
    color: var(--color-text-secondary);
    font-size: var(--text-sm);
}

.tidly-profile-section-content {
    min-width: 0;
}

.tidly-profile-identity {
    display: grid;
    margin: 0;
    border-block: 1px solid var(--color-border);
}

.tidly-profile-identity > div {
    min-width: 0;
    padding-block: var(--space-3);
}

.tidly-profile-identity > div + div {
    border-top: 1px solid var(--color-border);
}

.tidly-profile-identity dt {
    margin-bottom: var(--space-1);
    color: var(--color-text-secondary);
    font-size: var(--text-sm);
    font-weight: 500;
}

.tidly-profile-identity dd {
    overflow-wrap: anywhere;
    margin: 0;
    color: var(--color-ink);
    font-weight: 500;
}

.tidly-profile-readonly-note {
    margin-top: var(--space-2);
}

.tidly-profile-form {
    display: grid;
    gap: var(--space-4);
    margin-top: var(--space-4);
}

.tidly-profile-input-action {
    display: grid;
    gap: var(--space-3);
}

.tidly-profile-input-action input {
    min-width: 0;
}

.tidly-profile-input-action .btn {
    min-height: 48px;
}

.tidly-profile-actions {
    display: flex;
    justify-content: flex-end;
}

.tidly-profile-setting {
    display: grid;
    min-height: 48px;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-3);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    color: var(--color-text);
    background: var(--color-surface-subtle);
    cursor: pointer;
    transition: border-color var(--duration-fast) var(--ease-standard),
        background-color var(--duration-fast) var(--ease-standard);
}

.tidly-profile-setting:has(input:checked) {
    border-color: var(--color-brand-200);
    background: var(--color-brand-50);
}

.tidly-profile-setting strong,
.tidly-profile-setting small {
    display: block;
}

.tidly-profile-setting strong {
    margin-bottom: var(--space-1);
    color: var(--color-ink);
    font-size: var(--text-sm);
}

.tidly-profile-setting small {
    color: var(--color-text-secondary);
    font-size: var(--text-sm);
}

.tidly-profile-setting input {
    position: relative;
    width: var(--space-12);
    height: calc(var(--space-6) + var(--space-1));
    flex: 0 0 auto;
    appearance: none;
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-pill);
    background: var(--color-surface-subtle);
    cursor: pointer;
    transition: border-color var(--duration-fast) var(--ease-standard),
        background-color var(--duration-fast) var(--ease-standard);
}

.tidly-profile-setting input::before {
    position: absolute;
    top: var(--space-1);
    left: var(--space-1);
    width: calc(var(--space-4) + var(--space-1));
    height: calc(var(--space-4) + var(--space-1));
    border-radius: 50%;
    background: var(--color-surface);
    box-shadow: var(--shadow-sm);
    content: "";
    transition: transform var(--duration-fast) var(--ease-standard);
}

.tidly-profile-setting input:checked {
    border-color: var(--color-brand-600);
    background: var(--color-brand-600);
}

.tidly-profile-setting input:checked::before {
    transform: translateX(calc(var(--space-6) - var(--space-1)));
}

.tidly-profile-setting input:focus-visible {
    outline: 3px solid var(--color-brand-200);
    outline-offset: 2px;
}

.tidly-profile-setting input:disabled {
    cursor: wait;
    opacity: 0.65;
}

.tidly-profile-save-status {
    margin-top: var(--space-2);
}

.tidly-profile-save-status.is-saved {
    color: var(--color-success);
}

.tidly-profile-save-status.is-error {
    color: var(--color-danger);
}

.tidly-enquiry-settings {
    padding: var(--space-6);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-surface);
    box-shadow: var(--shadow-sm);
}

.tidly-profile-surface-header {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    margin-bottom: var(--space-6);
}

.tidly-profile-surface-header h2,
.tidly-profile-surface-header p {
    margin: 0;
}

.tidly-profile-surface-header h2 {
    color: var(--color-primary-base);
    font-size: var(--text-lg);
    font-weight: 700;
}

.tidly-profile-surface-header p {
    color: var(--color-text-secondary);
    font-size: var(--text-sm);
}

.tidly-profile-surface-icon {
    display: grid;
    width: 48px;
    height: 48px;
    flex: 0 0 48px;
    place-items: center;
    border-radius: var(--radius-md);
    background: var(--color-brand-50);
    font-size: var(--text-xl);
}

.tidly-profile-surface-icon-ai {
    color: var(--color-ai-accent);
    background: color-mix(in srgb, var(--color-ai-accent) 10%, var(--color-surface));
}

.tidly-enquiry-settings-list {
    display: grid;
    gap: var(--space-4);
}

.tidly-enquiry-setting-row {
    display: grid;
    min-height: 72px;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-4);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface);
}

.tidly-enquiry-setting-copy {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: var(--space-3);
}

.tidly-enquiry-setting-copy > i {
    width: 24px;
    flex: 0 0 24px;
    color: var(--color-text-secondary);
    text-align: center;
}

.tidly-enquiry-setting-row label,
.tidly-enquiry-setting-row strong,
.tidly-enquiry-setting-row small {
    display: block;
}

.tidly-enquiry-setting-row label,
.tidly-enquiry-setting-row strong {
    margin: 0;
    color: var(--color-ink);
    font-size: var(--text-base);
    font-weight: 700;
}

.tidly-enquiry-setting-row small {
    margin-top: var(--space-1);
    color: var(--color-text-secondary);
    font-size: var(--text-sm);
}

.tidly-enquiry-setting-row select {
    min-width: 9rem;
    min-height: 48px;
    padding: 0 var(--space-10) 0 var(--space-3);
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-md);
    background-color: var(--color-surface);
    color: var(--color-ink);
    font-weight: 700;
}

.tidly-enquiry-setting-group {
    overflow: hidden;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface);
}

.tidly-enquiry-setting-group .tidly-enquiry-setting-row {
    border: 0;
    border-radius: 0;
}

.tidly-enquiry-toggle-row {
    cursor: pointer;
}

.tidly-enquiry-toggle-control {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    color: var(--color-text-secondary);
    font-size: var(--text-sm);
    font-weight: 500;
}

.tidly-enquiry-toggle-control .tidly-automation-toggle {
    width: 48px;
    height: 48px;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    background: transparent;
}

.tidly-enquiry-toggle-control input {
    position: relative;
    width: 48px;
    min-width: 48px;
    height: 28px;
    min-height: 28px;
    margin: 0;
    appearance: none;
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-pill);
    background: var(--color-surface-subtle);
    cursor: pointer;
}

.tidly-enquiry-toggle-control input::before {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--color-surface);
    box-shadow: var(--shadow-sm);
    content: "";
    transition: transform var(--duration-fast) var(--ease-standard);
}

.tidly-enquiry-toggle-control input:checked {
    border-color: var(--color-ai-accent);
    background: var(--color-ai-accent);
}

.tidly-enquiry-toggle-control input:checked::before {
    transform: translateX(20px);
}

.tidly-enquiry-toggle-control input:focus-visible {
    outline: 3px solid var(--color-focus-ring);
    outline-offset: 2px;
}

.tidly-follow-up-delay {
    border-top: 1px solid var(--color-border) !important;
    background: var(--color-surface-subtle) !important;
}

@media (max-width: 35.98rem) {
    .tidly-enquiry-settings {
        padding: var(--space-4);
    }

    .tidly-enquiry-setting-row {
        grid-template-columns: 1fr;
    }

    .tidly-enquiry-setting-row select {
        width: 100%;
    }

    .tidly-enquiry-toggle-row {
        grid-template-columns: minmax(0, 1fr) auto;
    }

    .tidly-enquiry-toggle-control > span:first-child {
        display: none;
    }
}

.tidly-profile-password-details summary {
    display: flex;
    min-height: 48px;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-md);
    color: var(--color-ink);
    background: var(--color-surface);
    font-size: var(--text-sm);
    font-weight: 700;
    cursor: pointer;
    list-style: none;
}

.tidly-profile-password-details summary::-webkit-details-marker {
    display: none;
}

.tidly-profile-password-details summary:hover {
    border-color: var(--color-brand-200);
    background: var(--color-brand-50);
}

.tidly-profile-password-details summary:focus-visible {
    outline: 3px solid var(--color-brand-200);
    outline-offset: 2px;
    border-color: var(--color-brand-600);
}

.tidly-profile-password-details summary i {
    color: var(--color-text-secondary);
    transition: transform var(--duration-fast) var(--ease-standard);
}

.tidly-profile-password-details[open] summary i {
    transform: rotate(180deg);
}

.tidly-profile-password-details .tidly-profile-form {
    padding-top: var(--space-2);
}

.is-product-view .tidly-onboarding-page {
    min-height: calc(100vh - var(--product-toolbar-height));
    scroll-margin-top: var(--product-toolbar-height);
}

.page-section {
    min-height: calc(100vh - 72px);
    padding-block: clamp(4rem, 8vw, 6.5rem);
    background: var(--color-bg-marketing);
}

.page-section .col-lg-7,
.page-section .col-lg-8 {
    position: relative;
}

.page-section h1 {
    max-width: 16ch;
    color: var(--color-ink);
    font-size: var(--text-3xl);
    font-weight: 700 !important;
    letter-spacing: -0.04em;
    line-height: var(--leading-heading);
}

.page-section .lead {
    max-width: 42rem;
    color: var(--color-text-secondary) !important;
    font-size: var(--text-lg);
    line-height: 1.7;
}

.eyebrow,
.tidly-kicker {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    color: var(--color-brand-700);
    font-size: var(--text-sm);
    font-weight: 700;
    letter-spacing: 0.01em;
}

.template-card,
.feature-panel {
    padding: clamp(1.25rem, 3vw, 2rem);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-surface);
    box-shadow: var(--shadow-sm);
}

.template-card h2,
.feature-panel h2 {
    color: var(--color-ink);
}

.metric-box {
    display: flex;
    min-height: 112px;
    flex-direction: column;
    justify-content: center;
    gap: var(--space-1);
    padding: var(--space-4);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface-subtle);
}

.metric-value {
    color: var(--color-ink);
    font-size: var(--text-xl);
    font-weight: 700;
}

.metric-label {
    color: var(--color-text-secondary);
    font-size: var(--text-sm);
}

.check-list {
    display: grid;
    gap: var(--space-3);
}

.check-list > div {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    padding: var(--space-4);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface);
}

.check-list i {
    margin-top: 0.22rem;
}

.hover-shadow {
    transition: box-shadow var(--duration-normal) var(--ease-standard);
}

.hover-shadow:hover,
.hover-shadow:focus-within {
    box-shadow: var(--shadow-md) !important;
}

#contact textarea {
    min-height: 9rem;
    resize: vertical;
}

/* ========================================================================== */
/* View transitions and app utilities                                         */
/* ========================================================================== */

.view {
    display: none;
    opacity: 0;
    transform: translateY(8px);
    transition: opacity var(--duration-slow) var(--ease-enter), transform var(--duration-slow) var(--ease-enter);
}

.view.active {
    display: block;
    opacity: 1;
    transform: translateY(0);
}

.app-shell.is-product-view .view {
    transform: none;
    transition-property: opacity;
}

#landing {
    display: block;
}

.login-password-collapse {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-height var(--duration-slow) var(--ease-standard), opacity var(--duration-normal) var(--ease-standard);
}

.login-password-collapse.open {
    max-height: 220px;
    overflow: visible;
    opacity: 1;
}

#dev-access-gate {
    z-index: var(--layer-modal);
    background: rgb(248 250 252 / 96%);
    backdrop-filter: blur(10px);
}

.dev-access-card {
    width: min(100%, 26.25rem);
}

#app-loader {
    position: fixed;
    inset: 0;
    z-index: var(--layer-overlay);
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-bg-app);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--duration-slow) var(--ease-enter);
}

#app-loader.show-loader {
    opacity: 1;
    pointer-events: auto;
}

#app-loader .spinner-border {
    width: 2rem;
    height: 2rem;
    border-width: 3px;
}

/* ========================================================================== */
/* Landing page                                                               */
/* ========================================================================== */

.tidly-landing {
    --tidly-ink: var(--color-ink);
    --tidly-muted: var(--color-text-secondary);
    --tidly-line: var(--color-border);
    --tidly-blue: var(--color-brand-600);
    --tidly-blue-dark: var(--color-brand-700);
    --tidly-soft: var(--color-surface-subtle);
    overflow: hidden;
    color: var(--color-text);
    background: var(--color-bg-marketing);
}

.tidly-landing :where(h1, h2, h3, p) {
    margin-top: 0;
}

.tidly-landing a {
    color: inherit;
    text-decoration: none;
}

.tidly-hero {
    position: relative;
    isolation: isolate;
    min-height: min(800px, calc(100vh - 72px));
    display: flex;
    align-items: center;
    padding-block: clamp(4.5rem, 9vw, 7.5rem);
    background: linear-gradient(180deg, var(--color-surface) 0%, var(--color-bg-marketing) 100%);
}

.tidly-hero::before {
    content: none;
}

.tidly-hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(31rem, 1.1fr);
    align-items: center;
    gap: clamp(2.5rem, 6vw, 5.5rem);
}

.tidly-hero-copy {
    position: relative;
    z-index: 1;
}

.tidly-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    margin-bottom: var(--space-6);
    color: var(--color-brand-700);
    font-size: var(--text-sm);
    font-weight: 700;
}

.tidly-eyebrow span {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background: var(--color-success);
    box-shadow: 0 0 0 4px rgb(11 122 83 / 12%);
}

.tidly-hero h1 {
    max-width: 11ch;
    margin-bottom: var(--space-6);
    color: var(--color-ink);
    font-size: var(--text-display);
    font-weight: 700;
    letter-spacing: -0.065em;
    line-height: 0.99;
}

.tidly-hero h1 em {
    color: var(--color-brand-600);
    font-style: normal;
}

.tidly-hero-lead {
    max-width: 34rem;
    margin-bottom: var(--space-8);
    color: var(--color-text-secondary);
    font-size: var(--text-lg);
    line-height: 1.7;
}

.tidly-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
}

.tidly-button {
    display: inline-flex;
    min-height: 50px;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: 0.85rem 1.15rem;
    border: 1px solid transparent;
    border-radius: var(--radius-md);
    font-family: inherit;
    font-size: var(--text-sm);
    font-weight: 700;
    line-height: 1.2;
    text-decoration: none;
    cursor: pointer;
    transition:
        color var(--duration-fast) var(--ease-standard),
        background-color var(--duration-fast) var(--ease-standard),
        border-color var(--duration-fast) var(--ease-standard),
        box-shadow var(--duration-fast) var(--ease-standard);
}

.tidly-button-primary {
    color: var(--color-on-brand) !important;
    background: var(--color-brand-600);
    box-shadow: none;
}

.tidly-button-primary:hover {
    color: var(--color-on-brand);
    background: var(--color-brand-700);
    box-shadow: var(--shadow-sm);
}

.tidly-button-quiet {
    color: var(--color-ink);
    border-color: var(--color-border-strong);
    background: var(--color-surface);
}

.tidly-button-quiet:hover {
    border-color: var(--color-brand-600);
    background: var(--color-brand-50);
}

.tidly-button-tertiary {
    min-height: 44px;
    padding-inline: var(--space-3);
    color: var(--color-brand-700);
    background: transparent;
}

.tidly-button-tertiary:hover {
    color: var(--color-brand-800);
    background: var(--color-brand-50);
}

.tidly-button i {
    font-size: 0.78em;
}

.tidly-hero-proof {
    margin-top: var(--space-8);
}

.tidly-proof-list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3) var(--space-4);
    margin: 0;
    padding: 0;
    color: var(--color-text-secondary);
    font-size: var(--text-sm);
    list-style: none;
}

.tidly-proof-list li {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
}

.tidly-proof-list i {
    color: var(--color-success);
}

.tidly-integration-preview {
    position: relative;
    width: 100%;
    max-width: 41rem;
    justify-self: end;
    overflow: hidden;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    background: var(--color-surface);
    box-shadow: var(--shadow-md);
}

.tidly-integration-preview::after {
    position: absolute;
    inset: 0;
    border: 1px solid rgb(255 255 255 / 72%);
    border-radius: inherit;
    content: "";
    pointer-events: none;
}

.tidly-preview-topbar {
    display: flex;
    min-height: 60px;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding-inline: var(--space-6);
    border-bottom: 1px solid var(--color-border);
}

.tidly-preview-brand {
    color: var(--color-text);
    font-size: var(--text-sm);
    font-weight: 700;
}

.tidly-preview-mark {
    display: inline-grid;
    width: 26px;
    height: 26px;
    margin-right: var(--space-2);
    place-items: center;
    border-radius: var(--radius-sm);
    color: var(--color-on-brand);
    background: var(--color-brand-600);
    font-weight: 700;
}

.tidly-preview-portal {
    display: grid;
    gap: var(--space-3);
    padding: var(--space-6);
    background: var(--color-surface-subtle);
}

.tidly-preview-intro {
    padding-bottom: var(--space-2);
}

.tidly-preview-intro > span {
    display: block;
    margin-bottom: var(--space-2);
    color: var(--color-brand-700);
    font-size: var(--text-xs);
    font-weight: 700;
    letter-spacing: 0.01em;
}

.tidly-preview-intro strong {
    display: block;
    color: var(--color-ink);
    font-size: var(--text-lg);
}

.tidly-preview-intro p {
    max-width: 32rem;
    margin: var(--space-1) 0 0;
    color: var(--color-text-secondary);
    font-size: var(--text-xs);
}

.tidly-preview-channel {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface);
}

.tidly-preview-channel.connected {
    border-color: var(--color-brand-200);
}

.tidly-preview-channel-icon {
    display: grid;
    width: 42px;
    height: 42px;
    place-items: center;
    border-radius: var(--radius-md);
    color: var(--color-brand-700);
    background: var(--color-brand-50);
}

.tidly-preview-channel strong,
.tidly-preview-channel small {
    display: block;
}

.tidly-preview-channel strong {
    color: var(--color-ink);
    font-size: var(--text-sm);
}

.tidly-preview-channel small {
    overflow: hidden;
    color: var(--color-text-muted);
    font-size: var(--text-xs);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tidly-preview-badge {
    padding: 0.35rem 0.55rem;
    border-radius: var(--radius-pill);
    color: var(--color-success);
    background: var(--color-success-bg);
    font-size: var(--text-xs);
    font-weight: 700;
    white-space: nowrap;
}

.tidly-preview-badge.upcoming {
    color: var(--color-text-secondary);
    background: var(--color-surface-subtle);
}

.tidly-preview-flow {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    gap: var(--space-3);
    margin-top: var(--space-2);
    padding: var(--space-4);
    border-radius: var(--radius-md);
    color: var(--color-text-secondary);
    background: var(--color-brand-50);
}

.tidly-preview-flow > div {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
}

.tidly-preview-flow > div > i {
    margin-top: 0.15rem;
    color: var(--color-brand-700);
}

.tidly-preview-flow strong,
.tidly-preview-flow small {
    display: block;
}

.tidly-preview-flow strong {
    color: var(--color-ink);
    font-size: var(--text-xs);
}

.tidly-preview-flow small {
    margin-top: 0.15rem;
    font-size: var(--text-xs);
    line-height: 1.35;
}
.tidly-trust-strip {
    position: relative;
    z-index: 2;
    margin-top: -1px;
    border-block: 1px solid var(--color-border);
    background: var(--color-surface);
}

.tidly-trust-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
}

.tidly-trust-item {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-6);
}

.tidly-trust-item + .tidly-trust-item {
    border-left: 1px solid var(--color-border);
}

.tidly-trust-item i {
    display: grid;
    width: 42px;
    height: 42px;
    flex: 0 0 auto;
    place-items: center;
    border-radius: var(--radius-md);
    color: var(--color-brand-700);
    background: var(--color-brand-50);
}

.tidly-trust-item strong,
.tidly-trust-item span {
    display: block;
}

.tidly-trust-item strong {
    font-size: var(--text-sm);
}

.tidly-trust-item span {
    margin-top: var(--space-1);
    color: var(--color-text-secondary);
    font-size: var(--text-xs);
}

.tidly-section {
    padding-block: var(--section-space);
}

.tidly-section-intro {
    max-width: 44rem;
}

.tidly-section-intro h2,
.tidly-channels-copy h2,
.tidly-control-card h2 {
    margin: var(--space-3) 0 var(--space-4);
    color: var(--color-ink);
    font-size: var(--text-3xl);
    font-weight: 700;
    letter-spacing: -0.05em;
    line-height: var(--leading-tight);
}

.tidly-section-intro p,
.tidly-channels-copy p {
    max-width: 36rem;
    color: var(--color-text-secondary);
    font-size: var(--text-base);
    line-height: 1.75;
}

.tidly-how-section {
    background: var(--color-surface);
}

.tidly-steps {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-6);
    margin-top: var(--space-12);
}

.tidly-steps article {
    position: relative;
    min-height: 278px;
    padding: var(--space-6);
    overflow: hidden;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-surface);
    box-shadow: var(--shadow-sm);
    transition: border-color var(--duration-normal) var(--ease-standard), box-shadow var(--duration-normal) var(--ease-standard);
}

.tidly-steps article:hover {
    border-color: var(--color-brand-200);
    box-shadow: var(--shadow-sm);
}

.tidly-step-number {
    position: absolute;
    top: var(--space-6);
    right: var(--space-6);
    color: var(--color-text-muted);
    font-size: var(--text-xs);
    font-weight: 700;
}

.tidly-step-icon {
    display: grid;
    width: 48px;
    height: 48px;
    margin-bottom: var(--space-12);
    place-items: center;
    border-radius: var(--radius-md);
    color: var(--color-brand-700);
    background: var(--color-brand-50);
    font-size: var(--text-lg);
}

.tidly-steps h3 {
    margin-bottom: var(--space-2);
    font-size: var(--text-lg);
    font-weight: 700;
}

.tidly-steps p {
    margin: 0;
    color: var(--color-text-secondary);
    font-size: var(--text-sm);
    line-height: 1.7;
}

.tidly-use-cases-section {
    background: var(--color-bg-app);
}

.tidly-use-cases-grid {
    display: grid;
    gap: var(--space-4);
    margin-top: var(--space-8);
}

.tidly-use-cases-grid article {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: start;
    gap: var(--space-4);
    padding: var(--space-6);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-surface);
}

.tidly-use-case-icon {
    display: inline-flex;
    width: 48px;
    height: 48px;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-md);
    color: var(--color-brand-700);
    background: var(--color-brand-50);
}

.tidly-use-cases-grid h3 {
    margin: var(--space-2) 0;
    color: var(--color-ink);
    font-size: var(--text-lg);
    font-weight: 500;
}

.tidly-use-cases-grid p {
    margin: 0;
    color: var(--color-text-secondary);
    font-size: var(--text-sm);
    line-height: var(--leading-body);
}

.tidly-use-cases-note {
    display: flex;
    max-width: 50rem;
    align-items: flex-start;
    gap: var(--space-2);
    margin: var(--space-4) 0 0;
    color: var(--color-text-secondary);
    font-size: var(--text-sm);
}

.tidly-use-cases-note i {
    margin-top: var(--space-1);
    color: var(--color-brand-700);
}

@media (min-width: 48rem) {
    .tidly-use-cases-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.tidly-channels-section {
    border-block: 1px solid var(--color-border);
    background: var(--color-bg-app);
}

.tidly-channels-grid {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(28rem, 1.1fr);
    align-items: center;
    gap: clamp(3rem, 8vw, 7rem);
}

.tidly-text-link {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    margin-top: var(--space-2);
    color: var(--color-brand-700) !important;
    font-size: var(--text-sm);
    font-weight: 700;
}

.tidly-text-link:hover {
    text-decoration: underline;
}

.tidly-channel-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-4);
}

.tidly-channel-card {
    display: flex;
    min-height: 160px;
    flex-direction: column;
    justify-content: space-between;
    padding: var(--space-6);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-surface);
    box-shadow: var(--shadow-sm);
}

.tidly-channel-card > i {
    color: var(--color-text-secondary);
    font-size: var(--text-2xl);
}

.tidly-channel-card span {
    margin-top: var(--space-8);
    color: var(--color-ink);
    font-size: var(--text-base);
    font-weight: 700;
}

.tidly-channel-card small {
    margin-top: var(--space-1);
    color: var(--color-text-muted);
    font-size: var(--text-xs);
}

.tidly-channel-card.featured {
    border-color: var(--color-brand-200);
    background: var(--color-brand-50);
}

.tidly-channel-card.featured > i {
    color: var(--color-brand-700);
}

.tidly-channel-card.featured small {
    color: var(--color-success);
    font-weight: 700;
}

.tidly-control-section {
    padding-block: var(--section-space);
    background: var(--color-surface);
}

.tidly-control-card {
    position: relative;
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    align-items: center;
    gap: clamp(2rem, 6vw, 5rem);
    padding: clamp(2rem, 5vw, 4.5rem);
    overflow: hidden;
    border-radius: var(--radius-xl);
    background: var(--color-ink);
    box-shadow: var(--shadow-lg);
}

.tidly-control-card::after {
    position: absolute;
    right: -8rem;
    bottom: -12rem;
    width: 28rem;
    height: 28rem;
    border: 1px solid rgb(189 208 255 / 14%);
    border-radius: 50%;
    box-shadow: 0 0 0 4rem rgb(189 208 255 / 4%);
    content: "";
}

.tidly-control-card > * {
    position: relative;
    z-index: 1;
}

.tidly-control-card .tidly-kicker {
    color: var(--color-brand-200);
}

.tidly-control-card h2 {
    margin-bottom: 0;
    color: var(--color-on-brand);
}

.tidly-control-points {
    display: grid;
    gap: var(--space-3);
}

.tidly-control-points p {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    margin: 0;
    padding: var(--space-4);
    border: 1px solid rgb(255 255 255 / 10%);
    border-radius: var(--radius-md);
    color: var(--color-text-on-dark-strong);
    background: rgb(255 255 255 / 5%);
    font-size: var(--text-sm);
}

.tidly-control-points i {
    margin-top: 0.2rem;
    color: var(--color-success-on-dark);
}

.tidly-closing {
    padding-block: clamp(4.5rem, 9vw, 7rem);
    color: var(--color-on-brand);
    text-align: center;
    background:
        radial-gradient(circle at 20% 10%, rgb(189 208 255 / 24%), transparent 20rem),
        var(--color-brand-700);
}

.tidly-closing p {
    max-width: 20ch;
    margin: 0 auto var(--space-6);
    color: var(--color-on-brand);
    font-size: var(--text-3xl);
    font-weight: 700;
    letter-spacing: -0.045em;
    line-height: var(--leading-heading);
}

.tidly-button-light {
    color: var(--color-brand-800) !important;
    background: var(--color-surface);
    box-shadow: 0 10px 26px rgb(15 27 45 / 20%);
}

.tidly-button-light:hover {
    background: var(--color-brand-50);
}

/* ========================================================================== */
/* First-login welcome                                                        */
/* ========================================================================== */

.tidly-welcome-page {
    min-height: calc(100vh - 72px);
    padding-block: clamp(var(--space-8), 7vw, var(--space-16));
    color: var(--color-text);
    background: var(--color-bg-app);
}

.tidly-welcome-container {
    max-width: var(--content-max);
}

.tidly-welcome-surface {
    display: grid;
    overflow: hidden;
    align-items: center;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    background: var(--color-surface);
    box-shadow: var(--shadow-sm);
}

.tidly-welcome-copy {
    min-width: 0;
    padding: clamp(var(--space-8), 6vw, var(--space-16));
}

.tidly-welcome-copy .eyebrow::before {
    width: var(--space-2);
    height: var(--space-2);
    border-radius: var(--radius-pill);
    background: var(--color-brand-600);
    content: "";
}

.tidly-welcome-copy h1 {
    max-width: 14ch;
    margin: var(--space-3) 0 var(--space-4);
    color: var(--color-ink);
    font-size: var(--text-3xl);
    font-weight: 700;
    letter-spacing: -0.045em;
    line-height: var(--leading-tight);
}

.tidly-welcome-lead {
    max-width: 59ch;
    margin: 0;
    color: var(--color-text-secondary);
    font-size: var(--text-lg);
}

.tidly-welcome-actions {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-top: var(--space-8);
}

.tidly-welcome-actions .tidly-button-primary {
    min-height: 56px;
    padding-inline: var(--space-6);
    font-size: var(--text-base);
    box-shadow: var(--shadow-sm);
}

.tidly-welcome-reassurance {
    display: flex;
    max-width: 34rem;
    align-items: flex-start;
    gap: var(--space-2);
    margin: var(--space-4) 0 0;
    color: var(--color-text-secondary);
    font-size: var(--text-sm);
}

.tidly-welcome-reassurance i {
    margin-top: var(--space-1);
    color: var(--color-success);
}

.tidly-welcome-path {
    position: relative;
    display: grid;
    align-self: stretch;
    align-content: center;
    gap: var(--space-1);
    padding: clamp(var(--space-6), 5vw, var(--space-12));
    border-top: 1px solid var(--color-border);
    background: var(--color-surface-subtle);
}

.tidly-welcome-path::before {
    position: absolute;
    z-index: var(--layer-base);
    top: calc(clamp(var(--space-6), 5vw, var(--space-12)) + var(--space-6));
    bottom: calc(clamp(var(--space-6), 5vw, var(--space-12)) + var(--space-6));
    left: calc(clamp(var(--space-6), 5vw, var(--space-12)) + var(--space-6));
    border-left: 1px solid var(--color-border-strong);
    content: "";
}

.tidly-welcome-path::after {
    position: absolute;
    z-index: 2;
    bottom: calc(clamp(var(--space-6), 5vw, var(--space-12)) + var(--space-6) - var(--space-1));
    left: calc(clamp(var(--space-6), 5vw, var(--space-12)) + var(--space-6) - var(--space-1));
    width: var(--space-2);
    height: var(--space-2);
    border-radius: var(--radius-pill);
    background: var(--color-brand-600);
    content: "";
}

.tidly-welcome-path article {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: var(--space-12) minmax(0, 1fr);
    align-items: flex-start;
    gap: var(--space-4);
    padding-block: var(--space-4);
}

.tidly-welcome-step-marker {
    display: grid;
    width: var(--space-12);
    height: var(--space-12);
    place-items: center;
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-md);
    color: var(--color-ink);
    background: var(--color-surface);
    font-size: var(--text-sm);
    font-weight: 700;
}

.tidly-welcome-path h2 {
    margin: 0 0 var(--space-1);
    color: var(--color-ink);
    font-size: var(--text-lg);
    font-weight: 500;
}

.tidly-welcome-path p {
    max-width: 43ch;
    margin: 0;
    color: var(--color-text-secondary);
    font-size: var(--text-sm);
}

/* ========================================================================== */
/* Shared authenticated setup controls                                        */
/* ========================================================================== */

.tidly-onboarding-page {
    min-height: calc(100vh - 72px);
    padding-block: var(--space-12) var(--space-16);
    color: var(--color-text);
    background: var(--color-bg-app);
}

.tidly-onboarding-container {
    max-width: 54rem;
}

.tidly-onboarding-header {
    max-width: 42rem;
    margin-bottom: var(--space-6);
}

.tidly-onboarding-header h1 {
    margin: 0 0 var(--space-2);
    color: var(--color-ink);
    font-size: var(--text-3xl);
    font-weight: 700;
    letter-spacing: -0.04em;
    line-height: var(--leading-heading);
}

.tidly-onboarding-header p,
.tidly-setup-section-heading p,
.tidly-background-note p,
.tidly-email-empty p {
    margin: 0;
    color: var(--color-text-secondary);
}

.tidly-onboarding-header > div > p {
    max-width: 50ch;
    font-size: var(--text-base);
}

.tidly-onboarding-complete {
    display: flex;
    align-items: flex-start;
    gap: var(--space-4);
    margin-bottom: var(--space-4);
    padding: var(--space-4);
    border: 1px solid var(--color-success);
    border-radius: var(--radius-lg);
    background: var(--color-success-bg);
}

.tidly-onboarding-complete[hidden] {
    display: none;
}

.tidly-onboarding-complete > span {
    color: var(--color-success);
    font-size: var(--text-xl);
}

.tidly-onboarding-complete strong {
    display: block;
    color: var(--color-ink);
}

.tidly-onboarding-complete p {
    margin: var(--space-1) 0 0;
    color: var(--color-text-secondary);
    font-size: var(--text-sm);
}

.tidly-background-note {
    display: flex;
    align-items: flex-start;
    gap: var(--space-4);
    margin-bottom: var(--space-6);
    padding: var(--space-4);
    border: 1px solid var(--color-brand-200);
    border-radius: var(--radius-lg);
    background: var(--color-brand-50);
}

.tidly-background-note-icon {
    display: grid;
    width: 44px;
    height: 44px;
    flex: 0 0 auto;
    place-items: center;
    border-radius: var(--radius-md);
    color: var(--color-brand-700);
    background: var(--color-surface);
}

.tidly-background-note strong {
    display: block;
    margin-bottom: var(--space-1);
    color: var(--color-ink);
}

.tidly-background-note p {
    font-size: var(--text-sm);
}

.tidly-setup-section {
    margin-top: var(--space-4);
    padding: var(--space-8);
    border: 1px solid var(--color-border);
    border-top: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-surface);
    box-shadow: none;
}

.tidly-setup-section-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-6);
    margin-bottom: var(--space-8);
}

.tidly-setup-section-heading h2 {
    margin: 0;
    color: var(--color-ink);
    font-size: var(--text-lg);
    font-weight: 700;
}

.tidly-setup-section-heading p {
    max-width: 39rem;
    font-size: var(--text-sm);
}

.tidly-stage-heading-actions {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    gap: var(--space-2);
}

.tidly-setup-section.is-collapsed {
    padding-block: var(--space-4);
    border-top-color: var(--color-border);
    background: var(--color-surface-subtle);
}

.tidly-setup-section.is-collapsed .tidly-setup-section-heading {
    align-items: center;
    margin-bottom: 0;
}

#email-integration-section.is-collapsed .tidly-email-empty,
#email-integration-section.is-collapsed .tidly-mailbox-list,
#email-integration-section.is-collapsed .tidly-stage-heading-actions .dropdown,
#automation-activation-section.is-collapsed .tidly-automation-settings,
#automation-activation-section.is-collapsed .tidly-activation-actions {
    display: none;
}

.tidly-business-form,
.tidly-form-grid {
    display: grid;
    gap: var(--space-8);
}

.tidly-advanced-toggle:focus-visible {
    outline: 3px solid var(--color-brand-200);
    outline-offset: 2px;
}

.tidly-form-step-panel {
    display: grid;
    gap: var(--space-8);
    padding-top: 0;
}

.tidly-form-step-panel[hidden],
.tidly-advanced-settings[hidden] {
    display: none;
}

.tidly-form-step-heading h3 {
    margin: 0;
    color: var(--color-ink);
    font-size: var(--text-xl);
    font-weight: 700;
    letter-spacing: -0.02em;
}

.tidly-form-step-heading p {
    max-width: 42rem;
    margin: 0;
    color: var(--color-text-secondary);
    font-size: var(--text-sm);
}

.tidly-step-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding-top: var(--space-2);
}

.tidly-step-actions-end {
    justify-content: flex-end;
}

.tidly-advanced-toggle {
    display: flex;
    width: 100%;
    min-height: 48px;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    color: var(--color-ink);
    background: var(--color-surface);
    font: inherit;
    font-size: var(--text-sm);
    font-weight: 700;
    text-align: left;
}

.tidly-advanced-toggle:hover {
    border-color: var(--color-brand-200);
    background: var(--color-brand-50);
}

.tidly-advanced-toggle span {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
}

.tidly-advanced-toggle > i {
    color: var(--color-text-secondary);
    transition: transform var(--duration-fast) var(--ease-standard);
}

.tidly-advanced-toggle[aria-expanded="true"] > i {
    transform: rotate(180deg);
}

.tidly-advanced-settings {
    padding: var(--space-4);
    border-top: 1px solid var(--color-border);
    background: var(--color-surface-subtle);
}

.tidly-field {
    display: grid;
    align-content: start;
    gap: var(--space-2);
}

.tidly-field label {
    color: var(--color-ink);
    font-size: var(--text-sm);
    font-weight: 500;
}

.tidly-field input,
.tidly-field select,
.tidly-field textarea {
    width: 100%;
    min-height: 48px;
    padding: var(--space-3);
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-md);
    color: var(--color-text);
    background: var(--color-surface-subtle);
    font: inherit;
}

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

.tidly-field input:focus-visible,
.tidly-field select:focus-visible,
.tidly-field textarea:focus-visible,
.tidly-automation-toggle:has(input:focus-visible) {
    outline: 3px solid var(--color-brand-200);
    outline-offset: 2px;
    border-color: var(--color-brand-600);
}

.tidly-field input:focus-visible,
.tidly-field select:focus-visible,
.tidly-field textarea:focus-visible {
    background: var(--color-surface);
}

.tidly-field small,
.tidly-automation-toggle small,
.tidly-form-actions p {
    margin: 0;
    color: var(--color-text-secondary);
    font-size: var(--text-sm);
}

.tidly-label-optional {
    color: var(--color-text-secondary);
    font-weight: 400;
}

.tidly-profile-details {
    overflow: clip;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface);
}

.tidly-profile-details summary {
    min-height: 48px;
    padding: var(--space-3) var(--space-4);
    color: var(--color-ink);
    font-size: var(--text-sm);
    font-weight: 700;
    cursor: pointer;
}

.tidly-profile-details summary:focus-visible {
    outline: 3px solid var(--color-brand-200);
    outline-offset: -3px;
}

.tidly-profile-details[open] summary {
    border-bottom: 1px solid var(--color-border);
    background: var(--color-brand-50);
}

.tidly-profile-details > .tidly-field {
    padding: var(--space-4);
}

.tidly-business-facts-sources {
    display: grid;
    gap: var(--space-2);
    margin-top: var(--space-2);
    padding-top: var(--space-3);
    border-top: 1px solid var(--color-border);
    color: var(--color-text-secondary);
    font-size: var(--text-sm);
}

.tidly-business-facts-sources[hidden] {
    display: none;
}

.tidly-business-facts-sources strong {
    color: var(--color-ink);
}

.tidly-business-facts-sources ul {
    margin: 0;
    padding-left: var(--space-6);
}

.tidly-business-facts-sources a {
    overflow-wrap: anywhere;
}

.tidly-field-error {
    margin: 0;
    padding: var(--space-3);
    border-left: 3px solid var(--color-danger);
    border-radius: var(--radius-sm);
    color: var(--color-danger);
    background: var(--color-danger-bg);
    font-size: var(--text-sm);
    font-weight: 500;
}

.tidly-field-error[hidden] {
    display: none;
}

.tidly-button:disabled {
    cursor: not-allowed;
    opacity: 0.55;
}

.tidly-automation-settings {
    display: grid;
    gap: var(--space-4);
    margin-top: var(--space-2);
    padding: var(--space-4);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface);
    transition:
        border-color var(--duration-fast) var(--ease-standard),
        background-color var(--duration-fast) var(--ease-standard);
}

.tidly-automation-settings:has(#business-automation-enabled:checked) {
    border-color: var(--color-brand-200);
    background: var(--color-brand-50);
}

.tidly-delay-field {
    max-width: 18rem;
}

.tidly-input-suffix {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.tidly-input-suffix input {
    max-width: 7rem;
}

.tidly-input-suffix span {
    color: var(--color-text-secondary);
    font-size: var(--text-sm);
}

.tidly-automation-toggle {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    padding: var(--space-3);
    border: 1px solid transparent;
    border-radius: var(--radius-md);
    cursor: pointer;
}

.tidly-automation-toggle input {
    width: 2.75rem;
    height: 1.5rem;
    flex: 0 0 auto;
    margin-top: var(--space-1);
    accent-color: var(--color-brand-600);
}

.tidly-automation-toggle strong,
.tidly-automation-toggle small {
    display: block;
}

.tidly-automation-toggle strong {
    margin-bottom: var(--space-1);
    color: var(--color-ink);
    font-size: var(--text-sm);
}

.tidly-activation-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    margin-top: var(--space-4);
}

.tidly-activation-actions p {
    max-width: 38rem;
    margin: 0;
    color: var(--color-text-secondary);
    font-size: var(--text-sm);
}

.tidly-form-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    padding-top: var(--space-2);
}

.tidly-form-actions p {
    max-width: 34rem;
}

.tidly-form-actions > div {
    display: grid;
    flex: 1;
    justify-items: end;
    gap: var(--space-3);
}

@media (min-width: 48rem) {
    .tidly-overview-status-header .btn {
        align-self: flex-start;
        width: auto;
    }

    .tidly-overview-followup article {
        display: grid;
        grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
        align-items: start;
        gap: var(--space-8);
    }

    .tidly-overview-followup header {
        margin-bottom: 0;
    }

    .tidly-profile-section {
        grid-template-columns:
            minmax(calc(var(--space-32) + var(--space-16) + var(--space-4)), 0.55fr)
            minmax(0, 1.45fr);
        gap: var(--space-6);
        padding: var(--space-6);
    }

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

    .tidly-profile-identity > div:first-child {
        padding-right: var(--space-6);
    }

    .tidly-profile-identity > div + div {
        padding-left: var(--space-6);
        border-top: 0;
        border-left: 1px solid var(--color-border);
    }

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

    #profilePasswordForm .tidly-profile-actions {
        grid-column: 1 / -1;
    }

    .tidly-profile-input-action {
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: end;
    }

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

    .tidly-field-wide {
        grid-column: 1 / -1;
    }

}

@media (min-width: 64rem) {
    .tidly-overview-status-surface {
        display: grid;
        grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr);
    }

    .tidly-overview-status-header {
        justify-content: center;
        padding: var(--space-8);
    }

    .tidly-overview-facts {
        display: flex;
        justify-content: center;
        flex-direction: column;
        padding: var(--space-4) var(--space-6);
        border-top: 0;
        border-left: 1px solid var(--color-border);
    }

    .tidly-welcome-surface {
        grid-template-columns: minmax(0, 1.08fr) minmax(22rem, 0.92fr);
    }

    .tidly-welcome-path {
        border-top: 0;
        border-left: 1px solid var(--color-border);
    }
}

.tidly-email-empty {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-4);
    border: 1px dashed var(--color-border-strong);
    border-radius: var(--radius-md);
    background: var(--color-surface-subtle);
}

.tidly-email-empty > span {
    display: grid;
    width: 44px;
    height: 44px;
    flex: 0 0 auto;
    place-items: center;
    border-radius: var(--radius-md);
    color: var(--color-brand-700);
    background: var(--color-brand-50);
}

.tidly-email-empty strong {
    display: block;
    color: var(--color-ink);
    font-size: var(--text-sm);
}

.tidly-email-empty p {
    margin-top: var(--space-1);
    font-size: var(--text-sm);
}

.tidly-mailbox-list {
    display: grid;
    gap: var(--space-3);
}

.tidly-mailbox-card {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-4);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface-subtle);
}

.tidly-mailbox-provider-icon {
    display: grid;
    width: 44px;
    height: 44px;
    flex: 0 0 auto;
    place-items: center;
    border-radius: var(--radius-md);
    color: var(--color-brand-700);
    background: var(--color-brand-50);
}

.tidly-mailbox-copy {
    min-width: 0;
    flex: 1;
}

.tidly-mailbox-copy strong,
.tidly-mailbox-copy span {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tidly-mailbox-copy strong {
    color: var(--color-ink);
    font-size: var(--text-sm);
}

.tidly-mailbox-copy > span:not(.tidly-connection-status) {
    color: var(--color-text-secondary);
    font-size: var(--text-xs);
}

.tidly-connection-status {
    display: inline-flex !important;
    align-items: center;
    gap: var(--space-2);
    margin-top: var(--space-1);
    color: var(--color-success);
    font-size: var(--text-xs);
    font-weight: 700;
}

.tidly-connection-status::before {
    width: 7px;
    height: 7px;
    flex: 0 0 auto;
    border-radius: 50%;
    background: currentColor;
    content: "";
}

.tidly-connection-status.reauth_required,
.tidly-connection-status.error {
    color: var(--color-warning);
}

.tidly-connection-status.disconnected {
    color: var(--color-text-secondary);
}

.tidly-mailbox-actions {
    display: flex;
    flex: 0 0 auto;
    gap: var(--space-1);
}

.tidly-mailbox-actions button {
    min-height: 44px;
    padding-inline: var(--space-3);
    border: 0;
    border-radius: var(--radius-sm);
    color: var(--color-text-secondary);
    background: transparent;
    font-size: var(--text-xs);
    font-weight: 500;
}

.tidly-mailbox-actions button:hover {
    color: var(--color-brand-700);
    background: var(--color-brand-50);
}

.tidly-mailbox-actions .disconnect:hover {
    color: var(--color-danger);
    background: var(--color-danger-bg);
}

.tidly-inline-loading {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-3);
    color: var(--color-text-secondary);
    font-size: var(--text-sm);
}

.tidly-upcoming-integrations {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-3);
}

.tidly-upcoming-integrations article {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-4);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface-subtle);
}

.tidly-upcoming-integrations article > span {
    display: grid;
    width: 44px;
    height: 44px;
    place-items: center;
    border-radius: var(--radius-md);
    color: var(--color-text-secondary);
    background: var(--color-surface);
}

.tidly-upcoming-integrations strong,
.tidly-upcoming-integrations small {
    display: block;
}

.tidly-upcoming-integrations strong {
    color: var(--color-ink);
    font-size: var(--text-sm);
}

.tidly-upcoming-integrations small {
    color: var(--color-text-muted);
    font-size: var(--text-xs);
}

.tidly-upcoming-integrations em {
    color: var(--color-text-secondary);
    font-size: var(--text-xs);
    font-style: normal;
    font-weight: 700;
    white-space: nowrap;
}
/* ========================================================================== */
/* Notifications, consent, and footer                                         */
/* ========================================================================== */

#cookie-consent-banner {
    z-index: 1050;
    padding-bottom: max(var(--space-4), env(safe-area-inset-bottom));
    animation: surface-enter var(--duration-slow) var(--ease-enter);
}

.cookie-consent-card {
    display: flex;
    max-width: 58rem;
    margin-inline: auto;
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-4);
    padding: var(--space-6);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-surface);
    box-shadow: var(--shadow-lg);
}

.cookie-consent-card__icon {
    display: flex;
    width: 48px;
    height: 48px;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-md);
    color: var(--color-brand-700);
    background: var(--color-brand-50);
    font-size: var(--text-xl);
}

.toast-capsule {
    position: fixed;
    z-index: var(--layer-toast);
    top: calc(72px + var(--space-8));
    left: 50%;
    min-width: 23rem;
    max-width: min(90vw, 38rem);
    transform: translateX(-50%);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: rgb(255 255 255 / 98%);
    box-shadow: var(--shadow-lg);
    cursor: pointer;
    animation: toast-enter var(--duration-slow) var(--ease-enter);
}

.toast-capsule[hidden] {
    display: none;
}

.toast-capsule--success {
    border-left: 5px solid var(--color-success);
}

.toast-capsule--error {
    border-left: 5px solid var(--color-danger);
}

.toast-capsule > .d-flex {
    padding: var(--space-4) var(--space-6);
}

#success-message,
#error-message {
    color: var(--color-ink);
    font-size: var(--text-base);
    font-weight: 500;
    line-height: 1.5;
}

.toast-capsule .btn-close {
    min-width: 44px;
    min-height: 44px;
    margin-left: var(--space-4);
    opacity: 0.62;
}

.toast-capsule .btn-close:hover {
    opacity: 1;
}

.toast-capsule.fade-out {
    opacity: 0;
    transform: translate(-50%, -16px);
    transition: opacity var(--duration-normal) var(--ease-standard), transform var(--duration-normal) var(--ease-standard);
}

.site-footer {
    padding-block: var(--space-8);
    border-top: 1px solid rgb(255 255 255 / 8%);
    color: var(--color-text-on-dark);
    background: var(--color-ink);
}

.site-footer p {
    color: var(--color-text-on-dark);
}

.site-footer a {
    color: var(--color-text-on-dark-strong);
    text-decoration: none;
}

.site-footer a:hover {
    color: var(--color-on-brand);
    text-decoration: underline;
}

@keyframes surface-enter {
    from {
        opacity: 0;
        transform: translateY(16px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes toast-enter {
    from {
        opacity: 0;
        transform: translate(-50%, -16px);
    }
    to {
        opacity: 1;
        transform: translate(-50%, 0);
    }
}

/* ========================================================================== */
/* Responsive behavior                                                        */
/* ========================================================================== */

@media (min-width: 62rem) {
    .cookie-consent-card {
        flex-direction: row;
        align-items: center;
    }
}

@media (max-width: 63.98rem) {
    .tidly-hero-grid,
    .tidly-channels-grid,
    .tidly-control-card {
        grid-template-columns: 1fr;
    }

    .tidly-hero {
        min-height: 0;
    }

    .tidly-hero-copy {
        max-width: 43rem;
    }

    .tidly-integration-preview {
        max-width: 43rem;
        justify-self: start;
    }

    .tidly-control-card {
        gap: var(--space-8);
    }

}

@media (max-width: 61.98rem) {
    .app-shell.is-product-view > main {
        margin-left: 0;
    }

    .tidly-product-sidebar {
        z-index: var(--layer-modal);
        width: min(var(--product-sidebar-width), calc(100vw - 3rem));
        box-shadow: var(--shadow-lg);
        transform: translateX(-105%);
        transition: transform var(--duration-normal) var(--ease-standard);
    }

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

    .tidly-product-nav-backdrop {
        position: fixed;
        z-index: var(--layer-overlay);
        inset: 0;
        width: 100%;
        height: 100%;
        padding: 0;
        border: 0;
        background: var(--color-overlay);
    }

    .tidly-product-toolbar {
        left: 0;
    }

    .tidly-product-nav-toggle {
        display: inline-flex;
    }

    .navbar-collapse {
        margin: 0 calc(-1 * var(--page-gutter));
        padding: var(--space-3) var(--page-gutter) var(--space-4);
        border-top: 1px solid var(--color-border);
        background: var(--color-surface);
        box-shadow: var(--shadow-md);
    }

    .navbar-nav {
        align-items: stretch !important;
    }

    .navbar-nav .btn {
        width: 100%;
        margin-top: var(--space-2);
    }

    .navbar-nav .dropdown-menu {
        box-shadow: none;
    }
}

@media (max-width: 47.98rem) {
    .tidly-profile-section {
        padding: var(--space-4);
    }

    .tidly-profile-actions .btn,
    .tidly-profile-input-action .btn {
        width: 100%;
    }

    .tidly-confirmation-modal .modal-dialog {
        min-height: calc(100% - (var(--space-3) * 2));
        margin: var(--space-3);
    }

    .tidly-confirmation-modal .modal-content {
        border-radius: var(--radius-xl);
    }

    .tidly-confirmation-modal .modal-footer {
        display: grid;
        grid-template-columns: 1fr;
        padding: var(--space-4) var(--space-4) var(--space-6);
    }

    .tidly-confirmation-modal .modal-header {
        padding: var(--space-8) var(--space-4) var(--space-2);
    }

    .tidly-product-toolbar {
        gap: var(--space-2);
        padding-inline: var(--space-3);
    }

    .tidly-product-toolbar-leading,
    .tidly-product-toolbar-actions {
        gap: var(--space-1);
    }

    .tidly-product-account {
        padding-right: var(--space-1);
    }

    .tidly-product-account-name,
    .tidly-product-account-chevron {
        display: none;
    }

    .tidly-product-onboarding-cta {
        padding-inline: var(--space-3);
    }

    .tidly-product-onboarding-cta-full {
        display: none;
    }

    .tidly-product-onboarding-cta-short {
        display: inline;
    }

    .tidly-product-page {
        padding-block: var(--space-6) var(--space-12);
    }

    .tidly-placeholder-heading {
        grid-template-columns: 42px minmax(0, 1fr);
        gap: var(--space-3);
        padding: var(--space-4);
    }

    .tidly-placeholder-heading > span {
        width: 42px;
        height: 42px;
    }

    .tidly-placeholder-rows article {
        align-items: flex-start;
        flex-direction: column;
        gap: var(--space-3);
        padding: var(--space-4);
    }

    .tidly-notification-panel {
        position: fixed;
        top: calc(var(--product-toolbar-height) - var(--space-1));
        right: var(--space-4);
        left: var(--space-4);
        width: auto;
    }

    .tidly-welcome-page {
        padding-block: var(--space-8) var(--space-12);
    }

    .tidly-welcome-actions,
    .tidly-activation-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .tidly-welcome-actions .tidly-button,
    .tidly-activation-actions .tidly-button {
        width: 100%;
    }

    html {
        scroll-padding-top: 5rem;
    }

    main {
        padding-top: 68px;
    }

    .navbar,
    .navbar .container {
        min-height: 68px;
    }

    .page-section {
        min-height: calc(100vh - 68px);
        padding-block: var(--space-16);
    }

    .page-section .row {
        --bs-gutter-x: 0;
    }

    .tidly-hero {
        padding-block: var(--space-16);
    }

    .tidly-hero::before {
        top: 20%;
        right: -30%;
        width: 26rem;
        height: 26rem;
    }

    .tidly-hero h1 {
        max-width: 10ch;
        font-size: clamp(2.7rem, 13vw, 4rem);
    }

    .tidly-hero-lead {
        font-size: var(--text-base);
    }

    .tidly-hero-actions {
        display: grid;
        grid-template-columns: 1fr;
    }

    .tidly-button {
        width: 100%;
    }

    .tidly-proof-list {
        display: grid;
        grid-template-columns: 1fr;
    }

    .tidly-preview-portal {
        padding: var(--space-4);
    }

    .tidly-trust-grid {
        grid-template-columns: 1fr;
    }

    .tidly-trust-item + .tidly-trust-item {
        border-top: 1px solid var(--color-border);
        border-left: 0;
    }

    .tidly-steps {
        grid-template-columns: 1fr;
        margin-top: var(--space-8);
    }

    .tidly-steps article {
        min-height: 0;
    }

    .tidly-step-icon {
        margin-bottom: var(--space-8);
    }

    .tidly-channel-grid {
        gap: var(--space-3);
    }

    .tidly-channel-card {
        min-height: 140px;
        padding: var(--space-4);
    }

    .tidly-control-card {
        padding: var(--space-8) var(--space-6);
    }

    .tidly-onboarding-page {
        padding-block: var(--space-8);
    }

    .tidly-setup-section {
        padding: var(--space-4);
    }

    .tidly-setup-section-heading {
        align-items: stretch;
        flex-direction: column;
    }

    .tidly-stage-heading-actions {
        width: 100%;
        align-items: stretch;
        flex-direction: column;
    }

    .tidly-stage-heading-actions .tidly-button {
        width: 100%;
    }

    .tidly-form-actions {
        align-items: stretch;
        flex-direction: column-reverse;
    }

    .tidly-form-actions > div {
        width: 100%;
        justify-items: stretch;
    }

    .tidly-form-actions .tidly-button {
        width: 100%;
    }

    .tidly-step-actions {
        align-items: stretch;
        flex-direction: column-reverse;
    }

    .tidly-step-actions-end {
        flex-direction: column;
    }

    .tidly-step-actions .tidly-button {
        width: 100%;
    }

    .tidly-setup-section-heading .dropdown,
    .tidly-setup-section-heading .dropdown > .btn {
        width: 100%;
    }

    .tidly-upcoming-integrations {
        grid-template-columns: 1fr;
    }

    .toast-capsule {
        top: calc(68px + var(--space-8));
        width: calc(100vw - 2rem);
        min-width: 0;
    }

    .cookie-consent-card .d-flex:last-child {
        width: 100%;
        flex-direction: column-reverse;
    }

    .cookie-consent-card .d-flex:last-child .btn {
        width: 100%;
    }
}

@media (max-width: 29.98rem) {
    #product-toolbar-title {
        display: none;
    }

    .tidly-welcome-copy h1 {
        max-width: none;
    }

    .tidly-welcome-path article {
        gap: var(--space-3);
    }

    .tidly-channel-grid {
        grid-template-columns: 1fr;
    }

    .tidly-channel-card {
        min-height: 125px;
    }

    .tidly-preview-topbar,
    .tidly-preview-flow {
        flex-direction: column;
    }

    .tidly-preview-flow {
        display: flex;
        align-items: stretch;
    }

    .tidly-preview-flow > .fa-arrow-right {
        align-self: center;
        transform: rotate(90deg);
    }

    .tidly-preview-channel,
    .tidly-upcoming-integrations article {
        grid-template-columns: 42px minmax(0, 1fr);
    }

    .tidly-preview-badge,
    .tidly-upcoming-integrations em {
        grid-column: 2;
        justify-self: start;
    }

    .tidly-background-note,
    .tidly-mailbox-card {
        align-items: stretch;
        flex-direction: column;
    }

    .tidly-mailbox-actions {
        width: 100%;
    }

    .tidly-mailbox-actions button {
        flex: 1;
    }
}

/* ==========================================================================
   Tidly field-first redesign
   ========================================================================== */

body {
    color: var(--color-primary-base);
    background: var(--color-bg-main);
}

::selection {
    color: var(--color-primary-base);
    background: var(--color-brand-200);
}

:where(a, button, input, textarea, select, summary, [tabindex]):focus-visible {
    outline: 3px solid var(--color-primary-action);
    outline-offset: 3px;
}

[tabindex="-1"]:focus-visible {
    outline: 0;
}

a {
    color: var(--color-primary-base);
    font-weight: 500;
}

a:hover {
    color: var(--color-primary-action);
}

.btn,
.btn-sm,
.tidly-button,
.navbar-toggler,
.tidly-toolbar-button,
.tidly-product-account,
.tidly-provider-option,
.tidly-mailbox-actions button,
.tidly-profile-password-details summary {
    min-height: 48px;
    border-radius: var(--radius-md);
    font-weight: 500;
}

.btn-primary,
.tidly-button-primary {
    border-color: var(--color-primary-action);
    color: #FFFFFF;
    background: var(--color-primary-action);
    box-shadow: none;
}

.btn-primary {
    --bs-btn-color: #FFFFFF;
    --bs-btn-bg: var(--color-primary-action);
    --bs-btn-border-color: var(--color-primary-action);
    --bs-btn-hover-color: #FFFFFF;
    --bs-btn-hover-bg: var(--color-primary-action);
    --bs-btn-hover-border-color: var(--color-primary-action);
    --bs-btn-active-color: #FFFFFF;
    --bs-btn-active-bg: var(--color-primary-action);
    --bs-btn-active-border-color: var(--color-primary-action);
    --bs-btn-disabled-color: #FFFFFF;
    --bs-btn-disabled-bg: var(--color-primary-action);
    --bs-btn-disabled-border-color: var(--color-primary-action);
    --bs-btn-focus-shadow-rgb: 234, 88, 12;
}

.btn-primary:hover,
.tidly-button-primary:hover {
    color: #FFFFFF;
    background: var(--color-primary-action);
    border-color: var(--color-primary-action);
    box-shadow: 0 2px 6px rgb(15 23 42 / 14%);
    filter: brightness(0.94);
    transform: none;
}

.btn-outline-secondary,
.tidly-button-quiet,
.tidly-button-tertiary {
    border: 1px solid var(--color-border-strong);
    color: var(--color-primary-base);
    background: #FFFFFF;
}

.btn-outline-secondary:hover,
.tidly-button-quiet:hover,
.tidly-button-tertiary:hover {
    border-color: var(--color-primary-base);
    color: var(--color-primary-base);
    background: var(--color-bg-main);
}

.btn-link {
    min-height: 48px;
    color: var(--color-primary-base);
    font-weight: 500;
}

.btn-link:hover {
    color: var(--color-primary-action);
}

.btn:disabled,
.tidly-button:disabled {
    filter: none;
    opacity: 0.5;
}

.form-label,
.tidly-field label {
    color: var(--color-primary-base);
    font-weight: 500;
}

.form-control,
.form-select,
.tidly-field input,
.tidly-field select,
.tidly-field textarea {
    min-height: 48px;
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-md);
    color: var(--color-primary-base);
    background: #FFFFFF;
    font-size: 1rem;
}

.form-control:focus,
.form-select:focus,
.tidly-field input:focus-visible,
.tidly-field select:focus-visible,
.tidly-field textarea:focus-visible {
    border-color: var(--color-primary-action);
    background: #FFFFFF;
    box-shadow: 0 0 0 3px var(--color-focus-ring);
    outline: 0;
}

.text-brand {
    color: var(--color-primary-action) !important;
}

.eyebrow {
    color: var(--color-primary-base);
}

.text-muted {
    color: var(--color-text-secondary) !important;
}

.navbar {
    min-height: 72px;
    border-color: rgb(255 255 255 / 12%) !important;
    background: var(--color-primary-base) !important;
    box-shadow: 0 1px 0 rgb(15 23 42 / 14%);
}

.tidly-wordmark,
.navbar-brand.tidly-wordmark {
    display: inline-flex;
    min-height: 48px;
    align-items: center;
    color: #FFFFFF;
    font-family: var(--font-display);
    font-weight: 700;
}

.navbar .tidly-wordmark,
.tidly-product-sidebar .tidly-wordmark {
    color: #FFFFFF !important;
}

.tidly-wordmark span {
    color: var(--color-primary-action);
}

.navbar-toggler {
    width: 48px;
    height: 48px;
    border-color: rgb(255 255 255 / 34%);
}

.navbar-toggler-icon {
    filter: brightness(0) invert(1);
}

.navbar-collapse {
    background: var(--color-primary-base);
}

.navbar .nav-link,
.navbar .dropdown-toggle {
    min-height: 48px;
    color: #FFFFFF;
}

.navbar .nav-link:hover,
.navbar .dropdown-toggle:hover {
    color: #FFFFFF;
}

.dropdown-menu,
.modal-content,
.template-card,
.cookie-consent-card {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: #FFFFFF;
    box-shadow: var(--shadow-md);
}

.dropdown-item {
    min-height: 48px;
    padding-block: 0.75rem;
    color: var(--color-primary-base);
}

.dropdown-item:hover,
.dropdown-item:focus {
    color: var(--color-primary-base);
    background: var(--color-bg-main);
}

.modal-content {
    overflow: hidden;
}

.modal-header,
.modal-footer {
    border-color: var(--color-border);
}

.modal-icon-circle,
.tidly-confirmation-icon {
    border-radius: var(--radius-md);
    color: var(--color-primary-action);
    background: var(--color-brand-50);
}

.btn-close {
    width: 48px;
    height: 48px;
    padding: 0;
    border-radius: var(--radius-md);
    background-position: center;
}

.tidly-profile-support-link {
    display: inline-flex;
    min-height: 48px;
    align-items: center;
    margin-left: var(--space-1);
    padding: 0;
    border: 0;
    color: var(--color-primary-base);
    background: transparent;
    font-weight: 700;
    text-decoration: underline;
    text-decoration-color: var(--color-primary-action);
    text-underline-offset: 4px;
}

.tidly-profile-support-link:hover {
    color: var(--color-primary-action);
}

.tidly-contact-modal .modal-dialog {
    max-width: 32rem;
}

.tidly-contact-modal .modal-content {
    position: relative;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-lg);
}

.tidly-contact-modal .modal-body {
    padding: clamp(var(--space-4), 5vw, var(--space-8)) !important;
    text-align: center;
}

.tidly-contact-modal-close {
    position: absolute;
    z-index: 10;
    top: var(--space-4);
    right: var(--space-4);
}

.tidly-contact-icon {
    display: inline-flex;
    width: 64px;
    height: 64px;
    align-items: center;
    justify-content: center;
    margin-bottom: var(--space-4);
    border-radius: var(--radius-lg);
    color: var(--color-primary-action);
    background: var(--color-brand-50);
    font-size: var(--text-2xl);
}

.tidly-contact-modal h2 {
    margin: 0;
    color: var(--color-primary-base);
    font-size: var(--text-2xl);
    font-weight: 700;
}

.tidly-contact-lead {
    max-width: 27rem;
    margin: var(--space-3) auto var(--space-6);
    color: var(--color-text-secondary);
    line-height: 1.6;
}

.tidly-contact-founder {
    display: flex;
    max-width: 25rem;
    align-items: center;
    gap: var(--space-3);
    margin: 0 auto var(--space-6);
    padding: var(--space-3);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-surface-subtle);
    text-align: left;
}

.tidly-contact-photo {
    width: 56px;
    height: 56px;
    flex: 0 0 auto;
    border-radius: 50%;
    object-fit: cover;
    box-shadow: var(--shadow-sm);
}

.tidly-contact-founder p {
    margin: 0;
    color: var(--color-text-secondary);
    font-size: var(--text-sm);
    line-height: 1.5;
}

.tidly-contact-founder strong {
    display: block;
    margin-top: var(--space-1);
    color: var(--color-primary-base);
    font-weight: 700;
}

.tidly-contact-actions {
    display: grid;
    gap: var(--space-4);
    max-width: 25rem;
    margin: 0 auto;
}

.tidly-contact-email-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 52px;
    font-size: var(--text-base);
    box-shadow: var(--shadow-sm);
}

.tidly-contact-email-button i {
    margin-right: var(--space-2);
}

.tidly-contact-email-fallback {
    margin: 0;
    padding-top: var(--space-4);
    border-top: 1px solid var(--color-border);
    color: var(--color-text-secondary);
    font-size: var(--text-sm);
    line-height: 1.5;
    text-align: center;
}

.tidly-contact-email-fallback span {
    display: block;
    margin-top: var(--space-1);
    color: var(--color-primary-base);
    font-weight: 700;
    user-select: all;
}

.page-section {
    overflow-x: clip;
    color: var(--color-primary-base);
    background: var(--color-bg-main);
}

.page-section h1 {
    color: var(--color-primary-base);
    font-family: var(--font-display);
}

.template-card {
    box-shadow: var(--shadow-sm);
}

/* Terms and conditions */

.tidly-terms-page {
    padding-block: clamp(var(--space-16), 8vw, var(--space-24));
}

.tidly-terms-shell {
    max-width: 58rem;
}

.tidly-terms-header {
    max-width: 48rem;
    margin-bottom: clamp(var(--space-8), 5vw, var(--space-12));
}

.tidly-terms-header .eyebrow {
    margin-bottom: var(--space-4);
}

.tidly-terms-header h1 {
    max-width: 22ch;
    margin: 0;
    color: var(--color-primary-base);
    font-family: var(--font-display);
    font-size: var(--text-3xl);
    font-weight: 700;
    letter-spacing: -0.04em;
    line-height: var(--leading-heading);
}

.tidly-terms-intro {
    max-width: 42rem;
    margin: var(--space-4) 0 0;
    color: var(--color-text-secondary);
    font-size: var(--text-lg);
    line-height: 1.7;
}

.tidly-terms-meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    margin-top: var(--space-6);
}

.tidly-terms-meta span {
    display: inline-flex;
    min-height: 40px;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    color: var(--color-primary-base);
    background: var(--color-surface-card);
    font-size: var(--text-sm);
    font-weight: 500;
    line-height: 1.35;
}

.tidly-terms-meta i {
    color: var(--color-primary-action);
}

.tidly-terms-document {
    overflow: hidden;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    background: var(--color-surface-card);
    box-shadow: var(--shadow-md);
}

.tidly-terms-document > section {
    padding: clamp(var(--space-6), 4vw, var(--space-8));
    border-bottom: 1px solid var(--color-border);
}

.tidly-terms-document > section:last-child {
    border-bottom: 0;
}

.tidly-terms-document h2 {
    margin: 0 0 var(--space-4);
    color: var(--color-primary-base);
    font-family: var(--font-display);
    font-size: clamp(1.0625rem, 1rem + 0.25vw, var(--text-xl));
    font-weight: 700;
    letter-spacing: -0.015em;
    line-height: 1.4;
}

.tidly-terms-document p {
    margin: 0 0 var(--space-4);
    color: var(--color-text-secondary);
    font-size: var(--text-base);
    line-height: 1.75;
}

.tidly-terms-document p:last-child {
    margin-bottom: 0;
}

.tidly-terms-document strong {
    color: var(--color-primary-base);
    font-weight: 700;
}

.tidly-terms-document a {
    color: var(--color-primary-action);
    font-weight: 700;
    overflow-wrap: anywhere;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}

.tidly-terms-document a:hover {
    color: var(--color-primary-base);
}

@media (max-width: 47.98rem) {
    .tidly-terms-page {
        padding-block: var(--space-12);
    }

    .tidly-terms-header {
        margin-bottom: var(--space-8);
    }

    .tidly-terms-meta {
        display: grid;
    }

    .tidly-terms-meta span {
        width: 100%;
    }

    .tidly-terms-document > section {
        padding: var(--space-6);
    }
}

/* Public landing */

.tidly-landing {
    color: var(--color-primary-base);
    background: var(--color-bg-main);
}

.tidly-hero {
    min-height: 0;
    padding-block: clamp(4rem, 9vw, 7rem);
    background: var(--color-bg-main);
}

.tidly-hero::before {
    display: none;
}

.tidly-hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.02fr) minmax(22rem, 0.98fr);
    align-items: center;
    gap: clamp(2rem, 6vw, 5rem);
}

.tidly-hero-copy {
    max-width: 42rem;
}

.tidly-ai-kicker,
.tidly-kicker {
    margin: 0 0 var(--space-4);
    color: var(--color-primary-base);
    font-size: var(--text-sm);
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: none;
}

.tidly-ai-kicker {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    border: 1px solid rgb(37 99 235 / 24%);
    border-radius: var(--radius-md);
    color: var(--color-ai-accent);
    background: rgb(37 99 235 / 7%);
}

.tidly-hero h1 {
    max-width: 13ch;
    margin: 0;
    color: var(--color-primary-base);
    font-family: var(--font-display);
    font-size: clamp(2.5rem, 5vw, 4.4rem);
    font-weight: 700;
    letter-spacing: -0.045em;
    line-height: 1.04;
}

.tidly-hero-lead {
    max-width: 58ch;
    margin: var(--space-6) 0 0;
    color: var(--color-text-secondary);
    font-size: clamp(1rem, 1.8vw, 1.18rem);
    line-height: 1.65;
}

.tidly-hero-actions {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    margin-top: var(--space-8);
}

.tidly-text-link {
    display: inline-flex;
    min-height: 48px;
    align-items: center;
    padding-inline: var(--space-2);
    color: var(--color-primary-base);
    text-decoration: underline;
    text-decoration-color: var(--color-border-strong);
    text-underline-offset: 0.25rem;
}

.tidly-text-link:hover {
    color: var(--color-primary-action);
    text-decoration-color: currentColor;
}

.tidly-proof-list {
    display: grid;
    gap: var(--space-3);
    margin: var(--space-8) 0 0;
    padding: 0;
    list-style: none;
}

.tidly-proof-list li {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    color: var(--color-primary-base);
    font-size: var(--text-sm);
    font-weight: 500;
}

.tidly-proof-list i {
    margin-top: 0.2rem;
    color: var(--color-status-success);
}

.tidly-product-proof {
    overflow: hidden;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: #FFFFFF;
    box-shadow: var(--shadow-md);
}

.tidly-product-proof > header {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-4);
    border-bottom: 1px solid var(--color-border);
}

.tidly-proof-business-icon {
    display: grid;
    width: 48px;
    height: 48px;
    place-items: center;
    border-radius: var(--radius-md);
    color: #FFFFFF;
    background: var(--color-primary-base);
}

.tidly-product-proof strong,
.tidly-product-proof small {
    display: block;
}

.tidly-product-proof small {
    color: var(--color-text-secondary);
    font-size: var(--text-xs);
}

.tidly-status-badge {
    padding: 0.35rem 0.55rem;
    border: 1px solid var(--color-status-success);
    border-radius: var(--radius-md);
    color: var(--color-primary-base);
    background: var(--color-success-bg);
    font-size: var(--text-xs);
    font-weight: 700;
}

.tidly-message-card {
    margin: var(--space-4);
    padding: var(--space-4);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: #FFFFFF;
}

.tidly-message-card p {
    margin: var(--space-2) 0 0;
    color: var(--color-primary-base);
}

.tidly-message-card-ai {
    border-color: rgb(37 99 235 / 28%);
    background: rgb(37 99 235 / 6%);
}

.tidly-message-card-ai small {
    color: var(--color-ai-accent);
    font-weight: 700;
}

.tidly-product-proof > footer {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-4);
    border-top: 1px solid var(--color-border);
    color: var(--color-text-secondary);
    background: var(--color-bg-main);
    font-size: var(--text-sm);
}

.tidly-product-proof > footer i {
    color: var(--color-status-success);
}

.tidly-section {
    padding-block: clamp(4rem, 8vw, 6.5rem);
}

.tidly-how-section {
    border-block: 1px solid var(--color-border);
    background: #FFFFFF;
}

.tidly-section-intro {
    max-width: 43rem;
}

.tidly-section-intro h2,
.tidly-control-card h2,
.tidly-final-cta h2 {
    margin: 0;
    color: var(--color-primary-base);
    font-family: var(--font-display);
    font-size: clamp(1.8rem, 3.5vw, 2.7rem);
    font-weight: 700;
    letter-spacing: -0.035em;
    line-height: 1.15;
}

.tidly-section-intro > p:last-child {
    margin: var(--space-4) 0 0;
    color: var(--color-text-secondary);
}

.tidly-steps {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-4);
    margin-top: var(--space-12);
}

.tidly-steps article {
    position: relative;
    min-height: 15rem;
    padding: var(--space-6);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-bg-main);
    box-shadow: none;
}

.tidly-steps article:hover {
    border-color: var(--color-border-strong);
    box-shadow: none;
    transform: none;
}

.tidly-step-number {
    position: absolute;
    top: var(--space-4);
    right: var(--space-4);
    color: var(--color-text-secondary);
    font-family: var(--font-display);
    font-size: var(--text-sm);
    font-weight: 700;
}

.tidly-steps article > i {
    display: grid;
    width: 48px;
    height: 48px;
    place-items: center;
    margin-bottom: var(--space-8);
    border-radius: var(--radius-md);
    color: #FFFFFF;
    background: var(--color-primary-base);
}

.tidly-steps h3 {
    margin: 0;
    color: var(--color-primary-base);
    font-size: var(--text-lg);
}

.tidly-steps p {
    margin: var(--space-3) 0 0;
    color: var(--color-text-secondary);
}

.tidly-ai-inline {
    color: var(--color-ai-accent);
}

.tidly-control-section {
    background: var(--color-bg-main);
}

.tidly-control-card {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(18rem, 0.95fr);
    gap: clamp(2rem, 6vw, 5rem);
    padding: clamp(2rem, 6vw, 4rem);
    border: 0;
    border-radius: var(--radius-lg);
    color: #FFFFFF;
    background: var(--color-primary-base);
    box-shadow: none;
}

.tidly-control-card::after {
    display: none;
}

.tidly-control-card .tidly-kicker,
.tidly-control-card h2,
.tidly-control-card strong {
    color: #FFFFFF;
}

.tidly-control-card p,
.tidly-control-points li {
    color: #CBD5E1;
}

.tidly-control-card > div > p:last-child {
    margin: var(--space-4) 0 0;
}

.tidly-control-points {
    display: grid;
    align-content: center;
    gap: var(--space-4);
    margin: 0;
    padding: 0;
    list-style: none;
}

.tidly-control-points li {
    display: grid;
    grid-template-columns: 32px minmax(0, 1fr);
    gap: var(--space-3);
}

.tidly-control-points i {
    display: grid;
    width: 32px;
    height: 32px;
    place-items: center;
    border-radius: var(--radius-md);
    color: #FFFFFF;
    background: var(--color-status-success);
}

.tidly-control-points strong {
    display: block;
    margin-bottom: var(--space-1);
}

.tidly-final-cta {
    padding-block: clamp(3rem, 6vw, 5rem);
    border-top: 1px solid var(--color-border);
    background: #FFFFFF;
}

.tidly-final-cta .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-8);
}

.tidly-final-cta p {
    margin: var(--space-2) 0 0;
    color: var(--color-text-secondary);
}

/* Authenticated shell */

.app-shell.is-product-view {
    --product-sidebar-width: 16rem;
    --product-toolbar-height: 4rem;
    background: var(--color-bg-main);
}

.tidly-product-sidebar {
    border-right: 0;
    color: #FFFFFF;
    background: var(--color-primary-base);
}

.tidly-product-brand {
    color: #FFFFFF;
}

.tidly-product-nav a,
.tidly-product-sidebar-footer a {
    min-height: 48px;
    border-radius: var(--radius-md);
    color: #CBD5E1;
    font-weight: 500;
}

.tidly-product-nav a:hover,
.tidly-product-sidebar-footer a:hover {
    color: #FFFFFF;
    background: rgb(255 255 255 / 8%);
}

.tidly-product-nav a.active,
.tidly-product-sidebar-footer a.active,
.tidly-product-nav a[aria-current="page"],
.tidly-product-sidebar-footer a[aria-current="page"] {
    color: #FFFFFF;
    background: rgb(234 88 12 / 18%);
    box-shadow: inset 3px 0 0 var(--color-primary-action);
}

.tidly-product-nav i,
.tidly-product-sidebar-footer i {
    color: currentColor;
}

.tidly-product-sidebar-footer {
    border-color: rgb(255 255 255 / 12%);
}

.tidly-product-toolbar {
    min-height: var(--product-toolbar-height);
    border-color: var(--color-border);
    background: #FFFFFF;
    box-shadow: 0 1px 0 rgb(15 23 42 / 4%);
}

.tidly-product-toolbar p {
    color: var(--color-primary-base);
    font-family: var(--font-display);
    font-weight: 700;
}

.tidly-toolbar-button,
.tidly-product-account {
    min-width: 48px;
    min-height: 48px;
    color: var(--color-primary-base);
}

.tidly-toolbar-button:hover,
.tidly-toolbar-button[aria-expanded="true"],
.tidly-product-account:hover,
.tidly-product-account[aria-expanded="true"] {
    color: var(--color-primary-base);
    background: var(--color-bg-main);
}

.tidly-product-account-icon {
    display: grid;
    width: 36px;
    height: 36px;
    place-items: center;
    border-radius: var(--radius-md);
    color: #FFFFFF;
    background: var(--color-primary-base);
}

.tidly-notification-dot {
    background: var(--color-primary-action);
}

.tidly-notification-panel,
.tidly-product-account-menu {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: #FFFFFF;
    box-shadow: var(--shadow-md);
}

.tidly-notification-empty > span,
.tidly-placeholder-heading > span,
.tidly-profile-section-header h2 i,
.tidly-email-empty > span,
.tidly-mailbox-provider-icon {
    border-radius: var(--radius-md);
    color: var(--color-primary-base);
    background: var(--color-bg-main);
}

.tidly-product-page,
.tidly-onboarding-page,
.tidly-welcome-page {
    color: var(--color-primary-base);
    background: var(--color-bg-main);
}

.tidly-product-page-header h1,
.tidly-onboarding-header h1,
.tidly-welcome-copy h1 {
    color: var(--color-primary-base);
    font-family: var(--font-display);
    font-weight: 700;
}

.tidly-overview-status-surface,
.tidly-overview-followup article,
.tidly-placeholder-surface,
.tidly-profile-surface,
.tidly-welcome-surface,
.tidly-onboarding-surface,
.tidly-onboarding-overview {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: #FFFFFF;
    box-shadow: var(--shadow-sm);
}

.tidly-overview-status-icon {
    border-radius: var(--radius-md);
}

.tidly-overview-status-icon.is-active {
    color: #FFFFFF;
    background: var(--color-status-success);
}

.tidly-overview-status-icon.is-attention,
.tidly-overview-status-icon.is-error {
    color: #FFFFFF;
    background: var(--color-primary-action);
}

.tidly-overview-facts dd {
    color: var(--color-primary-base);
    font-family: var(--font-display);
    font-size: var(--text-xl);
    font-weight: 700;
}

.tidly-overview-facts dd.is-positive {
    color: var(--color-status-success);
}

.tidly-overview-facts dd.is-warning,
.tidly-overview-facts dd.is-error {
    padding-left: var(--space-2);
    border-left: 3px solid var(--color-primary-action);
    color: var(--color-primary-base);
}

.tidly-overview-all-clear {
    color: var(--color-status-success);
    font-weight: 700;
}

.tidly-overview-followup a {
    display: inline-flex;
    min-height: 48px;
    align-items: center;
    color: var(--color-primary-base);
    text-decoration: underline;
    text-decoration-color: var(--color-primary-action);
    text-underline-offset: 0.25rem;
}

.tidly-profile-save-status.is-error,
.tidly-onboarding-save-status.is-error {
    color: var(--color-primary-base);
}

.tidly-profile-section {
    border-color: var(--color-border);
}

.tidly-profile-setting,
.tidly-automation-toggle,
.tidly-choice-list label,
.tidly-provider-option,
.tidly-mailbox-card {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: #FFFFFF;
}

.tidly-profile-setting:has(input:checked) {
    border-color: var(--color-status-success);
    background: var(--color-success-bg);
}

.tidly-profile-setting input,
.tidly-automation-toggle input {
    min-width: 48px;
    min-height: 28px;
    accent-color: var(--color-primary-action);
}

.tidly-profile-save-status.is-saved,
.tidly-onboarding-save-status.is-saved {
    color: var(--color-status-success);
}

.tidly-onboarding-progress-track,
.tidly-onboarding-progress-fill {
    border-radius: var(--radius-md);
}

.tidly-onboarding-progress-fill {
    background: var(--color-primary-action);
}

.tidly-onboarding-step-icon {
    border-radius: var(--radius-md);
    color: var(--color-primary-base);
    background: var(--color-bg-main);
}

.tidly-choice-list label:hover,
.tidly-choice-list label:has(input:checked) {
    border-color: var(--color-primary-action);
    background: var(--color-brand-50);
}

.tidly-choice-list input {
    width: 24px;
    height: 24px;
    accent-color: var(--color-primary-action);
}

.tidly-choice-list-detailed label:hover .tidly-goal-choice-icon,
.tidly-choice-list-detailed label:has(input:checked) .tidly-goal-choice-icon {
    color: var(--color-primary-action);
}

.tidly-provider-option:hover {
    border-color: var(--color-primary-action);
}

.tidly-provider-option > i:first-child {
    color: var(--color-primary-base);
}

.tidly-field-error {
    border-color: var(--color-primary-action);
    color: var(--color-primary-base);
    background: var(--color-brand-50);
}

.tidly-status-line > span {
    border-radius: var(--radius-md);
    background: var(--color-status-success);
}

/* AI is the only cobalt UI */

.tidly-button-ai {
    border: 1px solid var(--color-ai-accent);
    color: #FFFFFF;
    background: var(--color-ai-accent);
}

.tidly-button-ai:hover {
    border-color: var(--color-ai-accent);
    color: #FFFFFF;
    background: var(--color-ai-accent);
    filter: brightness(0.94);
}

.tidly-button-ai:focus-visible {
    outline-color: var(--color-ai-accent);
}

.tidly-ai-step .tidly-onboarding-step-icon {
    border: 1px solid rgb(37 99 235 / 24%);
    color: var(--color-ai-accent);
    background: rgb(37 99 235 / 7%);
}

.tidly-ai-control {
    border-color: rgb(37 99 235 / 28%);
    background: rgb(37 99 235 / 6%);
}

.tidly-ai-control strong {
    color: var(--color-ai-accent);
}

.tidly-ai-label {
    color: var(--color-ai-accent) !important;
}

.tidly-ai-control input {
    accent-color: var(--color-ai-accent);
}

/* Feedback and footer */

.toast-capsule {
    gap: var(--space-3);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    color: var(--color-primary-base);
    background: #FFFFFF;
    box-shadow: var(--shadow-md);
}

.toast-capsule > .d-flex {
    gap: var(--space-3);
}

.toast-status-icon {
    display: grid;
    width: 40px;
    height: 40px;
    place-items: center;
    border-radius: var(--radius-md);
    color: #FFFFFF;
}

.toast-capsule--success .toast-status-icon {
    background: var(--color-status-success);
}

.toast-capsule--error .toast-status-icon {
    background: var(--color-primary-action);
}

.toast-capsule .btn-close {
    min-width: 48px;
    min-height: 48px;
}

.site-footer {
    border-top: 0;
    color: #CBD5E1;
    background: var(--color-primary-base);
}

.site-footer a {
    display: inline-flex;
    min-width: 48px;
    min-height: 48px;
    align-items: center;
    justify-content: center;
    color: #FFFFFF;
}

.site-footer a:hover {
    color: #FFFFFF;
    text-decoration-color: var(--color-primary-action);
}

.cookie-consent-card__icon {
    border-radius: var(--radius-md);
    color: #FFFFFF;
    background: var(--color-primary-base);
}

.tidly-product-bottom-nav {
    display: none;
}

@media (max-width: 63.98rem) {
    .tidly-hero-grid,
    .tidly-control-card {
        grid-template-columns: 1fr;
    }

    .tidly-product-proof {
        width: min(100%, 43rem);
    }
}

@media (max-width: 61.98rem) {
    .app-shell.is-product-view > main {
        padding-bottom: calc(76px + env(safe-area-inset-bottom));
    }

    .tidly-product-sidebar,
    .tidly-product-nav-backdrop,
    .tidly-product-nav-toggle {
        display: none !important;
    }

    .tidly-product-toolbar {
        min-height: 60px;
        color: #FFFFFF;
        background: var(--color-primary-base);
    }

    .tidly-product-toolbar p,
    .tidly-product-toolbar .tidly-toolbar-button,
    .tidly-product-toolbar .tidly-product-account {
        color: #FFFFFF;
    }

    .tidly-product-toolbar .tidly-toolbar-button:hover,
    .tidly-product-toolbar .tidly-toolbar-button[aria-expanded="true"],
    .tidly-product-toolbar .tidly-product-account:hover,
    .tidly-product-toolbar .tidly-product-account[aria-expanded="true"] {
        color: #FFFFFF;
        background: rgb(255 255 255 / 10%);
    }

    .tidly-product-account-icon {
        color: var(--color-primary-base);
        background: #FFFFFF;
    }

    .tidly-product-bottom-nav:not([hidden]) {
        position: fixed;
        z-index: var(--layer-sticky);
        right: 0;
        bottom: 0;
        left: 0;
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        min-height: calc(68px + env(safe-area-inset-bottom));
        padding: 4px max(6px, env(safe-area-inset-left)) env(safe-area-inset-bottom) max(6px, env(safe-area-inset-right));
        border-top: 1px solid rgb(255 255 255 / 12%);
        background: var(--color-primary-base);
        box-shadow: 0 -4px 16px rgb(15 23 42 / 12%);
    }

    .tidly-product-bottom-nav a {
        display: flex;
        min-width: 0;
        min-height: 60px;
        align-items: center;
        justify-content: center;
        gap: 2px;
        border-radius: var(--radius-md);
        color: #CBD5E1;
        flex-direction: column;
        font-size: 0.72rem;
        font-weight: 500;
        line-height: 1.1;
        text-decoration: none;
    }

    .tidly-product-bottom-nav a i {
        font-size: 1.05rem;
    }

    .tidly-product-bottom-nav a:hover {
        color: #FFFFFF;
        background: rgb(255 255 255 / 8%);
    }

    .tidly-product-bottom-nav a.active,
    .tidly-product-bottom-nav a[aria-current="page"] {
        color: #FFFFFF;
        background: rgb(234 88 12 / 22%);
        box-shadow: inset 0 3px 0 var(--color-primary-action);
    }

    .tidly-onboarding-actions {
        position: sticky;
        z-index: calc(var(--layer-sticky) - 1);
        bottom: calc(68px + env(safe-area-inset-bottom));
        margin: var(--space-8) calc(-1 * var(--space-6)) calc(-1 * var(--space-6));
        padding: var(--space-3) var(--space-6);
        border-top: 1px solid var(--color-border);
        border-radius: 0 0 var(--radius-lg) var(--radius-lg);
        background: #FFFFFF;
        box-shadow: 0 -4px 12px rgb(15 23 42 / 7%);
    }

    .tidly-notification-panel {
        top: 56px;
    }
}

@media (max-width: 47.98rem) {
    main {
        padding-top: 68px;
    }

    .tidly-hero {
        padding-block: var(--space-12) var(--space-16);
    }

    .tidly-hero h1 {
        max-width: 12ch;
        font-size: clamp(2.35rem, 11vw, 3.35rem);
    }

    .tidly-hero-actions {
        display: grid;
        grid-template-columns: 1fr;
    }

    .tidly-hero-actions .tidly-button,
    .tidly-text-link {
        width: 100%;
        justify-content: center;
    }

    .tidly-product-proof > header {
        grid-template-columns: 48px minmax(0, 1fr);
    }

    .tidly-status-badge {
        grid-column: 2;
        justify-self: start;
    }

    .tidly-steps {
        grid-template-columns: 1fr;
    }

    .tidly-steps article {
        min-height: 0;
    }

    .tidly-final-cta .container {
        align-items: stretch;
        flex-direction: column;
    }

    .tidly-final-cta .tidly-button {
        width: 100%;
    }

    .navbar-collapse {
        border-color: rgb(255 255 255 / 12%);
        box-shadow: none;
    }

    .tidly-product-page {
        padding-block: var(--space-6) var(--space-8);
    }

    .tidly-onboarding-page {
        padding-bottom: var(--space-8);
    }

    .tidly-onboarding-surface {
        padding: var(--space-6);
    }

    .tidly-onboarding-actions .tidly-button {
        min-width: 0;
        width: auto;
    }

    .modal-dialog {
        margin: var(--space-3);
    }

    .modal-body {
        padding-inline: var(--space-4) !important;
    }

    .cookie-consent-card {
        padding: var(--space-4);
    }
}

@media (max-width: 29.98rem) {
    .tidly-onboarding-actions {
        margin-right: calc(-1 * var(--space-4));
        margin-left: calc(-1 * var(--space-4));
        padding-inline: var(--space-4);
    }

    .tidly-onboarding-actions .tidly-button {
        padding-inline: var(--space-3);
    }

    .tidly-product-bottom-nav a span {
        overflow: hidden;
        max-width: 100%;
        text-overflow: ellipsis;
    }
}

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

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

    .view {
        transform: none;
    }
}

/* ========================================================================== */
/* Authenticated onboarding                                                   */
/* ========================================================================== */

.tidly-onboarding-page {
    min-height: calc(100vh - 72px);
    scroll-margin-top: 72px;
    padding-block: var(--space-8) var(--space-16);
    color: var(--color-text);
    background: var(--color-bg-app);
}

.tidly-onboarding-container {
    max-width: 54rem;
}

.tidly-onboarding-header {
    display: grid;
    max-width: none;
    grid-template-columns: 1fr;
    gap: var(--space-4);
    margin-bottom: var(--space-6);
}

.tidly-onboarding-header p {
    margin: 0;
    color: var(--color-text-secondary);
    font-size: var(--text-sm);
}

.tidly-onboarding-header .tidly-onboarding-intro {
    max-width: 52ch;
    font-size: var(--text-base);
    line-height: var(--leading-body);
}

.tidly-onboarding-header h1 {
    margin: 0 0 var(--space-2);
    color: var(--color-ink);
    font-size: var(--text-3xl);
    font-weight: 700;
    letter-spacing: -0.04em;
    line-height: var(--leading-heading);
}

.tidly-onboarding-progress-track {
    position: relative;
    width: 100%;
    height: 0.375rem;
    overflow: hidden;
    border-radius: var(--radius-pill);
    background: var(--color-border);
}

.tidly-onboarding-progress-track[hidden] {
    display: none;
}

.tidly-onboarding-progress-fill {
    position: absolute;
    inset: 0;
    border-radius: var(--radius-pill);
    background: var(--color-brand-600);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform var(--duration-slow) var(--ease-standard);
}

.tidly-onboarding-surface,
.tidly-onboarding-overview {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    background: var(--color-surface);
    box-shadow: var(--shadow-sm);
}

.tidly-onboarding-surface {
    position: relative;
    min-height: 31rem;
    padding: clamp(var(--space-6), 5vw, var(--space-12));
}

.tidly-onboarding-save-status {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    min-height: 1.35rem;
    width: min(100%, 42rem);
    margin: var(--space-3) auto 0;
    color: var(--color-text-muted);
    font-size: var(--text-sm);
    text-align: center;
}

.tidly-onboarding-save-status i {
    width: 1rem;
    text-align: center;
}

.tidly-onboarding-save-status.is-saved {
    color: var(--color-brand-700);
}

.tidly-onboarding-save-status.is-error {
    color: var(--color-danger);
}

#onboarding-flow[hidden] + .tidly-onboarding-save-status {
    display: none;
}

.tidly-onboarding-step {
    max-width: 42rem;
}

.tidly-onboarding-step[hidden],
.tidly-onboarding-overview[hidden],
.tidly-onboarding-surface[hidden] {
    display: none;
}

.tidly-onboarding-step.is-entering-forward {
    animation: tidly-onboarding-enter-forward var(--duration-slow) var(--ease-enter) both;
}

.tidly-onboarding-step.is-entering-back {
    animation: tidly-onboarding-enter-back var(--duration-slow) var(--ease-enter) both;
}

@keyframes tidly-onboarding-enter-forward {
    from {
        opacity: 0;
        transform: translateX(1rem);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes tidly-onboarding-enter-back {
    from {
        opacity: 0;
        transform: translateX(-1rem);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.tidly-onboarding-step > header {
    margin-bottom: var(--space-8);
    text-align: left;
}

.tidly-onboarding-step-icon {
    display: flex;
    width: 3rem;
    height: 3rem;
    align-items: center;
    justify-content: center;
    margin: 0 0 var(--space-4);
    border-radius: var(--radius-md);
    color: var(--color-brand-700);
    background: var(--color-brand-50);
    font-size: var(--text-lg);
}

.tidly-onboarding-step > header h2 {
    max-width: 24ch;
    margin: 0 0 var(--space-3);
    color: var(--color-ink);
    font-size: var(--text-2xl);
    font-weight: 700;
    letter-spacing: -0.025em;
    line-height: var(--leading-heading);
}

.tidly-onboarding-step > header p {
    max-width: 58ch;
    margin: 0;
    color: var(--color-text-secondary);
}

.tidly-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-4);
}

.tidly-field-with-unit > div {
    display: flex;
    align-items: stretch;
    max-width: 24rem;
}

.tidly-field-with-unit input {
    min-width: 0;
    border-radius: var(--radius-md) 0 0 var(--radius-md);
}

.tidly-field-with-unit > div > span {
    display: flex;
    align-items: center;
    padding-inline: var(--space-4);
    border: 1px solid var(--color-border-strong);
    border-left: 0;
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
    color: var(--color-text-secondary);
    background: var(--color-surface-subtle);
    font-size: var(--text-sm);
    white-space: nowrap;
}

.tidly-danish-phone-input {
    display: flex;
    width: min(100%, 24rem);
    align-items: stretch;
}

.tidly-danish-phone-input > span {
    display: flex;
    min-width: 4.25rem;
    min-height: 48px;
    align-items: center;
    justify-content: center;
    padding-inline: var(--space-3);
    border: 1px solid var(--color-border-strong);
    border-right: 0;
    border-radius: var(--radius-md) 0 0 var(--radius-md);
    background: var(--color-surface-subtle);
    color: var(--color-ink);
    font-weight: 700;
}

.tidly-danish-phone-input input {
    min-width: 0;
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
}

.tidly-danish-phone-input:focus-within > span {
    border-color: var(--color-brand-500);
}

.tidly-useful-links {
    display: grid;
    gap: var(--space-4);
}

.tidly-useful-link-row {
    display: grid;
    grid-template-columns: minmax(10rem, 0.8fr) minmax(14rem, 1.2fr) 3rem;
    align-items: end;
    gap: var(--space-3);
    padding: var(--space-4);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-surface-subtle);
}

.tidly-useful-link-remove {
    display: inline-flex;
    width: 48px;
    height: 48px;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-md);
    color: var(--color-danger);
    background: var(--color-surface);
}

.tidly-useful-link-remove:hover,
.tidly-useful-link-remove:focus-visible {
    border-color: var(--color-danger);
    background: var(--color-danger-bg);
}

.tidly-useful-link-remove[hidden] {
    display: none;
}

.tidly-add-link-button {
    min-height: 48px;
    margin-top: var(--space-4);
}

#onboarding-useful-links-hint {
    display: block;
    margin-top: var(--space-3);
    color: var(--color-text-secondary);
}

.tidly-choice-list {
    display: grid;
    gap: var(--space-3);
    max-width: 36rem;
    margin: 0;
    padding: 0;
    border: 0;
}

.tidly-choice-list label {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    min-height: 3.5rem;
    margin: 0;
    padding: var(--space-4);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface);
    cursor: pointer;
    transition: border-color var(--duration-fast) var(--ease-standard),
        background var(--duration-fast) var(--ease-standard),
        transform var(--duration-fast) var(--ease-standard);
}

.tidly-choice-list label:active {
    transform: scale(0.98);
}

.tidly-choice-list label:hover,
.tidly-choice-list label:has(input:checked) {
    border-color: var(--color-brand-500);
    background: var(--color-brand-50);
}

.tidly-choice-list label:has(input:focus-visible) {
    outline: 3px solid var(--color-focus-ring);
    outline-offset: 2px;
}

.tidly-choice-list label[hidden] {
    display: none;
}

.tidly-choice-list input {
    width: 1.125rem;
    height: 1.125rem;
    flex: 0 0 auto;
    accent-color: var(--color-brand-600);
}

.tidly-choice-list-detailed span,
.tidly-choice-list-detailed strong,
.tidly-choice-list-detailed small {
    display: block;
}

.tidly-choice-list-detailed .tidly-goal-choice-icon {
    display: flex;
    width: 1.75rem;
    flex: 0 0 1.75rem;
    align-items: center;
    align-self: center;
    justify-content: center;
    color: var(--color-text-secondary);
    font-size: var(--text-lg);
    transition: color var(--duration-fast) var(--ease-standard);
}

.tidly-choice-list-detailed label:hover .tidly-goal-choice-icon,
.tidly-choice-list-detailed label:has(input:checked) .tidly-goal-choice-icon {
    color: var(--color-brand-700);
}

.tidly-choice-list-detailed small,
.tidly-choice-list label small {
    margin-top: var(--space-1);
    color: var(--color-text-secondary);
    font-size: var(--text-sm);
    font-weight: 400;
}

.tidly-onboarding-consequence {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
    max-width: 36rem;
    margin: var(--space-4) 0 0;
    color: var(--color-text-muted);
    font-size: var(--text-sm);
}

.tidly-onboarding-consequence i {
    margin-top: 0.25rem;
    color: var(--color-brand-700);
}

.tidly-checkbox-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-2) var(--space-4);
    border: 0;
}

.tidly-checkbox-grid legend {
    grid-column: 1 / -1;
    margin-bottom: var(--space-2);
    color: var(--color-ink);
    font-size: var(--text-sm);
    font-weight: 700;
}

.tidly-checkbox-grid label {
    display: flex;
    min-height: 48px;
    align-items: center;
    gap: var(--space-2);
    margin: 0;
    color: var(--color-text);
}

.tidly-checkbox-grid input {
    width: 1.25rem;
    height: 1.25rem;
    flex: 0 0 auto;
    accent-color: var(--color-brand-600);
}

.tidly-postcode-picker {
    display: grid;
    gap: var(--space-4);
    max-width: 42rem;
}

.tidly-postcode-results {
    overflow: hidden;
    max-height: 20rem;
    overflow-y: auto;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface);
}

.tidly-postcode-results button {
    display: flex;
    width: 100%;
    min-height: 52px;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding: var(--space-2) var(--space-4);
    border: 0;
    border-bottom: 1px solid var(--color-border);
    background: transparent;
    color: var(--color-text);
    text-align: left;
}

.tidly-postcode-results button:last-child {
    border-bottom: 0;
}

.tidly-postcode-results button:hover,
.tidly-postcode-results button:focus-visible {
    background: var(--color-surface-subtle);
}

.tidly-postcode-results button span,
.tidly-postcode-chip > span {
    display: flex;
    align-items: baseline;
    gap: var(--space-2);
}

.tidly-postcode-results button strong,
.tidly-postcode-chip strong {
    color: var(--color-ink);
}

.tidly-postcode-results button i {
    color: var(--color-brand-700);
}

.tidly-postcode-selection-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    color: var(--color-ink);
    font-size: var(--text-sm);
}

.tidly-postcode-selection-heading span {
    color: var(--color-text-secondary);
    font-weight: 500;
}

.tidly-postcode-selected {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-2);
}

.tidly-postcode-chip {
    display: flex;
    min-width: 0;
    min-height: 52px;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    padding-left: var(--space-3);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface);
    color: var(--color-text);
}

.tidly-postcode-chip > span {
    min-width: 0;
    overflow: hidden;
}

.tidly-postcode-city {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tidly-postcode-chip button {
    width: 48px;
    height: 48px;
    flex: 0 0 48px;
    border: 0;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--color-text-secondary);
}

.tidly-postcode-chip button:hover,
.tidly-postcode-chip button:focus-visible {
    background: var(--color-surface-subtle);
    color: var(--color-ink);
}

.tidly-postcode-empty,
.tidly-postcode-status {
    margin: 0;
    padding: var(--space-3);
    color: var(--color-text-secondary);
    font-size: var(--text-sm);
}

.tidly-postcode-status {
    padding: 0;
}

.tidly-postcode-toggle {
    width: 100%;
    min-height: 48px;
}

.tidly-schedule-mode {
    display: flex;
    max-width: 42rem;
    min-height: 4.5rem;
    align-items: center;
    gap: var(--space-4);
    margin-bottom: var(--space-6);
    padding: var(--space-4);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface-subtle);
    cursor: pointer;
}

.tidly-schedule-mode:hover {
    border-color: var(--color-border-strong);
}

.tidly-schedule-mode:has(input:checked) {
    border-color: var(--color-brand-200);
    background: var(--color-brand-50);
}

.tidly-schedule-mode span,
.tidly-schedule-mode strong {
    display: block;
}

.tidly-schedule-mode input,
.tidly-working-hours-day input {
    position: relative;
    width: 2.75rem;
    height: 1.5rem;
    flex: 0 0 2.75rem;
    margin: 0;
    appearance: none;
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-pill);
    background: var(--color-border);
    cursor: pointer;
}

.tidly-schedule-mode input::after,
.tidly-working-hours-day input::after {
    position: absolute;
    top: 0.1875rem;
    left: 0.1875rem;
    width: 1rem;
    height: 1rem;
    border-radius: var(--radius-pill);
    background: var(--color-surface);
    box-shadow: var(--shadow-sm);
    content: "";
    transition: transform var(--duration-normal) var(--ease-standard);
}

.tidly-schedule-mode input:checked,
.tidly-working-hours-day input:checked {
    border-color: var(--color-brand-600);
    background: var(--color-brand-600);
}

.tidly-schedule-mode input:checked::after,
.tidly-working-hours-day input:checked::after {
    transform: translateX(1.25rem);
}

.tidly-working-hours {
    display: grid;
    max-width: 42rem;
    overflow: hidden;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface);
}

.tidly-working-hours-heading,
.tidly-working-hours-row {
    display: grid;
    grid-template-columns: minmax(9rem, 1fr) minmax(16rem, auto);
    gap: var(--space-4);
}

.tidly-working-hours-heading {
    padding: var(--space-2) var(--space-4);
    border-bottom: 1px solid var(--color-border);
    color: var(--color-text-muted);
    background: var(--color-surface-subtle);
    font-size: var(--text-sm);
    font-weight: 700;
}

.tidly-working-hours-row {
    min-height: 4.75rem;
    align-items: center;
    padding: var(--space-3) var(--space-4);
    border-bottom: 1px solid var(--color-border);
}

.tidly-working-hours-row:last-child {
    border-bottom: 0;
}

.tidly-working-hours-row:has(.tidly-working-hours-day input:not(:checked)) {
    background: var(--color-surface-subtle);
}

.tidly-working-hours-day {
    display: flex;
    min-height: 48px;
    align-items: center;
    gap: var(--space-3);
    margin: 0;
    color: var(--color-ink);
    cursor: pointer;
}

.tidly-working-hours-times {
    display: grid;
    grid-template-columns: minmax(6.5rem, 1fr) auto minmax(6.5rem, 1fr);
    align-items: center;
    gap: var(--space-2);
}

.tidly-working-hours-times input {
    min-width: 0;
    min-height: 48px;
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-md);
    color: var(--color-text);
    background: var(--color-surface);
    font-variant-numeric: tabular-nums;
}

.tidly-working-hours-closed {
    color: var(--color-text-muted);
    text-align: right;
    font-size: var(--text-sm);
    font-weight: 700;
}

.tidly-split-hours {
    display: grid;
    gap: var(--space-8);
}

.tidly-split-hours[hidden],
.tidly-working-hours[hidden],
.tidly-working-hours-times[hidden],
.tidly-working-hours-closed[hidden] {
    display: none;
}

.tidly-split-hours h3 {
    margin: 0 0 var(--space-3);
    color: var(--color-ink);
    font-size: var(--text-lg);
}

.tidly-conditional-fields {
    max-width: 36rem;
    margin-top: var(--space-4);
    padding: var(--space-4);
    border-left: 2px solid var(--color-brand-200);
    background: var(--color-surface-subtle);
}

.tidly-conditional-fields[hidden] {
    display: none;
}

.tidly-onboarding-success {
    max-width: 42rem;
    margin: 0 auto var(--space-8);
    text-align: center;
}

.tidly-onboarding-success-icon {
    display: inline-flex;
    width: 72px;
    height: 72px;
    align-items: center;
    justify-content: center;
    margin-bottom: var(--space-4);
    border: 1px solid rgb(22 163 74 / 22%);
    border-radius: var(--radius-lg);
    color: var(--color-status-success);
    background: var(--color-success-bg);
    font-size: var(--text-2xl);
}

.tidly-onboarding-success-label {
    margin: 0 0 var(--space-2);
    color: var(--color-status-success);
    font-size: var(--text-sm);
    font-weight: 700;
}

.tidly-onboarding-success h2 {
    margin: 0;
    color: var(--color-primary-base);
    font-size: clamp(var(--text-2xl), 4vw, 2rem);
    font-weight: 700;
    letter-spacing: -0.025em;
    line-height: var(--leading-heading);
}

.tidly-onboarding-success > p:last-child {
    max-width: 36rem;
    margin: var(--space-3) auto 0;
    color: var(--color-text-secondary);
    line-height: var(--leading-body);
}

.tidly-success-activation {
    max-width: 42rem;
    margin: 0 auto;
    padding: var(--space-4);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-surface-subtle);
}

.tidly-success-activation .tidly-automation-toggle {
    background: var(--color-surface);
}

.tidly-calculation-note {
    margin: var(--space-4) 0 0;
    color: var(--color-text-muted);
    font-size: var(--text-sm);
}

.tidly-service-booking-fields {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-4);
}

.tidly-service-booking-fields[hidden] {
    display: none;
}

.tidly-provider-list {
    display: grid;
    gap: var(--space-3);
    margin-bottom: var(--space-6);
}

.tidly-provider-option {
    display: grid;
    grid-template-columns: 2.5rem minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--space-3);
    width: 100%;
    min-height: 4.25rem;
    padding: var(--space-3) var(--space-4);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    color: var(--color-text);
    background: var(--color-surface);
    text-align: left;
}

.tidly-provider-option:hover {
    border-color: var(--color-brand-500);
}

.tidly-provider-option > i:first-child {
    color: var(--color-brand-700);
    font-size: var(--text-lg);
    text-align: center;
}

.tidly-provider-option span,
.tidly-provider-option strong,
.tidly-provider-option small {
    display: block;
}

.tidly-provider-option small {
    margin-top: var(--space-1);
    color: var(--color-text-muted);
}

.tidly-activation-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    margin-top: var(--space-4);
}

.tidly-activation-actions p {
    margin: 0;
    color: var(--color-text-secondary);
    font-size: var(--text-sm);
}

.tidly-onboarding-actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--space-3);
    margin-top: var(--space-12);
    padding-top: var(--space-6);
    border-top: 1px solid var(--color-border);
}

.tidly-onboarding-actions #onboarding-back,
.tidly-onboarding-actions #onboarding-return-overview {
    grid-column: 1;
    grid-row: 1;
    justify-self: start;
}

.tidly-onboarding-actions #onboarding-next {
    grid-column: 2;
    grid-row: 1;
    justify-self: end;
    margin: 0;
}

.tidly-onboarding-actions #onboarding-next:focus-visible {
    outline-width: 4px;
    outline-offset: 4px;
    box-shadow: 0 0 0 4px rgb(234 88 12 / 16%);
}

.tidly-onboarding-overview {
    overflow: hidden;
}

.tidly-onboarding-overview > header {
    padding: clamp(var(--space-6), 5vw, var(--space-8));
    border-bottom: 1px solid var(--color-border);
}

.tidly-onboarding-overview h2 {
    margin: var(--space-2) 0;
    color: var(--color-ink);
    font-size: var(--text-2xl);
}

.tidly-onboarding-overview header > p:last-child {
    margin: 0;
    color: var(--color-text-secondary);
}

.tidly-status-line {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin: 0;
    color: var(--color-text-secondary);
    font-size: var(--text-sm);
}

.tidly-status-line > span {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: var(--radius-pill);
    background: var(--color-brand-600);
}

.tidly-overview-rows article {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-6);
    padding: var(--space-6) clamp(var(--space-6), 5vw, var(--space-8));
    border-bottom: 1px solid var(--color-border);
}

.tidly-overview-rows article:last-child {
    border-bottom: 0;
}

.tidly-overview-rows strong {
    color: var(--color-ink);
}

.tidly-overview-rows p {
    margin: var(--space-1) 0 0;
    color: var(--color-text-secondary);
    font-size: var(--text-sm);
}

.tidly-overview-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: var(--space-2);
}

@media (max-width: 47.98rem) {
    .tidly-checkbox-grid {
        grid-template-columns: 1fr;
    }

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

    .tidly-working-hours-row {
        grid-template-columns: 1fr;
        gap: var(--space-2);
    }

    .tidly-working-hours-heading {
        display: none;
    }

    .tidly-working-hours-times {
        grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    }

    .tidly-working-hours-closed {
        text-align: left;
    }

    .tidly-useful-link-row {
        grid-template-columns: minmax(0, 1fr) 48px;
    }

    .tidly-useful-link-row .tidly-field {
        grid-column: 1 / -1;
    }

    .tidly-useful-link-remove {
        grid-column: 2;
        justify-self: end;
    }

    .tidly-onboarding-page {
        scroll-margin-top: 68px;
        padding-block: var(--space-6) var(--space-12);
    }

    .tidly-onboarding-header,
    .tidly-form-grid {
        grid-template-columns: 1fr;
    }

    .tidly-onboarding-header {
        gap: var(--space-4);
    }

    .tidly-onboarding-surface {
        min-height: 0;
        padding: var(--space-6);
        border-radius: var(--radius-lg);
    }

.tidly-activation-actions {
        align-items: stretch;
        flex-direction: column;
    }

.tidly-activation-actions .tidly-button {
        width: 100%;
    }

}

@media (forced-colors: active) {
    .tidly-schedule-mode input,
    .tidly-working-hours-day input {
        width: 1.5rem;
        height: 1.5rem;
        flex-basis: 1.5rem;
        appearance: auto;
    }

    .tidly-schedule-mode input::after,
    .tidly-working-hours-day input::after {
        display: none;
    }
}

@media (max-width: 29.98rem) {
    .tidly-onboarding-surface {
        padding: var(--space-4);
    }

    .tidly-onboarding-actions {
        gap: var(--space-2);
    }

    .tidly-overview-rows .tidly-button {
        width: 100%;
    }

    .tidly-onboarding-actions .tidly-button {
        width: auto;
        padding-inline: var(--space-3);
    }

    .tidly-overview-rows article {
        align-items: stretch;
        flex-direction: column;
    }
}
/* ============================================================
   Internal bookings
   ============================================================ */
.tidly-bookings-surface {
    overflow: hidden;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-surface);
    box-shadow: var(--shadow-sm);
}

.tidly-bookings-surface-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    padding: var(--space-5);
    border-bottom: 1px solid var(--color-border);
}

.tidly-bookings-surface-header p,
.tidly-bookings-surface-header h2 {
    margin: 0;
}

.tidly-bookings-surface-header h2 {
    margin-top: var(--space-1);
    font-family: var(--font-display);
    font-size: var(--text-xl);
    color: var(--color-primary-base);
}

.tidly-bookings-loading {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin: 0;
    padding: var(--space-5);
    color: var(--color-text-secondary);
}

.tidly-booking-day {
    padding: var(--space-5);
    border-bottom: 1px solid var(--color-border);
}

.tidly-booking-day:last-child {
    border-bottom: 0;
}

.tidly-booking-day > h3 {
    margin: 0 0 var(--space-3);
    font-size: var(--text-sm);
    font-weight: 700;
    color: var(--color-primary-base);
}

.tidly-booking-day > div,
.tidly-overview-bookings-list {
    display: grid;
    gap: var(--space-3);
}

.tidly-booking-card {
    display: grid;
    grid-template-columns: 7rem minmax(0, 1fr);
    gap: var(--space-4);
    padding: var(--space-4);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface-card, #FFFFFF);
}

.tidly-booking-time {
    font-family: var(--font-display);
    font-size: var(--text-lg);
    font-weight: 700;
    color: var(--color-primary-base);
}

.tidly-booking-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-3);
}

.tidly-booking-type {
    margin: 0 0 2px;
    font-size: var(--text-xs);
    font-weight: 700;
    color: var(--color-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.tidly-booking-heading h3 {
    margin: 0;
    font-size: var(--text-base);
    color: var(--color-primary-base);
}

.tidly-booking-confirmed {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    color: var(--color-status-success);
    font-size: var(--text-xs);
    font-weight: 700;
    white-space: nowrap;
}

.tidly-booking-summary,
.tidly-booking-detail {
    margin: var(--space-2) 0 0;
    color: var(--color-text-secondary);
    font-size: var(--text-sm);
    line-height: 1.5;
}

.tidly-booking-detail {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
    color: var(--color-primary-base);
}

.tidly-booking-detail i {
    width: 1rem;
    margin-top: 0.2em;
    color: var(--color-primary-action);
}

.tidly-booking-contacts {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-top: var(--space-3);
}

.tidly-booking-contacts a {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    min-height: 48px;
    padding: 0 var(--space-3);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    color: var(--color-primary-base);
    font-size: var(--text-sm);
    font-weight: 500;
    text-decoration: none;
}

.tidly-booking-contacts a:hover {
    border-color: var(--color-primary-action);
    color: var(--color-primary-action);
}

.tidly-booking-card.is-compact {
    grid-template-columns: 6rem minmax(0, 1fr);
    padding: var(--space-3);
}

.tidly-booking-card.is-compact .tidly-booking-confirmed {
    display: none;
}

.tidly-bookings-empty,
.tidly-bookings-message {
    display: grid;
    justify-items: center;
    gap: var(--space-2);
    padding: clamp(var(--space-6), 8vw, var(--space-10));
    text-align: center;
    color: var(--color-text-secondary);
}

.tidly-bookings-empty > i,
.tidly-bookings-message > i {
    font-size: 2rem;
    color: var(--color-primary-action);
}

.tidly-bookings-empty h3,
.tidly-bookings-message strong,
.tidly-bookings-empty p,
.tidly-bookings-message p {
    margin: 0;
}

.tidly-bookings-empty h3,
.tidly-bookings-message strong {
    color: var(--color-primary-base);
}

.tidly-bookings-empty.is-compact {
    display: flex;
    justify-content: flex-start;
    padding: 0;
    text-align: left;
}

.tidly-bookings-empty.is-compact > i {
    font-size: var(--text-lg);
}

.tidly-bookings-message.is-error > i {
    color: var(--color-primary-action);
}

@media (max-width: 575.98px) {
    .tidly-bookings-surface-header,
    .tidly-booking-day {
        padding: var(--space-4);
    }

    .tidly-booking-card,
    .tidly-booking-card.is-compact {
        grid-template-columns: 1fr;
        gap: var(--space-2);
    }

    .tidly-booking-heading {
        display: grid;
    }

    .tidly-booking-confirmed {
        justify-self: start;
    }

    .tidly-booking-contacts {
        display: grid;
    }

    .tidly-booking-contacts a {
        overflow-wrap: anywhere;
    }
}

/* ============================================================
   First-login welcome refinement
   ============================================================ */
.tidly-welcome-page {
    min-height: calc(100vh - var(--product-toolbar-height));
    padding: var(--space-8) var(--page-gutter) var(--space-16);
    background: var(--color-bg-main);
}

.tidly-welcome-container {
    width: min(100%, var(--app-max));
    max-width: none;
    padding: 0;
}

.tidly-welcome-surface {
    display: grid;
    grid-template-columns: 1fr;
    overflow: hidden;
    align-items: stretch;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    background: var(--color-surface);
    box-shadow: none;
}

.tidly-welcome-copy {
    display: grid;
    align-content: center;
    min-width: 0;
    padding: clamp(var(--space-6), 6vw, var(--space-12));
    background:
        linear-gradient(145deg, rgb(15 23 42 / 3%), transparent 58%),
        var(--color-surface);
}

.tidly-welcome-label {
    display: inline-flex;
    width: fit-content;
    align-items: center;
    gap: var(--space-2);
    margin: 0 0 var(--space-4);
    padding: var(--space-1) var(--space-2);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    color: var(--color-primary-base);
    background: var(--color-surface-subtle);
    font-size: var(--text-xs);
    font-weight: 700;
}

.tidly-welcome-label i {
    color: var(--color-primary-action);
}

.tidly-welcome-copy h1 {
    max-width: 15ch;
    margin: 0 0 var(--space-4);
    color: var(--color-primary-base);
    font-family: var(--font-display);
    font-size: clamp(var(--text-3xl), 5vw, 3.5rem);
    font-weight: 700;
    letter-spacing: -0.045em;
    line-height: 1.05;
}

.tidly-welcome-lead {
    max-width: 58ch;
    margin: 0;
    color: var(--color-text-secondary);
    font-size: var(--text-lg);
    line-height: 1.6;
}

.tidly-welcome-actions {
    margin-top: var(--space-8);
}

.tidly-welcome-actions .tidly-button-primary {
    min-width: 12rem;
    min-height: 56px;
    justify-content: center;
    border-color: var(--color-primary-action);
    color: #FFFFFF;
    background: var(--color-primary-action);
    box-shadow: none;
}

.tidly-welcome-actions .tidly-button-primary:hover,
.tidly-welcome-actions .tidly-button-primary:focus-visible {
    border-color: #C2410C;
    color: #FFFFFF;
    background: #C2410C;
}

.tidly-welcome-reassurance {
    display: flex;
    width: fit-content;
    max-width: 36rem;
    align-items: center;
    gap: var(--space-2);
    margin: var(--space-4) 0 0;
    padding: var(--space-3);
    border: 1px solid rgb(22 163 74 / 18%);
    border-radius: var(--radius-md);
    color: var(--color-primary-base);
    background: rgb(22 163 74 / 6%);
    font-size: var(--text-sm);
    font-weight: 500;
}

.tidly-welcome-reassurance i {
    flex: 0 0 auto;
    margin: 0;
    color: var(--color-status-success);
}

.tidly-welcome-path {
    position: relative;
    display: grid;
    align-content: center;
    gap: var(--space-4);
    padding: clamp(var(--space-6), 5vw, var(--space-10));
    border-top: 1px solid var(--color-border);
    background: var(--color-surface-subtle);
}

.tidly-welcome-path::before,
.tidly-welcome-path::after {
    content: none;
}

.tidly-welcome-path-header p,
.tidly-welcome-path-header h2 {
    margin: 0;
}

.tidly-welcome-path-header p {
    color: var(--color-primary-action);
    font-size: var(--text-xs);
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.tidly-welcome-path-header h2 {
    margin-top: var(--space-1);
    color: var(--color-primary-base);
    font-family: var(--font-display);
    font-size: var(--text-xl);
    font-weight: 700;
}

.tidly-welcome-steps {
    display: grid;
    gap: var(--space-3);
}

.tidly-welcome-path .tidly-welcome-steps article {
    position: relative;
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr);
    align-items: start;
    gap: var(--space-3);
    padding: var(--space-4);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-surface);
}

.tidly-welcome-step-marker {
    display: grid;
    width: 40px;
    height: 40px;
    place-items: center;
    border: 1px solid rgb(234 88 12 / 24%);
    border-radius: var(--radius-md);
    color: var(--color-primary-action);
    background: rgb(234 88 12 / 7%);
    font-size: var(--text-sm);
    font-weight: 700;
}

.tidly-welcome-step-icon {
    display: grid;
    width: 36px;
    height: 36px;
    place-items: center;
    margin-bottom: var(--space-3);
    border-radius: var(--radius-md);
    color: var(--color-primary-base);
    background: var(--color-surface-subtle);
}

.tidly-welcome-path .tidly-welcome-steps h3 {
    margin: 0 0 var(--space-1);
    color: var(--color-primary-base);
    font-family: var(--font-display);
    font-size: var(--text-base);
    font-weight: 700;
    line-height: 1.35;
}

.tidly-welcome-path .tidly-welcome-steps p {
    max-width: 46ch;
    margin: 0;
    color: var(--color-text-secondary);
    font-size: var(--text-sm);
    line-height: 1.55;
}

.tidly-welcome-path-note {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
    padding: var(--space-3);
    border-radius: var(--radius-md);
    color: var(--color-text-secondary);
    background: rgb(255 255 255 / 65%);
    font-size: var(--text-sm);
}

.tidly-welcome-path-note i {
    margin-top: 0.2em;
    color: var(--color-primary-action);
}

.tidly-welcome-path-note p {
    margin: 0;
}

@media (min-width: 64rem) {
    .tidly-welcome-surface {
        grid-template-columns: minmax(0, 1.05fr) minmax(24rem, 0.95fr);
    }

    .tidly-welcome-path {
        border-top: 0;
        border-left: 1px solid var(--color-border);
    }
}

@media (max-width: 47.98rem) {
    .tidly-welcome-page {
        padding-block: var(--space-6) var(--space-12);
    }

    .tidly-welcome-copy,
    .tidly-welcome-path {
        padding: var(--space-4);
    }

    .tidly-welcome-copy h1 {
        max-width: none;
    }

    .tidly-welcome-actions,
    .tidly-welcome-actions .tidly-button {
        width: 100%;
    }

    .tidly-welcome-reassurance {
        width: 100%;
    }
}

@media (max-width: 29.98rem) {
    .tidly-welcome-copy,
    .tidly-welcome-path {
        padding: var(--space-4);
    }

    .tidly-welcome-path .tidly-welcome-steps article {
        grid-template-columns: 36px minmax(0, 1fr);
        padding: var(--space-3);
    }

    .tidly-welcome-step-marker {
        width: 36px;
        height: 36px;
    }

    .tidly-welcome-step-icon {
        display: none;
    }
}

.tidly-welcome-comparison {
    margin-top: var(--space-10);
}

.tidly-welcome-comparison-header {
    margin-bottom: var(--space-4);
    padding-top: var(--space-6);
    border-top: 1px solid var(--color-border);
}

.tidly-welcome-comparison-header p,
.tidly-welcome-comparison-header h2 {
    margin: 0;
}

.tidly-welcome-comparison-header p {
    color: var(--color-text-secondary);
    font-size: var(--text-xs);
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.tidly-welcome-comparison-header h2 {
    margin-top: var(--space-1);
    color: var(--color-primary-base);
    font-family: var(--font-display);
    font-size: var(--text-xl);
    font-weight: 700;
}

.tidly-welcome-legacy-surface {
    display: grid;
    overflow: hidden;
    align-items: center;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    background: var(--color-surface);
    box-shadow: var(--shadow-sm);
}

.tidly-welcome-legacy-copy {
    min-width: 0;
    padding: clamp(var(--space-8), 6vw, var(--space-16));
}

.tidly-welcome-legacy-copy .eyebrow::before {
    width: var(--space-2);
    height: var(--space-2);
    border-radius: 50%;
    background: var(--color-brand-600);
    content: "";
}

.tidly-welcome-legacy-copy h2 {
    max-width: 14ch;
    margin: var(--space-3) 0 var(--space-4);
    color: var(--color-ink);
    font-family: var(--font-display);
    font-size: var(--text-3xl);
    font-weight: 700;
    letter-spacing: -0.045em;
    line-height: var(--leading-tight);
}

.tidly-welcome-legacy-lead {
    max-width: 59ch;
    margin: 0;
    color: var(--color-text-secondary);
    font-size: var(--text-lg);
}

.tidly-welcome-legacy-actions {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-top: var(--space-8);
}

.tidly-welcome-legacy-actions .tidly-button-primary {
    min-height: 56px;
    padding-inline: var(--space-6);
    font-size: var(--text-base);
    box-shadow: var(--shadow-sm);
}

.tidly-welcome-legacy-reassurance {
    display: flex;
    max-width: 34rem;
    align-items: flex-start;
    gap: var(--space-2);
    margin: var(--space-4) 0 0;
    color: var(--color-text-secondary);
    font-size: var(--text-sm);
}

.tidly-welcome-legacy-reassurance i {
    margin-top: var(--space-1);
    color: var(--color-success);
}

.tidly-welcome-legacy-path {
    position: relative;
    display: grid;
    align-self: stretch;
    align-content: center;
    gap: var(--space-1);
    padding: clamp(var(--space-6), 5vw, var(--space-12));
    border-top: 1px solid var(--color-border);
    background: var(--color-surface-subtle);
}

.tidly-welcome-legacy-path::before {
    position: absolute;
    z-index: var(--layer-base);
    top: calc(clamp(var(--space-6), 5vw, var(--space-12)) + var(--space-6));
    bottom: calc(clamp(var(--space-6), 5vw, var(--space-12)) + var(--space-6));
    left: calc(clamp(var(--space-6), 5vw, var(--space-12)) + var(--space-6));
    border-left: 1px solid var(--color-border-strong);
    content: "";
}

.tidly-welcome-legacy-path::after {
    position: absolute;
    z-index: 2;
    bottom: calc(clamp(var(--space-6), 5vw, var(--space-12)) + var(--space-6) - var(--space-1));
    left: calc(clamp(var(--space-6), 5vw, var(--space-12)) + var(--space-6) - var(--space-1));
    width: var(--space-2);
    height: var(--space-2);
    border-radius: 50%;
    background: var(--color-brand-600);
    content: "";
}

.tidly-welcome-legacy-path article {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: var(--space-12) minmax(0, 1fr);
    align-items: flex-start;
    gap: var(--space-4);
    padding-block: var(--space-4);
}

.tidly-welcome-legacy-step-marker {
    display: grid;
    width: var(--space-12);
    height: var(--space-12);
    place-items: center;
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-md);
    color: var(--color-ink);
    background: var(--color-surface);
    font-size: var(--text-sm);
    font-weight: 700;
}

.tidly-welcome-legacy-path h3 {
    margin: 0 0 var(--space-1);
    color: var(--color-ink);
    font-size: var(--text-lg);
    font-weight: 500;
}

.tidly-welcome-legacy-path p {
    max-width: 43ch;
    margin: 0;
    color: var(--color-text-secondary);
    font-size: var(--text-sm);
}

@media (min-width: 64rem) {
    .tidly-welcome-legacy-surface {
        grid-template-columns: minmax(0, 1.08fr) minmax(22rem, 0.92fr);
    }

    .tidly-welcome-legacy-path {
        border-top: 0;
        border-left: 1px solid var(--color-border);
    }
}

@media (max-width: 47.98rem) {
    .tidly-welcome-legacy-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .tidly-welcome-legacy-actions .tidly-button {
        width: 100%;
    }
}

@media (max-width: 29.98rem) {
    .tidly-welcome-legacy-copy h2 {
        max-width: none;
    }

    .tidly-welcome-legacy-path article {
        gap: var(--space-3);
    }
}

/* ============================================================
   Phone meetings dashboard refinement
   ============================================================ */
.tidly-calendar-page {
    display: grid;
    max-width: none;
    gap: var(--space-6);
}

.tidly-calendar-page-header {
    margin-bottom: 0;
    padding: clamp(var(--space-4), 3vw, var(--space-6));
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    background:
        linear-gradient(135deg, rgb(15 23 42 / 3%), transparent 55%),
        var(--color-surface);
}

.tidly-calendar-page-header .tidly-calendar-page-label {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    margin: 0 0 var(--space-3);
    padding: var(--space-1) var(--space-2);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    color: var(--color-primary-base);
    background: var(--color-surface-subtle);
    font-size: var(--text-xs);
    font-weight: 700;
}

.tidly-calendar-page-label i {
    color: var(--color-primary-action);
}

.tidly-calendar-page .tidly-bookings-surface {
    overflow: hidden;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    background: var(--color-surface);
    box-shadow: none;
}

.tidly-calendar-page .tidly-bookings-surface-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-6);
    padding: clamp(var(--space-4), 3vw, var(--space-6));
    border-bottom: 1px solid var(--color-border);
    background: var(--color-surface);
}

.tidly-bookings-surface-heading {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    min-width: 0;
}

.tidly-bookings-surface-heading > div {
    min-width: 0;
}

.tidly-bookings-surface-icon {
    display: grid;
    flex: 0 0 48px;
    width: 48px;
    height: 48px;
    place-items: center;
    border-radius: var(--radius-md);
    color: var(--color-primary-base);
    background: var(--color-surface-subtle);
    font-size: var(--text-lg);
}

.tidly-calendar-page .tidly-ai-label {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    color: var(--color-ai-accent);
    font-size: var(--text-xs);
    font-weight: 700;
}

.tidly-calendar-page .tidly-bookings-surface-header h2 {
    margin-top: var(--space-1);
    color: var(--color-primary-base);
    font-family: var(--font-display);
    font-size: var(--text-xl);
    font-weight: 700;
}

.tidly-calendar-page .tidly-bookings-surface-description {
    max-width: 58ch;
    margin-top: var(--space-2);
    color: var(--color-text-secondary);
    font-size: var(--text-sm);
    line-height: 1.5;
}

.tidly-bookings-surface-actions {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    flex: 0 0 auto;
}

.tidly-bookings-count {
    display: inline-flex;
    min-height: 36px;
    align-items: center;
    padding: 0 var(--space-3);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    color: var(--color-primary-base);
    background: var(--color-surface-subtle);
    font-size: var(--text-sm);
    font-weight: 700;
    white-space: nowrap;
}

.tidly-calendar-page .tidly-bookings-surface-header .btn {
    min-height: 48px;
    white-space: nowrap;
}

.tidly-calendar-page #calendar-bookings-content {
    background: var(--color-bg-main);
}

.tidly-calendar-page .tidly-bookings-loading {
    padding: var(--space-6);
}

.tidly-calendar-page .tidly-booking-day {
    padding: var(--space-6);
    border-bottom: 1px solid var(--color-border);
}

.tidly-booking-day-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    margin-bottom: var(--space-3);
}

.tidly-calendar-page .tidly-booking-day-header h3 {
    margin: 0;
    color: var(--color-primary-base);
    font-family: var(--font-display);
    font-size: var(--text-base);
    font-weight: 700;
}

.tidly-booking-day-header > span {
    color: var(--color-text-secondary);
    font-size: var(--text-sm);
    font-weight: 500;
    white-space: nowrap;
}

.tidly-calendar-page .tidly-booking-day > div {
    gap: var(--space-3);
}

.tidly-calendar-page .tidly-booking-card {
    grid-template-columns: 9rem minmax(0, 1fr);
    gap: var(--space-6);
    padding: var(--space-4);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-surface);
    transition: border-color 160ms ease;
}

.tidly-calendar-page .tidly-booking-card:hover {
    border-color: rgb(15 23 42 / 22%);
}

.tidly-calendar-page .tidly-booking-time {
    display: flex;
    align-items: center;
    align-self: start;
    gap: var(--space-2);
    min-height: 48px;
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-md);
    color: var(--color-primary-base);
    background: var(--color-surface-subtle);
    font-family: var(--font-display);
    font-size: var(--text-base);
    font-weight: 700;
    white-space: nowrap;
}

.tidly-booking-time i {
    color: var(--color-primary-action);
    font-size: var(--text-sm);
}

.tidly-calendar-page .tidly-booking-heading {
    align-items: center;
}

.tidly-calendar-page .tidly-booking-type {
    margin-bottom: var(--space-1);
    color: var(--color-text-secondary);
}

.tidly-calendar-page .tidly-booking-heading h3 {
    color: var(--color-primary-base);
    font-family: var(--font-display);
    font-size: var(--text-lg);
    font-weight: 700;
}

.tidly-calendar-page .tidly-booking-confirmed {
    min-height: 32px;
    padding: 0 var(--space-2);
    border: 1px solid rgb(22 163 74 / 20%);
    border-radius: var(--radius-md);
    color: var(--color-status-success);
    background: rgb(22 163 74 / 7%);
}

.tidly-calendar-page .tidly-booking-summary {
    max-width: 70ch;
    margin-top: var(--space-3);
    color: var(--color-primary-base);
}

.tidly-calendar-page .tidly-booking-detail {
    margin-top: var(--space-3);
}

.tidly-calendar-page .tidly-booking-contacts {
    margin-top: var(--space-4);
}

.tidly-calendar-page .tidly-booking-contacts a {
    min-height: 48px;
    border-color: var(--color-border);
    background: var(--color-surface);
}

.tidly-calendar-page .tidly-booking-contacts a:hover,
.tidly-calendar-page .tidly-booking-contacts a:focus-visible {
    border-color: var(--color-primary-action);
    color: var(--color-primary-action);
    text-decoration: none;
}

.tidly-calendar-page .tidly-bookings-empty,
.tidly-calendar-page .tidly-bookings-message {
    background: var(--color-surface);
}

.tidly-calendar-page .tidly-bookings-message .btn {
    min-height: 48px;
}

@media (max-width: 47.98rem) {
    .tidly-calendar-page .tidly-bookings-surface-header {
        align-items: stretch;
        flex-direction: column;
        gap: var(--space-4);
    }

    .tidly-bookings-surface-actions {
        justify-content: space-between;
    }

    .tidly-calendar-page .tidly-booking-day {
        padding: var(--space-4);
    }

    .tidly-calendar-page .tidly-booking-card {
        grid-template-columns: 1fr;
        gap: var(--space-3);
    }

    .tidly-calendar-page .tidly-booking-time {
        width: fit-content;
    }
}

@media (max-width: 29.98rem) {
    .tidly-bookings-surface-heading {
        align-items: flex-start;
    }

    .tidly-bookings-surface-icon {
        display: none;
    }

    .tidly-bookings-surface-actions {
        display: grid;
        grid-template-columns: 1fr;
    }

    .tidly-bookings-count {
        justify-content: center;
    }

    .tidly-calendar-page .tidly-bookings-surface-header .btn {
        width: 100%;
    }

    .tidly-booking-day-header {
        align-items: flex-start;
        flex-direction: column;
        gap: var(--space-1);
    }

    .tidly-calendar-page .tidly-booking-contacts {
        display: grid;
    }
}

/* ============================================================
   Overview dashboard refinement
   ============================================================ */
.tidly-overview-page {
    display: grid;
    max-width: none;
    gap: var(--space-6);
}

.tidly-overview-page-header,
.tidly-messages-page-header {
    margin-bottom: 0;
}

.tidly-overview-page-header {
    padding: clamp(var(--space-4), 3vw, var(--space-6));
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    background:
        linear-gradient(135deg, rgb(15 23 42 / 3%), transparent 55%),
        var(--color-surface);
}

.tidly-overview-page-header .tidly-overview-page-label {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    margin: 0 0 var(--space-3);
    padding: var(--space-1) var(--space-2);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    color: var(--color-primary-base);
    background: var(--color-surface-subtle);
    font-size: var(--text-xs);
    font-weight: 700;
}

.tidly-overview-page-header .tidly-overview-page-label i {
    color: var(--color-primary-action);
}

.tidly-overview-status-surface {
    display: grid;
    grid-template-columns: 1fr;
    overflow: hidden;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    background: var(--color-surface);
    box-shadow: none;
}

.tidly-overview-status-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-direction: row;
    gap: var(--space-6);
    min-height: 13rem;
    padding: clamp(var(--space-4), 4vw, var(--space-8));
}

.tidly-overview-status-copy {
    max-width: 44rem;
}

.tidly-overview-status-label {
    margin-bottom: var(--space-4);
}

.tidly-overview-status-icon {
    display: grid;
    width: 44px;
    height: 44px;
    place-items: center;
    border-radius: var(--radius-md);
    color: var(--color-text-secondary);
    background: var(--color-surface-subtle);
    font-size: var(--text-base);
}

.tidly-overview-status-icon.is-active {
    color: #FFFFFF;
    background: var(--color-status-success);
}

.tidly-overview-status-icon.is-attention,
.tidly-overview-status-icon.is-error {
    color: #FFFFFF;
    background: var(--color-primary-action);
}

.tidly-overview-status-label p {
    color: var(--color-primary-base);
    font-size: var(--text-sm);
}

.tidly-overview-status-copy h2 {
    margin-bottom: var(--space-2);
    color: var(--color-primary-base);
    font-family: var(--font-display);
    font-size: clamp(var(--text-xl), 3vw, var(--text-2xl));
}

.tidly-overview-status-copy > p:last-child {
    max-width: 58ch;
    color: var(--color-text-secondary);
    font-size: var(--text-base);
    line-height: 1.55;
}

.tidly-overview-status-header .btn {
    flex: 0 0 auto;
    width: auto;
    min-height: 48px;
    white-space: nowrap;
}

.tidly-overview-facts {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin: 0;
    padding: 0;
    border-top: 1px solid var(--color-border);
    border-left: 0;
    background: var(--color-surface-subtle);
}

.tidly-overview-facts > div {
    display: grid;
    align-content: start;
    gap: var(--space-2);
    min-width: 0;
    padding: var(--space-4);
}

.tidly-overview-facts > div + div {
    border-top: 0;
    border-left: 1px solid var(--color-border);
}

.tidly-overview-facts dt {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin: 0;
    color: var(--color-text-secondary);
    font-size: var(--text-sm);
    font-weight: 500;
}

.tidly-overview-fact-icon {
    display: grid;
    flex: 0 0 36px;
    width: 36px;
    height: 36px;
    place-items: center;
    border-radius: var(--radius-md);
    color: var(--color-primary-base);
    background: var(--color-surface);
}

.tidly-overview-facts .tidly-ai-label {
    color: var(--color-text-secondary);
}

.tidly-overview-facts .tidly-ai-label .tidly-overview-fact-icon {
    color: var(--color-ai-accent);
    background: rgb(37 99 235 / 7%);
}

.tidly-overview-facts dd {
    margin: 0;
    padding: 0;
    border: 0;
    color: var(--color-primary-base);
    font-family: var(--font-display);
    font-size: var(--text-lg);
    font-weight: 700;
    line-height: 1.35;
}

.tidly-overview-facts dd.is-positive {
    color: var(--color-status-success);
}

.tidly-overview-facts dd.is-warning,
.tidly-overview-facts dd.is-error {
    padding: 0;
    border: 0;
    color: var(--color-primary-action);
}

.tidly-overview-section-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--space-4);
    margin-top: var(--space-2);
}

.tidly-overview-section-header h2,
.tidly-overview-section-header p {
    margin: 0;
}

.tidly-overview-section-header h2 {
    color: var(--color-primary-base);
    font-family: var(--font-display);
    font-size: var(--text-xl);
    font-weight: 700;
}

.tidly-overview-section-header p {
    margin-top: var(--space-1);
    color: var(--color-text-secondary);
    font-size: var(--text-sm);
}

.tidly-overview-followup {
    display: grid;
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
    gap: var(--space-4);
    margin: 0;
    border: 0;
}

.tidly-overview-followup article {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr;
    align-items: start;
    gap: 0;
    min-width: 0;
    padding: 0;
    overflow: hidden;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-surface);
    box-shadow: none;
}

.tidly-overview-followup article > header {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin: 0;
    padding: var(--space-4);
    border-bottom: 1px solid var(--color-border);
    background: var(--color-surface-subtle);
}

.tidly-overview-card-icon {
    display: grid;
    flex: 0 0 44px;
    width: 44px;
    height: 44px;
    place-items: center;
    border-radius: var(--radius-md);
    color: var(--color-primary-base);
    background: var(--color-surface);
}

.tidly-overview-card-icon.is-success {
    color: var(--color-status-success);
    background: rgb(22 163 74 / 8%);
}

.tidly-overview-followup .tidly-overview-card-label {
    margin: 0 0 var(--space-1);
    color: var(--color-text-secondary);
    font-size: var(--text-xs);
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.tidly-overview-followup h2 {
    color: var(--color-primary-base);
    font-family: var(--font-display);
    font-size: var(--text-base);
}

.tidly-overview-followup-content {
    display: grid;
    align-content: start;
    padding: var(--space-4);
}

.tidly-overview-followup .tidly-overview-all-clear {
    padding: var(--space-3);
    border: 1px solid rgb(22 163 74 / 18%);
    border-radius: var(--radius-md);
    color: var(--color-status-success);
    background: rgb(22 163 74 / 6%);
}

.tidly-overview-followup a {
    display: inline-flex;
    width: fit-content;
    min-height: 48px;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    margin-top: var(--space-4);
    padding: 0 var(--space-3);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    color: var(--color-primary-base);
    background: var(--color-surface);
    font-size: var(--text-sm);
    font-weight: 700;
    text-decoration: none;
}

.tidly-overview-followup a:hover,
.tidly-overview-followup a:focus-visible {
    border-color: var(--color-primary-action);
    color: var(--color-primary-action);
    text-decoration: none;
}

.tidly-overview-bookings-list .tidly-booking-card.is-compact {
    padding: var(--space-3);
    border-color: var(--color-border);
    background: var(--color-surface-subtle);
}

.tidly-overview-bookings-list .tidly-booking-time {
    color: var(--color-primary-base);
}

@media (max-width: 61.98rem) {
    .tidly-overview-followup {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 47.98rem) {
    .tidly-overview-status-header {
        align-items: stretch;
        flex-direction: column;
        min-height: 0;
        padding: var(--space-4);
    }

    .tidly-overview-status-header .btn {
        width: 100%;
    }

    .tidly-overview-facts {
        grid-template-columns: 1fr;
    }

    .tidly-overview-facts > div + div {
        border-top: 1px solid var(--color-border);
        border-left: 0;
    }

    .tidly-overview-section-header {
        align-items: flex-start;
        flex-direction: column;
    }
}

/* ============================================================
   Temporary development message overview
   ============================================================ */
.tidly-messages-page {
    display: grid;
    gap: var(--space-6);
}

.tidly-messages-page-header {
    align-items: center;
    padding: clamp(var(--space-4), 3vw, var(--space-6));
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    background:
        linear-gradient(135deg, rgb(15 23 42 / 3%), transparent 55%),
        var(--color-surface);
}

.tidly-messages-page-header .btn,
.tidly-messages-empty .btn,
.tidly-messages-controls .btn {
    min-height: 48px;
}

.tidly-development-label {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    margin: 0 0 var(--space-3);
    padding: var(--space-1) var(--space-2);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    color: var(--color-primary-base);
    background: var(--color-surface-subtle);
    font-size: var(--text-xs);
    font-weight: 700;
}

.tidly-development-label i {
    color: var(--color-primary-action);
}

.tidly-message-summary {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--space-3);
}

.tidly-message-summary > div {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    min-height: 88px;
    padding: var(--space-4);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-surface);
}

.tidly-message-summary > div.needs-attention {
    border-color: rgb(234 88 12 / 28%);
}

.tidly-message-summary-icon {
    display: grid;
    flex: 0 0 44px;
    width: 44px;
    height: 44px;
    place-items: center;
    border-radius: var(--radius-md);
    color: var(--color-primary-base);
    background: var(--color-surface-subtle);
}

.tidly-message-summary .needs-attention .tidly-message-summary-icon {
    color: var(--color-primary-action);
    background: rgb(234 88 12 / 8%);
}

.tidly-message-summary .is-filtered .tidly-message-summary-icon {
    color: var(--color-text-secondary);
}

.tidly-message-summary > div > span:last-child {
    display: grid;
    min-width: 0;
}

.tidly-message-summary strong {
    color: var(--color-primary-base);
    font-family: var(--font-display);
    font-size: var(--text-2xl);
    line-height: 1.1;
}

.tidly-message-summary small {
    color: var(--color-text-secondary);
    font-size: var(--text-sm);
    font-weight: 500;
}

.tidly-messages-controls {
    display: grid;
    grid-template-columns: minmax(15rem, 1fr) minmax(13rem, auto) auto;
    gap: var(--space-3);
    align-items: center;
    padding: var(--space-3);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-surface);
}

.tidly-messages-search {
    position: relative;
    display: block;
}

.tidly-messages-search i {
    position: absolute;
    top: 50%;
    left: var(--space-4);
    z-index: 1;
    color: var(--color-text-secondary);
    transform: translateY(-50%);
    pointer-events: none;
}

.tidly-messages-search input,
.tidly-messages-filter select {
    width: 100%;
    min-height: 48px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    color: var(--color-primary-base);
    background-color: var(--color-surface);
    font: inherit;
}

.tidly-messages-search input {
    padding: 0 var(--space-4) 0 calc(var(--space-4) + 1.25rem);
}

.tidly-messages-filter select {
    padding: 0 var(--space-8) 0 var(--space-4);
}

.tidly-messages-search input:focus,
.tidly-messages-filter select:focus {
    border-color: var(--color-primary-action);
    outline: 3px solid rgb(234 88 12 / 14%);
}

.tidly-messages-view-actions {
    display: flex;
    gap: var(--space-2);
}

.tidly-messages-view-actions .btn {
    white-space: nowrap;
}

.tidly-messages-results-summary {
    min-height: 1.25rem;
    margin: calc(var(--space-4) * -1) 0 0;
    color: var(--color-text-secondary);
    font-size: var(--text-sm);
    font-weight: 500;
}

.tidly-thread-list {
    display: grid;
    gap: var(--space-4);
}

.tidly-messages-loading {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin: 0;
    padding: var(--space-6);
    color: var(--color-text-secondary);
}

.tidly-thread-card {
    overflow: hidden;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-surface);
    transition: border-color 160ms ease;
}

.tidly-thread-card:hover {
    border-color: rgb(15 23 42 / 22%);
}

.tidly-thread-card[data-needs-attention="true"] {
    border-left: 4px solid var(--color-primary-action);
}

.tidly-thread-card > summary {
    min-height: 88px;
    padding: var(--space-4) var(--space-6);
    cursor: pointer;
    list-style: none;
}

.tidly-thread-card > summary::-webkit-details-marker {
    display: none;
}

.tidly-thread-card > summary:focus-visible {
    outline: 3px solid rgb(234 88 12 / 20%);
    outline-offset: -3px;
}

.tidly-thread-card[open] > summary {
    border-bottom: 1px solid var(--color-border);
    background: var(--color-surface-subtle);
}

.tidly-thread-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
}

.tidly-thread-heading-main,
.tidly-thread-summary-end {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    min-width: 0;
}

.tidly-thread-heading-main > div {
    min-width: 0;
}

.tidly-thread-icon {
    display: grid;
    flex: 0 0 44px;
    width: 44px;
    height: 44px;
    place-items: center;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    color: var(--color-primary-base);
    background: var(--color-surface);
}

.tidly-thread-heading h2,
.tidly-thread-heading p {
    margin: 0;
}

.tidly-thread-heading h2 {
    overflow: hidden;
    color: var(--color-primary-base);
    font-family: var(--font-display);
    font-size: var(--text-lg);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tidly-thread-heading p {
    margin-top: var(--space-1);
    overflow: hidden;
    color: var(--color-text-secondary);
    font-size: var(--text-sm);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tidly-thread-toggle {
    display: grid;
    flex: 0 0 40px;
    width: 40px;
    height: 40px;
    place-items: center;
    color: var(--color-text-secondary);
    transition: transform 160ms ease;
}

.tidly-thread-card[open] .tidly-thread-toggle {
    transform: rotate(180deg);
}

.tidly-thread-statuses,
.tidly-message-badges {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.tidly-thread-statuses {
    justify-content: flex-end;
}

.tidly-thread-statuses span,
.tidly-message-badges span {
    padding: var(--space-1) var(--space-2);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    color: var(--color-text-secondary);
    background: var(--color-surface-subtle);
    font-size: var(--text-xs);
    font-weight: 700;
}

.tidly-thread-statuses .is-ok {
    border-color: rgb(22 163 74 / 25%);
    color: var(--color-status-success);
    background: rgb(22 163 74 / 7%);
}

.tidly-thread-statuses .needs-attention {
    border-color: rgb(234 88 12 / 25%);
    color: var(--color-primary-action);
    background: rgb(234 88 12 / 7%);
}

.tidly-thread-statuses .is-filtered,
.tidly-message-badges .is-filtered {
    color: var(--color-primary-base);
}

.tidly-thread-content {
    display: grid;
    gap: var(--space-6);
    padding: var(--space-6);
}

.tidly-thread-facts,
.tidly-ai-diagnostic dl {
    display: grid;
    margin: 0;
}

.tidly-thread-facts {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--space-3);
}

.tidly-thread-facts > div {
    padding: var(--space-3);
    border-radius: var(--radius-md);
    background: var(--color-surface-subtle);
}

.tidly-thread-facts > div,
.tidly-ai-diagnostic dl > div {
    min-width: 0;
}

.tidly-thread-facts dt,
.tidly-ai-diagnostic dt {
    color: var(--color-text-secondary);
    font-size: var(--text-xs);
    font-weight: 500;
}

.tidly-thread-facts dd,
.tidly-ai-diagnostic dd {
    margin: var(--space-1) 0 0;
    overflow-wrap: anywhere;
    color: var(--color-primary-base);
    font-size: var(--text-sm);
    font-weight: 700;
}

.tidly-thread-conversation {
    display: grid;
    gap: var(--space-4);
}

.tidly-thread-conversation-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--space-4);
    padding-bottom: var(--space-3);
    border-bottom: 1px solid var(--color-border);
}

.tidly-thread-conversation-header h3,
.tidly-thread-conversation-header p {
    margin: 0;
}

.tidly-thread-conversation-header h3 {
    color: var(--color-primary-base);
    font-family: var(--font-display);
    font-size: var(--text-lg);
    font-weight: 700;
}

.tidly-thread-conversation-header p,
.tidly-thread-conversation-header > span {
    margin-top: var(--space-1);
    color: var(--color-text-secondary);
    font-size: var(--text-sm);
}

.tidly-thread-conversation-header > span {
    flex: 0 0 auto;
    font-weight: 500;
}

.tidly-thread-conversation-list {
    display: grid;
    gap: var(--space-4);
}

.tidly-thread-message {
    width: min(100%, 52rem);
    padding: var(--space-4) var(--space-6);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-surface-card, #FFFFFF);
}

.tidly-thread-message.is-outbound {
    justify-self: end;
    border-color: rgb(15 23 42 / 18%);
    background: var(--color-surface-subtle);
}

.tidly-thread-message > header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-3);
}

.tidly-message-sender {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    min-width: 0;
}

.tidly-message-sender > div {
    display: grid;
    min-width: 0;
}

.tidly-message-direction-icon {
    display: grid;
    flex: 0 0 36px;
    width: 36px;
    height: 36px;
    place-items: center;
    border-radius: var(--radius-md);
    color: var(--color-primary-base);
    background: var(--color-surface-subtle);
}

.tidly-thread-message.is-outbound .tidly-message-direction-icon {
    color: var(--color-surface);
    background: var(--color-primary-base);
}

.tidly-thread-message > header strong {
    color: var(--color-primary-base);
}

.tidly-thread-message > header span,
.tidly-thread-message > header time {
    color: var(--color-text-secondary);
    font-size: var(--text-xs);
}

.tidly-message-badges {
    margin-top: var(--space-3);
}

.tidly-message-body,
.tidly-message-empty {
    margin: var(--space-3) 0 0;
    overflow-wrap: anywhere;
    white-space: pre-wrap;
    color: var(--color-primary-base);
    font-size: var(--text-sm);
    line-height: 1.55;
}

.tidly-message-empty {
    color: var(--color-text-secondary);
    font-style: italic;
}

.tidly-message-body-long {
    margin-top: var(--space-3);
}

.tidly-message-body-long > summary,
.tidly-ai-draft > summary {
    min-height: 48px;
    align-content: center;
    cursor: pointer;
    color: var(--color-primary-base);
    font-size: var(--text-sm);
    font-weight: 700;
}

.tidly-ai-diagnostic {
    display: grid;
    gap: var(--space-3);
    margin-top: var(--space-4);
    padding: var(--space-4);
    border: 1px solid rgb(37 99 235 / 25%);
    border-left: 4px solid var(--color-ai-accent);
    border-radius: var(--radius-lg);
    background: rgb(37 99 235 / 5%);
}

.tidly-ai-diagnostic.needs-attention {
    border-color: rgb(234 88 12 / 30%);
    border-left-color: var(--color-primary-action);
}

.tidly-ai-diagnostic.is-filtered {
    border-color: var(--color-border);
    border-left-color: var(--color-text-secondary);
    background: var(--color-surface-subtle);
}

.tidly-ai-diagnostic p {
    margin: 0;
}

.tidly-ai-diagnostic-title {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    color: var(--color-ai-accent);
    font-size: var(--text-sm);
    font-weight: 700;
}

.tidly-ai-diagnostic.is-filtered .tidly-ai-diagnostic-title {
    color: var(--color-primary-base);
}

.tidly-ai-diagnostic dl {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-3);
}

.tidly-ai-reason {
    padding-top: var(--space-3);
    border-top: 1px solid rgb(37 99 235 / 18%);
}

.tidly-ai-reason strong {
    color: var(--color-ai-accent);
    font-size: var(--text-sm);
}

.tidly-ai-reason p,
.tidly-ai-draft p {
    margin-top: var(--space-1);
    overflow-wrap: anywhere;
    white-space: pre-wrap;
    color: var(--color-primary-base);
    font-size: var(--text-sm);
    line-height: 1.5;
}

.tidly-diagnostic-id {
    margin: var(--space-3) 0 0;
    overflow-wrap: anywhere;
    color: var(--color-text-secondary);
    font-size: var(--text-xs);
}

.tidly-diagnostic-id code,
.tidly-thread-facts code {
    color: inherit;
}

.tidly-messages-empty {
    display: grid;
    justify-items: center;
    gap: var(--space-2);
    padding: clamp(var(--space-6), 8vw, var(--space-10));
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    text-align: center;
    color: var(--color-text-secondary);
    background: var(--color-surface);
}

.tidly-messages-empty i {
    color: var(--color-primary-action);
    font-size: 2rem;
}

.tidly-messages-empty h2,
.tidly-messages-empty p {
    margin: 0;
}

.tidly-messages-empty h2 {
    color: var(--color-primary-base);
    font-size: var(--text-lg);
}

.tidly-messages-empty-copy {
    margin: 0;
    color: var(--color-text-secondary);
}

.tidly-messages-filter-empty[hidden] {
    display: none;
}

@media (max-width: 61.98rem) {
    .development-tools .tidly-product-bottom-nav:not([hidden]) {
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }

    .tidly-messages-controls {
        grid-template-columns: minmax(0, 1fr) minmax(13rem, auto);
    }

    .tidly-messages-view-actions {
        grid-column: 1 / -1;
    }
}

@media (max-width: 47.98rem) {
    .tidly-messages-page-header,
    .tidly-thread-message > header {
        align-items: stretch;
        flex-direction: column;
    }

    .tidly-messages-page-header .btn {
        width: 100%;
        min-height: 48px;
    }

    .tidly-message-summary,
    .tidly-thread-facts,
    .tidly-ai-diagnostic dl {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .tidly-thread-card > summary,
    .tidly-thread-content {
        padding: var(--space-4);
    }

    .tidly-thread-heading {
        align-items: flex-start;
        flex-wrap: wrap;
    }

    .tidly-thread-heading-main {
        min-width: 0;
    }

    .tidly-thread-summary-end {
        align-self: stretch;
    }

    .tidly-thread-statuses {
        justify-content: flex-start;
    }

    .tidly-thread-toggle {
        margin-left: auto;
    }

    .tidly-thread-message {
        padding: var(--space-4);
    }

    .tidly-thread-conversation-header {
        align-items: flex-start;
        flex-direction: column;
        gap: var(--space-2);
    }
}

@media (max-width: 27rem) {
    .tidly-message-summary,
    .tidly-thread-facts,
    .tidly-ai-diagnostic dl {
        grid-template-columns: 1fr;
    }

    .tidly-messages-controls {
        grid-template-columns: 1fr;
    }

    .tidly-messages-view-actions {
        display: grid;
        grid-column: auto;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .tidly-messages-view-actions .btn {
        padding-right: var(--space-2);
        padding-left: var(--space-2);
    }

    .tidly-thread-heading {
        display: grid;
    }

    .tidly-thread-heading p {
        white-space: normal;
    }

    .development-tools .tidly-product-bottom-nav a {
        font-size: 0.65rem;
    }
}