/* =====================================================================
   HELLO! This is style.css. It is the "clothes" of the website.

   The bones (index.html) say WHAT is on the page.
   This file says what everything LOOKS like: colors, sizes, spots.

   How to read a clothes rule:

       .window {            <- WHO gets dressed (everything in the "window" group)
         color: black;      <- WHAT they wear (black letters)
       }

   A dot (.) means a group name (class).
   A hash (#) means a name tag (id).
   ===================================================================== */


/* ---------------------------------------------------------------------
   1. THE PAINT BUCKETS (colors and fonts)

   Instead of writing the same color 50 times, we pour it into a bucket
   with a name, like --ink. Then everything says "use the --ink bucket".

   The magic: when the light turns off, we swap ALL the buckets at once.
   Everything changes color together. Easy!

   Want new colors? Change them HERE and only here.
   --------------------------------------------------------------------- */

/* LIGHTS ON. The "White Space" look. Clean white paper and black pencil. */
:root,
[data-theme="light"] {
  --bg: #FFFFFF;        /* the floor behind everything */
  --win: #FFFFFF;       /* the inside of the windows */
  --ink: #18171B;       /* the main pencil color for words and lines */
  --muted: #5C5A60;     /* a lighter pencil for less important words */
  --soft: #F1F1F0;      /* a very light grey, for the window's top strip */
  --faint: #D6D5D8;     /* faint dashed lines */
  --sel: #EAEAE8;       /* the color behind the story you picked */
  --shadow: #18171B;    /* the chunky shadow behind the windows */
  --prompt: #18171B;    /* the "guest@headspace" words */
  --path: #3F3D44;      /* folder and file names */
  --accent: #18171B;    /* the wiggly line under titles */
  --bar: #18171B;       /* the bottom strip */
  --bar-ink: #FFFFFF;   /* the words on the bottom strip */
  --err: #B3261E;       /* "uh oh" red for wrong commands */
  --glass: #FFFFFF;     /* the light bulb glass */
  --rays: #18171B;      /* the little shine lines (you can see them) */
  --star: #FFFFFF;      /* inside of the doodled star */
  --scratch: transparent; /* scratch marks are invisible in the light */

  /* Official stories use neat typewriter letters. */
  --body-font: "IBM Plex Mono", ui-monospace, "Courier New", monospace;
  --body-size: 1.0625rem;
  --body-lead: 1.75;
}

/* LIGHTS OFF. The black void. You are root now. */
[data-theme="dark"] {
  --bg: #08080A;
  --win: #111114;
  --ink: #E9E7E0;
  --muted: #A19E95;
  --soft: #1D1B22;
  --faint: #34323A;
  --sel: #2E1A1C;
  --shadow: #E0584F;
  --prompt: #B9A3F0;
  --path: #8CC8E0;
  --accent: #E0584F;
  --bar: #E0584F;
  --bar-ink: #111114;
  --err: #E0584F;
  --glass: #111114;
  --rays: transparent;   /* no shine when the light is off */
  --star: transparent;
  --scratch: #E0584F;    /* the scratches show up in red */

  /* Raw stories use the blocky pixel letters. Bigger, because pixel letters are small. */
  --body-font: "VT323", ui-monospace, "Courier New", monospace;
  --body-size: 1.625rem;
  --body-lead: 1.3;
}

/* These buckets never change. */
:root {
  --font-term: "VT323", ui-monospace, "Courier New", monospace;  /* terminal letters */
  --font-hand: "Gaegu", "Comic Sans MS", cursive;                 /* handwriting */
  /* A wobbly corner shape. It makes boxes look drawn by hand instead of by a robot. */
  --wobble: 18px 6px 16px 8px / 8px 16px 6px 18px;
  --wobble-big: 255px 15px 225px 15px / 15px 225px 15px 255px;
  --edge: 24px;          /* space between the windows and the edge of the screen */
  --bulb-space: 170px;   /* room on the right so the bulb does not cover the window */
}


/* ---------------------------------------------------------------------
   2. THE BASICS
   --------------------------------------------------------------------- */

/* Make every box measure its size the same easy way. */
*,
*::before,
*::after { box-sizing: border-box; }

html,
body {
  height: 100%;
  margin: 0;
}

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-term);
  font-size: 1.75rem;   /* pixel letters look tiny, so we make them big */
  line-height: 1.2;
  /* Makes letters look smooth on Macs. */
  -webkit-font-smoothing: antialiased;
  /*
    SPEED TRICK: we only fade the colors, nothing else.
    Fading colors is cheap for the computer, so it never feels laggy.
  */
  transition: background-color .35s ease, color .35s ease;
  overflow: hidden;     /* on big screens, the page itself does not scroll */
}

/* Paragraphs have no extra space by default. We add space where we want it. */
p { margin: 0; }

/* Buttons and inputs wear the same letters as everything else. */
button,
input { font: inherit; color: inherit; }

/* When you move around with the Tab key, you see a clear dashed box. Very important! */
:focus-visible {
  outline: 2px dashed var(--ink);
  outline-offset: 3px;
}

/* Less important words. */
.muted { color: var(--muted); }

/* The secret "skip" link. It hides above the screen until you press Tab. */
.skip-link {
  position: absolute;
  left: 12px;
  top: -60px;
  z-index: 20;
  padding: 8px 14px;
  background: var(--ink);
  color: var(--bg);
  text-decoration: none;
}
.skip-link:focus { top: 12px; }

.noscript {
  position: fixed;
  inset: auto 0 0 0;
  padding: 16px;
  text-align: center;
  background: var(--ink);
  color: var(--bg);
}

/* Things with "hidden" stay hidden. No arguing. */
[hidden] { display: none !important; }


/* ---------------------------------------------------------------------
   3. THE LIGHT BULB
   --------------------------------------------------------------------- */

.bulb {
  position: fixed;       /* stays in the corner, even if the page moves */
  top: 0;
  right: 40px;
  z-index: 10;           /* sits on top of everything */
  width: 110px;
  height: 180px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  /* The bulb swings from the ceiling, so it wiggles from its top middle. */
  transform-origin: 55px 0;
}
.bulb svg { display: block; width: 100%; height: 100%; }

/* Paint each piece of the bulb using the buckets. */
.bulb-line  { stroke: var(--ink); }
.bulb-rays  { stroke: var(--rays); transition: stroke .25s ease; }
.bulb-glass { fill: var(--glass); stroke: var(--ink); transition: fill .25s ease; }
.bulb-cap   { fill: var(--win); stroke: var(--ink); }

/* When you click, the brain adds "swing" and the bulb wiggles once. */
.bulb.swing { animation: swing .6s ease-out; }
@keyframes swing {
  0%   { transform: rotate(0); }
  25%  { transform: rotate(7deg); }
  50%  { transform: rotate(-5deg); }
  75%  { transform: rotate(2deg); }
  100% { transform: rotate(0); }
}

/* The handwritten note under the bulb. */
.bulb-note {
  position: fixed;
  top: 186px;
  right: 16px;
  z-index: 9;
  width: 150px;
  font-family: var(--font-hand);
  font-size: 1.375rem;
  line-height: 1.15;
  text-align: right;
  color: var(--muted);
  white-space: pre-line;  /* lets the note be on two lines */
  transform: rotate(3deg);
  pointer-events: none;   /* clicks go right through it */
}

/* The star and cloud in the bottom corner. */
.doodles {
  position: fixed;
  right: 18px;
  bottom: 26px;
  pointer-events: none;
}
.doodle-star    { fill: var(--star); stroke: var(--ink); }
.doodle-cloud   { fill: var(--soft); stroke: var(--ink); }
.doodle-scratch { stroke: var(--scratch); }


/* ---------------------------------------------------------------------
   4. WINDOWS (the boxes that look like computer windows)
   --------------------------------------------------------------------- */

.screen {
  position: fixed;
  inset: 0;              /* fill the whole screen */
}

.window {
  display: flex;
  flex-direction: column;  /* stack: top strip, middle, bottom strip */
  background: var(--win);
  border: 3px solid var(--ink);
  border-radius: var(--wobble);
  /* A chunky, flat shadow. Like a sticker. No blur, so it is cheap to draw. */
  box-shadow: 10px 10px 0 var(--shadow);
  overflow: hidden;
  transition: background-color .35s ease, border-color .35s ease, box-shadow .35s ease;
}

/* The top strip of each window. */
.titlebar {
  position: relative;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 52px;
  padding: 0 14px;
  background: var(--soft);
  border-bottom: 3px solid var(--ink);
  transition: background-color .35s ease;
}
/* The words in the middle of the top strip. */
.titlebar-text {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  font-size: 1.625rem;
  white-space: nowrap;
  pointer-events: none;
}
/* The three pretend window buttons. */
.dots { display: flex; gap: 8px; }
.dots i {
  width: 16px;
  height: 16px;
  border: 2.5px solid var(--ink);
  border-radius: 4px;
}
.dots i:last-child { background: var(--ink); }

/* The "cd ~" button. */
.chip {
  min-height: 44px;     /* big enough for a finger to tap */
  padding: 0 12px;
  border: 2px dashed var(--ink);
  border-radius: 6px;
  background: transparent;
  cursor: pointer;
  font-size: 1.625rem;
  white-space: nowrap;   /* keep "cd ~" on one line */
  position: relative;
  z-index: 1;
}
.chip:hover { background: var(--sel); }

/* The bits of the prompt, like "guest@headspace:~$". */
.p-user { color: var(--prompt); }
.p-path { color: var(--path); }


/* ---------------------------------------------------------------------
   5. HOME SCREEN (the terminal you can type in)
   --------------------------------------------------------------------- */

#home {
  display: grid;
  place-items: center;    /* put the window right in the middle */
  padding: var(--edge);
}

.window--home {
  width: min(860px, 100%);
  height: min(600px, calc(100dvh - 180px));
  font-size: 1.875rem;
}

/* The terminal body. It can scroll if you type a LOT. */
.term {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 22px 34px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  cursor: text;           /* the mouse becomes a typing line */
  scrollbar-width: thin;
}
.spacer { height: 10px; flex: 0 0 auto; }

/* Every line the terminal prints. "pre-wrap" keeps the spaces you typed. */
.line { white-space: pre-wrap; word-break: break-word; }
.line.err { color: var(--err); }
.line.muted { color: var(--muted); }

/* A row with "notebook/" and "README.txt" side by side. */
.ls-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 36px;
}

/* The clickable "notebook/" folder. */
.folder {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  margin-left: -8px;
  padding: 4px 14px 4px 8px;
  border: 2.5px solid var(--ink);
  border-radius: var(--wobble-big);
  background: var(--sel);
  color: var(--path);
  cursor: pointer;
}
.folder:hover { background: var(--soft); }
.folder svg path:first-child { fill: var(--win); }
.folder svg path { stroke: var(--ink); }

/* The line where you type. */
.prompt-line {
  display: flex;
  align-items: center;
}
/* Keep "guest@headspace:~$" on one line, no matter what. */
.prompt { white-space: nowrap; flex: 0 0 auto; }
.term-input {
  flex: 1 1 auto;
  min-width: 0;
  margin-left: 12px;
  padding: 0 0 2px;
  border: 0;
  border-bottom: 2px dashed var(--faint);
  background: transparent;
  caret-color: var(--ink);   /* the blinking typing line */
  line-height: 1.2;
}
.term-input::placeholder { color: var(--muted); opacity: .8; }
/* The typing line already shows where you are, so no extra box around it. */
.term-input:focus { outline: none; border-bottom-color: var(--ink); }

/* The handwritten hint under the home window. */
.hint {
  position: fixed;
  left: 50%;
  bottom: max(24px, calc(50vh - 380px));
  transform: translateX(-400px) rotate(-2deg);
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-family: var(--font-hand);
  font-size: 1.625rem;
  color: var(--muted);
  pointer-events: none;
}
.hint svg path { stroke: var(--ink); }
.hint span { padding-top: 16px; }


/* ---------------------------------------------------------------------
   6. NOTEBOOK SCREEN (list on the left, story on the right)
   --------------------------------------------------------------------- */

.window--reader {
  position: absolute;
  top: 48px;
  left: 40px;
  right: var(--bulb-space);
  bottom: 40px;
}

.panes {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;           /* left and right, side by side */
}

/* LEFT side: the list of files. */
.files {
  flex: 0 0 360px;
  overflow-y: auto;
  padding: 22px 18px;
  border-right: 3px dashed var(--faint);
  scrollbar-width: thin;
}
.files-cmd { font-size: 1.625rem; padding: 0 8px 8px; }

.file-list {
  list-style: none;        /* no dots in front */
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* One story in the list. */
.file {
  display: flex;
  flex-direction: column;
  gap: 2px;
  width: 100%;
  padding: 8px 12px;
  border: 2px solid transparent;
  border-radius: 10px 4px 12px 4px / 4px 12px 4px 10px;
  background: transparent;
  text-align: left;
  cursor: pointer;
}
.file:hover { background: var(--soft); }
.file-name { font-size: 1.625rem; line-height: 1.1; color: var(--path); overflow-wrap: anywhere; }
.file-title { font-size: 1.3125rem; line-height: 1.1; color: var(--muted); padding-left: 22px; }

/* The story you picked gets a box around it. */
.file[aria-current="true"] {
  background: var(--sel);
  border-color: var(--ink);
}
.file[aria-current="true"] .file-name { color: var(--ink); }

.scribble {
  margin-top: 14px;
  padding-left: 10px;
  font-family: var(--font-hand);
  font-size: 1.375rem;
  color: var(--muted);
  transform: rotate(-2deg);
}

/* RIGHT side: the story. It scrolls by itself. */
.reading {
  flex: 1 1 auto;
  min-width: 0;
  overflow-y: auto;
  padding: 26px 56px 40px;
  scrollbar-width: thin;
  outline: none;
}

.post {
  max-width: 700px;          /* short lines are easier to read */
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.post-cmd { font-size: 1.625rem; }
.post-meta { font-size: 1.375rem; }
.post-title {
  margin: 0;
  font-size: clamp(2.5rem, 4vw, 3.75rem);  /* grows and shrinks with the screen */
  font-weight: 400;
  line-height: 1;
  text-wrap: balance;        /* keeps title lines even */
}
.post-dek { font-size: 1.625rem; color: var(--muted); }
.squiggle path { stroke: var(--accent); }

/* The story words themselves. */
.post-body {
  display: flex;
  flex-direction: column;
  gap: 16px;
  font-family: var(--body-font);
  font-size: var(--body-size);
  line-height: var(--body-lead);
}
.post-body h2 {
  margin: 12px 0 0;
  font-family: var(--font-term);
  font-size: 2rem;
  font-weight: 400;
}
.post-body pre {
  margin: 0;
  padding: 14px 16px;
  overflow-x: auto;          /* long code scrolls sideways inside its box */
  border: 2px dashed var(--faint);
  border-radius: 8px;
  background: var(--soft);
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: .9375rem;
  line-height: 1.6;
}
.post-body blockquote {
  margin: 0;
  padding-left: 18px;
  border-left: 3px solid var(--ink);
  color: var(--muted);
}
.flip-hint { font-size: 1.5rem; padding-top: 10px; }

/* The little blinking block at the end, like a real terminal. */
.cursor {
  display: inline-block;
  width: 13px;
  height: 24px;
  margin-left: 8px;
  vertical-align: -3px;
  background: var(--ink);
  animation: blink 1.1s steps(1) infinite;
}
@keyframes blink { 50% { opacity: 0; } }

/* The strip at the bottom of the notebook. */
.statusbar {
  flex: 0 0 auto;
  display: flex;
  justify-content: space-between;
  gap: 16px;
  min-height: 40px;
  align-items: center;
  padding: 0 16px;
  background: var(--bar);
  color: var(--bar-ink);
  font-size: 1.5rem;
  white-space: nowrap;
  overflow: hidden;
  transition: background-color .35s ease, color .35s ease;
}


/* ---------------------------------------------------------------------
   7. SMALLER SCREENS (tablets and phones)
   When the screen is skinny, we move things around so they still fit.
   --------------------------------------------------------------------- */

@media (max-width: 900px) {
  :root { --bulb-space: 24px; }

  /* The page can scroll now, like a normal phone page. */
  body { overflow: auto; }
  .screen { position: static; min-height: 100dvh; }

  /* A smaller bulb, so it does not cover things. */
  .bulb { width: 66px; height: 108px; right: 12px; transform-origin: 33px 0; }
  .bulb-note { display: none; }
  .doodles { display: none; }

  #home { padding: 120px 22px 40px 12px; place-items: start center; }
  .window--home { height: min(560px, calc(100dvh - 170px)); font-size: 1.5rem; }
  .term { padding: 18px 18px; }
  .hint { position: static; transform: rotate(-2deg); margin-top: 18px; justify-self: start; }

  /* The notebook window stops floating and just sits on the page. */
  #reader { padding: 110px 22px 28px 12px; } /* extra room on the right for the shadow */
  .window--reader { position: relative; inset: auto; min-height: calc(100dvh - 140px); }
  .titlebar-text { position: static; transform: none; font-size: 1.25rem; overflow: hidden; text-overflow: ellipsis; }

  /* List on top, story underneath. */
  .panes { flex-direction: column; }
  .files {
    flex: 0 0 auto;
    max-height: 260px;
    border-right: 0;
    border-bottom: 3px dashed var(--faint);
  }
  .scribble { display: none; }
  .reading { overflow: visible; padding: 22px 20px 32px; }
  .statusbar { font-size: 1.25rem; }
  .statusbar > span:last-child { display: none; }
}


/* ---------------------------------------------------------------------
   8. BE KIND TO EYES AND TUMMIES
   Some people get dizzy from moving things. Their computer tells us.
   If it does, we stop the wiggles and the fades.
   --------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }
}