/* Socren v42 · "Mesa de luz" — shared foundation.
   Loaded last. Identity A. Diálogo: azul #243B4A, granate #8B1E3F, marfil #F7F3EA,
   rosa #D998AE; dark by default. Materials: glass over a live topographic field,
   ivory paper only where a document is the protagonist (sources, case dossier).
   Every container keeps a rounded, visible edge; graphics live inside it. */
@font-face { font-family: 'Instrument Sans'; src: url('/static/assets/fonts/InstrumentSans-Variable.woff2') format('woff2'); font-weight: 400 700; font-stretch: 75% 100%; font-style: normal; font-display: swap }
@font-face { font-family: 'Instrument Sans'; src: url('/static/assets/fonts/InstrumentSans-Italic-Variable.woff2') format('woff2'); font-weight: 400 700; font-stretch: 75% 100%; font-style: italic; font-display: swap }
@font-face { font-family: 'JetBrains Mono'; src: url('/static/assets/fonts/JetBrainsMono-Variable.woff2') format('woff2'); font-weight: 100 800; font-style: normal; font-display: swap }

:root {
  interpolate-size: allow-keywords;
  --font-display: Fraunces, Georgia, serif;
  --font-body: 'Instrument Sans', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;
  /* Canonical colours plus derived materials. */
  --r-night: #101923;
  --r-deep: #0b1219;
  --r-slate: #1b2430;
  --r-panel: #253241;
  --r-blue: #243b4a;
  --r-blue-lit: #35566b;
  --r-wine: #8b1e3f;
  --r-wine-lit: #a8325a;
  --r-rose: #d998ae;
  --r-rose-soft: #e9bfcd;
  --r-paper: #f7f3ea;
  --r-paper-shade: #ebe4d6;
  --r-ink: #18222d;
  --r-muted: #aeb8c3;
  --r-dim: #7f8c99;
  --r-good: #9fd3b4;
  --r-warn: #e8c98a;
  --r-bad: #f2a3b3;
  --r-line: rgb(174 184 195 / .16);
  --r-edge: rgb(217 152 174 / .26);
  --r-edge-strong: rgb(217 152 174 / .55);
  --r-glass: linear-gradient(155deg, rgb(43 60 78 / .78), rgb(24 33 45 / .72) 60%, rgb(54 26 42 / .62));
  --r-glass-flat: rgb(27 36 48 / .82);
  --r-glass-hi: inset 0 1px 0 rgb(255 255 255 / .07), inset 0 0 0 1px rgb(255 255 255 / .015);
  --r-lift: 0 30px 70px -32px rgb(2 6 10 / .9), 0 10px 24px -14px rgb(2 6 10 / .7);
  --r-lift-sm: 0 14px 30px -18px rgb(2 6 10 / .85);
  --r-radius-xs: 8px;
  --r-radius-s: 12px;
  --r-radius-m: 18px;
  --r-radius-l: 26px;
  --r-radius-xl: 34px;
  --r-ease: cubic-bezier(.2, .8, .16, 1);
  --r-ease-in: cubic-bezier(.5, 0, .75, 0);
  /* A small overshoot spring for selection and lift (CSS linear() easing). */
  --r-spring: linear(0, .009, .035 2.1%, .141 4.4%, .723 12.9%, .938 16.7%, 1.017 19.8%, 1.06 23%, 1.07 26.3%, 1.042 31.6%, 1.006 38.5%, .992 45.6%, 1.002 61%, 1);
  --r-focus: 0 0 0 2px var(--r-night), 0 0 0 4px var(--r-rose), 0 0 22px 4px rgb(217 152 174 / .35);
}
html { background: var(--r-night); color-scheme: dark }
body { font-family: var(--font-body); font-size: 15px; line-height: 1.6; font-optical-sizing: auto; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; background: var(--r-night) }
button, input, select, textarea { font-family: var(--font-body) }
h1, h2, h3, h4 { text-wrap: balance }
p, li, dd { text-wrap: pretty }
::selection { background: rgb(217 152 174 / .38); color: var(--r-paper) }
:focus-visible { outline: none }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible, [role='button']:focus-visible, [tabindex]:focus-visible { outline: none; box-shadow: var(--r-focus) }
* { scrollbar-width: thin; scrollbar-color: rgb(217 152 174 / .3) transparent }

/* The shared WebGL field and its CSS fallback. */
.socren-field { position: absolute; inset: 0; width: 100%; height: 100%; display: block; pointer-events: none }
.socren-field-fallback {
  background:
    radial-gradient(ellipse 60% 50% at 78% 18%, rgb(139 30 63 / .32), transparent 70%),
    radial-gradient(ellipse 70% 60% at 12% 82%, rgb(53 86 107 / .45), transparent 70%),
    repeating-radial-gradient(circle at 70% 40%, transparent 0 34px, rgb(217 152 174 / .05) 35px 36px),
    var(--r-night);
}
/* A lost context shows the CSS field until the GPU hands it back. */
.socren-field-fallback > .socren-field { visibility: hidden }
/* Field diagnostics (?campo=diagnostico or SocrenField.debug(true)): a survey tag in a corner. */
.socren-field-telemetry {
  position: fixed; z-index: 95; left: 12px; bottom: 12px; max-width: min(460px, calc(100vw - 24px)); padding: 8px 11px 9px;
  border-radius: 12px; border: 1px solid rgb(217 152 174 / .3); border-left: 3px solid var(--r-rose); background: rgb(11 18 25 / .84); backdrop-filter: blur(10px);
  color: #cfd8df; font: 500 10.5px/1.55 var(--font-mono); letter-spacing: .01em; white-space: pre; overflow: hidden; text-overflow: ellipsis; pointer-events: none;
  box-shadow: 0 12px 30px -16px #000;
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important }
}

/* =====================================================================
   INTERIOR · shell
   ===================================================================== */
.relieve .app-shell:not(.anonymous) .workspace { position: relative; isolation: isolate; background: var(--r-night); grid-template-rows: auto minmax(0, 1fr) }
.relieve-field { position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .9 }
.relieve-field::after { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 80% 70% at 50% 40%, transparent, rgb(11 18 25 / .55)); pointer-events: none }
html[data-mood='reading'] .relieve-field { opacity: .55 }
html[data-mood='admin'] .relieve-field { opacity: .5 }
.relieve .app-shell.anonymous .relieve-field { display: none }
.relieve .app-shell:not(.anonymous) .topbar {
  position: relative; z-index: 12; margin: 12px 16px 0; min-height: 60px; padding: 8px 10px 8px 16px; gap: 14px;
  border: 1px solid var(--r-edge); border-radius: 22px; background: rgb(16 25 35 / .66);
  backdrop-filter: blur(20px) saturate(1.4); box-shadow: var(--r-lift-sm), var(--r-glass-hi);
}
.relieve .app-shell:not(.anonymous) .topbar { padding-left: 58px }
.relieve .app-shell:not(.anonymous) .topbar-brand { margin-left: 0 }
#study-nav.study-nav { position: relative; isolation: isolate; gap: 2px; padding: 4px; border-radius: 999px; border: 1px solid var(--r-line); background: rgb(11 18 25 / .55); box-shadow: inset 0 1px 3px rgb(0 0 0 / .4) }
#study-nav.study-nav button { position: relative; z-index: 1; min-height: 40px; padding: 0 20px; border: 0; border-radius: 999px; background: transparent !important; box-shadow: none !important; color: #c9d2da; font-size: 14px; font-weight: 550; transition: color .3s }
#study-nav.study-nav button:hover { color: var(--r-paper) }
#study-nav.study-nav button[aria-current='page'], #study-nav.study-nav button[aria-current='true'] { color: var(--r-paper) }
.relieve-indicator { position: absolute; left: 0; top: 0; z-index: 0; width: var(--ind-w, 0); height: var(--ind-h, 0); transform: translate(var(--ind-x, 0), var(--ind-y, 0)); border-radius: 999px; pointer-events: none; transition: transform .55s var(--r-spring), width .55s var(--r-spring), height .4s var(--r-ease), opacity .3s }
#study-nav .relieve-indicator { background: linear-gradient(115deg, #a3264f, var(--r-wine) 50%, #5a1f37); box-shadow: 0 6px 18px -6px rgb(139 30 63 / .9), inset 0 1px rgb(255 255 255 / .2) }
.top-actions { display: flex; align-items: center; gap: 8px }
.relieve-command { display: inline-flex; align-items: center; gap: 10px; min-height: 40px; padding: 0 8px 0 14px; border-radius: 999px; border: 1px solid var(--r-line); background: rgb(11 18 25 / .45); color: var(--r-muted); font-size: 13px; transition: border-color .25s, color .25s, background .25s }
.relieve-command:hover { border-color: var(--r-edge-strong); color: var(--r-paper); background: rgb(37 50 65 / .6) }
.relieve-command kbd { font-family: var(--font-mono); font-size: 11px; padding: 3px 7px; border-radius: 7px; border: 1px solid var(--r-line); background: rgb(255 255 255 / .04); color: #d6dde4 }
.relieve .top-actions > #admin-button { min-height: 40px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--r-edge); background: rgb(217 152 174 / .07); color: #e7d4db; font-size: 13px }
.relieve .top-actions > #admin-button:hover { border-color: var(--r-rose); background: rgb(217 152 174 / .14) }
.relieve .profile { width: 40px; height: 40px; min-height: 40px; border-radius: 50%; border: 1px solid var(--r-edge-strong); background: conic-gradient(from 200deg, var(--r-wine), var(--r-blue-lit), var(--r-wine)); color: var(--r-paper); font-family: var(--font-display); font-size: 17px; box-shadow: 0 0 0 4px rgb(217 152 174 / .08); transition: box-shadow .3s, transform .4s var(--r-spring) }
.relieve .profile:hover, .relieve .profile[aria-expanded='true'] { transform: scale(1.06); box-shadow: 0 0 0 5px rgb(217 152 174 / .18) }
.relieve #crumb { font-size: 10.5px; letter-spacing: .2em; color: var(--r-rose) }

/* Sidebar: a glass drawer with index cards. */
.relieve .app-shell:not(.anonymous) .sidebar {
  margin: 12px 0 12px 12px; padding: 18px 14px 14px; border-radius: 24px; border: 1px solid var(--r-edge);
  background: linear-gradient(170deg, rgb(30 44 59 / .92), rgb(16 25 35 / .94)); backdrop-filter: blur(20px); box-shadow: var(--r-lift);
}
.relieve .sidebar .brand { margin: 2px 6px 16px }
.relieve .sidebar #new-chat { position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; border-radius: 16px; font-weight: 600; font-size: 14px; background: linear-gradient(120deg, #a3264f, var(--r-wine) 55%, #5a1f37); border: 1px solid rgb(233 191 205 / .35); box-shadow: inset 0 1px rgb(255 255 255 / .18), 0 14px 30px -16px rgb(139 30 63 / .9) }
.relieve .sidebar .search { position: relative; margin: 14px 0 12px }
.relieve .sidebar .search input { width: 100%; min-height: 42px; padding: 0 14px 0 36px; border-radius: 14px; border: 1px solid var(--r-line); background: rgb(11 18 25 / .5); font-size: 13.5px }
.relieve .sidebar .search > span[aria-hidden] { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); color: var(--r-rose); pointer-events: none }
.relieve .sidebar-section-label { margin: 6px 8px 8px; font-size: 10px; letter-spacing: .22em; color: var(--r-rose) }
.relieve .conversation-list { display: grid; gap: 6px; align-content: start; padding: 2px }
.relieve .conversation-row { position: relative; overflow: hidden; display: grid; gap: 4px; padding: 12px 14px 12px 16px; margin: 0; border-radius: 14px; border: 1px solid transparent; border-left: 0; background: rgb(255 255 255 / .02); text-align: left; transition: background .25s, border-color .25s, transform .4s var(--r-spring) }
.relieve .conversation-row::before { content: ''; position: absolute; left: 0; top: 12px; bottom: 12px; width: 3px; border-radius: 3px; background: var(--r-rose); transform: scaleY(0); transition: transform .4s var(--r-spring) }
.relieve .conversation-row:hover { background: rgb(37 50 65 / .7); border-color: var(--r-line); transform: translateX(2px) }
.relieve .conversation-row:hover::before { transform: scaleY(.5) }
.relieve .conversation-row[aria-current='page'] { background: linear-gradient(120deg, rgb(139 30 63 / .32), rgb(37 50 65 / .7)); border-color: var(--r-edge) }
.relieve .conversation-row[aria-current='page']::before { transform: scaleY(1) }
.relieve .conversation-row strong { font-size: 13.5px; font-weight: 550; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden }
.relieve .conversation-row small { font-family: var(--font-mono); font-size: 10.5px; color: var(--r-dim) }
.relieve .side-footer { margin-top: auto; padding-top: 12px; border-top: 1px solid var(--r-line) }
.relieve .app-shell:not(.anonymous).sidebar-collapsed .sidebar-toggle { left: 26px; top: 25px }
.relieve .sidebar-toggle { width: 34px; height: 34px; min-height: 34px; border-radius: 50%; border: 1px solid var(--r-edge-strong); background: rgb(27 36 48 / .9); backdrop-filter: blur(10px); color: var(--r-paper); box-shadow: var(--r-lift-sm); transition: transform .45s var(--r-spring), background .25s; top: 25px }
.relieve .sidebar-toggle:hover { background: var(--r-wine); transform: scale(1.08) }
.relieve .app-shell:not(.anonymous):not(.sidebar-collapsed) .sidebar-toggle { left: calc(var(--sidebar-width) - 18px) }
.relieve .sidebar-resizer::after { inset: 20% 3px; border-radius: 4px }

/* =====================================================================
   INTERIOR · controls (one material system)
   ===================================================================== */
.relieve-pressable { position: relative; overflow: hidden; isolation: isolate }
.relieve-ripple { position: absolute; left: var(--rx); top: var(--ry); width: var(--rs); height: var(--rs); margin: calc(var(--rs) / -2) 0 0 calc(var(--rs) / -2); border-radius: 50%; background: radial-gradient(circle, rgb(247 243 234 / .35), rgb(217 152 174 / .12) 45%, transparent 70%); transform: scale(0); pointer-events: none; z-index: -1; animation: relieve-ripple .7s var(--r-ease) forwards }
@keyframes relieve-ripple { to { transform: scale(1); opacity: 0 } }
.relieve .app-shell:not(.anonymous) :is(.primary, button.primary) {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 44px; padding: 0 22px; border-radius: 999px;
  border: 1px solid rgb(233 191 205 / .38); color: var(--r-paper); font-weight: 650; font-size: 14px; letter-spacing: -.005em;
  background: linear-gradient(120deg, #a3264f, var(--r-wine) 55%, #5a1f37); box-shadow: inset 0 1px rgb(255 255 255 / .18), 0 14px 30px -16px rgb(139 30 63 / .95);
  transition: transform .4s var(--r-spring), box-shadow .3s, filter .3s;
}
.relieve .app-shell:not(.anonymous) .primary:hover:not(:disabled) { transform: translateY(-1px); box-shadow: inset 0 1px rgb(255 255 255 / .22), 0 18px 36px -14px rgb(168 50 90 / .95) }
.relieve .app-shell:not(.anonymous) .primary:active:not(:disabled) { transform: scale(.97) }
.relieve .app-shell:not(.anonymous) .primary:disabled { filter: saturate(.4) brightness(.8); cursor: progress; background-image: linear-gradient(110deg, transparent 30%, rgb(255 255 255 / .18) 50%, transparent 70%), linear-gradient(120deg, #7a2a46, #5a1f37); background-size: 220% 100%, 100% 100%; animation: relieve-sheen 1.4s linear infinite }
@keyframes relieve-sheen { from { background-position: 120% 0, 0 0 } to { background-position: -120% 0, 0 0 } }
.relieve :is(.tool, .quiet, .tab):not(.modal-close):not(.study-back) {
  min-height: 38px; padding: 0 15px; border-radius: 999px; border: 1px solid var(--r-edge); background: rgb(27 36 48 / .55); color: #e3e8ec;
  font-size: 13px; font-weight: 550; transition: background .25s, border-color .25s, color .25s, transform .4s var(--r-spring);
}
.relieve :is(.tool, .quiet, .tab):not(.modal-close):not(.study-back):hover:not(:disabled) { background: rgb(217 152 174 / .12); border-color: var(--r-edge-strong); color: var(--r-paper) }
.relieve :is(.tool, .quiet):active:not(:disabled) { transform: scale(.97) }
.relieve .app-shell:not(.anonymous) input:not([type='checkbox']):not([type='radio']):not([type='range']):not(.relieve-select-native),
.relieve .app-shell:not(.anonymous) textarea:not(.composer textarea),
.relieve .modal :is(input:not([type='checkbox']):not([type='radio']), textarea) {
  border-radius: 14px; border: 1px solid rgb(174 184 195 / .22); background: rgb(11 18 25 / .55); color: var(--r-paper); font-size: 14.5px;
  min-height: 44px; padding: 10px 14px; box-shadow: inset 0 1px 2px rgb(0 0 0 / .35); transition: border-color .25s, box-shadow .3s, background .25s;
}
.relieve .app-shell:not(.anonymous) :is(input, textarea):hover:not(:focus) { border-color: rgb(217 152 174 / .35) }
.relieve .app-shell:not(.anonymous) :is(input, textarea):focus, .relieve .modal :is(input, textarea):focus { outline: none; border-color: var(--r-rose); background: rgb(16 25 35 / .8); box-shadow: 0 0 0 4px rgb(217 152 174 / .14), inset 0 1px 2px rgb(0 0 0 / .3) }
.relieve input:user-invalid, .relieve input[aria-invalid='true'] { border-color: var(--r-bad) !important; box-shadow: 0 0 0 4px rgb(242 163 179 / .12) !important }
.relieve label.field { display: grid; gap: 8px; font-size: 12px; font-weight: 600; letter-spacing: .04em; color: #cdd6dd }
.relieve input[type='checkbox'], .relieve input[type='radio'] {
  appearance: none; flex: none; width: 20px; height: 20px; margin: 0; display: inline-grid; place-content: center; border: 1.5px solid var(--r-edge-strong); background: rgb(11 18 25 / .6); cursor: pointer; transition: background .25s, border-color .25s, box-shadow .3s;
}
.relieve input[type='checkbox'] { border-radius: 7px }
.relieve input[type='radio'] { border-radius: 50% }
.relieve input[type='checkbox']::after { content: ''; width: 10px; height: 6px; border-left: 2px solid var(--r-paper); border-bottom: 2px solid var(--r-paper); transform: translateY(-1px) rotate(-45deg) scale(0); transition: transform .35s var(--r-spring) }
.relieve input[type='radio']::after { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--r-paper); transform: scale(0); transition: transform .35s var(--r-spring) }
.relieve input:is([type='checkbox'], [type='radio']):checked { background: var(--r-wine); border-color: var(--r-rose); box-shadow: 0 0 0 4px rgb(217 152 174 / .14) }
.relieve input:is([type='checkbox'], [type='radio']):checked::after { transform: translateY(-1px) rotate(-45deg) scale(1) }
.relieve input[type='radio']:checked::after { transform: scale(1) }
.relieve input[type='range'] { accent-color: var(--r-rose) }
.relieve progress { appearance: none; height: 6px; border: 0; border-radius: 6px; overflow: hidden; background: rgb(174 184 195 / .16) }
.relieve progress::-webkit-progress-bar { background: rgb(174 184 195 / .16) }
.relieve progress::-webkit-progress-value { background: linear-gradient(90deg, var(--r-rose), var(--r-wine)); border-radius: 6px; transition: width .6s var(--r-ease) }
.relieve progress::-moz-progress-bar { background: var(--r-rose) }

/* Custom select (native select hidden but kept as the value holder). */
.relieve-select { position: relative; display: inline-grid; min-width: min(240px, 100%); max-width: 100% }
label.field .relieve-select { display: grid; width: 100% }
.relieve-select-native { position: absolute !important; inset: 0; opacity: 0 !important; pointer-events: none !important; width: 100% !important; height: 100% !important; margin: 0 !important }
.relieve-select-button {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; min-height: 44px; padding: 0 12px 0 15px; text-align: left;
  border-radius: 14px; border: 1px solid rgb(174 184 195 / .22); background: rgb(11 18 25 / .55); color: var(--r-paper); font-size: 14px; font-weight: 500; letter-spacing: 0;
  box-shadow: inset 0 1px 2px rgb(0 0 0 / .35); transition: border-color .25s, background .25s, box-shadow .3s; cursor: pointer;
}
.relieve-select-button:hover { border-color: rgb(217 152 174 / .45) }
.relieve-select.is-open .relieve-select-button { border-color: var(--r-rose); box-shadow: 0 0 0 4px rgb(217 152 174 / .14) }
.relieve-select-value { overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.relieve-select-chevron { flex: none; width: 22px; height: 22px; border-radius: 50%; background: rgb(217 152 174 / .12); position: relative; transition: transform .4s var(--r-spring), background .25s }
.relieve-select-chevron::after { content: ''; position: absolute; left: 50%; top: 45%; width: 6px; height: 6px; border-right: 1.5px solid var(--r-rose); border-bottom: 1.5px solid var(--r-rose); transform: translate(-50%, -50%) rotate(45deg) }
.relieve-select.is-open .relieve-select-chevron { transform: rotate(180deg); background: var(--r-wine) }
.relieve-select.just-chose .relieve-select-button { animation: relieve-chose .55s var(--r-spring) }
@keyframes relieve-chose { 40% { transform: scale(1.025); border-color: var(--r-rose) } }
.relieve-select-list {
  position: absolute; z-index: 60; left: 0; right: 0; top: calc(100% + 6px); min-width: 200px; max-height: 280px; overflow: auto; padding: 6px;
  border-radius: 16px; border: 1px solid var(--r-edge-strong); background: rgb(22 31 42 / .97); backdrop-filter: blur(18px); box-shadow: var(--r-lift);
  transform-origin: top; animation: relieve-list-in .32s var(--r-spring);
}
.relieve-select.opens-up .relieve-select-list { top: auto; bottom: calc(100% + 6px); transform-origin: bottom }
@keyframes relieve-list-in { from { opacity: 0; transform: translateY(-6px) scale(.97) } }
.relieve-select-option { position: relative; padding: 10px 12px 10px 32px; border-radius: 10px; font-size: 14px; color: #dfe5ea; cursor: pointer; transition: background .15s }
.relieve-select-option.is-active { background: rgb(217 152 174 / .14); color: var(--r-paper) }
.relieve-select-option[aria-selected='true']::before { content: ''; position: absolute; left: 12px; top: 50%; width: 8px; height: 8px; margin-top: -4px; border-radius: 50%; background: var(--r-rose); box-shadow: 0 0 10px var(--r-rose) }
.relieve-select-option[aria-disabled='true'] { opacity: .45; cursor: not-allowed }

/* Panels and accordions: rounded, visible edges, graphics inside. */
.relieve .app-shell:not(.anonymous) .panel, .relieve .modal .panel {
  position: relative; border-radius: var(--r-radius-l); border: 1px solid var(--r-edge); background: var(--r-glass); backdrop-filter: blur(16px);
  box-shadow: var(--r-lift-sm), var(--r-glass-hi); padding: 22px 24px;
}
.relieve .app-shell:not(.anonymous) details > summary { cursor: pointer }
.relieve .app-shell:not(.anonymous) details::details-content, .relieve .modal details::details-content { block-size: 0; overflow: hidden; transition: block-size .45s var(--r-ease), content-visibility .45s allow-discrete }
.relieve .app-shell:not(.anonymous) details[open]::details-content, .relieve .modal details[open]::details-content { block-size: auto }
/* Open filters must let their option lists leave the accordion's flow box. */
.relieve .app-shell:not(.anonymous) details[open]:has(.relieve-select)::details-content,
.relieve .modal details[open]:has(.relieve-select)::details-content { overflow: visible }
.relieve pre, .relieve code, .relieve .instruction-text { font-family: var(--font-mono); font-size: 12.5px; line-height: 1.6 }
.relieve pre { border-radius: 14px; border: 1px solid var(--r-line); background: rgb(8 13 19 / .7) }
.relieve .eyebrow { font-size: 10.5px; letter-spacing: .22em; color: var(--r-rose); font-weight: 650 }
.relieve .muted, .relieve .meta { color: var(--r-muted) }

/* Toast notice. */
.relieve #notice:not([hidden]) {
  position: fixed; z-index: 70; left: 50%; bottom: 24px; transform: translateX(-50%); width: max-content; max-width: min(640px, calc(100vw - 32px));
  padding: 14px 18px 14px 44px; border-radius: 18px; border: 1px solid var(--r-edge-strong); background: rgb(22 31 42 / .95); backdrop-filter: blur(16px);
  box-shadow: var(--r-lift); color: var(--r-paper); font-size: 14px; animation: relieve-toast .5s var(--r-spring)
}
.relieve #notice:not([hidden])::before { content: 'i'; position: absolute; left: 14px; top: 50%; width: 20px; height: 20px; margin-top: -10px; display: grid; place-items: center; border-radius: 50%; background: var(--r-blue-lit); font: 600 12px var(--font-display) }
.relieve #notice.error:not([hidden]) { border-color: rgb(242 163 179 / .6); background: linear-gradient(120deg, rgb(139 30 63 / .55), rgb(22 31 42 / .96) 40%) }
.relieve #notice.error:not([hidden])::before { content: '!'; background: var(--r-wine) }
@keyframes relieve-toast { from { opacity: 0; transform: translate(-50%, 20px) scale(.96) } }

/* View entrance with spatial direction between study areas. */
.relieve #view > * { animation: relieve-enter .7s var(--r-ease) both }
html[data-nav-dir='forward'] #view > * { animation-name: relieve-enter-forward }
html[data-nav-dir='back'] #view > * { animation-name: relieve-enter-back }
.relieve #view > .public-surface { animation: none }
@keyframes relieve-enter { from { opacity: 0; transform: translateY(18px); filter: blur(6px) } }
@keyframes relieve-enter-forward { from { opacity: 0; transform: translateX(40px); filter: blur(6px) } }
@keyframes relieve-enter-back { from { opacity: 0; transform: translateX(-40px); filter: blur(6px) } }

/* =====================================================================
   INTERIOR · Consulta (home, reading, waiting)
   ===================================================================== */
.relieve #view { padding-top: 26px }
.relieve #view .consult-workspace .consult-heading h1 { font-weight: 400; font-size: clamp(48px, 5.6vw, 92px); line-height: .95; letter-spacing: -.055em; font-variation-settings: 'opsz' 144, 'SOFT' 30 }
.relieve #view .consult-workspace .consult-heading h1 em { font-variation-settings: 'opsz' 144, 'SOFT' 100, 'WONK' 1; text-shadow: 0 0 40px rgb(217 152 174 / .25) }
.relieve #view .consult-workspace .experience-kicker, .relieve #view .experience-kicker { font-size: 10.5px; letter-spacing: .24em; color: var(--r-rose) }
.relieve #view .consult-intro { font-size: 16px; color: #cfd8df }
.relieve #view .composer {
  position: relative; border-radius: 26px; border: 1px solid var(--r-edge-strong); padding: 20px 20px 14px;
  background: linear-gradient(150deg, rgb(43 60 78 / .86), rgb(20 29 40 / .9) 60%, rgb(70 28 48 / .7)); backdrop-filter: blur(18px);
  box-shadow: var(--r-lift), var(--r-glass-hi); transition: border-color .3s, box-shadow .4s;
}
.relieve #view .composer::before { content: ''; position: absolute; inset: -1px; border-radius: inherit; padding: 1px; background: conic-gradient(from var(--r-angle, 0deg), transparent 0 70%, var(--r-rose) 80%, transparent 90%); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; opacity: 0; transition: opacity .4s; pointer-events: none }
.relieve #view .composer:focus-within { border-color: var(--r-rose); box-shadow: 0 0 0 5px rgb(217 152 174 / .1), var(--r-lift) }
.relieve #view .composer:focus-within::before { opacity: 1; animation: relieve-orbit 4s linear infinite }
@property --r-angle { syntax: '<angle>'; inherits: false; initial-value: 0deg }
@keyframes relieve-orbit { to { --r-angle: 360deg } }
.relieve #view .composer textarea { width: 100%; border: 0; background: transparent; box-shadow: none; padding: 2px 4px 12px; font-size: 17px; line-height: 1.55; color: var(--r-paper); resize: none; field-sizing: content; min-height: 96px; max-height: 40dvh }
.relieve #view .composer textarea:focus { outline: none; box-shadow: none }
.relieve #view .composer textarea::placeholder { color: #8f9ba6 }
.relieve #view .composer-footer { display: flex; align-items: center; gap: 12px; padding-top: 10px; border-top: 1px solid var(--r-line) }
.relieve #view .composer-hint { font-size: 12px; color: var(--r-muted); margin-right: auto }
.relieve #view .composer .primary { min-height: 44px; padding: 0 20px }
.relieve #view .composer.sticky { margin: 10px auto 0; width: min(100%, 860px) }
.relieve #view .composer.sticky textarea { min-height: 52px }
.relieve #view .consult-starters h2 { font-weight: 420; font-size: clamp(26px, 2.4vw, 36px); letter-spacing: -.03em }
.relieve #view .consult-routes { border-top: 0; gap: 16px }
.relieve #view .consult-route { border-radius: var(--r-radius-l); border: 1px solid var(--r-edge); background: var(--r-glass); backdrop-filter: blur(14px); padding: 20px 22px; box-shadow: var(--r-lift-sm); transition: transform .5s var(--r-spring), border-color .3s }
.relieve #view .consult-route:hover { transform: translateY(-4px); border-color: var(--r-edge-strong) }
.relieve #view .consult-route-number { font-family: var(--font-mono); font-size: 13px; color: var(--r-rose) }

/* Reading a conversation: comfortable measure, citations as anchored chips. */
.relieve #view.view-conversation { width: min(100%, 1180px) }
.relieve #view .conversation-head { padding-bottom: 18px; margin-bottom: 8px; border-bottom: 1px solid var(--r-line) }
.relieve #view .conversation-head .page-title { font-weight: 400; font-size: clamp(30px, 3.4vw, 50px); line-height: 1.05; letter-spacing: -.035em; max-width: 24ch; font-variation-settings: 'opsz' 144 }
.relieve #view .conversation-body { scroll-behavior: smooth }
.relieve #view .message.assistant { position: relative; max-width: 76ch; margin: 18px 0 30px; padding: 26px 30px 22px; border-radius: var(--r-radius-l); border: 1px solid var(--r-edge); background: linear-gradient(170deg, rgb(30 42 56 / .82), rgb(18 27 37 / .86)); backdrop-filter: blur(12px); box-shadow: var(--r-lift-sm), var(--r-glass-hi) }
.relieve #view .message.assistant::before { content: ''; position: absolute; left: -1px; top: 26px; bottom: 26px; width: 3px; border-radius: 3px; background: linear-gradient(var(--r-rose), var(--r-wine)) }
.relieve #view .message.user { max-width: 70ch; margin-left: auto; padding: 16px 20px; border-radius: 22px 22px 6px 22px; border: 1px solid rgb(247 243 234 / .14); background: rgb(247 243 234 / .07) }
.relieve #view .message-label { font-size: 10px; letter-spacing: .22em; color: var(--r-rose) }
.relieve #view .answer { font-size: 16.5px; line-height: 1.78; color: #e8edf1 }
.relieve #view .answer h2, .relieve #view .answer h3 { font-family: var(--font-display); font-weight: 450; letter-spacing: -.025em; line-height: 1.15; margin: 1.4em 0 .5em; color: var(--r-paper) }
.relieve #view .answer h2 { font-size: 27px } .relieve #view .answer h3 { font-size: 21px }
.relieve #view .answer > :first-child { margin-top: 0 }
.relieve #view .answer ol, .relieve #view .answer ul { padding-left: 1.4em }
.relieve #view .answer li::marker { color: var(--r-rose); font-family: var(--font-mono); font-size: .85em }
.relieve #view .answer blockquote { margin: 1em 0; padding: 12px 18px; border-left: 3px solid var(--r-rose); border-radius: 0 14px 14px 0; background: rgb(217 152 174 / .07); font-family: var(--font-display); font-size: 18px }
.relieve #view .answer-table-wrap { border-radius: 18px; border: 1px solid var(--r-edge); background: rgb(11 18 25 / .5); overflow: auto; margin: 1em 0 }
.relieve #view .answer-table-wrap table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 14.5px }
.relieve #view .answer-table-wrap th { background: rgb(217 152 174 / .1); color: var(--r-rose-soft); font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase; text-align: left; padding: 12px 16px; border: 0 }
.relieve #view .answer-table-wrap td { padding: 12px 16px; border: 0; border-top: 1px solid var(--r-line) }
.relieve #view .answer-table-wrap tr:hover td { background: rgb(217 152 174 / .05) }
.relieve .citation:is(button, [role='button']) {
  display: inline-flex; align-items: center; gap: 5px; min-height: 0; margin: 0 2px; padding: 1px 9px 2px; vertical-align: .05em;
  border-radius: 999px; border: 1px solid rgb(217 152 174 / .45); background: rgb(217 152 174 / .1); color: var(--r-rose-soft);
  font-family: var(--font-body); font-size: .8em; font-weight: 600; line-height: 1.5; cursor: pointer;
  transition: background .25s, border-color .25s, box-shadow .3s, transform .35s var(--r-spring);
}
.relieve .citation:is(button, [role='button'])::after { content: '↗'; font-size: .9em; opacity: .7 }
.relieve .citation:is(button, [role='button']):hover { background: rgb(217 152 174 / .2); border-color: var(--r-rose); transform: translateY(-1px); box-shadow: 0 6px 16px -8px rgb(217 152 174 / .8) }
.relieve .citation.citation-fallback, .relieve .citation.error { display: inline-flex; padding: 1px 8px; border-radius: 999px; border: 1px dashed rgb(174 184 195 / .4); color: var(--r-muted); font-size: .8em }
.relieve .relieve-origin-open { background: var(--r-wine) !important; color: var(--r-paper) !important; border-color: var(--r-rose) !important }
.relieve .relieve-returned { animation: relieve-returned 1.5s var(--r-ease) }
@keyframes relieve-returned { 0% { box-shadow: 0 0 0 0 rgb(217 152 174 / .8) } 30% { box-shadow: 0 0 0 10px rgb(217 152 174 / .25), 0 0 30px rgb(217 152 174 / .6) } 100% { box-shadow: 0 0 0 18px rgb(217 152 174 / 0) } }
.relieve #view .response-tools, .relieve #view .message-tools { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--r-line) }
.relieve #view .limitations { margin-top: 14px; padding: 12px 16px; border-radius: 14px; border: 1px solid rgb(232 201 138 / .35); background: rgb(232 201 138 / .06); color: #eadbb8; font-size: 13.5px; white-space: pre-line }
.relieve #view .journey-summary { display: inline-block; margin: 0 0 14px; border-radius: 16px; border: 1px solid var(--r-line); background: rgb(11 18 25 / .4); max-width: 100% }
.relieve #view .journey-summary > summary { padding: 8px 14px; font-size: 12.5px; color: var(--r-muted); list-style: none; display: flex; align-items: center; gap: 8px }
.relieve #view .journey-summary > summary::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--r-rose); box-shadow: 0 0 10px var(--r-rose) }
.relieve #view .journey-steps { margin: 0; padding: 4px 18px 14px 34px; display: grid; gap: 8px; font-size: 13.5px }
.relieve #view .journey-step::marker { color: var(--r-rose) }
.relieve #view .conversation-toolbar { position: sticky; top: 0; z-index: 5; display: flex; justify-content: flex-end; padding: 4px 0 }
.relieve #view .sources-menu { position: relative; border-radius: 18px; border: 1px solid var(--r-edge); background: rgb(16 25 35 / .8); backdrop-filter: blur(16px); box-shadow: var(--r-lift-sm) }
.relieve #view .sources-menu > summary { list-style: none; display: flex; align-items: center; gap: 10px; padding: 9px 16px; font-size: 13px; font-weight: 600 }
.relieve #view .sources-menu > summary::before { content: '§'; font-family: var(--font-display); font-size: 17px; color: var(--r-rose) }
.relieve #view .sources-menu .sources-arrow { transition: transform .4s var(--r-spring) }
.relieve #view .sources-menu[open] .sources-arrow { transform: rotate(180deg) }
.relieve #view .sources-list { display: grid; gap: 6px; padding: 4px 8px 10px; width: min(380px, 80vw); max-height: 50vh; overflow: auto }
.relieve .source-item, .relieve .study-source { display: grid; gap: 2px; width: 100%; padding: 10px 14px; border-radius: 12px; border: 1px solid var(--r-line); background: rgb(255 255 255 / .02); text-align: left; color: var(--r-paper); font-size: 13.5px; transition: background .2s, border-color .2s }
.relieve .source-item:hover, .relieve .study-source:hover { background: rgb(217 152 174 / .1); border-color: var(--r-edge-strong) }

/* Waiting with character: a woven thread that keeps moving while the run lives. */
.relieve #view .waiting { position: relative; display: flex; align-items: center; gap: 16px; flex-wrap: wrap; max-width: 76ch; padding: 20px 22px; border-radius: var(--r-radius-l); border: 1px solid var(--r-edge-strong); background: linear-gradient(120deg, rgb(139 30 63 / .3), rgb(27 36 48 / .85) 50%); backdrop-filter: blur(12px); box-shadow: var(--r-lift-sm); overflow: hidden }
.relieve #view .waiting:not(:has(h2))::before { content: ''; flex: none; width: 46px; height: 46px; border-radius: 50%; background: conic-gradient(from var(--r-angle, 0deg), transparent 0 40%, var(--r-rose) 70%, var(--r-paper) 72%, transparent 74%); -webkit-mask: radial-gradient(circle, transparent 54%, #000 56%); mask: radial-gradient(circle, transparent 54%, #000 56%); animation: relieve-orbit 1.4s linear infinite }
.relieve #view .waiting:not(:has(h2))::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: linear-gradient(90deg, transparent, var(--r-rose), transparent); background-size: 40% 100%; background-repeat: no-repeat; animation: relieve-scan 1.8s var(--r-ease) infinite }
@keyframes relieve-scan { from { background-position: -40% 0 } to { background-position: 140% 0 } }
.relieve #view .waiting .journey-running, .relieve #view .waiting-status { margin-right: auto; font-family: var(--font-display); font-size: 20px; letter-spacing: -.02em }
.relieve #view .waiting:has(h2) { display: grid; gap: 6px; border-color: rgb(242 163 179 / .45); background: linear-gradient(120deg, rgb(139 30 63 / .4), rgb(27 36 48 / .9) 55%) }
.relieve #view .waiting h2 { font-family: var(--font-display); font-weight: 450; font-size: 24px; margin: 0 }

/* Study loading / error states. */
.relieve #view .study-status { display: flex; align-items: center; gap: 14px; padding: 18px 20px; border-radius: 18px; border: 1px solid var(--r-line); background: rgb(16 25 35 / .55); color: #d6dde4 }
.relieve #view .study-status:not(.study-error) .study-spinner { width: 28px; height: 28px; border: 0; border-radius: 50%; background: conic-gradient(from var(--r-angle, 0deg), transparent 0 50%, var(--r-rose)); -webkit-mask: radial-gradient(circle, transparent 52%, #000 55%); mask: radial-gradient(circle, transparent 52%, #000 55%); animation: relieve-orbit 1s linear infinite }
.relieve #view .study-status:not(.study-error)::after { content: ''; flex: 1; height: 10px; border-radius: 10px; background: linear-gradient(90deg, rgb(174 184 195 / .08), rgb(217 152 174 / .18), rgb(174 184 195 / .08)); background-size: 200% 100%; animation: relieve-skeleton 1.4s linear infinite }
@keyframes relieve-skeleton { from { background-position: 100% 0 } to { background-position: -100% 0 } }
.relieve #view .study-error, .relieve #view .admin-stage > .error { display: grid; gap: 8px; padding: 18px 20px 18px 56px; position: relative; border-radius: 18px; border: 1px solid rgb(242 163 179 / .5); background: linear-gradient(120deg, rgb(139 30 63 / .4), rgb(27 36 48 / .9) 60%); animation: relieve-shake .5s var(--r-ease) }
.relieve #view .study-error::before { content: '!'; position: absolute; left: 18px; top: 18px; width: 26px; height: 26px; display: grid; place-items: center; border-radius: 50%; background: var(--r-wine); font: 600 15px var(--font-display); color: var(--r-paper) }
.relieve #view .study-error strong { font-family: var(--font-display); font-weight: 450; font-size: 19px }
@keyframes relieve-shake { 20% { transform: translateX(-6px) } 40% { transform: translateX(5px) } 60% { transform: translateX(-3px) } 80% { transform: translateX(2px) } }
.relieve #view .form-status:not(:empty) { font-size: 13px; color: var(--r-rose-soft) }

/* =====================================================================
   INTERIOR · Reader drawer (paper), modal, account popover
   ===================================================================== */
.relieve .drawer-backdrop, .relieve .modal-backdrop { background: rgb(6 10 15 / .55); backdrop-filter: blur(6px) saturate(.8); animation: relieve-fade .35s var(--r-ease) }
@keyframes relieve-fade { from { opacity: 0 } }
.relieve .drawer {
  position: fixed; top: 12px; right: 12px; bottom: 12px; width: min(600px, calc(100vw - 24px)); display: flex; flex-direction: column; overflow: hidden;
  border-radius: 28px; border: 1px solid #fff; background: linear-gradient(175deg, #fcfaf5, var(--r-paper) 55%, var(--r-paper-shade)); color: var(--r-ink);
  box-shadow: 0 40px 100px -30px rgb(0 0 0 / .95), 0 0 0 8px rgb(247 243 234 / .06);
}
.relieve .drawer::before { content: ''; position: absolute; inset: 10px; border-radius: 20px; border: 1px solid rgb(139 30 63 / .14); pointer-events: none }
.relieve .drawer > header { position: relative; display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 30px 30px 18px; border-bottom: 1px solid rgb(24 34 45 / .1) }
.relieve .drawer > header::before { content: 'FUENTE'; position: absolute; left: 30px; top: 14px; font-size: 10px; letter-spacing: .24em; font-weight: 700; color: var(--r-wine) }
.relieve .drawer > header h2 { margin: 6px 0 0; font-family: var(--font-display); font-weight: 480; font-size: clamp(24px, 2.4vw, 32px); line-height: 1.1; letter-spacing: -.025em; color: var(--r-ink) }
.relieve .drawer > header .quiet { flex: none; min-height: 38px; padding: 0 16px; border-radius: 999px; border: 1px solid rgb(24 34 45 / .2); background: rgb(24 34 45 / .04); color: var(--r-ink); font-weight: 600; font-size: 13px }
.relieve .drawer > header .quiet:hover { background: var(--r-ink); color: var(--r-paper) }
.relieve .drawer .drawer-content { flex: 1; overflow: auto; padding: 18px 30px 34px }
.relieve .drawer .drawer-content .meta { color: #55616d; font-size: 13px; font-family: var(--font-mono) }
.relieve .drawer .source-quote { margin-top: 14px; font-family: var(--font-display); font-size: 18.5px; line-height: 1.72; letter-spacing: -.005em; font-variation-settings: 'opsz' 18; color: #1d2733; white-space: pre-line }
.relieve .drawer .selected-article + .selected-article { margin-top: 18px; padding-top: 18px; border-top: 1px dashed rgb(139 30 63 / .25) }
.relieve .drawer .source-external { display: inline-flex; margin-top: 10px; padding: 8px 14px; border-radius: 999px; border: 1px solid rgb(139 30 63 / .4); color: var(--r-wine); font-weight: 600; font-size: 13px; text-decoration: none }
.relieve .drawer .source-external:hover { background: var(--r-wine); color: var(--r-paper) }
.relieve .drawer ::selection { background: rgb(217 152 174 / .55); color: var(--r-ink) }
.relieve .modal {
  border-radius: 28px; border: 1px solid var(--r-edge-strong); background: linear-gradient(165deg, rgb(32 45 60 / .97), rgb(18 26 36 / .98)); backdrop-filter: blur(20px);
  box-shadow: 0 50px 110px -40px rgb(0 0 0 / .95), var(--r-glass-hi); color: var(--r-paper); animation: relieve-modal-in .5s var(--r-spring);
}
@keyframes relieve-modal-in { from { opacity: 0; translate: 0 24px; scale: .96 } }
.relieve .modal > header { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 22px 26px 14px; border-bottom: 1px solid var(--r-line) }
.relieve .modal > header h2 { margin: 0; font-family: var(--font-display); font-weight: 450; font-size: 28px; letter-spacing: -.03em }
.relieve .modal .modal-close { width: 40px; height: 40px; min-height: 40px; padding: 0; border-radius: 50%; border: 1px solid var(--r-edge); background: rgb(255 255 255 / .03); color: var(--r-paper); font-size: 22px; transition: transform .45s var(--r-spring), background .25s }
.relieve .modal .modal-close:hover { transform: rotate(90deg); background: var(--r-wine) }
.relieve .modal > .body { padding: 18px 26px 22px }
.relieve .modal > footer { display: flex; justify-content: flex-end; gap: 10px; padding: 14px 26px 22px; border-top: 1px solid var(--r-line) }
.relieve .account-menu[role='dialog'] {
  border-radius: 22px; border: 1px solid var(--r-edge-strong); background: rgb(22 31 42 / .96); backdrop-filter: blur(20px); box-shadow: var(--r-lift); padding: 10px; animation: relieve-pop-in .4s var(--r-spring); transform-origin: top right;
}
@keyframes relieve-pop-in { from { opacity: 0; transform: translateY(-8px) scale(.94) } }
.relieve .account-menu > strong { display: block; padding: 10px 12px 12px; margin-bottom: 4px; border-bottom: 1px solid var(--r-line); font-family: var(--font-display); font-weight: 450; font-size: 19px }
.relieve .account-menu-item { display: flex; align-items: center; width: 100%; min-height: 42px; padding: 0 12px; border: 0; border-radius: 12px; background: transparent; color: #dfe5ea; font-size: 14px; text-align: left; transition: background .2s, color .2s, padding .3s var(--r-spring) }
.relieve .account-menu-item:hover { background: rgb(217 152 174 / .12); color: var(--r-paper); padding-left: 16px }
.relieve .account-menu-item.account-signout { color: var(--r-bad); margin-top: 4px; border-top: 1px solid var(--r-line); border-radius: 0 0 12px 12px }
.relieve .usage-chart { display: flex; align-items: flex-end; gap: 4px; height: 140px; padding: 12px; border-radius: 18px; border: 1px solid var(--r-line); background: rgb(11 18 25 / .45) }
.relieve .usage-bar { flex: 1; min-width: 6px; height: max(6px, var(--bar-size, 0%)); min-height: 0; padding: 0; border: 0; border-radius: 6px 6px 3px 3px; background: linear-gradient(var(--r-rose), var(--r-wine)); font-size: 0; transition: transform .4s var(--r-spring), filter .3s }
.relieve .usage-bar:hover { transform: scaleY(1.06); filter: brightness(1.2) }
.relieve .usage-bar[aria-pressed='true'] { background: linear-gradient(var(--r-paper), var(--r-rose)); box-shadow: 0 0 18px rgb(217 152 174 / .6) }

/* =====================================================================
   INTERIOR · Casos & Mapas hubs (builder + live ticket + archive)
   ===================================================================== */
.relieve #view .study-surface-head { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 26px; align-items: end; max-width: none; margin: 4px 0 26px; padding: 0; border: 0 }
.relieve #view .study-surface-head::after { display: none }
.relieve #view .study-surface-head .eyebrow { grid-row: 1 / span 2; align-self: stretch; writing-mode: vertical-rl; transform: rotate(180deg); display: flex; align-items: center; gap: 12px; padding: 6px 0; font-family: var(--font-mono); font-size: 11px; letter-spacing: .3em; color: var(--r-rose); border-right: 1px solid var(--r-edge-strong); padding-right: 0; margin-right: 0 }
.relieve #view .study-surface-head .eyebrow::after { content: ''; flex: 1; width: 1px; background: linear-gradient(var(--r-rose), transparent) }
.relieve #view .study-surface-head h1 { margin: 0; max-width: none; font-weight: 400; font-size: clamp(44px, 5.4vw, 88px); line-height: .95; letter-spacing: -.05em; font-variation-settings: 'opsz' 144, 'SOFT' 20 }
.relieve #view .study-surface-head p { margin: 12px 0 0; font-size: 16px; color: #cfd8df }
.relieve #view :is(.case-hub, .visual-hub) { display: grid; grid-template-columns: minmax(0, 1fr); gap: 22px; border: 0; background: none; box-shadow: none }
.relieve #view .study-form {
  position: relative; top: auto; display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(250px, .7fr); column-gap: clamp(20px, 3vw, 40px); row-gap: 18px; align-content: start;
  padding: clamp(22px, 3vw, 36px); border-radius: var(--r-radius-xl); border: 1px solid var(--r-edge); overflow: hidden;
  background:
    repeating-linear-gradient(-58deg, transparent 0 26px, rgb(217 152 174 / .035) 26px 27px),
    radial-gradient(ellipse 60% 80% at 100% 0%, rgb(139 30 63 / .35), transparent 70%),
    linear-gradient(160deg, rgb(37 59 74 / .82), rgb(20 29 40 / .9) 55%);
  backdrop-filter: blur(16px); box-shadow: var(--r-lift), var(--r-glass-hi);
}
.relieve #view .study-form::before { grid-column: 1; grid-row: auto; font-size: 10.5px; letter-spacing: .24em; font-weight: 650; color: var(--r-rose) }
.relieve #view .study-form > :not(.relieve-preview) { grid-column: 1; grid-row: auto; min-width: 0 }
.relieve #view .study-form:not(.has-preview) { grid-template-columns: minmax(0, 1fr) }
.relieve #view .study-form h2 { margin: 0; font-weight: 420; font-size: clamp(34px, 3.6vw, 54px); letter-spacing: -.045em; line-height: 1 }
.relieve #view .study-form label.field { text-transform: none; letter-spacing: .04em; font-size: 12px; color: #cdd6dd }
.relieve #view .study-form .study-topic-field input { min-height: 62px; padding: 12px 18px; border-radius: 18px; font-family: var(--font-display); font-size: clamp(20px, 1.8vw, 26px); letter-spacing: -.02em; font-variation-settings: 'opsz' 48; border: 1px solid rgb(217 152 174 / .3); background: rgb(11 18 25 / .55) }
.relieve #view .study-form .study-topic-field input:not(:placeholder-shown):valid { border-color: rgb(159 211 180 / .45) }
.relieve #view .study-choice-field { margin: 0; padding: 0; border: 0; min-inline-size: 0 }
.relieve #view .study-choice-field legend { margin: 0 0 10px; padding: 0; font-size: 11px; font-weight: 650; letter-spacing: .18em; text-transform: uppercase; color: var(--r-rose) }
.relieve #view .study-choice-rail { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px }
.relieve #view .study-choice-option {
  position: relative; display: grid; grid-template-columns: 1fr; align-content: start; gap: 6px; min-height: 104px; padding: 46px 14px 14px; text-align: left;
  border-radius: 18px; border: 1px solid var(--r-edge); background: rgb(11 18 25 / .45); color: var(--r-paper); transform: none; box-shadow: none;
  transition: transform .45s var(--r-spring), border-color .3s, background .35s, box-shadow .35s;
}
.relieve #view .study-choice-option::before { content: ''; position: absolute; left: 14px; top: 14px; width: 24px; height: 18px; opacity: .85 }
.relieve #view .study-choice-option::after { content: ''; position: absolute; right: 12px; top: 12px; width: 20px; height: 20px; border-radius: 50%; border: 1.5px solid var(--r-edge-strong); background: transparent; transition: background .3s, border-color .3s, transform .45s var(--r-spring) }
.relieve #view .study-choice-option:hover { transform: translateY(-3px); border-color: var(--r-edge-strong); background: rgb(37 50 65 / .6) }
.relieve #view .study-choice-option[aria-pressed='true'] { transform: translateY(-3px); border-color: var(--r-rose); color: var(--r-paper); background: linear-gradient(150deg, rgb(163 38 79 / .85), rgb(91 31 55 / .9)); box-shadow: 0 16px 34px -18px rgb(139 30 63 / .95), inset 0 1px rgb(255 255 255 / .16) }
.relieve #view .study-choice-option[aria-pressed='true']::after { border-color: var(--r-paper); background: var(--r-paper) radial-gradient(circle, var(--r-wine) 0 4px, transparent 5px); transform: scale(1.08) }
.relieve #view .study-choice-option strong { font-family: var(--font-display); font-weight: 480; font-size: 19px; letter-spacing: -.02em; color: inherit }
.relieve #view .study-choice-option span { font-size: 12px; line-height: 1.35; color: #bfc9d1 }
.relieve #view .study-choice-option[aria-pressed='true'] span { color: #f1dfe5 }
/* Glyphs: intensity ladders for level and rhythm, motifs for subject and structure. */
.relieve #view :is(.case-difficulty, .case-count) .study-choice-option::before { background: linear-gradient(var(--r-rose), var(--r-rose)) 0 100% / 5px 40% no-repeat, linear-gradient(rgb(217 152 174 / .25), rgb(217 152 174 / .25)) 9px 100% / 5px 70% no-repeat, linear-gradient(rgb(217 152 174 / .25), rgb(217 152 174 / .25)) 18px 100% / 5px 100% no-repeat }
.relieve #view :is(.case-difficulty, .case-count) .study-choice-option:nth-child(2)::before { background: linear-gradient(var(--r-rose), var(--r-rose)) 0 100% / 5px 40% no-repeat, linear-gradient(var(--r-rose), var(--r-rose)) 9px 100% / 5px 70% no-repeat, linear-gradient(rgb(217 152 174 / .25), rgb(217 152 174 / .25)) 18px 100% / 5px 100% no-repeat }
.relieve #view :is(.case-difficulty, .case-count) .study-choice-option:nth-child(3)::before { background: linear-gradient(var(--r-rose), var(--r-rose)) 0 100% / 5px 40% no-repeat, linear-gradient(var(--r-rose), var(--r-rose)) 9px 100% / 5px 70% no-repeat, linear-gradient(var(--r-rose), var(--r-rose)) 18px 100% / 5px 100% no-repeat }
.relieve #view .case-subject .study-choice-option:nth-child(1)::before { border: 1.5px solid var(--r-rose); border-radius: 50%; width: 18px; height: 18px }
.relieve #view .case-subject .study-choice-option:nth-child(2)::before { background: linear-gradient(90deg, var(--r-rose) 0 5px, transparent 5px 9px, var(--r-rose) 9px 14px, transparent 14px 18px, var(--r-rose) 18px 23px) 0 50% / 100% 2px no-repeat, radial-gradient(circle, var(--r-rose) 0 3px, transparent 3.5px) 100% 50% / 8px 8px no-repeat }
.relieve #view .case-subject .study-choice-option:nth-child(3)::before { background: radial-gradient(circle at 7px 9px, transparent 6px, var(--r-rose) 6.5px 7.8px, transparent 8.3px), radial-gradient(circle at 16px 9px, transparent 6px, var(--r-rose) 6.5px 7.8px, transparent 8.3px) }
.relieve #view .visual-layout .study-choice-option:nth-child(1)::before { background: radial-gradient(circle, var(--r-rose) 0 2.5px, transparent 3px) 0 50% / 8px 8px repeat-x, linear-gradient(var(--r-rose), var(--r-rose)) 0 50% / 100% 1px no-repeat }
.relieve #view .visual-layout .study-choice-option:nth-child(2)::before { background: radial-gradient(circle, var(--r-rose) 0 3px, transparent 3.5px) 50% 0 / 8px 8px no-repeat, radial-gradient(circle, var(--r-rose) 0 2.5px, transparent 3px) 2px 100% / 8px 8px no-repeat, radial-gradient(circle, var(--r-rose) 0 2.5px, transparent 3px) calc(100% - 2px) 100% / 8px 8px no-repeat, linear-gradient(35deg, transparent 47%, var(--r-rose) 48% 52%, transparent 53%) 0 0 / 50% 100% no-repeat, linear-gradient(-35deg, transparent 47%, var(--r-rose) 48% 52%, transparent 53%) 100% 0 / 50% 100% no-repeat }
.relieve #view .visual-layout .study-choice-option:nth-child(3)::before { background: linear-gradient(var(--r-rose), var(--r-rose)) 0 0 / 9px 100% no-repeat, linear-gradient(rgb(217 152 174 / .45), rgb(217 152 174 / .45)) 100% 0 / 9px 100% no-repeat; border-radius: 3px }
.relieve #view .study-choice-option[aria-pressed='true']::before { filter: brightness(1.6) saturate(.6) }
.relieve #view .study-form > .primary { justify-self: stretch; min-height: 56px; margin-top: 4px; border-radius: 18px; font-size: 15.5px }
.relieve #view .study-form > .primary::after { content: '→'; font-size: 18px; transition: transform .4s var(--r-spring) }
.relieve #view .study-form > .primary:hover::after { transform: translateX(4px) }
.relieve #view .study-form .form-status { margin: 0; min-height: 1.3em }
/* Live preview: the paper ticket of the case, or the morphing structure of the map. */
.relieve #view .study-form > .relieve-preview { grid-column: 2; grid-row: 1 / span 12; align-self: start; position: sticky; top: 8px }
.relieve-case-ticket {
  display: grid; gap: 14px; padding: 24px 24px 20px; border-radius: 22px; color: var(--r-ink); transform: rotate(1.4deg);
  background: linear-gradient(175deg, #fdfbf6, var(--r-paper) 60%, var(--r-paper-shade)); border: 1px solid #fff;
  box-shadow: 0 30px 60px -28px rgb(0 0 0 / .9), 0 0 0 8px rgb(247 243 234 / .05); transition: transform .6s var(--r-spring);
}
.relieve-case-ticket.is-bumped { animation: relieve-ticket .55s var(--r-spring) }
@keyframes relieve-ticket { 35% { transform: rotate(-.6deg) translateY(-4px) scale(1.015) } }
.ticket-head { display: flex; align-items: center; justify-content: space-between; gap: 10px }
.ticket-kicker { font-size: 10px; font-weight: 700; letter-spacing: .24em; color: var(--r-wine) }
.ticket-stamp { padding: 4px 10px; border: 1.5px solid var(--r-wine); border-radius: 8px; color: var(--r-wine); font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; transform: rotate(-6deg) }
.ticket-topic { font-family: var(--font-display); font-weight: 480; font-size: 30px; line-height: 1.05; letter-spacing: -.03em; overflow-wrap: anywhere }
.ticket-topic.is-empty { color: #8a939c; font-style: normal }
.ticket-meta { display: flex; flex-wrap: wrap; gap: 6px }
.ticket-meta span { padding: 4px 10px; border-radius: 999px; background: rgb(36 59 74 / .1); border: 1px solid rgb(36 59 74 / .18); font-size: 12px; font-weight: 600; color: var(--r-blue) }
.ticket-slots { display: flex; align-items: center; gap: 0; padding: 10px 0 2px }
.ticket-slots i { position: relative; flex: 1; height: 2px; background: repeating-linear-gradient(90deg, rgb(139 30 63 / .5) 0 6px, transparent 6px 10px) }
.ticket-slots i:first-child { flex: 0 0 0 }
.ticket-slots b { position: absolute; right: -15px; top: -15px; width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; background: var(--r-ink); color: var(--r-paper); font: 500 14px var(--font-mono); animation: relieve-slot .5s var(--r-spring) }
.ticket-slots i:first-child b { right: auto; left: 0 }
@keyframes relieve-slot { from { transform: scale(0) } }
.ticket-slots i:first-child { margin-right: 30px }
.ticket-foot { font-size: 12px; color: #5f6b77 }
.relieve-case-ticket[data-level='avanzada'] .ticket-stamp { background: var(--r-wine); color: var(--r-paper) }
.relieve-map-preview { display: grid; gap: 12px; padding: 20px; border-radius: 22px; border: 1px solid var(--r-edge-strong); background: rgb(11 18 25 / .65); box-shadow: var(--r-lift-sm) }
.relieve-map-preview .ticket-kicker { color: var(--r-rose) }
.relieve-map-preview .ticket-topic { color: var(--r-paper); font-size: 24px }
.relieve-map-preview .ticket-topic.is-empty { color: var(--r-dim) }
.relieve-map-preview .ticket-foot { color: var(--r-muted) }
.map-preview-svg { width: 100%; aspect-ratio: 1.3; border-radius: 16px; background: radial-gradient(rgb(247 243 234 / .1) .6px, transparent .8px) 0 0 / 6px 6px, rgb(16 25 35 / .6); overflow: visible }
.map-preview-svg line { stroke: var(--r-rose); stroke-width: .6; stroke-dasharray: 2 1.4; transition: all .8s var(--r-spring) }
.map-preview-node { transition: transform .85s var(--r-spring), opacity .5s }
.map-preview-node circle { fill: var(--r-slate); stroke: var(--r-rose); stroke-width: .8 }
.map-preview-node.is-root circle { fill: var(--r-wine); stroke: var(--r-paper) }
/* Archive (collections): search, facet, list/grid and detail. */
.relieve #view .study-history { position: relative; min-height: 0; padding: clamp(20px, 3vw, 32px); border-radius: var(--r-radius-xl); border: 1px solid var(--r-edge); background: var(--r-glass); backdrop-filter: blur(16px); box-shadow: var(--r-lift-sm), var(--r-glass-hi) }
.relieve #view .study-history::before { font-size: 10.5px; letter-spacing: .24em; color: var(--r-rose); font-weight: 650 }
.relieve #view .study-history > h2 { max-width: none; margin: 6px 0 18px; font-weight: 420; font-size: clamp(30px, 3vw, 44px); letter-spacing: -.04em }
.relieve #view .collections-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0 0 16px; padding: 8px; border-radius: 20px; border: 1px solid var(--r-line); background: rgb(11 18 25 / .45) }
.relieve #view .collections-controls > input { flex: 1 1 260px; border-radius: 14px; padding-left: 40px; background: rgb(11 18 25 / .4) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%23D998AE' stroke-width='1.6'%3E%3Ccircle cx='7' cy='7' r='5'/%3E%3Cpath d='m11 11 3.5 3.5'/%3E%3C/svg%3E") 14px 50% no-repeat }
.relieve #view .collections-controls .relieve-select { flex: 0 1 220px }
.relieve #view .collections-view-toggle { position: relative; display: inline-flex; gap: 2px; padding: 4px; border-radius: 999px; border: 1px solid var(--r-line); background: rgb(11 18 25 / .5) }
.relieve #view .collections-view-toggle .relieve-indicator { background: var(--r-wine); box-shadow: inset 0 1px rgb(255 255 255 / .18) }
.relieve #view .collections-view-button { position: relative; z-index: 1; min-height: 34px; padding: 0 14px; border: 0; border-radius: 999px; background: transparent; color: var(--r-muted); font-size: 12.5px; font-weight: 600 }
.relieve #view .collections-view-button[aria-pressed='true'] { background: transparent; color: var(--r-paper) }
.relieve #view .collections-result-count { font-family: var(--font-mono); font-size: 11.5px; color: var(--r-dim); margin: 0 0 8px }
.relieve #view .collections-results { display: grid; gap: 8px; border: 0 }
.relieve #view .collections-item { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; padding: 14px 16px; text-align: left; border-radius: 16px; border: 1px solid var(--r-line); background: rgb(255 255 255 / .025); color: var(--r-paper); transition: transform .45s var(--r-spring), border-color .25s, background .25s }
.relieve #view .collections-item::before { content: ''; position: absolute; left: 0; top: 14px; bottom: 14px; width: 3px; border-radius: 3px; background: var(--r-rose); transform: scaleY(0); transition: transform .4s var(--r-spring) }
.relieve #view .collections-item:hover { transform: translateY(-2px); border-color: var(--r-edge-strong); background: rgb(37 50 65 / .6) }
.relieve #view .collections-item[aria-pressed='true'], .relieve #view .collections-item[aria-current='true'], .relieve #view .collections-item[aria-selected='true'] { border-color: var(--r-rose); background: linear-gradient(120deg, rgb(139 30 63 / .32), rgb(37 50 65 / .6)) }
.relieve #view .collections-item:is([aria-pressed='true'], [aria-current='true'], [aria-selected='true'])::before { transform: scaleY(1) }
.relieve #view .collections-item strong { font-family: var(--font-display); font-weight: 450; font-size: 18px; letter-spacing: -.015em }
.relieve #view .collections-item span { grid-column: 1; font-size: 12.5px; color: var(--r-muted) }
.relieve #view .collections-item small { grid-row: 1 / span 2; grid-column: 2; align-self: center; padding: 4px 10px; border-radius: 999px; border: 1px solid var(--r-edge); font-size: 11px; color: var(--r-rose-soft) }
.relieve #view .collections-grid { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)) }
.relieve #view .collections-grid .collections-item { min-height: 150px; grid-template-columns: 1fr; align-content: space-between; border-radius: 20px }
.relieve #view .collections-grid .collections-item small { grid-row: auto; grid-column: 1; justify-self: start }
.relieve #view .collections-detail:not(:empty) { margin-top: 14px; padding: 18px 20px; border-radius: 20px; border: 1px solid var(--r-edge-strong); background: rgb(16 25 35 / .7); animation: relieve-pop-in .45s var(--r-spring) }
.relieve #view .collections-detail h3 { margin: 0 0 6px; font-family: var(--font-display); font-weight: 450; font-size: 24px }
.relieve #view .collections-empty { padding: 26px; text-align: center; border-radius: 18px; border: 1px dashed var(--r-edge); color: var(--r-muted) }

/* =====================================================================
   INTERIOR · Case desk: paper dossier beside the writing desk
   ===================================================================== */
.relieve #view :is(.case-page-head, .visual-page-head) { display: flex; align-items: center; gap: 18px; width: 100%; margin: 4px 0 24px; padding: 0 0 18px; border-bottom: 1px solid var(--r-line) }
.relieve #view .study-back { flex: none; display: inline-flex; align-items: center; min-height: 40px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--r-edge); background: rgb(16 25 35 / .6); color: #e3e8ec; font-size: 13px; transition: transform .4s var(--r-spring), background .25s }
.relieve #view .study-back:hover { transform: translateX(-3px); background: rgb(217 152 174 / .12) }
.relieve #view :is(.case-page-title, .visual-page-title) { margin: 0; font-weight: 420; font-size: clamp(30px, 3.8vw, 58px); line-height: 1; letter-spacing: -.045em; font-variation-settings: 'opsz' 144 }
.relieve #view .case-surface .case-desk { width: 100%; display: grid; grid-template-columns: minmax(300px, .82fr) minmax(0, 1.3fr); gap: clamp(18px, 2.4vw, 32px); align-items: start; padding-bottom: 40px }
.relieve #view .case-surface .case-desk > :not(.case-scenario) { grid-column: 2 }
.relieve #view .case-scenario {
  grid-column: 1; grid-row: 1 / span 20; position: sticky; top: 4px; display: grid; grid-template-columns: 1fr; gap: 14px; margin: 0; padding: 26px 26px 22px;
  border-radius: 24px; border: 1px solid #fff; color: var(--r-ink); background: linear-gradient(175deg, #fdfbf6, var(--r-paper) 60%, var(--r-paper-shade)); box-shadow: 0 34px 70px -30px rgb(0 0 0 / .9), 0 0 0 8px rgb(247 243 234 / .05);
}
.relieve #view .case-scenario::before { content: 'EXPEDIENTE'; font-size: 10px; font-weight: 700; letter-spacing: .26em; color: var(--r-wine) }
.relieve #view .case-scenario details:first-child { grid-row: auto }
.relieve #view .case-scenario summary { list-style: none; font-family: var(--font-display); font-weight: 480; font-size: 24px; letter-spacing: -.02em; color: var(--r-ink); display: flex; justify-content: space-between; align-items: center }
.relieve #view .case-scenario summary::after { content: '−'; width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; border: 1px solid rgb(24 34 45 / .25); font-size: 16px }
.relieve #view .case-scenario details:not([open]) summary::after { content: '+' }
.relieve #view .case-scenario p { margin: 12px 0 0; font-family: var(--font-display); font-size: 16.5px; line-height: 1.7; font-variation-settings: 'opsz' 18; color: #24303b }
.relieve #view .case-scenario details:not(:first-child), .relieve #view .case-scenario .field { padding: 12px; border: 1px solid rgb(24 34 45 / .14); border-radius: 14px; color: var(--r-ink) }
.relieve #view .case-progress { display: grid; grid-template-columns: 1fr auto; gap: 6px 10px; align-items: center; padding: 14px; border-radius: 16px; background: var(--r-ink); color: var(--r-paper) }
.relieve #view .case-progress-label { font-size: 10px; letter-spacing: .22em; color: var(--r-rose) }
.relieve #view .case-progress-count { font-family: var(--font-mono); font-weight: 500; font-size: 12.5px }
.relieve #view .case-progress-meter { grid-column: 1 / -1; width: 100% }
.relieve #view .case-progress-notice:not(:empty) { margin: 0; font-size: 13px; color: var(--r-wine) }
.relieve #view .case-scenario :is(.case-continue, .primary, .quiet) { border-radius: 999px }
.relieve #view .case-scenario .quiet { background: var(--r-ink); color: var(--r-paper); border-color: var(--r-ink) }
.relieve #view .case-question-card { position: relative; max-width: none; margin: 0 0 22px; padding: clamp(22px, 2.6vw, 32px); border-radius: 26px; border: 1px solid var(--r-edge); background: var(--r-glass); backdrop-filter: blur(16px); box-shadow: var(--r-lift-sm), var(--r-glass-hi); color: var(--r-paper); transition: border-color .3s, box-shadow .4s }
.relieve #view .case-question-card:focus-within { border-color: var(--r-edge-strong); box-shadow: 0 0 0 5px rgb(217 152 174 / .08), var(--r-lift) }
.relieve #view .case-question-card::before { content: 'CUESTIÓN PARA RESOLVER'; color: var(--r-rose); font-size: 10.5px; letter-spacing: .22em }
.relieve #view .case-question-card h2 { margin: 6px 0 8px; font-weight: 420; font-size: clamp(26px, 2.4vw, 36px); letter-spacing: -.035em; color: var(--r-paper) }
.relieve #view .case-question-card > p { font-size: 16.5px; line-height: 1.65; color: #e3e8ec }
.relieve #view .case-question-card textarea, .relieve #view .case-submitted-answer { width: 100%; min-height: 160px; margin-top: 12px; padding: 18px 20px; border-radius: 18px; border: 1px solid rgb(174 184 195 / .2); border-left: 1px solid rgb(174 184 195 / .2); background: repeating-linear-gradient(transparent 0 31px, rgb(217 152 174 / .07) 31px 32px), rgb(11 18 25 / .6); background-attachment: local; font-size: 16px; line-height: 32px; color: var(--r-paper); field-sizing: content; max-height: 60vh; resize: vertical }
.relieve #view .case-editor-actions, .relieve #view .evaluation-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; margin-top: 14px }
.relieve #view .case-evaluation { max-width: none }
.relieve #view .case-evaluation-head::after { display: none }
.relieve #view .case-evaluation-head h2, .relieve #view .case-evaluation-head h1 { font-weight: 420; letter-spacing: -.045em }
.relieve #view :is(.case-feedback, .case-evaluation article, .case-evaluation section) { border-radius: 22px }

/* =====================================================================
   INTERIOR · Map desk
   ===================================================================== */
.relieve #view .study-map-controls { gap: 8px; padding: 8px 10px; border-radius: 20px; border: 1px solid var(--r-edge); background: rgb(16 25 35 / .75); backdrop-filter: blur(16px); box-shadow: var(--r-lift-sm) }
.relieve #view .study-map-controls button { min-height: 36px; border-radius: 999px; border: 1px solid transparent; background: transparent; color: #dfe5ea; font-size: 13px; padding: 0 12px; transition: background .2s, border-color .2s }
.relieve #view .study-map-controls button:hover:not(:disabled) { background: rgb(217 152 174 / .12); border-color: var(--r-edge) }
.relieve #view .study-map-zoom-cluster { display: inline-flex; align-items: center; gap: 2px; padding: 3px; border-radius: 999px; border: 1px solid var(--r-line); background: rgb(11 18 25 / .5) }
.relieve #view .study-map-actions { display: inline-flex; gap: 6px }
.relieve #view .study-map-actions button { border-color: var(--r-edge) }
.relieve #view .study-mermaid-canvas { border-radius: 22px; background: radial-gradient(rgb(247 243 234 / .09) 1px, transparent 1.4px) 0 0 / 22px 22px, radial-gradient(ellipse at 70% 20%, rgb(139 30 63 / .25), transparent 60%), rgb(11 18 25 / .6) }
.relieve #view .study-map-body > .study-map-detail, .relieve #view .study-map.is-article-open .study-map-body > .study-map-article { border-radius: 22px; border: 1px solid var(--r-edge-strong); background: rgb(22 31 42 / .92); backdrop-filter: blur(16px); box-shadow: var(--r-lift) }
.relieve .study-map-dialog { border-radius: 28px }
.relieve #view .visual-overview, .relieve #view .visual-reader > details { border-radius: 20px }
/* Before an attempt exists the desk has no dossier: centre the start card. */
.relieve #view .case-surface .case-desk:not(:has(> .case-scenario)) { grid-template-columns: minmax(0, 780px); justify-content: center }
.relieve #view .case-surface .case-desk:not(:has(> .case-scenario)) > * { grid-column: 1 }
.relieve #view .case-session-choice {
  position: relative; display: grid; gap: 16px; padding: clamp(26px, 3.4vw, 44px); overflow: hidden; border-radius: 30px; border: 1px solid var(--r-edge-strong);
  background: repeating-linear-gradient(-58deg, transparent 0 26px, rgb(217 152 174 / .035) 26px 27px), radial-gradient(ellipse 70% 90% at 100% 0, rgb(139 30 63 / .45), transparent 70%), linear-gradient(160deg, rgb(37 59 74 / .9), rgb(20 29 40 / .95));
  box-shadow: var(--r-lift), var(--r-glass-hi);
}
.relieve #view .case-session-choice::after { content: ''; position: absolute; right: 34px; top: 30px; width: 92px; height: 116px; border-radius: 12px; background: linear-gradient(175deg, #fdfbf6, var(--r-paper-shade)); transform: rotate(8deg); box-shadow: -14px 10px 0 -4px rgb(247 243 234 / .25), -26px 18px 0 -8px rgb(247 243 234 / .12), 0 20px 40px -16px #000; opacity: .95 }
.relieve #view .case-session-choice > h1 { margin: 0; max-width: 16ch; font-family: var(--font-display); font-weight: 420; font-size: clamp(32px, 3.4vw, 48px); line-height: 1.02; letter-spacing: -.04em }
.relieve #view .case-session-choice .eyebrow { color: var(--r-rose) }
.relieve #view .case-session-choice > .field { display: grid; gap: 10px; text-transform: none; letter-spacing: 0 }
.relieve #view .case-session-choice .muted { font-size: 15.5px; color: #d3dbe1; max-width: 48ch }
.relieve #view .case-correction-choice { position: relative; display: grid; grid-template-columns: auto 1fr; gap: 2px 14px; align-items: center; padding: 16px 18px; border-radius: 18px; border: 1px solid var(--r-edge); background: rgb(11 18 25 / .5); cursor: pointer; transition: border-color .3s, background .3s, transform .45s var(--r-spring) }
.relieve #view .case-correction-choice:hover { transform: translateY(-2px); border-color: var(--r-edge-strong) }
.relieve #view .case-correction-choice:has(input:checked) { border-color: var(--r-rose); background: linear-gradient(140deg, rgb(139 30 63 / .5), rgb(27 36 48 / .7)) }
.relieve #view .case-correction-choice input { grid-row: span 2 }
.relieve #view .case-correction-choice strong { font-family: var(--font-display); font-weight: 450; font-size: 19px }
.relieve #view .case-correction-choice span { font-size: 13.5px; color: var(--r-muted) }
.relieve #view .case-session-choice .primary { justify-self: start; min-height: 52px; padding: 0 26px; font-size: 15px }

/* Technical counter-voice: tracked monospace labels; gradient-lit accent words. */
.relieve :is(.eyebrow, .experience-kicker, .sidebar-section-label, .ticket-kicker, .anatomy-label) { font-family: var(--font-mono); font-weight: 500 }
.relieve #view .consult-workspace .consult-heading h1 em {
  background: linear-gradient(100deg, #b4486f 0%, var(--r-rose) 25%, var(--r-paper) 48%, var(--r-rose) 66%, #a3264f 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; text-shadow: none; padding-bottom: .08em;
}

/* =====================================================================
   ADMINISTRACIÓN · control room
   ===================================================================== */
.relieve #view .admin-layout { grid-template-columns: 220px minmax(0, 1fr); gap: 24px 30px }
.relieve #view .admin-control-heading { align-items: center; padding: 18px 24px; border: 1px solid var(--r-edge); border-radius: 24px; background: repeating-linear-gradient(-58deg, transparent 0 22px, rgb(217 152 174 / .035) 22px 23px), linear-gradient(120deg, rgb(37 59 74 / .75), rgb(20 29 40 / .8) 60%, rgb(91 31 55 / .5)); backdrop-filter: blur(14px); box-shadow: var(--r-lift-sm) }
.relieve #view .admin-control-title { font-size: clamp(22px, 2.2vw, 32px); font-variation-settings: 'opsz' 144, 'SOFT' 100; background: linear-gradient(100deg, var(--r-rose), var(--r-paper) 50%, var(--r-rose)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent }
.relieve #view .admin-nav { position: sticky; top: 4px; isolation: isolate; gap: 4px; padding: 8px; border: 1px solid var(--r-edge); border-radius: 22px; background: rgb(16 25 35 / .7); backdrop-filter: blur(14px); box-shadow: var(--r-lift-sm) }
.relieve #view .admin-nav .relieve-indicator { border-radius: 14px; background: linear-gradient(120deg, #a3264f, var(--r-wine) 55%, #5a1f37); box-shadow: 0 10px 24px -12px rgb(139 30 63 / .9), inset 0 1px rgb(255 255 255 / .18) }
.relieve #view .admin-nav button { position: relative; z-index: 1; min-height: 44px; padding: 10px 12px; border: 0; border-radius: 14px; background: transparent !important; box-shadow: none !important; color: #c9d2da; font-size: 13px; transform: none }
.relieve #view .admin-nav button:hover { color: var(--r-paper); background: rgb(217 152 174 / .06) !important }
.relieve #view .admin-nav button[aria-current='page'] { color: var(--r-paper) }
.relieve #view .admin-nav button::before { font: 500 11px/1 var(--font-mono); opacity: .9 }
.relieve #view .admin-stage { display: grid; gap: 16px; align-content: start }
.relieve #view .admin-stage > .eyebrow { margin: 0 }
.relieve #view .admin-stage > .page-title { margin: -6px 0 0; font-weight: 400; font-size: clamp(36px, 4vw, 60px); line-height: 1; letter-spacing: -.05em; font-variation-settings: 'opsz' 144 }
.relieve #view .admin-stage > .muted { margin: 0; max-width: 80ch; font-size: 14.5px }
.relieve #view .admin-loading { display: flex; align-items: center; gap: 12px; padding: 22px; border-radius: 20px; border: 1px solid var(--r-line); background: linear-gradient(90deg, rgb(174 184 195 / .05), rgb(217 152 174 / .12), rgb(174 184 195 / .05)); background-size: 200% 100%; animation: relieve-skeleton 1.4s linear infinite; color: var(--r-muted) }
.relieve #view .admin-layout .admin-query-controls { margin: 0; gap: 14px; padding: 16px 18px; background: rgb(16 25 35 / .6) }
.relieve #view .admin-layout .table-wrap { border-radius: 22px; border: 1px solid var(--r-edge); background: rgb(13 21 30 / .78); backdrop-filter: blur(12px); box-shadow: var(--r-lift-sm); overflow: auto }
.relieve #view .admin-layout table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 13.5px }
.relieve #view .admin-layout th { position: sticky; top: 0; z-index: 1; padding: 14px 16px; background: rgb(28 40 54 / .96); color: var(--r-rose-soft); font: 500 10.5px var(--font-mono); letter-spacing: .14em; text-transform: uppercase; border: 0; border-bottom: 1px solid var(--r-edge) }
.relieve #view .admin-layout td { padding: 14px 16px; border: 0; border-bottom: 1px solid var(--r-line); vertical-align: middle; transition: background .2s }
.relieve #view .admin-layout tbody tr:nth-child(even), .relieve #view .admin-layout tr:nth-child(even) td { background: rgb(255 255 255 / .012) }
.relieve #view .admin-layout tr[tabindex] { cursor: pointer }
.relieve #view .admin-layout tr[tabindex] td:first-child { position: relative }
.relieve #view .admin-layout tr[tabindex] td:first-child::before { content: ''; position: absolute; left: 0; top: 10px; bottom: 10px; width: 3px; border-radius: 3px; background: var(--r-rose); transform: scaleY(0); transition: transform .35s var(--r-spring) }
.relieve #view .admin-layout tr[tabindex]:is(:hover, :focus-visible) td { background: rgb(139 30 63 / .16) }
.relieve #view .admin-layout tr[tabindex]:is(:hover, :focus-visible) td:first-child::before { transform: scaleY(1) }
.relieve #view .admin-layout tr[tabindex]:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--r-rose) }
.relieve #view .question-preview { font-weight: 550; color: var(--r-paper) }
.relieve .relieve-status { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px 3px 8px; border-radius: 999px; font: 500 11.5px var(--font-mono); border: 1px solid currentColor; white-space: nowrap }
.relieve .relieve-status::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor }
.relieve .relieve-status[data-status='ready'], .relieve .relieve-status[data-status='aprobado'] { color: var(--r-good) }
.relieve .relieve-status[data-status='error'] { color: var(--r-bad) }
.relieve .relieve-status:is([data-status='running'], [data-status='queued']) { color: var(--r-warn) }
.relieve .relieve-status:is([data-status='running'], [data-status='queued'])::before { animation: relieve-blink 1s ease-in-out infinite }
@keyframes relieve-blink { 50% { opacity: .2 } }
.relieve .relieve-status:is([data-status='cancelled'], [data-status='uncertain']) { color: var(--r-muted) }
.relieve #view .admin-layout .columns { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px }
.relieve #view .admin-layout .columns > .panel { display: grid; gap: 6px; padding: 18px 20px; min-height: 110px; align-content: end; overflow: hidden }
.relieve #view .admin-layout .columns > .panel::after { content: ''; position: absolute; right: -30px; top: -30px; width: 110px; height: 110px; border-radius: 50%; border: 1px solid rgb(217 152 174 / .2); box-shadow: 0 0 0 16px rgb(217 152 174 / .04), 0 0 0 32px rgb(217 152 174 / .025) }
.relieve .relieve-stat-label { font: 500 10.5px var(--font-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--r-muted) }
.relieve .relieve-stat-value { font-family: var(--font-display); font-weight: 420; font-size: 34px; line-height: 1; letter-spacing: -.03em; color: var(--r-paper) }
.relieve #view .admin-layout .panel h2 { margin: 0 0 6px; font-weight: 440; font-size: 26px }
.relieve #view .admin-layout .panel { display: grid; gap: 12px }
.relieve #view .admin-layout form.panel { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); align-items: end }
.relieve #view .admin-layout .panel > .primary, .relieve #view .admin-layout .panel > .tool { justify-self: start }
.relieve #view .admin-layout .panel a, .relieve .modal a { color: var(--r-rose-soft); text-decoration-color: rgb(217 152 174 / .4); text-underline-offset: 3px }
.relieve :is(.detail-list, .metrics-list) { display: grid; grid-template-columns: minmax(140px, max-content) minmax(0, 1fr); gap: 0; margin: 0; border-radius: 16px; border: 1px solid var(--r-line); overflow: hidden }
.relieve :is(.detail-list, .metrics-list) > dt { padding: 10px 14px; font: 500 11px var(--font-mono); letter-spacing: .08em; color: var(--r-muted); background: rgb(255 255 255 / .02); border-bottom: 1px solid var(--r-line) }
.relieve :is(.detail-list, .metrics-list) > dd { margin: 0; padding: 10px 14px; border-bottom: 1px solid var(--r-line); overflow-wrap: anywhere; font-size: 13.5px }
.relieve :is(.detail-list, .metrics-list) > :nth-last-child(-n + 2) { border-bottom: 0 }
.relieve #view .audit-metrics { padding: 20px 22px; border-radius: 22px; border: 1px solid var(--r-edge); background: rgb(16 25 35 / .6) }
.relieve #view .audit-metrics h3 { margin: 0 0 12px; font-family: var(--font-display); font-weight: 440; font-size: 22px }
/* Pipeline: a numbered flow. */
.relieve #view .pipeline-flow { counter-reset: flow; list-style: none; display: grid; gap: 0; margin: 6px 0 4px; padding: 0 }
.relieve #view .pipeline-flow li { counter-increment: flow; position: relative; padding: 10px 0 14px 46px; font-size: 14px }
.relieve #view .pipeline-flow li::before { content: counter(flow, decimal-leading-zero); position: absolute; left: 0; top: 6px; width: 32px; height: 32px; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--r-edge-strong); background: rgb(16 25 35 / .9); font: 500 11px var(--font-mono); color: var(--r-rose) }
.relieve #view .pipeline-flow li:not(:last-child)::after { content: ''; position: absolute; left: 16px; top: 40px; bottom: -6px; width: 1px; background: linear-gradient(var(--r-rose), transparent) }
.relieve #view .pipeline-example { padding: 14px 18px; border-radius: 16px; background: var(--r-paper); color: var(--r-ink); font-size: 14px }
.relieve #view .pipeline-example strong { color: var(--r-wine); font: 600 11px var(--font-mono); letter-spacing: .1em }
.relieve #view :is(.pipeline-prompt, .library-collection, .instruction-files) details, .relieve #view .pipeline-prompt, .relieve #view .admin-layout .panel details { border-radius: 16px; border: 1px solid var(--r-line); background: rgb(11 18 25 / .35); padding: 0 14px }
.relieve #view .admin-layout .panel details > summary, .relieve #view .pipeline-prompt > summary { padding: 12px 0; font-weight: 600; font-size: 14px }
.relieve #view .pipeline-services { display: grid; gap: 8px; padding: 18px 20px; border-radius: 22px; border: 1px solid var(--r-edge); background: rgb(16 25 35 / .55) }
.relieve #view .pipeline-services h2 { margin: 0 0 6px; font-family: var(--font-display); font-weight: 440; font-size: 24px }
/* Compare: two pickers face each other. */
.relieve #view .compare-choices { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px }
.relieve #view .compare-picker { display: grid; gap: 10px; margin: 0; padding: 18px; border-radius: 20px; border: 1px solid var(--r-edge); background: rgb(11 18 25 / .45) }
.relieve #view .compare-picker:nth-child(2) { border-color: rgb(217 152 174 / .45); background: linear-gradient(150deg, rgb(139 30 63 / .22), rgb(11 18 25 / .45)) }
.relieve #view .compare-picker legend { padding: 0 8px; font: 500 11px var(--font-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--r-rose) }
.relieve #view .compare-filters { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; padding: 6px 0 12px }
.relieve #view .compare-results { display: flex; flex-direction: column; gap: 6px; max-height: 300px; overflow: auto; padding-right: 4px }
.relieve #view .compare-result { display: grid; gap: 2px; padding: 10px 14px; border-radius: 14px; border: 1px solid var(--r-line); background: rgb(255 255 255 / .02); text-align: left; color: var(--r-paper); transition: background .2s, border-color .2s, transform .4s var(--r-spring) }
.relieve #view .compare-result:hover { border-color: var(--r-edge-strong); transform: translateX(3px) }
.relieve #view .compare-result:is([aria-pressed='true'], [aria-selected='true'], .is-selected) { border-color: var(--r-rose); background: linear-gradient(120deg, rgb(139 30 63 / .4), rgb(37 50 65 / .5)) }
.relieve #view .compare-result small { font: 400 11px var(--font-mono); color: var(--r-muted) }
.relieve #view .compare-chosen { margin: 0; padding: 8px 12px; border-radius: 12px; background: rgb(217 152 174 / .08); font-size: 13px; color: var(--r-rose-soft) }
/* Run detail modal internals. */
.relieve .modal .record-head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 14px; margin-bottom: 14px }
.relieve .modal .record-head h2 { margin: 0; font-family: var(--font-display); font-weight: 450; font-size: 26px; letter-spacing: -.02em }
.relieve .modal .audit-buttons, .relieve .study-admin-actions { display: flex; flex-wrap: wrap; gap: 6px }
.relieve .tabs[role='tablist'] { position: relative; isolation: isolate; display: inline-flex; flex-wrap: wrap; gap: 2px; padding: 4px; margin: 8px 0 12px; border-radius: 999px; border: 1px solid var(--r-line); background: rgb(11 18 25 / .55) }
.relieve .tabs[role='tablist'] .relieve-indicator { background: var(--r-wine); box-shadow: inset 0 1px rgb(255 255 255 / .16) }
.relieve .tabs[role='tablist'] .tab { position: relative; z-index: 1; border: 0 !important; background: transparent !important; color: var(--r-muted) !important }
.relieve .tabs[role='tablist'] .tab[aria-selected='true'] { color: var(--r-paper) !important }
.relieve .annotation-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 10px 12px; margin-bottom: 12px; border-radius: 16px; border: 1px dashed var(--r-edge); font-size: 13px }
.relieve .annotation-composer { display: grid; gap: 8px; width: 100% }
.relieve .annotation-composer blockquote { margin: 0; padding: 8px 12px; border-left: 3px solid var(--r-rose); background: rgb(217 152 174 / .07); border-radius: 0 10px 10px 0 }
.relieve [role='tabpanel'] .answer { font-size: 15px; line-height: 1.7 }

/* =====================================================================
   COMERCIO · local, clearly-labelled simulation
   ===================================================================== */
.relieve .commerce-demo { position: relative; isolation: isolate; background: transparent; color: var(--r-paper); font-family: var(--font-body) }
.relieve .commerce-surface { position: relative; min-height: 100%; background: radial-gradient(ellipse 60% 50% at 85% 10%, rgb(139 30 63 / .35), transparent 70%), radial-gradient(ellipse 70% 60% at 0% 100%, rgb(53 86 107 / .35), transparent 70%), repeating-radial-gradient(circle at 80% 20%, transparent 0 40px, rgb(217 152 174 / .035) 41px 42px), var(--r-night) }
.relieve .commerce-demo .commerce-demo__bar { position: sticky; top: 10px; z-index: 5; margin: 10px 14px 0; min-height: 60px; padding: 8px 10px 8px 22px; border-radius: 22px; border: 1px solid var(--r-edge); background: rgb(16 25 35 / .75); backdrop-filter: blur(18px); box-shadow: var(--r-lift-sm) }
.relieve .commerce-demo .commerce-demo__brand { font-family: var(--font-display); font-size: 24px; letter-spacing: -.035em; color: var(--r-paper) }
.relieve .commerce-demo .commerce-demo__brand i { margin-left: 8px; font-family: var(--font-mono); font-size: 10px; letter-spacing: .2em; color: var(--r-rose) }
.relieve .commerce-demo .commerce-demo__signal { display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px; border-radius: 999px; border: 1px dashed var(--r-rose); background: rgb(217 152 174 / .08); color: var(--r-rose-soft); font: 500 11.5px var(--font-mono); letter-spacing: .04em }
.relieve .commerce-demo .commerce-demo__signal::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--r-rose); animation: relieve-blink 1.6s ease-in-out infinite }
.relieve .commerce-demo .commerce-demo__layout { grid-template-columns: 220px minmax(0, 1fr); gap: 20px; padding: 20px 14px 40px; min-height: 0; background: transparent }
.relieve .commerce-demo .commerce-demo__nav { position: sticky; top: 90px; align-self: start; gap: 4px; padding: 8px; border-radius: 22px; border: 1px solid var(--r-edge); background: rgb(16 25 35 / .7); backdrop-filter: blur(14px) }
.relieve .commerce-demo .commerce-demo__nav button { min-height: 44px; padding: 0 14px; border-radius: 14px; color: #c9d2da; font-size: 14px; transition: background .25s, color .25s, padding .35s var(--r-spring) }
.relieve .commerce-demo .commerce-demo__nav button:is(:hover, :focus-visible) { background: rgb(217 152 174 / .1); color: var(--r-paper); padding-left: 18px }
.relieve .commerce-demo .commerce-demo__nav button.is-current { background: linear-gradient(120deg, #a3264f, var(--r-wine) 55%, #5a1f37); color: var(--r-paper); box-shadow: inset 0 1px rgb(255 255 255 / .16) }
.relieve .commerce-demo .commerce-demo__main { max-width: 1100px; padding: clamp(10px, 3vw, 30px) clamp(8px, 2vw, 24px) }
.relieve .commerce-demo .commerce-demo__scenario { gap: 12px; margin-bottom: 26px; padding: 10px 12px 10px 18px; border: 1px solid var(--r-line); border-radius: 18px; background: rgb(11 18 25 / .5); color: var(--r-muted); font-size: 12.5px }
.relieve .commerce-demo .commerce-demo__progress { height: 4px; border-radius: 4px; background: rgb(174 184 195 / .16); overflow: hidden }
.relieve .commerce-demo .commerce-demo__eyebrow { font: 500 11px var(--font-mono); letter-spacing: .2em; color: var(--r-rose) }
.relieve .commerce-demo :is(h1, h2) { font-family: var(--font-display); font-weight: 420; letter-spacing: -.045em; line-height: 1 }
.relieve .commerce-demo h1 { font-size: clamp(40px, 5vw, 76px) }
.relieve .commerce-demo .commerce-demo__lead { font-size: 18px; line-height: 1.55; color: #d3dbe1; max-width: 56ch }
.relieve .commerce-demo :is(.commerce-demo__card, .commerce-demo__admin-grid section, .commerce-demo__row) {
  position: relative; border-radius: 26px; border: 1px solid var(--r-edge); background: var(--r-glass); backdrop-filter: blur(16px); color: var(--r-paper); box-shadow: var(--r-lift-sm), var(--r-glass-hi); transition: transform .5s var(--r-spring), border-color .3s;
}
.relieve .commerce-demo .commerce-demo__card:hover { transform: translateY(-4px); border-color: var(--r-edge-strong) }
.relieve .commerce-demo .commerce-demo__card.is-selected { border: 1px solid var(--r-rose); box-shadow: 0 0 0 6px rgb(217 152 174 / .1), var(--r-lift) }
.relieve .commerce-demo .commerce-demo__paper { border-radius: 24px; border: 1px solid #fff; background: linear-gradient(175deg, #fdfbf6, var(--r-paper) 60%, var(--r-paper-shade)); color: var(--r-ink); box-shadow: 0 30px 60px -28px rgb(0 0 0 / .9) }
.relieve .commerce-demo .commerce-demo__paper :is(h2, h3) { color: var(--r-ink) }
.relieve .commerce-demo .commerce-demo__button { display: inline-flex; align-items: center; justify-content: center; min-height: 46px; padding: 0 22px; border-radius: 999px; border: 1px solid rgb(233 191 205 / .38); background: linear-gradient(120deg, #a3264f, var(--r-wine) 55%, #5a1f37); color: var(--r-paper); font: 650 14px var(--font-body); box-shadow: inset 0 1px rgb(255 255 255 / .18), 0 14px 30px -16px rgb(139 30 63 / .95); transition: transform .4s var(--r-spring), box-shadow .3s }
.relieve .commerce-demo .commerce-demo__button:is(:hover, :focus-visible) { transform: translateY(-1px); box-shadow: inset 0 1px rgb(255 255 255 / .22), 0 18px 36px -14px rgb(168 50 90 / .95) }
.relieve .commerce-demo .commerce-demo__button--quiet { background: rgb(27 36 48 / .6); border-color: var(--r-edge); box-shadow: none; color: var(--r-paper) }
.relieve .commerce-demo .commerce-demo__paper .commerce-demo__button--quiet { background: transparent; color: var(--r-ink); border-color: rgb(24 34 45 / .3) }
.relieve .commerce-demo .commerce-demo__field { gap: 8px; font-size: 13px; font-weight: 600; color: #cdd6dd }
.relieve .commerce-demo .commerce-demo__field :is(input, select, textarea) { min-height: 46px; padding: 10px 14px; border-radius: 14px; border: 1px solid rgb(174 184 195 / .25); background: rgb(11 18 25 / .55); color: var(--r-paper); font: 15px var(--font-body) }
.relieve .commerce-demo .commerce-demo__field :is(input, select, textarea):focus { outline: none; border-color: var(--r-rose); box-shadow: 0 0 0 4px rgb(217 152 174 / .14) }
.relieve .commerce-demo .commerce-email-feedback { font-size: 13px; transition: color .3s }
.relieve .commerce-demo .commerce-demo__timeline li { border-top: 1px solid var(--r-line) }
.relieve .commerce-demo .commerce-demo__timeline b { background: var(--r-wine); color: var(--r-paper); font-family: var(--font-mono); font-weight: 500 }
.relieve .commerce-demo .commerce-demo__status { border-radius: 18px; border: 1px solid var(--r-edge); background: rgb(217 152 174 / .08); color: var(--r-paper) }
.relieve .commerce-demo .commerce-demo__status:is(.is-rejected, .is-interrupted) { border-color: rgb(242 163 179 / .5); background: rgb(139 30 63 / .25) }
.relieve .commerce-demo .commerce-demo__status:is(.is-pending, .is-processing) { border-color: rgb(232 201 138 / .45); background: rgb(232 201 138 / .08) }
.relieve .commerce-demo .commerce-demo__gauge { background: conic-gradient(var(--r-rose) 0 72%, rgb(174 184 195 / .15) 72%) }
.relieve .commerce-demo .commerce-demo__gauge::before { background: var(--r-slate) }
.relieve .commerce-demo .commerce-demo__pending { border-radius: 14px; border: 1px dashed var(--r-edge-strong); padding: 10px 14px; color: var(--r-rose-soft) }
.relieve .commerce-demo :is(.commerce-demo__facts, .commerce-demo__result-grid) { gap: 12px }
@media (max-width: 800px) {
  .relieve .commerce-demo .commerce-demo__layout { display: block; padding-inline: 8px }
  .relieve .commerce-demo .commerce-demo__nav { position: relative; top: 0; flex-direction: row; overflow-x: auto; margin-bottom: 14px; scrollbar-width: none }
  .relieve .commerce-demo .commerce-demo__nav button { flex: none }
  .relieve .commerce-demo .commerce-demo__bar { margin: 8px 8px 0; padding-left: 16px }
}

/* =====================================================================
   INTERIOR · responsive
   ===================================================================== */
@media (max-width: 1100px) {
  .relieve #view .study-form { grid-template-columns: minmax(0, 1fr) }
  .relieve #view .study-form > .relieve-preview { grid-column: 1; grid-row: auto; position: relative; top: 0; max-width: 520px }
  .relieve #view .case-surface .case-desk { grid-template-columns: minmax(0, 1fr) }
  .relieve #view .case-surface .case-desk > :not(.case-scenario), .relieve #view .case-surface .case-desk > * { grid-column: 1 }
  .relieve #view .case-scenario { grid-row: auto; position: relative; top: 0 }
}
@media (max-width: 800px) {
  .relieve .app-shell:not(.anonymous) .topbar { margin: 8px 8px 0; padding: 8px 8px 8px 52px; border-radius: 20px; flex-wrap: wrap; row-gap: 8px }
  .relieve .app-shell:not(.anonymous) .sidebar-toggle, .relieve .app-shell:not(.anonymous).sidebar-collapsed .sidebar-toggle { left: 16px; top: 18px }
  .relieve .app-shell:not(.anonymous):not(.sidebar-collapsed) .sidebar-toggle { left: min(calc(88vw - 46px), 284px) }
  .relieve .app-shell:not(.anonymous) .sidebar { margin: 8px; border-radius: 24px; inset: 0 auto 0 0; height: calc(100% - 16px) }
  .relieve #study-nav.study-nav { order: 3; width: 100%; justify-content: space-between }
  .relieve #study-nav.study-nav button { flex: 1; justify-content: center; padding: 0 8px }
  .relieve .relieve-command-label { display: none }
  .relieve #view { padding: 18px 14px 30px }
  .relieve #view .study-surface-head { grid-template-columns: 1fr }
  .relieve #view .study-surface-head .eyebrow { grid-row: auto; writing-mode: horizontal-tb; transform: none; border: 0; padding: 0 0 8px }
  .relieve #view .study-surface-head .eyebrow::after { height: 1px; width: auto; background: linear-gradient(90deg, var(--r-rose), transparent) }
  .relieve #view .study-choice-rail { grid-template-columns: 1fr }
  .relieve #view .study-choice-option { min-height: 0; padding: 14px 44px 14px 50px }
  .relieve #view .study-choice-option::before { top: 50%; transform: translateY(-50%) }
  .relieve #view .study-choice-option::after { top: 50%; margin-top: -10px }
  .relieve #view .admin-layout { grid-template-columns: minmax(0, 1fr) }
  .relieve #view .admin-nav { position: relative; top: 0; flex-direction: row; overflow-x: auto; scrollbar-width: none }
  .relieve #view .admin-nav button { flex: none; white-space: nowrap }
  .relieve #view .admin-layout .admin-query-controls { grid-template-columns: 1fr }
  .relieve .drawer { top: auto; left: 8px; right: 8px; bottom: 8px; width: auto; max-height: 86dvh; border-radius: 26px }
  .relieve .modal { left: 8px; right: 8px; width: auto; max-width: none; transform: translateY(-50%) }
  .relieve #view .message.assistant { padding: 20px 18px 18px }
  .relieve #view :is(.case-page-head, .visual-page-head) { flex-wrap: wrap; gap: 10px }
}
@media (max-width: 380px) {
  .relieve .app-shell:not(.anonymous) .topbar { padding-left: 48px; gap: 6px }
  .relieve .relieve-command { padding: 0 8px }
  .relieve .relieve-command kbd { display: none }
  .relieve .relieve-command::before { content: '⌕'; font-size: 16px; color: var(--r-rose) }
  .relieve #study-nav.study-nav button { padding: 0 4px; font-size: 13px; gap: 6px }
  .relieve #study-nav.study-nav button::before { display: none }
  .relieve #view .study-form { padding: 18px 14px; border-radius: 24px }
  .relieve .relieve-case-ticket { padding: 18px 16px; transform: none }
  .relieve #view .composer { padding: 14px 14px 10px; border-radius: 22px }
}

/* Reader on paper: neutralise the earlier dark passage box and header gradient. */
.relieve .drawer > header { background: transparent; padding-block: 30px 18px }
.relieve .drawer .source-quote { padding: 4px 0 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; color: #1d2733 }
.relieve .drawer .source-quote p { color: #1d2733 }

/* Command palette (C25). */
.relieve-palette-backdrop { position: fixed; inset: 0; z-index: 80; background: rgb(6 10 15 / .55); backdrop-filter: blur(8px); animation: relieve-fade .25s var(--r-ease) }
.relieve-palette {
  position: fixed; z-index: 81; left: 50%; top: 12vh; width: min(640px, calc(100vw - 24px)); transform: translateX(-50%); display: grid; grid-template-rows: auto minmax(0, 1fr) auto;
  max-height: 72vh; overflow: hidden; border-radius: 26px; border: 1px solid var(--r-edge-strong); background: linear-gradient(165deg, rgb(32 45 60 / .97), rgb(16 24 33 / .98));
  box-shadow: 0 50px 120px -40px #000, 0 0 0 1px rgb(255 255 255 / .03) inset; animation: relieve-palette-in .45s var(--r-spring);
}
@keyframes relieve-palette-in { from { opacity: 0; transform: translate(-50%, -14px) scale(.97) } }
.relieve-palette > input { width: 100%; min-height: 64px; padding: 0 24px 0 56px; border: 0; border-bottom: 1px solid var(--r-line); border-radius: 0; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' fill='none' stroke='%23D998AE' stroke-width='1.8'%3E%3Ccircle cx='9' cy='9' r='6.5'/%3E%3Cpath d='m14 14 4.5 4.5'/%3E%3C/svg%3E") 22px 50% no-repeat transparent; color: var(--r-paper); font: 400 20px var(--font-display); letter-spacing: -.01em; box-shadow: none }
.relieve-palette > input:focus { outline: none; box-shadow: none }
.relieve-palette > input::-webkit-search-cancel-button { display: none }
.relieve-palette-list { overflow: auto; padding: 8px 10px 10px }
.relieve-palette-group { padding: 12px 12px 6px; font: 500 10.5px var(--font-mono); letter-spacing: .2em; text-transform: uppercase; color: var(--r-rose) }
.relieve-palette-item { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; padding: 11px 14px; border-radius: 14px; cursor: pointer; transition: background .15s }
.relieve-palette-item strong { font-weight: 550; font-size: 14.5px; color: var(--r-paper); overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.relieve-palette-item small { flex: none; font-size: 12px; color: var(--r-muted) }
.relieve-palette-item[aria-selected='true'] { background: linear-gradient(120deg, rgb(139 30 63 / .55), rgb(37 50 65 / .6)); box-shadow: inset 0 0 0 1px var(--r-edge-strong) }
.relieve-palette-empty { padding: 28px; text-align: center; color: var(--r-muted) }
.relieve-palette-foot { display: flex; gap: 16px; padding: 10px 18px; border-top: 1px solid var(--r-line); font: 400 11.5px var(--font-mono); color: var(--r-dim) }
/* Sidebar search: the icon sits inside the field. */
.relieve .app-shell:not(.anonymous) .sidebar .search input { padding-left: 38px }
/* Form status voices: working, problem, confirmation. */
.relieve #view .form-status[data-tone='working'] { color: var(--r-muted) }
.relieve #view .form-status[data-tone='working']::before { content: ''; display: inline-block; width: 12px; height: 12px; margin-right: 8px; vertical-align: -1px; border-radius: 50%; background: conic-gradient(from var(--r-angle, 0deg), transparent 0 50%, var(--r-rose)); -webkit-mask: radial-gradient(circle, transparent 45%, #000 50%); mask: radial-gradient(circle, transparent 45%, #000 50%); animation: relieve-orbit 1s linear infinite }
.relieve #view .form-status[data-tone='error'] { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: 14px; border: 1px solid rgb(242 163 179 / .5); background: linear-gradient(120deg, rgb(139 30 63 / .45), rgb(27 36 48 / .8)); color: var(--r-paper); animation: relieve-shake .5s var(--r-ease) }
.relieve #view .form-status[data-tone='error']::before { content: '!'; flex: none; width: 20px; height: 20px; display: grid; place-items: center; border-radius: 50%; background: var(--r-wine); font: 600 12px var(--font-display) }
.relieve #view .form-status[data-tone='ok'] { color: var(--r-good) }

/* The hidden attribute always wins over layout rules in this layer. */
.relieve [hidden] { display: none !important }
.relieve #view .compare-result { height: auto; min-height: 0; overflow: visible; flex: none }
.relieve #view .compare-result > span { font-weight: 550; font-size: 14px; line-height: 1.35 }
.relieve .commerce-demo .commerce-demo__paper .commerce-demo__field { color: #3a4652 }
.relieve .commerce-demo .commerce-demo__paper .commerce-demo__field :is(input, select, textarea) { background: #fffdf8; color: var(--r-ink); border-color: rgb(24 34 45 / .25); box-shadow: inset 0 1px 2px rgb(24 34 45 / .08) }
.relieve .commerce-demo .commerce-demo__paper .commerce-demo__field :is(input, textarea)::placeholder { color: #7d8791 }
@media (max-width: 800px) {
  .relieve #view .admin-layout > * { min-width: 0; max-width: 100% }
  .relieve #view .compare-choices { grid-template-columns: minmax(0, 1fr) }
}
.relieve #view .consult-workspace { overflow-x: clip; overflow-clip-margin: 0 }
.relieve #view .case-surface .case-desk { grid-template-rows: none; grid-auto-rows: auto }
.relieve .app-shell:not(.anonymous) .sidebar-toggle { z-index: 17 }

/* ===== Review round (R04, R11–R14, R16–R20) ===== */
/* R04 reader close: ink on paper, readable at rest and on hover. */
.relieve .drawer > header .quiet:not(.modal-close):not(.study-back) { border: 1px solid rgb(24 34 45 / .35); background: rgb(24 34 45 / .06); color: var(--r-ink); font-weight: 650 }
.relieve .drawer > header .quiet:not(.modal-close):not(.study-back):is(:hover, :focus-visible) { background: var(--r-ink); border-color: var(--r-ink); color: var(--r-paper) }
/* R12 map labels: paint with the face they are measured with. */
.relieve .study-mermaid-canvas > svg text, .relieve .study-mermaid-canvas > svg tspan { font-family: 'Instrument Sans', 'Segoe UI', system-ui, sans-serif !important }
/* R13 disclosure markers in the product's own language. */
.relieve :is(#view, .modal) details > summary { list-style: none; display: flex; align-items: center; gap: 10px }
.relieve :is(#view, .modal) details > summary::-webkit-details-marker { display: none }
.relieve :is(#view, .modal) details > summary::before { content: ''; flex: none; width: 18px; height: 18px; border-radius: 50%; border: 1px solid var(--r-edge-strong); background: rgb(217 152 174 / .08) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' fill='none' stroke='%23D998AE' stroke-width='1.6'%3E%3Cpath d='M3.5 2l3 3-3 3'/%3E%3C/svg%3E") center no-repeat; transition: transform .4s var(--r-spring), background-color .25s }
.relieve :is(#view, .modal) details[open] > summary::before { transform: rotate(90deg); background-color: rgb(139 30 63 / .5) }
.relieve #view :is(.case-scenario, .story-faq, .sources-menu, .journey-summary) details > summary::before,
.relieve #view :is(.case-scenario > details, .sources-menu, .journey-summary) > summary::before { content: none }
.relieve #view .journey-summary > summary::before { content: ''; width: 8px; height: 8px; border: 0; border-radius: 50%; background: var(--r-rose); box-shadow: 0 0 10px var(--r-rose) }
.relieve #view .sources-menu > summary::before { content: '§'; width: auto; height: auto; border: 0; background: none; font-family: var(--font-display); font-size: 17px; color: var(--r-rose); transform: none }
.relieve #view .visual-overview, .relieve #view .visual-reader > details { padding: 10px 14px; border: 1px solid var(--r-line); background: rgb(16 25 35 / .5) }
/* R14 display tracking: looser for mid sizes and long titles. */
.relieve #view .conversation-head .page-title { letter-spacing: -.02em }
.relieve #view :is(.case-page-title, .visual-page-title) { letter-spacing: -.025em }
.relieve #view .admin-stage > .page-title { letter-spacing: -.03em }
.relieve #view .study-surface-head h1 { letter-spacing: -.04em }
/* R17 map toolbar wraps as a panel, not a blob; R18 dates do not split. */
.relieve #view .study-map-actions, .relieve #view .study-map-zoom-cluster { flex-wrap: wrap; border-radius: 16px }
.relieve #view .compare-result small { overflow-wrap: break-word; word-break: normal }
/* R19 the live ticket follows the form (sticky needs a non-scrolling ancestor). */
.relieve #view .study-form { overflow: clip; overflow-clip-margin: 24px }
/* R20 focus survives forced colours. */
@media (forced-colors: active) { .relieve :focus-visible { outline: 2px solid CanvasText !important; outline-offset: 2px } }
/* R11 mobile top bar: two rows, no keyboard hint on touch. */
@media (hover: none), (pointer: coarse) { .relieve .relieve-command kbd { display: none } .relieve .relieve-command::before { content: '⌕'; font-size: 16px; color: var(--r-rose) } .relieve .relieve-command-label { display: none } .relieve .relieve-command { padding: 0 12px } }
@media (max-width: 800px) {
  .relieve .app-shell:not(.anonymous) #crumb { display: none !important }
  .relieve .app-shell:not(.anonymous) .topbar { min-height: 0; padding-top: 6px; padding-bottom: 6px; row-gap: 6px }
  .relieve .app-shell:not(.anonymous) .topbar-brand { width: 96px; height: 34px }
  .relieve .app-shell:not(.anonymous) .topbar-brand img { width: 112px; margin-top: -6px }
  .relieve .top-actions { gap: 6px; margin-left: auto }
  .relieve .relieve-command { min-height: 36px; padding: 0 10px }
  .relieve .relieve-command kbd, .relieve .relieve-command-label { display: none }
  .relieve .relieve-command::before { content: '⌕'; font-size: 16px; color: var(--r-rose) }
  .relieve .top-actions > #admin-button { min-height: 36px; padding: 0 10px; font-size: 12px }
  .relieve .profile { width: 36px; height: 36px; min-height: 36px }
  .relieve #study-nav.study-nav button { min-height: 36px }
}
/* R16 placeholders fit at 320. */
@media (max-width: 380px) {
  .relieve #view .study-form .study-topic-field input { font-size: 17px; padding-inline: 14px }
  .relieve #view .admin-layout .admin-query-controls input { font-size: 13px }
  .relieve .top-actions > #admin-button { padding: 0 8px; font-size: 11.5px }
  .relieve .app-shell:not(.anonymous) .topbar-brand { width: 84px }
  .relieve .app-shell:not(.anonymous) .topbar-brand img { width: 98px }
}
/* R11 at ≤360px: the admin entry keeps its accessible name but shows a short visual label. */
@media (max-width: 360px) {
  .relieve .top-actions > #admin-button { font-size: 0; padding: 0 10px }
  .relieve .top-actions > #admin-button::after { content: 'Admin' / ''; font-size: 11.5px }
}
@media (max-width: 800px) { .relieve .app-shell:not(.anonymous) .sidebar-toggle { z-index: 32 } }

/* ===== Local refinement (Windows, short windows) ===== */
/* The command entry reads as a search control, not a bare "Ir a…". */
.relieve-command::before { content: '⌕'; font-size: 15px; line-height: 1; color: var(--r-rose) }
/* Short desktop windows: the composer is the first action, so it must be in view.
   The desk starts at the top instead of centring against the taller starters column. */
@media (min-width: 801px) and (max-height: 760px) {
  .relieve #view { padding-top: 14px }
  .relieve #view .consult-scene { align-items: start }
  .relieve #view .consult-desk { padding-top: 6px }
  .relieve #view .consult-heading { margin-bottom: 18px }
  .relieve #view .consult-workspace .consult-heading h1 { font-size: clamp(42px, min(5.6vw, 10.5svh), 92px) }
  .relieve #view .consult-intro { margin-top: 10px }
  .relieve #view .composer textarea { min-height: 64px }
  .relieve #view .consult-starters { padding-top: 6px }
  .relieve #view .consult-starters > .experience-kicker { margin-top: 64px }
  .relieve #view .consult-orbit { width: 150px; height: 112px }
  .relieve #view .consult-orbit span { font-size: 66px }
}