/* Rest — the Wins screen.
 *
 * Everything is scoped under .dom-wins so it cannot reach another domain: the
 * lesson from Mellow, whose unscoped stylesheet repainted the whole document.
 * It draws only with tokens the family already defines (--ink, --surface,
 * --accent, --edge), so it follows the one accent picker and dark mode for free.
 */
.screen.dom-wins{ padding:20px 20px calc(32px + var(--tabbar-h)); }

.dom-wins .wins-hero{ text-align:center; padding:22px 16px 18px; }
.dom-wins .wins-total{ display:flex; align-items:baseline; justify-content:center; gap:8px; }
.dom-wins .wins-total .num{
  font-size:56px; font-weight:800; line-height:1; letter-spacing:-.02em;
  color:var(--accent-text, var(--accent)); font-variant-numeric:tabular-nums;
}
.dom-wins .wins-word{ font-size:20px; font-weight:700; color:var(--ink); }
.dom-wins .wins-sub{ margin-top:6px; font-size:14px; }

/* The week: seven days, filled when you showed up. Today is ringed rather than
   coloured, so an empty today reads as "still to come", never as "missed". */
.dom-wins .wins-strip{ display:flex; gap:6px; justify-content:space-between; margin:4px 0 8px; }
.dom-wins .wins-day{ flex:1; display:flex; flex-direction:column; align-items:center; gap:6px; }
.dom-wins .wins-day .dot{
  width:30px; height:30px; border-radius:50%;
  background:var(--surface-quiet); border:1.5px solid var(--edge-strong);
}
.dom-wins .wins-day.on .dot{ background:var(--accent); border-color:var(--accent); }
.dom-wins .wins-day.today .dot{ box-shadow:0 0 0 3px var(--accent-wash, rgba(0,0,0,.08)); }
.dom-wins .wins-day.future .dot{ opacity:.5; border-style:dashed; }
.dom-wins .wins-day .lbl{ font-size:12px; font-weight:600; color:var(--ink-muted); }
.dom-wins .wins-nudge{ margin:6px 0 4px; font-size:14px; }

/* Today: three rows that double as shortcuts into each domain. */
.dom-wins .wins-today{ padding:4px 6px; }
.dom-wins .wins-go{
  width:100%; display:flex; align-items:center; gap:12px; text-align:left;
  padding:12px 8px; background:none; border:0; border-radius:10px; cursor:pointer;
  font:inherit; color:var(--ink); -webkit-tap-highlight-color:transparent;
}
.dom-wins .wins-go + .wins-go{ border-top:1px solid var(--edge); border-radius:0; }
.dom-wins .wins-go:focus-visible{ outline:2px solid var(--accent); outline-offset:-2px; }
.dom-wins .wins-tick{
  width:24px; height:24px; border-radius:50%; flex:none;
  display:inline-flex; align-items:center; justify-content:center;
  border:1.5px solid var(--edge-strong); font-size:14px; font-weight:800;
}
.dom-wins .wins-tick.on{ background:var(--accent); border-color:var(--accent); color:#fff; }
.dom-wins .wins-dom{ flex:1; font-weight:600; font-size:16px; }
.dom-wins .wins-state{ font-size:14px; }

.dom-wins .wins-recent{ padding:4px 14px; }
.dom-wins .wins-line{ display:flex; justify-content:space-between; gap:12px; padding:10px 0; font-size:15px; }
.dom-wins .wins-line + .wins-line{ border-top:1px solid var(--edge); }

/* How wins work: the rule table made visible, each with its own switch. */
.dom-wins .wins-rules{ margin-top:22px; border-top:1px solid var(--edge); padding-top:12px; }
.dom-wins .wins-rules summary{
  cursor:pointer; font-weight:700; font-size:15px; padding:6px 0; list-style:none;
}
.dom-wins .wins-rules summary::-webkit-details-marker{ display:none; }
.dom-wins .wins-rules summary::after{ content:" \203A"; color:var(--ink-muted); }
.dom-wins .wins-rules[open] summary::after{ content:" \2304"; }
.dom-wins .wins-rule{ display:flex; gap:12px; align-items:flex-start; padding:10px 0; cursor:pointer; }
.dom-wins .wins-rule input{ margin-top:3px; width:20px; height:20px; flex:none; accent-color:var(--accent); }
.dom-wins .wins-rule-text{ display:flex; flex-direction:column; gap:2px; }
.dom-wins .wins-rule-head{ display:flex; align-items:baseline; gap:8px; }
.dom-wins .wins-pts{ color:var(--accent-text, var(--accent)); font-weight:700; }
.dom-wins .wins-rule-desc{ display:block; }
.dom-wins .wins-rule-count{ color:var(--ink-muted); }