/* Refined interface layouts; colors are shared with interactive-pearl.css. */

.application-matcher .matcher-screen, .system-explorer, .home-report-reader-shell[data-report-screen] {
  padding: 0;
  border: 1px solid var(--pearl-frame-line);
  border-radius: 20px;
  background: var(--pearl-frame);
  box-shadow: 0 16px 40px #0E233014;
  overflow: clip;
}
:is(.application-matcher, .system-explorer, .home-report-reader-shell) .interface-titlebar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 52px;
  padding: 13px 28px;
  background: var(--interface-navy);
  color: #fff;
}
:is(.application-matcher, .system-explorer, .home-report-reader-shell) .interface-wordmark {
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .16em;
  line-height: 1.5;
}
:is(.application-matcher, .system-explorer, .home-report-reader-shell) .interface-name {
  min-width: 0;
  color: #e6eeee;
  font-size: 12px;
  line-height: 1.5;
  text-align: right;
}
:is(.application-matcher, .system-explorer, .home-report-reader-shell) > .interface-content,
.application-matcher .matcher-screen > .interface-content {
  background: var(--interface-background);
}
.application-matcher .matcher-tabs, .application-matcher .matcher-panel {
  background: transparent;
  border-radius: 0;
}
.application-matcher .matcher-tabs {
  gap: 12px;
  padding: 18px 28px;
  border-bottom-color: var(--pearl-frame-line);
  backdrop-filter: blur(12px);
}
.application-matcher .matcher-tabs > button {
  min-height: 48px;
  gap: 10px;
  padding: 9px 13px;
  border-color: var(--pearl-line);
  border-radius: 10px;
  background: var(--pearl-card);
  color: var(--pearl-ink);
  font-size: 14px;
}
.application-matcher .matcher-tabs > button > .matcher-tab-letter {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 26px;
  width: 26px;
  height: 26px;
  border: 1px solid var(--pearl-frame-line);
  border-radius: 50%;
  background: #D5E3EA;
  color: var(--pearl-accent);
  font: 600 12px/1 var(--font);
}
.application-matcher .matcher-tabs > button[aria-selected=true] {
  background: var(--interface-navy);
  color: #fff;
  border-color: var(--interface-navy);
  box-shadow: none;
}
.application-matcher .matcher-tabs > button[aria-selected=true] > .matcher-tab-letter {
  color: #fff;
  background: #294354;
  border-color: #526b77;
}
.application-matcher .matcher-panel { padding: 28px; min-height: 0; }
.application-matcher .matcher-panel-heading { margin-bottom: 24px; }
.application-matcher .matcher-panel-heading h3 { font-size: 26px; }
.application-matcher .matcher-panel-heading > p:not(.eyebrow) { margin-top: 12px; }
.application-matcher :is(.matcher-choice-list, .matcher-output-list, .matcher-flow-list, .matcher-module-list) { gap: 12px; }
.application-matcher .matcher-choice-group + .matcher-choice-group { margin-top: 24px; padding-top: 24px; }
.application-matcher .matcher-choice-group h4 { margin-bottom: 12px; font-size: 18px; }
.application-matcher :is(.matcher-question, .matcher-output, .matcher-module, .matcher-flow-step, .matcher-result, .matcher-report-example, .matcher-feedback, .matcher-blueprint-note) {
  border-color: var(--pearl-line);
  border-radius: 10px;
  background: var(--pearl-card);
}
.application-matcher .matcher-choice-list .matcher-question {
  min-height: 96px;
  padding: 17px 46px 17px 18px;
  font-size: 16px;
  line-height: 1.6;
}
.application-matcher .matcher-choice-list-route .matcher-question { min-height: 110px; }
.application-matcher .matcher-choice-copy small { margin-top: 7px; }
.application-matcher .matcher-output { min-height: 96px; padding: 18px 46px 18px 18px; }
.application-matcher .matcher-output strong { font-size: 21px; }
.application-matcher :is(.matcher-question, .matcher-output, .matcher-module) { position: relative; }
.application-matcher :is(.matcher-result, .matcher-report-example) { padding: 22px; margin-top: 24px; }
.application-matcher .matcher-result h4 { font-size: 26px; }
.application-matcher .matcher-flow-step { padding: 18px; }
.application-matcher .matcher-feedback { margin-top: 24px; padding: 22px; border-left-color: var(--pearl-selected-line); }
.application-matcher .matcher-blueprint-note { padding: 18px; border-left-color: var(--pearl-selected-line); }
.application-matcher .matcher-flow-step.is-blueprint:not(.is-result) { background: var(--pearl-card); border-color: var(--pearl-line); }
.application-matcher :is(.matcher-question, .matcher-output):hover { background: var(--pearl-hover); border-color: var(--pearl-selected-line); }
.application-matcher :is(.matcher-question.is-active, .matcher-question[aria-checked=true], .matcher-output.is-active, .matcher-module.is-active, .matcher-flow-step.is-result) {
  background: var(--pearl-selected);
  border-color: var(--pearl-selected-line);
  color: var(--pearl-ink);
  box-shadow: inset 0 0 0 1px var(--pearl-selected-line);
}
.system-explorer > .interface-content { padding: 28px; }
.system-explorer .system-explorer-heading { margin-bottom: 24px; }
.system-explorer .system-explorer-heading h2 { font-size: 26px; margin-bottom: 14px; }
.system-explorer :is(.system-explorer-stages, .system-explorer-categories) { gap: 12px; }
.system-explorer :is(.system-explorer-node, .system-category-node) {
  position: relative;
  padding: 18px 46px 18px 18px;
  border-color: var(--pearl-line);
  border-radius: 10px;
  background: var(--pearl-card);
  color: var(--pearl-ink);
}
.system-explorer .system-explorer-node { min-height: 128px; gap: 8px; padding: 18px; }
.system-explorer .system-explorer-node strong { font-size: 19px; }
.system-explorer .system-category-node { min-height: 76px; font-size: 15px; }
.system-explorer :is(.system-explorer-node, .system-category-node):hover { background: var(--pearl-hover); border-color: var(--pearl-selected-line); }
.system-explorer :is(.system-explorer-node.is-selected, .system-category-node.is-selected, [data-system-node][aria-pressed=true]) {
  background: var(--pearl-selected);
  border-color: var(--pearl-selected-line);
  color: var(--pearl-ink);
  box-shadow: inset 0 0 0 1px var(--pearl-selected-line);
}
.system-explorer .system-explorer-node.is-parent { border-color: var(--pearl-selected-line); }
.system-explorer .system-explorer-branches { margin-top: 24px; padding-top: 24px; border-top-color: var(--pearl-frame-line); }
.system-explorer .system-explorer-detail {
  margin-top: 24px;
  padding: 22px;
  gap: 24px;
  border-color: var(--pearl-line);
  border-radius: 10px;
  background: var(--pearl-card);
}
.system-explorer .system-explorer-detail h3 { font-size: 26px; }
.system-explorer .system-explorer-note { margin-top: 22px; }
.application-matcher :is(.matcher-question, .matcher-output, .matcher-module).is-active::after,
.application-matcher .matcher-question[aria-checked=true]::after,
.system-explorer :is(.system-explorer-node, .system-category-node).is-selected::after,
.system-explorer [data-system-node][aria-pressed=true]::after {
  content: '✓' / '';
  position: absolute;
  top: 16px;
  right: 14px;
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--pearl-accent);
  color: #fff;
  font: 600 14px/1 var(--font);
  pointer-events: none;
}
.application-matcher .button.primary {
  border-color: var(--interface-navy);
  border-radius: 10px;
  background: var(--interface-navy);
  color: #fff;
}
.application-matcher .button.primary:hover { background: var(--interface-navy-hover); border-color: var(--interface-navy-hover); color: #fff; }
.application-matcher .button.secondary { border-radius: 10px; }
.system-explorer .system-explorer-detail > a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 12px 16px;
  border: 1px solid var(--interface-navy);
  border-radius: 10px;
  background: var(--interface-navy);
  color: #fff;
  text-align: center;
}
.system-explorer .system-explorer-detail > a:hover { background: var(--interface-navy-hover); border-color: var(--interface-navy-hover); color: #fff; }
/* Report controls share the same frame, palette and selection cues. */
.home-report-reader-shell .home-report-reader-selector {
  padding: 22px 28px;
  background: transparent;
  border-bottom-color: var(--pearl-frame-line);
}
.home-report-reader-shell .home-report-reader-tabs { gap: 12px; }
.home-report-reader-shell .home-report-reader-tabs button {
  position: relative;
  padding: 11px 46px 11px 18px;
  border-color: var(--pearl-line);
  border-radius: 10px;
  background: var(--pearl-card);
  color: var(--pearl-ink);
}
.home-report-reader-shell .home-report-reader-tabs button:hover { background: var(--pearl-hover); border-color: var(--pearl-selected-line); color: var(--pearl-ink); }
.home-report-reader-shell .home-report-reader-tabs button[aria-selected=true] {
  background: var(--pearl-selected);
  border-color: var(--pearl-selected-line);
  color: var(--pearl-ink);
  box-shadow: inset 0 0 0 1px var(--pearl-selected-line);
}
.home-report-reader-shell .home-report-reader-tabs button[aria-selected=true]::after {
  content: '✓' / '';
  position: absolute;
  top: 50%;
  right: 14px;
  transform: translateY(-50%);
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--pearl-accent);
  color: #fff;
  font: 600 14px/1 var(--font);
  pointer-events: none;
}
.home-report-reader-shell .home-report-reader-panel { padding: 26px 28px 28px; background: transparent; }
.home-report-reader-shell .home-report-reader-heading h3 { font-size: 26px; }
.home-report-reader-shell .home-report-pdf { border-color: var(--pearl-line); border-radius: 10px; background: var(--pearl-card); }
.home-report-reader-shell .home-report-reader-actions [data-report-download] {
  border-color: var(--interface-navy);
  border-radius: 10px;
  background: var(--interface-navy);
  color: #fff;
}
.home-report-reader-shell .home-report-reader-actions [data-report-download]:hover { border-color: var(--interface-navy-hover); background: var(--interface-navy-hover); color: #fff; }
@media (max-width: 1000px) {
  .system-explorer .system-explorer-detail { grid-template-columns: 1fr; gap: 18px; }
  .system-explorer .system-explorer-detail > a { max-width: none; justify-self: start; }
}
@media (max-width: 800px) {
  .application-matcher .matcher-tabs { padding: 16px 20px; gap: 10px; }
  .application-matcher .matcher-panel, .system-explorer > .interface-content { padding: 24px 20px; }
  .application-matcher .matcher-tabs > button { gap: 8px; padding: 9px 10px; font-size: 13px; }
}
@media (max-width: 500px) {
  :is(.application-matcher, .system-explorer, .home-report-reader-shell) .interface-titlebar { padding: 13px 18px; gap: 12px; }
  :is(.application-matcher, .system-explorer, .home-report-reader-shell) .interface-wordmark { font-size: 12px; }
  .application-matcher .matcher-tabs { padding: 14px 12px; gap: 7px; }
  .application-matcher .matcher-tabs > button { min-height: 84px; padding: 9px 5px; gap: 7px; font-size: 12px; }
  .application-matcher .matcher-tabs > button > .matcher-tab-letter { flex-basis: 24px; width: 24px; height: 24px; }
  .application-matcher .matcher-panel, .system-explorer > .interface-content { padding: 24px 18px; }
  .application-matcher .matcher-choice-list .matcher-question { padding-left: 16px; min-height: 88px; }
  .application-matcher :is(.matcher-result, .matcher-report-example, .matcher-feedback) { padding: 20px 18px; }
  .system-explorer .system-explorer-node { min-height: 116px; }
  .system-explorer .system-explorer-detail { padding: 20px 18px; }
  .home-report-reader-shell .home-report-reader-selector { padding: 22px 18px; }
  .home-report-reader-shell .home-report-reader-panel { padding: 24px 18px; }
}