/* La Panoramica del lavoro (pezzo 8, L8): la filiera in otto passi, le regole del passo dopo, le task aperte (D4), le
   fasi sulla striscia grande, la board, scadenze, documenti e persone. Solo gettoni di app.css (chiaro e scuro vengono
   da li'); prefisso pn-. Misure del mockup «Lavorazioni con la board al centro», giro 3. */
.pn { display:grid; gap:0; min-width:0; }
.pn.pn-occupata { cursor:progress; }
.pn.pn-occupata button { pointer-events:none; }
.pn-allerta { color:var(--allerta); }
.pn-cod { font-family:var(--cifre); color:var(--ink); }
.pn-n { font-family:var(--cifre); font-weight:400; font-size:var(--t-11); color:var(--ink-3); }
.pn-nota { margin:0; font-size:var(--t-12); color:var(--ink-3); }
.pn-lk { border:0; background:none; padding:0; font:inherit; font-size:var(--t-12); color:var(--ink-2); cursor:pointer; text-align:left;
  text-decoration:underline; text-decoration-color:var(--linea); text-underline-offset:3px; }
.pn-lk:hover { color:var(--ink); text-decoration-color:currentColor; }
.pn-lk:focus-visible, .pn-prev:focus-visible { outline:2px solid var(--marchio); outline-offset:2px; border-radius:2px; }
.pn-destra { margin-left:auto; }
.pn-azioni { display:flex; flex-wrap:wrap; gap:6px; }
.pn .btn.pn-quieto { border-color:transparent; color:var(--ink-2); }

/* la filiera: un passo per colonna, la barretta in alto dice a che punto e' (fatto, qui, indietro in fucsia, dopo
   tratteggiato); un solo bottone pieno, nel passo dove il lavoro aspetta */
.pn-filiera { display:grid; grid-template-columns:repeat(var(--pn-passi,8),minmax(0,1fr)); gap:3px; margin:0 0 14px; }
.pn-passo { display:grid; align-content:start; gap:1px; padding:9px 8px 8px 0; min-width:0; }
.pn-passo::before { content:""; height:4px; border-radius:2px; box-shadow:inset 0 0 0 1px var(--ink-2); margin-bottom:7px; }
.pn-passo.pn-fatto::before { background:var(--ink-2); box-shadow:none; }
.pn-passo.pn-qui::before { background:var(--ink); box-shadow:none; }
.pn-passo.pn-indietro::before { background:var(--allerta); box-shadow:none; }
.pn-passo.pn-dopo::before { box-shadow:none; background:repeating-linear-gradient(90deg,var(--linea) 0 6px,transparent 6px 10px); }
.pn-passo h3 { margin:0; font-size:var(--t-13); font-weight:600; display:flex; flex-wrap:wrap; align-items:baseline; gap:0 6px; line-height:1.35; color:var(--ink); }
.pn-passo.pn-dopo h3 { color:var(--ink-2); font-weight:500; }
.pn-passo p { margin:0; font-size:var(--t-12); color:var(--ink-2); line-height:1.4; overflow-wrap:anywhere; }
.pn-passo p b { color:var(--ink); font-weight:500; font-family:var(--cifre); }
.pn-passo.pn-indietro p.pn-stato-p { color:var(--allerta); }
.pn-passo > .btn { justify-self:start; margin-top:6px; white-space:normal; text-align:left; max-width:100%; }
.pn-passo .pn-nota { margin-top:4px; }
.pn-gesto { display:grid; gap:6px; justify-items:start; margin-top:6px; min-width:0; }
.pn-data { display:grid; gap:2px; font-size:var(--t-12); color:var(--ink-2); width:100%; }
.pn-data .input { width:100%; max-width:170px; padding:3px 6px; font-size:var(--t-12); }
.pn-conferma { display:grid; gap:4px; margin-top:6px; padding:8px; border:1px solid var(--ink-2); border-radius:7px; background:var(--piano); font-size:var(--t-12); color:var(--ink-2); }
.pn-conferma b { font-weight:600; color:var(--ink); }

/* le regole del passo dopo */
.pn-regole { margin:-6px 0 16px; font-size:var(--t-12); color:var(--ink-2); display:flex; flex-wrap:wrap; gap:4px 10px; align-items:baseline; }
.pn-regole b { color:var(--ink); font-weight:600; }
.pn-regole ol { flex-basis:100%; margin:6px 0 4px; padding:8px 14px 8px 32px; background:var(--piano); border:1px solid var(--linea-2); border-radius:8px; display:grid; gap:3px; }
.pn-regole li { color:var(--ink-3); }
.pn-regole li span:first-child { color:var(--ink-2); }
.pn-regole li span + span { margin-left:8px; }
.pn-regole li.pn-vale span { color:var(--ink); font-weight:600; }
.pn-regole li.pn-vale::marker { color:var(--marchio); font-weight:700; }
.pn-regole > .pn-nota { flex-basis:100%; }

/* l'avviso del consuntivo con task aperte e le task aperte (D4) */
.pn-avviso { display:flex; flex-wrap:wrap; gap:8px 14px; align-items:center; border:1px solid var(--allerta); border-radius:8px; padding:9px 12px; margin:0 0 14px; background:var(--allerta-tinta, var(--piano)); font-size:var(--t-13); }
.pn-avviso p { margin:0; flex:1 1 380px; }
.pn-task { background:var(--piano); border:1px solid var(--linea); border-radius:8px; padding:10px 14px; margin:0 0 16px; display:grid; gap:6px; }
.pn-task-testa { display:flex; flex-wrap:wrap; align-items:center; gap:6px 12px; font-size:var(--t-12); color:var(--ink-2); }
.pn-task-testa h3 { margin:0; font-size:var(--t-15); font-weight:600; color:var(--ink); }
.pn-task-righe { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 22px; }
.pn-task-r { display:grid; grid-template-columns:minmax(0,1fr) auto auto; gap:8px; align-items:center; padding:2px 0; border-bottom:1px solid var(--linea-2); }
.pn-task-r b { font-weight:500; font-size:var(--t-13); }
.pn-task-r small { display:block; color:var(--ink-3); font-size:var(--t-12); }
.pn-task-gesto { justify-self:end; white-space:nowrap; }
.pn-task-piede { display:flex; flex-wrap:wrap; gap:8px 12px; align-items:center; padding-top:4px; font-size:var(--t-12); color:var(--ink-2); }
.pn-spunta { display:flex; align-items:center; gap:9px; min-height:28px; cursor:pointer; min-width:0; font-size:var(--t-13); color:var(--ink); }
.pn-spunta input { flex:none; width:16px; height:16px; margin:0; accent-color:var(--ink); }

/* i blocchi sotto la filiera */
.pn-blocco { min-width:0; }
/* fra i blocchi in colonna (Fasi, Board) l'aria; nella griglia in fondo i blocchi partono alla stessa altezza */
.pn > .pn-blocco + .pn-blocco { margin-top:18px; }
.pn-testa { display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; padding-bottom:6px; border-bottom:1px solid var(--linea); margin-bottom:2px; font-size:var(--t-12); color:var(--ink-2); }
.pn-testa h3 { margin:0; font-size:var(--t-15); font-weight:600; color:var(--ink); }
.pn-testa .btn.pn-destra { align-self:center; }
.pn-ora { display:flex; flex-wrap:wrap; gap:2px 16px; align-items:baseline; font-size:var(--t-13); color:var(--ink-2); margin:6px 0 0; }
.pn-ora b { color:var(--ink); font-weight:600; }
.pn-griglia { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px 28px; align-items:start; margin-top:18px; }
.pn-riga { display:grid; grid-template-columns:72px minmax(0,1fr) auto; gap:10px; align-items:baseline; padding:6px 0; border-bottom:1px solid var(--linea-2); font-size:var(--t-13); }
.pn-riga:last-child { border-bottom:0; }
.pn-riga time { font-family:var(--cifre); font-size:var(--t-12); white-space:nowrap; color:var(--ink-2); }
.pn-riga.pn-rit time { color:var(--allerta); }
.pn-riga.pn-doc { grid-template-columns:86px minmax(0,1fr) auto; }
.pn-riga.pn-mia { grid-template-columns:minmax(0,1fr) auto; }
.pn-cosa { min-width:0; }
.pn-cosa b { font-weight:500; }
.pn-cosa small { display:block; color:var(--ink-3); font-size:var(--t-12); font-family:var(--cifre); }
.pn-riga .pn-destra { justify-self:end; text-align:right; white-space:nowrap; font-size:var(--t-12); }
.pn-tipo { font-size:var(--t-12); color:var(--ink-2); }
.pn-lk.pn-numero { font-family:var(--cifre); font-size:var(--t-13); color:var(--ink); }
.pn-persone { display:flex; flex-wrap:wrap; gap:6px 16px; padding:6px 0; font-size:var(--t-13); }
.pn-persona { display:inline-flex; align-items:center; gap:7px; }
.pn-persona small { color:var(--ink-3); font-size:var(--t-12); }
.pn-sigla { width:26px; height:26px; border-radius:50%; background:var(--piano-2); display:inline-grid; place-items:center; font-size:var(--t-11); font-weight:700; flex:none; }

/* la board: l'anteprima della Seed Board e accanto la board per colonne */
.pn-board-corpo { display:grid; grid-template-columns:minmax(0,1fr) 280px; gap:12px; align-items:stretch; margin-top:8px; }
.pn-prev { position:relative; border:1px solid var(--linea); border-radius:8px; overflow:hidden; background:var(--fondo); cursor:pointer; min-width:0;
  background-image:radial-gradient(var(--linea-2) .8px,transparent .8px); background-size:18px 18px; }
.pn-prev:hover { border-color:var(--ink-3); }
.pn-mondo { position:absolute; left:12px; top:12px; transform-origin:0 0; pointer-events:none; }
.pn-area { position:absolute; border:1px solid var(--linea); border-radius:14px; background:color-mix(in srgb,var(--piano) 70%,transparent); }
.pn-area > span { position:absolute; left:24px; top:18px; font-size:15px; font-weight:600; color:var(--ink); }
.pn-area.pn-sotto { border-style:dashed; }
.pn-nodo { position:absolute; width:232px; min-height:74px; padding:12px 14px; border:1px solid var(--linea); border-radius:10px; background:var(--piano); display:grid; align-content:start; gap:4px; overflow:hidden; }
.pn-nodo small { font-size:12px; color:var(--ink-2); }
.pn-nodo b { font-size:15px; font-weight:600; color:var(--ink); line-height:1.25; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pn-colonne { display:grid; align-content:start; border:1px solid var(--linea-2); border-radius:8px; background:var(--piano); min-width:0; }
.pn-colonne > p { margin:0; padding:7px 10px 6px; font-size:var(--t-12); color:var(--ink-3); }
.pn-colonne > div { padding:6px 10px; border-top:1px solid var(--linea-2); font-size:var(--t-13); min-width:0; }
.pn-colonne b { font-weight:600; }
.pn-colonne .pn-n { margin-left:6px; }
.pn-colonne small { display:block; color:var(--ink-3); font-size:var(--t-12); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pn-sotto-board { display:flex; flex-wrap:wrap; gap:4px 14px; font-size:var(--t-12); color:var(--ink-2); margin:6px 0 0; }
.pn-vuota { display:flex; flex-wrap:wrap; gap:10px 18px; align-items:center; justify-content:space-between; border:1px dashed var(--linea); border-radius:8px; padding:14px 16px; margin-top:8px; background:var(--piano); }
.pn-vuota b { font-size:var(--t-15); font-weight:600; }
.pn-vuota p { margin:2px 0 0; color:var(--ink-2); font-size:var(--t-13); max-width:72ch; }

@media (max-width:1180px) {
  .pn-griglia { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
/* sul telefono la filiera diventa un elenco: la barretta a sinistra, il nome, le righe e il gesto */
@media (max-width:760px) {
  .pn-filiera { grid-template-columns:minmax(0,1fr) !important; gap:0; border:1px solid var(--linea-2); border-radius:8px; background:var(--piano); padding:2px 12px; }
  .pn-passo { grid-template-columns:4px 92px minmax(0,1fr); column-gap:10px; padding:8px 0; border-top:1px solid var(--linea-2); align-items:baseline; }
  .pn-passo:first-child { border-top:0; }
  .pn-passo::before { grid-row:1 / span 4; width:4px; height:auto; align-self:stretch; margin:0; }
  .pn-passo h3 { grid-column:2; grid-row:1 / span 3; }
  .pn-passo p, .pn-passo > .btn, .pn-passo .pn-gesto, .pn-passo .pn-conferma { grid-column:3; }
  .pn-passo > .btn { min-height:36px; }
  .pn-griglia, .pn-board-corpo, .pn-task-righe { grid-template-columns:minmax(0,1fr); }
  .pn-prev { display:none; }
  .pn-task-r { grid-template-columns:minmax(0,1fr) auto; }
  .pn-task-r .manager-status { grid-column:1; padding-left:25px; }
  .pn-task-gesto { grid-column:2; grid-row:1 / span 2; }
  /* sei schede non entrano in 390 px: la riga scorre di lato, e il bordo sfuma per dirlo */
  .ps-schede:has(#ps-tab-panoramica:not([hidden])) { mask-image:linear-gradient(90deg,#000 calc(100% - 36px),transparent); }
}
/* «Già fatturato fuori dal Manager?» (owner 6-10): il link quieto del passo Consuntivo, sotto il gesto. */
.pn-passo > .pn-lk { display:block; margin-top:6px; }