/* styles/cantrain.css -- "I can't train" and "Time around this event" (the
   owner, 4 Nov 2026; screens/cantrain.js). The sheets are calconn.js's
   (`ccShell`, `swk-*`, `ccn-*`) and the fields the competition form's
   (`at-reps`, `ac-repx`, `txt`); what is here is only what those lack. */

/* (2026-11-07, Schedule 1c board 45: WAS `.calcant`, the Day view's "My
   day is different" button -- the tile is removed.) */

/* The athlete's own block: the warm stripes. 2026-11-05 (Schedule changes
   v1, tweak 3): a calendar event wears the SAME red now (calconn.css).
   2026-11-06 (v2 §5a, "Red 3"): dimmed, as the event is -- the border
   rgba(232,128,98,.55), the left edge rgba(232,161,144,.9), the block at
   .55 (calconn.css). WAS #6b3a32 / #e8a190, full strength. */
.cal .calbusy.calblock { background: repeating-linear-gradient(135deg,
    rgba(232, 128, 98, .30) 0 5px, rgba(232, 128, 98, .18) 5px 10px);
  border-color: rgba(232, 128, 98, .55);
  border-left-color: rgba(232, 161, 144, .9); color: #fbd9d0; }
.cal .calbusy.calblock .cbt { color: #fbd9d0; }
.cal .calbusy.calblock .cbm { color: #e8a190; }

/* A day the athlete can't train at all (Schedule changes v2 §5a.3,
   2026-11-06; week.js `calDayOff`): its day name and date dimmed to .36,
   "Off" to .7 -- today's blue date circle stays bright, so today is always
   found -- and a dark wash down its column, over the hour lines and under
   every block on it. */
.cal .caldh.off .dow, .cal .caldh.off .dnum { opacity: .36; }
.cal .caldh.off.today .dnum { opacity: 1; }
.cal .caldh.off .dsub { opacity: .7; }
.cal .caloffwash { position: absolute; left: 0; right: 0; top: 0; bottom: 0;
  background: rgba(5, 6, 7, .62); pointer-events: none; }

/* ───────────────────────── 2026-11-07 (the owner's "Schedule screens,
   1c look" handoff, FINAL, boards 9-11): "Add a time you can't train"
   REDRAWN IN THE 1c LOOK -- each choice raised, solid blue with a tick
   once chosen; the days and times tappable rows; Remove red text on raised
   rows. Colours onec.css's tokens, numbers the boards' references
   (`reference/09_K1_Cant_Train_AllDay.html`, `10_K2_...`, `11_K3_...`).
   WAS (boards W3/W4) blue outlines, typed boxes, a COMING SOON pill. */

/* What can't you do? -- I can't train (chosen), No gym access dimmed with
   "Coming soon" at its right. */
.ct-whats { display: flex; flex-direction: column; gap: 10px; }
.ct-what { display: flex; align-items: center; gap: 12px; width: 100%;
  min-height: 56px; margin: 0; padding: 10px 14px; box-sizing: border-box;
  border-radius: 14px; background: var(--c1-tile);
  border: 1px solid var(--c1-tile-line); box-shadow: var(--c1-tile-lift);
  color: var(--c1-ink); text-align: left; font: inherit; }
.ct-what.on { background: var(--c1-on); border-color: var(--c1-on-line);
  box-shadow: var(--c1-on-lift); color: #ffffff; }
.ct-what.soon { background: #141e2e; border-color: #26354d; box-shadow: none;
  color: #6f7f97; }
.ct-wt { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.ct-wt b { font-size: 16px; font-weight: 800; line-height: 1.25; }
.ct-wt span { margin-top: 2px; font-size: 13.5px; line-height: 1.35;
  color: var(--c1-sub); }
.ct-what.on .ct-wt span { color: rgba(255, 255, 255, .92); }
.ct-what.soon .ct-wt span { color: #5f6e85; }
.ct-soon { flex: none; font-size: 12.5px; font-weight: 800; color: #8f9bad; }

/* The ring at a choice's left: a white disc with a blue tick once
   chosen. */
.ctk-ring { flex: none; width: 26px; height: 26px; border-radius: 50%;
  box-sizing: border-box; border: 2px solid #7d93b2; display: flex;
  align-items: center; justify-content: center; }
.ctk-ring svg { display: none; width: 14px; height: 14px; fill: none;
  stroke: #1478cc; stroke-width: 3.2; stroke-linecap: round;
  stroke-linejoin: round; }
.on > .ctk-ring { background: #ffffff; border-color: #ffffff; }
.on > .ctk-ring svg { display: block; }
.ct-what.soon > .ctk-ring { border-color: #3a4a63; }

/* Two choices side by side (When; Repeats). */
.ctk-twin { display: flex; gap: 10px; }
button.ctk-opt { flex: 1 1 0; min-width: 0; display: flex; align-items: center;
  gap: 12px; min-height: 56px; margin: 0; padding: 10px 14px;
  border-radius: 14px; background: var(--c1-tile);
  border: 1px solid var(--c1-tile-line); box-shadow: var(--c1-tile-lift);
  color: var(--c1-ink); text-align: left; font: inherit; font-size: 16px;
  font-weight: 800; line-height: 1.25; }
button.ctk-opt.on { background: var(--c1-on); border-color: var(--c1-on-line);
  box-shadow: var(--c1-on-lift); color: #ffffff; }

/* The days and times: tappable rows in a card -- the glyph, the label, the
   value at the right, the round chevron; the phone's picker over the whole
   row (the input invisible). */
.ctk-card { display: flex; flex-direction: column; gap: 10px; padding: 12px;
  border-radius: 22px; background: var(--c1-card);
  border: 1px solid var(--c1-card-line); }
label.ctk-row { position: relative; display: flex; align-items: center;
  gap: 12px; min-height: 56px; padding: 10px 14px; box-sizing: border-box;
  border-radius: 14px; background: var(--c1-tile);
  border: 1px solid var(--c1-tile-line); box-shadow: var(--c1-tile-lift);
  color: var(--c1-ink); }
.ctk-ri { flex: none; display: inline-flex; }
.ctk-ri svg { width: 22px; height: 22px; fill: none; stroke: var(--c1-icon);
  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ctk-rl { flex: 1 1 auto; min-width: 0; font-size: 16px; font-weight: 600;
  color: #c9d3e0; }
.ctk-rv { flex: none; font-size: 16px; font-weight: 800;
  font-variant-numeric: tabular-nums; }
label.ctk-row > input.ctk-pick, label.ctk-row > select.ctk-pick {
  position: absolute; inset: 0; width: 100%; height: 100%; min-height: 0;
  margin: 0; padding: 0; border: 0; opacity: 0; cursor: pointer;
  font-size: 16px; }

/* Why (optional): raised chips, solid blue when picked. */
.ct-chips { display: flex; flex-wrap: wrap; gap: 8px; }
button.ct-chip { width: auto; flex: none; height: 48px; min-height: 0;
  margin: 0; padding: 0 14px; border-radius: 14px;
  background: var(--c1-tile); border: 1px solid var(--c1-tile-line);
  box-shadow: var(--c1-tile-lift); color: var(--c1-ink); font-size: 15px;
  font-weight: 800; }
button.ct-chip.on { background: var(--c1-on); border-color: var(--c1-on-line);
  box-shadow: var(--c1-on-lift); color: #ffffff; }
button.ct-what:active, button.ctk-opt:active, label.ctk-row:active,
button.ct-chip:active { transform: translateY(2px); box-shadow: none; }

/* (WAS: `.ct-row`, `.ct-field`, `.ct-times` -- the typed boxes two to a
   row; `.swk-foot.ct-remove` -- a block's Remove buttons in a fixed foot;
   `.ccn-body .ac-repx` -- the weeks wheel drawn as a box.) */

/* Time around an event: label left, the typed number and "min" right. */
.ct-around { padding: 4px 16px; }
.ct-numrow { display: flex; align-items: center; justify-content: space-between;
  gap: 12px; min-height: 56px; }
.ct-numrow + .ct-numrow { border-top: 1px solid #22324a; }
.ct-numrow > span:first-child { font-size: 15px; color: #9aa6b6; }
.ct-numbox { display: inline-flex; align-items: baseline; gap: 8px; }
.ct-numbox em { font-style: normal; font-size: 14px; color: #9aa6b6; }
input.txt.ct-num { width: 96px; text-align: right; font-size: 17px;
  font-weight: 800; }
/* (2026-11-07, Schedule 1c board 15: WAS `.ct-doors`, the two outlined
   doors side by side -- NOW calconn.css's `.ccn-doors` rows.) */