/* The workbench runs offline, so it uses system fonts and no remote assets at all. */

:root {
    --paper: #f2f4f1;
    --paper-deep: #e6eae5;
    --ink: #1b2421;
    --graphite: #49524e;
    --rule: #c4ccc5;
    --verdigris: #26594b;
    --iron: #8a3b2a;

    /* The rest of the palette. Every colour the stylesheet uses is named here, so the dark theme
       below can give each one a value of its own. */
    --verdigris-deep: #1d4739;
    --surface: #fff;
    --field: #fff;
    --on-accent: #fff;

    /* Folder and document colours: fixed hues a reader chooses between, so each keeps its hue in
       both themes and only its lightness changes. */
    --hue-green: #2f6b4f;
    --hue-blue: #2b5b86;
    --hue-teal: #1f6b6b;
    --hue-amber: #8a6d1f;
    --hue-plum: #6b3a63;
    --hue-rust: #8a3b2a;
    --hue-slate: #49524e;
    --hue-brown: #6b4f1f;
    --label-personal: #7a5a12;

    /* Highlighters, behind text. */
    --mark-yellow: #fde68a;
    --mark-green: #bbf7d0;
    --mark-pink: #fbcfe8;
    --mark-blue: #bfdbfe;
    --arrived: #fef3c7;
    --found: #f2e3a8;

    --ready-ink: #2f6b4f;
    --ready-wash: #eef6f1;
    --ready-rule: #cfe4d8;
    --scroll-shade: rgb(27 36 33 / 0.18);

    /* What a figure from a paper is laid on. A figure is drawn for white paper: dark lines, often
       on no background at all, so in the dark theme it keeps a light ground of its own. */
    --image-ground: var(--paper-deep);
    --diagram-ground: transparent;

    color-scheme: light;
}

/* Dark: the same palette, lifted until it reads on a dark page. Every text colour is at least 5.8:1
   on every dark surface it sits on, and light text keeps at least 6.5:1 on each highlighter.

   The same tokens appear twice: once for a reader who chose dark, once for one who follows this
   computer and whose computer is dark. CSS cannot share a block between a selector and a media
   query, so a test (ThemeStylesheetTests) keeps the two identical rather than care. */
:root[data-theme="dark"] {
    --paper: #121916;
    --paper-deep: #222c27;
    --ink: #dce4df;
    --graphite: #a2aea8;
    --rule: #34413b;
    --verdigris: #7fc4a9;
    --iron: #e89e84;
    --verdigris-deep: #a6dcc6;
    --surface: #1a231f;
    --field: #0e1412;
    --on-accent: #0f1613;
    --hue-green: #6fbf98;
    --hue-blue: #7fa9d6;
    --hue-teal: #6cc1c1;
    --hue-amber: #d9b45a;
    --hue-plum: #c89bc0;
    --hue-rust: #e39a7f;
    --hue-slate: #a2aea8;
    --hue-brown: #c9a36b;
    --label-personal: #d9b45a;
    --mark-yellow: #5e4b0f;
    --mark-green: #1f5236;
    --mark-pink: #5f2748;
    --mark-blue: #1f3f66;
    --arrived: #4a3d10;
    --found: #5e4b0f;
    --ready-ink: #8fd0b0;
    --ready-wash: #15291f;
    --ready-rule: #2a4a3a;
    --scroll-shade: rgb(0 0 0 / 0.6);
    --image-ground: #f2f4f1;
    --diagram-ground: #f2f4f1;
    color-scheme: dark;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme]) {
        --paper: #121916;
        --paper-deep: #222c27;
        --ink: #dce4df;
        --graphite: #a2aea8;
        --rule: #34413b;
        --verdigris: #7fc4a9;
        --iron: #e89e84;
        --verdigris-deep: #a6dcc6;
        --surface: #1a231f;
        --field: #0e1412;
        --on-accent: #0f1613;
        --hue-green: #6fbf98;
        --hue-blue: #7fa9d6;
        --hue-teal: #6cc1c1;
        --hue-amber: #d9b45a;
        --hue-plum: #c89bc0;
        --hue-rust: #e39a7f;
        --hue-slate: #a2aea8;
        --hue-brown: #c9a36b;
        --label-personal: #d9b45a;
        --mark-yellow: #5e4b0f;
        --mark-green: #1f5236;
        --mark-pink: #5f2748;
        --mark-blue: #1f3f66;
        --arrived: #4a3d10;
        --found: #5e4b0f;
        --ready-ink: #8fd0b0;
        --ready-wash: #15291f;
        --ready-rule: #2a4a3a;
        --scroll-shade: rgb(0 0 0 / 0.6);
        --image-ground: #f2f4f1;
        --diagram-ground: #f2f4f1;
        color-scheme: dark;
    }
}

/* A highlighted passage keeps the text's own colour; the browser's default for a mark is black,
   which a dark highlighter would swallow. */
mark {
    color: inherit;
}

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

html,
body {
    margin: 0;
}

body {
    font-family: "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, sans-serif;
    font-size: 15px;
    line-height: 1.55;
    color: var(--ink);
    background: var(--paper);
}

a {
    color: var(--verdigris);
}

/* Wraps: seven sections do not fit beside the name in a narrow window, and a masthead that would
   not wrap made every page wider than the window, so each one scrolled sideways. */
.masthead {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 0.75rem;
    padding: calc(0.9rem + 3px) 1.5rem 0.9rem;
    background: linear-gradient(90deg, var(--hue-green), var(--hue-teal), var(--hue-blue), var(--hue-plum), var(--hue-rust), var(--hue-amber)) top / 100% 3px no-repeat;
    border-bottom: 1px solid var(--rule);
}

.wordmark {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--ink);
    text-decoration: none;
}

.wordmark-mark {
    display: block;
    border-radius: 5px;
}

.primary-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    margin-left: 1rem;
}

/* Light or dark, and the menu button: kept at the right-hand end in every width. */
.masthead-tools {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    margin-left: auto;
}

/* The sections behind a button, for a window too narrow to hold them along the masthead. Seven
   sections beside the name wrapped into a masthead of three rows before the page began. */
.menu-button {
    display: none;
    align-items: center;
    gap: 0.45rem;
    padding: 0.35rem 0.75rem;
    font: inherit;
    color: var(--ink);
    background: var(--surface);
    border: 1px solid var(--rule);
    border-radius: 4px;
    cursor: pointer;
}

.menu-button:hover,
.menu-button[aria-expanded="true"] {
    background: var(--paper-deep);
}

.menu-icon::before {
    content: "\2630";
    font-size: 1.05rem;
    line-height: 1;
}

.section-menu {
    display: flex;
    flex-direction: column;
    flex-basis: 100%;
    gap: 0.15rem;
    padding-top: 0.5rem;
}

@media (max-width: 60rem) {
    .primary-nav {
        display: none;
    }

    .menu-button {
        display: inline-flex;
    }
}

/* Widened again with the menu open: the sections are along the masthead, so not listed twice. */
@media (min-width: 60.001rem) {
    .section-menu {
        display: none;
    }
}

@media (max-width: 40rem) {
    .masthead {
        padding-inline: 1rem;
    }
}

.primary-nav a,
.section-menu a {
    padding: 0.3rem 0.65rem;
    border-radius: 4px;
    color: var(--graphite);
    text-decoration: none;
}

/* Each section's colour is always in sight, as a dot before its name, rather than only once the
   section is open: on the page the workbench opens on, no section is, and every name was grey. */
.primary-nav a,
.section-menu a {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.primary-nav a::before,
.section-menu a::before {
    content: "";
    flex: none;
    width: 0.55rem;
    height: 0.55rem;
    border-radius: 50%;
    background: var(--hue, var(--verdigris));
}

.primary-nav a:hover,
.section-menu a:hover {
    color: var(--hue, var(--ink));
    background: color-mix(in srgb, var(--hue, var(--verdigris)) 12%, transparent);
}

.primary-nav a.active,
.section-menu a.active {
    font-weight: 600;
    color: var(--hue, var(--verdigris));
    background: color-mix(in srgb, var(--hue, var(--verdigris)) 18%, transparent);
    box-shadow: inset 0 -3px 0 var(--hue, var(--verdigris));
}

/* Light or dark, beside the menu, drawn like a section so it reads as one of the
   masthead's controls. It shows where a click goes, as its tooltip says: a moon on a light page, a
   sun on a dark one. A moon in both, lit only by colour, was too alike to tell apart. */
.theme-switch {
    padding: 0.3rem 0.65rem;
    font: inherit;
    line-height: inherit;
    color: var(--graphite);
    background: none;
    border: 0;
    border-radius: 4px;
    cursor: pointer;
}

.theme-switch:hover {
    color: var(--ink);
    background: var(--paper-deep);
}

.theme-switch-icon::before {
    content: "\263E";
}

.theme-switch[aria-pressed="true"] .theme-switch-icon::before {
    content: "\2600";
}

/* Every page takes the width of the window: tables, grids, panes and forms fill what they are given.
   What must stay short to be read - a paragraph, an introduction - is capped where it is set, not by
   capping the page around it, which left the right of a wide window empty on every page. */
main {
    padding: 2rem 1.5rem;
}

/* The view of a paper being read, marked in the row of buttons that lead to its views. */
.page-head .button.current:disabled {
    color: var(--ink);
    background: var(--paper-deep);
    opacity: 1;
    cursor: default;
}

@media (max-width: 40rem) {
    main {
        padding-inline: 1rem;
    }
}

h1 {
    margin: 0 0 0.75rem;
    font-size: 1.75rem;
    font-weight: 600;
    line-height: 1.2;
}

h1::after {
    content: "";
    display: block;
    width: 3rem;
    height: 3px;
    margin-top: 0.4rem;
    border-radius: 2px;
    background: linear-gradient(90deg, var(--hue-green), var(--hue-teal), var(--hue-blue));
}

/* FocusOnNavigate moves focus to the heading for screen readers; the box it draws helps nobody else. */
h1:focus {
    outline: none;
}

p {
    max-width: 65ch;
    color: var(--graphite);
}

#blazor-error-ui {
    display: none;
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    padding: 0.75rem 1.5rem;
    color: var(--on-accent);
    background: var(--iron);
}

#blazor-error-ui .reload {
    color: var(--on-accent);
}

h2 {
    margin: 0 0 0.5rem;
    font-size: 1.15rem;
    font-weight: 600;
    line-height: 1.3;
}

/* Controls */

.button {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.4rem 0.85rem;
    font: inherit;
    font-size: 0.93rem;
    color: var(--ink);
    text-decoration: none;
    background: var(--surface);
    border: 1px solid var(--rule);
    border-radius: 4px;
    cursor: pointer;
}

.button:hover {
    border-color: var(--graphite);
}

.button.primary {
    color: var(--on-accent);
    background: var(--verdigris);
    border-color: var(--verdigris);
}

.button.primary:hover {
    background: var(--verdigris-deep);
}

.button.danger {
    color: var(--iron);
}

.button.danger.confirm {
    color: var(--on-accent);
    background: var(--iron);
    border-color: var(--iron);
}

/* A second thing to do, offered beside a first. Two controls of equal weight side by side make a
   reader choose before they have read either; this one waits to be looked for. */
.button.quiet {
    color: var(--graphite);
    background: transparent;
    border-color: transparent;
}

.button.quiet:hover {
    color: var(--ink);
    border-color: var(--rule);
}

.button:disabled,
.button.disabled {
    opacity: 0.6;
    cursor: default;
}

.button:focus-visible,
.folder:focus-visible,
.place:focus-visible,
.primary-nav a:focus-visible,
.section-menu a:focus-visible,
.menu-button:focus-visible,
.theme-switch:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
    outline: 2px solid var(--verdigris);
    outline-offset: 2px;
}

.actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 1rem;
}

.field {
    display: grid;
    gap: 0.25rem;
    max-width: 36rem;
    margin-bottom: 0.9rem;
}

.field > span {
    font-size: 0.9rem;
    font-weight: 600;
}

.field em {
    font-style: normal;
    font-weight: 400;
    color: var(--graphite);
}

/* Every kind of box a person types into. A kind left out of this list keeps the browser's own
   styling and stands out against the rest of the form, which is how an address box came to look
   unlike the title box beneath it. */
input[type="text"],
input[type="number"],
input[type="url"],
input[type="search"],
input[type="email"],
input[type="date"],
input[type="time"],
input[type="datetime-local"],
input[type="month"],
input[type="week"],
input[type="tel"],
input[type="password"],
textarea,
select {
    width: 100%;
    padding: 0.45rem 0.6rem;
    font: inherit;
    color: var(--ink);
    background: var(--field);
    border: 1px solid var(--rule);
    border-radius: 4px;
}

.notice {
    max-width: none;
    padding: 0.6rem 0.8rem;
    color: var(--ink);
    background: var(--paper-deep);
    border-left: 3px solid var(--graphite);
}

/* A newer version ready to install: one line with its two choices, wrapping in a narrow window. */
.update-notice {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 0.75rem;
    margin-bottom: 1rem;
}

.update-notice > span {
    flex: 1 1 20rem;
}

.notice.error {
    background: color-mix(in srgb, var(--iron) 10%, var(--surface));
    border-color: var(--iron);
}

.notice.human {
    border-color: var(--hue-amber);
}

/* Said rather than refused: something worth knowing before going on, such as sealing a paper over its limit. */
.notice.warning {
    background: color-mix(in srgb, var(--hue-amber) 12%, var(--surface));
    border-color: var(--hue-amber);
}

.empty,
.loading,
.hint,
.meta {
    color: var(--graphite);
}

.meta {
    margin-top: 0;
    font-size: 0.9rem;
}

.breadcrumb {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0 0.4rem;
    margin: 0 0 0.25rem;
    font-size: 0.9rem;
}

/* Drawn rather than written, so the separator is never selected with the text nor read out as part
   of it — and hung on the step's wrapper rather than on the link inside it, so it takes neither the
   link's underline nor its hit area. On the link it could be clicked, and it navigated. */
.breadcrumb > * + *::before {
    content: "/";
    margin-right: 0.4rem;
    color: var(--rule);
}

/* Where the reader already is: named, but not offered as somewhere to go. */
.breadcrumb [aria-current="page"] {
    color: var(--graphite);
    overflow-wrap: anywhere;
}

/* A pill that sits beside whatever it labels. Centred on itself rather than stretched: in a row of
   buttons the flex default would pull it to their full height and leave its text at the top. */
.badge {
    display: inline-flex;
    flex: none;
    align-self: center;
    align-items: center;
    padding: 0.1rem 0.5rem;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    line-height: 1.5;
    white-space: nowrap;
    background: color-mix(in srgb, currentColor 10%, transparent);
    border: 1px solid currentColor;
    border-radius: 999px;
}

/* Each label in a colour of its own, rising from green to the warning colour as it grows more
   sensitive, so the badge is read before its word is. */
.badge.label-public {
    color: var(--hue-green);
}

.badge.label-internal {
    color: var(--hue-blue);
}

.badge.label-personal {
    color: var(--label-personal);
}

.badge.label-specialcategory,
.badge.human {
    color: var(--iron);
}

/* Something the history remembers that is no longer here to open. */
.badge.gone {
    color: var(--graphite);
}

/* A document still being read, drawn and converted. */
.badge.importing {
    gap: 0.35rem;
    margin-left: 0.4rem;
    color: var(--verdigris);
}

.badge.waiting {
    gap: 0.35rem;
    margin-left: 0.4rem;
    opacity: 0.8;
}

.notice.importing {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    background: color-mix(in srgb, var(--verdigris) 10%, var(--surface));
    border-color: var(--verdigris);
}

.spinner {
    display: inline-block;
    flex: none;
    width: 0.8em;
    height: 0.8em;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: spin 0.9s linear infinite;
}

.notice.importing .spinner {
    color: var(--verdigris);
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
    .spinner {
        animation: none;
        border-right-color: currentColor;
        opacity: 0.6;
    }
}

/* What a document is, on one line under its title: the file, its size, its length, and how far it
   may travel. The label sat among the buttons before, where a thing to know looked like a thing to
   press. */
.document-facts {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem 0.6rem;
}

/* A word is filed under occasionally, so the box for one is asked for rather than standing open. */
.tag-form .button.quiet,
.tags > .button.quiet {
    padding: 0.1rem 0.55rem;
    font-size: 0.8rem;
}

/* Tags: the words a document is filed under. */

.tags {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem 0.75rem;
    margin: 0 0 1.25rem;
}

.tags-heading {
    margin: 0;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--graphite);
}

.tag-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.tag {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    padding: 0.1rem 0.25rem 0.1rem 0.6rem;
    font-size: 0.8rem;
    color: var(--ink);
    background: var(--paper);
    border: 1px solid var(--rule);
    border-radius: 999px;
}

/* Inside the chip rather than beside it, so taking a word off is the chip's own affordance. */
.tag-remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.15rem;
    height: 1.15rem;
    padding: 0;
    font-size: 0.95rem;
    line-height: 1;
    color: var(--graphite);
    background: none;
    border: 0;
    border-radius: 999px;
    cursor: pointer;
}

.tag-remove:hover {
    color: var(--ink);
    background: var(--rule);
}

.no-tags {
    margin: 0;
}

.tag-form {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.tag-input {
    width: 12rem;
    max-width: 100%;
    padding: 0.2rem 0.5rem;
    font: inherit;
    font-size: 0.85rem;
    color: var(--ink);
    background: var(--paper);
    border: 1px solid var(--rule);
    border-radius: 0.25rem;
}

/* Projects */

.project-list {
    display: grid;
    /* As many columns as the window fits, each wide enough for a name and its counts. */
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 24rem), 1fr));
    gap: 0.75rem;
    margin: 0 0 2.5rem;
    padding: 0;
    list-style: none;
}

/* Every card in a row as tall as the tallest, so the row reads as one. */
.project-list > li {
    display: grid;
}

.project-list a {
    display: grid;
    gap: 0.1rem;
    padding: 0.75rem 1rem;
    color: var(--ink);
    text-decoration: none;
    background: var(--surface);
    border: 1px solid var(--rule);
    border-radius: 6px;
}

.project-list a:hover {
    border-color: var(--verdigris);
}

/* Choosing projects to delete: a box beside each card that can be chosen. */
.project-list.choosing li {
    display: grid;
    grid-template-columns: 5.5rem 1fr;
    align-items: center;
    gap: 0.5rem;
}

.project-list .choose-project {
    justify-self: center;
    width: 1.1rem;
    height: 1.1rem;
}

.project-list .not-yours {
    justify-self: center;
    font-size: 0.75rem;
    color: var(--graphite);
}

.project-tools {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 0.75rem;
    margin: 0 0 0.75rem;
}

.project-tools .panel {
    flex-basis: 100%;
}

.project-name {
    font-weight: 600;
    color: var(--verdigris);
}

.project-list .meta,
.project-list .description {
    font-size: 0.9rem;
    color: var(--graphite);
}

/* What a project holds, so the list says something without being opened. */

.tally,
.working {
    display: flex;
    flex-wrap: wrap;
    gap: 0.15rem 0.75rem;
    font-size: 0.85rem;
    color: var(--graphite);
}

.tally {
    margin-top: 0.2rem;
}

/* Work in progress, kept apart from the counts: one describes the project, the other this moment. */
.working {
    margin-top: 0.3rem;
    padding-top: 0.3rem;
    border-top: 1px solid var(--paper-deep);
}

.count.busy {
    font-weight: 600;
    color: var(--verdigris);
}

.count.wrong {
    font-weight: 600;
    color: var(--iron);
}

.create {
    padding-top: 1.5rem;
    border-top: 1px solid var(--rule);
}

.templates {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
    gap: 0.6rem;
    margin: 0 0 1rem;
    padding: 0;
    border: 0;
}

.templates legend {
    margin-bottom: 0.4rem;
    font-size: 0.9rem;
    font-weight: 600;
}

.template {
    position: relative;
    display: grid;
    align-content: start;
    gap: 0.2rem;
    padding: 0.75rem 0.9rem 0.75rem 2.2rem;
    background: var(--surface);
    border: 1px solid var(--rule);
    border-radius: 6px;
    cursor: pointer;
}

.template input {
    position: absolute;
    top: 0.95rem;
    left: 0.8rem;
    margin: 0;
    accent-color: var(--verdigris);
}

.template.chosen {
    border-color: var(--verdigris);
    box-shadow: inset 0 0 0 1px var(--verdigris);
}

.template-name {
    font-weight: 600;
}

.template-description {
    font-size: 0.88rem;
    color: var(--graphite);
}

.template-folders {
    font-size: 0.8rem;
    color: var(--graphite);
}

.page-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0 1.5rem;
}

.page-head .actions {
    margin-top: 0.25rem;
}

/* Beside the paper's buttons, its label to the left of the choice rather than above it. */
.citation-style {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--graphite);
    font-size: 0.9rem;
}

.page-head .citation-style select {
    width: auto;
}

/* A paper's head: what it is on the left, its settings on the right, level with the title. */
.page-head.paper-head {
    align-items: flex-start;
    margin-bottom: 0;
}

/* The ways of looking at a paper, as tabs under its head. */
.tab-strip.paper-views {
    margin: 0.75rem 0 1.25rem;
}

/* A drawer of settings: one group per kind of thing, each under a rule, so a long drawer still reads
   as a few short ones. */
.drawer-group {
    padding: 0.85rem 0 1rem;
    border-top: 1px solid var(--rule);
}

.drawer-group h3 {
    margin: 0 0 0.6rem;
    font-size: 1rem;
}

.drawer-group .hint {
    margin: 0.35rem 0 0;
}

.drawer-group .actions {
    margin-top: 0.75rem;
}

.drawer-group .field.short select {
    width: auto;
    max-width: 100%;
}

.drawer-group textarea {
    width: 100%;
    resize: vertical;
}

/* A document's own drawer: what can be asked of it, as a row of buttons that wraps, and then what is
   said about it under a heading of its own, ruled off as the groups above it are. */
.drawer-group .drawer-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.drawer-group .notice {
    margin-top: 0.75rem;
}

.drawer-about {
    margin: 0;
    padding-top: 0.85rem;
    border-top: 1px solid var(--rule);
    font-size: 1rem;
}

/* No summary yet: one line where the summary will be, with the way to ask for it. */
.no-summary {
    margin: 1rem 0;
}

.page-head #paper-settings .fa,
#project-settings .fa {
    margin-right: 0.3rem;
}

/* A paper's length under its title, and how full it is against its limit. Green while there is room,
   amber with a tenth left or under the least it must hold, rust once over. */
.paper-length {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem 0.75rem;
    margin: 0.35rem 0 0;
    color: var(--graphite);
    font-size: 0.9rem;
}

.length-label,
.count-label {
    color: var(--graphite);
}

.paper-length .length-label {
    font-weight: 600;
}

.paper-length #paper-length-text {
    color: var(--ink);
    font-variant-numeric: tabular-nums;
}

.length-meter {
    display: inline-block;
    width: min(14rem, 40vw);
    height: 0.45rem;
    overflow: hidden;
    background: var(--paper-deep);
    border-radius: 999px;
}

.length-meter {
    position: relative;
}

.length-meter > span {
    display: block;
    height: 100%;
    background: var(--hue-green);
    border-radius: inherit;
}

/* The maximum, where a tolerance lets the meter run on past it. */
.length-meter > .length-mark {
    position: absolute;
    top: 0;
    width: 2px;
    margin-left: -1px;
    background: var(--ink);
    border-radius: 0;
}

.paper-length.tolerated .length-meter > span:first-child {
    background: var(--hue-amber);
}

.paper-length.tolerated #paper-length-standing,
.paper-length.tolerated .paper-row-standing {
    color: var(--hue-amber);
    font-weight: 600;
}

.paper-length.over .paper-row-standing {
    color: var(--iron);
    font-weight: 600;
}

#paper-length-standing .fa,
.paper-row-standing .fa {
    margin-right: 0.3rem;
}

.paper-length.near .length-meter > span:first-child,
.paper-length.short .length-meter > span:first-child {
    background: var(--hue-amber);
}

.paper-length.over .length-meter > span:first-child {
    background: var(--iron);
}

.paper-length.over #paper-length-standing {
    color: var(--iron);
    font-weight: 600;
}

/* Each section's length beside its title in the list; a section left out of the count says so faintly. */
.section-length {
    margin-left: auto;
    color: var(--graphite);
    font-size: 0.8rem;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.section-length.left-out {
    opacity: 0.6;
    text-decoration: line-through;
}

#word-count.over {
    color: var(--iron);
    font-weight: 600;
}

/* A group in a drawer whose heading has a button beside it. */
.group-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.75rem;
}

/* The next deadline under a paper's title, coloured by how near it is. */
.paper-deadline {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.35rem;
    margin: 0.35rem 0 0;
    font-size: 0.9rem;
}

.paper-deadline .fa {
    color: var(--graphite);
}

.paper-deadline.soon .fa,
.paper-deadline.today .fa {
    color: var(--hue-amber);
}

.paper-deadline.missed .fa,
.paper-deadline.missed .meta {
    color: var(--iron);
}

/* Deadlines in date order: ticked when done, coloured by how near they are. */
.deadline-list {
    margin: 0.5rem 0 0;
    padding: 0;
    list-style: none;
}

.deadline {
    display: grid;
    grid-template-columns: auto auto 1fr auto;
    align-items: start;
    gap: 0.5rem;
    padding: 0.45rem 0 0.45rem 0.5rem;
    border-top: 1px solid var(--rule);
    border-left: 3px solid transparent;
}

.deadline:has(.deadline-form) {
    display: block;
}

/* Reminders at the top of every page: amber, like a deadline that is soon, and gone once dismissed. */
.reminders {
    margin: 0 0 1.25rem;
    padding: 0.7rem 0.9rem;
    background: color-mix(in srgb, var(--hue-amber) 12%, var(--surface));
    border: 1px solid color-mix(in srgb, var(--hue-amber) 40%, var(--rule));
    border-left: 4px solid var(--hue-amber);
    border-radius: 6px;
}

.reminders-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.4rem 1rem;
}

.reminders-head h2 {
    margin: 0;
    font-size: 1rem;
}

.reminders-head h2 .fa {
    margin-right: 0.35rem;
    color: var(--hue-amber);
}

.reminders-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.reminder-list {
    margin: 0.5rem 0 0;
    padding: 0;
    list-style: none;
}

.reminder {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.2rem 0.6rem;
    padding: 0.3rem 0 0.3rem 0.6rem;
    border-left: 3px solid transparent;
}

.reminder.missed,
.reminder.today {
    border-left-color: var(--iron);
}

.reminder.soon {
    border-left-color: var(--hue-amber);
}

.reminder-title {
    font-weight: 600;
}

.deadline.soon,
.deadline.today {
    border-left-color: var(--hue-amber);
}

.deadline.missed {
    border-left-color: var(--iron);
}

.deadline.missed .deadline-relative {
    color: var(--iron);
    font-weight: 600;
}

.deadline.done .deadline-title {
    color: var(--graphite);
    text-decoration: line-through;
}

.deadline-icon {
    padding-top: 0.2rem;
    color: var(--graphite);
}

.deadline-body {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.deadline-body .meta {
    font-size: 0.85rem;
}

.deadline-notes-text {
    color: var(--graphite);
    font-size: 0.85rem;
    white-space: pre-line;
}

.deadline-tools {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
}

.deadline-form {
    margin: 0.5rem 0;
    padding: 0.75rem;
    background: var(--paper-deep);
    border-radius: 6px;
}

.deadline-form .field-row {
    flex-wrap: wrap;
}

/* The sections in the settings drawer: whether each counts, its length, and what it aims for. */
.length-sections {
    margin: 0.85rem 0 0;
    padding: 0;
    list-style: none;
}

.length-sections li {
    display: grid;
    grid-template-columns: 1fr auto 5.5rem;
    align-items: center;
    gap: 0.5rem;
    padding: 0.3rem 0;
    border-top: 1px solid var(--rule);
}

.length-sections li.level-2 { padding-left: 1rem; }
.length-sections li.level-3 { padding-left: 2rem; }
.length-sections li.level-4,
.length-sections li.level-5,
.length-sections li.level-6 { padding-left: 3rem; }

.length-counts {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    min-width: 0;
}

.length-counts span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.length-sections .section-target {
    width: 100%;
    text-align: right;
}

.paper-name {
    font-weight: 600;
}

.nothing-written {
    margin: 0;
    color: var(--graphite);
}

/* Below the folders, because it is about the project rather than about whichever folder is open. */
.attention-panel {
    margin-top: 1.5rem;
    padding-top: 1rem;
    border-top: 1px solid var(--rule);
}

/* Split view: stacked on narrow screens, side by side with a draggable divider otherwise. */

.split-view {
    display: grid;
    gap: 1.5rem;
    margin-top: 1.5rem;
}

.split-start,
.split-end {
    min-width: 0;
}

.split-handle {
    display: none;
}

@media (min-width: 52rem) {
    .split-view {
        grid-template-columns: var(--split-start, 320px) auto minmax(0, 1fr);
        gap: 0;
        align-items: start;
    }

    /* The divider sizes the second pane, and the first takes the rest: a document beside its notes,
       where it is the document that should grow with the screen. */
    .split-view.sized-end {
        grid-template-columns: minmax(0, 1fr) auto var(--split-end, 360px);
    }

    .split-handle {
        position: relative;
        display: block;
        align-self: stretch;
        width: 1.5rem;
        min-height: 3rem;
        cursor: col-resize;
        touch-action: none;
    }

    .split-handle::before {
        content: "";
        position: absolute;
        top: 0;
        bottom: 0;
        left: 50%;
        width: 1px;
        background: var(--rule);
        transform: translateX(-50%);
    }

    /* Quiet until it is being used: a divider is furniture, not content. Focus shows as a slim
       accent rather than a bar, so the keyboard is served without a green rule down the page. */
    .split-handle:hover::before,
    .split-dragging .split-handle::before {
        width: 2px;
        background: var(--graphite);
    }

    .split-handle:focus-visible::before {
        width: 2px;
        background: var(--verdigris);
    }

    .split-handle:focus-visible {
        outline: none;
    }

    /* No text selection while dragging across the panes. */
    .split-dragging {
        user-select: none;
        cursor: col-resize;
    }
}

.section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 0.5rem;
}

.section-head h2 {
    margin: 0;
}

/* Above the whole paper: what it is, then the two ways to take it away. */
.section-head.draft-export {
    justify-content: flex-end;
    flex-wrap: wrap;
}

.section-head.draft-export .hint {
    flex: 1;
    margin: 0;
}

.panel {
    padding: 1rem 1.25rem;
    background: var(--surface);
    border: 1px solid var(--rule);
    border-radius: 6px;
}

.panel .hint {
    margin: 0;
}

.facts {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.3rem 1rem;
    margin: 0.75rem 0;
}

.facts dt {
    font-size: 0.9rem;
    color: var(--graphite);
}

.facts dd {
    margin: 0;
}

/* Filing a page from the web, beside the way files come in. */

.link-form {
    display: grid;
    gap: 0.5rem;
    max-width: 34rem;
    margin: 0.75rem 0 0;
    padding: 0.75rem 1rem;
    background: var(--surface);
    border: 1px solid var(--rule);
    border-radius: 6px;
}

.link-form .hint {
    margin: 0;
}

/* Writing or pasting a document: room for an article, and where it came from set apart below it. */
.write-form {
    max-width: 48rem;
}

.write-form textarea {
    width: 100%;
    min-height: 16rem;
    font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
    font-size: 0.86rem;
    line-height: 1.5;
    resize: vertical;
}

.write-source {
    display: grid;
    gap: 0.5rem;
    margin: 0;
    padding: 0.6rem 0 0;
    border: 0;
    border-top: 1px dashed var(--rule);
}

.write-source legend {
    padding: 0;
    font-size: 0.9rem;
    font-weight: 600;
}

.write-source-row {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 0.75rem;
}

@media (max-width: 40rem) {
    .write-source-row {
        grid-template-columns: 1fr;
    }
}

.hint-inline {
    font-weight: normal;
    font-size: 0.82rem;
    opacity: 0.75;
}

/* Adding to a folder: its own frame under the folder's title, headed with where things will go. The
   link form drops its own box there, being inside one already. */
.add-heading {
    margin: 0 0 0.5rem;
    font-size: 1rem;
}

.add-section .link-form {
    margin: 0;
    padding: 0;
    border: 0;
}

.add-section .dropzone {
    margin-top: 0.5rem;
}

.imports-section .section-head {
    margin-top: 0;
}

/* "Tag" stays on one line beside its choice. */
.grid-tools .field-inline > span {
    white-space: nowrap;
}

/* The drawer: what belongs to a page without being the work on it, over the right of that page -
   a document's details beside its list, a paper's settings beside its text. */

.drawer-backdrop {
    position: fixed;
    inset: 0;
    z-index: 20;
    background: rgb(0 0 0 / 25%);
}

.drawer {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 21;
    width: min(32rem, 100vw);
    padding: 1.25rem 1.5rem 2rem;
    overflow-y: auto;
    background: var(--paper);
    border-left: 1px solid var(--rule);
    box-shadow: -2px 0 12px rgb(0 0 0 / 8%);
}

/* Nothing to focus inside it but the controls, so the panel itself takes focus to hear Escape. */
.drawer:focus {
    outline: none;
}

.drawer-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 0.75rem;
}

.drawer-head h2 {
    margin: 0;
    overflow-wrap: anywhere;
}

.drawer .tags {
    padding-top: 0.75rem;
    border-top: 1px solid var(--rule);
}

.drawer-work {
    padding-top: 0.75rem;
    border-top: 1px solid var(--rule);
}

/* What a document looks like, where that can be known. Contained rather than cropped: a figure is
   worth seeing whole, and a tall page should not push everything else out of the drawer. */
.preview-image {
    display: block;
    width: 100%;
    max-height: 18rem;
    margin-bottom: 0.75rem;
    object-fit: contain;
    background: var(--paper-deep);
    border: 1px solid var(--rule);
    border-radius: 6px;
}

.preview-text {
    margin: 0 0 0.75rem;
    padding: 0.6rem 0.8rem;
    font-size: 0.9rem;
    color: var(--graphite);
    background: var(--paper-deep);
    border: 1px solid var(--rule);
    border-radius: 6px;
    overflow-wrap: anywhere;
}

.fact-abstract,
.fact-notes {
    margin: 0.5rem 0 0;
    overflow-wrap: anywhere;
}

/* On a narrow screen it is the page, not a panel beside one. */
@media (max-width: 40rem) {
    .drawer {
        width: 100vw;
        border-left: 0;
    }
}

/* Choosing how a folder looks. */
.appearance {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 0.5rem 1rem;
    margin: 0.75rem 0 0;
    padding-top: 0.75rem;
    border-top: 1px solid var(--rule);
}

.appearance .field-inline {
    align-items: center;
    gap: 0.4rem;
    font-size: 0.85rem;
}

.appearance select {
    width: auto;
    min-width: 8rem;
}

/* Folder tree */

.folder-tree {
    margin: 0;
    padding: 0;
    list-style: none;
}

.folder-tree .folder-tree {
    margin-left: 1rem;
    padding-left: 0.6rem;
    border-left: 1px solid var(--rule);
}

/* A place in the project that is not a folder — the papers it is producing. It is chosen from the
   same column and reads like the rows beside it, and it shares their look by joining these rules
   rather than by wearing their class: a thing that answers to none of a folder's gestures should
   not answer to a folder's selector either. */
.folder,
.place {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.35rem 0.6rem;
    font: inherit;
    color: var(--ink);
    text-align: left;
    background: none;
    border: 0;
    border-radius: 4px;
    cursor: pointer;
}

.places {
    margin-bottom: 0.75rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--rule);
}

/* The same square the folders wear, in the ink the writing is done in. */
.place-mark {
    flex: none;
    width: 0.85rem;
    height: 0.85rem;
    background: var(--verdigris);
    border-radius: 3px;
}

.place-name {
    flex: 1;
    font-weight: 600;
}

.paper-list {
    display: grid;
    gap: 0.75rem;
    margin: 1rem 0 0;
    padding: 0;
    list-style: none;
}

.paper-list .paper-name {
    display: block;
    color: var(--verdigris);
    text-decoration: none;
}

.paper-list .paper-name:hover {
    text-decoration: underline;
}

.paper-summary {
    margin: 0.2rem 0 0;
    color: var(--graphite);
}

/* What has lately gone into the project, shown where no folder is chosen. Laid out like the paper
   list beside it, but tighter: these are lines to scan, not entries to read. */
.recent-documents {
    display: grid;
    gap: 0.4rem;
    margin: 0.75rem 0 0;
    padding: 0;
    list-style: none;
}

.recent-documents li {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.5rem;
}

.recent-documents .document-title {
    color: var(--verdigris);
    text-decoration: none;
}

.recent-documents .document-title:hover {
    text-decoration: underline;
}

/* Under the list it pages, reading as one line: how many a page holds, a step back, which page, a
   step forward, and which rows these are. */
.pager {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 1.25rem;
    margin-top: 0.75rem;
}

.pager-steps {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
}

.pager-size select {
    width: auto;
}

/* The right-hand edge of a heading that can be dragged. Quiet until pointed at or focused, like the
   divider between panes: furniture, not content. */
.document-grid thead th {
    position: relative;
}

.column-handle {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 0.6rem;
    cursor: col-resize;
    touch-action: none;
}

.column-handle::after {
    content: "";
    position: absolute;
    top: 20%;
    bottom: 20%;
    right: 0.15rem;
    width: 2px;
    background: var(--rule);
}

.column-handle:hover::after,
.columns-resizing .column-handle::after {
    background: var(--graphite);
}

.column-handle:focus-visible {
    outline: none;
}

.column-handle:focus-visible::after {
    top: 0;
    bottom: 0;
    background: var(--verdigris);
}

/* Text is not selected by a drag that strays over it. */
.columns-resizing {
    cursor: col-resize;
    user-select: none;
}

/* A folder's mark: its colour, and a shape suggesting what it holds. Drawn with borders and a
   pseudo-element rather than an image, so it needs no network and no icon font. */
.folder-mark {
    --folder-colour: var(--graphite);

    position: relative;
    flex: none;
    width: 0.9rem;
    height: 0.7rem;
    border: 1.5px solid var(--folder-colour);
    border-radius: 1px 3px 2px 2px;
}

.folder-mark.colour-green { --folder-colour: var(--hue-green); }
.folder-mark.colour-blue { --folder-colour: var(--hue-blue); }
.folder-mark.colour-teal { --folder-colour: var(--hue-teal); }
.folder-mark.colour-amber { --folder-colour: var(--hue-amber); }
.folder-mark.colour-plum { --folder-colour: var(--hue-plum); }
.folder-mark.colour-rust { --folder-colour: var(--hue-rust); }
.folder-mark.colour-slate { --folder-colour: var(--hue-slate); }

/* The shape inside the folder, one per icon. */
.folder-mark::after {
    content: "";
    position: absolute;
    inset: 0;
    margin: auto;
    background: var(--folder-colour);
}

.folder-mark.icon-folder::after {
    display: none;
}

.folder-mark.icon-book::after {
    width: 0.42rem;
    height: 0.3rem;
    border-radius: 0 1px 1px 0;
    box-shadow: -0.06rem 0 0 var(--paper);
}

.folder-mark.icon-notes::after {
    width: 0.42rem;
    height: 0.06rem;
    box-shadow: 0 0.12rem 0 var(--folder-colour), 0 -0.12rem 0 var(--folder-colour);
}

.folder-mark.icon-data::after {
    width: 0.4rem;
    height: 0.26rem;
    border-radius: 50%;
    box-shadow: 0 0.1rem 0 -0.02rem var(--folder-colour);
}

.folder-mark.icon-analysis::after {
    width: 0.1rem;
    height: 0.32rem;
    box-shadow: 0.16rem 0.06rem 0 -0.02rem var(--folder-colour), -0.16rem -0.04rem 0 -0.04rem var(--folder-colour);
}

.folder-mark.icon-ethics::after {
    width: 0.3rem;
    height: 0.3rem;
    clip-path: polygon(50% 0, 100% 30%, 50% 100%, 0 30%);
}

.folder-mark.icon-people::after {
    width: 0.22rem;
    height: 0.22rem;
    border-radius: 50%;
    box-shadow: 0.16rem 0.02rem 0 -0.03rem var(--folder-colour);
}

.folder-mark.icon-paper::after {
    width: 0.28rem;
    height: 0.36rem;
    clip-path: polygon(0 0, 70% 0, 100% 30%, 100% 100%, 0 100%);
}

.folder-mark.icon-milestone::after {
    width: 0.3rem;
    height: 0.3rem;
    clip-path: polygon(50% 0, 61% 35%, 100% 35%, 68% 57%, 79% 100%, 50% 73%, 21% 100%, 32% 57%, 0 35%, 39% 35%);
}

.folder-mark.icon-experiment::after {
    width: 0.26rem;
    height: 0.32rem;
    clip-path: polygon(35% 0, 65% 0, 65% 40%, 100% 100%, 0 100%, 35% 40%);
}

.folder:hover,
.place:hover {
    background: var(--paper-deep);
}

/* The tree draws its own mark now; the old grey one would sit beside every coloured folder. */
.folder::before {
    content: none;
}

.folder.selected,
.place.selected {
    font-weight: 600;
    background: var(--paper-deep);
    box-shadow: inset 3px 0 0 var(--verdigris);
}

.folder-name {
    overflow-wrap: anywhere;
}

/* Reader */

/* As wide as its pane: the divider beside it is what decides how much of the page the document has,
   and a cap here left a band of nothing between the text and the notes. */
.reader {
    margin-top: 1.5rem;
}

/* The size the document is read at, chosen above it while it is open (TextSize). Zoomed rather than given a
   font size: the workbench sets its type in rem, which a font size on the document would not reach, and a
   zoom takes the copy's headings, figures and tables along with its prose. */
.reader .working-copy .rendered,
.reader .reader-page {
    zoom: var(--reading-scale, 1);
}

/* How far through the document the reader is, held at the top of the screen as they read. The fill is the
   script's (reader.js, watchProgress); the line across it is how far they had read before. */
.reading-progress {
    position: sticky;
    top: 0;
    z-index: 2;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem 0.8rem;
    padding: 0.45rem 0;
    margin-bottom: 0.5rem;
    background: var(--paper);
}

.reading-progress-track {
    position: relative;
    flex: 1 1 12rem;
    height: 0.4rem;
    overflow: hidden;
    background: var(--paper-deep);
    border-radius: 999px;
}

.reading-progress-fill {
    display: block;
    width: 0;
    height: 100%;
    background: var(--verdigris);
    border-radius: inherit;
    transition: width 120ms linear;
}

.reading-progress-furthest {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 2px;
    margin-left: -1px;
    background: var(--ink);
}

.reading-progress-words {
    font-variant-numeric: tabular-nums;
    min-width: 7.5rem;
}

@media (prefers-reduced-motion: reduce) {
    .reading-progress-fill {
        transition: none;
    }
}

/* How far a document has been read, on its row in a list. */
.reading-mark {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    margin-left: 0.4rem;
    font-size: 0.8rem;
    color: var(--graphite);
    vertical-align: middle;
}

.reading-mark-track {
    display: inline-block;
    width: 3rem;
    height: 0.3rem;
    overflow: hidden;
    background: var(--paper-deep);
    border-radius: 999px;
}

.reading-mark-fill {
    display: block;
    height: 100%;
    background: var(--verdigris);
}

.badge.read-to-end {
    margin-left: 0.4rem;
    color: var(--verdigris);
}

.text-size {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.25rem;
    margin-bottom: 0.5rem;
}

.text-size-label {
    margin-right: 0.25rem;
    color: var(--graphite);
    font-size: 0.85rem;
}

.text-size-value {
    min-width: 4.5em;
    font-variant-numeric: tabular-nums;
}

.reader-page + .reader-page {
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--rule);
}

.reader-page-number {
    margin: 0 0 0.35rem;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: var(--graphite);
    text-transform: uppercase;
}

/* The extracted text keeps the line breaks it was written with. */
.reader-text {
    max-width: none;
    margin: 0;
    color: var(--ink);
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

/* A marked passage, in the colour it was marked in — the same colours the swatches offer. The
   browser's own mark styling is replaced rather than added to, so the ink stays readable. */
.reader-text mark {
    padding: 0;
    color: inherit;
    background: none;
    border-radius: 2px;
}

.reader-text mark.yellow { background: var(--mark-yellow); }
.reader-text mark.green { background: var(--mark-green); }
.reader-text mark.pink { background: var(--mark-pink); }
.reader-text mark.blue { background: var(--mark-blue); }

/* A paper's reference list, an entry at a time: the entry as it reads, then how often it is cited. */
.reference-list ol {
    margin: 0;
    padding: 0;
    list-style: none;
}

.reference-entry {
    padding: 0.6rem 0;
    border-bottom: 1px solid var(--rule);
}

.reference-entry .rendered {
    max-width: none;
}

.reference-entry .rendered p,
.reference-meta {
    max-width: none;
    margin: 0;
}

.reference-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem 0.75rem;
    margin-top: 0.25rem;
    font-size: 0.85rem;
}

/* The addresses a paper links to. The address is the long column, and breaks rather than overflows. */
.link-list .column-words {
    width: 30%;
}

.link-list .column-times {
    width: 5rem;
    text-align: right;
}

.link-list .column-filed {
    width: 11rem;
    overflow-wrap: normal;
}

.link-list td {
    overflow-wrap: anywhere;
}

/* As a column the heading says what the number is; a link laid out as a block says it in words. */
.link-list .times-said {
    display: none;
}

/* Too narrow for four columns - a phone - each link is a block of its own: the address across the whole width,
   the words it was drawn on above it, how often and whether it is filed under it. As four columns, the others
   took all the room and the address was written a letter to a line. By the room the table has, as the
   document grid's columns are. */
@container (max-width: 36rem) {
    .link-list thead {
        display: none;
    }

    .link-list table,
    .link-list tbody {
        display: block;
    }

    .link-list tr.web-link {
        display: grid;
        grid-template-columns: 1fr auto;
        align-items: center;
        gap: 0.25rem 0.75rem;
        padding: 0.6rem 0;
        border-bottom: 1px solid var(--rule);
    }

    .link-list tr.web-link td {
        display: block;
        width: auto;
        padding: 0;
        border-bottom: none;
    }

    .link-list .column-words,
    .link-list .column-address {
        grid-column: 1 / -1;
    }

    .link-list .column-words:empty {
        display: none;
    }

    .link-list .column-times {
        text-align: left;
        color: var(--graphite);
    }

    .link-list .times-count {
        display: none;
    }

    .link-list .times-said {
        display: inline;
    }
}

.badge.link-filed {
    color: var(--verdigris);
}

/* A reference highlighted from the list: the colours offered small, and the colour chosen shown. */
.reference-highlight {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

.reference-highlight-label {
    color: var(--graphite);
}

.reference-highlight .swatch {
    width: 1.1rem;
    height: 1.1rem;
}

.badge.reference-highlighted {
    color: var(--ink);
    border-color: rgb(15 23 42 / 15%);
}

.badge.reference-highlighted.yellow { background: var(--mark-yellow); }
.badge.reference-highlighted.green { background: var(--mark-green); }
.badge.reference-highlighted.pink { background: var(--mark-pink); }
.badge.reference-highlighted.blue { background: var(--mark-blue); }

/* The copy's contents above its notes. The pane holding both stays in view while the copy scrolls
   past, so the contents can be chosen from and the notes read at any point in a long paper; the
   contents scroll within their own share of it, so a long outline never pushes the notes out of
   sight. Only where the panes stand side by side: stacked, the notes are simply below the copy. */
@media (min-width: 52rem) {
    .split-view.sized-end > .split-end:has(> .reader-contents) {
        position: sticky;
        top: 1rem;
        max-height: calc(100vh - 2rem);
        overflow-y: auto;
    }

    .reader-contents ul {
        max-height: 45vh;
        overflow-y: auto;
    }
}

.reader-contents {
    margin-top: 1.5rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--rule);
    font-size: 0.9rem;
}

.reader-contents + .notes {
    margin-top: 1rem;
}

.reader-contents-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

.reader-contents h2 {
    margin: 0;
    font-size: 1rem;
}

.reader-contents ul {
    margin: 0.5rem 0 0;
    padding: 0;
    list-style: none;
}

.reader-contents .contents-entry a {
    display: block;
    padding: 0.2rem 0.4rem;
    color: var(--graphite);
    text-decoration: none;
    border-left: 3px solid transparent;
}

/* Each level a step further in, so what is inside what reads at a glance. */
.reader-contents .contents-entry.level-1 a {
    color: var(--ink);
    font-weight: 600;
}

.reader-contents .contents-entry.level-2 { padding-left: 0; }
.reader-contents .contents-entry.level-3 { padding-left: 1.25rem; }
.reader-contents .contents-entry.level-4 { padding-left: 2.5rem; }
.reader-contents .contents-entry.level-5 { padding-left: 3.75rem; }
.reader-contents .contents-entry.level-6 { padding-left: 5rem; }

.reader-contents .contents-entry.level-2 a {
    color: var(--ink);
}

.reader-contents .contents-entry a:hover {
    color: var(--ink);
    text-decoration: underline;
}

.reader-contents .contents-entry a.current {
    color: var(--verdigris);
    font-weight: 600;
    border-left-color: var(--verdigris);
    background: var(--paper-deep);
}

/* Where a citation led: the passage it names shows for a moment, so the eye finds it after the jump. */
.rendered .arrived {
    background: var(--arrived);
    transition: background 0.4s ease-out;
}

/* The way back to the sentence that cited it. Fixed, because the jump may have been forty pages. */
.way-back {
    position: fixed;
    right: 1.5rem;
    bottom: calc(1.5rem + env(safe-area-inset-bottom, 0px));
    z-index: 20;
    box-shadow: 0 2px 8px rgb(0 0 0 / 0.15);
}

/* A passage a search led to, painted over the copy where it stands. */
::highlight(passage) { background-color: var(--arrived); }

/* The same marks painted over the working copy. The script registers the ranges rather than wrapping
   them in elements, so these are highlight rules and not element rules. */
::highlight(mark-yellow) { background-color: var(--mark-yellow); }
::highlight(mark-green) { background-color: var(--mark-green); }
::highlight(mark-pink) { background-color: var(--mark-pink); }
::highlight(mark-blue) { background-color: var(--mark-blue); }

/* Which view of a document is showing. One row of choices under the title, drawn as the masthead's
   navigation is: the chosen one stands in the colour of the workbench, and the row sits on a rule so
   it reads as switching what is below it rather than as three more actions. */

/* Two halves of one section, each with its own address: work in the background, and the evidence.
   Drawn as the document's own views are, so a tab is a tab wherever it appears. */
.tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    margin: 0 0 1.25rem;
    border-bottom: 1px solid var(--rule);
}

.tab {
    padding: 0.45rem 0.85rem;
    margin-bottom: -1px;
    font-size: 0.95rem;
    color: var(--graphite);
    text-decoration: none;
    border: 1px solid transparent;
    border-bottom: 1px solid var(--rule);
    border-radius: 4px 4px 0 0;
}

.tab:hover {
    background: var(--paper-deep);
}

.tab.chosen {
    color: var(--ink);
    font-weight: 600;
    background: var(--paper);
    border-color: var(--rule);
    border-bottom-color: var(--paper);
}

.document-views {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    margin: 1rem 0 1.25rem;
    border-bottom: 1px solid var(--rule);
}

.document-view {
    padding: 0.45rem 0.85rem;
    margin-bottom: -1px;
    font: inherit;
    font-size: 0.95rem;
    color: var(--graphite);
    background: none;
    border: 0;
    border-bottom: 2px solid transparent;
    cursor: pointer;
}

.document-view:hover {
    color: var(--ink);
}

.document-view[aria-pressed="true"] {
    font-weight: 600;
    color: var(--verdigris);
    border-bottom-color: var(--verdigris);
}

.document-view:focus-visible {
    outline: 2px solid var(--verdigris);
    outline-offset: 2px;
}

/* The stored original, shown in the page rather than in a window of its own. */

.original {
    margin: 0 0 1.25rem;
}

.original-frame {
    display: block;
    width: 100%;
    height: 70vh;
    background: #fff;
    border: 1px solid var(--rule);
    border-radius: 6px;
}

/* Only Safari on an iPhone or iPad knows -webkit-touch-callout, and only it draws a PDF in a frame as its first
   page alone, with no way on to the second: there the frame gives way to a way of opening the whole file. */
.original-elsewhere {
    display: none;
}

@supports (-webkit-touch-callout: none) {
    .original-frame {
        display: none;
    }

    .original-elsewhere {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 0.75rem;
        padding: 1rem;
        border: 1px solid var(--rule);
        border-radius: 6px;
    }
}

.original-image {
    display: block;
    max-width: 100%;
    margin: 0 auto;
    border: 1px solid var(--rule);
    border-radius: 6px;
}

/* Notes on a document */

/* Comes to the selection: a passage chosen on page 14 is marked where it was read, without scrolling
   back to anything. The script places it and shows it; it stays in the document either way so it can
   be reached by keyboard. */
.reader-tools {
    position: fixed;
    top: var(--selection-top, 50%);
    left: var(--selection-left, 50%);
    z-index: 5;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.35rem;
    background: var(--paper);
    border: 1px solid var(--rule);
    border-radius: 8px;
    box-shadow: 0 6px 20px rgb(15 23 42 / 18%);
    transform: translate(-50%, -100%);
    visibility: hidden;
    opacity: 0;
    transition: opacity 120ms ease;
}

/* Below the selection where there is no room above it. */
body.selection-below .reader-tools {
    transform: translate(-50%, 0);
}

/* Shown when there is something to act on — or when a keyboard has tabbed into it, which the script
   cannot know about. */
body.has-selection .reader-tools,
.reader-tools:focus-within {
    visibility: visible;
    opacity: 1;
}

/* One button per colour: choosing a colour is the act of highlighting, so there is nothing to press
   first. What a colour means is the reader's own business. */
.swatch {
    width: 1.6rem;
    height: 1.6rem;
    padding: 0;
    cursor: pointer;
    border: 1px solid rgb(15 23 42 / 25%);
    border-radius: 50%;
}

.swatch:hover,
.swatch:focus-visible {
    outline: 2px solid var(--ink);
    outline-offset: 1px;
}

/* Big enough to hit with a finger. */
@media (pointer: coarse) {
    .reader-tools .swatch {
        width: 2.25rem;
        height: 2.25rem;
    }
}

.swatch.yellow { background: var(--mark-yellow); }
.swatch.green { background: var(--mark-green); }
.swatch.pink { background: var(--mark-pink); }
.swatch.blue { background: var(--mark-blue); }

.comment-form {
    padding: 0.9rem 1rem;
    margin-bottom: 1.25rem;
    background: var(--surface);
    border: 1px solid var(--rule);
    border-radius: 6px;
}

.quoted {
    margin: 0 0 0.5rem;
    color: var(--graphite);
    font-style: italic;
    overflow-wrap: anywhere;
}

/* A word looked up: docked at the side of the window rather than over the word, so the sentence it is
   about stays in sight. On a phone, a sheet along the bottom. */
.word-lookup {
    position: fixed;
    right: 1rem;
    bottom: 1rem;
    z-index: 6;
    width: min(26rem, calc(100vw - 2rem));
    max-height: min(70vh, 40rem);
    overflow-y: auto;
    padding: 0.9rem 1rem;
    background: var(--paper);
    border: 1px solid var(--rule);
    border-radius: 8px;
    box-shadow: 0 10px 30px rgb(15 23 42 / 22%);
}

.word-lookup-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.5rem;
}

.word-lookup-head h2 {
    margin: 0 0 0.5rem;
    font-size: 1.25rem;
    overflow-wrap: anywhere;
}

.word-senses {
    display: grid;
    gap: 0.6rem;
    margin: 0 0 0.75rem;
    padding-left: 1.25rem;
}

.word-senses li > span {
    display: block;
}

.word-senses .word-pos,
.word-senses .word-lemma {
    display: inline;
    margin-right: 0.4rem;
    color: var(--graphite);
    font-size: 0.85em;
    font-style: italic;
}

.word-example,
.word-synonyms {
    color: var(--graphite);
    font-size: 0.9em;
}

.word-explain {
    display: grid;
    gap: 0.6rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--rule);
}

.word-explain p {
    margin: 0;
}

.word-language select {
    max-width: 14rem;
}

/* Keeping is what puts a word on the Vocabulary page, so it reads as a button, not as a note. */
.keep-sense {
    justify-self: start;
    margin-top: 0.35rem;
    padding: 0.25rem 0.65rem;
    font-size: 0.88em;
    font-weight: 600;
    color: var(--verdigris-deep);
    background: color-mix(in srgb, var(--verdigris) 10%, transparent);
    border-color: color-mix(in srgb, var(--verdigris) 55%, transparent);
}

.keep-sense:hover:not(:disabled) {
    color: var(--on-accent);
    background: var(--verdigris);
    border-color: var(--verdigris);
}

.keep-sense.kept {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    width: fit-content;
    border: 1px solid transparent;
    border-radius: 6px;
    background: transparent;
}

.keep-explained {
    justify-self: start;
}

/* The Vocabulary page: the words kept, each with its meaning, its sentence and the way back to it. */
.vocabulary-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem 1rem;
    align-items: end;
    margin-bottom: 0.5rem;
}

.vocabulary-filters .field {
    flex: 1 1 14rem;
    max-width: 24rem;
}

.vocabulary {
    display: grid;
    gap: 0.9rem;
    margin: 0.75rem 0 0;
    padding: 0;
    list-style: none;
}

.vocabulary-word {
    padding: 0.9rem 1rem;
    background: var(--surface);
    border: 1px solid var(--rule);
    border-left: 4px solid var(--hue-plum);
    border-radius: 6px;
}

.vocabulary-word-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.5rem;
}

.vocabulary-word-head h2 {
    margin: 0;
    font-size: 1.2rem;
    overflow-wrap: anywhere;
}

.vocabulary-word .word-lemma,
.vocabulary-word .word-pos {
    color: var(--graphite);
    font-size: 0.85em;
    font-style: italic;
}

.vocabulary-word p {
    margin: 0.4rem 0 0;
}

.word-context {
    margin: 0.6rem 0 0;
    padding-left: 0.75rem;
    color: var(--graphite);
    font-style: italic;
    border-left: 2px solid var(--rule);
    overflow-wrap: anywhere;
}

.vocabulary-word-foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-top: 0.6rem;
}

.vocabulary-edit {
    display: grid;
    gap: 0.5rem;
    margin-top: 0.5rem;
}

@media (max-width: 40rem) {
    .word-lookup {
        right: 0;
        bottom: 0;
        left: 0;
        width: auto;
        max-height: 60vh;
        padding: 0.9rem 16px calc(0.9rem + env(safe-area-inset-bottom));
        border-radius: 12px 12px 0 0;
    }
}

.annotations {
    display: grid;
    gap: 0.5rem;
    margin: 0.5rem 0 0;
    padding: 0;
    list-style: none;
}

.annotation {
    padding: 0.7rem 0.9rem;
    background: var(--surface);
    border: 1px solid var(--rule);
    border-radius: 6px;
}

/* The colour a mark was made in, as a stripe down the edge of the note. */
.annotation.yellow { border-left: 4px solid var(--mark-yellow); }
.annotation.green { border-left: 4px solid var(--mark-green); }
.annotation.pink { border-left: 4px solid var(--mark-pink); }
.annotation.blue { border-left: 4px solid var(--mark-blue); }

/* A mark whose words have gone from the document: said plainly, never quietly repositioned onto
   whatever now sits at the old offsets. */
.annotation.adrift {
    border-color: var(--iron);
}

/* A mark that was found again somewhere else: worth knowing, but not a problem to solve. */
.badge.moved {
    color: var(--graphite);
    background: var(--paper);
    border: 1px solid var(--rule);
}

.annotation-comment {
    margin: 0 0 0.4rem;
    color: var(--ink);
    overflow-wrap: anywhere;
}

.annotation-where {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
    font-size: 0.85rem;
    color: var(--graphite);
}

.annotation .actions {
    margin-top: 0.5rem;
}

/* Writing a paper: the sections down one side, the one being written on the other. */

.section-list {
    display: grid;
    gap: 0.3rem;
    margin: 0.5rem 0 0;
    padding: 0;
    list-style: none;
}

.section {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.35rem 0.5rem;
    border: 1px solid transparent;
    border-radius: 4px;
}

.section.selected {
    background: var(--surface);
    border-color: var(--rule);
}

/* How deep a section sits, as the indentation of the list. A subsection reads as belonging to the
   chapter above it without anything drawing a line between them. */
.section.level-2 { margin-left: 1rem; }
.section.level-3 { margin-left: 2rem; }
.section.level-4 { margin-left: 3rem; }
.section.level-5 { margin-left: 4rem; }
.section.level-6 { margin-left: 5rem; }

/* A deeper section is quieter: the chapters stay the thing the eye finds first. */
.section:not(.level-1) .section-title {
    font-size: 0.95rem;
    color: var(--graphite);
}

.select-section {
    display: flex;
    flex: 1;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.5rem;
    padding: 0;
    color: var(--ink);
    text-align: left;
    background: none;
    border: 0;
    cursor: pointer;
}

.section-title {
    overflow-wrap: anywhere;
}

/* A section the author has said is finished. It clears itself when the text changes. */
.badge.ready {
    color: var(--ready-ink);
    background: var(--ready-wash);
    border: 1px solid var(--ready-rule);
}

.section-order {
    display: flex;
    flex: none;
    gap: 0.2rem;
}

.section-order .button {
    padding: 0.1rem 0.4rem;
    line-height: 1.2;
}

.section-form {
    padding: 0.6rem 0;
}

.writing .section-head {
    margin-bottom: 0.5rem;
}

/* Both columns run to the foot of the window. Without this the list of sections stops under the last
   chapter in it, leaving the divider hanging halfway up a page the editor fills. Only side by side,
   at the split view's width: stacked on a phone, a list a screen tall put a screen of nothing between
   the sections and the one being written. */
@media (min-width: 52rem) {
    .sections,
    .writing {
        min-height: calc(100vh - 15rem);
    }
}

/* The sections take what the list does not, so the divider is draggable for its whole length. */
.section-list {
    align-content: start;
}

/* What to do with the chapter, kept in sight.

   The editor is told how tall to be in a number of rem, and that number can only ever be close:
   the component adds a toolbar, a footer and a status line of its own beneath the text. Rather
   than tune the arithmetic until it happens to fit one window, the buttons hold to the foot of the
   screen — so Save is where the author left it whatever the arithmetic does. */
.writing > .actions {
    position: sticky;
    bottom: 0;
    z-index: 1;
    padding: 0.6rem 0;
    background: linear-gradient(to bottom, transparent, var(--paper) 35%);
}

/* Sealed versions: what the paper said at a moment, kept so a comment has something that stays put. */

.versions-panel {
    max-width: 46rem;
    margin-top: 1rem;
}

.versions {
    display: grid;
    gap: 0.5rem;
    margin: 1rem 0 0;
    padding: 0;
    list-style: none;
}

.version {
    padding: 0.7rem 0.9rem;
    background: var(--surface);
    border: 1px solid var(--rule);
    border-radius: 6px;
}

/* Sharing a version for review, and what came back (§7.7). */
.import-review {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
    margin: 1rem 0;
}

.share-review {
    margin: 0.5rem 0 0.25rem;
    padding: 0.75rem 1rem;
    border: 1px solid var(--rule);
    border-radius: 6px;
    background: var(--surface);
}

.share-review .notice ul {
    margin: 0.25rem 0 0;
    padding-left: 1.25rem;
}

.share-review label.check {
    display: flex;
    gap: 0.5rem;
    align-items: baseline;
    margin: 0.5rem 0;
}

.version-reviews,
.version-package {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem 0.5rem;
    margin: 0.25rem 0 0;
}

.badge.open {
    color: var(--hue-amber);
}

.badge.carried {
    color: var(--hue-blue);
}

.review-comments {
    margin: 0.75rem 0 1rem;
    padding: 0.75rem 1rem;
    border: 1px solid var(--rule);
    border-radius: 6px;
    background: var(--surface);
}

.review-comments h3 {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
    font-size: 1.05rem;
}

.review-comments ul {
    display: grid;
    gap: 0.6rem;
    margin: 0.75rem 0 0;
    padding: 0;
    list-style: none;
}

.review-comment {
    padding: 0.5rem 0.75rem;
    border-left: 3px solid var(--hue-amber);
}

.review-comment.addressed {
    border-left-color: var(--rule);
    opacity: 0.75;
}

.review-comment-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.25rem 0.6rem;
    margin: 0;
}

.review-comment blockquote {
    margin: 0.35rem 0;
    padding-left: 0.75rem;
    color: var(--graphite);
    font-style: italic;
    border-left: 2px solid var(--rule);
}

.review-comment-text {
    margin: 0;
    white-space: pre-wrap;
}

mark.review-mark {
    color: inherit;
    background: color-mix(in srgb, var(--hue-amber) 22%, transparent);
    cursor: help;
}

mark.review-mark.chosen {
    background: color-mix(in srgb, var(--hue-amber) 45%, transparent);
    outline: 2px solid var(--hue-amber);
}

/* The person's account, in a product that has accounts: who is signed in, beside the light/dark switch. */
.account-link {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    margin-right: 0.75rem;
    font-size: 0.9rem;
    color: var(--graphite);
    text-decoration: none;
}

.account-link:hover .account-name,
.account-link:focus-visible .account-name {
    text-decoration: underline;
}

/* The beta and the way to give feedback: quiet, beside the account, never pushing the sections aside. */
.beta-link {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin-right: 0.75rem;
    font-size: 0.85rem;
    color: var(--graphite);
    text-decoration: none;
}

.beta-link:hover .beta-feedback-text,
.beta-link:focus-visible .beta-feedback-text {
    text-decoration: underline;
}

.beta-mark {
    padding: 0.05rem 0.5rem;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--paper);
    background: var(--hue-amber);
    border-radius: 999px;
}

/* A profile for developing and testing, beside the name: never mistaken for the person's own workbench. */
.profile-mark {
    align-self: center;
    margin-left: 0.5rem;
    padding: 0.05rem 0.5rem;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--paper);
    background: var(--hue-plum);
    border-radius: 999px;
}

/* In a narrow window the mark alone; the link's title says the rest. */
@media (max-width: 60rem) {
    .beta-feedback-text {
        display: none;
    }
}

.account-avatar {
    display: inline-grid;
    place-items: center;
    flex: none;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 50%;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--paper);
    background: var(--hue-teal);
}

.account-name {
    max-width: 14rem;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

/* In a narrow window the initials alone: the name is in the link's title, and read out to a screen reader. */
@media (max-width: 60rem) {
    .account-name {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
    }
}

/* The name a document goes by, given by the reader where the file's own name was a placeholder. */
.document-name {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.25rem 0.75rem;
    margin: 0 0 0.75rem;
}

.document-name .name-shown {
    margin: 0;
    overflow-wrap: anywhere;
}

.document-name .name-label {
    color: var(--graphite);
}

/* Renaming, as a pencil after the name: the folder actions' sign, without a button's box around it. */
.document-name .rename-pencil {
    margin-left: 0.35rem;
    padding: 0 0.3rem;
    border: 0;
    border-radius: 4px;
    background: none;
    color: var(--verdigris);
    font: inherit;
    line-height: 1;
    vertical-align: baseline;
    cursor: pointer;
}

/* Turned to point back at the name it renames: the sign as drawn points away from it. */
.document-name .rename-pencil > span {
    display: inline-block;
    transform: scaleX(-1);
}

.document-name .rename-pencil:hover {
    background: color-mix(in srgb, var(--verdigris) 12%, transparent);
}

.document-name .rename-pencil:focus-visible {
    outline: 2px solid var(--verdigris);
    outline-offset: 1px;
}

.document-name .name-form {
    flex: 1 1 100%;
}

.document-name input {
    width: 100%;
    box-sizing: border-box;
}

/* The reader's own note on a document (§12.2): their words, kept as they wrote them. */
.document-note {
    margin: 0.5rem 0 0;
}

.document-note .note-text {
    margin: 0 0 0.25rem;
    padding: 0.4rem 0.6rem;
    border-left: 3px solid var(--hue-amber);
    white-space: pre-wrap;
}

.document-note textarea {
    width: 100%;
    box-sizing: border-box;
}

/* A version's citations against its references (§22.5): what needs the author's hand said plainly, what
   is only worth knowing folded away. */
.citation-checks {
    margin: 0.75rem 0 1rem;
    padding: 0.75rem 1rem;
    border: 1px solid var(--rule);
    border-radius: 6px;
    background: var(--surface);
}

.citation-checks h3 {
    margin: 0;
    font-size: 1.05rem;
}

.citation-group {
    margin: 0.5rem 0 0;
    padding: 0.25rem 0.75rem;
    border-left: 4px solid var(--rule);
}

.citation-group.problem {
    border-left-color: var(--hue-amber);
}

.citation-group p,
.citation-group ul {
    margin: 0.25rem 0;
}

.citation-group summary {
    cursor: pointer;
}

/* Claims checked against their sources (§21.3): the verdict in the palette's own colours, the claim's
   sentence tinted to match in the text, and a quote the source does not hold shown as not evidence. */
.claim-checks {
    margin: 0.75rem 0 1rem;
    padding: 0.75rem 1rem;
    border: 1px solid var(--rule);
    border-radius: 6px;
    background: var(--surface);
}

.claim-checks h3 {
    margin: 0;
    font-size: 1.05rem;
}

.claim-findings {
    display: grid;
    gap: 0.75rem;
    margin: 0.75rem 0 0;
    padding: 0;
    list-style: none;
}

.claim-finding {
    padding: 0.5rem 0.75rem;
    border-left: 4px solid var(--rule);
}

.claim-finding.supported { border-left-color: var(--hue-green); }
.claim-finding.partly { border-left-color: var(--hue-amber); }
.claim-finding.unsupported { border-left-color: var(--iron); }
.claim-finding.cannot-tell { border-left-color: var(--hue-slate); }

.badge.supported { color: var(--hue-green); }
.badge.partly { color: var(--hue-amber); }
.badge.unsupported { color: var(--iron); }
.badge.cannot-tell,
.badge.unchecked { color: var(--hue-slate); }

.claim-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.25rem 0.6rem;
    margin: 0;
}

.claim-sentence {
    margin: 0.35rem 0;
    font-weight: 600;
}

.claim-finding blockquote {
    margin: 0.35rem 0;
    padding-left: 0.75rem;
    color: var(--graphite);
    font-style: italic;
    border-left: 2px solid var(--rule);
}

.claim-finding blockquote.unfound {
    text-decoration: line-through;
    text-decoration-color: var(--iron);
}

.claim-finding blockquote footer {
    font-size: 0.85rem;
    font-style: normal;
}

.claim-reason {
    margin: 0.25rem 0;
}

.claim-judgement .judged {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.25rem 0.6rem;
    margin: 0.25rem 0 0;
}

mark.claim-mark {
    color: inherit;
    background: none;
    text-decoration: underline 2px;
    text-underline-offset: 3px;
    text-decoration-color: var(--hue-slate);
}

mark.claim-mark.supported { text-decoration-color: var(--hue-green); }
mark.claim-mark.partly { text-decoration-color: var(--hue-amber); }
mark.claim-mark.unsupported { text-decoration-color: var(--iron); }

/* Which two versions to compare, in a sentence: "Compare Version 2 with the paper as it is now". */
.compare-form {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin: 1rem 0 0;
}

.compare-form select {
    width: auto;
}

/* Two versions compared: each section that changed, the words that went struck through and the words
   that came washed green, in the palette's own colours so both themes read. */
.comparison {
    display: grid;
    gap: 1rem;
}

.comparison-summary,
.comparison-style {
    margin: 0;
}

.comparison-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    color: var(--graphite);
    font-size: 0.9rem;
}

.compared-section {
    padding: 0.75rem 1rem;
    border: 1px solid var(--rule);
    border-left-width: 4px;
    border-radius: 4px;
    background: var(--surface);
}

.compared-section.added {
    border-left-color: var(--ready-ink);
}

.compared-section.removed {
    border-left-color: var(--iron);
}

.compared-section.changed {
    border-left-color: var(--verdigris);
}

.compared-section h3 {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin: 0 0 0.5rem;
    font-size: 1.05rem;
}

.compared-marks {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}

.badge.added {
    color: var(--ready-ink);
}

.badge.removed {
    color: var(--iron);
}

/* The text as written, line breaks and all: that is what changed. */
.diff {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    font-size: 0.95rem;
    line-height: 1.6;
}

.diff ins {
    color: var(--ready-ink);
    text-decoration: none;
    background: var(--ready-wash);
}

.diff del {
    color: var(--iron);
    background: color-mix(in srgb, var(--iron) 12%, transparent);
}

.compared-references ul {
    display: grid;
    gap: 0.35rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.compared-references h3 {
    margin: 0 0 0.5rem;
    font-size: 1.05rem;
}

.version-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 0.75rem;
    margin: 0;
}

.version-note {
    margin: 0.35rem 0 0;
    color: var(--graphite);
    overflow-wrap: anywhere;
}

/* The whole paper, read rather than written. */
.whole-document {
    padding: 1.25rem 1.5rem;
    background: var(--surface);
    border: 1px solid var(--rule);
    border-radius: 6px;
}

.contents {
    padding-bottom: 0.75rem;
    margin-bottom: 1.25rem;
    border-bottom: 1px solid var(--rule);
}

.contents ul {
    margin: 0.5rem 0 0;
    padding: 0;
    list-style: none;
}

.contents-entry.level-2 { padding-left: 1rem; }
.contents-entry.level-3 { padding-left: 2rem; }
.contents-entry.level-4 { padding-left: 3rem; }

.rendered {
    max-width: 46rem;
    overflow-wrap: anywhere;
}

/* A working copy is the document itself rather than a preview of one, so it takes the width of the
   page. The measure above suits a paper being previewed beside other things; here it left two thirds
   of the screen empty and shrank every figure to fit a column nothing else was using. */
.working-copy .rendered,
.working-copy .rendered :is(p, li, blockquote, dd) {
    max-width: none;
}

/* A paper read whole, a sealed version and the editor's own preview are the document itself, as a
   working copy is. The measure every paragraph of the workbench is given kept a paper's paragraphs to
   65 characters while its lists and headings ran the width of the page, and the softer grey of the
   workbench's own words made its paragraphs paler than its lists: the editor showed one page and the
   paper read as another. Here the paper takes the width its editor does, paragraphs as well as lists,
   in the paper's own ink. */
.whole-document .rendered,
.whole-document .rendered :is(p, li, blockquote, dd),
.editor-preview :is(p, li, blockquote, dd),
.editor-preview-side :is(p, li, blockquote, dd) {
    max-width: none;
    color: inherit;
}

/* A figure lifted out of a paper is whatever size it was typeset at, which is often wider than this
   column. Scaled down to fit rather than left to overflow, and never stretched past its own size. */
/* A paper's footnotes, set apart from its argument as the page set them: the mark a small raised number that
   leads to its note, and the notes together at the end in smaller, quieter type, each with its way back. Read
   into the running text, a reader could not tell a note from the paper's own words. */
.rendered .footnote-ref {
    text-decoration: none;
}

.rendered .footnote-ref sup {
    font-size: 0.7em;
    font-weight: 600;
    padding: 0 0.1em;
}

.rendered .footnotes {
    margin-top: 2.5rem;
    padding: 1rem 1.25rem 0.5rem;
    font-size: 0.875em;
    color: var(--graphite);
    background: var(--paper-deep);
    border-radius: 6px;
}

.rendered .footnotes::before {
    content: "Notes";
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 600;
    color: var(--ink);
}

.rendered .footnotes hr {
    display: none;
}

.rendered .footnotes ol {
    margin: 0;
    padding-left: 1.5rem;
}

.rendered .footnotes li {
    margin-bottom: 0.5rem;
}

.rendered .footnote-back-ref {
    margin-left: 0.25rem;
    text-decoration: none;
}

.rendered img {
    display: block;
    max-width: 100%;
    height: auto;
    margin: 0.75rem 0;
    background: var(--image-ground);
}

/* A figure's caption (Captions): smaller and quieter than the argument, held to the figure it describes, and
   ruled at the side so it reads as belonging to the picture rather than as the next paragraph. */
.rendered p.caption {
    margin: -0.25rem 0 1.25rem;
    padding-left: 0.75rem;
    border-left: 2px solid var(--rule);
    font-size: 0.9em;
    line-height: 1.45;
    color: var(--graphite);
}

/* A table's caption stands above it, so it is held to what follows instead. */
.rendered p.caption:has(+ table) {
    margin: 1rem 0 0.4rem;
}

/* A diagram written as text and drawn where it is read. It is a figure, so it is spaced like one and
   centred rather than left ragged against the prose. */
.diagram {
    margin: 1rem 0;
    padding: 0.5rem;
    border-radius: 4px;
    text-align: center;
    background: var(--diagram-ground);
}

.diagram svg {
    max-width: 100%;
    height: auto;
}

/* Before it is drawn, and if it never is: the source, shown as the text it is. Nothing here should
   look like a fault — a diagram that cannot be drawn is still a figure the reader can read. */
pre.mermaid {
    max-width: 100%;
    overflow-x: auto;
    padding: 0.7rem 0.9rem;
    border: 1px solid var(--rule);
    border-radius: 4px;
    background: var(--paper-deep);
    font-size: 0.85rem;
    line-height: 1.45;
    white-space: pre;
}

.diagram-error {
    margin: 0.3rem 0 1rem;
    color: var(--graphite);
    font-size: 0.85rem;
}

.rendered table {
    border-collapse: collapse;
}

.rendered th,
.rendered td {
    padding: 0.3rem 0.6rem;
    border: 1px solid var(--rule);
}

/* Papers: what the project is producing, as distinct from the sources it draws on. */

.papers {
    display: grid;
    gap: 0.75rem;
    margin: 1rem 0 0;
    padding: 0;
    list-style: none;
}

.paper {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.9rem 1.1rem;
    background: var(--surface);
    border: 1px solid var(--rule);
    border-radius: 6px;
}

.paper-main {
    flex: 1;
    min-width: 0;
}

/* What can be done with a paper, on the right of its row. */
.paper-actions {
    flex-wrap: wrap;
    justify-content: flex-end;
    margin: 0;
}

.paper-actions .fa {
    margin-right: 0.3rem;
}

.paper-actions .fa-file-word-o {
    color: var(--hue-blue);
}

.paper-actions .fa-file-pdf-o {
    color: var(--hue-rust);
}

/* On a narrow window the buttons go under the paper again rather than squeezing its title. */
@media (max-width: 640px) {
    .paper {
        flex-direction: column;
        align-items: stretch;
    }

    .paper-actions {
        justify-content: flex-start;
    }
}

.paper-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.5rem;
    margin: 0 0 0.35rem;
}

.paper-title {
    font-size: 1.05rem;
    font-weight: 600;
}

/* A paper written elsewhere: the workbench holds its versions, not its text. */
.badge.word {
    color: var(--graphite);
    background: var(--paper);
    border: 1px solid var(--rule);
}

.paper-progress {
    margin: 0 0 0.4rem;
    font-size: 0.9rem;
    color: var(--graphite);
}

.paper-summary {
    margin: 0 0 0.4rem;
    overflow-wrap: anywhere;
}

/* References: what a work is, apart from the file that holds it. */

.reference-form {
    padding: 1rem 1.25rem;
    margin-bottom: 1.25rem;
    background: var(--surface);
    border: 1px solid var(--rule);
    border-radius: 6px;
}

.field-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem 1rem;
}

.field-row .field {
    flex: 1 1 14rem;
}

.field-row .field.short {
    flex: 0 1 10rem;
}

/* One column the width of the page. Left to size itself, a grid's column is as wide as its widest
   entry can be made, and an entry's drop-down of document titles made it wider than the window. */
.references {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0.75rem;
    margin: 1rem 0 0;
    padding: 0;
    list-style: none;
}

.reference {
    padding: 0.9rem 1.1rem;
    background: var(--surface);
    border: 1px solid var(--rule);
    border-radius: 6px;
}

.reference-citation {
    margin: 0 0 0.35rem;
    color: var(--ink);
}

.reference-authors::after {
    content: " ";
}

.reference-year::before { content: "("; }
.reference-year::after { content: ") "; }

.reference-title {
    font-weight: 600;
}

.reference-container {
    font-style: italic;
    color: var(--graphite);
}

.reference-container::before {
    content: " · ";
    font-style: normal;
}

.reference-where {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin: 0 0 0.4rem;
    font-size: 0.85rem;
}

.reference-summary,
.reference-notes {
    margin: 0 0 0.4rem;
    overflow-wrap: anywhere;
}

.reference-notes {
    color: var(--graphite);
}

.reference-files {
    margin: 0.5rem 0;
    padding-top: 0.5rem;
    border-top: 1px solid var(--rule);
}

.attached {
    display: grid;
    gap: 0.3rem;
    margin: 0 0 0.5rem;
    padding: 0;
    list-style: none;
}

.attached-file {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}

.attach select {
    width: auto;
    min-width: 12rem;
}

/* A drop-down is as wide as its longest choice, and a list of document titles has long ones: it
   pushed the references page wider than the window. Beside its label it may shrink to the row, and
   shows the chosen title cut short instead. */
.field-inline select {
    min-width: 0;
    max-width: 100%;
}

/* Search */

/* The question across the page, the ways to narrow it on a row beneath. */
.search-form {
    display: grid;
    gap: 0.75rem;
    margin-bottom: 1.25rem;
}

.search-question {
    max-width: none;
    margin-bottom: 0;
}

.search-question textarea {
    min-height: 4.5rem;
    padding: 0.75rem 0.9rem;
    font-size: 1.1rem;
    line-height: 1.45;
    border-radius: 8px;
    box-shadow: 0 1px 2px rgb(0 0 0 / 0.06);
    resize: vertical;
}

.search-question textarea:focus {
    border-color: var(--verdigris);
    box-shadow: 0 0 0 3px rgb(38 89 75 / 0.15);
}

.search-filters {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 0 1rem;
}

.search-filters .field {
    margin-bottom: 0.5rem;
}

.search-filters .actions {
    margin: 0 0 0.5rem;
}

input[type="search"] {
    width: 100%;
    padding: 0.45rem 0.6rem;
    font: inherit;
    color: var(--ink);
    background: var(--field);
    border: 1px solid var(--rule);
    border-radius: 4px;
}

/* The search's list, and only it: an experiment's table of results shares the name, and a table
   made a grid loses its columns — its headings stopped lining up with the cells below them. */
ol.results {
    display: grid;
    gap: 0.6rem;
    margin: 0.5rem 0 0;
    padding: 0;
    list-style: none;
}

.result {
    padding: 0.75rem 1rem;
    background: var(--surface);
    border: 1px solid var(--rule);
    border-radius: 6px;
}

.result-title {
    font-weight: 600;
    color: var(--verdigris);
    text-decoration: none;
}

.result-title:hover {
    text-decoration: underline;
}

.result-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}

/* A paper's best passages under it, each where it stands in the paper and how it was found. */
.passages {
    display: grid;
    gap: 0.5rem;
    margin: 0.5rem 0 0;
    padding: 0;
    list-style: none;
}

.passage {
    padding-left: 0.75rem;
    border-left: 3px solid var(--rule);
}

.passage-section {
    margin: 0;
    font-size: 0.8rem;
    color: var(--graphite);
}

.badge.found-by {
    color: var(--graphite);
    background: var(--paper-deep);
}

.badge.found-by.both {
    color: var(--on-accent);
    background: var(--verdigris);
}

.open-passage {
    color: var(--verdigris);
}

.more-passages {
    margin-top: 0.4rem;
}

.result-snippet {
    margin: 0.3rem 0;
    color: var(--ink);
}

.result-snippet mark {
    padding: 0 0.1em;
    color: inherit;
    background: var(--found);
    border-radius: 2px;
}

.result-where {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
    font-size: 0.85rem;
    color: var(--graphite);
}

/* History: what the user has done, a day at a time. */

.history-day + .history-day {
    margin-top: 1.5rem;
}

.history-date {
    margin: 0 0 0.4rem;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: var(--graphite);
    text-transform: uppercase;
}

.history {
    display: grid;
    gap: 0.35rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.history-entry {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.25rem 0.75rem;
    padding: 0.5rem 0.8rem;
    background: var(--surface);
    border: 1px solid var(--rule);
    border-radius: 4px;
}

.history-entry.failed {
    border-color: var(--iron);
}

/* Still a failure, but one nobody is asked about any more. */
.history-entry.dismissed .history-outcome,
.history-entry.dismissed .history-error {
    color: var(--graphite);
}

.history-time {
    flex: none;
    font-size: 0.85rem;
    font-variant-numeric: tabular-nums;
    color: var(--graphite);
}

.history-file {
    flex: 1;
    min-width: 12rem;
    font-weight: 600;
    color: var(--ink);
    overflow-wrap: anywhere;
}

a.history-file {
    color: var(--verdigris);
    text-decoration: none;
}

a.history-file:hover {
    text-decoration: underline;
}

.history-outcome,
.history-project {
    font-size: 0.85rem;
    color: var(--graphite);
}

.history-entry.failed .history-outcome {
    color: var(--iron);
}

.history-error {
    flex-basis: 100%;
    margin: 0;
    font-size: 0.85rem;
    color: var(--iron);
}

.history-tools {
    margin-bottom: 1.25rem;
}

.history-clear-choices {
    display: grid;
    gap: 0.35rem;
    margin: 0 0 0.75rem;
    padding: 0;
    border: 0;
}

.history-pages {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    margin-top: 1.5rem;
}

.history-page {
    font-size: 0.85rem;
    font-variant-numeric: tabular-nums;
    color: var(--graphite);
}

/* Settings */

.setting {
    margin-bottom: 1.75rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid var(--rule);
}

.setting:last-of-type {
    border-bottom: 0;
}

.setting .field-inline {
    margin-bottom: 0.35rem;
}

.port-number {
    max-width: 9rem;
}

/* What the workbench is doing in the background, and what is left. */
.activity-jobs {
    width: 100%;
    margin: 1rem 0;
    border-collapse: collapse;
    font-size: 0.92rem;
}

.activity-jobs th,
.activity-jobs td {
    padding: 0.5rem;
    border-bottom: 1px solid var(--rule);
    text-align: left;
    vertical-align: top;
}

.activity-jobs .count {
    width: 6rem;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.activity-jobs tr.done {
    opacity: 0.65;
}

.activity-jobs tr.waiting td:first-child {
    font-weight: 600;
}

.activity-jobs .meaning {
    opacity: 0.85;
}

/* Zotero's collections, each ticked and sent to a project. */
.zotero-collections {
    width: 100%;
    margin: 0.75rem 0 1rem;
    border-collapse: collapse;
    font-size: 0.9rem;
}

.zotero-collections th,
.zotero-collections td {
    padding: 0.4rem 0.5rem;
    border-bottom: 1px solid var(--rule);
    text-align: left;
    vertical-align: middle;
}

.zotero-collections .choose {
    width: 5rem;
    text-align: center;
}

.zotero-collections .count {
    width: 4rem;
    text-align: right;
}

.zotero-collections tr.chosen .collection-name {
    font-weight: 600;
}

.zotero-collections .preview {
    opacity: 0.8;
}

.zotero-collections select {
    max-width: 16rem;
}

/* The way back to the results a paper was opened from: above where the page is, small. */
.back-to-results {
    display: inline-block;
    margin-bottom: 0.4rem;
    font-size: 0.88rem;
}

/* Tabs over a page's panels: the chosen one joins the panel below it. */
.tab-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    margin: 1rem 0 1.25rem;
    border-bottom: 1px solid var(--rule);
}

.tab {
    margin-bottom: -1px;
    padding: 0.5rem 0.9rem;
    border: 1px solid transparent;
    border-radius: 6px 6px 0 0;
    background: none;
    color: inherit;
    font: inherit;
    font-size: 0.92rem;
    cursor: pointer;
    opacity: 0.75;
}

.tab:hover {
    opacity: 1;
}

.tab.chosen {
    border-color: var(--rule);
    border-bottom-color: var(--paper);
    background: var(--paper);
    font-weight: 600;
    opacity: 1;
}

.tab:focus-visible {
    outline: 2px solid var(--verdigris);
    outline-offset: 2px;
}

/* A model not in Ollama yet, with how to fetch it. */
.model-option {
    margin-bottom: 0.6rem;
}

.fetch-model {
    margin: 0.35rem 0 0 1.6rem;
    padding: 0.6rem 0.85rem;
    border-left: 3px solid var(--verdigris);
    font-size: 0.88rem;
}

.fetch-model p {
    margin: 0 0 0.35rem;
}

.fetch-model ol {
    margin: 0;
    padding-left: 1.2rem;
}

.fetch-model li {
    margin-bottom: 0.3rem;
}

.fetch-command {
    padding: 0.1rem 0.4rem;
    user-select: all;
}

.copy-command {
    margin-left: 0.4rem;
    padding: 0.15rem 0.6rem;
    font-size: 0.82rem;
}

.model-installed {
    margin-left: 0.4rem;
}

/* The embedding model: a choice among a few, ruled off from the status above it. */
.model-choice {
    margin-top: 1.25rem;
    padding-top: 1rem;
    border-top: 1px dashed var(--rule);
}

.model-choice fieldset {
    margin: 0;
    padding: 0;
    border: 0;
}

.model-choice legend {
    margin-bottom: 0.5rem;
    font-weight: 600;
}

.model-choice .field-inline {
    align-items: baseline;
}

/* For labels a screen reader needs and the page does not show. */
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
}

/* A link that follows a sentence. Razor eats the space between a block and what comes after it, so
   the gap is set here rather than left to a literal that a re-indent would swallow again. */
.after-the-words {
    margin-left: 0.35rem;
}

/* What a paper is about: the concept, what kind of thing it is, and the words it was found in. */
.concept-list {
    display: grid;
    gap: 0.4rem;
    margin: 0.6rem 0 0.4rem;
    padding: 0;
    list-style: none;
}

.concept {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.4rem 0.6rem;
}

.concept-name {
    font-weight: 600;
}

.badge.concept-kind {
    color: var(--graphite);
    border-color: var(--rule);
}

.concept-evidence {
    flex: 1 1 20rem;
    font-size: 0.85rem;
}

/* What a paper is about: the concept, what kind of thing it is, and the words it was found in. */
.concept-list {
    display: grid;
    gap: 0.4rem;
    margin: 0.6rem 0 0.4rem;
    padding: 0;
    list-style: none;
}

.concept {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.4rem 0.6rem;
}

.concept-name {
    font-weight: 600;
}

.badge.concept-kind {
    color: var(--graphite);
    border-color: var(--rule);
}

.concept-evidence {
    flex: 1 1 20rem;
    font-size: 0.85rem;
}

/* An answer built from the vault's own passages, and the passages it was built from. The list is
   the point: an answer nobody can check against the papers is worse than none. */
.answer-passages {
    margin: 0.6rem 0 0.4rem;
    padding-left: 1.4rem;
    font-size: 0.9rem;
    line-height: 1.6;
}

/* Which papers show a picture: a fact among the other facts about it, in the same voice. It was a
   pill pressed against the title, which made the title read as two things. */
.in-use {
    color: var(--verdigris);
    white-space: nowrap;
}

/* A folder of figures, shown as what the figures look like. Sized so a figure's own labels can be
   read without opening it, which is the whole reason for the view. */
.picture-wall {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
    gap: 1rem;
    margin: 1rem 0 0;
    padding: 0;
    list-style: none;
}

.picture-card {
    display: flex;
    flex-direction: column;
    background: var(--surface);
    border: 1px solid var(--rule);
    border-radius: 6px;
    overflow: hidden;
}

.picture-card-link {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 11rem;
    padding: 0.5rem;
    background: var(--paper);
}

.picture-card-link img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.picture-card-name {
    padding: 0.6rem 0.7rem 0.3rem;
    font-size: 0.9rem;
    line-height: 1.35;
    overflow-wrap: anywhere;
}

.picture-card-foot {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: auto;
    padding: 0.4rem 0.7rem 0.6rem;
}

.picture-card-foot .meta {
    margin-right: auto;
    font-size: 0.8rem;
}

/* How a folder is shown, chosen where a folder is narrowed. */
.how-shown {
    display: inline-flex;
    gap: 0.2rem;
}

.how-shown .button.chosen {
    color: var(--ink);
    background: var(--paper-deep);
    border-color: var(--graphite);
}

/* Reading a figure into text: what it does, then who to ask, then the asking. */
.figure-to-text {
    margin: 1rem 0 1.25rem;
}

.figure-to-text .hint {
    max-width: 52rem;
}

.figure-to-text-ask {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.6rem;
    margin-top: 0.75rem;
}

.figure-to-text-ask select {
    max-width: 22rem;
}

/* The models to write with, each saying where it runs and whether it can see. */
.model-choices {
    display: grid;
    gap: 0.3rem;
    margin: 0.5rem 0 1rem;
    padding: 0;
    list-style: none;
}

.model-choice-option .hint {
    display: inline;
    margin-left: 0.4rem;
}

/* One hosted provider's key: what it is called, where to get one, and the box to paste it in.

   The box and its buttons are one row on one baseline. They were a field and an actions group side
   by side, and a field carries its label above its input, so the button sat a label's height lower
   than the box it belonged to. */
.provider-key {
    margin: 1rem 0 0;
    padding-top: 0.9rem;
    border-top: 1px solid var(--rule);
}

.provider-name {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.4rem 0.75rem;
}

.provider-name h3 {
    margin: 0;
    font-size: 1rem;
}

/* Pushed to the end of the line, so the state of each provider reads down the page. */
.provider-keys-page {
    margin-left: auto;
    font-size: 0.85rem;
    white-space: nowrap;
}

.provider-key-entry {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.5rem;
}

.provider-key-entry input {
    flex: 1 1 18rem;
    min-width: 0;
    font: inherit;
}

/* Documents and importing */

/* A folder says what it is in one line; what can be done to it is asked for. */

.folder-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 0.75rem;
}

.folder-head h2 {
    margin: 0;
}

/* The dots. Square and quiet: it is a way in, not something to be drawn to. */
.more {
    margin-left: auto;
    padding: 0.15rem 0.55rem;
    font-size: 1.1rem;
    line-height: 1.2;
    color: var(--graphite);
}

.folder-purpose {
    margin: 0.35rem 0 0;
}

/* Bringing files in, offered rather than occupying the page. */
.add-files {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 1rem;
}

/* What can be brought into the folder, above the folder rather than inside the list it fills. The
   spacing below is the toolbar's own: the buttons were written to sit under a list and carry a gap
   meant for that. */
.folder-toolbar {
    margin-bottom: 0.75rem;
}

.folder-toolbar .add-files {
    margin-top: 0;
}

/* Inside the panel beside the folder tree, under whatever the selected folder is: a block of the
   same card rather than a separate region of the page. */
.documents-section {
    margin-top: 1rem;
    padding: 1rem 1.25rem;
    background: var(--surface);
    border: 1px solid var(--rule);
    border-radius: 6px;
}

.folder-import {
    margin-top: 1.25rem;
}

.field-inline {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.9rem;
}

.field-inline input {
    accent-color: var(--verdigris);
}

/* A few choices of one kind, one to a line, without the box and legend a fieldset draws by default:
   the heading above already says what they choose between. */
.choices {
    display: grid;
    gap: 0.35rem;
    margin: 0;
    padding: 0;
    border: 0;
}

/* Choosing documents and filing them somewhere else. */
/* Ruled off from the pager above it: the pager is about reading the list, these act on what is
   chosen in it, and without the line the two rows of controls read as one. The last row of the
   grid keeps its own rule for the same reason, so the list ends where it visibly ends. */
.document-tools {
    position: sticky;
    bottom: 0.75rem;
    z-index: 5;
    display: grid;
    gap: 0.6rem;
    margin-top: 0.9rem;
    padding: 0.75rem 1rem 0.85rem;
    background: var(--paper-deep);
    border: 1px solid var(--rule);
    border-left: 3px solid var(--verdigris);
    border-radius: 8px;
    box-shadow: 0 6px 18px rgb(0 0 0 / 0.18);
}

.document-tools-hint {
    margin-top: 0.75rem;
}

/* How many are chosen heads the bar, and a way to let go of them beside it. */
.document-tools-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.document-tools-count {
    margin: 0;
    font-weight: 600;
    color: var(--ink);
}

/* Each action a row: its name in a column of its own, so the controls start in line. */
.document-tools-row {
    display: grid;
    grid-template-columns: 5rem 1fr;
    align-items: center;
    gap: 0.5rem 0.75rem;
    margin: 0;
}

.document-tools-label {
    color: var(--graphite);
    font-size: 0.9rem;
}

.document-tools-controls {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}

.document-tools-controls select,
.document-tools-controls input {
    width: 16rem;
    max-width: 100%;
}

/* Taking them away, below the rest: the download first, removing at the far end on its own. */
.document-tools-foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    padding-top: 0.6rem;
    border-top: 1px solid var(--rule);
}

.document-tools-foot #remove-documents,
.document-tools-foot .confirm-remove {
    margin-left: auto;
}

@media (max-width: 40rem) {
    .document-tools-row {
        grid-template-columns: 1fr;
    }
}

/* A box that suggests tags as they are typed is a box to type in: no drop-down arrow of the browser's beside the
   real drop-down's, which looked like a second kind of list. The suggestions still come as it is typed in. */
input[list]::-webkit-calendar-picker-indicator {
    display: none !important;
}

/* Asking before removing: the question and its answers sit where the button was. */
.confirm-remove {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9rem;
    color: var(--ink);
}

.document .choose-document,
#choose-all-documents {
    margin: 0;
    accent-color: var(--verdigris);
}

/* The folder's contents, given the width of the page. Narrowing and ordering sit above it. */
.grid-tools {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 1rem;
    margin-bottom: 0.75rem;
}

.grid-tools input[type="search"] {
    width: 18rem;
    max-width: 100%;
}

/* Laid out by declared widths rather than by what happens to be in the cells. Left to itself, a
   browser is free to squeeze the one column that was given no width — which it did, to the width of
   a single letter, while the named columns kept theirs.

   Every column is given a share rather than a size, and the shares add to a hundred. Sizes in rem
   were the fault behind that squeeze returning: they grow with the reader's own font size while the
   table stays the width of the page, so at a larger setting the fixed columns swallowed the lot and
   left the name — the only column without a width — a single letter. Shares cannot do that. */
.document-grid {
    width: 100%;
    table-layout: fixed;
    border-collapse: collapse;
}

/* The one worth the most room: it carries the title and the file it arrived as, and takes whatever the
   others leave. They are set in rem, as wide as what they hold: as shares of the table, a narrow table
   cut its checkboxes, badges and buttons in half. */
.document-grid .column-name {
    width: auto;
}

/* Nothing leaves the column it was given. A share of the table decides how wide a column is, but it
   does not stop what is in one spilling across its neighbour — which is how a file size came to be
   written over the date beside it. */
.document-grid th,
.document-grid td {
    padding: 0.4rem 0.5rem;
    overflow: hidden;
    text-align: left;
    vertical-align: middle;
    border-bottom: 1px solid var(--rule);
}

.document-grid thead th {
    padding-bottom: 0.25rem;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--graphite);
    white-space: nowrap;
}

.document-grid tbody tr:hover {
    background: var(--paper-deep);
}

/* A heading that sorts: a button that looks like the heading it is, not like a button. */
.sorter {
    padding: 0;
    font: inherit;
    color: inherit;
    background: none;
    border: 0;
    cursor: pointer;
}

.sorter:hover,
.sorter.sorted {
    color: var(--ink);
    text-decoration: underline;
}

.document-grid .column-choose {
    width: 2.5rem;
}

/* Room for the mark and the picture side by side, which together are wider than either. */
.document-grid .column-preview {
    width: 7rem;
    white-space: nowrap;
}

.document-grid .column-kind {
    width: 4.5rem;
}

/* "800.6 KB" is longer than it looks once the reader's own font size is applied. */
.document-grid .column-size {
    width: 5.5rem;
}

/* "17 Sept 2026" in full. */
.document-grid .column-added {
    width: 7.5rem;
}

.document-grid .column-kind,
.document-grid .column-size,
.document-grid .column-added {
    color: var(--graphite);
    white-space: nowrap;
}

/* "Internal" on one line; "Special category data" on two rather than cut short. */
.document-grid .column-label {
    width: 7.5rem;
    text-align: right;
}

.document-grid .column-label .badge {
    white-space: normal;
    text-align: center;
}

.document-grid .column-details {
    width: 7rem;
    text-align: right;
}

/* The label, under the title, for the widths at which it has no column. */
.document-grid .row-label {
    display: none;
}

/* The mark and the picture sit side by side, the mark keeping its own size. */
.document-grid .column-preview {
    display: table-cell;
}

.document-grid .column-preview .kind-chip {
    vertical-align: middle;
    margin-right: 0.4rem;
}

/* The name it is known by, then the file it arrived as.

   The title wraps. It was trimmed with an ellipsis like the file name beneath it, which in a narrow
   window left every row reading "Agentic Software Engineering Foundatio…" — four papers whose
   titles begin alike, told apart by nothing. Two lines of title are worth more than a tidy edge.

   The file name still trims: it is the same words again, as the file happened to be called. */
.document-grid .document-title {
    display: block;
    overflow-wrap: anywhere;
}

.grid-file {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* What the columns say, for the widths at which there are no columns. Hidden while they are there. */
.row-facts {
    display: none;
}

.grid-file {
    font-size: 0.82rem;
}

/* A row's tags, under its file name: small, and wrapping rather than trimmed, since a word cut short
   is a word that cannot be read. */
.grid-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    margin: 0.3rem 0 0;
    padding: 0;
    list-style: none;
}

.grid-tag {
    padding: 0 0.45rem;
    font: inherit;
    font-size: 0.75rem;
    line-height: 1.5;
    color: var(--graphite);
    background: var(--paper);
    border: 1px solid var(--rule);
    border-radius: 999px;
    cursor: pointer;
}

.grid-tag:hover {
    color: var(--ink);
    border-color: var(--graphite);
}

.grid-tag.chosen {
    color: var(--paper);
    background: var(--verdigris);
    border-color: var(--verdigris);
}

.grid-preview {
    display: inline-block;
    width: 2rem;
    height: 2rem;
    object-fit: cover;
    vertical-align: middle;
    background: var(--paper-deep);
    border: 1px solid var(--rule);
    border-radius: 3px;
}

/* Narrow: the columns that describe go, all three at once, and what they held goes under the title.

   They used to go in two steps, which left a middle width — a window a little under a thousand
   pixels, which is what a person actually reads in — showing "S:" and "Add" over "5" and "20 S".
   A column too narrow to read is worse than no column: it takes the room and gives nothing back.

   The picture goes too. The chip stays: three letters are always worth their width. */
/* By the room the table has, not by the window: beside the folder pane a window of a thousand pixels
   leaves the table seven hundred, and the rule on the window's width let all three columns show there,
   each too narrow to read. The columns need about 52rem between them with room left for the name. */
.table-frame {
    container-type: inline-size;
}

@container (max-width: 52rem) {
    .document-grid .column-kind,
    .document-grid .column-size,
    .document-grid .column-added,
    .document-grid .grid-preview {
        display: none;
    }

    .document-grid .column-preview {
        width: 4.5rem;
    }

    .document-grid .row-facts {
        display: block;
    }
}

/* Narrower still, the label goes under the title too, and the name keeps room to be read. */
@container (max-width: 36rem) {
    .document-grid .column-label {
        display: none;
    }

    .document-grid .row-label {
        display: block;
        margin-top: 0.2rem;
    }
}

@media (max-width: 60rem) {
    .document-grid .column-kind,
    .document-grid .column-size,
    .document-grid .column-added,
    .document-grid .grid-preview {
        display: none;
    }

    .document-grid .column-preview {
        width: 4.5rem;
    }

    .row-facts {
        display: block;
    }
}

/* What kind of thing a document is, in three or four letters.

   A drawn sheet with a mark on it stood here: careful, and about three millimetres across, which at
   a glance down a list of papers said only "a document" — which the reader knew. A word is read
   without being studied, and it needs no icon font and no network either. */
.kind-chip {
    --document-colour: var(--graphite);

    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    min-width: 2.6rem;
    padding: 0.05rem 0.3rem;
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    line-height: 1.6;
    color: var(--document-colour);
    background: var(--paper);
    border: 1px solid var(--document-colour);
    border-radius: 3px;
}

.kind-chip.kind-pdf { --document-colour: var(--hue-rust); }
.kind-chip.kind-words { --document-colour: var(--hue-blue); }
.kind-chip.kind-table { --document-colour: var(--hue-green); }
.kind-chip.kind-slides { --document-colour: var(--hue-amber); }
.kind-chip.kind-picture { --document-colour: var(--hue-plum); }
.kind-chip.kind-notes { --document-colour: var(--hue-slate); }
.kind-chip.kind-page { --document-colour: var(--hue-teal); }
.kind-chip.kind-link { --document-colour: var(--hue-teal); }
.kind-chip.kind-archive { --document-colour: var(--hue-brown); }

/* A row of fixed shape rather than one that depends on how long a title happens to be.

   As a wrapping flex row it read well only by accident: the title's basis is its own content width
   and the details' was zero, so a narrow window pushed the title onto its own line and gave the
   details a full one, while a wide window fitted everything on one line and left the details a
   sliver to wrap a word at a time down the page. The grid says where each part goes at any width. */
/* A document is a row of the grid now. What used to lay one out as its own little grid — back when
   the list was a <ul> of cards — was left behind when it became a table, and went on applying: a
   display:grid on a <tr> replaces the table row entirely, which put the cells in four columns of its
   own choosing and left the name nowhere to go. */
.document-title {
    font-weight: 600;
}

/* The drop zone is a label around the file input: a click opens the picker, a drop queues the files. */
.dropzone {
    display: grid;
    gap: 0.25rem;
    justify-items: center;
    margin-top: 1rem;
    padding: 1.1rem 1rem;
    text-align: center;
    border: 1.5px dashed var(--rule);
    border-radius: 6px;
    cursor: pointer;
}

.dropzone:hover,
.dropzone:focus-within {
    border-color: var(--verdigris);
}

.dropzone.over {
    background: var(--paper-deep);
    border-color: var(--verdigris);
    border-style: solid;
}

.dropzone-label {
    font-weight: 600;
}

.dropzone .hint {
    margin: 0;
    font-size: 0.85rem;
}

/* Visually hidden, but still the control the label opens and tests drive. */
.dropzone input[type="file"] {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
}

.imports {
    display: grid;
    gap: 0.4rem;
    margin: 0.75rem 0 0;
    padding: 0;
    list-style: none;
}

.import {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 0.15rem 0.75rem;
    align-items: baseline;
    padding: 0.5rem 0.7rem;
    background: var(--paper);
    border: 1px solid var(--rule);
    border-radius: 4px;
}

.import-name {
    overflow-wrap: anywhere;
}

.import-state {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--graphite);
    text-transform: lowercase;
}

.import.running .import-state {
    color: var(--verdigris);
}

.import.failed {
    border-color: var(--iron);
}

.import.failed .import-state {
    color: var(--iron);
}

.import-error,
.import-note {
    grid-column: 1 / -1;
    margin: 0;
    font-size: 0.85rem;
}

.import-error {
    color: var(--iron);
}

.import .actions {
    grid-column: 1 / -1;
    margin-top: 0.4rem;
}

/* What arrived and was never read. Shaped like an import so the two queues read alike, but kept
   quieter: nothing here is going wrong this moment, it is waiting on a decision. */

.attention {
    display: grid;
    gap: 0.4rem;
    margin: 0.75rem 0 0;
    padding: 0;
    list-style: none;
}

.attention-item {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 0.15rem 0.75rem;
    align-items: baseline;
    padding: 0.5rem 0.7rem;
    background: var(--paper);
    border: 1px solid var(--rule);
    border-radius: 4px;
}

.attention-name {
    color: var(--verdigris);
    text-decoration: none;
    overflow-wrap: anywhere;
}

.attention-name:hover {
    text-decoration: underline;
}

.attention-state {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--graphite);
}

/* Something went wrong, as against something that has not been done. */
.attention-item.failed {
    border-color: var(--iron);
}

.attention-item.failed .attention-state {
    color: var(--iron);
}

.attention-reason,
.attention-item .actions {
    grid-column: 1 / -1;
    margin: 0;
}

.attention-reason {
    font-size: 0.85rem;
    color: var(--graphite);
}

.attention-item .actions {
    margin-top: 0.4rem;
}

/* ---------- The dashboard: the page the workbench opens on. ---------- */

.dashboard-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 0.75rem 1.5rem;
    margin-bottom: 1.25rem;
}

.dashboard-head h1 {
    margin-bottom: 0.1rem;
}

.dashboard-search {
    display: flex;
    gap: 0.5rem;
    width: min(26rem, 100%);
}

.dashboard-search input {
    flex: 1;
}

/* The numbers across every project, read at a glance before anything else. */
.dashboard-tiles {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
    gap: 0.75rem;
    margin: 0 0 1rem;
    padding: 0;
    list-style: none;
}

.tile {
    display: grid;
    align-content: start;
    height: 100%;
    padding: 0.85rem 1rem;
    color: var(--ink);
    text-decoration: none;
    background: color-mix(in srgb, var(--hue, var(--verdigris)) 9%, var(--surface));
    border: 1px solid color-mix(in srgb, var(--hue, var(--verdigris)) 30%, var(--rule));
    border-top: 4px solid var(--hue, var(--verdigris));
    border-radius: 6px;
}

a.tile:hover {
    background: color-mix(in srgb, var(--hue, var(--verdigris)) 16%, var(--surface));
    border-color: var(--hue, var(--verdigris));
}

.tile-number {
    font-size: 1.9rem;
    font-weight: 600;
    line-height: 1.15;
    font-variant-numeric: tabular-nums;
    color: var(--hue, var(--ink));
}

.tile-label {
    font-size: 0.9rem;
    color: var(--graphite);
}

.tile-note {
    margin-top: 0.3rem;
    font-size: 0.8rem;
    color: var(--graphite);
}

/* The projects take the wide column; what needs doing and what has happened sit beside them, and
   everything stacks on a narrow window. */
.dashboard-grid {
    display: grid;
    grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
    gap: 1rem;
    align-items: start;
}

@media (max-width: 52rem) {
    .dashboard-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

.dashboard-main,
.dashboard-side {
    display: grid;
    gap: 1rem;
}

/* Each panel under a band of its own colour: the projects green, what is waiting amber, what has
   happened blue, the models teal. */
.dashboard-projects,
.dashboard-attention,
.dashboard-activity,
.dashboard-models {
    border-top: 3px solid var(--panel-hue);
}

.dashboard-projects { --panel-hue: var(--hue-green); }
.dashboard-attention { --panel-hue: var(--hue-amber); }
.dashboard-activity { --panel-hue: var(--hue-blue); }
.dashboard-models { --panel-hue: var(--hue-teal); }

/* Something waiting turns the panel from a note into a warning. */
.dashboard-attention:has(.attention-list) {
    background: color-mix(in srgb, var(--hue-amber) 8%, var(--surface));
}

.dashboard-projects-list .project-name {
    font-weight: 600;
    color: var(--verdigris);
}

.dashboard-projects-list .count {
    padding: 0 0.45rem;
    border-radius: 999px;
    background: var(--paper-deep);
}

/* Which provider the work went to, as a bar and as a list saying the same in words. */
.use-bar {
    display: flex;
    gap: 2px;
    height: 0.7rem;
    margin: 0.6rem 0 0.75rem;
    overflow: hidden;
    border-radius: 999px;
    background: var(--paper-deep);
}

.use-bar > span {
    flex-basis: 0;
    min-width: 4px;
    background: var(--hue);
}

.use-list {
    display: grid;
    gap: 0.35rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.use-list li {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.15rem 0.75rem;
    font-size: 0.9rem;
}

.use-list .swatch {
    width: 0.75rem;
    height: 0.75rem;
    border-radius: 3px;
    background: var(--hue);
}

.use-list .provider-name {
    flex: 1 1 10rem;
    font-weight: 600;
}

.use-list .count {
    color: var(--graphite);
    font-variant-numeric: tabular-nums;
}

.use-list .count.wrong {
    color: var(--iron);
}

.dashboard-grid h2,
.dashboard-welcome h2 {
    margin: 0 0 0.5rem;
    font-size: 1.05rem;
}

.panel-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 0.5rem;
}

.panel-head h2 {
    margin: 0;
}

.panel-head a {
    font-size: 0.9rem;
    white-space: nowrap;
}

.dashboard-projects-list,
.attention-list,
.activity-list {
    display: grid;
    margin: 0;
    padding: 0;
    list-style: none;
}

.dashboard-projects-list li + li,
.attention-list li + li,
.activity-list li + li {
    border-top: 1px solid var(--paper-deep);
}

.dashboard-projects-list a {
    display: grid;
    gap: 0.05rem;
    margin: 0 -0.5rem;
    padding: 0.6rem 0.5rem;
    color: var(--ink);
    text-decoration: none;
    border-radius: 4px;
}

.dashboard-projects-list a:hover {
    background: var(--paper);
}

.dashboard-projects-list .meta {
    font-size: 0.85rem;
}

.attention-list li,
.activity-list li {
    display: grid;
    gap: 0.05rem;
    padding: 0.5rem 0;
}

.attention-list .project-name {
    text-decoration: none;
}

.attention-list .working {
    margin-top: 0;
    padding-top: 0;
    border-top: 0;
}

.activity-file {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.activity-list .meta {
    font-size: 0.82rem;
}

/* A failed import says so in its colour as well as its words. */
.activity.failed .meta {
    color: var(--iron);
}

.dashboard-welcome {
    max-width: 44rem;
}

.dashboard-welcome p {
    margin: 0;
}

.dashboard-head .meta {
    margin: 0;
}

/* Correcting a figure that was cut out of a paper. It opens under the copy rather than over it, so
   the page it came from stays in view while the crop is dragged. */
.figure-editor {
    margin: 1rem 0;
    padding: 1rem;
    border: 1px solid var(--rule);
    border-radius: 6px;
    background: var(--paper-deep);
}

.figure-editor .section-head {
    margin-bottom: 0.6rem;
}

.figure-editor h2 {
    margin: 0;
    font-size: 1rem;
}

/* A figure in a working copy can be corrected, so it says so when pointed at. */
.working-copy .rendered img {
    cursor: zoom-in;
}

/* The image editor, dressed as the rest of the workbench is.

   Only dressing: version 10.0.1 of the component writes its own sizing onto the elements, having
   learnt that a scoped stylesheet reaches the page only where the host links its scoped-CSS bundle,
   which this app has no reason to do. */
.psc-image-editor-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.3rem;
}

.psc-image-editor-button {
    padding: 0.3rem 0.7rem;
    border: 1px solid var(--rule);
    border-radius: 4px;
    background: var(--paper);
    color: var(--ink);
    font: inherit;
    line-height: 1.3;
    cursor: pointer;
}

.psc-image-editor-button:hover {
    border-color: var(--graphite);
}

.psc-image-editor-save {
    border-color: var(--verdigris);
    background: var(--verdigris);
    color: var(--paper);
    font-weight: 600;
}

/* The shape it is held to sits beside the buttons rather than filling the row. */
.psc-image-editor-shape {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    margin-inline-start: 0.4rem;
}

.psc-image-editor-shape select {
    width: auto;
    font: inherit;
}

.psc-image-editor-problem {
    margin: 0;
    color: var(--iron);
}

/* The name a correction will be filed under, offered before it is saved. */
.corrected-name {
    display: block;
    margin-bottom: 0.6rem;
    max-width: 34rem;
}

.corrected-name > span {
    display: block;
    margin-bottom: 0.2rem;
    font-size: 0.9rem;
}

.corrected-name input {
    width: 100%;
    font: inherit;
}

/* Tables that list things. There was no shared rule for these at all, so every one of them fell
   back to the browser's default table: no padding, columns of different widths pressed against each
   other, and headings that ran into one another. A list of rows should look like a list of rows. */
table.grid {
    width: 100%;
    margin: 1rem 0;
    border-collapse: collapse;
    font-size: 0.92rem;
}

table.grid th,
table.grid td {
    padding: 0.55rem 0.8rem;
    text-align: left;
    vertical-align: top;
}

table.grid thead th {
    padding-bottom: 0.4rem;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    white-space: nowrap;
    color: var(--verdigris);
    background: color-mix(in srgb, var(--verdigris) 6%, transparent);
    border-bottom: 2px solid color-mix(in srgb, var(--verdigris) 45%, var(--rule));
}

table.grid tbody td,
table.grid tbody th {
    border-bottom: 1px solid var(--rule);
}

/* A table wider than the window scrolls sideways inside TableScroll, instead of widening the page,
   and a shadow on an edge says there is more of it that way: on the right until the last column is
   in view, on the left once the first has gone. Each shadow's opacity is an animation whose clock
   is the scroll position (a scroll timeline), so it follows the table with no script. A table that
   fits has no scroll timeline to follow, and so shows neither shadow.

   The shadows sit over the cells, not behind them, so a shaded row cannot hide them. */
.table-scroll {
    position: relative;
    margin: 1rem 0;
    timeline-scope: --table-scroll;
}

.table-scroll-inner {
    overflow-x: auto;
    scroll-timeline: --table-scroll x;
}

.table-scroll-inner:focus-visible {
    outline: 2px solid var(--verdigris);
    outline-offset: 2px;
}

.table-scroll table.grid {
    margin: 0;
}

.table-scroll::before,
.table-scroll::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    z-index: 1;
    width: 1.75rem;
    pointer-events: none;
    opacity: 0;
    animation-duration: auto;
    animation-timing-function: linear;
    animation-fill-mode: both;
    animation-timeline: --table-scroll;
}

.table-scroll::before {
    left: 0;
    background: linear-gradient(to right, var(--scroll-shade), transparent);
    animation-name: table-scroll-left;
}

.table-scroll::after {
    right: 0;
    background: linear-gradient(to left, var(--scroll-shade), transparent);
    animation-name: table-scroll-right;
}

/* Fading over the first and last few per cent, so the shadow goes as the edge arrives rather than
   blinking out on the last pixel. */
@keyframes table-scroll-left {
    0% { opacity: 0; }
    6%, 100% { opacity: 1; }
}

@keyframes table-scroll-right {
    0%, 94% { opacity: 1; }
    100% { opacity: 0; }
}

/* Numbers line up under one another and are read down the column, so they are set to the right in
   figures of one width. */
table.grid .count {
    text-align: right;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

/* The evidence: every AI call, kept whole. */

/* A call and the fold beneath it are one group. The rule goes under the pair rather than between
   them, so the detail reads as belonging to the call above it.

   Written to beat table.grid's own rule rather than to read nicely: a class on a tbody is less
   specific than the element selector that draws every cell's bottom border, so the line between a
   call and its own fold stayed exactly where it was least wanted. */
table.grid tbody.evidence-call > tr > td {
    border-bottom: 0;
}

table.grid tbody.evidence-call:not(:last-child) > tr:last-child > td {
    border-bottom: 1px solid var(--rule);
}

/* The picture a call was about, shown small: enough to tell one figure from another and to compare
   with what the model made of it, not enough to take the page over. */
.evidence-picture {
    display: block;
    max-width: 100%;
    max-height: 14rem;
    margin: 0 0 0.6rem;
    background: #fff;
    border: 1px solid var(--rule);
    border-radius: 4px;
}

.evidence-drawn {
    margin-bottom: 0.6rem;
    padding: 0.6rem 0.8rem;
    background: #fff;
    border: 1px solid var(--rule);
    border-radius: 4px;
    overflow-x: auto;
}

/* Set in from the call it belongs to, and quieter than it. */
.evidence-detail > td {
    padding-left: 1.6rem;
}

.evidence-detail summary {
    color: var(--graphite);
}

.evidence-call.running {
    background: var(--paper-deep);
}

.evidence .column-when {
    width: 1%;
    white-space: nowrap;
}

.when-day {
    display: block;
}

.when-time {
    display: block;
    font-size: 0.78rem;
    color: var(--graphite);
    font-variant-numeric: tabular-nums;
}

/* What the call was for is the thing being scanned down the page, so it carries the weight; the
   paper it was about sits under it, lighter, as a way back to the thing itself. */
.evidence-capability .capability {
    display: block;
    font-weight: 600;
}

.evidence-document {
    display: block;
    font-size: 0.82rem;
}

/* The way into a call's trace: everything it was part of, as a tree and a timeline. */
.evidence-trace {
    font-size: 0.82rem;
}

.evidence .column-outcome {
    width: 1%;
    white-space: nowrap;
}

.evidence-model .model-name {
    white-space: nowrap;
}

.evidence-model .meta {
    display: block;
    font-size: 0.78rem;
}

/* A call that ended as it meant to. Quiet: it is the ordinary case, and the eye should find the
   failures and the ones still out. */
.badge.done {
    color: var(--graphite);
    border-color: var(--rule);
}

/* An assistant reading the vault, rather than a model the workbench asked (decision 29). */
.badge.assistant {
    margin-left: 0.4rem;
    color: var(--hue-plum);
    border-color: color-mix(in srgb, var(--hue-plum) 45%, var(--rule));
}

.evidence-detail td {
    padding-top: 0;
}

.evidence-detail summary {
    cursor: pointer;
    font-size: 0.85rem;
    color: var(--graphite);
}

/* The question beside the answer, so a reader can see what produced what. */
.evidence-pair {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin: 0.6rem 0;
}

@media (max-width: 62rem) {
    .evidence-pair {
        grid-template-columns: 1fr;
    }
}

.evidence-pair h2 {
    margin: 0 0 0.3rem;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--graphite);
}

/* Kept whole and shown whole, up to a height: a prompt is long, and scrolling one is better than
   being unable to see it. */
.evidence-text {
    max-height: 22rem;
    margin: 0;
    padding: 0.6rem 0.8rem;
    overflow: auto;
    border: 1px solid var(--rule);
    border-radius: 4px;
    background: var(--paper-deep);
    font-size: 0.82rem;
    line-height: 1.5;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

/* A row whose document a model has read. A link, because the summary itself is on the document. */
.badge.summarised {
    margin-left: 0.4rem;
    color: var(--verdigris);
    text-decoration: none;
}

.badge.summarised:hover {
    background: var(--paper-deep);
}

/* In the drawer it is one thing among several, so it is set closer than on the document itself. */
.drawer-summary {
    margin: 1rem 0;
}

.drawer-summary .summary-text {
    font-size: 0.9rem;
}

/* What a model made of a document. Dressed as a quotation from somebody else, because that is what
   it is: not the author's words, and not the workbench's either. */
.summary {
    margin: 1rem 0;
    padding: 0.9rem 1.1rem;
    border-left: 3px solid var(--verdigris);
    border-radius: 0 4px 4px 0;
    background: var(--paper-deep);
}

.summary h2 {
    margin: 0;
    font-size: 1rem;
}

.summary-text {
    margin: 0.5rem 0;
    max-width: 46rem;
    white-space: pre-wrap;
}

/* Runs: a workflow executed, step by step (§15). */

.crumbs {
    margin: 0 0 0.75rem;
    font-size: 0.9rem;
    color: var(--graphite);
}

/* Why a run stopped. Converging and being stopped look alike in a list and are not alike at all,
   so they are coloured apart rather than left to be read. */
.outcome {
    display: inline-block;
    padding: 0.15rem 0.55rem;
    border: 1px solid var(--rule);
    border-radius: 999px;
    font-size: 0.85rem;
    white-space: nowrap;
}

.outcome.good {
    color: var(--verdigris);
    border-color: var(--verdigris);
    background: var(--paper-deep);
}

.outcome.bad {
    color: var(--iron);
    border-color: var(--iron);
}

.outcome.stopped {
    color: var(--graphite);
}

/* A run still at work: drawn like a call still being answered, and not as a failure. */
.outcome.going {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    color: var(--verdigris);
    border-color: var(--verdigris);
}

table.grid td.narrow,
table.grid th.narrow {
    width: 1%;
    white-space: nowrap;
    text-align: right;
}

table.grid td.when,
table.grid th.when {
    width: 1%;
    white-space: nowrap;
    color: var(--graphite);
}

/* What a step actually wrote. Long, and worth reading whole, so it keeps its own line breaks. */
.written {
    margin: 0;
    max-width: 46rem;
    white-space: pre-wrap;
}

.went-wrong {
    color: var(--iron);
}

/* Each pass of a loop, so a later one can be read against the one it replaced. */
.drafts {
    margin: 0 0 1.5rem;
    padding-left: 1.25rem;
}

.drafts li {
    margin-bottom: 1rem;
}

.drafts h3 {
    margin: 0 0 0.25rem;
    font-size: 0.95rem;
    color: var(--graphite);
}

.guards {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.35rem 1.5rem;
    margin: 0 0 1.5rem;
    max-width: 30rem;
}

.guards dt {
    color: var(--graphite);
}

.guards dd {
    margin: 0;
}

@media (max-width: 40rem) {
    /* On a narrow window the numbers matter less than the step and what came of it. */
    table.grid.run-steps td.when,
    table.grid.run-steps th.when,
    table.grid.runs td.when,
    table.grid.runs th.when {
        display: none;
    }
}

/* Putting a run again (§14.4): three questions, each with what it answers beside it. */
.replay {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: 0.6rem 1rem;
    margin: 0 0 1.5rem;
}

.replay .hint {
    margin: 0;
}

.replay .counterfactual {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.replay .counterfactual select {
    max-width: 22rem;
}

@media (max-width: 40rem) {
    .replay {
        grid-template-columns: 1fr;
        gap: 0.3rem;
    }

    .replay .hint {
        margin-bottom: 0.6rem;
    }

    .replay .counterfactual {
        flex-wrap: wrap;
    }
}

/* Experiments: one workflow, several arms, several papers (§19.1). */

.hypothesis {
    margin: 0 0 1.25rem;
    padding: 0.5rem 0 0.5rem 1rem;
    border-left: 3px solid var(--verdigris);
    max-width: 46rem;
    color: var(--graphite);
    font-style: italic;
}

table.grid.arms input[type="text"],
table.grid.arms select {
    width: 100%;
}

.papers {
    margin: 0 0 1.5rem;
    padding: 0;
    list-style: none;
    columns: 2;
}

.papers li {
    margin-bottom: 0.3rem;
    break-inside: avoid;
}

.papers label {
    display: inline;
    font-weight: normal;
}

/* A cell nobody reached yet, which is different from one that failed. */
.not-reached {
    color: var(--graphite);
}

@media (max-width: 40rem) {
    .papers {
        columns: 1;
    }
}

/* A form written in sections: each group of fields is one thought, with air between them. */
form > section {
    margin-bottom: 2.25rem;
}

form > section > h2 {
    margin: 0 0 0.35rem;
}

form > section > h2 + .hint {
    margin-top: 0;
    margin-bottom: 1.1rem;
    max-width: 46rem;
}

/* A field whose value is a few characters does not want to be as wide as a sentence. */
.field.narrow-field input {
    max-width: 10rem;
}

/* The explanation under a label, before the box it explains. */
.field em {
    margin-bottom: 0.15rem;
    line-height: 1.4;
}

.field textarea {
    min-height: 4.5rem;
}

/* The arms table is wider than a field, and its own row of buttons sits under it. */
table.grid.arms {
    margin-bottom: 0.9rem;
}

/* What an arm works by: the repository, then its files, one list under the other. A list of paths is
   long and narrow, so it is given the width to show a path whole and the height for a few of them. */
.works-by select + select {
    margin-top: 0.4rem;
}

.framework-files {
    min-width: 18rem;
}

/* A draft's arms, each with what it works by and why it is there. */
.experiment-arms {
    display: grid;
    gap: 0.6rem;
    margin: 0 0 1.25rem;
    padding: 0;
    list-style: none;
}

.experiment-arms li {
    display: grid;
    gap: 0.15rem;
}

.experiment-arms .arm-files,
.experiment-arms .arm-notes {
    color: var(--graphite);
    font-size: 0.9rem;
}

.framework-chosen {
    display: block;
    margin-top: 0.25rem;
    color: var(--graphite);
    font-size: 0.85rem;
}

/* How an experiment stands, read before its table. */
.guards.standing {
    margin-bottom: 1.75rem;
}

/* Sections of a page that is read top to bottom, not only of a form. */
.results,
.run-steps,
.blackboard {
    margin-bottom: 2rem;
}

/* Approvals: what the workbench will not do without being told (§17). */
.approvals {
    margin: 0;
    padding: 0;
    list-style: none;
}

.approvals > li {
    margin-bottom: 1.5rem;
    padding: 1rem 1.25rem;
    border: 1px solid var(--rule);
    border-left: 3px solid var(--graphite);
    background: var(--surface);
    max-width: 52rem;
}

/* Nothing decided is a refusal, so one about to run out is one about to be answered by silence. */
.approvals > li.expiring {
    border-left-color: var(--iron);
}

.approvals .asked {
    display: flex;
    gap: 1rem;
    align-items: baseline;
    justify-content: space-between;
}

.approvals .asked h2 {
    margin: 0;
    font-size: 1.1rem;
}

.approvals .because {
    margin: 0.4rem 0 0.9rem;
    color: var(--graphite);
}

.dimensions {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.25rem 1.25rem;
    margin: 0 0 1rem;
    font-size: 0.92rem;
}

.dimensions dt {
    color: var(--graphite);
}

.dimensions dd {
    margin: 0;
}

@media (max-width: 40rem) {
    .approvals .asked {
        flex-direction: column;
        gap: 0.3rem;
    }
}

/* A cell being run now. "Not yet" while it is being worked on is the page saying nothing is
   happening while something is. */
.running-cell {
    display: inline-flex;
    gap: 0.4rem;
    align-items: center;
    white-space: nowrap;
    color: var(--verdigris);
}

/* The run controls are their own step, not the lead-in to the table below them. */
.page-head + .hypothesis + .guards + .actions,
.guards.standing + .actions {
    margin-bottom: 2rem;
}

.actions.running-controls {
    margin-bottom: 2rem;
}

/* §16.3: a run that may have been broken on purpose says so, before anybody judges it. */
.notice.faults {
    border-left: 3px solid var(--iron);
    background: var(--paper-deep);
}

/* The editor papers are written in, in the workbench's tokens. Its own stylesheet paints the
   writing surface white and the text black outright, which in the dark theme left a white slab in
   a dark page. In the light theme these are the same colours near enough. */
.EasyMDEContainer .CodeMirror {
    color: var(--ink);
    background: var(--field);
    border-color: var(--rule);
}

.EasyMDEContainer .CodeMirror-cursor {
    border-left-color: var(--ink);
}

.EasyMDEContainer .CodeMirror-selected,
.EasyMDEContainer .CodeMirror-focused .CodeMirror-selected {
    background: color-mix(in srgb, var(--verdigris) 25%, transparent);
}

/* Before EasyMDE has started, the editor is a bare text box, and text typed into it never reaches the
   page: a section written there was saved empty. So it is not shown until the editor has taken it
   over, and the space says what is happening instead. */
.editor-host > textarea {
    display: none;
}

.editor-host:not(:has(.EasyMDEContainer))::before {
    content: "Starting the editor…";
    display: block;
    padding: 1rem;
    color: var(--graphite);
    border: 1px solid var(--rule);
    border-radius: 4px;
    background: var(--surface);
}

.EasyMDEContainer .editor-toolbar {
    border-color: var(--rule);
}

.editor-toolbar.fullscreen {
    background: var(--paper);
}

/* Under the editor's own container, so these outrank the editor's stylesheet: it loads after this one
   and its rules are as specific, and it paints a hovered or active button near-white (#fcfcfc) - in the
   dark theme a pale icon on a white square, all but invisible. */
.EasyMDEContainer .editor-toolbar button {
    color: var(--ink);
}

.EasyMDEContainer .editor-toolbar button.active,
.EasyMDEContainer .editor-toolbar button:hover {
    background: var(--paper-deep);
    border-color: var(--rule);
}

/* The editor's diagram button names a Bootstrap icon, which the workbench does not load, and EasyMDE
   puts that class on the button itself rather than an icon inside it: without this it is an empty
   square. Drawn here instead, a small flowchart in the toolbar's ink. Matched by the icon's class,
   not the button's name, which EasyMDE prefixes ("mde-addMermaid"). */
.editor-toolbar button.bi-pie-chart::before {
    content: "";
    display: inline-block;
    width: 1rem;
    height: 1rem;
    vertical-align: middle;
    background: currentColor;
    -webkit-mask: var(--diagram-icon) center / contain no-repeat;
    mask: var(--diagram-icon) center / contain no-repeat;
    --diagram-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M1 1h5v4H1zM10 1h5v4h-5zM5.5 11h5v4h-5zM2.9 5h1.2v2.4h7.8V5h1.2v3.6H8.6V11H7.4V8.6H2.9z'/%3E%3C/svg%3E");
}

.EasyMDEContainer .editor-toolbar i.separator {
    border-left-color: var(--rule);
    border-right-color: transparent;
}

.editor-statusbar {
    color: var(--graphite);
}

/* One word count, not two that disagree. The editor's counts every run of letters and digits in the
   Markdown source, so "phase-7/authoring" is three words, "that's" two, and a list's "1." and a
   citation key count too. The workbench's, beside the section's title, counts the words as they
   read, split at spaces, as a word processor does - the number a thesis is written against. */
.editor-statusbar .words {
    display: none;
}

.editor-preview,
.editor-preview-side {
    color: var(--ink);
    background: var(--surface);
    border-color: var(--rule);
}

.editor-preview pre {
    background: var(--paper-deep);
}

/* ---------- Colour. ---------- */

/* One of the palette's fixed hues, for whatever the class is on to draw itself in: a section of the
   masthead, a tile, a provider. Set as --hue so a rule can mix it rather than only use it. */
.hue-green { --hue: var(--hue-green); }
.hue-blue { --hue: var(--hue-blue); }
.hue-teal { --hue: var(--hue-teal); }
.hue-amber { --hue: var(--hue-amber); }
.hue-plum { --hue: var(--hue-plum); }
.hue-rust { --hue: var(--hue-rust); }
.hue-slate { --hue: var(--hue-slate); }
.hue-brown { --hue: var(--hue-brown); }

.tab.chosen {
    box-shadow: inset 0 3px 0 var(--verdigris);
}

/* ---------- Going to another page. ---------- */

/* navigation.js marks the page while the next one is on its way: a bar along the top of the window,
   and the link that was clicked drawn as chosen, so a click is seen to have been heard at once. */
html.navigating,
html.navigating * {
    cursor: progress;
}

html.navigating body::before {
    content: "";
    position: fixed;
    inset: 0 0 auto;
    z-index: 1000;
    height: 3px;
    background: linear-gradient(90deg, transparent, var(--hue-teal), var(--hue-blue), var(--hue-plum), transparent) 0 0 / 40% 100% no-repeat;
    animation: navigating 1s ease-in-out infinite;
}

@keyframes navigating {
    from { background-position: -40% 0; }
    to { background-position: 140% 0; }
}

@media (prefers-reduced-motion: reduce) {
    html.navigating body::before {
        background: var(--hue-teal);
        animation: none;
    }
}

.tab.opening {
    color: var(--ink);
    font-weight: 600;
    opacity: 1;
    border-color: var(--rule);
    border-bottom-color: var(--paper);
    background: var(--paper);
    box-shadow: inset 0 3px 0 var(--verdigris);
}

.tab.chosen:has(~ .tab.opening),
.tab.opening ~ .tab.chosen {
    font-weight: 400;
    border-color: transparent;
    border-bottom-color: var(--rule);
    background: none;
    box-shadow: none;
}

.primary-nav a.opening,
.section-menu a.opening {
    color: var(--hue, var(--verdigris));
    background: color-mix(in srgb, var(--hue, var(--verdigris)) 18%, transparent);
    box-shadow: inset 0 -3px 0 var(--hue, var(--verdigris));
}

/* ---------- A project's own header. ---------- */

/* In the project's colour (ProjectLook): a band down the side, a wash that fades across, and a
   monogram, so the page says whose it is before the title is read. */
.project-head {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto auto;
    grid-template-areas:
        "mark text side settings"
        "nav  nav  nav  nav";
    align-items: start;
    gap: 0.75rem 1.25rem;
    margin: 0.35rem 0 1.5rem;
    padding: 1.25rem 1.5rem;
    background: linear-gradient(115deg, color-mix(in srgb, var(--hue) 15%, var(--surface)), var(--surface) 65%);
    border: 1px solid color-mix(in srgb, var(--hue) 28%, var(--rule));
    border-left: 5px solid var(--hue);
    border-radius: 8px;
}

.project-head > .project-monogram { grid-area: mark; }
.project-head > .project-head-text { grid-area: text; min-width: 0; }
.project-head > .project-head-side { grid-area: side; }
.project-head > .project-settings-button { grid-area: settings; margin: -0.35rem -0.6rem 0 0; }
.project-head > .project-head-side:empty { display: none; }

.project-monogram {
    display: grid;
    place-items: center;
    width: 3.5rem;
    height: 3.5rem;
    font-size: 1.35rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: var(--on-accent);
    background: var(--hue);
    border-radius: 12px;
    box-shadow: 0 3px 8px color-mix(in srgb, var(--hue) 35%, transparent);
}

.project-head h1 {
    margin: 0;
    color: var(--ink);
    overflow-wrap: anywhere;
}

.project-head h1::after {
    width: 2.5rem;
    background: var(--hue);
}

.project-facts {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem 0.75rem;
    margin: 0.6rem 0 0;
}

.project-facts .meta {
    margin: 0;
}

.badge.project-template {
    font-size: 0.78rem;
    color: var(--hue);
}

.project-head .description {
    max-width: 65ch;
    margin: 0.6rem 0 0;
    color: var(--ink);
}

/* A small square control holding only an icon, named for a screen reader by hidden text and for a
   pointer by its title. */
.icon-button {
    display: inline-grid;
    place-items: center;
    width: 2.25rem;
    height: 2.25rem;
    padding: 0;
    font: inherit;
    font-size: 1.1rem;
    color: var(--graphite);
    background: transparent;
    border: 1px solid transparent;
    border-radius: 6px;
    cursor: pointer;
}

.icon-button:hover,
.icon-button[aria-expanded="true"] {
    color: var(--ink);
    background: color-mix(in srgb, var(--hue, var(--verdigris)) 10%, transparent);
    border-color: color-mix(in srgb, var(--hue, var(--verdigris)) 30%, var(--rule));
}

/* The project's places: a row of quiet links under the name, across the whole card, set off by a
   hairline. Equal in weight, so none asks to be chosen first, and wrapping as more are added. */
.project-nav {
    grid-area: nav;
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 0.35rem;
    margin: 0.25rem -0.5rem 0;
    padding-top: 0.75rem;
    border-top: 1px solid color-mix(in srgb, var(--hue) 20%, var(--rule));
}

.project-nav-link {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.35rem 0.7rem;
    font-size: 0.93rem;
    color: var(--ink);
    text-decoration: none;
    border-radius: 999px;
    white-space: nowrap;
}

.project-nav-link .fa {
    color: var(--hue);
}

.project-nav-link:hover {
    background: color-mix(in srgb, var(--hue) 12%, transparent);
}

.icon-button:focus-visible,
.project-nav-link:focus-visible {
    outline: 2px solid var(--hue, var(--verdigris));
    outline-offset: 2px;
}

/* A removal offered quietly: in its warning colour, without the frame the everyday actions have. */
.button.quiet.danger {
    color: var(--iron);
}

.button.quiet.danger:hover {
    background: color-mix(in srgb, var(--iron) 8%, transparent);
    border-color: color-mix(in srgb, var(--iron) 45%, transparent);
}

/* Narrow: the actions go under the name rather than squeezing it. */
@media (max-width: 52rem) {
    .project-head {
        grid-template-columns: auto minmax(0, 1fr) auto;
        grid-template-areas:
            "mark text settings"
            "side side side"
            "nav  nav  nav";
        padding: 1rem;
    }

    .project-monogram {
        width: 2.75rem;
        height: 2.75rem;
        font-size: 1.1rem;
    }
}

/* ---------- A folder, drawn in its own colour. ---------- */

/* What can be brought in: one bar, in the folder's colour, with adding files as the main thing to
   do and looking again set apart at the end. */
.folder-toolbar .add-files {
    align-items: center;
    padding: 0.5rem;
    background: color-mix(in srgb, var(--hue, var(--verdigris)) 7%, var(--surface));
    border: 1px solid color-mix(in srgb, var(--hue, var(--verdigris)) 25%, var(--rule));
    border-radius: 8px;
}

.folder-toolbar .button:not(.primary):not(.quiet):hover {
    border-color: var(--hue, var(--verdigris));
    background: color-mix(in srgb, var(--hue, var(--verdigris)) 10%, var(--surface));
}

.folder-toolbar .button.primary {
    background: var(--hue, var(--verdigris));
    border-color: var(--hue, var(--verdigris));
}

.folder-toolbar .button.primary:hover {
    background: color-mix(in srgb, var(--hue, var(--verdigris)) 82%, var(--ink));
}

.folder-toolbar #refresh-documents {
    margin-left: auto;
}

/* A sign before each way in, drawn as text so it needs no image. */
#add-files::before,
#add-link::before,
#write-document::before,
#add-repository::before,
#refresh-documents::before {
    font-weight: 700;
    line-height: 1;
}

#add-files::before { content: "+"; font-size: 1.1em; }
#add-link::before { content: "\2197"; color: var(--hue, var(--verdigris)); }
#write-document::before { content: "\270E"; color: var(--hue, var(--verdigris)); }
#add-repository::before { content: "</>"; font-size: 0.8em; color: var(--hue, var(--verdigris)); }
#refresh-documents::before { content: "\21BB"; }

/* The folder's name, its mark drawn large beside it, over a wash of its colour at the top of the
   card. */
.folder-banner {
    margin: -1rem -1.25rem 1rem;
    padding: 1rem 1.25rem;
    background: linear-gradient(115deg, color-mix(in srgb, var(--hue, var(--verdigris)) 14%, var(--surface)), var(--surface) 70%);
    border-bottom: 1px solid color-mix(in srgb, var(--hue, var(--verdigris)) 22%, var(--rule));
    border-radius: 6px 6px 0 0;
    box-shadow: inset 0 4px 0 var(--hue, var(--verdigris));
}

/* Nothing under it in the card: the banner is the whole card, not a band with an empty strip below. */
.folder-banner:last-child {
    margin-bottom: -1rem;
    border-bottom: 0;
    border-radius: 6px;
}

.folder-banner .folder-head {
    gap: 0.5rem 0.85rem;
}

.folder-banner h2 {
    font-size: 1.35rem;
    color: var(--ink);
}

.folder-tile {
    display: grid;
    place-items: center;
    width: 2.6rem;
    height: 2.6rem;
    background: color-mix(in srgb, var(--hue, var(--verdigris)) 16%, var(--surface));
    border: 1px solid color-mix(in srgb, var(--hue, var(--verdigris)) 35%, transparent);
    border-radius: 10px;
}

/* The tree's own mark, twice the size: drawn in rem, so scaled rather than resized. */
.folder-tile .folder-mark {
    transform: scale(1.9);
}

.folder-banner .folder-purpose {
    margin: 0.5rem 0 0 3.45rem;
    color: var(--graphite);
}

.folder-banner .more {
    background: var(--surface);
}

/* What can be done to the folder, when asked for: the lower part of the same card, under the
   banner, rather than a grey box inside it. Its facts as tiles, the actions under them, and the
   removal apart at the end. */
.folder-tray {
    margin: 0 0 1rem;
    padding: 1rem 1.25rem;
    background: color-mix(in srgb, var(--hue, var(--verdigris)) 4%, var(--surface));
    border: 1px solid var(--rule);
    border-radius: 6px;
}

/* Straight under the banner and last in the card: one card, with the tray as its foot. */
.folder-banner:has(+ .folder-tray) {
    margin-bottom: 0;
}

.folder-tray:last-child {
    margin: 0 -1.25rem -1rem;
    border: 0;
    border-radius: 0 0 6px 6px;
}

.folder-facts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
    gap: 0.75rem;
    margin: 0;
}

.folder-fact {
    --fact-hue: var(--hue, var(--verdigris));

    display: grid;
    align-content: start;
    gap: 0.3rem;
    padding: 0.7rem 0.9rem;
    background: color-mix(in srgb, var(--fact-hue) 7%, var(--surface));
    border: 1px solid color-mix(in srgb, var(--fact-hue) 25%, var(--rule));
    border-left: 3px solid var(--fact-hue);
    border-radius: 6px;
}

/* Sensitivity in the colour of the label, the same colour its badge is drawn in everywhere. */
.folder-fact.label-public { --fact-hue: var(--hue-green); }
.folder-fact.label-internal { --fact-hue: var(--hue-blue); }
.folder-fact.label-personal { --fact-hue: var(--label-personal); }
.folder-fact.label-specialcategory { --fact-hue: var(--iron); }

.folder-fact dt {
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--graphite);
}

.folder-fact dd {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.25rem 0.6rem;
    margin: 0;
}

.folder-fact .badge {
    font-size: 0.8rem;
}

.fact-number {
    font-size: 1.5rem;
    font-weight: 600;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
    color: var(--fact-hue);
}

.fact-note {
    flex-basis: 100%;
    font-size: 0.85rem;
    color: var(--graphite);
}

/* Where a sensitive folder's documents may go, and the switch for it, inside the Sensitivity tile. */
.folder-fact .hosted-allowed {
    color: var(--ink);
}

/* The reason on a line of its own, as the words of whoever gave it. */
.hosted-reason {
    display: block;
    margin-top: 0.3rem;
    padding-left: 0.6rem;
    font-style: italic;
    border-left: 2px solid var(--fact-hue);
}

.folder-fact dd > .button.quiet {
    padding-inline: 0;
    color: var(--fact-hue);
    font-weight: 600;
}

.folder-fact dd > .button.quiet:hover {
    border-color: transparent;
    text-decoration: underline;
}

.folder-tray .actions {
    margin-top: 1rem;
}

.folder-tray .actions .button:not(.danger):hover {
    border-color: var(--hue, var(--verdigris));
    background: color-mix(in srgb, var(--hue, var(--verdigris)) 10%, var(--surface));
}

.folder-tray #delete-folder {
    margin-left: auto;
}

/* A sign before each action, as the ways of bringing things in have. */
#rename-folder::before { content: "\270E"; color: var(--hue, var(--verdigris)); }
#move-folder::before { content: "\2192"; color: var(--hue, var(--verdigris)); }
#folder-appearance::before { content: "\25D0"; color: var(--hue, var(--verdigris)); }
#mark-human-subject::before { content: "\2691"; color: var(--iron); }
#delete-folder::before { content: "\2715"; }

@media (max-width: 40rem) {
    .folder-banner .folder-purpose {
        margin-left: 0;
    }
}

/* ---------- Projects in the list, drawn as their own pages draw them. ---------- */

.project-list a {
    grid-template-columns: auto minmax(0, 1fr);
    align-items: start;
    gap: 1rem;
    background: linear-gradient(100deg, color-mix(in srgb, var(--hue) 9%, var(--surface)), var(--surface) 55%);
    border-left: 4px solid var(--hue);
}

.project-list a:hover {
    border-color: var(--hue);
    background: linear-gradient(100deg, color-mix(in srgb, var(--hue) 16%, var(--surface)), var(--surface) 70%);
}

.project-list .project-monogram {
    width: 2.75rem;
    height: 2.75rem;
    font-size: 1.05rem;
    border-radius: 10px;
}

.project-card {
    display: grid;
    gap: 0.1rem;
    min-width: 0;
}

.project-list .project-name {
    font-weight: 600;
    color: var(--ink);
}

.project-list .tally .count {
    padding: 0 0.45rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--hue) 12%, var(--paper-deep));
}

/* ---------- A job switched off by a document's label (§24.3). ---------- */

.notice.sensitivity-note {
    display: grid;
    gap: 0.2rem;
    margin: 0.75rem 0;
    background: color-mix(in srgb, var(--iron) 8%, var(--surface));
    border-color: var(--iron);
}

/* ---------- A document's own header. ---------- */

/* Drawn as a project's is: a card in the colour of the folder the document is filed in, with what
   kind of thing it is as its tile, so it reads as belonging where it belongs. A document at the top
   of a project, in no folder, takes the accent. */
.document-head {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: start;
    gap: 0.75rem 1.25rem;
    margin: 0.35rem 0 1.25rem;
    padding: 1.25rem 1.5rem;
    background: linear-gradient(115deg, color-mix(in srgb, var(--hue, var(--verdigris)) 13%, var(--surface)), var(--surface) 65%);
    border: 1px solid color-mix(in srgb, var(--hue, var(--verdigris)) 28%, var(--rule));
    border-left: 5px solid var(--hue, var(--verdigris));
    border-radius: 8px;
}

/* The kind, in its own colour, drawn large: the chip from the list of documents, as a tile. */
.document-tile.kind-chip {
    width: 3.5rem;
    height: 3.5rem;
    min-width: 0;
    padding: 0;
    font-size: 0.85rem;
    letter-spacing: 0.06em;
    color: var(--on-accent);
    background: var(--document-colour);
    border: 0;
    border-radius: 12px;
    box-shadow: 0 3px 8px color-mix(in srgb, var(--document-colour) 35%, transparent);
}

.document-head h1 {
    margin: 0;
    color: var(--ink);
    overflow-wrap: anywhere;
}

.document-head h1::after {
    width: 2.5rem;
    background: var(--hue, var(--verdigris));
}

.document-head .document-facts {
    margin: 0.6rem 0 0;
}

.document-head .document-facts .meta {
    margin: 0;
}

.document-head .tags {
    margin: 0.5rem 0 0;
}

.document-head-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 0.5rem;
    max-width: 30rem;
}

.document-head .button.primary {
    background: var(--hue, var(--verdigris));
    border-color: var(--hue, var(--verdigris));
}

.document-head .button.primary:hover {
    background: color-mix(in srgb, var(--hue, var(--verdigris)) 82%, var(--ink));
}

.document-head .button:not(.primary):not(:disabled):hover {
    border-color: var(--hue, var(--verdigris));
    background: color-mix(in srgb, var(--hue, var(--verdigris)) 10%, var(--surface));
}

/* Narrow: the actions go under the title rather than squeezing it. */
@media (max-width: 60rem) {
    .document-head {
        grid-template-columns: auto minmax(0, 1fr);
        padding: 1rem;
    }

    .document-head-actions {
        grid-column: 1 / -1;
        justify-content: flex-start;
        max-width: none;
    }

    .document-tile.kind-chip {
        width: 2.75rem;
        height: 2.75rem;
        font-size: 0.75rem;
    }
}

/* ---------- A summary somebody has rewritten (§13.2). ---------- */

/* Their words now, so drawn in the colour of a person's own rather than the model's accent, with the
   model's still a click away. */
.summary.edited {
    border-left-color: var(--hue-plum);
}

.summary .section-head .button.quiet {
    margin-left: auto;
}

.summary textarea {
    margin-top: 0.6rem;
    line-height: 1.55;
}

.summary-original {
    margin: 0.4rem 0 0.6rem;
    padding: 0.5rem 0.75rem;
    background: var(--surface);
    border: 1px dashed var(--rule);
    border-radius: 4px;
}

.summary-original > summary {
    cursor: pointer;
    font-size: 0.9rem;
    color: var(--graphite);
}

.summary-original .summary-text {
    margin-bottom: 0;
    color: var(--graphite);
}

.summary .meta .button.quiet {
    padding: 0;
    font-size: inherit;
    color: var(--verdigris);
    text-decoration: underline;
}

/* A call still out: how long so far, and under it how long the same job usually takes that model. */
.took-so-far {
    display: block;
    color: var(--verdigris);
    white-space: nowrap;
}

.took-usually {
    display: block;
    font-size: 0.8rem;
    white-space: nowrap;
}

/* ---------- Projects on the page the workbench opens on. ---------- */

/* Each with its monogram and in its colour, as in the list of projects and on its own page. */
.dashboard-projects-list a {
    grid-template-columns: auto minmax(0, 1fr);
    align-items: start;
    column-gap: 0.85rem;
}

.dashboard-projects-list a:hover {
    background: color-mix(in srgb, var(--hue, var(--verdigris)) 9%, var(--surface));
}

.dashboard-projects-list .project-monogram {
    width: 2.4rem;
    height: 2.4rem;
    font-size: 0.95rem;
    border-radius: 9px;
}

.dashboard-projects-list .project-name {
    color: var(--ink);
}

.dashboard-projects-list .count {
    background: color-mix(in srgb, var(--hue, var(--verdigris)) 12%, var(--paper-deep));
}

/* Raising a folder's label, from the Sensitivity tile. Quieter than the switch for hosted models beside
   it: raising a label is the rarer decision, and the tile's hue belongs to what the label does. */
.folder-fact dd > #raise-label {
    font-weight: 400;
    color: var(--graphite);
}

.folder-fact dd > #raise-label:hover {
    color: var(--ink);
}

/* ---------- A summary's earlier edits (§13.2). ---------- */

/* Kept for good, shown folded away under the summary, as the model's own
   words are. Newest first, each with when it was made and how much of the model's words it changed. */
.summary-history ol {
    list-style: none;
    margin: 0.5rem 0 0;
    padding: 0;
}

.summary-history li {
    padding: 0.4rem 0;
    border-top: 1px solid color-mix(in srgb, var(--rule) 60%, transparent);
}

.summary-history li:first-child {
    border-top: none;
}

.summary-history .meta {
    display: block;
    font-size: 0.8rem;
    color: var(--graphite);
}

.summary-history .summary-text {
    margin: 0.2rem 0;
}

/* Two choices spelled out under a switch: what off does, what on does. */
.setting-choices {
    max-width: 65ch;
    margin: 0.5rem 0 0;
    padding-left: 1.25rem;
}

.setting-choices li + li {
    margin-top: 0.4rem;
}

/* Writing code (§18): the language is chosen like any other field, labelled as they are, and one this
   computer cannot check is shown with why rather than hidden. */
.code-form .choices {
    margin: 0 0 1rem;
}

.code-form .choices legend {
    margin-bottom: 0.35rem;
    font-size: 0.9rem;
    font-weight: 600;
}

.choices .unavailable {
    color: var(--graphite);
}

.choices .why-not {
    display: block;
    margin-left: 1.6rem;
    font-size: 0.85rem;
}

/* One attempt, stage by stage. Passed and failed are coloured apart; a stage not reached, or not
   run because running code is off, is drawn dashed, because it is neither. */
.code-attempt {
    margin: 0 0 1rem;
    padding: 0.75rem 1rem;
    border: 1px solid var(--rule);
    border-radius: 8px;
    background: var(--surface);
}

.code-attempt h3 {
    margin: 0 0 0.5rem;
}

.stages {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin: 0 0 0.5rem;
    padding: 0;
    list-style: none;
}

.stage {
    display: inline-flex;
    align-items: baseline;
    gap: 0.35rem;
    padding: 0.15rem 0.6rem;
    border: 1px solid var(--rule);
    border-radius: 999px;
    font-size: 0.85rem;
}

.stage-name {
    font-weight: 600;
}

.stage.passed {
    color: var(--verdigris);
    border-color: var(--verdigris);
    background: color-mix(in srgb, var(--verdigris) 8%, var(--surface));
}

.stage.failed {
    color: var(--iron);
    border-color: var(--iron);
    background: color-mix(in srgb, var(--iron) 8%, var(--surface));
}

.stage.declined,
.stage.not-reached {
    color: var(--graphite);
    border-style: dashed;
}

.stage-details,
.code-attempt details ul {
    margin: 0.25rem 0 0.5rem;
    padding-left: 1.25rem;
    font-size: 0.9rem;
}

.code-attempt details summary,
.code-file summary {
    cursor: pointer;
}

.diagnostics li.error {
    color: var(--iron);
}

/* The rule, where, and what was said, kept apart: run together they read as one word. */
.code-attempt details li .rule,
.code-attempt details li .where {
    margin-right: 0.5em;
}

.code-attempt details li .where {
    color: var(--graphite);
}

/* A summary clicked open is not a field being typed in: the ring is for the keyboard. */
.code-attempt details summary:focus:not(:focus-visible),
.code-file summary:focus:not(:focus-visible) {
    outline: none;
}

.code-attempt .toolchain {
    margin: 0.25rem 0 0;
}

/* What can be done with the code it ended with, beside its heading. */
.code-ended-with {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 1rem;
    margin: 1.5rem 0 0.5rem;
}

.code-ended-with h3 {
    margin: 0;
}

.code-ended-with .actions {
    margin: 0;
}

.code-ended-with .notice {
    flex-basis: 100%;
    margin: 0;
}

.code-file .download-file {
    display: inline-block;
    margin: 0.5rem 0 0;
    font-size: 0.85rem;
}

.code-file pre {
    max-height: 24rem;
    margin: 0.5rem 0 1rem;
    padding: 0.75rem;
    overflow: auto;
    border-radius: 6px;
    background: var(--paper-deep);
    font-size: 0.85rem;
}

/* A folder read as code (§18), laid out as a repository page is: the way here, what the run made of
   it, folders and files in one list, one file open, and its README beneath. */
.link-button {
    padding: 0;
    border: 0;
    background: none;
    color: var(--verdigris);
    font: inherit;
    text-align: left;
    cursor: pointer;
}

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

/* One column, never wider than the room: left to size itself, the column grew to its widest line and
   carried the notices and the list of files past the edge of the window. */
.code-folder {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0.75rem;
}

.code-folder-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem 1rem;
}

.code-folder-head .actions {
    margin: 0;
}

.code-trail {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.35rem;
    font-size: 1.05rem;
}

.code-trail-sep {
    color: var(--graphite);
}

.code-provenance {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem 0.9rem;
    margin: 0;
    padding: 0.6rem 0.9rem;
    border: 1px solid var(--rule);
    border-radius: 8px;
    background: var(--paper-deep);
}

.code-files {
    width: 100%;
    border: 1px solid var(--rule);
    border-radius: 8px;
    border-collapse: separate;
    border-spacing: 0;
    overflow: hidden;
}

.code-files td {
    padding: 0.5rem 0.9rem;
    border-top: 1px solid var(--rule);
    vertical-align: middle;
}

.code-files tr:first-child td {
    border-top: 0;
}

.code-files tr:hover td,
.code-files tr.open td {
    background: color-mix(in srgb, var(--verdigris) 7%, transparent);
}

.code-files .code-name {
    display: flex;
    align-items: center;
    gap: 0.55rem;
}

.code-files .code-what,
.code-files .code-size,
.code-files .code-at {
    width: 1%;
    white-space: nowrap;
    color: var(--graphite);
    font-size: 0.9rem;
}

.code-files .code-size {
    text-align: right;
}

/* A folder with its tab, and a page with its corner turned, drawn as shapes and filled with the
   palette's colours, so they read in light and dark alike. Both take the same square, so every name
   in the list starts at the same place. */
.code-icon {
    display: inline-block;
    flex: none;
    width: 1.15rem;
    height: 1.15rem;
    -webkit-mask: var(--code-icon) center / contain no-repeat;
    mask: var(--code-icon) center / contain no-repeat;
}

.code-icon.folder {
    --code-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M1.5 3.5A1.5 1.5 0 0 1 3 2h3.2c.4 0 .78.16 1.06.44L8.3 3.5H13A1.5 1.5 0 0 1 14.5 5v7.5A1.5 1.5 0 0 1 13 14H3a1.5 1.5 0 0 1-1.5-1.5z'/%3E%3C/svg%3E");
    background: var(--verdigris);
}

.code-icon.file {
    --code-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M4 1h5.6L13 4.4V13.5A1.5 1.5 0 0 1 11.5 15h-7A1.5 1.5 0 0 1 3 13.5v-11A1.5 1.5 0 0 1 4 1zm0 1.2a.3.3 0 0 0-.3.3v11a.3.3 0 0 0 .3.3h7.5a.3.3 0 0 0 .3-.3V5H9.3a.8.8 0 0 1-.8-.8V2.2zm5.7.5v1.7h1.7z'/%3E%3C/svg%3E");
    background: var(--graphite);
}

.code-viewer {
    border: 1px solid var(--rule);
    border-radius: 8px;
    overflow: hidden;
}

.code-viewer-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 1rem;
    padding: 0.5rem 0.9rem;
    border-bottom: 1px solid var(--rule);
    background: var(--paper-deep);
}

.code-viewer-head .actions {
    margin: 0 0 0 auto;
}

.code-viewer .notice {
    margin: 0.5rem 0.9rem;
}

.code-lines {
    position: relative;
    display: flex;
    max-height: 36rem;
    overflow: auto;
    background: var(--surface);
    font-size: 0.85rem;
    line-height: 1.5;
}

.code-lines pre {
    margin: 0;
    padding: 0.75rem 0.9rem;
    background: none;
}

.code-gutter {
    position: sticky;
    left: 0;
    flex: none;
    min-width: 3rem;
    border-right: 1px solid var(--rule);
    background: var(--surface);
    color: var(--graphite);
    text-align: right;
    user-select: none;
}

.code-body {
    flex: 1;
}

/* As wide as the list above it, as a repository's README is. */
.code-readme.rendered {
    max-width: none;
    padding: 0.9rem 1.2rem;
    border: 1px solid var(--rule);
    border-radius: 8px;
}

/* Its lines run the width of the box, as a repository's README does: the reading measure the rest of
   the workbench gives prose left a README beside a wide file list looking half empty. Its first two
   levels of heading are ruled off beneath, as a README's are where it is usually read. */
.code-readme :is(p, li, blockquote, dd, .code-readme-name) {
    max-width: none;
}

.code-readme :is(h1, h2) {
    padding-bottom: 0.3em;
    border-bottom: 1px solid var(--rule);
}

.code-readme :is(h1, h2)::after {
    display: none;
}

.code-readme-name {
    margin: -0.9rem -1.2rem 0.75rem;
    padding: 0.5rem 1.2rem;
    border-bottom: 1px solid var(--rule);
    background: var(--paper-deep);
    font-weight: 600;
}

/* highlight.js, coloured from the palette rather than one of its own themes, so code reads right in
   light and in dark alike. */
.hljs-comment,
.hljs-quote {
    color: var(--graphite);
    font-style: italic;
}

.hljs-keyword,
.hljs-selector-tag,
.hljs-literal,
.hljs-built_in {
    color: var(--verdigris);
    font-weight: 600;
}

.hljs-string,
.hljs-regexp,
.hljs-symbol {
    color: var(--hue-amber);
}

.hljs-number,
.hljs-variable,
.hljs-template-variable {
    color: var(--hue-plum);
}

.hljs-title,
.hljs-title.function_,
.hljs-title.class_,
.hljs-section {
    color: var(--hue-blue);
    font-weight: 600;
}

.hljs-type,
.hljs-attr,
.hljs-attribute,
.hljs-params {
    color: var(--hue-teal);
}

.hljs-meta,
.hljs-doctag {
    color: var(--hue-rust);
}

/* A cell of a code-writing experiment: what the checks said, then how many attempts and what it cost.
   The chip says the result; the words beside it are the link's. */
.code-cell {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem 0.5rem;
    text-decoration: none;
}

.code-cell .meta {
    color: var(--verdigris);
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* The line a search led to, marked across the whole width behind the code. */
.code-mark {
    position: absolute;
    left: 0;
    right: 0;
    background: color-mix(in srgb, var(--hue-amber) 18%, transparent);
    pointer-events: none;
}

/* Whether a repository's code is searched, and the switch, on one line where there is room. */
/* The choice under what it is about, at the start of the line, as the update check's buttons sit: beside
   text held to a reading width, it floated in the middle of the page. */
.repository-search {
    display: grid;
    justify-items: start;
    gap: 0.5rem;
}

.repository-search .hint {
    margin: 0;
}

/* Sections of the papers written here that a search found: the paper and its section, then the words around the match. */
.written-results {
    margin: 1rem 0 1.5rem;
}

.written-found {
    display: grid;
    gap: 0.75rem;
    margin: 0 0 0.5rem;
    padding: 0;
    list-style: none;
}

.written-hit {
    border: 1px solid var(--rule);
    border-radius: 8px;
    overflow: hidden;
}

.written-hit-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.25rem 0.75rem;
    padding: 0.5rem 0.9rem;
    background: var(--paper-deep);
}

.written-hit-title {
    font-weight: 600;
}

.written-hit-snippet {
    margin: 0;
    padding: 0.5rem 0.9rem;
}

/* Code found by a search, apart from the papers: what it is and where, then the lines that matched. */
.code-results {
    margin: 1rem 0 1.5rem;
}

.code-found {
    display: grid;
    gap: 0.75rem;
    margin: 0 0 0.5rem;
    padding: 0;
    list-style: none;
}

.code-hit {
    border: 1px solid var(--rule);
    border-radius: 8px;
    overflow: hidden;
}

.code-hit-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.25rem 0.75rem;
    padding: 0.5rem 0.9rem;
    background: var(--paper-deep);
}

.code-hit-title {
    font-family: var(--font-mono, ui-monospace, monospace);
    font-weight: 600;
}

.code-hit-lines {
    margin: 0;
    padding: 0.5rem 0.9rem;
    overflow-x: auto;
    background: var(--surface);
    font-size: 0.85rem;
    line-height: 1.5;
}

.code-hit-number {
    display: inline-block;
    min-width: 3rem;
    margin-right: 0.75rem;
    color: var(--graphite);
    text-align: right;
    user-select: none;
}

/* Citations beside the section being written: each as it will read, and a way to find one to cite. */
.citing {
    display: grid;
    gap: 0.5rem;
    margin-top: 1rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--rule);
}

.citing h3 {
    margin: 0;
    font-size: 1rem;
}

.cited-here,
.cite-choices {
    display: grid;
    gap: 0.35rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.cited-here li {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.25rem 0.5rem;
}

.rename-section {
    display: flex;
    flex: 1;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
}

.rename-section input {
    flex: 1;
    min-width: 0;
    font-size: 1.1rem;
}

.section-tools {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

/* Beside the word count: saved, saving, or not yet. Quiet unless a save failed. */
.section-tools .save-state:empty {
    display: none;
}

.section-tools .save-state.failed {
    color: var(--iron);
}

/* Opened by Cite above the editor: a reference, or a note made while reading, put in at the cursor.
   One line to a choice, and the page box and buttons only on the one chosen, so it reads as a list.
   Held to a height of its own, so a long library scrolls here rather than pushing the editor away. */
.cite-panel {
    margin-bottom: 0.75rem;
    border: 1px solid var(--rule);
    border-radius: 6px;
    background: var(--surface);
    box-shadow: 0 2px 8px var(--scroll-shade);
}

.cite-panel-head {
    display: flex;
    align-items: flex-end;
    gap: 0.75rem;
    padding: 0.5rem 0.5rem 0 0.75rem;
    border-bottom: 1px solid var(--rule);
}

.cite-panel-head .tab-strip {
    flex: none;
    margin: 0;
    border-bottom: 0;
}

/* The search and the close button on one line, centred on each other. */
.cite-find {
    display: flex;
    flex: 1;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.4rem;
}

.cite-panel-head input[type="search"] {
    flex: 1;
    min-width: 8rem;
    padding: 0.3rem 0.5rem;
}

.cite-panel-head .close-cite {
    padding: 0.1rem 0.55rem;
    font-size: 1.25rem;
    line-height: 1;
}

.cite-panel .tab-panel {
    max-height: 16rem;
    overflow-y: auto;
}

.cite-panel .hint {
    margin: 0;
    padding: 0.75rem;
}

.cite-choices,
.cite-notes {
    display: block;
    margin: 0;
    padding: 0;
    list-style: none;
}

.cite-choices li,
.cite-notes li {
    border-bottom: 1px solid var(--rule);
}

.cite-choices li:last-child,
.cite-notes li:last-child {
    border-bottom: 0;
}

.cite-choices li.picked,
.cite-notes li.picked {
    background: var(--ready-wash);
}

/* The whole line is the choice: a button, so the keyboard reaches it as readily as the mouse. */
.cite-row {
    display: flex;
    align-items: baseline;
    gap: 0.6rem;
    width: 100%;
    padding: 0.4rem 0.75rem;
    font: inherit;
    color: var(--ink);
    text-align: left;
    background: none;
    border: 0;
    cursor: pointer;
}

.cite-row:hover {
    background: var(--paper-deep);
}

.cite-names {
    flex: none;
    font-weight: 600;
}

.cite-title,
.cite-quote {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cite-row code {
    flex: none;
    color: var(--graphite);
    font-size: 0.8rem;
}

/* A chosen note shows the whole passage rather than its first line. */
.cite-notes li.picked .cite-quote {
    white-space: normal;
}

.cite-how {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    padding: 0 0.75rem 0.5rem;
}

.cite-how label {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    color: var(--graphite);
    font-size: 0.9rem;
}

/* As specific as the rule that makes every text box the width of its column. */
.cite-how input[type="text"].cite-page {
    width: 7rem;
    padding: 0.3rem 0.5rem;
}

.cite-notes .note-comment {
    margin: 0;
    padding: 0 0.75rem 0.4rem;
    color: var(--graphite);
    font-size: 0.9rem;
}

.cited-here li.unresolved code {
    color: var(--iron);
}


/* People (§7.8): the address book, one person to a row - who they are on the left, what can be done
   with them on the right, as a paper's row has it. */
.people-search {
    max-width: 32rem;
    margin: 1rem 0 0;
}

.people {
    display: grid;
    gap: 0.75rem;
    margin: 1rem 0 0;
    padding: 0;
    list-style: none;
}

.person {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.9rem 1.1rem;
    background: var(--surface);
    border: 1px solid var(--rule);
    border-radius: 6px;
}

.person-main {
    flex: 1;
    min-width: 0;
}

.person-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.5rem;
    margin: 0 0 0.25rem;
}

.person-name {
    font-size: 1.05rem;
    font-weight: 600;
}

.person .meta {
    margin: 0 0 0.2rem;
    overflow-wrap: anywhere;
}

/* Somebody who left is kept, and shown quieter, with the date they left. */
.person.unsubscribed,
.person.withdrawn {
    background: var(--paper);
}

.person-status {
    color: var(--iron);
    border: 1px solid var(--iron);
}

.person-actions {
    flex-wrap: wrap;
    justify-content: flex-end;
    margin: 0;
}

.agreement {
    margin: 1rem 0;
    padding: 0.75rem 1rem;
    border: 1px solid var(--rule);
    border-radius: 6px;
}

.agreement legend {
    padding: 0 0.35rem;
    font-weight: 600;
}

.purposes {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 1.25rem;
}

@media (max-width: 640px) {
    .person {
        flex-direction: column;
        align-items: stretch;
    }

    .person-actions {
        justify-content: flex-start;
    }
}

/* A project's lists of people, in the panel beside its papers and folders. */
.people-place .place-mark {
    background: var(--hue-brown);
}

.contact-lists {
    display: grid;
    gap: 0.4rem;
    margin: 1rem 0 0;
    padding: 0;
    list-style: none;
}

.contact-list {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.25rem 0.75rem;
}

.contact-list .open-list {
    font-weight: 600;
}

.contact-list-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.contact-list-head h3 {
    margin: 0;
}

.add-to-list {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 0.75rem;
    margin: 1rem 0;
}

.add-to-list .field {
    flex: 1;
    min-width: 14rem;
    margin: 0;
}

/* Who a mailing to the list would reach, and who it would not, before anything is sent. */
.badge.can-send {
    color: var(--ready-ink);
    background: var(--ready-wash);
    border: 1px solid var(--ready-rule);
}

.badge.cannot-send {
    color: var(--iron);
    border: 1px solid var(--iron);
}

.person.unreachable {
    background: var(--paper);
}

/* Sharing a version: to one person, or to a list with a message each. */
.share-to {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 1.5rem;
    margin: 0 0 0.75rem;
}

.send-reach {
    margin: 0.75rem 0;
}

.send-reach p {
    margin: 0 0 0.35rem;
}

.deliveries {
    margin: 0.35rem 0 0.5rem;
    padding-left: 1.2rem;
}

.deliveries li {
    margin-bottom: 0.3rem;
}

.deliveries .delivery-name {
    font-weight: 600;
}

.deliveries .open-draft {
    margin-left: 0.5rem;
}

/* Sync (§11): the code to confirm in the cloud, the projects that sync, and changes made in both places. */
.pairing-code {
    font-size: 1.6rem;
    letter-spacing: .15em;
    font-variant-numeric: tabular-nums;
}

.synced-projects {
    list-style: none;
    padding: 0;
    display: grid;
    gap: .5rem;
}

.synced-project {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .4rem .8rem;
}

.synced-project strong {
    min-width: 12rem;
}

.sync-conflict {
    border-top: 1px solid var(--rule);
    padding-top: .6rem;
    margin-top: .8rem;
}

.conflict-sides {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
    gap: 1rem;
}

.conflict-text {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

/* Whether a repository has moved on since its commit (§9.9), under what it is and where it came from. */
.repository-update {
    margin: 0.5rem 0 1rem;
}

.repository-update p {
    margin: 0 0 0.5rem;
    overflow-wrap: anywhere;
}

.repository-update .notice.importing {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
}

/* Which version of a repository is the newest, in the folder list and in the repository's own view. */
.badge.version-latest {
    color: var(--verdigris);
    border-color: var(--verdigris);
}

.badge.version-older {
    color: var(--graphite);
    border-color: var(--rule);
}

.repository-update-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

/* One project's sync, in its header (§11): under the project's actions, in a card of sky and cloud. */
.project-head-side {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.75rem;
}

.project-sync {
    --cloud: rgb(255 255 255 / 0.8);
    position: relative;
    width: min(100%, 24rem);
    padding: 0.7rem 0.9rem 0.8rem;
    color: var(--ink);
    background-color: color-mix(in srgb, var(--hue-blue) 12%, var(--surface));
    background-image:
        url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='130'%20height='64'%20viewBox='0%200%20130%2064'%3E%3Cg%20opacity='0.7'%20fill='white'%3E%3Ccircle%20cx='34'%20cy='38'%20r='18'/%3E%3Ccircle%20cx='60'%20cy='26'%20r='24'/%3E%3Ccircle%20cx='90'%20cy='36'%20r='18'/%3E%3Crect%20x='16'%20y='36'%20width='94'%20height='22'%20rx='11'/%3E%3C/g%3E%3C/svg%3E"),
        url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='70'%20height='30'%20viewBox='0%200%2070%2030'%3E%3Cg%20opacity='0.6'%20fill='white'%3E%3Ccircle%20cx='20'%20cy='17'%20r='9'/%3E%3Ccircle%20cx='34'%20cy='12'%20r='11'/%3E%3Ccircle%20cx='49'%20cy='18'%20r='8'/%3E%3Crect%20x='11'%20y='16'%20width='46'%20height='11'%20rx='5.5'/%3E%3C/g%3E%3C/svg%3E"),
        linear-gradient(170deg, color-mix(in srgb, var(--hue-blue) 26%, var(--surface)), color-mix(in srgb, var(--hue-blue) 10%, var(--surface)));
    background-repeat: no-repeat;

    /* A cloud drifting in at the top right, above the controls; a smaller one low on the left, under the words. */
    background-position: right 5.5rem top -0.9rem, left 42% bottom -0.5rem, 0 0;
    border: 1px solid color-mix(in srgb, var(--hue-blue) 30%, var(--rule));
    border-radius: 10px;
    overflow: hidden;
}

.project-sync-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem 0.6rem;
    margin-bottom: 0.5rem;
}

.project-sync-icon {
    color: var(--hue-blue);
    flex: none;
}

.project-sync-title {
    font-weight: 600;
    color: color-mix(in srgb, var(--hue-blue) 70%, var(--ink));
}

.project-sync-head .meta {
    margin-left: auto;
}

.project-sync-controls {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.project-sync-controls select {
    flex: 1 1 11rem;
    min-width: 0;
}

.project-sync .button {
    background: var(--surface);
}

.project-sync-line {
    margin: 0.5rem 0 0;
    overflow-wrap: anywhere;
}

.project-sync-progress {
    font-variant-numeric: tabular-nums;
    color: color-mix(in srgb, var(--hue-blue) 75%, var(--ink));
}

/* While it runs, the cloud drifts - unless somebody asked for things to keep still. */
.project-sync.syncing .project-sync-icon {
    animation: project-sync-drift 1.6s ease-in-out infinite alternate;
}

@keyframes project-sync-drift {
    from { transform: translateX(-2px); }
    to { transform: translateX(2px); }
}

@media (prefers-reduced-motion: reduce) {
    .project-sync.syncing .project-sync-icon {
        animation: none;
    }
}

/* In the dark, the sky deepens and the clouds thin, so the card reads as the same place at night. */
:root[data-theme="dark"] .project-sync {
    background-image:
        url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='130'%20height='64'%20viewBox='0%200%20130%2064'%3E%3Cg%20opacity='0.08'%20fill='white'%3E%3Ccircle%20cx='34'%20cy='38'%20r='18'/%3E%3Ccircle%20cx='60'%20cy='26'%20r='24'/%3E%3Ccircle%20cx='90'%20cy='36'%20r='18'/%3E%3Crect%20x='16'%20y='36'%20width='94'%20height='22'%20rx='11'/%3E%3C/g%3E%3C/svg%3E"),
        url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='70'%20height='30'%20viewBox='0%200%2070%2030'%3E%3Cg%20opacity='0.06'%20fill='white'%3E%3Ccircle%20cx='20'%20cy='17'%20r='9'/%3E%3Ccircle%20cx='34'%20cy='12'%20r='11'/%3E%3Ccircle%20cx='49'%20cy='18'%20r='8'/%3E%3Crect%20x='11'%20y='16'%20width='46'%20height='11'%20rx='5.5'/%3E%3C/g%3E%3C/svg%3E"),
        linear-gradient(170deg, color-mix(in srgb, var(--hue-blue) 30%, var(--surface)), color-mix(in srgb, var(--hue-blue) 12%, var(--surface)));
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .project-sync {
        background-image:
            url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='130'%20height='64'%20viewBox='0%200%20130%2064'%3E%3Cg%20opacity='0.08'%20fill='white'%3E%3Ccircle%20cx='34'%20cy='38'%20r='18'/%3E%3Ccircle%20cx='60'%20cy='26'%20r='24'/%3E%3Ccircle%20cx='90'%20cy='36'%20r='18'/%3E%3Crect%20x='16'%20y='36'%20width='94'%20height='22'%20rx='11'/%3E%3C/g%3E%3C/svg%3E"),
            url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='70'%20height='30'%20viewBox='0%200%2070%2030'%3E%3Cg%20opacity='0.06'%20fill='white'%3E%3Ccircle%20cx='20'%20cy='17'%20r='9'/%3E%3Ccircle%20cx='34'%20cy='12'%20r='11'/%3E%3Ccircle%20cx='49'%20cy='18'%20r='8'/%3E%3Crect%20x='11'%20y='16'%20width='46'%20height='11'%20rx='5.5'/%3E%3C/g%3E%3C/svg%3E"),
            linear-gradient(170deg, color-mix(in srgb, var(--hue-blue) 30%, var(--surface)), color-mix(in srgb, var(--hue-blue) 12%, var(--surface)));
    }
}

/* In the project's settings the card takes the drawer's width, between the groups around it. */
.settings-drawer .project-sync {
    width: auto;
    margin: 0.85rem 0;
}

/* How the project's sync stands, in its header: one quiet line that opens the settings. Blue like the
   card it stands for; amber when something waits for the reader. */
.project-sync-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.25rem 0.65rem;
    font: inherit;
    font-size: 0.875rem;
    color: color-mix(in srgb, var(--hue-blue) 70%, var(--ink));
    background: color-mix(in srgb, var(--hue-blue) 12%, var(--surface));
    border: 1px solid color-mix(in srgb, var(--hue-blue) 30%, var(--rule));
    border-radius: 999px;
    cursor: pointer;
}

.project-sync-badge:hover {
    background: color-mix(in srgb, var(--hue-blue) 20%, var(--surface));
}

.project-sync-badge.needs-you {
    color: color-mix(in srgb, var(--hue-amber) 70%, var(--ink));
    background: color-mix(in srgb, var(--hue-amber) 14%, var(--surface));
    border-color: color-mix(in srgb, var(--hue-amber) 40%, var(--rule));
}

.project-sync-badge.needs-you .project-sync-icon {
    color: var(--hue-amber);
}

.project-sync-badge.syncing .project-sync-icon {
    animation: project-sync-drift 1.6s ease-in-out infinite alternate;
}

@media (prefers-reduced-motion: reduce) {
    .project-sync-badge.syncing .project-sync-icon {
        animation: none;
    }
}

/* Deleting the project, last in its settings and marked as the one thing there that cannot be undone. */
.drawer-group.danger-zone h3 {
    color: var(--iron);
}

.drawer-group.danger-zone .button {
    margin-top: 0.6rem;
}

@media (max-width: 52rem) {
    .project-head-side {
        align-items: stretch;
    }

    .project-sync {
        width: auto;
    }
}

/* The calendar: every project's dates on one page. */
.calendar-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 0.75rem 1.25rem;
    margin: 0.5rem 0 1rem;
}

.calendar-moves {
    display: flex;
    gap: 0.25rem;
}

.calendar-views {
    margin: 0;
}

.calendar-filters {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 0.75rem;
}

.calendar-filters .field {
    margin: 0;
}

.calendar-done {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding-bottom: 0.4rem;
}

.calendar-grid {
    border: 1px solid var(--rule);
    border-radius: 6px;
    overflow: hidden;
}

.calendar-row {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
}

.calendar-row + .calendar-row {
    border-top: 1px solid var(--rule);
}

.calendar-weekday {
    padding: 0.35rem 0.5rem;
    color: var(--graphite);
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    background: var(--paper-deep);
}

.calendar-day {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    min-height: 6.5rem;
    padding: 0.3rem;
    background: var(--surface);
}

.calendar-grid.week .calendar-day {
    min-height: 18rem;
}

.calendar-day + .calendar-day {
    border-left: 1px solid var(--rule);
}

.calendar-day.outside {
    background: var(--paper);
}

.calendar-day.outside .calendar-date {
    color: var(--graphite);
    opacity: 0.6;
}

.calendar-date {
    align-self: flex-start;
    min-width: 1.8rem;
    padding: 0.1rem 0.35rem;
    color: var(--ink);
    font: inherit;
    font-size: 0.85rem;
    font-variant-numeric: tabular-nums;
    background: none;
    border: 0;
    border-radius: 999px;
    cursor: pointer;
}

.calendar-date:hover,
.calendar-date:focus-visible {
    background: var(--paper-deep);
}

.calendar-day.today .calendar-date {
    color: var(--on-accent);
    font-weight: 600;
    background: var(--verdigris);
}

/* A date in a day: coloured by its project, edged by how near it is. */
.calendar-chip {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    width: 100%;
    padding: 0.15rem 0.35rem;
    overflow: hidden;
    color: var(--ink);
    font: inherit;
    font-size: 0.8rem;
    text-align: left;
    white-space: nowrap;
    background: color-mix(in srgb, var(--hue, var(--graphite)) 14%, var(--surface));
    border: 0;
    border-left: 3px solid var(--hue, var(--graphite));
    border-radius: 3px;
    cursor: pointer;
}

.calendar-chip .chip-title {
    overflow: hidden;
    text-overflow: ellipsis;
}

.calendar-chip .chip-time {
    font-variant-numeric: tabular-nums;
    font-weight: 600;
}

.calendar-chip.done {
    opacity: 0.55;
    text-decoration: line-through;
}

.calendar-chip.missed {
    outline: 1px solid var(--iron);
}

.calendar-agenda .agenda-week {
    margin: 1.25rem 0 0.25rem;
    font-size: 1rem;
}

/* A phone shows a month as a list of its days rather than squeezing seven columns. */
@media (max-width: 40rem) {
    .calendar-row {
        grid-template-columns: 1fr;
    }

    .calendar-weekdays {
        display: none;
    }

    .calendar-day {
        min-height: 0;
    }

    .calendar-day + .calendar-day {
        border-left: 0;
        border-top: 1px solid var(--rule);
    }

    .calendar-day.outside {
        display: none;
    }
}
/* A paper's statistics in its settings, and how long each sealed version was. */
.facts.statistics dd {
    font-variant-numeric: tabular-nums;
}

.version-lengths {
    margin: 0.75rem 0 0;
    padding: 0;
    list-style: none;
}

.version-lengths li {
    display: grid;
    grid-template-columns: 2.5rem 1fr 4.5rem;
    align-items: center;
    gap: 0.5rem;
    padding: 0.15rem 0;
}

.version-number {
    color: var(--graphite);
    font-size: 0.85rem;
}

.version-bar {
    height: 0.5rem;
    overflow: hidden;
    background: var(--paper-deep);
    border-radius: 999px;
}

.version-bar > span {
    display: block;
    height: 100%;
    background: var(--verdigris);
    border-radius: inherit;
}

.version-lengths .meta {
    text-align: right;
    font-variant-numeric: tabular-nums;
}
/* In a list of papers: each one's length against its limit and its next deadline, smaller than on its own page. */
.paper-row-length,
.paper-row-deadline {
    margin: 0.3rem 0 0;
    font-size: 0.85rem;
}

.paper-row-length .length-meter {
    width: min(10rem, 30vw);
    height: 0.35rem;
}

.paper-actions .paper-settings-open .fa {
    margin-right: 0.3rem;
}
/* A project drawn with an icon instead of its initials. */
.project-monogram.with-icon .fa {
    font-size: 1.5rem;
}

/* Choosing how a project is drawn: the tile as it will look, beside the colours and icons to pick from.
   Every rule starts at .project-appearance: the reader's highlighter already has .swatch, and a
   picker that leans on bare element styles looks broken the moment another stylesheet arrives. */
.project-appearance {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 1rem 1.5rem;
    align-items: start;
    margin: 1rem 0 1.25rem;
    padding: 1rem 1.1rem;
    background: var(--paper-deep);
    border-radius: 10px;
}

.project-appearance .project-preview {
    grid-row: span 2;
}

.project-appearance .appearance-choices {
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
}

.project-appearance .appearance-choices legend {
    margin: 0 0 0.45rem;
    padding: 0;
    color: var(--graphite);
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.project-appearance .colour-choices,
.project-appearance .icon-choices {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
}

.project-appearance .colour-choice {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.3rem 0.7rem 0.3rem 0.35rem;
    color: var(--ink);
    font: inherit;
    font-size: 0.85rem;
    background: var(--surface);
    border: 1px solid var(--rule);
    border-radius: 999px;
    cursor: pointer;
}

.project-appearance .colour-choice:hover {
    border-color: var(--hue);
}

.project-appearance .colour-choice.chosen {
    font-weight: 600;
    border-color: var(--hue);
    box-shadow: 0 0 0 1px var(--hue);
}

.project-appearance .colour-dot {
    display: grid;
    place-items: center;
    width: 1.35rem;
    height: 1.35rem;
    color: var(--on-accent);
    font-size: 0.7rem;
    background: var(--hue);
    border-radius: 50%;
}

.project-appearance .icon-choice {
    display: grid;
    place-items: center;
    width: 2.6rem;
    height: 2.6rem;
    padding: 0;
    color: var(--ink);
    font: inherit;
    font-size: 0.8rem;
    font-weight: 700;
    background: var(--surface);
    border: 1px solid var(--rule);
    border-radius: 10px;
    cursor: pointer;
}

.project-appearance .icon-choice .fa {
    font-size: 1.1rem;
}

.project-appearance .icon-choice:hover {
    border-color: var(--hue);
}

.project-appearance .icon-choice.chosen {
    color: var(--on-accent);
    background: var(--hue);
    border-color: var(--hue);
    box-shadow: 0 2px 6px color-mix(in srgb, var(--hue) 35%, transparent);
}

.project-appearance .colour-choice:focus-visible,
.project-appearance .icon-choice:focus-visible {
    outline: 2px solid var(--ink);
    outline-offset: 2px;
}

@media (max-width: 40rem) {
    .project-appearance {
        grid-template-columns: 1fr;
    }

    .project-appearance .project-preview {
        grid-row: auto;
    }
}

/* The download menu: a button that opens a short list of what a document or a paper can be taken away as, under
   it and aligned to its left edge, above everything around it. */
.download-menu {
    position: relative;
    display: inline-block;
}

.download-menu-backdrop {
    position: fixed;
    inset: 0;
    z-index: 40;
}

.download-menu-list {
    position: absolute;
    top: calc(100% + 0.25rem);
    left: 0;
    z-index: 41;
    min-width: 17rem;
    margin: 0;
    padding: 0.35rem 0;
    list-style: none;
    background: var(--surface);
    border: 1px solid var(--rule);
    border-radius: 0.5rem;
    box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.18);
}

.download-menu-list a {
    display: block;
    padding: 0.45rem 0.9rem;
    color: inherit;
    text-decoration: none;
}

.download-menu-list a:hover,
.download-menu-list a:focus-visible {
    background: var(--paper-deep);
    outline: none;
}

.download-menu-label {
    display: block;
    font-weight: 600;
}

.download-menu-hint {
    display: block;
    font-size: 0.85em;
    opacity: 0.75;
}

.download-menu .fa-caret-down {
    margin-left: 0.25rem;
}

/* A trace (TracePage): what ran inside what on the left, the part chosen on the right. The tree is indented by
   depth; as a timeline, each row also draws when its part ran against the whole trace. */
.trace {
    display: grid;
    grid-template-columns: minmax(18rem, 2fr) minmax(0, 3fr);
    gap: 1.5rem;
    align-items: start;
}

@media (max-width: 900px) {
    .trace {
        grid-template-columns: 1fr;
    }
}

.trace-tools {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

.trace-filter {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 0.75rem;
    border: 0;
    margin: 0;
    padding: 0;
    font-size: 0.85rem;
}

.trace-filter legend {
    float: left;
    margin-right: 0.5rem;
    color: var(--graphite);
}

.trace-views {
    display: flex;
    gap: 0.25rem;
}

.trace-tree {
    list-style: none;
    margin: 0;
    padding: 0;
    border-top: 1px solid var(--rule);
}

.trace-row {
    border-bottom: 1px solid var(--rule);
}

.trace-row.chosen {
    background: var(--paper-deep);
}

.trace-node {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    width: 100%;
    padding: 0.35rem 0.5rem 0.35rem calc(0.5rem + var(--depth, 0) * 1.1rem);
    border: 0;
    background: none;
    color: var(--ink);
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.trace-name {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.trace-row.failed .trace-name {
    color: var(--iron);
}

.trace-took {
    color: var(--graphite);
    font-size: 0.85rem;
    font-variant-numeric: tabular-nums;
}

.trace-kind {
    min-width: 5.5em;
    padding: 0 0.35rem;
    border-radius: 0.25rem;
    color: var(--on-accent);
    font-size: 0.75rem;
    text-align: center;
}

.kind-run, .trace-bar.kind-run { background: var(--hue-slate); }
.kind-operation, .trace-bar.kind-operation { background: var(--hue-slate); }
.kind-model, .trace-bar.kind-model { background: var(--hue-blue); }
.kind-tool, .trace-bar.kind-tool { background: var(--hue-amber); }
.kind-subworkflow, .trace-bar.kind-subworkflow { background: var(--hue-plum); }
.kind-gate, .trace-bar.kind-gate { background: var(--hue-rust); }
.kind-search, .trace-bar.kind-search { background: var(--hue-teal); }
.kind-step, .trace-bar.kind-step { background: var(--hue-brown); }

.trace-lane {
    position: relative;
    display: block;
    height: 0.4rem;
    margin: 0 0.5rem 0.4rem calc(0.5rem + var(--depth, 0) * 1.1rem);
    background: var(--paper-deep);
    border-radius: 0.2rem;
}

.trace-bar {
    position: absolute;
    top: 0;
    bottom: 0;
    border-radius: 0.2rem;
}

.trace-detail {
    min-width: 0;
}

.trace-detail h2 {
    margin-top: 0;
}

.trace-panel {
    margin-top: 0.75rem;
}

.trace-message {
    margin-bottom: 0.75rem;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--rule);
    border-radius: 0.4rem;
    background: var(--surface);
}

.trace-message h3 {
    margin: 0 0 0.25rem;
    color: var(--graphite);
    font-size: 0.8rem;
    text-transform: uppercase;
}

.trace-message.from-model {
    border-left: 3px solid var(--hue-blue);
}

.trace-message pre,
.trace-value {
    margin: 0;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    font-family: inherit;
}

.trace-value {
    margin-bottom: 0.75rem;
    padding: 0.5rem 0.75rem;
    background: var(--surface);
    border: 1px solid var(--rule);
    border-radius: 0.4rem;
}

.trace-details {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 0.35rem 1rem;
}

.trace-details dt {
    color: var(--graphite);
}

.trace-details dd {
    margin: 0;
    overflow-wrap: anywhere;
}

.trace-events {
    margin: 0;
    padding-left: 1.2rem;
}

.trace-events time {
    margin-right: 0.5rem;
    color: var(--graphite);
    font-variant-numeric: tabular-nums;
}

/* Usage (plan B.3): the period chosen, the totals as the home page's tiles, a column a day, and the tables by
   model, kind of work, project and person. */
.usage-period {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem 1.5rem;
    margin: 1rem 0 0.5rem;
}

/* The usual periods joined into one control, the chosen one filled. */
.usage-presets {
    display: inline-flex;
    flex-wrap: wrap;
    padding: 3px;
    background: var(--paper-deep);
    border: 1px solid var(--rule);
    border-radius: 8px;
}

.usage-preset {
    padding: 0.35rem 0.8rem;
    color: var(--graphite);
    font: inherit;
    font-size: 0.9rem;
    background: transparent;
    border: 0;
    border-radius: 6px;
    cursor: pointer;
}

.usage-preset:hover {
    color: var(--ink);
}

.usage-preset[aria-pressed="true"] {
    color: var(--on-accent);
    font-weight: 600;
    background: var(--verdigris);
}

.usage-preset:focus-visible {
    outline: 2px solid var(--verdigris);
    outline-offset: 2px;
}

.usage-range {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}

.usage-totals {
    margin: 0.75rem 0 1rem;
}

.usage-totals .tile-number {
    white-space: nowrap;
}

.usage-chart-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.5rem 1rem;
}

.usage-legend {
    display: flex;
    gap: 1rem;
    margin: 0;
    padding: 0;
    color: var(--graphite);
    font-size: 0.85rem;
    list-style: none;
}

.usage-swatch {
    display: inline-block;
    width: 0.75rem;
    height: 0.75rem;
    margin-right: 0.25rem;
    vertical-align: -0.05rem;
    border-radius: 2px;
}

.usage-swatch.answered {
    background: var(--hue-blue);
}

.usage-swatch.failed {
    background: var(--hue-rust);
}

/* The scale's top and middle as faint lines behind the columns, the busiest day's count at the top. */
.usage-chart-frame {
    position: relative;
    margin: 0.5rem 0 2.25rem;
    padding-left: 2rem;
}

.usage-scale {
    position: absolute;
    top: -0.55rem;
    left: 0;
    width: 1.6rem;
    color: var(--graphite);
    font-size: 0.75rem;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.usage-chart {
    display: flex;
    align-items: flex-end;
    gap: 3px;
    height: 10rem;
    margin: 0;
    padding: 0;
    list-style: none;
    border-bottom: 1px solid var(--rule);
    background:
        linear-gradient(var(--rule), var(--rule)) top / 100% 1px no-repeat,
        linear-gradient(color-mix(in srgb, var(--rule) 50%, transparent), color-mix(in srgb, var(--rule) 50%, transparent)) center / 100% 1px no-repeat;
}

.usage-chart li {
    position: relative;
    display: flex;
    flex: 1;
    flex-direction: column;
    justify-content: flex-end;
    height: 100%;
}

.usage-bar {
    position: relative;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: var(--hue-blue);
    border-radius: 3px 3px 0 0;
}

.usage-bar-failed {
    display: block;
    width: 100%;
    background: var(--hue-rust);
}

.usage-chart li:hover .usage-bar {
    filter: brightness(1.15);
}

/* A day with nothing asked still has its place, as a mark on the baseline. */
.usage-chart li.quiet-day::after {
    content: "";
    display: block;
    height: 2px;
    margin: 0 15%;
    background: var(--rule);
    border-radius: 1px;
}

.usage-day {
    position: absolute;
    top: calc(100% + 0.35rem);
    left: 0;
    color: var(--graphite);
    font-size: 0.75rem;
    white-space: nowrap;
}

/* The tables: the name column takes the room, the figures line up, and each row's share of the requests is drawn
   under its count. */
.usage th[scope="row"] {
    width: 32%;
    font-weight: 600;
    text-align: left;
}

.usage-provider {
    color: var(--graphite);
    font-weight: 400;
}

.usage-requests {
    position: relative;
    min-width: 7rem;
}

.usage-share {
    display: block;
    width: var(--share);
    height: 3px;
    margin: 0.25rem 0 0 auto;
    background: color-mix(in srgb, var(--hue-blue) 70%, transparent);
    border-radius: 2px;
}

.usage-not-priced {
    display: block;
    color: var(--graphite);
    font-size: 0.8rem;
}

.usage td.usage-quiet {
    color: var(--graphite);
}

.usage td.usage-failed {
    color: var(--hue-rust);
    font-weight: 600;
}

/* Credit and plan, in Settings: the balance first and largest, then each thing a person does here in a
   panel of its own, so buying, the saved card, what was bought and the plan are not one run of lines. */
.paying-balance {
    display: grid;
    gap: 0.2rem;
    margin: 1rem 0 1.25rem;
    padding: 1rem 1.25rem;
    background: color-mix(in srgb, var(--hue-green) 9%, var(--surface));
    border: 1px solid color-mix(in srgb, var(--hue-green) 30%, var(--rule));
    border-left: 5px solid var(--hue-green);
    border-radius: 6px;
}

.paying-balance-figure {
    font-size: 2.4rem;
    font-weight: 600;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
    color: var(--hue-green);
}

.paying-balance-label {
    font-size: 0.95rem;
    color: var(--graphite);
}

.paying-part {
    margin: 0 0 1.25rem;
    padding: 0.9rem 1.1rem 1rem;
    background: var(--surface);
    border: 1px solid var(--rule);
    border-radius: 6px;
}

.paying-part > h3 {
    margin-top: 0;
}

.paying-part h4 {
    margin: 1rem 0 0.5rem;
}

.paying-choices {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
    gap: 0.75rem;
    margin: 0 0 0.75rem;
    padding: 0;
    list-style: none;
}

.paying-choice {
    display: grid;
    align-content: start;
    gap: 0.35rem;
    padding: 0.85rem 1rem;
    background: color-mix(in srgb, var(--verdigris) 7%, var(--surface));
    border: 1px solid color-mix(in srgb, var(--verdigris) 30%, var(--rule));
    border-top: 4px solid var(--verdigris);
    border-radius: 6px;
}

#buy-storage .paying-choice,
#subscribe-plans .paying-choice {
    background: color-mix(in srgb, var(--hue-blue) 7%, var(--surface));
    border-color: color-mix(in srgb, var(--hue-blue) 30%, var(--rule));
    border-top-color: var(--hue-blue);
}

.paying-choice-figure {
    font-size: 1.6rem;
    font-weight: 600;
    line-height: 1.15;
    font-variant-numeric: tabular-nums;
}

.paying-choice .button {
    justify-self: start;
    margin-top: 0.35rem;
}

#saved-card {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 1rem;
}

.paying-rule {
    display: flex;
    flex-wrap: wrap;
    align-items: end;
    gap: 0.5rem 1.25rem;
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--rule);
}

/* The two boxes and the button on one line: no margins of their own, and one height, so their
   bottoms, and so the labels above them, line up. */
.paying-rule .field,
.paying-rule .field-inline,
.paying-rule .actions {
    margin: 0;
}

.paying-rule input,
.paying-rule select,
.paying-rule .button {
    box-sizing: border-box;
    height: 2.5rem;
    margin: 0;
}

/* Credit in amber, the plan and storage in blue: the two kinds of thing bought here told apart. */
#buy-credit .paying-choice {
    background: color-mix(in srgb, var(--hue-amber) 8%, var(--surface));
    border-color: color-mix(in srgb, var(--hue-amber) 30%, var(--rule));
    border-top-color: var(--hue-amber);
}

#buy-credit .paying-choice-figure {
    color: var(--hue-amber);
}

.paying-part table.grid {
    margin: 0;
}

.paying-meter {
    display: block;
    height: 0.55rem;
    margin: 0.5rem 0 0.25rem;
    background: color-mix(in srgb, var(--hue-blue) 12%, var(--surface));
    border-radius: 999px;
    overflow: hidden;
}

.paying-meter > span {
    display: block;
    height: 100%;
    background: var(--hue-blue);
}

/* What an assistant proposes to add, quoted as it will be added, for the person deciding (decision 29). */
.assistant-proposal {
    margin: 0.5rem 0 0.75rem;
}

.proposal-content {
    margin: 0.35rem 0 0;
    padding: 0.6rem 0.8rem;
    border-left: 3px solid var(--hue-plum);
    background: var(--surface);
    white-space: pre-wrap;
}

/* The sample project, offered where a vault is still empty: below the way to make one's own, quieter than it. */
.sample-offer {
    margin-top: 1.25rem;
    padding-top: 1rem;
    border-top: 1px solid var(--rule, rgba(0, 0, 0, 0.12));
    max-width: 62ch;
}

.sample-offer p {
    margin: 0 0 0.75rem;
}

/* Papers found for a topic (FindPapersPage): a numbered list, each paper's title first, what it is under it, and
   what can be done with it last. */
.find-papers-form textarea {
    width: 100%;
    box-sizing: border-box;
}

.found-list {
    margin: 1rem 0 0;
    padding-left: 1.75rem;
}

.found-paper {
    padding: 0.75rem 0;
    border-bottom: 1px solid var(--rule);
}

.found-title {
    font-weight: 600;
    overflow-wrap: anywhere;
}

.found-title .badge.in-project {
    margin-left: 0.5rem;
    font-weight: 600;
}

.found-paper .found-facts,
.found-paper .found-by {
    margin: 0.2rem 0 0;
}

.found-abstract {
    margin: 0.4rem 0 0;
}

.found-abstract p {
    margin: 0.4rem 0 0;
    max-width: 70ch;
}

.found-actions {
    margin-top: 0.5rem;
}

.found-actions:empty {
    display: none;
}

/* The project's searches for papers: each opens again as it was found. */
.kept-searches {
    margin: 1.5rem 0;
}

.kept-search-list {
    margin: 0.5rem 0 0;
    padding: 0;
    list-style: none;
}

.kept-search {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.25rem 0.75rem;
    padding: 0.35rem 0.5rem;
    border-bottom: 1px solid var(--rule);
}

.kept-search.open {
    background: color-mix(in srgb, var(--verdigris) 8%, transparent);
}

.kept-search a[aria-current="page"] {
    font-weight: 600;
}

.kept-search .button {
    margin-left: auto;
}

.index-key-steps {
    margin: 0.25rem 0 0.75rem;
    padding-left: 1.4rem;
}

.index-keys {
    margin-top: 2rem;
}

.index-keys .index-key {
    margin-top: 0.75rem;
    max-width: 32rem;
}

/* A paper's Use of AI (UseOfAiSettings): the project's calls to choose from, each with its record a click away. */
.ai-calls {
    margin: 0.5rem 0;
    padding: 0;
    list-style: none;
}

.ai-call {
    padding: 0.4rem 0;
    border-bottom: 1px solid var(--rule);
}

.ai-call-unfinished {
    color: var(--graphite);
}

.ai-call-record summary {
    margin-top: 0.25rem;
    font-size: 0.9em;
    color: var(--graphite);
    cursor: pointer;
}

.ai-call-text {
    max-height: 16rem;
    overflow: auto;
    margin: 0.25rem 0 0.5rem;
    padding: 0.5rem 0.6rem;
    border-radius: 4px;
    background: color-mix(in srgb, var(--graphite) 8%, transparent);
    font-size: 0.8rem;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

/* A paper against the AI answers recorded for its project: the calls it matches, each with a letter, then each
   section with the matching words marked and the letter of the call they came from. */
.ai-text-check .hint {
    max-width: 48rem;
}

.ai-text-summary {
    margin: 1rem 0;
    font-weight: 600;
}

.ai-text-call-list {
    display: grid;
    gap: 0.75rem;
    margin: 0 0 0.75rem;
    padding: 0;
    list-style: none;
}

.ai-text-call {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.75rem;
    padding: 0.6rem 0.9rem;
    border: 1px solid var(--rule);
    border-radius: 8px;
}

.ai-text-call p {
    margin: 0 0 0.25rem;
}

.ai-text-call-mark {
    display: inline-grid;
    place-items: center;
    min-width: 1.6rem;
    height: 1.6rem;
    border-radius: 999px;
    background: var(--paper-deep);
    font-weight: 600;
    font-size: 0.85rem;
}

.ai-text-call-record pre {
    max-height: 16rem;
    overflow: auto;
    margin: 0.4rem 0 0;
    padding: 0.5rem 0.75rem;
    background: var(--paper-deep);
    border-radius: 6px;
    font-size: 0.85rem;
    white-space: pre-wrap;
}

.ai-text-section {
    margin: 1.25rem 0;
}

.ai-text-section-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.25rem 0.75rem;
}

.ai-text-section-head h3 {
    margin: 0;
}

.ai-text-body {
    max-width: 48rem;
    white-space: pre-wrap;
    line-height: 1.6;
}

.ai-text-match {
    background: color-mix(in srgb, var(--hue-amber) 22%, transparent);
    color: inherit;
    border-radius: 3px;
}

.ai-text-from {
    margin-left: 0.15rem;
    font-size: 0.7rem;
    font-weight: 600;
}

.ai-text-call .badge {
    margin-left: 0.4rem;
}