/* cbc-bcl-ui.css (v1800, BC-R16 rich UI pass) - shared delight + power UI for ByteClass, loaded AFTER cbc-byteclass.css
   only on the pages this release touches:
   <link rel="stylesheet" href="/assets/css/cbc-bcl-ui.css?v=1800"><script src="/assets/js/cbc-bcl-ui.js?v=1800" defer></script>
   Everything is scoped under .bcl-scope (or the .bcl-ui-* nodes the JS adds to <body>). cbc-byteclass.css is never edited.
   Dark mode overrides the cbc-byteclass.css custom properties only, and only when the viewer turns it on with the theme toggle
   (data-theme="dark" on .bcl-scope). */

/* ---------------------------------------------------------------- v1800 (BC-R16 dark): tokens only */
/* v1800: no automatic OS dark mode (ByteClass pages stay light by default since v1429; some panels use light-only inline colours). Dark mode only with the theme toggle. */
.bcl-scope[data-theme="dark"]{
  --bcl-brand:#8f84ff; --bcl-brand2:#a78bfa; --bcl-pink:#ff7ab8;
  --bcl-hero:linear-gradient(125deg,#4a3fd0,#7c4ee8 55%,#e04f98);
  --bcl-bg:#121022; --bcl-surface:#1c1a30; --bcl-surface2:#221f3a; --bcl-sunk:#17152a;
  --bcl-ink:#ecebfa; --bcl-ink2:#d9d7f0; --bcl-mut:#a8a5c8; --bcl-line:#33304f;
  --bcl-green:#4ade80; --bcl-amber:#fbbf24; --bcl-rose:#fb7185; --bcl-teal:#38d9ef;
  --bcl-shadow:0 14px 40px rgba(0,0,0,.45); --bcl-shadow-sm:0 3px 12px rgba(0,0,0,.35);
  color-scheme:dark;
}
.bcl-scope[data-theme="light"]{ color-scheme:light; }

/* ---------------------------------------------------------------- v1800 (BC-R16 a11y): skip link + focus rings */
.bcl-skip{position:absolute;left:12px;top:-60px;z-index:1000;background:var(--bcl-brand,#5B4BE8);color:#fff;padding:10px 16px;border-radius:10px;font-weight:800;text-decoration:none;transition:top .15s}
.bcl-skip:focus,.bcl-skip:focus-visible{top:12px;outline:3px solid #fff;outline-offset:2px}
.bcl-scope a:focus-visible,.bcl-scope button:focus-visible,.bcl-scope input:focus-visible,.bcl-scope select:focus-visible,
.bcl-scope textarea:focus-visible,.bcl-scope summary:focus-visible,.bcl-scope [tabindex]:focus-visible{outline:3px solid var(--bcl-brand,#5B4BE8);outline-offset:2px;border-radius:6px}
.bcl-sr{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.bcl-kbd{display:inline-block;min-width:1.6em;padding:1px 6px;border:1px solid var(--bcl-line,#e7e4f5);border-bottom-width:2px;border-radius:6px;background:var(--bcl-surface2,#f7f6fd);color:var(--bcl-ink2,#3a3658);font:700 .75rem/1.4 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;text-align:center}

/* ---------------------------------------------------------------- v1800 (BC-R16 theme toggle) */
.bcl-theme-toggle{display:inline-flex;align-items:center;gap:6px;padding:7px 12px;border-radius:999px;border:1px solid var(--bcl-line,#e7e4f5);background:var(--bcl-surface,#fff);color:var(--bcl-ink,#2b2748);font:700 .82rem/1 inherit;cursor:pointer}
.bcl-theme-toggle:hover{border-color:var(--bcl-brand,#5B4BE8)}
.bcl-theme-toggle[aria-pressed="true"]{background:var(--bcl-sunk,#efedf9)}

/* ---------------------------------------------------------------- v1800 (BC-R16 rings) */
.bcl-ring{position:relative;display:inline-grid;place-items:center;vertical-align:middle}
.bcl-ring svg{display:block;transform:rotate(-90deg)}
.bcl-ring .bcl-ring-bg{stroke:var(--bcl-sunk,#efedf9)}
.bcl-ring .bcl-ring-fg{stroke:var(--bcl-brand,#5B4BE8);stroke-linecap:round;transition:stroke-dashoffset 1s cubic-bezier(.2,.8,.2,1)}
.bcl-ring .bcl-ring-label{position:absolute;inset:0;display:grid;place-items:center;font-weight:900;font-size:.85rem;color:var(--bcl-ink,#2b2748)}
.bcl-rings{display:flex;flex-wrap:wrap;gap:16px;align-items:center}
.bcl-rings figure{margin:0;display:grid;justify-items:center;gap:6px;font-size:.8rem;font-weight:700;color:var(--bcl-mut,#66628a)}

/* ---------------------------------------------------------------- v1800 (BC-R16 task board) */
.bcl-board{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;align-items:start}
.bcl-board-col{background:var(--bcl-surface2,#f7f6fd);border:1px solid var(--bcl-line,#e7e4f5);border-radius:var(--bcl-r-sm,14px);padding:12px;min-height:120px}
.bcl-board-col > h3{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:.9rem;margin:0 0 10px;color:var(--bcl-ink,#2b2748)}
.bcl-board-col > h3 .n{background:var(--bcl-surface,#fff);border:1px solid var(--bcl-line,#e7e4f5);border-radius:999px;padding:1px 9px;font-size:.75rem}
.bcl-board-col.todo{border-top:4px solid var(--bcl-amber,#d97706)}
.bcl-board-col.sub{border-top:4px solid var(--bcl-brand,#5B4BE8)}
.bcl-board-col.done{border-top:4px solid var(--bcl-green,#16a34a)}
.bcl-board-card{display:block;background:var(--bcl-surface,#fff);border:1px solid var(--bcl-line,#e7e4f5);border-radius:12px;padding:10px 12px;margin-bottom:8px;box-shadow:var(--bcl-shadow-sm);text-decoration:none;color:var(--bcl-ink,#2b2748);transition:transform .15s,box-shadow .15s}
.bcl-board-card:hover{transform:translateY(-2px);box-shadow:var(--bcl-shadow)}
.bcl-board-card .t{font-weight:800;font-size:.9rem}
.bcl-board-card .m{font-size:.78rem;color:var(--bcl-mut,#66628a);margin-top:3px}
.bcl-board-empty{font-size:.82rem;color:var(--bcl-mut,#66628a);padding:8px 2px}
@media (max-width:760px){.bcl-board{grid-template-columns:1fr}}

/* ---------------------------------------------------------------- v1800 (BC-R16 heatmap): 12 weeks x 7 days, column per week */
.bcl-heat{display:grid;grid-auto-flow:column;grid-template-rows:repeat(7,14px);grid-auto-columns:14px;gap:3px;overflow-x:auto;padding:4px 0}
.bcl-heat i{display:block;width:14px;height:14px;border-radius:3px;background:var(--bcl-sunk,#efedf9)}
.bcl-heat i[data-l="1"]{background:color-mix(in srgb,var(--bcl-brand,#5B4BE8) 30%,var(--bcl-surface,#fff))}
.bcl-heat i[data-l="2"]{background:color-mix(in srgb,var(--bcl-brand,#5B4BE8) 55%,var(--bcl-surface,#fff))}
.bcl-heat i[data-l="3"]{background:color-mix(in srgb,var(--bcl-brand,#5B4BE8) 80%,var(--bcl-surface,#fff))}
.bcl-heat i[data-l="4"]{background:var(--bcl-brand,#5B4BE8)}
.bcl-heat-legend{display:flex;align-items:center;gap:4px;font-size:.75rem;color:var(--bcl-mut,#66628a);margin-top:6px}
.bcl-heat-legend i{width:12px;height:12px;border-radius:3px;display:inline-block}

/* ---------------------------------------------------------------- v1800 (BC-R16 sticky phone enrol bar) */
.bcl-enrolbar{display:none}
@media (max-width:640px){
  .bcl-enrolbar{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:60;align-items:center;justify-content:space-between;gap:12px;
    padding:10px 16px calc(10px + env(safe-area-inset-bottom,0px));background:var(--bcl-surface,#fff);border-top:1px solid var(--bcl-line,#e7e4f5);
    box-shadow:0 -8px 24px rgba(31,25,74,.12);transition:transform .25s ease}
  .bcl-enrolbar .p{font-weight:900;color:var(--bcl-ink,#2b2748);line-height:1.2}
  .bcl-enrolbar .p small{display:block;font-weight:600;font-size:.75rem;color:var(--bcl-mut,#66628a)}
  .bcl-enrolbar.is-hidden{transform:translateY(110%)}
  .bcl-enrolbar-pad{height:76px}
}

/* ---------------------------------------------------------------- v1800 (BC-R16 countdown + your time) */
.bcl-countdown{font-variant-numeric:tabular-nums;font-weight:800}
.bcl-yourtime{color:var(--bcl-mut,#66628a);font-size:.88em;font-weight:600;margin-left:4px;white-space:nowrap}

/* ---------------------------------------------------------------- v1800 (BC-R16 toasts) */
.bcl-ui-toasts{position:fixed;left:50%;bottom:20px;transform:translateX(-50%);z-index:2000;display:grid;gap:8px;width:min(92vw,460px);pointer-events:none}
.bcl-ui-toast{pointer-events:auto;display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:14px;background:#24203f;color:#fff;box-shadow:0 14px 40px rgba(0,0,0,.3);font:600 .9rem/1.4 'Inter',system-ui,sans-serif;animation:bcl-toast-in .2s ease-out}
.bcl-ui-toast .msg{flex:1}
.bcl-ui-toast a.undo,.bcl-ui-toast button.undo{color:#c9c3ff;font-weight:800;text-decoration:underline;background:none;border:0;cursor:pointer;font:inherit;padding:4px}
.bcl-ui-toast button.x{background:none;border:0;color:#fff;opacity:.8;cursor:pointer;font-size:1.1rem;line-height:1;padding:4px 6px;border-radius:6px}
.bcl-ui-toast a:focus-visible,.bcl-ui-toast button:focus-visible{outline:3px solid #c9c3ff;outline-offset:2px}
@keyframes bcl-toast-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* ---------------------------------------------------------------- v1800 (BC-R16 drag-drop upload) */
.bcl-drop{border:2px dashed var(--bcl-line,#e7e4f5);border-radius:var(--bcl-r-sm,14px);padding:14px;background:var(--bcl-surface2,#f7f6fd);transition:border-color .15s,background .15s}
.bcl-drop.is-over{border-color:var(--bcl-brand,#5B4BE8);background:color-mix(in srgb,var(--bcl-brand,#5B4BE8) 8%,var(--bcl-surface,#fff))}
.bcl-drop-hint{display:block;font-size:.82rem;color:var(--bcl-mut,#66628a);margin-bottom:8px}
.bcl-drop-name{display:block;font-size:.82rem;font-weight:700;color:var(--bcl-ink,#2b2748);margin-top:6px}

/* ---------------------------------------------------------------- v1800 (BC-R16 confetti) */
.bcl-ui-confetti{position:fixed;inset:0;width:100vw;height:100vh;pointer-events:none;z-index:2500}

/* ---------------------------------------------------------------- v1800 (BC-R16 keyboard grading) */
[data-bcl-grade-list] .bcl-grade-active{outline:3px solid var(--bcl-brand,#5B4BE8);outline-offset:3px;border-radius:12px}

/* ---------------------------------------------------------------- v1800 (BC-R16 command palette) */
.bcl-ui-pal-back{position:fixed;inset:0;z-index:3000;background:rgba(18,15,40,.5);display:flex;align-items:flex-start;justify-content:center;padding:10vh 16px 16px}
.bcl-ui-pal-back[hidden]{display:none}
.bcl-ui-pal{width:min(640px,100%);max-height:72vh;display:flex;flex-direction:column;background:#fff;color:#2b2748;border-radius:16px;box-shadow:0 24px 70px rgba(0,0,0,.35);overflow:hidden;font:400 .95rem/1.45 'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif}
.bcl-ui-pal-head{display:flex;align-items:center;gap:8px;padding:12px 14px;border-bottom:1px solid #e7e4f5}
.bcl-ui-pal-head input{flex:1;border:0;outline:0;font:600 1rem/1.4 inherit;background:transparent;color:inherit;padding:6px 2px}
.bcl-ui-pal-head input:focus-visible{outline:none;box-shadow:none}
.bcl-ui-pal-close{background:none;border:1px solid #e7e4f5;border-radius:8px;padding:4px 8px;cursor:pointer;color:#66628a;font:700 .75rem/1.2 inherit}
.bcl-ui-pal-close:focus-visible{outline:3px solid #5B4BE8;outline-offset:2px}
.bcl-ui-pal-list{list-style:none;margin:0;padding:6px;overflow-y:auto;flex:1}
.bcl-ui-pal-grp{padding:10px 10px 4px;font-size:.72rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:#66628a}
.bcl-ui-pal-opt{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:10px;cursor:pointer}
.bcl-ui-pal-opt .tx{flex:1;min-width:0}
.bcl-ui-pal-opt .t{display:block;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bcl-ui-pal-opt .s{display:block;font-size:.8rem;color:#66628a;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bcl-ui-pal-opt[aria-selected="true"]{background:#eeebff;box-shadow:inset 3px 0 0 #5B4BE8}
.bcl-ui-pal-msg{padding:18px 14px;color:#66628a;font-size:.9rem}
.bcl-ui-pal-foot{display:flex;flex-wrap:wrap;gap:12px;padding:8px 14px;border-top:1px solid #e7e4f5;font-size:.75rem;color:#66628a}
.bcl-ui-pal .bcl-kbd{border-color:#e7e4f5;background:#f7f6fd;color:#3a3658}
.bcl-ui-pal-dark .bcl-ui-pal{background:#1c1a30;color:#ecebfa}
.bcl-ui-pal-dark .bcl-ui-pal-head,.bcl-ui-pal-dark .bcl-ui-pal-foot{border-color:#33304f}
.bcl-ui-pal-dark .bcl-ui-pal-grp,.bcl-ui-pal-dark .bcl-ui-pal-opt .s,.bcl-ui-pal-dark .bcl-ui-pal-msg,.bcl-ui-pal-dark .bcl-ui-pal-foot,.bcl-ui-pal-dark .bcl-ui-pal-close{color:#a8a5c8}
.bcl-ui-pal-dark .bcl-ui-pal-opt[aria-selected="true"]{background:#2c2852;box-shadow:inset 3px 0 0 #8f84ff}
.bcl-ui-pal-dark .bcl-ui-pal .bcl-kbd{border-color:#33304f;background:#221f3a;color:#d9d7f0}
.bcl-ui-pal-dark .bcl-ui-pal-close{border-color:#33304f}
@media (max-width:640px){.bcl-ui-pal-back{padding:12px}.bcl-ui-pal{max-height:86vh}.bcl-ui-pal-foot{display:none}}

/* ---------------------------------------------------------------- v1800 (BC-R16 motion): respect reduced motion */
@media (prefers-reduced-motion: reduce){
  .bcl-ring .bcl-ring-fg,.bcl-board-card,.bcl-enrolbar,.bcl-skip,.bcl-drop{transition:none!important}
  .bcl-ui-toast{animation:none!important}
  .bcl-board-card:hover{transform:none}
  .bcl-ui-confetti{display:none!important}
}