/* Fonts */

@font-face {
    font-family: "Geist";
    src: url("vendor/Geist-Variable.woff2") format("woff2");
    font-weight: 100 900;
    font-display: block;
}

@font-face {
    font-family: "Geist Mono";
    src: url("vendor/GeistMono-Variable.woff2") format("woff2");
    font-weight: 100 900;
    font-display: block;
}

/* Design tokens */

:root {
    --bg: #ffffff;
    --bg-subtle: #f7f8fa;
    --bg-muted: #f0f2f5;
    --border: #ebedf0;
    --border-strong: #dcdfe5;
    --border-hover: #c9cdd6;
    --text: #15171c;
    --text-muted: #6b7080;
    --text-faint: #8e93a1;

    --activity-0: #f3f4f7;
    --activity-1: #dfe6fc;
    --activity-2: #b3c3f6;
    --activity-3: #7d96ea;
    --activity-4: #3451d1;

    --accent: #3451d1;
    --accent-hover: #2c46bd;
    --accent-subtle: #f0f3fd;
    --accent-ring: rgb(52 81 209 / 0.18);

    --alert: #c8322b;
    --alert-ring: rgb(200 50 43 / 0.15);
    --warning: #a15c07;
    --warning-ring: rgb(161 92 7 / 0.15);

    --font-sans: "Geist", "Noto Sans SC", -apple-system, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
    --font-mono: "Geist Mono", ui-monospace, "SF Mono", "Cascadia Mono", Consolas, monospace;

    --fs-sm: 14px;
    --fs-base: 15px;
    --fs-md: 18px;
    --fs-lg: 28px;

    --fw-normal: 400;
    --fw-medium: 500;
    --fw-bold: 600;

    --space-1: 4px;
    --space-1-5: 6px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-6: 24px;
    --space-12: 48px;

    --radius: 6px;
    --radius-lg: 12px;
    --shadow-xs: 0 1px 2px rgb(16 24 40 / 0.05);
    --shadow: 0 0 0 1px rgb(16 24 40 / 0.06), 0 12px 32px -8px rgb(16 24 40 / 0.18);
    --control-height: 36px;
    --select-arrow-space: var(--space-6);
    --sidebar-width: 224px;
    --icon-size: 20px;
    --z-drag: 100000;
    --chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%236b7080' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 6.5 3 3 3-3'/%3E%3C/svg%3E");
    --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
    --duration: 150ms;
    --delay-loading: 300ms;
    --duration-move: 300ms;
    --duration-fade: 900ms;
    --duration-toast: 8s;
    --duration-highlight: 3200ms;
    --duration-highlight-new: 1500ms;
}

/* Base layout and typography */

[x-cloak] { display: none !important; }

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

html {
    scrollbar-gutter: stable;
    scrollbar-width: thin;
    scrollbar-color: var(--border-strong) transparent;
}

body {
    display: flex;
    min-height: 100vh;
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font: var(--fw-normal) var(--fs-base) / 1.55 var(--font-sans);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

main {
    flex: 1;
    min-width: 0;
    max-width: 1120px;
    margin: 0 auto;
    padding: var(--space-12);
}

body:not(:has(aside)) main {
    max-width: 400px;
    margin: 0 auto;
    padding-top: 18vh;
}

h1, h2, h3 {
    margin: 0;
    font-weight: var(--fw-bold);
    line-height: 1.25;
}

h1 { font-size: var(--fs-lg); letter-spacing: -0.025em; }
h2 { font-size: var(--fs-md); letter-spacing: -0.015em; }
h3 { font-size: var(--fs-base); }

main p, dialog p { margin: 0 0 var(--space-3); }
main p:last-child, dialog p:last-child { margin-bottom: 0; }

strong { font-weight: var(--fw-bold); }

a {
    color: var(--text);
    text-decoration: none;
    transition: color var(--duration) var(--ease);
}
a:hover { color: var(--accent); }
main > p a, #signals .empty a, .prose a {
    text-decoration: underline;
    text-decoration-color: var(--border-strong);
    text-underline-offset: 3px;
}

ul { margin: 0; padding: 0; list-style: none; }

time, .meta, dd, .matter-time { font-variant-numeric: tabular-nums; }

code, pre, kbd { font-family: var(--font-mono); font-size: 0.92em; }
code {
    padding: 0 var(--space-1);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--bg-subtle);
}
pre {
    margin: 0 0 var(--space-3);
    padding: var(--space-3) var(--space-4);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--bg-subtle);
    overflow-x: auto;
    line-height: 1.5;
}
pre code { padding: 0; border: 0; background: none; }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

::selection { background: var(--accent-ring); }

main > header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    margin-bottom: var(--space-2);
}
main > h1 { margin-bottom: var(--space-6); }
main > header + * { margin-top: var(--space-6); }
main > header + .matter-intro { margin-top: 0; }
#matter-summary > header + .matter-intro { margin-top: 0; }
.matter-intro {
    display: flex;
    align-items: last baseline;
    justify-content: space-between;
    gap: var(--space-6);
}
.matter-intro > p { margin: 0; }
.matter-intro > .description { flex: 0 1 640px; }
.matter-intro > .meta { flex-shrink: 0; white-space: nowrap; }
.description { max-width: 640px; color: var(--text-muted); font-size: var(--fs-base); line-height: 1.6; }
.description > button:not(.is-empty), h1.is-paused, h1.is-paused > button { color: var(--text-muted); }

/* Status vocabulary */

.meta { color: var(--text-muted); font-size: var(--fs-sm); }

.tag {
    padding: 0 var(--space-1);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius);
    color: var(--text-muted);
    font-size: var(--fs-sm);
    font-weight: var(--fw-medium);
    letter-spacing: 0;
    white-space: nowrap;
}

.dot {
    display: inline-block;
    flex: none;
    width: var(--space-1-5);
    height: var(--space-1-5);
    margin-right: var(--space-1);
    border-radius: 50%;
    background: currentColor;
    vertical-align: middle;
    position: relative;
    top: -1px;
}
.dot.is-hollow { background: transparent; box-shadow: inset 0 0 0 1.5px currentColor; }

.is-alert:where(:not(.form-field)) { color: var(--alert); }
.is-warning:not(.is-alert, .form-field) { color: var(--warning); }
span.is-alert:has(> .dot) { font-weight: var(--fw-medium); font-size: var(--fs-sm); white-space: nowrap; }

.is-empty, .text-faint { color: var(--text-faint); }

/* Buttons */

button, :where(a.button-primary) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    height: var(--control-height);
    padding: 0 var(--space-3);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius);
    background: var(--bg);
    box-shadow: var(--shadow-xs);
    color: var(--text);
    font: inherit;
    font-size: var(--fs-sm);
    font-weight: var(--fw-medium);
    white-space: nowrap;
    cursor: pointer;
    transition:
        background-color var(--duration) var(--ease),
        border-color var(--duration) var(--ease),
        color var(--duration) var(--ease),
        box-shadow var(--duration) var(--ease);
}
button { user-select: none; }
button:hover { background: var(--bg-subtle); }
button:not(.button-primary):active { background: var(--bg-muted); }
button:disabled {
    border-color: var(--border);
    background: var(--bg);
    box-shadow: none;
    color: var(--text-faint);
    cursor: default;
}

.button-primary, .button-primary:hover {
    border-color: var(--accent);
    background: var(--accent);
    box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.14), var(--shadow-xs);
    color: #ffffff;
}
button.button-primary:hover, a.button-primary:hover { background: var(--accent-hover); }
button.button-primary:disabled {
    border-color: var(--border);
    background: var(--bg-subtle);
    box-shadow: none;
    color: var(--text-faint);
}

.button-danger { color: var(--alert); }
button.button-danger:hover:not(:disabled), button.button-danger:active:not(:disabled) {
    border-color: var(--alert);
    background: var(--alert);
    color: #ffffff;
}

.button-quiet {
    border-color: transparent;
    background: transparent;
    box-shadow: none;
    color: var(--text-muted);
}
button.button-quiet:hover:where(:not(:disabled)) { background: var(--bg-muted); color: var(--text); }
button.button-quiet:where(:disabled) { border-color: transparent; background: transparent; box-shadow: none; }

.actions {
    display: flex;
    justify-content: flex-end;
    gap: var(--space-2);
    margin-top: var(--space-6);
}
.actions-start { margin-right: auto; }
header .actions { margin-top: 0; }
.matter-actions { min-height: var(--control-height); }

/* Navigation and request feedback */

main:focus { outline: none; }

.loading-progress {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    z-index: var(--z-drag);
    background: var(--accent);
    transform-origin: left;
    pointer-events: none;
    transition: transform var(--duration) var(--ease), opacity var(--duration) var(--ease);
}
body:has(aside) .loading-progress { left: var(--sidebar-width); }

button.is-waiting {
    position: relative;
    -webkit-text-fill-color: transparent;
}
button.is-waiting > * { visibility: hidden; }
button.is-waiting > .button-spinner {
    visibility: visible;
    color: var(--waiting-color);
    position: absolute;
    left: calc(50% - 0.5em);
    top: calc(50% - 0.5em);
    width: 1em;
    height: 1em;
    animation: button-wait 800ms linear infinite;
}
@keyframes button-wait { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
    .loading-progress { transition: none; }
    button.is-waiting > .button-spinner { animation: none; }
}

/* Menus */

.menu { position: relative; }
.menu-trigger { width: var(--control-height); padding: 0; }
.menu-trigger svg { width: var(--icon-size); height: var(--icon-size); fill: currentColor; }
.menu-panel {
    position: absolute;
    top: calc(100% + var(--space-1));
    right: 0;
    z-index: 4;
    width: max-content;
    padding: var(--space-1);
    border-radius: var(--radius);
    background: var(--bg);
    box-shadow: var(--shadow);
}
.menu-panel > button {
    display: flex;
    justify-content: flex-start;
    width: 100%;
    border: 0;
    box-shadow: none;
    font-weight: var(--fw-normal);
}
.menu-panel > button:hover, .menu-panel > button:focus-visible { background: var(--bg-muted); }

/* Forms */

label {
    display: block;
    margin: var(--space-4) 0 var(--space-1);
    font-size: var(--fs-sm);
    font-weight: var(--fw-medium);
}
form > label:first-child, form > div:first-child > label:first-child, fieldset > label:first-child { margin-top: 0; }
label:has(> input[type="checkbox"]), label:has(> input[type="radio"]) {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin: var(--space-2) 0;
    font-size: var(--fs-base);
    font-weight: var(--fw-normal);
    cursor: pointer;
}

input, textarea, .ts-control {
    border: 1px solid var(--border-strong);
    border-radius: var(--radius);
    background: var(--bg);
    box-shadow: var(--shadow-xs);
    color: var(--text);
    font: inherit;
    transition:
        border-color var(--duration) var(--ease),
        box-shadow var(--duration) var(--ease);
}
input:not([type="checkbox"], [type="radio"]) { height: var(--control-height); padding: 0 var(--space-3); }
textarea { display: block; min-height: 112px; padding: var(--space-2) var(--space-3); line-height: 1.55; resize: vertical; }
dialog input:not([type="checkbox"], [type="radio"]), dialog textarea { width: 100%; }
input::placeholder, textarea::placeholder { color: var(--text-faint); }
input:hover, textarea:hover { border-color: var(--border-hover); }
input:focus, textarea:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-ring);
}

.form-field > :is(input, textarea) { width: 100%; }
fieldset > .form-field > label:first-child,
fieldset > .form-field > div > label:first-child,
form > .form-field:first-child > div > label:first-child { margin-top: 0; }
.field-message {
    margin-top: var(--space-1);
    font-size: var(--fs-sm);
    text-align: left;
    overflow-wrap: anywhere;
}

.field-message.is-counter { text-align: right; }

input[type="checkbox"], input[type="radio"] {
    width: 14px;
    height: 14px;
    margin: 0;
    box-shadow: none;
    accent-color: var(--accent);
    cursor: pointer;
}

.visibility-fields { margin-top: var(--space-4); }
.visibility-fields:first-child { margin-top: 0; }
.visibility-fields legend { font-size: var(--fs-sm); font-weight: var(--fw-medium); }
.visibility-fields .meta { margin-left: calc(14px + var(--space-2)); }
.matter-buffs {
    display: flex;
    flex: none;
    align-self: center;
    align-items: center;
    gap: var(--space-1);
    margin-left: var(--space-2);
    color: var(--text-muted);
}
.matter-buffs > * { flex: none; }
.matter-buffs svg { display: block; width: 16px; height: 16px; }
:is(.matter-row, .subscription-row).is-paused .matter-buffs { color: var(--text-faint); }

input[name="cron_expression"], input[name="code"] { font-family: var(--font-mono); }
form .button-quiet:not(.actions *) { margin: var(--space-2) 0 0; padding: 0 var(--space-2); }
.random-name { display: flex; align-items: center; gap: var(--space-2); }
.random-name input { flex: 1; min-width: 0; }
form .random-name .random-name-button { margin: 0; padding: 0; width: 36px; height: 36px; flex: 0 0 36px; }
input[name="code"] { letter-spacing: 0.3em; }

p:is(.is-alert, .is-warning) { margin: var(--space-1) 0 0; font-size: var(--fs-sm); }
p.is-warning:not(.is-alert) { color: var(--warning); }

fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }
fieldset fieldset { margin-top: var(--space-3); }
.schedule-fields > .schedule-type-fields, .schedule-fields > .schedule-time-zone { margin-top: var(--space-4); }
.schedule-fields .cron-form-fields, .schedule-fields .cron-expression-fields { margin-top: 0; }

.cron-preview {
    margin-top: var(--space-3);
    padding: var(--space-3);
    border-radius: var(--radius);
    background: var(--bg-subtle);
    color: var(--text-muted);
    font-size: var(--fs-sm);
}
.cron-preview li { font-variant-numeric: tabular-nums; }

/* Sidebar */

aside {
    position: sticky;
    top: 0;
    display: flex;
    flex: none;
    flex-direction: column;
    width: var(--sidebar-width);
    height: 100vh;
    padding: var(--space-6) var(--space-3) var(--space-4);
    border-right: 1px solid var(--border);
    background: var(--bg);
}
aside nav { flex: 1; }
aside li + li { margin-top: var(--space-1); }
aside nav a {
    display: block;
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius);
    color: var(--text-muted);
    font-weight: var(--fw-medium);
    transition:
        background-color var(--duration) var(--ease),
        color var(--duration) var(--ease);
}
aside nav a:hover { background: var(--bg-muted); color: var(--text); }
aside nav a.is-active { background: var(--accent-subtle); color: var(--accent); }
aside p { margin: 0; padding: 0 var(--space-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
aside p:first-of-type { color: var(--text); font-weight: var(--fw-medium); }
aside .button-quiet { align-self: flex-start; margin-top: var(--space-2); }

.logo {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    color: var(--text);
    font-weight: var(--fw-bold);
    letter-spacing: -0.03em;
}
.logo-mark { width: 1.333em; height: 1.333em; flex: none; }
.logo:hover { color: var(--text); }
aside .logo { display: flex; margin: 0 var(--space-3) var(--space-6); font-size: var(--fs-md); }
h1.logo { display: flex; font-size: var(--fs-lg); }
h1.logo + p { margin: var(--space-2) 0 var(--space-6); color: var(--text-muted); font-size: var(--fs-md); }

/* Content rows */

article, .matter-row, .signal-row {
    margin: 0 calc(-1 * var(--space-4));
    padding: var(--space-4);
    border-bottom: 1px solid var(--border);
    transition: background-color var(--duration) var(--ease);
}
article p, .signal-row p { margin: 0; }
article.is-clickable { cursor: pointer; }
article.is-clickable:hover, .signal-row.is-clickable:hover, article:has(> p.is-clickable:hover) { background: var(--bg-subtle); }
article.is-alert { box-shadow: inset 2px 0 0 var(--alert); color: var(--text); }
article.is-paused, article.is-paused a, article.is-paused .meta { color: var(--text-faint); }
article.is-paused > :first-child a { color: var(--text); }

.row-head { display: flex; align-items: baseline; gap: var(--space-3); }
.row-head time { margin-left: auto; color: var(--text-muted); font-size: var(--fs-sm); white-space: nowrap; }
.row-head + .summary { margin-top: var(--space-2); }

.summary { font-size: var(--fs-md); line-height: 1.6; white-space: pre-line; }
article .summary, .signal-row .summary {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
    overflow: hidden;
}
p.is-clickable { cursor: pointer; }

/* Matter list, rows and groups */

/* Layers: group headings 1, columns 2, open groups 3, page menus 4, drag decorations 5. */
#matter-list {
    --matter-column-header-height: 0px;
    min-width: 1024px;
}
#matter-list:has(> .matter-column-header) {
    --matter-column-header-height: calc(var(--fs-sm) * 1.5 + 2 * var(--space-2) + 1px);
}
.matter-column-header, .matter-list-header, .matter-row {
    display: grid;
    --matter-columns: 324px 168px 144px 160px 120px 48px;
    grid-template-columns: var(--matter-columns);
    gap: var(--space-3);
    align-items: baseline;
    color: var(--text-muted);
    font-size: var(--fs-sm);
}
.matter-column-header, .matter-list-header {
    position: sticky;
    top: var(--matter-column-header-height);
    z-index: 1;
    margin: 0 calc(-1 * var(--space-4));
    padding: var(--space-2) var(--space-4);
    border-bottom: 1px solid var(--border);
    background: var(--bg);
    font-weight: var(--fw-medium);
}
.matter-column-header {
    top: 0;
    z-index: 2;
    height: var(--matter-column-header-height);
    line-height: 1.5;
}
/* Keep the title's geometry in normal, pinned, dragged and highlighted states. */
.matter-list-header { border-bottom-color: transparent; }
.matter-row { position: relative; user-select: none; font-weight: var(--fw-normal); }
.matter-row:hover { color: var(--text-muted); }
@property --highlight-fill {
    syntax: "<color>";
    inherits: false;
    initial-value: transparent;
}
.matter-row:is(.is-save-failure, .is-new),
.matter-list-header:is(.is-save-failure, .is-new) {
    background: linear-gradient(var(--highlight-fill), var(--highlight-fill)), var(--bg);
    animation: highlight var(--duration-highlight) linear;
}
.is-save-failure { --highlight-color: var(--alert-ring); }
.matter-row.is-new,
.matter-list-header.is-new {
    --highlight-color: var(--accent-subtle);
    animation: highlight-new var(--duration-highlight-new) ease-out;
}
@keyframes highlight-new {
    from { --highlight-fill: var(--highlight-color); }
    to { --highlight-fill: transparent; }
}
@keyframes highlight {
    0%, 37.5% { --highlight-fill: var(--highlight-color); }
    100% { --highlight-fill: transparent; }
}
@keyframes highlight-reduced {
    from, to { --highlight-fill: var(--highlight-color); }
}
.matter-empty {
    margin: 0 calc(-1 * var(--space-4));
    padding: var(--space-4);
    /* Transparent, not removed: Empty stays as tall as a row it stands in for. */
    border-bottom: 1px solid transparent;
    color: var(--text-faint);
    font-size: var(--fs-base);
}
.matter-rows:has(> .matter-row, > .matter-placeholder) > .matter-empty { display: none; }
.matter-placeholder {
    margin: 0 calc(-1 * var(--space-4));
    border-bottom: 1px solid var(--border);
    background: var(--bg-muted);
}
.matter-list-paint { position: fixed; inset: 0; overflow: clip; pointer-events: none; }
.matter-list-decoration { pointer-events: none; }
.matter-row.is-drop-target { background: var(--bg-muted); }
.matter-row.is-drop-target > * { visibility: hidden; }
.matter-row.is-dragging {
    background: var(--bg);
    box-shadow: var(--shadow);
    border-radius: var(--radius);
}
body.is-sorting-matters, body.is-sorting-matters * { cursor: grabbing !important; }
.matter-name {
    display: flex;
    align-items: baseline;
    min-width: 0;
    font-size: var(--fs-base);
}
.matter-name-state { flex-shrink: 0; }
.matter-name-separator { flex-shrink: 0; white-space: pre; }
.matter-name-text {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--text);
    font-weight: var(--fw-normal);
}
body:not(.is-sorting-matters) .matter-row:not(.is-drop-target, .is-save-failure, .is-new):hover { background: var(--bg-subtle); }
.matter-agent {
    display: flex;
    align-items: baseline;
    min-width: 0;
}
.matter-agent-state {
    flex-shrink: 0;
    color: var(--warning);
    font-weight: var(--fw-normal);
}
.matter-agent-separator { flex-shrink: 0; white-space: pre; }
.matter-agent-name, .truncate {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.matter-schedule {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}
.matter-time { white-space: nowrap; }
.matter-queue { font-variant-numeric: tabular-nums; }
.matter-remind { color: var(--accent); }
#matter-status dd:has(> .matter-remind) {
    display: flex;
    align-items: baseline;
    gap: var(--space-6);
}
.matter-row.is-paused,
.matter-row.is-paused .matter-name-text,
.matter-row.is-paused > .matter-agent,
.matter-row.is-paused .matter-agent-state,
.matter-row.is-paused > .matter-time,
.matter-row.is-paused > .matter-queue,
.matter-row.is-paused > .matter-schedule,
.matter-row.is-paused .matter-run-exception { color: var(--text-faint); }

.group-title {
    margin: 0;
    color: var(--text);
    font-size: var(--fs-md);
    font-weight: var(--fw-bold);
    line-height: 1.55;
    letter-spacing: 0;
}
.matter-group + .matter-group,
.matter-groups + .matter-group,
.matter-group + .matter-groups,
.matter-groups + .matter-groups { margin-top: var(--space-6); }
@property --area-count-opacity {
    syntax: "<number>";
    inherits: false;
    initial-value: 0;
}
.matter-group-count {
    position: absolute;
    left: var(--space-1);
    pointer-events: none;
    font-size: var(--fs-sm);
    font-weight: var(--fw-normal);
    color: var(--text-muted);
    opacity: var(--area-count-opacity);
}
.matter-group-actions {
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--space-1);
    flex: none;
}
.matter-group-title {
    grid-column: 1 / span 2;
    justify-self: stretch;
    display: flex;
    align-items: center;
    gap: var(--space-1);
    min-width: 0;
    overflow: visible;
    margin-block: calc(-1 * var(--space-2));
    padding-block: var(--space-2);
}
.matter-group-title > button {
    display: inline-flex;
    align-items: baseline;
    gap: 0;
    min-width: 0;
    max-width: calc(100% + 2 * var(--space-2));
    height: auto;
    margin: calc(-1 * var(--space-1)) calc(-1 * var(--space-2));
    padding: var(--space-1) var(--space-2);
    overflow: visible;
    border: 0;
    background: transparent;
    box-shadow: none;
    color: inherit;
    font: inherit;
    letter-spacing: inherit;
    text-align: left;
}
.matter-group-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.matter-group-title > button:hover { background: var(--bg-muted); }
.matter-group-menu { display: flex; flex: none; }
.matter-group-actions :is(.matter-group-add, .menu-trigger) {
    flex: none;
    margin-block: calc(-1 * var(--space-2));
    opacity: 0;
    transition: opacity var(--duration) var(--ease);
}
.matter-group-actions :is(.matter-group-add, .menu-trigger):not(:hover) { color: var(--text-faint); }
.matter-group-title:hover :is(.matter-group-add, .menu-trigger),
html.is-keyboard-navigation .matter-group-title:focus-within :is(.matter-group-add, .menu-trigger),
.matter-group-title:has(.matter-group-menu.is-open) :is(.matter-group-add, .menu-trigger) { opacity: 1; }
body:not(.is-sorting-areas) #matter-list .matter-group-title:hover .matter-group-count,
html.is-keyboard-navigation body:not(.is-sorting-areas) #matter-list .matter-group-title:focus-within .matter-group-count,
body:not(.is-sorting-areas) #matter-list .matter-group-title:has(.matter-group-menu.is-open) .matter-group-count {
    opacity: 0;
    transition: opacity var(--duration) var(--ease);
}
.matter-group-add { width: var(--control-height); padding: 0; }
.matter-group-add svg {
    width: var(--icon-size);
    height: var(--icon-size);
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-width: 1.5;
}
.matter-group-menu > .menu-panel {
    top: calc(50% + var(--control-height) / 2 + var(--space-1));
    right: auto;
    left: 0;
}
.matter-list-header:has(.matter-group-menu.is-open) { z-index: 3; }
.matter-group-title.is-archived { color: var(--text-faint); }
.matter-group-state { color: var(--text-muted); font-weight: var(--fw-normal); }
/* Area drag states and failure paint */

html.is-area-layout { overflow-anchor: none; }
body.is-sorting-areas #matter-list > .matter-group,
body.is-sorting-areas #matter-list > .matter-groups:not(.is-area-partition) { display: none; }
body.is-sorting-areas #matter-list > .is-area-partition { margin-top: 0; }
body.is-sorting-areas .matter-column-header,
body.is-sorting-areas .matter-list-header,
.is-area-dragging .matter-list-header { position: relative; top: auto; }
.is-sorting-areas .is-area-partition .matter-group-count { --area-count-opacity: 1; }
.is-area-dragging .matter-group-count { opacity: 1; transition: none; }
.is-sorting-areas .is-area-partition .matter-rows { display: none; }
.is-sorting-areas .is-area-partition .matter-group-actions :is(.matter-group-add, .menu-trigger),
.is-area-dragging .matter-group-actions :is(.matter-group-add, .menu-trigger) { visibility: hidden; opacity: 0; transition: none; }
.area-sort-decoration { position: fixed !important; margin: 0 !important; pointer-events: none; z-index: 5; }
.failure-paint {
    position: fixed;
    box-sizing: border-box;
    margin: 0;
    pointer-events: none;
    z-index: var(--z-drag);
}
.is-area-slot > .matter-list-header { background: var(--bg-muted); }
.is-area-slot > .matter-list-header > * { visibility: hidden; }
.is-area-dragging {
    margin: 0 !important;
    border-radius: var(--radius);
    background: var(--bg);
    box-shadow: var(--shadow);
}
.matter-row.is-dragging:not(.failure-paint),
.is-area-dragging:not(.failure-paint) { opacity: 1 !important; }
.is-area-dragging .matter-list-header { margin: 0; border-radius: var(--radius); }
.is-area-dragging .matter-rows { display: none; }
body.is-sorting-areas { cursor: grabbing; }
body.is-sorting-areas #matter-list a,
body.is-sorting-areas #matter-list button { cursor: grabbing; }
body.is-sorting-areas .matter-group-title > button:hover { background: transparent; }
/* Empty states and pagination */

.empty {
    padding: var(--space-12) 0;
    color: var(--text-muted);
    text-align: center;
}

.continuation, .continuation-end {
    margin-top: var(--space-6);
    text-align: center;
    font-size: var(--fs-sm);
}
.continuation { min-height: var(--space-6); color: var(--text-muted); }
.continuation-error { display: flex; align-items: center; justify-content: center; gap: var(--space-3); }
.continuation-end { color: var(--text-faint); }

/* List filters and archived indicator */

#signals .signal-filters, #matter-list .matter-filters:not([hidden]) {
    display: flex;
    align-items: center;
    margin-bottom: var(--space-2);
}
#signals .signal-filters { gap: var(--space-3); flex-wrap: wrap; }
#signals .signal-filter-selects { display: flex; flex: none; gap: var(--space-3); margin-left: auto; }
#signals .signal-filter-selects > :is(.ts-wrapper, select) { flex-shrink: 0; }
.matter-filters { gap: var(--space-4); }
#signals .signal-filters label, #matter-list .matter-filters label { margin: 0; }
#signals .signal-filters label:has(> input), #matter-list .matter-filters label:has(> input) { font-size: var(--fs-sm); color: var(--text-muted); }
#signals .signal-filters label:has(> input) { margin-right: auto; }
#signals .signal-filters :is(.ts-wrapper, select) { width: var(--sidebar-width); font-size: var(--fs-sm); }
#signals .signal-filters select { text-overflow: ellipsis; }
#signals .signal-filters :is(select[name="from"], select[name="from"] + .ts-wrapper) { width: auto; }
/* Same width selectControl gives auto-width controls: widest option plus the panel's ✓ space. */
#interval-value ~ select { padding-right: calc(2 * var(--space-6)); }

.archived-indicator {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    height: calc(var(--icon-size) + 2 * var(--space-1));
    padding: 0 var(--space-1) 0 var(--space-2);
    /* Overhang the row instead of growing it, so toggling doesn't shift the list. */
    margin: calc(-1 * var(--space-1)) 0;
    border-radius: var(--radius);
    background: var(--bg-muted);
    color: var(--text);
    font-size: var(--fs-sm);
}
.matter-filters .archived-indicator .button-quiet {
    display: grid;
    place-items: center;
    width: var(--icon-size);
    height: var(--icon-size);
    margin: 0;
    padding: 0;
    border: 0;
    color: var(--text-muted);
}
.matter-filters .archived-indicator .button-quiet:hover { background: var(--border-strong); color: var(--text); }
.archived-indicator svg {
    width: 100%;
    height: 100%;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-width: 1.5;
}

/* App lists */

.app-list-header, .app-list-row {
    display: grid;
    align-items: baseline;
    margin: 0 calc(-1 * var(--space-4));
    padding: var(--space-4);
    border-bottom: 1px solid var(--border);
    color: var(--text-muted);
    font-size: var(--fs-sm);
}
.app-list-header {
    position: sticky;
    top: 0;
    z-index: 2;
    padding-block: var(--space-2);
    background: var(--bg);
    font-weight: var(--fw-medium);
    line-height: 1.5;
}
.app-list-row { font-weight: var(--fw-normal); }
.agent-name-text, .agent-app, .subscription-name-text, .subscription-owner, .subscription-schedule {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.app-list-name {
    display: inline-flex;
    align-items: baseline;
    justify-content: flex-start;
    justify-self: start;
    gap: 0;
    min-width: 0;
    max-width: calc(100% + 2 * var(--space-2));
    height: auto;
    margin: calc(-1 * var(--space-1)) calc(-1 * var(--space-2));
    padding: var(--space-1) var(--space-2);
    overflow: visible;
    border: 0;
    background: transparent;
    box-shadow: none;
    color: var(--text);
    font: inherit;
    font-size: var(--fs-base);
    font-weight: var(--fw-normal);
    letter-spacing: inherit;
    text-align: left;
}
.app-list-name:hover { background: var(--bg-muted); color: var(--text); }

/* Subscriptions list */

.subscription-column-header, .subscription-row {
    grid-template-columns: 360px 144px 168px 160px 144px;
    gap: var(--space-3);
}
.subscription-name { text-decoration: none; }
.subscription-row > .subscription-notify { justify-self: start; color: var(--text); }
.subscription-row .is-empty,
.subscription-row.is-paused,
.subscription-row.is-paused .subscription-name,
.subscription-row.is-paused .subscription-owner,
.subscription-row.is-paused .subscription-notify { color: var(--text-faint); }

/* Agents list */

.agent-column-header, .agent-row {
    grid-template-columns: minmax(0, 1fr) calc(6 * var(--space-6)) calc(6 * var(--space-6)) calc(4 * var(--space-6));
    gap: var(--space-4);
}
.agent-row { position: relative; user-select: none; }
.agent-rows.is-creating { overflow-anchor: none; }
.agent-app.is-unsigned { color: var(--text-faint); }
.agent-status { white-space: nowrap; }
.agent-status.is-offline { color: var(--warning); }
.agent-row > .agent-session {
    justify-self: end;
    margin-block: calc(-1 * var(--space-2));
}
.agent-row.is-drop-target { background: var(--bg-muted); }
.agent-row.is-drop-target > * { visibility: hidden; }
.agent-row.is-dragging {
    background: var(--bg);
    box-shadow: var(--shadow);
    border-radius: var(--radius);
    opacity: 1 !important;
}
.agent-row.failure-paint { position: fixed; margin: 0; }
body.is-sorting-agents, body.is-sorting-agents * { cursor: grabbing !important; }
.agent-row:is(.is-save-failure, .is-new) {
    background: linear-gradient(var(--highlight-fill), var(--highlight-fill)), var(--bg);
    animation: highlight var(--duration-highlight) linear;
}
.agent-row.is-new {
    --highlight-color: var(--accent-subtle);
    animation: highlight-new var(--duration-highlight-new) ease-out;
}

/* Signals */

#signals .signal-day + .signal-day { margin-top: var(--space-4); }
.signal-day-title {
    position: sticky;
    top: 0;
    z-index: 1;
    margin: 0 calc(-1 * var(--space-4));
    padding: var(--space-2) var(--space-4) 0;
    background: var(--bg);
    color: var(--text);
    font-size: var(--fs-md);
    font-weight: var(--fw-bold);
}
:is(#signals, .detail-signals) .row-head > :is(a, .signal-number) {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--text-muted);
    font-size: var(--fs-sm);
    font-weight: var(--fw-medium);
}
:is(#signals, .detail-signals) .row-head .row-meta {
    display: flex;
    flex-shrink: 0;
    align-items: baseline;
    margin-left: auto;
    color: var(--text-muted);
    font-size: var(--fs-sm);
    font-weight: var(--fw-normal);
    white-space: nowrap;
}
:is(#signals, .detail-signals) .row-head .row-meta :is(a, .signal-owner) {
    max-width: 144px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--text-muted);
    font-weight: var(--fw-normal);
}
:is(#signals, .detail-signals) .row-head a:hover { color: var(--accent); }
:is(#signals, .detail-signals) .row-head .row-meta time { margin-left: 0; }
:is(#signals, .detail-signals) .row-head :is(.row-meta-separator, .signal-from) { white-space: pre; }
:is(#signals, .detail-signals) .row-head + .summary { margin-top: var(--space-1); }
:is(#signals, .detail-signals) .summary { color: var(--text); font-size: var(--fs-base); }

.signal-has-details {
    display: inline-flex;
    vertical-align: middle;
    margin-left: var(--space-1-5);
    color: var(--text-muted);
}
.signal-has-details svg { width: 16px; height: 16px; }

/* Detail and settings */

.detail-run-column-header, article.detail-run-row {
    display: grid;
    grid-template-columns: 48px 240px 64px minmax(64px, 1fr);
    gap: var(--space-3);
    align-items: baseline;
    min-width: calc(452px + 2 * var(--space-4));
    text-align: left;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}
.detail-run-column-header {
    margin-inline: calc(-1 * var(--space-4));
    padding: var(--space-2) var(--space-4);
    border-bottom: 1px solid var(--border);
    color: var(--text-muted);
    font-size: var(--fs-sm);
    font-weight: var(--fw-medium);
}

dl {
    display: grid;
    grid-template-columns: 144px 1fr;
    margin: var(--space-6) 0;
    padding: var(--space-3) 0;
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
}
dt, dd { margin: 0; padding: var(--space-2) 0; }
dt { color: var(--text-muted); font-size: var(--fs-sm); line-height: calc(var(--fs-base) * 1.55); }
:is(dd, .description) > button, .subscription-notify {
    display: inline;
    height: auto;
    max-width: 100%;
    margin: calc(-1 * var(--space-1)) calc(-1 * var(--space-2));
    padding: var(--space-1) var(--space-2);
    border: 0;
    background: transparent;
    box-shadow: none;
    font-size: inherit;
    font-weight: var(--fw-normal);
    line-height: inherit;
    text-align: left;
    white-space: pre-line;
}
:is(dd, .description) > button:hover, .subscription-notify:hover { background: var(--bg-muted); }
dd > button { font-size: var(--fs-base); }
.matter-area-state { color: var(--text-muted); }
.description > button {
    display: inline-block;
    max-width: calc(100% + 2 * var(--space-2));
}
:is(#matter-properties, #matter-status) { padding-block: var(--space-1); }
:is(#matter-properties, #matter-status) dd { min-width: 0; }
#matter-properties { margin: var(--space-3) 0 0; }
#matter-status { margin-top: 0; border-top: 0; }
#matter-properties > dd > .matter-agent { display: inline-flex; gap: 0; }

.notification-options > label:first-child { margin-top: 0; }
.run-request-params { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.run-request-row {
    display: grid;
    grid-template-columns: auto auto minmax(0, 1fr) auto;
    align-items: baseline;
    gap: var(--space-3);
    width: calc(100% + 2 * var(--space-4));
    height: auto;
    margin: 0 calc(-1 * var(--space-4));
    padding: var(--space-4);
    border: 0;
    border-bottom: 1px solid var(--border);
    border-radius: 0;
    box-shadow: none;
    font-size: var(--fs-base);
    font-weight: var(--fw-normal);
    text-align: left;
}
.run-request-source, .run-request-status, .run-request-row > .run-request-params {
    color: var(--text-muted);
    font-size: var(--fs-sm);
}
.run-request-status { grid-column: 4; text-align: right; font-variant-numeric: tabular-nums; }

h1 > button {
    display: block;
    height: auto;
    margin: calc(-1 * var(--space-1)) calc(-1 * var(--space-2));
    padding: var(--space-1) var(--space-2);
    border: 0;
    background: transparent;
    box-shadow: none;
    font-size: inherit;
    font-weight: inherit;
    letter-spacing: inherit;
    line-height: inherit;
    text-align: left;
    white-space: normal;
}
h1 > button:hover { background: var(--bg-muted); }
h1 { display: flex; align-items: center; gap: var(--space-3); }

nav button:not(.button-quiet), .detail-tabs > :is(a, button) {
    height: auto;
    padding: var(--space-2) 0;
    border: 0;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    color: var(--text-muted);
    font-size: var(--fs-base);
    font-weight: var(--fw-medium);
    white-space: nowrap;
}
nav button:not(.button-quiet):hover, .detail-tabs > :is(a, button):hover { background: transparent; color: var(--text); }
nav button:not(.button-quiet, .is-active):disabled { color: var(--text-faint); }
nav button.is-active, .detail-tabs > .is-active { border-bottom-color: var(--text); color: var(--text); }
.detail-tabs {
    display: flex;
    align-items: center;
    gap: var(--space-6);
    margin-bottom: var(--space-2);
    border-bottom: 1px solid var(--border);
}
.detail-tabs > :is(button, a) { margin-bottom: -1px; }

/* Dialogs */

dialog {
    width: 480px;
    max-width: calc(100vw - var(--space-6));
    max-height: calc(100vh - var(--space-12));
    padding: var(--space-6);
    border: 0;
    border-radius: var(--radius-lg);
    background: var(--bg);
    box-shadow: var(--shadow);
    color: var(--text);
    animation: dialog-in 180ms var(--ease);
}
dialog:focus-visible { outline: none; }
dialog::backdrop {
    background: rgb(16 24 40 / 0.24);
    animation: fade-in 180ms var(--ease);
}
dialog h2 { margin-bottom: var(--space-2); }
dialog h2 + form, dialog h2 + p { margin-top: var(--space-4); }
dialog details { margin-bottom: var(--space-3); }
.create-advanced > summary { cursor: pointer; color: var(--text-muted); }
.create-advanced > div { padding-top: var(--space-3); }
.create-advanced > div > label { display: flex; align-items: center; gap: var(--space-2); }
.trigger-address { white-space: pre-wrap; overflow-wrap: anywhere; }
.trigger-curl { white-space: pre; overflow-x: auto; }

dialog {
    position: fixed;
    inset: var(--space-12) 0 auto;
    margin: 0 auto;
    max-height: calc(100dvh - 2 * var(--space-12));
    overflow: visible;
    transform-origin: top center;
}
dialog[open] { display: flex; flex-direction: column; }
dialog > div[hx-target],
dialog > div[hx-target] > form,
dialog > div[hx-target] > .dialog-content {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
}
dialog > div[hx-target] h2 {
    flex: none;
    margin: 0;
    padding-bottom: calc(var(--space-4) - var(--space-1));
}
dialog > div[hx-target] h2 + form { margin-top: 0; }
dialog .dialog-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
    /* Four-pixel gutters preserve the three-pixel focus rings. */
    margin: 0 calc(-1 * var(--space-1));
    padding: var(--space-1);
}
dialog .dialog-body > :last-child { margin-bottom: 0; }
.code-resends-exhausted { align-self: center; color: var(--text-faint); }
.code-email { color: var(--text); font-weight: 500; }
.code-change-email {
    height: auto;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    color: var(--text-muted);
    font: inherit;
}
button.code-change-email:hover { background: transparent; color: var(--accent); }
.sign-in-options { display: grid; gap: var(--space-4); }
.sign-in-option > button { display: inline-flex; align-items: center; gap: var(--space-2); }
.sign-in-option > button svg { width: 20px; height: 20px; flex: none; }
.sign-in-option > .meta { margin-top: var(--space-2); margin-bottom: 0; }
dialog .dialog-body > .form-field:first-child > label:first-child,
dialog .dialog-body > .form-field:first-child > div > label:first-child,
dialog .dialog-body > .config-fields:first-child > .form-field > label:first-child { margin-top: 0; }
dialog > div[hx-target] .actions {
    flex: none;
    margin-top: 0;
    padding-top: calc(var(--space-6) - var(--space-1));
}
dialog.scrolled-top > div[hx-target] h2 { box-shadow: 0 1px var(--border); }
dialog.scrolled-bottom > div[hx-target] .actions { box-shadow: 0 -1px var(--border); }
/* Popups stay in their owner's DOM but escape the content scroller. */
dialog .dialog-body :is(.ts-wrapper, .dialog-popup-anchor) {
    anchor-name: --dialog-popup;
    anchor-scope: --dialog-popup;
}
dialog .dialog-body :is(.ts-dropdown, .dialog-popup) {
    position: fixed !important;
    position-anchor: --dialog-popup;
    position-visibility: anchors-visible;
    right: auto !important;
    left: anchor(left) !important;
    top: calc(anchor(bottom) + var(--space-1)) !important;
    bottom: auto !important;
    width: var(--dialog-popup-width, anchor-size(width)) !important;
    margin: 0;
    z-index: 10;
}
dialog .dialog-body :is(.ts-dropdown, .dialog-popup).anchor-hidden { visibility: hidden !important; }
dialog .dialog-body :is(.ts-dropdown, .dialog-popup).opens-up {
    top: auto !important;
    bottom: calc(anchor(top) + var(--space-1)) !important;
}
dialog.discard-confirm {
    inset: 0;
    margin: auto;
    height: fit-content;
    transform-origin: center;
}
.discard-confirm > h2 { margin: 0; }
textarea[name="instruction"] {
    field-sizing: content;
    min-height: 112px;
    max-height: 50vh;
    overflow-y: auto;
}

#matter-summary > header { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); margin-bottom: var(--space-2); }
#matter-summary > header h1, #matter-summary .description { min-width: 0; overflow-wrap: anywhere; }
#matter-summary :is(#matter-properties, #matter-status) dd { overflow-wrap: anywhere; }
#drawer {
    position: fixed;
    inset: 0 0 0 auto;
    width: 560px;
    max-width: 100vw;
    height: 100dvh;
    max-height: 100dvh;
    margin: 0;
    padding: 0;
    border-radius: 0;
    overflow: auto;
    overscroll-behavior: contain;
    animation: none;
}
#drawer[open] { display: block; }
#drawer > .drawer-content { min-width: 0; padding: 0 var(--space-6) var(--space-6); }
#drawer nav { display: flex; align-items: center; gap: var(--space-3); position: sticky; top: 0; z-index: 1; margin: 0 calc(-1 * var(--space-6)) var(--space-6); padding: var(--space-2) var(--space-6); background: var(--bg); border-bottom: 1px solid var(--border); }
#drawer pre code { background: none; }
.drawer-breadcrumb { display: flex; align-items: center; gap: var(--space-2); min-width: 0; flex: 1; }
.drawer-breadcrumb > * { flex-shrink: 0; white-space: nowrap; }
.drawer-breadcrumb > .drawer-matter { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.drawer-breadcrumb a, .drawer-separator { color: var(--text-muted); }
.drawer-breadcrumb a:hover { color: var(--accent); }
.drawer-signal-line { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#drawer > .drawer-content > section { max-width: 720px; min-width: 0; }
#drawer section > p.meta { margin-bottom: var(--space-2); }
#drawer section > p.meta > .is-alert { margin-right: var(--space-2); }
#drawer section > p.summary { margin: 0 0 var(--space-3); font-size: var(--fs-md); font-weight: var(--fw-bold); color: var(--text); line-height: 1.55; letter-spacing: -0.01em; }
#drawer .drawer-divider { margin: var(--space-6) 0; border: 0; border-top: 1px solid var(--border); }
#drawer :is(.meta, .drawer-breadcrumb, .drawer-signal-line) > button { display: inline; height: auto; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; color: inherit; font: inherit; vertical-align: baseline; }
#drawer :is(.drawer-breadcrumb, .drawer-signal-line) > button { color: var(--text-muted); }
#drawer .drawer-signal-line > button { display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: left; }
#drawer :is(.meta, .drawer-breadcrumb, .drawer-signal-line) > button:hover { color: var(--accent); }
#drawer h3.is-warning { color: var(--warning); }
#drawer .run-request-drawer section > h3:first-child { margin-top: 0; }
#drawer dd { min-width: 0; overflow-wrap: anywhere; }
pre.run-request-full-params { font-family: var(--font-mono); font-size: var(--fs-sm); }
#drawer h3 {
    margin: var(--space-6) 0 var(--space-3);
    color: var(--text-muted);
    font-size: var(--fs-sm);
    font-weight: var(--fw-medium);
    letter-spacing: 0.06em;
    text-transform: uppercase;
}
#drawer details { margin-top: var(--space-3); }
#drawer details + h3 { margin-top: var(--space-6); }
#drawer summary {
    color: var(--text-muted);
    font-size: var(--fs-sm);
    cursor: pointer;
    transition: color var(--duration) var(--ease);
}
#drawer summary:hover { color: var(--text); }
#drawer details[open] > div, #drawer details[open] > p {
    margin: var(--space-2) 0 0;
    padding-left: var(--space-4);
    border-left: 2px solid var(--border);
}
dialog details > p { white-space: pre-wrap; }

/* Rendered Markdown */

.prose { min-width: 0; line-height: 1.65; }
.prose > :first-child, #drawer .prose > :first-child { margin-top: 0; }
.prose > :last-child, #drawer .prose > :last-child { margin-bottom: 0; }
.prose p, .prose ul, .prose ol, .prose blockquote { margin: 0 0 var(--space-3); }
.prose ul, .prose ol { padding-left: var(--space-6); }
.prose ul { list-style: disc; }
.prose li + li { margin-top: var(--space-1); }
.prose li::marker { color: var(--text-faint); }
.prose :is(h1, h2, h3, h4, h5, h6),
#drawer .prose :is(h1, h2, h3, h4, h5, h6) { margin: var(--space-6) 0 var(--space-2); font-size: var(--fs-base); font-weight: var(--fw-bold); letter-spacing: -0.01em; text-transform: none; color: var(--text); }
.prose .prose-table-scroll { max-width: 100%; overflow-x: auto; margin: 0 0 var(--space-3); }
.prose table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); font-variant-numeric: tabular-nums; }
.prose :is(th, td) { padding: var(--space-2) var(--space-3); text-align: left; }
.prose th { font-weight: var(--fw-bold); }
.prose thead tr, .prose tbody tr:not(:last-child) { border-bottom: 1px solid var(--border); }
.prose blockquote { padding-left: var(--space-4); border-left: 2px solid var(--border); color: var(--text-muted); }
.prose hr { margin: var(--space-6) 0; border: 0; border-top: 1px solid var(--border); }

/* Toast */

#toast {
    position: fixed;
    inset: auto;
    bottom: var(--space-6);
    width: max-content;
    max-width: calc(100vw - 2 * var(--space-6));
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
    left: calc(var(--sidebar-width) + (100vw - var(--sidebar-width)) / 2);
    z-index: 100;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2);
    transform: translateX(-50%);
}
#toast[popover]:not(:popover-open) { display: none; }
body:not(:has(aside)) #toast { left: 50%; }
.toast {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin: 0;
    padding: var(--space-2) var(--space-2) var(--space-2) var(--space-4);
    border-radius: var(--radius);
    background: var(--text);
    box-shadow: var(--shadow);
    color: #ffffff;
    font-size: var(--fs-sm);
    font-weight: var(--fw-medium);
    animation: toast-in 220ms var(--ease);
}
.toast button {
    width: var(--icon-size);
    height: var(--icon-size);
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
    color: rgb(255 255 255 / 0.64);
}
.toast button:hover, .toast button:active { background: transparent; color: #ffffff; }
.toast svg {
    width: 100%;
    height: 100%;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-width: 1.5;
}
/* The ring empties as the toast's time runs out. */
.toast circle {
    stroke-dasharray: 56.55;
    transform: rotate(-90deg);
    transform-origin: center;
    animation: toast-countdown var(--duration-toast) linear forwards;
}

/* Motion */

@keyframes fade-in {
    from { opacity: 0; }
}

@keyframes dialog-in {
    from { opacity: 0; transform: translateY(4px) scale(0.98); }
}

@keyframes toast-in {
    from { opacity: 0; transform: translateY(8px); }
}

@keyframes toast-countdown {
    to { stroke-dashoffset: 56.55; }
}

/* Tom Select overrides */

select.tomselected { display: none; }
/* Until Tom Select replaces it, the native select looks like its control, so the page doesn't flash. */
select {
    display: block;
    width: 100%;
    height: var(--control-height);
    padding: 0 var(--select-arrow-space) 0 var(--space-3);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius);
    background: var(--bg) var(--chevron) no-repeat right var(--space-2) center;
    box-shadow: var(--shadow-xs);
    color: var(--text);
    font: inherit;
    appearance: none;
}
.ts-wrapper.single .ts-control, .ts-wrapper.single.input-active .ts-control {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    height: var(--control-height);
    min-height: var(--control-height);
    padding: 0 var(--select-arrow-space) 0 var(--space-3);
    border-color: var(--border-strong);
    border-radius: var(--radius);
    background: var(--bg) var(--chevron) no-repeat right var(--space-2) center;
    box-shadow: var(--shadow-xs);
}
.ts-wrapper {
    /* Vendor forces padding-right to .75rem !important; the chevron needs the full right padding. */
    --ts-pr-min: var(--select-arrow-space);
    font-size: var(--fs-base);
}
.ts-dropdown, .ts-control, .ts-control input {
    color: var(--text);
    font-family: var(--font-sans);
    font-size: inherit;
}
.ts-wrapper:not(.focus) .ts-control:hover { border-color: var(--border-hover); }
.ts-wrapper.single .ts-control > .item {
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.ts-wrapper.single .ts-control::after { content: none; }
.ts-wrapper:not(.searchable) .ts-control { cursor: pointer; }
.ts-wrapper.single.focus .ts-control {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-ring);
}
.ts-dropdown {
    margin: 0;
    padding: var(--space-1);
    border: 0;
    border-radius: var(--radius);
    background: var(--bg);
    box-shadow: var(--shadow);
    overflow: hidden;
}
.ts-dropdown .ts-dropdown-content {
    scrollbar-width: thin;
    scrollbar-color: var(--border-strong) transparent;
}
@supports selector(::-webkit-scrollbar) {
    /* Chromium keeps the arrow buttons on standard thin scrollbars; a custom one has none. */
    .ts-dropdown .ts-dropdown-content {
        scrollbar-width: auto;
        scrollbar-color: auto;
    }
    .ts-dropdown .ts-dropdown-content::-webkit-scrollbar { width: var(--space-2); }
    .ts-dropdown .ts-dropdown-content::-webkit-scrollbar-thumb {
        background: var(--border-strong);
        border-radius: var(--space-1);
    }
    .ts-dropdown .ts-dropdown-content::-webkit-scrollbar-button { display: none; }
}
.ts-dropdown .option {
    position: relative;
    height: var(--control-height);
    line-height: var(--control-height);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding: 0 calc(var(--space-3) + var(--icon-size) + var(--space-2)) 0 var(--space-3);
    border-radius: var(--radius);
    color: var(--text);
}
.ts-dropdown-content.filtered-options .option {
    content-visibility: auto;
    contain-intrinsic-size: auto var(--control-height);
}
.ts-dropdown .option.has-count,
.ts-dropdown .option.matter-agent,
.ts-wrapper.single .ts-control > .item.matter-agent { display: flex; }
.ts-option-name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ts-option-count {
    flex-shrink: 0;
    margin-left: var(--space-2);
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
}
.ts-dropdown .active { background: var(--bg-muted); color: var(--text); }
.ts-dropdown .option.area-picker-footer {
    position: sticky;
    bottom: 0;
    z-index: 1;
    background: var(--bg);
    color: var(--accent);
    padding-right: var(--space-3);
    content-visibility: visible;
}
.ts-dropdown .area-picker-footer.active { background: var(--bg-muted); }
/* The pinned footer covers one row of the vendor's 200px panel; give that row back. */
.ts-dropdown .ts-dropdown-content:has(.area-picker-footer) {
    max-height: calc(200px + var(--control-height));
}
.ts-dropdown .option.is-archived,
.ts-control > .item.is-archived { color: var(--text-muted); }
.ts-dropdown .selected::after {
    content: "";
    position: absolute;
    right: var(--space-3);
    top: var(--space-2);
    width: var(--icon-size);
    height: var(--icon-size);
    background: var(--text-muted);
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='m4 10 4 4 8-8' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}
.ts-dropdown [data-selectable] .highlight { background: none; color: var(--accent); font-weight: var(--fw-bold); }
.ts-wrapper .ts-control > input,
.ts-wrapper .ts-control > input:hover,
.ts-wrapper .ts-control > input:focus {
    width: auto;
    height: auto;
    min-width: 4rem;
    /* Vendor item/input spacing is unnecessary when the search replaces the item. */
    margin: 0 !important;
    padding: 0;
    border: 0;
    box-shadow: none;
    line-height: inherit;
}
.ts-wrapper.single.has-items:not(.dropdown-active) .ts-control > input {
    position: absolute;
    left: -10000px;
    opacity: 0;
}
.ts-wrapper.searchable:not(.dropdown-active) .ts-control > input { caret-color: transparent; }
.ts-control input::placeholder { color: var(--text-faint); opacity: 1; }
.ts-placeholder { color: var(--text-faint); }
.ts-wrapper.has-items .ts-placeholder { display: none; }
.ts-wrapper.searchable.dropdown-active .ts-control > .item { display: none; }
@scope (.form-field) to (.form-field) {
    :scope.form-field.is-alert :is(input:not(.ts-control input), textarea, .ts-control) { border-color: var(--alert); }
    :scope.form-field.is-warning :is(input:not(.ts-control input), textarea, .ts-control) { border-color: var(--warning); }
    :scope.form-field.is-alert :is(input:not(.ts-control input):focus, textarea:focus, .ts-wrapper.focus > .ts-control) { box-shadow: 0 0 0 3px var(--alert-ring); }
    :scope.form-field.is-warning :is(input:not(.ts-control input):focus, textarea:focus, .ts-wrapper.focus > .ts-control) { box-shadow: 0 0 0 3px var(--warning-ring); }
    :scope.is-alert .field-message { color: var(--alert); }
    :scope.is-warning .field-message { color: var(--warning); }
}

/* Compact numeric controls reserve the arrow only, not the panel's checkmark. */
:is(.schedule-time-fields, .schedule-once-fields) .ts-wrapper { --select-compact: 1; }
.ts-wrapper.compact.single .ts-control {
    padding-left: var(--space-2);
    background-position: right var(--space-2) center;
}
.ts-wrapper.compact .ts-control > .item { flex: 1; text-align: center; }
.ts-wrapper.compact .ts-control > input,
.ts-wrapper.compact .ts-control > input:hover,
.ts-wrapper.compact .ts-control > input:focus {
    /* Center a content-sized box, not the text: a centered empty input puts the
       caret between the placeholder's digits. */
    flex: none;
    min-width: 0;
    max-width: 100%;
    width: auto;
    field-sizing: content;
    margin: 0 auto !important;
    text-align: left;
}
.ts-wrapper.compact .option { text-overflow: clip; }

/* Date picker and schedule fields */

.schedule-day-hint, .schedule-interval-hint { color: var(--text-muted); }
.schedule-time-fields, .schedule-once-fields, .schedule-interval-fields,
.schedule-fields .schedule-hour-field {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    width: max-content;
    max-width: 100%;
}
.schedule-fields .schedule-hour-field { margin: 0; }
.schedule-hour-field > span, .schedule-once-fields > span { color: var(--text-muted); }
.schedule-time-fields > .ts-wrapper, .schedule-hour-field > .ts-wrapper,
.schedule-once-fields > .ts-wrapper, .schedule-interval-fields > .ts-wrapper { flex: none; }
.schedule-once-fields .dialog-popup-anchor { width: calc(var(--space-12) * 3); }
.schedule-once-fields input { width: 100%; min-width: 0; }
.schedule-interval-fields input[type="number"] { width: calc(var(--space-12) * 2); }
.schedule-weekdays { display: flex; gap: var(--space-3); flex-wrap: nowrap; }
/* Outranks the checkbox label margins, which the first-label rule would otherwise make uneven. */
.schedule-weekdays > label:has(> input) { margin: 0; white-space: nowrap; }
.flatpickr-calendar {
    --dialog-popup-width: max-content;
    padding: var(--space-1);
    border: 0;
    border-radius: var(--radius);
    background: var(--bg);
    box-shadow: var(--shadow);
    color: var(--text);
    font-family: var(--font-sans);
    font-size: var(--fs-sm);
    box-sizing: content-box;
}
.flatpickr-calendar.open { animation: none; }
.flatpickr-calendar::before, .flatpickr-calendar::after { display: none; }
.flatpickr-months .flatpickr-month,
.flatpickr-current-month .flatpickr-monthDropdown-months,
span.flatpickr-weekday { background: var(--bg); color: var(--text); }
.flatpickr-day { color: var(--text); border-radius: var(--radius); }
.flatpickr-day:hover, .flatpickr-day:focus {
    background: var(--bg-muted);
    border-color: var(--bg-muted);
}
.flatpickr-day.today { border-color: var(--border-strong); }
.flatpickr-day.selected, .flatpickr-day.selected:hover {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--bg);
}
.flatpickr-day.prevMonthDay, .flatpickr-day.nextMonthDay { color: var(--text-faint); }
.flatpickr-day.flatpickr-disabled,
.flatpickr-day.flatpickr-disabled:hover,
.flatpickr-day.flatpickr-disabled:focus {
    color: var(--text-faint);
    background: transparent;
    border-color: transparent;
}
.flatpickr-weekdays { color: var(--text-muted); }
.flatpickr-calendar .flatpickr-current-month input.cur-year {
    width: auto;
    height: auto;
    padding: 0 0 0 var(--space-1);
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    font-size: inherit;
}

/* Menu and select panel transitions */

.panel-enter { transition: opacity var(--duration) var(--ease), transform var(--duration) var(--ease); }
.panel-leave { transition: opacity var(--duration) var(--ease); pointer-events: none; }
.panel-start { opacity: 0; transform: translateY(-4px); }
.panel-end { opacity: 1; transform: translateY(0); }
.panel-hidden { opacity: 0; }
/* Reduced motion */

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after, ::backdrop {
        animation: none !important;
        transition: none !important;
    }
    .agent-row.is-save-failure,
    .matter-row:is(.is-save-failure, .is-new),
    .matter-list-header:is(.is-save-failure, .is-new) {
        animation: highlight-reduced var(--duration-highlight) linear !important;
    }
    .agent-row.is-new,
    .matter-row.is-new,
    .matter-list-header.is-new {
        animation: highlight-reduced var(--duration-highlight-new) linear !important;
    }
    .panel-enter, .panel-leave { transition: none; }
    .panel-start { transform: none; }
}

.sidebar-separator { border-top: 1px solid var(--border); margin-block: var(--space-2); }
.explore-entry { padding-block: var(--space-4); border-bottom: 1px solid var(--border); }
.explore-profile-name { overflow-wrap: anywhere; }
.explore-profile-list { margin-top: var(--space-6); border-top: 1px solid var(--border); }
.explore-line { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-4); }
.explore-line > .meta { flex: none; white-space: nowrap; }
.explore-name { font-size: var(--fs-base); font-weight: var(--fw-bold); }
.explore-name .text-muted { color: var(--text-muted); }
.explore-signal { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; max-width: 720px; margin-top: var(--space-2); overflow-wrap: anywhere; }
.explore-entry .empty { padding: 0; margin-top: var(--space-2); text-align: left; color: var(--text-faint); }
.explore-byline { margin-top: var(--space-1); overflow-wrap: anywhere; color: var(--text-faint); }
.explore-byline a { color: inherit; }
.explore-tags a { color: inherit; }
.explore-entry a:hover, .explore-tags a:hover { color: var(--accent); }
.explore-search { display: flex; gap: var(--space-2); min-width: 0; max-width: 640px; margin-block: var(--space-6); flex: 1 1 320px; }
.explore-search input[type="search"] { min-width: 0; flex: 1; }
.explore-search button { flex: none; }
.home-hero { display: grid; grid-template-columns: minmax(0, 1fr) 480px; align-items: center; gap: var(--space-12); min-height: 520px; padding-block: var(--space-12); }
.home-hero:not(:has(.home-globe)) { grid-template-columns: minmax(0, 1fr); }
.home-intro { min-width: 0; }
.home-intro h1 { display: block; font-size: 44px; font-weight: var(--fw-bold); line-height: 1.1; letter-spacing: -0.03em; }
.home-intro h1 span { color: var(--text-muted); }
.home-description { max-width: 480px; margin-top: var(--space-4); font-size: var(--fs-md); line-height: 1.5; color: var(--text-muted); }
.home-intro .explore-search { max-width: 480px; margin: var(--space-6) 0 var(--space-3); }
.home-globe { width: 100%; aspect-ratio: 1; min-width: 0; }
.home-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-6); padding-block: var(--space-6); border-block: 1px solid var(--border); }
.home-stats strong { display: block; color: var(--text); font-size: var(--fs-lg); font-weight: var(--fw-bold); font-variant-numeric: tabular-nums; }
.home-stats span { display: block; margin-top: var(--space-1); font-size: var(--fs-sm); color: var(--text-muted); }
.home-lists, .home-how, .home-cta { margin-top: var(--space-12); }
.home-list-heading { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-4); border-bottom: 1px solid var(--border); }
.home-list-heading .detail-tabs { margin-bottom: 0; border-bottom: 0; }
.home-list-heading > a { flex: none; font-size: var(--fs-sm); color: var(--text-muted); }
.home-list-heading > a:hover { color: var(--accent); }
.home-how h2, .home-cta h2 { font-size: var(--fs-md); font-weight: var(--fw-bold); }
.home-how ol { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-12); margin: var(--space-6) 0 0; padding: 0; list-style: none; counter-reset: home-step; }
.home-how li { counter-increment: home-step; }
.home-how li::before { content: counter(home-step, decimal-leading-zero); display: block; margin-bottom: var(--space-3); color: var(--text-muted); font-size: var(--fs-sm); font-variant-numeric: tabular-nums; }
.home-how h3 { font-size: var(--fs-base); font-weight: var(--fw-bold); }
.home-how p { margin-top: var(--space-2); color: var(--text-muted); }
.home-cta { display: flex; align-items: center; justify-content: space-between; gap: var(--space-6); border-top: 1px solid var(--border); padding-top: var(--space-12); }
@media (width < 960px) {
    .home-hero { grid-template-columns: minmax(0, 1fr); min-height: 0; }
    .home-globe { max-width: 360px; justify-self: center; }
}
@media (width < 640px) {
    .home-intro h1 { font-size: 36px; }
    .home-stats, .home-how ol { grid-template-columns: minmax(0, 1fr); }
    .home-cta { align-items: flex-start; flex-direction: column; }
}
.explore-controls { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4); margin-block: var(--space-6); }
.explore-controls .explore-search { margin: 0; }
.explore-tag { width: 224px; max-width: 100%; margin-left: auto; }
.explore-tag select, .explore-tag .ts-wrapper { width: 100%; }
.explore-warning { color: var(--warning); margin-block: var(--space-6); }

body.public-layout, body.public-sign-in { flex-direction: column; overflow-wrap: break-word; }
.public-layout :is(h1, .public-description, .public-properties dd, .public-signal-summary, .summary, .prose, .explore-entry) { overflow-wrap: anywhere; }
.public-sign-in .code-email, .public-layout dialog .code-email { overflow-wrap: anywhere; }
.public-layout .prose pre { max-width: 100%; overflow-x: auto; }
.public-layout .prose img { max-width: 100%; height: auto; }
body.public-layout main { box-sizing: border-box; width: 100%; max-width: 1072px; padding: var(--space-12) var(--space-6); margin: 0 auto; }
.public-topbar, .public-footer { flex-shrink: 0; }
.public-footer {
    width: calc(100% - 2 * var(--space-6));
    max-width: 1024px;
    margin: auto auto 0;
    padding: var(--space-6) 0;
    border-top: 1px solid var(--border);
    display: flex;
    justify-content: space-between;
    gap: var(--space-3);
    font-size: var(--fs-sm);
    color: var(--text-muted);
}
.public-footer a { color: inherit; }
.public-footer a:hover { color: var(--accent); }
.public-legal { max-width: 720px; }
.public-legal > h1 { margin-bottom: var(--space-1); }
.public-legal > .meta { margin-bottom: var(--space-6); }
.public-legal .prose h2 { font-size: var(--fs-md); }
body.public-layout main:has(.home-hero) { padding-top: 0; }
.public-layout main > h1 { margin-bottom: var(--space-1); }
.public-topbar { height: 56px; padding: 0 var(--space-6); border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; }
.public-wordmark { font-size: var(--fs-md); font-weight: var(--fw-bold); letter-spacing: -0.025em; }
.public-byline { margin-top: var(--space-1); }
.public-byline a, .subscription-owner { color: var(--text-muted); }
.public-byline a:hover, .subscription-owner:hover,
.subscription-row.is-paused .subscription-owner:hover { color: var(--accent); }
.public-subscription-heading { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3); }
.public-subscription-heading > :is(h1, .public-matter-link) { min-width: 0; max-width: 100%; overflow-wrap: anywhere; }
.public-subscription-actions { display: flex; align-items: center; justify-content: flex-end; gap: var(--space-3); flex-shrink: 0; }
.public-subscription-actions button svg { width: var(--icon-size); height: var(--icon-size); flex-shrink: 0; }
.public-subscriber-count { white-space: nowrap; }
.public-subscription-heading .public-matter-link { margin-bottom: 0; }
.public-description { white-space: pre-line; max-width: 640px; color: var(--text-muted); }
.public-properties { display: grid; grid-template-columns: 144px minmax(0, 1fr); margin: var(--space-3) 0 0; padding-block: var(--space-1); border-bottom: 1px solid var(--border); }
.public-properties dt { font-size: var(--fs-sm); color: var(--text-muted); }
.public-properties dd { margin: 0; }
.public-preview a { text-decoration: underline; }
.public-signal-row { display: block; }
.public-matter-link { font-size: var(--fs-sm); font-weight: var(--fw-medium); color: var(--text-muted); }
.public-signal-summary, .public-signal-details { max-width: 720px; }
.public-signal-summary { font-size: var(--fs-md); font-weight: var(--fw-bold); white-space: pre-line; line-height: 1.55; letter-spacing: -0.01em; }
.public-signal-details { border-top: 1px solid var(--border); margin-top: var(--space-6); padding-top: var(--space-6); }
.public-signals .empty { color: var(--text-faint); }
@media (width < 640px) {
    body:is(.public-layout, .public-sign-in) main {
        width: 100%;
        padding: var(--space-6) var(--space-4);
    }
    .public-topbar { padding-inline: var(--space-4); gap: var(--space-3); }
    .public-footer { width: calc(100% - 2 * var(--space-4)); padding-inline: 0; flex-direction: column; align-items: flex-start; }
    .public-subscription-heading > :is(h1, .public-matter-link) { flex-basis: 100%; }
    .public-subscription-actions { justify-content: flex-start; flex-wrap: wrap; flex-shrink: 1; }
    .public-properties { grid-template-columns: 96px minmax(0, 1fr); }
    .public-layout .explore-controls { flex-direction: column; align-items: stretch; }
    .public-layout .explore-controls .explore-search { flex: none; width: 100%; }
    .public-layout .explore-tag { width: 100%; margin-left: 0; }
    .public-layout .home-list-heading { flex-wrap: wrap; gap: var(--space-2); }
    .public-layout .home-hero { gap: 0; padding-block: var(--space-6) 0; }
    .public-layout .home-globe { max-width: 280px; overflow: clip; }
    :is(.public-layout, .public-sign-in) dialog {
        width: calc(100vw - 2 * var(--space-4));
        max-width: calc(100vw - 2 * var(--space-4));
        padding: var(--space-4);
    }
    :is(.public-layout, .public-sign-in) .actions { flex-wrap: wrap; }
    :is(.public-layout, .public-sign-in) :is(input, select, textarea, .ts-control, .ts-control input) { font-size: 16px; }
}

/* Signal activity */

.signal-activity { margin-block: var(--space-6); min-width: 0; }
.signal-activity-scroll { overflow-x: auto; padding: 2px; }
.signal-activity-content { width: 686px; }
.signal-activity-chart { display: grid; grid-template-rows: 18px 88px; }
.signal-activity-months { display: grid; grid-template-columns: repeat(53, 10px); gap: 3px; font-size: 12px; line-height: 12px; color: var(--text-faint); }
.signal-activity-months span { white-space: nowrap; }
.signal-activity-days { display: grid; grid-template-columns: repeat(53, 10px); grid-template-rows: repeat(7, 10px); gap: 3px; }
.signal-activity-cell { --activity-color: var(--activity-0); display: inline-block; width: 10px; height: 10px; border-radius: 2px; background: var(--activity-color); flex: none; }
.signal-activity-cell.level-1 { --activity-color: var(--activity-1); }
.signal-activity-cell.level-2 { --activity-color: var(--activity-2); }
.signal-activity-cell.level-3 { --activity-color: var(--activity-3); }
.signal-activity-cell.level-4 { --activity-color: var(--activity-4); }
.signal-activity-cell.is-urgent { background: linear-gradient(135deg, var(--alert) 0 3.4px, var(--bg) 3.4px 4.6px, transparent 4.6px), var(--activity-color); }
.signal-activity-cell.is-selected { outline: 1px solid var(--text); outline-offset: 1px; }
.signal-activity-footer { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); margin-top: 10px; }
.signal-activity-legend { display: inline-flex; align-items: center; gap: var(--space-4); flex: none; }
.signal-activity-scale, .signal-activity-urgent-legend { display: inline-flex; align-items: center; gap: 3px; }
.signal-activity-legend-text { margin-inline: var(--space-1); }
.signal-activity-tooltip { position: fixed; inset: auto; margin: 0; padding: var(--space-2) var(--space-3); border: 1px solid var(--border-strong); border-radius: 4px; background: var(--bg); color: var(--text); font-size: var(--fs-sm); max-width: min(360px, calc(100vw - 16px)); box-shadow: 0 2px 8px rgb(0 0 0 / 0.1); pointer-events: none; overflow-wrap: anywhere; }

@media (width < 640px) {
    .public-layout .signal-activity-scroll { overflow: visible; padding: 0; }
    .public-layout .signal-activity-content { width: auto; }
    .public-layout .signal-activity-chart { grid-template-columns: 686px; overflow-x: auto; padding: 2px; }
    .public-layout .signal-activity-footer { flex-wrap: wrap; }
}

/* Homepage globe internals — the page owns the square container's dimensions. */

.home-globe-ready { position: relative; isolation: isolate; user-select: none; touch-action: pan-y; }
.home-globe-ready::before {
    content: "";
    position: absolute;
    inset: -4%;
    z-index: -1;
    border-radius: 50%;
    background: radial-gradient(circle, transparent 35%, var(--accent-subtle) 49%, transparent 70%);
    opacity: 0.55;
    pointer-events: none;
}
.home-globe-canvas, .home-globe-lines, .home-globe-layer { position: absolute; inset: 0; width: 100%; height: 100%; }
.home-globe-canvas { display: block; }
.home-globe-lines { overflow: visible; pointer-events: none; }
.home-globe-layer { pointer-events: none; }
.home-globe-ready .home-globe-canvas, .home-globe-ready .home-globe-lines, .home-globe-ready .home-globe-layer {
    animation: home-globe-enter 600ms var(--ease) both;
}
.home-globe-outline { fill: none; stroke: var(--border-strong); stroke-width: 1; }
.home-globe-leader { stroke: var(--text-faint); stroke-opacity: 0.6; stroke-width: 1; stroke-dasharray: 1; stroke-dashoffset: 1; opacity: 0; transition: stroke-dashoffset 150ms var(--ease), opacity var(--duration-fade); }
.home-globe-leader.is-visible { stroke-dashoffset: 0; opacity: 1; transition: stroke-dashoffset 200ms var(--ease), opacity 200ms; }
.home-globe-beam { stroke-width: 1.5; opacity: 0; transition: opacity var(--duration-fade); }
.home-globe-beam.is-visible { opacity: 1; }
.home-globe-pin {
    position: absolute;
    left: -9px;
    top: -9px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    pointer-events: auto;
    cursor: pointer;
}
.home-globe-pin::before, .home-globe-pin::after { content: ""; position: absolute; border-radius: 50%; }
.home-globe-pin::before { inset: 5px; background: var(--accent); border: 1.5px solid var(--bg); animation: home-globe-breathe 4s ease-in-out infinite; animation-delay: var(--globe-phase); }
.home-globe-pin.is-recent::before { animation: none; }
.home-globe-pin.is-recent::after { inset: 5px; border: 1px solid var(--accent); animation: home-globe-pulse 2.4s ease-out infinite; animation-delay: var(--globe-phase); }
.home-globe-card {
    position: absolute;
    left: 0;
    top: 0;
    display: grid;
    gap: 2px;
    width: min(220px, 57%);
    max-width: 240px;
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--bg);
    box-shadow: var(--shadow);
    font-size: var(--fs-sm);
    line-height: 1.4;
    opacity: 0;
    translate: 0 4px;
    pointer-events: none;
    transition: opacity var(--duration-fade), translate var(--duration-move) var(--ease);
}
.home-globe-card.is-visible { opacity: 1; translate: 0 0; pointer-events: auto; transition: opacity var(--duration-move) var(--ease), translate var(--duration-move) var(--ease); }
.home-globe-label { display: flex; align-items: center; gap: var(--space-2); color: var(--text-muted); }
.home-globe-label::before { content: ""; width: 6px; height: 6px; flex: none; border-radius: 50%; background: var(--accent); animation: home-globe-label-pulse 2.4s ease-out infinite; }
.home-globe-name { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; overflow-wrap: anywhere; font-size: var(--fs-sm); font-weight: 600; color: var(--text); }
.home-globe-card:hover .home-globe-name { color: var(--accent); }
.home-globe-meta { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; overflow-wrap: anywhere; white-space: normal; color: var(--text-muted); font-size: var(--fs-sm); }
.home-globe-meta time { white-space: nowrap; }
@media (width < 960px) { .home-globe-card { max-width: 200px; } }
.home-globe-ready.is-paused *, .home-globe-ready.is-paused *::before, .home-globe-ready.is-paused *::after { animation-play-state: paused; }
.home-globe-ready.is-reduced-motion *, .home-globe-ready.is-reduced-motion *::before, .home-globe-ready.is-reduced-motion *::after { animation: none; transition: none; }
.home-globe-ready.is-reduced-motion .home-globe-pin.is-recent::after { display: none; }
.home-globe-ready.is-dragging, .home-globe-ready.is-dragging .home-globe-pin { cursor: grabbing; }
@media (width >= 960px) { .home-globe-ready { touch-action: none; cursor: grab; } }
@media (prefers-reduced-motion: reduce) {
    .home-globe-ready .home-globe-canvas, .home-globe-ready .home-globe-lines, .home-globe-ready .home-globe-layer { animation: none; }
}
@keyframes home-globe-enter { from { opacity: 0; transform: scale(0.96); } to { opacity: 1; transform: scale(1); } }
@keyframes home-globe-pulse { from { transform: scale(1); opacity: 0.4; } to { transform: scale(2); opacity: 0; } }
@keyframes home-globe-breathe { 0%, 100% { opacity: 0.6; } 50% { opacity: 1; } }
@keyframes home-globe-label-pulse { from { box-shadow: 0 0 0 0 var(--accent-ring); } to { box-shadow: 0 0 0 5px transparent; } }