/* HUNDREDLOCKED — coach console v4
   Dark athletic app, mobile-first at 390px. Space Grotesk display / Inter body.
   One accent (ember) + consistent session-type color system. Vanilla CSS, no deps. */

:root {
  --bg: #0b0b0d;
  --card: #16161a;
  --card-2: #1d1d22;
  --line: #ffffff14;
  --fg: #f4f2ed;
  --dim: #f4f2ed99;
  --faint: #f4f2ed55;
  --accent: #c8501e;
  --red: #d64541;
  --amber: #dfa32c;
  --green: #4caf7d;
  --t-throw: #c8501e;
  --t-str: #d8c49a;
  --t-mob: #8aa88f;
  --t-rest: #6f6f76;
  --disp: "Space Grotesk", "Inter", sans-serif;
  --sans: "Inter", -apple-system, sans-serif;
  --r: 16px;
  --safe-b: env(safe-area-inset-bottom, 0px);
  /* v8 safe-area fix: installed-PWA top row must clear the iPhone status bar.
     Shell padding = max(notch inset, 16px) + 20px so nothing interactive sits
     within ~0.5cm of the clock/wifi/battery row. */
  --safe-t: max(env(safe-area-inset-top), 16px);
}

* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body { background: var(--bg); }
body { font-family: var(--sans); color: var(--fg); line-height: 1.5; -webkit-font-smoothing: antialiased; }

.hidden { display: none !important; }

.wordmark { font-family: var(--disp); font-weight: 700; letter-spacing: 0.14em; font-size: 20px; }
.wordmark span { color: var(--accent); }
.kicker { font-family: var(--disp); font-size: 11px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--dim); }
.type-tag { font-family: var(--disp); font-size: 12px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent); }

.demo-banner { background: var(--card-2); color: var(--dim); text-align: center; font-size: 11.5px; padding: calc(env(safe-area-inset-top, 0px) + 7px) 14px 7px; border-bottom: 1px solid var(--line); }

/* ---------- shell ---------- */
#app { max-width: 430px; margin: 0 auto; min-height: 100vh; }
#screens { padding: calc(var(--safe-t) + 20px) 16px calc(96px + var(--safe-b)); }
.scr { display: none; animation: scrIn 220ms ease; }
.scr.active { display: block; }
@keyframes scrIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

.tabbar {
  position: fixed; bottom: 0; left: 50%; transform: translateX(-50%);
  width: 100%; max-width: 430px; display: flex; z-index: 50;
  background: #121215f2; backdrop-filter: blur(12px);
  border-top: 1px solid var(--line); padding: 8px 4px calc(8px + var(--safe-b));
}
.tab {
  flex: 1; background: none; border: none; cursor: pointer; color: var(--faint);
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  font-family: var(--disp); font-size: 10px; font-weight: 600; letter-spacing: 0.04em;
  padding: 4px 0; transition: color 150ms ease, transform 100ms ease;
}
.tab:active { transform: scale(0.92); }
.tab svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.tab.active { color: var(--accent); }

/* ---------- generic components ---------- */
.card {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r);
  padding: 16px; margin-top: 12px; transition: transform 100ms ease;
}
.card.tappable { cursor: pointer; }
.card.tappable:active { transform: scale(0.98); }
.card h3 { font-family: var(--disp); font-size: 13px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--dim); margin-bottom: 10px; }

.row-between { display: flex; justify-content: space-between; align-items: center; gap: 12px; }

.btn {
  display: inline-block; border: none; cursor: pointer; border-radius: 999px;
  font-family: var(--disp); font-weight: 600; font-size: 15px;
  padding: 13px 26px; background: var(--card-2); color: var(--fg);
  border: 1px solid var(--line); transition: transform 110ms ease, filter 110ms ease;
}
.btn:active { transform: scale(0.96); filter: brightness(1.2); }
.btn.primary { background: var(--accent); color: #fff; border-color: transparent; }
.btn.small { font-size: 13px; padding: 8px 16px; }
.btn.wide { width: 100%; }
.btn.big { flex: 1; font-size: 16px; padding: 17px 0; border-radius: 16px; }
.btn.big.done { background: var(--accent); color: #fff; border-color: transparent; }

.linklike { background: none; border: none; font-family: var(--sans); font-size: 14px; font-weight: 500; color: var(--fg); opacity: 0.6; cursor: pointer; padding: 6px 0; }
.linklike:hover, .linklike:active { opacity: 1; }

label { display: block; font-size: 12px; font-weight: 500; color: var(--dim); margin: 14px 0 5px; }
input, select, textarea {
  width: 100%; padding: 12px 13px; font-size: 15px; font-family: var(--sans);
  color: var(--fg); background: var(--card-2); border: 1px solid #ffffff24; border-radius: 12px;
}
input:focus, select:focus, textarea:focus { outline: 2px solid var(--accent); outline-offset: -1px; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
input[type="range"] { padding: 0; height: 34px; accent-color: var(--accent); border: none; background: transparent; }
output { font-weight: 700; }

.seg-toggle { display: flex; background: var(--card-2); border: 1px solid var(--line); border-radius: 999px; padding: 3px; }
.seg-toggle button {
  flex: 1; border: none; background: none; color: var(--dim); cursor: pointer;
  font-family: var(--disp); font-weight: 600; font-size: 13px; padding: 8px 0; border-radius: 999px;
}
.seg-toggle button.on { background: var(--fg); color: var(--bg); }

.seg { display: flex; gap: 8px; }
.seg button {
  flex: 1; padding: 13px 0; font-size: 15px; font-family: var(--disp); font-weight: 700;
  background: var(--card-2); color: var(--fg); border: 1px solid var(--line); border-radius: 12px;
  cursor: pointer; transition: transform 100ms ease;
}
.seg button:active { transform: scale(0.94); }
.seg button.on { background: var(--fg); color: var(--bg); }
.seg.lights button.on[data-n="1"], .seg.lights button.on[data-n="2"] { background: var(--red); color: #fff; }
.seg.lights button.on[data-n="3"] { background: var(--amber); color: #221a00; }
.seg.lights button.on[data-n="4"], .seg.lights button.on[data-n="5"] { background: var(--green); color: #05130c; }
.seg.pain { flex-wrap: wrap; }
.seg.pain button { flex: 1 1 30%; font-size: 13px; font-weight: 600; }
.seg.pain button.on:not([data-loc=""]) { background: var(--red); color: #fff; }

.flag { border-radius: 12px; padding: 12px 15px; font-size: 13.5px; margin-top: 14px; }
.flag.warn { background: #dfa32c1f; color: var(--amber); border: 1px solid #dfa32c44; }
.flag.stop { background: #d6454126; color: #ff9d99; border: 1px solid #d6454155; font-weight: 500; }

.tag { display: inline-block; font-family: var(--disp); font-size: 10.5px; font-weight: 600; letter-spacing: 0.06em; padding: 3px 10px; border-radius: 999px; }
.tag.pain { background: var(--red); color: #fff; }
.tag.missed { background: #ffffff1a; color: var(--dim); }
.tag.t-throwing { background: #c8501e2b; color: #ff9d6d; }
.tag.t-strength { background: #d8c49a26; color: var(--t-str); }
.tag.t-mobility { background: #8aa88f26; color: #a9c9ae; }
.tag.t-rest { background: #ffffff12; color: var(--dim); }

.ready-dot { width: 11px; height: 11px; border-radius: 50%; flex: 0 0 auto; background: #ffffff2b; display: inline-block; }
.ready-dot.r-red { background: var(--red); }
.ready-dot.r-yellow { background: var(--amber); }
.ready-dot.r-green { background: var(--green); }

.empty { margin-top: 14px; font-size: 13.5px; color: var(--faint); }

/* ---------- login ---------- */
#screen-login { display: flex; min-height: 100vh; align-items: center; justify-content: center; padding: calc(var(--safe-t) + 20px) 20px 20px; }
.login-box { width: 100%; max-width: 340px; text-align: center; }
.login-box .wordmark { font-size: 26px; }
.login-sub { color: var(--dim); font-size: 13px; margin: 6px 0 30px; }
.login-box label { text-align: left; }
.login-box input { text-align: center; font-size: 19px; letter-spacing: 0.15em; }
.login-box .btn { width: 100%; margin-top: 16px; }
.login-box .linklike { margin-top: 20px; }
.login-err { margin-top: 12px; font-size: 13.5px; color: var(--red); }

/* ---------- header / date strip ---------- */
.scr-head { display: flex; justify-content: space-between; align-items: center; padding: 6px 0 2px; }
.scr-head .who { font-family: var(--disp); font-weight: 600; font-size: 14px; }
.scr-head .who small { display: block; font-size: 11px; color: var(--dim); font-weight: 500; }
.phase-badge { font-family: var(--disp); font-size: 10.5px; font-weight: 700; letter-spacing: 0.08em; padding: 5px 12px; border-radius: 999px; background: #c8501e2b; color: #ff9d6d; }

.date-strip { display: flex; align-items: center; justify-content: space-between; margin-top: 14px; }
.date-strip b { font-family: var(--disp); font-size: 17px; font-weight: 600; }
.date-strip button { background: var(--card); border: 1px solid var(--line); color: var(--fg); width: 38px; height: 38px; border-radius: 12px; font-size: 17px; cursor: pointer; }
.date-strip button:active { transform: scale(0.92); }

/* ---------- block / phase strip ---------- */
.block-strip { display: flex; gap: 5px; margin-top: 12px; }
.block-seg { flex: 1; }
.block-seg .bs-label { font-family: var(--disp); font-size: 9.5px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--faint); margin-bottom: 4px; text-align: center; }
.block-seg.cur .bs-label { color: var(--accent); }
.block-ticks { display: flex; gap: 3px; }
.block-ticks i { flex: 1; height: 5px; border-radius: 3px; background: #ffffff1a; }
.block-ticks i.past { background: var(--fg); opacity: 0.55; }
.block-ticks i.cur { background: var(--accent); }

/* ---------- hero ---------- */
.hero-card {
  margin-top: 14px; border-radius: 20px; padding: 22px 20px;
  background: linear-gradient(160deg, #1e1e24, #131317);
  border: 1px solid var(--line); position: relative; overflow: hidden; cursor: pointer;
  transition: transform 110ms ease;
}
.hero-card:active { transform: scale(0.98); }
.hero-card::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: var(--accent); }
.hero-type { font-family: var(--disp); font-size: clamp(28px, 8vw, 36px); font-weight: 700; letter-spacing: -0.01em; text-transform: uppercase; line-height: 1.05; margin: 6px 0 2px; }
.hero-sub { font-size: 13.5px; color: var(--dim); }
.hero-chips { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
.chip { font-family: var(--disp); font-size: 11.5px; font-weight: 600; padding: 5px 12px; border-radius: 999px; background: #ffffff14; }
.chip.rpe { background: var(--accent); color: #fff; }
.chip.s-done { background: #4caf7d2b; color: #9fd8b4; }
.chip.s-skip { background: #dfa32c26; color: var(--amber); }
.hero-card .btn { width: 100%; margin-top: 18px; }

/* rings + gauge row */
.rings-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 12px; }
.ring-card { text-align: center; }
.ring { width: 84px; height: 84px; border-radius: 50%; margin: 6px auto; display: grid; place-items: center; position: relative; }
.ring::before { content: ""; position: absolute; inset: 7px; border-radius: 50%; background: var(--card); }
.ring b { position: relative; font-family: var(--disp); font-size: 19px; font-weight: 700; }
.ring small { position: relative; display: block; font-size: 9px; color: var(--dim); }
.ring-cap { font-size: 11.5px; color: var(--dim); }
.streak-line { margin-top: 8px; font-family: var(--disp); font-size: 12px; font-weight: 600; color: var(--amber); }

.recap { display: flex; align-items: center; gap: 10px; margin-top: 12px; padding: 12px 16px; border-radius: 12px; background: var(--card); border: 1px solid var(--line); font-size: 13px; }
.recap.missed { color: var(--amber); background: #dfa32c14; border-color: #dfa32c33; }
.recap b { font-weight: 600; }

.bar-track { flex: 1; height: 6px; border-radius: 999px; background: #ffffff1c; overflow: hidden; }
.bar-fill { height: 100%; width: 0; border-radius: 999px; background: var(--accent); transition: width 600ms cubic-bezier(.22,1,.36,1); }
.bar-fill.comp { background: var(--green); }
.bar-row { display: flex; align-items: center; gap: 12px; margin-top: 10px; font-size: 12px; color: var(--dim); white-space: nowrap; }

/* ---------- plan tab ---------- */
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; margin-top: 10px; }
.cal-dw { text-align: center; font-family: var(--disp); font-size: 10px; font-weight: 600; color: var(--faint); padding: 4px 0; }
.cal-cell { aspect-ratio: 1; border: none; border-radius: 10px; background: transparent; color: var(--fg); font-size: 12.5px; cursor: pointer; position: relative; padding-top: 4px; font-family: var(--sans); }
.cal-cell:not(:empty):active { background: #ffffff14; }
.cal-cell.other { opacity: 0.22; }
.cal-cell.today { outline: 1.5px solid var(--fg); outline-offset: -1.5px; }
.cal-cell.sel { background: #ffffff14; }
.cal-cell .dot { position: absolute; left: 50%; transform: translateX(-50%); bottom: 5px; width: 7px; height: 7px; border-radius: 50%; }
.dot.t-throwing { background: var(--t-throw); }
.dot.t-strength { background: var(--t-str); }
.dot.t-mobility { background: var(--t-mob); }
.dot.t-rest { background: var(--t-rest); opacity: 0.4; }
.dot.dim { opacity: 0.35; }
.dot.hollow { background: transparent !important; border: 1.5px solid; }
.dot.hollow.t-throwing { border-color: var(--t-throw); }
.dot.hollow.t-strength { border-color: var(--t-str); }
.dot.hollow.t-mobility { border-color: var(--t-mob); }
.cal-head { display: flex; justify-content: space-between; align-items: center; margin-top: 8px; }
.cal-head b { font-family: var(--disp); font-size: 15px; font-weight: 600; }
.cal-head button { background: var(--card); border: 1px solid var(--line); color: var(--fg); width: 34px; height: 34px; border-radius: 10px; cursor: pointer; }
.cal-legend { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 10px; font-size: 10.5px; color: var(--dim); }
.cal-legend i { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 4px; }

/* stacked day blocks */
.day-block { border-radius: 14px; padding: 14px 16px; margin-top: 10px; border: 1px solid var(--line); background: var(--card); border-left: 4px solid var(--t-rest); cursor: pointer; }
.day-block:active { transform: scale(0.99); }
.day-block.b-throwing { border-left-color: var(--t-throw); }
.day-block.b-strength { border-left-color: var(--t-str); }
.day-block.b-mobility { border-left-color: var(--t-mob); }
.day-block .db-head { display: flex; justify-content: space-between; align-items: center; }
.day-block .db-title { font-family: var(--disp); font-weight: 600; font-size: 15px; }
.day-block .db-meta { font-size: 12px; color: var(--dim); margin-top: 2px; }
.day-block .caret { color: var(--faint); transition: transform 200ms ease; }
.day-block.open .caret { transform: rotate(180deg); }
.db-body { display: none; margin-top: 10px; }
.day-block.open .db-body { display: block; }
.db-body li { list-style: none; padding: 7px 0; border-top: 1px solid var(--line); font-size: 13.5px; display: flex; gap: 8px; }
.db-body .st { font-family: var(--disp); font-size: 11px; font-weight: 700; flex: 0 0 auto; }
.db-body .st.done { color: var(--green); }
.db-body .st.skip { color: var(--amber); }

/* week view: chevron strip + exercise cards */
.wk-strip { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; margin-top: 12px; }
.wk-day { border: none; border-radius: 12px; padding: 9px 0 7px; text-align: center; cursor: pointer; background: var(--card); border: 1px solid var(--line); color: var(--fg); font-family: var(--disp); }
.wk-day:active { transform: scale(0.94); }
.wk-day .dw { display: block; font-size: 9.5px; font-weight: 600; color: var(--faint); }
.wk-day .dn { display: block; font-size: 14px; font-weight: 700; margin: 1px 0 5px; }
.wk-day .dot { display: block; width: 7px; height: 7px; border-radius: 50%; margin: 0 auto; }
.wk-day.sel { background: var(--fg); color: var(--bg); }
.wk-day.sel .dw { color: #00000088; }
.wk-day.today:not(.sel) { outline: 1.5px solid var(--fg); outline-offset: -1.5px; }

.ex-card { border-radius: 14px; padding: 14px 16px; margin-top: 10px; background: var(--card); border: 1px solid var(--line); }
.ex-card.ex-done { border-color: #4caf7d55; background: #4caf7d0f; }
.ex-card.ex-skip { border-color: #dfa32c44; opacity: 0.75; }
.ex-name { font-size: 14.5px; font-weight: 500; }
.ex-actions { display: flex; gap: 8px; margin-top: 10px; }
.ex-actions button { flex: 1; border-radius: 10px; border: 1px solid var(--line); background: var(--card-2); color: var(--fg); font-family: var(--disp); font-weight: 600; font-size: 12.5px; padding: 9px 0; cursor: pointer; }
.ex-actions button:active { transform: scale(0.95); }
.ex-actions .on-done { background: var(--green); color: #05130c; border-color: transparent; }
.ex-actions .on-skip { background: var(--amber); color: #221a00; border-color: transparent; }
.plan-cta { display: flex; gap: 10px; margin-top: 14px; }
.plan-cta .btn { flex: 1; margin: 0; }

/* ---------- progress ---------- */
canvas.chart { width: 100%; max-height: 240px; }
.stat-row { border-top: 1px solid var(--line); padding: 12px 2px; }
.stat-row summary { list-style: none; display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; align-items: baseline; cursor: pointer; font-size: 13px; }
.stat-row summary::-webkit-details-marker { display: none; }
.stat-row .sr-name { font-family: var(--disp); font-weight: 600; font-size: 13px; }
.stat-row .sr-v { text-align: right; font-family: var(--disp); font-weight: 600; }
.stat-row .sr-v small { display: block; font-size: 9px; font-weight: 500; color: var(--faint); text-transform: uppercase; letter-spacing: 0.08em; }
.stat-row .up { color: var(--green); } .stat-row .down { color: var(--red); }
.stat-row p { font-size: 12.5px; color: var(--dim); padding: 8px 0 2px; }
.badge-grid { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.badge { font-family: var(--disp); font-size: 12px; font-weight: 700; padding: 8px 14px; border-radius: 12px; background: var(--card-2); border: 1px solid var(--line); color: var(--faint); }
.badge.earned { background: #c8501e26; border-color: #c8501e66; color: #ff9d6d; }

/* ---------- menu ---------- */
.menu-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 14px; }
.menu-card { border-radius: var(--r); padding: 18px 16px; background: var(--card); border: 1px solid var(--line); cursor: pointer; text-align: left; color: var(--fg); font-family: var(--sans); text-decoration: none; display: block; }
.menu-card:active { transform: scale(0.97); }
.menu-card .mc-icon { font-size: 20px; }
.menu-card b { display: block; font-family: var(--disp); font-size: 14px; font-weight: 600; margin-top: 8px; }
.menu-card small { color: var(--dim); font-size: 11.5px; }
.menu-panel { margin-top: 12px; }
/* 7/6: in-place expansion — the panel spans the grid row right under the pressed card */
.menu-inline { grid-column: 1 / -1; animation: scrIn 180ms ease; }

.log-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.log-table th { text-align: left; padding: 8px 6px; font-family: var(--disp); font-size: 10px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--faint); border-bottom: 1px solid var(--line); }
.log-table td { padding: 9px 6px; border-bottom: 1px solid var(--line); }
.log-table .pain-yes { color: #ff9d99; font-weight: 600; }

/* ---------- coach ---------- */
.roster-card { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.roster-card .who { display: flex; align-items: center; gap: 10px; min-width: 0; }
.roster-card strong { font-family: var(--disp); font-weight: 600; font-size: 15px; display: block; }
.roster-card .who span { font-size: 12px; color: var(--dim); }
.roster-card .status { font-size: 11.5px; text-align: right; color: var(--dim); }
.roster-card .status em { display: block; font-style: normal; }
.card.alert { border-color: #d6454155; background: #d645410f; }
.qa-btn { background: none; border: none; font-size: 20px; padding: 4px 8px; cursor: pointer; color: var(--faint); flex: 0 0 auto; }
.qa-menu { position: absolute; z-index: 60; background: var(--card-2); border: 1px solid #ffffff22; border-radius: 14px; box-shadow: 0 16px 40px #00000088; overflow: hidden; min-width: 210px; }
.qa-menu button { display: block; width: 100%; text-align: left; background: none; border: none; padding: 13px 16px; font-size: 14px; color: var(--fg); font-family: var(--sans); cursor: pointer; }
.qa-menu button:active { background: #ffffff10; }
.qa-menu button.danger { color: #ff9d99; }
.code-chip { font-family: var(--disp); font-size: 14px; letter-spacing: 0.14em; font-weight: 600; border: 1px solid #ffffff2b; border-radius: 999px; padding: 7px 15px; cursor: pointer; }
.new-code { margin-top: 12px; }
.new-code b { font-family: var(--disp); font-size: 22px; letter-spacing: 0.14em; }
.report-box { margin-top: 12px; font-size: 12.5px; white-space: pre-wrap; line-height: 1.6; color: var(--dim); }

.day-row { display: grid; grid-template-columns: 42px 116px 58px 1fr; gap: 8px; align-items: start; padding: 11px 0; border-top: 1px solid var(--line); }
.day-row .dow { font-family: var(--disp); font-size: 12px; font-weight: 700; padding-top: 12px; }
.day-row select, .day-row input { padding: 9px 8px; font-size: 13px; }
.day-row textarea { padding: 9px 10px; font-size: 13px; min-height: 40px; }
.day-row.is-rest textarea, .day-row.is-rest input { opacity: 0.35; }

.coach-cal-row { display: grid; grid-template-columns: 90px repeat(7, 1fr); gap: 4px; align-items: center; padding: 10px 0; border-top: 1px solid var(--line); font-size: 12px; }
.coach-cal-row .ccr-name { font-family: var(--disp); font-weight: 600; font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ccr-cell { display: grid; place-items: center; height: 26px; border-radius: 8px; background: var(--card-2); }
.ccr-cell .dot { width: 8px; height: 8px; border-radius: 50%; }

/* ---------- overlays ---------- */
.overlay { position: fixed; inset: 0; z-index: 100; background: var(--bg); color: var(--fg); overflow-y: auto; padding: calc(var(--safe-t) + 20px) 20px calc(40px + var(--safe-b)); }
.overlay.center { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.overlay-top { display: flex; justify-content: space-between; align-items: center; max-width: 430px; margin: 0 auto; }

.runner-dots { display: flex; gap: 6px; }
.runner-dots i { width: 8px; height: 8px; border-radius: 50%; background: #ffffff26; transition: background 200ms ease; }
.runner-dots i.done { background: var(--green); }
.runner-dots i.skip { background: var(--amber); }
.runner-dots i.now { background: var(--fg); }

.runner-step, .runner-rest { max-width: 430px; margin: 12vh auto 0; text-align: center; animation: stepIn 240ms cubic-bezier(.22,1,.36,1); }
@keyframes stepIn { from { opacity: 0; transform: translateX(26px); } to { opacity: 1; transform: none; } }
.runner-item { font-family: var(--disp); font-size: clamp(24px, 7vw, 34px); font-weight: 700; line-height: 1.2; margin: 16px 0 10px; }
.runner-rpe { font-size: 14px; color: var(--dim); }
.runner-actions { display: flex; gap: 12px; margin-top: 40px; }
.check-anim { animation: pop 300ms cubic-bezier(.22,1.6,.36,1); }
@keyframes pop { 0% { transform: scale(1); } 40% { transform: scale(1.06); } 100% { transform: scale(1); } }

.rest-ring { width: 150px; height: 150px; border-radius: 50%; margin: 26px auto; display: grid; place-items: center; position: relative; }
.rest-ring::before { content: ""; position: absolute; inset: 10px; border-radius: 50%; background: var(--bg); }
.rest-ring span { position: relative; font-family: var(--disp); font-size: 44px; font-weight: 700; }
.rest-next { color: var(--dim); font-size: 14px; margin-bottom: 20px; }

.pr-big { font-family: var(--disp); font-size: clamp(48px, 14vw, 72px); font-weight: 700; letter-spacing: -0.02em; color: var(--accent); margin: 10px 0 4px; }
.pr-sub { color: var(--dim); margin-bottom: 26px; }
#confetti { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
#confetti i { position: absolute; top: -12px; width: 8px; height: 14px; border-radius: 2px; animation: fall linear forwards; }
@keyframes fall { to { transform: translateY(110vh) rotate(720deg); opacity: 0.6; } }

.sum-type { font-family: var(--disp); font-size: 30px; font-weight: 700; text-transform: uppercase; margin: 8px 0 16px; }
.sum-stats { display: flex; flex-direction: column; gap: 8px; width: 100%; max-width: 340px; }
.sum-stats .row { display: flex; justify-content: space-between; padding: 11px 16px; background: var(--card); border: 1px solid var(--line); border-radius: 12px; font-size: 14px; }
.sum-stats .row b { font-family: var(--disp); }
.sum-actions { display: flex; gap: 10px; margin-top: 26px; width: 100%; max-width: 340px; }
.sum-actions .btn { flex: 1; }

/* onboarding */
#ob-slides { max-width: 340px; }
.ob-slide { animation: scrIn 240ms ease; }
.ob-slide .ob-icon { font-size: 40px; }
.ob-slide h2 { font-family: var(--disp); font-size: 24px; font-weight: 700; margin: 12px 0 8px; }
.ob-slide p { color: var(--dim); font-size: 14px; }
.ob-slide .field-row, .ob-slide input { text-align: left; margin-top: 8px; }
.ob-dots { display: flex; gap: 7px; justify-content: center; margin: 24px 0 16px; }
.ob-dots i { width: 8px; height: 8px; border-radius: 50%; background: #ffffff26; }
.ob-dots i.on { background: var(--accent); }
#onboard .btn.wide { max-width: 340px; }

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

/* ═══════════ v6 additions ═══════════ */

/* tab badge */
.tab { position: relative; }
.tab .nbadge {
  position: absolute; top: 0; right: calc(50% - 21px);
  min-width: 16px; height: 16px; padding: 0 4px; border-radius: 999px;
  background: var(--accent); color: #fff; font-size: 10px; font-weight: 700;
  display: grid; place-items: center;
}

/* messages */
.thread { display: flex; flex-direction: column; gap: 8px; padding: 14px 0 10px; min-height: 40vh; }
.msg { max-width: 82%; padding: 10px 14px; border-radius: 16px; font-size: 14.5px; line-height: 1.45; }
.msg.mine { align-self: flex-end; background: var(--accent); color: #fff; border-bottom-right-radius: 5px; }
.msg.theirs { align-self: flex-start; background: var(--card-2); border: 1px solid var(--line); border-bottom-left-radius: 5px; }
.msg time { display: block; font-size: 10px; opacity: 0.55; margin-top: 3px; }
.composer { position: sticky; bottom: calc(84px + var(--safe-b)); display: flex; gap: 8px; padding-top: 8px; background: var(--bg); }
.composer textarea { flex: 1; resize: none; border-radius: 999px; padding: 12px 16px; max-height: 90px; }
.composer button { flex: 0 0 auto; border: none; border-radius: 50%; width: 46px; height: 46px; background: var(--accent); color: #fff; font-size: 18px; cursor: pointer; }
.thread-row { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.thread-row .preview { font-size: 12.5px; color: var(--dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 200px; }
.unread-pill { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--accent); color: #fff; font-size: 11px; font-weight: 700; display: grid; place-items: center; }

/* metric chips */
.chip-row { display: flex; gap: 8px; overflow-x: auto; padding: 12px 0 4px; -webkit-overflow-scrolling: touch; }
.chip-row button { flex: 0 0 auto; font-family: var(--disp); font-weight: 600; font-size: 12.5px; padding: 8px 16px; border-radius: 999px; background: var(--card-2); color: var(--dim); border: 1px solid var(--line); cursor: pointer; }
.chip-row button.on { background: var(--fg); color: var(--bg); }
.goal-line { display: flex; justify-content: space-between; align-items: baseline; font-size: 13px; color: var(--dim); margin-top: 8px; }
.goal-line b { font-family: var(--disp); color: var(--fg); font-size: 16px; }

/* exercise picker overlay */
.picker-filters { display: flex; gap: 8px; overflow-x: auto; padding: 12px 0; max-width: 430px; margin: 0 auto; }
.picker-filters button { flex: 0 0 auto; font-family: var(--disp); font-size: 11.5px; font-weight: 600; padding: 7px 13px; border-radius: 999px; background: var(--card-2); color: var(--dim); border: 1px solid var(--line); cursor: pointer; }
.picker-filters button.on { background: var(--fg); color: var(--bg); }
#picker-list { max-width: 430px; margin: 0 auto; }
#picker-note { max-width: 430px; margin: 0 auto; }
.pick-row { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 12px 4px; border-top: 1px solid var(--line); cursor: pointer; }
.pick-row:active { background: #ffffff0a; }
/* v10.1 multi-select basket: tap rows to stack a whole warmup, add once */
.pick-row.picked { background: #c8501e14; }
.pick-row .pick-check { flex: 0 0 22px; width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid var(--line); display: grid; place-items: center; font-size: 12px; color: transparent; }
.pick-row.picked .pick-check { background: var(--accent); border-color: var(--accent); color: #fff; }
/* v10.5 grouped picker: variants indent under their movement; ★ pins favorites */
.pick-row.pick-variant { padding-left: 26px; background: #ffffff05; }
.pick-fav { flex: 0 0 auto; background: none; border: none; font-size: 16px; color: var(--line); cursor: pointer; padding: 2px 4px; }
.pick-fav.on { color: var(--accent); }
.pick-exp { flex: 0 0 auto; background: var(--card-2); border: 1px solid var(--line); border-radius: 8px; color: var(--dim); font-size: 13px; padding: 4px 10px; cursor: pointer; }
.basket-bar { position: sticky; bottom: 0; max-width: 430px; margin: 0 auto; display: flex; align-items: center; gap: 12px; padding: 12px 4px calc(env(safe-area-inset-bottom, 0px) + 12px); background: var(--bg); border-top: 1px solid var(--line); }
.basket-bar #pb-count { font-family: var(--disp); font-size: 13px; font-weight: 700; flex: 1; }
.basket-bar .btn { margin: 0; }
.pick-row .pr-n { font-size: 14px; }
.pick-row .pr-meta { font-size: 11px; color: var(--faint); }
.tier-tag { flex: 0 0 auto; font-family: var(--disp); font-size: 10px; font-weight: 700; padding: 3px 9px; border-radius: 999px; }
.tier-tag.tA { background: #4caf7d26; color: #9fd8b4; }
.tier-tag.tB { background: #dfa32c22; color: var(--amber); }
.tier-tag.tC { background: #ffffff14; color: var(--faint); }

/* coach plan items */
.plan-item { display: flex; align-items: center; gap: 8px; padding: 8px 0; border-top: 1px solid var(--line); font-size: 13px; flex-wrap: wrap; }
.plan-item .pi-note { flex: 1 1 100%; display: flex; gap: 6px; }
.plan-item .pi-note input { padding: 5px 8px; font-size: 12px; flex: 1; font-style: italic; }
.plan-item .pi-note input.pi-dist { flex: 0 0 74px; font-style: normal; text-align: center; }
.plan-item .pi-n { flex: 1; min-width: 0; }
.plan-item .pi-sr { flex: 0 0 auto; width: 72px; }
.plan-item .pi-sr input { padding: 6px 8px; font-size: 12px; text-align: center; }
.plan-item .pi-grp { flex: 0 0 auto; width: 42px; }
.plan-item .pi-grp input { padding: 6px 4px; font-size: 12px; text-align: center; text-transform: uppercase; font-family: var(--disp); font-weight: 700; }
.plan-item button { background: none; border: none; color: var(--faint); font-size: 15px; cursor: pointer; padding: 2px 6px; }
.plan-item button:disabled { opacity: .25; cursor: default; }
.add-ex-btn { margin-top: 8px; font-size: 12.5px; }
.eq-select { display: flex; gap: 8px; }
.eq-select button { flex: 1; font-family: var(--disp); font-size: 11.5px; font-weight: 600; padding: 9px 4px; border-radius: 10px; background: var(--card-2); color: var(--dim); border: 1px solid var(--line); cursor: pointer; }
.eq-select button.on { background: var(--fg); color: var(--bg); }

/* runner v6 */
.runner-sr { font-family: var(--disp); font-size: 17px; font-weight: 600; color: var(--accent); margin-top: 2px; }
.swap-link { display: block; margin: 26px auto 0; font-size: 13px; }
.swapped-note { font-size: 12px; color: var(--amber); margin-top: 8px; }
.item-note { font-size: 12px; color: var(--dim); margin-top: 3px; font-style: italic; }
.hold-wrap { margin-top: 26px; }
.hold-btn {
  width: 130px; height: 130px; border-radius: 50%; border: 1px solid var(--line);
  background: var(--card); color: var(--fg); cursor: pointer; display: grid; place-items: center; margin: 0 auto;
}
.hold-btn span { font-family: var(--disp); font-size: 34px; font-weight: 700; }
.hold-btn small { font-size: 10px; color: var(--dim); }
.hold-btn.running { border-color: var(--accent); }
.rest-adjust { display: flex; gap: 10px; justify-content: center; margin: -8px 0 14px; }

/* throwing checklist (plain, unhurried — deliberately no timer UI) */
.throw-item { display: flex; gap: 12px; align-items: flex-start; padding: 13px 2px; border-top: 1px solid var(--line); }
.throw-item .ti-check { flex: 0 0 auto; width: 26px; height: 26px; border-radius: 50%; border: 1.5px solid #ffffff33; background: none; cursor: pointer; color: transparent; font-size: 14px; }
.throw-item.done .ti-check { background: var(--green); border-color: var(--green); color: #05130c; }
.throw-item p { font-size: 14.5px; line-height: 1.5; }
.throw-item.done p { opacity: 0.5; text-decoration: line-through; }

/* install hint card */
.install-note { font-size: 12.5px; color: var(--dim); border: 1px dashed #ffffff2b; border-radius: 12px; padding: 12px 14px; margin-top: 12px; }

/* ═══════════ v7 additions ═══════════ */

/* component kind colors extend the session-type system */
:root { --t-cond: #7d9bb8; --t-mental: #a89ac9; }
.tag.t-conditioning { background: #7d9bb826; color: #a9c0d8; }
.tag.t-mental { background: #a89ac926; color: #c4b8e0; }
.dot.t-conditioning { background: var(--t-cond); }
.dot.t-mental { background: var(--t-mental); }
.day-block.b-conditioning { border-left-color: var(--t-cond); }
.day-block.b-mental { border-left-color: var(--t-mental); }
.cal-cell .dots { position: absolute; left: 50%; transform: translateX(-50%); bottom: 4px; display: flex; gap: 2px; }
.cal-cell .dots i { width: 5px; height: 5px; border-radius: 50%; position: static; transform: none; }

/* today's stack (home) */
.stack-row { display: flex; align-items: center; gap: 12px; padding: 13px 16px; border-radius: 14px; background: var(--card); border: 1px solid var(--line); margin-top: 8px; cursor: pointer; border-left: 4px solid var(--t-rest); }
.stack-row:active { transform: scale(0.98); }
.stack-row.k-throwing { border-left-color: var(--t-throw); } .stack-row.k-strength { border-left-color: var(--t-str); }
.stack-row.k-mobility { border-left-color: var(--t-mob); } .stack-row.k-conditioning { border-left-color: var(--t-cond); }
.stack-row.k-mental { border-left-color: var(--t-mental); } .stack-row.k-custom { border-left-color: var(--fg); }
.stack-row .sr-info { flex: 1; min-width: 0; }
.stack-row .sr-title { font-family: var(--disp); font-weight: 600; font-size: 14.5px; }
.stack-row .sr-meta { font-size: 11.5px; color: var(--dim); }
.stack-row .sr-state { flex: 0 0 auto; font-family: var(--disp); font-size: 11px; font-weight: 700; color: var(--faint); }
.stack-row.done-row { opacity: 0.65; } .stack-row.done-row .sr-state { color: var(--green); }
.cue-text { font-size: 14px; line-height: 1.5; font-style: italic; color: var(--fg); }

/* info sheet (RPE ⓘ etc.) */
.info-btn { background: none; border: 1px solid #ffffff2b; color: var(--dim); width: 18px; height: 18px; border-radius: 50%; font-size: 11px; cursor: pointer; margin-left: 6px; line-height: 1; }
.sheet-backdrop { position: fixed; inset: 0; z-index: 200; background: #000a; display: grid; place-items: end center; }
.sheet { width: 100%; max-width: 430px; background: var(--card-2); border-radius: 20px 20px 0 0; padding: 22px 20px calc(28px + var(--safe-b)); border: 1px solid var(--line); max-height: 75vh; overflow-y: auto; }
.sheet h3 { font-family: var(--disp); font-size: 16px; margin-bottom: 10px; }
.sheet p, .sheet li { font-size: 14px; color: var(--dim); line-height: 1.6; }
.sheet .btn { margin-top: 16px; }

/* coach component editor */
.comp-edit { border: 1px solid var(--line); border-left: 4px solid var(--t-rest); border-radius: 12px; padding: 10px 12px; margin-top: 8px; background: var(--card-2); }
.comp-edit.k-throwing { border-left-color: var(--t-throw); } .comp-edit.k-strength { border-left-color: var(--t-str); }
.comp-edit.k-mobility { border-left-color: var(--t-mob); } .comp-edit.k-conditioning { border-left-color: var(--t-cond); }
.comp-edit.k-mental { border-left-color: var(--t-mental); } .comp-edit.k-custom { border-left-color: var(--fg); }
.comp-edit .ce-head { display: flex; gap: 8px; align-items: center; }
.comp-edit .ce-head select { flex: 0 0 118px; padding: 7px 8px; font-size: 12px; }
.comp-edit .ce-head input { flex: 1; padding: 7px 10px; font-size: 12.5px; }
.comp-edit .ce-head .ce-rpe { flex: 0 0 52px; text-align: center; }
.comp-edit .ce-head button { background: none; border: none; color: var(--faint); font-size: 14px; cursor: pointer; padding: 2px 4px; }
.add-comp-row { display: flex; gap: 8px; margin-top: 8px; flex-wrap: wrap; }

/* block timeline v2: stacked layer rows (Part 7) */
.blocks-strip.stacked { display: block; }
.blocks-strip.stacked .bstrip-row { margin-top: 4px; }
.blocks-strip.stacked .bstrip-seg { display: block; text-align: center; padding: 0 6px; text-overflow: ellipsis; }
.bstrip-ticks { display: flex; margin-top: 4px; }
.bstrip-ticks span { flex: 1; font-size: 8.5px; color: var(--faint); font-family: var(--disp); }
.block-row .bw-start { width: 46px; padding: 4px 6px; font-size: 12px; text-align: center; display: inline-block; }

/* block timeline */
.blocks-strip { display: flex; gap: 4px; margin-top: 12px; }
.blocks-strip .bstrip-seg { border-radius: 6px; height: 26px; display: grid; place-items: center; background: var(--card-2); border: 1px solid var(--line); font-family: var(--disp); font-size: 9.5px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--dim); overflow: hidden; white-space: nowrap; min-width: 0; cursor: pointer; }
.blocks-strip .bstrip-seg.cur { border-color: var(--accent); color: var(--fg); background: #c8501e1f; }
.blocks-strip .bstrip-seg.past { opacity: 0.5; }
.block-row { display: flex; align-items: center; gap: 8px; padding: 9px 0; border-top: 1px solid var(--line); font-size: 13.5px; }
.block-row b { font-family: var(--disp); }
.block-row .br-weeks { color: var(--dim); font-size: 12px; }
.block-row button { background: none; border: none; color: var(--faint); cursor: pointer; font-size: 14px; padding: 2px 5px; }
.ran-tag { font-size: 10px; color: var(--amber); font-family: var(--disp); font-weight: 700; }

/* feel selector (mobility check-in) */
.seg.feel button.on[data-f="tight"] { background: var(--amber); color: #221a00; }
.seg.feel button.on[data-f="normal"], .seg.feel button.on[data-f="loose"] { background: var(--green); color: #05130c; }

/* recently-used marker in picker */
.recent-tag { font-size: 9.5px; color: var(--amber); font-family: var(--disp); font-weight: 700; margin-left: 6px; }

/* ═══════════ v8 additions — simple front ═══════════ */

/* quote of the day (one line, never louder than the checklist) */
.quote-line { font-size: 14px; font-style: italic; color: var(--dim); margin: 6px 0 14px; line-height: 1.5; }

/* home checklist cards: the whole home screen is these */
.check-card {
  display: flex; align-items: center; gap: 13px; padding: 15px 16px; margin-top: 9px;
  border-radius: 15px; background: var(--card); border: 1px solid var(--line);
  border-left: 4px solid var(--t-rest); cursor: pointer; transition: transform 100ms ease;
}
.check-card:active { transform: scale(0.98); }
.check-card.k-throwing { border-left-color: var(--t-throw); } .check-card.k-strength { border-left-color: var(--t-str); }
.check-card.k-mobility { border-left-color: var(--t-mob); } .check-card.k-conditioning { border-left-color: var(--t-cond); }
.check-card.k-mental { border-left-color: var(--t-mental); } .check-card.k-custom { border-left-color: var(--fg); }
.cc-box {
  flex: 0 0 auto; width: 28px; height: 28px; border-radius: 50%;
  border: 2px solid #ffffff33; display: grid; place-items: center;
  font-size: 15px; font-weight: 700; color: #05130c;
}
.done-card .cc-box { background: var(--green); border-color: var(--green); }
.cc-info { flex: 1; min-width: 0; }
.cc-title { font-family: var(--disp); font-weight: 600; font-size: 15px; }
.cc-sub { font-size: 12px; color: var(--dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cc-state { flex: 0 0 auto; font-family: var(--disp); font-size: 11px; font-weight: 700; color: var(--accent); }
.done-card { opacity: 0.6; }
.done-card .cc-title { text-decoration: line-through; }

/* the one daily check-in: 4-button feel row */
.seg.feel4 { flex-wrap: wrap; }
.seg.feel4 button { flex: 1 1 22%; font-size: 13.5px; padding: 14px 0; }
.seg.feel4 button.on[data-f="great"] { background: var(--green); color: #05130c; }
.seg.feel4 button.on[data-f="normal"] { background: var(--fg); color: var(--bg); }
.seg.feel4 button.on[data-f="sore"], .seg.feel4 button.on[data-f="beat"] { background: var(--amber); color: #221a00; }
.seg.feel4 button.on[data-f="pain"] { background: var(--red); color: #fff; }

/* "show me" — detail on request, never by default */
.showme-inline {
  background: none; border: none; color: var(--faint); font-size: 11px; font-family: var(--disp);
  font-weight: 600; letter-spacing: 0.04em; cursor: pointer; padding: 3px 0 0; display: inline-block;
  text-decoration: underline; text-underline-offset: 3px;
}
.showme-inline:active { color: var(--fg); }
.show-me { display: block; margin: 8px auto 0; font-size: 13px; color: var(--accent); opacity: 0.9; }

/* runner: weight slot (optional, strength only) */
.weight-slot { margin-top: 20px; }
.weight-slot input { width: 110px; text-align: center; font-size: 18px; font-family: var(--disp); font-weight: 600; }
.weight-slot label { font-size: 11px; color: var(--faint); margin-top: 5px; }

/* roster money + review tags (Phase B) */
.tag.pay-red { background: #d6454126; color: #ff9d99; }
.tag.pay-amber { background: #dfa32c22; color: var(--amber); }
.tag.review { background: #7d9bb826; color: #a9c0d8; }

/* Part 8: greeting avatar + week-glance */
.avatar-me { width: 38px; height: 38px; border-radius: 50%; background: var(--accent); color: #fff; font-family: var(--disp); font-weight: 700; font-size: 14px; display: grid; place-items: center; }
.wk-glance { margin-top: 14px; }
.wg-row { display: flex; align-items: center; gap: 12px; padding: 12px 14px; margin-top: 7px; border-radius: 12px; background: var(--card); border: 1px solid var(--line); cursor: pointer; font-size: 13px; }
.wg-row.today { border-color: var(--accent); }
.wg-day { font-family: var(--disp); font-weight: 700; font-size: 11px; width: 32px; color: var(--dim); }
.wg-what { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wg-state { font-family: var(--disp); font-weight: 700; font-size: 12px; color: var(--green); }

/* day-complete celebration */
.medal { font-size: 52px; margin-bottom: 6px; }
#day-confetti { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
#day-confetti i { position: absolute; top: -12px; width: 8px; height: 14px; border-radius: 2px; animation: fall linear forwards; }

/* ═══════════ v9: THE FILM LOOP ═══════════ */
/* athlete: send-film sheet */
.film-preview { width: 100%; max-height: 42vh; border-radius: 12px; background: #000; margin-top: 12px; display: block; }
.film-meta { font-size: 12px; color: var(--dim); margin: 8px 0 14px; }
.film-progress { margin-top: 14px; height: 6px; border-radius: 999px; background: var(--line); overflow: hidden; }
.film-bar { height: 100%; width: 8%; border-radius: 999px; background: var(--accent); transition: width .3s ease; }
.film-bar.indet { animation: film-indet 1.1s ease-in-out infinite; }
@keyframes film-indet { 0% { margin-left: 0; width: 12%; } 50% { margin-left: 44%; width: 34%; } 100% { margin-left: 92%; width: 8%; } }
/* athlete: "Send Coach film" affordance (throwing card + Progress) */
.btn-film { display: inline-flex; align-items: center; gap: 7px; margin-top: 12px; }
/* athlete: their own clip history */
.film-hist { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 0; border-top: 1px solid var(--line); font-size: 13px; }
.film-hist:first-of-type { border-top: 0; }
.film-hist .fh-status { font-size: 11.5px; color: var(--dim); white-space: nowrap; }
.film-hist .fh-status.new { color: var(--amber); }
.film-hist .fh-status.starred { color: var(--accent); }
/* coach: film queue */
.film-card video { width: 100%; max-height: 52vh; border-radius: 12px; background: #000; display: block; margin-top: 10px; }
.film-card .film-load { width: 100%; margin-top: 10px; padding: 26px 0; border-radius: 12px; border: 1px dashed var(--line); background: var(--card); color: var(--dim); font-size: 13.5px; cursor: pointer; }
.film-actions { display: flex; gap: 8px; margin-top: 12px; }
.film-actions .btn { flex: 1; min-height: 44px; } /* thumb-reachable */
.film-reply { margin-top: 10px; }
.film-reply textarea { width: 100%; min-height: 64px; }