/* Classic override: white split card, accent rail + accent eyebrow */
    .cls-box {
      position: relative;
      background: var(--paper-2);
      border: 1px solid var(--rule);
      border-radius: var(--radius, 12px);
      box-shadow: var(--shadow, 0 1px 3px rgba(0,0,0,.06));
      transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
    }
    .cls-box::before {
      content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
      background: linear-gradient(180deg, var(--theme-500, #3b82f6), var(--theme-700, #1d4ed8));
      border-radius: var(--radius, 12px) 0 0 var(--radius, 12px);
    }
    .cls-box:hover {
      border-color: color-mix(in srgb, var(--theme-500, #3b82f6) 55%, var(--rule));
      box-shadow: var(--shadow-md, 0 8px 20px -6px rgba(0,0,0,.14));
      transform: translateY(-3px);
    }

    .cls-box .cls-plate {
      position: relative; overflow: hidden;
      background: var(--paper-2);
      border-right: 1px solid var(--rule);
    }
    .cls-box .cls-folio {
      position: absolute; top: 10px; left: 10px;
      padding: 0.14rem 0.5rem; border-radius: 0.4rem;
      background: color-mix(in srgb, var(--theme-500, #3b82f6) 12%, var(--paper-2));
      color: var(--theme-700, #1d4ed8);
      font-size: 9.5px; font-weight: 700; letter-spacing: 0.1em;
    }
    .cls-box .cls-eyebrow {
      font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.18em;
      color: var(--theme-600, #2563eb);
    }
    .cls-box .cls-ledger { padding-top: 0.7rem; border-top: 1px solid var(--rule); }
    .cls-box .cls-ledger-label {
      font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.14em;
      color: var(--ink-soft);
    }
    .cls-box .cls-ledger-value { color: var(--ink); }
    .cls-box .cls-ledger-free  { color: var(--px-good, #059669); }

/* Accent text after dark takes the lighter step; --theme-600/700 is under 3:1 on slate. */
html.dark .cls-box .cls-eyebrow { color: var(--theme-400); }