/* DESKY demo — styl převzatý z desky-server/frontend/style.css, na konci doplňky pro demo. */
:root{
  --bg:#ffffff; --panel:#f7f7f7; --panel2:#efefef; --border:#d4d4d4; --text:#171717; --muted:#6b6b6b;
  --good:#15803d; --bad:#b91c1c; --warn:#b45309; --grid:#ececec; --hl:#1d6fd8;
  --mono:"JetBrains Mono","SF Mono","Cascadia Code",ui-monospace,Menlo,Consolas,monospace;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#0a0a0a; --panel:#141414; --panel2:#1c1c1c; --border:#2e2e2e; --text:#e8e8e8; --muted:#888;
    --good:#4ade80; --bad:#f87171; --warn:#fbbf24; --grid:#161616; --hl:#5aa9ff; color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --bg:#0a0a0a; --panel:#141414; --panel2:#1c1c1c; --border:#2e2e2e; --text:#e8e8e8; --muted:#888;
  --good:#4ade80; --bad:#f87171; --warn:#fbbf24; --grid:#161616; --hl:#5aa9ff; color-scheme:dark;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{margin:0;min-height:100%}
body{background:var(--bg);color:var(--text);font:13px/1.5 var(--mono);font-variant-numeric:tabular-nums}
button,input,select,textarea{font:inherit;color:inherit}
a{color:inherit}
:focus-visible{outline:2px solid var(--text);outline-offset:2px}

header.top{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 18px;border-bottom:1px solid var(--border);position:sticky;top:0;background:var(--bg);z-index:10;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.brand b{font-size:14px;letter-spacing:.02em}
nav.main{display:flex;gap:4px}
.row{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.spread{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.hint{color:var(--muted);font-size:11px}
.small{font-size:11px}
.tag{display:inline-block;border:1px solid var(--border);border-radius:3px;padding:1px 6px;font-size:10px;color:var(--muted);white-space:nowrap}
.tag.strong{border:1.5px solid var(--text);background:var(--text);color:var(--bg);font-weight:700}
.tag.good{border-color:var(--good);color:var(--good)}
.tag.bad{border-color:var(--bad);color:var(--bad)}
.tag.warn{border-color:var(--warn);color:var(--warn)}
.hint.warn{color:var(--warn)}
.btn{border:1px solid var(--border);background:transparent;color:var(--text);border-radius:4px;padding:5px 10px;font-size:10px;font-weight:700;cursor:pointer;letter-spacing:.03em;text-decoration:none;display:inline-block;white-space:nowrap}
.btn:hover{border-color:var(--text)}
.btn.on{background:var(--text);color:var(--bg);border-color:var(--text)}
.btn.primary{background:var(--text);color:var(--bg);border-color:var(--text);padding:9px 14px;font-size:11px}
.btn.block{width:100%;padding:11px 16px;font-size:12px;text-align:center}
.btn.danger{border-color:var(--bad);color:var(--bad)}
.btn:disabled{opacity:.4;cursor:not-allowed}
.seg{display:flex;gap:4px;flex-wrap:wrap}
h1{font-size:20px;margin:0}
h2{font-size:16px;font-weight:700;margin:0 0 4px}
.sub{color:var(--muted);font-size:11px;margin:0 0 12px}
.lbl{display:block;font-size:10px;font-weight:700;color:var(--muted);margin:10px 0 4px;letter-spacing:.03em}
input[type=number],input[type=text],input[type=email],input[type=password],input[type=search],select,textarea{width:100%;padding:8px 10px;border:1px solid var(--border);border-radius:5px;background:var(--panel);color:var(--text)}
input:focus,select:focus,textarea:focus{border-color:var(--text);outline:none}
textarea{resize:vertical;min-height:90px;line-height:1.5}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.grid3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px}
.unit{position:relative}
.unit input{padding-right:34px;-moz-appearance:textfield;appearance:textfield}
.unit input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.unit::after{content:attr(data-u);position:absolute;right:10px;top:50%;transform:translateY(-50%);font-size:10px;color:var(--muted);pointer-events:none}
.chk{display:flex;align-items:center;gap:8px;margin:5px 0;cursor:pointer;font-size:12px}
.chk input{accent-color:var(--text);width:14px;height:14px}
.msg{font-size:11px;margin-top:8px;min-height:1em}
.msg.good{color:var(--good)} .msg.bad{color:var(--bad)}
.panel{border:1px solid var(--border);border-radius:6px;background:var(--panel);padding:14px}
.formula{border:1px dashed var(--border);border-radius:5px;padding:8px 10px;font-size:11px;color:var(--muted);margin-top:10px}
.formula b{color:var(--text)}
.page{padding:20px 18px;max-width:1200px;margin:0 auto}
.mt{margin-top:14px}
.mb{margin-bottom:14px}

/* přihlášení */
.login{min-height:100vh;display:grid;place-items:center;padding:20px}
.login .panel{width:100%;max-width:380px;padding:24px}
.login h1{margin-bottom:2px}

/* seznam zakázek */
.tickets{display:flex;flex-direction:column;gap:8px}
.ticket-row{display:grid;grid-template-columns:130px 1fr auto;gap:12px;align-items:center;border:1px solid var(--border);border-radius:6px;background:var(--panel);padding:12px 14px;text-decoration:none}
.ticket-row:hover{border-color:var(--text)}
.ticket-row .code{font-weight:700;font-size:11px;color:var(--muted)}
.ticket-row .nm{font-weight:700;font-size:14px}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.stat{border:1px solid var(--border);border-radius:5px;padding:8px;background:var(--panel)}
.stat b{display:block;font-size:18px}
.stat span{font-size:9px;color:var(--muted);font-weight:700}
.stat .g{color:var(--good)} .stat .r{color:var(--bad)} .stat .w{color:var(--warn)}

/* detail zakázky */
.phead{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 18px;border-bottom:1px solid var(--border);flex-wrap:wrap}
.phead .id{font-size:18px;font-weight:700}
.tabs{display:flex;gap:0;border-bottom:1px solid var(--border);padding:0 18px;overflow-x:auto}
.tabs button{background:none;border:0;border-bottom:2px solid transparent;padding:10px 12px;font-size:10px;font-weight:700;color:var(--muted);cursor:pointer;letter-spacing:.03em;white-space:nowrap}
.tabs button.on{color:var(--text);border-bottom-color:var(--text)}
.dirty{color:var(--warn);font-size:10px;font-weight:700}

/* Šířky panelů si konstruktér táhne sám a pamatují se; na notebooku je výkres malý
   a každý ušetřený pixel je vidět. Prostřední sloupec si bere, co zbyde. */
.editor{display:grid;grid-template-columns:var(--ed-l,320px) 5px minmax(0,1fr) 5px var(--ed-r,280px);
  height:calc(100vh - 150px);min-height:560px}
.split{background:var(--border);cursor:col-resize;position:relative;touch-action:none}
.split::after{content:"";position:absolute;inset:0 -4px}      /* snazší trefa myší */
.split:hover,.split.drag{background:var(--hl)}
.split[data-s]:focus-visible{outline:2px solid var(--text);outline-offset:-2px}
.editor.l0{--ed-l:0px} .editor.r0{--ed-r:0px}
.editor.l0 .ed-left,.editor.r0 .ed-right{display:none}
/* Pevné sloupce: schovaný panel nesmí posunout ostatní. Bez tohohle by po skrytí levého
   panelu výkres spadl do pětipixelového sloupce hranice. */
.editor>.ed-left{grid-column:1;grid-row:1} .editor>.split[data-s="l"]{grid-column:2;grid-row:1}
.editor>.ed-mid{grid-column:3;grid-row:1} .editor>.split[data-s="r"]{grid-column:4;grid-row:1}
.editor>.ed-right{grid-column:5;grid-row:1}
/* vodorovná hranice nad panelem s výpočty */
.split.h{height:5px;flex:none;cursor:row-resize}
.split.h::after{inset:-4px 0}
.ed-mid{min-height:0}
.ed-mid .detail{flex:none}
.ed-mid[style*="--ed-d"] .detail{height:var(--ed-d);max-height:none}
.ed-mid.d0 .detail{display:none}
.col{overflow:auto;min-height:0}
.ed-left{border-right:1px solid var(--border)}
.ed-right{border-left:1px solid var(--border);display:flex;flex-direction:column}
.ed-mid{display:flex;flex-direction:column}
.sec{padding:14px 16px;border-bottom:1px solid var(--border)}
.drop{display:block;border:1px dashed var(--border);border-radius:6px;padding:18px 12px;text-align:center;cursor:pointer;background:var(--panel);position:relative}
.drop:hover,.drop.over{border-color:var(--text)}
.drop b{display:block;font-size:12px;margin-bottom:3px}
.drop input{position:absolute;opacity:0;width:1px;height:1px}
.layers{max-height:140px;overflow:auto;margin-top:6px}

.pbar{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 16px;border-bottom:1px solid var(--border);flex-wrap:wrap}
.pbar .id{font-size:16px;font-weight:700}
.stage{flex:1;min-height:320px;position:relative;background-color:var(--bg);
  background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px);background-size:24px 24px}
.stage svg{position:absolute;inset:0;width:100%;height:100%}
.legend{position:absolute;left:12px;bottom:10px;display:flex;gap:14px;font-size:10px;color:var(--muted);background:var(--bg);padding:4px 8px;border:1px solid var(--border);border-radius:4px;flex-wrap:wrap;pointer-events:none}
.stage-hint{position:absolute;right:12px;top:8px;font-size:9px;color:var(--muted);letter-spacing:.03em;pointer-events:none;background:var(--bg);padding:2px 6px;border-radius:3px;opacity:.9;max-width:70%;text-align:right}
.legend i{display:inline-block;width:18px;height:0;border-top:2px solid var(--text);vertical-align:middle;margin-right:5px}
.legend i.cut{border-top:1px solid var(--muted)}
.legend i.con{border-top:1px dashed var(--muted)}
/* 3D náhled */
.stage canvas{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:none;cursor:grab}
.stage canvas:active{cursor:grabbing}
.v3d-labels{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.v3d-lbl{position:absolute;left:0;top:0;font-size:10px;font-weight:700;color:var(--muted);background:var(--bg);
  border:1px solid var(--border);border-radius:3px;padding:0 4px;white-space:nowrap}
.v3d-lbl.on{color:var(--bg);background:var(--text);border-color:var(--text)}
/* popisek díry ve 3D – stejný štítek jako u dílu, jen menší (na světlé desce musí být čitelný) */
.v3d-lbl.v3d-mark{font-size:9px;font-weight:400;padding:0 3px;color:var(--text);opacity:.9}
.v3d-bar{position:absolute;left:10px;bottom:10px;max-width:calc(100% - 20px);display:flex;flex-direction:column;
  gap:6px;background:var(--bg);border:1px solid var(--border);border-radius:5px;padding:7px 9px;max-height:45%;overflow:auto}
.v3d-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.v3d-fold{padding:2px 7px;font-size:11px;line-height:1}
.v3d-bar.folded .v3d-row:not(:first-child),.v3d-bar.folded .v3d-row:first-child > :not(#v3fold):not(#v3info){display:none}
.v3d-exp{display:flex;align-items:center;gap:6px;font-size:10px;font-weight:700;color:var(--muted);white-space:nowrap}
.v3d-exp input[type=range]{width:110px;padding:0;accent-color:var(--text)}
.v3d-note{position:absolute;left:10px;right:10px;top:10px;background:var(--bg);border:1px solid var(--warn);
  color:var(--warn);border-radius:5px;padding:6px 9px;font-size:11px}
.empty{position:absolute;inset:0;display:grid;place-items:center;text-align:center;padding:24px}
.empty .big{font-size:28px;margin-bottom:6px}
.detail{border-top:1px solid var(--border);padding:12px 16px;display:grid;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));gap:14px;max-height:44vh;overflow:auto}
.detail tr.geo{cursor:pointer} .detail tr.geo:hover td{background:var(--panel2)}
/* kontrola s vysvětlením */
ul.checks li.rule{padding:6px 8px;margin:0 0 4px;border:1px solid var(--border);border-radius:5px;cursor:pointer;background:var(--panel)}
ul.checks li.rule::before{display:none}
ul.checks li.rule:hover,ul.checks li.rule.on,ol.steps li:hover,ol.steps li.on{border-color:var(--hl);box-shadow:inset 3px 0 0 var(--hl)}
ul.checks li.rule{color:var(--text)}
.chk-h{display:flex;gap:8px;align-items:flex-start;font-size:11px;line-height:1.4}
.chk-h .tag{flex:none;margin-top:1px}
.detail code,ol.steps code{display:block;font-size:10.5px;color:var(--muted);margin-top:3px;white-space:pre-wrap}
.detail .why{margin:4px 0 0;font-size:10.5px;color:var(--muted);line-height:1.45}
.detail .fix{margin:3px 0 0;font-size:10.5px;color:var(--text);line-height:1.45}
details.more{margin-top:6px} details.more summary{font-size:10px;font-weight:700;color:var(--muted);cursor:pointer;letter-spacing:.03em;padding:4px 0}
details.more ul.checks li.rule{padding:4px 8px;background:transparent}
ol.steps{margin:0;padding:0 0 0 18px;font-size:11px}
ol.steps li{padding:4px 6px;margin:0 0 3px;border:1px solid transparent;border-radius:5px;line-height:1.4;cursor:pointer}
ol.steps li::marker{color:var(--muted);font-weight:700}
/* interaktivní výkres */
.stage svg .vtx{cursor:move} .stage svg .vtx.ro{cursor:default}
.stage svg .vtx:hover{stroke-width:3;stroke:var(--hl)}
.stage svg .dim,.stage svg .ang{cursor:text} .stage svg .dim:hover,.stage svg .ang:hover{fill:var(--hl)}
.stage svg .hole{cursor:pointer} .stage svg .hole:hover circle{stroke:var(--hl)}
.stage svg .cline{cursor:ns-resize}
.inline-edit{position:absolute;z-index:6;display:flex;align-items:center;gap:4px;background:var(--bg);border:1px solid var(--hl);border-radius:5px;padding:3px 6px;box-shadow:0 4px 14px rgba(0,0,0,.25)}
.inline-edit input{width:90px;padding:4px 6px;border:0;background:transparent;font-weight:700}
.inline-edit input:focus{outline:none}
.inline-edit span{font-size:10px;color:var(--muted)}
.popover{position:absolute;z-index:7;width:290px;background:var(--bg);border:1px solid var(--border);border-radius:7px;padding:10px 12px;box-shadow:0 8px 24px rgba(0,0,0,.3)}
.popover .lbl{margin-top:0}
.popover .btn.block{margin:6px 0 4px}

table{border-collapse:collapse;width:100%;font-size:11px}
th{font-size:10px;color:var(--muted);text-align:right;font-weight:700;padding:4px 6px;border-bottom:1px solid var(--border);white-space:nowrap}
td{text-align:right;padding:4px 6px;border-bottom:1px solid var(--border);vertical-align:top}
th.l,td.l,th:first-child,td:first-child{text-align:left}
ul.notes{list-style:none;margin:0;padding:0;font-size:11px}
ul.notes li{padding:3px 0 3px 12px;position:relative}
ul.notes li::before{content:"";position:absolute;left:0;top:9px;width:6px;height:6px;border-radius:1px;background:currentColor}
ul.notes .e{color:var(--bad)} ul.notes .w{color:var(--warn)} ul.notes .ok{color:var(--good)}

.filters{padding:10px 12px 8px;display:flex;flex-direction:column;gap:8px}
ul.list{list-style:none;margin:0;padding:0;overflow:auto;flex:1;border-top:1px solid var(--border)}
ul.list li{display:flex;align-items:center;gap:10px;padding:7px 12px;border-bottom:1px solid var(--border);cursor:pointer}
ul.list li:hover{background:var(--panel)}
ul.list li[aria-selected=true]{background:var(--panel2);box-shadow:inset 2px 0 0 var(--text)}
ul.list svg{width:34px;height:26px;flex:none}
ul.list .nm{font-weight:700;font-size:12px}
ul.list .meta{display:block;font-size:10px;color:var(--muted)}
ul.list .st{margin-left:auto}
.x{border:0;background:none;color:var(--muted);cursor:pointer;font-size:14px;padding:0 2px}
.x:hover{color:var(--bad)}

.progress{height:4px;background:var(--panel2);border-radius:2px;overflow:hidden;margin-top:6px;min-width:120px}
.progress i{display:block;height:100%;width:0;background:var(--text);transition:width .2s}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:12px}

.toast{position:fixed;right:16px;bottom:16px;z-index:50;display:flex;flex-direction:column;gap:6px}
.toast div{background:var(--text);color:var(--bg);padding:9px 12px;border-radius:5px;font-size:11px;font-weight:700;max-width:360px}
.toast div.bad{background:var(--bad);color:#fff}

dialog{border:1px solid var(--border);border-radius:8px;background:var(--bg);color:var(--text);padding:20px;max-width:440px;width:calc(100% - 32px)}
dialog::backdrop{background:rgba(0,0,0,.45)}

@media (max-width:820px){
  .v3d-bar{gap:4px;padding:5px 7px;left:6px;bottom:6px;max-width:calc(100% - 12px);max-height:42%}
  .v3d-row{gap:6px}
  #v3help{display:none}
}
@media (max-width:1000px){
  .editor{grid-template-columns:1fr;height:auto}
  .split{display:none}                                        /* na mobilu jsou panely pod sebou */
  .editor>.ed-left,.editor>.ed-mid,.editor>.ed-right{grid-column:auto;grid-row:auto}
  .ed-mid.d0 .detail{display:grid}
  .editor.l0 .ed-left,.editor.r0 .ed-right{display:block}
  .ed-left,.ed-right{border:0;border-bottom:1px solid var(--border)}
  .ed-right{max-height:60vh}
  .stage{min-height:55vh}
  .ticket-row{grid-template-columns:1fr}
  .stats{grid-template-columns:repeat(2,1fr)}
}
/* ------------------------------------------------- dvoufázové přihlášení */
.split2fa{display:grid;grid-template-columns:1fr 1fr;gap:24px}
@media (max-width:760px){.split2fa{grid-template-columns:1fr}}
.qr{background:#fff;padding:10px;border:1px solid var(--border);border-radius:6px;width:max-content}
.qr svg{display:block}
.secret{display:inline-block;margin-top:4px;padding:6px 10px;background:var(--panel2);
  border-radius:4px;letter-spacing:.12em;font-size:13px;user-select:all}
.codes{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px;margin:12px 0}
.codes code{padding:8px 10px;background:var(--panel2);border:1px solid var(--border);border-radius:4px;
  text-align:center;letter-spacing:.08em;user-select:all}

/* ------------------------------------------------- schválené odchylky (čtvrtý stav) */
.tag.ok-appr{color:var(--hl);border-color:var(--hl)}
.stat b.a{color:var(--hl)}
ul.checks li.rule.a{opacity:.75}
ul.checks li.rule.a:hover{opacity:1}
.btn.tiny{margin-left:auto;padding:1px 6px;font-size:10px;line-height:1.5}

/* upozornění seskupená podle pravidla – hromadné rozhodnutí místo dvaceti kliknutí */
.rules{border:1px solid var(--border);border-radius:6px;margin:0 0 8px;overflow:hidden}
.rule-row{display:flex;align-items:center;justify-content:space-between;gap:8px;
  padding:7px 9px;border-bottom:1px solid var(--border);flex-wrap:wrap}
.rule-row:last-child{border-bottom:none}
.rule-row.hd{background:var(--panel2);font-size:10px;letter-spacing:.03em;color:var(--muted)}
.rule-t{display:flex;align-items:center;gap:6px;flex-wrap:wrap;font-size:11px}
.rule-t b{font-weight:600}

/* hodnota, která se nezadává (počítá se z jiného pole) – stojí v mřížce místo vstupu */
.hint.fixed{margin-top:6px}

/* ---------------------------------------------------------------- nápověda */
/* „?“ u popisku parametru nebo u chybové hlášky – nesmí přetahovat pozornost,
   ale musí se dát trefit prstem, proto 16 px a odstup. */
.hq{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;margin-left:6px;
  padding:0;border:1px solid var(--border);border-radius:50%;background:transparent;color:var(--muted);
  font-size:10px;font-weight:700;line-height:1;cursor:pointer;vertical-align:middle;flex:none}
.hq:hover{border-color:var(--hl);color:var(--hl)}
.chk-h .hq{margin-left:auto}

dialog.helpbox{max-width:620px;padding:16px 18px}
dialog.helpbox h2{margin:8px 0 10px;font-size:14px}
dialog.helpbox .spacer{flex:1}

.helptext{font-size:12px;line-height:1.65;color:var(--text)}
.helptext p{margin:0 0 8px}
.helptext ul,.helptext ol{margin:0 0 8px;padding-left:18px}
.helptext li{margin:0 0 4px}
.helptext code{background:var(--panel2);padding:1px 4px;border-radius:3px;font-size:11px}
.helptext table{width:100%;border-collapse:collapse;margin:0 0 8px;font-size:11px}
.helptext th,.helptext td{text-align:left;vertical-align:top;padding:5px 8px;border:1px solid var(--border)}
.helptext th{background:var(--panel2);font-size:10px;letter-spacing:.03em}
.helptext .warn{color:var(--warn)}
.helptext a{color:var(--hl);cursor:pointer}
.helptext a[data-help]{text-decoration:underline dotted}

.page.help{max-width:1100px}
.helpwrap{display:grid;grid-template-columns:200px 1fr;gap:20px;align-items:start}
.helpnav{position:sticky;top:60px;display:flex;flex-direction:column;gap:2px;
  border:1px solid var(--border);border-radius:6px;padding:8px;background:var(--panel)}
.helpnav a{padding:5px 8px;border-radius:4px;font-size:10px;font-weight:700;letter-spacing:.03em;
  color:var(--muted);text-decoration:none}
.helpnav a:hover{background:var(--panel2);color:var(--text)}
.helpbody section{margin:0 0 24px}
.helpbody h2{font-size:13px;margin:0 0 10px;padding-bottom:6px;border-bottom:1px solid var(--border)}
.helpbody article{margin:0 0 16px;padding:10px 12px;border:1px solid var(--border);border-radius:6px;background:var(--panel)}
.helpbody article.on{border-color:var(--hl);box-shadow:inset 3px 0 0 var(--hl)}
.helpbody h3{font-size:12px;margin:0 0 8px}
@media (max-width:820px){
  .helpwrap{grid-template-columns:1fr}
  .helpnav{position:static;flex-direction:row;flex-wrap:wrap}
}

@media (prefers-reduced-motion:reduce){*{transition:none!important}}

/* ================================================================ demo doplňky */
:root{--demo-h:32px}
body{padding-top:var(--demo-h)}
.demobar{position:fixed;top:0;left:0;right:0;height:var(--demo-h);z-index:100;display:flex;align-items:center;gap:12px;
  padding:0 14px;background:#1b1d22;color:#d6d9df;border-bottom:1px solid #2c3038;font:11px/1 var(--mono);white-space:nowrap;overflow:hidden}
.demobar a{color:#d6d9df;text-decoration:none;font-weight:700}
.demobar a:hover{text-decoration:underline}
.demobar .t{font-weight:700;overflow:hidden;text-overflow:ellipsis}
.demobar .m{color:#8a909c}
.demobar .sp{flex:1}
.demobar button{background:transparent;border:1px solid #3a3f49;color:#d6d9df;border-radius:4px;padding:4px 9px;font:inherit;font-weight:700;cursor:pointer}
.demobar button:hover{border-color:#d6d9df}
header.top{top:var(--demo-h)}
@media (min-width:1001px){
  .editor{height:calc(100vh - 150px - var(--demo-h))}
  .demo-ed .stage{flex:none;height:max(380px,calc(100vh - 430px))}
  .demo-ed .detail{max-height:none;overflow:visible}
}
.phead .id{font-size:18px}
.stage .stage-hint{z-index:2}
.stage canvas{z-index:1}
.v3d-bar,.v3d-note{z-index:3}
.v3d-labels{z-index:2}
.v3d-lbl{transform-origin:0 0}
.legend{z-index:2}
.ticket-row{color:inherit;cursor:pointer;text-align:left;width:100%;font:inherit}
.ticket-row .nm{color:var(--text)}
.stat b.a{color:var(--hl)}
.stats.five{grid-template-columns:repeat(5,1fr)}
.stats.five .stat{padding:7px 6px}
.stats.five .stat b{font-size:17px}
.stats.five .stat span{font-size:8px}
.stage svg .hole.skipped{cursor:pointer}
.stage svg .vtx{cursor:default}
.pill{display:inline-block;font-size:10px;padding:1px 6px;border-radius:3px;background:var(--panel2);color:var(--muted)}
.tour{position:fixed;z-index:120;right:16px;top:calc(var(--demo-h) + 10px);width:330px;max-width:calc(100vw - 32px);background:var(--bg);
  border:1px solid var(--hl);border-radius:7px;padding:12px 14px;box-shadow:0 10px 30px rgba(0,0,0,.4);font-size:12px}
.tour h3{margin:0 0 6px;font-size:12px;letter-spacing:.03em}
.tour p{margin:0 0 10px;line-height:1.55;color:var(--text)}
.tour .row{justify-content:space-between}
.solver .grid3 input{text-align:right}
.jobmsg{font-size:10px;color:var(--muted)}
.diffrow b{font-weight:700}
.empty3d{position:absolute;inset:0;display:grid;place-items:center;color:var(--muted);font-size:11px;text-align:center;padding:20px}
@media (max-width:1000px){
  .stats.five{grid-template-columns:repeat(5,1fr)}
  .detail{max-height:none}
}
@media (max-width:640px){
  .demobar .m{display:none}
  .demobar{gap:8px;padding:0 8px}
  header.top{padding:8px 10px}
  header.top .who{display:none}
  .phead{padding:10px}
  .pbar{padding:8px 10px}
  .pbar .row{gap:4px}
  .stage{min-height:46vh}
  .page{padding:14px 10px}
  .cards{grid-template-columns:1fr}
  .detail{grid-template-columns:minmax(0,1fr);padding:10px}
  .stage-hint{display:none}
  .v3d-bar .hint#v3help{display:none}
}
.editor.demo-ed{grid-template-columns:320px minmax(0,1fr) 300px}
.editor.demo-ed>.ed-mid{grid-column:2} .editor.demo-ed>.ed-right{grid-column:3}
@media (max-width:1280px){.editor.demo-ed{grid-template-columns:280px minmax(0,1fr) 260px}}
@media (max-width:1000px){
  .editor.demo-ed{grid-template-columns:minmax(0,1fr)}
  .editor.demo-ed>.ed-left,.editor.demo-ed>.ed-mid,.editor.demo-ed>.ed-right{grid-column:auto}
}
@media (max-width:1000px){ .editor.demo-ed>.ed-mid{order:1} .editor.demo-ed>.ed-left{order:2} .editor.demo-ed>.ed-right{order:3} }