/* ==========================================================================
   Layout — Containers, Grid, Navigation, Responsive
   ========================================================================== */

/* --- Container --- */
.container {
  max-width: 1000px;
  margin: 0 auto;
  padding: var(--space-5);
}

.container-narrow {
  max-width: 900px;
}

/* --- Navigation ---
   The bar being positioned (sticky counts) is what anchors the panel to it.
   Leave it static and the panel resolves against the viewport instead, which
   on a narrow screen makes it span the full width rather than hang under the
   button. That bug was hit while prototyping this. */
.site-nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--neutral-50);
  color: var(--neutral-900);
  border-bottom: 1px solid var(--neutral-300);
  padding: var(--space-2) var(--space-4);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  font-size: var(--text-base);
}

.site-nav-brand {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-width: 0;
}

.site-nav-mark {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
}

/* The artwork carries its own colour and detail, so it sits on the bar itself
   rather than in a tinted tile — a coloured plate behind a coloured leaf reads
   as two marks fighting. */
.site-nav-mark .brand-leaf {
  display: block;
  width: 28px;
  height: 28px;
}

.site-nav-name {
  font-weight: var(--font-bold);
  font-size: var(--text-md);
  letter-spacing: -0.02em;
  white-space: nowrap;
}

.site-nav-links {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  margin-inline-start: var(--space-3);   /* Bug #840: was `margin-left`. */
}

.site-nav-links a {
  color: var(--neutral-600);
  text-decoration: none;
  padding: 8px 13px;
  border-radius: var(--radius-sm);
  font-weight: var(--font-semibold);
  transition: background var(--transition-fast), color var(--transition-fast);
}
.site-nav-links a:hover { background: var(--neutral-100); color: var(--neutral-900); text-decoration: none; }
.site-nav-links a.active { background: var(--neutral-100); color: var(--neutral-900); }

.site-nav-right {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.site-nav-user {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.site-nav-email {
  color: var(--neutral-600);
  font-size: var(--text-sm);
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 44px is the minimum comfortable touch target, and this bar is used from
   phones. The old close/logout controls were well under it. */
.site-nav-menu-btn {
  width: 44px;
  height: 44px;
  border: none;
  border-radius: var(--radius-md);
  background: var(--neutral-100);
  color: var(--neutral-900);
  font-size: 17px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--transition-fast);
  font-family: var(--font-family);
}
.site-nav-menu-btn:hover { background: var(--neutral-200); }
.site-nav-menu-btn:focus-visible { outline: 2px solid var(--neutral-900); outline-offset: 2px; }

/* Substory #1234: "Help from a licensed consultant" -- the same 44px target as
   the menu button, beside it, and the dialog it opens. Logical properties
   only (docs/testing-ui.md, Lesson 4; bug #840). */
.site-nav-help {
  inline-size: 44px;
  block-size: 44px;
  flex: 0 0 auto;
  border: none;
  border-radius: var(--radius-md);
  background: var(--neutral-100);
  color: var(--neutral-900);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--transition-fast);
}
.site-nav-help:hover { background: var(--neutral-200); }
.site-nav-help:focus-visible { outline: 2px solid var(--neutral-900); outline-offset: 2px; }

.consultant-help-panel {
  inline-size: min(400px, calc(100vw - 32px));
  max-block-size: calc(100vh - 32px);
  margin: auto;
  padding: var(--space-4);
  border: 1px solid var(--neutral-200);
  border-radius: var(--radius-lg);
  color: var(--neutral-900);
  text-align: start;
}
.consultant-help-panel[open] {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.consultant-help-panel::backdrop { background: rgba(0, 0, 0, 0.35); }
.consultant-help-panel p { margin: 0; }
.consultant-help-title { font-weight: 700; }
.consultant-help-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-block-start: var(--space-2);
}

.site-nav-panel {
  position: absolute;
  top: calc(100% + 6px);
  /* Bug #840: was `right`. The panel hangs off the menu button, and the button
     is at the inline-end of the bar — so in RTL both move to the left together
     instead of the panel opening away from the control that summoned it. */
  inset-inline-end: var(--space-4);
  min-width: 232px;
  max-width: calc(100vw - 2 * var(--space-4));
  background: #fff;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xl);
  padding: var(--space-2);
  z-index: 60;
}

/* Substory #777. `.site-nav-logout` è uscito da entrambe queste liste: è il
   quinto elemento della Nota di #777 ed è ora una
   `.sim-btn --ghost --block`. Non bastava aggiungergli la classe — questa
   regola ha specificità (0,2,0) e batteva il componente su raggio (9px contro
   i 12 del sistema), padding e allineamento, cioè il controllo sarebbe rimasto
   identico a com'era con il markup che diceva il contrario. Le due voci del
   pannello che non sono bottoni restano qui. */
.site-nav-panel a {
  display: block;
  width: 100%;
  text-align: start;   /* Bug #840: was `left`; `start` is `left` in LTR. */
  padding: 11px 13px;
  border-radius: var(--radius-sm);
  font-size: var(--text-base);
  font-weight: var(--font-semibold);
  color: var(--neutral-900);
  text-decoration: none;
}
.site-nav-panel a:hover { background: var(--neutral-100); text-decoration: none; }

.site-nav-panel-email {
  display: block;
  padding: 9px 13px;
  font-size: var(--text-sm);
  color: var(--neutral-600);
}

.site-nav-sep {
  border: none;
  border-top: 1px solid var(--neutral-200);
  margin: var(--space-2) var(--space-1);
}

/* Substory #805: bordo, raggio, spaziatura, carattere e superficie sono ora di
   `.sim-select` in design-system.css — questa regola li ripeteva e, avendo due
   classi, li vinceva per specificita', il che avrebbe lasciato questa <select>
   con `appearance: none` e senza la freccia nuova. Qui resta la sola cosa che e'
   davvero disposizione e non aspetto: nel pannello il controllo occupa la riga. */
.site-nav-panel .site-nav-lang {
  width: 100%;
}

/* Substory #777: fondo, bordo, cursore, carattere e transizione arrivano tutti
   da `.sim-btn` / `.sim-btn--ghost`. `background: none` in particolare era la
   ragione per cui il bottone non aveva nessun fondo da cambiare quando la
   palette è cambiata. La classe resta come gancio del test di beta; la regola
   non serve più. */

/* --- Main Layout (chat + panel) --- */
/* Bug #820: this was `max-width: 960px`, a cap sized for a single reading
   column. It is not one — it holds the chat column AND the 240px documents
   panel side by side, so the chat got 676px and the composer 495px of it. With
   no upper breakpoint, every viewport from 1024px to 5K rendered at the same
   960px, which at 1440x900 left a third of the screen as empty margin.

   1600px is chosen for the two columns this actually holds: at 1440 the chat
   column reads 1156px (80% of the viewport) instead of 676px (47%), and it
   keeps growing to 1316px at 1920 rather than staying pinned. The cap still
   binds above 1600, so on a 27" monitor the layout stops rather than tracking
   the screen.

   The cap bounds the *layout*, not the line length inside it — 1600px is far
   wider than a readable measure, and the chat column is 1316px of it. What keeps
   body text readable is `.msg`, which is `width: fit-content` with a
   `min(85%, 70ch)` cap (static/css/pages/chat.css). Widening this value without
   that one is what makes an answer set at ~145 characters per line; the two were
   changed together for that reason, and they need to stay that way.

   `.doc-panel` is `width: 240px; flex-shrink: 0` and `.chat-container` is
   `flex: 1`, so the chat column absorbs all of the new width and the panel
   keeps its size. Below the value of the cap nothing changes, so the narrow
   two-column widths and the `max-width: 760px` mobile block are untouched.

   The same 960px constant is written down a second time on `.chat-header`
   (static/css/pages/chat.css). Both are 1600px and they must move together —
   changing only this one leaves the page title inset 240-320px from the content
   column beneath it. `test_page_header_stays_aligned_with_the_content_column`
   in apps/core/tests/test_beta_bug820_desktop_width_e2e.py holds that line. */
.main-layout {
  width: 100%;
  max-width: 1600px;
  flex: 1;
  display: flex;
  gap: var(--space-3);
  padding: var(--space-4);
  margin: 0 auto;
}

/* --- Section Headers ---
   Substory #777: la sezione di una persona era una `.sim-card --flush` con
   intestazione `.sim-section-head`, entrambe sull'elemento.

   Substory #711 ha tolto la sezione per persona: le righe sono raggruppate per
   CATEGORIA e la persona sta su ogni riga, perché chi raccoglie estratti conto
   li raccoglie per tutti insieme e la forma precedente obbligava a girare
   quattro schede per trovare le quattro righe della stessa commissione. La
   regola che stava qui (`.person-section { margin-bottom }`) non ha più un
   elemento: le intestazioni di categoria sono `.documenti-group-heading` e la
   distanza fra i gruppi è `.documenti-group + .documenti-group`
   (components.css). Cancellata e non lasciata lì: una regola senza elemento è
   la prova, per chi passa dopo, che l'elemento esista ancora. */

/* --- Checklist Item (flex layout) ---
   La voce sta DENTRO la card della persona, quindi non porta più una sua
   superficie bianca con ombra e angoli: le voci si separano con una linea,
   come le righe campo di `.sim-field`. Restano la riga flex e le sue distanze,
   che sono la disposizione della voce e non il suo aspetto. */
.checklist-item {
  padding: var(--space-4);
  border-bottom: 1px solid var(--sim-line);
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
}
.checklist-item:last-child { border-bottom: none; }

/* --- Case Meta ---
   DELETED by bug #1131. `.case-meta` printed `Case ID: <uuid> | Created:
   <raw ISO timestamp>` under the checklist heading; neither is something a
   reader can use, and the line is gone from the page. */

/* --- Empty State --- */
.empty-state {
  text-align: center;
  padding: var(--space-12) var(--space-5);
  color: var(--neutral-600);
}

/* --- Download Section --- */
.download-all { margin-bottom: var(--space-5); }

/* --- Responsive ---
   Below this width the bar keeps the brand and the button; everything else
   lives in the panel. Squeezing five items into 390px is what made "Log Out"
   overflow the bar and "My Cases" wrap onto a second line.

   The chat page's stacking used to live in a separate `@media (max-width: 700px)`
   block just above this one. It has been folded in here: two queries 60px apart
   meant that between 700 and 760 the nav had already collapsed to its mobile
   shape while `.main-layout` was still a two-column desktop row — the state bug
   #792's 759x800 case is red on, and the reason that case exists. One
   breakpoint now, the design system's. */
@media (max-width: 760px) {
  .site-nav-links,
  .site-nav-email { display: none; }
  /* Bug #840: was `right`/`left`. Symmetric either way, but the desktop rule
     above is now `inset-inline-end`, and a physical `right` here would not
     override it in RTL — the panel would be pinned on three sides at once. */
  .site-nav-panel { inset-inline: var(--space-3); max-width: none; }

  /* The chat page is an app frame below the breakpoint (see pages/chat.css):
     `.main-layout` is its column, so it stacks and it must be allowed to shrink
     — a flex item's default `min-height: auto` would let a loaded transcript
     push the composer straight out of the frame's bottom. */
  .main-layout {
    flex-direction: column;
    min-height: 0;
    /* The iPhone home bar. There is not one `env()` anywhere else in this CSS,
       and that indicator over the bottom rows is the other half of why the
       reporter could not reach the end of the page.

       The design note puts this inset on the composer. It is here instead
       because the composer is still not the frame's last row: `#analyze-btn`
       used to render after `.input-area`, and after #794 folded that action
       into the composer, `#composer-hint` did. Insetting `.input-area` would
       lift the textarea and leave whatever follows it under the bar. This is
       the frame's bottom edge, so it lifts every row.

       SUBSTORY #1074 changed what "every row" means, and this declaration is
       still the right one. The composer left the column — it is a
       `position: fixed` dock now, carrying its own
       `env(safe-area-inset-bottom)` (pages/chat.css), and `#composer-hint`
       went inside it — so the frame's last in-flow row is `.chat-footer`, and
       this is what keeps the IRCC disclosure off the indicator. On the chat
       page `.chat-page .main-layout` (pages/chat.css) overrides this with the
       same expression plus the height the dock no longer takes in the column;
       it is more specific, and it keeps that reserve next to the rule that
       creates the need for it. Everything else that uses `.main-layout` keeps
       exactly this. */
    padding-bottom: calc(var(--space-4) + env(safe-area-inset-bottom, 0px));
  }

  /* Beside the chat the panel is a 240px sidebar; under it, a strip. The cap is
     viewport-relative rather than the flat 200px it used to be: 200px is a
     third of a 640px Android, and the panel does not shrink (`flex-shrink: 0`),
     so on the smallest screens a full document list would take that third out
     of the transcript's share and starve it. 20dvh keeps the strip proportional
     to whatever screen it is on. */
  .doc-panel { width: 100%; max-height: 20dvh; }
}

@media (max-width: 600px) {
  .site-nav { padding: var(--space-2) var(--space-3); }
  .checklist-item { flex-direction: column; }
  .container { padding: var(--space-4); }
  .drop-zone { padding: var(--space-5) var(--space-3); }
  .drop-zone-actions { flex-direction: column; }
  /* #711: `.unassociated-doc` non esiste più (vedi components.css). Le righe
     del documento sono `.checklist-item`, già in colonna qui sopra. */
  .reassign-select { width: 100%; }
}