/* The one style of Linea (v0.84.0; docs/design.md). The tokens first, by meaning: a colour is used through its token,
   never raw (TestStyleTokens). Gold is «next», bordeaux is «final» or a problem, green is «done». */
:root{--paper:#F7F5F1;--panel:#FFFFFF;--soft-panel:#F2F0EC;--ink:#141310;--soft:#5A554C;--faint:#8E897F;--line:#E6E6E6;--sand:#D9D2C5;--red:#8E231C;--gold:#9D7B3B;--gold-text:#7C6230;--gold-lt:#C9A96A;--dark:#141310;--charcoal:#0F0E0C;--bone:#ECE8E0;--bone-2:#C6C0B5;--taupe:#8C8074;--green:#4E6B47;--input:#FFF6D6;--serif:"Playfair Display",Georgia,"Times New Roman",serif;--sans:"Montserrat",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;--mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;--next:#7A6128;--final:#6B1A1A;--doc:url("/static/img/icona-doc.svg");--on-dark:#FFFFFF;--done-bg:#E4EDDF;--done-text:#33502C;--done-on-dark:#B9D1B2;--next-bg:#F6ECD0;--next-text:#6D5310;--next-soft:#FBF7EE;--final-bg:#F6DEDB;--final-soft:#FBF3F2;--final-line:#E7D3D0;--kind-intake-bg:#E3E6EA;--kind-intake:#38404A;--kind-run-bg:#DCEBEA;--kind-run:#0B5A5F;--kind-note-bg:#ECE7F3;--kind-note:#4B2F73;--kind-send-bg:#DFE8F5;--kind-send:#1F4173;--bubble:#ECE5D6;--sheet-head:#F3F1EC;--sheet-line:#EEECE7}
/* The look of the design system of the firm (v3, v0.69.0): warm near-black and two golds, Playfair Display for titles,
   figures and numerals (regular only), Montserrat for text and for the labels in letterspaced capitals, flat cards
   with a hairline. The controls keep their shapes and meanings: see "perception layer" below. */
@font-face{font-family:"Playfair Display";src:url(/static/fonts/PlayfairDisplay-Regular.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Playfair Display";src:url(/static/fonts/PlayfairDisplay-Italic.woff2) format("woff2");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"Montserrat";src:url(/static/fonts/Montserrat-Regular.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Montserrat";src:url(/static/fonts/Montserrat-Medium.woff2) format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"Montserrat";src:url(/static/fonts/Montserrat-SemiBold.woff2) format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"Montserrat";src:url(/static/fonts/Montserrat-Bold.woff2) format("woff2");font-weight:700 900;font-display:swap}
*{box-sizing:border-box}
body{margin:0;color:var(--ink);font:15px/1.5 var(--sans)}
a{overflow-wrap:anywhere}
.subj,.muted,pre,p{overflow-wrap:anywhere}
td code{white-space:nowrap}
select{text-overflow:ellipsis}
header.top{color:var(--on-dark);display:flex;flex-wrap:wrap;align-items:center}
header.top a.brand{color:var(--on-dark);text-decoration:none;white-space:nowrap}
header.top .who{margin-left:auto;display:flex;align-items:center;font-size:.85rem;flex:none;white-space:nowrap;color:var(--bone-2)}
header.top .who button{font-size:.85rem}
/* where you are: the three parts of the registry, the open one filled, then the company and its section */
nav.where{display:flex;flex-wrap:wrap;font-size:.85rem;min-width:0;flex:1 1 auto}
nav.where a{text-decoration:none;display:inline-flex;align-items:center;white-space:nowrap}
nav.where .crumb{display:inline-flex;align-items:center;gap:.4rem;min-width:0;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
nav.where .crumb b{overflow:hidden;text-overflow:ellipsis}
nav.where .sep{color:var(--faint)}
header.top select{background:var(--dark);color:var(--on-dark);border:1px solid var(--taupe);border-radius:4px;padding:.25rem}
div.warn{background:var(--final);color:var(--on-dark);font-size:.8rem;padding:.3rem 1rem}
main{max-width:70rem;margin:0 auto;padding:1rem;overflow-wrap:break-word}
h1 small{display:block}
h2{font:400 1.3rem/1.25 var(--serif);letter-spacing:-.01em;margin:0 0 .6rem}
nav.tabs{display:flex;gap:.25rem;border-bottom:1px solid var(--line);margin:1rem 0}
nav.tabs a{padding:.55rem .9rem;text-decoration:none;color:var(--soft);border-bottom:3px solid transparent;min-height:44px;display:flex;align-items:center}
nav.tabs a[aria-current]{color:var(--ink);font-weight:600}
.card{padding:1rem;margin:0 0 1rem}
.flash{margin:0 0 1rem;white-space:pre-wrap;overflow-x:auto}
.ok{color:var(--green);font-weight:600}
.bad{font-weight:600}
.badge{display:inline-block;white-space:nowrap}
.badge.intake{background:var(--kind-intake-bg);color:var(--kind-intake)}
.badge.run{background:var(--kind-run-bg);color:var(--kind-run)}
.badge.edit{background:var(--next-bg);color:var(--next-text)}
.badge.note{background:var(--kind-note-bg);color:var(--kind-note)}
.badge.review{background:var(--done-bg);color:var(--done-text)}
.badge.lock{background:var(--dark);color:var(--on-dark)}
.badge.release{background:var(--red);color:var(--on-dark)}
.badge.send{background:var(--kind-send-bg);color:var(--kind-send)}
ol.timeline{list-style:none;margin:0;padding:0;border-left:2px solid var(--line);margin-left:.4rem}
ol.timeline li{position:relative;padding:0 0 1.1rem 1.1rem}
ol.timeline li::before{content:"";position:absolute;left:-7px;top:.35rem;width:12px;height:12px;border-radius:50%;background:var(--panel);border:2px solid var(--gold)}
ol.timeline .meta{font-size:.8rem;color:var(--soft);display:flex;flex-wrap:wrap;gap:.2rem .6rem;align-items:center}
ol.timeline .subj{margin:.15rem 0}
ol.timeline pre{margin:.3rem 0 0;white-space:pre-wrap;font:.8rem/1.4 var(--mono);color:var(--soft);background:var(--soft-panel);padding:.5rem;border-radius:2px;overflow-x:auto}
code,.hash{font:.8rem var(--mono)}
form.inline{display:flex;flex-wrap:wrap;gap:.5rem;align-items:flex-end}
label{display:block;font-size:.8rem;margin-bottom:.15rem}
input[type=text],input[type=email],input[type=number],select,textarea{font:inherit;padding:.45rem .5rem;color:var(--ink);width:100%}
textarea{font:.82rem/1.45 var(--mono);min-height:8rem;resize:vertical}
td textarea{min-height:3.2rem;font:.8rem/1.35 var(--sans)}
button{font:600 .9rem var(--sans);min-height:44px;cursor:pointer}
button.ghost{background:transparent}
.scroll{overflow-x:auto}
table{border-collapse:collapse;width:100%;font-size:.85rem}
th,td{text-align:left;vertical-align:top;padding:.4rem .5rem}
th{font-weight:600}
td.num,th.num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(9.5rem,1fr));gap:.6rem;margin:0 0 .8rem}
.kpi b{display:block}
.kpi span{font-size:.75rem}
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(8rem,1fr));gap:.4rem;margin:0 0 1rem;padding:0;list-style:none;counter-reset:s}
.steps li{counter-increment:s;padding:.45rem .6rem;font-size:.8rem}
.steps li::before{content:counter(s,decimal-leading-zero);display:block;font:400 .95rem var(--serif);letter-spacing:.06em;color:var(--gold-text)}
.steps li.done{border-color:var(--green)}
.steps li.done::before{color:var(--green);content:counter(s,decimal-leading-zero) "  fatto"}
.steps li.stale{border-color:var(--red)}
.steps li.stale::before{color:var(--red);content:counter(s,decimal-leading-zero) "  da rifare"}
details{margin:.5rem 0}
summary{cursor:pointer;font-weight:600;min-height:44px;display:flex;align-items:center;gap:.5rem;list-style:none}
summary::-webkit-details-marker{display:none}
/* a thing that opens says so: its title (.lab), a line from the end of the title to the right edge, a caret: down
   closed, up open. The line is the last piece of the title's last line, cut at the end of .lab: it starts after the
   last word also when the title takes two lines. The sections have the caret, the three choices have a ring */
details:not(.sec):not(.choices details)>summary{align-items:flex-end;gap:.5rem;padding:.6rem 0}
details:not(.sec):not(.choices details)>summary>.lab{flex:1;min-width:0;overflow:hidden}
details:not(.sec):not(.choices details)>summary>.lab::after{content:"";display:inline-block;vertical-align:middle;width:100%;margin:0 -100% 0 .7rem;border-top:2px solid var(--soft);opacity:.5}
details:not(.sec):not(.choices details)>summary::after,details.sec>summary::after{content:"";flex:none;width:.85rem;height:.85rem;margin:0 .5rem 0 .2rem;border:solid var(--ink);border-width:0 4px 4px 0;transform:translateY(-.2rem) rotate(45deg)}
details:not(.sec):not(.choices details)>summary::after{margin-bottom:.3rem;margin-bottom:calc((1lh - .85rem)/2)}
details.sec>summary::after{margin:0 .3rem 0 .1rem}
details:not(.sec):not(.choices details)[open]>summary::after,details.sec[open]>summary::after{transform:translateY(.2rem) rotate(-135deg)}
.choices details>summary::after{content:none}
.diff{font:.78rem/1.45 var(--mono);white-space:pre;overflow-x:auto;background:var(--panel);border:1px solid var(--line);border-radius:2px;padding:.5rem 0}
.diff div{padding:0 .7rem}
.diff .add{background:var(--done-bg)}
.diff .del{background:var(--final-bg)}
.diff .hunk{background:var(--soft-panel)}
.diff .meta{color:var(--soft);font-weight:600;margin-top:.5rem}
.grid2{display:grid;gap:1rem}
.grid2>*{min-width:0}
textarea,input,select{max-width:100%}
@media(min-width:60rem){
  .grid2{grid-template-columns:1fr 1fr}
}
.muted{color:var(--soft)}
@media (prefers-reduced-motion:no-preference){
  button{transition:filter .15s}
  button:hover{filter:brightness(1.15)}
}
/* sections of the state page fold: the page opens at the step that is next */
details.sec{padding:0}
details.sec>summary{padding:.8rem 1rem;gap:.6rem;list-style:none}
details.sec>summary::-webkit-details-marker{display:none}
details.sec>summary h2{margin:0;flex:1}
details.sec>.in{padding:0 1rem 1rem}
.pill.stale{white-space:normal;text-align:left}
/* three choices for a missing document, one open at a time: a ring = a choice, filled = the one you opened */
.choices{display:grid;gap:.35rem;min-width:14rem}
.choices details{margin:0;border:1px solid var(--line);background:var(--panel)}
.choices summary{padding:.45rem .7rem;font-weight:500;gap:.55rem;list-style:none}
.choices summary::-webkit-details-marker{display:none}
.choices summary::before{content:"";width:.75em;height:.75em;border-radius:50%;border:2px solid var(--next);flex:none}
.choices details[open]{border-color:var(--ink)}
.choices details[open]>summary{font-weight:600}
.choices details[open]>summary::before{background:var(--ink);border-color:var(--ink)}
.choices .in{padding:0 .7rem .7rem}
.choices .in p{margin:.4rem 0 0}
.act-state{margin:.6rem 0}
.act-state p{margin:.2rem 0}
.act-undo{display:flex;flex-wrap:wrap;gap:.3rem .8rem;align-items:center;margin:.3rem 0 .6rem}
.act-undo button{width:auto}
.act-does{font-size:.9rem;color:var(--soft);margin:.35rem 0 .6rem}
.act-why{font-size:.9rem;color:var(--final);margin:.35rem 0 .6rem}
button[disabled]{opacity:.45}
form.edit .ph{color:var(--soft);font-style:italic}
form.edit .off{opacity:.4}
form.edit .progress{margin:.2rem 0 .3rem}
form.edit .bar{margin:0 0 .8rem}
form.edit .chap-count{margin-left:auto;gap:.3em}
form.edit label.leave{margin:.9rem 0 .2rem;font-size:.85rem;color:var(--soft)}
form.edit label.leave input{width:20px;height:20px;accent-color:var(--final)}
.todo-line{margin:.4rem 0 0;font-size:.9rem;color:var(--ink);max-width:34rem}
.todo-line .pill{margin-bottom:.25rem}
.pill.decide{background:var(--final-bg);color:var(--final);border-radius:2px}
.open-lines{display:flex;flex-wrap:wrap;gap:.4rem;margin:0 0 .8rem}
tr.decide td:first-child{border-left:3px solid var(--final)}
.attn{display:grid;gap:.6rem}
.attn-co{border:1px solid var(--line);padding:.6rem .8rem;background:var(--panel)}
.attn-co p{margin:0 0 .35rem}
.attn-co ul{margin:0;padding:0;list-style:none}
.attn-co li{display:flex;align-items:baseline;gap:.2rem;padding:.2rem 0;border-top:1px solid var(--soft-panel)}
label.opt{display:flex;gap:.55rem;align-items:flex-start;font-size:.95rem;margin:.3rem 0}
label.opt input{width:22px;height:22px;flex:none;margin:.1rem 0 0;accent-color:var(--ink)}
.msg textarea.mail{font:1rem/1.45 var(--sans);min-height:15rem}
.msg .act{display:inline-flex;align-items:center;min-height:44px;padding:0 1.1rem;border:1.5px solid var(--ink);border-radius:999px;text-decoration:none;color:var(--ink);font-weight:600}
/* a locked bridge reads as locked */
.pill{font:600 .68rem var(--sans);white-space:nowrap;background:var(--soft-panel);color:var(--soft)}
.pill.done{background:var(--done-bg);color:var(--done-text)}
.pill.todo{background:var(--next-bg);color:var(--next-text)}
.pill.stale{background:var(--final-bg);color:var(--red)}
input[type=file]{font:inherit;width:100%;border:1px dashed var(--line);border-radius:4px;padding:.5rem;background:var(--on-dark)}
input[type=password]{font:inherit;padding:.45rem .5rem;width:100%}
/* ================= perception layer =================
   Each rule has a reason from perception or cognition research. README, "Design rationale of the interface".
   1. Shape carries meaning before text is read. Round = safe and routine, angular = alert and final
      (bouba/kiki: Koehler 1929, Ramachandran and Hubbard 2001, Cwiek et al. 2022; preference for curved contours
      and stronger amygdala response to sharp contours: Bar and Neta 2006, 2007).
   2. One colour, one meaning (Stroop 1935). Bordeaux = a final action or an error, and nothing else.
   3. One filled button in view (isolation effect, von Restorff 1933). Few choices (Hick 1952, Hyman 1953).
   4. Status = shape + colour + word. About 8% of men do not separate red from green.
   5. No capitals for labels: word shape helps reading (Tinker 1963). Body text 16 px, lines of 70 characters or fewer. */
body{font-size:16px}
h2{color:var(--ink)}
a{color:var(--ink);text-decoration-color:var(--gold);text-decoration-thickness:2px;text-underline-offset:3px}
.in p,.muted,.flash{max-width:70ch}
.muted{font-size:.875rem}
th,.badge,.pill,table.stack td[data-l]::before{text-transform:none!important;letter-spacing:0!important}
th{font-size:.82rem}
/* routine action = bouba: a pill. The filled one is the single next action in view */
button{border-radius:999px;padding:.6rem 1.2rem;border:1.5px solid var(--ink);background:transparent;color:var(--ink);font-weight:600}
button.primary{background:var(--ink);border-color:var(--ink);color:var(--on-dark)}
button.ghost{border-color:var(--line);color:var(--soft);font-weight:500}
button:disabled{opacity:.45;cursor:not-allowed}
/* final action = kiki: square corners, a cut corner, bordeaux, and distance from the routine buttons (Fitts 1954: a slip is less likely) */
button.commit{border-radius:0;background:var(--final);border:2px solid var(--final);color:var(--on-dark);letter-spacing:.01em;clip-path:polygon(0 0,calc(100% - 14px) 0,100% 14px,100% 100%,0 100%);padding-right:1.6rem}
.final{margin-top:1.1rem;padding-top:.9rem;border-top:1px solid var(--line)}
.final .why{display:flex;gap:.55rem;align-items:flex-start;font-size:.9rem;margin:0 0 .6rem}
.final .why input{width:22px;height:22px;flex:none;margin:.1rem 0 0;accent-color:var(--final)}
@media (prefers-reduced-motion:no-preference){
  button{transition:transform .08s,filter .15s}
  button:active{transform:scale(.98)}
}
/* status marks: circle = done, ring = to do, triangle = attention */
.mark{display:inline-block;width:.7em;height:.7em;margin-right:.4em;vertical-align:baseline;flex:none}
.mark.done{border-radius:50%;background:var(--green)}
.mark.todo{border-radius:50%;border:2px solid var(--next)}
.mark.idle{border-radius:50%;border:1.5px solid var(--soft);opacity:.7}
.mark.warn{background:var(--final);clip-path:polygon(50% 0,100% 100%,0 100%);width:.8em;height:.75em}
.pill{border-radius:999px;font-size:.8rem;font-weight:600;padding:.2rem .65rem;display:inline-flex;align-items:center}
.pill.stale{border-radius:2px}
.ok::before{content:"";display:inline-block;width:.65em;height:.65em;border-radius:50%;background:var(--green);margin-right:.35em}
.bad::before{content:"";display:inline-block;width:.75em;height:.7em;background:var(--final);clip-path:polygon(50% 0,100% 100%,0 100%);margin-right:.35em}
.bad{color:var(--final)}
/* messages: a good result is round and quiet, a problem is angular and has a band */
.flash{font:.9rem/1.5 var(--sans);border-left:0;border-radius:14px;background:var(--done-bg);padding:.8rem 1rem .8rem 2.4rem;position:relative}
.flash::before{content:"";position:absolute;left:1rem;top:1.05rem;width:.75rem;height:.75rem;border-radius:50%;background:var(--green)}
.flash.problem{border-radius:0;background:var(--final-bg);border-left:5px solid var(--final)}
.flash.problem::before{border-radius:0;background:var(--final);clip-path:polygon(50% 0,100% 100%,0 100%)}
/* the one next step: gold is the colour of "next" */
.next{display:flex;flex-wrap:wrap;gap:.6rem 1rem;align-items:center;padding:.8rem 1rem;margin:0 0 .8rem}
.next span{flex:1 1 14rem}
.next a{display:inline-flex;align-items:center;min-height:44px;padding:0 1.2rem;border-radius:999px;background:var(--ink);color:var(--on-dark);text-decoration:none;font-weight:600}
/* progress in three phases of two steps: a person keeps about four chunks in mind (Cowan 2001), and effort rises near a visible goal (Kivetz et al. 2006) */
.phases{display:grid;grid-template-columns:repeat(3,1fr);gap:.5rem;margin:0 0 1rem;padding:0;list-style:none}
.phases>li{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:.5rem .7rem}
.phases .ph{font:600 .8rem var(--sans);color:var(--soft);display:block;margin-bottom:.2rem}
.phases .st{display:flex;align-items:center;font-size:.9rem;line-height:1.6}
.phases .st.now{font-weight:700}
.phases.four{grid-template-columns:repeat(4,1fr)}
.bar{height:6px;border-radius:3px;background:var(--soft-panel);margin:.1rem 0 1rem;overflow:hidden}
.bar i{display:block;height:100%;background:var(--green);border-radius:3px}
/* timeline: three families of events, by shape. Ring = the system did it. Rounded square = a person wrote. Diamond = a person decided */
ol.timeline li::before{border-color:var(--soft)}
ol.timeline li.words::before{border-radius:3px;border-color:var(--next)}
ol.timeline li.decision::before{border-radius:0;transform:rotate(45deg);background:var(--final);border-color:var(--final);width:10px;height:10px;left:-6px}
.badge{font-size:.78rem;padding:.1rem .55rem;background:var(--soft-panel)!important;color:var(--ink)!important}
li.decision .badge{border-radius:0;background:var(--final)!important;color:var(--on-dark)!important}
li.words .badge{background:var(--next-bg)!important}
nav.tabs a[aria-current]{border-color:var(--ink)}
.diff .hunk{color:var(--next)}
input:focus-visible,select:focus-visible,textarea:focus-visible,button:focus-visible,a:focus-visible,summary:focus-visible{outline:3px solid var(--next);outline-offset:2px}
h3{margin:1rem 0 .3rem}
/* all cells that a partner decides look the same (Gestalt similarity): yellow = "your input", as in the workbook */
/* ---------- phones and small tablets ---------- */
@media (max-width:50rem){
  main,td,.card{overflow-wrap:anywhere}
  /* a file name or an address with no space must not widen the page */
  body{font-size:16px;padding-bottom:calc(4.2rem + env(safe-area-inset-bottom,0px))}
  /* the header has two rows on a phone (who, then where), so it does not stick: the tabs at the bottom stay fixed */
  header.top{position:static;padding:.5rem .8rem;padding-top:calc(.5rem + env(safe-area-inset-top,0px));gap:.5rem .8rem}
  nav.where{order:3;flex-basis:100%}
  nav.where a{min-height:44px;padding:.4rem .8rem}
  header.top .who button{min-height:44px;width:auto;font-size:.9rem}
  main{padding:.7rem .7rem 1rem}
  h1{font-size:1.35rem;margin:.3rem 0 0}
  h1 small{font-size:.72rem}
  .card{padding:.8rem;border-radius:10px;margin-bottom:.7rem}
  /* iOS zooms into a field with text smaller than 16px */
  input[type=text],input[type=email],input[type=number],input[type=password],select,textarea{font-size:16px;padding:.6rem .6rem}
  textarea{font-size:14px}
  button{width:100%;min-height:48px;font-size:1rem}
  form.inline{display:grid;grid-template-columns:1fr;gap:.6rem}
  form.inline>div{flex:none!important}
  .inline{display:grid;grid-template-columns:1fr;gap:.6rem}
  /* the tabs go to the bottom of the screen, where the thumb is */
  nav.tabs{position:fixed;left:0;right:0;bottom:0;z-index:6;margin:0;background:var(--panel);border-top:1px solid var(--line);border-bottom:0;padding:0 0 env(safe-area-inset-bottom,0px);display:flex;flex-wrap:nowrap;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none;gap:0}
  nav.tabs::-webkit-scrollbar{display:none}
  nav.tabs a{flex:1 0 auto;justify-content:center;text-align:center;font-size:.8rem;line-height:1.15;padding:.5rem .8rem;white-space:nowrap;border-bottom:0;border-top:3px solid transparent;min-height:54px}
  nav.tabs a[aria-current]{border-color:var(--ink)}
  /* the progress row scrolls sideways in one line */
  .phases{grid-template-columns:1fr}
  .phases>li{display:grid;grid-template-columns:5.2rem 1fr 1fr;align-items:center;gap:.3rem}
  .phases .ph{margin:0}
  .phases .st{font-size:.85rem}
  .next a{width:100%;justify-content:center}
  .phases.four{grid-template-columns:1fr 1fr}
  .phases.four>li{display:block}
  .kpis{grid-template-columns:1fr 1fr;gap:.5rem .4rem}
  .kpi b{font-size:1.05rem}
  /* a wide table becomes a list of cards: one row = one card, one cell = one labelled line */
  table.stack{min-width:0}
  table.stack thead{position:absolute;left:-9999px}
  table.stack,table.stack tbody,table.stack tr,table.stack td{display:block;width:100%}
  table.stack tr{border:1px solid var(--line);border-radius:8px;padding:.6rem .7rem;margin:0 0 .6rem;background:var(--panel)}
  table.stack td{border:0;padding:.25rem 0;text-align:left!important;white-space:normal}
  table.stack td[data-l]::before{content:attr(data-l);display:block;font:600 .68rem var(--sans);letter-spacing:.04em;text-transform:uppercase;color:var(--soft);margin-bottom:.1rem}
  table.stack td.pair{float:left;width:50%;margin:0!important;padding:.45rem .65rem!important;border:1px solid var(--hair,var(--sand))!important;background:var(--panel)}
  td.pair.p1{border-radius:2px 0 0 0;border-right:0!important;border-bottom:0!important;margin-top:.5rem!important}
  td.pair.p2{border-radius:0 2px 0 0;border-bottom:0!important;margin-top:.5rem!important}
  td.pair.p3{border-radius:0 0 0 2px;border-right:0!important}
  td.pair.p4{border-radius:0 0 2px 0}
  table.stack tr::after{content:"";display:table;clear:both}
  table.stack td.pair+td.pair{margin-right:0}
  /* a decision line: balance beside the account, three fields in one row, a low text box */
  table.stack.lines tr{position:relative;padding-top:.5rem}
  table.stack.lines td.bal{position:absolute;top:.5rem;right:.7rem;width:auto;font-weight:600}
  table.stack.lines td.bal::before{display:none}
  table.stack.lines td:first-child{padding-right:6.2rem}
  table.stack.lines td.f3{display:inline-block;vertical-align:top;width:47%;margin-right:3%}
  table.stack.lines td.f3.wide{display:block;width:100%;margin-right:0}
  table.stack.lines textarea{min-height:2.9rem;height:2.9rem}
  table.stack td.hide-s{display:none}
  .scroll{overflow-x:visible}
  .scroll.keep{overflow-x:auto}
  ol.timeline li{padding-left:.9rem}
  ol.timeline .subj{font-size:.98rem}
  .diff{font-size:.7rem}
  .flash{font-size:.76rem;max-height:40vh;overflow:auto}
  details>summary{min-height:48px}
}
/* live view */
.live-tray{position:fixed;right:.8rem;bottom:calc(4.6rem + env(safe-area-inset-bottom,0px));z-index:9;display:grid;gap:.4rem;max-width:min(24rem,calc(100vw - 1.6rem))}
.live-toast{background:var(--ink);color:var(--on-dark);border-radius:14px;padding:.55rem .9rem;font-size:.85rem;box-shadow:0 4px 14px color-mix(in srgb,var(--ink) 18%,transparent)}
.live-notice{display:flex;flex-wrap:wrap;gap:.5rem .8rem;align-items:center;background:var(--panel);border:1.5px solid var(--next);border-radius:2px;padding:.7rem 1rem;margin:0 0 .8rem;position:sticky;top:3.4rem;z-index:4}
.live-notice span{flex:1 1 14rem}
.live-login{position:fixed;inset:0;z-index:20;background:color-mix(in srgb,var(--ink) 55%,transparent);display:grid;place-items:center;padding:1rem}
.live-login form{background:var(--panel);padding:1.2rem;width:min(26rem,100%);box-shadow:0 10px 40px color-mix(in srgb,var(--ink) 30%,transparent)}
.live-login h2{margin-top:0}
.live-login button{width:100%;margin-top:.8rem}
.restored{outline:2px solid var(--next);outline-offset:1px}
.live-job{background:var(--panel);border:1.5px solid var(--next);border-radius:2px;padding:.7rem 1rem;margin:.6rem 0}
.live-job b{font:400 1.1rem var(--serif)}
.live-job .step{font-weight:600;margin:.35rem 0 .3rem}
.live-job .bar{margin:0}
@media (prefers-reduced-motion:no-preference){
  .live-job .bar i{background-image:linear-gradient(90deg,transparent 0,color-mix(in srgb,var(--panel) 45%,transparent) 50%,transparent 100%);background-size:60% 100%;background-repeat:no-repeat;animation:go 1.1s linear infinite}
  @keyframes go{from{background-position:-60% 0}to{background-position:160% 0}}
}
.live-presence{background:var(--next-soft);border-bottom:2px solid var(--next);padding:.45rem 1rem;font-size:.95rem;color:var(--ink)}
.live-presence p{margin:.25rem 0;display:flex;flex-wrap:wrap;gap:.2rem .5rem;align-items:center}
/* presence: a flag, only for people (status pills are round). Square, a pointer, the name in mono capitals, the colour of the person */
.who-tag{display:inline-flex;align-items:center;white-space:nowrap;flex:none;color:var(--on-dark);border-radius:2px 2px 2px 0;padding:.12rem .45rem .12rem .4rem;font:700 .64rem/1.15 var(--sans);letter-spacing:.12em;text-transform:uppercase;position:relative;vertical-align:middle}
.who-tag::after{content:"";position:absolute;left:0;bottom:-5px;border-left:6px solid;border-left-color:inherit;border-bottom:5px solid transparent}
.who-tag::before{content:"";width:.42em;height:.42em;border-radius:50%;background:var(--on-dark);margin-right:.35em;flex:none}
.who-flags{display:flex;flex-wrap:wrap;gap:.3rem;pointer-events:none}
details.card,.card{position:relative}
details{position:relative}
details>.who-flags,.card>.who-flags{position:absolute;top:-.8rem;left:.8rem;z-index:3}
.who-flags.on-field{margin:.35rem 0 .3rem}
.who-row{cursor:pointer}
.who-row:hover{text-decoration:underline}
.who-row.clash{color:var(--final);font-weight:700}
.busy{outline:3px solid var(--final)!important;outline-offset:2px}
.field-busy{background:var(--final);color:var(--on-dark);font-weight:700;border-radius:8px;padding:.45rem .7rem;margin:.3rem 0}
@media (min-width:50rem){
  .live-tray{bottom:1rem}
}
.oggi .attn-co li a{color:inherit;text-decoration:none;background:none}
.oggi .attn-co li a:hover{text-decoration:underline}
.oggi ol.tl{list-style:none;margin:.5rem 0 .2rem;padding:0 0 0 1.1rem;position:relative}
.oggi ol.tl::before{content:"";position:absolute;left:.33rem;top:.4rem;bottom:.4rem;width:2px;background:var(--line)}
.oggi ol.tl li{position:relative;display:flex;gap:.6rem;align-items:baseline;padding:.18rem 0;font-size:.93rem}
.oggi ol.tl li::before{content:"";position:absolute;left:-1.02rem;top:.5rem;width:.62rem;height:.62rem;border-radius:50%;box-sizing:border-box;background:var(--panel);border:2px solid var(--line)}
.oggi ol.tl li.done::before{background:var(--green);border-color:var(--green)}
.oggi ol.tl li.ahead::before{border-color:var(--gold)}
.oggi ol.tl li.soon::before{border:3px solid var(--gold);width:.8rem;height:.8rem;left:-1.11rem;top:.42rem}
.oggi ol.tl li.soon .l{font-weight:600}
.oggi ol.tl li.late::before{border-radius:1px;background:var(--red);border-color:var(--red);transform:rotate(45deg)}
.oggi ol.tl li.late .l{color:var(--red);font-weight:600}
.oggi ol.tl li.ahead,.oggi ol.tl li.soon{color:var(--ink)}
.oggi ol.tl li.today{padding:.3rem 0}
.oggi ol.tl li.today::before{background:var(--gold);border-color:var(--gold);border-radius:1px;width:.9rem;height:3px;left:-1.16rem;top:50%}
.oggi ol.tl li.today .t{font:600 .64rem var(--sans);letter-spacing:.18em;text-transform:uppercase;color:var(--gold-text)}
.oggi ol.tl .t{color:var(--soft);white-space:nowrap;min-width:5.6rem}
.oggi .tl-more{margin:.1rem 0 0 1.1rem;font-size:.85rem}
.oggi ol.tl .t{font:500 .7rem var(--sans);letter-spacing:.04em;font-variant-numeric:tabular-nums}
/* Statistiche: fourteen days of activity as bars */
.stats ol.days{list-style:none;margin:.6rem 0 1rem;padding:0;display:grid;grid-template-columns:repeat(14,1fr);gap:3px;align-items:end;height:9rem}
.stats ol.days li{position:relative;height:100%;display:flex;flex-direction:column;justify-content:flex-end;align-items:center}
.stats ol.days i{display:block;width:100%;min-height:2px;background:var(--taupe);border-radius:1px 1px 0 0}
.stats ol.days li.today i{background:var(--gold)}
.stats ol.days .n{font:400 .8rem var(--serif);color:var(--ink);margin-bottom:.15rem}
.stats ol.days .d{position:absolute;bottom:-1.4rem;font:500 .56rem var(--sans);letter-spacing:.06em;color:var(--soft);white-space:nowrap;writing-mode:vertical-rl;transform:rotate(180deg);bottom:auto;top:100%;margin-top:.2rem}
.stats ol.days{margin-bottom:3.2rem}
.stats table.who-stats{width:100%;border-collapse:collapse}
.stats table.who-stats td,.stats table.who-stats th{padding:.45rem .3rem;border-bottom:1px solid var(--line);white-space:nowrap}
.stats table.who-stats th{text-align:left}
.stats table.who-stats .num{text-align:right}
table.ret-t{margin-top:.3rem}table.ret-t th,table.ret-t td{vertical-align:middle}table.ret-t th.mk,table.ret-t td.mk{text-align:center;width:1%;padding:.4rem .35rem}table.ret-t th.mk{white-space:nowrap;letter-spacing:.02em!important;font-size:.7rem}table.ret-t td:first-child a{display:block;padding:.55rem 0;font-weight:600;font-size:.95rem}.mk-yes,.mk-no,.mk-wait{display:inline-block;position:relative;width:1.3rem;height:1.3rem;vertical-align:middle}.mk-wait{width:1.05rem;height:1.05rem;border:.22rem solid var(--gold);border-radius:50%}.mk-yes::after{content:"";position:absolute;left:.4rem;top:-.08rem;width:.46rem;height:.9rem;border:solid var(--green);border-width:0 .25rem .25rem 0;transform:rotate(45deg)}.mk-no::before,.mk-no::after{content:"";position:absolute;left:50%;top:50%;width:1.3rem;height:.25rem;border-radius:2px;background:var(--red);transform:translate(-50%,-50%) rotate(45deg)}.mk-no::after{transform:translate(-50%,-50%) rotate(-45deg)}
.st-tools{display:flex;flex-wrap:wrap;gap:.4rem;margin:.1rem 0 .6rem}
.st-tools a{display:inline-flex;align-items:center;min-height:40px;padding:.3rem .9rem;border:1px solid var(--line);border-radius:999px;color:var(--ink);text-decoration:none;font-weight:600;font-size:.92rem;background:var(--panel)}
.st-tools a.go{background:var(--dark);border-color:var(--dark);color:var(--on-dark)}
/* the work screen: one company, one step */
.work-pos{font:500 .66rem var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--gold-text);margin:.2rem 0}
.work h2{margin-bottom:.1rem}
.work-skip{display:flex;justify-content:space-between;gap:.6rem;margin:.8rem 0 0;font-size:.95rem}
.req{color:var(--red);font-weight:700}
.fin-scroll{overflow-x:auto;margin:.4rem 0 .6rem;border:1px solid var(--hair);border-radius:2px}
table.fin-t{border-collapse:collapse;min-width:100%;font:400 .84rem var(--sans);font-variant-numeric:tabular-nums}
table.fin-t th,table.fin-t td{padding:.32rem .55rem;border-bottom:1px solid var(--hair);white-space:nowrap}
table.fin-t td{text-align:right}
table.fin-t thead th{text-align:right;font:500 .62rem var(--sans);letter-spacing:.16em;color:var(--soft)}
table.fin-t thead th:first-child,table.fin-t tbody th{text-align:left}
table.fin-t thead th:first-child{position:sticky;left:0;background:var(--sheet);z-index:2;box-shadow:1px 0 0 var(--hair)}
table.fin-t tbody th{font:400 .84rem/1.3 var(--sans)!important;letter-spacing:0!important;text-transform:none!important;color:var(--ink)!important;white-space:normal;min-width:8.5rem;max-width:11rem;position:sticky;left:0;background:var(--sheet);z-index:1;box-shadow:1px 0 0 var(--hair)}
table.fin-t tr.k-tot th,table.fin-t tr.k-tot td{font-weight:700;border-top:1.5px solid var(--ink)}
table.fin-t tr.k-sub th,table.fin-t tr.k-sub td{font-weight:600}
table.fin-t tr.k-pct th,table.fin-t tr.k-pct td,table.fin-t tr.k-x td,table.fin-t tr.k-d td{color:var(--soft);font-size:.78rem}
table.fin-t tr.k-pct th{padding-left:1.2rem;font-style:italic;color:var(--soft)!important}
.out-acts{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center}.out-acts .act,.out-wait .act,.out-acts button{display:inline-flex;align-items:center;min-height:44px;width:auto;padding:0 1.1rem;border:1.5px solid var(--ink);border-radius:999px;text-decoration:none;color:var(--ink);font-weight:600;background:none}.out-wait .act{min-height:40px;margin:.2rem .4rem .2rem 0}.out-atts{margin:.2rem 0 .6rem}.out-atts a{display:inline-block;padding:.55rem 0}.out textarea{width:100%;font:inherit;margin-top:.4rem}.out input[readonly]{width:100%;font:inherit}.out-wait{border-left:3px solid var(--next);padding-left:.6rem} .st-tasks{list-style:none;padding:0;margin:.3rem 0 .9rem}.st-tasks li.task{border-left:3px solid var(--next);background:var(--sheet);padding:.45rem .7rem;margin:.45rem 0}.st-tasks .tk-what{margin:0;display:flex;gap:.5rem;justify-content:space-between;align-items:baseline}.tk-t{flex:1;min-width:0}.st-tasks .tk-wait{color:var(--soft);font-size:.85rem;white-space:nowrap}.st-tasks .tk-detail{margin:.15rem 0 .35rem}.st-tasks form{margin:.3rem 0 0}.st-tasks .commit{width:auto}.st-tasks .tk-in{flex:2 1 14rem}.st-tasks .tk-in input{width:100%}.sl-prop{border-left:3px solid var(--next);padding:.1rem 0 .1rem .8rem;margin:.6rem 0 1rem}.sl-picks{list-style:none;padding:0;margin:.4rem 0}.sl-picks li{margin:.4rem 0}input[type=date]{font:inherit;font-size:16px;padding:.55rem .6rem;width:100%;max-width:16rem}.dr-list{list-style:none;padding:0;margin:.4rem 0 .9rem}.dr-list li{margin:.45rem 0;display:flex;flex-wrap:wrap;gap:.3rem .6rem;align-items:center}.dr-list form.inline{margin:0}.dr-pick{display:flex;gap:.6rem;align-items:flex-start}.dr-pick input{margin-top:.25rem}.dr-qa{margin:.6rem 0}.dr-to{border:0;padding:0;margin:.6rem 0}.dr-to label{display:flex;gap:.5rem;align-items:center;margin:.3rem 0}
.coll-words{list-style:none;padding:0;margin:.4rem 0}.coll-words li{border-left:3px solid var(--line);padding:.15rem .6rem;margin:.2rem 0}.coll-words li.ok-w{border-color:var(--green)}.coll-words li.ko-w{border-color:var(--final)}
.coll-kit summary .pill,.coll-before summary .pill{margin-left:.5rem}.kit-files{padding-left:1.1rem;margin:.6rem 0}.kit-files li{margin:.45rem 0;overflow-wrap:anywhere}.kit-pre{white-space:pre-wrap;overflow-wrap:anywhere;font:.8rem/1.45 var(--mono);background:var(--soft-panel);border-radius:2px;padding:.7rem .8rem;margin:.5rem 0 0;max-height:70vh;overflow:auto}.coll-before{margin:.3rem 0 .6rem}.coll-before .coll-words li{opacity:.8}
.coll-imgs{display:flex;flex-wrap:wrap;gap:.45rem;margin:.4rem 0 .2rem}.coll-imgs a{display:block;line-height:0}.coll-imgs img{height:5.5rem;max-width:10rem;object-fit:cover;border-radius:2px;border:1px solid var(--line);background:var(--soft-panel)}
.stmt-files{list-style:none;padding:0}.stmt-files>li{border:1px solid var(--line);border-radius:2px;padding:.5rem .7rem;margin:0 0 .5rem}
.stmt-why{font-size:.86rem;margin:.2rem 0 .4rem}.stmt-problems li.done{color:var(--soft)}.stmt-tie{margin:.8rem 0}
.rv-text{border-left:3px solid var(--line);padding:.2rem 0 .2rem 1rem;margin:.8rem 0 1rem}.rv-text section{margin:1rem 0}.rv-text h3{margin:.2rem 0 .3rem}
.rv-title{font:400 1.6rem/1.15 var(--serif);letter-spacing:-.02em;margin:.2rem 0}.rv-sub{color:var(--soft);margin:.2rem 0 .8rem}.rv-lead{font-weight:600}.rv-take{border-top:1px solid var(--line);padding-top:.4rem;font-style:italic}
/* a company in a list: one tap, three or four short lines (name and wait; station and action; facts; last event) */
ul.co-list{list-style:none;margin:0;padding:0}
.corow[hidden],tr[data-q][hidden]{display:none!important}
.corow{border-top:1px solid var(--line);display:flex;flex-wrap:wrap;align-items:flex-start;gap:0 .5rem}
.corow>details{flex:0 0 100%}
.corow:first-child{border-top:0}
.corow>a{flex:1;min-width:0;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:.12rem .6rem;padding:.6rem .15rem;color:var(--ink);text-decoration:none;min-height:44px}
.corow>a:active{background:var(--soft-panel)}
.corow input[type=checkbox]{width:1.3rem;height:1.3rem;margin:.75rem 0 0 .1rem;flex:none}
.co-name{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.co-wait{font:600 .74rem var(--sans);letter-spacing:.04em;white-space:nowrap;align-self:center;color:var(--soft)}
.lv1 .co-wait{color:var(--ink)}
.lv0 .co-wait{color:var(--red)}
.co-sub,.co-facts,.co-last{grid-column:1/-1;font-size:.88rem;line-height:1.35;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--soft)}
.co-sub{color:var(--ink)}
.co-last{font-size:.8rem}
.co-st{font:600 .56rem/1.7 var(--sans);letter-spacing:.14em;text-transform:uppercase;border:1px solid var(--line);border-radius:999px;padding:.02rem .45rem;margin-right:.45rem;vertical-align:.08em}
.co-facts>span{margin-right:.75rem}
.co-facts .mark{width:.6em;height:.6em;margin-right:.25em}
.st .co-list .co-last{font:.76rem var(--sans)}
.pickrow{display:flex;align-items:center;gap:.7rem;min-height:48px;width:100%;cursor:pointer}
.pickrow input{width:1.3rem;height:1.3rem;flex:none}
nav.views a.add{margin-left:auto;border-color:var(--ink)}
.find{display:flex;align-items:center;gap:.6rem;margin:0 0 .5rem}
.find input{flex:1;min-height:44px;font-size:1rem;padding:.4rem .9rem}
.find input{border-radius:999px}
.find [data-filter-count]{font:500 .74rem var(--sans);white-space:nowrap}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
@media (max-width:799px){
  .all-table{display:none}
  ul.co-list.all{background:var(--panel);border:1px solid var(--line);border-radius:2px;padding:0 .8rem}
  /* the strip: one row that scrolls sideways, not four rows of boxes */
  ol.line-strip.line-strip{display:flex;overflow-x:auto;gap:.3rem;padding-bottom:.3rem;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch}
  ol.line-strip.line-strip li{flex:0 0 5.1rem;scroll-snap-align:start}
  nav.views a{padding:.3rem .75rem;font-size:.92rem}
}
@media (min-width:800px){
  ul.co-list.all{display:none}
}
/* the line: two views, "per stazione" and "tutte" */
nav.views{display:flex;flex-wrap:wrap;gap:.4rem;margin:.2rem 0 .9rem}
nav.views a{white-space:nowrap;flex:none;padding:.35rem .9rem;border:1px solid var(--line);border-radius:999px;color:var(--ink);text-decoration:none;background:var(--panel);min-height:44px;display:inline-flex;align-items:center;font-weight:600}
nav.views a[aria-current]{background:var(--dark);color:var(--on-dark);border-color:var(--dark)}
p.sort{margin:0 0 .6rem;font-size:.92rem}
p.sort a{margin-right:.5rem}
p.sort a[aria-current]{font-weight:700;text-decoration:none;color:var(--ink)}
/* the line: a strip of stations, then one queue for each station */
.line-strip{list-style:none;margin:.2rem 0 1rem;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:.35rem}
@media (min-width:800px){
  .line-strip{grid-template-columns:repeat(13,1fr)}
}
.line-strip li a,.line-strip li>div{display:flex;flex-direction:column;align-items:center;gap:.05rem;padding:.45rem .2rem .4rem;border:1px solid var(--line);border-radius:2px;background:var(--panel);color:var(--ink);text-decoration:none;min-height:44px}
.line-strip li b{font:400 1.5rem/1.1 var(--serif);font-variant-numeric:lining-nums}
.line-strip li span{text-transform:uppercase;color:var(--soft);text-align:center}
.line-strip li i{font:500 .6rem var(--sans);font-style:normal;color:var(--soft)}
.line-strip li.empty>div{opacity:.45}
.line-strip li.slow a{border-color:var(--gold)}
.line-strip li.late a{border-color:var(--red);border-width:2px}
.line-add{margin:0 0 1rem}
.line-add a{display:inline-flex;align-items:center;min-height:44px;padding:.5rem 1.1rem;border-radius:999px;background:var(--dark);color:var(--on-dark);font:600 .95rem var(--sans);text-decoration:none}
.st h2 .pill{margin-left:.4rem;vertical-align:middle}
.st .st-h input[type=checkbox]{width:1.2rem;height:1.2rem;margin:0 .2rem 0 0;align-self:center}
.st ul.st-rows{list-style:none;margin:0;padding:0}
.st ul.st-rows li{padding:.5rem 0;border-top:1px solid var(--line)}
.st ul.st-rows li:first-child{border-top:0}
.st .st-h{display:flex;flex-wrap:wrap;align-items:baseline;gap:.15rem .5rem;margin:0}
.st .st-h .wait{margin-left:auto;color:var(--soft);white-space:nowrap}
.st li.lv0 .wait{color:var(--red);font-weight:600}
.st li.lv1 .wait{color:var(--ink);font-weight:600}
.st .st-a{margin:.15rem 0 0 1.1rem;font-size:.93rem}
/* the documents of a company: a bar at the top filters (the name, what it is, its kind); a row for each document */
.doc-bar{position:sticky;top:0;z-index:4;background:var(--paper);padding:.5rem 0 .3rem;margin:0 0 .4rem}
.doc-chips{display:flex;gap:.4rem;margin:.5rem 0 0;overflow-x:auto;padding-bottom:.2rem;scrollbar-width:none}
.chip{flex:none}
.chip{min-height:44px;padding:.3rem .9rem;border:1.5px solid var(--line);border-radius:999px;background:var(--panel);color:var(--ink);font:600 .9rem var(--sans);width:auto!important}
.chip[aria-pressed=true]{background:var(--ink);border-color:var(--ink);color:var(--on-dark)}
ul.doc-list li{border:1px solid var(--line);border-radius:2px;background:var(--panel);margin:0 0 .5rem}
ul.doc-list li a{display:flex;flex-direction:column;gap:.2rem;padding:.7rem .85rem;text-decoration:none;color:var(--ink)}
.doc-top{display:flex;align-items:flex-start;gap:.6rem;justify-content:space-between}
.doc-what{font-size:1.02rem}
.doc-kind{flex:none;font-size:.75rem}
.doc-name{font:500 .82rem var(--sans);color:var(--ink);text-decoration:underline;text-decoration-color:var(--gold);text-underline-offset:3px;overflow-wrap:anywhere}
.doc-meta{font-size:.85rem;color:var(--soft)}
/* a frame that saves (data-sframe): its bar says whether what it holds is saved, and has the button. Saved: a green
   circle. Not saved: a gold ring that blinks, and the frame turns gold. Saving: the ring turns. Refused: a bordeaux
   triangle and the reason. The bar stays in view at the bottom while the frame is on the screen (above the tabs). */
.sframe{border:2px solid var(--line);border-radius:2px;padding:.9rem .9rem 0;margin:.9rem 0;background:var(--panel)}
.sframe[data-state=dirty],.sframe[data-state=saving]{border-color:var(--gold);box-shadow:0 0 0 1px var(--gold)}
.sframe[data-state=error]{border-color:var(--red);box-shadow:0 0 0 1px var(--red)}
.sframe-head{margin:0 0 .2rem;font:500 .64rem/1.5 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--soft)}
.sframe-bar{position:sticky;bottom:0;z-index:3;display:flex;flex-wrap:wrap;align-items:center;gap:.6rem .8rem;margin:.7rem -.9rem 0;padding:.75rem .9rem;background:var(--panel);border-top:1.5px solid var(--line);border-radius:0}
.sframe-state{flex:1 1 11rem;min-width:0;display:flex;flex-wrap:wrap;align-items:center;gap:.15rem .55rem;margin:0}
.sframe-word{font-weight:700;font-size:1.02rem}
.sframe[data-state=saved] .sframe-word{color:var(--green)}
.sframe[data-state=error] .sframe-word{color:var(--red)}
.sframe-msg{flex-basis:100%;font-size:.9rem;color:var(--soft)}
.sframe[data-state=error] .sframe-msg{color:var(--red)}
.sframe-light{flex:none;width:1.15rem;height:1.15rem;box-sizing:border-box;border-radius:50%;background:var(--green)}
.sframe[data-state=dirty] .sframe-light,.sframe[data-state=saving] .sframe-light{background:transparent;border:3.5px solid var(--gold)}
.sframe[data-state=dirty] .sframe-light{animation:sframe-blink 1.1s ease-in-out infinite}
.sframe[data-state=saving] .sframe-light{border-top-color:transparent;animation:sframe-turn .8s linear infinite}
.sframe[data-state=error] .sframe-light{border-radius:0;background:var(--red);clip-path:polygon(50% 0,100% 100%,0 100%)}
@keyframes sframe-blink{50%{opacity:.12}}
@keyframes sframe-turn{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.sframe-light{animation:none!important}}
.sframe-bar .sframe-save{flex:none;width:auto;min-height:48px;padding:0 1.8rem;font-weight:700;font-size:1.02rem;margin-left:auto}
.sframe[data-state=dirty] .sframe-save,.sframe[data-state=error] .sframe-save{background:var(--ink);border-color:var(--ink);color:var(--on-dark)}
@media (max-width:50rem){body:has(nav.tabs) .sframe-bar{bottom:calc(46px + env(safe-area-inset-bottom,0px))}}
/* the retainer as a checklist: a big box for each step; a tick opens its files and its note; a recorded step is a green box */
ol.ret-list{list-style:none;margin:.7rem 0 .5rem;padding:0;display:grid;gap:.65rem}
.ret-item{position:relative}
.ret-cb{position:absolute;opacity:0;width:1px;height:1px;margin:0;pointer-events:none}
.ret-row{display:flex;align-items:center;gap:.85rem;padding:.7rem .9rem;border:1.5px solid var(--line);border-radius:2px;background:var(--panel);min-height:3.7rem;margin:0!important;cursor:pointer}
.ret-item.done .ret-row{cursor:default;background:transparent}
label.ret-row,label.ret-row *{font:1rem/1.35 var(--sans)!important;letter-spacing:0!important;text-transform:none!important;color:var(--ink)}
.ret-txt{display:flex;flex-direction:column;gap:.15rem;min-width:0}
.ret-txt b,label.ret-row .ret-txt b{font-weight:700!important;font-size:1.06rem!important}
.ret-txt .muted,label.ret-row .ret-txt .muted{font-size:.88rem!important;color:var(--soft)!important}
.ret-box{flex:none;position:relative;width:2rem;height:2rem;box-sizing:border-box;border:2.5px solid var(--ink);border-radius:8px;background:var(--panel)}
.ret-cb:checked+.ret-row{border-color:var(--ink);box-shadow:0 0 0 1.5px var(--ink)}
.ret-cb:checked+.ret-row .ret-box{background:var(--ink)}
.ret-box.on{background:var(--green);border-color:var(--green)}.ret-box.ring{border-radius:50%;background:transparent}.ret-box.ring.wait{border-color:var(--gold);border-width:.22rem}.ret-box.ring.warn{border-color:var(--red)}
.ret-cb:checked+.ret-row .ret-box::after,.ret-box.on::after{content:"";position:absolute;left:.52rem;top:.14rem;width:.44rem;height:.92rem;border:solid var(--on-dark);border-width:0 .25rem .25rem 0;transform:rotate(45deg)}
.ret-cb:focus-visible+.ret-row{outline:3px solid var(--gold);outline-offset:2px}
.ret-fields{display:none;margin:.55rem 0 .2rem;padding:.2rem 0 .2rem 1rem;border-left:3px solid var(--ink)}
.ret-cb:checked~.ret-fields,.ret-item:has(.restored) .ret-fields{display:block}
.ret-fields textarea{min-height:3rem}
.ret-done{margin:.35rem 0 0 1rem}.ret-done .note{white-space:pre-wrap;color:var(--soft)}.ret-done .docs{font-size:.9rem}
.st details.attach{margin:.3rem 0 0 1.1rem}
.st details.attach summary{font-size:.9rem;color:var(--soft)}
.with-btn{display:flex;gap:.4rem;align-items:stretch}
.with-btn input{flex:1;min-width:0}
button.side{flex:none;width:auto;min-height:44px;padding:.3rem .8rem;font-size:.88rem;background:var(--panel);color:var(--ink);border:1px solid var(--line);border-radius:999px}
p.quote{font-size:.82rem;margin:.2rem 0 .4rem;line-height:1.35}
.csv-head{font:.78rem/1.4 var(--mono);white-space:pre-wrap;overflow-wrap:anywhere;background:var(--soft-panel);padding:.5rem .6rem;border-radius:2px}
.line-strip li span{font:500 .52rem/1.3 var(--sans);letter-spacing:.08em;overflow-wrap:normal;word-break:normal}
.st .st-h .wait{font:500 .72rem var(--sans)}
/* Oggi: the morning on one screen */
.oggi ul{list-style:none;margin:0;padding:0}
.oggi .due-co{padding:.5rem 0 .3rem;border-top:1px solid var(--line)}
.oggi .due-co:first-of-type{border-top:0;padding-top:0}
.oggi .due-h{margin:0 0 .1rem}
.oggi ul.due li{display:flex;gap:.6rem;align-items:baseline;padding:.3rem 0}
.oggi ul.due a{color:var(--ink)}
.oggi ul.due li.lv0 span{font-weight:600}
/* each mandate is its own box: a clear edge between one company and the next */
.oggi ul.cos{display:grid;gap:.8rem}.oggi ul.cos>li{border:1px solid var(--line);border-radius:2px;padding:.8rem .9rem .7rem;background:var(--panel)}
.oggi .co-h{display:flex;flex-wrap:wrap;gap:.2rem .6rem;align-items:baseline;margin:0 0 .35rem}
.oggi .co-h .pill{margin-left:auto}
.oggi .co-next{margin:.45rem 0 .3rem}
.oggi .co-next a{font-weight:600}
/* a record shows its values; «Modifica 🖊️» at its top right turns them into fields in place, with «Salva» and «Annulla»
   (v0.78.0; the founder: «this is a bad editing ui design; better: add a "Edit 🖊️" top right, which transforms the view
   into editable fields») */
.ed-row .e,.ed-row .ed-save,.ed-row .ed-cancel{display:none}
.ed-row[data-editing] .e{display:block}.ed-row[data-editing] .rl-in.e{display:flex}
.ed-row[data-editing] .ed-save,.ed-row[data-editing] .ed-cancel{display:inline-flex}
.ed-row[data-editing] .v,.ed-row[data-editing] .ed-open{display:none}
.ed-row[data-editing]>td{background:var(--soft-panel)}
.ed-act{text-align:right;vertical-align:top;white-space:nowrap;width:1%}
.ed-btns{display:inline-flex;gap:.4rem}.ed-btns button{width:auto;min-height:44px;padding:0 1rem;font-size:.85rem;display:inline-flex;align-items:center;justify-content:center;white-space:nowrap}
.rl-in input[type=checkbox]{width:22px;height:22px}
@media (min-width:50.01rem){.ed-row[data-editing] input.e[inputmode=email]{min-width:15rem}.ed-row[data-editing] .ed-f input,.ed-row[data-editing] .ed-f select{min-width:11rem}}
.ed-f{margin:.4rem 0}.ed-f>span{display:block;font:600 .64rem/1.2 var(--sans);letter-spacing:.18em;text-transform:uppercase;color:var(--soft);margin-bottom:.25rem}
.ed-more{margin-top:.5rem}
@media (max-width:50rem){
  table.stack tr.ed-row{position:relative}
  table.stack tr.ed-row>td.ed-act{position:absolute;top:.45rem;right:.5rem;width:auto;padding:0}
  table.stack tr.ed-row:not([data-editing])>td:first-child{padding-right:9rem}
  table.stack tr.ed-row[data-editing]{display:flex;flex-direction:column}
  table.stack tr.ed-row[data-editing]>td.ed-act{position:static;order:-1;display:flex;justify-content:flex-end;padding:0 0 .4rem}
}
/* the tab «Contatti» of a company */
.ct td{vertical-align:top}.ct td[data-l=Email]{white-space:nowrap}.ct-note{margin:.2rem 0 0;font-size:.85rem;white-space:pre-wrap}.ct-short{margin:.3rem 0 .6rem;padding-left:1.1rem}
/* the rubrica of the buyers of the firm: its lists as chips that filter, a tick for each row, the bar of the ticked */
.rl-chips{display:flex;flex-wrap:wrap;gap:.4rem;margin:.6rem 0}.rl-n{font-weight:400;color:var(--faint);margin-left:.2rem}
.chip[aria-pressed=true] .rl-n{color:var(--bone-2)}.rl-edit{border-top:1px solid var(--line);padding-top:.5rem;margin-top:.5rem}
.rl-bulk{position:sticky;top:0;z-index:2;background:var(--panel);padding:.5rem 0;border-bottom:1px solid var(--line);margin-bottom:.5rem}
.rl-tick input{width:26px;height:26px}.rl-in{border:0;padding:0;margin:.6rem 0;display:flex;flex-wrap:wrap;gap:.3rem 1rem}.rl-in legend{padding:0;font:600 .64rem/1.2 var(--sans);letter-spacing:.18em;text-transform:uppercase;color:var(--soft);margin-bottom:.3rem}
/* the page of the identity of the firm */
header.top .who .who-studio{color:var(--bone);text-decoration:none;margin-right:.9rem;font:600 .64rem/1 var(--sans);letter-spacing:.18em;text-transform:uppercase}
header.top .who .who-studio[aria-current]{color:var(--gold-lt)}
@media (max-width:420px){header.top .who{gap:.45rem;letter-spacing:.1em}header.top .who .who-studio{margin-right:.35rem;letter-spacing:.1em}header.top .who button{letter-spacing:.1em}}   /* the developer has three links more: the row fits at 320 px */
.st-help{margin:.3rem 0 0;font-size:.85rem}.st-logo{max-width:14rem;max-height:6rem;background:var(--on-dark);border:1px solid var(--line);padding:.4rem}
.st-end label.why{display:flex;gap:.6rem;align-items:center;font-weight:600}.st-end input[type=checkbox]{width:26px;height:26px;flex:none;margin:0}
.st-log{list-style:none;margin:0;padding:0}.st-log li{padding:.35rem 0;border-top:1px solid var(--line)}
/* the list of the buyers of a company, its import and its sending */
.rb td{vertical-align:top}.rb-st{display:inline-flex;align-items:baseline;gap:.35rem}.rb-out{margin-top:.4rem;gap:.4rem}
.rb-fix,.rb-add{margin-top:.5rem}.rb-add{border-top:1px solid var(--line);padding-top:.5rem}
.imp-rep{border:1px solid var(--line);border-left:2px solid var(--gold);padding:.6rem .9rem;margin:.6rem 0 .9rem;background:var(--soft-panel)}
.imp-rep h3{border-top:0;padding-top:0;margin-top:.2rem}#risposte .reply h3{border-top:0;padding-top:0;margin-top:.4rem}
.imp-list{list-style:none;margin:.3rem 0 0;padding:0}.imp-list li{display:flex;gap:.45rem;align-items:baseline;margin:.2rem 0}
#invio .odd{border-top:1px solid var(--line);margin-top:.8rem;padding-top:.6rem}
#risposte .reply{border-top:1px solid var(--line);margin-top:.8rem;padding-top:.4rem}
blockquote.rq{margin:.4rem 0 .8rem;padding:.6rem .9rem;border-left:3px solid var(--line);background:var(--paper);white-space:pre-wrap;font-size:.92rem}
/* the track of the buyers: six steps; done = green dot, in progress = gold ring, left = grey, angular where it stopped */
.track .tk-head,.track ol.tk{display:grid;grid-template-columns:repeat(6,1fr);list-style:none;margin:0;padding:0}
.track .tk-head{margin:.2rem 0 .1rem}
.track .tk-head span{font:500 .5rem/1.3 var(--sans);letter-spacing:.03em;text-transform:uppercase;color:var(--soft);text-align:center;overflow-wrap:normal}
.track .tk-row{padding:.75rem 0 .6rem;border-top:1px solid var(--line)}
.track .tk-row.out{opacity:.55}
.track .tk-top{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:.2rem .6rem;margin:0}
.track .tk-offer{white-space:nowrap;border:1px solid var(--line);border-radius:999px;padding:.05rem .55rem;background:var(--panel)}
.track .tk-offer{font:500 .72rem var(--sans);letter-spacing:.02em}
.track .tk-name{font-weight:700;color:var(--ink);text-decoration:none}
.track .tk-name:hover{text-decoration:underline}
.track ol.tk li{position:relative;height:1.9rem;margin:0}
.track ol.tk li::before{content:"";position:absolute;top:50%;left:0;right:0;height:3px;margin-top:-1.5px;background:var(--line)}
.track ol.tk li:first-child::before{left:50%}
.track ol.tk li:last-child::before{right:50%}
.track ol.tk li.done::before{background:var(--green)}
/* the step in progress (or where a buyer stopped): the line comes in green, goes on grey */
.track ol.tk li.now::before,.track ol.tk li.stop::before{background:linear-gradient(90deg,var(--green) 50%,var(--line) 50%)}
.track ol.tk li::after{content:"";position:absolute;top:50%;left:50%;width:.8rem;height:.8rem;margin:-.4rem 0 0 -.4rem;border-radius:50%;background:var(--panel);border:2px solid var(--line);box-sizing:border-box}
.track ol.tk li.done::after{background:var(--green);border-color:var(--green)}
.track ol.tk li.now::after{width:1.15rem;height:1.15rem;margin:-.575rem 0 0 -.575rem;border:3px solid var(--gold)}
.track ol.tk li.stop::after{border-radius:1px;background:var(--soft);border-color:var(--soft);transform:rotate(45deg)}
.track .tk-note{margin:.1rem 0 0;font-size:.92rem;color:var(--soft)}
.track .tk-note b{color:var(--ink);font-weight:600}
@media (min-width:800px){
  .track .tk-head,.track .tk-row{display:grid;grid-template-columns:14rem 1fr;column-gap:1rem;align-items:center}
  .track .tk-head{grid-template-columns:15rem repeat(6,1fr);column-gap:0}
  .track .tk-head::before{content:""}
  .track .tk-note{grid-column:2}
}
/* ================= the style of the interface: the design system of the firm, v3 (v0.69.0) =================
   Before v0.69.0 «Registro» (ledger sheets, wide type, mono capitals). Now the look of the documents of the firm:
   a serif title over a letterspaced label, warm near-black and gold, flat cards with a hairline, figures and
   numerals in the serif, the Duomo in black and white on the dark grounds only. What does not change: the record
   (a decision is a stamp, numbers sit in numbered ruled rows) and the meanings of shapes and colours: round status
   pills, pill = routine, bordeaux cut corner = final, the flag = a person, a field to write in is paper. */
body{--sheet:var(--panel);--rule:var(--line);--hair:var(--line);background:var(--paper)}
/* header: the dark ground of the design system. A view of the Duomo, in black and white, under a veil that is darkest
   where the words are; each part of Linea has its view (data-foto, look.go). One row (the name, the person), one row of
   the parts as letterspaced words, the path; a gold hairline closes it */
header.top{position:relative;isolation:isolate;background:var(--charcoal) url(/static/img/fascia-guglie.jpg) center 30%/cover no-repeat;padding:.75rem 1rem .5rem;gap:.35rem .9rem;border-bottom:1px solid color-mix(in srgb,var(--gold-lt) 60%,transparent)}
header.top::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,color-mix(in srgb,var(--charcoal) 90%,transparent) 0,color-mix(in srgb,var(--charcoal) 70%,transparent) 45%,color-mix(in srgb,var(--charcoal) 55%,transparent) 100%)}
header.top{text-shadow:0 1px 2px color-mix(in srgb,var(--ink) 45%,transparent)}
header.top[data-foto=notte]{background-image:url(/static/img/fascia-notte.jpg);background-position:center 40%}
header.top[data-foto=facciata]{background-image:url(/static/img/fascia-facciata.jpg);background-position:center 45%}
header.top[data-foto=porta]{background-image:url(/static/img/fascia-porta.jpg);background-position:center 40%}
header.top[data-foto=citta]{background-image:url(/static/img/fascia-citta.jpg);background-position:center 60%}
header.top[data-foto=storico]{background-image:url(/static/img/fascia-storico.jpg);background-position:center 40%}
header.top a.brand{font:400 1.5rem/1.05 var(--serif);letter-spacing:-.01em;color:var(--bone)}
header.top .who{font:500 .64rem var(--sans);letter-spacing:.2em;text-transform:uppercase;gap:.7rem}
header.top .who button{border:0;background:none;padding:0;min-height:44px;width:auto;font:500 .64rem var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--bone-2);text-decoration:underline;text-decoration-color:var(--gold-lt);text-underline-offset:4px}
nav.where{order:3;flex-basis:100%;gap:0 1.3rem;align-items:baseline}
nav.where a{border:0;border-radius:0;padding:0;min-height:44px;background:none!important;color:var(--bone-2);font:500 .66rem var(--sans);letter-spacing:.2em;text-transform:uppercase}
nav.where a[aria-current]{color:var(--bone);box-shadow:inset 0 -1.5px 0 var(--gold-lt)}
.where-go{display:contents}
/* the Excel inside the chat (v0.83.0): beside the chat on a computer, one or the other on a phone */
main:has(.ch-split){max-width:118rem;padding-bottom:.4rem}
body:has(.ch-split) .page-end{height:0}
.ch-switch{display:none}
.ch-split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);gap:1.2rem;align-items:start}
.ch-sheet{position:sticky;top:.6rem;max-height:calc(100vh - 2.6rem);display:flex;flex-direction:column;background:var(--panel);border:1px solid var(--line);border-radius:12px;overflow:hidden}
.sh-head{padding:.6rem .8rem;border-bottom:1px solid var(--line);display:flex;gap:.6rem;align-items:flex-start;justify-content:space-between;flex-wrap:wrap}.sh-head p{margin:0;font-size:.85rem;overflow-wrap:anywhere}.sh-pick select{font-size:.8rem;max-width:16rem}
.sh-tabs{display:flex;gap:.25rem;overflow-x:auto;padding:.4rem .5rem;border-bottom:1px solid var(--line);scrollbar-width:thin}
.sh-tabs button{flex:none;width:auto;min-height:36px;padding:0 .7rem;border:1px solid var(--line);border-radius:17px;background:var(--panel);font:500 .78rem var(--sans);color:var(--soft)}
.sh-tabs button[aria-selected=true]{background:var(--ink);border-color:var(--ink);color:var(--on-dark)}
.sh-tabs button b{color:var(--gold);font-weight:700}.sh-tabs button[aria-selected=true] b{color:var(--gold-lt)}
.sh-grid{overflow:auto;flex:1;min-height:0}
table.sh{border-collapse:collapse;font:.78rem/1.3 var(--sans);font-variant-numeric:tabular-nums;table-layout:fixed}table.sh col.rn{width:38px}
table.sh th{position:sticky;background:var(--sheet-head);color:var(--faint);font-weight:500;font-size:.7rem;border:1px solid var(--line);padding:.15rem .35rem;text-align:center}
table.sh thead th{top:0;z-index:2}table.sh tbody th{left:0;z-index:1;min-width:2rem}table.sh thead th:first-child{left:0;z-index:3}
table.sh td{border:1px solid var(--sheet-line);padding:.18rem .4rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--ink)}
table.sh td.n{text-align:right}table.sh td.b{font-weight:700}
table.sh td.chg{box-shadow:inset 0 0 0 2px var(--gold);background-image:linear-gradient(color-mix(in srgb,var(--gold-lt) 18%,transparent),color-mix(in srgb,var(--gold-lt) 18%,transparent))}
@media (max-width:1100px){
  .ch-switch{display:flex;gap:.4rem;margin:0 0 .6rem;grid-column:1/-1}
  .ch-switch button{flex:1;min-height:44px;border-radius:22px;border:1px solid var(--line);background:var(--panel);font:600 .88rem var(--sans)}
  .ch-switch button[aria-selected=true]{background:var(--ink);color:var(--on-dark);border-color:var(--ink)}
  .ch-split{display:block}
  .ch-split[data-view=chat] .ch-sheet,.ch-split[data-view=sheet] .ch-main{display:none}
  .ch-sheet{position:static;max-height:none}
  .sh-grid{max-height:calc(100vh - 13rem)}
}
.auto-prep{margin:.6rem 0 1rem;padding:.8rem 1rem;border:1px solid var(--gold);border-radius:12px;background:var(--next-soft)}.auto-prep p{margin:0 0 .6rem}
.auto-ok{border-top:3px solid var(--gold)}.auto-choices{list-style:none;margin:0;padding:0}.auto-choices li{padding:.55rem 0;border-bottom:1px solid var(--line)}.auto-choices p{margin:0}.auto-choices p.muted{margin-top:.15rem}.auto-ok h3{margin-top:1.2rem}.auto-facts{columns:2 16rem;padding-left:1rem;font-size:.9rem}.auto-text{border-left:3px solid var(--line);padding-left:.9rem;margin:.4rem 0 1rem}
.warn-line{font-size:.9rem}
/* the tab «Stato e azioni»: where the work of a company is decided, the one to find at once (a partner: «mettere un
   colore diverso… visto che è sempre il più importante»): gold, the colour of the next thing to do */
nav.tabs a.tab-main{color:var(--gold-text);font-weight:600}
nav.tabs a.tab-main::before{content:"";width:.5rem;height:.5rem;border-radius:50%;background:var(--gold);margin-right:.45rem;flex:none}
nav.tabs a.tab-main[aria-current]{color:var(--ink);border-color:var(--gold)}
textarea.why-full,table.stack.lines textarea.why-full,table.stack textarea.why-full{field-sizing:content;height:auto;min-height:3.2rem;max-height:none;overflow:hidden}
.br-note{margin-top:1.2rem;padding-top:1rem;border-top:1px solid var(--line)}.br-note label{font-weight:600}.br-note textarea{min-height:5rem;field-sizing:content}
ul.st-items{list-style:none;margin:0 0 .6rem;padding:0}ul.st-items li{display:flex;gap:.55rem;align-items:baseline;padding:.2rem 0}
.fpick{text-transform:none;letter-spacing:normal;font:400 1rem var(--sans);position:relative;display:inline-flex;align-items:center;gap:.4rem .7rem;flex-wrap:wrap;max-width:100%;margin:.2rem 0;cursor:pointer}
.fpick>input[type=file]{position:absolute;left:0;top:0;width:1px;height:1px;min-width:0;padding:0;margin:0;border:0;opacity:0}
.fpick-b{display:inline-flex;align-items:center;min-height:44px;padding:0 1.1rem;border:1.5px solid var(--ink);border-radius:999px;background:var(--panel);font:600 .9rem var(--sans);color:var(--ink);white-space:nowrap}
.fpick-b::before{content:"";width:1rem;height:1rem;margin-right:.45rem;background:var(--gold);-webkit-mask:var(--doc) center/contain no-repeat;mask:var(--doc) center/contain no-repeat}
.fpick:hover .fpick-b{background:var(--soft-panel)}
.fpick:focus-within .fpick-b{outline:3px solid var(--next);outline-offset:2px}
.fpick-n{font-size:.85rem;color:var(--soft);overflow-wrap:anywhere;min-width:0}
.fpick.has .fpick-n{color:var(--ink);font-weight:500}
/* a row that scrolls sideways (the header, the tabs of a company, the chats, the line of a company): its edge fades
   where there is more, and it stops on a whole label (v0.81.4) */
.where-go,nav.tabs,.ch-tabs,.cl-stops{scroll-snap-type:x proximity}
.where-go>a,nav.tabs>a,.ch-tabs>a,.cl-stops>li{scroll-snap-align:start}
[data-more=r]{-webkit-mask-image:linear-gradient(to right,black calc(100% - 2.5rem),transparent);mask-image:linear-gradient(to right,black calc(100% - 2.5rem),transparent)}
[data-more=l]{-webkit-mask-image:linear-gradient(to left,black calc(100% - 2.5rem),transparent);mask-image:linear-gradient(to left,black calc(100% - 2.5rem),transparent)}
[data-more=lr]{-webkit-mask-image:linear-gradient(to right,transparent,black 2.5rem,black calc(100% - 2.5rem),transparent);mask-image:linear-gradient(to right,transparent,black 2.5rem,black calc(100% - 2.5rem),transparent)}
@media (max-width:640px){.where-go{display:flex;flex:1 0 100%;gap:0 1.3rem;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;overscroll-behavior-x:contain}.where-go::-webkit-scrollbar{display:none}}
nav.where .crumb{flex-basis:100%;margin:0;padding-top:.3rem;border-top:1px solid color-mix(in srgb,var(--gold-lt) 30%,transparent);color:var(--bone-2);font:500 .64rem var(--sans);letter-spacing:.18em;text-transform:uppercase;min-height:30px}
nav.where .crumb b{font:400 1.05rem var(--serif);color:var(--bone);letter-spacing:0;text-transform:none}
nav.where .crumb .sep:first-child{display:none}
/* the title of a page: the serif of the design system, regular; its code as a letterspaced label in gold */
h1{font:400 clamp(2rem,8.4vw,2.9rem)/1.08 var(--serif);letter-spacing:-.02em;overflow-wrap:anywhere;margin:1.1rem 0 .4rem;color:var(--ink)}
h1 small{font:500 .64rem var(--sans)!important;letter-spacing:.2em;text-transform:uppercase;color:var(--gold-text);margin-top:.6rem}
h1 small.sub{font:400 .95rem/1.5 var(--sans)!important;letter-spacing:0;text-transform:none;color:var(--soft)}
/* sections are the cards of the design system: white, a hairline, no shadow; the title in the serif, leading with its
   number. A heading inside a card has the short gold rule of the design system under it */
details.sec,.card{background:var(--sheet);box-shadow:none}
details.sec>summary h2,.card>h2{font:400 1.28rem/1.25 var(--serif);letter-spacing:-.01em;color:var(--ink)}
h3{font:400 1.1rem/1.3 var(--serif);letter-spacing:-.005em;border-top:1px solid var(--hair);padding-top:.8rem;margin-top:1.3rem}
h3::after{content:"";display:block;width:48px;height:1px;background:var(--gold);margin-top:.5rem}
/* the one next step is the highlight card: the warm band and the gold rule on top (gold = next) */
.next{border:0;border-top:2px solid var(--gold);background:var(--soft-panel)}
.next b{font:400 1.2rem/1.25 var(--serif);letter-spacing:-.01em}
/* labels and heads in letterspaced capitals (Montserrat 500); sentences next to a tick stay sentences */
label:not(.fpick),th,table.stack td[data-l]::before,.kpi span{font:500 .64rem/1.5 var(--sans)!important;letter-spacing:.18em!important;text-transform:uppercase!important;color:var(--soft)}
label:not(.why):not(.opt){margin-bottom:.45rem}
/* the focus frame of the field (3 px + 2 px away) must not cover its label */
label.why,label.opt,.final .why,label.why span,label.opt span{font:.95rem/1.45 var(--sans)!important;letter-spacing:0!important;text-transform:none!important;color:var(--ink)}
/* a field to write in is paper: a pale yellow sheet with a dotted border, the lines of a notepad in a text area;
   writing in it makes the border solid. A field that cannot be written (read only, disabled) has no paper. */
input[type=text],input[type=email],input[type=number],input[type=password],input[type=search],input[type=date],select,textarea{border:2px dotted var(--soft);border-radius:8px;background-color:var(--input);color:var(--ink)}
textarea{--lh:1.45em;line-height:var(--lh);background-image:repeating-linear-gradient(to bottom,transparent 0,transparent calc(var(--lh) - 1px),color-mix(in srgb,var(--soft) 22%,transparent) calc(var(--lh) - 1px),color-mix(in srgb,var(--soft) 22%,transparent) var(--lh));background-position:0 .6rem;background-attachment:local}
td textarea{--lh:1.35em}
:is(input,textarea,select)+label{margin-top:.8rem}
/* an email address that cannot be one: the field turns bordeaux, a line under it says what is wrong (live.js) */
input[aria-invalid=true],input[aria-invalid=true]:focus{border-style:solid;border-color:var(--final)}
.field-why{display:flex;gap:.45rem;align-items:baseline;margin:.35rem 0 0;color:var(--final);font-size:.9rem}
.field-why::before{content:"";flex:none;width:.72em;height:.66em;background:var(--final);clip-path:polygon(50% 0,100% 100%,0 100%)}
input[type=text]:focus,input[type=email]:focus,input[type=number]:focus,input[type=password]:focus,input[type=search]:focus,input[type=date]:focus,select:focus,textarea:focus{border-style:solid;border-color:var(--ink)}
input[readonly],textarea[readonly],fieldset:disabled input,fieldset:disabled select,fieldset:disabled textarea,input:disabled,select:disabled,textarea:disabled{border:1.5px solid var(--line);background-color:transparent;background-image:none;color:var(--soft);opacity:1}
.kpi{border-left:0;border-top:1px solid var(--line);padding:.45rem 0 0}
.kpi b{font:400 1.55rem/1.15 var(--serif);letter-spacing:-.01em;font-variant-numeric:lining-nums}
/* a decision is a stamp: double border, small capitals, who and when */
.act-state p:first-child{display:inline-block;border:3px double var(--ink);padding:.4rem .7rem .35rem;font:600 .66rem/1.6 var(--sans);letter-spacing:.14em;text-transform:uppercase;transform:rotate(-.6deg);background:var(--sheet)}
.act-state .mark.done{background:none;border-radius:0;width:auto;height:auto}
.act-state .mark.done::before{content:"✓";font-weight:700;color:var(--green)}
/* numbers as a ledger: numbered ruled rows, tabular figures */
table.ledger tbody{counter-reset:row}
table.ledger tbody tr td:first-child::before{counter-increment:row;content:counter(row,decimal-leading-zero);display:inline-block;width:2.3em;color:var(--gold-text);font:400 .82rem var(--serif);letter-spacing:.06em}
table.ledger td{font:400 .86rem var(--sans);font-variant-numeric:tabular-nums;border-bottom:1px solid var(--hair)}
table.ledger td b{font-weight:500}
td,th{border-bottom:1px solid var(--hair)}
thead th{border-bottom:1px solid var(--ink)}
/* the record: dates and events as small letterspaced capitals */
ol.timeline .meta{font:500 .64rem var(--sans);letter-spacing:.14em;text-transform:uppercase}
ol.timeline .subj{font:1rem/1.4 var(--sans)}
.badge{border-radius:0;font:600 .58rem var(--sans)!important;letter-spacing:.16em!important;text-transform:uppercase}
/* the login: the mark and the form */
table.stack tr{background:var(--sheet)}
.phases li,.steps li,ol.phases>li{border-top:1px solid var(--hair)!important}
/* containers are the cards of the design system: 2 px corners, a 1 px hairline, no shadow (v0.69.0; before, rounded).
   Buttons and status pills keep their round shapes; stamps and final actions stay angular. */
details.sec,.card{border:1px solid var(--hair)!important;border-radius:2px!important}
.next{border-radius:2px!important}
table.stack tr{border:1px solid var(--hair)!important;border-radius:2px!important}
.phases li,.steps li,ol.phases>li{border:1px solid var(--hair)!important;border-radius:2px!important;background:var(--sheet)}
.choices details,.live-login form{border-radius:2px!important}
.attn-co{border-radius:2px!important}
/* the line of a company (v0.71.0): every station on a line; done = a green dot, the station of now = a gold ring, later =
   a grey ring. A tap on a station shows what is done and missing there, for this company */
.coline{margin:.5rem 0 1rem}
.cl-stops{list-style:none;margin:0;padding:.1rem 0;display:flex;overflow-x:auto;scrollbar-width:none;scroll-snap-type:x proximity}
.cl-stops::-webkit-scrollbar{display:none}
.cl-stops li{flex:1 0 4.7rem;position:relative;scroll-snap-align:center}
.cl-stops li::before{content:"";position:absolute;top:1.02rem;left:0;right:0;height:2px;background:var(--line)}
.cl-stops li:first-child::before{left:50%}.cl-stops li:last-child::before{right:50%}
.cl-stops li.cl-done::before{background:var(--green)}
.cl-stops li.cl-now::before{background:linear-gradient(90deg,var(--green) 50%,var(--line) 50%)}
.cl-stop{all:unset;box-sizing:border-box;display:flex;flex-direction:column;align-items:center;gap:.35rem;width:100%;min-height:44px;padding:.35rem .1rem .25rem;cursor:pointer;text-align:center;position:relative}
.cl-stop i{width:.85rem;height:.85rem;border-radius:50%;border:2px solid var(--sand);background:var(--panel);box-sizing:border-box;margin-top:.25rem}
.cl-done .cl-stop i{background:var(--green);border-color:var(--green)}
.cl-now .cl-stop i{width:1.25rem;height:1.25rem;border:3px solid var(--gold);margin-top:.05rem}
.cl-stop span{font:500 .56rem/1.3 var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--soft);overflow-wrap:normal;word-break:normal}
.cl-now .cl-stop span{color:var(--ink);font-weight:600}
.cl-stop[aria-expanded=true] span{color:var(--ink);box-shadow:inset 0 -1.5px 0 var(--gold)}
.cl-stop:focus-visible{outline:3px solid var(--next);outline-offset:2px}
.cl-panel{background:var(--sheet);border:1px solid var(--line);border-top:2px solid var(--gold);border-radius:2px;padding:.7rem .9rem .5rem;margin:.45rem 0 0}
.cl-panel[hidden]{display:none}
.cl-panel ul{list-style:none;margin:.35rem 0 .3rem;padding:0}
.cl-panel li{display:flex;align-items:baseline;padding:.18rem 0;font-size:.95rem}
.cl-head{margin:0;font-size:.85rem;color:var(--soft)}.cl-head b{font:400 1.15rem var(--serif);color:var(--ink)}
.cl-go{margin:.2rem 0 0;font-size:.92rem}
/* the login: the dark ground of the design system, the Duomo under its veil, the form on a card with a gold rule */
body[data-user=""]{min-height:100vh;background:var(--charcoal)}
body[data-user=""]::before{content:"";position:fixed;inset:0;background:url(/static/img/duomo-guglie.jpg) 58% 30%/cover no-repeat}
body[data-user=""]::after{content:"";position:fixed;inset:0;background:linear-gradient(90deg,color-mix(in srgb,var(--charcoal) 88%,transparent) 0,color-mix(in srgb,var(--charcoal) 66%,transparent) 55%,color-mix(in srgb,var(--charcoal) 50%,transparent) 100%)}
body[data-user=""] main{position:relative;z-index:1;min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:1.2rem}
body[data-user=""] main>.card{width:min(24rem,100%);margin:0!important;border:0!important;border-top:2px solid var(--gold-lt)!important;padding:1.4rem 1.3rem 1.1rem}
body[data-user=""] .page-end{display:none}
/* a thing not found: a dark card with the Duomo at night */
.card.lost{isolation:isolate;border:0!important;background:var(--charcoal) url(/static/img/duomo-notte.jpg) center 35%/cover no-repeat!important;color:var(--bone-2);padding:1.6rem 1.3rem;min-height:15rem}
.card.lost::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,color-mix(in srgb,var(--charcoal) 90%,transparent) 0,color-mix(in srgb,var(--charcoal) 62%,transparent) 100%)}
.card.lost>h2{color:var(--bone);font-size:1.7rem}
.card.lost a{color:var(--bone);text-decoration-color:var(--gold-lt)}
.page-end{height:7.5rem}
/* the mail read by Linea: a card for each mail; its steps as numbered ruled rows; a stamp for its state */
.posta-tabs{display:flex;gap:1.2rem;margin:.2rem 0 1rem;border-bottom:1px solid var(--line)}
.posta-tabs a{padding:.5rem 0;text-decoration:none;color:var(--soft);font-weight:600}
.posta-tabs a[aria-current=page]{color:var(--ink);box-shadow:inset 0 -3px 0 var(--gold)}
.posta-tabs{align-items:center}.posta-tabs a.posta-new{margin-left:auto;padding:.3rem 1rem;border:1.5px solid var(--ink);border-radius:999px;color:var(--ink);min-height:40px;display:inline-flex;align-items:center;margin-bottom:.35rem}
.posta-tabs a.posta-new[aria-current=page]{background:var(--ink);color:var(--on-dark);box-shadow:none}
.mailcard{border-radius:2px}
.mc-head{display:grid;grid-template-columns:1fr auto;gap:.1rem .8rem;align-items:start}
.mc-head p{margin:0}
.mc-co{font-size:1.08rem}
.mc-from,.mc-subj{grid-column:1/-1;color:var(--soft);font-size:.95rem}
.mc-subj{color:var(--ink);font-style:italic}
.mc-stamp{display:inline-flex;align-items:center;gap:.4rem;border:3px double currentColor;border-radius:6px;padding:.12rem .5rem;font:700 .6rem/1.4 var(--sans);letter-spacing:.14em;text-transform:uppercase;white-space:nowrap}
.mc-stamp i{width:.75rem;height:.75rem;border-radius:50%;flex:none;box-sizing:border-box}
.mc-stamp[data-s=done]{color:var(--green)}.mc-stamp[data-s=done] i{background:var(--green)}
.mc-stamp[data-s=busy]{color:var(--gold-text)}.mc-stamp[data-s=busy] i{border:2.5px solid var(--gold);border-top-color:transparent;animation:sframe-turn .8s linear infinite}
.mc-stamp[data-s=ask]{color:var(--gold-text)}.mc-stamp[data-s=ask] i{border-radius:0;background:var(--gold);clip-path:polygon(50% 0,100% 100%,0 100%)}
.mc-stamp[data-s=bad]{color:var(--red)}.mc-stamp[data-s=bad] i{border-radius:0;background:var(--red);clip-path:polygon(50% 0,100% 100%,0 100%)}
.mc-stamp[data-s=idle]{color:var(--soft)}.mc-stamp[data-s=idle] i{border:2px solid var(--soft)}
.mc-stamp[data-s=todo]{color:var(--gold-text)}.mc-stamp[data-s=todo] i{border:2.5px solid var(--gold)}
.posta-server{margin:-.4rem 0 1rem}.mc-note{margin:.2rem 0 0}
.posta-tabs{flex-wrap:wrap;gap:.2rem 1.1rem}.posta-tabs .posta-new{margin-left:auto;color:var(--ink)}
.mail-row a{display:block;text-decoration:none;color:inherit}.mail-row .mc-stamp{font-size:.62rem}.mail-thread{display:inline-block;margin:.2rem 0 0;font-size:.85rem}
.thread-msg.out{border-left:4px solid var(--gold)}.thread-msg.in{border-left:4px solid var(--line)}
.mc-sort{margin-top:.7rem;padding-top:.6rem;border-top:1px dashed var(--line);gap:.6rem;flex-wrap:wrap;align-items:flex-end}.subj-mail{font-size:.85rem;margin-left:.3rem}
.mc-text{margin:.6rem 0 0}.mc-body{white-space:pre-wrap;font-size:.95rem}.mc-atts{margin:.3rem 0 0;font:500 .82rem var(--sans)}
ol.mc-steps{list-style:none;counter-reset:st;margin:.8rem 0 .4rem;padding:0;border-top:2px solid var(--ink)}
ol.mc-steps li{counter-increment:st;display:grid;grid-template-columns:2.2rem 3.2rem 1fr;gap:.5rem;align-items:baseline;padding:.45rem 0;border-bottom:1px solid var(--line);font-size:.95rem}
ol.mc-steps li::before{content:counter(st,decimal-leading-zero);font:400 .86rem var(--serif);letter-spacing:.06em;color:var(--gold-text)}
ol.mc-steps .t{font:500 .7rem var(--sans);color:var(--soft);font-variant-numeric:tabular-nums}
ol.mc-steps li.bad{color:var(--red)}
ol.mc-steps li.now{color:var(--gold-text);font-weight:600}
ol.mc-steps li.now::before{content:"";width:.8rem;height:.8rem;border:2.5px solid var(--gold);border-top-color:transparent;border-radius:50%;animation:sframe-turn .8s linear infinite;box-sizing:border-box}
@media (prefers-reduced-motion:reduce){ol.mc-steps li.now::before,.mc-stamp i{animation:none!important}}
.mc-sum{margin:.8rem 0 .2rem;padding:.6rem .8rem;background:var(--soft-panel);border-radius:2px}
.mc-asks p{margin:.5rem 0;font-weight:600}.mc-err{color:var(--red)}
.mc-reply{margin-top:1rem;padding-top:.8rem;border-top:2px solid var(--ink)}
.mc-reply h3{margin:0 0 .4rem;font-size:1rem}
.mc-no,.mc-again{display:inline-block;margin:.6rem .6rem 0 0}
/* the chats of the agents (v0.79.0; v0.81.0 the look of a modern messenger): the partners on the right, Linea on the
   left with its mark; one line for each day; the name and the time once for messages that follow each other; the
   steps of the tools folded in one line under a count, the files they made outside the fold, a step that failed named
   in red; the events of the mail and of the documents as thin lines with their icon; the box to write held at the foot
   of the screen, with the clip for the files and the round button to send */
.ic{flex:none;display:block}
.ch-tabs{display:flex;gap:.35rem;flex-wrap:nowrap;overflow-x:auto;margin:0 0 .8rem;padding-bottom:.2rem;scrollbar-width:none}
.ch-tabs::-webkit-scrollbar{display:none}
.ch-tabs a{display:inline-flex;align-items:center;gap:.4rem;min-height:44px;padding:.35rem .9rem;border:1px solid var(--line);border-radius:22px;text-decoration:none;color:var(--ink);white-space:nowrap;background:var(--panel);font-size:.88rem}
.ch-tabs a[aria-current]{background:var(--ink);border-color:var(--ink);color:var(--on-dark);font-weight:600}
.ch-tabs .st{font-size:.72rem;color:var(--soft)}
.ch-tabs a[aria-current] .st{color:var(--bone-2)}
.ch-tabs .st.fatto{color:var(--green)}
.ch-tabs a[aria-current] .st.fatto{color:var(--done-on-dark)}
.ch-tabs .run{width:.55rem;height:.55rem;border-radius:50%;background:var(--gold-lt);animation:chpulse 1.2s infinite}
@keyframes chpulse{50%{opacity:.25}}
.ch-work{padding:.8rem 1rem}
.ch-work-h{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap}
.ch-work-h b{font:400 1.15rem/1.2 var(--serif)}
.ch-work .pill.ok{background:var(--done-bg);color:var(--green)}
.ch-work>p.muted{margin:.25rem 0 0;font-size:.85rem}
.cfiles{display:flex;flex-wrap:wrap;gap:.35rem;margin:.5rem 0 0;align-items:center}
.cfiles a{display:inline-flex;align-items:center;gap:.4rem;min-height:36px;padding:.2rem .75rem .2rem .6rem;border:1px solid var(--line);border-radius:18px;background:var(--panel);text-decoration:none;font-size:.82rem;color:var(--ink);max-width:100%;overflow-wrap:anywhere}
.cfiles a::before{content:"";flex:none;width:1rem;height:1rem;background:var(--gold);-webkit-mask:var(--doc) center/contain no-repeat;mask:var(--doc) center/contain no-repeat}
.cfiles a:hover{border-color:var(--gold)}
.cfiles .muted{font-size:.72rem;margin-left:-.2rem}
.ch-off{display:flex;gap:.6rem;align-items:flex-start;border:1px solid var(--final-line);background:var(--final-soft);border-radius:10px;padding:.6rem .8rem;font-size:.85rem;color:var(--red)}
.ch-off .ic{margin-top:.1rem}
ol.chat{list-style:none;margin:0;padding:0 0 .5rem;display:flex;flex-direction:column;gap:.5rem}
ol.chat>li{max-width:100%;min-width:0}
li.cday{align-self:stretch;display:flex;align-items:center;gap:.8rem;margin:.6rem 0 .1rem;font:600 .64rem var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--soft)}
li.cday::before,li.cday::after{content:"";flex:1;border-top:1px solid var(--line)}
ol.chat>li.cm{max-width:min(46rem,88%);overflow-wrap:anywhere}
.cm .who{font-size:.72rem;color:var(--soft);margin-bottom:.2rem;display:flex;gap:.5rem;align-items:baseline}
.cm .who b{color:var(--ink);font-weight:600}
.cm time{font-variant-numeric:tabular-nums}
.cm.cont{margin-top:-.3rem}
.cm .tx>:first-child{margin-top:0}.cm .tx>:last-child{margin-bottom:0}
.cm.partner{align-self:flex-end;background:var(--bubble);color:var(--ink);padding:.55rem .85rem .6rem;border-radius:18px 18px 4px 18px}
.cm.partner.cont{border-top-right-radius:4px}
.cm.partner .who{justify-content:flex-end}
.cm.partner .cfiles a{background:color-mix(in srgb,var(--panel) 60%,transparent)}
.cm.linea,li.cq,.clive{align-self:flex-start;display:flex;gap:.55rem;align-items:flex-start}
/* a question outside the chat (the card «Linea chiede» of the page Stazioni): a gold box, its answers side by side */
div.cq{border:1px solid var(--gold);background:var(--next-soft);border-radius:12px;padding:.6rem .8rem;margin:.5rem 0}
div.cq>form{display:inline-block;margin:0 .35rem .35rem 0}
div.cq>form button{border-radius:22px;padding:0 1rem}
.av{flex:none;width:30px;height:30px;border-radius:50%;background:var(--ink);color:var(--gold-lt);display:flex;align-items:center;justify-content:center;font:400 1rem/1 var(--serif);margin-top:.1rem}
.cm.linea.cont .av{visibility:hidden;height:0}
.cm.linea .bub{position:relative;background:var(--panel);border:1px solid var(--line);padding:.55rem .85rem .6rem;border-radius:4px 18px 18px 18px;min-width:0}
.cm.linea.cont .bub{border-top-left-radius:18px}
.cm.linea p,.cm.linea ul,.cm.linea ol{margin:.35rem 0}
.cm.linea h4{margin:.6rem 0 .2rem;font-size:.95rem}
.cm.linea .bub:hover .cm pre{white-space:pre-wrap;font:.78rem/1.4 var(--mono);background:var(--soft-panel);padding:.5rem;border-radius:6px;overflow-x:auto}
.cm code{font:.85em var(--mono);background:var(--soft-panel);padding:.05rem .3rem;border-radius:4px}
.cm .md-t{overflow-x:auto}
.cm .md-t table{font-size:.8rem;margin:.3rem 0}
.cm .md-t th,.cm .md-t td{border-bottom:1px solid var(--line)}
li.ce{align-self:stretch;font-size:.82rem;color:var(--soft)}
li.ce b{color:var(--ink);font-weight:600}
li.cempty{align-self:center;text-align:center;max-width:30rem;padding:2rem 1rem;font-size:.9rem;line-height:1.5}
li.ev{display:flex;gap:.6rem;align-items:flex-start;padding:0 0 0 .1rem}
.ev-ic{flex:none;width:28px;height:28px;border-radius:50%;border:1px solid var(--line);background:var(--panel);display:flex;align-items:center;justify-content:center;color:var(--gold)}
.ev-ic .ic{width:15px;height:15px}
.ev-b{flex:1;min-width:0}
.ev-b>p{margin:.25rem 0 0}
li.ce time{color:var(--faint);font-variant-numeric:tabular-nums}
ol.chat li.ce details{margin:.1rem 0}
ol.chat li.ce details>summary{min-height:36px;padding:.1rem 0;align-items:center;font-weight:500;gap:.45rem;color:var(--soft)}
ol.chat li.ce details>summary>.lab::after{content:none}
ol.chat li.ce details>summary::after{width:.42rem;height:.42rem;border-width:0 2px 2px 0;border-color:var(--soft);margin:0 .2rem;transform:translateY(-.1rem) rotate(45deg)}
ol.chat li.ce details[open]>summary::after{transform:translateY(.1rem) rotate(-135deg)}
ol.chat li.ce details>summary>.lab{flex:0 1 auto}
li.ce pre{white-space:pre-wrap;font:.76rem/1.4 var(--mono);max-height:18rem;overflow:auto;background:var(--soft-panel);padding:.5rem;border-radius:6px;margin:.2rem 0}
li.acts{padding-left:.1rem}
li.acts>details>summary{min-height:40px}
li.acts>details>summary .lab{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
li.acts>details>summary .last{color:var(--soft);font-weight:400}
li.acts>details[open]>summary .last{display:none}
li.acts .bad{color:var(--red)}
li.acts>.cfiles{margin:.1rem 0 0 2.3rem}
ul.cs{list-style:none;margin:.1rem 0 .2rem 13px;padding:0 0 0 1.2rem;border-left:1px solid var(--line);font-size:.8rem;color:var(--soft)}
ul.cs li{padding:.12rem 0;position:relative}
ul.cs li::before{content:"";position:absolute;left:-1.2rem;margin-left:-3.5px;top:.7rem;width:6px;height:6px;border-radius:50%;background:var(--gold-lt)}
ul.cs li.err::before{border-radius:0;background:var(--red);clip-path:polygon(50% 0,100% 100%,0 100%);width:8px;height:7px;margin-left:-4.5px}
ul.cs li.err,ul.cs li.err details>summary{color:var(--red)}
ul.cs details{margin:0}
ol.chat ul.cs details>summary{min-height:32px;font-weight:400}
ul.cs pre{white-space:pre-wrap;font:.74rem/1.35 var(--mono);max-height:14rem;overflow:auto;background:var(--soft-panel);padding:.4rem;border-radius:6px;margin:.2rem 0}
.cq .bub{border:1px solid var(--gold);background:var(--next-soft);border-radius:4px 18px 18px 18px;padding:.65rem .85rem;min-width:0;max-width:44rem}
.cq p{margin:0 0 .5rem;font-weight:500;color:var(--ink)}
.cq-opts{display:flex;flex-wrap:wrap;gap:.35rem}
.cq form{display:inline-block;margin:0}
.cq-opts button{border-radius:22px;padding:0 1rem}
.cq .done{font-size:.8rem;color:var(--soft)}
.cq form.free{display:flex;width:100%;gap:.5rem;margin:.5rem 0 0;align-items:stretch}
.cq form.free input[type=text]{flex:1 1 auto;width:auto;min-width:0}
.cq form.free button{flex:0 0 auto;width:auto;padding:0 1.1rem}
li.clive{font-size:.85rem;color:var(--soft);flex-wrap:wrap;align-items:center}
li.clive .typing{display:flex;align-items:center;gap:.6rem;background:var(--panel);border:1px solid var(--line);border-radius:4px 18px 18px 18px;padding:.5rem .85rem;min-width:0}
.dots{display:inline-flex;gap:3px}.dots i{width:6px;height:6px;border-radius:50%;background:var(--gold);animation:chdot 1.2s infinite}
.dots i:nth-child(2){animation-delay:.15s}.dots i:nth-child(3){animation-delay:.3s}
@keyframes chdot{0%,60%,100%{opacity:.25;transform:none}30%{opacity:1;transform:translateY(-2px)}}
li.clive form{margin:0}
li.clive button{border-radius:22px;padding:0 1rem}
/* the box to write (v0.82.1, as the chat of Claude): one rounded box, the words on top with no border of their own,
   under them one row: the clip on the left, the round button to send on the right, grey until there is something to
   send. The box is the field: its border turns ink when you write in it, gold when files are dragged on it. It is the
   one field that is not paper (the founder asked for this look); the files chosen are chips inside it. */
form.cin{position:sticky;bottom:0;z-index:7;margin:.6rem 0 0;padding:.6rem 0 .6rem;background:linear-gradient(to bottom,transparent,var(--paper) .7rem)}
.cin-box{background:var(--panel);border:1px solid var(--sand);border-radius:24px;box-shadow:0 1px 2px color-mix(in srgb,var(--ink) 4%,transparent),0 4px 16px color-mix(in srgb,var(--ink) 6%,transparent);padding:.55rem .55rem .45rem;transition:border-color .15s,box-shadow .15s}
.cin-box:focus-within{border-color:var(--ink);box-shadow:0 1px 2px color-mix(in srgb,var(--ink) 5%,transparent),0 6px 20px color-mix(in srgb,var(--ink) 9%,transparent)}
form.cin.drag .cin-box{border-color:var(--gold);box-shadow:0 0 0 3px color-mix(in srgb,var(--gold) 18%,transparent)}
.cin-field{display:block}
form.cin textarea#ct-in{display:block;width:100%;box-sizing:border-box;border:0;border-radius:0;background:transparent;background-image:none;outline:none;box-shadow:none!important;font:1rem/1.5 var(--sans);color:var(--ink);min-height:0;height:auto;max-height:40vh;resize:none;overflow-y:hidden;padding:.35rem .6rem .2rem}
form.cin textarea#ct-in::placeholder{color:var(--faint)}
.cin-bar{display:flex;align-items:center;gap:.5rem;margin-top:.25rem}
.cin-att{flex:none;width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--soft);cursor:pointer;position:relative;margin:0;border:0;background:transparent}
.cin-att:hover{background:var(--soft-panel);color:var(--ink)}
.cin-att:focus-within{outline:3px solid var(--next);outline-offset:1px}
.cin-att input{position:absolute;inset:0;opacity:0;width:100%;height:100%;cursor:pointer}
.cin-att .ic{width:20px;height:20px}
.cin-hint{flex:1;min-width:0;margin:0;font-size:.72rem;color:var(--faint);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
button.cin-send{flex:none;margin-left:auto;width:40px;height:40px;min-height:40px;border-radius:50%;padding:0;display:flex;align-items:center;justify-content:center;transition:background .15s,opacity .15s}
button.cin-send.empty{background:var(--sand);border-color:var(--sand);color:var(--on-dark)}
button.cin-send .ic{width:19px;height:19px;stroke-width:2.3}
.cin-files{display:flex;flex-wrap:wrap;gap:.35rem;margin:0 0 .35rem;padding:0 .2rem}
.cin-files:empty{display:none}
.cin-files span{display:inline-flex;align-items:center;gap:.3rem;max-width:100%;padding:.15rem .2rem .15rem .7rem;border:1px solid var(--line);background:var(--soft-panel);border-radius:12px;font-size:.8rem}
.cin-files span::before{content:"";flex:none;width:.9rem;height:.9rem;background:var(--gold);-webkit-mask:var(--doc) center/contain no-repeat;mask:var(--doc) center/contain no-repeat}
.cin-files span b{font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.cin-files button{min-height:30px;width:30px;padding:0;border:0;border-radius:50%;background:transparent;color:var(--soft);font-size:1.1rem;line-height:1}
.cin-files button:hover{background:var(--line);color:var(--ink)}
.ch-new{position:fixed;left:50%;transform:translateX(-50%);bottom:7.5rem;z-index:8;border-radius:22px;padding:0 1rem;background:var(--ink);color:var(--on-dark);border:0;font-size:.82rem;box-shadow:0 2px 10px color-mix(in srgb,var(--ink) 18%,transparent)}
.ch-new[hidden]{display:none}
@media (pointer:coarse){.cin-hint{visibility:hidden}}
@media (max-width:800px),(pointer:coarse){button.cin-send,.cin-att{width:44px;height:44px;min-height:44px}}
@media (max-width:640px){
  ol.chat>li.cm{max-width:92%}
  .cin-hint{visibility:hidden}
  form.cin{padding:.45rem 0 .5rem}
  body:has(nav.tabs) form.cin{bottom:calc(55px + env(safe-area-inset-bottom,0px))}
  body:not(:has(nav.tabs)) form.cin{padding-bottom:calc(.5rem + env(safe-area-inset-bottom,0px))}
  form.cin textarea#ct-in{font-size:16px}
  .ch-new{bottom:calc(55px + 7rem)}
  body:has(form.cin) .page-end{height:1rem}
}
.pl-row{display:flex;gap:.8rem;align-items:flex-start;flex-wrap:wrap;border-top:1px solid var(--line);padding:.8rem 0}
.pl-row .pl-main{flex:1 1 20rem;min-width:0}
.pl-row .pl-state{font-size:.8rem}
.pl-row form{flex:none}

/* the catalogue of the interface (/sviluppo/stile) */
.cat-swatches{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(12rem,1fr));gap:.5rem}
.cat-swatches li{display:grid;grid-template-columns:2.2rem 1fr;grid-template-rows:auto auto;column-gap:.6rem;align-items:center}
.cat-swatches span{grid-row:1/3;width:2.2rem;height:2.2rem;border-radius:50%;border:1px solid var(--line)}
.cat-swatches code{font-size:.78rem}.cat-swatches small{color:var(--faint);font-size:.72rem}
.cat-row{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center}

/* cells cited from the Excel beside a chat (v0.86.2) */
table.sh td{cursor:cell}
.sh-grid{user-select:none;-webkit-user-select:none}
table.sh td.sel{box-shadow:inset 0 0 0 2px var(--ink);background-image:linear-gradient(color-mix(in srgb,var(--gold-lt) 32%,transparent),color-mix(in srgb,var(--gold-lt) 32%,transparent))}
.sh-cite{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;padding:.5rem .7rem;border-top:1px solid var(--line);background:var(--next-soft)}
.sh-cite>span{margin-right:auto;font-size:.85rem}
.sh-cite button{min-height:38px;border-radius:19px;padding:0 1rem;width:auto}
.sh-cite[hidden],.sh-hint[hidden]{display:none}
.sh-hint{margin:0;padding:.35rem .7rem;font-size:.72rem;border-top:1px solid var(--line)}
@media (pointer:coarse){.sh-hint{display:none}}