/* =============================================================================
   mh-myprofile.css - MY PROFILE's own overrides on the shared DetailShell.
   Aug 8 2026 rework (CEO: "both my profile section from staff and admin is
   completely ruined here").

   EVERY selector in this file is scoped `#mhDetail.mp-host`. DetailShell has six
   hosts - Program, Client, Household, Student, Housing Subsidy and this one - and
   detail-view.css is their shared vocabulary. An id+class selector outranks the
   shared `#mhDetail ...` rule on specificity alone, so load order does not matter
   and NOTHING here can leak into the other five.

   Loaded AFTER detail-view.css in App.razor regardless, belt and braces.
   ============================================================================= */

/* =========================================================
   RAIL - photo, name, role chip, job title. Nothing else.
   ========================================================= */

/* The rail head (brand mark + "MY PROFILE") is not rendered here, so the portrait
   is now the first thing in the panel and needs the breathing room the head used
   to provide. Without this the face sits hard against the top edge. */
#mhDetail.mp-host .rail-scroll.no-head { padding-top: 44px; }

/* JOB TITLE. It rides the shell's code tile, which is built for an MH##### code -
   monospace, wide, with the value shouted. A job title is prose, so it reads as
   the label/value pair it actually is. Still the shell's tile, just not pretending
   to be a barcode. */
#mhDetail.mp-host .sum-qr.is-static {
  margin-top: 22px;
  padding: 14px 16px;
  background: rgba(255, 255, 255, .1);
  cursor: default;
}
#mhDetail.mp-host .sum-qr.is-static:hover { background: rgba(255, 255, 255, .1); }
#mhDetail.mp-host .sum-qr-meta { gap: 5px; }
#mhDetail.mp-host .sum-qr-v {
  font-family: inherit;
  font-size: 14.5px;
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.35;
}

/* =========================================================
   A3 - THE PRESENCE DOT ON THE PORTRAIT, WITH THE HOVER SWAP
   =========================================================
   CEO, Aug 8, verbatim behaviour:
     not hovering -> GREEN dot visible, camera hidden
     hovering     -> green dot hidden, CAMERA visible
     leaving      -> back to green

   TWO LAWS APPLY HERE AND BOTH ARE OBEYED:

   [[mh-no-text-crossfade]] - the two marks share one corner, so they must NEVER
   fade through each other. The transitions are STAGGERED, not simultaneous: the
   outgoing mark takes .12s and the incoming one waits .12s before it starts. At no
   frame are both partly visible, which is what would have read as a smear.

   [[mh-transform-traps-dropdowns]] - NO transform, anywhere on .mh-photo or any
   ancestor of it. .mh-photo is the parent of the Photo Studio popover
   (.cd-photomenu); a hover transform here would create a stacking context and bury
   the menu inside it. Scale is expressed on the badges themselves, which are leaf
   nodes and carry nothing. */

/* The dot. A pseudo-element rather than a new shell slot: the swap is presentation,
   and DetailShell should not grow a parameter for one host's decoration. */
#mhDetail.mp-host .mh-photo::after {
  content: "";
  position: absolute;
  right: -2px;
  bottom: -2px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #57C08B;
  box-shadow: 0 0 0 2.5px var(--dv-rail-a), inset 0 0 0 5px rgba(255, 255, 255, .92);
  opacity: 1;
  pointer-events: none;                      /* the photo underneath stays clickable */
  transition: opacity .12s linear .12s;      /* returns AFTER the camera has gone */
}

/* A locked account does not get a green light. */
#mhDetail.mp-locked .mh-photo::after { background: #D9A227; }

/* The camera. The shared rule keeps it permanently visible when there is no photo
   (`.mh-photo.has` is the only case that hides it); here it is hover-only either
   way, because the dot owns the resting state. */
#mhDetail.mp-host .mh-photo .mh-btn,
#mhDetail.mp-host .mh-photo.has .mh-btn {
  opacity: 0;
  transition: opacity .12s linear;           /* leaves immediately */
}

#mhDetail.mp-host .mh-photo:hover::after,
#mhDetail.mp-host .mh-photo:focus-within::after,
#mhDetail.mp-host .mh-photo:has(.cd-photomenu)::after {
  opacity: 0;
  transition: opacity .12s linear;           /* leaves immediately */
}

#mhDetail.mp-host .mh-photo:hover .mh-btn,
#mhDetail.mp-host .mh-photo:focus-within .mh-btn,
#mhDetail.mp-host .mh-photo.has:hover .mh-btn,
#mhDetail.mp-host .mh-photo.has:focus-within .mh-btn,
#mhDetail.mp-host .mh-photo:has(.cd-photomenu) .mh-btn,
#mhDetail.mp-host .mh-photo.has:has(.cd-photomenu) .mh-btn {
  opacity: 1;
  transition: opacity .12s linear .12s;      /* arrives AFTER the dot has gone */
}

/* Reduced motion: no stagger, no fade - just swap. A staggered hand-off is still
   motion, and the app already honours this preference everywhere else. */
@media (prefers-reduced-motion: reduce) {
  #mhDetail.mp-host .mh-photo::after,
  #mhDetail.mp-host .mh-photo .mh-btn { transition: none !important; }
}

/* =========================================================
   A6 / A10 - PANE TYPOGRAPHY, CARD SEPARATION, TWO-ACROSS GRID
   ========================================================= */

/* THE GRID. [[mh-cardgrid-law]]: an EXPLICIT track count, never auto-fill. Two
   across is the CEO's own sketch (About you | Emergency Contact). It drops to one
   column at the same 1100px the shell collapses its rail at, so the pane never
   shows two 300px columns of squeezed rows. */
#mhDetail.mp-host .mp-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));   /* minmax(0,..) or a long
                                                        value blows the track out */
  gap: 22px;
  /* STRETCH, not start (CEO, Aug 8: "all KPI cards must be same size ... make the
     bottom size must be same"). `align-items:start` sized every card to its own
     content, so a 3-row card next to a 13-row card ended two-thirds shorter and the
     row bottoms never lined up. Stretching makes the two columns end level; the
     short card simply carries blank space, which the CEO explicitly accepted
     ("don't worry about the empty spaces"). */
  align-items: stretch;
}
#mhDetail.mp-host .mp-grid > .pd-card.full { grid-column: 1 / -1; }

/* THE RIGHT-HAND COLUMN: emergency contact, then account beneath it. A column
   rather than two loose grid children, so the pair behaves as ONE cell that ends
   level with ABOUT YOU on the left instead of forming a second ragged row. */
#mhDetail.mp-host .mp-col {
  display: flex;
  flex-direction: column;
  gap: 22px;
  min-width: 0;
}
/* Both cards in the column grow, so the stack fills the column's full height and
   its last card's bottom edge meets the left card's. */
#mhDetail.mp-host .mp-col > .pd-card { flex: 1 1 auto; }

@media (max-width: 1100px) {
  #mhDetail.mp-host .mp-grid { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  /* Stacked single-column: equal heights are meaningless and would strand real
     white space, so each card goes back to its own content height. */
  #mhDetail.mp-host .mp-col > .pd-card { flex: 0 0 auto; }
}

/* SEPARATION. The cards used to touch: same fill as the pane, a hairline border and
   no shadow, so four cards read as one long ruled list. They are now surfaces that
   sit ON the pane. */
#mhDetail.mp-host .pd-card {
  background: var(--surface, #fff);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 22px 24px 20px;
  box-shadow: 0 1px 2px rgba(20, 32, 28, .04), 0 8px 22px rgba(20, 32, 28, .05);
}
body.dark #mhDetail.mp-host .pd-card {
  background: rgba(255, 255, 255, .035);
  box-shadow: none;
}

/* HEADINGS. "must be BIGGER than they are now, and CAPITALIZED." The shared rule is
   11.5px on the .pd-ch h4; these headings are plain <span>s, so they are styled
   directly. The rule under them is what turns a heading into a section. */
#mhDetail.mp-host .pd-ch {
  align-items: center;
  gap: 11px;
  margin: 0 0 16px;
  padding-bottom: 13px;
  border-bottom: 1px solid var(--line);
}
#mhDetail.mp-host .pd-ch > span {
  font-size: 14.5px;
  font-weight: 800;
  letter-spacing: .085em;
  text-transform: uppercase;
  color: var(--ink-1, #1f2b27);
  line-height: 1.2;
}
body.dark #mhDetail.mp-host .pd-ch > span { color: #eef2f1; }

/* The heading glyph is a two-tone brand icon now, not a stroke path - so the shared
   `.pd-ch svg { stroke: var(--brand-600) }` must not repaint it. */
#mhDetail.mp-host .pd-ch svg.mh-bi {
  width: 20px;
  height: 20px;
  stroke: none;
  flex: none;
}

/* =========================================================
   ROWS, PILLS, TOGGLES, SESSIONS
   ========================================================= */
#mhDetail.mp-host .mp-rows { display: flex; flex-direction: column; }
#mhDetail.mp-host .mp-row {
  display: flex;
  align-items: baseline;
  gap: 16px;
  padding: 10px 0;
  border-bottom: 1px solid var(--line-2, rgba(20, 32, 28, .07));
}
#mhDetail.mp-host .mp-row:last-child { border-bottom: none; }
#mhDetail.mp-host .mp-row .k {
  flex: 0 0 148px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--ink-3, #6d7c77);
}
#mhDetail.mp-host .mp-row .v {
  flex: 1;
  min-width: 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink-1, #1f2b27);
  overflow-wrap: anywhere;
}
#mhDetail.mp-host .mp-row .v.ph { font-weight: 500; font-style: italic; opacity: .6; }
body.dark #mhDetail.mp-host .mp-row .v { color: #eef2f1; }
body.dark #mhDetail.mp-host .mp-row { border-color: rgba(255, 255, 255, .08); }

/* A locked row is SHOWN with its reason, never hidden - the lock rides at the end of
   the value so the value still reads first. */
#mhDetail.mp-host .mp-row .mp-lock {
  display: inline-grid;
  place-items: center;
  width: 15px;
  height: 15px;
  margin-left: 7px;
  vertical-align: -2px;
  border-radius: 50%;
  background: var(--brand-tint, rgba(78, 124, 114, .13));
  color: var(--brand-600, #4E7C72);
}
#mhDetail.mp-host .mp-row .mp-lock svg { width: 9px; height: 9px; }

#mhDetail.mp-host .mp-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 25px;
  padding: 0 12px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 800;
  background: rgba(78, 124, 114, .13);
  color: #3D655D;
}
#mhDetail.mp-host .mp-pill .mp-pd {
  width: 6px; height: 6px; border-radius: 50%; background: #4E7C72;
}
#mhDetail.mp-host .mp-pill.warn { background: rgba(216, 155, 61, .17); color: #8A5F16; }
#mhDetail.mp-host .mp-pill.warn .mp-pd { background: #D89B3D; }
body.dark #mhDetail.mp-host .mp-pill { color: #9fc7bd; }
body.dark #mhDetail.mp-host .mp-pill.warn { color: #e7c79a; }

/* Toggle rows and activity rows share one shape: icon tile, two lines of text, a
   control or a timestamp on the right. */
#mhDetail.mp-host .mp-togs { display: flex; flex-direction: column; }
#mhDetail.mp-host .mp-tog,
#mhDetail.mp-host .mp-act {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 13px 0;
  border-bottom: 1px solid var(--line-2, rgba(20, 32, 28, .07));
}
#mhDetail.mp-host .mp-tog:last-child,
#mhDetail.mp-host .mp-act:last-child { border-bottom: none; }
body.dark #mhDetail.mp-host .mp-tog,
body.dark #mhDetail.mp-host .mp-act { border-color: rgba(255, 255, 255, .08); }

/* THE ICON TILE. CEO, Aug 8: the glyphs were "really big", not centred, and running
   into the tile's edge. Three things fix that and they are all here rather than on
   each icon: a slightly bigger tile, a hard cap on the glyph so no call site can
   pass Size="20" and blow past it again, and place-items:center on the grid so the
   glyph is centred by the box rather than by whatever the SVG's own padding is.
   40px tile, 22px glyph, 9px clear on every side - the SAME proportion the Active
   Sessions logos use, so the two lists read as one family instead of the security
   rows looking undersized beside them (CEO, Aug 8). */
#mhDetail.mp-host .mp-tog .ic,
#mhDetail.mp-host .mp-act .ic {
  position: relative;
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: var(--f-focus-bg, rgba(20, 32, 28, .04));
  border: 1px solid var(--line);
  display: grid;
  place-items: center;
}
/* The cap. width/height AND max-* because MhBrandIcon writes width/height as
   attributes, which a plain `width` rule would win but a later attribute would not.
   NO overflow:hidden on the tile - the session tile's device badge deliberately
   overhangs its corner, and clipping the tile would cut it in half. The size cap is
   what keeps a glyph inside its box; clipping would only hide the symptom. */
/* 26px, not 22px, and the reason is worth keeping: the browser logos beside these are
   square PNGs that paint their FULL box, while a line glyph paints only the ink inside
   its viewBox. At a matched 22px box the glyphs were inking 14-16px - a third smaller,
   which is what read as "too small" even though the boxes agreed. The glyphs on this
   card are now drawn to fill ~20 of their 24 units, so a 26px box paints ~22px of ink:
   the same as the logos. Measure INK, not the box. */
#mhDetail.mp-host .mp-tog .ic > svg,
#mhDetail.mp-host .mp-act .ic > svg {
  width: 26px;
  height: 26px;
  max-width: 26px;
  max-height: 26px;
  display: block;
}
/* The session tile carries a photographic logo rather than a line glyph, so it takes
   its own size - still inside the tile, still clear of the edge. */
#mhDetail.mp-host .mp-ses-ic > .mp-ses-img { width: 22px; height: 22px; max-width: 22px; max-height: 22px; }

/* ---- "Change PIN" - the NON-destructive action ----------------------------
   THE STANDARD, and why it is not red: across enterprise account-security pages
   (Microsoft 365, Google, GitHub) red is reserved for the DESTRUCTIVE act - revoke
   a session, delete, sign out everywhere - and the safe primary action is drawn in
   the product's own primary colour, which on those products happens to be blue.
   Changing your PIN destroys nothing; it is the routine action the page exists to
   offer. Painting it red would put it in the same visual class as "Revoke" two
   cards below and teach staff to hesitate over the safe one.

   This app's primary-action colour is brand PINE, so pine is its blue. (The palette
   has no true blue: --mh-info #5E7A83 is a slate grey-blue used for information,
   not for actions, and --mh-danger #B0463C is the red that Revoke already owns.) */
#mhDetail.mp-host .ui-btn.mp-action {
  border-color: rgba(78, 124, 114, .45);
  color: var(--brand-600, #4E7C72);
  font-weight: 700;
}
#mhDetail.mp-host .ui-btn.mp-action svg { color: var(--brand-600, #4E7C72); }
#mhDetail.mp-host .ui-btn.mp-action:hover {
  background: var(--mh-green, #4E7C72);
  border-color: var(--mh-green, #4E7C72);
  color: #fff;
}
#mhDetail.mp-host .ui-btn.mp-action:hover svg { color: #fff; }
body.dark #mhDetail.mp-host .ui-btn.mp-action { color: #9fc7bd; border-color: rgba(78, 124, 114, .5); }
body.dark #mhDetail.mp-host .ui-btn.mp-action svg { color: #9fc7bd; }

/* ---- SESSION REVOCATION controls -----------------------------------------
   Deliberately QUIET, not red. Ending a stale session is routine hygiene, not a
   destructive act - the row can be re-created simply by signing in again. A red
   button here would teach staff to fear the one security control we want them to
   actually use. It turns clay only on hover, at the moment of intent. */
#mhDetail.mp-host .mp-signout {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 32px;
  padding: 0 13px;
  border-radius: 9px;
  border: 1px solid var(--line);
  background: var(--surface, #fff);
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--ink-2, #56635f);
  cursor: pointer;
  transition: border-color .15s ease, color .15s ease, background .15s ease;
}
#mhDetail.mp-host .mp-signout svg.mh-bi { width: 15px; height: 15px; stroke: none; }
#mhDetail.mp-host .mp-signout:hover:not(:disabled) {
  border-color: var(--mh-clay, #C97B5A);
  color: var(--mh-clay, #C97B5A);
  background: rgba(201, 123, 90, .06);
}
#mhDetail.mp-host .mp-signout:disabled { opacity: .5; cursor: default; }
#mhDetail.mp-host .mp-signout:focus-visible {
  outline: none; box-shadow: 0 0 0 3px rgba(78, 124, 114, .3);
}

/* "Sign out everywhere else" rides in the card heading, pushed to the far end. */
#mhDetail.mp-host .mp-signout-all {
  margin-left: auto;
  border: none;
  background: none;
  padding: 4px 2px;
  font-family: inherit;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .01em;
  text-transform: none;
  color: var(--brand-600, #4E7C72);
  cursor: pointer;
  border-radius: 6px;
}
#mhDetail.mp-host .mp-signout-all:hover:not(:disabled) { text-decoration: underline; }
#mhDetail.mp-host .mp-signout-all:disabled { opacity: .5; cursor: default; }
#mhDetail.mp-host .mp-signout-all:focus-visible {
  outline: none; box-shadow: 0 0 0 3px rgba(78, 124, 114, .3);
}

body.dark #mhDetail.mp-host .mp-signout {
  background: rgba(255, 255, 255, .05);
  border-color: rgba(255, 255, 255, .12);
  color: #c3cecb;
}
body.dark #mhDetail.mp-host .mp-signout-all { color: #9fc7bd; }
body.dark #mhDetail.mp-host .mp-tog .ic,
body.dark #mhDetail.mp-host .mp-act .ic {
  background: rgba(255, 255, 255, .05);
  border-color: rgba(255, 255, 255, .1);
}
/* Two-tone brand glyphs carry baked colour; the shared stroke rule must not touch
   them. The dark-mode moon is the one neutral glyph here and rides currentColor. */
#mhDetail.mp-host .mp-tog .ic svg.mh-bi,
#mhDetail.mp-host .mp-act .ic svg.mh-bi { stroke: none; }
#mhDetail.mp-host .mp-tog .ic svg.mh-bi--neutral { color: var(--brand-600, #4E7C72); }
body.dark #mhDetail.mp-host .mp-tog .ic svg.mh-bi--neutral { color: #9fc7bd; }

#mhDetail.mp-host .mp-tog .tx,
#mhDetail.mp-host .mp-act .tx { flex: 1; min-width: 0; }
#mhDetail.mp-host .mp-tog .t,
#mhDetail.mp-host .mp-act .t {
  font-size: 14px; font-weight: 700; color: var(--ink-1, #1f2b27); line-height: 1.3;
}
#mhDetail.mp-host .mp-tog .s,
#mhDetail.mp-host .mp-act .s {
  font-size: 12.5px; font-weight: 500; color: var(--ink-3, #6d7c77);
  margin-top: 2px; line-height: 1.4; overflow-wrap: anywhere;
}
#mhDetail.mp-host .mp-act .when {
  flex: none; font-size: 12px; font-weight: 700;
  color: var(--ink-3, #6d7c77); white-space: nowrap;
}
body.dark #mhDetail.mp-host .mp-tog .t,
body.dark #mhDetail.mp-host .mp-act .t { color: #eef2f1; }

/* A9 - the session row's device mark rides the corner of the browser mark, so one
   38px tile answers both "which browser" and "what kind of machine". */
#mhDetail.mp-host .mp-ses-dev {
  position: absolute;
  right: -5px;
  bottom: -5px;
  width: 19px;
  height: 19px;
  border-radius: 6px;
  display: grid;
  place-items: center;
  background: var(--surface, #fff);
  border: 1px solid var(--line);
}
body.dark #mhDetail.mp-host .mp-ses-dev {
  background: #1d2421; border-color: rgba(255, 255, 255, .14);
}
#mhDetail.mp-host .mp-ses-dev svg.mh-bi { stroke: none; }

/* THE REAL VENDOR MARKS. Served from wwwroot/images/browsers - self-hosted, never a
   CDN. object-fit:contain because the source PNGs are not all square (the Android
   head is 330x186, the Apple mark 330x406); without it they would be squashed to fit
   the box, which is the one way to make a real logo look worse than a drawn one. */
#mhDetail.mp-host .mp-ses-img {
  width: 24px;
  height: 24px;
  object-fit: contain;
  display: block;
}
#mhDetail.mp-host .mp-ses-dimg {
  width: 13px;
  height: 13px;
  object-fit: contain;
  display: block;
}
/* The Apple mark is solid black artwork and disappears on the dark surface. Inverting
   is honest here - it is a silhouette, so the inverse is the same shape in white, not
   a recoloured logo. Only the marks tagged .is-mono are touched. */
body.dark #mhDetail.mp-host .mp-ses-dimg.is-mono { filter: invert(1) brightness(1.6); }

/* The toggle switch itself - unchanged geometry, restated here so it does not
   depend on the retired #ppProfOv block in mh-profile.css. */
#mhDetail.mp-host .mp-sw {
  flex: none; width: 44px; height: 26px; border-radius: 999px; border: none;
  background: var(--mh-ctrl-fill-2, rgba(20, 32, 28, .14)); position: relative;
  cursor: pointer; transition: background .2s ease;
}
#mhDetail.mp-host .mp-sw::after {
  content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px;
  border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(30, 38, 42, .3);
  transition: left .22s cubic-bezier(.34, 1.4, .5, 1);
}
#mhDetail.mp-host .mp-sw.on { background: var(--mh-ctrl-accent, #4E7C72); }
#mhDetail.mp-host .mp-sw.on::after { left: 21px; }
#mhDetail.mp-host .mp-sw.clay.on { background: var(--mh-clay, #C97B5A); }
#mhDetail.mp-host .mp-sw:focus-visible {
  outline: none; box-shadow: var(--mh-ctrl-focus-ring, 0 0 0 3px rgba(78, 124, 114, .3));
}

/* =============================================================================
   ONE PALETTE FOR EVERY ICON IN MY PROFILE (CEO, Aug 14 2026)

   "make sure all icons must have same colors ... I am seeing green icon and
    matthew house branded color icon ... get the color of the left panel of the
    my profile ... work that on all icons, that is not looks professional"

   HE IS RIGHT, AND HERE IS WHY IT HAPPENED. MhBrandIcon's glyphs carry BAKED
   colour - each one was drawn with its own hex so it can read on its own
   anywhere in the app. Across this one menu that put SIX different palettes in a
   single vertical list:

       #496670 slate      id-card, defender, keypad, lock
       #5E7A83 blue-grey  settings, email, device-generic
       #5C8A6A green      shield-check, checkin
       #B65B43 terracotta emergency, logout
       #C6824F orange     calendar, reminder
       #C49A33 gold       (tints)

   Individually each is fine. Stacked in one column they read as an accident,
   which is exactly what he saw.

   THE FIX IS SCOPED, NOT GLOBAL. The baked colour is right everywhere else in
   the app - a red emergency mark SHOULD be red on a client record. So this
   re-tones the glyphs ONLY inside My Profile (#mhDetail.mp-host) and changes
   nothing anywhere else. Nothing in MhBrandIcon is edited, so no other screen
   can be affected by it.

   THE TONE IS THE RAIL'S OWN. The left panel of My Profile is
   linear-gradient(168deg, var(--mh-sidebar), var(--mh-sidebar-2) 56%, #1A2E29) -
   so the icons now take --mh-sidebar, the same deep pine the rail starts from,
   and the chips behind them take a whisper of that gradient. The panel and the
   list finally belong to each other.

   WHY A SINGLE TONE AND NOT A GRADIENT ON EACH GLYPH: a gradient across 26px of
   1.9px-wide line work muddies the strokes and reads as a printing fault. The
   gradient belongs on the CHIP, which is a large flat surface; the ink belongs
   on one colour. That is the professional version of what he asked for.

   HOW IT OVERRIDES BAKED COLOUR: stroke/fill in the glyphs are PRESENTATION
   ATTRIBUTES, which lose to any CSS rule at all - so this needs no !important.
   Two things are protected:
     - fill='none'  must stay none, or every outline becomes a filled blob;
     - the WHITE knockouts (fill='#fff') must stay white - they are the discs
       that punch a hole for a badge, e.g. the bell's notification dot.
   The low-opacity tints keep their fill-opacity, so each glyph stays TWO-TONE -
   a pale pine wash under a pine line - instead of flattening to a silhouette.
   ============================================================================= */
#mhDetail.mp-host {
  --mp-ic-ink: var(--mh-sidebar, #2E4A43);
}
body.dark #mhDetail.mp-host {
  /* Deep pine disappears on a dark card; this is the same lifted sage the
     neutral glyphs already use just above, so the two agree. */
  --mp-ic-ink: #9FC7BD;
}

#mhDetail.mp-host .mp-tog .ic svg.mh-bi [stroke]:not([stroke="none"]),
#mhDetail.mp-host .mp-act .ic svg.mh-bi [stroke]:not([stroke="none"]),
#mhDetail.mp-host .pd-ch svg.mh-bi [stroke]:not([stroke="none"]) {
  stroke: var(--mp-ic-ink);
}

#mhDetail.mp-host .mp-tog .ic svg.mh-bi [fill]:not([fill="none"]):not([fill="#fff" i]):not([fill="#ffffff" i]),
#mhDetail.mp-host .mp-act .ic svg.mh-bi [fill]:not([fill="none"]):not([fill="#fff" i]):not([fill="#ffffff" i]),
#mhDetail.mp-host .pd-ch svg.mh-bi [fill]:not([fill="none"]):not([fill="#fff" i]):not([fill="#ffffff" i]) {
  fill: var(--mp-ic-ink);
}

/* The chip carries the rail's gradient, at a whisper. Same 168deg angle as the
   panel so they read as the same surface lit from the same direction. */
#mhDetail.mp-host .mp-tog .ic,
#mhDetail.mp-host .mp-act .ic {
  background:
    linear-gradient(168deg,
      color-mix(in srgb, var(--mh-sidebar, #2E4A43) 9%, transparent),
      color-mix(in srgb, var(--mh-sidebar-2, #213A33) 5%, transparent) 70%,
      transparent);
  border-color: color-mix(in srgb, var(--mh-sidebar, #2E4A43) 16%, transparent);
}
body.dark #mhDetail.mp-host .mp-tog .ic,
body.dark #mhDetail.mp-host .mp-act .ic {
  background:
    linear-gradient(168deg, rgba(159, 199, 189, .13), rgba(159, 199, 189, .05) 70%, transparent);
  border-color: rgba(159, 199, 189, .18);
}