/* NotBroken — Train. Shares the sheet, chip, toast and button styles with Abstain (abstain.css is loaded first). */
.tr-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: .4rem .2rem 0; }
.tr-head__eyebrow { font-size: 11px; letter-spacing: 3px; text-transform: uppercase; color: var(--primary); font-weight: 700; margin: 0 0 6px; }
.tr-head h1 { font-size: clamp(1.5rem, 4.5vw, 2rem); line-height: 1.12; }
.tr-head p { margin: 6px 0 0; color: rgba(242,239,234,.78); font-size: 14px; line-height: 1.5; max-width: 520px; }

/* ---- body map ---- */
.bm { padding: 14px 8px 12px; }
.bm-figs { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; max-width: 480px; margin: 0 auto; }
@media (min-width: 400px) { .bm { padding: 14px 12px 12px; } }
.bm-fig { width: 100%; height: auto; display: block; filter: drop-shadow(0 12px 22px rgba(0,0,0,.35)); }
/* each trainable area is a <g class="bm-part"> of muscles (.m, with their fibre lines); heat and selection colour the whole group */
.bm-part { cursor: pointer; outline: none; touch-action: manipulation; }
.bm-part .m { fill: rgba(255,255,255,.16); stroke: rgba(8,12,22,.6); stroke-width: .45; stroke-linejoin: round; transition: fill .2s, stroke .2s, fill-opacity .2s; }
.bm-fig--front .bm-part .m { fill: url(#bmg-front); } .bm-fig--back .bm-part .m { fill: url(#bmg-back); }
.bm-sh { pointer-events: none; } .bm-fig--front .bm-sh { fill: url(#bmsh-front); } .bm-fig--back .bm-sh { fill: url(#bmsh-back); }   /* belly shading over each muscle */
.bm-fib { fill: none; stroke: rgba(10,14,26,.26); stroke-width: .3; stroke-linecap: round; pointer-events: none; }
.bm-fib--td { stroke: rgba(10,14,26,.14); }
.bm-hit { fill: none; stroke: transparent; stroke-width: 12; pointer-events: stroke; cursor: pointer; }
.bm-part:hover .m { fill: rgba(132,192,160,.75); stroke: #F2EFEA; stroke-width: .9; }
.bm-part:focus-visible .m { stroke: var(--terra); stroke-width: 1.4; }
.bm-part.heat-1 .m { fill: rgba(242,208,107,.9); } .bm-fig--front .bm-part.heat-1 .m { fill: url(#bmh1-front); } .bm-fig--back .bm-part.heat-1 .m { fill: url(#bmh1-back); }
.bm-part.heat-2 .m { fill: rgba(232,163,117,.95); } .bm-fig--front .bm-part.heat-2 .m { fill: url(#bmh2-front); } .bm-fig--back .bm-part.heat-2 .m { fill: url(#bmh2-back); }
.bm-part.heat-3 .m { fill: rgba(224,122,47,1); } .bm-fig--front .bm-part.heat-3 .m { fill: url(#bmh3-front); } .bm-fig--back .bm-part.heat-3 .m { fill: url(#bmh3-back); }
.bm-part.is-picked .m { stroke: #F2EFEA; stroke-width: 1.1; }
.bm-part.is-selected .m { stroke: var(--primary); stroke-width: 1.3; }
.bm-part.is-selected:not(.heat-1):not(.heat-2):not(.heat-3) .m { fill: rgba(132,192,160,.9); }
.bm-fig--front .bm-part.is-selected:not(.heat-1):not(.heat-2):not(.heat-3) .m { fill: url(#bms-front); } .bm-fig--back .bm-part.is-selected:not(.heat-1):not(.heat-2):not(.heat-3) .m { fill: url(#bms-back); }
/* scenery: the deep layer behind the muscles, muscles that are not an area, tendons, bones under the skin, head, hands and feet */
.bm-body { fill: #333c4d; stroke: none; pointer-events: none; }
.bm-static { fill: rgba(255,255,255,.15); stroke: rgba(8,12,22,.55); stroke-width: .45; stroke-linejoin: round; pointer-events: none; }
.bm-fig--front .bm-static { fill: url(#bmg-front); } .bm-fig--back .bm-static { fill: url(#bmg-back); }
.bm-fig .bm-static.bm-deep { fill: #3f495b; }
.bm-td { fill: #8c98a8; stroke: rgba(8,12,22,.4); stroke-width: .4; stroke-linejoin: round; pointer-events: none; }
.bm-td.bm-fascia { fill: rgba(150,162,178,.45); }
.bm-bv { fill: #a6a59e; stroke: rgba(8,12,22,.5); stroke-width: .4; pointer-events: none; }
.bm-bv--shin { fill: #8f97a2; } .bm-bv--patella { fill: #9a9fa4; }
.bm-eye { fill: rgba(28,34,48,.55); pointer-events: none; }
.bm-navel { fill: rgba(20,26,38,.7); pointer-events: none; }
.bm-line { fill: none; stroke: rgba(6,10,18,.4); stroke-width: .8; stroke-linecap: round; pointer-events: none; }
.bm-line--soft { stroke: rgba(6,10,18,.3); stroke-width: .4; }
.bm-line--faint { stroke: rgba(6,10,18,.14); stroke-width: .4; }
.bm-scenery { pointer-events: none; }
/* the face: lips, lids, eyes, nostrils; the scalp's rim */
.bm-fig .bm-static.bm-lip { fill: #7f8798; } .bm-fig .bm-static.bm-lid { fill: #8f9bad; }
.bm-td.bm-td--tip { fill: #9ba6b5; } .bm-td.bm-td--bone { fill: #9aa2ad; }
.bm-nail { fill: #a9b4c3; stroke: rgba(8,12,22,.4); stroke-width: .3; }
.bm-concha { fill: rgba(14,18,28,.45); } .bm-fib.bm-fib--soft { stroke: rgba(10,14,26,.18); }
.bm-sclera { fill: #c6ccd4; } .bm-eyesh { fill: rgba(10,14,24,.3); } .bm-iris { fill: #3a4c62; } .bm-pupil { fill: #0b0f17; } .bm-glint { fill: #fff; fill-opacity: .85; }
.bm-lash { fill: none; stroke: rgba(6,10,18,.72); stroke-width: .5; stroke-linecap: round; }
.bm-nostril { fill: rgba(10,14,24,.72); }
.bm-rim.bm-rim--head { stroke-width: 2.6; stroke: rgba(12,16,28,.3); }
.bm-rim { fill: none; stroke: rgba(12,16,28,.32); stroke-width: 4; pointer-events: none; }
/* skeleton layer: hidden until the Bones toggle; muscles turn to glass so the bones show through */
.bm-bones { display: none; pointer-events: none; }
.bm-bone { fill: #e6e0d2; fill-opacity: .92; stroke: rgba(30,34,44,.75); stroke-width: .45; stroke-linejoin: round; }
.bm-bone--hole { fill: #2c3444; fill-opacity: .92; stroke: rgba(30,34,44,.45); } .bm-fig--front .bm-bone--hole { fill: url(#bmo-front); } .bm-fig--back .bm-bone--hole { fill: url(#bmo-back); }
.bm-bone--cart { fill: #9fb3c6; fill-opacity: .75; }
.bm-boneline { fill: none; stroke: rgba(60,58,52,.7); stroke-width: .45; stroke-linecap: round; }
.bm-boneline--faint { stroke: rgba(60,58,52,.42); }
.bm-boneline--ridge { stroke: rgba(60,58,52,.6); stroke-width: .7; }
.bm-boneline--suture { stroke: rgba(60,58,52,.5); stroke-width: .3; stroke-linejoin: round; }
.bm-bsh { pointer-events: none; } .bm-fig--front .bm-bsh { fill: url(#bmsh-front); } .bm-fig--back .bm-bsh { fill: url(#bmsh-back); }   /* roundness on the bones */
.bm-bone.bm-bone--small { stroke-width: .3; }
.bm-bone.bm-bone--shade { fill: #1a1f2b; fill-opacity: .17; stroke: none; }
.bm-bone.bm-bone--tooth { fill: #efeadf; fill-opacity: .97; stroke: rgba(60,58,52,.55); stroke-width: .24; }
.bm-bone.bm-bone--foramen { fill: #3b3934; fill-opacity: .6; stroke: none; } .bm-bone.bm-bone--septum { fill: #b9b2a3; fill-opacity: .8; stroke: none; }
.bm-bone.bm-bone--deep { fill: #d9d2c2; fill-opacity: .3; stroke: none; }
.bm-bone.bm-bone--void { fill: #10141c; fill-opacity: .92; stroke: none; }
.bm--bones .bm-bones { display: block; }
.bm--bones .bm-part .m { fill-opacity: .16; stroke: rgba(242,239,234,.3); stroke-width: .4; }
.bm--bones .bm-part.heat-1 .m, .bm--bones .bm-part.heat-2 .m, .bm--bones .bm-part.heat-3 .m, .bm--bones .bm-part.is-selected .m, .bm--bones .bm-part:hover .m { fill-opacity: .5; }
.bm--bones .bm-static { fill-opacity: .12; stroke-opacity: .4; } .bm--bones .bm-body { fill: rgba(255,255,255,.04); } .bm--bones .bm-line { stroke-opacity: .25; }
.bm--bones .bm-fib, .bm--bones .bm-td, .bm--bones .bm-bv, .bm--bones .bm-eye, .bm--bones .bm-navel { opacity: .2; }
.bm--bones .bm-scenery { opacity: .2; } .bm--bones .bm-face { opacity: .45; } .bm--bones .bm-sclera, .bm--bones .bm-iris, .bm--bones .bm-pupil, .bm--bones .bm-glint, .bm--bones .bm-eyesh, .bm--bones .bm-lash, .bm--bones .bm-nostril, .bm--bones .bm-nail { fill: #a9b4c3; stroke: rgba(8,12,22,.4); stroke-width: .3; }
.bm-concha { opacity: 0; } .bm--bones .bm-rim, .bm--bones .bm-sh { opacity: 0; }
.tr-vids { margin: 14px 0 0; } .tr-vids .nb-btn { text-decoration: none; display: inline-flex; align-items: center; gap: 8px; } .tr-vids svg { width: 18px; height: 18px; }
.bm-layers { display: flex; justify-content: center; gap: 4px; margin: 0 0 8px; }
.bm-layers button { font: inherit; font-size: 12.5px; font-weight: 600; letter-spacing: .3px; padding: 6px 14px; min-height: 32px; border-radius: 999px; border: 1px solid rgba(255,255,255,.16); background: rgba(255,255,255,.06); color: rgba(242,239,234,.75); cursor: pointer; }
.bm-layers button[aria-pressed="true"] { background: rgba(132,192,160,.22); border-color: rgba(132,192,160,.5); color: #F2EFEA; }
.bm-caption { fill: rgba(242,239,234,.55); font-size: 11px; letter-spacing: 2px; text-transform: uppercase; font-weight: 700; font-family: 'Inter', sans-serif; }
.bm-legend { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 14px; font-size: 11.5px; color: rgba(242,239,234,.65); margin: 6px 0 10px; }
.bm-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 5px; vertical-align: -1px; background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.3); }
.bm-pick { min-height: 58px; border-top: 1px solid rgba(255,255,255,.1); padding-top: 12px; }
.bm-pick__hint { font-size: 13.5px; color: rgba(242,239,234,.75); line-height: 1.5; text-align: center; }
.bm-pick__name { font-family: 'Playfair Display', Georgia, serif; font-size: 1.25rem; font-weight: 700; }
.bm-pick__meta { font-size: 12.5px; color: rgba(242,239,234,.72); margin: 2px 0 10px; }
.bm-pick__btns { display: flex; gap: 8px; flex-wrap: wrap; }
.bm-sel { margin-top: 12px; display: flex; flex-direction: column; gap: 10px; }
.bm-sel .ab-chip { font-size: 12.5px; padding: 6px 12px; min-height: 34px; }
.bm-log { width: 100%; min-height: 50px; font-size: 16px; border-radius: 14px; box-shadow: 0 10px 30px -14px rgba(132,192,160,.9); }

/* ---- week ---- */
.tr-week__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.tr-week__title { font-size: 1.2rem; margin-top: 2px; }
.tr-bar { margin: 8px 0; }
.tr-bar__head { display: flex; justify-content: space-between; font-size: 13px; color: rgba(242,239,234,.85); margin-bottom: 4px; }
.tr-bar__head b { font-weight: 600; color: var(--text-light); }
.tr-bar__head small { font-weight: 500; color: rgba(242,239,234,.6); }
.tr-bar.is-done .tr-bar__head b { color: var(--good); }
.tr-bar__track { height: 8px; border-radius: 999px; background: rgba(255,255,255,.1); overflow: hidden; }
.tr-bar__track i { display: block; height: 100%; border-radius: 999px; transition: width .4s ease; }
.tr-bar__track i.c { background: linear-gradient(90deg, #7FB3FF, #5C6FD6); }
.tr-bar__track i.s { background: linear-gradient(90deg, #FFB86B, #E07A2F); }
.tr-bar__track i.f { background: linear-gradient(90deg, #84C0A0, #5B8A72); }
.tr-week__cover { font-size: 12.5px; color: rgba(242,239,234,.7); margin: 8px 0 0; }
.tr-week__cover b { color: var(--text-light); }
.tr-tips { margin-top: 10px; display: flex; flex-direction: column; gap: 6px; }
.tr-tips p { margin: 0; font-size: 13.5px; line-height: 1.5; color: rgba(242,239,234,.85); padding: 8px 10px; border-radius: 10px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.08); }
.tr-tips a { color: var(--primary); }

/* ---- sessions ---- */
.tr-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.tr-row { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; font: inherit; color: inherit; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.08); border-radius: 12px; padding: 8px 10px; cursor: pointer; }
.tr-row:hover { background: rgba(255,255,255,.1); }
.tr-row:focus-visible { outline: 3px solid var(--terra); outline-offset: 2px; }
.tr-row__icon { flex: 0 0 34px; width: 34px; height: 34px; border-radius: 10px; display: flex; align-items: center; justify-content: center; color: var(--ink); }
.tr-row__icon svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.tr-row__icon--strength { background: linear-gradient(135deg, #FFB86B, #E07A2F); }
.tr-row__icon--cardio { background: linear-gradient(135deg, #7FB3FF, #5C6FD6); }
.tr-row__icon--flex { background: linear-gradient(135deg, #84C0A0, #5B8A72); }
.tr-row__main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.tr-row__title { font-size: 14px; font-weight: 600; }
.tr-row__sub { font-size: 12px; color: rgba(242,239,234,.68); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tr-row__edit { width: 16px; height: 16px; fill: none; stroke: rgba(242,239,234,.5); stroke-width: 2; flex: 0 0 auto; }

/* ---- log sheet ---- */
.tr-types .ab-chip { display: inline-flex; align-items: center; gap: 6px; }
.tr-types .ab-chip svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.tr-areas .ab-chip { font-size: 12.5px; padding: 6px 11px; min-height: 34px; }
.tr-more { margin: 4px 0 0; }
.tr-more summary { cursor: pointer; font-size: 13px; color: rgba(242,239,234,.75); padding: 6px 0; }
.tr-area__last { font-size: 12.5px; color: rgba(242,239,234,.7); margin: 0 0 10px; }
.tr-moves { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.tr-moves li { display: flex; flex-direction: column; font-size: 13.5px; line-height: 1.45; padding: 8px 10px; border-radius: 10px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.08); }
.tr-moves b { font-weight: 600; }
.tr-moves span { color: rgba(242,239,234,.72); font-size: 12.5px; }
.tr-tools { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.tr-tools a.nb-btn { text-decoration: none; }