@layer reset, tokens, base, layout, components, utilities, overrides;

@layer reset {
    *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
    html { -webkit-text-size-adjust: 100%; }
    img, svg { display: block; max-inline-size: 100%; }
    input, button, textarea, select { font: inherit; color: inherit; }
    table { border-collapse: collapse; }
}

@layer tokens {
    :root {
        --gray-0:   #ffffff;
        --gray-25:  #fdfdfd;
        --gray-50:  #f8f9fa;
        --gray-100: #f1f3f4;
        --gray-200: #e8eaed;
        --gray-300: #dadce0;
        --gray-400: #bdc1c6;
        --gray-500: #9aa0a6;
        --gray-600: #80868b;
        --gray-700: #5f6368;
        --gray-800: #3c4043;
        --gray-900: #202124;
        --gray-950: #171717;

        --blue-50:  #e8f0fe;
        --blue-100: #d2e3fc;
        --blue-500: #1a73e8;
        --blue-600: #1967d2;
        --blue-700: #185abc;

        --red-50:    #fce8e6;
        --red-500:   #d93025;
        --red-600:   #c5221f;
        --green-50:  #e6f4ea;
        --green-500: #1e8e3e;
        --yellow-50: #fef7e0;
        --yellow-500: #f9ab00;

        --space-0: 0;
        --space-1: 0.25rem;
        --space-2: 0.5rem;
        --space-3: 0.75rem;
        --space-4: 1rem;
        --space-5: 1.5rem;
        --space-6: 2rem;
        --space-7: 3rem;
        --space-8: 4rem;

        --radius-xs:   2px;
        --radius-sm:   4px;
        --radius-md:   8px;
        --radius-lg:   12px;
        --radius-xl:   16px;
        --radius-full: 999px;

        --border-hairline: 1px;
        --border-thick:    2px;

        --shadow-0: none;
        --shadow-1: 0 1px 2px rgba(60,64,67,0.10), 0 1px 3px rgba(60,64,67,0.06);
        --shadow-2: 0 1px 2px rgba(60,64,67,0.12), 0 2px 6px rgba(60,64,67,0.10);
        --shadow-3: 0 1px 3px rgba(60,64,67,0.12), 0 4px 12px rgba(60,64,67,0.12);
        --shadow-4: 0 2px 6px rgba(60,64,67,0.14), 0 8px 24px rgba(60,64,67,0.14);
        --shadow-focus-search: 0 1px 6px rgba(32,33,36,0.28);

        --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
        --font-mono: ui-monospace, "SF Mono", "Roboto Mono", Menlo, Consolas, monospace;

        --text-xs:  clamp(0.75rem, 0.72rem + 0.15vw, 0.8125rem);
        --text-sm:  clamp(0.875rem, 0.85rem + 0.15vw, 0.9375rem);
        --text-md:  clamp(1rem, 0.96rem + 0.2vw, 1.0625rem);
        --text-lg:  clamp(1.125rem, 1.05rem + 0.4vw, 1.375rem);
        --text-xl:  clamp(1.5rem, 1.3rem + 1vw, 2rem);
        --text-2xl: clamp(2rem, 1.6rem + 2vw, 3rem);

        --weight-regular: 400;
        --weight-medium:  500;
        --weight-bold:    700;
        --leading-tight:  1.2;
        --leading-normal: 1.6;
        --tracking-tight: -0.01em;

        --z-sticky:  100;
        --z-drawer:  200;
        --z-dropdown: 300;

        --ease-standard:   cubic-bezier(0.2, 0, 0, 1);
        --ease-decelerate: cubic-bezier(0, 0, 0.2, 1);
        --ease-spring:     cubic-bezier(0.25, 1, 0.5, 1);
        --dur-instant: 80ms;
        --dur-fast:    150ms;
        --dur-medium:  250ms;
        --dur-slow:    400ms;

        color-scheme: light dark;

        --color-surface-page:    light-dark(var(--gray-0), var(--gray-900));
        --color-surface-raised:  light-dark(var(--gray-0), var(--gray-800));
        --color-surface-sunken:  light-dark(var(--gray-50), var(--gray-950));
        --color-surface-inverse: light-dark(var(--gray-900), var(--gray-0));

        --color-text-primary:   light-dark(var(--gray-900), var(--gray-100));
        --color-text-secondary: light-dark(var(--gray-700), var(--gray-500));
        --color-text-disabled:  light-dark(var(--gray-500), var(--gray-600));
        --color-text-on-accent: var(--gray-0);
        --color-text-link:      var(--blue-500);

        --color-border-subtle:  light-dark(var(--gray-200), var(--gray-800));
        --color-border-default: light-dark(var(--gray-300), var(--gray-700));
        --color-border-strong:  light-dark(var(--gray-400), var(--gray-600));
        --color-border-focus:   var(--blue-500);

        --color-action-primary:        var(--blue-500);
        --color-action-primary-hover:  var(--blue-600);
        --color-action-primary-active: var(--blue-700);
        --color-action-neutral-bg:     var(--gray-50);

        --color-feedback-error:      var(--red-500);
        --color-feedback-error-bg:   var(--red-50);
        --color-feedback-success:    var(--green-500);
        --color-feedback-success-bg: var(--green-50);
        --color-feedback-warning:    var(--yellow-500);
        --color-feedback-warning-bg: var(--yellow-50);

        --focus-ring: 0 0 0 3px var(--blue-100);
    }
}

@layer base {
    html, body { block-size: 100%; }

    body {
        background-color: var(--color-surface-page);
        color: var(--color-text-primary);
        font-family: var(--font-sans);
        font-size: var(--text-md);
        line-height: var(--leading-normal);
        font-weight: var(--weight-regular);
        padding-block-end: env(safe-area-inset-bottom, 0);
    }

    a {
        color: var(--color-text-link);
        text-decoration: none;
        transition: opacity var(--dur-fast) var(--ease-standard);
    }
    a:hover { opacity: 0.75; }

    h1, h2, h3, h4 { font-weight: var(--weight-regular); line-height: var(--leading-tight); }

    ::selection { background: var(--blue-100); color: var(--gray-900); }

    ::-webkit-scrollbar { inline-size: 12px; block-size: 12px; }
    ::-webkit-scrollbar-track { background: var(--color-surface-page); }
    ::-webkit-scrollbar-thumb { background: var(--gray-300); border-radius: var(--radius-full); }
    ::-webkit-scrollbar-thumb:hover { background: var(--gray-400); }

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

    :where(.btn, .nav-links a, .folder-list a, label, .tab, .view-link) { user-select: none; }
    :where(.msg-body, .prose, input, textarea) { user-select: text; }

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

    @media print {
        nav, .sidebar, .toolbar, .bulk-toolbar, .new-mail-banner,
        .pagination, .compose-form .actions, .nav-toggle, footer,
        .flash, .skip-link {
            display: none;
        }
        .layout { display: block; padding: 0; min-block-size: 0; }
        .content { padding: 0; }
        main:not(.content) { min-block-size: 0; padding: 0; }
        .msg-detail { padding-block: 0; }
        body { background: #fff; color: #000; }
        a { color: #000; text-decoration: underline; }
    }
}

@layer layout {
    .container {
        max-inline-size: 900px;
        margin-inline: auto;
        padding-inline: var(--space-6);
    }

    main:not(.content) {
        min-block-size: calc(100dvh - 57px);
        padding-block: var(--space-6) var(--space-8);
    }

    .layout {
        display: flex;
        gap: var(--space-6);
        max-inline-size: 1100px;
        margin-inline: auto;
        padding-inline: var(--space-6);
        min-block-size: calc(100dvh - 57px);
    }

    .sidebar {
        inline-size: 190px;
        flex-shrink: 0;
        padding-block: var(--space-6);
    }

    .content {
        flex: 1;
        min-inline-size: 0;
        padding-block: var(--space-4);
    }

    @media (max-width: 48rem) {
        .layout { flex-direction: column; padding-inline: var(--space-5); }
        .sidebar { inline-size: 100%; padding-block: var(--space-4); }
        .sidebar .folder-list { display: flex; flex-wrap: wrap; gap: var(--space-1); }
        .content { padding-block: var(--space-2); }
        .msg-table .col-from { inline-size: 120px; }
        .login-box { padding: var(--space-5); }
        nav .nav-links { gap: var(--space-1); }
        .cal-layout { flex-direction: column; }
        .cal-sidebar { inline-size: 100%; }
    }

    @media (max-width: 30rem) {
        .layout { padding-inline: var(--space-4); }
        .msg-detail .msg-subject { font-size: var(--text-lg); }
        nav .nav-inner { flex-direction: column; padding-block: var(--space-2); padding-inline: var(--space-4); gap: var(--space-2); }
    }
}

@layer components {

    nav {
        --nav-bg: color-mix(in oklch, var(--color-surface-page), transparent 4%);
        background-color: var(--nav-bg);
        backdrop-filter: blur(10px);
        position: sticky;
        inset-block-start: 0;
        z-index: var(--z-sticky);
        border-block-end: var(--border-hairline) solid var(--color-border-subtle);
        padding-block-start: env(safe-area-inset-top, 0);
    }

    .sidebar-toggle {
        display: none;
        align-items: center;
        justify-content: center;
        gap: var(--space-2);
        inline-size: 100%;
        min-block-size: 44px;
        margin-block-end: var(--space-3);
        background: var(--color-surface-sunken);
        border: var(--border-hairline) solid var(--color-border-default);
        border-radius: var(--radius-sm);
        color: var(--color-text-secondary);
        font-size: var(--text-sm);
        cursor: pointer;
        font-family: inherit;
    }
    .sidebar-toggle:hover { background: var(--gray-100); color: var(--color-text-primary); }
    .sidebar-toggle:focus-visible { outline: none; box-shadow: var(--focus-ring); }

    nav .nav-inner {
        max-inline-size: 900px;
        margin-inline: auto;
        padding-inline: var(--space-6);
        display: flex;
        align-items: center;
        justify-content: space-between;
        min-block-size: 56px;
    }

    nav .nav-left { display: flex; align-items: center; gap: var(--space-6); }

    nav .logo {
        color: var(--color-text-primary);
        font-weight: var(--weight-medium);
        font-size: var(--text-md);
        letter-spacing: 0.2px;
        padding-block: var(--space-2);
    }
    nav .logo:hover { opacity: 1; }

    nav .nav-links { list-style: none; display: flex; gap: var(--space-1); }

    nav .nav-links a {
        color: var(--color-text-secondary);
        font-size: var(--text-sm);
        text-transform: lowercase;
        padding-block: var(--space-2);
        padding-inline: var(--space-3);
        border-radius: var(--radius-sm);
        transition: background var(--dur-fast) var(--ease-standard), color var(--dur-fast) var(--ease-standard);
        display: inline-block;
        min-block-size: 24px;
    }
    nav .nav-links a:hover { color: var(--color-text-primary); background: var(--gray-100); opacity: 1; }
    nav .nav-links a.active { color: var(--color-action-primary); background: var(--blue-50); }

    nav .nav-right {
        display: flex;
        align-items: center;
        gap: var(--space-4);
        color: var(--color-text-secondary);
        font-size: var(--text-sm);
    }
    nav .nav-right a { color: var(--color-text-secondary); font-size: var(--text-sm); }
    nav .nav-right a:hover { color: var(--color-text-primary); opacity: 1; }
    nav .current-user { color: var(--color-text-secondary); }

    .toolbar-overflow { display: none; }

    .nav-toggle {
        display: none;
        align-items: center;
        justify-content: center;
        inline-size: 44px;
        block-size: 44px;
        background: transparent;
        border: var(--border-hairline) solid transparent;
        border-radius: var(--radius-sm);
        font-size: var(--text-lg);
        line-height: 1;
        color: var(--color-text-primary);
        cursor: pointer;
        flex-shrink: 0;
    }
    .nav-toggle:hover { background: var(--gray-100); }
    .nav-toggle:focus-visible { outline: none; box-shadow: var(--focus-ring); }

    footer {
        background: var(--color-surface-page);
        backdrop-filter: blur(10px);
        padding-block: var(--space-6) var(--space-5);
        text-align: center;
        border-block-start: var(--border-hairline) solid var(--color-border-subtle);
    }
    footer p { color: var(--color-text-disabled); font-size: var(--text-xs); }

    .sidebar .compose-btn {
        --btn-bg: var(--color-action-primary);
        --btn-fg: var(--color-text-on-accent);
        display: block;
        background: var(--btn-bg);
        border: var(--border-hairline) solid transparent;
        color: var(--btn-fg);
        padding-block: var(--space-3);
        padding-inline: var(--space-4);
        font-size: var(--text-sm);
        font-weight: var(--weight-medium);
        text-align: center;
        border-radius: var(--radius-full);
        transition: background var(--dur-fast) var(--ease-standard), box-shadow var(--dur-fast) var(--ease-standard);
        cursor: pointer;
        margin-block-end: var(--space-5);
        min-block-size: 44px;
        line-height: 28px;
    }
    .sidebar .compose-btn:hover { background: var(--color-action-primary-hover); box-shadow: var(--shadow-1); opacity: 1; }
    .sidebar .compose-btn:active { background: var(--color-action-primary-active); box-shadow: none; }
    .sidebar .compose-btn:focus-visible { outline: none; box-shadow: var(--focus-ring); }

    .sidebar .folder-list { list-style: none; }

    .sidebar .folder-list li a {
        display: flex;
        justify-content: space-between;
        gap: var(--space-2);
        padding-block: var(--space-2);
        padding-inline: var(--space-3);
        color: var(--color-text-secondary);
        font-size: var(--text-sm);
        border-radius: var(--radius-sm);
        transition: background var(--dur-fast) var(--ease-standard), color var(--dur-fast) var(--ease-standard);
        min-block-size: 24px;
    }
    .sidebar .folder-list li a:hover { color: var(--color-text-primary); background: var(--gray-100); opacity: 1; }
    .sidebar .folder-list li a.active,
    .sidebar .folder-list li.active a { color: var(--color-action-primary); background: var(--blue-50); font-weight: var(--weight-medium); }
    .sidebar .folder-list li .count { color: var(--color-text-secondary); font-size: var(--text-xs); }
    .sidebar .folder-list li.drag-target a { background: var(--blue-50); outline: var(--border-hairline) dashed var(--color-action-primary); }

    .sidebar .folder-item { display: flex; align-items: center; gap: var(--space-1); }
    .sidebar .folder-item a { flex: 1; min-inline-size: 0; }
    .sidebar .folder-manage { display: flex; gap: var(--space-1); flex-shrink: 0; }
    .sidebar .folder-manage button {
        background: none;
        border: none;
        color: var(--color-text-disabled);
        cursor: pointer;
        font-size: var(--text-xs);
        padding: var(--space-1);
        line-height: 1;
        font-family: inherit;
    }
    .sidebar .folder-manage button:hover { color: var(--color-text-secondary); }
    .sidebar .new-folder-form {
        display: flex;
        gap: var(--space-2);
        margin-block-start: var(--space-3);
    }
    .sidebar .new-folder-form input {
        flex: 1;
        min-inline-size: 0;
        font-size: var(--text-sm);
        padding-block: var(--space-1);
        padding-inline: var(--space-2);
        border: var(--border-hairline) solid var(--color-border-default);
        border-radius: var(--radius-sm);
        background: var(--color-surface-page);
        color: var(--color-text-primary);
    }
    .sidebar .new-folder-form .btn { flex-shrink: 0; padding-block: var(--space-1); padding-inline: var(--space-3); font-size: var(--text-xs); }

    .sidebar .sidebar-footer {
        margin-block-start: var(--space-6);
        padding-block-start: var(--space-4);
        border-block-start: var(--border-hairline) solid var(--color-border-subtle);
        font-size: var(--text-xs);
    }
    .sidebar .sidebar-footer a {
        color: var(--color-text-disabled);
        display: block;
        padding-block: var(--space-1);
        transition: color var(--dur-fast) var(--ease-standard);
    }
    .sidebar .sidebar-footer a:hover { color: var(--color-text-secondary); opacity: 1; }

    .toolbar {
        display: flex;
        align-items: center;
        gap: var(--space-2);
        padding-block: var(--space-3);
        border-block-end: var(--border-hairline) solid var(--color-border-subtle);
        flex-wrap: wrap;
    }
    .toolbar .btn, .toolbar form { flex-shrink: 0; }

    :where(.btn) {
        --btn-bg: var(--color-action-neutral-bg);
        --btn-fg: var(--color-text-primary);
        --btn-border: var(--color-border-default);
        position: relative;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: var(--space-2);
        min-block-size: 36px;
        padding-block: var(--space-2);
        padding-inline: var(--space-4);
        font: var(--weight-medium) var(--text-sm)/1 var(--font-sans);
        color: var(--btn-fg);
        background: var(--btn-bg);
        border: var(--border-hairline) solid var(--btn-border);
        border-radius: var(--radius-sm);
        cursor: pointer;
        text-transform: lowercase;
        letter-spacing: 0.2px;
        text-decoration: none;
        transition: background var(--dur-fast) var(--ease-standard),
                    box-shadow var(--dur-fast) var(--ease-standard),
                    border-color var(--dur-fast) var(--ease-standard),
                    color var(--dur-fast) var(--ease-standard);
    }
    .btn:hover {
        background: color-mix(in oklch, var(--btn-bg), black 4%);
        border-color: var(--color-border-strong);
        box-shadow: var(--shadow-1);
        color: var(--btn-fg);
        opacity: 1;
    }
    .btn:focus-visible { outline: none; box-shadow: var(--focus-ring); }
    .btn:active { background: color-mix(in oklch, var(--btn-bg), black 8%); box-shadow: none; }
    .btn:disabled, .btn[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; box-shadow: none; }

    .btn-primary {
        --btn-bg: var(--color-action-primary);
        --btn-fg: var(--color-text-on-accent);
        --btn-border: transparent;
    }
    .btn-primary:hover { background: var(--color-action-primary-hover); border-color: transparent; }
    .btn-primary:active { background: var(--color-action-primary-active); }

    .action-bulk-delete, .action-delete, .action-revoke, .action-decline {
        --btn-bg: var(--color-feedback-error-bg);
        --btn-border: color-mix(in oklch, var(--color-feedback-error), transparent 60%);
        --btn-fg: var(--color-feedback-error);
    }
    .action-bulk-delete:hover, .action-delete:hover, .action-revoke:hover, .action-decline:hover {
        background: color-mix(in oklch, var(--color-feedback-error-bg), var(--color-feedback-error) 12%);
        border-color: var(--color-feedback-error);
    }
    .action-accept {
        --btn-bg: var(--color-feedback-success);
        --btn-fg: var(--color-text-on-accent);
        --btn-border: transparent;
    }
    .action-accept:hover { background: color-mix(in oklch, var(--color-feedback-success), black 10%); }
    .action-tentative {
        --btn-bg: var(--color-feedback-warning-bg);
        --btn-border: color-mix(in oklch, var(--color-feedback-warning), transparent 50%);
        --btn-fg: var(--gray-800);
    }

    .separator { inline-size: 1px; block-size: 20px; background: var(--color-border-subtle); margin-inline: var(--space-1); }

    :is(.login-box input[type="text"], .login-box input[type="password"], .login-box select,
        .compose-form .field input, .compose-form .field textarea,
        .event-form .field input[type="text"], .event-form .field input[type="datetime-local"],
        .event-form .field select, .event-form .field textarea,
        .share-create-form .field input[type="text"],
        .drive-mkdir-input) {
        --field-bg: var(--color-surface-page);
        --field-fg: var(--color-text-primary);
        --field-border: var(--color-border-default);
        --field-radius: var(--radius-sm);
        display: block;
        inline-size: 100%;
        min-block-size: 40px;
        background: var(--field-bg);
        border: var(--border-hairline) solid var(--field-border);
        color: var(--field-fg);
        padding-block: var(--space-2);
        padding-inline: var(--space-3);
        font-size: var(--text-sm);
        border-radius: var(--field-radius);
        font-family: inherit;
        cursor: text;
        transition: border-color var(--dur-fast) var(--ease-standard), box-shadow var(--dur-fast) var(--ease-standard);
    }
    :is(.login-box input, .login-box select,
        .compose-form .field input, .compose-form .field textarea,
        .event-form .field input, .event-form .field select, .event-form .field textarea,
        .share-create-form .field input,
        .drive-mkdir-input):hover {
        border-color: var(--color-border-strong);
    }
    :is(.login-box input, .login-box select,
        .compose-form .field input, .compose-form .field textarea,
        .event-form .field input, .event-form .field select, .event-form .field textarea,
        .share-create-form .field input,
        .drive-mkdir-input):focus-visible,
    :is(.login-box input, .login-box select,
        .compose-form .field input, .compose-form .field textarea,
        .event-form .field input, .event-form .field select, .event-form .field textarea,
        .share-create-form .field input,
        .drive-mkdir-input):focus {
        outline: none;
        border-color: var(--color-border-focus);
        box-shadow: var(--focus-ring);
    }
    .login-box select, .event-form .field select { cursor: pointer; appearance: none; }
    .login-box select option { background: var(--color-surface-page); color: var(--color-text-primary); }
    .compose-form .field textarea, .event-form .field textarea { resize: vertical; line-height: var(--leading-normal); }
    .compose-form .field textarea { min-block-size: 300px; }

    .settings-page { max-inline-size: 640px; }
    .settings-section {
        margin-block-end: var(--space-6);
        padding-block-end: var(--space-5);
        border-block-end: var(--border-hairline) solid var(--color-border-subtle);
    }
    .settings-section h3 {
        font-size: var(--text-md);
        font-weight: var(--weight-medium);
        color: var(--color-text-primary);
        margin-block-end: var(--space-4);
    }
    .settings-note { font-size: var(--text-sm); color: var(--color-text-secondary); margin-block-end: var(--space-3); }
    .settings-form .field, .settings-totp-form .field { margin-block-end: var(--space-4); }
    .settings-form label, .settings-totp-form label {
        display: block;
        color: var(--color-text-secondary);
        font-size: var(--text-sm);
        margin-block-end: var(--space-2);
    }
    .settings-form input[type="text"],
    .settings-form input[type="email"],
    .settings-form select,
    .settings-form textarea,
    .settings-totp-form input[type="text"] {
        inline-size: 100%;
        padding-block: var(--space-2);
        padding-inline: var(--space-3);
        border: var(--border-hairline) solid var(--color-border-default);
        border-radius: var(--radius-sm);
        background: var(--color-surface-page);
        color: var(--color-text-primary);
        font-size: var(--text-sm);
        font-family: inherit;
    }
    .settings-form textarea { min-block-size: 6rem; resize: vertical; }
    .settings-form .actions { margin-block-start: var(--space-4); }
    .event-form .field textarea { min-block-size: 8rem; }
    .drive-mkdir-input { inline-size: 12rem; min-block-size: 36px; }
    .drive-mkdir-input::placeholder { color: var(--color-text-disabled); }

    .search-form { display: inline-flex; gap: var(--space-2); align-items: center; }
    .search-input {
        --search-bg: var(--color-surface-page);
        --search-border: var(--color-border-default);
        background: var(--search-bg);
        border: var(--border-hairline) solid var(--search-border);
        color: var(--color-text-primary);
        padding-block: var(--space-2);
        padding-inline: var(--space-4);
        font-size: var(--text-sm);
        border-radius: var(--radius-full);
        font-family: inherit;
        inline-size: 14rem;
        min-block-size: 36px;
        cursor: text;
        transition: box-shadow var(--dur-medium) var(--ease-standard), border-color var(--dur-medium) var(--ease-standard);
    }
    .search-input:hover { box-shadow: var(--shadow-1); border-color: transparent; }
    .search-input:focus, .search-input:focus-visible {
        outline: none;
        box-shadow: var(--focus-ring);
        border-color: transparent;
    }
    .search-input::placeholder { color: var(--color-text-secondary); }

    .msg-table { inline-size: 100%; }
    .msg-table tbody tr.message-row { content-visibility: auto; contain-intrinsic-size: auto 44px; }
    .msg-table tr {
        border-block-end: var(--border-hairline) solid var(--color-border-subtle);
        cursor: pointer;
        transition: background var(--dur-fast) var(--ease-standard);
    }
    .msg-table tr:hover { background: var(--gray-50); }
    .msg-table tr.unread td { color: var(--color-text-primary); font-weight: var(--weight-medium); }
    .msg-table tr.unread { background: var(--blue-50); }
    .msg-table tr.unread:hover { background: color-mix(in oklch, var(--blue-50), var(--gray-100) 40%); }

    .msg-table td {
        padding-block: var(--space-2);
        padding-inline: var(--space-3);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        font-size: var(--text-sm);
        color: var(--color-text-secondary);
        vertical-align: middle;
    }
    .msg-table th {
        padding-block: var(--space-2);
        padding-inline: var(--space-3);
        text-align: start;
        font-size: var(--text-xs);
        font-weight: var(--weight-medium);
        color: var(--color-text-secondary);
        text-transform: lowercase;
        border-block-end: var(--border-hairline) solid var(--color-border-default);
    }

    .msg-table .col-check { inline-size: 28px; text-align: center; }
    .msg-table .col-check input, .row-check, .select-all { accent-color: var(--color-action-primary); cursor: pointer; min-inline-size: 16px; min-block-size: 16px; }
    .msg-table .col-star { inline-size: 24px; text-align: center; color: var(--gray-400); cursor: pointer; }
    .msg-table .col-star.flagged { color: var(--yellow-500); }
    .msg-table .col-from { inline-size: 200px; color: var(--gray-800); }
    .msg-table .col-subject a { color: var(--gray-800); }
    .msg-table tr.unread .col-from { color: var(--color-text-primary); }
    .msg-table tr.unread .col-subject a { color: var(--color-text-primary); }
    .msg-table .col-date { inline-size: 80px; text-align: end; font-size: var(--text-xs); color: var(--color-text-disabled); }
    .msg-table tbody tr.message-row { cursor: grab; }
    .msg-table tbody tr.message-row.row-focused { background: var(--blue-50); outline: var(--border-hairline) solid var(--color-action-primary); outline-offset: -1px; }
    .msg-table tr.thread-reply-row.thread-collapsed { display: none; }
    .msg-table tr.thread-reply-row .col-subject { padding-inline-start: var(--space-5); }
    .thread-indent { color: var(--color-text-disabled); margin-inline-end: var(--space-1); }
    .thread-toggle {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-inline-size: 1.4rem;
        block-size: 1.4rem;
        padding: 0;
        margin-inline-end: var(--space-1);
        border: var(--border-hairline) solid var(--color-border-default);
        border-radius: var(--radius-full);
        background: var(--color-surface-sunken);
        color: var(--color-text-secondary);
        font-size: var(--text-xs);
        font-weight: var(--weight-medium);
        cursor: pointer;
        vertical-align: middle;
    }
    .thread-toggle:hover { border-color: var(--color-action-primary); color: var(--color-action-primary); }

    .sort-controls { display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-xs); }
    .sort-controls .sort-label { color: var(--color-text-secondary); }
    .sort-controls .sort-link { color: var(--color-text-disabled); }
    .sort-controls .sort-link:hover { color: var(--color-text-secondary); opacity: 1; }
    .sort-controls .sort-link.active { color: var(--color-action-primary); font-weight: var(--weight-medium); }

    .msg-detail { padding-block: var(--space-5); }
    .msg-detail .msg-header {
        border-block-end: var(--border-hairline) solid var(--color-border-subtle);
        padding-block-end: var(--space-5);
        margin-block-end: var(--space-5);
    }
    .msg-detail .msg-subject {
        font-size: var(--text-xl);
        font-weight: var(--weight-regular);
        color: var(--color-text-primary);
        margin-block-end: var(--space-3);
        letter-spacing: var(--tracking-tight);
    }
    .msg-detail .msg-meta { font-size: var(--text-sm); color: var(--color-text-disabled); line-height: 1.8; }
    .msg-detail .msg-meta strong { color: var(--color-text-secondary); font-weight: var(--weight-medium); }
    .msg-detail .msg-body {
        line-height: 1.8;
        font-size: var(--text-sm);
        color: light-dark(var(--gray-800), var(--gray-200));
        word-wrap: break-word;
        overflow-wrap: break-word;
        max-inline-size: 100%;
    }
    .msg-detail .msg-body--html {
        background: var(--color-surface-raised);
        border: var(--border-hairline) solid var(--color-border-subtle);
        border-radius: var(--radius-md);
        padding: var(--space-4);
        overflow-x: auto;
    }
    .msg-detail .prose :where(p, ul, ol, blockquote, pre, table) { margin-block: var(--space-3); }
    .msg-detail .prose :where(h1, h2, h3, h4, h5, h6) {
        margin-block: var(--space-4) var(--space-2);
        font-weight: var(--weight-medium);
        line-height: var(--leading-tight);
        color: var(--color-text-primary);
    }
    .msg-detail .prose :where(h1) { font-size: var(--text-xl); }
    .msg-detail .prose :where(h2) { font-size: var(--text-lg); }
    .msg-detail .prose :where(h3, h4, h5, h6) { font-size: var(--text-md); }
    .msg-detail .prose :where(a) { color: var(--color-text-link); text-decoration: underline; text-underline-offset: 2px; }
    .msg-detail .prose :where(a:hover) { opacity: 1; }
    .msg-detail .prose :where(img, video) { max-inline-size: 100%; block-size: auto; border-radius: var(--radius-sm); }
    .msg-detail .prose :where(table) {
        border-collapse: collapse;
        inline-size: 100%;
        max-inline-size: 100%;
        font-size: var(--text-sm);
    }
    .msg-detail .prose :where(th, td) {
        border: var(--border-hairline) solid var(--color-border-subtle);
        padding: var(--space-2) var(--space-3);
        text-align: start;
        vertical-align: top;
    }
    .msg-detail .prose :where(blockquote) {
        border-inline-start: 3px solid var(--color-border-default);
        padding-inline-start: var(--space-4);
        color: var(--color-text-secondary);
    }
    .msg-detail .prose :where(hr) {
        border: none;
        border-block-start: var(--border-hairline) solid var(--color-border-subtle);
        margin-block: var(--space-4);
    }
    .msg-detail .msg-body pre {
        white-space: pre-wrap;
        font-family: var(--font-mono);
        font-size: var(--text-sm);
        color: var(--gray-800);
        background: var(--color-surface-sunken);
        border: var(--border-hairline) solid var(--color-border-subtle);
        border-radius: var(--radius-sm);
        padding: var(--space-4);
        margin-block: var(--space-4);
    }
    .msg-detail .attachments {
        margin-block-start: var(--space-5);
        padding-block-start: var(--space-5);
        border-block-start: var(--border-hairline) solid var(--color-border-subtle);
    }
    .msg-detail .attachments h4 {
        font-size: var(--text-xs);
        color: var(--color-text-secondary);
        font-weight: var(--weight-medium);
        margin-block-end: var(--space-3);
        text-transform: lowercase;
    }
    .msg-detail .attachment-item {
        display: inline-block;
        padding-block: var(--space-2);
        padding-inline: var(--space-4);
        margin-block: var(--space-1);
        margin-inline-end: var(--space-2);
        background: var(--color-surface-sunken);
        border: var(--border-hairline) solid var(--color-border-default);
        border-radius: var(--radius-sm);
        font-size: var(--text-sm);
        transition: all var(--dur-fast) var(--ease-standard);
    }
    .msg-detail .attachment-item:hover { border-color: var(--color-border-strong); background: var(--gray-100); box-shadow: var(--shadow-1); }
    .msg-detail .attachment-item a { color: var(--gray-800); }
    .msg-detail .attachment-item.attachment-image {
        display: inline-flex;
        flex-direction: column;
        align-items: center;
        gap: var(--space-2);
        vertical-align: top;
    }
    .msg-detail .attachment-thumb {
        max-inline-size: 120px;
        max-block-size: 120px;
        object-fit: cover;
        border-radius: var(--radius-sm);
        border: var(--border-hairline) solid var(--color-border-default);
        display: block;
    }
    .msg-detail .attachment-caption { font-size: var(--text-xs); color: var(--color-text-secondary); }

    .lightbox-overlay {
        position: fixed;
        inset: 0;
        z-index: 2000;
        display: flex;
        align-items: center;
        justify-content: center;
        background: color-mix(in oklch, var(--gray-950), transparent 15%);
        padding: var(--space-6);
    }
    .lightbox-overlay .lightbox-image {
        max-inline-size: min(92vw, 1200px);
        max-block-size: 88vh;
        object-fit: contain;
        border-radius: var(--radius-md);
        box-shadow: var(--shadow-3);
    }
    .lightbox-overlay .lightbox-close {
        position: absolute;
        inset-block-start: var(--space-4);
        inset-inline-end: var(--space-4);
        background: var(--color-surface-raised);
        border: var(--border-hairline) solid var(--color-border-default);
        border-radius: var(--radius-full);
        inline-size: 2.5rem;
        block-size: 2.5rem;
        font-size: 1.4rem;
        line-height: 1;
        cursor: pointer;
        color: var(--color-text-primary);
    }

    .settings-filters .filter-row {
        display: flex;
        align-items: center;
        gap: var(--space-2);
        flex-wrap: wrap;
        padding-block: var(--space-2);
        border-block-end: var(--border-hairline) solid var(--color-border-subtle);
    }
    .settings-filters .filter-summary { flex: 1; font-size: var(--text-sm); color: var(--color-text-secondary); }
    .settings-filters .filter-add-form { margin-block-start: var(--space-4); }
    .settings-filters .filter-add-form .field { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
    .settings-filters .filter-add-form select,
    .settings-filters .filter-add-form input[type="text"] { flex: 1; min-inline-size: 8rem; }
    .btn-sm { padding-block: var(--space-1); padding-inline: var(--space-2); font-size: var(--text-xs); }

    .compose-attachments {
        display: flex;
        flex-direction: column;
        gap: var(--space-2);
    }
    .compose-attachment-option {
        display: flex;
        align-items: center;
        gap: var(--space-2);
        font-size: var(--text-sm);
        cursor: pointer;
    }

    .login-page { display: flex; justify-content: center; align-items: center; min-block-size: 100dvh; }
    .login-box { inline-size: 100%; max-inline-size: 380px; padding: var(--space-6); }
    .login-box .login-header { text-align: center; margin-block-end: var(--space-6); }
    .login-box .login-header h1 { font-size: var(--text-xl); font-weight: var(--weight-regular); letter-spacing: 0.5px; margin-block-end: var(--space-2); }
    .login-box .login-header p { color: var(--color-text-secondary); font-size: var(--text-sm); }
    .login-box .login-form {
        background: var(--color-surface-raised);
        border: var(--border-hairline) solid var(--color-border-default);
        border-radius: var(--radius-lg);
        padding: var(--space-6);
        box-shadow: var(--shadow-1);
    }
    .login-box label { display: block; color: var(--color-text-secondary); font-size: var(--text-sm); margin-block-end: var(--space-2); }
    .login-box input, .login-box select { margin-block-end: var(--space-4); }
    .login-box .login-btn {
        --btn-bg: var(--color-action-primary);
        --btn-fg: var(--color-text-on-accent);
        display: block;
        inline-size: 100%;
        background: var(--btn-bg);
        border: var(--border-hairline) solid transparent;
        color: var(--btn-fg);
        padding-block: var(--space-3);
        padding-inline: var(--space-5);
        font-size: var(--text-sm);
        font-weight: var(--weight-medium);
        border-radius: var(--radius-full);
        cursor: pointer;
        font-family: inherit;
        letter-spacing: 0.3px;
        text-transform: lowercase;
        min-block-size: 44px;
        transition: background var(--dur-fast) var(--ease-standard), box-shadow var(--dur-fast) var(--ease-standard);
    }
    .login-box .login-btn:hover { background: var(--color-action-primary-hover); box-shadow: var(--shadow-1); }
    .login-box .login-btn:active { background: var(--color-action-primary-active); box-shadow: none; }
    .login-box .login-btn:focus-visible { outline: none; box-shadow: var(--focus-ring); }
    .login-box .error {
        background: var(--color-feedback-error-bg);
        border: var(--border-hairline) solid color-mix(in oklch, var(--color-feedback-error), transparent 60%);
        color: var(--color-feedback-error);
        padding: var(--space-4);
        font-size: var(--text-sm);
        border-radius: var(--radius-sm);
        margin-block-end: var(--space-4);
    }
    .login-box .login-footer { text-align: center; margin-block-start: var(--space-5); font-size: var(--text-sm); }
    .login-box .login-footer a { color: var(--color-text-disabled); }
    .login-box .login-footer a:hover { color: var(--color-text-secondary); opacity: 1; }
    .login-box .domain-note { text-align: center; font-size: var(--text-xs); color: var(--color-text-disabled); margin-block-start: var(--space-4); }

    .compose-form { padding-block: var(--space-5); }
    .compose-form .field { margin-block-end: var(--space-4); display: flex; align-items: center; }
    .compose-form .field label {
        inline-size: 64px;
        font-size: var(--text-sm);
        color: var(--color-text-secondary);
        text-align: end;
        padding-inline-end: var(--space-4);
        flex-shrink: 0;
        text-transform: lowercase;
    }
    .compose-form .field input, .compose-form .field textarea, .compose-form .field input[type="file"] { flex: 1; }
    .compose-form .actions { padding-inline-start: 64px; margin-block-start: var(--space-4); }

    .send-pending {
        max-inline-size: 480px;
        margin-inline: auto;
        margin-block: var(--space-8);
        padding: var(--space-6);
        text-align: center;
        background: var(--color-surface-raised);
        border: var(--border-hairline) solid var(--color-border-default);
        border-radius: var(--radius-lg);
    }
    .send-pending .countdown { font-weight: var(--weight-medium); }
    .send-pending .action-undo-send { margin-block-start: var(--space-4); }

    .pagination {
        padding-block: var(--space-3);
        font-size: var(--text-xs);
        color: var(--color-text-disabled);
        text-align: end;
        border-block-start: var(--border-hairline) solid var(--color-border-subtle);
    }
    .pagination a { color: var(--color-text-secondary); margin-inline: var(--space-1); }

    .action-toggle-hide-read { min-inline-size: 7rem; text-align: center; }
    .action-mark-all-read { white-space: nowrap; }
    .page-info { min-inline-size: 8rem; white-space: nowrap; }
    .message-list { min-block-size: 60vh; }

    .empty-state { padding: var(--space-7) var(--space-4); text-align: center; color: var(--color-text-disabled); font-size: var(--text-md); }

    .flash {
        padding-block: var(--space-3);
        padding-inline: var(--space-4);
        font-size: var(--text-sm);
        border: var(--border-hairline) solid var(--color-border-subtle);
        border-radius: var(--radius-sm);
        margin-block-end: var(--space-2);
    }
    .flash.success { background: var(--color-feedback-success-bg); color: var(--color-feedback-success); border-color: color-mix(in oklch, var(--color-feedback-success), transparent 65%); }
    .flash.error { background: var(--color-feedback-error-bg); color: var(--color-feedback-error); border-color: color-mix(in oklch, var(--color-feedback-error), transparent 65%); }

    .new-mail-banner {
        padding-block: var(--space-3);
        padding-inline: var(--space-4);
        font-size: var(--text-sm);
        border: var(--border-hairline) solid color-mix(in oklch, var(--color-action-primary), transparent 70%);
        border-radius: var(--radius-sm);
        margin-block-end: var(--space-2);
        background: var(--blue-50);
        color: var(--color-action-primary-active);
        cursor: pointer;
        min-block-size: 24px;
    }
    .new-mail-banner:hover { background: var(--blue-100); }
    .new-mail-banner[hidden] { display: none; }

    .scroll-sentinel { cursor: default; }
    .scroll-sentinel:hover { background: transparent !important; }
    .scroll-sentinel td { text-align: center; padding-block: var(--space-5); }
    .scroll-status { color: var(--color-text-disabled); font-size: var(--text-xs); letter-spacing: 0.3px; text-transform: lowercase; }

    .cal-layout { display: flex; gap: var(--space-4); align-items: flex-start; }
    .cal-sidebar { inline-size: 200px; flex-shrink: 0; padding-block: var(--space-2); }
    .cal-sidebar-title {
        font-size: var(--text-xs);
        color: var(--color-text-secondary);
        text-transform: lowercase;
        letter-spacing: 0.4px;
        margin-block-end: var(--space-2);
        padding-block-end: var(--space-2);
        border-block-end: var(--border-hairline) solid var(--color-border-subtle);
    }
    .cal-list { list-style: none; padding: 0; margin-block-end: var(--space-4); }
    .cal-row { padding-block: var(--space-1); }
    .cal-row form { font-size: var(--text-sm); color: var(--gray-800); }
    .cal-color { display: inline-block; inline-size: 0.8rem; block-size: 0.8rem; border-radius: var(--radius-xs); }
    .cal-name { color: var(--gray-800); }
    .cal-visible { accent-color: var(--color-action-primary); cursor: pointer; }
    .new-event-btn { display: block; text-align: center; margin-block-start: var(--space-2); }
    .cal-main { flex: 1; min-inline-size: 0; }
    .cal-period { font-size: var(--text-lg); font-weight: var(--weight-regular); padding-inline: var(--space-2); color: var(--color-text-primary); letter-spacing: var(--tracking-tight); }

    .view-switcher { display: inline-flex; gap: var(--space-1); }
    .view-switcher .view-link {
        padding-block: var(--space-2);
        padding-inline: var(--space-3);
        font-size: var(--text-sm);
        color: var(--color-text-secondary);
        border-radius: var(--radius-sm);
        text-transform: lowercase;
        min-block-size: 24px;
        display: inline-flex;
        align-items: center;
    }
    .view-switcher .view-link.active { background: var(--blue-50); color: var(--color-action-primary); }
    .view-switcher .view-link:hover { background: var(--gray-100); color: var(--color-text-primary); opacity: 1; }

    .cal-grid { inline-size: 100%; table-layout: fixed; }
    .cal-grid.month th {
        padding: var(--space-2);
        font-size: var(--text-xs);
        text-transform: lowercase;
        color: var(--color-text-secondary);
        background: var(--color-surface-sunken);
        border: var(--border-hairline) solid var(--color-border-subtle);
    }
    .cal-grid.month td { border: var(--border-hairline) solid var(--color-border-subtle); padding: var(--space-2); vertical-align: top; block-size: 100px; font-size: var(--text-xs); }
    .cal-grid.month td.today { background: var(--blue-50); }
    .cal-grid.month td.other-month { color: var(--color-text-disabled); }
    .cal-grid.month td.other-month .day-num a { color: var(--color-text-disabled); }
    .cal-grid.month .day-num a { color: var(--gray-800); font-weight: var(--weight-medium); }
    .cal-grid.day th, .cal-grid.week th {
        padding: var(--space-2);
        font-size: var(--text-xs);
        color: var(--color-text-secondary);
        text-align: start;
        background: var(--color-surface-sunken);
        border-block-end: var(--border-hairline) solid var(--color-border-subtle);
    }
    .cal-grid.day td, .cal-grid.week td { border: var(--border-hairline) solid var(--color-border-subtle); padding: var(--space-2); font-size: var(--text-xs); vertical-align: top; block-size: 2.5rem; }
    .cal-grid.week td { inline-size: calc((100% - 4rem) / 7); }
    .cal-grid.week th.today { background: var(--blue-50); color: var(--color-action-primary); }
    .hour-label { inline-size: 4rem; color: var(--color-text-disabled); font-size: var(--text-xs); vertical-align: middle !important; }
    .cal-day-allday {
        display: flex;
        flex-wrap: wrap;
        gap: var(--space-2);
        padding-block: var(--space-2);
        border-block-end: var(--border-hairline) solid var(--color-border-subtle);
        margin-block-end: var(--space-2);
    }

    .cal-event {
        display: block;
        padding-block: var(--space-1);
        padding-inline: var(--space-2);
        margin-block: var(--space-1);
        background: var(--gray-100);
        border-inline-start: 3px solid var(--color-action-primary);
        color: var(--gray-800);
        font-size: var(--text-xs);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        border-radius: 0 var(--radius-xs) var(--radius-xs) 0;
        transition: all var(--dur-fast) var(--ease-standard);
    }
    .cal-event:hover { background: var(--gray-200); color: var(--color-text-primary); opacity: 1; }
    .cal-event-allday { background: var(--blue-50); }
    .cal-overflow { font-size: var(--text-xs); color: var(--color-text-disabled); padding-inline-start: var(--space-2); }

    .agenda-list { list-style: none; padding: 0; margin: 0; }
    .agenda-item { display: flex; gap: var(--space-4); padding-block: var(--space-2); border-block-end: var(--border-hairline) solid var(--color-border-subtle); align-items: center; }
    .agenda-when { inline-size: 12rem; color: var(--color-text-secondary); font-size: var(--text-sm); flex-shrink: 0; }
    .agenda-summary { flex: 1; padding-block: var(--space-1); padding-inline: var(--space-3); border-inline-start: 3px solid var(--color-action-primary); color: var(--gray-800); }
    .agenda-empty { padding: var(--space-6); text-align: center; color: var(--color-text-disabled); }

    .event-form-wrap { padding-block: var(--space-4); max-inline-size: 600px; }
    .event-form .field { display: flex; align-items: flex-start; margin-block-end: var(--space-3); }
    .event-form .field label {
        inline-size: 7rem;
        padding-block-start: var(--space-2);
        font-size: var(--text-sm);
        color: var(--color-text-secondary);
        text-transform: lowercase;
        flex-shrink: 0;
    }
    .event-form .field input[type="checkbox"] { margin-block-start: var(--space-2); accent-color: var(--color-action-primary); cursor: pointer; }
    .event-form .actions { padding-inline-start: 7rem; margin-block-start: var(--space-4); }

    .event-detail { padding-block: var(--space-5); }
    .event-summary { font-size: var(--text-xl); font-weight: var(--weight-regular); color: var(--color-text-primary); margin-block-end: var(--space-4); letter-spacing: var(--tracking-tight); }
    .event-meta div { padding-block: var(--space-1); font-size: var(--text-sm); color: var(--gray-800); }
    .event-meta strong { color: var(--color-text-secondary); font-weight: var(--weight-medium); margin-inline-end: var(--space-2); }
    .event-attendees { list-style: none; padding: 0; margin-block-start: var(--space-2); }
    .event-attendee { padding-block: var(--space-1); color: var(--gray-800); font-size: var(--text-sm); }
    .event-description-text { padding-block: var(--space-2); white-space: pre-wrap; color: var(--color-text-secondary); line-height: 1.6; }
    .event-response { margin-block-start: var(--space-5); padding-block-start: var(--space-4); border-block-start: var(--border-hairline) solid var(--color-border-subtle); }

    .calendar-view {
        padding: var(--space-4);
        background: var(--color-surface-raised);
        border: var(--border-hairline) solid var(--color-border-subtle);
        border-radius: var(--radius-lg);
    }
    .calendar-view .cal-header { display: flex; justify-content: space-between; align-items: center; margin-block-end: var(--space-5); }
    .calendar-view .cal-header h2 { font-size: var(--text-lg); font-weight: var(--weight-regular); letter-spacing: var(--tracking-tight); }
    .calendar-view table { inline-size: 100%; table-layout: fixed; }
    .calendar-view th {
        background: var(--color-surface-sunken);
        border: var(--border-hairline) solid var(--color-border-subtle);
        padding-block: var(--space-2);
        padding-inline: var(--space-2);
        font-size: var(--text-xs);
        font-weight: var(--weight-medium);
        text-align: center;
        color: var(--color-text-secondary);
        text-transform: lowercase;
    }
    .calendar-view td { border: var(--border-hairline) solid var(--color-border-subtle); padding: var(--space-2); vertical-align: top; block-size: 80px; font-size: var(--text-xs); color: var(--gray-800); }
    .calendar-view td .day-num { font-weight: var(--weight-medium); font-size: var(--text-sm); color: var(--color-text-secondary); margin-block-end: var(--space-1); }
    .calendar-view td.today { background: var(--blue-50); }
    .calendar-view td.today .day-num { color: var(--color-action-primary); }
    .calendar-view td.other-month { color: var(--color-text-disabled); }
    .calendar-view td.other-month .day-num { color: var(--color-text-disabled); }
    .calendar-view .event {
        display: block;
        padding-block: var(--space-1);
        padding-inline: var(--space-2);
        margin-block: var(--space-1);
        background: var(--gray-100);
        border-inline-start: 2px solid var(--color-border-strong);
        color: var(--gray-800);
        font-size: var(--text-xs);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        border-radius: 0 var(--radius-xs) var(--radius-xs) 0;
        transition: all var(--dur-fast) var(--ease-standard);
    }
    .calendar-view .event:hover { background: var(--gray-200); color: var(--color-text-primary); opacity: 1; }
    .event-detail .field { margin-block-end: var(--space-2); font-size: var(--text-sm); color: var(--gray-800); }
    .event-detail .field strong { display: inline-block; inline-size: 100px; color: var(--color-text-secondary); font-weight: var(--weight-medium); }

    .drive-toolbar { flex-wrap: wrap; gap: var(--space-2); }
    .drive-breadcrumb { display: inline-flex; align-items: center; gap: var(--space-1); font-size: var(--text-sm); }
    .drive-breadcrumb .crumb { color: var(--color-text-secondary); padding-block: var(--space-1); padding-inline: var(--space-2); border-radius: var(--radius-xs); transition: background var(--dur-fast) var(--ease-standard); }
    .drive-breadcrumb .crumb:hover { background: var(--gray-100); color: var(--color-text-primary); opacity: 1; }
    .drive-breadcrumb .crumb.current { color: var(--color-text-primary); font-weight: var(--weight-medium); }
    .drive-breadcrumb .crumb-sep { color: var(--color-border-strong); }

    .drive-upload-form, .drive-mkdir-form { display: inline-flex; align-items: center; gap: var(--space-2); }
    .action-upload, .action-upload-folder { cursor: pointer; }

    .drive-stats { font-size: var(--text-xs); color: var(--color-text-secondary); letter-spacing: 0.2px; }
    .drive-bulk-toolbar { padding-block: var(--space-2); padding-inline: var(--space-3); }

    .drive-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--space-3); padding-block: var(--space-4); }
    .tile-wrap { position: relative; display: flex; flex-direction: column; }
    .tile {
        --tile-bg: var(--color-surface-raised);
        --tile-border: var(--color-border-subtle);
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding-block: var(--space-5);
        padding-inline: var(--space-2);
        background: var(--tile-bg);
        border: var(--border-hairline) solid var(--tile-border);
        border-radius: var(--radius-md);
        color: var(--gray-800);
        text-align: center;
        transition: box-shadow var(--dur-medium) var(--ease-standard), border-color var(--dur-medium) var(--ease-standard), transform var(--dur-medium) var(--ease-standard);
        min-block-size: 130px;
    }
    .tile:hover { border-color: var(--color-border-strong); color: var(--color-text-primary); opacity: 1; box-shadow: var(--shadow-2); transform: translateY(-2px); }
    .tile:focus-visible { outline: none; box-shadow: var(--focus-ring); }
    .tile-icon { font-size: 2.4rem; line-height: 1; margin-block-end: var(--space-2); opacity: 0.9; }
    .tile-name {
        font-size: var(--text-sm);
        word-break: break-all;
        line-height: 1.2;
        max-inline-size: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
    }
    .tile-meta { font-size: var(--text-xs); color: var(--color-text-disabled); margin-block-start: var(--space-1); letter-spacing: 0.2px; }
    .tile-dir .tile-icon { color: var(--yellow-500); }
    .tile-up { background: var(--color-surface-sunken); border-style: dashed; }
    .tile-up .tile-icon { color: var(--color-text-secondary); font-size: 1.6rem; }

    .tile-check { position: absolute; inset-block-start: var(--space-2); inset-inline-start: var(--space-2); z-index: 2; }
    .tile-check input { accent-color: var(--color-action-primary); cursor: pointer; }
    .tile-action {
        position: absolute;
        inset-block-start: var(--space-2);
        inset-inline-end: var(--space-2);
        background: var(--color-surface-raised);
        border: var(--border-hairline) solid var(--color-border-default);
        color: var(--color-feedback-error);
        inline-size: 1.6rem;
        block-size: 1.6rem;
        border-radius: var(--radius-full);
        cursor: pointer;
        font-size: var(--text-sm);
        line-height: 1;
        padding: 0;
        font-family: inherit;
        z-index: 2;
        box-shadow: var(--shadow-1);
        transition: background var(--dur-fast) var(--ease-standard), color var(--dur-fast) var(--ease-standard);
    }
    .tile-action:hover { background: var(--color-feedback-error-bg); color: var(--color-feedback-error); }
    .tile-action:focus-visible { outline: none; box-shadow: var(--focus-ring); }
    .tile-share-action {
        inset-inline-end: 2.4rem;
        background: var(--color-surface-raised);
        border: var(--border-hairline) solid var(--color-border-default);
        color: var(--color-text-secondary);
        text-decoration: none;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: var(--text-sm);
    }
    .tile-share-action:hover { background: var(--gray-100); color: var(--color-text-primary); opacity: 1; }

    .drive-empty { grid-column: 1 / -1; padding: var(--space-8) var(--space-4); text-align: center; color: var(--color-text-disabled); font-size: var(--text-md); }

    .bulk-toolbar { display: none; gap: var(--space-2); padding-block: var(--space-2); border-block-end: var(--border-hairline) solid var(--color-border-subtle); }
    .bulk-form:has(input.row-check:checked) .bulk-toolbar { display: flex; }
    .drive-bulk-form:has(.row-check:checked) .drive-bulk-toolbar { display: flex; }
    .bulk-label { font-size: var(--text-xs); color: var(--color-text-secondary); letter-spacing: 0.2px; text-transform: lowercase; padding-inline: var(--space-2); }
    .bulk-toolbar select.btn { padding-block: var(--space-2); padding-inline: var(--space-3); }
    .select-all { accent-color: var(--color-action-primary); cursor: pointer; }

    .shared-table { inline-size: 100%; font-size: var(--text-sm); }
    .shared-table th {
        text-align: start;
        padding-block: var(--space-2);
        padding-inline: var(--space-3);
        color: var(--color-text-secondary);
        font-weight: var(--weight-medium);
        text-transform: lowercase;
        letter-spacing: 0.2px;
        border-block-end: var(--border-hairline) solid var(--color-border-default);
        background: var(--color-surface-sunken);
    }
    .shared-table td { padding-block: var(--space-2); padding-inline: var(--space-3); border-block-end: var(--border-hairline) solid var(--color-border-subtle); color: var(--gray-800); vertical-align: middle; }
    .shared-row:hover { background: var(--gray-50); }
    .shared-link-anchor { color: var(--color-text-link); word-break: break-all; font-family: var(--font-mono); font-size: var(--text-xs); }
    .shared-actions { white-space: nowrap; }
    .shared-actions .btn { padding-block: var(--space-1); padding-inline: var(--space-3); font-size: var(--text-xs); }

    .perm-badge {
        display: inline-block;
        inline-size: 1.4rem;
        block-size: 1.4rem;
        line-height: 1.4rem;
        text-align: center;
        border-radius: var(--radius-xs);
        font-size: var(--text-xs);
        font-weight: var(--weight-medium);
        margin-inline: 0.1rem;
        font-family: var(--font-mono);
    }
    .perm-badge.perm-r { background: var(--blue-50); color: var(--blue-600); border: var(--border-hairline) solid var(--blue-100); }
    .perm-badge.perm-c { background: var(--green-50); color: var(--green-500); border: var(--border-hairline) solid color-mix(in oklch, var(--green-500), transparent 65%); }
    .perm-badge.perm-u { background: var(--yellow-50); color: color-mix(in oklch, var(--yellow-500), black 20%); border: var(--border-hairline) solid color-mix(in oklch, var(--yellow-500), transparent 55%); }
    .perm-badge.perm-d { background: var(--red-50); color: var(--red-600); border: var(--border-hairline) solid color-mix(in oklch, var(--red-500), transparent 65%); }

    .share-form-section { padding-block: var(--space-5); max-inline-size: 720px; }
    .share-create-form .field { display: flex; align-items: flex-start; margin-block-end: var(--space-4); gap: var(--space-4); }
    .share-create-form .field > label { inline-size: 7rem; padding-block-start: var(--space-2); font-size: var(--text-sm); color: var(--color-text-secondary); text-transform: lowercase; flex-shrink: 0; }
    .share-create-form .field input[type="text"] { flex: 1; max-inline-size: 30rem; }
    .perm-options { display: flex; flex-direction: column; gap: var(--space-2); }
    .perm-option { display: inline-flex; align-items: center; gap: var(--space-2); cursor: pointer; font-size: var(--text-sm); color: var(--gray-800); padding-block: var(--space-1); }
    .perm-option input { accent-color: var(--color-action-primary); cursor: pointer; }
    .perm-option .perm-label { font-size: var(--text-sm); color: var(--color-text-secondary); }
    .share-create-form .actions { padding-inline-start: 8rem; margin-block-start: var(--space-4); }
    .share-target-label { font-size: var(--text-md); color: var(--gray-800); }
    .share-target-label code { background: var(--color-surface-sunken); padding-block: var(--space-1); padding-inline: var(--space-2); border-radius: var(--radius-xs); color: var(--color-text-primary); font-family: var(--font-mono); }

    .share-existing-title { font-size: var(--text-md); color: var(--color-text-secondary); font-weight: var(--weight-regular); margin-block: var(--space-6) var(--space-3); padding-block-end: var(--space-2); border-block-end: var(--border-hairline) solid var(--color-border-subtle); }
    .share-existing-list { list-style: none; padding: 0; margin: 0; }
    .share-existing-item {
        padding: var(--space-3);
        margin-block: var(--space-2);
        background: var(--color-surface-sunken);
        border: var(--border-hairline) solid var(--color-border-subtle);
        border-radius: var(--radius-sm);
        display: grid;
        grid-template-columns: 1fr auto;
        grid-template-rows: auto auto;
        gap: var(--space-2) var(--space-4);
        align-items: center;
    }
    .share-existing-link code {
        background: var(--gray-900);
        color: var(--blue-100);
        padding-block: var(--space-1);
        padding-inline: var(--space-2);
        border-radius: var(--radius-xs);
        font-size: var(--text-xs);
        word-break: break-all;
        display: block;
        font-family: var(--font-mono);
    }
    .share-existing-meta { font-size: var(--text-xs); color: var(--color-text-secondary); grid-column: 1 / 2; }
    .share-existing-name { color: var(--color-text-secondary); font-style: italic; }
    .share-existing-item .btn { grid-row: 1 / 3; grid-column: 2 / 3; align-self: center; }

    .share-public-layout { max-inline-size: 1100px; margin-inline: auto; padding-inline: var(--space-4); }
    .share-public-header {
        padding-block: var(--space-5) var(--space-4);
        border-block-end: var(--border-hairline) solid var(--color-border-subtle);
        display: flex;
        justify-content: space-between;
        align-items: flex-end;
        flex-wrap: wrap;
        gap: var(--space-4);
    }
    .share-public-title h1 { font-size: var(--text-lg); font-weight: var(--weight-regular); color: var(--color-text-primary); letter-spacing: var(--tracking-tight); }
    .share-public-name { color: var(--color-text-link); }
    .share-public-owner { font-size: var(--text-sm); color: var(--color-text-secondary); margin-block-start: var(--space-1); }
    .share-owner { color: var(--gray-800); }
    .share-public-perms { font-size: var(--text-sm); color: var(--color-text-secondary); }
    .share-public-content { padding-block: var(--space-4); }

    .drive-grid.share-public-grid { padding-block: var(--space-2); }

    .cal-color, .perm-badge, .cal-event, .agenda-summary, .calendar-view .event {
        forced-color-adjust: none;
    }

    @media (pointer: coarse) {
        :where(.btn, .col-star, .sidebar .folder-list li a, .tile-action) {
            min-block-size: 44px;
            min-inline-size: 44px;
        }
    }

    @media (max-width: 48rem) {
        .nav-toggle { display: inline-flex; }
        .sidebar-toggle { display: inline-flex; }
        .sidebar .sidebar-panel { display: none; }
        .sidebar .sidebar-panel[data-open] { display: block; }
        .sidebar .compose-btn { margin-block-end: var(--space-3); }

        .msg-detail-page .msg-toolbar { position: relative; }
        .msg-detail-page .msg-toolbar .toolbar-overflow { display: inline-flex; }
        .msg-detail-page .msg-toolbar .toolbar-extra { display: none; flex-wrap: wrap; gap: var(--space-2); inline-size: 100%; }
        .msg-detail-page .msg-toolbar .toolbar-extra[data-open] { display: flex; }

        nav .nav-links {
            display: none;
            position: absolute;
            inset-inline: 0;
            inset-block-start: 100%;
            flex-direction: column;
            gap: 0;
            background: var(--color-surface-page);
            border-block-end: var(--border-hairline) solid var(--color-border-subtle);
            box-shadow: var(--shadow-2);
            padding: var(--space-2);
            z-index: var(--z-dropdown);
        }
        nav .nav-links[data-open] { display: flex; }
        nav .nav-links a { min-block-size: 44px; }

        .msg-table thead {
            position: absolute;
            inline-size: 1px;
            block-size: 1px;
            padding: 0;
            margin: -1px;
            overflow: hidden;
            clip-path: inset(50%);
            white-space: nowrap;
            border: 0;
        }
        .msg-table tbody tr.message-row {
            display: block;
            margin-block-end: var(--space-4);
            border: var(--border-hairline) solid var(--color-border-subtle);
            border-radius: var(--radius-md);
            padding: var(--space-3);
        }
        .msg-table tbody tr.message-row.unread { border-color: var(--color-action-primary); }
        .msg-table tbody tr.message-row td {
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: var(--space-4);
            inline-size: auto;
            border: none;
            border-block-end: var(--border-hairline) solid var(--color-border-subtle);
            padding-block: var(--space-2);
            padding-inline: var(--space-1);
            white-space: normal;
            text-align: end;
        }
        .msg-table tbody tr.message-row td::before {
            content: attr(data-label);
            font-weight: var(--weight-medium);
            color: var(--color-text-secondary);
            text-transform: lowercase;
            text-align: start;
        }
        .msg-table tbody tr.message-row td:last-child { border-block-end: none; }
        .msg-table .scroll-sentinel { border: none; padding: 0; }
        .msg-table .scroll-sentinel td { display: block; border: none; text-align: center; }
        .msg-table .scroll-sentinel td::before { content: none; }
    }
}

@layer utilities {
    .u-visually-hidden:not(:focus):not(:focus-within) {
        position: absolute !important;
        inline-size: 1px;
        block-size: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
        border: 0;
    }

    .skip-link:not(:focus):not(:focus-within) {
        position: absolute !important;
        inline-size: 1px;
        block-size: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
        border: 0;
    }
    .skip-link {
        position: absolute;
        inset-block-start: var(--space-2);
        inset-inline-start: var(--space-2);
        z-index: var(--z-dropdown);
        background: var(--color-surface-page);
        color: var(--color-text-primary);
        padding-block: var(--space-2);
        padding-inline: var(--space-4);
        border: var(--border-hairline) solid var(--color-border-default);
        border-radius: var(--radius-sm);
        box-shadow: var(--shadow-2);
        font-size: var(--text-sm);
        font-weight: var(--weight-medium);
    }
    .skip-link:focus-visible {
        outline: none;
        box-shadow: var(--focus-ring);
    }
}