/* ============================================================
   Minda — Custom daisyUI v5 Theme
   ============================================================
   Load AFTER daisyui.css, BEFORE @tailwindcss/browser.
   Activate with: <html data-theme="minda">
   ============================================================ */

/* --- Base font size — scales all rem-based sizes in daisyUI + Tailwind --- */
html { font-size: 16px; }

/* --- Global Minda brand tokens (always available) --- */
:root {
  /* Competence colours */
  --mindasi-focus      : #f5467d;
  --mindasi-hunger     : #92c57b;
  --mindasi-tenacity   : #4573c5;
  --mindasi-empathy    : #ffab41;
  --mindasi-control    : #888888;
  --mindasi-motivation : #ffd21f;   /* motivation marker (the rounded star) — pure yellow (clear of the empathy orange) */

  /* Brand aliases */
  --mindasi-primary    : #f5467d;
  --mindasi-secondary  : #ffab41;
  --mindasi-text       : #212529;
  --mindasi-light-red  : #f9f1f1;
  --mindasi-lighter-red: #fffdfd;
  --mindasi-dark-red   : #220000;
  --mindasi-red-hover  : #f46391;

  /*
   * Semantic text hierarchy — use these instead of text-base-content/X.
   * Warm-grey tones that complement the dark-red brand colour.
   *
   *   .text-muted   — secondary / label text  (descriptions, subtitles, hints)
   *   .text-subtle  — tertiary / peripheral    (captions, copyright, placeholders)
   */
  --mindasi-text-muted  : oklch(37% 0.03 28);   /* ≈ #5a4040 */
  --mindasi-text-subtle : oklch(53% 0.025 28);  /* ≈ #8a6868 */
}

/* --- Semantic text utilities — use instead of text-base-content/{opacity} --- */
.text-muted  { color: var(--mindasi-text-muted)  !important; }
.text-subtle { color: var(--mindasi-text-subtle) !important; }

/* --- daisyUI "minda" theme --- */
[data-theme="minda"] {
  color-scheme: light;

  /* Primary: mindasi-red  #f5467d */
  --color-primary         : oklch(57.5% 0.223 353);
  --color-primary-content : oklch(100% 0 0);

  /* Secondary: mindasi-orange  #ffab41 */
  --color-secondary        : oklch(80.5% 0.165 69);
  --color-secondary-content: oklch(20% 0.01 69);

  /* Accent: mindasi-green  #92c57b */
  --color-accent           : oklch(74% 0.122 140);
  --color-accent-content   : oklch(100% 0 0);

  /* Neutral: #220000 dark red — sidebar bg, avatar circle */
  --color-neutral          : oklch(15.8% 0.065 29);
  --color-neutral-content  : oklch(83% 0.01 353);

  /* Base surfaces */
  --color-base-100         : oklch(100% 0 0);
  --color-base-200         : oklch(97.5% 0.006 353);
  --color-base-300         : oklch(93% 0.010 353);
  /* Base content text: #220000 dark red */
  --color-base-content     : oklch(15.8% 0.065 29);

  /* Semantic: info — blue #2563eb */
  --color-info             : oklch(54% 0.19 264);
  --color-info-content     : oklch(100% 0 0);

  /* Semantic: success — green #16a34a */
  --color-success          : oklch(57% 0.165 150);
  --color-success-content  : oklch(100% 0 0);

  /* Semantic: warning — yellow #ca8a04 */
  --color-warning          : oklch(67% 0.165 82);
  --color-warning-content  : oklch(20% 0.05 82);

  /* Semantic: error — red #dc2626 */
  --color-error            : oklch(55% 0.22 27);
  --color-error-content    : oklch(100% 0 0);

  /* Shape */
  --radius-box      : 0.4rem;
  --radius-field    : 0.3rem;
  --radius-selector : 0.2rem;
  --radius-badge    : 9999px;
  --border          : 1px;
}

/* --- Sidebar menu overrides — rounded items with hover bg --- */
[data-theme="minda"] .sidebar-menu,
[data-theme="minda"] .sidebar-menu ul,
[data-theme="minda"] .sidebar-menu li {
  width: 100%;
}
[data-theme="minda"] .sidebar-menu li > *:not(ul):not(details):not(.sidebar-fold),
[data-theme="minda"] .sidebar-menu li > details > summary {
  border-radius: var(--radius-field);
  padding-left:  0.75rem;
  padding-right: 0.75rem;
  width: 100%;
}

/* Hover state */
[data-theme="minda"] .sidebar-menu li > *:not(ul):not(details):not(.sidebar-fold):not(.sidebar-active):hover,
[data-theme="minda"] .sidebar-menu li > details > summary:not(.sidebar-active):hover {
  background-color: color-mix(in oklch, var(--color-neutral-content) 10%, transparent);
}

/* Collapsible groups (components/Sidebar.js): the fold wrapper is layout only, never an item. */
/* daisyUI styles every non-list child of a menu <li> as an item row (grid-auto-flow: column,
   align-items: center, padding…) — unlayered, so it beats Tailwind's utilities. Undo it here, or
   the closed fold's content keeps its height and spills over the rows below. */
.sidebar-fold { align-items: stretch; overflow: hidden; }
[data-theme="minda"] .sidebar-menu li > .sidebar-fold {
  padding: 0; gap: 0; background: none; grid-auto-flow: row; grid-auto-columns: auto; user-select: auto;
}
/* The bar that fills under a closed group's title while the mouse rests on it; when it is full the
   group opens. Its duration must match DWELL in Sidebar.js. */
.sidebar-arm { width: 0; animation: sidebar-arm 600ms linear forwards; }
@keyframes sidebar-arm { from { width: 0; } to { width: 100%; } }

/* Active nav item — light overlay bg + primary text */
[data-theme="minda"] .sidebar-active {
  background-color: rgba(255, 255, 255, 0.12);
  color: var(--color-secondary) !important;
  font-weight: 600;
}
[data-theme="minda"] .sidebar-active:hover {
  background-color: rgba(255, 255, 255, 0.12);
}

/* --- Alert overrides — light bg + coloured border --- */
[data-theme="minda"] .alert-error {
  background-color : oklch(96% 0.022 27);
  border           : 1px solid oklch(55% 0.22 27);
  color            : oklch(38% 0.18 27);
}
[data-theme="minda"] .alert-success {
  background-color : oklch(96% 0.020 150);
  border           : 1px solid oklch(57% 0.165 150);
  color            : oklch(35% 0.13 150);
}
[data-theme="minda"] .alert-warning {
  background-color : oklch(97% 0.025 82);
  border           : 1px solid oklch(67% 0.165 82);
  color            : oklch(35% 0.10 82);
}
[data-theme="minda"] .alert-info {
  background-color : oklch(96% 0.020 264);
  border           : 1px solid oklch(54% 0.19 264);
  color            : oklch(35% 0.14 264);
}

/* --- Sidebar scrollbar — always hidden --- */
.sidebar-scroll {
  scrollbar-width: none;
}
.sidebar-scroll::-webkit-scrollbar {
  display: none;
}

/* ─── DataTable (js/components/DataTable.js) ─────────────────────────────────── */

/* Vertical-scroll max-heights (scroll="y"/"both") */
.dt-max-sm { max-height: 20rem; }
.dt-max-md { max-height: 32rem; }
.dt-max-lg { max-height: 48rem; }

/* Frozen (sticky) leading columns. Each frozen th/td gets an inline `left` offset. */
[data-theme="minda"] .dt-frozen {
  position: sticky;
  z-index: 2;
  background-color: var(--color-base-100, #fff);
}
/* thead cells sit above body cells when both are frozen + pinned */
[data-theme="minda"] thead .dt-frozen { z-index: 3; }
/* The shadow is cast per CELL, so the spread must not be negative: a negative spread shrinks the
   shadow box on every side, including top and bottom, leaving a gap at each row boundary that reads as
   a dashed edge down the table. Zero spread lets consecutive cells' shadows meet. Kept small and light
   — it only has to say "this column is pinned", not draw a border. */
[data-theme="minda"] .dt-frozen-edge { box-shadow: 3px 0 4px 0 rgba(0, 0, 0, 0.10); }

/* Rotated column headers (many-trait views). Angle tunable via --dt-head-rotate. */
[data-theme="minda"] th.dt-rotate {
  height: 8.5rem;
  white-space: nowrap;
  vertical-align: bottom;
  padding: 0;
  position: relative;   /* anchor for the pinned sort icon */
}
/* Sort icon pinned to the bottom-right of every sortable header (rotated or plain), kept upright. */
/* Anchor for the pinned sort icon — but NOT on frozen headers: they must keep `position: sticky`
   (which is itself a positioning context for the icon), or the frozen column's title scrolls away. */
[data-theme="minda"] .dt-th:not(.dt-frozen) { position: relative; }
[data-theme="minda"] .dt-th .dt-sort {
  position: absolute; right: 5px; bottom: 4px;
  display: inline-flex; color: var(--color-base-content); opacity: 0.7; pointer-events: none;
}
/* Plain (non-rotated) sortable headers reserve room on the right so the label clears the pinned icon. */
[data-theme="minda"] th.dt-sortable:not(.dt-rotate) { padding-right: 1.4rem; }
[data-theme="minda"] th.dt-rotate > div {
  width: 2.25rem;
  transform-origin: bottom left;
  /* translateX gives the rotated text a little left padding — without it the baseline hugs the cell's
     left edge and the label reads as starting too far left. */
  transform: translate(1.2rem, -0.25rem) rotate(var(--dt-head-rotate, -65deg));
}
[data-theme="minda"] th.dt-rotate > div > span {
  display: inline-block;
  padding: 0 0.5rem;
}

/* Child (expanded) detail row — no hover highlight */
[data-theme="minda"] tr.dt-child:hover { background-color: transparent; }

/* Auto-fit responsive: cells must not wrap so the table overflows (and is measurable) */
[data-theme="minda"] .dt-nowrap th,
[data-theme="minda"] .dt-nowrap td { white-space: nowrap; }

/* …but NOT the expanded child row. Nowrap exists so the main row can overflow and be measured;
   the child row is the place that overflow is moved TO, and the wrapper clips horizontally in
   auto mode, so unwrapped content there is simply cut off with no way to scroll to it. Long
   values (and unbroken strings) must wrap instead. */
[data-theme="minda"] .dt-nowrap tr.dt-child td {
  white-space: normal;
  overflow-wrap: anywhere;
}

/* DataTable toolbar — IFTA field (Inside-the-Field Top-Aligned label, primary colour) */
[data-theme="minda"] .dt-ifta {
  display: inline-flex; flex-direction: column; justify-content: center;
  border: 1px solid var(--color-base-300); border-radius: 0.5rem;
  background: var(--color-base-100); padding: 0.2rem 0.65rem 0.3rem;
}
[data-theme="minda"] .dt-ifta:focus-within { border-color: var(--color-primary); }
[data-theme="minda"] .dt-ifta-label {
  font-size: 0.65rem; font-weight: 600; line-height: 1.2; letter-spacing: 0.02em;
  color: var(--color-base-content); opacity: 0.55;   /* dark grey by default… */
}
[data-theme="minda"] .dt-ifta:focus-within .dt-ifta-label {
  color: var(--color-primary); opacity: 1;           /* …primary when the field is active */
}
[data-theme="minda"] .dt-ifta-input {
  appearance: none; -webkit-appearance: none;
  border: 0; background: transparent; outline: none; box-shadow: none;
  padding: 0; margin: 0; min-height: 0; height: 1.35rem; line-height: 1.35rem;
  font-size: 0.875rem; color: var(--color-base-content); width: 100%;
}
[data-theme="minda"] select.dt-ifta-input {
  padding-right: 1.15rem; cursor: pointer;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%23888888' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M4 6l4 4 4-4'/></svg>");
  background-repeat: no-repeat; background-position: right center; background-size: 0.85rem;
}
/* Padding for the dropdown items (honoured by Firefox; Chrome/Safari style natively) */
[data-theme="minda"] .dt-ifta-input option { padding: 0.3rem 0.6rem; }
/* Search field: label+input stack on the left, submit icon centred on the right (link-style,
   turns primary on hover) — all inside the one IFTA box. */
[data-theme="minda"] .dt-ifta-search { flex-direction: row; align-items: center; gap: 0.4rem; }
[data-theme="minda"] .dt-search-icon {
  display: flex; align-items: center; justify-content: center; align-self: center;
  border: 0; background: transparent; padding: 0; margin: 0; line-height: 0; cursor: pointer;
  color: var(--color-base-content); opacity: 0.5; transition: color 0.15s, opacity 0.15s;
}
[data-theme="minda"] .dt-search-icon:hover { color: var(--color-primary); opacity: 1; }

/* Ghost-button hover/focus grey — daisyUI's default tint reads a bit dark; lighten it everywhere
   (team buttons, kebab menus, sidebar burger, table actions, …). base-content keeps it theme-aware. */
[data-theme="minda"] .btn.btn-ghost:hover,
[data-theme="minda"] .btn.btn-ghost:focus-visible {
  background-color: color-mix(in oklch, var(--color-base-content) 7%, transparent);
  border-color: transparent;
}

/* Form label sizing — daisyUI v5 no longer styles the `label-text` / `label-text-alt` utilities the
   app uses for a field's label and its small helper/description line, so both were inheriting the
   same size. Restore the intended hierarchy: the label is the title; the `-alt` hint under (or
   beside) an input — "International format: …", a field note, an error — is a notch smaller. */
.label-text     { font-size: 0.875rem; line-height: 1.35; }
.label-text-alt { font-size: 0.72rem;  line-height: 1.3; }

/* Clearer forms everywhere (user standard 2026-10-02: forms looked too pale). Labels are a darker,
   medium-weight text instead of a light grey, and field borders are a visible mid-grey; focus stays
   the brand pink. Mixed in srgb — oklch mixing drifts the hue. */
[data-theme="minda"] .label-text { color: color-mix(in srgb, var(--color-base-content) 88%, transparent); font-weight: 500; }
[data-theme="minda"] .input, [data-theme="minda"] .textarea, [data-theme="minda"] .select {
  --input-color: color-mix(in srgb, var(--color-base-content) 30%, transparent);
}

/* Custom Select dropdown (padded options — native <option> padding is ignored by Chrome) */
[data-theme="minda"] .dt-select-menu {
  /* min-width floors the menu at a readable width even when the trigger is narrow (the phone
     field's country selector is only wide enough for "+358"), so long option rows and the
     search box are not squeezed into the trigger's footprint. */
  position: absolute; top: calc(100% + 4px); left: 0; min-width: max(100%, 14rem); z-index: 40;
  margin: 0; list-style: none;
  background: var(--color-base-100); border: 1px solid var(--color-base-300);
  border-radius: 0.5rem; box-shadow: 0 10px 28px -10px rgba(0, 0, 0, 0.30);
  /* Flex column with the menu clipping its own rounded corners: the search box is a STATIC header and
     only the list scrolls. (If the menu itself scrolled, its top padding would sit above the sticky
     search, letting scrolled items leak through that strip.) */
  padding: 0; max-height: 16rem; display: flex; flex-direction: column; overflow: hidden;
}
/* Only the options list scrolls; min-height:0 lets it shrink inside the flex column so it can. */
[data-theme="minda"] .dt-select-list {
  margin: 0; padding: 0.25rem; list-style: none;
  flex: 1 1 auto; min-height: 0; overflow-y: auto;
}
[data-theme="minda"] .dt-select-item {
  padding: 0.4rem 0.75rem; border-radius: 0.375rem; font-size: 0.875rem;
  cursor: pointer; white-space: nowrap;
}
[data-theme="minda"] .dt-select-item:hover { background: var(--color-base-200); }
[data-theme="minda"] .dt-select-item-active { background: var(--color-primary); color: var(--color-primary-content); }
[data-theme="minda"] .dt-select-item-active:hover { background: var(--color-primary); }
[data-theme="minda"] .dt-select-header {
  padding: 0.5rem 0.75rem 0.2rem; font-size: 0.6875rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--color-base-content); opacity: 0.45; cursor: default; user-select: none;
}
[data-theme="minda"] .dt-select-header:first-child { padding-top: 0.2rem; }
/* Indent selectable items under their section header so the grouping reads clearly. */
[data-theme="minda"] .dt-select-item-grouped { padding-left: 1.5rem; }

/* Badge colour the app defines itself: the brand orange (empathy token). Same soft-fill shape as the
   semantic badges — Badge.js skips `badge-soft` for it and keeps `border-current/60`, so the border
   follows this text colour. */
[data-theme="minda"] .badge-orange {
  background: color-mix(in oklch, var(--mindasi-empathy) 24%, #fff);
  color: color-mix(in oklch, var(--mindasi-empathy) 68%, #000);
}

/* MultiSelect — the multi-pick field: chips live inside the IFTA box, the menu is the Select menu
   with a checkbox-style marker per row. The field grows with its chips instead of scrolling. */
[data-theme="minda"] .dt-multi { display: flex; width: 100%; }
[data-theme="minda"] .dt-multi-field {
  display: flex; align-items: center; gap: 0.4rem; width: 100%; min-height: 1.6rem; cursor: text;
}
/* The type-ahead input sits among the chips and carries no chrome of its own — the IFTA box around
   it already draws the border and turns primary on focus, so a second focus ring would double up. */
[data-theme="minda"] .dt-multi-input {
  flex: 1 1 6rem; min-width: 4rem; width: auto;
  appearance: none; border: 0; outline: none; box-shadow: none; background: transparent;
  padding: 0; margin: 0; min-height: 0; height: 1.35rem; line-height: 1.35rem;
  font-size: 0.875rem; color: var(--color-base-content);
}
[data-theme="minda"] .dt-multi-input::placeholder { color: var(--color-base-content); opacity: 0.45; }
[data-theme="minda"] .dt-multi-field:focus-within { outline: none; }
[data-theme="minda"] .dt-multi-chips {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem; flex: 1 1 auto; min-width: 0;
  padding: 0.1rem 0;
}
[data-theme="minda"] .dt-multi-chip {
  display: inline-flex; align-items: center; gap: 0.3rem; max-width: 100%;
  padding: 0.1rem 0.2rem 0.1rem 0.5rem; border-radius: 999px;
  font-size: 0.78rem; font-weight: 600; line-height: 1.3;
  color: var(--color-primary);
  background: color-mix(in oklch, var(--color-primary) 12%, var(--color-base-100));
  border: 1px solid color-mix(in oklch, var(--color-primary) 35%, var(--color-base-100));
}
[data-theme="minda"] .dt-multi-chip-x {
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.05rem; height: 1.05rem; border: 0; border-radius: 999px; padding: 0; cursor: pointer;
  background: transparent; color: inherit; opacity: 0.65;
}
[data-theme="minda"] .dt-multi-chip-x:hover {
  opacity: 1; background: color-mix(in oklch, var(--color-primary) 22%, transparent);
}
/* Menu rows: a check box on the left, so "picked" reads at a glance while the menu stays open. */
[data-theme="minda"] .dt-multi-item { display: flex; align-items: center; gap: 0.55rem; }
[data-theme="minda"] .dt-multi-item-on { background: color-mix(in oklch, var(--color-primary) 8%, transparent); }
[data-theme="minda"] .dt-multi-check {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 1rem; height: 1rem; border-radius: 0.25rem;
  border: 1px solid var(--color-base-300); background: var(--color-base-100);
}
[data-theme="minda"] .dt-multi-check-on {
  background: var(--color-primary); border-color: var(--color-primary); color: var(--color-primary-content);
}

/* Portaled to <body> + fixed to the viewport → escapes modal/table overflow and sits above modals.
   left / top|bottom / min-width / max-height come inline from the trigger's measured rect. */
[data-theme="minda"] .dt-select-fixed { position: fixed; top: auto; z-index: 9999; }

/* ── Survey step transition ─────────────────────────────────────────────────
   Each question mounts fresh (keyed by step), so this enter animation plays on
   every change: the incoming step slides in and fades. Direction-aware — forward
   from the right, back from the left — so moving through the survey has a sense of
   travel. Respects reduced-motion. */
@keyframes survey-in-right { from { opacity: 0; transform: translateX(28px); } to { opacity: 1; transform: none; } }
@keyframes survey-in-left  { from { opacity: 0; transform: translateX(-28px); } to { opacity: 1; transform: none; } }
.survey-step-fwd  { animation: survey-in-right 0.28s cubic-bezier(0.22, 0.61, 0.36, 1); }
.survey-step-back { animation: survey-in-left  0.28s cubic-bezier(0.22, 0.61, 0.36, 1); }
@media (prefers-reduced-motion: reduce) {
  .survey-step-fwd, .survey-step-back { animation: none; }
}

/* Single-line label that fades out at the right edge instead of hard-truncating — used for a long
   survey title in the header where there is no room for it. */
.fade-right {
  white-space: nowrap; overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, #000 78%, transparent 100%);
          mask-image: linear-gradient(to right, #000 78%, transparent 100%);
}

/* Survey progress track, lightened so the bar reads clearly against the dark rail / mobile strip.
   The filled part stays primary (via progress-primary); only the empty track is lifted. */
[data-theme="minda"] .survey-progress {
  background-color: color-mix(in oklch, var(--color-neutral-content) 12%, transparent);
}
[data-theme="minda"] .survey-progress::-webkit-progress-bar {
  background-color: color-mix(in oklch, var(--color-neutral-content) 12%, transparent);
}

/* ── Print: isolate the Sales Profile for "Download PDF" (window.print) ──────────────
   Works whether the profile is on its own page or inside a popup modal: hide all chrome,
   flatten any modal wrapper so the profile flows, and force real ink for the SVG/bars. */
@media print {
  html, body { background: #fff !important; height: auto !important; overflow: visible !important; }
  body * { visibility: hidden; }
  .sales-profile, .sales-profile * { visibility: visible; }

  /* Neutralize every ancestor that would otherwise clip the lifted profile to a single page:
     the app shell (height:100svh + overflow-hidden) and the scrolling content column, the modal,
     and any fixed/scroll wrapper in between. Without this a multi-page report prints only page 1. */
  #app, #app *, .modal, .modal-box {
    overflow: visible !important; max-height: none !important; height: auto !important;
  }
  [style*="svh"], [style*="vh"] { height: auto !important; }
  .modal, .modal-box {
    position: static !important; box-shadow: none !important; border: 0 !important;
    background: transparent !important; padding: 0 !important; margin: 0 !important;
    max-width: none !important; width: auto !important;
  }

  .sales-profile {
    position: absolute; left: 0; top: 0; width: 100%;
    -webkit-print-color-adjust: exact; print-color-adjust: exact; color-adjust: exact;
  }
  /* One section per page: the interpretation block, each competency, and the additional scales
     each start on a fresh page (matching the legacy report's one-competency-per-page layout). */
  .sales-profile .sp-competencies { display: block !important; }   /* undo the 2-up grid for print */
  .sales-profile .sp-page { break-before: page; }                 /* header + overview stay on page 1 */
  .sales-profile .sp-summary { display: none; }                   /* screen-only recap, redundant in a paged PDF */

  /* Keep individual sliders/cards whole and don't strand a heading at a page foot. */
  .sales-profile .break-inside-avoid { break-inside: avoid; }
  .sales-profile h2, .sales-profile h3, .sales-profile h4 { break-after: avoid; }
  @page { margin: 14mm; }
}

/* ── Quiet badge — the soft "neutral" (Badge.js). daisyUI tints badge-neutral from the theme's dark
   burgundy, which reads as a muddy grey-pink; this is a clean light grey chip instead. Mixed in srgb
   (oklch mixing drifts the hue). */
[data-theme="minda"] .badge-quiet {
  background-color: color-mix(in srgb, var(--color-base-content) 6%, var(--color-base-100));
  color: color-mix(in srgb, var(--color-base-content) 78%, var(--color-base-100));
  /* Same rule as the coloured badges (border-current/60): 60 % of the text colour. */
  border-color: color-mix(in srgb, var(--color-base-content) 47%, var(--color-base-100));
}

/* ── Verbal scale badges (excellent → poor) — soft, Minda-tinted (matches the alert palette) ── */
[data-theme="minda"] .badge-verbal {
  display: inline-block; padding: 0.1rem 0.5rem; border-radius: 9999px;
  font-size: 0.72rem; font-weight: 600; line-height: 1.3; white-space: nowrap; border: 1px solid transparent;
}
[data-theme="minda"] .badge-verbal-excellent { background: oklch(95% 0.045 150); color: oklch(45% 0.14 150); border-color: oklch(85% 0.08 150); }
[data-theme="minda"] .badge-verbal-good      { background: oklch(96% 0.05 128);  color: oklch(46% 0.13 128); border-color: oklch(86% 0.08 128); }
[data-theme="minda"] .badge-verbal-average   { background: oklch(96% 0.055 84);  color: oklch(47% 0.10 84);  border-color: oklch(87% 0.09 84); }
[data-theme="minda"] .badge-verbal-fair      { background: oklch(96% 0.055 55);  color: oklch(51% 0.14 55);  border-color: oklch(87% 0.10 55); }
[data-theme="minda"] .badge-verbal-poor      { background: oklch(95% 0.04 27);   color: oklch(52% 0.18 27);  border-color: oklch(87% 0.09 27); }
[data-theme="minda"] .badge-verbal-nodata    { background: var(--color-base-200); color: var(--mindasi-text-subtle); border-color: var(--color-base-300); }

/* ── Progress-styled match badge: a pill whose left portion is filled to the match % (coloured by the
   verbal level) over a grey track, with the label overlaid. Used in the status-report seller table. ── */
[data-theme="minda"] .match-badge {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  min-width: 6.25rem; height: 1.45rem; padding: 0 0.45rem; border-radius: 0.4rem; overflow: hidden;
  background: #8b9099; color: #fff; font-size: 0.75rem; font-weight: 700; line-height: 1; white-space: nowrap;
}
[data-theme="minda"] .match-badge-fill  { position: absolute; left: 0; top: 0; height: 100%; }
[data-theme="minda"] .match-badge-label { position: relative; z-index: 1; text-shadow: 0 1px 1px rgba(0, 0, 0, 0.30); }
[data-theme="minda"] .match-badge-excellent .match-badge-fill { background: #2dc937; }
[data-theme="minda"] .match-badge-good      .match-badge-fill { background: #99c140; }
[data-theme="minda"] .match-badge-average   .match-badge-fill { background: #e7b416; }
[data-theme="minda"] .match-badge-fair      .match-badge-fill { background: #db7b2b; }
[data-theme="minda"] .match-badge-poor      .match-badge-fill { background: #cc3232; }
[data-theme="minda"] .match-badge-nodata    { background: var(--color-base-200); color: var(--mindasi-text-subtle); }
[data-theme="minda"] .match-badge-nodata .match-badge-label { text-shadow: none; }

/* Per-column filter row under the table header. */
[data-theme="minda"] .dt-filter-row th { padding: 0.2rem 0.35rem; background: var(--color-base-100); border-bottom: 1px solid var(--color-base-300); font-weight: 400; }
[data-theme="minda"] .dt-filter-input {
  width: 100%; min-width: 3.5rem; font-size: 0.75rem; font-weight: 400; line-height: 1.2;
  padding: 0.15rem 0.4rem; border: 1px solid var(--color-base-300); border-radius: 0.3rem;
  background: var(--color-base-100); color: var(--color-base-content);
}
[data-theme="minda"] .dt-filter-input:focus { outline: none; border-color: var(--color-primary); }

/* ── Profile table (ProfileTable): brand-hued scale/trait columns + headers ── */
[data-theme="minda"] .pt-h-empathy  { color: var(--mindasi-empathy);  font-weight: 700; }
[data-theme="minda"] .pt-h-focus    { color: var(--mindasi-focus);    font-weight: 700; }
[data-theme="minda"] .pt-h-hunger   { color: var(--mindasi-hunger);   font-weight: 700; }
[data-theme="minda"] .pt-h-tenacity { color: var(--mindasi-tenacity); font-weight: 700; }
[data-theme="minda"] .pt-h-control  { color: var(--mindasi-control);  font-weight: 700; }

/* Scale (competency) columns: solid brand colour + white value. */
[data-theme="minda"] .pt-s-empathy,
[data-theme="minda"] .pt-s-focus,
[data-theme="minda"] .pt-s-hunger,
[data-theme="minda"] .pt-s-tenacity,
[data-theme="minda"] .pt-s-control  { color: #fff; font-weight: 700; text-shadow: 0 1px 1px rgba(0, 0, 0, 0.22); }
[data-theme="minda"] .pt-s-empathy  { background: var(--mindasi-empathy); }
[data-theme="minda"] .pt-s-focus    { background: var(--mindasi-focus); }
[data-theme="minda"] .pt-s-hunger   { background: var(--mindasi-hunger); }
[data-theme="minda"] .pt-s-tenacity { background: var(--mindasi-tenacity); }
[data-theme="minda"] .pt-s-control  { background: var(--mindasi-control); }

/* Trait columns: a neutral light ground — the solid scale column marks each competency group.
   The validity group carries a faint grey tint of its own. */
[data-theme="minda"] .pt-t-empathy,
[data-theme="minda"] .pt-t-focus,
[data-theme="minda"] .pt-t-hunger,
[data-theme="minda"] .pt-t-tenacity { background: var(--color-base-200); }
[data-theme="minda"] .pt-t-control  { background: color-mix(in oklch, var(--mindasi-control) 12%, var(--color-base-100)); }

/* Scale (competency + validity) column headers — UPPERCASE for prominence. */
[data-theme="minda"] .pt-scale-head { text-transform: uppercase; letter-spacing: 0.04em; }
/* Fixed-width profile cells so the critical box + the difference number never change column widths. */
[data-theme="minda"] .pt-cell { width: 3.25rem; min-width: 3.25rem; padding-left: 0.25rem; padding-right: 0.25rem; }
/* Vertical column dividers — without them, rotated headers read as belonging to a neighbouring column. */
[data-theme="minda"] .pt-grid table th,
[data-theme="minda"] .pt-grid table td { border-right: 1px solid var(--color-base-300); }
[data-theme="minda"] .pt-grid table th:last-child,
[data-theme="minda"] .pt-grid table td:last-child { border-right: none; }
/* …but NOT a full gridline through the tall rotated title cells — it would cut across the angled labels
   and make them read as belonging to a neighbouring column. Instead a divider that is solid at the
   bottom (aligned with the data grid) and fades to transparent by mid-height, so it never crosses the
   floating title. Colour kept transparent on the border itself so widths don't shift. */
[data-theme="minda"] .pt-grid table th.dt-rotate { border-right-color: transparent; }
[data-theme="minda"] .pt-grid table th.dt-rotate:not(:last-child)::after {
  content: ""; position: absolute; right: 0; bottom: 0; width: 1px; height: 50%;
  background: linear-gradient(to top, var(--color-base-300), transparent); pointer-events: none;
}
/* Header underline darker than the row dividers, so the title row reads as distinct. */
[data-theme="minda"] .pt-grid table thead th { border-bottom: 2px solid color-mix(in oklch, var(--color-base-content) 22%, transparent); }

/* Match table: the salespeople who defined the ideal profile are marked by the ★ in the name only. */
/* Ideal-profile-data table: scale rows read as group headers. */
[data-theme="minda"] tr.pt-ideal-scale-row td { font-weight: 700; background: var(--color-base-200); border-top: 1px solid var(--color-base-300); }

/* Trait cell markers: a CRITICAL trait → competency-coloured box; a MOTIVATION → grey circle
   (motivations can never be critical). Ordinary traits stay a plain number. */
[data-theme="minda"] .pt-mark {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 1.55rem; height: 1.55rem; padding: 0 0.3rem; border-radius: 0.4rem;
  font-weight: 700; line-height: 1;
}
[data-theme="minda"] .pt-mark-circle { border-radius: 9999px; background: color-mix(in oklch, var(--mindasi-control) 26%, var(--color-base-100)); color: var(--color-base-content); }
/* MOTIVATION marker: a fat, ROUNDED-cusp star (drawn as an SVG behind the value). The shape signals
   "motivation"; colour = --mindasi-motivation. See utils/starMark.js. */
[data-theme="minda"] .pt-star {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  min-width: 2rem; height: 2rem; color: var(--mindasi-motivation); font-size: 0.72rem; line-height: 1;
}
[data-theme="minda"] .pt-star-svg { position: absolute; inset: 0; width: 100%; height: 100%; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.18)); }
[data-theme="minda"] .pt-star-svg polygon { fill: currentColor; stroke: currentColor; }
/* Dark value (yellow star needs dark text) with a faint light lift for contrast. */
[data-theme="minda"] .pt-star-val { position: relative; z-index: 1; color: #3a2f00; font-weight: 800; font-size: inherit; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.35); }
/* Motivation column title: the ★ prefix carries the motivation colour; the label stays the normal dark. */
[data-theme="minda"] .mot-star { color: var(--mindasi-motivation); }

/* Drag-to-scroll on wide tables: grab cursor as a hint, grabbing + no text-selection while dragging. */
[data-theme="minda"] .dt-grab { cursor: grab; }
[data-theme="minda"] .dt-dragging, [data-theme="minda"] .dt-dragging * { cursor: grabbing !important; }
[data-theme="minda"] .dt-dragging { user-select: none; }
[data-theme="minda"] .pt-mark-crit   { color: #fff; text-shadow: 0 1px 1px rgba(0, 0, 0, 0.22); }
/* Near-ideal critical trait (|difference| <= 2): an outlined box instead of a solid competence fill. */
[data-theme="minda"] .pt-mark-outline {
  background: transparent; color: var(--color-base-content);
  border: 1.5px solid color-mix(in oklch, var(--color-base-content) 26%, transparent);
}
[data-theme="minda"] .pt-crit-empathy  { background: var(--mindasi-empathy); }
[data-theme="minda"] .pt-crit-focus    { background: var(--mindasi-focus); }
[data-theme="minda"] .pt-crit-hunger   { background: var(--mindasi-hunger); }
[data-theme="minda"] .pt-crit-tenacity { background: var(--mindasi-tenacity); }
[data-theme="minda"] .pt-crit-control  { background: var(--mindasi-control); }

/* The pinned reference row (the ideal profile), sitting atop the individuals. */
[data-theme="minda"] tr.pt-compare-row td { font-weight: 700; border-bottom: 2px solid var(--color-base-300); }

/* ── Kehityskartta (development map) report — screen + print (components/DevelopmentMap.js) ── */
/* Sections carry --acc (a Minda competence token) + --acc-strong (a darkened mix of it, for text). */
[data-theme="minda"] .km-root {
  --km-dark: #241019; --km-ink: #1e1418; --km-muted: #6b5960; --km-subtle: #9b8b90;
  --km-line: #ece7e9; --km-sheet: #ffffff; --km-soft: #faf7f8;
  /* Competence colour sets — base (solid), ink (dark text), soft (light bg), line (border). */
  --k-empathy: var(--mindasi-empathy);   --k-empathy-ink: color-mix(in oklch, var(--mindasi-empathy) 60%, #000);   --k-empathy-soft: color-mix(in oklch, var(--mindasi-empathy) 15%, #fff);   --k-empathy-line: color-mix(in oklch, var(--mindasi-empathy) 34%, #fff);
  --k-focus: var(--mindasi-focus);       --k-focus-ink: color-mix(in oklch, var(--mindasi-focus) 82%, #000);       --k-focus-soft: color-mix(in oklch, var(--mindasi-focus) 12%, #fff);       --k-focus-line: color-mix(in oklch, var(--mindasi-focus) 30%, #fff);
  --k-hunger: var(--mindasi-hunger);     --k-hunger-ink: color-mix(in oklch, var(--mindasi-hunger) 60%, #000);     --k-hunger-soft: color-mix(in oklch, var(--mindasi-hunger) 16%, #fff);     --k-hunger-line: color-mix(in oklch, var(--mindasi-hunger) 34%, #fff);
  --k-tenacity: var(--mindasi-tenacity); --k-tenacity-ink: color-mix(in oklch, var(--mindasi-tenacity) 84%, #000); --k-tenacity-soft: color-mix(in oklch, var(--mindasi-tenacity) 12%, #fff); --k-tenacity-line: color-mix(in oklch, var(--mindasi-tenacity) 30%, #fff);
  --k-control: var(--mindasi-control);   --k-control-ink: color-mix(in oklch, var(--mindasi-control) 60%, #000);   --k-control-soft: color-mix(in oklch, var(--mindasi-control) 14%, #fff);   --k-control-line: color-mix(in oklch, var(--mindasi-control) 30%, #fff);
  color: var(--km-ink); font-size: 14px; line-height: 1.6;
  -webkit-print-color-adjust: exact; print-color-adjust: exact;
}

[data-theme="minda"] .km-root, [data-theme="minda"] .km-root * { box-sizing: border-box; }

/* Each grouped section = a sheet on screen (A4 portrait proportions, so it reads as a page), its own
   page in print. min-height holds the A4 shape when content is short; long content simply grows. */
[data-theme="minda"] .km-page {
  position: relative;
  width: 794px; max-width: 100%; min-height: 1123px; margin: 0 auto 1.75rem; background: var(--km-sheet);
  border: 1px solid var(--km-line); border-radius: 1rem;
  box-shadow: 0 1px 2px rgba(30,20,24,.04), 0 18px 40px -20px rgba(30,20,24,.16);
  padding: 1.7rem 2rem 2.5rem;
}
/* Running footer — the same line the assessment PDF prints: copyright left, person + page x/y right. */
[data-theme="minda"] .km-pagefoot { position: absolute; left: 2rem; right: 2rem; bottom: 1rem; display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; font-size: .6rem; letter-spacing: .01em; color: var(--km-subtle); }
[data-theme="minda"] .km-pagefoot-right { display: flex; gap: 1.4rem; }
/* Below A4 width there is no room to keep the ratio — fall back to a plain responsive sheet. */
@media (max-width: 840px) { [data-theme="minda"] .km-page { width: 100%; min-height: 0; } }
[data-theme="minda"] .km-page-body { padding: 0 2rem 1.6rem; }
[data-theme="minda"] .km-block + .km-block { margin-top: 1.4rem; padding-top: 1.4rem; border-top: 1px solid var(--km-line); }
[data-theme="minda"] .km-journey + .km-block { margin-top: .9rem; padding-top: 1.4rem; border-top: 1px solid var(--km-line); }
[data-theme="minda"] .km-bars { display: block; }

/* ── Cover panel (dark) ─────────────────────────────────────────────────────── */
[data-theme="minda"] .km-cover {
  position: relative; background:
    radial-gradient(120% 120% at 100% 0%, rgba(245,70,125,.18) 0%, rgba(245,70,125,0) 45%),
    linear-gradient(160deg, #2c141d 0%, var(--km-dark) 55%, #1c0d13 100%);
  color: #fff; padding: 1.7rem 2rem 1.9rem; border-radius: 1rem 1rem 0 0;
}
[data-theme="minda"] .km-cover-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 1.5rem; margin-bottom: .8rem; }
[data-theme="minda"] .km-cover-brand { display: flex; align-items: center; gap: .85rem; }
[data-theme="minda"] .km-logo { height: 1.9rem; width: auto; display: block; }
[data-theme="minda"] .km-cover-doc { font-size: .72rem; letter-spacing: .22em; text-transform: uppercase; font-weight: 600; color: rgba(255,255,255,.62); padding-left: .85rem; border-left: 1px solid rgba(255,255,255,.22); }
[data-theme="minda"] .km-cover-person { text-align: right; }
[data-theme="minda"] .km-person-name { font-weight: 700; font-size: 1.1rem; }
[data-theme="minda"] .km-person-role { font-size: .8rem; color: rgba(255,255,255,.6); margin-top: .1rem; }
[data-theme="minda"] .km-cover-bars { position: absolute; right: 2.5rem; bottom: 1.75rem; width: 60px; height: 38px; opacity: .9; }
[data-theme="minda"] .km-hero-headline { font-size: 1.5rem; font-weight: 800; line-height: 1.16; letter-spacing: -.02em; margin: 0 0 .5rem; }
[data-theme="minda"] .km-hero-body { color: rgba(255,255,255,.82); font-size: .85rem; margin: 0 0 .6rem; }

/* ── Eyebrows + headings ────────────────────────────────────────────────────── */
[data-theme="minda"] .km-eyebrow { text-transform: uppercase; letter-spacing: .14em; font-size: .66rem; font-weight: 800; color: var(--acc-strong, var(--mindasi-focus)); margin-bottom: .3rem; }
[data-theme="minda"] .km-h2 { font-size: 1.08rem; font-weight: 800; letter-spacing: -.01em; margin: 0; line-height: 1.2; }
[data-theme="minda"] .km-lead { color: var(--km-muted); font-size: .84rem; margin: 0 0 .7rem; max-width: 46rem; }
[data-theme="minda"] .km-sec-head { display: flex; align-items: center; gap: .8rem; margin-bottom: .85rem; }
[data-theme="minda"] .km-sec-icon { flex: none; width: 2.3rem; height: 2.3rem; border-radius: .7rem; display: flex; align-items: center; justify-content: center; color: var(--acc-strong); background: color-mix(in oklch, var(--acc) 18%, #fff); box-shadow: inset 0 0 0 1px color-mix(in oklch, var(--acc) 34%, #fff); }

/* ── Trait pills (competence-coloured; motivation → star) ───────────────────── */
[data-theme="minda"] .km-traits { display: flex; flex-wrap: wrap; gap: .4rem .9rem; margin: .15rem 0 .75rem; }
/* No pill fill — just the value box + the trait name in its competence ink. */
[data-theme="minda"] .km-trait { display: inline-flex; align-items: center; gap: .5rem; }
[data-theme="minda"] .km-trait .pt-star { flex: none; }
[data-theme="minda"] .km-trait-val { width: 1.9rem; height: 1.5rem; flex: none; border-radius: .3rem; display: inline-flex; align-items: center; justify-content: center; color: #fff; font-weight: 800; font-size: .82rem; font-variant-numeric: tabular-nums; text-shadow: 0 1px 1px rgba(0,0,0,.22); }
/* Name uses the main dark ink for all traits; the coloured value box carries the competence. */
[data-theme="minda"] .km-trait-name { font-size: .74rem; font-weight: 700; letter-spacing: .01em; color: var(--km-ink); }
[data-theme="minda"] .km-trait-plain { font-size: .74rem; font-weight: 700; color: var(--km-muted); text-transform: uppercase; letter-spacing: .03em; }
[data-theme="minda"] .km-k-empathy  .km-trait-val { background: var(--k-empathy); }
[data-theme="minda"] .km-k-focus    .km-trait-val { background: var(--k-focus); }
[data-theme="minda"] .km-k-hunger   .km-trait-val { background: var(--k-hunger); }
[data-theme="minda"] .km-k-tenacity .km-trait-val { background: var(--k-tenacity); }
[data-theme="minda"] .km-k-control  .km-trait-val { background: var(--k-control); }

/* ── Evidence chips (each type a competence colour + icon) ──────────────────── */
[data-theme="minda"] .km-tags { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .2rem; }
[data-theme="minda"] .km-chip { display: inline-flex; align-items: center; gap: .35rem; font-size: .63rem; font-weight: 700; letter-spacing: .02em; text-transform: uppercase; padding: .28rem .55rem; border-radius: 999px; border: 1px solid; }
[data-theme="minda"] .km-chip b { font-weight: 800; }
[data-theme="minda"] .km-num { font-weight: 800; }
[data-theme="minda"] .km-chip .km-chip-ico { width: .88rem; height: .88rem; flex: none; }
[data-theme="minda"] .km-chip-mitattu   { color: var(--k-tenacity-ink); background: var(--k-tenacity-soft); border-color: var(--k-tenacity-line); }
[data-theme="minda"] .km-chip-havaittu  { color: var(--k-hunger-ink);   background: var(--k-hunger-soft);   border-color: var(--k-hunger-line); }
[data-theme="minda"] .km-chip-paatelty  { color: var(--k-empathy-ink);  background: var(--k-empathy-soft);  border-color: var(--k-empathy-line); }
[data-theme="minda"] .km-chip-hypoteesi { color: var(--k-control-ink);  background: var(--k-control-soft);  border-color: var(--k-control-line); }

/* ── Journey (three steps) ──────────────────────────────────────────────────── */
[data-theme="minda"] .km-journey { --km-journey-pad: 1.3rem; --km-step-size: 2.3rem; position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; text-align: center; padding: var(--km-journey-pad) 0 .3rem; }
/* Half a step circle down from the journey's top padding — the line meets the circles' centre whatever
   size the sheet gives them. */
[data-theme="minda"] .km-journey-line { position: absolute; top: calc(var(--km-journey-pad) + var(--km-step-size) / 2); left: 22%; right: 22%; height: 0; border-top: 2px dashed var(--km-line); z-index: 0; }
[data-theme="minda"] .km-step { position: relative; z-index: 1; }
[data-theme="minda"] .km-step-num { width: var(--km-step-size); height: var(--km-step-size); margin: 0 auto .55rem; border-radius: 999px; background: #fff; border: 2px solid var(--acc-strong); color: var(--acc-strong); font-weight: 800; font-size: calc(var(--km-step-size) * .46); display: flex; align-items: center; justify-content: center; box-shadow: 0 0 0 7px color-mix(in oklch, var(--acc) 14%, #fff); }
[data-theme="minda"] .km-step-label { text-transform: uppercase; letter-spacing: .1em; font-size: .64rem; color: var(--km-subtle); font-weight: 800; margin-bottom: .35rem; }
[data-theme="minda"] .km-step-text { font-weight: 700; font-size: .88rem; line-height: 1.3; }

/* ── Grids + cards ──────────────────────────────────────────────────────────── */
[data-theme="minda"] .km-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.1rem; }
[data-theme="minda"] .km-grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.1rem; }
[data-theme="minda"] .km-grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: .85rem; }
@media (max-width: 680px) { [data-theme="minda"] .km-grid-3, [data-theme="minda"] .km-grid-2, [data-theme="minda"] .km-grid-4, [data-theme="minda"] .km-journey { grid-template-columns: 1fr; } }
[data-theme="minda"] .km-cards { display: flex; flex-direction: column; gap: .6rem; }
[data-theme="minda"] .km-card { position: relative; background: #fff; border: 1px solid var(--km-line); border-radius: .8rem; padding: .85rem 1rem; overflow: hidden; }
[data-theme="minda"] .km-card-bar { position: absolute; inset: 0 0 auto 0; height: 4px; background: var(--acc-strong); }
[data-theme="minda"] .km-card-grid { display: grid; grid-template-columns: 168px 1fr; gap: 1.2rem; align-items: center; }
/* Rail pills size to their content (not stretched) so the card stays tight. */
[data-theme="minda"] .km-card-rail .km-traits { flex-direction: column; align-items: flex-start; gap: .4rem; margin: 0; }
[data-theme="minda"] .km-card-main > :last-child { margin-bottom: 0; }
[data-theme="minda"] .km-card-title { font-weight: 700; font-size: .96rem; line-height: 1.28; margin-bottom: .35rem; }
[data-theme="minda"] .km-card-body { color: #4b4145; font-size: .84rem; line-height: 1.5; margin: 0 0 .55rem; }
@media (max-width: 680px) {
  [data-theme="minda"] .km-card-grid { grid-template-columns: 1fr; gap: .85rem; }
  [data-theme="minda"] .km-card-rail .km-traits { flex-direction: row; flex-wrap: wrap; }
}

/* ── Actions ────────────────────────────────────────────────────────────────── */
[data-theme="minda"] .km-action { position: relative; background: #fff; border: 1px solid var(--km-line); border-radius: .85rem; padding: .9rem 1rem; }
[data-theme="minda"] .km-action-hl { border: 1px solid color-mix(in oklch, var(--acc-strong) 34%, #fff); background: linear-gradient(180deg, color-mix(in oklch, var(--acc) 9%, #fff), #fff 62%); box-shadow: 0 12px 30px -20px color-mix(in oklch, var(--acc-strong) 70%, #000); padding: 1.1rem; margin-bottom: .9rem; }
[data-theme="minda"] .km-action-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: .7rem; }
[data-theme="minda"] .km-kind { display: inline-block; font-size: .66rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #fff; background: var(--acc-strong, var(--mindasi-tenacity)); padding: .28rem .6rem; border-radius: .4rem; }
[data-theme="minda"] .km-kind-plain { background: var(--km-soft); color: #6b5960; border: 1px solid var(--km-line); margin-bottom: .55rem; }
[data-theme="minda"] .km-action-flag { display: inline-flex; align-items: center; gap: .3rem; font-size: .7rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--acc-strong); }
[data-theme="minda"] .km-action-title { font-weight: 800; font-size: 1.2rem; letter-spacing: -.01em; margin-bottom: .5rem; }
[data-theme="minda"] .km-metric { display: flex; align-items: flex-start; gap: .7rem; background: color-mix(in oklch, var(--acc) 10%, #fff); border: 1px solid color-mix(in oklch, var(--acc-strong) 26%, #fff); border-radius: .6rem; padding: .8rem .9rem; margin: .8rem 0; }
[data-theme="minda"] .km-metric-icon { flex: none; width: 1.7rem; height: 1.7rem; border-radius: .45rem; display: flex; align-items: center; justify-content: center; background: #fff; color: var(--acc-strong); box-shadow: inset 0 0 0 1px color-mix(in oklch, var(--acc-strong) 32%, #fff); }
[data-theme="minda"] .km-metric-label { font-size: .62rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--km-muted); margin-bottom: .1rem; }
[data-theme="minda"] .km-metric-text { font-size: .9rem; font-weight: 600; color: var(--km-ink); }
[data-theme="minda"] .km-metric-inline { display: flex; align-items: baseline; gap: .35rem; font-size: .85rem; color: #4b4145; margin: .5rem 0 0; }
[data-theme="minda"] .km-metric-inline svg { color: var(--km-subtle); position: relative; top: 2px; width: .9rem; height: .9rem; }
[data-theme="minda"] .km-actions-sec { margin-top: .25rem; }

/* ── Strengths / manager / loop / evidence / footer ─────────────────────────── */
[data-theme="minda"] .km-strengths { background: color-mix(in oklch, var(--acc) 9%, #fff); border: 1px solid color-mix(in oklch, var(--acc-strong) 26%, #fff); border-radius: .85rem; padding: 1.35rem 1.5rem; }
[data-theme="minda"] .km-esi { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .85rem; }
[data-theme="minda"] .km-esi li { display: flex; gap: .7rem; align-items: flex-start; font-size: .9rem; color: #4b4145; }
[data-theme="minda"] .km-esi-mark { flex: none; width: 1.4rem; height: 1.4rem; border-radius: 999px; display: flex; align-items: center; justify-content: center; color: #fff; background: var(--acc-strong); margin-top: .05rem; }
[data-theme="minda"] .km-esi-mark svg { width: .9rem; height: .9rem; }
[data-theme="minda"] .km-esi li b { color: var(--km-ink); }
[data-theme="minda"] .km-checkpoint { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; border: 1px solid var(--km-line); border-radius: .85rem; overflow: hidden; background: color-mix(in oklch, var(--acc) 4%, #fff); }
[data-theme="minda"] .km-cp { padding: 1.2rem 1.15rem; border-left: 1px solid var(--km-line); display: flex; flex-direction: column; }
[data-theme="minda"] .km-cp:first-child { border-left: 0; }
[data-theme="minda"] .km-cp-num { width: 1.55rem; height: 1.55rem; flex: none; border-radius: 999px; background: var(--acc-strong); color: #fff; font-weight: 800; font-size: .72rem; display: inline-flex; align-items: center; justify-content: center; margin-bottom: .75rem; box-shadow: 0 0 0 4px color-mix(in oklch, var(--acc) 12%, #fff); }
[data-theme="minda"] .km-cp-label { min-height: 2.5em; font-size: .62rem; text-transform: uppercase; letter-spacing: .06em; color: var(--km-subtle); font-weight: 800; line-height: 1.25; margin-bottom: .5rem; }
[data-theme="minda"] .km-cp-value { font-weight: 700; font-size: .9rem; line-height: 1.4; color: var(--km-ink); }
[data-theme="minda"] .km-cp-muted { color: var(--km-muted); font-weight: 600; }
[data-theme="minda"] .km-cp-blank { min-height: 1.3rem; border-bottom: 2px dashed var(--km-line); }
@media (max-width: 680px) { [data-theme="minda"] .km-checkpoint { grid-template-columns: 1fr 1fr; } [data-theme="minda"] .km-cp:nth-child(odd) { border-left: 0; } [data-theme="minda"] .km-cp-label { min-height: 0; } }
[data-theme="minda"] .km-mini { border: 1px solid var(--km-line); border-radius: .75rem; padding: 1rem .9rem; background: var(--km-soft); }
[data-theme="minda"] .km-mini-icon { width: 2rem; height: 2rem; border-radius: .55rem; display: flex; align-items: center; justify-content: center; background: #fff; color: var(--km-muted); border: 1px solid var(--km-line); margin-bottom: .6rem; }
[data-theme="minda"] .km-mini-title { font-weight: 700; font-size: .85rem; line-height: 1.25; margin-bottom: .25rem; min-height: 2.5em; }
@media (max-width: 680px) { [data-theme="minda"] .km-mini-title { min-height: 0; } }
[data-theme="minda"] .km-mini-sub { font-size: .74rem; color: var(--km-muted); line-height: 1.35; }
[data-theme="minda"] .km-footer { display: flex; gap: 1.25rem; align-items: flex-start; margin-top: 1.5rem; padding-top: 1rem; border-top: 1px solid var(--km-line); }
[data-theme="minda"] .km-footer p { font-size: .68rem; color: var(--km-subtle); line-height: 1.55; margin: 0; }

/* ── Cover sheet ────────────────────────────────────────────────────────────── */
/* The dark panel is an inset card carrying only the identity + what this report is; the person's own
   headline, prose and evidence chips read on white below it, then the journey, then the contents strip
   pinned to the bottom edge. */
[data-theme="minda"] .km-page-cover { display: flex; flex-direction: column; padding: 0; overflow: hidden; }
[data-theme="minda"] .km-page-cover .km-page-body { flex: 1; display: flex; flex-direction: column; justify-content: space-between; padding: 1.6rem 2rem 2.5rem; }
[data-theme="minda"] .km-page-cover .km-journey { --km-journey-pad: 1.9rem; --km-step-size: 3.1rem; padding: var(--km-journey-pad) 0 1.7rem; }
[data-theme="minda"] .km-page-cover .km-step-label { font-size: .68rem; }
[data-theme="minda"] .km-page-cover .km-step-text { font-size: .95rem; }

/* The report note inside the dark panel — what the map is built on (and the legal small print). */
[data-theme="minda"] .km-cover-note { display: flex; gap: .8rem; align-items: flex-start; margin-top: .9rem; padding: .85rem 5rem 0 0; border-top: 1px solid rgba(255,255,255,.16); }
[data-theme="minda"] .km-cover-note-mark { flex: none; width: 1.9rem; height: 1.9rem; border-radius: .55rem; display: flex; align-items: center; justify-content: center; color: rgba(255,255,255,.75); background: rgba(255,255,255,.09); box-shadow: inset 0 0 0 1px rgba(255,255,255,.16); }
[data-theme="minda"] .km-cover-note-mark svg { width: 1.05rem; height: 1.05rem; }
[data-theme="minda"] .km-cover-note-label { text-transform: uppercase; letter-spacing: .14em; font-size: .62rem; font-weight: 800; color: rgba(255,255,255,.62); margin-bottom: .3rem; }
[data-theme="minda"] .km-cover-note p { font-size: .66rem; line-height: 1.55; color: rgba(255,255,255,.58); margin: 0; }

/* The person's own opening — same copy as before, now in report ink on white. */
[data-theme="minda"] .km-intro { padding: 1.5rem 0 .2rem; max-width: 46rem; }
[data-theme="minda"] .km-intro .km-hero-headline { color: var(--km-ink); font-size: 1.72rem; }
[data-theme="minda"] .km-intro .km-hero-body { color: var(--km-muted); font-size: .88rem; margin-bottom: .7rem; }

/* Sales Capital legend — the four competences the map is read against, in their brand colours. */
[data-theme="minda"] .km-capital { padding: .2rem 0 1.4rem; }
[data-theme="minda"] .km-capital-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: .9rem; margin-top: .7rem; }
[data-theme="minda"] .km-cap { display: flex; gap: .65rem; align-items: stretch; }
[data-theme="minda"] .km-cap-bar { flex: none; width: .3rem; min-height: 2.7rem; border-radius: 999px; background: var(--acc); }
[data-theme="minda"] .km-cap-name { font-size: .78rem; font-weight: 800; color: var(--acc-strong); margin-bottom: .2rem; }
[data-theme="minda"] .km-cap-traits { font-size: .68rem; color: var(--km-muted); }
[data-theme="minda"] .km-cap-trait { line-height: 1.5; }
/* The two motivation traits carry the report's star marker (see utils/salesCapital MOTIVATIONS). */
[data-theme="minda"] .km-cap-star { color: var(--mindasi-motivation); font-size: .85em; margin-right: .15rem; }
[data-theme="minda"] .km-cap-note { display: flex; gap: .6rem; align-items: baseline; margin-top: .9rem; padding: .65rem .8rem; border: 1px solid var(--km-line); border-radius: .7rem; background: var(--km-soft); font-size: .66rem; line-height: 1.5; color: var(--km-muted); }
[data-theme="minda"] .km-cap-note b { color: var(--km-ink); font-weight: 800; }
@media (max-width: 680px) { [data-theme="minda"] .km-capital-grid { grid-template-columns: 1fr 1fr; } }

/* Contents strip — one tile per results sheet, in that section's own competence colour. */
[data-theme="minda"] .km-toc { padding-top: 1.2rem; border-top: 1px solid var(--km-line); }
[data-theme="minda"] .km-toc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: .9rem; }
[data-theme="minda"] .km-toc-item { display: flex; gap: .75rem; align-items: flex-start; padding: .85rem .9rem; border: 1px solid var(--km-line); border-radius: .85rem; background: var(--km-soft); }
[data-theme="minda"] .km-toc-ico { flex: none; width: 2.1rem; height: 2.1rem; border-radius: .65rem; display: flex; align-items: center; justify-content: center; color: var(--acc-strong); background: color-mix(in oklch, var(--acc) 18%, #fff); box-shadow: inset 0 0 0 1px color-mix(in oklch, var(--acc) 34%, #fff); }
[data-theme="minda"] .km-toc-page { text-transform: uppercase; letter-spacing: .12em; font-size: .6rem; font-weight: 800; color: var(--km-subtle); margin-bottom: .2rem; }
[data-theme="minda"] .km-toc-label { font-size: .78rem; font-weight: 700; line-height: 1.3; }
@media (max-width: 680px) { [data-theme="minda"] .km-toc-grid { grid-template-columns: 1fr; } }

/* ── Print: one sheet per grouped section ───────────────────────────────────── */
@media print {
  body * { visibility: hidden; }
  .km-print, .km-print * { visibility: visible; }
  .km-print { position: absolute; inset: 0; }
  .km-no-print { display: none !important; }
  [data-theme="minda"] .km-print .km-page { width: auto; max-width: none; min-height: 0; margin: 0; border: 0; border-radius: 0; box-shadow: none; padding: 1.7rem 2rem 2.5rem; }
  [data-theme="minda"] .km-print .km-page + .km-page { break-before: page; }
  /* The hero runs to the paper's edge, so it loses the sheet's rounded top corners. */
  [data-theme="minda"] .km-print .km-page-cover { padding: 0; }
  [data-theme="minda"] .km-cover { border-radius: 0; }
  /* Cards stay whole; a *section* may split across sheets so a following section can start on the
     same page instead of leaving half a sheet blank. A section heading never ends a page alone. */
  [data-theme="minda"] .km-card, [data-theme="minda"] .km-action, [data-theme="minda"] .km-checkpoint,
  [data-theme="minda"] .km-mini, [data-theme="minda"] .km-cp, [data-theme="minda"] .km-strengths { break-inside: avoid; }
  [data-theme="minda"] .km-sec-head { break-after: avoid; }
  @page { margin: 0; size: A4; }
}

/* Sections drawn as a bordered box with no background of their own sat on the grey page as bare
   outlines around grey text. Give them the card surface; a box that sets any bg-* keeps its own.
   Form fields likewise read as white fields on every page. */
[data-theme="minda"] .rounded-box.border:not([class*="bg-"]) { background-color: var(--color-base-100); }
[data-theme="minda"] :is(.input, .textarea, .select):not([class*="bg-"]) { background-color: var(--color-base-100); }

/* The secondary-importance button: a soft version of the primary pink. Pink (btn-primary) is for the
   one main action of a page or section; an important action repeated on every row or card uses this
   so the main action still stands out. Fills to full pink on hover. Usage: class="btn btn-xs btn-soft-pink". */
[data-theme="minda"] .btn-soft-pink {
  background-color: color-mix(in srgb, var(--color-primary) 10%, var(--color-base-100));
  border: 1px solid color-mix(in srgb, var(--color-primary) 30%, var(--color-base-100));
  color: var(--color-primary);
}
[data-theme="minda"] .btn-soft-pink:hover {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-primary-content);
}

/* Soft versions of the other Minda colours, for buttons or sections that need a touch of colour
   without competing with the pink. Orange and green are light, so their text is a dark shade of the
   same colour (their own colour as text is too pale to read); blue is dark enough to be its own text.
   They fill with the full colour on hover. */
[data-theme="minda"] .btn-soft-orange { background-color: color-mix(in srgb, var(--mindasi-empathy) 18%, var(--color-base-100));
  border: 1px solid color-mix(in srgb, var(--mindasi-empathy) 55%, var(--color-base-100)); color: oklch(45% 0.12 60); }
[data-theme="minda"] .btn-soft-orange:hover { background-color: var(--mindasi-empathy); border-color: var(--mindasi-empathy); color: oklch(22% 0.05 60); }
[data-theme="minda"] .btn-soft-green  { background-color: color-mix(in srgb, var(--mindasi-hunger) 18%, var(--color-base-100));
  border: 1px solid color-mix(in srgb, var(--mindasi-hunger) 55%, var(--color-base-100)); color: oklch(42% 0.1 140); }
[data-theme="minda"] .btn-soft-green:hover  { background-color: var(--mindasi-hunger); border-color: var(--mindasi-hunger); color: oklch(20% 0.05 140); }
[data-theme="minda"] .btn-soft-blue   { background-color: color-mix(in srgb, var(--mindasi-tenacity) 12%, var(--color-base-100));
  border: 1px solid color-mix(in srgb, var(--mindasi-tenacity) 40%, var(--color-base-100)); color: var(--mindasi-tenacity); }
[data-theme="minda"] .btn-soft-blue:hover   { background-color: var(--mindasi-tenacity); border-color: var(--mindasi-tenacity); color: #fff; }

/* Help (?) icons — a slowly breathing halo so people notice there are instructions (components/HelpTopic.js,
   Header/HelpButton.js): a faint tinted disc fades in, swells a little and fades out again over 5 s —
   no flash at the start, noticeable but calm. With "reduce motion" on (e.g. Windows animation effects
   off) the halo only glows in place — no movement. */
.help-pulse { position: relative; border-radius: 9999px; isolation: isolate; }
.help-pulse::before {
  content: ''; position: absolute; inset: 0; border-radius: inherit; z-index: -1; pointer-events: none;
  background: currentColor; opacity: 0; transform: scale(1);
  animation: help-breathe 5s ease-in-out infinite;
}
@keyframes help-breathe {
  0%   { opacity: 0;    transform: scale(1); }
  45%  { opacity: 0.12; transform: scale(1.14); }
  60%  { opacity: 0.12; transform: scale(1.16); }
  100% { opacity: 0;    transform: scale(1); }
}
@keyframes help-glow {
  0%, 100% { opacity: 0; }
  50%      { opacity: 0.09; }
}
@media (prefers-reduced-motion: reduce) {
  .help-pulse::before { transform: scale(1.1); animation: help-glow 5s ease-in-out infinite; }
}