/*
  Layout: an ink rail (the agency's frame) beside a bone work surface; every change is a
  numbered verifikation with its underlag, its rows (before / after) and an attest line.
  Digitalo's own colours: bone, ink, one ultramarine for action and attest. The logo's
  pixels, and each site's marker, take that client's colour (Kameleonten).
  One committed light theme: daytime desk and phone, set explicitly.
*/
:root{
  color-scheme: light;
  --paper:#f6f5f1;      /* bone: the ground */
  --panel:#ffffff;      /* work panels */
  --ink:#121212;        /* text and the rail */
  --ink-2:#2a2a28;      /* rail hover */
  --muted:#5e5d58;      /* secondary text, 6.4:1 on bone */
  --hint:#6b6a64;       /* hints, 5.2:1 on white */
  --line:#d9d7d0;       /* hairlines */
  --line-2:#9b9a94;     /* field borders */
  --ultra:#2a37e6;      /* action, attest, focus */
  --ultra-d:#1d27b8;
  --ultra-s:#eceefd;
  --good:#1e6b45; --good-s:#e4f0e9;
  --warn:#8a5200; --warn-s:#f8eedb;
  --bad:#b42318;  --bad-s:#fbe9e6;
  --rail-fg:#d8d6cf; --rail-mute:#a9a79f;
  --pixel:#2a37e6;      /* the logo's pixels: the client's colour inside a site */
  --logo-ink:#f6f5f1;
  --f-display:'Funnel Display',ui-sans-serif,system-ui,sans-serif;
  --f-ui:'Funnel Sans',ui-sans-serif,system-ui,sans-serif;
  --f-data:'Martian Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  --r:3px;
}
html,body{height:100%}
body{background:var(--paper);color:var(--ink);font-family:var(--f-ui);font-size:15px;line-height:1.5;-webkit-font-smoothing:antialiased}
::selection{background:#c9cdfb;color:var(--ink)}
a{color:var(--ultra);text-underline-offset:3px;text-decoration-thickness:1px}
a:hover{color:var(--ultra-d)}
:focus-visible{outline:2px solid var(--ultra);outline-offset:2px;border-radius:2px}
button,input,select,textarea{font:inherit;color:inherit}
*{box-sizing:border-box}
*{scrollbar-color:var(--line-2) transparent;scrollbar-width:thin}
h1,h2,h3{font-family:var(--f-display);font-weight:600;letter-spacing:-0.01em;text-wrap:balance;margin:0;line-height:1.15}
h1{font-size:28px}
h2{font-size:19px}
h3{font-size:16px}
p{margin:0}
.num{font-variant-numeric:tabular-nums}
.data{font-family:var(--f-data);font-size:12px;letter-spacing:0;word-break:break-word}
.muted{color:var(--muted)}
.hint{color:var(--hint);font-size:13px;line-height:1.45}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
@media (prefers-reduced-motion: reduce){*,*::before,*::after{animation:none!important;transition:none!important}}

/* ---------- shell ---------- */
.app{display:flex;min-height:100%}
.rail{position:sticky;top:0;height:100vh;flex:0 0 236px;background:var(--ink);color:var(--rail-fg);display:flex;flex-direction:column;padding:18px 12px calc(14px + env(safe-area-inset-bottom,0px)) max(12px,env(safe-area-inset-left,0px));gap:18px;overflow-y:auto}
.brand{display:flex;flex-direction:column;gap:6px;padding:4px 10px 2px;color:var(--rail-fg);text-decoration:none}
.brand .logo-svg{height:24px;width:auto;display:block}
.brand span{font-size:12px;color:var(--rail-mute);letter-spacing:.02em}
.nav{display:flex;flex-direction:column;gap:1px}
.nav a{display:flex;align-items:center;gap:10px;min-height:38px;padding:0 10px;border-radius:var(--r);color:var(--rail-fg);text-decoration:none;font-size:14px;font-weight:500}
.nav a:hover{background:var(--ink-2);color:#fff}
.nav a[aria-current="page"]{background:#262624;color:#fff}
.nav a .px{width:9px;height:9px;flex:none;opacity:0}
.nav a[aria-current="page"] .px{opacity:1}
.nav a .count{margin-left:auto;font-size:12px;color:var(--ink);background:var(--paper);border-radius:2px;padding:0 6px;font-weight:600}
.nav-sep{font-size:12px;color:var(--rail-mute);padding:10px 10px 4px}
.rail-foot{margin-top:auto;display:flex;align-items:center;gap:10px;padding:10px;border-top:1px solid #2c2c2a}
.avatar{width:30px;height:30px;border-radius:var(--r);background:#2c2c2a;color:#fff;display:flex;align-items:center;justify-content:center;font-weight:600;font-size:13px;flex:none}
.rail-foot b{display:block;color:#fff;font-size:14px;font-weight:600}
.rail-foot span{font-size:12px;color:var(--rail-mute)}

.main{flex:1;min-width:0;display:flex;flex-direction:column}
.top{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;background:var(--paper);border-bottom:1px solid var(--line);display:flex;align-items:center;gap:12px;padding:10px max(24px,env(safe-area-inset-right,0px)) 10px 24px;min-height:60px}
.crumbs{display:flex;align-items:center;gap:8px;min-width:0;font-size:14px;flex-wrap:wrap}
.crumbs a{color:var(--muted);text-decoration:none}
.crumbs a:hover{color:var(--ink);text-decoration:underline}
.crumbs .sep{color:var(--line-2)}
.crumbs b{font-weight:600}
.top-actions{margin-left:auto;display:flex;align-items:center;gap:8px}
.search-btn{display:flex;align-items:center;gap:8px;min-height:38px;padding:0 10px 0 12px;border:1px solid var(--line);border-radius:var(--r);background:var(--panel);color:var(--muted);cursor:pointer;font-size:14px;min-width:240px}
.search-btn kbd{margin-left:auto;font-family:var(--f-data);font-size:11px;border:1px solid var(--line);border-radius:2px;padding:1px 5px;color:var(--muted)}
.icon-btn{width:38px;height:38px;display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--line);border-radius:var(--r);background:var(--panel);cursor:pointer;color:var(--ink);position:relative}
.icon-btn:hover{border-color:var(--line-2)}
.icon-btn .dot{position:absolute;top:7px;right:7px;width:7px;height:7px;background:var(--ultra);border-radius:1px}
.view{padding:28px max(24px,env(safe-area-inset-right,0px)) 56px 24px;display:flex;flex-direction:column;gap:28px;max-width:1440px;width:100%}
.view.wide{max-width:none;padding:0}
.page-head{display:flex;flex-wrap:wrap;align-items:flex-end;gap:12px 20px}
.page-head .lead{display:flex;flex-direction:column;gap:6px;flex:1 1 420px;min-width:0}
.page-head .lead p{color:var(--muted);max-width:68ch}
.page-head .acts{display:flex;gap:8px;flex-wrap:wrap}

.tabbar{display:none}

/* ---------- controls ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:40px;padding:0 16px;border-radius:var(--r);border:1px solid transparent;font-weight:600;font-size:14px;cursor:pointer;text-decoration:none;white-space:nowrap;transition:background-color .15s,border-color .15s,color .15s}
.btn-primary{background:var(--ultra);color:#fff}
.btn-primary:hover{background:var(--ultra-d);color:#fff}
.btn-secondary{background:var(--panel);color:var(--ink);border-color:var(--line-2)}
.btn-secondary:hover{border-color:var(--ink);color:var(--ink)}
.btn-quiet{background:transparent;color:var(--ink);border-color:transparent;padding:0 10px}
.btn-quiet:hover{background:#ecebe5}
.btn-danger{background:var(--panel);color:var(--bad);border-color:#e3b4ae}
.btn-danger:hover{border-color:var(--bad)}
.btn[disabled],.btn[aria-disabled="true"]{opacity:.5;cursor:not-allowed}
.btn-sm{min-height:32px;padding:0 12px;font-size:13px}
.link-btn{background:none;border:0;padding:0;color:var(--ultra);cursor:pointer;font-weight:500;text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.link-btn:hover{color:var(--ultra-d)}
.seg{display:inline-flex;border:1px solid var(--line);border-radius:var(--r);background:var(--panel);padding:2px;gap:2px}
.seg button{min-height:32px;padding:0 11px;border:0;border-radius:2px;background:transparent;cursor:pointer;font-size:13px;color:var(--muted);font-weight:500;display:inline-flex;align-items:center;gap:6px}
.seg button[aria-pressed="true"]{background:var(--ink);color:#fff}
.seg button:hover:not([aria-pressed="true"]){color:var(--ink);background:#f0efea}
.field{display:flex;flex-direction:column;gap:6px;min-width:0}
.field>label,.field>.lab{font-size:13px;font-weight:600}
.input,select.input,textarea.input{width:100%;border:1px solid var(--line-2);border-radius:var(--r);background:var(--panel);padding:9px 11px;font-size:15px;line-height:1.4;min-height:40px}
textarea.input{resize:vertical}
.input:focus{outline:2px solid var(--ultra);outline-offset:0;border-color:var(--ultra)}
.input::placeholder{color:var(--hint)}
.check{display:flex;align-items:flex-start;gap:10px;font-size:14px;cursor:pointer;min-height:28px}
.check input{width:18px;height:18px;accent-color:var(--ultra);margin:1px 0 0;flex:none}
.filters{display:flex;flex-wrap:wrap;gap:8px;align-items:center}

/* status: words with a pixel, only where something has a status */
.st{display:inline-flex;align-items:center;gap:7px;font-size:13px;font-weight:600;white-space:nowrap}
.st svg{width:10px;height:10px;flex:none}
.st.attest{color:var(--ultra-d)} .st.attest svg{fill:var(--ultra)}
.st.checking{color:var(--warn)} .st.checking svg{fill:#c47a00}
.st.failed{color:var(--bad)} .st.failed svg{fill:var(--bad)}
.st.live{color:var(--good)} .st.live svg{fill:#2b8a5a}
.st.draft,.st.claude{color:var(--muted)} .st.draft svg{fill:var(--line-2)} .st.claude svg{fill:var(--ink)}
.st.rejected{color:var(--muted);text-decoration:line-through} .st.rejected svg{fill:var(--line-2)}
.st.checking svg,.st.claude svg{animation:blink 1.2s steps(2,end) infinite}
@keyframes blink{50%{opacity:.25}}

/* surfaces */
.panel{background:var(--panel);border:1px solid var(--line);border-radius:var(--r)}
.panel-pad{padding:20px}
.section{display:flex;flex-direction:column;gap:14px}
.section-head{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.section-head p{color:var(--muted);font-size:14px}
.section-head .right{margin-left:auto}
.cols{display:flex;flex-wrap:wrap;gap:24px;align-items:flex-start}
.cols>.c-main{flex:999 1 560px;min-width:0;display:flex;flex-direction:column;gap:24px}
.cols>.c-side{flex:1 1 320px;min-width:0;display:flex;flex-direction:column;gap:24px}

/* tables */
.tbl-wrap{overflow-x:auto;background:var(--panel);border:1px solid var(--line);border-radius:var(--r)}
table{width:100%;border-collapse:collapse;font-size:14px}
th{text-align:left;font-size:12.5px;font-weight:600;color:var(--muted);padding:10px 14px;border-bottom:1px solid var(--line);white-space:nowrap;background:#fbfaf8}
th button{all:unset;cursor:pointer;display:inline-flex;gap:4px;align-items:center}
th button:focus-visible{outline:2px solid var(--ultra);outline-offset:2px}
td{padding:12px 14px;border-bottom:1px solid #ecebe6;vertical-align:middle}
tr:last-child td{border-bottom:0}
tbody tr.clickable{cursor:pointer}
tbody tr.clickable:hover td{background:#faf9f6}
td.r,th.r{text-align:right}
.site-cell{display:flex;align-items:center;gap:12px;min-width:220px}
.site-cell b{display:block;font-weight:600}
.site-mark{width:14px;height:14px;flex:none}
.empty{display:flex;flex-direction:column;gap:10px;align-items:flex-start;padding:28px;border:1px dashed var(--line-2);border-radius:var(--r);background:#fbfaf8}
.empty h3{font-size:17px}
.empty p{color:var(--muted);max-width:60ch}

/* list rows (the journal, inbox, queue) */
.rows{display:flex;flex-direction:column}
.row{display:grid;grid-template-columns:auto 1fr auto;gap:4px 16px;align-items:center;padding:14px 16px;border-bottom:1px solid #ecebe6;text-decoration:none;color:inherit}
.row:last-child{border-bottom:0}
a.row:hover,button.row:hover{background:#faf9f6}
button.row{all:unset;display:grid;grid-template-columns:auto 1fr auto;gap:4px 16px;align-items:center;padding:14px 16px;border-bottom:1px solid #ecebe6;cursor:pointer}
button.row:focus-visible{outline:2px solid var(--ultra);outline-offset:-2px}
.row .no{font-family:var(--f-display);font-weight:600;font-size:15px;min-width:72px}
.row .t{font-weight:600;min-width:0}
.row .s{grid-column:2;color:var(--muted);font-size:13px;min-width:0}
.row .end{grid-row:1 / 3;grid-column:3;display:flex;flex-direction:column;align-items:flex-end;gap:4px}
.row.plain,button.row.plain{grid-template-columns:1fr auto}
.row.plain .t{grid-column:1}.row.plain .s{grid-column:1}.row.plain .end{grid-column:2}

/* ---------- the verifikation (signature) ---------- */
.ver{background:var(--panel);border:1px solid var(--ink);border-radius:var(--r);display:flex;flex-direction:column}
.ver-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 18px;padding:18px 20px 14px;border-bottom:1px solid var(--ink)}
.ver-no{font-family:var(--f-display);font-weight:700;font-size:34px;letter-spacing:-0.02em;line-height:1;font-variant-numeric:tabular-nums}
.ver-title{font-family:var(--f-display);font-weight:600;font-size:20px;flex:1 1 280px;min-width:0}
.ver-meta{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));border-bottom:1px solid var(--line)}
.ver-meta div{padding:10px 20px;border-right:1px solid var(--line);display:flex;flex-direction:column;gap:2px;min-width:0}
.ver-meta div:last-child{border-right:0}
.ver-meta dt{font-size:12px;color:var(--muted)}
.ver-meta dd{margin:0;font-size:14px;font-weight:500;min-width:0;overflow-wrap:anywhere}
.ver-rows{overflow-x:auto}
.ver-rows table{font-size:14px}
.ver-rows th{background:transparent}
.ver-rows td{vertical-align:top}
.ver-rows .before{color:#7a1c13;background:#fdf3f1}
.ver-rows .after{color:#14532f;background:#f0f7f2}
.ver-rows td.path{width:30%}
.attest-line{display:flex;flex-wrap:wrap;align-items:center;gap:14px 24px;padding:16px 20px}
.sig{flex:1 1 280px;display:flex;flex-direction:column;gap:4px;min-width:0}
.sig .line{border-bottom:1px solid var(--ink);min-height:30px;display:flex;align-items:flex-end;padding-bottom:4px;font-family:var(--f-display);font-weight:600;font-size:18px;gap:10px}
.sig .line svg{width:12px;height:12px;fill:var(--ultra);margin-bottom:5px}
.sig small{font-size:12px;color:var(--muted)}
.sig .waiting{color:var(--hint);font-family:var(--f-ui);font-weight:400;font-size:14px}

/* checks list */
.checks{display:flex;flex-direction:column}
.chk{display:grid;grid-template-columns:18px 1fr auto;gap:10px;padding:9px 0;border-bottom:1px solid #ecebe6;font-size:14px;align-items:start}
.chk:last-child{border-bottom:0}
.chk svg{width:12px;height:12px;margin-top:4px}
.chk.ok svg{fill:#2b8a5a} .chk.run svg{fill:#c47a00;animation:blink 1.2s steps(2,end) infinite} .chk.fail svg{fill:var(--bad)} .chk.wait svg{fill:var(--line)}
.chk .d{grid-column:2 / 4;color:var(--muted);font-size:13px}
.chk.fail .d{color:var(--bad)}

/* log */
.log{font-family:var(--f-data);font-size:12px;line-height:1.7;background:#fbfaf8;border:1px solid var(--line);border-radius:var(--r);padding:12px 14px;max-height:260px;overflow:auto;white-space:pre-wrap}
.log .k{color:var(--muted)}

/* ---------- workspace ---------- */
.ws{display:grid;grid-template-columns:260px minmax(0,1fr) 360px;grid-template-rows:auto minmax(0,1fr) auto;min-height:calc(100vh - 61px)}
.ws-bar{grid-column:1 / 4;display:flex;flex-wrap:wrap;align-items:center;gap:10px;padding:10px 18px;border-bottom:1px solid var(--line);background:var(--panel)}
.ws-outline{grid-row:2 / 4;border-right:1px solid var(--line);background:var(--panel);padding:14px 10px;display:flex;flex-direction:column;gap:10px;overflow:auto}
.ws-canvas{background:#e9e7e0;overflow:auto;padding:22px 22px 26px;min-width:0}
.ws-frames{display:flex;gap:22px;align-items:flex-start;width:max-content}
.ws-frame{display:flex;flex-direction:column;gap:7px;margin:0;flex:none}
.ws-frame figcaption{display:flex;flex-wrap:wrap;justify-content:space-between;gap:0 8px;font-size:12px;color:var(--muted);font-weight:500;min-width:0}
.ws-frame figcaption .data{font-size:10.5px}
.ws-frame .vp{background:#fff;overflow:hidden;border-radius:2px;box-shadow:0 1px 2px rgba(18,18,18,.08),0 10px 24px rgba(18,18,18,.08)}
.ws-frame iframe{border:0;display:block;transform-origin:0 0;background:#fff}
.ws-insp{grid-row:2 / 4;grid-column:3;border-left:1px solid var(--line);background:var(--panel);padding:18px;display:flex;flex-direction:column;gap:18px;overflow:auto}
.ws-tray{grid-column:2;border-top:1px solid var(--line);background:var(--panel);padding:12px 18px;display:flex;flex-direction:column;gap:8px}
.outline-item{all:unset;display:flex;align-items:center;gap:8px;padding:7px 8px;border-radius:2px;font-size:13.5px;cursor:pointer}
.outline-item:hover{background:#f3f2ed}
.outline-item[aria-current="true"]{background:var(--ultra-s);color:var(--ultra-d);font-weight:600}
.outline-item:focus-visible{outline:2px solid var(--ultra)}
.outline-item .ty{font-family:var(--f-data);font-size:11px;color:var(--muted);margin-left:auto}
.diff{font-family:var(--f-data);font-size:12px;line-height:1.7;overflow-x:auto;border:1px solid var(--line);border-radius:var(--r)}
.diff div{white-space:pre;padding:0 10px}
.diff .f{color:var(--muted);background:#fbfaf8;border-bottom:1px solid var(--line)}
.diff .m{background:#fdf0ee;color:#7a1c13}
.diff .p{background:#edf6f0;color:#14532f}

/* new-site steps: words, not numbered circles */
.steps{display:flex;flex-wrap:wrap;gap:0;border:1px solid var(--line);border-radius:var(--r);background:var(--panel);overflow:hidden}
.steps button{all:unset;flex:1 1 140px;padding:12px 16px;border-right:1px solid var(--line);font-size:14px;cursor:pointer;display:flex;flex-direction:column;gap:2px}
.steps button:last-child{border-right:0}
.steps button span{font-size:12px;color:var(--muted)}
.steps button[aria-current="step"]{background:var(--ink);color:#fff}
.steps button[aria-current="step"] span{color:#c9c7c0}
.steps button:focus-visible{outline:2px solid var(--ultra);outline-offset:-2px}
.steps button[disabled]{cursor:not-allowed;color:var(--hint)}
.runlist{display:flex;flex-direction:column}
.runlist li{display:grid;grid-template-columns:18px 1fr auto;gap:12px;padding:11px 0;border-bottom:1px solid #ecebe6;align-items:start}
.runlist svg{width:12px;height:12px;margin-top:5px}

/* site mini preview in lists */
.thumb{width:120px;height:72px;border:1px solid var(--line);border-radius:2px;overflow:hidden;flex:none;position:relative;background:#fff}
.thumb iframe{width:1280px;height:768px;transform:scale(.09375);transform-origin:0 0;border:0;pointer-events:none}

/* compare */
.cmp{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.cmp figure{margin:0;display:flex;flex-direction:column;gap:8px;min-width:0}
.cmp .vp{border:1px solid var(--line);border-radius:2px;overflow:hidden;background:#fff;position:relative}
.cmp iframe{border:0;width:1280px;transform-origin:0 0;display:block}
.swipe{position:relative;border:1px solid var(--line);border-radius:2px;overflow:hidden;background:#fff}
.swipe .layer{position:absolute;inset:0;overflow:hidden}
.swipe iframe{border:0;width:1280px;transform-origin:0 0;display:block}
.swipe .bar{position:absolute;top:0;bottom:0;width:2px;background:var(--ultra);pointer-events:none}

/* report paper */
.paper{background:#fff;border:1px solid var(--line);padding:36px 40px;display:flex;flex-direction:column;gap:22px;border-radius:2px}
.bar-h{height:10px;border-radius:1px}

/* palette, toasts, drawers */
.scrim{position:fixed;inset:0;background:rgba(18,18,18,.35);z-index:60;display:flex;align-items:flex-start;justify-content:center;padding:max(12vh,calc(env(safe-area-inset-top,0px) + 16px)) 16px 16px}
.palette{width:min(640px,100%);background:var(--panel);border:1px solid var(--ink);border-radius:var(--r);box-shadow:0 18px 48px rgba(18,18,18,.25);display:flex;flex-direction:column;max-height:70vh}
.palette input{border:0;border-bottom:1px solid var(--line);padding:16px 18px;font-size:17px;outline:none;border-radius:var(--r) var(--r) 0 0}
.palette ul{list-style:none;margin:0;padding:6px;overflow:auto}
.palette li button{all:unset;display:flex;align-items:center;gap:12px;width:100%;box-sizing:border-box;padding:10px 12px;border-radius:2px;cursor:pointer;font-size:14px}
.palette li button[aria-selected="true"],.palette li button:hover{background:var(--ultra-s)}
.palette li button span{margin-left:auto;font-size:12px;color:var(--muted)}
.palette .grp{font-size:12px;color:var(--muted);padding:10px 12px 4px}
.toasts{position:fixed;right:max(18px,env(safe-area-inset-right,0px));bottom:calc(18px + env(safe-area-inset-bottom,0px));z-index:70;display:flex;flex-direction:column;gap:8px;align-items:flex-end}
.toast{background:var(--ink);color:#fff;padding:12px 16px;border-radius:var(--r);font-size:14px;max-width:380px;box-shadow:0 8px 24px rgba(18,18,18,.25);display:flex;gap:12px;align-items:center;animation:toast .22s cubic-bezier(.16,1,.3,1)}
.toast a{color:#b9bfff}
@keyframes toast{from{transform:translateY(8px);opacity:0}to{transform:none;opacity:1}}
.notes{position:absolute;right:0;top:46px;width:min(380px,calc(100vw - 32px));background:var(--panel);border:1px solid var(--ink);border-radius:var(--r);box-shadow:0 18px 48px rgba(18,18,18,.18);z-index:40}
.notes .row{grid-template-columns:1fr auto}
.notes .row .s{grid-column:1}

.kv{display:grid;grid-template-columns:minmax(120px,max-content) 1fr;gap:8px 18px;font-size:14px;margin:0}
.kv dt{color:var(--muted)}
.kv dd{margin:0;min-width:0;overflow-wrap:anywhere}
.subnav{display:flex;gap:2px;border-bottom:1px solid var(--line);overflow-x:auto;padding:0 24px;background:var(--paper)}
.subnav a{padding:12px 12px 11px;font-size:14px;font-weight:500;color:var(--muted);text-decoration:none;border-bottom:2px solid transparent;white-space:nowrap}
.subnav a:hover{color:var(--ink)}
.subnav a[aria-current="page"]{color:var(--ink);border-bottom-color:var(--ink)}
.site-title{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.site-title .site-mark{width:18px;height:18px}
.banner{display:flex;flex-wrap:wrap;gap:10px 16px;align-items:center;padding:14px 16px;border:1px solid var(--line);border-radius:var(--r);background:var(--panel)}
.banner.warn{border-color:#e3c48f;background:#fdf8ee}
.banner.info{border-color:#c4c8f7;background:#f6f7fe}
.banner p{flex:1 1 320px;font-size:14px}
.mail{border:1px solid var(--line);border-radius:var(--r);background:var(--panel)}
.mail-head{padding:14px 16px;border-bottom:1px solid var(--line);display:flex;flex-direction:column;gap:2px;font-size:13px;color:var(--muted)}
.mail-head b{color:var(--ink);font-size:15px}
.mail-body{padding:16px;font-size:15px;line-height:1.6;white-space:pre-wrap}
.phone-only{display:none}

/* ---------- phone ---------- */
@media (max-width: 1480px){
  .ws{grid-template-columns:minmax(0,1fr) 340px}
  .ws-bar{grid-column:1 / 3}
  .ws-outline{display:none}
  .ws-insp{grid-column:2}
  .ws-tray{grid-column:1}
}
@media (max-width: 1100px){
  .ws{grid-template-columns:minmax(0,1fr) 320px}
  .ws-bar{grid-column:1 / 3}
  .ws-outline{display:none}
  .ws-insp{grid-column:2}
  .ws-tray{grid-column:1}
}
@media (max-width: 800px){
  .rail{display:none}
  .tabbar{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:30;background:var(--ink);padding:6px max(8px,env(safe-area-inset-right,0px)) calc(6px + env(safe-area-inset-bottom,0px)) max(8px,env(safe-area-inset-left,0px));justify-content:space-around}
  .tabbar a{display:flex;flex-direction:column;align-items:center;gap:2px;min-width:60px;min-height:48px;justify-content:center;color:var(--rail-fg);text-decoration:none;font-size:11.5px;border-radius:var(--r);position:relative}
  .tabbar a[aria-current="page"]{color:#fff;background:#262624}
  .tabbar a .count{position:absolute;top:3px;right:10px;background:var(--ultra);color:#fff;font-size:10px;border-radius:2px;padding:0 4px;font-weight:700}
  .main{padding-bottom:76px}
  .top{padding:8px max(16px,env(safe-area-inset-right,0px)) 8px max(16px,env(safe-area-inset-left,0px))}
  .search-btn{min-width:0;width:38px;padding:0;justify-content:center}
  .search-btn .lbl,.search-btn kbd{display:none}
  .view{padding:20px max(16px,env(safe-area-inset-right,0px)) 40px max(16px,env(safe-area-inset-left,0px));gap:22px}
  h1{font-size:24px}
  .subnav{padding:0 max(16px,env(safe-area-inset-left,0px))}
  .ws{display:flex;flex-direction:column;min-height:0}
  .ws-canvas{max-height:62vh}
  .ws-insp{border-left:0;border-top:1px solid var(--line)}
  .cmp{grid-template-columns:1fr}
  .paper{padding:22px 18px}
  .ver-no{font-size:28px}
  .phone-hide{display:none}
  .phone-only{display:block}
  .row,button.row{grid-template-columns:1fr auto}
  .row .no{grid-column:1}
  .row .t{grid-column:1 / 3}
  .row .s{grid-column:1 / 3}
  .row .end{grid-row:1;grid-column:2;flex-direction:row;align-items:center}
}

/* ---------- Studio additions (not in the prototype's stylesheet) ---------- */
/* [hidden]: the prototype's host page supplied this rule; the notes drawer and the palette
   overlay rely on it. */
[hidden]{display:none!important}
/* .view:focus: the view takes focus after an htmx swap (as the prototype's render did) and
   must not draw a focus ring, since nothing was clicked inside it. */
.view:focus{outline:none}

/* .thumb img: the overview's thumbnails are screenshot files, not iframes; .lg is the desktop
   picture filling its column, .ph the phone at a fixed width. .thumbs lays the two out. */
.thumbs{padding:14px;display:flex;gap:14px;align-items:flex-start;overflow:hidden;flex-wrap:wrap}
.thumb-fig{margin:0;display:flex;flex-direction:column;gap:6px;min-width:0}
.thumb-fig:first-child{flex:1 1 320px}
.thumb img{width:100%;height:100%;object-fit:cover;object-position:top;display:block}
.thumb.lg{width:100%;height:auto;aspect-ratio:1280/800}
.thumb.ph{width:120px;height:auto;aspect-ratio:390/844}
/* .proto-ws: the prototype frames reuse the workspace grid without the outline column and
   the draft tray; the title sits in the bar because the view is edge to edge. */
.proto-ws{grid-template-columns:minmax(0,1fr) 320px;grid-template-rows:auto minmax(0,1fr)}
.proto-ws .ws-bar{grid-column:1 / 3}
.proto-ws .ws-insp{grid-row:2;grid-column:2}
.proto-ws .ws-canvas{grid-row:2;grid-column:1}
.proto-title{font-size:16px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.proto-title .site-mark{width:12px;height:12px}
.proto-title .hint{font-family:var(--f-ui);font-weight:400}
.ws-frame[hidden]{display:none}
.cmp .vp iframe,.swipe .layer iframe{pointer-events:none}
/* .inline-form: a select and a small button on one line inside a facts list (the manual stage). */
.inline-form{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.inline-form .input{width:auto;min-height:32px;padding:4px 8px;font-size:13px}
@media (max-width: 800px){
  .proto-ws{display:flex;flex-direction:column}
  .thumb-fig:first-child{flex:1 1 100%}
}
/* ---------- Phase 2: the verifikation page ---------- */
/* .ver-why: the underlag's own words under the meta strip (the prototype's inline block). */
.ver-why{padding:14px 20px;border-bottom:1px solid var(--line);display:flex;flex-direction:column;gap:4px}
.ver-why p{white-space:pre-wrap;max-width:72ch}
/* .decide: the panel with the actions for the verifikation's state; .btns its row of buttons. */
.decide .btns{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.decide form{margin:0}
.field-error{color:var(--bad);font-size:13px;font-weight:600}
/* .shots: a visual check's three pictures side by side: the last release, this branch, the
   difference. At phone width they swipe (scroll snap), one picture at a time. */
.shots{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.shots figure{margin:0;display:flex;flex-direction:column;gap:6px;min-width:0}
.shots img{width:100%;height:auto;border:1px solid var(--line);border-radius:2px;background:#fff;display:block}
/* .attest-sheet (approved proposal 3): at phone width the verifikation's decision is a fixed
   sheet above the tab bar with "Attest and release Ver. n", "Ask for changes" and the fine print.
   Hidden on the desk, where the decision panel holds the same buttons. */
.attest-sheet{display:none}
@media (max-width: 800px){
  .attest-sheet{display:flex;flex-direction:column;gap:8px;position:fixed;left:0;right:0;bottom:calc(60px + env(safe-area-inset-bottom,0px));z-index:29;background:var(--panel);border-top:1px solid var(--ink);padding:12px max(16px,env(safe-area-inset-right,0px)) 12px max(16px,env(safe-area-inset-left,0px));box-shadow:0 -8px 24px rgba(18,18,18,.08)}
  .attest-sheet .btns{display:flex;gap:8px}
  .attest-sheet .btn{flex:1 1 0;min-width:0;white-space:normal;padding:0 10px}
  .attest-sheet .fine{font-size:12px;color:var(--muted);line-height:1.4}
  .view.with-sheet{padding-bottom:180px}
  /* the rows as stacked cards: the path, then before over after */
  .ver-rows thead{display:none}
  .ver-rows table,.ver-rows tbody{display:block}
  .ver-rows tr{display:flex;flex-direction:column;gap:6px;padding:12px 16px;border-bottom:1px solid #ecebe6}
  .ver-rows tr:last-child{border-bottom:0}
  .ver-rows td{display:block;border:0;padding:8px 10px}
  .ver-rows td.path{width:auto;padding:0 0 2px}
  .ver-rows td.before::before,.ver-rows td.after::before{display:block;font-size:11px;font-weight:600;letter-spacing:.02em;margin-bottom:2px;content:"Before"}
  .ver-rows td.after::before{content:"After"}
  .shots{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:10px;padding-bottom:6px;-webkit-overflow-scrolling:touch}
  .shots figure{flex:0 0 86%;scroll-snap-align:start}
}

/* ---------- Phase 7: reports, quality ---------- */
/* .seg-link: the prototype's .seg with links instead of buttons (the report type, a filter that
   is a URL); aria-current="page" is the pressed state. */
.seg a.seg-link{min-height:32px;padding:0 11px;border-radius:2px;font-size:13px;color:var(--muted);font-weight:500;display:inline-flex;align-items:center;text-decoration:none}
.seg a.seg-link[aria-current="page"]{background:var(--ink);color:#fff}
.seg a.seg-link:hover:not([aria-current="page"]){color:var(--ink);background:#f0efea}
/* .paper-*: the report paper's parts as the prototype laid them out inline: the from line, the
   title, the summary and the footer; .metric is one row of the bars drawn to scale (before in
   grey, after in the site's colour), label, bars, numbers. */
.paper-head{display:flex;flex-direction:column;gap:6px;border-bottom:1px solid var(--line);padding-bottom:16px}
.paper-from{display:flex;align-items:center;gap:8px}
.paper-title{font-size:26px}
.paper-sum{font-size:17px;line-height:1.6;max-width:62ch}
.paper-foot{border-top:1px solid var(--line);padding-top:12px}
.paper-notes{margin:0;padding-left:18px;display:flex;flex-direction:column;gap:4px}
.metrics{display:flex;flex-direction:column;gap:12px}
.metric{display:grid;grid-template-columns:minmax(150px,1.2fr) minmax(0,2fr) 110px;gap:14px;align-items:center}
.metric-l{font-size:14px}
.metric-bars{display:flex;flex-direction:column;gap:4px}
.metric-n{text-align:right;font-size:14px}
.metric-n b{font-size:12px}
.metric-n b.good{color:var(--good)} .metric-n b.bad{color:var(--bad)} .metric-n b.muted{color:var(--muted)}
/* .q-bad: a quality number outside its limit (SEO title 30 to 60, description 70 to 155). */
.q-bad{color:var(--bad);font-weight:600}
/* .rules .check: the rule switches sit in a panel, one under the other. */
.rules .check{align-items:flex-start}
@media (max-width: 800px){
  .metric{grid-template-columns:1fr 90px;grid-template-rows:auto auto}
  .metric-l{grid-column:1 / 3}
  .metric-bars{grid-column:1}
  .metric-n{grid-column:2}
}
/* ---------- Phase 4: Claude inside Studio, requests from Mailhub, Tell the client ---------- */
/* .run-strip (approved proposal 2): the Claude run's meta cells in the ver-meta grid, as its
   own bordered strip: Runs as, May push, Turns n of max, Running for. */
.run-strip{border:1px solid var(--line);border-radius:var(--r);background:var(--panel);overflow:hidden}
.run-strip .ver-meta{border-bottom:0}
/* .meter: a budget as a bar (turns used of the maximum); the span's width is the share used. */
.meter{height:6px;background:var(--line);border-radius:3px;overflow:hidden}
.meter span{display:block;height:100%;background:var(--ink)}
/* .mail-compose: the "Tell the client" and "Reply" composer; .mail-shots the pictures that go
   with the e-mail (after, at Desktop and Phone), shown small beside the text. */
.mail-shots{display:flex;gap:10px;flex-wrap:wrap}
.mail-shots figure{margin:0;flex:1 1 160px;max-width:260px;display:flex;flex-direction:column;gap:4px}
.mail-shots img{width:100%;height:auto;border:1px solid var(--line);border-radius:2px;background:#fff;display:block}
/* .mail-att: a Mailhub attachment listed under an e-mail, as a link through Mailhub. */
.mail-att{display:flex;flex-wrap:wrap;gap:8px 16px;padding:0 16px 14px;font-size:13px}
/* .req-mark: the site's pixel before a request row's title. */
.row .req-mark{width:10px;height:10px;flex:none;margin-right:6px;vertical-align:-1px}
/* ---------- Phase 5: the releases ledger and compare ---------- */
/* .cmp .vp img, .swipe.pic img: release screenshots are picture files, not iframes; the first
   layer of .swipe.pic sets the height, the second lies over it clipped at the handle. */
.cmp .vp img{width:100%;height:auto;display:block}
.swipe.pic .layer:first-child{position:relative}
.swipe.pic img{width:100%;height:auto;display:block}
/* .notcap: a page with no picture in that release: a dashed frame that says so. */
.notcap{border:1px dashed var(--line-2);border-radius:2px;background:#fbfaf8;display:flex;align-items:center;justify-content:center;color:var(--hint);font-size:13px;min-height:120px}
/* .ledger .seg: the A and B pickers in the releases table. */
.ledger .seg button{min-height:28px;padding:0 9px}
/* ---------- Phase 6: the New client site form ---------- */
/* .grid-fields: the form steps lay their fields out in columns that wrap (the prototype inline grid). */
.grid-fields{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px}
/* .cmp-pick: the A and B selects hold long release ids; they take the row and never widen the page. */
.cmp-pick{flex:1 1 260px;min-width:0}
.cmp-pick select{max-width:100%}
/* .ledger th: the screen-reader-only heading of the actions column stays inside the table's
   scroll box instead of widening the page at phone width. */
.ledger th{position:relative}
/* ---------- workspace inspector (Phase 3) ----------
   .ws-lang: one language's inputs for the selected field, side by side per language.
   .ws-list / .ws-item: a list field's rows with Up, Down, Remove and Add.
   .ws-sub: a link or image inside a list item. .ws-val: the current value under a field's name
   in the site details and menus listings. .ws-saved / .ws-error / .ws-missing: the one-line
   outcome of a save, a refused save, and a translation not written yet. .ws-note: the notice
   for a template without field markers. */
.ws-field-head{display:flex;flex-direction:column;gap:6px;min-width:0}
.ws-field-head .data{overflow-wrap:anywhere}
.ws-lang{border:1px solid var(--line);border-radius:var(--r);padding:12px;margin:0;display:flex;flex-direction:column;gap:10px;min-width:0}
.ws-lang legend{font-size:12.5px;font-weight:600;color:var(--muted);padding:0 4px}
.ws-lang legend .data{font-size:10.5px}
.ws-list{display:flex;flex-direction:column;gap:8px}
.ws-item{border:1px solid var(--line);border-radius:var(--r);padding:10px;display:flex;flex-direction:column;gap:8px;background:#fbfaf8}
.ws-item-bar{display:flex;gap:4px;align-items:center;justify-content:flex-end}
.ws-item-bar .n{margin-right:auto;font-family:var(--f-data);font-size:11px;color:var(--muted)}
.ws-sub{border:1px dashed var(--line);border-radius:var(--r);padding:8px 10px;margin:0;display:flex;flex-direction:column;gap:8px}
.ws-sub legend{font-size:12px;font-weight:600;padding:0 4px}
.ws-val{display:block;color:var(--muted);font-size:12px;font-weight:400;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}
.ws-saved{font-size:13px;color:var(--good);font-weight:600}
.ws-error{font-size:13px;color:var(--bad);font-weight:600}
.ws-missing{font-size:12.5px;color:var(--warn)}
.ws-note{max-width:70ch}
.ws-insp .input{font-size:14px}

/* The sign-in page in session mode: the bone page, the logo in ink and one panel, centred.
   Also the one-step "Opening GitHub" page that posts the App manifest. */
.login{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:32px 16px;--logo-ink:var(--ink)}
.login-box{width:100%;max-width:420px;display:flex;flex-direction:column;gap:20px}
.login-box .logo-svg{height:32px;width:auto;display:block}
.login-box .panel{display:flex;flex-direction:column;gap:16px}
.login-box .panel p{color:var(--muted)}
.login-box form{display:flex;flex-direction:column;gap:12px}
.login-box .btn{width:100%}
.login-or{display:flex;align-items:center;gap:12px;color:var(--hint);font-size:13px}
.login-or::before,.login-or::after{content:"";flex:1;border-top:1px solid var(--line)}
.login-msg{border-left:3px solid var(--bad);background:var(--bad-s);color:var(--ink);padding:10px 12px;font-size:14px}

/* Connections: the action cell of a service row (buttons and the small forms that set a key),
   and a read-only field that holds a URL to copy. */
.conn-acts{display:flex;flex-direction:column;align-items:flex-start;gap:8px}
.conn-acts form{display:flex;flex-wrap:wrap;gap:8px;align-items:flex-end;margin:0}
.conn-acts .field{min-width:200px}
.copy-field{display:flex;gap:8px;align-items:center;max-width:100%}
.copy-field .input{font-family:var(--f-data);font-size:12px;min-width:0}
/* Connections on the phone: each service's row stacks its cells instead of scrolling sideways. */
@media (max-width: 800px){
  .conn-tbl thead{display:none}
  .conn-tbl tr{display:block;border-bottom:1px solid var(--line)}
  .conn-tbl tr:last-child{border-bottom:0}
  .conn-tbl td{display:block;border-bottom:0;padding:6px 16px}
  .conn-tbl td:first-child{padding-top:16px}
  .conn-tbl td:last-child{padding-bottom:16px}
  .conn-acts .field{min-width:0;flex:1 1 100%}
}
/* Sign out at the foot of the rail (session mode): a quiet text button on the ink. */
.rail-out{margin-left:auto}
.rail-out button{all:unset;cursor:pointer;white-space:nowrap;font-size:12px;color:var(--rail-mute);padding:6px 4px;border-radius:2px}
.rail-out button:hover{color:#fff}
.rail-out button:focus-visible{outline:2px solid var(--ultra);outline-offset:2px}