/* The review layer, on top of the client guide's own stylesheet.
 *
 * css/report.css comes from content/guida-zoho/ and is copied by the build. It styles
 * the document itself — topbar, sidebar, layout, every block type — and owns the design
 * tokens. Almost everything here is an element the guide does not have: the comment
 * rail, the composer, the answer boxes, the gate.
 *
 * A few rules here restate one of report.css's. Each carries its reason directly above
 * it — grep this file for "report.css" to find them all. Keep them few: report.css is
 * regenerated from content/ on every build, so every override has to be re-checked when
 * the guide's own stylesheet changes.
 *
 * Load order matters: report.css, then this file.
 */

:root {
  /* The only tokens report.css does not define. */
  --mark: #faf0d2;
  --mark-active: #f3dfa0;
  --shadow: 0 1px 2px rgba(19, 22, 28, .06), 0 8px 24px rgba(19, 22, 28, .08);
}

/* The browser hides `hidden` elements with `display: none` in its own stylesheet, and
   ANY author rule that sets `display` beats it — specificity never enters into it. So
   `.gate-overlay { display: grid }` kept the name prompt on screen after it was
   dismissed. report.css states this too; repeated here so this layer stands on its own. */
[hidden] { display: none !important; }

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

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

.primary-btn, .ghost-btn {
  font: inherit;
  border-radius: var(--r-sm);
  cursor: pointer;
  padding: .5rem .9rem;
  transition: background .15s, border-color .15s;
}

.primary-btn {
  background: var(--signal);
  color: #fff;
  border: 1px solid var(--signal);
}
.primary-btn:hover { background: #0b6659; }
.primary-btn:disabled { opacity: .6; cursor: default; }

.ghost-btn {
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--line);
}
.ghost-btn:hover { background: var(--paper-sunken); }
.ghost-btn[aria-pressed="false"] { opacity: .5; }

/* ---------- Login page and name prompt ---------- */

.gate-overlay {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  background: var(--paper);
  padding: 1.5rem;
  z-index: 60;
}

.gate-card {
  width: min(400px, 100%);
  background: var(--paper-raised);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow);
  padding: 2.25rem;
  text-align: center;
}

/* Same 44% word band as the topbar rule below: 34px puts SCALARLY at ~15px of cap
   height, which carries the card as its only piece of branding. */
.gate-card .brand-logo { height: 34px; width: auto; margin-bottom: 1rem; }
.gate-card h1 { font-family: var(--font-display); font-size: 1.3rem; margin-bottom: .35rem; }
.gate-card p { color: var(--ink-mute); margin-bottom: 1.25rem; font-size: .92rem; }

.gate-card input {
  width: 100%;
  font: inherit;
  padding: .65rem .8rem;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  margin-bottom: .85rem;
}
.gate-card button { width: 100%; }

.gate-error { color: var(--danger); font-size: .88rem; margin-top: .9rem; }

/* ---------- Topbar additions ---------- */

.topbar .nav { display: flex; gap: .3rem; }
.topbar .nav a {
  padding: .3rem .8rem;
  border-radius: var(--r-pill);
  text-decoration: none;
  color: var(--ink-mute);
  font-size: .85rem;
  font-weight: 600;
  white-space: nowrap;
}
.topbar .nav a:hover { background: var(--signal-soft); color: var(--signal); }
.topbar .nav a[aria-current="page"] { background: var(--signal); color: #fff; }

.tools { display: flex; gap: .4rem; }
.tools .ghost-btn { padding: .35rem .6rem; font-size: .82rem; }

/* report.css sets `.brand-logo { height: 15px }`, which is right for a compact mark and
   wrong for this file. Measured: scalarly-logo.png is 775×204, and the word SCALARLY
   occupies y 57–146 — 90px, only 44% of the height. The rest is the slash mark, which
   overshoots the cap band, plus transparent padding. At 15px the word therefore renders
   at 15 × 90/204 ≈ 6.6px and turns into a smudge, against ~11.8px of cap height for
   "Studi Cognitivi" beside it (Fraunces, 1.05rem, 600).

   26px puts the word at 26 × 90/204 ≈ 11.5px, so the two halves of the lockup match
   optically. Set the height from the word band, not from the file's bounding box —
   swapping in a logo with different internal padding needs this number re-measured. */
.topbar .brand-logo { height: 26px; }

/* ---------- The third column ---------- */

/* report.css lays the page out as `250px 1fr`. The rail is the column it has no idea
   about, so this is the one structural rule the layer has to restate. */
.layout { grid-template-columns: 250px minmax(0, 1fr) 320px; max-width: 1560px; }
body.rail-hidden .layout { grid-template-columns: 250px minmax(0, 1fr); }
body.rail-hidden #comment-rail { display: none; }

.rail {
  position: sticky;
  top: 57px;
  max-height: calc(100vh - 57px);
  overflow-y: auto;
  padding: 1.75rem 1.1rem 3rem;
  border-left: 1px solid var(--line);
  font-size: .88rem;
}

.rail-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: .7rem;
}
.rail-title {
  font-family: var(--font-mono);
  font-size: .72rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.rail-filter { color: var(--ink-mute); font-size: .78rem; display: flex; align-items: center; gap: .3rem; }
.rail-empty { color: var(--ink-mute); font-size: .85rem; }

.side-empty { color: var(--ink-mute); font-size: .85rem; }

/* ---------- Highlights in the document ---------- */

#doc mark {
  background: var(--mark);
  color: inherit;
  border-radius: 2px;
  cursor: pointer;
  box-shadow: inset 0 -1px 0 rgba(154, 107, 0, .55);
}
#doc mark.active, #doc mark:hover { background: var(--mark-active); }

/* Hiding the rail is one state: it also stops the highlights reading as clickable. */
body.rail-hidden #doc mark { background: none; box-shadow: none; cursor: auto; }

/* ---------- Comment cards ---------- */

.comment-list { display: flex; flex-direction: column; gap: .6rem; }

.comment {
  background: var(--paper-raised);
  border: 1px solid var(--line);
  border-left: 3px solid var(--warn);
  border-radius: var(--r-sm);
  padding: .7rem .8rem;
  cursor: pointer;
}
.comment.active { border-color: var(--signal); box-shadow: var(--shadow); }
.comment.resolved { opacity: .55; border-left-color: var(--ink-faint); }
.comment.orphan { border-left-color: var(--danger); }

.comment-meta {
  display: flex;
  justify-content: space-between;
  gap: .5rem;
  font-size: .76rem;
  color: var(--ink-mute);
  margin-bottom: .35rem;
}
.comment-author { font-weight: 600; color: var(--ink); }

.comment-quote {
  font-size: .78rem;
  color: var(--ink-mute);
  border-left: 2px solid var(--line);
  padding-left: .5rem;
  margin-bottom: .4rem;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.comment-body { font-size: .88rem; white-space: pre-wrap; }

.comment-actions { display: flex; gap: .5rem; margin-top: .5rem; font-size: .76rem; }
.comment-actions button {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  color: var(--ink-mute);
  cursor: pointer;
  text-decoration: underline;
}
.comment-actions button:hover { color: var(--signal); }

.comment-badge {
  font-size: .68rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--danger);
}

.comment-replies {
  margin: .5rem 0 0 .6rem;
  padding-left: .6rem;
  border-left: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: .5rem;
}

/* ---------- Selection trigger and composer ---------- */

.comment-trigger {
  position: absolute;
  z-index: 50;
  font: inherit;
  font-size: .82rem;
  font-weight: 600;
  padding: .35rem .8rem;
  background: var(--signal);
  color: #fff;
  border: 0;
  border-radius: var(--r-pill);
  box-shadow: var(--shadow);
  cursor: pointer;
}

.composer {
  position: absolute;
  z-index: 55;
  width: 320px;
  background: var(--paper-raised);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: var(--shadow);
  padding: .85rem;
}

.composer-quote {
  margin-bottom: .6rem;
  font-size: .78rem;
  color: var(--ink-mute);
  border-left: 2px solid var(--warn);
  padding-left: .5rem;
  max-height: 4.5rem;
  overflow: hidden;
}

.composer textarea, .answer textarea {
  width: 100%;
  font: inherit;
  font-size: .9rem;
  padding: .55rem .65rem;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  resize: vertical;
}

.composer-actions { display: flex; justify-content: flex-end; gap: .5rem; margin-top: .6rem; }
.composer-actions button { font-size: .85rem; padding: .4rem .8rem; }

/* ---------- Questions and answers ---------- */

/* The pointer the guide carries under each ask-table, in place of the answer boxes. It is
   sunken rather than raised, and tighter than `.question` below: it belongs to the table
   above it as its next step, and must not read as another block of the document. */
.questions-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: .75rem 1rem;
  margin: -.25rem 0 1.75rem;
  padding: .85rem 1.1rem;
  border: 1px solid var(--line);
  border-top: none;
  border-radius: 0 0 var(--r-md) var(--r-md);
  background: var(--paper-sunken);
}

.questions-link p { margin: 0; font-size: .88rem; color: var(--ink-mute); }

/* `.primary-btn` is written for a <button>; as a link it needs the box and no underline. */
.questions-link .primary-btn {
  display: inline-block;
  text-decoration: none;
  white-space: nowrap;
  font-size: .88rem;
}

.question {
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--paper-raised);
  padding: 1.1rem 1.25rem;
  margin: 1.25rem 0;
}

.question-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: .5rem;
}

.question-tag {
  font-family: var(--font-mono);
  font-size: .68rem;
  text-transform: uppercase;
  letter-spacing: .1em;
  font-weight: 600;
  color: var(--signal);
}
.question-src { font-size: .78rem; text-decoration: none; }
.question-body { font-weight: 600; margin-bottom: .4rem; }
.question-why { font-size: .86rem; color: var(--ink-mute); margin-bottom: .85rem; }

.answer-status { font-size: .78rem; color: var(--ink-mute); margin-top: .5rem; }
.answer-status.saved { color: var(--ok); }
.answer-status.error { color: var(--danger); }

.answer-actions {
  display: flex;
  align-items: center;
  gap: .6rem;
  margin-top: .6rem;
  flex-wrap: wrap;
}

.attachments {
  list-style: none;
  margin-top: .75rem;
  display: flex;
  flex-direction: column;
  gap: .35rem;
}
.attachment {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-size: .84rem;
  background: var(--paper-sunken);
  border-radius: var(--r-sm);
  padding: .35rem .6rem;
}
.attachment a { text-decoration: none; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.attachment-size { color: var(--ink-mute); font-size: .76rem; }
.attachment button { background: none; border: 0; cursor: pointer; color: var(--ink-mute); font: inherit; }
.attachment button:hover { color: var(--danger); }

.dropzone {
  margin-top: .6rem;
  border: 1px dashed var(--line-strong);
  border-radius: var(--r-sm);
  padding: .7rem;
  text-align: center;
  color: var(--ink-mute);
  font-size: .82rem;
}
.dropzone.over { border-color: var(--signal); background: var(--signal-soft); color: var(--ink); }

/* ---------- Answer status and history ---------- */

.answer-state {
  font: inherit;
  font-size: .85rem;
  padding: .35rem .6rem;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--paper);
  color: var(--ink);
}

/* The state colours the box it belongs to, so a scan down the page reads as a list of
   what is done and what is not — without needing to read any of the answers. */
.question:has(.answer-state[data-value="completa"])    { border-left: 3px solid var(--ok); }
.question:has(.answer-state[data-value="da-rivedere"]) { border-left: 3px solid var(--warn); }

.answer-history { margin: .5rem 0 0; font-size: .85rem; }
.answer-history > summary { cursor: pointer; color: var(--ink-mute); }
.answer-history > summary:hover { color: var(--ink); }

.history-list { margin-top: .5rem; display: grid; gap: .5rem; }

.history-item {
  padding: .6rem .8rem;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--paper-sunken);
}

.history-meta { margin: 0 0 .25rem; font-size: .78rem; color: var(--ink-faint); }
.history-body { margin: 0; white-space: pre-wrap; color: var(--ink-soft); }

/* Shown by the print stylesheet only — a <textarea> prints as an empty box. */
.answer-print { display: none; }

/* ---------- Review summary ---------- */

.summary {
  margin: 0 0 1.5rem;
  padding: 1rem 1.2rem;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--paper-raised);
  box-shadow: var(--shadow);
}

.summary-title {
  margin: 0 0 .75rem;
  font-family: var(--font-display);
  font-size: .95rem;
}

.summary-grid { display: flex; flex-wrap: wrap; gap: 1.5rem; }

.summary-tile { display: flex; flex-direction: column; gap: .1rem; }
.summary-value { font-size: 1.6rem; line-height: 1; font-variant-numeric: tabular-nums; }
.summary-label { font-size: .8rem; color: var(--ink-mute); }
.summary-tile.ok   .summary-value { color: var(--ok); }
.summary-tile.warn .summary-value { color: var(--warn); }

.summary-foot { margin: .85rem 0 0; font-size: .8rem; color: var(--ink-faint); }

.summary-bar {
  height: 6px;
  margin-bottom: .9rem;
  border-radius: var(--r-pill);
  background: var(--paper-sunken);
  overflow: hidden;
}

.summary-bar > span {
  display: block;
  height: 100%;
  background: var(--ok);
  transition: width .3s ease;
}

/* ---------- Search in the document ---------- */

.side-search { margin-bottom: .75rem; }

.side-search input {
  width: 100%;
  font: inherit;
  font-size: .85rem;
  padding: .45rem .6rem;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--paper);
  color: var(--ink);
}

.search-results {
  margin-bottom: 1rem;
  max-height: 45vh;
  overflow-y: auto;
  display: grid;
  gap: .25rem;
}

.search-hit {
  display: grid;
  gap: .15rem;
  width: 100%;
  text-align: left;
  padding: .45rem .55rem;
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  background: none;
  font: inherit;
  cursor: pointer;
}

.search-hit:hover { border-color: var(--line); background: var(--paper-sunken); }
.search-where { font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-faint); }
.search-line  { font-size: .8rem; color: var(--ink-soft); }
.search-line mark { background: var(--mark-active); }
.search-empty { margin: 0; padding: .45rem .55rem; font-size: .8rem; color: var(--ink-faint); }

/* A block the reader jumped to, named for a moment so the eye finds it on a dense page. */
@keyframes search-flash {
  from { background: var(--mark-active); }
  to   { background: transparent; }
}

.search-flash { animation: search-flash 1.4s ease-out; }

@media (prefers-reduced-motion: reduce) {
  .search-flash { animation: none; outline: 2px solid var(--signal); outline-offset: 3px; }
  .summary-bar > span { transition: none; }
}

/* ---------- Narrow screens ---------- */

/* report.css already collapses to one column at 900px. The rail has to go one step
   earlier, or the document loses half its width before the breakpoint arrives. */
@media (max-width: 1240px) {
  .layout, body.rail-hidden .layout { grid-template-columns: 250px minmax(0, 1fr); }
  .rail {
    grid-column: 1 / -1;
    position: static;
    max-height: none;
    border-left: 0;
    border-top: 1px solid var(--line);
  }
}

@media (max-width: 900px) {
  .layout, body.rail-hidden .layout { grid-template-columns: 1fr; }
  .topbar { flex-wrap: wrap; gap: .5rem; }
  .topbar .nav { order: 3; width: 100%; }
}

/* ---------- Print ---------- */

/* What the client takes into an internal meeting: the document and the answers, on
   paper. Everything that only works with a pointer is dropped — the rail, the search,
   the composer, every button. The comment text is not printed either: a comment is a
   conversation held on the portal, and a stale paper copy of one is worse than none.
   report.css has no print rules at all, so this is additive, not an override. */
@media print {
  .topbar,
  .sidebar,
  .rail,
  .composer,
  .comment-trigger,
  .lightbox,
  .gate-overlay,
  .questions-link,
  .answer-actions,
  .answer-history,
  .dropzone,
  .attachment-list button,
  textarea {
    display: none !important;
  }

  /* One column. report.css lays the page out as a grid sized for three. */
  .layout { display: block; }
  .main { max-width: none; padding: 0; }

  .answer-print {
    display: block;
    white-space: pre-wrap;
    margin: 0;
    padding: .5rem .7rem;
    border-left: 2px solid var(--line-strong);
  }

  /* An answer split over a page break is unreadable next to its question. */
  .question, .summary, figure, table { break-inside: avoid; }

  .summary { box-shadow: none; }

  /* A screenshot at screen size wastes a whole sheet. */
  figure img { max-height: 11cm; width: auto; }

  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: .75em; word-break: break-all; }
}