/*
 * Murkwater interface system
 *
 * This file intentionally loads after each page stylesheet. It supplies the
 * shared visual language while leaving each tool's functional layout intact.
 * Planner geometry leads the controls and panels; the Quilt leads the header.
 */

:root {
  --mw-canvas: #0d0d0e;
  --mw-canvas-raised: #111114;
  --mw-panel: #1d1d1f;
  --mw-panel-raised: #222022;
  --mw-panel-hover: #29272a;
  --mw-text: #eee8da;
  --mw-muted: #aaa394;
  --mw-faint: #77736c;
  --mw-gold: #d1b66e;
  --mw-gold-strong: #a9823d;
  --mw-plum: #71566e;
  --mw-green: #728f68;
  --mw-red: #b35c5c;
  --mw-line: rgba(238, 225, 195, 0.14);
  --mw-line-strong: rgba(238, 225, 195, 0.25);
  --mw-radius: 0.3rem;
  --mw-header-height: 69px;
  --mw-shadow: 0 12px 28px rgba(0, 0, 0, 0.22);

  /* Bridge legacy pages onto the shared palette. */
  --bg: var(--mw-canvas);
  --bg-accent: #09090a;
  --header: var(--mw-panel);
  --surface: var(--mw-panel);
  --text: var(--mw-text);
  --muted: var(--mw-muted);
  --border: var(--mw-line);
  --shadow: var(--mw-shadow);
}

html {
  color-scheme: dark;
}

body,
button,
input,
select,
textarea,
output,
pre,
code,
kbd {
  font-family: "Inter", Arial, sans-serif;
}

body {
  background-color: var(--mw-canvas);
  color: var(--mw-text);
}

[hidden] {
  display: none !important;
}

.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  color: var(--mw-text);
  font-family: inherit;
  font-weight: 600;
  letter-spacing: -0.015em;
}

p,
li {
  text-wrap: pretty;
}

::selection {
  background: rgba(209, 182, 110, 0.3);
  color: #fff;
}

:focus-visible {
  outline: 2px solid rgba(209, 182, 110, 0.72);
  outline-offset: 2px;
}

.content-library-page {
  --library-bg: var(--mw-canvas);
  --library-panel: var(--mw-panel);
  --library-panel-2: var(--mw-panel-raised);
  --library-border: var(--mw-line);
  --library-muted: var(--mw-muted);
  --library-text: var(--mw-text);
  --library-accent: var(--mw-gold);
  background:
    radial-gradient(circle at 82% 6%, rgba(113, 86, 110, 0.13), transparent 30rem),
    var(--mw-canvas);
}

.content-library-app {
  min-height: calc(100vh - var(--mw-header-height));
}

/* Shared fields and panels. Buttons live in page-shell.css. */
:where(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]), select, textarea) {
  border-radius: var(--mw-radius);
}

:where(input[type="checkbox"], input[type="radio"], input[type="range"]) {
  accent-color: var(--mw-gold-strong);
}

:where(.card, dialog, details, .ingestion-panel, .content-library-panel) {
  border-color: var(--mw-line);
  border-radius: var(--mw-radius);
  box-shadow: none;
}

.card {
  background: var(--mw-panel);
}

.hero-copy,
.section-help,
.account-secondary {
  color: var(--mw-muted);
}

:where(.account-eyebrow, .profile-eyebrow, .pin-admin-eyebrow, .content-library-eyebrow,
  .patch-maker-eyebrow, .eyebrow, .form-kicker) {
  color: var(--mw-gold);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.site-footer {
  border-top: 1px solid var(--mw-line);
  color: var(--mw-muted);
}

/* Public and account pages use the same restrained content width and rhythm. */
:where(.account-container, .profile-container, .pin-admin-container) {
  width: min(1120px, calc(100% - 2rem));
}

:where(.account-panel, .profile-section, .pin-admin-section, .artist-action-card) {
  border-color: var(--mw-line);
  background: var(--mw-panel);
}

/* Patch Maker supplies a useful plum accent without changing the base theme. */
.patch-maker-page {
  background:
    radial-gradient(circle at 82% 6%, rgba(113, 86, 110, 0.16), transparent 30rem),
    var(--mw-canvas);
}

.patch-maker-page :where(.patch-maker-controls, .patch-preview-card, .patch-draft-card),
.content-library-page :where(.content-library-panel, .content-library-card),
.ingestion-page .ingestion-panel {
  border-color: var(--mw-line);
  background-color: var(--mw-panel);
}

.content-library-page :where(
  .content-library-gate,
  .content-library-panel,
  .platform-profile-card,
  .content-summary-card,
  .content-library-list,
  .content-card,
  .content-detail-panel,
  .content-inline-row,
  .content-library-empty,
  .ingestion-panel,
  .ingestion-source-card,
  .ingestion-result
) {
  border-color: var(--mw-line);
  border-radius: var(--mw-radius);
  box-shadow: none;
}

.content-library-page :where(input, select, textarea, button) {
  border-color: var(--mw-line);
  border-radius: var(--mw-radius);
}

.content-library-page :where(input, select, textarea) {
  background-color: var(--mw-canvas-raised);
}

.content-library-page button {
  background: rgba(255, 255, 255, 0.055);
}

.content-library-page button:hover,
.content-library-page button:focus-visible {
  border-color: rgba(209, 182, 110, 0.62);
  background: rgba(255, 255, 255, 0.09);
}

/* Quest Maker and Lore Loom share one authoring-workbench treatment. */
body:has(.quest-layout),
body:has(.loom-layout) {
  --ink: var(--mw-canvas);
  --panel: var(--mw-panel);
  --panel-soft: var(--mw-panel-raised);
  --line: var(--mw-line);
  --line-strong: var(--mw-line-strong);
  --cream: var(--mw-text);
  --text: var(--mw-text);
  --muted: var(--mw-muted);
  --gold: var(--mw-gold);
}

body:has(.quest-layout) :where(button, .file-button, input, select, textarea),
body:has(.loom-layout) :where(button, .file-button, input, select, textarea) {
  border-radius: var(--mw-radius);
}

body:has(.quest-layout) :where(.library-panel, .workspace-panel, .inspector-panel),
body:has(.loom-layout) :where(.loom-library, .loom-workspace, .loom-inspector) {
  border-color: var(--mw-line);
  background-color: var(--mw-canvas-raised);
}

body:has(.quest-layout) :where(.quest-summary, .graph-section, .links-section, .validation-section, .step-node),
body:has(.loom-layout) :where(.entry-summary, .loom-section, .fragment-card, .relationship-card, .entity-link-card) {
  border-color: var(--mw-line);
  border-radius: var(--mw-radius);
  background-color: var(--mw-panel);
}

/* Keep the smaller private utilities on the same geometry. */
:where(.pin-admin-container, .account-container, .profile-container, .dev-access-shell)
  :where(button, input, select, textarea, .button, .card) {
  border-radius: var(--mw-radius);
}

.dev-access-shell :where(.dev-preview-banner, .dev-tool-shortcuts a) {
  border-color: var(--mw-line);
  border-radius: var(--mw-radius);
}

/* Art Shack: dense catalog layout, expressed with the same components. */
body:has(.shack-layout) {
  --ink: var(--mw-text);
  --panel: var(--mw-panel);
  --panel-2: var(--mw-panel-raised);
  --line: var(--mw-line);
  --gold: var(--mw-gold);
  background: var(--mw-canvas);
}

.shack-layout {
  min-height: calc(100vh - var(--mw-header-height));
  background: var(--mw-canvas);
}

.shack-layout :where(.library-panel, .inspector-panel) {
  border-color: var(--mw-line);
  background: var(--mw-canvas-raised);
}

.shack-layout .workspace-panel {
  padding: 1.5rem;
}

.shack-layout :where(.family-summary, .version-card, .relationship-card, .repeater-card, .art-upload-box) {
  border-color: var(--mw-line);
  border-radius: var(--mw-radius);
  background-color: var(--mw-panel);
}

.shack-layout .family-summary {
  background:
    radial-gradient(circle at 84% 0, rgba(113, 86, 110, 0.2), transparent 45%),
    var(--mw-panel);
}

.shack-layout :where(input, select, textarea) {
  border-color: var(--mw-line);
  border-radius: var(--mw-radius);
  background-color: var(--mw-canvas-raised);
}

.shack-layout :where(button, .file-button) {
  border-color: var(--mw-line-strong);
  border-radius: var(--mw-radius);
  background: rgba(255, 255, 255, 0.055);
}

.shack-layout :where(.family-card.active, .version-card.active) {
  border-color: rgba(209, 182, 110, 0.72);
  background: rgba(169, 130, 61, 0.12);
}

.shack-layout .inspector-tabs button.active {
  border-bottom-color: var(--mw-gold);
  color: var(--mw-gold);
}

/* Artist Workshop: quieter handoff cards, matching Art Shack materials. */
.artist-action-grid {
  gap: 0.8rem;
}

.artist-action-card,
.artist-asset-card,
.art-lawbook-dialog,
.art-lawbook-standards section {
  border-color: var(--mw-line);
  border-radius: var(--mw-radius);
  background: var(--mw-panel);
}

.artist-asset-card {
  overflow: clip;
}

.artist-asset-preview {
  border-bottom: 1px solid var(--mw-line);
  background: var(--mw-canvas-raised);
}

.artist-action-card :where(input, select, textarea),
.artist-asset-form :where(input, select, textarea) {
  border-color: var(--mw-line);
  border-radius: var(--mw-radius);
  background: var(--mw-canvas-raised);
}

.art-lawbook-header {
  border-bottom-color: var(--mw-line);
  background: var(--mw-panel);
}

@media (max-width: 900px) {
}

@media (max-width: 700px) {
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}