/* 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; }

/* An invisible sheet under the open panel: it catches the click that lands
   outside, so the panel closes without the canvas ever seeing the press. */
.about-backdrop {
  position: fixed;
  inset: 0;
  z-index: 999;
}

.about-backdrop[hidden] { display: none; }

/* 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;
  /* closed, and all through the 0.4s of closing, the panel still covers the
     top of the drawing area: let presses pass straight through it */
  pointer-events: none;
  transition: height 0.4s ease, padding 0.5s ease;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.about-panel.show {
  pointer-events: auto;
  height: 65vh;
  overflow-y: auto;
  /* the text is taller than the panel on a short screen, so it has to carry
     the scroll itself: the page behind it does not move with it */
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: 40px 40px 60px;
}

.about-panel::-webkit-scrollbar { width: 0; height: 0; }

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

/* Not floated: a float gives the panel no content height, and then there is
   nothing for overflow-y to scroll. The gutter on the right is the lane the
   sticky cross sits in, so no line ever scrolls underneath it; the measure
   itself stays the 728px it was. */
.about-inner {
  max-width: 788px;
  padding-right: 60px;
}

.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); }

/* Sticky rather than absolute, so it stays in the corner while the text
   scrolls under it. A float can be sticky; absolute cannot, and an absolute
   box is pinned to the panel's content, which is what scrolls away. The blue
   backing is the panel's own colour: invisible, but it keeps the lines
   passing beneath the cross from tangling with it. */
#about-close {
  position: sticky;
  top: 0;
  float: right;
  z-index: 2;
  width: 44px;
  /* 28px is the line box of the 24px heading beside it, and 42px of Roboto
     puts the cross's ink on the same centre line and at the same height as
     the capitals in "About Kalamos" */
  height: 28px;
  margin: 0 0 6px 12px;
  font-size: 42px;
  line-height: 28px;
  padding: 0;
  background: blue;
  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; }
}