/* 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.
*/

/* -----------------------------------------------------------
   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: #000;
  /* 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. */
  background-color: #000080;
  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;
}

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: #0000ee;
  text-decoration: underline;
}

a:visited {
  color: #551a8b;
}

a:hover {
  color: #0000aa;
}

a:focus-visible {
  outline: 1px dotted #000;
  outline-offset: 1px;
}

hr {
  border: 0;
  border-top: 1px solid #808080;
  border-bottom: 1px solid #fff;
  margin: 1em 0;
}

blockquote {
  border-left: 2px solid #808080;
  padding: 0 0.8em;
  margin-left: 0;
  color: #404040;
}

code {
  font-family: "Courier New", Courier, monospace;
  background: #fff;
  padding: 0 2px;
}

pre {
  background: #fff;
  border: 1px solid;
  border-color: #808080 #fff #fff #808080;
  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, #c0c0c0);
  border: 2px solid;
  border-color: #fff #808080 #808080 #fff;
  box-shadow: 1px 1px 0 #404040;
  padding: 2px;
}

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

.reader-titlebar {
  background: linear-gradient(to right, #000080, #1084d0);
  color: #fff;
  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: #fff;
  text-decoration: none;
  padding: 1px 8px;
  font-weight: 400;
}

.reader-titlebar-nav a:hover,
.reader-titlebar-nav a:focus-visible {
  background: #fff;
  color: #000080;
  outline: none;
}

.reader-titlebar-nav a[aria-current="page"] {
  background: #fff;
  color: #000080;
}

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

.reader-statusbar {
  display: flex;
  justify-content: space-between;
  padding: 4px 8px;
  border-top: 1px solid #fff;
  box-shadow: inset 0 1px 0 #808080;
  font-size: 13px;
}

@media (max-width: 640px) {
  .reader-statusbar {
    border-top: 1px solid #808080;
    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 #808080;
}

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

.reader-blog-header p {
  margin: 0.3em 0 0;
  color: #404040;
  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: #fff;
  border: 1px solid;
  border-color: #808080 #fff #fff #808080;
  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: #404040;
  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 #808080;
}

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

.reader-post header time {
  display: block;
  font-size: 13px;
  color: #404040;
  margin-top: 4px;
}

.reader-post-summary,
.reader-page-summary {
  font-style: italic;
  color: #404040;
  margin-top: 4px;
}

.reader-post footer {
  margin-top: 1.5em;
  padding-top: 0.6em;
  border-top: 1px solid #808080;
  font-size: 13px;
}

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

.reader-prose img {
  border: 1px solid #808080;
}

.reader-prose table {
  width: 100%;
  border-collapse: collapse;
  background: #fff;
  border: 1px solid #808080;
}

.reader-prose th,
.reader-prose td {
  border: 1px solid #c0c0c0;
  padding: 4px 8px;
  text-align: left;
  vertical-align: top;
}

.reader-prose thead th {
  background: #c0c0c0;
  border-bottom: 1px solid #808080;
  font-weight: 700;
}

.reader-prose tbody tr:nth-child(even) {
  background: #f4f4f4;
}

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

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