/* Grid Calculator: styles for this tool only. Shared styles live in /tools/shared/tools.css. */

:root {
  --grid-blue: #4aa8ff;
  --seg-margin: color-mix(in srgb, var(--grid-blue) 6%, var(--color-surface));
  --seg-gutter: color-mix(in srgb, var(--grid-blue) 16%, var(--color-surface));
  --seg-column: color-mix(in srgb, var(--grid-blue) 38%, var(--color-surface));
  --highlight: #fff1a8;
  --highlight-line: #b48a00;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --highlight: #5e5115;
    --highlight-line: #f2c744;
  }
}
:root[data-theme="dark"] {
  --highlight: #5e5115;
  --highlight-line: #f2c744;
}

html,
body {
  overflow-x: clip;
}
body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
  font-variant-numeric: tabular-nums;
}

.workspace {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 0 var(--space-4);
}

/* Preview: full bleed, so wide canvases use the whole window */
.preview-wrap {
  display: flex;
  align-items: center;
  padding: var(--space-16) var(--space-3);
  margin: 0 calc(50% - 50vw);
}
.device {
  position: relative;
  margin: 0 auto;
}
.total {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: 10px;
  color: var(--color-muted);
}
.total.bottom {
  margin: 10px 0 0;
}
.total::before,
.total::after {
  content: "";
  flex: 1;
  border-top: 1px solid var(--grid-blue);
  opacity: 0.6;
}
.frame {
  position: relative;
  display: flex;
  height: 300px;
  overflow: hidden;
}
.frame > div {
  display: grid;
  place-items: center;
  min-width: 0;
  font-size: var(--text-xs);
  color: var(--color-muted);
  transition: background-color var(--duration) ease;
}
.frame > div span {
  white-space: nowrap;
}
.frame .seg-m {
  background: var(--seg-margin);
}
.frame .seg-g {
  background: var(--seg-gutter);
}
.frame .seg-c {
  background: var(--seg-column);
  color: var(--color-ink);
}
.frame .seg-x {
  background: repeating-linear-gradient(45deg, var(--color-danger) 0 1px, transparent 1px 6px);
  color: var(--color-danger);
  font-weight: var(--weight-bold);
}
.frame .error {
  flex: 1;
  padding: var(--space-6);
  text-align: center;
  color: var(--color-warning);
  background: var(--color-surface);
}
.device.hl-w .total:not(.bottom) {
  color: var(--highlight-line);
  font-weight: var(--weight-bold);
}
.device.hl-w .total:not(.bottom)::before,
.device.hl-w .total:not(.bottom)::after {
  border-top-color: var(--highlight-line);
  border-top-width: 2px;
  opacity: 1;
}
.device.hl-c .seg-c,
.device.hl-g .seg-g,
.device.hl-m .seg-m {
  background: var(--highlight);
  color: var(--color-ink);
}

/* Controls card */
.readout {
  width: 100%;
  max-width: 1024px;
  margin: 0 auto;
  padding: var(--space-6) 28px var(--space-3);
  background: var(--color-surface);
  border-radius: var(--radius-2xl);
}

/* Preset row follows the input grid: dropdown spans the first two groups, download sits in the third */
.preset {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-3) 40px;
  align-items: center;
  padding-bottom: 14px;
}
.preset-label {
  grid-column: 1;
  grid-row: 1;
  justify-self: start;
  font-size: var(--text-md);
  color: var(--color-ink);
  cursor: pointer;
}
/* starts where the canvas width box starts (group width minus the 150px field), ends at the gutter box */
.preset .dropdown {
  grid-column: 1 / 3;
  grid-row: 1;
  margin-left: calc(50% - 170px);
}
.preset .btn {
  grid-column: 3;
  grid-row: 1;
  justify-self: end;
}

.inputs {
  display: grid;
  gap: 0 40px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.input-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 150px;
  align-items: center;
  gap: var(--space-3);
  min-height: 68px;
  padding: 14px 0;
}
.input-row + .input-row {
  border-top: 1px solid var(--color-border);
}
.input-row label,
.row-label {
  font-size: var(--text-md);
  color: var(--color-ink);
}
.row-value {
  justify-self: end;
  font-size: var(--text-md);
  font-weight: var(--weight-bold);
  color: var(--color-ink);
}
.row-value.good {
  color: var(--color-success);
}
.row-value.bad {
  color: var(--color-danger);
}

@media (max-width: 860px) {
  .preset,
  .inputs {
    grid-template-columns: minmax(0, 1fr);
  }
  .preset-label,
  .preset .dropdown,
  .preset .btn {
    grid-column: auto;
    grid-row: auto;
  }
  .preset .dropdown {
    margin-left: 0;
  }
  .preset .btn {
    justify-self: stretch;
    justify-content: center;
  }
  .group + .group {
    border-top: 1px solid var(--color-border);
  }
  .preview-wrap {
    padding: var(--space-8) var(--space-3);
  }
}

@media (max-width: 560px) {
  .readout {
    padding: var(--space-4) 18px 6px;
  }
}