/* TDC Coaching — B+ Studio Pop component styles. Requires tokens.css. Body font Arimo: load from Google Fonts (400, 700). */

/* ---------- LAB colour scopes: set --lab / --lab-soft for everything inside ---------- */
:root{--lab:var(--lab-lavender);--lab-soft:var(--lab-lavender-soft);--lab-strong:var(--lab-lavender)}
.tdc-lab-lavender{--lab:var(--lab-lavender);--lab-soft:var(--lab-lavender-soft);--lab-strong:var(--lab-lavender)}
.tdc-lab-lime{--lab:var(--lab-lime);--lab-soft:var(--lab-lime-soft);--lab-strong:var(--lab-lime)}
.tdc-lab-sky{--lab:var(--lab-sky);--lab-soft:var(--lab-sky-soft);--lab-strong:var(--lab-sky-strong)}
.tdc-lab-mint{--lab:var(--lab-mint);--lab-soft:var(--lab-mint-soft);--lab-strong:var(--lab-mint-strong)}
/* formal scope (login, certificate): sand instead of a LAB colour */
.tdc-lab-sand{--lab:var(--sand);--lab-soft:var(--paper-sunk);--lab-strong:var(--sand-strong)}
.tdc-root,.tdc-lab-lavender,.tdc-lab-lime,.tdc-lab-sky,.tdc-lab-mint,.tdc-lab-sand{font-family:var(--font-body);color:var(--ink)}

/* ---------- motion ---------- */
@keyframes tdc-rise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@keyframes tdc-float{50%{transform:translateY(8px) rotate(4deg)}}
@keyframes tdc-pulse{50%{transform:scale(1.6);opacity:.5}}
@keyframes tdc-fill{from{transform:scaleX(0)}}
.tdc-rise{animation:tdc-rise .7s cubic-bezier(.2,.8,.2,1) both}
@media (prefers-reduced-motion:reduce){.tdc-root *,.tdc-rise,[class*="tdc-"]{animation:none!important;transition:none!important}}

/* ---------- type helpers ---------- */
.tdc-paren{font:500 13px/18px var(--font-display);color:var(--ink-muted)}
.tdc-on-lab .tdc-paren,.tdc-paren.tdc-on{color:var(--ink-soft)}
.tdc-hl{background:var(--lab-soft);color:var(--ink);padding:0 4px;white-space:nowrap;box-decoration-break:clone;-webkit-box-decoration-break:clone}
.tdc-h1{font:700 30px/32px var(--font-display);margin:0;color:var(--ink)}
.tdc-meta{font:12px/16px var(--font-body);color:var(--ink-muted)}
.tdc-on-lab .tdc-meta{color:var(--ink-soft)}

/* ---------- Button ---------- */
.tdc-btn{all:unset;box-sizing:border-box;cursor:pointer;white-space:nowrap;display:inline-flex;align-items:center;justify-content:center;gap:6px;font:700 14px/1 var(--font-body);padding:12px 14px;min-height:44px;border-radius:var(--radius-md);background:var(--lab-strong);color:var(--ink);transition:transform .15s,background .3s}
/* primary on a LAB block turns white; the block already carries the colour */
.tdc-on-lab .tdc-btn:not(.tdc-btn--secondary):not(.tdc-btn--ghost):not(.tdc-btn--onlab){background:var(--paper-raised)}
.tdc-btn:active{transform:scale(.96)}
.tdc-btn:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.tdc-btn svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;flex:none}
.tdc-btn--secondary{background:var(--paper-raised);color:var(--ink);box-shadow:inset 0 0 0 1px var(--line-strong)}
.tdc-btn--ghost{background:transparent;color:var(--tdc-red-deep);padding-left:8px;padding-right:8px}
.tdc-btn--onlab{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--ink)}
.tdc-btn--sm{min-height:36px;padding:9px 12px;font-size:13px}
.tdc-btn--block{display:flex;width:100%}
.tdc-btn--split{justify-content:space-between}
.tdc-btn[disabled]{cursor:not-allowed;background:var(--paper-sunk);color:#A9A39A;box-shadow:none;transform:none}

/* ---------- StatusBadge ---------- */
.tdc-badge{display:inline-flex;align-items:center;gap:4px;font:700 11px/1 var(--font-body);padding:5px 7px;border-radius:var(--radius-sm);white-space:nowrap}
.tdc-badge--ok{background:var(--ok-tint);color:var(--ok)}
.tdc-badge--warn{background:var(--warn-tint);color:var(--warn)}
.tdc-badge--due{background:var(--red-tint);color:var(--tdc-red-deep)}
.tdc-badge--neutral{background:var(--paper-sunk);color:var(--ink-muted)}
.tdc-badge--lab{background:var(--lab);color:var(--ink)}
/* on a LAB block: one quiet chip style, meaning carried by the dot + words */
.tdc-on-lab .tdc-badge{background:rgba(255,255,255,.6);color:var(--ink)}
.tdc-on-lab .tdc-badge--due:before,.tdc-on-lab .tdc-badge--warn:before{content:"";width:7px;height:7px;border-radius:50%;background:var(--tdc-red-deep);margin-right:2px}
.tdc-on-lab .tdc-badge--warn:before{background:var(--warn)}

/* ---------- LabShape ---------- */
.tdc-shape{display:block;fill:var(--lab-soft);transition:fill .5s}
.tdc-shape--ink{fill:var(--ink)}
.tdc-shape--float{animation:tdc-float 6s ease-in-out infinite}

/* ---------- TopBar ---------- */
.tdc-topbar{display:flex;justify-content:space-between;align-items:center;padding:4px 16px 6px}
.tdc-topbar img{height:17px;display:block}
.tdc-iconbtn{all:unset;cursor:pointer;width:36px;height:36px;border-radius:50%;background:var(--paper-raised);display:grid;place-items:center;box-shadow:var(--shadow-card);position:relative}
.tdc-iconbtn:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.tdc-iconbtn svg{width:18px;height:18px;fill:none;stroke:var(--ink);stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.tdc-iconbtn .tdc-dot{position:absolute;top:7px;right:8px;width:7px;height:7px;border-radius:50%;background:var(--tdc-red);border:2px solid var(--paper-raised)}

/* ---------- NextSessionCard ---------- */
.tdc-next{position:relative;overflow:hidden;border-radius:26px;padding:16px;background:var(--lab);color:var(--ink);transition:background .5s}
.tdc-next .tdc-shape{position:absolute;right:-6px;top:-8px;width:120px;height:170px}
.tdc-next>*{position:relative}
.tdc-next .tdc-shape{position:absolute}
.tdc-next__time{font:700 56px/52px var(--font-display);letter-spacing:-1.5px;margin-top:8px}
.tdc-next__title{font:700 14px/19px var(--font-body);margin-top:4px}
.tdc-countdown{display:inline-flex;gap:6px;align-items:center;margin-top:8px;background:rgba(255,255,255,.55);border-radius:999px;padding:5px 10px 5px 8px;font:700 12px var(--font-body);font-variant-numeric:tabular-nums}
.tdc-countdown b{width:7px;height:7px;border-radius:50%;background:var(--tdc-red);animation:tdc-pulse 1.4s ease-in-out infinite}
.tdc-next__actions{display:flex;gap:8px;margin-top:14px}
.tdc-next__actions .tdc-btn{flex:1}

/* ---------- DeadlineCard ---------- */
.tdc-deadline{background:var(--paper-raised);border-radius:22px;box-shadow:var(--shadow-card);padding:14px;display:flex;gap:12px;align-items:center}
.tdc-ring{width:46px;height:46px;flex:none;position:relative}
.tdc-ring svg{width:46px;height:46px;transform:rotate(-90deg)}
.tdc-ring circle{fill:none;stroke-width:5}
.tdc-ring .bg{stroke:var(--paper-sunk)}
.tdc-ring .fg{stroke:var(--tdc-red);stroke-linecap:round;transition:stroke-dashoffset 1.2s cubic-bezier(.2,.8,.2,1)}
.tdc-ring.is-ok .fg{stroke:var(--ok)}
.tdc-ring em{position:absolute;inset:0;display:grid;place-items:center;font:700 13px var(--font-display);font-style:normal}
.tdc-deadline__body{flex:1;min-width:0}
.tdc-deadline__title{font:700 14px/19px var(--font-body)}

/* ---------- SubjectChip ---------- */
.tdc-chiprow{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none}
.tdc-chip{all:unset;cursor:pointer;flex:none;display:inline-flex;align-items:center;gap:7px;padding:6px 12px 6px 6px;border-radius:999px;background:var(--paper-raised);box-shadow:inset 0 0 0 1px var(--line);font:700 13px var(--font-body);color:var(--ink)}
.tdc-chip__sw{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;background:var(--lab)}
.tdc-chip__sw svg{width:10px;height:16px}
.tdc-chip[aria-pressed="true"]{background:var(--lab-strong);color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--ink)}
.tdc-chip[aria-pressed="true"] .tdc-chip__sw{background:var(--paper-raised)}
.tdc-chip:focus-visible{outline:2px solid var(--focus);outline-offset:2px}

/* ---------- DayPicker ---------- */
.tdc-days{display:flex;gap:7px}
.tdc-day{all:unset;cursor:pointer;flex:1;min-width:0;text-align:center;border-radius:16px;padding:8px 0;background:var(--paper-raised);box-shadow:inset 0 0 0 1px var(--line);transition:transform .25s cubic-bezier(.3,1.6,.5,1),background .3s}
.tdc-day small{display:block;font:600 11px/14px var(--font-body);color:var(--ink-muted)}
.tdc-day b{display:block;font:700 21px/24px var(--font-display);color:var(--ink)}
.tdc-day[aria-pressed="true"]{background:var(--lab-strong);box-shadow:none;transform:translateY(-4px) rotate(-3deg)}
.tdc-day[aria-pressed="true"] small{color:var(--ink-soft)}
.tdc-day[disabled]{cursor:default;background:transparent;box-shadow:none}
.tdc-day[disabled] small,.tdc-day[disabled] b{color:#A9A39A}
.tdc-day:focus-visible{outline:2px solid var(--focus);outline-offset:2px}

/* ---------- SlotGrid ---------- */
.tdc-slotgrp{display:flex;align-items:center;gap:8px;padding:12px 0 7px}
.tdc-slotgrp hr{flex:1;border:0;border-top:1px solid var(--line);margin:0}
.tdc-slots{display:grid;grid-template-columns:repeat(3,1fr);gap:7px}
.tdc-slot{all:unset;cursor:pointer;text-align:center;border-radius:var(--radius-md);padding:12px 0;font:700 16px/1 var(--font-display);color:var(--ink);background:var(--paper-raised);box-shadow:inset 0 0 0 1px var(--line-strong);transition:transform .2s cubic-bezier(.3,1.6,.5,1),background .2s}
.tdc-slot[aria-pressed="true"]{background:var(--lab-strong);color:var(--ink);box-shadow:inset 0 0 0 2px var(--ink);transform:scale(1.06)}
.tdc-slot[disabled]{cursor:default;background:transparent;color:#A9A39A;box-shadow:inset 0 0 0 1px var(--line);text-decoration:line-through}
.tdc-slot:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.tdc-slots__empty{grid-column:1/-1;font:13px/18px var(--font-body);color:var(--ink-muted);padding:8px 0}

/* ---------- BookingSheet ---------- */
.tdc-sheet{border-radius:26px 26px 0 0;padding:10px 16px 16px;background:var(--lab);color:var(--ink);box-shadow:var(--shadow-float);transition:transform .45s cubic-bezier(.2,.8,.2,1),background .5s}
.tdc-sheet.is-hidden{transform:translateY(110%)}
.tdc-sheet__grab{width:36px;height:4px;border-radius:2px;background:rgba(18,18,17,.25);margin:0 auto 10px}
.tdc-sheet__when{font:700 30px/30px var(--font-display);margin:2px 0 4px}
.tdc-sheet__note{display:flex;gap:8px;align-items:center;background:rgba(255,255,255,.6);border-radius:14px;padding:9px 10px;margin:10px 0 12px;font:12px/16px var(--font-body)}
.tdc-sheet__note img{width:18px;flex:none}

/* ---------- TabBar ---------- */
.tdc-tabbar{height:58px;background:var(--paper-raised);border-radius:999px;display:flex;align-items:center;padding:0 7px;box-shadow:var(--shadow-float)}
.tdc-tab{all:unset;cursor:pointer;height:44px;border-radius:999px;display:flex;align-items:center;justify-content:center;gap:6px;color:var(--ink);flex:0 0 40px;transition:flex .35s cubic-bezier(.2,.8,.2,1),background .35s;overflow:hidden;white-space:nowrap;font:700 13px var(--font-body)}
.tdc-tab svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;flex:none}
.tdc-tab span{max-width:0;opacity:0;transition:max-width .35s,opacity .2s}
.tdc-tab[aria-current="page"]{flex:1 1 auto;padding:0 12px;background:var(--lab-strong);color:var(--ink)}
.tdc-tab[aria-current="page"] span{max-width:96px;opacity:1}
.tdc-tab:focus-visible{outline:2px solid var(--focus);outline-offset:1px}
.tdc-tab .tdc-dot{width:6px;height:6px;border-radius:50%;background:var(--tdc-red);margin-left:-8px;margin-top:-14px}

/* ---------- ProgressSegments ---------- */
.tdc-progress{display:flex;gap:4px}
.tdc-progress i{flex:1;height:8px;border-radius:4px;background:rgba(255,255,255,.6);overflow:hidden;position:relative}
.tdc-progress.on-paper i{background:var(--paper-sunk)}
.tdc-progress i.is-done:after,.tdc-progress i.is-current:after{content:"";position:absolute;inset:0;background:var(--ink);transform-origin:left;animation:tdc-fill .5s cubic-bezier(.2,.8,.2,1) both}
.tdc-progress i.is-current:after{background:var(--tdc-red);width:50%}

/* ---------- LessonRow ---------- */
.tdc-lesson:first-child{border-top:0}
.tdc-lesson{display:grid;grid-template-columns:44px 1fr auto;gap:8px;align-items:center;padding:11px 16px;border-top:1px solid var(--line)}
.tdc-lesson__n{font:700 26px/26px var(--font-display);color:var(--ink)}
.tdc-lesson.is-done .tdc-lesson__n,.tdc-lesson.is-upcoming .tdc-lesson__n{color:#A9A39A}
.tdc-lesson.is-current .tdc-lesson__n{color:var(--tdc-red)}
.tdc-lesson__title{font:700 14px/19px var(--font-body)}
.tdc-lesson.is-upcoming .tdc-lesson__title{color:var(--ink-muted)}

/* ---------- TextField ---------- */
.tdc-field{display:block;background:var(--paper-raised);border-radius:var(--radius-md);box-shadow:inset 0 0 0 1px var(--line-strong);padding:9px 12px}
.tdc-field:focus-within{box-shadow:inset 0 0 0 2px var(--ink)}
.tdc-field__label{display:block;font:600 11px/14px var(--font-display);letter-spacing:.6px;text-transform:uppercase;color:var(--ink-muted)}
.tdc-field input{all:unset;display:block;width:100%;font:15px/20px var(--font-body);color:var(--ink);margin-top:2px}
.tdc-field.is-error{box-shadow:inset 0 0 0 2px var(--tdc-red-deep)}
.tdc-field__err{display:block;font:12px/16px var(--font-body);color:var(--tdc-red-deep);margin-top:4px}

/* ---------- SegmentedControl ---------- */
.tdc-seg{display:flex;background:var(--paper-sunk);border-radius:999px;padding:4px;gap:2px}
.tdc-seg button{all:unset;cursor:pointer;flex:1;white-space:nowrap;text-align:center;border-radius:999px;padding:9px 10px;font:700 13px/1 var(--font-body);color:var(--ink-muted);transition:background .25s,color .25s}
.tdc-seg button[aria-pressed="true"]{background:var(--paper-raised);color:var(--ink);box-shadow:var(--shadow-card)}
.tdc-seg button:focus-visible{outline:2px solid var(--focus);outline-offset:1px}
.tdc-seg em{font-style:normal;font-weight:400;color:var(--ink-muted);margin-left:4px}

/* ---------- SessionItem ---------- */
.tdc-session{display:grid;grid-template-columns:52px 1fr;gap:10px 12px;background:var(--paper-raised);border-radius:20px;box-shadow:var(--shadow-card);padding:12px}
.tdc-session__date{width:52px;flex:none;border-radius:14px;background:var(--lab);text-align:center;padding:8px 0;align-self:flex-start;transition:background .5s}
.tdc-session.is-past .tdc-session__date{background:var(--paper-sunk)}
.tdc-session__date small{display:block;font:600 11px/14px var(--font-body);color:var(--ink-soft)}
.tdc-session.is-past .tdc-session__date small{color:var(--ink-muted)}
.tdc-session__date b{display:block;font:700 24px/26px var(--font-display)}
.tdc-session__body{flex:1;min-width:0}
.tdc-session__top{display:flex;justify-content:space-between;gap:8px;align-items:flex-start}
.tdc-session__time{font:700 17px/20px var(--font-display);white-space:nowrap}
.tdc-session__title{font:700 14px/19px var(--font-body);margin-top:2px}
.tdc-session__actions{grid-column:1/-1;display:flex;gap:6px}
.tdc-session__actions .tdc-btn{flex:1}
.tdc-session__actions .tdc-btn--ghost{flex:0 0 auto}

/* ---------- FileDrop ---------- */
.tdc-drop{all:unset;box-sizing:border-box;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:6px;width:100%;border:1.5px dashed var(--line-strong);border-radius:18px;padding:18px 12px;background:var(--paper-raised);text-align:center;transition:background .2s,border-color .2s}
.tdc-drop:hover,.tdc-drop.is-over{border-color:var(--ink);background:var(--lab-soft)}
.tdc-drop:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.tdc-drop svg{width:26px;height:26px;fill:none;stroke:var(--ink);stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.tdc-drop b{font:700 14px/19px var(--font-body)}
.tdc-files{display:flex;flex-direction:column;gap:6px;margin-top:8px}
.tdc-file{display:flex;align-items:center;gap:10px;background:var(--paper-raised);border-radius:14px;padding:9px 10px;box-shadow:inset 0 0 0 1px var(--line)}
.tdc-file__ext{width:34px;height:34px;flex:none;border-radius:10px;background:var(--lab);display:grid;place-items:center;font:700 10px var(--font-display);text-transform:uppercase}
.tdc-file__body{flex:1;min-width:0}
.tdc-file__name{font:700 13px/17px var(--font-body);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tdc-file__bar{height:4px;border-radius:2px;background:var(--paper-sunk);margin-top:5px;overflow:hidden}
.tdc-file__bar i{display:block;height:100%;background:var(--ink);transition:width .4s}
.tdc-file__x{all:unset;cursor:pointer;width:28px;height:28px;display:grid;place-items:center;border-radius:50%;color:var(--ink-muted);font:700 16px/1 var(--font-body)}
.tdc-file__x:focus-visible{outline:2px solid var(--focus)}

/* ---------- TextArea ---------- */
.tdc-area{display:block;background:var(--paper-raised);border-radius:var(--radius-md);box-shadow:inset 0 0 0 1px var(--line-strong);padding:9px 12px}
.tdc-area:focus-within{box-shadow:inset 0 0 0 2px var(--ink)}
.tdc-area textarea{all:unset;display:block;width:100%;min-height:66px;font:15px/21px var(--font-body);color:var(--ink);margin-top:2px;white-space:pre-wrap}
.tdc-area__foot{display:flex;justify-content:space-between;font:12px/16px var(--font-body);color:var(--ink-muted);margin-top:4px}
.tdc-area.is-error{box-shadow:inset 0 0 0 2px var(--tdc-red-deep)}

/* ---------- ChoiceChips ---------- */
.tdc-choices{display:flex;flex-wrap:wrap;gap:6px}
.tdc-choice{all:unset;cursor:pointer;padding:8px 12px;border-radius:999px;background:var(--paper-raised);box-shadow:inset 0 0 0 1px var(--line-strong);font:700 13px/1 var(--font-body);color:var(--ink);transition:background .2s}
.tdc-choice[aria-pressed="true"]{background:var(--lab-strong);color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--ink)}
.tdc-choice:focus-visible{outline:2px solid var(--focus);outline-offset:2px}

/* ---------- Switch ---------- */
.tdc-switchrow{display:flex;align-items:center;gap:12px;padding:12px 0}
.tdc-switchrow__body{flex:1;min-width:0}
.tdc-switch{all:unset;cursor:pointer;width:46px;height:28px;border-radius:999px;background:var(--line-strong);position:relative;flex:none;transition:background .25s}
.tdc-switch:after{content:"";position:absolute;top:3px;left:3px;width:22px;height:22px;border-radius:50%;background:var(--paper-raised);box-shadow:0 1px 3px rgba(0,0,0,.25);transition:transform .25s cubic-bezier(.3,1.6,.5,1)}
.tdc-switch[aria-checked="true"]{background:var(--ok)}
.tdc-switch[aria-checked="true"]:after{transform:translateX(18px)}
.tdc-switch:focus-visible{outline:2px solid var(--focus);outline-offset:2px}

/* ---------- EmptyState ---------- */
.tdc-empty{text-align:center;padding:20px 20px 8px;display:flex;flex-direction:column;align-items:center}
.tdc-empty img{height:130px;margin-bottom:12px;animation:tdc-rise .7s cubic-bezier(.2,.8,.2,1) both}
.tdc-empty h3{font:700 22px/26px var(--font-display);margin:0}
.tdc-empty p{font:14px/20px var(--font-body);color:var(--ink-muted);margin:6px 0 14px;max-width:250px}

/* ---------- WeekPainter ---------- */
.tdc-week{display:grid;gap:4px;user-select:none;-webkit-user-select:none;touch-action:none}
.tdc-week__hd{font:600 11px/14px var(--font-body);color:var(--ink-muted);text-align:center;padding-bottom:2px}
.tdc-week__hd b{display:block;font:700 15px/17px var(--font-display);color:var(--ink)}
.tdc-week__rl{font:600 10px/12px var(--font-body);color:var(--ink-muted);display:flex;align-items:center}
.tdc-week__cell{all:unset;cursor:pointer;height:34px;border-radius:8px;background:var(--paper-raised);box-shadow:inset 0 0 0 1px var(--line);position:relative;transition:background .15s,transform .15s}
.tdc-week__cell[aria-pressed="true"]{background:var(--lab-strong);box-shadow:inset 0 0 0 1.5px var(--ink);transform:scale(.94)}
.tdc-week__cell:disabled{background:repeating-linear-gradient(45deg,var(--paper-sunk) 0 4px,transparent 4px 8px);box-shadow:none;cursor:default}
.tdc-week__cell.is-booked:after{content:"";position:absolute;left:50%;top:50%;width:8px;height:8px;margin:-4px 0 0 -4px;border-radius:50%;background:var(--ink)}
.tdc-week__cell:focus-visible{outline:2px solid var(--focus);outline-offset:1px}
.tdc-week__legend{display:flex;gap:14px;flex-wrap:wrap;font:12px/16px var(--font-body);color:var(--ink-muted);margin-top:8px}
.tdc-week__legend i{display:inline-block;width:12px;height:12px;border-radius:3px;vertical-align:-2px;margin-right:5px}

/* =================== Admin (desktop) =================== */
.tdc-shell{display:grid;grid-template-columns:220px 1fr;min-height:100%;background:var(--paper)}
.tdc-side{background:var(--paper-raised);box-shadow:inset -1px 0 0 var(--line);padding:18px 12px;display:flex;flex-direction:column;gap:4px}
.tdc-side__logo{display:flex;align-items:center;gap:8px;padding:0 8px 18px;font:700 15px var(--font-display)}
.tdc-side__logo img{height:18px}
.tdc-side__item{all:unset;cursor:pointer;display:flex;align-items:center;gap:10px;padding:10px 10px;border-radius:12px;font:700 14px var(--font-body);color:var(--ink-muted)}
.tdc-side__item svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.tdc-side__item:hover{background:var(--paper-sunk);color:var(--ink)}
.tdc-side__item[aria-current="page"]{background:var(--lab-strong);color:var(--ink)}
.tdc-side__item:focus-visible{outline:2px solid var(--focus);outline-offset:1px}
.tdc-side__count{margin-left:auto;font:700 11px/1 var(--font-body);background:var(--tdc-red-deep);color:#fff;border-radius:999px;padding:4px 7px}
.tdc-side__foot{margin-top:auto;padding:10px 8px 0;border-top:1px solid var(--line);font:12px/16px var(--font-body);color:var(--ink-muted)}
.tdc-side__foot b{display:block;color:var(--ink);font:700 13px var(--font-body)}

/* StatTile */
.tdc-stat{background:var(--paper-raised);border-radius:18px;box-shadow:var(--shadow-card);padding:14px 16px;min-width:0}
.tdc-stat__label{font:600 11px/14px var(--font-display);letter-spacing:.6px;text-transform:uppercase;color:var(--ink-muted)}
.tdc-stat__value{font:700 32px/34px var(--font-display);margin-top:6px;font-variant-numeric:tabular-nums;white-space:nowrap}
.tdc-stat__delta{font:12px/16px var(--font-body);color:var(--ink-muted);margin-top:2px}
.tdc-stat__delta b{color:var(--ink)}
.tdc-stat.is-alert{box-shadow:var(--shadow-card),inset 0 0 0 2px var(--tdc-red-deep)}
.tdc-stat.is-alert .tdc-stat__value{color:var(--tdc-red-deep)}
button.tdc-stat{all:unset;box-sizing:border-box;cursor:pointer;background:var(--paper-raised);border-radius:18px;box-shadow:var(--shadow-card);padding:14px 16px;display:block}
button.tdc-stat:focus-visible{outline:2px solid var(--focus);outline-offset:2px}

/* DataTable */
.tdc-table{width:100%;border-collapse:separate;border-spacing:0;font:13px/18px var(--font-body);color:var(--ink)}
.tdc-table th{text-align:left;font:600 11px/14px var(--font-display);letter-spacing:.6px;text-transform:uppercase;color:var(--ink-muted);padding:10px 12px;border-bottom:1px solid var(--line);white-space:nowrap;background:var(--paper-raised);position:sticky;top:0}
.tdc-table td{padding:10px 12px;border-bottom:1px solid var(--line);vertical-align:middle;white-space:nowrap}
.tdc-table td.wrap{white-space:normal}
.tdc-table tr.is-click{cursor:pointer}
.tdc-table tbody tr:hover td{background:var(--paper)}
.tdc-table tr[aria-selected="true"] td{background:var(--lab-soft)}
.tdc-table td.num,.tdc-table th.num{text-align:right;font-variant-numeric:tabular-nums}
.tdc-table .strong{font-weight:700}
.tdc-tablewrap{background:var(--paper-raised);border-radius:18px;box-shadow:var(--shadow-card);overflow:auto}
.tdc-labtag{display:inline-flex;align-items:center;gap:6px;font:700 12px var(--font-body);white-space:nowrap}
.tdc-labtag i{width:10px;height:10px;border-radius:50%;background:var(--lab);box-shadow:inset 0 0 0 1px rgba(18,18,17,.25)}

/* SelectField & SearchField */
.tdc-select,.tdc-search{display:inline-flex;align-items:center;gap:8px;background:var(--paper-raised);border-radius:12px;box-shadow:inset 0 0 0 1px var(--line-strong);padding:0 12px;height:38px;font:13px var(--font-body);color:var(--ink)}
.tdc-select select{all:unset;font:700 13px var(--font-body);cursor:pointer;padding-right:4px}
.tdc-select span{color:var(--ink-muted)}
.tdc-select:focus-within,.tdc-search:focus-within{box-shadow:inset 0 0 0 2px var(--ink)}
.tdc-search svg{width:16px;height:16px;fill:none;stroke:var(--ink-muted);stroke-width:1.9;stroke-linecap:round}
.tdc-search input{all:unset;font:13px var(--font-body);width:180px}

/* Charts */
.tdc-chart{position:relative;font:12px var(--font-body);color:var(--ink-muted)}
.tdc-chart svg{display:block;width:100%;overflow:visible}
.tdc-chart .grid{stroke:var(--line);stroke-width:1}
.tdc-chart .axis{fill:var(--ink-muted);font:11px var(--font-body)}
.tdc-chart .cross{stroke:var(--ink);stroke-width:1;stroke-dasharray:3 3}
.tdc-legend{display:flex;gap:16px;flex-wrap:wrap;font:12px/16px var(--font-body);color:var(--ink);margin-bottom:8px}
.tdc-legend i{display:inline-block;width:14px;height:3px;border-radius:2px;vertical-align:3px;margin-right:6px}
.tdc-tip{position:absolute;pointer-events:none;background:var(--paper-raised);color:var(--ink);border-radius:10px;box-shadow:var(--shadow-float);padding:8px 10px;font:12px/17px var(--font-body);white-space:nowrap;transform:translate(-50%,-110%);z-index:3}
.tdc-tip b{display:block;font:700 12px var(--font-body);margin-bottom:2px}
.tdc-tip i{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:6px}
.tdc-bars{display:flex;flex-direction:column;gap:8px}
.tdc-bar{display:grid;grid-template-columns:120px 1fr 110px;gap:10px;align-items:center;font:13px var(--font-body)}
.tdc-bar__track{height:14px;border-radius:0 4px 4px 0;position:relative}
.tdc-bar__fill{height:100%;border-radius:0 4px 4px 0;background:var(--series-1,#8B55D6);transform-origin:left;animation:tdc-fill .7s cubic-bezier(.2,.8,.2,1) both}
.tdc-bar__val{text-align:right;font-weight:700;font-variant-numeric:tabular-nums}
.tdc-bar:hover .tdc-bar__fill{filter:brightness(.92)}

/* =================== Motion system =================== */
:root{--dur-fast:150ms;--dur-base:280ms;--dur-slow:520ms;--ease-out:cubic-bezier(.2,.8,.2,1);--ease-spring:cubic-bezier(.3,1.6,.5,1)}
@keyframes tdc-slide-in{from{opacity:0;transform:translateX(18px)}to{opacity:1;transform:none}}
@keyframes tdc-slide-in-left{from{opacity:0;transform:translateX(-18px)}to{opacity:1;transform:none}}
@keyframes tdc-pop{0%{transform:scale(.55)}60%{transform:scale(1.15)}100%{transform:scale(1)}}
@keyframes tdc-wiggle{0%,72%,100%{transform:rotate(0)}78%{transform:rotate(-4deg)}86%{transform:rotate(3deg)}93%{transform:rotate(-1.5deg)}}
@keyframes tdc-shimmer{from{background-position:120% 0}to{background-position:-20% 0}}
@keyframes tdc-ring-pulse{0%{box-shadow:0 0 0 0 rgba(184,35,42,.35)}70%{box-shadow:0 0 0 10px rgba(184,35,42,0)}100%{box-shadow:0 0 0 0 rgba(184,35,42,0)}}
@keyframes tdc-draw{to{stroke-dashoffset:0}}
@keyframes tdc-burst{0%{opacity:0;transform:translate(0,0) rotate(0) scale(.3)}20%{opacity:1}100%{opacity:0;transform:translate(var(--dx),var(--dy)) rotate(var(--rot)) scale(1)}}

/* screen / tab content change: direction-aware */
.tdc-enter{animation:tdc-slide-in var(--dur-base) var(--ease-out) both}
.tdc-enter.from-left{animation-name:tdc-slide-in-left}
/* list stagger: children rise one after another (first 8) */
.tdc-stagger>*{animation:tdc-rise var(--dur-slow) var(--ease-out) both}
.tdc-stagger>*:nth-child(2){animation-delay:50ms}.tdc-stagger>*:nth-child(3){animation-delay:100ms}.tdc-stagger>*:nth-child(4){animation-delay:150ms}
.tdc-stagger>*:nth-child(5){animation-delay:200ms}.tdc-stagger>*:nth-child(6){animation-delay:250ms}.tdc-stagger>*:nth-child(7){animation-delay:300ms}.tdc-stagger>*:nth-child(n+8){animation-delay:350ms}
/* mascot idle: a small shrug every few seconds, pivoting on its feet */
.tdc-wiggle{animation:tdc-wiggle 5s ease-in-out infinite;transform-origin:50% 100%}
/* loading */
.tdc-skeleton{display:block;border-radius:8px;background:linear-gradient(90deg,var(--paper-sunk) 30%,#FBF9F6 50%,var(--paper-sunk) 70%);background-size:250% 100%;animation:tdc-shimmer 1.3s linear infinite}
/* selected tab icon pops; chips and days spring */
.tdc-tab[aria-current="page"] svg{animation:tdc-pop .45s var(--ease-spring)}
.tdc-choice,.tdc-chip{transition:transform var(--dur-fast) var(--ease-spring),background var(--dur-base)}
.tdc-choice:active,.tdc-chip:active,.tdc-day:active,.tdc-slot:active{transform:scale(.94)}
/* deadline under 3 hours: ring breathes red */
.tdc-ring.is-urgent{border-radius:50%;animation:tdc-ring-pulse 1.8s ease-out infinite}

/* SuccessBurst */
.tdc-success{position:absolute;inset:0;z-index:20;display:grid;place-items:center;background:rgba(248,247,245,.92);animation:tdc-rise var(--dur-base) var(--ease-out) both}
.tdc-success__box{position:relative;text-align:center;padding:0 24px}
.tdc-success__check{width:72px;height:72px;border-radius:50%;background:var(--lab-strong);display:grid;place-items:center;margin:0 auto 14px;animation:tdc-pop .55s var(--ease-spring) both}
.tdc-success__check svg{width:36px;height:36px;fill:none;stroke:var(--ink);stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.tdc-success__check path{stroke-dasharray:30;stroke-dashoffset:30;animation:tdc-draw .45s .3s var(--ease-out) forwards}
.tdc-success__title{font:700 26px/28px var(--font-display);margin:0 0 6px}
.tdc-success__img{height:96px;display:block;margin:0 auto 10px;animation:tdc-pop .6s .15s var(--ease-spring) both}
.tdc-success .tdc-burst{position:absolute;left:50%;top:36px;width:22px;height:38px;margin:-19px 0 0 -11px;fill:var(--lab-strong);animation:tdc-burst 1s var(--ease-out) both}
.tdc-motion-calm .tdc-burst,.tdc-motion-calm .tdc-wiggle{animation:none!important}
.tdc-motion-calm .tdc-burst{display:none}
.tdc-motion-calm .tdc-stagger>*{animation-duration:var(--dur-base);animation-delay:0s!important}
.tdc-empty.is-alive img{transform-origin:50% 100%;animation:tdc-rise .7s cubic-bezier(.2,.8,.2,1) both,tdc-wiggle 5s 1s ease-in-out infinite}
.tdc-motion-calm .tdc-empty.is-alive img{animation:tdc-rise .7s both}