/* Stili aggiuntivi della demo: gli stessi dei mockup, piu' gli stati interattivi. */
.wz-sheet > #view { flex: 1; display: flex; flex-direction: column; }
.wz-sheet > #view > .wz-body { flex: 1; }
.steps a, .steps button { color: inherit; font: inherit; background: none; border: 0; padding: 0; text-align: left; cursor: pointer; }
.steps li.locked { color: var(--faint); }
.btn[disabled] { opacity: 0.45; cursor: not-allowed; }
.btn[disabled]:hover { background: var(--primary); }
.btn.text[disabled]:hover { background: none; }
.hint { color: var(--muted); font-size: 13px; }

/* passo 1 */
.combo { position: relative; }
.combo .input { height: 48px; }
.combo .input.open, .combo .input:focus-within { border-color: var(--primary); outline: 1px solid var(--primary); outline-offset: -2px; }
.list { position: absolute; z-index: 5; top: calc(100% + 6px); left: 0; right: 0; background: var(--surface); border: 1px solid var(--control); border-radius: var(--radius-card); padding: 8px; max-height: 420px; overflow: auto; }
.list[hidden] { display: none; }
.list h4 { margin: 0; padding: 10px 10px 6px; font-size: 12px; line-height: 16px; font-weight: 600; color: var(--muted); }
.list ul { list-style: none; margin: 0; padding: 0; }
.list li { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 9px 10px; border-radius: 6px; cursor: pointer; }
.list li small { color: var(--muted); font-size: 13px; white-space: nowrap; }
.list li:hover, .list li.hi { background: var(--src-civia-bg); }
.list li.hi b { font-weight: 600; color: var(--src-civia-ink); }
.list li b { font-weight: 400; }
.list .none { padding: 14px 10px; color: var(--muted); }
.drop { border: 1px dashed var(--control); border-radius: var(--radius-card); padding: 28px 24px; text-align: center; color: var(--muted); display: flex; flex-direction: column; align-items: center; gap: 12px; }
.drop.over { border-color: var(--primary); background: #fff7fb; }
.drop.slim { padding: 14px; font-size: 14px; }
.files { list-style: none; margin: 0; padding: 0; border: 1px solid var(--border); border-radius: var(--radius-card); }
.files li { display: grid; grid-template-columns: minmax(0, 1fr) 190px 120px; align-items: center; gap: 16px; padding: 14px 16px; border-top: 1px solid var(--rule); }
.files li:first-child { border-top: 0; }
.files .name { display: flex; flex-direction: column; min-width: 0; }
.files .name b { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.files .name small { color: var(--muted); font-size: 13px; }
.files .name a { color: inherit; text-decoration: none; min-width: 0; display: flex; }
.files .name a:hover b, .files .name a:focus-visible b { text-decoration: underline; }
.files .state { display: flex; align-items: center; gap: 6px; font-size: 14px; justify-self: end; color: var(--src-op-ink); }
.files .state.wait { color: var(--muted); }
.spin { width: 14px; height: 14px; border: 2px solid var(--control); border-top-color: var(--primary); border-radius: 50%; animation: spin 0.8s linear infinite; flex: none; }
@keyframes spin { to { transform: rotate(360deg); } }
.found .big { font-size: 40px; line-height: 44px; font-weight: 600; letter-spacing: -0.02em; }
.bar { display: flex; height: 10px; border-radius: 6px; overflow: hidden; gap: 2px; background: var(--well); }
.bar i { display: block; transition: flex-grow 0.5s ease; }
.legend { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.legend li { display: flex; justify-content: space-between; align-items: center; }
.legend li b { font-weight: 600; }
.reads { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.reads li { display: flex; flex-direction: column; gap: 6px; }
.chosen { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 48px; padding: 0 8px 0 14px; border: 1px solid var(--control); border-radius: var(--radius-control); }

/* passo 2 */
.groups { display: flex; flex-direction: column; gap: 32px; margin-top: 28px; }
.group h3 { margin: 0 0 4px; font-size: 17px; line-height: 24px; font-weight: 600; }
.rows { margin: 0; }
.rows > div { display: grid; grid-template-columns: 170px minmax(0, 1fr) auto 76px; align-items: center; gap: 4px 16px; padding: 10px 0; border-top: 1px solid var(--rule); }
.rows dt { color: var(--muted); font-size: 14px; }
.rows dd { margin: 0; min-width: 0; }
.rows .tags { display: flex; gap: 6px; justify-content: flex-end; flex-wrap: wrap; }
.rows .btn { justify-self: end; }
.rows .why { grid-column: 2 / 5; color: var(--muted); font-size: 13px; line-height: 18px; margin: 0; }
.rows > div.prop dd { font-weight: 500; }
.rows .edit { display: flex; align-items: center; gap: 8px; }
.rows .edit .input { height: 38px; flex: 1; }
.src.mod { background: var(--well); color: #3d4150; } .src.mod::before { background: #3d4150; }
.key { display: flex; flex-direction: column; gap: 8px; }

/* passo 3 */
.fact { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; background: var(--src-civia-bg); border-radius: var(--radius-control); padding: 12px 14px; margin: 0; font-size: 14px; line-height: 20px; }
.fact b { font-weight: 600; }
.num { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; background: var(--text); color: #fff; font-size: 13px; font-weight: 600; margin-right: 8px; }
.q legend { display: flex; align-items: center; }
.checks { display: flex; flex-direction: column; gap: 8px; }
.check { display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; gap: 2px 12px; align-items: start; padding: 13px 14px; border: 1px solid var(--control); border-radius: var(--radius-control); cursor: pointer; }
.check input { margin: 3px 0 0; accent-color: var(--primary); }
.check b { font-weight: 500; }
.check small { grid-column: 2; color: var(--muted); font-size: 14px; line-height: 20px; }
.check .src { grid-column: 3; grid-row: 1; }
.check.on { border-color: var(--primary); outline: 1px solid var(--primary); outline-offset: -2px; background: #fff7fb; }
.bullets { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 6px; color: #3d4150; }

/* passo 4 */
.wz-body.gen { grid-template-columns: minmax(0, 520px) minmax(0, 560px); }
.sum { margin: 28px 0 0; }
.sum > div { display: grid; grid-template-columns: 120px minmax(0, 1fr) auto; gap: 4px 16px; padding: 12px 0; border-top: 1px solid var(--rule); align-items: baseline; }
.sum dt { color: var(--muted); font-size: 14px; }
.sum dd { margin: 0; }
.sum .btn { align-self: center; }
.ready { display: flex; align-items: center; gap: 10px; margin-top: 20px; padding: 12px 14px; border-radius: var(--radius-control); background: var(--src-op-bg); color: var(--src-op-ink); font-size: 14px; }
.ready.warn { background: var(--warn-bg); color: var(--warn-ink); }
.ready.done { background: var(--src-op-bg); }
.ready b { font-weight: 600; }
.paper { background: var(--raised); border-radius: var(--radius-card); padding: 20px; display: flex; flex-direction: column; gap: 12px; align-self: start; }
.paper header { display: flex; justify-content: space-between; align-items: center; }
.paper h3 { margin: 0; font-size: 14px; font-weight: 600; }
.doc { background: var(--surface); border: 1px solid var(--border); border-radius: 6px; padding: 32px 36px; font-family: Georgia, "Times New Roman", serif; font-size: 14px; line-height: 23px; color: #22252e; }
.doc p { margin: 0 0 12px; }
.doc .c { text-align: center; font-weight: 700; letter-spacing: 0.04em; }
.doc mark { color: inherit; border-radius: 2px; padding: 0 1px; }
.doc mark.prev { background: var(--src-prev-bg); text-decoration: underline 2px var(--src-prev); text-underline-offset: 4px; }
.doc mark.op { background: var(--src-op-bg); text-decoration: underline 2px var(--src-op); text-underline-offset: 4px; }
.doc mark.piatt { background: var(--src-piatt-bg); text-decoration: underline 2px var(--src-piatt); text-underline-offset: 4px; }
.doc mark.civia { background: var(--src-civia-bg); text-decoration: underline 2px var(--src-civia); text-underline-offset: 4px; }
.doc mark.dec { background: var(--well); text-decoration: underline 2px #3d4150; text-underline-offset: 4px; }
.doc .fade { color: var(--faint); }
.paper .note { margin: 0; color: var(--muted); font-size: 13px; }

@media (max-width: 1000px) { .wz-body.gen { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 640px) {
  .files li { grid-template-columns: minmax(0, 1fr) auto; }
  .files .state { grid-column: 2; grid-row: 1; }
  .files .src { grid-column: 1; }
  .rows > div { grid-template-columns: minmax(0, 1fr) auto; }
  .rows dt { grid-column: 1 / 3; }
  .rows .tags { grid-column: 1; justify-content: flex-start; }
  .rows .why { grid-column: 1 / 3; }
  .check { grid-template-columns: 18px minmax(0, 1fr); }
  .check .src { grid-column: 2; grid-row: auto; justify-self: start; }
  .sum > div { grid-template-columns: minmax(0, 1fr) auto; }
  .sum dd { grid-column: 1; }
  .sum .btn { grid-column: 2; grid-row: 1 / 3; }
  .doc { padding: 20px; }
}

/* passo 5: editor del documento */
body.editing .steps, body.editing .wz-foot { display: none; }
.ed { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.ed-bar { display: flex; align-items: center; gap: 8px; padding: 10px 24px; border-bottom: 1px solid var(--rule); flex-wrap: wrap; }
.ed-bar .grow { flex: 1; }
.ed-bar .sep { width: 1px; height: 22px; background: var(--border); margin: 0 4px; }
.ed-bar .btn.small { min-width: 34px; }
.toggle { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; color: var(--muted); cursor: pointer; }
.toggle input { accent-color: var(--primary); }
.ed-main { flex: 1; display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 32px; background: var(--well); padding: 32px; border-radius: 0 0 var(--radius-sheet) var(--radius-sheet); align-items: start; }
.ed-canvas { display: flex; justify-content: center; min-width: 0; }
.page { width: 100%; max-width: 794px; min-height: 1040px; background: var(--surface); border: 1px solid var(--border); border-radius: 4px; padding: 64px 72px; font-family: Georgia, "Times New Roman", serif; font-size: 15px; line-height: 25px; color: #22252e; outline: none; }
.page:focus { outline: 2px solid var(--civia-magenta); outline-offset: 4px; }
.page p { margin: 0 0 14px; }
.page .c { text-align: center; font-weight: 700; letter-spacing: 0.04em; }
.page .dt-office { font-weight: 700; margin-bottom: 28px; }
.page .sign { text-align: right; margin-top: 36px; }
.page mark { color: inherit; border-radius: 2px; padding: 0 1px; }
.page mark.prev { background: var(--src-prev-bg); text-decoration: underline 2px var(--src-prev); text-underline-offset: 4px; }
.page mark.op { background: var(--src-op-bg); text-decoration: underline 2px var(--src-op); text-underline-offset: 4px; }
.page mark.piatt { background: var(--src-piatt-bg); text-decoration: underline 2px var(--src-piatt); text-underline-offset: 4px; }
.page mark.civia { background: var(--src-civia-bg); text-decoration: underline 2px var(--src-civia); text-underline-offset: 4px; }
.page mark.dec { background: var(--active); text-decoration: underline 2px #3d4150; text-underline-offset: 4px; }
.page mark.todo { background: var(--warn-line); text-decoration: underline 2px #e8a317; text-underline-offset: 4px; }
.page.hl-off mark { background: none; text-decoration: none; }
.page.hl-off mark.todo { background: var(--warn-line); }
.ed-side { position: sticky; top: 16px; padding-top: 0; }
@media (max-width: 1000px) { .ed-main { grid-template-columns: minmax(0, 1fr); padding: 16px; } .ed-side { position: static; } .page { padding: 40px 32px; } }
@media (max-width: 640px) { .ed-bar { padding: 10px 12px; } .page { padding: 24px 18px; min-height: 0; font-size: 14px; } }
@media print {
  .wz-top, .ed-bar, .ed-side { display: none !important; }
  html, body, .ed-main, .wz-sheet { background: #fff !important; border: 0 !important; margin: 0 !important; padding: 0 !important; }
  .page { border: 0; padding: 0; max-width: none; }
  .page mark { background: none !important; text-decoration: none !important; }
}

/* canvas: assistente a sinistra, documento a destra */
.ed-main { grid-template-columns: 380px minmax(0, 1fr); gap: 24px; padding: 24px; }
.ai { position: sticky; top: 16px; display: flex; flex-direction: column; gap: 12px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-card); padding: 16px; max-height: calc(100vh - 32px); min-height: 520px; }
.ai-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.ai-head h3 { margin: 0; font-size: 15px; font-weight: 600; }
.ai-todo { background: var(--warn-bg); color: var(--warn-ink); border-radius: var(--radius-control); padding: 10px 12px; font-size: 13px; line-height: 18px; }
.ai-todo ul { margin: 4px 0 0; padding-left: 18px; }
.ai-log { flex: 1; min-height: 120px; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; padding-right: 2px; }
.msg { max-width: 92%; display: flex; flex-direction: column; gap: 4px; align-items: flex-start; }
.msg p { margin: 0; padding: 10px 12px; border-radius: 12px; font-size: 14px; line-height: 20px; }
.msg.ai p { background: var(--raised); color: var(--text); border-top-left-radius: 4px; }
.msg.me { align-self: flex-end; align-items: flex-end; }
.msg.me p { background: var(--primary); color: #fff; border-top-right-radius: 4px; }
.msg.wait p { display: flex; align-items: center; gap: 8px; color: var(--muted); }
.msg .btn.small { height: 28px; font-size: 13px; padding: 0 8px; }
.ai-suggest { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { border: 1px solid var(--control); background: var(--surface); border-radius: 999px; padding: 5px 12px; font-size: 13px; line-height: 18px; cursor: pointer; text-align: left; }
.chip:hover { background: var(--src-civia-bg); border-color: var(--src-civia); }
.ai-form { display: flex; gap: 8px; align-items: flex-end; }
.ai-form textarea { flex: 1; resize: none; border: 1px solid var(--control); border-radius: var(--radius-control); padding: 8px 12px; font-size: 14px; line-height: 20px; min-height: 52px; }
.ai-form textarea:focus { outline: 2px solid var(--civia-magenta); outline-offset: 1px; }
.ai-new { animation: aiflash 3s ease-out; }
@keyframes aiflash { 0%, 55% { background: var(--src-op-bg); } 100% { background: transparent; } }
.page mark.ai-new { animation: aiflash 3s ease-out; }
.ed-canvas { align-items: flex-start; }
@media (max-width: 1000px) {
  .ed-main { grid-template-columns: minmax(0, 1fr); padding: 16px; }
  .ed-canvas { order: 1; }
  .ai { order: 2; position: static; max-height: none; }
}
@media print { .ai { display: none !important; } }
/* demo collegata alle API */
.drop-actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.drop.slim { flex-direction: row; justify-content: space-between; text-align: left; }
.combo .input:has(input:disabled) { background: var(--bg, #f6f6f8); }
.combo input:disabled { color: var(--muted); cursor: not-allowed; }
.fact .src { flex: none; }

/* passo 2 collegato alle API: i campi che nessun documento porta */
.rows > div.miss { background: var(--warn-bg); margin: 0 -12px; padding: 10px 12px; border-radius: 8px; border-top-color: transparent; }
.rows > div.miss + div { border-top-color: transparent; }
.rows > div.miss .why { color: var(--warn-ink); }
.rows dt label { cursor: default; }
.rows .muted { color: var(--faint); }
.rows .input .unit { color: var(--muted); font-size: 14px; }
.rows input[aria-invalid="true"] { color: #b42318; }
.aside .drop-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.found .loading, .aside .loading { display: flex; align-items: center; gap: 8px; margin: 10px 0 0; color: var(--muted); font-size: 13px; }
.src.prop.ia { outline-color: var(--primary); color: var(--primary); } .src.prop.ia::before { background: var(--primary); }