/* ── Estimate pricing block - THE formatting system (UI STANDARDS 2026-07-03) ──
   ONE source for the pricing rows on EVERY surface that renders a quote from the
   canonical: the customer estimate panel (#quoteSummary, customer projection) and
   the portal quote-requests inbox (manufacturer, full expansion). Scoped by
   .est-scope so any container can opt in. Moved here from product-page.css
   2026-07-03 (the portal inbox had silently drifted onto its own bespoke layout -
   the exact one-rendering-system violation CORE RULES now names).
   Token fallbacks: the portal pages do not load index.css, so every var() carries
   the index.css value as its fallback. */

.est-scope .est-block {
  grid-column: 1 / -1; /* no-op outside a grid context (e.g. the portal's normal block flow) */
  column-span: all; /* no-op outside a multi-column context (2026-07-09, #quoteSummary) */
  font-size: 0.76rem;
  line-height: 1.65;
  margin-bottom: 8px;
}

.est-scope .est-block .est-section,
.est-scope .est-block .est-child {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
}

.est-scope .est-block .est-section {
  color: var(--dark, #1c2426);
  /* 2026-07-09: was 500, lighter than .est-branch's 700 below it - once a customer-mode branch
     (Compartment 1/2, Mounting Panels) got the same est-branch weight as the manufacturer view
     (this session's Phase 1 fix), the section header above them read LESS prominent than its own
     children, an inverted hierarchy Tim caught live. Section is the top tier and must be the
     heaviest weight on the panel. */
  font-weight: 700;
  /* ── THE SIZE STEP, MOVED HERE FROM THE PORTAL (2026-08-15, queue Task 1) ──────────────────
     This lived in an injected <style> block inside portal-shell.js, scoped .pv2-inbox-detail-body,
     so the portal's quote-requests breakdown had a size hierarchy and the quote document did not.
     Measured on the same morphd quote, before this change:

         portal            section 700/17px     leaf 300/12.16px
         quote document    section 700/12.16px  leaf 300/12.16px

     which is Tim's report exactly: "every line price in the document renders at one weight and
     size, so depth is not legible from the number". It was never a missing value, it was the rule
     living on one surface. CORE RULES names this precise drift ("the portal quote-requests view
     silently drifting from the customer estimate panel's formatting system"), so the fix is to move
     the rule rather than to copy it into a third place.

     var(--t-body) with the literal as its fallback: the portal pages define that token and keep
     using it, and quote-document.html (which does not load portal.css) gets the same number. One
     value, one rule, every surface. */
  font-size: var(--t-body, 1.0625rem);
}

.est-scope .est-block .est-child {
  font-weight: 300;
  color: var(--dark, #1c2426);
  padding-left: 1.2em; /* ONE indent step per depth below the section row */
}

.est-scope .est-block .est-child .est-label {
  color: var(--mid, #4a5c5e);
}

/* Phase E2: second indent depth - per-compartment component sub-lines */
.est-scope .est-block .est-child.est-child2 {
  padding-left: 2.4em;
}
/* Manufacturer nested build view: third depth - a grouped component's own cost lines
   (Compartment N > Drawer x2 > Sheet Metal). */
.est-scope .est-block .est-child.est-child3 {
  padding-left: 3.6em;
}
/* A compartment container row and a grouped-component row sit above their leaves, so they
   carry a touch more weight than a bare leaf. */
.est-scope .est-block .est-child.est-node {
  /* ── A GROUP MUST NEVER READ THE SAME AS THE LINES INSIDE IT, AT ANY DEPTH ──────────────────
     (2026-08-17, queue Task 2 reopened.)

     This was font-weight 400 with NO size step, so a node and its own children differed by one
     100-unit weight increment at an identical 12.16px and an identical colour. Numerically distinct,
     visually one thing. On the toolbox, which nests four deep, that made the bottom two levels read
     as a single flat list:

         Door (2160W x 890H mm)   $590.00     400 / 12.16px
           Labour (Lift-Up Door)  $360.00     300 / 12.16px
           Drawing                 $25.00     300 / 12.16px
           Hinges                  $18.00     300 / 12.16px

     THE EARLIER GATE PASSED ON THIS, three times, because it compared a SECTION against a LEAF and
     found them different. Aggregates hide it: 26 nodes at 400 and 133 leaves at 300 look like a
     working ladder while any given group and its own children are indistinguishable. The gate now
     compares every group with ITS OWN CHILDREN, which is the only comparison that can fail here.

     So the node tier gets a real SIZE step as well as a bigger weight step, and every parent/child
     pair on the platform now differs on size, not on weight alone:

         section  700 / 17px
         branch   600 / 17px
         node     500 / 13.6px
         leaf     300 / 12.16px

     The size is `em` against .est-block's 0.76rem base, so it tracks that base rather than pinning a
     second absolute. It does not compound with depth: a nested row is a SIBLING of the summary
     inside <details>, not a descendant of it, so it inherits the block base and not this. */
  font-weight: 500;
  font-size: 1.12em;
}
.est-scope .est-block .est-child.est-node .est-label {
  color: var(--dark, #1c2426);
}
/* Branch-level subtotal (2026-07-08): a real tree branch or compartment container - "Internal
   Finish", "Compartment 1" - aggregating its own children's costs, distinct from a repeating-
   component group's own line (Drawer Powder Coat x2, still .est-node, not bold) or a bare leaf.
   Comes after .est-node so it wins at equal specificity. Customer side reuses this same class on
   a pinned (branch-collapsed-to-one-line) row - same concept, one class. */
.est-scope .est-block .est-child.est-branch {
  /* 2026-07-09: was 700 (equal to .est-section above) - dropped one step so the hierarchy reads
     section (700) > branch (600) > node (400) > leaf (300), section always the heaviest. */
  font-weight: 600;
  /* Moved here from portal-shell.js's injected block with .est-section above (2026-08-15). A branch
     is a real subtotal - "Compartment 1", "Internal Finish" - and reads at the section's size, one
     weight below it. Everything under a branch stays at the leaf size, so the number's size says
     "this is a subtotal" and the number's weight says which kind. */
  font-size: var(--t-body, 1.0625rem);
}
.est-scope .est-block .est-child.est-branch .est-label {
  color: var(--dark, #1c2426);
}
/* 2026-07-09: a superseded baseline (e.g. the whale when central is chosen) used to render here
   struck-out at its would-be cost - Tim reversed that: it's omitted entirely at the source now
   (canonical.js), never reaches the renderer, so .est-struck never gets applied. Left in place as
   a general-purpose affordance (estimate-render.js's row.struck is always false, documented there)
   rather than deleted, in case a future row kind legitimately needs it again. */
.est-scope .est-block .est-child.est-struck .est-label,
.est-scope .est-block .est-child.est-struck .est-val {
  text-decoration: line-through;
  color: var(--muted, #8a9e9f);
}

/* Progressive disclosure (manufacturer view): every expandable branch/compartment/component group
   is a native <details>. The default open state mirrors the customer's pin state; Luke expands any
   node on demand. A leading caret marks expandable rows; leaves reserve the same width for
   alignment. No JS - <details>/<summary> does the interaction. */
.est-scope details.est-det { margin: 0; }
.est-scope details.est-det > summary {
  list-style: none;
  cursor: pointer;
  outline: none;
}
.est-scope details.est-det > summary::-webkit-details-marker { display: none; }
.est-scope details.est-det > summary::marker { content: ""; }
.est-scope .est-caret {
  display: inline-block;
  width: 0.85em;
  margin-right: 0.15em;
  color: var(--muted, #8a9e9f);
  font-size: 0.72em;
  line-height: 1;
  transition: transform 0.12s ease;
}
.est-scope .est-caret::before { content: "\25B8"; }        /* right-pointing triangle */
.est-scope .est-caret.est-caret-empty::before { content: ""; } /* leaf: spacer, no triangle */
.est-scope details.est-det[open] > summary .est-caret { transform: rotate(90deg); }
.est-scope details.est-det > summary:hover .est-label { color: var(--dark, #1c2426); }

.est-scope .est-block .est-val {
  white-space: nowrap;
  flex-shrink: 0;
  text-align: right;
}

.est-poa {
  font-style: italic;
  color: var(--red, #c0392b);
  font-weight: inherit; /* never bold - weight comes from the row, style from here */
}

.est-scope .est-block .est-note {
  font-size: 0.68rem;
  color: var(--muted, #8a9e9f);
  font-style: italic;
  padding-left: 1.2em; /* notes sit at the depth of the items they name */
  margin-top: 2px;
  line-height: 1.5;
}

/* Manufacturer-only: the muted driver/quantity gloss after a leaf label.

   THE GLOSS FOLLOWS ITS OWN ROW (2026-08-17, queue Task 2 reopened). This was 0.68rem - an ABSOLUTE
   size - so "$1,126 x 1" on a section, "$182 x 1" on a node and "$237 x 1" on a leaf all rendered at
   exactly 10.88px. The left-hand gloss was flat at every depth while the right-hand number carried
   the hierarchy, so the two halves of the same row disagreed about how deep it was.

   `em` makes it relative to the row it sits in, so it inherits the ladder for free rather than
   needing a rule per tier. 0.895em is the existing relationship preserved exactly where the gloss
   already lived: 0.895 x 12.16px = 10.88px on a leaf, unchanged to the pixel. A node's gloss now
   reads 12.17px, matching its heavier row. Sections and branches carry no gloss, so raising the
   ratio there is not a live case. */
.est-scope .est-block .est-driver {
  font-size: 0.895em;
  color: var(--muted, #8a9e9f);
  font-weight: 300;
}

/* Grand-total row for non-panel surfaces (the panel keeps its own .est-total
   with the large Cormorant figure; the inbox total is a plain bold row). */
.est-scope .est-grand {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px solid var(--border-lt, #eaf0f1);
  font-size: 0.76rem;
  font-weight: 700;
}
.est-scope .est-grand .est-label {
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Total row: label left; big figure right with the small GST suffix inline;
   every further note (inc-GST equivalent, POA gloss) stacks BELOW the figure -
   never an inline flex sibling of it. */
.est-scope .est-total {
  grid-column: 1 / -1; /* no-op outside a grid context (e.g. the portal's normal block flow) */
  column-span: all; /* no-op outside a multi-column context (2026-07-09, #quoteSummary) */
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 8px;
  margin-top: 10px;
  padding-top: 12px;
  border-top: 1px solid var(--border-lt, #eaf0f1);
}

.est-scope .est-total .est-total-label {
  font-family: var(--font-body, "Jost", sans-serif);
  font-size: 0.6rem;
  font-weight: 500;
  color: var(--muted, #8a9e9f);
  letter-spacing: 2px;
  text-transform: uppercase;
  padding-bottom: 6px; /* align to the bottom of the large figure */
}

.est-scope .est-total .est-total-right {
  text-align: right;
}

.est-scope .est-total .est-total-gst {
  font-size: 0.68rem;
  color: var(--muted, #8a9e9f);
  font-weight: 400;
}

.est-scope .est-total .est-total-note {
  display: block;
  font-size: 0.68rem;
  color: var(--muted, #8a9e9f);
  font-weight: 400;
  margin-top: 2px;
  line-height: 1.5;
}

/* AN EDITED LINE SAYS SO, QUIETLY (2026-08-13, brief Task 5).
   A revision line whose price or quantity Luke typed carries `edited` in the stored result, and
   estimate-render.js maps that to this class on the leaf. Without it a quote that no longer matches
   what the system computed is indistinguishable from one that does.
   Quiet is the requirement: a small lowercase word after the label, not a badge. It must not compete
   with POA, which is the marker that means somebody still has to act. */
.est-edited .est-label::after {
  content: "edited";
  margin-left: 7px;
  font-size: 0.68em;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  opacity: 0.5;
  font-weight: 600;
}

/* AN OVERRIDDEN GROUP IS VISIBLY ONE (2026-08-18, queue Task 12). "A silent override is the same
   fault class as a control that reports success and does nothing", so this is deliberately not
   subtle: it sits beside the group's name, in the same amber the POA badge uses for "this number
   needs a human", and it names the figure the items actually add up to. */
.est-override {
  font-size: 0.895em; font-weight: 600; color: #d97706; white-space: nowrap;
}
.est-overridden > .est-label { font-style: normal; }