/* ZUI identity: navy for navigation, blue for photos, teal for voice,
   warm paper for shared facts. White surfaces belong to editable content. */
:root {
  --bg: #eef3f8;
  --ink: #17324d;
  --muted: #4d6278;
  --line: #d4e0eb;
  --shadow: 0 5px 18px #17324d08;
}
.site-header { border-bottom-color: #d4e0eb; box-shadow: 0 2px 12px #17324d05; }
.brand { display: inline-flex; align-items: center; gap: .65rem; text-decoration: none; }
.brand .brand-mark { width: 44px; height: 44px; flex: 0 0 44px; }
.brand .brand-name { display: inline-flex; align-items: center; color: #17324d; font-weight: 800; letter-spacing: -.05em; }
.brand .brand-year { margin-left: .5rem; padding: .2rem .4rem; border-radius: .35rem; background: #e4f2ee; color: #146456; font-size: .78rem; font-weight: 750; letter-spacing: .025em; }
.role-brand > .role-label { padding-left: 55px; }
.journey-menu { background: #e8eef5; border: 1px solid #d6e1ec; border-radius: 15px; }
.journey-step > a:hover { background: #f9fcff; }
.scene-page-heading {
  display: grid; grid-template-columns: minmax(0, 1fr) 250px;
  align-items: center; gap: 1rem; padding: 1.4rem 1.5rem;
  border: 1px solid #d4e3ea; border-radius: 20px;
  background: linear-gradient(115deg, #edf4ff, #eaf6f2 72%, #fbf2e6);
  box-shadow: 0 6px 24px #17324d06;
}
.scene-page-heading .eyebrow { color: #27517b; font-weight: 750; }
.scene-page-heading h1 { font-size: clamp(1.6rem, 2.6vw, 2.15rem); }
.scene-page-heading .button { margin-top: .35rem; background: #ffffffbd; border-color: #b8d0df; }
.scene-brand-art-wrapper { display: block; min-width: 0; }
.scene-brand-art { display: block; width: 100%; height: 175px; object-fit: contain; }
.scene-workspace > .card { border-radius: 17px; box-shadow: 0 4px 20px #17324d05; }
.scene-workspace .photo-editor { gap: 1rem; }
.scene-workspace .photo-slot {
  padding: 1rem; border: 1px solid #bfd2e5; border-radius: 15px;
  background: linear-gradient(155deg, #eaf2fb, #f3f7fc);
  box-shadow: 0 3px 10px #17324d06;
}
.photo-card-heading { display: flex; align-items: center; gap: .7rem; margin-bottom: .85rem; }
.photo-card-number { display: grid; place-items: center; width: 38px; height: 38px; flex: 0 0 38px; border-radius: 12px; background: #173e68; color: white; font-size: 1.05rem; font-weight: 750; }
.photo-card-heading strong { display: block; color: #1c4268; font-size: .96rem; }
.photo-card-heading span:not(.photo-card-number) { display: block; color: #4d6278; font-size: .76rem; }
.scene-workspace .photo-slot img,.scene-workspace .photo-placeholder { height: 185px; border: 1px solid #cbdbea; background: #dfe9f3; border-radius: 9px; }
.scene-workspace .photo-slot input[type=file] { background: #f9fcff; border-color: #b9cfe3; }
.scene-workspace .photo-slot textarea { background: white; border-color: #abc3dc; border-radius: 9px; padding: .8rem; line-height: 1.6; }
.scene-workspace .photo-description label { color: #193f64; font-weight: 750; }
.scene-workspace .photo-description .hint { color: #4c6178; }
.scene-workspace .photo-slot > button.secondary { background: #ffffffa6; border-color: #b9cee0; }
.scene-workspace .reference-stability { background: #fff5e6; border-color: #e5ceaa; }
.scene-workspace .reference-stability h2,.scene-workspace .reference-stability > .field > label { color: #704719; }
.scene-workspace .reference-stability textarea { min-height: 130px; background: white; border-color: #ccb28e; border-radius: 9px; line-height: 1.6; }
.scene-workspace .save-bar { background: #eaf2fc; border: 1px solid #bfd2e9; border-radius: 17px; }
.scene-workspace .card > details:not(.voice-input),.scene-workspace .text-example,.scene-workspace .legacy-reference {
  padding: .55rem .85rem; border: 1px solid #d2cde7;
  border-radius: 10px; background: #f2effa;
}
.scene-workspace .card > details:not(.voice-input) > summary,.scene-workspace .text-example > summary,.scene-workspace .legacy-reference > summary { color: #544478; }
.voice-input { padding: .4rem .9rem .9rem; border: 1px solid #afd2c8; border-radius: 12px; background: #e6f3ee; }
.voice-input:not([open]) { padding-bottom: .4rem; }
.voice-input[open] { border-color: #5d9c8a; background: #f1f9f6; box-shadow: 0 5px 18px #1255460b; }
.voice-input > summary { color: #185947; gap: .6rem; }
.voice-input > summary::before {
  content: ''; width: 27px; height: 27px; flex: 0 0 27px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 28' fill='none'%3E%3Crect width='28' height='28' rx='8' fill='%23cce8dc'/%3E%3Crect x='11' y='5' width='6' height='12' rx='3' stroke='%23185947' stroke-width='1.8'/%3E%3Cpath d='M8 13v1a6 6 0 0 0 12 0v-1M14 20v3M11 23h6' stroke='%23185947' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat;
}
.voice-input > summary [data-voice-summary] { min-width: 0; flex: 1; }
.voice-input > summary,.scene-workspace .card > details:not(.voice-input) > summary,.scene-workspace .text-example > summary,.scene-workspace .legacy-reference > summary { display: flex; align-items: center; list-style: none; }
.voice-input > summary::-webkit-details-marker,.scene-workspace .card > details:not(.voice-input) > summary::-webkit-details-marker { display: none; }
.voice-input > summary::after,.scene-workspace .card > details:not(.voice-input) > summary::after,.scene-workspace .text-example > summary::after,.scene-workspace .legacy-reference > summary::after {
  content: '+ Rozbalit'; margin-left: auto; padding: .25rem .45rem;
  flex: 0 0 auto; border: 1px solid #c9d9d4; border-radius: .4rem;
  background: #ffffffc9; color: #3c5a50; font-size: .7rem; font-weight: 650;
}
.voice-input[open] > summary::after,.scene-workspace .card > details:not(.voice-input)[open] > summary::after,.scene-workspace .text-example[open] > summary::after,.scene-workspace .legacy-reference[open] > summary::after { content: '− Sbalit'; }
.voice-destination { border-left-color: #26896b; background: #e0f1e8; color: #184f3c; }
.voice-input .voice-browser-options,.voice-input .voice-original { padding: .25rem .7rem; border: 1px solid #ccddd6; border-radius: 9px; background: #ffffffc9; }
.voice-input .voice-browser-options > summary,.voice-input .voice-original > summary { color: #355c4d; }
.voice-input .voice-token-setup { padding: .9rem; border: 1px solid #e3c68f; border-radius: 10px; background: #fff5df; }
.voice-input .voice-transcript { border-color: #93b8a8; border-radius: 9px; }
.voice-input.voice-input-compact:not([open]) { padding: .15rem .45rem; border: 1px solid #bfd8cd; background: #e6f3ee; }
.voice-input-compact > summary::before { display: none; }
.voice-input-compact > summary::after { font-size: .62rem; padding: .2rem; }
@media (max-width: 760px) {
  .scene-page-heading { grid-template-columns: minmax(0, 1fr) 140px; padding: 1.1rem; }
  .scene-brand-art { height: 130px; }
}
@media (max-width: 600px) {
  .scene-page-heading { grid-template-columns: minmax(0, 1fr); }
  .scene-brand-art-wrapper { justify-self: end; }
  .scene-brand-art { width: 140px; height: 90px; justify-self: end; margin-top: -.5rem; }
  .scene-workspace .photo-slot { padding: .85rem; }
  .voice-input { padding-left: .7rem; padding-right: .7rem; }
  .voice-input > summary { gap: .4rem; }
}