/* MATERIALS & SPURS, THREE STACKS (the 3 Nov pick, "A · Three stacks"). One
   red line under the title, the six steps as one row of buttons, then one
   card with three stacks of one-line rows (install day, customer, the step's
   pill, what is going on, the Spurs rep, one button). Only .mt-* classes, only
   on /materials; the colours and sizes are the app's own tokens. On a phone
   each row is a small card and the step buttons are one "Show" menu. */

/* ------------------------------------------------------------ red line -- */
.mt-red { display: flex; align-items: flex-start; gap: 0.75rem; padding: 0.75rem 1.125rem; border: 1px solid #f3c4c4; border-left: 4px solid var(--color-bad); border-radius: var(--radius-ui); background: var(--color-bad-soft); color: var(--color-bad-ink); font-size: 0.9375rem; line-height: 1.375rem; }
.mt-red > svg { flex: none; width: 1.25rem; height: 1.25rem; margin-top: 0.125rem; }
.mt-red p { margin: 0; min-width: 0; }
.mt-red b { font-weight: 700; }
.mt-red a { font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.mt-red .mt-rd { font-weight: 500; white-space: nowrap; }
.mt-red-hint { display: block; margin-top: 0.125rem; font-size: 0.8125rem; line-height: 1.125rem; }

/* ------------------------------------------------- the six steps, a row -- */
.mt-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem 1rem; }
.mt-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 0.375rem; min-width: 0; }
.mt-chips .ui-chip { min-height: var(--spacing-tap); padding: 0 0.75rem; font-size: 0.875rem; }
.mt-chip-sep { width: 1px; align-self: stretch; margin: 0.5rem 0.25rem; background: var(--color-line-strong); }
.mt-sorted { margin: 0 0 0 auto; font-size: 0.8125rem; color: var(--color-muted); }
/* the phone's one menu (a details, no script) */
.mt-show { display: none; position: relative; width: 100%; }
.mt-show-summary { display: flex; align-items: center; gap: 0.5rem; min-height: var(--spacing-tap); padding: 0 0.75rem; border: 1px solid var(--color-line-strong); border-radius: var(--radius-ui); background: #fff; cursor: pointer; list-style: none; }
.mt-show-summary::-webkit-details-marker { display: none; }
.mt-show-word { font-size: 0.8125rem; font-weight: 600; color: var(--color-muted); }
.mt-show-now { flex: 1 1 auto; min-width: 0; font-size: 0.9375rem; font-weight: 600; color: var(--color-ink); }
.mt-show-chevron { flex: none; width: 1rem; height: 1rem; color: var(--color-muted); transition: transform 0.15s; }
.mt-show[open] .mt-show-chevron { transform: rotate(180deg); }
.mt-show-list { margin: 0.25rem 0 0; padding: 0.25rem; list-style: none; border: 1px solid var(--color-line); border-radius: var(--radius-ui); background: #fff; box-shadow: var(--shadow-lift, 0 6px 18px rgb(31 26 20 / 0.12)); }
.mt-show-option { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; min-height: var(--spacing-tap); padding: 0 0.75rem; border-radius: var(--radius-ui); font-size: 0.9375rem; color: var(--color-ink); }
.mt-show-option:hover { background: var(--color-page); }
.mt-show-option[aria-current] { background: var(--color-accent-soft); color: var(--color-accent-strong); font-weight: 600; }

/* ------------------------------------------------------------ the card -- */
.mt-card { overflow: hidden; --cols: 8.5rem minmax(0, 1.1fr) 9.75rem minmax(0, 1.5fr) 4.5rem 10.5rem; }
.mt-head { display: grid; grid-template-columns: var(--cols); gap: 0 1rem; padding: 0.625rem 1.25rem; border-bottom: 1px solid var(--color-line); }
.mt-head span { font-size: 0.75rem; line-height: 1rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-muted); }
.mt-stack { position: relative; }
.mt-stack + .mt-stack { border-top: 1px solid var(--color-line); }
.mt-list { margin: 0; padding: 0; list-style: none; }
.mt-list > li + li { border-top: 1px solid var(--color-line); }
.mt-group { display: flex; align-items: baseline; gap: 0.5rem; padding: 0.625rem 1.25rem; background: #faf9f7; border-bottom: 1px solid var(--color-line); }
.mt-group .ui-eyebrow { color: var(--color-ink); }
.mt-group-n { font-size: 0.8125rem; font-weight: 700; color: var(--color-muted); font-variant-numeric: tabular-nums; }
.mt-group-why { font-size: 0.8125rem; color: var(--color-muted); }
.mt-group-why::before { content: "· "; }

/* "Show the other N": a checkbox and its label, so it needs no script */
.mt-fold-toggle { position: absolute; width: 1px; height: 1px; margin: 0; opacity: 0; pointer-events: none; }
.mt-stack:not(:has(.mt-fold-toggle:checked)) .mt-extra { display: none; }
.mt-more { display: flex; align-items: center; min-height: 2.75rem; padding: 0 1.25rem; border-top: 1px solid var(--color-line); }
.mt-more.is-phone-only { display: none; }
.mt-more-link { display: inline-flex; align-items: center; gap: 0.25rem; min-height: var(--spacing-tap); padding: 0 0.625rem; margin-left: -0.625rem; border-radius: var(--radius-ui); font-size: 0.9375rem; font-weight: 600; color: var(--color-accent-strong); cursor: pointer; white-space: nowrap; }
.mt-more-link:hover { background: var(--color-accent-soft); }
.mt-more-link svg { width: 1rem; height: 1rem; transition: transform 0.15s; }
.mt-more-phone, .mt-more-less { display: none; }
.mt-stack:has(.mt-fold-toggle:checked) :is(.mt-more-desk, .mt-more-phone) { display: none; }
.mt-stack:has(.mt-fold-toggle:checked) .mt-more-less { display: inline; }
.mt-stack:has(.mt-fold-toggle:checked) .mt-more-link svg { transform: rotate(180deg); }
.mt-fold-toggle:focus-visible ~ .mt-more-link { outline: 2px solid var(--color-accent); outline-offset: 1px; }

/* -------------------------------------------------------------- a row -- */
.mt-r { position: relative; display: grid; grid-template-columns: var(--cols); align-items: center; gap: 0.375rem 1rem; padding: 0.5rem 1.25rem; min-height: 3.5rem; transition: background-color 0.15s; }
.mt-r:hover { background: #faf9f7; }
.mt-r.is-red { box-shadow: inset 4px 0 0 var(--color-bad); }
.mt-date { font-size: 0.875rem; line-height: 1.25rem; font-weight: 600; white-space: nowrap; }
.mt-date small { display: block; font-size: 0.8125rem; line-height: 1.125rem; font-weight: 400; color: var(--color-muted); }
.mt-who { min-width: 0; }
.mt-name { display: block; font-size: 0.9375rem; line-height: 1.375rem; font-weight: 600; color: var(--color-accent); overflow-wrap: anywhere; }
.mt-nexttag { display: block; font-size: 0.6875rem; line-height: 0.875rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-accent-strong); }
.mt-town { margin: 0; font-size: 0.8125rem; line-height: 1.125rem; color: var(--color-muted); }
.mt-phone-only { display: none; }
.mt-state { display: contents; }
.mt-pill { justify-self: start; max-width: 100%; }
.mt-why { min-width: 0; font-size: 0.8125rem; line-height: 1.125rem; color: var(--color-muted); }
.mt-why .is-warn { color: var(--color-warn); font-weight: 600; }
.mt-why .is-bad { color: var(--color-bad); font-weight: 600; }
.mt-ask { display: block; }
.mt-rep { margin: 0; font-size: 0.8125rem; line-height: 1.125rem; color: var(--color-muted); }
.mt-acts { position: relative; z-index: 1; display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 0.5rem; min-width: 0; }
.mt-acts .ui-btn { min-height: var(--spacing-tap); padding: 0 0.875rem; font-size: 0.875rem; }
.mt-chev { display: flex; flex: none; color: var(--color-muted); }
.mt-chev svg { width: 1rem; height: 1rem; }
/* a row done in place: green, the check, the door's words */
.mt-r.mt-row-done { display: flex; align-items: center; gap: 0.75rem; border-top: 0; box-shadow: inset 4px 0 0 var(--color-good-fill); background: var(--color-good-soft); }

/* ------------------------------------------------------------ the foot -- */
.mt-foot { font-size: 0.8125rem; line-height: 1.125rem; color: var(--color-muted); }
.mt-foot p { margin: 0; }

/* a narrow desktop: the rep folds away */
@media (min-width: 48rem) and (max-width: 74.99rem) {
  .mt-card { --cols: 7.75rem minmax(0, 1.1fr) 9.5rem minmax(0, 1.4fr) 10.5rem; }
  .mt-head > span:nth-child(5), .mt-rep { display: none; }
}

/* a phone: one small card per install, the step buttons one menu */
@media (max-width: 47.99rem) {
  .mt-chips { display: none; }
  .mt-show { display: block; }
  .mt-sorted { margin: 0; }
  .mt-bar { gap: 0.5rem; }
  .mt-head { display: none; }
  .mt-group { flex-wrap: wrap; padding: 0.625rem 1rem; }
  .mt-group-why { flex-basis: 100%; }
  .mt-group-why.is-short { flex-basis: auto; }
  .mt-group-why.is-short::before { content: "· "; }
  .mt-group-why::before { content: none; }
  .mt-stack:not(:has(.mt-fold-toggle:checked)) .mt-extra-phone { display: none; }
  .mt-more { padding: 0 1rem; }
  .mt-more.is-phone-only { display: flex; }
  .mt-more-desk { display: none; }
  .mt-more-phone { display: inline; }
  .mt-r { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "name date" "town town" "state state" "acts acts"; gap: 0.25rem 0.75rem; padding: 0.875rem 1rem; min-height: 0; align-items: start; }
  .mt-r.is-next { grid-template-areas: "tag tag" "name date" "town town" "state state" "acts acts"; }
  .mt-who, .mt-date { display: contents; }
  .mt-nexttag { grid-area: tag; }
  .mt-name { grid-area: name; }
  .mt-date b { grid-area: date; align-self: start; font-size: 0.8125rem; line-height: 1.375rem; text-align: right; white-space: nowrap; }
  .mt-date small { display: none; }
  .mt-town { grid-area: town; margin-top: -0.125rem; }
  .mt-phone-only { display: inline; }
  .mt-state { display: flex; grid-area: state; flex-wrap: wrap; align-items: center; gap: 0.25rem 0.5rem; margin-top: 0.25rem; }
  .mt-why.is-empty { display: none; }
  .mt-rep { display: none; }
  .mt-acts { grid-area: acts; justify-content: stretch; margin-top: 0.5rem; }
  .mt-acts > :is(a, button, form, div) { flex: 1 1 auto; }
  .mt-acts .ui-btn { justify-content: center; width: 100%; }
  .mt-r.is-quiet { padding-bottom: 0.75rem; }
  .mt-r.is-quiet .mt-acts { display: none; }
  .mt-red { padding: 0.75rem 1rem; font-size: 0.875rem; line-height: 1.25rem; }
}