/* tools/check-panel/check-panel.css — o painel CHECK (v677; esboco "painel Check" C1–C9). O index.js liga, o ui.js desenha, este arquivo veste.
   --ck-pw = a largura do painel (440 px no PC e no iPad, 90 % no telefone); --ck-tw = a largura da aba. Camadas 52–56: acima da tela Job (o conteudo dela vai ate 45) e ABAIXO de todo menu e janela (.pop 60, .mdlg 80,
   .jv-modal 120, o visualizador, a Quote, o editor de janela 1900…) — o que abre de dentro do painel (o menu das cores do trim, um dialogo) aparece por cima dele,
   e nenhuma tela cheia fica embaixo da aba. */
:root{--ck-pw:min(440px,90vw);--ck-tw:28px} /* v752 (esboco "Visual da tela Job", V4 a): a aba mais fina (era 32 px) — a tela ganha 4 px */
body[data-ck]{padding-right:var(--ck-tw)} /* D2 a: a tela recua — a aba nunca cobre um botao (o ⧉ e a lixeira da lista, o fim da tabela) */

/* C1 — a aba CHECK, presa na borda direita; com o painel aberto ela vai junto, na borda dele (tocar fecha) */
.ck-tab{position:fixed;z-index:56;right:0;top:56%;width:var(--ck-tw);height:132px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:9px;padding:0;border:0;border-radius:10px 0 0 10px;background:#2f5185;color:#fff;cursor:pointer;box-shadow:-4px 4px 14px rgba(0,0,0,.2);transition:right .2s ease;touch-action:manipulation;-webkit-tap-highlight-color:transparent}
.ck-tab[hidden]{display:none}
body[data-ck-open] .ck-tab{right:var(--ck-pw)}
.ck-tab:focus-visible{outline:3px solid #f0a500;outline-offset:2px}
.ck-tl{writing-mode:vertical-rl;transform:rotate(180deg);font:800 12px/1 Archivo,"Source Sans 3",system-ui,sans-serif;letter-spacing:.16em;text-transform:uppercase}
.ck-bd{min-width:20px;height:20px;padding:0 5px;box-sizing:border-box;border-radius:10px;font:800 12px/20px Archivo,"Source Sans 3",sans-serif;text-align:center;background:#c62828;color:#fff}
.ck-bd.warn{background:#a35a00} .ck-bd.ok{background:#2e7d4f}

/* C2 — o veu (tocar fecha) e C3 — o painel */
.ck-root[hidden]{display:none}
.ck-veil{position:fixed;inset:0;z-index:52;background:rgba(17,24,39,.28)}
.ck-pan{position:fixed;top:0;right:0;bottom:0;z-index:54;width:var(--ck-pw);display:flex;flex-direction:column;background:var(--dlg,var(--panel,#fff));color:var(--ink);box-shadow:-12px 0 30px rgba(0,0,0,.2);animation:ck-in .18s ease-out}
body:is([data-theme="hud"],[data-theme="holo"]) .ck-pan{background:var(--paper)} /* o --panel deles e' translucido */
@keyframes ck-in{from{transform:translateX(24px);opacity:.5}to{transform:none;opacity:1}}
.ck-hd{display:flex;align-items:center;gap:10px;padding:12px 10px 8px 16px}
.ck-tt{flex:1;min-width:0;display:flex;flex-direction:column}
.ck-tt b{font:800 19px/1.2 Archivo,"Source Sans 3",sans-serif}
.ck-job{font:700 11px/1.4 Archivo,"Source Sans 3",sans-serif;letter-spacing:.1em;text-transform:uppercase;color:var(--accent);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ck-x{flex:none;width:44px;height:44px;border-radius:22px;border:1px solid var(--line);background:transparent;color:var(--ink);display:flex;align-items:center;justify-content:center;cursor:pointer;padding:0}
.ck-x svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}

/* C4 — as 4 abas internas com os numeros */
.ck-seg{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-bottom:1px solid var(--line);padding:0 6px}
.ck-sb{min-height:44px;padding:6px 2px;border:0;border-bottom:3px solid transparent;background:none;color:var(--muted);font:600 14px "Source Sans 3",system-ui,sans-serif;display:flex;align-items:center;justify-content:center;gap:4px;cursor:pointer;white-space:nowrap;overflow:hidden}
.ck-sb[aria-selected="true"]{color:var(--accent);border-bottom-color:var(--accent);font-weight:700}
.ck-n{min-width:18px;height:18px;padding:0 5px;box-sizing:border-box;border-radius:9px;font:700 11px/18px "Source Sans 3",sans-serif;text-align:center;color:#fff}
.ck-n.bad{background:#c62828} .ck-n.warn{background:#a35a00} .ck-n[hidden]{display:none}
@media (max-width:480px){ .ck-sb{font-size:13px} .ck-n.bad:not([hidden])+.ck-n.warn{display:none} } /* telefone: so o numero mais urgente */

/* o corpo: so a gaveta da aba de agora */
.ck-body{flex:1;overflow:auto;overscroll-behavior:contain;padding:14px 16px 28px}
.ck-slot[hidden]{display:none}
.ck-h{margin:18px 0 8px;padding-bottom:5px;border-bottom:2px solid var(--accent);font:800 12px/1.3 Archivo,"Source Sans 3",sans-serif;letter-spacing:.12em;text-transform:uppercase;color:var(--accent)}
.ck-h:first-child{margin-top:2px}

/* C5 — a lista de avisos inteira (fora do painel ela tem 168 px de altura fixa) */
.ck-body .wscroll{max-height:none}
.ck-body .wmore{display:none}
.ck-body .wtab col:nth-child(2){width:84px!important} /* a coluna "Job / #linha" (250 px fora do painel, num style do warnings.js) — o texto do aviso fica com o resto */

/* C6 e C8 — os cartoes To check e Types & quantities, sem a moldura (o nome ja esta na aba) */
.ck-body .card.hb{border:0;box-shadow:none;background:transparent;padding:0;width:100%;box-sizing:border-box}
.ck-body .card.hb>.k{display:none}
.ck-body .card.hb table{width:100%}
.ck-body .card.hb td,.ck-body .card.hb th{padding:9px 6px;border-bottom:1px solid var(--line);vertical-align:middle}

/* C7 — Systems: as cores uma embaixo da outra, os sistemas e as cores do trim em 2 colunas (fora do painel elas tem 3, 4 e 6 colunas) */
.ck-body #pickers{grid-template-columns:minmax(0,1fr)!important;margin:0} /* o telefone poe .pick em 2 colunas com !important (shell.css) */
.ck-body #mfrtags{display:flex;flex-wrap:wrap;gap:6px}
.ck-body .pick.sys{grid-template-columns:repeat(2,minmax(0,1fr))!important;margin:0}
.ck-body #trim-colors{grid-template-columns:repeat(2,minmax(0,1fr))!important;margin:0}
.ck-body .ck-un .pick.sys select{border:2px dashed #d97706} /* fora do #trim-sec o .unset dele nao alcanca */
.ck-body #mfrtags>.note{display:none} /* o "Limits & grids:" — o titulo da gaveta ja diz */

/* v752 — a aba CHECK no visual novo da tela Job (V4 a): a mesma aba lateral, mais fina, na tinta do tema (escura no claro, clara no escuro — se destaca da faixa e
   do papel), o icone de lista com ✓ em cima do nome e o numero numa bolinha que sai da borda. Os dois :not(#…) vencem o 'button' generico dos temas escuros */
.ck-tab:not(#sheetload):not(#ck-x){overflow:visible;gap:8px;padding-top:12px;justify-content:flex-start;background:var(--ink);color:var(--paper);border-radius:14px 0 0 14px}
.ck-tab::before{content:"";width:16px;height:16px;flex:none;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.5 6.5H20M10.5 12H20M10.5 17.5H20M3.8 6.6l1.4 1.4 2.6-2.6M3.8 12.1l1.4 1.4 2.6-2.6M4.4 17.5h2.8'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.5 6.5H20M10.5 12H20M10.5 17.5H20M3.8 6.6l1.4 1.4 2.6-2.6M3.8 12.1l1.4 1.4 2.6-2.6M4.4 17.5h2.8'/%3E%3C/svg%3E") center/contain no-repeat}
.ck-tab .ck-tl{font-size:10.5px}
.ck-tab .ck-bd{position:absolute;left:-9px;top:-8px;box-shadow:0 0 0 2px var(--paper)}

/* v774 — a aba To check com campos de verdade (esboco "Check — campos novos" T1–T8). T1: o nome em cima, a resposta embaixo, na largura toda.
   As cores so por variavel do tema (--good / --bad / --warn / --accent), para os temas escuros acompanharem; os :not(#sheetload):not(#ck-x) vencem o 'button'
   generico dos temas escuros (theme.css), como a aba CHECK faz */
.ck-tc{display:flex;flex-direction:column;gap:14px}
.ck-tc .ck-h{margin:6px 0 0}
.ck-tc .ck-h:first-child{margin-top:2px}
.ck-tc [data-ck-tcn],.ck-tc [data-ck-tco]{display:flex;flex-direction:column;gap:14px}
.ckf{display:flex;flex-direction:column;gap:7px;border-radius:12px}
.ckf-l{display:flex;align-items:center;flex-wrap:wrap;gap:4px 8px;font:600 14px/1.3 "Source Sans 3",system-ui,sans-serif;color:var(--ink)}
.ckf-hint{font-weight:400;font-size:12.5px;color:var(--ink2)}
.ckf-req{display:inline-flex;align-items:center;height:22px;padding:0 8px;border-radius:11px;font-size:12px;font-weight:700;color:var(--warn);background:color-mix(in srgb,var(--warn) 16%,transparent)}
.ckf-req[hidden],.ckf-hint[hidden]{display:none}
.ckf-row{display:flex;align-items:center;flex-wrap:wrap;gap:8px 10px}
/* T7 — obrigatorio e vazio: a moldura laranja tracejada (a mesma cor do aviso) */
.ckf.need{border:1.5px dashed var(--warn);background:color-mix(in srgb,var(--warn) 7%,transparent);padding:10px 10px 12px}
/* T2 — a caixa de numero com − e + (47 px por fora = 44 px de toque no − e no + dentro da borda; o input vence a regra de 44 px / padding do telefone, shell.css) */
.ck-num{display:flex;height:47px;border:1.5px solid var(--line);border-radius:10px;overflow:hidden;background:var(--dlg,var(--panel,#fff))}
.ck-num:focus-within{border-color:var(--accent)}
.ck-num .ck-st:not(#sheetload):not(#ck-x){flex:none;width:42px;min-height:0;margin:0;padding:0;border:0;border-radius:0;background:var(--soft);color:var(--accent);display:flex;align-items:center;justify-content:center;cursor:pointer;touch-action:manipulation}
.ck-st svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round}
.ck-tc .ck-num input[data-ck-in][inputmode]{width:64px;min-height:0;margin:0;padding:0;border:0;border-left:1px solid var(--line);border-right:1px solid var(--line);border-radius:0;background:transparent;color:var(--ink);text-align:center;font:700 19px/1 "Source Sans 3",system-ui,sans-serif;font-size:19px!important;outline:none;box-shadow:none}
.ck-tc .ck-num input[data-ck-in][inputmode].bad{color:var(--bad)}
.ck-num:has(input.bad){border-color:var(--bad)}
/* T3 / T4 — o selo: verde bate, vermelho nao bate, cinza so informa */
.ck-chip{display:inline-flex;align-items:center;gap:5px;min-height:30px;padding:0 11px;border-radius:15px;font-size:13px;font-weight:700;line-height:1.2}
.ck-chip[hidden]{display:none}
.ck-chip.ok{color:var(--good);background:color-mix(in srgb,var(--good) 14%,transparent)}
.ck-chip.ok::before{content:"";width:13px;height:13px;flex:none;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 7.5l3 3 6-7'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 7.5l3 3 6-7'/%3E%3C/svg%3E") center/contain no-repeat}
.ck-chip.bad{color:var(--bad);background:color-mix(in srgb,var(--bad) 12%,transparent)}
.ck-chip.mute{color:var(--ink2);font-weight:600;background:var(--soft)}
/* T5 — o "Use N" */
.ck-tc .ck-use:not(#sheetload):not(#ck-x){min-height:44px;padding:0 14px;border-radius:10px;border:1.5px solid var(--accent);background:transparent;color:var(--accent);font:700 14px "Source Sans 3",system-ui,sans-serif;cursor:pointer;touch-action:manipulation}
.ck-use[hidden]{display:none!important}
/* T6 / T7 — as escolhas em botoes (tocar de novo no escolhido limpa) */
.ck-opts{display:flex;flex-wrap:wrap;gap:6px}
:is(.ck-tc,.ck-sy) .ck-opt:not(#sheetload):not(#ck-x){min-height:44px;margin:0;padding:0 14px;border-radius:22px;border:1.5px solid var(--line);background:var(--dlg,var(--panel,#fff));color:var(--ink);font:600 14px "Source Sans 3",system-ui,sans-serif;cursor:pointer;touch-action:manipulation}
:is(.ck-tc,.ck-sy) .ck-opt[aria-pressed="true"]:not(#sheetload):not(#ck-x){border-color:var(--accent);background:var(--accent);color:var(--paper);font-weight:700}
:is(.ck-tc,.ck-sy) .ck-opt[aria-pressed="true"].bad:not(#sheetload):not(#ck-x){border-color:var(--bad);background:var(--bad)}
/* T8 — ISLO | OSLI em duas metades */
.ck-vps{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));border:1.5px solid var(--line);border-radius:12px;overflow:hidden}
.ck-tc .ck-vp:not(#sheetload):not(#ck-x){min-height:52px;margin:0;padding:6px;border:0;border-radius:0;background:var(--dlg,var(--panel,#fff));color:var(--ink);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;cursor:pointer;touch-action:manipulation}
.ck-tc .ck-vp+.ck-vp:not(#sheetload):not(#ck-x){border-left:1px solid var(--line)}
.ck-vp b{font:700 15px "Source Sans 3",system-ui,sans-serif}
.ck-vp span{font-size:12px;color:var(--ink2)}
.ck-tc .ck-vp[aria-pressed="true"]:not(#sheetload):not(#ck-x){background:var(--accent);color:var(--paper)}
.ck-vp[aria-pressed="true"] span{color:inherit;opacity:.9}
/* v775 — o ISLO / OSLI obrigatorio BLOQUEIA (uma linha tem lado): a moldura e o "Required" na cor do bloqueio */
.ckf.need.block{border-color:var(--bad);background:color-mix(in srgb,var(--bad) 6%,transparent)}
.ckf.need.block .ckf-req{color:var(--bad);background:color-mix(in srgb,var(--bad) 14%,transparent)}

/* v776 — a aba Types em cartoes (esboco Y1–Y4). As barras: --w = a parte do tipo no total (ui.js); escuro = com grade, claro = sem grade */
.ck-ty{display:flex;flex-direction:column;gap:12px}
.ck-ty .ck-h{margin:4px 0 0}
.ck-tyh{display:flex;align-items:center;gap:14px;padding:16px;border-radius:14px;background:var(--soft)}
.ck-tyt{display:flex;flex-direction:column}
.ck-tyt b{font:800 44px/1 Archivo,"Source Sans 3",sans-serif;color:var(--ink)}
.ck-tyt span{font-size:14px;font-weight:700;color:var(--ink2)}
.ck-tyc{flex:1;display:flex;flex-direction:column;align-items:flex-end;gap:6px;text-align:right}
.ck-tyl{display:flex;flex-direction:column;gap:8px}
.ck-tyr{display:flex;flex-direction:column;gap:8px;padding:12px;border-radius:12px;border:1.5px solid var(--line)}
.ck-tyr1{display:flex;align-items:center;gap:10px}
.ck-tynm{flex:1;min-width:0;font-size:16px;color:var(--ink)}
.ck-tyu{font:800 22px/1 Archivo,"Source Sans 3",sans-serif;color:var(--ink)}
.ck-tyw{font-size:13px;color:var(--ink2)}
.ck-tybar{height:10px;border-radius:5px;background:var(--soft);overflow:hidden;display:flex}
.ck-tybar span{width:var(--w,0%)}
.ck-tybar .g,.ck-tyk1::before{background:var(--accent)}
.ck-tybar .w,.ck-tyk0::before{background:color-mix(in srgb,var(--accent) 42%,var(--soft))}
.ck-tysub{font-size:13px;color:var(--ink2)}
.ck-tyleg{display:flex;gap:14px;margin:0;padding:0 2px;font-size:12.5px;color:var(--ink2)}
.ck-tyleg span{display:inline-flex;align-items:center;gap:6px}
.ck-tyleg span::before{content:"";width:12px;height:12px;border-radius:3px}
.ck-tye{margin:0;font-size:14px;color:var(--ink2)}
.ck-tye[hidden]{display:none}

/* v777 — a aba Warnings em cartoes (esboco W1–W5). As cores so pelo tema (--bad / --warn / --muted / --accent) */
.ck-wn{display:flex;flex-direction:column;gap:12px}
.ck-wn .ck-h{margin:4px 0 0}
.ck-wn .ck-h[hidden],.ck-wne[hidden],.ck-wl[hidden],.ck-wgo[hidden]{display:none!important}
.ck-wnf{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.ck-wn .ck-wft:not(#sheetload):not(#ck-x){min-height:64px;margin:0;padding:6px;border-radius:12px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;cursor:pointer;touch-action:manipulation;border:1.5px solid var(--line);background:var(--soft);color:var(--ink2)}
.ck-wft b{font:800 22px/1 Archivo,"Source Sans 3",sans-serif}
.ck-wft span{font:700 12.5px "Source Sans 3",system-ui,sans-serif}
.ck-wn .ck-wft.error:not(#sheetload):not(#ck-x){color:var(--bad);border-color:color-mix(in srgb,var(--bad) 35%,transparent);background:color-mix(in srgb,var(--bad) 8%,transparent)}
.ck-wn .ck-wft.warn:not(#sheetload):not(#ck-x){color:var(--warn);border-color:color-mix(in srgb,var(--warn) 35%,transparent);background:color-mix(in srgb,var(--warn) 8%,transparent)}
.ck-wn .ck-wft[aria-pressed="true"]:not(#sheetload):not(#ck-x){border-width:2.5px;border-color:currentColor;box-shadow:0 0 0 2px color-mix(in srgb,currentColor 18%,transparent)}
.ck-wnlim{margin:-2px 0 0;font-size:12.5px;color:var(--ink2)}
.ck-wns{display:flex;flex-direction:column;gap:8px}
.ck-wns:empty{display:none}
/* um aviso: o icone, (o numero da linha), o texto com os botoes de conserto de sempre, o Go › / Fix › / Open › */
.ck-wc{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:12px;border:1.5px solid var(--line);background:var(--dlg,var(--panel,#fff));color:var(--ink)}
.ck-wi{flex:none;width:28px;height:28px;border-radius:14px;display:flex;align-items:center;justify-content:center;font:800 14px/1 Archivo,"Source Sans 3",sans-serif;color:var(--warn);background:color-mix(in srgb,var(--warn) 16%,transparent)}
.ck-wi::before{content:"!"}
.ck-wc.info .ck-wi{color:var(--muted);background:var(--soft)}
.ck-wc.info .ck-wi::before{content:"i"}
.ck-wc.error .ck-wi{color:#fff;background:var(--bad)}
.ck-wl{flex:none;min-width:38px;height:30px;padding:0 6px;box-sizing:border-box;border-radius:8px;background:var(--accent);color:var(--paper);display:flex;align-items:center;justify-content:center;font:800 13px/1 Archivo,"Source Sans 3",sans-serif}
.ck-wm{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px}
.ck-wmsg{font-size:13.5px;line-height:1.35}
.ck-wfx:empty{display:none}
.ck-wfx .fixes{display:flex;flex-wrap:wrap;gap:6px;margin:0}
.ck-wn .ck-wgo:not(#sheetload):not(#ck-x){flex:none;min-height:44px;margin:0;padding:0 12px;border-radius:10px;border:1.5px solid var(--line);background:var(--dlg,var(--panel,#fff));color:var(--accent);font:700 13.5px "Source Sans 3",system-ui,sans-serif;cursor:pointer;touch-action:manipulation}
/* W2 — o que bloqueia: cartao vermelho, icone maior e o Fix › cheio */
.ck-wc.big{padding:12px;border-color:color-mix(in srgb,var(--bad) 30%,transparent);background:color-mix(in srgb,var(--bad) 8%,var(--dlg,var(--panel,#fff)))}
.ck-wc.big .ck-wi{width:34px;height:34px;border-radius:17px;font-size:17px}
.ck-wc.big .ck-wmsg{font-size:14.5px}
.ck-wn .ck-wc.big .ck-wgo:not(#sheetload):not(#ck-x){border-color:var(--bad);background:var(--bad);color:#fff;padding:0 14px}
/* W3 — os "not entered yet" num cartao so: um botao por campo */
.ck-wmiss{flex-direction:column;align-items:stretch;gap:10px;padding:12px;border-color:color-mix(in srgb,var(--warn) 35%,transparent);background:color-mix(in srgb,var(--warn) 7%,var(--dlg,var(--panel,#fff)))}
.ck-wmh{display:flex;align-items:center;gap:10px}
.ck-wmiss .ck-wi{width:34px;height:34px;border-radius:17px;color:#fff;background:var(--warn)}
.ck-wmiss .ck-wi::before{content:"+";font-size:19px}
.ck-wmh .ck-wm b{font-size:14.5px}
.ck-wmh .ck-wm span{font-size:13px;color:var(--ink2)}
.ck-wchips{display:flex;flex-wrap:wrap;gap:6px}
.ck-wn .ck-wchip:not(#sheetload):not(#ck-x){min-height:44px;margin:0;padding:0 12px;border-radius:22px;border:1.5px solid color-mix(in srgb,var(--warn) 55%,transparent);background:var(--dlg,var(--panel,#fff));color:var(--ink);font:600 13.5px "Source Sans 3",system-ui,sans-serif;cursor:pointer;touch-action:manipulation}
.ck-wne{margin:0;padding:14px;border-radius:12px;background:color-mix(in srgb,var(--good) 10%,transparent);color:var(--good);font-weight:700;font-size:14px}

/* v778 — a aba Systems com pecas proprias (esboco S1–S5): as linhas grandes (cor / fabricante / serie / cor do trim) abrem a lista dentro do painel; a bolinha
   da cor so pela variavel --c (ui.js). Os botoes de Exterior / Interior sao os mesmos .ck-opt da To check; o J-channel e o Caulked to em partes (.ck-sgg — o .ck-seg e' a barra das abas) */
.ck-sy{display:flex;flex-direction:column;gap:12px}
.ck-sy .ck-h{margin:4px 0 0}
.ck-sy .ck-h:first-child{margin-top:2px}
.ck-syg{display:flex;flex-direction:column;gap:8px}
.ck-syg.two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:480px){ .ck-syg.two[data-ck-syt]{grid-template-columns:minmax(0,1fr)} } /* S5: 1 coluna no telefone */
.ck-syr{display:flex;flex-direction:column;gap:6px;min-width:0}
.ck-syr:has([aria-expanded="true"]){grid-column:1/-1} /* a lista aberta usa a largura toda */
.ck-sy .ck-syb:not(#sheetload):not(#ck-x){display:flex;align-items:center;gap:12px;width:100%;min-height:58px;margin:0;padding:8px 12px;border-radius:12px;border:1.5px solid var(--line);background:var(--dlg,var(--panel,#fff));color:var(--ink);text-align:left;cursor:pointer;touch-action:manipulation;font:inherit}
.ck-sy .ck-syr.need .ck-syb:not(#sheetload):not(#ck-x){border:1.5px dashed var(--warn);background:color-mix(in srgb,var(--warn) 7%,var(--dlg,var(--panel,#fff)))}
.ck-sy .ck-syb:disabled:not(#sheetload):not(#ck-x){background:var(--soft);cursor:default}
.ck-syr.off .ck-syt b{color:var(--muted);font-size:14px}
.ck-sw{flex:none;width:36px;height:36px;border-radius:18px;border:1.5px solid var(--line);background:var(--c,#fff)}
.ck-sw.none{background:repeating-linear-gradient(45deg,var(--soft) 0 4px,transparent 4px 8px)}
.ck-syg.two .ck-sw{width:24px;height:24px;border-radius:12px}
.ck-syt{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.ck-syl{font-size:12.5px;color:var(--ink2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ck-syt b{font-size:15px;color:var(--ink);overflow:hidden;text-overflow:ellipsis}
.ck-syt small{font-size:11.5px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ck-syt small[hidden]{display:none}
.ck-syx{flex:none;font-size:18px;color:var(--accent);transition:transform .15s}
.ck-syb[aria-expanded="true"] .ck-syx{transform:rotate(90deg)}
.ck-syb:disabled .ck-syx{visibility:hidden}
/* a lista aberta */
.ck-syd{display:flex;flex-direction:column;gap:6px;padding:8px;border-radius:12px;border:1.5px solid var(--line);background:var(--soft)}
.ck-syd[hidden]{display:none}
.ck-sy .ck-syf[data-ck-syf]{width:100%;box-sizing:border-box;min-height:44px;padding:8px 12px;border-radius:10px;border:1.5px solid var(--line);background:var(--dlg,var(--panel,#fff));color:var(--ink);font-size:16px}
.ck-sy .ck-syf[hidden]{display:none}
.ck-syo{display:flex;flex-direction:column;gap:4px;max-height:300px;overflow:auto;overscroll-behavior:contain}
.ck-sy .ck-syopt:not(#sheetload):not(#ck-x){display:flex;align-items:center;gap:10px;min-height:44px;margin:0;padding:4px 10px;border-radius:10px;border:1.5px solid transparent;background:var(--dlg,var(--panel,#fff));color:var(--ink);text-align:left;cursor:pointer;font:inherit}
.ck-sy .ck-syopt[aria-selected="true"]:not(#sheetload):not(#ck-x){border-color:var(--accent);font-weight:700}
.ck-syopt[hidden]{display:none!important}
.ck-syopt .ck-sw{width:22px;height:22px;border-radius:11px}
.ck-syon{flex:1;min-width:0;font-size:14px}
.ck-syopt small{font-size:12px;color:var(--muted)}
/* S3 / S4 */
.ck-syi{display:flex;flex-direction:column;gap:12px;border-radius:12px}
.ck-syj{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
@media (max-width:480px){ .ck-syj{grid-template-columns:minmax(0,1fr)} }
.ck-sgg{display:flex;border:1.5px solid var(--line);border-radius:10px;overflow:hidden}
.ck-sy .ck-sgb:not(#sheetload):not(#ck-x){flex:1 1 0;min-width:0;min-height:44px;margin:0;padding:2px 4px;border:0;border-radius:0;background:var(--dlg,var(--panel,#fff));color:var(--ink);font:600 13px/1.15 "Source Sans 3",system-ui,sans-serif;cursor:pointer;touch-action:manipulation}
.ck-sy .ck-sgb+.ck-sgb:not(#sheetload):not(#ck-x){border-left:1px solid var(--line)}
.ck-sy .ck-sgb[aria-pressed="true"]:not(#sheetload):not(#ck-x){background:var(--accent);color:var(--paper);font-weight:700}
.ck-sy .ck-sgb:disabled:not(#sheetload):not(#ck-x){background:var(--soft);color:var(--muted);cursor:default}
.ckf.off{opacity:.5}