/* home.css - everything that only the Home screen uses: the daily rings, the motivating line,
     "Today at a glance", the week card and the quick-link tiles.
     Split out of styles.css when that file hit the 1000-line limit. Loaded straight after it in
     index.html, so it can rely on the palette variables in :root there. */

  /* ---- Daily rings ("close your circles") ----
     Deliberately NOT three unrelated brand colours: a tonal ladder of her own mauve reads as one
     family and stays Atelier. Tracks are the same hue at ~12% so an empty ring still looks intentional. */
  .rings-card{background:linear-gradient(160deg,var(--card2),var(--card)); border:1px solid var(--line); border-radius:var(--r); padding:15px 16px 14px; margin-bottom:16px}
  .rings-head{display:flex; align-items:center; justify-content:space-between; min-height:16px; margin-bottom:8px}
  .rings-closed{font-size:12px; font-weight:700; color:var(--mut)}
  .rings-body{display:flex; align-items:center; gap:16px}
  .rings{width:124px; height:124px; flex:none; display:block}
  .ring-p{animation:ringdraw 1s cubic-bezier(.25,.9,.35,1) both}
  @keyframes ringdraw{ from{stroke-dashoffset:var(--d)} to{stroke-dashoffset:0} }
  @media (prefers-reduced-motion:reduce){ .ring-p{animation:none} }

  .ring-legend{flex:1; min-width:0; display:flex; flex-direction:column; gap:9px}
  /* rows are tappable (a link, or a button for the steps prompt), so they need the plain-element reset */
  .ring-leg{display:flex; align-items:center; gap:9px; width:100%; padding:0; text-align:left; background:none; border:0; color:inherit; font:inherit}
  .ring-leg:active{opacity:.55}
  .ring-dot{width:10px; height:10px; border-radius:50%; flex:none}
  .ring-leg-t{font-size:12.5px; font-weight:700; letter-spacing:.02em}
  .ring-leg-v{font-size:12.5px; color:var(--mut); margin-top:1px}
  .ring-leg.on .ring-leg-v{color:var(--acc2); font-weight:600}
  .ring-leg-s{font-size:11px; color:var(--mut2); margin-top:1px}
  .ring-tick{width:19px; height:19px; flex:none; border-radius:50%; display:flex; align-items:center; justify-content:center; background:rgba(180,143,154,.16); color:var(--acc2)}
  .ring-tick .ic{width:12px; height:12px; stroke-width:3}
  .rings-note{text-align:center; font-weight:700; font-size:13.5px; color:var(--acc2); margin-top:12px}
  .rings-stale{font-size:11.5px; color:var(--mut2); margin-top:10px; text-align:center}

  /* ---- Home - motivating line, "Today at a glance" card, week card, quick-link tiles ---- */
  .home-moti{display:flex; align-items:center; gap:8px; margin:0 2px 15px; color:var(--acc); font-size:13.5px; font-weight:600; line-height:1.45}
  .home-moti .ic{width:16px; height:16px; flex:none}
  .glance{background:var(--card); border:1px solid var(--line); border-radius:var(--r); overflow:hidden; margin-bottom:16px}
  .glance-row{display:flex; align-items:center; gap:12px; padding:13px 14px}
  .glance-row + .glance-row{border-top:1px solid var(--line)}
  .glance-row:active{background:var(--card2)}
  .glance-ic{width:36px; height:36px; border-radius:11px; display:flex; align-items:center; justify-content:center; background:rgba(180,143,154,.12); color:var(--acc); flex:none}
  .glance-ic .ic{width:19px; height:19px}
  .glance-ic.tone-warn{background:rgba(191,85,77,.12); color:var(--bad)}
  /* the cycle drop used to get its own greyer --cycle mauve here, which read as a different colour
     from its neighbours - it now shares the standard .glance-ic accent so the row looks uniform */
  .glance-t{font-weight:600; font-size:15px}
  .glance-s{font-size:12.5px; color:var(--mut); margin-top:2px}
  .glance-row .chev{color:var(--mut2)}

  .wk-card{background:linear-gradient(160deg,var(--card2),var(--card)); border:1px solid var(--line); border-radius:var(--r); padding:15px 16px; margin-bottom:16px}
  .wk-head{display:flex; align-items:center; justify-content:space-between; min-height:16px}
  .wk-streak{display:inline-flex; align-items:center; gap:5px; font-size:12px; font-weight:700; color:var(--acc)}
  .wk-streak .ic{width:14px; height:14px}
  .wk-open{display:flex; align-items:center; justify-content:space-between; margin-top:3px}
  .wk-title{font-size:22px; font-weight:800; letter-spacing:-.01em}
  .wk-sub{font-size:13px; color:var(--mut); margin-top:8px}
  /* One pip per workout in the week (replaces the old progress bar - Tina asked for no more bars).
     A filled pip = done, so the row reads as "3 of 5" at a glance without a number. */
  .wk-pips{display:flex; align-items:center; gap:7px; flex-wrap:wrap; margin-top:11px}
  .wk-pip{width:13px; height:13px; border-radius:50%; border:1.5px solid rgba(180,143,154,.45); background:transparent; flex:none}
  .wk-pip.on{background:var(--acc); border-color:var(--acc); box-shadow:0 0 0 3px rgba(180,143,154,.13)}
  .wk-start{display:flex; align-items:center; justify-content:center; gap:7px; background:var(--acc); color:var(--acctxt); font-weight:800; font-size:15px; padding:13px; border-radius:12px; margin-top:14px}
  .wk-start:active{background:var(--acc2)}
  .wk-startname{white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%}
  .wk-alldone{text-align:center; font-weight:700; font-size:14px; color:var(--acc); margin-top:13px}

  .home-tiles{display:grid; grid-template-columns:1fr 1fr; gap:11px}
  .home-tile{display:flex; flex-direction:column; gap:7px; background:var(--card); border:1px solid var(--line); border-radius:14px; padding:14px}
  .home-tile:active{background:var(--card2)}
  .home-tile .ic{width:22px; height:22px; color:var(--acc)}
  .home-tile-t{font-weight:700; font-size:14px}
  .home-tile-s{font-size:11.5px; color:var(--mut)}