/*
 * Shadcn-inspired card restyle — Home Dashboard (dashboard_new.html)
 * Scope: cosmetic only, per docs/ui/TACTICAL_RESTYLE_DIRECTIVE.md.
 * New, additive classes (prefixed `stc-`) layered on top of the existing
 * markup/classes — nothing here removes or renames functional hooks
 * (IDs, data attributes, JS-targeted classes like .home-screen-message,
 * .adjust-value, .liability-heading, etc).
 * Loaded after style.css so these rules win on shared properties.
 */

:root {
  --stc-border: #e2e8f0;
  --stc-border-soft: #f1f5f9;
  --stc-border-hover: #cbd5e1;
  --stc-surface: #f8fafc;
  --stc-heading: #0f172a;
  --stc-heading-soft: #334155;
  --stc-muted: #64748b;
  --stc-muted-2: #94a3b8;
  /* Small text on tinted cards: --stc-muted is under 4.5:1 there (#282). */
  --stc-muted-strong: #475569;
  --stc-radius: 14px;
  --stc-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.04), 0 1px 2px -1px rgba(0, 0, 0, 0.04);
  --stc-shadow-hover: 0 4px 6px -1px rgba(0, 0, 0, 0.07), 0 2px 4px -2px rgba(0, 0, 0, 0.04);
}

/* ---------- Dashboard rhythm ---------- */

.stc-dash > .row + .row {
  margin-top: 0.75rem;
}

/* Bottom padding matched to the left/right gutter (.container-fluid's own
   0.75rem/12px), instead of the larger 7rem this used to carry to clear the
   floating "Tutorial Video" button -- clearance for that button is handled by
   .stc-cta-actions' margin-right instead (see below), so this no longer needs
   to be oversized on its own. */
.stc-dash {
  padding-bottom: 0.75rem;
}

/* Nexus map / Tax Liability split: 70/30, not a stock Bootstrap fraction
   (8/4 is 66/33, 9/3 is 75/25), so it is expressed directly as flex-basis
   instead of a col-lg-* class. col-12 (kept in the markup) already carries the
   .row gutter's padding, so overriding just flex-basis/max-width here does not
   disturb that. Below lg both stack full width, same as every other col-12. */
@media (min-width: 992px) {
  .stc-map-col {
    flex: 0 0 70%;
    max-width: 70%;
  }

  .stc-liability-col {
    flex: 0 0 30%;
    max-width: 30%;
  }
}

/* style.css puts a 0.7rem grid gap between the sidebar and main-content
   columns (.container-wrapper), which reads as a stray blank gutter running
   the full height of the page rather than the flush, border-only seam in the
   reference. App-wide: this is shell chrome shared by every authenticated
   page, not something to fork per-page. */
.container-wrapper {
  gap: 0;
}

/* Top bar: white band with a hairline under it, like the rest of the surfaces.
   Fixed to the same 4rem height as .sidebar-left-main .top (below) so the two
   border-bottoms sit on the same line and read as one continuous divider. */
.stc-topbar {
  height: 4rem;
  background: #ffffff;
  border-bottom: 1px solid var(--stc-border);
  margin-bottom: 1.25rem;
  padding: 0 1.25rem;
}

/* Legacy pages wrap their content in <main class="main-content p-2">; that
   padding pushes the topbar in from the edges, breaking the flush seam the
   home page has (its <main> carries no padding) and misaligning the divider
   with the sidebar's .top border. Cancel just the topbar's offset so every
   page lines up the same, without touching the p-2 spacing further down. */
.main-content.p-2 .main-sec > .stc-topbar {
  margin-left: -0.5rem;
  margin-right: -0.5rem;
  margin-top: -0.5rem;
  width: calc(100% + 1rem);
}

.stc-topbar .company-name-sec {
  justify-content: center;
}

.stc-topbar h1.heading-2 {
  font-size: 14px;
  font-weight: 700;
  line-height: 1.3;
}

.stc-topbar .date {
  font-size: 12px;
  color: var(--stc-muted);
}

/* ---------- Metric cards (Revenue / Nexus in States / Transactions) ---------- */

.stc-metric-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: #ffffff;
  border: 1px solid var(--stc-border);
  border-radius: var(--stc-radius);
  box-shadow: var(--stc-shadow);
  padding: 1.25rem;
  transition: box-shadow 0.15s ease, border-color 0.15s ease;
}

.stc-metric-card:hover {
  box-shadow: var(--stc-shadow-hover);
  border-color: var(--stc-border-hover);
}

.stc-metric-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.85rem;
}

.stc-metric-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--stc-muted);
  font-family: var(--ff-accent-medium);
}

.stc-metric-icon {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.15s ease;
}

.stc-metric-card:hover .stc-metric-icon {
  transform: scale(1.05);
}

.stc-metric-icon svg {
  width: 18px;
  height: 18px;
}

.stc-metric-icon--brand {
  background: var(--clr-primary-light);
  color: var(--clr-primary-dark);
}

.stc-metric-icon--sky {
  background: #e0f2fe;
  color: #0284c7;
}

.stc-metric-icon--violet {
  background: #f3e8ff;
  color: #7e22ce;
}

.stc-metric-figure {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
}

.stc-metric-card .stc-metric-value {
  display: block;
  font-size: 1.75rem;
  line-height: 1.15;
  font-weight: 700;
  color: var(--stc-heading);
  font-family: var(--ff-heading-semibold);
  font-variant-numeric: tabular-nums;
}

.stc-metric-suffix {
  font-size: var(--fs-12);
  font-weight: 500;
  color: var(--stc-muted);
}

.stc-metric-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

.stc-metric-split > div + div {
  border-left: 1px solid var(--stc-border-soft);
  padding-left: 1rem;
}

.stc-metric-sublabel {
  display: block;
  margin-top: 0.15rem;
  font-size: var(--fs-12);
  font-weight: 500;
  color: var(--stc-muted);
}

.stc-metric-foot {
  display: flex;
  align-items: flex-start;
  gap: 0.4rem;
  margin-top: auto;
  padding-top: 0.85rem;
  border-top: 1px solid var(--stc-border-soft);
  font-size: var(--fs-12);
  line-height: 1.5;
  color: var(--stc-muted);
}

.stc-metric-foot > span {
  min-width: 0;
}

.stc-metric-foot--warn {
  color: #92400e;
}

.stc-metric-foot--warn b {
  color: #b45309;
}

.stc-foot-icon {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  margin-top: 2px;
}

.stc-foot-icon--brand { color: var(--clr-primary-dark); }
.stc-foot-icon--sky { color: #0ea5e9; }
.stc-foot-icon--violet { color: #a855f7; }
.stc-foot-icon--warn { color: #f59e0b; }
.stc-foot-icon--error { color: #ef1b1b; }

/* ---------- Connectivity footers (#230) ----------
   The overview cards' footers report connectivity instead of static copy:
   sync state, monitored states, and the data source + integration grid. */

.stc-metric-foot--error {
  color: #9f1239;
}

.stc-metric-foot--error b {
  color: #be123c;
}

.stc-foot-strong {
  color: var(--stc-heading);
  font-weight: 700;
}

.stc-foot-link {
  color: var(--clr-primary-hover);
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}

.stc-foot-link:hover {
  color: #235B2C;
  text-decoration: underline;
}

.stc-metric-foot--sources {
  flex-direction: column;
  gap: 0.5rem;
}

.stc-source-line {
  display: flex;
  align-items: flex-start;
  gap: 0.4rem;
  min-width: 0;
}

.stc-int-row {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  width: 100%;
  min-width: 0;
}

/* Sideways scroll so the row keeps working as connectors are added; the
   right edge fades out to show there is more. Thin scrollbar, no snap-jank. */
.stc-int-scroll {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  gap: 0.35rem;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  padding: 2px 1.25rem 4px 2px;
  scrollbar-width: thin;
  scrollbar-color: var(--stc-border) transparent;
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 1.5rem), transparent);
  mask-image: linear-gradient(to right, #000 calc(100% - 1.5rem), transparent);
}

.stc-int-scroll::-webkit-scrollbar { height: 4px; }
.stc-int-scroll::-webkit-scrollbar-thumb { background: var(--stc-border); border-radius: 999px; }

.stc-int-chip {
  position: relative;
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid var(--stc-border);
  border-radius: 8px;
  background: #ffffff;
  cursor: pointer;
  scroll-snap-align: start;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, opacity 0.15s ease, filter 0.15s ease;
}

.stc-int-chip:hover,
.stc-int-chip:focus-visible {
  border-color: var(--clr-primary-border);
  box-shadow: 0 0 0 3px rgba(70, 155, 46, 0.25);
  outline: none;
}

.stc-int-logo {
  width: 18px;
  height: 18px;
  object-fit: contain;
}

.stc-int-chip--wide {
  width: auto;
  min-width: 32px;
  padding: 0 0.45rem;
}

.stc-int-chip--wide .stc-int-logo {
  width: auto;
  height: 14px;
  max-width: 56px;
}

.stc-int-logo--icon {
  color: var(--stc-heading-soft);
}

.stc-int-dot {
  position: absolute;
  top: -3px;
  right: -3px;
  width: 9px;
  height: 9px;
  border: 2px solid #ffffff;
  border-radius: 50%;
  background: transparent;
}

.stc-int-chip.is-on {
  border-color: var(--clr-primary-border);
  background: var(--clr-primary-light);
}

.stc-int-chip.is-on .stc-int-dot {
  background: #469B2E;
}

.stc-int-chip.is-failed {
  border-color: #fecdd3;
  background: #fff1f2;
}

.stc-int-chip.is-failed .stc-int-dot {
  background: #ef1b1b;
}

/* Not connected: visible but greyed, like the other not-owned actions. */
.stc-int-chip.is-off .stc-int-logo {
  filter: grayscale(1);
  opacity: 0.5;
}

.stc-int-chip.is-off:hover .stc-int-logo,
.stc-int-chip.is-off:focus-visible .stc-int-logo {
  filter: none;
  opacity: 1;
}

.stc-int-manage {
  flex: 0 0 auto;
  font-size: var(--fs-12);
}

/* ---------- Panel cards (map / liability) ---------- */

.stc-panel-card {
  background: #ffffff;
  border: 1px solid var(--stc-border);
  border-radius: var(--stc-radius);
  box-shadow: var(--stc-shadow);
}

.stc-panel-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.25rem 1.25rem 0;
}

.stc-panel-card .stc-panel-title {
  margin: 0;
  font-size: 1rem;
  font-weight: 700;
  color: var(--stc-heading);
  font-family: var(--ff-heading-semibold);
}

.stc-panel-sub {
  margin: 0.2rem 0 0;
  font-size: var(--fs-12);
  color: var(--stc-muted);
}

.stc-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  flex-shrink: 0;
  padding: 0.3rem 0.6rem;
  border: 1px solid var(--stc-border);
  border-radius: 8px;
  background: var(--stc-surface);
  color: var(--stc-heading-soft);
  font-size: var(--fs-12);
  font-weight: 600;
}

.stc-chip svg {
  width: 14px;
  height: 14px;
  color: var(--stc-muted);
}

.stc-head-icon {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: var(--stc-border-soft);
  color: var(--stc-heading-soft);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.stc-head-icon svg {
  width: 16px;
  height: 16px;
}

.stc-inline-icon {
  width: 18px;
  height: 18px;
  color: var(--clr-primary-dark);
  flex-shrink: 0;
}

/* ---------- Nexus map card ---------- */

/* .area-chart pins height:400px and a large heading font on every descendant;
   both fight the new layout, so they are reset for this card only. */
.stc-map-card.area-chart {
  height: 100%;
  color: inherit;
  font-size: inherit;
  font-family: inherit;
  padding-bottom: 1.25rem;
}

/* The surface is #map-container, and style.css sets `#map-container{width:100%}`.
   An ID beats a class, so the box kept the card's full width and the side
   margins pushed it ~19px past the card's right edge instead of insetting it.
   Selector carries the ID so `width:auto` actually wins. */
/* Map and legend/disclaimer stacked in one column, full width. Height-driven,
   not width-driven: the map used to be sized from the card's width with a
   fixed aspect-ratio, which meant the wider the screen the TALLER it got -- on
   a 1920x940 screen the card alone ran 722px and pushed the legend, disclaimer
   and CTA off the fold. Sizing from the viewport height instead is the only
   way the whole dashboard clears the fold on any monitor. aspect-ratio makes
   the box hug the map it holds, so the bordered surface does not become a wide
   empty frame around a small map; margin-inline auto centres what is left
   over in the card. */
/* Map + aside row (~75/25). See the markup comment in dashboard_new.html for
   why the legend and the disclaimer moved out from under the map. */
.stc-map-card .stc-map-body {
  /* A grid, not a flex row (#230): the aside's three cards are placed on
     their own so the Priority Action Items can move under the map on
     mid-width screens (see the 992-1799px rule below) without changing the
     markup map.js depends on. Wide: map on the left spanning three rows,
     legend / action items / disclaimer stacked on the right, the disclaimer
     pinned to the bottom of the map. */
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(228px, 30%, 400px);
  grid-template-rows: auto auto 1fr;
  grid-template-areas:
    "map legend"
    "map actions"
    "map note";
  column-gap: 1rem;
  row-gap: 0.75rem;
  padding: 0.75rem 1.25rem 0;
}

.stc-map-card .stc-map-main { grid-area: map; }
.stc-map-card .stc-legend-card { grid-area: legend; }
.stc-map-card .stc-actions-card { grid-area: actions; }
.stc-map-card .stc-note--aside { grid-area: note; align-self: end; }

/* Mid-width desktops: the map is capped by its column here and ends well
   above the aside, so stacking the action items in the aside too made it
   ~230px taller than the map (1440x900; still ~70-120px at 1600-1680). They take a full-width row under
   map + legend instead, as two cards side by side. */
@media (min-width: 992px) and (max-width: 1799.98px) {
  .stc-map-card .stc-map-body {
    grid-template-rows: auto 1fr auto;
    grid-template-areas:
      "map legend"
      "map note"
      "actions actions";
  }

  .stc-map-card .stc-actions-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* The split is 70/30, not the 75/25 this started as. Widening the aside is
   free on a big screen and costs nothing on a small one, which is exactly what
   is wanted: the map is sized from a viewport-HEIGHT budget (see below), so on
   a wide monitor it stops growing long before it runs out of column and leaves
   a dead gutter beside itself -- ~196px at 1898x943. Taking that gutter for the
   aside spends nothing the map was ever going to use.
   Below ~1520px wide the 30% falls under the 228px floor and the floor wins, so
   the aside stays exactly as it was at 1440 and under, where the map DOES fill
   its column and every px handed to the aside would come straight off the map.
   The wider aside also stops the status pills wrapping their labels. */
.stc-map-aside {
  /* Its children are grid items of .stc-map-body (see above); the 30% /
     228px / 400px sizing lives in that grid's second column now. */
  display: contents;
}

.stc-map-main {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: flex-start;
  justify-content: center;
}

.stc-map-card #map-container.stc-map-surface {
  /* Fill the column, but never past the width that would make the box taller
     than --stc-map-h. width and max-width are the only sized properties;
     height is always derived from whichever of the two wins, so the box keeps
     the map's 940x600 ratio exactly and can never become a wide empty frame
     around a small map -- the failure mode of every earlier attempt here.
     That cap is what keeps this from being width-driven in the way that broke
     the fold before: the map used to be sized from the card's width alone, so
     the wider the monitor the TALLER it got, and on a 1920x940 screen the card
     ran 722px and pushed the CTA off the screen. Capping the width by a vh
     budget means it grows with the column up to the point where it would start
     eating the fold, and no further. */
  width: 100%;
  max-width: calc(var(--stc-map-h) * 940 / 600);
  height: auto;
  aspect-ratio: 940 / 600;
  /* The height ceiling. Deliberately set ABOVE what the map column can use at
     ordinary desktop sizes, so on those the COLUMN is what binds and the map
     fills the space beside the aside instead of stopping short and leaving a
     gutter (~142px at 1898x943, ~67px at 1920x1080, with the budget at 40vh).
     Reviewed Sep 22: filling that gutter was chosen over keeping the dashboard
     in one screen, so the map card now runs the page ~90px past the fold on a
     943px viewport. That is an accepted trade, not an oversight.
     The ceiling still matters at the extremes. It is what stops the old
     failure mode where the map was sized from width alone and so grew TALLER
     the wider the monitor: on an ultrawide the column keeps growing, and
     without this the map would follow it into an absurd height. There, the
     ceiling binds again and the map stops. */
  --stc-map-h: clamp(210px, 52vh, 620px);
  margin: 0;
  padding: 0.75rem;
  background: var(--stc-surface);
  border: 1px solid var(--stc-border-soft);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Two things kept the map small and off-centre:
   1. ScaleRaphael writes inline width:1000px/height:550px/overflow:hidden onto
      #usa-map, so class rules could not resize it.
   2. style.css pins the generated SVG to `width:50%; height:350px`, and
      responsive.css nudges it further with left/transform offsets.
   The SVG carries viewBox="0 0 1000 550", so once those are cleared it scales
   to the container on its own. Overrides are scoped to this card, leaving the
   map on every other dashboard untouched. */
/* #svggroup is Raphael's own wrapper div and has no height of its own, so a
   percentage height on the SVG alone does not resolve -- it falls back to the
   width/height attributes and spills out of the surface. Both boxes have to be
   pinned to the surface for the height to reach the SVG. */
.stc-map-card #usa-map,
.stc-map-card #svggroup {
  width: auto !important;
  height: 100% !important;
  overflow: visible !important;
}

/* Fill the surface and let the viewBox do the scaling. ScaleRaphael keeps
   rewriting width/height on this element, so anything computed from those
   attributes drifts; with width/height at 100% the default
   preserveAspectRatio="xMidYMid meet" fits the 940x600 viewBox into whatever
   box the surface gives it, centred and undistorted, whatever Raphael writes.
   No aspect-ratio here -- the surface already carries it. */
.stc-map-card #svggroup > svg {
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  left: 0 !important;
  top: 0 !important;
  transform: none;
}

/* Legend: absolutely positioned over the map originally, then a footer row
   under it, now its own card at the top of the aside. */
.stc-legend-card {
  padding: 0.75rem 0.85rem;
  border: 1px solid var(--stc-border);
  border-radius: var(--stc-radius);
  background: var(--stc-surface);
}

.stc-legend-title {
  display: block;
  margin: 0 0 0.55rem;
  font-size: var(--fs-12);
  font-weight: 600;
  color: var(--stc-muted);
}

/* Two-up, as marked up in the Sep 22 review. minmax(0, 1fr) rather than 1fr so
   a long label wraps inside its own cell instead of widening the track and
   pushing the grid past the edge of the aside. */
.stc-legend-items {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.4rem;
}

/* In the aside the pills are cells in that grid, not free-floating chips, so
   they fill their track and align on a common left edge. */
.stc-map-aside .stc-legend-pill {
  display: flex;
  width: 100%;
  padding: 0.3rem 0.5rem;
  line-height: 1.25;
}

.stc-map-card .collectinghighlight {
  margin-bottom: 0;
}

.stc-legend-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.25rem 0.6rem;
  border-radius: 999px;
  border: 1px solid transparent;
  font-size: var(--fs-12);
  font-weight: 500;
}

.stc-legend-pill .clr-code-G,
.stc-legend-pill .clr-code-W,
.stc-legend-pill .clr-code-M,
.stc-legend-pill .clr-code-O {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: none;
  flex-shrink: 0;
}

.stc-legend-pill .map-detail {
  margin: 0;
  font-size: var(--fs-12);
}

.stc-legend-pill--rose { background: #fff1f2; color: #9f1239; border-color: #fecdd3; }
.stc-legend-pill--brand { background: var(--clr-primary-light); color: #235b2c; border-color: var(--clr-primary-border); }
.stc-legend-pill--amber { background: #fff7ed; color: #9a3412; border-color: #fed7aa; }
.stc-legend-pill--yellow { background: #fefce8; color: #854d0e; border-color: #fde68a; }

/* ---------- Tax liability card ---------- */

.stc-liability-card.liability-area {
  height: 100%;
  color: inherit;
  font-size: inherit;
  font-family: inherit;
}

.stc-liability-card .liability-box {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding-bottom: 1.25rem;
}

/* .liability-content is pinned to height:322px in style.css; let it size to
   content instead, then grow to fill whatever height the taller map card sets
   so this panel does not end in a block of empty white. */
.stc-exposure {
  height: auto;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin: 1rem 1.25rem 0;
  padding: 1.25rem 1rem;
  background: var(--stc-surface);
  border: 1px solid var(--stc-border-soft);
  border-radius: 12px;
  text-align: center;
}

.stc-exposure-icon {
  width: 40px;
  height: 40px;
  margin: 0 auto 0.5rem;
  border-radius: 50%;
  background: var(--clr-primary-light);
  color: var(--clr-primary-dark);
  display: flex;
  align-items: center;
  justify-content: center;
}

.stc-exposure-icon svg {
  width: 20px;
  height: 20px;
}

.stc-exposure-label {
  margin: 0 0 0.3rem;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--stc-muted);
}

/* map.js writes plain text or nested divs in here; keep it forgiving. */
.stc-exposure-value {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  font-size: 1.6rem;
  line-height: 1.2;
  font-weight: 700;
  color: var(--stc-heading);
  font-family: var(--ff-heading-semibold);
  font-variant-numeric: tabular-nums;
  word-break: break-word;
}

/* Until map.js computes a figure this stays empty. Show a neutral placeholder
   rather than a hard "$0.00", which would assert a liability we have not
   actually calculated yet. */
.stc-exposure-value:empty::after {
  content: "\2014";
  color: var(--stc-muted-2);
  font-weight: 600;
}

.stc-exposure-note {
  margin: 0.45rem 0 0;
  font-size: 11px;
  color: var(--stc-muted);
}

.stc-exposure-actions {
  margin: auto 1.25rem 0;
  padding-top: 1rem;
}

.stc-exposure-actions .stc-btn-primary {
  width: 100%;
}

/* Live State Inspector: populated by map.js (updateStateInspector) whenever a
   state is clicked on the Nexus Checker map. Hidden (d-none) until then. */
.stc-state-inspector {
  margin: 0.75rem 1.25rem 0;
  padding: 0.75rem 0.9rem;
  border: 1px solid var(--stc-border);
  border-radius: 10px;
  background: var(--stc-surface);
}

.stc-state-inspector-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

.stc-state-inspector-status {
  margin-top: 0.4rem;
  padding-top: 0.4rem;
  border-top: 1px solid var(--stc-border-soft);
  font-size: 11px;
  color: var(--stc-muted);
}

.stc-state-inspector-id {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  min-width: 0;
}

.stc-state-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--stc-muted-2);
  flex-shrink: 0;
}

.stc-state-name {
  font-size: 12px;
  font-weight: 700;
  color: var(--stc-heading);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.stc-state-badge {
  font-size: 10px;
  padding: 2px 8px;
  white-space: nowrap;
  flex-shrink: 0;
}

.stc-state-status-text {
  font-weight: 700;
  color: var(--stc-heading-soft);
}

/* ---------- Buttons ---------- */

.stc-btn-primary,
.stc-btn-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  min-width: 0;
  height: auto;
  min-height: 40px;
  padding: 0.6rem 1.1rem;
  border-radius: 10px;
  font-size: var(--fs-13);
  font-weight: 600;
  font-family: var(--ff-accent-medium);
  transition: background-color 0.15s ease, border-color 0.15s ease;
}

.stc-btn-primary {
  border: 1px solid var(--clr-primary-dark);
  background: var(--clr-primary-dark);
  color: #ffffff;
}

.stc-btn-primary:hover {
  background: var(--clr-primary-hover);
  border-color: var(--clr-primary-hover);
  color: #ffffff;
}

.stc-btn-ghost {
  border: 1px solid var(--stc-border-hover);
  background: #ffffff;
  color: var(--stc-heading-soft);
}

.stc-btn-ghost:hover {
  background: var(--stc-surface);
}

.stc-btn-primary svg,
.stc-btn-ghost svg {
  width: 15px;
  height: 15px;
}

.stc-btn-disabled {
  opacity: 0.55;
}

.stc-btn-disabled:disabled,
.stc-btn-disabled[aria-disabled="true"] {
  cursor: not-allowed;
}

/* ---------- Nexus status tones (#230) ----------
   One palette for the Priority Action Items, the liability status cards and
   the "States by Status" modal: the same values as the legend pills above,
   and the dots are the exact fills map.js paints, so all four agree. */
.stc-tone--rose,
.stc-action-item--rose, .stc-status-card--rose, .stc-states-group--rose {
  --tone-bg: #fff1f2; --tone-border: #fecdd3; --tone-text: #9f1239; --tone-dot: #ef1b1b;
}
.stc-tone--amber,
.stc-action-item--amber, .stc-status-card--amber, .stc-states-group--amber {
  --tone-bg: #fff7ed; --tone-border: #fed7aa; --tone-text: #9a3412; --tone-dot: #FF8C00;
}
.stc-tone--yellow,
.stc-action-item--yellow, .stc-status-card--yellow, .stc-states-group--yellow {
  --tone-bg: #fefce8; --tone-border: #fde68a; --tone-text: #854d0e; --tone-dot: #FFC000;
}
.stc-tone--brand,
.stc-action-item--brand, .stc-status-card--brand, .stc-states-group--brand {
  --tone-bg: var(--clr-primary-light); --tone-border: var(--clr-primary-border); --tone-text: #235b2c; --tone-dot: #469B2E;
}

.stc-action-dot,
.stc-status-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
  background: var(--tone-dot);
}

/* ---------- Priority Action Items (map aside) ---------- */

.stc-actions-card {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 0.7rem 0.8rem;
  border: 1px solid var(--stc-border);
  border-radius: var(--stc-radius);
  background: var(--stc-surface);
}

.stc-actions-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

.stc-actions-title {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--stc-muted);
}

.stc-actions-title svg {
  width: 14px;
  height: 14px;
}

.stc-actions-count {
  padding: 0.1rem 0.5rem;
  border-radius: 999px;
  background: #f1f5f9;
  color: var(--stc-heading-soft);
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}

.stc-actions-count.is-clear {
  background: var(--clr-primary-light);
  color: #235b2c;
}

.stc-actions-list {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.stc-action-item {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  padding: 0.5rem 0.65rem;
  border: 1px solid var(--tone-border);
  border-radius: 10px;
  background: var(--tone-bg);
}

.stc-action-head,
.stc-action-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

.stc-action-rank {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 11px;
  font-weight: 700;
  color: var(--tone-text);
}

.stc-action-badge {
  padding: 0.05rem 0.45rem;
  border: 1px solid var(--tone-border);
  border-radius: 6px;
  background: #ffffff;
  color: var(--tone-text);
  font-size: 10px;
  font-weight: 600;
  white-space: nowrap;
}

.stc-action-states {
  color: var(--stc-heading);
  font-size: var(--fs-13);
  font-weight: 700;
  line-height: 1.3;
}

.stc-action-foot {
  color: var(--stc-muted);
  font-size: 11px;
  line-height: 1.4;
}

.stc-action-amount {
  color: var(--tone-text);
  font-weight: 700;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.stc-action-cta,
.stc-actions-more,
.stc-status-all {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 11px;
  font-weight: 600;
  text-decoration: none;
}

.stc-action-cta {
  color: var(--tone-text);
}

.stc-actions-more,
.stc-status-all {
  color: var(--clr-primary-hover);
}

.stc-action-cta:hover,
.stc-actions-more:hover,
.stc-status-all:hover {
  text-decoration: underline;
}

.stc-actions-more svg,
.stc-status-all svg {
  width: 12px;
  height: 12px;
}

/* ---------- Liability status cards ---------- */

.stc-status-cards {
  container-type: inline-size;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin: 0.75rem 1.25rem 0;
}

.stc-status-row {
  flex: 1 1 auto;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.5rem;
}

.stc-status-card {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  min-width: 0;
  padding: 0.6rem 0.65rem;
  border: 1px solid var(--tone-border);
  border-radius: 10px;
  background: var(--tone-bg);
}

.stc-status-card--wide {
  flex: 1 1 auto;
  padding: 0.8rem 0.9rem;
}

.stc-status-head {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  color: var(--tone-text);
  font-size: 10.5px;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.stc-status-body {
  display: flex;
  align-items: baseline;
  gap: 0.3rem;
}

.stc-status-count {
  color: var(--stc-heading);
  font-family: var(--ff-heading-semibold);
  font-size: 1.5rem;
  font-weight: 800;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}

.stc-status-card--wide .stc-status-count {
  font-size: 2rem;
}

.stc-status-unit {
  color: var(--stc-muted-strong);
  font-size: 11px;
}

.stc-status-note {
  color: var(--tone-text);
  font-size: 11px;
  font-weight: 600;
  line-height: 1.3;
}

.stc-status-card--wide .stc-status-note {
  font-size: var(--fs-13);
}

.stc-status-card.is-empty .stc-status-count,
.stc-status-card.is-empty .stc-status-note {
  color: var(--stc-muted-strong);
}

.stc-status-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  margin-top: 0.35rem;
}

.stc-status-chip {
  padding: 0.1rem 0.4rem;
  border: 1px solid var(--tone-border);
  border-radius: 6px;
  background: #ffffff;
  color: var(--tone-text);
  font-size: 10px;
  font-weight: 700;
}

.stc-status-all {
  align-self: flex-start;
  margin: 0.6rem 1.25rem 0;
}

/* The liability column is 30% of the row, so three tiles side by side run out
   of room below ~360px (1440x900: "COLLECTING" clipped). There each of the
   three becomes a one-line row: label on the left, count on the right. */
@container (max-width: 360px) {
  .stc-status-row {
    grid-template-columns: minmax(0, 1fr);
  }

  .stc-status-row .stc-status-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    column-gap: 0.5rem;
    row-gap: 0.1rem;
    padding: 0.45rem 0.65rem;
  }

  .stc-status-row .stc-status-head { grid-column: 1; grid-row: 1; }
  .stc-status-row .stc-status-note { grid-column: 1; grid-row: 2; }
  .stc-status-row .stc-status-body { grid-column: 2; grid-row: 1 / span 2; }

  .stc-status-row .stc-status-count {
    font-size: 1.25rem;
  }
}

/* The exposure box used to be the whole card body, centred in empty space.
   With the status cards under it, it only carries the headline figure. */
/* Three classes so it outranks responsive.css's small-screen
   `.liability-area .liability-content { height: 215px }`, which loads later. */
.stc-liability-card.liability-area .stc-exposure--compact {
  flex: 0 0 auto;
  height: auto;
  padding: 0.7rem 1rem;
}

.stc-exposure--compact .stc-exposure-value {
  font-size: 1.35rem;
}

/* ---------- "States by Status" modal ---------- */

.stc-states-group {
  margin-bottom: 0.75rem;
  border: 1px solid var(--tone-border);
  border-radius: 10px;
  overflow: hidden;
}

.stc-states-group:last-child {
  margin-bottom: 0;
}

.stc-states-group-title {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.5rem 0.75rem;
  background: var(--tone-bg);
  color: var(--tone-text);
  font-size: var(--fs-13);
  font-weight: 700;
}

.stc-states-group-count {
  margin-left: auto;
  font-size: var(--fs-12);
  font-weight: 600;
}

.stc-states-row {
  display: flex;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.45rem 0.75rem;
  border-top: 1px solid var(--stc-border-soft);
  font-size: var(--fs-13);
  color: var(--stc-heading);
}

.stc-states-amount {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* ---------- Disclaimer note ---------- */

.stc-note {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  padding: 1rem 1.1rem;
  border: 1px solid var(--stc-border);
  border-radius: var(--stc-radius);
  background: var(--stc-surface);
  color: var(--stc-muted);
  font-size: var(--fs-13);
  line-height: 1.6;
}

/* Aside variant: sits under the legend card in the map card's aside, so it
   keeps the bordered chrome (it reads as the second card in that column) and
   only tightens the type. Grows to the bottom of the map so the aside ends on
   the same line as the map surface instead of stopping short. */
.stc-note--aside {
  /* Hugs its text. It used to stretch to the bottom of the map, which left up
     to ~145px of empty card inside the border on a tall viewport. */
  flex: 0 0 auto;
  /* Pinned to the bottom of its grid row (align-self: end, above), so its
     bottom edge lines up with the bottom of the map (Sep 23 review, #230). */
  padding: 0.75rem 0.85rem;
  /* 10px fine print (Sep 24, Wes): four lines in the ~270px text column of
     a 1920px screen, and fewer wrapped lines keep the aside from out-growing
     the map on smaller ones (5-6 lines there; the column is narrower). */
  font-size: 0.625rem;
  line-height: 1.45;
}

.stc-note b {
  color: var(--stc-heading);
}

.stc-note-icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  margin-top: 3px;
  color: var(--stc-muted);
}

/* ---------- Membership / upgrade banner ---------- */

.stc-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 0.9rem 1.25rem;
  border: 1px solid var(--clr-primary-border);
  border-radius: 16px;
  background: linear-gradient(90deg, var(--clr-primary-light) 0%, #ffffff 55%, var(--stc-surface) 100%);
  box-shadow: var(--stc-shadow);
}

.stc-cta-body {
  flex: 1 1 420px;
  min-width: 0;
}

/* Deliberately smaller than a panel title: this banner is the last row of the
   fold budget, and its copy is a full sentence that wraps to two lines on
   anything under ~1700px. Every step down here buys the map height. */
.stc-cta-title {
  margin: 0;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.4;
  color: var(--stc-heading);
  font-family: var(--ff-heading-semibold);
}

.stc-cta-name {
  color: var(--clr-primary-dark);
}

.stc-cta-title a {
  color: var(--stc-heading);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.stc-cta-dynamic {
  margin-top: 0.6rem;
  font-size: var(--fs-13);
  line-height: 1.6;
  color: var(--stc-muted);
}

.stc-cta-dynamic:empty {
  margin-top: 0;
}

.stc-cta-dynamic a {
  color: var(--clr-primary-dark);
  font-weight: 600;
}

.stc-cta-sub {
  margin: 0.6rem 0 0;
  font-size: var(--fs-13);
  line-height: 1.6;
  color: var(--stc-muted);
}

.stc-cta-points {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.25rem;
  margin-top: 0.9rem;
}

.stc-cta-point {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: var(--fs-13);
  font-weight: 500;
  color: var(--stc-heading-soft);
}

.stc-cta-point svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  color: var(--clr-primary-dark);
}

.stc-cta-foot {
  margin: 0.9rem 0 0;
  font-size: var(--fs-12);
  color: var(--stc-muted-2);
}

.stc-cta-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
}

.stc-cta-actions a {
  text-decoration: none;
}

/* .video-btn is fixed at bottom:30px/right:30px and measures ~186x46, so it
   lands on this row's right-aligned buttons. The old fix was 7rem of padding
   under .stc-dash, but the dashboard now has to clear the fold in one screen,
   so there is no scroll space left to push the CTA out of the way -- the
   actions reserve the button's footprint instead.
   lg+ only: below that these go full-width on their own row (see the narrow
   screens block) and the button clears them already. */
@media (min-width: 992px) {
  .stc-cta-actions {
    margin-right: 12rem;
  }
}

/* ---------- Narrow screens ---------- */

/* The top bar is one flex row of four items (hamburger, title, search,
   actions). Below ~lg their intrinsic widths add up to more than the viewport
   and push the page into horizontal scroll, so the search drops to its own
   row and the text blocks are allowed to shrink. */
@media (max-width: 991.98px) {
  /* The fixed 4rem height above assumes a single row; once the search box
     wraps to its own row below, the bar needs to grow to fit both rows. */
  .stc-topbar {
    height: auto;
    flex-wrap: wrap;
    row-gap: 0.5rem;
    padding-top: 0.6rem;
    padding-bottom: 0.6rem;
  }

  .stc-topbar .company-name-sec {
    min-width: 0;
  }

  .stc-topbar .search-box {
    order: 3;
    flex: 1 1 100%;
  }

  /* This media block sits above the base .stc-search-box rule further down
     the file; same selector, same specificity, so without !important the
     later base rule would silently win here too and this override would be
     dead code even while the media query is active. */
  .stc-search-box input[type="search"] {
    width: 100% !important;
  }

  .stc-header-actions {
    margin-left: auto;
  }

  .stc-cta-actions {
    width: 100%;
  }

  .stc-cta-actions a,
  .stc-cta-actions .stc-btn-primary,
  .stc-cta-actions .stc-btn-ghost {
    width: 100%;
  }
}

/* ---------- Top header: search bar, icon-button group, avatar, drawer trigger ---------- */

.stc-search-box input[type="search"] {
  height: 36px;
  width: 300px;
  max-width: 100%;
  background: #ffffff;
  border: 1px solid var(--stc-border);
  border-radius: 8px;
  padding: 0 12px 0 34px;
  font-size: 12px;
  color: var(--clr-text-dark);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

/* style.css sets .search-input::placeholder to 18px (var(--fs-18)) on its
   own, separately from the input's own font-size -- that's what was making
   the placeholder text oversized and clipped regardless of the input rule
   above. */
.stc-search-box input[type="search"]::placeholder {
  font-size: 12px;
}

.stc-search-box input[type="search"]:focus,
.stc-search-box input[type="search"]:focus-visible {
  outline: none;
  border-color: var(--clr-primary-dark);
  box-shadow: 0 0 0 3px rgba(70, 155, 46, 0.25);
}

.stc-search-box .suggestions-box {
  border-color: var(--stc-border);
  border-radius: 10px;
  margin-top: 4px;
  box-shadow: var(--stc-shadow-hover);
}

.stc-search-icon {
  position: absolute;
  left: 11px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--clr-text-muted);
  display: flex;
  pointer-events: none;
  z-index: 1;
}

.stc-search-icon svg {
  width: 14px;
  height: 14px;
}

.stc-header-actions {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}

.stc-btn-ghost-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  border-radius: 8px;
  border: 1px solid var(--stc-border);
  background: #ffffff;
  box-shadow: var(--stc-shadow);
  color: var(--clr-text-muted);
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.stc-btn-ghost-icon:hover {
  background: var(--clr-primary-light);
  border-color: var(--clr-primary-border);
  color: var(--clr-primary-dark);
  text-decoration: none;
}

.stc-btn-ghost-icon svg {
  width: 16px;
  height: 16px;
}

/* box-sizing is border-box, so the 2px ring eats into the box on all sides:
   at 16px tall that left only 12px of content height for a 16px line-height
   to sit in, clipping the digit. 20px tall leaves a full 16px inside the ring
   for the text to actually render in. */
.stc-icon-badge {
  position: absolute;
  top: -7px;
  right: -7px;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  border-radius: 999px;
  background: #ef4444;
  color: #ffffff;
  font-size: 10px;
  font-weight: 700;
  line-height: 16px;
  text-align: center;
  border: 2px solid #ffffff;
}

.stc-avatar {
  border: 2px solid #ffffff !important;
  outline: 1px solid var(--stc-border);
  box-shadow: var(--stc-shadow);
}

/* Close button for the account drawer (was img.right-sidebar-close-icon, floated
   off the left edge at left:-39px). .right-sidebar sets overflow-y:auto with no
   overflow-x, which per the CSS overflow spec forces overflow-x to compute as
   auto too -- so anything positioned outside its box (like the old floated tab)
   was silently clipped and never actually visible. Placed inside the drawer's
   own bounds instead, as a conventional top-right close button. */
.right-sidebar-close-icon {
  width: 36px;
  height: 36px;
  position: absolute;
  top: 16px;
  right: 16px;
  padding: 0;
  border: none;
  border-radius: 8px;
  background: #ffffff;
  box-shadow: var(--stc-shadow-hover);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--clr-text-muted);
  cursor: pointer;
  z-index: 1;
}

.right-sidebar-close-icon:hover {
  color: var(--clr-primary-dark);
}

.right-sidebar-close-icon svg {
  width: 18px;
  height: 18px;
}

/* Legacy pseudo-element count badges (.fa-solid[data-count]:after and the
   .fa-solid-cart variants) always render, even at data-count="0". Hide the
   zero state -- a badge showing "0" is worse than no badge. */
.fa-solid[data-count="0"]::after,
.fa-solid-cart[data-count="0"]::after,
.fa-solid-cart[data-count="0"]::before {
  display: none;
}

/* ---------- Header: muted inline icons, badge color variants, account trigger ---------- */

.stc-inline-icon-muted {
  width: 16px;
  height: 16px;
  color: var(--clr-text-muted);
  flex-shrink: 0;
}

.stc-icon-badge--success {
  background: var(--clr-primary-dark);
}

.stc-icon-badge--dot {
  min-width: 10px;
  width: 10px;
  height: 10px;
  padding: 0;
  top: -3px;
  right: -3px;
  background: #f59e0b;
  border: 2px solid #ffffff;
}

.stc-avatar-initials {
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  /* Intentional exception to the brand-green rule: preview's emerald user
     identity, kept as-is per explicit request rather than remapped to
     --clr-primary-dark, shared by the header trigger, account dropdown
     header, and Profile Details modal. */
  background: linear-gradient(to top right, #059669, #34d399);
  color: #ffffff;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.02em;
}

/* Account trigger's own status dot -- scoped override so the shared
   .notification-alert (red, used as a generic alert dot on ~19 other pages)
   is untouched everywhere else. */
.stc-account-trigger .notification-alert.stc-status-dot {
  top: auto;
  bottom: 0;
  right: -1px;
  left: auto;
  width: 10px;
  height: 10px;
  background-color: #22c55e;
  border: 2px solid #ffffff;
}

.stc-account-trigger {
  cursor: pointer;
  gap: 0.5rem;
  padding: 4px 10px 4px 4px;
  border-radius: 999px;
  border: 1px solid var(--stc-border);
  background: #ffffff;
  box-shadow: var(--stc-shadow);
  transition: background-color 0.15s ease, border-color 0.15s ease;
}

.stc-account-trigger:hover {
  background: var(--clr-primary-light);
  border-color: var(--clr-primary-border);
}

/* Scoped to the header trigger so the drawer's own 36px profile-img-box
   avatar (a separate, already-established convention) is untouched. */
.stc-account-trigger .stc-avatar,
.stc-account-trigger .stc-avatar-initials {
  width: 32px;
  height: 32px;
}

.stc-account-info {
  flex-direction: column;
  line-height: 1.25;
  text-align: left;
}

.stc-account-name {
  font-size: 12px;
  font-weight: 700;
  color: var(--clr-text-dark);
  white-space: nowrap;
}

.stc-account-email {
  font-size: 10px;
  /* --clr-text-muted (#93a3ab) is 2.6:1 on white; --stc-muted clears 4.5:1 (#274). */
  color: var(--stc-muted);
  white-space: nowrap;
}

/* ---------- Account dropdown menu (replaces the old right-side drawer) ---------- */

.stc-account-menu {
  width: 280px;
  margin-top: 0.5rem !important;
  padding: 0.4rem;
  border: 1px solid var(--stc-border);
  border-radius: 16px;
  box-shadow: var(--stc-shadow-hover);
}

.stc-account-menu-header {
  padding: 0.6rem 0.6rem 0.7rem;
  margin-bottom: 0.25rem;
  border-bottom: 1px solid var(--stc-border-soft);
}

.stc-account-menu-header .stc-avatar,
.stc-account-menu-header .stc-avatar-initials {
  width: 32px;
  height: 32px;
}

.stc-account-menu-name {
  font-size: 12px;
  font-weight: 700;
  color: var(--stc-heading);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.stc-account-menu-email {
  font-size: 11px;
  color: var(--stc-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.stc-account-menu-status {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-top: 0.6rem;
  padding-top: 0.5rem;
  border-top: 1px solid var(--stc-border-soft);
  font-size: 10px;
  color: var(--stc-muted);
}

.stc-account-menu-status strong {
  color: var(--stc-heading-soft);
  font-weight: 600;
}

.stc-role-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
  background: var(--clr-primary-light);
  color: var(--clr-primary-dark);
  font-weight: 700;
}

.stc-role-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--clr-primary-dark);
}

.stc-account-menu .stc-account-menu-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.55rem 0.6rem;
  border-radius: 10px;
  font-size: 13px;
  color: var(--stc-heading-soft);
}

.stc-account-menu .stc-account-menu-item .stc-inline-icon {
  color: var(--stc-muted);
  width: 16px;
  height: 16px;
}

.stc-account-menu .stc-account-menu-item:hover,
.stc-account-menu .stc-account-menu-item:focus {
  background: var(--stc-surface);
  color: var(--stc-heading);
}

.stc-account-menu .stc-account-menu-item:hover .stc-inline-icon {
  color: var(--clr-primary-dark);
}

.stc-checklist-badge {
  font-size: 10px;
  font-weight: 700;
  padding: 0.1rem 0.45rem;
  border-radius: 999px;
  background: #fef3c7;
  color: #92400e;
}

.stc-account-menu .dropdown-divider {
  margin: 0.35rem 0.2rem;
  border-color: var(--stc-border-soft);
}

.stc-account-menu .stc-account-menu-item--danger {
  color: #dc2626;
}

.stc-account-menu .stc-account-menu-item--danger .stc-inline-icon {
  color: #dc2626;
}

.stc-account-menu .stc-account-menu-item--danger:hover {
  background: #fef2f2;
  color: #b91c1c;
}

/* ---------- Notifications dropdown (replaces the direct link to
   user_notifications.html; that page stays as a legacy fallback, linked
   from the footer below) ---------- */

.stc-notif-menu {
  width: 340px;
  margin-top: 0.5rem !important;
  padding: 0;
  border: 1px solid var(--stc-border);
  border-radius: 16px;
  box-shadow: var(--stc-shadow-hover);
  overflow: hidden;
}

.stc-notif-menu-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.7rem 0.85rem;
  border-bottom: 1px solid var(--stc-border-soft);
  font-size: 13px;
  font-weight: 700;
  color: var(--stc-heading);
}

.stc-notif-mark-all {
  border: none;
  background: none;
  padding: 0;
  font-size: 11px;
  font-weight: 600;
  color: var(--clr-primary-dark);
  cursor: pointer;
}

.stc-notif-mark-all:hover {
  text-decoration: underline;
}

.stc-notif-list {
  max-height: 340px;
  overflow-y: auto;
}

.stc-notif-item {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  padding: 0.65rem 0.85rem;
  border-bottom: 1px solid var(--stc-border-soft);
  text-decoration: none;
  color: inherit;
  transition: background-color 0.15s ease;
}

.stc-notif-item:last-child {
  border-bottom: none;
}

.stc-notif-item:hover {
  background: var(--stc-surface);
}

.stc-notif-dot {
  flex-shrink: 0;
  width: 8px;
  height: 8px;
  margin-top: 0.4rem;
  border-radius: 50%;
  background: var(--clr-primary-dark);
}

.stc-notif-body {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 0;
}

.stc-notif-message {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--stc-heading-soft);
  line-height: 1.35;
}

.stc-notif-time {
  font-size: 10.5px;
  color: var(--stc-muted);
}

.stc-notif-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  padding: 2rem 1rem;
  color: var(--stc-muted);
  font-size: 12px;
}

.stc-notif-empty svg {
  width: 24px;
  height: 24px;
}

.stc-notif-menu-footer {
  padding: 0.55rem 0.85rem;
  text-align: center;
  border-top: 1px solid var(--stc-border-soft);
}

.stc-notif-menu-footer a {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--clr-primary-dark);
  text-decoration: none;
}

.stc-notif-menu-footer a:hover {
  text-decoration: underline;
}

/* ---------- Left sidebar (navbar.html) ----------
   The <a class="sidebar-list"> items are direct children of .sidebar, and
   several legacy rules in style.css depend on that exact flatness:
     aside>.sidebar>a:nth-child(1)         -- colors the first link
     aside>.sidebar>a:nth-last-child(-n+7) -- colors the last 7 (GENERAL block)
     .sidebar a:nth-last-child(3)          -- margin-top:auto, pins GENERAL to
                                              the bottom via flex
   All three only care about position among <a> siblings, counted from either
   end. New section-label <div>s (non-<a>) were inserted near the top only, so
   the nth-last-child(-n+7)/(3) tail-counts are unaffected; nth-child(1)'s
   color is overridden below anyway. No wrapping <div>/<nav> was introduced
   around the links themselves -- that would break the ">" child combinator
   in all three rules. */

/* Full-height vertical seam between the sidebar and main content -- the
   .container-wrapper grid gap that used to separate them was removed
   (see .container-wrapper below), so this is now the only divider there. */
.sidebar-left-main {
  border-right: 1px solid var(--stc-border);
}

/* Matches .stc-topbar's height exactly (4rem) so the two border-bottoms
   line up into one continuous divider instead of stepping at the seam. */
.sidebar-left-main .top {
  height: 4rem;
  padding: 0 1.25rem;
  margin: 0;
  border-bottom: 1px solid var(--stc-border);
}

.sidebar-left-main .logo-text {
  font-size: var(--fs-16);
  font-weight: 700;
  color: var(--stc-heading);
}

.sidebar-left-main .sidebar {
  padding: 0.75rem 0.75rem 1rem;
  gap: 0.15rem;
}

/* Messages/Notifications were removed from the GENERAL block, which shortened
   it from 6 links to 4. `.sidebar a:nth-last-child(3)` (style.css) counts
   from the tail, so it now lands on Documents instead of Messages, pushing
   the wrong link down via margin-top:auto and splitting GENERAL apart.
   Neutralize it -- the denser new link styling already fills most of the
   90vh column, so nothing needs to be auto-pushed to the bottom anymore. */
.sidebar-left-main .sidebar-list.stc-nav-link:nth-last-child(3) {
  margin-top: 0;
}

.stc-nav-section-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0.9rem 0.4rem 0.4rem;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--stc-muted); /* #64748b: 4.8:1 on white (muted-2 was 2.6:1) */
  font-family: var(--ff-accent-medium);
}

.sidebar-left-main .genral.stc-nav-section-label {
  margin-top: 1.1rem;
}

.stc-nav-count {
  font-size: 10px;
  font-weight: 700;
  font-family: var(--ff-accent-medium);
  color: var(--stc-muted);
  background: var(--stc-border-soft);
  border-radius: 6px;
  padding: 0.1rem 0.4rem;
}

/* Overrides aside>.sidebar>a (specificity 0,2,0 vs 0,1,1): rounded pill link,
   muted icon/text by default, brand tint on hover. */
.sidebar-left-main .sidebar-list.stc-nav-link {
  border-radius: 8px;
  height: auto;
  padding: 0.55rem 0.6rem;
  margin: 0.05rem 0;
  color: var(--stc-heading-soft);
}

.sidebar-left-main .sidebar-list.stc-nav-link:hover {
  background: var(--stc-border-soft);
  color: var(--stc-heading);
}

/* Beats .sidebar>a.active (0,2,1) with a 3-class selector (0,3,0), keeping
   the light-tint/dark-green look already in effect (that rule wins over
   .sidebar-list.active's dark-green/white today, so this preserves current
   behavior rather than changing it). */
.sidebar-left-main .sidebar-list.stc-nav-link.active {
  background: var(--clr-primary-light);
  color: #235B2C !important; /* deep contrast text on the green tint; brand green is 3.1:1 */
  font-weight: 600;
}

.sidebar-left-main .sidebar-list.stc-nav-link.active .stc-nav-icon {
  color: var(--clr-primary-dark);
}

.sidebar-left-main .sidebar-list.stc-nav-link.disable {
  color: var(--stc-muted); /* readable; the lock icon still marks it locked */
  cursor: not-allowed;
}

.sidebar-left-main .sidebar-list.stc-nav-link.disable:hover {
  background: transparent;
  color: var(--stc-muted);
}

.stc-nav-icon {
  width: 17px;
  height: 17px;
  flex-shrink: 0;
  color: var(--stc-muted);
}

.sidebar-left-main .sidebar-list.stc-nav-link:hover .stc-nav-icon {
  color: var(--stc-heading-soft);
}

.sidebar-left-main .sidebar-list.stc-nav-link.disable .stc-nav-icon {
  color: var(--stc-muted-2);
}

.stc-nav-label {
  font-size: var(--fs-13);
  font-weight: 500;
}

.stc-nav-lock,
.stc-nav-unlock {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

.stc-nav-lock {
  color: var(--stc-muted-2);
}

.stc-nav-unlock {
  color: var(--clr-primary-dark);
}

.stc-nav-badge {
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: #ef4444;
  color: #ffffff;
  font-size: 10px;
  font-weight: 700;
  line-height: 18px;
  text-align: center;
  font-family: var(--ff-accent-medium);
}

/* ---------- User Profile Details modal ---------- */

.stc-profile-modal-dialog {
  max-width: 700px;
}

.stc-profile-modal-content {
  border: 1px solid var(--stc-border);
  border-radius: 18px;
  box-shadow: var(--stc-shadow-hover);
}

.stc-profile-modal-head {
  padding: 1rem 1.25rem;
  background: var(--stc-surface);
  border-bottom: 1px solid var(--stc-border-soft);
}

.stc-profile-modal-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--stc-heading);
  margin: 0;
}

.stc-profile-modal-body {
  padding: 1.25rem;
}

.stc-profile-card--avatar {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 1.25rem 1rem;
  border: 1px solid var(--stc-border-soft);
  border-radius: 14px;
  background: var(--stc-surface);
}

.stc-profile-card--avatar .stc-profile-avatar,
.stc-profile-card--avatar .stc-profile-avatar-img {
  width: 80px;
  height: 80px;
  font-size: 24px;
  box-shadow: var(--stc-shadow-hover);
  border: 3px solid #ffffff;
  outline: 1px solid var(--stc-border);
}

.stc-profile-card--avatar .stc-profile-avatar-img {
  object-fit: cover;
  border-radius: 50%;
}

.stc-profile-name {
  margin: 0.75rem 0 0;
  font-size: 14px;
  font-weight: 700;
  color: var(--stc-heading);
}

.stc-profile-role-badge {
  display: inline-block;
  margin-top: 0.35rem;
  padding: 2px 10px;
  border-radius: 999px;
  background: #d1fae5;
  color: #065f46;
  font-size: 11px;
  font-weight: 700;
}

.stc-profile-member-since {
  margin: 0.5rem 0 0;
  font-size: 11px;
  color: var(--stc-muted);
}

.stc-profile-detail-card {
  padding: 1rem;
  border: 1px solid var(--stc-border);
  border-radius: 14px;
  background: #ffffff;
}

.stc-profile-detail-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 0.6rem;
  margin-bottom: 0.75rem;
  border-bottom: 1px solid var(--stc-border-soft);
}

.stc-profile-detail-head h5 {
  margin: 0;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--stc-heading-soft);
}

.stc-profile-edit-link {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  cursor: pointer;
  color: #059669;
  font-size: 11px;
  font-weight: 700;
}

.stc-profile-edit-link:hover {
  color: #047857;
}

.stc-profile-edit-link .stc-inline-icon {
  width: 13px;
  height: 13px;
}

.stc-profile-detail-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.75rem 1rem;
}

.stc-profile-detail-span-2 {
  grid-column: span 2;
}

.stc-profile-detail-label {
  display: block;
  font-size: 11px;
  color: var(--stc-muted-2);
}

.stc-profile-detail-value {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: var(--stc-heading-soft);
  word-break: break-word;
}

.stc-profile-modal-footer {
  padding: 0.85rem 1.25rem;
  background: var(--stc-surface);
  border-top: 1px solid var(--stc-border-soft);
}

/* ---------- Settings page (Notification / Subscription / Manage Password) ---------- */

.stc-settings-wrap {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  max-width: 780px;
  margin: 0 auto;
}

.stc-settings-card-head {
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
  padding: 1.1rem 1.25rem;
  background: var(--stc-surface);
  border-bottom: 2px solid var(--stc-border-hover);
  border-radius: var(--stc-radius) var(--stc-radius) 0 0;
}

.stc-settings-card-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: var(--clr-primary-light);
  color: var(--clr-primary-dark);
}

.stc-settings-card-icon svg {
  width: 18px;
  height: 18px;
}

.stc-settings-card-title {
  margin: 0;
  font-size: 1rem;
  font-weight: 700;
  color: var(--stc-heading);
  font-family: var(--ff-heading-semibold);
}

.stc-settings-card-sub {
  margin: 0.15rem 0 0;
  font-size: var(--fs-12);
  color: var(--stc-muted);
}

.stc-settings-list {
  padding-top: 0.15rem;
}

.stc-settings-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--stc-border-soft);
}

.stc-settings-row:last-child {
  border-bottom: none;
}

.stc-settings-row-info {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-width: 0;
}

.stc-settings-row-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 9px;
  background: var(--stc-surface);
  border: 1px solid var(--stc-border);
  color: var(--stc-muted);
}

.stc-settings-row-icon svg {
  width: 15px;
  height: 15px;
}

.stc-settings-row-label {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--stc-heading-soft);
}

.stc-settings-row-sub {
  margin: 0.1rem 0 0;
  font-size: 12px;
  color: var(--stc-muted);
}

.stc-settings-btn {
  flex-shrink: 0;
  white-space: nowrap;
}

.stc-settings-btn--danger {
  border-color: #fecaca;
  color: #b91c1c;
}

.stc-settings-btn--danger:hover {
  background: #fef2f2;
  border-color: #fecaca;
  color: #b91c1c;
}

.stc-settings-switch {
  flex-shrink: 0;
  margin: 0;
  min-height: 0;
}

.stc-password-modal-dialog {
  max-width: 440px;
}

/* ---------- Subscription history dialog ---------- */

/* Wider than the password dialog because this one holds a five-column table;
   440px would force every cell to wrap. Still capped so it reads as a dialog
   rather than a full page. */
.stc-history-modal-dialog {
  max-width: 760px;
}

/* Bootstrap's .modal-dialog-scrollable (on the dialog in the markup) is what
   caps the dialog to the viewport and makes THIS element the scrolling box,
   so the header and its close button stay pinned while the rows move. Padding
   is dropped to 0 so the sticky table header below can sit flush against the
   top edge with nothing showing above it as the list scrolls. */
.stc-history-modal-body.stc-history-modal-body {
  padding: 0;
}

/* Horizontal escape hatch: on a narrow screen the table keeps its min-width
   and this scrolls sideways, instead of the cells crushing into each other. */
.stc-history-scroll {
  overflow-x: auto;
}

.stc-history-table {
  width: 100%;
  min-width: 620px;
  border-collapse: collapse;
}

.stc-history-table th {
  position: sticky;
  top: 0;
  z-index: 1;
  padding: 0.75rem 1.25rem;
  background: var(--stc-surface);
  border-bottom: 1px solid var(--stc-border);
  font-size: var(--fs-12);
  font-weight: 600;
  color: var(--stc-muted);
  text-align: left;
  white-space: nowrap;
}

.stc-history-table td {
  padding: 0.85rem 1.25rem;
  border-bottom: 1px solid var(--stc-border-soft);
  vertical-align: middle;
}

/* No trailing hairline under the last invoice -- it would read as a divider
   against the dialog's bottom edge. */
.stc-history-table tbody tr:last-child td {
  border-bottom: 0;
}

.stc-history-method {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.stc-history-card-icon {
  width: 32px;
  height: auto;
  flex-shrink: 0;
}

.stc-history-method-title {
  margin: 0;
  font-size: var(--fs-13);
  font-weight: 600;
  color: var(--stc-heading);
}

.stc-history-method-sub {
  margin: 0;
  font-size: var(--fs-12);
  color: var(--stc-muted);
  white-space: nowrap;
}

.stc-history-cell {
  font-size: var(--fs-13);
  color: var(--stc-heading-soft);
  white-space: nowrap;
}

.stc-history-amount {
  font-weight: 600;
  color: var(--stc-heading);
}

.stc-history-download {
  min-height: 34px;
  padding: 0.4rem 0.8rem;
  white-space: nowrap;
}

.stc-history-download i,
.stc-history-download svg {
  width: 15px;
  height: 15px;
}

.stc-history-empty {
  padding: 2.5rem 1.5rem;
  text-align: center;
}

.stc-history-empty-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin-bottom: 0.75rem;
  border-radius: 50%;
  background: var(--stc-surface);
  color: var(--stc-muted);
}

.stc-history-empty-icon i,
.stc-history-empty-icon svg {
  width: 20px;
  height: 20px;
}

.stc-history-empty-title {
  margin: 0 0 0.25rem;
  font-size: var(--fs-14);
  font-weight: 600;
  color: var(--stc-heading);
}

.stc-history-empty-sub {
  margin: 0;
  font-size: var(--fs-13);
  color: var(--stc-muted);
}

@media (max-width: 576px) {
  .stc-settings-row {
    flex-wrap: wrap;
  }

  .stc-settings-row-info {
    flex: 1 1 100%;
  }
}

/* ============================================================
   Nexus Study card (scoped to .nexus-study-card so the shared
   accordion/checklist classes below are unaffected everywhere
   else they're reused: comp-btn, border-purple, border-btm-dot,
   vda-content-left/right, state-upgrade-info, upgrade-plan-btn,
   date-center, accordion-item/header/body).
   ============================================================ */

.nexus-study-card .accordion-item {
  border: 1px solid var(--stc-border);
  border-radius: var(--stc-radius);
  overflow: hidden;
  box-shadow: var(--stc-shadow);
  background: #fff;
  transition: box-shadow 0.15s ease;
}

.nexus-study-card .accordion-item:hover {
  box-shadow: var(--stc-shadow-hover);
}

.nexus-study-card .accordion-header .accordion-button {
  background: var(--stc-surface);
  border: none;
  border-bottom: 1px solid var(--stc-border);
  border-radius: 0 !important;
  padding: 1.1rem 1.4rem;
}

.nexus-study-card .accordion-header .accordion-button:focus {
  box-shadow: none;
}

.nexus-study-card .nexus-accordion-body {
  border: none;
  padding: 0;
}

.nexus-study-card .accordion-body-row > .col-12 {
  padding: 2.25rem 1.4rem !important;
}

.nexus-study-card .border-btm-dot {
  border-bottom: 1px solid var(--stc-border-soft);
}

.nexus-study-card .vda-content-left {
  gap: 0.85rem;
}

.nexus-study-card .vda-inner-cont {
  font-family: var(--ff-accent-medium);
  color: var(--stc-heading-soft);
  font-size: var(--fs-14);
  margin: 0;
}

.nexus-study-card .css-tooltip-right i {
  color: var(--stc-muted-2);
}

.nexus-row-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 9px;
  background: var(--stc-surface);
  border: 1px solid var(--stc-border);
  color: var(--clr-primary-dark);
  flex-shrink: 0;
}

.nexus-row-icon i,
.nexus-row-icon svg {
  width: 17px;
  height: 17px;
}

.nexus-study-card .comp-btn.border-purple {
  border: 1px solid var(--stc-border);
  color: var(--stc-heading-soft);
  background: #fff;
  border-radius: 999px;
  font-size: var(--fs-13);
  font-family: var(--ff-accent-medium);
  padding: 6px 18px;
  min-width: 110px;
  margin: 0;
  transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}

.nexus-study-card .comp-btn.border-purple:hover {
  border-color: var(--clr-primary-dark);
  color: var(--clr-primary-dark);
  background: var(--clr-primary-light);
}

.nexus-study-card .state-upgrade-info {
  display: inline-flex;
  align-items: center;
  background: var(--clr-primary-light);
  color: var(--clr-primary-hover);
  font-size: var(--fs-12);
  font-family: var(--ff-accent-medium);
  padding: 3px 10px;
  border-radius: 999px;
}

.nexus-study-card .upgrade-plan-btn {
  border-radius: 999px;
  background: var(--clr-primary-dark);
  font-family: var(--ff-accent-medium);
  padding: 3px 12px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08);
  transition: background 0.15s ease;
}

.nexus-study-card .upgrade-plan-btn:hover {
  background: var(--clr-primary-hover);
}

.nexus-study-card .date-center {
  color: var(--clr-primary-hover);
  font-size: var(--fs-12);
  letter-spacing: 0.02em;
  cursor: pointer;
}

.nexus-study-card .nexus-response-card {
  border: 1px solid var(--stc-border);
  border-radius: var(--stc-radius);
  box-shadow: var(--stc-shadow);
  background: #fff;
  padding: 1.1rem 1.4rem;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.75rem;
}

@media (max-width: 576px) {
  .nexus-study-card .accordion-body-row > .col-12 {
    padding: 1.35rem 1rem;
  }

  .nexus-study-card .vda-content-left {
    flex-wrap: wrap;
  }
}

/* ---------- Documents page (scoped to .doc-tree-card / .doc-preview-card) ---------- */

.doc-tree-card {
  background: #ffffff;
  border: 1px solid var(--stc-border);
  border-radius: var(--stc-radius);
  box-shadow: var(--stc-shadow);
  height: auto;
  max-height: calc(100vh - 220px);
  overflow-y: auto;
}

.doc-tree-card .accordion-item {
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--stc-border-soft);
}

.doc-tree-card .accordion-item:last-child {
  border-bottom: none;
}

.doc-tree-card .accordion-header .accordion-button {
  background: transparent;
  border: none;
  border-radius: 0;
  font-family: var(--ff-heading-semibold);
  font-size: var(--fs-16);
  color: var(--stc-heading);
  padding: 0.9rem 0.6rem;
}

.doc-tree-card .accordion-header .accordion-button:focus,
.doc-tree-card .accordion-header .accordion-button:not(.collapsed) {
  box-shadow: none;
}

.doc-tree-chevron {
  width: 15px;
  height: 15px;
  color: var(--stc-muted-2);
  flex-shrink: 0;
}

.doc-tree-chevron-sm {
  width: 13px;
  height: 13px;
}

.doc-tree-card .audit-document-wrap .accordion-button {
  padding: 0.55rem 0.4rem 0.55rem 0.5rem;
  border-radius: 8px;
  transition: background-color 0.15s ease;
}

.doc-tree-card .audit-document-wrap .accordion-button:hover {
  background-color: var(--stc-surface);
}

.doc-tree-card .small-menu-heading {
  font-size: var(--fs-13);
  font-family: var(--ff-accent-medium);
  color: var(--stc-heading-soft);
  text-transform: none;
  letter-spacing: 0.01em;
  line-height: 1.4;
  margin: 0;
}

.doc-tree-card ul.doc-list {
  padding-left: 4px;
}

.doc-tree-card ul.doc-list li {
  color: var(--stc-heading-soft);
  font-family: var(--ff-accent-regular);
  font-size: var(--fs-13);
  border-radius: 8px;
  transition: background-color 0.15s ease;
}

.doc-tree-card ul.doc-list li.record-list:not(.active):hover {
  background-color: var(--stc-surface);
}

.doc-tree-card ul.doc-list li.record-list.active {
  background-color: var(--clr-primary-light);
  padding: 6px 12px 6px 30px;
  border-radius: 8px;
}

.doc-tree-card ul.doc-list li.record-list.active::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 12px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--clr-primary-dark);
  transform: translateY(-50%);
}

.doc-tree-card .document-link {
  font-family: var(--ff-accent-medium);
}

.doc-tree-card .audit-document-wrap .d-flex.border.p-2.rounded.shadow-sm {
  border: 1px solid var(--stc-border) !important;
  border-radius: 10px !important;
  box-shadow: none !important;
  background: #ffffff;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}

.doc-tree-card .audit-document-wrap .d-flex.border.p-2.rounded.shadow-sm:hover {
  border-color: var(--stc-border-hover) !important;
  background: var(--stc-surface);
}

.doc-tree-card .bi-trash {
  color: var(--stc-muted-2);
  transition: color 0.15s ease;
}

.doc-tree-card .bi-trash:hover {
  color: #dc2626;
}

.doc-preview-card {
  background: transparent;
  padding: 1.5rem 0 0;
}

.doc-preview-card .doc-header {
  padding: 0 1.5rem;
}

.doc-preview-card .heading {
  font-family: var(--ff-heading-semibold);
  font-size: 1.35rem;
  color: var(--stc-heading);
  margin: 0;
}

.doc-preview-card .doc-subheading {
  color: var(--stc-muted);
  margin: 0.2rem 0 0;
}

.doc-preview-card .doc-preview-right {
  flex-direction: row;
  align-items: center;
  gap: 0.6rem;
}

.doc-preview-card .doc-preview {
  border-radius: var(--stc-radius);
  background: var(--stc-surface);
  border: 1px dashed var(--stc-border-hover);
  box-shadow: none;
  position: relative;
}

.doc-preview-empty {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  color: var(--stc-muted-2);
  text-align: center;
  padding: 1rem;
}

.doc-preview-empty i,
.doc-preview-empty svg {
  width: 42px;
  height: 42px;
  color: var(--stc-border-hover);
}

.doc-preview-empty p {
  margin: 0;
  font-size: var(--fs-14);
  font-family: var(--ff-accent-medium);
  color: var(--stc-muted);
}

@media (max-width: 576px) {
  .doc-tree-card {
    max-height: none;
  }
}

/* ---------- Tools & Resources page (scoped to .tools-resources-page / .tools-cta-banner) ---------- */

.tools-resources-page > ul.article-tool-tab {
  display: inline-flex;
  gap: 0.3rem;
  padding: 0.3rem;
  background: var(--stc-surface);
  border: 1px solid var(--stc-border);
  border-bottom: 1px solid var(--stc-border);
  border-radius: 999px;
  width: fit-content;
}

.tools-resources-page .tool-tab-item > .nav-link.tool-tab-link {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  color: var(--stc-muted);
  font-family: var(--ff-accent-medium);
  font-size: var(--fs-14);
  padding: 0.55rem 1.15rem;
  border-radius: 999px;
  border: none;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.tools-resources-page .tool-tab-item > .nav-link.tool-tab-link i,
.tools-resources-page .tool-tab-item > .nav-link.tool-tab-link svg {
  width: 15px;
  height: 15px;
}

.tools-resources-page .tool-tab-item > .nav-link.tool-tab-link:hover {
  color: var(--stc-heading-soft);
}

.tools-resources-page .tool-tab-item > .nav-link.tool-tab-link.active {
  background-color: #ffffff;
  color: var(--clr-primary-hover);
  font-family: var(--ff-heading-semibold);
  box-shadow: var(--stc-shadow);
}

.tools-resources-page .row {
  row-gap: 1.5rem;
}

.tools-resources-page .article-card {
  border: 1px solid var(--stc-border) !important;
  box-shadow: var(--stc-shadow) !important;
  border-radius: var(--stc-radius) !important;
  overflow: hidden;
  height: 100%;
  transition: box-shadow 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}

.tools-resources-page .article-card:hover {
  box-shadow: var(--stc-shadow-hover) !important;
  border-color: var(--stc-border-hover) !important;
  transform: translateY(-2px);
}

.tools-resources-page .tools-article-img {
  height: 170px;
}

.tools-resources-page .related-article-card-title {
  font-size: var(--fs-16);
  font-family: var(--ff-heading-semibold);
  color: var(--stc-heading);
}

.tools-resources-page .article-card .card-body p.card-text {
  font-size: var(--fs-13);
  color: var(--stc-muted);
}

.tools-resources-page .show-more {
  font-family: var(--ff-accent-medium);
  color: var(--clr-primary-dark) !important;
  cursor: pointer;
}

.tools-resources-page .article-card .card-body button.article-card-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  width: auto;
  border: none;
  box-shadow: none;
  background: transparent;
  padding: 0;
  color: var(--clr-primary-dark);
  font-family: var(--ff-accent-medium);
  font-size: var(--fs-13);
}

.tools-resources-page .article-card .card-body button.article-card-btn i {
  width: 14px;
  height: 14px;
  transition: transform 0.15s ease;
}

.tools-resources-page .article-card .card-body button.article-card-btn:hover i {
  transform: translateX(3px);
}

.tools-cta-banner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.5rem;
  border-radius: var(--stc-radius);
  border: 1px solid var(--clr-primary-border);
  background-color: #ffffff;
  background-image: linear-gradient(to right, var(--clr-primary-light) 0%, #ffffff 45%);
}

.tools-cta-left {
  display: flex;
  align-items: center;
  gap: 0.9rem;
}

.tools-cta-banner .tools-cta-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  border: 1px solid var(--clr-primary-border);
  border-radius: 10px;
  background-color: #ffffff;
}

.tools-cta-banner .tools-cta-icon i,
.tools-cta-banner .tools-cta-icon svg {
  width: 22px;
  height: 22px;
  color: var(--clr-primary-dark);
}

.tools-cta-title {
  font-family: var(--ff-heading-semibold);
  font-size: var(--fs-15);
  font-weight: 700;
  color: var(--stc-heading);
}

.tools-cta-subtitle {
  font-size: var(--fs-13);
  color: var(--stc-muted);
}

.tools-cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.6rem 1.25rem;
  background-color: var(--clr-primary-dark);
  color: #ffffff !important;
  font-family: var(--ff-accent-medium);
  font-size: var(--fs-13);
  font-weight: 600;
  border-radius: 8px;
  text-decoration: none !important;
  white-space: nowrap;
  transition: background-color 0.15s ease;
}

.tools-cta-btn:hover {
  background-color: var(--clr-primary-hover);
}

.tools-cta-btn i,
.tools-cta-btn svg {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
}

@media (max-width: 576px) {
  .tools-resources-page > ul.article-tool-tab {
    width: 100%;
    justify-content: space-between;
  }

  .tools-resources-page .tool-tab-item > .nav-link.tool-tab-link span,
  .tools-resources-page .tool-tab-item {
    flex: 1 1 auto;
  }
}

/* ---------- Cart page (scoped to .cart-page-modern) ---------- */

.cart-page-modern .cart-card {
  background: #ffffff;
  border: 1px solid var(--stc-border);
  border-radius: var(--stc-radius);
  box-shadow: var(--stc-shadow);
  padding: 10px 14px 14px;
}

.cart-page-modern table.cart-table {
  margin-bottom: 0;
  border-collapse: separate;
  border-spacing: 0 14px;
}

.cart-page-modern .cart-table thead tr th {
  background-color: var(--stc-surface);
  color: var(--stc-muted);
  font-size: var(--fs-12);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  text-align: left;
  border: none;
  padding: 0.75rem 1rem;
}

.susceptible-secs.cart-page-modern .cart-table tbody tr td {
  background: #ffffff;
  border: none;
  padding: 1.1rem 1rem;
  color: var(--stc-heading-soft);
  font-size: var(--fs-14);
  vertical-align: middle;
}

.susceptible-secs.cart-page-modern .cart-table tbody tr:hover td {
  background: var(--stc-surface);
}

.cart-page-modern .cart-price-cell {
  font-weight: 700;
  color: var(--stc-heading);
  font-family: var(--ff-heading-semibold);
}

.cart-page-modern .cart-remove-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  border: 1px solid var(--stc-border-hover);
  background: #ffffff;
  color: var(--stc-muted);
  border-radius: 8px;
  padding: 0.4rem 0.7rem;
  font-size: var(--fs-13);
  font-weight: 600;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.cart-page-modern .cart-remove-btn:hover {
  background: #fdecec;
  border-color: #f3b6b6;
  color: #c0392b;
}

.cart-page-modern .cart-remove-btn svg {
  width: 15px;
  height: 15px;
}

.cart-page-modern .cart-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  padding: 3rem 1rem;
  color: var(--stc-muted);
}

.cart-page-modern .cart-empty-state svg {
  width: 40px;
  height: 40px;
  color: var(--stc-muted-2);
  margin-bottom: 0.3rem;
}

.cart-page-modern .cart-empty-state h3 {
  font-size: var(--fs-18);
  color: var(--stc-heading-soft);
  font-family: var(--ff-heading-semibold);
  margin: 0;
}

.cart-page-modern .cart-empty-state p {
  font-size: var(--fs-14);
  margin: 0;
}

.cart-page-modern .text-total-price {
  display: flex;
  align-items: baseline;
  justify-content: flex-end;
  gap: 0.6rem;
  padding: 1rem 0.25rem 0;
}

.cart-page-modern .text-total-price .cart-total-label {
  font-size: var(--fs-14);
  color: var(--stc-muted);
  font-weight: 600;
}

.cart-page-modern .text-total-price strong {
  font-size: 1.5rem;
  color: var(--stc-heading);
  font-family: var(--ff-heading-semibold);
  margin-bottom: 0;
}

.cart-page-modern .cart-buttons {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.75rem;
}

.cart-page-modern .cart-buttons a.stc-btn-ghost {
  text-decoration: none;
}

@media (max-width: 576px) {
  .cart-page-modern .cart-card {
    overflow-x: auto;
  }

  .cart-page-modern .cart-table {
    min-width: 560px;
  }

  .susceptible-secs.cart-page-modern .cart-table tbody tr td {
    padding: 0.6rem 0.75rem;
  }

  .cart-page-modern .cart-buttons {
    flex-direction: column-reverse;
    align-items: stretch;
  }

  .cart-page-modern .cart-buttons .stc-btn-ghost,
  .cart-page-modern .cart-buttons .stc-btn-primary {
    width: 100%;
  }
}

/* ============================================================
   Shared service-dashboard accordion card (Sales Tax Audit,
   Consulting, Litigation, Registration, Returns, VDA, Challenge
   Assessment). Same treatment as the Nexus Study page's
   .nexus-study-card, generalized into one reusable class so the
   ~7 sibling dashboards don't each need their own copy of this
   block. Scoped to .service-accordion-card so the shared
   accordion/checklist classes it reuses (comp-btn, border-purple,
   border-btm-dot, vda-content-left/right, accordion-item/header/
   body) stay untouched on the ~16 other dashboards that use them.
   ============================================================ */

.service-accordion-card .accordion-item {
  border: 1px solid var(--stc-border);
  border-radius: var(--stc-radius);
  overflow: hidden;
  box-shadow: var(--stc-shadow);
  background: #fff;
  transition: box-shadow 0.15s ease;
}

.service-accordion-card .accordion-item:hover {
  box-shadow: var(--stc-shadow-hover);
}

.service-accordion-card .accordion-header .accordion-button {
  background: var(--stc-surface);
  border: none;
  border-bottom: 1px solid var(--stc-border);
  border-radius: 0 !important;
  padding: 1.1rem 1.4rem;
}

.service-accordion-card .accordion-header .accordion-button:focus {
  box-shadow: none;
}

.service-accordion-card .accordion-body-row > .col-12 {
  padding: 2.25rem 1.4rem !important;
}

.service-accordion-card .border-btm-dot {
  border-bottom: 1px solid var(--stc-border-soft);
}

.service-accordion-card .vda-content-left {
  gap: 0.85rem;
}

.service-accordion-card .vda-inner-cont {
  font-family: var(--ff-accent-medium);
  color: var(--stc-heading-soft);
  font-size: var(--fs-14);
  margin: 0;
}

.service-accordion-card .css-tooltip-right i {
  color: var(--stc-muted-2);
}

.service-row-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 9px;
  background: var(--stc-surface);
  border: 1px solid var(--stc-border);
  color: var(--clr-primary-dark);
  flex-shrink: 0;
}

.service-row-icon i,
.service-row-icon svg {
  width: 17px;
  height: 17px;
}

.service-accordion-card .comp-btn.border-purple {
  border: 1px solid var(--stc-border);
  color: var(--stc-heading-soft);
  background: #fff;
  border-radius: 999px;
  font-size: var(--fs-13);
  font-family: var(--ff-accent-medium);
  padding: 6px 18px;
  min-width: 110px;
  margin: 0;
  transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}

.service-accordion-card .comp-btn.border-purple:hover {
  border-color: var(--clr-primary-dark);
  color: var(--clr-primary-dark);
  background: var(--clr-primary-light);
}

.service-accordion-card .comp-btn.border-gray {
  border: 1px solid var(--stc-border);
  color: var(--stc-muted);
  background: var(--stc-surface);
  border-radius: 999px;
  font-size: var(--fs-13);
  font-family: var(--ff-accent-medium);
  padding: 6px 18px;
  min-width: 110px;
  margin: 0;
  cursor: not-allowed;
}

/* A status with no action behind it is a badge, not a pill: no hover, not
   focusable. Soft / Neutral variants of docs/ui/SHADCN_COMPONENTS.md §7 (#312).
   Same box as the .comp-btn pills beside it so the action column lines up. */
.stc-status-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 18px;
  min-width: 110px;
  border: 1px solid var(--clr-primary-border);
  border-radius: 6px;
  background: var(--clr-primary-light);
  color: #235B2C;
  font-size: var(--fs-13);
  font-family: var(--ff-accent-medium);
  line-height: 1.5;
  white-space: nowrap;
  cursor: default;
}

.stc-status-badge--neutral {
  border-color: var(--stc-border);
  background: var(--stc-border-soft);
  color: var(--stc-muted-strong);
}

.service-accordion-card .state-upgrade-info {
  display: inline-flex;
  align-items: center;
  background: var(--clr-primary-light);
  color: var(--clr-primary-hover);
  font-size: var(--fs-12);
  font-family: var(--ff-accent-medium);
  padding: 3px 10px;
  border-radius: 999px;
}

.service-accordion-card .upgrade-plan-btn {
  border-radius: 999px;
  background: var(--clr-primary-dark);
  font-family: var(--ff-accent-medium);
  padding: 3px 12px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08);
  transition: background 0.15s ease;
}

.service-accordion-card .upgrade-plan-btn:hover {
  background: var(--clr-primary-hover);
}

.service-accordion-card .date-center {
  color: var(--clr-primary-hover);
  font-size: var(--fs-12);
  letter-spacing: 0.02em;
  cursor: pointer;
}

@media (max-width: 576px) {
  .service-accordion-card .accordion-body-row > .col-12 {
    padding: 1.35rem 1rem;
  }

  .service-accordion-card .vda-content-left {
    flex-wrap: wrap;
  }
}

.service-plan-card {
  border-color: var(--stc-border) !important;
  border-radius: var(--stc-radius) !important;
  box-shadow: var(--stc-shadow);
  transition: box-shadow 0.15s ease;
}

.service-plan-card:hover {
  box-shadow: var(--stc-shadow-hover);
}

/* ---------- Sales Tax Consulting dashboard: 2-column booking + agenda ---------- */

.consulting-dashboard-page .stc-consult-grid {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 1.5rem;
  align-items: start;
}

@media (max-width: 900px) {
  .consulting-dashboard-page .stc-consult-grid {
    grid-template-columns: 1fr;
  }
}

.consulting-dashboard-page .stc-session-card {
  background: #ffffff;
  border: 1px solid var(--stc-border);
  border-radius: var(--stc-radius);
  padding: 1.35rem;
  margin-bottom: 1rem;
  box-shadow: var(--stc-shadow);
  transition: box-shadow 0.15s ease, border-color 0.15s ease;
}

.consulting-dashboard-page .stc-session-card:hover {
  border-color: var(--clr-primary-border);
  box-shadow: var(--stc-shadow-hover);
}

.consulting-dashboard-page .stc-session-card.highlight {
  border-left: 4px solid var(--clr-primary-dark);
  background: linear-gradient(to right, #ffffff 60%, var(--clr-primary-light) 100%);
}

.consulting-dashboard-page .stc-session-badge-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 0.6rem;
}

.consulting-dashboard-page .stc-time-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  background: var(--clr-primary-light);
  color: #235b2c;
  font-weight: 700;
  font-size: var(--fs-13);
  padding: 0.25rem 0.65rem;
  border-radius: 6px;
}

.consulting-dashboard-page .stc-time-badge i,
.consulting-dashboard-page .stc-time-badge svg {
  width: 13px;
  height: 13px;
}

.consulting-dashboard-page .stc-session-status {
  font-size: var(--fs-13);
  font-weight: 700;
}

.consulting-dashboard-page .stc-session-status.available {
  color: var(--clr-primary-dark);
}

.consulting-dashboard-page .stc-session-status.scheduled {
  color: var(--stc-muted);
}

/* Third card state (#225): the session was never bought. Same muted treatment
   as .scheduled because both are secondary status text, not alerts -- the
   thing that actually tells the two apart at a glance is the action beside
   them, "Schedule" vs "Purchase". No new colour value. */
.consulting-dashboard-page .stc-session-status.not-purchased {
  color: var(--stc-muted);
}

/* The purchase CTA is an <a>, not a <button>: it navigates to the payment page
   rather than opening the booking modal. .stc-btn-primary is element-agnostic
   (inline-flex + padding), so it only needs the anchor underline removed. */
.consulting-dashboard-page a.stc-btn-buy,
.consulting-dashboard-page a.stc-btn-buy:hover {
  text-decoration: none;
}

.consulting-dashboard-page .stc-session-title {
  font-size: var(--fs-16);
  font-family: var(--ff-heading-semibold);
  color: var(--stc-heading);
  margin-bottom: 0.35rem;
}

.consulting-dashboard-page .stc-session-desc {
  font-size: var(--fs-13);
  font-family: var(--ff-accent-regular);
  color: var(--stc-muted);
  line-height: 1.55;
  margin-bottom: 1rem;
}

.consulting-dashboard-page .stc-session-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.consulting-dashboard-page .stc-upload-wrap {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

.consulting-dashboard-page .stc-info-tooltip {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 999px;
  border: 1px solid var(--stc-border);
  background: var(--stc-surface);
  color: var(--stc-muted-2);
  cursor: help;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.consulting-dashboard-page .stc-info-tooltip:hover,
.consulting-dashboard-page .stc-info-tooltip:focus {
  color: var(--clr-primary-dark);
  border-color: var(--clr-primary-border);
  background: var(--clr-primary-light);
  outline: none;
}

.consulting-dashboard-page .stc-info-tooltip svg,
.consulting-dashboard-page .stc-info-tooltip i {
  width: 16px;
  height: 16px;
}

.consulting-dashboard-page .stc-info-tooltip-bubble {
  position: absolute;
  bottom: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  width: 240px;
  background: #ffffff;
  border: 1px solid var(--stc-border);
  border-radius: 10px;
  box-shadow: var(--stc-shadow-hover);
  padding: 0.7rem 0.8rem;
  font-family: var(--ff-accent-regular);
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--stc-heading-soft);
  text-align: left;
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s ease, transform 0.15s ease;
  z-index: 20;
}

.consulting-dashboard-page .stc-info-tooltip-bubble::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border: 6px solid transparent;
  border-top-color: #ffffff;
}

.consulting-dashboard-page .stc-info-tooltip:hover .stc-info-tooltip-bubble,
.consulting-dashboard-page .stc-info-tooltip:focus .stc-info-tooltip-bubble {
  visibility: visible;
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.consulting-dashboard-page .stc-cal-panel {
  background: #ffffff;
  border: 1px solid var(--stc-border);
  border-radius: var(--stc-radius);
  padding: 1.25rem;
  box-shadow: var(--stc-shadow);
}

.consulting-dashboard-page .stc-cal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--stc-border-soft);
}

.consulting-dashboard-page .stc-cal-title {
  font-size: var(--fs-14);
  font-family: var(--ff-heading-semibold);
  color: var(--stc-heading);
}

.consulting-dashboard-page .stc-cal-nav-btns {
  display: flex;
  gap: 0.25rem;
}

.consulting-dashboard-page .stc-cal-nav-btn {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  border: 1px solid var(--stc-border);
  background: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--stc-muted);
  font-size: 13px;
}

.consulting-dashboard-page .stc-cal-nav-btn:hover {
  background: var(--stc-surface);
}

/* Compact FullCalendar month grid */
.consulting-dashboard-page .stc-cal-grid .fc {
  font-size: 0.75rem;
}

.consulting-dashboard-page .stc-cal-grid .fc-col-header-cell {
  padding: 4px 0;
  background: var(--stc-surface);
}

.consulting-dashboard-page .stc-cal-grid .fc-col-header-cell-cushion {
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--stc-muted-2);
}

.consulting-dashboard-page .stc-cal-grid .fc-daygrid-day-frame {
  min-height: 34px;
  padding: 2px;
}

.consulting-dashboard-page .stc-cal-grid .fc-daygrid-day-top {
  justify-content: center;
}

.consulting-dashboard-page .stc-cal-grid .fc-daygrid-day-number {
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--stc-heading-soft);
  padding: 3px;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  float: none;
}

.consulting-dashboard-page .stc-cal-grid .fc-day-today {
  background: var(--clr-primary-light) !important;
}

.consulting-dashboard-page .stc-cal-grid .fc-day-today .fc-daygrid-day-number {
  border: 1px solid var(--clr-primary-border);
  font-weight: 700;
}

/* style.css forces every FullCalendar "today" numeral to #469b2e !important.
   On a meeting day that is also today, that green numeral sat on this green
   circle and vanished (#230). The extra .fc-daygrid-day-top outranks the
   global rule's !important. */
.consulting-dashboard-page .stc-cal-grid .fc-daygrid-day.has-event .fc-daygrid-day-top .fc-daygrid-day-number {
  background: var(--clr-primary-dark);
  color: #ffffff !important;
  font-weight: 700;
  /* Roomier than the 20px base circle so two-digit days don't touch the edge. */
  width: 28px;
  height: 28px;
}

.consulting-dashboard-page .stc-cal-grid .fc-daygrid-day-events {
  display: flex;
  justify-content: center;
  min-height: 0;
}

.consulting-dashboard-page .stc-cal-grid .fc-daygrid-event-harness {
  margin: 0 !important;
}

.consulting-dashboard-page .stc-cal-dot {
  display: block;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--clr-primary-dark);
  margin: 1px auto 0;
}

.consulting-dashboard-page .stc-cal-grid .fc-daygrid-day.has-event .stc-cal-dot {
  display: none;
}

.consulting-dashboard-page .stc-cal-grid .fc-scrollgrid,
.consulting-dashboard-page .stc-cal-grid td,
.consulting-dashboard-page .stc-cal-grid th {
  border-color: var(--stc-border-soft);
}

.consulting-dashboard-page .stc-agenda-card {
  background: var(--stc-surface);
  border: 1px solid var(--stc-border);
  border-radius: 10px;
  padding: 0.9rem 1rem;
  margin-top: 1.25rem;
}

.consulting-dashboard-page .stc-agenda-title {
  font-size: var(--fs-13);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--stc-muted);
  margin-bottom: 0.6rem;
}

.consulting-dashboard-page .stc-agenda-item {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  background: #ffffff;
  padding: 0.75rem;
  border-radius: 8px;
  border: 1px solid var(--stc-border);
}

.consulting-dashboard-page .stc-agenda-item + .stc-agenda-item {
  margin-top: 0.6rem;
}

.consulting-dashboard-page .stc-agenda-date-box {
  background: var(--clr-primary-light);
  color: #235b2c;
  border-radius: 6px;
  padding: 0.35rem 0.5rem;
  text-align: center;
  line-height: 1.1;
  flex-shrink: 0;
  min-width: 42px;
}

.consulting-dashboard-page .stc-agenda-month {
  font-size: 0.65rem;
  font-weight: 800;
  text-transform: uppercase;
}

.consulting-dashboard-page .stc-agenda-day {
  font-size: 1.1rem;
  font-weight: 800;
}

.consulting-dashboard-page .stc-agenda-name {
  font-weight: 700;
  font-size: var(--fs-14);
  color: var(--stc-heading);
}

.consulting-dashboard-page .stc-agenda-time {
  font-size: var(--fs-13);
  color: var(--stc-muted);
}

.consulting-dashboard-page .stc-agenda-empty {
  font-size: var(--fs-13);
  color: var(--stc-muted);
  margin: 0;
}

/* The Audit Response Plan blocks (Action Plan, State Audit Report Consult) are
   authored inside the state's .accordion-body, but this template's markup is
   unbalanced, so the browser hoists them out of .accordion-collapse and lands
   them as direct children of the state's .accordion-item. The effect was that
   a collapsed state still showed its whole response plan, and every state on
   the page showed one at once.
   Tying their visibility to the card's own collapsed state gets the Litigation
   behaviour -- close a state, its entire workflow goes with it -- without
   rebalancing markup that several modals and conditional branches depend on. */
.audit-dashboard-page .accordion-item:has(> .accordion-collapse:not(.show)) > .accordion-item,
.audit-dashboard-page .accordion-item:has(> .accordion-collapse:not(.show)) > .stc-plan-heading {
  display: none;
}

/* Stage 2/3 section titles (replace nested "VIEW DETAILS" sub-accordions) */
/* Audit Response Plan: line its heading and section titles up with the step
   rows above them, and kill the stray green rule.

   The green stroke that "appeared from nowhere" was `nexus-accordion-body`:
   that class is the state-panel treatment and carries
   `border: 1px solid var(--clr-primary-dark); border-top: none` (style.css).
   On the state panel it reads as the panel's own edge. On these inner blocks
   it drew a green line down one side of a box that has no top, which is why
   it looked like it started and stopped at random.

   The gutter: step rows sit inside `.accordion-body-row`, which carries
   `padding: 0 100px`. The titles are outside that row, so without the same
   100px they sat flush against the card edge while the rows they label were
   indented. */
.audit-dashboard-page .stc-task-rows-wrap > .accordion-body.nexus-accordion-body {
  border: 0;
  /* Horizontal padding matches the state panel's own .accordion-body, so the
     plan's rows land on the same left edge as the step rows above them
     instead of sitting 20px further out. */
  padding: 0 20px !important;
}

.audit-dashboard-page .stc-plan-heading {
  padding: 0 109px;
  margin: 1.75rem 0 0.25rem;
}

.audit-dashboard-page .accordion-item > .accordion-item {
  margin-top: 0.75rem !important;
  border: 1px solid var(--stc-border);
  border-radius: var(--stc-radius);
  background: #ffffff;
  overflow: hidden;
}

.audit-dashboard-page .stc-task-section-title-wrap {
  padding: 0.9rem 108px 0;
  margin: 0 0 0.25rem;
}
.audit-dashboard-page .stc-task-section-title {
  margin: 0;
  font-family: var(--ff-accent-medium, inherit);
  font-size: 13.5px;
  color: var(--stc-heading-soft);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.audit-dashboard-page .stc-task-rows-wrap {
  margin: 0;
  padding-bottom: 0.9rem;
}

/* Task rows on the same rhythm as the Litigation dashboard.
   Litigation's compact rows are an accident of its markup: it leaves the first
   row open, so rows 2..n are nested inside it and escape the 2.25rem padding
   that `.service-accordion-card .accordion-body-row > .col-12` puts on direct
   children. Audit's rows are direct children, so they used to carry their own
   0.65rem compromise and rendered 56px tall against Litigation's 35px.
   Rather than depend on that quirk, state the same rendered result outright:
   no padding on the row, the row's own content sets its height. */
.audit-dashboard-page .accordion-body-row .border-btm-dot,
.audit-dashboard-page .accordion-body-row > .col-12 {
  border-bottom: 1px solid var(--stc-border-soft) !important;
  padding: 0 !important;
}
.audit-dashboard-page .accordion-body-row > .col-12:last-child {
  border-bottom: none !important;
}

/* ==========================================================================
   Payment dashboard — two-column purchase wizard
   Style B "Two-Column Wizard": questionnaire on the left, live quote on the
   right. Written as scoped stc- rules rather than the mock's Tailwind CDN,
   which docs/ui/CODING_STANDARDS.md bans in production.
   Existing class names (option-range, stepper-div, recommendation-sec,
   choose-level-box, cart-btn) are restyled in place, never renamed: the
   purchase JS binds to them.
   ========================================================================== */

/* minmax(0, …) on every track: a bare `fr` is `minmax(auto, 7fr)`, so the
   track's minimum is its content's min-content width and long unbreakable
   content grows the column instead of being constrained by it. The state
   picker below wraps now, but keep the tracks capped so nothing else can
   push the quote panel off-screen again (#224). */
.stc-wizard {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.5rem;
  align-items: start;
}
@media (min-width: 992px) {
  .stc-wizard { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
}

/* ---------- left: questionnaire ---------- */
.stc-wizard-panel {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 1rem;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .05);
  padding: 1.5rem;
}
.stc-wizard-head {
  border-bottom: 1px solid #f1f5f9;
  padding-bottom: 1rem;
  margin-bottom: 1.25rem;
}
.stc-wizard-top {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .6rem;
}
.stc-wizard-back {
  min-height: 30px;
  padding: .3rem .75rem;
  font-size: 12px;
}
.stc-wizard-eyebrow {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: #235B2C;
  background: #E6F6E1;
  border: 1px solid #C1E6B7;
  border-radius: 999px;
  padding: .15rem .65rem;
}
.stc-wizard-title {
  font-size: 18px;
  font-weight: 800;
  color: #0f172a;
  margin: .5rem 0 0;
}
.stc-wizard-tagline {
  font-size: 13px;
  color: #64748b;
  margin: .15rem 0 0;
}

/* ---------- steps ---------- */
.stc-wizard .stepper-div {
  margin-top: 1.25rem;
  padding-top: 1.25rem;
  border-top: 1px solid #f1f5f9;
}
.stc-wizard .stepper-div.sub-step-1,
.stc-wizard .stepper-div.sub-step-2 {
  margin-top: .75rem;
  padding-top: 0;
  border-top: 0;
}
.stc-wizard .stepper-div h3 {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-size: 13px;
  font-weight: 700;
  color: #0f172a;
  margin: 0 0 .75rem;
}
.stc-step-num {
  flex: 0 0 auto;
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 999px;
  background: #469B2E;
  color: #fff;
  font-size: 10px;
  font-weight: 900;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.stc-step-meta {
  margin-left: auto;
  font-size: 11px;
  font-weight: 500;
  color: var(--stc-muted);
  white-space: nowrap;
}
.stc-wizard .stepper-div h3 .bi-info-circle { color: #94a3b8; }

/* Question info popovers (#311): the dashboard .css-tooltip-right look, but
   opened under the heading and no wider than it. Opening to the right, as the
   dashboards do, ran past the question card below 1440px and off-screen on
   phones. Covers the public wizard too, which has no .stc-wizard wrapper. */
.annual-sales-range h3 { position: relative; }
.annual-sales-range h3 .css-tooltip-right { position: static !important; }
.annual-sales-range h3 .css-tooltip-right span {
  left: 0;
  top: calc(100% + 8px);
  margin-left: 0;
  width: max-content;
  min-width: 0;
  max-width: 100%;
  white-space: normal;
}
.annual-sales-range h3 .css-tooltip-right span:before { display: none; }

/* ---------- choice pills (option-range / assesment-range) ---------- */
.stc-wizard .option-range-sec,
.stc-wizard .assesment-range-sec {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .5rem;
}
.stc-wizard .option-range,
.stc-wizard .assesment-range {
  width: auto;
  margin: 0;
  padding: .75rem;
  text-align: left;
  border: 1px solid #e2e8f0;
  border-radius: .75rem;
  background: #f8fafc;
  color: #334155;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.stc-wizard .option-range:hover,
.stc-wizard .assesment-range:hover {
  background: rgba(230, 246, 225, .45);
  border-color: #C1E6B7;
}
.stc-wizard .option-range.selected-range,
.stc-wizard .assesment-range.selected-range {
  background: #469B2E;
  border-color: #469B2E;
  color: #fff;
}
.stc-pill-sub {
  display: block;
  font-size: 10px;
  font-weight: 500;
  color: #94a3b8;
  margin-top: .15rem;
}
.stc-wizard .selected-range .stc-pill-sub { color: rgba(255, 255, 255, .85); }

/* ---------- state pickers / inputs ---------- */
.stc-field-wrap {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: .75rem;
  padding: .75rem;
}
.stc-field-note {
  font-size: 11px;
  color: #64748b;
  margin: .5rem 0 0;
}
.stc-wizard .bootstrap-select > .dropdown-toggle,
.stc-wizard .form-control,
.stc-wizard .form-select {
  border-radius: .65rem !important;
  border-color: #C1E6B7 !important;
  font-size: 13px;
}

/* bootstrap-select ships `white-space: nowrap` on the toggle, so the
   comma-joined list of selected states becomes one unbreakable line — ~3900px
   with all 46 jurisdictions picked. Let the label wrap so the button grows
   downward instead of sideways (#224). */
.stc-wizard .bootstrap-select > .dropdown-toggle {
  white-space: normal;
  height: auto;
  min-height: 2.1rem;
  align-items: flex-start;
  padding-top: .35rem;
  padding-bottom: .35rem;
}
.stc-wizard .bootstrap-select .filter-option,
.stc-wizard .bootstrap-select .filter-option-inner,
.stc-wizard .bootstrap-select .filter-option-inner-inner {
  white-space: normal;
  overflow-wrap: anywhere;
  height: auto;
}
/* keep the caret aligned with the first line once the label is multi-line */
.stc-wizard .bootstrap-select > .dropdown-toggle::after {
  margin-top: .45rem;
  flex: 0 0 auto;
}

/* ---------- right: live quote placard ---------- */
.stc-quote {
  background: linear-gradient(to bottom, rgba(230, 246, 225, .6), #fff 45%, #fff);
  border: 2px solid #C1E6B7;
  border-radius: 1rem;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .05);
  padding: 1.5rem;
}
@media (min-width: 992px) {
  .stc-quote { position: sticky; top: 5rem; }
}
.stc-quote-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  padding-bottom: .75rem;
  border-bottom: 1px solid rgba(193, 230, 183, .6);
}
.stc-quote-live {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: #235B2C;
}
.stc-quote-dot {
  width: .55rem;
  height: .55rem;
  border-radius: 999px;
  background: #469B2E;
  animation: stc-pulse 1.8s ease-in-out infinite;
}
@keyframes stc-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { .stc-quote-dot { animation: none; } }

.stc-quote .recommendation-sec {
  background: transparent;
  border: 0;
  box-shadow: none;
  padding: 0;
  margin: 0;
}
.stc-quote .recommendation-sec h4 {
  font-size: 18px;
  font-weight: 900;
  color: #0f172a;
  margin: 1rem 0 .25rem;
  display: flex;
  align-items: center;
  gap: .4rem;
}
.stc-quote .recommendation-sec h4 .bi-star-fill { color: #469B2E; font-size: .85rem; }
.stc-quote .rec-tier-description,
.stc-quote .rec-plan-description {
  font-size: 13px;
  color: #475569;
  margin: 0;
}
/* tier_info is admin rich text (CKEditor): a heading with the tier's name, then
   a one-line pitch. Left alone they fall through to the site-wide h3 (28px) and
   .recommendation-sec p, so "Guided Tier" dwarfed the questionnaire's own title.
   Mirror .stc-wizard-title / .stc-wizard-tagline as they render on the left card. */
/* The tier's name is the first line of tier_info, in whatever tag the admin used
   (a heading locally, but "<p><strong><em>" in other environments rendered it as
   14px grey italic). Style the first element as the title regardless of tag, and
   make any bold/italic/span inside it follow the title instead of its own style. */
.stc-quote .rec-tier-description :is(h1, h2, h3, h4, h5, h6),
.stc-quote .rec-tier-description > :first-child {
  font-family: var(--ff-heading-semibold);
  font-size: 18px;
  font-weight: 800;
  font-style: normal;
  line-height: 1.2;
  color: #0f172a;
  margin: .25rem 0 0;
}
.stc-quote .rec-tier-description :is(h1, h2, h3, h4, h5, h6) :is(strong, b, em, i, span),
.stc-quote .rec-tier-description > :first-child :is(strong, b, em, i, span) {
  font: inherit;
  color: inherit;
}
/* Name and pitch in one paragraph ("<p><strong>Name</strong><br>pitch"): keep the
   paragraph as the pitch and style only its leading element as the title. */
.stc-quote .rec-tier-description > p:first-child:has(> br) {
  font-family: var(--ff-heading-regular);
  font-size: .875rem;
  font-weight: 400;
  line-height: 18px;
  color: #64748b;
}
.stc-quote .rec-tier-description > p:first-child:has(> br) > :first-child:not(br) {
  font-family: var(--ff-heading-semibold);
  font-size: 18px;
  font-weight: 800;
  font-style: normal;
  line-height: 1.2;
  color: #0f172a;
}
/* Upgrade plan card (new-upgrade-plan.html) shows the same tier_info. Its tier
   name fell through to the site-wide h3 (28px) next to a 17px card title
   (.placard-update-heading); match that title, whatever tag the admin used. */
.existing-plan-description > :first-child {
  font-family: var(--ff-heading-semibold);
  font-size: 17px;
  font-weight: 500;
  font-style: normal;
  line-height: 1.2;
  color: #212529;
  margin: .25rem 0 .25rem;
}
.existing-plan-description > :first-child :is(strong, b, em, i, span) {
  font: inherit;
  color: inherit;
}
.stc-quote .rec-tier-description p {
  font-family: var(--ff-heading-regular);
  font-size: .875rem;
  line-height: 18px;
  color: #64748b;
  margin: .15rem 0 .5rem;
}
.stc-quote-price-box {
  background: #fff;
  border: 1px solid #C1E6B7;
  border-radius: .75rem;
  padding: .85rem;
  margin: .9rem 0;
  display: flex;
  align-items: baseline;
  /* Price only: the quote is a fixed fee, so there is no "Estimated" label beside it. */
  justify-content: center;
  gap: .75rem;
}
.stc-quote .amount {
  font-size: 18px;
  font-weight: 900;
  color: #235B2C;
  margin: 0;
}
.stc-quote .recommended-btn-sec {
  display: flex;
  flex-direction: column;
  gap: .5rem;
  margin-top: .25rem;
}
.stc-quote .cart-btn {
  width: 100%;
  padding: .75rem 1rem;
  border: 0;
  border-radius: .75rem;
  background: #469B2E;
  color: #fff;
  font-size: 13px;
  font-weight: 800;
  transition: background .15s ease;
}
.stc-quote .cart-btn:hover { background: #3A7A24; }
.stc-quote .view-tier-details {
  width: 100%;
  text-align: center;
  padding: .55rem 1rem;
  border: 1px solid #e2e8f0;
  border-radius: .75rem;
  background: #fff;
  color: #334155;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: background .15s ease;
}
.stc-quote .view-tier-details:hover { background: #f8fafc; }

.stc-quote .choose-level-sec h5 {
  font-size: 13px;
  font-weight: 700;
  color: #334155;
  margin: 1.25rem 0 .5rem;
}
.stc-quote .choose-level-box {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: .75rem;
  padding: .65rem;
  text-align: center;
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease;
}
.stc-quote .choose-level-box:hover { border-color: #469B2E; background: rgba(230, 246, 225, .3); }
.stc-quote .choose-level-box h4 { font-size: 12px; font-weight: 800; color: #0f172a; margin: 0; }
.stc-quote .choose-level-box h6 { font-size: 12px; color: #235B2C; font-weight: 700; margin: .2rem 0 0; }

/* shown until the questionnaire has enough answers to price a tier */
.stc-quote-empty {
  font-size: 13px;
  color: #64748b;
  padding: 1.1rem 0 .25rem;
  margin: 0;
}

/* ==========================================================================
   Payment dashboard — service picker grid
   ========================================================================== */

.all-service-info .service-info-tabs {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: .9rem;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .05);
  padding: 1rem;
  height: 100%;
  display: flex;
  flex-direction: column;
  transition: border-color .15s ease, background .15s ease;
}
.all-service-info .service-info-tabs:hover {
  border-color: #469B2E;
  background: rgba(230, 246, 225, .2);
}
.all-service-info .service-info-tabs .card-title {
  font-size: 14px;
  font-weight: 800;
  color: #0f172a;
  display: flex;
  align-items: center;
  gap: .4rem;
  margin: 0 0 .5rem;
}
.all-service-info .service-info-tabs .placard-badge {
  width: 1.1rem;
  height: 1.1rem;
  border-radius: 999px;
  background: #E6F6E1;
  color: #235B2C;
  font-size: .6rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}
.all-service-info .service-info-tabs .card-text {
  font-size: .76rem;
  color: #64748b;
  line-height: 1.5;
}
.all-service-info .service-info-tabs .price-contact-sec { flex: 1 1 auto; }
.all-service-info .get-started-sec {
  display: flex;
  gap: .5rem;
  margin-top: auto;
  padding-top: .85rem;
  border-top: 1px solid #f1f5f9;
}
.all-service-info .get-started-sec .detail-disc-view,
.all-service-info .get-started-sec .cart-btn {
  flex: 1 1 0;
  padding: .5rem .75rem;
  border-radius: .65rem;
  font-size: .75rem;
  font-weight: 800;
  transition: background .15s ease, border-color .15s ease;
}
.all-service-info .get-started-sec .detail-disc-view {
  background: #fff;
  border: 1px solid #e2e8f0;
  color: #334155;
}
.all-service-info .get-started-sec .detail-disc-view:hover { background: #f8fafc; border-color: #cbd5e1; }
.all-service-info .get-started-sec .cart-btn {
  background: #469B2E;
  border: 1px solid #469B2E;
  color: #fff;
}
.all-service-info .get-started-sec .cart-btn:hover { background: #3A7A24; border-color: #3A7A24; }

/* the empty hint disappears as soon as JS reveals a recommendation */
.recommendation-sec:not(.d-none) ~ .stc-quote-empty { display: none; }

/* Lazy-loaded service state panels (#214) */
.stc-panel-loading,
.stc-panel-error {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: 1.75rem 1rem;
  font-size: .82rem;
  color: #64748b;
}
.stc-panel-loading .spinner-border { color: #469B2E; }
.stc-panel-error { color: #b45309; }

/* ==========================================================================
   VDA dashboard — Milestone Hub state list (#214 phase 3)
   Card per state with a horizontal progress bar, plus a search/paging
   toolbar. Layered over the existing accordion markup: data-bs-toggle,
   data-bs-target, the collapse ids, goToUpgrade and upgrade-plan-btn are all
   untouched, so expanding and upgrading still run through the same wiring.
   ========================================================================== */

.stc-vda-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 1rem;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .05);
  padding: .9rem 1rem;
  margin-bottom: 1.25rem;
}
.stc-vda-search {
  position: relative;
  flex: 1 1 260px;
  max-width: 340px;
}
.stc-vda-search-icon {
  position: absolute;
  left: .75rem;
  top: 50%;
  transform: translateY(-50%);
  width: 1rem;
  height: 1rem;
  color: #94a3b8;
  pointer-events: none;
}
.stc-vda-search input {
  width: 100%;
  padding: .45rem .75rem .45rem 2.25rem;
  font-size: .8rem;
  color: #0f172a;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: .75rem;
}
.stc-vda-search input:focus {
  outline: none;
  border-color: #469B2E;
  box-shadow: 0 0 0 3px rgba(70, 155, 46, .18);
}
.stc-vda-toolbar-right {
  display: flex;
  align-items: center;
  gap: .6rem;
  font-size: .78rem;
  color: #64748b;
}
.stc-vda-toolbar-right select {
  font-size: .78rem;
  font-weight: 700;
  color: #334155;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: .55rem;
  padding: .3rem .5rem;
  /* Windows Chrome clipped the selected option's descenders: the control had
     padding but no resolved height, so it sized itself off the font metrics
     and came up short. An explicit height fixes it. line-height is NOT the
     lever here -- Chrome's UA stylesheet forces line-height:normal on <select>
     and ignores the author value, so setting it would be dead code. */
  height: 32px;
}
.stc-vda-toolbar-right select:focus { outline: none; border-color: #469B2E; }
.stc-vda-summary { font-weight: 600; color: #334155; white-space: nowrap; }

/* ---------- the card ---------- */
.stc-vda-card {
  background: #fff;
  border: 1px solid #e2e8f0 !important;
  border-radius: 1rem !important;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .05);
  /* Not hidden: overflow clipping kept the header gradient inside the
     rounded corner, but it also cut off the tooltips that open inside the
     panel. The header carries its own radius instead. */
  transition: border-color .15s ease;
}
.stc-vda-card:hover { border-color: #C1E6B7 !important; }
/* `.service-accordion-card .accordion-item` clips its children, which ate the
   tooltips that open inside the panel.
   Deliberately matched on the element's own classes, with no ancestor in the
   selector: only the first card is actually inside `.accordion` (see the
   structural note in #214), so an `.accordion ...` selector would fix the
   first state and leave the other 45 clipped. */
.accordion-item.stc-vda-card.mt-4 { overflow: visible !important; }

/* Same clipping on the Nexus / Audit / Appeal / Litigation cards: their
   `overflow: hidden` cut off the info tooltips at the card's bottom edge.
   The header keeps its background inside the rounded corner with its own
   radius (the whole shape when collapsed, the top only when open). */
.nexus-study-card .accordion-item,
.service-accordion-card .accordion-item,
.audit-dashboard-page .accordion-item > .accordion-item {
  overflow: visible;
}
.nexus-study-card .accordion-header .accordion-button,
.service-accordion-card .accordion-header .accordion-button {
  border-radius: calc(var(--stc-radius) - 1px) calc(var(--stc-radius) - 1px) 0 0 !important;
}
.nexus-study-card .accordion-header .accordion-button.collapsed,
.service-accordion-card .accordion-header .accordion-button.collapsed {
  border-radius: calc(var(--stc-radius) - 1px) !important;
}

/* ---------- empty state and pager ---------- */
.stc-vda-empty {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 1rem;
  padding: 2rem 1rem;
  text-align: center;
}
.stc-vda-empty p { font-size: .85rem; font-weight: 700; color: #334155; margin: 0 0 .5rem; }
.stc-vda-reset {
  border: 0;
  background: none;
  color: #469B2E;
  font-size: .78rem;
  font-weight: 800;
  text-decoration: underline;
}

.stc-vda-pager {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 1rem;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .05);
  padding: .8rem 1rem;
  margin-top: 1.25rem;
}
.stc-vda-pager-label { font-size: .78rem; color: #64748b; }
.stc-vda-pager-buttons { display: flex; flex-wrap: wrap; gap: .35rem; }
.stc-vda-page-btn {
  min-width: 2rem;
  padding: .3rem .6rem;
  font-size: .75rem;
  font-weight: 700;
  color: #334155;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: .55rem;
}
.stc-vda-page-btn:hover:not(:disabled) { background: #f8fafc; border-color: #cbd5e1; }
.stc-vda-page-btn:disabled { opacity: .45; cursor: default; }
.stc-vda-page-btn.is-current {
  background: #469B2E;
  border-color: #469B2E;
  color: #fff;
}

/* The inline first panel inherited Bootstrap's .accordion-body padding while
   the fetched ones did not, so injected states sat flush against the card
   edge. Pin it on our own elements instead of relying on that inheritance,
   so both paths are identical by construction. */
/* All four sides pinned, not just the horizontal pair.
   A fetched panel does not inherit Bootstrap's --bs-accordion-body-padding-*
   custom properties -- they read as undefined there, which makes
   `padding: var(...) var(...)` invalid and collapses it to 0. The inline
   first panel resolves them fine, so the two rendered differently. Anything
   expressed through those variables has the same problem, so state what we
   want outright instead of inheriting it. */
.stc-vda-card .accordion-body {
  padding: 1rem 1.25rem !important;
}
/* Step rows: match the Litigation dashboard's rhythm exactly.
   Litigation gets its compact rows by accident. Its markup leaves the first
   row open, so rows 2..n are nested INSIDE it -- that makes them grandchildren
   of .accordion-body-row and lets them escape the 2.25rem padding that rule
   puts on direct children. VDA's markup is balanced, so every row IS a direct
   child and every row picked that padding up, which is why VDA steps rendered
   ~107px tall against Litigation's ~35px.
   Copying the broken nesting would be the wrong fix. State the same rendered
   result outright instead: no padding on the rows, and the breathing room and
   indent moved onto the container. 7.65rem is Litigation's 100px container
   indent plus the 22.4px its wrapper row adds on top. */
.stc-vda-card .accordion-body-row {
  padding: 2.25rem 7.65rem !important;
}

.stc-vda-card .accordion-body-row > .col-12.border-btm-dot {
  padding: 0 !important;
}

/* Below lg the map card is full width but the main column is narrow, and a
   228px aside beside the map would leave the map too small to read. Stack the
   aside under it and let the legend flow as many pills per row as fit. */
@media (max-width: 991.98px) {
  .stc-map-card .stc-map-body {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: none;
    grid-template-areas: "map" "legend" "actions" "note";
  }

  .stc-legend-items {
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  }

  /* The dashboard scrolls at these widths whatever the map does, so the fold
     budget stops being the binding constraint -- let the map fill the column
     it now has to itself rather than sitting in it with a gutter. */
  .stc-map-card #map-container.stc-map-surface {
    --stc-map-h: clamp(220px, 60vh, 560px);
  }
}

/* ---------- Short viewports: keep the home dashboard on one screen ---------- */

/* The home dashboard is built to clear the fold in a single screen. The map
   scales itself off the viewport height (see .stc-map-surface), but the rows
   around it are fixed, so below ~820px of viewport there is not enough budget
   left and the CTA falls off. Tighten the vertical rhythm there instead.
   Height-based on purpose: this is about how much fold there is, not how wide
   the screen is -- a 1536x864 monitor and a 1920x1080 one with devtools open
   have the same problem. Must stay after the base rules to win the cascade.

   Breakpoint raised 920 -> 1000: a 1920x1080 monitor with normal browser chrome
   gives a ~943px viewport, which sat just ABOVE the old 920 line and so kept the
   roomy rhythm and overran the fold by 16px -- the single most common desktop
   size missing the tier meant for it. */
@media (max-height: 1000px) {
  .stc-metric-card {
    padding: 0.85rem 1.1rem;
  }

  .stc-metric-top {
    margin-bottom: 0.45rem;
  }

  .stc-metric-card .stc-metric-value {
    font-size: 22px;
  }

  /* 1440x900 lands 2px over the fold on the base rhythm; the map cannot give
     them back (it is width-limited by its column at that size, not height-
     limited), so they come off the body's top inset instead. */
  .stc-map-card .stc-map-body {
    padding-top: 0.5rem;
  }

  .stc-cta {
    padding: 0.9rem 1.5rem;
  }
}

/* Second tier. Below ~800px the card chrome itself (panel heads, the legend
   row) is a big enough share of the budget to be worth trimming.
   The legend and the disclaimer sit BESIDE the map now (#225), so the map
   surface is the whole of this card's body and shrinking it does shrink the
   row -- unlike the earlier stacked layout, where the liability card set the
   row height at these viewports and trimming the map bought nothing. */
@media (max-height: 800px) {
  /* Same +10% as the base rule above, so the short-viewport tier stays in
     proportion with it instead of snapping back to the old size. */
  .stc-map-card .stc-panel-head,
  .stc-liability-card .stc-panel-head {
    padding-bottom: 0.4rem;
  }

  .stc-dash {
    padding-bottom: 1rem;
  }

  .stc-dash > .row + .row {
    margin-top: 0.5rem;
  }

  .stc-map-card .stc-map-body {
    padding-top: 0.45rem;
  }

  .stc-legend-card,
  .stc-note--aside {
    padding: 0.55rem 0.7rem;
  }

  .stc-metric-card .stc-metric-value {
    font-size: 1.25rem;
  }

  /* The icon badge, not the label, sets the top row's height, and the foot's
     rule sits on padding rather than a margin, so both are worth trimming
     before the map gives up any more height. */
  .stc-metric-card {
    padding: 0.62rem 1rem;
  }

  .stc-metric-icon {
    width: 30px;
    height: 30px;
  }

  .stc-metric-foot {
    padding-top: 0.5rem;
  }

  /* On short screens this card, not the map, sets the row height -- the map
     stops shrinking the row once it is under this. So the last pixels have to
     come from here, not from the map. */
  .stc-liability-card .stc-exposure {
    margin-top: 0.6rem;
    padding: 0.75rem;
  }

  .stc-cta {
    padding: 0.7rem 1.4rem;
  }
}

/* Wider aside on short DESKTOP viewports: it cuts how many lines the
   disclaimer wraps to, and at these heights that wrap count -- not the map --
   is what sets the map card's height (measured: trimming the map alone left
   the card at 408px because the aside was still the taller of the two).
   Gated on min-width as well as max-height because below 992px the map body
   is a single-column grid (see above) and a second column would bring the
   side-by-side layout back on small screens. */
@media (max-height: 800px) and (min-width: 992px) {
  .stc-map-card .stc-map-body {
    grid-template-columns: minmax(0, 1fr) clamp(256px, 32%, 340px);
  }

  /* Same reason, other half of it: smaller disclaimer type also cuts the wrap
     count. 0.6875rem is a literal because the token scale stops at --fs-12;
     this is a deliberate one-step-below for short viewports only. */
  .stc-note--aside {
    font-size: 0.625rem;
    line-height: 1.4;
  }

  /* The map budget goes UP here, not down. At these heights the ASIDE sets the
     card height, so the map is free until it grows past it -- measured:
     cutting the budget from 29vh to 22vh shrank the map and left the card at
     408px either way, because the aside was still the taller of the two. */
  .stc-map-card #map-container.stc-map-surface {
    --stc-map-h: clamp(150px, 33vh, 320px);
  }
}

/* ==========================================================================
   Sales Tax Helper 2026 Design Tokens — Info Tooltip Icon Modernization
   Scope: Standardizes all info icons (i) with subtle circular borders,
          soft hover states, accessible focus rings, and normalized alignment.
   Tracking: Issue #221, item 7 (Sep 18 review) -- "Modernize info tooltip
   icons (i) with subtle circular borders to match the 2026 design token
   system". Jason logged it as a nice-to-have, not a blocker.

   NOT #198/Task 4.120, which an earlier draft of this cited: #198 is closed
   and was a different bug (tooltip clipped outside the Step 1 onboarding
   modal), and 4.120 is already marked Completed.

   Two hooks below, .stc-tooltip-trigger and .stc-info-icon, have no markup
   using them yet. They are kept deliberately as the forward path for new
   components, so they do not have to reuse the legacy .css-tooltip-right
   wrapper. They cost nothing until something opts in.
   ========================================================================== */

/* 1. Base Tooltip Trigger Container */
.css-tooltip-right,
.stc-tooltip-trigger {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  vertical-align: middle !important;
  text-decoration: none !important;
  cursor: pointer !important;
  line-height: 1 !important;
  margin-left: 6px;
}

/* 2. Standard 18px Subtle Circular Border Trigger */
.css-tooltip-right > i.bi,
.css-tooltip-right > i[data-lucide],
.css-tooltip-right > svg.lucide,
.stc-info-icon,
i.bi-info-circle[data-bs-toggle="tooltip"],
span[data-bs-toggle="tooltip"] > i.bi-info-circle {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 18px !important;
  height: 18px !important;
  min-width: 18px !important;
  min-height: 18px !important;
  border-radius: 50% !important;
  border: 1px solid var(--stc-border, #e2e8f0) !important;
  background-color: var(--stc-surface, #f8fafc) !important;
  color: var(--stc-muted, #64748b) !important;
  font-size: 11px !important;
  line-height: 1 !important;
  text-align: center !important;
  box-sizing: border-box !important;
  flex-shrink: 0 !important;
  transition: color 0.15s ease-in-out,
              background-color 0.15s ease-in-out,
              border-color 0.15s ease-in-out,
              box-shadow 0.15s ease-in-out,
              transform 0.15s ease-in-out !important;
}

/* 3. Eliminate Double-Ring: Swap bi-info-circle glyph to sans-serif clean 'i' (\f646) */
.css-tooltip-right > i.bi-info-circle::before,
.stc-info-icon.bi-info-circle::before,
i.bi-info-circle[data-bs-toggle="tooltip"]::before {
  content: "\f646" !important; /* Bootstrap Icons: bi-info-lg (clean sans-serif glyph) */
  font-family: "bootstrap-icons" !important;
  font-weight: 700 !important;
  transform: translateY(-0.5px) !important; /* Optical vertical centering */
  display: inline-block !important;
}

/* 4. Table Header & Compact Contexts (16px circle) */
th .css-tooltip-right > i.bi,
th .stc-info-icon,
.table thead .css-tooltip-right > i.bi,
.stc-info-icon--sm {
  width: 16px !important;
  height: 16px !important;
  min-width: 16px !important;
  min-height: 16px !important;
  font-size: 10px !important;
}

/* 5. Form Field & Prominent Label Contexts (20px circle) */
.form-label + .css-tooltip-right > i.bi,
.profile-label + .css-tooltip-right > i.bi,
.stc-info-icon--lg {
  width: 20px !important;
  height: 20px !important;
  min-width: 20px !important;
  min-height: 20px !important;
  font-size: 12px !important;
}

/* 6. Interactive Hover Micro-Interactions (Canonical Brand Green #469B2E) */
.css-tooltip-right:hover > i.bi,
.css-tooltip-right:hover > i[data-lucide],
.css-tooltip-right:hover > svg.lucide,
.stc-info-icon:hover,
i.bi-info-circle[data-bs-toggle="tooltip"]:hover,
span[data-bs-toggle="tooltip"]:hover > i.bi-info-circle {
  border-color: var(--clr-primary-border, #C1E6B7) !important;
  background-color: var(--clr-primary-light, #E6F6E1) !important;
  color: var(--clr-primary-dark, #469B2E) !important;
  box-shadow: 0 1px 3px 0 rgba(70, 155, 46, 0.15) !important;
  transform: scale(1.05) !important;
}

/* 7. Keyboard Focus & Accessibility (:focus-visible) */
.css-tooltip-right:focus-visible,
.stc-info-icon:focus-visible,
i.bi-info-circle[data-bs-toggle="tooltip"]:focus-visible {
  outline: none !important;
}

.css-tooltip-right:focus-visible > i.bi,
.stc-info-icon:focus-visible,
i.bi-info-circle[data-bs-toggle="tooltip"]:focus-visible {
  border-color: var(--clr-primary-dark, #469B2E) !important;
  background-color: var(--clr-primary-light, #E6F6E1) !important;
  color: var(--clr-primary-dark, #469B2E) !important;
  box-shadow: 0 0 0 3px rgba(70, 155, 46, 0.25) !important;
}

/* 8. Lucide SVG Info Normalization */
.css-tooltip-right svg.lucide-info,
.stc-info-icon svg.lucide-info {
  width: 11px !important;
  height: 11px !important;
  stroke-width: 2.2 !important;
}

/* 9. Legacy Override Neutralization */
.css-tooltip-right.color-blue > i.bi,
.css-tooltip-right > i.text-muted {
  color: var(--stc-muted, #64748b) !important;
}

.css-tooltip-right.color-blue:hover > i.bi {
  color: var(--clr-primary-dark, #469B2E) !important;
}

/* 10. Modernized Popover Container (.css-tooltip-right span) */
.css-tooltip-right span {
  background: #ffffff !important;
  border: 1px solid var(--stc-border, #e2e8f0) !important;
  border-radius: 10px !important;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.08), 0 4px 6px -4px rgba(0, 0, 0, 0.04) !important;
  color: var(--stc-heading-soft, #334155) !important;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
  font-size: 12px !important;
  line-height: 1.5 !important;
  letter-spacing: 0 !important;
  padding: 10px 14px !important;
  font-weight: 400 !important;
}

/* Popover Arrow Modernization */
.css-tooltip-right span:before,
.css-tooltip-right.start-date-tooltip span:before,
.css-tooltip-right.reg-date-tooltip span:before,
.css-tooltip-right.sales-data-source-tooltip span:before {
  border-right-color: #ffffff !important;
  filter: drop-shadow(-1px 0 0 var(--stc-border, #e2e8f0));
}

/* ==========================================================================
   Shared service dashboard toolbar & pagination  (Phase 1)
   Aliases the .stc-vda-* rules so VDA can drop its bespoke names in Phase 4.
   Brand tokens only: #469B2E / #3A7A24 / #E6F6E1 / #C1E6B7 / #235B2C.
   ========================================================================== */
.stc-dashboard-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 1rem;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .05);
  padding: .9rem 1rem;
  margin-bottom: 1.25rem;
}

.stc-dashboard-search {
  position: relative;
  flex: 1 1 260px;
  max-width: 340px;
}

.stc-dashboard-search-icon {
  position: absolute;
  left: .75rem;
  top: 50%;
  transform: translateY(-50%);
  width: 1rem;
  height: 1rem;
  color: #94a3b8;
  pointer-events: none;
}

.stc-dashboard-search input {
  width: 100%;
  padding: .45rem .75rem .45rem 2.25rem;
  font-size: .8rem;
  color: #0f172a;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: .75rem;
  transition: border-color .15s ease, box-shadow .15s ease;
}

.stc-dashboard-search input:focus {
  outline: none;
  border-color: #469B2E;
  box-shadow: 0 0 0 3px rgba(70, 155, 46, .25);
}

.stc-dashboard-toolbar-right {
  display: flex;
  align-items: center;
  gap: .6rem;
  font-size: .78rem;
  color: #64748b;
}

.stc-dashboard-toolbar-right select {
  font-size: .78rem;
  font-weight: 700;
  color: #334155;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: .55rem;
  padding: .3rem .5rem;
  height: 32px;
}

.stc-dashboard-toolbar-right select:focus {
  outline: none;
  border-color: #469B2E;
  box-shadow: 0 0 0 3px rgba(70, 155, 46, .25);
}

.stc-dashboard-summary {
  font-weight: 600;
  color: #334155;
  white-space: nowrap;
}

.stc-dashboard-empty {
  background: #fff;
  border: 1px solid #C1E6B7;
  border-radius: 1rem;
  padding: 2rem 1rem;
  text-align: center;
  margin-top: 1rem;
}

.stc-dashboard-empty p {
  font-size: .85rem;
  font-weight: 700;
  color: #235B2C;
  margin: 0 0 .5rem;
}

.stc-dashboard-reset {
  border: 0;
  background: none;
  color: #469B2E;
  font-size: .78rem;
  font-weight: 800;
  text-decoration: underline;
  cursor: pointer;
}

.stc-dashboard-reset:hover { color: #3A7A24; }

.stc-dashboard-pager {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 1rem;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .05);
  padding: .8rem 1rem;
  margin-top: 1.25rem;
}

.stc-dashboard-pager-label {
  font-size: .78rem;
  color: #64748b;
}

.stc-dashboard-pager-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
}

.stc-dashboard-page-btn {
  min-width: 2rem;
  padding: .3rem .6rem;
  font-size: .75rem;
  font-weight: 700;
  color: #334155;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: .55rem;
  cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}

.stc-dashboard-page-btn:hover:not(:disabled) {
  background: #E6F6E1;
  border-color: #C1E6B7;
}

.stc-dashboard-page-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(70, 155, 46, .25);
}

.stc-dashboard-page-btn:disabled {
  opacity: .45;
  cursor: default;
}

.stc-dashboard-page-btn.is-current {
  background: #469B2E;
  border-color: #469B2E;
  color: #fff;
}

.stc-dashboard-page-btn.is-current:hover {
  background: #3A7A24;
  border-color: #3A7A24;
}

/* Lazy panel placeholder / error, shared by every service dashboard. */
.stc-panel-placeholder { min-height: 96px; }

.stc-panel-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  padding: 2rem 1rem;
  font-size: .85rem;
  font-weight: 600;
  color: #235B2C;
}

.stc-panel-error {
  padding: 1.5rem 1rem;
  text-align: center;
  font-size: .85rem;
  font-weight: 600;
  color: #b91c1c;
}

/* 34 of the official state PDF form templates in state-pdf-html/ carry an
   unscoped `::placeholder { font-family: Times New Roman ...; font-size: 11px }`
   inside their own <style> block. Those files are protected and cannot be
   edited, and because the rule is unscoped it restyles every placeholder on
   whichever dashboard has one of those forms in the DOM -- which changes as
   panels lazy-load. These selectors are more specific, so the toolbar keeps
   the app's own type whatever forms are on the page. */
.stc-dashboard-search input::placeholder {
  font-family: inherit;
  font-size: inherit;
  font-style: normal;
  color: #94a3b8;
  opacity: 1;
}

.stc-dashboard-search input::-webkit-input-placeholder {
  font-family: inherit;
  font-size: inherit;
  color: #94a3b8;
}

/* ==========================================================================
   Onboarding upload toast (#220)
   Confirms the server parsed the CSV, replacing the sweetify flash removed in
   #219. The wizard is a modal, so this sits above Bootstrap's modal z-index
   (1055) and outside the dialog. Brand tokens only.
   ========================================================================== */
.stc-toast-region {
  position: fixed;
  right: 1.25rem;
  bottom: 1.25rem;
  z-index: 1090;
  display: flex;
  flex-direction: column;
  gap: .5rem;
  pointer-events: none;
}

/* Only the toast itself is interactive, so the region never swallows clicks
   meant for the wizard underneath it. */
.stc-toast-region > .toast {
  pointer-events: auto;
}

/* Deliberately scoped to the region rather than written as a bare .stc-toast.
   base.html loads toastr (still used by the payment pages and util.js), and
   toastr's stylesheet claims the same `.toast` class Bootstrap uses:

       .toast { background-color: #030303; }

   It loads after ours, so at equal specificity it wins and every Bootstrap
   toast in this app renders near-black. `.stc-toast-region .stc-toast` is
   0-2-0 against toastr's 0-1-0, which settles it without !important.
   The --bs-toast-* variables are set too, so Bootstrap's own painting agrees
   rather than being fought. */
.stc-toast-region .stc-toast {
  --bs-toast-bg: #fff;
  --bs-toast-color: #0f172a;
  --bs-toast-border-color: #C1E6B7;
  --bs-toast-max-width: 24rem;
  min-width: 19rem;
  max-width: 24rem;
  width: auto;
  background-color: #fff;
  color: #0f172a;
  border: 1px solid #C1E6B7;
  border-left: 4px solid #469B2E;
  border-radius: .85rem;
  box-shadow: 0 10px 24px rgba(15, 23, 42, .12);

  /* Bootstrap drives both directions with the same two classes: on show() it
     adds .show and .showing together and then drops .showing; on hide() it
     re-adds .showing while .show is still on. So .showing is the off-screen
     end of the travel for entering and leaving alike, and one transition
     covers both. Overrides .fade's flat 0.15s opacity fade (0-1-0). */
  transition:
    opacity .3s ease,
    transform .34s cubic-bezier(.22, 1, .36, 1);
  will-change: opacity, transform;

  /* Resting state. Deliberately on this rule and not a separate `.show` one:
     Bootstrap leaves .show and .showing on the element together for the whole
     transition, so a `.stc-toast .show` rule would tie with the `.showing`
     rule below at 0-3-0 and, being later in the file, win -- pinning opacity
     at 1 and killing both animations. Keeping the resting values here at
     0-2-0 lets .showing override them cleanly. */
  opacity: 1;
  transform: translateX(0) scale(1);
}

/* Off-screen end of the travel, used for entering and leaving alike. */
.stc-toast-region .stc-toast.showing {
  opacity: 0;
  transform: translateX(1.5rem) scale(.96);
}

.stc-toast-body {
  display: flex;
  align-items: flex-start;
  gap: .65rem;
  padding: .85rem 1rem;
}

.stc-toast-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  background: #E6F6E1;
  color: #469B2E;
}

.stc-toast-icon svg {
  width: .95rem;
  height: .95rem;
}

.stc-toast-text {
  display: flex;
  flex-direction: column;
  gap: .15rem;
}

.stc-toast-title {
  font-size: .85rem;
  font-weight: 700;
  color: #235B2C;
}

.stc-toast-detail {
  font-size: .78rem;
  font-weight: 500;
  color: #475569;
}

.stc-toast-close {
  flex: 0 0 auto;
}

.stc-toast-close:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(70, 155, 46, .25);
}

@media (max-width: 575.98px) {
  .stc-toast-region {
    right: .75rem;
    left: .75rem;
    bottom: .75rem;
  }

  .stc-toast {
    min-width: 0;
    max-width: none;
  }
}

/* Respect a reduced-motion preference: the toast still appears and still
   auto-dismisses, it just does not travel or fade. The transform is reset as
   well as the transition, so nothing is left sitting off to the right. */
@media (prefers-reduced-motion: reduce) {
  .stc-toast-region .stc-toast,
  .stc-toast-region .stc-toast.showing,
  .stc-toast-region .stc-toast.show {
    transition: none;
    transform: none;
  }
}