/* ══════════════════════════════════════════════════════════════════════════════
   The developer pages' look — shared by /sviluppatori and /sviluppatori/api.

   WHY A FILE AND NOT TWO INLINE <style> BLOCKS. `api.html` is GENERATED
   (`.deploy/build-api-reference.mjs`) and `sviluppatori.html` is written by hand.
   Inlining the look meant it lived twice, in two languages, one of which is a
   template string inside a Node script — so the two dev pages had already drifted
   from each other AND from the homepage: 900px and 940px columns, a dark palette
   the marketing site does not have, and a system font stack instead of the brand's.
   One file, linked by both, is the only arrangement where fixing the look once
   fixes both pages.

   `deploy.sh` copies `sviluppatori/` with `cp -R`, so this ships without being
   named in the allow-list. That is the one directory the allow-list trusts
   wholesale — keep build artefacts out of it and nothing else.

   TOKENS ARE COPIED FROM index.html's `:root`, which copies them from
   Docs/custodo-design-system.md §9. `--teal` deliberately HOLDS THE LOGO NAVY:
   the brand moved teal→navy on 2026-07-22 and the token name was not renamed, so
   every rule already saying `var(--teal)` moved with it. Do not "fix" the name.

   LIGHT ONLY, ON PURPOSE. The previous dev pages honoured
   `prefers-color-scheme: dark` and the homepage does not, so a visitor in dark
   mode saw a dark reference hanging off a white site and read it as a different
   product. One palette, matching the homepage.
   ══════════════════════════════════════════════════════════════════════════════ */

:root{
  color-scheme:light;
  --teal:#0D3B76; --teal-deep:#0A2E5C; --teal-soft:#E7EDF7; --teal-logo:#0D3B76;
  --navy:#141C33; --indigo:#22305B;
  --ink:#1B2430; --muted:#5C6470; --line:#E4EAEA;
  --bg:#FFFFFF; --wash:#F6F9F9; --surface:#FFFFFF; --brass:#E9A91E;
  --success:#159A48; --success-bg:#E6F4EC;
  --warn:#9A6A12; --warn-bg:#FBF1DC; --danger:#B23B3B; --danger-bg:#FBE9E9;
  --font:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --r-sm:8px; --r-md:12px; --r-lg:16px; --r-xl:24px; --r-pill:999px;
  --shadow:0 1px 2px rgba(20,28,51,.06);
  --shadow-md:0 10px 30px rgba(20,28,51,.08); --shadow-lg:0 30px 60px rgba(20,28,51,.14);
  --maxw:1200px;   /* nav, hero and footer — identical to the homepage */
  --maxw-doc:1560px; /* the documentation shell, which is what fills the screen */
  --ease-out-soft:cubic-bezier(.22,.61,.36,1);
  --h-nav:64px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;scroll-padding-top:96px;-webkit-tap-highlight-color:transparent}
body{margin:0;background:var(--surface);color:var(--ink);font:16px/1.6 var(--font);-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{margin:0;font-weight:800;letter-spacing:-.022em;line-height:1.12;color:var(--navy);text-wrap:balance}
a{color:inherit;text-decoration:none}
p{margin:0}
img,svg{max-width:100%}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}
.muted{color:var(--muted)}
.eyebrow{display:inline-block;font-size:12px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--teal);background:var(--teal-soft);border-radius:var(--r-pill);padding:6px 13px}
code{font:.88em/1.4 var(--mono);background:var(--teal-soft);color:var(--teal-deep);border-radius:5px;padding:1px 5px}
/* The homepage sets `white-space:nowrap` on inline code because its code spans are
   single identifiers. Here they are header lines and paths, and nowrap forced a
   horizontal scrollbar on the whole page at phone width. */
:where(a,button,summary,input):focus-visible{outline:2px solid var(--teal);outline-offset:2px;border-radius:var(--r-sm)}

/* ── buttons — pill, navy primary, per design system §10 ──────────────────── */
.btn{display:inline-flex;align-items:center;gap:9px;font-family:var(--font);font-weight:700;font-size:15px;border-radius:var(--r-pill);padding:13px 24px;cursor:pointer;border:1px solid transparent;white-space:nowrap;
     transition:background .15s var(--ease-out-soft),color .15s,border-color .15s,box-shadow .2s var(--ease-out-soft),transform .1s ease}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:translateY(0) scale(.985)}
.btn-primary{background:var(--teal);color:#fff;box-shadow:0 6px 16px rgba(13,59,118,.22)}
.btn-primary:hover{background:var(--teal-deep);box-shadow:0 12px 26px rgba(13,59,118,.3)}
.btn-ghost{background:#fff;color:var(--ink);border-color:var(--line)}
.btn-ghost:hover{border-color:var(--teal);color:var(--teal)}
.btn-sm{padding:9px 16px;font-size:13.5px}
.btn svg{width:17px;height:17px;flex:0 0 17px;stroke:currentColor;fill:none;stroke-width:2}

/* ── nav — same component as the homepage, so the two pages are one site ──── */
header.nav{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.88);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-bottom:1px solid var(--line);
           transition:box-shadow .25s var(--ease-out-soft),background .25s var(--ease-out-soft)}
header.nav.scrolled{box-shadow:0 8px 28px rgba(20,28,51,.09);background:rgba(255,255,255,.94)}
.nav .wrap{display:flex;align-items:center;height:var(--h-nav);gap:26px;max-width:var(--maxw-doc)}
.brand{display:flex;align-items:center;gap:10px;font-weight:800;font-size:21px;letter-spacing:-.01em;color:var(--navy)}
.logo-c{width:32px;height:32px;flex:0 0 32px}
.navlinks{display:flex;gap:22px;margin:0 auto}
.navlinks a{position:relative;font-size:14.5px;font-weight:600;color:var(--muted);padding:4px 0}
.navlinks a:hover{color:var(--navy)}
.navlinks a.on{color:var(--teal)}
.navlinks a.on::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:2px;border-radius:2px;background:var(--teal)}
.nav-cta{display:flex;gap:10px;align-items:center}
@media(max-width:1060px){.navlinks{display:none}}

/* ── hero band ────────────────────────────────────────────────────────────── */
.devhero{background:radial-gradient(1100px 540px at 84% -14%,var(--teal-soft),transparent 62%),linear-gradient(180deg,#FBFCFE,#fff);
         border-bottom:1px solid var(--line);padding:54px 0 40px}
.devhero .wrap{max-width:var(--maxw-doc)}
.devhero h1{font-size:clamp(30px,3.9vw,46px);max-width:22ch;margin:14px 0 0}
.devhero h1 .accent{color:var(--teal)}
.devhero .lede{font-size:clamp(16px,1.4vw,19px);color:var(--muted);margin-top:16px;max-width:74ch;text-wrap:pretty}
.devhero .cta-row{display:flex;gap:11px;flex-wrap:wrap;margin-top:26px}
.herogrid{display:grid;grid-template-columns:1.25fr .95fr;gap:48px;align-items:end}
@media(max-width:1080px){.herogrid{grid-template-columns:1fr;gap:30px;align-items:start}}

/* the four facts, in the homepage's proof-band idiom */
.factstrip{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.fact{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:16px 18px;box-shadow:var(--shadow)}
.fact .n{font-size:clamp(22px,2.3vw,28px);font-weight:800;color:var(--teal);letter-spacing:-.03em;font-variant-numeric:tabular-nums;line-height:1}
.fact .l{margin-top:6px;font-size:12.5px;font-weight:600;color:var(--muted);line-height:1.4}

/* ── the shell that fills the screen ──────────────────────────────────────── */
.docshell{max-width:var(--maxw-doc);margin:0 auto;padding:0 24px;display:grid;gap:40px;align-items:start}
.docshell.three{grid-template-columns:224px minmax(0,1fr) 320px}
.docshell.two{grid-template-columns:264px minmax(0,1fr)}
@media(max-width:1400px){.docshell.three{grid-template-columns:210px minmax(0,1fr)}.docshell.three .rail-right{display:none}}
@media(max-width:1080px){.docshell.three,.docshell.two{grid-template-columns:minmax(0,1fr)}.docshell .rail{display:none}}

.rail{position:sticky;top:calc(var(--h-nav) + 22px);max-height:calc(100vh - var(--h-nav) - 44px);overflow-y:auto;overscroll-behavior:contain;padding:26px 0 26px}
.rail::-webkit-scrollbar{width:8px}
.rail::-webkit-scrollbar-thumb{background:var(--line);border-radius:8px}
.rail h5{font-size:11.5px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:var(--muted);margin:0 0 11px}
.rail h5+h5{margin-top:22px}
.railnav{display:grid;gap:1px}
.railnav a{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:13.5px;font-weight:600;color:var(--muted);padding:7px 11px;border-radius:var(--r-sm);border-left:2px solid transparent;transition:background .14s,color .14s,border-color .14s}
.railnav a:hover{background:var(--wash);color:var(--navy)}
.railnav a.on{background:var(--teal-soft);color:var(--teal-deep);border-left-color:var(--teal)}
.railnav .cnt{flex:0 0 auto;font-size:11.5px;font-weight:700;color:var(--muted);background:var(--wash);border:1px solid var(--line);border-radius:var(--r-pill);padding:1px 7px;font-variant-numeric:tabular-nums}
.railnav a.on .cnt{background:#fff;border-color:transparent;color:var(--teal)}

/* ── the prose column ─────────────────────────────────────────────────────── */
main.doc{padding:44px 0 20px;min-width:0}
.docsec{padding-bottom:14px}
.docsec+.docsec{margin-top:52px}
.docsec>h2{font-size:clamp(22px,2.4vw,29px);scroll-margin-top:90px}
.docsec>h2 .num{display:inline-grid;place-items:center;width:30px;height:30px;margin-right:12px;border-radius:9px;background:var(--teal);color:#fff;font-size:15px;font-weight:800;vertical-align:2px}
.docsec>p,.docsec>ul,.docsec>ol{max-width:78ch}
.docsec>p{margin-top:14px;color:var(--ink)}
.docsec h3{font-size:17px;margin:30px 0 8px}
.docsec ul,.docsec ol{margin:12px 0;padding-left:20px}
.docsec li{margin:6px 0}
.docsec li b,.docsec li strong{color:var(--navy);font-weight:700}
.lead{font-size:17px;color:var(--muted);margin-top:12px;max-width:76ch;text-wrap:pretty}

pre{background:var(--navy);color:#E4ECF8;border-radius:var(--r-md);padding:15px 17px;overflow-x:auto;
    font:13px/1.62 var(--mono);margin:16px 0;box-shadow:var(--shadow);border:1px solid #1E2942}
pre code{background:none;color:inherit;padding:0;font-size:inherit;border-radius:0}
.codehead{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:18px 0 -8px}
.codehead .t{font-size:12px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:var(--muted)}
.copy{background:#fff;border:1px solid var(--line);border-radius:var(--r-pill);padding:5px 12px;font:700 12px var(--font);color:var(--muted);cursor:pointer}
.copy:hover{border-color:var(--teal);color:var(--teal)}
.copy.done{border-color:var(--success);color:var(--success)}

/* ── cards, notes and tables ──────────────────────────────────────────────── */
.card{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:22px;box-shadow:var(--shadow)}
.cards2{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:16px;margin-top:18px}
.note{background:var(--wash);border:1px solid var(--line);border-left:3px solid var(--teal);border-radius:var(--r-md);padding:14px 16px;margin:18px 0;max-width:82ch;font-size:14.5px}
.note strong{display:block;color:var(--navy);margin-bottom:4px}
.note.warn{border-left-color:var(--brass);background:var(--warn-bg);border-color:#EEDFBB}

.tbl{width:100%;overflow-x:auto;margin:16px 0;border:1px solid var(--line);border-radius:var(--r-md);background:#fff;box-shadow:var(--shadow)}
table{width:100%;border-collapse:collapse;font-size:14px}
th,td{text-align:left;padding:11px 14px;border-bottom:1px solid var(--line);vertical-align:top}
thead th{background:var(--wash);font-size:11.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);white-space:nowrap}
tbody tr:last-child td{border-bottom:none}

/* status pills for the response table */
.st{display:inline-block;font:800 12px/1 var(--mono);border-radius:var(--r-pill);padding:5px 9px;white-space:nowrap}
.st.ok{background:var(--success-bg);color:var(--success)}
.st.warn{background:var(--warn-bg);color:var(--warn)}
.st.bad{background:var(--danger-bg);color:var(--danger)}

/* ── download cards — the API collection, offered as files ────────────────── */
.dl{display:grid;grid-template-columns:repeat(auto-fit,minmax(310px,1fr));gap:16px;margin-top:20px}
.dlcard{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:22px;box-shadow:var(--shadow);
        transition:border-color .15s,box-shadow .18s var(--ease-out-soft),transform .15s var(--ease-out-soft)}
.dlcard:hover{border-color:var(--teal);box-shadow:var(--shadow-md);transform:translateY(-2px)}
.dlcard .ic{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;background:var(--teal);margin-bottom:14px}
.dlcard .ic svg{width:21px;height:21px;stroke:#fff;fill:none;stroke-width:2}
.dlcard h3{font-size:17px}
.dlcard p{color:var(--muted);font-size:14px;margin-top:7px;flex:1 1 auto}
.dlcard .meta{margin-top:14px;font-size:12px;font-weight:700;color:var(--muted);font-variant-numeric:tabular-nums}
.dlcard .btn{margin-top:14px;align-self:flex-start}

/* ── right rail: the cheat sheet ──────────────────────────────────────────── */
.rail-right .card{padding:18px}
.rail-right h4{font-size:13px;letter-spacing:.02em}
.rail-right .kv{display:grid;gap:9px;margin-top:12px;font-size:13px}
.rail-right .kv div{display:grid;gap:2px}
.rail-right .kv dt,.rail-right .kv .k{font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.rail-right .kv .v{font:12.5px/1.45 var(--mono);color:var(--navy);word-break:break-all}
.rail-right pre{font-size:11.5px;padding:12px 13px;margin:12px 0 0}
.rail-right .card+.card{margin-top:14px}

/* ══ the API reference's own pieces ══════════════════════════════════════════ */
.apitools{display:flex;gap:11px;flex-wrap:wrap;align-items:center;margin-top:22px}
.search{position:relative;flex:1 1 300px;max-width:420px}
.search input{width:100%;height:44px;border:1px solid var(--line);border-radius:var(--r-pill);background:#fff;padding:0 16px 0 42px;
              font:15px var(--font);color:var(--ink);box-shadow:var(--shadow)}
.search input::placeholder{color:var(--muted)}
.search input:focus{border-color:var(--teal);outline:none;box-shadow:0 0 0 3px var(--teal-soft)}
.search svg{position:absolute;left:15px;top:13px;width:18px;height:18px;stroke:var(--muted);fill:none;stroke-width:2;pointer-events:none}
.searchcount{font-size:13px;font-weight:600;color:var(--muted);font-variant-numeric:tabular-nums}

.op-group{margin:0}
.op-group+.op-group{margin-top:46px}
.op-group>h2{display:flex;align-items:center;gap:11px;font-size:22px;padding-bottom:11px;border-bottom:1px solid var(--line);scroll-margin-top:90px}
.op-count{font-size:12px;font-weight:800;color:var(--teal);background:var(--teal-soft);border-radius:var(--r-pill);padding:3px 10px;font-variant-numeric:tabular-nums}

/* Two-up at desktop width — 136 single-column cards on a 1560px shell was the
   emptiness this rebuild is about. `align-items:start` keeps an open <details>
   from stretching its neighbour. */
.oplist{display:grid;grid-template-columns:repeat(auto-fill,minmax(430px,1fr));gap:14px;margin-top:18px;align-items:start}
.op{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:17px 19px;box-shadow:var(--shadow);min-width:0;
    transition:border-color .15s,box-shadow .18s var(--ease-out-soft)}
.op:hover{border-color:color-mix(in srgb,var(--teal) 40%,var(--line));box-shadow:var(--shadow-md)}
.op:target{border-color:var(--teal);box-shadow:0 0 0 3px var(--teal-soft)}
.op>h3{font-size:15px;scroll-margin-top:96px}
.op>h3 code{font-family:var(--mono);font-size:14px;background:none;color:var(--navy);padding:0;font-weight:800}
.op-sum{margin-top:5px;font-size:14.5px;color:var(--ink)}
.op-flags{display:flex;gap:6px;flex-wrap:wrap;margin-top:11px}
.fl{display:inline-flex;align-items:center;gap:4px;font-size:10.5px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;border-radius:var(--r-pill);padding:4px 9px;white-space:nowrap;
    background:var(--wash);color:var(--muted);border:1px solid var(--line)}
.fl.read{background:var(--success-bg);color:var(--success);border-color:transparent}
.fl.write{background:var(--teal-soft);color:var(--teal-deep);border-color:transparent}
.fl.destr{background:var(--danger-bg);color:var(--danger);border-color:transparent}
.fl.tier{background:var(--warn-bg);color:var(--warn);border-color:transparent}
.fl code{background:none;color:inherit;padding:0;font-size:11px;font-weight:800;letter-spacing:0}
.op pre{margin:12px 0 0;font-size:12px;padding:12px 14px}
.op details{margin-top:12px;border-top:1px solid var(--line);padding-top:11px}
.op summary{cursor:pointer;color:var(--teal);font-size:13px;font-weight:700;list-style:none}
.op summary::-webkit-details-marker{display:none}
.op summary::before{content:"▸ ";font-size:11px}
.op details[open] summary::before{content:"▾ "}
.op-desc{margin-top:11px;font-size:13.5px;color:var(--muted);line-height:1.6}
table.op-args{font-size:12.5px;margin-top:12px}
table.op-args th,table.op-args td{padding:7px 9px}
table.op-args td:nth-child(1){white-space:nowrap}
table.op-args code{background:var(--wash);color:var(--navy);font-size:11.5px}
.op-args-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r-sm);margin-top:12px}
.op-args-wrap table.op-args{margin:0}
.noresults{padding:44px 0;color:var(--muted);font-size:15px}

/* ── footer — the homepage's, verbatim ────────────────────────────────────── */
footer.site{background:var(--navy);color:#AEB9CF;padding:52px 0 24px;font-size:14px;margin-top:70px}
footer.site .wrap{max-width:var(--maxw-doc)}
footer.site .cols{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:28px}
@media(max-width:900px){footer.site .cols{grid-template-columns:1fr 1fr}}
footer.site h5{color:#fff;font-size:12px;letter-spacing:.09em;text-transform:uppercase;margin:0 0 12px}
footer.site a{display:block;color:#9FB0C9;padding:4px 0}
footer.site a:hover{color:#fff}
footer.site .brand{color:#fff}
.fbot{border-top:1px solid #26314F;margin-top:32px;padding-top:18px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;color:#7C88A8}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important}
  html{scroll-behavior:auto}
}