/* Off Script - Control Room
   Wears the real Architect design system (two skins - Architect and Off
   Script - each with a light and a dark variant) instead of a hand-rolled
   palette. Zero build step, zero Tailwind: the tokens below are a PLAIN CSS
   custom-property port of architect-panel-v0/app/globals.css - that file is
   the source of truth for every color value here. If a color needs to
   change, change it there first and re-port; do not hand-edit a hex below
   without updating the source too. */

/* ============================================================= */
/* Design tokens - ported from architect-panel-v0/app/globals.css          */
/* ============================================================= */

:root {
  color-scheme: dark;
  --radius: 1rem;
  --app-font-sans: ui-sans-serif, system-ui, -apple-system, "SF Pro Text",
    "Helvetica Neue", Arial, sans-serif;
  --app-font-display: var(--app-font-sans);

  /* CP-local additions - the Architect design system does not define a
     monospace token (it has no use for one); the CP's micro-labels
     (captions, badges, timestamps) are set in mono in both skins, so this
     stays a local, skin-independent addition rather than a ported value. */
  --font-mono: ui-monospace, "SF Mono", "SFMono-Regular", Menlo, Consolas,
    "Liberation Mono", monospace;
  --nav-h: 62px;
}

/* Local convenience aliases so the component rules below can keep reading
   like normal CSS (font-family: var(--font-display)) while still sourcing
   the value from the ported --app-font-* tokens. Pure alias, no new value. */
:root {
  --font-display: var(--app-font-display);
  --font-body: var(--app-font-sans);
}

/* SKIN: Architect - near-black, single amber accent, sans display font */
[data-skin="architect"] {
  --app-font-display: var(--app-font-sans);
  --radius: 1rem;

  /* light variant */
  --background: #f4f4f5;
  --foreground: #17171a;
  --card: #ffffff;
  --card-foreground: #17171a;
  --popover: #ffffff;
  --popover-foreground: #17171a;
  --muted: #ededf0;
  --muted-foreground: #6b6b73;
  --border: #e2e2e6;
  --input: #e2e2e6;
  --ring: #ff9f0a;

  --brand: #f08c00;
  --brand-foreground: #ffffff;
  --brand-soft: rgba(240, 140, 0, 0.12);

  --sage: #7f9b7f;
  --amber: #d8962f;
  --brick: #b4453a;
  --brick-soft: rgba(180, 69, 58, 0.12);
}

[data-skin="architect"].dark {
  color-scheme: dark;
  --background: #0b0b0d;
  --foreground: #f2f2f4;
  --card: #151517;
  --card-foreground: #f2f2f4;
  --popover: #161618;
  --popover-foreground: #f2f2f4;
  --muted: #1d1d20;
  --muted-foreground: #8a8a91;
  --border: rgba(255, 255, 255, 0.08);
  --input: rgba(255, 255, 255, 0.12);
  --ring: #ff9f0a;

  --brand: #ff9f0a;
  --brand-foreground: #1a1200;
  --brand-soft: rgba(255, 159, 10, 0.14);

  --sage: #869e86;
  --amber: #d8a04a;
  --brick: #c15b4f;
  --brick-soft: rgba(193, 91, 79, 0.16);
}

/* SKIN: Off Script - warm cream, ember accent, serif display font */
[data-skin="offscript"] {
  --app-font-display: "Iowan Old Style", "Palatino Linotype", Palatino,
    "Book Antiqua", Georgia, serif;
  --radius: 1.15rem;

  /* light (cream) variant */
  --background: #f7f6f3;
  --foreground: #241c17;
  --card: #fff6ef;
  --card-foreground: #241c17;
  --popover: #fffaf5;
  --popover-foreground: #241c17;
  --muted: #efe9e2;
  --muted-foreground: #7c6f64;
  --border: #e6ddd2;
  --input: #e6ddd2;
  --ring: #f4530c;

  --brand: #f4530c;
  --brand-foreground: #fff6ef;
  --brand-soft: rgba(244, 83, 12, 0.1);

  --sage: #7d9273;
  --amber: #c98a2b;
  --brick: #a83f2e;
  --brick-soft: rgba(168, 63, 46, 0.1);
}

[data-skin="offscript"].dark {
  color-scheme: dark;
  --background: #1a1512;
  --foreground: #f2e9e1;
  --card: #241d18;
  --card-foreground: #f2e9e1;
  --popover: #251e19;
  --popover-foreground: #f2e9e1;
  --muted: #2a221c;
  --muted-foreground: #a99b8e;
  --border: rgba(255, 255, 255, 0.08);
  --input: rgba(255, 255, 255, 0.12);
  --ring: #f4530c;

  --brand: #f4530c;
  --brand-foreground: #1a1512;
  --brand-soft: rgba(244, 83, 12, 0.16);

  --sage: #8ba07f;
  --amber: #d69b45;
  --brick: #c15948;
  --brick-soft: rgba(193, 89, 72, 0.16);
}

/* Minor addition beyond the literal port: the source never sets an explicit
   light color-scheme (only the .dark blocks re-affirm color-scheme: dark),
   so native form controls/scrollbars would stay dark-styled in light mode.
   The CP actually ships the light toggle end-to-end, so this one line closes
   that gap; it changes no token value. */
:root.light { color-scheme: light; }

/* CP-local derived token: the system defines --brand-soft and --brick-soft
   (translucent washes) but no translucent wash for --sage - badge-green
   needs one. Derived via color-mix from the ported --sage itself (never a
   hardcoded hex), so it still adapts correctly per skin and per mode. */
:root {
  --sage-soft: color-mix(in srgb, var(--sage) 18%, transparent);
}

* , *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--background);
  color: var(--foreground);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
  transition: background-color 0.15s ease, color 0.15s ease;
}

body {
  overflow-x: hidden;
}

a { color: var(--brand); }

button {
  font-family: inherit;
  cursor: pointer;
}

.hidden, [hidden] { display: none !important; }

/* ---------------------------------------------------------------------- */
/* Login view                                                              */
/* ---------------------------------------------------------------------- */

#login-view {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  background:
    radial-gradient(ellipse at 50% 0%, var(--brand-soft), transparent 60%),
    var(--background);
}

.login-card {
  width: 100%;
  max-width: 360px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 2.4rem 1.8rem;
  text-align: center;
}

.login-eyebrow {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted-foreground);
  margin: 0 0 0.6rem;
}

.login-title {
  font-family: var(--font-display);
  font-size: 1.6rem;
  font-weight: 500;
  color: var(--foreground);
  margin: 0 0 1.8rem;
}

.login-form input[type="password"] {
  width: 100%;
  background: var(--background);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--foreground);
  font-family: var(--font-body);
  font-size: 1rem;
  padding: 0.75rem 0.9rem;
  outline: none;
  transition: border-color 0.15s;
}

.login-form input[type="password"]:focus { border-color: var(--brand); }

.login-form button {
  width: 100%;
  margin-top: 0.9rem;
  background: var(--brand);
  color: var(--brand-foreground);
  border: none;
  border-radius: 8px;
  padding: 0.75rem 0.9rem;
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  transition: opacity 0.15s, transform 0.1s;
}

.login-form button:hover:not(:disabled) { opacity: 0.88; }
.login-form button:disabled { opacity: 0.55; cursor: not-allowed; }

.login-error {
  margin-top: 0.9rem;
  font-size: 0.82rem;
  color: var(--brick);
  min-height: 1.1em;
}

@keyframes shake {
  10%, 90% { transform: translateX(-1px); }
  20%, 80% { transform: translateX(2px); }
  30%, 50%, 70% { transform: translateX(-4px); }
  40%, 60% { transform: translateX(4px); }
}

.login-card.shake { animation: shake 0.45s; }

/* ---------------------------------------------------------------------- */
/* App shell                                                                */
/* ---------------------------------------------------------------------- */

#app-view {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.1rem;
  border-bottom: 1px solid var(--border);
  background: var(--card);
  position: sticky;
  top: 0;
  z-index: 10;
}

.topbar-title {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 500;
  color: var(--foreground);
  letter-spacing: 0.01em;
}

.topbar-title .dot { color: var(--brand); }

.topbar-actions {
  display: flex;
  align-items: center;
  gap: 0.7rem;
}

.refresh-btn {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--muted-foreground);
  border-radius: 999px;
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  transition: transform 0.4s ease, border-color 0.15s, color 0.15s;
}

.refresh-btn:hover { border-color: var(--brand); color: var(--brand); }
.refresh-btn.spinning { animation: spin 0.7s linear; }

@keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

.last-sync {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  letter-spacing: 0.04em;
  color: var(--muted-foreground);
  text-transform: uppercase;
}

.app-body {
  flex: 1;
  display: flex;
  min-height: 0;
}

#content {
  flex: 1;
  padding: 1rem 1rem calc(var(--nav-h) + 1.5rem);
  max-width: 900px;
  margin: 0 auto;
  width: 100%;
}

.view-section { display: none; }
.view-section.active { display: block; animation: fadein 0.25s ease; }

@keyframes fadein { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

.section-title {
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 500;
  margin: 0.2rem 0 1rem;
  color: var(--foreground);
}

/* Nav - bottom bar on mobile, sidebar on desktop */
nav#nav {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  height: var(--nav-h);
  display: flex;
  background: var(--card);
  border-top: 1px solid var(--border);
  z-index: 20;
}

nav#nav .nav-btn {
  flex: 1;
  background: transparent;
  border: none;
  color: var(--muted-foreground);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.2rem;
  font-size: 1.1rem;
  transition: color 0.15s;
}

nav#nav .nav-btn .nav-label {
  font-family: var(--font-mono);
  font-size: 0.58rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

nav#nav .nav-btn.active { color: var(--brand); }

/* ---------------------------------------------------------------------- */
/* Cards + shared components                                               */
/* ---------------------------------------------------------------------- */

.card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.1rem 1.15rem;
  margin-bottom: 0.9rem;
}

.card-label {
  font-family: var(--font-mono);
  font-size: 0.64rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted-foreground);
  margin: 0 0 0.5rem;
}

.empty-state {
  color: var(--muted-foreground);
  font-family: var(--font-display);
  font-style: italic;
  font-size: 0.98rem;
  line-height: 1.5;
  padding: 0.4rem 0.1rem 0.2rem;
}

.hairline {
  border: none;
  border-top: 1px solid var(--border);
  margin: 0.9rem 0;
}

.row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
  padding: 0.55rem 0;
  border-bottom: 1px solid var(--border);
}

.row:last-child { border-bottom: none; }

.row-main { min-width: 0; }
.row-name { color: var(--foreground); font-size: 0.94rem; }
.row-sub { color: var(--muted-foreground); font-size: 0.78rem; margin-top: 0.15rem; }
.row-amount { font-family: var(--font-mono); color: var(--brand); font-weight: 600; white-space: nowrap; }

.badge {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.18rem 0.5rem;
  border-radius: 999px;
}

.badge-red { background: var(--brick-soft); color: var(--brick); }
.badge-amber { background: var(--brand-soft); color: var(--brand); }
.badge-muted { background: var(--muted); color: var(--muted-foreground); }
.badge-green { background: var(--sage-soft); color: var(--sage); }

.mailto-link {
  font-size: 0.78rem;
  color: var(--brand);
  text-decoration: underline;
}

/* Pulse -------------------------------------------------------------- */

.pulse-kpi {
  display: flex;
  gap: 0.8rem;
  flex-wrap: wrap;
}

.kpi {
  flex: 1;
  min-width: 130px;
  background: var(--muted);
  border-radius: 8px;
  padding: 0.8rem 0.9rem;
}

.kpi-value {
  font-family: var(--font-display);
  font-size: 1.5rem;
  color: var(--foreground);
}

.kpi-value.amber { color: var(--brand); }

.kpi-caption {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted-foreground);
  margin-top: 0.2rem;
}

/* Conti / money ------------------------------------------------------ */

.range-toggle {
  display: flex;
  gap: 0.4rem;
  margin-bottom: 0.9rem;
}

.range-btn {
  flex: 1;
  background: var(--muted);
  border: 1px solid transparent;
  color: var(--muted-foreground);
  border-radius: 8px;
  padding: 0.5rem 0.4rem;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transition: border-color 0.15s, color 0.15s;
}

.range-btn.active {
  border-color: var(--brand);
  color: var(--brand);
}

.king-number {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 0.9rem;
}

.king-piece { flex: 1; min-width: 100px; }

.king-piece .king-label {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted-foreground);
}

.king-piece .king-value {
  font-family: var(--font-display);
  font-size: 1.65rem;
  margin-top: 0.15rem;
}

.king-piece.in .king-value { color: var(--sage); }
.king-piece.out .king-value { color: var(--brick); }
.king-piece.net .king-value { color: var(--brand); }

.chart-wrap {
  position: relative;
  width: 100%;
}

.chart-wrap svg { width: 100%; height: auto; display: block; }

/* Hand-drawn SVG money chart - colors come from CSS classes (not inline
   fill/stroke attributes) so the same markup re-themes for free. */
.money-bar { fill: var(--brand); fill-opacity: 0.35; }
.money-line { fill: none; stroke: var(--brand); stroke-width: 2; }
.money-dot { fill: var(--card); stroke: var(--brand); stroke-width: 2; cursor: pointer; }
.money-axis-label {
  fill: var(--muted-foreground);
  font-size: 9px;
  font-family: var(--font-mono);
}

.chart-tooltip {
  position: absolute;
  background: var(--popover);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 0.5rem 0.65rem;
  font-size: 0.76rem;
  line-height: 1.4;
  color: var(--popover-foreground);
  pointer-events: none;
  transform: translate(-50%, -110%);
  white-space: nowrap;
  z-index: 5;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.4);
}

.chart-tooltip .tt-amount { color: var(--brand); font-family: var(--font-mono); }

.spend-row .row-name { text-transform: capitalize; }

.split-bar {
  display: flex;
  height: 8px;
  border-radius: 999px;
  overflow: hidden;
  margin: 0.5rem 0 0.4rem;
  background: var(--muted);
}

.split-bar .fill-recurring { background: var(--brand); }
.split-bar .fill-oneoff { background: var(--muted-foreground); }

.split-legend {
  display: flex;
  gap: 1rem;
  font-size: 0.74rem;
  color: var(--muted-foreground);
}

.split-legend .sw {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 2px;
  margin-right: 0.3rem;
  vertical-align: middle;
}

.sw.recurring { background: var(--brand); }
.sw.oneoff { background: var(--muted-foreground); }

/* Persone -------------------------------------------------------------- */

.section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
  margin-bottom: 0.2rem;
}

.section-header .section-title { margin: 0; }

.add-person-btn {
  background: transparent;
  border: 1px solid var(--brand);
  color: var(--brand);
  border-radius: 999px;
  padding: 0.4rem 0.85rem;
  font-size: 0.78rem;
  white-space: nowrap;
  transition: background 0.15s;
}

.add-person-btn:hover { background: var(--brand-soft); }

.admin-panel {
  animation: fadein 0.2s ease;
}

.form-field { margin-bottom: 0.7rem; }

.form-label {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted-foreground);
  margin-bottom: 0.35rem;
}

.form-field input[type="text"],
.form-field input[type="email"],
.form-field select {
  width: 100%;
  background: var(--background);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--foreground);
  font-family: var(--font-body);
  font-size: 0.92rem;
  padding: 0.6rem 0.75rem;
  outline: none;
  transition: border-color 0.15s;
}

.form-field input:focus,
.form-field select:focus { border-color: var(--brand); }

.form-hint {
  font-size: 0.72rem;
  color: var(--muted-foreground);
  margin-top: 0.3rem;
}

.grant-checks {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}

.grant-check {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  background: var(--muted);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 0.35rem 0.7rem;
  font-size: 0.78rem;
  color: var(--muted-foreground);
  cursor: pointer;
}

.grant-check input { accent-color: var(--brand); }

.form-actions {
  display: flex;
  gap: 0.6rem;
  margin-top: 0.9rem;
  flex-wrap: wrap;
}

.btn {
  border-radius: 999px;
  padding: 0.5rem 1rem;
  font-size: 0.82rem;
  font-family: inherit;
  border: 1px solid transparent;
  transition: background 0.15s, opacity 0.15s;
}

.btn:disabled { opacity: 0.5; cursor: default; }

.btn-primary { background: var(--brand); color: var(--brand-foreground); font-weight: 600; }
.btn-primary:hover:not(:disabled) { opacity: 0.88; }

.btn-ghost {
  background: transparent;
  border-color: var(--border);
  color: var(--muted-foreground);
}
.btn-ghost:hover:not(:disabled) { border-color: var(--brand); color: var(--brand); }

.btn-danger {
  background: transparent;
  border-color: var(--brick);
  color: var(--brick);
}
.btn-danger:hover:not(:disabled) { background: var(--brick-soft); }

.btn-small { padding: 0.32rem 0.7rem; font-size: 0.72rem; }

.deeplink-box {
  margin-top: 0.8rem;
  background: var(--muted);
  border-radius: 8px;
  padding: 0.7rem 0.8rem;
}

.deeplink-url {
  font-family: var(--font-mono);
  font-size: 0.76rem;
  color: var(--brand);
  word-break: break-all;
}

.deeplink-hint {
  font-size: 0.76rem;
  color: var(--muted-foreground);
  margin-top: 0.5rem;
  font-style: italic;
  font-family: var(--font-display);
}

.copy-btn { margin-top: 0.55rem; }

.inline-feedback {
  font-size: 0.78rem;
  margin-top: 0.5rem;
  min-height: 1.1em;
}

.inline-feedback.pending { color: var(--muted-foreground); }
.inline-feedback.ok { color: var(--sage); }
.inline-feedback.error { color: var(--brick); }
/* Non-blocking warning: the grants + link are real, only the GHL sync failed
 * (add-person). Amber, not brick - it is not an outright failure. */
.inline-feedback.warn { color: var(--amber, #b8860b); }

.add-person-name-hint {
  color: var(--sage);
  font-style: italic;
}

.person-card {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.8rem;
}

.person-name {
  font-family: var(--font-display);
  font-size: 1.02rem;
  color: var(--foreground);
}

.person-meta {
  color: var(--muted-foreground);
  font-size: 0.78rem;
  margin-top: 0.25rem;
  line-height: 1.5;
}

.person-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.4rem;
}

.send-video-btn {
  background: var(--muted);
  border: 1px solid var(--brand);
  color: var(--brand);
  border-radius: 999px;
  padding: 0.35rem 0.75rem;
  font-size: 0.74rem;
  white-space: nowrap;
  transition: background 0.15s;
}

/* Sala macchine (per-person admin panel) --------------------------------- */

.person-card { flex-direction: column; }

.person-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.8rem;
  width: 100%;
}

.sala-toggle-btn {
  background: var(--muted);
  border: 1px solid var(--brand);
  color: var(--brand);
  border-radius: 999px;
  padding: 0.35rem 0.7rem;
  font-size: 0.74rem;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 0.3rem;
  transition: background 0.15s;
}

.sala-toggle-btn:hover { background: var(--brand-soft); }

.sala-panel {
  width: 100%;
  margin-top: 0.9rem;
  padding-top: 0.9rem;
  border-top: 1px solid var(--border);
  display: none;
}

.sala-panel.open { display: block; animation: fadein 0.2s ease; }

.sala-group { margin-bottom: 0.8rem; }

.sala-group-label {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted-foreground);
  margin-bottom: 0.45rem;
}

.sala-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.grant-active-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  padding: 0.3rem 0;
}

.grant-active-name {
  font-size: 0.82rem;
  color: var(--muted-foreground);
  font-family: var(--font-mono);
  text-transform: capitalize;
}

.sala-danger-zone {
  margin-top: 1rem;
  padding-top: 0.8rem;
  border-top: 1px dashed var(--brick-soft);
}

/* Modal ------------------------------------------------------------------ */

.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.2rem;
  z-index: 100;
}

.modal-card {
  width: 100%;
  max-width: 420px;
  background: var(--card);
  border: 1px solid var(--brick-soft);
  border-radius: var(--radius);
  padding: 1.4rem 1.3rem;
}

.modal-title {
  font-family: var(--font-display);
  font-size: 1.15rem;
  color: var(--foreground);
  margin: 0 0 0.6rem;
}

.modal-body {
  font-size: 0.88rem;
  color: var(--muted-foreground);
  line-height: 1.55;
  margin: 0 0 0.9rem;
}

.modal-body strong { color: var(--brick); }

.send-video-btn:hover:not(:disabled) { background: var(--brand-soft); }
.send-video-btn:disabled { opacity: 0.5; cursor: default; }

/* Il filo - drill-down sheet/modal ---------------------------------------- */

/* Mobile-first: the event detail opens as a bottom sheet (fills the width,
   docked to the bottom edge, only the top corners rounded). The >=860px
   media query below turns it back into a centered modal, mirroring the
   existing .modal-overlay/.modal-card pattern used by the delete confirm. */
.modal-overlay.sheet-overlay {
  align-items: flex-end;
  padding: 0;
}

.event-modal-card {
  max-width: none;
  width: 100%;
  max-height: 85vh;
  overflow-y: auto;
  border-radius: var(--radius) var(--radius) 0 0;
  border-color: var(--border);
  padding: 1.3rem 1.2rem 1.6rem;
  animation: sheet-up 0.18s ease-out;
}

@keyframes sheet-up {
  from { transform: translateY(12%); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

.event-modal-card:focus { outline: none; }

.event-modal-close {
  position: absolute;
  top: 0.9rem;
  right: 1rem;
}

.event-modal-header {
  position: relative;
  padding-right: 2rem;
  margin-bottom: 0.9rem;
}

.event-modal-title {
  font-family: var(--font-display);
  font-size: 1.05rem;
  color: var(--foreground);
  margin: 0 0 0.3rem;
  line-height: 1.35;
}

.event-modal-meta {
  font-size: 0.78rem;
  color: var(--muted-foreground);
}

.event-modal-loading,
.event-modal-error {
  color: var(--muted-foreground);
  font-family: var(--font-display);
  font-style: italic;
  padding: 1rem 0;
}

.event-modal-error { color: var(--brick); }

.exchange-list {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.exchange-line {
  max-width: 88%;
  padding: 0.6rem 0.75rem;
  border-radius: 0.85rem;
  background: var(--muted);
  border: 1px solid var(--border);
}

.exchange-line.side-off-script,
.exchange-line.side-danny {
  align-self: flex-start;
  border-bottom-left-radius: 0.2rem;
}

.exchange-line.side-persona {
  align-self: flex-end;
  background: var(--brand-soft);
  border-color: transparent;
  border-bottom-right-radius: 0.2rem;
}

.exchange-label {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted-foreground);
  margin-bottom: 0.25rem;
}

.exchange-text {
  font-size: 0.9rem;
  line-height: 1.5;
  white-space: pre-wrap;
  word-break: break-word;
}

/* A row with a real exchange behind it - the only rows that get any
   clickable affordance at all (has_detail: false rows stay plain, per
   HANDOFF: a dead click is worse than no click). */
.feed-row.clickable {
  cursor: pointer;
  border-radius: 8px;
  transition: background-color 0.12s ease;
}
.feed-row.clickable:hover { background: var(--brand-soft); }
.feed-row.clickable:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
  background: var(--brand-soft);
}

/* The feed row is space-between: without this the middle column keeps its
   auto width and the titles float to the centre, so the feed reads like a
   poster instead of a list you scan down the left edge. Scoped to .feed-row
   on purpose - .row-main is shared with the person cards. */
.feed-row .row-main { flex: 1; min-width: 0; }

.feed-title {
  min-width: 0;
  font-size: 0.9rem;
  color: var(--foreground);
  line-height: 1.4;
}

.feed-right {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.feed-chevron {
  flex: 0 0 auto;
  color: var(--muted-foreground);
  font-size: 0.9rem;
}

@media (min-width: 860px) {
  .modal-overlay.sheet-overlay {
    align-items: center;
    padding: 1.2rem;
  }

  .event-modal-card {
    max-width: 460px;
    max-height: 80vh;
    border-radius: var(--radius);
    animation: none;
  }
}

/* Sprint ---------------------------------------------------------------- */

.sprint-row.stalled { border-left: 2px solid var(--brick); padding-left: 0.6rem; }

.stalled-tag {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 0.8rem;
  color: var(--brick);
}

/* Video timeline ---------------------------------------------------------- */

.video-card { }

.video-target {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--muted-foreground);
  margin-bottom: 0.6rem;
}

.video-steps {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  margin-bottom: 0.6rem;
}

.vstep {
  flex: 1;
  text-align: center;
}

.vstep .vstep-dot {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--muted);
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 0.3rem;
  font-size: 0.85rem;
  color: var(--muted-foreground);
}

.vstep.done .vstep-dot {
  background: var(--brand-soft);
  border-color: var(--brand);
  color: var(--brand);
}

.vstep .vstep-label {
  font-family: var(--font-mono);
  font-size: 0.55rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--muted-foreground);
}

.vstep.done .vstep-label { color: var(--foreground); }

.vstep-line {
  flex: 0 0 16px;
  height: 1px;
  background: var(--border);
  margin-top: -18px;
}

.vstep-line.done { background: var(--brand); }

.reply-text {
  background: var(--muted);
  border-radius: 8px;
  padding: 0.6rem 0.75rem;
  font-size: 0.86rem;
  color: var(--foreground);
  font-style: italic;
  margin-top: 0.4rem;
}

/* Filo / feed -------------------------------------------------------------- */

.feed-row {
  display: flex;
  gap: 0.7rem;
  align-items: flex-start;
}

.feed-icon {
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--muted);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
}

.feed-kind {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted-foreground);
}

.feed-time {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  color: var(--muted-foreground);
  white-space: nowrap;
}

/* Opzioni (theme settings) ------------------------------------------------ */

.opzioni-header { margin-bottom: 1.3rem; }

.opzioni-sub {
  color: var(--muted-foreground);
  font-size: 0.92rem;
  margin: 0.35rem 0 0;
}

.opzioni-group { margin-bottom: 1.4rem; }

.opzioni-label {
  font-family: var(--font-mono);
  font-size: 0.64rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted-foreground);
  margin: 0 0 0.6rem;
}

.segmented {
  display: flex;
  gap: 0.35rem;
  border: 1px solid var(--border);
  background: var(--card);
  border-radius: 999px;
  padding: 0.3rem;
}

.segmented-btn {
  flex: 1;
  border: none;
  background: transparent;
  color: var(--muted-foreground);
  border-radius: 999px;
  padding: 0.55rem 0.6rem;
  font-size: 0.85rem;
  font-weight: 600;
  transition: background 0.15s, color 0.15s;
}

.segmented-btn.active { background: var(--brand); color: var(--brand-foreground); }

.skin-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.7rem;
}

.skin-card {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  text-align: left;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1rem;
  color: var(--foreground);
  transition: border-color 0.15s;
}

.skin-card.active { border-color: var(--brand); border-width: 2px; }

.skin-swatch {
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 1rem;
}

/* These two are fixed previews of what each skin looks like (its own dark
   variant), not theme tokens - they must stay constant regardless of the
   currently active skin/mode, exactly like the Architect panel's own
   options-tab preview swatches. */
.skin-swatch-architect { background: #0b0b0d; color: #ff9f0a; }
.skin-swatch-offscript { background: #f7f6f3; color: #f4530c; }

.skin-card-body { min-width: 0; }

.skin-card-name {
  font-family: var(--font-display);
  font-size: 0.98rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

.skin-card-check { display: none; color: var(--brand); }
.skin-card.active .skin-card-check { display: inline; }

.skin-card-desc {
  display: block;
  margin-top: 0.25rem;
  font-size: 0.78rem;
  color: var(--muted-foreground);
  line-height: 1.45;
}

/* ---------------------------------------------------------------------- */
/* Locked / error banners                                                   */
/* ---------------------------------------------------------------------- */

.banner {
  border-radius: 8px;
  padding: 0.7rem 0.9rem;
  font-size: 0.85rem;
  margin-bottom: 0.9rem;
}

.banner-locked {
  background: var(--brick-soft);
  border: 1px solid var(--brick-soft);
  color: var(--brick);
}

/* ---------------------------------------------------------------------- */
/* Desktop layout                                                           */
/* ---------------------------------------------------------------------- */

@media (min-width: 520px) {
  .skin-grid { grid-template-columns: 1fr 1fr; }
}

@media (min-width: 860px) {
  .app-body { flex-direction: row; }

  nav#nav {
    position: static;
    height: auto;
    width: 200px;
    flex-direction: column;
    border-top: none;
    border-right: 1px solid var(--border);
    padding: 1.2rem 0;
    gap: 0.2rem;
  }

  nav#nav .nav-btn {
    /* Undo the mobile `flex: 1` here: horizontally it shares the bar
       between 7 items (right), vertically it stretched each one to fill
       the sidebar, scattering the labels down the whole column with
       Opzioni marooned at the bottom. Pre-existing since the panel's
       first build, caught by looking at it. */
    flex: 0 0 auto;
    flex-direction: row;
    justify-content: flex-start;
    gap: 0.6rem;
    padding: 0.65rem 1.3rem;
    font-size: 1rem;
  }

  nav#nav .nav-btn .nav-label { font-size: 0.68rem; }

  #content {
    padding: 1.6rem 2rem 2.4rem;
    max-width: 1000px;
  }

  .pulse-kpi, .king-number { flex-wrap: nowrap; }
}

@media (min-width: 1180px) {
  #content { max-width: 1120px; }

  .grid-2 {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 1rem;
    align-items: start;
  }
}

/* ---------------------------------------------------------------------- */
/* Control Room v2 - Le persone (table) + Il fascicolo (dossier)            */
/* "la persona al centro" (DESIGN.md 2026-07-17)                           */
/* ---------------------------------------------------------------------- */

/* Le persone - toolbar (search + filter chips) ---------------------------- */

.people-toolbar {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  margin-bottom: 0.9rem;
}

.people-search {
  width: 100%;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--foreground);
  font-family: var(--font-body);
  font-size: 0.9rem;
  padding: 0.55rem 0.9rem;
  outline: none;
  transition: border-color 0.15s;
}

.people-search:focus { border-color: var(--brand); }

.people-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.filter-chip {
  background: var(--muted);
  border: 1px solid transparent;
  color: var(--muted-foreground);
  border-radius: 999px;
  padding: 0.32rem 0.75rem;
  font-size: 0.74rem;
  white-space: nowrap;
  transition: border-color 0.15s, color 0.15s;
}

.filter-chip.active {
  border-color: var(--brand);
  color: var(--brand);
  background: var(--brand-soft);
}

.people-filter-note {
  font-size: 0.78rem;
  color: var(--brick);
  font-style: italic;
  font-family: var(--font-display);
  margin: 0;
}

/* Le persone - table ------------------------------------------------------- */

.people-table-wrap { width: 100%; }

.people-table {
  width: 100%;
  border-collapse: collapse;
}

.people-table thead th {
  text-align: left;
  padding: 0.5rem 0.65rem;
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted-foreground);
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
}

.people-table thead th:hover,
.people-table thead th:focus-visible { color: var(--brand); outline: none; }
.people-table thead th.sort-active { color: var(--brand); }

.people-table tbody tr { border-bottom: 1px solid var(--border); }
.people-table tbody tr:last-child { border-bottom: none; }

.people-table tbody tr.clickable {
  cursor: pointer;
  transition: background-color 0.12s ease;
}

.people-table tbody tr.clickable:hover,
.people-table tbody tr.clickable:focus-visible {
  background: var(--brand-soft);
  outline: none;
}

.people-table td {
  padding: 0.6rem 0.65rem;
  vertical-align: top;
  font-size: 0.86rem;
  color: var(--foreground);
}

.people-name-cell {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.people-name { font-family: var(--font-display); color: var(--foreground); }

.people-spent-cell {
  font-family: var(--font-mono);
  color: var(--muted-foreground);
}

/* Mobile: the table collapses into readable cards, never a horizontal
   scroll (HANDOFF W2 explicit requirement) - each cell becomes a labeled
   row via the data-label attribute the JS already sets on every <td>. */
@media (max-width: 700px) {
  .people-table thead { display: none; }
  .people-table, .people-table tbody, .people-table tr, .people-table td {
    display: block;
    width: 100%;
  }
  .people-table tbody tr {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    margin-bottom: 0.7rem;
    padding: 0.3rem 0.8rem;
  }
  .people-table td {
    border-bottom: none;
    padding: 0.4rem 0;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.7rem;
  }
  .people-table td::before {
    content: attr(data-label);
    flex: 0 0 auto;
    font-family: var(--font-mono);
    font-size: 0.58rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--muted-foreground);
    padding-top: 0.15rem;
  }
}

/* Il fascicolo - navigable view, not a modal ------------------------------- */

.dossier-back-btn { margin-bottom: 0.9rem; }

.dossier-head-card { }

.dossier-name-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-bottom: 0.3rem;
}

.dossier-name {
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 500;
  color: var(--foreground);
  margin: 0;
}

.dossier-email {
  font-family: var(--font-mono);
  font-size: 0.82rem;
  color: var(--muted-foreground);
  margin: 0 0 0.3rem;
  word-break: break-all;
}

.dossier-meta {
  font-size: 0.8rem;
  color: var(--muted-foreground);
  margin: 0 0 0.7rem;
}

.dossier-owns {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-bottom: 0.8rem;
}

.dossier-kpi-row {
  display: flex;
  gap: 0.8rem;
  flex-wrap: wrap;
  margin-bottom: 0.7rem;
}

.dossier-kpi {
  flex: 1;
  min-width: 140px;
  background: var(--muted);
  border-radius: 8px;
  padding: 0.7rem 0.85rem;
}

.dossier-kpi-value {
  font-family: var(--font-display);
  font-size: 1.3rem;
  color: var(--foreground);
}

.dossier-kpi-caption {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted-foreground);
  margin-top: 0.2rem;
}

.dossier-state-line {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 0.92rem;
  color: var(--foreground);
  margin: 0;
  line-height: 1.5;
}

/* Il percorso - the timeline ------------------------------------------------ */

.journey-heading { margin-top: 1.3rem; }

.journey-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-bottom: 0.9rem;
}

.journey-card { display: flex; flex-direction: column; gap: 0.9rem; }

.journey-entry {
  padding-bottom: 0.9rem;
  border-bottom: 1px solid var(--border);
}

.journey-entry:last-child { border-bottom: none; padding-bottom: 0; }

.journey-entry-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.7rem;
  margin-bottom: 0.5rem;
}

.journey-entry-title {
  font-family: var(--font-display);
  font-size: 0.94rem;
  color: var(--foreground);
}

.journey-entry-time {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  color: var(--muted-foreground);
  white-space: nowrap;
}

/* `arrived` (what Off Script sent) and `pressed` (what the person did) are
   the two sides DESIGN calls out by name - visually distinct bubbles, each
   with its own alignment/color, so the distinction reads at a glance without
   needing to parse the label text (same left/right idea as the existing
   .exchange-line side bubbles in the Filo drill-down, deliberately mirrored
   here for a consistent visual language across the panel). */
.journey-bubble {
  max-width: 92%;
  padding: 0.55rem 0.75rem;
  border-radius: 0.8rem;
  margin-top: 0.4rem;
}

.journey-bubble-label {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted-foreground);
  margin-bottom: 0.25rem;
}

.journey-bubble-text {
  font-size: 0.88rem;
  line-height: 1.5;
  /* Whitespace inside real message/poem text (sprint sends, Unoracle poems)
     is meaningful line breaks, not incidental - must render, not collapse
     (HANDOFF explicit requirement). */
  white-space: pre-wrap;
  word-break: break-word;
}

.journey-arrived {
  align-self: flex-start;
  background: var(--muted);
  border: 1px solid var(--border);
  border-bottom-left-radius: 0.2rem;
}

.journey-pressed {
  margin-left: auto;
  background: var(--brand-soft);
  border: 1px solid transparent;
  border-bottom-right-radius: 0.2rem;
}

.load-more-btn {
  display: block;
  width: 100%;
  margin-top: 0.9rem;
  text-align: center;
}

@media (min-width: 860px) {
  .people-filters { flex-wrap: nowrap; }
}

/* -- I dati / Le azioni (Control Room v2, W3 - the fascicolo's data +
   actions sections). "Le azioni" reuses .sala-group/.sala-actions/
   .grant-active-row/.sala-danger-zone (defined above for the old per-card
   Sala Macchine panel) - only the two card wrappers + the read-only GHL
   block below are new. */

.dossier-data-card,
.dossier-actions-card {
  margin-top: 0.9rem;
}

.dossier-readonly-block {
  margin-top: 1rem;
  padding-top: 0.9rem;
  border-top: 1px solid var(--border);
}

.dossier-readonly-label {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted-foreground);
  margin-bottom: 0.5rem;
}

.dossier-readonly-row {
  display: flex;
  gap: 0.6rem;
  font-size: 0.88rem;
  margin: 0.2rem 0;
}

.dossier-readonly-key {
  flex: 0 0 auto;
  min-width: 4.5rem;
  color: var(--muted-foreground);
}

.dossier-ghl-link {
  margin-top: 0.6rem;
  display: inline-block;
}


.journey-partial-warning {
  margin: 0 0 0.9rem;
  padding: 0.7rem 0.9rem;
  border: 1px solid var(--brick);
  border-radius: var(--radius-sm, 8px);
  background: var(--brick-soft);
  color: var(--foreground);
  font-size: 0.85rem;
  line-height: 1.4;
}


/* "Come la vede il sistema" - backstage read, visually quieter than the
   timeline so it never competes with what the person actually did. */
.system-read-card { padding: 1rem 1.1rem; }
.system-read-caption {
  margin: 0 0 0.9rem;
  font-size: 0.82rem;
  color: var(--muted-foreground);
  line-height: 1.4;
}
.system-read-empty { margin: 0; font-size: 0.88rem; color: var(--muted-foreground); }
.system-read-row { display: flex; align-items: center; gap: 0.7rem; margin: 0.35rem 0; }
.system-read-name { flex: 0 0 40%; font-size: 0.88rem; }
.system-read-bar {
  flex: 1; height: 8px; border-radius: 4px;
  background: var(--muted); overflow: hidden;
}
.system-read-fill { display: block; height: 100%; background: var(--brand); }
.system-read-signature {
  margin: 0.9rem 0 0; font-size: 0.85rem; color: var(--muted-foreground);
  font-style: italic;
}


/* ---------------------------------------------------------------------- */
/* Percorsi (Control Panel Percorsi handoff, 2026-09-12) - The Fight       */
/* ---------------------------------------------------------------------- */

.percorsi-back-btn { margin-bottom: 0.9rem; }

.percorsi-funnel-card { padding: 0.9rem 1.05rem; }

.percorsi-funnel-total {
  font-family: var(--font-display);
  font-size: 1.1rem;
  margin-bottom: 0.6rem;
}

.percorsi-funnel-stages {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
  margin-bottom: 0.6rem;
}

.percorsi-funnel-stage {
  display: flex;
  align-items: baseline;
  gap: 0.3rem;
  font-size: 0.78rem;
  color: var(--muted-foreground);
}

.percorsi-funnel-count {
  font-family: var(--font-mono);
  color: var(--foreground);
  font-weight: 600;
}

.percorsi-funnel-cross { display: flex; flex-wrap: wrap; gap: 0.4rem; }

.percorsi-row-badges {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem;
  justify-content: flex-end;
}

.percorsi-indicators {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 0.6rem;
}

.percorsi-timeline-row {
  padding: 0.6rem 0;
  border-bottom: 1px solid var(--border);
}

.percorsi-timeline-row:last-child { border-bottom: none; }

.percorsi-timeline-head {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  font-size: 0.88rem;
}

.percorsi-timeline-time {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--muted-foreground);
}

.percorsi-timeline-content {
  margin: 0.45rem 0 0 0;
  font-size: 0.86rem;
  line-height: 1.5;
  color: var(--foreground);
}

.percorsi-timeline-content p { margin: 0 0 0.4rem; }
.percorsi-timeline-content p:last-child { margin-bottom: 0; }

.percorsi-muted { color: var(--muted-foreground); font-style: italic; }

.percorsi-reveal summary {
  cursor: pointer;
  color: var(--brick);
  font-size: 0.78rem;
  font-family: var(--font-mono);
  letter-spacing: 0.02em;
}

.percorsi-reveal p {
  white-space: pre-wrap;
  margin-top: 0.4rem;
}

/* ---------------------------------------------------------------------- */
/* La piattaforma (wave B3): Adesso, Persone, Persona, Edizioni, Coda, Uso */
/* Reuses the cards, rows, badges, kpi tiles and the people table above.  */
/* ---------------------------------------------------------------------- */

.piattaforma-tabs { flex-wrap: wrap; }
.piattaforma-tabs .range-btn { flex: 1 1 auto; min-width: 5.2rem; }

.pt-note {
  font-size: 0.78rem;
  color: var(--muted-foreground);
  margin: 0 0 0.9rem;
}

.pt-kpi-row { margin-top: 0.6rem; }

.pt-person-link {
  color: var(--foreground);
  text-decoration: none;
  border-bottom: 1px solid var(--border);
}
.pt-person-link:hover { color: var(--brand); border-bottom-color: var(--brand); }

.pt-now-active .row-name { font-weight: 600; }
.pt-now-interrupted { border-left: 2px solid var(--brand); padding-left: 0.6rem; }
.pt-now-suspended { border-left: 2px dashed var(--border); padding-left: 0.6rem; }

.pt-sublabel { margin-top: 0.9rem; }

.pt-day-row {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 0.9rem;
}
.pt-day-row .form-label { margin: 0; }

.pt-day-input,
.pt-select,
.pt-inline-input,
.pt-textarea {
  background: var(--background);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--foreground);
  font-family: inherit;
  font-size: 0.82rem;
  padding: 0.4rem 0.6rem;
}
.pt-textarea { width: 100%; resize: vertical; }
.people-toolbar #pt-people-edition { align-self: flex-start; max-width: 100%; }
.pt-inline-input { flex: 1 1 10rem; min-width: 0; }
.pt-day-input:focus,
.pt-select:focus,
.pt-inline-input:focus,
.pt-textarea:focus { border-color: var(--brand); outline: none; }

.pt-question { padding: 0.6rem 0; border-bottom: 1px solid var(--border); }
.pt-question:last-child { border-bottom: none; }
.pt-question .row-name { margin-bottom: 0.4rem; }

.pt-note-text { white-space: pre-wrap; }

.pt-edition-card.clickable { cursor: pointer; }
.pt-edition-card.clickable:hover,
.pt-edition-card.clickable:focus-visible { border-color: var(--brand); outline: none; }

.pt-over .row-amount { color: var(--brick); }

.pt-reasons { margin-top: 0.6rem; }

.pt-diverge { margin-left: 0.3rem; cursor: help; }
.people-spent-cell .pt-diverge { margin-left: 0; margin-top: 0.25rem; display: inline-block; }
.pt-diverge-note { margin-top: 0.6rem; margin-bottom: 0; }

/* Le risposte di Unstuck nel fascicolo + il report dell'import (2026-09-25) */
.unstuck-answer-question { margin: 12px 0 2px; font-size: 13px; opacity: 0.75; }
.unstuck-answer-text { margin: 0 0 4px; white-space: pre-wrap; }
.answers-import-report { margin-top: 10px; max-height: 320px; overflow: auto; font-size: 12px; white-space: pre-wrap; }