/* ============================================================
   dacum-components.css
   ------------------------------------------------------------
   Component styling for DACUM Live Pro.

   PHASE 1 of the CSS ownership consolidation. Every rule here was
   moved VERBATIM out of the inline <style> block in index.html —
   1,860 lines that made index.html 64% stylesheet. No declaration,
   selector or ordering was changed in the move.

   LOAD ORDER IS LOAD-BEARING. This file MUST stay the last
   stylesheet in index.html:

       dacum-styles.css        base + layout
       dacum-responsive.css    media queries
       dacum-fixes.css         legacy overrides (removed in Phase 2)
       dacum-typography.css    fonts and sizing
       dacum-components.css    THIS FILE — must be last

   These rules previously sat in an inline <style> AFTER all four
   <link> tags, so they won every tie at equal specificity. Loading
   this file anywhere but last silently changes which rule wins in
   those ties — no error, just the wrong appearance. The comment in
   index.html next to the <link> tags says the same thing; if you
   move one, read the other.

   Also: any new stylesheet must be added to PRECACHE_URLS in sw.js,
   or the app keeps working online and quietly breaks offline.
   ============================================================ */

      /* ── Top-toolbar sidebar toggle: hidden on desktop,
            shown on mobile via dacum-mobile.js injected CSS  ── */
      #btnSidebarToggle { display: none; }

      /* ── Fully-hidden sidebar state (force-hide keeps 0px, not 68px) ── */
      #dacumProjectsSidebar.dps-force-hidden {
        width: 0 !important;
        overflow: hidden !important;
        box-shadow: none !important;
        min-width: 0 !important;
      }
      #dacumAppWrapper.dps-force-hidden-wrapper > .container {
        margin-left: 0 !important;
      }

      /* Mobile overlay */
      @media (max-width: 900px) {
        #dacumProjectsSidebar {
          position: fixed !important;
          top: 60px !important;
          left: 0 !important;
          height: calc(100vh - 60px) !important;
          width: 260px !important;
          transform: translateX(-100%);
          transition: transform 0.28s cubic-bezier(.4,0,.2,1) !important;
          z-index: 500 !important;
          box-shadow: none !important;
        }
        #dacumProjectsSidebar.dps-mobile-open {
          transform: translateX(0) !important;
          box-shadow: 2px 0 24px rgba(0,0,0,0.3) !important;
        }
        #dacumProjectsSidebar.dps-force-hidden {
          transform: translateX(-100%) !important;
          width: 260px !important;
        }
        #dacumAppWrapper > .container,
        #dacumAppWrapper.dps-force-hidden-wrapper > .container {
          margin-left: 0 !important;
        }
      }

      @keyframes refine-fade-in {
        from { opacity:0; transform:translateY(-6px); }
        to   { opacity:1; transform:translateY(0); }
      }

      /* ── Drag & Drop (Card View only) ─────────────────────── */
      .drag-ghost    { opacity: 0.35; outline: 2px dashed #667eea; background: #eef2ff !important; }
      .drag-chosen   { transform: scale(1.03); box-shadow: 0 8px 22px rgba(102,126,234,0.25); z-index: 5; }
      .drag-dragging { opacity: 0.85; cursor: grabbing !important; }
      .card-view-mode .dcv-task-card            { cursor: grab; transition: transform 0.15s, box-shadow 0.15s; }
      .card-view-mode .dcv-task-card:active     { cursor: grabbing; }
      .card-view-mode .dcv-task-card .dcv-task-input { cursor: text; }
      .card-view-mode .dcv-task-card .dcv-close-btn  { cursor: pointer; }

      /* Post-drop flash (no animation, auto-removed after 1.5s) */
      .task-moved-highlight {
        background-color: rgba(102, 126, 234, 0.15) !important;
        border: 1px solid #667eea !important;
      }

      /* ── Refine Results: persistent summary card ─────────── */
      #refineSummaryCard {
        position: relative;
        margin-top: 10px;
        padding: 14px 42px 14px 18px;
        background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%);
        border: 1.5px solid #10b981;
        border-radius: 10px;
        color: #065f46;
        font-size: 0.88em;
        line-height: 1.55;
        animation: refine-fade-in 0.35s ease;
      }
      .refine-summary-close {
        position: absolute;
        top: 6px; right: 10px;
        background: transparent;
        border: none;
        font-size: 1.3em;
        color: #065f46;
        cursor: pointer;
        opacity: 0.55;
        line-height: 1;
        padding: 4px 8px;
        border-radius: 4px;
        transition: opacity 0.15s, background 0.15s;
      }
      .refine-summary-close:hover { opacity: 1; background: rgba(16,185,129,0.18); }
      .refine-summary-icon  { font-size: 1.25em; margin-bottom: 2px; }
      .refine-summary-title { font-weight: 700; margin-bottom: 6px; font-size: 1em; color: #064e3b; }
      .refine-summary-body  { color: #065f46; }
      .refine-summary-list  { margin: 4px 0 8px 22px; padding: 0; line-height: 1.75; color: #047857; }
      .refine-summary-list li { margin: 0; }
      .refine-summary-hint  { margin-top: 8px; color: #065f46; font-size: 0.92em; }
      .refine-summary-undo  { margin-top: 8px; font-size: 0.85em; color: #047857; }
      .refine-summary-undo kbd {
        background: #ffffff;
        border: 1px solid #a7f3d0;
        border-radius: 4px;
        padding: 1px 6px;
        font-family: inherit;
        font-size: 0.88em;
        color: #065f46;
        margin: 0 1px;
      }

      /* ── Version badge (toolbar, far right) ────────────────────
         Quiet by default — it's reference information, not an action.
         Gains an amber pulse only when a new build is waiting, at
         which point clicking it applies the update. */
      #dacumVersionBadge {
        display: inline-flex;
        align-items: center;
        height: 26px;
        padding: 0 9px;
        margin-right: 4px;
        background: #f1f5f9;
        color: #64748b;
        border: 1px solid #e2e8f0;
        border-radius: 99px;
        font-size: 0.72em;
        font-weight: 700;
        letter-spacing: 0.02em;
        font-family: inherit;
        cursor: default;
        white-space: nowrap;
        flex-shrink: 0;
        transition: background 0.15s, color 0.15s, border-color 0.15s;
      }
      #dacumVersionBadge:hover { background: #e2e8f0; color: #475569; }

      #dacumVersionBadge.dacum-version-update {
        background: linear-gradient(135deg, #f59e0b, #d97706);
        color: #ffffff;
        border-color: #d97706;
        cursor: pointer;
        animation: dacum-version-pulse 2s ease-in-out infinite;
      }
      #dacumVersionBadge.dacum-version-update:hover {
        background: linear-gradient(135deg, #d97706, #b45309);
        color: #ffffff;
      }
      @keyframes dacum-version-pulse {
        0%, 100% { box-shadow: 0 0 0 0 rgba(245,158,11,0.55); }
        50%      { box-shadow: 0 0 0 5px rgba(245,158,11,0); }
      }

      /* Phones: the toolbar is tight — keep the badge only when it
         actually needs attention. */
      @media (max-width: 700px) {
        #dacumVersionBadge:not(.dacum-version-update) { display: none; }
      }

      /* The presentation view has no build chrome on it. */
      body.card-view-fullscreen #dacumVersionBadge { display: none !important; }

      /* ── Tab header row ────────────────────────────────────────
         Title on one side, "Clear This Tab" on the other, aligned on
         the same baseline. Replaces the old layout where the button
         sat in its own block ABOVE the heading, which pushed the page
         title out of first position. Used by Chart Info, Duties &
         Tasks, and Additional Information. */
      .tab-header-row {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 16px;
        margin-bottom: 20px;
        flex-wrap: wrap;
      }
      .tab-header-row h2 {
        margin: 0;
        flex: 1 1 auto;
        min-width: 0;
      }
      .tab-header-row [data-action="clear-tab"] {
        flex: 0 0 auto;
      }

      /* Phones: the title needs the full width, so the button drops
         below it and stretches — easier to hit than a cramped chip. */
      @media (max-width: 600px) {
        .tab-header-row {
          flex-direction: column;
          align-items: stretch;
          gap: 10px;
        }
        .tab-header-row [data-action="clear-tab"] {
          width: 100%;
          justify-content: center;
        }
      }

      /* ── Inline "?" help button beside a tab title ─────────────
         Sits with the heading in the left half of .tab-header-row so
         the row's space-between still pushes "Clear This Tab" to the
         far side. */
      .tab-title-with-help {
        display: flex;
        align-items: center;
        gap: 10px;
        flex: 1 1 auto;
        min-width: 0;
      }
      .tab-title-with-help h2 { margin: 0; min-width: 0; overflow-wrap: anywhere; }

      /* The vertical-ellipse bug on Android: the touch-target block in
         dacum-responsive.css sets `min-height: 44px` on every <button>
         under (hover:none) and (pointer:coarse). This rule pinned width
         and height at 24px but never declared a min-height, so the
         inherited 44px won unopposed — 24px wide, 44px tall, i.e. an
         oval stretched lengthwise. It showed on Android (and any touch
         device) and never on desktop, because the media query only
         matches coarse pointers.

         The same trap was already closed for .dcv-close-btn / .dcv-add-btn
         and the toolbar icon buttons further down; the help button was
         simply missed. Pin every axis — min-* and max-* equal to
         width/height — so nothing inherited can stretch or squeeze it.
         The 44px touch area is restored below via a transparent ::after,
         which keeps the tap zone accessible without inflating the circle. */
      .tab-help-btn {
        flex: 0 0 auto;
        box-sizing: border-box;
        width: 24px;
        height: 24px;
        min-width: 24px;
        max-width: 24px;
        min-height: 24px;   /* ← the missing declaration */
        max-height: 24px;
        aspect-ratio: 1 / 1;
        padding: 0 !important;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        align-self: center;
        border-radius: 50%;
        background: #e0e7ff;
        color: #4338ca;
        border: 1px solid #c7d2fe;
        font-size: 13px;    /* px, not em: immune to heading font-size shifts */
        font-weight: 800;
        line-height: 1;
        cursor: pointer;
        position: relative;
        -webkit-appearance: none;
                appearance: none;
        transition: background 0.15s, color 0.15s, transform 0.12s;
      }
      .tab-help-btn:hover {
        background: #4f46e5;
        color: #ffffff;
        border-color: #4f46e5;
        transform: scale(1.1);
      }
      .tab-help-btn:active { transform: scale(0.95); }

      /* Invisible 44x44 tap area centred on the 24px circle, so shrinking
         the visual size back to a circle does not cost touch accuracy. */
      @media (hover: none) and (pointer: coarse) {
        .tab-help-btn::after {
          content: "";
          position: absolute;
          top: 50%;
          left: 50%;
          width: 44px;
          height: 44px;
          transform: translate(-50%, -50%);
        }
      }

      /* ── "✨ AI" toggle beside the "?" (3.102.0) ─────────────────
         Folds the tab's large AI card (ai_card_toggle.js). Every axis
         is pinned like .tab-help-btn: the touch block gives each
         <button> min-height 44px, which would stretch the pill. The
         44px tap area comes back through a transparent ::after.
         Filled = card open; outline = card folded. */
      .tab-ai-toggle {
        flex: 0 0 auto;
        box-sizing: border-box;
        height: 26px;
        min-height: 26px;
        max-height: 26px;
        padding: 0 10px 0 8px !important;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 4px;
        align-self: center;
        border-radius: 999px;
        border: 1.5px solid #0284c7;
        background: transparent;
        color: #0284c7;
        font-size: 12px;
        font-weight: 800;
        line-height: 1;
        letter-spacing: 0.02em;
        white-space: nowrap;
        cursor: pointer;
        position: relative;
        -webkit-appearance: none;
                appearance: none;
        transition: background 0.15s, color 0.15s, border-color 0.15s, box-shadow 0.15s;
      }
      .tab-ai-toggle.is-open {
        background: linear-gradient(135deg, #0ea5e9 0%, #0284c7 100%);
        border-color: #0284c7;
        color: #ffffff;
        box-shadow: 0 2px 6px rgba(2, 132, 199, 0.3);
      }
      .tab-ai-toggle:hover { border-color: #0369a1; box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.18); }
      .tab-ai-toggle:focus-visible { outline: 2px solid #0369a1; outline-offset: 2px; }
      .tab-ai-toggle-icon { display: block; flex: none; margin: 0 !important; }
      .tab-ai-toggle[hidden] { display: none !important; }
      html[dir="rtl"] .tab-ai-toggle { padding: 0 8px 0 10px !important; }
      @media (hover: none) and (pointer: coarse) {
        .tab-ai-toggle::after {
          content: "";
          position: absolute;
          top: 50%;
          left: 50%;
          width: 100%;
          min-width: 44px;
          height: 44px;
          transform: translate(-50%, -50%);
        }
      }

      /* Fold: grid rows 1fr → 0fr animates to the content's real height,
         so nothing below jumps. Overflow is clipped only while folded or
         moving, so the open card keeps its shadow. */
      .ai-card-collapse {
        display: grid;
        grid-template-rows: 1fr;
        opacity: 1;
        visibility: visible;
        transition: grid-template-rows 0.3s ease, opacity 0.22s ease, visibility 0s linear 0s;
      }
      .ai-card-collapse > .ai-card-collapse-inner { min-height: 0; min-width: 0; }
      .ai-card-collapse.is-collapsed > .ai-card-collapse-inner,
      .ai-card-collapse.is-animating > .ai-card-collapse-inner { overflow: hidden; }
      .ai-card-collapse.is-collapsed {
        grid-template-rows: 0fr;
        opacity: 0;
        visibility: hidden;
        transition: grid-template-rows 0.3s ease, opacity 0.22s ease, visibility 0s linear 0.3s;
      }
      .ai-card-collapse.no-anim { transition: none !important; }
      @media (prefers-reduced-motion: reduce) {
        .ai-card-collapse,
        .ai-card-collapse.is-collapsed,
        .tab-ai-toggle { transition: none !important; }
      }
      /* Narrow screens: the card's buttons wrap inside the width. */
      @media (max-width: 600px) {
        .ai-card-collapse .ai-gen-card { padding: 16px !important; }
        .ai-card-collapse .ai-gen-card button { max-width: 100%; white-space: normal; }
      }

      /* Section-level (h3) header row — same title-left / action-right
         arrangement as .tab-header-row, but scoped to a card inside a
         tab rather than the tab heading itself. */
      .section-header-row {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        margin-bottom: 15px;
      }
      .section-header-row h3 { margin: 0; }

      /* Cluster card section heading + inline "?" help button */
      .cluster-section-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        margin-bottom: 6px;
      }
      .cluster-section-header h4 { margin: 0; }

      /* "← Back to …" step-navigation button. Deliberately neutral
         rather than coloured: it's a wayfinding control, not the
         primary action of the tab. */
      .btn-back-step {
        flex: 0 0 auto;
        display: inline-flex;
        align-items: center;
        gap: 6px;
        background: #f1f5f9;
        color: #475569;
        border: 1px solid #cbd5e1;
        border-radius: 8px;
        padding: 8px 16px;
        font-size: 0.88em;
        font-weight: 600;
        font-family: inherit;
        cursor: pointer;
        white-space: nowrap;
        transition: background 0.15s, color 0.15s, border-color 0.15s;
      }
      .btn-back-step:hover {
        background: #e2e8f0;
        color: #1e293b;
        border-color: #94a3b8;
      }

      /* ── Forward step button ──────────────────────────────────
         Deliberately built from the SAME token set as .btn-back-step
         above — identical padding, font-size, font-weight, radius,
         border width, gap and transition. Only the colour differs.

         The two halves of every step-nav row used to disagree on
         almost everything: the Proceed buttons carried inline styles
         with 12px 24px padding, no font-size (so they inherited a
         larger one), no border, no font-family and no transition,
         while Back was 8px 16px at 0.88em with a 1px border. Two
         buttons of different heights and different type sizes sat
         side by side in the same row, which reads as clutter rather
         than as a pair.

         The colour difference is kept on purpose. The visual noise
         came from mismatched SIZE and SHAPE, not from hue; making
         both neutral grey would remove the noise but also erase the
         distinction between "go back and review" and "this is the
         main next step". Same geometry, different weight — a pair,
         not twins. */
      .btn-next-step {
        flex: 0 0 auto;
        display: inline-flex;
        align-items: center;
        gap: 6px;
        /* 3.61.0: the sky-blue of the AI cards (was #667eea) */
        background: linear-gradient(135deg, #0ea5e9 0%, #0284c7 100%);
        color: #ffffff;
        border: 1px solid #0284c7;   /* 1px, not none — matching height */
        border-radius: 8px;
        padding: 8px 16px;
        font-size: 0.88em;
        font-weight: 600;
        font-family: inherit;
        cursor: pointer;
        white-space: nowrap;
        transition: background 0.15s, border-color 0.15s, box-shadow 0.15s;
      }

      .btn-next-step:hover {
        background: linear-gradient(135deg, #0284c7 0%, #0369a1 100%);
        border-color: #0369a1;
        box-shadow: 0 2px 8px rgba(14, 165, 233, 0.35);
      }

      .btn-next-step:disabled,
      .btn-next-step[disabled] {
        background: #cbd5e1;
        border-color: #cbd5e1;
        color: #f8fafc;
        cursor: not-allowed;
        box-shadow: none;
      }

      /* Emphasis variant for the two buttons that are a bigger
         commitment than a plain step forward — skipping verification,
         and generating the modules. Same geometry again; only the
         accent changes, so they still belong to the family. */
      .btn-next-step.btn-next-strong {
        background: #f59e0b;
        border-color: #f59e0b;
      }
      .btn-next-step.btn-next-strong:hover {
        background: #d97706;
        border-color: #d97706;
        box-shadow: 0 2px 8px rgba(245, 158, 11, 0.35);
      }

      /* Step navigation footer: back on the left, proceed on the right.
         Matches the 30px top margin the plain right-aligned "Proceed"
         blocks use on the other tabs, so the rhythm stays consistent. */
      .step-nav-row {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        margin-top: 30px;
        flex-wrap: wrap;
      }

      @media (max-width: 600px) {
        .step-nav-row {
          flex-direction: column-reverse;   /* proceed stays on top */
          align-items: stretch;
        }
        .step-nav-row button {
          width: 100%;
          justify-content: center;
        }
      }

      /* ══════════════════════════════════════════════════════════
         TASK VERIFICATION RESULTS CHART
         ──────────────────────────────────────────────────────────
         One flat grouped-bar chart per duty, opened in a modal.
         Deliberately NOT rendered inline inside the duty accordion:
         the verification table is already wide and dense, and a chart
         squeezed into that column would be unreadable on a phone. The
         modal also gives the duty switcher and the view toggle room
         to live somewhere obvious.
         ══════════════════════════════════════════════════════════ */

      /* Trigger inside the accordion header, beside the ▼ caret */
      .duty-header-actions {
        display: flex;
        align-items: center;
        gap: 12px;
        flex-shrink: 0;
      }
      .tvc-open-btn {
        flex: 0 0 auto;
        box-sizing: border-box;
        width: 32px;
        height: 32px;
        min-width: 32px;
        max-width: 32px;
        min-height: 32px;   /* pinned on every axis — see the round
                               icon button notes further down */
        max-height: 32px;
        aspect-ratio: 1 / 1;
        padding: 0 !important;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        border: 1px solid rgba(255,255,255,0.55);
        background: rgba(255,255,255,0.9);
        font-size: 15px;
        line-height: 1;
        cursor: pointer;
        -webkit-appearance: none;
                appearance: none;
        transition: background 0.15s, transform 0.12s;
      }
      .tvc-open-btn:hover { background: #ffffff; }
      .tvc-open-btn { position: relative; }

      /* Global entry point above the accordion list */
      .tvc-global-bar {
        display: flex;
        align-items: center;
        gap: 14px;
        flex-wrap: wrap;
        margin: 0 0 14px;
      }
      .tvc-global-btn {
        background: linear-gradient(135deg, #0ea5e9, #0284c7);   /* 3.69.0: was purple */
        color: #fff;
        border: none;
        border-radius: 9px;
        padding: 10px 20px;
        font-size: 0.9em;
        font-weight: 700;
        cursor: pointer;
        box-shadow: 0 3px 10px rgba(14,165,233,0.32);
      }
      .tvc-global-hint { font-size: 0.82em; color: #64748b; }

      /* ── Modal shell ─────────────────────────────────────────── */
      #tvcModal {
        position: fixed;
        inset: 0;
        z-index: 999999;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 20px;
        background: rgba(0,0,0,0.55);
        -webkit-backdrop-filter: blur(3px);
                backdrop-filter: blur(3px);
        animation: tvcFadeIn 0.2s ease;
      }
      @keyframes tvcFadeIn { from { opacity: 0; } to { opacity: 1; } }

      .tvc-dialog {
        background: #fff;
        border-radius: 16px;
        width: min(980px, 100%);
        max-height: 88vh;
        overflow-y: auto;
        padding: 0 22px 20px;
        box-shadow: 0 24px 60px rgba(0,0,0,0.35);
        font-family: inherit;   /* 3.122.2: interface font (Cairo in Arabic) */
      }

      .tvc-head {
        position: sticky;
        top: 0;
        z-index: 2;
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 14px;
        margin: 0 -22px 14px;
        padding: 18px 22px 14px;
        background: linear-gradient(135deg, #eef2ff, #e0e7ff);
        border-bottom: 1px solid #c7d2fe;
      }
      .tvc-title { margin: 0; font-size: 1em; font-weight: 800; color: #3730a3; }
      .tvc-duty  { margin: 3px 0 0; font-size: 0.86em; color: #4338ca; font-weight: 600; }
      /* These three buttons held bare text glyphs (✕ ◀ ▶) with padding:0
         and no flex centring. A <button> centres its label horizontally
         but drops it on the text baseline vertically, so the mark sat
         low; and each glyph carries its own uneven side bearings, so it
         also drifted sideways — the offsets seen in the reported screens.
         Fixed on both fronts: the icons are now inline SVG centred by
         their viewBox, and the buttons are flex containers that centre on
         both axes regardless of what they contain. */
      .tvc-close {
        flex: 0 0 auto;
        width: 30px; height: 30px;
        min-width: 30px; max-width: 30px;
        min-height: 30px; max-height: 30px;
        padding: 0 !important;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        border: 1px solid #c7d2fe;
        background: #fff;
        color: #4338ca;
        line-height: 0;
        cursor: pointer;
        -webkit-appearance: none;
                appearance: none;
        transition: background 0.15s, color 0.15s;
      }
      .tvc-close:hover { background: #4338ca; color: #fff; }
      .tvc-close svg { width: 15px; height: 15px; display: block; }

      /* ── Controls row ────────────────────────────────────────── */
      .tvc-controls {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 16px;
        flex-wrap: wrap;
        margin-bottom: 10px;
      }
      .tvc-duty-nav { display: flex; align-items: center; gap: 8px; }
      .tvc-duty-nav button {
        width: 32px; height: 32px;
        min-width: 32px; max-width: 32px;
        min-height: 32px; max-height: 32px;
        padding: 0 !important;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: 8px;
        border: 1px solid #cbd5e1;
        background: #f8fafc;
        color: #334155;
        line-height: 0;
        cursor: pointer;
        -webkit-appearance: none;
                appearance: none;
        transition: background 0.15s, border-color 0.15s;
      }
      .tvc-duty-nav button:hover:not(:disabled) { background: #eef2ff; border-color: #a5b4fc; color: #4338ca; }
      .tvc-duty-nav button svg { width: 15px; height: 15px; display: block; }
      .tvc-duty-nav button:disabled { opacity: 0.35; cursor: not-allowed; }
      #tvcDutyPos { font-size: 0.82em; color: #64748b; font-weight: 700; min-width: 46px; text-align: center; }

      .tvc-view-toggle { display: flex; gap: 10px; flex-wrap: wrap; }
      .tvc-view-toggle label {
        display: flex;
        align-items: center;
        gap: 7px;
        padding: 8px 13px;
        border: 1.5px solid #e2e8f0;
        border-radius: 9px;
        font-size: 0.85em;
        font-weight: 600;
        color: #334155;
        cursor: pointer;
      }
      .tvc-view-toggle label:has(input:checked) {
        border-color: #667eea;
        background: #eef2ff;
        color: #3730a3;
      }
      .tvc-view-toggle small { font-weight: 400; color: #64748b; }

      .tvc-source {
        margin: 0 0 6px;
        font-size: 0.83em;
        color: #475569;
        font-weight: 600;
      }
      /* The toggle hides a dimension from the DRAWING only. This line
         exists so nobody concludes it also changes the arithmetic. */
      .tvc-note {
        margin: 0 0 14px;
        padding: 9px 12px;
        background: #fffbeb;
        border: 1px solid #fde68a;
        border-radius: 8px;
        font-size: 0.79em;
        color: #92400e;
        line-height: 1.55;
      }

      .tvc-legend { display: flex; gap: 18px; flex-wrap: wrap; margin-bottom: 10px; }
      .tvc-legend-item {
        display: inline-flex;
        align-items: center;
        gap: 7px;
        font-size: 0.82em;
        font-weight: 600;
        color: #334155;
      }
      .tvc-legend-item i { width: 14px; height: 14px; border-radius: 3px; flex-shrink: 0; }
      .tvc-legend-dash {
        height: 0 !important;
        border-top: 2px dashed #dc2626;
        border-radius: 0 !important;
        width: 18px !important;
      }

      /* Wide duties scroll sideways rather than shrinking the bars
         into illegibility. */
      .tvc-plot-scroll {
        overflow-x: auto;
        overflow-y: hidden;
        border: 1px solid #e2e8f0;
        border-radius: 10px;
        padding: 6px;
        background: #fff;
      }
      .tvc-svg { display: block; }
      .tvc-empty {
        margin: 0;
        padding: 34px 16px;
        text-align: center;
        font-size: 0.88em;
        color: #64748b;
      }

      .tvc-list-title {
        margin: 18px 0 8px;
        font-size: 0.85em;
        font-weight: 800;
        color: #1e293b;
      }
      .tvc-task-list { list-style: none; margin: 0; padding: 0; }
      .tvc-task-list li {
        display: flex;
        align-items: flex-start;
        gap: 10px;
        padding: 7px 0;
        border-bottom: 1px solid #f1f5f9;
        font-size: 0.84em;
        line-height: 1.55;
        color: #334155;
      }
      .tvc-task-code { flex-shrink: 0; font-weight: 800; color: #4338ca; min-width: 34px; }
      .tvc-task-flag {
        flex-shrink: 0;
        font-size: 0.88em;
        color: #b45309;
        background: #fffbeb;
        border: 1px solid #fde68a;
        border-radius: 5px;
        padding: 1px 7px;
      }

      .tvc-foot {
        display: flex;
        justify-content: flex-end;
        gap: 10px;
        margin-top: 18px;
        flex-wrap: wrap;
      }
      .tvc-btn-primary {
        background: #667eea;
        color: #fff;
        border: none;
        border-radius: 8px;
        padding: 9px 20px;
        font-size: 0.88em;
        font-weight: 700;
        cursor: pointer;
      }
      .tvc-btn-ghost {
        background: #f8fafc;
        color: #475569;
        border: 1.5px solid #cbd5e1;
        border-radius: 8px;
        padding: 9px 20px;
        font-size: 0.88em;
        font-weight: 700;
        cursor: pointer;
      }

      @media (max-width: 700px) {
        #tvcModal { padding: 10px; }
        .tvc-dialog { max-height: 94vh; padding: 0 14px 16px; }
        .tvc-head { margin: 0 -14px 12px; padding: 14px; }
        .tvc-controls { align-items: stretch; flex-direction: column; }
        .tvc-view-toggle { flex-direction: column; }
        .tvc-foot button { flex: 1 1 auto; }
      }

      @media print {
        #tvcModal { position: static; background: none; padding: 0; }
        .tvc-dialog { box-shadow: none; max-height: none; width: 100%; }
        .tvc-controls, .tvc-foot, .tvc-close { display: none !important; }
      }

      /* ══════════════════════════════════════════════════════════
         TOOLBAR HORIZONTAL SCROLL
         ──────────────────────────────────────────────────────────
         The middle button group scrolls sideways when the toolbar
         runs out of width. Without it, everything past the right
         edge — Clear All included — is simply unreachable in the
         PWA, because the toolbar is position:fixed and the page
         scroll does not move it.

         dacum-styles.css sets overflow-x:auto here and hides the
         scrollbar; dacum-fixes.css was overriding it back to
         visible (now corrected at source). These rules restore the
         behaviour explicitly and, more importantly, make it
         DISCOVERABLE: a hidden scrollbar on a desktop is fine
         because the row is rarely overflowing, but on a phone it
         always overflows and there is no hover to reveal anything.
         A permanently visible slim bar is the honest signal.
         ══════════════════════════════════════════════════════════ */
      #dacumTopToolbar .dtb-center {
        overflow-x: auto !important;
        overflow-y: hidden !important;
        flex-wrap: nowrap !important;
        -webkit-overflow-scrolling: touch;
        /* Stops a sideways swipe from triggering the browser's
           back-navigation gesture once the row hits its end. */
        overscroll-behavior-x: contain;
        scroll-padding-inline: 8px;
        /* 3.99.4: breathing room at both ends of the scrolling row, so
           the first and last pills never sit flush against the clip
           edge (or the language button) in either direction. */
        padding-inline: 6px !important;
        box-sizing: border-box;
      }

      @media (hover: none) and (pointer: coarse) {
        #dacumTopToolbar .dtb-center {
          scrollbar-width: thin;
          padding-bottom: 3px;
        }
        #dacumTopToolbar .dtb-center::-webkit-scrollbar {
          display: block;
          height: 3px;
        }
        #dacumTopToolbar .dtb-center::-webkit-scrollbar-track {
          background: transparent;
        }
        #dacumTopToolbar .dtb-center::-webkit-scrollbar-thumb {
          background: #cbd5e1;
          border-radius: 99px;
        }
      }

      /* The dividers are the one thing that must not shrink — a
         collapsed divider makes the groups read as one long row. */
      #dacumTopToolbar .dtb-divider { flex: 0 0 auto; }

      /* ══════════════════════════════════════════════════════════
         TOUCH-DEVICE SHAPE CONTRACT
         ──────────────────────────────────────────────────────────
         dacum-responsive.css applies `min-height: 44px` to every
         <button> on coarse-pointer devices. That is correct for
         text buttons and wrong for anything with a fixed shape: a
         32px circle becomes 32x44, a vertical oval. Because that
         rule is element-level (0,0,1), ANY class rule declaring its
         own min-height wins — so each fixed-shape control below
         states its height explicitly, and the 44px tap area is
         restored with a transparent ::after where it matters.

         Declaring `height` alone is NOT enough: with no min-height
         of its own, the inherited 44px still applies. This is the
         single most repeated cause of the oval-button bug in this
         file, so every axis is pinned every time.
         ══════════════════════════════════════════════════════════ */

      /* Toolbar pills: label hidden below 1200px, so they collapse to
         icon-only and would otherwise be 38 wide by 44 tall. */
      #dacumTopToolbar .dtb-btn {
        min-height: 36px;
        height: 36px;
        box-sizing: border-box;
        flex: 0 0 auto;
      }
      #dacumTopToolbar .dtb-btn .dtb-icon { flex-shrink: 0; }

      @media (max-width: 600px) {
        #dacumTopToolbar .dtb-btn { min-height: 34px; height: 34px; }
      }

      /* Chart trigger in the duty header and the modal's own controls.
         These declare width/height above; the min-heights here are what
         actually protect them from the inherited 44px. */
      .tvc-open-btn,
      .tvc-close,
      .tvc-duty-nav button,
      .tvc-open-btn:hover,
      .tvc-close:hover { box-sizing: border-box; }

      @media (hover: none) and (pointer: coarse) {
        /* Transparent 44px tap zones — accessibility preserved without
           inflating the visible circle. */
        .tvc-open-btn::after,
        .tvc-close::after,
        .tvc-duty-nav button::after {
          content: "";
          position: absolute;
          top: 50%;
          left: 50%;
          width: 44px;
          height: 44px;
          transform: translate(-50%, -50%);
        }
        .tvc-duty-nav button { position: relative; }
      }

      /* Rating radio sizing merged into dacum-styles.css (Phase 4). */

/* .rating-scale scroll behaviour and .rating-option sizing merged into
         dacum-styles.css (Phase 4). */

      /* Sidebar hamburger contrast.
         dacum-mobile.js injects `color:#e2e8f0` with !important — a
         near-white icon that was designed for a dark toolbar. This
         toolbar is white, so the three bars were nearly invisible.
         The injected <style> is appended to <head> at runtime, i.e.
         AFTER this block, so overriding it needs both !important and
         higher specificity than its plain `#btnSidebarToggle`. */
      #dacumTopToolbar #btnSidebarToggle {
        color: #334155 !important;
        background: #ffffff !important;
        border: 1.5px solid #e2e2e4 !important;
        box-shadow: 0 1px 3px rgba(0,0,0,0.06) !important;
      }
      #dacumTopToolbar #btnSidebarToggle:hover {
        background: #f0f0f2 !important;
        color: #1a1a1a !important;
      }
      #dacumTopToolbar #btnSidebarToggle svg rect { fill: currentColor !important; }

      /* ══════════════════════════════════════════════════════════
         ROUND ICON BUTTONS — keep them round
         ──────────────────────────────────────────────────────────
         base.css styles EVERY <button> with `padding: 12px 24px`, and
         dacum-responsive.css re-pads toolbar buttons to `7px 10px` on
         phones. Both are asymmetric, and with the global
         `box-sizing: border-box` a 22x22 button whose padding exceeds
         its box gets pushed outward — more vertically than
         horizontally, because the flex row it sits in also lets it
         shrink sideways. The result is the vertical ellipse seen on
         mobile instead of a circle.

         Fixing it needs three things together: zero the padding, pin
         min-* to the same value as width/height so nothing can grow
         it, and forbid flex shrinking so nothing can squeeze it. */
      /* .dcv-close-btn pinning merged into dacum-styles.css (Phase 4).
         .dcv-add-btn keeps its own rule here since dacum-styles.css does
         not define it. */
      .dcv-add-btn {
        padding: 0 !important;
        flex: 0 0 auto !important;
        box-sizing: border-box !important;
        aspect-ratio: 1 / 1;
      }

      .card-view-mode .dcv-close-btn,
      .table-view-mode .dcv-close-btn {
        width: 22px !important;
        height: 22px !important;
        min-width: 22px !important;
        min-height: 22px !important;
        max-width: 22px;
        max-height: 22px;
        border-radius: 50% !important;
        line-height: 1 !important;
        font-size: 12px !important;
      }

      /* Toolbar icon buttons: same inherited-padding problem, same fix.
         Only the icon-only variants are constrained — buttons that
         still show a text label must stay free to size to their text. */
      #dacumTopToolbar .dtb-lens,
      #dacumTopToolbar .dtb-hamburger {
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        padding: 0 !important;
        flex: 0 0 auto !important;
        box-sizing: border-box !important;
        aspect-ratio: 1 / 1;
        width: 36px;
        height: 36px;
        min-width: 36px;
        min-height: 36px;
        line-height: 1 !important;
      }

      @media (max-width: 600px) {
        #dacumTopToolbar .dtb-lens,
        #dacumTopToolbar .dtb-hamburger {
          width: 34px;
          height: 34px;
          min-width: 34px;
          min-height: 34px;
        }
      }

      /* ── Undo / Redo ──────────────────────────────────────────
         These were previously swept into the icon-only rule above,
         which pinned them to a 36x36 square with `padding: 0`. But
         unlike the lens and the hamburger they are PILLS: each holds
         an icon AND a text label. Squeezed into a 36px box with no
         padding, the label spilled past the border and ran into the
         neighbouring control — the overlap that became obvious once
         the version badge grew a third digit and tightened the row.

         They are pills, so they are sized like pills: horizontal
         padding, a real gap between icon and label, a fixed height to
         match the icon buttons, and no aspect-ratio or width cap of
         any kind. Only the height is pinned; the width follows the
         text, which is the whole point. */
      #dacumTopToolbar .dtb-undo,
      #dacumTopToolbar .dtb-redo {
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        gap: 6px;
        flex: 0 0 auto !important;
        box-sizing: border-box !important;
        height: 36px;
        min-height: 36px;
        width: auto !important;
        min-width: 0 !important;
        max-width: none !important;
        aspect-ratio: auto !important;
        padding: 0 14px !important;
        line-height: 1 !important;
        white-space: nowrap;
      }
      #dacumTopToolbar .dtb-undo svg,
      #dacumTopToolbar .dtb-redo svg { flex-shrink: 0; display: block; }

      /* Breathing room between toolbar controls. The base 4px was too
         tight once three pills sat side by side. */
      #dacumTopToolbar .dtb-center,
      #dacumTopToolbar .dtb-right {
        gap: 8px !important;
        row-gap: 8px !important;
      }

      @media (max-width: 1200px) {
        /* Labels are hidden at this width (dacum-responsive.css sets
           font-size:0), so the pills collapse to icon-only and must
           lose the horizontal padding that was sized for text. */
        #dacumTopToolbar .dtb-undo,
        #dacumTopToolbar .dtb-redo {
          padding: 0 10px !important;
          gap: 0 !important;
        }
      }

      @media (max-width: 600px) {
        #dacumTopToolbar .dtb-undo,
        #dacumTopToolbar .dtb-redo {
          height: 34px;
          min-height: 34px;
        }
        #dacumTopToolbar .dtb-center,
        #dacumTopToolbar .dtb-right { gap: 6px !important; }
      }

      /* Post-refine flash on changed duties/tasks (2.5s) */
      .refined-highlight {
        background-color: rgba(16, 185, 129, 0.15) !important;
        border-color: #10b981 !important;
        box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.25) !important;
      }

      /* ══════════════════════════════════════════════════════════
         SHARED CARD HEADER  (Card View)
         Adapted from DACUM Lite's .cv-duty-card-top /
         .cv-task-card-top: drag handle + label on the left, action
         buttons on the right, all INSIDE the card. Replaces the old
         approach of absolutely positioning the handle over the label
         and hanging the ✕ off the card corner — that needed
         padding-left / padding-top spacing hacks and still got
         clipped inside overflow:hidden ancestors.
         ══════════════════════════════════════════════════════════ */
      .dcv-card-top {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
        margin-bottom: 6px;
        flex-shrink: 0;
        /* Never let the header push past the card's own width — if it
           does, the label and buttons spill over the textarea below
           and hide the task text. */
        max-width: 100%;
        /* No `overflow: hidden` here — deliberately removed.
           It clipped the round delete button: in card view that button is
           position:static inside this row, and its `transform: scale(1.15)`
           on hover grew it past this container's edge, where the card's
           14px border-radius sliced a curve out of the circle. It read as
           the button sitting behind the card border rather than on top.

           z-index on the button does NOT fix this: z-index orders paint
           layers, overflow clips geometry — two different mechanisms.

           Removing it is safe because the truncation it was meant to give
           is already done one level down by .dcv-card-top-left, which
           carries overflow:hidden + text-overflow:ellipsis + min-width:0.
           The declaration here was duplicated and did no work beyond
           cutting the button. */
      }
      .dcv-card-top-left {
        display: flex;
        align-items: center;
        gap: 6px;
        min-width: 0;
        overflow: hidden;
      }
      .dcv-card-top-right {
        display: flex;
        align-items: center;
        gap: 6px;
        flex-shrink: 0;
      }

      /* Labels sit inline in the header now, so the padding-right
         dacum-styles.css reserves for the old floating ✕ is dead
         space — and the bottom margin is owned by .dcv-card-top. */
      .dcv-card-top .dcv-duty-label,
      .dcv-card-top .dcv-task-label {
        margin: 0;
        padding-right: 0;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }

      /* ── Drag handles — inline dot-grid, both views ─────────── */
      .dcv-duty-drag-handle,
      .dcv-task-drag-handle {
        display: inline-flex;
        position: static;
        align-items: center;
        justify-content: center;
        width: 14px;
        flex-shrink: 0;
        padding: 0;
        background: none;
        cursor: grab;
        user-select: none;
        transition: color 0.15s;
      }
      .dcv-duty-drag-handle:active,
      .dcv-task-drag-handle:active { cursor: grabbing; }

      /* Card View tones (blue duty card / yellow task card) */
      .card-view-mode .dcv-duty-drag-handle       { color: rgba(30,64,175,0.40); }
      .card-view-mode .dcv-duty-drag-handle:hover { color: rgba(30,64,175,0.75); }
      .card-view-mode .dcv-task-drag-handle       { color: rgba(133,77,14,0.40); }
      .card-view-mode .dcv-task-drag-handle:hover { color: rgba(133,77,14,0.75); }

      /* ── ✕ close button — inline, not floating ─────────────────
         Neutralises dacum-styles.css's
         `.dcv-close-btn { position:absolute; top:-8px; right:-8px }`
         for both views. Stays a small red circle (Lite keeps the
         circular delete too) — it just lives in the header row. */
      .card-view-mode .dcv-close-btn {
        position: static !important;
        top: auto !important;
        right: auto !important;
        /* z-index only has effect on positioned elements, but clear it
           anyway so a stale/partially-cached stylesheet can't leave the
           button floating above the sticky duty card. */
        z-index: auto !important;
        flex-shrink: 0;
      }
      .card-view-mode .dcv-close-btn {
        width: 20px;
        height: 20px;
        min-width: 20px;
        border: none;
        font-size: 12px;
        box-shadow: 0 1px 4px rgba(0,0,0,0.18);
      }

      /* ── ＋ add button — hidden unless a view shows it (Card View
         does, in each card header; see the Card View toolbar block) ── */
      .dcv-add-btn { display: none; }

      /* ══════════════════════════════════════════════════════════
         CARD VIEW LAYOUT — DACUM Lite structure, Pro colours
         ──────────────────────────────────────────────────────────
         Three changes adapted from Lite's .cv-duty-row model:
           1. The ROW is the single horizontal scroller (was: the
              task strip scrolled on its own inside a static row).
           2. The duty card is `position:sticky; left:0`, so it stays
              pinned in view while the tasks scroll past it — you
              never lose track of which duty you're reading. This
              only works because the duty card is a direct child of
              the scrolling element, which the existing DOM already
              satisfies.
           3. The row reads as one continuous surface: soft grey bed,
              rounded outer corners, duty card squared off on its
              right edge so it merges into the strip.
         Colours deliberately unchanged — same blue/yellow gradients
         from dacum-styles.css. Structure only.
         The .dcv-tasks-scroll element is kept (with overflow now
         visible) rather than removed, because drag_drop.js wires its
         task-level Sortable to that exact selector.
         ══════════════════════════════════════════════════════════ */

      #dutiesContainer.card-view-mode {
        display: flex;
        flex-direction: column;
        gap: 14px;
      }

      .card-view-mode .dcv-row {
        display: flex;
        align-items: stretch;
        gap: 0;
        padding: 0;
        border-bottom: none;
        overflow-x: auto;
        overflow-y: hidden;
        background: #f8fafc;
        border-radius: 14px;
        box-shadow: 0 6px 18px rgba(0,0,0,0.08);
        -webkit-overflow-scrolling: touch;
        scroll-behavior: smooth;
        scrollbar-width: thin;
        scrollbar-color: #93c5fd #e0f2fe;
      }
      .card-view-mode .dcv-row::-webkit-scrollbar       { height: 6px; }
      .card-view-mode .dcv-row::-webkit-scrollbar-track { background: #e0f2fe; border-radius: 4px; }
      .card-view-mode .dcv-row::-webkit-scrollbar-thumb { background: #60a5fa; border-radius: 4px; }

      /* Duty card pinned to the left edge while tasks scroll.
         z-index must beat dacum-styles.css's `.dcv-close-btn
         { z-index: 20 }` — otherwise a task card's ✕ paints THROUGH
         the sticky duty card as the strip scrolls underneath it
         (the card body itself is fine at any z-index, but a
         positioned descendant with a higher one is not). 30 clears
         it with room to spare. */
      .card-view-mode .dcv-duty-card {
        position: sticky;
        left: 0;
        z-index: 30;
        padding: 10px 12px 12px;
        border-radius: 14px 0 0 14px;
        border-right-width: 2px;
      }

      /* The strip: parent row owns the scrolling now */
      .card-view-mode .dcv-tasks-area {
        display: flex;
        flex: 1;
        min-width: 0;
        overflow: visible;
        margin-left: 0;
      }
      .card-view-mode .dcv-tasks-scroll {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        align-items: stretch;
        gap: 10px;
        padding: 10px 12px;
        flex: 1;
        min-width: 0;
        overflow: visible;
      }

      /* "＋ Task" — inline green pill at the end of the strip
         (Lite's .cv-add-task), vertically centred beside the cards */
      .card-view-mode .dcv-add-task-btn {
        align-self: center;
        flex-shrink: 0;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 4px;
        background: #f1f5f9;
        color: #475569;
        border: 1px solid #cbd5e1;
        border-radius: 10px;
        padding: 8px 14px;
        font-size: 0.85em;
        font-weight: 600;
        white-space: nowrap;
        cursor: pointer;
        box-shadow: none;
        transition: background 0.2s, transform 0.15s, box-shadow 0.2s;
      }
      .card-view-mode .dcv-add-task-btn:hover {
        background: #e2e8f0;
        color: #1e293b;
        border-color: #94a3b8;
        box-shadow: none;
      }

      /* ── Mobile (≤768px) ──────────────────────────────────────
         dacum-responsive.css stacks .dcv-row vertically with
         !important at this breakpoint (duty card on top, tasks
         below). A vertical row can't be a horizontal scroller and
         sticky-left is meaningless there, so hand scrolling back to
         the task strip — i.e. the original pre-Lite behaviour, which
         is the right shape for a stacked phone layout. */
      @media (max-width: 768px) {
        .card-view-mode .dcv-row {
          overflow-x: hidden;
          background: transparent;
          box-shadow: none;
          border-radius: 0;
        }
        .card-view-mode .dcv-duty-card {
          position: static;
          border-radius: 14px;
        }
        .card-view-mode .dcv-tasks-scroll {
          overflow-x: auto;
          padding: 10px 2px;
          scrollbar-width: thin;
          scrollbar-color: #93c5fd #e0f2fe;
        }
      }

      /* Duty-level drag visual feedback (blue tone, matches task drag) */
      .duty-drag-ghost    { opacity: 0.35; outline: 2px dashed #667eea; background: #eef2ff !important; border-radius: 12px; }
      .duty-drag-chosen   { transform: scale(1.015); box-shadow: 0 10px 30px rgba(102,126,234,0.28); z-index: 6; }
      .duty-drag-dragging { opacity: 0.9; cursor: grabbing !important; }

      /* Post-drop flash on the moved duty card (1.5s) */
      .duty-moved-highlight {
        box-shadow: 0 0 0 2px #667eea, 0 6px 18px rgba(102,126,234,0.30) !important;
        outline: none !important;
      }

      /* ══════════════════════════════════════════════════════════
         Segmented view switch (Card / Table)
         ══════════════════════════════════════════════════════════ */
      .view-segmented {
        display: inline-flex;
        background: #f1f5f9;
        border: 1px solid #cbd5e1;
        border-radius: 9px;
        padding: 3px;
        gap: 2px;
      }
      .view-seg-btn {
        background: transparent;
        border: none;
        padding: 7px 14px;
        font-size: 0.88em;
        font-weight: 600;
        color: #475569;
        border-radius: 6px;
        cursor: pointer;
        transition: background 0.15s, color 0.15s, box-shadow 0.15s;
        white-space: nowrap;
      }
      .view-seg-btn:hover { background: rgba(102,126,234,0.08); color: #4338ca; }
      .view-seg-btn.is-active {
        background: #ffffff;
        color: #4338ca;
        box-shadow: 0 1px 3px rgba(15,23,42,0.14), 0 0 0 1px rgba(102,126,234,0.25);
      }

      /* ══════════════════════════════════════════════════════════
         TOOLBAR (.wall-toolbar — name kept from the former Wall View;
         used by the Card View bar, #cardViewToolbar)
         ══════════════════════════════════════════════════════════ */
      /* Toolbar — sticks to the top of the duties tab viewport */
      .wall-toolbar {
        position: sticky;
        top: 60px;               /* below the 60px top app toolbar */
        z-index: 10;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
        padding: 8px 12px;
        margin-bottom: 14px;
        background: #ffffff;
        border: 1px solid #e2e8f0;
        border-radius: 10px;
        box-shadow: 0 2px 8px rgba(15,23,42,0.06);
        flex-wrap: wrap;
      }
      .wall-toolbar .wv-left,
      .wall-toolbar .wv-center,
      .wall-toolbar .wv-right {
        display: flex; align-items: center; gap: 6px;
      }
      .wall-toolbar .wv-btn {
        background: #f8fafc;
        color: #334155;
        border: 1px solid #cbd5e1;
        border-radius: 7px;
        padding: 6px 12px;
        font-size: 0.85em;
        font-weight: 600;
        cursor: pointer;
        transition: background 0.14s, border-color 0.14s, color 0.14s;
        white-space: nowrap;
      }
      .wall-toolbar .wv-btn:hover { background:#eef2ff; border-color:#a5b4fc; color:#4338ca; }
      .wall-toolbar .wv-btn-exit  {
        background: #fef2f2; color: #991b1b; border-color: #fecaca;
      }
      .wall-toolbar .wv-btn-exit:hover { background:#fee2e2; border-color:#fca5a5; color:#7f1d1d; }
      .wall-toolbar .wv-zoom-pct {
        display: inline-block; min-width: 44px; text-align: center;
        font-size: 0.85em; font-weight: 700; color: #475569;
        font-variant-numeric: tabular-nums;
      }

      /* ══════════════════════════════════════════════════════════
         CARD VIEW TOOLBAR (3.62.0) — exit, zoom, reset, print,
         fullscreen. .wall-toolbar skin; sits above #dutiesContainer
         (see duties.js).
         ══════════════════════════════════════════════════════════ */
      /* z-index 40: above the sticky duty card (30), so the 🎨 panel
         that hangs from the bar is never painted under a card. */
      .wall-toolbar.cv-toolbar { justify-content: space-between; z-index: 40; margin-top: 18px; }
      /* 3.67.0: the Card / Table switch sits at the start of the bar. */
      .wall-toolbar.cv-toolbar .wv-left { gap: 10px; flex-wrap: wrap; }
      .wall-toolbar.cv-toolbar .view-segmented { padding: 2px; }
      .wall-toolbar.cv-toolbar .view-seg-btn { padding: 5px 12px; }
      body.card-view-fullscreen .cv-toolbar .view-segmented { display: none; }
      .wall-toolbar .wv-btn:disabled { opacity: .45; cursor: not-allowed; }
      .wall-toolbar .wv-btn:disabled:hover { background:#f8fafc; border-color:#cbd5e1; color:#334155; }
      .wall-toolbar .wv-btn.is-on { background:#e0f2fe; border-color:#7dd3fc; color:#0369a1; }

      /* Zoom: CSS zoom on each row keeps drag & drop and the sticky
         duty card working; the number comes from --cv-zoom. */
      #dutiesContainer.card-view-mode > .duty-row { zoom: var(--cv-zoom, 1); }

      /* ＋ / ✕ on every card (3.63.0) — small square icon buttons: ＋ on a duty card adds a duty, on a task card adds a
         task to that duty; ✕ removes. Light lavender / light rose. */
      .card-view-mode .dcv-card-top-right { gap: 5px; }
      .card-view-mode .dcv-add-btn,
      .card-view-mode .dcv-close-btn {
        display: flex !important;
        position: static !important;
        align-items: center;
        justify-content: center;
        width: 24px !important;
        height: 24px !important;
        min-width: 24px !important;
        min-height: 24px !important;
        max-width: 24px !important;
        border: none !important;
        border-radius: 7px !important;
        padding: 0 !important;
        font-size: 13px !important;
        font-weight: 800;
        line-height: 1;
        box-shadow: none !important;
        cursor: pointer;
        transition: filter 0.15s, transform 0.1s;
      }
      .card-view-mode .dcv-add-btn   { background: #e7e5f7 !important; color: #4338ca !important; }
      .card-view-mode .dcv-close-btn { background: #fee2e2 !important; color: #dc2626 !important; }
      .card-view-mode .dcv-add-btn:hover,
      .card-view-mode .dcv-close-btn:hover  { filter: brightness(0.96); transform: translateY(-1px); }
      .card-view-mode .dcv-add-btn:active,
      .card-view-mode .dcv-close-btn:active { transform: scale(0.94); }
      .card-view-mode .dcv-add-btn:focus-visible,
      .card-view-mode .dcv-close-btn:focus-visible { outline: 2px solid #4338ca; outline-offset: 1px; }

      @media (max-width: 480px) {
        .wall-toolbar.cv-toolbar { justify-content: center; padding: 6px 8px; }
        .wall-toolbar.cv-toolbar .wv-btn { padding: 6px 9px; }
        /* 3.65.0: room for "المهمة أ1" / "Tâche A1" beside ＋ and ✕ on a
           phone (the 140px card clipped the label); two cards still
           fit per line on a 360px screen in the presentation view. */
        #dutiesContainer.card-view-mode .dcv-task-card { width: 150px !important; min-width: 150px !important; }
        .card-view-mode .dcv-card-top,
        .card-view-mode .dcv-card-top-left,
        .card-view-mode .dcv-card-top-right { gap: 3px !important; }
        .card-view-mode .dcv-add-btn,
        .card-view-mode .dcv-close-btn {
          width: 20px !important; height: 20px !important;
          min-width: 20px !important; min-height: 20px !important; max-width: 20px !important;
          font-size: 11px !important; border-radius: 6px !important;
        }
        .card-view-mode .dcv-card-top .dcv-task-label,
        .card-view-mode .dcv-card-top .dcv-duty-label { letter-spacing: 0 !important; font-size: 10.5px !important; }
      }

      /* Table View task delete (3.68.0) — same look as Module
         Curriculum's .cur-li-del: soft rose square, red ✕. */
      .task-item .task-del-x {
        box-sizing: border-box; flex: 0 0 auto;
        width: 36px; height: 36px; min-width: 36px; max-width: 36px; min-height: 36px;
        padding: 0 !important; margin: 0;
        display: inline-flex; align-items: center; justify-content: center;
        border-radius: 8px; border: 1px solid #fecaca !important;
        background: #fff5f5 !important; color: #b91c1c !important;
        box-shadow: none !important; filter: none !important; cursor: pointer;
        transition: background 0.15s, border-color 0.15s;
      }
      .task-item .task-del-x:hover { background: #fee2e2 !important; border-color: #fca5a5 !important; }
      .task-item .task-del-x:focus-visible { outline: 2px solid #b91c1c; outline-offset: 2px; }
      .task-item .task-del-x svg { display: block; pointer-events: none; }

      /* ══════════════════════════════════════════════════════════
         TASK VERIFICATION in the AI-card blue (3.69.0). Scoped to the
         tab so the same classes elsewhere keep their colours. Every
         gradient stays a gradient: #0ea5e9 → #0284c7 (hover → #0369a1).
         ══════════════════════════════════════════════════════════ */
      #verification-tab .duty-accordion-header:hover,
      #verification-tab .duty-accordion-header.active,
      #verification-tab .verification-table th,
      #verification-tab .results-dashboard-header,
      #verification-tab .dashboard-table th {
        background: linear-gradient(135deg, #0ea5e9 0%, #0284c7 100%) !important;
      }
      #verification-tab .results-dashboard-header:hover {
        background: linear-gradient(135deg, #0284c7 0%, #0369a1 100%) !important;
      }
      #verification-tab .duty-accordion-header.active { border-bottom-color: #0369a1 !important; }
      #verification-tab .duty-accordion:hover { border-color: #0ea5e9; box-shadow: 0 4px 12px rgba(14,165,233,0.12); }
      #verification-tab .results-dashboard { border-color: #0ea5e9; }
      #verification-tab .summary-card { border-left-color: #0ea5e9; }
      #verification-tab .rank-badge { background: #0284c7; }
      #verification-tab .priority-formula-selector h4,
      #verification-tab .scale-legend-label,
      #verification-tab .score-display,
      #verification-tab .priority-index,
      #verification-tab .count-input-item label,
      #verification-tab .summary-card h4 { color: #0284c7; }
      #verification-tab .formula-option:hover,
      #verification-tab .dpd-selector:hover { border-color: #0ea5e9; }
      #verification-tab .task-comments:focus,
      #verification-tab .count-input-item input:focus,
      #verification-tab .dpd-selector:focus { border-color: #0ea5e9; box-shadow: 0 0 0 3px rgba(14,165,233,0.15); }
      #verification-tab .sv-btn { border-color: #0ea5e9; color: #0369a1; }
      #verification-tab .sv-btn.sv-primary { background: #0284c7; border-color: #0284c7; color: #fff; }
      #verification-tab .sv-sep { border-inline-start-color: #0ea5e9; }
      #verification-tab .sv-res-cat h5 { color: #0369a1; }
      #verification-tab .sv-head h3 { color: #0369a1; }
      #verification-tab .sv-badge { background: #e0f2fe; color: #0369a1; border-color: #7dd3fc; }

      /* ══════════════════════════════════════════════════════════
         CARD COLOURS (3.66.0) — see card_colors.js. Screen + print
         only. A pick sets data-cc-duty / data-cc-task and the
         --cc-* tokens on <html>; with no pick nothing here applies.
         ══════════════════════════════════════════════════════════ */
      html[data-cc-duty] .card-view-mode .dcv-duty-card {
        background: linear-gradient(145deg, var(--cc-duty-bg1), var(--cc-duty-bg2)) !important;
        border-color: var(--cc-duty-border) !important;
      }
      html[data-cc-duty] .card-view-mode .dcv-duty-label       { color: var(--cc-duty-label) !important; }
      html[data-cc-duty] .card-view-mode .dcv-duty-input       { color: var(--cc-duty-text) !important; }
      html[data-cc-duty] .card-view-mode .dcv-duty-input::placeholder { color: var(--cc-duty-soft) !important; }
      html[data-cc-duty] .card-view-mode .dcv-duty-drag-handle { color: var(--cc-duty-soft) !important; }
      html[data-cc-task] .card-view-mode .dcv-task-card {
        background: linear-gradient(145deg, var(--cc-task-bg1), var(--cc-task-bg2)) !important;
        border-color: var(--cc-task-border) !important;
      }
      html[data-cc-task] .card-view-mode .dcv-task-label       { color: var(--cc-task-label) !important; }
      html[data-cc-task] .card-view-mode .dcv-task-input       { color: var(--cc-task-text) !important; }
      html[data-cc-task] .card-view-mode .dcv-task-input::placeholder { color: var(--cc-task-soft) !important; }
      html[data-cc-task] .card-view-mode .dcv-task-drag-handle { color: var(--cc-task-soft) !important; }

      /* Swatches — shared by the 🎨 panel and the Settings section. */
      .cc-swatches { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
      .cc-swatch {
        display: inline-block !important;
        width: 26px !important; height: 26px !important;
        min-width: 26px; min-height: 26px !important; padding: 0 !important; margin: 0;
        border-radius: 7px !important;
        border: 2px solid rgba(15, 23, 42, 0.10) !important;
        box-shadow: none !important; filter: none !important;
        cursor: pointer; flex: 0 0 auto;
        transition: transform 0.1s;
      }
      .cc-swatch:hover  { transform: translateY(-1px); }
      .cc-swatch.cc-on  { outline: 2px solid #6366f1; outline-offset: 2px; }
      .cc-swatch:focus-visible { outline: 2px solid #0284c7; outline-offset: 2px; }
      .cc-swatch-def.cc-def-duty { background: linear-gradient(135deg, #93c5fd 50%, #ffffff 50%) !important; }
      .cc-swatch-def.cc-def-task { background: linear-gradient(135deg, #fde047 50%, #ffffff 50%) !important; }
      .cc-sep { width: 1px; height: 22px; background: #cbd5e1; margin: 0 3px; flex: 0 0 auto; }

      /* 🎨 panel under the bar button. */
      .cc-wrap { position: relative; display: inline-flex; }
      .cc-pop {
        position: absolute; top: calc(100% + 6px); inset-inline-end: 0; z-index: 60;
        width: max-content; max-width: calc(100vw - 24px);
        background: #ffffff; color: #334155;
        border: 1px solid #e2e8f0; border-radius: 12px;
        box-shadow: 0 12px 30px rgba(15, 23, 42, 0.18);
        padding: 10px 12px; text-align: start; white-space: normal;
      }
      .cc-pop-row { margin-bottom: 8px; }
      .cc-pop-lbl { font-size: 0.78em; font-weight: 700; color: #475569; margin-bottom: 5px; }
      .cc-pop-foot {
        display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
        border-top: 1px solid #eef2f7; padding-top: 8px; max-width: 320px;
      }
      .cc-pop-note { flex: 1 1 170px; font-size: 0.74em; line-height: 1.45; color: #64748b; }
      .cc-keep {
        display: inline-flex !important; align-items: center; gap: 4px;
        padding: 5px 10px !important; font-size: 0.78em !important; font-weight: 600;
        background: #f1f5f9 !important; color: #475569 !important;
        border: 1px solid #cbd5e1 !important; border-radius: 7px !important;
        box-shadow: none !important; cursor: pointer; white-space: nowrap;
      }
      .cc-keep:hover:not(:disabled) { background: #e2e8f0 !important; color: #1e293b !important; }
      .cc-keep:disabled { opacity: .45; cursor: not-allowed; }
      @media print { .cc-pop { display: none !important; } }

      /* Settings panel (light since 3.86.4): divider and preview cards. */
      #esModal .cc-sep { background: #cbd5e1; }
      #esModal .cc-swatch { border-color: #cbd5e1 !important; }
      #esModal .cc-swatch.cc-on { outline-color: #0284c7; }
      .cc-prev { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 4px; }
      .cc-prev-duty, .cc-prev-task {
        flex: 0 1 170px; min-height: 64px; border-radius: 12px; padding: 8px 10px;
        border: 2px solid; display: flex; flex-direction: column; gap: 4px;
        font-size: 0.8em; line-height: 1.35;
      }
      .cc-prev-duty b, .cc-prev-task b { font-size: 0.82em; text-transform: uppercase; letter-spacing: .03em; }
      .cc-prev-duty span, .cc-prev-task span { font-style: italic; font-weight: 600; }
      .cc-prev-duty { background: linear-gradient(145deg, #bfdbfe, #93c5fd); border-color: #60a5fa; color: #1e3a8a; }
      .cc-prev-duty b { color: #1e40af; }
      .cc-prev-task { background: linear-gradient(145deg, #fef9c3, #fef08a); border-color: #facc15; color: #713f12; }
      .cc-prev-task b { color: #854d0e; }
      .cc-prev-duty.cc-set { background: linear-gradient(145deg, var(--cc-duty-bg1), var(--cc-duty-bg2)); border-color: var(--cc-duty-border); color: var(--cc-duty-text); }
      .cc-prev-duty.cc-set b { color: var(--cc-duty-label); }
      .cc-prev-task.cc-set { background: linear-gradient(145deg, var(--cc-task-bg1), var(--cc-task-bg2)); border-color: var(--cc-task-border); color: var(--cc-task-text); }
      .cc-prev-task.cc-set b { color: var(--cc-task-label); }
      .es-badge.es-badge-screen { background: #1e3a5f; color: #93c5fd; border-color: #2563eb; }

      /* Fullscreen (Card View): only the toolbar and the cards. */
      body.card-view-fullscreen #dacumTopToolbar,
      body.card-view-fullscreen #dacumProjectsSidebar,
      body.card-view-fullscreen #dpsMobileBackdrop,
      body.card-view-fullscreen #duties-tab > .tab-header-row,
      body.card-view-fullscreen #duties-tab > .ai-gen-card,
      body.card-view-fullscreen #duties-tab > .ai-card-collapse,
      body.card-view-fullscreen #scopeMissingWarning,
      body.card-view-fullscreen #refineResultsSection,
      body.card-view-fullscreen #duties-tab > .step-nav-row {
        display: none !important;
      }
      body.card-view-fullscreen { margin: 0 !important; padding: 0 !important; background: #E8E9E6 !important; }
      body.card-view-fullscreen #dacumAppWrapper,
      body.card-view-fullscreen #dacumAppWrapper > .container {
        margin: 0 !important; margin-left: 0 !important; margin-right: 0 !important;
        max-width: none !important; border-radius: 0 !important;
      }
      body.card-view-fullscreen #dacumAppWrapper > .container { padding: 0 12px 16px !important; min-height: 100vh; }
      body.card-view-fullscreen .wall-toolbar.cv-toolbar { top: 0; border-radius: 0 0 10px 10px; }
      /* 3.65.0: presentation = the former Wall View layout. Each duty's
         tasks wrap onto as many lines as needed — no sideways scroll —
         so the whole chart is on screen. Normal Card View keeps its
         one-line scroll strips for editing. */
      body.card-view-fullscreen .card-view-mode .dcv-row { overflow-x: visible !important; }
      body.card-view-fullscreen .card-view-mode .dcv-duty-card { position: static !important; }
      body.card-view-fullscreen .card-view-mode .dcv-tasks-scroll {
        flex-wrap: wrap !important;
        overflow: visible !important;
        align-content: flex-start;
      }
      /* The cards scroll under the bar (an overflow-x:hidden ancestor
         stops position:sticky from working against the page). */
      body.card-view-fullscreen #dutiesContainer.card-view-mode {
        max-height: calc(100vh - 64px);
        overflow-y: auto;
        overflow-x: hidden;
        padding-bottom: 12px;
      }

      /* Print (Card View): header + cards; every task shown (the strip
         wraps instead of scrolling); no editing controls. */
      @media print {
        body.card-view-printing #duties-tab > *:not(#wallPrintHeader):not(#dutiesContainer),
        body.card-view-printing #btnAddDutyCard,
        body.card-view-printing .duties-foot-row,
        body.card-view-printing .cv-toolbar,
        body.card-view-printing .dcv-close-btn,
        body.card-view-printing .dcv-add-btn,
        body.card-view-printing .dcv-add-task-btn,
        body.card-view-printing .dcv-duty-drag-handle,
        body.card-view-printing .dcv-task-drag-handle {
          display: none !important;
        }
        body.card-view-printing .wall-print-header {
          display: block !important; text-align: center;
          margin: 0 0 8mm; padding-bottom: 4mm; border-bottom: 1px solid #94a3b8;
        }
        body.card-view-printing .wall-print-header h1 { font-size: 18pt; color: #1e293b; margin: 0 0 3mm; }
        body.card-view-printing .wall-print-header p  { font-size: 11pt; color: #475569; margin: 0; }
        body.card-view-printing #dutiesContainer.card-view-mode > .duty-row { zoom: 1; break-inside: avoid; page-break-inside: avoid; }
        body.card-view-printing .card-view-mode .dcv-row {
          overflow: visible !important; box-shadow: none !important;
          border: 1px solid #cbd5e1; background: #fff !important;
        }
        body.card-view-printing .card-view-mode .dcv-duty-card { position: static !important; }
        body.card-view-printing .card-view-mode .dcv-tasks-scroll { flex-wrap: wrap !important; overflow: visible !important; }
        body.card-view-printing .dcv-duty-card,
        body.card-view-printing .dcv-task-card {
          box-shadow: none !important;
          -webkit-print-color-adjust: exact; print-color-adjust: exact;
        }
        body.card-view-printing .dcv-duty-input,
        body.card-view-printing .dcv-task-input { resize: none; }
      }

      /* Print-only header (hidden by default) */
      .wall-print-header { display: none; }


/* ============================================================
   PHASE 2 — CONSOLIDATED OVERRIDE LAYER
   ------------------------------------------------------------
   Everything below was previously scattered across
   dacum-fixes.css (now deleted) and the non-media section of
   dacum-responsive.css. It is gathered here because this file
   loads last, which is what an override layer needs.

   IMPORTANT: these rules were NOT simply copied. The old copies
   MERGED across files rather than one winning outright — a
   toolbar button on hover took its transform and filter from
   dacum-fixes.css but its box-shadow from dacum-responsive.css,
   because the latter's #dacumTopToolbar selector outranked the
   former's bare `button` selector on that one property. Moving
   or deleting either file on its own would have silently changed
   the hover appearance. The computed result was resolved first,
   then written out once, explicitly.
   ============================================================ */

/* Button hover/active/disabled behaviour now lives at the SOURCE in
   dacum-styles.css (Phase 4). The translateY that made an override
   necessary was removed there, so nothing needs cancelling here. */

/* Toolbar buttons take a subtler shadow and a slightly stronger
   brightness than the global rule above — this is the merged result
   described in the header, now stated in one place. */
#dacumTopToolbar button:hover,
#dacumTopToolbar .dtb-btn:hover,
#dacumTopToolbar .dtb-undo:not([disabled]):hover,
#dacumTopToolbar .dtb-lens:hover,
#dacumTopToolbar .dtb-hamburger:hover {
  transform: none !important;
  filter: brightness(1.05);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.10) !important;
}

#dacumTopToolbar button:active,
#dacumTopToolbar .dtb-btn:active {
  transform: scale(0.97) !important;
}

/* Toolbar container overflow merged into dacum-styles.css (Phase 4),
   where the containers themselves are defined. */

/* ── Sidebar: drawer/rail transition and legacy hidden state ── */
.dps-sidebar {
  transition: width 0.25s cubic-bezier(.4, 0, .2, 1),
              transform 0.28s cubic-bezier(.4, 0, .2, 1) !important;
}

/* dps-force-hidden: width→0, kept for legacy compatibility.
   overflow:hidden is safe here because the element has no width. */
.dps-sidebar.dps-force-hidden {
  width: 0 !important;
  min-width: 0 !important;
  box-shadow: none !important;
  overflow: hidden !important;
}

#dacumAppWrapper.dps-force-hidden-wrapper > .container {
  margin-left: 0 !important;
}

/* The collapse control now lives inside the sidebar header. */
#dpsToggle { display: none !important; }

/* Mobile sidebar backdrop. Starts below the 60px fixed toolbar so the
   toolbar stays reachable while the drawer is open. */
#dpsMobileBackdrop {
  display: none;
  position: fixed;
  inset: 60px 0 0 0;
  background: rgba(0, 0, 0, 0.55);
  z-index: 299;
  -webkit-backdrop-filter: blur(2px);
          backdrop-filter: blur(2px);
}
#dpsMobileBackdrop.dps-backdrop-visible { display: block; }

/* In PWA standalone the viewport can be any size, so the ≤1100px
   breakpoint is not a reliable signal — standalone is touch-first, so
   always offer the hamburger. */
@media (display-mode: standalone) {
  .dtb-hamburger { display: inline-flex !important; }
  #dpsToggle     { display: none !important; }
}

/* ── PWA install button ───────────────────────────────────────
   Single source of truth. Hidden until dacum-fixes.js adds
   .dacum-install-visible on beforeinstallprompt. Its media query
   lives with it rather than in the responsive sheet: a component that
   owns all of its own styling, breakpoints included, is a component
   that cannot be broken from a distance. */
#dacumInstallBtn { display: none; }

#dacumInstallBtn.dacum-install-visible {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: linear-gradient(135deg, #cba6f7, #89b4fa);
  color: #1e1e2e;
  border: none;
  border-radius: 8px;
  padding: 6px 13px;
  font-size: 0.82em;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  letter-spacing: 0.01em;
  box-shadow: 0 2px 10px rgba(203, 166, 247, 0.3);
  transition: opacity 0.15s, transform 0.1s;
  flex-shrink: 0;
}

#dacumInstallBtn.dacum-install-visible:hover {
  opacity: 0.88;
  transform: none !important;
  filter: brightness(1.05);
}

#dacumInstallBtn.dacum-install-visible:active {
  transform: scale(0.96) !important;
}

@media (max-width: 480px) {
  #dacumInstallBtn.dacum-install-visible span.install-label { display: none; }
}


/* ══════════════════════════════════════════════════════════════════
   EXPORT SETTINGS MODAL  (export_settings.js)
   ------------------------------------------------------------------
   Appended rather than placed in a new stylesheet so no extra file has
   to be registered with the service worker. Everything is scoped under
   #esModal / .es-*, so none of these rules can reach existing markup.

   Laid out with flexbox and logical spacing only, so the panel mirrors
   correctly in Arabic without a single RTL override.
   ══════════════════════════════════════════════════════════════════ */

#esModal { position: fixed; inset: 0; z-index: 100000; }

#esModalOverlay {
  position: absolute; inset: 0;
  background: rgba(0, 0, 0, 0.55);
}

#esModalBox {
  position: relative;
  margin: 4vh auto;
  width: min(680px, 92vw);
  max-height: 92vh;
  display: flex;
  flex-direction: column;
  /* 3.86.4: light, the sidebar's grey (was a dark panel). */
  background: linear-gradient(180deg, #EFF0EE 0%, #E3E5E4 100%);
  color: #1e293b;
  border: 1px solid #cbd5e1;
  border-radius: 12px;
  box-shadow: 0 18px 50px rgba(15, 23, 42, 0.30);
  overflow: hidden;
}

#esModalHeader {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px;
  padding: 14px 18px;
  background: #DADCDE;
  border-bottom: 1px solid #cbd5e1;
  font-weight: 700;
}

#esModalClose {
  min-height: 0;
  background: transparent; border: none; cursor: pointer;
  color: #475569; font-size: 1.05em; line-height: 1;
  padding: 4px 8px; border-radius: 6px;
}
#esModalClose:hover { background: #f1f5f9; color: #b91c1c; }

#esModalBody { padding: 16px 18px; overflow-y: auto; }

#esModalFoot {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px;
  padding: 12px 18px;
  background: #DADCDE;
  border-top: 1px solid #cbd5e1;
}
#esModalFoot button {
  cursor: pointer; border-radius: 8px; padding: 8px 16px;
  font-size: 0.92em; font-weight: 600;
  border: 1px solid #cbd5e1; background: #ffffff; color: #1e293b;
}
#esModalFoot button:hover { background: #cbd5e1; }

/* Reset stays on the far side; Cancel and Save sit together on the
   other, with the dirty flag between them taking up the slack. */
#esModalReset { margin-inline-end: auto; }
#esDirtyFlag {
  flex: 1; text-align: end;
  font-size: 0.8em; color: #b45309;
  padding-inline-end: 4px;
}
#esDirtyFlag.es-saved { color: #15803d; }

/* Save is grey until there is something to save, so its state reports
   whether the panel has pending edits. */
#esModalSave {
  background: #cbd5e1; color: #64748b; border-color: #cbd5e1;
}
#esModalSave.es-armed {
  background: #0284c7; color: #ffffff; border-color: #0284c7;
}
#esModalSave.es-armed:hover { filter: brightness(1.08); }
#esModalSave:disabled { cursor: default; }
#esModalSave:disabled:hover { background: #cbd5e1; }

.es-intro {
  margin: 0 0 14px;
  font-size: 0.88em; line-height: 1.6; color: #475569;
  background: #ffffff; border: 1px solid #d1d5db;
  border-radius: 8px; padding: 10px 12px;
}

.es-section {
  border: 1px solid #d1d5db; border-radius: 10px;
  padding: 12px 14px; margin-bottom: 14px;
  background: #ffffff;
}

.es-sec-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; margin-bottom: 10px;
  font-weight: 700; font-size: 0.98em;
}

/* Scope badges. They STATE where a group applies; they are not
   controls, which is why there is no radio anywhere in this panel —
   the colours apply to both formats in every case, so offering a
   choice would imply a state that changes nothing. */
.es-badges { display: flex; gap: 6px; }
.es-badge {
  font-style: normal; font-size: 0.72em; font-weight: 700;
  letter-spacing: 0.03em;
  padding: 2px 8px; border-radius: 999px;
  background: #f1f5f9; color: #475569; border: 1px solid #cbd5e1;
}

.es-field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 10px; }
.es-field > label { font-size: 0.88em; color: #334155; }

.es-swatches { display: flex; flex-wrap: wrap; gap: 7px; }
.es-swatch {
  width: 30px; height: 30px; min-height: 30px;
  border-radius: 7px; cursor: pointer;
  border: 2px solid #cbd5e1;
  font-size: 0.85em; font-weight: 700; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0;
}
.es-swatch:hover { transform: translateY(-1px); }
.es-swatch.es-on { border-color: #0284c7; box-shadow: 0 0 0 2px rgba(2, 132, 199, 0.30); }

.es-select {
  background: #ffffff; color: #1e293b;
  border: 1px solid #cbd5e1; border-radius: 8px;
  padding: 7px 10px; font-size: 0.9em; max-width: 260px;
}

.es-note {
  margin: 6px 0 0;
  font-size: 0.8em; line-height: 1.6; color: #64748b;
}
.es-note.es-scope { margin-top: 0; }

.es-preview { display: flex; flex-wrap: wrap; gap: 12px; }
.es-prev-card { flex: 1 1 260px; min-width: 240px; }
.es-prev-cap {
  font-size: 0.78em; font-weight: 700; color: #475569;
  margin-bottom: 5px;
}
.es-prev-page {
  background: #ffffff; color: #000000;
  border: 1px solid #cbd5e1; border-radius: 6px;
  padding: 12px; line-height: 1.4;
}
.es-prev-tbl { width: 100%; border-collapse: collapse; }
.es-prev-tbl th, .es-prev-tbl td {
  border: 1px solid #9e9e9e; padding: 3px 5px; text-align: start;
}

/* Sidebar entry. Shape comes from .dps-nav-item; this only adds the
   hairline that separates the settings/help pair from the tab list. */
.dps-nav-settings { margin-top: 6px; }

/* ══════════════════════════════════════════════════════════════════
   SETTINGS TABS + LANGUAGES TAB  (export_settings.js,
   settings_languages.js — 3.79.0). Scoped under #esTabs / .cl-* /
   #clBanner; logical properties only, so it mirrors in Arabic.
   ══════════════════════════════════════════════════════════════════ */

#esTabs {
  display: flex; flex-wrap: wrap; gap: 4px;
  padding: 8px 14px 0;
  background: #DADCDE;
  border-bottom: 1px solid #cbd5e1;
}
#esTabs button {
  cursor: pointer;
  background: transparent; color: #475569;
  border: 1px solid transparent; border-bottom: none;
  border-radius: 8px 8px 0 0;
  padding: 7px 14px; font-size: 0.9em; font-weight: 600;
  margin-bottom: -1px;
}
#esTabs button:hover { color: #1e293b; background: #f1f5f9; }
/* Settings → Misc (settings_misc.js, 3.103.0) */
.ms-group { min-width: 0; }
/* 3.111.0: chart terms (Settings → Misc) and the DACUM name under a custom tab title */
.ms-terms { display: flex; flex-wrap: wrap; gap: 8px 16px; margin: 8px 0 2px; }
.ms-terms label { display: flex; flex-direction: column; gap: 4px; font-size: .88em; color: #475569; flex: 1 1 200px; }
.ms-terms input { padding: 7px 10px; border: 1px solid #cbd5e1; border-radius: 8px; font: inherit; }
.ct-sub { display: block; font-size: .5em; font-weight: 500; color: #64748b; margin-top: 2px; }
.ta-back-duties { width: auto; white-space: nowrap; padding: 6px 12px; font-weight: 600; }
.ms-opts { display: flex; flex-direction: column; gap: 6px; }
.ms-opt {
  display: flex; align-items: flex-start; gap: 8px;
  padding: 8px 10px; border: 1px solid #e2e8f0; border-radius: 8px;
  font-size: 0.88em; line-height: 1.5; color: #334155; cursor: pointer;
}
.ms-opt:hover { background: #f8fafc; }
.ms-opt.ms-on { border-color: #0284c7; background: #f0f9ff; color: #0c4a6e; }
.ms-opt input { margin: 3px 0 0; flex: none; width: 16px; height: 16px; min-height: 16px; }
.ms-opt span { min-width: 0; overflow-wrap: anywhere; }
.ms-reset-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 4px 0 6px; }

#esTabs button.es-tab-on {
  background: #EFF0EE; color: #0369a1;
  border-color: #cbd5e1; border-bottom: 1px solid #EFF0EE;
}

.cl-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 6px 0; }
.cl-fromto label { display: inline-flex; align-items: center; gap: 6px; font-size: 0.88em; color: #334155; }
.cl-arrow { color: #64748b; }
[dir="rtl"] .cl-arrow { display: inline-block; transform: scaleX(-1); }
.cl-check { display: flex; align-items: flex-start; gap: 8px; font-size: 0.86em; color: #334155; margin: 8px 0 2px; }
.cl-check input { margin-top: 3px; }

.cl-btn {
  cursor: pointer; border-radius: 8px; padding: 6px 12px;
  font-size: 0.86em; font-weight: 600;
  border: 1px solid #cbd5e1; background: #ffffff; color: #1e293b;
}
.cl-btn:hover { background: #cbd5e1; }
.cl-btn:disabled { opacity: 0.45; cursor: default; }
.cl-btn.cl-primary { background: #0284c7; color: #ffffff; border-color: #0284c7; }
.cl-btn.cl-primary:hover { filter: brightness(1.08); }
.cl-btn.cl-danger { color: #b91c1c; }

.cl-versions { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.cl-version {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px;
  padding: 8px 10px; border: 1px solid #d1d5db; border-radius: 8px;
  background: #ffffff;
}
.cl-version.cl-shown { border-color: #0284c7; box-shadow: 0 0 0 1px rgba(2, 132, 199, 0.25); }
.cl-pick { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; min-width: 120px; }
.cl-lname { font-weight: 700; color: #1e293b; font-size: 1em; }
.cl-meta { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; flex: 1; font-size: 0.82em; color: #475569; }
.cl-actions { display: inline-flex; gap: 6px; }

.cl-chip {
  display: inline-block; font-size: 0.74em; font-weight: 700;
  padding: 2px 8px; border-radius: 999px;
  background: #f1f5f9; color: #475569; border: 1px solid #cbd5e1;
}
.cl-chip.cl-orig { color: #1e293b; }
.cl-chip.cl-ok { background: #dcfce7; color: #15803d; border-color: #86efac; }
.cl-chip.cl-draft, .cl-chip.cl-ai { background: #fef3c7; color: #b45309; border-color: #fcd34d; }
.cl-chip.cl-edit { background: #e0f2fe; color: #0284c7; border-color: #7dd3fc; }
.cl-chip.cl-miss { background: #fee2e2; color: #b91c1c; border-color: #fca5a5; }
.cl-chip.cl-shown-chip { background: #0284c7; color: #ffffff; border-color: #0284c7; }

.cl-progress { height: 8px; border-radius: 999px; background: #f1f5f9; overflow: hidden; margin: 8px 0 4px; }
.cl-progress i { display: block; height: 100%; background: #0284c7; transition: width 0.3s; }
.cl-estimate { color: #b45309; }
.cl-foreign { margin: 6px 0; padding-inline-start: 20px; font-size: 0.86em; color: #1e293b; }

.cl-rev-head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-bottom: 8px; }
.cl-rev-head b { flex: 1; }
.cl-search { max-width: 220px; }
.cl-rev-list { display: flex; flex-direction: column; gap: 6px; }
.cl-rev-cols, .cl-rev-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; }
.cl-rev-cols { font-size: 0.78em; font-weight: 700; color: #475569; text-transform: uppercase; letter-spacing: 0.03em; }
.cl-rev-row { padding: 6px 0; border-top: 1px solid #f1f5f9; }
.cl-rev-src { font-size: 0.9em; line-height: 1.5; white-space: pre-wrap; color: #1e293b; }
.cl-rev-dst { display: flex; flex-direction: column; gap: 4px; align-items: flex-start; }
.cl-rev-dst textarea {
  width: 100%; box-sizing: border-box; resize: vertical;
  background: #ffffff; color: #1e293b; border: 1px solid #cbd5e1; border-radius: 6px;
  padding: 6px 8px; font: inherit; font-size: 0.9em; line-height: 1.5;
  min-height: 2.4em; height: auto;
}
.cl-rev-row.cl-missing .cl-rev-dst textarea { border-color: #f87171; }
.cl-was { margin: 0; color: #b45309; }
.cl-rev-foot { justify-content: flex-end; position: sticky; bottom: -16px; background: #EFF0EE; padding: 8px 0; }
@media (max-width: 600px) {
  .cl-rev-cols, .cl-rev-row { grid-template-columns: minmax(0, 1fr); }
  .cl-rev-cols span:last-child { display: none; }
}

/* Banner over the tabs while a translation is shown. */
#clBanner {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px;
  margin: 0 0 12px; padding: 8px 12px;
  background: #eef4ff; color: #1e3a8a;
  border: 1px solid #bfd3fb; border-radius: 10px;
  font-size: 0.88em; line-height: 1.5;
}
#clBanner .cl-b-text { flex: 1 1 260px; }
#clBanner .cl-b-chip { font-size: 0.82em; font-weight: 700; padding: 1px 8px; border-radius: 999px; }
#clBanner .cl-b-chip.cl-draft { background: #fef3c7; color: #92400e; border: 1px solid #fcd34d; }
#clBanner .cl-b-chip.cl-ok { background: #dcfce7; color: #166534; border: 1px solid #86efac; }
#clBanner .cl-b-actions { display: inline-flex; gap: 6px; }
#clBanner button {
  cursor: pointer; font: inherit; font-size: 0.92em; font-weight: 600;
  padding: 3px 10px; border-radius: 7px;
  background: #fff; color: #1e3a8a; border: 1px solid #bfd3fb;
}
#clBanner button:hover { background: #dbe7fe; }

/* Content in one direction, interface in the other: every field takes
   the direction of its own text. */
html[data-content-mixed] .container textarea,
html[data-content-mixed] .container input[type="text"] {
  unicode-bidi: plaintext;
  text-align: start;
}

      /* ══════════════════════════════════════════════════════════
         SELECT TASKS FOR TRAINING / ANALYSIS (3.80.0) — rendered by
         task_selection.js at the foot of the Task Verification tab.
         AI-card blue: #0ea5e9 → #0284c7, text #0369a1.
         ══════════════════════════════════════════════════════════ */
      #taskSelectionSection:empty { display: none; }
      .tsel { margin-top: 30px; border: 2px solid #0ea5e9; border-radius: 12px; background: #fff; overflow: hidden; }
      .tsel-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap;
                   padding: 14px 18px; background: linear-gradient(135deg, #0ea5e9 0%, #0284c7 100%); color: #fff; }
      .tsel-head h3 { margin: 0; font-size: 1.1em; color: #fff; }
      .tsel-count { background: rgba(255,255,255,.2); border-radius: 999px; padding: 4px 12px; font-weight: 700; font-size: .88em; }
      .tsel-intro { margin: 14px 18px 0; color: #475569; font-size: .92em; line-height: 1.6; }
      .tsel-rule { margin: 14px 18px; padding: 12px 14px; background: #f0f9ff; border: 1px solid #bae6fd; border-radius: 10px; }
      .tsel-rule-title { font-weight: 700; color: #0369a1; margin-bottom: 8px; font-size: .95em; }
      .tsel-rule-opt { display: flex; align-items: center; gap: 8px; margin: 6px 0; cursor: pointer; font-weight: 500; color: #334155; flex-wrap: wrap; }
      .tsel-rule-opt input[type="radio"] { width: 16px; height: 16px; margin: 0; flex-shrink: 0; }
      .tsel-num { width: 64px !important; padding: 4px 6px !important; margin: 0 2px !important; display: inline-block !important;
                  border: 1px solid #7dd3fc !important; border-radius: 6px !important; font-size: .95em !important; text-align: center; }
      .tsel-btns { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
      .tsel-btn { width: auto; margin: 0; padding: 7px 14px; border-radius: 8px; border: 1px solid #0ea5e9; background: #fff;
                  color: #0369a1; font-weight: 600; font-size: .88em; cursor: pointer; font-family: inherit; }
      .tsel-btn:hover { background: #e0f2fe; }
      .tsel-btn:focus-visible { outline: 2px solid #0369a1; outline-offset: 2px; }
      .tsel-btn-primary { background: linear-gradient(135deg, #0ea5e9 0%, #0284c7 100%); color: #fff; border-color: #0284c7; }
      .tsel-btn-primary:hover { background: linear-gradient(135deg, #0284c7 0%, #0369a1 100%); }
      .tsel-btn:disabled { opacity: .5; cursor: not-allowed; }
      .tsel-note { margin: 8px 0 0; font-size: .84em; color: #64748b; }
      .tsel-list { padding: 0 18px; }
      .tsel-duty { margin-bottom: 14px; }
      .tsel-duty-title { display: flex; justify-content: space-between; gap: 8px; font-weight: 700; color: #334155;
                         font-size: .92em; padding: 6px 0; border-bottom: 1px solid #e2e8f0; margin-bottom: 4px; }
      .tsel-duty-count { color: #0369a1; font-weight: 700; white-space: nowrap; }
      .tsel-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 6px 4px; border-radius: 6px; }
      .tsel-row:hover { background: #f8fafc; }
      .tsel-check { display: flex; align-items: center; gap: 8px; flex: 1 1 260px; min-width: 0; cursor: pointer; margin: 0; font-weight: 500; color: #1e293b; }
      .tsel-check input { width: 17px; height: 17px; margin: 0; flex-shrink: 0; accent-color: #0284c7; }
      .tsel-code { font-weight: 700; color: #0369a1; flex-shrink: 0; }
      .tsel-text { font-size: .92em; }
      .tsel-metrics { font-size: .8em; color: #475569; white-space: nowrap; }
      .tsel-metrics b { color: #0369a1; }
      .tsel-unrated { color: #94a3b8; font-style: italic; }
      /* 3.86.1: "Not rated yet" is a link to the task's rating row. */
      .tsel-goto { width: auto; margin: 0; padding: 3px 9px; border-radius: 999px; border: 1px dashed #f59e0b; background: #fffbeb;
                   color: #92400e; font: inherit; font-size: .8em; font-style: normal; font-weight: 600; cursor: pointer; white-space: nowrap; }
      .tsel-goto:hover { background: #fef3c7; }
      .tsel-goto:focus-visible { outline: 2px solid #0369a1; outline-offset: 2px; }
      /* 3.95.3: on a phone the pill (and the ratings line) must wrap inside
         the card instead of running past its edge. */
      .tsel-goto, .tsel-metrics { max-width: 100%; min-width: 0; box-sizing: border-box; }
      @media (max-width: 600px) {
        .tsel-goto { white-space: normal !important; text-align: start; line-height: 1.4; height: auto !important;
                     min-height: 0 !important; padding: 6px 12px !important; border-radius: 14px; overflow-wrap: anywhere; }
        .tsel-metrics { white-space: normal; overflow-wrap: anywhere; }
        .tsel-reason { max-width: 100%; }
        .tsel-list { padding: 0 10px; }
      }
      #verificationAccordionContainer tr.tsel-flash > td { background: #fef9c3 !important; transition: background .3s; }
      .tsel-reason { width: auto !important; max-width: 240px; margin: 0 !important; padding: 4px 8px !important;
                     font-size: .82em !important; border: 1px solid #fcd34d !important; border-radius: 6px !important; background: #fffbeb; }
      .tsel-reason[hidden] { display: none !important; }
      .tsel-off .tsel-text { color: #94a3b8; text-decoration: line-through; }
      .tsel-off .tsel-code { color: #94a3b8; }
      /* 3.90.0: "Is the task performed?" — Norton's 25% rule. */
      .tsel-perf-opt { display: flex; align-items: center; gap: 8px; margin: 10px 0 4px; padding-top: 8px; border-top: 1px dashed #bae6fd;
                       cursor: pointer; font-weight: 500; color: #334155; flex-wrap: wrap; }
      .tsel-perf-opt > input[type="checkbox"] { width: 16px; height: 16px; margin: 0; flex-shrink: 0; accent-color: #0284c7; }
      .tsel-perf-opt > span { flex: 1 1 220px; min-width: 0; line-height: 1.8; }
      .tsel-perf { display: inline-flex; align-items: center; gap: 4px; font-size: .85em; color: #475569; white-space: nowrap; }
      .tsel-perf .tsel-perf-in { width: 58px !important; }
      .tsel-perf-low { color: #b45309; font-weight: 700; font-size: .95em; }
      .tsel-new { display: inline-flex; align-items: center; gap: 5px; margin: 0; font-size: .82em; font-weight: 600; color: #0369a1;
                  cursor: pointer; white-space: nowrap; }
      .tsel-new input { width: 15px; height: 15px; margin: 0; accent-color: #0284c7; }
      .tsel-foot { margin: 6px 18px 16px; font-size: .82em; color: #64748b; font-style: italic; }

      /* Competency Clusters follow the task selection (3.81.0). */
      .cl-unsel-group { margin-top: 12px; border: 1px dashed #cbd5e1; border-radius: 8px; background: #f8fafc; padding: 6px 10px; }
      .cl-unsel-group > summary { cursor: pointer; font-weight: 700; color: #475569; font-size: .9em; padding: 4px 0; }
      .cl-unsel-hint { margin: 4px 0 8px; font-size: .82em; color: #64748b; }
      .task-checkbox-item.is-unselected { opacity: .7; }
      .cluster-unsel-badge { display: inline-block; margin-inline-start: 6px; padding: 1px 8px; border-radius: 999px;
                             background: #fffbeb; border: 1px solid #fcd34d; color: #92400e; font-size: .78em; font-weight: 600; white-space: nowrap; }
      .cl-unsel-bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap;
                      margin-bottom: 14px; padding: 10px 14px; border-radius: 10px; background: #fffbeb; border: 1px solid #fcd34d;
                      color: #92400e; font-size: .9em; font-weight: 600; }
      .cl-unsel-move { width: auto; margin: 0; padding: 7px 14px; border-radius: 8px; border: 1px solid #0284c7; background: #fff;
                       color: #0369a1; font-weight: 700; font-size: .95em; cursor: pointer; font-family: inherit; }
      .cl-unsel-move:hover { background: #f0f9ff; }
      .cl-unsel-move:focus-visible { outline: 2px solid #0369a1; outline-offset: 2px; }
      /* 3.83.0: "moved — Undo" bar after moving left-out tasks out. */
      .cl-unsel-done { background: #f0fdf4; border-color: #86efac; color: #166534; }
      .cl-unsel-done-actions { display: inline-flex; align-items: center; gap: 6px; }
      .cl-unsel-x { width: auto; margin: 0; padding: 4px 9px; border: none; background: transparent; color: #166534;
                    font-size: 1em; cursor: pointer; border-radius: 6px; font-family: inherit; }
      .cl-unsel-x:hover { background: #dcfce7; }

/* ── 3.88.0: wording notes (wording_check.js) ─────────────────────
   Soft suggestions under a competency name, its criteria and each
   learning outcome. Calm blue, not warning amber: nothing is wrong
   enough to block, the user may keep their text. */
.wording-note {
  margin: 6px 0 0;
  padding: 7px 11px;
  background: #f0f9ff;
  border: 1px dashed #7dd3fc;
  border-radius: 8px;
  color: #075985;
  font-size: 0.8em;
  line-height: 1.55;
  overflow-wrap: anywhere;
  text-align: start;
}
.wording-note[hidden] { display: none; }
.wording-note-head { font-weight: 700; color: #0369a1; margin-bottom: 2px; }
.cluster-item > .wording-note { margin: 0 0 10px; }
.module-item > .mod-size-note { margin: 0 0 12px; }
@media print { .wording-note { display: none !important; } }

/* ── 3.93.0: Task Verification, workshop counts ───────────────────
   The four count boxes of each dimension sit in a 2 × 2 grid (0 1 /
   2 3) instead of one row, with smaller boxes, so the whole table —
   means and Priority Index included — fits beside an open sidebar.
   The scale reads 0 → 3 left to right in every language, like the
   0–3 radio scale (dacum-rtl.css keeps scales LTR for the same
   reason). Where the screen is still too narrow, the table scrolls
   sideways and the task column stays in place. */
#verificationAccordionContainer .count-input-grid {
  display: grid !important;
  grid-template-columns: repeat(2, auto);
  gap: 6px 14px !important;
  justify-content: center;
  align-items: center;
  direction: ltr;
  flex-wrap: nowrap;
}
#verificationAccordionContainer .count-input-item {
  flex-direction: row !important;
  align-items: center;
  gap: 4px !important;
}
#verificationAccordionContainer .count-input-item label {
  font-size: .85em;
  min-width: 9px;
  text-align: center;
  margin: 0;
}
#verificationAccordionContainer .count-input-item input {
  width: 42px !important;
  height: 34px !important;
  padding: 0 !important;
  font-size: 1em !important;
  text-align: center !important;
}
#verificationAccordionContainer .count-input-item input::placeholder { color: #cbd5e1; font-weight: 400; opacity: 1; }
#verificationAccordionContainer .verification-table td,
#verificationAccordionContainer .verification-table th { padding-inline: 8px; }
#verificationAccordionContainer .verification-table td:first-child,
#verificationAccordionContainer .verification-table th:first-child {
  position: sticky;
  inset-inline-start: 0;
  z-index: 1;
}
#verificationAccordionContainer .verification-table td:first-child { background: #fff; }
#verificationAccordionContainer .verification-table tr:hover td:first-child { background: #f9fafb; }
#verification-tab .sv-table .count-input-item input::placeholder { color: #cbd5e1; opacity: 1; }

/* 3.96.0: Task Analysis is optional — a guidance line under the tab text. */
.ta-optional-note { margin: -12px 0 18px; padding: 8px 12px; border-inline-start: 3px solid #38bdf8; background: #f0f9ff;
                    border-radius: 6px; color: #075985; font-size: .88em; line-height: 1.6; }

/* 3.97.0: "↩ Back to Module Builder" — shown after arriving from Module Builder. */
.mb-return-bar { position: fixed; z-index: 9000; inset-inline: 0; bottom: 16px; margin: 0 auto; width: max-content; max-width: calc(100% - 32px);
                 display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 8px 10px 8px 14px; border-radius: 12px;
                 background: #0c4a6e; color: #e0f2fe; box-shadow: 0 6px 20px rgba(2,6,23,.3); font-size: .9em; }
.mb-return-bar b { color: #fff; }
.mb-return-btn { width: auto; margin: 0; padding: 7px 14px; border: none; border-radius: 8px; background: linear-gradient(135deg,#0ea5e9,#0284c7);
                 color: #fff; font: inherit; font-weight: 700; cursor: pointer; }
.mb-return-btn:hover { background: linear-gradient(135deg,#0284c7,#0369a1); }
.mb-return-close { width: auto; margin: 0; padding: 4px 8px; border: none; background: transparent; color: #bae6fd; font-size: 1em; cursor: pointer; }

/* ── 3.98.0: "Replace with Task Analysis criteria" (clusters.js) ──
   The note on a competency card that has both kinds of criteria, and
   the preview dialog. Logical properties only, so it mirrors in RTL. */
.crit-mix-note {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px;
  margin-top: 8px; padding: 8px 12px;
  background: #f0f9ff; border: 1px solid #bae6fd; border-radius: 8px;
  color: #075985; font-size: 0.84em; line-height: 1.5;
}
.crit-mix-btn {
  width: auto; margin: 0; padding: 6px 12px; border-radius: 8px;
  border: 1px solid #0284c7; background: #fff; color: #0369a1;
  font: inherit; font-weight: 700; cursor: pointer; white-space: nowrap;
}
.crit-mix-btn:hover { background: #e0f2fe; }
.crit-mix-btn:focus-visible { outline: 2px solid #0369a1; outline-offset: 2px; }

.crr-overlay { position: fixed; inset: 0; z-index: 100001; background: rgba(15, 23, 42, 0.5);
               display: flex; align-items: center; justify-content: center; padding: 16px; }
.crr-box { width: min(820px, 100%); max-height: 92vh; display: flex; flex-direction: column;
           background: #fff; border-radius: 12px; box-shadow: 0 18px 50px rgba(0, 0, 0, 0.3); overflow: hidden; }
.crr-head { display: flex; align-items: center; justify-content: space-between; gap: 10px;
            padding: 12px 16px; background: #f8fafc; border-bottom: 1px solid #e2e8f0; }
.crr-head h3 { margin: 0; font-size: 1.02em; color: #0f172a; }
.crr-x { width: auto; min-height: 0; margin: 0; padding: 4px 9px; border: none; background: transparent;
         font-size: 1.05em; cursor: pointer; border-radius: 6px; color: #475569; }
.crr-x:hover { background: #e2e8f0; }
.crr-body { padding: 14px 16px; overflow-y: auto; font-size: 0.9em; color: #1e293b; }
.crr-body h4 { margin: 14px 0 8px; font-size: 0.95em; }
.crr-count { margin: 0 0 8px; font-weight: 700; }
.crr-warn { padding: 8px 12px; background: #fffbeb; border: 1px solid #fcd34d; border-radius: 8px; color: #92400e; }
.crr-nolo, .crr-nomatch { margin: 4px 0; color: #64748b; font-style: italic; }
.crr-lo { border: 1px solid #e2e8f0; border-radius: 10px; padding: 10px 12px; margin-bottom: 10px; }
.crr-lo-head { margin-bottom: 8px; }
.crr-cols { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1.4fr); gap: 10px; align-items: start; }
.crr-arrow { color: #94a3b8; padding-top: 18px; }
[dir="rtl"] .crr-arrow { transform: scaleX(-1); }
.crr-lbl { font-size: 0.78em; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; color: #64748b; margin-bottom: 4px; }
.crr-before ul { margin: 0; padding-inline-start: 18px; color: #b45309; }
.crr-task { margin-bottom: 6px; }
.crr-task-name { font-weight: 600; font-size: 0.92em; color: #334155; margin-bottom: 2px; }
.crr-crit { display: flex; align-items: flex-start; gap: 6px; font-size: 0.92em; line-height: 1.45; margin: 2px 0; cursor: pointer; }
.crr-crit input { margin-top: 3px; min-height: 0; }
.crr-more summary { cursor: pointer; color: #0369a1; font-size: 0.9em; margin: 4px 0; }
.crr-foot { display: flex; justify-content: flex-end; gap: 8px; padding: 10px 16px; border-top: 1px solid #e2e8f0; background: #f8fafc; }
.crr-cancel, .crr-ok { width: auto; margin: 0; padding: 8px 16px; border-radius: 8px; font: inherit; font-weight: 700; cursor: pointer; }
.crr-cancel { border: 1px solid #cbd5e1; background: #fff; color: #334155; }
.crr-ok { border: 1px solid #0284c7; background: linear-gradient(135deg, #0ea5e9, #0284c7); color: #fff; }
@media (max-width: 640px) {
  .crr-cols { grid-template-columns: minmax(0, 1fr); }
  .crr-arrow { display: none; }
}

/* 3.99.5 — Task Verification "Standalone PDF / DOCX": on a phone the
   pair shares one row, so the labels step down a size to stay on one
   line ("Standalone DOCX" otherwise wraps in English). */
@media (max-width: 480px) {
  .tv-standalone-btn { font-size: 0.76em !important; gap: 4px !important; }
}

/* ══════════════════════════════════════════════════════════════
   3.100.0 — Task Analysis: decisions table and basic skills card
   ══════════════════════════════════════════════════════════════ */
.ta-dec-hint, .ta-basic-hint {
  margin: -4px 0 14px;
  font-size: 0.86em;
  color: #64748b;
  line-height: 1.6;
}
.ta-dec-table { display: flex; flex-direction: column; gap: 10px; }
/* Each decision is a small card: the decision across the top, cue and
   consequence side by side beneath it, the expert strategy (optional)
   last. The Task Analysis form sits beside the task navigator, so a
   four-column table would be too narrow to type in. */
.ta-dec-head { display: none !important; }
.ta-dec-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 34px;
  grid-template-areas:
    "n n del"
    "decision decision del"
    "cue error del"
    "expert expert del";
  column-gap: 10px;
  row-gap: 8px;
  align-items: start;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  padding: 10px 12px 12px;
}
.ta-dec-n {
  grid-area: n;
  font-size: 0.78em;
  font-weight: 800;
  color: #94a3b8;
}
.ta-dec-cell-decision { grid-area: decision; }
.ta-dec-cell-cue      { grid-area: cue; }
.ta-dec-cell-error    { grid-area: error; }
.ta-dec-cell-expert   { grid-area: expert; }
.ta-dec-del {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  box-sizing: border-box; grid-area: del; align-self: start; }
.ta-dec-h { display: none; }
.ta-dec-cell { display: block; margin: 0; }
.ta-dec-cell-lbl {
  display: inline-block;
  font-size: 0.76em;
  font-weight: 800;
  padding: 2px 8px;
  border-radius: 6px;
  margin-bottom: 5px;
}
.ta-dec-cell-decision .ta-dec-cell-lbl { background: #eeedfe; color: #3c3489; }
.ta-dec-cell-cue      .ta-dec-cell-lbl { background: #e1f5ee; color: #085041; }
.ta-dec-cell-error    .ta-dec-cell-lbl { background: #faece7; color: #712b13; }
.ta-dec-cell-expert   .ta-dec-cell-lbl { background: #fef9c3; color: #713f12; }
.section-container .ta-dec-cell textarea,
.section-container .ta-basic-cell textarea {
  width: 100%;
  min-height: 58px;
  height: auto;
  box-sizing: border-box;
  font-size: 0.9em;
  line-height: 1.5;
  padding: 8px 10px;
  resize: vertical;
  margin: 0;
}
.ta-dec-del {
  width: 34px;
  height: 34px;
  min-height: 34px;
  max-height: 34px;
  min-width: 34px;
  padding: 0;
  margin-top: 0;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  cursor: pointer;
  color: #94a3b8;
  transition: color 0.15s, background 0.15s, border-color 0.15s;
}
.ta-dec-del:hover { color: #dc2626; background: #fef2f2; border-color: #fecaca; }
.ta-dec-add { margin-top: 12px; }
.ta-dec-expert-btn {
  width: auto !important;
  padding: 0 12px !important;
  font-size: 0.82em;
  font-weight: 700;
  white-space: nowrap;
}

.ta-basic-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.ta-basic-cell {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  padding: 10px 12px 12px;
}
.ta-basic-cell-h {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
}
.ta-basic-cell-t { font-size: 0.9em; font-weight: 700; color: #334155; }
/* 3.121.0: numbering · bullets · clear, side by side in each cell */
.ta-basic-tools { display: inline-flex; align-items: center; gap: 2px; flex: 0 0 auto; }
.ta-basic-tool {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  box-sizing: border-box;
  width: 28px;
  height: 28px;
  min-height: 28px;
  max-height: 28px;
  min-width: 28px;
  padding: 0;
  border: none;
  border-radius: 7px;
  background: transparent;
  cursor: pointer;
  color: #94a3b8;
}
.ta-basic-tool svg { width: 16px; height: 16px; display: block; pointer-events: none; }
.ta-basic-fmt:hover { color: #4f46e5; background: #eef2ff; }
.ta-basic-tool:focus-visible { outline: 2px solid #6366f1; outline-offset: 1px; }
.ta-basic-clear:hover { color: #dc2626; background: #fef2f2; }
.ta-basic-section .tab-title-with-help h3 { margin: 0; }
/* 3.124.0: "?" beside the Task Analysis "Performance Criteria" heading. */
.ta-pc-help { display: inline-flex; vertical-align: middle; margin-inline-start: 8px; position: relative; top: -1px; }

@media (max-width: 760px) {
  .ta-dec-row {
    grid-template-columns: minmax(0, 1fr) 34px;
    grid-template-areas:
      "n del"
      "decision decision"
      "cue cue"
      "error error"
      "expert expert";
  }
  .ta-basic-grid { grid-template-columns: minmax(0, 1fr); }
}
/* 3.120.0: competency labels — quick picks */
.ms-cl-picks { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 2px; }
.ms-cl-picks .cl-btn.ms-pick-on { border-color: #0284c7; background: #e0f2fe; color: #0c4a6e; font-weight: 600; }

/* ── 3.132.0: 👍 agreed in the workshop (duties.js) ───────────── */
.dcv-card-foot { display: flex; justify-content: flex-end; margin-top: 4px; }
.tc-badge-row { gap: 6px; align-items: center; }
.dcv-agree {
  display: inline-flex !important; align-items: center; justify-content: center;
  width: 28px; height: 24px; min-height: 0 !important; padding: 0 !important; margin: 0 !important;
  border-radius: 999px !important; border: 1px solid #cbd5e1 !important; background: #fff !important;
  color: #94a3b8 !important; cursor: pointer; box-shadow: none !important; transition: background .15s, color .15s;
}
.dcv-agree:hover { color: #16a34a !important; border-color: #86efac !important; }
.dcv-agree.is-on { background: #16a34a !important; border-color: #15803d !important; color: #fff !important; }
body.card-view-printing .dcv-agree, html.vc-printing .dcv-agree { display: none !important; }

/* ── 3.134.0: participants outside the workshop (tasks.js, workshop.js) ── */
.ext-participants { margin-top: 18px; padding-top: 14px; border-top: 1px dashed #cbd5e1; }
.ext-chip { display: inline-block; margin-inline-start: 10px; padding: 3px 10px; border-radius: 999px;
  font-size: .8em; font-weight: 600; background: #f1f5f9; color: #475569; border: 1px solid #e2e8f0; vertical-align: middle; }
.ext-chip.is-counted { background: #ecfdf5; color: #047857; border-color: #a7f3d0; }
.ext-chip[hidden] { display: none; }
.lw-ext-box { background: #fff; color: #1e293b; padding: 18px 20px; border-radius: 8px; margin: 0 0 15px; }
.lw-ext-box[hidden] { display: none; }
.lw-ext-title { margin: 0 0 4px; color: #0369a1; font-size: 1.02em; }
.lw-ext-desc { margin: 0 0 12px; color: #475569; font-size: .88em; line-height: 1.6; }
.lw-ext-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.lw-ext-link { color: #0369a1; font-size: .95em; padding: 12px 16px; background: #f0f9ff; border: 1px solid #bae6fd;
  border-radius: 6px; user-select: all; cursor: text; font-weight: 500; overflow-wrap: anywhere; max-width: 100%; }
.lw-ext-btn { background: #f1f5f9; color: #475569; border: 1px solid #cbd5e1; padding: 12px 20px; font-weight: 600;
  border-radius: 6px; cursor: pointer; font-size: .9em; }
.lw-ext-btn:hover { background: #e2e8f0; }
.lw-ext-btn.lw-ext-qr { background: #0284c7; color: #fff; border-color: #0284c7; }
.lw-ext-btn.lw-ext-qr:hover { background: #0369a1; }
.lw-ext-copied { color: #059669; font-weight: 600; font-size: .9em; }
.lw-ext-copied[hidden] { display: none; }
.lw-votes-split { font-size: .85em; opacity: .9; margin-top: 2px; }
@media (max-width: 600px) {
  .lw-ext-box { padding: 14px 12px; }
  .lw-ext-row > .lw-ext-link { flex: 1 1 100%; }
  .lw-ext-btn { flex: 1 1 auto; }
}
/* The workshop link wraps too (it ran past its box on a phone). */
#lwParticipantLink { overflow-wrap: anywhere; max-width: 100%; box-sizing: border-box; }

/* Module Mapping / Learning Outcomes guide dialog (the "?" button).
   Moved here from inline style="" strings in learning_outcomes.js. */
.lomm-guide-overlay {
  position: fixed; inset: 0; z-index: 999999; display: flex; align-items: center; justify-content: center;
  padding: 16px; background: rgba(0,0,0,.55); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
}
.lomm-guide-card {
  background: #fff; border-radius: 16px; max-width: 620px; width: 100%; max-height: 88vh;
  display: flex; flex-direction: column; overflow: hidden; box-shadow: 0 24px 60px rgba(0,0,0,.35);
  font-family: inherit; text-align: start;
}
.lomm-guide-head {
  padding: 18px 22px 14px; display: flex; align-items: center; gap: 12px; flex-shrink: 0;
  background: linear-gradient(135deg,#eef2ff,#e0e7ff); border-bottom: 1px solid #c7d2fe;
}
.lomm-guide-icon { font-size: 1.6em; line-height: 1; }
.lomm-guide-title { margin: 0; font-size: 1em; font-weight: 800; color: #3730a3; }
.lomm-guide-body { padding: 16px 22px 18px; overflow-y: auto; }
.lomm-guide-intro {
  margin: 0 0 14px; font-size: .88em; line-height: 1.65; color: #475569;
  background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 8px; padding: 10px 12px;
}
.lomm-guide-sec { margin: 0 0 14px; }
.lomm-guide-sec-h { margin: 0 0 6px; font-size: .9em; font-weight: 800; color: #1e293b; }
.lomm-guide-sec ul { margin: 0; padding-inline-start: 20px; }
.lomm-guide-sec li { font-size: .86em; line-height: 1.65; color: #334155; margin-bottom: 4px; }
.lomm-guide-actions { display: flex; justify-content: flex-end; margin-top: 6px; }
.lomm-guide-card .lomm-guide-close {
  padding: 9px 22px; background: #667eea; color: #fff; border: none; border-radius: 8px;
  font-size: .9em; font-weight: 700; cursor: pointer;
}
.lomm-guide-card .lomm-guide-close:focus-visible { outline: 2px solid #3730a3; outline-offset: 2px; }