/* Win95 reader theme — semantic rules layered on top of base.css.

   Conventions:
   - Element selectors do most of the work; class hooks are reserved for
     window chrome (.reader-window, .reader-titlebar, .reader-content,
     .reader-statusbar) and content scopes (.reader-prose, .reader-post,
     .reader-post-list, .reader-blog-header).
   - Colors come from base.css's @theme tokens where possible
     (--color-base-100, --color-primary, --color-error). Hard-coded
     hexes are reserved for Win95-specific bevel layers.

   Dark mode:
   - This is a public, logged-out surface (BlogsWeb reader) — there is no
     `data-theme` attribute here (that requires a signed-in user's stored
     preference), so it can only react to `prefers-color-scheme` via the
     `color-scheme` declaration below.
   - This file is hand-authored and outside the Tailwind pipeline, so it
     does not `@import "base.css"` — the same light/dark hex pairs
     established there (see assets/css/base.css, T2) are restated locally
     as custom properties instead of importing them.
   - Titlebar navy (#000080) and its gradient accent stay identical in both
     themes, matching base.css's --color-titlebar and the reference
     screenshot (navy titlebars/selection are retained in dark mode).
*/

:root {
  color-scheme: light dark;

  /* Mirrors assets/css/base.css's palette (T2) — restated here since this
     file isn't part of the Tailwind build and can't `var()` off base.css. */
  --color-base-100: light-dark(#c0c0c0, #3f3f3f);
  --color-base-300: light-dark(#808080, #606060);
  --color-base-content: light-dark(#000000, #ffffff);
  --color-base-content-muted: light-dark(#404040, #a8a8a8);
  --color-base-field: light-dark(#ffffff, #000000);
  --border-light: light-dark(#ffffff, #808080);
  --border-dark: light-dark(#808080, #202020);
  --border-darkest: light-dark(#404040, #000000);
  --surface-sunken-alt: light-dark(#f0f0f0, #1a1a1a);

  /* Links */
  --color-primary: light-dark(#0000ee, #6fa8ff);
  --color-primary-hover: light-dark(#0000aa, #99c6ff);
  --color-visited: light-dark(#551a8b, #c58af9);

  /* Titlebar — navy stays navy in both themes */
  --color-titlebar: light-dark(#000080, #000080);
  --color-titlebar-accent: light-dark(#1084d0, #1084d0);
  --color-titlebar-content: light-dark(#ffffff, #ffffff);
}

/* -----------------------------------------------------------
   Typography defaults — what simple.css used to give us
   ----------------------------------------------------------- */

body {
  /* Tahoma/Verdana render crisply on every modern OS and visually
     pass for Win95-era system fonts. "MS Sans Serif" gets synthesized
     into a blurry mess on macOS/Linux, so we don't list it. */
  font-family: Tahoma, Verdana, Geneva, sans-serif;
  font-size: 15px;
  line-height: 1.55;
  color: var(--color-base-content);
  /* Wave gradient backdrop in the Win95 palette (navy → 1084d0 →
     light blue, with translucent silver/navy/blue waves layered on
     top). Pinned so it doesn't repeat on long reader pages. The SVG
     itself stays a single (light) palette — see the dark-mode overlay
     below rather than a second SVG. */
  background-color: var(--color-titlebar);
  background-image: url("./reader-bg-a4757ea8ea1deca16b1aec1ee6a16b5b.svg?vsn=d");
  background-repeat: no-repeat;
  background-position: center top;
  background-size: cover;
  background-attachment: fixed;
  min-height: 100vh;
}

@media (prefers-color-scheme: dark) {
  body {
    /* reader-bg.svg is a single fixed light-navy/blue wave illustration
       (see decision note below); rather than hand-authoring a second dark
       SVG, wash it with a translucent black layer so it reads as dimmed
       "desktop wallpaper" behind the window instead of a bright daytime
       sky. rgba(), not a theme hex, so it only applies in this block. */
    background-image: linear-gradient(rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0.45)), url("./reader-bg-a4757ea8ea1deca16b1aec1ee6a16b5b.svg?vsn=d");
  }
}

h1, h2, h3, h4, h5, h6 {
  font-weight: 700;
  line-height: 1.25;
  margin: 0.8em 0 0.4em;
}

h1 { font-size: 22px; }
h2 { font-size: 18px; }
h3 { font-size: 16px; }
h4 { font-size: 15px; }
h5, h6 { font-size: 15px; }

p, ul, ol, blockquote, pre, table, figure {
  margin: 0.6em 0;
}

ul, ol {
  padding-left: 1.6em;
}

ul {
  list-style: disc;
}

ol {
  list-style: decimal;
}

a {
  color: var(--color-primary);
  text-decoration: underline;
}

a:visited {
  color: var(--color-visited);
}

a:hover {
  color: var(--color-primary-hover);
}

a:focus-visible {
  outline: 1px dotted var(--color-base-content);
  outline-offset: 1px;
}

hr {
  border: 0;
  border-top: 1px solid var(--color-base-300);
  border-bottom: 1px solid var(--border-light);
  margin: 1em 0;
}

blockquote {
  border-left: 2px solid var(--color-base-300);
  padding: 0 0.8em;
  margin-left: 0;
  color: var(--color-base-content-muted);
}

code {
  font-family: "Courier New", Courier, monospace;
  background: var(--color-base-field);
  padding: 0 2px;
}

pre {
  background: var(--color-base-field);
  border: 1px solid;
  border-color: var(--border-dark) var(--border-light) var(--border-light) var(--border-dark);
  padding: 8px;
  overflow-x: auto;
}

pre code {
  background: transparent;
  padding: 0;
}

img {
  max-width: 100%;
  height: auto;
}

/* -----------------------------------------------------------
   Window chrome — wraps every reader page

   On narrow viewports the chrome (border, drop shadow, vertical
   margin, status bar) is dropped so content fills the screen and
   doesn't waste vertical space on chrome that adds nothing on
   mobile.
   ----------------------------------------------------------- */

.reader-window {
  max-width: 760px;
  margin: 24px auto;
  background: var(--color-base-100);
  border: 2px solid;
  border-color: var(--border-light) var(--border-dark) var(--border-dark) var(--border-light);
  box-shadow: 1px 1px 0 var(--border-darkest);
  padding: 2px;
}

@media (max-width: 640px) {
  .reader-window {
    margin: 0;
    border: 0;
    box-shadow: none;
    padding: 0;
  }
}

.reader-titlebar {
  background: linear-gradient(to right, var(--color-titlebar), var(--color-titlebar-accent));
  color: var(--color-titlebar-content);
  padding: 2px 4px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-weight: 700;
}

.reader-titlebar-name {
  padding: 0 4px;
}

.reader-titlebar-nav {
  display: flex;
  gap: 4px;
}

.reader-titlebar-nav a {
  color: var(--color-titlebar-content);
  text-decoration: none;
  padding: 1px 8px;
  font-weight: 400;
}

.reader-titlebar-nav a:hover,
.reader-titlebar-nav a:focus-visible {
  background: var(--color-titlebar-content);
  color: var(--color-titlebar);
  outline: none;
}

.reader-titlebar-nav a[aria-current="page"] {
  background: var(--color-titlebar-content);
  color: var(--color-titlebar);
}

.reader-content {
  background: var(--color-base-100);
  padding: 16px 20px;
  min-height: 200px;
}

.reader-statusbar {
  display: flex;
  justify-content: space-between;
  padding: 4px 8px;
  border-top: 1px solid var(--border-light);
  box-shadow: inset 0 1px 0 var(--border-dark);
  font-size: 13px;
}

@media (max-width: 640px) {
  .reader-statusbar {
    border-top: 1px solid var(--border-dark);
    box-shadow: none;
    padding: 6px 12px;
  }

  .reader-content {
    padding: 12px 14px;
  }
}

/* -----------------------------------------------------------
   Blog homepage
   ----------------------------------------------------------- */

.reader-blog-header {
  margin-bottom: 1em;
  padding-bottom: 0.6em;
  border-bottom: 1px solid var(--color-base-300);
}

.reader-blog-header h1 {
  margin: 0;
  font-size: 24px;
}

.reader-blog-header p {
  margin: 0.3em 0 0;
  color: var(--color-base-content-muted);
  font-style: italic;
}

/* -----------------------------------------------------------
   Post list — semantic <ul> of <article>
   ----------------------------------------------------------- */

.reader-post-list {
  margin-top: 2em;
}

.reader-post-list ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.reader-post-list li {
  margin-bottom: 8px;
}

.reader-post-list article {
  background: var(--color-base-field);
  border: 1px solid;
  border-color: var(--border-dark) var(--border-light) var(--border-light) var(--border-dark);
  padding: 8px 10px;
}

.reader-post-list h2,
.reader-post-list h3 {
  margin: 0 0 4px;
  font-size: 17px;
}

.reader-post-list time {
  font-size: 13px;
  color: var(--color-base-content-muted);
  display: block;
  margin-bottom: 4px;
}

.reader-post-list p {
  margin: 0;
}

/* -----------------------------------------------------------
   Single post / page
   ----------------------------------------------------------- */

.reader-post header,
.reader-page header {
  margin-bottom: 1em;
  padding-bottom: 0.6em;
  border-bottom: 1px solid var(--color-base-300);
}

.reader-post header h1,
.reader-page header h1 {
  margin: 0;
}

.reader-post header time {
  display: block;
  font-size: 13px;
  color: var(--color-base-content-muted);
  margin-top: 4px;
}

.reader-post-summary,
.reader-page-summary {
  font-style: italic;
  color: var(--color-base-content-muted);
  margin-top: 4px;
}

.reader-post footer {
  margin-top: 1.5em;
  padding-top: 0.6em;
  border-top: 1px solid var(--color-base-300);
  font-size: 13px;
}

/* -----------------------------------------------------------
   Markdown body — only adds what base.css/typography defaults miss
   ----------------------------------------------------------- */

.reader-prose img {
  border: 1px solid var(--color-base-300);
}

.reader-prose table {
  width: 100%;
  border-collapse: collapse;
  background: var(--color-base-field);
  border: 1px solid var(--color-base-300);
}

.reader-prose th,
.reader-prose td {
  border: 1px solid var(--color-base-100);
  padding: 4px 8px;
  text-align: left;
  vertical-align: top;
}

.reader-prose thead th {
  background: var(--color-base-100);
  border-bottom: 1px solid var(--color-base-300);
  font-weight: 700;
}

.reader-prose tbody tr:nth-child(even) {
  background: var(--surface-sunken-alt);
}

.reader-prose h2 {
  margin-top: 1.4em;
}

.reader-prose h3 {
  margin-top: 1.2em;
}