/* Idag — dagens pass. Appens ansikte: nedrakningen forst, sedan passet.
   Mobil forst, enbart variablerna i bas.css, funkar i ljust och morkt. */

.dagensvy { max-width: 620px; }

/* ---------- toppen: nedrakning, fas, svit ---------- */

.dagens-topp { margin-bottom: 4px; }

/* Nedrakningen ar sidans h1. Storleken kommer fran .dagens-dagar, sa
   rubriken sjalv far varken rubrikmarginal eller rubrikstorlek. */
.dagens-nedrakning {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 6px 0 0;
  font-size: 1rem;
  font-weight: 400;
}
.dagens-dagar {
  font-size: 2.4rem;
  font-weight: 750;
  line-height: 1.12;
  letter-spacing: -.015em;
  font-variant-numeric: tabular-nums;
}
.dagens-datum { color: var(--dampad); font-size: 1.05rem; }
#dagens-datumnot { margin: 6px 0 0; }
#dagens-datumnot a { color: var(--accent); }

.dagens-fas { margin: 14px 0 0; max-width: 52ch; }
.dagens-fas b { font-weight: 650; }

.dagens-svit { margin: 10px 0 0; }
.dagens-svit b { font-weight: 600; }

.dagens-svit-varning {
  border: 1px solid var(--ram);
  border-left: 3px solid var(--accent);
  background: var(--accent-svag);
  border-radius: 8px;
  padding: 10px 12px;
  margin: 10px 0 0;
  font-size: .9rem;
  max-width: 52ch;
}

/* ---------- dagens mal och mataren ---------- */

.dagens-malyta { margin: 20px 0 4px; }
.dagens-malrad {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 6px;
}
#dagens-mal-text { font-weight: 600; }
.dagens-mater {
  height: 10px;
  background: var(--accent-svag);
  border: 1px solid var(--ram);
  border-radius: 999px;
  overflow: hidden;
}
.dagens-mater-fyllning {
  height: 100%;
  width: 0%;
  background: var(--accent);
  border-radius: 999px;
  transition: width .3s ease;
}

/* ---------- blocklistan ---------- */

.dagens-blocklista { display: grid; gap: 10px; }

.dagens-block {
  background: var(--yta);
  border: 1px solid var(--ram);
  border-radius: var(--radie);
  padding: 12px 14px;
}
.dagens-blocklank {
  display: block;
  color: inherit;
  text-decoration: none;
}
.dagens-blocklank:hover { border-color: var(--accent); }
.dagens-block.klar { border-color: var(--ratt); }
.dagens-block.klar .dagens-blockstatus { color: var(--ratt); }

.dagens-blockhuvud {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;              /* langa delprovsnamn far bryta rad pa mobil */
  gap: 2px 8px;
  min-width: 0;
}
.dagens-blockkod {
  flex: none;
  font-weight: 700;
  font-size: .8rem;
  letter-spacing: .04em;
  color: var(--accent);
  background: var(--accent-svag);
  border: 1px solid var(--ram);
  border-radius: 6px;
  padding: 1px 6px;
}
/* flex-basis, inte 0.

   Med `flex: 1` (alltsa bas 0%) krympte namnet till en smal spalt i
   stallet for att radbrytningen anvandes: "Formler du behover kunna
   utantill" blev fem rader medan halva kortet stod tomt till hoger.
   En bas pa 14ch gor att antalet och statusen wrappar till nasta rad
   nar det borjar bli trangt — behallaren har redan flex-wrap. */
.dagens-blocknamn { font-weight: 600; flex: 1 1 14ch; min-width: 0; }
.dagens-blockmin { flex: none; }
.dagens-blockstatus {
  flex: none;
  /* Nar raden wrappar hamnar statusen ensam pa nasta rad. margin-left:auto
     halller den i hogerkanten under antalet i stallet for att lamna den
     foraldralos till vanster. Pa breda skarmar, dar allt ryms pa en rad,
     star den redan langst till hoger — regeln andrar ingenting da. */
  margin-left: auto;
  font-size: .85rem;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}
/* Varfor-raden: motiveringen fran prioriteringen — skillnaden mellan
   ett schema och en rekommendation. */
.dagens-blockvarfor { margin: 4px 0 0; max-width: 48ch; }

/* Metodblocket: engangsgrejen som ligger forst nar provet ar nara. */
.dagens-metodblock {
  border-left: 3px solid var(--accent);
  background: var(--accent-svag);
}

/* ---------- ordblocket inline ---------- */

.dagens-ordyta { margin-top: 10px; }

.dagens-ordkort {
  border-top: 1px solid var(--ram);
  padding-top: 10px;
}
.dagens-ordkort > .dampad.liten { margin: 0 0 4px; }

.dagens-ord {
  font-size: 1.5rem;
  font-weight: 700;
  margin: 2px 0 10px;
  letter-spacing: -.01em;
}

.dagens-alternativ { display: grid; gap: 6px; }
.dagens-alt {
  display: flex;
  align-items: center;
  gap: 10px;
  text-align: left;
  font: inherit;
  padding: 9px 12px;
  border: 1px solid var(--ram);
  background: var(--bg);
  color: var(--text);
  border-radius: var(--radie);
  cursor: pointer;
}
.dagens-alt:hover:not([disabled]) { border-color: var(--accent); }
.dagens-alt[disabled] { cursor: default; }
.dagens-alt.ratt { border-color: var(--ratt); color: var(--ratt); }
.dagens-alt.fel { border-color: var(--fel); color: var(--fel); }
.dagens-alt-bokstav {
  flex: none;
  width: 1.4em;
  font-weight: 650;
  color: var(--dampad);
}
.dagens-alt.ratt .dagens-alt-bokstav { color: var(--ratt); }
.dagens-alt.fel .dagens-alt-bokstav { color: var(--fel); }

.dagens-utfall { margin: 10px 0 2px; font-weight: 650; }
.dagens-utfall.ratt { color: var(--ratt); }
.dagens-utfall.fel { color: var(--fel); }

.dagens-betygsrad {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}
.dagens-betyg {
  font: inherit;
  padding: 8px 12px;
  border: 1px solid var(--ram);
  background: var(--yta);
  color: var(--text);
  border-radius: var(--radie);
  cursor: pointer;
}
.dagens-betyg:hover { border-color: var(--accent); }

.dagens-ordklart { margin: 10px 0 0; color: var(--dampad); }
.dagens-ordklart a { color: var(--accent); }

/* ---------- klart for idag ---------- */

.dagens-klart {
  margin-top: 14px;
  background: var(--yta);
  border: 1px solid var(--ratt);
  border-radius: var(--radie);
  padding: 16px;
}
.dagens-klart-rubrik {
  font-size: 1.2rem;
  font-weight: 700;
  margin: 0 0 6px;
  color: var(--ratt);
}
.dagens-klart p { margin: 0 0 4px; }
.dagens-klart p:last-child { margin-bottom: 0; }

/* ---------- tomt lage ---------- */

.dagens-tomt { margin-top: 20px; }
.dagens-tomt code {
  display: block;
  background: var(--yta);
  border: 1px solid var(--ram);
  border-radius: var(--radie);
  padding: 10px 12px;
  font-size: .82rem;
  overflow-x: auto;
  white-space: pre;
}

/* Lite mer luft och storre siffra pa storre skarmar. */
@media (min-width: 600px) {
  .dagens-dagar { font-size: 3rem; }
  .dagens-topp { margin-bottom: 10px; }
}

/* Helt provpass nara provdagen. Ligger utanfor dagens uppgiftsmal — se
   ritaHelpass i dagens.js. */
.dagens-helpass {
  display: grid;
  gap: var(--luft-2);
  padding: var(--luft-4);
  background: var(--yta);
  border: 1px solid var(--ram);
  border-radius: var(--radie);
}
.dagens-helpass h2 { margin: 0; font-size: 1.05rem; }
.dagens-helpass p { margin: 0; }
.dagens-helpass .knapprad { gap: var(--luft-2); flex-wrap: wrap; }