/* /ucet/strazeni -- strážny pes account management.
   Ported from the design reference (handoff/design/2026-08-06-claude-design-
   output/strazny-pes.css, ".acct-wrap"/".pcard" rules) onto this repo's live
   tokens.css (navy/ink/surface/fit-* custom properties -- see tokens.css's
   two-block cascade note for why these all resolve under
   :root[data-ui-mode="new"], which base.html sets unconditionally).
   Class names carry an sz- prefix (this file is the only one that defines
   them, so the prefix is a readability aid, not a collision guard). Mobile
   breakpoint matches the rest of the redesign (720px, see profily.css/
   pricing-v3.css). */

.sz-wrap{ max-width:920px; margin:0 auto; padding:36px 40px 64px; width:100%; box-sizing:border-box; }
.sz-crumb{ font-size:12.5px; color:var(--ink-4); }
.sz-crumb b{ color:var(--ink-2); font-weight:600; }
.sz-h1{ margin:6px 0 6px; font-family:var(--font-display); font-weight:600; font-size:34px; letter-spacing:-.02em; color:var(--ink); }
.sz-sub{ margin:0 0 22px; font-size:14px; line-height:1.55; color:var(--ink-3); max-width:60ch; }

.sz-accessline{ display:flex; gap:10px; align-items:center; background:var(--navy-soft); border:1px solid var(--navy-line); border-radius:var(--r-md); padding:12px 16px; font-size:13px; color:var(--ink-2); margin-bottom:20px; }
.sz-accessline b{ color:var(--navy); }
.sz-dot{ width:8px; height:8px; border-radius:50%; background:var(--fit-good); flex:none; }

.sz-notyet{ background:var(--surface); border-radius:var(--r-md); padding:16px 18px; font-size:13.5px; line-height:1.6; color:var(--ink-3); }
.sz-notyet a{ font-weight:600; }

/* P1 owner-confusion fix (2026-09-23 QA): the one-line "is anything
   watching" summary above the (now active-first) card list. */
.sz-summary{ margin:0 0 16px; font-size:13.5px; font-weight:600; color:var(--ink-2); }

.sz-cards{ display:flex; flex-direction:column; gap:16px; }
.sz-card{ background:var(--white); border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--shadow-card); padding:20px 24px; display:flex; flex-direction:column; gap:13px; }

.sz-card__head{ display:flex; justify-content:space-between; gap:14px; align-items:center; }
.sz-who{ font-size:15.5px; font-weight:700; color:var(--ink); }
.sz-who small{ display:block; font-size:12px; font-weight:500; color:var(--ink-4); margin-top:2px; }

/* Toggle -- a real <button type=submit>, styled as the pill+knob switch.
   Label stays next to it always (never color alone -- accessibility, and
   matches the design note in STRAZNY-PES.md). */
.sz-tgl{ display:flex; align-items:center; gap:9px; font-size:12.5px; font-weight:600; color:var(--navy); background:none; border:none; padding:0; cursor:pointer; font-family:inherit; }
.sz-tgl.off{ color:var(--ink-4); }
.sz-tgl i{ width:44px; height:26px; border-radius:13px; background:var(--navy); position:relative; flex:none; font-style:normal; transition:.15s; }
.sz-tgl i:after{ content:""; position:absolute; top:2px; right:2px; width:22px; height:22px; border-radius:50%; background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.2); }
.sz-tgl.off i{ background:var(--line-2); }
.sz-tgl.off i:after{ right:auto; left:2px; }
.sz-tgl:focus-visible{ outline:2px solid var(--navy); outline-offset:3px; border-radius:4px; }

.sz-watchchips{ display:flex; flex-wrap:wrap; gap:6px; align-items:center; }
.sz-wchip{ background:var(--surface-2); border-radius:var(--r-pill); padding:5px 11px; font-size:12px; font-weight:500; color:var(--ink-3); font-variant-numeric:tabular-nums; }
.sz-elink{ font-size:13px; font-weight:600; color:var(--navy); margin-left:2px; }
.sz-elink:hover{ color:var(--navy-2); }

.sz-pdiv{ border-top:1px solid var(--line); }

.sz-lastline{ font-size:12.5px; color:var(--ink-4); display:flex; gap:14px; flex-wrap:wrap; }
.sz-lastline b{ color:var(--ink-3); font-weight:600; }

.sz-warnbar{ display:flex; gap:10px; align-items:flex-start; background:var(--fit-ok-soft); border:1px solid var(--fit-ok-line); color:var(--ink-2); border-radius:var(--r-md); padding:11px 14px; font-size:12.5px; line-height:1.55; }
.sz-warnbar svg{ width:14px; height:14px; flex:none; color:var(--fit-ok); margin-top:1px; }
.sz-warnbar b{ color:var(--fit-ok); }

.sz-sleepbar{ display:flex; gap:10px; align-items:flex-start; background:var(--surface-2); border:1px solid var(--line-2); color:var(--ink-3); border-radius:var(--r-md); padding:11px 14px; font-size:12.5px; line-height:1.55; }
.sz-sleepbar b{ color:var(--ink-2); }

.sz-emptyline{ font-size:13px; color:var(--ink-4); line-height:1.6; background:var(--surface); border-radius:var(--r-md); padding:12px 14px; }

.sz-btn{ font-family:var(--font-sans); font-size:13.5px; font-weight:600; border-radius:var(--r-md); display:inline-flex; justify-content:center; align-items:center; gap:8px; align-self:flex-start; border:1px solid transparent; cursor:pointer; text-decoration:none; }
.sz-btn--cta{ padding:12px 18px; background:var(--navy); color:#fff; }
.sz-btn--cta:hover{ background:var(--navy-2); }
.sz-btn--sec{ padding:11px 16px; font-size:13px; background:var(--white); color:var(--ink-2); border-color:var(--line-2); }
.sz-btn--sec:hover{ border-color:var(--ink-4); }

@media (max-width:720px){
  .sz-wrap{ padding:24px 20px 48px; }
  .sz-h1{ font-size:27px; }
  .sz-card{ padding:18px; }
}