/*
======================================================================
  5150 TOOLS  -  SHARED CONSOLE LOOK  (tools/5150/shared/console.css)
======================================================================
  The look every 5150 tool shares: fonts, the colour schemes in the
  "Colours" list, the black scales page, buttons, the top bar and
  toolbar, typing boxes, the flat hazard-stripe divider, the
  publisher line and the small print at the bottom.

  Each tool loads this first, then its own file for its own parts
  (e.g. characters.css for the character sheet, npcs.css for the NPC
  cards). Change a colour scheme here and every 5150 tool changes.

  Sections:
    1. FONTS            the console-style fonts
    2. COLOUR SCHEMES   the choices in the "Colours" list
    3. THE PAGE         background, top bar, toolbar, buttons, boxes,
                        hazard strip, publisher line, small print
======================================================================
*/

/* ------------------------------------------------------------------
   1. FONTS
   Both are free fonts (SIL Open Font License, which allows commercial
   use). The files and their licences are in tools/shared/fonts/.
   Orbitron is used for headings, Share Tech Mono for everything else.
------------------------------------------------------------------ */
@font-face {
  font-family: "Orbitron";
  src: url("../../shared/fonts/Orbitron.ttf") format("truetype");
  font-weight: 400 900;
  font-display: swap;
}
@font-face {
  font-family: "Share Tech Mono";
  src: url("../../shared/fonts/ShareTechMono.ttf") format("truetype");
  font-display: swap;
}
/* Oxanium: the sheet's text. Chosen by the user (28 Oct 2026) because it
   stays readable on a phone. One file covers every weight up to 800. */
@font-face {
  font-family: "Oxanium";
  src: url("../../shared/fonts/Oxanium.ttf") format("truetype");
  font-weight: 200 800;
  font-display: swap;
}

:root {
  --font-heading: "Orbitron", "Segoe UI", sans-serif;
  --font-text:    "Share Tech Mono", Consolas, monospace;   /* the page around the sheet */
  --font-sheet:   "Oxanium", "Segoe UI", sans-serif;        /* the sheet itself          */

  /* The page around the sheet (buttons, form, labels). Schemes below
     can change these; anything they don't change uses these. */
  --ui-text:  #e4e8ec;   /* main words on the page          */
  --ui-soft:  #a3aab3;   /* labels                          */
  --ui-hint:  #8d949d;   /* small help text                 */
}


/* ------------------------------------------------------------------
   2. COLOUR SCHEMES
   Each block is one choice in the "Colours" list. The names:
     --paper   the sheet's background
     --panel   the background of the boxes on the sheet
     --frame   the plain grey frame lines
     --ink     the main glowing text colour
     --ink-dim quieter text (labels)
     --accent  the second highlight colour (box titles, badges)
     --glow    the soft glow around text (use "transparent" for none)
     --lines   the faint scan lines over the sheet
     --ui-...  the page around the sheet (see section 1)

   The pink scheme was asked for by the user (28 Oct 2026). Its pink
   leans towards purple-magenta, well away from red.
------------------------------------------------------------------ */

/* Neon pink: aggressive synthwave hot pink, with electric cyan for
   the box titles, badges and the page around the sheet.
   (Amber is the starting choice: see defaultTheme in shared/saved-data.js.) */
[data-theme="pink"] {
  --paper:   #0b0610;
  --panel:   #130a1a;
  --frame:   #7b8088;
  --ink:     #ff3fd8;
  --ink-dim: #d77fca;
  --accent:  #5ff1ff;
  --glow:    rgba(255, 63, 216, 0.6);
  --lines:   rgba(255, 63, 216, 0.035);
  --ui-text: #a6f8ff;
  --ui-soft: #5fd8e6;
  --ui-hint: #4bb6c2;
}

/* Phosphor green: an old green-screen terminal, with cyan around it. */
[data-theme="phosphor"] {
  --paper:   #040805;
  --panel:   #08100a;
  --frame:   #7b8088;
  --ink:     #7dffa4;
  --ink-dim: #6fc98a;
  --accent:  #d8ff8a;
  --glow:    rgba(125, 255, 164, 0.42);
  --lines:   rgba(125, 255, 164, 0.03);
  --ui-text: #a6f8ff;
  --ui-soft: #5fd8e6;
  --ui-hint: #4bb6c2;
}

/* Amber terminal: warm cassette-punk orange, with white box titles and
   badges (where Neon pink has cyan). The page around it stays white. */
[data-theme="amber"] {
  --paper:   #0a0703;
  --panel:   #120c05;
  --frame:   #7b8088;
  --ink:     #ffb347;
  --ink-dim: #d29a52;
  --accent:  #f4f4f2;
  --glow:    rgba(255, 179, 71, 0.42);
  --lines:   rgba(255, 179, 71, 0.03);
}

/* Cobalt and gold: electric blue on deep navy, with gold box titles and
   badges. (Made with Custom colours and kept as a choice by the user,
   29 Oct 2026: Main #3fa9ff, Highlight #ffe14d, Background #06101c.)
   The page around it stays white, as in Amber. */
[data-theme="cobalt"] {
  --paper:   #06101c;
  --panel:   #091827;
  --frame:   #7b8088;
  --ink:     #3fa9ff;
  --ink-dim: #3183c6;
  --accent:  #ffe14d;
  --glow:    rgba(63, 169, 255, 0.42);
  --lines:   rgba(63, 169, 255, 0.03);
}

/* Greyscale: black ink on white paper, for printing. No glow.
   Some boxes are solid black with white writing (see section 6). */
[data-theme="print"] {
  --paper:   #ffffff;
  --panel:   #ffffff;
  --frame:   #3a3a3a;
  --ink:     #000000;
  --ink-dim: #333333;
  --accent:  #000000;
  --glow:    transparent;
  --lines:   transparent;
}


/* ------------------------------------------------------------------
   3. THE PAGE  (everything around the sheet)
   The background is your black scales picture from the main site,
   darkened so the sheet stands out.
------------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }

/* Anything marked "hidden" stays hidden, whatever other styles say. */
[hidden] { display: none !important; }

body {
  margin: 0;
  min-height: 100vh;
  color: var(--ui-text);
  font-family: var(--font-text);
  font-size: 16px;
  line-height: 1.45;
  background-color: #0b0c0d;
  background-image:
    linear-gradient(rgba(8, 9, 10, 0.72), rgba(8, 9, 10, 0.72)),
    url("../../../images/texture-scales.jpg");
  background-size: auto, cover;
  background-attachment: fixed;
}

a { color: var(--ink); }
[data-theme="print"] a { color: #e6e6e6; }

/* BUTTONS. "Load file" and "Upload my own" are really labels, so
   .button-like gives them the same look. */
button, .button-like {
  display: inline-block;
  font-family: var(--font-text);
  font-size: 15px;
  line-height: 1.3;
  color: var(--paper);
  background: var(--ink);
  border: 1px solid var(--ink);
  border-radius: 2px;
  padding: 7px 12px;
  margin: 0;
  cursor: pointer;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
button:hover, .button-like:hover { background: var(--accent); border-color: var(--accent); }
button.quiet { background: transparent; color: var(--ink); }
button.quiet:hover { color: var(--paper); }
button.small { font-size: 13px; padding: 4px 8px; }
button:focus-visible, .button-like:focus-within, select:focus-visible, input:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
/* In greyscale the "ink" is black, which would vanish on the dark page,
   so buttons there are light grey with dark writing. */
[data-theme="print"] button, [data-theme="print"] .button-like { background: #d9d9d9; border-color: #d9d9d9; color: #111; }
[data-theme="print"] button:hover, [data-theme="print"] .button-like:hover { background: #fff; border-color: #fff; }
[data-theme="print"] button.quiet { background: transparent; color: #d9d9d9; }

/* The top bar. */
.top-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  justify-content: space-between;
  gap: 8px 24px;
  padding: 16px 16px 8px;
}
.top-bar .trail { width: 100%; margin: 0; font-size: 14px; color: var(--ui-soft); }
.top-bar h1 {
  margin: 0;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: clamp(22px, 4vw, 34px);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink);
  text-shadow: 0 0 10px var(--glow);
}
[data-theme="print"] .top-bar h1 { color: #e6e6e6; }
.theme-pick { display: flex; gap: 8px; align-items: center; color: var(--ui-soft); }

/* The colour list, plus the three colour pickers for "Custom colours". */
.theme-area { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px 16px; align-items: center; }
/* "order: -1" puts the pickers to the LEFT of the Colours list, so the
   list stays where it is when they appear. */
.custom-colours { order: -1; display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; }
.custom-colours[hidden] { display: none; }
.custom-colours label { display: flex; gap: 6px; align-items: center; font-size: 14px; color: var(--ui-soft); }
.custom-colours input[type="color"] {
  width: 38px;
  height: 28px;
  padding: 0 2px;
  background: #07080a;
  border: 1px solid #5d636b;
  border-radius: 2px;
  cursor: pointer;
}

/* The "Best on a computer" note under the title. */
.screen-note {
  width: 100%;
  margin: 4px 0 0;
  padding: 8px 12px;
  font-size: 14px;
  color: var(--ui-text);
  background: rgba(12, 14, 17, 0.88);
  border: 1px solid #555a61;
  border-left: 3px solid var(--ink);
}
.screen-note b { color: var(--ink); font-weight: normal; letter-spacing: 0.04em; }
[data-theme="print"] .screen-note { border-left-color: #d9d9d9; }
[data-theme="print"] .screen-note b { color: #fff; }

/* The tool's version number, a small tag beside the title. */
.top-bar h1 .version {
  display: inline-block;
  vertical-align: middle;
  margin-left: 12px;
  padding: 2px 8px;
  font-family: var(--font-text);
  font-size: 13px;
  font-weight: normal;
  letter-spacing: 0.08em;
  text-transform: none;
  color: var(--ui-soft);
  text-shadow: none;
  border: 1px solid #5d636b;
}

/* "How to use it": the short beginner's paragraph under the publisher
   line, ending with the link to the full instructions. */
.how-to {
  width: 100%;
  margin: 0;
  padding: 10px 14px;
  font-size: 15px;
  line-height: 1.5;
  color: var(--ui-text);
  background: rgba(12, 14, 17, 0.88);
  border: 1px solid #555a61;
  border-left: 3px solid var(--ink);
}
.how-to b { color: var(--ink); font-weight: normal; letter-spacing: 0.04em; }
.how-to .help-link { white-space: nowrap; }
[data-theme="print"] .how-to { border-left-color: #d9d9d9; }
[data-theme="print"] .how-to b { color: #fff; }

/* The toolbar: three groups of buttons. */
.toolbar { display: flex; flex-wrap: wrap; gap: 12px; padding: 0 16px 12px; }
.tool-group {
  flex: 1 1 280px;
  background: rgba(12, 14, 17, 0.88);
  border: 1px solid #555a61;
  padding: 10px 12px;
}
.tool-group h2 {
  margin: 0 0 8px;
  font-family: var(--font-heading);
  font-size: 13px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ui-soft);
}
.row { display: flex; flex-wrap: wrap; gap: 8px; align-items: end; margin-bottom: 8px; }
.row > label:not(.button-like) { display: flex; flex-direction: column; font-size: 13px; color: var(--ui-soft); }
.row > label.check { flex-direction: row; gap: 6px; align-items: center; color: var(--ui-text); }
.hint { margin: 4px 0 0; font-size: 13px; color: var(--ui-hint); }
.status { width: 100%; margin: 0; min-height: 1.4em; color: var(--accent); }
/* The toolbar's message line takes no room until there is a message,
   so there's no empty gap above the hazard strip. */
.toolbar .status:empty { display: none; }
[data-theme="print"] .status { color: #d9d9d9; }

/* Drop-down lists and typing boxes, everywhere on the page. */
select, input[type="text"], input[type="number"], textarea {
  font-family: var(--font-text);
  font-size: 15px;
  color: var(--ui-text);
  background: #07080a;
  border: 1px solid #5d636b;
  border-radius: 2px;
  padding: 5px 7px;
  max-width: 100%;
}
textarea { width: 100%; resize: vertical; }
input::placeholder, textarea::placeholder { color: #6c737c; }

/* HAZARD STRIP: the flat yellow-and-black divider band. The picture is made
   from the user's tools/2045.jpg by tools/5150/scripts/make-hazard-strip.py.
   To make it thicker or thinner, change "height: 16px". */
.hazard-strip {
  height: 16px;
  margin: 0 16px 16px;
  background: #111 url("../../shared/images/hazard-strip.jpg") repeat-x left center;
  background-size: auto 100%;
  border-top: 1px solid #555a61;
  border-bottom: 1px solid #555a61;
}
/* In the Greyscale scheme the stripes turn grey too. */
[data-theme="print"] .hazard-strip { filter: grayscale(1) contrast(1.1); }

/* The line under the title naming the game's publisher, with its link. */
.publisher-note { width: 100%; margin: 0; font-size: 14px; color: var(--ui-soft); }

/* The small print at the very bottom of the page. */
.page-foot {
  padding: 0 16px 24px;
  font-size: 13px;
  color: var(--ui-hint);
}
.page-foot p { margin: 0 0 4px; }