/* Design tokens, from the proof-surface study. Paper rather than white, a
   serif for headings, mono wherever a number has to line up with another. */
:root {
  --paper:#F5F6F4; --surface:#FFFFFF; --sunk:#EFF1ED;
  --rule:#D9DCD7; --rule-soft:#E7E9E5;
  --ink:#14171A; --ink-mid:#4A5158; --ink-soft:#6E767E;
  --accent:#2B4C7E; --accent-bg:#E8EEF6;
  /* The accent pressed. A filled control has to darken when it is. */
  --accent-deep:#24406B;
  --pass:#1B6E4F; --pass-bg:#E6F1EB;
  --fail:#A32118; --fail-bg:#F8E7E5;
  --stale:#7A6A3F; --stale-bg:#F2EEE2;
  --serif: Georgia, "Iowan Old Style", "Times New Roman", serif;
  --sans: system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
}

/* --- the editor: chat on the left, the report on the right --- */
.cols { display: grid; grid-template-columns: 1fr; gap: 1.1rem; align-items: start; }
@media (min-width: 940px) {
  .cols { grid-template-columns: minmax(330px, 400px) 1fr; }
  .chat-pane { position: sticky; top: 1rem; }
}
body.wide .wrap, body.wide .bar { max-width: 1280px; }

.block { border: 1px solid var(--rule); background: var(--surface); margin-bottom: 1.1rem; }
.block-head { display: flex; align-items: baseline; gap: .6rem; flex-wrap: wrap;
  padding: .6rem .9rem; border-bottom: 1px solid var(--rule); }
.block-head .meta { font-size: .75rem; color: var(--ink-soft); margin-left: auto;
  font-family: var(--mono); font-variant-numeric: tabular-nums; }

.chat-pane { border: 1px solid var(--rule); background: var(--surface);
  display: flex; flex-direction: column; max-height: calc(100vh - 3rem); }
.chat-head { padding: .6rem .85rem; border-bottom: 1px solid var(--rule);
  display: flex; align-items: baseline; gap: .5rem; }
.chat-head .scope { font-size: .75rem; color: var(--ink-soft); margin-left: auto;
  font-family: var(--mono); }
.chat-pane #messages { padding: .85rem; overflow-y: auto; flex: 1; }
.chat-pane .composer { border-top: 1px solid var(--rule); padding: .6rem;
  margin: 0; position: static; }

/* the SQL, open by default -- it is what the page is for */
details.sql > summary { padding: .6rem .9rem; cursor: pointer; font-size: .8125rem;
  color: var(--ink-mid); display: flex; align-items: center; gap: .45rem; list-style: none; }
details.sql > summary::-webkit-details-marker { display: none; }
details.sql > summary::before { content: "\25B8"; font-size: .7rem; color: var(--ink-soft); }
details.sql[open] > summary::before { content: "\25BE"; }
details.sql[open] > summary { border-bottom: 1px solid var(--rule); }
details.sql > summary .right { margin-left: auto; font-size: .75rem;
  color: var(--ink-soft); font-family: var(--mono); }
.sql-edit { width: 100%; box-sizing: border-box; border: 0; resize: vertical;
  min-height: 12rem; padding: .8rem .9rem; font-family: var(--mono);
  font-size: .78125rem; line-height: 1.65; background: var(--surface); color: var(--ink); }
.sql-foot { padding: .45rem .9rem; border-top: 1px solid var(--rule);
  display: flex; gap: .5rem; flex-wrap: wrap; align-items: center;
  font-size: .75rem; color: var(--ink-soft); }
.sql-foot .spacer { flex: 1; }
.sql-foot .dirty { color: var(--stale); font-weight: 600; }

.composer-closed { border-top: 1px solid var(--rule); padding: .7rem .85rem;
  margin: 0; font-size: .8125rem; color: var(--ink-soft); }
.verdict-banner { border: 1px solid currentColor; padding: .7rem .95rem;
  font-size: .9375rem; margin: 1rem 0; }
.verdict-banner[data-s="passing"] { color: var(--pass); background: var(--pass-bg); }
.verdict-banner[data-s="failing"] { color: var(--fail); background: var(--fail-bg); }
.verdict-banner[data-s="unverified"],
.verdict-banner[data-s="unchecked"] { color: var(--stale); background: var(--stale-bg); }

/* --- the library --- */
.lib-head { display: flex; align-items: baseline; gap: .75rem; flex-wrap: wrap;
  margin-bottom: 1rem; }
.lib-head h1 { font-family: var(--serif); font-weight: 400; font-size: 1.7rem; margin: 0; }
.lib-head .count { font-family: var(--mono); font-size: .78125rem; color: var(--ink-soft);
  font-variant-numeric: tabular-nums; }
.lib-head .spacer { flex: 1; }
.lib-head form { margin: 0; }
.banner { border: 1px solid var(--stale); background: var(--stale-bg); color: var(--stale);
  padding: .6rem .85rem; font-size: .875rem; margin-bottom: 1rem;
  display: flex; gap: .5rem; align-items: baseline; flex-wrap: wrap; }
.banner .detail { font-family: var(--mono); font-size: .75rem; opacity: .9; }
.search { display: flex; flex-direction: column; gap: .55rem; margin-bottom: 1.1rem; }
.search input { width: 100%; box-sizing: border-box; font: inherit; font-size: 1.0625rem;
  padding: .65rem .8rem; border: 1px solid var(--rule); background: var(--surface); color: var(--ink); }
.search .hint { font-size: .78125rem; color: var(--ink-soft); margin: 0; }
.chips { display: flex; gap: .4rem; flex-wrap: wrap; }
.chips button { font: inherit; font-size: .8125rem; padding: .25rem .7rem; border-radius: 0;
  border: 1px solid var(--rule); background: var(--surface); color: var(--ink-mid); }
.chips button[aria-pressed="true"] { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.list { border: 1px solid var(--rule); background: var(--surface); }
.list .row { display: grid; grid-template-columns: 1fr auto; gap: .2rem 1rem;
  padding: .8rem .95rem; border-bottom: 1px solid var(--rule-soft); align-items: baseline; }
.list .row:last-of-type { border-bottom: 0; }
.list .title { grid-column: 1; font-weight: 600; }
.list .title a { color: inherit; text-decoration: none; }
.list .title a:hover { text-decoration: underline; }
.list .title .id { font-family: var(--mono); font-size: .75rem; color: var(--ink-soft);
  font-weight: 400; margin-right: .45rem; }
.list .sub { grid-column: 1; font-size: .8125rem; color: var(--ink-mid);
  display: flex; gap: .3rem .7rem; flex-wrap: wrap; }
.list .sub .who { color: var(--ink-soft); }
.list .verdict { grid-column: 2; grid-row: 1 / span 2; align-self: center;
  text-align: right; white-space: nowrap; }
.list .tally { font-family: var(--mono); font-size: .78125rem; color: var(--ink-soft);
  font-variant-numeric: tabular-nums; margin-left: .5rem; }
.pill[data-s="failing"] { color: var(--fail); background: var(--fail-bg); }
.pill[data-s="passing"] { color: var(--pass); background: var(--pass-bg); }
.pill[data-s="unverified"] { color: var(--stale); background: var(--stale-bg); }
.pill[data-s="unchecked"] { color: var(--ink-soft); background: transparent; border-style: dashed; }
.pill[data-s="draft"] { color: var(--ink-soft); background: transparent; border-style: dashed; }
.empty { padding: 2rem 1rem; text-align: center; color: var(--ink-soft); font-size: .875rem; }
.empty strong { display: block; color: var(--ink-mid); font-size: 1rem; margin-bottom: .3rem;
  font-family: var(--serif); font-weight: 400; }

.pv-scroll { overflow-x: auto; }
table.pv { border-collapse: collapse; width: 100%; font-size: .8125rem; }
table.pv th, table.pv td { padding: .34rem .9rem; text-align: left;
  border-bottom: 1px solid var(--rule-soft); }
table.pv th { font-size: .6875rem; letter-spacing: .06em; text-transform: uppercase;
  color: var(--ink-soft); font-weight: 600; }
table.pv td.num, table.pv th.num { text-align: right; font-family: var(--mono);
  font-variant-numeric: tabular-nums; }
table.pv tbody tr:last-child td { border-bottom: 0; }
/* One free-text column must not set the height of every row. Assessment notes
   run to paragraphs, and a single one of them turns a 20-row preview into a
   screen and a half of scrolling. Clamped in the view, not in the data: the
   whole value is in the download. */
table.pv td .cell { display: -webkit-box; -webkit-line-clamp: 3;
  -webkit-box-orient: vertical; overflow: hidden; max-width: 28rem; }
.reading { display: grid; grid-template-columns: 6rem 1fr auto; gap: .3rem 1rem;
  padding: .8rem .9rem; border-bottom: 1px solid var(--rule-soft); align-items: start; }
.reading:last-child { border-bottom: 0; }
.reading.dismissed { opacity: .5; }
.reading .claim { font-weight: 550; }
.reading .rsays { font-size: .8125rem; color: var(--ink-soft); }
.reading .ev { font-family: var(--mono); font-size: .75rem; color: var(--ink-mid);
  font-variant-numeric: tabular-nums; overflow-x: auto; }
.reading form { margin: 0; }
/* Arriving from a check's provenance link: say which turn was meant. */
.msg:target .bubble { outline: 2px solid var(--accent); outline-offset: 3px; }
.reading button { font-size: .78125rem; padding: .25rem .6rem; border-radius: 0; }
.pill { font-size: .6875rem; letter-spacing: .06em; text-transform: uppercase;
  font-weight: 700; padding: .17rem .46rem; white-space: nowrap;
  border: 1px solid currentColor; height: fit-content; display: inline-block; }
.pill[data-s="alarm"] { color: var(--fail); background: var(--fail-bg); }
.pill[data-s="diag"] { color: var(--fail); background: transparent; border-style: dashed; }
.pill[data-s="confirms"] { color: var(--pass); background: var(--pass-bg); }
.pill[data-s="none"] { color: var(--stale); background: var(--stale-bg); }
/* Which query the rows below came from. Carries the accent the proposal block
   uses, so the chip and the box it belongs to read as one thing. */
.pill[data-s="proposed"] { color: var(--accent); background: var(--accent-bg);
  border-color: var(--accent); }
.pv-foot { padding: .45rem .9rem; border-top: 1px solid var(--rule);
  font-size: .75rem; color: var(--ink-soft); }
.pv-foot.error { color: var(--fail); }
.sql-foot button { font-size: .78125rem; padding: .25rem .7rem; border-radius: 0;
  border: 1px solid var(--rule); background: var(--surface); color: var(--ink-mid); }
.sql-foot button.save { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.sql-foot button:disabled { opacity: .4; cursor: default; }
body { font-family: var(--sans); margin: 0;
       background: var(--paper); color: var(--ink); }
.wrap { max-width: 820px; margin: 0 auto; padding: 1rem 1rem 4rem; }

/* --- the header: where you are, how you get back, and who you are --- */
.topbar { background: var(--surface); border-bottom: 1px solid var(--rule); }
.bar { max-width: 820px; margin: 0 auto; padding: .5rem 1rem;
  display: flex; align-items: baseline; gap: .1rem; font-size: .85rem; }
.bar .home { font-family: var(--serif); font-size: 1.05rem;
  color: var(--ink); text-decoration: none; }
.bar .crumb { color: var(--ink-mid); text-decoration: none;
  max-width: 22rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bar .crumb::before { content: "/"; color: var(--rule);
  margin: 0 .45rem; text-decoration: none; display: inline-block; }
.bar a.crumb:hover { text-decoration: underline; }
.bar [aria-current="page"] { color: var(--ink); }

/* Sign out is a real action but a rare one, so it is a click behind a
   disclosure rather than the only thing in the header. */
.account { margin-left: auto; padding-left: 1rem; font-size: .8rem;
  color: var(--ink-soft); position: relative; }
a.account { text-decoration: none; }
a.account:hover { text-decoration: underline; }
.account > summary { cursor: pointer; list-style: none; }
.account > summary::-webkit-details-marker { display: none; }
.account > summary::after { content: "\25BE"; margin-left: .3rem; font-size: .7em; }
.account > summary:hover { color: var(--ink); }
.account[open] > summary { color: var(--ink); }
.account .menu { position: absolute; right: 0; top: calc(100% + .4rem); z-index: 5;
  background: var(--surface); border: 1px solid var(--rule);
  padding: .45rem .7rem; white-space: nowrap; }
.account .menu form { margin: 0; }
.account .menu button { color: var(--ink); text-decoration: none; }
.account .menu button:hover { text-decoration: underline; }
a { color: var(--accent); }
h1 { font-size: 1.3rem; }
.msg { margin: .6rem 0; display: flex; }
.msg.user { justify-content: flex-end; }
.bubble { padding: .55rem .8rem; border-radius: .7rem; max-width: 80%; }
.msg.user .bubble { background: var(--accent); color: var(--surface); white-space: pre-wrap; }
.msg.assistant .bubble { background: var(--sunk); }
/* markdown rendered by smd inside assistant bubbles */
.bubble.md > :first-child { margin-top: 0; }
.bubble.md > :last-child { margin-bottom: 0; }
.bubble p { margin: .4em 0; }
.bubble ul, .bubble ol { margin: .4em 0; padding-left: 1.3em; }
.bubble li { margin: .15em 0; }
.bubble h1, .bubble h2, .bubble h3 { font-size: 1.05em; margin: .5em 0 .2em; }
.bubble code { background: rgba(0,0,0,.07); padding: 0 .25em; border-radius: 3px; font-size: .9em; }
.bubble pre { background: var(--sunk); color: var(--ink-mid); padding: .5rem; border-radius: .4rem; overflow-x: auto; }
.bubble pre code { background: none; padding: 0; }
.bubble a { color: inherit; text-decoration: underline; }
/* "thinking" indicator */
.thinking { display: inline-flex; gap: 5px; align-items: center; padding: .1rem 0; }
.thinking span { width: 6px; height: 6px; border-radius: 50%; background: var(--ink-soft); animation: blink 1.2s infinite ease-in-out; }
.thinking span:nth-child(2) { animation-delay: .2s; }
.thinking span:nth-child(3) { animation-delay: .4s; }
@keyframes blink { 0%, 80%, 100% { opacity: .3; } 40% { opacity: 1; } }
/* What a tool call leaves in the chat: one quiet line. The query and the rows
   it returned are in the artifact column. */
.tool-note { font-size: .78em; color: var(--ink-soft); margin: .4rem 0; font-style: italic; }
pre.sql { background: var(--sunk); color: var(--ink-mid); padding: .5rem .7rem; border-radius: .5rem; overflow-x: auto; font-size: .82em; }
.composer { display: flex; gap: .5rem; margin-top: 1rem; position: sticky; bottom: 0; background: var(--paper); padding: .5rem 0; }
.composer textarea { flex: 1; padding: .5rem; border: 1px solid var(--rule); border-radius: .5rem; resize: vertical; font: inherit; }
button { padding: .5rem .9rem; border: 0; border-radius: .5rem;
         background: var(--accent); color: var(--surface); cursor: pointer; }
button:disabled { opacity: .5; }
.err { color: var(--fail); margin: .4rem 0; }
.login-form { max-width: 20rem; }
button.linkish { background: none; color: var(--accent); padding: 0; font-size: inherit; text-decoration: underline; }
.proposal { border: 1px solid var(--accent); background: var(--accent-bg); padding: .6rem .8rem; margin: .8rem 0; }
.eyebrow { font-size: .7rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-soft); margin: 0 0 .3rem; font-weight: 600; }
.proposal-actions { display: flex; gap: .5rem; }
.proposal-actions form { margin: 0; }
button.secondary { background: var(--sunk); color: var(--ink); }
.muted { color: var(--ink-soft); }
button.danger { background: var(--fail); }
.report-list { list-style: none; padding: 0; }
.report-list li { padding: .4rem 0; border-bottom: 1px solid var(--rule-soft); }
.run-form { margin: .6rem 0; display: inline-block; margin-right: .5rem; }
.delete-form { margin-top: 1.5rem; }
.button-link { display: inline-block; padding: .5rem .9rem; border-radius: .5rem;
  background: var(--sunk); color: var(--ink); text-decoration: none; margin-right: .5rem; }
pre.sql { white-space: pre-wrap; }
.checks { margin: 1rem 0; }
.check { border: 1px solid var(--rule); border-radius: .5rem; padding: .6rem .8rem; margin: .6rem 0; }
.check.dismissed { opacity: .55; }
.check p { margin: .3rem 0; }
.check details { margin: .3rem 0; }
.check form { margin: .4rem 0 0; }
.check button { font-size: .78em; padding: .2rem .5rem; }
.pass { color: var(--pass); }
.fail { color: var(--fail); }

/* --- signing in: three doors, in the order people arrive at them ----------
   The primary door is filled and the other is outlined, so the eye lands on
   the one nearly everybody needs before it reads a word. */
.entrance { max-width: 26rem; margin: 2.5rem auto 0; }
.entrance h1 { font-family: var(--serif); font-weight: 400; font-size: 1.9rem;
  margin: 0 0 1.4rem; }

.door { display: block; text-decoration: none; font-size: .95rem;
  border: 1px solid var(--rule); background: var(--surface); color: var(--ink);
  padding: .8rem .95rem; margin-bottom: .55rem; }
.door:hover { border-color: var(--accent); }

.door-primary { background: var(--accent); border-color: var(--accent);
  color: var(--surface); }
.door-primary:hover { background: var(--accent-deep); border-color: var(--accent-deep); }

/* The password, folded away: one click for whoever needs it, invisible to
   everyone who does not. Matches the disclosure used on a report's SQL. */
.door-fold { margin-top: 1.3rem; border-top: 1px solid var(--rule-soft);
  padding-top: .9rem; }
.door-fold > summary { display: flex; align-items: baseline; gap: .45rem;
  cursor: pointer; list-style: none; font-size: .82rem; color: var(--ink-mid); }
.door-fold > summary::-webkit-details-marker { display: none; }
.door-fold > summary::before { content: "\25B8"; font-size: .7rem; color: var(--ink-soft); }
.door-fold[open] > summary::before { content: "\25BE"; }
.pw-form { margin: .9rem 0 0; }
.pw-form label { display: block; font-size: .75rem; letter-spacing: .06em;
  text-transform: uppercase; color: var(--ink-soft); margin-bottom: .25rem; }
.pw-form input { width: 100%; box-sizing: border-box; font: inherit;
  padding: .5rem .6rem; border: 1px solid var(--rule); background: var(--surface);
  margin-bottom: .8rem; }
.pw-form input:focus { outline: 2px solid var(--accent); outline-offset: -1px; }
.pw-form button { width: 100%; }

.door:focus-visible, .door-fold > summary:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 2px; }

/* --- name and description, above the editor --- */
.describe { display: grid; grid-template-columns: 1fr; gap: .25rem .8rem;
  margin: 0 0 1.1rem; border: 1px solid var(--rule); background: var(--surface);
  padding: .8rem .9rem; }
@media (min-width: 720px) {
  .describe { grid-template-columns: max-content 1fr; align-items: baseline; }
  .describe button { grid-column: 2; justify-self: start; }
}
.describe label { font-size: .75rem; letter-spacing: .06em; text-transform: uppercase;
  color: var(--ink-soft); }
.describe input { width: 100%; box-sizing: border-box; font: inherit;
  padding: .4rem .55rem; border: 1px solid var(--rule); background: var(--surface);
  color: var(--ink); }
.describe input:focus { outline: 2px solid var(--accent); outline-offset: -1px; }
.describe button { font-size: .78125rem; padding: .25rem .7rem; border-radius: 0;
  margin-top: .4rem; }
.describe-state { grid-column: 2; font-size: .75rem; color: var(--ink-soft);
  min-height: 1em; }

/* The way out to Studio, beside the account menu. It takes the free space when
   it is there; when it is not, `.account` keeps its own `margin-left: auto`. */
.bar .studio { margin-left: auto; padding-left: 1rem; font-size: .8rem;
  color: var(--ink-mid); text-decoration: none; white-space: nowrap; }
.bar .studio:hover { color: var(--ink); text-decoration: underline; }
.bar .studio ~ .account { margin-left: 0; }

/* --- picking a query out of BigQuery job history --- */
.sql-foot .from-bq { margin-left: auto; font-size: .78125rem; color: var(--accent); }
.joblist { display: grid; gap: .6rem; margin: 1rem 0; }
/* Each row is the button. Choosing and submitting are one action, so there is
   nothing to confirm and nothing to get out of step. */
.job { display: block; width: 100%; text-align: left; cursor: pointer;
  border: 1px solid var(--rule); border-radius: 0; background: var(--surface);
  color: var(--ink); padding: .6rem .75rem; font: inherit; }
.job:hover { border-color: var(--accent); background: var(--accent-bg); }
.job:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.job .jmeta { font-family: var(--mono); font-size: .6875rem; color: var(--ink-soft);
  display: block; margin-bottom: .35rem; }
.job .jsql { display: block; white-space: pre; overflow-x: auto;
  font-family: var(--mono); font-size: .78125rem; line-height: 1.6;
  max-height: 9rem; color: var(--ink); }

/* --- the two ways to start a report --- */
.modes { display: grid; gap: .75rem; margin: 1.2rem 0; max-width: 42rem; }
.mode { display: grid; grid-template-columns: auto 1fr; gap: .7rem;
  border: 1px solid var(--rule); background: var(--surface); padding: .85rem .95rem;
  cursor: pointer; align-items: start; }
.mode:hover { border-color: var(--ink-soft); }
.mode:has(input:checked) { border-color: var(--accent); background: var(--accent-bg); }
.mode input { margin-top: .3rem; }
.mode .mname { display: block; font-family: var(--serif); font-size: 1.05rem; }
.mode .mwhat { display: block; font-size: .8125rem; color: var(--ink-mid); margin-top: .2rem; }
.mode .mwho { display: block; font-family: var(--mono); font-size: .65rem;
  letter-spacing: .06em; text-transform: uppercase; color: var(--ink-soft); margin-top: .4rem; }
.mfoot { display: flex; gap: .8rem; align-items: center; flex-wrap: wrap; }

/* The editor with no chat pane: one column, and the artifact has the width. */
@media (min-width: 940px) { .cols.alone { grid-template-columns: 1fr; } }
.pane-toggle { margin: 1.2rem 0 0; }
.pane-toggle button { font-size: .78125rem; padding: .25rem .7rem; border-radius: 0; }

/* What bounded a reader's answer. Only rendered where scope actually bit, so
   it is allowed to be loud: a chair and an admin read 1,791 and 158,817 rows
   of the same mart, and nothing else on the page tells them apart. */
.scope-strip { border: 1px solid var(--accent); background: var(--accent-bg);
  padding: .6rem .8rem; display: grid; gap: .3rem; margin: 0 0 1rem; }
.scope-strip .lead { font-size: .8125rem; color: var(--accent); font-weight: 600; }
.scope-strip .detail { font-size: .75rem; color: var(--ink-mid); }
.scope-strip .detail b { font-family: var(--mono); font-weight: 600; }
/* Denied rather than narrowed: the reader is reading zero rows and no error
   says so. A different colour because it is a different fact. */
.scope-strip.warn { border-color: var(--stale); background: var(--stale-bg); }
.scope-strip.warn .lead { color: var(--stale); }

/* A block's contents. `.block-head` had padding and the body under it had
   none, so every word on the folder page sat flush against the border. */
.block-body { padding: .9rem; display: grid; gap: .9rem; }
.block-body > :first-child { margin-top: 0; }
.block-body > :last-child { margin-bottom: 0; }

/* A labelled thing and its label. */
.field { display: grid; gap: .35rem; }
.field .lbl { font-size: .7rem; letter-spacing: .08em; text-transform: uppercase;
  color: var(--ink-soft); font-weight: 600; }

/* The library's rail. Folders are for browsing and for access; the list beside
   them is still everything you can see unless one is open. */
.lib { display: grid; gap: 1rem; }
@media (min-width: 680px) { .lib { grid-template-columns: 13rem 1fr; align-items: start; } }
.rail { border: 1px solid var(--rule); background: var(--surface); }
.rail-head { padding: .45rem .7rem; border-bottom: 1px solid var(--rule); }
.rail .fold { display: flex; align-items: baseline; gap: .5rem; padding: .35rem .7rem;
  font-size: .8125rem; border-bottom: 1px solid var(--rule-soft); text-decoration: none;
  color: var(--ink); }
.rail .fold:last-of-type { border-bottom: 0; }
.rail .fold .n { margin-left: auto; font-family: var(--mono); font-size: .6875rem;
  color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.rail .fold.on { background: var(--accent-bg); color: var(--accent); font-weight: 600;
  box-shadow: inset 2px 0 0 var(--accent); }
.rail-foot { padding: .45rem .7rem; border-top: 1px solid var(--rule);
  display: flex; gap: .3rem; }
.rail-foot input { min-width: 0; flex: 1; }

/* Sharing. Groups and people in one list, because grants are a union. */
.share { display: grid; gap: .35rem; }
.share fieldset { border: 1px solid var(--rule-soft); margin: .8rem 0 1rem;
  padding: .75rem .9rem; display: grid; gap: .35rem; }
.share fieldset legend { font-size: .7rem; letter-spacing: .08em;
  text-transform: uppercase; color: var(--ink-soft); font-weight: 600;
  padding: 0 .35rem; }
.share input[type="text"], .share input[type="email"] {
  padding: .4rem .5rem; border: 1px solid var(--rule); background: var(--surface);
  color: var(--ink); font: inherit; font-size: .875rem; max-width: 22rem; }
/* The submit sits on its own line rather than hard against the fieldset. */
.share button { justify-self: start; margin-top: .2rem; }
.grantees { display: flex; gap: .35rem; flex-wrap: wrap; align-items: center; }
.grantees .tag { font-size: .6875rem; font-family: var(--mono); padding: .15rem .45rem;
  border: 1px solid var(--rule); background: var(--sunk); white-space: nowrap; }
.grantees .tag.grp { border-color: var(--accent); color: var(--accent);
  background: var(--accent-bg); }
/* A checkbox tag is a control, so it says so on hover and keeps its box and
   its label on one line. */
.grantees label.tag { display: inline-flex; align-items: center; gap: .35rem;
  cursor: pointer; }
.grantees label.tag:hover { border-color: var(--ink-mid); }
.safety { border-left: 3px solid var(--pass); background: var(--pass-bg);
  color: var(--ink-mid); padding: .5rem .7rem; font-size: .8125rem; }
.safety strong { color: var(--pass); }
.move-form { display: flex; gap: .5rem; align-items: baseline; margin: 1.2rem 0; }
/* Retiring a folder is the last thing on the page and reads as such. */
.delete-form { margin-top: 1.6rem; }

/* Which folder is open, and the way into who it is for. A folder is otherwise
   reachable only from a report inside it. */
.open-folder { font-size: .8125rem; color: var(--ink-mid); margin: 0 0 .6rem; }
/* The grantee pickers. Behind a control rather than laid out as checkboxes:
   there are forty-odd chapter groups, and sharing with a whole chapter should
   not be one stray click. */
.share select[multiple] { width: 100%; max-width: 22rem; display: block;
  margin: .2rem 0 .8rem; font-size: .8125rem; }
.share label { display: block; font-size: .75rem; color: var(--ink-soft);
  margin-top: .6rem; }