/* =========================================================================
   faelles.css — Cyklus-tilpasningen (cy-) og Danmark-udfordringen (dk-).

   Ingen nye farver: kun toner af de faste. Cyklussens faser er fire toner af
   blå (aldrig regnbue). Solgul står kun, når en milepæl er rundet, eller når
   Danmark har nået målet.
   ========================================================================= */

/* ------------------------------------------------------ fælles kort-skelet */
.dk-kort, .cy-kort { display: block; margin-top: 12px; padding: 16px 18px; color: inherit; text-decoration: none; }
.dk-top, .cy-top { display: grid; grid-template-columns: 44px minmax(0, 1fr) 18px; gap: 12px; align-items: center; color: inherit; text-decoration: none; }
.cy-tilbud .cy-top, .cy-kort > .cy-top:not(a) { grid-template-columns: 44px minmax(0, 1fr); }
.dk-ikon, .cy-ikon { width: 44px; height: 44px; border-radius: 50%; background: var(--dis); color: var(--blaa-dyb); display: grid; place-items: center; }
.dk-ikon svg, .cy-ikon svg { width: 22px; height: 22px; }
.dk-navn b, .cy-navn b { display: block; font-family: var(--display); font-weight: 700; font-size: 17px; line-height: 1.2; letter-spacing: -.01em; }
.dk-navn small, .cy-navn small { display: block; color: var(--marine-2); font-size: 13.5px; margin-top: 2px; line-height: 1.35; }
.dk-top .pil, .cy-top .pil { color: var(--marine-3); }
.dk-top .pil svg, .cy-top .pil svg { width: 18px; height: 18px; display: block; }

/* ---------------------------------------------------------------- Danmark */
.dk-bar { position: relative; height: 10px; border-radius: 999px; background: var(--dis); overflow: hidden; margin-top: 14px; }
.dk-bar.stor { height: 16px; margin-top: 18px; }
.dk-fyld { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 999px; background: var(--blaa); transition: width .5s cubic-bezier(.2, .8, .2, 1); }
.dk-bar.i-maal .dk-fyld { background: var(--sol); }
/* Hakkene ved 25/50/75 % er luft i bjælken, ikke streger oven på den. */
.dk-hak { position: absolute; top: 0; bottom: 0; width: 3px; margin-left: -1.5px; background: var(--hvid); opacity: .9; }
.dk-fod { display: flex; justify-content: space-between; gap: 12px; margin-top: 10px; font-size: 13.5px; color: var(--marine-2); }
.dk-fod b { color: var(--marine); font-family: var(--display); font-size: 15px; margin-left: 4px; }
.dk-fejr { display: inline-block; background: var(--sol); color: var(--marine); font-weight: 700; font-size: 13.5px; padding: 4px 12px; border-radius: 999px; margin-bottom: 12px; animation: dk-hop .5s cubic-bezier(.2, .8, .2, 1.4); }
@keyframes dk-hop { from { transform: scale(.6); opacity: 0; } to { transform: none; opacity: 1; } }
.dk-kort.i-maal .dk-ikon { background: var(--sol); color: var(--marine); }

.dk-side .side-top { margin-top: 6px; }
.dk-side h1 { font-size: clamp(28px, 7vw, 40px); line-height: 1.05; text-wrap: balance; }
.dk-hoved { padding: 22px 20px 18px; }
.dk-stort { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
.dk-stort .tal { font-size: clamp(46px, 13vw, 72px); font-weight: 800; line-height: 1; letter-spacing: -.035em; }
.dk-stort span:last-child { color: var(--marine-2); font-weight: 600; font-size: 16px; }
.dk-skala { display: flex; justify-content: space-between; margin-top: 8px; font-size: 14px; font-weight: 600; color: var(--marine-2); }
.dk-buddy { margin-top: 22px; }
.dk-tal { margin-top: 22px; }
.dk-tal .tal { overflow-wrap: anywhere; }
.dk-hist .liste-rad { align-items: center; }
.dk-hist small, .cy-starter small { display: block; color: var(--marine-2); font-size: 13.5px; }
.dk-saadan { margin-top: 8px; }

/* ----------------------------------------------------------------- Cyklus */
/* Faserne: menstruation er den stærke tone, resten bliver lysere hen over cyklussen. */
.cy-bue { fill: none; }
.cy-bue.cy-menstruation { stroke: var(--blaa); }
.cy-bue.cy-follikulaer { stroke: var(--dis-2); }
.cy-bue.cy-aegloesning { stroke: var(--blaa); stroke-opacity: .42; }
.cy-bue.cy-luteal { stroke: var(--marine-3); stroke-opacity: .5; }
.cy-legende i.cy-menstruation { background: var(--blaa); }
.cy-legende i.cy-follikulaer { background: var(--dis-2); }
.cy-legende i.cy-aegloesning { background: rgba(31, 91, 255, .42); }
.cy-legende i.cy-luteal { background: rgba(133, 148, 184, .5); }

.cy-ring { width: 52px; height: 52px; display: block; overflow: visible; }
.cy-ring.stor { width: 220px; height: 220px; }
.cy-prik { fill: var(--hvid); stroke: var(--marine); stroke-width: 3; }
.cy-ring.stor .cy-prik { stroke-width: 2.5; }
.cy-ring text { text-anchor: middle; font-family: var(--display); fill: var(--marine); }
.cy-ring-tal { font-size: 30px; font-weight: 800; letter-spacing: -.03em; }
.cy-ring-dag { font-size: 14px; font-weight: 800; letter-spacing: -.02em; }
.cy-ring-af { font-size: 7.5px; font-weight: 600; fill: var(--marine-2) !important; font-family: var(--tekst) !important; }
.cy-top .cy-ring { width: 48px; height: 48px; }

.cy-tip { margin-top: 12px; font-size: 15px; line-height: 1.45; }
.cy-vaegt { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 10px; align-items: start; margin-top: 12px; padding: 12px 14px 12px 10px; background: var(--himmel); border-radius: var(--r-m); font-size: 14.5px; line-height: 1.45; }
.cy-laege { margin-top: 12px; padding: 11px 14px; background: var(--himmel); border-radius: var(--r-s); font-size: 14px; line-height: 1.45; color: var(--marine); }
.cy-side > .cy-laege { background: var(--hvid); box-shadow: var(--skygge); }
.cy-knapper { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin-top: 14px; }
.cy-laas { display: inline-block; }
p + .cy-laas { margin-top: 12px; }

.cy-opsaet .felt-raekke { margin-top: 2px; }
.cy-trin { height: 50px; }
.cy-trin button { height: 50px; }
.cy-trin input { text-align: right; }
.cy-note { margin-top: 10px; }
.cy-forbehold { margin-top: 14px; font-size: 13px; line-height: 1.45; }
.cy-opsaet .knap.bred { margin-top: 14px; }

.cy-side .side-top { margin-top: 6px; }
.cy-hoved { display: grid; gap: 18px; justify-items: center; padding: 22px 20px; }
.cy-info { width: 100%; }
.cy-info h2 { font-size: 26px; }
.cy-info > .daempet { margin-top: 4px; }
.cy-legende { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 14px; margin-top: 16px; }
.cy-legende span { display: grid; grid-template-columns: 12px minmax(0, 1fr); column-gap: 8px; align-items: center; font-size: 14px; }
.cy-legende i { width: 12px; height: 12px; border-radius: 50%; grid-row: 1 / 3; }
.cy-legende b { font-weight: 600; line-height: 1.2; }
.cy-legende small { color: var(--marine-2); font-size: 12.5px; grid-column: 2; }
.cy-buddy { margin-top: 22px; }
.cy-starter .liste-rad { align-items: center; }
.cy-slet { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; color: var(--marine-3); flex: none; }
.cy-slet svg { width: 16px; height: 16px; }
.cy-fra { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; margin-top: 14px; }
.tekstknap.cy-fare { color: var(--roed); }
.cy-side > .cy-forbehold { margin-top: 24px; }
.cy-prof .cy-knapper { margin-top: 12px; }

/* ------------------------------------------------------------------- PC */
@media (min-width: 920px) {
    .dk-kort, .cy-kort { padding: 18px 20px; transition: background .15s; }
    a.dk-kort:hover, .cy-kort a.cy-top:hover .cy-navn b { color: var(--blaa); }
    a.dk-kort:hover { background: var(--himmel-2); }
    .dk-hoved { padding: 28px 28px 22px; }
    .dk-tal { gap: 14px; }
    .cy-hoved { grid-template-columns: 240px minmax(0, 1fr); justify-items: start; align-items: center; gap: 32px; padding: 28px; }
    .cy-ring.stor { width: 240px; height: 240px; }
    .cy-info h2 { font-size: 30px; }
    .cy-slet:hover { background: var(--himmel); color: var(--roed); }
}