/* ==================================================================
   TUI.CSS — shared DOS/text-mode design system
   Used by every page on the site. Tweak the variables below and
   the whole site follows.
   ================================================================== */

:root{
  --dos-blue:      #0000AA;   /* classic DOS blue */
  --dos-blue-deep: #000080;   /* deeper alt, used for insets */
  --dos-white:     #FFFFFF;
  --dos-gray:      #C0C0C0;   /* secondary text */
  --dos-yellow:    #FFFF00;   /* headers / selection */
  --dos-cyan:      #00FFFF;   /* links / subheads */
  --dos-red:       #FF5555;   /* warnings, sparingly */
  --dos-black:     #000000;

  --font-mono: 'IBM Plex Mono','Courier New',Courier,monospace;

  /* the character cell: everything scales off this one value */
  --cell: clamp(11px, 2.6vw, 16px);
  --line: 1.45;
  --border: 2px;
}

*,*::before,*::after{ box-sizing:border-box; }

html{ background:var(--dos-blue); }

body{
  margin:0;
  min-height:100vh;
  background:var(--dos-blue);
  color:var(--dos-white);
  font-family:var(--font-mono);
  font-size:var(--cell);
  line-height:var(--line);
  -webkit-font-smoothing:none;
  font-smooth:never;
  display:flex;
  flex-direction:column;
}

a,button{ font:inherit; border-radius:0; }
a{ color:var(--dos-cyan); text-decoration:underline; text-underline-offset:2px; }
a:hover,a:focus-visible{ background:var(--dos-cyan); color:var(--dos-blue); outline:none; text-decoration:none; }

/* ------------------------------------------------------------------
   MENU BAR
   ------------------------------------------------------------------ */
.tui-menubar{
  background:var(--dos-gray);
  color:var(--dos-black);
  padding:0 .6em;
  display:flex;
  gap:1.6em;
  flex-wrap:wrap;
  white-space:nowrap;
  user-select:none;
}
.tui-menubar span{ padding:.15em 0; }
.tui-menubar .key{ color:var(--dos-red); font-weight:700; }
.tui-menubar .clock{ margin-left:auto; }

/* ------------------------------------------------------------------
   DESKTOP
   ------------------------------------------------------------------ */
.tui-desktop{
  flex:1;
  padding:1.6em .8em 2.2em;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:1.4em;
}
.tui-desktop--center{ justify-content:center; }

/* ------------------------------------------------------------------
   PANEL
   ------------------------------------------------------------------ */
.tui-panel{
  position:relative;
  width:100%;
  max-width:64ch;
  border:var(--border) solid var(--dos-white);
  background:var(--dos-blue);
  padding:1.1em 1.4em 1.3em;
}
.tui-panel--wide{ max-width:82ch; }      /* long-form reading width */
.tui-panel--raised::after{
  content:"";
  position:absolute;
  inset:4px -6px -6px 4px;
  border-right:var(--border) solid var(--dos-black);
  border-bottom:var(--border) solid var(--dos-black);
  pointer-events:none;
}
.tui-panel--inset{
  border-color:var(--dos-gray);
  background:var(--dos-blue-deep);
  padding:.7em 1em;
}

.tui-titlebar{
  position:absolute;
  top:calc(var(--border) * -1);
  left:1.6em;
  transform:translateY(-50%);
  background:var(--dos-blue);
  color:var(--dos-yellow);
  font-weight:700;
  padding:0 .6em;
  white-space:nowrap;
  text-transform:uppercase;
  letter-spacing:.06em;
  max-width:calc(100% - 6em);
  overflow:hidden;
  text-overflow:ellipsis;
}
.tui-panel--inset .tui-titlebar{ background:var(--dos-blue-deep); color:var(--dos-gray); }

.tui-closebox{
  position:absolute;
  top:calc(var(--border) * -1);
  right:1.4em;
  transform:translateY(-50%);
  background:var(--dos-blue);
  color:var(--dos-gray);
  padding:0 .5em;
}

/* ------------------------------------------------------------------
   TEXT
   ------------------------------------------------------------------ */
.banner{
  color:var(--dos-yellow);
  font-weight:700;
  font-size:1.25em;
  letter-spacing:.18em;
  text-transform:uppercase;
  margin:0 0 .1em;
}
/* a real double rule — box-drawing glyphs leave gaps in most mono fonts */
.rule{
  height:4px;
  border-top:1px solid var(--dos-gray);
  border-bottom:1px solid var(--dos-gray);
  margin:.5em 0 1.1em;
}
.lede{ margin:0 0 .35em; color:var(--dos-white); }
.sub{ margin:0 0 1.4em; color:var(--dos-gray); }

/* long-form note pages */
.prose h1{
  color:var(--dos-yellow);
  font-size:1.25em;
  font-weight:700;
  letter-spacing:.1em;
  text-transform:uppercase;
  margin:0 0 .1em;
}
.prose h2{
  color:var(--dos-yellow);
  font-size:1em;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.05em;
  margin:2em 0 .2em;
  border-bottom:1px solid var(--dos-gray);
  padding-bottom:.2em;
}
.prose h3{
  color:var(--dos-cyan);
  font-size:1em;
  font-weight:700;
  margin:1.3em 0 .1em;
}
.prose h3::before{ content:"» "; color:var(--dos-gray); }
.prose p{ margin:0 0 .85em; }
.prose ul{ list-style:none; margin:0 0 .95em; padding:0; }
.prose li{ padding-left:2.2ch; text-indent:-2.2ch; margin-bottom:.3em; }
.prose li::before{ content:"■ "; color:var(--dos-yellow); }
.prose strong,.prose b{ color:var(--dos-yellow); font-weight:700; }
.prose em{ color:var(--dos-gray); font-style:normal; }
.prose .verse{ color:var(--dos-cyan); }

/* blinking cursor block */
.cursor{
  display:inline-block;
  width:.62em;
  height:1.05em;
  background:var(--dos-white);
  vertical-align:-.18em;
  margin-left:.15em;
  animation:blink 1s steps(1,end) infinite;
}
@keyframes blink{ 0%,49%{opacity:1} 50%,100%{opacity:0} }

/* ------------------------------------------------------------------
   BUTTONS — bracketed, invert on hover/focus, no easing
   ------------------------------------------------------------------ */
.tui-menu{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(21ch,1fr));
  gap:.15em .8em;
}
.tui-btn{
  display:block;
  width:100%;
  text-align:left;
  background:transparent;
  color:var(--dos-white);
  border:0;
  padding:.12em .3em;
  text-decoration:none;
  cursor:pointer;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.tui-btn .brk{ color:var(--dos-gray); }
.tui-btn .hot{ color:var(--dos-yellow); font-weight:700; }
.tui-btn:hover,.tui-btn:focus-visible{
  background:var(--dos-gray);
  color:var(--dos-black);
  outline:none;
}
.tui-btn:hover .brk,.tui-btn:focus-visible .brk,
.tui-btn:hover .hot,.tui-btn:focus-visible .hot{ color:var(--dos-black); }

.tui-btn--action{ color:var(--dos-yellow); font-weight:700; }
.tui-btn--action:hover,.tui-btn--action:focus-visible{ background:var(--dos-yellow); color:var(--dos-blue); }
.tui-btn--action:hover .brk,.tui-btn--action:focus-visible .brk{ color:var(--dos-blue); }

/* inline row of buttons at the foot of a note page */
.tui-actions{
  display:flex;
  flex-wrap:wrap;
  gap:.2em 1.5em;
  margin-top:2em;
  padding-top:.9em;
  border-top:1px solid var(--dos-gray);
}
.tui-actions .tui-btn{ width:auto; }

/* system readout */
.sysrow{
  display:flex;
  flex-wrap:wrap;
  gap:.1em 2ch;
  color:var(--dos-gray);
}
.sysrow span{ white-space:nowrap; }
.sysrow em{ color:var(--dos-yellow); font-style:normal; }


/* ------------------------------------------------------------------
   TYPEWRITER — applied by tui.js only; nothing is hidden without JS
   ------------------------------------------------------------------ */
.tw-hide{ display:none !important; }
.tw-skip{ color:var(--dos-black); }
.tw-caret{ margin-left:0; }

/* external link marker */
.tui-btn .ext{ color:var(--dos-gray); }


/* ------------------------------------------------------------------
   FORM CONTROLS — DOS input fields
   ------------------------------------------------------------------ */
.tui-field{ margin-bottom:1em; }
.tui-label{
  display:block;
  color:var(--dos-yellow);
  text-transform:uppercase;
  letter-spacing:.05em;
  margin-bottom:.15em;
}
.tui-label .req{ color:var(--dos-red); }
.tui-input,.tui-textarea{
  display:block;
  width:100%;
  font:inherit;
  color:var(--dos-white);
  background:var(--dos-blue-deep);
  border:1px solid var(--dos-gray);
  border-radius:0;
  padding:.3em .5em;
  caret-color:var(--dos-white);
}
.tui-textarea{ min-height:9em; resize:vertical; line-height:var(--line); }
.tui-input:focus,.tui-textarea:focus{
  outline:none;
  border-color:var(--dos-yellow);
  background:var(--dos-black);
}
.tui-input::placeholder,.tui-textarea::placeholder{ color:#8080c0; }
.tui-hint{ color:var(--dos-gray); margin:0 0 1.3em; }
.tui-honey{ position:absolute; left:-9999px; }

/* status lines */
.tui-status{ margin-top:1.1em; }
.tui-status .ok{ color:var(--dos-yellow); }
.tui-status .err{ color:var(--dos-red); }

/* ------------------------------------------------------------------
   STATUS BAR
   ------------------------------------------------------------------ */
.tui-statusbar{
  background:var(--dos-gray);
  color:var(--dos-black);
  padding:.15em .6em;
  display:flex;
  gap:1.4em;
  flex-wrap:wrap;
  white-space:nowrap;
  user-select:none;
}
.tui-statusbar b{ background:var(--dos-black); color:var(--dos-gray); padding:0 .35em; font-weight:400; }
.tui-statusbar .right{ margin-left:auto; }

/* ------------------------------------------------------------------
   OVERLAYS
   ------------------------------------------------------------------ */
#boot{
  position:fixed;
  inset:0;
  z-index:10;
  background:var(--dos-black);
  color:var(--dos-gray);
  padding:1.2em 1em;
  white-space:pre-wrap;
  overflow:hidden;
  cursor:pointer;
}
body.booted #boot{ display:none; }

.scanlines{
  position:fixed;
  inset:0;
  z-index:9;
  pointer-events:none;
  background:repeating-linear-gradient(
    to bottom,
    rgba(0,0,0,.14) 0px,
    rgba(0,0,0,.14) 1px,
    rgba(0,0,0,0) 1px,
    rgba(0,0,0,0) 3px);
}

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

@media (max-width:30em){
  .tui-menubar .clock{ display:none; }
  .tui-menu{ grid-template-columns:1fr; }
  .tui-panel{ padding:1em .9em 1.1em; }
  .tui-statusbar{ gap:.9em; }
  .tui-actions{ gap:.2em 1em; }
}