/* Premium tool workspaces
   Rebuilds the functional areas below the unchanged tool heroes with the
   layered archive language established by standard-detail.html. */

:where(
  body[data-studio],
  body[data-page="spatial"],
  body[data-page="calculation"],
  body[data-tool]
) {
  --premium-ink: #20332d;
  --premium-text: #52615b;
  --premium-muted: #77837e;
  --premium-paper: #f5f4ef;
  --premium-surface: #fffdfa;
  --premium-surface-2: #f8f8f3;
  --premium-accent: #78906f;
  --premium-accent-deep: #526b57;
  --premium-soft: #edf2e9;
  --premium-line: #dde2da;
  --premium-line-strong: #cbd2c9;
  --premium-blue: #637f9c;
  --premium-blue-deep: #3f617f;
  --premium-blue-soft: #eaf1f6;
  --premium-warm: #aa6a49;
  --premium-warm-soft: #f7eee8;
  --premium-shadow: 0 18px 52px rgba(41, 55, 47, .07), 0 2px 10px rgba(41, 55, 47, .035);
  --premium-shadow-soft: 0 10px 28px rgba(41, 55, 47, .055);
  --premium-icon: url("./icons/wrench.svg");
  --premium-ease: cubic-bezier(.16, 1, .3, 1);
}

html[data-theme] body[data-studio="analysis"] {
  --premium-icon: url("./icons/database.svg");
  --premium-accent: #5f7ea3;
  --premium-accent-deep: #365e87;
  --premium-soft: #e8f0f7;
  --studio-accent: #5f7ea3;
  --studio-accent-rgb: 95, 126, 163;
  --studio-soft: #e8f0f7;
}

html[data-theme] body[data-studio="plotting"] {
  --premium-icon: url("./icons/record/layers-3.svg");
  --premium-accent: #7b70a5;
  --premium-accent-deep: #584a82;
  --premium-soft: #f0edf8;
  --studio-accent: #7b70a5;
  --studio-accent-rgb: 123, 112, 165;
  --studio-soft: #f0edf8;
}

html[data-theme] body[data-studio="document"] {
  --premium-icon: url("./icons/record/file-text.svg");
  --premium-accent: #b17a43;
  --premium-accent-deep: #865425;
  --premium-soft: #f8efe3;
  --studio-accent: #b17a43;
  --studio-accent-rgb: 177, 122, 67;
  --studio-soft: #f8efe3;
}

body[data-page="spatial"] {
  --premium-icon: url("./icons/record/landmark.svg");
  --premium-accent: #a26849;
  --premium-accent-deep: #7b4930;
  --premium-soft: #f7ece5;
}

body[data-page="calculation"] {
  --premium-accent: #6b7da4;
  --premium-accent-deep: #46587f;
  --premium-soft: #edf0f7;
}

body[data-tool="density"] {
  --premium-icon: url("./icons/record/archive.svg");
  --premium-accent: #9e654e;
  --premium-accent-deep: #784632;
  --premium-soft: #f7ebe6;
  --workbench-accent: #9e654e;
  --workbench-accent-strong: #784632;
  --workbench-accent-soft: #f7ebe6;
}

body[data-tool="water"] {
  --premium-icon: url("./icons/lucide/arrow-up-down.svg");
  --premium-accent: #4f7f9f;
  --premium-accent-deep: #315e7b;
  --premium-soft: #e8f1f7;
  --workbench-accent: #4f7f9f;
  --workbench-accent-strong: #315e7b;
  --workbench-accent-soft: #e8f1f7;
}

body[data-tool="carbon"] {
  --premium-icon: url("./icons/leaf.svg");
  --premium-accent: #557f6d;
  --premium-accent-deep: #365f50;
  --premium-soft: #e7f1ec;
  --workbench-accent: #557f6d;
  --workbench-accent-strong: #365f50;
  --workbench-accent-soft: #e7f1ec;
}

html[data-theme="dark"] :where(
  body[data-studio],
  body[data-page="spatial"],
  body[data-page="calculation"],
  body[data-tool]
) {
  --premium-ink: #e4ebe5;
  --premium-text: #b7c3ba;
  --premium-muted: #8d9a91;
  --premium-paper: #111713;
  --premium-surface: #182019;
  --premium-surface-2: #1d261e;
  --premium-accent: #91aa84;
  --premium-accent-deep: #b0c7a4;
  --premium-soft: #263126;
  --premium-line: #344039;
  --premium-line-strong: #465149;
  --premium-blue: #8ba3bb;
  --premium-blue-deep: #b3c7d8;
  --premium-blue-soft: #202d37;
  --premium-warm: #c88b68;
  --premium-warm-soft: #322720;
  --premium-shadow: 0 18px 52px rgba(0, 0, 0, .24), 0 2px 10px rgba(0, 0, 0, .16);
  --premium-shadow-soft: 0 10px 28px rgba(0, 0, 0, .18);
}

html[data-theme="dark"] body[data-studio="analysis"] {
  --premium-accent: #88a9cc;
  --premium-accent-deep: #b6d0e8;
  --premium-soft: #202c39;
  --studio-accent: #88a9cc;
  --studio-accent-rgb: 136, 169, 204;
  --studio-soft: #202c39;
}

html[data-theme="dark"] body[data-studio="plotting"] {
  --premium-accent: #a79dce;
  --premium-accent-deep: #d1c7e9;
  --premium-soft: #2b273b;
  --studio-accent: #a79dce;
  --studio-accent-rgb: 167, 157, 206;
  --studio-soft: #2b273b;
}

html[data-theme="dark"] body[data-studio="document"] {
  --premium-accent: #d1a06b;
  --premium-accent-deep: #edc79c;
  --premium-soft: #352a20;
  --studio-accent: #d1a06b;
  --studio-accent-rgb: 209, 160, 107;
  --studio-soft: #352a20;
}

html[data-theme="dark"] body[data-page="spatial"] {
  --premium-accent: #c88d6c;
  --premium-accent-deep: #e5b69b;
  --premium-soft: #352720;
}

html[data-theme="dark"] body[data-page="calculation"] {
  --premium-accent: #9ba9d0;
  --premium-accent-deep: #c6d0eb;
  --premium-soft: #272b3b;
}

html[data-theme="dark"] body[data-tool="density"] {
  --premium-accent: #c68a72;
  --premium-accent-deep: #e3b29f;
  --premium-soft: #352621;
  --workbench-accent: #c68a72;
  --workbench-accent-strong: #e3b29f;
  --workbench-accent-soft: #352621;
}

html[data-theme="dark"] body[data-tool="water"] {
  --premium-accent: #7dadd0;
  --premium-accent-deep: #acd0e8;
  --premium-soft: #202d3a;
  --workbench-accent: #7dadd0;
  --workbench-accent-strong: #acd0e8;
  --workbench-accent-soft: #202d3a;
}

html[data-theme="dark"] body[data-tool="carbon"] {
  --premium-accent: #80ac98;
  --premium-accent-deep: #afd0bf;
  --premium-soft: #203128;
  --workbench-accent: #80ac98;
  --workbench-accent-strong: #afd0bf;
  --workbench-accent-soft: #203128;
}

/* The hero and its imagery stay owned by the existing page styles. */
:where(
  body[data-studio] .analysis-section,
  body[data-studio] .plotting-section,
  body[data-studio] .document-section,
  body[data-page="spatial"] .inner-section,
  body[data-page="calculation"] .inner-section,
  body[data-tool] .workbench-section
) {
  padding-block: 54px 82px !important;
  background: var(--premium-paper) !important;
}

body[data-page="spatial"] #spatialNotes,
body[data-page="calculation"] #converter {
  padding-top: 0 !important;
}

:where(
  body[data-studio] .analysis-section > .container,
  body[data-studio] .plotting-section > .container,
  body[data-studio] .document-section > .container,
  body[data-page="spatial"] .inner-section > .inner-container,
  body[data-page="calculation"] .inner-section > .inner-container,
  body[data-tool] .workbench-section > .workbench-container
) {
  width: min(calc(100% - 72px), 1304px) !important;
  padding: clamp(28px, 3.2vw, 42px) !important;
  overflow: hidden;
  border: 1px solid rgba(120, 144, 111, .17) !important;
  border-radius: 28px !important;
  background: var(--premium-surface) !important;
  box-shadow: var(--premium-shadow) !important;
}

/* Section records mirror the numbered section headings in the standard page. */
:where(
  body[data-studio] .studio-section-heading,
  body[data-page="calculation"] .inner-section-head,
  body[data-tool] .workbench-section-head
) {
  display: grid !important;
  min-height: 92px;
  grid-template-columns: minmax(0, 1fr) minmax(300px, .72fr) !important;
  align-items: center !important;
  gap: clamp(34px, 6vw, 88px) !important;
  margin: 0 0 28px !important;
  padding: 0 0 27px !important;
  border-bottom: 1px solid var(--premium-line) !important;
}

:where(
  body[data-studio] .studio-section-heading > div,
  body[data-page="calculation"] .inner-section-head > div,
  body[data-tool] .workbench-section-head > div
) {
  position: relative;
  min-width: 0;
  padding-left: 68px;
}

:where(
  body[data-studio] .studio-section-heading > div,
  body[data-page="calculation"] .inner-section-head > div,
  body[data-tool] .workbench-section-head > div
)::before {
  position: absolute;
  top: 50%;
  left: 0;
  width: 50px;
  height: 50px;
  border-radius: 15px;
  background: var(--premium-accent);
  box-shadow: 0 10px 24px color-mix(in srgb, var(--premium-accent) 22%, transparent);
  content: "";
  transform: translateY(-50%);
}

:where(
  body[data-studio] .studio-section-heading > div,
  body[data-page="calculation"] .inner-section-head > div,
  body[data-tool] .workbench-section-head > div
)::after {
  position: absolute;
  top: 50%;
  left: 14px;
  width: 22px;
  height: 22px;
  background: #fff;
  content: "";
  transform: translateY(-50%);
  -webkit-mask: var(--premium-icon) center / contain no-repeat;
  mask: var(--premium-icon) center / contain no-repeat;
}

:where(
  body[data-studio] .studio-section-heading > div > p,
  body[data-page="calculation"] .inner-section-head .inner-kicker,
  body[data-tool] .workbench-section-head small
) {
  margin: 0 0 5px !important;
  color: var(--premium-accent-deep) !important;
  font: 720 10px/1.3 ui-monospace, "SFMono-Regular", Consolas, monospace !important;
  letter-spacing: .13em !important;
  text-transform: uppercase;
}

:where(
  body[data-studio] .studio-section-heading h2,
  body[data-page="calculation"] .inner-section-head h2,
  body[data-tool] .workbench-section-head h2
) {
  color: var(--premium-ink) !important;
  font-size: clamp(27px, 2.7vw, 36px) !important;
  font-weight: 690 !important;
  letter-spacing: -.025em !important;
  line-height: 1.2 !important;
}

:where(
  body[data-studio] .studio-section-heading > p,
  body[data-page="calculation"] .inner-section-head > p,
  body[data-tool] .workbench-section-head > p
) {
  margin: 0 !important;
  padding: 14px 0 0 !important;
  border-top: 1px solid var(--premium-line-strong) !important;
  color: var(--premium-text) !important;
  font-size: 13.5px !important;
  line-height: 1.72 !important;
}

/* One instrument shell, with purposeful input and result layers inside it. */
:where(
  body[data-studio="analysis"] .analysis-workspace,
  body[data-studio="plotting"] .plot-workspace,
  body[data-studio="document"] .document-desk,
  body[data-page="spatial"] .workbench-shell,
  body[data-tool] .tool-workspace
) {
  gap: 0 !important;
  overflow: hidden !important;
  border: 1px solid var(--premium-line-strong) !important;
  border-radius: 22px !important;
  background: var(--premium-surface) !important;
  box-shadow: var(--premium-shadow-soft) !important;
}

:where(
  body[data-studio] .studio-field :is(input:not([type="color"]), textarea, select),
  body[data-page="spatial"] :is(.solid-input, .solid-select, .solid-textarea),
  body[data-page="calculation"] :is(.solid-input, .solid-select, .solid-textarea),
  body[data-tool] .control
) {
  border-color: var(--premium-line-strong) !important;
  border-radius: 12px !important;
  color: var(--premium-ink) !important;
  background: var(--premium-surface) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .42);
}

body[data-studio] .studio-field :is(input:not([type="color"]), textarea, select),
body[data-page="spatial"] :is(.solid-input, .solid-select, .solid-textarea),
body[data-page="calculation"] :is(.solid-input, .solid-select, .solid-textarea),
body[data-tool] .control {
  border-radius: 12px !important;
}

:where(
  body[data-studio] .studio-field :is(input:not([type="color"]), textarea, select),
  body[data-page="spatial"] :is(.solid-input, .solid-select, .solid-textarea),
  body[data-page="calculation"] :is(.solid-input, .solid-select, .solid-textarea),
  body[data-tool] .control
):focus {
  border-color: var(--premium-accent) !important;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--premium-accent) 14%, transparent) !important;
}

:where(
  body[data-studio] .button,
  body[data-studio] .studio-copy-button,
  body[data-studio] .studio-text-action,
  body[data-page="spatial"] .solid-button,
  body[data-page="calculation"] .solid-button,
  body[data-tool] .button
) {
  border-radius: 12px !important;
  transition: color 200ms ease, border-color 200ms ease, background 200ms ease, transform 260ms var(--premium-ease), box-shadow 200ms ease !important;
}

body[data-studio] :is(.button, .studio-copy-button, .studio-text-action),
body[data-page="spatial"] .solid-button,
body[data-page="calculation"] .solid-button,
body[data-tool] .button {
  border-radius: 12px !important;
}

:where(
  body[data-studio] .button,
  body[data-studio] .studio-copy-button,
  body[data-studio] .studio-text-action,
  body[data-page="spatial"] .solid-button,
  body[data-page="calculation"] .solid-button,
  body[data-tool] .button
):hover:not(:disabled) {
  transform: translateY(-2px);
}

/* Analysis */
body[data-studio="analysis"] .analysis-workspace {
  grid-template-columns: minmax(350px, .8fr) minmax(0, 1.2fr) !important;
}

body[data-studio="analysis"] .analysis-input-panel {
  border: 0 !important;
  border-right: 1px solid var(--premium-line-strong) !important;
  border-radius: 0 !important;
  background: var(--premium-soft) !important;
}

body[data-studio="analysis"] .analysis-input-panel .studio-panel-head,
body[data-studio="analysis"] .analysis-board-head {
  min-height: 78px;
  padding: 20px 24px !important;
  border-color: var(--premium-line) !important;
  background: color-mix(in srgb, var(--premium-surface) 72%, transparent);
}

body[data-studio="analysis"] .analysis-input-panel > :where(.studio-field, .studio-form-grid, .studio-actions, .studio-message) {
  margin-right: 26px !important;
  margin-left: 26px !important;
}

body[data-studio="analysis"] .analysis-input-panel .studio-field textarea {
  min-height: 360px;
  padding: 17px;
}

body[data-studio="analysis"] .analysis-board {
  min-height: 650px;
  border: 0 !important;
  border-radius: 0 !important;
  background: var(--premium-surface) !important;
}

body[data-studio="analysis"] .analysis-empty {
  min-height: 570px;
  align-content: center;
  justify-items: center;
  background: var(--premium-surface-2) !important;
}

body[data-studio="analysis"] .analysis-empty::before {
  width: 66px;
  height: 66px;
  margin-bottom: 22px;
  border-radius: 20px;
  background-color: var(--premium-accent);
  background-image: none;
  content: "";
  -webkit-mask: var(--premium-icon) center / 30px 30px no-repeat;
  mask: var(--premium-icon) center / 30px 30px no-repeat;
}

body[data-studio="analysis"] .analysis-empty span {
  font-size: 24px;
}

body[data-studio="analysis"] .analysis-metrics {
  overflow: hidden;
  border-bottom: 1px solid var(--premium-line);
  background: var(--premium-line);
  gap: 1px;
}

body[data-studio="analysis"] .analysis-metrics article {
  border: 0 !important;
  background: var(--premium-surface);
}

body[data-studio="analysis"] :is(.iqr-card, .regression-card) {
  margin: 18px 20px;
  border-color: var(--premium-line) !important;
  border-radius: 16px !important;
  padding: 20px !important;
  background: var(--premium-surface-2) !important;
}

body[data-studio="analysis"] .analysis-lower-grid {
  gap: 18px !important;
  margin-top: 20px !important;
}

body[data-studio="analysis"] .outlier-panel {
  border-color: var(--premium-line) !important;
  border-radius: 20px !important;
  background: var(--premium-surface) !important;
  box-shadow: var(--premium-shadow-soft);
}

body[data-studio="analysis"] .analysis-method-note {
  border: 0 !important;
  border-radius: 20px !important;
  padding: 27px !important;
  background: #17382d !important;
  box-shadow: 0 16px 36px rgba(23, 56, 45, .16);
}

/* Plotting */
body[data-studio="plotting"] .plot-workspace {
  grid-template-columns: minmax(340px, .72fr) minmax(0, 1.28fr) !important;
}

body[data-studio="plotting"] .plot-control-panel {
  padding: 28px !important;
  border: 0 !important;
  border-right: 1px solid var(--premium-line-strong) !important;
  background: var(--premium-blue-soft) !important;
}

body[data-studio="plotting"] .plot-control-group {
  margin: 0 !important;
  padding: 0 0 25px !important;
  border: 0 !important;
  border-bottom: 1px solid var(--premium-line) !important;
  background: transparent !important;
}

body[data-studio="plotting"] .plot-control-group + .plot-control-group {
  padding-top: 25px !important;
}

body[data-studio="plotting"] .plot-type-options label span {
  border-radius: 12px !important;
}

body[data-studio="plotting"] .plot-stage {
  padding: 28px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: var(--premium-surface) !important;
}

body[data-studio="plotting"] .plot-stage-head {
  min-height: 58px;
  margin-bottom: 20px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--premium-line);
}

body[data-studio="plotting"] .plot-canvas-shell {
  overflow: hidden;
  border-color: var(--premium-line-strong) !important;
  border-radius: 18px !important;
  background: var(--premium-surface-2) !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.38);
}

body[data-studio="plotting"] .plot-data-preview {
  overflow: hidden;
  margin-top: 20px;
  border: 1px solid var(--premium-line) !important;
  border-radius: 16px !important;
}

body[data-studio="plotting"] .plot-export-note {
  display: grid;
  grid-template-columns: minmax(220px, .52fr) minmax(0, 1.48fr);
  gap: 36px;
  align-items: center;
  margin-top: 20px !important;
  border: 0 !important;
  border-radius: 20px !important;
  padding: 25px 28px !important;
  color: #fff !important;
  background: #29475f !important;
  box-shadow: 0 14px 34px rgba(41, 71, 95, .16);
}

body[data-studio="plotting"] .plot-export-note :is(h3, p) {
  color: inherit !important;
}

body[data-studio="plotting"] .plot-export-note p {
  color: rgba(255,255,255,.72) !important;
}

/* Document processing */
body[data-studio="document"] .document-desk {
  grid-template-columns: minmax(0, 1fr) minmax(250px, .62fr) minmax(0, 1fr) !important;
}

body[data-studio="document"] :is(.document-pane, .document-transform-panel) {
  border: 0 !important;
  border-right: 1px solid var(--premium-line-strong) !important;
  border-radius: 0 !important;
}

body[data-studio="document"] .document-output-pane {
  border-right: 0 !important;
}

body[data-studio="document"] .document-source-pane,
body[data-studio="document"] .document-output-pane {
  background: var(--premium-surface) !important;
}

body[data-studio="document"] .document-transform-panel {
  padding: 25px 22px !important;
  background: var(--premium-soft) !important;
}

body[data-studio="document"] .document-pane > header {
  min-height: 78px;
  padding: 20px 23px !important;
  border-color: var(--premium-line) !important;
  background: var(--premium-surface-2);
}

body[data-studio="document"] .document-textarea textarea {
  min-height: 430px !important;
  margin: 20px 22px 0;
  width: calc(100% - 44px) !important;
  padding: 17px !important;
}

body[data-studio="document"] .document-pane-actions {
  margin: 0 22px;
  padding-block: 15px 20px;
}

body[data-studio="document"] .document-transform-panel fieldset {
  border-radius: 15px !important;
  background: color-mix(in srgb, var(--premium-surface) 65%, transparent) !important;
}

body[data-studio="document"] .document-summary {
  overflow: hidden;
  margin-top: 20px !important;
  border: 1px solid var(--premium-line) !important;
  border-radius: 20px !important;
  background: var(--premium-surface) !important;
  box-shadow: var(--premium-shadow-soft);
}

body[data-studio="document"] .document-summary article {
  min-height: 112px;
  padding: 22px !important;
  background: var(--premium-surface);
}

body[data-studio="document"] .document-summary strong {
  margin-top: 11px;
  font-size: 30px !important;
}

body[data-studio="document"] .identifier-ledger {
  overflow: hidden;
  margin-top: 20px !important;
  border: 1px solid var(--premium-line) !important;
  border-radius: 22px !important;
  background: var(--premium-surface) !important;
  box-shadow: var(--premium-shadow-soft);
}

body[data-studio="document"] .identifier-ledger-head {
  min-height: 104px;
  margin: 0 !important;
  padding: 25px 28px !important;
  border-bottom: 1px solid var(--premium-line) !important;
  background: var(--premium-surface-2);
}

body[data-studio="document"] .identifier-grid {
  gap: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
}

body[data-studio="document"] .identifier-card {
  border: 0 !important;
  border-right: 1px solid var(--premium-line) !important;
  border-radius: 0 !important;
  background: var(--premium-surface) !important;
}

body[data-studio="document"] .identifier-card:last-child {
  border-right: 0 !important;
}

body[data-studio="document"] .document-privacy-note {
  margin-top: 20px !important;
  border: 0 !important;
  border-radius: 18px !important;
  padding: 20px 24px !important;
  color: #fff !important;
  background: #17382d !important;
  box-shadow: 0 14px 34px rgba(23, 56, 45, .14);
}

body[data-studio="document"] .document-privacy-note p {
  color: rgba(255,255,255,.76) !important;
}

/* Spatial workbench */
body[data-page="spatial"] #spatialWorkbench > .inner-container {
  padding: clamp(26px, 3vw, 34px) !important;
  border-radius: 28px !important;
}

body[data-page="spatial"] .workbench-shell {
  grid-template-columns: minmax(350px, .82fr) minmax(0, 1.18fr) !important;
  border-radius: 22px !important;
}

body[data-page="spatial"] .workbench-controls {
  padding: 31px !important;
  border: 0 !important;
  border-right: 1px solid var(--premium-line-strong) !important;
  background: var(--premium-soft) !important;
}

body[data-page="spatial"] :is(.workbench-controls, .workbench-output) h2 {
  display: flex;
  align-items: center;
  gap: 13px;
  color: var(--premium-ink) !important;
  font-size: 23px !important;
}

body[data-page="spatial"] :is(.workbench-controls, .workbench-output) h2::before {
  width: 42px;
  height: 42px;
  flex: 0 0 auto;
  border-radius: 13px;
  background-color: var(--premium-accent);
  content: "";
  -webkit-mask: var(--premium-icon) center / 21px 21px no-repeat;
  mask: var(--premium-icon) center / 21px 21px no-repeat;
}

body[data-page="spatial"] .workbench-field {
  margin-top: 26px;
}

body[data-page="spatial"] .solid-textarea {
  min-height: 390px;
  padding: 17px !important;
}

body[data-page="spatial"] .workbench-output {
  padding: 31px !important;
  background: var(--premium-surface) !important;
}

body[data-page="spatial"] .workbench-output-head {
  margin-bottom: 22px !important;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--premium-line);
}

body[data-page="spatial"] .metric-grid {
  overflow: hidden;
  border: 1px solid var(--premium-line) !important;
  border-radius: 17px;
  background: var(--premium-line) !important;
  gap: 1px;
}

body[data-page="spatial"] .metric-box {
  min-height: 124px;
  border: 0 !important;
  background: var(--premium-surface-2);
}

body[data-page="spatial"] .metric-box strong {
  color: var(--premium-accent-deep) !important;
  font-size: 30px !important;
}

body[data-page="spatial"] .spatial-canvas-wrap {
  overflow: hidden;
  height: 360px;
  border-color: var(--premium-line-strong) !important;
  border-radius: 18px !important;
  background: var(--premium-surface-2) !important;
}

body[data-page="spatial"] .coordinate-table-wrap {
  overflow: hidden;
  margin-top: 20px;
  border: 1px solid var(--premium-line) !important;
  border-radius: 15px;
}

body[data-page="spatial"] #spatialNotes > .inner-container {
  grid-template-columns: minmax(0, 1.15fr) minmax(300px, .85fr) !important;
  gap: 0 !important;
  padding: 0 !important;
}

body[data-page="spatial"] .reading-column {
  padding: clamp(32px, 4vw, 52px) !important;
  border-right: 1px solid var(--premium-line);
}

body[data-page="spatial"] .reading-column h2 {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 24px;
  color: var(--premium-ink) !important;
}

body[data-page="spatial"] .reading-column h2::before {
  width: 48px;
  height: 48px;
  flex: 0 0 auto;
  border-radius: 15px;
  background-color: var(--premium-accent);
  content: "";
  -webkit-mask: url("./icons/record/book-open.svg") center / 23px 23px no-repeat;
  mask: url("./icons/record/book-open.svg") center / 23px 23px no-repeat;
}

body[data-page="spatial"] .reading-aside {
  padding: 0 !important;
  border: 0 !important;
  background: var(--premium-soft) !important;
}

body[data-page="spatial"] .reading-aside section {
  min-height: 50%;
  padding: 30px;
  border-bottom: 1px solid var(--premium-line);
}

body[data-page="spatial"] .reading-aside section:last-child {
  border-bottom: 0;
}

/* Professional calculation index and converter */
body[data-page="calculation"] .calc-selector {
  overflow: hidden;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  border: 1px solid var(--premium-line-strong) !important;
  border-radius: 22px !important;
  background: var(--premium-surface) !important;
  box-shadow: var(--premium-shadow-soft);
}

body[data-page="calculation"] .calc-selector a {
  position: relative;
  display: flex !important;
  min-height: 290px !important;
  flex-direction: column;
  align-items: flex-start !important;
  padding: 30px 28px 26px !important;
  overflow: hidden;
  border: 0 !important;
  border-right: 1px solid var(--premium-line) !important;
  color: var(--premium-text) !important;
  background: var(--premium-surface) !important;
  transition: color 220ms ease, background 220ms ease !important;
}

body[data-page="calculation"] .calc-selector a:last-child {
  border-right: 0 !important;
}

body[data-page="calculation"] .calc-model-icon {
  position: relative;
  display: grid;
  width: 52px;
  height: 52px;
  margin-bottom: 28px;
  flex: 0 0 auto;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--premium-accent) 16%, transparent);
  border-radius: 16px;
  color: var(--premium-accent-deep);
  background: var(--premium-soft);
}

body[data-page="calculation"] .calc-model-icon::before {
  width: 25px;
  height: 25px;
  background: currentColor;
  content: "";
  -webkit-mask: url("./icons/record/archive.svg") center / 25px 25px no-repeat;
  mask: url("./icons/record/archive.svg") center / 25px 25px no-repeat;
}

body[data-page="calculation"] .calc-model-icon--water::before {
  -webkit-mask-image: url("./icons/lucide/arrow-up-down.svg");
  mask-image: url("./icons/lucide/arrow-up-down.svg");
}

body[data-page="calculation"] .calc-model-icon--carbon::before {
  -webkit-mask-image: url("./icons/leaf.svg");
  mask-image: url("./icons/leaf.svg");
}

body[data-page="calculation"] .calc-selector h3 {
  margin: 9px 0 12px !important;
  color: var(--premium-ink) !important;
  font-size: 23px !important;
}

body[data-page="calculation"] .calc-selector p {
  min-height: 3.6em;
  color: var(--premium-text) !important;
  line-height: 1.7;
}

body[data-page="calculation"] .calc-selector b {
  display: flex !important;
  align-items: center;
  gap: 9px;
  margin-top: auto !important;
  padding-top: 24px;
  color: var(--premium-accent-deep) !important;
}

body[data-page="calculation"] .calc-selector b::after {
  display: grid;
  width: 30px;
  height: 30px;
  place-items: center;
  border: 1px solid var(--premium-line-strong);
  border-radius: 50%;
  content: "\2192";
}

body[data-page="calculation"] .calc-selector a:hover,
body[data-page="calculation"] .calc-selector a:focus-visible {
  color: var(--premium-ink) !important;
  background: var(--premium-soft) !important;
}

body[data-page="calculation"] .converter-grid {
  overflow: hidden;
  grid-template-columns: 210px minmax(0, 1fr) 330px !important;
  border: 1px solid var(--premium-line-strong) !important;
  border-radius: 22px !important;
  background: var(--premium-surface) !important;
  box-shadow: var(--premium-shadow-soft);
}

body[data-page="calculation"] #models > .inner-container,
body[data-page="calculation"] #converter > .inner-container,
body[data-page="calculation"] #boundary > .inner-container {
  border-radius: 28px !important;
}

body[data-page="calculation"] .converter-modes {
  padding: 18px 0;
  background: var(--premium-soft) !important;
}

body[data-page="calculation"] .converter-modes button {
  min-height: 58px;
  padding-inline: 21px;
}

body[data-page="calculation"] .converter-modes button[aria-pressed="true"] {
  color: var(--premium-ink) !important;
  background: var(--premium-surface) !important;
  box-shadow: inset 4px 0 var(--premium-accent) !important;
}

body[data-page="calculation"] .converter-form {
  padding: 34px !important;
}

body[data-page="calculation"] .converter-form h3 {
  color: var(--premium-ink);
  font-size: 24px;
}

body[data-page="calculation"] .converter-result {
  padding: 34px !important;
  border-left: 0 !important;
  color: #fff !important;
  background: #29475f !important;
}

body[data-page="calculation"] .converter-result strong {
  margin-top: 54px !important;
  font-size: 48px !important;
}

body[data-page="calculation"] .callout-band {
  padding-top: 0 !important;
}

body[data-page="calculation"] .callout-band > .inner-container {
  min-height: 180px;
  border: 0 !important;
  color: #fff !important;
  background: #17382d !important;
  box-shadow: 0 18px 44px rgba(23, 56, 45, .16) !important;
}

body[data-page="calculation"] .callout-band .inner-section-head {
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
}

body[data-page="calculation"] .callout-band :is(h2, p, .inner-kicker) {
  color: inherit !important;
}

body[data-page="calculation"] .callout-band .inner-section-head > div::before {
  background: rgba(255,255,255,.16);
}

/* Soil calculation workbenches */
body[data-tool] .workbench-section {
  padding-top: 48px !important;
}

body[data-tool] .tool-workspace {
  display: grid !important;
  grid-template-columns: minmax(0, .94fr) minmax(0, 1.06fr) !important;
}

body[data-tool] form.tool-panel,
body[data-tool] .result-panel {
  padding: clamp(27px, 3vw, 38px) !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

body[data-tool] form.tool-panel {
  border-right: 1px solid var(--premium-line-strong) !important;
  background: var(--premium-soft) !important;
}

body[data-tool] .result-panel {
  background: var(--premium-surface) !important;
}

body[data-tool] .tool-panel .panel-kicker {
  color: var(--premium-accent-deep) !important;
  font: 720 10px/1.35 ui-monospace, "SFMono-Regular", Consolas, monospace !important;
  letter-spacing: .13em !important;
}

body[data-tool] .tool-panel > h2 {
  display: flex;
  align-items: center;
  gap: 13px;
  margin-bottom: 10px !important;
  color: var(--premium-ink) !important;
  font-size: 25px !important;
}

body[data-tool] .tool-panel > h2::before {
  width: 43px;
  height: 43px;
  flex: 0 0 auto;
  border-radius: 13px;
  background-color: var(--premium-accent);
  content: "";
  -webkit-mask: url("./icons/record/file-text.svg") center / 21px 21px no-repeat;
  mask: url("./icons/record/file-text.svg") center / 21px 21px no-repeat;
}

body[data-tool] .result-panel > h2::before {
  -webkit-mask-image: url("./icons/record/badge-check.svg");
  mask-image: url("./icons/record/badge-check.svg");
}

body[data-tool] .panel-intro {
  margin-bottom: 28px !important;
  color: var(--premium-text) !important;
  font-size: 13.5px !important;
}

body[data-tool] .tool-field-grid {
  gap: 22px 16px !important;
}

body[data-tool] .input-group-label {
  margin-top: 4px;
  padding: 12px 0 !important;
  border-block: 1px solid var(--premium-line) !important;
}

body[data-tool] .advanced {
  overflow: hidden;
  border-color: var(--premium-line-strong) !important;
  border-radius: 15px !important;
  background: color-mix(in srgb, var(--premium-surface) 68%, transparent) !important;
}

body[data-tool] .empty-state {
  min-height: 380px !important;
  border: 1px solid var(--premium-line) !important;
  border-radius: 18px !important;
  background: var(--premium-surface-2) !important;
}

body[data-tool] .empty-state > div::before {
  display: block;
  width: 62px;
  height: 62px;
  margin: 0 auto 20px;
  border-radius: 19px;
  background-color: var(--premium-accent);
  content: "";
  -webkit-mask: var(--premium-icon) center / 29px 29px no-repeat;
  mask: var(--premium-icon) center / 29px 29px no-repeat;
}

body[data-tool] .tool-data-visual {
  padding: 18px !important;
  border: 1px solid var(--premium-line) !important;
  border-radius: 16px;
  background: var(--premium-surface-2);
}

body[data-tool] .tool-data-visual meter,
body[data-tool] .tool-data-visual meter::-webkit-meter-bar,
body[data-tool] .tool-data-visual meter::-webkit-meter-optimum-value {
  border-radius: 999px !important;
}

body[data-tool] .result-grid {
  overflow: hidden;
  border: 1px solid var(--premium-line) !important;
  border-radius: 17px;
  background: var(--premium-line) !important;
  gap: 1px;
}

body[data-tool] .result-item {
  border: 0 !important;
  background: var(--premium-surface-2) !important;
}

body[data-tool] .result-note {
  border: 0 !important;
  border-radius: 15px;
  background: var(--premium-soft) !important;
}

body[data-tool] .support-grid {
  overflow: hidden;
  margin-top: 20px !important;
  border: 1px solid var(--premium-line) !important;
  border-radius: 20px !important;
  background: var(--premium-surface) !important;
  box-shadow: var(--premium-shadow-soft);
}

body[data-tool] .support-card + .support-card {
  border-color: var(--premium-line) !important;
}

body[data-tool] :is(.support-card h2, .formula summary) {
  min-height: 62px;
  padding: 20px 24px !important;
  background: var(--premium-surface-2);
}

body[data-tool] .tool-consult {
  overflow: hidden;
  margin-top: 20px !important;
  border: 0 !important;
  border-radius: 20px !important;
  padding: 28px 30px !important;
  color: #fff !important;
  background: #17382d !important;
  box-shadow: 0 16px 36px rgba(23, 56, 45, .15);
}

body[data-tool] .tool-consult :is(h2, p) {
  color: inherit !important;
}

body[data-tool] .tool-consult p {
  color: rgba(255,255,255,.7) !important;
}

body[data-tool] .tool-consult .button {
  border-color: #fff !important;
  color: var(--premium-ink) !important;
  background: #fff !important;
}

/* Tablet */
@media (max-width: 980px) {
  :where(
    body[data-studio] .analysis-section > .container,
    body[data-studio] .plotting-section > .container,
    body[data-studio] .document-section > .container,
    body[data-page="spatial"] .inner-section > .inner-container,
    body[data-page="calculation"] .inner-section > .inner-container,
    body[data-tool] .workbench-section > .workbench-container
  ) {
    width: min(calc(100% - 36px), 1304px) !important;
  }

  body[data-studio="document"] .document-desk {
    grid-template-columns: minmax(0, 1fr) minmax(230px, .64fr) !important;
  }

  body[data-studio="document"] .document-output-pane {
    grid-column: 1 / -1;
    border-top: 1px solid var(--premium-line-strong) !important;
  }

  body[data-studio="document"] .document-transform-panel {
    border-right: 0 !important;
  }

  body[data-studio="document"] .document-output-pane .document-textarea textarea {
    min-height: 300px !important;
  }

  body[data-page="spatial"] .workbench-shell,
  body[data-tool] .tool-workspace {
    grid-template-columns: 1fr !important;
  }

  body[data-page="spatial"] .workbench-controls,
  body[data-tool] form.tool-panel {
    border-right: 0 !important;
    border-bottom: 1px solid var(--premium-line-strong) !important;
  }

  body[data-page="calculation"] .converter-grid {
    grid-template-columns: 180px minmax(0, 1fr) !important;
  }

  body[data-page="calculation"] .converter-result {
    grid-column: 1 / -1;
    min-height: 190px;
    border-top: 1px solid var(--premium-line-strong);
  }

  body[data-page="calculation"] .converter-result strong {
    margin-top: 28px !important;
  }
}

/* Mobile */
@media (max-width: 700px) {
  :where(
    body[data-studio] .analysis-section,
    body[data-studio] .plotting-section,
    body[data-studio] .document-section,
    body[data-page="spatial"] .inner-section,
    body[data-page="calculation"] .inner-section,
    body[data-tool] .workbench-section
  ) {
    padding-block: 34px 54px !important;
  }

  :where(
    body[data-studio] .analysis-section > .container,
    body[data-studio] .plotting-section > .container,
    body[data-studio] .document-section > .container,
    body[data-page="spatial"] .inner-section > .inner-container,
    body[data-page="calculation"] .inner-section > .inner-container,
    body[data-tool] .workbench-section > .workbench-container
  ) {
    width: min(calc(100% - 24px), 1304px) !important;
    padding: 20px !important;
    border-radius: 22px !important;
  }

  :where(
    body[data-studio] .studio-section-heading,
    body[data-page="calculation"] .inner-section-head,
    body[data-tool] .workbench-section-head
  ) {
    min-height: 0;
    grid-template-columns: 1fr !important;
    gap: 20px !important;
    padding-bottom: 22px !important;
  }

  :where(
    body[data-studio] .studio-section-heading > div,
    body[data-page="calculation"] .inner-section-head > div,
    body[data-tool] .workbench-section-head > div
  ) {
    min-height: 46px;
    padding-left: 61px;
  }

  :where(
    body[data-studio] .studio-section-heading > div,
    body[data-page="calculation"] .inner-section-head > div,
    body[data-tool] .workbench-section-head > div
  )::before {
    width: 46px;
    height: 46px;
    border-radius: 14px;
  }

  :where(
    body[data-studio] .studio-section-heading > div,
    body[data-page="calculation"] .inner-section-head > div,
    body[data-tool] .workbench-section-head > div
  )::after {
    left: 13px;
    width: 20px;
    height: 20px;
  }

  :where(
    body[data-studio] .studio-section-heading h2,
    body[data-page="calculation"] .inner-section-head h2,
    body[data-tool] .workbench-section-head h2
  ) {
    font-size: 25px !important;
  }

  :where(
    body[data-studio="analysis"] .analysis-workspace,
    body[data-studio="plotting"] .plot-workspace,
    body[data-studio="document"] .document-desk,
    body[data-page="spatial"] .workbench-shell,
    body[data-tool] .tool-workspace
  ) {
    grid-template-columns: 1fr !important;
    border-radius: 18px !important;
  }

  body[data-studio="analysis"] .analysis-input-panel,
  body[data-studio="plotting"] .plot-control-panel,
  body[data-page="spatial"] .workbench-controls,
  body[data-tool] form.tool-panel {
    border-right: 0 !important;
    border-bottom: 1px solid var(--premium-line-strong) !important;
  }

  body[data-studio="analysis"] .analysis-input-panel .studio-field textarea {
    min-height: 260px;
  }

  body[data-studio="analysis"] .analysis-board,
  body[data-studio="analysis"] .analysis-empty {
    min-height: 380px !important;
  }

  body[data-studio="analysis"] .analysis-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  body[data-studio="analysis"] .analysis-lower-grid {
    grid-template-columns: 1fr !important;
  }

  body[data-studio="plotting"] .plot-control-panel,
  body[data-studio="plotting"] .plot-stage {
    padding: 21px !important;
  }

  body[data-studio="plotting"] .plot-export-note {
    grid-template-columns: 1fr;
    gap: 14px;
    border-radius: 18px !important;
  }

  body[data-studio="document"] .document-desk {
    grid-template-columns: 1fr !important;
  }

  body[data-studio="document"] :is(.document-pane, .document-transform-panel) {
    grid-column: 1;
    border-right: 0 !important;
    border-bottom: 1px solid var(--premium-line-strong) !important;
  }

  body[data-studio="document"] .document-output-pane {
    border-bottom: 0 !important;
  }

  body[data-studio="document"] .document-textarea textarea {
    min-height: 260px !important;
  }

  body[data-studio="document"] .document-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  body[data-studio="document"] .identifier-ledger-head {
    grid-template-columns: 1fr !important;
    gap: 14px;
  }

  body[data-studio="document"] .identifier-grid {
    grid-template-columns: 1fr !important;
  }

  body[data-studio="document"] .identifier-card {
    border-right: 0 !important;
    border-bottom: 1px solid var(--premium-line) !important;
  }

  body[data-studio="document"] .identifier-card:last-child {
    border-bottom: 0 !important;
  }

  body[data-page="spatial"] .workbench-controls,
  body[data-page="spatial"] .workbench-output {
    padding: 22px !important;
  }

  body[data-page="spatial"] .solid-textarea {
    min-height: 270px;
  }

  body[data-page="spatial"] .metric-grid {
    grid-template-columns: 1fr !important;
  }

  body[data-page="spatial"] .spatial-canvas-wrap {
    height: 270px;
  }

  body[data-page="spatial"] #spatialNotes > .inner-container {
    grid-template-columns: 1fr !important;
  }

  body[data-page="spatial"] .reading-column {
    padding: 27px 22px !important;
    border-right: 0;
    border-bottom: 1px solid var(--premium-line);
  }

  body[data-page="calculation"] .calc-selector {
    grid-template-columns: 1fr !important;
    border-radius: 18px !important;
  }

  body[data-page="calculation"] .calc-selector a {
    min-height: 0 !important;
    padding: 24px !important;
    border-right: 0 !important;
    border-bottom: 1px solid var(--premium-line) !important;
  }

  body[data-page="calculation"] .calc-selector a:last-child {
    border-bottom: 0 !important;
  }

  body[data-page="calculation"] .calc-selector a::before {
    margin-bottom: 18px;
  }

  body[data-page="calculation"] .calc-model-icon {
    margin-bottom: 18px;
  }

  body[data-page="calculation"] .converter-grid {
    grid-template-columns: 1fr !important;
    border-radius: 18px !important;
  }

  body[data-page="calculation"] .converter-modes {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding: 0;
    border-right: 0;
    border-bottom: 1px solid var(--premium-line-strong);
  }

  body[data-page="calculation"] .converter-modes button {
    min-height: 54px;
    border-right: 1px solid var(--premium-line);
  }

  body[data-page="calculation"] .converter-form,
  body[data-page="calculation"] .converter-result {
    grid-column: 1;
    padding: 25px !important;
  }

  body[data-page="calculation"] .converter-result {
    min-height: 170px;
  }

  body[data-tool] form.tool-panel,
  body[data-tool] .result-panel {
    padding: 23px 20px !important;
  }

  body[data-tool] .tool-field-grid,
  body[data-tool] .result-grid,
  body[data-tool="water"] .result-grid {
    grid-template-columns: 1fr !important;
  }

  body[data-tool] .field,
  body[data-tool] .result-item,
  body[data-tool="water"] .result-item,
  body[data-tool="water"] .result-item:nth-child(-n + 3) {
    grid-column: 1 !important;
  }

  body[data-tool] .empty-state {
    min-height: 280px !important;
  }

  body[data-tool] .support-grid {
    grid-template-columns: 1fr !important;
    border-radius: 18px !important;
  }

  body[data-tool] .support-card + .support-card {
    border-left: 0 !important;
    border-top: 1px solid var(--premium-line) !important;
  }

  body[data-tool] .tool-consult {
    grid-template-columns: 1fr !important;
    gap: 20px;
    border-radius: 18px !important;
    padding: 24px 22px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  :where(
    body[data-studio] .button,
    body[data-studio] .studio-copy-button,
    body[data-studio] .studio-text-action,
    body[data-page="spatial"] .solid-button,
    body[data-page="calculation"] .solid-button,
    body[data-tool] .button
  ) {
    transition: none !important;
  }
}

/* Hierarchy pass 02
   Makes the task sequence legible at a glance: record header, input layer,
   result layer, then the supporting method boundary. */

:where(
  body[data-studio] .analysis-section > .container,
  body[data-studio] .plotting-section > .container,
  body[data-studio] .document-section > .container,
  body[data-page="spatial"] .inner-section > .inner-container,
  body[data-page="calculation"] .inner-section > .inner-container,
  body[data-tool] .workbench-section > .workbench-container
) {
  position: relative;
}

:where(
  body[data-studio] .analysis-section > .container,
  body[data-studio] .plotting-section > .container,
  body[data-studio] .document-section > .container,
  body[data-page="spatial"] .inner-section > .inner-container,
  body[data-page="calculation"] .inner-section > .inner-container,
  body[data-tool] .workbench-section > .workbench-container
)::before {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 6px;
  background: var(--premium-accent);
  content: "";
}

:where(
  body[data-studio] .studio-section-heading > p,
  body[data-page="spatial"] .inner-section-head > p,
  body[data-page="calculation"] .inner-section-head > p,
  body[data-tool] .workbench-section-head > p
) {
  padding: 15px 18px !important;
  border-top: 0 !important;
  border-left: 3px solid var(--premium-accent) !important;
  border-radius: 0 12px 12px 0;
  background: var(--premium-soft) !important;
}

body[data-page="spatial"] .inner-section-head {
  display: grid !important;
  min-height: 92px;
  grid-template-columns: minmax(0, 1fr) minmax(300px, .72fr) !important;
  align-items: center !important;
  gap: clamp(34px, 6vw, 88px) !important;
  margin: 0 0 28px !important;
  padding: 0 0 27px !important;
  border-bottom: 1px solid var(--premium-line) !important;
}

body[data-page="spatial"] .inner-section-head > div {
  position: relative;
  min-width: 0;
  padding-left: 68px;
}

body[data-page="spatial"] .inner-section-head > div::before {
  position: absolute;
  top: 50%;
  left: 0;
  width: 50px;
  height: 50px;
  border-radius: 15px;
  background: var(--premium-accent);
  box-shadow: 0 10px 24px color-mix(in srgb, var(--premium-accent) 22%, transparent);
  content: "";
  transform: translateY(-50%);
}

body[data-page="spatial"] .inner-section-head > div::after {
  position: absolute;
  top: 50%;
  left: 14px;
  width: 22px;
  height: 22px;
  background: #fff;
  content: "";
  transform: translateY(-50%);
  -webkit-mask: var(--premium-icon) center / contain no-repeat;
  mask: var(--premium-icon) center / contain no-repeat;
}

body[data-page="spatial"] .inner-section-head .inner-kicker {
  margin: 0 0 5px !important;
  color: var(--premium-accent-deep) !important;
  font: 720 10px/1.3 ui-monospace, "SFMono-Regular", Consolas, monospace !important;
  letter-spacing: .13em !important;
  text-transform: uppercase;
}

body[data-page="spatial"] .inner-section-head h2 {
  color: var(--premium-ink) !important;
  font-size: clamp(27px, 2.7vw, 36px) !important;
  font-weight: 690 !important;
  letter-spacing: -.025em !important;
  line-height: 1.2 !important;
}

body[data-page="spatial"] .inner-section-head > p {
  margin: 0 !important;
  color: var(--premium-text) !important;
  font-size: 13.5px !important;
  line-height: 1.72 !important;
}

:where(
  body[data-studio="analysis"] .analysis-workspace,
  body[data-studio="plotting"] .plot-workspace,
  body[data-studio="document"] .document-desk,
  body[data-page="spatial"] .workbench-shell,
  body[data-tool] .tool-workspace
) {
  box-shadow: 0 22px 54px rgba(39, 53, 45, .1), 0 3px 12px rgba(39, 53, 45, .045) !important;
}

/* Analysis: the result header becomes the visual destination. */
body[data-studio="analysis"] .analysis-input-panel {
  background: color-mix(in srgb, var(--premium-soft) 88%, var(--premium-surface)) !important;
  box-shadow: inset -18px 0 38px rgba(82, 107, 87, .035);
}

body[data-studio="analysis"] .analysis-input-panel .studio-panel-head {
  border-top: 4px solid var(--premium-accent);
  background: color-mix(in srgb, var(--premium-soft) 68%, var(--premium-surface)) !important;
}

body[data-studio="analysis"] .analysis-board-head {
  border-bottom-color: rgba(255,255,255,.12) !important;
  color: #fff;
  background: #17382d !important;
}

body[data-studio="analysis"] .analysis-board-head :is(span, h3) {
  color: inherit !important;
}

body[data-studio="analysis"] .analysis-board-head span {
  color: rgba(255,255,255,.58) !important;
}

body[data-studio="analysis"] .analysis-board-head .studio-copy-button {
  border-color: rgba(255,255,255,.26) !important;
  color: #fff !important;
  background: rgba(255,255,255,.09) !important;
}

body[data-studio="analysis"] .analysis-empty {
  background: var(--premium-surface) !important;
}

body[data-studio="analysis"] .analysis-method-note {
  position: relative;
  overflow: hidden;
}

body[data-studio="analysis"] .analysis-method-note::before {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 5px;
  background: #9cb68f;
  content: "";
}

/* Plotting: cool input material and a dark live-output title rail. */
body[data-studio="plotting"] .plot-control-panel {
  border-top: 4px solid var(--premium-accent) !important;
  background: color-mix(in srgb, var(--premium-blue-soft) 90%, var(--premium-surface)) !important;
  box-shadow: inset -18px 0 38px rgba(63, 97, 127, .045);
}

body[data-studio="plotting"] .plot-control-group > h3 {
  color: var(--premium-blue-deep) !important;
}

body[data-studio="plotting"] .plot-stage-head {
  min-height: 82px;
  margin: -28px -28px 24px !important;
  padding: 20px 28px !important;
  border-bottom-color: rgba(255,255,255,.13) !important;
  color: #fff;
  background: #29475f;
}

body[data-studio="plotting"] .plot-stage-head :is(span, h3, output) {
  color: inherit !important;
}

body[data-studio="plotting"] .plot-stage-head span {
  color: rgba(255,255,255,.58) !important;
}

body[data-studio="plotting"] .plot-stage-head .button {
  border-color: rgba(255,255,255,.24) !important;
}

/* Documents: source, rules and final output no longer share one tone. */
body[data-studio="document"] .document-source-pane > header {
  border-top: 4px solid var(--premium-accent);
  background: color-mix(in srgb, var(--premium-soft) 64%, var(--premium-surface)) !important;
}

body[data-studio="document"] .document-transform-panel {
  border-top: 4px solid var(--premium-accent) !important;
  background: color-mix(in srgb, var(--premium-soft) 92%, var(--premium-surface)) !important;
  box-shadow: inset 14px 0 32px rgba(82, 107, 87, .035), inset -14px 0 32px rgba(82, 107, 87, .035);
}

body[data-studio="document"] .document-output-pane > header {
  border-top: 4px solid #17382d;
  border-bottom-color: rgba(255,255,255,.12) !important;
  color: #fff;
  background: #17382d !important;
}

body[data-studio="document"] .document-output-pane > header :is(span, h3, output) {
  color: inherit !important;
}

body[data-studio="document"] .document-output-pane > header span {
  color: rgba(255,255,255,.58) !important;
}

body[data-studio="document"] .document-summary {
  border-top: 5px solid var(--premium-accent) !important;
}

body[data-studio="document"] .identifier-ledger-head {
  border-left: 5px solid var(--premium-accent);
}

/* Spatial: warm input record, dark output rail and a real section heading. */
body[data-page="spatial"] .workbench-controls {
  border-top: 4px solid var(--premium-accent) !important;
  background: color-mix(in srgb, var(--premium-warm-soft) 92%, var(--premium-surface)) !important;
  box-shadow: inset -18px 0 38px rgba(120, 75, 53, .04);
}

body[data-page="spatial"] .workbench-output-head {
  min-height: 92px;
  margin: -31px -31px 26px !important;
  padding: 22px 31px !important;
  border-bottom-color: rgba(255,255,255,.13) !important;
  color: #fff;
  background: #704936;
}

body[data-page="spatial"] .workbench-output-head :is(h2, p, span) {
  color: inherit !important;
}

body[data-page="spatial"] .workbench-output-head p {
  color: rgba(255,255,255,.7) !important;
}

body[data-page="spatial"] .workbench-output-head h2::before {
  background-color: #fff;
  opacity: .9;
}

body[data-page="spatial"] .metric-grid {
  border-top: 5px solid var(--premium-accent) !important;
}

/* Calculation index: a numbered register instead of three equal cards. */
body[data-page="calculation"] .calc-selector {
  grid-template-columns: 1fr !important;
}

body[data-page="calculation"] .calc-selector a {
  display: grid !important;
  min-height: 132px !important;
  grid-template-columns: 62px minmax(170px, .58fr) minmax(280px, 1.4fr) auto;
  grid-template-rows: auto auto;
  gap: 5px clamp(22px, 3.5vw, 52px);
  align-items: center !important;
  padding: 25px 30px !important;
  border-right: 0 !important;
  border-bottom: 1px solid var(--premium-line) !important;
}

body[data-page="calculation"] .calc-selector a:last-child {
  border-bottom: 0 !important;
}

body[data-page="calculation"] .calc-model-icon {
  grid-column: 1;
  grid-row: 1 / 3;
  margin: 0;
}

body[data-page="calculation"] .calc-selector small {
  grid-column: 2;
  grid-row: 1;
  align-self: end;
}

body[data-page="calculation"] .calc-selector h3 {
  grid-column: 2;
  grid-row: 2;
  align-self: start;
  margin: 2px 0 0 !important;
}

body[data-page="calculation"] .calc-selector p {
  min-height: 0;
  grid-column: 3;
  grid-row: 1 / 3;
  margin: 0 !important;
  padding-left: 25px;
  border-left: 1px solid var(--premium-line);
}

body[data-page="calculation"] .calc-selector b {
  grid-column: 4;
  grid-row: 1 / 3;
  margin: 0 !important;
  padding: 0;
}

body[data-page="calculation"] .converter-grid {
  border-top: 5px solid var(--premium-blue) !important;
}

/* Soil workbenches: framed input chapter and dark result chapter. */
body[data-tool] form.tool-panel {
  background: color-mix(in srgb, var(--premium-soft) 90%, var(--premium-surface)) !important;
  box-shadow: inset -18px 0 38px rgba(82, 107, 87, .04) !important;
}

body[data-tool] form.tool-panel > .panel-kicker {
  margin: calc(clamp(27px, 3vw, 38px) * -1) calc(clamp(27px, 3vw, 38px) * -1) 0 !important;
  padding: 27px clamp(27px, 3vw, 38px) 6px !important;
  border-top: 4px solid var(--premium-accent);
  background: color-mix(in srgb, var(--premium-soft) 70%, var(--premium-surface));
}

body[data-tool] form.tool-panel > h2 {
  margin: 0 calc(clamp(27px, 3vw, 38px) * -1) !important;
  padding: 0 clamp(27px, 3vw, 38px) 8px;
  background: color-mix(in srgb, var(--premium-soft) 70%, var(--premium-surface));
}

body[data-tool] form.tool-panel > .panel-intro {
  margin: 0 calc(clamp(27px, 3vw, 38px) * -1) 28px !important;
  padding: 0 clamp(27px, 3vw, 38px) 24px;
  border-bottom: 1px solid var(--premium-line);
  background: color-mix(in srgb, var(--premium-soft) 70%, var(--premium-surface));
}

body[data-tool] .result-panel > .panel-kicker {
  margin: calc(clamp(27px, 3vw, 38px) * -1) calc(clamp(27px, 3vw, 38px) * -1) 0 !important;
  padding: 27px clamp(27px, 3vw, 38px) 6px !important;
  border-top: 4px solid #17382d;
  color: rgba(255,255,255,.58) !important;
  background: #17382d;
}

body[data-tool] .result-panel > h2 {
  margin: 0 calc(clamp(27px, 3vw, 38px) * -1) !important;
  padding: 0 clamp(27px, 3vw, 38px) 8px;
  color: #fff !important;
  background: #17382d;
}

body[data-tool] .result-panel > .panel-intro {
  margin: 0 calc(clamp(27px, 3vw, 38px) * -1) 28px !important;
  padding: 0 clamp(27px, 3vw, 38px) 24px;
  border-bottom: 1px solid rgba(255,255,255,.13);
  color: rgba(255,255,255,.7) !important;
  background: #17382d;
}

body[data-tool] .result-panel > h2::before {
  background-color: #fff;
  opacity: .9;
}

body[data-tool] .support-grid {
  border-top: 5px solid var(--premium-accent) !important;
}

body[data-tool] :is(.support-card h2, .formula summary) {
  color: var(--premium-ink);
  font-weight: 680;
}

@media (max-width: 980px) {
  body[data-page="calculation"] .calc-selector a {
    grid-template-columns: 58px minmax(180px, .8fr) minmax(0, 1.2fr);
  }

  body[data-page="calculation"] .calc-selector b {
    display: none !important;
  }
}

@media (max-width: 700px) {
  body[data-page="spatial"] .inner-section-head {
    min-height: 0;
    grid-template-columns: 1fr !important;
    gap: 20px !important;
    padding-bottom: 22px !important;
  }

  body[data-page="spatial"] .inner-section-head > div {
    min-height: 46px;
    padding-left: 61px;
  }

  body[data-page="spatial"] .inner-section-head > div::before {
    width: 46px;
    height: 46px;
    border-radius: 14px;
  }

  body[data-page="spatial"] .inner-section-head > div::after {
    left: 13px;
    width: 20px;
    height: 20px;
  }

  body[data-page="spatial"] .inner-section-head h2 {
    font-size: 25px !important;
  }

  body[data-studio="plotting"] .plot-stage-head {
    margin: -21px -21px 22px !important;
    padding: 19px 21px !important;
  }

  body[data-page="spatial"] .workbench-output-head {
    margin: -22px -22px 23px !important;
    padding: 20px 22px !important;
  }

  body[data-page="calculation"] .calc-selector a {
    display: grid !important;
    grid-template-columns: 50px minmax(0, 1fr);
    grid-template-rows: auto auto auto;
    gap: 4px 16px;
  }

  body[data-page="calculation"] .calc-model-icon {
    width: 46px;
    height: 46px;
    grid-column: 1;
    grid-row: 1 / 3;
  }

  body[data-page="calculation"] .calc-selector small,
  body[data-page="calculation"] .calc-selector h3 {
    grid-column: 2;
  }

  body[data-page="calculation"] .calc-selector p {
    grid-column: 1 / -1;
    grid-row: 3;
    margin-top: 14px !important;
    padding: 14px 0 0;
    border-top: 1px solid var(--premium-line);
    border-left: 0;
  }

  body[data-tool] form.tool-panel > .panel-kicker,
  body[data-tool] .result-panel > .panel-kicker {
    margin: -23px -20px 0 !important;
    padding: 23px 20px 6px !important;
  }

  body[data-tool] form.tool-panel > h2,
  body[data-tool] .result-panel > h2 {
    margin: 0 -20px !important;
    padding-inline: 20px;
  }

  body[data-tool] form.tool-panel > .panel-intro,
  body[data-tool] .result-panel > .panel-intro {
    margin: 0 -20px 25px !important;
    padding: 0 20px 21px;
  }
}