/* Waggle v2, the Ottabuzz component stylesheet.
   Reads only the custom properties in tokens.css. Same class names and data attributes as app.css v1,
   so the markup the Hono components render keeps working. Honey marks the next ten minutes;
   everything else is ink on paper. */

/* ---------- What the components draw themselves: the bee, the icon masks, the control height ---------- */
:root {
    --control: var(--control-md);
    --bee: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Crect x='7' y='11' width='5' height='2' rx='1' fill='%23000' /%3E%3Cpath d='M13 0C14.1046 0 15 0.895431 15 2C15 2.36429 14.9026 2.70583 14.7324 3C14.9026 3.29417 15 3.63571 15 4C15 4.36429 14.9026 4.70583 14.7324 5C14.9026 5.29417 15 5.63571 15 6C15 6.36429 14.9026 6.70583 14.7324 7C14.9026 7.29417 15 7.63571 15 8C15 8.36429 14.9026 8.70583 14.7324 9C14.9026 9.29417 15 9.63571 15 10C15 11.1046 14.1046 12 13 12H6C4.89543 12 4 11.1046 4 10C4 9.63571 4.09741 9.29417 4.26758 9C4.09741 8.70583 4 8.36429 4 8C4 7.63571 4.09741 7.29417 4.26758 7C4.09741 6.70583 4 6.36429 4 6C4 5.63571 4.09741 5.29417 4.26758 5C4.09741 4.70583 4 4.36429 4 4C4 3.63571 4.09741 3.29417 4.26758 3C4.09741 2.70583 4 2.36429 4 2C4 0.89543 4.89543 0 6 0H13ZM6 9C5.44772 9 5 9.44772 5 10C5 10.5523 5.44772 11 6 11H13C13.5523 11 14 10.5523 14 10C14 9.91915 13.9888 9.84092 13.9707 9.76562C13.9701 9.76037 13.97 9.75503 13.9688 9.75C13.9673 9.74433 13.9644 9.73903 13.9629 9.7334C13.8461 9.31069 13.4599 9 13 9H6ZM5.03125 9.75C5.02913 9.75826 5.02828 9.76704 5.02637 9.77539C5.0296 9.76134 5.03232 9.74722 5.03613 9.7334C5.0346 9.73895 5.03269 9.74441 5.03125 9.75ZM5.03125 8.25C5.03261 8.25529 5.03469 8.26037 5.03613 8.26562C5.03233 8.2518 5.02958 8.23769 5.02637 8.22363C5.02835 8.23229 5.02905 8.24143 5.03125 8.25ZM13.9629 8.26562C13.9644 8.26029 13.9674 8.25537 13.9688 8.25C13.9709 8.2415 13.9707 8.23222 13.9727 8.22363C13.9694 8.23771 13.9667 8.25178 13.9629 8.26562ZM5.03125 7.75C5.02913 7.75826 5.02828 7.76704 5.02637 7.77539C5.0296 7.76134 5.03232 7.74722 5.03613 7.7334C5.0346 7.73895 5.03269 7.74441 5.03125 7.75ZM13.9727 7.77539C13.9708 7.76712 13.9709 7.75819 13.9688 7.75C13.9673 7.74433 13.9644 7.73903 13.9629 7.7334C13.9667 7.74723 13.9694 7.76132 13.9727 7.77539ZM6 5C5.44772 5 5 5.44772 5 6C5 6.55228 5.44772 7 6 7H13C13.4602 7 13.8464 6.68879 13.9629 6.26562C13.9644 6.26029 13.9674 6.25537 13.9688 6.25C13.97 6.24497 13.9702 6.23964 13.9707 6.23438C13.9888 6.15908 14 6.08085 14 6C14 5.91915 13.9888 5.84092 13.9707 5.76562C13.9701 5.76037 13.97 5.75503 13.9688 5.75C13.9673 5.74433 13.9644 5.73903 13.9629 5.7334C13.8461 5.31069 13.4599 5 13 5H6ZM5.03125 6.25C5.03261 6.25529 5.03469 6.26037 5.03613 6.26562C5.03233 6.2518 5.02958 6.23769 5.02637 6.22363C5.02835 6.23229 5.02905 6.24143 5.03125 6.25ZM5.03125 5.75C5.02913 5.75826 5.02828 5.76704 5.02637 5.77539C5.0296 5.76134 5.03232 5.74722 5.03613 5.7334C5.0346 5.73895 5.03269 5.74441 5.03125 5.75ZM5.03125 4.25C5.03261 4.25529 5.03469 4.26037 5.03613 4.26562C5.03233 4.2518 5.02958 4.23769 5.02637 4.22363C5.02835 4.23229 5.02905 4.24143 5.03125 4.25ZM13.9629 4.26562C13.9644 4.26029 13.9674 4.25537 13.9688 4.25C13.9709 4.2415 13.9707 4.23222 13.9727 4.22363C13.9694 4.23771 13.9667 4.25178 13.9629 4.26562ZM5.03125 3.75C5.02913 3.75826 5.02828 3.76704 5.02637 3.77539C5.0296 3.76134 5.03232 3.74722 5.03613 3.7334C5.0346 3.73895 5.03269 3.74441 5.03125 3.75ZM13.9727 3.77539C13.9708 3.76712 13.9709 3.75819 13.9688 3.75C13.9673 3.74433 13.9644 3.73903 13.9629 3.7334C13.9667 3.74723 13.9694 3.76132 13.9727 3.77539ZM6 1C5.44772 1 5 1.44772 5 2C5 2.55228 5.44772 3 6 3H13C13.4602 3 13.8464 2.68879 13.9629 2.26562C13.9644 2.26029 13.9674 2.25537 13.9688 2.25C13.97 2.24497 13.9702 2.23964 13.9707 2.23438C13.9888 2.15908 14 2.08085 14 2C14 1.44772 13.5523 1 13 1H6ZM5.03125 2.25C5.03261 2.25529 5.03469 2.26037 5.03613 2.26562C5.03233 2.2518 5.02958 2.23769 5.02637 2.22363C5.02835 2.23229 5.02905 2.24143 5.03125 2.25Z' fill='%23000' /%3E%3Cpath d='M2.5 1.5C3.60457 1.5 4.5 2.39543 4.5 3.5V5.5H2.5C1.39543 5.5 0.5 4.60457 0.5 3.5C0.5 2.39543 1.39543 1.5 2.5 1.5Z' stroke='%23000' /%3E%3Cpath d='M2.5 9.5C3.60457 9.5 4.5 8.60457 4.5 7.5V5.5H2.5C1.39543 5.5 0.5 6.39543 0.5 7.5C0.5 8.60457 1.39543 9.5 2.5 9.5Z' stroke='%23000' /%3E%3Cpath d='M10.5 12V14.5C10.5 15.0523 10.0523 15.5 9.5 15.5C8.94772 15.5 8.5 15.0523 8.5 14.5V12H10.5Z' stroke='%23000' /%3E%3C/svg%3E");
    --i-info: url("data:image/svg+xml,%3Csvg stroke-width='1.5' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 11.5V16.5' stroke='%23000' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M12 7.51L12.01 7.49889' stroke='%23000' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z' stroke='%23000' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    --i-warning: url("data:image/svg+xml,%3Csvg stroke-width='1.5' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 7L12 13' stroke='%23000' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M12 17.01L12.01 16.9989' stroke='%23000' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z' stroke='%23000' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    --i-check: url("data:image/svg+xml,%3Csvg stroke-width='2' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5 13L9 17L19 7' stroke='%23000' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    --i-chevron: url("data:image/svg+xml,%3Csvg stroke-width='2' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6 9L12 15L18 9' stroke='%23000' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    --i-search: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' stroke-width='1.5' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M17 17L21 21' stroke='%23000' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M3 11C3 15.4183 6.58172 19 11 19C13.213 19 15.2161 18.1015 16.6644 16.6493C18.1077 15.2022 19 13.2053 19 11C19 6.58172 15.4183 3 11 3C6.58172 3 3 6.58172 3 11Z' stroke='%23000' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");

    color-scheme: light;
    interpolate-size: allow-keywords;
}
[data-theme='dark'] {
    color-scheme: dark;
}
/* Touch: every control grows one step, so no target is under 40px */
@media (pointer: coarse) {
    :root {
        --control: 40px;
    }
}

/* ---------- Base ---------- */
*,
*::before,
*::after {
    box-sizing: border-box;
}
html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    scroll-padding-top: var(--s-6);
}
body {
    margin: 0;
    background: var(--paper);
    color: var(--ink);
    font: 400 var(--t-3) / 1.57 var(--voice);
    font-synthesis: none;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
h1,
h2,
h3,
h4,
p,
ul,
ol,
dl,
dd,
figure,
blockquote {
    margin: 0;
}
ul,
ol {
    padding: 0;
}
h1 {
    font: 400 var(--t-7) / 1.11 var(--label);
    letter-spacing: -0.02em;
    text-wrap: balance;
}
h2 {
    font: 600 var(--t-4) / 1.4 var(--voice);
    letter-spacing: -0.01em;
}
h3,
h4 {
    font: 600 var(--t-3) / 1.43 var(--voice);
    letter-spacing: -0.005em;
}
p,
li {
    text-wrap: pretty;
}
a {
    color: inherit;
    text-decoration-line: underline;
    text-decoration-thickness: 1px;
    text-decoration-color: var(--line-strong);
    text-underline-offset: 0.22em;
    transition: text-decoration-color var(--dur-1) var(--ease);
}
a:hover {
    text-decoration-color: currentColor;
}
::selection {
    background: var(--selection);
    color: var(--ink);
}
/* One focus treatment for everything: ink, 2px, 2px out. Never honey. */
:focus-visible {
    outline: 2px solid var(--focus);
    outline-offset: 2px;
}
:focus:not(:focus-visible) {
    outline: none;
}
.icon {
    display: inline-grid;
    place-items: center;
    flex: none;
}
.icon svg {
    width: 16px;
    height: 16px;
}

/* ---------- Text ---------- */
.lede {
    max-width: 60ch;
    color: var(--ink-2);
    font-size: var(--t-4);
    line-height: 1.5;
}
.muted {
    color: var(--ink-3);
}
.small {
    font-size: var(--t-2);
    line-height: 1.54;
}
.pre {
    white-space: pre-line;
}
.num {
    font-family: var(--machine);
    font-size: 0.93em;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.01em;
}
.num.muted {
    font-weight: 500;
}
.snippet {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    overflow: hidden;
    color: var(--ink-2);
}
/* In a dense list a snippet is a hint, not the read: two lines, quieter. */
.snippet.short {
    -webkit-line-clamp: 2;
    line-clamp: 2;
    color: var(--ink-3);
    font-size: var(--t-2);
}
.eyebrow {
    color: var(--ink-3);
    font: 500 var(--t-1) / 1.33 var(--machine);
    letter-spacing: 0.06em;
    text-transform: uppercase;
}
.display {
    width: fit-content;
    font: 400 clamp(2.5rem, 6.4vw, 4.75rem) / 1.02 var(--label);
    letter-spacing: -0.025em;
    text-wrap: balance;
    background: var(--ink-honey);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
kbd {
    display: inline-grid;
    place-items: center;
    min-width: 20px;
    height: 20px;
    padding: 0 5px;
    border: 1px solid var(--line-2);
    border-bottom-width: 2px;
    border-radius: var(--r-1);
    background: var(--paper);
    color: var(--ink-2);
    font: 500 11px / 1 var(--machine);
}

/* ---------- Layout ---------- */
.stack {
    display: flex;
    flex-direction: column;
    gap: var(--s-6);
}
.stack-2 {
    display: flex;
    flex-direction: column;
    gap: var(--s-2);
}
.stack-3 {
    display: flex;
    flex-direction: column;
    gap: var(--s-3);
}
.row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--s-2);
}
.row.between {
    justify-content: space-between;
}
.grow {
    flex: 1;
    min-width: 0;
}
.split {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
    gap: var(--s-3);
}
.panel {
    padding: var(--s-5);
    border: 1px solid var(--line);
    border-radius: var(--r-3);
    background: var(--paper);
}
.part {
    padding-top: var(--s-5);
    border-top: 1px solid var(--line);
}
.shell {
    display: grid;
    grid-template-columns: var(--side) minmax(0, 1fr);
    min-height: 100dvh;
}
.side {
    position: sticky;
    top: 0;
    display: flex;
    flex-direction: column;
    gap: var(--s-5);
    height: 100dvh;
    overflow-y: auto;
    padding: var(--s-3);
    border-right: 1px solid var(--line);
    background: var(--paper-2);
}
.main {
    width: 100%;
    max-width: calc(var(--measure) + var(--s-6) * 2);
    margin-inline: auto;
    padding: var(--s-7) var(--s-6) var(--s-8);
}

/* Rows: lists are kept, not displayed. Hairlines, no cards. */
.rows {
    list-style: none;
}
.rows > li {
    display: flex;
    align-items: flex-start;
    gap: var(--s-4);
    padding-block: var(--s-4);
    border-top: 1px solid var(--line);
    scroll-margin-top: var(--s-6);
    transition:
        background-color var(--dur-2) var(--ease),
        box-shadow var(--dur-2) var(--ease);
}
.rows > li:last-child {
    border-bottom: 1px solid var(--line);
}
.rows h3 {
    overflow-wrap: anywhere;
}
.rows h3 a {
    text-decoration-color: transparent;
}
.rows h3 a:hover {
    text-decoration-color: currentColor;
}
.rows > li > .hex {
    margin-top: 2px;
}
/* Look-alike threads folded under the first of their kind (Radar): one quiet line in the text column, opening to the
   rest as a dense list. */
.rows > li.alike {
    display: block;
    padding-block: var(--s-2);
    padding-left: calc(var(--hex-w) + var(--s-4));
    border-top: 0;
}
.rows > li.alike summary {
    color: var(--ink-3);
    font-size: var(--t-2);
}
.rows > li.alike .rows {
    margin-top: var(--s-2);
}
/* The row you arrived at from the comb: washed in honey, bleeding a step past the column */
.rows > li:target {
    background: var(--brand-wash);
    box-shadow: 0 0 0 var(--s-3) var(--brand-wash);
    clip-path: inset(0 calc(var(--s-3) * -1));
}
section > h2 .num {
    margin-left: var(--s-1);
}

/* Empty: says what would fill it and offers one way forward */
.empty {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--s-3);
    padding: var(--s-6);
    border: 1px dashed var(--line-2);
    border-radius: var(--r-3);
}
.empty h2 {
    font: 400 var(--t-5) / 1.3 var(--label);
    letter-spacing: -0.01em;
}
.empty p {
    max-width: 52ch;
    color: var(--ink-2);
}

/* ---------- Status line and advice ---------- */
.status {
    display: flex;
    align-items: flex-start;
    gap: var(--s-2);
    padding: var(--s-3) var(--s-4);
    border: 1px solid var(--line);
    border-radius: var(--r-2);
    background: var(--paper-2);
    color: var(--ink);
}
.status::before {
    content: '';
    flex: none;
    width: 16px;
    height: 16px;
    margin-top: 3px;
    background: var(--ink-3);
    mask: var(--i-info) center / contain no-repeat;
}
.status[role='alert'] {
    border-color: var(--ink);
    background: var(--paper);
}
.status[role='alert']::before {
    background: var(--danger);
    mask-image: var(--i-warning);
}
/* Model advice: a dashed edge says a suggestion, not a fact */
.play {
    padding: var(--s-2) var(--s-3);
    border: 1px dashed var(--line-2);
    border-radius: var(--r-2);
    background: var(--paper-2);
    color: var(--ink-2);
}

/* ---------- Buttons ---------- */
.btn {
    --btn-h: var(--control);
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--s-2);
    min-height: var(--btn-h);
    padding: 5px var(--s-3);
    border: 1px solid var(--line-2);
    border-radius: var(--r-2);
    background-color: var(--paper);
    color: var(--ink);
    font: 500 var(--t-2) / 1.25 var(--voice);
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    user-select: none;
    touch-action: manipulation;
    transition:
        background-color var(--dur-1) var(--ease),
        border-color var(--dur-1) var(--ease),
        color var(--dur-1) var(--ease),
        translate var(--dur-1) var(--ease);
}
.btn:hover {
    border-color: var(--line-strong);
    background-image: linear-gradient(var(--wash), var(--wash));
}
.btn:active {
    background-image: linear-gradient(var(--wash-2), var(--wash-2));
    translate: 0 1px;
}
.btn-primary {
    border-color: transparent;
    background-color: var(--brand);
    color: var(--on-brand);
    font-weight: 600;
    box-shadow: var(--bevel);
}
/* A bookmarklet: a button you drag, so it says so with the cursor and a dotted edge. */
.bookmarklet {
    cursor: grab;
    outline: 1.5px dashed var(--line-2);
    outline-offset: 3px;
}
.bookmarklet:active {
    cursor: grabbing;
}
.btn-primary:hover {
    border-color: transparent;
    background-color: var(--brand-hover);
    background-image: none;
}
.btn-primary:active {
    background-color: var(--brand-press);
    background-image: none;
}
.btn-ink {
    border-color: transparent;
    background-color: var(--ink);
    color: var(--paper);
}
.btn-ink:hover,
.btn-ink:active {
    border-color: transparent;
    background-color: color-mix(in oklab, var(--ink) 86%, var(--paper));
    background-image: none;
}
.btn-ghost {
    border-color: transparent;
    background-color: transparent;
    color: var(--ink-2);
}
.btn-ghost:hover {
    border-color: transparent;
    color: var(--ink);
}
.btn-sm {
    --btn-h: var(--control-sm);
    padding: 3px var(--s-2);
}
.btn-lg {
    --btn-h: var(--control-lg);
    padding-inline: var(--s-5);
    font-size: var(--t-3);
}
.btn-icon {
    width: var(--btn-h);
    padding: 0;
}
.btn > .icon:first-child:not(:last-child) {
    margin-left: -2px;
}
.btn > .icon:last-child:not(:first-child) {
    margin-right: -2px;
}
.btn:disabled,
.btn[aria-disabled='true'] {
    opacity: 0.45;
    cursor: not-allowed;
    translate: none;
}
/* Busy: the label says what it is doing; a hairline crawls along the bottom. No spinners. */
.btn[aria-busy='true'] {
    overflow: hidden;
    cursor: progress;
    opacity: 1;
}
.btn[aria-busy='true']::after {
    content: '';
    position: absolute;
    inset: auto 0 0;
    height: 2px;
    background: currentColor;
    opacity: 0.4;
    transform-origin: left;
    animation: busy 1.4s var(--ease) infinite;
}
@keyframes busy {
    0% {
        scale: 0 1;
        translate: 0;
    }
    55% {
        scale: 1 1;
        translate: 0;
    }
    100% {
        scale: 1 1;
        translate: 100%;
    }
}
[data-theme-toggle] .icon {
    transition:
        rotate var(--dur-2) var(--ease),
        opacity var(--dur-2) var(--ease);
}
@starting-style {
    [data-theme-toggle] .icon {
        rotate: -90deg;
        opacity: 0;
    }
}
:root:not([data-theme='dark']) [data-theme-toggle] .to-light,
[data-theme='dark'] [data-theme-toggle] .to-dark {
    display: none;
}

/* ---------- Fields ---------- */
.field {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.field > label {
    font: 550 var(--t-2) / 1.54 var(--voice);
}
.field > :is(input, textarea, select, .search) {
    margin-top: var(--s-1);
}
.help {
    color: var(--ink-3);
    font-size: var(--t-2);
    line-height: 1.54;
}
.error {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    width: fit-content;
    margin-top: var(--s-1);
    padding: 2px var(--s-2) 2px 6px;
    border-radius: var(--r-1);
    background: var(--danger-wash);
    color: var(--danger);
    font: 500 var(--t-2) / 1.54 var(--voice);
}
.error::before {
    content: '';
    flex: none;
    width: 14px;
    height: 14px;
    margin-top: 3px;
    background: currentColor;
    mask: var(--i-warning) center / contain no-repeat;
}
input:not([type='checkbox'], [type='radio'], [type='range'], [type='color'], [type='file']),
textarea,
select {
    width: 100%;
    min-height: var(--control);
    padding: 0 var(--s-3);
    border: 1px solid var(--line-2);
    border-radius: var(--r-2);
    background-color: var(--paper);
    color: var(--ink);
    font: 400 var(--t-3) / 1.4 var(--voice);
    transition:
        border-color var(--dur-1) var(--ease),
        background-color var(--dur-1) var(--ease);
}
:is(input, textarea, select):hover {
    border-color: var(--line-strong);
}
:is(input, textarea, select):focus-visible {
    border-color: var(--ink);
    outline-offset: 1px;
}
::placeholder {
    color: var(--ink-3);
    opacity: 1;
}
textarea {
    display: block;
    min-height: calc(3lh + var(--s-2) * 2 + 2px);
    max-height: 24lh;
    padding: var(--s-2) var(--s-3);
    line-height: 1.57;
    resize: vertical;
    field-sizing: content;
}
input.inline {
    flex: 1 1 200px;
    width: auto;
    max-width: 280px;
}
/* Invalid only after the person has touched the field */
:is(input, textarea, select):user-invalid,
[aria-invalid='true'] {
    border-color: var(--danger);
}
/* Model words sit on a quieter sheet until you touch them */
textarea.draft {
    border-color: transparent;
    background-color: var(--paper-2);
}
textarea.draft:hover {
    border-color: var(--line-2);
}
textarea.draft:focus {
    border-color: var(--ink);
    background-color: var(--paper);
}
select:not([multiple]) {
    width: auto;
    padding-right: var(--s-7);
    appearance: none;
    background-image:
        linear-gradient(45deg, transparent 50%, var(--ink-3) 50%),
        linear-gradient(135deg, var(--ink-3) 50%, transparent 50%);
    background-position:
        calc(100% - 17px) 52%,
        calc(100% - 12px) 52%;
    background-size: 5px 5px;
    background-repeat: no-repeat;
    cursor: pointer;
}
.search {
    position: relative;
    display: flex;
    align-items: center;
}
.search::before {
    content: '';
    position: absolute;
    left: 10px;
    width: 16px;
    height: 16px;
    background: var(--ink-3);
    mask: var(--i-search) center / contain no-repeat;
    pointer-events: none;
}
.search input {
    padding-left: 34px;
    padding-right: 38px;
}
.search input::-webkit-search-cancel-button {
    appearance: none;
}
.search kbd {
    position: absolute;
    right: 8px;
    pointer-events: none;
}
.search input:focus ~ kbd,
.search input:not(:placeholder-shown) ~ kbd {
    display: none;
}

fieldset {
    display: flex;
    flex-direction: column;
    gap: var(--s-2);
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
}
legend {
    margin-bottom: var(--s-1);
    padding: 0;
    font: 550 var(--t-2) / 1.54 var(--voice);
}

/* Checkbox, radio, switch: native inputs, drawn in ink. Checked is ink, never honey. */
.check {
    display: inline-flex;
    align-items: flex-start;
    gap: var(--s-2);
    cursor: pointer;
}
input:is([type='checkbox'], [type='radio']) {
    position: relative;
    display: inline-grid;
    place-content: center;
    flex: none;
    width: 16px;
    height: 16px;
    margin: 3px 0 0;
    border: 1px solid var(--line-strong);
    border-radius: var(--r-1);
    background: var(--paper);
    appearance: none;
    cursor: pointer;
    transition:
        background-color var(--dur-1) var(--ease),
        border-color var(--dur-1) var(--ease);
}
input[type='radio'] {
    border-radius: 50%;
}
input:is([type='checkbox'], [type='radio']):hover {
    border-color: var(--ink-2);
}
input:is([type='checkbox'], [type='radio']):is(:checked, :indeterminate) {
    border-color: var(--ink);
    background: var(--ink);
}
input:is([type='checkbox'], [type='radio'])::before {
    content: '';
    width: 12px;
    height: 12px;
    background: var(--paper);
    mask: var(--i-check) center / contain no-repeat;
    scale: 0;
    transition: scale var(--dur-1) var(--ease);
}
input:is([type='checkbox'], [type='radio']):is(:checked, :indeterminate)::before {
    scale: 1;
}
input[type='checkbox']:indeterminate::before {
    width: 8px;
    height: 2px;
    border-radius: 1px;
    mask: none;
}
input[type='radio']::before {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    mask: none;
}
input[type='checkbox'][role='switch'] {
    display: block;
    width: 30px;
    height: 18px;
    border-radius: var(--r-full);
    background: var(--paper-3);
}
input[type='checkbox'][role='switch']::before {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--ink-2);
    mask: none;
    scale: 1;
    transition:
        translate var(--dur-2) var(--ease),
        background-color var(--dur-1) var(--ease);
}
input[type='checkbox'][role='switch']:checked {
    border-color: var(--ink);
    background: var(--ink);
}
input[type='checkbox'][role='switch']:checked::before {
    background: var(--paper);
    translate: 12px 0;
}
:is(input, select, textarea):disabled,
.check:has(:disabled) {
    opacity: 0.45;
    cursor: not-allowed;
}

/* ---------- Tags, counts, heat ---------- */
.tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 22px;
    padding: 0 var(--s-2);
    border-radius: var(--r-1);
    background: var(--gray-wash);
    color: var(--gray-ink);
    font: 500 var(--t-1) / 1 var(--voice);
    white-space: nowrap;
}
.tag[data-hue='red'] {
    background: var(--red-wash);
    color: var(--red-ink);
}
.tag[data-hue='orange'] {
    background: var(--orange-wash);
    color: var(--orange-ink);
}
.tag[data-hue='green'] {
    background: var(--green-wash);
    color: var(--green-ink);
}
.tag[data-hue='blue'] {
    background: var(--blue-wash);
    color: var(--blue-ink);
}
.tag[data-hue='violet'] {
    background: var(--violet-wash);
    color: var(--violet-ink);
}
.tag[data-hue='pink'] {
    background: var(--pink-wash);
    color: var(--pink-ink);
}
/* Something running out: a still dot, never a pulse */
.tag[data-live]::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
}
.count {
    display: inline-grid;
    place-items: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: var(--r-full);
    background: var(--brand);
    color: var(--on-brand);
    font: 600 var(--t-1) / 1 var(--machine);
    font-variant-numeric: tabular-nums;
}
/* A comb cell holding one thread's fit score */
.hex {
    --w: var(--hex-w);
    display: inline-grid;
    place-items: center;
    flex: none;
    width: var(--w);
    height: calc(var(--w) * 1.1547);
    clip-path: var(--hex);
    background: var(--wax);
    color: var(--ink-2);
    font: 600 var(--t-2) / 1 var(--machine);
    font-variant-numeric: tabular-nums;
}
.hex[data-heat='warm'] {
    background: var(--brand-soft);
    color: var(--ink);
}
.hex[data-heat='hot'] {
    background: var(--brand);
    color: var(--on-brand);
}
.cell {
    flex: none;
    width: 10px;
    height: 11.5px;
    clip-path: var(--hex);
    background: var(--wax);
}
.cell[data-hot] {
    background: var(--brand);
}

/* ---------- The comb: the week, one cell a thread, hottest first ---------- */
.hive {
    display: flex;
    flex-direction: column;
    gap: var(--s-3);
    padding: var(--s-5);
    border: 1px solid var(--line);
    border-radius: var(--r-3);
    background: var(--paper-2);
    overflow: hidden;
    container-type: inline-size;
}
.comb {
    --gap: 3px;
    --w: min(34px, (100cqi - 26 * var(--gap)) / 26.5);
    --h: calc(var(--w) * 1.1547);
    --row: calc(var(--h) * 0.75 + var(--gap) * 0.866);
    display: grid;
    grid-auto-flow: column;
    grid-template-rows: repeat(3, var(--row));
    grid-auto-columns: calc(var(--w) + var(--gap));
    width: max-content;
    padding: 0 calc(var(--w) / 2) calc(var(--h) - var(--row)) 0;
}
.comb > * {
    width: var(--w);
    height: var(--h);
    clip-path: var(--hex);
    background: var(--wax-faint);
}
.comb > :nth-child(3n + 2) {
    translate: calc((var(--w) + var(--gap)) / 2) 0;
}
/* A thread's cell is wax from the first frame, so the comb is whole while it fills: only its colour grows in, from
   the left. */
.comb > a {
    position: relative;
    background: var(--wax);
    transition: filter var(--dur-1) var(--ease);
}
.comb > a::before {
    content: '';
    position: absolute;
    inset: 0;
    clip-path: var(--hex);
    background: var(--wax);
    animation: fill var(--dur-2) var(--ease) backwards;
    animation-delay: calc(var(--i, 0) * 16ms);
}
.comb > a[data-heat='warm']::before {
    background: var(--brand-soft);
}
.comb > a[data-heat='hot']::before {
    background: var(--brand);
}
.comb > a:hover {
    filter: brightness(0.88);
}
.comb > a:focus-visible {
    outline: none;
}
.comb > a:focus-visible::before {
    background: var(--ink);
}
@keyframes fill {
    from {
        opacity: 0;
        scale: 0.4;
    }
}

/* ---------- The tuner: shape a draft before the model writes it again ---------- */
/* The composer: a draft with its toolbar of one-tap nudges and the takes pager, all on the quiet sheet */
.composer {
    border: 1px solid transparent;
    border-radius: var(--r-2);
    background: var(--paper-2);
    transition:
        background-color var(--dur-1) var(--ease),
        border-color var(--dur-1) var(--ease);
}
.composer:hover {
    border-color: var(--line-2);
}
.composer:has(textarea:focus) {
    border-color: var(--ink);
    background: var(--paper);
}
.composer:has(textarea:focus-visible) {
    outline: 2px solid var(--focus);
    outline-offset: 1px;
}
.composer textarea.draft,
.composer textarea.draft:hover,
.composer textarea.draft:focus {
    border-color: transparent;
    background: transparent;
    outline: none;
    resize: none;
}
.composer-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--s-1);
    padding: 0 var(--s-2) var(--s-2);
}
.takes {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    margin-left: auto;
    color: var(--ink-3);
}
.takes .num {
    min-width: 3.2em;
    font-size: var(--t-1);
    font-weight: 500;
    text-align: center;
}
/* Chips: a choice you can see. Checked is ink, like every other checked control. */
.chip {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 28px;
    padding: 0 var(--s-3);
    border: 1px solid var(--line-2);
    border-radius: var(--r-full);
    background: var(--paper);
    color: var(--ink-2);
    font: 500 var(--t-2) / 1 var(--voice);
    white-space: nowrap;
    cursor: pointer;
    user-select: none;
    transition:
        background-color var(--dur-1) var(--ease),
        border-color var(--dur-1) var(--ease),
        color var(--dur-1) var(--ease),
        translate var(--dur-1) var(--ease);
}
.chip:hover {
    border-color: var(--line-strong);
    color: var(--ink);
}
button.chip:active {
    translate: 0 1px;
}
.chip .icon svg {
    width: 14px;
    height: 14px;
}
.chip input,
.seg input {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: 0;
    opacity: 0;
    pointer-events: none;
}
.chip:has(:checked) {
    border-color: var(--ink);
    background: var(--ink);
    color: var(--paper);
}
.chip:has([type='checkbox'])::before {
    content: '';
    width: 0;
    height: 12px;
    margin-right: -6px;
    background: currentColor;
    mask: var(--i-check) center / contain no-repeat;
    transition:
        width var(--dur-1) var(--ease),
        margin var(--dur-1) var(--ease);
}
.chip:has([type='checkbox']:checked)::before {
    width: 12px;
    margin-right: 0;
}
.chip:has(:focus-visible),
.seg label:has(:focus-visible) {
    outline: 2px solid var(--focus);
    outline-offset: 2px;
}
.chips {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-2);
}
/* Segmented choice: radios that read like the filters */
.seg {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 2px;
    width: fit-content;
    padding: 2px;
    border: 1px solid var(--line);
    border-radius: calc(var(--r-2) + 2px);
    background: var(--paper-2);
}
.seg label {
    position: relative;
    display: inline-flex;
    align-items: center;
    height: 28px;
    padding: 0 10px;
    border: 1px solid transparent;
    border-radius: var(--r-2);
    color: var(--ink-3);
    font: 500 var(--t-2) / 1 var(--voice);
    cursor: pointer;
    transition:
        color var(--dur-1) var(--ease),
        background-color var(--dur-1) var(--ease);
}
.seg label:hover {
    color: var(--ink);
}
.seg label:has(:checked) {
    border-color: var(--line-2);
    background: var(--paper-raised);
    color: var(--ink);
}
/* The panel: a small mixing desk. Section names in the machine face, controls in ink. */
.tuner {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: var(--s-5) var(--s-6);
    padding: var(--s-4) var(--s-5);
    border: 1px solid var(--line);
    border-radius: var(--r-3);
    background: var(--paper);
}
.tuner > :first-child,
.tuner > footer {
    grid-column: 1 / -1;
}
.tuner legend,
.axis {
    color: var(--ink-3);
    font: 500 11px / 1.33 var(--machine);
    letter-spacing: 0.06em;
    text-transform: uppercase;
}
.tuner legend {
    margin-bottom: var(--s-2);
}
.tuner > footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--s-2);
    padding-top: var(--s-4);
    border-top: 1px solid var(--line);
}
.tuner > footer .seg {
    margin-right: auto;
}
/* The pad: length up and down, voice left and right. 25 radios, so it posts without the script. */
.pad-wrap {
    display: grid;
    grid-template-columns: auto auto auto;
    align-items: center;
    justify-items: center;
    gap: 6px;
    align-self: start;
}
.pad-wrap > :nth-child(1) {
    grid-area: 1 / 2;
}
.pad-wrap .side-l {
    grid-area: 2 / 1;
    writing-mode: vertical-rl;
    rotate: 180deg;
}
.pad-wrap .pad {
    grid-area: 2 / 2;
}
.pad-wrap .side-r {
    grid-area: 2 / 3;
    writing-mode: vertical-rl;
}
.pad-wrap > :nth-child(5) {
    grid-area: 3 / 2;
}
.pad-say {
    grid-area: 4 / 1 / 5 / 4;
    min-height: 20px;
    color: var(--ink-2);
    font-size: var(--t-2);
}
.pad {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    width: 168px;
    aspect-ratio: 1;
    padding: 6px;
    border: 1px solid var(--line-2);
    border-radius: var(--r-3);
    background:
        linear-gradient(var(--line) 0 0) 50% 0 / 1px 100% no-repeat,
        linear-gradient(var(--line) 0 0) 0 50% / 100% 1px no-repeat,
        var(--paper-2);
    cursor: crosshair;
    touch-action: none;
}
.pad:has(:focus-visible) {
    outline: 2px solid var(--focus);
    outline-offset: 2px;
}
.pad input[type='radio'],
.pad input[type='radio']:checked {
    display: grid;
    place-items: center;
    width: 100%;
    height: 100%;
    margin: 0;
    border: 0;
    border-radius: 50%;
    background: none;
    cursor: inherit;
    outline: none;
}
.pad input[type='radio']::before {
    width: 18px;
    height: 18px;
    background: var(--line-strong);
    scale: 0.24;
    transition:
        scale var(--dur-2) var(--ease),
        background-color var(--dur-1) var(--ease);
}
.pad input[type='radio']:hover::before {
    background: var(--ink-3);
    scale: 0.5;
}
.pad input[type='radio']:checked::before {
    background: var(--ink);
    box-shadow: 0 0 0 5px var(--wash-2);
    scale: 1;
}
@media (max-width: 560px) {
    .tuner {
        grid-template-columns: minmax(0, 1fr);
        padding: var(--s-4);
    }
    .pad-wrap {
        justify-self: center;
    }
}

/* ---------- The redraft bar: the foot of a composer ---------- */
/* Everything about changing a draft becomes words in one line, and only Redraft spends a call: a nudge writes its
   words into the line, the desk writes its settings as a sentence. It sits under the draft, on the same sheet, and
   takes the composer's ink edge with it. */
.redraft {
    display: flex;
    flex-direction: column;
    gap: var(--s-1);
    padding: var(--s-2);
    border-top: 1px solid var(--line);
    container-type: inline-size;
}
.redraft-row {
    display: flex;
    align-items: center;
    gap: var(--s-2);
    min-width: 0;
}
/* Redraft stays at the foot of the line as the line grows */
.redraft-row:first-child {
    align-items: flex-end;
}
/* The line has no box of its own, the composer is the box. One line tall until the words need more. */
.redraft textarea.redraft-ask,
.redraft textarea.redraft-ask:hover,
.redraft textarea.redraft-ask:focus {
    flex: 1 1 0;
    width: auto;
    min-width: 0;
    min-height: var(--control);
    max-height: 8lh;
    padding: calc((var(--control) - 1lh - 2px) / 2) var(--s-2);
    border-color: transparent;
    background: transparent;
    outline: none;
    resize: none;
}
/* Nudges stay on one line and scroll sideways when the bar is narrow, fading out under the voice button */
.redraft-nudges {
    display: flex;
    flex: 1 1 0;
    gap: var(--s-1);
    min-width: 0;
    padding: 2px var(--s-5) 2px 2px;
    overflow-x: auto;
    scrollbar-width: none;
    mask-image: linear-gradient(90deg, #000 calc(100% - var(--s-5)), transparent);
}
.redraft-nudges .chip {
    flex: none;
}
/* Pressed while its words stand in the line: ink, like a checked chip */
.chip[aria-pressed='true'] {
    border-color: var(--ink);
    background: var(--ink);
    color: var(--paper);
}
.redraft .tune-meta {
    max-width: 18ch;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.btn[aria-expanded] .icon:last-child {
    transition: rotate var(--dur-1) var(--ease);
}
.btn[aria-expanded='true'] .icon:last-child {
    rotate: 180deg;
}
/* The desk opens in the flow under the nudges, without a box of its own */
.redraft .tuner {
    margin-top: var(--s-1);
    padding: var(--s-4) var(--s-2) var(--s-2);
    border: 0;
    border-top: 1px solid var(--line);
    border-radius: 0;
    background: transparent;
}
@container (max-width: 520px) {
    .redraft .tuner {
        grid-template-columns: minmax(0, 1fr);
    }
    .redraft .pad-wrap {
        justify-self: center;
    }
    /* In a narrow bar the nudges matter more than the voice's full name */
    .redraft .tune-meta {
        max-width: 11ch;
    }
}

/* ---------- Forms that read like sentences, and show themselves back ---------- */
/* A sentence with blanks: our words in ink-2, yours in ink on a dashed line that grows with what you type */
.sentence {
    color: var(--ink-2);
    font-size: var(--t-5);
    line-height: 2.1;
    text-wrap: pretty;
}
input.blank {
    width: auto;
    min-width: 2ch;
    min-height: 0;
    height: auto;
    padding: 0 2px;
    border: 0;
    border-bottom: 2px dashed var(--line-strong);
    border-radius: 0;
    background: transparent;
    color: var(--ink);
    font: 500 1em / 1.3 var(--voice);
    field-sizing: content;
}
input.blank:hover {
    border-bottom-color: var(--ink-3);
}
input.blank:focus-visible {
    outline: none;
    border-bottom-style: solid;
    border-bottom-color: var(--ink);
    background: var(--wash);
}
input.blank[type='number'] {
    width: 3ch;
    appearance: textfield;
    text-align: center;
}
input.blank::-webkit-inner-spin-button,
input.blank::-webkit-outer-spin-button {
    appearance: none;
    margin: 0;
}
/* Sections of a long form, each ticked once anything in it is filled */
.toc {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-2) var(--s-5);
}
.toc a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--ink-2);
    font: 500 var(--t-2) / 1.4 var(--voice);
    text-decoration: none;
    transition: color var(--dur-1) var(--ease);
}
.toc a:hover {
    color: var(--ink);
}
.toc a::before {
    content: '';
    width: 14px;
    height: 14px;
    border: 1.5px solid var(--line-strong);
    border-radius: 50%;
}
.toc a[data-done]::before {
    border: 0;
    background: var(--ink);
    mask: var(--i-check) center / contain no-repeat;
}
/* The readback: what a model will be told, line by line, as you type it */
.readback {
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr);
    gap: var(--s-3) var(--s-5);
    margin: 0;
    padding: var(--s-4) var(--s-5);
    border: 1px solid var(--line);
    border-radius: var(--r-3);
    background: var(--paper-2);
    color: var(--ink-2);
}
.readback dt {
    padding-top: 3px;
    color: var(--ink-3);
    font: 500 11px / 1.33 var(--machine);
    letter-spacing: 0.06em;
    text-transform: uppercase;
}
.readback dd {
    margin: 0;
    overflow-wrap: anywhere;
}
.readback [data-echo] {
    color: var(--ink);
    font-weight: 500;
}
.readback [data-echo].muted {
    color: var(--ink-3);
    font-weight: 400;
}
/* The save bar stays in reach at the bottom of a long form */
.savebar {
    position: sticky;
    bottom: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--s-3);
    padding: var(--s-3) 0;
    border-top: 1px solid var(--line);
    background: var(--paper);
}
.savebar > :first-child {
    margin-right: auto;
}

/* ---------- Navigation ---------- */
.wordmark {
    display: inline-flex;
    align-items: center;
    gap: 0.4em;
    color: var(--ink);
    font: 400 var(--t-5) / 1 var(--label);
    letter-spacing: -0.01em;
    text-decoration: none;
}
.wordmark::before {
    content: '';
    width: 1em;
    height: 1em;
    background: currentColor;
    mask: var(--bee) center / contain no-repeat;
}
.brand {
    display: flex;
    align-items: center;
    gap: var(--s-1);
    padding-left: var(--s-2);
}
.brand .wordmark {
    margin-right: auto;
}
/* The sidebar's links. On a wide screen they sit in the sidebar; below 768px the same full-row links
   slide in as a drawer from the right, opened by the Menu button (Popover API, no script). */
.side-nav {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: var(--s-5);
}
.side-nav[popover] {
    position: static;
    inset: auto;
    width: auto;
    height: auto;
    margin: 0;
    padding: 0;
    overflow: visible;
    border: 0;
    background: none;
    color: inherit;
}
.side-toggle,
.side-close {
    display: none;
}
.nav {
    display: flex;
    flex-direction: column;
    gap: 1px;
}
.nav h2 {
    padding: 0 var(--s-2) var(--s-1);
    color: var(--ink-3);
    font: 500 var(--t-1) / 1.33 var(--voice);
    letter-spacing: 0.02em;
}
.nav a,
.nav .btn {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: var(--s-2);
    width: 100%;
    min-height: 30px;
    padding: 4px var(--s-2);
    border: 0;
    border-radius: var(--r-2);
    color: var(--ink-2);
    font: 500 var(--t-2) / 1.4 var(--voice);
    text-decoration: none;
    transition:
        background-color var(--dur-1) var(--ease),
        color var(--dur-1) var(--ease);
}
.nav a:hover {
    background: var(--wash);
    color: var(--ink);
}
.nav a[aria-current] {
    background: var(--paper-3);
    color: var(--ink);
    font-weight: 550;
}
.nav .cell {
    margin-inline: 3px;
}
.nav .name {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.nav.foot {
    margin-top: auto;
}
.tabs {
    display: flex;
    gap: var(--s-5);
    overflow-x: auto;
    border-bottom: 1px solid var(--line);
    scrollbar-width: none;
}
.tabs a {
    position: relative;
    padding: var(--s-2) 0 10px;
    color: var(--ink-3);
    font: 500 var(--t-3) / 1.4 var(--voice);
    text-decoration: none;
    white-space: nowrap;
    transition: color var(--dur-1) var(--ease);
}
.tabs a:hover,
.tabs a[aria-current] {
    color: var(--ink);
}
.tabs a[aria-current]::after {
    content: '';
    position: absolute;
    inset: auto 0 -1px;
    height: 2px;
    border-radius: 2px 2px 0 0;
    background: var(--ink);
}
/* Filters: one segmented control, the current shelf lifted onto raised paper */
.filters {
    display: inline-flex;
    align-self: flex-start;
    flex-wrap: wrap;
    gap: 2px;
    max-width: 100%;
    padding: 2px;
    border: 1px solid var(--line);
    border-radius: calc(var(--r-2) + 2px);
    background: var(--paper-2);
}
.filters a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 28px;
    padding: 0 10px;
    border: 1px solid transparent;
    border-radius: var(--r-2);
    color: var(--ink-3);
    font: 500 var(--t-2) / 1 var(--voice);
    text-decoration: none;
    transition:
        color var(--dur-1) var(--ease),
        background-color var(--dur-1) var(--ease);
}
.filters a:hover {
    color: var(--ink);
}
.filters a[aria-current] {
    border-color: var(--line-2);
    background: var(--paper-raised);
    color: var(--ink);
}
.filters .num {
    color: var(--ink-3);
    font-size: var(--t-1);
    font-weight: 500;
}
.filters a[aria-current] .num {
    color: var(--ink-2);
}
/* Disclosure: finished things fold away instead of leaving */
summary {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 2px 0;
    color: var(--ink-2);
    font: 500 var(--t-2) / 1.54 var(--voice);
    list-style: none;
    cursor: pointer;
    transition: color var(--dur-1) var(--ease);
}
summary::-webkit-details-marker {
    display: none;
}
summary::before {
    content: '';
    width: 14px;
    height: 14px;
    background: currentColor;
    mask: var(--i-chevron) center / contain no-repeat;
    rotate: -90deg;
    transition: rotate var(--dur-2) var(--ease);
}
summary:hover {
    color: var(--ink);
}
details[open] > summary::before {
    rotate: 0deg;
}
details[open] > summary {
    margin-bottom: var(--s-2);
}
details::details-content {
    block-size: 0;
    overflow: clip;
    transition:
        block-size var(--dur-2) var(--ease),
        content-visibility var(--dur-2) allow-discrete;
}
details[open]::details-content {
    block-size: auto;
}

/* ---------- What floats: dialog, menu, toast, tooltip. All in the top layer, so no z-index. ---------- */
.dialog {
    width: min(440px, calc(100vw - var(--s-6)));
    padding: var(--s-5);
    border: 1px solid var(--line);
    border-radius: var(--r-4);
    background: var(--paper-raised);
    color: var(--ink);
    box-shadow: var(--float-2);
    opacity: 0;
    translate: 0 8px;
    transition:
        opacity var(--dur-2) var(--ease),
        translate var(--dur-2) var(--ease),
        overlay var(--dur-2) allow-discrete,
        display var(--dur-2) allow-discrete;
}
.dialog[open] {
    opacity: 1;
    translate: 0;
}
@starting-style {
    .dialog[open] {
        opacity: 0;
        translate: 0 8px;
    }
}
.dialog::backdrop {
    background: var(--scrim);
    opacity: 0;
    transition:
        opacity var(--dur-2) var(--ease),
        overlay var(--dur-2) allow-discrete,
        display var(--dur-2) allow-discrete;
}
.dialog[open]::backdrop {
    opacity: 1;
}
@starting-style {
    .dialog[open]::backdrop {
        opacity: 0;
    }
}
.dialog h2 {
    font: 400 var(--t-5) / 1.3 var(--label);
    letter-spacing: -0.01em;
}
.dialog h2 + p {
    margin-top: var(--s-2);
    color: var(--ink-2);
}
.dialog .actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: var(--s-2);
    margin-top: var(--s-5);
}
.menu,
.toast,
.tip {
    margin: 0;
    color: var(--ink);
    opacity: 0;
    translate: 0 -4px;
    transition:
        opacity var(--dur-1) var(--ease),
        translate var(--dur-1) var(--ease),
        overlay var(--dur-1) allow-discrete,
        display var(--dur-1) allow-discrete;
}
:is(.menu, .toast, .tip):popover-open {
    opacity: 1;
    translate: 0;
}
@starting-style {
    :is(.menu, .toast, .tip):popover-open {
        opacity: 0;
        translate: 0 -4px;
    }
}
.menu {
    position: fixed;
    inset: auto;
    min-width: 208px;
    padding: var(--s-1);
    border: 1px solid var(--line);
    border-radius: var(--r-3);
    background: var(--paper-raised);
    box-shadow: var(--float-1);
}
.menu :is(a, button) {
    display: flex;
    align-items: center;
    gap: var(--s-2);
    width: 100%;
    min-height: var(--control);
    padding: 0 var(--s-2);
    border: 0;
    border-radius: var(--r-2);
    background: none;
    color: var(--ink);
    font: 500 var(--t-2) / 1.2 var(--voice);
    text-align: left;
    text-decoration: none;
    cursor: pointer;
}
.menu :is(a, button):is(:hover, :focus-visible) {
    background: var(--paper-3);
}
.menu :is(a, button):focus-visible {
    outline-offset: -2px;
}
.menu .icon {
    color: var(--ink-3);
}
.menu kbd {
    margin-left: auto;
}
.menu hr {
    margin: var(--s-1) calc(var(--s-1) * -1);
    border: 0;
    border-top: 1px solid var(--line);
}
.toast {
    position: fixed;
    inset: auto auto var(--s-5) 50%;
    display: flex;
    align-items: center;
    gap: var(--s-3);
    max-width: calc(100vw - var(--s-6));
    min-height: 44px;
    padding: var(--s-1) var(--s-1) var(--s-1) var(--s-4);
    border: 1px solid var(--line);
    border-radius: var(--r-3);
    background: var(--paper-raised);
    box-shadow: var(--float-1);
    translate: -50% 8px;
}
.toast:popover-open {
    translate: -50% 0;
}
@starting-style {
    .toast:popover-open {
        translate: -50% 8px;
    }
}
.toast:not(:has(.btn)) {
    padding-right: var(--s-4);
}
.tip {
    position: fixed;
    inset: auto;
    max-width: 280px;
    padding: 6px var(--s-2);
    border: 0;
    border-radius: var(--r-1);
    background: var(--ink);
    color: var(--paper);
    font: 500 var(--t-1) / 1.4 var(--voice);
    pointer-events: none;
    box-shadow: var(--float-1);
}
.tip .num {
    margin-right: 6px;
}

/* ========== Ottabuzz, beyond the kit: the parts below belong to this app alone ========== */

/* The alert matrix: one row per alert, a box per channel. Hairlines, like the rows elsewhere. */
.matrix {
    width: 100%;
    max-width: 560px;
    border-collapse: collapse;
}
.matrix th,
.matrix td {
    padding: var(--s-2) var(--s-3) var(--s-2) 0;
    border-bottom: 1px solid var(--line);
    text-align: left;
    vertical-align: top;
}
.matrix thead th {
    padding-bottom: var(--s-1);
    font-size: var(--t-1);
    font-weight: 500;
    color: var(--ink-3);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.matrix tbody th {
    font-weight: 550;
}
.matrix tbody th .help {
    display: block;
    font-size: var(--t-2);
    font-weight: 400;
    color: var(--ink-3);
}
.matrix td {
    width: 88px;
}
.matrix tfoot td {
    border: 0;
}
/* A list that is just lines. */
.plain {
    margin: 0;
    padding: 0;
    list-style: none;
}

/* The card: the next ten minutes, on honey-washed paper with a honey edge. Office hours stack a week in it. */
.card {
    display: flex;
    flex-direction: column;
    gap: var(--s-3);
    padding: var(--s-4) var(--s-5);
    border: 1px solid color-mix(in oklab, var(--brand) 40%, var(--line));
    border-left: 3px solid var(--brand);
    border-radius: var(--r-3);
    background: var(--brand-wash);
}
.card h2 {
    font-size: var(--t-4);
}
.card .rows > li:first-child {
    border-top: 0;
}
.card .rows > li:last-child {
    border-bottom: 0;
    padding-bottom: var(--s-2);
}
/* Eight weeks as cells: honey for a week with marketing work in it. */
.weeks {
    display: inline-flex;
    gap: 3px;
}
.weeks i {
    width: 10px;
    height: 11.5px;
    background: var(--line-2);
    clip-path: var(--hex);
}
.weeks i[data-on] {
    background: var(--brand);
}

/* Last week in one paragraph: a honey rule and the label face, the one place Today speaks in prose. */
.retro {
    margin: 0;
    padding: var(--s-2) var(--s-4);
    border-left: 3px solid var(--brand);
    font-family: var(--label);
    font-size: var(--t-4);
    line-height: 1.55;
    color: var(--ink);
}
.retro small {
    display: block;
    margin-bottom: var(--s-1);
    font: 500 var(--t-1) / 1 var(--voice);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink-3);
}
.retro p {
    margin: 0;
}

/* What a plan allows and where the founder stands: a label in the machine face, a hairline bar filled in ink, the
   count beside it. Running out is not an error, so no red and no honey. */
.allowance {
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr);
    align-items: center;
    gap: var(--s-3) var(--s-5);
    margin: 0;
}
.allowance dt {
    color: var(--ink-3);
    font: 500 var(--t-1) / 1.33 var(--machine);
    letter-spacing: 0.06em;
    text-transform: uppercase;
}
.allowance dd {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--s-2) var(--s-3);
    margin: 0;
    color: var(--ink-2);
    font-size: var(--t-2);
}
.allowance-bar {
    flex: 0 0 120px;
    height: 4px;
    border-radius: var(--r-full);
    background: var(--line-2);
    overflow: hidden;
}
.allowance-bar i {
    display: block;
    width: var(--used);
    height: 100%;
    background: var(--ink);
}

/* How many said yes against a goal's number: the path's dots, ink for each yes. */
.tally {
    display: inline-flex;
    gap: var(--s-1);
}
.tally i {
    width: 10px;
    height: 10px;
    box-sizing: border-box;
    border: 2px solid var(--line-strong);
    border-radius: var(--r-full);
}
.tally i[data-on] {
    border-color: var(--ink);
    background: var(--ink);
}

/* An empty state that holds its one way forward as a form: the form takes the width, the words keep their measure. */
.empty > form {
    align-self: stretch;
}

/* A goal's path: day 0, 1, 10 and 100 as stops on one line, the day number in the machine face like a batch number.
   Done stops are ink, the day you are on is ringed, the rest wait in wax. Never honey: honey is the next move's button. */
.path {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0 var(--s-3);
    margin: 0;
    padding: 0;
    list-style: none;
}
.path a {
    display: flex;
    flex-direction: column;
    gap: var(--s-2);
    padding: var(--s-2) 0;
    color: var(--ink-2);
    text-decoration: none;
}
.path-day {
    color: var(--ink-3);
    font: 500 var(--t-1) / 1.33 var(--machine);
    letter-spacing: 0.06em;
    text-transform: uppercase;
}
.path-day b {
    display: block;
    margin-top: var(--s-1);
    color: var(--ink);
    font: 600 var(--t-6) / 1 var(--machine);
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
}
.path [data-state='later'] .path-day b {
    color: var(--ink-3);
}
.path-dot {
    position: relative;
    display: block;
    height: 12px;
}
.path-dot::before {
    content: '';
    position: absolute;
    inset: 0 auto 0 0;
    width: 12px;
    box-sizing: border-box;
    border: 2px solid var(--line-strong);
    border-radius: var(--r-full);
    background: var(--paper);
}
/* The line runs from this stop's dot across the gap to the next one's. */
.path-dot::after {
    content: '';
    position: absolute;
    top: 5px;
    left: 12px;
    right: calc(-1 * var(--s-3));
    height: 2px;
    background: var(--line-2);
}
.path li:last-child .path-dot::after {
    display: none;
}
.path [data-state='done'] .path-dot::before {
    border-color: var(--ink);
    background: var(--ink);
}
.path [data-state='done'] .path-dot::after {
    background: var(--ink);
}
.path [data-state='now'] .path-dot::before {
    border-color: var(--ink);
    background: var(--ink);
    box-shadow: inset 0 0 0 2px var(--paper);
}
.path-name {
    color: var(--ink);
    font: 550 var(--t-3) / 1.3 var(--voice);
    transition: color var(--dur-1) var(--ease);
}
.path [data-state='later'] .path-name {
    color: var(--ink-2);
}
.path a:hover .path-name {
    text-decoration: underline;
    text-underline-offset: 3px;
}
.path-meta {
    color: var(--ink-3);
    font-size: var(--t-1);
    line-height: 1.33;
}

/* The voice meter: how much a draft sounds like the pieces the founder wrote themselves (voice.ts). */
.voice {
    display: inline-flex;
    align-items: center;
    gap: var(--s-1);
    font-size: var(--t-1);
    color: var(--ink-3);
    cursor: help;
}

/* The slop meter: a short bar filled by how much of the draft reads like marketing, honey when little does. */
.slop {
    display: inline-flex;
    align-items: center;
    gap: var(--s-2);
    font-size: var(--t-1);
    color: var(--ink-3);
    cursor: help;
}
.slop i {
    position: relative;
    width: 48px;
    height: 6px;
    border-radius: 99px;
    background: var(--paper-3);
    overflow: hidden;
}
.slop i::after {
    content: '';
    position: absolute;
    inset: 0 auto 0 0;
    width: var(--slop);
    border-radius: 99px;
    background: var(--ink-3);
}
.slop[data-level='person'] i::after {
    background: var(--brand);
}
.slop[data-level='brochure'] {
    color: var(--ink);
}
.slop[data-level='brochure'] i::after {
    background: var(--ink);
}

/* Sign-in: the panel centred on the quiet sheet, other doors in below it. */

.login {
    display: grid;
    place-items: center;
    min-height: 100vh;
    padding: var(--s-4);
    background: var(--paper-2);
}
.login > div {
    width: min(100%, 360px);
}
.login .home {
    font-size: var(--t-1);
    color: var(--ink-3);
    text-decoration: none;
}
.login .home:hover {
    color: var(--ink);
}
.login form {
    display: flex;
    flex-direction: column;
    gap: var(--s-3);
}
/* Other doors in: a quiet "or", then one full-width button per provider, its mark before the words. */
.providers {
    display: flex;
    flex-direction: column;
    gap: var(--s-2);
    margin-top: var(--s-4);
}
.providers .or {
    display: flex;
    align-items: center;
    gap: var(--s-3);
    color: var(--ink-3);
    font-size: var(--t-1);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}
.providers .or::before,
.providers .or::after {
    content: '';
    flex: 1;
    border-top: 1px solid var(--line);
}
.providers .btn {
    width: 100%;
    gap: var(--s-2);
}
.login .wordmark {
    padding: 0;
    font-size: var(--t-6);
}

/* ---- Prose: a post as it reads, in the editor's preview and on the public log. ---- */
.prose {
    max-width: 68ch;
    font-size: var(--t-4);
    line-height: 1.65;
}
.prose > * + * {
    margin-top: var(--s-4);
}
.prose h1 {
    margin-bottom: var(--s-5);
}
.prose h2 {
    margin-top: var(--s-6);
}
.prose h3 {
    margin-top: var(--s-5);
}
.prose ul,
.prose ol {
    padding-left: var(--s-5);
}
.prose ul {
    list-style: disc;
}
.prose ol {
    list-style: decimal;
}
.prose li + li {
    margin-top: var(--s-1);
}
.prose blockquote {
    margin: 0;
    padding: var(--s-1) var(--s-4);
    border-left: 3px solid var(--brand);
    color: var(--ink-2);
}
.prose code {
    padding: 1px 5px;
    border-radius: var(--r-1);
    background: var(--paper-3);
    font: 500 0.9em var(--machine);
}
.prose pre {
    padding: var(--s-3) var(--s-4);
    border-radius: var(--r-2);
    background: var(--paper-3);
    overflow-x: auto;
}
.prose pre code {
    padding: 0;
    background: none;
    font-size: var(--t-2);
}
.prose hr {
    border: 0;
    border-top: 1px solid var(--line);
}
.prose.preview {
    padding: var(--s-5) var(--s-6);
    border: 1px solid var(--line);
    border-radius: var(--r-3);
    background: var(--paper);
}

/* ---- The public log: one column, the same paper and type, nothing of the app around it. ---- */
.pub {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    background: var(--paper-2);
}
.pub-head,
.pub-main,
.pub-foot {
    width: min(100%, 720px);
    margin: 0 auto;
    padding: var(--s-5) var(--s-4);
}
.pub-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--s-4);
}
.pub-name {
    font: 600 var(--t-5) / 1.2 var(--label);
    color: var(--ink);
    text-decoration: none;
}
.pub-site {
    font-size: var(--t-2);
    color: var(--ink-3);
}
.pub-main {
    flex: 1;
    padding-top: var(--s-6);
    padding-bottom: var(--s-8);
}
.pub-title {
    font-size: var(--t-7);
    line-height: 1.15;
}
.pub-lede {
    max-width: 58ch;
    margin-top: var(--s-3);
    font-size: var(--t-5);
    color: var(--ink-2);
}
.pub-list {
    margin: var(--s-7) 0 0;
    padding: 0;
    list-style: none;
}
.pub-list li {
    padding: var(--s-5) 0;
    border-top: 1px solid var(--line);
}
.pub-list time,
.pub-meta {
    font: 500 var(--t-2) / 1.5 var(--machine);
    color: var(--ink-3);
}
.pub-list h2 {
    margin-top: var(--s-1);
    font-size: var(--t-5);
}
.pub-list h2 a {
    color: var(--ink);
    text-decoration: none;
}
.pub-list h2 a:hover {
    text-decoration: underline;
}
.pub-list p {
    margin-top: var(--s-2);
    color: var(--ink-2);
}
.pub-post .pub-title {
    margin: var(--s-2) 0 var(--s-6);
}
.pub-back {
    margin-top: var(--s-7);
    font-size: var(--t-2);
}
.pub-foot {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: var(--s-3);
    border-top: 1px solid var(--line);
    font-size: var(--t-2);
    color: var(--ink-3);
}

/* ---- The social card in Writing, and the press kit ---- */
.forge {
    display: block;
    width: min(100%, 600px);
    height: auto;
    border: 1px solid var(--line);
    border-radius: var(--r-2);
    background: var(--paper-2);
}
.press-head {
    display: flex;
    align-items: center;
    gap: var(--s-4);
}
.press-head img {
    width: 72px;
    height: 72px;
    object-fit: contain;
    border-radius: var(--r-2);
    background: var(--paper-2);
}
.pub-press h2 {
    margin-top: var(--s-6);
    font: 600 var(--t-4) / 1.3 var(--label);
}
.pub-press h2 + * {
    margin-top: var(--s-2);
}
.press-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: var(--s-3);
}
.press-grid figure {
    margin: 0;
}
.press-grid img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 1200 / 630;
    object-fit: cover;
    border: 1px solid var(--line);
    border-radius: var(--r-2);
    background: var(--paper-2);
}
.press-grid img.mark {
    object-fit: contain;
    padding: var(--s-3);
}
.press-grid figcaption {
    margin-top: var(--s-1);
    font-size: var(--t-1);
    color: var(--ink-3);
}

/* ---- Specimens: the design system pages only ---- */
.card-demo {
    width: 600px;
    height: 315px;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: var(--r-2);
}
.card-demo iframe {
    width: 1200px;
    height: 630px;
    border: 0;
    transform: scale(0.5);
    transform-origin: top left;
}
/* The sidebar as a specimen: in the flow, with an edge, instead of stuck to the window. */
.sink-side .side {
    position: static;
    width: var(--side);
    height: auto;
    border: 1px solid var(--line);
    border-radius: var(--r-3);
}
.sink-side .side-toggle,
.sink-side .side-close {
    display: none;
}
/* A specimen at a phone's width. */
.sink-narrow {
    max-width: 358px;
}
.swatches {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: var(--s-3);
}
.swatch {
    display: flex;
    flex-direction: column;
    gap: var(--s-1);
    font: 500 var(--t-1) / 1.4 var(--machine);
    color: var(--ink-2);
}
.swatch i {
    height: 48px;
    border: 1px solid var(--line);
    border-radius: var(--r-2);
}
.bar {
    height: 12px;
    border-radius: 2px;
    background: var(--ink);
}

/* ---------- One breakpoint: below 768px the sidebar folds into a wrapping top bar ---------- */
@media (max-width: 768px) {
    .shell {
        grid-template-columns: minmax(0, 1fr);
        align-content: start;
    }
    .shell > .side {
        position: static;
        height: auto;
        padding: var(--s-2) var(--s-3);
        border-right: 0;
        border-bottom: 1px solid var(--line);
    }
    .shell .side-toggle,
    .shell .side-close {
        display: inline-flex;
    }
    /* A thread worth a reply still shows when the links are folded away: a honey dot on Menu */
    .shell .side:has(.cell[data-hot]) .side-toggle::after {
        content: '';
        position: absolute;
        top: 6px;
        right: 6px;
        width: 7px;
        height: 7px;
        border-radius: 50%;
        background: var(--brand);
        box-shadow: 0 0 0 2px var(--paper-2);
    }
    .shell .side-close {
        align-self: flex-end;
        margin-bottom: calc(var(--s-5) * -1);
    }
    .shell .side-nav {
        position: fixed;
        inset: 0 0 0 auto;
        width: min(300px, 86vw);
        height: 100dvh;
        padding: var(--s-3);
        overflow-y: auto;
        border-left: 1px solid var(--line);
        background: var(--paper-2);
        box-shadow: var(--float-2);
        translate: 100% 0;
        transition:
            translate var(--dur-2) var(--ease),
            overlay var(--dur-2) allow-discrete,
            display var(--dur-2) allow-discrete;
    }
    .shell .side-nav:not(:popover-open) {
        display: none;
    }
    .shell .side-nav:popover-open {
        translate: 0;
    }
    @starting-style {
        .shell .side-nav:popover-open {
            translate: 100% 0;
        }
    }
    .shell .side-nav::backdrop {
        background: var(--scrim);
    }
    .main {
        padding: var(--s-5) var(--s-4) var(--s-7);
    }
    h1 {
        font-size: var(--t-6);
    }
    .rows > li {
        gap: var(--s-3);
    }
    .hive {
        padding: var(--s-4);
    }
}
@media (max-width: 560px) {
    .split {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* ---------- Between pages ---------- */
/* A link or a post fades one page into the next instead of flashing white. The sidebar sits still. */
@view-transition {
    navigation: auto;
}
.side {
    view-transition-name: side;
}

/* ---------- Respect the reader ---------- */
@media (prefers-reduced-motion: reduce) {
    ::view-transition-group(*),
    ::view-transition-old(*),
    ::view-transition-new(*) {
        animation: none !important;
    }
    *,
    *::before,
    *::after {
        animation-duration: 1ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 1ms !important;
        scroll-behavior: auto !important;
    }
    .btn[aria-busy='true']::after {
        animation: none !important;
    }
}
@media (forced-colors: active) {
    .hex,
    .cell,
    .comb > *,
    .count {
        forced-color-adjust: none;
    }
    .rows > li:target {
        outline: 2px solid Highlight;
    }
}