/* THE FELT - 10-train.css
   Your room (30-train.js): the training hub, the diagnosis, the week, the
   spot trainer, Your Room's lineup and the shared-hand replay sheet.

   Colour rules this page keeps: the action code stays sacred - blue, green,
   red and gold appear only on the answer pad and in the coach's own prose.
   Progress (checkmarks, mastery bars, sparklines, the lineup bars) is
   violet chrome, because a finished task is not a call and a mastery bar
   is not money. Grades keep the app's existing grade colours. */

.mt{display:flex;flex-direction:column;gap:16px;padding-bottom:30px;}
.mt-k{font:700 10.5px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--text3);}
.mt-num{font-family:var(--mono);}
.mt-dim{color:var(--text3);font-weight:500;}
.mt-empty{padding:18px 4px;color:var(--text2);font-size:13.5px;line-height:1.6;}
.mt-empty .mt-eh{display:block;font:800 18px var(--disp);color:var(--text);margin-bottom:4px;}
.mt-empty p b{color:var(--text);}
.mt-empty p{margin:6px 0;}

/* ---------- hub header ---------- */
.mt-hero{display:flex;align-items:flex-end;gap:22px;flex-wrap:wrap;padding:10px 2px 2px;}
.mt-title{flex:1 1 360px;min-width:0;}
.mt-eye{font:700 11px var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--accent-hi);}
.mt-title h2{margin:4px 0 8px;font:800 clamp(38px,5.4vw,60px)/.92 var(--disp);letter-spacing:-.03em;
  text-shadow:0 1px 0 #4B3C47,0 2px 0 #3A2E37,0 3px 0 #2A2127,0 4px 0 #1B1519,0 12px 24px rgba(0,0,0,.6);}
.mt-title h2 em{font-style:normal;background:var(--g-ember);-webkit-background-clip:text;background-clip:text;color:transparent;
  text-shadow:none;filter:drop-shadow(0 3px 0 #6A2A14);}
.mt-title p{margin:0;color:var(--text2);font-size:14px;line-height:1.55;max-width:540px;}
.mt-stats{display:grid;grid-template-columns:repeat(4,minmax(112px,1fr));gap:10px;flex:1 1 520px;}
.mt-stat{display:flex;flex-direction:column;gap:2px;padding:12px 14px;border-radius:16px;background:var(--g-surface2);
  border:1px solid var(--border2);box-shadow:var(--shadow);min-width:0;}
.mt-stat b{font:800 32px/1 var(--disp);letter-spacing:-.02em;color:var(--text);}
.mt-stat span{font:600 10.5px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--text2);}
.mt-stat i{font-style:normal;font-size:11.5px;color:var(--text3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}

/* ---------- doors to the rest of Training ---------- */
.mt-tiles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;}
.mt-tile{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:4px;text-align:left;cursor:pointer;
  min-height:118px;padding:16px 16px 14px;border-radius:18px;color:var(--text);overflow:hidden;
  background:linear-gradient(165deg,rgba(255,236,220,.05),rgba(255,236,220,0) 45%),var(--g-surface);
  border:1px solid var(--border2);box-shadow:var(--shadow),0 3px 0 #0A0709;transition:transform .12s var(--ease),border-color .15s;}
.mt-tile::before{content:"";position:absolute;right:-30px;top:-40px;width:130px;height:130px;border-radius:50%;
  background:radial-gradient(closest-side,rgba(138,99,247,.32),transparent);pointer-events:none;}
.mt-tile:hover{border-color:var(--accent-line);transform:translateY(-2px);}
.mt-tile:active{transform:translateY(2px);box-shadow:var(--shadow);}
.mt-tile .ic{font:800 26px/1 var(--disp);background:var(--g-ember);-webkit-background-clip:text;background-clip:text;color:transparent;}
.mt-tile b{font:800 19px/1.1 var(--disp);}
.mt-tile span:not(.ic){font-size:12.5px;color:var(--text2);line-height:1.45;padding-right:18px;}
.mt-tile .arr{position:absolute;right:14px;bottom:12px;font-style:normal;color:var(--accent-hi);font-size:16px;}

/* ---------- diagnosis + week ---------- */
.mt-cols{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:16px;align-items:start;}
.mt-leaks{display:flex;flex-direction:column;gap:10px;}
.mt-leak{display:grid;grid-template-columns:34px minmax(0,1fr);gap:12px;padding:12px;border-radius:14px;
  background:var(--g-well);border:1px solid var(--border);}
.mt-rank{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;font:800 18px var(--disp);color:#fff;
  background:var(--g-accent);box-shadow:var(--hair-strong),0 3px 0 #4A2DB0;}
.mt-lt{font:800 17px/1.2 var(--disp);color:var(--text);}
.mt-le{margin-top:4px;font-size:13px;color:var(--text2);line-height:1.5;}
.mt-le b{color:var(--text);font-family:var(--mono);font-weight:600;}
.mt-le .grade{padding:0 4px;background:rgba(0,0,0,.25);}
.mt-sub{color:var(--text3);}
.mt-lw{margin-top:6px;font-size:12.5px;color:var(--text3);line-height:1.5;}
.mt-lf{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-top:10px;}
.mt-lf .lbtn{margin-left:auto;}
.mt-conf{font:700 10px var(--mono);letter-spacing:.08em;text-transform:uppercase;padding:3px 8px;border-radius:99px;
  border:1px dashed var(--border3);color:var(--text3);}
.mt-conf.firm{border-style:solid;border-color:var(--accent-line);color:var(--accent-hi);background:var(--accent-dim);}
.mt-fchip{font:600 10.5px var(--mono);padding:3px 7px;border-radius:7px;background:var(--surface3);color:var(--text2);}
.mt-rooms{margin-top:14px;padding-top:12px;border-top:1px solid var(--border);}
.mt-rrow{display:grid;grid-template-columns:minmax(0,1fr) auto auto 44px;gap:10px;align-items:center;padding:5px 0;font-size:12.5px;color:var(--text2);}
.mt-rrow b{text-align:right;color:var(--text2);}

.mt-today{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:14px;margin-bottom:12px;
  background:linear-gradient(120deg,rgba(138,99,247,.16),rgba(138,99,247,.04));border:1px solid var(--accent-line);}
.mt-today>div{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1;}
.mt-today b{font:800 19px var(--disp);}
.mt-today span:not(.mt-k):not(.mt-donepill){font-size:12.5px;color:var(--text2);}
.mt-donepill{font:700 11px var(--mono);letter-spacing:.08em;text-transform:uppercase;padding:6px 10px;border-radius:99px;
  background:var(--g-accent);color:#fff;white-space:nowrap;}
.mt-week{display:flex;flex-direction:column;gap:6px;}
.mt-day{display:grid;grid-template-columns:44px minmax(0,1fr);gap:10px;padding:8px 10px;border-radius:12px;border:1px solid transparent;}
.mt-day.today{background:rgba(255,236,220,.035);border-color:var(--border2);}
.mt-day.past{opacity:.62;}
.mt-dd{display:flex;flex-direction:column;align-items:center;justify-content:center;border-radius:10px;background:var(--surface3);padding:4px 0;}
.mt-day.today .mt-dd{background:var(--g-accent);color:#fff;}
.mt-dd b{font:700 11px var(--mono);letter-spacing:.06em;text-transform:uppercase;}
.mt-dd span{font:800 17px/1 var(--disp);}
.mt-db{min-width:0;}
.mt-df{font:700 13.5px var(--ui);margin-bottom:3px;}
.mt-task{display:flex;align-items:center;gap:8px;}
.mt-ck{flex:none;width:22px;height:22px;border-radius:7px;border:1.5px solid var(--border3);background:var(--g-well);cursor:pointer;padding:0;
  position:relative;transition:background .12s,border-color .12s;}
.mt-ck:hover{border-color:var(--accent-hi);}
.mt-task.done .mt-ck{background:var(--g-accent);border-color:#5F3FD2;}
.mt-task.done .mt-ck::after{content:"";position:absolute;left:6.5px;top:2.5px;width:5px;height:10px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg);}
.mt-tt{flex:1;min-width:0;display:flex;justify-content:space-between;gap:8px;align-items:baseline;border:0;background:transparent;
  color:var(--text2);font:500 12.5px var(--ui);text-align:left;padding:4px 2px;cursor:pointer;border-radius:6px;}
.mt-tt:hover{color:var(--text);}
.mt-tt span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.mt-tt em{font-style:normal;font:500 11px var(--mono);color:var(--text3);flex:none;}
.mt-task.done .mt-tt span{color:var(--text3);text-decoration:line-through;text-decoration-color:var(--border3);}
.mt-planfoot{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:10px;}
.mt-planfoot .hint{margin:0;flex:1 1 200px;}

/* ---------- spot families ---------- */
.mt-spothead{display:flex;gap:16px;align-items:center;flex-wrap:wrap;margin-bottom:6px;}
.mt-spothead p{flex:1 1 360px;margin:0;font-size:13px;color:var(--text2);line-height:1.55;}
.mt-kb{font:600 10px var(--mono);letter-spacing:.08em;text-transform:uppercase;opacity:.8;margin-left:6px;}
.mt-group{margin-top:14px;}
.mt-group>.mt-k{margin-bottom:8px;}
.mt-fams{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:10px;}
.mt-fam{position:relative;display:flex;flex-direction:column;align-items:stretch;gap:5px;text-align:left;cursor:pointer;padding:12px 12px 10px;
  border-radius:14px;color:var(--text);background:var(--g-surface2);border:1px solid var(--border2);box-shadow:var(--hair),0 3px 0 #0A0709;
  transition:transform .08s,border-color .15s;min-height:44px;}
.mt-fam:hover{border-color:var(--accent-line);}
.mt-fam:active{transform:translateY(3px);box-shadow:var(--hair);}
.mt-fam.leak{border-color:var(--accent-line);background:linear-gradient(160deg,rgba(138,99,247,.14),rgba(138,99,247,0) 60%),var(--g-surface2);}
.mt-fam b{font:800 15px/1.15 var(--disp);padding-right:64px;}
.mt-fw{font-size:11.5px;color:var(--text3);line-height:1.4;}
.mt-lk{position:absolute;top:10px;right:10px;font:700 9px var(--mono);letter-spacing:.1em;text-transform:uppercase;padding:2px 6px;border-radius:6px;
  background:var(--accent);color:#fff;}
.mt-mrow{display:flex;align-items:center;gap:8px;margin-top:4px;}
.mt-mb{flex:1;height:6px;border-radius:99px;background:var(--g-well);overflow:hidden;}
.mt-mb i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,var(--accent-lo),var(--accent-hi));}
.mt-mv{font:600 11px var(--mono);color:var(--text2);min-width:26px;text-align:right;}
.mt-srow{display:flex;align-items:center;gap:8px;}
.mt-spark{width:80px;height:22px;flex:none;overflow:visible;}
.mt-spark polyline{fill:none;stroke:var(--accent-hi);stroke-width:1.6;vector-effect:non-scaling-stroke;stroke-linejoin:round;}
.mt-spark .par{stroke:var(--border3);stroke-width:1;stroke-dasharray:2 3;vector-effect:non-scaling-stroke;}
.mt-sn{font:500 10.5px var(--mono);color:var(--text3);}

/* ---------- Your Room ---------- */
.mt-yh{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin-bottom:14px;}
.mt-yh>div{flex:1 1 380px;min-width:0;}
.mt-yq{margin:0 0 10px;font-size:14px;line-height:1.5;color:var(--text);}
.mt-meter{display:flex;gap:18px;flex-wrap:wrap;}
.mt-meter div{display:flex;flex-direction:column;}
.mt-meter b{font:800 22px var(--disp);}
.mt-meter span{font:600 10px var(--mono);letter-spacing:.1em;color:var(--text3);text-transform:uppercase;}
.mt-mix{display:flex;flex-direction:column;gap:7px;}
.mt-mx{display:grid;grid-template-columns:130px minmax(0,1fr) 70px;gap:4px 12px;align-items:center;}
.mt-mn{font:600 13px var(--ui);}
.mt-mbar{display:flex;height:10px;border-radius:99px;background:var(--g-well);overflow:hidden;}
.mt-mbar i{display:block;height:100%;}
.mt-mbar .b{background:var(--accent-lo);}
.mt-mbar .a{background:var(--accent-hi);}
.mt-mp{font:600 12px var(--mono);text-align:right;}
.mt-mp em{font-style:normal;color:var(--accent-hi);}
.mt-mw{grid-column:2/4;font-size:12px;color:var(--text3);line-height:1.45;margin-bottom:3px;}

/* ---------- the trainer ---------- */
#mtTrainer{scroll-margin-top:84px;}
.mt-tr-head{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:10px;}
.mt-tr-head b{font:800 20px var(--disp);}
.mt-dots{display:flex;gap:4px;flex:1;min-width:120px;}
.mt-dots i{flex:1;max-width:30px;height:7px;border-radius:99px;background:var(--surface3);}
.mt-dots i.cur{background:var(--accent-hi);box-shadow:0 0 10px var(--accent-glow);}
.mt-dots i.gA{background:#79D6A0;} .mt-dots i.gB{background:#C8E27A;} .mt-dots i.gC{background:#F6C667;} .mt-dots i.gF{background:#FF7E82;}
.mt-prog{font:600 12px var(--mono);color:var(--text2);}
.mt-tr-body{display:grid;grid-template-columns:minmax(0,1fr) 420px;gap:16px;align-items:start;}
.mt-tr-felt{border-radius:20px;background:radial-gradient(120% 90% at 50% 0%,rgba(255,236,220,.04),transparent 60%),var(--g-well);
  border:1px solid var(--border);box-shadow:inset 0 2px 16px rgba(0,0,0,.6);}
.mt-tr-felt .table-stage{padding:54px 76px 66px;max-width:820px;}
.mt-tr-side{display:flex;flex-direction:column;gap:12px;min-width:0;}
.mt-spotname{display:flex;flex-direction:column;gap:2px;}
.mt-spotname b{font:800 18px var(--disp);}
.mt-spotname span{font-size:13px;color:var(--text2);}
.mt-line{display:flex;flex-direction:column;gap:4px;padding:10px 12px;border-radius:12px;background:var(--g-well);border:1px solid var(--border);
  font-size:12.5px;color:var(--text2);line-height:1.5;}
.mt-ln b{color:var(--text);}
.mt-lh{font:700 11px var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--text3);margin-right:8px;}
.mt-pot{font:600 10.5px var(--mono);color:var(--gold-hi);margin-left:4px;text-transform:none;letter-spacing:0;}
.mt-cd{display:inline-block;font:700 12px var(--mono);padding:0 3px;margin:0 1px;border-radius:4px;background:#F4EEE3;letter-spacing:0;text-transform:none;}
.mt-cd.ss{color:#1D222A;} .mt-cd.sh{color:#D0343A;} .mt-cd.sd{color:#2668C8;} .mt-cd.sc{color:#1F8A52;}
.mt-pad .lp-main{grid-template-columns:repeat(auto-fit,minmax(110px,1fr));}
.mt-pad .abtn{height:58px;font-size:17px;}
.mt-pad .abtn:disabled,.mt-pad .szbtn:disabled{cursor:default;filter:saturate(.55) brightness(.8);transform:none;}
.mt-pad .abtn.rec:disabled,.mt-pad .szbtn.rec:disabled{filter:none;}
.mt-pad .lp-sizes{gap:7px;}
.mt-pad .szbtn{min-width:64px;flex:1 1 64px;max-width:none;}
.mt-ans{padding:14px;border-radius:16px;background:var(--g-surface2);border:1px solid var(--border2);box-shadow:var(--shadow);
  animation:viewin .18s var(--ease);}
.mt-ans-top,.mt-sum-top{display:flex;align-items:center;gap:12px;flex-wrap:wrap;}
.mt-ans-top .lbtn{margin-left:auto;}
.mt-bigg{font-size:34px;line-height:1;padding:6px 10px;background:rgba(0,0,0,.28);border-radius:12px;}
.mt-ans-s b{font:800 26px var(--disp);}
.mt-ans-s>span{font:600 12px var(--mono);color:var(--text3);margin-left:3px;}
.mt-you{font-size:12.5px;color:var(--text2);}
.mt-why{margin:10px 0 8px;font-size:13px;color:var(--text);line-height:1.55;}
.mt-coach{font-size:13px;color:var(--text2);line-height:1.6;border-top:1px solid var(--border);padding-top:10px;}
.mt-coach p{margin:6px 0;}
.mt-sum{padding:6px 2px;}
.mt-sumlist{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:6px 14px;margin:14px 0;font-size:12.5px;color:var(--text2);}
.mt-si{display:flex;align-items:center;gap:8px;}
.mt-si .grade{padding:0 5px;background:rgba(0,0,0,.25);}
.mt-sumbtn{display:flex;gap:8px;flex-wrap:wrap;}

/* ---------- Live log: share per hand ---------- */
#paSess .sess-row.mt-sh{grid-template-columns:34px auto 1fr auto 56px auto;cursor:pointer;}
#paSess .sess-row.mt-sh:hover{background:rgba(255,236,220,.03);}
.mt-rowsh{border:1px solid var(--border2);background:var(--g-surface2);color:var(--accent-hi);font:600 10.5px var(--mono);
  padding:4px 7px;border-radius:7px;cursor:pointer;min-height:26px;}
.mt-rowsh:hover{border-color:var(--accent-line);}

/* ---------- replay sheet ---------- */
.mt-rpsheet .sheet-card.mt-rp{width:min(900px,100%);}
.mt-rp .sheet-head h3{margin:2px 0 0;}
.mt-rpmeta{font-size:12.5px;color:var(--text2);margin-bottom:8px;}
.mt-rpmeta .grade{padding:0 5px;background:rgba(0,0,0,.25);}
.mt-rptable{border-radius:18px;background:var(--g-well);border:1px solid var(--border);box-shadow:inset 0 2px 16px rgba(0,0,0,.6);}
.mt-rptable .table-stage{padding:50px 76px 62px;max-width:760px;}
.mt-rpcap{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin:12px 2px 8px;min-height:24px;}
.mt-rpst{font:700 10.5px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--accent-hi);}
.mt-rptx{font:700 16px var(--disp);color:var(--text);}
.mt-rpgr{font:600 12px var(--mono);color:var(--text2);display:flex;gap:6px;align-items:baseline;flex-wrap:wrap;}
.mt-rpgr .grade{padding:0 5px;background:rgba(0,0,0,.25);}
.mt-rpgr em{font:500 12px var(--ui);font-style:normal;color:var(--text3);flex-basis:100%;}
.mt-rpctl{display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
.mt-rpctl .lbtn{min-height:40px;}
.mt-rpstep{margin-left:auto;font:600 12px var(--mono);color:var(--text3);}
.mt-rplog{margin-top:12px;max-height:180px;overflow:auto;display:flex;flex-direction:column;gap:1px;
  padding:6px;border-radius:12px;background:var(--g-well);border:1px solid var(--border);}
.mt-rpl{display:block;text-align:left;border:0;background:transparent;color:var(--text2);font:500 12.5px var(--ui);padding:5px 8px;border-radius:7px;cursor:pointer;}
.mt-rpl:hover{background:rgba(255,236,220,.04);}
.mt-rpl.head{font:700 11px var(--mono);letter-spacing:.04em;color:var(--text3);margin-top:4px;}
.mt-rpl.hero{color:var(--text);}
.mt-rpl.on{background:var(--accent-dim);color:#fff;box-shadow:inset 2px 0 0 var(--accent-hi);}
.mt-rpl .grade{padding:0 4px;background:rgba(0,0,0,.25);font-size:12px;}
.mt-rpfoot{display:flex;align-items:center;gap:10px;margin-top:12px;flex-wrap:wrap;}
.mt-rpfoot .hint{margin:0;flex:1 1 240px;}
.mt-rpfoot input{flex:1 1 260px;min-width:0;font:500 12px var(--mono);}

/* ---------- widths ---------- */
@media(max-width:1180px){
  .mt-tr-body{grid-template-columns:minmax(0,1fr);}
  .mt-tr-felt .table-stage{max-width:720px;}
}
@media(max-width:1000px){
  .mt-cols{grid-template-columns:minmax(0,1fr);}
  .mt-tiles{grid-template-columns:repeat(2,minmax(0,1fr));}
  .mt-stats{grid-template-columns:repeat(2,minmax(0,1fr));}
}
@media(max-width:760px){#mtTrainer{scroll-margin-top:118px;}}
@media(max-width:620px){
  .mt{gap:12px;}
  .mt-title h2{font-size:40px;}
  .mt-stat{padding:10px 12px;}
  .mt-stat b{font-size:26px;}
  .mt-tile{min-height:0;padding:12px;}
  .mt-tile span:not(.ic){display:none;}
  .mt-tile b{font-size:16px;}
  .mt-tr-felt .table-stage,.mt-rptable .table-stage{padding:44px 10px 52px;}
  .mt-tr-head b{font-size:17px;}
  .mt-dots{order:5;flex-basis:100%;}
  .mt-pad .abtn{height:54px;font-size:16px;}
  .mt-pad .lp-main{grid-template-columns:1fr 1fr;}
  .mt-pad .lp-main .abtn.allin{grid-column:1/-1;}
  .mt-leak{grid-template-columns:minmax(0,1fr);}
  .mt-rank{width:28px;height:28px;font-size:15px;}
  .mt-mx{grid-template-columns:96px minmax(0,1fr) 58px;gap:3px 8px;}
  .mt-mw{grid-column:1/4;}
  .mt-rrow{grid-template-columns:minmax(0,1fr) auto 44px;}
  .mt-rrow span:nth-child(3){display:none;}
  .mt-rpctl .lbtn.sm{display:none;}
  .mt-ck{width:26px;height:26px;}
  .mt-task.done .mt-ck::after{left:8.5px;top:4px;}
  .mt-tt{min-height:40px;}
  .mt-fams{grid-template-columns:minmax(0,1fr);}
}