/* pki-web.css - the external certificate page (ext.html). Same tokens and look as the previous script-only page. */
:root{--bg:#f5f6f8;--fg:#1b1f24;--muted:#5b6470;--card:#fff;--line:#d9dde3;--pre:#e8ebf0;--acc:#2455c3;--acc-fg:#fff;
  --ok:#1f7a3f;--ok-bg:#eaf6ee;--bad:#b3261e;--bad-bg:#fbeceb;--warn-bg:#fff6e0;--warn-line:#e7c66b}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--bg:#14181e;--fg:#e6e6e6;--muted:#9aa4b1;--card:#1c222b;
  --line:#2a323d;--pre:#10141a;--acc:#6fb0ff;--acc-fg:#0d1117;--ok:#6fd08f;--ok-bg:#16261c;--bad:#ff8a80;--bad-bg:#2c1717;
  --warn-bg:#2a2414;--warn-line:#6b5a25}}
:root[data-theme="dark"]{--bg:#14181e;--fg:#e6e6e6;--muted:#9aa4b1;--card:#1c222b;--line:#2a323d;--pre:#10141a;--acc:#6fb0ff;
  --acc-fg:#0d1117;--ok:#6fd08f;--ok-bg:#16261c;--bad:#ff8a80;--bad-bg:#2c1717;--warn-bg:#2a2414;--warn-line:#6b5a25}

body{font:16px/1.5 system-ui,sans-serif;max-width:760px;margin:2rem auto;padding:0 16px;background:var(--bg);color:var(--fg)}
h1{font-size:1.5rem}
h2{font-size:1.15rem;margin:.6rem 0 .8rem}
h3{font-size:1rem;margin:1.2rem 0 .4rem}
a{color:var(--acc)}
pre,code{background:var(--pre);border-radius:6px;font-size:.9rem}
pre{padding:10px 12px;white-space:pre-wrap;word-break:break-all}
code{padding:1px 5px}
.lead{color:var(--fg)}
.hint{color:var(--muted);font-size:.9rem}
.card{background:var(--card);border:1px solid var(--line);border-radius:8px;padding:8px 20px 16px;margin:1rem 0}
.card.warn{background:var(--warn-bg);border-color:var(--warn-line)}
.card.ok{border-color:var(--ok)}
[hidden]{display:none !important}
body.en [lang="ru"], body.ru [lang="en"]{display:none}

.sw{float:right;font-size:.85rem}
.sw button{font:.85rem system-ui,sans-serif;background:var(--card);border:1px solid var(--line);border-radius:6px;padding:2px 8px;
  cursor:pointer;color:var(--fg);margin-left:6px}

label{display:block;margin:.7rem 0 .25rem;font-weight:600;font-size:.95rem}
label.check{font-weight:400;display:flex;gap:.4rem;align-items:center}
input[type=password],input:not([type]){box-sizing:border-box;width:100%;font:16px system-ui,sans-serif;padding:8px 10px;
  border:1px solid var(--line);border-radius:6px;background:var(--bg);color:var(--fg)}
.namebox{display:flex;align-items:stretch;border:1px solid var(--line);border-radius:6px;background:var(--bg);overflow:hidden}
.namebox input{border:0 !important;border-radius:0 !important;min-width:6rem;flex:1}
.namebox .zone{padding:8px 10px;color:var(--muted);background:var(--pre);white-space:nowrap;font-size:.9rem;display:flex;align-items:center}
.namebox.bad{border-color:var(--bad);box-shadow:0 0 0 2px var(--bad-bg)}
input:focus,.namebox:focus-within{outline:2px solid var(--acc);outline-offset:1px}
.err{color:var(--bad);margin:.4rem 0}

button{font:inherit;cursor:pointer}
button.primary,a.button{display:inline-block;margin-top:.9rem;padding:8px 16px;border-radius:6px;border:1px solid var(--acc);
  background:var(--acc);color:var(--acc-fg);text-decoration:none}
button.primary:disabled{opacity:.45;cursor:not-allowed}
button.ghost{padding:6px 12px;border-radius:6px;border:1px solid var(--line);background:var(--card);color:var(--fg)}
button.link{border:0;background:none;color:var(--muted);text-decoration:underline;padding:0;font-size:.9rem}
.foot{margin:.8rem 0 0}

.ticket{display:flex;flex-wrap:wrap;gap:12px 28px;align-items:flex-end;margin:.2rem 0 .8rem}
.cap{font-size:.8rem;color:var(--muted);text-transform:uppercase;letter-spacing:.04em}
.num{font:600 1.4rem ui-monospace,SFMono-Regular,Consolas,monospace}
.code{font:700 2rem ui-monospace,SFMono-Regular,Consolas,monospace;letter-spacing:.08em}
.src{font:500 1rem ui-monospace,SFMono-Regular,Consolas,monospace;padding-bottom:.3rem}
.status{padding:8px 12px;border-radius:6px;background:var(--pre);margin:.6rem 0}
.status.ok{background:var(--ok-bg);color:var(--ok)}
.status.bad{background:var(--bad-bg);color:var(--bad)}
.timer{display:flex;align-items:center;gap:10px;font-size:.85rem;color:var(--muted)}
.bar,.meter{flex:1;height:6px;background:var(--pre);border-radius:3px;overflow:hidden}
.bar>div,.meter>div{height:100%;width:0;background:var(--acc);transition:width .4s linear}
.meter{margin:.4rem 0 0}
.meter>div.weak{background:var(--bad)}
.meter>div.fair{background:#d39b1a}
.meter>div.good{background:var(--ok)}

details{margin:.3rem 0}
details summary{cursor:pointer}

/* "More": a compact button that opens a floating panel. Still a plain <details>, so it works without JS. */
.more{position:relative;margin:1rem 0}
.more summary{display:inline-block;list-style:none;font-weight:600;padding:6px 12px;border:1px solid var(--line);
  border-radius:6px;background:var(--card);color:var(--fg);user-select:none}
.more summary::-webkit-details-marker{display:none}
.more summary::after{content:"\25BE";margin-left:.5rem;color:var(--muted)}
.more[open] summary::after{content:"\25B4"}
.more summary:focus-visible{outline:2px solid var(--acc);outline-offset:1px}
.more ul{position:absolute;z-index:5;left:0;top:calc(100% + 6px);width:max-content;max-width:min(440px,calc(100vw - 32px));
  box-sizing:border-box;margin:0;padding:8px 14px;list-style:none;background:var(--card);border:1px solid var(--line);border-radius:8px;
  box-shadow:0 8px 24px rgba(0,0,0,.18);transform-origin:top left}
.more[open] ul{animation:pop .2s ease-out}
.more li{margin:.5rem 0}
.more li .hint{display:block;margin-top:.15rem}
.more li code{white-space:pre-wrap;overflow-wrap:anywhere}
/* no WebCrypto: the scripts are the only way left, so the panel stays open and in the flow */
.more.pinned ul{position:static;width:auto;max-width:none;margin-top:6px;box-shadow:none;animation:none}
@keyframes pop{from{opacity:0;scale:.95}to{opacity:1;scale:1}}
@media (prefers-reduced-motion:reduce){.more[open] ul{animation:none}}

@media (max-width:520px){
  .sw{float:none;text-align:right}                /* floated, it ran into the <h1> at 375 px */
  .sw+h1{margin-top:.3rem}
  .namebox{flex-direction:column}
  .namebox .zone{border-top:1px solid var(--line)}
  .code{font-size:1.6rem}
}