/* DeskKit design v2 — phase 4c: the school schedule builder
   (schedule-builder.html) and the CRM board (crm.html).
   Loaded after css/theme-v2.css (tokens --v2-*, --tool from
   <body data-tool>, the dark header / footer / widgets) and after each
   page's own stylesheet (css/schedule.css, css/crm.css), whose light
   rules it re-dresses without touching their markup or behaviour.
   Spec: docs/design-v2-spec.md ("dark shell, real document").

   Page classes (on <body>, next to theme-v2):
     v2-sched  schedule-builder.html, data-tool="schedule" (periwinkle)
     v2-crm    crm.html, data-tool="crm" (DeskKit teal)

   Documents stay documents: the timetable grid (#sched-result-grid-wrap)
   is "a lit page on a dark desk" and keeps its light look and colours,
   and printing is unchanged — every dark rule here is screen-only, and
   the print block at the end hands the page back its old colour names
   (theme-v2.css re-points them for every medium).

   Sections: 1 schedule shell · 2 schedule forms · 3 unlock + solver
   · 4 result bar + the light timetable · 5 CRM header · 6 CRM board
   · 7 CRM dialog · 8 motion + accessibility modes · 9 print. */

/* ================================================== 1 schedule shell */
@media screen {
  html:not(.hv-light) body.theme-v2.v2-sched {
    --sch-hi: color-mix(in srgb, var(--tool) 62%, var(--v2-hi));   /* periwinkle text on dark: 8:1 */
    --sch-field: var(--v2-panel-2);
  }
  html:not(.hv-light) body.v2-sched .builder-top {
    position: relative; isolation: isolate; overflow: hidden;
    padding: clamp(22px, 3.4vw, 36px) 0 clamp(18px, 2.6vw, 26px);
    background: transparent; border-bottom: 1px solid var(--v2-line);
  }
  html:not(.hv-light) body.v2-sched .builder-top::before { /* soft periwinkle light behind the title */
    content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background:
      radial-gradient(46% 120% at 88% 0%, color-mix(in srgb, var(--tool) 20%, transparent), transparent 70%),
      radial-gradient(30% 90% at 20% 0%, rgba(var(--v2-site-rgb), .07), transparent 72%);
  }
  html[dir="ltr"]:not(.hv-light) body.v2-sched .builder-top::before {
    background:
      radial-gradient(46% 120% at 12% 0%, color-mix(in srgb, var(--tool) 20%, transparent), transparent 70%),
      radial-gradient(30% 90% at 80% 0%, rgba(var(--v2-site-rgb), .07), transparent 72%);
  }
  html:not(.hv-light) body.v2-sched .builder-top::after { /* hairline of light along the base */
    content: ""; position: absolute; inset: auto 0 -1px; height: 1px; z-index: -1; pointer-events: none;
    background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--tool) 55%, transparent), transparent);
  }
  html:not(.hv-light) body.v2-sched .builder-top h1 { color: var(--v2-hi); letter-spacing: -.01em; }
  html:not(.hv-light) body.v2-sched .breadcrumb { color: var(--v2-muted); margin-bottom: 4px; }
  html:not(.hv-light) body.v2-sched .breadcrumb a { color: var(--sch-hi); text-underline-offset: 3px; }
  html:not(.hv-light) body.v2-sched .breadcrumb a:hover { color: var(--v2-hi); }
  html:not(.hv-light) body.v2-sched :is(.breadcrumb a, .sched-name-input):focus-visible { outline: 2px solid var(--tool); outline-offset: 3px; border-radius: 4px; }
  html:not(.hv-light) body.v2-sched .sched-name-input {
    color: var(--v2-hi); caret-color: var(--tool); max-width: 100%; box-sizing: border-box;
    border-bottom: 1px dashed var(--v2-line-2); padding-bottom: 4px;
    transition: border-color var(--v2-fast) ease;
  }
  html:not(.hv-light) body.v2-sched .sched-name-input::placeholder { color: var(--v2-faint); }
  html:not(.hv-light) body.v2-sched .sched-name-input:hover { border-bottom-color: var(--v2-line-3); }
  html:not(.hv-light) body.v2-sched .sched-name-input:focus { border-bottom: 1px solid var(--tool); outline: none; }
  html:not(.hv-light) body.v2-sched .builder-save-status { color: var(--v2-muted); }
  html:not(.hv-light) body.v2-sched .builder-save-status.ok { color: var(--v2-ok); }
  html:not(.hv-light) body.v2-sched .builder-save-btn { min-height: 44px; border-radius: 999px; }

  /* The step tabs (settings → … → result): dark pills, the current one lit
     in the tool colour. */
  html:not(.hv-light) body.v2-sched .sched-tabs-nav { gap: 8px; padding-top: 22px; }
  html:not(.hv-light) body.v2-sched .sched-tab-btn {
    opacity: 1; min-height: 40px; padding: 0 16px; border-radius: 999px; font-size: 14px; font-weight: 600;
    color: var(--v2-dim); background: rgba(var(--v2-fg-rgb), .03); box-shadow: inset 0 0 0 1px var(--v2-line);
    transition: background-color var(--v2-fast) ease, color var(--v2-fast) ease, box-shadow var(--v2-fast) ease;
  }
  html:not(.hv-light) body.v2-sched .sched-tab-btn:hover { color: var(--v2-hi); background: rgba(var(--v2-fg-rgb), .06); box-shadow: inset 0 0 0 1px var(--v2-line-2); }
  html:not(.hv-light) body.v2-sched .sched-tab-btn.active {
    color: var(--v2-hi); background: color-mix(in srgb, var(--tool) 16%, transparent);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tool) 60%, transparent), 0 0 20px -8px var(--tool);
  }
  html:not(.hv-light) body.v2-sched .sched-tab-btn:focus-visible { outline: 2px solid var(--tool); outline-offset: 2px; }

  /* Cards (every step's panel). */
  html:not(.hv-light) body.v2-sched .sched-card {
    border: 0; border-radius: var(--v2-r); color: var(--v2-text);
    background: linear-gradient(180deg, rgba(var(--v2-lift-rgb), .04), rgba(var(--v2-lift-rgb), .012)), var(--v2-card);
    box-shadow: inset 0 0 0 1px rgba(var(--v2-fg-rgb), .08);
  }
  html:not(.hv-light) body.v2-sched .sched-card h3 { color: var(--v2-hi); }
  html:not(.hv-light) body.v2-sched .sched-hint { color: var(--v2-muted); line-height: 1.6; }
  html:not(.hv-light) body.v2-sched .sched-col-labels { color: var(--v2-muted); }
  html:not(.hv-light) body.v2-sched .price { color: var(--v2-hi); }
  html:not(.hv-light) body.v2-sched .price small { color: var(--v2-muted); }

  /* Small actions ("+ add subject", print, CSV …). */
  html:not(.hv-light) body.v2-sched .btn-mini {
    min-height: 34px; padding: 0 14px; border-radius: 999px; font-size: 13px; font-weight: 600;
    color: var(--v2-text); background: rgba(var(--v2-fg-rgb), .04); box-shadow: inset 0 0 0 1px var(--v2-line-2);
    transition: background-color var(--v2-fast) ease, box-shadow var(--v2-fast) ease, color var(--v2-fast) ease;
  }
  html:not(.hv-light) body.v2-sched .btn-mini:hover { color: var(--v2-hi); background: color-mix(in srgb, var(--tool) 12%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tool) 55%, transparent); }
  html:not(.hv-light) body.v2-sched .btn-mini:active { background: color-mix(in srgb, var(--tool) 20%, transparent); }
  html:not(.hv-light) body.v2-sched .btn-mini:focus-visible { outline: 2px solid var(--tool); outline-offset: 2px; }
  html:not(.hv-light) body.v2-sched .btn-mini:disabled { opacity: .45; cursor: not-allowed; }
}

/* ================================================== 2 schedule forms */
@media screen {
  html:not(.hv-light) body.v2-sched .field label { color: var(--v2-text); }
  html:not(.hv-light) body.v2-sched :is(.field select, .field input, .sched-text-input, .sched-select, .sched-num-input, #sched-entity-select, #sched-unlock-gate .unlock-box input[type="text"]) {
    color: var(--v2-text); background-color: var(--sch-field); border: 1px solid var(--v2-line-2); border-radius: 10px;
    caret-color: var(--tool); color-scheme: dark;
    transition: border-color var(--v2-fast) ease, box-shadow var(--v2-fast) ease, background-color var(--v2-fast) ease;
  }
  html:not(.hv-light) body.v2-sched :is(.field select, .field input, .sched-text-input, .sched-select, .sched-num-input, #sched-entity-select, #sched-unlock-gate .unlock-box input[type="text"])::placeholder { color: var(--v2-faint); }
  html:not(.hv-light) body.v2-sched :is(.field select, .field input, .sched-text-input, .sched-select, .sched-num-input, #sched-entity-select, #sched-unlock-gate .unlock-box input[type="text"]):hover { border-color: var(--v2-line-3); }
  html:not(.hv-light) body.v2-sched :is(.field select, .field input, .sched-text-input, .sched-select, .sched-num-input, #sched-entity-select, #sched-unlock-gate .unlock-box input[type="text"]):focus {
    outline: none; background-color: var(--v2-field-focus);
    border-color: color-mix(in srgb, var(--tool) 75%, transparent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--tool) 18%, transparent);
  }
  html:not(.hv-light) body.v2-sched :is(.field select, .sched-select, #sched-entity-select) option { background: var(--v2-panel-2); color: var(--v2-text); }
  html:not(.hv-light) body.v2-sched .field :is(select, input) { min-height: 42px; padding: 8px 12px; }
  html:not(.hv-light) body.v2-sched .sched-color-input { border-radius: 8px; box-shadow: 0 0 0 1px var(--v2-line-2); }
  html:not(.hv-light) body.v2-sched .sched-color-input:focus-visible { outline: 2px solid var(--tool); outline-offset: 2px; }

  html:not(.hv-light) body.v2-sched .sched-row { transition: background-color var(--v2-fast) ease; }
  html:not(.hv-light) body.v2-sched .sched-row:hover { background: rgba(var(--v2-fg-rgb), .03); }
  html:not(.hv-light) body.v2-sched .sched-row.sched-row-warn { background: rgba(var(--v2-warn-rgb), .08); box-shadow: inset 0 0 0 1px rgba(var(--v2-warn-rgb), .3); }
  html:not(.hv-light) body.v2-sched .sched-row-del { color: var(--v2-danger); border-radius: 8px; }
  html:not(.hv-light) body.v2-sched .sched-row-del:hover { background: var(--v2-danger-bg); }
  html:not(.hv-light) body.v2-sched .sched-row-del:focus-visible { outline: 2px solid var(--v2-danger); outline-offset: 1px; }

  html:not(.hv-light) body.v2-sched .sched-teacher-card { border: 0; border-radius: 16px; background: rgba(var(--v2-fg-rgb), .025); box-shadow: inset 0 0 0 1px var(--v2-line); }
  html:not(.hv-light) body.v2-sched :is(.sched-subfield-label, .sched-avail-toggle) { color: var(--v2-text); }
  html:not(.hv-light) body.v2-sched .sched-avail-toggle:hover { color: var(--sch-hi); }
  html:not(.hv-light) body.v2-sched .sched-avail-toggle:focus-visible { outline: 2px solid var(--tool); outline-offset: 2px; border-radius: 6px; }
  html:not(.hv-light) body.v2-sched .sched-check { color: var(--v2-dim); }
  html:not(.hv-light) body.v2-sched .sched-check input[type="checkbox"] { accent-color: var(--tool); width: 16px; height: 16px; }

  /* Teacher availability: free = a soft periwinkle cell, blocked = red. */
  html:not(.hv-light) body.v2-sched :is(.sched-avail-label) { color: var(--v2-muted); }
  html:not(.hv-light) body.v2-sched .sched-avail-daylabel { color: var(--v2-dim); }
  html:not(.hv-light) body.v2-sched .sched-avail-cell {
    border-color: color-mix(in srgb, var(--tool) 26%, transparent); background: color-mix(in srgb, var(--tool) 10%, var(--v2-well));
    transition: background-color var(--v2-fast) ease, border-color var(--v2-fast) ease;
  }
  html:not(.hv-light) body.v2-sched .sched-avail-cell:hover { border-color: var(--tool); }
  html:not(.hv-light) body.v2-sched .sched-avail-cell.off { background: rgba(var(--v2-danger-2-rgb), .3); border-color: rgba(var(--v2-danger-rgb), .7); }
  html:not(.hv-light) body.v2-sched .sched-avail-cell:focus-visible { outline: 2px solid var(--tool); outline-offset: 1px; }
}
@media screen and (max-width: 860px) {
  html:not(.hv-light) body.v2-sched .sched-row { border-color: var(--v2-line); border-radius: 12px; }
}

/* ============================================ 3 unlock + the solver
   The licence step is the page's "unlock dialog": a raised panel with
   the price, the buy button and the key field. */
@media screen {
  html:not(.hv-light) body.v2-sched #sched-result-controls {
    background:
      radial-gradient(70% 90% at 100% 0%, color-mix(in srgb, var(--tool) 12%, transparent), transparent 60%),
      linear-gradient(180deg, var(--v2-raise), var(--v2-panel));
    box-shadow: inset 0 0 0 1px var(--v2-line-2), 0 30px 80px -40px rgba(var(--v2-shade-rgb), calc(.9 * var(--v2-shade-k))), 0 0 70px -40px var(--tool);
  }
  html[dir="ltr"]:not(.hv-light) body.v2-sched #sched-result-controls {
    background:
      radial-gradient(70% 90% at 0% 0%, color-mix(in srgb, var(--tool) 12%, transparent), transparent 60%),
      linear-gradient(180deg, var(--v2-raise), var(--v2-panel));
  }
  html:not(.hv-light) body.v2-sched #sched-unlock-gate { max-width: 640px; }
  html:not(.hv-light) body.v2-sched #sched-unlock-gate .btn { min-height: 48px; border-radius: 999px; display: flex !important; align-items: center; justify-content: center; }
  html:not(.hv-light) body.v2-sched #sched-unlock-gate .unlock-box { border-top-color: var(--v2-line); }
  html:not(.hv-light) body.v2-sched #sched-unlock-gate .unlock-box input[type="text"] { min-height: 46px; border-radius: 12px; letter-spacing: .04em; }
  html:not(.hv-light) body.v2-sched .unlock-note { color: var(--v2-muted); }
  html:not(.hv-light) body.v2-sched .unlock-note.err { color: var(--v2-danger); }
  html:not(.hv-light) body.v2-sched .unlock-note.ok { color: var(--v2-ok); }

  html:not(.hv-light) body.v2-sched .sched-result-actions .btn { min-height: 44px; border-radius: 999px; }
  html:not(.hv-light) body.v2-sched .sched-solver-status { color: var(--v2-muted); }
  html:not(.hv-light) body.v2-sched .sched-solver-status.running { color: var(--sch-hi); }
  html:not(.hv-light) body.v2-sched .sched-health { color: var(--v2-warn-hi); background: rgba(var(--v2-warn-rgb), .08); box-shadow: inset 0 0 0 1px rgba(var(--v2-warn-rgb), .3); border-radius: 14px; }
}

/* ============================== 4 result bar + the light timetable */
@media screen {
  html:not(.hv-light) body.v2-sched .sched-view-toggle { padding: 4px; gap: 4px; border-radius: 999px; background: rgba(var(--v2-fg-rgb), .03); box-shadow: inset 0 0 0 1px var(--v2-line); }
  html:not(.hv-light) body.v2-sched .sched-view-btn {
    min-height: 34px; padding: 0 14px; color: var(--v2-dim); background: transparent; font-size: 13px;
    transition: background-color var(--v2-fast) ease, color var(--v2-fast) ease, box-shadow var(--v2-fast) ease;
  }
  html:not(.hv-light) body.v2-sched .sched-view-btn:hover { color: var(--v2-hi); background: rgba(var(--v2-fg-rgb), .05); }
  html:not(.hv-light) body.v2-sched .sched-view-btn.active { color: var(--v2-hi); background: color-mix(in srgb, var(--tool) 18%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tool) 60%, transparent); }
  html:not(.hv-light) body.v2-sched .sched-view-btn:focus-visible { outline: 2px solid var(--tool); outline-offset: 2px; }
  html:not(.hv-light) body.v2-sched #sched-entity-select { min-height: 40px; padding: 6px 12px; font-size: 14px; }
  html:not(.hv-light) body.v2-sched .sched-conflict-badge { color: var(--v2-danger); background: var(--v2-danger-bg); box-shadow: inset 0 0 0 1px rgba(var(--v2-danger-rgb), .4); }

  /* The timetable itself: a lit sheet on the dark desk, in its own (old)
     colours — the variables theme-v2.css re-pointed are handed back. */
  html:not(.hv-light) body.v2-sched #sched-result-grid-wrap {
    --ink: #111827; --ink-dark: #0B0F17; --ink-light: #1F2733; --dark: #1A1A1A; --grey: #6B6B6B;
    --white: #FFFFFF; --ice: #EAF6F6; --text: #111827;
    color: #111827; background: #fff; border: 0; border-radius: 16px;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, .06), 0 30px 80px -30px rgba(0, 0, 0, .9), 0 0 90px -40px color-mix(in srgb, var(--tool) 70%, transparent);
  }
  html:not(.hv-light) body.v2-sched #sched-result-grid-wrap:empty { display: none; }
}

/* ====================================================== 5 CRM header */
@media screen {
  html:not(.hv-light) body.theme-v2.v2-crm > section:first-of-type { position: relative; isolation: isolate; }
  html:not(.hv-light) body.theme-v2.v2-crm > section:first-of-type::before { /* teal light behind the title */
    content: ""; position: absolute; inset: 0 0 auto; height: 360px; z-index: -1; pointer-events: none;
    background:
      radial-gradient(40% 80% at 86% 0%, rgba(var(--v2-teal-rgb), .14), transparent 70%),
      radial-gradient(30% 70% at 30% 0%, rgba(var(--v2-site-rgb), .07), transparent 72%);
  }
  html[dir="ltr"]:not(.hv-light) body.theme-v2.v2-crm > section:first-of-type::before {
    background:
      radial-gradient(40% 80% at 14% 0%, rgba(var(--v2-teal-rgb), .14), transparent 70%),
      radial-gradient(30% 70% at 70% 0%, rgba(var(--v2-site-rgb), .07), transparent 72%);
  }
  html:not(.hv-light) body.v2-crm .crm-header-bar { padding: clamp(24px, 3.4vw, 40px) 0 22px; }
  html:not(.hv-light) body.v2-crm .crm-header-bar h1 { color: var(--v2-hi); font-size: clamp(26px, 1.4rem + 1vw, 34px); letter-spacing: -.015em; }
  html:not(.hv-light) body.v2-crm .crm-local-note {
    color: var(--v2-warn-hi) !important; background: rgba(var(--v2-warn-rgb), .08) !important; border-color: rgba(var(--v2-warn-rgb), .35) !important; border-radius: 12px !important;
  }
  html:not(.hv-light) body.v2-crm .crm-local-note b { color: var(--v2-hi); }
  html:not(.hv-light) body.v2-crm .crm-summary {
    border: 0; border-radius: 999px; background: linear-gradient(180deg, rgba(var(--v2-teal-rgb), .1), rgba(var(--v2-teal-rgb), .03)), var(--v2-well);
    box-shadow: inset 0 0 0 1px rgba(var(--v2-teal-hi-rgb), .35), 0 0 30px -14px var(--v2-teal);
  }
  html:not(.hv-light) body.v2-crm .crm-summary-label { color: var(--v2-dim); }
  html:not(.hv-light) body.v2-crm .crm-summary-total { color: var(--v2-hi); font-family: 'Space Grotesk', 'Heebo', sans-serif; text-shadow: 0 0 18px rgba(var(--v2-teal-rgb), calc(.45 * var(--v2-glow-k))); }
  html:not(.hv-light) body.v2-crm .crm-header-bar .btn { min-height: 44px; border-radius: 999px; }
  html:not(.hv-light) body.v2-crm #crm-backup-json { color: var(--v2-muted) !important; min-height: 24px; }
  html:not(.hv-light) body.v2-crm #crm-backup-json:hover { color: var(--v2-hi) !important; }
  html:not(.hv-light) body.v2-crm #crm-backup-json:focus-visible { outline: 2px solid var(--v2-teal-hi); outline-offset: 2px; border-radius: 4px; }
}

/* ======================================================= 6 CRM board
   Four dark columns, each marked with a glowing dot in its stage's
   colour (new = blue, in progress = gold, follow-up = violet, won =
   green); lead cards are raised dark cards that lift in teal. */
@media screen {
  html:not(.hv-light) body.v2-crm .crm-col {
    --stage: var(--v2-teal);
    border-radius: var(--v2-r); padding: 16px; gap: 12px;
    background: linear-gradient(180deg, color-mix(in srgb, var(--stage) 7%, transparent), transparent 140px), rgba(var(--v2-lift-rgb), .02);
    box-shadow: inset 0 0 0 1px var(--v2-line);
  }
  html:not(.hv-light) body.v2-crm .crm-col[data-stage="new"] { --stage: var(--v2-site); }
  html:not(.hv-light) body.v2-crm .crm-col[data-stage="inprogress"] { --stage: var(--v2-quote); }
  html:not(.hv-light) body.v2-crm .crm-col[data-stage="followup"] { --stage: var(--v2-cv); }
  html:not(.hv-light) body.v2-crm .crm-col[data-stage="won"] { --stage: var(--v2-ok); }
  html:not(.hv-light) body.v2-crm .crm-col-head h3 { color: var(--v2-hi); display: flex; align-items: center; gap: 9px; }
  html:not(.hv-light) body.v2-crm .crm-col-head h3::before {
    content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%;
    background: var(--stage); box-shadow: 0 0 10px 1px var(--stage);
  }
  html:not(.hv-light) body.v2-crm .crm-col-count { color: var(--v2-text); background: rgba(var(--v2-fg-rgb), .06); box-shadow: inset 0 0 0 1px var(--v2-line-2); }
  html:not(.hv-light) body.v2-crm .crm-col-total { color: var(--v2-dim); font-family: 'Space Grotesk', 'Heebo', sans-serif; }
  html:not(.hv-light) body.v2-crm .crm-col-body.drag-over { background: rgba(var(--v2-teal-rgb), .08); outline: 2px dashed rgba(var(--v2-teal-hi-rgb), .6); outline-offset: 2px; }
  html:not(.hv-light) body.v2-crm .crm-col-empty { color: var(--v2-muted); }
  html:not(.hv-light) body.v2-crm .crm-col-add {
    min-height: 40px; border: 1px dashed var(--v2-line-3); border-radius: 12px; color: var(--v2-dim);
    transition: border-color var(--v2-fast) ease, background-color var(--v2-fast) ease, color var(--v2-fast) ease;
  }
  html:not(.hv-light) body.v2-crm .crm-col-add:hover { color: var(--v2-hi); background: rgba(var(--v2-teal-rgb), .07); border-color: rgba(var(--v2-teal-hi-rgb), .6); }
  html:not(.hv-light) body.v2-crm .crm-col-add:focus-visible { outline: 2px solid var(--v2-teal-hi); outline-offset: 2px; }

  html:not(.hv-light) body.v2-crm .crm-card {
    border: 0; border-radius: 14px; padding: 13px 14px; color: var(--v2-text);
    background: linear-gradient(180deg, rgba(var(--v2-lift-rgb), .05), rgba(var(--v2-lift-rgb), .015)), #0c111a;
    box-shadow: inset 0 0 0 1px rgba(var(--v2-fg-rgb), .08), 0 10px 24px -16px rgba(var(--v2-shade-rgb), calc(.9 * var(--v2-shade-k)));
    transition: transform var(--v2-med) var(--v2-ease), box-shadow var(--v2-med) var(--v2-ease), opacity var(--v2-fast) ease;
  }
  html:not(.hv-light) body.v2-crm .crm-card:hover {
    transform: translateY(-2px);
    box-shadow: inset 0 0 0 1px rgba(var(--v2-teal-hi-rgb), .5), 0 18px 36px -22px rgba(var(--v2-teal-rgb), calc(.65 * var(--v2-glow-k)));
  }
  html:not(.hv-light) body.v2-crm .crm-card.dragging { opacity: .4; transform: none; }
  html:not(.hv-light) body.v2-crm .crm-card-name { color: var(--v2-hi); }
  html:not(.hv-light) body.v2-crm .crm-card-line { color: var(--v2-dim); text-decoration: none; }
  html:not(.hv-light) body.v2-crm .crm-card-line:hover { color: var(--v2-teal-hi); }
  html:not(.hv-light) body.v2-crm .crm-card-notes { color: var(--v2-muted); }
  html:not(.hv-light) body.v2-crm .crm-card-amount { color: var(--v2-teal-hi); font-family: 'Space Grotesk', 'Heebo', sans-serif; }
  html:not(.hv-light) body.v2-crm .crm-card-del { color: var(--v2-muted); }
  html:not(.hv-light) body.v2-crm .crm-card-del:hover { color: var(--v2-danger); background: var(--v2-danger-bg); }
  html:not(.hv-light) body.v2-crm .crm-move-btn {
    width: 28px; height: 28px; border: 0; color: var(--v2-text); background: rgba(var(--v2-fg-rgb), .05); box-shadow: inset 0 0 0 1px var(--v2-line-2);
    transition: background-color var(--v2-fast) ease, box-shadow var(--v2-fast) ease;
  }
  html:not(.hv-light) body.v2-crm .crm-move-btn:hover:not(:disabled) { background: rgba(var(--v2-teal-rgb), .12); box-shadow: inset 0 0 0 1px rgba(var(--v2-teal-hi-rgb), .6); }
  html:not(.hv-light) body.v2-crm :is(.crm-card-del, .crm-move-btn, .crm-card-line):focus-visible { outline: 2px solid var(--v2-teal-hi); outline-offset: 2px; }
}

/* ===================================================== 7 CRM dialog */
@media screen {
  html:not(.hv-light) body.v2-crm .crm-modal { background: rgba(var(--v2-scrim-rgb), calc(.72 * var(--v2-scrim-k))); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
  html:not(.hv-light) body.v2-crm .crm-modal-card {
    border-radius: 24px; padding: 28px 26px 24px; color: var(--v2-text);
    background: radial-gradient(120% 80% at 100% 0%, rgba(var(--v2-teal-rgb), .08), transparent 55%), linear-gradient(180deg, var(--v2-raise), var(--v2-panel));
    box-shadow: inset 0 0 0 1px var(--v2-line-2), 0 40px 100px -30px rgba(var(--v2-shade-rgb), calc(.95 * var(--v2-shade-k))), 0 0 80px -40px rgba(var(--v2-teal-rgb), calc(.45 * var(--v2-glow-k)));
  }
  html:not(.hv-light) body.v2-crm .crm-modal-card h3 { color: var(--v2-hi); padding-inline-end: 36px; }
  html:not(.hv-light) body.v2-crm .crm-modal-card label { color: var(--v2-text); font-weight: 600; }
  html:not(.hv-light) body.v2-crm .crm-modal-card :is(input, select, textarea) {
    min-height: 44px; border-radius: 12px; color: var(--v2-text); background-color: var(--v2-panel-2); border: 1px solid var(--v2-line-2);
    caret-color: var(--v2-teal-hi); color-scheme: dark;
    transition: border-color var(--v2-fast) ease, box-shadow var(--v2-fast) ease;
  }
  html:not(.hv-light) body.v2-crm .crm-modal-card :is(input, select, textarea):hover { border-color: var(--v2-line-3); }
  html:not(.hv-light) body.v2-crm .crm-modal-card :is(input, select, textarea):focus { outline: none; border-color: rgba(var(--v2-teal-rgb), .75); box-shadow: 0 0 0 4px rgba(var(--v2-teal-rgb), .16); }
  html:not(.hv-light) body.v2-crm .crm-modal-card select option { background: var(--v2-panel-2); color: var(--v2-text); }
  html:not(.hv-light) body.v2-crm .crm-modal-card textarea { min-height: 84px; }
  html:not(.hv-light) body.v2-crm .crm-modal-close {
    top: 18px; inset-inline-start: auto; inset-inline-end: 18px; width: 36px; height: 36px; border-radius: 50%;
    color: var(--v2-dim); background: rgba(var(--v2-fg-rgb), .06); box-shadow: inset 0 0 0 1px var(--v2-line);
  }
  html:not(.hv-light) body.v2-crm .crm-modal-close:hover { color: var(--v2-hi); background: rgba(var(--v2-fg-rgb), .12); }
  html:not(.hv-light) body.v2-crm .crm-modal-close:focus-visible { outline: 2px solid var(--v2-teal-hi); outline-offset: 2px; }
  html:not(.hv-light) body.v2-crm .crm-modal-actions .btn { min-height: 46px; border-radius: 999px; }
  html:not(.hv-light) body.v2-crm #crm-modal-delete { min-height: 46px; border-radius: 999px; color: var(--v2-danger); background: var(--v2-danger-bg); border: 1px solid rgba(var(--v2-danger-rgb), .4); cursor: pointer; font-family: inherit; font-weight: 700; }
  html:not(.hv-light) body.v2-crm #crm-modal-delete:hover { background: rgba(var(--v2-danger-2-rgb), .18); border-color: var(--v2-danger); }
  html:not(.hv-light) body.v2-crm #crm-modal-delete:focus-visible { outline: 2px solid var(--v2-danger); outline-offset: 2px; }
}

/* The signed-in "my content" rail (js/my-panel.js): a dark side panel. */
@media screen {
  html:not(.hv-light) body.v2-crm .my-sites-rail { background: var(--v2-bg-2); border-inline-end-color: var(--v2-line); }
  html:not(.hv-light) body.v2-crm .my-panel-reopen { color: var(--v2-text); background: var(--v2-panel-2); border-color: var(--v2-line-2); }
  html:not(.hv-light) body.v2-crm .my-panel-subtitle { color: var(--v2-hi); }
  html:not(.hv-light) body.v2-crm :is(.my-panel-collapse, .my-content-delete-btn) { color: var(--v2-muted); }
  html:not(.hv-light) body.v2-crm :is(.my-panel-collapse, .my-panel-reopen, .my-panel-account-toggle):hover { color: var(--v2-hi); background: rgba(var(--v2-fg-rgb), .06); }
  html:not(.hv-light) body.v2-crm .my-panel-section-head { color: var(--v2-dim); background: rgba(var(--v2-fg-rgb), .04); }
  html:not(.hv-light) body.v2-crm .my-panel-section-head:hover { background: rgba(var(--v2-fg-rgb), .07); }
  html:not(.hv-light) body.v2-crm .my-panel-card { color: var(--v2-text); }
  html:not(.hv-light) body.v2-crm .my-panel-card:hover { background: rgba(var(--v2-fg-rgb), .04); border-color: var(--v2-line); }
  html:not(.hv-light) body.v2-crm .my-panel-card.active { background: rgba(var(--v2-teal-rgb), .1); border-color: rgba(var(--v2-teal-hi-rgb), .3); box-shadow: inset 2px 0 0 var(--v2-teal); }
  html:not(.hv-light) body.v2-crm .my-panel-card-thumb { color: var(--v2-teal-hi); background: rgba(var(--v2-teal-rgb), .1); }
  html:not(.hv-light) body.v2-crm .my-panel-card-tpl { color: var(--v2-muted); }
  html:not(.hv-light) body.v2-crm .my-panel-empty-cta { color: var(--v2-dim); border-color: var(--v2-line-3); }
  html:not(.hv-light) body.v2-crm .my-panel-empty-cta:hover { color: var(--v2-hi); border-color: rgba(var(--v2-teal-hi-rgb), .6); background: rgba(var(--v2-teal-rgb), .07); }
  html:not(.hv-light) body.v2-crm .my-content-delete-btn:hover { color: var(--v2-danger); background: var(--v2-danger-bg); }
  html:not(.hv-light) body.v2-crm .my-panel-account { background: var(--v2-panel); border-top-color: var(--v2-line); }
  html:not(.hv-light) body.v2-crm .my-panel-account-toggle { color: var(--v2-text); }
  html:not(.hv-light) body.v2-crm .my-panel-account-email { color: var(--v2-dim); }
  html:not(.hv-light) body.v2-crm .my-panel-resize-handle::after { background: var(--v2-line-2); }
}
@media screen and (max-width: 900px) {
  html:not(.hv-light) body.v2-crm .my-sites-rail { border-bottom-color: var(--v2-line); }
}

/* ================================== 8 motion + accessibility modes */
@media (prefers-reduced-motion: reduce) {
  body.v2-sched :is(.sched-tab-btn, .sched-view-btn, .btn-mini, .sched-avail-cell, .sched-row),
  body.v2-crm :is(.crm-card, .crm-col-add, .crm-move-btn) { transition-duration: .01ms !important; }
  body.v2-crm .crm-card:hover { transform: none !important; }
}
html.dka-still body.v2-crm .crm-card:hover { transform: none !important; }
/* High contrast (accessibility panel): the decorative light goes, the
   page's own colours come from the panel; the timetable keeps an edge. */
html:is(.dka-contrast-dark, .dka-contrast-light) body.v2-sched .builder-top::before,
html:is(.dka-contrast-dark, .dka-contrast-light) body.v2-sched .builder-top::after,
html:is(.dka-contrast-dark, .dka-contrast-light) body.v2-crm > section:first-of-type::before,
html:is(.dka-contrast-dark, .dka-contrast-light) body.v2-crm .crm-col-head h3::before { display: none; }
html:is(.dka-contrast-dark, .dka-contrast-light) body.v2-sched :is(.sched-tab-btn.active, .sched-view-btn.active) { outline: 2px solid currentColor; outline-offset: -2px; }
html:is(.dka-contrast-dark, .dka-contrast-light) body.v2-sched #sched-result-grid-wrap,
html:is(.dka-contrast-dark, .dka-contrast-light) body.v2-crm :is(.crm-col, .crm-card) { outline: 1.5px solid currentColor; }
html.dka-contrast-light:has(body.v2-sched), html.dka-contrast-light:has(body.v2-crm) { color-scheme: light; }
html.dka-contrast-light body:is(.v2-sched, .v2-crm) :is(input, select, textarea) { color-scheme: light; }

/* ============================================================ 9 print
   theme-v2.css re-points the old colour names (--ink-dark, --grey, …) on
   body.theme-v2 for every medium; hand the printed page its old ones so
   the printout is exactly what it was. */
@media print {
  html:not(.hv-light):has(body.theme-v2:is(.v2-sched, .v2-crm)) { background: transparent; color-scheme: normal; }
  html:not(.hv-light) body.theme-v2:is(.v2-sched, .v2-crm) {
    --text: #111827; --text-main: #111827; --text-secondary: #667085; --text-muted: #98A2B3;
    --dark: #1A1A1A; --ink: #111827; --ink-dark: #0B0F17; --grey: #6B6B6B; --grey-light: #F4F6F5; --ice: #EAF6F6;
    --bg: #F8FAFC; --bg-main: #F8FAFC; --surface: #FFFFFF; --bg-card: #FFFFFF; --border: #E5E7EB; --border-color: #E5E7EB;
    --primary-light: #CCFBF1; --brand-dark: #0F766E;
    --shadow: 0 10px 30px rgba(13, 13, 20, 0.10); --shadow-lg: 0 24px 60px rgba(13, 13, 20, 0.18);
    --shadow-md: 0 4px 20px -2px rgba(148, 163, 184, 0.12);
    --shadow-card: 0 10px 25px -5px rgba(148, 163, 184, 0.08), 0 8px 10px -6px rgba(148, 163, 184, 0.04);
    --shadow-sm: 0 1px 3px rgba(var(--v2-shade-rgb), calc(0.02 * var(--v2-shade-k)));
    /* What the old page computes to when printed (no page background,
       black body text), so the printout is pixel-identical. */
    background: transparent; color: #000;
  }
}

/* ============================================ light theme ("מצב בהיר")
   Tokens: css/theme-v2.css (html.dk-light). White columns and cards with
   a hairline and a soft lift; the timetable sheet is unchanged. */
html.dk-light:not(.dka-contrast-dark, .dka-contrast-light) body.v2-crm .crm-card { background: #fff; box-shadow: inset 0 0 0 1px rgba(11, 16, 32, .08), 0 6px 16px -12px rgba(15, 23, 42, .3); }
html.dk-light:not(.dka-contrast-dark, .dka-contrast-light) body.v2-crm .crm-summary { background: linear-gradient(180deg, rgba(13, 148, 136, .07), rgba(13, 148, 136, .02)), #fff; }
html.dk-light:not(.dka-contrast-dark, .dka-contrast-light) body.v2-crm .crm-modal-card { box-shadow: inset 0 0 0 1px rgba(11, 16, 32, .08), var(--v2-lift-3); }
html.dk-light:not(.dka-contrast-dark, .dka-contrast-light) body.v2-sched .sched-card { box-shadow: inset 0 0 0 1px rgba(11, 16, 32, .08), var(--v2-lift-1); }
html.dk-light:not(.dka-contrast-dark, .dka-contrast-light) body.v2-sched #sched-result-grid-wrap { box-shadow: 0 24px 50px -28px rgba(15, 23, 42, .3), 0 0 0 1px rgba(11, 16, 32, .08); }