/* Phase C2: final presentation layer for the authenticated dashboard concept. */
:root {
  --c2-shell: #20373b;
  --c2-shell-deep: #14282c;
  --c2-shell-line: #496064;
  --c2-canvas: #f2f3ed;
  --c2-card: #ffffff;
  --c2-cream: #fbfaf5;
  --c2-cream-strong: #f5eedf;
  --c2-text: #203033;
  --c2-copy: #465b57;
  --c2-muted: #5e716c;
  --c2-line: #d7dfda;
  --c2-gold: #e6a643;
  --c2-gold-dark: #765014;
  --c2-green: #276c4d;
  --c2-green-soft: #e4f2e8;
  --c2-amber: #8a5907;
  --c2-amber-soft: #fff1d3;
  --c2-red: #963b32;
  --c2-red-soft: #fde5e1;
  --c2-blue: #345f78;
  --c2-shadow: 0 8px 26px rgba(31, 55, 51, 0.08);
  --c2-shadow-raised: 0 16px 42px rgba(31, 55, 51, 0.12);
  --c2-radius: 18px;
  --c2-radius-small: 12px;
}

html { background: var(--c2-canvas); }
body { background: var(--c2-canvas) !important; color: var(--c2-text) !important; }
.boundary-banner {
  min-height: 34px;
  padding: 9px 18px !important;
  border-color: #b87812 !important;
  background: linear-gradient(90deg, #f7c76d, var(--c2-gold)) !important;
  color: #38270b !important;
  letter-spacing: .065em;
}
.app { grid-template-columns: 236px minmax(0, 1fr) !important; }
.sidebar {
  width: 236px !important;
  padding: 24px 18px !important;
  background: linear-gradient(160deg, var(--c2-shell), var(--c2-shell-deep)) !important;
  border-right: 1px solid var(--c2-shell-line);
  gap: 26px !important;
}
.brandwrap { padding: 0 4px; }
.brand-logo { max-width: 126px; height: auto; }
.brand-meta strong { color: #fffaf0 !important; font-size: 14px !important; }
.brand-meta span { color: #c5d3cf !important; line-height: 1.45; }
.nav { gap: 8px !important; }
.nav a {
  min-height: 46px;
  padding: 11px 12px !important;
  border-radius: 11px !important;
  color: #e8efec !important;
  font-size: 13px !important;
  letter-spacing: .005em;
}
.nav a:hover { background: rgba(255, 255, 255, .08) !important; }
.nav a:focus-visible {
  outline: 3px solid #ffd98e !important;
  outline-offset: 2px !important;
  background: rgba(255, 255, 255, .09) !important;
}
.nav a[aria-current="location"] {
  border-color: var(--c2-gold) !important;
  background: linear-gradient(135deg, #f5bd59, var(--c2-gold)) !important;
  color: #273638 !important;
  box-shadow: 0 7px 18px rgba(0, 0, 0, .18);
}
.nav-dot { width: 8px !important; height: 8px !important; background: currentColor !important; opacity: .75; }
.side-boundary {
  padding: 15px !important;
  border-color: #5e7475 !important;
  border-radius: var(--c2-radius-small) !important;
  background: rgba(255, 255, 255, .045);
  color: #cbd8d4 !important;
}
.side-boundary strong { color: #ffd483 !important; }
.back { border-color: #52686a !important; }
.back a { display: inline-block; padding: 5px 0; color: #f2f6f3 !important; }

.content { grid-column: 2 !important; background: var(--c2-canvas) !important; }
.hero {
  padding: 26px clamp(22px, 4vw, 54px) 24px !important;
  border-bottom: 1px solid var(--c2-line) !important;
  background: radial-gradient(circle at 95% 12%, rgba(230, 166, 67, .14), transparent 25%), #fff !important;
  color: var(--c2-text) !important;
}
.eyebrow { color: var(--c2-gold-dark) !important; font-size: 11px !important; }
.hero h2 {
  margin-top: 9px !important;
  color: var(--c2-text) !important;
  font-family: Inter, ui-sans-serif, system-ui, sans-serif !important;
  font-size: clamp(30px, 3.6vw, 45px) !important;
  font-weight: 800;
  letter-spacing: -.035em;
}
.hero p { max-width: 760px; color: var(--c2-copy) !important; font-size: 14px !important; }
.hero-side img {
  width: 88px !important;
  height: 88px !important;
  border: 2px solid #f0bf67 !important;
  border-radius: 24px !important;
  box-shadow: var(--c2-shadow-raised) !important;
}
.concept-pill {
  border-color: #d5b678 !important;
  background: var(--c2-cream-strong);
  color: #674711 !important;
}
.main {
  padding: 28px clamp(16px, 3.5vw, 50px) 52px !important;
  gap: 22px !important;
  background: var(--c2-canvas) !important;
}
.main > :is(.section, .feedback-card),
.ia-find-sections > .section,
.attention-context > .section {
  border: 1px solid var(--c2-line) !important;
  border-radius: var(--c2-radius) !important;
  background: var(--c2-card) !important;
  color: var(--c2-text) !important;
  box-shadow: var(--c2-shadow) !important;
}
.main > .section { padding: 20px !important; }
.section-heading h2,
.section-heading h3,
.ia-region-heading h2,
.section-toggle-title,
.main h3,
.main h4,
.main h5 { color: var(--c2-text) !important; }
.section-heading p,
.ia-region-heading p,
.main :is(p, li, dd),
footer { color: var(--c2-copy) !important; }
.ia-region-heading h2,
.section-toggle-title,
.main h3 { font-family: Inter, ui-sans-serif, system-ui, sans-serif !important; letter-spacing: -.02em; }

.section-toggle,
.ia-region-find > .section-toggle,
.ia-region-supporting > .section-toggle,
.ia-region-concept > .section-toggle {
  width: calc(100% + 40px) !important;
  min-height: 66px !important;
  margin: -20px -20px 18px !important;
  padding: 15px 20px !important;
  border: 0 !important;
  border-bottom: 1px solid #c68b2f !important;
  border-radius: var(--c2-radius) var(--c2-radius) 0 0 !important;
  background: linear-gradient(135deg, #f5c266, var(--c2-gold)) !important;
  color: #253437 !important;
}
.section.is-collapsed > .section-toggle { margin-bottom: -20px !important; border-radius: var(--c2-radius) !important; }
.section-toggle-title { color: #253437 !important; font-size: clamp(20px, 2vw, 25px) !important; font-weight: 800 !important; }
.section-toggle-action { color: #50360b !important; font-size: 10px !important; }
.section-toggle-icon { border-color: #6b4a12 !important; background: rgba(255, 255, 255, .35); }
.section-toggle:focus-visible,
.main :is(button, a, input, select, textarea, summary):focus-visible {
  outline: 3px solid #244f65 !important;
  outline-offset: 3px !important;
}
.ent-stat .ent-n.w { color: var(--c2-amber) !important; }
.ent-head .ent-title { color: var(--c2-text) !important; }
.ent-head .ent-dep,
.ent-head .ent-meta { color: var(--c2-copy) !important; }
.ent-foot { color: var(--c2-copy) !important; font-size: 14px; }
.ent-foot strong { color: var(--c2-text) !important; }
#business-records,
#business-records .section-collapsible-content,
#business-records article,
#business-records .ent-head > div { min-width: 0; }
#business-records .ent-table { max-width: 100%; }
#business-records .ent-table table { table-layout: auto; }
#business-records .ent-mobile-label { display: none; }
#business-records .ent-pill { white-space: normal; }

.source-health-collapse-summary {
  display: block;
  max-width: min(70vw, 720px);
  color: #573b0e;
  font-family: Inter, ui-sans-serif, system-ui, sans-serif;
  font-size: 14px;
  font-weight: 750;
  line-height: 1.4;
  overflow-wrap: anywhere;
}

#attention-queue { border-color: #dfb0aa !important; }
#attention-queue > .section-toggle { background: linear-gradient(135deg, #f2b052, #e7972e) !important; }
.attention-freshness,
.attention-warnings,
.notice,
.record-detail-boundary,
.feature-intro,
.optional-boundary {
  border-color: #d39a3c !important;
  background: var(--c2-amber-soft) !important;
  color: #62400b !important;
}
.attention-item,
details.attention-item {
  border: 1px solid var(--c2-line) !important;
  border-left: 6px solid var(--c2-gold) !important;
  border-radius: var(--c2-radius-small) !important;
  background: var(--c2-card) !important;
  color: var(--c2-text) !important;
  box-shadow: 0 5px 16px rgba(31, 55, 51, .06) !important;
}
.attention-item.action { border-color: #c87970 !important; border-left-color: var(--c2-red) !important; background: #fff8f6 !important; }
.attention-item.audit { border-color: #d5b363 !important; border-left-color: #a56d09 !important; background: #fffcf3 !important; }
.attention-kind { border: 1px solid #d8a74f !important; background: var(--c2-amber-soft) !important; color: #68440b !important; }
.attention-row-facts > div,
.record-detail,
.record-detail-grid > div,
.record-detail-evidence article { border-color: var(--c2-line) !important; background: var(--c2-cream) !important; color: var(--c2-text) !important; }
.attention-actions button,
.attention-window-status button,
.optional-actions button,
.optional-result-action {
  min-height: 44px;
  border: 1px solid #82928d !important;
  border-radius: 10px !important;
  background: #fff !important;
  color: var(--c2-text) !important;
  font-weight: 750;
}
.attention-actions button:first-child,
.attention-window-status button {
  border-color: var(--c2-shell) !important;
  background: var(--c2-shell) !important;
  color: #fff !important;
}
.attention-filters select,
.attention-filters input,
.feedback-form select,
.feedback-form textarea,
#skg-quick-find input {
  min-height: 46px;
  border: 1px solid #82928d !important;
  border-radius: 10px !important;
  background: #fff !important;
  color: var(--c2-text) !important;
}

.ia-region-find { border-color: #d5b472 !important; background: var(--c2-card) !important; }
.ia-region-find > .section-collapsible-content > .section-heading { padding: 4px 0 0 !important; }
.ia-find-sections { padding: 0 !important; }
.manual,
.evidence,
.case-study,
.visual,
.view-card,
.record-card,
.gate-card,
.fact-card,
.evidence-card,
.case-card,
.source-grid,
.optional-card,
.feature-row,
.concentration-rankings section {
  border-color: var(--c2-line) !important;
  background: var(--c2-cream) !important;
  color: var(--c2-text) !important;
  box-shadow: none !important;
}
.view-card { border-top-color: var(--c2-gold) !important; }
.record-card { border-left-color: var(--c2-blue) !important; }
.completion-stat {
  border: 1px solid var(--c2-line) !important;
  border-top: 4px solid var(--c2-gold) !important;
  border-radius: var(--c2-radius-small) !important;
  background: var(--c2-card) !important;
}
.completion-stat.complete,
.optional-card.good { border-color: #73a98c !important; background: var(--c2-green-soft) !important; }
.completion-stat.caution,
.optional-card.warn { border-color: #d2a653 !important; background: var(--c2-amber-soft) !important; }
.completion-stat.alert,
.optional-card.bad { border-color: #ca8178 !important; background: var(--c2-red-soft) !important; }
.completion-definition { border-color: var(--c2-green) !important; background: var(--c2-green-soft) !important; color: #24553f !important; }

#source-health .source-groups,
#skg-source-health .source-groups { gap: 12px; }
#source-health .source-groups details,
#skg-source-health .source-groups details {
  border: 1px solid var(--c2-line) !important;
  border-left: 5px solid #85948f !important;
  border-radius: var(--c2-radius-small) !important;
  background: var(--c2-card) !important;
  color: var(--c2-text) !important;
  box-shadow: 0 4px 14px rgba(31, 55, 51, .055);
}
#source-health .source-groups summary,
#skg-source-health .source-groups summary { min-height: 52px; padding: 14px 16px !important; color: var(--c2-text) !important; }
#source-health .source-groups details p,
#skg-source-health .source-groups details p { padding: 0 16px 15px !important; color: var(--c2-copy) !important; }

.feedback-card {
  padding: 22px !important;
  border-color: #d5b472 !important;
  background: linear-gradient(145deg, #fff, #faf3e5) !important;
  color: var(--c2-text) !important;
}
.feedback-card h3 { color: var(--c2-text) !important; font-family: Inter, ui-sans-serif, system-ui, sans-serif !important; }
.feedback-card p,
.feedback-form label,
.feedback-boundary { color: var(--c2-copy) !important; }
.feedback-submit {
  min-height: 46px;
  border: 1px solid #9b670e !important;
  border-radius: 11px !important;
  background: linear-gradient(135deg, #f3bb56, var(--c2-gold)) !important;
  color: #302209 !important;
}
.reference-list a { min-height: 44px; border-color: #a98547 !important; color: #543a0e !important; }
footer { background: var(--c2-canvas); }

@media (max-width: 980px) and (min-width: 721px) {
  .app { grid-template-columns: 214px minmax(0, 1fr) !important; }
  .sidebar { width: 214px !important; }
}

@media (max-width: 720px) {
  /* In-flow controls cannot obscure records, form fields, or boundary copy. */
  .mobile-nav-dock {
    position: static !important;
    margin: 12px;
    padding-bottom: env(safe-area-inset-bottom);
    opacity: 1 !important;
    transform: none !important;
    pointer-events: auto !important;
  }
  .boundary-banner { min-height: 0; }
  .app { display: block !important; }
  .sidebar {
    position: sticky !important;
    top: 0 !important;
    width: 100% !important;
    height: auto !important;
    padding: 11px 14px 0 !important;
    border: 0 !important;
    box-shadow: 0 5px 18px rgba(20, 40, 44, .18);
  }
  .brandwrap { padding: 0; }
  .nav { margin: 0 -14px !important; padding: 0 14px 10px !important; }
  .nav a { min-height: 46px; background: rgba(255, 255, 255, .055) !important; }
  .content { display: block !important; }
  .hero { padding: 22px 17px 20px !important; }
  .hero h2 { font-size: clamp(28px, 8.2vw, 36px) !important; }
  .main { padding: 18px 12px 24px !important; gap: 16px !important; overflow: visible !important; grid-template-columns: minmax(0, 1fr); }
  .main > .section { padding: 16px !important; }
  .section-toggle,
  .ia-region-find > .section-toggle,
  .ia-region-supporting > .section-toggle,
  .ia-region-concept > .section-toggle {
    width: calc(100% + 32px) !important;
    min-height: 62px !important;
    margin: -16px -16px 16px !important;
    padding: 13px 16px !important;
  }
  .section.is-collapsed > .section-toggle { margin-bottom: -16px !important; }
  .section-toggle-title { font-size: 20px !important; }
  .source-health-collapse-summary { max-width: calc(100vw - 124px); }
  .completion-summary,
  .fact-grid,
  .view-grid,
  .record-grid,
  .evidence-grid,
  .case-grid,
  .feedback-grid,
  .feature-definitions,
  .optional-dashboard .optional-grid { grid-template-columns: 1fr !important; }
  .attention-actions button,
  .attention-window-status button,
  .optional-actions button,
  .feedback-submit,
  .reference-list a { min-height: 48px; }
}

@media (max-width: 480px) {
  /* Preserve complete labels at enlarged text sizes instead of clipping or shrinking type. */
  .main :is(.ent-tag, .badge, .evidence-badge, .attention-kind, .ent-pill) {
    min-width: 0; max-width: 100%; box-sizing: border-box;
    white-space: normal !important; overflow-wrap: anywhere;
  }
  .main :is(.attention-summary-main, .record-card, .view-card, .section-heading > div) { min-width: 0; }
  .main :is(.attention-summary-main, .record-card, .view-card) h4 {
    max-width: 100%; white-space: normal; overflow-wrap: anywhere; word-break: normal;
  }
  /* Let nested working surfaces shrink; intrinsic grid/input widths must not set the page width. */
  :is(#find-records, #quick-find, #skg-quick-find, #manual, #record-map-presentation),
  :is(#find-records, #manual) :is(.section-collapsible-content, .ia-find-sections, .section, article, .section-heading, .section-heading > div, .manual-top, .manual-top > div, .visual, .upgrade-card, .record-card) { min-width: 0; max-width: 100%; }
  :is(#quick-find, #skg-quick-find) .record-grid,
  #manual :is(.visual-grid, .source-grid),
  #record-map-presentation .rm-map-layout { grid-template-columns: minmax(0, 1fr) !important; }
  :is(#quick-find, #skg-quick-find, #manual, #record-map-presentation) { overflow-wrap: anywhere; }
  :is(#quick-find, #skg-quick-find) :is(input, .quick-find-search) { min-width: 0; width: 100%; max-width: 100%; box-sizing: border-box; }
  #find-records .ia-find-sections { padding: 8px; }
  #quick-find .upgrade-card { padding: 10px; }
  #manual .manual-top { display: flex; flex-direction: column; align-items: stretch; }
  #manual .badge { white-space: normal; align-self: flex-start; }
  :is(#manual, #find-records) > .section-toggle { flex-direction: column; align-items: stretch; gap: 12px; }
  :is(#manual, #find-records) > .section-toggle .section-toggle-labelgroup { min-width: 0; width: 100%; }
  :is(#manual, #find-records) > .section-toggle .section-toggle-action { align-self: flex-end; }
  #record-map-presentation .rm-controls { display: grid; grid-template-columns: minmax(0, 1fr); }
  #record-map-presentation .rm-controls label,
  #record-map-presentation .rm-controls :is(input, select, button) { min-width: 0; width: 100%; max-width: 100%; box-sizing: border-box; }
  /* Labels, plotting area and tools each get their own row instead of covering one another. */
  #record-map-presentation .rm-canvas { display: flex; flex-direction: column; gap: 10px; padding: 10px; }
  #record-map-presentation :is(.rm-canvas-label, .rm-level, .rm-map-tools) { position: static; max-width: 100%; margin: 0; }
  #record-map-presentation .rm-layer { position: relative; inset: auto; min-height: 280px; flex: 0 0 280px; }
  #record-map-presentation .rm-map-tools { background: #fff; border-radius: 8px; padding: 6px; }
  #record-map-presentation .rm-map-tools button { flex: 1 1 44px; }
  /* One record per card: never squeeze three columns into a zoomed viewport. */
  #business-records .ent-table { border: 0; background: transparent; overflow: visible; }
  #business-records .ent-table .tw { overflow: visible; }
  #business-records .ent-table :is(table, tbody, tr, td) { display: block; width: auto; min-width: 0; }
  #business-records .ent-table thead {
    position: absolute; width: 1px; height: 1px; padding: 0;
    overflow: hidden; clip-path: inset(50%); white-space: nowrap;
  }
  #business-records .ent-table tbody tr {
    margin-bottom: 12px; padding: 12px; border: 1px solid var(--line);
    border-radius: 10px; background: #fff;
  }
  #business-records .ent-table td { padding: 4px 0; border: 0; overflow-wrap: break-word; }
  #business-records .ent-mobile-label { display: block; font-weight: 700; margin-bottom: 4px; }
  #business-records .ent-table .ent-idx { font-variant-numeric: tabular-nums; }
  #business-records .ent-stats { display: grid; grid-template-columns: minmax(0, 1fr); }
  #business-records .ent-seal { flex-direction: column; }
  #business-records :is(.ent-title, .ent-meta, .reconcile-meta, .ent-note) { overflow-wrap: anywhere; }
  :is(#source-health, #skg-source-health, #business-records) > .section-toggle {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }
  :is(#source-health, #skg-source-health, #business-records) > .section-toggle .section-toggle-labelgroup { min-width: 0; width: 100%; }
  :is(#source-health, #skg-source-health, #business-records) > .section-toggle .section-toggle-action { align-self: flex-end; }
  .source-health-collapse-summary { max-width: 100%; overflow-wrap: normal; word-break: normal; }
}

@media (max-width: 390px) {
  .hero { padding-inline: 15px !important; }
  .main { padding-inline: 9px !important; }
  .main > .section { padding: 14px !important; border-radius: 15px !important; }
  .section-toggle,
  .ia-region-find > .section-toggle,
  .ia-region-supporting > .section-toggle,
  .ia-region-concept > .section-toggle {
    width: calc(100% + 28px) !important;
    margin: -14px -14px 14px !important;
    padding-inline: 14px !important;
  }
  .section.is-collapsed > .section-toggle { margin-bottom: -14px !important; }
}

@media (max-width: 480px) {
  /* A single mobile gutter: nested decoration must not consume the reading column. */
  .main > :is(#find-records, #attention-queue) { padding: 8px !important; }
  :is(#find-records, #attention-queue) > .section-toggle {
    width: calc(100% + 16px) !important;
    margin: -8px -8px 12px !important;
    padding-inline: 8px !important;
  }
  :is(#find-records, #attention-queue).is-collapsed > .section-toggle { margin-bottom: -8px !important; }
  #find-records .ia-find-sections { padding: 0; }
  #find-records :is(#quick-find, #skg-quick-find),
  :is(#quick-find, #skg-quick-find) .upgrade-card,
  .attention-context > #deadline-horizon {
    padding: 0 !important; border: 0 !important; box-shadow: none !important;
    background: transparent !important; border-radius: 0 !important;
  }
  :is(#quick-find, #skg-quick-find, #deadline-horizon) .record-card {
    padding: 12px 8px !important; border-left-width: 3px !important;
  }
  #deadline-horizon .record-card ul { padding-inline-start: 18px; }
  #deadline-horizon .record-card li { margin-inline: 0; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto !important; }
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .001ms !important; animation-duration: .001ms !important; animation-iteration-count: 1 !important; }
}

@media (forced-colors: active) {
  .section,
  .feedback-card,
  .attention-item,
  .source-groups details { border: 2px solid CanvasText !important; }
  .section-toggle,
  .nav a[aria-current="location"],
  .feedback-submit { border: 2px solid ButtonText !important; }
  :focus-visible { outline: 3px solid Highlight !important; }
}