/* Socren · interior "Mesa de lectura" (fase 1 del rediseño integral, 2026-10-06).
   Sober continuation of the landing's "Lomo y cinta": a navy desk, a burgundy
   ribbon that marks where you are, vertical spines that identify saved work,
   Fraunces only for short titles. Loaded last and scoped to the signed-in shell,
   so the public landing and the commerce demo keep their own styles.
   This layer supersedes, for the interior shell and Consulta, the glass topbar,
   glass drawer, orbit and composer strip of relieve.css / app-experience.css;
   those superseded rules are listed in the phase notes for later pruning. */

html.relieve .app-shell:not(.anonymous) {
  --i-desk: #0f1821;
  --i-panel: #111b25;
  --i-surface: rgb(20 31 42 / .9);
  --i-surface-2: rgb(27 40 53 / .92);
  --i-line: rgb(174 184 195 / .14);
  --i-line-strong: rgb(174 184 195 / .26);
  --i-edge: rgb(217 152 174 / .3);
  --i-text: #e9edf1;
  --i-soft: #b9c3cc;
  --i-dim: #8693a0;
  --i-ribbon: linear-gradient(90deg, #a8325a, #8b1e3f);
  --i-civil: #d998ae;
  --i-procesal: #7fa7c2;
  --i-ease: cubic-bezier(.2, .8, .16, 1);
}

/* ---------- Background: the field stays, much quieter ---------- */
html.relieve .app-shell:not(.anonymous) .relieve-field { opacity: .32 }
html.relieve .app-shell:not(.anonymous) .relieve-field::after {
  background: linear-gradient(180deg, rgb(15 24 33 / .35), rgb(15 24 33 / .72) 40%, rgb(15 24 33 / .82));
}
html.relieve[data-mood='reading'] .app-shell:not(.anonymous) .relieve-field { opacity: .2 }
html.relieve[data-mood='thinking'] .app-shell:not(.anonymous) .relieve-field { opacity: .42 }
html.relieve .app-shell:not(.anonymous) .workspace { background: var(--i-desk) }

/* ---------- Skip link keeps working without touching the route ---------- */
html.relieve .skip { border-radius: 10px; background: var(--r-paper); color: var(--r-ink); font-weight: 600; text-decoration: none }

/* ---------- Header: no enclosing bar ---------- */
html.relieve .app-shell:not(.anonymous) .topbar {
  display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 16px;
  margin: 0; min-height: 64px; padding: 10px 20px 6px; border: 0; border-radius: 0;
  background: transparent; box-shadow: none; backdrop-filter: none;
}
html.relieve .app-shell:not(.anonymous) .topbar-start { display: flex; align-items: center; gap: 14px; min-width: 0 }
html.relieve .app-shell:not(.anonymous) .topbar-brand {
  display: block; flex: none; width: auto; height: 34px; margin: 0; overflow: visible;
}
html.relieve .app-shell:not(.anonymous) .topbar-brand img { display: block; width: auto; height: 34px; max-width: none; margin: 0 0 0 -10px }
html.relieve .app-shell:not(.anonymous) .topbar .deployment-banner {
  margin: 0; padding: 2px 8px; border-radius: 999px; border: 1px solid var(--i-edge); background: transparent;
  color: var(--r-rose); font-family: var(--font-mono); font-size: 10px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase;
}
html.relieve .app-shell:not(.anonymous) #crumb { margin: 0 }

/* The panel control: a bordered pill with its own icon, unlike the area labels. */
html.relieve .app-shell:not(.anonymous) .sidebar-toggle.work-toggle,
html.relieve .app-shell:not(.anonymous).sidebar-collapsed .sidebar-toggle.work-toggle,
html.relieve .app-shell:not(.anonymous):not(.sidebar-collapsed) .sidebar-toggle.work-toggle {
  position: static; inset: auto; z-index: auto; flex: none; display: inline-flex; align-items: center; gap: 8px;
  width: auto; height: 38px; min-height: 38px; padding: 0 14px 0 11px; border-radius: 999px; transform: none;
  border: 1px solid var(--i-line-strong); background: rgb(20 31 42 / .7); backdrop-filter: none; box-shadow: none;
  color: var(--i-soft); font-size: 13px; font-weight: 550; line-height: 1;
  transition: border-color .25s, color .25s, background .25s;
}
html.relieve .app-shell:not(.anonymous) .sidebar-toggle.work-toggle:hover { border-color: var(--i-edge); color: var(--r-paper); background: rgb(27 40 53 / .9); transform: none }
html.relieve .app-shell:not(.anonymous) .sidebar-toggle.work-toggle[aria-expanded='true'] { border-color: var(--i-edge); color: var(--r-paper); background: rgb(139 30 63 / .16) }
.work-toggle-icon { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.5 }
.work-toggle[aria-expanded='true'] .work-toggle-icon path { stroke: var(--r-rose) }

/* Areas: centred text with a sliding ribbon under the current one. */
html.relieve .app-shell:not(.anonymous) #study-nav {
  justify-self: center; display: flex; gap: 2px; margin: 0; padding: 0; border: 0; border-radius: 0;
  background: none; box-shadow: none;
}
html.relieve .app-shell:not(.anonymous) #study-nav button {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border: 0; border-radius: 10px;
  background: transparent !important; box-shadow: none !important; color: #a9b5c0; font-size: 15px; font-weight: 550; letter-spacing: .005em;
}
html.relieve .app-shell:not(.anonymous) #study-nav button::before,
html.relieve .app-shell:not(.anonymous) #study-nav button::after { content: none; display: none }
html.relieve .app-shell:not(.anonymous) #study-nav button:hover { color: var(--r-paper) }
html.relieve .app-shell:not(.anonymous) #study-nav button:is([aria-current='page'], [aria-current='true']) { color: var(--r-paper) }
html.relieve .app-shell:not(.anonymous) #study-nav .relieve-indicator {
  top: 0; left: 0; height: 2px; width: calc(var(--ind-w, 0px) - 32px); border-radius: 2px;
  transform: translate(calc(var(--ind-x, 0px) + 16px), calc(var(--ind-y, 0px) + var(--ind-h, 0px) - 6px));
  background: var(--i-ribbon); box-shadow: 0 0 12px rgb(168 50 90 / .55);
}
/* Before the indicator is measured, the current area still shows its ribbon. */
html.relieve .app-shell:not(.anonymous) #study-nav:not(.has-indicator) button:is([aria-current='page'], [aria-current='true']) { box-shadow: inset 0 -2px 0 -0px #a8325a !important }

html.relieve .app-shell:not(.anonymous) .top-actions { justify-self: end; display: flex; align-items: center; gap: 10px; margin: 0 }
html.relieve .app-shell:not(.anonymous) .top-actions > #admin-button {
  min-height: 36px; padding: 0 10px; border: 0; border-radius: 10px; background: transparent; color: var(--i-soft); font-size: 13px; font-weight: 550;
}
html.relieve .app-shell:not(.anonymous) .top-actions > #admin-button:hover { color: var(--r-paper); background: rgb(255 255 255 / .04) }
html.relieve .app-shell:not(.anonymous) .profile {
  width: 38px; height: 38px; min-height: 38px; padding: 0; border-radius: 50%; overflow: hidden;
  border: 1px solid var(--i-edge); background: #1f2c3a; color: var(--r-paper);
  font-family: var(--font-display); font-size: 17px; box-shadow: none; transform: none;
}
html.relieve .app-shell:not(.anonymous) .profile:hover,
html.relieve .app-shell:not(.anonymous) .profile[aria-expanded='true'] { transform: none; border-color: var(--r-rose); box-shadow: 0 0 0 3px rgb(217 152 174 / .14) }
html.relieve .app-shell:not(.anonymous) .profile .profile-picture { width: 100%; height: 100%; border-radius: 50%; display: grid; place-items: center; object-fit: cover; background: none }

/* ---------- "Tu trabajo" panel ---------- */
html.relieve .app-shell:not(.anonymous) .sidebar.work-panel {
  display: flex; flex-direction: column; gap: 0; margin: 0; padding: 0; height: 100dvh; min-height: 0;
  border: 0; border-right: 1px solid var(--i-line); border-radius: 0;
  background: var(--i-panel); backdrop-filter: none; box-shadow: none;
}
.work-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 20px 16px 12px 18px }
html.relieve .work-title { margin: 0; font-family: var(--font-display); font-size: 20px; font-weight: 420; letter-spacing: -.015em; color: var(--r-paper) }
html.relieve .app-shell:not(.anonymous) .work-panel #new-chat.work-new {
  display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 0 12px; margin: 0; width: auto; overflow: visible;
  border-radius: 999px; border: 1px solid var(--i-edge); background: rgb(139 30 63 / .14); box-shadow: none;
  color: var(--r-rose-soft); font-size: 12.5px; font-weight: 600; white-space: nowrap;
}
html.relieve .app-shell:not(.anonymous) .work-panel #new-chat.work-new::before { content: '+'; font-size: 15px; line-height: 1 }
html.relieve .app-shell:not(.anonymous) .work-panel #new-chat.work-new:hover { background: var(--r-wine); border-color: var(--r-wine-lit); color: var(--r-paper); transform: none }

.work-close { display: none }
html.relieve .app-shell:not(.anonymous) .work-panel .work-close {
  display: none; width: 34px; height: 34px; min-height: 34px; padding: 0; border-radius: 50%; border: 1px solid var(--i-line-strong);
  background: transparent; color: var(--i-soft); font-size: 20px; line-height: 1;
}
.work-tabs { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0 12px; border-bottom: 1px solid var(--i-line) }
html.relieve .app-shell:not(.anonymous) .work-tabs [data-work-tab] {
  position: relative; z-index: 1; min-height: 38px; padding: 0 4px; border: 0; border-radius: 8px 8px 0 0; background: transparent;
  color: var(--i-dim); font-size: 13px; font-weight: 600; box-shadow: none; transform: none;
}
html.relieve .app-shell:not(.anonymous) .work-tabs [data-work-tab]:hover { color: var(--r-paper) }
html.relieve .app-shell:not(.anonymous) .work-tabs [data-work-tab][aria-selected='true'] { color: var(--r-paper) }
html.relieve .work-tabs .relieve-indicator {
  top: 0; left: 0; height: 2px; border-radius: 2px; width: calc(var(--ind-w, 0px) - 24px);
  transform: translate(calc(var(--ind-x, 0px) + 12px), calc(var(--ind-y, 0px) + var(--ind-h, 0px) - 1px));
  background: var(--i-ribbon); box-shadow: none;
}
html.relieve .work-tabs:not(.has-indicator) [aria-selected='true'] { box-shadow: inset 0 -2px 0 #a8325a !important }

html.relieve .app-shell:not(.anonymous) .work-panel .search.work-search { position: relative; display: block; margin: 12px 12px 8px; padding: 0; border: 0; background: none }
html.relieve .app-shell:not(.anonymous) .work-panel .search.work-search input {
  width: 100%; min-height: 38px; padding: 0 12px 0 34px; border-radius: 12px; border: 1px solid var(--i-line); background: rgb(9 15 21 / .55);
  color: var(--r-paper); font-size: 13.5px;
}
html.relieve .app-shell:not(.anonymous) .work-panel .search.work-search > span[aria-hidden] { left: 12px; color: var(--i-dim) }

html.relieve .app-shell:not(.anonymous) .work-panel .work-list {
  flex: 1; min-height: 0; overflow: auto; display: flex; flex-direction: column; gap: 2px; padding: 4px 8px 12px; scrollbar-width: thin;
}
html.relieve .app-shell:not(.anonymous) .work-panel .work-row {
  position: relative; display: grid; gap: 3px; flex: none; width: 100%; min-height: 0; margin: 0; padding: 9px 10px 9px 14px;
  border: 0; border-radius: 10px; background: transparent; text-align: left; transform: none; overflow: hidden;
  transition: background .2s;
}
html.relieve .app-shell:not(.anonymous) .work-panel .work-row::before {
  content: ''; position: absolute; left: 3px; top: 10px; bottom: 10px; width: 2px; border-radius: 2px; background: var(--r-rose);
  transform: scaleY(0); transition: transform .3s var(--i-ease);
}
html.relieve .app-shell:not(.anonymous) .work-panel .work-row:hover { background: rgb(255 255 255 / .04); transform: none }
html.relieve .app-shell:not(.anonymous) .work-panel .work-row:hover::before { transform: scaleY(.45) }
html.relieve .app-shell:not(.anonymous) .work-panel .work-row[aria-current='page'] { background: rgb(139 30 63 / .18); border: 0 }
html.relieve .app-shell:not(.anonymous) .work-panel .work-row[aria-current='page']::before { transform: scaleY(1) }
html.relieve .app-shell:not(.anonymous) .work-panel .work-row strong { font-size: 13.5px; font-weight: 550; line-height: 1.35; color: var(--i-text); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden }
html.relieve .app-shell:not(.anonymous) .work-panel .work-row small { font-family: var(--font-mono); font-size: 10.5px; color: var(--i-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
html.relieve .work-panel .work-empty { margin: 10px 8px; font-size: 13px; color: var(--i-dim) }
html.relieve .work-panel .work-retry { margin: 0 8px; align-self: start }

/* Usage at the foot of the panel: bar only for a finite quota. */
html.relieve .app-shell:not(.anonymous) .work-panel .side-footer { margin: 0; padding: 10px 12px 14px; border-top: 1px solid var(--i-line) }
html.relieve .app-shell:not(.anonymous) .work-panel .quota-entry {
  display: grid; gap: 5px; width: 100%; min-height: 0; padding: 8px 8px 6px; margin: 0; border: 0; border-radius: 10px; background: transparent;
  text-align: left; color: var(--i-text); box-shadow: none; transform: none;
}
html.relieve .app-shell:not(.anonymous) .work-panel .quota-entry:hover { background: rgb(255 255 255 / .04) }
.quota-entry .quota-line { font-size: 13px; font-weight: 550 }
.quota-entry .meta { font-family: var(--font-mono); font-size: 10.5px; color: var(--i-dim, #8693a0) }
.quota-entry .quota-meter { appearance: none; -webkit-appearance: none; display: block; width: 100%; height: 4px; border: 0; border-radius: 4px; overflow: hidden; background: rgb(174 184 195 / .16) }
.quota-entry .quota-meter::-webkit-progress-bar { background: rgb(174 184 195 / .16); border-radius: 4px }
.quota-entry .quota-meter::-webkit-progress-value { background: linear-gradient(90deg, #8b1e3f, #d998ae); border-radius: 4px; transition: width .6s cubic-bezier(.2, .8, .16, 1) }
.quota-entry .quota-meter::-moz-progress-bar { background: linear-gradient(90deg, #8b1e3f, #d998ae); border-radius: 4px }
.quota-entry[data-quota='near'] .quota-meter::-webkit-progress-value { background: #e8c98a }
.quota-entry[data-quota='near'] .quota-meter::-moz-progress-bar { background: #e8c98a }
.quota-entry[data-quota='full'] .quota-meter::-webkit-progress-value { background: #f2a3b3 }
.quota-entry[data-quota='full'] .quota-meter::-moz-progress-bar { background: #f2a3b3 }
.quota-entry[data-quota='full'] .meta:not(.quota-month) { color: #f2a3b3 }

html.relieve .app-shell:not(.anonymous) .sidebar-resizer { width: 10px }
html.relieve .app-shell:not(.anonymous) .sidebar-resizer::after { inset: 0 4px; border-radius: 0 }

/* ---------- Main area ---------- */
html.relieve .app-shell:not(.anonymous) #notice { margin: 4px 20px 0; border-radius: 12px }
html.relieve .app-shell:not(.anonymous) #view { padding-top: 12px }

/* ---------- Consulta: the start desk ---------- */
html.relieve .app-shell:not(.anonymous) #view:has(> .consult-start) { width: 100%; max-width: none; height: 100%; padding: 0 24px }
html.relieve .app-shell:not(.anonymous) #view .study.consult-start {
  display: grid; place-items: safe center; min-height: 100%; width: 100%; padding: 0; margin: 0; background: none; border: 0; animation: none;
}
html.relieve .app-shell:not(.anonymous) #view .consult-start .consult-scene {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 22px; width: min(760px, 100%); margin: 0 auto; padding: 3vh 0 7vh;
}
html.relieve .app-shell:not(.anonymous) #view .consult-title {
  margin: 0 0 4px; text-align: center; font-family: var(--font-display); font-weight: 400;
  font-size: clamp(30px, 3vw, 42px); line-height: 1.12; letter-spacing: -.03em; color: var(--r-paper); max-width: none;
}
html.relieve .app-shell:not(.anonymous) #view .consult-title em { font-style: italic; font-weight: 380; color: var(--r-rose) }

/* Composer: one box, Enviar inside it, no secondary strip. Applies to every consult composer. */
html.relieve .app-shell:not(.anonymous) #view .composer {
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 10px;
  margin: 0; padding: 14px 12px 12px 18px; border-radius: 20px; border: 1px solid var(--i-edge);
  background: var(--i-surface); backdrop-filter: none; box-shadow: 0 18px 40px -26px rgb(2 6 10 / .9);
  transform: none; animation: none; transition: border-color .25s, box-shadow .25s;
}
html.relieve .app-shell:not(.anonymous) #view .composer::before { content: none; display: none; animation: none }
html.relieve .app-shell:not(.anonymous) #view .composer:focus-within { border-color: rgb(217 152 174 / .7); box-shadow: 0 0 0 3px rgb(217 152 174 / .12), 0 18px 40px -26px rgb(2 6 10 / .9); background: var(--i-surface-2); transform: none }
html.relieve .app-shell:not(.anonymous) #view .composer textarea {
  grid-column: 1; width: 100%; min-height: 76px; max-height: 40dvh; margin: 0; padding: 4px 0; border: 0; background: transparent; box-shadow: none;
  color: var(--r-paper); font-size: 16px; line-height: 1.6; resize: none; field-sizing: content;
}
html.relieve .app-shell:not(.anonymous) #view .composer textarea::placeholder { color: #8794a0 }
html.relieve .app-shell:not(.anonymous) #view .composer .composer-footer { grid-column: 2; display: flex; padding: 0; margin: 0; border: 0; gap: 0 }
html.relieve .app-shell:not(.anonymous) #view .composer .composer-footer .primary {
  display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 16px 0 18px; border-radius: 999px;
  border: 1px solid rgb(233 191 205 / .3); background: linear-gradient(120deg, #a3264f, #8b1e3f 60%, #6d1c35);
  color: var(--r-paper); font-size: 14px; font-weight: 600; box-shadow: none;
}
html.relieve .app-shell:not(.anonymous) #view .composer .composer-footer .primary::after { content: '→'; font-size: 17px; line-height: 1; transition: transform .25s var(--i-ease) }
html.relieve .app-shell:not(.anonymous) #view .composer .composer-footer .primary:hover:not(:disabled)::after { transform: translateX(3px) }
html.relieve .app-shell:not(.anonymous) #view .composer .composer-footer .primary:disabled { opacity: .55; filter: none }

/* An idea arriving in the composer: a ribbon crosses its top edge. */
html.relieve .app-shell:not(.anonymous) #view .composer::after {
  content: ''; position: absolute; left: 18px; right: 18px; top: -1px; height: 2px; border-radius: 2px; pointer-events: none;
  background: var(--i-ribbon); transform: scaleX(0); transform-origin: left; opacity: 0;
}
html.relieve .app-shell:not(.anonymous) #view .composer.is-receiving::after { animation: interior-receive .85s var(--i-ease) both }
@keyframes interior-receive { 0% { transform: scaleX(0); opacity: 1 } 60% { transform: scaleX(1); opacity: 1 } 100% { transform: scaleX(1); opacity: 0 } }

html.relieve .app-shell:not(.anonymous) #view .consult-ideas { display: grid; gap: 10px; margin-top: 6px }
html.relieve .app-shell:not(.anonymous) #view .consult-ideas-head { display: flex; align-items: center; justify-content: space-between; gap: 12px }
html.relieve .app-shell:not(.anonymous) #view .consult-ideas-label { margin: 0; font-family: var(--font-mono); font-size: 10.5px; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; color: var(--i-dim) }
html.relieve .app-shell:not(.anonymous) #view .consult-shuffle {
  display: inline-flex; align-items: center; gap: 6px; min-height: 30px; padding: 0 10px; border: 0; border-radius: 8px; background: transparent;
  color: var(--i-soft); font-size: 12.5px; font-weight: 550; box-shadow: none;
}
html.relieve .app-shell:not(.anonymous) #view .consult-shuffle::before { content: '↻'; font-size: 14px; color: var(--r-rose) }
html.relieve .app-shell:not(.anonymous) #view .consult-shuffle:hover { color: var(--r-paper); background: rgb(255 255 255 / .04) }
html.relieve .app-shell:not(.anonymous) #view .consult-ideas-list {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 0; padding: 0; border: 0; background: none;
}
html.relieve .app-shell:not(.anonymous) #view .consult-idea {
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr); align-content: start; gap: 6px; min-height: 0;
  margin: 0; padding: 13px 14px 14px 18px; border-radius: 14px; border: 1px solid var(--i-line); background: rgb(20 31 42 / .62);
  text-align: left; color: var(--i-text); box-shadow: none; transform: none; overflow: hidden;
  transition: border-color .25s, background .25s, transform .35s var(--i-ease);
}
html.relieve .app-shell:not(.anonymous) #view .consult-idea::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--i-civil); opacity: .85;
}
html.relieve .app-shell:not(.anonymous) #view .consult-idea[data-subject='procesal']::before { background: var(--i-procesal) }
html.relieve .app-shell:not(.anonymous) #view .consult-idea::after { content: none }
html.relieve .app-shell:not(.anonymous) #view .consult-idea small {
  margin: 0; padding: 0; font-family: var(--font-mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--i-civil);
}
html.relieve .app-shell:not(.anonymous) #view .consult-idea[data-subject='procesal'] small { color: var(--i-procesal) }
html.relieve .app-shell:not(.anonymous) #view .consult-idea span { font-size: 14px; line-height: 1.45; max-width: none }
html.relieve .app-shell:not(.anonymous) #view .consult-idea:hover,
html.relieve .app-shell:not(.anonymous) #view .consult-idea:focus-visible { border-color: var(--i-edge); background: rgb(27 40 53 / .85); transform: translateY(-2px) }

/* ---------- Consulta: reading a conversation ---------- */
html.relieve .app-shell:not(.anonymous) #view.view-conversation { width: min(100%, 940px); padding: 4px 28px 14px }
html.relieve .app-shell:not(.anonymous) #view .conversation { position: relative }
/* The question heads the reading area outside the scroller (always in view);
   sources sit in the same row, administrative run tools on a row below. */
html.relieve .app-shell:not(.anonymous) #view .conversation-head {
  position: relative; z-index: 6; flex-shrink: 0; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: 8px 16px;
  margin: 0 0 4px; padding: 8px 0 12px; border: 0; border-bottom: 1px solid var(--i-line); border-radius: 0; background: none;
}
html.relieve .app-shell:not(.anonymous) #view .conversation-head > div:first-child { grid-column: 1; grid-row: 1; min-width: 0 }
html.relieve .app-shell:not(.anonymous) #view .conversation-head > .conversation-toolbar {
  grid-column: 2; grid-row: 1; position: static; min-height: 0; margin: 0; padding: 0; display: flex; justify-content: flex-end;
}
html.relieve .app-shell:not(.anonymous) #view .conversation-head > .study-admin-runs { grid-column: 1 / -1; grid-row: 2; margin: 0 }
html.relieve .app-shell:not(.anonymous) #view .conversation-head .sources-menu[open] .sources-list { position: absolute; right: 0; top: calc(100% + 6px); z-index: 8; width: min(420px, 86vw); max-height: 55dvh; overflow: auto }
html.relieve .app-shell:not(.anonymous) #view .conversation-head .page-title {
  margin: 0; max-width: 60ch; font-family: var(--font-display); font-weight: 400; font-size: clamp(21px, 1.8vw, 26px); line-height: 1.25; letter-spacing: -.012em;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
html.relieve .app-shell:not(.anonymous) #view .conversation-body { padding: 0 10px 12px 0; margin-bottom: 10px }
html.relieve .app-shell:not(.anonymous) #view .message.assistant {
  max-width: 72ch; margin: 18px 0 22px; padding: 2px 0 6px 22px; border: 0; border-radius: 0; background: none; backdrop-filter: none; box-shadow: none;
}
html.relieve .app-shell:not(.anonymous) #view .message.assistant::before {
  content: ''; position: absolute; left: 0; top: 4px; bottom: 8px; width: 2px; height: auto; border-radius: 2px; box-shadow: none;
  background: linear-gradient(rgb(217 152 174 / .9), rgb(139 30 63 / .5) 40%, rgb(174 184 195 / .12));
}
html.relieve .app-shell:not(.anonymous) #view .message.user {
  max-width: 62ch; margin: 14px 0 6px auto; padding: 10px 14px; border-radius: 14px 14px 4px 14px; border: 1px solid var(--i-line); background: rgb(247 243 234 / .05);
}
html.relieve .app-shell:not(.anonymous) #view .message-label { margin-bottom: 4px; font-family: var(--font-mono); font-size: 10px; letter-spacing: .16em; color: var(--i-dim) }
html.relieve .app-shell:not(.anonymous) #view .answer { font-size: 16px; line-height: 1.72; color: #e6ebef }
html.relieve .app-shell:not(.anonymous) #view .answer h2 { font-size: 22px }
html.relieve .app-shell:not(.anonymous) #view .answer h3 { font-size: 18px }
html.relieve .app-shell:not(.anonymous) #view .message-tools { margin-top: 12px; padding-top: 0; border-top: 0; gap: 6px }
html.relieve .app-shell:not(.anonymous) #view .message-tools .tool { min-height: 32px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--i-line); background: transparent; font-size: 12.5px }
html.relieve .app-shell:not(.anonymous) #view .message-tools .tool:hover { border-color: var(--i-edge); background: rgb(139 30 63 / .2) }
html.relieve .app-shell:not(.anonymous) #view .sources-menu { border-radius: 999px; border: 1px solid var(--i-line-strong); background: rgb(17 27 37 / .95); backdrop-filter: none; box-shadow: none }
html.relieve .app-shell:not(.anonymous) #view .sources-menu[open] { border-radius: 16px; box-shadow: 0 20px 40px -20px rgb(2 6 10 / .9) }
html.relieve .app-shell:not(.anonymous) #view .sources-menu > summary { min-height: 34px; padding: 0 14px; font-size: 13px }
html.relieve .app-shell:not(.anonymous) #view .composer.sticky { width: 100%; margin: 0; padding: 10px 10px 10px 16px }
html.relieve .app-shell:not(.anonymous) #view .composer.sticky textarea { min-height: 44px }
html.relieve .app-shell:not(.anonymous) #view .waiting { max-width: 72ch; border-radius: 16px }

/* ---------- Motion: only for actions ---------- */
@media (prefers-reduced-motion: no-preference) {
  html.relieve:not([data-motion='false']) .app-shell:not(.anonymous) #view .consult-scene { animation: interior-arrive .45s var(--i-ease) both }
  html.relieve:not([data-motion='false']) .app-shell:not(.anonymous) .sidebar.work-panel .work-list { animation: interior-fade .3s ease both }
}
@keyframes interior-arrive { from { opacity: 0; transform: translateY(8px) } to { opacity: 1; transform: none } }
@keyframes interior-fade { from { opacity: .4 } to { opacity: 1 } }
@media (prefers-reduced-motion: reduce) {
  html.relieve .app-shell:not(.anonymous) #view .composer.is-receiving::after { animation: none; opacity: 0 }
  html.relieve .app-shell:not(.anonymous) #study-nav .relieve-indicator,
  html.relieve .work-tabs .relieve-indicator { transition: none }
  html.relieve .app-shell:not(.anonymous) #view .consult-idea { transition: none }
}
html[data-motion='false'].relieve .app-shell:not(.anonymous) #view .composer.is-receiving::after { animation: none; opacity: 0 }

/* ---------- Narrower desktops ---------- */
@media (max-width: 1100px) {
  .work-toggle-label { display: none }
  html.relieve .app-shell:not(.anonymous) .sidebar-toggle.work-toggle { padding: 0 10px }
}
@media (min-width: 801px) and (max-height: 760px) {
  html.relieve .app-shell:not(.anonymous) #view .consult-start .consult-scene { padding: 2vh 0 4vh; gap: 18px }
}

/* ---------- Phones: brand and account on one row, areas centred below ---------- */
@media (max-width: 800px) {
  html.relieve .app-shell:not(.anonymous) .workspace { grid-template-rows: auto minmax(0, 1fr) }
  html.relieve .app-shell:not(.anonymous) .topbar {
    grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto; row-gap: 4px; column-gap: 10px;
    min-height: 0; margin: 0; padding: 8px 12px 0; border-radius: 0; flex-wrap: nowrap;
  }
  html.relieve .app-shell:not(.anonymous) .topbar-start { grid-column: 1; grid-row: 1; gap: 10px }
  html.relieve .app-shell:not(.anonymous) .top-actions { grid-column: 2; grid-row: 1 }
  html.relieve .app-shell:not(.anonymous) #study-nav { grid-column: 1 / -1; grid-row: 2; order: 0; width: 100%; justify-content: center }
  html.relieve .app-shell:not(.anonymous) #study-nav button { flex: 0 1 auto; justify-content: center; min-height: 42px; padding: 0 14px }
  html.relieve .app-shell:not(.anonymous) .topbar-brand,
  html.relieve .app-shell:not(.anonymous) .topbar-brand img { height: 30px; width: auto }
  html.relieve .app-shell:not(.anonymous) .sidebar.work-panel {
    position: fixed; z-index: 30; inset: 0 auto 0 0; width: min(88vw, 340px); height: 100dvh; margin: 0; border-radius: 0 20px 20px 0;
    box-shadow: 30px 0 60px -20px rgb(2 6 10 / .8);
  }
  html.relieve .app-shell:not(.anonymous) .work-panel .work-close { display: inline-grid; place-items: center; flex: none }
  html.relieve .app-shell:not(.anonymous) .work-head #new-chat { margin-left: auto }
  html.relieve .app-shell:not(.anonymous):not(.sidebar-collapsed)::after {
    content: ''; position: fixed; inset: 0; z-index: 29; background: rgb(5 9 13 / .55);
  }
  html.relieve .app-shell:not(.anonymous) #view:has(> .consult-start) { padding: 0 16px }
  html.relieve .app-shell:not(.anonymous) #view .consult-start .consult-scene { padding: 16px 0 28px; gap: 18px }
  html.relieve .app-shell:not(.anonymous) #view .consult-ideas-list { grid-template-columns: minmax(0, 1fr); gap: 8px }
  html.relieve .app-shell:not(.anonymous) #view .composer { padding: 12px 10px 10px 14px; border-radius: 18px }
  html.relieve .app-shell:not(.anonymous) #view .composer textarea { min-height: 64px }
  html.relieve .app-shell:not(.anonymous) #view.view-conversation { padding: 4px 14px 10px }
  html.relieve .app-shell:not(.anonymous) #view .message.assistant { padding: 2px 0 6px 14px }
}
@media (max-width: 380px) {
  html.relieve .app-shell:not(.anonymous) .topbar { padding-inline: 8px }
  html.relieve .app-shell:not(.anonymous) .top-actions > #admin-button { padding: 0 6px; font-size: 12px }
  html.relieve .app-shell:not(.anonymous) #study-nav button { padding: 0 10px; font-size: 14.5px }
  html.relieve .app-shell:not(.anonymous) #view .composer { grid-template-columns: minmax(0, 1fr) }
  html.relieve .app-shell:not(.anonymous) #view .composer .composer-footer { grid-column: 1; justify-content: flex-end }
}
/* Preserve Relieve's compact visual label without changing the button name. */
@media (max-width: 360px) {
  html.relieve .app-shell:not(.anonymous) .top-actions > #admin-button { font-size: 0 }
}
@media (forced-colors: active) {
  html.relieve .app-shell:not(.anonymous) #study-nav button:is([aria-current='page'], [aria-current='true']),
  html.relieve .work-tabs [aria-selected='true'] { text-decoration: underline; text-underline-offset: 6px }
}

/* =====================================================================
   Fase 2 · Casos, Mapas, caso, cuenta y Administración
   ===================================================================== */

/* Work panel search: the icon gets its own gutter (id beats the global input rule). */
html.relieve .app-shell:not(.anonymous) .work-panel #conversation-search { padding: 0 12px 0 36px }
html.relieve .app-shell:not(.anonymous) .work-panel .search.work-search > span[aria-hidden] { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); pointer-events: none }

/* Sources list opens over the reading area from the heading row. */
html.relieve .app-shell:not(.anonymous) #view .conversation-head .sources-menu[open] .sources-list {
  padding: 8px; border-radius: 14px; border: 1px solid var(--i-line-strong); background: #111b25; box-shadow: 0 24px 50px -20px rgb(2 6 10 / .95);
}

/* ---------- Casos y Mapas: configuration desk + saved work ---------- */
html.relieve .app-shell:not(.anonymous) #view:has(> .desk-page) { width: 100%; max-width: 1360px; height: 100%; padding: 8px 28px 18px }
html.relieve .app-shell:not(.anonymous) #view .desk-page {
  display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(320px, .92fr); gap: 20px; height: 100%; min-height: 0; align-items: stretch;
}
html.relieve .app-shell:not(.anonymous) #view .desk-form,
html.relieve .app-shell:not(.anonymous) #view .desk-archive {
  min-height: 0; border-radius: 20px; border: 1px solid var(--i-line-strong); background: rgb(17 27 37 / .82); box-shadow: none; backdrop-filter: none;
}
html.relieve .app-shell:not(.anonymous) #view .desk-form { display: flex; flex-direction: column; gap: 14px; padding: 20px 22px 16px; overflow: auto; margin: 0 }
.desk-form-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap }
html.relieve .app-shell:not(.anonymous) #view .desk-form-head h1 { margin: 0; font-family: var(--font-display); font-weight: 400; font-size: 27px; line-height: 1.1; letter-spacing: -.02em; color: var(--r-paper) }
html.relieve .app-shell:not(.anonymous) #view .desk-form-head .meta { font-size: 12px; color: var(--i-dim) }
html.relieve .app-shell:not(.anonymous) #view .desk-form label.field { display: grid; gap: 6px; margin: 0; font-size: 12px; font-weight: 600; letter-spacing: .02em; text-transform: none; color: var(--i-soft) }
html.relieve .app-shell:not(.anonymous) #view .desk-form .study-topic-field input { min-height: 46px; padding: 0 14px; border-radius: 12px; font-family: var(--font-body); font-size: 16px; letter-spacing: 0 }
html.relieve .app-shell:not(.anonymous) #view .desk-form .study-choice-field { margin: 0; padding: 0; border: 0; min-inline-size: 0 }
html.relieve .app-shell:not(.anonymous) #view .desk-form .study-choice-field legend { margin: 0 0 6px; padding: 0; font-family: var(--font-body); font-size: 12px; font-weight: 600; letter-spacing: .02em; text-transform: none; color: var(--i-soft) }
html.relieve .app-shell:not(.anonymous) #view .desk-form .study-choice-rail {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; padding: 3px; border-radius: 12px; border: 1px solid var(--i-line); background: rgb(9 15 21 / .5);
}
html.relieve .app-shell:not(.anonymous) #view .desk-form .study-choice-option {
  position: relative; display: grid; align-content: center; justify-items: center; gap: 2px; min-height: 40px; padding: 6px 8px; margin: 0;
  border: 0; border-radius: 9px; background: transparent; box-shadow: none; transform: none; text-align: center; color: var(--i-soft);
  transition: background .25s, color .25s;
}
html.relieve .app-shell:not(.anonymous) #view .desk-form .study-choice-option::before,
html.relieve .app-shell:not(.anonymous) #view .desk-form .study-choice-option::after { content: none; display: none }
html.relieve .app-shell:not(.anonymous) #view .desk-form .study-choice-option strong { font-family: var(--font-body); font-size: 14px; font-weight: 600; letter-spacing: 0 }
html.relieve .app-shell:not(.anonymous) #view .desk-form .study-choice-option span { font-size: 11.5px; color: var(--i-dim) }
html.relieve .app-shell:not(.anonymous) #view .desk-form .study-choice-option:hover { transform: none; background: rgb(255 255 255 / .05); color: var(--r-paper) }
html.relieve .app-shell:not(.anonymous) #view .desk-form .study-choice-option[aria-pressed='true'] { transform: none; background: linear-gradient(140deg, #a3264f, #7a1d39); color: var(--r-paper); box-shadow: inset 0 1px rgb(255 255 255 / .14) }
html.relieve .app-shell:not(.anonymous) #view .desk-form .study-choice-option[aria-pressed='true'] span { color: #f1dfe5 }
.desk-form-foot { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-top: auto; padding-top: 12px; border-top: 1px solid var(--i-line) }
html.relieve .app-shell:not(.anonymous) #view .desk-summary { margin: 0; font-size: 13px; color: var(--i-soft) }
html.relieve .app-shell:not(.anonymous) #view .desk-form-foot .primary { flex: none; display: inline-flex; align-items: center; gap: 8px; min-height: 42px; padding: 0 20px; margin: 0 0 0 auto; border-radius: 999px; font-size: 14.5px }
html.relieve .app-shell:not(.anonymous) #view .desk-form-foot .primary::after { content: '→'; font-size: 17px }
html.relieve .app-shell:not(.anonymous) #view .desk-form > .form-status { margin: 0; min-height: 0 }
html.relieve .app-shell:not(.anonymous) #view .desk-form > .form-status:empty { display: none }

html.relieve .app-shell:not(.anonymous) #view .desk-archive { display: flex; flex-direction: column; overflow: hidden; padding: 16px 16px 0 }
.desk-archive-head { display: flex; align-items: baseline; gap: 10px; padding: 2px 4px 10px }
html.relieve .app-shell:not(.anonymous) #view .desk-archive-title { margin: 0; font-family: var(--font-display); font-weight: 400; font-size: 21px; letter-spacing: -.015em; color: var(--r-paper) }
html.relieve .app-shell:not(.anonymous) #view .desk-archive-count { font-family: var(--font-mono); font-size: 11px; color: var(--i-dim) }
.desk-archive-body { flex: 1; min-height: 0; display: flex; flex-direction: column }
html.relieve .app-shell:not(.anonymous) #view .desk-empty { margin: 8px 4px; font-size: 13.5px }
html.relieve .app-shell:not(.anonymous) #view .desk-archive .collections-controls { flex: none; display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 8px; margin: 0 0 10px; padding: 0; border: 0; border-radius: 0; background: none }
html.relieve .app-shell:not(.anonymous) #view .desk-archive .collections-controls > input { min-height: 38px; border-radius: 10px; font-size: 13.5px }
html.relieve .app-shell:not(.anonymous) #view .desk-archive .collections-controls .relieve-select { min-width: 0 }
html.relieve .app-shell:not(.anonymous) #view .desk-archive .collections-results { flex: 1; min-height: 0; overflow: auto; align-content: start; gap: 2px; padding: 0 2px 14px; scrollbar-width: thin }
html.relieve .app-shell:not(.anonymous) #view .desk-archive .collections-results.collections-grid { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 8px }
html.relieve .app-shell:not(.anonymous) #view .desk-archive .collections-result-count { grid-column: 1 / -1; margin: 0 2px 6px; font-size: 11px }
html.relieve .app-shell:not(.anonymous) #view .desk-archive .collections-item { grid-template-columns: minmax(0, 1fr) auto; gap: 2px 10px; padding: 10px 12px 10px 14px; border-radius: 10px; border: 0; background: transparent; transform: none }
html.relieve .app-shell:not(.anonymous) #view .desk-archive .collections-grid .collections-item { border: 1px solid var(--i-line); background: rgb(255 255 255 / .02); align-content: start }
html.relieve .app-shell:not(.anonymous) #view .desk-archive .collections-item::before { left: 3px; top: 10px; bottom: 10px; width: 2px }
html.relieve .app-shell:not(.anonymous) #view .desk-archive .collections-item:is(:hover, :focus-visible) { transform: none; background: rgb(255 255 255 / .045) }
html.relieve .app-shell:not(.anonymous) #view .desk-archive .collections-item:is(:hover, :focus-visible)::before { transform: scaleY(.6) }
html.relieve .app-shell:not(.anonymous) #view .desk-archive .collections-item strong { font-family: var(--font-body); font-size: 14px; font-weight: 600; letter-spacing: 0; color: var(--i-text) }
html.relieve .app-shell:not(.anonymous) #view .desk-archive .collections-item span { font-size: 12px; color: var(--i-dim) }
html.relieve .app-shell:not(.anonymous) #view .desk-archive .collections-item small { grid-column: 2; grid-row: 1 / span 2; align-self: center; font-family: var(--font-mono); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--r-rose) }
html.relieve .app-shell:not(.anonymous) #view .desk-archive .collections-detail { display: none }

/* ---------- Case detail: orientation bar, statement, questions ---------- */
html.relieve .app-shell:not(.anonymous) #view :is(.case-page-head, .visual-page-head) { width: 100%; margin: 0 0 12px; padding: 4px 0 10px; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; border-bottom: 1px solid var(--i-line) }
html.relieve .app-shell:not(.anonymous) #view :is(.case-page-title, .visual-page-title) {
  flex: 1 1 280px; min-width: 0; margin: 0; font-family: var(--font-display); font-weight: 400; font-size: clamp(21px, 1.9vw, 27px); line-height: 1.2; letter-spacing: -.015em;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
html.relieve .app-shell:not(.anonymous) #view .study-back { flex: none; min-height: 34px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--i-line-strong); background: transparent; font-size: 13px }
html.relieve .app-shell:not(.anonymous) #view .case-surface { width: min(100%, 1320px); margin: 0 auto; padding: 0 }
html.relieve .app-shell:not(.anonymous) #view .case-attempt-bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px; border-radius: 12px; background: var(--r-ink); color: var(--r-paper) }
html.relieve .app-shell:not(.anonymous) #view .case-attempt-label { font-size: 14px; font-weight: 650 }
html.relieve .app-shell:not(.anonymous) #view .case-attempt-status { padding: 2px 10px; border-radius: 999px; border: 1px solid rgb(217 152 174 / .5); font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .06em; color: var(--r-rose-soft) }
html.relieve .app-shell:not(.anonymous) #view .case-jump { display: flex; flex-wrap: wrap; gap: 6px }
html.relieve .app-shell:not(.anonymous) #view .case-scenario .case-jump-item { min-height: 30px; padding: 0 12px; border-radius: 999px; border: 1px solid rgb(24 34 45 / .25); background: transparent; color: var(--r-ink); font-size: 12.5px; font-weight: 600 }
html.relieve .app-shell:not(.anonymous) #view .case-scenario .case-jump-item:hover { background: rgb(24 34 45 / .08); border-color: rgb(24 34 45 / .45) }
html.relieve .app-shell:not(.anonymous) #view .case-scenario .case-jump-feedback { border-color: var(--r-wine); color: var(--r-wine) }
html.relieve .app-shell:not(.anonymous) #view .case-scenario::before { content: none }
html.relieve .app-shell:not(.anonymous) #view .evaluation-index-item { font-size: 12.5px }

/* ---------- Map reader: the canvas takes the useful height ---------- */
html.relieve .app-shell:not(.anonymous) #view:has(.is-map-reader) { width: 100%; max-width: none; height: 100%; display: flex; flex-direction: column; padding: 8px 24px 14px; background: none }
html.relieve .app-shell:not(.anonymous) #view .visual-surface:has(.is-map-reader) { flex: 1; min-height: 0; width: 100%; display: flex; flex-direction: column; margin: 0 }
html.relieve .app-shell:not(.anonymous) #view .visual-surface:has(.is-map-reader) .visual-page-head { position: relative; margin-bottom: 8px; flex-wrap: nowrap }
html.relieve .app-shell:not(.anonymous) #view .visual-surface:has(.is-map-reader) .visual-desk { flex: 1; min-height: 0; display: flex; flex-direction: column }
html.relieve .app-shell:not(.anonymous) #view .visual-reader.is-map-reader { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 8px; padding: 0; border: 0; background: none; color: inherit }
html.relieve .app-shell:not(.anonymous) #view .is-map-reader > .study-map { flex: 1; min-height: 340px; display: flex; flex-direction: column; margin: 0; padding: 0; border-radius: 16px; border: 1px solid var(--i-line-strong); overflow: hidden }
html.relieve .app-shell:not(.anonymous) #view .is-map-reader > .study-map > .study-map-body { flex: 1; min-height: 0; display: flex; flex-direction: column; position: relative }
html.relieve .app-shell:not(.anonymous) #view .is-map-reader .study-mermaid-canvas,
html.relieve .app-shell:not(.anonymous) #view .is-map-reader .study-map.is-article-open .study-mermaid-canvas { flex: 1; height: auto; min-height: 300px; max-height: none }
html.relieve .app-shell:not(.anonymous) #view .is-map-reader .study-map-controls { flex: none; margin: 0; padding: 8px 10px; border: 0; border-bottom: 1px solid var(--i-line); border-radius: 0; background: rgb(17 27 37 / .92); box-shadow: none; backdrop-filter: none }
html.relieve .app-shell:not(.anonymous) #view .is-map-reader > :is(.study-sources, .limitations, .answer) { flex: none }
/* ---------- Account dialog ---------- */
.usage-quota { display: grid; gap: 6px; margin: 0 0 14px; padding: 12px 14px; border-radius: 12px; border: 1px solid rgb(174 184 195 / .2) }
.usage-quota .quota-meter { appearance: none; -webkit-appearance: none; width: 100%; height: 5px; border: 0; border-radius: 5px; overflow: hidden; background: rgb(174 184 195 / .18) }
.usage-quota .quota-meter::-webkit-progress-bar { background: rgb(174 184 195 / .18) }
.usage-quota .quota-meter::-webkit-progress-value { background: linear-gradient(90deg, #8b1e3f, #d998ae) }
.usage-quota .quota-meter::-moz-progress-bar { background: linear-gradient(90deg, #8b1e3f, #d998ae) }

/* ---------- Administration: its own space ---------- */
html.relieve .app-shell:not(.anonymous).is-admin-view { grid-template-columns: minmax(0, 1fr) }
html.relieve .app-shell:not(.anonymous).is-admin-view .workspace { grid-column: 1 / -1 }
html.relieve .app-shell:not(.anonymous) #crumb { display: none !important }
html.relieve .app-shell:not(.anonymous).is-admin-view :is(.work-panel, .sidebar-resizer, .sidebar-toggle.work-toggle) { display: none !important }
html.relieve .app-shell:not(.anonymous).is-admin-view::after { content: none }
html.relieve .app-shell:not(.anonymous).is-admin-view #study-nav button { color: var(--i-dim) }
html.relieve .app-shell:not(.anonymous).is-admin-view #study-nav .relieve-indicator { opacity: 0 !important }
html.relieve .app-shell:not(.anonymous) .top-actions > #admin-button[aria-current='page'] { color: var(--r-paper); box-shadow: inset 0 -2px 0 #a8325a; border-radius: 0 }
html.relieve .app-shell:not(.anonymous) #view:has(> .admin-layout) { width: 100%; max-width: 1600px; padding: 4px 24px 28px }
html.relieve .app-shell:not(.anonymous) #view .admin-layout { display: grid; grid-template-columns: 206px minmax(0, 1fr); gap: 0 26px; align-items: start; padding: 0; background: none }
html.relieve .app-shell:not(.anonymous) #view .admin-nav { position: sticky; top: 0; display: flex; flex-direction: column; gap: 14px; padding: 6px 0; margin: 0; border: 0; border-radius: 0; background: none; box-shadow: none }
html.relieve .app-shell:not(.anonymous) #view .admin-nav .relieve-indicator { display: none }
html.relieve .app-shell:not(.anonymous) #view .admin-nav .admin-back { align-self: flex-start; min-height: 32px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--i-line-strong); background: transparent !important; color: var(--i-soft); font-size: 12.5px }
html.relieve .app-shell:not(.anonymous) #view .admin-nav .admin-back::before { content: none }
.admin-nav-group { display: grid; gap: 2px }
html.relieve .app-shell:not(.anonymous) #view .admin-nav-label { margin: 0 0 4px 10px; font-family: var(--font-mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--i-dim) }
html.relieve .app-shell:not(.anonymous) #view .admin-nav .admin-nav-item { position: relative; display: flex; align-items: center; min-height: 36px; padding: 0 10px 0 14px; border: 0; border-radius: 9px; background: transparent !important; box-shadow: none !important; color: var(--i-soft); font-size: 13.5px; font-weight: 550; text-align: left }
html.relieve .app-shell:not(.anonymous) #view .admin-nav .admin-nav-item::before { content: ''; position: absolute; left: 3px; top: 9px; bottom: 9px; width: 2px; border-radius: 2px; background: var(--r-rose); transform: scaleY(0); transition: transform .25s var(--i-ease); counter-increment: none; opacity: 1 }
html.relieve .app-shell:not(.anonymous) #view .admin-nav .admin-nav-item:hover { color: var(--r-paper); background: rgb(255 255 255 / .04) !important }
html.relieve .app-shell:not(.anonymous) #view .admin-nav .admin-nav-item[aria-current='page'] { color: var(--r-paper); background: rgb(139 30 63 / .2) !important }
html.relieve .app-shell:not(.anonymous) #view .admin-nav .admin-nav-item[aria-current='page']::before { transform: scaleY(1) }
html.relieve .app-shell:not(.anonymous) #view .admin-stage { display: grid; gap: 12px; align-content: start; min-width: 0 }
html.relieve .app-shell:not(.anonymous) #view .admin-stage-head { display: flex; align-items: baseline; gap: 6px 14px; flex-wrap: wrap; padding: 6px 0 4px }
html.relieve .app-shell:not(.anonymous) #view .admin-stage-head .page-title { margin: 0; font-family: var(--font-display); font-weight: 400; font-size: 28px; line-height: 1.1; letter-spacing: -.02em }
html.relieve .app-shell:not(.anonymous) #view .admin-stage-head .muted { margin: 0; font-size: 13.5px; max-width: 80ch }
html.relieve .app-shell:not(.anonymous) #view .admin-stage-head .admin-return { order: -1; flex-basis: 100%; width: max-content; max-width: max-content; min-height: 30px; padding: 0 12px; border-radius: 999px; font-size: 12.5px }
html.relieve .app-shell:not(.anonymous) #view .admin-stage > .admin-return { justify-self: start; min-height: 30px; padding: 0 12px; border-radius: 999px; font-size: 12.5px }

.admin-toolbar { display: grid; grid-template-columns: minmax(220px, 2fr) repeat(2, minmax(160px, 1fr)); gap: 10px; align-items: end }
html.relieve .app-shell:not(.anonymous) #view .admin-toolbar label.field { display: grid; gap: 5px; margin: 0; font-size: 11.5px; font-weight: 600; color: var(--i-soft); text-transform: none; letter-spacing: .02em }
html.relieve .app-shell:not(.anonymous) #view .admin-toolbar :is(input, select) { width: 100%; min-height: 38px; border-radius: 10px; font-size: 13.5px }
html.relieve .app-shell:not(.anonymous) #view .admin-toolbar select { padding: 0 10px; border: 1px solid var(--i-line-strong); background: rgb(9 15 21 / .6); color: var(--r-paper) }
.admin-chips { display: flex; flex-wrap: wrap; gap: 6px }
html.relieve .app-shell:not(.anonymous) #view .admin-chip { min-height: 30px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--i-line-strong); background: transparent; color: var(--i-soft); font-size: 12.5px; font-weight: 550; box-shadow: none; transform: none }
html.relieve .app-shell:not(.anonymous) #view .admin-chip:hover { color: var(--r-paper); border-color: var(--i-edge) }
html.relieve .app-shell:not(.anonymous) #view .admin-chip[aria-pressed='true'] { color: var(--r-paper); border-color: #a8325a; background: rgb(139 30 63 / .32) }
html.relieve .app-shell:not(.anonymous) #view .admin-chip[data-status='error'] { border-color: rgb(242 163 179 / .45) }
html.relieve .app-shell:not(.anonymous) #view .admin-count { margin: 0; font-family: var(--font-mono); font-size: 11.5px; color: var(--i-dim) }
.admin-compare-bar { position: sticky; top: 0; z-index: 4; display: flex; align-items: center; gap: 10px; padding: 8px 10px 8px 14px; border-radius: 12px; border: 1px solid #a8325a; background: #1a1f2b; box-shadow: 0 14px 30px -18px rgb(2 6 10 / .9) }
.admin-compare-bar[hidden] { display: none }
.admin-compare-text { margin-right: auto; font-size: 13px }
html.relieve .app-shell:not(.anonymous) #view .admin-compare-bar .primary { min-height: 34px; padding: 0 16px; border-radius: 999px; font-size: 13px }
html.relieve .app-shell:not(.anonymous) #view .admin-compare-bar .quiet { min-height: 34px; font-size: 12.5px }

html.relieve .app-shell:not(.anonymous) #view .admin-layout .admin-table-wrap { border-radius: 14px; border: 1px solid var(--i-line-strong); background: rgb(13 21 30 / .82); box-shadow: none; backdrop-filter: none; overflow: auto }
html.relieve .app-shell:not(.anonymous) #view .admin-layout .admin-table th { padding: 10px 12px; background: #172230; color: var(--i-soft); font: 600 11px/1.3 var(--font-body); letter-spacing: .03em; text-transform: none }
html.relieve .app-shell:not(.anonymous) #view .admin-layout .admin-table td { padding: 10px 12px; font-size: 13px; vertical-align: top }
html.relieve .app-shell:not(.anonymous) #view .admin-layout .admin-table .question-preview { font-weight: 550; color: var(--i-text); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden }
html.relieve .app-shell:not(.anonymous) #view .admin-layout .admin-table small { display: block; margin-top: 2px; font-family: var(--font-mono); font-size: 10.5px }
html.relieve .app-shell:not(.anonymous) #view .admin-layout .admin-table td.admin-date { white-space: nowrap; font-family: var(--font-mono); font-size: 11.5px; color: var(--i-soft) }
html.relieve .app-shell:not(.anonymous) #view .admin-layout .admin-table td.admin-pick { width: 38px; padding-right: 0 }
html.relieve .app-shell:not(.anonymous) #view .admin-layout .admin-pick input { width: 17px; height: 17px; min-height: 0; padding: 0; accent-color: #a8325a; cursor: pointer }
html.relieve .app-shell:not(.anonymous) #view .admin-layout .admin-table tr.is-picked td { background: rgb(139 30 63 / .14) }
html.relieve .app-shell:not(.anonymous) #view .admin-layout .admin-table tr td:first-child::before { content: none }
html.relieve .app-shell:not(.anonymous) #view .admin-layout .admin-empty { padding: 18px 12px }
.run-status { display: inline-block; padding: 2px 9px; border-radius: 999px; border: 1px solid rgb(174 184 195 / .35); font-size: 11.5px; font-weight: 600; white-space: nowrap; color: #d6dde4 }
.run-status[data-status='ready'] { border-color: rgb(159 211 180 / .45); color: #bfe3cd }
.run-status[data-status='error'] { border-color: rgb(242 163 179 / .55); color: #f5bdc8; background: rgb(242 163 179 / .08) }
.run-status[data-status='running'] { border-color: rgb(232 201 138 / .5); color: #ecd6a8 }
.run-status[data-status='cancelled'], .run-status[data-status='uncertain'] { color: #b9c3cc }

/* Compare: shorter pickers. */
html.relieve .app-shell:not(.anonymous) #view .compare-choices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px }
html.relieve .app-shell:not(.anonymous) #view .compare-results { max-height: 248px; overflow: auto; display: flex; flex-direction: column; gap: 4px; scrollbar-width: thin }
html.relieve .app-shell:not(.anonymous) #view .compare-results > .compare-result { flex: none; display: grid; gap: 2px; min-height: 0; height: auto; padding: 8px 12px; border-radius: 10px; text-align: left; line-height: 1.35 }
html.relieve .app-shell:not(.anonymous) #view .compare-result span { font-size: 13px; font-weight: 600; overflow-wrap: anywhere }
html.relieve .app-shell:not(.anonymous) #view .compare-result small { font-family: var(--font-mono); font-size: 10.5px; color: var(--i-dim) }
html.relieve .app-shell:not(.anonymous) #view .compare-result[aria-pressed='true'] { border-color: #a8325a; background: rgb(139 30 63 / .25) }
html.relieve .app-shell:not(.anonymous) #view .compare-form { padding: 16px; border-radius: 16px }
html.relieve .app-shell:not(.anonymous) #view .compare-picker { padding: 12px 14px; border-radius: 14px; display: grid; gap: 8px }
html.relieve .app-shell:not(.anonymous) #view .compare-chosen { margin: 6px 0 0; padding: 8px 10px; border-radius: 10px; background: rgb(139 30 63 / .18); font-size: 13px }

/* Prepared batches: index + detail. */
.batch-layout { display: grid; grid-template-columns: minmax(230px, 300px) minmax(0, 1fr); gap: 16px; align-items: start }
html.relieve .app-shell:not(.anonymous) #view .batch-index { position: sticky; top: 0; display: grid; gap: 8px; max-height: calc(100dvh - 110px); overflow: auto; padding-right: 4px }
html.relieve .app-shell:not(.anonymous) #view .batch-index input { min-height: 38px; border-radius: 10px; font-size: 13.5px }
.batch-list { display: grid; gap: 2px }
html.relieve .app-shell:not(.anonymous) #view .batch-item { position: relative; display: grid; gap: 2px; min-height: 0; padding: 9px 10px 9px 14px; border: 0; border-radius: 10px; background: transparent; text-align: left; color: var(--i-text) }
html.relieve .app-shell:not(.anonymous) #view .batch-item::before { content: ''; position: absolute; left: 3px; top: 9px; bottom: 9px; width: 2px; border-radius: 2px; background: var(--r-rose); transform: scaleY(0); transition: transform .25s var(--i-ease) }
html.relieve .app-shell:not(.anonymous) #view .batch-item:hover { background: rgb(255 255 255 / .04) }
html.relieve .app-shell:not(.anonymous) #view .batch-item[aria-current='true'] { background: rgb(139 30 63 / .2) }
html.relieve .app-shell:not(.anonymous) #view .batch-item[aria-current='true']::before { transform: scaleY(1) }
html.relieve .app-shell:not(.anonymous) #view .batch-item strong { font-size: 13.5px; font-weight: 600; line-height: 1.35 }
html.relieve .app-shell:not(.anonymous) #view .batch-item small { font-family: var(--font-mono); font-size: 10.5px; color: var(--i-dim) }
html.relieve .app-shell:not(.anonymous) #view .batch-detail .test-batch { margin: 0 }
html.relieve .app-shell:not(.anonymous) #view .batch-detail h2:focus { outline: none }
html.relieve .app-shell:not(.anonymous) #view .prepared-mode-legend { margin: 0; font-size: 12px; color: var(--i-dim) }

/* Library, users, operation, feedback. */
html.relieve .app-shell:not(.anonymous) #view .admin-layout .tabs[role='tablist'] { justify-self: start }
html.relieve .app-shell:not(.anonymous) #view .admin-invite { border-radius: 12px; border: 1px solid var(--i-line-strong) }
html.relieve .app-shell:not(.anonymous) #view .admin-invite > summary { padding: 10px 14px; font-size: 13.5px; font-weight: 600; cursor: pointer }
html.relieve .app-shell:not(.anonymous) #view .admin-invite > .panel { margin: 0 12px 12px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) auto; align-items: end; gap: 10px }
.admin-block { display: grid; gap: 10px }
html.relieve .app-shell:not(.anonymous) #view .admin-block > h2 { margin: 6px 0 0; font-family: var(--font-display); font-weight: 400; font-size: 21px; letter-spacing: -.01em }
html.relieve .app-shell:not(.anonymous) #view .admin-settings { padding: 14px 16px; border-radius: 14px; border: 1px solid rgb(232 201 138 / .35); background: rgb(232 201 138 / .04) }
html.relieve .app-shell:not(.anonymous) #view .admin-settings > .panel { border: 0; padding: 0; background: none; box-shadow: none }
html.relieve .app-shell:not(.anonymous) #view .feedback-list { display: grid; gap: 10px }
html.relieve .app-shell:not(.anonymous) #view .feedback-record { position: relative; display: grid; gap: 6px; padding: 14px 16px 14px 20px; border-radius: 14px; border: 1px solid var(--i-line-strong); background: rgb(17 27 37 / .8) }
html.relieve .app-shell:not(.anonymous) #view .feedback-record::before { content: ''; position: absolute; left: 0; top: 12px; bottom: 12px; width: 3px; border-radius: 0 3px 3px 0; background: #f2a3b3 }
html.relieve .app-shell:not(.anonymous) #view .feedback-record[data-value='up']::before { background: #9fd3b4 }
html.relieve .app-shell:not(.anonymous) #view .feedback-record h2 { margin: 0; font-family: var(--font-body); font-size: 15px; font-weight: 600 }
html.relieve .app-shell:not(.anonymous) #view .feedback-verdict { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--i-dim) }
html.relieve .app-shell:not(.anonymous) #view .feedback-actions { display: flex; gap: 8px; flex-wrap: wrap }

/* ---------- Narrow screens for the new surfaces ---------- */
@media (max-width: 1100px) {
  html.relieve .app-shell:not(.anonymous) #view .admin-layout { grid-template-columns: minmax(0, 1fr); gap: 12px }
  html.relieve .app-shell:not(.anonymous) #view .admin-nav { position: relative; flex-direction: row; align-items: center; gap: 8px; overflow-x: auto; scrollbar-width: thin; padding-bottom: 6px }
  .admin-nav-group { display: flex; align-items: center; gap: 2px }
  html.relieve .app-shell:not(.anonymous) #view .admin-nav-label { display: none }
  html.relieve .app-shell:not(.anonymous) #view .admin-nav :is(.admin-nav-item, .admin-back) { flex: none; white-space: nowrap }
  .batch-layout { grid-template-columns: minmax(0, 1fr) }
  html.relieve .app-shell:not(.anonymous) #view .batch-index { position: relative; max-height: 260px }
}
@media (max-width: 900px) {
  html.relieve .app-shell:not(.anonymous) #view:has(> .desk-page) { height: auto; padding: 8px 14px 24px }
  html.relieve .app-shell:not(.anonymous) #view .desk-page { grid-template-columns: minmax(0, 1fr); height: auto }
  html.relieve .app-shell:not(.anonymous) #view .desk-archive { overflow: visible; padding-bottom: 8px }
  html.relieve .app-shell:not(.anonymous) #view .desk-archive .collections-results { overflow: visible }
  .admin-toolbar { grid-template-columns: minmax(0, 1fr) }
  html.relieve .app-shell:not(.anonymous) #view .compare-choices { grid-template-columns: minmax(0, 1fr) }
  html.relieve .app-shell:not(.anonymous) #view .admin-invite > .panel { grid-template-columns: minmax(0, 1fr) }
}
@media (max-width: 800px) {
  html.relieve .app-shell:not(.anonymous) #view:has(.is-map-reader) { height: auto; padding: 6px 10px 18px }
  html.relieve .app-shell:not(.anonymous) #view .is-map-reader > .study-map { min-height: 62dvh }
  html.relieve .app-shell:not(.anonymous) #view .visual-surface:has(.is-map-reader) .visual-page-head { flex-wrap: wrap }
  html.relieve .app-shell:not(.anonymous) #view :is(.case-page-title, .visual-page-title) { white-space: normal; flex-basis: 100%; order: 2 }
  html.relieve .app-shell:not(.anonymous) #view:has(> .admin-layout) { padding: 4px 12px 24px }
}
@media (max-width: 420px) {
  html.relieve .app-shell:not(.anonymous) #view .desk-form { padding: 16px 14px 14px }
  html.relieve .app-shell:not(.anonymous) #view .desk-form .study-choice-rail { grid-template-columns: minmax(0, 1fr) }
  .desk-form-foot { flex-wrap: wrap }
  html.relieve .app-shell:not(.anonymous) #view .desk-form-foot .primary { width: 100%; justify-content: center }
  html.relieve .app-shell:not(.anonymous) #view .desk-archive .collections-controls { grid-template-columns: minmax(0, 1fr) auto }
  html.relieve .app-shell:not(.anonymous) #view .desk-archive .collections-controls > input { grid-column: 1 / -1 }
}
@media (prefers-reduced-motion: reduce) {
  html.relieve .app-shell:not(.anonymous) #view :is(.admin-nav-item, .batch-item, .desk-form .study-choice-option)::before { transition: none }
}
/* Map toolbar (superseded below by the floating tools of .is-overlay-tools). */
html.relieve .app-shell:not(.anonymous) #view .is-map-reader .study-map-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; padding: 6px 10px }
html.relieve .app-shell:not(.anonymous) #view .is-map-reader .study-map-zoom-cluster { order: 1 }
html.relieve .app-shell:not(.anonymous) #view .is-map-reader .study-map-legend-group { order: 2; width: auto; margin-right: auto; gap: 12px; font-size: 12px }
html.relieve .app-shell:not(.anonymous) #view .is-map-reader .study-map-actions { order: 3 }
html.relieve .app-shell:not(.anonymous) #view .is-map-reader .study-map-controls > :is(.study-map-export-status, .study-map-export-link) { order: 4 }
html.relieve .app-shell:not(.anonymous) #view .is-map-reader .study-map-controls > .study-map-legend-group { flex: 1 1 auto; justify-content: flex-start; min-width: max-content }
html.relieve .app-shell:not(.anonymous) #view .is-map-reader .study-map-controls > [hidden] { display: none }

/* Case feedback: sober heading that names the attempt. */
html.relieve .app-shell:not(.anonymous) #view .case-evaluation-head { padding: 18px 22px; border-radius: 16px }
html.relieve .app-shell:not(.anonymous) #view .case-evaluation-head h2 { margin: 4px 0 6px; font-family: var(--font-display); font-weight: 400; font-size: clamp(24px, 2.2vw, 30px); line-height: 1.15; letter-spacing: -.02em }
html.relieve .app-shell:not(.anonymous) #view .evaluation-question h2 { font-size: clamp(19px, 1.7vw, 23px); line-height: 1.3; letter-spacing: -.01em }
/* #main receives focus programmatically (skip link, Back/Forward): no ring around the whole area. */
html.relieve #main:focus, html.relieve #main:focus-visible { outline: none; box-shadow: none }
/* All administrative tables share the sober header, whatever section built them. */
html.relieve .app-shell:not(.anonymous) #view .admin-layout table th { padding: 10px 12px; background: #172230; color: var(--i-soft); font: 600 11px/1.3 var(--font-body); letter-spacing: .03em; text-transform: none }
html.relieve .app-shell:not(.anonymous) #view .admin-layout table td { padding: 10px 12px; font-size: 13px }
html.relieve .app-shell:not(.anonymous) #view .admin-layout .admin-table td:nth-child(3) { max-width: 200px; overflow-wrap: anywhere }
html.relieve .app-shell:not(.anonymous) #view .prepared-mode-legend { padding: 8px 12px; border-radius: 10px; border: 1px solid var(--i-line); background: none }
/* The first question can be read whole from the heading (APP03). */
html.relieve .app-shell:not(.anonymous) #view .conversation-head .page-title.is-expanded { display: block; -webkit-line-clamp: unset; overflow: visible; max-height: 40dvh; overflow-y: auto }
html.relieve .app-shell:not(.anonymous) #view .conversation-head .question-toggle { min-height: 28px; margin-top: 4px; padding: 0 2px; border: 0; background: transparent; color: var(--r-rose); font-size: 12.5px; font-weight: 600; text-decoration: underline; text-underline-offset: 3px }
html.relieve .app-shell:not(.anonymous) #view .conversation-head .question-toggle[hidden] { display: none }
/* Consultas: the batch is metadata of the question (VIS01); short columns stay on one line. */
html.relieve .app-shell:not(.anonymous) #view .admin-layout .admin-table td:nth-child(3) { max-width: 220px; overflow-wrap: normal }
html.relieve .app-shell:not(.anonymous) #view .admin-layout .admin-table .admin-run-meta { display: block; max-width: 70ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--i-dim) }
html.relieve .app-shell:not(.anonymous) #view .admin-layout .admin-table td.admin-account { overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
html.relieve .app-shell:not(.anonymous) #view .admin-layout .admin-table td:is(:nth-child(4), :nth-child(5)) { white-space: nowrap }

/* =====================================================================
   Pulido · tanda humana C01–C09 y pasada final (2026-10-06)
   ===================================================================== */

/* C01 · The start desk sits a little higher: the scene stays centred, with
   more room below it than above (phones keep their own rule). */
@media (min-width: 801px) {
  html.relieve .app-shell:not(.anonymous) #view .consult-start .consult-scene { padding: 1vh 0 14vh }
}
@media (min-width: 801px) and (max-height: 760px) {
  html.relieve .app-shell:not(.anonymous) #view .consult-start .consult-scene { padding: 0 0 11vh; gap: 18px }
}

/* C02 · A quiet colour mesh (Atlas C53, "malla de color", adapted): blurred
   navy, steel and wine pools at the edges, calmer under the reading column.
   It settles once on arrival (under 5 s) and then holds still. */
html.relieve .app-shell:not(.anonymous) #view .study.consult-start { position: relative; isolation: isolate }
html.relieve .app-shell:not(.anonymous) #view .study.consult-start::before {
  content: ''; position: absolute; inset: 0 -24px; z-index: -1; pointer-events: none;
  background:
    radial-gradient(34% 42% at 22% 26%, rgb(139 30 63 / .24), transparent 70%),
    radial-gradient(32% 40% at 80% 20%, rgb(54 92 124 / .32), transparent 72%),
    radial-gradient(38% 34% at 68% 86%, rgb(168 50 90 / .14), transparent 70%),
    radial-gradient(30% 32% at 12% 84%, rgb(80 118 148 / .18), transparent 70%);
  -webkit-mask-image: radial-gradient(ellipse 48% 44% at 50% 50%, rgb(0 0 0 / .4), #000 100%);
  mask-image: radial-gradient(ellipse 48% 44% at 50% 50%, rgb(0 0 0 / .4), #000 100%);
}
@media (prefers-reduced-motion: no-preference) {
  html.relieve:not([data-motion='false']) .app-shell:not(.anonymous) #view .study.consult-start::before { animation: consult-mesh-settle 4.6s cubic-bezier(.2, .8, .16, 1) both }
}
@keyframes consult-mesh-settle { from { opacity: 0; transform: translate3d(-2%, 1.5%, 0) scale(1.05) } to { opacity: 1; transform: none } }
/* Small uppercase label over the tinted desk: the softer grey keeps AA contrast. */
html.relieve .app-shell:not(.anonymous) #view .consult-ideas-label { color: var(--i-soft) }

/* C03 · Rotating ideas: the arrow turns once; the cards are animated from JS. */
html.relieve .app-shell:not(.anonymous) #view .consult-shuffle::before { display: inline-block }
@media (prefers-reduced-motion: no-preference) {
  html.relieve:not([data-motion='false']) .app-shell:not(.anonymous) #view .consult-shuffle.is-turning::before { animation: consult-turn .5s var(--i-ease) }
}
@keyframes consult-turn { from { transform: rotate(0) } to { transform: rotate(360deg) } }

/* C04–C08 · The map owns its frame. Tools float in its corners in compact
   groups; structure and sources open on demand in a side sheet. Shared by the
   reader and the expanded dialog (which lives outside the app shell). */
.study-map-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0 }
html.relieve .app-shell:not(.anonymous) #view:has(.is-map-reader) { padding: 4px 18px 10px }
html.relieve .app-shell:not(.anonymous) #view .visual-surface:has(.is-map-reader) .visual-page-head { margin-bottom: 6px; padding-bottom: 6px }
html.relieve .app-shell:not(.anonymous) #view .is-map-reader > .limitations { margin: 0; padding: 6px 12px; font-size: 12.5px; line-height: 1.5 }
:is(html.relieve .app-shell:not(.anonymous) #view, html.relieve .study-map-dialog) .study-map.is-overlay-tools {
  --m-glass: rgb(13 21 30 / .88); --m-line: rgb(174 184 195 / .18); --m-line-strong: rgb(174 184 195 / .3);
  --m-text: #e9edf1; --m-soft: #b9c3cc; --m-rose: #d998ae; --m-top: 54px; --m-bottom: 56px;
  position: relative; isolation: isolate;
}
html.relieve .study-map-dialog > .study-map.is-overlay-tools { display: flex; flex-direction: column; grid-template-rows: none }
:is(html.relieve .app-shell:not(.anonymous) #view, html.relieve .study-map-dialog) .study-map.is-overlay-tools > .study-map-body { flex: 1; min-height: 0; position: relative }
:is(html.relieve .app-shell:not(.anonymous) #view, html.relieve .study-map-dialog) .study-map.is-overlay-tools .study-mermaid-canvas { box-sizing: border-box; padding: var(--m-top) 14px var(--m-bottom); border: 0 }
:is(html.relieve .app-shell:not(.anonymous) #view, html.relieve .study-map-dialog) .study-map.is-overlay-tools > .study-map-controls {
  position: absolute; inset: 0; z-index: 4; display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto; grid-template-rows: auto minmax(0, 1fr) auto;
  grid-template-areas: "panels . actions" ". . ." "legend . zoom";
  gap: 8px; margin: 0; padding: 10px; border: 0; border-radius: 0; background: none; box-shadow: none; backdrop-filter: none; pointer-events: none;
}
:is(html.relieve .app-shell:not(.anonymous) #view, html.relieve .study-map-dialog) .study-map.is-overlay-tools > .study-map-controls > * { pointer-events: auto }
:is(html.relieve .app-shell:not(.anonymous) #view, html.relieve .study-map-dialog) .study-map.is-overlay-tools :is(.study-map-panels, .study-map-actions, .study-map-zoom-cluster) {
  display: flex; align-items: center; flex-wrap: nowrap; gap: 2px; width: auto; max-width: none; margin: 0; padding: 3px; order: initial;
  border-radius: 12px; border: 1px solid var(--m-line); background: var(--m-glass); backdrop-filter: blur(8px);
  box-shadow: 0 10px 24px -16px rgb(2 6 10 / .9);
}
:is(html.relieve .app-shell:not(.anonymous) #view, html.relieve .study-map-dialog) .study-map.is-overlay-tools .study-map-panels { grid-area: panels; align-self: start; justify-self: start }
:is(html.relieve .app-shell:not(.anonymous) #view, html.relieve .study-map-dialog) .study-map.is-overlay-tools .study-map-actions { grid-area: actions; align-self: start; justify-self: end; position: relative }
:is(html.relieve .app-shell:not(.anonymous) #view, html.relieve .study-map-dialog) .study-map.is-overlay-tools .study-map-zoom-cluster { grid-area: zoom; align-self: end; justify-self: end }
:is(html.relieve .app-shell:not(.anonymous) #view, html.relieve .study-map-dialog) .study-map.is-overlay-tools .study-map-legend-group {
  grid-area: legend; align-self: end; justify-self: start; display: flex; flex: none; gap: 12px; width: auto; min-width: 0; margin: 0; padding: 5px 10px;
  border-radius: 10px; border: 1px solid var(--m-line); background: rgb(13 21 30 / .72); color: var(--m-soft); font-size: 11.5px; pointer-events: none;
}
:is(html.relieve .app-shell:not(.anonymous) #view, html.relieve .study-map-dialog) .study-map.is-overlay-tools .study-map-controls :is(.study-map-zoom, .study-map-panel-toggle) {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: 32px; height: 32px; min-height: 32px; margin: 0; padding: 0 10px;
  border: 0; border-radius: 9px; background: transparent; box-shadow: none; transform: none; color: var(--m-soft); font-size: 13px; font-weight: 600; line-height: 1; white-space: nowrap;
}
:is(html.relieve .app-shell:not(.anonymous) #view, html.relieve .study-map-dialog) .study-map.is-overlay-tools .study-map-controls .study-map-zoom { width: 32px; padding: 0; font-size: 17px; font-weight: 500 }
:is(html.relieve .app-shell:not(.anonymous) #view, html.relieve .study-map-dialog) .study-map.is-overlay-tools .study-map-controls :is(.study-map-zoom, .study-map-panel-toggle):hover:not(:disabled) { background: rgb(255 255 255 / .07); color: #f7f3ea; border-color: transparent }
:is(html.relieve .app-shell:not(.anonymous) #view, html.relieve .study-map-dialog) .study-map.is-overlay-tools .study-map-controls :is(.study-map-zoom, .study-map-panel-toggle):disabled { opacity: .4; cursor: default }
:is(html.relieve .app-shell:not(.anonymous) #view, html.relieve .study-map-dialog) .study-map.is-overlay-tools .study-map-controls [hidden] { display: none !important }
:is(html.relieve .app-shell:not(.anonymous) #view, html.relieve .study-map-dialog) .study-map.is-overlay-tools .study-map-panel-toggle[aria-expanded='true'],
:is(html.relieve .app-shell:not(.anonymous) #view, html.relieve .study-map-dialog) .study-map.is-overlay-tools .study-map-zoom[aria-expanded='true'] { background: rgb(139 30 63 / .34); color: #f7f3ea; box-shadow: inset 0 -2px 0 #a8325a }
:is(html.relieve .app-shell:not(.anonymous) #view, html.relieve .study-map-dialog) .study-map.is-overlay-tools .study-map-count { min-width: 18px; padding: 2px 5px; border-radius: 999px; background: rgb(217 152 174 / .16); color: var(--m-rose); font: 600 10.5px/1.2 var(--font-mono); text-align: center }
.study-map-icon { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round }
.study-map-icon.is-more { stroke-width: 2.8 }

/* "Más opciones": a small disclosure under its button. */
:is(html.relieve .app-shell:not(.anonymous) #view, html.relieve .study-map-dialog) .study-map.is-overlay-tools .study-map-more {
  position: absolute; top: calc(100% + 6px); right: 0; z-index: 7; display: grid; gap: 2px; width: max-content; min-width: 210px; max-width: min(300px, 80vw); padding: 6px;
  border-radius: 12px; border: 1px solid var(--m-line-strong); background: #111b25; box-shadow: 0 20px 40px -18px rgb(2 6 10 / .95);
}
:is(html.relieve .app-shell:not(.anonymous) #view, html.relieve .study-map-dialog) .study-map.is-overlay-tools .study-map-more[hidden] { display: none }
:is(html.relieve .app-shell:not(.anonymous) #view, html.relieve .study-map-dialog) .study-map.is-overlay-tools .study-map-menu-item {
  display: flex; align-items: center; width: 100%; min-height: 36px; margin: 0; padding: 0 10px; border: 0; border-radius: 8px; background: transparent; box-shadow: none;
  color: var(--m-text); font-size: 13px; font-weight: 550; text-align: left;
}
:is(html.relieve .app-shell:not(.anonymous) #view, html.relieve .study-map-dialog) .study-map.is-overlay-tools .study-map-menu-item:hover:not(:disabled) { background: rgb(255 255 255 / .06) }
:is(html.relieve .app-shell:not(.anonymous) #view, html.relieve .study-map-dialog) .study-map.is-overlay-tools .study-map-menu-item:disabled { opacity: .45; cursor: default }
:is(html.relieve .app-shell:not(.anonymous) #view, html.relieve .study-map-dialog) .study-map.is-overlay-tools .study-map-more .study-map-export-status { display: block; padding: 6px 10px 0; font-size: 12px; line-height: 1.4; color: var(--m-soft); white-space: normal }
:is(html.relieve .app-shell:not(.anonymous) #view, html.relieve .study-map-dialog) .study-map.is-overlay-tools .study-map-more .study-map-export-link { padding: 2px 10px 6px; font-size: 12.5px; color: var(--m-rose) }
:is(html.relieve .app-shell:not(.anonymous) #view, html.relieve .study-map-dialog) .study-map.is-overlay-tools .study-map-more > [hidden] { display: none }

/* Side sheet: textual structure and sources, over the map's left edge. */
:is(html.relieve .app-shell:not(.anonymous) #view, html.relieve .study-map-dialog) .study-map.is-overlay-tools .study-map-sheet {
  position: absolute; z-index: 5; top: var(--m-top); left: 10px; bottom: 10px; width: min(360px, calc(100% - 20px)); display: flex; flex-direction: column;
  border-radius: 14px; border: 1px solid var(--m-line-strong); background: rgb(17 27 37 / .97); box-shadow: 0 24px 48px -22px rgb(2 6 10 / .95); overflow: hidden; color: var(--m-text);
}
:is(html.relieve .app-shell:not(.anonymous) #view, html.relieve .study-map-dialog) .study-map.is-overlay-tools .study-map-sheet[hidden] { display: none }
:is(html.relieve .app-shell:not(.anonymous) #view, html.relieve .study-map-dialog) .study-map.is-overlay-tools .study-map-sheet-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 6px 8px 16px; border-bottom: 1px solid var(--m-line) }
:is(html.relieve .app-shell:not(.anonymous) #view, html.relieve .study-map-dialog) .study-map.is-overlay-tools .study-map-sheet-head h3 { margin: 0; font-family: var(--font-display); font-weight: 420; font-size: 18px; letter-spacing: -.01em; color: #f7f3ea; outline: none; box-shadow: none }
:is(html.relieve .app-shell:not(.anonymous) #view, html.relieve .study-map-dialog) .study-map.is-overlay-tools .study-map-sheet-close { display: inline-grid; place-items: center; width: 34px; height: 34px; min-height: 34px; padding: 0; border: 0; border-radius: 8px; background: transparent; color: var(--m-soft); font-size: 20px; line-height: 1 }
:is(html.relieve .app-shell:not(.anonymous) #view, html.relieve .study-map-dialog) .study-map.is-overlay-tools .study-map-sheet-close:hover { background: rgb(255 255 255 / .07); color: #f7f3ea }
:is(html.relieve .app-shell:not(.anonymous) #view, html.relieve .study-map-dialog) .study-map.is-overlay-tools .study-map-sheet-body { flex: 1; min-height: 0; overflow: auto; overscroll-behavior: contain; padding: 8px 8px 14px; scrollbar-width: thin }
:is(html.relieve .app-shell:not(.anonymous) #view, html.relieve .study-map-dialog) .study-map.is-overlay-tools .study-map-sheet-body > [hidden] { display: none }
:is(html.relieve .app-shell:not(.anonymous) #view, html.relieve .study-map-dialog) .study-map.is-overlay-tools .study-map-text-details { margin: 0; padding: 0; border: 0; background: none; max-height: none; overflow: visible }
:is(html.relieve .app-shell:not(.anonymous) #view, html.relieve .study-map-dialog) .study-map.is-overlay-tools .study-map-summary { margin: 4px 8px 10px; font-size: 13.5px; line-height: 1.55; color: var(--m-soft) }
:is(html.relieve .app-shell:not(.anonymous) #view, html.relieve .study-map-dialog) .study-map.is-overlay-tools .study-map-text-heading { margin: 12px 8px 4px; font-family: var(--font-mono); font-size: 10.5px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--m-soft) }
:is(html.relieve .app-shell:not(.anonymous) #view, html.relieve .study-map-dialog) .study-map.is-overlay-tools .study-map-text { display: grid; gap: 1px; margin: 0; padding: 0; list-style: none }
:is(html.relieve .app-shell:not(.anonymous) #view, html.relieve .study-map-dialog) .study-map.is-overlay-tools .study-map-text-item {
  display: block; width: 100%; min-height: 34px; margin: 0; padding: 7px 10px; border: 0; border-radius: 8px; background: transparent; box-shadow: none;
  color: var(--m-text); font-size: 13.5px; font-weight: 500; line-height: 1.4; text-align: left;
}
:is(html.relieve .app-shell:not(.anonymous) #view, html.relieve .study-map-dialog) .study-map.is-overlay-tools .study-map-text.is-relations .study-map-text-item { color: var(--m-soft); font-size: 13px }
:is(html.relieve .app-shell:not(.anonymous) #view, html.relieve .study-map-dialog) .study-map.is-overlay-tools .study-map-text-item:hover { background: rgb(255 255 255 / .05); color: #f7f3ea }
:is(html.relieve .app-shell:not(.anonymous) #view, html.relieve .study-map-dialog) .study-map.is-overlay-tools .study-map-sources .study-source-list { display: grid; gap: 4px; margin: 4px 0 0; padding: 0; border: 0; background: none }
:is(html.relieve .app-shell:not(.anonymous) #view, html.relieve .study-map-dialog) .study-map.is-overlay-tools .study-map-sources .study-source {
  display: block; width: 100%; min-height: 36px; margin: 0; padding: 8px 10px; border-radius: 8px; border: 1px solid var(--m-line); background: transparent; box-shadow: none;
  color: var(--m-text); font-size: 13px; line-height: 1.4; text-align: left;
}
:is(html.relieve .app-shell:not(.anonymous) #view, html.relieve .study-map-dialog) .study-map.is-overlay-tools .study-map-sources .study-source:hover { border-color: rgb(217 152 174 / .4); background: rgb(139 30 63 / .14) }

/* The node inspector and the article panel open below the top tools and above the zoom group. */
@media (min-width: 801px) {
  :is(html.relieve .app-shell:not(.anonymous) #view, html.relieve .study-map-dialog) .study-map.is-overlay-tools .study-map-body > .study-map-detail,
  :is(html.relieve .app-shell:not(.anonymous) #view, html.relieve .study-map-dialog) .study-map.is-overlay-tools.is-article-open .study-map-body > .study-map-article {
    top: var(--m-top); right: 10px; max-height: calc(100% - var(--m-top) - var(--m-bottom) - 8px);
  }
}
@media (max-width: 800px) {
  :is(html.relieve .app-shell:not(.anonymous) #view, html.relieve .study-map-dialog) .study-map.is-overlay-tools { --m-top: 50px; --m-bottom: 50px }
  :is(html.relieve .app-shell:not(.anonymous) #view, html.relieve .study-map-dialog) .study-map.is-overlay-tools > .study-map-controls { padding: 8px; gap: 6px }
  :is(html.relieve .app-shell:not(.anonymous) #view, html.relieve .study-map-dialog) .study-map.is-overlay-tools .study-mermaid-canvas { padding-inline: 8px }
  :is(html.relieve .app-shell:not(.anonymous) #view, html.relieve .study-map-dialog) .study-map.is-overlay-tools .study-map-legend-group { gap: 8px; padding: 4px 8px; font-size: 11px }
  /* On phones the sheet rises from the bottom, under the inspector (which keeps its own bottom sheet). */
  :is(html.relieve .app-shell:not(.anonymous) #view, html.relieve .study-map-dialog) .study-map.is-overlay-tools .study-map-sheet { position: fixed; inset: auto 8px 8px; top: auto; width: auto; max-height: 62dvh; z-index: 7 }
}
@media (max-width: 380px) {
  :is(html.relieve .app-shell:not(.anonymous) #view, html.relieve .study-map-dialog) .study-map.is-overlay-tools .study-map-controls .study-map-panel-toggle { padding: 0 8px; font-size: 12.5px }
}
/* Touch: larger targets for the floating tools (WCAG 2.5.8 is met at 32 px; 40 px is kinder to fingers). */
@media (pointer: coarse) {
  :is(html.relieve .app-shell:not(.anonymous) #view, html.relieve .study-map-dialog) .study-map.is-overlay-tools { --m-top: 62px; --m-bottom: 64px }
  :is(html.relieve .app-shell:not(.anonymous) #view, html.relieve .study-map-dialog) .study-map.is-overlay-tools .study-map-controls :is(.study-map-zoom, .study-map-panel-toggle) { min-width: 40px; height: 40px; min-height: 40px }
  :is(html.relieve .app-shell:not(.anonymous) #view, html.relieve .study-map-dialog) .study-map.is-overlay-tools .study-map-controls .study-map-zoom { width: 40px }
  :is(html.relieve .app-shell:not(.anonymous) #view, html.relieve .study-map-dialog) .study-map.is-overlay-tools :is(.study-map-menu-item, .study-map-text-item, .study-map-sources .study-source) { min-height: 44px }
}
@media (forced-colors: active) {
  :is(html.relieve .app-shell:not(.anonymous) #view, html.relieve .study-map-dialog) .study-map.is-overlay-tools :is(.study-map-panels, .study-map-actions, .study-map-zoom-cluster, .study-map-sheet, .study-map-more) { border: 1px solid CanvasText }
  :is(html.relieve .app-shell:not(.anonymous) #view, html.relieve .study-map-dialog) .study-map.is-overlay-tools [aria-expanded='true'] { text-decoration: underline; text-underline-offset: 4px }
}

/* C09 · Contact inside the account dialog. */
.contact-view { display: grid; gap: 12px }
.contact-view h3 { margin: 0; font-family: var(--font-display); font-weight: 420; font-size: 20px }
.contact-channel { display: grid; gap: 4px; padding: 12px 14px; border-radius: 12px; border: 1px solid rgb(174 184 195 / .2) }
.contact-channel strong { font-size: 13.5px }
.contact-channel p { margin: 0; font-size: 13.5px; line-height: 1.55 }
.contact-channel .contact-mail { justify-self: start; font-weight: 600; color: #e9bfcd; text-underline-offset: 3px }

/* ---------- Pasada final: one visible focus for every interior control ----------
   Interior rules reset box-shadow (some with !important), which silently removed
   the global box-shadow focus ring from nav, tabs, ideas, chips and primary
   buttons. An outline is not reset by those rules and follows the radius. */
:is(html.relieve .app-shell:not(.anonymous), html.relieve .modal, html.relieve .account-menu, html.relieve .study-map-dialog) :is(button, a[href], summary, [role='button'], [role='tab'], [tabindex]:not([tabindex='-1']):not(input):not(textarea):not(tr)):focus-visible {
  outline: 2px solid var(--r-rose, #d998ae); outline-offset: 2px;
}
:is(html.relieve .app-shell:not(.anonymous), html.relieve .study-map-dialog) :is(.study-map-zoom, .study-map-panel-toggle, .study-map-menu-item, .study-map-text-item, .work-tabs [data-work-tab]):focus-visible { outline-offset: -2px }
/* A sticky comparison bar must not cover the row that receives focus (WCAG 2.4.11). */
html.relieve :is(#main, #view):has(.admin-compare-bar:not([hidden])) { scroll-padding-top: 64px }
@media (prefers-reduced-motion: reduce) {
  html.relieve .app-shell:not(.anonymous) #view .study.consult-start::before,
  html.relieve .app-shell:not(.anonymous) #view .consult-shuffle::before { animation: none }
}

/* PUL02 · Narrow map frames (phones, a narrow dialog): the two bottom groups no
   longer share one row with the top ones. Actions and zoom stack vertically at
   the right edge and the legend reads as a column, so every tool stays whole
   at its full touch size. Measured on the map frame itself, not the viewport. */
:is(html.relieve .app-shell:not(.anonymous) #view, html.relieve .study-map-dialog) .study-map.is-overlay-tools { container: study-map / inline-size }
@container study-map (max-width: 420px) {
  :is(html.relieve .app-shell:not(.anonymous) #view, html.relieve .study-map-dialog) .study-map.is-overlay-tools > .study-map-controls { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "panels actions" ". ." "legend zoom" }
  :is(html.relieve .app-shell:not(.anonymous) #view, html.relieve .study-map-dialog) .study-map.is-overlay-tools :is(.study-map-actions, .study-map-zoom-cluster) { flex-direction: column }
  :is(html.relieve .app-shell:not(.anonymous) #view, html.relieve .study-map-dialog) .study-map.is-overlay-tools .study-map-panels { flex-wrap: wrap; max-width: 100% }
  :is(html.relieve .app-shell:not(.anonymous) #view, html.relieve .study-map-dialog) .study-map.is-overlay-tools .study-map-legend-group { flex-direction: column; align-items: flex-start; gap: 2px }
}