/* Roboto sets the interface text, as on Horouf. */
@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');

/* Reset */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* Variables */
:root {
  --bg-color: rgb(255, 255, 255);
  --text-color: rgb(20, 20, 20);
  --border-color: rgb(0, 0, 255);
  --accent-color: rgb(0, 0, 255);
  --input-bg: rgb(255, 255, 255);
  --input-border: rgb(0, 0, 255);
  --title: rgb(20, 20, 20);
  --hover: rgb(210, 220, 255);
  --link: rgb(0, 0, 255);
  --muted: rgb(120, 120, 120);
  --font-main: 'Roboto', Arial, sans-serif;
  --tool-h: 34px;                   /* height of every toolbar control */
  border: 15px solid blue;
}

body.dark {
  --bg-color: rgb(20, 20, 20);
  --text-color: rgb(180, 180, 180);
  --border-color: rgb(255, 255, 255);
  --accent-color: rgb(255, 255, 255);
  --input-bg: rgb(20, 20, 20);
  --input-border: rgb(255, 255, 255);
  --title: rgb(255, 255, 255);
  --hover: rgb(0, 0, 255);
  --link: rgb(255, 255, 255);
  --muted: rgb(130, 130, 130);
}

html, body {
  height: 100%;
}

body {
  font-family: var(--font-main);
  background: var(--bg-color);
  color: var(--text-color);
  overflow: hidden;                 /* the drawing area owns the scroll-free page */
}

/* Container: the drawing stage takes whatever height is left over */
.container {
  width: 100%;
  height: 100%;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.sitetitle {
  width: 100%;
  overflow-wrap: break-word;
}

h1 {
  float: left;
  text-align: left;
  font-weight: 600;
  color: var(--accent-color);
}

h2 {
  text-align: left;
  font-weight: 400;
  color: var(--text-color);
  display: inline-block;
  vertical-align: baseline;
}

/* Dark Mode Toggle Button */
.toggle-btn {
  background: blue;
  color: white;
  border: none;
  padding: 8px 12px 6px 12px;
  font-size: 18px;
  cursor: pointer;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.3s ease, color 0.3s ease;
}

body.dark .toggle-btn { background: blue; color: white; }

/* Top bar with toggle and about buttons */
.top-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  justify-content: flex-end;
}

/* About Toggle Button */
.about-toggle {
  background: blue;
  color: white;
  border: none;
  height: 40px;
  padding: 8px 12px;
  font-size: 18px;
  font-family: inherit;
  cursor: pointer;
  transition: background-color 0.3s ease;
  margin-left: auto;
}

body.dark .about-toggle { background: blue; color: white; }

/* Full-width About Panel */
.about-panel {
  padding-left: 40px;
  padding-right: 40px;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 0;
  overflow: hidden;
  background: blue;
  color: white;
  z-index: 1000;
  transition: height 0.4s ease, padding 0.5s ease;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.about-panel.show {
  height: 65vh;
  overflow-y: scroll;
  padding: 40px 40px;
}

.aboutLink { color: rgb(180, 180, 180); text-decoration: underline; }

.about-inner {
  float: left;
  margin: 0 auto;
  max-width: 748px;
  padding-right: 20px;
}

.about-inner h2 { font-size: 24px; margin-bottom: 10px; color: white; }
.about-inner p { font-size: 16px; line-height: 1.6; }
.about-credit { font-size: 0.85em !important; color: rgb(180, 180, 180); }

#about-close {
  position: absolute;
  top: 27px;
  right: 40px;
  font-size: 40px;
  padding: 0;
  background: none;
  border: none;
  color: white;
  cursor: pointer;
}

/* Toolbar: same blue-outlined controls as the filter bar on Horouf */
.toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  margin: 4px 0;
}

.tool-group {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.tool {
  font-family: inherit;
  font-size: 14px;
  padding: 6px 12px;
  min-height: var(--tool-h);
  border: 1px solid var(--input-border);
  background: var(--input-bg);
  color: var(--text-color);
  cursor: pointer;
  border-radius: 0;
  appearance: none;
}

/* Hover belongs to devices that can hover. A touch screen applies :hover on
   tap and keeps it there, so a tapped button would sit in the hover tint
   instead of going straight to its selected state. The rule also steps aside
   for the active button, which stays filled while the pointer is over it. */
@media (hover: hover) and (pointer: fine) {
  .tool:hover:not(:disabled):not(.is-on) { background: var(--hover); }
}

/* Buttons carrying an icon rather than a word. Square, on the same height as
   the worded ones. The icon inherits the button's colour, so it turns white on
   the active one and grey when disabled. */
.tool.icon {
  width: var(--tool-h);
  height: var(--tool-h);
  min-height: var(--tool-h);
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}

.tool.icon svg { display: block; width: 26px; height: 26px; }

/* a wider gap sets the tools apart from the modes, and the exports from the
   tools, without drawing a rule between them */
.tool-group.spaced { margin-left: 18px; }

/* .tool-group sets display:flex, which would override the browser's own
   [hidden] rule, so say it here: ink hides the tools rather than greying them */
.tool-group[hidden], .tool[hidden] { display: none; }

/* the active mode / tool, filled like the about button */
.tool.is-on {
  background: blue;
  border-color: blue;
  color: white;
}

.tool:disabled {
  color: var(--muted);
  border-color: var(--muted);
  cursor: default;
}

/* Nib sliders — on every device: they set the nib for one-finger and mouse
   drawing, where there is no second touch point to give width and angle. */
.sliders { flex: 1 1 320px; gap: 14px; }

.slider {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1 1 150px;
  min-width: 150px;
  font-size: 14px;
}

.slider-name { color: var(--muted); }

.slider output {
  min-width: 44px;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

input[type="range"] {
  flex: 1;
  min-width: 80px;
  height: 34px;
  background: transparent;
  appearance: none;
  cursor: pointer;
}

input[type="range"]::-webkit-slider-runnable-track {
  height: 2px;
  background: var(--input-border);
}

input[type="range"]::-webkit-slider-thumb {
  appearance: none;
  width: 22px;
  height: 22px;
  margin-top: -10px;
  border-radius: 50%;
  background: blue;
  border: none;
}

input[type="range"]::-moz-range-track { height: 2px; background: var(--input-border); }
input[type="range"]::-moz-range-thumb {
  width: 22px; height: 22px; border: none; border-radius: 50%; background: blue;
}

/* Drawing stage */
#stage {
  flex: 1 1 auto;
  min-height: 0;
  border: 1px solid var(--input-border);
  position: relative;
  overflow: hidden;
  touch-action: none;               /* two-finger drawing, not page zoom */
}

#stage canvas { display: block; }

.hint {
  font-size: 13px;
  color: var(--muted);
  min-height: 1.2em;
}

/* Narrow screens: the toolbar stacks, the stage keeps the rest */
@media (max-width: 620px) {
  .container { padding: 12px; }
  h1 { font-size: 24px; }
  .sitetitle h2 { font-size: 15px; }
  .tool { padding: 6px 10px; }
  .tool-group.spaced { margin-left: 10px; }
  .sliders { flex-basis: 100%; gap: 4px; }
  /* one slider per row, so neither readout is clipped at the edge */
  .slider { flex-basis: 100%; min-width: 0; }
}