/* Lesson Agenda. The "now" card is its own size container so its title and
   minutes fill whatever room the layout gives it. */

.ag {
  --ag-ok: #1c9a56;
  --ag-soon: #e39a05;
  --ag-over: #e03131;
  position: absolute; inset: 0;
  display: flex; flex-direction: column; gap: 2.2cqmin;
  padding: 3cqmin 3cqmin calc(clamp(36px, 8.4cqmin, 84px) + 2 * clamp(8px, 2.6cqmin, 28px));
}
:root[data-theme="dark"] .ag { --ag-ok: #3ccf7d; --ag-soon: #ffb020; --ag-over: #ff6b6b; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .ag { --ag-ok: #3ccf7d; --ag-soon: #ffb020; --ag-over: #ff6b6b; }
}

/* ---- head ---- */
.ag-head { flex: none; display: flex; align-items: baseline; gap: 2cqmin; min-width: 0; }
.ag-title { flex: 1 1 auto; min-width: 0; font: 650 clamp(16px, 4.8cqmin, 72px)/1.15 var(--font-display); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ag-meta {
  flex: none; margin-left: auto; white-space: nowrap; font-variant-numeric: tabular-nums;
  font-size: clamp(12px, 2.7cqmin, 30px); font-weight: 600; color: color-mix(in srgb, var(--stage-ink) 58%, transparent);
}
.ag-head.no-title .ag-title { display: none; }

/* ---- layout ---- */
.ag-body {
  flex: 1 1 0; min-height: 0; display: grid; gap: 2.4cqmin;
  grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) minmax(0, 1.15fr);
}
.ag-list-wrap { min-height: 0; overflow: auto; overscroll-behavior: contain; padding: 2px; margin: -2px; }
.ag-empty { display: none; }
.ag.is-empty .ag-body, .ag.is-empty .ag-head { display: none; }
.ag.is-empty .ag-empty { display: block; }

@container (orientation: landscape) and (min-width: 620px) {
  .ag-body { grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); }
}
/* Small widgets: now and next only. */
@container (max-height: 430px) {
  .ag-body { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); }
  .ag-list-wrap { display: none; }
}
@container (max-width: 400px) {
  .ag-body { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); }
  .ag-list-wrap { display: none; }
}
@container (max-height: 300px) {
  .ag-head { display: none; }
  .ag-add { display: none; }
}

/* ---- the now card ---- */
.ag-now {
  position: relative; container-type: size; min-height: 0; overflow: hidden;
  border-radius: clamp(12px, 2.4cqmin, 28px);
  background: linear-gradient(160deg, color-mix(in srgb, var(--cat) 13%, var(--stage-bg)), color-mix(in srgb, var(--cat) 5%, var(--stage-bg)));
  border: 1px solid color-mix(in srgb, var(--cat) 26%, transparent);
  transition: background .4s, border-color .4s;
}
.ag-now-inner {
  position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center;
  gap: min(3.6cqh, 3cqw); padding: min(7cqh, 6cqw) min(7cqw, 9cqh);
}
.ag-now-label {
  font: 700 clamp(11px, min(6cqh, 3.6cqw), 30px)/1.2 var(--font-display); letter-spacing: .08em; text-transform: uppercase;
  color: var(--cat); font-variant-numeric: tabular-nums;
}
.ag-now-title {
  font: 650 clamp(18px, min(15cqh, 9.5cqw), 130px)/1.08 var(--font-display); letter-spacing: -.01em;
  overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow-wrap: anywhere;
}
.ag-now-row { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0 .45em; }
.ag-now-time {
  font: 600 clamp(28px, min(30cqh, 21cqw), 300px)/1 var(--font-display); letter-spacing: -.025em;
  font-variant-numeric: tabular-nums; transition: color .3s;
}
.ag-now-state {
  font: 650 clamp(11px, min(6.4cqh, 4.2cqw), 40px)/1.2 var(--font-display); letter-spacing: .06em; text-transform: uppercase;
  color: color-mix(in srgb, var(--stage-ink) 55%, transparent);
}
.ag-bar { flex: none; height: clamp(6px, 3.4cqh, 22px); border-radius: 999px; overflow: hidden; background: color-mix(in srgb, var(--stage-ink) 10%, transparent); }
.ag-bar-fill { height: 100%; border-radius: inherit; background: var(--cat); transform: scaleX(0); transform-origin: left center; transition: transform .3s linear, background .3s; }
.ag-next {
  display: flex; align-items: baseline; flex-wrap: wrap; gap: .1em .5em; min-width: 0;
  font-size: clamp(12px, min(7cqh, 4.6cqw), 44px); line-height: 1.25;
}
.ag-next b { font-family: var(--font-display); font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.ag-next-label { font-size: .72em; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: color-mix(in srgb, var(--stage-ink) 55%, transparent); }
.ag-next-min { color: color-mix(in srgb, var(--stage-ink) 60%, transparent); font-variant-numeric: tabular-nums; }

.ag.is-paused .ag-now-time { animation: t-flash 1.6s ease-in-out infinite; }
.ag-now[data-tone="soon"] .ag-bar-fill { background: var(--ag-soon); }
.ag-now[data-tone="over"] { border-color: color-mix(in srgb, var(--ag-over) 50%, transparent); background: color-mix(in srgb, var(--ag-over) 9%, var(--stage-bg)); }
.ag-now[data-tone="over"] .ag-now-time, .ag-now[data-tone="over"] .ag-now-state { color: var(--ag-over); }
.ag-now[data-tone="over"] .ag-bar-fill { background: var(--ag-over); }
.ag-now[data-tone="done"] { border-color: color-mix(in srgb, var(--ag-ok) 45%, transparent); background: color-mix(in srgb, var(--ag-ok) 10%, var(--stage-bg)); }
.ag-now[data-tone="done"] .ag-bar-fill { background: var(--ag-ok); }
.ag-now[data-tone="done"] .ag-now-time { color: var(--ag-ok); }
.ag-done-icon { width: min(26cqh, 20cqw); height: min(26cqh, 20cqw); stroke-width: 2.6; }
@container (max-height: 150px) { .ag-next, .ag-now-label { display: none; } }

/* ---- the list ---- */
.ag-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: clamp(4px, 1.1cqmin, 12px); }
.ag-row {
  position: relative; overflow: hidden;
  display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto; align-items: center; gap: clamp(8px, 1.8cqmin, 20px);
  padding: clamp(6px, 1.5cqmin, 16px) clamp(10px, 2cqmin, 22px); border-radius: clamp(8px, 1.6cqmin, 18px);
  background: color-mix(in srgb, var(--stage-ink) 3.5%, var(--stage-bg)); border: 1px solid var(--line);
  font-size: clamp(13px, 3cqmin, 34px); transition: border-color .3s, background .3s;
}
.ag-row > * { position: relative; z-index: 1; }
.ag-row > .ag-row-fill {
  position: absolute; inset: 0; z-index: 0; transform: scaleX(0); transform-origin: left center;
  background: color-mix(in srgb, var(--cat) 16%, transparent); transition: transform .3s linear;
}
.ag-time { min-width: 2.9em; font-weight: 600; font-variant-numeric: tabular-nums; color: color-mix(in srgb, var(--stage-ink) 58%, transparent); }
.ag.no-clock .ag-time { display: none; }
.ag-mark {
  width: 1.7em; height: 1.7em; border-radius: 50%; display: grid; place-items: center;
  background: color-mix(in srgb, var(--stage-ink) 8%, transparent); font-size: .8em; font-weight: 700;
}
.ag-mark .icon { width: 1.1em; height: 1.1em; stroke-width: 3; display: none; }
.ag-row-title { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ag-row-min { white-space: nowrap; font-variant-numeric: tabular-nums; color: color-mix(in srgb, var(--stage-ink) 58%, transparent); }

.ag-row[data-state="now"] { border-color: color-mix(in srgb, var(--cat) 70%, transparent); background: color-mix(in srgb, var(--cat) 6%, var(--stage-bg)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--cat) 45%, transparent); }
.ag-row[data-state="now"] .ag-mark { background: var(--cat); color: #fff; }
.ag-row[data-state="now"] .ag-row-title { font-weight: 700; }
.ag-row[data-state="done"] { background: transparent; }
.ag-row[data-state="done"] .ag-mark { background: var(--ag-ok); color: #fff; }
.ag-row[data-state="done"] .ag-mark .ag-num { display: none; }
.ag-row[data-state="done"] .ag-mark .icon { display: block; }
.ag-row[data-state="done"] .ag-row-title { color: color-mix(in srgb, var(--stage-ink) 50%, transparent); text-decoration: line-through; text-decoration-thickness: 1px; }

/* ---- controls ---- */
.ag-prev .icon { transform: scaleX(-1); }

/* ---- the plan editor in the settings panel ---- */
.ag-editor { display: flex; flex-direction: column; gap: 8px; margin-bottom: 10px; }
.ag-ed-row {
  display: grid; grid-template-columns: 24px auto minmax(0, 1fr); grid-template-areas: "n title title" ". step tools";
  align-items: center; gap: 6px 8px; padding: 8px; border-radius: 12px;
  background: var(--card-alt); border: 1px solid var(--line);
}
.ag-ed-n {
  grid-area: n; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center;
  font-size: .75rem; font-weight: 700; background: color-mix(in srgb, var(--cat) 16%, var(--card)); color: var(--ink);
}
.ag-ed-row .ag-ed-title { grid-area: title; min-height: 36px; padding: 6px 10px; }
.ag-ed-step { grid-area: step; gap: 4px; }
.ag-ed-step .btn { width: 32px; min-height: 32px; padding: 0; }
.ag-ed-step input.ag-ed-min { width: 56px; min-height: 32px; padding: 4px 2px; -moz-appearance: textfield; appearance: textfield; }
.ag-ed-step input.ag-ed-min::-webkit-outer-spin-button, .ag-ed-step input.ag-ed-min::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.ag-ed-tools { grid-area: tools; justify-self: end; display: flex; gap: 2px; }
.ag-ed-btn { width: 32px; height: 32px; color: var(--ink-soft); }
.ag-ed-btn:disabled { opacity: .35; cursor: default; background: transparent; }
.ag-ed-btn.ag-up .icon { transform: rotate(180deg); }
.ag-ed-btn.ag-del:hover { color: var(--danger); }
.ag-ed-add .btn { flex: 0 0 auto; }