:root {
    /* One red for danger. The file had #b91c1c and #dc2626 used interchangeably. */
    --af-danger: #dc2626;
    --af-danger-wash: rgba(220, 38, 38, .08);
    --af-danger-soft: #fef2f2;

    --af-text: #1f2937;
    --af-muted: #64748b;
    --af-faint: #94a3b8;
    --af-border: #e2e8f0;
    --af-bg-soft: #f8fafc;
    --af-primary: #6366f1;
    --af-primary-soft: #eef2ff;
    --af-highlight: #fff4c2;
    --af-highlight-line: #f5d565;
    --af-highlight-active: #ffe27a;
    --af-mention: #2563eb;
    --af-mention-bg: #e8f0fe;
    --af-appbar-h: 56px;
    --af-docbar-h: 48px;
}

[hidden] { display: none !important; }

/* ---- shell ------------------------------------------------------------------------------ */

.af-appbar { border-bottom: 1px solid var(--af-border); height: var(--af-appbar-h); }
.af-appbar .mud-toolbar { min-height: var(--af-appbar-h); height: var(--af-appbar-h); }
.af-brand { display: inline-flex; align-items: center; gap: 10px; margin-left: 8px; font-weight: 700; font-size: 1.05rem; color: var(--af-text); text-decoration: none; letter-spacing: -0.01em; }
.af-brand-mark { width: 28px; height: 28px; border-radius: 8px; background: linear-gradient(135deg, #818cf8, #4f46e5); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-weight: 800; font-size: 0.95rem; }
.af-brand-sub { color: var(--af-faint); font-weight: 600; font-size: 0.75rem; margin-left: 2px; letter-spacing: 0.08em; }
.af-brand-lg { font-size: 1.4rem; margin: 0 0 12px; }
.af-brand-lg .af-brand-mark { width: 36px; height: 36px; font-size: 1.2rem; }
.af-new-btn { text-transform: none !important; font-weight: 600 !important; border-radius: 8px !important; margin-right: 8px; box-shadow: none !important; }
.af-appbar-user { display: inline-flex; align-items: center; gap: 8px; margin: 0 4px 0 8px; }
.af-appbar-name { font-weight: 500; color: #334155; font-size: 0.85rem; }
@media (max-width: 720px) { .af-appbar-name, .af-brand-sub { display: none; } }

.af-drawer { border-right: 1px solid var(--af-border) !important; }
.af-nav .mud-nav-link { border-radius: 8px; margin: 2px 10px; padding: 7px 12px; font-weight: 500; }
.af-nav .mud-nav-link.active { background: var(--af-primary-soft); color: var(--af-primary); }
.af-nav { padding-top: 12px; }
.af-nav-section { margin: 18px 22px 6px; font-size: 0.7rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--af-faint); }
.af-nav-recent a { display: flex; align-items: center; gap: 8px; padding: 6px 12px; margin: 1px 10px; border-radius: 6px; color: #475569; text-decoration: none; font-size: 0.84rem; }
.af-nav-recent a span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.af-nav-recent a:hover { background: #eef2f7; }
.af-nav-recent a.active { background: var(--af-primary-soft); color: var(--af-primary); font-weight: 500; }

.af-main { background: #fff; min-height: 100vh; }

.af-avatar { display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; color: #fff; font-weight: 600; flex: none; line-height: 1; user-select: none; box-shadow: 0 0 0 2px #fff; }

/* ---- list pages ------------------------------------------------------------------------- */

.af-page { max-width: 1040px; margin: 0 auto; padding: 32px 32px 64px; }
.af-page-narrow { max-width: 760px; }
.af-page-head { display: flex; align-items: center; gap: 16px; margin-bottom: 20px; flex-wrap: wrap; }
.af-page-head h1 { font-size: 1.6rem; font-weight: 700; letter-spacing: -0.02em; margin: 0; }
.af-search { max-width: 280px; }
.af-empty { text-align: center; color: var(--af-muted); padding: 64px 16px; }
.af-empty p { margin: 12px 0 20px; }

.af-doc-list { border: 1px solid var(--af-border); border-radius: 10px; overflow: hidden; }
/* One list for folders and pages. Four columns, the same four for both, because the whole point
   of merging the two screens is that a row says the same things whatever kind of thing it is. */
.af-doc-list-head, .af-doc-row { display: grid;
    grid-template-columns: minmax(0, 1fr) 210px 120px 86px; align-items: center; gap: 16px;
    padding: 0 18px; }
.af-doc-list-head { font-size: 0.74rem; font-weight: 600; letter-spacing: 0.02em;
    text-transform: uppercase; color: var(--af-faint); }
/* The whole row opens it. The link covers the row from underneath, so the controls on the right
   still take their own clicks rather than the row taking them first. */
.af-doc-row { position: relative; }
.af-row-link::after { content: ''; position: absolute; inset: 0; }
.af-row-words { min-width: 0; }
.af-row-words a.af-doc-row-title { color: inherit; text-decoration: none; display: block; }
.af-doc-row:hover .af-doc-row-title { color: var(--af-primary); }
.af-doc-row-seen { min-width: 0; }
/* Quiet until the row is under the pointer. A list of forty rows with three buttons on each is a
   wall of icons; the same list with them on hover is a list. */
.af-row-tools { display: flex; align-items: center; justify-content: flex-end; gap: 2px;
    position: relative; z-index: 1; }
.af-row-tools button { display: inline-flex; align-items: center; justify-content: center;
    width: 26px; height: 26px; padding: 0; border: 0; border-radius: 7px; background: none;
    color: var(--af-faint); cursor: pointer; opacity: 0; transition: opacity .1s; }
.af-doc-row:hover .af-row-tools button, .af-row-tools button:focus-visible { opacity: 1; }
.af-row-tools button:hover { color: var(--af-primary); background: var(--af-primary-soft); }
.af-row-tools .af-row-bin:hover { color: #b91c1c; background: #fef2f2; }
.af-row-threads { display: inline-flex; align-items: center; gap: 3px; font-size: 0.78rem;
    color: var(--af-faint); }
.af-doc-row .af-pin { position: relative; z-index: 1; }
.af-doc-row .af-doc-tick { position: relative; z-index: 1; }
/* Names a run of rows, where the list holds two kinds of thing that answer to different rules. */
.af-list-band { display: flex; align-items: baseline; gap: 10px;
    flex-wrap: wrap; padding: 13px 18px 9px; background: var(--af-bg-soft);
    border-bottom: 1px solid var(--af-border); font-size: 0.8rem; font-weight: 650; }
.af-list-band + .af-doc-row { border-top: 0; }
.af-list-band-note { font-weight: 400; color: var(--af-muted); font-size: 0.78rem; }
.af-list-aside { display: flex; align-items: center; gap: 6px; margin: 10px 2px 0;
    color: var(--af-faint); font-size: 0.8rem; }

/* The header of the browser: where you are, what you can do here. */
.af-browse-bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 2px 0 10px; }
.af-browse-title { display: flex; align-items: center; gap: 8px; margin: 0; flex: 1; min-width: 220px;
    font-size: 1.5rem; font-weight: 650; }
.af-browse-rename { cursor: text; }
.af-browse-rename:hover { text-decoration: underline dotted var(--af-faint); }
.af-browse-sub-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px;
    margin-bottom: 10px; }
.af-doc-list-head { height: 38px; background: var(--af-bg-soft); color: var(--af-muted); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; border-bottom: 1px solid var(--af-border); }
.af-doc-row { padding-top: 14px; padding-bottom: 14px; color: inherit; text-decoration: none; border-bottom: 1px solid var(--af-border); transition: background .1s; }
.af-doc-row:last-child { border-bottom: 0; }
.af-doc-row:hover { background: #fafbff; }
.af-doc-row-main { display: flex; gap: 12px; min-width: 0; }
.af-doc-row-main > div { min-width: 0; }
.af-doc-icon { color: #818cf8; margin-top: 1px; }
.af-doc-row-title { font-weight: 600; font-size: 0.95rem; }
.af-doc-row-preview { color: var(--af-muted); font-size: 0.82rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 2px; }
.af-doc-row-edited { display: flex; align-items: center; gap: 8px; color: var(--af-muted); font-size: 0.82rem; }
.af-doc-row-comments { display: flex; align-items: center; gap: 4px; color: var(--af-muted); font-size: 0.82rem; justify-content: flex-end; }
@media (max-width: 720px) {
    .af-page { padding: 20px 16px 48px; }
    .af-doc-list-head { display: none; }
    .af-doc-row, .af-doc-list-head { grid-template-columns: minmax(0, 1fr) 40px; }
    .af-doc-row-edited, .af-doc-row-seen { display: none; }
    .af-doc-row-edited { display: none; }
}

.af-card-list { border: 1px solid var(--af-border); border-radius: 10px; overflow: hidden; }

/* ---- notifications ---------------------------------------------------------------------- */

.af-notif-menu { width: 380px; max-width: calc(100vw - 32px); }
.af-notif-header { display: flex; align-items: center; justify-content: space-between; padding: 8px 16px; font-weight: 600; }
.af-notif-empty { padding: 20px 16px; color: var(--af-muted); text-align: center; font-size: 0.85rem; }
.af-notif-row { display: flex; gap: 12px; padding: 12px 16px; cursor: pointer; position: relative;
    border-top: 1px solid #f1f5f9; color: inherit; text-decoration: none; }
.af-notif-row:hover { background: #f8fafc; }
.af-notif-row.unread { background: #f5f7ff; }
.af-notif-body { min-width: 0; flex: 1; font-size: 0.84rem; }
.af-notif-title { color: #334155; line-height: 1.35; }
.af-notif-snippet { color: var(--af-muted); margin-top: 3px; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.af-notif-time { color: var(--af-faint); font-size: 0.75rem; margin-top: 4px; }
.af-unread-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--af-primary); flex: none; margin-top: 6px; }

/* ---- login ------------------------------------------------------------------------------ */

.af-login-bg { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: radial-gradient(circle at 20% 10%, #eef2ff, #f8fafc 50%); padding: 24px 16px; }
.af-login-card { width: 100%; max-width: 420px; background: #fff; border: 1px solid var(--af-border); border-radius: 14px; padding: 32px; box-shadow: 0 12px 40px rgba(15, 23, 42, .06); }
.af-login-lead { color: var(--af-muted); margin: 0 0 20px; font-size: 0.88rem; line-height: 1.5; }
.af-login-user { width: 100%; display: flex; align-items: center; gap: 12px; padding: 10px 12px; margin-bottom: 6px; border: 1px solid var(--af-border); border-radius: 10px; background: #fff; cursor: pointer; font: inherit; text-align: left; transition: border-color .1s, background .1s; }
.af-login-user:hover { border-color: #c7d2fe; background: #fafbff; }
.af-login-name { font-weight: 600; flex: 1; }
.af-login-handle { color: var(--af-faint); font-size: 0.8rem; }

/* ---- document page ---------------------------------------------------------------------- */

.af-doc-shell { position: relative; height: calc(100vh - var(--af-appbar-h)); display: flex; flex-direction: column; }
.af-doc-bar { height: var(--af-docbar-h); flex: none; display: flex; align-items: center; gap: 8px; padding: 0 20px; border-bottom: 1px solid #f1f5f9; font-size: 0.84rem; }
.af-doc-crumbs { display: flex; align-items: center; gap: 8px; min-width: 0; }
.af-crumb { color: var(--af-muted); text-decoration: none; white-space: nowrap; }
.af-crumb:hover { color: var(--af-primary); }
.af-crumb-sep { color: #cbd5e1; }
.af-sync { color: var(--af-faint); font-size: 0.75rem; margin-left: 8px; }
.af-sync.saving { color: #b7791f; }
.af-presence { display: flex; flex-direction: row-reverse; margin-right: 8px; }
.af-presence .af-avatar { margin-left: -6px; }
.af-bar-btn { text-transform: none !important; box-shadow: none !important; border-radius: 8px !important; }
.af-bar-count { margin-left: 5px; }

/* Phones: the trail shortens to a way back, the buttons keep their icons and lose their words. */
@media (max-width: 720px) {
    .af-doc-bar { gap: 4px; padding: 0 10px; }
    /* The way back is the menu on a phone, so the trail gives its room to the buttons. */
    .af-doc-crumbs, .af-sync { display: none; }
    .af-bar-count.zero { display: none; }
    .af-bar-label { display: none !important; }
    .af-bar-count { margin-left: 0; }
    .af-bar-btn { min-width: 0 !important; padding: 4px 8px !important; }
    .af-bar-btn .mud-button-icon-start, .af-new-btn .mud-button-icon-start { margin-right: 0; margin-left: 0; }
    .af-presence { margin-right: 2px; }
    .af-doc-bar .af-btn { padding: 5px 8px; gap: 0; }
    .af-appbar .mud-toolbar { padding-left: 6px; padding-right: 6px; }
    .af-brand { gap: 0; margin-left: 2px; }
    .af-brand > span:not(.af-brand-mark) { display: none; }
    .af-org-name { display: none; }
    .af-new-btn { min-width: 0 !important; padding: 6px 10px !important; margin-right: 2px; }
    .af-appbar-user { margin: 0 2px; }
}

.af-doc-scroll { flex: 1; overflow-y: auto; overflow-x: hidden; }
/* The page starts near the left rather than floating in the middle of whatever width the window
   happens to be: the empty band was wider than the sidebar. */
.af-doc-grid { display: grid; grid-template-columns: minmax(0, 820px) 300px; justify-content: start; column-gap: 48px; padding: 40px 24px 160px; }
.af-doc-main { min-width: 0; padding-left: 30px; }   /* room for the "+" insert button */
.af-margin { position: relative; min-height: 200px; }

.af-title { width: 100%; border: 0; outline: 0; font: inherit; font-size: 2.3rem; font-weight: 700; letter-spacing: -0.025em; line-height: 1.2; color: #111827; padding: 0; background: transparent; resize: none; overflow: hidden; display: block; }
/* The trail stays on one line: the title is shown in full a few pixels below it. */
.af-crumb-current { font-weight: 500; max-width: 420px; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.af-title::placeholder { color: #cbd5e1; }
.af-doc-meta { display: flex; align-items: center; gap: 8px; color: var(--af-faint); font-size: 0.8rem; margin: 10px 0 20px; }

/* Quill (bubble theme) tuned to feel like a Quip doc */
.af-editor.ql-container { font-family: inherit; font-size: 1rem; }
.af-editor .ql-editor { padding: 0; min-height: 50vh; line-height: 1.7; color: var(--af-text); overflow-y: visible; }
.af-editor .ql-editor.ql-blank::before { left: 0; right: 0; font-style: normal; color: #cbd5e1; }
.af-editor .ql-editor p, .af-editor .ql-editor li { margin-bottom: 4px; }
.af-editor .ql-editor h1 { font-size: 1.7rem; font-weight: 700; margin: 28px 0 8px; letter-spacing: -0.02em; line-height: 1.3; }
.af-editor .ql-editor h2 { font-size: 1.3rem; font-weight: 700; margin: 24px 0 6px; letter-spacing: -0.01em; line-height: 1.35; }
.af-editor .ql-editor h3 { font-size: 1.1rem; font-weight: 600; margin: 20px 0 4px; }
.af-editor .ql-editor blockquote { border-left: 3px solid var(--af-border); color: var(--af-muted); padding-left: 14px; margin: 8px 0; }
.af-editor .ql-editor pre.ql-syntax, .af-editor .ql-editor pre { background: #f1f5f9; color: #0f172a; border-radius: 6px; padding: 10px 14px; }
/* Quill 2 renders code blocks dark by default; keep them light like the rest of the page. */
.af-editor .ql-editor .ql-code-block-container { background: #f1f5f9; color: #0f172a; border: 1px solid var(--af-border); border-radius: 8px; padding: 8px 12px; margin: 10px 0; }
.af-editor .ql-editor .ql-code-block { color: #0f172a; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.85rem; }
.af-editor .ql-editor ul, .af-editor .ql-editor ol { padding-left: 0.5em; }
.af-editor .ql-editor li[data-list="checked"], .af-editor .ql-editor ul[data-checked="true"] > li { color: var(--af-faint); text-decoration: line-through; }
.af-editor .ql-editor a { color: var(--af-mention); }
.af-editor .ql-bubble .ql-tooltip, .af-editor.ql-bubble .ql-tooltip { background: #1e293b; border-radius: 8px; box-shadow: 0 6px 20px rgba(15, 23, 42, .25); z-index: 5; }
.af-editor.ql-bubble .ql-tooltip:not(.ql-flip) .ql-tooltip-arrow { border-bottom-color: #1e293b; }
.af-editor.ql-bubble .ql-tooltip.ql-flip .ql-tooltip-arrow { border-top-color: #1e293b; }
.af-editor.ql-bubble .ql-toolbar button.ql-comment { width: 30px; border-left: 1px solid #475569; margin-left: 4px; padding-left: 8px; }
.af-editor.ql-bubble .ql-toolbar button.ql-comment:hover .ql-stroke { stroke: var(--af-highlight-active); }
.af-comment { transition: background-color .15s; border-radius: 2px; }

/* Prose that is also an object: it still reads as the sentence it was written as, with a mark
   underneath saying so. */
.af-made { border-bottom: 1px dashed #c7d2fe; cursor: pointer; }
.af-made:hover { background: var(--af-primary-soft); border-bottom-color: var(--af-primary); }
.af-make-menu { position: fixed; z-index: 20; min-width: 230px; max-height: calc(100vh - 24px); overflow-y: auto; overscroll-behavior: contain; padding: 6px; background: #fff; border: 1px solid var(--af-border); border-radius: 10px; box-shadow: 0 12px 34px rgba(15, 23, 42, .16); }
.af-make-item { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; width: 100%; padding: 6px 8px; border: 0; border-radius: 7px; background: none; font: inherit; text-align: left; cursor: pointer; }
.af-make-item:hover { background: var(--af-primary-soft); }
.af-make-name { font-size: 0.88rem; color: var(--af-text); }
.af-make-hint { font-size: 0.76rem; color: var(--af-faint); }
@keyframes af-row-flash { from { background: var(--af-primary-soft); } to { background: transparent; } }
.af-row-flash td { animation: af-row-flash 2.6s ease-out; }

/* ---- margin conversations --------------------------------------------------------------- */

.af-thread { position: absolute; left: 0; right: 0; top: 0; background: #fff; border: 1px solid var(--af-border); border-radius: 10px; padding: 10px 12px; font-size: 0.84rem; cursor: pointer; transition: top .18s ease, box-shadow .15s, transform .15s, border-color .15s; }
.af-thread:hover { border-color: #cbd5e1; }
.af-thread.active { cursor: default; border-color: #e5d38a; box-shadow: 0 8px 28px rgba(15, 23, 42, .10); transform: translateX(-8px); }
.af-thread-new { border-color: #e5d38a; }
.af-thread-quote { display: none; color: var(--af-faint); font-size: 0.78rem; font-style: italic; margin-bottom: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.af-thread[data-orphan] { opacity: .8; }
.af-thread[data-orphan] .af-thread-quote { display: block; text-decoration: line-through; }
.af-thread-more { color: var(--af-primary); font-size: 0.78rem; margin: 2px 0 8px 32px; }

.af-comment-item { display: flex; gap: 8px; }
.af-comment-item + .af-comment-item { margin-top: 10px; }
.af-comment-content { flex: 1; min-width: 0; }
.af-comment-head { display: flex; align-items: center; gap: 6px; min-height: 24px; }
.af-comment-author { font-weight: 600; color: #111827; }
.af-comment-time { color: var(--af-faint); font-size: 0.75rem; }
.af-comment-text { display: block; white-space: pre-wrap; word-wrap: break-word; line-height: 1.5; color: #334155; }
.af-icon-btn { margin-left: auto; border: 0; background: transparent; color: var(--af-faint); width: 26px; height: 26px; border-radius: 6px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; opacity: 0; transition: opacity .1s, background .1s; }
.af-thread:hover .af-icon-btn, .af-thread.active .af-icon-btn { opacity: 1; }
.af-icon-btn:hover { background: #f1f5f9; color: #334155; }
.af-resolve:hover { color: #059669; background: #ecfdf5; }
.af-comment-head .af-icon-btn.af-danger:hover { color: var(--af-danger); background: var(--af-danger-wash); }
.af-comment-delete-first + .af-resolve { margin-left: 0; }
/* A box's timeline and a row's story: hung under what was clicked, over the page. */
.af-history-pop { position: fixed; z-index: 1300; max-height: min(460px, 70vh); display: flex; flex-direction: column; background: #fff; border: 1px solid var(--af-border); border-radius: 10px; box-shadow: 0 14px 36px rgba(15, 23, 42, .18); font-size: 0.84rem; }
.af-history-head { padding: 10px 14px; font-weight: 600; border-bottom: 1px solid #f1f5f9; }
.af-history-list { overflow-y: auto; padding: 4px; }
.af-history-row { display: block; width: 100%; padding: 7px 10px; border: 0; border-radius: 7px; background: none; font: inherit; text-align: left; color: var(--af-text); }
.af-history-pick { cursor: pointer; }
.af-history-pick:hover { background: var(--af-bg-soft); }
.af-history-pick.on { background: var(--af-primary-soft); }
.af-history-what { line-height: 1.4; overflow-wrap: anywhere; }
.af-history-meta { color: var(--af-faint); font-size: 0.74rem; font-variant-numeric: tabular-nums; margin-bottom: 2px; }
.af-history-row:not(.af-history-pick) .af-history-meta { margin: 2px 0 0; }
.af-history-mark { display: block; width: 100%; margin: 6px 0 2px; padding: 4px 10px; border: 0; border-top: 1px dashed var(--af-border); background: none; font: inherit; font-size: 0.74rem; font-weight: 600; text-align: left; color: var(--af-muted); }
button.af-history-mark { cursor: pointer; }
button.af-history-mark:hover { color: var(--af-primary); }
.af-history-empty { padding: 12px 10px; color: var(--af-faint); }
/* Faint rather than hidden: a hover-only control is one a touch screen never shows. */
.af-thread .af-icon-btn.af-comment-delete { opacity: .6; }
.af-thread:hover .af-icon-btn.af-comment-delete, .af-thread.active .af-icon-btn.af-comment-delete { opacity: 1; }

.af-mention { color: var(--af-mention); background: var(--af-mention-bg); border-radius: 4px; padding: 0 3px; font-weight: 500; white-space: nowrap; }
.af-mention-me { background: #fef3c7; color: #92400e; }

.af-thread-reply-link { margin: 8px 0 0 32px; color: var(--af-primary); font-size: 0.78rem; font-weight: 500; }
.af-thread-reply {margin-top: 10px; padding-top: 10px; border-top: 1px solid #f1f5f9; }
.af-composer textarea { width: 100%; resize: none; border: 1px solid var(--af-border); border-radius: 8px; padding: 7px 10px; font: inherit; font-size: 0.84rem; line-height: 1.45; outline: none; color: var(--af-text); background: #fff; display: block; min-height: 34px; }
.af-composer textarea:focus { border-color: #a5b4fc; box-shadow: 0 0 0 3px rgba(99, 102, 241, .12); }
.af-composer-actions { display: flex; align-items: center; gap: 6px; margin-top: 8px; justify-content: flex-end; flex-wrap: wrap; }
.af-btn { border: 0; border-radius: 6px; padding: 5px 12px; font: inherit; font-size: 0.8rem; font-weight: 600; cursor: pointer; line-height: 1.4; transition: background .1s; }
.af-btn:disabled { opacity: .6; cursor: default; }
.af-btn-primary { background: var(--af-primary); color: #fff; }
.af-btn-primary:hover:not(:disabled) { background: #4f46e5; }
.af-btn-text { background: transparent; color: var(--af-muted); }
.af-btn-text:hover { background: #f1f5f9; color: var(--af-text); }
.af-btn-accent { color: var(--af-primary); }
.af-delete-doc { opacity: 1; margin-left: 4px; }
.af-delete-doc:hover { color: #dc2626; background: #fef2f2; }

/* The one message in the product that means work may be being lost right now. It was the same
   slate grey as every other notice, which is the wrong colour for the only thing somebody must
   not scroll past. A darker red than the product's own danger colour, because white text on
   #dc2626 is below the contrast somebody reading it in a hurry needs. */
/* Centred by margin rather than by left: 50% and a transform. With the transform trick the
   shrink-to-fit width is measured from the halfway point, so the pill could never be wider than
   half the window and wrapped onto two lines in the middle of a sentence. */
#blazor-error-ui { display: none; position: fixed; left: 0; right: 0; bottom: 20px; margin: 0 auto; width: fit-content; max-width: min(92vw, 680px); transform: none; z-index: 3000; background: #b91c1c; color: #fff; padding: 10px 16px; border-radius: 10px; box-shadow: 0 10px 30px rgba(185, 28, 28, .35); font-size: 0.85rem; }
#blazor-error-ui a { color: #fff; margin-left: 10px; font-weight: 700; text-decoration: underline; }
#blazor-error-ui .dismiss { cursor: pointer; margin-left: 10px; color: rgba(255, 255, 255, .75); }
#blazor-error-ui .dismiss:hover { color: #fff; }
/* MudBlazor ships its own rules for this element: a full width bar on the bottom edge with the
   close pinned to the far right corner. The width is overruled above; this is the close. */
#blazor-error-ui .dismiss { position: static; }
.af-composer-hint { color: var(--af-faint); font-size: 0.72rem; margin-right: auto; white-space: nowrap; }
.af-composer textarea { overflow-y: hidden; }

.af-mention-menu { position: fixed; z-index: 2000; background: #fff; border: 1px solid var(--af-border); border-radius: 10px; box-shadow: 0 10px 30px rgba(15, 23, 42, .14); padding: 4px; font-size: 0.84rem; }
.af-mention-item { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 6px; cursor: pointer; }
.af-mention-item .af-avatar { width: 22px; height: 22px; font-size: 9px; box-shadow: none; }
.af-mention-item.active { background: var(--af-primary-soft); }
.af-mention-name { font-weight: 500; }
.af-mention-item[data-me="true"] .af-mention-name::after { content: "you"; margin-left: 6px; padding: 1px 5px; border-radius: 4px; background: var(--af-primary-soft); color: var(--af-primary); font-size: 0.68rem; font-weight: 600; letter-spacing: 0.02em; }
.af-mention-handle { color: var(--af-faint); margin-left: auto; padding-left: 12px; }

/* ---- resolved panel --------------------------------------------------------------------- */

.af-resolved-panel { position: absolute; top: var(--af-docbar-h); right: 0; bottom: 0; width: 360px; max-width: 100%; background: #fff; border-left: 1px solid var(--af-border); box-shadow: -12px 0 32px rgba(15, 23, 42, .06); overflow-y: auto; z-index: 10; font-size: 0.84rem; }
.af-resolved-head { display: flex; align-items: center; justify-content: space-between; padding: 10px 12px 10px 16px; font-weight: 600; border-bottom: 1px solid #f1f5f9; position: sticky; top: 0; background: #fff; }
.af-resolved-item { padding: 14px 16px; border-bottom: 1px solid #f1f5f9; }
.af-resolved-foot { display: flex; align-items: center; justify-content: space-between; color: var(--af-faint); font-size: 0.75rem; margin-top: 8px; }

/* Narrow screens: conversations drop below the document. */
@media (max-width: 1180px) {
    .af-doc-grid { grid-template-columns: minmax(0, 1fr) 260px; column-gap: 28px; padding: 32px 20px 120px; }
}
@media (max-width: 820px) {
    .af-doc-grid { grid-template-columns: minmax(0, 1fr); }
    .af-margin { min-height: 0 !important; margin-top: 32px; display: flex; flex-direction: column; gap: 10px; }
    .af-thread { position: static; transform: none !important; }
    .af-title { font-size: 1.8rem; }
}

/* ---- tables ------------------------------------------------------------------------------ */

.af-editor .ql-editor table { width: 100%; table-layout: fixed; border-collapse: collapse; margin: 42px 0 16px; font-size: 0.9rem; }   /* top gap leaves room for the table toolbar */
.af-editor .ql-editor td { border: 1px solid var(--af-border); padding: 7px 10px; vertical-align: top; word-break: normal; }
.af-editor .ql-editor tr:first-child td { background: var(--af-bg-soft); font-weight: 600; color: #334155; }
.af-editor .ql-editor table p { margin: 0; }

/* "+" insert button in the left margin, beside the current line */
.af-insert-btn { position: absolute; left: -32px; width: 26px; height: 26px; padding: 0; display: flex; align-items: center; justify-content: center; border: 1px solid var(--af-border); border-radius: 7px; background: #fff; color: var(--af-faint); cursor: pointer; z-index: 3; transition: color .1s, border-color .1s, background .1s; }
.af-insert-btn:hover { color: var(--af-primary); border-color: #c7d2fe; background: var(--af-primary-soft); }

/* drag-to-size grid picker */
.af-insert-blocks { border-top: 1px solid var(--af-border); margin-top: 6px; padding-top: 6px; }
.af-block-list { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; }
.af-block { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; padding: 5px 8px; border: 0; border-radius: 6px; background: none; font: inherit; text-align: left; cursor: pointer; }
.af-block:hover { background: var(--af-primary-soft); }
.af-block-name { font-size: 0.86rem; color: var(--af-text); }
.af-block-hint { font-size: 0.72rem; color: var(--af-faint); }
/* It has to fit on the screen it is opened on, whatever is in it. Anything that does not fit
   scrolls rather than falling off the bottom. */
.af-insert-menu { position: fixed; z-index: 2400; background: #fff; border: 1px solid var(--af-border); border-radius: 10px; box-shadow: 0 12px 34px rgba(15, 23, 42, .16); padding: 12px; max-height: calc(100vh - 24px); overflow-y: auto; overscroll-behavior: contain; }
.af-insert-label { font-size: 0.78rem; font-weight: 600; color: var(--af-muted); margin-bottom: 8px; white-space: nowrap; }
.af-grid { display: grid; gap: 3px; }
.af-grid-cell { width: 18px; height: 18px; border: 1px solid var(--af-border); border-radius: 3px; background: #fff; cursor: pointer; }
.af-grid-cell.on { background: var(--af-primary-soft); border-color: var(--af-primary); }

/* offered when words are selected inside a component, where Quill's own toolbar cannot reach */
/* Locked: readable, not editable. Visibly so, rather than silently refusing keystrokes. */
.af-editor-locked .ql-editor { background: #fafafa; cursor: default; }
.af-editor-locked .ql-toolbar { opacity: .45; pointer-events: none; }

/* Choosing several pages to be read as one sequence. */
/* The tick on a row of the folder page. Named for what it is: ".af-pick" already belonged to the
   workstream picker dialog, and taking it turned that dialog into one horizontal line. */
.af-doc-tick { display: inline-flex; align-items: center; margin-right: 6px; color: var(--af-muted); cursor: pointer; }
.af-doc-tick:hover { color: var(--af-primary); }
.af-row-picked { background: var(--af-primary-soft); }
.af-pick-bar { position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%); z-index: 2500;
    display: flex; align-items: center; gap: 12px; padding: 9px 14px; border-radius: 999px;
    background: #1e293b; color: #e2e8f0; font-size: 0.82rem;
    box-shadow: 0 10px 30px rgba(15, 23, 42, .3); }
.af-pick-bar .af-btn-text { color: #cbd5e1; }
.af-pick-ruleset { max-width: 220px; }
.af-arc { width: 560px; max-height: 76vh; overflow: auto; }
.af-arc-beats { margin: 0 0 12px 18px; padding: 0; line-height: 1.5; font-size: 0.86rem; }
.af-arc-beats li { margin-bottom: 4px; }
.af-arc-verdict { display: flex; align-items: baseline; gap: 9px; margin-bottom: 8px; font-size: 0.85rem;
    line-height: 1.45; }
.af-arc-note { display: block; margin-bottom: 6px; text-decoration: none; color: inherit; }
.af-arc-note:hover { background: var(--af-surface-2, #f8fafc); }
.af-dropped { color: #b45309; }
.af-against { display: flex; align-items: baseline; gap: 9px; margin: 10px 0; padding: 9px;
    border: 1px solid var(--af-border); border-radius: 9px; background: var(--af-surface-2, #f8fafc);
    font-size: 0.85rem; line-height: 1.45; }
.af-ceiling { display: block; margin-top: 2px; font-size: 0.78rem; color: var(--af-muted); }
.af-arc-already { margin-top: 5px; padding-top: 5px; border-top: 1px dotted var(--af-border);
    font-size: 0.74rem; color: var(--af-muted); }
.af-arc-where { font-size: 0.7rem; text-transform: uppercase; letter-spacing: .04em; color: var(--af-muted); }

/* Newest first, or the order somebody put them in. Shared, because a reading order is content. */
.af-order-switch { display: inline-flex; gap: 1px; }
.af-order-switch { margin-right: 8px; }
.af-order-switch button { padding: 5px 12px; white-space: nowrap; border: 1px solid var(--af-border); background: #fff;
    font: inherit; font-size: 0.72rem; color: var(--af-muted); cursor: pointer; }
.af-order-switch button:first-child { border-radius: 999px 0 0 999px; }
.af-order-switch button:last-child { border-radius: 0 999px 999px 0; }
.af-order-switch button.on { background: var(--af-primary-soft); color: var(--af-primary); font-weight: 600; }
.af-row-moving { opacity: .4; }

.af-template-ask { padding: 9px 12px; border-top: 1px solid var(--af-border); }
.af-template-ask .af-filter { width: 100%; margin: 6px 0; }

/* Who may see a page. Deliberately plain: this is a decision, not a feature to explore. */
.af-access { width: 460px; }
.af-access-choice { display: flex; align-items: center; gap: 9px; width: 100%; margin-bottom: 6px; padding: 9px 11px;
    border: 1px solid var(--af-border); border-radius: 9px; background: #fff; font: inherit; font-size: 0.86rem;
    text-align: left; cursor: pointer; }
.af-access-choice:hover { border-color: var(--af-muted); }
.af-access-choice.on { border-color: var(--af-primary); background: var(--af-primary-soft); font-weight: 600; }
.af-access-note { margin: 2px 0 8px; font-size: 0.78rem; color: var(--af-muted); }
.af-access-lock { display: flex; align-items: center; gap: 8px; margin: 10px 0 4px; font-size: 0.82rem; }
.af-access-person { display: flex; align-items: center; gap: 8px; padding: 5px 0; font-size: 0.84rem; }
.af-access-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.af-access-via { font-size: 0.72rem; color: var(--af-muted); }
.af-access-level { width: 128px; }
.af-newdoc-feet { margin-top: 12px; display: flex; justify-content: flex-end; }

/* A conversation had on another page, about a row shown on this one. Beside the row like every
   other comment, and quieter: it is not this page's argument, it is context. */
.af-thread-away { border-style: dashed; background: #fbfdff; }
.af-away-head { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; margin-bottom: 4px; }
.af-away-where { font-size: 0.7rem; text-transform: uppercase; letter-spacing: .04em; color: var(--af-muted); }
/* Still owed by somebody. The one thing on the card that is work rather than history. */
.af-away-owed { padding: 1px 7px; border-radius: 999px; background: #fef3c7; color: #92400e;
    font-size: 0.68rem; font-weight: 600; }
.af-away-said { margin-top: 4px; font-size: 0.82rem; line-height: 1.45; color: var(--af-text); }
.af-away-who { font-weight: 600; }
.af-away-go { display: inline-block; margin-top: 7px; font-size: 0.74rem; color: var(--af-primary); }
/* Where the thing you just clicked actually is. */
.af-row-found, .af-row-found td { background: var(--af-highlight-active); transition: background .4s ease; }

/* The line from a card to the row it is about. Drawn only for the one under the pointer, because
   twenty of them at once is the mess this replaced. */
.af-leader { position: fixed; inset: 0; z-index: 5; pointer-events: none; }
.af-leader path { fill: none; stroke: var(--af-muted); stroke-width: 1.5; stroke-dasharray: 4 4; opacity: .85; }

/* What can be done to one cell, over the cell it belongs to. */
.af-cell-bar { position: fixed; z-index: 2600; display: inline-flex; align-items: stretch; padding: 2px; border-radius: 9px; background: #1e293b; box-shadow: 0 6px 20px rgba(15, 23, 42, .25); }
.af-cell-act { display: inline-flex; align-items: center; gap: 6px; padding: 5px 9px; border: 0; border-radius: 7px; background: transparent; color: #e2e8f0; font: inherit; font-size: 0.78rem; font-weight: 500; cursor: pointer; white-space: nowrap; }
.af-cell-act:hover { background: #334155; }
.af-cell-act + .af-cell-act { margin-left: 1px; }
.af-cell-act svg { width: 16px; height: 16px; display: block; }
/* A reading of a passage. Deliberately not a panel you can act from: there is nothing to accept. */
.af-reading { position: fixed; z-index: 2600; width: 460px; max-height: 70vh; overflow: auto; padding: 12px;
    border: 1px solid var(--af-border); border-radius: 11px; background: #fff;
    box-shadow: 0 14px 40px rgba(15, 23, 42, .2); }
.af-reading-prompt { margin-bottom: 7px; font-size: 0.8rem; font-weight: 600; }
.af-reading-canned { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 8px; }
.af-reading-chip { padding: 2px 8px; border: 1px solid var(--af-border); border-radius: 999px; background: #fff;
    font: inherit; font-size: 0.72rem; color: var(--af-muted); cursor: pointer; }
.af-reading-chip:hover { color: var(--af-text); border-color: var(--af-muted); }
.af-reading-row { display: flex; gap: 6px; }
.af-reading-row .af-filter { flex: 1; min-width: 0; }
.af-reading-out { margin-top: 10px; font-size: 0.84rem; }
.af-reading-verdict { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: 0.74rem; font-weight: 700; }
.af-reading-verdict.lands { background: #dcfce7; color: #166534; }
.af-reading-verdict.misses { background: #fef3c7; color: #92400e; }
.af-reading-reads { margin-top: 7px; font-weight: 600; line-height: 1.45; }
.af-reading-why { margin-top: 5px; color: var(--af-text); line-height: 1.45; }
.af-reading-head { margin: 11px 0 4px; font-size: 0.7rem; text-transform: uppercase; letter-spacing: .05em; color: var(--af-muted); }
.af-reading-note { padding: 6px 0 6px 9px; border-left: 2px solid var(--af-border); margin-bottom: 4px; }
.af-reading-note.good { border-left-color: #22c55e; }
.af-reading-note.bad { border-left-color: #f59e0b; }
.af-reading-quote { font-style: italic; color: var(--af-muted); line-height: 1.4; }
.af-reading-says { margin-top: 3px; line-height: 1.45; }
.af-reading-page { width: 420px; }
.af-reading-page .af-filter { width: 100%; margin-bottom: 6px; }
.af-score-head { display: flex; align-items: center; gap: 10px; }
.af-score-shape { flex: 1; min-width: 0; font-weight: 700; }
.af-score { padding: 2px 10px; border-radius: 999px; font-size: 0.8rem; font-weight: 700; }
.af-score.good { background: #dcfce7; color: #166534; }
.af-score.fair { background: #fef3c7; color: #92400e; }
.af-score.poor { background: #fee2e2; color: #991b1b; }
.af-score-takeaways { margin: 4px 0 0 18px; padding: 0; line-height: 1.5; }
.af-score-takeaways li { margin-bottom: 3px; }
/* The quote is the location: clicking it selects those words in the page. */
.af-score-find { cursor: pointer; }
.af-score-find:hover { background: var(--af-surface-2, #f8fafc); }

/* toolbar shown while the caret is inside a table */
.af-table-toolbar { position: absolute; z-index: 4; display: flex; flex-wrap: wrap; gap: 2px; padding: 3px; background: #1e293b; border-radius: 8px; box-shadow: 0 6px 20px rgba(15, 23, 42, .25); }
.af-table-btn { border: 0; background: transparent; color: #e2e8f0; font: inherit; font-size: 0.72rem; font-weight: 500; padding: 4px 8px; border-radius: 5px; cursor: pointer; white-space: nowrap; }
.af-table-btn:hover { background: #334155; }
.af-table-btn.danger:hover { background: #7f1d1d; color: #fff; }

@media (max-width: 820px) {
    .af-insert-btn { left: -30px; }
    .af-table-toolbar { flex-wrap: wrap; max-width: 100%; }
}

/* insert-menu actions (checklist / bulleted / numbered) */
.af-insert-actions { display: flex; flex-direction: column; margin: -4px -4px 8px; padding-bottom: 6px; border-bottom: 1px solid var(--af-border); }
.af-insert-action { display: flex; align-items: center; gap: 9px; width: 100%; padding: 7px 8px; border: 0; border-radius: 7px; background: transparent; font: inherit; font-size: 0.84rem; color: var(--af-text); cursor: pointer; text-align: left; }
.af-insert-action:hover { background: var(--af-primary-soft); }
.af-insert-icon { display: flex; color: var(--af-muted); }
/* The icons carry no width of their own, so that every place they are used agrees on one
   size. An SVG with neither attribute nor rule falls back to 300x150. */
.af-insert-icon svg, .af-insert-btn svg { width: 16px; height: 16px; flex: none; display: block; }
.af-insert-action:hover .af-insert-icon { color: var(--af-primary); }
.af-insert-hint { margin-left: auto; color: var(--af-faint); font-size: 0.72rem; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }

/* checklist items in the document */
.af-editor .ql-editor li[data-list="unchecked"] > .ql-ui, .af-editor .ql-editor li[data-list="checked"] > .ql-ui { cursor: pointer; }

/* export links in the document bar */

/* export menu */
.af-export-wrap { position: relative; }
.af-btn-outline { background: #fff; border: 1px solid var(--af-border); color: var(--af-text); display: inline-flex; align-items: center; gap: 4px; padding: 5px 8px 5px 10px; }
.af-btn-outline:hover { border-color: #c7d2fe; background: #fafbff; }
.af-export-backdrop { position: fixed; inset: 0; z-index: 15; }
.af-export-menu { position: absolute; right: 0; top: calc(100% + 6px); z-index: 16; min-width: 210px; padding: 4px; background: #fff; border: 1px solid var(--af-border); border-radius: 10px; box-shadow: 0 12px 34px rgba(15, 23, 42, .16); }
.af-export-item { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 7px; color: var(--af-text); text-decoration: none; font-size: 0.85rem; }
.af-export-item:hover { background: var(--af-primary-soft); color: var(--af-primary); }
.af-export-ext { margin-left: auto; color: var(--af-faint); font-size: 0.72rem; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.af-export-sep { height: 1px; background: var(--af-border); margin: 4px 6px; }

/* The comments toggle: one pill holding the icon and the number, sized to sit level with the star
   and the menu beside it. A digit dropped into a round icon button sat off its baseline and made
   the button wider than its neighbours, which is what made the bar look broken. */
.af-comments-toggle { display: inline-flex; align-items: center; gap: 5px; height: 30px;
    padding: 0 9px; border: 1px solid transparent; border-radius: 999px; background: none;
    color: var(--af-faint); cursor: pointer; line-height: 1;
    transition: color .12s ease, background-color .12s ease, border-color .12s ease; }
.af-comments-toggle:hover { color: var(--af-text); background: rgba(15, 23, 42, .055); }
/* Lit only when the conversations are put away, because that is the state somebody needs telling
   about: the margin is gone and the tables have taken the width. */
.af-comments-toggle.away { color: var(--af-primary); background: var(--af-primary-soft);
    border-color: var(--af-primary-soft); }
.af-comments-count { font-size: 0.74rem; font-weight: 650; font-variant-numeric: tabular-nums; }

/* Comments put away: the page takes the whole width it is given.
   Prose keeps its measure, because a line of text eighteen hundred pixels long is unreadable and
   nobody asked for that. Tables take all of it, which is the reason to put the comments away. */
.af-doc-grid.af-comments-hidden { grid-template-columns: minmax(0, 1fr); }
.af-doc-grid.af-comments-hidden .af-margin { display: none; }
.af-doc-grid.af-comments-hidden .ql-editor > *:not(.af-component) { max-width: 1060px; }
.af-doc-grid.af-comments-hidden .af-title,
.af-doc-grid.af-comments-hidden .af-doc-meta { max-width: 1060px; }
.af-doc-grid.af-comments-hidden .af-component { width: auto; }

/* status column: pills in the document and in the picker */
.af-status, .af-status-preview { display: inline-flex; align-items: center; padding: 1px 9px; border-radius: 999px; font-size: 0.78rem; font-weight: 600; line-height: 1.6; white-space: nowrap; user-select: none; cursor: pointer; }
.af-status::before, .af-status-preview::before { content: ""; width: 6px; height: 6px; border-radius: 50%; margin-right: 6px; background: currentColor; }
.af-status[data-value="on-track"], .af-status-preview[data-value="on-track"] { background: #dcfce7; color: #166534; }
.af-status[data-value="at-risk"], .af-status-preview[data-value="at-risk"] { background: #fef3c7; color: #92400e; }
.af-status[data-value="off-track"], .af-status-preview[data-value="off-track"] { background: #fee2e2; color: #991b1b; }
.af-status[data-value="none"], .af-status-preview[data-value="none"] { background: #f1f5f9; color: #64748b; }
.af-status-menu { position: fixed; z-index: 2400; display: flex; flex-direction: column; gap: 2px; padding: 5px; background: #fff; border: 1px solid var(--af-border); border-radius: 10px; box-shadow: 0 12px 34px rgba(15, 23, 42, .16); }
.af-status-option { display: flex; padding: 4px 6px; border: 0; border-radius: 7px; background: transparent; cursor: pointer; }
.af-status-option:hover { background: var(--af-bg-soft); }
.af-table-btn.accent { color: #a5b4fc; }

/* ---- column types: dropdown values, header marker, picker, editor ----------------------------- */

.af-select, .af-choice-chip { display: inline-flex; align-items: center; padding: 1px 9px; border-radius: 999px; font-size: 0.78rem; font-weight: 600; line-height: 1.6; white-space: nowrap; user-select: none; cursor: pointer; }
.af-select::before, .af-choice-chip::before { content: ""; width: 6px; height: 6px; border-radius: 50%; margin-right: 6px; background: currentColor; }
.af-select[data-color="empty"] { background: transparent; color: var(--af-faint); border: 1px dashed var(--af-border); font-weight: 500; }
.af-select[data-color="empty"]::before { display: none; }

[data-color="gray"].af-select, [data-color="gray"].af-choice-chip, .af-coled-swatch[data-color="gray"] { background: #f1f5f9; color: #475569; }
[data-color="blue"].af-select, [data-color="blue"].af-choice-chip, .af-coled-swatch[data-color="blue"] { background: #dbeafe; color: #1e40af; }
[data-color="green"].af-select, [data-color="green"].af-choice-chip, .af-coled-swatch[data-color="green"] { background: #dcfce7; color: #166534; }
[data-color="amber"].af-select, [data-color="amber"].af-choice-chip, .af-coled-swatch[data-color="amber"] { background: #fef3c7; color: #92400e; }
[data-color="red"].af-select, [data-color="red"].af-choice-chip, .af-coled-swatch[data-color="red"] { background: #fee2e2; color: #991b1b; }
[data-color="purple"].af-select, [data-color="purple"].af-choice-chip, .af-coled-swatch[data-color="purple"] { background: #f3e8ff; color: #6b21a8; }
[data-color="teal"].af-select, [data-color="teal"].af-choice-chip, .af-coled-swatch[data-color="teal"] { background: #ccfbf1; color: #115e59; }
[data-color="pink"].af-select, [data-color="pink"].af-choice-chip, .af-coled-swatch[data-color="pink"] { background: #fce7f3; color: #9d174d; }

/* the ▾ in a dropdown column's header: click to edit the column */
.af-coltype { display: inline-flex; margin-left: 6px; padding: 0 5px; border-radius: 5px; font-size: 0.72rem; font-weight: 600; color: var(--af-primary); background: var(--af-primary-soft); cursor: pointer; user-select: none; }

.af-choice-menu { position: fixed; z-index: 2400; display: flex; flex-direction: column; gap: 2px; min-width: 160px; padding: 5px; background: #fff; border: 1px solid var(--af-border); border-radius: 10px; box-shadow: 0 12px 34px rgba(15, 23, 42, .16); }
.af-choice-option { display: flex; align-items: center; padding: 5px 7px; border: 0; border-radius: 7px; background: transparent; font: inherit; font-size: 0.82rem; text-align: left; cursor: pointer; }
.af-choice-option:hover { background: var(--af-bg-soft); }
.af-choice-option.muted { color: var(--af-muted); }
.af-choice-option.muted:first-of-type { border-top: 1px solid var(--af-border); }

.af-coled { position: fixed; z-index: 2500; width: 300px; max-width: calc(100vw - 24px); max-height: calc(100vh - 16px); overflow-y: auto; box-sizing: border-box; padding: 12px; background: #fff; border: 1px solid var(--af-border); border-radius: 12px; box-shadow: 0 16px 40px rgba(15, 23, 42, .18); font-size: 0.84rem; }
.af-coled-title { font-weight: 600; margin-bottom: 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.af-coled-kinds { display: flex; gap: 4px; padding: 3px; background: var(--af-bg-soft); border-radius: 8px; margin-bottom: 10px; }
.af-coled-kind { flex: 1; border: 0; border-radius: 6px; padding: 5px; background: transparent; font: inherit; color: var(--af-muted); cursor: pointer; }
.af-coled-kind.on { background: #fff; color: var(--af-text); font-weight: 600; box-shadow: 0 1px 3px rgba(15, 23, 42, .12); }
.af-coled-label { display: block; margin: 8px 0 4px; font-size: 0.72rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--af-faint); }
.af-coled-select, .af-coled-input { width: 100%; box-sizing: border-box; padding: 5px 8px; border: 1px solid var(--af-border); border-radius: 7px; font: inherit; font-size: 0.84rem; color: var(--af-text); background: #fff; outline: none; }
.af-coled-select:focus, .af-coled-input:focus { border-color: #a5b4fc; box-shadow: 0 0 0 3px rgba(99, 102, 241, .12); }
.af-coled-options { display: flex; flex-direction: column; gap: 5px; }
.af-coled-row { display: flex; align-items: center; gap: 6px; }
.af-coled-swatch { flex: none; width: 22px; height: 22px; border: 0; border-radius: 50%; cursor: pointer; box-shadow: inset 0 0 0 2px rgba(15, 23, 42, .12); }
.af-coled-remove { flex: none; width: 24px; height: 24px; border: 0; border-radius: 6px; background: transparent; color: var(--af-faint); font-size: 1rem; cursor: pointer; }
.af-coled-remove:hover { background: #fef2f2; color: #dc2626; }
.af-coled-add { margin-top: 6px; border: 0; background: transparent; color: var(--af-primary); font: inherit; font-weight: 500; cursor: pointer; padding: 3px 0; }
.af-coled-save { display: flex; gap: 6px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--af-border); }
.af-coled-save .af-btn { flex: none; }
.af-coled-note { margin-top: 6px; font-size: 0.75rem; color: var(--af-muted); }
.af-coled-foot { display: flex; justify-content: flex-end; gap: 6px; margin-top: 12px; }

/* ---- Folders (standalone shell) ---- */
.af-folders { margin: 10px 10px 0; }
.af-folders-head { display: flex; align-items: center; justify-content: space-between; margin: 8px 0 4px; padding: 3px 4px 3px 12px; border-radius: 6px; font-size: 0.7rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--af-faint); border: 1px dashed transparent; }
.af-folder-row { position: relative; display: flex; align-items: center; gap: 2px; min-height: 30px; padding-right: 4px; border-radius: 6px; font-size: 0.84rem; color: #475569; cursor: pointer; border: 1px dashed transparent; }
.af-folder-row:hover { background: #eef2f7; }
.af-folder-row.active { background: var(--af-primary-soft); color: var(--af-primary); font-weight: 500; }
.af-folder-toggle { flex: none; width: 20px; height: 20px; display: inline-flex; align-items: center; justify-content: center; padding: 0; border: 0; background: none; color: var(--af-faint); cursor: pointer; border-radius: 4px; }
.af-folder-toggle:hover { color: var(--af-text); }
.af-folder-name { flex: 1; min-width: 0; display: flex; align-items: center; gap: 7px; padding: 5px 0; color: inherit; text-decoration: none; }
.af-folder-name span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.af-folder-actions { display: none; flex: none; gap: 1px; }
.af-folder-row:hover .af-folder-actions { display: inline-flex; }
.af-folder-btn { width: 24px; height: 24px; display: inline-flex; align-items: center; justify-content: center; padding: 0; border: 0; background: none; border-radius: 5px; color: var(--af-muted); cursor: pointer; }
.af-folder-btn:hover { background: #e2e8f0; color: var(--af-text); }
.af-folder-btn.danger:hover { background: #fee2e2; color: #dc2626; }
.af-folder-btn .mud-icon-root { font-size: 1rem; }
.af-folder-input { width: 100%; box-sizing: border-box; margin: 2px 0; padding: 4px 8px; font: inherit; font-size: 0.84rem; border: 1px solid var(--af-primary); border-radius: 6px; outline: none; box-shadow: 0 0 0 3px var(--af-primary-soft); }
.af-folder-row .af-folder-input { flex: 1; min-width: 0; }
.af-folders-empty { padding: 4px 12px 6px; color: var(--af-faint); font-size: 0.8rem; }
.af-drop-over { background: var(--af-primary-soft) !important; border-color: var(--af-primary) !important; color: var(--af-primary) !important; }
[draggable=true] { -webkit-user-drag: element; }

/* Folder page and document list */
.af-crumbs { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; font-size: 0.85rem; }
.af-crumbs .af-crumb { padding: 2px 6px; margin: 0 -6px; border-radius: 5px; border: 1px dashed transparent; }
.af-page-head h1.af-folder-title { display: flex; align-items: center; gap: 10px; }
.af-page-head h1.af-folder-title .mud-icon-root { color: #f59e0b; font-size: 1.8rem; }
.af-page-head .af-btn + .af-btn { margin-left: 8px; }
.af-folder-icon { color: #f59e0b; margin-top: 1px; }
.af-folder-list-row { border-left: 0; border-right: 0; border-top: 0; }
.af-folder-list-row.af-drop-over { outline: 2px dashed var(--af-primary); outline-offset: -3px; }
.af-inline-create { max-width: 320px; margin-bottom: 12px; }
.af-doc-folder-tag { display: inline-flex; align-items: center; gap: 3px; margin-left: 8px; padding: 1px 7px 1px 5px; border-radius: 999px; background: #fef3c7; color: #92400e; font-size: 0.7rem; font-weight: 500; vertical-align: 2px; }
.af-doc-folder-tag .mud-icon-root { font-size: 0.85rem; }

/* Move-to-folder dropdown on the document bar */
.af-move-menu { max-height: 360px; overflow-y: auto; min-width: 230px; }
.af-move-menu .af-export-item { width: 100%; border: 0; background: none; cursor: pointer; text-align: left; font-family: inherit; }
.af-move-menu .af-export-item span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.af-move-menu .af-export-item.current { color: var(--af-primary); font-weight: 600; }
.af-move-empty { padding: 8px 10px; color: var(--af-muted); font-size: 0.8rem; }

/* ---- tags and action items in the document ---- */
.af-mention-chip { color: var(--af-mention); background: var(--af-mention-bg); border-radius: 4px; padding: 1px 4px; font-weight: 500; white-space: nowrap; }
.af-action-chip { display: inline-flex; align-items: center; gap: 5px; vertical-align: baseline; margin: 0 2px; padding: 1px 8px 1px 3px; border: 1px solid var(--af-border); border-radius: 999px; background: #fff; font-size: 0.85em; line-height: 1.6; cursor: pointer; white-space: nowrap; }
.af-action-chip:hover { border-color: var(--af-primary); background: var(--af-primary-soft); }
.af-chip-avatar { width: 18px; height: 18px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: #fff; font-size: 0.6rem; font-weight: 700; letter-spacing: 0.02em; }
.af-chip-name { font-weight: 500; color: var(--af-text); }
.af-datecell { display: inline-flex; align-items: center; padding: 1px 7px; border: 1px solid var(--af-border); border-radius: 999px; background: #fff; color: var(--af-text); font-size: 0.85em; line-height: 1.5; cursor: pointer; white-space: nowrap; }
.af-datecell:hover { border-color: var(--af-primary); background: var(--af-primary-soft); }
.af-datecell[data-state="empty"] { color: var(--af-faint); border-style: dashed; }
.af-datecell[data-state="overdue"] { color: #dc2626; border-color: #fecaca; background: #fef2f2; font-weight: 600; }
.af-datecell[data-state="today"] { color: #b45309; border-color: #fde68a; background: #fffbeb; font-weight: 600; }
.af-choice-date { margin: 4px 1px; padding: 5px 7px; border: 1px solid var(--af-border); border-radius: 7px; font: inherit; font-size: 0.82rem; }
.af-chip-due { margin-left: 2px; padding-left: 7px; border-left: 1px solid var(--af-border); color: var(--af-muted); font-size: 0.95em; }
.af-chip-due[data-state="overdue"] { color: #dc2626; font-weight: 600; }
.af-chip-due[data-state="today"] { color: #b45309; font-weight: 600; }
.ql-editor li[data-list="checked"] .af-action-chip { opacity: .55; }
.af-chip-flash { animation: af-chip-flash 2s ease-out; }
@keyframes af-chip-flash { 0%, 60% { background: var(--af-highlight-active); border-color: var(--af-highlight-line); } 100% { background: #fff; } }

/* the @ picker inside the document */
.af-mention-head { padding: 6px 12px 4px; color: var(--af-faint); font-size: 0.68rem; font-weight: 600; letter-spacing: 0.07em; text-transform: uppercase; }

/* who it's for, when it's due */
.af-chip-editor { position: fixed; z-index: 1400; width: 250px; padding: 10px; background: #fff; border: 1px solid var(--af-border); border-radius: 10px; box-shadow: 0 16px 40px rgba(15, 23, 42, .18); max-height: calc(100vh - 24px); overflow-y: auto; }
.af-chip-label { margin: 4px 2px; color: var(--af-faint); font-size: 0.68rem; font-weight: 600; letter-spacing: 0.07em; text-transform: uppercase; }
.af-chip-people { display: flex; flex-direction: column; gap: 1px; }
.af-chip-person { display: flex; align-items: center; gap: 8px; width: 100%; padding: 5px 6px; border: 0; border-radius: 6px; background: none; font: inherit; font-size: 0.85rem; text-align: left; cursor: pointer; }
.af-chip-person:hover { background: var(--af-bg-soft); }
.af-chip-person.active { background: var(--af-primary-soft); color: var(--af-primary); font-weight: 600; }
.af-chip-person .af-avatar { width: 20px; height: 20px; font-size: 0.62rem; }
.af-chip-dates { display: flex; flex-wrap: wrap; gap: 4px; }
.af-chip-date { padding: 4px 9px; border: 1px solid var(--af-border); border-radius: 999px; background: #fff; font: inherit; font-size: 0.78rem; cursor: pointer; }
.af-chip-date:hover { border-color: var(--af-primary); color: var(--af-primary); }
.af-chip-date.active { background: var(--af-primary); border-color: var(--af-primary); color: #fff; }
.af-chip-datepicker { width: 100%; margin-top: 6px; padding: 5px 8px; border: 1px solid var(--af-border); border-radius: 6px; font: inherit; font-size: 0.82rem; }
.af-chip-foot { display: flex; justify-content: space-between; align-items: center; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--af-border); }
.af-chip-remove { color: #dc2626 !important; }

/* ---- My Work ---- */
.af-nav-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 18px; margin-left: 6px; padding: 0 6px; border-radius: 999px; background: var(--af-primary); color: #fff; font-size: 0.68rem; font-weight: 700; }
.af-filters { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
.af-filter { padding: 6px 10px; border: 1px solid var(--af-border); border-radius: 8px; background: #fff; font: inherit; font-size: 0.84rem; color: var(--af-text); }
.af-filter-check { display: inline-flex; align-items: center; gap: 6px; color: var(--af-muted); font-size: 0.84rem; cursor: pointer; }
.af-work-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; align-items: start; }
@media (max-width: 1100px) { .af-work-grid { grid-template-columns: 1fr; } }
.af-work-col { min-width: 0; }
.af-work-head { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; font-size: 0.95rem; font-weight: 700; letter-spacing: -0.01em; }
.af-work-head.mt { margin-top: 30px; }
.af-work-count { display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 20px; padding: 0 7px; border-radius: 999px; background: var(--af-bg-soft); color: var(--af-muted); font-size: 0.72rem; font-weight: 700; }
.af-work-empty { padding: 14px 16px; border: 1px dashed var(--af-border); border-radius: 10px; color: var(--af-muted); font-size: 0.85rem; }
.af-work-bucket { display: flex; align-items: center; gap: 8px; margin: 16px 0 6px; color: var(--af-faint); font-size: 0.7rem; font-weight: 600; letter-spacing: 0.07em; text-transform: uppercase; }
.af-work-bucket span { color: var(--af-faint); font-weight: 600; }
.af-work-bucket.overdue { color: #dc2626; }
.af-work-bucket.overdue span { color: #dc2626; }

.af-action-row { display: flex; align-items: flex-start; gap: 8px; padding: 9px 10px; border: 1px solid var(--af-border); border-radius: 10px; margin-bottom: 6px; background: #fff; transition: border-color .12s, background .12s; }
.af-action-row:hover { border-color: #cbd5e1; background: var(--af-bg-soft); }
.af-action-row.overdue { border-left: 3px solid #dc2626; }
.af-action-row.done .af-action-text { text-decoration: line-through; color: var(--af-faint); }
.af-action-check { flex: none; display: inline-flex; padding: 0; margin-top: 1px; border: 0; background: none; color: var(--af-muted); cursor: pointer; }
.af-action-check:hover { color: var(--af-primary); }
.af-action-row.done .af-action-check { color: var(--af-primary); }
.af-action-body { flex: 1; min-width: 0; color: inherit; text-decoration: none; }
.af-action-text { font-size: 0.9rem; line-height: 1.35; }
.af-action-meta { display: flex; align-items: center; gap: 5px; margin-top: 3px; color: var(--af-muted); font-size: 0.76rem; }
.af-action-doc { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 180px; }
.af-action-due { font-weight: 600; }
.af-action-due.overdue { color: #dc2626; }

.af-callout { display: flex; gap: 8px; padding: 9px 10px; margin-bottom: 6px; border: 1px solid var(--af-border); border-radius: 10px; background: #fff; color: inherit; text-decoration: none; }
.af-callout:hover { border-color: #cbd5e1; background: var(--af-bg-soft); }
.af-callout > .mud-icon-root { color: var(--af-faint); margin-top: 2px; }
.af-callout-body { min-width: 0; }
.af-callout-text { font-size: 0.87rem; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.af-callout-meta { display: flex; gap: 5px; margin-top: 3px; color: var(--af-muted); font-size: 0.76rem; }

/* An action item off a checklist line (a paragraph, a table cell) carries its own checkbox. */
.af-chip-check { width: 13px; height: 13px; flex: none; display: inline-flex; align-items: center; justify-content: center; margin-left: 2px; border: 1.5px solid var(--af-faint); border-radius: 3px; color: var(--af-primary); font-size: 10px; font-weight: 700; line-height: 1; }
.af-chip-check:hover { border-color: var(--af-primary); background: var(--af-primary-soft); }
.af-action-chip[data-done="true"] { opacity: .6; }
.af-action-chip[data-done="true"] .af-chip-name { text-decoration: line-through; }
.ql-editor li[data-list] .af-chip-check { display: none; }   /* the line's own checkbox is the tick */

/* A task row: one tick in a checkbox column, and the row reads as done when it is ticked. The row
   styles itself from the tick (:has), so nothing is ever written into the text to strike it. */
.af-check { display: inline-flex; align-items: center; justify-content: center; width: 15px; height: 15px; vertical-align: -2px; border: 1.5px solid var(--af-faint); border-radius: 3px; background: #fff; color: var(--af-primary); font-size: 11px; font-weight: 700; line-height: 1; cursor: pointer; user-select: none; }
.af-check:hover { border-color: var(--af-primary); background: var(--af-primary-soft); }
.af-check[data-done="true"] { border-color: var(--af-primary); background: var(--af-primary-soft); }
.af-editor .ql-editor td:has(.af-check) { text-align: center; }
.af-editor .ql-editor tr:has(.af-check[data-done="true"]) td { text-decoration: line-through; color: var(--af-muted); }
.af-editor .ql-editor tr:has(.af-check[data-done="true"]) td:has(.af-check) { text-decoration: none; }
.af-editor .ql-editor tr:has(.af-check[data-done="true"]) .af-select,
.af-editor .ql-editor tr:has(.af-check[data-done="true"]) .af-action-chip,
.af-editor .ql-editor tr:has(.af-check[data-done="true"]) .af-mention-chip { text-decoration: none; opacity: 0.6; }
.af-editor .ql-editor tr:has(.af-check[data-done="true"]) img { opacity: 0.5; }
.af-coltype[data-kind="check"] { margin-left: 0; padding: 0 3px; }

/* ---- questions ("needs an answer") ---- */
.af-ask-row { display: flex; align-items: center; gap: 10px; margin: 8px 2px 0; }
.af-ask-toggle { display: inline-flex; align-items: center; gap: 6px; color: var(--af-muted); font-size: 0.8rem; cursor: pointer; }
.af-ask-due { padding: 3px 6px; border: 1px solid var(--af-border); border-radius: 6px; font: inherit; font-size: 0.78rem; }
.af-ask-note { margin: 4px 2px 0; color: var(--af-faint); font-size: 0.75rem; }
.af-thread-ask { display: flex; align-items: center; gap: 5px; margin: 0 0 8px; padding: 3px 8px; border-radius: 999px; font-size: 0.75rem; font-weight: 600; width: fit-content; }
.af-thread-ask.waiting { background: #fef3c7; color: #92400e; }
.af-thread-ask.answered { background: #dcfce7; color: #166534; }
.af-thread-ask .mud-icon-root { font-size: 0.95rem; }
.af-thread-ask-due { font-weight: 500; opacity: .85; }

.af-ask-item { display: flex; align-items: flex-start; gap: 8px; padding: 9px 10px; margin-bottom: 6px; border: 1px solid var(--af-border); border-radius: 10px; background: #fff; color: inherit; text-decoration: none; }
.af-ask-item:hover { border-color: #cbd5e1; background: var(--af-bg-soft); }
.af-ask-item.overdue { border-left: 3px solid #dc2626; }
.af-ask-item > .mud-icon-root { color: #b45309; margin-top: 2px; flex: none; }
.af-ask-body { flex: 1; min-width: 0; }
.af-ask-text { font-size: 0.88rem; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.af-ask-meta { display: flex; align-items: center; gap: 5px; margin-top: 3px; color: var(--af-muted); font-size: 0.76rem; }
.af-ask-go { flex: none; align-self: center; padding: 3px 9px; border-radius: 999px; background: var(--af-primary-soft); color: var(--af-primary); font-size: 0.72rem; font-weight: 700; }

/* ---- organizations ---- */
.af-org-wrap { position: relative; margin-left: 14px; }
.af-org-btn { display: inline-flex; align-items: center; gap: 7px; padding: 4px 6px 4px 4px; border: 1px solid transparent; border-radius: 8px; background: none; font: inherit; font-size: 0.85rem; color: var(--af-text); cursor: pointer; }
.af-org-btn:hover { background: var(--af-bg-soft); border-color: var(--af-border); }
.af-org-mark { width: 24px; height: 24px; flex: none; border-radius: 6px; background: #334155; color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 0.66rem; font-weight: 700; letter-spacing: 0.02em; }
.af-org-name { font-weight: 600; max-width: 180px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.af-org-menu { position: absolute; left: 0; top: calc(100% + 6px); z-index: 16; min-width: 280px; padding: 4px; background: #fff; border: 1px solid var(--af-border); border-radius: 10px; box-shadow: 0 12px 34px rgba(15, 23, 42, .16); }
.af-org-menu-head { padding: 6px 10px 4px; color: var(--af-faint); font-size: 0.68rem; font-weight: 600; letter-spacing: 0.07em; text-transform: uppercase; }
.af-org-item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 7px 10px; border: 0; border-radius: 7px; background: none; font: inherit; font-size: 0.85rem; text-align: left; color: var(--af-text); cursor: pointer; }
.af-org-item:hover { background: var(--af-primary-soft); }
.af-org-item.current { font-weight: 600; }
.af-org-item-name { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.af-org-item-meta { color: var(--af-muted); font-size: 0.72rem; font-weight: 400; }
.af-org-blurb { max-width: 640px; margin: -6px 0 22px; color: var(--af-muted); font-size: 0.88rem; line-height: 1.5; }

.af-member-row { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--af-border); }
.af-member-edit { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.af-member-edit .af-filter { min-width: 180px; }
.af-member-row:last-child { border-bottom: 0; }
.af-member-who { flex: 1; min-width: 0; }
.af-member-name { font-weight: 600; font-size: 0.9rem; }
.af-member-meta { color: var(--af-muted); font-size: 0.78rem; margin-top: 2px; }
.af-member-role { color: var(--af-muted); font-size: 0.8rem; }

/* ---- where you land at sign-in ---- */
.af-startup { display: flex; flex-direction: column; gap: 10px; margin: -6px 0 4px; }
.af-startup-choice { display: flex; align-items: flex-start; gap: 10px; font-size: 0.88rem; cursor: pointer; }
.af-startup-choice input { margin-top: 3px; }
.af-startup-choice > span { display: flex; flex-direction: column; gap: 4px; }
.af-startup-note { color: var(--af-muted); font-size: 0.8rem; }
.af-startup-pick { max-width: 280px; }

/* ---- links to other documents ---- */
/* the rail, and the page that browsing moved to */
.af-nav-section { display: flex; align-items: baseline; justify-content: space-between; }
.af-nav-more { font-size: 0.72rem; font-weight: 500; color: var(--af-faint); text-decoration: none; }
.af-nav-more:hover { color: var(--af-primary); }
.af-nav-empty { padding: 2px 14px 8px; font-size: 0.76rem; color: var(--af-faint); line-height: 1.4; }

.af-browse-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 14px; flex-wrap: wrap; }
.af-browse-trail { display: flex; align-items: center; gap: 6px; font-size: 1.05rem; font-weight: 600; min-width: 0; flex-wrap: wrap; }
.af-browse-trail a { color: var(--af-muted); text-decoration: none; }
.af-browse-trail a:hover { color: var(--af-primary); }
.af-browse-trail a.here { color: var(--af-text); }
.af-browse-sep { color: var(--af-faint); font-weight: 400; }
.af-browse-tools { display: flex; align-items: center; gap: 8px; }
.af-browse-current { margin-bottom: 12px; }
.af-browse-sub { color: var(--af-faint); }
.af-browse-owner { font-size: 0.8rem; color: var(--af-muted); min-width: 110px; }
.af-browse-open { display: inline-flex; color: var(--af-faint); }
.af-browse-open:hover { color: var(--af-primary); }
.af-browse-delete { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; padding: 0; border: 0; border-radius: 7px; background: none; color: var(--af-faint); cursor: pointer; opacity: 0; }
.af-browse-row:hover .af-browse-delete { opacity: 1; }
.af-browse-delete:hover { color: #b91c1c; background: #fef2f2; }
.af-bin-note { color: var(--af-muted); font-size: 0.86rem; margin: 6px 0 16px; }
.af-setup-add { display: flex; align-items: center; gap: 8px; margin: 14px 0; }
.af-setup-add .af-filter { flex: 1; max-width: 420px; }
.af-setup-team { border: 1px solid var(--af-border); border-radius: 10px; margin-bottom: 10px; background: #fff; }
.af-setup-head { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto 200px 120px 30px; align-items: center; gap: 10px; padding: 8px 10px; }
.af-setup-work { border-top: 1px solid var(--af-border); padding: 4px 10px 10px 44px; }
.af-setup-row { display: grid; grid-template-columns: minmax(0, 1fr) auto 200px 120px 30px; align-items: center; gap: 10px; padding: 4px 0; }
.af-setup-name { width: 100%; min-width: 0; padding: 5px 7px; border: 1px solid transparent; border-radius: 6px; background: none; font: inherit; font-size: 0.92rem; color: var(--af-text); }
.af-setup-name:hover { border-color: var(--af-border); }
.af-setup-name:focus { outline: none; border-color: var(--af-primary); background: #fff; }
.af-setup-label { font-size: 0.76rem; color: var(--af-faint); }
.af-setup-lead { max-width: 200px; }
.af-setup-head .af-browse-count,
.af-setup-row .af-browse-count { text-align: right; }
.af-bin-icon { color: var(--af-faint); }
.af-bin-what { display: grid; gap: 1px; min-width: 0; }
.af-bin-name { font-size: 0.9rem; color: var(--af-text); }
.af-page-narrow .af-browse-row { grid-template-columns: 24px minmax(0, 1fr) auto; }
.af-browse-search { max-width: 280px; }
/* Browsing has one column of content, not the whole window. Stretched the full width the name sat
   on the far left and its own page count on the far right with nothing between them, which is what
   made a short list look broken. */
.af-browse { max-width: 1040px; }
.af-browse-list { display: grid; gap: 0; border: 1px solid var(--af-border); border-radius: 10px;
    overflow: hidden; }
/* Fixed widths on the right so counts, owners and dates line up down the list instead of each row
   placing them wherever its own name happens to end. */
/* Who can see it, said on the row. The whole reason this column exists is that a list of folders
   which does not say which of them are private is a list somebody has to open one at a time. */
/* A team on the list of who can see something. One line about nine people, so it does not read
   like one more person. */
/* Who is on a team, where the team is set up. Chips, because this is a list people scan rather
   than read, and the add control sits on the same line so it is obviously part of the same idea. */
.af-setup-people { display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
    padding: 10px 12px 12px 34px; }
.af-team-chip { display: inline-flex; align-items: center; gap: 6px; padding: 3px 4px 3px 3px;
    border: 1px solid var(--af-border); border-radius: 999px; font-size: 0.8rem; }
.af-team-chip button { border: 0; background: none; color: var(--af-faint); font-size: 0.95rem;
    line-height: 1; cursor: pointer; padding: 0 4px; }
.af-team-chip button:hover { color: #b91c1c; }
.af-team-add { max-width: 170px; }
.af-access-team { display: inline-flex; align-items: center; justify-content: center; width: 22px;
    height: 22px; border-radius: 50%; background: var(--af-primary-soft); color: var(--af-primary); }
.af-access-size { margin-left: 6px; color: var(--af-faint); font-size: 0.74rem; font-weight: 400; }
.af-seen { display: inline-flex; align-items: center; gap: 4px; font-size: 0.76rem;
    color: var(--af-muted); white-space: nowrap; }
.af-seen.shut { color: #92400e; }
/* Locked is not hidden. Its own glyph, its own colour, sitting beside the one that says who can
   see it rather than replacing it, because a page can be both and usually is neither. */
.af-seen.af-locked { color: var(--af-muted); }
/* The second line of a choice: what the words above it actually mean in practice. */
/* The second half of "anyone in this organization": what they may do once they are in the room. */
/* How often any of this reaches somebody who is not looking at it. */
.af-mail-when { display: flex; align-items: center; gap: 8px; margin: -4px 0 16px;
    font-size: 0.84rem; color: var(--af-muted); }
.af-mail-when select { max-width: 340px; }
.af-access-level { display: flex; align-items: center; gap: 8px; margin: -2px 0 6px 34px;
    font-size: 0.85rem; color: var(--af-muted); }
.af-access-level select { max-width: 150px; }
.af-access-level-pick { max-width: 128px; }
.af-access-choice small { display: block; margin-top: 2px; color: var(--af-faint);
    font-size: 0.74rem; font-weight: 400; line-height: 1.35; }
.af-browse-row { display: grid;
    grid-template-columns: 30px minmax(0, 1fr) 150px 120px 104px 64px 26px 26px;
    align-items: center; gap: 12px; padding: 9px 12px; border-top: 1px solid var(--af-border); }
.af-browse-list > .af-browse-row:first-child { border-top: 0; }
.af-browse-list .af-browse-count { text-align: right; }
/* The pages filed here, under the folders that are in it. */
.af-browse-pages { margin-top: 22px; }
.af-browse-pages-head { display: flex; align-items: baseline; justify-content: space-between;
    gap: 12px; margin-bottom: 8px; font-size: 0.82rem; font-weight: 600; color: var(--af-muted); }
.af-browse-row:hover { background: var(--af-bg-soft); }
.af-browse-row.pinned .af-browse-name { font-weight: 600; }
.af-pin { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; padding: 0; border: 0; border-radius: 7px; background: none; color: var(--af-faint); cursor: pointer; }
.af-pin:hover { color: var(--af-primary); background: var(--af-primary-soft); }
.af-pin.on { color: var(--af-primary); }
.af-browse-name { display: flex; align-items: center; gap: 4px; min-width: 0; }
.af-browse-link { display: flex; align-items: center; gap: 8px; color: var(--af-text); text-decoration: none; min-width: 0; }
.af-browse-link:hover { color: var(--af-primary); }
.af-browse-link span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.af-browse-twist { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; flex: none; padding: 0; border: 0; border-radius: 6px; background: none; color: var(--af-faint); cursor: pointer; }
button.af-browse-twist:hover { color: var(--af-primary); background: var(--af-primary-soft); }
.af-browse-count { font-size: 0.8rem; color: var(--af-muted); }
.af-browse-when { font-size: 0.78rem; color: var(--af-faint); min-width: 72px; text-align: right; }

/* a component: a view of an object, sitting in a page */
/* A roll-up is read across, so it takes the room the prose column does not need. The page is a
   720px column inside a wider grid; a component spills into the margin on both sides when there is
   space for it, and stays inside the column when there is not. */
.af-drop-line { position: absolute; height: 2px; background: var(--af-primary); border-radius: 2px; z-index: 8; pointer-events: none; }
.af-component-dragging { opacity: .45; }
.af-component { margin: 18px 0; border: 1px solid var(--af-border); border-radius: 10px; background: #fff; padding: 10px 12px 12px; }
/* Part of the document rather than a view dropped into it: no card, no padding of its own. */
.af-component.af-bare { margin: 2px 0 10px; border: 0; border-radius: 0; background: none; padding: 0; }
/* A component may reach back over the page's own left padding and no further. These were tuned when
   the page floated in the middle of the window; now that it starts at the left, reaching any further
   puts the grip and the fold control underneath the sidebar, where they cannot be clicked. */
@media (min-width: 1200px) {
    .af-component { margin-left: -40px; margin-right: -40px; }
}
/* A component reaches past the text on both sides, but never as far as the margin where the
   conversations are: that column paints over it, so anything at the component's right end, the
   last cell of a row or the button that takes it off the page, could not be clicked at all. With
   the conversations hidden the text column is wider instead, which is where the room went. */
.af-doc-grid.af-comments-hidden .af-component { margin-right: 0; }
/* Widened by hand, so the inline margin it was given wins over the two rules above. The hairline
   says which ones are being shown wider than they would be. */
.af-component.af-component-wide { box-shadow: 0 0 0 1px var(--af-primary-soft); }
/* A suggestion is drawn over the words rather than written into them, so nothing the model thought
   can ever become part of a document. The layer takes no clicks: the words underneath still select. */
.af-suggest-layer { position: absolute; inset: 0; pointer-events: none; z-index: 5; }
.af-suggest-mark { position: absolute; height: 0; border-bottom: 2px dotted var(--af-primary); opacity: .75; }
.af-suggest-panel { position: absolute; left: 0; right: 0; z-index: 7; display: grid; gap: 8px;
    padding: 10px; border: 1px solid var(--af-border); border-radius: 10px; background: #fff;
    box-shadow: 0 10px 28px rgba(15, 23, 42, .12); }
.af-suggest-head { display: flex; align-items: center; gap: 8px; }
.af-suggest-count { flex: 1; font-size: 0.82rem; font-weight: 600; color: var(--af-text); }
.af-suggest-close svg { width: 14px; height: 14px; }
.af-suggest-where { padding: 5px 8px; border: 1px dashed var(--af-primary); border-radius: 7px;
    background: var(--af-primary-soft); color: var(--af-primary); font: inherit; font-size: 0.8rem;
    font-weight: 600; text-align: left; cursor: pointer; }
.af-suggest-where.on { border-style: solid; }
.af-suggest-card { display: grid; gap: 5px; padding: 8px; border: 1px solid var(--af-border);
    border-radius: 8px; background: #fff; }
.af-suggest-what { font-size: 0.74rem; font-weight: 700; letter-spacing: .02em; text-transform: uppercase;
    color: var(--af-muted); }
.af-suggest-quote { padding: 0; border: 0; background: none; font: inherit; font-size: 0.84rem;
    line-height: 1.45; text-align: left; color: var(--af-text); cursor: pointer; }
.af-suggest-quote:hover { color: var(--af-primary); }
.af-suggest-who { font-size: 0.78rem; color: var(--af-muted); }
.af-suggest-who.none { color: #b45309; font-weight: 600; }
.af-suggest-actions { display: flex; align-items: center; gap: 6px; }
.af-suggest-make { font-size: 0.78rem; padding: 4px 10px; }
.af-suggest-make:disabled { opacity: .5; cursor: not-allowed; }
.af-suggest-no { font-size: 0.78rem; color: var(--af-muted); }
/* Arguably a commitment. Shown, never hidden, just quieter than the ones that are not arguable. */
.af-suggest-card.quiet { background: #fbfcfd; }
.af-suggest-card.quiet .af-suggest-what { opacity: .7; }
.af-suggest-rest { padding: 7px; border: 1px dashed var(--af-border); border-radius: 8px;
    background: none; font: inherit; font-size: 0.78rem; color: var(--af-muted); cursor: pointer; }
.af-suggest-rest:hover { border-color: var(--af-primary); color: var(--af-primary); }
/* Waiting from last time. Quiet on purpose: coming back to a page should not mean being handed a
   queue you did not ask for. */
.af-suggest-badge { display: block; width: 100%; padding: 7px 10px; border: 1px solid var(--af-border);
    border-radius: 999px; background: #fff; font: inherit; font-size: 0.78rem; font-weight: 600;
    color: var(--af-muted); cursor: pointer; box-shadow: 0 2px 8px rgba(15, 23, 42, .06); }
.af-suggest-badge:hover { border-color: var(--af-primary); color: var(--af-primary); }
.af-suggest-stale { font-size: 0.74rem; color: #b45309; }
.af-suggest-dupe { font-size: 0.74rem; color: #b45309; font-weight: 600; }
.af-suggest-link { font-size: 0.72rem; color: var(--af-primary); overflow: hidden;
    text-overflow: ellipsis; white-space: nowrap; }

/* ---- platform: the business rather than a workspace ------------------------------------------ */
.af-notice { margin: 12px 0; padding: 10px 12px; border: 1px solid #fde68a; border-radius: 9px;
    background: #fffbeb; color: #92400e; font-size: 0.85rem; }
.af-notice code { background: rgba(0,0,0,.05); padding: 1px 4px; border-radius: 4px; }
.af-spend-top { display: flex; flex-wrap: wrap; gap: 28px; margin: 16px 0 8px; }
.af-spend-figure { display: grid; gap: 2px; }
.af-spend-label { font-size: 0.76rem; color: var(--af-muted); }
.af-spend-money { font-size: 1.6rem; font-weight: 700; color: var(--af-text); }
.af-spend-money.quiet { font-weight: 600; color: var(--af-muted); }
.af-spend-head { margin: 28px 0 6px; font-size: 1rem; }
.af-spend-note { margin: 4px 0 0; color: var(--af-muted); font-size: 0.8rem; max-width: 60ch; }
.af-spend-table { width: 100%; border-collapse: collapse; font-size: 0.88rem; }
.af-spend-table th, .af-spend-table td { padding: 7px 10px; border-bottom: 1px solid var(--af-border);
    text-align: left; }
.af-spend-table th { font-size: 0.76rem; font-weight: 600; color: var(--af-muted); }
.af-spend-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.af-platform-links { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 10px;
    margin: 14px 0 6px; }
.af-platform-link { display: grid; gap: 3px; padding: 11px 13px; border: 1px solid var(--af-border);
    border-radius: 10px; background: #fff; text-decoration: none; }
.af-platform-link:hover { border-color: var(--af-primary); }
.af-platform-link-name { font-size: 0.92rem; font-weight: 600; color: var(--af-text); }
.af-platform-link-what { font-size: 0.78rem; color: var(--af-muted); }
/* The rest of a component's rules live with it, inside its shadow root. */

/* Wider than the new document dialog it shares its shell with, and said with both classes so the
   later rule for that shell does not quietly win on equal specificity. */
.af-newdoc.af-pick { width: min(560px, 92vw); }
.af-pick-list { max-height: 360px; overflow: auto; display: grid; gap: 1px; margin: 8px 0 4px; }
/* One explicit full width column. A button centres its own content in Chrome whatever justify-items
   says, so without a column to fill, every row sat in the middle and the list could not be scanned. */
.af-pick-row { display: grid; grid-template-columns: minmax(0, 1fr); justify-items: start;
    justify-content: start; align-items: start; gap: 1px; text-align: left; padding: 9px 10px;
    border: 0; border-radius: 8px; background: none; font: inherit; cursor: pointer; }
.af-pick-row:hover, .af-pick-row:focus-visible { background: var(--af-primary-soft); outline: none; }
.af-pick-row:hover .af-pick-text { color: var(--af-primary); }
/* A ticked list rather than a list of buttons: the row is the label, so the whole line is the
   target, and the tick keeps the name and the team on one line instead of stacking them. */
.af-partof-row { grid-template-columns: auto minmax(0, 1fr) auto; align-items: center;
    column-gap: 10px; cursor: pointer; }
.af-partof-row .af-pick-meta { justify-self: end; text-align: right; }
.af-partof-tick { width: 15px; height: 15px; margin: 0; accent-color: var(--af-primary); }
/* The answer that is not in the list below it, so it is marked out from the list. */
.af-pick-whole { border: 1px dashed var(--af-border); margin-bottom: 6px; }
.af-pick-whole .af-pick-text { font-weight: 600; }
.af-pick-trail { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 4px 0 2px; font-size: 0.86rem; font-weight: 600; color: var(--af-muted); }
.af-pick-trail .af-btn { font-weight: 500; }
.af-doc-more { padding: 5px 9px; }
.af-doc-menu { min-width: 250px; }
.af-doc-menu .af-export-item { width: 100%; justify-content: flex-start; border: 0; background: none; cursor: pointer; text-align: left; font: inherit; font-size: 0.85rem; }
.af-doc-menu .af-export-item.current { color: var(--af-primary); font-weight: 600; }
.af-doc-menu .af-export-item[disabled] { opacity: .5; cursor: default; }
.af-menu-back { font-weight: 600; }
.af-export-danger { color: #b91c1c; }
.af-export-danger:hover { background: #fef2f2; }
.af-pick-text { width: 100%; font-size: 0.92rem; font-weight: 600; color: var(--af-text);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.af-pick-meta { width: 100%; font-size: 0.76rem; color: var(--af-faint); display: flex; gap: 5px;
    flex-wrap: wrap; }

.af-ref { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; padding: 1px 8px 1px 4px; border: 1px solid var(--af-border); border-radius: 999px; background: #fff; font-size: 0.86rem; line-height: 1.5; cursor: pointer; vertical-align: baseline; }
.af-ref:hover { border-color: var(--af-primary); }
.af-ref[data-done="true"] .af-ref-text { text-decoration: line-through; color: var(--af-faint); }
.af-ref[data-gone] { background: #fef2f2; border-color: #fecaca; }
.af-ref[data-gone] .af-ref-text { text-decoration: line-through; color: #b91c1c; }
.af-ref-tick { width: 15px; height: 15px; flex: none; display: inline-flex; align-items: center; justify-content: center; border: 1.5px solid var(--af-border); border-radius: 4px; font-size: 0.7rem; color: #fff; }
.af-ref-tick[data-done="true"] { background: var(--af-primary); border-color: var(--af-primary); }
.af-ref-who { width: 18px; height: 18px; flex: none; border-radius: 999px; color: #fff; font-size: 0.6rem; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; }
.af-ref-due { font-size: 0.78rem; color: var(--af-muted); font-variant-numeric: tabular-nums; }
.af-ref-due[data-state="overdue"] { color: #b91c1c; }
.af-ref-due[data-state="soon"] { color: #b45309; }
.af-ref-home { font-size: 0.74rem; color: var(--af-faint); }
.ql-editor a.af-ref-home, .ql-editor a.af-ref-home:hover { text-decoration: none !important; }
.af-ref-home:hover { color: var(--af-primary); }
.ql-editor td .af-ref { white-space: normal; }

.af-doclink { display: inline-block; vertical-align: baseline; max-width: 100%; }
.af-doclink-link { max-width: 100%; }
.af-doclink-link { display: inline-flex; align-items: center; gap: 5px; padding: 1px 8px 1px 5px; border-radius: 999px; background: var(--af-primary-soft); color: var(--af-primary); font-size: 0.88rem; }
.ql-editor a.af-doclink-link, .ql-editor a.af-doclink-link:hover { text-decoration: none !important; }
.af-doclink-link:hover { background: var(--af-primary); color: #fff; }
.af-doclink-icon { width: 14px; height: 14px; flex: none; }
.af-doclink-name { max-width: 34ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.af-doclink[data-gone] .af-doclink-link { background: #fef2f2; color: #b91c1c; }
.af-doclink[data-gone] .af-doclink-name { text-decoration: line-through; }

/* ---- naming a new document from inside one ---- */
.af-newdoc-backdrop { position: fixed; inset: 0; z-index: 40; background: rgba(15, 23, 42, .18); }
.af-newdoc { position: fixed; z-index: 41; top: 22%; left: 50%; transform: translateX(-50%); width: 420px; max-width: calc(100vw - 32px); padding: 18px 20px 16px; background: #fff; border: 1px solid var(--af-border); border-radius: 12px; box-shadow: 0 24px 60px rgba(15, 23, 42, .2); }
.af-newdoc-head { font-weight: 600; margin-bottom: 12px; }
.af-newdoc-name { width: 100%; padding: 9px 12px; border: 1px solid var(--af-border); border-radius: 8px; font: inherit; font-size: 0.95rem; }
.af-newdoc-name:focus { outline: none; border-color: var(--af-primary); }
.af-newdoc-label { display: block; margin: 14px 0 5px; color: var(--af-muted); font-size: 0.78rem; }
.af-newdoc-folder { width: 100%; }
.af-newdoc-foot { display: flex; justify-content: flex-end; gap: 8px; margin-top: 18px; }

/* ---- a typed property in prose ---- */
.af-prop { display: inline-flex; align-items: center; gap: 5px; padding: 1px 9px; border-radius: 999px; background: var(--af-bg-soft); border: 1px solid var(--af-border); font-size: 0.86rem; line-height: 1.5; cursor: pointer; user-select: none; vertical-align: baseline; }
.af-prop:hover { border-color: var(--af-primary); }
.af-prop[data-color="empty"], .af-prop[data-state="empty"] { color: var(--af-faint); font-style: italic; }
.af-prop[data-kind="date"] { font-variant-numeric: tabular-nums; }
.af-prop[data-state="overdue"] { background: #fef2f2; border-color: #fecaca; color: #b91c1c; }
.af-prop[data-state="soon"] { background: #fffbeb; border-color: #fde68a; color: #92400e; }
.af-prop-avatar { width: 18px; height: 18px; flex: none; border-radius: 999px; color: #fff; font-size: 0.6rem; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; }
.af-prop[data-color="green"] { background: #f0fdf4; border-color: #bbf7d0; color: #15803d; }
.af-prop[data-color="amber"] { background: #fffbeb; border-color: #fde68a; color: #b45309; }
.af-prop[data-color="red"] { background: #fef2f2; border-color: #fecaca; color: #b91c1c; }
.af-prop[data-color="blue"] { background: #eff6ff; border-color: #bfdbfe; color: #1d4ed8; }
.af-prop[data-color="gray"] { background: var(--af-bg-soft); border-color: var(--af-border); color: var(--af-muted); }
.af-prop[data-color="purple"] { background: #f5f3ff; border-color: #ddd6fe; color: #6d28d9; }
.af-prop[data-color="teal"] { background: #f0fdfa; border-color: #99f6e4; color: #0f766e; }
.af-prop[data-color="pink"] { background: #fdf2f8; border-color: #fbcfe8; color: #be185d; }

/* ---- highlighting ---- */
/* The colour and the colour of the words on it travel together: a highlight nobody can
   read is worse than no highlight. The dark fills take white. */
.ql-editor .af-hl-yellow { background: #fde047; color: #1f2937; border-radius: 2px; padding: 0 1px; }
.ql-editor .af-hl-yellow a { color: inherit; }
.ql-editor .af-hl-orange { background: #f97316; color: #ffffff; border-radius: 2px; padding: 0 1px; }
.ql-editor .af-hl-orange a { color: inherit; }
.ql-editor .af-hl-red { background: #dc2626; color: #ffffff; border-radius: 2px; padding: 0 1px; }
.ql-editor .af-hl-red a { color: inherit; }
.ql-editor .af-hl-pink { background: #db2777; color: #ffffff; border-radius: 2px; padding: 0 1px; }
.ql-editor .af-hl-pink a { color: inherit; }
.ql-editor .af-hl-purple { background: #7c3aed; color: #ffffff; border-radius: 2px; padding: 0 1px; }
.ql-editor .af-hl-purple a { color: inherit; }
.ql-editor .af-hl-blue { background: #2563eb; color: #ffffff; border-radius: 2px; padding: 0 1px; }
.ql-editor .af-hl-blue a { color: inherit; }
.ql-editor .af-hl-teal { background: #0d9488; color: #ffffff; border-radius: 2px; padding: 0 1px; }
.ql-editor .af-hl-teal a { color: inherit; }
.ql-editor .af-hl-green { background: #15803d; color: #ffffff; border-radius: 2px; padding: 0 1px; }
.ql-editor .af-hl-green a { color: inherit; }

/* the picker: swatches rather than a list of words */
.ql-bubble .ql-picker.ql-highlight { width: auto; }
.ql-bubble .ql-picker.ql-highlight .ql-picker-label svg:first-child { width: 18px; height: 18px; }
.ql-bubble .ql-picker.ql-highlight .ql-picker-options { display: flex; flex-wrap: wrap; width: 164px; padding: 6px; gap: 5px; }
.ql-bubble .ql-picker.ql-highlight .ql-picker-item { width: 22px; height: 22px; padding: 0; border: 1px solid rgba(15,23,42,.18); border-radius: 5px; }
.ql-bubble .ql-picker.ql-highlight .ql-picker-item:hover { outline: 2px solid #fff; outline-offset: -4px; }
.ql-bubble .ql-picker.ql-highlight .ql-picker-item[data-value="yellow"] { background: #fde047; }
.ql-bubble .ql-picker.ql-highlight .ql-picker-item[data-value="orange"] { background: #f97316; }
.ql-bubble .ql-picker.ql-highlight .ql-picker-item[data-value="red"] { background: #dc2626; }
.ql-bubble .ql-picker.ql-highlight .ql-picker-item[data-value="pink"] { background: #db2777; }
.ql-bubble .ql-picker.ql-highlight .ql-picker-item[data-value="purple"] { background: #7c3aed; }
.ql-bubble .ql-picker.ql-highlight .ql-picker-item[data-value="blue"] { background: #2563eb; }
.ql-bubble .ql-picker.ql-highlight .ql-picker-item[data-value="teal"] { background: #0d9488; }
.ql-bubble .ql-picker.ql-highlight .ql-picker-item[data-value="green"] { background: #15803d; }
.ql-bubble .ql-picker.ql-highlight .ql-picker-item:not([data-value]) { background: #fff; position: relative; }
.ql-bubble .ql-picker.ql-highlight .ql-picker-item:not([data-value])::after { content: ""; position: absolute; left: 3px; right: 3px; top: 9px; height: 2px; background: #dc2626; transform: rotate(-45deg); }
/* ---- widening a table ---- */
.af-wide-layer { position: absolute; inset: 0; pointer-events: none; z-index: 6; }
.af-wide-layer .af-table-wide-btn { pointer-events: auto; }
.af-table-wide-btn { position: absolute; z-index: 6; display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; padding: 0; border: 1px solid var(--af-border); border-radius: 7px; background: #fff; color: var(--af-muted); box-shadow: 0 2px 8px rgba(15, 23, 42, .10); cursor: pointer; }
.af-table-wide-btn:hover { color: var(--af-primary); border-color: var(--af-primary); }
.af-table-wide-btn.on { color: var(--af-primary); border-color: var(--af-primary); background: var(--af-primary-soft); }
.af-table-wide-btn svg { width: 16px; height: 16px; }
.ql-editor table.af-table-wide { box-shadow: 0 0 0 1px var(--af-primary-soft); }

/* ---- attached files ---- */
.af-file { display: inline-block; vertical-align: baseline; }
.af-file-link { display: inline-flex; align-items: center; gap: 7px; max-width: 100%; padding: 3px 10px 3px 4px; border: 1px solid var(--af-border); border-radius: 999px; background: #fff; color: var(--af-text); text-decoration: none; font-size: 0.84rem; line-height: 1.5; }
.af-file-link:hover { border-color: var(--af-primary); background: var(--af-primary-soft); }
/* Quill's own stylesheet underlines every anchor in the editor; a card is not a URL. */
.ql-editor a.af-file-link, .ql-editor a.af-file-link:hover { text-decoration: none !important; color: var(--af-text); }
.af-file-kind { flex: none; min-width: 34px; padding: 1px 6px; border-radius: 999px; background: #334155; color: #fff; font-size: 0.62rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; text-align: center; }
.af-file-kind[data-ext="pdf"] { background: #b91c1c; }
.af-file-kind[data-ext="doc"], .af-file-kind[data-ext="docx"] { background: #1d4ed8; }
.af-file-kind[data-ext="xls"], .af-file-kind[data-ext="xlsx"], .af-file-kind[data-ext="csv"] { background: #15803d; }
.af-file-kind[data-ext="ppt"], .af-file-kind[data-ext="pptx"] { background: #c2410c; }
.af-file-kind[data-ext="zip"], .af-file-kind[data-ext="7z"], .af-file-kind[data-ext="rar"] { background: #7c3aed; }
.af-file-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 30ch; }
.af-file-size { flex: none; color: var(--af-faint); font-size: 0.74rem; }

/* ---- history ---- */
.af-history-panel { width: 420px; }
.af-history-tabs { display: flex; gap: 2px; padding: 8px 12px 0; border-bottom: 1px solid #f1f5f9; position: sticky; top: 41px; background: #fff; z-index: 1; }
.af-history-tabs button { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border: 0; border-bottom: 2px solid transparent; background: none; font: inherit; font-size: 0.82rem; color: var(--af-muted); cursor: pointer; }
.af-history-tabs button.on { color: var(--af-text); font-weight: 600; border-bottom-color: var(--af-primary); }
.af-version, .af-item-event { display: block; width: 100%; text-align: left; padding: 9px 14px; border: 0; border-bottom: 1px solid #f8fafc; background: none; font: inherit; cursor: pointer; }
.af-item-event { cursor: default; }

/* What the page declares, above the list of what has happened to it. */
.af-item-now { padding: 10px 14px; border-bottom: 1px solid #f1f5f9; background: var(--af-bg-soft); display: grid; gap: 6px; }
.af-item-now-line { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; font-size: 0.86rem; color: var(--af-muted); }
.af-item-state { padding: 1px 9px; border-radius: 999px; font-size: 0.78rem; font-weight: 600; background: var(--af-bg); border: 1px solid var(--af-border); color: var(--af-muted); }
.af-item-state[data-state="approved"] { background: #eff6ff; border-color: #bfdbfe; color: #1d4ed8; }
.af-item-state[data-state="committed"] { background: #f5f3ff; border-color: #ddd6fe; color: #6d28d9; }
.af-item-state[data-state="done"] { background: #f0fdf4; border-color: #bbf7d0; color: #15803d; }
.af-item-state[data-state="killed"] { background: #fef2f2; border-color: #fecaca; color: #b91c1c; }
.af-item-state[data-state="on hold"] { background: #fffbeb; border-color: #fde68a; color: #b45309; }
.af-item-slips { font-size: 0.82rem; color: #b45309; }
.af-item-warn { font-size: 0.82rem; color: #b91c1c; }
.af-version:hover { background: var(--af-bg-soft); }
.af-version.on { background: var(--af-primary-soft); }
.af-version-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.af-version-who { font-weight: 600; font-size: 0.85rem; }
.af-version-when { color: var(--af-faint); font-size: 0.74rem; white-space: nowrap; }
.af-version-meta { display: flex; align-items: center; gap: 7px; margin-top: 2px; color: var(--af-muted); font-size: 0.76rem; }
.af-grew { color: #15803d; }
.af-shrank { color: #b91c1c; }
.af-diff { border-top: 1px solid var(--af-border); padding: 10px 14px 20px; }
.af-diff-head { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; margin-bottom: 8px; color: var(--af-muted); font-size: 0.76rem; }
.af-diff-title { width: 100%; color: var(--af-text); font-weight: 600; }
.af-diff-line { padding: 2px 8px; border-radius: 4px; font-size: 0.8rem; line-height: 1.45; white-space: pre-wrap; overflow-wrap: anywhere; color: var(--af-muted); }
.af-diff-line.added { background: #f0fdf4; color: #14532d; }
.af-diff-line.added::before { content: "+ "; color: #15803d; }
.af-diff-line.removed { background: #fef2f2; color: #7f1d1d; text-decoration: line-through; }
.af-diff-line.removed::before { content: "- "; color: #b91c1c; text-decoration: none; display: inline-block; }
.af-diff-line.note { font-style: italic; }
.af-version { display: flex; align-items: center; gap: 4px; padding: 0 8px 0 0; }
.af-version-main { flex: 1; min-width: 0; text-align: left; padding: 9px 6px 9px 14px; border: 0; background: none; font: inherit; cursor: pointer; }
.af-version-read { opacity: 0; flex: none; }
.af-version:hover .af-version-read, .af-version.on .af-version-read { opacity: 1; }
.af-version-reader { position: absolute; inset: var(--af-docbar-h) 0 0 0; background: #fff; z-index: 14; display: flex; flex-direction: column; }
.af-version-bar { display: flex; align-items: center; gap: 12px; padding: 10px 20px; background: #fffbeb; border-bottom: 1px solid #fde68a; font-size: 0.86rem; }
.af-version-bar-meta { margin-left: 8px; color: var(--af-muted); font-size: 0.8rem; }
.af-version-body { flex: 1; overflow-y: auto; padding: 20px 0 60px; }
.af-version-body .ql-container { border: 0; font-size: inherit; }
.af-version-body .ql-editor { max-width: 820px; margin: 0 auto; cursor: default; }
.af-version-warn { padding: 8px 20px; background: #fef2f2; border-bottom: 1px solid #fecaca; color: #7f1d1d; font-size: 0.82rem; }

/* ---- access log ---- */
.af-log-target { margin-left: 6px; font-weight: 400; color: var(--af-muted); }
.af-log-plain { color: var(--af-faint); }
.af-log-note { color: var(--af-primary); }
.af-log-warn { color: #dc2626; }

/* collapsible folders */
.af-folders-toggle { display: inline-flex; align-items: center; gap: 4px; padding: 2px 4px; margin-left: -4px; border: 0; background: none; border-radius: 6px; font: inherit; font-size: 0.7rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--af-faint); cursor: pointer; }
.af-folders-toggle:hover { color: var(--af-text); }
.af-folders-count { padding: 0 6px; border-radius: 999px; background: var(--af-bg-soft); color: var(--af-faint); font-size: 0.68rem; letter-spacing: 0; }

/* ---- resizing tables ---- */
.af-tablesize { display: none; }   /* the sizes object is data, not something to read */
.af-editor .ql-editor hr.af-rule { height: 0; border: 0; border-top: 1px solid var(--af-border); margin: 20px 0; }
.af-resize-layer { position: absolute; inset: 0; pointer-events: none; z-index: 5; }
.af-resize-handle { position: absolute; pointer-events: auto; border-radius: 2px; transition: background .12s; }
.af-resize-handle.col { width: 9px; cursor: col-resize; }
.af-resize-handle.row { height: 9px; cursor: row-resize; }
.af-resize-handle { background: var(--af-primary); opacity: 0; }
.af-resize-handle:hover, .af-resize-handle.active { opacity: .55; }
body.af-resizing-col, body.af-resizing-col * { cursor: col-resize !important; user-select: none; }
body.af-resizing-row, body.af-resizing-row * { cursor: row-resize !important; user-select: none; }
/* Break between words first and inside one only when a word cannot fit on a line of its own.
   "anywhere" split ordinary sentences mid-word as soon as a column got narrow. */
.ql-editor table td { overflow-wrap: break-word; }

/* A link in a cell wraps onto a second line rather than being cut off with an ellipsis. In running
   text it still stays on one line, where a title breaking across lines reads badly. */
.ql-editor td .af-doclink, .ql-editor td .af-doclink-link { max-width: 100%; }
.ql-editor td .af-doclink-link { white-space: normal; }
.ql-editor td .af-doclink-name { max-width: none; white-space: normal; overflow: visible; text-overflow: clip; }

/* ---- signing in ---- */
.af-login-form { display: flex; flex-direction: column; gap: 14px; margin-top: 20px; text-align: left; }
.af-field { display: flex; flex-direction: column; gap: 5px; }
.af-field span { font-size: 0.78rem; font-weight: 600; color: var(--af-muted); }
.af-field input { padding: 9px 11px; border: 1px solid var(--af-border); border-radius: 8px; font: inherit; font-size: 0.9rem; }
.af-field input:focus { outline: none; border-color: var(--af-primary); box-shadow: 0 0 0 3px var(--af-primary-soft); }
.af-remember { display: flex; align-items: center; gap: 8px; color: var(--af-muted); font-size: 0.84rem; cursor: pointer; }
.af-login-submit { width: 100%; justify-content: center; padding: 10px; font-size: 0.92rem; }
.af-login-error { padding: 9px 11px; border-radius: 8px; background: #fef2f2; color: #b91c1c; font-size: 0.84rem; }
.af-login-alt { display: inline-block; margin-top: 16px; color: var(--af-primary); font-size: 0.84rem; text-decoration: none; }
.af-login-alt:hover { text-decoration: underline; }
.af-login-note { margin-top: 14px; color: var(--af-faint); font-size: 0.76rem; line-height: 1.5; }
.af-icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 50%; color: var(--af-muted); }
.af-icon-btn:hover { background: var(--af-bg-soft); color: var(--af-text); }

/* ---- invitations ---- */
.af-invite-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 4px; }
.af-invite-input { flex: 1; min-width: 200px; max-width: 320px; padding: 7px 10px; border: 1px solid var(--af-border); border-radius: 8px; font: inherit; font-size: 0.86rem; }
.af-invite-input:focus { outline: none; border-color: var(--af-primary); box-shadow: 0 0 0 3px var(--af-primary-soft); }
.af-join-code { padding: 7px 12px; border: 1px dashed var(--af-border); border-radius: 8px; background: var(--af-bg-soft); font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.9rem; letter-spacing: 0.06em; }
.af-field-hint { font-weight: 400; color: var(--af-faint); text-transform: none; letter-spacing: 0; }

/* ---- right-click menu inside a table ---- */
.af-table-menu { position: fixed; z-index: 1500; min-width: 170px; padding: 4px; background: #fff; border: 1px solid var(--af-border); border-radius: 10px; box-shadow: 0 14px 38px rgba(15, 23, 42, .18); }
.af-table-menu-item { display: block; width: 100%; padding: 7px 10px; border: 0; border-radius: 6px; background: none; font: inherit; font-size: 0.85rem; text-align: left; color: var(--af-text); cursor: pointer; }
.af-table-menu-item:hover { background: var(--af-primary-soft); color: var(--af-primary); }
.af-table-menu-item.danger:hover { background: #fee2e2; color: #b91c1c; }

/* Links in a document are followed on click, so they should look it. */
.af-editor .ql-editor a { cursor: pointer; }
.af-resize-handle.col.edge { width: 10px; }

/* Images sit in the flow of the document, full width of the column at most. */
.af-editor .ql-editor img { max-width: 100%; height: auto; border-radius: 8px; margin: 6px 0; display: block; }
.af-editor .ql-editor td img { margin: 2px 0; }

/* A favourite is marked in passing, so the star sits where the eye already is: on the bar of the
   document, and at the left of a row in the list. Quiet until it means something. */
.af-bar-star { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; padding: 0; border: 0; border-radius: 8px; background: none; color: var(--af-faint); cursor: pointer; transition: color .12s ease, background-color .12s ease; }
.af-bar-star:hover { color: #b45309; background: rgba(15, 23, 42, .055); }
.af-bar-star.on { color: #d97706; }
.af-bar-copy:hover { color: var(--af-text); }
.af-bar-copy.on, .af-bar-copy.on:hover { color: #15803d; }
/* Quiet, like the save state: there to be glanced at, not read. */
.af-bar-stats { color: var(--af-faint); font-size: 0.75rem; margin-right: 2px; white-space: nowrap; font-variant-numeric: tabular-nums; cursor: default; }
@media (max-width: 700px) { .af-bar-stats { display: none; } }
.af-doc-row-wrap { display: flex; align-items: stretch; gap: 2px; }
.af-doc-row-wrap .af-doc-row { flex: 1; min-width: 0; }
.af-doc-row-star { align-self: center; flex: none; color: var(--af-faint); opacity: 0; transition: opacity .12s ease, color .12s ease; }
.af-doc-row-wrap:hover .af-doc-row-star, .af-doc-row-star.on, .af-doc-row-star:focus-visible { opacity: 1; }
.af-doc-row-star.on { color: #d97706; }

/* Dictation: the bar button while listening, and the floating bar that shows what is being heard. */
.af-bar-star.af-bar-mic.on { color: #dc2626; background: #fef2f2; }
.af-dictation { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 1400; display: flex; align-items: center; gap: 10px; max-width: min(640px, calc(100vw - 32px)); padding: 8px 8px 8px 14px; border-radius: 999px; background: #0f172a; color: #f8fafc; box-shadow: 0 10px 30px rgba(15, 23, 42, .25); font-size: 0.86rem; }
.af-dictation-dot { width: 9px; height: 9px; flex: none; border-radius: 50%; background: #ef4444; animation: af-dictation-pulse 1.2s ease-in-out infinite; }
.af-dictation-label { font-weight: 600; flex: none; }
.af-dictation-heard { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #cbd5e1; font-style: italic; }
.af-dictation-stop { flex: none; padding: 4px 12px; border: 0; border-radius: 999px; background: #f8fafc; color: #0f172a; font: inherit; font-weight: 600; cursor: pointer; }
.af-dictation-stop:hover { background: #e2e8f0; }
@keyframes af-dictation-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { .af-dictation-dot { animation: none; } }
.af-mic-wrap { position: relative; display: inline-flex; align-items: center; }
.af-bar-star.af-mic-choose { width: 18px; margin-left: -4px; }
.af-mic-menu { position: absolute; top: calc(100% + 6px); right: 0; z-index: 1300; width: 280px; padding: 6px; border: 1px solid var(--af-border, #e2e8f0); border-radius: 10px; background: #fff; box-shadow: 0 10px 30px rgba(15, 23, 42, .14); }
.af-mic-menu button { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; width: 100%; padding: 8px 10px 8px 28px; border: 0; border-radius: 7px; background: none; font: inherit; text-align: left; cursor: pointer; position: relative; }
.af-mic-menu button:hover { background: var(--af-bg-soft, #f8fafc); }
.af-mic-menu button.on::before { content: "\2713"; position: absolute; left: 10px; top: 8px; color: var(--af-primary); font-weight: 700; }
.af-mic-menu strong { font-size: 0.86rem; }
.af-mic-menu span { font-size: 0.76rem; color: var(--af-muted); }
.af-dictation.af-summarizing { padding-right: 16px; }
.af-dictation.af-summarizing .af-dictation-dot { background: #a78bfa; }

/* ---- Correction of Errors ------------------------------------------------------------------
   A register, read across before a weekly review. It takes the whole width it has: the incident
   name is the thing people scan for and it was wrapping to eight lines inside a column of prose.
   Everything on a row is a number, a word or a badge, and only the two that need action carry
   colour. */
/* Pages are capped at a column of prose, which is right for a document and wrong for a register:
   seven columns inside 1040px is what squeezed the incident titles into nine lines. This one takes
   the room it has, up to the point where lines get too long to track across. */
.af-coe-page { max-width: 1800px; margin: 0 auto; }
.af-coe-wrap { max-width: none; }

.af-coe-tiles { display: flex; flex-wrap: wrap; gap: 12px; margin: 4px 0 20px; }
.af-coe-tile { display: flex; flex-direction: column; gap: 3px; min-width: 132px; padding: 14px 18px;
    border: 1px solid var(--af-border); border-radius: 12px; background: #fff;
    font-size: 0.7rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;
    color: var(--af-faint); }
.af-coe-figure { font-size: 1.75rem; font-weight: 680; letter-spacing: -0.02em; text-transform: none;
    line-height: 1.1; color: var(--af-text); }
.af-coe-tile.bad { border-color: #fecdd3; background: #fff5f5; }
.af-coe-tile.bad .af-coe-figure { color: #be123c; }
.af-coe-tile.warn { border-color: #fde68a; background: #fffcf2; }
.af-coe-tile.warn .af-coe-figure { color: #b45309; }

/* One grid for the header and every row, so the columns cannot drift apart. The name takes what
   is left and never less than 320px, which is what stopped the titles stacking vertically. */
.af-coe-table { border: 1px solid var(--af-border); border-radius: 12px; overflow: hidden;
    background: #fff; }
.af-coe-row { display: grid;
    grid-template-columns: 132px minmax(320px, 1fr) 96px 186px 128px 160px 210px;
    align-items: center; gap: 18px; padding: 0 20px; }

/* Dark band, like a table in anything built to be read by an executive. */
.af-coe-head { height: 44px; background: #0f172a; color: #cbd5e1;
    font-size: 0.68rem; font-weight: 650; letter-spacing: 0.08em; text-transform: uppercase; }

.af-coe-line { position: relative; min-height: 64px; padding-top: 12px; padding-bottom: 12px;
    border-top: 1px solid var(--af-border); transition: background .1s; }
.af-coe-table .af-coe-line:first-of-type { border-top: 0; }
.af-coe-line:hover { background: #f8fafc; }

.af-coe-number { font-size: 0.78rem; font-weight: 600; letter-spacing: 0.01em;
    color: var(--af-muted); white-space: nowrap; }
.af-coe-words { min-width: 0; }
.af-coe-title { display: block; color: var(--af-text); font-size: 0.94rem; font-weight: 600;
    line-height: 1.35; text-decoration: none; }
.af-coe-line:hover .af-coe-title { color: var(--af-primary); }
.af-coe-date, .af-coe-owner { font-size: 0.84rem; color: var(--af-muted); white-space: nowrap; }

/* Late, and why, under the name. The red edge is the only thing on the page shouting. */
.af-coe-late::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
    background: #e11d48; }
.af-coe-breach { display: flex; align-items: center; gap: 5px; margin-top: 4px;
    font-size: 0.78rem; color: #b45309; }

/* Severity is the first thing anybody looks for, so it is solid and compact. */
.af-sev { justify-self: start; padding: 3px 10px; border-radius: 6px;
    font-size: 0.72rem; font-weight: 680; letter-spacing: 0.01em; white-space: nowrap; }
.af-sev-1 { background: #be123c; color: #fff; }
.af-sev-2 { background: #ea580c; color: #fff; }
.af-sev-3 { background: #d97706; color: #fff; }
.af-sev-4 { background: #e2e8f0; color: #475569; }
.af-sev-5 { background: #e2e8f0; color: #64748b; }

/* Where it has got to. Outlined rather than filled: the pipeline is information, not an alarm.
   Sized to its own words so the longest of them stops colliding with the next column. */
.af-coe-status { justify-self: start; max-width: 100%; padding: 3px 11px;
    border: 1px solid currentColor; border-radius: 999px;
    font-size: 0.74rem; font-weight: 600; line-height: 1.5; white-space: nowrap;
    overflow: hidden; text-overflow: ellipsis; }
.af-coe-status-0 { color: #64748b; }
.af-coe-status-1 { color: #7c3aed; }
.af-coe-status-2 { color: #0369a1; }
.af-coe-status-3 { color: #b45309; }
.af-coe-status-4 { color: #0d9488; }
.af-coe-status-5 { color: #15803d; }

.af-coe-actions { display: flex; flex-wrap: wrap; align-items: baseline; gap: 5px;
    font-size: 0.82rem; }
.af-coe-open { font-weight: 650; color: #b45309; }
.af-coe-done { font-weight: 650; color: #15803d; }
.af-coe-none { color: var(--af-faint); }
.af-coe-over { font-weight: 650; color: #be123c; }
.af-coe-unverified { color: #b45309; }

.af-coe-new { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.af-coe-new-title { flex: 1; min-width: 260px; }
.af-coe-when { display: flex; align-items: center; gap: 6px; font-size: 0.82rem; color: var(--af-muted); }
.af-coe-rule { margin: -6px 0 14px; }

/* Bringing the old records across. Deliberately plain: a thing somebody does once or twice, so it
   should be obvious rather than pretty, and the dry run output is the point. */
.af-coe-import { display: block; }
.af-coe-import-head { display: flex; align-items: center; gap: 6px; margin-bottom: 4px;
    font-weight: 600; }
.af-coe-import-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 10px; }
.af-coe-import-said { margin-top: 10px; padding: 10px 12px; max-height: 240px; overflow: auto;
    border: 1px solid var(--af-border); border-radius: 8px; background: var(--af-bg-soft);
    font-size: 0.8rem; line-height: 1.6; }

/* Narrow enough that seven columns cannot fit: keep the name, the severity and where it stands. */
@media (max-width: 1100px) {
    .af-coe-row { grid-template-columns: minmax(0, 1fr) 96px 186px; gap: 12px; }
    .af-coe-number, .af-coe-date, .af-coe-owner, .af-coe-actions { display: none; }
}

/* Making a piece of work: its name and whose it is, on one line. */
.af-new-work { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.af-new-work input { flex: 1; min-width: 220px; }
.af-new-work select { min-width: 180px; }
.af-new-work-what { font-size: 0.8rem; font-weight: 650; color: var(--af-muted); }
/* What was being said at the time, under the change it explains. */
.af-status-saying { margin-top: 4px; color: var(--af-muted); font-size: 0.82rem; font-style: italic; }

/* A comment whose author went back and changed it. */
.af-comment-edited { color: var(--af-faint); font-size: 0.72rem; font-style: italic; }
.af-comment-editing { margin-top: 4px; }
.af-comment-item .af-comment-edit { opacity: 0; transition: opacity .1s; }
.af-thread:hover .af-comment-edit, .af-comment-edit:focus-visible { opacity: 1; }

/* What a reading of the notes found, offered for ticking. Sits over the page rather than in it:
   nothing has been written yet, and a panel that looks like part of the document reads as though
   it has. */
.af-found-layer { position: fixed; inset: 0; z-index: 40; display: flex; align-items: center;
    justify-content: center; background: rgba(15, 23, 42, .35); padding: 24px; }
.af-found-panel { display: flex; flex-direction: column; width: min(720px, 100%);
    max-height: min(80vh, 760px); background: #fff; border-radius: 12px;
    box-shadow: 0 24px 60px rgba(15, 23, 42, .25); overflow: hidden; }
.af-found-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
    padding: 16px 20px 12px; font-size: 1rem; font-weight: 650;
    border-bottom: 1px solid var(--af-border); }
.af-found-where { font-size: 0.8rem; font-weight: 500; color: var(--af-muted); }
.af-found-body { overflow: auto; padding: 6px 8px 10px; }
.af-found-group { padding: 8px 10px 4px; }
.af-found-kind { display: flex; align-items: center; gap: 8px; padding: 2px 2px 6px;
    font-size: 0.78rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
    color: var(--af-muted); }
.af-found-n { min-width: 20px; padding: 0 6px; border-radius: 999px; background: var(--af-bg-soft);
    color: var(--af-text); font-size: 0.72rem; font-weight: 700; text-align: center;
    letter-spacing: 0; }
.af-found-row { display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; align-items: start;
    gap: 10px; padding: 7px 8px; border-radius: 8px; cursor: pointer; }
.af-found-row:hover { background: var(--af-bg-soft); }
.af-found-row input { margin-top: 3px; accent-color: var(--af-primary); cursor: pointer; }
.af-found-row.already { color: var(--af-faint); }
.af-found-quote { font-size: 0.88rem; line-height: 1.45; }
.af-found-meta { font-size: 0.76rem; color: var(--af-muted); white-space: nowrap; padding-top: 2px; }
.af-found-foot { display: flex; align-items: center; justify-content: flex-end; gap: 10px;
    padding: 12px 20px; border-top: 1px solid var(--af-border); background: var(--af-bg-soft); }

/* Moving a folder from its own row, for people who would rather not drag. */
.af-move-folder { width: min(420px, calc(100vw - 32px)); }
.af-move-note { padding: 0 2px 8px; color: var(--af-muted); font-size: 0.82rem; }
.af-move-list { max-height: 320px; overflow: auto; }

/* Reconnecting. Not a modal: a line at the bottom that does not stop anybody reading the page they
   already have. Held back for two seconds, because most drops are over before anybody could read a
   word about them. */
#components-reconnect-modal { display: none; }
#components-reconnect-modal.components-reconnect-show { display: block; }
.af-reconnect-bar { position: fixed; left: 16px; bottom: 16px; z-index: 2000; display: flex;
    align-items: center; gap: 8px; padding: 7px 13px; border-radius: 999px;
    background: rgba(15, 23, 42, .9); color: #fff; font-size: 0.8rem; font-weight: 600;
    box-shadow: 0 10px 30px rgba(15, 23, 42, .25);
    opacity: 0; animation: af-reconnect-in .2s ease 2s forwards; }
.af-reconnect-dot { width: 7px; height: 7px; border-radius: 50%; background: #fbbf24;
    animation: af-reconnect-pulse 1.1s ease-in-out infinite; }
@keyframes af-reconnect-in { to { opacity: 1; } }
@keyframes af-reconnect-pulse { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }

/* ---- ask ------------------------------------------------------------------------------- */

/* Two tabs over one subject, where the crumbs sit on a folder. Underlined rather than boxed: this
   is a change of view, not a change of place. */
.af-tabs { display: flex; gap: 2px; margin: 0 0 14px; border-bottom: 1px solid var(--af-border); }
.af-tab { padding: 7px 14px; font-size: 0.85rem; font-weight: 600; color: var(--af-muted);
    text-decoration: none; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.af-tab:hover { color: var(--af-text); }
.af-tab.here { color: var(--af-primary); border-bottom-color: var(--af-primary); }

/* The question, given the width of the column rather than the corner of a toolbar. */
.af-ask-entry { display: flex; gap: 8px; align-items: center; margin: 0 0 8px; }
.af-ask-field { flex: 1; max-width: none; }
.af-ask-lead { color: var(--af-muted); font-size: 0.82rem; margin: 0 0 16px; max-width: 70ch; }
.af-ask-trouble { margin: 0 0 14px; }

/* Nothing asked yet. Four examples, because the one thing nobody knows about a box like this is
   what it will take. */
.af-ask-examples { display: flex; flex-wrap: wrap; gap: 8px; }
.af-ask-example { border: 1px solid var(--af-border); background: #fff; border-radius: 999px;
    padding: 6px 13px; font: inherit; font-size: 0.82rem; color: var(--af-muted); cursor: pointer; }
.af-ask-example:hover { border-color: var(--af-primary); color: var(--af-primary);
    background: var(--af-primary-soft); }

/* What was asked before, this session only. */
.af-ask-before { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 18px 0 0; }
.af-ask-before-label { font-size: 0.72rem; font-weight: 600; letter-spacing: .06em;
    text-transform: uppercase; color: var(--af-faint); }
.af-ask-again { cursor: pointer; font: inherit; font-size: 0.78rem; color: var(--af-muted);
    max-width: 42ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.af-ask-again:hover { border-color: var(--af-primary); color: var(--af-primary); }

/* One box. Typing filters the list underneath, which is instant and free; Ask reads, which is
   neither. The button only appears once there is something to ask, so the search box looks and
   behaves exactly as it did until somebody wants more from it. */
.af-ask-box { position: relative; display: inline-flex; align-items: center; }
.af-ask-go { position: absolute; right: 4px; border: 0; background: var(--af-primary);
    color: #fff; font: inherit; font-size: 0.72rem; font-weight: 650; letter-spacing: .02em;
    padding: 3px 10px; border-radius: 999px; cursor: pointer; }
.af-ask-go:disabled { background: var(--af-faint); cursor: default; }

.af-answer { border: 1px solid var(--af-border); border-left: 3px solid var(--af-primary);
    border-radius: 10px; background: #fff; padding: 14px 16px; margin: 0 0 16px; }
.af-answer-head { display: flex; align-items: center; gap: 8px; color: var(--af-muted); }
/* Working. The same quiet pulse dictation uses, because it is the same promise: something is
   happening and the thing you asked for will appear here. */
.af-answer-working { border-left-color: var(--af-faint); }
.af-answer-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--af-primary);
    animation: af-ask-pulse 1.1s ease-in-out infinite; }
@keyframes af-ask-pulse { 0%, 100% { opacity: .25; } 50% { opacity: 1; } }
.af-answer-q { font-weight: 650; color: var(--af-text); flex: 1; }
.af-ask-shut { border: 0; background: none; color: var(--af-faint); cursor: pointer; padding: 2px; }

/* What it understood, as the filters it actually applied. */
.af-answer-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 0; }
.af-answer-chip { font-size: 0.72rem; font-weight: 600; color: var(--af-muted);
    background: var(--af-bg-soft); border: 1px solid var(--af-border); border-radius: 999px;
    padding: 2px 9px; }

.af-answer-words { margin: 12px 0 0; line-height: 1.55; }
.af-answer-cannot { margin: 10px 0 0; color: var(--af-text); }
.af-answer-can { margin: 4px 0 0; color: var(--af-muted); font-size: 0.82rem; }

/* A claim and the sentence it came from. The quote is indented under what it supports, because
   read the other way round it is a pile of fragments nobody can place. */
.af-answer-source { display: block; margin: 10px 0 0; padding: 8px 10px; border-radius: 8px;
    background: var(--af-bg-soft); text-decoration: none; color: inherit; }
.af-answer-source:hover { background: var(--af-primary-soft); }
.af-answer-says { display: block; font-size: 0.85rem; font-weight: 600; }
.af-answer-quote { display: block; margin: 3px 0 0; color: var(--af-muted); font-size: 0.85rem;
    line-height: 1.5; }
.af-answer-in { display: block; margin: 3px 0 0; color: var(--af-primary); font-size: 0.75rem;
    font-weight: 600; }

/* Rows of work, as a grid rather than a sentence about a grid. */
.af-answer-rows { margin: 12px 0 0; border: 1px solid var(--af-border); border-radius: 8px;
    overflow: hidden; }
.af-answer-row { display: grid; grid-template-columns: 1fr 180px 140px 90px; gap: 10px;
    padding: 7px 10px; border-top: 1px solid var(--af-border); font-size: 0.85rem;
    align-items: baseline; }
.af-answer-row:first-child { border-top: 0; }
.af-answer-row-head { background: var(--af-bg-soft); color: var(--af-faint); font-size: 0.72rem;
    font-weight: 600; text-transform: uppercase; letter-spacing: .06em; }
.af-answer-row.shut { color: var(--af-faint); text-decoration: line-through; }
.af-answer-kind { display: inline-block; min-width: 68px; color: var(--af-faint);
    font-size: 0.72rem; font-weight: 600; }
.af-answer-what a { color: inherit; text-decoration: none; }
.af-answer-what a:hover { text-decoration: underline; }
.af-answer-where, .af-answer-who { color: var(--af-muted); overflow: hidden; text-overflow: ellipsis;
    white-space: nowrap; }
.af-answer-when { color: var(--af-muted); text-align: right; white-space: nowrap; }
.af-answer-when.late { color: var(--af-danger); font-weight: 650; }

/* What it read, and what it did not use. Both said every time. */
.af-answer-foot { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 12px 0 0;
    color: var(--af-faint); font-size: 0.76rem; }
.af-answer-left { color: var(--af-muted); }
.af-answer-dropped { color: var(--af-muted); }

@media (max-width: 860px) {
    .af-answer-row { grid-template-columns: 1fr; gap: 2px; }
    .af-answer-row-head { display: none; }
}

/* Working, said three ways: a word for what it is doing, a clock so slow is not mistaken for
   broken, and a bar that moves on its own. Twenty seconds is a long time to look at nothing. */
.af-answer-clock { color: var(--af-faint); font-size: 0.75rem; font-variant-numeric: tabular-nums; }
.af-answer-stage { margin: 10px 0 0; color: var(--af-muted); font-size: 0.85rem; }
.af-answer-bar { margin: 10px 0 0; height: 3px; border-radius: 3px; background: var(--af-border);
    overflow: hidden; }
.af-answer-bar > span { display: block; height: 100%; width: 35%; border-radius: 3px;
    background: var(--af-primary); animation: af-answer-slide 1.6s ease-in-out infinite; }
@keyframes af-answer-slide {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(300%); }
}

/* Keeping an answer, and putting it away. Quiet until wanted: the answer is the thing on the
   page, not the buttons over it. */
.af-answer-act { border: 1px solid var(--af-border); background: #fff; border-radius: 999px;
    padding: 3px 11px; font: inherit; font-size: 0.74rem; font-weight: 600; color: var(--af-muted);
    cursor: pointer; }
.af-answer-act:hover { border-color: var(--af-primary); color: var(--af-primary);
    background: var(--af-primary-soft); }
.af-answer-act:disabled { color: var(--af-faint); border-color: var(--af-border);
    background: var(--af-bg-soft); cursor: default; }

/* A citation that is a row rather than a page: the kind said first, quietly, so a reader can tell
   a sentence somebody wrote from a row somebody raised. */
.af-answer-badge { display: inline-block; margin-right: 6px; padding: 1px 7px; border-radius: 999px;
    background: var(--af-bg-soft); border: 1px solid var(--af-border); color: var(--af-muted);
    font-size: 0.68rem; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; }
/* And one with nowhere to send you, because the page it sits on is not yours to open. */
.af-answer-nowhere .af-answer-in { color: var(--af-muted); }

/* ---- signing in with Microsoft -------------------------------------------------------------- */

/* A rule with the word "or" sitting in it, so the second way in reads as an alternative rather
   than as something that happens after the first. */
.af-login-or { display: flex; align-items: center; gap: 10px; margin: 16px 0 12px;
    color: var(--af-faint); font-size: 0.78rem; }
.af-login-or::before, .af-login-or::after { content: ""; flex: 1; height: 1px;
    background: var(--af-border); }

/* Microsoft's button, close to their own guidance: their mark, their words, on white. Dressing
   this in the product's colours is the sort of thing that gets an app rejected, and it would also
   make it harder to spot, which is the opposite of the point. */
.af-login-microsoft { display: flex; align-items: center; justify-content: center; gap: 10px;
    width: 100%; background: #fff; border: 1px solid #8c8c8c; color: #5e5e5e;
    font-family: "Segoe UI", system-ui, sans-serif; font-size: 0.9rem; font-weight: 600;
    padding: 9px 12px; border-radius: 4px; }
.af-login-microsoft:hover { background: #f3f3f3; }

/* ---- how people sign in --------------------------------------------------------------------- */

/* Three choices as cards rather than a dropdown: each one needs a sentence saying what it costs,
   and a dropdown has nowhere to put one. */
.af-signin-choices { display: grid; gap: 8px; margin: 4px 0 14px; max-width: 640px; }
.af-signin-choice { display: grid; grid-template-columns: 20px 1fr; gap: 2px 10px;
    align-items: start; padding: 10px 12px; border: 1px solid var(--af-border); border-radius: 10px;
    cursor: pointer; background: #fff; }
.af-signin-choice:hover { border-color: #cbd5e1; }
.af-signin-choice.on { border-color: var(--af-primary); background: var(--af-primary-soft); }
.af-signin-choice input { grid-row: span 2; margin-top: 3px; }
.af-signin-name { font-weight: 650; font-size: 0.9rem; }
.af-signin-why { color: var(--af-muted); font-size: 0.82rem; line-height: 1.45; }
.af-signin-field { max-width: 460px; margin-bottom: 10px; }
.af-signin-warn { border-left: 3px solid var(--af-danger); padding: 8px 12px;
    margin: 4px 0 12px; max-width: 640px; }

/* ---- transcribing a meeting ------------------------------------------------------------------ */

/* Red, central and impossible to miss, because it is the one band on screen that other people in
   the room have a right to see. It says what it is hearing as it hears it, so somebody can tell at
   a glance whether the microphone is picking the room up or only the person next to it. */
.af-recording { position: fixed; left: 0; right: 0; bottom: 18px; margin: 0 auto;
    width: fit-content; max-width: min(92vw, 760px); z-index: 2500; display: flex;
    align-items: center; gap: 10px; padding: 8px 10px 8px 14px; border-radius: 999px;
    background: #b91c1c; color: #fff; font-size: 0.82rem;
    box-shadow: 0 10px 30px rgba(185, 28, 28, .35); }
.af-recording-dot { width: 9px; height: 9px; border-radius: 50%; background: #fff;
    animation: af-recording-pulse 1.4s ease-in-out infinite; }
@keyframes af-recording-pulse { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }
.af-recording-label { font-weight: 650; white-space: nowrap; }
/* What it is hearing right now, which is not in the page yet. Clipped: it is reassurance, not
   something to read. */
.af-recording-heard { color: rgba(255, 255, 255, .85); max-width: 38ch; overflow: hidden;
    text-overflow: ellipsis; white-space: nowrap; }
.af-recording-clock { font-variant-numeric: tabular-nums; color: rgba(255, 255, 255, .85); }
.af-recording-stop { border: 1px solid rgba(255, 255, 255, .6); background: transparent;
    color: #fff; font: inherit; font-size: 0.78rem; font-weight: 650; padding: 3px 12px;
    border-radius: 999px; cursor: pointer; }
.af-recording-stop:hover { background: rgba(255, 255, 255, .15); }

/* The button on the meeting, which becomes Stop while it runs. */
.af-meeting-rec.on { color: #b91c1c; border-color: #b91c1c; }

/* Who can see this page, on the page. Quiet until it is private, which is the state worth
   noticing: everything is visible to the organization by default, so "Everyone" is not news and
   "Only you" is. */
.af-doc-dot { color: var(--af-border); }
.af-doc-seen { display: inline-flex; align-items: center; gap: 4px; color: var(--af-faint); }
.af-doc-seen .mud-icon-root { font-size: 15px; }
.af-doc-seen.shut { color: var(--af-muted); font-weight: 600; }

/* ---- who can see my work ---------------------------------------------------------------- */

.af-sharing { max-width: 900px; }
/* Three numbers at the top, because the first question is how much of each there is. */
.af-sharing-counts { display: flex; flex-wrap: wrap; gap: 8px 24px; margin: 4px 0 8px;
    color: var(--af-muted); font-size: 0.85rem; }
.af-sharing-count strong { color: var(--af-text); font-size: 1.05rem; margin-right: 4px; }

.af-sharing-list { border: 1px solid var(--af-border); border-radius: 10px; overflow: hidden;
    margin: 8px 0 4px; }
.af-sharing-page { display: grid; grid-template-columns: 1fr 200px 80px; gap: 12px;
    align-items: baseline; padding: 9px 12px; border-top: 1px solid var(--af-border);
    text-decoration: none; color: inherit; font-size: 0.88rem; }
.af-sharing-page:first-child { border-top: 0; }
.af-sharing-page:hover { background: var(--af-bg-soft); }
.af-sharing-title { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.af-sharing-where, .af-sharing-when { color: var(--af-faint); font-size: 0.8rem; }
.af-sharing-when { text-align: right; white-space: nowrap; }

/* One person or team, folded away until somebody wants the list. */
.af-sharing-who { border: 1px solid var(--af-border); border-radius: 10px; margin: 8px 0; }
.af-sharing-who-head { display: flex; align-items: center; gap: 8px; width: 100%;
    padding: 10px 12px; background: none; border: 0; font: inherit; cursor: pointer;
    text-align: left; color: inherit; }
.af-sharing-who-head:hover { background: var(--af-bg-soft); }
.af-sharing-name { font-weight: 650; }
.af-sharing-howmany { margin-left: auto; color: var(--af-muted); font-size: 0.82rem; }
.af-sharing-who .af-sharing-list { border: 0; border-top: 1px solid var(--af-border);
    border-radius: 0; margin: 0; }

@media (max-width: 760px) {
    .af-sharing-page { grid-template-columns: 1fr; gap: 2px; }
    .af-sharing-when { text-align: left; }
}

/* The workstream on a row of an answer, as a way in rather than a label. A button where there is
   no page yet, styled as the link beside it so the column still reads as one column. */
.af-answer-where { color: var(--af-muted); text-decoration: none; }
a.af-answer-where:hover, .af-answer-open:hover { color: var(--af-primary); text-decoration: underline; }
.af-answer-open { border: 0; background: none; padding: 0; font: inherit; cursor: pointer;
    text-align: left; }

/* ---- product-wide visual language --------------------------------------------------------
   The operator views can be information-dense without making the writing surface feel like a
   dashboard. The shared views use the same ink, blue, spacing and quiet surfaces everywhere;
   the standalone host supplies its own frame around them. */
:root {
    --af-text: #17263c;
    --af-muted: #617087;
    --af-faint: #8794a6;
    --af-border: #dfe5ee;
    --af-bg-soft: #f5f7fa;
    --af-primary: #356fe5;
    --af-primary-soft: #edf3ff;
    --af-canvas: #f3f5f8;
    --af-surface: #ffffff;
    --af-ink-strong: #14233a;
}

.af-main { background: var(--af-canvas); color: var(--af-text); }
.af-appbar { background: var(--af-surface) !important; border-bottom-color: var(--af-border); }
.af-brand { color: var(--af-ink-strong); letter-spacing: -.025em; }
.af-brand-mark { background: linear-gradient(145deg, #4d86f5, #285fc9); border-radius: 9px; }
.af-appbar-name { color: var(--af-text); }
.af-new-btn { border-radius: 9px !important; padding-inline: 14px !important; }

/* A steady navigation rail gives the many page types one home. Recent and favourite pages stay
   visible, while the dark field makes the user's current location easy to find. */
.af-drawer,
.af-drawer .mud-drawer-content { background: #17263b !important; color: #d8e0ec; }
.af-drawer { border-right: 0 !important; }
.af-nav { padding-top: 16px; }
.af-nav .mud-nav-link { color: #c3cddd; border-radius: 8px; margin: 3px 12px; padding: 9px 12px;
    font-weight: 500; transition: color .12s ease, background .12s ease; }
.af-nav .mud-nav-link .mud-nav-link-icon { color: #96a6bc; }
.af-nav .mud-nav-link:hover { color: #fff; background: rgba(255,255,255,.07); }
.af-nav .mud-nav-link.active { color: #fff; background: #293d59; font-weight: 600; }
.af-nav .mud-nav-link.active .mud-nav-link-icon { color: #8bb2ff; }
.af-nav-section { margin: 22px 22px 7px; color: #8c9bb0; font-size: .67rem; letter-spacing: .1em; }
.af-nav-section a { color: #aebbd0; }
.af-nav-recent a { color: #becadb; border-radius: 7px; padding-block: 7px; }
.af-nav-recent a:hover { background: rgba(255,255,255,.07); color: #fff; }
.af-nav-recent a.active { color: #fff; background: #293d59; }
.af-nav-empty { color: #94a3b8; }
.af-nav-badge { background: #365f99; color: #eaf2ff; }
.af-org-btn { border-color: var(--af-border); border-radius: 9px; }
.af-org-btn:hover { border-color: #c8d4e4; background: #f8faff; }

/* Lists and operating views sit on the calm canvas. Documents deliberately keep their plain white
   editor so an empty page still invites writing instead of asking to be configured. */
.af-page { max-width: 1180px; padding: 36px 36px 72px; }
.af-page-narrow { max-width: 820px; }
.af-browse { max-width: 1180px; }
.af-page-head { align-items: flex-start; margin-bottom: 24px; }
.af-page-head h1, .af-browse-title { color: var(--af-ink-strong); letter-spacing: -.035em; }
.af-page-head h1 { font-size: 1.8rem; }
.af-browse-title { font-size: 1.72rem; font-weight: 680; }
.af-page-head p { color: var(--af-muted); line-height: 1.55; }
.af-doc-list, .af-card-list, .af-browse-list { border-color: var(--af-border); border-radius: 12px; background: var(--af-surface); }
.af-doc-list-head { background: #f8f9fb; }
.af-doc-row { min-height: 64px; }
.af-doc-row:hover, .af-browse-row:hover { background: #f7f9fc; }
.af-list-band { background: #f8f9fb; }
.af-empty { color: var(--af-muted); }
.af-empty > .mud-icon-root { color: #a7b6ca; }
.af-btn { border-radius: 8px; }
.af-btn-primary:hover:not(:disabled) { background: #285fc9; }
.af-btn-outline { border-radius: 8px; }
.af-btn-outline:hover { border-color: #b9ccef; background: #f7f9ff; }
.af-filter:focus, .af-ask-field:focus { border-color: var(--af-primary); box-shadow: 0 0 0 3px rgba(53,111,229,.12); }
.af-ask-example { border-radius: 9px; }

/* Keep a freeform page freeform. These adjustments only improve the breathing room around writing;
   embedded controls remain inline and can be repeated anywhere in the document. */
.af-doc-bar { background: #fff; border-bottom-color: #e8ecf2; }
.af-doc-scroll { background: #fff; }
.af-title { color: var(--af-ink-strong); letter-spacing: -.04em; }
.af-title::placeholder, .af-editor .ql-editor.ql-blank::before { color: #a6b1bf; }
.af-editor .ql-editor { line-height: 1.75; }
.af-editor .ql-editor a { color: var(--af-primary); }

@media (max-width: 720px) {
    .af-page { padding: 24px 18px 48px; }
    .af-page-head h1 { font-size: 1.55rem; }
    .af-browse-title { font-size: 1.45rem; }
}

/* ---- rationalise ---------------------------------------------------------------------------- */

.af-rat { max-width: 940px; }
/* One finding, one card. Each is about one group and ends in at most one button, so nothing here
   is ever a plan somebody has to review in the abstract. */
.af-rat-card { border: 1px solid var(--af-border); border-radius: 12px; padding: 14px 16px;
    margin: 14px 0; background: #fff; }
.af-rat-card .af-work-head { margin-top: 0; }
.af-rat-note { color: var(--af-muted); font-size: 0.82rem; }
/* A quoted sentence reads as the sentence, not as a page title. */
.af-rat-quote .af-sharing-title { font-weight: 500; font-style: italic; white-space: normal; }

/* One page's worth of unpromoted sentences, with the way to say the page is not work at all. */
.af-rat-page { border-top: 1px solid var(--af-border); padding: 10px 12px; }
.af-rat-page:first-child { border-top: 0; }
.af-rat-page-head { display: flex; align-items: center; gap: 10px; }
.af-rat-page-name { font-weight: 650; font-size: 0.88rem; color: inherit; text-decoration: none; }
.af-rat-page-name:hover { text-decoration: underline; }
.af-rat-page-count { color: var(--af-faint); font-size: 0.78rem; margin-right: auto; }
.af-rat-line { display: block; padding: 6px 0 0 14px; text-decoration: none; color: inherit; }
.af-rat-said { display: block; font-style: italic; font-size: 0.86rem; line-height: 1.45; }
.af-rat-line:hover .af-rat-said { text-decoration: underline; }
.af-rat-meta { display: block; color: var(--af-faint); font-size: 0.76rem; }


/* ---- a table too wide for the page ------------------------------------------------------------
   Twenty one columns inside a text column is one word per line, which is unreadable, so past the
   point where the columns stop fitting the table stops being squeezed. It keeps the widths its
   contents want and the page gets a window onto it that scrolls sideways.

   No wrapper element: the editor owns the markup inside a document and an element it did not put
   there does not survive the next edit. Instead the table element becomes the window and its tbody
   becomes the table. That is the whole trick, and it is why the borders are set out again here: a
   collapsed border belongs to the table, and the table has just moved. */

.af-editor .ql-editor table.af-table-pane {
    display: block;
    overflow: auto;
    overscroll-behavior-x: contain;
    border: 0;
    border-collapse: separate;
    border-spacing: 0;
}
.af-editor .ql-editor table.af-table-pane > tbody {
    display: table;
    table-layout: fixed;
    border-collapse: separate;
    border-spacing: 0;
}
.af-editor .ql-editor table.af-table-pane td {
    border-width: 1px 1px 0 0;
    background: #fff;
}
.af-editor .ql-editor table.af-table-pane td:first-child { border-left-width: 1px; }
.af-editor .ql-editor table.af-table-pane tr:last-child td { border-bottom-width: 1px; }

/* The headings and the first column stay where they are while the rest goes past. Without them, a
   cell fifteen columns along belongs to nothing you can see. */
.af-editor .ql-editor table.af-table-pane tr:first-child td {
    position: sticky; top: 0; z-index: 2; background: var(--af-bg-soft);
}
.af-editor .ql-editor table.af-table-pane td:first-child {
    position: sticky; left: 0; z-index: 1; box-shadow: 1px 0 0 var(--af-border);
}
.af-editor .ql-editor table.af-table-pane tr:first-child td:first-child { z-index: 3; }

/* Found by a search, inside a pane: the rule that paints the row has to say so here too, or the
   opaque cell background above hides it. */
.af-editor .ql-editor table.af-table-pane tr.af-row-found td { background: var(--af-highlight-active); }

/* Paper has no window to scroll, so it gets the whole table. */
@media print {
    .af-editor .ql-editor table.af-table-pane { display: table; overflow: visible; max-height: none; }
    .af-editor .ql-editor table.af-table-pane > tbody { display: table-row-group; width: auto !important; }
    .af-editor .ql-editor table.af-table-pane td { position: static; }
}