/* Jessica Perra — the workbook. Ledger white with a fine ruled grid, ink, one highlighter and coloured sheet tabs.
   Azeret Mono in the cells and for the name in the merged title range, Sofia Sans Condensed in the bars. */
:root {
  --paper: #FAFAF7; --cell: #FDFDFB; --chrome: #F2F2EE; --chrome-2: #E9EAE5; --rule: #E2E4E6; --rule-2: #CBCED2;
  --ink: #131416; --ink-2: #464A51; --ink-3: #676C74; --link: #1E3DB5; --red: #B0342A; --hi: #72DFE6; --hi-soft: #D3F5F7;
  --t-chi: #2846C4; --t-lav: #C0372C; --t-ser: #6C3EC2; --t-pre: #C5600F; --t-ric: #131416; --sheet: var(--t-chi);
  --sans: 'Sofia Sans Condensed', 'Arial Narrow', sans-serif; --mono: 'Azeret Mono', ui-monospace, 'Cascadia Mono', monospace;
  --e: cubic-bezier(.16, 1, .3, 1); --e2: cubic-bezier(.25, 1, .5, 1);
  --z: 1; --rh: 46px; --hh: 24px;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 400 16px/1.5 var(--sans); }
::selection { background: var(--hi); color: var(--ink); }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
svg { stroke: currentColor; fill: none; stroke-width: 1.6; stroke-linecap: square; }

/* ---------- workbook frame ---------- */
body.app { height: 100vh; height: 100dvh; overflow: hidden; }
.wb { height: 100vh; height: 100dvh; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto auto minmax(0, 1fr) auto auto; }
.grow { flex: 1 1 auto; }

.tbar { display: flex; align-items: center; gap: 14px; height: 48px; padding: 0 12px 0 16px; background: var(--chrome); border-bottom: 1px solid var(--rule-2); min-width: 0; }
.brand { display: flex; align-items: center; flex: none; }
.brand img { height: 30px; width: auto; display: block; }
.doc-t { font-weight: 600; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; padding-left: 14px; border-left: 1px solid var(--rule-2); }
.doc-s { font-size: 13.5px; color: var(--ink-3); white-space: nowrap; }
.lang { display: flex; border: 1px solid var(--rule-2); flex: none; }
.lang button { border: 0; background: transparent; padding: 4px 9px; font: 600 14px/1.3 var(--sans); letter-spacing: .04em; color: var(--ink-2); }
.lang button + button { border-left: 1px solid var(--rule-2); }
.lang button[aria-pressed="true"] { background: var(--ink); color: var(--paper); }
.write { flex: none; border: 1px solid var(--ink); background: var(--ink); color: var(--paper); padding: 6px 13px; font: 700 15px/1.3 var(--sans); border-radius: 2px; transition: background .25s var(--e2), color .25s var(--e2); }
.write:hover { background: var(--hi); color: var(--ink); }

.toolbar { display: flex; align-items: center; gap: 2px; height: 40px; padding: 0 10px; background: var(--paper); border-bottom: 1px solid var(--rule); overflow-x: auto; scrollbar-width: none; }
.toolbar::-webkit-scrollbar { display: none; }
.tool { flex: none; display: inline-flex; align-items: center; gap: 7px; height: 30px; padding: 0 10px; border: 1px solid transparent; background: transparent; border-radius: 2px; font: 500 14.5px/1 var(--sans); color: var(--ink-2); white-space: nowrap; transition: background .2s var(--e2); }
.tool svg { width: 17px; height: 17px; }
.tool:hover { background: var(--chrome-2); color: var(--ink); }
.tool[aria-pressed="true"] { background: var(--ink); color: var(--paper); }
.tool.key { color: var(--ink); font-weight: 700; background: linear-gradient(var(--hi), var(--hi)) 10px 78% / calc(100% - 20px) 7px no-repeat; }
.tool.key:hover { background-color: var(--chrome-2); }
.tsep { flex: none; width: 1px; height: 20px; background: var(--rule-2); margin: 0 6px; }
.tool-hint { margin-left: auto; padding-left: 16px; font-size: 13px; color: var(--ink-3); white-space: nowrap; }

.fbar { position: relative; display: flex; align-items: stretch; min-height: 34px; background: var(--cell); border-bottom: 1px solid var(--rule-2); z-index: 20; }
.namebox { position: relative; display: flex; flex: none; width: 116px; border-right: 1px solid var(--rule-2); }
.namebox input { width: 100%; min-width: 0; border: 0; background: transparent; padding: 0 4px 0 10px; font: 600 13px/1 var(--mono); color: var(--ink); text-transform: uppercase; }
.namebox input::placeholder { text-transform: none; color: var(--ink-3); }
.namebox input:focus { outline: 0; background: var(--hi-soft); }
#nb-open, .fx-more { flex: none; width: 26px; border: 0; background: transparent; display: grid; place-items: center; color: var(--ink-3); }
#nb-open svg, .fx-more svg { width: 10px; height: 10px; }
#nb-open:hover, .fx-more:hover { color: var(--ink); background: var(--chrome); }
.names { position: absolute; top: calc(100% + 4px); left: 0; z-index: 40; margin: 0; padding: 4px 0; list-style: none; width: 260px; background: var(--cell); border: 1px solid var(--ink); box-shadow: 0 16px 30px -18px rgba(19, 20, 22, .55); }
.names button { display: flex; justify-content: space-between; gap: 12px; width: 100%; border: 0; background: transparent; padding: 7px 12px; text-align: left; }
.names button:hover, .names button:focus-visible { background: var(--hi-soft); outline: 0; }
.names b { font: 600 13px/1.3 var(--mono); }
.names span { font: 12px/1.3 var(--mono); color: var(--ink-3); }
.fx { flex: none; display: grid; place-items: center; width: 38px; font: italic 600 16px/1 var(--sans); color: var(--ink-3); border-right: 1px solid var(--rule); }
.formula { flex: 1 1 auto; min-width: 0; padding: 8px 12px; font: 13px/1.4 var(--mono); color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.formula code { font: inherit; color: var(--link); }
.fx-eq { color: var(--ink-3); }
.fx-note { margin-left: 8px; padding: 1px 6px; border: 1px solid currentColor; color: var(--red); font: 600 13px/1.4 var(--sans); white-space: nowrap; }
body.fx-open .formula { white-space: normal; text-overflow: clip; max-height: 32vh; overflow: auto; }
body.fx-open .fx-more svg { transform: rotate(180deg); }

/* ---------- the grid ---------- */
.vp { position: relative; overflow: auto; background: var(--paper); outline: 0; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--rule-2) transparent; }
.grid { position: relative; display: grid; grid-template-columns: var(--rh) var(--cols); width: max-content; font: 400 calc(12.5px * var(--z))/1.5 var(--mono); padding-bottom: 72px; }
.corner, .ch, .rh, .cell { border-right: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.corner { position: sticky; top: 0; left: 0; z-index: 6; background: var(--chrome-2); border-color: var(--rule-2); box-shadow: inset -3px -3px 0 -2px var(--sheet); }
.ch { position: sticky; top: 0; z-index: 4; height: var(--hh); display: grid; place-items: center; background: var(--chrome-2); border-color: var(--rule-2); font: 600 13px/1 var(--sans); color: var(--ink-3); transition: background .2s var(--e2); }
.rh { position: sticky; left: 0; z-index: 3; display: flex; justify-content: center; padding-top: calc(7px * var(--z)); background: var(--chrome-2); border-color: var(--rule-2); font: 600 12.5px/1.4 var(--sans); color: var(--ink-3); transition: background .2s var(--e2); }
.rh[data-r="1"] { top: var(--hh); z-index: 5; }
.ch.on, .rh.on { background: var(--hi); color: var(--ink); }
.ch.on { box-shadow: inset 0 -2px 0 var(--ink); } .rh.on { box-shadow: inset -2px 0 0 var(--ink); }

.cell { position: relative; min-width: 0; min-height: calc(30px * var(--z)); padding: calc(6px * var(--z)) calc(10px * var(--z)); background: var(--cell); color: var(--ink); overflow-wrap: break-word; }
.cell.hd { position: sticky; top: var(--hh); z-index: 4; display: flex; align-items: center; justify-content: space-between; gap: 6px; background: #F6F6F2; border-bottom: 2px solid var(--sheet); font: 700 calc(12.5px * var(--z))/1.3 var(--sans); letter-spacing: .07em; text-transform: uppercase; color: var(--ink-2); }
.hsort { flex: none; width: 20px; height: 20px; display: grid; place-items: center; border: 1px solid var(--rule-2); background: var(--cell); color: var(--ink-2); padding: 0; }
.hsort svg { width: 10px; height: 10px; } .hsort:hover { border-color: var(--ink); color: var(--ink); }
.cell.lab { font: 600 calc(13px * var(--z))/1.45 var(--sans); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); padding-top: calc(8px * var(--z)); }
.cell.strong .tx { font-weight: 600; }
.cell.pname .tx { font: 700 calc(16.5px * var(--z))/1.3 var(--sans); letter-spacing: -.005em; }
.cell.price .tx { font: 700 calc(17px * var(--z))/1.3 var(--sans); }
.cell.fill { background: transparent; }
.cell.hd.fill { background: #F6F6F2; border-bottom-color: var(--rule-2); border-bottom-width: 1px; }
.cell.muted, .cell.muted .tx { color: var(--ink-3); }
.cell.small { font-size: calc(11.5px * var(--z)); }
.cell .sub { display: block; margin-top: 2px; font: 400 calc(14px * var(--z))/1.4 var(--sans); color: var(--ink-3); }
.cell.title-cell .tx { font-weight: 500; }
.cell.hl { background: var(--hi); }
.tbc { display: inline-block; margin: 2px 0 0 6px; padding: 0 5px; border: 1px solid currentColor; color: var(--red); font: 600 calc(12px * var(--z))/1.5 var(--sans); letter-spacing: .03em; white-space: nowrap; vertical-align: 1px; }
.tbd { border-style: dashed; }
.cm { position: absolute; top: 0; right: 0; width: 0; height: 0; border-left: 8px solid transparent; border-top: 8px solid var(--red); pointer-events: none; }
.cell a { color: var(--link); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.cell a svg { width: .78em; height: .78em; margin-left: 4px; vertical-align: -1px; stroke-width: 1.5; }
.cell a.int { color: var(--ink); font: 600 calc(15px * var(--z))/1.45 var(--sans); text-decoration-color: var(--sheet); text-decoration-thickness: 2px; }
.cell a:hover { background: var(--hi-soft); }
.cell.num { text-align: right; font-variant-numeric: tabular-nums; }
.cell.num .numv { white-space: nowrap; }
.fxv { display: block; font: calc(11.5px * var(--z))/1.45 var(--mono); color: var(--link); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* the merged title range of the first sheet */
.cell.title { padding: calc(30px * var(--z)) calc(22px * var(--z)) calc(26px * var(--z)); background: var(--cell); }
.ttl { display: inline-block; font: 600 calc(clamp(44px, 7.2vw, 112px) * var(--z))/1 var(--mono); letter-spacing: -.07em; color: var(--ink); padding: 0 .04em .1em 0; border-bottom: 5px double var(--ink); }
.ttl-s { display: block; margin-top: calc(16px * var(--z)); max-width: 62ch; font: 500 calc(clamp(17px, 1.5vw, 21px) * var(--z))/1.4 var(--sans); color: var(--ink-2); }
/* the portrait placed in cell A2, as a spreadsheet's picture in a cell (=IMMAGINE) */
.cell.pic { display: flex; align-items: flex-start; justify-content: center; padding: calc(30px * var(--z)) 12px 16px; }
.cell.pic img { display: block; width: 148px; max-width: 100%; height: auto; aspect-ratio: 1050 / 1400; object-fit: cover; border: 1px solid var(--rule-2); background: var(--chrome-2); }
.rec dd img { display: block; width: 96px; height: auto; border: 1px solid var(--rule-2); }
.cell.credit .sub { margin-top: 4px; font: inherit; color: inherit; }

/* the quote */
.cell.q { background: color-mix(in srgb, var(--hi) 12%, var(--cell)); }
.qty { display: flex; align-items: center; justify-content: flex-end; gap: 4px; }
.qin { width: 4ch; border: 0; background: transparent; padding: 1px 0; text-align: center; font: 700 calc(14px * var(--z))/1.3 var(--mono); }
.qin:focus { outline: 0; background: var(--cell); box-shadow: inset 0 -2px 0 var(--ink); }
.qst { width: 22px; height: 22px; padding: 0; display: grid; place-items: center; border: 1px solid var(--rule-2); background: var(--cell); font: 600 16px/1 var(--sans); color: var(--ink-2); }
.qst:hover { border-color: var(--ink); color: var(--ink); }
.cell.big .tx { font: 800 calc(17px * var(--z))/1.2 var(--sans); letter-spacing: .06em; text-transform: uppercase; }
.cell.total { background: var(--hi); display: flex; align-items: center; justify-content: flex-end; }
.tot { font: 800 calc(37px * var(--z))/1 var(--sans); letter-spacing: -.03em; }
.cell.act { padding: calc(10px * var(--z)); }
.cellbtn { display: inline-flex; align-items: center; gap: 10px; border: 1px solid var(--ink); background: var(--ink); color: var(--paper); padding: 10px 14px; border-radius: 2px; font: 700 calc(15px * var(--z))/1.2 var(--sans); transition: background .25s var(--e2), color .25s var(--e2); }
.cellbtn svg { width: 14px; height: 14px; stroke-width: 2; transition: transform .35s var(--e); }
.cellbtn:hover { background: var(--hi); color: var(--ink); } .cellbtn:hover svg { transform: translateX(3px); }

/* selection */
.cell.in { background: color-mix(in srgb, var(--hi) 28%, var(--cell)); }
.selbox { position: absolute; left: 0; top: 0; z-index: 2; box-shadow: inset 0 0 0 2px var(--ink); pointer-events: none; opacity: 0; transition: transform .24s var(--e), width .24s var(--e), height .24s var(--e), opacity .2s var(--e2); }
.selbox.shown { opacity: 1; }
.handle { position: absolute; right: -5px; bottom: -5px; width: 8px; height: 8px; background: var(--ink); border: 1.5px solid var(--cell); }
.selbox.ants { box-shadow: none; background-image: linear-gradient(90deg, var(--ink) 50%, transparent 0), linear-gradient(90deg, var(--ink) 50%, transparent 0), linear-gradient(0deg, var(--ink) 50%, transparent 0), linear-gradient(0deg, var(--ink) 50%, transparent 0);
  background-repeat: repeat-x, repeat-x, repeat-y, repeat-y; background-size: 10px 2px, 10px 2px, 2px 10px, 2px 10px; background-position: 0 0, 0 100%, 0 0, 100% 0; animation: ants .5s steps(5) infinite; }
.selbox.ants .handle { display: none; }
@keyframes ants { to { background-position: 10px 0, -10px 100%, 0 -10px, 100% 10px; } }
.cell.flash { animation: flash 1s var(--e2); }
@keyframes flash { from { background-color: var(--hi); } }

/* comments and validation prompts */
.notebox { position: absolute; left: 0; top: 0; z-index: 7; width: max-content; max-width: 270px; padding: 9px 11px 10px; background: var(--cell); border: 1px solid var(--ink); box-shadow: 0 14px 28px -16px rgba(19, 20, 22, .5); font: 400 14.5px/1.45 var(--sans); color: var(--ink); animation: pop .3s var(--e); }
.notebox b { display: block; margin-bottom: 3px; font: 700 12.5px/1.3 var(--sans); letter-spacing: .07em; text-transform: uppercase; }
.notebox.note b { color: var(--red); }
.notebox.note::before { content: ''; position: absolute; top: 8px; left: -15px; width: 14px; border-top: 1px solid var(--ink); }
.notebox.note.left::before { left: auto; right: -15px; }
.notebox.prompt::before, .notebox.err::before { content: ''; position: absolute; top: -9px; left: 22px; height: 8px; border-left: 1px solid var(--ink); }
.notebox.err { border-color: var(--red); box-shadow: 0 0 0 1px var(--red), 0 14px 28px -16px rgba(19, 20, 22, .5); }
.notebox.err b { color: var(--red); } .notebox.err::before { border-color: var(--red); }
@keyframes pop { from { opacity: 0; transform-origin: 0 0; scale: .96; } }

/* the request sheet: the form in cells */
.g-req { grid-template-columns: var(--rh) 230px 620px 260px; }
.g-req .cell.inp { padding: 0; }
.g-req input, .g-req select, .g-req textarea { display: block; width: 100%; height: 100%; min-height: calc(36px * var(--z)); border: 0; background: transparent; padding: calc(8px * var(--z)) calc(10px * var(--z)); font: 400 calc(13px * var(--z))/1.45 var(--mono); color: var(--ink); border-radius: 0; }
.g-req textarea { resize: vertical; min-height: calc(220px * var(--z)); }
.g-req select { appearance: none; -webkit-appearance: none; padding-right: 34px; background: linear-gradient(var(--chrome-2), var(--chrome-2)) right 0 top 0 / 26px 100% no-repeat; cursor: pointer; }
.g-req .sel { position: relative; }
.g-req .sel::after { content: ''; position: absolute; right: 9px; top: 50%; width: 7px; height: 7px; border-right: 1.6px solid var(--ink); border-bottom: 1.6px solid var(--ink); transform: translateY(-70%) rotate(45deg); pointer-events: none; }
.g-req input:focus, .g-req select:focus, .g-req textarea:focus { outline: 0; background-color: color-mix(in srgb, var(--hi) 12%, var(--cell)); }
.g-req input::placeholder, .g-req textarea::placeholder { color: var(--ink-3); opacity: 1; }
.g-req .cell.lab label { display: block; }
.lab-s { display: block; margin-top: 6px; font: 400 calc(14px * var(--z))/1.4 var(--sans); letter-spacing: 0; text-transform: none; color: var(--ink-3); }
.g-req .val { font: 400 calc(13px * var(--z))/1.45 var(--sans); color: var(--ink-3); padding-top: calc(9px * var(--z)); }
.g-req .send { padding: calc(12px * var(--z)) calc(10px * var(--z)) calc(14px * var(--z)); display: grid; gap: 10px; justify-items: start; }
.go { border: 1px solid var(--ink); background: var(--ink); color: var(--paper); padding: 11px 16px; border-radius: 2px; font: 700 calc(15.5px * var(--z))/1.2 var(--sans); transition: background .25s var(--e2), color .25s var(--e2); }
.go:hover { background: var(--hi); color: var(--ink); }
.g-req .lead-note { color: var(--ink-2); font-family: var(--sans); }
.g-req .out { font: 400 calc(14.5px * var(--z))/1.45 var(--sans); color: var(--ink); }
.g-req .out:empty { min-height: calc(30px * var(--z)); }

/* load and sheet change: rows arrive one after another */
.grid.enter .cell, .grid.enter .rh { animation: rowin .55s var(--e) both; animation-delay: var(--d, 0ms); }
@keyframes rowin { from { opacity: 0; translate: 0 5px; } }

/* the row card */
.wb { position: relative; }
.rec { position: absolute; right: 16px; bottom: 92px; z-index: 30; width: 400px; max-height: calc(100% - 230px); overflow: auto; background: var(--cell); border: 1px solid var(--ink); box-shadow: 0 24px 48px -22px rgba(19, 20, 22, .55); animation: pop .3s var(--e); }
.rec header { position: sticky; top: 0; display: flex; align-items: center; gap: 4px; padding: 0 4px 0 14px; height: 36px; background: var(--chrome-2); border-bottom: 2px solid var(--sheet); }
.rec header b { flex: 1; font: 700 12.5px/1 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); }
.rec header span { font: 600 11.5px/1 var(--mono); color: var(--ink-3); margin-right: 6px; }
.rec header button { width: 28px; height: 28px; display: grid; place-items: center; border: 1px solid transparent; background: transparent; color: var(--ink-2); padding: 0; }
.rec header button:hover { border-color: var(--ink); color: var(--ink); } .rec header svg { width: 10px; height: 10px; }
.rec dl { margin: 0; padding: 6px 14px 14px; }
.rec dt { display: flex; justify-content: space-between; margin-top: 12px; font: 700 12px/1.3 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.rec dt span { font: 600 10.5px/1.3 var(--mono); letter-spacing: 0; }
.rec dt:empty { display: none; }
.rec dd { margin: 3px 0 0; font: 400 13.5px/1.5 var(--mono); color: var(--ink); overflow-wrap: break-word; }
.rec dd .tx { font-family: var(--sans); font-size: 17px; }
.rec dd .sub { display: block; font: 14.5px/1.4 var(--sans); color: var(--ink-3); }
.rec dd a { color: var(--link); text-underline-offset: 3px; } .rec dd a svg { width: 10px; height: 10px; margin-left: 4px; }
.rec dd .ttl { font-size: 30px; border-bottom-width: 4px; } .rec dd .ttl-s { font: 16px/1.45 var(--sans); }
.rec .cellbtn { font-size: 13px; }

/* ---------- sheet tabs and status ---------- */
.tabs { position: relative; display: flex; align-items: stretch; height: 38px; background: var(--chrome); border-top: 1px solid var(--rule-2); min-width: 0; }
.tab-list { flex: none; width: 40px; border: 0; border-right: 1px solid var(--rule-2); background: transparent; display: grid; place-items: center; color: var(--ink-2); }
.tab-list svg { width: 16px; height: 16px; } .tab-list:hover { background: var(--chrome-2); color: var(--ink); }
.tab-row { display: flex; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.tab-row::-webkit-scrollbar { display: none; }
.tab { position: relative; flex: none; border: 0; border-right: 1px solid var(--rule-2); background: transparent; padding: 0 18px 2px; font: 600 15px/1 var(--sans); color: var(--ink-2); transition: background .2s var(--e2); }
.tab::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: var(--tc); transition: height .3s var(--e); }
.tab:hover { background: var(--chrome-2); color: var(--ink); }
.tab.on { background: var(--cell); color: var(--ink); font-weight: 800; margin-top: -1px; box-shadow: 0 -1px 0 var(--cell); }
.tab.on::after { height: 6px; }
.stat { display: flex; align-items: center; gap: 18px; padding: 0 16px; font: 500 14px/1 var(--sans); color: var(--ink-2); white-space: nowrap; }
.stat b { font: 700 12.5px/1 var(--mono); color: var(--ink); margin-left: 5px; }
.zoom { flex: none; display: flex; align-items: center; gap: 8px; padding: 0 14px; border-left: 1px solid var(--rule-2); font-size: 13.5px; color: var(--ink-3); }
.zoom input { width: 110px; height: 16px; margin: 0; appearance: none; -webkit-appearance: none; background: linear-gradient(var(--ink-3), var(--ink-3)) center / 100% 1px no-repeat; }
.zoom input::-webkit-slider-thumb { -webkit-appearance: none; width: 9px; height: 15px; background: var(--ink); border: 0; border-radius: 0; }
.zoom input::-moz-range-thumb { width: 9px; height: 15px; background: var(--ink); border: 0; border-radius: 0; }
.zoom output { width: 4.2ch; font: 600 12px/1 var(--mono); color: var(--ink); }
.sheet-menu { position: absolute; left: 8px; bottom: calc(100% + 6px); z-index: 40; margin: 0; padding: 4px 0; list-style: none; width: 320px; background: var(--cell); border: 1px solid var(--ink); box-shadow: 0 18px 34px -18px rgba(19, 20, 22, .55); }
.sheet-menu button { display: grid; grid-template-columns: 1fr auto; column-gap: 12px; width: 100%; border: 0; border-left: 5px solid var(--tc); background: transparent; padding: 8px 12px; text-align: left; }
.sheet-menu button:hover, .sheet-menu button:focus-visible { background: var(--hi-soft); outline: 0; }
.sheet-menu b { font: 700 15.5px/1.3 var(--sans); }
.sheet-menu span { grid-column: 1; font: 14px/1.35 var(--sans); color: var(--ink-3); }
.sheet-menu kbd { grid-column: 2; grid-row: 1 / 3; align-self: center; font: 600 11px/1 var(--mono); color: var(--ink-3); border: 1px solid var(--rule-2); padding: 3px 6px; }

.sbar { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 6px 16px 7px; background: var(--chrome-2); border-top: 1px solid var(--rule); font: 400 13px/1.4 var(--sans); color: var(--ink-2); min-width: 0; }
.comply { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.legal { flex: none; white-space: nowrap; }
.legal a { color: var(--ink); text-underline-offset: 2px; }

/* ---------- smaller screens ---------- */
@media (max-width: 1100px) { .tool-hint { display: none; } .doc-s { display: none; } }
@media (max-width: 700px) {
  :root { --rh: 34px; }
  .grid { grid-template-columns: var(--rh) var(--cols-m); }
  .g-req { grid-template-columns: var(--rh) 112px 236px 150px; }
  .tbar { gap: 10px; padding: 0 8px 0 12px; height: 46px; }
  .doc-t { display: none; }
  .brand img { height: 26px; }
  .write { padding: 6px 10px; font-size: 14px; }
  .tool { padding: 0 8px; font-size: 13.5px; }
  .namebox { width: 84px; }
  .fx { width: 30px; }
  .stat, .zoom-l { display: none; }
  .zoom { padding: 0 10px; } .zoom input { width: 64px; }
  .sbar { padding: 6px 12px; } .comply { display: none; } .legal { white-space: normal; }
  .cell.title { padding: 22px 14px 20px; }
  .tab { padding: 0 13px 2px; }
  .sheet-menu { width: calc(100vw - 16px); }
  .notebox { max-width: 230px; }
  .ttl { font-size: calc(38px * var(--z)); border-bottom-width: 4px; }
  .ttl-s, .cell[data-span] > .tx { display: block; max-width: calc(100vw - 72px); }
  .rec { left: 8px; right: 8px; width: auto; bottom: 84px; max-height: 62%; }
  .cell.pic { padding: 22px 8px 12px; }
  .cell.pic img { width: 84px; }
  .g-chi .cell.title .ttl { font-size: calc(28px * var(--z)); }
  .g-chi .cell.title .ttl-s { max-width: calc(100vw - var(--rh) - 102px - 34px); font-size: 16px; }
  .cell.credit .sub { max-width: calc(100vw - 72px); }
}
@media (max-width: 420px) { .zoom { display: none; } }

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-delay: 0ms !important; transition-duration: .01ms !important; } }
html.static *, html.static *::before, html.static *::after { transition: none !important; animation: none !important; }

/* Azeret Mono joins f+i; a ledger shows every letter on its own */
.grid, .grid *, .formula, .formula *, .namebox input, .rec dd, .rec dd * { font-variant-ligatures: none !important; font-feature-settings: "liga" 0, "calt" 0 !important; }

/* ---------- legal pages, in the workbook's chrome ---------- */
body.docbody { background: var(--paper); }
.dochead { display: flex; align-items: center; gap: 14px; height: 48px; padding: 0 16px; background: var(--chrome); border-bottom: 1px solid var(--rule-2); position: sticky; top: 0; z-index: 5; }
.dochead img { height: 30px; width: auto; display: block; }
.dochead span { padding-left: 14px; border-left: 1px solid var(--rule-2); font: 600 13px/1 var(--mono); color: var(--ink-3); }
.doc { max-width: 880px; margin: 0 auto; padding: 36px 24px 64px; font: 400 18px/1.65 var(--sans); color: var(--ink); }
.doc h1 { font: 800 clamp(34px, 5vw, 52px)/1 var(--sans); letter-spacing: -.035em; margin: 18px 0 18px; }
.doc h2 { font: 700 22px/1.3 var(--sans); margin: 34px 0 10px; padding-top: 14px; border-top: 2px solid var(--ink); }
.doc h3 { font: 700 18.5px/1.3 var(--sans); margin: 22px 0 6px; }
.doc a { color: var(--link); text-underline-offset: 2px; }
.doc table { width: 100%; border-collapse: collapse; margin: 12px 0 16px; font: 13px/1.5 var(--mono); background: var(--cell); }
.doc th, .doc td { text-align: left; vertical-align: top; padding: 7px 9px; border: 1px solid var(--rule); }
.doc th { background: var(--chrome-2); font: 700 13px/1.3 var(--sans); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2); border-bottom: 2px solid var(--ink); }
.doc code { font: 12.5px/1.4 var(--mono); background: var(--hi-soft); padding: 0 3px; }
.doc em { color: var(--ink-2); }
@media (max-width: 700px) { .doc { padding: 24px 16px 48px; font-size: 15px; } }

/* == legal == cookie banner + seller block (generated by sites/_legal/gen.py; the banner look comes from _legal/cookie-styles.css) */
.ck { position: fixed; left: 16px; bottom: 16px; z-index: 9999; max-width: 400px; font-family: inherit; font-size: 14px; line-height: 1.5; letter-spacing: 0; text-transform: none; text-align: left; }
.ck, .ck * { box-sizing: border-box; } .ck .ck-k { display: block; } .ck .ck-t, .ck .ck-p { margin: 0; } .ck .b { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: 12px; }
.ck button, .ck a.more { cursor: pointer; text-decoration: none; line-height: 1.2; margin: 0; }
/* banner: jessica-perra */
.ck { --ck-bottom: 112px; left: 150px; bottom: 124px; width: 350px; max-width: none; padding: 0 0 13px; background: var(--cell); color: var(--ink); border: 1px solid var(--ink); box-shadow: 0 18px 36px -18px rgba(19, 20, 22, .55); font-family: var(--sans); }
.ck::before { content: 'jp-lang'; position: absolute; left: -78px; top: -50px; width: 104px; height: 32px; display: flex; align-items: center; padding-left: 9px; border: 2px solid var(--ink); background: color-mix(in srgb, var(--hi) 35%, var(--cell)); font: 600 12px/1 var(--mono); color: var(--ink); }
.ck::after { content: ''; position: absolute; left: 21px; top: -23px; width: 8px; height: 8px; background: var(--ink); border: 1.5px solid var(--cell); }
.ck .ck-k::before { content: ''; position: absolute; left: 25px; top: -15px; height: 15px; border-left: 1px solid var(--ink); }
.ck .ck-k { padding: 7px 12px 6px; background: var(--chrome-2); border-bottom: 1px solid var(--rule-2); font: 700 12px/1.3 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); }
.ck .ck-t b { display: block; padding: 11px 13px 3px; font: 700 18px/1.25 var(--sans); color: var(--ink); }
.ck .ck-p { padding: 2px 13px 0; font-size: 14.5px; line-height: 1.45; color: var(--ink-2); }
.ck .b { padding: 0 13px; margin-top: 13px; gap: 8px; }
.ck button { border-radius: 2px; padding: 8px 15px; font: 700 14.5px/1.2 var(--sans); }
.ck .ok { border: 1px solid var(--ink); background: var(--ink); color: var(--paper); } .ck .ok:hover, .ck .ok:focus-visible { background: var(--hi); color: var(--ink); }
.ck .no { border: 1px solid var(--rule-2); background: var(--cell); color: var(--ink); } .ck .no:hover, .ck .no:focus-visible { border-color: var(--ink); }
.ck .more { margin-left: 4px; font: 600 14.5px/1.2 var(--sans); color: var(--link); text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 600px) { .ck { margin-top: 0; } .ck::before { left: 0; } .ck::after { left: 99px; } .ck .ck-k::before { left: 103px; } }
/* seller block: the workbook's file-properties dialog, opened from the Titolare link in the status bar */
footer.seller.panel { border-radius: 0; border: 1px solid var(--ink); background: var(--cell); color: var(--ink); box-shadow: 0 30px 60px -24px rgba(19, 20, 22, .6); padding: 50px 24px 22px; font-family: var(--sans); font-size: 14.5px; }
footer.seller.panel::before { content: 'Proprietà del file · titolare'; position: absolute; left: 0; right: 0; top: 0; height: 34px; display: flex; align-items: center; padding: 0 14px; background: var(--chrome-2); border-bottom: 1px solid var(--rule-2); font: 700 12.5px/1 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); }
footer.seller.panel .x { top: 2px; right: 6px; z-index: 1; color: var(--ink); }
footer.seller b { opacity: 1; color: var(--ink-3); font-size: 12px; }
footer.seller strong { font: 800 20px/1.3 var(--sans); }
footer.seller a { color: var(--link); }

@media (max-width: 600px) { .ck { left: 10px; right: 10px; bottom: var(--ck-bottom, 10px); width: auto; max-width: none; transform: none; } }
.seller { font-size: 12.5px; line-height: 1.6; color: inherit; padding: 22px 24px 26px; border-top: 1px solid rgba(128,128,128,.35); letter-spacing: 0; text-transform: none; font-family: inherit; }
.seller-in { max-width: 1180px; margin: 0 auto; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px 28px; }
.seller b { display: block; font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; opacity: .7; margin-bottom: 4px; font-weight: 700; }
.seller a { color: inherit; } .seller address { font-style: normal; } .seller strong { font-weight: 700; }
.seller.panel { display: none; position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 9998; background: #fff; color: #111; border-radius: 14px; box-shadow: 0 30px 60px -20px rgba(0,0,0,.5); max-width: 940px; margin: 0 auto; border-top: 0; padding: 24px 26px 22px; }
.seller.panel:target { display: block; }
.seller .x { position: absolute; top: 6px; right: 12px; text-decoration: none; font-size: 22px; line-height: 1; padding: 6px 8px; }
.ck-page .st { padding: 10px 14px; border: 1px solid rgba(128,128,128,.4); border-radius: 8px; margin: 10px 0 14px; font-weight: 700; } .ck-page .b { display: flex; gap: 8px; flex-wrap: wrap; } .ck-page button { font: inherit; font-weight: 700; padding: 9px 16px; border-radius: 999px; border: 1px solid currentColor; background: transparent; color: inherit; cursor: pointer; }
@media (max-width: 760px) { table.lgl-t, table.lgl-t tbody, table.lgl-t tr, table.lgl-t td { display: block; width: auto; } table.lgl-t thead { display: none; } table.lgl-t tr { padding: 10px 0; border-bottom: 1px solid rgba(128,128,128,.35); } table.lgl-t td { border: 0 !important; padding: 2px 0 !important; overflow-wrap: anywhere; } table.lgl-t td::before { content: attr(data-l) ": "; font-weight: 700; } }
table.lgl-t code { overflow-wrap: anywhere; }
.lead-note.lead-note { font-size: 12px; line-height: 1.5; margin: 0; letter-spacing: 0; text-transform: none; font-weight: 400; font-style: normal; text-align: left; max-width: 62ch; } .lead-note.lead-note a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
@media (max-width: 700px) { .seller-in { grid-template-columns: 1fr; } .seller.panel { left: 8px; right: 8px; bottom: 8px; max-height: 80dvh; overflow: auto; } }