/**
 * Windows 95 Retro Base Styles
 * Reset, normalize, typography, and foundational styles
 */

/* ========================================
   Reset & Normalize for Retro Context
   ======================================== */

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

/* Remove default margins and paddings */
body.retro-mode {
  margin: 0;
  padding: 0;
  font-family: var(--font-system);
  font-size: var(--font-size-normal);
  color: var(--color-text);
  background-color: var(--win95-desktop-teal);
  overflow: hidden;
  line-height: var(--line-height-normal);
  -webkit-font-smoothing: none;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeSpeed;
}

/* Prevent text selection on UI elements by default */
body.retro-mode {
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}

/* Allow text selection in content areas */
.retro-content,
.retro-editor,
.retro-text-area,
textarea,
input[type="text"],
input[type="search"] {
  user-select: text;
  -webkit-user-select: text;
  -moz-user-select: text;
  -ms-user-select: text;
}

/* ========================================
   Typography Base
   ======================================== */

/* Headings, and every other rule below down to `abbr[title]`: excluded
   from `.preview-content` via :not() - that's rendered markdown, and must
   be styled entirely by the chosen theme (css/themes/*.css) so it matches
   the PDF preview iframe, which never loads this stylesheet at all (see
   PagedPreviewRenderer.js). Left unscoped, whichever CSS property a theme
   doesn't itself redeclare (e.g. a plain `border` shorthand's untouched
   sides) was falling through to these retro defaults instead - visible
   only in the simple preview, one more way themes drifted between the two. */
h1:not(.preview-content *),
h2:not(.preview-content *),
h3:not(.preview-content *),
h4:not(.preview-content *),
h5:not(.preview-content *),
h6:not(.preview-content *) {
  margin: var(--spacing-md) 0;
  font-family: var(--font-system);
  font-weight: bold;
  line-height: var(--line-height-tight);
  color: var(--color-text);
}

h1:not(.preview-content *) { font-size: var(--font-size-heading); }
h2:not(.preview-content *) { font-size: var(--font-size-large); }
h3:not(.preview-content *) { font-size: var(--font-size-normal); }
h4:not(.preview-content *), h5:not(.preview-content *), h6:not(.preview-content *) { font-size: var(--font-size-normal); }

/* Paragraphs */
p:not(.preview-content *) {
  margin: var(--spacing-md) 0;
  line-height: var(--line-height-normal);
}

/* Links */
a:not(.preview-content *) {
  color: var(--win95-blue);
  text-decoration: underline;
  cursor: pointer;
}

a:not(.preview-content *):hover {
  color: var(--win95-blue-light);
}

a:not(.preview-content *):visited {
  color: #551a8b; /* Classic visited link purple */
}

/* Code
   :not(.markdown-editor-highlight) additionally excludes the raw-editor's
   syntax-highlight overlay (a <pre>, but outside .preview-content so the
   first :not() alone doesn't catch it): that element must stay pixel-
   identical to the real <textarea> behind it (see editor-highlighting.css),
   and this generic reset's font-size/margin/padding otherwise wins by
   specificity over editor-highlighting.css's single-class selector,
   silently desyncing the overlay from the textarea it's supposed to mirror. */
code:not(.preview-content *),
pre:not(.preview-content *):not(.markdown-editor-highlight) {
  font-family: var(--font-mono);
  font-size: var(--font-size-normal);
}

code:not(.preview-content *) {
  background-color: var(--win95-gray-light);
  padding: 1px 3px;
  border: 1px solid var(--win95-gray-dark);
}

pre:not(.preview-content *):not(.markdown-editor-highlight) {
  background-color: var(--win95-white);
  border: var(--border-width) solid var(--win95-gray-dark);
  padding: var(--spacing-md);
  overflow-x: auto;
  white-space: pre;
  margin: var(--spacing-md) 0;
}

pre:not(.preview-content *):not(.markdown-editor-highlight) code {
  background: none;
  border: none;
  padding: 0;
}

/* Lists */
ul:not(.preview-content *), ol:not(.preview-content *) {
  margin: var(--spacing-md) 0;
  padding-left: var(--spacing-xl);
}

li:not(.preview-content *) {
  margin: var(--spacing-xs) 0;
}

/* ========================================
   Focus States (Dotted Outline)
   ======================================== */

button:focus,
a:focus,
input:focus,
textarea:focus,
select:focus,
.retro-focusable:focus {
  outline: 1px dotted var(--win95-black);
  outline-offset: -4px;
}

/* Remove focus outline for mouse users */
button:focus:not(:focus-visible),
a:focus:not(:focus-visible),
input:focus:not(:focus-visible) {
  outline: none;
}

/* ========================================
   Selection Styles
   ======================================== */

::selection {
  background-color: var(--win95-highlight);
  color: var(--win95-highlight-text);
}

::-moz-selection {
  background-color: var(--win95-highlight);
  color: var(--win95-highlight-text);
}

/* ========================================
   Disabled State
   ======================================== */

.disabled,
[disabled],
.retro-disabled {
  color: var(--win95-text-disabled);
  text-shadow: 1px 1px 0px var(--win95-white);
  cursor: default;
  pointer-events: none;
}

/* ========================================
   Hidden Elements
   ======================================== */

.retro-hidden {
  display: none !important;
}

.retro-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ========================================
   Utility Classes - Display
   ======================================== */

.retro-flex {
  display: flex;
}

.retro-inline-flex {
  display: inline-flex;
}

.retro-block {
  display: block;
}

.retro-inline-block {
  display: inline-block;
}

/* ========================================
   Utility Classes - No Select
   ======================================== */

.no-select {
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}

/* ========================================
   Pixelated/Sharp Rendering
   ======================================== */

.pixelated,
.retro-pixelated {
  image-rendering: pixelated;
  image-rendering: -moz-crisp-edges;
  image-rendering: crisp-edges;
}

/* ========================================
   Cursors
   ======================================== */

.retro-cursor-default {
  cursor: default;
}

.retro-cursor-pointer {
  cursor: pointer;
}

.retro-cursor-move {
  cursor: move;
}

.retro-cursor-text {
  cursor: text;
}

.retro-cursor-wait {
  cursor: wait;
}

.retro-cursor-not-allowed {
  cursor: not-allowed;
}

/* ========================================
   Scrollbar Styles (Webkit)
   ======================================== */

.retro-scrollable::-webkit-scrollbar {
  width: var(--scrollbar-width);
  height: var(--scrollbar-width);
  background: var(--color-surface);
}

.retro-scrollable::-webkit-scrollbar-track {
  background: var(--win95-white);
  border: var(--border-thin) solid var(--color-border-dark);
}

.retro-scrollable::-webkit-scrollbar-thumb {
  background: var(--color-surface);
  border: var(--border-thin) solid;
  border-color: var(--border-light) var(--border-dark) var(--border-dark) var(--border-light);
}

.retro-scrollable::-webkit-scrollbar-thumb:hover {
  background: var(--win95-gray-light);
}

.retro-scrollable::-webkit-scrollbar-thumb:active {
  background: var(--win95-gray-dark);
}

.retro-scrollable::-webkit-scrollbar-button {
  background: var(--color-surface);
  border: var(--border-thin) solid;
  border-color: var(--border-light) var(--border-dark) var(--border-dark) var(--border-light);
  width: var(--scrollbar-button-size);
  height: var(--scrollbar-button-size);
}

.retro-scrollable::-webkit-scrollbar-button:hover {
  background: var(--win95-gray-light);
}

.retro-scrollable::-webkit-scrollbar-button:vertical:decrement {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"><path d="M8 6 L4 10 L12 10 Z" fill="%23000000"/></svg>');
  background-repeat: no-repeat;
  background-position: center;
}

.retro-scrollable::-webkit-scrollbar-button:vertical:increment {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"><path d="M8 10 L4 6 L12 6 Z" fill="%23000000"/></svg>');
  background-repeat: no-repeat;
  background-position: center;
}

.retro-scrollable::-webkit-scrollbar-button:horizontal:decrement {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"><path d="M6 8 L10 4 L10 12 Z" fill="%23000000"/></svg>');
  background-repeat: no-repeat;
  background-position: center;
}

.retro-scrollable::-webkit-scrollbar-button:horizontal:increment {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"><path d="M10 8 L6 4 L6 12 Z" fill="%23000000"/></svg>');
  background-repeat: no-repeat;
  background-position: center;
}

/* ========================================
   Image Handling
   ======================================== */

img:not(.preview-content *) {
  max-width: 100%;
  height: auto;
  display: block;
}

/* ========================================
   HR Separator
   ======================================== */

hr:not(.preview-content *) {
  border: none;
  border-top: var(--border-thin) solid var(--win95-gray-dark);
  border-bottom: var(--border-thin) solid var(--win95-white);
  margin: var(--spacing-md) 0;
  height: 2px;
}

/* ========================================
   Tables
   ======================================== */

table:not(.preview-content *) {
  border-collapse: collapse;
  width: 100%;
  background: var(--win95-white);
  border: var(--border-width) solid;
  border-color: var(--border-sunken-light) var(--border-sunken-dark)
                var(--border-sunken-dark) var(--border-sunken-light);
}

th:not(.preview-content *), td:not(.preview-content *) {
  padding: var(--spacing-sm) var(--spacing-md);
  text-align: left;
  border: 1px solid var(--win95-gray-dark);
}

th:not(.preview-content *) {
  background: var(--win95-gray);
  font-weight: bold;
  border: var(--border-thin) solid;
  border-color: var(--border-light) var(--border-dark)
                var(--border-dark) var(--border-light);
}

/* ========================================
   Fieldset & Legend
   ======================================== */

fieldset {
  border: var(--border-width) groove var(--win95-button-shadow);
  padding: var(--spacing-md);
  margin: var(--spacing-md) 0;
  background-color: var(--win95-gray);
}

legend {
  font-weight: bold;
  padding: 0 var(--spacing-sm);
  color: var(--win95-black);
  background: var(--win95-gray);
}

/* ========================================
   Blockquote
   ======================================== */

blockquote:not(.preview-content *) {
  margin: var(--spacing-md) 0;
  padding: var(--spacing-md);
  border-left: 4px solid var(--win95-gray-dark);
  background: var(--win95-gray-light);
  font-style: italic;
}

/* ========================================
   Keyboard Key
   ======================================== */

kbd:not(.preview-content *) {
  display: inline-block;
  padding: 2px 6px;
  font-family: var(--font-system);
  font-size: var(--font-size-small);
  background: var(--win95-gray);
  border: var(--border-thin) solid;
  border-color: var(--border-light) var(--border-dark)
                var(--border-dark) var(--border-light);
  border-radius: 2px;
  box-shadow: var(--shadow-button);
}

/* ========================================
   Mark/Highlight
   ======================================== */

mark:not(.preview-content *) {
  background-color: yellow;
  color: var(--win95-black);
  padding: 1px 2px;
}

/* ========================================
   Details/Summary
   ======================================== */

details:not(.preview-content *) {
  border: var(--border-width) solid;
  border-color: var(--border-sunken-light) var(--border-sunken-dark)
                var(--border-sunken-dark) var(--border-sunken-light);
  padding: var(--spacing-md);
  background: var(--win95-gray);
  margin: var(--spacing-md) 0;
}

summary:not(.preview-content *) {
  font-weight: bold;
  cursor: pointer;
  padding: var(--spacing-sm);
  margin: calc(var(--spacing-md) * -1);
  margin-bottom: var(--spacing-md);
  background: var(--win95-gray-light);
  border-bottom: var(--border-thin) solid var(--win95-gray-dark);
}

details:not(.preview-content *)[open] summary {
  margin-bottom: var(--spacing-md);
}

/* ========================================
   Small Text
   ======================================== */

small:not(.preview-content *) {
  font-size: var(--font-size-small);
}

/* ========================================
   Strong & Bold
   ======================================== */

strong:not(.preview-content *), b:not(.preview-content *) {
  font-weight: bold;
}

/* ========================================
   Emphasis & Italic
   ======================================== */

em:not(.preview-content *), i:not(.preview-content *) {
  font-style: italic;
}

/* ========================================
   Abbreviation
   ======================================== */

abbr:not(.preview-content *)[title] {
  text-decoration: underline dotted;
  cursor: help;
}