/* 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. */
/* INGET min-width: 0.

   Det stod har, och det lat ladan krympa under sitt langsta ord. Ett
   enda langt ord — "Meningskomplettering" — gar inte att bryta, sa texten
   flodade ut ur ladan och rakt in i antalet: "Meningskomplettering8
   uppgifter" vid 360, 390 och 430 px. Ladorna overlappade aldrig, och
   det var darfor ett forsta matforsok sade att felet inte gick att
   aterskapa: det matte ladornas lagen, inte var texten faktiskt ritas.

   Med standardvardet (min-width: auto) kan ladan inte bli smalare an sitt
   langsta ord, och da wrappar antalet och statusen till nasta rad — precis
   det kommentaren ovan beskriver. overflow-wrap ar skyddsnatet for ett
   ord som ar bredare an en hel rad: det bryts hellre an flodar over. */
.dagens-blocknamn { font-weight: 600; flex: 1 1 14ch; overflow-wrap: break-word; }
.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; }

/* Gamla prov hos UHR under generalrepetitionen. Samma form som
   helpasskortet ovan — de star i samma flode och ska lasas som jamlikar,
   inte som huvudsak och fotnot. Se ritaGamlaProv i dagens.js. */
.dagens-gamlaprov {
  display: grid;
  gap: var(--luft-2);
  padding: var(--luft-4);
  background: var(--yta);
  border: 1px solid var(--ram);
  border-radius: var(--radie);
}
.dagens-gamlaprov h2 { margin: 0; font-size: 1.05rem; }
.dagens-gamlaprov p { margin: 0; }
.dagens-gamlaprov .knapprad { gap: var(--luft-2); flex-wrap: wrap; }

/* Forra veckan — se ritaVeckokort. Samma ram som ovriga kort, men utan
   knapp att konkurrera med dagens pass. */
.dagens-vecka {
  margin: 16px 0 4px; padding: 12px 14px;
  border: 1px solid var(--ram); border-radius: var(--radie); background: var(--yta);
}
.dagens-veckahuvud { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.dagens-vecka h2 { font-size: 1rem; margin: 0; }
.dagens-vecka p { margin: 6px 0 0; }