/* Color Picker lab — single-screen app layout (no page scrolling) */

/* The type scale follows the viewport height so everything fits on a
   Chromebook screen once the browser toolbar and shelf take their share. */
html {
  font-size: clamp(13px, 2.3vh, 18px);
}

.app-body {
  height: 100vh;
  height: 100dvh;
  min-height: 0;
  overflow: hidden;
}

.app {
  height: 100%;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  padding: 0.75rem 1.25rem 1rem;
  gap: 0.75rem;
}

/* Top bar: back link and title on one line */

.topbar {
  display: flex;
  align-items: baseline;
  gap: 1.5rem;
}

.topbar .back-link {
  margin: 0;
  padding: 0;
  font-size: 1rem;
}

.topbar h1 {
  margin: 0;
  font-size: 1.6rem;
  font-weight: 900;
  letter-spacing: -0.02em;
  line-height: 1.2;
}

.topbar .lab-number {
  color: var(--accent);
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-right: 0.5rem;
}

/* Workspace: wheel on the left, controls on the right */

.workspace {
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(18rem, 26vw, 24rem);
  gap: 1.5rem;
  min-height: 0;
}

.wheel-area {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 0;
  min-width: 0;
}

/* The wheel is a square whose side is whatever is smaller: the column
   width, or the full height of the workspace. */
.wheel {
  --size: min(100%, calc(100dvh - 6.5rem));
  position: relative;
  width: var(--size);
  aspect-ratio: 1 / 1;
  max-height: 100%;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  cursor: crosshair;
}

.hue-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: conic-gradient(#f00, #ff0, #0f0, #0ff, #00f, #f0f, #f00);
  -webkit-mask: radial-gradient(circle closest-side, transparent 77.5%, #000 78.5%);
  mask: radial-gradient(circle closest-side, transparent 77.5%, #000 78.5%);
  box-shadow: var(--shadow);
}

/* 78% inner radius, square inscribed in that circle (x 0.7071), with a
   little breathing room (x 0.94). Keep in sync with app.js. */
.sv-square {
  position: absolute;
  width: 51.8%;
  height: 51.8%;
  left: 24.1%;
  top: 24.1%;
  border-radius: 0.5rem;
  background:
    linear-gradient(to top, #000, transparent),
    linear-gradient(to right, #fff, hsl(var(--hue, 0), 100%, 50%));
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.12);
}

/* Handles: big, filled with the color they point at, and they lift on
   hover so they read as something you grab. Pointer events bubble up to
   the wheel, which does the actual dragging. */
.hue-marker,
.sv-marker {
  position: absolute;
  width: 2.8rem;
  height: 2.8rem;
  border-radius: 50%;
  background: #fff;
  box-shadow:
    0 0 0 2px rgba(0, 0, 0, 0.25),
    0 3px 10px rgba(0, 0, 0, 0.35);
  transform: translate(-50%, -50%);
  cursor: grab;
  transition: transform 120ms ease, box-shadow 120ms ease;
}

/* The colored dot in the middle of each handle */
.hue-marker::after,
.sv-marker::after {
  content: "";
  position: absolute;
  inset: 22%;
  border-radius: 50%;
  background: var(--c, #000);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.15);
}

.hue-marker:hover,
.sv-marker:hover {
  transform: translate(-50%, -50%) scale(1.15);
  box-shadow:
    0 0 0 2px rgba(0, 0, 0, 0.35),
    0 6px 16px rgba(0, 0, 0, 0.4);
}

.wheel.dragging,
.wheel.dragging .hue-marker,
.wheel.dragging .sv-marker {
  cursor: grabbing;
}

.wheel.dragging .hue-marker,
.wheel.dragging .sv-marker {
  transform: translate(-50%, -50%) scale(1.15);
}

/* Side panel */

.side {
  display: grid;
  grid-template-rows: auto auto auto auto;
  align-content: start;
  align-self: start;
  gap: 1rem;
  min-height: 0;
  padding: 1.1rem;
  background: var(--surface);
  border: 2px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.swatch {
  height: clamp(4rem, 12vh, 7rem);
  border-radius: calc(var(--radius) - 0.5rem);
  border: 2px solid var(--border);
  background: #2457ff;
}

.readouts {
  display: grid;
  gap: 0.6rem;
}

.readout {
  display: grid;
  grid-template-columns: 3.2rem minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.6rem;
}

.readout-label {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
}

.readout-value {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  font-size: 1.6rem;
  font-weight: 700;
  padding: 0.3rem 0.6rem;
  background: var(--bg);
  border-radius: 0.5rem;
  min-width: 0;
  white-space: nowrap;
}

.readout-name {
  grid-column: 2 / -1;
  font-family: inherit;
  font-size: 1.1rem;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
}

.readout-name.none {
  color: var(--muted);
  font-weight: 400;
}

.copy {
  font: inherit;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--accent);
  background: transparent;
  border: 2px solid var(--border);
  border-radius: 0.5rem;
  padding: 0.4rem 0.7rem;
  cursor: pointer;
  min-width: 4.8rem;
}

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

.copy:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
}

.copy.copied {
  color: #fff;
  background: var(--accent);
  border-color: var(--accent);
}

/* Controls */

.control-label {
  display: block;
  font-size: 1rem;
  font-weight: 800;
  margin: 0 0 0.4rem;
}

.control-note {
  font-weight: 500;
  color: var(--muted);
}

.hint {
  display: block;
  font-size: 0.8rem;
  color: var(--muted);
  margin-top: 0.35rem;
}

.slider {
  display: grid;
  grid-template-columns: 1.2rem minmax(0, 1fr) 3.4rem;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 0.4rem;
}

.slider label {
  font-weight: 800;
  font-size: 1rem;
}

.slider.red label   { color: #d62828; }
.slider.green label { color: #1b8a3a; }
.slider.blue label  { color: #2457ff; }

input[type="range"] {
  width: 100%;
  height: 2rem;
  margin: 0;
  cursor: pointer;
}

.slider.red   input[type="range"] { accent-color: #d62828; }
.slider.green input[type="range"] { accent-color: #1b8a3a; }
.slider.blue  input[type="range"] { accent-color: #2457ff; }

.slider input[type="text"] {
  font: inherit;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 1rem;
  font-weight: 700;
  width: 100%;
  padding: 0.3rem 0.2rem;
  border: 2px solid var(--border);
  border-radius: 0.5rem;
  text-align: center;
  text-transform: uppercase;
}

.slider input[type="text"]:focus-visible,
select:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
}

select {
  font: inherit;
  font-size: 1rem;
  width: 100%;
  padding: 0.5rem 0.7rem;
  border: 2px solid var(--border);
  border-radius: 0.5rem;
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
}

/* Narrow screens (phones): stack and allow scrolling, since a single
   screen can't hold both the wheel and the controls. */
@media (max-width: 800px) {
  html {
    font-size: 16px;
  }

  .app-body {
    height: auto;
    overflow: auto;
  }

  .app {
    height: auto;
  }

  .workspace {
    grid-template-columns: 1fr;
  }

  .wheel {
    --size: min(100%, 70vh);
  }

  .topbar {
    flex-wrap: wrap;
    gap: 0.25rem 1rem;
  }
}