/* OpenShell / printed edition. The shell and its programs keep their native layout. */
:root {
  --comic-ink: #0d0a1f;
  --comic-paper: #f6dfe6;
  --comic-pink: #ff9ecf;
  --comic-orange: #ffb078;
  --comic-cyan: #6ef2ff;
  --identity-cap: 16px;
}

.start-links .command, .help-menu .command {
  display: inline-flex;
  align-items: center;
  min-width: 24px;
  min-height: 24px;
  text-decoration: none;
}
@media (pointer: coarse) {
  .start-links .command, .help-menu .command { min-width: 44px; min-height: 44px; }
}

body {
  background: var(--comic-ink);
}
.term {
  border: 1px solid var(--rule);
  box-shadow: none;
}
.bars { border-bottom: 0; }
.bar-1 {
  background: var(--comic-ink);
  border-bottom: 0;
  color: var(--comic-paper);
}
.bars::after {
  display: none;
}
.bar-actions a {
  border: 0;
  color: var(--comic-paper);
}
.bar-actions a:focus-visible { outline-color: var(--comic-paper); }

/* Faint print texture behind the ASCII; the lettering supplies its own ink edge. */
.ascii-banner { isolation: isolate; margin-top: 12px; margin-bottom: 24px; }
.ascii-banner--intro { animation: comic-print 600ms steps(8, end) both; }
@keyframes comic-print {
  from { clip-path: inset(-8px 100% -8px -8px); }
  to { clip-path: inset(-8px); }
}
.ascii { font-size: min(var(--identity-cap), calc((100vw - 76px) / 59 / .6)); }
@supports (container-type: inline-size) {
  .ascii { font-size: min(var(--identity-cap), calc(100cqw / 59 / .6)); }
}
.ascii-banner::before {
  content: '';
  position: absolute;
  z-index: -1;
  inset: -8px -5px;
  border: 0;
  background: radial-gradient(circle, #ff9ecf22 .8px, transparent 1px) 0 0 / 6px 6px;
  mask-image: linear-gradient(110deg, #000, transparent 90%);
  box-shadow: none;
  pointer-events: none;
}
.welcome-caption {
  width: fit-content;
  max-width: 100%;
  margin: 0 0 10px;
  padding: 2px 0;
  border: 0;
  background: none;
  color: var(--comic-paper);
  box-shadow: none;
}
.welcome-caption .ln:first-child { font-weight: 600; }
.welcome-caption a, .welcome-caption .command { color: var(--command); }
.welcome-caption a:focus-visible, .welcome-caption .command:focus-visible { outline-color: var(--comic-paper); }
.start-links, .help-menu { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 2ch; }

/* Program titles read as captions; the article remains a quiet text pane. */
.terminal-app__header, .view-header {
  border-bottom: 0;
  background: var(--comic-ink);
}
.terminal-app__header h1, .view-header h1 { color: var(--command); animation: comic-caption 160ms steps(3, end) backwards; }
@keyframes comic-caption {
  from { opacity: .6; transform: translateX(2px); text-shadow: -2px 0 var(--comic-paper); }
  to { opacity: 1; transform: none; text-shadow: none; }
}
.terminal-app__filter, .terminal-app__find { border-bottom: 0; }
.terminal-app__filter label, .terminal-app__find label { color: var(--meta); }
.terminal-app__filter input, .terminal-app__find input { border-bottom: 0; }

.terminal-app__list { padding: 6px 0; scroll-padding: 8px; }
.terminal-app__list li { margin-bottom: 2px; }
.terminal-app__list a { padding: 8px 19px; border: 1px solid transparent; }
.terminal-app__list [aria-selected="true"] {
  border-color: var(--comic-pink);
  background: var(--comic-pink);
  box-shadow: none;
}
.terminal-app__list [aria-selected="true"] .terminal-app__issue {
  background: transparent;
  color: var(--comic-ink);
}
.terminal-app__list [aria-selected="true"] .terminal-app__essay-title { font-weight: 600; }
.terminal-app__body { background: var(--comic-ink); }
.terminal-app__body .essay__body blockquote {
  border-left: 2px solid var(--comic-pink);
  box-shadow: none;
}
.terminal-app__body mark.is-current { background: var(--comic-orange); }
.terminal-app__footer {
  border-top: 1px solid var(--rule);
  background: var(--comic-ink);
}

/* Quiet keys retain a clear boundary and generous touch targets. */
.terminal-app button, .view-back, .slot, .key {
  border: 1px solid #926582;
  background: transparent;
  box-shadow: none;
  border-radius: 0;
  color: var(--command);
  transition: border-color 100ms linear, box-shadow 100ms steps(2, end);
}
.command { transition: color 100ms linear; }
@media (hover: hover) and (pointer: fine) {
  .terminal-app__list a:not([aria-selected="true"]):hover { background: #191029; }
  .terminal-app button:not(:disabled):hover, .view-back:hover, .slot:not(:disabled):hover, .key:not(:disabled):hover {
    border-color: var(--comic-pink);
    box-shadow: 2px 2px 0 var(--comic-pink);
  }
  .command:hover { color: var(--comic-paper); }
}
.terminal-app button:not(:disabled):active, .view-back:active, .slot:not(:disabled):active, .key:not(:disabled):active {
  background: var(--comic-pink);
  color: var(--comic-ink);
  box-shadow: none;
  transform: translate(1px, 1px);
}
.terminal-app button:disabled, .slot:disabled, .key:disabled {
  border-color: #604568;
  box-shadow: none;
  color: #777780;
  cursor: default;
}
.terminal-app button:focus-visible, .view-back:focus-visible, .slot:focus-visible, .key:focus-visible { outline: 1px solid var(--comic-pink); outline-offset: -3px; }
.slot.is-picked { border-color: var(--comic-pink); background: var(--comic-pink); color: var(--comic-ink); }
.slot.is-picked b { color: var(--comic-ink); }
.keybar { border-top: 1px solid var(--rule); background: var(--comic-ink); }

/* Two held cuts reveal a committed view; the window itself never moves. */
.panel-cut, .session-collapse {
  position: absolute;
  z-index: 5;
  inset: var(--terminal-bar-height) 0 0;
  overflow: hidden;
  background: var(--comic-ink);
  pointer-events: none;
}
.panel-cut { animation: comic-panel-cut 180ms steps(1, end) both; }
.panel-cut__word { position: absolute; color: var(--command); white-space: nowrap; }
@keyframes comic-panel-cut {
  0%, 44% { clip-path: inset(0); visibility: visible; }
  45%, 78% { clip-path: inset(0 0 52%); visibility: visible; }
  79%, 100% { clip-path: inset(0 0 100%); visibility: hidden; }
}
.term.is-closed .terminal { flex: 1 1 0; min-height: 0; display: grid; align-items: center; cursor: default; }
.session-end { display: flex; justify-content: center; }
.session-restart {
  display: inline-flex;
  align-items: center;
  gap: 0;
  width: min(48ch, 100%);
  min-height: 44px;
  padding: 0 1ch;
  color: var(--comic-pink);
  text-decoration: none;
  cursor: pointer;
}
.session-rule { flex: 1; height: 1px; background: currentColor; }
.session-caret { flex: none; width: 1ch; height: 1.2em; background: currentColor; animation: comic-end-cursor 1.1s steps(1, end) infinite; }
.session-restart:focus-visible { outline: 1px solid var(--comic-pink); outline-offset: 4px; }
@keyframes comic-end-cursor { 0%, 54% { opacity: 1; } 55%, 100% { opacity: 0; } }
.session-collapse { padding: 18px 20px 24px; transform-origin: center; animation: comic-session-fold 240ms steps(3, end) both; }
.session-collapse .terminal-write, .session-collapse .ascii-banner--intro { animation: none; }
@keyframes comic-session-fold {
  0%, 16% { transform: scaleY(1); opacity: 1; visibility: visible; }
  65% { transform: scaleY(.035); opacity: 1; visibility: visible; }
  85% { transform: scaleY(.003); opacity: 1; visibility: visible; }
  100% { transform: scaleY(.003); opacity: 0; visibility: hidden; }
}

@media (max-width: 600px) {
  :root { --identity-cap: 14px; }
  .term { border: 0; box-shadow: none; }
  .bar-actions a { min-width: 44px; min-height: 44px; }
  .ascii-banner { margin-top: 10px; margin-bottom: 22px; }
  .ascii-banner::before { inset: -6px -4px; }
  .session-collapse { padding: 14px 12px 20px; }
  .terminal-app__list a { padding: 8px 11px; }
  .terminal-app--picker .terminal-app__footer { flex-wrap: nowrap; }
  .terminal-app--picker .terminal-app__status { flex: 1 1 auto; }
  .terminal-app--picker .terminal-app__footer > button { flex: none; min-width: 6ch; }
  .terminal-app--reader .terminal-app__footer > button { flex: 1 1 0; }
  .terminal-app--reader .terminal-app__footer button { font-size: 14px; padding-inline: 6px; }
  .terminal-app--reader .terminal-app__status { font-size: 14px; line-height: 1.4; }
}

@media (max-width: 600px) and (max-height: 400px) and (orientation: landscape) {
  .terminal-app__footer { border-top-width: 1px; }
}

@media (prefers-reduced-motion: reduce) {
  .panel-cut, .session-collapse { display: none; animation: none; }
  .session-caret { animation: none; }
  .ascii-banner--intro, .terminal-app__header h1, .view-header h1 { animation: none; }
  .terminal-app button, .view-back, .slot, .key, .command { transition: none; }
  .terminal-app button:not(:disabled):active, .view-back:active, .slot:not(:disabled):active, .key:not(:disabled):active { transform: none; }
}

@media print {
  .panel-cut, .session-collapse { display: none; animation: none; }
  .session-caret { animation: none; }
  .ascii-banner--intro, .terminal-app__header h1, .view-header h1 { animation: none; }
  .terminal-app button, .view-back, .slot, .key, .command { transition: none; }
  body, .term, .bar-1, .terminal-app__header, .view-header, .terminal-app__body, .terminal-app__footer {
    background: #ffffff !important;
    box-shadow: none !important;
    border-color: #000000;
  }
  .ascii-banner::before { display: none; }
  .terminal-app__body .essay__body blockquote { border-left-color: #000000; box-shadow: none; }
  .welcome-caption {
    padding: 0;
    border: 0;
    background: none;
    box-shadow: none;
  }
}