/* Settings: Security, country block (security.js). Uses the app's colour variables, so both themes work. */
#sec-block{max-width:980px}
#sec-block .m{font-family:ui-monospace,Consolas,monospace;font-size:12.5px;overflow-wrap:anywhere}
#sec-block .sec-lead,#sec-block .sec-status,#sec-block .sec-you{max-width:78ch;margin:0 0 8px}
#sec-block .sec-you{border:1px solid var(--bd2);border-left-width:4px;border-radius:var(--r);padding:8px 12px;background:var(--sf);overflow-wrap:anywhere}
#sec-block .sec-you.ok{border-left-color:var(--ok)}#sec-block .sec-you.bad{border-left-color:var(--crit)}
#sec-block .sec-h{font-size:13px;margin:18px 0 8px;color:var(--ink2);text-transform:uppercase;letter-spacing:.05em}
#sec-block .sec-presets{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:10px;max-width:940px}
#sec-block .sec-preset{display:grid;gap:4px;text-align:left;padding:10px 12px;border:1px solid var(--bd2);border-radius:var(--r);background:var(--sf);color:inherit;cursor:pointer;font:inherit;min-height:44px}
#sec-block .sec-preset:hover{background:var(--sf2)}
#sec-block .sec-preset.on{border-color:var(--acc);background:var(--sel)}
#sec-block .sec-preset:focus-visible,#sec-block .sec-x:focus-visible{outline:2px solid var(--acc);outline-offset:2px}
#sec-block .sec-preset:disabled{cursor:default;opacity:.75}
#sec-block .sec-rec{display:inline-block;justify-self:start;font:600 11px var(--mono);letter-spacing:.04em;text-transform:uppercase;padding:1px 7px;border-radius:999px;background:var(--okBg);color:var(--ok);border:1px solid color-mix(in srgb,var(--ok) 40%,transparent)}
#sec-block .sec-prev,#sec-block .sec-lock{margin:10px 0;border:1px solid var(--bd2);background:var(--sf);border-radius:var(--r);padding:10px 14px;max-width:78ch}
#sec-block .sec-prev p,#sec-block .sec-lock p{margin:0 0 8px}
#sec-block .sec-lock{border-color:var(--crit);background:var(--critBg)}
#sec-block .sec-warn{margin:10px 0;border:1px solid color-mix(in srgb,var(--warn) 50%,var(--bd2));background:var(--warnBg);border-radius:var(--r);padding:10px 14px;max-width:78ch}
#sec-block .sec-warn ul{margin:6px 0;padding-left:20px;display:grid;gap:4px}
#sec-block .sec-grid select.sel,#sec-block .sec-grid input.sel{width:100%;box-sizing:border-box}
#sec-block .sec-chips{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 10px}
#sec-block .sec-chip{display:inline-flex;align-items:center;gap:6px;min-height:28px;padding:2px 4px 2px 9px;border:1px solid var(--bd2);border-radius:999px;background:var(--sf2);overflow-wrap:anywhere}
#sec-block .sec-chip.sm{min-height:22px;padding:0 8px;font-size:12px;margin:2px 2px 2px 0}
#sec-block .sec-x{width:24px;height:24px;border:0;border-radius:50%;background:transparent;color:var(--ink2);cursor:pointer;font-size:16px;line-height:1}
#sec-block .sec-x:hover{background:var(--sf3);color:var(--crit)}
#sec-block .sec-pick{max-width:560px}
#sec-block .sec-pickbar{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 8px}
#sec-block .sec-pickbar .sel{flex:1 1 220px;min-width:0;box-sizing:border-box}
#sec-block .sec-list{max-height:260px;overflow:auto;border:1px solid var(--bd2);border-radius:var(--r);background:var(--sf);margin:0 0 8px}
#sec-block .sec-opt{display:flex;align-items:center;gap:10px;padding:4px 10px;min-height:34px;cursor:pointer}
#sec-block .sec-opt:hover{background:var(--sf2)}
#sec-block .sec-opt .m{min-width:2.2em}
#sec-block .sec-none{padding:8px 10px;margin:0}
#sec-block .sec-actions{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:12px 0 4px}
#sec-block .sec-msg{min-height:20px;margin:6px 0 0;max-width:76ch;overflow-wrap:anywhere}
#sec-block .sec-test{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
#sec-block .sec-test .sel:not(.sm){min-width:240px}
#sec-block .sec-testout{flex:1 1 100%;margin-top:4px;overflow-wrap:anywhere}
@media(max-width:560px){
  #sec-block .sec-actions .btn,#sec-block .sec-pickbar .btn,#sec-block .sec-test .btn,#sec-block .sec-test .sel{flex:1 1 100%}
  #sec-block .sec-test .sel:not(.sm){min-width:0}
}