/* Shared Matrix Master color palette: change these purpose-named variables to retheme the app. */
:root {
  --page-background: #24272D;
  --panel-background: #303640;
  --input-background: #1C3046;
  --primary-text-color: #A8D9F5;
  --secondary-text-color: #91A9BE;
  --link-text-color: #FFFFFF;
  --link-hover-color: #FFFFFF;
  --border-color: #477FA8;
  --button-background: #28577D;
  --button-hover-background: #3976A5;
  --input-error-background: #633039;
  --pixel-on-background: #5599FF;
  --pixel-off-background: #1C3046;
  --focus-outline-color: #B9E5FF;
}

/* Global page typography, spacing, and links. */
* { box-sizing: border-box; }
body { margin: 0; background: var(--page-background); color: var(--primary-text-color); font: 16px/1.45 Arial, Helvetica, sans-serif; }
.page { max-width: 850px; margin: 0 auto; padding: 28px 20px 50px; }
.page-header, .section-heading, .status, .grid-footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
h1 { margin: 0; font-size: 30px; }
h2 { margin: 0 0 16px; font-size: 19px; }
.section-heading h2 { margin: 0; }
.subtitle, .hint, .status, #grid-size { color: var(--secondary-text-color); }
.subtitle { margin: 3px 0 0; }
.hint { font-size: 14px; margin: 10px 0; }
a { color: var(--link-text-color); text-decoration: none; }
a:hover { color: var(--link-hover-color); text-decoration: underline; }

/* Panels and grouped selection controls. */
.panel { background: var(--panel-background); border: 1px solid var(--border-color); border-radius: 10px; padding: 20px; margin-top: 18px; }
.selectors { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
label { display: block; font-weight: 600; }
select, button { font: inherit; }
select { width: 100%; padding: 10px; margin-top: 7px; color: var(--primary-text-color); background: var(--input-background); border: 1px solid var(--border-color); border-radius: 5px; }
.navigation { display: flex; align-items: end; gap: 8px; }
.navigation select { flex: 1; min-width: 0; }
.navigation button { margin-top: 7px; }
.status { margin-top: 12px; font-size: 13px; }

/* Buttons, keyboard focus, and disabled states. */
button { cursor: pointer; color: var(--primary-text-color); background: var(--button-background); border: 1px solid var(--border-color); border-radius: 5px; padding: 9px 14px; }
button:hover:not(:disabled) { background: var(--button-hover-background); }
button:disabled { cursor: default; opacity: .45; }
button.secondary { background: var(--input-background); }
button.secondary:hover:not(:disabled) { background: var(--button-background); }
button.wide { display: block; width: 100%; margin-top: 18px; padding: 12px; }
button:focus-visible, select:focus-visible, input:focus-visible { outline: 2px solid var(--focus-outline-color); outline-offset: 3px; }

/* The exact 7-by-5 clickable pixel grid. */
.pixel-grid { display: grid; grid-template-columns: repeat(5, 39px); gap: 4px; width: max-content; margin: 24px auto; }
.pixel { width: 39px; height: 39px; padding: 0; background: var(--pixel-off-background); border: 1px solid var(--border-color); border-radius: 3px; }
.pixel[aria-pressed="true"] { background: var(--pixel-on-background); border-color: var(--focus-outline-color); }
.pixel:hover { filter: brightness(1.25); }
.grid-footer { margin-top: 8px; }
#space-editor { padding: 26px 0; }
#space-width { display: block; width: 100%; margin-top: 18px; accent-color: var(--pixel-on-background); }
[hidden] { display: none !important; }

/* Narrow-screen layout adjustments. */
@media (max-width: 580px) {
  .page-header { align-items: flex-start; flex-direction: column; }
  .selectors { grid-template-columns: 1fr; }
  .panel { padding: 15px; }
}


/* Main generator: preview area and pixel-perfect canvas display. */
.preview-frame { margin-top: 16px; padding: 12px; background: #000000; border-radius: 5px; overflow: hidden; }
#matrix-preview { display: block; width: 100%; height: auto; image-rendering: pixelated; image-rendering: crisp-edges; }

/* Main generator: two equal columns with independent font and color settings. */
.generator-columns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.generator-panel { min-width: 0; }
.generator-panel label { margin-top: 16px; }
.generator-panel h2 + label { margin-top: 0; }
.generator-panel input[type="text"] { display: block; width: 100%; padding: 10px; margin-top: 7px; color: var(--primary-text-color); background: var(--input-background); border: 1px solid var(--border-color); border-radius: 5px; font: inherit; }
.generator-panel input[type="text"].is-error { background: var(--input-error-background); }
.pixel-count { margin-top: 5px; color: var(--secondary-text-color); font-size: 13px; }
.pixel-count.is-error, .generator-message { color: #FF9A9A; }
.space-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 16px; }
.space-heading label { margin: 0; }
.space-heading output { font-size: 14px; }
.generator-panel input[type="range"] { display: block; width: 100%; margin-top: 12px; accent-color: var(--pixel-on-background); }
.generator-message { min-height: 20px; margin: 14px 0 0; font-size: 14px; }
.generator-footer { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 12px; color: var(--secondary-text-color); font-size: 13px; }

/* Main generator: stack panels on narrow screens. */
@media (max-width: 580px) {
  .generator-columns { grid-template-columns: 1fr; }
  .generator-footer { align-items: flex-start; flex-direction: column; }
}