/* style.css — Wireframe theme (Computer Modern + Chicago header)
   - Header/nav font: ChicagoFLF (remote TTF)
   - Headings: Computer Modern Serif
   - Body: Computer Modern Sans
   - Links forced red
   - Page borders forced on
   - Vertical page title ("spine") on left via data-title / aria-label / title
   - Navbar enlarged
*/

/* Computer Modern web fonts */
@import url("https://cdn.jsdelivr.net/gh/dreampulse/computer-modern-web-font@master/fonts.css");

/* ChicagoFLF (header/nav) */
@font-face {
  font-family: "ChicagoFLF";
  src: url("https://viki.wiki/assets/ttf/ChicagoFLF.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: light;

  /* Palette pulled from the wireframes */
  --app-bg: #ececec; /* outside page */
  --surface: #ffffff; /* page */
  --ink: #3f3f3f; /* body text / “ink” */
  --muted: #7a7a7a; /* secondary */
  --rule: #b2b2b2; /* thin divider lines */
  --stroke: #3f3f3f; /* page outline + dark pill */
  --accent: #5f604c; /* olive */
  --accent-hover: #4f503e;
  --accent-soft: #eef0e7;

  /* Links: red */
  --link: #b00000;
  --link-hover: #7d0000;

  /* Typography */
  --font-header: "ChicagoFLF", "Chicago", "Computer Modern Sans", "CMU Sans Serif", system-ui, sans-serif;
  --font-display: "Computer Modern Serif", "Computer Modern", "CMU Serif", "Latin Modern Roman", serif;
  --font-body: "Computer Modern Sans", "Computer Modern", "CMU Sans Serif", "Latin Modern Sans", system-ui,
    -apple-system, "Segoe UI", sans-serif;

  /* Type scale (base is ~10–11pt look) */
  --step--2: 0.75rem; /* 12px */
  --step--1: 0.8125rem; /* 13px */
  --step-0: 0.875rem; /* 14px (≈10.5pt) */
  --step-1: 1rem; /* 16px */
  --step-2: 1.125rem; /* 18px */
  --step-3: 1.266rem; /* ~20.3px */
  --step-4: 1.424rem; /* ~22.8px */
  --step-5: 1.602rem; /* ~25.6px */

  /* Shape + elevation (LESS CURVE, still rounded) */
  --radius-page: 14px;
  --radius-ui: 12px;
  --shadow-page: 0 1px 0 rgba(63, 63, 63, 0.12);
  --shadow-page-active: 0 10px 30px rgba(63, 63, 63, 0.18);

  /* Vertical title tuning */
  --spine-x: 10px; /* horizontal inset from left border */
  --spine-size: var(--step--1); /* text size */
  --spine-tracking: 0.10em;
}

/* ===== Force fonts globally (prevents “looks default” if other CSS overrides) ===== */
html,
body {
  font-family: var(--font-body) !important;
}

/* ===== Base ===== */
body {
  background: var(--app-bg);
  color: var(--ink);
  font-size: var(--step-0);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
}

/* Headings */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display) !important;
  color: var(--accent);
  font-weight: 600;
  line-height: 1.12;
  margin: 0 0 0.6em;
}

h1 { font-size: var(--step-5); }
h2 { font-size: var(--step-4); }
h3 { font-size: var(--step-3); }
h4 { font-size: var(--step-2); }
h5 { font-size: var(--step-1); }
h6 { font-size: var(--step-0); }

/* Header / Footer */
header,
footer {
  background: transparent;
  border-top: 0;
  color: var(--muted);
}

/* ===== Header/NAV uses Chicago ===== */
header,
nav,
.navbar,
.topbar {
  font-family: var(--font-header) !important;
}

/* Ensure common header items also inherit Chicago */
header a,
header button,
header input,
header select,
header textarea,
nav a,
nav button,
nav input,
nav select,
nav textarea,
.navbar a,
.navbar button,
.navbar input,
.navbar select,
.navbar textarea,
.topbar a,
.topbar button,
.topbar input,
.topbar select,
.topbar textarea {
  font-family: var(--font-header) !important;
}

/* ===== Navbar sizing (bigger than body) ===== */
header,
nav,
.navbar,
.topbar {
  font-size: calc(var(--step-1) * 1.05) !important;
  line-height: 1.25;
}

header a,
nav a,
.navbar a,
.topbar a,
header button,
nav button,
.navbar button,
.topbar button,
header .button,
nav .button,
.navbar .button,
.topbar .button {
  font-size: inherit !important;
}

/* ===== “Paper” page container (FORCE borders ON) ===== */
.page {
  background-color: var(--surface) !important;
  border: 2px solid var(--stroke) !important;
  border-radius: var(--radius-page) !important;

  /* subtle inner hairline + your shadow */
  box-shadow:
    inset 0 0 0 1px rgba(63, 63, 63, 0.25),
    var(--shadow-page) !important;
}

.page.active {
  box-shadow:
    inset 0 0 0 1px rgba(63, 63, 63, 0.25),
    var(--shadow-page-active) !important;
}

/* ===== Vertical page title (left spine) =====
   Works if your .page element has ONE of:
   - data-title="Title"
   - aria-label="Title"
   - title="Title"
*/
.page[data-title],
.page[aria-label],
.page[title] {
  position: relative !important;
}

.page[data-title]::before {
  content: attr(data-title);
}
.page[aria-label]:not([data-title])::before {
  content: attr(aria-label);
}
.page[title]:not([data-title]):not([aria-label])::before {
  content: attr(title);
}

.page[data-title]::before,
.page[aria-label]::before,
.page[title]::before {
  position: absolute;

  left: var(--spine-x);
  top: 50%;

  writing-mode: vertical-rl;
  text-orientation: mixed;

  /* remove rotate(180deg) if you want it to read bottom->top instead */
  transform: translateY(-50%) rotate(180deg);

  font-family: var(--font-display) !important;
  font-size: var(--spine-size);
  letter-spacing: var(--spine-tracking);
  text-transform: uppercase;

  color: var(--muted);
  line-height: 1;
  white-space: nowrap;

  pointer-events: none;
  user-select: none;

  z-index: 9999;
}

/* Panels/blocks inside the page */
.journal,
.factory,
.data,
.chart,
.image {
  background-color: transparent;
  border: 1px solid var(--rule);
  border-radius: var(--radius-ui);
}

/* Blockquotes */
.story blockquote {
  border-left: 3px solid var(--rule);
  color: var(--muted);
  margin-left: 0;
  padding-left: 1rem;
}

/* Action surfaces */
.action {
  background-color: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--radius-ui);
  color: var(--ink);
}

.action.separator {
  background-color: transparent;
  border: 0;
}

/* Buttons */
.button {
  background-color: var(--accent);
  border: 2px solid var(--accent);
  color: #ffffff;

  border-radius: var(--radius-ui);
  padding: 0.7rem 1.15rem;

  font-family: var(--font-body) !important;
  font-weight: 600;
  font-size: var(--step-0);
  line-height: 1;
  letter-spacing: 0.01em;

  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.12);
}

.button:hover {
  background-color: var(--accent-hover);
  border-color: var(--accent-hover);
}

/* Dark “nav pill” */
.button.is-dark,
header .button {
  background-color: var(--stroke);
  border-color: var(--stroke);
}

.button.is-dark:hover,
header .button:hover {
  background-color: #2f2f2f;
  border-color: #2f2f2f;
}

/* Divider lines */
hr {
  border: 0;
  border-top: 1px solid var(--rule);
}

/* Inputs */
input,
select,
textarea {
  background: var(--surface);
  color: var(--ink);
  border: 2px solid var(--accent);
  border-radius: var(--radius-ui);
  padding: 0.65rem 0.9rem;
  font-family: var(--font-body) !important;
  font-size: var(--step-0);
}

input:focus,
select:focus,
textarea:focus {
  outline: 0;
  box-shadow: 0 0 0 3px rgba(95, 96, 76, 0.22);
}

.target {
  background-color: var(--accent-soft) !important;
}

/* Scrollbar + selection */
::-webkit-scrollbar-track-piece {
  background-color: #e2e2e2;
}

::-webkit-scrollbar-thumb:vertical {
  background-color: #c7c7c7;
  border: 3px solid #e2e2e2;
  border-radius: 999px;
}

::selection {
  background: var(--accent-soft);
  color: var(--ink);
}

/* ============================================================
   FORCE LINK COLOR (wins against most other stylesheets)
   ============================================================ */
html body a[href]:not(.button),
html body a[href]:not(.button):link,
html body a[href]:not(.button):visited {
  color: var(--link) !important;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
  text-decoration-color: rgba(176, 0, 0, 0.35) !important;
}

html body a[href]:not(.button):hover,
html body a[href]:not(.button):focus,
html body a[href]:not(.button):focus-visible,
html body a[href]:not(.button):active {
  color: var(--link-hover) !important;
  text-decoration-color: rgba(176, 0, 0, 0.65) !important;
}

/* If buttons are <a class="button">, keep them white */
html body a.button,
html body a.button:link,
html body a.button:visited,
html body a.button:hover,
html body a.button:active,
html body a.button:focus {
  color: #ffffff !important;
  text-decoration: none !important;
}