/* =========================================================
   style.css  —  "my inner world"
   Aesthetic: soft flower webcore  x  Windows 98  x  Lain
   ---------------------------------------------------------
   This ONE file styles every page. Diary pages load it with
   <link rel="stylesheet" href="../style.css"> and it still
   works, because the flower background url() below is
   resolved relative to THIS css file (the site root), not
   relative to whatever html page is showing it. neat trick.
   ========================================================= */


/* ---------- COLOR PALETTE (edit these to recolor everything) ---------- */
:root {
  --blue:        #c5d8f5;  /* sky / page background        */
  --chrome:      #c0c0c0;  /* win98 window grey            */
  --chrome-dk:   #808080;  /* bevel shadow                 */
  --chrome-lt:   #dfdfdf;  /* bevel highlight              */
  --black:       #0a0a0a;  /* deepest bevel line           */
  --navy:        #000080;  /* title bar left / lain blue   */
  --navy2:       #1084d0;  /* title bar right              */
  --red:         #d61f2b;  /* lain red / links & headings  */
  --wire:        #5566a4;  /* muted "wired" accent text    */
  --ink:         #1a1a1a;  /* body text                    */
  --box:         #ffffff;  /* white window interior        */
}

/* ---------- FONT STACKS ---------- */
/* the whole site is Comic Sans. both variables point at it, so
   every window, button, title and readout uses it. the fallbacks
   only kick in on the rare machine with no Comic Sans installed. */
:root {
  --ui:   "Comic Sans MS", "Comic Sans", "Chalkboard SE", "Comic Neue", cursive;
  --mono: "Comic Sans MS", "Comic Sans", "Chalkboard SE", "Comic Neue", cursive;
}


/* ================= PAGE ================= */
* { box-sizing: border-box; }

body {
  margin: 0;
  padding: 20px 16px 60px;      /* bottom room for the taskbar */
  min-height: 100vh;

  /* your spaced flower tile on soft blue */
  background-color: var(--blue);
  background-image: url("flower_tile.png");
  background-repeat: repeat;
  image-rendering: pixelated;

  color: var(--ink);
  font-family: var(--ui);
  font-size: 15px;
  line-height: 1.55;
}

/* faint CRT scanlines over the whole screen (very lain).
   pointer-events:none so it never blocks clicks. */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 50;
  background: repeating-linear-gradient(
    to bottom,
    rgba(0,0,0,0.05) 0px,
    rgba(0,0,0,0.05) 1px,
    transparent 1px,
    transparent 3px
  );
}


/* ================= HERO TITLE ================= */
.hero {
  text-align: center;
  margin: 6px 0 2px;
  font-family: var(--mono);
  font-weight: 700;
  font-size: clamp(30px, 6vw, 54px);
  color: var(--red);
  letter-spacing: 1px;
  text-shadow: 2px 2px 0 rgba(255,255,255,0.7);
}
.hero-sub {
  text-align: center;
  margin: 0 0 18px;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--wire);
}

/* blinking cursor "_"  */
.caret {
  color: var(--red);
  animation: blink 1s steps(1) infinite;
}
@keyframes blink { 50% { opacity: 0; } }


/* ================= WINDOWS (the win98 frame) ================= */
.window {
  background: var(--chrome);
  padding: 3px;
  /* the classic double bevel: light top-left, dark bottom-right */
  box-shadow:
    inset -1px -1px 0 var(--black),
    inset  1px  1px 0 var(--chrome-lt),
    inset -2px -2px 0 var(--chrome-dk),
    inset  2px  2px 0 #ffffff;
}

/* the blue gradient title bar */
.title-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 3px 3px 4px 6px;
  background: linear-gradient(90deg, var(--navy), var(--navy2));
  color: #fff;
  font-family: var(--ui);
  font-weight: bold;
  font-size: 12px;
}
.title-bar-text { display: flex; align-items: center; gap: 6px; }
.title-bar-text::before {                 /* tiny window icon */
  content: "";
  width: 13px; height: 13px;
  background: var(--red);
  box-shadow: inset -1px -1px 0 rgba(0,0,0,.4), inset 1px 1px 0 rgba(255,255,255,.6);
}

/* fake minimize / maximize / close buttons */
.title-bar-controls { display: flex; gap: 2px; }
.tb-btn {
  width: 16px; height: 14px;
  display: grid; place-items: center;
  background: var(--chrome);
  font: 9px/1 var(--ui);
  color: #000;
  box-shadow:
    inset -1px -1px 0 var(--black),
    inset  1px  1px 0 #fff,
    inset -2px -2px 0 var(--chrome-dk),
    inset  2px  2px 0 var(--chrome-lt);
}

/* the white interior where your content lives */
.window-body {
  background: var(--box);
  margin: 3px;
  padding: 16px 18px;
  /* sunken edge around the white area */
  box-shadow:
    inset  1px  1px 0 var(--chrome-dk),
    inset -1px -1px 0 #fff,
    inset  2px  2px 0 var(--black);
}

/* little sunken status strip at the bottom of a window */
.status-bar { display: flex; gap: 2px; margin: 0 3px 3px; }
.status-bar-field {
  flex: 1;
  padding: 3px 6px;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--wire);
  box-shadow: inset 1px 1px 0 var(--chrome-dk), inset -1px -1px 0 #fff;
}


/* ================= LAYOUT ================= */
.layout { max-width: 940px; margin: 0 auto; }

/* two windows side by side, like your reference */
.grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  align-items: start;
  margin-bottom: 18px;
}
.stack { margin-bottom: 18px; }   /* full-width windows */

@media (max-width: 720px) {
  .grid { grid-template-columns: 1fr; }  /* stack on phones */
}


/* ================= NAV BUTTONS ================= */
.nav { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-bottom: 20px; }

.btn {
  display: inline-block;
  padding: 5px 14px;
  background: var(--chrome);
  color: #000;
  font-family: var(--ui);
  font-size: 13px;
  text-decoration: none;
  cursor: pointer;
  border: none;
  box-shadow:
    inset -1px -1px 0 var(--black),
    inset  1px  1px 0 #fff,
    inset -2px -2px 0 var(--chrome-dk),
    inset  2px  2px 0 var(--chrome-lt);
}
.btn:hover { color: var(--navy); }
.btn:active {                 /* press = invert the bevel */
  box-shadow:
    inset  1px  1px 0 var(--black),
    inset -1px -1px 0 #fff,
    inset  2px  2px 0 var(--chrome-dk),
    inset -2px -2px 0 var(--chrome-lt);
  padding: 6px 13px 4px 15px;
}


/* ================= TEXT INSIDE WINDOWS ================= */
.window-body h2 {
  margin: 0 0 12px;
  font-family: var(--mono);
  color: var(--red);
  font-size: 1.6rem;
}
.window-body h3 { margin: 18px 0 6px; color: var(--wire); font-size: 1rem; }
.window-body p  { margin: 0 0 1em; }

/* links = red, dotted underline, invert on hover (very webcore) */
.window-body a, a.inline {
  color: var(--red);
  font-weight: bold;
  text-decoration: none;
  border-bottom: 1px dotted var(--red);
}
.window-body a:hover, a.inline:hover { background: var(--red); color: #fff; }
.window-body a:visited { color: #9a2f6f; border-bottom-color: #9a2f6f; }

ul { list-style: "🌸 "; padding-left: 1.4em; margin: 0 0 1em; }
li { margin-bottom: 5px; }

hr { border: none; border-top: 1px dashed var(--wire); margin: 16px 0; }

blockquote {
  margin: 12px 0; padding: 6px 14px;
  border-left: 4px solid var(--red);
  background: #fff2f5;
  font-style: italic;
}

/* a diary entry heading whose name "trails off..." */
.entry-title { font-family: var(--mono); color: var(--red); font-size: 1.3rem; margin: 0; }
.entry-date  { font-family: var(--mono); font-size: 11px; color: var(--wire); margin: 2px 0 14px; }
.trail { color: var(--chrome-dk); }

/* file-listing rows on the diary index */
.filelist { font-family: var(--mono); font-size: 14px; }
.filelist a {
  display: flex; justify-content: space-between; gap: 12px;
  padding: 4px 6px; border-bottom: 1px dotted var(--chrome-dk);
}
.filelist a:hover { background: var(--navy); color: #fff !important; }
.filelist .meta { color: var(--wire); }
.filelist a:hover .meta { color: #cbd8ff; }


/* ================= TASKBAR (the signature bit) ================= */
.taskbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
  height: 36px;
  display: flex; align-items: center; gap: 6px;
  padding: 3px 4px;
  background: var(--chrome);
  box-shadow: inset 0 2px 0 #fff, inset 0 1px 0 var(--chrome-lt);
  font-family: var(--ui);
}
.start-btn {
  display: flex; align-items: center; gap: 6px;
  padding: 3px 10px 3px 8px;
  font-weight: bold; font-size: 13px; color: #000;
  background: var(--chrome); cursor: pointer; border: none;
  box-shadow:
    inset -1px -1px 0 var(--black), inset 1px 1px 0 #fff,
    inset -2px -2px 0 var(--chrome-dk), inset 2px 2px 0 var(--chrome-lt);
}
.start-btn::before { content: "🌐"; }
.start-btn[aria-expanded="true"] {
  box-shadow:
    inset  1px  1px 0 var(--black), inset -1px -1px 0 #fff,
    inset  2px  2px 0 var(--chrome-dk), inset -2px -2px 0 var(--chrome-lt);
}
.tray {
  margin-left: auto;
  padding: 4px 10px;
  font-family: var(--mono); font-size: 12px; color: var(--ink);
  box-shadow: inset 1px 1px 0 var(--chrome-dk), inset -1px -1px 0 #fff;
}
.tray .dot { color: var(--red); }

/* start menu popup */
.start-menu {
  position: fixed; bottom: 36px; left: 4px; z-index: 61;
  width: 200px; display: none;
  background: var(--chrome);
  box-shadow:
    inset -1px -1px 0 var(--black), inset 1px 1px 0 #fff,
    inset -2px -2px 0 var(--chrome-dk), inset 2px 2px 0 var(--chrome-lt);
}
.start-menu.open { display: block; }
.start-menu-inner { display: flex; }
.start-menu-side {
  width: 26px;
  background: linear-gradient(var(--navy), var(--wire));
  writing-mode: vertical-rl; transform: rotate(180deg);
  color: #fff; font-family: var(--mono); font-weight: bold;
  text-align: center; padding: 8px 0; letter-spacing: 2px;
}
.start-menu ul { list-style: none; margin: 0; padding: 4px; flex: 1; }
.start-menu li { margin: 0; }
.start-menu a {
  display: block; padding: 6px 10px; color: #000; text-decoration: none;
  font-size: 13px; font-family: var(--ui);
}
.start-menu a:hover { background: var(--navy); color: #fff; }


/* ================= FOCUS / MOTION (quality floor) ================= */
:focus-visible { outline: 2px dotted var(--navy); outline-offset: 1px; }

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