/* ================= Cycle tracker (cycle.js) =========================================
     Split out of styles.css so every hand-written file stays under 1000 lines (it was at 987).
     Loaded on every page, like the other screen files, but every class here is prefixed .cy-.
     ================================================================================== */

  .cy-home-i{width:34px; height:34px; border-radius:50%; display:flex; align-items:center; justify-content:center; background:rgba(173,156,160,.15); color:var(--cycle); flex:none}
  .cy-home-i svg{width:19px; height:19px}
  .cy-home-t{font-weight:700; font-size:15px}
  .cy-home-nudge{display:inline-block; margin-top:6px; font-size:11.5px; font-weight:700; color:var(--acc); background:rgba(180,143,154,.14); border-radius:999px; padding:3px 10px}
  .cy-status{background:rgba(173,156,160,.10); border:1px solid rgba(173,156,160,.32); border-radius:var(--r); padding:15px; margin-bottom:12px}
  .cy-status.intro{background:var(--card)}
  .cy-phase{font-size:19px; font-weight:800; color:var(--acc)}
  .cy-next{font-size:13px; color:var(--cycle); font-weight:700; margin-top:3px}
  .cy-p{font-size:13.5px; color:var(--mut); line-height:1.5; margin-top:6px}
  .cy-metrics{display:flex; gap:8px; margin-top:12px}
  .cy-metric{flex:1; background:var(--card); border:1px solid var(--line); border-radius:11px; padding:9px 6px; text-align:center}
  .cy-metric b{display:block; font-size:19px; font-weight:800; color:var(--acc)}
  .cy-metric span{display:block; font-size:10.5px; color:var(--mut2); margin-top:2px}
  .cy-note{font-size:12px; color:var(--mut); line-height:1.45; margin-top:11px; padding-top:10px; border-top:1px solid rgba(173,156,160,.3)}

  .cy-logger{background:var(--card); border:1px solid var(--line); border-radius:var(--r); padding:14px; margin-bottom:12px}
  /* The logger is a list of category drop-downs (Period & flow, Cycle & pain, …), each opening on tap. */
  .cy-log-h{display:flex; align-items:center; gap:10px; font-size:14px; padding-bottom:11px}
  /* The day's whole entry, spelled out by name, sits here at the top - the category rows stay bare. */
  .cy-log-sum{display:block; font-size:12.5px; line-height:1.5; color:var(--mut); margin-top:4px}
  .cy-sec{border-top:1px solid var(--line)}
  .cy-sec-h{display:flex; align-items:center; gap:10px; padding:13px 0; font-size:14px; font-weight:600}
  .cy-sec-cv{color:var(--mut2); font-size:17px; line-height:1; flex:none; transition:transform .15s}
  .cy-sec.on .cy-sec-cv{transform:rotate(90deg)}
  .cy-sec-b{padding:0 0 13px}
  .cy-back{font-size:12px; font-weight:700; color:var(--cycle); margin-left:4px}
  .cy-lbl{font-size:11.5px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--mut2); margin:12px 0 8px}
  .cy-lbl:first-of-type{margin-top:0}
  .cy-flows{display:flex; gap:6px}
  .cy-flow{flex:1; padding:9px 4px; border-radius:9px; border:1px solid var(--line); background:var(--card2); font-size:12.5px; font-weight:600; color:var(--mut)}
  .cy-flow.on{background:var(--sel); color:#fff; border-color:transparent}
  .cy-flow[data-cyflow=none].on{background:var(--bg2); color:var(--txt); border-color:rgba(180,143,154,.4)}
  .cy-syms{display:flex; flex-wrap:wrap; gap:7px}
  .cy-sym{padding:8px 12px; border-radius:999px; border:1px solid var(--line); background:var(--card2); font-size:13px; color:var(--txt)}
  .cy-sym.on{background:rgba(173,156,160,.18); border-color:var(--cycle); color:var(--acc); font-weight:600}
  .cy-sym.sev2{background:rgba(147,112,125,.30); color:var(--acctxt)}
  .cy-sym.sev3{background:var(--sel); border-color:var(--sel); color:#fff}
  .cy-hint{font-size:11.5px; color:var(--mut2); margin:9px 2px 0; line-height:1.4}
  /* A logged symptom carries its own ✕. Tapping the chip cycles mild - moderate - severe, so without
     this the only way back to "not logged" was to tap all the way round again. */
  .cy-symwrap{display:inline-flex; align-items:stretch; border:1px solid var(--cycle); border-radius:999px; overflow:hidden}
  .cy-symwrap.sev3{border-color:var(--sel)}
  .cy-symwrap .cy-sym{border:0; border-radius:0}
  .cy-symx{flex:none; padding:0 10px; font-size:11px; font-weight:700; color:var(--acc); background:var(--card2); border-left:1px solid var(--line)}
  .cy-symx:active{background:var(--sel); color:#fff}
  /* the way out of a whole day logged by mistake */
  .cy-clear{flex:none; align-self:flex-start; padding:7px 11px; border-radius:999px; border:1px solid var(--line); background:var(--card2); font-size:11.5px; font-weight:700; color:var(--mut); white-space:nowrap}
  .cy-clear:active{border-color:var(--acc); color:var(--acc)}
  .cy-note-in{width:100%; min-height:58px; margin-top:8px; border:1px solid var(--line); background:var(--card2); color:var(--txt); border-radius:12px; padding:10px 12px; font:inherit; font-size:15px; resize:vertical}
  .cy-note-in:focus{outline:none; border-color:var(--acc)}

  .cy-cal{background:var(--card); border:1px solid var(--line); border-radius:var(--r); padding:12px}
  .cy-cal-nav{display:flex; align-items:center; justify-content:space-between; margin-bottom:8px}
  .cy-cal-nav b{font-size:15px; font-weight:700}
  .cy-cal-nav button{width:34px; height:34px; border-radius:9px; color:var(--mut); font-size:20px}
  .cy-cal-nav button:active{background:var(--card2)}
  .cy-dows{display:grid; grid-template-columns:repeat(7,1fr); gap:4px; margin-bottom:4px}
  .cy-dow{text-align:center; font-size:10.5px; font-weight:700; color:var(--mut2)}
  .cy-grid{display:grid; grid-template-columns:repeat(7,1fr); gap:4px}
  .cy-cell{position:relative; aspect-ratio:1; min-width:0; border-radius:10px; border:1px solid transparent; background:rgba(173,156,160,.09); font-size:13px; font-weight:600; color:var(--txt); display:flex; align-items:center; justify-content:center}
  .cy-cell.empty{background:transparent; aspect-ratio:auto}
  /* One colour for every period day, whatever the flow - shading them by heaviness made the calendar
     look patchy (e.g. a medium day next to a heavy one). Flow is still recorded, just not colour-coded.
     Deep mauve, NOT the old --cycle taupe: that was only ~9% saturated, so phone screens (True Tone /
     Night Shift / warm adaptive display) tipped it to brown even though it looked fine on a monitor. */
  .cy-cell.flow{background:var(--sel); color:#fff; font-weight:700}
  .cy-cell.pred{background:transparent; border:1px dashed rgba(147,112,125,.55); color:var(--acc2)}
  .cy-cell.today{box-shadow:0 0 0 2px var(--acc)}
  .cy-cell.sel{box-shadow:0 0 0 2px var(--sel)}
  /* The selected ring is the same mauve as a period fill, so on a period day it would disappear -
     use a white inner ring there instead (matches the white day number sitting on it). */
  .cy-cell.flow.sel{box-shadow:inset 0 0 0 2px #fff}
  .cy-dot{position:absolute; bottom:4px; left:50%; transform:translateX(-50%); width:4px; height:4px; border-radius:50%; background:var(--acc)}
  .cy-cell.flow .cy-dot{background:#fff}
  .cy-legend{display:flex; gap:14px; margin-top:11px; padding-top:10px; border-top:1px solid var(--line); flex-wrap:wrap}
  .cy-legend span{display:flex; align-items:center; gap:5px; font-size:11.5px; color:var(--mut)}
  .cy-legend .lg{width:12px; height:12px; border-radius:4px; display:inline-block}
  .cy-legend .lg.flow{background:var(--sel)}
  .cy-legend .lg.pred{border:1px dashed rgba(147,112,125,.55)}
  .cy-legend .lg.dot{width:6px; height:6px; border-radius:50%; background:var(--acc)}
  .cy-phase-note{font-size:13px; color:var(--txt); line-height:1.5; margin-top:9px; opacity:.9}
  .cy-stats{background:var(--card); border:1px solid var(--line); border-radius:var(--r); padding:14px; margin-bottom:12px}
  .cy-stats-h{font-size:15px; font-weight:800; color:var(--acc); margin-bottom:10px}
  .cy-stats .cy-metrics{margin-top:0}
  .cy-stat-line{font-size:12.5px; color:var(--mut); margin-top:11px}
  .cy-rc{margin-top:2px}
  .cy-rc-row{display:flex; align-items:center; gap:10px; padding:8px 0; border-top:1px solid var(--line); font-size:13px}
  .cy-rc-row:first-child{border-top:0}
  .cy-rc-d{font-weight:700; min-width:78px}
  .cy-rc-flow{flex:1; color:var(--cycle); text-transform:capitalize; font-weight:600; font-size:12.5px}
  .cy-rc-len{color:var(--mut); white-space:nowrap; font-size:12.5px}
  .cy-freq{display:flex; flex-wrap:wrap; gap:7px}
  .cy-freq-chip{background:var(--card2); border:1px solid var(--line); border-radius:999px; padding:6px 11px; font-size:12.5px; color:var(--txt)}
  .cy-freq-chip b{color:var(--acc)}
  .cy-pred{margin-top:2px}
  .cy-pred-row{display:flex; align-items:center; justify-content:space-between; padding:8px 0; border-top:1px solid var(--line); font-size:13px}
  .cy-pred-row:first-child{border-top:0}
  .cy-pred-d{font-weight:700}
  .cy-pred-r{color:var(--cycle); font-weight:700; font-size:12.5px}
  .cy-insight{font-size:13.5px; color:var(--txt); line-height:1.5; margin-top:9px; padding-left:16px; position:relative}
  .cy-insight:before{content:''; position:absolute; left:0; top:7px; width:7px; height:7px; border-radius:50%; background:var(--cycle)}
  .cy-insight b{color:var(--acc)}
  .cy-report-btn{display:block; width:100%; text-align:center; margin:0 0 22px; padding:13px; border-radius:12px; background:var(--card); border:1px solid var(--acc); color:var(--acc); font-weight:700; font-size:14px}
  .cy-report-btn:active{background:var(--card2)}
  .cy-report{position:fixed; inset:0; z-index:60; background:var(--bg); overflow-y:auto; display:none}
  .cy-report.on{display:block}
  .cy-report-bar{position:sticky; top:0; display:flex; align-items:center; justify-content:space-between; gap:10px; padding:max(12px,env(safe-area-inset-top)) 14px 12px; background:var(--card); border-bottom:1px solid var(--line)}
  .cy-report-bar b{font-size:15px}
  .cy-report-bar button{color:var(--acc); font-weight:700; font-size:14px}
  .cy-rep-print{background:var(--acc); color:var(--acctxt) !important; padding:8px 14px; border-radius:999px}
  .cy-report-body{max-width:720px; margin:0 auto; padding:20px 18px calc(60px + env(safe-area-inset-bottom)); color:var(--txt); line-height:1.55}
  .cy-report-body h1{font-size:22px; margin:0 0 4px}
  .cy-report-body h2{font-size:16px; margin:22px 0 6px; color:var(--acc); border-bottom:1px solid var(--line); padding-bottom:4px}
  .cy-report-body .rep-meta{color:var(--mut); font-size:13px; margin:0 0 12px}
  .cy-report-body .rep-note{background:var(--card2); border-radius:10px; padding:10px 12px; font-size:13px; color:var(--mut); margin:0 0 8px}
  .cy-report-body .rep-sub{font-weight:700; margin:11px 0 2px; font-size:13.5px}
  .cy-report-body ul{margin:4px 0 8px; padding-left:20px}
  .cy-report-body li{margin:3px 0; font-size:14px}
  @media print{
    body > *:not(#cyReport){display:none !important}
    .cy-report{position:static; overflow:visible; background:#fff}
    .cy-report-bar{display:none !important}
    .cy-report-body{max-width:none; padding:0; color:#000}
    .cy-report-body h2{color:#000}
  }