/*
 * THE PAGES, after the board (doc/ui/index.html) where AURISA-DOC-39 does not
 * say otherwise. No colour, spacing, radius or border width is written here:
 * every one is a token (tokens.css).
 */
@import url('tokens.css');

* { box-sizing: border-box; }
html, body { margin: 0; }
body { min-height: 100vh; background: var(--ground); color: var(--ink); font: 16px/1.55 var(--ui); }
[hidden] { display: none !important; }

h1, h2, h3 { font-family: var(--display); font-weight: 700; letter-spacing: -0.02em; }
a { color: var(--act); font-weight: 600; }
:focus-visible { outline: var(--outline-width) solid var(--act); outline-offset: var(--space-1); }

/* ── the frame's bar (shell.js) ── */
.top { display: flex; align-items: center; gap: var(--space-5); padding: var(--space-4) var(--space-6); background: var(--frame); color: var(--on-frame); }
.top .logo { height: 24px; display: block; }
.top .logo.small { display: none; height: 28px; }
/* The company, a control that opens its menu: the companies to choose from, where there is a choice, and New company. */
.top .co { font-weight: 600; font-size: 15px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.top details.co { position: relative; overflow: visible; }
.top details.co summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4); border-radius: var(--radius-s); background: var(--on-frame-soft); overflow: hidden; text-overflow: ellipsis; }
.top details.co summary::-webkit-details-marker { display: none; }
.top details.co summary::after { content: ''; flex: none; width: 7px; height: 7px; border: solid var(--on-frame-muted); border-width: 0 var(--border-width) var(--border-width) 0; transform: rotate(45deg) translateY(-2px); }
.top details.co .menu { left: 0; right: auto; min-width: 260px; white-space: normal; }
.menu .k { color: var(--muted); font-size: 13.5px; font-weight: 700; padding: var(--space-3) var(--space-4) var(--space-1); }
.menu button[aria-current='true'] { background: var(--act-soft); }
.top nav { display: flex; gap: var(--space-5); }
.top nav a { color: var(--on-frame-muted); font-size: 15.5px; }
.top nav a[aria-current='page'] { color: var(--on-frame); }
.top .me { margin-left: auto; position: relative; }
.top .me summary { list-style: none; cursor: pointer; width: 32px; height: 32px; border-radius: var(--radius-round); background: var(--act); color: var(--on-act); display: grid; place-items: center; font-weight: 700; font-size: 13px; }
.top .me summary::-webkit-details-marker { display: none; }

.menu { position: absolute; right: 0; top: 42px; z-index: 3; min-width: 220px; padding: var(--space-3); background: var(--surface); color: var(--ink); border: var(--border-width) solid var(--line); border-radius: var(--radius-l); box-shadow: 0 18px 40px -12px var(--shadow); }
.menu .who { color: var(--muted); font-size: 13.5px; font-weight: 700; padding: var(--space-3) var(--space-4) var(--space-1); }
.menu .who .name { display: block; color: var(--ink); font-size: 15px; }
.menu a, .menu button { display: block; width: 100%; text-align: left; padding: var(--space-3) var(--space-4); border-radius: var(--radius-s); color: var(--ink); text-decoration: none; font: 600 16px var(--ui); background: none; border: 0; cursor: pointer; }
.menu a:hover, .menu button:hover { background: var(--act-soft); }
.menu hr { border: 0; border-top: var(--border-width) solid var(--line); margin: var(--space-2) 0; }
/* A form in a menu, such as New company: its fields and its button the menu's width, the button the page's. */
.menu form { padding: var(--space-3) var(--space-4); }
.menu .field { margin: 0 0 var(--space-4); }
.menu .btn, .menu .btn:hover { width: 100%; text-align: center; padding: var(--space-4); border-radius: var(--radius-m); background: var(--act); color: var(--on-act); }

/* The frame's one width, so no area or tab moves the page's edge; wide enough for the people list to stand as a table (list.js). */
.page { max-width: 940px; padding: var(--space-7) var(--space-7) var(--space-8); }
.page h2 { font-size: 32px; line-height: 1.1; margin: 0 0 var(--space-3); }
.lede { color: var(--muted); margin: 0 0 var(--space-7); max-width: 60ch; font-size: 17.5px; }
.lede b { color: var(--ink); font-weight: 600; }
.part { margin: 0 0 var(--space-7); }
.part h3 { font-size: 22px; margin: 0 0 var(--space-2); }
.part .intro { color: var(--muted); margin: 0; }

/* ── where you are: the current area and the current tab, marked one way ── */
/* Its own colour and a rule under it in that colour; never teal, which is the colour of acting. */
.top nav a, .tabs a { padding: var(--space-3) 0; border-bottom: var(--border-width) solid transparent; text-decoration: none; }
.top nav a[aria-current='page'], .tabs a[aria-current='page'] { border-bottom-color: currentColor; }
.tabs { display: flex; gap: var(--space-5); margin: 0 0 var(--space-6); }
.tabs a { color: var(--muted); }
.tabs a[aria-current='page'] { color: var(--ink); }

/* ── forms and actions ── */
.btn { display: inline-block; font: 600 16px var(--ui); text-decoration: none; border-radius: var(--radius-m); padding: var(--space-4) var(--space-5); border: var(--border-width) solid transparent; cursor: pointer; background: var(--act); color: var(--on-act); }
.btn:disabled { opacity: 0.6; cursor: progress; }
label { display: block; font-weight: 600; font-size: 15px; margin: 0 0 var(--space-3); }
input, select, textarea { width: 100%; font: 500 16.5px var(--ui); color: var(--ink); background: var(--surface); border: var(--border-width) solid var(--line); border-radius: var(--radius-m); padding: var(--space-4); }
textarea { display: block; resize: vertical; line-height: 1.5; }
input.code { font-family: var(--mono); letter-spacing: 0.1em; text-transform: uppercase; }
.field { margin: 0 0 var(--space-5); }
.hint { font-size: 14.5px; color: var(--muted); margin: var(--space-2) 0 0; }

/* ── the message (message.js): how an act went, a refusal (role alert) or a success (role status) ── */
/* Words beside a rule, never boxed like a field, with the same space below wherever they stand: no other rule reaches a message (pages.test.js). */
.message { margin: 0 0 var(--space-5); padding: var(--space-1) 0 var(--space-1) var(--space-4); border-left: var(--border-width) solid var(--ink); color: var(--ink); font-weight: 500; max-width: 60ch; }
.message[role='status'] { border-left-color: var(--act); }
.message:empty { display: none; }

form.narrow { max-width: 420px; margin: var(--space-5) 0 0; }
/* A form around one long text, such as the mission: the page's width. */
form.long { margin: var(--space-5) 0 0; }

/* ── keys: the secret shown once, the form, the list ── */
/* What is copied exactly wraps at every width, anywhere in a word, so nothing scrolls sideways or is cut. */
.once { position: relative; overflow: hidden; margin: var(--space-5) 0 var(--space-6); padding: var(--space-5) var(--space-6); border-radius: var(--radius-l); background: var(--frame); color: var(--on-frame); }
.once::after { content: ''; position: absolute; right: -30px; top: -30px; width: 110px; height: 110px; border-radius: var(--radius-round); background: var(--waits); }
.once > * { position: relative; z-index: 1; }
.once h4 { font: 700 20px var(--ui); margin: 0 0 var(--space-2); max-width: 80%; }
.once .text { color: var(--on-frame-muted); margin: 0 0 var(--space-4); max-width: 85%; font-size: 15.5px; border-top: 0; padding-top: 0; }
.once .text.lead-in { margin: var(--space-5) 0 var(--space-3); max-width: none; }
.once .hint { color: var(--on-frame-muted); margin: var(--space-3) 0 0; font-size: 15.5px; }
/* The panel's own way to close: quiet on the petrol, so the Copy beside the secret stays the one that waits. */
.once .close { margin: var(--space-5) 0 0; background: var(--on-frame-soft); color: var(--on-frame); border-color: var(--on-frame-edge); }
.once code { font-family: var(--mono); }
/* A command in the panel's words reads on the petrol, not as a document's code does. */
.once .text code { color: var(--on-frame); background: var(--on-frame-soft); }
.secret, .cfg { display: flex; gap: var(--space-3); align-items: flex-start; }
.secret code, .cfg pre { flex: 1; min-width: 0; margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; border-radius: var(--radius-m); padding: var(--space-4); }
.secret code { font: 500 15px var(--mono); color: var(--on-frame); background: var(--on-frame-soft); border: var(--border-width) solid var(--on-frame-edge); }
.cfg pre { font: 12.5px/1.65 var(--mono); color: var(--on-frame); background: var(--on-frame-sunk); }
.secret .copy { background: var(--waits-ink); color: var(--on-waits); }
.inline { margin: var(--space-5) 0 var(--space-6); }
.inline .row { display: flex; flex-wrap: wrap; gap: var(--space-4); align-items: flex-end; }
.inline .field { flex: 1 1 200px; margin: 0; }

/* ── the list (list.js): set widths by kind, only a column of words wraps ── */
/* Each kind's width, and the act columns as wide as the acts they hold: one button, or one button and More. */
.list-room { --col-date: 8rem; --col-moment: 11rem; --col-level: 6.5rem; --col-state: 6rem; --col-type: 8.5rem; --col-progress: 8.5rem; --col-account: 10rem; --col-hand: 10rem; --col-kind: 9rem; --col-scope: 9rem; --col-act: 6.5rem; --col-acts: 13.5rem; }
/* The room's own width less what stands aside, its set columns (list.js writes their sum as --set), is the first column's: under 12rem the rows become cards. */
.list-room { --aside: var(--set); container: list / inline-size; padding-right: var(--aside); }
.list { width: calc(100% + var(--aside)); table-layout: fixed; border-collapse: separate; border-spacing: 0; background: var(--surface); border: var(--border-width) solid var(--line); border-radius: var(--radius-l); }
.list col.date { width: var(--col-date); }
.list col.moment { width: var(--col-moment); }
.list col.level { width: var(--col-level); }
.list col.state { width: var(--col-state); }
.list col.type { width: var(--col-type); }
.list col.progress { width: var(--col-progress); }
.list col.account { width: var(--col-account); }
.list col.hand { width: var(--col-hand); }
.list col.kind { width: var(--col-kind); }
.list col.scope { width: var(--col-scope); }
.list col.act { width: var(--col-act); }
.list col.acts { width: var(--col-acts); }
.list th { text-align: left; font-weight: 700; color: var(--muted); font-size: 14px; padding: var(--space-4) var(--space-5); border-bottom: var(--border-width) solid var(--line); }
.list td { padding: var(--space-4) var(--space-5); border-top: var(--border-width-thin) solid var(--line); vertical-align: middle; }
.list tbody:first-of-type tr:first-child td, .list tbody:empty + .fold td { border-top: 0; }
.list td:first-child { font-weight: 700; }
/* A row that nests stands one step in for each level under its parent (list.js, `--depth`). */
.list td:first-child { padding-left: calc(var(--space-5) + var(--depth, 0) * var(--space-6)); }
.list td:not(.wraps) { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.list td.end { text-align: right; overflow: visible; }
.list .under { display: block; color: var(--muted); font-weight: 500; font-size: 14px; }
/* What opens to more of what it is, read-only: a server's configuration under its row's name, in the page's words, never bold; a fact's state, opening to the words behind it. */
.list details.opens { margin: var(--space-2) 0 0; font-weight: 500; font-size: 14px; }
.opens summary { cursor: pointer; color: var(--act); font-weight: 600; width: fit-content; }
.opens .facts { grid-template-columns: minmax(0, 1fr); gap: 0; margin: var(--space-3) 0 0; }
.opens .facts dd { margin: 0 0 var(--space-3); }
/* A program's own words, as it wrote them, such as a failed setup's: its lines kept, wrapped in the frame; straight under the summary where it opens to them alone. */
.opens .output { margin: 0; font: 13px/1.6 var(--mono); white-space: pre-wrap; overflow-wrap: anywhere; }
.opens > .output { margin: var(--space-2) 0 0; }
.list tr.ended { color: var(--muted); }
.list tr.ended td:first-child { font-weight: 500; }
.list .fold td { padding: var(--space-2) var(--space-3); }
.list .fold button::after { content: ' ▸'; }
.list .fold button[aria-expanded='true']::after { content: ' ▾'; }
.list details.more { display: inline-block; position: relative; vertical-align: middle; }
.list .more summary { list-style: none; cursor: pointer; padding: var(--space-3); border-radius: var(--radius-s); color: var(--act); font-weight: 600; }
.list .more summary::-webkit-details-marker { display: none; }
.list .more .menu { top: 100%; white-space: normal; text-align: left; }
.menu button small, .list td.end .btn small { display: block; color: var(--muted); font-size: 13px; font-weight: 500; }
/* What else a row's one button does, under its words and wrapped within the acts' column. */
.list td.end .btn { text-align: left; }
.list td.end .btn small { white-space: normal; max-width: 7rem; }
.menu .ends { color: var(--ends); }
p.empty { margin: var(--space-4) 0 0; color: var(--muted); }
.btn.ends { background: transparent; color: var(--ends); padding: var(--space-3); border: 0; }
.btn.quiet { background: transparent; color: var(--act); padding: var(--space-3); border: 0; }

/* ── the question before an act that ends something (question.js), in a row under the row it is about ── */
/* The question's words wrap, as a sentence does: the one-line rule of a list's cells is not theirs. */
.list tr.asking td { padding: 0 var(--space-3) var(--space-3); border-top: 0; font-weight: 500; white-space: normal; }
.question { padding: var(--space-5) var(--space-6); border-radius: var(--radius-l); border: var(--border-width) solid var(--ends); background: var(--surface); }
.question h4 { font: 800 19px var(--ui); margin: 0 0 var(--space-2); }
.question .text { color: var(--muted); margin: 0 0 var(--space-4); font-size: 15.5px; max-width: 70ch; border-top: 0; padding-top: 0; }
.question .act { display: flex; flex-wrap: wrap; gap: var(--space-4); }
.btn.ending { background: var(--ends); color: var(--on-act); }

/* ── people: the list ── */
.tag { display: inline-block; font-size: 13.5px; font-weight: 700; padding: var(--space-1) var(--space-3); border-radius: var(--radius-round); background: var(--act-soft); color: var(--ink); }
.tag.owner { background: var(--frame); color: var(--on-frame); }
.inline .field.level { flex: 0 1 150px; }
/* The server choice says each server joined or not yet, so it keeps room for those words; narrower, its act wraps under it. */
.inline .field.server { flex: 1 1 280px; }
.hide { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }

/* ── reading the record: the desk (desk.js), an item's page (item.js), and a document's (document.js) ── */
/* Under the heading, what the thing is: its id, type and kind. */
.what { color: var(--muted); margin: 0 0 var(--space-6); font: 500 14.5px var(--mono); }
/* An id written on a page: a link to its page, in the id's own typeface. */
.id { font-family: var(--mono); font-size: 0.92em; }
/* A block of facts: each label beside its value; under each other on a narrow screen. */
.facts { display: grid; grid-template-columns: 10rem minmax(0, 1fr); gap: var(--space-3) var(--space-5); margin: 0 0 var(--space-7); }
.facts dt { color: var(--muted); font-weight: 600; }
.facts dd { margin: 0; overflow-wrap: anywhere; }
/* A block of facts in a part stands under its intro, as a project's page shows what its box carries. */
.part .facts { margin: var(--space-4) 0 0; }
.facts ul { list-style: none; margin: 0; padding: 0; }
/* Text as a person or an agent typed it: its line breaks kept, never markup, a long word broken rather than scrolled. */
.typed { white-space: pre-wrap; overflow-wrap: anywhere; margin: var(--space-3) 0 0; max-width: 75ch; }
ul.typed { white-space: normal; padding-left: var(--space-6); }
ul.typed li { white-space: pre-wrap; margin: 0 0 var(--space-3); }
/* Where it stands: each road out of its state, what is next on it, and the questions there, each with who answers and what it reads now. */
.road { margin: var(--space-5) 0 0; }
.road h4 { font: 700 17px var(--ui); margin: 0 0 var(--space-2); }
.road .next { color: var(--muted); margin: 0; }
/* Rows of sentences on one card: the questions on a road, and the desk's lines (desk.js), each its head, what it says and how long, small. */
.asks, .lines { list-style: none; margin: var(--space-3) 0 0; padding: 0; background: var(--surface); border: var(--border-width) solid var(--line); border-radius: var(--radius-l); }
.asks li, .lines li { padding: var(--space-4) var(--space-5); border-top: var(--border-width-thin) solid var(--line); }
.asks li:first-child, .lines li:first-child { border-top: 0; }
.asks .ask, .lines .head { margin: 0; font-weight: 600; overflow-wrap: anywhere; }
.asks .who, .lines .age { margin: var(--space-2) 0 0; color: var(--muted); font-size: 14.5px; overflow-wrap: anywhere; }
.lines .head .id { color: var(--muted); font-weight: 500; }
.lines .note { margin: var(--space-2) 0 0; white-space: pre-wrap; overflow-wrap: anywhere; max-width: 75ch; }
/* What a part of the desk counted beyond the lines it shows. */
.count { margin: var(--space-3) 0 0; color: var(--muted); }
/* Comments in order: who and when, then the text as typed. */
.said { list-style: none; margin: var(--space-4) 0 0; padding: 0; }
.said li { padding: var(--space-4) 0; border-top: var(--border-width-thin) solid var(--line); }
.said .by { margin: 0; color: var(--muted); font-size: 14.5px; font-weight: 600; }
/* A document's contents: its headings as the index nests them, each a link to its heading in the text. */
#contents ol { list-style: none; margin: var(--space-3) 0 0; padding: 0; }
#contents ol ol { margin: var(--space-1) 0 var(--space-2); padding-left: var(--space-6); }
#contents li { margin: var(--space-2) 0 0; overflow-wrap: anywhere; }
#contents a { text-decoration: none; }
#contents a:hover { text-decoration: underline; }
/* A document's text, rendered (markdown.js): at a reading width, nothing wider than the page but a code block, which scrolls on its own. */
.text { max-width: 75ch; overflow-wrap: anywhere; border-top: var(--border-width-thin) solid var(--line); padding-top: var(--space-6); }
.text > * { margin: 0 0 var(--space-4); }
.text h1, .text h2, .text h3, .text h4, .text h5, .text h6 { font-family: var(--display); font-weight: 700; letter-spacing: -0.01em; line-height: 1.2; margin: var(--space-7) 0 var(--space-3); scroll-margin-top: var(--space-5); }
.text h1 { font-size: 30px; }
.text h2 { font-size: 25px; }
.text h3 { font-size: 21px; }
.text h4 { font-size: 18px; }
.text h5, .text h6 { font-size: 16px; }
.text > :first-child { margin-top: 0; }
.text ul, .text ol { padding-left: var(--space-6); }
.text li { margin: var(--space-1) 0; }
.text blockquote { margin-left: 0; padding-left: var(--space-5); border-left: var(--border-width) solid var(--line); color: var(--muted); }
.text code { font-family: var(--mono); font-size: 0.9em; padding: var(--space-1) var(--space-2); border-radius: var(--radius-s); background: var(--act-soft); }
.text pre { overflow-x: auto; overflow-wrap: normal; padding: var(--space-4) var(--space-5); border: var(--border-width-thin) solid var(--line); border-radius: var(--radius-m); background: var(--surface); }
.text pre code { padding: 0; background: none; font-size: 14px; }
.text table { width: 100%; table-layout: fixed; border-collapse: collapse; }
.text th, .text td { text-align: left; vertical-align: top; padding: var(--space-3) var(--space-4); border-bottom: var(--border-width-thin) solid var(--line); }
.text th { font-weight: 700; }
.text hr { border: 0; border-top: var(--border-width-thin) solid var(--line); }

/* ── sign-in and the code page: the brand panel beside the form, one form width ── */
.split { display: grid; grid-template-columns: 1fr 1fr; min-height: 100vh; }
.panel { position: relative; overflow: hidden; background: var(--frame); color: var(--on-frame); padding: var(--space-8); display: flex; flex-direction: column; justify-content: space-between; gap: var(--space-6); }
.panel .logo { height: 30px; align-self: flex-start; }
.panel .big { width: 62%; max-width: 260px; align-self: center; }
.panel .line { margin: 0; font: 700 26px/1.25 var(--display); letter-spacing: -0.01em; max-width: 16ch; }
.panel .line em { font-style: normal; color: var(--waits); }
.form { padding: var(--space-8); display: flex; align-items: center; background: var(--surface); }
.form .box { width: 100%; max-width: 340px; }
.form h2 { font-size: 34px; line-height: 1.1; margin: 0 0 var(--space-3); }
.form .sub { color: var(--muted); margin: 0 0 var(--space-6); font-size: 17px; }
.form .btn { width: 100%; padding: var(--space-4); }
.alt { font-size: 15.5px; margin: var(--space-5) 0 0; color: var(--muted); }
/* The code page's panel: the a, close up — the whole a, huge, cropped by the right and bottom edges, its own point the warm spot, and the logo small at the bottom left, clear of it (doc/brand/README.md, Large petrol areas). */
.panel.close-up { justify-content: flex-end; }
.close-up .a { position: absolute; right: 0; bottom: 0; width: 120%; transform: translate(29%, 26%); }
.close-up .logo { position: relative; height: 24px; }

/* ── a narrow screen: the main action stays in reach ── */
@media (max-width: 640px) {
  .top { flex-wrap: wrap; padding: var(--space-3) var(--space-4); gap: var(--space-3); }
  .top .logo { display: none; }
  .top .logo.small { display: block; }
  .top nav { order: 1; width: 100%; }
  .page { padding: var(--space-5) var(--space-5) var(--space-7); }
  .page h2 { font-size: 28px; }
  .split { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
  .panel { padding: var(--space-5); gap: var(--space-3); }
  .panel .big { display: none; }
  .panel .line { font-size: 20px; max-width: none; }
  .form { padding: var(--space-6) var(--space-5); align-items: flex-start; }
  .panel.close-up { min-height: 96px; justify-content: center; }
  .close-up .a { width: 220px; transform: translate(25%, 45%); }
  .once { padding: var(--space-5); }
  .secret, .cfg { flex-direction: column; align-items: stretch; }
  .question { padding: var(--space-4); }
  .facts { grid-template-columns: minmax(0, 1fr); gap: var(--space-1); }
  .facts dd { margin: 0 0 var(--space-3); }
  /* Every list a card: all but 12rem of the screen stands aside. */
  .list-room { --aside: calc(100vw - 12rem); }
}

/* ── a list too narrow for its first column: each row a card (under 640 px, every list's room is) ── */
@container list (max-width: 12rem) {
  .list, .list tbody { display: block; }
  .list thead, .list colgroup { display: none; }
  .list tr { display: grid; grid-template-columns: 1fr; padding: var(--space-4) var(--space-5); border-top: var(--border-width-thin) solid var(--line); }
  .list tbody:first-of-type tr:first-child, .list tbody:empty + .fold tr { border-top: 0; }
  .list .fold tr { padding: var(--space-2) var(--space-3); }
  .list td { padding: var(--space-1) 0; border: 0; }
  /* A card that nests stands in whole, as its row does. */
  .list tr { padding-left: calc(var(--space-5) + var(--depth, 0) * var(--space-6)); }
  .list td:first-child { padding-left: 0; }
  .list td:not(:first-child):not(.end):not(:empty)::before { content: attr(data-label) ': '; color: var(--muted); }
  .list td.end:not(:empty) { padding-top: var(--space-3); }
  /* The question belongs to the card above it: no rule between them. */
  .list tr.asking { border-top: 0; padding-top: 0; }
}