/* ==========================================================================
   solutions-home-services.css — /solutions/home-services (solutions wave C,
   2026-09-05), rebuilt the same evening under docs/pipeline/REDESIGN-COMMON.md.
   Loads after feature-v2.css, feature-v3.css, home.css, hero-film.css and
   widgets-real.css.

   Five things worth knowing before editing:
   1. The hero is HeroFilm and its styles live in hero-film.css; nothing here
      touches them. Only the tablet-portrait correction at the foot of this
      file does, and it is commented where it sits.
   2. THE DEVICE IS A RUN SHEET, not a rail. Each beat opens with a plate (01
      to 05), the day and time, and the place, on a 1px rule that runs to the
      right edge; the plate numerals are tabular, so the sequence reads down
      the page before any of the words do. This is deliberately NOT the
      vertical hairline-and-marker rail of /solutions/professional-services,
      /healthcare, /hospitality and /hair-and-beauty, and not the horizontal
      stage strip of /solutions/finance. It also survives the phone unchanged:
      the run sheet never has to flatten, because it is already horizontal.
   3. Every beat has the same rhythm on purpose: a run sheet whose rows vary is
      not a run sheet. The variety is in the five screens, which are five
      different product surfaces, plus the one wide screen at the foot.
   4. Every screen is a port of a real product surface (Automations modal,
      LeaderboardV2, the widget kit, AiQueryPanel, DashboardInbox3, the
      Insights Locations card). Two site rules override the product inside a
      port and nothing else does: nothing renders under 13px, and muted text
      is #5b6076 (the product's #667085, #6b7280 and #989898 all fail the
      contrast floor on the tints these screens use). #5b6076 measures 6.21:1
      on white, 5.80 on --v2-card, 5.70 on --ghost, 5.65 on #f3f4f6, 5.56 on
      #eef2ff, 5.68 on #fef2f2, 5.58 on #e6f7ea and 6.00 on #f8f9fc.
   5. The proof band is the wave C pattern: the h2, the one line of attribution
      and the Testimonial share one tinted --v2-card band, sitting on the
      page's own left edge, not centred.
   ========================================================================== */

/* ---------- logo strip ---------- */
.hs-page .v2-logos ul { justify-content: space-between; gap: 32px; }
.hs-page .v2-logos img { max-height: 24px; }
.hs-page .v2-logos img.is-tall { max-height: 40px; }
.hs-page .v2-logos img[alt="Frenchies"] { max-height: 17px; }
.hs-page .v2-logos img[alt="The Lash Lounge"] { max-height: 27px; }
.hs-page .v2-logos img[alt="Hilldrup"] { max-height: 32px; }
.hs-page .tq blockquote { margin: 0; }
/* six logos wrap 3 / 2 / 1 on a flex row and orphan the last one, so below 700 they sit on a three-up grid */
@media (max-width: 700px) {
  .hs-page .v2-logos ul { display: grid; grid-template-columns: repeat(3, 1fr); place-items: center; gap: 26px 20px; }
}

/* ==========================================================================
   THE WEEK: a run sheet of five beats
   ========================================================================== */
.hs-week { --hs-gap: clamp(24px, 3vw, 44px); --hs-pad: clamp(30px, 3.4vw, 46px); }
.hs-head { max-width: 760px; margin-bottom: clamp(26px, 3.2vw, 40px); }
.hs-head .sub { margin-top: 14px; max-width: 62ch; }

.hs-run { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--v2-line); }
.hs-beat {
  display: grid;
  grid-template-columns: minmax(0, .86fr) minmax(0, 1.14fr);
  column-gap: var(--hs-gap); row-gap: 20px;
  align-items: start;
  padding: var(--hs-pad) 0;
}
.hs-beat + .hs-beat { border-top: 1px solid var(--v2-line); }

/* the tick: the run sheet's own line. Plate, then the day and time, then the place, then a rule to the right edge. */
.hs-tick {
  grid-column: 1 / -1; margin: 0;
  display: flex; align-items: center; gap: 12px;
}
.hs-tick::after { content: ""; flex: 1 1 auto; height: 1px; background: var(--v2-line); }
.hs-tick b {
  flex: none; min-width: 32px; padding: 4px 8px; border-radius: 7px;
  background: #eef2ff; box-shadow: 0 0 0 1px #cdd8ff;
  font: 700 13.5px/1.25 var(--font-display); color: var(--blue);
  font-variant-numeric: tabular-nums; text-align: center;
}
.hs-tick span { font: 600 13.5px/1.3 var(--font-display); color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.hs-tick em { font-style: normal; font: 400 13px/1.3 var(--font-body); color: #5b6076; white-space: nowrap; }

.hs-copy { grid-column: 1; min-width: 0; }
.hs-copy h3 {
  font: 500 clamp(23px, 2.1vw, 27px)/1.2 var(--font-serif); letter-spacing: -.015em; color: var(--ink);
  text-wrap: balance;
}
.hs-copy p { margin-top: 12px; font: 400 15.5px/1.6 var(--font-body); color: var(--v2-body); text-wrap: pretty; }
.hs-copy p em { font-style: italic; color: var(--ink); }
.hs-links { display: flex; flex-wrap: wrap; gap: 10px 24px; margin-top: 16px; }
.hs-links a { font: 600 14.5px/1.4 var(--font-display); color: var(--blue); text-decoration: none; }
.hs-links a::after { content: " \2192"; }
.hs-links a:hover { text-decoration: underline; }

/* the foot: the folded objection, one wide screen, and the line for the reader with more than two depots */
.hs-foot { margin-top: clamp(34px, 3.6vw, 48px); padding-top: clamp(24px, 2.6vw, 34px); border-top: 1px solid var(--v2-line); }
.hs-foot-l, .hs-foot-c { max-width: 66ch; font: 400 16px/1.6 var(--font-body); color: var(--v2-body); text-wrap: pretty; }
.hs-foot .hs-links { margin-top: 12px; }
.hs-foot .hs-scr--loc { margin-top: clamp(20px, 2.4vw, 30px); }
.hs-foot-c { margin-top: clamp(20px, 2.4vw, 28px); }

/* ==========================================================================
   THE SIX SCREENS. One frame, six ported surfaces.
   ========================================================================== */
.hs-screen {
  grid-column: 2; min-width: 0;
  padding: 16px;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 0 0 1px var(--v2-line), var(--v2-shadow);
}

/* the marks: a provider initial in a white disc (a system with no sprite mark gets its initial). #0d6b8a is Xero's
   blue darkened to clear the contrast floor at 13px; the brand value fails it on white. */
.hs-mk {
  flex: none; width: 25px; height: 25px; border-radius: 7px;
  display: grid; place-items: center;
  background: #fff; box-shadow: inset 0 0 0 1px var(--v2-line);
  font-style: normal; font: 700 13px/1 var(--font-display); color: #0d6b8a;
}
.hs-mk--c { color: var(--blue); }
.hs-mk--c .icon { width: 15px; height: 15px; }
/* a real vendor mark sits on the same white disc, at the Cloutly mark’s size and in its own brand colour */
.hs-mk .icon, .hs-mk .mk-logo { width: 15px; height: 15px; }
.hs-mk .mk-logo { display: block; object-fit: contain; }

/* ---------- 1 · the Xero automation (AutomationsDetailsModal + AutomationForm + SelectLabel + AutomationSummary)
   "Selected location:", "When this happens:" and "Do this:" are the modal's own labels. The control is
   react-select's: a 42px row with a 1px #cccccc border and a 4px radius, the 25px provider mark, the label 10px in,
   and the green IconCheckCircle (#009900, 16px) that marks an authorised trigger. ---------- */
.hs-scr-h {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px;
  padding-bottom: 13px; border-bottom: 1px solid var(--v2-line);
}
.hs-scr-t { display: inline-flex; align-items: center; gap: 10px; font: 600 15px/1.3 var(--font-display); color: var(--ink); }
.hs-scr-loc { font: 400 13px/1.3 var(--font-body); color: #5b6076; }
.hs-scr-loc b { font-weight: 600; color: var(--ink); }
.hs-auto-l { margin: 14px 0 7px; font: 600 13.5px/1.4 var(--font-display); color: var(--ink); }
.hs-sel {
  display: flex; align-items: center; gap: 10px;
  min-height: 42px; padding: 6px 12px;
  border: 1px solid #cccccc; border-radius: 4px; background: #fff;
  font: 400 14.5px/1.35 var(--font-body); color: var(--ink);
}
.hs-sel > span { min-width: 0; }
.hs-ok { flex: none; width: 16px; height: 16px; margin-left: auto; color: #009900; }

/* ---------- 2 · Staff recognition (Board.js + BoardRow.js + index.module.scss) ----------
   The product's card head, its five-track row, its value-over-caption slots and its chips, on the verified basis the
   copy beside it describes, so the amber BasisBanner (Strips.js) is not drawn here: give everyone their own link and
   the board ranks on links alone (claims §A5). The rank-1 disc is the product's color-mix of the primary at 12%
   behind text at 60%, resolved to hex. */
.hs-scr--lb { padding: 0; overflow: hidden; }
.hs-lb-h {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  padding: 17px 20px 14px; border-bottom: 1px solid #e7e9f2;
}
.hs-lb-h b { font: 800 15px/1.3 var(--font-display); color: #0b0e1a; }
.hs-lb-h span { font: 600 13px/1.3 var(--font-display); color: #5b6076; }
.hs-lb-b { padding: 0 6px; }
.hs-lb-r {
  display: grid; grid-template-columns: 30px 40px minmax(0, 1fr) auto auto; gap: 14px; align-items: center;
  padding: 14px 14px 14px 10px;
}
/* the product's metrics row is a flex with a 26px gap; here the two slots are grid tracks, so the gap is on them */
.hs-lb-r > .hs-lb-slot + .hs-lb-slot { margin-left: 12px; }
.hs-lb-r + .hs-lb-r { border-top: 1px solid #e7e9f2; }
.hs-lb-rank { font: 800 14px/1 var(--font-display); color: #5b6076; text-align: center; font-variant-numeric: tabular-nums; }
.hs-lb-r.is-lead .hs-lb-rank {
  width: 27px; height: 27px; margin: 0 auto; border-radius: 50%; display: grid; place-items: center;
  background: #e0e8ff; color: #002499;
}
.hs-lb-av {
  width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center;
  color: #fff; font: 600 15px/1 var(--font-display);
}
.hs-lb-who { min-width: 0; }
.hs-lb-who b { display: block; font: 700 14.5px/1.35 var(--font-display); color: #0b0e1a; }
.hs-lb-who em { display: block; padding-top: 1px; font-style: normal; font: 400 13px/1.3 var(--font-body); color: #5b6076; }
.hs-lb-slot { min-width: 86px; text-align: right; }
.hs-lb-slot > b { display: block; font: 800 16px/1.25 var(--font-display); letter-spacing: -.01em; color: #0b0e1a; font-variant-numeric: tabular-nums; }
.hs-lb-slot small { display: block; padding-top: 2px; font: 400 13px/1.3 var(--font-body); color: #5b6076; white-space: nowrap; }
.hs-chip {
  display: inline-block; padding: 3px 9px; border-radius: 6px;
  background: #f1f5f9; color: #475569; font: 500 13px/1.4 var(--font-display); white-space: nowrap;
}
.hs-chip.is-up { background: #e6f7ea; color: #0c7a52; }

/* ---------- 3 · the homeowner's view of your own site, with the real widget markup inside it ----------
   The page around the widget is the customer's own site, not a Cloutly screen: a header, a Call us button, and the
   strip under it. The kit's own paddings are trimmed so the widget reads as a snippet in the page rather than as a
   second card. */
.hs-site-h { font: 600 15px/1.35 var(--font-display); color: var(--ink); }
.hs-site-h span { color: #5b6076; font-weight: 400; }
.hs-call {
  display: block; margin-top: 12px; padding: 12px 18px; border-radius: 12px;
  background: var(--ink); color: #fff; text-align: center; font: 600 15px/1.2 var(--font-display);
}
.hs-strip { margin-top: 6px; }
.hs-page .hs-strip .cw2-avatars { padding: 12px 2px 2px; }

/* ---------- 4 · the AI query panel (AiQueryPanel.js + listings.module.scss) ----------
   The product's card title at 14.5px/700, its live-add row (a 10px-radius input with a 1px #e7e9f2 border beside the
   ink "Check now" button) and its live slots: a #f8f9fc panel, an 84px bold assistant label, one pill chip each and
   the sampling line under them. Chip grounds are the listings token set: good #00845a on #e4f8f0, warn #b07a00 on
   #fff4d6, both darkened to clear the floor on their own tints. */
.hs-ai-t { margin: 0 0 8px; font: 700 14.5px/1.3 var(--font-display); color: #0b0e1a; }
.hs-ai-add { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.hs-ai-in {
  flex: 1 1 200px; min-width: 0; padding: 9px 13px;
  border: 1px solid #e7e9f2; border-radius: 10px; background: #fff;
  font: 500 14px/1.4 var(--font-body); color: #0b0e1a;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.hs-ai-btn {
  flex: none; padding: 8px 14px; border-radius: 10px;
  background: #0b0e1a; color: #fff; font: 600 13px/1.3 var(--font-display); white-space: nowrap;
}
.hs-ai-slots {
  display: grid; gap: 8px; margin-top: 12px; padding: 12px 14px;
  border: 1px solid #e7e9f2; border-radius: 12px; background: #f8f9fc;
}
.hs-ai-slot { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px; margin: 0; }
.hs-ai-slot b { min-width: 84px; font: 600 13px/1.4 var(--font-display); color: #0b0e1a; }
.hs-ai-slot .hs-chip { border-radius: 999px; padding: 3px 10px; font-weight: 600; }
.hs-chip.is-good { background: #e4f8f0; color: #00694a; }
.hs-chip.is-warn { background: #fff4d6; color: #8a5f00; }
.hs-ai-f { margin: 2px 0 0; font: 400 13px/1.45 var(--font-body); color: #5b6076; }

/* ---------- 5 · the inbox and Draft with AI (CustomerListItem + InboxHeader + MagicResponseButtonGroup) ----------
   The product's 16px row padding, its 40px avatar with the 18px source badge on its corner, the amber "needs
   response" dot, the "Needs action" pill, the star row, and the composer's 32px outline button with a 16px sparkle
   and the tone as a dropdown (there are no tone chips in the product). */
.hs-scr--inb { padding: 0; overflow: hidden; }
.hs-inb-h {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 14px;
  padding: 14px 16px; border-bottom: 1px solid #f3f4f6;
}
.hs-tabs { display: inline-flex; align-items: center; gap: 6px; }
.hs-tabs b, .hs-tabs i {
  padding: 5px 11px; border-radius: 6px; font-style: normal; font: 600 13px/1.3 var(--font-display);
}
.hs-tabs b { background: #eef2ff; color: var(--blue); }
.hs-tabs i { color: #5b6076; }
.hs-scope { font: 500 13px/1.3 var(--font-display); color: #5b6076; }
.hs-inb { margin: 0; padding: 0; list-style: none; }
.hs-inb > li { display: flex; align-items: flex-start; gap: 12px; padding: 16px; border-bottom: 1px solid #f3f4f6; }
.hs-inb > li.is-sel { background: rgba(0, 61, 255, .05); }
.hs-inb-av {
  position: relative; flex: none; width: 40px; height: 40px; border-radius: 50%;
  display: grid; place-items: center; color: #fff; font: 600 15px/1 var(--font-display);
}
.hs-inb-mk {
  position: absolute; right: -3px; bottom: -3px; width: 18px; height: 18px; border-radius: 50%;
  display: grid; place-items: center; background: #fff; box-shadow: 0 0 0 1px #e5e7eb;
}
.hs-inb-mk .icon { width: 12px; height: 12px; }
.hs-inb-b { min-width: 0; }
.hs-inb-1 { display: flex; align-items: center; gap: 8px; font: 600 15px/1.35 var(--font-display); color: #111827; }
.hs-inb-1, .hs-inb-2 { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hs-inb-1 em { margin-left: auto; padding-left: 10px; font-style: normal; font: 400 13px/1.3 var(--font-body); color: #5b6076; white-space: nowrap; }
.hs-dot { flex: none; width: 7px; height: 7px; border-radius: 50%; background: #f59e0b; }
.hs-inb-2 { display: block; margin-top: 2px; font: 400 13.5px/1.45 var(--font-body); color: #5b6076; }
.hs-inb-3 { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 5px; font: 400 13px/1.4 var(--font-body); color: #5b6076; }
.hs-pill {
  padding: 1px 8px; border-radius: 999px; background: #fef2f2; box-shadow: inset 0 0 0 1px #fecaca;
  color: #b91c1c; font-style: normal; font: 600 13px/1.5 var(--font-display);
}
.hs-stars { font-style: normal; font-size: 13px; letter-spacing: 1px; color: #f5a623; }
.hs-comp { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; padding: 14px 16px; }
.hs-btn {
  display: inline-flex; align-items: center; gap: 7px;
  height: 32px; padding: 0 11px; border-radius: 6px;
  background: #fff; box-shadow: inset 0 0 0 1px #d1d5db;
  font: 500 13.5px/1 var(--font-display); color: #374151;
}
.hs-btn .icon { width: 16px; height: 16px; }
.hs-chev { width: 13px; height: 13px; }
.hs-comp em { font-style: normal; font: 400 13px/1.4 var(--font-body); color: #5b6076; }

/* ---------- 6 · the Insights Locations card (LocationsCard.js) ----------
   One wide screen at the foot of the run sheet, because this one is written for the reader with more than two
   depots. Blank Rank header with the number in the row, no Total column, header "New" not "New · this period", two
   decimals on ratings, a delta pill under Rating and New, and the two Status strings verbatim. */
.hs-scr--loc { grid-column: 1 / -1; }
.hs-loc { width: 100%; border-collapse: collapse; }
.hs-loc caption { caption-side: top; text-align: left; padding-bottom: 10px; font: 700 14.5px/1.35 var(--font-display); color: #0b0e1a; }
.hs-loc th, .hs-loc td { padding: 9px 3px; text-align: right; font: 400 13px/1.35 var(--font-body); color: var(--v2-body); white-space: nowrap; }
.hs-loc .hs-abbr { display: none; }
.hs-loc th:last-child, .hs-loc td:last-child { white-space: normal; }
.hs-loc th { font: 600 13px/1.3 var(--font-display); color: #5b6076; border-bottom: 1px solid var(--v2-line); white-space: normal; vertical-align: bottom; }
.hs-loc th:first-child, .hs-loc td:first-child { width: 18px; padding-left: 0; text-align: left; }
.hs-loc th:nth-child(2), .hs-loc td:nth-child(2) { text-align: left; }
.hs-loc td:nth-child(2) { font: 600 14px/1.35 var(--font-display); color: var(--ink); }
.hs-loc td:nth-child(3), .hs-loc td:nth-child(4) { font-variant-numeric: tabular-nums; }
.hs-loc td b { display: block; font: 600 13px/1.3 var(--font-body); color: var(--ink); }
/* Rating and New each carry a delta pill against the comparison period (claims A1). It sits under its own value:
   inline, the seven columns overran the card at 1440 before the screen went full width, and the pill under the
   value is also what keeps the row readable on a phone. */
.hs-dlt {
  display: inline-block; margin-top: 4px; padding: 2px 6px; border-radius: 999px;
  font-style: normal; font: 600 13px/1.35 var(--font-display); white-space: nowrap;
}
.hs-dlt--up { background: #ddf7ea; color: #0c7a52; }
.hs-dlt--dn { background: #ffe6ec; color: #b0173c; }
.hs-loc th:nth-child(4), .hs-loc td:nth-child(4) { padding-left: 10px; }
.hs-loc td:last-child, .hs-loc th:last-child { padding-right: 0; }
.hs-loc tbody tr + tr td { border-top: 1px solid var(--v2-line); }
.hs-state { display: inline-block; padding: 4px 8px; border-radius: 999px; font: 600 13px/1.3 var(--font-display); white-space: nowrap; }
.hs-state--ok { background: #ddf7ea; color: #0c7a52; }
.hs-state--crit { background: #ffe6ec; color: #b0173c; }

/* ---------- proof: the h2 and the quote share one tinted band (wave C) ---------- */
.v2 main .hs-proof { margin-top: clamp(24px, 3vw, 40px); padding: clamp(80px, 8.5vw, 120px) 0 0; background: var(--v2-card); }
.v2 main .hs-proof + .tq-section { padding: clamp(28px, 3vw, 40px) 0 clamp(80px, 8.5vw, 120px); background: var(--v2-card); }
.v2 main .hs-proof + .tq-section + section { padding-top: clamp(80px, 8.5vw, 120px); }
.v2 main .hs-proof + .tq-section .tq figcaption { border-top-color: rgba(15, 13, 25, .1); }
/* the band used to centre its 780px measure inside the 1080px column, so it started 126px right of every other
   section on the page and read as misalignment. Heading, attribution and quote now share the column's left edge. */
.hs-page .hs-proof .col > .h { max-width: 780px; margin: 0; }
.hs-proof-lead { max-width: 780px; margin: 16px 0 0; font: 400 17px/1.6 var(--font-body); color: var(--v2-body); text-wrap: pretty; }
.v2 main .hs-proof + .tq-section .tq { margin-left: 0; margin-right: auto; }
.hs-page .tq blockquote p { font-size: clamp(20px, 2.1vw, 27px); line-height: 1.35; font-weight: 400; }
.hs-page .tq figcaption { margin-top: 26px; }

/* ---------- breakpoints ----------
   One step, not two: under 1180px the screen drops below its copy, and the run sheet's tick does not have to change
   at any width because it is horizontal already. */
@media (max-width: 1180px) {
  .hs-beat { grid-template-columns: minmax(0, 1fr); }
  .hs-screen { grid-column: 1; max-width: 620px; }
  .hs-scr--loc { max-width: none; }
  .hs-copy h3 { max-width: 28ch; }
  .hs-copy p { max-width: 62ch; }
}
@media (max-width: 991px) {
  .hs-beat { padding: clamp(28px, 3.4vw, 40px) 0; }
  .hs-screen { max-width: 560px; }
}
@media (max-width: 620px) {
  .hs-screen { padding: 14px; }
  .hs-scr--lb, .hs-scr--inb { padding: 0; }
  /* the board's row goes flex on a phone, the way the product's own board does: rank, avatar and name on the first
     line, then the two value-over-caption slots side by side under them */
  .hs-lb-r { display: flex; flex-wrap: wrap; align-items: center; gap: 9px 18px; padding: 13px 10px; }
  .hs-lb-rank { width: 22px; }
  /* the desktop rank disc centres itself in its track with `margin: 0 auto`, which in a flex row would push the
     avatar to the far edge */
  .hs-lb-r.is-lead .hs-lb-rank { width: 24px; height: 24px; margin: 0; }
  .hs-lb-av { width: 34px; height: 34px; font-size: 14px; }
  .hs-lb-who { flex: 1 1 calc(100% - 110px); }
  .hs-lb-slot { flex: none; min-width: 0; text-align: left; }
  .hs-lb-r > .hs-lb-slot + .hs-lb-slot { margin-left: 0; }
  .hs-lb-slot > b.hs-chip { display: inline-block; }
  .hs-lb-h { padding-left: 14px; padding-right: 14px; }
  .hs-inb > li { padding: 13px 12px; }
  .hs-comp { padding: 12px; }
  .hs-ai-slot b { min-width: 0; }
}
@media (max-width: 560px) {
  /* The table used to scroll sideways inside its card below 560, which pushed Status off screen — the one column the
     copy points at — and the clipped header read as a rendering fault rather than as a scroll cue. Nothing scrolls
     now: the six numeric columns stay on the row and Status drops onto a second line under each one, so every column
     the copy names is on screen at 390. */
  .hs-loc, .hs-loc thead, .hs-loc tbody { display: block; }
  /* one shared column template, because each row is its own grid and `auto` columns would size independently and
     step the header off the body. The last two headers abbreviate, as the Locations mock on /solutions/multi-location
     does, so the name column keeps enough room for the longer depot. */
  .hs-loc thead tr, .hs-loc tbody tr {
    display: grid;
    grid-template-columns: 13px minmax(0, 1fr) 68px 44px 38px 40px;
    gap: 0 7px; align-items: end;
  }
  .hs-loc .hs-full { display: none; }
  .hs-loc .hs-abbr { display: inline; }
  .hs-loc th, .hs-loc td { padding-left: 0; padding-right: 0; }
  .hs-loc th:first-child, .hs-loc td:first-child { width: auto; }
  .hs-loc thead th:last-child { display: none; }
  .hs-loc thead tr { border-bottom: 1px solid var(--v2-line); }
  .hs-loc th { border-bottom: 0; }
  .hs-loc tbody tr { padding-top: 2px; }
  .hs-loc tbody tr + tr { border-top: 1px solid var(--v2-line); }
  .hs-loc tbody tr + tr td { border-top: 0; }
  .hs-loc tbody td:last-child { grid-column: 1 / -1; padding-top: 4px; text-align: left; }
  .hs-dlt { display: block; width: max-content; margin-left: auto; padding: 2px 6px; }
}