/* Fahkwang — allineato a Opus, self-referenced da bunny.net (privacy-friendly, no Google). */
@font-face {
  font-family: "Fahkwang";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.bunny.net/fahkwang/files/fahkwang-latin-400-normal.woff2) format("woff2");
}
@font-face {
  font-family: "Fahkwang";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(https://fonts.bunny.net/fahkwang/files/fahkwang-latin-500-normal.woff2) format("woff2");
}
@font-face {
  font-family: "Fahkwang";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(https://fonts.bunny.net/fahkwang/files/fahkwang-latin-600-normal.woff2) format("woff2");
}
@font-face {
  font-family: "Fahkwang";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(https://fonts.bunny.net/fahkwang/files/fahkwang-latin-700-normal.woff2) format("woff2");
}

/* Inter — usato per la prosa densa/chat, come in Opus. */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.bunny.net/inter/files/inter-latin-400-normal.woff2) format("woff2");
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(https://fonts.bunny.net/inter/files/inter-latin-500-normal.woff2) format("woff2");
}

:root {
  color-scheme: light;
  font-family: "Fahkwang", system-ui, "Segoe UI", sans-serif;
  font-size: 16px;
  color: #1a2332;
  background: #faf8f5;

  /* Palette allineata a Opus (Sidea premium). */
  --bg: #faf8f5;
  --surface: #ffffff;
  --surface-sunken: #f5f3f0;
  --surface-hover: #f0ede8;
  --line: #e6e2dc;
  --line-strong: #d4cfc9;
  --ink: #1a2332;
  --ink-muted: #6b7a8a;
  --accent: #1e3a5f;
  --accent-strong: #152238;
  --accent-wash: #f0f3f7;
  --danger: #c53030;
  --gap: #b8860b;
  --gap-wash: #fdf8ef;
  --ok: #2d8a6e;
  --font-doc: "Inter", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "Cascadia Code", Consolas, monospace;
  --radius-sm: 4px;
  --radius-md: 8px;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --z-sticky: 10;
  --z-toast: 30;
}

* {
  box-sizing: border-box;
}

[hidden] {
  display: none !important;
}

html {
  min-width: 320px;
}

body {
  min-height: 100vh;
  margin: 0;
  overflow-x: clip;
  background: var(--bg);
}

button,
textarea {
  font: inherit;
}

button,
a {
  -webkit-tap-highlight-color: transparent;
}

h1,
h2,
h3,
h4,
h5,
p {
  margin-block-start: 0;
}

h1,
h2,
h3,
h4 {
  text-wrap: balance;
}

p,
li {
  text-wrap: pretty;
}

.appbar {
  position: sticky;
  z-index: var(--z-sticky);
  inset-block-start: 0;
  display: flex;
  align-items: center;
  min-height: 64px;
  padding: 10px 24px;
  background: var(--surface);
  border-block-end: 1px solid var(--line);
}

.brand {
  display: flex;
  align-items: center;
  gap: 11px;
}

.brand__mark {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border-radius: var(--radius-sm);
  background: var(--ink);
  color: var(--surface);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.04em;
}

.brand h1 {
  margin-block-end: 1px;
  font-size: 0.9375rem;
  line-height: 1.2;
}

.brand p {
  margin-block-end: 0;
  color: var(--ink-muted);
  font-size: 0.75rem;
}

.appbar__actions {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-inline-start: auto;
}

.runtime {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--ink-muted);
  font-size: 0.8125rem;
}

.runtime__dot {
  width: 7px;
  height: 7px;
  border: 1px solid currentColor;
  border-radius: 50%;
  background: transparent;
}

.runtime[data-state="online"] {
  color: var(--ok);
}

.runtime[data-state="online"] .runtime__dot {
  background: currentColor;
}

.runtime[data-state="offline"] {
  color: var(--danger);
}

.workspace {
  display: grid;
  grid-template-columns: minmax(340px, 0.72fr) minmax(560px, 1.28fr);
  min-height: calc(100dvh - 64px);
  height: calc(100dvh - 64px);
  max-width: 1720px;
  margin-inline: auto;
  border-inline: 1px solid var(--line);
}

.conversation {
  position: sticky;
  inset-block-start: 64px;
  min-width: 0;
  min-height: 0;
  display: grid;
  grid-template-rows: auto minmax(240px, 1fr) auto;
  max-height: calc(100dvh - 64px);
  height: calc(100dvh - 64px);
  background: var(--surface-sunken);
  border-inline-end: 1px solid var(--line);
}

.case-sheet__masthead,
.case-section__heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
}

.case-sheet__masthead p,
.case-section__heading p {
  max-width: 68ch;
  margin-block-end: 0;
  color: var(--ink-muted);
  font-size: 0.8125rem;
  line-height: 1.45;
}

.case-sheet__actions {
  display: flex;
  flex: 0 0 auto;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.agent-badge {
  display: grid;
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  place-items: center;
  border: 1px solid var(--accent);
  border-radius: var(--radius-sm);
  color: var(--accent-strong);
  font-size: 0.75rem;
  font-weight: 600;
}

.agent-badge--small {
  width: 20px;
  height: 20px;
  font-size: 0.625rem;
}

.status,
.revision {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 4px 8px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  color: var(--ink-muted);
  background: var(--surface);
  font-size: 0.6875rem;
  font-weight: 600;
  white-space: nowrap;
}

.status[data-state="completed"] {
  border-color: color-mix(in oklch, var(--ok) 45%, var(--line));
  color: var(--ok);
}

.status[data-state="needs_input"],
.status[data-state="needs_correction"] {
  border-color: var(--gap);
  background: var(--gap-wash);
  color: var(--ink);
}

/* Una riga sola: che cosa sta facendo il sistema, adesso. Il resto della
   storia sta nell'albero, a un click di distanza. */
.tracebar {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 54px;
  padding: 8px 24px;
  background: var(--surface);
  border-block-end: 1px solid var(--line);
}

.activity {
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding: 6px 10px;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  color: inherit;
  background: none;
  font: inherit;
  text-align: start;
  cursor: pointer;
}

.activity:hover {
  border-color: var(--line);
  background: var(--surface-hover);
}

.activity:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

.activity__signal {
  flex: 0 0 auto;
  width: 9px;
  height: 9px;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  background: var(--surface);
}

.activity[data-active="true"] .activity__signal {
  border-color: var(--accent);
  background: var(--accent);
  box-shadow: 0 0 0 4px var(--accent-wash);
  animation: activity-pulse 1.6s var(--ease-out) infinite;
}

.activity__text {
  overflow: hidden;
  flex: 1 1 auto;
  font-size: 0.75rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.activity__count {
  flex: 0 0 auto;
  color: var(--ink-muted);
  font-size: 0.6875rem;
  font-variant-numeric: tabular-nums;
}

.activity__count[hidden] {
  display: none;
}

.trace {
  width: min(760px, calc(100vw - 32px));
  max-height: min(80vh, 760px);
  padding: 0;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-md);
  color: var(--ink);
  background: var(--surface);
  box-shadow: var(--paper-shadow);
}

.trace::backdrop {
  background: oklch(0.24 0.012 65 / 0.42);
}

.trace[open] {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  max-height: min(80vh, 760px);
}

.trace__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  padding: 20px 24px 16px;
  border-block-end: 1px solid var(--line);
}

.trace__head h2 {
  margin-block-end: 2px;
  font-size: 1rem;
}

.trace__head p {
  margin-block-end: 0;
  color: var(--ink-muted);
  font-size: 0.8125rem;
}

.trace__body {
  overflow: auto;
  padding: 16px 24px;
}

.trace__empty {
  margin-block-end: 0;
  color: var(--ink-muted);
  font-size: 0.8125rem;
}

.trace__empty[hidden] {
  display: none;
}

.trace__tree,
.trace-node__children {
  margin: 0;
  padding: 0;
  list-style: none;
}

.trace-node__children {
  margin-block-start: 2px;
  margin-inline-start: 9px;
  padding-inline-start: 15px;
  border-inline-start: 1px solid var(--line);
}

.trace-node__line {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-block: 0;
  padding-block: 5px;
  font-size: 0.8125rem;
}

.trace-node__mark {
  flex: 0 0 auto;
  align-self: center;
  width: 7px;
  height: 7px;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  background: var(--surface);
}

.trace-node[data-status="running"] > .trace-node__line .trace-node__mark {
  border-color: var(--accent);
  background: var(--accent);
  animation: activity-pulse 1.6s var(--ease-out) infinite;
}

.trace-node[data-status="done"] > .trace-node__line .trace-node__mark {
  border-color: var(--ok);
  background: var(--ok);
}

.trace-node[data-status="failed"] > .trace-node__line .trace-node__mark {
  border-color: var(--danger);
  background: var(--danger);
}

.trace-node__label {
  flex: 0 1 auto;
}

.trace-node[data-kind="turn"] > .trace-node__line .trace-node__label,
.trace-node[data-kind="agent"] > .trace-node__line .trace-node__label {
  font-weight: 600;
}

.trace-node[data-kind="tool"] > .trace-node__line .trace-node__label {
  font-family: var(--font-mono, ui-monospace, "SF Mono", Menlo, monospace);
  font-size: 0.75rem;
}

.trace-node__detail {
  overflow: hidden;
  flex: 1 1 auto;
  color: var(--ink-muted);
  font-size: 0.75rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.trace-node__timing {
  flex: 0 0 auto;
  margin-inline-start: auto;
  color: var(--ink-muted);
  font-size: 0.6875rem;
  font-variant-numeric: tabular-nums;
}

.trace-node__prompt {
  margin-block: 0 4px;
  margin-inline-start: 15px;
  overflow: hidden;
  color: var(--ink-muted);
  font-size: 0.75rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.trace-node__error {
  margin-block: 0 4px;
  margin-inline-start: 15px;
  color: var(--danger);
  font-size: 0.75rem;
}

.trace__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 24px;
  border-block-start: 1px solid var(--line);
  color: var(--ink-muted);
  font-size: 0.6875rem;
}

.trace__note {
  font-variant-numeric: tabular-nums;
}

.workspace-inspector {
  width: min(920px, calc(100vw - 32px));
}

.workspace-files {
  margin: 0;
  padding: 0;
  list-style: none;
}

.workspace-file {
  border-block-end: 1px solid var(--line);
}

.workspace-file:first-child {
  border-block-start: 1px solid var(--line);
}

.workspace-file summary {
  display: flex;
  min-height: 48px;
  align-items: center;
  gap: 16px;
  padding: 10px 4px;
  cursor: pointer;
}

.workspace-file summary:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.workspace-file__meta {
  margin-inline-start: auto;
  color: var(--ink-muted);
  font-size: 0.75rem;
  font-variant-numeric: tabular-nums;
}

.workspace-file__preview {
  max-height: 340px;
  margin: 0 0 16px;
  overflow: auto;
  padding: 14px;
  border-radius: var(--radius-sm);
  background: var(--surface-sunken);
  color: var(--ink);
  font-family: var(--font-mono, ui-monospace, "SF Mono", Menlo, monospace);
  font-size: 0.75rem;
  line-height: 1.55;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* Una riga senza triangolo di apertura: il PowerPoint non ha nulla da mostrare
   in pagina. Stesse metriche del `summary` qui sopra, così le righe del
   workspace restano allineate fra loro. */
.workspace-file__line {
  display: flex;
  min-height: 48px;
  align-items: center;
  gap: 16px;
  margin: 0;
  padding: 10px 4px;
}

.messages {
  overflow-y: scroll;
  min-height: 0;
  scrollbar-gutter: stable;
  margin: 0;
  padding: 8px 24px 24px;
  list-style: none;
  scroll-behavior: smooth;
}

.message {
  padding-block: 18px;
  border-block-end: 1px solid var(--line);
  animation: message-in 180ms var(--ease-out);
}

.message--user {
  margin-block: 8px;
  padding: 14px 16px;
  border: 1px solid color-mix(in oklch, var(--accent) 32%, var(--line));
  border-radius: var(--radius-md);
  background: var(--accent-wash);
}

.message__meta {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-block-end: 8px;
  color: var(--ink-muted);
  font-size: 0.6875rem;
  font-weight: 600;
}

.message--user .message__meta {
  justify-content: flex-start;
}

.message__body p {
  max-width: 70ch;
  margin: 0;
  font-size: 0.875rem;
  line-height: 1.58;
  white-space: pre-wrap;
}

.message__body h3,
.message__body h4,
.message__body h5 {
  max-width: 70ch;
  margin: 2px 0 10px;
  color: var(--ink);
  font-size: 0.9375rem;
  line-height: 1.35;
}

.message__body h4 {
  font-size: 0.9rem;
}

.message__body h5 {
  font-size: 0.8625rem;
}

.message__body p + p {
  margin-block-start: 12px;
}

.message__body ul,
.message__body ol {
  margin: 10px 0 0 22px;
  padding: 0;
  max-width: 70ch;
  font-size: 0.875rem;
  line-height: 1.58;
}

.message__body li + li {
  margin-block-start: 6px;
}

.message__body li > ul,
.message__body li > ol {
  margin-block-start: 6px;
}

.message__body li[data-checked] {
  list-style: none;
  margin-inline-start: -18px;
}

.message__task {
  margin-inline-end: 2px;
  color: var(--ink-muted);
}

.message__body code {
  padding: 1px 5px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--surface);
  font-size: 0.8125rem;
}

.message__body a {
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.message__rule {
  max-width: 70ch;
  margin: 14px 0;
  border: 0;
  border-block-start: 1px solid var(--line);
}

.message__quote {
  max-width: 70ch;
  margin: 10px 0 0;
  padding-inline-start: 12px;
  border-inline-start: 2px solid var(--line);
  color: var(--ink-muted);
}

.message__code {
  max-width: 100%;
  margin-block-start: 10px;
  padding: 10px 12px;
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface-sunken);
}

.message__code code {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  white-space: pre;
}

.message__table-wrap {
  max-width: 100%;
  overflow-x: auto;
  margin-block-start: 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface);
}

.message__table {
  width: 100%;
  min-width: 420px;
  border-collapse: collapse;
  font-size: 0.8125rem;
  line-height: 1.45;
}

.message__table th,
.message__table td {
  padding: 8px 10px;
  border-block-end: 1px solid var(--line);
  text-align: start;
  white-space: nowrap;
}

.message__table th {
  background: var(--surface-sunken);
  color: var(--ink-muted);
  font-size: 0.75rem;
  font-weight: 600;
}

.message__table tbody tr:last-child td {
  border-block-end: 0;
}

.message--user .message__body p {
  margin-inline-start: 0;
}

.composer {
  padding: 16px 24px 20px;
  background: var(--surface);
  border-block-start: 1px solid var(--line);
}

.composer label {
  display: block;
  margin-block-end: 7px;
  font-size: 0.75rem;
  font-weight: 600;
}

.composer textarea {
  display: block;
  width: 100%;
  min-height: 92px;
  max-height: 260px;
  resize: vertical;
  padding: 11px 12px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--ink);
  font-size: 0.875rem;
  line-height: 1.5;
  transition: border-color 160ms var(--ease-out), box-shadow 160ms var(--ease-out);
}

.composer textarea::placeholder {
  color: var(--ink-muted);
  opacity: 1;
}

.composer textarea:focus {
  border-color: var(--accent);
  outline: 0;
  box-shadow: 0 0 0 3px var(--accent-wash);
}

.composer__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-block-start: 10px;
}

.composer small {
  max-width: 44ch;
  color: var(--ink-muted);
  font-size: 0.6875rem;
  line-height: 1.4;
}

.button {
  display: inline-flex;
  min-height: 36px;
  align-items: center;
  justify-content: center;
  padding: 7px 12px;
  border: 1px solid var(--accent);
  border-radius: var(--radius-sm);
  background: var(--accent);
  color: var(--surface);
  cursor: pointer;
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 160ms var(--ease-out), border-color 160ms var(--ease-out);
}

.button:hover {
  border-color: var(--accent-strong);
  background: var(--accent-strong);
}

.button:active {
  transform: translateY(1px);
}

.button--quiet {
  border-color: var(--line-strong);
  background: var(--surface);
  color: var(--ink);
}

.button--quiet:hover {
  border-color: var(--accent);
  background: var(--accent-wash);
}

.button:focus-visible,
.table-wrap:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.button:disabled,
.is-disabled {
  border-color: var(--line);
  background: var(--surface-sunken);
  color: var(--ink-muted);
  cursor: not-allowed;
  opacity: 0.68;
  transform: none;
}

.case-sheet {
  min-width: 0;
  min-height: 0;
  max-height: calc(100dvh - 64px);
  overflow-y: scroll;
  scrollbar-gutter: stable;
  background: var(--surface);
}

.case-sheet__masthead {
  padding: 30px 36px 26px;
  border-block-end: 1px solid var(--line-strong);
}

.case-sheet__masthead h2 {
  margin-block-end: 5px;
  font-family: var(--font-doc);
  font-size: 1.5rem;
  font-weight: 600;
}

.case-section {
  padding: 28px 36px 32px;
  border-block-end: 1px solid var(--line);
}

.case-section__heading {
  margin-block-end: 20px;
}

.case-section__heading h3 {
  margin-block-end: 5px;
  font-size: 1rem;
}

.empty-state {
  max-width: 62ch;
  margin-block-end: 0;
  padding: 18px 20px;
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius-sm);
  color: var(--ink-muted);
  font-size: 0.8125rem;
  line-height: 1.55;
}

.empty-state strong {
  display: block;
  margin-block-end: 3px;
  color: var(--ink);
}

.input-list {
  display: grid;
  grid-template-columns: minmax(150px, 0.4fr) minmax(0, 1fr);
  margin: 0;
  border-block-start: 1px solid var(--line);
}

.input-list:empty {
  display: none;
}

.input-list__group {
  grid-column: 1 / -1;
  padding-block: 14px 6px;
  border-block-end: none;
  color: var(--ink-soft);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.input-list__section {
  grid-column: 1 / -1;
  padding-block: 10px 4px;
  border-block-end: none;
  color: var(--ink);
  font-size: 0.75rem;
  font-weight: 600;
}

.input-list dd {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

/* La provenienza va letta dopo il numero, non insieme: sta sotto e piu' quieta,
   perche' serve quando quel numero viene messo in dubbio. */
.input-list__source {
  color: var(--ink-soft);
  font-size: 0.75rem;
  line-height: 1.45;
}

.input-list dt,
.input-list dd {
  margin: 0;
  padding-block: 10px;
  border-block-end: 1px solid var(--line);
  font-size: 0.8125rem;
}

.input-list dt {
  padding-inline-end: 18px;
  color: var(--ink-muted);
}

.input-list dd {
  overflow-wrap: anywhere;
  font-weight: 600;
}

.kpi__chain {
  grid-column: 1 / -1;
  margin-block-start: 10px;
  padding-block-start: 10px;
  border-block-start: 1px solid color-mix(in oklch, var(--line) 70%, transparent);
}

.kpi__chain summary {
  color: var(--accent);
  cursor: pointer;
  font-size: 0.75rem;
}

.kpi__chain summary:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.chain__final {
  display: grid;
  gap: 5px;
  margin-block-start: 14px;
  padding: 14px 16px;
  border-block: 1px solid var(--line);
  background: var(--surface-sunken);
}

.chain__final-title {
  margin: 0 0 5px;
  font-size: 0.8125rem;
  font-weight: 700;
}

.chain__caption {
  color: var(--ink-muted);
  font-size: 0.6875rem;
}

/* Perché un valore non c'è. Sta dove starebbe il calcolo, con lo stesso peso:
 * un'assenza dichiarata è un'informazione, non uno spazio bianco. */
.chain__missing-reason {
  margin: 0 0 5px;
  color: var(--ink-muted);
  font-size: 0.8125rem;
  line-height: 1.5;
}

.chain__final-expression,
.chain__substitution {
  display: block;
  overflow-x: auto;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  line-height: 1.55;
  white-space: nowrap;
}

.chain__substitution {
  color: var(--accent);
  font-size: 0.8125rem;
  font-weight: 700;
}

.chain__sources {
  margin-block-start: 12px;
}

.chain__sources > summary {
  color: var(--ink-muted);
}

.chain {
  display: grid;
  gap: 10px;
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
}

.chain__step {
  display: grid;
  gap: 3px;
}

.chain__head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: baseline;
  gap: 8px;
}

.chain__id {
  color: var(--ink-muted);
  font-family: var(--font-mono);
  font-size: 0.6875rem;
}

.chain__label {
  font-size: 0.75rem;
  line-height: 1.4;
}

.chain__total {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.chain__years {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
  margin: 0;
  padding-inline-start: 28px;
}

.chain__year {
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
}

.chain__year-label {
  color: var(--ink-muted);
  font-size: 0.6875rem;
}

.chain__year-value {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-variant-numeric: tabular-nums;
}

.chain__expression {
  display: block;
  overflow-x: auto;
  padding-inline-start: 28px;
  color: var(--ink-muted);
  font-family: var(--font-mono);
  font-size: 0.6875rem;
}

/* Un caso parziale non deve somigliare a uno completo: il banner e i warning
   sono la sola differenza visibile, e restano visibili anche in stampa. */
.result-banner {
  margin: 0 0 16px;
  padding: 11px 14px;
  border: 1px solid var(--gap);
  border-radius: var(--radius-sm);
  background: var(--gap-wash);
  color: var(--ink);
  font-size: 0.8125rem;
  line-height: 1.5;
}

.result-banner[data-status="insufficient"] {
  border-color: var(--danger);
  background: oklch(0.96 0.03 27);
}

.result-warnings,
.case-notices {
  display: grid;
  gap: 7px;
  margin: 0 0 16px;
  padding: 0;
  list-style: none;
}

.result-warnings li,
.case-notices li {
  padding: 9px 12px;
  border-inline-start: 2px solid var(--gap);
  background: var(--surface-sunken);
  color: var(--ink-muted);
  font-size: 0.75rem;
  line-height: 1.5;
}

.capabilities {
  margin-block-start: 24px;
  padding-block-start: 20px;
  border-block-start: 1px solid var(--line-strong);
}

.planned-cards {
  display: grid;
  gap: 0;
  margin: 0;
  padding: 0;
  border-block-start: 1px solid var(--line);
  list-style: none;
}

.planned-card-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline;
  gap: 16px;
  padding-block: 10px;
  border-block-end: 1px solid var(--line);
}

.planned-card-row__name {
  margin: 0;
  font-size: 0.8125rem;
  line-height: 1.4;
}

.planned-card-row__status {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.planned-card-row__status[data-status="calculable"] {
  color: var(--accent);
}

.planned-card-row__status[data-status="calculated"] {
  color: var(--ok);
}

.planned-card-row__status[data-status="not_calculable"] {
  color: var(--gap);
}

.questions {
  margin-block-start: 20px;
  padding: 16px 18px;
  border: 1px solid var(--gap);
  border-radius: var(--radius-sm);
  background: var(--gap-wash);
}

.questions__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-block-end: 5px;
}

.questions__head h4 {
  margin: 0;
  font-size: 0.8125rem;
}

.questions__count {
  color: var(--ink-muted);
  font-family: var(--font-mono);
  font-size: 0.6875rem;
}

.questions__lead {
  max-width: 68ch;
  margin-block-end: 14px;
  color: var(--ink-muted);
  font-size: 0.75rem;
  line-height: 1.5;
}

.questions__list {
  display: grid;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.questions__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 10px;
  margin-block-start: 16px;
  padding-block-start: 14px;
  border-block-start: 1px solid color-mix(in oklch, var(--gap) 35%, transparent);
}

.question-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding-block-start: 12px;
  border-block-start: 1px solid color-mix(in oklch, var(--gap) 35%, transparent);
}

.question-row__body {
  min-width: 0;
}

.question-row__text {
  max-width: 60ch;
  margin: 0 0 4px;
  font-size: 0.875rem;
  line-height: 1.5;
}

.question-row__meta {
  display: block;
  color: var(--ink-muted);
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  overflow-wrap: anywhere;
}

.question-row__locked {
  flex: 0 0 auto;
  max-width: 22ch;
  color: var(--ink-muted);
  font-size: 0.6875rem;
  line-height: 1.4;
  text-align: end;
}

.question-row .button {
  flex: 0 0 auto;
}

.kpi-list {
  border-block-start: 1px solid var(--line-strong);
}

.kpi-list:empty {
  display: none;
}

.kpi {
  display: grid;
  grid-template-columns: minmax(150px, 0.75fr) minmax(140px, 0.5fr) minmax(190px, 1fr);
  align-items: baseline;
  gap: 20px;
  padding-block: 13px;
  border-block-end: 1px solid var(--line);
}

.kpi__label {
  font-size: 0.8125rem;
  font-weight: 600;
}

.kpi__value {
  color: var(--accent-strong);
  font-family: var(--font-mono);
  font-size: 1rem;
  font-variant-numeric: tabular-nums;
  text-align: end;
}

.kpi__note {
  color: var(--ink-muted);
  font-size: 0.75rem;
  line-height: 1.4;
}

.table-wrap {
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  /* Lo scorrimento c'era già, ma niente lo diceva: con il dossier alle sue
     larghezze abituali «Flusso netto» e «Cumulato» finivano oltre il bordo e
     la tabella sembrava mancante di due colonne, perché su Windows la barra
     compare solo mentre si scorre. Riservare la corsia la rende visibile
     ferma, e l'ombra a destra dichiara che c'è dell'altro. */
  scrollbar-width: thin;
  scrollbar-gutter: stable;
  background:
    linear-gradient(to right, var(--surface) 30%, transparent),
    linear-gradient(to right, transparent, var(--surface) 70%) 100% 0,
    radial-gradient(farthest-side at 0 50%, oklch(0.24 0.012 65 / 0.16), transparent),
    radial-gradient(farthest-side at 100% 50%, oklch(0.24 0.012 65 / 0.16), transparent)
      100% 0;
  background-repeat: no-repeat;
  background-size: 40px 100%, 40px 100%, 14px 100%, 14px 100%;
  /* `local` sui due strati pieni: scorrono col contenuto e coprono l'ombra
     quando si arriva al bordo, che è ciò che fa apparire e sparire il segno. */
  background-attachment: local, local, scroll, scroll;
}

table {
  width: 100%;
  min-width: 650px;
  border-collapse: collapse;
  font-size: 0.8125rem;
  font-variant-numeric: tabular-nums;
}

.switching-table {
  min-width: 100%;
  table-layout: fixed;
}

.switching-table th,
.switching-table td {
  overflow-wrap: anywhere;
  vertical-align: top;
  white-space: normal;
}

.switching-table th:nth-child(1) {
  width: 24%;
}

.switching-table th:nth-child(2) {
  width: 20%;
}

.switching-table__reading {
  text-align: start;
}

th,
td {
  padding: 11px 13px;
  border-block-end: 1px solid var(--line);
  text-align: end;
  white-space: nowrap;
}

th {
  background: var(--surface-sunken);
  color: var(--ink-muted);
  font-size: 0.6875rem;
  font-weight: 600;
}

th:first-child,
td:first-child {
  text-align: start;
}

tbody tr:last-child td {
  border-block-end: 0;
}

tbody tr:hover {
  background: var(--accent-wash);
}

.narrative__content {
  font-family: var(--font-doc);
}

.client-speech {
  max-width: 68ch;
  margin: 0;
  font-size: 1.0625rem;
  line-height: 1.65;
  white-space: pre-line;
}

.case-sheet__footer {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  padding: 14px 36px 24px;
  color: var(--ink-muted);
  font-family: var(--font-mono);
  font-size: 0.6875rem;
}

.toast {
  position: fixed;
  z-index: var(--z-toast);
  inset-inline-end: 20px;
  inset-block-end: 20px;
  max-width: min(380px, calc(100vw - 40px));
  margin: 0;
  padding: 11px 14px;
  border-radius: var(--radius-sm);
  background: var(--ink);
  color: var(--surface);
  font-size: 0.8125rem;
  box-shadow: 0 10px 30px color-mix(in oklch, var(--ink) 18%, transparent);
}

@keyframes message-in {
  from {
    opacity: 0;
    transform: translateY(2px);
  }
}

@keyframes activity-pulse {
  50% {
    box-shadow: 0 0 0 7px color-mix(in oklch, var(--accent-wash) 35%, transparent);
  }
}

@media (max-width: 980px) {
  .workspace {
    display: block;
    height: auto;
    border-inline: 0;
  }

  .conversation {
    position: static;
    min-height: calc(100dvh - 64px);
    max-height: none;
    height: auto;
    border-inline-end: 0;
    border-block-end: 1px solid var(--line-strong);
  }

  .messages {
    min-height: 300px;
    max-height: 52dvh;
  }

  .case-sheet {
    max-height: none;
    overflow-y: visible;
  }
}

@media (max-width: 640px) {
  .appbar {
    min-height: 72px;
    align-items: flex-start;
    padding: 10px 14px;
  }

  .brand p {
    display: none;
  }

  .brand h1 {
    font-size: 0.875rem;
  }

  .appbar__actions {
    gap: 6px;
  }

  .appbar__actions .button {
    min-height: 34px;
    padding-inline: 9px;
    font-size: 0.75rem;
  }

  .runtime span:last-child {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
  }

  .tracebar,
  .messages,
  .composer {
    padding-inline: 16px;
  }

  .case-sheet__masthead,
  .case-section__heading {
    gap: 14px;
  }

  .case-sheet__masthead,
  .case-section {
    padding-inline: 20px;
  }

  .case-sheet__masthead {
    padding-block: 24px 20px;
  }

  .case-sheet__actions {
    justify-content: flex-start;
  }

  .case-section {
    padding-block: 24px 28px;
  }

  .input-list,
  .kpi {
    grid-template-columns: 1fr;
    gap: 4px;
  }

  .input-list dt {
    padding-block-end: 2px;
    border-block-end: 0;
  }

  .input-list dd {
    padding-block-start: 0;
  }

  .kpi {
    gap: 5px;
  }

  .kpi__value {
    text-align: start;
  }

  .switching-table,
  .switching-table tbody,
  .switching-table tr {
    display: block;
    width: 100%;
  }

  .switching-table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
  }

  .switching-table tr {
    padding-block: 8px;
    border-block-end: 1px solid var(--line);
  }

  .switching-table tr:last-child {
    border-block-end: 0;
  }

  .switching-table td {
    display: grid;
    grid-template-columns: minmax(5.5rem, 0.7fr) minmax(0, 1fr);
    gap: 10px;
    padding-block: 7px;
    text-align: start;
    white-space: normal;
    border-block-end: 0;
  }

  .switching-table td::before {
    content: attr(data-label);
    color: var(--ink-muted);
    font-size: 0.6875rem;
    font-weight: 600;
  }

  .case-sheet__footer {
    display: grid;
    padding-inline: 20px;
  }

  .question-row {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }

  .question-row__locked {
    max-width: none;
    text-align: start;
  }

  .composer__footer {
    align-items: flex-end;
    flex-wrap: wrap;
  }

  .composer small {
    flex: 1 1 190px;
    max-width: none;
  }

  .composer textarea,
  .message p {
    min-width: 0;
    overflow-wrap: anywhere;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

@media print {
  @page {
    size: A4;
    margin: 18mm 16mm 20mm;
  }

  body {
    background: white;
  }

  /* Il PDF va al cliente. `Input e piano` è il tracciato tecnico — id, path,
     categorie, driver — e restava nell'export JSON: in stampa occupava tre
     pagine prima dei KPI. I `details` stampano chiusi, quindi in PDF sono
     frecce che non si possono aprire. */
  .appbar,
  .conversation,
  .splitter,
  .case-plan,
  .case-notices,
  .kpi__chain,
  .case-sheet__masthead .button,
  .toast {
    display: none !important;
  }

  .workspace {
    display: block;
    min-height: 0;
    border: 0;
  }

  .case-sheet__masthead,
  .case-section {
    padding-inline: 0;
  }

  /* `break-inside: avoid` su una sezione lunga quanto una pagina la spinge
     intera alla successiva e lascia mezza pagina bianca. Vale sulle unità
     brevi, non sui contenitori. */
  .case-section {
    break-inside: auto;
  }

  .kpi,
  .result-banner,
  tr {
    break-inside: avoid;
  }

  .table-wrap {
    overflow: visible;
    /* Su carta non si scorre: le ombre di scorrimento diventerebbero due
       sfumature grigie stampate ai lati della tabella. */
    background: none;
    scrollbar-gutter: auto;
  }

  table {
    min-width: 0;
  }
}

/* Soglie di pareggio ------------------------------------------------------
   Due letture dello stesso dato. La tabella risponde a «quanto», il grafico a
   «quanto margine ho»: una distanza si legge come distanza, non confrontando
   a mente tre numeri incolonnati. Nessuna delle due è decorativa e nessuna è
   opzionale — chi legge con lo screen reader resta sulla tabella, che è la
   vista predefinita proprio per questo. */

/* Il divisorio è il fondo che traspare da un gap di 1px: una regola verticale
   fra due opzioni, non una banda colorata sul fianco di un blocco. */
.segmented {
  display: inline-flex;
  gap: 1px;
  padding: 1px;
  border-radius: var(--radius-sm);
  background: var(--line-strong);
}

.segmented__option {
  appearance: none;
  border: 0;
  background: var(--surface);
  color: var(--ink-muted);
  font: inherit;
  font-size: 0.8125rem;
  padding: 0.35rem 0.85rem;
  cursor: pointer;
  transition: background 150ms var(--ease-out), color 150ms var(--ease-out);
}

.segmented__option:first-child {
  border-radius: 3px 0 0 3px;
}

.segmented__option:last-child {
  border-radius: 0 3px 3px 0;
}

.segmented__option:hover {
  background: var(--surface-hover);
  color: var(--ink);
}

.segmented__option:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}

/* Lo stato attivo non è solo colore: il peso del testo lo dichiara comunque. */
.segmented__option[aria-pressed="true"] {
  background: var(--accent-wash);
  color: var(--accent-strong);
  font-weight: 600;
}

.break-even__lead-figure {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  color: var(--ink);
}

.break-even__periods {
  margin-block-end: 0.75rem;
}

.break-even__periods .segmented__option {
  min-width: 7.5rem;
}

/* La lettura è una frase, non una cifra: rompe la riga invece di allungare la
   tabella oltre il pane. È l'unica colonna della pagina che lo fa, ed è
   l'unica che contenga prosa. */
.break-even__reading {
  color: var(--ink-muted);
  text-align: start;
  white-space: normal;
  min-width: 16rem;
  max-width: 24rem;
}

.break-even__against-today {
  display: block;
  font-size: 0.8125rem;
  color: var(--ink-muted);
}

@media (max-width: 640px) {
  .break-even__periods {
    display: flex;
    width: 100%;
  }

  .break-even__periods .segmented__option {
    flex: 1 1 0;
    min-width: 0;
    min-height: 44px;
    padding-inline: 0.5rem;
  }
}

@media print {
  .segmented {
    display: none;
  }
}

/* Storico dei calcoli ------------------------------------------------------
   Un registro, non una timeline decorata: ogni voce dice quando, che cosa è
   cambiato negli input e come si sono mosse le cifre. Sta dentro il Workspace
   perché è lì che si va a vedere che cosa il sistema ha davvero salvato. */

.revisions {
  margin-block-end: 1.5rem;
  padding-block-end: 1.25rem;
  border-block-end: 1px solid var(--line);
}

.revisions h3 {
  font-size: 0.9375rem;
  margin: 0;
}

.revisions__lead {
  margin: 0.25rem 0 0.75rem;
  color: var(--ink-muted);
  font-size: 0.8125rem;
}

.revisions__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.75rem;
}

.revisions__item {
  padding: 0.7rem 0.85rem;
  background: var(--surface-sunken);
  border-radius: var(--radius-sm);
}

.revisions__head {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  margin-block-end: 0.35rem;
}

.revisions__number {
  font-weight: 600;
  font-size: 0.875rem;
}

.revisions__when {
  font-size: 0.75rem;
  color: var(--ink-muted);
  font-variant-numeric: tabular-nums;
}

.revisions__status {
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--gap);
}

.revisions__change,
.revisions__move,
.revisions__note {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0.15rem 0 0;
  font-size: 0.8125rem;
}

/* Il movimento di una cifra di testa è la notizia; il cambio di input è la
   causa. Distinguerli per peso evita di doverli leggere entrambi per capire
   quale delle due si sta guardando. */
.revisions__move .revisions__values {
  font-weight: 600;
  color: var(--ink);
}

.revisions__path {
  color: var(--ink-muted);
  min-width: 11rem;
}

.revisions__values {
  font-variant-numeric: tabular-nums;
}

.revisions__note {
  color: var(--ink-muted);
}

/* Sto guardando una revisione vecchia ---------------------------------------
   Una fascia sopra i risultati, non un badge in un angolo: leggere un
   documento superato credendolo attuale e' il modo in cui un numero vecchio
   arriva al cliente. Colore d'attenzione piu' la frase per esteso, perche' il
   colore da solo non e' un canale. */

.viewing-revision {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin: 0 0 1rem;
  padding: 0.6rem 0.85rem;
  background: var(--gap-wash);
  border-radius: var(--radius-sm);
  font-size: 0.875rem;
  color: var(--ink);
}

.revisions__open {
  margin-inline-start: auto;
  font-size: 0.75rem;
  padding: 0.2rem 0.6rem;
}

@media print {
  .viewing-revision {
    display: block;
  }

  .viewing-revision .button {
    display: none;
  }
}

/* I due grafici cartesiani -------------------------------------------------
   SVG scritto a mano, nessuna libreria e nessuna rete. Le coordinate arrivano
   da numeri che il backend ha già calcolato; qui si sceglie solo dove cadono
   in pixel. La tabella accanto resta la vista leggibile e quella stampata. */

.chart {
  margin: 1rem 0 0;
}

.chart figcaption {
  margin-block-end: 0.6rem;
  font-size: 0.8125rem;
  color: var(--ink-muted);
}

.chart__canvas {
  overflow-x: auto;
}

.chart__canvas:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

.chart__svg {
  display: block;
  width: 100%;
  min-width: 30rem;
  height: auto;
  overflow: visible;
}

.break-even__plot .chart__svg {
  min-width: 42rem;
}

.chart__axis {
  stroke: var(--line-strong);
  stroke-width: 1;
}

.chart__rule {
  stroke: var(--line);
  stroke-width: 1;
}

/* Lo zero non è una griglia fra le altre: è il confine fra l'essere indietro
   e l'essere avanti, e su un cash flow è l'unica riga che si cerca. */
.chart__rule--zero {
  stroke: var(--ink-muted);
  stroke-dasharray: 3 3;
}

.chart__line {
  fill: none;
  stroke: var(--accent);
  stroke-width: 2;
  stroke-linejoin: round;
}

.chart__area {
  fill: var(--accent-wash);
}

.break-even__area {
  opacity: 0.68;
}

.break-even__area--uncovered {
  fill: var(--gap-wash);
}

.break-even__area--positive {
  fill: var(--accent-wash);
}

.chart__dot {
  fill: var(--surface);
  stroke: var(--accent);
  stroke-width: 2;
}

.chart__cost {
  stroke: var(--line-strong);
  stroke-width: 1;
  stroke-dasharray: 5 4;
}

/* La soglia col margine più stretto è quella su cui il caso verrà contestato:
   ha il tratto pieno, e il nome accanto la dichiara comunque a parole. */
.chart__cost--binding {
  stroke: var(--gap);
  stroke-width: 2;
  stroke-dasharray: none;
}

.break-even__guide {
  stroke: var(--ink-muted);
  stroke-width: 1;
  stroke-dasharray: 4 4;
}

.break-even__headroom {
  stroke: var(--accent-strong);
  stroke-width: 1.5;
}

.break-even__headroom--shortfall {
  stroke: var(--gap);
}

.chart__marker {
  stroke: var(--ink);
  stroke-width: 2;
}

.chart__label {
  fill: var(--ink-muted);
  font-size: 11px;
  text-anchor: middle;
  font-variant-numeric: tabular-nums;
}

.chart__label--y {
  text-anchor: end;
}

.chart__label--axis {
  text-anchor: end;
}

.chart__label--axis-y {
  text-anchor: start;
}

.chart__label--marker {
  fill: var(--ink);
  text-anchor: start;
}

.chart__label--end {
  text-anchor: end;
}

.break-even__cost-label {
  fill: var(--ink);
  font-weight: 600;
  text-anchor: start;
}

.break-even__threshold-label,
.break-even__margin-label,
.break-even__headroom-label {
  fill: var(--accent-strong);
  font-weight: 600;
}

.break-even__plan-label {
  font-weight: 600;
}

.break-even__headroom-label--shortfall {
  fill: var(--ink);
}

.break-even__region-label {
  fill: var(--ink-muted);
  font-size: 10px;
}

.break-even__region-label--positive {
  fill: var(--accent-strong);
}

@media print {
  .chart {
    display: none;
  }
}

/* Chi ha fatto l'accesso, e la pagina che lo completa (blocco aws-07).
 *
 * L'identita' e' un'informazione di contorno, non un elemento di comando: sta
 * accanto agli altri indicatori di stato e non ne prende il posto. La pagina di
 * callback dura un istante — non merita un'impaginazione, solo un messaggio
 * leggibile mentre il redirect avviene. */
.current-user {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 4px 8px;
  color: var(--ink-muted);
  font-size: 0.6875rem;
  font-weight: 600;
  white-space: nowrap;
}

.auth-callback {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-block-size: 60vh;
  padding: 24px;
  text-align: center;
}

.auth-callback__status {
  color: var(--ink);
  font-size: 0.9375rem;
  font-weight: 600;
}

.auth-callback__detail {
  max-inline-size: 46ch;
  color: var(--ink-muted);
  font-size: 0.8125rem;
}