/* MODE — Modes (modes.js, v47). Each Mode's color is the same in every theme (decided 2026-10-14),
   so it comes in as --mc on the element (ModeCore.COLOR) and the ring as --mode-ring on <html>.
   Text on a Mode color is always white; the gradients go dark at the bottom so it reads. */
:root, [data-theme] { --mode-cruise: #e0b24a; }

/* The ring round your picture: the header button (every tab) and Settings' account card. */
body.mode-on #ironlog-gear { border-color: var(--mode-ring); background: color-mix(in srgb, var(--mode-ring) 18%, var(--bg2)); color: var(--mode-ring); }
body.mode-on #ironlog-gear.on { box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--mode-ring); }
body.mode-on .set-who .acc-av, body.mode-on .set-id .acc-av { border-color: var(--mode-ring); }
.md-pill { align-self: flex-start; display: inline-flex; align-items: center; margin-top: 3px; padding: 2px 9px; border-radius: 20px; font-size: 11px; font-weight: 700;
  color: #fff; background: linear-gradient(150deg, var(--mc), color-mix(in srgb, var(--mc) 60%, #000)); }

.md-sq { width: 34px; height: 34px; border-radius: 10px; flex-shrink: 0; display: grid; place-items: center;
  background: linear-gradient(150deg, var(--mc), color-mix(in srgb, var(--mc) 55%, #000)); }
.md-sq.sm { width: 26px; height: 26px; border-radius: 8px; }
.md-sq.nw { background: var(--bg3); color: var(--text2); }
.md-sq.nw svg { width: 16px; height: 16px; }

/* Coach: one line under Ask your coach */
.md-line { display: flex; align-items: center; gap: 11px; width: 100%; text-align: left; font: inherit; color: var(--text); cursor: pointer; padding: 11px 14px; }
.md-lt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.md-lt > b { font-size: 15px; display: flex; align-items: center; gap: 6px; }
.md-lt .subtitle { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.md-ck { font-style: normal; color: var(--green); }
.md-bar { display: block; height: 4px; border-radius: 3px; background: var(--bg4); margin-top: 5px; overflow: hidden; }
.md-bar i { display: block; height: 100%; border-radius: 3px; background: var(--mc); }

/* Meet your Mode (once) */
.md-meet { color: #fff; border: 0; background: radial-gradient(120% 90% at 100% 0%, color-mix(in srgb, var(--mc) 40%, #fff) 0%, transparent 55%),
  linear-gradient(150deg, var(--mc), color-mix(in srgb, var(--mc) 45%, #000)); display: flex; flex-direction: column; gap: 4px; }
.md-meet small { font-size: 10px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; opacity: .8; }
.md-meet > b { font-size: 22px; font-weight: 900; letter-spacing: -.4px; } .md-meet > b span { font-weight: 300; opacity: .85; }
.md-meet > span { font-size: 13px; line-height: 1.45; opacity: .92; }
.md-meet-b { display: flex; gap: 8px; margin-top: 8px; }
.md-meet-b .btn { flex: 1; background: #fff; color: #111; }
.md-meet-b .btn.md-ghost { background: rgba(255, 255, 255, .18); color: #fff; }

/* The Mode page */
.md-hero { border-radius: 16px; padding: 16px; margin-bottom: 12px; color: #fff; position: relative; overflow: hidden;
  background: radial-gradient(120% 90% at 100% 0%, color-mix(in srgb, var(--mc) 45%, #fff) 0%, transparent 55%), linear-gradient(150deg, var(--mc) 0%, color-mix(in srgb, var(--mc) 45%, #000) 100%); }
.md-hero small { display: block; font-size: 10px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; opacity: .8; }
.md-hn { font-size: 30px; font-weight: 900; letter-spacing: -.6px; line-height: 1.05; margin: 3px 0 6px; } .md-hn span { font-weight: 300; opacity: .85; }
.md-hs { font-size: 13px; opacity: .88; }
.md-hb { height: 5px; border-radius: 3px; background: rgba(255, 255, 255, .25); margin: 10px 0 5px; overflow: hidden; }
.md-hb i { display: block; height: 100%; background: #fff; border-radius: 3px; }
.md-hk { display: flex; gap: 22px; margin-top: 12px; }
.md-hk b { display: block; font-size: 22px; font-weight: 900; font-variant-numeric: tabular-nums; } .md-hk span { font-size: 12px; opacity: .85; }
.md-k { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; text-align: center; }
.md-k b { display: block; font-size: 20px; font-variant-numeric: tabular-nums; } .md-k span { font-size: 12px; color: var(--text3); }
.md-gl { margin-top: 10px; }
.md-why { display: flex; gap: 10px; align-items: flex-start; font-size: 13px; line-height: 1.45; background: var(--accent-soft); }
.md-wi { width: 24px; height: 24px; border-radius: 50%; background: var(--accent); color: var(--on-accent, #fff); display: grid; place-items: center; flex-shrink: 0; }
.md-wi svg { width: 13px; height: 13px; }
.md-rows { padding-top: 4px; padding-bottom: 4px; }
.md-rows .co-trow:first-child { border-top: 0; }
.md-due { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 2px 10px; width: 100%; text-align: left; font: inherit; color: var(--text); cursor: pointer; border-color: var(--green); }
.md-due b { font-size: 15px; } .md-due .subtitle { grid-column: 1; } .md-due .co-chev { grid-row: 1 / span 2; grid-column: 2; }

/* My Modes */
.md-list { padding-top: 4px; padding-bottom: 4px; }
.md-row { display: flex; align-items: stretch; gap: 12px; width: 100%; text-align: left; font: inherit; color: var(--text); background: none; border: 0; cursor: pointer; padding: 10px 0; border-top: 1px solid var(--border); }
.md-row:first-child { border-top: 0; }
.md-ln { width: 6px; flex-shrink: 0; display: flex; } .md-ln i { width: 6px; border-radius: 3px; background: linear-gradient(180deg, var(--mc), color-mix(in srgb, var(--mc) 55%, #000)); }
.md-rt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.md-rt > b { font-size: 14px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.md-src { font-size: 12px; color: var(--text3); }
.md-row .co-chev { align-self: center; }
.pill.md-ok { background: var(--green-soft); color: var(--green); }
.md-del { display: block; margin: 4px auto 0; color: var(--red); }

/* Sheets: Change Mode, Pick your Mode, the end, Add a Mode */
.md-sheet, .md-end { display: flex; flex-direction: column; gap: 6px; }
.md-st { font-size: 18px; font-weight: 800; }
.md-sheet .subtitle { margin-bottom: 4px; line-height: 1.45; }
.md-pick { display: flex; align-items: center; gap: 11px; width: 100%; text-align: left; font: inherit; color: var(--text); cursor: pointer;
  padding: 9px 11px; border-radius: 12px; border: 1px solid var(--border); background: var(--bg2); }
.md-pick > span:not(.md-sq):not(.co-chev) { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.md-pick b { font-size: 14px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; } .md-pick > span > span { font-size: 12px; color: var(--text2); }
.md-pick.on { border-color: var(--accent); background: var(--accent-soft); }
.md-pick.dim { opacity: .62; cursor: default; }
.md-fit, .md-now { font-style: normal; font-size: 10px; font-weight: 700; padding: 1px 6px; border-radius: 10px; background: var(--green-soft); color: var(--green); }
.md-now { background: var(--bg4); color: var(--text2); }
.md-seg { display: flex; } .md-seg button { flex: 1; } .md-seg button:disabled { opacity: .45; }
.md-gap { margin-top: 6px; }
.md-sheet .co-grp, .md-end .co-grp { margin: 8px 0 2px; }
.md-hero.big .md-hn { font-size: 32px; }
.md-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.md-chip { display: inline-flex; align-items: center; gap: 7px; padding: 5px 10px 5px 5px; border-radius: 10px; border: 1px solid var(--border); background: var(--bg2); color: var(--text); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }
.md-chip .md-sq { width: 22px; height: 22px; border-radius: 6px; }
.md-chip.on { border-color: var(--accent); background: var(--accent-soft); }
.md-months { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 6px; }
.md-months label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--text2); }
.md-months input { width: 100%; font: inherit; color: var(--text); background: var(--bg3); border: 1px solid var(--border); border-radius: 9px; padding: 8px 10px; }
.md-cht { flex-direction: row !important; align-items: center; gap: 10px; }
.md-cht > span:last-child { display: flex; flex-direction: column; gap: 2px; }