/* EddiFitness client area — same look as the main site: black, white,
   silver, frosted-glass panels. Built phone-first. */

@font-face{
  font-family:"Bebas Neue Fallback";
  src:local("Arial"),local("Helvetica Neue"),local("Helvetica"),local("Roboto"),local("Liberation Sans");
  size-adjust:64%;
}

:root{
  --silver:#C0C0C0;
  --soft:#CFCFCF;
  --red:#AF2A2A;
  --green:#3fae6a;
  --line:rgba(255,255,255,.12);
  --glass:rgba(255,255,255,.06);
  --muted:rgba(255,255,255,.6);
  /* Bebas Neue has no Russian letters; those come from Oswald */
  --display:"Bebas Neue","Oswald","Bebas Neue Fallback",sans-serif;
  --text:"Helvetica Neue",Helvetica,Arial,sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:#000;
  color:#fff;
  font-family:var(--text);
  font-size:16px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,p,ul{margin:0}
ul{list-style:none;padding:0}
a{color:inherit}
button,input,textarea,select{font:inherit;color:inherit}
button{cursor:pointer}
[hidden]{display:none !important}
:focus-visible{outline:2px solid #fff;outline-offset:2px}

/* Same page width as the main site: the bar and every screen start and end
   on the same two lines; on very large monitors no wider than --page. */
:root{--gutter:16px;--page:1680px}
@media(min-width:901px){
  :root{--gutter:clamp(24px,3vw,48px)}
}
.app{max-width:calc(var(--page) + 2 * var(--gutter));margin:0 auto;padding:0 var(--gutter) 80px}

/* Lists turn into columns on wide screens (see the end of this file). */
.avatar{
  flex:none;
  width:var(--s,40px);
  height:var(--s,40px);
  border-radius:50%;
  overflow:hidden;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:rgba(255,255,255,.1);
  border:1px solid rgba(255,255,255,.22);
  font-size:calc(var(--s,40px) * .38);
  font-weight:600;
  letter-spacing:.5px;
  color:var(--soft);
  line-height:1;
}
.avatar img{width:100%;height:100%;object-fit:cover;display:block}
.who{display:flex;align-items:center;gap:18px;margin-bottom:8px}
.who .title{margin-bottom:4px}
.who .subtitle{margin-bottom:0;overflow-wrap:anywhere}
.who + .row{margin-top:16px}
.subtitle a,.card-sub a{color:inherit;text-underline-offset:3px}
.me{display:flex;align-items:center;gap:16px;margin-bottom:18px}
.noscript{padding:60px 0;text-align:center}

/* ---------- top bar ---------- */

.bar{
  position:sticky;
  top:12px;
  z-index:20;
  display:flex;
  align-items:center;
  gap:10px;
  margin:12px 0 26px;
  padding:10px 14px;
  background:rgba(5,5,10,.72);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  border:1px solid var(--line);
  border-radius:18px;
}
.bar-logo{display:flex;margin-right:auto}
.bar-links{display:flex;align-items:center;gap:inherit}
.bar a.bar-me{display:flex;padding:0;opacity:1;border-radius:50%}
.bar-logo img{height:34px;width:auto;display:block}
.bar a,.bar button{
  font-family:var(--display);
  font-size:15px;
  letter-spacing:1px;
  text-decoration:none;
  background:none;
  border:0;
  padding:6px 8px;
  opacity:.85;
}
.bar a:hover,.bar button:hover{opacity:1}
.bar .is-current{opacity:1;border-bottom:1px solid var(--silver)}
.lang{
  flex:none;
  display:flex;
  border:1px solid var(--line);
  border-radius:10px;
  overflow:hidden;
}
.lang button{padding:5px 9px;font-size:13px;opacity:.6}
.lang button[aria-pressed=true]{background:#fff;color:#000;opacity:1}

/* ---------- type ---------- */

.title{
  font-family:var(--display);
  font-weight:400;
  font-size:40px;
  letter-spacing:4px;
  line-height:1.1;
  color:var(--soft);
  margin-bottom:6px;
}
.subtitle{color:var(--muted);font-size:14px;margin-bottom:24px}
.section-title{
  font-family:var(--display);
  font-weight:400;
  font-size:20px;
  letter-spacing:3px;
  color:var(--soft);
  margin:30px 0 12px;
}
.muted{color:var(--muted)}
.small{font-size:13px}
.back{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-size:13px;
  letter-spacing:1px;
  text-decoration:none;
  color:var(--muted);
  margin-bottom:14px;
}
.back:hover{color:#fff}

/* ---------- panels, buttons, fields ---------- */

.panel{
  background:var(--glass);
  border:1px solid var(--line);
  border-radius:16px;
  padding:18px;
}
.panel + .panel{margin-top:12px}

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  min-height:44px;
  padding:10px 20px;
  background:transparent;
  border:1px solid rgba(255,255,255,.35);
  border-radius:10px;
  font-size:13px;
  letter-spacing:2px;
  text-transform:uppercase;
  text-decoration:none;
  transition:background .25s,color .25s,border-color .25s;
}
.btn:hover{background:#fff;color:#000;border-color:#fff}
.btn-primary{background:#fff;color:#000;border-color:#fff}
.btn-primary:hover{background:var(--silver);border-color:var(--silver)}
.btn-danger{border-color:rgba(175,42,42,.8);color:#ff9a9a}
.btn-danger:hover{background:var(--red);border-color:var(--red);color:#fff}
.btn-small{min-height:36px;padding:6px 12px;font-size:11px;letter-spacing:1.5px}
.btn-block{width:100%}
.btn[disabled]{opacity:.5;pointer-events:none}
.row{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.row-end{justify-content:flex-end}
.spacer{flex:1}

.field{display:block;margin-bottom:14px}
.field > span{display:block;font-size:12px;letter-spacing:1.5px;text-transform:uppercase;color:var(--muted);margin-bottom:6px}
.input,
.field input,
.field textarea,
.field select{
  width:100%;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.14);
  border-radius:10px;
  padding:11px 14px;
  font-size:16px;
  transition:border-color .25s,background .25s;
}
.input:focus,
.field input:focus,
.field textarea:focus,
.field select:focus{outline:none;border-color:var(--silver);background:rgba(255,255,255,.09)}
textarea{resize:vertical;min-height:84px}
/* a field that starts as one line and grows with what is written in it (sets, an exercise's note) */
textarea.lines{min-height:0;resize:none;overflow:hidden;line-height:1.4}
::placeholder{color:rgba(255,255,255,.4)}
select option{background:#111;color:#fff}
input[type=date]{color-scheme:dark;min-width:0;max-width:100%}
/* iPhone: a date field is drawn wider than its box and pushes into its neighbour unless told otherwise */
@supports (-webkit-touch-callout:none){
  input[type=date]{-webkit-appearance:none;appearance:none;display:block;min-height:46px}
  input[type=date]::-webkit-date-and-time-value{text-align:left}
}
input:-webkit-autofill{
  -webkit-text-fill-color:#fff;
  caret-color:#fff;
  box-shadow:0 0 0 1000px #17171b inset;
  transition:background-color 9999s;
}
.form-error{color:#ff9a9a;font-size:14px;min-height:1.4em;margin:4px 0 10px}
.hint{font-size:13px;color:var(--muted);margin:-6px 0 14px}

/* ---------- sign in ---------- */

.auth{max-width:420px;margin:8vh auto 0}
.auth-logo{display:block;height:64px;width:auto;margin:0 auto 10px}
.auth .title{text-align:center}
.auth .subtitle{text-align:center}
.tabs{display:flex;gap:6px;margin-bottom:18px;padding:4px;border:1px solid var(--line);border-radius:12px}
.tabs button{
  flex:1;
  min-height:40px;
  background:none;
  border:0;
  border-radius:9px;
  font-size:12px;
  letter-spacing:2px;
  text-transform:uppercase;
  opacity:.65;
}
.tabs button[aria-selected=true]{background:#fff;color:#000;opacity:1}
.tabs a{
  flex:1;
  min-height:40px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:9px;
  font-size:12px;
  letter-spacing:2px;
  text-transform:uppercase;
  text-decoration:none;
  opacity:.65;
}
.tabs a[aria-selected=true]{background:#fff;color:#000;opacity:1}
.auth-foot{display:flex;flex-wrap:wrap;justify-content:center;gap:0 22px;margin-top:18px}
.tg-code{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:20px;letter-spacing:2px;padding:6px 12px;border:1px dashed var(--silver);border-radius:10px;user-select:all}
.check-line{display:flex;align-items:flex-start;gap:12px;margin:4px 0 14px;font-size:13px;line-height:1.5;color:rgba(255,255,255,.8);cursor:pointer}
.check-line input{flex:none;width:22px;height:22px;margin:0;accent-color:#fff;cursor:pointer}
.check-line a{color:#fff;text-underline-offset:3px}

/* ---------- week navigation ---------- */

.week{
  display:flex;
  align-items:center;
  gap:8px;
  margin-bottom:16px;
}
.week-label{flex:1;text-align:center;font-family:var(--display);font-size:20px;letter-spacing:2px}
.icon-btn{
  width:44px;
  height:44px;
  flex:none;
  background:transparent;
  border:1px solid var(--line);
  border-radius:10px;
  font-size:18px;
}
.icon-btn:hover{border-color:rgba(255,255,255,.5)}

.day{margin-bottom:10px}
.day-head{
  display:flex;
  align-items:baseline;
  gap:10px;
  padding:8px 2px;
  font-size:13px;
  letter-spacing:1.5px;
  text-transform:uppercase;
  color:var(--muted);
}
.day.is-today .day-head{color:#fff}
.day-head b{font-family:var(--display);font-weight:400;font-size:18px;letter-spacing:2px;color:inherit}
.day-empty{font-size:13px;color:rgba(255,255,255,.3);padding:0 2px 6px}

/* ---------- cards & lists ---------- */

.card{
  display:flex;
  align-items:center;
  gap:12px;
  width:100%;
  text-align:left;
  text-decoration:none;
  background:var(--glass);
  border:1px solid var(--line);
  border-radius:14px;
  padding:14px 16px;
  margin-bottom:8px;
  transition:border-color .25s,background .25s;
}
a.card:hover,button.card:hover{border-color:rgba(255,255,255,.4);background:rgba(255,255,255,.09)}
.card-main{flex:1;min-width:0}
.card-title{font-size:16px;font-weight:600;overflow-wrap:anywhere}
.card-sub{font-size:13px;color:var(--muted)}
.card-arrow{opacity:.5;font-size:18px}

.chip{
  display:inline-flex;
  align-items:center;
  gap:5px;
  padding:3px 9px;
  border:1px solid var(--line);
  border-radius:999px;
  font-size:11px;
  letter-spacing:1px;
  text-transform:uppercase;
  white-space:nowrap;
}
.chip-done{border-color:rgba(63,174,106,.7);color:#8fe0b0}
.chip-warn{border-color:rgba(175,42,42,.8);color:#ff9a9a}
.chip-note{border-color:rgba(192,192,192,.7);color:#fff}
.chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}

.empty{
  text-align:center;
  color:var(--muted);
  padding:36px 16px;
  border:1px dashed var(--line);
  border-radius:16px;
}

/* ---------- workout ---------- */

.note{
  white-space:pre-wrap;
  overflow-wrap:anywhere;
  font-size:15px;
  color:rgba(255,255,255,.85);
}
.label{
  font-size:11px;
  letter-spacing:2px;
  text-transform:uppercase;
  color:var(--muted);
  margin-bottom:6px;
}
.exercise{
  background:var(--glass);
  border:1px solid var(--line);
  border-radius:14px;
  padding:14px 16px;
  margin-bottom:10px;
}
.exercise.is-done{border-color:rgba(63,174,106,.55)}
.exercise-head{display:flex;gap:12px;align-items:flex-start}
.exercise-name{font-size:17px;font-weight:600;overflow-wrap:anywhere}
.exercise-rx{font-family:var(--display);font-size:18px;letter-spacing:2px;color:var(--soft);white-space:pre-line;overflow-wrap:anywhere}
.exercise .note{margin-top:8px;font-size:14px}
/* analogues: "swap exercise" under an exercise's name, and the list to choose from */
.alt{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:10px}
.alt-list{margin-top:6px;overflow-wrap:anywhere}
/* the coach's field: chosen analogues as small labels, then "choose from the library" and a field for another name */
.alts-list{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:10px}
.alt-chip{display:inline-flex;align-items:center;gap:4px;max-width:100%;padding:6px 6px 6px 12px;border:1px solid rgba(255,255,255,.35);border-radius:999px;font-size:14px;color:#fff;overflow-wrap:anywhere}
.alt-chip button{flex:none;width:24px;height:24px;padding:0;background:none;border:0;border-radius:50%;font-size:18px;line-height:1;color:var(--muted);cursor:pointer}
.alt-chip button:hover{color:#fff;background:rgba(255,255,255,.12)}
.alts-add{display:block}
.alts-new{display:flex;gap:8px;min-width:0}
/* what matches the letters typed: under the search field, the first one highlighted (Enter takes it) */
.alts-suggest{margin-top:6px;border:1px solid rgba(255,255,255,.22);border-radius:12px;background:#0d0d0d;max-height:232px;overflow-y:auto}
.alts-suggest[hidden]{display:none}
.alt-option{display:block;width:100%;padding:10px 14px;background:none;border:0;border-bottom:1px solid rgba(255,255,255,.07);text-align:left;color:#fff;cursor:pointer}
.alt-option:last-child{border-bottom:0}
.alt-option b{display:block;font-size:14.5px;font-weight:600;overflow-wrap:anywhere}
.alt-option span{display:block;margin-top:1px;font-size:12px;color:var(--muted);overflow-wrap:anywhere}
.alt-option:hover,.alt-option.is-active{background:rgba(255,255,255,.1)}
.alts-none{margin:0;padding:10px 14px}
.alts-new input{flex:1;min-width:0}
.alts-new .icon-btn{flex:none;font-size:20px}
.picks{display:flex;flex-direction:column;gap:8px;margin-bottom:18px}
.pick{display:flex;align-items:center;gap:12px;padding:12px 14px;border:1px solid var(--line);border-radius:10px;cursor:pointer;overflow-wrap:anywhere}
.pick:has(input:checked){border-color:#fff;background:rgba(255,255,255,.08)}
.pick input{flex:none;width:18px;height:18px;margin:0;accent-color:#fff}
.exercise .input{margin-top:12px}
.exercise-num{
  flex:none;
  width:28px;
  font-family:var(--display);
  font-size:18px;
  color:var(--muted);
  padding-top:1px;
}
.check{
  flex:none;
  width:34px;
  height:34px;
  margin-left:auto;
  appearance:none;
  -webkit-appearance:none;
  border:1px solid rgba(255,255,255,.4);
  border-radius:9px;
  background:transparent;
  cursor:pointer;
  position:relative;
}
.check:checked{background:var(--green);border-color:var(--green)}
.check:checked::after{
  content:"";
  position:absolute;
  left:11px;
  top:5px;
  width:9px;
  height:16px;
  border:solid #fff;
  border-width:0 3px 3px 0;
  transform:rotate(45deg);
}
.video-btn{margin-top:12px}
.video{
  position:relative;
  margin-top:12px;
  border-radius:12px;
  overflow:hidden;
  background:#0b0b0b;
  aspect-ratio:16/9;
}
.video.is-vertical{aspect-ratio:9/16;max-width:280px}
.video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.last{margin-top:8px;font-size:13px;color:var(--muted);overflow-wrap:anywhere}
.last a{margin-left:6px;color:#fff;white-space:nowrap}
.tabs-three{max-width:560px}
.auth-note{margin-bottom:12px;font-size:14px;line-height:1.5}
.auth-note.is-error{border-color:#7a2a2a;color:#ff9a9a}
.client-link{margin-top:22px}
.client-link .row{flex-wrap:wrap;gap:8px 12px}
.client-link-text{flex:1;min-width:0;font-size:14px;overflow-wrap:anywhere;user-select:all}
.own-coach .card-sub + .card-sub{margin-top:2px}
.steps{margin:0;padding-left:20px;font-size:14px;line-height:1.5}
.steps li + li{margin-top:6px}
.goals{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:18px 24px}
.goal b{display:block;font-size:20px;font-weight:600;line-height:1.3}
.goal small{display:block;margin-top:2px;font-size:12px;color:var(--muted)}
details.more{margin-top:14px}
details.more > summary{
  display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:0 14px;
  border:1px solid var(--line);border-radius:10px;
  font-size:12px;letter-spacing:2px;text-transform:uppercase;cursor:pointer;list-style:none;
}
details.more > summary::-webkit-details-marker{display:none}
details.more > summary::after{content:'+';font-size:16px;letter-spacing:0;opacity:.7}
details.more[open] > summary::after{content:'−'}
details.more[open] > summary{margin-bottom:12px}
.grid-habits{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
.field-hint{display:block;margin-top:5px;font-size:12px;color:var(--muted)}
.day-head{display:flex;align-items:center;gap:12px;margin-bottom:20px}
.day-head .title{flex:1;margin:0;text-align:center;font-size:22px}
.day-head .is-ghost{visibility:hidden}
.day-rows{padding-top:6px;padding-bottom:6px}
.day-row{display:flex;align-items:baseline;gap:6px 16px;padding:13px 0;border-top:1px solid var(--line);text-decoration:none}
.day-row:first-child{border-top:0}
.day-date{flex:0 0 112px;font-size:13px;color:var(--muted)}
.day-items{flex:1;min-width:0;display:flex;flex-wrap:wrap;gap:6px 8px}
.day-item{padding:3px 9px;border:1px solid var(--line);border-radius:999px;font-size:13px;white-space:nowrap}
.day-item i{font-style:normal;color:var(--muted)}
.day-item.is-met{border-color:rgba(192,192,192,.7)}
.day-item.is-off{opacity:.75}
.day-note{flex-basis:100%;font-size:13px;color:var(--muted);overflow-wrap:anywhere}
.today-card{margin-bottom:22px}
.chart .target{stroke:rgba(255,255,255,.6);stroke-width:1;stroke-dasharray:5 5}
@media (max-width:600px){
  .tabs-three a{font-size:11px;letter-spacing:1px}
  .day-row{flex-wrap:wrap}
  .day-date{flex-basis:100%}
  .day-head .title{font-size:18px}
}
.lift-last{margin-top:6px;font-size:14px;overflow-wrap:anywhere}
.lift-now{text-align:right;white-space:nowrap}
.lift-now b{display:block;font-size:17px;font-weight:600}
.lift-now small{font-size:12px;color:var(--muted)}
.lift-rows{padding-top:6px;padding-bottom:6px}
.lift-row{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 16px;padding:13px 0;border-top:1px solid var(--line);text-decoration:none}
.lift-row:first-child{border-top:0}
.lift-row:hover .lift-text{text-decoration:underline}
.lift-date{flex:0 0 104px;font-size:13px;color:var(--muted)}
.lift-text{flex:1 1 180px;min-width:0;overflow-wrap:anywhere}
.lift-fig{margin-left:auto;font-weight:600;white-space:nowrap}
.lift-fig.muted{font-weight:400;font-size:13px}
.lift-fig .chip{margin-left:6px}
@media (max-width:600px){
  .lift-date{flex-basis:62px}
  .lift-text{flex-basis:110px}
}
.result-view{margin-top:10px;font-size:15px}
.result-view b{font-weight:600}

.complete{
  position:sticky;
  bottom:12px;
  margin-top:18px;
}
.complete .btn{background:#fff;color:#000;border-color:#fff;min-height:54px;font-size:14px}
.complete.is-done .btn{background:rgba(8,8,12,.9);color:#8fe0b0;border-color:rgba(63,174,106,.7)}

/* ---------- workout editor ---------- */

.edit-exercise{
  border:1px solid var(--line);
  border-radius:14px;
  padding:14px;
  margin-bottom:10px;
}
.edit-exercise-head{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-bottom:10px}
.edit-exercise .field:last-of-type{margin-bottom:10px}
.edit-exercise-head b{font-family:var(--display);font-weight:400;font-size:18px;letter-spacing:2px;margin-right:auto}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:0 12px}

/* ---------- progress & check-ins ---------- */

.card-cta{border-color:rgba(192,192,192,.55);background:rgba(255,255,255,.1);margin-bottom:22px}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:0 12px}

.metric-tabs{display:flex;gap:6px;overflow-x:auto;margin:-2px -2px 16px;padding:2px;scrollbar-width:none}
.metric-tabs::-webkit-scrollbar{display:none}
.metric-tabs button{
  flex:none;
  min-height:36px;
  padding:6px 14px;
  background:none;
  border:1px solid var(--line);
  border-radius:999px;
  font-size:12px;
  letter-spacing:1.5px;
  text-transform:uppercase;
  opacity:.7;
}
.metric-tabs button:hover{opacity:1}
.metric-tabs button[aria-pressed=true]{background:#fff;color:#000;border-color:#fff;opacity:1}

/* ---------- the catalogue of gym exercises (Library → Exercises) ---------- */
.cat-about{margin:-4px 0 14px;line-height:1.5;max-width:760px}
.cat-tools{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.cat-search{flex:1;min-width:0;margin:0}
.cat-lang{flex:none}
.cat-groups.is-off{opacity:.4}
.cat-list{display:grid;grid-template-columns:minmax(0,1fr);gap:8px}
.cat-row{display:flex;align-items:center;gap:10px;padding:11px 12px 11px 16px;border:1px solid var(--line);border-radius:14px;background:var(--glass)}
.cat-row[hidden]{display:none}
.cat-main{flex:1;min-width:0}
.cat-name{font-size:15px;font-weight:600;overflow-wrap:anywhere}
.cat-other{margin-top:2px;font-size:12.5px;color:var(--muted);overflow-wrap:anywhere}
.cat-row .btn,.cat-row .chip{flex:none;white-space:nowrap}
.cat-none{margin-top:12px}
@media(min-width:760px){
  .cat-list{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(min-width:1200px){
  .cat-list{grid-template-columns:repeat(3,minmax(0,1fr))}
}

/* ---------- the grocery basket ---------- */
.basket-page .panel{margin-bottom:16px}
.basket-norm{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.basket-norm div{padding:12px 10px 10px;border:1px solid var(--line);border-radius:12px;background:rgba(255,255,255,.04);min-width:0;text-align:center}
.basket-norm span{display:block;font-size:10.5px;letter-spacing:1px;text-transform:uppercase;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.basket-norm b{display:block;font-family:var(--display);font-weight:400;font-size:30px;line-height:1.15;letter-spacing:1px}
.basket-norm em{display:block;font-style:normal;font-size:11px;color:var(--muted);min-height:14px}
.basket-notargets{font-size:14px;line-height:1.5}
.basket-days-label{margin:18px 0 10px}
.basket-days{display:flex;flex-wrap:wrap;gap:8px}
.basket-days button,.basket-own{
  flex:none;
  width:52px;
  height:52px;
  padding:0;
  border:1px solid rgba(255,255,255,.2);
  border-radius:50%;
  background:transparent;
  color:#fff;
  font-family:var(--display);
  font-size:22px;
  letter-spacing:1px;
  text-align:center;
  cursor:pointer;
  transition:.2s;
}
.basket-days button:hover{border-color:#fff}
.basket-days button[aria-pressed=true],.basket-own.is-on{background:#fff;color:#000;border-color:#fff}
.basket-own{width:76px;border-radius:26px;cursor:text}
.basket-own::placeholder{font-family:var(--text);font-size:12px;letter-spacing:1px;color:var(--muted)}
.basket-own:focus{outline:none;border-color:#fff}

.cover{margin-top:14px}
.cover-head{display:flex;align-items:baseline;gap:10px;margin-bottom:7px}
.cover-head span{flex:none;width:92px;font-size:11px;letter-spacing:1.5px;text-transform:uppercase;color:var(--muted)}
.cover-head b{flex:1;min-width:0;font-family:var(--display);font-weight:400;font-size:24px;line-height:1;letter-spacing:1px}
.cover-head b small{font-family:var(--text);font-size:12px;letter-spacing:0;color:var(--muted)}
.cover-head em{flex:none;font-style:normal;font-size:13px;font-weight:600;color:var(--muted)}
.cover-bar{height:8px;border-radius:4px;background:rgba(255,255,255,.08);overflow:hidden}
.cover-bar i{display:block;height:100%;border-radius:4px;background:#fff;transition:width .35s ease}
.cover-kcal .cover-bar i{background:linear-gradient(90deg,#8f8f8f,#fff)}
.cover-fat .cover-bar i{background:#8f8f8f}
.cover-carbs .cover-bar i{background:#d0413f}
.cover.is-full .cover-head em{color:var(--green)}
.cover.is-over .cover-head em{color:#ff9a9a}
.basket-perday{margin-top:16px}

.basket-groups button{flex:1}
.basket-per100{margin:-6px 0 12px}
.foods{display:grid;grid-template-columns:minmax(0,1fr);gap:8px}
.food{
  display:flex;
  align-items:center;
  gap:10px;
  padding:12px 12px 12px 16px;
  border:1px solid var(--line);
  border-radius:14px;
  background:var(--glass);
  transition:border-color .25s;
}
.food.is-in{border-color:rgba(255,255,255,.45);background:rgba(255,255,255,.09)}
.food-main{flex:1;min-width:0}
.food-name{font-size:15px;font-weight:600;overflow-wrap:anywhere}
.food-macros{margin-top:3px;font-size:12.5px;color:var(--muted)}
.food-macros b{color:#fff;font-weight:600}
.food-have{flex:none;font-family:var(--display);font-size:18px;letter-spacing:1px;color:#fff;white-space:nowrap}
.food-add{flex:none;white-space:nowrap}

.basket-list{padding-top:6px}
.basket-group-name{margin:14px 0 2px;font-size:11px;letter-spacing:2px;text-transform:uppercase;color:var(--muted)}
.basket-row{display:flex;align-items:center;gap:10px;padding:10px 0;border-bottom:1px solid rgba(255,255,255,.07)}
.basket-row .check{width:26px;height:26px;border-radius:8px}
.basket-row-main{flex:1;min-width:0}
.basket-row-name{font-size:15px;font-weight:600;overflow-wrap:anywhere}
.basket-row-macros{margin-top:2px;font-size:12px;color:var(--muted)}
.basket-row.is-done .basket-row-name{text-decoration:line-through;color:var(--muted)}
.basket-row.is-done .stepper{opacity:.5}
.stepper{flex:none;display:flex;align-items:center;border:1px solid rgba(255,255,255,.2);border-radius:999px}
.stepper button{width:34px;height:34px;padding:0;background:none;border:0;border-radius:50%;color:#fff;font-size:20px;line-height:1;cursor:pointer}
.stepper button:hover{background:rgba(255,255,255,.12)}
.stepper-value{min-width:56px;padding:0 2px;text-align:center;font-family:var(--display);font-size:17px;letter-spacing:1px;white-space:nowrap}
.basket-x{flex:none;width:28px;height:28px;padding:0;background:none;border:0;border-radius:50%;color:var(--muted);font-size:20px;line-height:1;cursor:pointer}
.basket-x:hover{color:#fff;background:rgba(255,255,255,.12)}
.basket-total{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px;padding:16px 0 4px}
.basket-total span{font-size:11px;letter-spacing:2px;text-transform:uppercase;color:var(--muted)}
.basket-total b{font-family:var(--display);font-weight:400;font-size:28px;letter-spacing:1px}
.basket-total em{font-style:normal;font-size:13px;color:var(--muted)}
.basket-tools{margin-top:12px}
.basket-note{margin-top:4px;line-height:1.5}
@media(min-width:760px){
  .foods{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(min-width:1200px){
  .foods{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(max-width:520px){
  /* (four in a row would cut the names off: two and two) */
  .basket-norm{grid-template-columns:repeat(2,minmax(0,1fr))}
  .basket-norm div{display:grid;grid-template-columns:1fr auto auto;align-items:baseline;gap:6px;text-align:left;padding:10px 12px}
  .basket-norm em{min-height:0}
}
@media(max-width:420px){
  .basket-norm b{font-size:24px}
  .cover-head span{width:78px}
  .basket-row{flex-wrap:wrap}
  .basket-row-main{flex-basis:calc(100% - 80px)}
  .basket-row .stepper{margin-left:36px}
}

/* ---------- the coach's calorie calculator ---------- */
.tabs-four{max-width:760px}
@media(max-width:600px){
  .tabs-four a{font-size:10.5px;letter-spacing:.5px;padding-left:4px;padding-right:4px}
}
.calc-cols{display:grid;grid-template-columns:minmax(0,1fr);gap:16px}
.calc-cols .panel{margin-bottom:16px}
.calc-row{margin-top:6px}
.calc-row .label{margin-bottom:8px}
.calc-page .check-line{margin:2px 0 0}
.calc-result{margin-bottom:12px}
.calc-kcal{display:flex;align-items:baseline;gap:10px;margin:2px 0 16px}
.calc-kcal b{font-family:var(--display);font-weight:400;font-size:64px;line-height:1;letter-spacing:1px;background:linear-gradient(180deg,#fff 10%,#9a9a9a 95%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:#ddd}
.calc-kcal span{font-size:13px;letter-spacing:1.5px;text-transform:uppercase;color:var(--muted)}
.calc-macros{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-bottom:18px}
.calc-macro{padding:12px 12px 10px;border:1px solid var(--line);border-radius:12px;background:rgba(255,255,255,.04);min-width:0}
.calc-macro span{display:block;font-size:11px;letter-spacing:1.5px;text-transform:uppercase;color:var(--muted)}
.calc-macro b{display:block;font-family:var(--display);font-weight:400;font-size:30px;line-height:1.1;letter-spacing:1px}
.calc-macro b small{font-family:var(--text);font-size:13px;color:var(--muted)}
.calc-macro em{display:block;font-style:normal;font-size:12px;color:var(--muted);overflow-wrap:anywhere}
.calc-lines{margin:0 0 16px}
.calc-lines div{display:flex;justify-content:space-between;gap:12px;padding:7px 0;border-bottom:1px solid rgba(255,255,255,.07);font-size:14px}
.calc-lines dt{color:rgba(255,255,255,.8);min-width:0}
.calc-lines dt small{display:block;font-size:12px;color:var(--muted)}
.calc-lines dd{margin:0;font-weight:600;white-space:nowrap}
.calc-lines .is-sum{border-bottom-color:rgba(255,255,255,.3)}
.calc-lines .is-sum dt,.calc-lines .is-sum dd{color:#fff;font-weight:700}
.calc-split{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:16px}
.calc-split div{padding:12px;border:1px solid var(--line);border-radius:12px;min-width:0}
.calc-split span,.calc-split em{display:block;font-style:normal;font-size:12px;color:var(--muted)}
.calc-split b{display:block;font-family:var(--display);font-weight:400;font-size:28px;line-height:1.15;letter-spacing:1px}
.calc-warn{list-style:none;margin:0 0 16px;padding:12px 14px;border:1px solid rgba(175,42,42,.8);border-radius:12px;background:rgba(175,42,42,.12);display:flex;flex-direction:column;gap:8px;font-size:13.5px;line-height:1.45}
.calc-formulas{margin-bottom:12px}
.calc-formulas > div:not(.label){display:flex;justify-content:space-between;gap:12px;padding:6px 0;font-size:14px;color:var(--muted)}
.calc-formulas > div.is-on{color:#fff}
.calc-formulas > div.is-on span::after{content:" ●";font-size:9px;vertical-align:middle}
.calc-formulas p{margin-top:6px}
.calc-extra{margin-bottom:16px}
.calc-now{margin-top:10px;text-align:center}
.calc-real{font-size:14px;color:var(--muted);margin:4px 0 6px}
.calc-real b{font-family:var(--display);font-weight:400;font-size:40px;line-height:1;letter-spacing:1px;color:#fff}
.calc-real .chip{margin-left:8px;vertical-align:middle}
#calcReal{margin-bottom:12px}
.calc-note{line-height:1.5}
@media(min-width:1000px){
  .calc-cols{grid-template-columns:minmax(0,1.15fr) minmax(320px,.85fr);align-items:start;gap:24px}
  .calc-side{position:sticky;top:96px}
}

/* ---------- progress: the rings of this week ---------- */
.rings{margin-bottom:16px}
.rings-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:14px}
.rings-head .label{margin-bottom:0}
.rings-body{display:flex;align-items:center;gap:26px}
.rings-svg{flex:none;width:148px;height:148px;transform:rotate(-90deg)}
.rings-svg circle{fill:none;stroke-width:10}
.ring-track{stroke:rgba(255,255,255,.08)}
.ring-arc{stroke-linecap:round}
circle.ring-workouts{stroke:#fff}
circle.ring-diary{stroke:#8f8f8f}
circle.ring-steps{stroke:#d0413f}
.rings-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:14px;min-width:0}
.rings-list li{display:flex;gap:10px;align-items:flex-start}
.ring-dot{flex:none;width:10px;height:10px;margin-top:5px;border-radius:50%}
span.ring-workouts{background:#fff}
span.ring-diary{background:#8f8f8f}
span.ring-steps{background:#d0413f}
.rings-name{font-size:12px;letter-spacing:1.5px;text-transform:uppercase;color:var(--muted)}
.rings-value{font-size:13px;color:var(--muted);overflow-wrap:anywhere}
.rings-value b{font-family:var(--display);font-weight:400;font-size:30px;line-height:1.05;letter-spacing:1px;color:#fff}
@media(max-width:380px){
  .rings-body{gap:16px}
  .rings-svg{width:118px;height:118px}
}

/* ---------- progress: measurements at a glance ---------- */
.body-tiles{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:16px}
.body-tile{
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  min-width:0;
  padding:16px 16px 14px;
  overflow:hidden;
  text-align:left;
  color:#fff;
  background:
    radial-gradient(120% 80% at 100% 0%,rgba(255,255,255,.08),rgba(255,255,255,0) 60%),
    var(--glass);
  border:1px solid var(--line);
  border-radius:16px;
  cursor:pointer;
  transition:border-color .3s;
}
.body-tile:hover,.body-tile.is-on{border-color:rgba(255,255,255,.5)}
.body-tile-name{font-size:12px;letter-spacing:1.5px;text-transform:uppercase;color:var(--muted)}
.body-tile-value{margin-top:4px;font-size:14px;color:var(--muted)}
.body-tile-value b{font-family:var(--display);font-weight:400;font-size:44px;line-height:1;letter-spacing:1px;color:#fff}
.spark{display:block;width:calc(100% + 32px);height:44px;margin:8px -16px 6px}
.spark polyline{fill:none;stroke:var(--soft);stroke-width:1.5;vector-effect:non-scaling-stroke}
.spark polygon{fill:rgba(255,255,255,.07)}
.body-tile-when{font-size:12px;color:var(--muted)}

.body-card{margin-bottom:16px}
.body-svg{display:block;width:100%;max-width:380px;margin:0 auto}
.body-shape path,.body-shape ellipse,.body-shape rect{fill:url(#bodyFill)}
.body-band{fill:none;stroke:var(--silver);stroke-width:2;opacity:.75}
.body-band.is-on{stroke:#fff;stroke-width:3;opacity:1}
.body-lead{stroke:rgba(255,255,255,.3);stroke-width:1}
.body-chip{cursor:pointer}
.body-chip rect{fill:#141414;stroke:rgba(255,255,255,.22);stroke-width:1;transition:.2s}
.body-chip text{font-size:11px;fill:#fff}
.body-chip-name{fill:rgba(255,255,255,.6)}
.body-chip-value{font-weight:700}
.body-chip:hover rect{stroke:#fff}
.body-chip.is-on rect{fill:#fff;stroke:#fff}
.body-chip.is-on text,.body-chip.is-on .body-chip-name{fill:#000}

.figure{display:flex;align-items:baseline;flex-wrap:wrap;gap:2px 14px;margin-bottom:10px}
.figure b{font-size:34px;font-weight:600;line-height:1.15}
.figure b small{font-size:16px;font-weight:400;color:var(--muted);margin-left:5px}
.figure span{font-size:13px;color:var(--muted)}

.chart{position:relative;border-radius:8px;touch-action:pan-y;-webkit-user-select:none;user-select:none}
.chart svg{display:block;max-width:100%}
.chart text{font-size:11px;fill:rgba(255,255,255,.6);font-variant-numeric:tabular-nums}
.chart .grid{stroke:rgba(255,255,255,.1);stroke-width:1}
.chart .line{fill:none;stroke:var(--silver);stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
.chart .wash{fill:rgba(192,192,192,.1)}
.chart .dot{fill:#fff;stroke:#101010;stroke-width:2}
.chart .cross{stroke:rgba(255,255,255,.35);stroke-width:1}
.chart-tip{
  position:absolute;
  z-index:2;
  transform:translateX(-50%);
  padding:6px 10px;
  background:#fff;
  color:#000;
  border-radius:10px;
  font-size:12px;
  line-height:1.3;
  white-space:nowrap;
  pointer-events:none;
}
.chart-tip b{display:block;font-size:14px;font-weight:600}
.chart-tip span{opacity:.65}

.compare{display:grid;grid-template-columns:1fr 1fr;gap:12px;max-width:720px}
.compare.is-single{grid-template-columns:minmax(0,300px)}
.compare figure{margin:0;min-width:0}
.compare .field{margin-bottom:10px}
.shot,.thumb{display:block;padding:0;background:#111;border:1px solid var(--line);overflow:hidden;cursor:zoom-in}
.shot{width:100%;aspect-ratio:3/4;border-radius:12px}
.shot img,.thumb img,.slot img{width:100%;height:100%;object-fit:cover;display:block}
.thumbs{display:flex;gap:8px;margin-top:12px}
.thumb{width:66px;aspect-ratio:3/4;border-radius:10px}

.checkin{background:var(--glass);border:1px solid var(--line);border-radius:14px;padding:16px;margin-bottom:10px}
.checkin-head{display:flex;align-items:center;flex-wrap:wrap;gap:8px}
.checkin-head b{font-size:16px;font-weight:600;margin-right:auto}
.stats{display:flex;flex-wrap:wrap;gap:12px 24px;margin-top:12px}
.stat .label{margin-bottom:1px}
.stat b{font-size:16px;font-weight:600}
.stat small{font-size:12px;color:var(--muted);margin-left:6px}
.stat small.of{margin-left:3px}
.reply{margin-top:14px;padding:10px 14px;border-left:2px solid var(--silver);background:rgba(255,255,255,.04);border-radius:0 10px 10px 0}

.rate{display:flex;gap:6px}
.rate button{
  flex:1;
  min-height:44px;
  background:rgba(255,255,255,.05);
  border:1px solid var(--line);
  border-radius:10px;
  font-size:15px;
}
.rate button[aria-pressed=true]{background:#fff;color:#000;border-color:#fff}

.photo-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;max-width:480px}
.slot{
  position:relative;
  aspect-ratio:3/4;
  display:flex;
  align-items:center;
  justify-content:center;
  border:1px dashed rgba(255,255,255,.28);
  border-radius:12px;
  overflow:hidden;
  background:rgba(255,255,255,.03);
}
.slot.has-photo{border-style:solid;border-color:var(--line)}
.slot.is-busy{opacity:.5}
.slot:focus-within{outline:2px solid #fff;outline-offset:2px}
.slot img{position:absolute;inset:0}
.slot input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer}
.slot-plus{font-size:30px;font-weight:200;color:var(--muted);margin-bottom:18px}
.slot-name{
  position:absolute;
  left:0;right:0;bottom:0;
  padding:16px 4px 8px;
  text-align:center;
  font-size:11px;
  letter-spacing:1.5px;
  text-transform:uppercase;
  color:var(--muted);
  pointer-events:none;
}
.slot.has-photo .slot-name{color:#fff;background:linear-gradient(transparent,rgba(0,0,0,.8))}
.slot-x{
  position:absolute;
  top:6px;right:6px;
  z-index:2;
  width:32px;height:32px;
  border-radius:50%;
  background:rgba(0,0,0,.72);
  border:1px solid rgba(255,255,255,.35);
  font-size:18px;
  line-height:1;
}

.lightbox{
  position:fixed;
  inset:0;
  z-index:70;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:16px;
  background:rgba(0,0,0,.94);
  cursor:zoom-out;
}
.lightbox img{max-width:100%;max-height:calc(100% - 96px);border-radius:10px}
.lightbox p{font-size:13px;color:var(--muted)}

/* ---------- calendar ---------- */

.cal{-webkit-user-select:none;user-select:none}
.cal-head,.cal-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:4px}
.cal-head span{
  padding:2px 0 6px;
  text-align:center;
  font-size:11px;
  letter-spacing:1px;
  text-transform:uppercase;
  color:var(--muted);
  overflow:hidden;
}
.cal-day{
  position:relative;
  display:flex;
  flex-direction:column;
  gap:3px;
  min-width:0;
  min-height:68px;
  padding:3px;
  background:rgba(255,255,255,.03);
  border:1px solid var(--line);
  border-radius:9px;
  transition:background .15s,border-color .15s,opacity .15s;
}
.cal-day.is-out{background:none;border-color:rgba(255,255,255,.05)}
.cal-day.is-out .cal-num,.cal-day.is-out .pill{opacity:.45}
.cal-day.is-today{border-color:rgba(255,255,255,.65)}
.cal-day.can-add{cursor:pointer}
.cal-top{display:flex;align-items:center;justify-content:space-between;min-height:22px}
.cal-num{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:22px;
  height:22px;
  padding:0 4px;
  border-radius:999px;
  font-size:12px;
  font-variant-numeric:tabular-nums;
  color:var(--muted);
}
.cal-day.is-today .cal-num{background:#fff;color:#000;font-weight:600}
.cal-add{
  display:flex;
  align-items:center;
  justify-content:center;
  width:22px;
  height:22px;
  border-radius:6px;
  font-size:17px;
  line-height:1;
  text-decoration:none;
  color:var(--muted);
  opacity:.55;
}
.cal-add:hover{background:#fff;color:#000;opacity:1}
@media(hover:hover){
  .cal-add{opacity:0}
  .cal-day:hover .cal-add,.cal-add:focus-visible{opacity:1}
  .cal-day.can-add:hover{border-color:rgba(255,255,255,.35)}
}
.pill{
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:2;
  overflow:hidden;
  padding:3px 4px;
  background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.22);
  border-radius:6px;
  font-size:10px;
  line-height:1.25;
  text-decoration:none;
  overflow-wrap:anywhere;
  cursor:grab;
  touch-action:manipulation;
  -webkit-touch-callout:none;
  -webkit-user-drag:none;
}
a.pill:hover{border-color:rgba(255,255,255,.7)}
.pill-done{background:rgba(63,174,106,.2);border-color:rgba(63,174,106,.7);color:#b9f0d0}
.pill-missed{background:rgba(175,42,42,.2);border-color:rgba(175,42,42,.8);color:#ffb3b3}
.pill.has-news{box-shadow:inset 3px 0 0 #fff;padding-left:7px}
.pill.is-source{opacity:.3}
.pill-ghost{
  position:fixed;
  left:0;
  top:0;
  z-index:80;
  display:block;
  max-width:220px;
  padding:7px 10px;
  background:#fff;
  color:#000;
  border-color:#fff;
  font-size:13px;
  white-space:nowrap;
  text-overflow:ellipsis;
  box-shadow:0 10px 28px rgba(0,0,0,.7);
  pointer-events:none;
  cursor:grabbing;
}
/* while a workout is being moved: free days light up, the rest step back */
.cal.is-dragging .cal-day:not(.can-drop),
.cal.is-picking .cal-day:not(.can-drop){opacity:.4}
.cal.is-dragging .cal-day.can-drop,
.cal.is-picking .cal-day.can-drop{border-style:dashed;border-color:rgba(255,255,255,.6);background:rgba(255,255,255,.07);opacity:1}
.cal.is-picking .cal-day.can-drop{cursor:pointer}
.cal.is-picking .cal-day.can-drop:hover,
.cal-day.is-over{border-style:solid !important;border-color:#fff !important;background:rgba(255,255,255,.24) !important}
.cal.is-dragging{cursor:grabbing}
.cal-hint{margin-top:12px;max-width:860px}
.cal-empty{margin-top:14px}
.agenda{margin-top:22px}
.under-title{margin:-10px 0 20px}
.icon{flex:none}

@media(min-width:760px){
  .cal-head,.cal-grid{gap:8px}
  .cal-head span{font-size:12px;letter-spacing:1.5px}
  .cal-day{min-height:118px;padding:8px;gap:6px;border-radius:12px}
  .cal-num{font-size:13px}
  .pill{-webkit-line-clamp:3;padding:6px 9px;border-radius:8px;font-size:13px}
  .pill.has-news{padding-left:12px}
  .agenda{display:none}
}

/* ---------- conversation under an exercise ---------- */

.thread{margin-top:12px}
.thread.is-open{padding-top:12px;border-top:1px solid var(--line)}
.msg{
  width:fit-content;
  max-width:94%;
  min-width:0;
  margin-bottom:8px;
  padding:8px 12px 10px;
  background:rgba(255,255,255,.06);
  border:1px solid var(--line);
  border-radius:12px 12px 12px 4px;
}
.msg.is-mine{margin-left:auto;background:rgba(255,255,255,.14);border-radius:12px 12px 4px 12px}
.msg-meta{display:flex;align-items:center;gap:8px;margin-bottom:4px;font-size:11px;color:var(--muted)}
.msg-meta b{font-weight:600;color:#fff}
.msg-x{margin:-4px -6px -4px auto;padding:2px 8px;background:none;border:0;font-size:18px;line-height:1;color:var(--muted)}
.msg-x:hover{color:#fff}
/* one's own message: one tick — sent; two green ticks — read (the latest one says so in words) */
.msg-seen{display:inline-flex;align-items:center;gap:4px;color:var(--muted)}
.msg-seen svg{display:block;flex:none}
.msg-seen.is-seen{color:var(--green)}
.msg-seen em{display:none;font-style:normal;font-size:11px}
.msg.is-last-mine .msg-seen em{display:inline}
.msg video{display:block;width:100%;max-width:420px;max-height:460px;margin:4px 0;border-radius:8px;background:#000}
.msg .note{margin-top:4px;font-size:14px}
.msg p{margin:2px 0}
.player{display:flex;align-items:center;gap:8px;width:300px;max-width:100%}
.player-play{
  flex:none;
  display:flex;
  align-items:center;
  justify-content:center;
  width:40px;
  height:40px;
  padding:0;
  background:#fff;
  color:#000;
  border:0;
  border-radius:50%;
}
.player-seek{flex:1;min-width:40px;height:24px;margin:0;accent-color:#fff;cursor:pointer}
.player-time{flex:none;min-width:34px;text-align:right;font-size:12px;font-variant-numeric:tabular-nums;color:var(--muted)}
.player-rate{
  flex:none;
  min-width:44px;
  height:30px;
  padding:0 8px;
  background:none;
  border:1px solid rgba(255,255,255,.4);
  border-radius:999px;
  font-size:12px;
  font-weight:600;
}
.player-rate:hover{background:#fff;color:#000}
.composer{display:flex;gap:8px;margin-top:10px}
.exercise .composer .input{flex:1;min-width:0;margin-top:0}
.composer-send{background:#fff;color:#000;border-color:#fff;display:flex;align-items:center;justify-content:center}
.composer-tools{margin-top:8px}
.composer-tools .btn{cursor:pointer}
.recording{
  display:flex;
  align-items:center;
  gap:10px;
  margin-top:10px;
  padding:8px 8px 8px 14px;
  border:1px solid rgba(224,64,64,.8);
  border-radius:12px;
}
.rec-dot{flex:none;width:10px;height:10px;border-radius:50%;background:#e04040;animation:rec 1s ease-in-out infinite alternate}
.rec-time{font-variant-numeric:tabular-nums}
@keyframes rec{from{opacity:1}to{opacity:.25}}
.upload{display:flex;align-items:center;gap:10px;margin-top:10px;font-size:13px}
.upload-bar{flex:1;min-width:30px;height:4px;border-radius:2px;background:rgba(255,255,255,.14);overflow:hidden}
.upload-bar i{display:block;height:100%;background:#fff;transition:width .3s}
.upload-note{margin-top:4px}

/* ---------- lectures & nutrition ---------- */

.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.bar a.has-dot{position:relative}
.bar a.has-dot::after{
  content:"";
  position:absolute;
  top:3px;
  right:-1px;
  width:7px;
  height:7px;
  border-radius:50%;
  background:#fff;
}
.article{max-width:860px;margin-bottom:14px}
.article .note{font-size:16px;line-height:1.6}
.article .note a{color:#fff;text-underline-offset:3px;overflow-wrap:anywhere}
.article .video-btn{margin-top:0}
.mat-form{max-width:860px}
.mat-form textarea{min-height:220px}
.files{max-width:860px}
.file{
  background:var(--glass);
  border:1px solid var(--line);
  border-radius:14px;
  padding:12px 14px;
  margin-bottom:10px;
}
.file-row{display:flex;align-items:center;flex-wrap:wrap;gap:10px}
.file-row .card-main{flex:1 1 180px}
.file-badge{
  flex:none;
  min-width:46px;
  padding:6px 8px;
  border:1px solid rgba(255,255,255,.35);
  border-radius:8px;
  text-align:center;
  font-size:11px;
  font-weight:600;
  letter-spacing:1px;
  text-transform:uppercase;
  color:var(--soft);
}
.mat-photo,.msg-photo{display:block;padding:0;background:#111;border:1px solid var(--line);border-radius:10px;overflow:hidden;cursor:zoom-in}
.mat-photo{margin-top:12px;max-width:100%}
.mat-photo img{display:block;max-width:100%;max-height:520px}
.mat-video{display:block;width:100%;max-height:520px;margin-top:12px;border-radius:10px;background:#000}
.mat-audio{display:block;width:100%;margin-top:12px}
.msg-photo{margin:4px 0}
.msg-photo img{display:block;max-width:100%;width:auto;max-height:340px}
/* several photos sent together: a row across the conversation */
.msg.msg-album{width:100%;max-width:min(100%,calc(var(--cols,2) * 210px + 28px))}
.album{display:grid;grid-template-columns:repeat(var(--cols,2),minmax(0,1fr));gap:6px;margin:4px 0}
.album-item{position:relative}
.album .msg-photo{display:block;width:100%;margin:0;aspect-ratio:1;overflow:hidden;border-radius:8px}
.album .msg-photo img{width:100%;height:100%;max-height:none;object-fit:cover}
.album-x{
  position:absolute;top:4px;right:4px;width:26px;height:26px;padding:0;
  border:0;border-radius:50%;background:rgba(0,0,0,.6);color:#fff;font-size:17px;line-height:1;
}
.album-x:hover{background:rgba(0,0,0,.85)}
.tabs a.has-dot::after{content:'';width:7px;height:7px;margin-left:7px;border-radius:50%;background:#fff}
.tabs a[aria-selected=true].has-dot::after{background:#000}
@media (max-width:600px){
  .msg.msg-album{max-width:100%}
  .album{grid-template-columns:repeat(min(var(--cols,2),3),minmax(0,1fr))}
}

/* ---------- "what is new" and the chat ---------- */

.count{
  display:inline-block;
  min-width:22px;
  margin-left:6px;
  padding:1px 7px;
  border-radius:999px;
  background:#fff;
  color:#000;
  font-family:var(--text);
  font-size:12px;
  font-weight:600;
  letter-spacing:0;
  text-align:center;
  vertical-align:2px;
}
.feed-item{
  display:flex;
  align-items:center;
  gap:12px;
  padding:10px 14px;
  margin-bottom:6px;
  background:var(--glass);
  border:1px solid rgba(192,192,192,.45);
  border-radius:14px;
  text-decoration:none;
  transition:border-color .25s,background .25s;
}
.feed-item:hover{border-color:rgba(255,255,255,.7);background:rgba(255,255,255,.09)}
.feed-what{font-size:15px;font-weight:600;overflow-wrap:anywhere}
.feed-item.is-warn{border-color:rgba(175,42,42,.7)}
.feed-item.is-quiet{border-color:var(--line)}
.feed-item.is-quiet .feed-what{font-weight:400;color:rgba(255,255,255,.85)}
.feed-none{margin-bottom:6px}
.home-clients .section-title:first-child,.home-feed .section-title:first-child{margin-top:10px}
@media(min-width:1100px){
  .home-cols{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,8fr);gap:0 32px;align-items:start}
}
.chat-page{max-width:860px;margin:0 auto}
.thread.is-chat{margin-top:0;padding-top:0;border-top:0}
.thread.is-chat .msg{max-width:86%}
.thread.is-chat .msg.msg-album{max-width:min(100%,calc(var(--cols,2) * 210px + 28px))}
@media (max-width:600px){
  .thread.is-chat .msg.msg-album{max-width:100%}
}
.thread.is-chat .composer{position:sticky;bottom:0;margin:10px -4px 0;padding:10px 4px;background:#000}
.thread.is-chat .composer .input{margin-top:0;flex:1;min-width:0}
/* the owner's conversation with a coach: two small signs (photo or video, voice) in the row of the message field */
.composer-row{position:sticky;bottom:0;display:flex;align-items:center;gap:2px;margin:10px -4px 0;padding:10px 4px;background:#000}
.thread.is-chat .composer-row .composer{position:static;flex:1;min-width:0;margin:0 0 0 6px;padding:0}
.tool-btn{flex:none;display:flex;align-items:center;justify-content:center;width:32px;height:32px;padding:0;background:none;border:0;border-radius:8px;color:var(--muted);cursor:pointer}
.tool-btn:hover,.tool-btn:focus-visible{color:#fff;background:rgba(255,255,255,.1)}
.tool-btn .icon{width:18px;height:18px}
.chat-empty{margin:6px 0 16px}

/* ---------- programmes ---------- */

.prog-hint{margin:14px 0 0}
.prog-week-head{display:flex;align-items:center;flex-wrap:wrap;gap:10px;margin:26px 0 10px}
.prog-week-head .section-title{margin:0 auto 0 0}
.prog-days{display:grid;gap:8px}
.prog-day{display:grid;grid-template-columns:110px minmax(0,1fr);align-items:center;gap:10px}
.prog-day > span{font-size:13px;color:var(--muted);text-transform:capitalize}
.prog-day select{
  width:100%;
  min-width:0;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.14);
  border-radius:10px;
  padding:10px 12px;
  font-size:15px;
}
.prog-day select:focus{outline:none;border-color:var(--silver)}
@media(min-width:1100px){
  .prog-days{grid-template-columns:repeat(7,minmax(0,1fr))}
  .prog-day{grid-template-columns:1fr;gap:4px}
}

/* ---------- questionnaire ---------- */

.intake-note{max-width:860px;margin:-12px 0 4px}
.intake-part{break-inside:avoid}
.qs{display:grid;grid-template-columns:1fr 1fr;gap:0 14px}
.q{grid-column:1 / -1;min-width:0}
.q-short{grid-column:auto}
.q .field > span{font-size:14px;letter-spacing:0;text-transform:none;color:rgba(255,255,255,.92)}
.q-hint{margin:-2px 0 8px}
.req{font-weight:400;color:#ff9a9a}
.opts{display:flex;flex-wrap:wrap;gap:6px}
.opts button{
  min-height:40px;
  padding:8px 14px;
  background:rgba(255,255,255,.05);
  border:1px solid var(--line);
  border-radius:10px;
  font-size:14px;
  text-align:left;
}
.opts button:hover{border-color:rgba(255,255,255,.5)}
.opts button[aria-pressed=true]{background:#fff;color:#000;border-color:#fff}
.q.is-missing .field > span{color:#ff9a9a}
.q.is-missing input,.q.is-missing textarea{border-color:rgba(175,42,42,.9)}
.q.is-missing .opts button[aria-pressed=false]{border-color:rgba(175,42,42,.7)}
.intake-agree{max-width:860px;margin-top:22px}
.answers{margin:0}
.answer{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:4px 16px;padding:9px 0;border-bottom:1px solid var(--line)}
.answer:first-child{padding-top:0}
.answer:last-child{padding-bottom:0;border-bottom:0}
.answer dt{font-size:13px;color:var(--muted)}
.answer dd{margin:0;white-space:pre-wrap;overflow-wrap:anywhere}
.answer.is-empty dd{color:rgba(255,255,255,.3)}
@media(min-width:1100px){
  .intake{columns:2;column-gap:24px}
  .intake .section-title:first-child{margin-top:24px}
}
@media(max-width:560px){
  .answer{grid-template-columns:1fr;gap:2px}
}

/* ---------- dialogs & toast ---------- */

.dialog-back{
  position:fixed;
  inset:0;
  z-index:50;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:16px;
  background:rgba(0,0,0,.8);
}
.dialog{
  width:100%;
  max-width:440px;
  background:#0b0b0e;
  border:1px solid rgba(255,255,255,.16);
  border-radius:18px;
  padding:22px;
  /* a tall window (a long form, a list of matches) scrolls inside itself, so its buttons can always be reached */
  max-height:calc(100vh - 32px);
  max-height:calc(100dvh - 32px);
  overflow-y:auto;
}
.dialog h2{font-family:var(--display);font-weight:400;font-size:24px;letter-spacing:3px;margin-bottom:10px}
.dialog p{color:rgba(255,255,255,.8);margin-bottom:16px;overflow-wrap:anywhere}
.secret{
  font-family:ui-monospace,Menlo,Consolas,monospace;
  font-size:22px;
  letter-spacing:2px;
  text-align:center;
  padding:14px;
  border:1px dashed var(--silver);
  border-radius:12px;
  margin-bottom:16px;
  user-select:all;
}

.toast{
  position:fixed;
  left:50%;
  bottom:84px;
  z-index:60;
  transform:translate(-50%,20px);
  padding:10px 18px;
  background:#fff;
  color:#000;
  border-radius:999px;
  font-size:13px;
  letter-spacing:1px;
  opacity:0;
  pointer-events:none;
  transition:opacity .25s,transform .25s;
}
.toast.is-on{opacity:1;transform:translate(-50%,0)}
.toast.is-error{background:var(--red);color:#fff}

@media(max-width:560px){
  .title{font-size:34px}
  .grid-2{grid-template-columns:1fr}
  .grid-3{grid-template-columns:1fr 1fr}
  .figure b{font-size:30px}
  .bar{gap:4px;padding:8px 10px}
  .bar a,.bar button{font-size:14px;padding:6px}
  /* five sections in one row: a little tighter */
  .bar-five .bar-links{gap:0;justify-content:space-between}
  .bar-five .bar-links a{font-size:13px;letter-spacing:.4px;padding:6px 4px}
  /* a client has six sections: Settings opens from the round picture instead */
  .bar-six .nav-settings{display:none}
  /* library rows: text on top, buttons underneath */
  .card-tools{flex-wrap:wrap}
  .card-tools .card-main{flex:1 1 100%}
  /* (with a picture in front, the text stays beside it) */
  .card-tools .avatar + .card-main{flex:1 1 calc(100% - 64px);min-width:0}
}
/* phones and narrow tablets: the sections get a row of their own under the logo */
@media(max-width:820px){
  .bar-wide{flex-wrap:wrap}
  .bar-wide .bar-links{order:3;flex:0 0 100%;justify-content:space-around;margin-top:6px;padding-top:4px;border-top:1px solid var(--line)}
  .bar-wide .bar-logo img{height:28px}
}
/* ---------- wide screens: columns instead of one long list ---------- */

.panel-full{max-width:none}
@media(min-width:1000px){
  .grid{
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(360px,1fr));
    gap:10px;
  }
  .grid-wide{grid-template-columns:repeat(auto-fill,minmax(460px,1fr));align-items:start}
  .grid > .card,
  .grid > .exercise,
  .grid > .checkin,
  .grid > .edit-exercise{margin-bottom:0}

  /* the week: days side by side */
  .days{
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(300px,1fr));
    gap:6px 16px;
    align-items:start;
  }
  .days-7{grid-template-columns:repeat(4,minmax(0,1fr))}
  .day-head{flex-wrap:wrap;gap:2px 10px}

  /* forms and settings: sections next to each other */
  .cols{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(380px,1fr));
    gap:0 24px;
    align-items:start;
  }
  .cols .section-title:first-child{margin-top:24px}

  /* single blocks of text keep a readable width */
  main > .panel:not(.panel-full),
  main > form.panel,
  main > .empty,
  main > .card-cta{max-width:860px}
  #editorForm > .panel,
  #editorForm > .field{max-width:860px}
  .complete{max-width:520px;margin-left:auto;margin-right:auto}
  .photo-grid{max-width:none}
}
@media(min-width:1400px){
  .days-7{grid-template-columns:repeat(7,minmax(0,1fr));gap:6px 12px}
  .days-7 .card{padding:12px}
  .days-7 .card-arrow{display:none}
  .days-7 .btn-small{width:100%}
}

@media (prefers-reduced-motion:reduce){
  *{transition:none !important}
  .rec-dot{animation:none}
}

/* Bebas Neue only has capitals; show Russian text the same way */
.bar a,.bar button,.title,.section-title,.week-label,.day-head b,.exercise-rx,.exercise-num,
.edit-exercise-head b,.dialog h2{text-transform:uppercase}

/* ---------- the steps after signing up (a new client) ---------- */

:root{--accent:#c98c74;--accent-light:#f0cdb9}
.start{max-width:460px;margin:0 auto;min-height:calc(100dvh - 150px);display:flex;flex-direction:column}
.start-dots{display:flex;align-items:center;margin:0 2px 26px}
.start-dots span{
  flex:none;width:26px;height:26px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.08);border:1px solid var(--line);
  font-size:13px;line-height:1;color:#000;
}
.start-dots span.is-done{background:#fff;border-color:#fff}
.start-dots span.is-now{background:linear-gradient(180deg,var(--accent-light),var(--accent));border-color:var(--accent);box-shadow:0 0 0 4px rgba(201,140,116,.22)}
.start-dots i{flex:1;height:2px;margin:0 4px;border-radius:2px;background:rgba(255,255,255,.12)}
.start-dots i.is-on{background:#fff}
.start-body{flex:1}
.start-title{font-family:var(--display);font-weight:400;font-size:34px;letter-spacing:2px;line-height:1.12;color:#fff;margin-bottom:8px}
.start-sub{color:var(--muted);font-size:15px;margin-bottom:24px}
.start .field input{border-radius:14px;padding:14px 16px}
.start-seg{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.start-seg-3{grid-template-columns:repeat(3,1fr);gap:8px}
.start-seg button,.start-skip{
  min-height:50px;padding:10px 8px;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);border-radius:14px;
  font-size:15px;transition:background .2s,border-color .2s,color .2s;
}
.start-seg button[aria-pressed=true],.start-skip[aria-pressed=true]{background:linear-gradient(180deg,var(--accent-light),var(--accent));border-color:var(--accent);color:#000;font-weight:600}
.start-skip{display:block;width:100%;margin-top:14px;color:var(--muted)}

.fat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px 10px}
.fat-tile{display:block;padding:0;background:none;border:0;text-align:center}
.fat-tile .torso{
  display:block;width:100%;height:auto;aspect-ratio:1;
  background:radial-gradient(120% 90% at 50% 0%,#262626,#0d0d0d);
  border:1px solid rgba(255,255,255,.16);border-radius:16px;
  transition:border-color .2s,box-shadow .2s;
}
.fat-tile span{display:block;margin-top:7px;font-size:14px;color:var(--muted)}
.fat-tile[aria-pressed=true] .torso{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent),0 0 26px rgba(201,140,116,.35)}
.fat-tile[aria-pressed=true] span{color:var(--accent-light);font-weight:600}

.start-art{display:flex;justify-content:center;margin:26px 0 20px;color:var(--soft)}
.start-icon{width:132px;height:132px}
.start-art-small .start-icon{width:92px;height:92px}
.start-icon .is-accent{fill:var(--accent)}
.start[data-step=bmr] .start-art,.start[data-step=goal] .start-art{color:var(--accent)}
.start-name{text-align:center;font-size:19px;font-weight:600;margin-bottom:8px}
.start-text{text-align:center;color:var(--muted);font-size:15px;min-height:4.5em;margin-bottom:8px}
.start-big{display:flex;align-items:baseline;gap:12px;margin-top:6px}
.start-big b{font-family:var(--display);font-weight:400;font-size:96px;line-height:.95;letter-spacing:2px}
.start-big span{font-size:20px;color:var(--muted)}
.start-meter{height:10px;margin-top:14px;border-radius:10px;background:rgba(201,140,116,.2);overflow:hidden}
.start-meter i{display:block;width:65%;height:100%;border-radius:10px;background:linear-gradient(90deg,var(--accent),var(--accent-light))}

.start-slider{padding:16px 18px 18px;background:var(--glass);border:1px solid var(--line);border-radius:18px}
.start-slider-names{display:flex;justify-content:space-between;gap:6px;margin-bottom:12px;font-size:12px;color:rgba(255,255,255,.4)}
.start-slider-names span{flex:1;text-align:center}
.start-slider-names span:first-child{text-align:left}
.start-slider-names span:last-child{text-align:right}
.start-slider-names .is-on{color:var(--accent-light);font-weight:600}
.start-slider input{display:block;width:100%;height:32px;margin:0;accent-color:var(--accent);cursor:pointer}

.pace-list{display:grid;gap:10px}
.pace{
  display:block;width:100%;padding:14px 16px;text-align:left;
  background:var(--glass);border:1px solid var(--line);border-radius:16px;
  transition:border-color .2s,background .2s;
}
.pace b{display:block;font-size:16px;margin-bottom:3px}
.pace small{font-weight:400;font-size:13px;color:var(--muted);margin-left:6px}
.pace span{display:block;font-size:13px;color:var(--muted)}
.pace[aria-pressed=true]{border-color:var(--accent);background:rgba(201,140,116,.12);box-shadow:0 0 0 1px var(--accent)}

.start-gauge{position:relative;padding:22px 18px 16px}
.start-gauge svg{display:block;width:100%;max-width:330px;margin:0 auto}
.start-gauge path{fill:none;stroke-width:16;stroke-linecap:round}
.gauge-protein{stroke:var(--accent)}
.gauge-fat{stroke:var(--accent-light)}
.gauge-carbs{stroke:var(--silver)}
.start-gauge-num{position:absolute;left:0;right:0;bottom:18px;text-align:center}
.start-gauge-num b{display:block;font-family:var(--display);font-weight:400;font-size:58px;line-height:1;letter-spacing:2px}
.start-gauge-num span{color:var(--muted);font-size:14px}
.start-macros{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:12px}
.start-macro{padding:14px 12px;background:var(--glass);border:1px solid var(--line);border-radius:16px}
.start-macro b{display:block;font-size:22px;line-height:1.1}
.start-macro small{font-size:13px;font-weight:400;color:var(--muted)}
.start-macro span{display:block;font-size:13px;color:var(--muted);margin:2px 0 8px}
.start-macro em{display:inline-block;padding:2px 9px;border-radius:999px;font-style:normal;font-size:12px;font-weight:600;color:#000}
.start-macro-protein em{background:var(--accent)}
.start-macro-fat em{background:var(--accent-light)}
.start-macro-carbs em{background:var(--silver)}
.start-info{margin-top:12px}

.start #startError{margin:14px 0 0}
.start-nav{position:sticky;bottom:0;display:flex;gap:12px;margin:10px -8px 0;padding:22px 8px 14px;background:linear-gradient(180deg,rgba(0,0,0,0),#000 38%)}
.start-back,.start-next{min-height:56px;border-radius:999px;font-size:17px}
.start-back{flex:none;width:56px;background:#0b0b0b;border:1px solid rgba(255,255,255,.3)}
.start-next{flex:1;background:linear-gradient(180deg,var(--accent-light),var(--accent));border:1px solid var(--accent);color:#000;font-weight:600;box-shadow:0 10px 30px rgba(0,0,0,.6)}
.start-next[disabled]{opacity:.5}
.start-line{font-size:15px}
.start-line b{font-size:20px}
.start-coach{margin-bottom:22px}
.start-coach p{margin-bottom:4px}
.start-coach .start-line{margin:8px 0 12px}
@media(max-width:380px){
  .start-title{font-size:30px}
  .start-big b{font-size:78px}
  .start-seg-3 button{font-size:13px}
}
/* the targets in the diary: the same half ring and tiles as at the end of the sign-up steps */
.goal.start-gauge{padding-bottom:14px;text-align:center}
.gauge-box{position:relative;max-width:330px;margin:0 auto}
.goal.start-gauge .start-gauge-num{bottom:0}
.goal.start-gauge .start-gauge-num small{display:inline;margin:0;font-family:var(--text);font-size:16px;letter-spacing:0;color:var(--muted)}
.goal-week{display:block;margin-top:14px;font-size:12px;color:var(--muted)}
.goal-macros{grid-template-columns:repeat(var(--n,3),1fr);margin-bottom:12px}
.goal-macros .start-macro b{font-size:20px}
.goal-macros .start-macro small{display:block;margin-top:8px;font-size:11px;font-weight:400;line-height:1.35;color:var(--muted)}
.goal-rest .goals + .label,.goal-rest .goals + p{margin-top:16px}
.goal-rest > .label:first-child{margin-top:0 !important}

/* the calorie counter (end of the sign-up steps, targets in the diary): its own three colours, a flame, small signs */
:root{--m-protein:#8c5f3c;--m-fat:#b9af8d;--m-carbs:#c4674b;--m-flame:#f4511e}
.start-gauge path{stroke-width:17}
.gauge-protein{stroke:var(--m-protein)}
.gauge-fat{stroke:var(--m-fat)}
.gauge-carbs{stroke:var(--m-carbs)}
.start-gauge-num{bottom:20px}
.start-gauge-num b{font-family:var(--text);font-weight:800;font-size:46px;letter-spacing:0;line-height:1.05}
.start-gauge-num span{font-size:16px;color:var(--soft)}
.macro-icon{display:block;width:26px;height:26px;margin-bottom:8px}
.macro-icon-kcal{width:26px;height:26px;margin:0 auto 2px;color:var(--m-flame)}
.macro-icon .is-hole{fill:#101010}
.macro-icon .is-line{stroke:rgba(0,0,0,.45)}
.macro-icon-protein{color:var(--m-protein)}
.macro-icon-fat{color:var(--m-fat)}
.macro-icon-carbs{color:var(--m-carbs)}
.start-macro b{font-size:20px;font-weight:800}
.start-macro b i{font-style:normal;font-weight:400;color:var(--soft)}
.start-macro span{font-size:15px;color:var(--soft)}
.start-macro em{color:#fff;padding:3px 11px}
.start-macro-protein em{background:var(--m-protein)}
.start-macro-fat em{background:var(--m-fat)}
.start-macro-carbs em{background:var(--m-carbs)}
.goal.start-gauge .start-gauge-num{bottom:0}.start-gauge .macro-icon path{fill:currentColor;stroke:none}
.start-gauge .macro-icon .is-hole{fill:#101010}

/* ---------- a task on a day of the calendar (body measurements) ---------- */
button.cal-num{border:0;background:none;cursor:pointer}
button.cal-num:hover{background:rgba(255,255,255,.2)}
.cal-day.is-today button.cal-num:hover{background:#fff}
.pill-task{border-style:dashed}
button.pill{width:100%;text-align:left;cursor:pointer}
span.pill{cursor:default}
button.card{width:100%;text-align:left;cursor:pointer}
.card-task{border-style:dashed}
.dialog .check-line{margin:10px 0;font-size:15px}

/* ---------- a picture behind a day of the calendar: dumbbells when there is a workout, a tape when measurements
   are asked for; both on one day share the square, left and right. Darkened, so that what is written stays first. */
.cal-day.has-workout,.cal-day.has-task{position:relative;overflow:hidden}
.cal-day.has-workout > *,.cal-day.has-task > *{position:relative;z-index:1}
.cal-day.has-workout::before,.cal-day.has-task::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  background-position:center;
  background-size:cover;
  background-repeat:no-repeat;
  pointer-events:none;
}
.cal-day.has-workout::before{background-image:linear-gradient(180deg,rgba(0,0,0,.34),rgba(0,0,0,.56)),url("/images/calendar/workout.webp")}
.cal-day.has-task::after{background-image:linear-gradient(180deg,rgba(0,0,0,.34),rgba(0,0,0,.56)),url("/images/calendar/measure.webp")}
.cal-day.has-workout.has-task::before{right:50%}
.cal-day.has-workout.has-task::after{left:50%}
.cal-day.has-workout:not(.is-today) .cal-num,.cal-day.has-task:not(.is-today) .cal-num{color:#fff}
.cal-day.has-workout .pill,.cal-day.has-task .pill{background-color:rgba(0,0,0,.55)}
.cal-day.has-workout .pill-done,.cal-day.has-task .pill-done{background-color:rgba(20,70,42,.82)}
.cal-day.has-workout .pill-missed,.cal-day.has-task .pill-missed{background-color:rgba(88,20,20,.82)}

/* the word "Chat" in a client's menu burns red while a message from the coach is not read yet */
.bar a.is-unread{color:#ff4040;opacity:1;text-shadow:0 0 10px rgba(255,64,64,.75)}
.bar a.is-unread.is-current{border-bottom-color:#ff4040}

/* ---------- the owner's list of coaches and invitations: cards of one size, the text on top,
   small buttons in a row along the bottom ---------- */
.own-grid{align-items:stretch;grid-auto-rows:1fr}
.own-coach,.own-invite{flex-wrap:wrap;align-items:flex-start;align-content:space-between}
.own-coach .card-main{flex:1 1 calc(100% - 64px);min-width:0}
.own-invite .card-main{flex:1 1 100%;min-width:0}
.own-actions{flex:1 1 100%;display:flex;flex-wrap:wrap;gap:8px;margin-top:6px}
.own-actions .btn{min-height:30px;padding:4px 11px;font-size:10px;letter-spacing:1px}
@media(max-width:700px){
  .own-actions .btn{min-height:36px}
}