/* My Materials List: standalone styles; shared site tokens and navigation remain authoritative. */
[data-materials-list] [hidden], [data-materials-source-actions] [hidden], .materials-copy-fallback[hidden], .materials-storage-warning[hidden] { display: none !important; }
[data-materials-list], .materials-source-actions, .materials-dialog { overflow-wrap: anywhere; }
.materials-tab-only-view { margin-top: 1.2rem; padding: 1rem; grid-column: 1 / -1; border: 1px dashed var(--clay, #d69572); border-radius: .5rem; overflow-wrap: anywhere; }
.materials-tab-only-view[hidden] { display: none !important; }
.materials-tab-only-view h2 { max-width: none; font-size: 1.55rem; }
.materials-tab-only-view .materials-list-toolbar { display: flex; flex-wrap: wrap; gap: .65rem; }
.materials-tab-only-view .materials-card-list { display: grid; gap: 1rem; padding: 0; list-style: none; }
.materials-tab-only-view button, .materials-tab-only-view a { min-height: 44px; white-space: normal; }
.materials-tab-only-view .text-button { display: inline-flex; align-items: center; padding: .6rem .15rem; text-decoration: underline; }
.materials-tab-only-view [hidden] { display: none !important; }
[data-materials-list] .materials-list-hero { padding: 3rem 0 1.5rem; }
[data-materials-list] .materials-list-hero h1 { max-width: 18ch; }
[data-materials-list] .materials-list-section { padding: 1rem 0 3.5rem; }
[data-materials-list] .prose.narrow { max-width: 880px; }
[data-materials-list] .materials-list-toolbar, .materials-card-actions, .materials-source-controls, .materials-dialog-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .65rem 1rem; }
[data-materials-list] button, [data-materials-list] .text-button, [data-materials-list] .button, .materials-source-actions button, .materials-source-actions a, .materials-dialog button, .materials-source-link { min-height: 44px; }
[data-materials-list] button, .materials-source-actions button, .materials-dialog button { white-space: normal; }
[data-materials-list] .text-button, .materials-source-actions .text-button, .materials-source-link { display: inline-flex; align-items: center; padding: .6rem .15rem; text-decoration: underline; text-underline-offset: .2em; }
[data-materials-list] button:disabled, .materials-source-actions button:disabled, .materials-dialog button:disabled { cursor: default; opacity: .6; transform: none; }
[data-materials-list] button:focus-visible, [data-materials-list] a:focus-visible, [data-materials-list] summary:focus-visible, [data-materials-list] textarea:focus-visible, .materials-source-actions :focus-visible, .materials-dialog :focus-visible { outline: 3px solid var(--clay, #d69572); outline-offset: 3px; }
[data-materials-list] .materials-list-status { margin: 1rem 0; min-height: 1.6em; color: var(--spruce, #164b43); font-weight: 700; }
.materials-storage-warning, .materials-copy-fallback { margin: 1rem 0; padding: 1.1rem; border: 1px solid var(--clay, #d69572); border-radius: .5rem; background: var(--clay-pale, #f2d9c9); }
.materials-storage-warning p:last-child, .materials-copy-fallback p:last-child { margin-bottom: 0; }
[data-materials-list] .materials-card-list { display: grid; gap: 1.2rem; padding: 0; margin: 1.3rem 0; list-style: none; }
.materials-item { min-width: 0; padding: clamp(1rem, 3vw, 1.5rem); border: 1px solid var(--line, #d7d7cc); border-radius: .65rem; background: var(--white, #fffdf8); }
.materials-card-header { display: flex; align-items: flex-start; flex-wrap: wrap; justify-content: space-between; gap: .5rem 1rem; margin-bottom: 1rem; }
.materials-card-header > div { min-width: 0; flex: 1 1 15rem; }
[data-materials-list] .materials-card-header h2 { margin: 0 0 .45rem; font-size: clamp(1.35rem, 3vw, 1.8rem); max-width: none; }
.materials-added { margin: 0; font-size: .82rem; }
.materials-summary { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }
.materials-component { min-width: 0; padding: .95rem; border-radius: .4rem; border: 1px solid var(--line, #d7d7cc); background: var(--paper, #f7f3ea); }
.materials-component:first-child { grid-column: 1 / -1; border-color: var(--spruce-pale, #dce9e2); background: var(--spruce-pale, #dce9e2); }
.materials-component h3 { font-size: 1.05rem; margin: 0 0 .55rem; }
.materials-component p { margin: .4rem 0 0; font-size: .9rem; line-height: 1.6; }
.materials-component .materials-neutral { color: var(--ink, #18312d); font-size: 1.02rem; font-weight: 800; }
.materials-component .materials-extension { color: var(--spruce, #164b43); font-weight: 700; }
.materials-component .materials-allowance, .materials-component .materials-product { font-size: .83rem; }
.materials-check-summary { margin: 1rem 0 .45rem; font-size: .86rem; }
.materials-attention { margin: .35rem 0; font-size: .87rem; font-weight: 700; color: var(--ink, #18312d); }
.materials-details { margin-top: .7rem; border-top: 1px solid var(--line, #d7d7cc); }
.materials-details summary { display: list-item; min-height: 44px; padding: .8rem 0; cursor: pointer; color: var(--spruce, #164b43); font-weight: 800; }
.materials-detail-group { margin: 1rem 0; }
.materials-detail-group h3 { font-size: 1.03rem; margin-bottom: .55rem; letter-spacing: -.02em; }
.materials-detail-group ul { padding-left: 1.3rem; margin: 0; }
.materials-detail-group li { padding: .22rem 0; font-size: .88rem; color: var(--ink, #18312d); }
.materials-display-context, .materials-note { font-size: .87rem; }
.materials-note { white-space: pre-wrap; }
.materials-card-actions { margin-top: .6rem; border-top: 1px solid var(--line, #d7d7cc); padding-top: .5rem; }
.materials-item-unsaved { border: 2px dashed var(--clay, #d69572); }
.materials-unsaved-label { display: block; color: var(--ink, #18312d); background: var(--clay-pale, #f2d9c9); padding: .35rem .6rem; font-size: .85rem; border-radius: .25rem; }
.materials-pending { margin-top: 2rem; }
.materials-pending > h2 { font-size: 1.55rem; }
.materials-list-empty { margin: 1.5rem 0; padding: 1.5rem; border: 1px dashed var(--line, #d7d7cc); border-radius: .5rem; }
[data-materials-list] .materials-list-empty h2 { font-size: 1.65rem; }
[data-materials-list] .materials-list-empty .hero-actions { flex-wrap: wrap; }
.materials-list-help { margin-top: 2rem; font-size: .88rem; }
.materials-list-boundary { margin: 1.3rem 0 0; padding-top: 1rem; border-top: 1px solid var(--line, #d7d7cc); font-size: .87rem; }
.materials-source-actions { min-width: 0; margin-top: 1.2rem; padding-top: 1rem; border-top: 1px solid var(--line, #d7d7cc); grid-column: 1 / -1; }
.materials-source-status { margin: .5rem 0; color: var(--spruce, #164b43); font-size: .86rem; font-weight: 700; }
.materials-source-status:empty { display: none; }
.materials-source-local { margin: .45rem 0 0; font-size: .8rem; }
.materials-dialog { width: min(560px, calc(100vw - 2rem)); max-height: calc(100dvh - 2rem); padding: clamp(1.1rem, 3vw, 1.75rem); border: 1px solid var(--line, #d7d7cc); border-radius: .6rem; color: var(--ink, #18312d); background: var(--white, #fffdf8); box-shadow: var(--shadow); }
.materials-dialog::backdrop { background: rgb(16 58 52 / 48%); }
.materials-dialog h2 { font-size: 1.5rem; }
.materials-dialog label, .materials-copy-fallback label { display: block; margin: .85rem 0 .35rem; font-weight: 700; font-size: .9rem; }
.materials-dialog label span { color: var(--muted, #63736c); font-weight: 400; }
.materials-dialog input, .materials-dialog textarea, .materials-copy-fallback textarea { display: block; width: 100%; min-width: 0; padding: .7rem; border: 1px solid var(--line, #d7d7cc); border-radius: .3rem; color: var(--ink, #18312d); background: var(--white, #fffdf8); font: inherit; }
.materials-dialog textarea, .materials-copy-fallback textarea { resize: vertical; }
.materials-copy-fallback textarea { font-size: .86rem; line-height: 1.6; white-space: pre-wrap; }
.materials-dialog-actions { margin-top: 1rem; }
.materials-dialog [data-materials-dialog-status] { font-size: .88rem; }
.materials-print-sheet { display: none; }
@media (max-width: 600px) {
  [data-materials-list] .materials-list-toolbar { align-items: stretch; }
  [data-materials-list] .materials-list-toolbar .button { flex: 1 1 100%; }
  .materials-summary { grid-template-columns: minmax(0, 1fr); }
  .materials-card-header { display: block; }
  .materials-unsaved-label { margin-top: .65rem; }
  .materials-dialog-actions { align-items: stretch; }
  .materials-dialog-actions button { flex: 1 1 100%; }
  .materials-source-controls { align-items: stretch; }
  .materials-source-controls .button { width: 100%; }
  .materials-tab-only-view .materials-list-toolbar .button { width: 100%; }
}
@media print {
  @page { size: auto; margin: 16mm; }
  /* Explicit print snapshots never include navigation, cookie controls or source-page/SEO text. */
  body.materials-printing > *:not(.materials-print-sheet) { display: none !important; }
  body.materials-printing { background: #fff; color: #18312d; }
  body.materials-printing .materials-print-sheet { display: block !important; font: 10pt/1.55 Arial, sans-serif; color: #18312d; }
  .materials-print-sheet h1 { max-width: none; margin: .3rem 0 .6rem; font-size: 24pt; }
  .materials-print-sheet h2 { margin: 1rem 0 .6rem; font-size: 15pt; break-after: avoid; }
  .materials-print-sheet header { border-bottom: 2px solid #164b43; margin-bottom: 1rem; padding-bottom: .8rem; }
  .materials-print-sheet .materials-print-brand { font-weight: 800; font-size: 14pt; color: #164b43; }
  .materials-print-sheet article { border-bottom: 1px solid #d7d7cc; padding-bottom: .8rem; break-inside: auto; }
  .materials-print-sheet pre { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; font: inherit; }
  .materials-print-sheet p { color: #18312d; margin: .4rem 0; }
  .materials-print-sheet footer { margin-top: 1rem; font-size: 9pt; }
  /* A manual browser print of the utility route also excludes unrelated site chrome. */
  body:not(.materials-printing):has([data-materials-list]) .site-header,
  body:not(.materials-printing):has([data-materials-list]) .site-footer,
  body:not(.materials-printing):has([data-materials-list]) .cookie-banner,
  body:not(.materials-printing):has([data-materials-list]) [data-cookie-banner],
  body:not(.materials-printing):has([data-materials-list]) .scroll-top,
  body:not(.materials-printing):has([data-materials-list]) .breadcrumb,
  [data-materials-list] .materials-list-toolbar, [data-materials-list] .materials-card-actions,
  [data-materials-list] .materials-storage-warning button, [data-materials-list] .materials-copy-fallback,
  [data-materials-list] .materials-list-help, [data-materials-list] [data-materials-status] { display: none !important; }
  [data-materials-list] .materials-item { break-inside: avoid; box-shadow: none; }
  [data-materials-list] .materials-details { display: block; }
  [data-materials-list] .materials-details > :not(summary) { display: block; }
}

/* Homeowner comprehension review: readable words, prominent results and local-save context. */
[data-materials-list] h1, [data-materials-list] h2, [data-materials-list] h3,
.materials-tab-only-view h2, .materials-tab-only-view h3,
body:has(.how-it-works-steps) h1, .how-it-works-steps h2, .how-it-works-steps h3 {
  letter-spacing: -.015em;
  word-spacing: .06em;
}
.materials-source-actions .materials-source-local,
.materials-source-actions .materials-source-status {
  color: inherit;
  font-size: .9rem;
  line-height: 1.6;
}
.materials-component .materials-neutral:first-of-type {
  font-size: 1.2rem;
  line-height: 1.45;
}

.materials-source-actions .text-button,
.materials-source-actions .text-button:hover { color: inherit; }
.materials-source-controls .button { border-color: currentColor; }

/* The overall neutral area remains first; optional material order counts get
   their own emphasis after the visitor's product facts have enabled them. */
.materials-tile-snapshot .materials-component:not([data-materials-component="area"]) .materials-neutral:first-of-type {
  font-size: 1.02rem;
}
.materials-component .materials-whole-quantity {
  border-left: 3px solid var(--spruce, #164b43);
  padding-left: .65rem;
  font-size: 1.12rem;
  font-weight: 800;
}

/* Keep the local saved count out of the top-level navigation row. */
.materials-nav { position: relative; flex-shrink: 0; }
.materials-nav > summary { display: flex; align-items: center; gap: .5rem; min-height: 44px; list-style: none; cursor: pointer; color: inherit; font: inherit; }
.materials-nav > summary::-webkit-details-marker { display: none; }
.materials-nav > summary::after { content: ''; width: .4rem; height: .4rem; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-2px) rotate(45deg); }
.materials-nav[open] > summary::after { transform: translateY(2px) rotate(225deg); }
.materials-nav > summary:focus-visible, .materials-nav-dropdown a:focus-visible { outline: 3px solid var(--clay); outline-offset: 3px; }
.materials-nav-dropdown { position: absolute; top: calc(100% + .4rem); right: 0; min-width: 14rem; padding: .35rem; border: 1px solid var(--line); border-radius: .45rem; background: var(--white); box-shadow: 0 10px 24px rgba(24,49,45,.12); }
.materials-nav:not([open]) > .materials-nav-dropdown { display: none; }
.materials-nav-dropdown > .materials-list-access { display: flex; align-items: center; min-height: 44px; padding: .7rem .85rem; border-radius: .25rem; white-space: nowrap; }
.materials-nav-dropdown > .materials-list-access:hover { background: var(--spruce-pale); color: var(--spruce); }
@media (max-width: 1020px) {
  .materials-nav > summary { padding: .78rem .55rem; }
  .materials-nav-dropdown { position: static; min-width: 0; margin: 0 .55rem .5rem; box-shadow: none; }
}
