/* Train and Cook, the Self room's two tabs (job self-train-cook, the Self
   mockup of 2026-11-05). Out of index.html for the page budget, like
   steady.css; the bench's colour tokens are the only colours used, so the
   night filters still reach it. */

/* Train: the session that is next, open, with the week beside it. */
.tr-top{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;margin:6px 4px 6px}
.tr-top > div{display:flex;flex-direction:column;gap:6px}
.tr-eye{font-family:'Lexend';font-size:15px;color:var(--gold)}
.tr-big{font-family:'Lexend',sans-serif;font-weight:600;font-size:30px;line-height:1;color:var(--white)}
.tr-week{align-items:flex-end;text-align:right}
.tr-week b{font-family:'Lexend',sans-serif;font-weight:600;font-size:22px;color:var(--white)}
.tr-week .tr-eye{color:var(--grey)}
.tr-slot{font-size:13px;color:var(--grey);margin:0 4px 12px}
#trainList .tr-sess{background:var(--panel);border:1px solid var(--line-soft);border-radius:20px;padding:4px 16px}
#trainList .tr-move + .tr-move{border-top:1px solid var(--line-soft)}
.tr-done-btn,.tr-other,.ck-shop-btn,.ck-new{
  display:block;width:100%;min-height:52px;border:0;border-radius:100px;margin-top:14px;
  font:600 15px 'Inter',system-ui,sans-serif;cursor:pointer
}
.tr-done-btn,.ck-new{background:var(--gold);color:var(--ink)}
.tr-done-btn:disabled{background:rgba(var(--gold-rgb),.14);color:var(--gold);cursor:default}
.tr-other,.ck-shop-btn{background:rgba(255,255,255,.05);color:var(--grey);min-height:46px;margin-top:10px}
.ck-shop-btn{color:var(--white)}
.tr-fold{margin-top:22px}
#trainDone{margin-top:8px}

/* Cook: a row a day, the picker under the day tapped. */
.ck-plan{background:var(--panel);border:1px solid var(--line-soft);border-radius:20px;overflow:hidden}
.ck-day{
  display:flex;align-items:center;gap:12px;width:100%;min-height:52px;padding:0 16px;
  background:none;border:0;color:var(--white);text-align:left;font:15px 'Inter',system-ui,sans-serif;cursor:pointer
}
.ck-plan > * + *{border-top:1px solid var(--line-soft)}
.ck-dl{flex:none;width:38px;font-family:'Lexend';font-size:15px;color:var(--grey)}
.ck-day.ck-today .ck-dl{color:var(--gold)}
.ck-tx{flex:1;min-width:0}
.ck-tx.add{color:var(--grey);font-size:14px}
.ck-day.done .ck-tx{color:var(--grey);text-decoration:line-through}
.ck-picker{padding:12px 16px 14px;display:flex;flex-direction:column;gap:10px}
.ck-picker .rsub,.ck-shop .rsub,.ck-form .rsub{font-size:12.5px;color:var(--grey);margin:4px 0 0}
.ck-picker input,.ck-shop input[type="text"],.ck-shop input:not([type]){flex:1;min-width:0}
.ck-shop{padding:10px 4px 4px;display:flex;flex-direction:column;gap:6px}
.ck-item{display:flex;align-items:center;gap:12px;min-height:44px;font-size:15px}
.ck-item input{width:22px;height:22px;accent-color:var(--gold)}
.ck-item.got span{color:var(--grey);text-decoration:line-through}
.ck-mins{margin-left:auto;padding-left:10px;font-family:'Lexend';font-size:12px;color:var(--grey)}
.ck-form{display:flex;flex-direction:column;gap:6px;margin-top:14px}
.ck-form textarea{min-height:220px}
.ck-kj{margin-top:22px;align-items:center}
/* The week's count is drawn in the page's own top line; the bar would say it twice. */
#paneTrain > .ops-bar{display:none}
.tr-how-btn{display:inline-flex;align-items:center;min-height:44px;margin-top:2px;padding:0;border:0;background:none;color:var(--gold);font:500 13px 'Inter',system-ui,sans-serif;cursor:pointer}

/* Stretches, the run and the pictures (body/stretch.js, job
   train-stretch-run). One tile and one line weight for every figure, drawn
   in the bench's own gold so the night filters reach them. */
.st-fig{flex:none;display:block;width:64px;height:64px;border-radius:14px;background:var(--panel-2)}
.st-fig svg{display:block;width:100%;height:100%}
.st-fig polyline{fill:none;stroke-width:4.2;stroke-linecap:round;stroke-linejoin:round}
.st-fig .st-near{stroke:var(--gold)}
.st-fig .st-far{stroke:rgba(var(--gold-rgb),.38)}
.st-fig .st-head{fill:var(--gold)}
.st-fig .st-obj{fill:rgba(var(--gold-rgb),.38)}
.st-fig .st-ground{stroke:var(--line-soft);stroke-width:2;stroke-linecap:round}
.tr-move > .st-fig{order:3;width:52px;height:52px;align-self:flex-start;margin-top:2px}
.st-box{background:var(--panel);border:1px solid var(--line-soft);border-radius:20px}
.st-card{padding:4px 14px}
.st-item{display:flex;align-items:center;gap:12px;min-height:76px;padding:8px 0;width:100%}
.st-card .st-item + .st-item,.st-card .st-item + #runLog .st-log:first-child{border-top:1px solid var(--line-soft)}
.st-tx{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.st-name{align-self:flex-start;min-height:30px;padding:0;border:0;background:none;color:var(--white);font:500 15px 'Inter',system-ui,sans-serif;text-align:left;cursor:pointer;text-decoration:underline;text-decoration-color:rgba(var(--gold-rgb),.35);text-underline-offset:4px}
.st-sub{font-size:12.5px;color:var(--grey);line-height:1.4}
.st-go{background:none;border:0;color:var(--white);text-align:left;cursor:pointer;font:15px 'Inter',system-ui,sans-serif}
.st-go b{font-weight:500}
.st-ring{flex:none;position:relative;width:52px;height:52px;border-radius:50%;border:2px solid rgba(var(--gold-rgb),.3);background:none;display:grid;place-items:center;cursor:pointer;color:var(--gold);font-family:'Lexend';font-size:13px}
.st-ring svg{position:absolute;inset:-2px;width:52px;height:52px;transform:rotate(-90deg);pointer-events:none}
.st-ring circle{fill:none;stroke:var(--gold);stroke-width:2.5;stroke-dasharray:150.8;stroke-dashoffset:150.8;transition:stroke-dashoffset 1s linear}
.st-ring.done{background:var(--gold);border-color:var(--gold);color:var(--ink);font-size:18px}
.st-ring-n{position:relative}
.st-sect{font-family:'Lexend';font-size:13px;color:var(--grey);margin:22px 4px 8px}
.st-log{display:flex;justify-content:space-between;min-height:44px;align-items:center;margin:0;font-size:14px;font-variant-numeric:tabular-nums;border-top:1px solid var(--line-soft)}
.st-log span:last-child{color:var(--grey)}
.st-runcard{text-align:center;padding:18px 14px 14px}
.st-clock{font-family:'Lexend';font-weight:300;font-size:56px;line-height:1.1;font-variant-numeric:tabular-nums}
.st-since{color:var(--grey);font-size:13px;margin:6px 0 0}
@media (prefers-reduced-motion:reduce){.st-ring circle{transition:none}}