/* ==========================================================================
   dyno — main.css
   Sections: @font-face → :root → reset → typography → layout
   ========================================================================== */

/* --------------------------------------------------------------------------
   @font-face
   -------------------------------------------------------------------------- */

@font-face {
    font-family: 'Instrument Serif';
    src: url('fonts/InstrumentSerif-Regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Instrument Serif';
    src: url('fonts/InstrumentSerif-Italic.woff2') format('woff2');
    font-weight: 400;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'DM Sans';
    src: url('fonts/DMSans.var.woff2') format('woff2-variations');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

/* --------------------------------------------------------------------------
   :root — custom properties
   -------------------------------------------------------------------------- */

:root {
    /* Fonts */
    --font-display: 'Instrument Serif', Georgia, serif;
    --font-ui:      'DM Sans', system-ui, sans-serif;

    /* Neutrals */
    --color-bg:           #FAFAFA;
    --color-surface:      #FFFFFF;
    --color-border:       #E4E4E7;
    --color-border-hover: #D1D1D6;
    --color-text:         #18181B;
    --color-text-muted:   #71717A;
    --color-text-subtle:  #A1A1AA;

    /* Accent */
    --color-accent:       #6366F1;
    --color-accent-hover: #4F46E5;
    --color-accent-soft:  #EEF2FF;
    --color-accent-fg:    #FFFFFF;

    /* Semantic */
    --color-danger:       #EF4444;
    --color-danger-soft:  #FEF2F2;
    --color-warning:      #F59E0B;
    --color-warning-soft: #FFFBEB;
    --color-success:      #22C55E;
    --color-success-soft: #DCFCE7;
    --color-orange:       #EA580C;
    --color-orange-soft:  #FFEDD5;

    /* Priority badges */
    --priority-high:      #EF4444;
    --priority-high-soft: #FEF2F2;
    --priority-med:       #F59E0B;
    --priority-med-soft:  #FFFBEB;
    --priority-low:       #A1A1AA;
    --priority-low-soft:  #F4F4F5;

    /* Row interactions */
    --color-row-hover:    #F4F4F5;

    /* Spacing (4px base unit — expressed in rem so browser zoom and user font
       size preferences are respected; 1rem = 16px at browser default) */
    --space-1:  0.25rem;   /* 4px  */
    --space-2:  0.5rem;    /* 8px  */
    --space-3:  0.75rem;   /* 12px */
    --space-4:  1rem;      /* 16px */
    --space-6:  1.5rem;    /* 24px */
    --space-8:  2rem;      /* 32px */
    --space-12: 3rem;      /* 48px */
    --space-16: 4rem;      /* 64px */

    /* Border radius */
    --radius-sm:     0.5rem;  /* 8px  — buttons, inputs */
    --radius-md:     0.75rem; /* 12px — cards, sidebar */
    --radius-full:   999px;   /* badges, pills */
    --radius-circle: 50%;     /* FAB */

    /* Shadows */
    --shadow-card:     0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
    --shadow-elevated: 0 4px 12px rgba(0,0,0,0.08);
    --shadow-fab:      0 4px 16px rgba(99,102,241,0.4);

    /* Input padding — design-specified values that fall between the 4px-unit scale */
    --space-input-v: 0.625rem;  /* 10px — vertical padding on .input / .textarea */
    --space-input-h: 0.875rem;  /* 14px — horizontal padding on .input / .textarea */

    /* Layout */
    --sidebar-width:     220px;
    --topbar-height:     52px;
    --bottom-nav-height: 56px;  /* mobile bottom navigation bar */
    /* Responsive breakpoint: 768px — CSS custom properties cannot be used
       inside @media queries; value is hard-coded in media rules below. */
}

/* --------------------------------------------------------------------------
   Reset
   -------------------------------------------------------------------------- */

*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    -webkit-tap-highlight-color: transparent;
}

ul, ol {
    list-style: none;
}

[hidden] { display: none !important; }

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

button {
    cursor: pointer;
    border: none;
    background: none;
    font: inherit;
}

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

/* --------------------------------------------------------------------------
   Base typography
   -------------------------------------------------------------------------- */

html {
    font-size: 100%; /* respects browser/OS font size preference; 1rem = 16px at browser default */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    font-family: var(--font-ui);
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: var(--color-text);
    background-color: var(--color-bg);
}

h1, h2, h3 {
    font-family: var(--font-display);
    font-weight: 400;
    line-height: 1.15;
    letter-spacing: -0.02em;
}

h1 { font-size: 1.75rem; }
h2 { font-size: 1.25rem; }
/* h3 uses --font-ui: at 1rem the serif reads too decorative for sub-section labels */
h3 { font-size: 1rem; font-family: var(--font-ui); font-weight: 600;
     letter-spacing: 0; line-height: 1.5; }

/* --------------------------------------------------------------------------
   Page layout — desktop (>= 768px)
   -------------------------------------------------------------------------- */

.app-shell {
    display: grid;
    grid-template-columns: var(--sidebar-width) 1fr;
    min-height: 100vh;
    min-height: 100dvh;
}

.sidebar {
    background: var(--color-surface);
    border-right: 1px solid var(--color-border);
    position: sticky;
    top: 0;
    height: 100vh;
    height: 100dvh;
    overflow-y: auto;
    padding: var(--space-6) var(--space-4);
}

.main-col {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    min-height: 100dvh;
    min-width: 0;
}

.topbar {
    height: var(--topbar-height);
    background: var(--color-surface);
    border-bottom: 1px solid var(--color-border);
    display: flex;
    align-items: center;
    padding: 0 var(--space-6);
    position: relative;
    position: sticky;
    top: 0;
    z-index: 10;
    box-shadow: var(--shadow-card);
}

.main-content {
    flex: 1;
    padding: var(--space-6);
    overflow-y: auto;
    min-width: 0;
}

.version-footer {
    text-align: right;
    padding: var(--space-4) var(--space-6);
    font-size: 0.875rem;
    color: var(--color-text-muted);
}

@media (max-width: 767px) {
    .version-footer {
        text-align: left;
        font-size: 0.75rem;
    }
}

/* --------------------------------------------------------------------------
   Page layout — mobile (< 768px)
   -------------------------------------------------------------------------- */

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

    .sidebar {
        display: none;
    }

    .main-col {
        min-height: 0;
        height: 100vh;
        height: 100dvh;
        padding-bottom: calc(var(--bottom-nav-height) + env(safe-area-inset-bottom));
    }
}

/* --------------------------------------------------------------------------
   Bottom navigation bar — mobile only
   -------------------------------------------------------------------------- */

.bottom-nav {
    display: none;
}

@media (max-width: 767px) {
    .bottom-nav {
        display: flex;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        height: var(--bottom-nav-height);
        background: var(--color-surface);
        border-top: 1px solid var(--color-border);
        align-items: stretch;
        z-index: 20;
        padding-bottom: env(safe-area-inset-bottom);
        view-transition-name: bottom-nav;
    }
}

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-4);
    font-family: var(--font-ui);
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1;
    border-radius: var(--radius-sm);
    border: 1px solid transparent;
    cursor: pointer;
    transition: background 120ms ease, color 120ms ease,
                border-color 120ms ease, transform 120ms ease;
    text-decoration: none;
}

.btn:hover  { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

/* Primary — Save, Login, Register */
.btn-primary {
    background: var(--color-accent);
    color: var(--color-accent-fg);
    border-color: var(--color-accent);
}
.btn-primary:hover { background: var(--color-accent-hover); border-color: var(--color-accent-hover); }

/* Secondary — Cancel, Back */
.btn-secondary {
    background: var(--color-surface);
    color: var(--color-text);
    border-color: var(--color-border);
}
.btn-secondary:hover { border-color: var(--color-border-hover); background: var(--color-bg); }

/* Danger — Confirm delete */
.btn-danger {
    background: var(--color-danger);
    color: var(--color-accent-fg);
    border-color: var(--color-danger);
}
.btn-danger:hover { filter: brightness(0.92); }

/* Ghost — Subtle actions */
.btn-ghost {
    background: transparent;
    color: var(--color-accent);
    border-color: transparent;
}
.btn-ghost:hover { background: var(--color-accent-soft); }

/* --------------------------------------------------------------------------
   Inputs and Textareas
   -------------------------------------------------------------------------- */

.input,
.textarea {
    width: 100%;
    font-family: var(--font-ui);
    font-size: 1rem;
    font-weight: 400;
    color: var(--color-text);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    padding: var(--space-input-v) var(--space-input-h);
    outline: none;
    transition: border-color 120ms ease, box-shadow 120ms ease;
}

.input::placeholder,
.textarea::placeholder {
    color: var(--color-text-subtle);
}

.input:focus,
.textarea:focus {
    border-color: var(--color-accent);
    box-shadow: 0 0 0 3px var(--color-accent-soft);
}

.textarea {
    resize: vertical;
    min-height: 6rem; /* 96px */
    line-height: 1.5;
}

.input-error {
    font-size: 0.8125rem;
    color: var(--color-danger);
    margin-top: var(--space-1);
}

.input-success {
    color: var(--color-success);
    font-size: 1rem;
    margin-bottom: var(--space-4);
}

.input.is-invalid,
.textarea.is-invalid {
    border-color: var(--color-danger);
}

.input.is-invalid:focus,
.textarea.is-invalid:focus {
    box-shadow: 0 0 0 3px var(--color-danger-soft);
}

/* --------------------------------------------------------------------------
   Priority Badges
   -------------------------------------------------------------------------- */

.badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: 0.125rem 0.5rem;
    border-radius: var(--radius-full);
    font-family: var(--font-ui);
    font-size: 0.75rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    line-height: 1.4;
    white-space: nowrap;
}

.badge-high {
    background: var(--priority-high-soft);
    color: var(--priority-high);
}

.badge-med {
    background: var(--priority-med-soft);
    color: var(--priority-med);
}

.badge-low {
    background: var(--priority-low-soft);
    color: var(--priority-low);
}

/* --------------------------------------------------------------------------
   Label Badge
   -------------------------------------------------------------------------- */

.badge-label {
    display: inline-flex;
    align-items: center;
    padding: 0.125rem 0.5rem;
    border-radius: var(--radius-full);
    font-family: var(--font-ui);
    font-size: 0.75rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    line-height: 1.4;
    white-space: nowrap;
    background: color-mix(in srgb, var(--label-color) 15%, transparent);
    color: var(--label-color);
}

/* --------------------------------------------------------------------------
   Waiting Badge
   -------------------------------------------------------------------------- */

.badge-waiting {
    background: var(--color-warning-soft);
    color: var(--color-warning);
}

/* --------------------------------------------------------------------------
   Cards (Label Cards and Expiry Cards)
   -------------------------------------------------------------------------- */

.card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--space-4);
    cursor: pointer;
    transition: border-color 150ms ease, transform 150ms ease, box-shadow 150ms ease;
    box-shadow: var(--shadow-card);
}

.card:hover {
    border-color: var(--color-border-hover);
    transform: translateY(-2px);
    box-shadow: var(--shadow-elevated);
}

.label-card__name {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--color-text);
    margin-bottom: var(--space-1);
}

.label-card__count {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--color-text);
}

.label-card__count--empty {
    color: var(--color-text-subtle);
}

.expiry-card__label {
    font-size: 0.75rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-text-muted);
    margin-bottom: var(--space-1);
}

.expiry-card__count {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--color-text);
}

.card--disabled {
    opacity: 0.45;
    cursor: default;
    pointer-events: none;
}

/* --------------------------------------------------------------------------
   Sidebar Active Navigation Item
   -------------------------------------------------------------------------- */

.sidebar-nav__item {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-sm);
    font-size: 0.875rem;
    color: var(--color-text-muted);
    cursor: pointer;
    transition: background 80ms ease, color 80ms ease;
    border-left: 3px solid transparent;
}

.sidebar-nav__item:hover {
    background: var(--color-bg);
    color: var(--color-text);
}

.sidebar-nav__item.is-active {
    border-left-color: var(--color-accent);
    color: var(--color-accent);
    background: var(--color-accent-soft);
    font-weight: 500;
}

/* --------------------------------------------------------------------------
   Bottom Navigation Bar Tabs (mobile only)
   -------------------------------------------------------------------------- */

.bottom-nav__tab {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 1;
    gap: 3px;
    font-family: var(--font-ui);
    font-size: 0.6875rem;   /* 11px — standard iOS/Android tab label size */
    font-weight: 500;
    color: var(--color-text-subtle);
    text-decoration: none;
    cursor: pointer;
    transition: color 80ms ease;
    -webkit-tap-highlight-color: transparent;
}

.bottom-nav__tab:hover {
    color: var(--color-text-muted);
}

.bottom-nav__tab.is-active {
    color: var(--color-accent);
}

.bottom-nav__icon {
    width: 22px;
    height: 22px;
    stroke: currentColor;
    fill: none;
    stroke-width: 1.75;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* --------------------------------------------------------------------------
   Todo Rows
   -------------------------------------------------------------------------- */

.todo-list {
    display: flex;
    flex-direction: column;
    overscroll-behavior-y: contain;  /* prevent accidental pull-to-refresh on iOS */
}

.todo-row {
    display: flex;
    align-items: stretch;
    min-height: 56px;
    border-bottom: 1px solid var(--color-border);
    transition: background 80ms;
}

.todo-row:hover { background: var(--color-row-hover); }

.todo-row__detail {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    flex: 1;
    padding: var(--space-3) var(--space-3) var(--space-3) 0;
    cursor: pointer;
    transition: background 80ms ease;
    text-decoration: none;
    color: inherit;
}

.todo-row__detail:hover {
    background: var(--color-row-hover);
}

/* Done state */
.todo-row.is-done .todo-row__detail {
    color: var(--color-text-subtle);
}

.todo-row.is-done .todo-row__title {
    text-decoration: line-through;
    color: var(--color-text-subtle);
}

/* Title truncation */
.todo-row__title {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 1rem;
}

/* Meta area (badges + date) */
.todo-row__meta {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-shrink: 0;
}

.todo-row__date {
    font-size: 0.8125rem;
    color: var(--color-text-muted);
    white-space: nowrap;
}

.todo-row__date--overdue {
    color: var(--color-danger);
    font-weight: 500;
}

/* Section divider ("Awaiting response") */
.todo-section-divider {
    font-size: 0.75rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-text-subtle);
    padding: var(--space-3) var(--space-2) var(--space-1);
}

/* Delete animation — triggered by JS before DOM removal */
.todo-row.is-removing {
    animation: todo-remove 200ms ease forwards;
}

@keyframes todo-remove {
    to { opacity: 0; transform: translateY(-0.375rem); }
}

/* Undo link — JS inserts this element into .todo-row__detail when a todo
   is marked done; JS removes it after 3 s or on click */
.todo-undo {
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--color-text-muted);
    white-space: nowrap;
    flex-shrink: 0;
    padding-left: var(--space-3);
    cursor: pointer;
    text-decoration: none;
}

.todo-undo:hover {
    color: var(--color-text);
}

/* --------------------------------------------------------------------------
   Circle Completion Button
   -------------------------------------------------------------------------- */

/* Left zone: completion tap target */
.todo-complete {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    align-self: stretch;   /* fills full row height */
    flex-shrink: 0;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    -webkit-tap-highlight-color: transparent;
}

.todo-complete__svg {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

/* Incomplete state — outlined circle */
.todo-complete__ring {
    fill: none;
    stroke: var(--color-border);
    transition: stroke 120ms ease, fill 120ms ease;
}

/* Complete state — filled accent circle */
.todo-row.is-done .todo-complete__ring {
    fill: var(--color-accent);
    stroke: var(--color-accent);
}

/* Tick animation via stroke-dashoffset */
.todo-complete__tick {
    stroke-dasharray: 20;
    stroke-dashoffset: 20;
    transition: stroke-dashoffset 200ms ease;
}

.todo-row.is-done .todo-complete__tick {
    stroke-dashoffset: 0;
}

.todo-complete:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: -4px;
    border-radius: 50%;
}

/* --------------------------------------------------------------------------
   Floating Action Button (FAB)
   -------------------------------------------------------------------------- */

.fab {
    position: fixed;
    /* Sit above the bottom nav bar + safe area, with breathing room */
    bottom: calc(var(--bottom-nav-height) + env(safe-area-inset-bottom) + var(--space-4));
    right: var(--space-4);
    width: 56px;
    height: 56px;
    border-radius: var(--radius-circle);
    background: var(--color-accent);
    color: var(--color-accent-fg);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem; /* 24px */
    line-height: 1;
    box-shadow: var(--shadow-fab);
    cursor: pointer;
    border: none;
    text-decoration: none;
    transition: background 150ms ease, transform 150ms ease;
    z-index: 50;
}

.fab:hover {
    background: var(--color-accent-hover);
    transform: scale(1.05);
}

.fab:active {
    transform: scale(1);
}

@media (min-width: 768px) {
    .fab { display: none; }
}

/* On mobile: hide +Add button in heading row, show FAB instead */
@media (max-width: 767px) {
    .fab { view-transition-name: fab; }
    .dashboard-add { display: none; }
}

/* --------------------------------------------------------------------------
   Wizard Shell (todo-new.html / todo-edit.html)
   -------------------------------------------------------------------------- */

/* Full-page column layout: topbar + centred card */
.wizard-shell {
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    background: var(--color-bg);
}

.wizard-main {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-6);
}

/* Topbar child elements for wizard pages */
.topbar__cancel {
    font-size: 0.875rem;
    color: var(--color-text-muted);
    text-decoration: none;
    margin-right: auto;
}

.topbar__cancel:hover { color: var(--color-text); }

.topbar__back {
    font-size: 0.875rem;
    color: var(--color-text-muted);
    text-decoration: none;
    margin-right: auto;
}

.topbar__back:hover { color: var(--color-text); }

.topbar__title {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    font-weight: 600;
    font-size: 0.9375rem;
    color: var(--color-text);
    pointer-events: none;
}

/* Step label ("Step 1 of 5") */
.wizard-header {
    padding: var(--space-4) var(--space-6) 0;
}

.wizard-step-indicator {
    font-size: 0.8125rem;
    color: var(--color-text-muted);
}

/* Each step's content area */
.wizard-step {
    padding: var(--space-4) var(--space-6) var(--space-6);
}

.wizard-step__heading {
    font-size: 1.25rem;
    font-family: var(--font-display);
    margin-bottom: var(--space-6);
}

/* Nav row (Back / Next / Save) */
.wizard-nav {
    display: flex;
    align-items: center;
    padding: var(--space-4) var(--space-6);
    border-top: 1px solid var(--color-border);
}

.wizard-nav__spacer { flex: 1; }

/* Progress bar fill (alias for wizard-progress__fill) */
.wizard-progress__bar {
    height: 100%;
    background: var(--color-accent);
    transition: width 200ms ease;
}

@media (max-width: 767px) {
    .wizard-main { padding: 0; }
}

/* --------------------------------------------------------------------------
   Wizard Card
   -------------------------------------------------------------------------- */

/* Centered page wrapper — used on auth pages */
.page-centered {
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--space-6);
    background: var(--color-bg);
}

/* Main wizard card */
.wizard-card {
    position: relative;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-elevated);
    width: 100%;
    max-width: 30rem; /* 480px */
    overflow: hidden;
}

/* Progress bar */
.wizard-progress {
    height: 3px;
    background: var(--color-border);
}

.wizard-progress__fill {
    height: 100%;
    background: var(--color-accent);
    transition: width 200ms ease;
}

/* Card body */
.wizard-card__body {
    padding: var(--space-6);
}

.wizard-card__step-label {
    font-size: 0.8125rem;
    color: var(--color-text-muted);
    margin-bottom: var(--space-4);
}

.wizard-card__question {
    font-size: 1.25rem;
    font-family: var(--font-display);
    margin-bottom: var(--space-6);
}

/* Footer with Back / Next buttons */
.wizard-card__footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-4) var(--space-6);
    border-top: 1px solid var(--color-border);
}

/* Option cards (priority / label selection) */
.wizard-options {
    display: flex;
    gap: var(--space-3);
    flex-wrap: wrap;
    margin-bottom: var(--space-6);
}

.wizard-option {
    flex: 0 1 auto;
    padding: var(--space-3) var(--space-4);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-surface);
    font-family: var(--font-ui);
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--color-text);
    cursor: pointer;
    text-align: center;
    transition: border-color 120ms ease, background 120ms ease, color 120ms ease;
}

.wizard-option:hover {
    border-color: var(--color-accent);
    background: var(--color-accent-soft);
    color: var(--color-accent);
}

.wizard-option.is-selected {
    border-color: var(--color-accent);
    background: var(--color-accent-soft);
    color: var(--color-accent);
}

/* Card-level focus ring; inputs inside suppress their own */
.wizard-card:focus-within {
    box-shadow: 0 0 0 3px var(--color-accent-soft), var(--shadow-elevated);
}

.wizard-card .input:focus,
.wizard-card .textarea:focus {
    box-shadow: none;
    border-color: var(--color-border);
}

/* Wizard step slide animations */
.wizard-step--exit-left  { will-change: transform, opacity; animation: wz-exit-left  200ms ease forwards; position: absolute; left: 0; right: 0; }
.wizard-step--exit-right { will-change: transform, opacity; animation: wz-exit-right 200ms ease forwards; position: absolute; left: 0; right: 0; }
.wizard-step--enter-right { will-change: transform, opacity; animation: wz-enter-right 200ms ease forwards; }
.wizard-step--enter-left  { will-change: transform, opacity; animation: wz-enter-left  200ms ease forwards; }

@keyframes wz-exit-left   { to   { transform: translateX(-40px); opacity: 0; } }
@keyframes wz-exit-right  { to   { transform: translateX(40px);  opacity: 0; } }
@keyframes wz-enter-right { from { transform: translateX(40px);  opacity: 0; } }
@keyframes wz-enter-left  { from { transform: translateX(-40px); opacity: 0; } }

@media (max-width: 767px) {
    .wizard-card {
        border-radius: 0;
        border: none;
        min-height: 100dvh;
        max-width: 100%;
        box-shadow: none;
        overflow-y: auto;  /* scrollable in landscape when vertical space is limited */
    }

    .page-centered {
        padding: 0;
        justify-content: flex-start;
    }
}

/* --------------------------------------------------------------------------
   Detail Page
   -------------------------------------------------------------------------- */

.detail-card {
    max-width: 40rem; /* 640px */
    /* no padding — .main-content already provides var(--space-6) on all sides */
}

.detail-title {
    font-family: var(--font-display);
    font-size: 1.75rem;
    line-height: 1.15;
    letter-spacing: -0.02em;
    margin-bottom: var(--space-4);
}

.detail-description {
    color: var(--color-text);
    margin-bottom: var(--space-6);
    white-space: pre-wrap; /* preserve line breaks from textarea */
}

/* Definition list: two-column key/value grid */
.detail-meta {
    display: grid;
    grid-template-columns: 7rem 1fr;
    gap: var(--space-2) var(--space-4);
    align-items: baseline;
    margin-bottom: var(--space-8);
    font-size: 0.9375rem;
}

.detail-meta dt {
    color: var(--color-text-muted);
    font-size: 0.8125rem;
}

/* Priority badge variants (BEM modifier, complements existing .badge base) */
.badge--priority-high   { background: var(--priority-high-soft); color: var(--priority-high); }
.badge--priority-medium { background: var(--priority-med-soft);  color: var(--priority-med); }
.badge--priority-low    { background: var(--priority-low-soft);  color: var(--priority-low); }

/* Request badge — amber waiting indicator */
.badge--request {
    background: var(--color-warning-soft);
    color: var(--color-warning);
}

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

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

.detail-confirm {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    flex-wrap: wrap;
    margin-top: var(--space-4);
    font-size: 0.9375rem;
    color: var(--color-text-muted);
}

/* Done state: mirror list-row done styling on the detail card */
.detail-card--done .detail-title {
    text-decoration: line-through;
    color: var(--color-text-subtle);
}

.detail-card--done .detail-description {
    color: var(--color-text-subtle);
}

/* ── Labels page rows ────────────────────────────────────────────────────── */

.label-row {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) 0;
    border-bottom: 1px solid var(--color-border);
}

.label-row .label-name {
    flex: 1;
    min-width: 0;
}

.label-actions {
    display: flex;
    gap: var(--space-2);
    flex-shrink: 0;
}

/* Label form fields */
.label-form__name {
    flex: 9;
    min-width: 0;
}

.label-form__color {
    flex: 1;
    height: 2.5rem;
    padding: var(--space-1);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    cursor: pointer;
}

@media (max-width: 767px) {
    .label-form__name { flex: 4; }
    .label-form__color { flex: 1; }
}

/* Small button modifier */
.btn-sm {
    padding: var(--space-1) var(--space-2);
    font-size: 0.75rem;
}

/* --------------------------------------------------------------------------
   Toast Notifications
   -------------------------------------------------------------------------- */

.toast-container {
    position: fixed;
    top: var(--space-4);
    right: var(--space-4);
    z-index: 200;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    pointer-events: none;
}

.toast {
    pointer-events: auto;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-left: 3px solid transparent;
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-elevated);
    padding: var(--space-3) var(--space-4);
    font-size: 0.875rem;
    color: var(--color-text);
    max-width: 20rem; /* 320px */
    animation: toast-in 200ms ease;
}

.toast--success { border-left: 3px solid var(--color-success); }
.toast--danger  { border-left: 3px solid var(--color-danger);  }
.toast--warning { border-left: 3px solid var(--color-warning); }

.toast.is-dismissing {
    animation: toast-out 200ms ease forwards;
}

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

@keyframes toast-out {
    to { opacity: 0; transform: translateX(1rem); }
}

/* Mobile: full-width banner sliding down from the top */
@media (max-width: 767px) {
    .toast-container {
        top: env(safe-area-inset-top);
        right: 0;
        left: 0;
        padding: 0;
    }

    .toast {
        max-width: 100%;
        border-radius: 0;
        border-left: none;
        border-bottom: 3px solid transparent;
        animation: toast-in-mobile 200ms ease;
    }

    .toast--success { border-bottom-color: var(--color-success); }
    .toast--danger  { border-bottom-color: var(--color-danger);  }
    .toast--warning { border-bottom-color: var(--color-warning); }

    .toast.is-dismissing {
        animation: toast-out-mobile 200ms ease forwards;
    }
}

@keyframes toast-in-mobile {
    from { opacity: 0; transform: translateY(-100%); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes toast-out-mobile {
    to { opacity: 0; transform: translateY(-100%); }
}

/* --------------------------------------------------------------------------
   Dashboard
   -------------------------------------------------------------------------- */

/* ── Loading bar ──────────────────────────────────────────────────────────── */

.loading-bar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    z-index: 100;
    overflow: hidden;
}

.loading-bar__fill {
    height: 100%;
    background: var(--color-accent);
    width: 0%;
    transition: width 300ms ease;
}

/* ── Sidebar content ──────────────────────────────────────────────────────── */

.sidebar__brand {
    font-family: var(--font-display);
    font-size: 1.25rem;
    color: var(--color-text);
    display: block;
    margin-bottom: var(--space-6);
    text-decoration: none;
}

.sidebar__user {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding: var(--space-4) 0;
    border-top: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);
    margin-bottom: var(--space-4);
}

.sidebar__email {
    font-size: 0.8125rem;
    color: var(--color-text-muted);
    word-break: break-all;
}

.sidebar__logout {
    font-size: 0.8125rem;
    color: var(--color-text-muted);
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    text-align: left;
}

.sidebar__logout:hover { color: var(--color-text); }

.sidebar__nav {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.sidebar__nav-link {
    display: block;
    font-size: 0.875rem;
    color: var(--color-text-muted);
    text-decoration: none;
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-sm);
}

.sidebar__nav-link:hover {
    background: var(--color-accent-soft);
    color: var(--color-accent);
}

.sidebar__nav-link.is-active {
    border-left: 3px solid var(--color-accent);
    color: var(--color-accent);
    background: var(--color-accent-soft);
    padding-left: calc(var(--space-3) - 3px); /* compensate for the 3px left border */
}

/* ── Dashboard sections ───────────────────────────────────────────────────── */

.dashboard-section {
    margin-bottom: var(--space-6);
}

.section-heading {
    font-family: var(--font-display);
    font-size: 1.25rem;
    font-weight: 400;
    line-height: 1.15;
    color: var(--color-text);
    margin-bottom: var(--space-4);
}

.section-heading-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--space-4);
}

.section-heading-row .section-heading {
    margin-bottom: 0;
}

/* ── Label cards ──────────────────────────────────────────────────────────── */

.label-cards {
    display: flex;
    gap: var(--space-3);
    overflow-x: auto;
    padding-bottom: var(--space-2);
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.label-cards::-webkit-scrollbar { display: none; }

.label-card {
    flex: 0 0 auto;
    min-width: 7rem;
    max-width: 9rem;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--space-4);
    cursor: pointer;
    text-align: left;
    font-family: inherit;
    font-size: inherit;
    transition: border-color 150ms ease, transform 150ms ease, box-shadow 150ms ease;
}

.label-card:hover {
    border-color: var(--color-border-hover);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.label-card__name {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--color-text);
    margin-bottom: var(--space-2);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.label-card__count {
    font-size: 1.5rem;
    font-weight: 600;
    line-height: 1;
    color: var(--color-text);
}

.label-card__count--zero { color: var(--color-text-subtle); }

/* Request card — fixed amber accent, always first in the row */
.label-card--request {
    border-left: 3px solid var(--color-warning);
}

/* Skeleton placeholder */
.label-card--skeleton {
    min-height: 5rem;
    background: var(--color-border);
    opacity: 0.4;
    cursor: default;
    pointer-events: none;
}

/* Mobile: compact pill/chip layout for label cards */
@media (max-width: 767px) {
    .label-cards { gap: var(--space-2); flex-wrap: wrap; overflow-x: visible; }

    .label-card {
        min-width: 0;
        max-width: none;
        padding: var(--space-1) var(--space-3);
        border-radius: 999px;
        display: flex;
        align-items: center;
        gap: var(--space-2);
    }

    .label-card__name {
        margin-bottom: 0;
        font-size: 0.8125rem;
        white-space: nowrap;
    }

    .label-card__count {
        font-size: 0.8125rem;
        font-weight: 600;
        line-height: 1;
        opacity: 0.7;
    }

    .label-card__count::before { content: "·\00a0"; }

    .label-card--skeleton {
        min-height: 0;
        height: 1.75rem;
        width: 5rem;
        border-radius: 999px;
    }
}

/* ── Expiry cards ─────────────────────────────────────────────────────────── */

.expiry-cards {
    display: flex;
    gap: var(--space-3);
    overflow-x: auto;
    padding-bottom: var(--space-2);
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.expiry-cards::-webkit-scrollbar { display: none; }

.expiry-card {
    flex: 1 1 0;
    min-width: 0;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--space-4);
    text-align: center;
    cursor: pointer;
    transition: border-color 150ms ease, transform 150ms ease, box-shadow 150ms ease;
}

.expiry-card:hover {
    border-color: var(--color-border-hover);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

/* Zero count — dimmed, not clickable */
.expiry-card--empty {
    opacity: 0.45;
    cursor: default;
    pointer-events: none;
}

/* Active filter state for cards */
.label-card.is-active,
.expiry-card.is-active {
    border-color: var(--color-accent);
    box-shadow: 0 0 0 2px var(--color-accent-soft);
}

/* Loading placeholder */
.expiry-card--skeleton {
    opacity: 0.4;
    cursor: default;
    pointer-events: none;
}

.expiry-card__label {
    display: block;
    font-size: 0.8125rem;
    color: var(--color-text-muted);
    margin-bottom: var(--space-2);
}

.expiry-card__count {
    display: block;
    font-size: 1.5rem;
    font-weight: 600;
    line-height: 1;
    color: var(--color-text);
}

/* Collapsible expiry section — mobile only */
.expiry-collapsible > summary {
    list-style: none;
}
.expiry-collapsible > summary::-webkit-details-marker { display: none; }

/* Desktop: always expanded, no interaction (open attribute set by JS) */
@media (min-width: 768px) {
    .expiry-collapsible > summary {
        pointer-events: none;
        cursor: default;
    }
}

/* Mobile: collapsed by default, chevron toggle indicator */
@media (max-width: 767px) {
    .expiry-collapsible > summary {
        cursor: pointer;
        user-select: none;
        display: flex;
        align-items: center;
        gap: var(--space-2);
    }
    .expiry-collapsible > summary::after {
        content: '';
        display: inline-block;
        width: 0.4rem;
        height: 0.4rem;
        border-right: 1.5px solid var(--color-text-muted);
        border-bottom: 1.5px solid var(--color-text-muted);
        transform: rotate(-45deg);
        transition: transform 200ms ease;
        flex-shrink: 0;
    }
    .expiry-collapsible[open] > summary::after {
        transform: rotate(45deg);
    }
}

/* Mobile: compact pill/chip layout for expiry cards */
@media (max-width: 767px) {
    .expiry-cards { gap: var(--space-2); flex-wrap: wrap; overflow-x: visible; }

    .expiry-card {
        flex: 0 0 auto;
        padding: var(--space-1) var(--space-3);
        border-radius: 999px;
        display: flex;
        align-items: center;
        gap: var(--space-2);
        text-align: left;
    }

    .expiry-card__label {
        display: inline;
        margin-bottom: 0;
        font-size: 0.8125rem;
        font-weight: 500;
        text-transform: none;
        letter-spacing: normal;
        color: var(--color-text);
    }

    .expiry-card__count {
        display: inline;
        font-size: 0.8125rem;
        font-weight: 600;
        line-height: 1;
        opacity: 0.7;
    }

    .expiry-card__count::before { content: "·\00a0"; }

    .expiry-card--skeleton {
        height: 1.75rem;
        width: 5rem;
        border-radius: 999px;
    }
}

/* ── Search input ─────────────────────────────────────────────────────────── */

.search-wrapper {
    margin-bottom: var(--space-3);
}

.search-input {
    width: 100%;
    box-sizing: border-box;
    padding-left: 2.5rem; /* 40px = var(--space-3) offset (12px) + icon (16px) + gap (12px) */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2371717A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.35-4.35'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: var(--space-3) center;
    background-size: 1rem;
}

/* Suppress the browser-native ✕ clear button (Chrome/Safari) */
.search-input::-webkit-search-cancel-button {
    -webkit-appearance: none;
}

/* ── Todo list anatomy (dashboard) ───────────────────────────────────────── */

.todo-list {
    border-top: 1px solid var(--color-border);
    overscroll-behavior-y: contain;
}

/* Section divider inserted by JS above request todos */
.section-divider {
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: var(--space-2) 0;
    border-bottom: 1px solid var(--color-border);
}

/* Circle button IS the left zone — full 44px × row-height tap area */
.todo-row__circle {
    flex: 0 0 2.75rem;  /* 44px wide; also sets flex-shrink: 0 */
    align-self: stretch; /* full row height */
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    cursor: pointer;
    position: relative;
}

/* Visual circle rendered via ::before so the hit area stays full-zone */
.todo-row__circle::before {
    content: '';
    width: 1.25rem;
    height: 1.25rem;
    border: 2px solid var(--color-border-hover);
    border-radius: 50%;
    flex-shrink: 0;
    transition: border-color 120ms, background 120ms;
}

.todo-row__circle:hover::before   { border-color: var(--color-success); }

.todo-row__circle--filled::before {
    border-color: var(--color-success);
    background: none;
}

.todo-row__circle--filled::after {
    content: '';
    position: absolute;
    width: 0.45rem;
    height: 0.7rem;
    border-right: 2px solid var(--color-success);
    border-bottom: 2px solid var(--color-success);
    transform: rotate(45deg) translateY(-1px);
}

.todo-row__right {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: var(--space-1);
    padding: var(--space-2) var(--space-3) var(--space-2) 0;
    text-decoration: none;
    color: inherit;
}

.todo-row__title {
    font-size: 1rem;
    color: var(--color-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.todo-row__badges {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-wrap: wrap;
}

.todo-row__expiry {
    font-size: 0.8125rem;
    color: var(--color-text-muted);
}

.todo-row__expiry--overdue { color: var(--color-danger); }
.todo-row__expiry--expiring-today { color: var(--color-warning); }

.todo-row--overdue {
    border-left: 3px solid var(--color-danger);
    padding-left: var(--space-3);
}

.todo-row--expiring-today {
    border-left: 3px solid var(--color-warning);
    padding-left: var(--space-3);
}

.todo-row__undo {
    align-self: center;
    font-size: 0.8125rem;
    padding: var(--space-2);
    margin-right: var(--space-3);
    flex-shrink: 0;
}

/* Done state */
.todo-row--done .todo-row__title {
    text-decoration: line-through;
    color: var(--color-text-subtle);
}

/* Skeleton */
.todo-row--skeleton {
    background: var(--color-border);
    opacity: 0.35;
    pointer-events: none;
}

/* ── Empty state ──────────────────────────────────────────────────────────── */

.empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-16) var(--space-6);
    text-align: center;
}

.empty-state__message {
    font-family: var(--font-display);
    font-size: 1.25rem;
    color: var(--color-text);
}

.empty-state__sub {
    font-size: 0.9375rem;
    color: var(--color-text-muted);
}

/* ── Account page ────────────────────────────────────────────────────────── */

.account-section {
    max-width: 28rem;
}

.account-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--space-6);
}

.account-card__row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-4);
}

.account-card__label {
    font-size: 0.875rem;
    color: var(--color-text-muted);
}

.account-card__value {
    font-size: 0.875rem;
    color: var(--color-text);
    font-weight: 500;
}

/* ── Notification settings ────────────────────────────────────────────────── */

.account-notifications {
    display: none;
}

@media (max-width: 767px) {
    .account-notifications {
        display: block;
        margin-top: var(--space-8);
    }
}

.notif-toggle {
    display: flex;
    gap: var(--space-3);
    margin-bottom: var(--space-6);
}

.notif-rules .notif-rule-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-3) 0;
    border-bottom: 1px solid var(--color-border);
}

.notif-rules .notif-rule-row:first-child {
    border-top: 1px solid var(--color-border);
}

.notif-add-form {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-top: var(--space-4);
}

.notif-add-form .input {
    width: 5rem;
}

.notif-limit-text {
    margin-top: var(--space-4);
    color: var(--color-text-muted);
    font-size: 0.875rem;
}

/* ── Show completed toggle ────────────────────────────────────────────────── */

.show-completed {
    width: 100%;
    margin-top: var(--space-4);
    font-size: 0.875rem;
    color: var(--color-text-muted);
    text-align: center;
}

/* ── Calendar (expiry edit) button ────────────────────────────────────────── */

.todo-expiry-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    align-self: center;
    width: 44px;
    height: 44px;
    color: var(--color-text-muted);
    transition: color 120ms ease;
    margin-right: var(--space-1);
}

.todo-expiry-btn:hover { color: var(--color-accent); }

.todo-expiry-btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px var(--color-accent-soft);
    border-radius: var(--radius-sm);
}


/* --------------------------------------------------------------------------
   View Transitions
   -------------------------------------------------------------------------- */

@view-transition {
    navigation: auto;
}

html.vt-forward::view-transition-old(root) {
    will-change: transform, opacity;
    animation: vt-slide-out-left 280ms ease-out;
}
html.vt-forward::view-transition-new(root) {
    will-change: transform, opacity;
    animation: vt-slide-in-right 280ms ease-out;
}

html.vt-back::view-transition-old(root) {
    will-change: transform, opacity;
    animation: vt-slide-out-right 280ms ease-out;
}
html.vt-back::view-transition-new(root) {
    will-change: transform, opacity;
    animation: vt-slide-in-left 280ms ease-out;
}

@keyframes vt-slide-out-left  { to   { transform: translateX(-30%); opacity: 0; } }
@keyframes vt-slide-in-right  { from { transform: translateX(30%);  opacity: 0; } }
@keyframes vt-slide-out-right { to   { transform: translateX(30%);  opacity: 0; } }
@keyframes vt-slide-in-left   { from { transform: translateX(-30%); opacity: 0; } }

/* Keep fixed chrome static during page transitions */
::view-transition-group(bottom-nav),
::view-transition-group(fab) {
    animation: none;
}

/* --------------------------------------------------------------------------
   Spec-037 Collaboration styles
   -------------------------------------------------------------------------- */

/* ── Account page hint text ──────────────────────────────────────────────── */

.account-card__hint {
    font-size: 0.8125rem;
    color: var(--color-text-muted);
    margin-top: var(--space-1);
}

/* ── Toggle switch (collaboration + future binary settings) ─────────────── */

.switch-wrapper {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    cursor: pointer;
    flex-shrink: 0;
}

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

.switch__track {
    display: block;
    width: 32px;
    height: 18px;
    border-radius: 999px;
    background: var(--color-border);
    position: relative;
    transition: background-color 120ms ease;
}

.switch__track::after {
    content: '';
    display: block;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #fff;
    position: absolute;
    top: 2px;
    left: 2px;
    transition: transform 120ms ease;
    box-shadow: 0 1px 3px rgba(0,0,0,0.12);
}

.switch__input:checked + .switch__track {
    background: var(--color-accent);
}

.switch__input:checked + .switch__track::after {
    transform: translateX(14px);
}

.switch__input:focus-visible + .switch__track {
    box-shadow: 0 0 0 3px var(--color-accent-soft);
}

/* ── Indicator dot (bell button) ─────────────────────────────────────────── */

.bell-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: var(--radius-sm);
    color: var(--color-text-muted);
    position: relative;
    transition: color 120ms ease;
}

.bell-btn:hover { color: var(--color-text); }

.bell-btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px var(--color-accent-soft);
}

.bell-btn.has-pending::after {
    content: '';
    display: block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--color-accent);
    position: absolute;
    top: 8px;
    right: 8px;
    border: 1.5px solid var(--color-surface);
}

/* ── Topbar right slot ───────────────────────────────────────────────────── */

.topbar__right {
    margin-left: auto;
    display: flex;
    align-items: center;
    position: relative;
}

/* On mobile, title shifts left-of-centre when a right-slot icon is present */
@media (max-width: 767px) {
    .topbar:has(.topbar__right) .topbar__title {
        flex: 1;
        text-align: left;
    }

    /* Mobile-only: purple topbar at 50% opacity */
    .topbar {
        background: rgba(99, 102, 241, 0.5);
        border-bottom: none;
    }
    .topbar__title,
    .topbar__cancel,
    .topbar__back {
        color: var(--color-accent-fg);
    }
    .topbar__cancel:hover,
    .topbar__back:hover {
        color: var(--color-accent-fg);
    }
    .bell-btn {
        color: var(--color-accent-fg);
    }
    .bell-btn:hover { color: var(--color-accent-fg); }
    .bell-btn:focus-visible {
        box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.4);
    }
    .bell-btn.has-pending::after {
        background: var(--color-accent-fg);
        border-color: transparent;
    }
}

/* ── Dashboard collaboration badges ─────────────────────────────────────── */

.row-shared-badge,
.row-collab-badge,
.row-pending-badge {
    background: var(--color-success-soft);
    color: var(--color-success);
    font-size: 0.75rem;
    font-weight: 500;
    padding: 0.125rem 0.5rem;
    border-radius: 999px;
}

/* ── Topbar bell dropdown ────────────────────────────────────────────────── */

.invitations-dropdown {
    position: fixed;
    z-index: 50;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-elevated);
    padding: var(--space-3);
    min-width: 300px;
    max-width: 380px;
    opacity: 0;
    transform: translateY(-4px);
    transition: opacity 120ms ease, transform 120ms ease;
}

.invitations-dropdown.is-open {
    opacity: 1;
    transform: translateY(0);
}

.invitations-dropdown__row {
    padding: var(--space-3);
    border-bottom: 1px solid var(--color-border);
}

.invitations-dropdown__row:last-child {
    border-bottom: none;
}

.invitations-dropdown__title {
    font-size: 0.9375rem;
    font-weight: 500;
    color: var(--color-text);
}

.invitations-dropdown__from,
.invitations-dropdown__meta {
    font-size: 0.8125rem;
    color: var(--color-text-muted);
    margin-top: var(--space-1);
}

.invitations-dropdown__actions {
    display: flex;
    gap: var(--space-2);
    margin-top: var(--space-3);
}

.invitations-dropdown__empty {
    font-size: 0.875rem;
    color: var(--color-text-muted);
    padding: var(--space-3);
    text-align: center;
}

/* ── Share popover ───────────────────────────────────────────────────────── */

.share-popover {
    position: absolute;
    z-index: 50;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-elevated);
    padding: var(--space-4);
    width: 280px;
    opacity: 0;
    transform: translateY(-4px);
    transition: opacity 120ms ease, transform 120ms ease;
}

.share-popover.is-open {
    opacity: 1;
    transform: translateY(0);
}

.share-popover__title {
    font-size: 0.9375rem;
    font-weight: 500;
    color: var(--color-text);
    margin-bottom: var(--space-3);
}

.share-popover__input {
    width: 100%;
    margin-bottom: var(--space-3);
}

.share-popover__submit {
    width: 100%;
}

/* ── Collaborators block (detail page) ───────────────────────────────────── */

.collaborators-block {
    margin-top: var(--space-6);
    padding-top: var(--space-4);
    border-top: 1px solid var(--color-border);
}

.collaborators-block__heading {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: var(--space-3);
}

.collaborators-block__list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.collaborators-block__row {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) 0;
    border-bottom: 1px solid var(--color-border);
    flex-wrap: wrap;
}

.collaborators-block__row:last-child {
    border-bottom: none;
}

.collaborators-block__email {
    flex: 1;
    font-size: 0.9375rem;
    color: var(--color-text);
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.collaborators-block__status {
    font-size: 0.75rem;
    font-weight: 500;
    padding: 0.125rem 0.5rem;
    border-radius: 999px;
    flex-shrink: 0;
}

.collaborators-block__status.is-accepted {
    background: var(--color-success-soft);
    color: var(--color-success);
}

.collaborators-block__status.is-pending {
    background: var(--color-warning-soft);
    color: var(--color-warning);
}

/* ── Detail page: Shared-by caption ─────────────────────────────────────── */

.detail-shared-by {
    margin-top: var(--space-3);
    font-size: 0.8125rem;
    color: var(--color-text-muted);
}