/* ============================================================================
   PARENT CONSOLE — the family account's console skin.        2026-08-16

   The client-dashboard counterpart of css/admin-console.css. Caleb: "i want
   you to remodel the left side bar and header to look and have the same
   feature and tools as admin … the same timeline sequence stuff for submenu
   options … wire the same colour and design to the client theme button
   becuase they can change colours."

   EVERY rule is scoped to body.pm-parent-console, which only
   js/parent-console-rail.js grants, and only while js/kid-sidebar.js (the
   role authority) says the viewer is a PARENT. Kids, assistants and admins
   never carry the class; the kid rail and every client page without this
   stylesheet are untouched.

   THEMING CONTRACT: no raw accent colours in §1–§2. The rail and header ride
   the --kt-* tokens that css/kid-theme.css drives from html[data-kidtheme],
   so the existing palette button keeps recolouring everything. Neutral greys
   (ink #1A2130 / mute #77808F / line #E7EAF0 / chip #F3F5F9) are shared with
   the admin console on purpose — they are what "identical" means; accents
   are what themes mean.

   §6+ (appended programmatically) are the admin console's own portfolio and
   widget rules re-scoped to this class with accents swapped to tokens — see
   the marker comment where they begin.
   ============================================================================ */

/* SPECIFICITY LIFT (2026-08-16, second live-probe finding): every selector
   below uses `html body.pm-parent-console.pm-parent-console.pm-parent-console`
   — the class repeated three times. Not a typo. The classic parent skin
   (client-desktop.css) prefixes its rules `html.pm-app-o4 body.pm-parent-rail`
   = specificity (0,3,2) with !important, which silently beat this sheet's
   original single-class selectors on every shared element (first casualty:
   the KPI card border). Repeating one class costs nothing at runtime and
   needs no OTHER class to be present, and (0,3,2) + loaded-last means this
   sheet wins exactly the ties it is supposed to win. Proven by CSSOM
   enumeration in the live probe. If you add rules here, use the same form. */

/* ── 1. THE RAIL — LUNO timeline, themed by the family's palette ────────── */

/* Pre-paint gutter, same trick as the admin console: the column exists from
   the first frame so nothing flashes unpadded. Rail renders above at z-60. */
html body.pm-parent-console.pm-parent-console.pm-parent-console::before {
  content: ''; position: fixed; top: 0; left: 0; bottom: 0;
  width: var(--ppr-w, 250px); z-index: 59; pointer-events: none;
  background: var(--kt-chrome-grad, linear-gradient(0deg,#0b3d6b 0%,#007aff 52%,#0a84ff 100%));
}
html body.pm-parent-console.pm-parent-console.pm-parent-console { --ppr-w: 250px; }

/* The classic kid/parent flyout rail hides — kid-sidebar.js keeps running
   (role authority, #parActions, demo wiring); only its paint is suppressed. */
html body.pm-parent-console.pm-parent-console.pm-parent-console #pmKidSidebar,
html body.pm-parent-console.pm-parent-console.pm-parent-console .pmkid-nav { display: none !important; }
/* Body offset. THE FIRST SHIP GOT THIS WRONG (Caleb: "the family portfolio…
   is all the way left behind the side bar"): kid-sidebar.css pads with
   `body.pm-kid-shell.pm-has-sidebar { … !important }` — TWO classes — so a
   single-class !important here LOSES on specificity and the content laid out
   for the old 138px rail while this 250px rail covered the first 112px of it.
   Proven live via CSSOM enumeration in the layout probe, not guessed.
   Three-class selector included so nothing in the classic stack can outrank
   this while the console is active. */
/* LITERAL, NOT var(). This one declaration is deliberately not tokenised:
   it is the only rule that fights three other sheets (sidebar.css,
   kid-sidebar.css, client-appshell.css) for the same property, and a
   var()-valued declaration whose custom property is declared in the SAME
   dynamically-added rule proved unreliable when the class arrives at runtime
   (cold start) rather than at parse time — measured 54px, i.e. the lowest-
   priority rule winning, on a page where the identical CSS gave 250px with
   the class present in the markup. A literal cannot be invalid-at-computed-
   value-time, so the declaration always survives to the cascade. --ppr-w
   still drives the rail's own width; if you change one, change both. */
html body.pm-parent-console.pm-parent-console.pm-parent-console,
html body.pm-parent-console.pm-parent-console.pm-parent-console.pm-kid-shell,
html body.pm-parent-console.pm-parent-console.pm-parent-console.pm-has-sidebar,
html body.pm-parent-console.pm-parent-console.pm-parent-console.pm-kid-shell.pm-has-sidebar { padding-left: 250px !important; }

.ppr {
  position: fixed; top: 0; left: 0; bottom: 0; width: var(--ppr-w, 250px); z-index: 60;
  display: flex; flex-direction: column;
  background: var(--kt-chrome-grad, linear-gradient(0deg,#0b3d6b 0%,#007aff 52%,#0a84ff 100%));
  box-shadow: 6px 0 34px -14px rgba(0,0,0,.38), inset -1px 0 0 rgba(255,255,255,.09);
  font-family: "Nunito", ui-rounded, system-ui, -apple-system, sans-serif;
}
.ppr::before {
  content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    linear-gradient(150deg, rgba(255,255,255,.14) 0%, transparent 40%),
    radial-gradient(circle at 20% 6%, rgba(255,255,255,.12), transparent 46%),
    radial-gradient(circle at 84% 96%, rgba(255,255,255,.08), transparent 52%);
}

/* Drifting stars — admin-console.css §2's `.pmar::after` VERBATIM (same
   sizes, same positions, same 4.4s twinkle + 30s drift, same reduced-motion
   opt-out). Caleb: "the left side of the menu doesnt have the sparkles like
   the admin does … should have the exact same sparkles." The first pass
   ported only the sheen layer and dropped this one. Star colours are fixed
   whites/ice-blues, not theme tokens, exactly as admin has them — they read
   as light on the chrome rather than as an accent, so they work under every
   palette. */
.ppr::after {
  content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden;
  filter: drop-shadow(0 0 2px rgba(255,255,255,.4));
  background-image:
    radial-gradient(2.2px 2.2px at 18% 12%, rgba(255,255,255,.9), transparent 62%),
    radial-gradient(1.4px 1.4px at 62% 22%, rgba(199,225,255,.85), transparent 62%),
    radial-gradient(2.5px 2.5px at 38% 33%, rgba(255,255,255,.8), transparent 62%),
    radial-gradient(1.4px 1.4px at 80% 44%, rgba(255,255,255,.75), transparent 62%),
    radial-gradient(2px 2px at 26% 55%, rgba(199,225,255,.9), transparent 62%),
    radial-gradient(1.5px 1.5px at 70% 65%, rgba(255,255,255,.8), transparent 62%),
    radial-gradient(2.3px 2.3px at 46% 77%, rgba(255,255,255,.85), transparent 62%),
    radial-gradient(1.4px 1.4px at 84% 86%, rgba(199,225,255,.8), transparent 62%),
    radial-gradient(1.9px 1.9px at 30% 92%, rgba(255,255,255,.75), transparent 62%),
    radial-gradient(1.5px 1.5px at 58% 6%, rgba(255,255,255,.8), transparent 62%);
  background-repeat: repeat; background-size: 100% 58%;
  animation: pprTwinkle 4.4s ease-in-out infinite, pprDrift 30s linear infinite;
}
@keyframes pprTwinkle { 0%,100% { opacity: .5; } 50% { opacity: .95; } }
@keyframes pprDrift   { 0% { background-position: 0 0; } 100% { background-position: 0 -58%; } }
@media (prefers-reduced-motion: reduce) { .ppr::after { animation: none; opacity: .65; } }

.ppr__brand {
  position: relative; z-index: 2; flex-shrink: 0;
  display: flex; align-items: center; gap: 12px;
  padding: 22px 20px 18px; text-decoration: none;
}
.ppr__mark {
  width: 38px; height: 38px; flex-shrink: 0; border-radius: 12px;
  background: rgba(255,255,255,.18); border: 1px solid rgba(255,255,255,.24);
  display: grid; place-items: center; color: #fff;
  box-shadow: 0 6px 18px -8px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.22);
}
.ppr__mark svg { width: 20px; height: 20px; stroke-width: 2; }
.ppr__wm { display: flex; flex-direction: column; line-height: 1.25; }
.ppr__wm b { font-size: 15px; font-weight: 600; color: #fff; }
.ppr__wm span { font-size: 11px; font-weight: 400; color: rgba(255,255,255,.6); letter-spacing: .06em; text-transform: uppercase; }

.ppr__scroll { position: relative; z-index: 2; flex: 1; overflow-y: auto; padding: 2px 12px 12px; scrollbar-width: none; }
.ppr__scroll::-webkit-scrollbar { width: 0; }
.ppr__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1px; }
.ppr__row { position: relative; list-style: none; }

.ppr__item {
  display: flex; align-items: center; gap: 12px; width: 100%;
  padding: 10px 12px; border-radius: 10px;
  background: none; border: none; text-align: left; cursor: pointer;
  color: rgba(255,255,255,.82);
  font-family: inherit; font-size: 14.5px; font-weight: 400; text-decoration: none;
  transition: background .16s cubic-bezier(.4,0,.2,1), color .16s cubic-bezier(.4,0,.2,1);
}
.ppr__ico { display: grid; place-items: center; flex-shrink: 0; }
.ppr__ico svg { width: 19px; height: 19px; stroke-width: 1.7; display: block; }
.ppr__lbl { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ppr__item:hover { background: rgba(255,255,255,.12); color: #fff; }
.ppr__item.is-active {
  background: #fff; color: #1A2130; font-weight: 600;
  box-shadow: 0 6px 16px -8px rgba(0,0,0,.45);
}
.ppr__item.is-active .ppr__ico svg { color: var(--kt-accent-bright, #007aff); }

.ppr__chev { display: grid; place-items: center; flex-shrink: 0; color: rgba(255,255,255,.45); transition: transform .24s cubic-bezier(.4,0,.2,1); }
.ppr__chev svg { width: 15px; height: 15px; stroke-width: 2; display: block; }
.ppr__row.is-open > .ppr__item .ppr__chev { transform: rotate(90deg); color: rgba(255,255,255,.9); }
.ppr__item.is-active .ppr__chev { color: #A2AAB6; }

.ppr__badge {
  flex-shrink: 0; min-width: 21px; height: 20px; padding: 0 7px; border-radius: 999px;
  background: #EF5B5B; color: #fff; font-size: 11px; font-weight: 600; line-height: 20px; text-align: center;
}
.ppr__badge[hidden] { display: none; }

/* The accordion + its timeline spine — identical geometry to the admin rail */
.ppr__acc { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .28s cubic-bezier(.4,0,.2,1); }
.ppr__row.is-open > .ppr__acc { grid-template-rows: 1fr; }
.ppr__acc-in { overflow: hidden; }
.ppr__sub { list-style: none; margin: 3px 0 8px; padding: 0 0 0 22px; position: relative; }
.ppr__sub::before {
  content: ''; position: absolute; left: 21px; top: 2px; bottom: 10px;
  width: 1px; background: rgba(255,255,255,.24);
}
.ppr__sublink {
  position: relative; display: flex; align-items: center; gap: 8px;
  padding: 8px 10px 8px 16px; border-radius: 8px; text-decoration: none;
  color: rgba(255,255,255,.66); font-size: 13.5px; font-weight: 400;
  transition: background .15s cubic-bezier(.4,0,.2,1), color .15s cubic-bezier(.4,0,.2,1);
}
.ppr__sublink::before {
  content: ''; position: absolute; left: -4px; top: 50%; transform: translateY(-50%);
  width: 7px; height: 7px; border-radius: 50%;
  background: rgba(255,255,255,.32);
  border: 1.5px solid var(--kt-chrome-deep, #0b3d6b);
  transition: background .16s cubic-bezier(.4,0,.2,1), box-shadow .16s cubic-bezier(.4,0,.2,1);
}
.ppr__sublink:hover { color: #fff; background: rgba(255,255,255,.09); }
.ppr__sublink:hover::before { background: rgba(255,255,255,.65); }
.ppr__sublink.is-active { color: #fff; font-weight: 600; }
.ppr__sublink.is-active::before {
  background: #fff; box-shadow: 0 0 0 3px rgba(255,255,255,.25);
}

.ppr__foot { position: relative; z-index: 2; flex-shrink: 0; padding: 12px; }
.ppr__out {
  display: flex; align-items: center; justify-content: center; gap: 9px; width: 100%;
  padding: 11px; border-radius: 11px; cursor: pointer; font-family: inherit;
  background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.2);
  color: #fff; font-size: 14px; font-weight: 500;
  transition: background .16s cubic-bezier(.4,0,.2,1);
}
.ppr__out:hover { background: rgba(255,255,255,.2); }
.ppr__out[disabled] { opacity: .6; cursor: default; }
.ppr__out svg { width: 16px; height: 16px; stroke-width: 1.8; }

/* MOBILE FALLBACK (≤900px): the 250px labelled rail has no phone layout yet,
   and parents live on phones. Below the breakpoint the classic kid/parent
   rail comes back exactly as it was — visible, padded, flyouts and all —
   and this rail steps aside. Desktop-first is how the admin console rolled
   out too; the mobile pass is its own job, not a squeeze. */
@media (max-width: 900px) {
  .ppr, html body.pm-parent-console.pm-parent-console.pm-parent-console::before { display: none !important; }
  html body.pm-parent-console.pm-parent-console.pm-parent-console #pmKidSidebar,
  html body.pm-parent-console.pm-parent-console.pm-parent-console .pmkid-nav { display: block !important; }
  /* MUST mirror the base rule's selector list. Raising the base rule to a
     4-selector form (incl. .pm-kid-shell.pm-has-sidebar) made it MORE
     specific than this one — which would have left phones padded 250px
     with the classic 138/76px rail. Same selectors here, so the media
     query wins by being later, as intended. */
  html body.pm-parent-console.pm-parent-console.pm-parent-console,
  html body.pm-parent-console.pm-parent-console.pm-parent-console.pm-kid-shell,
  html body.pm-parent-console.pm-parent-console.pm-parent-console.pm-has-sidebar,
  html body.pm-parent-console.pm-parent-console.pm-parent-console.pm-kid-shell.pm-has-sidebar { padding-left: var(--pmkid-rail-width-mobile, 76px) !important; }
}

/* ── 2. HEADER — same bones, console finish, still the family's colour ──── */
/* The topbar already has admin's arrangement (search left, pills right) and
   already rides var(--kt-topbar-grad). This section only harmonises finish:
   weights, radii, the recessed-glass search. The palette button, language
   pill, Child quick actions (#parActions), Install App and user pod all stay
   exactly where they are — features are carried over, not redesigned away. */
html body.pm-parent-console.pm-parent-console.pm-parent-console .nx-topbar {
  padding: 14px 28px;
  border-bottom: 1px solid rgba(0,0,0,.18) !important;
  box-shadow: 0 8px 22px -16px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.14) !important;
}
html body.pm-parent-console.pm-parent-console.pm-parent-console .nx-topbar,
html body.pm-parent-console.pm-parent-console.pm-parent-console .nx-topbar button,
html body.pm-parent-console.pm-parent-console.pm-parent-console .nx-topbar input {
  font-family: "Nunito", ui-rounded, system-ui, -apple-system, sans-serif;
}
html body.pm-parent-console.pm-parent-console.pm-parent-console .nx-search input,
html body.pm-parent-console.pm-parent-console.pm-parent-console .nx-topbar input[type="search"],
html body.pm-parent-console.pm-parent-console.pm-parent-console .nx-topbar input[type="text"] {
  background: rgba(0,0,0,.16) !important;
  border: 1px solid rgba(255,255,255,.22) !important;
  border-radius: 999px !important;
  color: #fff !important; font-weight: 400 !important;
  box-shadow: inset 0 2px 6px rgba(0,0,0,.18) !important;
}
html body.pm-parent-console.pm-parent-console.pm-parent-console .nx-search input::placeholder { color: rgba(255,255,255,.65) !important; font-weight: 400; }

/* ── 3. KPI STRIP — the admin's §10 inline stat, IDENTICAL (Caleb) ──────── */
/* Same class names as the admin dashboard (.nx-stats__*), same rules. The
   panel dissolves; the numbers sit on the page. */
html body.pm-parent-console.pm-parent-console.pm-parent-console .nx-stats,
html body.pm-parent-console.pm-parent-console.pm-parent-console .nx-stats__grid {
  background: transparent !important; border: none !important;
  box-shadow: none !important; padding: 0 !important;
}
html body.pm-parent-console.pm-parent-console.pm-parent-console .nx-stats { margin-bottom: 26px !important; }
html body.pm-parent-console.pm-parent-console.pm-parent-console .nx-stats__grid { gap: 12px 40px !important; }
html body.pm-parent-console.pm-parent-console.pm-parent-console .nx-stats__cell {
  display: block !important; background: transparent !important;
  border: none !important; border-radius: 0 !important; box-shadow: none !important;
  padding: 0 !important; overflow: visible !important; transition: none !important;
}
html body.pm-parent-console.pm-parent-console.pm-parent-console .nx-stats__cell:hover { transform: none !important; box-shadow: none !important; }
html body.pm-parent-console.pm-parent-console.pm-parent-console .nx-stats__cell::after { display: none !important; content: none !important; }
html body.pm-parent-console.pm-parent-console.pm-parent-console .nx-stats__num {
  order: 0 !important;
  display: inline-flex !important; align-items: baseline !important; gap: 7px !important;
  font-family: "Nunito", ui-rounded, system-ui, sans-serif !important;
  font-size: 24px !important; font-weight: 600 !important;
  line-height: 1.15 !important; letter-spacing: -.01em !important;
  color: #212529 !important;
  font-variant-numeric: tabular-nums !important;
  margin: 0 !important;
}
html body.pm-parent-console.pm-parent-console.pm-parent-console .nx-stats__label {
  order: 0 !important; display: block !important;
  font-family: "Nunito", ui-rounded, system-ui, sans-serif !important;
  font-size: 12px !important; font-weight: 400 !important;
  letter-spacing: .04em !important; text-transform: uppercase !important;
  color: #ADB5BD !important;
  margin: 5px 0 0 !important;
}
/* The "Hours remaining" tile's warning tint becomes a quiet number colour,
   not a filled amber card — the figure carries the warning, the card is gone. */
html body.pm-parent-console.pm-parent-console.pm-parent-console #kpiRemainingTile { background: transparent !important; }

/* The usage bar STAYS (Caleb: "make sure clients still have the progress
   bar") — admin has no equivalent, so it gets the console's finish: a thin
   quiet track, the family's accent as the fill, meta in the KPI label voice. */
html body.pm-parent-console.pm-parent-console.pm-parent-console .nx-stats__usage { margin-top: 16px !important; }
html body.pm-parent-console.pm-parent-console.pm-parent-console .nx-stats__usage-bar {
  height: 6px !important; border-radius: 999px !important;
  background: #EDF0F4 !important; box-shadow: none !important; overflow: hidden !important;
}
html body.pm-parent-console.pm-parent-console.pm-parent-console .nx-stats__usage-fill {
  border-radius: 999px !important;
  background: var(--kt-accent-bright, #007aff) !important;
  box-shadow: none !important;
}
html body.pm-parent-console.pm-parent-console.pm-parent-console .nx-stats__usage-meta {
  margin-top: 7px !important;
  font-family: "Nunito", ui-rounded, system-ui, sans-serif !important;
  font-size: 11.5px !important; font-weight: 400 !important;
  letter-spacing: .03em !important; color: #ADB5BD !important;
}
html body.pm-parent-console.pm-parent-console.pm-parent-console .nx-stats__usage-meta span { font-weight: 400 !important; color: #8A93A2 !important; }

/* ── 3b. ID-LEVEL OVERRIDES (third live-probe finding) ──────────────────
   parent-rail.css / client-desktop.css skin four surfaces BY ID with
   !important (#nxStatsCard, #nxNotifStrip, #dbnbCard, #clientPortfolio) —
   and an ID outranks any number of classes, so the class-lifted rules above
   still lost on exactly those elements (the 1.5px tinted border + gradient
   wash on the KPI card was the visible symptom). These carry the same IDs
   plus the lifted prefix, and the sheet loads last: nothing in the classic
   stack can outrank them. */
html body.pm-parent-console.pm-parent-console.pm-parent-console #nxStatsCard,
html body.pm-parent-console.pm-parent-console.pm-parent-console .nx-stats#nxStatsCard {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}
html body.pm-parent-console.pm-parent-console.pm-parent-console #nxStatsCard .nx-stats__cell { border-right: none !important; }
html body.pm-parent-console.pm-parent-console.pm-parent-console #nxStatsCard .nx-stats__usage { border-top: none !important; }
html body.pm-parent-console.pm-parent-console.pm-parent-console #nxNotifStrip .nx-notif-trigger {
  border: 1px solid #EDF0F4 !important;
  background: #fff !important;
  box-shadow: 0 1px 2px rgba(28,41,66,.04) !important;
}
html body.pm-parent-console.pm-parent-console.pm-parent-console #dbnbCard {
  border: 1px solid #E7EAF0 !important;
  border-radius: 14px !important;
  background: #fff !important;
  box-shadow: 0 1px 2px rgba(16,24,40,.04) !important;
}
/* The portfolio's folder-tab trim token — the old skins tint it teal/blue.
   The console's ported tabs are a timeline, not folder tabs; whatever still
   consumes the token gets the console hairline. */
html body.pm-parent-console.pm-parent-console.pm-parent-console .pmpf,
html body.pm-parent-console.pm-parent-console.pm-parent-console #clientPortfolio .pmpf { --pmpf-trim: #E7EAF0; }

/* ── 4. NOTIFICATIONS STRIP — one quiet row, same as the admin's bars ───── */
html body.pm-parent-console.pm-parent-console.pm-parent-console .nx-notif-trigger {
  min-height: 54px; padding: 0 16px !important;
  border: 1px solid #EDF0F4 !important; border-radius: 10px !important;
  background: #fff !important; box-shadow: 0 1px 2px rgba(28,41,66,.04) !important;
}
html body.pm-parent-console.pm-parent-console.pm-parent-console .nx-notif-trigger__title {
  font-family: "Nunito", ui-rounded, system-ui, sans-serif;
  font-size: 14px !important; font-weight: 600 !important; color: #1A2130 !important;
}
html body.pm-parent-console.pm-parent-console.pm-parent-console .nx-notif-trigger__sub {
  font-family: "Nunito", ui-rounded, system-ui, sans-serif;
  font-size: 12.5px !important; font-weight: 400 !important; color: #77808F !important;
}
html body.pm-parent-console.pm-parent-console.pm-parent-console .nx-notif-trigger__icon { color: var(--kt-accent-bright, #007aff); }

/* ── 5. CARDS & WIDGET HEADERS — section by section, the admin voice ────── */
/* The vertical colour bar before every title ("| Tasks", "| Activity Map")
   is the same lateral stripe Caleb had removed from the admin console:
   decoration standing in for a meaning the words already state. Gone. */
html body.pm-parent-console.pm-parent-console.pm-parent-console .nx-card__title::before,
html body.pm-parent-console.pm-parent-console.pm-parent-console h2.nx-card__title::before { display: none !important; content: none !important; }
html body.pm-parent-console.pm-parent-console.pm-parent-console .nx-card__title {
  font-family: "Nunito", ui-rounded, system-ui, sans-serif !important;
  font-size: 19px !important; font-weight: 600 !important;
  letter-spacing: 0 !important; color: #1A2130 !important;
  padding-left: 0 !important;
}
html body.pm-parent-console.pm-parent-console.pm-parent-console .nx-card__sub {
  font-family: "Nunito", ui-rounded, system-ui, sans-serif !important;
  font-size: 12.5px !important; font-weight: 400 !important; color: #8A93A2 !important;
}
html body.pm-parent-console.pm-parent-console.pm-parent-console .nx-card {
  border: 1px solid #E7EAF0 !important; border-radius: 14px !important;
  box-shadow: 0 1px 2px rgba(16,24,40,.04) !important;
  background: #fff !important;
}

/* ═══ §6+ — ADMIN CONSOLE RULES, RE-SCOPED (appended programmatically) ═══ */
/* Everything below this marker is generated from css/admin-console.css by
   the port script recorded in the Flow Manual (2026-08-16): scope swapped
   body.pm-admin-console → body.pm-parent-console, fixed console-blue accents
   swapped for --kt-* tokens. Do not hand-edit below without re-reading that
   entry — regeneration overwrites from the marker down. */


/* Base tokens the ported sections consume. --cal-accent's base declaration
   lives OUTSIDE the ported ranges in admin-console.css (§8 tail), so it is
   restated here — the grey-veil lesson: a token must be declared on an
   ancestor of every rule that consumes it. */
html body.pm-parent-console.pm-parent-console.pm-parent-console {
  --cal-accent: var(--kt-accent-bright, #4A9FF5);
  --cal-accent-ink: #FFFFFF;
  --pc-accent-border: color-mix(in srgb, var(--kt-accent-bright, #4A9FF5) 35%, #fff);
}


/* ═══ PORTED §5 — PORTFOLIO TABS AS VERTICAL TIMELINE ═══ */
/* ── 5. FAMILY PORTFOLIO — tabs become a vertical timeline ──────────────── */
/* Caleb 2026-08-16: "i want these to have timeline like dashboard does and
   for these to be under the header family portfolios."
   All nine tabs are preserved exactly — family-portfolio.js still renders
   .pmpf__tab buttons and still owns the click wiring. Only the axis changes:
   the strip becomes a left column with a spine, so it can never clip a label
   the way the horizontal scroller did. */
@media (min-width: 981px) {
  html body.pm-parent-console.pm-parent-console.pm-parent-console .pmpf {
    display: grid;
    grid-template-columns: 232px minmax(0, 1fr);
    grid-template-areas: "nav panes" "nav foot";
    align-items: start;
    column-gap: 26px;
  }
  html body.pm-parent-console.pm-parent-console.pm-parent-console .pmpf__tabswrap {
    grid-area: nav; position: relative;
    padding: 4px 0 4px 20px; margin: 0; overflow: visible;
    border-right: 1px solid #EDF0F4;
  }
  /* the spine */
  html body.pm-parent-console.pm-parent-console.pm-parent-console .pmpf__tabswrap::before {
    content: ''; position: absolute; left: 19px; top: 14px; bottom: 14px;
    width: 1px; background: #E1E6ED;
  }
  html body.pm-parent-console.pm-parent-console.pm-parent-console .pmpf__tabs {
    display: flex; flex-direction: column; gap: 2px;
    overflow: visible; width: auto; padding: 0; margin: 0; border: none;
  }
  html body.pm-parent-console.pm-parent-console.pm-parent-console .pmpf__tab {
    position: relative; width: 100%; text-align: left;
    margin: 0; padding: 9px 12px 9px 16px;
    border: none !important; border-radius: 8px !important;
    background: transparent !important; box-shadow: none !important;
    font-family: inherit; font-size: 13.5px; font-weight: 400; color: #77808F;
    white-space: normal; transform: none !important;
    transition: background .15s ease, color .15s ease;
  }
  /* the node on the spine */
  html body.pm-parent-console.pm-parent-console.pm-parent-console .pmpf__tab::before {
    content: ''; position: absolute; left: -5px; top: 50%; transform: translateY(-50%);
    width: 7px; height: 7px; border-radius: 50%;
    background: #D3DAE3; border: 1.5px solid #fff;
    transition: background .16s ease, box-shadow .16s ease;
  }
  html body.pm-parent-console.pm-parent-console.pm-parent-console .pmpf__tab::after { display: none !important; }
  html body.pm-parent-console.pm-parent-console.pm-parent-console .pmpf__tab:hover { background: #F5F8FC !important; color: #1A2130 !important; }
  html body.pm-parent-console.pm-parent-console.pm-parent-console .pmpf__tab:hover::before { background: #A9B4C2; }
  html body.pm-parent-console.pm-parent-console.pm-parent-console .pmpf__tab.is-active {
    background: var(--kt-accent-soft-bg,#EAF4FE) !important; color: var(--kt-accent-ink,#2E86E0) !important; font-weight: 600;
  }
  html body.pm-parent-console.pm-parent-console.pm-parent-console .pmpf__tab.is-active::before {
    background: var(--kt-accent-bright,#4A9FF5); box-shadow: 0 0 0 3px color-mix(in srgb, var(--kt-accent-bright,#4A9FF5) calc(.2 * 100%), transparent);
  }
  html body.pm-parent-console.pm-parent-console.pm-parent-console .pmpf__panes {
    grid-area: panes; margin: 0 !important; border-radius: 12px;
    min-width: 0; overflow: hidden;
  }
  /* The prev/next dot bar was the horizontal strip's companion — the
     timeline shows every destination at once, so it has nothing left to do. */
  html body.pm-parent-console.pm-parent-console.pm-parent-console .pmpf-sw__foot { display: none !important; }
}
/* Below 980px the timeline would eat the width — fall back to the strip
   family-portfolio.js ships by default. */

/* (Ported ≤900px block NEUTRALIZED 2026-08-16: the admin original zeroed the
   body padding below 900px because admin has no other rail there. Here the
   CLASSIC kid rail returns at that width (§1's fallback pads 76px), and this
   later 0px !important was winning the tie against it — the behind-the-rail
   bug all over again, at mobile. §1 owns the mobile fallback; nothing to do
   here. The .pmar hide is kept only as inert hygiene — no .pmar exists on
   client pages.) */
@media (max-width: 900px) {
  .pmar { display: none; }
}

/* Anchor targets for the rail's Dashboard branch. scroll-margin keeps the
   sticky top bar from covering the heading you just jumped to. */
html body.pm-parent-console.pm-parent-console.pm-parent-console { scroll-behavior: smooth; }
html body.pm-parent-console.pm-parent-console.pm-parent-console [id^="pmar-"] { display: block; scroll-margin-top: 84px; }
@media (prefers-reduced-motion: reduce) { html body.pm-parent-console.pm-parent-console.pm-parent-console { scroll-behavior: auto; } }



/* ═══ PORTED §9 — CALENDAR, LUNO LIGHT ═══ */
/* ════════════════════════════════════════════════════════════════════════
   9. CALENDAR — LUNO structure  (2026-08-16, v3)

   Caleb: "build this style calendar design exactly instead" (LUNO
   app-calendar.html). Two earlier dark passes are gone — LUNO's calendar is
   LIGHT, and that is the whole character: white cells, hairline rules, day
   numbers top-right, a cream "today", and events as compact solid bars.

   What makes it read as LUNO rather than "a calendar":
     · Borders, not gaps. One continuous 1px #DEE2E6 lattice; cells share
       edges via a single outer border + right/bottom on each cell.
     · Day numbers sit TOP-RIGHT, regular weight, muted — never bold.
     · Today is a soft cream wash (#FFF9DB), not a coloured pill.
     · Events are solid, small-radius bars with white text — flat, no shadow,
       no gradient. Compact rows, generous cell height around them.
     · Type is calm: 15px headers, 13px events, weights 400/600. No 800s.

   ACCENT IS TOKENISED so the palette button still works: swap --cal-accent
   and every bar, dot and active state follows. See §9b.
   ════════════════════════════════════════════════════════════════════════ */

html body.pm-parent-console.pm-parent-console.pm-parent-console {
  --line: #E8EAF0;        /* shared hairline — §11 consumes it */
  --cal-line: #DEE2E6;
  --cal-ink: #495057;
  --cal-ink-mute: #ADB5BD;
  --cal-today: #FFF9DB;
  --cal-accent: var(--kt-accent-bright,#4A9FF5);
  --cal-accent-ink: #FFFFFF;
}

/* Month title + controls */
html body.pm-parent-console.pm-parent-console.pm-parent-console .pmcal-title {
  font-family: "Nunito", ui-rounded, system-ui, sans-serif !important;
  font-size: 27px !important; font-weight: 500 !important;
  letter-spacing: 0 !important; color: #212529 !important;
}
html body.pm-parent-console.pm-parent-console.pm-parent-console .pmcal-sub {
  font-family: "Nunito", ui-rounded, system-ui, sans-serif !important;
  font-size: 13.5px !important; font-weight: 400 !important; color: #868E96 !important;
}
/* "today" = grey pill, arrows = dark navy block — LUNO's exact pairing */
html body.pm-parent-console.pm-parent-console.pm-parent-console .pmcal-nav button,
html body.pm-parent-console.pm-parent-console.pm-parent-console .pmcal-controls button {
  font-family: "Nunito", ui-rounded, system-ui, sans-serif !important;
  font-size: 14px !important; font-weight: 400 !important;
  background: #E9ECEF !important; color: #495057 !important;
  border: none !important; border-radius: 7px !important;
  padding: 9px 18px !important;
  transition: background .15s ease !important;
}
html body.pm-parent-console.pm-parent-console.pm-parent-console .pmcal-nav button:hover,
html body.pm-parent-console.pm-parent-console.pm-parent-console .pmcal-controls button:hover { background: #DEE2E6 !important; }
html body.pm-parent-console.pm-parent-console.pm-parent-console .pmcal-vtoggle {
  background: transparent !important; border: none !important; padding: 0 !important; gap: 2px !important;
}
html body.pm-parent-console.pm-parent-console.pm-parent-console .pmcal-vtoggle__btn {
  font-family: "Nunito", ui-rounded, system-ui, sans-serif !important;
  font-size: 14px !important; font-weight: 400 !important;
  background: #343A40 !important; color: #fff !important;
  border: none !important; border-radius: 7px !important; padding: 9px 16px !important;
}
html body.pm-parent-console.pm-parent-console.pm-parent-console .pmcal-vtoggle__btn:not(.is-active) {
  background: #E9ECEF !important; color: #495057 !important;
}
html body.pm-parent-console.pm-parent-console.pm-parent-console .pmcal-vtoggle__btn.is-active { background: #343A40 !important; color: #fff !important; }

/* ── The lattice ── */
html body.pm-parent-console.pm-parent-console.pm-parent-console .pmcal-grid {
  background: #fff !important;
  border: 1px solid var(--cal-line) !important;
  border-right: none !important; border-bottom: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  gap: 0 !important;
}
html body.pm-parent-console.pm-parent-console.pm-parent-console .pmcal-weekdays > * {
  font-family: "Nunito", ui-rounded, system-ui, sans-serif !important;
  font-size: 15px !important; font-weight: 400 !important;
  letter-spacing: 0 !important; text-transform: none !important;
  color: var(--cal-ink) !important;
  background: #fff !important;
  padding: 13px 0 !important; text-align: center !important;
  border: none !important;
  border-right: 1px solid var(--cal-line) !important;
  border-bottom: 1px solid var(--cal-line) !important;
}
html body.pm-parent-console.pm-parent-console.pm-parent-console .pmcal-cell {
  background: #fff !important;
  border: none !important;
  border-right: 1px solid var(--cal-line) !important;
  border-bottom: 1px solid var(--cal-line) !important;
  min-height: 138px !important;
  padding: 6px !important;
  transition: background .14s ease !important;
}
html body.pm-parent-console.pm-parent-console.pm-parent-console .pmcal-cell:hover { background: #FBFCFD !important; }
html body.pm-parent-console.pm-parent-console.pm-parent-console .pmcal-cell.is-out { background: #fff !important; }

/* Day number: top-right, muted, never bold */
html body.pm-parent-console.pm-parent-console.pm-parent-console .pmcal-day {
  font-family: "Nunito", ui-rounded, system-ui, sans-serif !important;
  font-size: 15px !important; font-weight: 400 !important;
  color: var(--cal-ink) !important;
  display: block !important; text-align: right !important;
  padding: 6px 8px 2px !important;
  background: none !important; border-radius: 0 !important;
  width: auto !important; height: auto !important;
}
html body.pm-parent-console.pm-parent-console.pm-parent-console .pmcal-cell.is-out .pmcal-day { color: var(--cal-ink-mute) !important; }

/* Today: cream wash, number stays plain — LUNO does not badge it */
html body.pm-parent-console.pm-parent-console.pm-parent-console .pmcal-cell.is-today { background: var(--cal-today) !important; }
html body.pm-parent-console.pm-parent-console.pm-parent-console .pmcal-cell.is-today:hover { background: #FFF6C9 !important; }
html body.pm-parent-console.pm-parent-console.pm-parent-console .pmcal-cell.is-today .pmcal-day {
  color: var(--cal-ink) !important; font-weight: 400 !important;
  background: none !important; border-radius: 0 !important;
}

/* ── Events: flat solid bars ── */
html body.pm-parent-console.pm-parent-console.pm-parent-console .pmcal-event {
  display: block !important;
  background: var(--cal-accent) !important;
  color: var(--cal-accent-ink) !important;
  border: none !important; border-radius: 4px !important;
  padding: 4px 8px !important;
  margin: 0 0 3px !important;
  box-shadow: none !important;
  transition: filter .14s ease !important;
}
html body.pm-parent-console.pm-parent-console.pm-parent-console .pmcal-event:hover { filter: brightness(.93) !important; transform: none !important; }
html body.pm-parent-console.pm-parent-console.pm-parent-console .pmcal-event__title {
  color: var(--cal-accent-ink) !important;
  font-family: "Nunito", ui-rounded, system-ui, sans-serif !important;
  font-size: 13px !important; font-weight: 600 !important;
}
html body.pm-parent-console.pm-parent-console.pm-parent-console .pmcal-event__clients {
  color: rgba(255,255,255,.88) !important;
  font-family: "Nunito", ui-rounded, system-ui, sans-serif !important;
  font-size: 12px !important; font-weight: 400 !important;
}
html body.pm-parent-console.pm-parent-console.pm-parent-console .pmcal-event__count {
  color: rgba(255,255,255,.72) !important;
  font-family: "Nunito", ui-rounded, system-ui, sans-serif !important;
  font-size: 11px !important; font-weight: 400 !important;
}
html body.pm-parent-console.pm-parent-console.pm-parent-console .pmcal-event__time,
html body.pm-parent-console.pm-parent-console.pm-parent-console .pmcal-event__time--centered {
  color: rgba(255,255,255,.95) !important;
  background: transparent !important; padding: 0 !important;
  font-family: "Nunito", ui-rounded, system-ui, sans-serif !important;
  font-size: 12px !important; font-weight: 400 !important;
  font-variant-numeric: tabular-nums !important;
}
html body.pm-parent-console.pm-parent-console.pm-parent-console .pmcal-event.is-cancelled { opacity: .5 !important; }
html body.pm-parent-console.pm-parent-console.pm-parent-console .pmcal-event.is-completed { filter: saturate(.6) !important; }
html body.pm-parent-console.pm-parent-console.pm-parent-console .pmcal-event-more {
  font-family: "Nunito", ui-rounded, system-ui, sans-serif !important;
  font-size: 12px !important; font-weight: 400 !important;
  color: #868E96 !important; padding: 2px 4px !important;
}
html body.pm-parent-console.pm-parent-console.pm-parent-console .pmcal-event-more:hover { color: var(--cal-accent) !important; }

/* Holiday + renewal keep LUNO's flat-chip language */
html body.pm-parent-console.pm-parent-console.pm-parent-console .pmcal-holiday {
  background: #E9ECEF !important; color: #495057 !important;
  border: none !important; border-radius: 4px !important;
  font-family: "Nunito", ui-rounded, system-ui, sans-serif !important;
  font-size: 12px !important; font-weight: 400 !important; padding: 3px 8px !important;
}
html body.pm-parent-console.pm-parent-console.pm-parent-console .pmcal-renewal {
  background: #FFA94D !important; color: #fff !important;
  border: none !important; border-radius: 4px !important;
  font-family: "Nunito", ui-rounded, system-ui, sans-serif !important;
  font-size: 11.5px !important; font-weight: 600 !important;
  letter-spacing: 0 !important; box-shadow: none !important; padding: 3px 8px !important;
}
html body.pm-parent-console.pm-parent-console.pm-parent-console .pmcal-renewal__dot { background: #fff !important; }

/* Week view — same lattice + bars */
html body.pm-parent-console.pm-parent-console.pm-parent-console .pmcal-week,
html body.pm-parent-console.pm-parent-console.pm-parent-console .pmcal-week-body,
html body.pm-parent-console.pm-parent-console.pm-parent-console .pmcal-week-cols,
html body.pm-parent-console.pm-parent-console.pm-parent-console .pmcal-week-timeaxis { background: #fff !important; border-color: var(--cal-line) !important; }
html body.pm-parent-console.pm-parent-console.pm-parent-console .pmcal-week-col { background: #fff !important; border-color: var(--cal-line) !important; }
html body.pm-parent-console.pm-parent-console.pm-parent-console .pmcal-week-col.is-today { background: var(--cal-today) !important; }
html body.pm-parent-console.pm-parent-console.pm-parent-console .pmcal-week-dayhead__wd,
html body.pm-parent-console.pm-parent-console.pm-parent-console .pmcal-week-timecell,
html body.pm-parent-console.pm-parent-console.pm-parent-console .pmcal-week-dayhead__num {
  font-family: "Nunito", ui-rounded, system-ui, sans-serif !important;
  font-weight: 400 !important; color: var(--cal-ink) !important; background: transparent !important;
}
html body.pm-parent-console.pm-parent-console.pm-parent-console .pmcal-week-dayhead.is-today .pmcal-week-dayhead__num { color: #212529 !important; }
html body.pm-parent-console.pm-parent-console.pm-parent-console .pmcal-week-event {
  background: var(--cal-accent) !important; color: #fff !important;
  border: none !important; border-radius: 4px !important; box-shadow: none !important;
}
html body.pm-parent-console.pm-parent-console.pm-parent-console .pmcal-week-event__title { color: #fff !important; font-weight: 600 !important; font-size: 13px !important; }
html body.pm-parent-console.pm-parent-console.pm-parent-console .pmcal-week-event__time  { color: rgba(255,255,255,.9) !important; font-weight: 400 !important; }

/* ── 9b. Accent palettes — DELETED 2026-08-16 ────────────────────────────
   The five `html[data-caltheme="…"]` overrides lived here, driven by the
   palette button in the header. Caleb: "delete the colour pallet it not
   needed anymore". Nothing else read the attribute, and the calendar's real
   accent is the base `--cal-accent: var(--kt-accent-bright,#4A9FF5)` declared on body.pm-parent-console
   in §9 — so removing these changes nothing visually, it just removes a
   setting that existed only because a button existed. */



/* ═══ PORTED §11 — PORTFOLIO TABS MATCHED TO THE CONSOLE ═══ */
/* ════════════════════════════════════════════════════════════════════════
   11. FAMILY PORTFOLIO TABS — matched to the console  (2026-08-16)

   Caleb's list: purple pills on Assistant/Client Calendar, heavy bold rows
   on Hours & Billing, and the Education tab. Everything below is scoped to
   body.pm-parent-console, so the SAME components keep their existing look for
   parents and assistants — this is the owner console's skin, not a rewrite.

   family-portfolio.js is untouched: its rows are built with INLINE styles
   (Inter, weight 500-600), which is why nearly everything here needs
   !important — an inline style outranks a normal rule, but not this.
   ════════════════════════════════════════════════════════════════════════ */

/* Nunito everywhere inside the portfolio, over the inline `font:` shorthands */
html body.pm-parent-console.pm-parent-console.pm-parent-console .pmpf__pane,
html body.pm-parent-console.pm-parent-console.pm-parent-console .pmpf__pane * {
  font-family: "Nunito", ui-rounded, system-ui, -apple-system, sans-serif !important;
}

/* ── 2 & 3. The family / assistant picker: outlined, not purple ── */
html body.pm-parent-console.pm-parent-console.pm-parent-console .pmpf__subchip {
  background: #fff !important;
  border: 1px solid var(--line, #E8EAF0) !important;
  border-radius: 999px !important;
  padding: 7px 15px 7px 8px !important;
  box-shadow: none !important;
  transition: border-color .15s ease, background .15s ease !important;
}
html body.pm-parent-console.pm-parent-console.pm-parent-console .pmpf__subchip:hover {
  background: #FAFBFD !important;
  border-color: #CDD3DE !important;
}
html body.pm-parent-console.pm-parent-console.pm-parent-console .pmpf__subchip.is-active {
  background: #fff !important;
  border-color: var(--kt-accent-bright,#4A9FF5) !important;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--kt-accent-bright,#4A9FF5) calc(.13 * 100%), transparent) !important;
}
/* The purple gradient avatar → a quiet neutral initial */
html body.pm-parent-console.pm-parent-console.pm-parent-console .pmpf__subchip-avatar {
  background: #F1F4F8 !important;
  color: #6B7280 !important;
  font-weight: 600 !important;
  font-size: 11.5px !important;
  box-shadow: none !important;
  border: none !important;
}
html body.pm-parent-console.pm-parent-console.pm-parent-console .pmpf__subchip.is-active .pmpf__subchip-avatar {
  background: var(--kt-accent-soft-bg,#EAF4FE) !important;
  color: var(--kt-accent-ink,#2E86E0) !important;
}
html body.pm-parent-console.pm-parent-console.pm-parent-console .pmpf__subchip-name {
  font-size: 13.5px !important;
  font-weight: 400 !important;
  color: #4B5563 !important;
  letter-spacing: 0 !important;
}
html body.pm-parent-console.pm-parent-console.pm-parent-console .pmpf__subchip.is-active .pmpf__subchip-name {
  color: #1A2130 !important;
  font-weight: 600 !important;
}

/* ── 5. Hours & Billing: entries, not headlines ──
   Every row ships `font:500 14px/1.35 Inter` on the title. At that weight a
   ledger reads like a list of headlines. Entries want to be readable and
   quiet; the NUMBERS are what should carry weight, so they keep theirs. */
html body.pm-parent-console.pm-parent-console.pm-parent-console .pmpf__pane [style*="font:500 14px/1.35"] {
  font-size: 13.5px !important;
  font-weight: 400 !important;
  color: #2C3341 !important;
  letter-spacing: 0 !important;
}
/* The date · type line — drop the italics, it fights the rounded face */
html body.pm-parent-console.pm-parent-console.pm-parent-console .pmpf__pane [style*="font:italic 400 12px/1.3"],
html body.pm-parent-console.pm-parent-console.pm-parent-console .pmpf__pane [style*="font:italic 400 12.5px"] {
  font-style: normal !important;
  font-size: 12px !important;
  color: #8A93A2 !important;
}
/* Card + section headings inside the statement */
html body.pm-parent-console.pm-parent-console.pm-parent-console .pmpf__pane [style*="font:600 16px"] {
  font-size: 15px !important;
  font-weight: 600 !important;
  color: #1A2130 !important;
  letter-spacing: 0 !important;
}
html body.pm-parent-console.pm-parent-console.pm-parent-console .pmpf__pane [style*="font:400 12px"] {
  font-size: 12.5px !important;
  color: #8A93A2 !important;
}
/* The +/- hours and running balance stay tabular and confident */
html body.pm-parent-console.pm-parent-console.pm-parent-console .pmpf__pane [style*="font:500 13.5px"] {
  font-weight: 600 !important;
  font-size: 13px !important;
}
/* Softer rules between entries */
html body.pm-parent-console.pm-parent-console.pm-parent-console .pmpf__pane [style*="border-top:1px solid rgba(0,0,0,.05)"] {
  border-top-color: #F1F2F6 !important;
}

/* ── 11. Education: cards on a page, not boxes in a row ── */
html body.pm-parent-console.pm-parent-console.pm-parent-console .pmpf-edu__cards { gap: 14px !important; }
html body.pm-parent-console.pm-parent-console.pm-parent-console .pmpf-edu__card {
  background: #fff !important;
  border: 1px solid var(--line, #E8EAF0) !important;
  border-radius: 14px !important;
  padding: 20px !important;
  box-shadow: 0 1px 2px rgba(16,24,40,.04) !important;
  transition: border-color .16s ease, box-shadow .16s ease !important;
}
html body.pm-parent-console.pm-parent-console.pm-parent-console .pmpf-edu__card:not(.pmpf-edu__card--soon):hover {
  border-color: var(--kt-accent-bright,#4A9FF5) !important;
  box-shadow: 0 6px 18px -6px color-mix(in srgb, var(--kt-accent-bright,#4A9FF5) calc(.22 * 100%), transparent) !important;
}
html body.pm-parent-console.pm-parent-console.pm-parent-console .pmpf-edu__cardTitle {
  font-size: 15.5px !important; font-weight: 600 !important;
  color: #1A2130 !important; letter-spacing: 0 !important; margin-bottom: 6px !important;
}
html body.pm-parent-console.pm-parent-console.pm-parent-console .pmpf-edu__cardDesc {
  font-size: 13px !important; font-weight: 400 !important;
  color: #77808F !important; line-height: 1.55 !important;
}
/* "Coming soon" reads as deliberate, not broken */
html body.pm-parent-console.pm-parent-console.pm-parent-console .pmpf-edu__card--soon {
  opacity: 1 !important;
  background: #FBFCFD !important;
  border-style: dashed !important;
  border-color: #E2E6EE !important;
}
html body.pm-parent-console.pm-parent-console.pm-parent-console .pmpf-edu__card--soon .pmpf-edu__cardTitle { color: #8A93A2 !important; }
/* The big emoji glyphs shrink into quiet marks */
html body.pm-parent-console.pm-parent-console.pm-parent-console .pmpf-edu__icon { font-size: 22px !important; margin-bottom: 12px !important; opacity: .9; }
/* Assignment rows */
html body.pm-parent-console.pm-parent-console.pm-parent-console .pmpf-edu__row {
  border: 1px solid var(--line, #E8EAF0) !important;
  border-radius: 11px !important;
  padding: 13px 15px !important;
  background: #fff !important;
}
html body.pm-parent-console.pm-parent-console.pm-parent-console .pmpf-edu__rowTitle {
  font-size: 13.5px !important; font-weight: 600 !important; color: #1A2130 !important;
}
html body.pm-parent-console.pm-parent-console.pm-parent-console .pmpf-edu__rowMeta {
  font-size: 12px !important; font-weight: 400 !important; color: #8A93A2 !important;
}
html body.pm-parent-console.pm-parent-console.pm-parent-console .pmpf-edu__status {
  border-radius: 999px !important; font-size: 11px !important;
  font-weight: 600 !important; padding: 3px 10px !important; letter-spacing: 0 !important;
}
html body.pm-parent-console.pm-parent-console.pm-parent-console .pmpf-edu__btn {
  border-radius: 9px !important; font-size: 12.5px !important;
  font-weight: 600 !important; letter-spacing: 0 !important;
}
html body.pm-parent-console.pm-parent-console.pm-parent-console .pmpf-edu__btn--primary {
  background: var(--kt-accent-bright,#4A9FF5) !important; border-color: var(--kt-accent-bright,#4A9FF5) !important; color: #fff !important;
}
html body.pm-parent-console.pm-parent-console.pm-parent-console .pmpf-edu__empty,
html body.pm-parent-console.pm-parent-console.pm-parent-console .pmpf-edu__loading {
  font-size: 13.5px !important; font-weight: 400 !important; color: #8A93A2 !important;
}



/* ═══ PORTED §12 — PORTFOLIO FINAL CONSISTENCY PASS ═══ */
/* ════════════════════════════════════════════════════════════════════════
   12. PORTFOLIO — final consistency pass  (2026-08-16)

   Caleb: Hours & Billing and Education are now the standard; bring every
   other pane to the same weight and scale.

   The rule applied throughout: ONE heading size per level across all panes
   (19px/600 section, 15px/600 card, 13.5px/400 body, 12px/400 meta). Before
   this, each pane invented its own — the calendar shouted at 27px while the
   Hours header sat at 15px, so moving between tabs felt like moving between
   products.

   Everything stays scoped to body.pm-parent-console; parents and assistants
   see these components unchanged.
   ════════════════════════════════════════════════════════════════════════ */

/* ── Section headings: one scale everywhere ── */
html body.pm-parent-console.pm-parent-console.pm-parent-console .pmpf__pane .pmcal-title,
html body.pm-parent-console.pm-parent-console.pm-parent-console .pmpf__pane .pmcal-sub {
  font-size: 13px !important;
  font-weight: 400 !important;
  color: #77808F !important;
}

/* ── Family Editor ──
   The four cards are a PREVIEW of what the editor produces, so the poster
   faces (Anton / Playfair) are left alone deliberately — flattening them
   would misrepresent the tool's output. What changes is the CHROME around
   them and the small caps labels, which were 800-weight on 13px text. */
html body.pm-parent-console.pm-parent-console.pm-parent-console .pmpf__pane [style*="font:800 13px/1.2"] {
  font-weight: 600 !important;
  letter-spacing: .01em !important;
  color: #1A2130 !important;
}
html body.pm-parent-console.pm-parent-console.pm-parent-console .pmpf__pane [style*="font:500 12px/1.55"] {
  font-weight: 400 !important;
  color: #4B5563 !important;
}
/* Card frames match Education's */
html body.pm-parent-console.pm-parent-console.pm-parent-console .pmpf-fe-card {
  border: 1px solid var(--line) !important;
  border-radius: 14px !important;
  box-shadow: 0 1px 2px rgba(16,24,40,.04) !important;
  transition: border-color .16s ease, box-shadow .16s ease !important;
}
html body.pm-parent-console.pm-parent-console.pm-parent-console .pmpf-fe-card:hover {
  border-color: var(--kt-accent-bright,#4A9FF5) !important;
  box-shadow: 0 6px 18px -6px color-mix(in srgb, var(--kt-accent-bright,#4A9FF5) calc(.22 * 100%), transparent) !important;
  transform: none !important;
}
/* The magenta CTA joins the console's single accent */
html body.pm-parent-console.pm-parent-console.pm-parent-console .pmpf__pane a[href*="family-editor"],
html body.pm-parent-console.pm-parent-console.pm-parent-console .pmpf__pane button[data-href*="family-editor"]:not(.pmpf-fe-card) {
  background: var(--kt-accent-bright,#4A9FF5) !important;
  border-color: var(--kt-accent-bright,#4A9FF5) !important;
  color: #fff !important;
  font-weight: 600 !important;
  border-radius: 10px !important;
  box-shadow: none !important;
  letter-spacing: 0 !important;
}

/* ── Blanket weight relief across every pane ──
   family-portfolio.js emits 700-900 weights inline in several places. At
   these text sizes that reads as shouting, not emphasis. Anything 700+ on
   BODY-sized text drops to 600; the poster mock above is exempt because it
   is deliberately display type, and numbers keep their weight because a
   ledger should be led by its figures. */
html body.pm-parent-console.pm-parent-console.pm-parent-console .pmpf__pane [style*="font:700"],
html body.pm-parent-console.pm-parent-console.pm-parent-console .pmpf__pane [style*="font:800"],
html body.pm-parent-console.pm-parent-console.pm-parent-console .pmpf__pane [style*="font-weight:700"],
html body.pm-parent-console.pm-parent-console.pm-parent-console .pmpf__pane [style*="font-weight:800"] {
  font-weight: 600 !important;
}
html body.pm-parent-console.pm-parent-console.pm-parent-console .pmpf__pane h1,
html body.pm-parent-console.pm-parent-console.pm-parent-console .pmpf__pane h2,
html body.pm-parent-console.pm-parent-console.pm-parent-console .pmpf__pane h3,
html body.pm-parent-console.pm-parent-console.pm-parent-console .pmpf__pane h4 {
  font-weight: 600 !important;
  letter-spacing: 0 !important;
  color: #1A2130 !important;
}
/* Restore the display faces the editor preview needs */
html body.pm-parent-console.pm-parent-console.pm-parent-console .pmpf__pane [style*="Anton"],
html body.pm-parent-console.pm-parent-console.pm-parent-console .pmpf__pane [style*="Playfair"] {
  font-weight: inherit !important;
}

/* ── Cards + rows: one frame language ── */
html body.pm-parent-console.pm-parent-console.pm-parent-console .pmpf__pane .nx-card,
html body.pm-parent-console.pm-parent-console.pm-parent-console .pmpf__pane .pmpf-jcard {
  border: 1px solid var(--line) !important;
  border-radius: 12px !important;
  box-shadow: 0 1px 2px rgba(16,24,40,.04) !important;
}
/* Uppercase micro-labels stop being heavy */
html body.pm-parent-console.pm-parent-console.pm-parent-console .pmpf__pane [style*="text-transform:uppercase"] {
  font-weight: 600 !important;
  letter-spacing: .06em !important;
}

/* ── Assistant Availability legend + grid ── */
html body.pm-parent-console.pm-parent-console.pm-parent-console .pmpf__pane .availability-legend,
html body.pm-parent-console.pm-parent-console.pm-parent-console .pmpf__pane [class*="legend"] {
  font-size: 12.5px !important;
  font-weight: 400 !important;
  color: #77808F !important;
}



/* ═══ PORTED §14 — ASSISTANT AVAILABILITY CALENDAR ═══ */
   §14 — ASSISTANT AVAILABILITY CALENDAR (owner console only)   2026-08-16
   Caleb: "the calendar days 1234 are very bold and thick i want it more clean
   and not soo bold and heavy weight please".

   js/availability-mini-calendar.js injects its own <style> at runtime and is
   SHARED with client-dashboard.html (families see the same component). So every
   rule here is scoped to html body.pm-parent-console.pm-parent-console.pm-parent-console — families keep the calendar
   exactly as it is — and carries !important, because the component's styles are
   injected into <head> after this stylesheet loads.

   Weights only, plus the purple today-ring → console blue (Caleb has rejected
   purple throughout this redesign). The blackout tints are LEFT ALONE: they are
   the legend's meaning, not decoration.
   ========================================================================== */
html body.pm-parent-console.pm-parent-console.pm-parent-console .pmac-head__title {
  font: 600 15px Nunito, Inter, sans-serif !important;
  color: #1A2130 !important; letter-spacing: 0 !important;
}
html body.pm-parent-console.pm-parent-console.pm-parent-console .pmac-head__sub {
  font: 400 12.5px Nunito, Inter, sans-serif !important; color: #8A93A2 !important;
}

/* Month label + arrows — regular weight, quiet chrome */
html body.pm-parent-console.pm-parent-console.pm-parent-console .pmac-nav__label {
  font: 600 14px Nunito, Inter, sans-serif !important;
  color: #1A2130 !important; letter-spacing: 0 !important;
}
html body.pm-parent-console.pm-parent-console.pm-parent-console .pmac-nav__btn {
  font-weight: 400 !important; color: #77808F !important;
  border-color: #E7EAF0 !important; border-radius: 8px !important;
}
html body.pm-parent-console.pm-parent-console.pm-parent-console .pmac-nav__btn:hover {
  background: var(--kt-accent-soft-bg,#EAF4FE) !important; border-color: var(--pc-accent-border,#BFD9F8) !important; color: var(--kt-accent-ink,#2E86E0) !important;
}

/* Weekday header row — uppercase micro-label, same idiom as the KPI labels */
html body.pm-parent-console.pm-parent-console.pm-parent-console .pmac-dayhead {
  font: 500 10px Nunito, Inter, sans-serif !important;
  color: #98A1B0 !important; letter-spacing: .1em !important;
}
html body.pm-parent-console.pm-parent-console.pm-parent-console .pmac-dayhead-row { background: #FBFCFD !important; }

/* THE FIX Caleb asked for: 700 → 400. Day numbers are a coordinate, not a
   headline — nothing on a month grid needs bold to be found. */
html body.pm-parent-console.pm-parent-console.pm-parent-console .pmac-cell__num {
  font: 400 13px Nunito, Inter, sans-serif !important;
  color: #4A5261 !important; line-height: 1 !important;
}
html body.pm-parent-console.pm-parent-console.pm-parent-console .pmac-cell--outside .pmac-cell__num {
  font-weight: 400 !important; color: #C7CDD6 !important;
}

/* Today: console blue ring, and the only day number that steps up in weight */
html body.pm-parent-console.pm-parent-console.pm-parent-console .pmac-cell--today { box-shadow: inset 0 0 0 1.5px var(--kt-accent-bright,#4A9FF5) !important; }
html body.pm-parent-console.pm-parent-console.pm-parent-console .pmac-cell--today .pmac-cell__num {
  color: var(--kt-accent-ink,#2E86E0) !important; font-weight: 600 !important;
}

/* Legend + in-cell time pills — lighter, no all-caps shouting */
html body.pm-parent-console.pm-parent-console.pm-parent-console .pmac-legend {
  font-weight: 400 !important; font-size: 11.5px !important;
  color: #77808F !important; border-color: #EDF0F4 !important;
  background: #FBFCFD !important; border-radius: 8px !important;
}
html body.pm-parent-console.pm-parent-console.pm-parent-console .pmac-cell__chip {
  font: 500 10px Nunito, Inter, sans-serif !important; letter-spacing: 0 !important;
}
html body.pm-parent-console.pm-parent-console.pm-parent-console .pmac-cell__chip--more { font-weight: 400 !important; }
html body.pm-parent-console.pm-parent-console.pm-parent-console .pmac-empty__title {
  font: 600 14px Nunito, Inter, sans-serif !important; color: #1A2130 !important;
}
html body.pm-parent-console.pm-parent-console.pm-parent-console .pmac-popover__title {
  font: 600 13.5px Nunito, Inter, sans-serif !important; color: #1A2130 !important;
}
html body.pm-parent-console.pm-parent-console.pm-parent-console .pmac-popover__sentence { font-weight: 400 !important; }


/* ════════════════════════════════════════════════════════════════════════
   §15 — CLIENT-ONLY WIDGETS (hand-authored — sits AFTER the ported block
   on purpose; the port regenerates §6–§14 only, from its marker to this
   banner).  2026-08-16

   The widgets the admin dashboard has no counterpart for, taken to the same
   scale the admin console settled on: 600 max on anything textual, the
   §13 chart-foot idiom for stat figures, colour only where it is a signal.
   ════════════════════════════════════════════════════════════════════════ */

/* "View calendar →" and the task tabs in card heads */
html body.pm-parent-console.pm-parent-console.pm-parent-console .nx-card__cta {
  font-family: "Nunito", ui-rounded, system-ui, sans-serif !important;
  font-size: 12.5px !important; font-weight: 600 !important;
  color: var(--kt-accent-ink, var(--kt-accent-bright, #007aff)) !important;
  text-decoration: none !important;
}
html body.pm-parent-console.pm-parent-console.pm-parent-console .nx-task-tab {
  font-family: "Nunito", ui-rounded, system-ui, sans-serif !important;
  font-size: 12.5px !important; font-weight: 400 !important;
  color: #77808F !important; background: #F3F5F9 !important;
  border: none !important; border-radius: 999px !important;
  padding: 6px 13px !important; box-shadow: none !important;
}
html body.pm-parent-console.pm-parent-console.pm-parent-console .nx-task-tab.is-active {
  background: var(--kt-accent-soft-bg, #EAF4FE) !important;
  color: var(--kt-accent-ink, var(--kt-accent-bright, #007aff)) !important;
  font-weight: 600 !important;
}

/* Attendance + Session Rating figures — the §13 chart-foot idiom: these sit
   under a chart, so they are a footnote to it, not a second KPI row. */
html body.pm-parent-console.pm-parent-console.pm-parent-console .nx-attstat__num {
  font-family: "Nunito", ui-rounded, system-ui, sans-serif !important;
  font-size: 21px !important; font-weight: 600 !important;
  color: #1A2130 !important; letter-spacing: 0 !important;
  font-variant-numeric: tabular-nums !important;
}
html body.pm-parent-console.pm-parent-console.pm-parent-console .nx-attstat__label {
  font-family: "Nunito", ui-rounded, system-ui, sans-serif !important;
  font-size: 11px !important; font-weight: 400 !important;
  letter-spacing: .06em !important; text-transform: uppercase !important;
  color: #ADB5BD !important;
}
/* The little legend dot before each label is a KEY (it matches the chart
   series), not decoration — it stays. Only its neighbours calm down. */

/* Session Rating card — the amber wash and twelve twinkling sparkles are the
   old design's voice. The console states a 5.0 plainly and lets it be
   impressive on its own. */
html body.pm-parent-console.pm-parent-console.pm-parent-console .sr-card { background: #fff !important; }
html body.pm-parent-console.pm-parent-console.pm-parent-console .sr-card__spark { display: none !important; }

/* Upcoming session rows — neutral date square (the admin roster treatment),
   600 names, 400 metadata. The "reserved" pill goes quiet chip. */
html body.pm-parent-console.pm-parent-console.pm-parent-console .nx-up__date {
  background: #F3F5F9 !important; border: none !important;
  border-radius: 10px !important; box-shadow: none !important;
  color: #6B7280 !important;
}
html body.pm-parent-console.pm-parent-console.pm-parent-console .nx-up__day {
  font-family: "Nunito", ui-rounded, system-ui, sans-serif !important;
  font-size: 10px !important; font-weight: 600 !important;
  letter-spacing: .08em !important; text-transform: uppercase !important;
  color: #98A1B0 !important;
}
html body.pm-parent-console.pm-parent-console.pm-parent-console .nx-up__num {
  font-family: "Nunito", ui-rounded, system-ui, sans-serif !important;
  font-size: 19px !important; font-weight: 600 !important; color: #1A2130 !important;
}
html body.pm-parent-console.pm-parent-console.pm-parent-console .nx-up__time {
  font-family: "Nunito", ui-rounded, system-ui, sans-serif !important;
  font-size: 14px !important; font-weight: 600 !important; color: #1A2130 !important;
}
html body.pm-parent-console.pm-parent-console.pm-parent-console .nx-up__with,
html body.pm-parent-console.pm-parent-console.pm-parent-console .nx-up__type {
  font-family: "Nunito", ui-rounded, system-ui, sans-serif !important;
  font-size: 12.5px !important; font-weight: 400 !important; color: #8A93A2 !important;
}

/* Empty states — dashed quiet, same as the admin console's */
html body.pm-parent-console.pm-parent-console.pm-parent-console .nx-empty {
  font-family: "Nunito", ui-rounded, system-ui, sans-serif !important;
  font-size: 13px !important; font-weight: 400 !important; color: #8A93A2 !important;
}

/* ════════════════════════════════════════════════════════════════════════
   §16 — FAMILY-VIEW CALENDAR CHIPS + HEADER BELL (hand-authored)  2026-08-16

   (a) Chips. The ported §9 was written against the ADMIN calendar, whose
   chips are aggregates (assistant / clients / count as block spans). The
   FAMILY view renders `<span __time><span __title>` INLINE — two spans with
   no separator and no wrap rule, which is exactly what Caleb screenshotted:
   "10:00 a.m.Personal Support Session" jammed into one clipped line and
   "CANCELLEDNO APPOINTMENT" concatenated. The spans become stacked lines —
   time above, title below, title allowed two lines then ellipsis — so every
   box shows its contents like the admin's do.
   ════════════════════════════════════════════════════════════════════════ */
html body.pm-parent-console.pm-parent-console.pm-parent-console .pmcal-event {
  min-width: 0 !important; max-width: 100% !important;
  overflow: hidden !important; text-align: left !important;
}
html body.pm-parent-console.pm-parent-console.pm-parent-console .pmcal-event__time,
html body.pm-parent-console.pm-parent-console.pm-parent-console .pmcal-event__time--centered {
  display: block !important;
  font-size: 10.5px !important; font-weight: 600 !important;
  letter-spacing: .02em !important; line-height: 1.3 !important;
  margin: 0 0 1px !important; white-space: nowrap !important;
  overflow: hidden !important; text-overflow: ellipsis !important;
}
html body.pm-parent-console.pm-parent-console.pm-parent-console .pmcal-event__title {
  display: -webkit-box !important;
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 2 !important;
  overflow: hidden !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
  font-size: 12px !important; font-weight: 600 !important; line-height: 1.3 !important;
}

/* (b) The notification strip joins the header pill bar, to the RIGHT of
   Grades (Caleb: "thats where all the other notifications live"). The NODE
   IS MOVED, never rebuilt — js/parent-console-rail.js appends #nxNotifStrip
   into #parActions, so the trigger's toggle, the badge writer and every
   panel listener stay attached. These rules restyle it for the bar: the
   trigger collapses to a bell + badge, the panel becomes a right-anchored
   dropdown. The admin's bell rule applies here too: A BELL EXISTS whether or
   not there are notifications — the strip's own empty-state [hidden] no
   longer removes it from the header; it only hides the badge. */
html body.pm-parent-console.pm-parent-console.pm-parent-console #parActions #nxNotifStrip {
  display: block !important;              /* overrides the strip's self-hide */
  position: relative !important;
  margin: 0 0 0 4px !important;
}
html body.pm-parent-console.pm-parent-console.pm-parent-console #parActions #nxNotifStrip .nx-notif-trigger {
  min-height: 0 !important; width: 38px !important; height: 34px !important;
  padding: 0 !important; border: none !important; border-radius: 999px !important;
  background: transparent !important; box-shadow: none !important;
  display: grid !important; place-items: center !important; cursor: pointer !important;
}
html body.pm-parent-console.pm-parent-console.pm-parent-console #parActions #nxNotifStrip .nx-notif-trigger:hover { background: rgba(255,255,255,.2) !important; }
html body.pm-parent-console.pm-parent-console.pm-parent-console #parActions #nxNotifStrip .nx-notif-trigger__text,
html body.pm-parent-console.pm-parent-console.pm-parent-console #parActions #nxNotifStrip .nx-notif-trigger__chev { display: none !important; }
html body.pm-parent-console.pm-parent-console.pm-parent-console #parActions #nxNotifStrip .nx-notif-trigger__icon { position: relative !important; color: #EEF1FF !important; }
html body.pm-parent-console.pm-parent-console.pm-parent-console #parActions #nxNotifStrip .nx-notif-trigger__icon svg { width: 17px !important; height: 17px !important; }
html body.pm-parent-console.pm-parent-console.pm-parent-console #parActions #nxNotifStrip .nx-notif-trigger__badge {
  position: absolute !important; top: -7px !important; right: -8px !important;
  min-width: 17px !important; height: 17px !important; padding: 0 4px !important;
  background: #EF5B5B !important; color: #fff !important; border-radius: 999px !important;
  font-size: 10px !important; font-weight: 700 !important; line-height: 17px !important;
  text-align: center !important; border: 2px solid var(--kt-chrome-deep, #0b3d6b) !important;
}
/* Empty state: bell yes, badge no. */
html body.pm-parent-console.pm-parent-console.pm-parent-console #parActions #nxNotifStrip[hidden] .nx-notif-trigger__badge { display: none !important; }
/* Panel → dropdown card under the bar's right edge */
html body.pm-parent-console.pm-parent-console.pm-parent-console #parActions #nxNotifStrip .nx-notif-panel {
  position: absolute !important; top: calc(100% + 12px) !important; right: 0 !important;
  left: auto !important; z-index: 70 !important;
  width: 400px !important; max-width: calc(100vw - 40px) !important;
  max-height: 62vh !important; overflow-y: auto !important;
  background: #fff !important; border: 1px solid #E6EAF0 !important;
  border-radius: 14px !important;
  box-shadow: 0 24px 60px -18px rgba(16,24,40,.36) !important;
}

/* ════════════════════════════════════════════════════════════════════════
   §17 — NOTIFICATION PANEL, MADE READABLE  2026-08-16

   Caleb: "its very small window to scroll in and the 2 buttom cards i guess
   are reminders but i cant see the scrolling screen … the view all
   notifications needs to be somewhere more normal and stuff this seems
   messy."

   TWO REAL DEFECTS, not taste:

   1. NESTED SCROLLERS. `.nx-notif-scroll` caps itself at 272px ("≈4 rows")
      because it was built for a panel that grew down the PAGE. §16 then made
      the panel itself a 62vh scroller for the header dropdown. A 272px box
      scrolling inside a ~600px box scrolling inside the page is why the
      window felt tiny and the reminders were unreachable. The inner cap is
      removed and THE PANEL IS THE ONLY SCROLLER.

   2. "View all" LANDED MID-PANEL. Its DOM position is inside #nxNotifDynamic
      (which is `display:contents`, so its children are direct flex items of
      the panel) — and the two standing reminder cards (#bankStrip,
      #lowHoursBanner) are panel children that come AFTER it. So the button
      rendered between the feed and the reminders, reading like a divider in
      the middle of the content. `order` puts it last and `position:sticky`
      pins it to the bottom edge, where a footer action belongs; "Mark all
      read" is pinned to the top the same way.

   No markup and no JS changed — the renderer still emits the same nodes in
   the same order, so every click handler it wires stays exactly as it is.
   ════════════════════════════════════════════════════════════════════════ */
/* :not([hidden]) IS LOad-BEARING — see the note below. */
html body.pm-parent-console.pm-parent-console.pm-parent-console #parActions #nxNotifStrip .nx-notif-panel:not([hidden]) {
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
  width: 440px !important;
  max-height: min(640px, 74vh) !important;
  overflow-y: auto !important;
  overscroll-behavior: contain !important;
  padding: 10px !important;
  scrollbar-width: thin !important;
}
/* ⚠ THE PANEL OPENED ITSELF ON EVERY LOAD — my bug, fixed 2026-08-16.
   Caleb: "every time i reload i see the weird reminder two cards then it
   flows into this notification pop out … it wont go away."

   Cause: the rule above originally read `display: flex !important` with no
   :not([hidden]). The page hides this panel the standard way — the `hidden`
   ATTRIBUTE, honoured by `.nx-notif-panel[hidden]{display:none}` — and that
   rule carries no !important. So my declaration outranked it and the panel
   was displayed unconditionally: open at first paint, and the trigger's
   `panel.hidden = true` had no visible effect because CSS kept showing it.
   Nothing was wrong with the toggle; the state was correct and the styling
   ignored it.

   RULE: never style an element's `display` with !important unless the
   selector also respects however that element is hidden. */
html body.pm-parent-console.pm-parent-console.pm-parent-console #parActions #nxNotifStrip .nx-notif-panel[hidden] {
  display: none !important;
}
/* The inner window stops being a window. */
html body.pm-parent-console.pm-parent-console.pm-parent-console #parActions #nxNotifStrip .nx-notif-scroll {
  max-height: none !important;
  overflow: visible !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
  order: 2 !important;
}
/* Mark all read — pinned top */
html body.pm-parent-console.pm-parent-console.pm-parent-console #parActions #nxNotifStrip .nx-notif-markall {
  order: 1 !important;
  position: sticky !important; top: -10px !important; z-index: 2 !important;
  align-self: flex-end !important;
  /* flex-shrink:0 — the panel is a flex column that overflows, and a flex
     item's DEFAULT is to shrink. Measured live: the footer squashed 45px→25px
     before this was added. Pinned chrome must never absorb the overflow. */
  flex-shrink: 0 !important;
  background: #fff !important;
  padding: 4px 6px 8px !important; margin: 0 !important;
  font-family: "Nunito", ui-rounded, system-ui, sans-serif !important;
  font-size: 12px !important; font-weight: 600 !important;
  color: var(--kt-accent-ink, var(--kt-accent-bright, #007aff)) !important;
}
/* The standing reminders sit after the feed, before the footer. */
html body.pm-parent-console.pm-parent-console.pm-parent-console #parActions #nxNotifStrip #bankStrip,
html body.pm-parent-console.pm-parent-console.pm-parent-console #parActions #nxNotifStrip #lowHoursBanner,
html body.pm-parent-console.pm-parent-console.pm-parent-console #parActions #nxNotifStrip #counterPendingBanner {
  order: 3 !important;
  flex-shrink: 0 !important;
}
/* View all — a real footer, pinned to the bottom edge */
html body.pm-parent-console.pm-parent-console.pm-parent-console #parActions #nxNotifStrip .nx-notif-viewall {
  order: 4 !important;
  position: sticky !important; bottom: -10px !important; z-index: 2 !important;
  flex-shrink: 0 !important;        /* see the markall note above */
  margin: 0 !important;
  padding: 12px 14px !important;
  background: #fff !important;
  border: none !important; border-top: 1px solid #EDF0F4 !important;
  border-radius: 0 !important;
  font-family: "Nunito", ui-rounded, system-ui, sans-serif !important;
  font-size: 13px !important; font-weight: 600 !important; letter-spacing: 0 !important;
  color: var(--kt-accent-ink, var(--kt-accent-bright, #007aff)) !important;
}
/* Rows: console type, and room to breathe */
html body.pm-parent-console.pm-parent-console.pm-parent-console #parActions #nxNotifStrip .nx-notif-item {
  border-radius: 10px !important;
  padding: 11px 12px !important;
}
html body.pm-parent-console.pm-parent-console.pm-parent-console #parActions #nxNotifStrip .nx-notif-item__title {
  font-family: "Nunito", ui-rounded, system-ui, sans-serif !important;
  font-size: 13.5px !important; font-weight: 600 !important;
  color: #1A2130 !important; line-height: 1.35 !important;
}
html body.pm-parent-console.pm-parent-console.pm-parent-console #parActions #nxNotifStrip .nx-notif-item__sub {
  font-family: "Nunito", ui-rounded, system-ui, sans-serif !important;
  font-size: 12.5px !important; font-weight: 400 !important;
  color: #77808F !important; line-height: 1.5 !important;
}
html body.pm-parent-console.pm-parent-console.pm-parent-console #parActions #nxNotifStrip .nx-notif-item__cta {
  font-family: "Nunito", ui-rounded, system-ui, sans-serif !important;
  font-size: 12.5px !important; font-weight: 600 !important;
  color: var(--kt-accent-ink, var(--kt-accent-bright, #007aff)) !important;
}

/* ── §18. TOP BLOCK — the owner console's exact heading scale  2026-08-16 ──
   Caleb: "'Dashboard / Good afternoon, Michael — here's your snapshot.' it
   looks very basic ans very not nice. make it clean like admin has there
   very top part."

   Both dashboards use the same classes (.nx-h1 / .nx-sub), so these are
   admin-console.css §4's values verbatim: 26px/600 heading, 14px/400 muted
   subline. The page's own rule was 32px/800 with -.025em tracking — the
   heavy black slab in the screenshot. Markup was also swapped so the
   GREETING leads and the date sits under it, matching admin's shape. */
html body.pm-parent-console.pm-parent-console.pm-parent-console .nx-h1 {
  font-family: "Nunito", ui-rounded, system-ui, -apple-system, sans-serif !important;
  font-size: 26px !important; font-weight: 600 !important;
  letter-spacing: 0 !important; color: #1A2130 !important;
  line-height: 1.2 !important; margin: 0 0 6px !important;
}
html body.pm-parent-console.pm-parent-console.pm-parent-console .nx-sub {
  font-family: "Nunito", ui-rounded, system-ui, -apple-system, sans-serif !important;
  font-size: 14px !important; font-weight: 400 !important;
  color: #77808F !important; margin: 0 !important;
}
html body.pm-parent-console.pm-parent-console.pm-parent-console .nx-head { margin-bottom: 26px !important; }

/* ── §19. SETTINGS GEAR — one home for the three loose controls  2026-08-16 ──
   Install App, the colour palette and the language picker were three
   different shapes sitting side by side in the header. They now live in one
   gear popover beside the user pod (js/parent-console-rail.js buildSettings()
   MOVES the existing nodes in — their own scripts still own their behaviour).
   Rows are labelled so each control reads as a setting rather than a stray
   button, and the moved controls are normalised to sit on a light surface. */
html body.pm-parent-console.pm-parent-console.pm-parent-console .ppr-gear { position: relative; margin-left: 4px; }
html body.pm-parent-console.pm-parent-console.pm-parent-console .ppr-gear__btn {
  width: 38px; height: 34px; display: grid; place-items: center;
  border: none; border-radius: 999px; background: transparent;
  color: #EEF1FF; cursor: pointer; transition: background .16s ease;
}
html body.pm-parent-console.pm-parent-console.pm-parent-console .ppr-gear__btn svg { width: 18px; height: 18px; }
html body.pm-parent-console.pm-parent-console.pm-parent-console .ppr-gear__btn:hover,
html body.pm-parent-console.pm-parent-console.pm-parent-console .ppr-gear__btn[aria-expanded="true"] { background: rgba(255,255,255,.2); }

html body.pm-parent-console.pm-parent-console.pm-parent-console .ppr-gear__pop {
  position: absolute; top: calc(100% + 12px); right: 0; z-index: 70;
  width: 268px; padding: 6px;
  background: #fff; border: 1px solid #E6EAF0; border-radius: 14px;
  box-shadow: 0 24px 60px -18px rgba(16,24,40,.36);
}
html body.pm-parent-console.pm-parent-console.pm-parent-console .ppr-gear__pop[hidden] { display: none; }
html body.pm-parent-console.pm-parent-console.pm-parent-console .ppr-gear__hd {
  padding: 9px 10px 7px; font-family: "Nunito", ui-rounded, system-ui, sans-serif;
  font-size: 11px; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; color: #98A1B0;
}
html body.pm-parent-console.pm-parent-console.pm-parent-console .ppr-gear__row {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 9px 10px; border-radius: 10px; transition: background .15s ease;
}
html body.pm-parent-console.pm-parent-console.pm-parent-console .ppr-gear__row:hover { background: #F7F9FC; }
html body.pm-parent-console.pm-parent-console.pm-parent-console .ppr-gear__row[hidden] { display: none; }
html body.pm-parent-console.pm-parent-console.pm-parent-console .ppr-gear__lbl {
  font-family: "Nunito", ui-rounded, system-ui, sans-serif;
  font-size: 13.5px; font-weight: 400; color: #2C3341; white-space: nowrap;
}
/* The adopted controls: they were styled for a dark header bar; on this light
   card they need neutral chrome. Their own panels keep their own styling. */
html body.pm-parent-console.pm-parent-console.pm-parent-console .ppr-gear__row [data-pm-install] {
  background: var(--kt-accent-bright, #007aff) !important;
  color: #fff !important; border-radius: 9px !important;
  padding: 7px 12px !important; font-size: 12px !important; font-weight: 600 !important;
}
html body.pm-parent-console.pm-parent-console.pm-parent-console .ppr-gear__row #ktHdr,
html body.pm-parent-console.pm-parent-console.pm-parent-console .ppr-gear__row #pmLang { position: relative; }
html body.pm-parent-console.pm-parent-console.pm-parent-console .ppr-gear__row .kt-hdr__btn,
html body.pm-parent-console.pm-parent-console.pm-parent-console .ppr-gear__row .pmlang__btn {
  color: #4A5261 !important; background: #F3F5F9 !important;
  border: none !important; border-radius: 9px !important;
}