/* Approved IRIS Design / 02 Ahumado.
 * Visual layer only. Provenance: docs/theme-revision6.md.
 * The photograph and its rendering canvas must never inherit tint or blur.
 */
:root {
  font-family: 'Avenir Next', 'Segoe UI', Arial, sans-serif;
  color: #fff7eb;
  background: #97887e;
  --ink: #fff7eb;
  --muted: #eee0d0;
  --gold: #ffe0a7;
  --line: rgba(255,244,227,.44);
  --smoke: rgba(77,61,52,.36);
  --button: linear-gradient(130deg,rgba(64,51,42,.75),rgba(46,39,33,.72));
  --button-active: linear-gradient(130deg,rgba(111,82,41,.78),rgba(57,43,27,.84));
  --active-glow: inset 0 0 19px #ffcf704d,inset 0 0 2px #fff9,0 0 0 1px #fff0b84d,0 0 12px #ffce7b70;
}
body { color: var(--ink); }
.scene { background: url(assets/iris-design-scene-clean.png) center / cover no-repeat; }
button:hover:not(:disabled) { filter: none; }
button:focus-visible,input:focus-visible,summary:focus-visible {
  outline: 3px solid #fff0c8;
  outline-offset: 4px;
}

/* The cranium keeps its proportions; only the lateral scenery stretches. */
.header {
  --header-height: 108px;
  --header-pad: 36px;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border: 1px solid rgba(255,240,219,.5);
  border-radius: 14px;
  box-shadow: inset 0 1px 0 #fff5,0 8px 30px #30221820;
}
.header-scene { position: absolute; inset: 0; display: flex; z-index: -1; pointer-events: none; }
.header-scene svg { height: 100%; display: block; flex: none; }
.header-scene-left { width: calc(var(--header-height)*480/420); }
.header-scene-right { width: calc(100% - var(--header-height)*480/420); }
.brand { padding-left: calc(var(--header-height)*480/420 - var(--header-pad)); flex-shrink: 0; }
.brand img { mix-blend-mode: normal; }
.brand h1,.brand .eyebrow { color: #fff7eb; text-shadow: 0 1px 6px #30221855; }
.edition { color: #fff1dc; text-shadow: 0 1px 6px #30221855; }
.dot { background: #ffdfa4; box-shadow: 0 0 10px #ffd69c; }

.editor {
  background: linear-gradient(120deg,rgba(109,92,79,.35),rgba(65,52,43,.46));
  border-color: rgba(255,240,219,.68);
  border-radius: 24px;
  box-shadow: inset 0 1px 0 #fff5,inset 0 0 30px #fff1,0 12px 40px #30221820,0 0 10px #fff1;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.viewer {
  background: transparent;
  border-color: rgba(255,240,219,.68);
  border-radius: 24px;
  box-shadow: 0 12px 40px #30221820;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.stage,.stage canvas {
  background: transparent;
  filter: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.stage canvas { opacity: 1; mix-blend-mode: normal; }
.view-tag,.chips span,.summary {
  color: #fff1dc;
  background: rgba(59,46,38,.28);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.chips span { border-color: var(--line); }
.summary { border-radius: 9px; margin: 0 0 10px; }
#loading { color: #fff1dc; background: #65554b; }

.quiet,.reset,.choice,.preset,.case,.view-switch button,.tabs button {
  color: #eee1d0;
  background: var(--button);
  border: 1px solid #fff6;
  border-radius: 9px;
}
.quiet:hover:not(:disabled),.reset:hover:not(:disabled),.case:hover:not(:disabled),
.choice:hover:not(:disabled):not([aria-pressed=true]),.preset:hover:not(:disabled):not([aria-pressed=true]),
.view-switch button:hover:not(:disabled):not([aria-pressed=true]),.tabs button:hover:not(:disabled):not([aria-pressed=true]) {
  background: rgba(105,80,55,.8);
  border-color: #ffe0ab;
}
.choice[aria-pressed=true],.zig-section .choice[aria-pressed=true],
.preset[aria-pressed=true],.view-switch button[aria-pressed=true],
.tabs button[aria-pressed=true] {
  border: 1px solid #ffe4ad;
  color: #fff0c9;
  background: var(--button-active);
  box-shadow: var(--active-glow);
}
.choice svg,.case svg { color: #f8e0b8; }
.choice small,.preset small,.case small { color: #eee0d0; }
.case .num { color: #ffe0a7; }
.tabs { gap: 5px; border-bottom: 0; }
.tabs button[aria-pressed=true]:after { content: none; }
.view-switch { background: rgba(59,46,38,.28); border-color: var(--line); }
.hint,.zig-row p,.scale p,.status,.save-note,.modal-copy { color: #eee0d0; }
.tone-name { color: #ffe0a7; }
.scale input { color: #fff7eb; background: rgba(46,39,33,.72); border-color: var(--line); color-scheme: dark; }
.text-button,.tools button { color: #fff1dc; }
.text-button:hover:not(:disabled),.tools button:hover:not(:disabled) { color: #ffe0a7; background: #493c3266; }
.generate {
  border: 1px solid #ffe2a4;
  border-radius: 30px;
  color: #fff0c8;
  background: linear-gradient(130deg,#54402ad9,#352c21e8);
  box-shadow: inset 0 0 18px #f5c76825,0 0 9px #ffdd9b50;
}
.generate:hover:not(:disabled) { box-shadow: inset 0 0 24px #f5c76844,0 0 16px #ffdd9b70; }
.generate:disabled { opacity: .48; box-shadow: none; }
.toggle { border-color: #f7dec652; background: #493c3266; }
.toggle[aria-checked=true] { border-color: #ffe3a7; background: #8c683d8c; box-shadow: var(--active-glow); }
.toggle[aria-checked=true] span { background: #fff0c5; }
.error { background: #493a30; color: #ffe1cb; border-color: #d5a47c; }
footer { color: #fff1dc; text-shadow: 0 1px 4px #302218aa; }

dialog {
  color: var(--ink);
  background: linear-gradient(120deg,rgba(109,92,79,.94),rgba(65,52,43,.96));
  border-color: rgba(255,240,219,.68);
  border-radius: 24px;
  box-shadow: inset 0 1px 0 #fff5,0 20px 70px #30221855;
}
dialog::backdrop { background: rgba(38,30,24,.8); }
.enlarged,.reference { filter: none; opacity: 1; mix-blend-mode: normal; }

@media(max-width:1050px) and (min-width:701px) {
  .header { --header-pad: 24px; }
  .edition { display: none; }
  .header>.quiet { margin-left: auto; }
}
@media(max-width:700px) {
  .header { --header-height: 64px; --header-pad: 16px; }
  .viewer,.editor { border-radius: 18px; }
  .summary { margin-bottom: 6px; }
  .tabs { gap: 4px; }
}
@media(max-width:360px) {
  .brand { gap: 7px; }
  .brand img { width: 22px; height: 24px; }
  .brand h1 { font-size: 13px; }
  .header>.quiet { padding: 8px 6px; }
}

.model-picker { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:7px; margin:0 0 16px; }
.model-picker .choice { min-height:42px; }