/* The stylesheet of the shell, the only one: a module carries no CSS of its own.
   Rhythm comes from the mail prototype of 2026-09-05; the fonts are the system ones,
   because the portal runs on the office network, with or without the internet. The
   dark theme follows the operating system.

   The colours of grounds, ink, lines, accent and masthead (`--ground` … `--bar-brand`)
   are not here: they are the office's palette (card 280), one of the kit's in
   `portal/palettes.py`, and `shell/base.html` writes them in a `<style>` after this
   sheet. Text in the accent's hue uses `--accent-ink`, never `--accent`: on a light
   ground the fuchsia of Xhalia does not read. */

:root {
  --certain: #1E5C58;
  --uncertain: #8A5E12;
  --new: #3B4E86;
  --neutral: #6C7775;
  --notice: #9A3131;
  --radius: 5px;
  --serif: "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root {
    --certain: #66B7AE;
    --uncertain: #CFA054;
    --new: #8FA0DC;
    --neutral: #8A9491;
    --notice: #E08A8A;
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font: 15px/1.55 var(--sans);
  -webkit-font-smoothing: antialiased;
}

.sheet {
  max-width: 58rem;
  margin: 0 auto;
  padding: 2rem 1rem 4rem;
}

h1 { font-family: var(--serif); font-size: 1.6rem; font-weight: 500; letter-spacing: -.01em; margin: 0 0 1.5rem; }
h2 { font-family: var(--serif); font-size: 1.15rem; font-weight: 600; margin: 0 0 .75rem; }

a { color: var(--accent-ink); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 3px; }

.warning { border: 1px solid var(--notice); border-radius: var(--radius); color: var(--notice); margin: 0 0 1.5rem; padding: .6rem .9rem; }

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

.login { display: grid; gap: .6rem; max-width: 20rem; }

label { font-size: .9rem; }

input, button, select {
  font: inherit;
  color: inherit;
  padding: .4rem .7rem;
  background: var(--surface);
  border: 1px solid var(--line2);
  border-radius: var(--radius);
}

input[type=text], input[type=password] { min-width: 0; max-width: 100%; }

button { cursor: pointer; font-size: .9rem; white-space: nowrap; }
button:hover { border-color: var(--ink3); }
button[disabled] { opacity: .45; cursor: default; }

/* The main gesture of a form: the login, the confirmation of a proposal, the
   application of the approved ones. */
.login button,
form[data-action="ok"] button,
form[data-action="apply"] button,
button.primary {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--on-accent);
}

.notice { color: var(--notice); margin: .5rem 0 0; }

.context { color: var(--ink2); font-size: .9rem; margin: 0 0 .75rem; }
.empty { color: var(--ink3); font-size: .9rem; padding: .75rem 0; }
.muted { color: var(--ink3); font-size: .85rem; }

[data-outcome] { color: var(--ink2); font-size: .85rem; margin-left: .5rem; }

table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: .45rem .6rem; border-bottom: 1px solid var(--line); vertical-align: top; }
th { font-size: .72rem; text-transform: uppercase; letter-spacing: .1em; color: var(--ink3); font-weight: 600; }

/* A list of rows, the shape of every read-only module (mail-done, cases). */
table.list { border-top: 1px solid var(--line); }
table.list td { background: var(--surface); }

/* A pill: a short word of state, in capitals, with its own color. */
.pill {
  display: inline-block;
  font-size: .7rem;
  text-transform: uppercase;
  letter-spacing: .09em;
  font-weight: 600;
  padding: .1rem .5rem;
  border-radius: 11px;
  border: 1px solid var(--line2);
  color: var(--ink2);
  white-space: nowrap;
}
.pill.state-certain { color: var(--certain); border-color: var(--certain); }
.pill.state-uncertain { color: var(--uncertain); border-color: var(--uncertain); }
.pill.state-new { color: var(--new); border-color: var(--new); }
.pill.state-active { color: var(--certain); border-color: var(--certain); }
.pill.state-dormant { color: var(--ink3); }
.pill.state-decided { color: var(--neutral); }
.pill.state-unrelated { color: var(--neutral); border-color: var(--neutral); }
.pill.kind-home { color: var(--certain); border-color: var(--certain); }
.pill.kind-reference { color: var(--neutral); border-color: var(--neutral); }

/* --- the masthead, the heading of the home and the tabs ---------------------- */

/* The masthead (card 260), one thin line on every page after the login: the mark on
   the left, then the pages, the person's menu on the right. At 40rem and below the
   pages and the menu go behind one button, «Menu». Its colours are the palette's own
   three (card 280): `--bar-bg`, `--bar-ink`, `--bar-brand` — Xhalia's is black in
   both themes. A hovered or current entry takes a ground of the page, and its ink. */
.masthead { background: var(--bar-bg); color: var(--bar-ink); border-bottom: 1px solid var(--line); }
.masthead-bar { max-width: 90rem; margin: 0 auto; padding: .45rem 1rem; display: flex; align-items: center; gap: 1.25rem; }
.brand { font-family: var(--serif); font-weight: 700; letter-spacing: .14em; text-transform: uppercase; font-size: .85rem; color: var(--bar-brand); text-decoration: none; white-space: nowrap; }
.brand:hover { text-decoration: underline; }
.brand-logo { display: inline-flex; align-items: center; }
.brand-logo img { display: block; max-height: 2rem; max-width: 12rem; width: auto; height: auto; }
.masthead-toggle { display: none; margin-left: auto; }
.masthead .masthead-toggle { color: var(--bar-ink); }
.masthead-menu { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 1rem; }
.masthead-pages { flex: 1 1 auto; min-width: 0; }
.masthead-pages ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .1rem .25rem; }
.masthead-pages a { display: block; padding: .2rem .55rem; border-radius: var(--radius); color: var(--bar-ink); text-decoration: none; font-size: .92rem; }
.masthead-pages a:hover { color: var(--ink); background: var(--surface2); }
.masthead-pages a[aria-current="page"] { color: var(--ink); font-weight: 600; background: var(--accent-soft); }
.masthead-pages .notice, .brand-unavailable { margin: 0; font-size: .85rem; color: var(--bar-ink); }
.masthead-person { position: relative; margin-left: auto; }
.masthead-person > summary { list-style: none; cursor: pointer; padding: .2rem .55rem; border-radius: var(--radius); color: var(--bar-ink); font-size: .92rem; white-space: nowrap; }
.masthead-person > summary::-webkit-details-marker { display: none; }
.masthead-person > summary::after { content: " ▾"; }
.masthead-person > summary:hover, .masthead-person[open] > summary { color: var(--ink); background: var(--surface2); }
.masthead-person > ul {
  position: absolute; right: 0; top: calc(100% + .3rem); z-index: 2; min-width: 12rem;
  list-style: none; margin: 0; padding: .3rem; background: var(--raised);
  border: 1px solid var(--line); border-radius: var(--radius); box-shadow: 0 4px 12px rgb(0 0 0 / .08);
}
.masthead-person li > a, .masthead-person li button { display: block; width: 100%; text-align: left; padding: .35rem .6rem; font-size: .9rem; color: var(--ink); text-decoration: none; border-radius: var(--radius); }
.masthead-person li > a:hover, .masthead-person li button:hover { background: var(--surface2); }
.masthead-person form { margin: 0; }

@media (max-width: 40rem) {
  .masthead-bar { flex-wrap: wrap; gap: .5rem; }
  .masthead-toggle { display: inline-block; }
  .masthead-menu { flex-basis: 100%; flex-direction: column; align-items: stretch; gap: .5rem; }
  .masthead-toggle[aria-expanded="false"] + .masthead-menu { display: none; }
  .masthead-pages ul { flex-direction: column; }
  .masthead-person { margin-left: 0; }
  .masthead-person > ul { position: static; box-shadow: none; margin-top: .3rem; }
}

/* The heading of the home (card 260): the greeting and the date. */
.greeting { margin: 0 0 1.25rem; }
.greeting h1 { margin: 0; }
.greeting .today { color: var(--ink3); font-size: .9rem; margin: .2rem 0 0; }
.page-title { margin: 0 0 1rem; }

.tabs { display: flex; gap: .25rem; border-bottom: 1px solid var(--line); margin: 0 0 1.5rem; overflow-x: auto; }
.tabs [role="tab"] {
  background: none; border: 0; border-bottom: 2px solid transparent; border-radius: 0;
  color: var(--ink2); font-size: .95rem; padding: .6rem .9rem; margin-bottom: -1px;
  text-decoration: none;
}
.tabs [role="tab"]:hover { color: var(--ink); border-color: transparent; }
.tabs [role="tab"][aria-selected="true"] { color: var(--ink); font-weight: 600; border-bottom-color: var(--accent); }
/* What waits for the person in a tab (card 238): «Da vedere 15». */
.tabs .count { display: inline-block; min-width: 1.4em; margin-left: .35rem; padding: 0 .4em; border-radius: 999px; background: var(--accent-soft); color: var(--accent-ink); font-size: .78rem; font-weight: 600; text-align: center; font-variant-numeric: tabular-nums; }

.screen-title { font-size: 1.25rem; margin: 0 0 .9rem; }

/* The tabs as a column on the left of the open screen above 56rem (~900px), on every
   page with tabs (card 282): no key in the manifest of the page chooses it. Below, they
   stay a row on top, scrolling inside themselves rather than the page. */
@media (min-width: 56rem) {
  .sheet:has(.tabbed) { max-width: 72rem; }
  .tabbed { display: grid; grid-template-columns: minmax(10rem, 14rem) minmax(0, 1fr); column-gap: 1.75rem; align-items: start; }
  .tabbed > .screen { min-width: 0; }
  .tabbed .tabs { flex-direction: column; gap: .1rem; border-bottom: 0; border-right: 1px solid var(--line); margin: 0; overflow-x: visible; position: sticky; top: 1rem; }
  .tabbed .tabs [role="tab"] { border-bottom: 0; border-right: 2px solid transparent; margin: 0 -1px 0 0; padding: .5rem .9rem .5rem 0; }
  .tabbed .tabs [role="tab"][aria-selected="true"] { border-right-color: var(--accent); }
}
.part { margin: 0 0 1.5rem; }

/* --- the tiles of the home (card 281) ----------------------------------------
   One tile per page: its drawing, its title, its line, what waits in it. The drawings
   carry no colour of their own: the classes below map them on the theme's tokens, so
   the same drawing holds in light and in dark (doc/portal.md §Images of the pages). */
.tile-group { margin: 0 0 1.75rem; }
.tile-group-name { font-family: var(--sans); font-size: .78rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--ink3); margin: 0 0 .75rem; }
.tiles { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 13rem), 1fr)); gap: .9rem; }
.tiles > li { display: grid; min-width: 0; }
.tile { display: grid; grid-template-rows: auto 1fr; background: var(--raised); border: 1px solid var(--line); border-radius: var(--radius); color: inherit; text-decoration: none; overflow: hidden; min-width: 0; transition: border-color .15s, transform .15s; }
.tile:hover { border-color: var(--accent); transform: translateY(-1px); }
.tile-pic { background: var(--surface2); padding: 6px 10px 0; }
.tile-pic svg { display: block; width: 100%; height: auto; color: var(--ink); }
.tile-noimage { margin: 0; padding: .6rem 0 .7rem; font-size: .8rem; color: var(--notice); overflow-wrap: anywhere; }
.tile-text { padding: .75rem .9rem .9rem; display: grid; gap: .35rem; align-content: start; }
.tile-name { font-family: var(--serif); font-size: 1.08rem; line-height: 1.25; }
.tile-desc { color: var(--ink2); font-size: .86rem; line-height: 1.45; }
.tile-count { justify-self: start; margin-top: .25rem; font-size: .78rem; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--on-accent); background: var(--accent); border-radius: 999px; padding: 2px 9px; }
.tile-quiet { margin-top: .25rem; font-size: .78rem; color: var(--ink3); }
.tile.calm .tile-pic { opacity: .82; }
.tile-pic .s { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.tile-pic .f { fill: var(--accent-soft); stroke: none; }
.tile-pic .a { fill: var(--accent); stroke: none; }
.tile-pic .as { fill: none; stroke: var(--accent); stroke-width: 2; stroke-linecap: round; }
.tile-pic .on { fill: none; stroke: var(--on-accent); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.tile-pic .g { stroke: var(--line2); stroke-width: 1.5; stroke-linecap: round; }
@media (prefers-reduced-motion: reduce) { .tile { transition: none; } .tile:hover { transform: none; } }

/* A small word of state next to a proposal: in capitals, spaced, discreet. */
.tag { font-size: .7rem; text-transform: uppercase; letter-spacing: .12em; color: var(--ink3); margin-left: .35rem; font-weight: 500; white-space: nowrap; }

button.quiet { background: none; border-color: transparent; color: var(--ink2); }
button.quiet:hover { border-color: var(--line2); }
summary.button { list-style: none; display: inline-block; cursor: pointer; font-size: .9rem; padding: .4rem .7rem; border: 1px solid var(--line2); border-radius: var(--radius); background: var(--surface); white-space: nowrap; }
summary.button::-webkit-details-marker { display: none; }

/* --- the mail: the queue, the new case, the done ----------------------------- */

.news { margin: 0 0 .25rem; color: var(--ink2); }
.summary { color: var(--ink2); font-size: .9rem; margin: 0 0 1rem; text-align: right; }
.group-heading { font-family: var(--sans); font-size: .72rem; text-transform: uppercase; letter-spacing: .12em; color: var(--ink3); font-weight: 600; margin: 1.5rem 0 .5rem; }

.queue, .done, .members { list-style: none; margin: 0; padding: 0; }
.queue { border-top: 1px solid var(--line); }
.queue > li, .done > li {
  background: var(--surface); border-bottom: 1px solid var(--line);
  padding: .9rem 1rem .9rem 1.25rem; box-shadow: inset 3px 0 0 var(--neutral);
}
.queue > li { display: flex; gap: 1rem; justify-content: space-between; align-items: center; }
.queue > li .body { min-width: 0; flex: 1 1 auto; }
.queue > li.state-certain { box-shadow: inset 3px 0 0 var(--certain); }
.queue > li.state-uncertain { box-shadow: inset 3px 0 0 var(--uncertain); }
.queue > li.state-new { box-shadow: inset 3px 0 0 var(--new); }
.queue > li[data-settled] { box-shadow: inset 3px 0 0 var(--accent-ink); }

.subject { font-weight: 600; letter-spacing: -.005em; }
.meta { color: var(--ink3); font-size: .85rem; margin-top: .1rem; }
.proposal { margin: .45rem 0 0; }
.proposal strong { color: var(--accent-ink); font-weight: 600; border-bottom: 1px dotted var(--line2); }
/* The confidence of a proposal, a dot before it (card 249): green no doubt, yellow some
   doubt, red not recognised. Its words are in the `aria-label`, the colour is not alone. */
.dot { display: inline-block; width: .6rem; height: .6rem; border-radius: 50%; margin-right: .4rem; vertical-align: .05em; }
.dot-green { background: var(--certain); }
.dot-yellow { background: var(--uncertain); }
.dot-red { background: var(--notice); }
/* The type of a proposed entity — a `pratica`, a `fornitore` — next to its name (card 223). */
.entity-type { font-size: .82rem; color: var(--ink3); margin-left: .3rem; }
.why-line { color: var(--ink2); font-size: .88rem; margin: .25rem 0 0; }
.why-line details { display: inline; }
.why-line summary { display: inline; cursor: pointer; color: var(--ink3); text-decoration: underline dotted; margin-left: .4rem; }
.why-line ul { margin: .3rem 0; padding-left: 1.1rem; }

.gestures { display: flex; flex-wrap: wrap; gap: .4rem; align-items: flex-start; justify-content: flex-end; flex: 0 0 auto; max-width: 55%; }
.gestures form.first { order: -1; }
.gestures form { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem; }
.gestures [data-outcome] { flex-basis: 100%; margin: 0; text-align: right; }
/* A row with a decision on it (Annulla, 2026-10-01): the gestures and the proposal give
   way to the decision on the right — the case in evidence, its why, Annulla alone. */
.queue > li .decision { display: none; flex: 0 1 auto; max-width: 55%; text-align: right; }
.queue > li[data-settled] .decision { display: block; }
/* The proposal of the AI (card 255): apart from the one of `judgment`, never a decision. */
.ai-proposal { margin: .55rem 0 0; padding: .45rem .7rem; border-left: 3px solid var(--accent); background: var(--accent-soft); border-radius: 0 4px 4px 0; }
.ai-proposal p { margin: .15rem 0; }
.ai-proposal form { margin: .35rem 0 0; }
.queue > li[data-settled] > .gestures,
.queue > li[data-settled] > .body > .ai-proposal,
.queue > li[data-settled] > .body > .proposal,
.queue > li[data-settled] > .body > .why-line { display: none; }
.decision-case { margin: 0; }
.decision-case strong { color: var(--accent-ink); font-family: var(--serif); font-size: 1.15rem; font-weight: 600; }
.decision .why-line ul { text-align: left; }
.decision form { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: .3rem; margin-top: .4rem; }
.decision [data-outcome] { flex-basis: 100%; margin: 0; }
/* «Altrove…» holds two forms (card 245): the cases that exist, and a new case below them. */
.elsewhere:has(> details[open]) { flex-basis: 100%; }
.gestures .elsewhere form { display: block; }
.new-case-choice { padding: 0 .75rem; text-align: left; }
.new-case-choice > details > summary { cursor: pointer; color: var(--accent-ink); margin: .2rem 0 .4rem; }
.new-case-choice .folder-field summary { cursor: pointer; color: var(--ink3); font-size: .85rem; margin: 0 0 .4rem; }
.choices { list-style: none; padding: .6rem .75rem; margin: .4rem 0; background: var(--surface2); border-radius: var(--radius); text-align: left; }
.choices-heading { font-size: .72rem; text-transform: uppercase; letter-spacing: .1em; color: var(--ink3); font-weight: 600; margin-top: .4rem; }
.choice .why { font-size: .82rem; color: var(--ink3); margin: .1rem 0 .3rem; padding-left: 1.4rem; }

.new-case {
  background: var(--raised); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: inset 3px 0 0 var(--new), 0 1px 3px rgba(0,0,0,.05);
  padding: 1rem 1.25rem; margin: 0 0 1.25rem;
}
.new-case h3 { font-family: var(--serif); font-size: 1.05rem; font-weight: 600; margin: 0 0 .3rem; }
.new-case form { margin: .8rem 0; }
.new-case .field, .new-case-choice .field { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .8rem; margin: 0 0 .5rem; }
.new-case .field > span, .new-case-choice .field > span { font-size: .72rem; text-transform: uppercase; letter-spacing: .1em; color: var(--ink3); font-weight: 600; }
.new-case .field input[type=text], .new-case-choice .field input[type=text] { flex: 1 1 18rem; }
.new-case .folder-field summary { cursor: pointer; color: var(--ink3); font-size: .85rem; margin: 0 0 .4rem; }
.new-case .gestures { justify-content: flex-start; max-width: none; }
.members { border-top: 1px solid var(--line); }
.members li { padding: .5rem 0; border-bottom: 1px solid var(--line); }
.members li:last-child { border-bottom: 0; }
.members .meta { display: block; }

.apply-bar {
  position: sticky; bottom: 0; z-index: 1; margin: 1rem 0 0; padding: .75rem 0;
  background: linear-gradient(to bottom, transparent, var(--ground) 30%);
}
.apply-bar form { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; }

/* A folder that can become a case, in the tree of a mailbox: a chain icon at the end of its row,
   and the form below the row once it is opened. */
.tree li { position: relative; }
.tree li:has(> .attach-folder) > a,
.tree li:has(> .attach-folder) > .branch { padding-right: 1.9rem; }
.attach-folder > summary {
  position: absolute; top: .1rem; right: .2rem; list-style: none; cursor: pointer;
  display: flex; padding: .2rem; border-radius: var(--radius); color: var(--ink3);
}
.attach-folder > summary::-webkit-details-marker { display: none; }
.attach-folder > summary:hover, .attach-folder[open] > summary,
.attach-folder.placed > summary { color: var(--accent-ink); }
.attach-folder > form, .attach-folder > .placed-case {
  margin: .3rem 0 .6rem .4rem; padding: .6rem; border: 1px solid var(--line2);
  border-radius: var(--radius); background: var(--surface);
}
/* The name and the type of a new case show only when «a new case» is the chosen option
   of the folder's form: before, they would read as asked of everyone. */
.attach-folder .new-case { display: none; }
.attach-folder [data-outcome] { display: block; margin: .5rem 0; }
.attach-folder [data-outcome]:empty { margin: 0; }
.attach-folder > .placed-case { display: flex; flex-wrap: wrap; align-items: center; gap: 0 .4rem; }
.attach-folder > .placed-case > p { margin: 0; flex: 1 1 auto; }
.attach-folder > .placed-case [data-outcome] { flex-basis: 100%; }
/* «Sgancia» (card 257): the broken chain at the end of the line that names the case. */
.detach-folder { display: contents; }
.detach-folder > button.quiet { display: flex; padding: .2rem; color: var(--ink3); }
.detach-folder > button.quiet:hover { color: var(--accent-ink); }
/* What an outcome names between «» (xhalia.js): a folder, a case, a message. */
[data-outcome] .named { color: var(--accent-ink); }
.attach-folder form:has(select[name="entity"] option.new:checked) .new-case { display: block; }

.done { border-top: 1px solid var(--line); }
.done > li { box-shadow: inset 3px 0 0 var(--certain); }
.done > li.by-external { box-shadow: inset 3px 0 0 var(--neutral); }
/* A home the person corrected (card 238): before and after, and what was learned. */
.done > li.corrected { box-shadow: inset 3px 0 0 var(--uncertain); }
.correction { margin: .45rem 0 0; font-size: .9rem; color: var(--ink2); }
.correction .before { text-decoration: line-through; color: var(--ink3); }
.learned { margin: .5rem 0 0; padding: .5rem .75rem; background: var(--accent-soft); border-radius: var(--radius); font-size: .85rem; color: var(--accent-ink); }
.learned strong { font-size: .7rem; text-transform: uppercase; letter-spacing: .12em; margin-right: .4rem; }

table.cases { border-top: 0; }
table.cases td { background: var(--surface); padding: .7rem .75rem; vertical-align: middle; }
table.cases td.name { font-family: var(--serif); font-size: 1.05rem; font-weight: 600; }
table.cases td.name .muted { font-family: var(--sans); font-weight: 400; margin-left: .4rem; }
table.cases .number { text-align: right; font-variant-numeric: tabular-nums; }

@media (max-width: 40rem) {
  .queue > li { flex-direction: column; align-items: stretch; }
  .gestures { justify-content: flex-start; max-width: none; }
  .gestures [data-outcome] { text-align: left; }
  .queue > li .decision { max-width: none; text-align: left; }
  .decision form { justify-content: flex-start; }
  .summary { text-align: left; }
  table.cases th:nth-child(4), table.cases td:nth-child(4) { display: none; }
}

/* --- the search of the mail page (card 189) --------------------------------- */

.mail-search { display: flex; flex-wrap: wrap; gap: .4rem; margin: 0 0 .4rem; }
.mail-search input[type=text] { flex: 1 1 16rem; }
.mail-search-heading { font-size: .72rem; text-transform: uppercase; letter-spacing: .1em; color: var(--ink3); font-weight: 600; margin: 1rem 0 .4rem; }

/* --- the credentials (the tab Password of the page Configurazione) ---------- */

.credentials td { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .8rem; }
.credentials form { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; }
.credentials tr.state-missing td { box-shadow: inset 3px 0 0 var(--uncertain); }

/* The persons on a phone (card 282, the tab Persone): one person under the other, each
   value with its heading, the forms full width — never a horizontal scroll. */
@media (max-width: 40rem) {
  table.people, table.people tbody, table.people tr, table.people td { display: block; width: 100%; }
  table.people thead { display: none; }
  table.people tr { border-bottom: 1px solid var(--line); padding: .4rem 0; }
  table.people td { border: 0; padding: .2rem .6rem; }
  table.people td[data-label]::before { content: attr(data-label) ": "; color: var(--ink2); }
  table.people form { display: flex; flex-wrap: wrap; gap: .4rem; margin: .2rem 0; }
}

/* --- the tab «Aspetto» (card 282) ------------------------------------------ */

.appearance-now { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: .3rem 1rem; margin: 0 0 1.25rem; }
.appearance-now dt { color: var(--ink2); }
.appearance-now dd { margin: 0; overflow-wrap: anywhere; }
form.appearance { display: grid; gap: .6rem; justify-items: start; margin: 0 0 1rem; }
.palettes { border: 0; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 14rem), 1fr)); gap: .5rem; width: 100%; }
.palettes legend { padding: 0; margin: 0 0 .4rem; color: var(--ink2); }
.palette-choice { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: .2rem .5rem; padding: .5rem .7rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--raised); cursor: pointer; }
.palette-choice:has(input:checked) { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.palette-choice .swatches { grid-column: 2; display: flex; gap: .5rem; }
.swatch-set { display: inline-flex; border: 1px solid var(--line2); border-radius: 3px; overflow: hidden; }
.swatch { display: inline-block; width: .9rem; height: .9rem; }

/* --- the panes of a page (card 225) ------------------------------------------
   Generic: a module marks the root of its template with data-pane="side|main|detail"
   and the page that holds one is laid out in a grid — the side on the left, main and
   detail on the right, one under the other; a panel without a pane takes the whole
   width. No name of a module here, no key in the manifest of the page. Below 52rem,
   one column: the panels in the written order. */

.sheet:has([data-pane]) { max-width: 90rem; }

@media (min-width: 52rem) {
  .panes:has(> * > [data-pane]) {
    display: grid;
    grid-template-columns: minmax(13rem, 18rem) minmax(0, 1fr);
    column-gap: 1.25rem;
    align-items: start;
  }
  .panes:has(> * > [data-pane]) > * { grid-column: 1 / -1; min-width: 0; }
  .panes > :has(> [data-pane="side"]) {
    grid-column: 1; grid-row: span 2;
    position: sticky; top: 1rem; max-height: calc(100vh - 2rem); overflow: auto;
  }
  .panes > :has(> [data-pane="main"]),
  .panes > :has(> [data-pane="detail"]) { grid-column: 2; }
}

.tree { list-style: none; margin: 0; padding: 0; font-size: .92rem; }
.tree ul { list-style: none; margin: 0; padding-left: 1rem; }
.tree a { display: block; padding: .2rem .4rem; border-radius: var(--radius); text-decoration: none; color: var(--ink); }
.tree a[aria-current="true"] { background: var(--accent-soft); font-weight: 600; }
.tree .branch { display: block; padding: .2rem .4rem; color: var(--ink3); }

.messages { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.messages li a { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .1rem 1rem; padding: .55rem .8rem;
                 border-bottom: 1px solid var(--line); text-decoration: none; color: var(--ink); }
.messages li a[aria-current="true"] { background: var(--accent-soft); box-shadow: inset 3px 0 0 var(--accent); }
.messages .subject { font-weight: 500; overflow-wrap: anywhere; }
.messages .unseen .subject { font-weight: 700; }
.messages .when { color: var(--ink3); font-size: .85rem; white-space: nowrap; }
.messages .meta { color: var(--ink2); font-size: .85rem; grid-column: 1 / -1; }
.unknown { font-size: .8rem; color: var(--new); }
.messages .unknown { grid-column: 1 / -1; }
.pager { margin: .6rem 0 0; font-size: .9rem; }

.letter header { border-bottom: 1px solid var(--line); margin-bottom: .8rem; padding-bottom: .6rem; }
.letter .subject { font-family: var(--serif); font-size: 1.1rem; margin: 0 0 .3rem; }
.letter .meta { color: var(--ink2); font-size: .9rem; margin: 0; overflow-wrap: anywhere; }
.letter .body { white-space: pre-wrap; font-family: var(--sans); margin: 0; overflow-wrap: anywhere; }
.letter .attachments { font-size: .9rem; color: var(--ink2); }

/* The window (card 247): one module over the page, in a `<dialog>`. Closing it leaves the
   page under it as it was — the same tab, the same point of the list. */
dialog.window {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: inherit;
  max-height: 85vh;
  max-width: 52rem;
  overflow: auto;
  padding: 1.25rem;
  width: calc(100% - 2rem);
}
dialog.window::backdrop { background: rgb(0 0 0 / .35); }
dialog.window .window-close { float: right; }
a.read { font-size: .9rem; margin-left: .4rem; }