/* shell.slopped.site: one terminal, full screen (shell skill). Brand tokens; ink is the default theme, paper the
   teletype one, lamp the found one. Archivo Black only for the banner; everything typed is monospace. */
@font-face { font-family: "Archivo Black"; src: url(/fonts/archivo-black-latin.woff2) format("woff2"); font-weight: 400 1000; font-display: swap; }
@font-face { font-family: "Archivo Black Fallback"; src: local("Arial Bold"), local("Arial-BoldMT"), local("Helvetica Bold"), local("Helvetica-Bold"), local("Roboto Bold"), local("Roboto-Bold"), local("Noto Sans Bold"), local("NotoSans-Bold"); size-adjust: 112%; }
:root {
  --paper: #f4f1e8; --ink: #171815; --acid: #e3ff59; --muted: #6b6b62; --line: #d4d2c9; --orange: #ffa53d;
  --mono: ui-monospace, Menlo, Consolas, "Liberation Mono", "DejaVu Sans Mono", monospace;
  --app-h: 100dvh; --app-top: 0px;
  /* the terminal's own colours, per theme */
  --bg: var(--ink); --fg: var(--paper); --dim: #a9a89c; --dir: #9fd3ff; --lnk: #ffb8de; --hit-bg: var(--acid); --hit-fg: var(--ink);
  --prompt-bg: transparent; --prompt-fg: var(--acid); --caret: var(--acid); --err: #ff8f7a; --warn: var(--orange); --acidtext: var(--acid);
  --chip-bg: #24251f; --chip-line: #3a3b33;
}
.theme-paper {
  --bg: var(--paper); --fg: var(--ink); --dim: var(--muted); --dir: #1d4f91; --lnk: #8a1f5c; --hit-bg: var(--acid); --hit-fg: var(--ink);
  --prompt-bg: var(--acid); --prompt-fg: var(--ink); --caret: var(--ink); --err: #a3260f; --warn: #8a4b00; --acidtext: var(--ink);
  --chip-bg: #ebe7da; --chip-line: var(--line);
}
.theme-lamp {
  --bg: #1d150b; --fg: #ffd9a0; --dim: #b8956a; --dir: #ffe7b8; --lnk: #ffb36b; --hit-bg: var(--orange); --hit-fg: #1d150b;
  --prompt-bg: transparent; --prompt-fg: var(--orange); --caret: var(--orange); --err: #ff8f7a; --warn: #ffd36b; --acidtext: var(--orange);
  --chip-bg: #2a1f12; --chip-line: #4a3720;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--fg); }
body { overflow: hidden; font: 15px/1.45 var(--mono); -webkit-text-size-adjust: 100%; }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 8px; top: -60px; z-index: 50; padding: 10px 14px; background: var(--paper); color: var(--ink); border: 1px solid var(--ink); border-radius: 999px; font: 700 14px Arial, sans-serif; }
.skip:focus { top: 8px; }
:focus-visible { outline: 3px solid #728600; outline-offset: 3px; }
.theme-ink :focus-visible, .theme-lamp :focus-visible { outline-color: var(--acid); }

.app { position: fixed; left: 0; right: 0; top: var(--app-top); height: var(--app-h); display: flex; flex-direction: column; }

/* the bar: the masthead, the plain view, the theme. Paper in every theme, like the top of a sheet in a teletype. */
.bar { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 12px; height: 48px; padding: 0 max(16px, env(safe-area-inset-right)) 0 max(16px, env(safe-area-inset-left)); background: var(--paper); color: var(--ink); border-bottom: 1px solid var(--ink); font-family: Arial, Helvetica, sans-serif; }
.masthead { display: flex; align-items: center; gap: 12px; min-width: 0; }
.masthead .brand { display: flex; }
.masthead img { display: block; width: auto; height: 26px; }
.masthead .site-name { position: relative; padding-left: 13px; color: var(--ink); font-size: 16px; font-weight: 700; text-decoration: none; white-space: nowrap; }
.masthead .site-name::before { content: ""; position: absolute; left: 0; top: 50%; width: 1px; height: 22px; margin-top: -11px; background: var(--line); }
.tools { display: flex; align-items: center; gap: 6px; }
.tools a { display: inline-flex; align-items: center; min-height: 42px; padding: 0 10px; color: var(--ink); font-size: 14px; text-decoration: none; }
.tools a:hover { text-decoration: underline; }
.tools button { display: grid; place-items: center; width: 42px; height: 42px; padding: 0; border: 1px solid var(--ink); border-radius: 50%; background: transparent; color: var(--ink); cursor: pointer; }
.tools button:hover { background: var(--acid); }
html:not(.can-install) [data-install] { display: none !important; }

/* the terminal */
.term { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 14px max(16px, env(safe-area-inset-right)) 18px max(16px, env(safe-area-inset-left)); scrollbar-color: var(--chip-line) transparent; }
.log { min-width: 0; }
.l { min-height: 1.45em; white-space: pre-wrap; overflow-wrap: anywhere; word-break: break-word; }
.l .err { color: var(--err); }
.l .warn { color: var(--warn); }
.l .dim { color: var(--dim); }
.l .b { font-weight: 700; }
.l .dir { color: var(--dir); }
.l .lnk { color: var(--lnk); }
.l .acid { color: var(--acidtext); }
.l .hit { background: var(--hit-bg); color: var(--hit-fg); }
.l .today { background: var(--fg); color: var(--bg); }
.l .cmd { color: var(--fg); }
.l .ps { color: var(--prompt-fg); background: var(--prompt-bg); }
.banner { display: inline-block; margin: 2px 0 4px; font: 1000 clamp(44px, 12vw, 84px)/0.95 "Archivo Black", "Archivo Black Fallback", Arial, sans-serif; letter-spacing: -0.04em; font-synthesis: none; color: var(--acidtext); }
.l a { color: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.l a:hover { text-decoration-thickness: 2px; }
.l button.run { display: inline; margin: 0; padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; text-decoration: underline dotted; text-underline-offset: 3px; white-space: pre-wrap; }
.l button.run:hover { text-decoration: underline solid; }
.l button.run.dir { color: var(--dir); } .l button.run.lnk { color: var(--lnk); } .l button.run.dim { color: var(--dim); }
.pic { white-space: pre; line-height: 1; letter-spacing: 0; margin: 6px 0; font-size: 1em; }
.pic span { display: inline; }
.live { }

.line { display: flex; align-items: baseline; flex-wrap: wrap; column-gap: 0.6ch; }
.line[hidden] { display: none; }
.prompt { color: var(--prompt-fg); background: var(--prompt-bg); white-space: pre; flex: none; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
#cmd { flex: 1 1 8ch; min-width: 8ch; margin: 0; padding: 0; border: 0; outline: 0; background: transparent; color: var(--fg); caret-color: var(--caret); font: inherit; line-height: inherit; }
#cmd:focus-visible { outline: 0; }
.line:focus-within .prompt { text-decoration: none; }

/* suggestions and the phone key row (coarse pointers and narrow screens) */
.sugg, .keys { display: none; }
@media (pointer: coarse), (max-width: 760px) {
  body { font-size: 13.5px; }
  .bar { height: 44px; }
  .masthead img { height: 22px; }
  .tools a { padding: 0 8px; font-size: 13px; }
  .sugg { display: flex; flex: none; gap: 8px; overflow-x: auto; padding: 8px max(16px, env(safe-area-inset-left)); border-top: 1px solid var(--chip-line); scrollbar-width: none; }
  .sugg:empty { display: none; }
  .sugg::-webkit-scrollbar { display: none; }
  .sugg button { flex: none; min-height: 36px; padding: 0 12px; border: 1px solid var(--chip-line); border-radius: 999px; background: var(--chip-bg); color: var(--fg); font: inherit; cursor: pointer; }
  .keys { display: grid; flex: none; grid-template-columns: repeat(7, 1fr); gap: 6px; padding: 6px max(10px, env(safe-area-inset-right)) max(6px, env(safe-area-inset-bottom)) max(10px, env(safe-area-inset-left)); background: var(--chip-bg); border-top: 1px solid var(--chip-line); }
  .keys button { min-width: 0; height: 42px; padding: 0; border: 1px solid var(--chip-line); border-radius: 8px; background: var(--bg); color: var(--fg); font: 600 14px/1 var(--mono); cursor: pointer; touch-action: manipulation; }
  .keys button[aria-pressed="true"] { background: var(--acid); color: var(--ink); border-color: var(--acid); }
  .keys button:active { background: var(--chip-line); }
}
@media (max-width: 380px) { .tools a { display: none; } }

/* the pager (less, more) */
.pager { position: fixed; inset: var(--app-top) 0 auto 0; height: var(--app-h); z-index: 20; display: flex; flex-direction: column; background: var(--bg); color: var(--fg); }
.pager[hidden] { display: none; }
.pager-head, .pager-foot { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 48px; padding: 3px max(16px, env(safe-area-inset-right)) 3px max(16px, env(safe-area-inset-left)); background: var(--paper); color: var(--ink); }
.pager-head { border-bottom: 1px solid var(--ink); font-weight: 700; }
.pager-foot { border-top: 1px solid var(--ink); padding-bottom: max(3px, env(safe-area-inset-bottom)); }
.pager-head span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pager-btns { display: flex; gap: 6px; }
.pager button { min-height: 42px; padding: 0 14px; border: 1px solid var(--ink); border-radius: 999px; background: transparent; color: var(--ink); font: inherit; cursor: pointer; white-space: nowrap; }
.pager button:hover { background: var(--acid); }
.pager-body { flex: 1; min-height: 0; margin: 0; overflow-y: auto; padding: 14px max(16px, env(safe-area-inset-right)) 14px max(16px, env(safe-area-inset-left)); font: inherit; white-space: pre-wrap; overflow-wrap: anywhere; }

@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; } }