/* Object Studio: internal pages and dialogs. Load after the legacy page styles.
   The shell owns the palette tokens and page positioning; these rules only
   theme existing content, controls and states. */
:root {
  --studio-page-focus: var(--accent);
  --studio-page-danger: #ffc3b2;
  --studio-page-danger-bg: #39251f;
  --studio-page-danger-border: #d27f66;
  --studio-page-warning: #f2db9b;
  --studio-page-warning-bg: #332d1d;
  --studio-page-warning-border: #a28b50;
  --studio-page-shadow: 0 20px 70px #00000045;
  --studio-page-backdrop: #04100fd1;
}

html[data-theme="light"] {
  --studio-page-focus: #315d40;
  --studio-page-danger: #7f2b20;
  --studio-page-danger-bg: #fff1eb;
  --studio-page-danger-border: #a34836;
  --studio-page-warning: #665018;
  --studio-page-warning-bg: #f8f0d4;
  --studio-page-warning-border: #a67a26;
  --studio-page-shadow: 0 20px 70px #172e2926;
  --studio-page-backdrop: #172e297a;
}

:is(.model-page, .author-page, .box-page, .workshop-page) {
  color: var(--ink);
}

/* Underlines make links recognisable without relying on the accent colour. */
:is(.model-page, .author-page, .box-page, .workshop-page, #model-dialog, #about-dialog, #concept-dialog) a:not(.button):not(.model-open) {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  text-decoration-color: var(--control-border);
}

:is(.model-page, .author-page, .box-page, .workshop-page, #model-dialog, #about-dialog, #concept-dialog) a:not(.button):not(.model-open):hover {
  text-decoration-color: currentColor;
  text-decoration-thickness: 2px;
}

:is(.model-page, .author-page, .box-page, .workshop-page, #model-dialog, #about-dialog, #concept-dialog) :is(h1, h2, h3, strong, label) {
  color: var(--ink);
}

:is(.model-page, .author-page, .box-page, .workshop-page, #model-dialog, #about-dialog, #concept-dialog) .eyebrow {
  color: var(--muted);
}

/* Buttons are deliberately scoped to the controls present on these pages. */
:is(.model-page, .author-page, .box-page, .workshop-page, #model-dialog, #about-dialog, #concept-dialog) .button.dark {
  color: var(--accent-ink);
  background: var(--accent);
  border-color: var(--accent);
  border-radius: 8px;
  box-shadow: none;
}

:is(.model-page, .author-page, .box-page, .workshop-page, #model-dialog, #about-dialog, #concept-dialog) .button.dark:hover:not(:disabled):not([aria-disabled="true"]) {
  color: var(--accent-ink);
  background: var(--accent);
  border-color: var(--accent-ink);
  box-shadow: inset 0 0 0 1px var(--accent-ink);
}

:is(.model-page, .author-page, #model-dialog, #about-dialog, #concept-dialog) .icon-button,
.author-page .card-save,
.author-page .catalog-pagination button,
.box-page .box-preview-controls button,
.workshop-page .workshop-secondary {
  color: var(--ink);
  background: var(--white);
  border: 1px solid var(--control-border);
  border-radius: 8px;
  box-shadow: none;
}

:is(.model-page, .author-page, #model-dialog, #about-dialog, #concept-dialog) .icon-button:hover,
.author-page .card-save:hover,
.author-page .catalog-pagination button:hover:not(:disabled),
.box-page .box-preview-controls button:hover,
.workshop-page .workshop-secondary:hover {
  color: var(--ink);
  background: var(--surface-3);
  border-color: var(--ink);
}

:is(.model-page, .author-page, #model-dialog) .icon-button[aria-pressed="true"],
.author-page .card-save[aria-pressed="true"],
.box-page .box-preview-controls button[aria-pressed="true"] {
  color: var(--accent-ink);
  background: var(--accent);
  border-color: var(--accent-ink);
}

:is(.model-page, #model-dialog) .save-detail[aria-pressed="true"] svg,
.author-page .card-save[aria-pressed="true"] svg {
  fill: currentColor;
}

/* Native fields retain a visible boundary against both adjacent surfaces. */
:is(.model-page, .author-page, .box-page, .workshop-page, #model-dialog, #about-dialog, #concept-dialog) :where(input:not([type="checkbox"]):not([type="radio"]), textarea, select) {
  color: var(--ink);
  background: var(--white);
  border: 1px solid var(--control-border);
  border-radius: 8px;
  caret-color: var(--ink);
  box-shadow: none;
}

:is(.model-page, .author-page, .box-page, .workshop-page, #model-dialog, #about-dialog, #concept-dialog) :is(input, textarea)::placeholder {
  color: var(--muted);
  opacity: 1;
}

:is(.model-page, .author-page, .box-page, .workshop-page, #model-dialog, #about-dialog, #concept-dialog) :is(input, textarea)[readonly] {
  color: var(--muted);
  background: var(--surface-2);
  border-color: var(--control-border);
}

:is(.model-page, .author-page, .box-page, .workshop-page, #model-dialog, #about-dialog, #concept-dialog) :is(input, textarea, select)[aria-invalid="true"] {
  color: var(--ink);
  background: var(--studio-page-danger-bg);
  border-color: var(--studio-page-danger-border);
}

.box-page .box-mount-toggle input {
  accent-color: var(--studio-page-focus);
}

/* Shared detail-page content, also covering the legacy detail dialog. */
:is(.model-page, #model-dialog) .detail-visual {
  /* The old page assigns a pastel inline background, independently of mesh
     materials. Override only that backdrop; preserve every model colour. */
  background-color: var(--surface-2) !important;
  border-color: var(--line);
  border-radius: 12px;
}

:is(.model-page, #model-dialog) .detail-visual::before {
  background-image: none;
}

:is(.model-page, #model-dialog) .viewer-badge {
  color: var(--ink);
  background: var(--white);
  border-color: var(--line);
  border-radius: 6px;
}

:is(.model-page, #model-dialog) :is(.viewer-toolbar, .viewer-help, .detail-category, .detail-author, .detail-author small, .print-stats span, .print-note, .detail-tags, .file-row small, .version-row time, .version-row p, .model-permalink, .model-page-footer) {
  color: var(--muted);
}

:is(.model-page, #model-dialog) :is(.model-geometry-note, .preview-colour-note) {
  color: var(--muted);
  background: var(--white);
  border-color: var(--line);
}

:is(.model-page, .author-page, #model-dialog, #concept-dialog) :is(.demo-badge, .licence-demo, .physical-print-note) {
  color: var(--muted);
  background: var(--surface-2);
  border-color: var(--line);
  border-radius: 6px;
}

:is(.model-page, #model-dialog) .detail-tabs {
  border-color: var(--line);
}

:is(.model-page, #model-dialog) .detail-tabs button {
  color: var(--muted);
  background: transparent;
  border-bottom-color: transparent;
}

:is(.model-page, #model-dialog) .detail-tabs button:hover {
  color: var(--ink);
  border-bottom-color: var(--control-border);
}

:is(.model-page, #model-dialog) .detail-tabs button[aria-selected="true"] {
  color: var(--ink);
  border-bottom-color: var(--studio-page-focus);
}

:is(.model-page, #model-dialog) .detail-tabs span:not([data-i18n]) {
  color: var(--ink);
  background: var(--surface-3);
}

:is(.model-page, #model-dialog) .tab-panel {
  color: var(--muted);
}

:is(.model-page, #model-dialog) .print-stats strong {
  color: var(--ink);
}

:is(.model-page, #model-dialog) .detail-tags span {
  color: var(--muted);
  background: var(--surface-2);
  border-color: var(--line);
  border-radius: 6px;
}

:is(.model-page, #model-dialog) :is(.licence-panel, .file-row) {
  color: var(--muted);
  background: var(--white);
  border-color: var(--line);
  border-radius: 12px;
}

:is(.model-page, #model-dialog) :is(#license-name, #access-kind, .file-row strong, .version-row strong) {
  color: var(--ink);
}

:is(.model-page, #model-dialog) :is(#license-summary, #license-permissions, .licence-scope, .licence-notice, .access-panel, .access-future) {
  color: var(--muted);
  border-color: var(--line);
}

:is(.model-page, #model-dialog) :is(#detail-license, #license-legal) {
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 4px;
}

:is(.model-page, #model-dialog) .file-icon {
  color: var(--ink);
  background: var(--surface-2);
  border-radius: 6px;
}

:is(.model-page, #model-dialog) .version-row {
  border-color: var(--control-border);
}

.model-page :is(.model-breadcrumb, .model-breadcrumb-divider) {
  color: var(--muted);
}

/* Author details and their embedded model cards; no catalogue-wide changes. */
.author-page :is(.author-profile-card, .author-future-note) {
  color: var(--muted);
  background: var(--white);
  border-color: var(--line);
  border-radius: 12px;
}

.author-page :is(.author-bio, .author-demo-notice, .author-model-count, .author-permalink, .author-page-footer, .card-author, .card-bottom, .card-estimate-note, .card-production-note, .card-terms, .catalog-pagination p) {
  color: var(--muted);
}

:is(.model-page, .author-page, #model-dialog) :is(.avatar, .author-profile-avatar) {
  /* Initials are content, while the legacy inline pastel is presentation. */
  background-color: var(--surface-3) !important;
  color: var(--ink);
}

.author-page .author-profile-avatar {
  border: 1px solid var(--line);
  border-radius: 12px;
}

.author-page .model-card {
  color: var(--ink);
  background: transparent;
}

.author-page .card-save svg {
  stroke: currentColor;
}

.author-page .model-image {
  background-color: var(--surface-2);
  border-color: var(--line);
  border-radius: 12px;
}

.author-page :is(.card-demo, .card-open-hint, .card-access) {
  color: var(--muted);
  background: var(--white);
  border-color: var(--line);
}

.author-page .difficulty i {
  background: var(--muted);
}

.author-page .difficulty i.off {
  background: var(--line);
}

/* Parameter controls and the live geometric preview. */
.box-page :is(.box-controls, .box-stage) {
  color: var(--ink);
  background: var(--white);
  border-color: var(--line);
  border-radius: 12px;
}

.box-page .box-stage {
  background: var(--surface-2);
}

.box-page .box-badge {
  color: var(--muted);
  background: var(--surface-2);
  border-color: var(--line);
  border-radius: 6px;
}

.box-page :is(.box-intro > p, .box-controls-note, .box-input-wrap > span, .box-range, .box-file-note, .box-gesture, .box-open-top, .box-dimensions dt, .box-size-order, .box-ready, .box-limits p, .box-mount-intro, .box-mount-output ul, .box-mount-output p) {
  color: var(--muted);
}

.box-page :is(.box-gesture, .box-dimensions, .box-mount-output) {
  border-color: var(--line);
}

.box-page .box-reset,
.workshop-page :is(.workshop-text-button, .workshop-reset-panel button) {
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-color: var(--control-border);
}

.box-page .box-reset:hover,
.workshop-page :is(.workshop-text-button, .workshop-reset-panel button):hover {
  text-decoration-color: currentColor;
  text-decoration-thickness: 2px;
}

.box-page .box-errors {
  color: var(--studio-page-danger);
  background: var(--studio-page-danger-bg);
  border: 1px solid var(--studio-page-danger-border);
  border-radius: 8px;
}

.box-page :is(.box-field-error, .box-invalid-preview),
.workshop-page .workshop-field-error {
  color: var(--studio-page-danger);
}

/* Local workshop demonstration: all progress remains existing demo state. */
.workshop-page :is(.workshop-profile, .workshop-quest, .workshop-history) {
  color: var(--ink);
  background: var(--white);
  border-color: var(--line);
  border-radius: 12px;
}

.workshop-page :is(.workshop-disclosure, .workshop-reset-panel, .workshop-model-link, .workshop-review, .workshop-complete) {
  color: var(--ink);
  background: var(--surface-2);
  border-color: var(--line);
  border-radius: 12px;
}

.workshop-page :is(.workshop-stage, .workshop-avatar) {
  color: var(--ink);
  background: var(--surface-3);
  border-color: var(--line);
  border-radius: 8px;
}

.workshop-page :is(.workshop-intro > p, .workshop-muted, .workshop-fine, .workshop-badge p, .workshop-description, .workshop-model-link > span:first-child, .workshop-quest-details, .workshop-form-note, .workshop-future) {
  color: var(--muted);
}

.workshop-page :is(.workshop-level span, .workshop-history-xp, .workshop-reward, .workshop-quest-details > span) {
  color: var(--ink);
}

.workshop-page :is(.workshop-badge, .workshop-form-note, .workshop-history li) {
  border-color: var(--line);
}

.workshop-page .workshop-badge > span {
  color: var(--muted);
}

.workshop-page .workshop-badge.earned > span {
  color: var(--studio-page-focus);
}

.workshop-page .workshop-profile progress {
  background: var(--surface-3);
  border: 1px solid var(--control-border);
  accent-color: var(--studio-page-focus);
}

.workshop-page .workshop-profile progress::-webkit-progress-bar {
  background: var(--surface-3);
}

.workshop-page .workshop-profile progress::-webkit-progress-value {
  background: var(--studio-page-focus);
}

.workshop-page .workshop-profile progress::-moz-progress-bar {
  background: var(--studio-page-focus);
}

.workshop-page .workshop-history-dot {
  background: var(--studio-page-focus);
}

.workshop-page :is(.workshop-review-note, .workshop-warning) {
  color: var(--studio-page-warning);
  background: var(--studio-page-warning-bg);
  border-color: var(--studio-page-warning-border);
  border-radius: 8px;
}

/* Dialogs and status messages share the same surface language as the pages. */
:is(#model-dialog, #about-dialog, #concept-dialog) {
  color: var(--ink);
  background: var(--white);
  border-color: var(--line);
  border-radius: 12px;
  box-shadow: var(--studio-page-shadow);
}

:is(#model-dialog, #about-dialog, #concept-dialog)::backdrop {
  background: var(--studio-page-backdrop);
}

:is(#about-dialog, #concept-dialog) > p,
:is(#about-dialog, #concept-dialog) :is(.about-callout p, .roadmap p, .roadmap li > span) {
  color: var(--muted);
}

:is(#about-dialog, #concept-dialog) .about-callout {
  color: var(--ink);
  background: var(--surface-2);
  border-color: var(--line);
  border-radius: 12px;
}

.toast {
  color: var(--ink);
  background: var(--surface-3);
  border: 1px solid var(--control-border);
  border-radius: 8px;
  box-shadow: var(--studio-page-shadow);
  line-height: 1.6;
}

/* Keep disabled controls readable even when an active/invalid state remains. */
:is(.model-page, .author-page, .box-page, .workshop-page, #model-dialog, #about-dialog, #concept-dialog) :is(button:disabled, input:disabled, textarea:disabled, select:disabled, [aria-disabled="true"], .button:disabled, .button[aria-disabled="true"], .icon-button:disabled, .card-save:disabled) {
  color: var(--muted);
  background: var(--surface-2);
  border-color: var(--line);
  box-shadow: none;
  cursor: not-allowed;
  opacity: 1;
}

/* Strong, theme-specific focus remains visible inside clipped canvas frames. */
:is(.model-page, .author-page, .box-page, .workshop-page):focus-visible,
:is(.model-page, .author-page, .box-page, .workshop-page, #model-dialog, #about-dialog, #concept-dialog) :is(a, button, input, textarea, select, [tabindex]):focus-visible {
  outline: 3px solid var(--studio-page-focus);
  outline-offset: 3px;
}

:is(.model-page, .box-page, #model-dialog) canvas:focus-visible {
  outline: 3px solid var(--studio-page-focus);
  outline-offset: -5px;
}

@media (forced-colors: active) {
  :is(.model-page, .author-page, .box-page, .workshop-page, #model-dialog, #about-dialog, #concept-dialog) :is(.button, .icon-button, input, textarea, select) {
    border-color: ButtonText;
  }

  :is(.model-page, .author-page, .box-page, .workshop-page, #model-dialog, #about-dialog, #concept-dialog) :is(a, button, input, textarea, select, [tabindex]):focus-visible {
    outline-color: Highlight;
  }

  :is(.model-page, #model-dialog) .detail-tabs button[aria-selected="true"] {
    border-bottom-color: Highlight;
  }
}