/* ============================================================
   DELFI — Design System
   Refined financial terminal. Luxury dark theme. Gold accents.
   Cormorant Garamond titles · JetBrains Mono numbers.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;1,400;1,500&family=JetBrains+Mono:wght@400;500;600;700&display=swap');

/* ---------- Design Tokens ---------- */

:root {
  /* S124 — deeper black for edge-to-edge chat shell.
     Pre-S124 values were #13131c/#111118 (blu-tinted). Shift to neutral near-black
     without losing the gold warmth of --gold-glow accents. */
  --bg-primary: #0e0e13;
  --bg-secondary: #161620;
  --bg-card: #1e1e28;
  --bg-card-hover: #262632;
  --bg-hover: #22222e;
  --bg-input: #18181f;
  --bg-sidebar: #0b0b10;
  --border: rgba(255, 255, 255, 0.50);
  --border-subtle: rgba(255, 255, 255, 0.30);
  --border-focus: #c9a84c;

  --gold: #c9a84c;
  --gold-dim: #b8963f;
  --gold-bright: #e2c064;
  --gold-glow: rgba(201, 168, 76, 0.14);
  --gold-glow-strong: rgba(201, 168, 76, 0.24);
  --green: #34ddb2;
  --green-dim: rgba(52, 221, 178, 0.12);
  --green-soft: #1e7d62;
  --red: #e86868;
  --red-dim: rgba(232, 104, 104, 0.12);
  --red-soft: #883434;
  --blue: #6b9af5;
  --blue-dim: rgba(107, 154, 245, 0.12);
  --amber: #e8b454;
  --amber-dim: rgba(232, 180, 84, 0.12);

  --text-primary: #eeece7;
  --text-secondary: #c2c2d0;
  --text-muted: #9a9aac;
  --text-gold: #c9a84c;

  --font-numbers: 'JetBrains Mono', 'Fira Code', 'Source Code Pro', monospace;
  --font-titles: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --font-body: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  --radius: 6px;
  --radius-sm: 3px;
  --radius-lg: 10px;
  --shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
  --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.7);
  --shadow-gold: 0 0 20px rgba(201, 168, 76, 0.06);
  --sidebar-width: 250px;
  --transition: 0.2s ease;
  --transition-slow: 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* ---------- Reset ---------- */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; overflow: hidden; }
body {
  font-family: var(--font-body);
  background: var(--bg-primary);
  color: var(--text-primary);
  line-height: 1.5;
  font-size: 14px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Noise overlay for depth */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  opacity: 0.025;
  pointer-events: none;
  z-index: 9999;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 256px 256px;
}

a { color: var(--gold); text-decoration: none; transition: color var(--transition); }
a:hover { color: var(--gold-bright); }
ul, ol { list-style: none; }
button { cursor: pointer; font-family: inherit; }
input, textarea, select { font-family: inherit; font-size: inherit; }

/* ---------- Scrollbar ---------- */

* { scrollbar-color: rgb(201, 168, 76) transparent; scrollbar-width: thin; }
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgb(201, 168, 76); border-radius: 3px; }

/* ---------- Typography ---------- */

.font-numbers { font-family: var(--font-numbers); }
.font-titles { font-family: var(--font-titles); }

h1, h2, h3 { font-family: var(--font-titles); font-weight: 500; }
h1 { font-size: 1.9rem; color: var(--text-primary); letter-spacing: 0.01em; }
h2 { font-size: 1.4rem; color: var(--text-primary); }
h3 { font-size: 1.15rem; color: var(--text-secondary); }

.text-gold { color: var(--gold); }
.text-green { color: var(--green); }
.text-red { color: var(--red); }
.text-muted { color: var(--text-muted); }
.text-secondary { color: var(--text-secondary); }

.num { font-family: var(--font-numbers); letter-spacing: -0.02em; }
.num-positive { color: var(--green); }
.num-negative { color: var(--red); }

/* ---------- Layout: Login ---------- */
/* Spostato in landing.css a S469: la landing è l'unica pagina che vede
   chi non è entrato, e cambia per ragioni sue (copy, promessa, legale). */

/* ---------- Layout: App Shell ---------- */

.app-layout {
  display: flex;
  height: 100vh;
  height: 100dvh;   /* S115 Bug #1: mobile URL bar eats vh, app clipped */
  overflow: hidden;
  position: relative;
}

/* S124 — Drawer toggle. Three nude gold lines, typographic. No box, no border,
   no backdrop. Feels like a letterpress mark, not a mobile-app hamburger. */
.drawer-toggle {
  display: none;
  position: fixed;
  top: 18px;
  left: 18px;
  z-index: 120;
  width: 22px;
  height: 16px;
  padding: 0;
  background: none;
  border: none;
  cursor: pointer;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
  opacity: 0.7;
  transition: opacity var(--transition);
}
.drawer-toggle::before,
.drawer-toggle::after,
.drawer-toggle > span {
  content: '';
  display: block;
  height: 1.5px;
  background: var(--gold);
  border-radius: 1px;
}
.drawer-toggle::before { width: 100%; }
.drawer-toggle > span   { width: 65%; }   /* shorter middle rule */
.drawer-toggle::after  { width: 85%; }
.drawer-toggle:hover { opacity: 1; }
.drawer-toggle svg { display: none; }   /* nest SVG fallback hidden */

/* S124 — Backdrop (mobile drawer only). Warm gold-tinted over black,
   not a flat black curtain. */
.drawer-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background:
    radial-gradient(ellipse at 20% 20%, rgba(201, 168, 76, 0.05), transparent 55%),
    rgba(5, 5, 8, 0.62);
  z-index: 90;
  opacity: 0;
  transition: opacity 0.25s ease;
}
body.drawer-open .drawer-backdrop {
  display: block;
  opacity: 1;
}

/* S128 — Mobile drawer is full-screen (100vw), so the backdrop would only
   be visible on desktop when the user toggles drawer-open below 768px. */
@media (max-width: 768px) {
  body.drawer-open .drawer-backdrop { display: none; }
}

/* ---------- Sidebar ---------- */

.sidebar {
  width: var(--sidebar-width);
  min-width: var(--sidebar-width);
  height: 100vh;         /* fallback for UA without dvh */
  height: 100dvh;        /* S115 Bug #1: mobile URL bar eats vh → footer clipped */
  background:
    linear-gradient(180deg, rgba(201, 168, 76, 0.02) 0%, transparent 30%),
    var(--bg-sidebar);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: width 0.25s ease, min-width 0.25s ease, transform 0.25s ease;
}

/* S124 — Desktop collapsed state: sidebar shrinks to 0, hamburger shows.
   Toggle persists in localStorage. */
body.drawer-collapsed .sidebar {
  width: 0;
  min-width: 0;
  border-right-width: 0;
}
body.drawer-collapsed .drawer-toggle {
  display: flex;
}

.sidebar-header {
  padding: 28px 24px 22px;
  border-bottom: 1px solid var(--border-subtle);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

/* S128 polish — on mobile the fixed drawer-toggle (top:18px, left:18px)
   sits ON TOP of the open sidebar; without left clearance the "D" of
   DELFI collides with the hamburger. Shift the logo right when the
   drawer is open on mobile. */
@media (max-width: 768px) {
  body.drawer-open .sidebar-header {
    padding-left: 56px;
  }
}

.sidebar-logo {
  font-family: var(--font-titles);
  font-size: 1.4rem;
  font-weight: 500;
  color: var(--gold);
  letter-spacing: 0.18em;
  text-shadow: 0 0 20px rgba(201, 168, 76, 0.1);
}

/* S461 — Header actions: link alla Guida + chevron collapse. Sul mobile il
   chevron è nascosto (settings-responsive.css), quindi a destra resta solo
   la Guida — che è lo spazio vuoto segnalato nel bug report 2cec59f2. */
.sidebar-header-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.sidebar-guide {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--gold);
  opacity: 0.5;
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: opacity var(--transition);
}
.sidebar-guide:hover { opacity: 0.95; }
.sidebar-guide svg { width: 15px; height: 15px; flex-shrink: 0; }

/* S124 — Collapse chevron. Cormorant light, gold, low opacity default.
   Hover lifts it. Mobile hides (user has external hamburger for that). */
.sidebar-collapse {
  font-family: var(--font-titles);
  font-size: 1.6rem;
  font-weight: 300;
  line-height: 1;
  color: var(--gold);
  opacity: 0.35;
  background: none;
  border: none;
  padding: 2px 6px;
  cursor: pointer;
  transition: opacity var(--transition), transform var(--transition);
}
.sidebar-collapse:hover {
  opacity: 0.9;
  transform: translateX(-2px);
}

.sidebar-nav {
  flex: 1;
  padding: 16px 0;
  overflow-y: auto;
}

.nav-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 20px 9px 22px;
  margin: 1px 8px;
  color: var(--text-secondary);
  font-size: 0.88rem;
  border-radius: var(--radius-sm);
  border-left: 2px solid transparent;
  transition: all var(--transition);
  cursor: pointer;
}

.nav-item:hover {
  color: var(--text-primary);
  background: rgba(255, 255, 255, 0.025);
}

.nav-item.active {
  color: var(--gold);
  background: var(--gold-glow);
  border-left-color: var(--gold);
}

.nav-item svg {
  width: 17px;
  height: 17px;
  opacity: 0.5;
  flex-shrink: 0;
  transition: opacity var(--transition);
}

.nav-item:hover svg { opacity: 0.75; }
.nav-item.active svg { opacity: 0.9; }

/* S128 — Drawer chat history. Sits between nav and footer. */
.sidebar-history {
  border-top: 1px solid var(--border-subtle);
  padding: 10px 0 6px;
  display: flex;
  flex-direction: column;
  max-height: 45vh;
  flex-shrink: 0;
}

.sidebar-history-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 2px 22px 6px;
}

.sidebar-history-title {
  font-family: var(--font-numbers);
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-secondary);
  cursor: pointer;
  transition: color var(--transition);
  padding: 3px 0;
}
.sidebar-history-title:hover {
  color: var(--gold);
}

.sidebar-history-new {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: var(--radius);
  border: none;
  background: var(--gold);
  color: #0e0e13;
  cursor: pointer;
  transition: all var(--transition);
  box-shadow: 0 1px 4px rgba(201, 168, 76, 0.25);
}
.sidebar-history-new:hover {
  background: var(--gold-bright);
  box-shadow: 0 2px 8px rgba(201, 168, 76, 0.35);
  transform: scale(1.05);
}
.sidebar-history-new:active {
  transform: scale(0.96);
}
.sidebar-history-new svg {
  width: 15px;
  height: 15px;
  stroke-width: 2.4;
}

.sidebar-history-list {
  flex: 1;
  overflow-y: auto;
  padding: 2px 8px 4px;
}

.sidebar-history-empty {
  padding: 12px 14px;
  font-size: 0.74rem;
  color: var(--text-muted);
  text-align: left;
  line-height: 1.4;
  font-style: italic;
  opacity: 0.7;
}

.sidebar-history-item {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto;
  grid-column-gap: 8px;
  align-items: center;
  padding: 8px 10px 8px 12px;
  margin: 1px 0;
  border-radius: var(--radius-sm);
  cursor: pointer;
  border-left: 2px solid transparent;
  transition: all 0.12s ease;
}

.sidebar-history-item:hover {
  background: rgba(255, 255, 255, 0.025);
}
.sidebar-history-item.active {
  border-left-color: var(--gold);
  background: var(--gold-glow);
}

.sidebar-history-item-title {
  font-size: 0.8rem;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.25;
  min-width: 0;
}

.sidebar-history-item.active .sidebar-history-item-title {
  color: var(--gold-bright);
}

.sidebar-history-item-time {
  font-family: var(--font-numbers);
  font-size: 0.64rem;
  color: var(--text-muted);
  letter-spacing: 0.02em;
  grid-column: 2;
  grid-row: 1;
  padding-right: 22px;
}

.sidebar-history-item-del {
  position: absolute;
  top: 50%;
  right: 6px;
  transform: translateY(-50%);
  width: 22px;
  height: 22px;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: var(--text-muted);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0;
  transition: all 0.12s ease;
}

.sidebar-history-item:hover .sidebar-history-item-del,
.sidebar-history-item:focus-within .sidebar-history-item-del {
  opacity: 1;
}

.sidebar-history-item-del:hover {
  color: var(--red);
  background: var(--red-dim);
}

.sidebar-history-item-del svg { width: 12px; height: 12px; }

.sidebar-rename-input {
  font-size: 0.8rem;
  color: #e8e6e3;
  background: #1a1a1a;
  border: 1px solid var(--gold);
  border-radius: var(--radius-sm);
  padding: 2px 6px;
  width: 100%;
  min-width: 0;
  outline: none;
  font-family: inherit;
  line-height: 1.25;
  grid-column: 1 / -1;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  color-scheme: dark;
}

/* Mobile: delete visible always (no hover), dimmed so it doesn't dominate. */
@media (max-width: 768px) {
  .sidebar-history-item-del { opacity: 0.5; }
  .sidebar-history-item-del:active { opacity: 1; }
}

/* Manage button — pencil icon */
.sidebar-history-manage {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: var(--radius);
  border: none;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  transition: all var(--transition);
}
.sidebar-history-manage:hover {
  color: var(--text-primary);
  background: rgba(255,255,255,0.05);
}
.sidebar-history-manage svg { width: 14px; height: 14px; }

/* Select mode items */
.sidebar-select-item {
  grid-template-columns: 20px 1fr auto !important;
}
.sidebar-select-check {
  width: 16px;
  height: 16px;
  accent-color: var(--gold);
  cursor: pointer;
  margin: 0;
}
.sidebar-history-item.selected {
  background: var(--gold-glow);
}

/* Select toolbar — fixed at bottom of sidebar-history */
.sidebar-select-toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-top: 1px solid var(--border-subtle);
  background: var(--bg-primary);
}
.sidebar-select-count {
  font-family: var(--font-numbers);
  font-size: 0.74rem;
  color: var(--text-secondary);
  min-width: 20px;
  text-align: center;
}
.sidebar-select-cancel {
  font-size: 0.72rem !important;
  padding: 4px 10px !important;
  color: var(--text-secondary) !important;
  border: 1px solid var(--border) !important;
  background: transparent !important;
}
.sidebar-select-all {
  font-size: 0.72rem !important;
  padding: 4px 10px !important;
  color: var(--text-secondary) !important;
  border: 1px solid var(--border) !important;
  background: transparent !important;
  margin-left: auto;
}
.sidebar-select-delete {
  font-size: 0.72rem !important;
  padding: 4px 10px !important;
  color: var(--red) !important;
  border: 1px solid var(--red) !important;
  background: transparent !important;
}
.sidebar-select-delete:not(.disabled):hover {
  background: var(--red-dim) !important;
}
.sidebar-select-delete.disabled {
  opacity: 0.4;
  cursor: not-allowed;
}


.sidebar-footer {
  padding: 14px 22px;
  border-top: 1px solid var(--border-subtle);
}

.sidebar-footer-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}

.user-info {
  font-size: 0.75rem;
  color: var(--text-muted);
  font-family: var(--font-numbers);
  letter-spacing: 0.02em;
  /* S461: l'ingranaggio ora porta l'etichetta accanto — su schermi stretti
     è l'email a cedere, non la scritta. */
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.btn-logout {
  background: none;
  border: none;
  color: var(--text-secondary);
  font-size: 0.75rem;
  padding: 0;
  transition: color var(--transition);
  letter-spacing: 0.02em;
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}

.btn-logout svg {
  width: 16px;
  height: 16px;
  opacity: 0.6;
  flex-shrink: 0;
}

.btn-logout:hover { color: var(--red); }
.btn-logout:hover svg { opacity: 0.9; }

.sidebar-gear {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  font-size: 0.75rem;
  letter-spacing: 0.02em;
  color: var(--text-secondary);
  opacity: 0.6;
  transition: opacity var(--transition), color var(--transition);
}
.sidebar-gear:hover { opacity: 1; color: var(--gold); }

/* ---------- Main Content ---------- */

.main-content {
  flex: 1;
  overflow-y: auto;
  padding: 0 40px;
  min-width: 0;
  background:
    radial-gradient(ellipse at 70% 10%, rgba(201, 168, 76, 0.015) 0%, transparent 50%),
    var(--bg-primary);
}

/* ---------- Cards ---------- */

.card {
  position: relative;
  background:
    linear-gradient(170deg, rgba(255, 255, 255, 0.012) 0%, transparent 50%),
    var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px 24px;
  transition: transform 200ms ease, box-shadow 200ms ease, border-color 200ms ease;
  box-shadow: var(--shadow);
}

.card:hover {
  border-color: rgba(255, 255, 255, 0.50);
  transform: translateY(-2px);
  box-shadow: var(--shadow), 0 8px 24px rgba(0, 0, 0, 0.25);
}

.card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

.card-title {
  font-family: var(--font-numbers);
  font-size: 0.7rem;
  color: var(--text-muted);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.dashboard-grid .card-header {
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border-subtle);
}

/* ---------- Dashboard Grid ---------- */

.dashboard-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}

.dashboard-grid .dash-hero {
  grid-column: span 2;
}

.dashboard-grid .card-wide {
  grid-column: span 2;
}

/* Staggered entrance */
.dashboard-grid .card {
  animation: card-enter 0.5s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.dashboard-grid .card:nth-child(1) { animation-delay: 0s; }
.dashboard-grid .card:nth-child(2) { animation-delay: 0.06s; }
.dashboard-grid .card:nth-child(3) { animation-delay: 0.12s; }
.dashboard-grid .card:nth-child(4) { animation-delay: 0.18s; }
.dashboard-grid .card:nth-child(5) { animation-delay: 0.24s; }
.dashboard-grid .card:nth-child(6) { animation-delay: 0.30s; }
.dashboard-grid .card:nth-child(7) { animation-delay: 0.36s; }

@keyframes card-enter {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ---------- Dashboard Widgets ---------- */

.dash-hero {
  padding: 20px 24px;
  text-align: center;
  border-color: var(--gold);
  border-width: 1px;
  background:
    linear-gradient(170deg, rgba(212, 175, 55, 0.04) 0%, transparent 40%),
    var(--bg-card);
}
.dash-hero:hover {
  border-color: var(--gold);
  box-shadow: var(--shadow), 0 0 20px rgba(212, 175, 55, 0.08);
}

.dash-hero-row {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 12px;
  margin-top: 8px;
  flex-wrap: wrap;
}

.dash-hero-value {
  font-size: 1.6rem;
  text-shadow: 0 0 30px rgba(255, 255, 255, 0.08);
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: -0.02em;
}

.dash-pnl-badge {
  font-size: 0.75rem;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: var(--radius-sm);
  letter-spacing: -0.01em;
}

.dash-hero-sub {
  font-size: 0.7rem;
  color: var(--text-muted);
  margin-top: 4px;
}

.dash-hero-pnl {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--border-subtle);
  text-align: left;
}

/* Asset allocation — treemap a due livelli (S582)
   La superficie di ogni rettangolo E' il peso, e dentro ogni tipo si vedono
   i titoli. Il disegno lo fa `dashboard-treemap.js` in SVG, IN PIXEL VERI:
   niente `preserveAspectRatio="none"`, che sul telefono stirava il testo e
   lo faceva uscire dai quadratini. Qui non si scala niente: le misure sono
   gia' quelle giuste, e il font si dichiara in px come in tutto il resto. */

.dash-tm {
  display: block;
  width: 100%;
  border-radius: 6px;
  overflow: hidden;
  touch-action: manipulation;
}

.dash-tm text {
  font-family: var(--font-numbers);
  pointer-events: none;
}

.dash-tm .tm-tipo { font-size: 10px; font-weight: 700; letter-spacing: 0.09em; fill: rgba(10, 10, 15, 0.92); }
.dash-tm .tm-pct  { font-size: 14px; font-weight: 700; fill: rgba(10, 10, 15, 0.7); }
.dash-tm .tm-tick { font-size: 10px; text-anchor: middle; fill: var(--text-primary); }
.dash-tm .tm-val  { font-size: 9px;  text-anchor: middle; fill: var(--text-secondary); }

.dash-tm .tm-g rect { transition: opacity 0.15s; cursor: pointer; }
.dash-tm .tm-g:hover rect { opacity: 0.82; }
.dash-tm .tm-g.is-sel rect { stroke: var(--gold-bright, #e2c877); stroke-width: 2.5; }

/* La riga che risponde al tocco. Su mobile il <title> dell'SVG non si vede,
   quindi senza questa il quadrato si illuminava e non diceva niente. */
.tm-dettaglio {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 22px;
  margin-top: 8px;
  padding: 0 2px;
  font-size: 0.72rem;
  color: var(--text-secondary);
}
.tm-d-nome { font-weight: 700; color: var(--text-primary); letter-spacing: 0.04em; }
.tm-d-val  { color: var(--gold); }
.tm-d-pct  { margin-left: auto; color: var(--text-muted); }

/* Analytics card */
.dash-analytics-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 4px 0; border-bottom: 1px solid var(--border-subtle);
}
.dash-analytics-row:last-of-type { border-bottom: none; }
.dash-analytics-label { font-size: 0.78rem; color: var(--text-secondary); }
.dash-analytics-value { font-size: 0.88rem; font-weight: 600; }
.dash-analytics-holdings {
  display: flex; flex-wrap: wrap; gap: 4px; margin-top: 8px;
}
.dash-analytics-ticker {
  display: inline-flex; align-items: center; gap: 2px;
  padding: 2px 8px; border-radius: 4px;
  font-size: 0.72rem; font-weight: 500;
  font-family: var(--font-numbers);
  background: rgba(150, 150, 150, 0.08);
  border: 1px solid var(--border-subtle);
  color: var(--text-primary);
}

/* P&L rows */

.dash-pnl-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 0;
  border-bottom: 1px solid var(--border-subtle);
}
.dash-pnl-row:last-child { border-bottom: none; }

.dash-pnl-name {
  font-size: 0.82rem;
  color: var(--text-secondary);
}

.dash-pnl-value {
  font-size: 0.78rem;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: var(--radius-sm);
}

/* Predictions */

.dash-pred-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 6px;
  border-bottom: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  transition: background 120ms ease;
  margin: 0 -6px;
}
.dash-pred-row:last-child { border-bottom: none; }
.dash-pred-row:hover { background: rgba(255, 255, 255, 0.03); }

.dash-pred-arrow {
  font-size: 0.8rem;
  font-weight: 700;
  width: 22px;
  height: 22px;
  line-height: 22px;
  text-align: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.04);
  flex-shrink: 0;
}

.dash-pred-ticker {
  font-size: 0.82rem;
  color: var(--text-primary);
  font-weight: 500;
  flex: 1;
}

.dash-pred-badge {
  font-size: 0.7rem;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: var(--radius-sm);
}

.dash-pred-conf {
  font-size: 0.5rem;
  letter-spacing: 1px;
  color: var(--gold);
  opacity: 0.6;
}

.dash-pred-faded { opacity: 0.4; }

/* ---------- World Context Pyramid ---------- */

.wc-level {
  border-bottom: 1px solid var(--border-subtle);
  cursor: pointer;
  transition: background 150ms ease;
  border-radius: var(--radius-sm);
}
.wc-level:last-child { border-bottom: none; }
.wc-level:hover { background: rgba(255, 255, 255, 0.03); }
/* S582 — il livello APERTO si stacca davvero dagli altri.
   Il Sacerdote: «lo apri, lampeggia, il titolo diventa dorato, ma quello
   aperto fallo risaltare ancora di più». Il fondo all'3% era un'ombra: su un
   tema scuro quella differenza non si vede, e chi apre due livelli non sa
   quale sta leggendo. Ora l'aperto ha un fondo piu' sostenuto, un filetto
   d'oro sul fianco e un po' d'aria intorno — cioe' i tre segnali che si
   leggono senza doverli cercare: colore, bordo, spazio. Nessuna animazione:
   il lampeggio esiste gia' e serve ad altro (dire dove sei atterrato dalla
   mail), e due animazioni che dicono cose diverse si confondono. */
.wc-level.is-open {
  background: rgba(212, 175, 55, 0.07);
  border-left: 2px solid var(--gold);
  padding-left: 8px;
  padding-bottom: 4px;
  margin: 4px 0;
  border-bottom-color: transparent;
  box-shadow: inset 0 1px 0 rgba(212, 175, 55, 0.16);
}
.wc-level.is-open .wc-level-label { color: var(--gold); }
/* Gli altri si fanno da parte: quando uno e' aperto, la lista intorno
   arretra. E' il modo piu' economico di dire «stai leggendo questo». */
.wc-ha-aperto .wc-level:not(.is-open) { opacity: 0.55; }
.wc-ha-aperto .wc-level:not(.is-open):hover { opacity: 1; }

/* S533 — il livello su cui sei appena atterrato dalla mail del digest.
   Chi arriva dal link ha in testa UN briefing e trova una piramide di sette
   livelli: senza un segno deve cercare quale gli avevano mandato. Si spegne
   da sola dopo quattro secondi — è un'indicazione, non uno stato. Stessa
   grammatica della torre in `.ved-card--arrivata` (views.css). */
.wc-level--arrivato {
  box-shadow: 0 0 0 1px var(--gold);
  animation: wc-arrivato 4s ease-out forwards;
}

@keyframes wc-arrivato {
  0%   { box-shadow: 0 0 0 1px var(--gold), 0 0 22px rgba(212, 175, 55, 0.45); }
  70%  { box-shadow: 0 0 0 1px var(--gold), 0 0 22px rgba(212, 175, 55, 0.45); }
  100% { box-shadow: 0 0 0 1px transparent, 0 0 0 rgba(212, 175, 55, 0); }
}

/* Chi ha chiesto meno movimento non riceve il lampeggio, ma vede lo stesso
   qual è il suo livello: il bordo resta. */
@media (prefers-reduced-motion: reduce) {
  .wc-level--arrivato { animation: none; }
}

.wc-level-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 0;
}

.wc-level-chevron {
  font-size: 0.65rem;
  color: var(--gold);
  transition: transform 200ms ease;
  flex-shrink: 0;
  width: 14px;
  text-align: center;
}
.wc-level-chevron::before { content: '▶'; }
.wc-level.is-open .wc-level-chevron { transform: rotate(90deg); }

.wc-level-label {
  font-family: var(--font-numbers);
  font-size: 0.76rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-primary);
  flex-shrink: 0;
}

.wc-level-date {
  font-family: var(--font-numbers);
  font-size: 0.7rem;
  color: var(--text-muted);
  margin-left: auto;
}

.wc-level-preview {
  font-size: 0.74rem;
  color: var(--text-secondary);
  line-height: 1.5;
  padding: 0 0 8px 20px;
  max-height: 1.5em;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
}
.wc-level.is-open .wc-level-preview { display: none; }

.wc-level-full {
  display: none;
  padding: 0 0 14px 20px;
}

.wc-level-title {
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--gold);
  margin-bottom: 10px;
  line-height: 1.4;
}

/* S533 — il briefing arrivava qui come markdown grezzo dentro un blocco
   unico, alto 200px, da leggere scrollando dentro una feritoia. Ora sono
   paragrafi, e l'altezza è quella di una lettura: chi vuole tutto apre il
   livello, non fa scorrere una finestrella. */
.wc-level-content {
  font-size: 0.78rem;
  color: var(--text-secondary);
  line-height: 1.62;
  max-height: 420px;
  overflow-y: auto;
  padding-right: 6px;
}

.wc-level-content p { margin: 0 0 0.85em; }
.wc-level-content p:last-child { margin-bottom: 0; }
.wc-level-content strong { color: var(--text-primary); font-weight: 600; }
.wc-level-content em { color: var(--text-primary); font-style: italic; }
.wc-level.is-open .wc-level-full { display: block; }

.stat-value {
  font-family: var(--font-numbers);
  font-size: 2rem;
  font-weight: 600;
  letter-spacing: -0.03em;
  margin-bottom: 2px;
  color: var(--text-primary);
}

.stat-label {
  font-family: var(--font-numbers);
  font-size: 0.7rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.stat-change {
  font-family: var(--font-numbers);
  font-size: 0.82rem;
  margin-left: 8px;
}

/* ---------- Buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 9px 20px;
  border-radius: var(--radius-sm);
  font-size: 0.85rem;
  font-weight: 500;
  border: 1px solid transparent;
  transition: all var(--transition);
  white-space: nowrap;
  letter-spacing: 0.01em;
}

.btn-gold {
  background: linear-gradient(135deg, var(--gold) 0%, var(--gold-dim) 100%);
  color: var(--bg-primary);
  border-color: var(--gold);
  box-shadow: 0 2px 8px rgba(201, 168, 76, 0.2);
}

.btn-gold:hover {
  background: linear-gradient(135deg, var(--gold-bright) 0%, var(--gold) 100%);
  box-shadow: 0 4px 16px rgba(201, 168, 76, 0.3);
  transform: translateY(-1px);
}

.btn-gold:active {
  transform: translateY(0);
  box-shadow: 0 1px 4px rgba(201, 168, 76, 0.2);
}

.btn-outline {
  background: transparent;
  color: var(--text-secondary);
  border-color: var(--border);
}

.btn-outline:hover {
  border-color: var(--gold-dim);
  color: var(--gold);
  background: var(--gold-glow);
}

.btn-ghost {
  background: transparent;
  color: var(--text-secondary);
  border: none;
  padding: 8px 12px;
}

.btn-ghost:hover { color: var(--text-primary); }

.btn-sm { padding: 6px 14px; font-size: 0.78rem; }

/* S146 — Capability probe pills */
.cap-pills { display: flex; flex-wrap: wrap; gap: 5px; }
.cap-pill {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 9px; border-radius: 3px;
  font-size: 0.72rem; font-weight: 600; letter-spacing: 0.02em;
  line-height: 1.5; white-space: nowrap;
  border: 1px solid transparent;
}
.cap-pill--pass {
  color: var(--green); background: rgba(76, 175, 80, 0.1);
  border-color: rgba(76, 175, 80, 0.25);
}
.cap-pill--fail {
  color: var(--red); background: rgba(224, 92, 92, 0.1);
  border-color: rgba(224, 92, 92, 0.25);
}
.cap-pill--unknown {
  color: var(--text-secondary); background: rgba(150, 150, 150, 0.08);
  border-color: rgba(150, 150, 150, 0.15);
}
.cap-pill__dot { font-size: 0.55rem; }
.cap-probe-btn {
  display: inline-flex; align-items: center; gap: 3px;
  padding: 5px 12px; border-radius: 3px; min-height: 28px;
  font-size: 0.72rem; font-weight: 600;
  color: var(--gold); background: rgba(201, 176, 55, 0.1);
  border: 1px solid rgba(201, 176, 55, 0.25);
  cursor: pointer; white-space: nowrap;
  transition: background 0.15s, border-color 0.15s;
}
.cap-probe-btn:hover { background: rgba(201, 176, 55, 0.2); border-color: rgba(201, 176, 55, 0.4); }
.cap-probe-btn:disabled { opacity: 0.5; cursor: wait; }

/* S547 — Model Catalog: da tabella a schede raggruppate per provider.
   Era una <table> a 6 colonne con `overflow-x:auto`: su telefono si leggeva
   scorrendo di lato, cioè non si leggeva. Le colonne strette (On, Ctx, ✕)
   costavano intestazione e larghezza fissa per un dato che sta in due
   caratteri, e il provider si ripeteva su ogni riga senza mai raggruppare
   niente. Qui il provider diventa una sezione, e ogni modello una scheda che
   sta in una colonna sola quando lo schermo è stretto.
   Le `cap-pill` non si toccano: sono di S146 e vanno bene. */
.mcat-prov { margin-bottom: 20px; }
.mcat-prov:last-child { margin-bottom: 0; }
.mcat-prov__head {
  display: flex; align-items: baseline; gap: 10px; margin-bottom: 8px;
}
.mcat-prov__name {
  font-family: var(--font-titles); font-size: 0.95rem;
  color: var(--gold); letter-spacing: 0.02em;
}
.mcat-prov__count {
  font-family: var(--font-numbers); font-size: 0.75rem;
  color: var(--text-secondary); white-space: nowrap;
}
/* il filetto che si allunga fin dove arriva la riga: separa i provider senza
   spendere un bordo pieno, che su una scheda densa fa gabbia. */
.mcat-prov__rule {
  flex: 1; height: 1px; min-width: 20px;
  background: linear-gradient(to right, rgba(201, 176, 55, 0.35), transparent);
}
/* `min(320px, 100%)` invece di `320px` secco: sotto i 320 di viewport la
   traccia non sfora e non ricompare lo scroll orizzontale che stiamo togliendo.
   Niente media query, la griglia si regola da sé. */
.mcat-grid {
  display: grid; gap: 12px;
  grid-template-columns: repeat(auto-fill, minmax(min(360px, 100%), 1fr));
}
.mcat {
  display: flex; align-items: stretch; min-width: 0;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--border); border-radius: 4px;
  overflow: hidden;
  transition: border-color 0.15s, background 0.15s;
}
.mcat:hover { border-color: rgba(201, 176, 55, 0.3); background: rgba(255, 255, 255, 0.035); }
/* lo stato acceso/spento si legge dal filetto, prima di arrivare al toggle:
   a colpo d'occhio si vede quanta parte del catalogo è viva. */
.mcat__spine {
  flex: 0 0 3px; background: rgba(150, 150, 150, 0.18);
  transition: background 0.2s;
}
.mcat[data-on="1"] .mcat__spine { background: var(--gold); }
.mcat__body {
  flex: 1; min-width: 0; padding: 12px 14px;
  display: flex; flex-direction: column; gap: 10px;
}
/* S551 — `align-items: center` allineava il toggle al centro di un nome che
   ora può occupare due righe. `flex-start` lo tiene sulla prima. */
.mcat__top { display: flex; align-items: flex-start; gap: 10px; }
.mcat__id {
  flex: 1; min-width: 0;
  font-family: var(--font-numbers); font-size: 0.82rem;
  color: var(--text-primary); line-height: 1.35;
  overflow-wrap: anywhere;
}
.mcat[data-on="0"] .mcat__id { color: var(--text-secondary); }
/* S551 — le pill prendono la riga e vanno a capo DENTRO di sé; i due bottoni
   restano sulla destra, in fondo. Con `flex-wrap` sul contenitore erano loro
   ad andare a capo appena le pill occupavano due righe, e ogni scheda si
   portava dietro una riga vuota con due bottoni in un angolo. */
.mcat__mid { display: flex; align-items: flex-end; gap: 10px; }
.mcat__mid > .cap-pills { flex: 1 1 auto; min-width: 0; }
.mcat__ctx {
  font-family: var(--font-numbers); font-size: 0.74rem;
  color: var(--text-muted); white-space: nowrap;
  flex: 0 0 auto; padding-top: 2px;
}
.mcat__ctx b { color: var(--text-secondary); font-weight: 500; }
.mcat__acts { display: flex; align-items: center; gap: 6px; margin-left: auto; }

/* Interruttore proprio: la checkbox di sistema porta il blu del browser, che
   in questa palette è l'unico colore che non abbiamo scelto noi. */
.mcat-sw {
  position: relative; display: inline-block;
  width: 38px; height: 20px; flex: 0 0 38px; cursor: pointer;
}
.mcat-sw input {
  position: absolute; inset: 0; width: 100%; height: 100%;
  margin: 0; opacity: 0; cursor: pointer;
}
.mcat-sw i {
  position: absolute; inset: 0; border-radius: 999px;
  background: rgba(150, 150, 150, 0.15);
  border: 1px solid var(--border);
  transition: background 0.18s, border-color 0.18s;
}
.mcat-sw i::after {
  content: ''; position: absolute; top: 2px; left: 2px;
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--text-secondary);
  transition: transform 0.18s, background 0.18s;
}
.mcat-sw input:checked + i {
  background: rgba(201, 176, 55, 0.22); border-color: rgba(201, 176, 55, 0.5);
}
.mcat-sw input:checked + i::after { transform: translateX(18px); background: var(--gold); }
.mcat-sw input:focus-visible + i { outline: 1px solid var(--gold); outline-offset: 2px; }

.mcat__del {
  background: none; border: 1px solid transparent; border-radius: 3px;
  color: var(--text-muted); font-size: 0.8rem; line-height: 1;
  padding: 6px 10px; min-height: 28px; cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
}
.mcat__del:hover { color: var(--red); border-color: rgba(224, 92, 92, 0.35); }
.mcat--busy { opacity: 0.5; pointer-events: none; }
/* il lampo verde dopo un salvataggio riuscito: era sulla <tr>, resta qui —
   è l'unico segnale che la PATCH è arrivata. */
.mcat--saved { background: rgba(45, 212, 168, 0.09); border-color: rgba(45, 212, 168, 0.3); }

/* S547 (F162) — Copertura modelli. Stessa griglia delle schede del catalogo:
   una scheda per provider, una colonna sola quando lo schermo è stretto.
   S551 — la scheda è stata allargata (300 -> 380) e arieggiata: a 300px il
   contenuto stava, ma nessuna delle sue righe ci stava DENTRO — i nomi dei
   modelli e i voti uscivano tutti troncati. Larghezza minima e respiro sono
   la stessa decisione presa due volte. */
/* I totali della scheda: cifre in mono, etichette piccole accanto. Stanno
   sotto il titolo perché è la prima cosa che si legge aprendo la pagina. */
.cov-tot {
  display: flex; align-items: baseline; gap: 6px 12px; flex-wrap: wrap;
  margin: -6px 0 12px;
  font-family: var(--font-numbers); font-size: 0.78rem;
  color: var(--text-muted);
}
.cov-tot__n b {
  font-size: 1.3rem; font-weight: 600;
  color: var(--gold); margin-right: 6px; letter-spacing: -0.01em;
}
.cov-tot__sep { opacity: 0.45; }
.cov-intro {
  font-size: 0.85rem; line-height: 1.6;
  color: var(--text-secondary); margin: 0 0 16px;
  max-width: 68ch;
}
.cov-grid {
  display: grid; gap: 14px;
  grid-template-columns: repeat(auto-fill, minmax(min(380px, 100%), 1fr));
}
.cov {
  padding: 16px 16px 14px; min-width: 0;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--border); border-radius: 6px;
  display: flex; flex-direction: column; gap: 12px;
}
.cov--muto { opacity: 0.55; }
.cov__head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.cov__prov {
  flex: 1 1 auto; min-width: 0;
  font-family: var(--font-titles); font-size: 1.05rem;
  color: var(--gold); letter-spacing: 0.02em;
  overflow-wrap: anywhere;
}
.cov__tag {
  font-family: var(--font-numbers); font-size: 0.72rem;
  color: var(--text-secondary); white-space: nowrap;
}
.cov__tag--pieno { color: var(--green); }
.cov__tag--muto { color: var(--text-muted); font-style: italic; }

/* L'imbuto in una riga: offerti → in catalogo → attivi. Le frecce dicono che
   è un restringimento voluto, non tre numeri messi vicini. */
.cov__flow {
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  font-family: var(--font-numbers); font-size: 0.75rem;
  color: var(--text-muted);
}
.cov__n b {
  font-size: 1.15rem; font-weight: 600;
  color: var(--text-secondary); margin-right: 5px;
}
.cov__n--on b { color: var(--gold); }
.cov__arrow { color: var(--text-muted); font-size: 0.9rem; opacity: 0.5; }

/* La barra misura SOLO attivi/in-catalogo. Disegnare 4 su 420 darebbe una
   traccia invisibile che sembra un guasto: quella proporzione si dice a
   parole, non si disegna. */
.cov__bar {
  height: 3px; border-radius: 2px;
  background: rgba(150, 150, 150, 0.15); overflow: hidden;
}
.cov__bar i { display: block; height: 100%; background: var(--gold); }
.cov__foot {
  display: flex; justify-content: space-between; gap: 8px 16px; flex-wrap: wrap;
  font-family: var(--font-numbers); font-size: 0.72rem;
  color: var(--text-muted);
}
.cov__foot b { color: var(--text-secondary); font-weight: 600; }

/* S619 (F237) — la ragione per cui a un provider il prompt di chat non passa.
   Sta dentro la scheda e non in un tooltip perche' e' la riga che spiega
   perche' quei modelli NON sono lavoro da fare: nel tooltip la leggeva solo
   chi ci passava sopra col mouse, e su telefono nessuno. */
.cov__chiusa {
  margin: 0.5rem 0 0;
  padding: 0.45rem 0.6rem;
  border-left: 2px solid var(--border);
  background: var(--bg-subtle, rgba(127,127,127,0.06));
  color: var(--text-muted);
  font-size: 0.78rem;
  line-height: 1.45;
}

/* La lista completa: chiusa di default perché sono centinaia, ma completa —
   è da qui che si vede chi ha il voto e chi non l'ha mai avuto. */
.cov__lista { margin-top: 2px; }
.cov__lista > summary {
  cursor: pointer; list-style: none;
  font-family: var(--font-numbers); font-size: 0.75rem;
  color: var(--text-secondary); padding: 8px 0;
}
.cov__lista > summary::-webkit-details-marker { display: none; }
.cov__lista > summary::before { content: '▸ '; color: var(--gold); }
.cov__lista[open] > summary::before { content: '▾ '; }
.cov__lista > summary:hover { color: var(--text-primary); }
/* i paid sono l'archivio, non il lavoro: la riga per aprirli c'è ma non
   chiama, e dentro le voci restano smorte. */
.cov__lista--paid > summary { color: var(--text-muted); }
.cov__lista--paid > summary::before { color: var(--text-muted); }
.cm-list {
  list-style: none; margin: 4px 0 0; padding: 0;
  max-height: 420px; overflow-y: auto;
  border-top: 1px solid var(--border);
}

/* S551 — la voce del modello NON è una riga di tabella.
 *
 * Era `grid-template-columns: 1fr auto auto auto`: quattro colonne su una
 * riga sola, di cui tre `auto` che si servono per prime. Dentro una scheda
 * da 300px stato + voti + bottone si prendevano tutta la larghezza e il
 * `1fr` del NOME collassava — non troncato: sparito. Nello screenshot del
 * Sacerdote ci sono righe che dicono «in catalogo reasoning:7 · oracolare:
 * 6.75» senza dire di CHI. Un `1fr` non è una garanzia di spazio, è ciò che
 * avanza; e qui non avanzava niente.
 *
 * Ora sono due piani: il nome sopra, da solo, su tutta la larghezza e senza
 * ellissi; stato e voti sotto, che vanno a capo invece di essere tagliati.
 * Il nome del modello e il suo voto sono l'unico motivo per cui questa
 * lista esiste: sono gli ultimi due dati che possono cedere spazio.
 */
.cm {
  display: grid; gap: 5px 10px; align-items: baseline;
  grid-template-columns: minmax(12ch, auto) minmax(0, 1fr) auto;
  grid-template-areas:
    "id    id    btn"
    "stato voto  voto";
  padding: 10px 4px; border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  font-family: var(--font-numbers); font-size: 0.75rem;
}
.cm__id {
  grid-area: id; min-width: 0;
  overflow-wrap: anywhere; line-height: 1.35;
  color: var(--text-secondary);
}
.cm--attivo .cm__id { color: var(--text-primary); }
.cm--morto .cm__id { color: var(--text-muted); text-decoration: line-through; }
.cm--paid .cm__id, .cm--paid .cm__stato { color: var(--text-muted); }
/* Ogni voce è una griglia a sé: con `auto` la colonna dello stato si
   dimensionava sul proprio testo, e i voti partivano da un'ascissa diversa
   riga per riga («attivo» a 105px, «in catalogo» a 142 — misurato). Il
   minimo in `ch` li incolonna davvero, perché il font è monospazio e 12ch
   copre lo stato più lungo; `auto` resta come sfogo per le date dei morti. */
.cm__stato {
  grid-area: stato;
  font-size: 0.72rem; color: var(--text-muted); white-space: nowrap;
}
.cm--attivo .cm__stato { color: var(--gold); }
.cm--cat .cm__stato { color: var(--text-secondary); }
.cm--morto .cm__stato { color: var(--red); }
.cm__voto {
  grid-area: voto; min-width: 0;
  font-size: 0.72rem; color: var(--green);
  overflow-wrap: anywhere; line-height: 1.4;
}
.cm__voto--no { color: var(--text-muted); font-style: italic; }
.cm__nota-btn {
  grid-area: btn; align-self: start;
  background: none; border: 1px solid transparent; border-radius: 4px;
  cursor: pointer; padding: 2px 8px; min-width: 30px; min-height: 26px;
  color: var(--text-muted); font-size: 0.85rem; line-height: 1;
}
.cm__nota-btn:hover { color: var(--gold); border-color: rgba(201, 176, 55, 0.3); }
/* La nota va a capo su tutta la riga: è prosa, non una colonna. */
.cm__nota {
  grid-column: 1 / -1; margin: 6px 0 2px;
  font-family: var(--font-titles); font-size: 0.82rem; font-style: italic;
  color: var(--text-secondary); line-height: 1.5;
  border-left: 2px solid rgba(201, 176, 55, 0.35); padding-left: 10px;
}
.cov__esito {
  font-family: var(--font-numbers); font-size: 0.68rem;
  color: var(--text-secondary); margin: 0 0 10px;
}
.cov__esito--ok { color: var(--green); }
.cov__esito--ko { color: var(--red); }

/* S149 — Model Rankings leaderboard */
.rankings-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr));
  gap: 14px;
}
.rank-group {
  background: var(--bg-primary);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 14px 16px;
}
.rank-group__header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 10px; padding-bottom: 8px;
  border-bottom: 1px solid var(--border);
}
.rank-group__task {
  font-family: var(--font-numbers);
  font-size: 0.8rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--gold);
}
.rank-group__count {
  font-size: 0.74rem; color: var(--text-muted);
  font-family: var(--font-numbers);
}
/* S551 — la barra scende sotto il nome invece di prendersi 60px in fila.
   Su una colonna stretta quei 60px li pagava il nome del modello, che è il
   dato per cui si apre una classifica. */
.rank-row {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr) auto;
  grid-template-areas:
    "pos model score"
    "bar bar   bar";
  align-items: center; gap: 5px 8px;
  padding: 9px 0;
  border-bottom: 1px solid rgba(58, 58, 80, 0.4);
}
.rank-row:last-child { border-bottom: none; }
.rank-pos {
  grid-area: pos; align-self: start; padding-top: 1px;
  font-family: var(--font-numbers);
  font-size: 0.78rem; font-weight: 700;
  text-align: center; color: var(--text-muted);
}
.rank-pos--1 { color: var(--gold-bright); }
.rank-pos--2 { color: var(--text-secondary); }
.rank-pos--3 { color: #8b6914; }
.rank-model {
  grid-area: model;
  display: flex; flex-direction: column; gap: 2px;
  min-width: 0;
}
/* `break-all` spezzava a metà parola anche quando c'era un trattino a due
   caratteri di distanza: `mistral-sma / ll-latest`. `anywhere` va a capo
   sui separatori e taglia dentro la parola solo se non ha alternative. */
.rank-model__name {
  font-family: var(--font-numbers);
  font-size: 0.8rem; font-weight: 500;
  color: var(--text-primary); line-height: 1.35;
  overflow-wrap: anywhere;
}
.rank-model__provider {
  font-size: 0.68rem; color: var(--text-muted);
  text-transform: uppercase; letter-spacing: 0.03em;
}
/* S617 — il racconto del voto, sotto il nome: si legge anche dal telefono */
.rank-model__nota {
  display: block;
  font-size: 0.72rem;
  line-height: 1.35;
  color: var(--text-secondary);
  white-space: normal;
  margin-top: 2px;
}
.rank-score {
  grid-area: score; align-self: start;
  font-family: var(--font-numbers);
  font-size: 0.95rem; font-weight: 700;
  text-align: right; letter-spacing: -0.02em;
}
.rank-bar {
  grid-area: bar;
  height: 4px; border-radius: 2px;
  background: var(--bg-card);
  overflow: hidden;
}
.rank-bar__fill {
  height: 100%; border-radius: 2px;
  background: var(--gold-dim);
  transition: width 0.4s ease;
}
.rank-row:first-child .rank-bar__fill { background: var(--gold-bright); }
.rank-row:first-child .rank-score { color: var(--gold-bright); }
/* S614 — i gruppi col nome del mestiere, la riserva ripiegata, la nota. */
.rank-group__task small { font-weight: 400; opacity: .6; margin-left: 6px; font-size: .8em; }
.rank-group__sotto { font-size: .72rem; color: var(--text-secondary); margin: -4px 0 8px; }
.rank-riserva { margin-top: 8px; font-size: .78rem; }
.rank-riserva summary { cursor: pointer; color: var(--text-secondary); padding: 4px 0; }
.rank-nota { font-size: .76rem; color: var(--text-secondary); margin: 10px 0 0; }
.rank-empty {
  font-size: 0.8rem; color: var(--text-muted);
  text-align: center; padding: 14px 0;
}

/* S551 — «Fai entrare un modello»: due select e la terna di posizioni. */
.ing {
  margin-top: 18px; padding-top: 16px;
  border-top: 1px solid var(--border);
}
.ing__title {
  font-size: 0.92rem; color: var(--text-primary); margin-bottom: 4px;
}
.ing__hint {
  font-size: 0.82rem; line-height: 1.55;
  color: var(--text-secondary); margin: 0 0 12px; max-width: 62ch;
}
.ing__form { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.ing__sel {
  padding: 9px 12px; min-height: 38px;
  background: var(--bg-input); color: var(--text-primary);
  border: 1px solid var(--border); border-radius: 4px;
  font-size: 0.85rem; max-width: 100%;
}
.ing__sel--modello {
  flex: 1 1 240px; min-width: 0;
  font-family: var(--font-numbers);
}
/* i tre bottoni sono una terna, non tre pulsanti sparsi: stessa riga,
   stessa larghezza, e su schermo stretto occupano la riga intera a terzi. */
.ing__pos { display: flex; gap: 8px; flex: 1 1 100%; }
/* `btn-ghost` è trasparente e senza bordo: si rivela all'hover, che su un
   telefono non esiste — restavano tre parole in mezzo al nulla. Il bordo lo
   do qui, non alla classe globale, che vive in tutte le altre viste. */
.ing__pos .btn {
  flex: 1 1 0; min-width: 0; font-size: 0.8rem; padding: 10px 6px;
  border: 1px solid var(--border); border-radius: 4px;
  background: rgba(255, 255, 255, 0.02);
}
.ing__pos .btn:hover, .ing__pos .btn:active {
  border-color: rgba(201, 176, 55, 0.45); color: var(--gold);
}
.ing__esito { font-size: 0.82rem; color: var(--text-secondary); margin-top: 10px; }

/* S551 — Routing log: righe, non tabelle. */
.rl { margin-bottom: 20px; }
.rl:last-child { margin-bottom: 0; }
.rl__cap {
  font-weight: 500; font-size: 0.88rem;
  color: var(--text-primary); margin-bottom: 10px;
}
.rl__head, .rl__row {
  display: grid; gap: 4px 12px; align-items: baseline;
  grid-template-columns: minmax(12ch, auto) minmax(0, 1fr) auto;
  grid-template-areas: "task pm n";
  padding: 9px 2px;
  border-bottom: 1px solid rgba(58, 58, 80, 0.4);
}
.rl__head {
  color: var(--text-secondary); font-size: 0.78rem;
  border-bottom-color: var(--border);
}
.rl__row--log {
  grid-template-columns: minmax(11ch, auto) minmax(0, 1fr);
  grid-template-areas: "quando task" "pm pm";
}
.rl__quando {
  grid-area: quando; white-space: nowrap;
  font-family: var(--font-numbers); font-size: 0.78rem;
  color: var(--text-secondary);
}
.rl__task {
  grid-area: task; white-space: nowrap;
  font-family: var(--font-numbers); font-size: 0.8rem; color: var(--gold);
}
.rl__head .rl__task, .rl__head .rl__pm, .rl__head .rl__n {
  color: var(--text-secondary); font-family: inherit; font-size: 0.78rem;
}
.rl__pm {
  grid-area: pm; min-width: 0;
  font-family: var(--font-numbers); font-size: 0.78rem;
  color: var(--text-secondary); overflow-wrap: anywhere; line-height: 1.4;
}
.rl__pm b { color: var(--text-primary); font-weight: 500; }
.rl__n {
  grid-area: n; text-align: right;
  font-family: var(--font-numbers); font-size: 0.85rem;
  color: var(--text-primary); font-variant-numeric: tabular-nums;
}
.rl__vuoto {
  padding: 14px 2px; text-align: center;
  font-size: 0.82rem; color: var(--text-muted);
}

/* S551 — il telefono. Fino a qui il Test Center non aveva UNA media query:
   era stato disegnato guardandolo largo, e su un telefono le stesse regole
   producono la densità di un terminale su uno schermo di 8 cm. Qui non si
   cambia il disegno — si alza il pavimento tipografico (nessun testo sotto
   ~12.5px) e si toglie la larghezza fissa dove costringeva. */
@media (max-width: 640px) {
  .cov-grid, .mcat-grid, .rankings-grid { gap: 12px; }
  .cov { padding: 14px; gap: 11px; }
  .cov__prov { font-size: 1.1rem; }
  .cov__tag, .cov__foot, .cov__lista > summary { font-size: 0.78rem; }
  .cov__flow { font-size: 0.78rem; }
  .cov__n b { font-size: 1.2rem; }
  .cov-tot__n b { font-size: 1.15rem; }
  .cov-intro { font-size: 0.88rem; }

  /* Sul telefono la lista NON scorre dentro sé stessa: uno scroll annidato
     su touch è una trappola — il dito prende quello sbagliato e la pagina
     sembra bloccata. La lista sta dentro un <details> chiuso di default:
     chi lo apre ha chiesto di vederla tutta, e la scorre con la pagina. */
  .cm-list { max-height: none; overflow-y: visible; }
  .cm { font-size: 0.8rem; padding: 11px 2px; }
  .cm__stato, .cm__voto { font-size: 0.78rem; }
  .cm__nota { font-size: 0.86rem; }

  .mcat__body { padding: 12px; }
  .mcat__id { font-size: 0.85rem; }
  .mcat__ctx { font-size: 0.78rem; }
  .cap-pill { font-size: 0.75rem; padding: 4px 10px; }

  .rank-group { padding: 13px 14px; }
  .rank-model__name { font-size: 0.85rem; }
  .rank-model__provider { font-size: 0.72rem; }
  .rank-score { font-size: 1rem; }

  /* Il nome del modello scende sotto: in fila con task e conteggio si
     riduceva a una colonna da pochi caratteri, ed è il dato della riga.
     L'intestazione sparisce perché le colonne non sono più le sue. */
  .rl__head { display: none; }
  .rl__row {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "task n" "pm pm";
  }
  .rl__row--log { grid-template-areas: "quando task" "pm pm"; }
  .rl__task, .rl__pm, .rl__quando { font-size: 0.82rem; }
}

/* S149 — Provider Health grid */
.provider-health-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 10px;
}
.ph-card {
  background: var(--bg-primary);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  display: flex; flex-direction: column; gap: 6px;
}
.ph-card--dead { border-color: rgba(224, 92, 92, 0.35); }
.ph-card--no-key { border-color: var(--border); opacity: 0.55; }
.ph-header {
  display: flex; align-items: center; justify-content: space-between;
}
.ph-provider {
  font-family: var(--font-numbers);
  font-size: 0.82rem; font-weight: 600;
  color: var(--text-primary);
}
.ph-status {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 0.68rem; font-weight: 600;
  font-family: var(--font-numbers);
  text-transform: uppercase; letter-spacing: 0.03em;
}
.ph-meta {
  display: flex; flex-wrap: wrap; gap: 6px 12px;
  font-size: 0.68rem; color: var(--text-muted);
  font-family: var(--font-numbers);
}
.ph-meta span { white-space: nowrap; }
.ph-models {
  display: flex; flex-wrap: wrap; gap: 3px;
  margin-top: 2px;
}
.ph-model-pill {
  display: inline-flex; align-items: center; gap: 3px;
  padding: 1px 6px; border-radius: 3px;
  font-size: 0.62rem; font-weight: 500;
  font-family: var(--font-numbers);
  background: rgba(150, 150, 150, 0.08);
  border: 1px solid rgba(150, 150, 150, 0.15);
  color: var(--text-secondary);
}
.ph-model-pill--live {
  color: var(--green); background: rgba(76, 175, 80, 0.08);
  border-color: rgba(76, 175, 80, 0.2);
}
.ph-model-pill--dead {
  color: var(--red); background: rgba(224, 92, 92, 0.08);
  border-color: rgba(224, 92, 92, 0.2);
}

.ph-sparkline {
  display: flex; align-items: center; gap: 6px;
  margin-top: 2px;
}
.ph-sparkline svg { flex: 0 0 auto; }
.ph-spark-label {
  font-family: var(--font-numbers);
  font-size: 0.62rem; color: var(--text-muted);
}

/* ── Provider Usage Dashboard (S320) ── */
.pu-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 12px;
}
.pu-total {
  grid-column: 1 / -1;
  background: var(--bg-primary);
  border: 1px solid var(--gold-dim, rgba(212, 175, 55, 0.25));
  border-radius: var(--radius-sm);
  padding: 16px 20px;
}
.pu-total__head {
  display: flex; align-items: baseline; justify-content: space-between;
  margin-bottom: 10px;
}
.pu-total__title {
  font-size: 0.92rem; font-weight: 700; color: var(--gold);
  letter-spacing: 0.02em;
}
.pu-total__sub {
  font-size: 0.7rem; color: var(--text-muted);
  font-family: var(--font-numbers);
}
.pu-counters {
  display: flex; gap: 28px; flex-wrap: wrap;
}
.pu-counter {
  display: flex; flex-direction: column;
}
.pu-counter__val {
  font-size: 1.4rem; font-weight: 700;
  font-family: var(--font-numbers);
  font-variant-numeric: tabular-nums;
  color: var(--text-primary);
  line-height: 1.15;
}
.pu-counter__val--gold { color: var(--gold); }
.pu-counter__label {
  font-size: 0.66rem; color: var(--text-muted);
  margin-top: 2px; white-space: nowrap;
}
.pu-card {
  background: var(--bg-primary);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 14px 16px;
  display: flex; flex-direction: column; gap: 10px;
  transition: border-color 0.15s;
}
.pu-card--active { border-color: rgba(76, 175, 80, 0.3); }
.pu-card--idle { opacity: 0.7; }
.pu-card__head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px;
}
.pu-card__name {
  font-size: 0.88rem; font-weight: 600; color: var(--text-primary);
}
.pu-card__badge {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 0.64rem; font-weight: 600;
  font-family: var(--font-numbers);
  text-transform: uppercase; letter-spacing: 0.03em;
  padding: 1px 7px; border-radius: 3px;
}
.pu-card__badge--free {
  color: var(--green); background: rgba(76, 175, 80, 0.1);
}
.pu-card__badge--byok {
  color: var(--text-muted); background: rgba(150, 150, 150, 0.1);
}
.pu-card__counters {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px;
}
.pu-card__counter-val {
  font-size: 1rem; font-weight: 700;
  font-family: var(--font-numbers);
  font-variant-numeric: tabular-nums;
  color: var(--text-primary);
  line-height: 1.15;
}
.pu-card__counter-label {
  font-size: 0.6rem; color: var(--text-muted);
  margin-top: 1px;
}
.pu-card__meta {
  display: flex; flex-wrap: wrap; gap: 4px 10px;
  font-size: 0.66rem; color: var(--text-muted);
  font-family: var(--font-numbers);
}
.pu-card__meta span { white-space: nowrap; }
.pu-limit-bar {
  height: 4px; background: rgba(150, 150, 150, 0.12);
  border-radius: 2px; overflow: hidden; margin-top: 2px;
}
.pu-limit-bar__fill {
  height: 100%; border-radius: 2px;
  background: var(--green);
  transition: width 0.3s;
}
.pu-limit-bar__fill--warn { background: var(--amber); }
.pu-limit-bar__fill--danger { background: var(--red); }
.pu-card__limits {
  display: flex; flex-wrap: wrap; gap: 4px;
}
.pu-limit-pill {
  display: inline-flex; align-items: center; gap: 3px;
  padding: 1px 6px; border-radius: 3px;
  font-size: 0.6rem; font-weight: 500;
  font-family: var(--font-numbers);
  background: rgba(150, 150, 150, 0.08);
  border: 1px solid rgba(150, 150, 150, 0.12);
  color: var(--text-secondary);
}
.pu-card__models {
  border-top: 1px dashed var(--border);
  padding-top: 6px;
  display: flex; flex-direction: column; gap: 3px;
}
.pu-model-row {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 6px; font-size: 0.68rem; font-family: var(--font-numbers);
}
.pu-model-row__name {
  color: var(--text-secondary);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  max-width: 180px;
}
.pu-model-row__val {
  color: var(--text-primary); font-weight: 500;
  white-space: nowrap;
}

.btn-danger {
  background: transparent;
  color: var(--red);
  border-color: rgba(224, 92, 92, 0.2);
}

.btn-danger:hover {
  background: var(--red-dim);
  border-color: rgba(224, 92, 92, 0.4);
}

/* Notes & Reminders CSS split to notes.css (S339) */

.btn-icon {
  background: none;
  border: none;
  cursor: pointer;
  opacity: 0.4;
  font-size: 0.75rem;
  padding: 2px;
  transition: opacity 150ms;
}
.btn-icon:hover { opacity: 1; }

/* ---------- Dashboard extra widgets (S331) ---------- */

.dash-notes-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 6px;
  border-bottom: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  transition: background 120ms ease;
  margin: 0 -6px;
}
.dash-notes-row:last-child { border-bottom: none; }
.dash-notes-row:hover { background: rgba(255, 255, 255, 0.03); }

.dash-notes-title {
  font-size: 0.82rem;
  color: var(--text-primary);
  font-weight: 500;
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dash-project-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 6px;
  border-bottom: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  transition: background 120ms ease;
  margin: 0 -6px;
}
.dash-project-row:last-child { border-bottom: none; }
.dash-project-row:hover { background: rgba(255, 255, 255, 0.03); }

.dash-project-title {
  font-size: 0.82rem;
  color: var(--text-primary);
  font-weight: 500;
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dash-project-status {
  font-family: var(--font-numbers);
  font-size: 0.65rem;
  font-weight: 600;
  padding: 2px 6px;
  border-radius: var(--radius-sm);
  text-transform: uppercase;
}
.dash-project-status[data-status="research"] { color: var(--gold); background: var(--gold-glow); }
.dash-project-status[data-status="evaluation"] { color: var(--amber); background: var(--amber-dim); }
.dash-project-status[data-status="decision"] { color: var(--green); background: var(--green-dim); }
.dash-project-status[data-status="execution"] { color: var(--text-primary); background: var(--border); }
.dash-project-status[data-status="closed"] { color: var(--text-muted); background: var(--border); }

/* S381 — Prompt Debug */
.pd-controls {
  display: flex; flex-direction: column; gap: 8px;
}
.pd-control-row {
  display: flex; align-items: center; gap: 10px;
}
.pd-label {
  font-size: 0.88rem; font-weight: 500; color: var(--text-secondary);
  flex: 0 0 64px;
}
.pd-select, .pd-input {
  flex: 1; min-width: 0; padding: 8px 12px;
  font-size: 0.88rem; font-family: inherit;
  background: var(--bg-primary); color: var(--text-primary);
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  max-width: 100%; overflow: hidden; text-overflow: ellipsis;
}
/* S425 — overflow:hidden sopra è per gli input a riga singola (ellipsis).
   Su textarea (query pack) e select multiple (lista modelli) uccideva lo
   scroll interno: il testo restava tagliato e immobile (bug 06e7e29e). */
textarea.pd-input, select.pd-select {
  overflow: auto; text-overflow: clip;
}
@media (max-width: 520px) {
  .pd-control-row {
    flex-direction: column; align-items: stretch; gap: 4px;
  }
  .pd-label { flex: none; }
}
.pd-meta-bar {
  display: flex; flex-wrap: wrap; gap: 6px 16px;
  padding: 10px 14px; margin-bottom: 8px;
  background: var(--bg-secondary); border-radius: var(--radius-sm);
  font-size: 0.82rem; color: var(--text-secondary);
}
.pd-meta-item b { color: var(--text-primary); }
.pd-meta-total {
  margin-left: auto; font-weight: 600;
  color: var(--gold); font-family: var(--font-numbers);
}
.pd-section { margin-top: 12px; }
.pd-section-title {
  font-size: 0.88rem; font-weight: 600; color: var(--text-primary);
  margin-bottom: 6px; padding-bottom: 4px;
  border-bottom: 1px solid var(--border);
}
.pd-frag {
  padding: 8px 10px; margin-bottom: 4px;
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--bg-primary);
}
.pd-frag--inactive { opacity: 0.45; }
.pd-frag-header {
  display: flex; align-items: center; gap: 8px;
  font-size: 0.86rem;
}
.pd-frag-dot { flex: 0 0 14px; font-size: 0.7rem; }
.pd-frag-name {
  font-weight: 600; color: var(--text-primary);
  flex: 0 0 auto; min-width: 140px;
}
.pd-frag-source {
  font-family: monospace; font-size: 0.76rem;
  color: var(--text-muted); flex: 1; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pd-frag-size {
  flex: 0 0 auto; font-family: var(--font-numbers);
  font-size: 0.78rem; color: var(--gold);
  white-space: nowrap;
}
.pd-frag-condition {
  font-size: 0.76rem; color: var(--text-muted);
  margin: 2px 0 0 22px; font-style: italic;
}
.pd-frag-detail { margin-top: 6px; }
.pd-frag-content {
  font-size: 0.76rem; font-family: monospace;
  color: var(--text-secondary); white-space: pre-wrap;
  max-height: 300px; overflow-y: auto;
  padding: 8px; background: var(--bg-secondary);
  border-radius: var(--radius-sm); border: 1px solid var(--border);
  margin: 0;
}
.pd-cap-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 6px;
}
.pd-cap-group {
  padding: 8px 10px; background: var(--bg-primary);
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  display: flex; flex-direction: column; gap: 2px;
}
.pd-cap-name {
  font-weight: 600; font-size: 0.86rem; color: var(--gold);
}
.pd-cap-tools {
  font-size: 0.76rem; color: var(--text-secondary);
  font-family: var(--font-numbers);
}
.pd-cap-prompts {
  font-size: 0.72rem; color: var(--text-muted);
  font-family: monospace; word-break: break-all;
}
.pd-conv-row {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px; margin-bottom: 4px;
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--bg-primary); transition: border-color 0.15s;
}
.pd-conv-row:hover { border-color: var(--gold); }
.pd-conv-date {
  flex: 0 0 auto; font-size: 0.78rem;
  font-family: var(--font-numbers); color: var(--text-secondary);
}
.pd-conv-count {
  flex: 0 0 auto; font-size: 0.72rem;
  font-family: var(--font-numbers); color: var(--gold);
  background: var(--gold-glow); padding: 1px 6px;
  border-radius: 3px;
}
.pd-conv-preview {
  flex: 1; min-width: 0; font-size: 0.82rem;
  color: var(--text-primary); overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap;
}
.pd-question-row {
  display: flex; align-items: flex-start; gap: 8px;
  padding: 8px 10px; margin-bottom: 3px;
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--bg-primary); transition: border-color 0.15s;
}
.pd-question-row:hover { border-color: var(--green); }
.pd-question-num {
  flex: 0 0 20px; text-align: center;
  font-size: 0.72rem; font-weight: 600;
  font-family: var(--font-numbers); color: var(--gold);
}
.pd-question-text {
  flex: 1; font-size: 0.82rem;
  color: var(--text-primary); line-height: 1.4;
}
.pd-transcript-scroll {
  max-height: 500px; overflow-y: auto; overflow-x: hidden;
  display: flex; flex-direction: column; gap: 4px;
}
.pd-msg {
  padding: 8px 10px; border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  /* S428: flex children default to min-width:auto — un turno espanso con
     stringhe senza spazi (JSON, URL) spingeva tutto il pannello a destra */
  min-width: 0;
}
.pd-turn-detail { max-width: 100%; overflow-x: auto; }
.pd-msg--user {
  background: rgba(200, 170, 80, 0.06);
  border-color: rgba(200, 170, 80, 0.2);
}
.pd-msg--user:hover { border-color: var(--gold); }
.pd-msg--assistant { background: var(--bg-primary); }
.pd-msg-header {
  display: flex; align-items: center; gap: 8px;
  flex-wrap: wrap; margin-bottom: 4px;
}
.pd-msg-role {
  font-size: 0.76rem; font-weight: 600;
  color: var(--text-secondary);
}
.pd-msg-meta {
  font-size: 0.7rem; color: var(--text-muted);
  font-family: var(--font-numbers);
}
.pd-msg-content {
  font-size: 0.82rem; color: var(--text-primary);
  line-height: 1.45; white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.pd-log-row {
  padding: 8px 10px; margin-bottom: 4px;
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--bg-primary);
}
.pd-log-header {
  display: flex; align-items: center; gap: 8px;
  flex-wrap: wrap; margin-bottom: 4px;
}
.pd-log-date {
  font-size: 0.76rem; font-family: var(--font-numbers);
  color: var(--text-muted);
}
.pd-log-user {
  font-size: 0.78rem; font-weight: 500;
  color: var(--text-primary);
}
.pd-log-model {
  font-size: 0.72rem; font-family: monospace;
  color: var(--gold);
}
.pd-log-tokens {
  font-size: 0.7rem; font-family: var(--font-numbers);
  color: var(--text-secondary);
}
.pd-log-query {
  font-size: 0.82rem; color: var(--text-primary);
  margin-bottom: 4px; font-style: italic;
}
.pd-log-response {
  font-size: 0.78rem; color: var(--text-secondary);
  line-height: 1.4;
}


/* S582 — l'età del quadro del mondo, quando esce dal normale.
   Tono, non allarme: dice un fatto (la fonte non ha ancora pubblicato), non
   segnala un guasto. */
.wc-level-stale {
  margin-left: 6px;
  padding: 1px 5px;
  border-radius: 4px;
  font-family: var(--font-numbers);
  font-size: 0.6rem;
  color: var(--gold);
  background: rgba(201, 168, 76, 0.12);
  border: 1px solid rgba(201, 168, 76, 0.25);
  white-space: nowrap;
}

/* S582 — Coaching in prima schermata: il pattern piu' forte.
   Bordo oro a sinistra come le card del coaching: e' la stessa materia, e
   deve riconoscersi come tale. Nessuna icona, nessun colore d'allarme —
   non e' un avviso, e' un'osservazione. */
.dash-coach { border-left: 3px solid var(--gold); }
.coach-frase {
  font-size: 0.95rem;
  line-height: 1.5;
  color: var(--text-primary);
}
.coach-fonte {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  font-size: 0.7rem;
  color: var(--text-muted);
}
.coach-link { margin-left: auto; color: var(--gold); text-decoration: none; }
.coach-link:hover { text-decoration: underline; }

/* S582 — Sentinelle vicine a scattare. La distanza in mono a destra: e' il
   numero che si scorre con l'occhio, e la colonna deve restare dritta. */
.vd-riga {
  display: flex; align-items: center; gap: 10px;
  padding: 7px 0; border-bottom: 1px solid var(--border-subtle);
  text-decoration: none; color: inherit;
}
.vd-riga:last-child { border-bottom: none; }
.vd-riga:hover .vd-label { color: var(--gold); }
.vd-testo { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.vd-label {
  font-size: 0.8rem; color: var(--text-primary);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.vd-tesi {
  font-size: 0.66rem; color: var(--text-muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.vd-dist { font-size: 0.8rem; color: var(--text-secondary); flex: 0 0 auto; }
.vd-scattata {
  flex: 0 0 auto; font-size: 0.62rem; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--gold); background: rgba(201, 168, 76, 0.14);
  border: 1px solid rgba(201, 168, 76, 0.3); border-radius: 4px; padding: 1px 6px;
}

/* S582 — la chart del valore. Il tratto VISSUTO e' pieno e ha l'area sotto;
   quello RICOSTRUITO e' tenue e tratteggiato: la differenza si legge senza
   leggenda, ed e' una differenza di natura del dato, non di stile. */
.vc { display: block; width: 100%; overflow: visible; }
.vc path { fill: none; }
.vc .vc-vivo { stroke: var(--gold); stroke-width: 2; stroke-linejoin: round; }
.vc .vc-ric {
  stroke: var(--gold-dim, #8b7b3a); stroke-width: 1.5;
  stroke-dasharray: 3 3; opacity: 0.75;
}
.vc .vc-area { fill: rgba(201, 168, 76, 0.13); stroke: none; }
.vc .vc-p-su { fill: var(--green); }
.vc .vc-p-giu { fill: var(--red); }
.vc text { font-family: var(--font-numbers); font-size: 9px; fill: var(--text-muted); }
.vc-nota { margin-top: 6px; font-size: 0.62rem; color: var(--text-muted); }

/* S582 — «Mentre non c'eri»: la dashboard come rientro. In cima e col bordo
   oro perche' e' la prima cosa da leggere, ma senza colori d'allarme: sono
   fatti, non avvisi. */
.dash-rientro { border-left: 3px solid var(--gold); }
.rt-quando {
  font-family: var(--font-numbers); font-size: 0.68rem; color: var(--text-muted);
}
.rt-riga {
  display: flex; align-items: center; gap: 10px; padding: 7px 0;
  border-bottom: 1px solid var(--border-subtle);
  text-decoration: none; color: inherit;
}
.rt-riga:last-child { border-bottom: none; }
.rt-testo { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.rt-forte {
  font-size: 0.82rem; color: var(--text-primary);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.rt-sotto {
  font-size: 0.66rem; color: var(--text-muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
a.rt-riga:hover .rt-forte { color: var(--gold); }

/* S582 — una card che è tutta un link. Serve a non promettere un gesto con
   un bersaglio di dieci pixel in un angolo. */
.card-cliccabile { display: block; text-decoration: none; color: inherit; }
.card-cliccabile:hover { border-color: rgba(201, 168, 76, 0.45); }
.card-cliccabile:hover .card-title { color: var(--gold); }

/* Analytics — le barre (S582). Una cifra da sola non dice se è tanto o poco;
   una barra piena per tre quarti si capisce prima di leggerla. */
.an-blocco { margin-bottom: 12px; }
.an-blocco:last-of-type { margin-bottom: 6px; }
.an-testa { display: flex; align-items: baseline; justify-content: space-between; }
.an-label { font-size: 0.74rem; color: var(--text-secondary); }
.an-val { font-size: 0.9rem; font-weight: 700; }
.an-barra {
  margin-top: 5px; height: 6px; border-radius: 3px;
  background: rgba(255, 255, 255, 0.06); overflow: hidden;
}
.an-barra i { display: block; height: 100%; border-radius: 3px; transition: width 400ms ease; }
.an-nota { margin-top: 3px; font-size: 0.62rem; color: var(--text-muted); }

/* Profezie — chi l'ha detta e cosa dice (S582). */
.dp-corpo { display: flex; flex-direction: column; min-width: 0; flex: 1; gap: 2px; }
.dp-riga1 { display: flex; align-items: center; gap: 6px; min-width: 0; }
.dp-chi {
  font-size: 0.62rem; color: var(--gold); background: rgba(201, 168, 76, 0.12);
  border-radius: 3px; padding: 1px 5px; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; max-width: 44%;
}
.dp-testo {
  font-size: 0.66rem; color: var(--text-muted); line-height: 1.35;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}

/* S582 — Watchlist: la riga con la sparkline, e gli stili tolti da inline.
   Erano dichiarati su ogni riga, quindi ripetuti a ogni titolo e intoccabili
   senza rileggere il JS. */
.wl-category { margin-bottom: 12px; }
.wl-category:last-child { margin-bottom: 0; }

/* S627 — la testata di una lista: si apre, si chiude, si rinomina.
   Il nome resta maiuscolo come da S582, ed è per questo che «USA» e «Usa»
   sembravano la stessa lista: qui sotto una differenza di grafia non si vede.
   Adesso non può più capitare (l'unicità è nel database, senza maiuscole), ma
   la ragione per cui è stato invisibile per due settimane sta in questa riga. */
.wl-cat-testa {
  display: flex; align-items: baseline; gap: 6px;
  padding: 3px 2px; margin-bottom: 4px; cursor: pointer;
  border-bottom: 1px solid var(--border-subtle);
}
.wl-cat-testa:hover .wl-cat-nome { color: var(--gold); }
.wl-cat-freccia { font-size: 0.6rem; color: var(--text-muted); flex: 0 0 auto; }
.wl-cat-nome {
  font-family: var(--font-numbers); font-size: 0.64rem; text-transform: uppercase;
  letter-spacing: 0.1em; color: var(--text-muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.wl-cat-conta {
  font-family: var(--font-numbers); font-size: 0.6rem; color: var(--text-muted);
  opacity: 0.6; margin-left: auto; flex: 0 0 auto;
}
.wl-cat-rinomina {
  background: none; border: none; color: var(--text-muted); cursor: pointer;
  font-size: 0.75rem; padding: 0 2px; flex: 0 0 auto; line-height: 1;
}
.wl-cat-rinomina:hover { color: var(--gold); }
.wl-chiusa .wl-cat-corpo { display: none; }

/* Le liste nella finestra «aggiungi»: si toccano invece di scriverle. */
.wl-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.wl-chip {
  background: none; border: 1px solid var(--border); border-radius: 999px;
  color: var(--text-secondary); cursor: pointer;
  font-size: 0.78rem; padding: 4px 12px; transition: all 0.12s;
}
.wl-chip:hover { border-color: var(--gold); color: var(--text-primary); }
.wl-chip[aria-pressed="true"] {
  background: var(--gold); border-color: var(--gold); color: #0a0a0f; font-weight: 600;
}
.wl-chip-nuova { border-style: dashed; }
.wl-row {
  display: flex; align-items: center; gap: 9px;
  padding: 7px 2px; border-bottom: 1px solid var(--border-subtle); cursor: pointer;
}
.wl-row:last-of-type { border-bottom: none; }
.wl-row:hover .wl-tick { color: var(--gold); }
.wl-nome { display: flex; align-items: baseline; gap: 6px; min-width: 0; flex: 1; }
.wl-tick { font-weight: 600; font-size: 0.82rem; flex-shrink: 0; }
.wl-desc {
  font-size: 0.68rem; color: var(--text-muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.wl-spark { flex: 0 0 auto; opacity: 0.85; }
.wl-spark path { fill: none; stroke-width: 1.4; stroke-linejoin: round; stroke-linecap: round; }
.wl-spark-su { stroke: var(--green); }
.wl-spark-giu { stroke: var(--red); }
.wl-prezzo { display: flex; flex-direction: column; align-items: flex-end; flex: 0 0 auto; }
.wl-val { font-size: 0.8rem; }
.wl-var { font-size: 0.68rem; }
.wl-del {
  background: none; border: none; color: var(--text-muted); cursor: pointer;
  font-size: 1em; padding: 2px 4px; flex: 0 0 auto; opacity: 0;
  transition: opacity 150ms ease;
}
.wl-row:hover .wl-del, .wl-del:focus { opacity: 1; }
/* ⚠️ S627 — su un telefono il passaggio del mouse NON ESISTE, quindi questa
   × non si è mai vista da mobile: c'era, occupava il suo spazio, e nessuno
   poteva sapere che si potesse premere. È il difetto già nominato per il
   treemap a S582 («se reagisce al tocco deve produrre qualcosa») visto dal
   lato opposto — qui produceva, ma non si faceva vedere. Dove il puntatore
   non c'è, si mostra sempre, un po' in ombra per non gridare. */
@media (hover: none) {
  .wl-del { opacity: 0.45; }
}

/* S582 — Progetti: i cinque gradini delle fasi. La lunghezza del pieno dice
   quanto sei avanti senza dover conoscere i nomi delle fasi. */
.pj-corpo { display: flex; flex-direction: column; gap: 5px; min-width: 0; flex: 1; }
.pj-gradini { display: flex; gap: 3px; }
.pj-gradini i {
  display: block; width: 15px; height: 3px; border-radius: 2px;
  background: rgba(255, 255, 255, 0.10);
}
.pj-gradini i.pj-on { background: var(--gold); }

/* Note: la spilla è un filetto, non un'emoji; e si legge l'inizio del testo. */
.nota-corpo { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.nota-fissata { border-left: 2px solid var(--gold); padding-left: 7px; }
.nota-anteprima {
  font-size: 0.66rem; color: var(--text-muted); line-height: 1.3;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* S627 — Richieste di invito: una tabella su schermo largo, SCHEDE sul
   telefono.

   Il difetto, e il modo in cui si è visto: il Sacerdote riceve su Telegram la
   richiesta di un amico che ci pensava da mesi, apre il pannello dal telefono
   e trova l'email spezzata una lettera per riga («stein v65 @g mail. com»),
   mentre i bottoni «Invita» e «Rifiuta» stanno fuori dallo schermo dietro uno
   scorrimento orizzontale che nessuno pensa di fare. La richiesta si vedeva e
   non si poteva accogliere — e il telefono è esattamente dove arriva
   l'avviso che ti manda lì.

   Cinque colonne non entrano in 390 pixel, e nessuna larghezza le fa entrare:
   sotto la soglia la riga smette di essere una riga e diventa una scheda. Su
   schermo largo non cambia niente. L'ordine dentro la scheda NON è quello del
   markup — `order` mette in cima chi è e come sta, poi quando, poi cosa ha
   scritto, e i due bottoni in fondo, larghi, dove il pollice li trova. */
.inv-scroll { overflow-x: auto; }
.inv-tabella { width: 100%; border-collapse: collapse; font-size: 0.85rem; }
.inv-tabella thead tr {
  text-align: left; color: var(--text-secondary);
  font-size: 0.75rem; border-bottom: 1px solid var(--border);
}
.inv-tabella th { padding: 6px; }
.inv-riga { border-bottom: 1px solid var(--border); vertical-align: top; }
.inv-c { padding: 10px 6px; }
.inv-c-quando { white-space: nowrap; color: var(--text-secondary); font-size: 0.78rem; }
/* ⚠️ Era `word-break: break-all`, ed è LUI che spezzava l'indirizzo lettera
   per lettera: rompe ovunque, anche quando non serve. `anywhere` rompe solo
   se la parola non ci sta comunque. */
.inv-c-email strong { overflow-wrap: anywhere; }
.inv-locale { color: var(--text-muted); font-size: 0.72rem; }
.inv-c-msg { font-size: 0.84rem; }
.inv-c-azioni { white-space: nowrap; text-align: right; }
.inv-c-azioni .btn { padding: 4px 12px; font-size: 0.78rem; }
.inv-gestita { color: var(--text-secondary); font-size: 0.75rem; }

@media (max-width: 760px) {
  .inv-scroll { overflow-x: visible; }
  .inv-tabella, .inv-tabella tbody { display: block; }
  .inv-tabella thead { display: none; }
  .inv-riga {
    display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px;
    padding: 12px 2px; border-bottom: 1px solid var(--border);
  }
  .inv-c { display: block; padding: 0; }
  .inv-c-email { order: 1; flex: 1 1 auto; min-width: 0; }
  .inv-c-stato { order: 2; flex: 0 0 auto; }
  .inv-c-quando { order: 3; flex: 1 0 100%; font-size: 0.72rem; }
  .inv-c-msg { order: 4; flex: 1 0 100%; margin-top: 6px; }
  .inv-c-azioni {
    order: 5; flex: 1 0 100%; margin-top: 10px;
    display: flex; gap: 8px; white-space: normal;
  }
  /* Su un telefono un bersaglio da dieci pixel in un angolo non esiste
     (§ le tre regole di una cella che porta un dato): i due gesti prendono
     metà riga ciascuno e si premono senza mirare. */
  .inv-c-azioni .btn { flex: 1 1 0; padding: 9px 12px; font-size: 0.82rem; }
}