/* viewer-chrome.css — shared CARO visual-companion viewer chrome (base).

   Canonical source: caro-quarto/viewer/viewer-chrome.css. Byte-identical committed
   copy in each site/viewer/ (guarded by test-viewer-shared-assets.R). Generic sidebar
   + controls only; piece-specific readouts/badges live in a per-piece viewer-extra.css
   loaded after this file. Uses --cv-* tokens from caro-viewer-tokens.css. */

:root {
  --cv-sidebar-width: 323px; /* canonical viewer sidebar (75% of legacy 430px) */
  --cv-viewer-layout-pad: 20px; /* matches .container padding */
  --cv-viewer-layout-gap: 20px; /* matches .container gap */
  --cv-viewer-stack-bp: 768px; /* sidebar stacks above canvas at or below this width */
}

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

body {
  font-family: "myriad-pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  background: var(--cv-bg);
  min-height: 100vh;
  color: var(--cv-ink);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

.container { display: flex; min-height: auto; padding: 20px; gap: 20px; }

.sidebar {
  width: var(--cv-sidebar-width);
  flex-shrink: 0;
  background: #fff;
  border: 1px solid var(--cv-border);
  padding: 26px;
  border-radius: 6px;
  box-shadow: 0 2px 8px rgba(36, 36, 36, 0.06);
  overflow-y: auto;
  overflow-x: hidden;
  max-height: calc(100vh - 40px);
}

.sidebar h1 {
  font-family: "arno-pro-subhead", Georgia, "Times New Roman", serif;
  font-size: 26px;
  font-weight: 600;
  margin-bottom: 8px;
}

.sidebar .subtitle {
  color: var(--cv-secondary);
  font-size: 14px;
  margin-bottom: 26px;
  line-height: 1.6;
}

.sidebar .subtitle em { font-style: italic; color: var(--cv-warm); }

.section-help {
  font-size: 13px;
  color: var(--cv-secondary);
  line-height: 1.55;
  margin: -6px 0 16px 0;
}

.section-help strong { color: var(--cv-ink); font-weight: 600; }
.section-help em { font-style: italic; color: var(--cv-warm); }

.control-section { margin-bottom: 26px; }

.control-section h3 {
  font-size: 14px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  margin-bottom: 10px;
}

.seed-input {
  width: 100%;
  background: var(--cv-bg);
  padding: 10px 12px;
  border-radius: 4px;
  font-family: "source-code-pro", "SFMono-Regular", Consolas, monospace;
  font-size: 14px;
  margin-bottom: 10px;
  border: 1px solid var(--cv-border);
  text-align: center;
}

.seed-input:focus {
  outline: none;
  border-color: var(--cv-primary);
  box-shadow: 0 0 0 2px rgba(140, 29, 64, 0.10);
  background: white;
}

.seed-controls { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 8px; }

.button {
  background: var(--cv-ink);
  color: var(--cv-bg);
  border: none;
  padding: 9px 14px;
  border-radius: 4px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s ease;
  width: 100%;
}

.button:hover { background: color-mix(in srgb, var(--cv-ink) 88%, var(--cv-bg)); }

.button.secondary {
  background: transparent;
  color: var(--cv-ink);
  border: 1px solid var(--cv-border);
}

.button.secondary:hover { background: var(--cv-border); }

.button.active { background: var(--cv-primary); }
.button.active:hover { background: color-mix(in srgb, var(--cv-primary) 88%, var(--cv-ink)); }

.button-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 8px; }

.control-group { margin-bottom: 20px; }
.control-group label { display: block; font-size: 15px; font-weight: 500; margin-bottom: 8px; line-height: 1.4; }
.control-group .label-sub { font-size: 12.5px; font-weight: 400; color: var(--cv-secondary); font-style: italic; margin-left: 5px; }

.slider-container { display: flex; align-items: center; gap: 12px; }
.slider-container input[type="range"] {
  flex: 1;
  height: 4px;
  background: var(--cv-border);
  border-radius: 2px;
  outline: none;
  -webkit-appearance: none;
}
.slider-container input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 13px;
  height: 13px;
  background: var(--cv-primary);
  border-radius: 50%;
  cursor: pointer;
  border: 2px solid var(--cv-bg);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--cv-primary) 35%, var(--cv-border));
}
.slider-container input[type="range"]::-moz-range-thumb {
  width: 13px;
  height: 13px;
  background: var(--cv-primary);
  border-radius: 50%;
  border: 2px solid var(--cv-bg);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--cv-primary) 35%, var(--cv-border));
  cursor: pointer;
}

.value-display {
  font-family: "source-code-pro", monospace;
  font-size: 13.5px;
  font-weight: bold;
  color: var(--cv-ink);
  min-width: 58px;
  text-align: right;
}

.color-group { margin-bottom: 16px; }
.color-group label { display: block; font-size: 14px; margin-bottom: 6px; }
.color-picker-container { display: flex; align-items: center; gap: 10px; }
.color-picker-container input[type="color"] {
  width: 36px;
  height: 36px;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  background: none;
  padding: 0;
}
.color-value { font-family: "source-code-pro", monospace; font-size: 13px; color: var(--cv-secondary); }

.divider { border: none; border-top: 1px solid var(--cv-border); margin: 4px 0 22px; }

.canvas-area { flex: 1; display: flex; align-items: flex-start; justify-content: center; }
#canvas-container canvas {
  border-radius: 4px;
  box-shadow: 0 2px 12px rgba(36, 36, 36, 0.08);
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
}

.loading { color: var(--cv-secondary); font-size: 14px; padding: 40px; }

/* Stacked mobile layout, touch targets (48px satisfies Apple 44pt + Google 48dp),
   CLS reservation, and control touch-action. Desktop layout unchanged above the breakpoint. */
@media (max-width: 768px) {
  .container { flex-direction: column; }
  .sidebar { width: 100%; max-height: none; }
  .canvas-area { width: 100%; }
  #canvas-container { aspect-ratio: var(--cv-canvas-aspect, auto); width: 100%; }

  .button { min-height: 48px; }
  .slider-container input[type="range"] {
    height: 48px;
    background: transparent;
    touch-action: manipulation;
  }
  .slider-container input[type="range"]::-webkit-slider-runnable-track { height: 4px; }
  .profile-select { min-height: 48px; }
  .button,
  .profile-select { touch-action: manipulation; }
}