/* ============================================================
   Calculation Hub — Panel System Authority (HUB CORE)
   Governance v6 — Enterprise Certified Panel System
   ------------------------------------------------------------
   Owns ONLY:
   - Panel border / surface
   - Radius
   - Structural padding (tokenized)
   - Deterministic stacking rhythm
   - Variant tone modifiers (NO layout mutation)
   - Accent lane (token-driven)

   Does NOT own:
   - Tool internals
   - Layout positioning
   - Button placement
   - Typography inside content
   ============================================================ */


/* ============================================================
   BASE PANEL SHELL
   ============================================================ */
.pp-panel {
  display: block;
  position: relative;

  border: 1px solid var(--pp-border-structural);
  background: var(--pp-surface-base);
  border-radius: var(--pp-radius-md);
}


/* ============================================================
   PANEL ANATOMY
   ============================================================ */
.pp-panel__header,
.pp-panel__body,
.pp-panel__footer {
  position: relative;
}


/* ============================================================
   STRUCTURAL PADDING (SINGLE AUTHORITATIVE SYSTEM)
   ============================================================ */
.pp-panel__body {
  padding:
    var(--pp-panel-pad-top)
    var(--pp-panel-pad-x)
    var(--pp-panel-pad-bottom)
    var(--pp-panel-pad-x);
}


/* ============================================================
   PANEL STACKING — DETERMINISTIC
   ============================================================ */
.pp-panel + .pp-panel {
  margin-top: var(--pp-panel-gap);
}


/* ============================================================
   BASE VARIANT TONE
   ============================================================ */
.pp-panel--tool {
  background: var(--pp-surface-base);
  border-color: var(--pp-border-structural);
}

.pp-panel--steps,
.pp-panel--analyzer {
  background: color-mix(in srgb, var(--pp-surface-base) 46%, var(--pp-surface-analytical));
  border-color: var(--pp-border-subtle);
}

.pp-panel--sidebar {
  background: var(--pp-surface-base);
  border-color: var(--pp-border-subtle);
}

.pp-panel--scenario {
  background: color-mix(in srgb, var(--pp-surface-base) 82%, var(--pp-surface-soft));
  border-color: var(--pp-border-subtle);
}

.pp-panel--scenario.guide-panel {
  background: color-mix(in srgb, var(--pp-surface-base) 94%, var(--pp-surface-soft));
  border-color: var(--pp-border-subtle);
}

.pp-panel--frame-multi {
  background: var(--pp-surface-base);
  border-color: var(--pp-border-subtle);
}



/* ============================================================
   RESULT PANEL (PRIMARY OUTPUT SURFACE)
   ------------------------------------------------------------
   Uses the same clean border-left accent logic as the formula block,
   but at result-panel strength.
   ============================================================ */
.pp-panel--result {
  background: var(--pp-surface-result);

  border: 1px solid var(--pp-border-accent);
  border-left: var(--pp-result-accent-width) solid var(--pp-brand-700);
  border-radius: var(--pp-radius-md);

  overflow: hidden;
}

.pp-panel--result > .pp-panel__body {
  padding-inline-start: var(--pp-panel-pad-x);
}


/* ============================================================
   FAMILY PANEL
   ------------------------------------------------------------
   Tighter shell so outer frame does not feel airy
   ============================================================ */
.pp-panel--family {
  background: var(--pp-surface-base);
  border-color: var(--pp-border-subtle);
}

.pp-panel--family > .pp-panel__body {
  display: flex;
  align-items: center;
  gap: 7px;
  flex-wrap: wrap;
  min-width: 0;
  padding-top: 9px;
  padding-bottom: 9px;
}


/* ============================================================
   HEADER / FOOTER SEPARATORS (WHEN USED)
   ============================================================ */
.pp-panel__header {
  padding:
    var(--pp-panel-pad-top)
    var(--pp-panel-pad-x)
    0
    var(--pp-panel-pad-x);
}

.pp-panel__footer {
  padding:
    0
    var(--pp-panel-pad-x)
    var(--pp-panel-pad-bottom)
    var(--pp-panel-pad-x);
}

.pp-panel__header + .pp-panel__body {
  padding-top: 12px;
}

.pp-panel__body + .pp-panel__footer {
  padding-top: 12px;
}

.pp-panel__header,
.pp-panel__footer {
  background: transparent;
}


/* ============================================================
   NARROW VIEWPORT STABILITY
   ============================================================ */
@media (max-width: 767px) {
  .pp-panel {
    min-width: 0;
  }

  .pp-panel__body,
  .pp-panel__header,
  .pp-panel__footer {
    min-width: 0;
  }

  .pp-panel--family > .pp-panel__body {
    padding-top: 10px;
    padding-bottom: 10px;
  }

  /* ----------------------------------------------------------
     RESULT SURFACE — MOBILE DENSITY REFINEMENT
     ----------------------------------------------------------
     PURPOSE
     - Reduce excess internal white inset on narrow screens
     - Preserve result shell ownership in the panel authority layer
     - Improve effective width for result internals, especially
       amortization chart + schedule content
     - Desktop remains unchanged
     ---------------------------------------------------------- */
  .pp-panel--result > .pp-panel__body {
    padding-top: 14px;
    padding-right: 12px;
    padding-bottom: 14px;
    padding-left: 12px;
  }

  .pp-panel__header {
    padding-right: 12px;
    padding-left: 12px;
  }

  .pp-panel__footer {
    padding-right: 12px;
    padding-left: 12px;
  }

  /* ----------------------------------------------------------
     MORTGAGE HERO OUTER SHELL — MOBILE DE-SHELLING
     ----------------------------------------------------------
     PURPOSE
     - Remove redundant outer containment on mobile
     - Preserve desktop composed workspace
     - Keep the actual bounded surfaces as:
       1) input panel
       2) result panel
     - Avoid panel-shell overrides in tool CSS
     ---------------------------------------------------------- */
  .pp-panel--tool.mortgage-tool-hero {
    border: 0;
    background: transparent;
    border-radius: 0;
    box-shadow: none;
  }

  .pp-panel--tool.mortgage-tool-hero > .pp-panel__body {
    padding-top: 0;
    padding-right: 0;
    padding-bottom: 0;
    padding-left: 0;
  }
}

/* ============================================================
   INSTITUTIONAL MOBILE TOOL COMPOSITION — PANEL CONTRACT
   ============================================================
   PURPOSE
   - Gives opted-in tools one authoritative major boundary per section.
   - Preserves desktop panel composition.
   - Prevents inherited adjacent-panel margins from doubling grid rhythm.
   - Does not flatten analytical surfaces that explicitly request containment.
   ============================================================ */
@media (max-width: 767px) {
  [data-pp-mobile-composition="institutional"]
    .pp-panel[data-pp-mobile-section] {
    min-width: 0;
    border-radius: var(--pp-radius-lg);
    box-shadow: none;
  }

  [data-pp-mobile-composition="institutional"]
    .pp-panel[data-pp-mobile-section]
    > .pp-panel__body {
    padding:
      var(--pp-mobile-section-pad-y)
      var(--pp-mobile-section-pad-x);
  }

  [data-pp-mobile-composition="institutional"] .pp-mobile-section-stack {
    display: grid;
    gap: var(--pp-mobile-section-gap);
    min-width: 0;
  }

  [data-pp-mobile-composition="institutional"]
    .pp-mobile-section-stack
    > .pp-panel {
    margin-top: 0;
  }

  [data-pp-mobile-composition="institutional"]
    .pp-panel[data-pp-mobile-section]
    > .pp-panel__body
    > .pp-section-title:first-child {
    margin-top: 0;
  }
}