/* Pr0 (search/static/pr0/): the applet's pages. Dark by default like the suite, light by preference or by the theme
   switch (theme.js sets data-axi0-theme); every colour comes from these variables, the dialogs included. */
:root { --p-bg: #0f1012; --p-fg: #f2f1ee; --p-mut: #b4b3ae; --p-line: #2e3035; --p-card: #17181c; --p-acc: #f6a04d; --p-btn: #f2f1ee; --p-btn-fg: #111214; color-scheme: dark; }
@media (prefers-color-scheme: light) {
  html:not([data-axi0-theme="dark"]) { --p-bg: #fbfaf7; --p-fg: #161616; --p-mut: #54534e; --p-line: #d6d3cb; --p-card: #ffffff; --p-acc: #9a4f08; --p-btn: #161616; --p-btn-fg: #fbfaf7; color-scheme: light; }
}
html[data-axi0-theme="light"] { --p-bg: #fbfaf7; --p-fg: #161616; --p-mut: #54534e; --p-line: #d6d3cb; --p-card: #ffffff; --p-acc: #9a4f08; --p-btn: #161616; --p-btn-fg: #fbfaf7; color-scheme: light; }
body { margin: 0; background: var(--p-bg); color: var(--p-fg); font-family: "Instrument Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; line-height: 1.5; }
/* the header, in the geometry of every suite page (the Tools page's rules) */
.skip { position: absolute; left: 12px; top: -60px; z-index: 10; padding: 8px 14px; border-radius: 999px; background: var(--p-btn); color: var(--p-btn-fg); font-weight: 600; text-decoration: none; }
.skip:focus { top: 12px; }
:focus-visible { outline: 2px solid var(--p-acc); outline-offset: 2px; }
.top { display: flex; align-items: center; justify-content: space-between; gap: 16px; max-width: 1120px; margin: 0 auto; padding: 22px 20px 8px; box-sizing: border-box; }
.mark { display: inline-flex; align-items: baseline; gap: .12em; color: var(--p-fg); text-decoration: none; font-size: 26px; font-weight: 600; letter-spacing: -.045em; white-space: nowrap; }
.mark-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: #f6a04d; box-shadow: 0 0 9px #f6a04d; transform: translateY(-2px); }
.mark-s { color: var(--p-mut); font-weight: 500; }
.top-right { display: flex; align-items: center; justify-content: flex-end; gap: 14px; min-width: 202px; }   /* the Key slot and the launcher as drawn (104 + 84 px), right-aligned: nothing moves when they fill in */
#axi0-apps { min-width: 84px; min-height: 40px; }   /* the launcher's two buttons (40 px each, 4 px apart) before launcher.js draws them: nothing moves (as /metrics/) */
.me-slot { position: relative; flex: none; width: 36px; height: 36px; }
.me-slot:empty { display: none; }
@media (max-width: 600px) { .mark { font-size: 22px; } }
.pr0 { max-width: 1120px; margin: 0 auto; padding: 8px 20px 60px; box-sizing: border-box; }
.pr0 h1 { font-size: clamp(2rem, 5vw, 3rem); line-height: 1.1; margin: .75rem 0 .5rem; letter-spacing: -.02em; }
.pr0 h2 { font-size: 1.15rem; margin: 2rem 0 .75rem; }
.pr0 a { color: var(--p-acc); }
.lede { max-width: 46rem; color: var(--p-mut); font-size: 1.05rem; margin: 0 0 1rem; }
.note { color: var(--p-mut); font-size: .92rem; max-width: 46rem; }
.crumb { margin: 0; color: var(--p-mut); }
.cards { list-style: none; padding: 0; margin: 0; display: grid; gap: .75rem; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); }
.card { background: var(--p-card); border: 1px solid var(--p-line); border-radius: 14px; padding: 1rem; }
.card p { margin: .5rem 0 0; color: var(--p-mut); font-size: .95rem; }
.card .credit { font-size: .85rem; }
.pr0 .card-link { display: flex; align-items: center; gap: .75rem; color: var(--p-fg); text-decoration: none; min-height: 48px; }
.card-link svg { width: 44px; height: 44px; flex: none; }
.card-name { font-weight: 600; font-size: 1.1rem; }
.pr0 .soon .card-name { margin: 0; color: var(--p-fg); }
.card-link:hover .card-name, .card-link:focus-visible .card-name { text-decoration: underline; }
.badge { display: inline-block; margin-left: .4rem; padding: 0 .5rem; border: 1px solid var(--p-line); border-radius: 999px; font-size: .78rem; font-weight: 500; color: var(--p-mut); vertical-align: 2px; }
.bar { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin: 0 0 .5rem; }
.pr0 button, dialog button { font: inherit; border-radius: 10px; padding: .55rem 1rem; min-height: 44px; border: 1px solid var(--p-line); background: var(--p-card); color: var(--p-fg); cursor: pointer; }
.pr0 button.primary, dialog button.primary { background: var(--p-btn); color: var(--p-btn-fg); border-color: var(--p-btn); font-weight: 600; }
.pr0 button:disabled { opacity: .5; cursor: default; }
#status { color: var(--p-mut); }
.stage { border: 1px solid var(--p-line); border-radius: 14px; overflow: hidden; height: min(82vh, 56rem); min-height: 26rem; background: #262626; margin: 1rem 0; }
.stage[hidden] { display: none; }
.stage iframe { display: block; width: 100%; height: 100%; border: 0; }
dialog { background: var(--p-card); color: var(--p-fg); border: 1px solid var(--p-line); border-radius: 14px; padding: 1.25rem; width: min(32rem, calc(100vw - 2rem)); box-sizing: border-box; }
dialog::backdrop { background: rgb(0 0 0 / .6); }
dialog h2 { margin: 0 0 .75rem; font-size: 1.15rem; }
.pick-list { list-style: none; padding: 0; margin: 0 0 .5rem; max-height: 50vh; overflow: auto; }
.pick-list button { width: 100%; text-align: left; display: flex; justify-content: space-between; gap: 1rem; margin-bottom: .35rem; }
.size { color: var(--p-mut); white-space: nowrap; }
dialog label { display: block; margin-bottom: .35rem; }
dialog input { font: inherit; width: 100%; box-sizing: border-box; padding: .55rem .65rem; border-radius: 8px; border: 1px solid var(--p-line); background: var(--p-bg); color: var(--p-fg); }
.row { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1rem; }