/* 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; }

/* The passing receipt of a form with `data-fades` (card 358), written by `xhalia.js` at the end
   of the body: `div.receipt.passing`. It is not `details.receipt` of the matters, which stays
   in the page. Inverted ink and ground, so it stands out in both themes; `data-fading` takes
   it to nothing in .7s, and with reduced motion there is no transition. */
div.receipt.passing[role="status"] {
  position: fixed;
  left: 50%;
  bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  transform: translateX(-50%);
  width: min(620px, calc(100% - 32px));
  z-index: 50;
  padding: .75rem 1rem;
  border-radius: var(--radius);
  background: var(--ink);
  color: var(--ground);
  overflow-wrap: anywhere;
  transition: opacity .7s ease;
}
div.receipt.passing[data-fading] { opacity: 0; }
div.receipt.passing ul { margin: .25rem 0 0; padding-left: 1.1rem; }
@media (prefers-reduced-motion: reduce) {
  div.receipt.passing[role="status"] { transition: none; }
}

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 notice of the trial (card 314, CRA art. 4(3)), above everything on every page:
   `sticky`, so it stays in sight however far the page scrolls, and nothing closes it. */
.beta-notice { position: sticky; top: 0; z-index: 20; background: var(--surface); color: var(--notice); border-bottom: 2px solid var(--notice); padding: .4rem 1rem; font-size: .85rem; line-height: 1.4; text-align: center; overflow-wrap: anywhere; }

/* --- 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; }
/* The register of the decisions (card 345): what Xhalia proposed or dismissed, and the reading
   withdrawn from a matter, under the correction or as the hourly run's own entry. */
.done > li.entry-proposed, .done > li.entry-discarded { box-shadow: inset 3px 0 0 var(--neutral); }
.done > li.entry-withdrawn, .done > li.entry-undone { box-shadow: inset 3px 0 0 var(--uncertain); }
.done .subject { overflow-wrap: anywhere; }
.done .why { margin: .35rem 0 0; font-size: .88rem; color: var(--ink2); overflow-wrap: anywhere; }
.done .why strong, .withdrawn strong { font-size: .7rem; text-transform: uppercase; letter-spacing: .12em; margin-right: .4rem; }
.withdrawn { margin: .5rem 0 0; padding: .5rem .75rem; border-left: 2px solid var(--line); font-size: .85rem; color: var(--ink2); overflow-wrap: anywhere; }
.withdrawn q { display: block; margin-top: .25rem; color: var(--ink3); text-decoration: line-through; quotes: none; }

/* The briefing of the matters page (card 337): a card per matter, its events a list. */
.briefing-bar { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .8rem; margin: 0 0 .8rem; }
.briefing-bar label { display: flex; align-items: center; gap: .4rem; font-size: .72rem; text-transform: uppercase; letter-spacing: .1em; color: var(--ink3); font-weight: 600; }
.briefing { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.briefing > li { background: var(--surface); border-radius: var(--radius); padding: .7rem .75rem; min-width: 0; }
.briefing > li.chosen { box-shadow: inset 3px 0 0 var(--accent); }
.briefing header { display: flex; flex-wrap: wrap; align-items: baseline; gap: .2rem .6rem; }
.briefing .name { font-family: var(--serif); font-size: 1.05rem; font-weight: 600; overflow-wrap: anywhere; }
.briefing .events { list-style: none; margin: .5rem 0 0; padding: 0; }
.briefing .events li { display: flex; gap: .6rem; padding: .2rem 0; min-width: 0; }
.briefing .events .at { flex: none; color: var(--ink3); font-variant-numeric: tabular-nums; }
.briefing .events a { overflow-wrap: anywhere; min-width: 0; }
.briefing .events .proposed { min-width: 0; overflow-wrap: anywhere; flex: 1 1 auto; }
.pill.pending { color: var(--uncertain); border-color: var(--uncertain); }
/* «Confermo» on an event to confirm (card 339, C7c): the event settles in place - the form and
   the «da confermare» pill give way to the decision, which says what was done. */
.briefing .events .confirm { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .6rem; margin: .35rem 0 0; }
.briefing .events .confirm [data-outcome] { flex: 1 1 100%; min-width: 0; margin: 0; overflow-wrap: anywhere; }
.briefing .events .decision { display: none; margin: .2rem 0 0; min-width: 0; overflow-wrap: anywhere; }
.briefing .events .decision-case { margin: 0; }
.briefing .events .decision .why-line { margin: .15rem 0 0; }
.pill.confirmed { color: var(--certain); border-color: var(--certain); }
.briefing .events li[data-settled] { box-shadow: inset 3px 0 0 var(--accent-ink); padding-left: .5rem; }
.briefing .events li[data-settled] .decision { display: block; }
.briefing .events li[data-settled] .confirm,
.briefing .events li[data-settled] .proposed > .pill.pending { display: none; }
.briefing .preview > summary { cursor: pointer; color: var(--accent-ink); }
.briefing .preview-body { margin: .4rem 0 0; display: grid; gap: .1rem; min-width: 0; }
.briefing .preview-body dt { font-size: .72rem; text-transform: uppercase; letter-spacing: .1em; color: var(--ink3); font-weight: 600; margin-top: .4rem; }
.briefing .preview-body dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.briefing .preview-body pre { white-space: pre-wrap; overflow-wrap: anywhere; font-family: var(--sans); margin: 0; }
.briefing .preview-body ul { margin: 0; padding-left: 1.1rem; }
.new-matters { margin: 0 0 1rem; }

@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; }
}

/* --- 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); }

/* The folders of the mailbox grouped by type (card 354): a folder bound to an entity of
   Xhalia carries the mark of a chain after its title, a closed one is dimmed and labelled.
   A long title wraps, never a row wider than the panel. */
.tree .linked > a { display: inline-block; max-width: calc(100% - 2rem); overflow-wrap: anywhere; vertical-align: middle; }
.linked-mark { display: inline-flex; vertical-align: middle; color: var(--ink3); }
.linked-mark svg { width: 14px; height: 14px; }
.tree .closed > a, .tree .closed > .linked-mark { opacity: .55; }
.tree .closed-label { margin-left: .3rem; }
.legend { color: var(--ink3); font-size: .85rem; margin: .6rem 0 .3rem; }
.closed-toggle { display: flex; align-items: center; gap: .5rem; padding: .2rem .4rem; font-size: .85rem; color: var(--ink2); text-decoration: none; overflow-wrap: anywhere; }
.closed-toggle::before { content: ""; flex: none; width: .9rem; height: .9rem; box-sizing: border-box; border: 1.5px solid var(--ink3); border-radius: 3px; background: transparent; }
.closed-toggle[aria-checked="true"]::before { background: var(--accent); border-color: var(--accent); box-shadow: inset 0 0 0 2px var(--ground); }

.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; }

/* case-messages, la riga di messaggio (card 341): one line per message, the rest opens. */
.case-messages-filters { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .8rem; margin: 0 0 .8rem; }
.case-messages-filters .filters { display: flex; flex-wrap: wrap; gap: .3rem; min-width: 0; }
.case-messages-filters label { display: flex; align-items: center; gap: .4rem; font-size: .72rem; text-transform: uppercase; letter-spacing: .1em; color: var(--ink3); font-weight: 600; }
.case-messages-filters .filter.active { border-color: var(--accent); color: var(--accent-ink); font-weight: 600; }
.case-messages-filters .count { color: var(--ink3); font-variant-numeric: tabular-nums; }
.message-rows { list-style: none; margin: 0; padding: 0; display: grid; gap: .4rem; }
.message-rows > li { background: var(--surface); border-radius: var(--radius); padding: .5rem .75rem; min-width: 0; overflow-wrap: anywhere; }
.message-row.chosen { box-shadow: inset 3px 0 0 var(--accent); }
.message-row[data-settled] { box-shadow: inset 3px 0 0 var(--accent-ink); }
.message-row summary { display: flex; flex-wrap: wrap; align-items: baseline; gap: .2rem .6rem; cursor: pointer; min-width: 0; }
.message-row summary a { min-width: 0; overflow-wrap: anywhere; font-weight: 600; }
.message-row summary .sender, .message-row summary .at, .message-row summary .decision-line { min-width: 0; overflow-wrap: anywhere; }
.message-row summary .pill { white-space: normal; overflow-wrap: anywhere; }
.message-row .message-body { margin: .5rem 0 0; min-width: 0; }
.message-row .message-body dt { font-size: .72rem; text-transform: uppercase; letter-spacing: .1em; color: var(--ink3); font-weight: 600; margin-top: .4rem; }
.message-row .message-body dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.message-row pre.body { white-space: pre-wrap; overflow-wrap: anywhere; font-family: var(--sans); margin: 0; max-width: 100%; }
.message-row .attachments { margin: 0; padding-left: 1rem; }
.message-row .confirm { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .6rem; margin: .5rem 0 0; }
.message-row .confirm [data-outcome] { flex: 1 1 100%; min-width: 0; margin: 0; overflow-wrap: anywhere; }
.message-row > .decision { display: none; margin: .2rem 0 0; min-width: 0; overflow-wrap: anywhere; }
.message-row[data-settled] > .decision { display: block; }
.message-row[data-settled] .confirm,
.message-row[data-settled] .decision-line,
.message-row[data-settled] .new-where { display: none; }
p.more { margin-top: .5rem; }
/* «Non è di questa pratica» (card 342, C8b): a `<details>` with the three choices inside, on the
   row of a proposal and on the event to confirm of the briefing — another matter, a new one, not
   work. Each choice is its own form; the outcome stays under it. */
.elsewhere { margin: .4rem 0 0; min-width: 0; }
.elsewhere > summary { cursor: pointer; color: var(--accent-ink); font-size: .9rem; }
.elsewhere[open] > summary { margin-bottom: .3rem; }
.elsewhere-choice {
  display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .6rem; min-width: 0;
  margin: .3rem 0 0; padding: .5rem .6rem; border: 1px solid var(--line2);
  border-radius: var(--radius); background: var(--surface);
}
.elsewhere-choice .field { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .6rem; min-width: 0; max-width: 100%; }
.elsewhere-choice .field > span { font-size: .72rem; text-transform: uppercase; letter-spacing: .1em; color: var(--ink3); font-weight: 600; }
.elsewhere-choice select, .elsewhere-choice input[type=text] { min-width: 0; max-width: 100%; flex: 1 1 12rem; }
.elsewhere-choice [data-outcome] { flex: 1 1 100%; min-width: 0; margin: 0; overflow-wrap: anywhere; }
.message-row .restore { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .6rem; margin: .5rem 0 0; }
.message-row .restore [data-outcome] { flex: 1 1 100%; min-width: 0; margin: 0; overflow-wrap: anywhere; }
.message-row[data-settled] .elsewhere,
.briefing .events li[data-settled] .elsewhere { display: none; }

/* The voice of Xhalia (card 352, `shell/voice.html`): label above, one row with the
   round avatar and the phrase, the reason below, indented under the phrase. */
.voice { display: block; min-width: 0; }
.voice-label { display: block; font-size: 10.5px; text-transform: uppercase; letter-spacing: .12em; color: var(--accent-ink); font-weight: 600; }
.voice-line { display: flex; align-items: flex-start; gap: 8px; min-width: 0; }
.voice-avatar { display: inline-flex; width: 22px; height: 22px; flex: none; border-radius: 50%; overflow: hidden; vertical-align: middle; color: var(--ink); }
.voice-avatar svg, .voice-avatar img { display: block; width: 100%; height: 100%; }
.voice-phrase { min-width: 0; overflow-wrap: anywhere; }
.voice-why { display: block; padding-left: 30px; color: var(--ink2); font-size: 12.5px; overflow-wrap: anywhere; }
.voice-avatar .a { fill: var(--accent); stroke: none; }
.voice-avatar .on { fill: var(--on-accent); stroke: none; }
/* A line of an avatar (it carries its own width, as the prototype draws it): the same mark on the accent, as a stroke. */
.voice-avatar .on[stroke-width] { fill: none; stroke: var(--on-accent); }
.voice-avatar .s { fill: currentColor; stroke: none; }
.voice-avatar .f { fill: var(--accent-soft); stroke: none; }
.voice-avatar .as { fill: none; stroke: var(--accent); }
.voice-avatar .g { fill: none; stroke: var(--line2); }
/* The choice of the voice in the tab Aspetto, as the palettes': each avatar with its name. */
.voices { border: 0; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 10rem), 1fr)); gap: .5rem; width: 100%; }
.voices legend { padding: 0; margin: 0 0 .4rem; color: var(--ink2); }
.voice-choice { display: flex; align-items: center; gap: .5rem; min-width: 0; padding: .5rem .7rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--raised); cursor: pointer; }
.voice-choice:has(input:checked) { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.voice-name { min-width: 0; overflow-wrap: anywhere; }
.voice-preview { margin: .75rem 0; padding: .7rem .9rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--raised); }

/* --- the mail layout (card 353) -----------------------------------------------
   A page whose manifest says `layout: "mail"` fills the window and does not scroll as a
   whole: the masthead on top, the sheet under it, and each column scrolls by itself.
   Everything is under [data-layout="mail"]; a page without one is untouched. No name of
   a module: the columns are told apart by data-pane, as the panes of card 225. Wide:
   the folders (the side, with the panels that have no pane above it), the list (main),
   the message (detail). Narrow (< 56rem): one column, the list or, with `data-open`,
   the message alone; the folders behind the button. */
body[data-layout="mail"] { height: 100vh; height: 100dvh; overflow: hidden; display: flex; flex-direction: column; }
html:has(body[data-layout="mail"]) { height: 100%; overflow: hidden; }
[data-layout="mail"] .masthead, [data-layout="mail"] .beta-notice { flex: none; }
[data-layout="mail"] .sheet,
[data-layout="mail"] .sheet:has([data-pane]) {
  flex: 1 1 auto; min-height: 0; max-width: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; overflow: hidden;
}
[data-layout="mail"] .mail-bar { flex: none; display: flex; align-items: center; gap: .75rem; padding: .4rem .75rem; border-bottom: 1px solid var(--line); }
[data-layout="mail"] .mail-body { flex: 1 1 auto; min-height: 0; min-width: 0; }
[data-layout="mail"] .panes { height: 100%; min-width: 0; }
[data-layout="mail"] .panes > * { min-width: 0; min-height: 0; overflow-wrap: anywhere; border-radius: 0; border: 0; margin: 0; overflow: auto; }

@media (min-width: 56rem) {
  [data-layout="mail"] .mail-bar { display: none; }
  [data-layout="mail"] .panes:has(> * > [data-pane]) {
    display: grid; grid-template-columns: 260px 380px minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr);
    column-gap: 0; align-items: stretch;
  }
  [data-layout="mail"] .panes:has(> * > [data-pane]) > * { grid-column: 1; grid-row: 1; border-right: 1px solid var(--line); position: static; max-height: none; }
  [data-layout="mail"] .panes > :has(> [data-pane="side"]) { grid-column: 1; grid-row: 2; }
  [data-layout="mail"] .panes > :has(> [data-pane="main"]) { grid-column: 2; grid-row: 1 / -1; }
  [data-layout="mail"] .panes > :has(> [data-pane="detail"]) { grid-column: 3; grid-row: 1 / -1; border-right: 0; }
}

@media (max-width: 55.99rem) {
  [data-layout="mail"] .mail-body { overflow: auto; }
  [data-layout="mail"] .panes:has(> * > [data-pane]) { display: block; height: auto; }
  [data-layout="mail"] .panes > * { overflow: visible; }
  /* The folders, the side and the panels without a pane, only while the button is open. */
  [data-layout="mail"]:has(.mail-toggle[aria-expanded="false"]) .panes > :not(:has(> [data-pane="main"])):not(:has(> [data-pane="detail"])) { display: none; }
  /* The list, or the open message alone. */
  [data-layout="mail"] .panes > :has(> [data-pane="detail"]) { display: none; }
  [data-layout="mail"][data-open="detail"] .panes > :has(> [data-pane="detail"]) { display: block; }
  [data-layout="mail"][data-open="detail"] .panes > :not(:has(> [data-pane="detail"])) { display: none; }
  [data-layout="mail"][data-open="detail"] .mail-toggle { display: none; }
}

/* The change window of a message (card 359): the labels of the choices, the field with the
   list under it, the note. Nothing wider than the window: at 375px every row wraps. */
.change-window { min-width: 0; }
.change-title { margin: 0 0 .2rem; }
.change-proposal { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .5rem; margin: .4rem 0 .8rem; font-size: .9rem; min-width: 0; }
.change-proposal .voice-avatar { width: 1.4rem; height: 1.4rem; }
.change-proposal .voice-mini { display: inline-flex; }
.change-proposal-text { min-width: 0; overflow-wrap: anywhere; }
.change-form { display: grid; gap: .7rem; margin: 0; min-width: 0; }
.change-body { display: grid; gap: .5rem; min-width: 0; transition: opacity .15s; }
.change-body[inert] { opacity: .45; }
.change-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .3rem .8rem; }
.change-matters, .change-closed { font-size: .72rem; text-transform: uppercase; letter-spacing: .1em; color: var(--ink3); font-weight: 600; display: flex; align-items: center; gap: .4rem; }
.chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .35rem; min-width: 0; }
.chips:empty { display: none; }
.chip { display: inline-flex; align-items: stretch; position: relative; max-width: 100%; border: 1px solid var(--line2); border-radius: var(--radius); background: var(--surface2); min-width: 0; }
.chip:first-child { border-color: var(--accent); }
.chip button { border: 0; background: none; border-radius: 0; padding: .25rem .5rem; font: inherit; font-size: .9rem; color: inherit; white-space: normal; text-align: left; overflow-wrap: anywhere; }
.chip .chip-main { min-width: 0; }
.chip .chip-main[disabled] { opacity: 1; cursor: default; }
.chip .chip-remove { border-left: 1px solid var(--line); color: var(--ink2); }
.chip-flag { display: none; }
.chip:first-child .chip-flag { display: inline; color: var(--accent-ink); margin-right: .25rem; }
.chip:first-child .chip-flag::before { content: "\2691"; }
/* «principale» is for the screen readers: the flag shows it, this says it, on the first label only. */
.chip-mark { display: none; }
.chip:first-child .chip-mark { display: inline-block; position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.picker-box { position: relative; min-width: 0; }
.picker-find { width: 100%; box-sizing: border-box; }
.picker-list { position: absolute; z-index: 2; left: 0; right: 0; top: 100%; margin-top: 2px; max-height: 7.5rem; overflow-y: auto; background: var(--surface); border: 1px solid var(--line2); border-radius: var(--radius); box-shadow: 0 4px 12px rgb(0 0 0 / .12); }
.picker-list[hidden] { display: none; }
.picker-list [data-option] { display: flex; flex-wrap: wrap; align-items: baseline; gap: .1rem .5rem; padding: .35rem .6rem; cursor: pointer; font-size: .9rem; overflow-wrap: anywhere; min-width: 0; }
.picker-list [data-option]:hover, .picker-list [data-option][data-active] { background: var(--surface2); }
.picker-list [data-option].closed { opacity: .6; }
.picker-list [data-option][aria-selected="true"] { cursor: default; color: var(--ink3); }
.picker-list .mark { font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; color: var(--ink3); }
.picker-list .mark[hidden] { display: none; }
.picker-list .empty { margin: 0; padding: .35rem .6rem; }
.change-name { display: grid; gap: .2rem; font-size: .85rem; color: var(--ink2); }
.change-name[hidden] { display: none; }
.change-note { display: grid; gap: .2rem; font-size: .85rem; color: var(--ink2); }
.change-note textarea, .change-name input { width: 100%; box-sizing: border-box; }
.change-nothing { display: flex; align-items: center; gap: .4rem; font-size: .9rem; }
.change-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: .4rem; margin: 0; }
.change-actions [data-outcome] { flex: 1 1 100%; margin: 0; }