/* Edgible's brand, as on guides.edgible.com: Jost (standing in for the licensed brand face), Iosevka for code,
navy bands at the top and bottom, orange links. */
@font-face{font-family:"Jost";src:url("assets/fonts/Jost-var.woff2") format("woff2");font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:"Jost";src:url("assets/fonts/Jost-Italic-var.woff2") format("woff2");font-weight:100 900;font-style:italic;font-display:swap}
@font-face{font-family:"Iosevka";src:url("assets/fonts/Iosevka-400.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Iosevka";src:url("assets/fonts/Iosevka-700.woff2") format("woff2");font-weight:700;font-display:swap}
:root{--navy:#000033;--navy-mid:#2e4a9e;--bg:#f5f6fa;--panel:#ffffff;--ink:#000033;--muted:#4a4f66;--edge:#d6dae6;--link:#8b4513;
--pass-bg:#e3f4e8;--pass:#1d6b37;--fail-bg:#fbe5e3;--fail:#9b2318;--none-bg:#eceef4;--none:#4a4f66;--code:#e2e6f1;--code-edge:#c8cee1}
@media (prefers-color-scheme:dark){:root{--bg:#0d1020;--panel:#151a2e;--ink:#e8eaf4;--muted:#a3a8bf;--edge:#2a3150;--link:#ffa07a;
--pass-bg:#173524;--pass:#8fdca8;--fail-bg:#3d1a17;--fail:#f2a59c;--none-bg:#232a44;--none:#b6bbd2;--code:#1d2340;--code-edge:#2a3150}}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font:17px/1.6 "Jost",system-ui,-apple-system,"Segoe UI",sans-serif;display:flex;flex-direction:column;min-height:100vh}
a{color:var(--link)}
.wrap{max-width:1040px;margin:0 auto;padding:0 16px}
.top{background:var(--navy);color:#fff}
.top .wrap{display:flex;flex-wrap:wrap;gap:8px 24px;align-items:center;justify-content:space-between;padding-top:14px;padding-bottom:14px}
.brand{display:flex;align-items:center;gap:12px;color:#fff;text-decoration:none;font-size:20px;font-weight:500;letter-spacing:.02em}
.brand img{height:24px;width:auto;display:block}
.brand span{border-left:1px solid rgba(255,255,255,.4);padding-left:12px}
nav{display:flex;flex-wrap:wrap;gap:18px;align-items:center}nav a{text-decoration:none;color:rgba(255,255,255,.85)}nav a:hover{color:#fff}
nav a.star{border:1px solid rgba(255,255,255,.45);border-radius:999px;padding:1px 12px;color:#fff}nav a.star:hover{background:rgba(255,255,255,.12)}
.star-ask{color:var(--muted)}
main.wrap{padding-top:40px;padding-bottom:56px;flex:1;width:100%}
h1,h2,h3{font-weight:600;letter-spacing:-.01em}
h1{font-size:2.1rem;line-height:1.2;margin:.2em 0 .3em}h2{font-size:1.4rem;margin:2em 0 .5em}h3{font-size:1.1rem}
h1.with-icon{display:flex;align-items:center;gap:16px}
.hero h1{font-size:2.5rem;max-width:20ch}.hero p{max-width:65ch}
.lead{font-size:1.2rem;color:var(--muted);max-width:65ch}
.stats{font-weight:600}
.pillars{list-style:none;padding:0;margin:24px 0;display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px}
.pillars li{background:var(--panel);border:1px solid var(--edge);border-top:3px solid var(--navy-mid);border-radius:10px;padding:14px 16px;display:flex;flex-direction:column;gap:6px}
.pillars strong{font-size:1.05rem}.pillars span{color:var(--muted);font-size:.95rem;line-height:1.5}
.prose{max-width:70ch}
.art{margin:28px 0}.art svg{display:block;width:100%;height:auto;max-width:820px;margin:0 auto}
.crumbs{color:var(--muted);font-size:.9rem;margin:0}
.meta{display:flex;flex-wrap:wrap;gap:8px 16px;align-items:center}
.kind{font-weight:600}
.tiles{list-style:none;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:14px}
.tile{background:var(--panel);border:1px solid var(--edge);border-radius:12px;padding:16px 18px;display:flex;flex-direction:column;gap:8px;align-items:flex-start;transition:border-color .15s,box-shadow .15s}
.tile:hover{border-color:var(--navy-mid);box-shadow:0 2px 10px rgba(0,0,51,.08)}
.tile a{text-decoration:none;color:var(--ink)}.tile span:not(.pill):not(.icon){color:var(--muted);font-size:.95rem}
.tile-head{display:flex;align-items:center;gap:12px;font-size:1.1rem}
.icon{flex:none;border-radius:10px;object-fit:contain;display:inline-block}
/* A logo sits on a white tile, like an app icon, so a black logo still reads in dark mode. */
img.icon{background:#fff;padding:5px;border:1px solid var(--edge)}
.icon.placeholder{background:var(--navy) url("assets/images/edgible-symbol-white.png") center/58% no-repeat}
@media (prefers-color-scheme:dark){.icon.placeholder{background-color:var(--navy-mid)}}
.pill{display:inline-block;border-radius:999px;padding:1px 10px;font-size:.8rem;font-weight:600;white-space:nowrap}
.pill.pass{background:var(--pass-bg);color:var(--pass)}.pill.fail{background:var(--fail-bg);color:var(--fail)}
.pill.untested,.pill.neutral{background:var(--none-bg);color:var(--none)}
.fit{display:inline-block;border-radius:6px;padding:1px 8px;font-weight:600;margin-right:6px}
.fit.good{background:var(--pass-bg);color:var(--pass)}.fit.conditional{background:var(--none-bg);color:var(--ink)}
.fit.poor,.fit.refused{background:var(--fail-bg);color:var(--fail)}
.leaving-label{font-weight:600;margin-bottom:4px}
.leaving{list-style:none;padding:0;display:flex;flex-wrap:wrap;gap:6px 14px;margin-top:0}
.card-image img{max-width:100%;height:auto;display:block;margin:16px 0}
.scroll{overflow-x:auto}
table{border-collapse:collapse;width:100%;background:var(--panel);font-size:.95rem;border-radius:8px;overflow:hidden}
th,td{border:1px solid var(--edge);padding:7px 11px;text-align:left;vertical-align:top}
th{font-weight:600;background:var(--navy-mid);color:#fff;border-color:var(--navy-mid)}
code,pre{font-family:"Iosevka","SFMono-Regular",Menlo,monospace}
code{background:var(--code);border:1px solid var(--code-edge);border-radius:4px;padding:0 .35em;font-size:.9em}
pre{background:var(--code);border:1px solid var(--code-edge);border-radius:8px;padding:12px 14px;overflow-x:auto}pre code{padding:0;background:none;border:0}
dt{font-weight:600;margin-top:10px}dd{margin:2px 0 0 0}
.readme{border-top:1px solid var(--edge);margin-top:32px}
.readme img{max-width:100%}
.source{color:var(--muted);font-size:.9rem;margin-top:2em}
.finder{background:var(--panel);border:1px solid var(--edge);border-radius:12px;padding:14px 16px;margin:28px 0 0}
.finder input[type=search],.finder select{font:inherit;color:var(--ink);background:var(--bg);border:1px solid var(--edge);border-radius:8px;padding:8px 12px}
.finder input[type=search]{width:100%;font-size:1.05rem}
.finder input[type=search]:focus,.finder select:focus{outline:2px solid var(--navy-mid);outline-offset:1px}
.find-row{display:flex;gap:8px}.find-q{display:block;flex:1;min-width:0}
.finder button{font:inherit;font-weight:600;color:#fff;background:var(--navy-mid);border:0;border-radius:8px;padding:8px 18px;cursor:pointer}
.finder button:hover{background:var(--navy)}.finder button:focus-visible{outline:2px solid var(--link);outline-offset:2px}
.find-opts{display:flex;flex-wrap:wrap;gap:8px 10px;align-items:center;margin-top:10px}
.find-opts label{min-width:0;max-width:100%}.find-opts select{max-width:100%}
.chip{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--edge);border-radius:999px;padding:4px 12px;font-size:.92rem;cursor:pointer;user-select:none}
.chip:has(input:checked){background:var(--navy-mid);border-color:var(--navy-mid);color:#fff}
.chip input{accent-color:var(--link);margin:0}
.find-count{margin:8px 0 0;color:var(--muted);font-size:.9rem}.find-count:empty{display:none}
.no-match{color:var(--muted)}
[hidden]{display:none!important}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
footer{background:var(--navy);color:rgba(255,255,255,.88);font-size:.88rem;padding:18px 0 28px}
footer a{color:#ffa07a}