/* WCI Playroom furniture. Drawing colors and engine output stay with PathLab. */
:root {
  --paper: var(--color-bg);
  --paper-raised: color-mix(in srgb, var(--color-white) 82%, var(--color-bg));
  --ink: var(--color-text);
  --muted: var(--color-muted);
  --blue: var(--color-blue);
  --rule: color-mix(in srgb, var(--color-blue) 13%, transparent);
  --shadow: 0 8px 32px color-mix(in srgb, var(--color-blue) 5%, transparent);
  --sans: var(--font-body, 'Poppins', sans-serif);
  --serif: var(--font-display, 'Ygro', sans-serif);
  --radius: 24px;
}

html, body { height: 100%; min-height: 0; }

body {
  font-family: var(--sans);
  background: var(--color-bg);
}

body::after { opacity: .045; }

.studio {
  height: 100dvh;
  min-height: 0;
  grid-template-rows: minmax(0, 1fr);
  background:
    radial-gradient(ellipse at 30% 0%, color-mix(in srgb, var(--color-gold) 9%, transparent), transparent 55%),
    var(--color-bg);
}

.paper-panel {
  border-color: var(--rule);
  background: color-mix(in srgb, var(--color-white) 65%, transparent);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow: inset 0 1px var(--color-white), var(--shadow);
}

.brush-panel { border-radius: 0 24px 24px 0; }
.settings-panel { border-radius: 24px 0 0 24px; }
.brush-panel, .settings-panel {
  height: 100%;
  min-height: 0;
  max-height: 100%;
  gap: 22px;
  padding: 24px 20px 22px;
}

.panel-rail,
.panel-rail[aria-expanded="true"] {
  background: transparent;
  color: var(--color-blue);
  border-color: var(--rule);
}

.panel-rail span {
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .025em;
  text-transform: none;
}

.eyebrow, .section-mark {
  color: var(--color-blue);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .035em;
  text-transform: none;
}

h1, h2, .settings-header h2 {
  color: var(--color-blue);
  font-family: var(--serif);
  font-weight: 400;
  letter-spacing: -.04em;
  line-height: 1.05;
}

h1 { max-width: none; font-size: 46px; margin-bottom: 14px; }
h1[data-mode="networks"] { font-size: 38px; }
h1[data-mode="undergrowth"] { font-size: 29px; }
.settings-header h2 { font-size: 32px; }

.intro, .panel-note {
  color: var(--color-muted);
  font-family: var(--sans);
  font-size: 12px;
  font-style: normal;
  line-height: 1.7;
}

.mode-switch {
  padding: 4px;
  gap: 4px;
  border-radius: 16px;
  border-color: var(--rule);
  background: color-mix(in srgb, var(--color-blue) 4%, transparent);
}

.mode-switch button {
  min-height: 40px;
  border-radius: 11px;
  color: var(--color-muted);
  font-size: 10px;
  font-weight: 500;
}

.mode-switch button[aria-pressed="true"] {
  background: var(--color-blue);
  color: var(--color-bg);
  box-shadow: 0 3px 10px color-mix(in srgb, var(--color-blue) 12%, transparent);
}

.brush-list { gap: 12px; }
.brush-card, .brush-list > button {
  border-radius: 17px;
  border-color: var(--rule);
  background: color-mix(in srgb, var(--color-white) 30%, transparent);
}

.brush-card[aria-pressed="true"], .brush-list > button[aria-pressed="true"] {
  border-color: color-mix(in srgb, var(--color-blue) 42%, transparent);
  background: color-mix(in srgb, var(--color-white) 88%, transparent);
  box-shadow: var(--shadow);
}

.brush-card:hover { transform: translateY(-1px); }
.brush-preview { border-radius: 15px; }
.brush-card strong { color: var(--color-blue); font-weight: 500; }
.brush-card small { line-height: 1.6; }
.brush-card__copy { padding: 0 12px 13px; }

.workspace { height: 100%; min-height: 0; padding: 8px; background: transparent; }
.canvas-shell {
  height: 100%;
  min-height: 0;
  border: 1px solid var(--rule);
  border-radius: 22px;
  /* This is PathLab's original canvas paper, not a UI theme token. */
  background: #f5f0e6;
  box-shadow: inset 0 1px var(--color-white), var(--shadow);
}

.canvas-toolbar {
  gap: 3px;
  padding: 4px;
  border: 1px solid color-mix(in srgb, var(--color-white) 85%, transparent);
  border-radius: 16px;
  background: color-mix(in srgb, var(--color-bg) 78%, transparent);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 4px 20px color-mix(in srgb, var(--color-blue) 6%, transparent);
}

.tool-button, .icon-button, .text-button, .quiet-button {
  border-radius: 12px;
  color: var(--color-blue);
  font-size: 11px;
  font-weight: 500;
}

.tool-button[aria-pressed="true"], .text-button--blue {
  color: var(--color-bg);
  background: var(--color-blue);
}

.tool-button:hover:not([aria-pressed="true"]),
.icon-button:hover, .text-button:hover:not(.text-button--blue),
.quiet-button:hover { background: color-mix(in srgb, var(--color-blue) 6%, transparent); }

.canvas-corner--format, .canvas-corner--help {
  border: 1px solid var(--rule);
  border-radius: 14px;
  background: color-mix(in srgb, var(--color-bg) 84%, transparent);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

#format {
  min-height: 44px;
  border: 0;
  border-radius: 13px;
  background: transparent;
  color: var(--color-blue);
}

.settings-header { padding-bottom: 20px; }
.settings-header > p:last-child { font-size: 11px; line-height: 1.7; }
.settings-controls { gap: 12px; }
.setting-control label, .palette-group legend { font-size: 11px; font-weight: 400; }
.setting-control output { font-size: 11px; }

.palette-button {
  min-height: 44px;
  border-radius: 12px;
  border-color: var(--rule);
}

.palette-button[aria-pressed="true"] {
  background: color-mix(in srgb, var(--color-blue) 5%, transparent);
  border-color: color-mix(in srgb, var(--color-blue) 25%, transparent);
  color: var(--color-blue);
}

.water-option select,
.cipher-palette-editor input[type="text"],
.cipher-palette-editor select,
.cipher-palette-swatch input[type="color"],
.notation-paper-color input {
  min-height: 38px;
  border-radius: 10px;
  border-color: var(--rule);
  background: color-mix(in srgb, var(--color-white) 60%, transparent);
}

.cipher-palette-editor button { border-radius: 10px; }
.cipher-palette-save { color: var(--color-bg); background: var(--color-blue); }
.cipher-palette-link { color: var(--color-blue); }

.action-button {
  min-height: 64px;
  border-radius: 16px;
  background: var(--color-blue);
  color: var(--color-bg);
}

.action-button span { font-family: var(--serif); font-size: 20px; font-weight: 400; }
.action-button small { font-size: 10px; line-height: 1.6; }
.action-button--coral { background: transparent; border-color: var(--rule); color: var(--color-blue); }

.empty-invitation { color: var(--color-blue); padding: 80px 18px; }
.empty-invitation > span { font-size: 9px; letter-spacing: .08em; }
.empty-invitation strong {
  font-family: var(--serif);
  font-style: normal;
  font-size: clamp(38px, 5.2vw, 72px);
  line-height: 1.02;
  letter-spacing: -.04em;
}
.empty-invitation p { color: var(--color-muted); font-size: 11px; }
.empty-invitation svg { stroke: var(--color-blue); }

.help-dialog {
  max-height: min(88dvh, 680px);
  overflow-y: auto;
  border-color: var(--rule);
  border-radius: 24px;
  background: color-mix(in srgb, var(--color-bg) 92%, transparent);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  box-shadow: 0 24px 80px color-mix(in srgb, var(--color-blue) 16%, transparent);
}
.dialog-card::before { display: none; }
.dialog-card h2 { font-size: 42px; }
.toast { border-radius: 16px; background: var(--color-blue); color: var(--color-bg); }

@media (min-width: 1051px) {
  .studio { grid-template-columns: 32px 220px minmax(0, 1fr) 32px 250px; }
  .panel-rail { width: 32px; min-width: 32px; }
  body.brushes-closed .studio { grid-template-columns: 32px 0 minmax(0, 1fr) 32px 250px; }
  body.settings-closed .studio { grid-template-columns: 32px 220px minmax(0, 1fr) 32px 0; }
  body.brushes-closed.settings-closed .studio { grid-template-columns: 32px 0 minmax(0, 1fr) 32px 0; }
}

@media (min-width: 821px) and (max-width: 1050px) {
  .studio { grid-template-columns: 32px 190px minmax(0, 1fr) 32px 220px; }
  .panel-rail { width: 32px; min-width: 32px; }
  .brush-panel, .settings-panel { padding-inline: 16px; }
  body.brushes-closed .studio { grid-template-columns: 32px 0 minmax(0, 1fr) 32px 220px; }
  body.settings-closed .studio { grid-template-columns: 32px 190px minmax(0, 1fr) 32px 0; }
  body.brushes-closed.settings-closed .studio { grid-template-columns: 32px 0 minmax(0, 1fr) 32px 0; }
  .workspace { padding: 8px; }
}

@media (max-width: 820px) {
  .studio { grid-template-columns: 32px minmax(0, 1fr) 32px; }
  .panel-rail { width: 32px; min-width: 32px; }
  .workspace { padding: 0; }
  .canvas-shell { border-radius: 0; }
  .brush-panel, .settings-panel { width: min(calc(100vw - 64px), 340px); padding: 24px 18px; }
  .brush-panel { left: 32px; transform: translateX(calc(-100% - 32px)); }
  .settings-panel { right: 32px; transform: translateX(calc(100% + 32px)); }
  .canvas-toolbar { padding: 3px; gap: 0; }
  .canvas-toolbar--tools { top: 8px; left: 8px; }
  .canvas-toolbar--history { right: 8px; bottom: 8px; }
  .canvas-corner--format { top: 8px; right: 60px; }
  .canvas-corner--help { top: 8px; right: 8px; }
  .empty-invitation strong { font-size: clamp(34px, 8vw, 50px); }
  .empty-invitation p { font-size: 10px; }
  .dialog-card { padding: 40px 22px 24px; }
}

@media (prefers-reduced-motion: reduce) {
  .brush-card:hover { transform: none; }
}