/* ============================================================
   Zvonec One – Moje, Můj účet, Kdy nemůžu. Owned by package P1.
   Moje (#moje), Můj účet (#ucet), Kdy nemůžu (#kdy-nemuzu) and the add / change sheet of Kdy nemůžu.
   Tokens only (css/palettes.css → css/tokens.css), no raw colours. The frames (page, pane, section, row, empty)
   are the kit's (css/kit.css); this file draws only what these screens add.
   ============================================================ */

/* ---------- Moje: D = the date line → 12 → the card or the line → 32 → sections ---------- */
.mine { display: grid; align-content: start; min-width: 0; }
.mine-date { font-size: var(--type-body); line-height: var(--lh-body); color: var(--ink-2); }
.mine > .mine-date + * { margin-top: var(--gap-y); }
.mine > .ask + *, .mine > .mine-calm + *, .mine > .callout + *, .mine > .empty + * { margin-top: var(--section-gap); }
.mine > .section + .section { margin-top: var(--section-gap); }
.mine > .section + .row-link, .mine > .mine-calm + .row-link { margin-top: var(--space-3); }
.mine > .empty { margin-top: var(--space-5); }

/* the answer card: one duty at a time (--feature, r20, padding 20) */
.ask {
  display: grid; gap: var(--space-4); padding: 20px;
  border-radius: var(--shape-block); background: var(--feature);
  touch-action: pan-y;   /* a sideways swipe moves to the next / previous duty (ui/mine.js) */
}
.ask__top { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); }
.ask__label { font-size: var(--type-meta); line-height: var(--lh-meta); font-weight: var(--weight-strong); color: var(--ink-2); }
.ask__n { flex: none; font-size: var(--type-meta); line-height: var(--lh-meta); font-weight: var(--weight-strong); color: var(--ink-2); font-feature-settings: var(--numerals); }
.ask__duty { display: flex; align-items: center; gap: var(--space-4); min-width: 0; }
.ask__body { display: grid; gap: 2px; min-width: 0; }
.ask__title { justify-self: start; font-size: var(--type-lead); line-height: var(--lh-lead); font-weight: var(--weight-strong); color: var(--ink); text-decoration: none; }
.ask__title:hover { text-decoration: underline; text-underline-offset: 3px; }
.ask__meta { font-size: var(--type-meta); line-height: var(--lh-meta); color: var(--ink-2); overflow-wrap: normal; }
.ask__body > .row__note { margin-top: var(--space-1); }
/* the dots (2–5 waiting; more and „1 ze 12“ says it): 8 wide each, a 44 hit; the row takes 20 of the card's height */
.ask__dots { display: flex; min-width: 0; justify-content: center; height: 20px; margin: calc(-1 * var(--space-1)) 0 calc(-1 * var(--space-2)); }
.ask__dot {
  position: relative; display: grid; place-items: center; flex: 0 1 24px; min-width: 12px; height: 20px; padding: 0; border: 0;
  background: transparent; cursor: pointer;
}
.ask__dot::after { content: ""; position: absolute; inset: -12px 0; }   /* the 44 hit area */
.ask__dot::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--edge-control); transition: background-color var(--dur-state) var(--ease); }
.ask__dot:hover::before { background: var(--ink-3); }
.ask__dot[aria-current="true"]::before { background: var(--ink); }
/* after an answer the next duty slides in */
.ask[data-enter] .ask__duty { animation: ask-in 260ms var(--ease) both; }
@keyframes ask-in { from { opacity: 0; transform: translateX(24px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .ask[data-enter] .ask__duty { animation: none; } }

/* nothing waits: one line, no card */
.mine-calm { display: flex; align-items: center; gap: var(--space-2); min-height: var(--control-m); font-size: var(--type-body); line-height: var(--lh-body); color: var(--ink); }
.mine-calm:focus { outline: none; }
.mine-calm__mark { display: inline-flex; flex: none; }

/* Tvoje další služby, Odmítnuté služby */
.mine-ok { display: inline-flex; }
.mine-ok > .sym { width: 24px; height: 24px; }
.mine-next .row-link { margin-top: var(--space-2); }
.mine-row--quiet .row__title { color: var(--ink-2); }
.mine-row--quiet:is(:hover, [data-open]) .row__title { color: var(--ink); }

/* ---------- Moje ≥ 1200: two columns (WIDE plan; like Next's Domů) ----------
   Left: the answer card and my duties (max 640). Right: Obsazení's line, Tvoje vytížení, Kdy nemůžu – or, while a meeting is open,
   the pane in its place. Both columns 1fr until the left one reaches 640; 48 apart (64 from 1600); the frame is a list
   screen's (--frame-wide), so a 1920 window is used, not a phone column. Below 1200 none of this applies. */
@media (min-width: 1200px) {
  .mine-page { --mine-gap: var(--space-8); --mine-col: 640px; }
  .mine-page.page--split.ls--split .frame {
    max-width: var(--frame-wide, 1600px);
    grid-template-columns: minmax(0, min(var(--mine-col), calc((100% - var(--mine-gap)) / 2))) minmax(0, 1fr);
    column-gap: var(--mine-gap);
  }
  /* the overview is a column of the page, not a pane: it scrolls with the page */
  .mine-page .split__pane:has(> .mine-side) { position: static; }
  /* a head with its scope button is 44: lift it so the h2 sits level with the date line on the left */
  .mine-side > .section:first-child > .section-head:has(> .section-head__end) { margin-top: calc((var(--lh-lead) - var(--control-m)) / 2); }
}
@media (min-width: 1600px) { .mine-page { --mine-gap: var(--space-9); } }

.mine-side { display: grid; align-content: start; min-width: 0; }
.mine-side > * + * { margin-top: var(--section-gap); }
.mine-side > .mine-staff + * { margin-top: var(--space-6, 32px); }
.mine > :is(.mine-staff, .mine-load, .mine-off) { margin-top: var(--section-gap); }
.mine > .mine-staff + .mine-load { margin-top: var(--space-5); }

/* Obsazení (leaders): one line – the name, what is left (● chybí 1 · ● 2 problémy · ○ 3 čekají), › */
.mine-staff {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--space-3);
  min-height: var(--control-l); padding: var(--space-2) var(--space-3) var(--space-2) var(--space-4); border-radius: var(--radius-l);
  background: var(--tint); color: var(--ink); text-decoration: none;
  transition: background-color var(--dur-state) var(--ease);
}
.mine-staff:hover { background: var(--tint-2, var(--wash)); }
.mine-staff:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.mine-staff__title { font-weight: var(--weight-strong); }
.mine-staff__what { display: flex; flex-wrap: wrap; align-items: center; gap: 2px var(--space-3); min-width: 0; }
.mine-staff__done { display: inline-flex; align-items: center; gap: 6px; font-size: var(--type-meta); color: var(--ink-2); }
.mine-staff__done .sym { width: 16px; height: 16px; }
.mine-staff > .icon { color: var(--ink-3); }

/* Tvoje vytížení: the big number of this month against the limit, the pips, one sentence, three small numbers */
.load-card { display: grid; gap: var(--space-3); padding: var(--space-5); border-radius: var(--shape-block); background: var(--feature); }
.load-card__main { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--space-3) var(--space-5); }
.load-card__count { display: flex; align-items: baseline; gap: var(--space-2); margin: 0; min-width: 0; }
.load-card__n { font-family: var(--font-title); font-size: 56px; line-height: 48px; color: var(--ink); font-feature-settings: var(--numerals); }
.load-card__of { font-size: var(--type-meta); line-height: var(--lh-meta); color: var(--ink-2); }
.load-pips { display: flex; flex-wrap: wrap; gap: 6px; padding-bottom: 6px; }
.load-pip { width: 18px; height: 18px; border-radius: 6px; box-shadow: inset 0 0 0 2px var(--edge-control); }
.load-pip[data-on] { background: var(--act); box-shadow: none; }
.load-pip[data-on][data-over] { background: var(--wait-solid); }
.load-card__say { margin: 0; font-size: var(--type-meta); line-height: var(--lh-meta); color: var(--ink); }
.load-card__say[data-tone="wait"] { color: var(--wait-ink); font-weight: var(--weight-strong); }
.load-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: var(--space-3); padding-top: var(--space-3); border-top: 1px solid var(--hairline); }
.load-stat { display: grid; gap: 2px; min-width: 0; }
.load-stat__value { font-size: var(--type-body); line-height: var(--lh-body); font-weight: var(--weight-strong); color: var(--ink); overflow-wrap: anywhere; font-feature-settings: var(--numerals); }
.load-stat__label { font-size: var(--type-caption); line-height: var(--lh-caption); color: var(--ink-2); }
.load-stat[data-warn] .load-stat__value { color: var(--wait-ink); }

/* ---------- Můj účet ---------- */
.acct { display: grid; min-width: 0; }
.acct > * + * { margin-top: var(--section-gap); }
.acct-who { display: flex; align-items: center; gap: var(--space-4); min-width: 0; }
.acct-who__text { display: grid; gap: 2px; min-width: 0; }
.acct-who__name { font-size: var(--type-lead); line-height: var(--lh-lead); font-weight: var(--weight-strong); overflow-wrap: anywhere; }
.acct-who__role { font-size: var(--type-meta); line-height: var(--lh-meta); color: var(--ink-2); }
.acct .facts { margin: 0; }
.acct .section > .meta + .list { margin-top: var(--space-2); }
.acct-switch { margin-top: var(--space-3); padding-top: var(--space-3); border-top: 1px solid var(--hairline); }
/* The payment block (ui/give.js paymentBlock – Můj účet, the payment sheet, the poster): the details to copy on the
   left, the QR on the right; on a phone the QR waits behind „Ukaž QR kód“ (one cannot scan one's own screen). The QR
   stays black on white on every palette so a bank app reads it. Block geometry: --card, r20, padding 24. */
.give { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-6); align-items: start; padding: var(--space-5); border-radius: var(--shape-block); background: var(--card); box-shadow: 0 0 0 1px var(--edge); }
.give__details { min-width: 0; }
.give-qr { display: grid; justify-items: center; gap: var(--space-2); width: calc(var(--qr) + var(--space-5)); }
.give-qr .qr { display: block; width: var(--qr); height: var(--qr); border-radius: var(--radius-m); box-shadow: inset 0 0 0 1px var(--edge); }
.give-qr--poster { width: var(--qr-poster); }
.give-qr--poster .qr { width: var(--qr-poster); height: var(--qr-poster); }
.give-qr p { margin: 0; text-align: center; }
.give-qr-toggle { display: none; }
.give-sheet .give { padding: 0; background: none; box-shadow: none; }
.give--poster { align-items: center; }
@media (max-width: 599px) {
  .give { grid-template-columns: 1fr; gap: var(--space-3); padding: var(--space-3) var(--space-4) var(--space-4); }
  .give:not(.give--poster) > .give-qr { display: none; }
  .give-qr-toggle { display: block; }
  .give-qr-toggle .give-qr { margin: var(--space-3) auto 0; }
  .give--poster > .give-qr { justify-self: center; }
  .give-qr--poster { width: calc(var(--qr-poster) - var(--space-7)); }
  .give-qr--poster .qr { width: calc(var(--qr-poster) - var(--space-7)); height: calc(var(--qr-poster) - var(--space-7)); }
}
.acct-out { display: flex; }
.acct-out__btn { color: var(--no-ink); }
.acct-out__btn > .icon { color: var(--no-ink); }

/* ---------- Kdy nemůžu (#kdy-nemuzu) ---------- */
.off-page .page__body > .text { max-width: 34em; color: var(--ink-2); }
.off-page .page__body > .text + .list { margin-top: var(--space-5); }

/* the clash offer in the add / change sheet: the switch, then the duties it would decline */
.blockout-clash { display: grid; gap: var(--space-2); }
.blockout-clash[hidden] { display: none; }
.blockout-clash__list { display: grid; gap: var(--space-1); margin: 0; padding: var(--space-3) var(--space-4); list-style: none; border-radius: var(--radius-m); background: var(--tint); }
.blockout-clash__item { display: flex; flex-wrap: wrap; gap: 0 var(--space-2); font-size: var(--type-meta); line-height: var(--lh-meta); min-width: 0; }
.blockout-clash__when { flex: none; font-weight: var(--weight-strong); }
.blockout-clash__what { min-width: 0; color: var(--ink-2); overflow-wrap: anywhere; }