/* ══════════════════════════════════════════════════════════════════════════ css/period-tracker.css — THE PERIOD TRACKER (fw-pr) /period-tracker, built 29 Sep 2026. ITS OWN PAGE, CLEAN (third cut, 29 Sep: the owner found the cycle map "confusing, not clean, not professional" and asked for the plain, understandable feel of the other tools, with good graphs). Same tokens, gutters, masthead band, ambient light and no-cards rule as every page: §1 one question with an open calendar, one answer beside it (next period, fertile days, ovulation, the period after) §2 the CYCLE WHEEL with a legend of dates, and the next three periods §3 the PHASE BAR with today marked, then the four phases §4 your figures and a BAR CHART of your cycles against the usual band §4 four GAUGES: cycle length, how much it varies, period length, flow §5 a real photograph beside six numbered reasons to see a doctor §6 questions in two columns, then a closing line PALETTE: coral (--co / --co-ink) is this page's own colour; periods are pink, fertile days blue, ovulation deep blue, the usual range mint. Photographs are square. No inline styles: SVG attributes and classes carry every size. ══════════════════════════════════════════════════════════════════════════ */ /* ══════════════════════════════════════════════════════════════ 00 · TOKENS & PRIMITIVES ══════════════════════════════════════════════════════════════ */ .fw-pr-page{ --pad:28px; --ink:var(--dk-d); --line:color-mix(in srgb, var(--dk) 10%, transparent); --line-soft:color-mix(in srgb, var(--dk) 6%, transparent); --fade:linear-gradient(90deg, transparent, var(--line) 12%, var(--line) 88%, transparent); --fade-v:linear-gradient(180deg, transparent, var(--line) 14%, var(--line) 86%, transparent); --sec:clamp(30px, 5vh, 56px); --ease:cubic-bezier(.22,1,.36,1); --ease-pop:cubic-bezier(.34,1.56,.64,1); background:var(--wh); } .fw-pr{display:block;position:relative;background:var(--wh)} .fw-pr em{font-family:var(--ff);font-style:normal} .fw-pr-inner{position:relative;z-index:1;width:100%;padding-inline:var(--pad)} .fw-pr-sec{position:relative;padding:var(--sec) 0} .fw-pr-sec::before{content:"";position:absolute;left:var(--pad);right:var(--pad);top:0;z-index:1;height:1px;background:var(--fade)} .fw-pr-split{display:grid;grid-template-columns:minmax(0, .8fr) minmax(0, 1.3fr);gap:clamp(28px, 5vw, 80px);align-items:center} .fw-pr-head{display:flex;flex-direction:column;gap:8px;margin-bottom:clamp(16px, 2.6vh, 28px)} .fw-pr-head--row{flex-direction:row;align-items:flex-end;justify-content:space-between;gap:12px 40px;flex-wrap:wrap} .fw-pr-head--row > .fw-pr-sub{flex:1 1 320px;text-align:right} .fw-pr-eyebrow{display:inline-flex;align-items:center;gap:8px;margin:0;font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--co-ink)} .fw-pr-eyebrow .fw-ico{width:16px;height:16px;flex:none} .fw-pr-chip{padding:3px 10px;border-radius:999px;background:var(--co-ink);color:var(--wh);font-size:10.5px;letter-spacing:.06em} .fw-js .fw-pr-chip{display:none} .fw-pr-h2{margin:0;font-family:var(--ff);font-weight:600;color:var(--ink);font-size:clamp(26px, 4.2vh, 40px);line-height:1.12;letter-spacing:-.02em;text-wrap:balance} .fw-pr-h3{margin:0;font-family:var(--ff);font-size:16px;font-weight:600;line-height:1.3;color:var(--ink);transition:color .25s var(--ease)} .fw-pr-sub{margin:0;font-size:clamp(14.5px, 1.9vh, 16.5px);line-height:1.6;color:var(--g6);text-wrap:pretty} .fw-pr-btn{display:inline-flex;align-items:center;gap:9px;height:46px;padding:0 20px;border-radius:999px;background:var(--co-ink);color:var(--wh);font-size:14.5px;font-weight:600;transition:background .25s var(--ease), transform .25s var(--ease), box-shadow .25s var(--ease)} .fw-pr-btn:hover{background:var(--bl);color:var(--wh);transform:translateY(-2px);box-shadow:var(--bl-glow-sm)} .fw-pr-btn--pk{background:var(--pk-d);box-shadow:var(--pk-glow)} .fw-pr-btn--pk:hover{background:var(--pk-dd);box-shadow:var(--pk-glow-lg)} .fw-pr-btn .bi{transition:transform .25s var(--ease)} .fw-pr-btn:hover .bi-arrow-right{transform:translateX(4px)} .fw-pr-link{display:inline-flex;align-items:center;gap:8px;font-size:14.5px;font-weight:600;color:var(--co-ink);transition:color .2s var(--ease)} .fw-pr-link:hover{color:var(--bl-d)} .fw-pr-fx{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0} .fw-pr-spot{position:absolute;display:block;aspect-ratio:1;border-radius:50%;filter:blur(80px);animation:fw-pr-drift 27s ease-in-out infinite} .fw-pr-spot--p{top:0;left:-4%;width:clamp(220px, 24vw, 400px);background:color-mix(in srgb, var(--pk) 12%, transparent)} .fw-pr-spot--b{bottom:-10%;right:10%;width:clamp(200px, 20vw, 340px);background:color-mix(in srgb, var(--bl) 10%, transparent);animation-duration:23s} .fw-pr-spot--m{top:10%;right:4%;width:clamp(200px, 20vw, 340px);background:color-mix(in srgb, var(--co) 12%, transparent);animation-duration:31s} @keyframes fw-pr-drift{50%{transform:translate(26px, -20px) scale(1.06)}} @keyframes fw-pr-in{from{opacity:0;transform:translateY(8px)}} /* ══════════════════════════════════════════════════════════════ 01 · THE TOOL — one question with a calendar, one answer beside it ══════════════════════════════════════════════════════════════ */ .fw-pr .fw-pr-mast{position:relative;z-index:5;padding-bottom:clamp(20px, 3.4vh, 36px)} .fw-pr .fw-pr-h1{margin:0;font-size:clamp(30px, 5vh, 48px)} .fw-pr .fw-pr-h1 span{margin-left:.3em;font-size:.5em;font-weight:500;letter-spacing:-.01em;color:var(--co-ink)} .fw-pr-noscript{margin:14px 0 0;font-size:15px;color:var(--g6)} .fw-pr-tool{display:grid;grid-template-columns:minmax(0, .85fr) minmax(0, 1fr);gap:clamp(28px, 5vw, 80px);align-items:start;margin-top:clamp(16px, 2.8vh, 28px)} .fw-pr-ask{display:grid;gap:14px} .fw-pr-q{display:flex;align-items:center;gap:10px;margin:0;font-size:16px;font-weight:700;color:var(--ink)} .fw-pr-q b{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;background:var(--co-ink);color:var(--wh);font-size:13px} /* the calendar: open on the page, never boxed */ .fw-pr-qs{display:grid;gap:3px} .fw-pr-qhint{margin:0 0 0 36px;font-size:13px;color:var(--g5)} .fw-pr.is-adding .fw-pr-q b{background:var(--bl)} .fw-pr.is-adding .fw-pr-qhint,.fw-pr.is-adding .fw-pr-cal__head p{color:var(--bl-d)} .fw-pr-cal{display:grid;gap:6px} .fw-pr-cal__head{display:grid;grid-template-columns:40px minmax(0, 1fr) 40px;align-items:center} .fw-pr-cal__head p{margin:0;text-align:center;font-size:16px;font-weight:700;color:var(--ink)} .fw-pr-cal__head button{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--line);transition:background .2s var(--ease), color .2s var(--ease)} .fw-pr-cal__head button:hover:not(:disabled){background:var(--bl);color:var(--wh);box-shadow:none} .fw-pr-cal__head button:disabled{opacity:.3} .fw-pr-cal__dow,.fw-pr-cal__grid{display:grid;grid-template-columns:repeat(7, minmax(0, 1fr))} .fw-pr-cal__dow span{padding:6px 0;text-align:center;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--g5)} .fw-pr-cal__grid{row-gap:4px;padding-top:6px;position:relative} .fw-pr-cal__grid::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:var(--fade)} .fw-pr-cal__grid button{position:relative;display:grid;place-items:center;height:44px;padding:0;background:none} .fw-pr-cal__grid button span{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;font-size:15px;font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums;transition:background .2s var(--ease), color .2s var(--ease), box-shadow .2s var(--ease), transform .25s var(--ease-pop)} .fw-pr-cal__grid button:hover:not(:disabled) span{background:var(--bl-l);color:var(--bl-d);transform:scale(1.08)} .fw-pr-cal__grid button.is-today span{box-shadow:inset 0 0 0 2px var(--dk)} .fw-pr-cal__grid button.is-period span{background:var(--pk-l);color:var(--pk-dd)} .fw-pr-cal__grid button.is-logged span{box-shadow:inset 0 0 0 2px var(--pk)} .fw-pr-cal__grid button.is-pending span{background:var(--bl-l);color:var(--bl-d);box-shadow:inset 0 0 0 2px var(--bl)} .fw-pr-calfoot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 16px} .fw-pr-calkey{display:flex;flex-wrap:wrap;gap:6px 14px;margin:0;padding:0;list-style:none;font-size:12px;font-weight:600;color:var(--g5)} .fw-pr-calkey li{display:inline-flex;align-items:center;gap:6px} .fw-pr-calkey li::before{content:"";width:12px;height:12px;border-radius:50%} .fw-pr-calkey .is-last::before{background:var(--pk-d)} .fw-pr-calkey .is-logged::before{box-shadow:inset 0 0 0 2px var(--pk)} .fw-pr-calkey .is-today::before{box-shadow:inset 0 0 0 2px var(--dk)} .fw-pr-add{display:inline-flex;align-items:center;gap:7px;height:34px;padding:0 14px;border-radius:999px;font-size:13px;font-weight:700;color:var(--bl-d);box-shadow:inset 0 0 0 1.5px var(--bl-l2);transition:background .2s var(--ease), color .2s var(--ease)} .fw-pr-add:hover{background:var(--bl);color:var(--wh);box-shadow:none} .fw-pr.is-adding .fw-pr-add{background:var(--bl-l)} .fw-js .fw-pr:not(.is-live) .fw-pr-add{display:none} .fw-pr-hint{margin:0;font-size:13px;line-height:1.5;color:var(--g6)} .fw-pr-hint .bi{margin-right:6px;color:var(--bl)} .fw-pr-hint b{color:var(--ink)} .fw-pr-hint button{padding:0;font-size:13px;font-weight:700;color:var(--bl-d);text-decoration:underline;text-underline-offset:2px} .fw-pr-cal__grid button.is-last span{background:var(--pk-d);color:var(--wh);box-shadow:var(--pk-glow)} .fw-pr-cal__grid button:disabled span{color:var(--g4);opacity:.5} .fw-pr-cal__grid button:disabled{cursor:default} .fw-pr-set{display:flex;flex-wrap:wrap;gap:12px 28px} .fw-pr-step{display:inline-flex;align-items:center;gap:8px} .fw-pr-step > span{margin-right:4px;font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--g5)} .fw-pr-step button{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;font-size:14px;color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--line);transition:background .2s var(--ease), color .2s var(--ease)} .fw-pr-step button:hover:not(:disabled){background:var(--bl);color:var(--wh);box-shadow:none} .fw-pr-step button:disabled{opacity:.3} .fw-pr-step output{min-width:70px;text-align:center;font-size:13px;font-weight:600;color:var(--g6)} .fw-pr-step output b{font-size:19px;color:var(--ink)} .fw-pr-msg{display:flex;flex-wrap:wrap;align-items:center;gap:6px 7px;margin:0;font-size:12.5px;color:var(--g5)} .fw-pr-msg.is-err{color:var(--rd-ink);font-weight:600} .fw-pr-msg.is-ok{color:var(--mt-ink);font-weight:600} .fw-pr-msg.is-ask{color:var(--ink);font-weight:600} .fw-pr-msg.is-ask button{height:32px;padding:0 14px;border-radius:999px;background:var(--bl);color:var(--wh);text-decoration:none} .fw-pr-msg.is-ask button + button{background:none;color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--line)} .fw-pr-msg button{padding:0;font-size:12.5px;font-weight:700;color:var(--co-ink);text-decoration:underline;text-underline-offset:2px} /* the answer, beside a fade divider */ .fw-pr-ans{position:relative;min-height:100%} .fw-pr-ans::before{content:"";position:absolute;left:calc(clamp(28px, 5vw, 80px) / -2);top:0;bottom:0;width:1px;background:var(--fade-v)} .fw-pr-idle{display:none} .fw-js .fw-pr:not(.is-live) .fw-pr-idle{display:grid;justify-items:start;gap:12px;padding-top:clamp(20px, 6vh, 70px)} .fw-js .fw-pr:not(.is-live) .fw-pr-res{display:none} .fw-pr-idle__ico{width:64px;height:64px;border-radius:50%;display:grid;place-items:center;background:var(--pk-l);color:var(--pk-dd);font-size:26px;animation:fw-pr-float 3s ease-in-out infinite} @keyframes fw-pr-float{50%{transform:translateY(-5px)}} .fw-pr-idle__h{margin:0;font-size:clamp(22px, 3.4vh, 30px);font-weight:700;letter-spacing:-.02em;color:var(--ink)} .fw-pr-idle__p{margin:0;font-size:15.5px;line-height:1.6;color:var(--g6)} .fw-pr-res{display:grid;gap:8px} .fw-pr-res__k{display:flex;align-items:center;gap:10px;margin:0;font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--co-ink)} .fw-pr-res__date{margin:0;font-size:clamp(40px, 7vh, 66px);font-weight:700;line-height:1.02;letter-spacing:-.03em;color:var(--pk-dd)} .fw-pr-res__in{margin:0 0 6px;font-size:16px;color:var(--g6)} .fw-pr-res__in b{color:var(--ink)} .fw-pr-res.is-new > *{animation:fw-pr-in .4s var(--ease)} .fw-pr-facts{display:grid;margin:0} .fw-pr-facts div{position:relative;display:grid;grid-template-columns:minmax(0, 1fr) auto;align-items:center;gap:12px;padding:13px 0} .fw-pr-facts div::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:var(--fade)} .fw-pr-facts dt{display:flex;align-items:center;gap:10px;font-size:15px;font-weight:600;color:var(--g7)} .fw-pr-facts dt .bi{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;font-size:13px} .fw-pr-facts .is-fertile .bi{background:var(--bl-l);color:var(--bl-d)} .fw-pr-facts .is-ov .bi{background:var(--bl-d);color:var(--wh);font-size:9px} .fw-pr-facts .is-after .bi{background:var(--pk-l);color:var(--pk-dd)} .fw-pr-facts dd{margin:0;font-size:17px;font-weight:700;color:var(--ink);text-align:right} .fw-pr-acts{display:flex;flex-wrap:wrap;gap:10px;margin-top:10px} .fw-pr-btn--ghost{background:var(--wh);color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--line)} .fw-pr-btn--ghost:hover{color:var(--wh)} .fw-pr-calnote{display:grid;gap:3px;margin-top:4px;animation:fw-pr-in .35s var(--ease)} .fw-pr-calnote[hidden]{display:none} .fw-pr-calnote p{margin:0;font-size:13px;line-height:1.55;color:var(--g6)} .fw-pr-calnote .fw-pr-calnote__ok{display:flex;align-items:center;gap:8px;font-weight:600;color:var(--mt-ink)} .fw-pr-calnote__link{font-weight:700;color:var(--bl-d);text-decoration:underline;text-underline-offset:3px} .fw-pr-calnote__link:hover{color:var(--pk-dd)} /* ══════════════════════════════════════════════════════════════ 02 · YOUR CYCLE AT A GLANCE — the wheel, its legend, the next three ══════════════════════════════════════════════════════════════ */ .fw-pr-glance{background:linear-gradient(180deg, var(--wh), color-mix(in srgb, var(--pk) 4%, var(--wh)))} .fw-pr-glance__grid{display:grid;grid-template-columns:minmax(0, .75fr) minmax(0, 1.25fr);gap:clamp(28px, 5vw, 80px);align-items:center} .fw-pr-wheel{position:relative;justify-self:center;width:clamp(240px, 38vh, 330px);aspect-ratio:1;margin:0} .fw-pr-wheel svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible} .fw-pr-wheel circle{fill:none;stroke-width:24;transition:stroke-dasharray .6s var(--ease), stroke-dashoffset .6s var(--ease), opacity .4s var(--ease)} .fw-pr-wheel__base{stroke:color-mix(in srgb, var(--pu) 14%, var(--wh))} .fw-pr-wheel__period{stroke:var(--pk)} .fw-pr-wheel__fertile{stroke:var(--bl)} .fw-pr-wheel__ov{stroke:var(--bl-d)} .fw-pr-wheel .fw-pr-wheel__today{fill:var(--dk);stroke:var(--wh);stroke-width:5;transition:cx .6s var(--ease), cy .6s var(--ease)} .fw-pr-wheel__c{position:absolute;inset:22%;display:grid;align-content:center;justify-items:center;text-align:center;gap:2px} .fw-pr-wheel__c small{font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--co-ink)} .fw-pr-wheel__c b{font-size:clamp(30px, 5vh, 42px);font-weight:700;letter-spacing:-.03em;color:var(--ink);line-height:1.05} .fw-pr-wheel__c span{font-size:13px;color:var(--g5)} .fw-js .fw-pr:not(.is-live) .fw-pr-wheel__today{opacity:0} .fw-js .fw-pr:not(.is-live) .fw-pr-wheel__c small{visibility:hidden} .fw-pr-glance__side{display:grid;gap:clamp(16px, 2.6vh, 26px)} .fw-pr-legend{margin:0;padding:0;list-style:none} .fw-pr-legend li{position:relative;display:grid;grid-template-columns:16px minmax(0, 1fr) auto;align-items:center;gap:14px;padding:12px 0} .fw-pr-legend li + li::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:var(--fade)} .fw-pr-legend i{width:16px;height:16px;border-radius:5px} .fw-pr-legend .is-period i{background:var(--pk)} .fw-pr-legend .is-fertile i{background:var(--bl)} .fw-pr-legend .is-ov i{background:var(--bl-d)} .fw-pr-legend .is-next i{box-shadow:inset 0 0 0 2.5px var(--pk)} .fw-pr-legend span{display:grid;line-height:1.3} .fw-pr-legend b{font-size:16px;color:var(--ink)} .fw-pr-legend small{font-size:13px;color:var(--g5)} .fw-pr-legend em{font-size:16px;font-weight:700;color:var(--ink)} .fw-js .fw-pr:not(.is-live) .fw-pr-legend em{visibility:hidden} .fw-pr-next3__h{font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--g5)} .fw-pr-next3{display:grid;grid-template-columns:repeat(3, minmax(0, 1fr));gap:clamp(18px, 2.4vw, 32px);margin:-12px 0 0;padding:0;list-style:none} .fw-pr-next3 li{position:relative;display:grid;gap:2px} .fw-pr-next3 li + li::before{content:"";position:absolute;left:calc(clamp(18px, 2.4vw, 32px) / -2);top:0;bottom:0;width:1px;background:var(--fade-v)} .fw-pr-next3 b{font-size:clamp(18px, 2.6vh, 22px);font-weight:700;color:var(--pk-dd)} .fw-pr-next3 span{font-size:14px;font-weight:600;color:var(--ink)} .fw-pr-next3 small{font-size:12.5px;line-height:1.4;color:var(--g5)} .fw-js .fw-pr:not(.is-live) .fw-pr-next3,.fw-js .fw-pr:not(.is-live) .fw-pr-next3__h{display:none} /* ══════════════════════════════════════════════════════════════ 03 · THE FOUR PHASES — one bar with day numbers, today pinned, four columns ══════════════════════════════════════════════════════════════ */ .fw-pr-pbar{display:block;width:100%;height:92px;overflow:visible} .fw-pr-pbar__seg{transition:x .5s var(--ease), width .5s var(--ease)} .fw-pr-pbar__seg.is-period{fill:var(--pk)} .fw-pr-pbar__seg.is-follicular{fill:var(--mt-d)} .fw-pr-pbar__seg.is-ovulation{fill:var(--bl)} .fw-pr-pbar__seg.is-luteal{fill:color-mix(in srgb, var(--pu) 70%, var(--wh))} .fw-pr-pbar__t{fill:var(--wh);font-size:13px;font-weight:700;text-anchor:middle} .fw-pr-pbar__d{fill:var(--g5);font-size:11.5px;font-weight:700} .fw-pr-pbar__d.is-end{text-anchor:end} .fw-pr-pbar__you line{stroke:var(--dk);stroke-width:2} .fw-pr-pbar__you circle{fill:var(--dk);stroke:var(--wh);stroke-width:3;transition:cx .5s var(--ease)} .fw-pr-pbar__you text{fill:var(--co-ink);font-size:12px;font-weight:700;text-anchor:middle} .fw-js .fw-pr:not(.is-live) .fw-pr-pbar__you{visibility:hidden} /* four columns: a 3D icon, the days, the name in plain words, then three labelled lines */ .fw-pr-phases{display:grid;grid-template-columns:repeat(4, minmax(0, 1fr));gap:clamp(12px, 1.6vw, 24px);margin:clamp(8px, 1.6vh, 16px) 0 0;padding:0;list-style:none} .fw-pr-ph{position:relative;display:grid;align-content:start;gap:8px;padding:18px clamp(10px, 1vw, 16px) 16px;transition:background .3s var(--ease);--ph:var(--pk);--phk:var(--pk-dd)} .fw-pr-ph.is-follicular{--ph:var(--mt-d);--phk:var(--mt-ink)} .fw-pr-ph.is-ovulation{--ph:var(--bl);--phk:var(--bl-d)} .fw-pr-ph.is-luteal{--ph:var(--pu);--phk:var(--pu-ink)} .fw-pr-ph::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;border-radius:2px;background:var(--ph);opacity:.45;transition:height .3s var(--ease), opacity .3s var(--ease)} .fw-pr-ph.is-now{background:linear-gradient(180deg, color-mix(in srgb, var(--ph) 10%, transparent), transparent 75%)} .fw-pr-ph.is-now::before{height:5px;opacity:1} .fw-pr-ph__top{display:flex;align-items:center;justify-content:space-between;gap:10px} .fw-pr-ph__ico{width:clamp(54px, 7.4vh, 68px);aspect-ratio:1;object-fit:contain;padding:6px;border-radius:50%;background:color-mix(in srgb, var(--ph) 12%, var(--wh));transition:transform .35s var(--ease-pop)} .fw-pr-ph:hover .fw-pr-ph__ico{transform:translateY(-3px) rotate(-4deg)} .fw-pr-ph__now{display:none;padding:4px 10px;border-radius:999px;background:var(--phk);color:var(--wh);font-size:11px;font-weight:700;letter-spacing:.04em} .fw-pr-ph.is-now .fw-pr-ph__now{display:inline-block} .fw-pr-ph__when{display:flex;align-items:center;gap:8px;margin:4px 0 0;font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--phk)} .fw-pr-ph__when i{width:10px;height:10px;border-radius:50%;background:var(--ph)} .fw-pr-ph .fw-pr-h3{display:grid;gap:2px;font-size:21px} .fw-pr-ph .fw-pr-h3 span{font-size:14.5px;font-weight:600;color:var(--phk)} .fw-pr-ph__list{display:grid;gap:10px;margin:6px 0 0} .fw-pr-ph__list div{display:grid;gap:2px} .fw-pr-ph__list dt{display:flex;align-items:center;gap:6px;font-size:11.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--g5)} .fw-pr-ph__list dt .bi{font-size:13px;color:var(--ph)} .fw-pr-ph__list dd{margin:0;font-size:14.5px;line-height:1.5;color:var(--g7)} .fw-js .fw-pr:not(.is-live) .fw-pr-ph::before{opacity:.45;height:3px} /* ══════════════════════════════════════════════════════════════ 04 · YOUR PERIODS SO FAR — the answer with a mood, three figures with their icons, then one row per cycle over a continuous usual band ══════════════════════════════════════════════════════════════ */ .fw-pr-hist{background:linear-gradient(180deg, var(--wh), color-mix(in srgb, var(--mt) 5%, var(--wh)))} .fw-pr-spot--g{bottom:-8%;right:-4%;width:clamp(220px, 24vw, 400px);background:color-mix(in srgb, var(--mt) 16%, transparent);animation-duration:29s} .fw-pr-defs{position:absolute;width:0;height:0;overflow:hidden} .fw-pr-stop.is-usual-a{stop-color:color-mix(in srgb, var(--pk) 38%, var(--wh))} .fw-pr-stop.is-usual-b{stop-color:var(--pk)} .fw-pr-stop.is-out-a{stop-color:color-mix(in srgb, var(--co) 60%, var(--wh))} .fw-pr-stop.is-out-b{stop-color:var(--co-ink)} .fw-pr-hist .fw-pr-split{align-items:start} .fw-pr-hist .fw-pr-head{margin-bottom:14px} /* the answer, with a mood medallion */ .fw-pr-verdict{display:grid;grid-template-columns:auto minmax(0, 1fr);align-items:center;gap:16px;--mo:var(--mt-l);--mok:var(--mt-ink)} .fw-pr-verdict.is-warn{--mo:var(--co-l);--mok:var(--co-ink)} .fw-pr-verdict.is-wait{--mo:var(--pk-l);--mok:var(--pk-dd)} .fw-pr-verdict__ico{width:clamp(46px, 6.4vh, 56px);aspect-ratio:1;border-radius:50%;display:grid;place-items:center;background:var(--mo);color:var(--mok);font-size:clamp(20px, 2.8vh, 26px);box-shadow:0 0 0 6px color-mix(in srgb, var(--mok) 7%, transparent)} .fw-pr-verdict__ico .bi{display:none} .fw-pr-verdict.is-ok .bi.is-ok,.fw-pr-verdict.is-warn .bi.is-warn,.fw-pr-verdict.is-wait .bi.is-wait{display:block} .fw-pr-sum{margin:0;font-size:clamp(18px, 2.5vh, 22px);line-height:1.45;font-weight:500;color:var(--g7);text-wrap:pretty} .fw-pr-sum b{font-weight:700;color:var(--pk-dd)} /* three figures, each beside its icon */ .fw-pr-stats{display:grid;grid-template-columns:repeat(3, minmax(0, 1fr));gap:clamp(14px, 1.8vw, 26px);margin:clamp(20px, 3.4vh, 30px) 0;padding:clamp(14px, 2.2vh, 20px) 0;list-style:none;position:relative} .fw-pr-stats::before,.fw-pr-stats::after{content:"";position:absolute;left:0;right:0;height:1px;background:var(--fade)} .fw-pr-stats::before{top:0} .fw-pr-stats::after{bottom:0} .fw-pr-stats li{position:relative;display:grid;grid-template-columns:auto minmax(0, 1fr);grid-template-rows:auto auto;column-gap:10px;align-items:center} .fw-pr-stats li + li::before{content:"";position:absolute;left:calc(clamp(14px, 1.8vw, 26px) / -2);top:4px;bottom:4px;width:1px;background:var(--fade-v)} .fw-pr-stats__ico{grid-row:span 2;width:clamp(42px, 6vh, 54px);aspect-ratio:1;object-fit:contain;transition:transform .35s var(--ease-pop)} .fw-pr-stats li:hover .fw-pr-stats__ico{transform:translateY(-3px) rotate(-5deg)} .fw-pr-stats__k{align-self:end;font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--g5)} .fw-pr-stats__v{align-self:start;white-space:nowrap;font-size:clamp(20px, 2.9vh, 27px);font-weight:700;letter-spacing:-.02em;line-height:1.15;color:var(--ink);font-variant-numeric:tabular-nums} .fw-pr-how{display:grid;gap:10px;margin:0;padding:0;list-style:none} .fw-pr-how li{display:grid;grid-template-columns:22px minmax(0, 1fr);gap:10px;font-size:14px;line-height:1.5;color:var(--g6)} .fw-pr-how .bi{font-size:16px;line-height:1.35;color:var(--co-ink)} .fw-pr-how b{color:var(--ink)} /* the rows: dates, a bar over the usual band, the length and a word */ .fw-pr-log{margin:0} .fw-pr-learn{position:relative;display:grid;grid-template-columns:auto minmax(0, 1fr) auto;align-items:center;gap:14px;margin-bottom:18px;padding:12px 0 12px 14px;background:linear-gradient(90deg, color-mix(in srgb, var(--pk) 9%, transparent), transparent 85%)} .fw-pr-learn::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--pk)} .fw-pr-learn[hidden]{display:none} .fw-pr-learn__ico{width:44px;aspect-ratio:1;object-fit:contain} .fw-pr-learn p{display:grid;gap:2px;margin:0;font-size:13px;line-height:1.45;color:var(--g6)} .fw-pr-learn p b{font-size:14.5px;color:var(--ink)} .fw-pr-learn__dots{display:flex;gap:7px} .fw-pr-learn__dots i{width:14px;height:14px;border-radius:50%;background:var(--wh);box-shadow:inset 0 0 0 2px var(--pk-l2);transition:background .3s var(--ease), box-shadow .3s var(--ease)} .fw-pr-learn__dots i.is-on{background:var(--pk-d);box-shadow:0 0 0 3px color-mix(in srgb, var(--pk) 18%, transparent)} .fw-pr-log__head,.fw-pr-row{display:grid;grid-template-columns:104px minmax(0, 1fr) 72px 96px 28px;column-gap:14px} .fw-pr-log__head{align-items:end;padding-bottom:10px;font-size:11.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--g5)} .fw-pr-log__head > span:last-child{grid-column:3 / -1} .fw-pr-log__axis{display:block;width:100%;height:26px;overflow:visible} .fw-pr-log__axis rect{fill:var(--mt-l)} .fw-pr-log__axis text{fill:var(--mt-ink);font-size:11px;font-weight:700;letter-spacing:0;text-transform:none;text-anchor:middle} .fw-pr-log__rows{max-height:clamp(280px, 46vh, 440px);overflow-y:auto;margin:0;padding:0;list-style:none;scrollbar-width:thin} .fw-pr-row{position:relative;align-items:center;transition:background .2s var(--ease)} .fw-pr-row::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:var(--fade);z-index:1} .fw-pr-row:hover{background:color-mix(in srgb, var(--pk) 4%, transparent)} .fw-pr-row p{margin:0} .fw-pr-row__when{display:grid;line-height:1.25;white-space:nowrap} .fw-pr-row__when b{font-size:14.5px;color:var(--ink)} .fw-pr-row__when small{font-size:12px;color:var(--g5)} .fw-pr-row__bar{display:block;width:100%;height:58px} .fw-pr-row__band{fill:color-mix(in srgb, var(--mt) 14%, transparent)} .fw-pr-row__fill{fill:url(#fw-pr-g-usual);transform-box:fill-box;transform-origin:left center;animation:fw-pr-grow .7s var(--ease) both} .fw-pr-row.is-short .fw-pr-row__fill,.fw-pr-row.is-long .fw-pr-row__fill{fill:url(#fw-pr-g-out)} .fw-pr-row.is-now .fw-pr-row__fill{fill:color-mix(in srgb, var(--pk) 12%, var(--wh));stroke:var(--pk);stroke-width:1.5;stroke-dasharray:5 4} .fw-pr-row.is-gap .fw-pr-row__fill{fill:var(--g3)} .fw-pr-row.is-next .fw-pr-row__fill{fill:color-mix(in srgb, var(--bl) 10%, var(--wh));stroke:var(--bl);stroke-width:1.5;stroke-dasharray:5 4} .fw-pr-row.is-next .fw-pr-row__when b{color:var(--bl-d)} .fw-pr-row.is-add .fw-pr-row__fill{fill:none;stroke:var(--g3);stroke-width:1.5;stroke-dasharray:5 5;animation:none} .fw-pr-row.is-add .fw-pr-row__when b{color:var(--g5)} .fw-pr-row.is-add .fw-pr-row__when small,.fw-pr-row.is-add .fw-pr-row__len{color:var(--g4)} .fw-pr-row.is-add:hover{background:color-mix(in srgb, var(--bl) 4%, transparent)} @keyframes fw-pr-grow{from{transform:scaleX(0)}} .fw-pr-row__len{font-size:16px;font-weight:700;color:var(--ink);white-space:nowrap;font-variant-numeric:tabular-nums} .fw-pr-row__tag{justify-self:start;padding:4px 11px;border-radius:999px;font-size:11.5px;font-weight:700;white-space:nowrap;background:var(--mt-l);color:var(--mt-ink)} .fw-pr-row.is-now .fw-pr-row__tag{background:var(--pk-l);color:var(--pk-dd)} .fw-pr-row.is-short .fw-pr-row__tag,.fw-pr-row.is-long .fw-pr-row__tag{background:var(--co-l);color:var(--co-ink)} .fw-pr-row.is-gap .fw-pr-row__tag{background:var(--g1);color:var(--g5)} .fw-pr-row.is-next .fw-pr-row__tag{background:var(--bl-l);color:var(--bl-d)} .fw-pr-row__addgo{grid-column:4 / -1;justify-self:start;display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 14px;border-radius:999px;font-size:12.5px;font-weight:700;color:var(--bl-d);box-shadow:inset 0 0 0 1.5px var(--bl-l2);transition:background .2s var(--ease), color .2s var(--ease)} .fw-pr-row__addgo:hover,.fw-pr-row.is-add:hover .fw-pr-row__addgo{background:var(--bl);color:var(--wh);box-shadow:none} .fw-pr-row__del{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;font-size:11px;color:var(--g4);opacity:.6;transition:background .2s var(--ease), color .2s var(--ease), opacity .2s var(--ease)} .fw-pr-row:hover .fw-pr-row__del{opacity:1;color:var(--g6)} .fw-pr-row__del:hover{background:var(--rd-ink);color:var(--wh)} .fw-pr-log figcaption{position:relative;display:flex;flex-wrap:wrap;align-items:center;gap:8px 18px;padding-top:12px;font-size:12.5px;font-weight:600;color:var(--g6)} .fw-pr-log figcaption::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:var(--fade)} .fw-pr-log__key{display:inline-flex;align-items:center;gap:7px} .fw-pr-log__key i{width:20px;height:9px;border-radius:5px} .fw-pr-log__key.is-usual i{background:linear-gradient(90deg, color-mix(in srgb, var(--pk) 38%, var(--wh)), var(--pk))} .fw-pr-log__key.is-out i{background:linear-gradient(90deg, color-mix(in srgb, var(--co) 60%, var(--wh)), var(--co-ink))} .fw-pr-log__key.is-now i{background:color-mix(in srgb, var(--pk) 12%, var(--wh));box-shadow:inset 0 0 0 1.5px var(--pk)} .fw-pr-log__key.is-next i{background:color-mix(in srgb, var(--bl) 10%, var(--wh));box-shadow:inset 0 0 0 1.5px var(--bl)} .fw-pr-log__lock{display:inline-flex;align-items:center;gap:6px;margin-left:auto;font-weight:500;color:var(--g5)} @media (prefers-reduced-motion:reduce){.fw-pr-row__fill{animation:none}} .fw-pr-empty{display:none;align-items:center;gap:12px;margin:0;font-size:16px;font-weight:600;color:var(--g7)} .fw-pr-empty .bi{width:44px;height:44px;flex:none;border-radius:50%;display:grid;place-items:center;background:var(--co-ink);color:var(--wh);font-size:18px} .fw-js .fw-pr:not(.is-live) .fw-pr-log > :not(.fw-pr-empty){display:none} .fw-js .fw-pr:not(.is-live) .fw-pr-empty{display:flex} /* ══════════════════════════════════════════════════════════════ 05 · IS MY CYCLE NORMAL — three gauges ══════════════════════════════════════════════════════════════ */ .fw-pr-norm{background:linear-gradient(180deg, color-mix(in srgb, var(--bl) 3%, var(--wh)), var(--wh))} .fw-pr-gauges{display:grid;grid-template-columns:repeat(3, minmax(0, 1fr));gap:clamp(22px, 3vw, 48px);margin:0;padding:0;list-style:none} .fw-pr-gi{position:relative;display:grid;grid-template-rows:auto auto 1fr;align-content:start;gap:14px;--gs:var(--g4);--gsk:var(--g5);--gsl:var(--g1)} .fw-pr-gi.is-ok{--gs:var(--mt-d);--gsk:var(--mt-ink);--gsl:var(--mt-l)} .fw-pr-gi.is-out{--gs:var(--co-ink);--gsk:var(--co-ink);--gsl:var(--co-l)} .fw-pr-gi + .fw-pr-gi::before{content:"";position:absolute;left:calc(clamp(22px, 3vw, 48px) / -2);top:0;bottom:0;width:1px;background:var(--fade-v)} .fw-pr-gi__top{display:grid;grid-template-columns:auto minmax(0, 1fr);align-items:center;gap:14px} .fw-pr-gi__ico{width:clamp(52px, 7vh, 64px);aspect-ratio:1;object-fit:contain;padding:5px;border-radius:50%;background:color-mix(in srgb, var(--pk) 7%, var(--wh));transition:transform .35s var(--ease-pop)} .fw-pr-gi:hover .fw-pr-gi__ico{transform:translateY(-3px) rotate(-5deg)} .fw-pr-gi .fw-pr-h3{font-size:19px} .fw-pr-gi__txt{margin:3px 0 0;font-size:13.5px;line-height:1.5;color:var(--g6)} .fw-pr-gi__you{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;margin:0;padding-top:12px;position:relative} .fw-pr-gi__you::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:var(--fade)} .fw-pr-gi__you b{font-size:clamp(24px, 3.4vh, 30px);font-weight:700;letter-spacing:-.02em;color:var(--ink);font-variant-numeric:tabular-nums} .fw-pr-gi.is-none .fw-pr-gi__you b{color:var(--g4)} .fw-pr-gi__chip{display:inline-flex;align-items:center;gap:6px;padding:4px 12px;border-radius:999px;background:var(--gsl);color:var(--gsk);font-size:12.5px;font-weight:700} .fw-pr-gi__chip::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--gs)} .fw-pr-gi__chip:empty{display:none} .fw-pr-gauge{display:block;width:100%;height:60px;overflow:visible} .fw-pr-gauge__track{fill:var(--g1)} .fw-pr-gauge__band{fill:var(--mt-d)} .fw-pr-gauge__bt{fill:var(--mt-ink);font-size:11.5px;font-weight:700;text-anchor:middle} .fw-pr-gauge__t{fill:var(--g5);font-size:11.5px;font-weight:600;text-anchor:start} .fw-pr-gauge__t.is-band{fill:var(--mt-ink);font-weight:700;text-anchor:middle} .fw-pr-gauge__t.is-end{text-anchor:end} .fw-pr-gauge__you{fill:var(--gs);stroke:var(--wh);stroke-width:4;transition:cx .6s var(--ease)} .fw-js .fw-pr:not(.is-live) .fw-pr-gauge__you{visibility:hidden} /* ══════════════════════════════════════════════════════════════ 06 · WHEN TO SEE A DOCTOR ══════════════════════════════════════════════════════════════ */ .fw-pr-doc__grid{align-items:stretch} .fw-pr-doc__pic{position:relative;margin:0;min-height:clamp(340px, 52vh, 520px);overflow:hidden} .fw-pr-doc__pic img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:45% 40%;transition:transform 1.2s var(--ease)} .fw-pr-doc__pic:hover img{transform:scale(1.04)} .fw-pr-doc__pic figcaption{position:absolute;left:0;right:0;bottom:0;display:flex;align-items:center;gap:10px;padding:48px 20px 18px;background:linear-gradient(180deg, transparent, color-mix(in srgb, var(--dk) 72%, transparent));color:var(--wh);font-size:14.5px;font-weight:600;line-height:1.45} .fw-pr-doc__pic figcaption .bi{flex:none;font-size:18px;color:var(--mt-l3)} .fw-pr-doc__grid > div{display:flex;flex-direction:column} .fw-pr-signs{display:grid;grid-template-columns:repeat(2, minmax(0, 1fr));grid-auto-rows:1fr;gap:0 clamp(22px, 3vw, 44px);margin:0 0 clamp(18px, 3vh, 28px);padding:0;list-style:none} .fw-pr-signs li{position:relative;display:grid;align-content:start;grid-template-columns:44px minmax(0, 1fr);column-gap:14px;row-gap:3px;padding:16px 0} .fw-pr-signs li:nth-child(n+3)::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:var(--fade)} .fw-pr-signs__n{grid-row:span 2;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:var(--co-l);color:var(--co-ink);font-size:19px;transition:background .25s var(--ease), color .25s var(--ease), transform .3s var(--ease-pop)} .fw-pr-signs li:hover .fw-pr-signs__n{background:var(--co-ink);color:var(--wh);transform:scale(1.06)} .fw-pr-signs li:hover .fw-pr-h3{color:var(--co-ink)} .fw-pr-signs .fw-pr-h3{font-size:16.5px} .fw-pr-signs p{margin:0;font-size:14px;line-height:1.5;color:var(--g6)} .fw-pr-doc__cta{display:flex;flex-wrap:wrap;align-items:center;gap:12px 26px;margin-top:auto} .fw-pr-doc__print{padding:0;background:none} .fw-js .fw-pr:not(.is-live) .fw-pr-doc__print{display:none} /* ══════════════════════════════════════════════════════════════ 07 · QUESTIONS — two columns, then the closing line ══════════════════════════════════════════════════════════════ */ .fw-pr-faq{background:linear-gradient(180deg, var(--wh), color-mix(in srgb, var(--co) 5%, var(--wh)))} .fw-pr-qa{columns:2;column-gap:clamp(24px, 4vw, 64px)} .fw-pr-qa details{position:relative;break-inside:avoid} .fw-pr-qa details::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--fade)} .fw-pr-qa summary{display:grid;grid-template-columns:minmax(0, 1fr) 22px;align-items:center;gap:12px;padding:14px 0;cursor:pointer;list-style:none} .fw-pr-qa summary::-webkit-details-marker{display:none} .fw-pr-qa__q{font-size:16px;font-weight:600;color:var(--ink);transition:color .2s var(--ease)} .fw-pr-qa summary .bi{font-size:14px;color:var(--g5);transition:transform .35s var(--ease), color .2s var(--ease)} .fw-pr-qa summary:hover .fw-pr-qa__q{color:var(--bl-d)} .fw-pr-qa details[open] .fw-pr-qa__q{color:var(--co-ink)} .fw-pr-qa details[open] summary .bi{transform:rotate(180deg);color:var(--co-ink)} .fw-pr-qa details p{margin:0;padding:0 30px 16px 0;font-size:15px;line-height:1.7;color:var(--g6);animation:fw-pr-in .35s var(--ease)} .fw-pr-close{position:relative;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px 40px;margin-top:clamp(24px, 4vh, 40px);padding-top:clamp(20px, 3vh, 30px)} .fw-pr-close::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:var(--fade)} .fw-pr-close__h{flex:1 1 380px;margin:0;font-family:var(--ff);font-size:clamp(20px, 3vh, 26px);font-weight:600;line-height:1.25;color:var(--ink);text-wrap:balance} .fw-pr-close__acts{display:flex;flex-wrap:wrap;align-items:center;gap:12px 22px} /* the doctor's print-out: only this block prints */ .fw-pr-print{display:none} @media print{ body *{visibility:hidden} .fw-pr-print,.fw-pr-print *{visibility:visible} .fw-pr-print{display:block;position:absolute;left:0;top:0;width:100%;padding:12mm;font-family:var(--ff);color:var(--dk)} .fw-pr-print h1{margin:0 0 4mm;font-size:18pt} .fw-pr-print p{margin:0 0 3mm;font-size:10.5pt} .fw-pr-print table{width:100%;border-collapse:collapse;margin:4mm 0;font-size:10pt} .fw-pr-print th,.fw-pr-print td{padding:2mm;border-bottom:1px solid var(--g3);text-align:left} } /* ══════════════════════════════════════════════════════════════ 08 · RESPONSIVE — and the phone as an app ══════════════════════════════════════════════════════════════ */ @media (max-width:1200px){ .fw-pr-gauges{grid-template-columns:repeat(3, minmax(0, 1fr))} .fw-pr-phases{grid-template-columns:repeat(2, minmax(0, 1fr));row-gap:26px} } @media (max-width:1024px){ .fw-pr-page{--pad:14px;--sec:clamp(32px, 8vw, 50px)} .fw-pr-h2{font-size:clamp(24px, 6.4vw, 32px)} .fw-pr .fw-pr-h1{font-size:clamp(28px, 8vw, 40px)} .fw-pr .fw-pr-h1 span{display:block;margin:.2em 0 0} .fw-pr-tool,.fw-pr-glance__grid,.fw-pr-split{grid-template-columns:minmax(0, 1fr)} .fw-pr-ans{padding-top:20px} .fw-pr-ans::before{left:0;right:0;top:0;bottom:auto;width:auto;height:1px;background:var(--fade)} .fw-js .fw-pr:not(.is-live) .fw-pr-idle{padding-top:4px} .fw-pr-head--row{align-items:flex-start} .fw-pr-head--row > .fw-pr-sub{text-align:left} .fw-pr-spot{filter:blur(50px)} .fw-pr-doc__pic{min-height:0;aspect-ratio:16/10} .fw-pr-qa{columns:1} /* The four phases swipe as a deck. */ .fw-pr-phases{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:var(--pad);margin-inline:calc(var(--pad) * -1);padding-inline:var(--pad);gap:22px;scrollbar-width:none} .fw-pr-phases::-webkit-scrollbar{display:none} .fw-pr-ph{flex:0 0 80%;scroll-snap-align:start} } @media (max-width:640px){ .fw-pr-cal__grid button{height:42px} .fw-pr-cal__grid button span{width:38px;height:38px;font-size:14px} .fw-pr-next3{grid-template-columns:minmax(0, 1fr);row-gap:12px} .fw-pr-next3 li + li::before{left:0;right:0;top:-6px;bottom:auto;width:auto;height:1px;background:var(--fade)} .fw-pr-pbar__t{display:none} .fw-pr-pbar__d:not(.is-end):not([data-pr-segd="period"]){display:none} .fw-pr-stats li{grid-template-columns:minmax(0, 1fr);row-gap:4px} .fw-pr-stats__ico{grid-row:auto} .fw-pr-stats__v{font-size:21px} .fw-pr-row{grid-template-columns:minmax(0, 1fr) auto auto 28px;grid-template-areas:"when len tag del" "bar bar bar bar";column-gap:10px;row-gap:2px;padding:10px 0 6px;min-height:0} .fw-pr-row__when{grid-area:when;display:flex;align-items:baseline;gap:5px}.fw-pr-row__len{grid-area:len}.fw-pr-row__tag{grid-area:tag}.fw-pr-row__del{grid-area:del;opacity:1}.fw-pr-row__bar{grid-area:bar;height:26px} .fw-pr-log__lock{margin-left:0} .fw-pr-row__addgo{grid-column:auto;grid-area:tag} .fw-pr-sum{font-size:17px} .fw-pr-verdict{gap:12px} .fw-pr-log__head{grid-template-columns:minmax(0, 1fr)} .fw-pr-log__head > span{display:none} .fw-pr-log__rows{max-height:none;overflow:visible} .fw-pr-gauges{grid-template-columns:minmax(0, 1fr)} .fw-pr-gi + .fw-pr-gi::before{left:0;right:0;top:-14px;bottom:auto;width:auto;height:1px;background:var(--fade)} .fw-pr-signs{grid-template-columns:minmax(0, 1fr);grid-auto-rows:auto} .fw-pr-signs li{padding:12px 0} .fw-pr-signs li:nth-child(2)::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:var(--fade)} } @media (prefers-reduced-motion:reduce){ .fw-pr *,.fw-pr *::before,.fw-pr *::after{transition:none !important;animation:none !important} }