/*******************************************************************************
 *  term.css - the 2026 terminal skin. added 2026-09-29.
 *
 *  every color comes from the five --vars below, set per theme on
 *  html[data-theme]. html[data-fx=off] drops the scanlines and glow for
 *  anyone who wants plain text.
 ******************************************************************************/

html, .tc[data-theme="pedurple"] { --bg:#0c0616; --bg2:#150b26; --fg:#cdb4ff; --hi:#f1e8ff; --acc:#9146FF; --acc2:#b98cff; --dim:#6f5a94; --glow:rgba(145,70,255,.55); --bar:#9146FF; --barfg:#0c0616; --code:#07030f; }
html[data-theme="amber"], .tc[data-theme="amber"] { --bg:#0b0700; --bg2:#1a1000; --fg:#FFB000; --hi:#ffe2a0; --acc:#FF8200; --acc2:#ffb347; --dim:#8a6200; --glow:rgba(255,176,0,.55);  --bar:#FFB000; --barfg:#120c00; --code:#060400; }
html[data-theme="green"], .tc[data-theme="green"] { --bg:#010a03; --bg2:#021a08; --fg:#33ff77; --hi:#c8ffd9; --acc:#00e05a; --acc2:#7dffab; --dim:#1f7a3e; --glow:rgba(51,255,119,.45); --bar:#33ff77; --barfg:#001a07; --code:#000702; }
html[data-theme="ice"], .tc[data-theme="ice"] { --bg:#050b12; --bg2:#0b1826; --fg:#9fd8ff; --hi:#eaf7ff; --acc:#38bdf8; --acc2:#7dd3fc; --dim:#46708f; --glow:rgba(125,211,252,.45); --bar:#7dd3fc; --barfg:#04111c; --code:#02070d; }
html[data-theme="dracula"], .tc[data-theme="dracula"] { --bg:#282a36; --bg2:#343746; --fg:#f8f8f2; --hi:#ffffff; --acc:#ff79c6; --acc2:#bd93f9; --dim:#6272a4; --glow:rgba(189,147,249,.4); --bar:#bd93f9; --barfg:#21222c; --code:#21222c; }
html[data-theme="gruvbox"], .tc[data-theme="gruvbox"] { --bg:#282828; --bg2:#3c3836; --fg:#ebdbb2; --hi:#fbf1c7; --acc:#fe8019; --acc2:#fabd2f; --dim:#928374; --glow:rgba(250,189,47,.3); --bar:#b8bb26; --barfg:#1d2021; --code:#1d2021; }
html[data-theme="solarized"], .tc[data-theme="solarized"] { --bg:#002b36; --bg2:#073642; --fg:#93a1a1; --hi:#fdf6e3; --acc:#2aa198; --acc2:#6c71c4; --dim:#586e75; --glow:rgba(42,161,152,.35); --bar:#b58900; --barfg:#002b36; --code:#00212b; }
html[data-theme="paper"], .tc[data-theme="paper"] { --bg:#f4efe3; --bg2:#ebe3d1; --fg:#2b2620; --hi:#000000; --acc:#7a2fe0; --acc2:#9146FF; --dim:#8b8272; --glow:transparent;         --bar:#2b2620; --barfg:#f4efe3; --code:#e9e1cc; }

*               { box-sizing:border-box; }
html, body      { margin:0; padding:0; background:#000; }
html[data-theme="paper"] body { background:#d8cfbb; }

body {
    font-family: 'IBM Plex Mono', ui-monospace, Menlo, monospace;
    font-size: 18px;
    line-height: 1.6;
    color: var(--fg);
    -webkit-text-size-adjust: 100%;
}

a               { color: var(--acc2); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover         { color: var(--hi); background: color-mix(in srgb, var(--acc) 22%, transparent); }
a:focus-visible { outline: 2px solid var(--acc2); outline-offset: 2px; }
b, strong       { color: var(--hi); font-weight: 600; }
.dim            { color: var(--dim); text-shadow: none; }
kbd             { font-family: inherit; font-size: .85em; border: 1px solid var(--dim); border-bottom-width: 2px; border-radius: 4px; padding: 0 .35em; color: var(--hi); }

/* ------------------------------------------------------------ the CRT */

.crt {
    position: relative;
    max-width: 1320px;
    margin: 24px auto 0;
    min-height: calc(100vh - 80px);
    border-radius: 22px;
    background: radial-gradient(ellipse at 50% 40%, var(--bg2) 0%, var(--bg) 70%);
    box-shadow: inset 0 0 120px rgba(0,0,0,.85), 0 0 0 3px color-mix(in srgb, var(--acc) 25%, #000);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

html[data-theme="paper"] .crt { box-shadow: 0 0 0 1px #b9ae96, 0 20px 50px rgba(0,0,0,.18); border-radius: 6px; }

html[data-fx="on"] .crt::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: repeating-linear-gradient(to bottom, rgba(0,0,0,.24) 0 1px, transparent 1px 3px);
    z-index: 5;
}

html[data-fx="on"] .screen      { text-shadow: 0 0 6px var(--glow); }
html[data-theme="paper"] .crt::after { display: none; }

.screen {
    flex: 1;
    padding: 34px 48px 72px;
    overflow-wrap: anywhere;
}

/* ------------------------------------------------------------ terminal lines */

.ln             { margin: 0; }
.cmd            { margin-top: 20px; color: var(--fg); }
.cmd .usr       { color: var(--acc); }
.cmd .cwd       { color: var(--hi); }
.motd           { display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.motd a.badge   { display: block; line-height: 0; background: none; align-self: center; text-shadow: none; }
.mbadge         { display: block; width: 213px; height: 30px; }
.mbadge .mb-light { fill: var(--bar); }
.mbadge .mb-dark  { fill: color-mix(in srgb, var(--bar) 55%, #000); }
.mbadge .mb-stroke { stroke: var(--barfg); }
.mbadge .mb-ink   { fill: var(--barfg); font-family: 'IBM Plex Mono', ui-monospace, monospace; font-weight: 600; }
.motd a.badge:hover .mb-light, .mfoot a.badge:hover .mb-light { fill: var(--acc2); }
/* phones get the badge once, centered under the bottom bar (his call, 2026-09-30) */
.mfoot          { display: none; justify-content: center; padding: 22px 0 28px; }
.mfoot a.badge  { display: block; line-height: 0; background: none; text-shadow: none; }
.err            { color: #ff6b6b; }
.block          { margin-top: 4px; }

.logo {
    margin: 10px 0 6px;
    color: var(--acc);
    font-family: inherit;
    font-size: min(15px, calc((100vw - 110px) / 55));
    line-height: 1.05;
    white-space: pre;
    overflow: hidden;
    text-shadow: 0 0 10px var(--glow);
}

.ls             { display: grid; grid-template-columns: max-content max-content 1fr; gap: 0 22px; align-items: baseline; }
.ls .perm       { color: var(--dim); text-shadow: none; }
.ls .dt         { color: var(--hi); }
.yr             { margin-top: 14px; }

.grid           { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 10px; margin-top: 10px; }
.cell           { display: block; padding: 12px 14px; border: 1px solid color-mix(in srgb, var(--acc) 45%, transparent); border-radius: 6px; text-decoration: none; line-height: 1.4; }
.cell b         { display: block; color: var(--hi); }
.cell span      { font-size: .85em; }
.cell:hover     { border-color: var(--acc2); }

.tree           { margin-top: 6px; }
.tr             { display: flex; align-items: baseline; white-space: pre; }
.tr .br         { color: var(--dim); text-shadow: none; flex: none; }
.tr .tg         { color: var(--hi); }
.tr .tx         { white-space: normal; flex: 1; min-width: 0; }
.tr .meta       { color: var(--dim); font-size: .85em; margin-left: 16px; flex: none; }
.new            { font-size: .7em; letter-spacing: .1em; text-transform: uppercase; background: var(--acc); color: var(--barfg); padding: 1px 6px; border-radius: 3px; text-shadow: none; vertical-align: 2px; }

/* ------------------------------------------------------------ documents */

.post, .doc     { max-width: 980px; margin-top: 6px; }
.post h1,
.doc h1         { font-size: 1em; color: var(--hi); margin: 0 0 8px; font-weight: 600; }
.post p,
.doc p          { margin: 0 0 14px; text-align: left !important; }
.post img,
.doc img        { max-width: 100%; height: auto; border: 1px solid var(--dim); }
.doc pre,
.post pre       { font-family: inherit; font-size: .85em; line-height: 1.45; white-space: pre; overflow-x: auto; background: var(--code); border-left: 3px solid var(--acc); padding: 12px 16px; margin: 0 0 14px; }
.doc small      { color: var(--dim); }
.doc h2         { font-size: 1em; color: var(--hi); margin: 30px 0 10px; padding-bottom: 4px; border-bottom: 1px dashed color-mix(in srgb, var(--acc) 45%, transparent); }
.doc h2::before { content: "## "; color: var(--acc); }
.doc h3         { font-size: 1em; color: var(--hi); margin: 22px 0 8px; }
.doc h3::before { content: "### "; color: var(--dim); }
.doc h4         { font-size: .95em; color: var(--acc2); margin: 16px 0 6px; }
.doc ul, .doc ol { margin: 0 0 14px; padding-left: 3ch; }
.doc li         { margin: 2px 0; }
.doc .toc       { border-left: 3px solid var(--acc); background: color-mix(in srgb, var(--acc) 7%, transparent); padding: 10px 16px; margin: 0 0 20px; }
.doc .toc b     { color: var(--dim); font-weight: 400; }
.doc .toc ol    { margin: 6px 0 0; }
.doc .toc ul    { margin: 2px 0 4px; font-size: .9em; }
.doc table.kvt td { border-bottom: 1px solid color-mix(in srgb, var(--dim) 45%, transparent); text-align: left; padding: 4px 14px 4px 0; }
.doc.md h2      { font-size: 1.05em; }
.doc.md table.mdt { border-collapse: collapse; margin: 4px 0 16px; max-width: 100%; display: block; overflow-x: auto; }
.doc.md table.mdt th, .doc.md table.mdt td { padding: 4px 16px 4px 0; border-bottom: 1px solid color-mix(in srgb, var(--dim) 45%, transparent); text-align: left; }
.doc.md table.mdt th { color: var(--hi); font-weight: 600; }
.doc.md blockquote { margin: 0 0 14px; padding: 6px 16px; border-left: 3px solid var(--acc); color: var(--hi); background: color-mix(in srgb, var(--acc) 7%, transparent); }
.doc.md code    { color: var(--acc2); }
.doc.md li      { margin: 3px 0; }
.doc.md ol, .doc.md ul { padding-left: 3.2ch; }
#out .doc.md, #out .doc.md * { white-space: normal; }
.doc .book, .doc .gig { border-left: 3px solid var(--acc); background: color-mix(in srgb, var(--acc) 7%, transparent); padding: 12px 18px 2px; margin: 0 0 18px; }
.doc .book .pill.back, .doc .gig .pill.back { display: inline-block; }
.doc table      { border-collapse: collapse; max-width: 100%; }
.doc td,
.doc th         { color: inherit; font-family: inherit; font-size: inherit; padding: 3px 12px 3px 0; vertical-align: top; }
.doc td.heading { color: var(--hi); border-bottom: 1px solid var(--dim); font-weight: 600; }
.doc font       { color: inherit !important; }
.doc center     { text-align: left; }
.doc p[align="right"] { text-align: left !important; }
.doc iframe     { width: 100%; border: 1px solid var(--dim); background: #111; }

.kv             { margin-top: 6px; max-width: 760px; }
.kv-r           { display: grid; grid-template-columns: 17ch 1fr; gap: 0 2ch; padding: 1px 0; }
.kv-k           { color: var(--dim); text-shadow: none; }
.kv-k::after    { content: ":"; }
.kv-v           { color: var(--hi); font-variant-numeric: tabular-nums; }
@media (max-width: 760px) { .kv-r { grid-template-columns: 1fr; } .kv-v { padding-left: 2ch; margin-bottom: 4px; } }

/* blog listing: scroll-all badge, top right of the ls line */
.pill           { float: right; margin-top: 20px; padding: 2px 12px; font-size: .8em; line-height: 1.6; border: 1px solid var(--acc); border-radius: 999px; color: var(--hi); text-decoration: none; background: color-mix(in srgb, var(--acc) 18%, transparent); text-shadow: none; }
.pill:hover     { background: var(--acc); color: var(--barfg); }

/* all-posts feed */
.fhead          { max-width: 980px; display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin: 12px 0 6px; padding: 12px 16px; border: 1px solid var(--acc); border-radius: 8px; background: color-mix(in srgb, var(--acc) 14%, transparent); }
.fhead .fmeta   { color: var(--fg); font-size: .9em; }
.pill.back      { float: none; margin: 0; font-size: 1em; padding: 4px 16px; font-weight: 600; background: var(--acc); color: var(--barfg); }
.pill.back:hover { background: var(--acc2); color: var(--barfg); }
.lsmore         { display: flex; justify-content: flex-end; margin-top: 10px; }
.lsmore .arr    { display: inline-block; transition: transform .15s; }
.lsmore a:hover .arr { transform: translateX(4px); }
.feed .fp       { max-width: 980px; margin-top: 44px; scroll-margin-top: 16px; }
.feed .fp:first-child { margin-top: 22px; }
.feed .fbar     { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; flex-wrap: wrap; margin: 0 0 16px; padding: 10px 16px; border-left: 4px solid var(--acc); border-radius: 0 6px 6px 0; background: color-mix(in srgb, var(--acc) 22%, transparent); text-shadow: none; }
.feed .ft       { color: var(--hi); font-weight: 600; font-size: 1.12em; text-decoration: none; }
.feed .ft:hover { text-decoration: underline; background: none; }
.feed .fd       { color: var(--acc2); font-size: .85em; white-space: nowrap; font-variant-numeric: tabular-nums; }
.rail           { position: fixed; z-index: 7; top: 90px; right: calc(max(24px, (100vw - 1320px) / 2) + 22px); max-height: calc(100vh - 190px); overflow-y: auto; scrollbar-width: none; font-size: .78em; line-height: 1.6; text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.rail::-webkit-scrollbar { display: none; }
.rail a         { display: block; white-space: nowrap; color: var(--dim); text-decoration: none; padding-right: 8px; border-right: 2px solid transparent; }
.rail a.ny      { margin-top: 9px; }
.rail a:hover   { color: var(--hi); background: none; }
.rail a.on      { color: var(--hi); border-right-color: var(--acc); }
@media (max-width: 1260px) { .rail { display: none; } }

.tagline        { color: var(--hi); }
.facts          { display: flex; flex-wrap: wrap; gap: 6px 26px; color: var(--dim); margin: 0 0 14px; }
.facts b        { color: var(--acc2); }
.links a        { white-space: nowrap; }
.gh             { font-variant-numeric: tabular-nums; }
.gh.live        { color: var(--acc2); }
.cell.over      { display: none; }
/* portfolio blocks (home + `portfolio` in pash) */
.pf             { margin-top: 6px; }
.pf > .ln.dim   { margin-bottom: 2px; }
#out .pf, #out .pf * { white-space: normal; }
.grid.proj      { grid-template-columns: repeat(auto-fill, minmax(420px, 1fr)); gap: 14px; }
.cell.proj      { padding: 0 0 14px; overflow: hidden; }
.cell.proj img  { display: block; width: 100%; height: auto; aspect-ratio: 40 / 21; object-fit: cover; margin: 0 0 12px; border-bottom: 1px solid color-mix(in srgb, var(--acc) 45%, transparent); }
.cell.proj b, .cell.proj > span { display: block; padding: 0 16px; }
.cell.proj b    { font-size: 1.05em; }
.cell.proj .dom { font-style: normal; font-weight: 400; font-size: .75em; color: var(--dim); margin-left: 6px; }
.cell.proj:hover img { filter: brightness(1.08); }
html[data-fx="on"] .cell.proj img { filter: saturate(.92); }
@media (max-width: 760px) { .grid.proj { grid-template-columns: 1fr; } }
.cell.more      { border-style: dashed; border-color: var(--acc); background: color-mix(in srgb, var(--acc) 12%, transparent); }
.cell.more b    { color: var(--acc2); }
.cell.more .arr { display: inline-block; transition: transform .15s; }
.cell.more:hover { background: color-mix(in srgb, var(--acc) 22%, transparent); }
.cell.more:hover .arr { transform: translateX(4px); }
.cell .rk       { font-style: normal; color: var(--acc); margin-right: 4px; }
.cell .st       { font-style: normal; font-weight: 600; font-size: 1em; color: var(--acc2); margin-left: 8px; white-space: nowrap; }
.gh-when        { font-size: .85em; }

.pager          { display: flex; justify-content: space-between; gap: 20px; margin-top: 26px; padding-top: 12px; border-top: 1px dashed var(--dim); }
.pager a        { text-decoration: none; }

/* contact: the PGP block reads as a terminal dump, not a boxed widget */
.doc.contact center     { text-align: left; }
.doc.contact .mail      { font-size: 1.3em; margin: 4px 0 18px; }
.doc.contact td.content { border: 0; }

/* a legacy table cell sizes to its widest pre, which is a 64 column PGP
 * block. unwrap the table so the pre scrolls inside the screen instead. */
.doc.contact table,
.doc.contact tbody,
.doc.contact tr,
.doc.contact td         { display: block; max-width: 100%; padding: 0; }
.doc td pre             { max-width: calc(100vw - 48px); }

/* ------------------------------------------------------------ live prompt */

.cmd.live       { display: flex; align-items: baseline; white-space: pre; scroll-margin-bottom: 120px; }
.live input     { font: inherit; color: var(--hi); background: transparent; border: 0; outline: 0; padding: 0; margin: 0; width: 1px; min-width: 1px; caret-color: transparent; text-shadow: inherit; }
.cursor         { display: inline-block; width: .62em; height: 1.1em; background: var(--fg); vertical-align: -3px; box-shadow: 0 0 8px var(--glow); animation: blink 1.1s steps(1) infinite; }
.live:focus-within .cursor { animation: none; }
.live .cursor.mid { mix-blend-mode: difference; box-shadow: none; }
.live .rs       { display: none; color: var(--dim); }
.live.rsearch .rs { display: inline; }
.live.rsearch .pfx { display: none; }
#out input.secret { font: inherit; width: 1px; min-width: 1px; padding: 0; margin: 0; border: 0; outline: 0; background: transparent; color: transparent; caret-color: transparent; }
#out .ln:focus-within .cursor { animation: none; }
.is-root .usr   { color: #ff5f6d !important; }
@keyframes blink { 50% { opacity: 0; } }
.hint           { margin-top: 2px; font-size: .8em; }
#out .ln        { white-space: pre-wrap; }
#out .cmd       { margin-top: 10px; }
#out a[data-cmd] { text-decoration: none; }
#out a[data-cmd]:hover { text-decoration: underline; }
#out .blk       { margin: 0; font: inherit; line-height: 1.25; overflow: hidden; }
#out .matrix    { color: var(--acc2); }
.o-err          { color: #ff6b6b; }
.o-dim          { color: var(--dim); text-shadow: none; }
.o-dir          { color: var(--acc); font-weight: 600; }
.o-x            { color: var(--acc2); }
.o-hit          { color: var(--hi); background: color-mix(in srgb, var(--acc) 35%, transparent); }
.o-inv          { background: var(--fg); color: var(--bg); }
.o-logo         { color: var(--acc); }
.cols           { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(var(--cw, 20ch), 100%), 1fr)); gap: 0 18px; white-space: normal; }
.cols span      { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.swatch         { display: inline-block; width: 2.2ch; height: 1em; vertical-align: -2px; }
.screen.cleared > :not(#out):not(.live):not(.hint) { display: none; }
.screen.panic   { filter: invert(1) hue-rotate(180deg); animation: shake .08s steps(2) infinite; }
@keyframes shake { 50% { transform: translate(2px, -1px); } }

/* ------------------------------------------------------------ tmux status bar */

.bar {
    position: sticky;
    bottom: 0;
    z-index: 6;
    display: flex;
    align-items: stretch;
    min-height: 44px;
    background: var(--bar);
    color: var(--barfg);
    font-weight: 600;
    font-size: 16px;
    padding: 0 12px;
    overflow-x: auto;
    white-space: nowrap;
    scrollbar-width: none;
}
.bar::-webkit-scrollbar { display: none; }
.bar a, .bar button {
    display: flex; align-items: center;
    color: var(--barfg); text-decoration: none; padding: 0 14px;
    font: inherit; background: none; border: 0; cursor: pointer; text-shadow: none;
}
.bar a:hover, .bar button:hover { background: color-mix(in srgb, var(--barfg) 18%, transparent); color: var(--barfg); }
.bar a.on       { background: var(--barfg); color: var(--bar); }
.bar-top        { position: relative; bottom: auto; border-radius: 22px 22px 0 0; }
html[data-theme="paper"] .bar-top { border-radius: 6px 6px 0 0; }
.bar .th        { gap: 8px; margin: 6px 4px; padding: 0 12px; border: 2px solid var(--barfg); border-radius: 999px; }
.bar .th .sw    { width: 18px; height: 18px; flex: none; }
.bar .th:hover  { background: var(--barfg); color: var(--bar); }
.bar .k         { margin: 6px 4px; padding: 0 12px; border: 2px solid var(--barfg); border-radius: 999px; }
.bar .k:hover   { background: var(--barfg); color: var(--bar); }
.mp             { display: none; }
html[data-mod="ctrl"] .mm { display: none; }
html[data-mod="ctrl"] .mp { display: inline; }

/* theme modal: reuses the palette overlay, cards drawn in their own theme */
.thm-box        { width: min(760px, calc(100vw - 24px)); }
.thm-h          { display: flex; justify-content: space-between; align-items: baseline; padding: 14px 18px; font-weight: 600; color: var(--hi); border-bottom: 1px solid color-mix(in srgb, var(--acc) 40%, transparent); }
.thm-h .dim     { font-weight: 400; font-size: .8em; }
.thm-grid       { display: grid; grid-template-columns: repeat(auto-fill, minmax(135px, 1fr)); gap: 10px; padding: 16px 18px 6px; }
.tc             { display: flex; flex-direction: column; gap: 6px; text-align: left; padding: 12px; border-radius: 8px; border: 2px solid transparent; background: var(--bg); color: var(--fg); font: inherit; font-size: 14px; cursor: pointer; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--acc) 40%, transparent); }
.tc:hover, .tc:focus-visible { border-color: var(--acc2); outline: none; }
.tc.on          { border-color: var(--acc); box-shadow: 0 0 0 3px color-mix(in srgb, var(--acc) 35%, transparent); }
.tc-p           { font-size: 12px; white-space: nowrap; overflow: hidden; }
.tc-u           { color: var(--acc); }
.tc-c           { color: var(--hi); }
.tc-bar         { height: 8px; border-radius: 3px; background: var(--bar); }
.tc b           { color: var(--hi); }
.tc-n           { color: var(--dim); font-size: 12px; }
.thm-fx         { display: flex; gap: 8px; align-items: center; padding: 6px 18px 12px; font-size: 14px; color: var(--fg); cursor: pointer; }
.bar .nv        { display: flex; align-items: stretch; }
.bar .r         { margin-left: auto; display: flex; align-items: stretch; }
.bar .r > span  { display: flex; align-items: center; padding: 0 12px; }

/* the squeeze, set by PA_fit() in shell.php: c2 drops hits, c1 folds the
 * sections into the hamburger and moves the tools left, c3 drops ⌘K. */
.bar .hb        { display: none; margin-left: auto; padding: 0 14px; }
.bar .hb i, .bar .hb i::before, .bar .hb i::after { display: block; width: 20px; height: 2px; background: currentColor; border-radius: 1px; }
.bar .hb i      { position: relative; }
.bar .hb i::before, .bar .hb i::after { content: ""; position: absolute; left: 0; }
.bar .hb i::before { top: -6px; }
.bar .hb i::after  { top: 6px; }
.bar.c1 .nv     { display: none; }
.bar.c1 .r      { margin-left: 0; }
.bar.c1 .hb     { display: flex; }
.bar.c2 .hits   { display: none !important; }
.bar.c3 .k      { display: none; }

/* close buttons on every overlay: phones have no esc key */
.x              { margin-left: auto; flex: none; width: 36px; height: 36px; display: grid; place-items: center; font: inherit; font-size: 18px; line-height: 1; color: var(--hi); background: none; border: 1px solid color-mix(in srgb, var(--acc) 45%, transparent); border-radius: 8px; cursor: pointer; }
.x:hover        { background: var(--acc); color: var(--barfg); }
.thm-h .x       { margin-left: 14px; align-self: center; }
.thm-h .dim     { margin-left: auto; }

/* the hamburger drawer */
.pal.menu       { justify-content: flex-end; align-items: stretch; padding: 0; }
.pal-box.menu-box { width: min(340px, 88vw); height: 100%; max-height: none; border-radius: 0; border-width: 0 0 0 1px; display: flex; flex-direction: column; overflow-y: auto; }
.menu .thm-h    { align-items: center; }
.mn             { display: flex; flex-direction: column; padding: 8px; }
.mn a, .mn button { display: flex; align-items: center; gap: 14px; min-height: 48px; padding: 0 14px; border-radius: 8px; font: inherit; font-size: 17px; color: var(--hi); background: none; border: 0; text-align: left; text-decoration: none; cursor: pointer; }
.mn a:hover, .mn button:hover { background: color-mix(in srgb, var(--acc) 22%, transparent); }
.mn a.on        { background: var(--acc); color: var(--barfg); }
.mn .mk         { width: 1.4em; color: var(--dim); font-size: .9em; }
.mn a.on .mk    { color: var(--barfg); }
.mn-x           { border-top: 1px solid color-mix(in srgb, var(--acc) 30%, transparent); }
.mn-x kbd       { margin-left: auto; font-size: .75em; }
.mn-x .dim      { margin-left: auto; font-size: .85em; }
.m-hits         { padding: 12px 14px; font-size: 14px; }

.crt            { margin-bottom: 24px; }

/* ------------------------------------------------------------ code colors
 * default mixes each hue toward the theme's text color so it stays tinted;
 * themes with a canonical syntax palette use it. */
html            { --tk-k: var(--acc2); --tk-s: color-mix(in srgb, #9ece6a 85%, var(--fg)); --tk-n: color-mix(in srgb, #ff9e64 85%, var(--fg)); --tk-f: color-mix(in srgb, #7dcfff 82%, var(--fg)); --tk-r: color-mix(in srgb, #f7768e 78%, var(--fg)); --tk-c: var(--dim); }
html[data-theme="amber"]     { --tk-k: #ffe2a0; --tk-s: #ffcc66; --tk-n: #ff8200; --tk-f: #fff3d6; --tk-r: #ffb347; }
html[data-theme="green"]     { --tk-k: #c8ffd9; --tk-s: #7dffab; --tk-n: #00e05a; --tk-f: #eafff0; --tk-r: #5cffa0; }
html[data-theme="dracula"]   { --tk-k: #ff79c6; --tk-s: #f1fa8c; --tk-n: #bd93f9; --tk-f: #50fa7b; --tk-r: #8be9fd; --tk-c: #6272a4; }
html[data-theme="gruvbox"]   { --tk-k: #fb4934; --tk-s: #b8bb26; --tk-n: #d3869b; --tk-f: #fabd2f; --tk-r: #83a598; --tk-c: #928374; }
html[data-theme="solarized"] { --tk-k: #859900; --tk-s: #2aa198; --tk-n: #d33682; --tk-f: #268bd2; --tk-r: #cb4b16; --tk-c: #586e75; }
html[data-theme="paper"]     { --tk-k: #7a2fe0; --tk-s: #2f7a3a; --tk-n: #b35900; --tk-f: #1d5fa8; --tk-r: #a3243b; --tk-c: #8b8272; }
pre.hl .tk-k    { color: var(--tk-k); font-weight: 600; }
pre.hl .tk-s    { color: var(--tk-s); }
pre.hl .tk-n    { color: var(--tk-n); }
pre.hl .tk-f    { color: var(--tk-f); }
pre.hl .tk-r    { color: var(--tk-r); }
pre.hl .tk-c    { color: var(--tk-c); font-style: italic; text-shadow: none; }
pre.hl .tk-d    { color: var(--dim); text-shadow: none; }

/* ------------------------------------------------------------ ⌘K palette */

.pal            { position: fixed; inset: 0; z-index: 50; background: rgba(0,0,0,.55); display: flex; justify-content: center; align-items: flex-start; padding-top: 12vh; backdrop-filter: blur(2px); }
.pal[hidden]    { display: none; }
.pal-box        { width: min(720px, calc(100vw - 24px)); background: var(--bg); border: 1px solid var(--acc); border-radius: 10px; box-shadow: 0 0 0 1px #000, 0 30px 80px rgba(0,0,0,.6), 0 0 40px var(--glow); overflow: hidden; }
.pal-in         { display: flex; gap: 10px; align-items: center; padding: 14px 18px; border-bottom: 1px solid color-mix(in srgb, var(--acc) 40%, transparent); }
.pal-in input   { flex: 1; font: inherit; font-size: 19px; color: var(--hi); background: transparent; border: 0; outline: 0; }
.pal ul         { list-style: none; margin: 0; padding: 6px; max-height: 52vh; overflow-y: auto; }
.pal li         { display: grid; grid-template-columns: 86px 1fr auto; gap: 12px; align-items: baseline; padding: 7px 12px; border-radius: 6px; cursor: pointer; }
.pal li .g      { color: var(--dim); font-size: .78em; text-transform: uppercase; letter-spacing: .08em; }
.pal li .d      { color: var(--dim); font-size: .8em; }
.pal li mark    { background: none; color: var(--acc2); text-decoration: underline; }
.pal li.sel     { background: var(--acc); color: var(--barfg); }
.pal li.sel .g, .pal li.sel .d, .pal li.sel mark { color: var(--barfg); }
.pal-ft         { padding: 9px 18px; font-size: 13px; border-top: 1px solid color-mix(in srgb, var(--acc) 25%, transparent); }
.pal-ft kbd     { margin: 0 3px 0 10px; }
.pal .none      { padding: 14px 12px; color: var(--dim); }

/* wall: centered broadcast notice */
.pal.wall       { align-items: center; padding-top: 0; z-index: 60; }
.wall-box       { width: min(640px, calc(100vw - 24px)); border-width: 2px; animation: wall-in .18s ease-out; }
.wall-h         { display: flex; align-items: center; gap: 12px; padding: 12px 14px 12px 18px; font-size: .8em; color: var(--dim); border-bottom: 1px solid color-mix(in srgb, var(--acc) 40%, transparent); }
.wall-f         { margin-top: 6px; }
.wall-h .x      { margin-left: auto; }
.wall-b         { color: var(--barfg); background: var(--acc); padding: 1px 8px; border-radius: 3px; font-weight: 600; }
.wall-m         { padding: 24px 22px; font-size: 1.35em; line-height: 1.45; color: var(--hi); white-space: pre-wrap; overflow-wrap: anywhere; max-height: 60vh; overflow-y: auto; text-shadow: 0 0 10px var(--glow); }
@keyframes wall-in { from { transform: scale(.94); opacity: 0; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .wall-box { animation: none; } }

/* /home/ritto: floating photo windows */
.pw             { position: fixed; width: min(360px, calc(100vw - 16px)); transform: rotate(var(--tilt, 0deg)); transition: transform .15s; background: var(--bg); border: 1px solid var(--acc); border-radius: 8px; box-shadow: 0 0 0 1px #000, 0 24px 60px rgba(0,0,0,.6), 0 0 30px var(--glow); overflow: hidden; }
.pw-h           { display: flex; align-items: center; gap: 10px; padding: 6px 6px 6px 12px; cursor: grab; touch-action: none; user-select: none; border-bottom: 1px solid color-mix(in srgb, var(--acc) 40%, transparent); font-size: 13px; color: var(--dim); }
.pw-h:active    { cursor: grabbing; }
.pw-t           { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pw-h .x        { width: 28px; height: 28px; font-size: 14px; }
.pw img         { display: block; width: 100%; height: auto; max-height: 70vh; object-fit: contain; background: #000; }
.pw-c           { padding: 7px 12px; font-size: 13px; color: var(--hi); }
.pw.held, .pw:hover { --tilt: 0deg; }
#out .o-img     { color: var(--acc2); }

#out .o-w0 { color: var(--acc2); }
#out .o-w1 { color: #ff8a3d; }
.ss             { position: fixed; inset: 0; z-index: 80; background: #000; color: var(--acc2); cursor: pointer; overflow: hidden; }
.ss pre         { margin: 0; padding: 4px; font-size: 15px; line-height: 17px; white-space: pre; text-shadow: 0 0 8px var(--glow); }
.boot           { position: fixed; inset: 0; z-index: 85; background: #000; color: var(--fg); padding: 24px 20px; overflow: hidden; transition: opacity .25s; }
.boot.gone      { opacity: 0; }
.boot pre       { margin: 0; font-size: 15px; line-height: 1.5; color: var(--fg); text-shadow: 0 0 6px var(--glow); }
.boot-skip      { position: fixed; bottom: 16px; right: 20px; color: var(--dim); font-size: 12px; }

/* ------------------------------------------------------------ small screens */

@media (max-width: 760px) {
    body        { font-size: 16px; }
    .crt        { margin: 0; border-radius: 0; min-height: 100vh; }
    .screen     { padding: 20px 16px 56px; }
    .logo       { font-size: calc((100vw - 32px) / 55); }
    .ls         { grid-template-columns: max-content 1fr; }
    .ls .perm   { display: none; }
    .tr .meta   { display: none; }
    .pal        { padding-top: 8px; }
    .pal li     { grid-template-columns: 1fr auto; }
    .pal li .g  { display: none; }
    .hint       { display: none; }
    .motd       { display: none; }
    .mfoot      { display: flex; }
    .fn .ls a   { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .post h1 .dim { white-space: nowrap; }
    .pal-in input { font-size: 16px; }
    .thm-h .dim { display: none; }
}

/* touch screens: keyboard legends are noise */
@media (hover: none) {
    .pal-ft     { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    .cursor     { animation: none; }
}