/* ── Reset & base ──────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --bg:        #f5f6fa;
  --surface:   #ffffff;
  --border:    #e0e3eb;
  --text:      #1a1d2e;
  --muted:     #6b7280;
  --primary:   #4f46e5;
  --primary-h: #4338ca;
  --danger:    #dc2626;
  --danger-h:  #b91c1c;
  --success:   #16a34a;
  --radius:    8px;
  --shadow:    0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.04);
  color-scheme: light;
}

/* ── Mørkt tema (gull-aksent) ──────────────────────── */
html[data-theme="dark"] {
  --bg:        #14120d;
  --surface:   #1e1a13;
  --border:    #383021;
  --text:      #f2ede2;
  --muted:     #a89f8c;
  --primary:   #d4a843;
  --primary-h: #e5c067;
  --danger:    #f0997b;
  --danger-h:  #d85a30;
  --success:   #86c77d;
  --warn:      #e0a458;
  --shadow:    0 1px 3px rgba(0,0,0,.5), 0 1px 2px rgba(0,0,0,.4);
  color-scheme: dark;
}
html { background: var(--bg); }

/* Gull-knapper trenger mørk tekst i mørkt tema */
html[data-theme="dark"] .btn-primary,
html[data-theme="dark"] .btn-primary:hover { color: #1a140a; }
html[data-theme="dark"] .nav-links a:hover,
html[data-theme="dark"] .nav-links a.active { background: #2a2416; color: var(--primary); }
html[data-theme="dark"] .alert-success { background: #1c2e1f; color: #a8e0a0; border-color: #2f4a33; }
html[data-theme="dark"] .alert-error   { background: #3a1f18; color: #f0997b; border-color: #5a2f22; }

/* ── Primær nav-lenke (Undervisning) + tema-knapp ──── */
.nav-links a.nav-primary { background: var(--primary); color: #fff; font-weight: 600; }
.nav-links a.nav-primary:hover,
.nav-links a.nav-primary.active { background: var(--primary-h); color: #fff; text-decoration: none; }
html[data-theme="dark"] .nav-links a.nav-primary,
html[data-theme="dark"] .nav-links a.nav-primary:hover,
html[data-theme="dark"] .nav-links a.nav-primary.active { color: #1a140a; }

.theme-toggle {
  background: transparent; border: 1px solid var(--border);
  border-radius: var(--radius); cursor: pointer;
  font-size: 1rem; line-height: 1; padding: .35rem .5rem; color: var(--text);
}
.theme-toggle:hover { background: var(--bg); }

body { font-family: system-ui, -apple-system, sans-serif; background: var(--bg); color: var(--text); font-size: 15px; line-height: 1.5; }

a { color: var(--primary); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ── Navbar ────────────────────────────────────────── */
.navbar {
  display: flex; align-items: center; gap: 1.5rem;
  background: var(--surface); border-bottom: 1px solid var(--border);
  padding: .75rem 1.5rem; position: sticky; top: 0; z-index: 100;
  box-shadow: var(--shadow);
}
.brand { font-size: 1.1rem; font-weight: 700; color: var(--text); white-space: nowrap; }
.nav-links { display: flex; gap: .25rem; list-style: none; flex: 1; }
.nav-links a {
  padding: .4rem .8rem; border-radius: var(--radius);
  color: var(--muted); font-size: .9rem;
}
.nav-links a:hover, .nav-links a.active { background: var(--bg); color: var(--primary); text-decoration: none; }
.nav-user { display: flex; align-items: center; gap: .75rem; white-space: nowrap; }
.nav-user span { color: var(--muted); font-size: .9rem; }

/* ── Container ─────────────────────────────────────── */
.container { max-width: 1200px; margin: 0 auto; padding: 2rem 1.5rem; }

/* ── Login page ────────────────────────────────────── */
.login-page { display: flex; align-items: center; justify-content: center; min-height: 100vh; }
.login-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 2.5rem; width: 100%; max-width: 400px;
  box-shadow: var(--shadow);
}
.login-card h1 { text-align: center; font-size: 1.8rem; margin-bottom: .25rem; }
.login-card h2 { text-align: center; color: var(--muted); font-weight: 500; margin-bottom: 1.5rem; }

/* ── Buttons ───────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .5rem 1rem; border-radius: var(--radius); border: none;
  font-size: .875rem; font-weight: 500; cursor: pointer;
  text-decoration: none; transition: background .15s, opacity .15s;
  white-space: nowrap;
}
.btn-primary   { background: var(--primary);   color: #fff; }
.btn-primary:hover { background: var(--primary-h); text-decoration: none; color: #fff; }
.btn-danger    { background: var(--danger);    color: #fff; }
.btn-danger:hover  { background: var(--danger-h);  text-decoration: none; color: #fff; }
.btn-outline   { background: transparent; border: 1px solid var(--border); color: var(--text); }
.btn-outline:hover { background: var(--bg); text-decoration: none; }
.btn-outline-light { background: transparent; border: 1px solid rgba(255,255,255,.35); color: #e0eaf5; }
.btn-outline-light:hover { background: rgba(255,255,255,.1); text-decoration: none; }
.btn-ghost     { background: transparent; color: var(--muted); }
.btn-ghost:hover { background: var(--bg); color: var(--text); text-decoration: none; }
.btn-sm        { padding: .3rem .65rem; font-size: .8rem; }
.btn-block     { width: 100%; justify-content: center; }

/* ── Alerts ────────────────────────────────────────── */
.alert {
  padding: .75rem 1rem; border-radius: var(--radius);
  margin-bottom: 1rem; font-size: .9rem;
}
.alert-success { background: #dcfce7; color: #14532d; border: 1px solid #bbf7d0; }
.alert-error   { background: #fee2e2; color: #7f1d1d; border: 1px solid #fecaca; }

/* ── Page header ───────────────────────────────────── */
.page-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 1.25rem; flex-wrap: wrap; gap: .75rem;
}
.page-header h1 { font-size: 1.5rem; }
.page-actions { display: flex; gap: .5rem; }
.count {
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--border); border-radius: 99px;
  font-size: .75rem; font-weight: 600; padding: .1rem .5rem;
  vertical-align: middle; color: var(--muted);
}

/* ── Stats grid ────────────────────────────────────── */
.stats-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 1rem; margin-bottom: 2rem;
}
.stat-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 1.5rem; text-align: center;
  box-shadow: var(--shadow);
}
.stat-number { font-size: 2.5rem; font-weight: 700; color: var(--primary); }
.stat-label  { color: var(--muted); font-size: .875rem; margin-top: .25rem; }

/* ── Dashboard grid ────────────────────────────────── */
.dashboard-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(420px, 1fr));
  gap: 1.5rem;
}

/* ── Cards ─────────────────────────────────────────── */
.card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 1.25rem; box-shadow: var(--shadow);
}
.card-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 1rem;
}
.card-header h2 { font-size: 1rem; font-weight: 600; }
.card-link { display: block; margin-top: .75rem; font-size: .875rem; color: var(--primary); }
.pdf-current { background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius);
  padding: .5rem .75rem; font-size: .85rem; display: flex; flex-direction: column; }

/* ── Tables ────────────────────────────────────────── */
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: .9rem; }
th { text-align: left; padding: .6rem .75rem; font-size: .8rem; font-weight: 600; color: var(--muted); border-bottom: 2px solid var(--border); text-transform: uppercase; letter-spacing: .04em; }
td { padding: .65rem .75rem; border-bottom: 1px solid var(--border); vertical-align: middle; }
tr:last-child td { border-bottom: none; }
tr:hover td { background: var(--bg); }
.notes-cell { max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); font-size: .85rem; }
.actions { display: flex; gap: .4rem; align-items: center; white-space: nowrap; }
.actions form { margin: 0; }
.td-active { text-align: center; width: 44px; }
.active-toggle { width: 17px; height: 17px; cursor: pointer; accent-color: var(--primary); }
tr.student-inactive td { opacity: .45; }
tr.student-inactive td.td-active { opacity: 1; }

/* ── Search / filter ───────────────────────────────── */
.search-form, .filter-form {
  display: flex; align-items: center; gap: .75rem; flex-wrap: wrap;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: .75rem 1rem;
  margin-bottom: 1.25rem; box-shadow: var(--shadow);
}
.bibl-tabs { display: flex; gap: 0; border-bottom: 2px solid var(--border); margin-bottom: 0; }
.bibl-tab { padding: .5rem 1.1rem; font-size: .85rem; font-weight: 500; color: var(--muted);
  text-decoration: none; border-bottom: 2px solid transparent; margin-bottom: -2px;
  transition: color .15s, border-color .15s; }
.bibl-tab:hover { color: var(--text); text-decoration: none; }
.bibl-tab.active { color: var(--primary); border-bottom-color: var(--primary); font-weight: 700; }
.bibl-tab .count { font-size: .75rem; background: var(--bg); border-radius: 99px;
  padding: 0 .4rem; margin-left: .3rem; color: var(--muted); }
.search-form input[type=search] { flex: 1; min-width: 200px; }
.per-page-sel { margin-left: auto; font-size: .82rem; color: var(--muted); display: flex; align-items: center; gap: .4rem; }
.per-page-sel select { font-size: .82rem; padding: .2rem .3rem; border: 1px solid var(--border); border-radius: 4px; }
.range-label { font-size: .875rem; color: var(--muted); white-space: nowrap; }
.range-inputs { display: flex; flex-direction: column; gap: .25rem; }
.range-inputs input[type=range] { width: 160px; }

/* ── Forms ─────────────────────────────────────────── */
.form-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 1.5rem; box-shadow: var(--shadow);
  max-width: 680px; display: flex; flex-direction: column; gap: 1rem;
}
.steps-section { border-top: 1px solid var(--border); padding-top: .75rem; }
.steps-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: .5rem; }
.steps-head h3 { font-size: .9rem; font-weight: 600; margin: 0; }
.step-row { background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius);
  padding: .75rem; margin-bottom: .5rem; display: flex; flex-direction: column; gap: .5rem; }
.step-row-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: .25rem; }
.step-num { font-weight: 700; font-size: .85rem; color: var(--primary); }
label { display: flex; flex-direction: column; gap: .35rem; font-size: .875rem; font-weight: 500; }
input[type=text], input[type=email], input[type=tel], input[type=number],
input[type=url], input[type=password], input[type=search], input[type=file],
textarea, select {
  padding: .5rem .75rem; border: 1px solid var(--border); border-radius: var(--radius);
  font-size: .9rem; font-family: inherit; color: var(--text); background: var(--surface);
  transition: border-color .15s;
}
input:focus, textarea:focus, select:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(79,70,229,.12); }
textarea { resize: both; }
#notes-ta { min-width: 200px; }
input[type=range] { accent-color: var(--primary); cursor: pointer; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.form-actions { display: flex; gap: .75rem; align-items: center; padding-top: .5rem; }
.required { color: var(--danger); }
.time-split { display: flex; align-items: center; gap: 4px; }
.time-split select { width: auto; }
.time-colon { font-weight: 700; color: var(--muted); }

/* ── Badges ────────────────────────────────────────── */
.badge {
  display: inline-flex; align-items: center;
  padding: .2rem .55rem; border-radius: 99px;
  font-size: .75rem; font-weight: 600; color: #fff;
}
.embed-yt { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden;
  max-width: 320px; border-radius: 6px; }
.embed-yt iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.embed-spotify { border: 0; border-radius: 12px; height: 80px; width: 100%; max-width: 320px; }

/* ── Difficulty bar ────────────────────────────────── */
.diff-cell { display: flex; align-items: center; gap: .5rem; }
.diff-bar {
  width: 60px; height: 6px; border-radius: 3px; background: var(--border);
  position: relative; overflow: hidden;
}
.diff-bar::after {
  content: ''; position: absolute; inset: 0 calc(100% - var(--pct)) 0 0;
  background: var(--col); border-radius: 3px;
}

/* ── Pagination ────────────────────────────────────── */
.pagination { display: flex; gap: .35rem; margin-top: 1rem; flex-wrap: wrap; }
.pagination a {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; border-radius: var(--radius);
  border: 1px solid var(--border); font-size: .875rem; color: var(--text);
}
.pagination a:hover { background: var(--bg); text-decoration: none; }
.pagination a.active { background: var(--primary); color: #fff; border-color: var(--primary); }

/* ── Empty state ───────────────────────────────────── */
.empty-state { text-align: center; padding: 3rem 1rem; color: var(--muted); }

/* ── Responsive ────────────────────────────────────── */
@media (max-width: 640px) {
  .navbar { flex-wrap: wrap; gap: .5rem; }
  .nav-links { order: 3; width: 100%; }
  .dashboard-grid { grid-template-columns: 1fr; }
  .form-row { grid-template-columns: 1fr; }
  .page-header { flex-direction: column; align-items: flex-start; }
  .container { padding: 1rem; }
}

/* ── Teaching mode ──────────────────────────────────────────── */
.session-nav {
  display: flex; align-items: center; justify-content: space-between;
  background: var(--surface); border-bottom: 2px solid var(--primary);
  padding: .65rem 1.5rem; position: sticky; top: 53px; z-index: 90;
  gap: .75rem;
}
.session-center { text-align: center; flex: 1; }
.session-name { font-size: 1.05rem; font-weight: 700; }
.session-time { font-size: .8rem; color: var(--muted); }

.session-grid {
  display: block; padding: .6rem 0 4.5rem;
}
.info-panel {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 1.25rem; box-shadow: var(--shadow);
  position: sticky; top: 115px;
}
.info-name   { font-size: 1.2rem; font-weight: 700; margin-bottom: .5rem; }
.info-row    { font-size: .875rem; color: var(--muted); margin-bottom: .3rem; }
.info-actions{ margin-top: 1rem; display: flex; flex-direction: column; gap: .35rem; }
.btn-block   { width: 100%; justify-content: center; }

.session-main { display: flex; flex-direction: column; gap: 1rem; }

.hw-section {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 1.25rem; box-shadow: var(--shadow);
}
.hw-section h2 { font-size: 1rem; font-weight: 600; margin-bottom: .85rem; }

/* Huskelappens egen overskrift i avrundingen. Luft over, fordi den kommer
   rett etter timens notat og er en ANNEN ting: notatet er referat, lappen er
   en beskjed til deg selv før neste gang. */
.husk-tittel { margin-top: 1rem; display: flex; align-items: baseline; gap: .5rem; flex-wrap: wrap; }
.husk-hint   { font-size: .72rem; font-weight: 400; color: var(--muted); }
html[data-device="ipad"] .husk-hint { font-size: var(--fs-sm); }
#husk-ta {
  background: color-mix(in srgb, var(--warn) 10%, var(--surface));
  border-left: 3px solid var(--warn);
}
.hw-section-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: .85rem; }
.hw-section-head h2 { margin-bottom: 0; }
.hw-date  { font-size: .8rem; color: var(--muted); }

.hw-row   {
  display: flex; align-items: flex-start; gap: .65rem;
  padding: .6rem 0; border-bottom: 1px solid var(--border);
}
.hw-row:last-child { border-bottom: none; }
.hw-icon  { font-size: 1rem; flex-shrink: 0; padding-top: .1rem; }
.hw-label { flex: 1; min-width: 0; }
.hw-label strong { display: block; font-size: .9rem; }
.hw-label small  { color: var(--muted); font-size: .8rem; display: block; }
.hw-label .hw-tnote { color: var(--muted); font-size: .8rem; font-style: italic; }

.hw-status { display: flex; gap: .25rem; flex-shrink: 0; }
.sbtn {
  padding: .15rem .45rem; border-radius: 99px; border: 1px solid var(--border);
  font-size: .75rem; cursor: pointer; background: transparent; color: var(--muted);
  transition: all .12s; line-height: 1.6;
}
.sbtn:hover         { border-color: var(--primary); color: var(--primary); }
.sbtn.s-ikke-startet{ background: #fee2e2; color: #7f1d1d; border-color: #fecaca; }
.sbtn.s-pågår       { background: #fef3c7; color: #78350f; border-color: #fde68a; }
.sbtn.s-ferdig      { background: #dcfce7; color: #14532d; border-color: #bbf7d0; }

.hw-del {
  background: transparent; border: none; color: var(--muted); cursor: pointer;
  font-size: .9rem; padding: .25rem; border-radius: 4px; flex-shrink: 0;
}
.hw-del:hover { color: var(--danger); background: #fee2e2; }

.hw-curr { background: var(--bg); border-radius: var(--radius); padding: .5rem .65rem !important; margin-bottom: .4rem; border: 1px solid var(--border) !important; }
.hw-curr-actions { display: flex; align-items: center; gap: .2rem; flex-shrink: 0; }
.hw-piece-link { color: var(--muted); font-size: .85rem; padding: .2rem .3rem; border-radius: 4px; text-decoration: none; }
.hw-piece-link:hover { background: var(--border); text-decoration: none; }

.add-hw-wrap { margin-top: .75rem; }
.add-hw-row { display: flex; gap: .5rem; }
.add-hw-row select { width: 150px; flex-shrink: 0; }
.add-hw-row input  { flex: 1; }

.hw-results {
  border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--surface); max-height: 220px; overflow-y: auto;
}
.hw-res-row {
  padding: .55rem .75rem; cursor: pointer; border-bottom: 1px solid var(--border);
  font-size: .875rem; display: flex; justify-content: space-between; align-items: center;
}
.hw-res-row:last-child { border-bottom: none; }
.hw-res-row:hover { background: var(--bg); }
.res-sub { color: var(--muted); font-size: .8rem; }
.hw-res-new { color: var(--primary); font-weight: 600; border-bottom: 1px solid var(--border) !important; }
.hw-res-new:hover { background: color-mix(in srgb, var(--primary) 8%, transparent); }

.hw-warning {
  background: #fef3c7; border: 1px solid #fde68a; border-radius: var(--radius);
  padding: .5rem .75rem; font-size: .85rem; color: #78350f;
}

.prev-note {
  margin-top: .6rem; background: var(--bg); border-radius: var(--radius);
  padding: .5rem .75rem; font-size: .875rem; color: var(--muted); font-style: italic;
}
.muted-note { color: var(--muted); font-size: .875rem; }

/* ── Today list ─────────────────────────────────────────────── */
.today-list { display: flex; flex-direction: column; gap: .6rem; }
.today-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: .9rem 1.25rem;
  display: flex; align-items: center; gap: 1rem;
  box-shadow: var(--shadow); text-decoration: none; color: var(--text);
  transition: border-color .15s, transform .1s;
}
.today-card:hover { border-color: var(--primary); transform: translateX(3px); text-decoration: none; }
.today-done { border-left: 4px solid var(--success); }
.today-time { font-size: 1rem; font-weight: 700; color: var(--primary); min-width: 100px; white-space: nowrap; }
.today-info { flex: 1; }
.today-name { font-weight: 600; }
.today-meta { color: var(--muted); font-size: .85rem; }
.today-arrow{ color: var(--muted); }

/* ── Lesson history ──────────────────────────────────────────── */
.hist-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.hist-summary {
  display: flex; align-items: center; justify-content: space-between;
  padding: .85rem 1.25rem; cursor: pointer; list-style: none; user-select: none;
}
.hist-summary::-webkit-details-marker { display: none; }
.hist-summary:hover { background: var(--bg); }
.hist-date { font-weight: 600; }
.hist-meta { color: var(--muted); font-size: .85rem; }
.hist-body { padding: .5rem 1.25rem 1rem; border-top: 1px solid var(--border); }
.hist-status { font-size: .85rem; flex-shrink: 0; }
.hist-ferdig      { color: var(--success); }
.hist-pågår       { color: #78350f; }
.hist-ikke_startet{ color: var(--muted); }

@media (max-width: 768px) {
  .session-grid { grid-template-columns: 1fr; }
  .info-panel   { position: static; }
  .session-nav  { top: 0; flex-wrap: wrap; gap: .5rem; }
}

/* ── i18n language switcher ──────────────────────────────────── */
.lang-sw { display:flex; gap:.25rem; align-items:center; }
.lang-sw a { text-decoration:none; font-size:1.1rem; transition:opacity .15s; }
.lang-sw a:hover { opacity:1 !important; }

/* ── Container fluid (full-width pages) ─────────────────────── */
.container-fluid { width:100%; padding:1.25rem 1.5rem; }

/* ── Calendar ───────────────────────────────────────────────── */
.cal-header {
  display:flex; align-items:center; gap:.75rem; margin-bottom:1.25rem;
  flex-wrap:wrap;
}
.cal-header h1 { font-size:1.4rem; margin:0 .25rem; }

.cal-grid {
  display:grid;
  grid-template-columns: repeat(7, 1fr);
  gap:3px;
  max-width:700px;
}
.cal-dow {
  text-align:center; font-size:.75rem; font-weight:600;
  color:var(--muted); padding:.4rem 0; text-transform:uppercase;
}
.cal-cell {
  min-height:70px; border-radius:var(--radius);
  border:1px solid var(--border); background:var(--surface);
  padding:.4rem; text-decoration:none; color:var(--text);
  display:flex; flex-direction:column; align-items:flex-start;
  transition:border-color .12s, background .12s;
  position:relative;
}
.cal-cell:hover         { border-color:var(--primary); background:var(--bg); text-decoration:none; }
.cal-blank              { background:transparent; border-color:transparent; }
.cal-weekend            { background:#fafafa; }
.cal-today              { border-color:var(--primary); background:#ede9fe; }
.cal-today .cal-day-num { color:var(--primary); font-weight:800; }
.cal-has-lesson         { }
.cal-day-num            { font-size:.95rem; font-weight:500; }
.cal-dot {
  width:8px; height:8px; border-radius:50%;
  background:var(--primary); margin-top:auto; align-self:center;
}
.cal-legend             { margin-top:.75rem; font-size:.8rem; color:var(--muted); display:flex; align-items:center; gap:.5rem; }
.cal-today-swatch       { display:inline-block; width:14px; height:14px; border-radius:3px; background:#ede9fe; border:1px solid var(--primary); }

/* ── Day view extras ─────────────────────────────────────────── */
.today-num {
  min-width:28px; height:28px; border-radius:50%;
  background:var(--border); display:flex; align-items:center; justify-content:center;
  font-size:.8rem; font-weight:700; flex-shrink:0;
}

/* ── Schedule planner ────────────────────────────────────────── */
.sched-header {
  display:flex; align-items:center; gap:1rem; padding:1rem 1.5rem;
  border-bottom:1px solid var(--border); background:var(--surface);
  flex-wrap:wrap;
}
.sched-header h1 { font-size:1.2rem; margin:0; }
.sched-lock-row  { display:flex; align-items:center; gap:.75rem; }
.sched-lock-btn  {
  display:inline-flex; align-items:center; gap:.4rem;
  padding:.35rem .75rem; border:1px solid var(--border);
  border-radius:var(--radius); cursor:pointer; background:var(--surface);
  font-size:.875rem; transition:all .15s;
}
.sched-lock-btn:hover { border-color:var(--primary); }
.sched-last-mod  { font-size:.8rem; color:var(--muted); }

.sched-layout {
  display:grid; grid-template-columns:180px 1fr;
  height:calc(100vh - 120px); overflow:hidden;
}
.sched-unscheduled {
  border-right:1px solid var(--border); overflow-y:auto;
  padding:.75rem; background:var(--bg);
}
.sched-pool-title  { font-size:.75rem; font-weight:600; text-transform:uppercase; color:var(--muted); margin-bottom:.5rem; }
.sched-student-chip {
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--radius); padding:.4rem .6rem; margin-bottom:.35rem;
  font-size:.85rem; cursor:grab; user-select:none;
  display:flex; justify-content:space-between; align-items:center;
}
.sched-student-chip[draggable=true] { border-color:var(--primary); }
.sched-student-chip small { color:var(--muted); font-size:.75rem; }
.sched-pool-empty  { color:var(--muted); font-size:.85rem; text-align:center; padding:.75rem 0; }

.sched-grid-wrap { overflow:auto; }
.sched-grid {
  display:grid;
  grid-template-columns: 52px repeat(5, 1fr);
  min-width:600px;
}
.sg-corner    { background:var(--surface); border-bottom:2px solid var(--border); }
.sg-day-head  {
  text-align:center; font-size:.8rem; font-weight:600; padding:.5rem;
  background:var(--surface); border-bottom:2px solid var(--border);
  border-left:1px solid var(--border); position:sticky; top:0; z-index:5;
}
.sg-time      { font-size:.7rem; color:var(--muted); text-align:right; padding-right:.35rem; height:10px; line-height:10px; }
.sg-time-hour { height:10px; border-top:1px solid var(--border); }
.sg-cell      {
  border-left:1px solid var(--border); height:10px;
  position:relative; transition:background .1s;
}
.sg-cell-hour { border-top:1px solid var(--border); }
.sg-cell.drag-over { background:#ede9fe; }
.sg-cell.sg-conflict { background:#fee2e2; }

.sg-block {
  position:absolute; left:2px; right:2px; top:1px;
  background:#4f46e5; color:#fff; border-radius:4px;
  padding:2px 4px; font-size:.75rem; z-index:2;
  overflow:hidden; cursor:grab; touch-action:none;
  display:flex; flex-direction:column;
  transition: box-shadow .1s;
}
.sg-block-name { font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sg-block-time { font-size:.67rem; opacity:.85; font-variant-numeric: tabular-nums; }
.sg-block-dur  { display:none; }
.sg-block-remove {
  position:absolute; top:2px; right:2px;
  background:rgba(255,255,255,.25); border:none; color:#fff;
  border-radius:3px; cursor:pointer; font-size:.7rem;
  width:14px; height:14px; display:none; align-items:center; justify-content:center;
  padding:0;
}
.sg-block-remove:hover { background:rgba(255,255,255,.5); }

/* ── Elevkortet ──────────────────────────────────────────────── */
.card-page-header {
  display:flex; align-items:flex-start; justify-content:space-between;
  margin-bottom:1.5rem; flex-wrap:wrap; gap:.75rem;
}
.card-title-row { display:flex; align-items:center; gap:.75rem; flex-wrap:wrap; }
.card-title-row h1 { font-size:1.6rem; margin:0; }
.card-age { color:var(--muted); font-size:1rem; }

.toggle-active-btn {
  padding:.3rem .75rem; border-radius:99px; border:2px solid; cursor:pointer;
  font-size:.8rem; font-weight:600;
}
.is-active   { background:#dcfce7; color:#14532d; border-color:#bbf7d0; }
.is-inactive { background:#fee2e2; color:#7f1d1d; border-color:#fecaca; }

.card-form { max-width:800px; display:flex; flex-direction:column; gap:1.25rem; }
.card-section {
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--radius); padding:1.25rem; box-shadow:var(--shadow);
  display:flex; flex-direction:column; gap:.85rem;
}
.card-section h2 { font-size:1rem; font-weight:600; margin-bottom:.25rem; padding-bottom:.5rem; border-bottom:1px solid var(--border); }

@media (max-width:640px) {
  .sched-layout { grid-template-columns:1fr; }
  .sched-unscheduled { max-height:150px; }
  .cal-cell { min-height:50px; }
  .cal-grid { gap:2px; }
}

/* ══════════════════════════════════════════════════════
   WEEK CALENDAR  (teaching/index.php)
══════════════════════════════════════════════════════ */

/* Make body fill full height when week layout is present */
body:has(.wk-layout) { overflow:hidden; height:100vh; display:flex; flex-direction:column; }
body:has(.wk-layout) main { padding:0; flex:1; overflow:hidden; display:flex; flex-direction:column; }

.wk-layout {
  display: flex;
  flex: 1;
  overflow: hidden;
  font-size: 13px;
}

/* ── Left sidebar ─────────────────── */
.wk-sidebar {
  width: 260px;
  min-width: 200px;
  background: #0d1f33;
  color: #c8d8e8;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  flex-shrink: 0;
}

.wks-scope {
  padding: .85rem 1rem;
  border-bottom: 1px solid rgba(255,255,255,.08);
  flex-shrink: 0;
}
.wks-scope-title {
  font-size: .7rem; font-weight: 700; color: #7a9ab5;
  text-transform: uppercase; letter-spacing: .05em; margin-bottom: .5rem;
}
.wks-scope label {
  display: flex; align-items: center; gap: .45rem;
  font-size: .78rem; margin-bottom: .35rem; cursor: pointer;
}
.wks-scope input[type=radio] { accent-color: #4f8fcc; }

.wks-bookings { padding: .75rem; flex: 1; overflow-y: auto; }
.wks-bookings-head {
  display: flex; align-items: center; gap: .5rem;
  margin-bottom: .6rem; padding-bottom: .5rem;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.wks-bookings-title { font-weight: 700; font-size: .88rem; flex: 1; color: #e0eaf5; }
.wks-empty { font-size: .8rem; color: #7a9ab5; margin-top: .5rem; }
.wks-empty a { color: #5da8e8; }

.booking-card {
  background: #c8cf4d;
  color: #1a1d2e;
  border-radius: 4px;
  padding: .35rem .6rem;
  margin-bottom: .35rem;
  cursor: default;
  border-left: 3px solid #a8af2d;
}
.booking-card.unscheduled { background: #e8ecb8; opacity: .7; border-left-color: #b8bc6d; }
.booking-card[draggable="true"] { cursor: grab; }
.bc-name  { font-weight: 700; font-size: .8rem; }
.bc-sub   { font-size: .7rem; opacity: .75; margin-top: 1px; }
.bc-school { font-size: .7rem; color: #1d4ed8; }
.bc-sched { font-size: .67rem; color: #555; margin-top: 2px; }

/* ── Main area ────────────────────── */
.wk-main { flex: 1; overflow: auto; }

.wg-wrap { display: flex; min-width: 700px; }

/* Time labels column */
.wg-times { width: 56px; flex-shrink: 0; position: sticky; left: 0; z-index: 4; background: #f8f9fa; }

.wg-corner {
  height: 52px; display: flex; align-items: center; justify-content: center;
  background: #f0f2f7; border-bottom: 2px solid var(--border);
  border-right: 1px solid var(--border); position: sticky; top: 0; z-index: 6;
}
.wg-lock-btn {
  background: none; border: 1px solid transparent; font-size: 1rem; cursor: pointer;
  padding: 3px 8px; border-radius: 6px; display: flex; align-items: center; gap: 4px;
  white-space: nowrap; font-weight: 500; transition: background .15s, border-color .15s;
}
.wg-lock-btn:hover { background: rgba(0,0,0,.06); border-color: var(--border); }
.wg-lock-btn.is-unlocked { background: #d1fae5; border-color: #6ee7b7; color: #065f46; }
.wg-lock-btn.is-unlocked:hover { background: #a7f3d0; }

.wg-hour-row {
  display: flex; border-right: 1px solid var(--border); border-bottom: 1px solid #e5e7eb;
}
.wg-h-num {
  width: 22px; font-size: .68rem; color: #6b7280; padding-top: 3px;
  text-align: right; padding-right: 2px; flex-shrink: 0;
}
.wg-h-qs { flex: 1; display: flex; flex-direction: column; }
.wg-ql {
  flex: 1; font-size: .58rem; color: #adb5c0; padding-left: 2px;
  display: flex; align-items: flex-start; padding-top: 1px;
  border-top: 1px dashed #e5e7eb;
}
.wg-ql.wg-ql-h { border-top: 1px solid #d1d5db; }

/* Day columns */
.wg-day { flex: 1; min-width: 90px; border-right: 1px solid #e5e7eb; }

.wg-day-head {
  height: 52px; display: flex; align-items: center; justify-content: center;
  background: #f0f2f7; border-bottom: 2px solid var(--border);
  position: sticky; top: 0; z-index: 3;
}
.wg-today .wg-day-head { background: var(--primary); }
.wg-weekend .wg-day-head { background: #eaedf5; }
.wg-today.wg-weekend .wg-day-head { background: var(--primary); }

.wg-day-link { text-align: center; text-decoration: none; }
.wg-day-name { font-size: .75rem; font-weight: 700; color: var(--text); }
.wg-day-date { font-size: .68rem; color: var(--muted); }
.wg-today .wg-day-name,
.wg-today .wg-day-date { color: #fff; }

.wg-day-body {
  position: relative;
  background: #fff;
  border-bottom: 1px solid #e5e7eb;
}
.wg-weekend .wg-day-body { background: #f9fafb; }

/* Grid lines */
.wg-gl {
  position: absolute; left: 0; right: 0;
  border-top: 1px dotted #f0f0f0; pointer-events: none;
}
.wg-gl.wg-gl-h  { border-top: 1px solid #d1d5db; }
.wg-gl.wg-gl-hh { border-top: 1px dashed #e5e7eb; }

/* Drag highlight */
.wg-drag-over    { background: #eff6ff !important; }
.wg-drag-conflict { background: #fee2e2 !important; cursor: not-allowed; }

/* ── Lesson blocks ────────────────── */
.wk-block {
  position: absolute; left: 2px; right: 2px;
  background: #c8cf4d;
  border-left: 3px solid #8f9620;
  border-radius: 3px;
  padding: 2px 4px 2px 5px;
  overflow: hidden;
  text-decoration: none;
  color: #1a1d2e;
  display: flex; flex-direction: column;
  z-index: 1;
  cursor: pointer;
  transition: filter .12s, box-shadow .12s;
  box-shadow: 0 1px 3px rgba(0,0,0,.12);
}
.wk-block:hover { filter: brightness(1.06); z-index: 2; box-shadow: 0 2px 6px rgba(0,0,0,.18); text-decoration: none; }
.wkb-time { font-size: .6rem; color: #555; line-height: 1.2; }
.wkb-name { font-size: .72rem; font-weight: 700; line-height: 1.3; }

/* ── Right nav ────────────────────── */
.wk-rnav {
  width: 42px; flex-shrink: 0;
  background: #f0f2f7;
  border-left: 1px solid var(--border);
  display: flex; flex-direction: column;
  align-items: center; padding: .5rem 0; gap: .3rem;
}
.wkrn-btn {
  display: flex; align-items: center; justify-content: center;
  width: 32px; height: 32px;
  background: white; border: 1px solid var(--border);
  border-radius: 5px; text-decoration: none; color: var(--text);
  font-size: 1.1rem; cursor: pointer; transition: background .12s;
}
.wkrn-btn:hover { background: #e5e7eb; text-decoration: none; }
.wkrn-btn.wkrn-sm { font-size: .85rem; width: 30px; height: 30px; }

/* ══════════════════════════════════════════════════════
   NOTE EXERCISE  (session.php + note_reader.php)
══════════════════════════════════════════════════════ */
.nex-card {
  background: #f0f4ff;
  border: 1px solid #c7d2fe;
  border-left: 4px solid var(--primary);
  border-radius: var(--radius);
  padding: .65rem .85rem;
  margin-bottom: .6rem;
  display: flex; flex-direction: column; gap: .3rem;
}
.nex-info { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; font-size: .82rem; }
.nex-label { font-weight: 700; color: var(--primary); }
.nex-range, .nex-clef { color: var(--muted); }
.nex-count { background: #e0e7ff; color: var(--primary); border-radius: 99px; padding: .1rem .5rem; font-size: .75rem; }
.nex-link-row { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.nex-link { font-size: .75rem; color: var(--muted); word-break: break-all; flex: 1; }
.nex-score { color: var(--success); font-weight: 700; font-size: .88rem; }
.nex-time  { color: var(--muted); font-size: .78rem; }
.nex-pending { color: var(--muted); font-size: .82rem; font-style: italic; }
.btn-xs { padding: .15rem .5rem; font-size: .72rem; }

.nex-form-row { display: flex; flex-wrap: wrap; gap: .75rem; }
.nex-form-row label { display: flex; flex-direction: column; gap: .2rem; font-size: .82rem; font-weight: 500; }
.nex-form-row select, .nex-form-row input { padding: .3rem .5rem; border: 1px solid var(--border); border-radius: 5px; font-size: .85rem; }

/* ── Modal ──────────────────────────────────────────────── */
.modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.45); z-index: 1000;
  display: flex; align-items: center; justify-content: center; }
.modal-box { background: #fff; border-radius: 10px; box-shadow: 0 8px 40px rgba(0,0,0,.25);
  max-width: 480px; width: 94%; max-height: 80vh; overflow-y: auto; }
.modal-head { display: flex; align-items: center; justify-content: space-between;
  padding: .85rem 1rem; border-bottom: 1px solid var(--border); }
.modal-head h3 { margin: 0; font-size: 1rem; }
.modal-close { background: none; border: none; cursor: pointer; font-size: 1.1rem; padding: 2px 6px; border-radius: 4px; }
.modal-close:hover { background: var(--bg); }
.stats-total { padding: .6rem 1rem .25rem; font-size: .9rem; font-weight: 600; margin: 0; }
.stats-section { border-top: 1px solid var(--border); }
.stats-section summary { padding: .55rem 1rem; font-size: .82rem; font-weight: 600;
  cursor: pointer; list-style: none; display: flex; align-items: center; gap: .4rem; user-select: none; }
.stats-section summary::-webkit-details-marker { display: none; }
.stats-section summary::before { content: '▶'; font-size: .65rem; color: var(--muted); transition: transform .15s; }
.stats-section[open] summary::before { transform: rotate(90deg); }
.stats-section summary:hover { background: var(--bg); }
.stats-tbl { width: 100%; border-collapse: collapse; font-size: .85rem; }
.stats-tbl th { background: var(--bg); padding: .4rem .75rem; text-align: left; font-size: .78rem; color: var(--muted); }
.stats-tbl td { padding: .4rem .75rem; border-top: 1px solid var(--border); }
.stats-tbl .sg { color: #16a34a; font-weight: 600; }
.stats-tbl .sm { color: #d97706; font-weight: 600; }
.stats-tbl .sb { color: var(--danger); font-weight: 600; }
.ans-list { list-style: decimal; margin: 0; padding: .25rem 0 .25rem 2.5rem; }
.ans-item { display: flex; align-items: center; gap: .6rem; padding: .3rem .5rem .3rem 0;
  border-top: 1px solid var(--border); font-size: .88rem; }
.ans-item:first-child { border-top: none; }
.ans-note { font-weight: 700; min-width: 2.8rem; font-family: monospace; font-size: .95rem; }
.ans-verdict { flex: 1; }
.ans-ok .ans-verdict { color: #16a34a; }
.ans-err .ans-verdict { color: var(--danger); }
.ans-wrong { color: var(--muted); font-weight: 400; font-size: .82rem; }
.ans-empty { padding: .75rem 1rem; color: var(--muted); font-size: .85rem; margin: 0; }
.nex-note-grid { display: flex; flex-wrap: wrap; gap: .35rem; }
.nex-note-chip { display: flex; flex-direction: column; align-items: center;
  border-radius: 5px; padding: .25rem .45rem; min-width: 2.8rem; cursor: default; }
.nex-chip-note { font-size: .72rem; font-weight: 700; line-height: 1; }
.nex-chip-pct  { font-size: .68rem; line-height: 1.4; }

/* ── Inline difficulty slider (noter/ library) ───────────────────── */
@keyframes row-saved-kf { 0%,60% { outline: 2px solid #16a34a; } 100% { outline: 2px solid transparent; } }
.row-saved { animation: row-saved-kf 1.2s ease forwards; }
.diff-wrap { display: flex; align-items: center; gap: .35rem; }
.diff-range { flex: 1; min-width: 55px; cursor: pointer; height: 4px; }
.diff-num {
  width: 4.5rem; font-size: .8rem; font-weight: 600; text-align: center;
  border: 1px solid var(--border); border-radius: 4px;
  background: var(--surface); padding: .15rem .2rem;
}

/* ── Step progress buttons (session prev-hw) ─────────────────────── */
.hw-step-btns { display: flex; flex-wrap: wrap; gap: .3rem; margin-top: .35rem; }
.hw-step-done {
  font-size: .75rem; padding: .2rem .55rem;
  background: none; border: 1px solid var(--primary); border-radius: 4px;
  cursor: pointer; color: var(--primary); white-space: nowrap;
}
.hw-step-done:hover { background: color-mix(in srgb, var(--primary) 10%, transparent); }
.hw-step-done.done { opacity: .5; cursor: default; }
.hw-mark-done {
  font-size: .72rem; padding: .18rem .45rem;
  background: none; border: 1px solid #16a34a; border-radius: 4px;
  cursor: pointer; color: #16a34a; white-space: nowrap;
}
.hw-mark-done:hover { background: rgba(22,163,74,.08); }
.hw-suggest {
  background: color-mix(in srgb, var(--primary) 6%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--primary) 25%, transparent);
  border-radius: 6px; padding: .6rem .85rem; margin-top: .4rem;
  font-size: .83rem;
}
.hw-suggest-title { font-weight: 600; margin-bottom: .3rem; color: var(--primary); }

/* ── Schedule.php improvements ───────────────────────────────────── */
.sg-cell-half { border-top: 1px dashed color-mix(in srgb, var(--border) 55%, transparent); }
.sg-time-half { border-top: 1px dashed color-mix(in srgb, var(--border) 55%, transparent); }
.sg-block.sg-selected { outline: 2px solid #fff; box-shadow: 0 0 0 3px #55D48E, 0 0 0 4px rgba(0,0,0,.15); z-index: 10; background: #55D48E !important; color: #1a1a1a !important; }
.sg-block.sg-conflict-flash { background: #dc2626 !important; transition: background .1s; }
.sched-time-tip {
  position: fixed; background: #1e3a5f; color: #e0eaf5;
  padding: 3px 10px; border-radius: 5px; font-size: .82rem; font-weight: 700;
  pointer-events: none; z-index: 10000; box-shadow: 0 2px 8px rgba(0,0,0,.4);
  display: none;
}

/* ══════════════════════════════════════════════════════
   SCHOOL YEAR SELECTOR + TOP BAR
══════════════════════════════════════════════════════ */
.wk-year-sel {
  font-size: .82rem; padding: .3rem .5rem; border: 1px solid var(--border);
  border-radius: 6px; background: var(--surface); color: var(--text);
  cursor: pointer; max-width: 360px;
}

/* Top bar replaces sidebar in teaching/index.php */
.wk-topbar {
  display: flex; align-items: center; gap: .75rem; padding: .5rem 1rem;
  background: var(--surface); border-bottom: 1px solid var(--border);
  flex-wrap: wrap;
}
.wk-topbar-left  { flex: 1; min-width: 200px; }
.wk-topbar-nav   { display: flex; gap: .4rem; align-items: center; flex: 1; justify-content: center; }
.wk-topbar-right { display: flex; gap: .5rem; flex-shrink: 0; }

/* Slim layout without left sidebar */
body:has(.wk-layout-slim) { overflow:hidden; height:100vh; display:flex; flex-direction:column; }
body:has(.wk-layout-slim) main { padding:0; flex:1; overflow:hidden; display:flex; flex-direction:column; }

.wk-layout-slim {
  display: flex;
  flex: 1;
  overflow: auto;
  font-size: 13px;
}
.wk-layout-slim .wg-wrap { flex: 1; }

/* schedule.php header mid slot for year selector */
.sched-header-mid { flex: 1; display: flex; align-items: center; }

/* ══════════════════════════════════════════════════════
   SCOPE MODAL
══════════════════════════════════════════════════════ */
.scope-modal {
  position: fixed; inset: 0; background: rgba(0,0,0,.5);
  display: flex; align-items: center; justify-content: center; z-index: 400;
}
.scope-modal-box {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 10px; padding: 1.5rem; min-width: 320px; max-width: 480px;
  box-shadow: 0 8px 32px rgba(0,0,0,.25);
}
.scope-modal-title { font-size: 1rem; font-weight: 700; margin: 0 0 1rem; }
.scope-modal-options { display: flex; flex-direction: column; gap: .6rem; margin-bottom: 1.25rem; }
.scope-modal-options label {
  display: flex; align-items: baseline; gap: .5rem;
  font-size: .88rem; cursor: pointer;
}
.scope-modal-options input[type=radio] { flex-shrink: 0; margin-top: 2px; accent-color: var(--primary); }
.scope-modal-actions { display: flex; gap: .5rem; }

/* ══════════════════════════════════════════════════════
   CHIP SELECTED STATE
══════════════════════════════════════════════════════ */
.sched-student-chip.chip-selected {
  outline: 3px solid #fff;
  box-shadow: 0 0 0 4px rgba(79,70,229,.7);
  filter: brightness(1.12);
}
.sched-student-chip[draggable=true] { opacity: .95; }
.sched-student-chip:not([draggable=true]) { cursor: default; }

/* ══════════════════════════════════════════════════════
   SCHEDULE WEEK BAR
══════════════════════════════════════════════════════ */
.sched-week-bar {
  display: flex; align-items: center; gap: .6rem;
  padding: .45rem 1rem;
  background: var(--surface); border-bottom: 1px solid var(--border);
  flex-wrap: wrap;
}
.sched-week-label {
  font-size: .88rem; font-weight: 600; color: var(--text); flex: 1; text-align: center;
}
.sched-week-nav { font-size: .8rem; }
.sched-hour-range {
  display: flex; align-items: center; gap: .4rem;
  margin-left: auto; font-size: .78rem;
}
.sched-hour-range label { display: flex; align-items: center; gap: .25rem; color: var(--muted); }
.sched-hour-range select { font-size: .78rem; padding: .2rem .3rem; border: 1px solid var(--border); border-radius: 4px; }

/* ══════════════════════════════════════════════════════
   SCHEDULE MODE BAR
══════════════════════════════════════════════════════ */
.sched-mode-bar {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .5rem 1rem;
  background: #eff6ff;
  border-bottom: 1px solid #bfdbfe;
  flex-wrap: wrap;
}
.sched-mode-label {
  font-size: .78rem; font-weight: 600; color: #1d4ed8; white-space: nowrap;
}
.sched-mode-btns { display: flex; gap: .25rem; flex-wrap: wrap; }
.sched-mode-btn {
  padding: .3rem .7rem; font-size: .78rem; font-weight: 500;
  border: 1px solid #bfdbfe; border-radius: 6px;
  background: #fff; color: #1e40af; cursor: pointer; transition: all .12s;
}
.sched-mode-btn:hover { background: #dbeafe; }
.sched-mode-btn.active {
  background: #1d4ed8; color: #fff; border-color: #1d4ed8;
}
#sched-scope-date {
  padding: .28rem .5rem; font-size: .78rem;
  border: 1px solid #bfdbfe; border-radius: 6px; background: #fff;
}

/* ══════════════════════════════════════════════════════
   CARD SCOPE BUTTONS (students/card.php)
══════════════════════════════════════════════════════ */
.sched-card-scope-btns {
  display: flex; flex-direction: column; gap: .35rem;
  font-size: .83rem;
}
.sched-card-scope-btns label {
  display: flex; align-items: center; gap: .4rem;
  cursor: pointer; font-weight: 400;
}
.sched-card-scope-btns input[type=radio] { accent-color: var(--primary); }

/* ══════════════════════════════════════════════════════
   SCHOOL CALENDAR — status colours (shared)
══════════════════════════════════════════════════════ */
.cal-free    { background: #f1f5f9 !important; color: #94a3b8 !important; }
.cal-special { background: #fff7ed !important; color: #9a3412 !important; }
.sg-day-head.cal-free    { background: #f1f5f9; }
.sg-day-head.cal-special { background: #fff7ed; }
.sg-day-head.cal-free .sg-day-name,
.sg-day-head.cal-free .sg-day-date-num  { color: #94a3b8; }
.sg-day-head.cal-special .sg-day-name,
.sg-day-head.cal-special .sg-day-date-num { color: #9a3412; }
/* Dagnavnet er en lenke til dagsoversikten, men skal se ut som overskriften den er. */
.sg-day-link { display: block; color: inherit; text-decoration: none; border-radius: var(--radius-sm); }
.sg-day-link:hover { color: var(--primary); text-decoration: underline; }
.sg-day-name    { display: block; font-weight: 600; }
.sg-day-date-num { display: block; font-size: .7rem; opacity: .8; }
.sg-day-status  { display: block; font-size: .62rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 1px; opacity: .85; }
.wg-day-head.cal-free    { background: #f1f5f9; }
.wg-day-head.cal-special { background: #fff7ed; }
.wg-day-cal-status { font-size: .65rem; text-align: center; padding: .15rem .3rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wg-day-head.cal-free .wg-day-cal-status    { color: #94a3b8; }
.wg-day-head.cal-special .wg-day-cal-status { color: #9a3412; }

/* ══════════════════════════════════════════════════════
   SCHEDULE DATE PICKER (week label → date input)
══════════════════════════════════════════════════════ */
.sched-week-label-wrap { position: relative; cursor: pointer; display: flex; align-items: center; gap: .3rem; flex: 1; justify-content: center; }
.sched-week-label { font-size: .88rem; font-weight: 600; color: var(--primary); text-decoration: none; }
.sched-week-label:hover { text-decoration: underline; }
.sched-week-date-picker { position: absolute; left: 50%; top: 100%; transform: translateX(-50%); opacity: 0; pointer-events: none; width: 1px; height: 1px; }

/* ══════════════════════════════════════════════════════
   SCHOOL YEAR PLANNING PAGE (school-year.php)
══════════════════════════════════════════════════════ */
.sy-header {
  display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
  padding: .75rem 1.5rem; background: var(--surface);
  border-bottom: 1px solid var(--border); margin-bottom: 0;
}
.sy-header h1 { font-size: 1.2rem; margin: 0; }
.sy-selectors { display: flex; gap: 1rem; align-items: center; flex: 1; }
.sy-selectors label { font-size: .85rem; display: flex; align-items: center; gap: .4rem; }
.sy-selectors select { font-size: .85rem; padding: .3rem .5rem; border: 1px solid var(--border); border-radius: 6px; }
.sy-header-right { display: flex; gap: .5rem; flex-shrink: 0; }

.sy-legend { display: flex; gap: .75rem; padding: .5rem 1.5rem; font-size: .75rem; background: var(--bg); border-bottom: 1px solid var(--border); }
.sy-leg-item { display: flex; align-items: center; gap: .35rem; padding: .2rem .6rem; border-radius: 99px; }
.sy-leg-normal  { background: #f0fdf4; color: #166534; }
.sy-leg-free    { background: #f1f5f9; color: #64748b; }
.sy-leg-special { background: #fff7ed; color: #9a3412; }

.sy-table-wrap { padding: 0 1.5rem 2rem; margin-top: 0; }
.sy-table { width: 100%; border-collapse: collapse; font-size: .85rem; }
.sy-table th { background: var(--bg); padding: .45rem .6rem; text-align: left; font-size: .75rem; color: var(--muted); border-bottom: 2px solid var(--border); position: sticky; top: 0; z-index: 1; }
.sy-th-wk     { width: 45px; }
.sy-th-date   { width: 130px; }
.sy-th-status { width: 240px; }
.sy-th-comment { }
.sy-th-save   { width: 40px; }
.sy-row { border-bottom: 1px solid var(--border); transition: background .1s; }
.sy-row:hover { background: var(--bg); }
.sy-row.cal-free    { background: #f8fafc; color: #94a3b8; }
.sy-row.cal-special { background: #fffbeb; }
.sy-wk   { padding: .4rem .6rem; font-size: .78rem; color: var(--muted); }
.sy-date { padding: .4rem .6rem; font-weight: 500; }
.sy-row.cal-free .sy-date { color: #94a3b8; }
.sy-status-cell { padding: .3rem .4rem; }
.sy-status-sel {
  font-size: .8rem; padding: .25rem .4rem; border: 1px solid var(--border);
  border-radius: 5px; width: 100%; max-width: 235px; cursor: pointer;
}
.sy-row.cal-free    .sy-status-sel { background: #f1f5f9; color: #64748b; }
.sy-row.cal-special .sy-status-sel { background: #fff7ed; color: #9a3412; }
.sy-comment-cell { padding: .3rem .4rem; }
.sy-comment-inp {
  font-size: .8rem; padding: .25rem .5rem; border: 1px solid var(--border);
  border-radius: 5px; width: 100%; min-width: 160px;
}
.sy-comment-inp:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 2px rgba(79,70,229,.15); }
.sy-save-cell { padding: .3rem .4rem; text-align: center; }
.sy-save-status { font-size: .75rem; }
.sy-saving { color: var(--muted); }
.sy-saved  { color: var(--success); font-weight: 700; }
.sy-error  { color: var(--danger); }

/* ── Årsplan: 2D grid ────────────────────────────────── */
.sy-grid-table { width:100%; border-collapse:collapse; font-size:.78rem; }
.sy-grid-table thead th {
  background:var(--bg); padding:.35rem .5rem; text-align:center; font-size:.72rem;
  color:var(--muted); border-bottom:2px solid var(--border); position:sticky; top:0; z-index:1;
}
.sy-th-wk  { width:40px; }
.sy-th-day { min-width:120px; }
.sy-wk-cell {
  padding:.25rem .4rem; font-size:.72rem; font-weight:600; color:var(--muted);
  text-align:center; border-bottom:1px solid var(--border);
  border-right:2px solid var(--border);
}
.sy-cell {
  padding:4px 5px; border:1px solid var(--border); vertical-align:top; min-width:110px;
  transition:background .1s; position:relative;
}
.sy-cell:hover { background: color-mix(in srgb, var(--bg) 60%, var(--surface)); }
.sy-cell.cal-free    { background:#f8fafc; }
.sy-cell.cal-free .sy-status-sel { color:#94a3b8; }
.sy-cell.cal-special { background:#fffbeb; }
.sy-cell-empty { background:var(--bg); opacity:.4; }
.sy-cell-date { font-size:.68rem; color:var(--muted); margin-bottom:2px; }
.sy-cell .sy-status-sel {
  width:100%; font-size:.7rem; padding:1px 2px; border:1px solid transparent;
  border-radius:3px; background:transparent; cursor:pointer;
}
.sy-cell .sy-status-sel:hover,
.sy-cell .sy-status-sel:focus { border-color:var(--border); background:var(--surface); }
.sy-cell .sy-comment-inp {
  width:100%; font-size:.68rem; padding:1px 2px; border:none;
  background:transparent; color:var(--muted); margin-top:1px;
}
.sy-cell .sy-comment-inp:focus {
  background:var(--surface); border:1px solid var(--border);
  border-radius:3px; outline:none; color:var(--text);
}
.sy-save-dot {
  position:absolute; top:3px; right:3px; font-size:.6rem; font-weight:700; line-height:1;
}
.sy-save-dot.sy-saving { color:var(--muted); }
.sy-save-dot.sy-saved  { color:var(--success); }
.sy-save-dot.sy-error  { color:var(--danger); }

/* Extra dates section */
.sy-extra-section { padding:1.5rem; border-top:2px solid var(--border); margin-top:1rem; }
.sy-extra-title   { font-size:.95rem; font-weight:600; margin:0 0 .75rem; color:var(--muted); }
.sy-extra-table   { width:100%; border-collapse:collapse; font-size:.82rem; margin-bottom:1rem; }
.sy-extra-table th { background:var(--bg); padding:.3rem .5rem; text-align:left; color:var(--muted); font-size:.72rem; }
.sy-extra-table td { padding:.3rem .5rem; border-bottom:1px solid var(--border); }
.sy-extra-form {
  display:flex; align-items:center; flex-wrap:wrap; gap:.75rem;
  padding:.75rem; background:var(--surface); border:1px solid var(--border);
  border-radius:var(--radius); font-size:.85rem;
}
.sy-extra-form label { display:flex; align-items:center; gap:.3rem; }
.sy-extra-form input[type=date], .sy-extra-form input[type=text], .sy-extra-form select {
  padding:.3rem .5rem; border:1px solid var(--border); border-radius:5px; font-size:.82rem;
}
#extra-save-status { font-size:.8rem; font-weight:600; }

/* ── Pause blocks (schedule.php + index.php) ─────────── */
.sg-pause-block {
  position:absolute; left:2px; right:2px; top:1px;
  background: repeating-linear-gradient(
    45deg, #374151 0px, #374151 4px, #1f2937 4px, #1f2937 8px
  );
  border:1px solid #4b5563; border-radius:4px;
  padding:2px 4px; font-size:.7rem; color:#9ca3af;
  z-index:1; overflow:hidden; cursor:grab;
  display:flex; flex-direction:column; touch-action:none;
  transition: box-shadow .1s;
}
.sg-pause-block.sg-pause-active { cursor:grabbing; box-shadow:0 4px 12px rgba(0,0,0,.4); z-index:20; }
.sg-pause-readonly { cursor:default; }
.sg-pause-label { font-size:.65rem; font-weight:700; letter-spacing:.05em; text-transform:uppercase; }
.sg-pause-time  { font-size:.6rem; opacity:.75; font-variant-numeric:tabular-nums; }
.sg-pause-resize {
  position:absolute; bottom:0; left:0; right:0; height:5px;
  cursor:ns-resize; background:rgba(255,255,255,.08);
  border-radius:0 0 3px 3px;
}
.sg-pause-resize:hover { background:rgba(255,255,255,.18); }

/* ── teaching/index.php grid layout ─────────────────── */
.idx-layout { grid-template-columns:1fr !important; }
.sg-block-link {
  display:flex; flex-direction:column; text-decoration:none;
  cursor:pointer;
}
.sg-block-link:hover { filter:brightness(1.1); box-shadow:0 2px 8px rgba(0,0,0,.25); z-index:5; }
.sg-today-head { background:var(--primary) !important; color:#fff !important; }
.sg-today-head .sg-day-name, .sg-today-head .sg-day-date-num,
.sg-today-head .sg-day-status { color:#fff !important; }

/* ── Sidebar: pause chip ─────────────────────────────── */
.sched-pause-chip {
  display:flex; align-items:center; gap:.4rem;
  padding:.45rem .65rem; margin-bottom:.4rem;
  border-radius:6px; font-size:.78rem; font-weight:600;
  background:repeating-linear-gradient(
    45deg, #374151 0px, #374151 4px, #1f2937 4px, #1f2937 8px
  );
  color:#9ca3af; border:1px solid #4b5563;
  cursor:default; user-select:none;
}
.sched-pause-chip[draggable="true"] { cursor:grab; }
.sched-pause-chip[draggable="true"]:active { cursor:grabbing; }
.sg-pause-del {
  position:absolute; top:2px; right:2px;
  background:rgba(0,0,0,.45); border:none; border-radius:3px;
  color:#d1d5db; font-size:.65rem; line-height:1; padding:1px 3px;
  cursor:pointer; display:none;
}
.sg-pause-block:hover .sg-pause-del { display:block; }

/* ── Sidebar: pool divider + group btn ───────────────── */
.sched-pool-divider {
  border-top:1px solid var(--border); margin:.5rem 0;
}
.sched-new-group-btn {
  width:100%; padding:.4rem .5rem; margin-bottom:.4rem;
  background:var(--surface); border:1px dashed var(--border);
  border-radius:6px; color:var(--primary); font-size:.8rem;
  font-weight:600; cursor:pointer; text-align:left;
  transition: background .15s;
}
.sched-new-group-btn:hover { background:var(--primary); color:#fff; }

/* ── Sidebar: group chips ────────────────────────────── */
.sched-group-chip {
  position:relative;
  display:flex; flex-direction:column;
  padding:.4rem .65rem .4rem .55rem; margin-bottom:.35rem;
  border-radius:6px; font-size:.78rem;
  background:#2d3748; border:1px solid #4a5568;
  color:#e2e8f0; cursor:default; user-select:none;
}
.sched-group-chip[draggable="true"] { cursor:grab; }
.sched-group-chip[draggable="true"]:active { cursor:grabbing; }
.sched-group-chip-name { font-weight:600; }
.sched-group-chip-info { font-size:.7rem; color:#a0aec0; margin-top:.1rem; }
.sched-chip-del-btn {
  position:absolute; top:3px; right:3px;
  background:rgba(0,0,0,.35); border:none; border-radius:3px;
  color:#9ca3af; font-size:.65rem; padding:1px 4px;
  cursor:pointer; line-height:1; display:none;
}
.sched-group-chip:hover .sched-chip-del-btn { display:block; }

/* ── Grid: placed group blocks ───────────────────────── */
.sg-group-block {
  position:absolute; left:2px; right:2px; top:1px;
  background:#2b4c7e; border:1px solid #4a7fc1; border-radius:4px;
  padding:2px 4px; font-size:.68rem; color:#bfdbfe;
  z-index:2; overflow:hidden;
  display:flex; flex-direction:column; touch-action:none;
}
.sg-group-name    { font-weight:700; font-size:.7rem; }
.sg-group-time    { font-size:.6rem; opacity:.8; font-variant-numeric:tabular-nums; }
.sg-group-members { font-size:.6rem; opacity:.7; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sg-group-del {
  position:absolute; top:2px; right:2px;
  background:rgba(0,0,0,.4); border:none; border-radius:3px;
  color:#93c5fd; font-size:.65rem; line-height:1; padding:1px 3px;
  cursor:pointer; display:none;
}
.sg-group-block:hover .sg-group-del { display:block; }
.sg-group-resize {
  position:absolute; bottom:0; left:0; right:0; height:5px;
  cursor:ns-resize; background:rgba(255,255,255,.08);
  border-radius:0 0 3px 3px;
}
.sg-group-resize:hover { background:rgba(255,255,255,.18); }

/* ── Group lesson modal ──────────────────────────────── */
.sched-modal {
  position:fixed; inset:0; z-index:1000;
  background:rgba(0,0,0,.55); display:flex;
  align-items:center; justify-content:center;
}
.sched-modal-box {
  background:var(--surface); border:1px solid var(--border);
  border-radius:10px; padding:1.5rem; width:min(420px,92vw);
  box-shadow:0 8px 32px rgba(0,0,0,.45);
  display:flex; flex-direction:column; gap:.85rem;
}
.sched-modal-title { margin:0; font-size:1rem; font-weight:700; }
.sched-modal-label {
  display:flex; flex-direction:column; gap:.3rem;
  font-size:.82rem; font-weight:600; color:var(--muted);
}
.sched-modal-input {
  padding:.4rem .6rem; border:1px solid var(--border);
  border-radius:6px; font-size:.9rem;
  background:var(--bg); color:var(--text);
}
.sched-modal-students {
  border:1px solid var(--border); border-radius:6px;
  padding:.6rem .8rem; margin:0; max-height:180px; overflow-y:auto;
}
.sched-modal-students legend {
  font-size:.75rem; font-weight:600; color:var(--muted); padding:0 .3rem;
}
.sched-modal-student-row {
  display:flex; align-items:center; gap:.5rem;
  font-size:.85rem; padding:.2rem 0; cursor:pointer;
}
.sched-modal-btns {
  display:flex; gap:.6rem; justify-content:flex-end;
}
/* Selected student pills in group modal */
.sched-modal-selected {
  display:flex; flex-wrap:wrap; gap:.35rem; min-height:1.8rem;
}
.sched-modal-student-pill {
  display:inline-flex; align-items:center; gap:.3rem;
  padding:.2rem .5rem; background:var(--primary); color:#fff;
  border-radius:999px; font-size:.78rem;
}
.sched-modal-student-pill button {
  background:none; border:none; color:rgba(255,255,255,.8);
  cursor:pointer; font-size:.75rem; padding:0; line-height:1;
}
.sched-modal-student-pill button:hover { color:#fff; }

/* Pause chip scope radio row */
.sched-pause-scope {
  display:flex; gap:.6rem; font-size:.73rem; color:var(--muted);
  margin-bottom:.25rem; padding:.1rem .1rem;
}
.sched-pause-scope label { display:flex; align-items:center; gap:.25rem; cursor:pointer; }

/* Year-scope badge on placed pause blocks */
.sg-pause-badge { font-size:.65rem; }

/* ── Student card: group lesson membership ───────────── */
.card-group-lessons { margin-top:.75rem; padding-top:.75rem; border-top:1px solid var(--border); }
.card-group-lessons-title { font-size:.82rem; font-weight:600; color:var(--muted); margin:0 0 .4rem; text-transform:uppercase; letter-spacing:.04em; }
.card-group-list { list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:.35rem; }
.card-group-item {
  display:flex; align-items:baseline; gap:.5rem; flex-wrap:wrap;
  font-size:.85rem; padding:.3rem .5rem;
  background:#2d3748; border-radius:5px; border-left:3px solid #4a7fc1;
}
.card-group-name    { font-weight:600; color:#bfdbfe; }
.card-group-when    { color:var(--muted); font-size:.78rem; }
.card-group-members { color:var(--muted); font-size:.78rem; }
.card-group-year    { margin-left:auto; font-size:.72rem; color:#4a7fc1; }

/* ── Homework instruction lines (session.php) ─────────── */
.hw-instr-wrap { margin-top:.5rem; }
.hw-instr-line-row {
  display:flex; align-items:center; gap:.4rem; margin-bottom:.3rem;
}
.hw-instr-chk { width:15px; height:15px; cursor:pointer; flex-shrink:0; accent-color:var(--primary); }
.hw-instr-input {
  flex:1; background:var(--bg); border:1px solid var(--border); border-radius:5px;
  color:var(--text); padding:.3rem .5rem; font-size:.82rem; font-family:inherit;
}
.hw-instr-input.done { text-decoration:line-through; color:var(--muted); }
.hw-instr-mic {
  background:none; border:1px solid var(--border); border-radius:5px;
  color:var(--muted); cursor:pointer; padding:.25rem .4rem; font-size:.8rem;
  transition:all .15s; flex-shrink:0;
}
.hw-instr-mic.listening { background:var(--danger); color:#fff; border-color:var(--danger); }
.hw-instr-mic:hover:not(.listening) { border-color:var(--primary); color:var(--primary); }
.hw-instr-del {
  background:none; border:none; cursor:pointer; color:var(--muted);
  font-size:.85rem; padding:.2rem; flex-shrink:0;
}
.hw-instr-del:hover { color:var(--danger); }

/* ══════════════════════════════════════════════════════
   MØRK MODUS — lesbarhet for hardkodede flater
   Snur lyse bakgrunner/mørk tekst som ikke bruker variabler,
   så ingenting blir «svart på svart» eller «lyst på lyst».
══════════════════════════════════════════════════════ */
html[data-theme="dark"] {
  --surf-alt: #241f18;   /* litt lysere enn --surface, til rutenett/rader */
  --surf-hi:  #2a2418;   /* headere / hover */
}

/* Nøytrale lyse flater → mørke flater (arvet tekst blir lesbar) */
html[data-theme="dark"] .modal-box,
html[data-theme="dark"] .wg-day-body,
html[data-theme="dark"] .wkrn-btn,
html[data-theme="dark"] #sched-scope-date,
html[data-theme="dark"] .sched-mode-btn { background: var(--surface); color: var(--text); }
html[data-theme="dark"] .wg-weekend .wg-day-body { background: #17130d; }
html[data-theme="dark"] .wg-times,
html[data-theme="dark"] .wg-corner,
html[data-theme="dark"] .wg-day-head,
html[data-theme="dark"] .wk-rnav,
html[data-theme="dark"] .sched-mode-bar { background: var(--surf-alt); }
html[data-theme="dark"] .wg-weekend .wg-day-head { background: var(--surf-hi); }
html[data-theme="dark"] .wkrn-btn:hover,
html[data-theme="dark"] .sched-mode-btn:hover { background: var(--surf-hi); }
html[data-theme="dark"] .wg-h-num { color: var(--muted); }
html[data-theme="dark"] .wg-hour-row,
html[data-theme="dark"] .wg-day,
html[data-theme="dark"] .wg-day-body { border-color: var(--border); }
html[data-theme="dark"] .wg-gl { border-top-color: var(--surf-hi); }
html[data-theme="dark"] .wg-gl.wg-gl-h,
html[data-theme="dark"] .wg-ql.wg-ql-h { border-top-color: #3a3220; }

/* Blå etiketter/lenker → lesbar lys blå */
html[data-theme="dark"] .bc-school,
html[data-theme="dark"] .card-group-year,
html[data-theme="dark"] .sched-mode-label,
html[data-theme="dark"] .wks-empty a { color: #7fb0e8; }

/* Note-/øvelseskort */
html[data-theme="dark"] .nex-card { background: var(--surf-alt); border-color: #3a3220; }
html[data-theme="dark"] .nex-count { background: #3a2f14; }

/* Kalender-highlights (lys lilla → dempet mørk lilla) */
html[data-theme="dark"] .cal-today,
html[data-theme="dark"] .cal-today-swatch,
html[data-theme="dark"] .sg-cell.drag-over,
html[data-theme="dark"] .wg-drag-over { background: #2a2540 !important; }
html[data-theme="dark"] .cal-weekend { background: #17130d; }

/* Statusfarger → mørke toner med lys tekst */
html[data-theme="dark"] .sbtn.s-ikke-startet,
html[data-theme="dark"] .is-inactive,
html[data-theme="dark"] .sg-cell.sg-conflict,
html[data-theme="dark"] .wg-drag-conflict,
html[data-theme="dark"] .hw-del:hover { background: #3a1f18 !important; color: #f0997b !important; border-color: #5a2f22 !important; }
html[data-theme="dark"] .sbtn.s-ferdig,
html[data-theme="dark"] .is-active,
html[data-theme="dark"] .wg-lock-btn.is-unlocked { background: #1c2e1f; color: #a8e0a0; border-color: #2f4a33; }
html[data-theme="dark"] .sbtn.s-pågår,
html[data-theme="dark"] .hw-warning { background: #3a2f14; color: #e5c067; border-color: #5a4a1f; }

/* cal-free / cal-special (kalender + skoleår) */
html[data-theme="dark"] .cal-free,
html[data-theme="dark"] .sg-day-head.cal-free,
html[data-theme="dark"] .wg-day-head.cal-free,
html[data-theme="dark"] .sy-row.cal-free,
html[data-theme="dark"] .sy-cell.cal-free,
html[data-theme="dark"] .sy-leg-free { background: #201c15 !important; color: #8a8272 !important; }
html[data-theme="dark"] .sy-row.cal-free .sy-status-sel,
html[data-theme="dark"] .cal-free .sy-status-sel { background: #201c15; color: #8a8272; }
html[data-theme="dark"] .cal-special,
html[data-theme="dark"] .sg-day-head.cal-special,
html[data-theme="dark"] .wg-day-head.cal-special,
html[data-theme="dark"] .sy-row.cal-special,
html[data-theme="dark"] .sy-cell.cal-special,
html[data-theme="dark"] .sy-leg-special,
html[data-theme="dark"] .cal-special .sy-status-sel { background: #33280f !important; color: #e5b567 !important; }
html[data-theme="dark"] .sy-leg-normal { background: #1c2e1f; color: #a8e0a0; }

/* Sched-mode aktiv knapp beholder farge, men leselig */
html[data-theme="dark"] .sched-mode-btn.active { background: var(--primary); color: #1a140a; border-color: var(--primary); }
html[data-theme="dark"] .sched-mode-btn { border-color: var(--border); }
html[data-theme="dark"] .sched-mode-bar { border-bottom-color: var(--border); }

/* Inline «uken utenfor skoleåret»-banner (teaching/index.php) */
html[data-theme="dark"] .week-warn { background: #33280f !important; border-color: #5a4a1f !important; border-left-color: #e5b567 !important; color: #e5c067; }

/* ══════════════════════════════════════════════════════
   Hovedmeny — nedtrekksgrupper (Planlegging, Innhold)
══════════════════════════════════════════════════════ */
.nav-group { position: relative; }
.nav-group-btn {
  padding: .4rem .8rem; border-radius: var(--radius); border: none;
  background: transparent; color: var(--muted); font-size: .9rem; cursor: pointer;
  font-family: inherit; white-space: nowrap;
}
.nav-group-btn:hover, .nav-group:hover .nav-group-btn,
.nav-group:focus-within .nav-group-btn { background: var(--bg); color: var(--primary); }
.nav-group-btn.active { background: var(--bg); color: var(--primary); }
.nav-drop {
  display: none; position: absolute; top: 100%; left: 0; z-index: 300;
  list-style: none; margin: 0; padding: .3rem;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow); min-width: 175px;
}
.nav-group:hover .nav-drop, .nav-group:focus-within .nav-drop { display: block; }
.nav-drop li { list-style: none; }
.nav-drop a { display: block; padding: .45rem .7rem; border-radius: 6px; white-space: nowrap; }

/* ── Enhets-tetthet: iPad (større touch-mål) ─────────── */
html[data-device="ipad"] .nav-links a { padding: .55rem 1rem; font-size: 1rem; }
html[data-device="ipad"] .nav-group-btn { padding: .55rem 1rem; font-size: 1rem; }
html[data-device="ipad"] .nav-drop a { padding: .65rem .9rem; font-size: 1rem; }
html[data-device="ipad"] .btn { padding: .7rem 1.15rem; font-size: 1rem; }
html[data-device="ipad"] .btn-sm { padding: .5rem .9rem; font-size: .9rem; }
html[data-device="ipad"] .btn-xs { padding: .4rem .75rem; font-size: .85rem; }
html[data-device="ipad"] input, html[data-device="ipad"] select, html[data-device="ipad"] textarea {
  font-size: 1rem; padding: .6rem .75rem;
}
/* Timevindu (session.php) — romsligere for touch */
html[data-device="ipad"] .lp-mod-head { padding: .9rem 1rem; }
html[data-device="ipad"] .lp-mod-name { font-size: 1.05rem; }
html[data-device="ipad"] .lp-timer-btn { padding: .55rem 1rem; font-size: .95rem; }
html[data-device="ipad"] .lp-min-input { width: 60px; font-size: 1rem; padding: .4rem; }
html[data-device="ipad"] .today-card { padding: 1.1rem 1.25rem; }
html[data-device="ipad"] .hw-section h2 { font-size: 1.25rem; }
html[data-device="ipad"] .session-name { font-size: 1.4rem; }

/* Sorterbare kolonneoverskrifter (elevliste m.fl.) */
.sort-th { color: var(--muted); text-decoration: none; white-space: nowrap; cursor: pointer; }
.sort-th:hover { color: var(--primary); text-decoration: none; }

/* Kompakt oppsummering (elevliste) */
.student-stats { display: flex; gap: .6rem; flex-wrap: wrap; margin-bottom: 1.25rem; }
.student-stat {
  display: flex; flex-direction: column; align-items: flex-start;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: .5rem .9rem; min-width: 92px;
}
.student-stat .ss-num { font-size: 1.5rem; font-weight: 700; line-height: 1.1; }
.student-stat .ss-lbl { font-size: .75rem; color: var(--muted); }
.student-stat-active { border-color: var(--primary); }
.student-stat-active .ss-num { color: var(--primary); }
.hw-instr-add-btn {
  margin-top:.25rem; font-size:.75rem; padding:.25rem .6rem;
  background:transparent; border:1px dashed var(--border); border-radius:5px;
  color:var(--muted); cursor:pointer;
}
.hw-instr-add-btn:hover { border-color:var(--primary); color:var(--primary); }
.hw-instr-save-status { font-size:.7rem; color:var(--muted); margin-left:.5rem; }

/* ══════════════════════════════════════════════════════
   Kompakt undervisningsvindu (session.php)
══════════════════════════════════════════════════════ */
/* Elevkort-knapp i toppraden, ved siden av navnet */
.session-name .session-card-btn { font-weight: 400; margin-right: .5rem; vertical-align: middle; }

/* QR-kode til elevens side (session.php + elevkortet).
   Koden står alltid svart på hvitt, også i mørkt tema – en invertert QR-kode
   leses ikke av alle telefoner. */
.qr-dialog {
  /* Nettleseren sentrerer en <dialog> med margin:auto. Nullstillingen øverst
     i fila tar den bort, og da havnet dialogen i øvre venstre hjørne (målt). */
  margin: auto;
  border: none; border-radius: var(--radius-sm, 8px); padding: var(--s-4, 1.25rem);
  max-width: min(92vw, 340px); text-align: center;
  background: var(--surface); color: var(--text);
  box-shadow: 0 12px 40px rgba(0,0,0,.35);
}
.qr-dialog::backdrop { background: rgba(0,0,0,.55); }
.qr-tittel { font-weight: 600; margin: 0 0 var(--s-3, .75rem); }
.qr-bilde { display: inline-block; background: #fff; padding: 0; line-height: 0; border-radius: 4px; }
.qr-bilde svg { display: block; width: 100%; max-width: 260px; height: auto; }
.qr-lenke {
  font-family: monospace; font-size: .72rem; color: var(--muted);
  margin: var(--s-2, .5rem) 0 var(--s-3, .75rem); overflow-wrap: anywhere;
}
.qr-lukk { min-width: 6rem; }
.elev-qr { margin-top: .75rem; display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.elev-qr .qr-bilde svg { max-width: 180px; }
.elev-qr-tekst { font-size: .82rem; color: var(--muted); flex: 1; min-width: 10rem; }
/* Knappene ved navnet var 33–35 px høye på iPad (målt) – under 44 px. */
html[data-device="ipad"] .session-name .session-card-btn,
html[data-device="ipad"] .qr-lukk { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }

/* 🔥 Oppvarming-stripe (rad 2) */
.warmup-strip {
  display: flex; align-items: center; gap: .5rem .8rem; flex-wrap: wrap;
  background: var(--surface); border: 1px solid var(--border);
  border-left: 3px solid var(--primary);
  border-radius: var(--radius); padding: .45rem .7rem; margin-bottom: .7rem;
}
.warmup-strip .wu-title { font-weight: 700; font-size: .9rem; white-space: nowrap; }
.warmup-strip .wu-body  { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; flex: 1; min-width: 0; }
.warmup-strip .wu-item,
.warmup-strip .wu-prev  { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; }
.warmup-strip .wu-name  { font-weight: 600; }
.warmup-strip .wu-note  {
  flex: 1; min-width: 150px; padding: .3rem .5rem;
  border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--bg); color: var(--text); font-size: .82rem; font-family: inherit;
}
.warmup-strip .wu-item-done { opacity: .55; }
.warmup-strip .muted { color: var(--muted); font-size: .85rem; }
.wu-picker-wrap { position: relative; margin-left: auto; }
.wu-picker {
  position: absolute; right: 0; top: calc(100% + .3rem); z-index: 50;
  width: 280px; max-width: 80vw; padding: .5rem;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: 0 6px 18px rgba(0,0,0,.14);
}
.wu-picker #wu-q {
  width: 100%; padding: .35rem .5rem; margin-bottom: .4rem;
  border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--bg); color: var(--text); font-size: .85rem;
}
.wu-results { display: flex; flex-direction: column; gap: .2rem; max-height: 240px; overflow: auto; }
.wu-results .wu-res { text-align: left; justify-content: flex-start; }

/* 🧩 Modul-undervisning — faner */
.modul-section { margin: .2rem 0 .4rem; }
.modul-head h2 { font-size: .92rem; margin: 0 0 .4rem; }
.modul-tabs {
  display: flex; gap: .25rem; overflow-x: auto; -webkit-overflow-scrolling: touch;
  border-bottom: 2px solid var(--border); margin-bottom: .6rem; scrollbar-width: thin;
}
.modul-tab {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: .35rem;
  background: transparent; border: none; border-bottom: 3px solid transparent;
  color: var(--muted); font-size: .85rem; font-weight: 600; padding: .5rem .7rem;
  cursor: pointer; white-space: nowrap; border-radius: var(--radius) var(--radius) 0 0;
}
.modul-tab:hover { color: var(--text); background: var(--surface); }
.modul-tab.active { color: var(--primary); border-bottom-color: var(--primary); }
.modul-count {
  font-size: .72rem; background: var(--border); color: var(--text);
  border-radius: 999px; padding: 0 .4rem; min-width: 1.3em; text-align: center; line-height: 1.5;
}
.modul-tab.active .modul-count { background: var(--primary); color: #fff; }
.modul-count:empty { display: none; }
.modul-panel { display: none; }
.modul-panel.active { display: block; }
.modul-panel .hw-section { margin: 0; }
html[data-device="ipad"] .modul-tab { padding: .7rem 1rem; font-size: .95rem; }

/* Tettere seksjoner på laptop */
.session-main { gap: .6rem; }
.hw-section { padding: .8rem 1rem; }
.hw-section h2 { font-size: .92rem; margin-bottom: .5rem; }
.hw-section-head { margin-bottom: .5rem; }

/* ⏱ Tidslinje-cockpit */
.timeline-main { display: block; padding: .4rem 0 5rem; }

.lesson-timer {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 10px 14px; margin-bottom: 12px;
}
.lt-play {
  width: 42px; height: 42px; border-radius: 50%; border: none; cursor: pointer;
  background: var(--primary); color: #fff; font-size: 1rem; flex: 0 0 auto;
}
.lt-play:hover { filter: brightness(1.06); }
.lt-clockwrap { min-width: 118px; }
.lt-clock { font-variant-numeric: tabular-nums; display: flex; align-items: baseline; gap: 5px; }
.lt-big { font-size: 1.5rem; font-weight: 700; letter-spacing: -.02em; }
.lt-tot { font-size: .85rem; color: var(--muted); }
.lt-progress { height: 4px; border-radius: 4px; background: var(--border); overflow: hidden; margin-top: 6px; }
.lt-progress i { display: block; height: 100%; width: 0; background: var(--primary); border-radius: 4px; transition: width .4s; }
.lt-nownext { display: flex; flex-direction: column; gap: 1px; min-width: 150px; }
.lt-l { font-size: .68rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.lt-now { font-weight: 600; font-size: .9rem; }
.lt-nx { font-size: .78rem; color: var(--muted); }
.lt-reset {
  margin-left: auto; border: 1px solid var(--border); background: var(--surface); color: var(--muted);
  width: 34px; height: 34px; border-radius: 8px; cursor: pointer; flex: 0 0 auto;
}

.track { position: relative; }
.track::before { content: ""; position: absolute; left: 52px; top: 10px; bottom: 14px; width: 2px; background: var(--border); }
.track .elapsed { position: absolute; left: 52px; top: 10px; width: 2px; height: 0; background: var(--primary); border-radius: 2px; transition: height .5s; z-index: 1; }

.seg { position: relative; display: grid; grid-template-columns: 42px 20px 1fr; gap: 0 11px; align-items: start; padding: 4px 0; }
.seg-time { font-variant-numeric: tabular-nums; font-size: .72rem; color: var(--muted); text-align: right; padding-top: 13px; line-height: 1.2; white-space: nowrap; }
.seg-time b { color: var(--text); font-weight: 600; }
.node { display: flex; justify-content: center; padding-top: 14px; }
.node::before { content: ""; width: 12px; height: 12px; border-radius: 50%; background: var(--surface); border: 2px solid var(--border); z-index: 2; }
.seg.done .node::before { background: #16a34a; border-color: #16a34a; }
.seg.active .node::before { background: var(--primary); border-color: var(--primary); box-shadow: 0 0 0 4px color-mix(in srgb, var(--primary) 20%, transparent); }

.block { background: var(--bg); border: 1px solid transparent; border-radius: 10px; overflow: hidden; }
.block:hover { border-color: var(--border); }
.block-head { display: flex; align-items: center; gap: 9px; padding: 9px 12px; cursor: pointer; }
.block-ic { font-size: 1.05rem; line-height: 1; }
.block-name { font-weight: 600; font-size: .92rem; flex: 0 0 auto; }
.block-sum { color: var(--muted); font-size: .8rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.block-meta { margin-left: auto; display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
.block-meta .mins { font-variant-numeric: tabular-nums; font-size: .72rem; color: var(--muted); }

.seg.active .block { background: var(--surface); border-color: color-mix(in srgb, var(--primary) 25%, transparent); box-shadow: 0 1px 2px rgba(20,30,50,.05), 0 6px 18px rgba(20,30,50,.06); }
.seg .body { display: none; padding: 2px 12px 12px; }
.seg.active .body { display: block; }
.seg-single .body .hw-section-head h2 { display: none; }
.seg .body .hw-section { margin: 0; padding: 0; border: none; background: transparent; }
.seg .body .hw-section + .hw-section { margin-top: .8rem; }
.seg .body .warmup-strip { margin: 0; padding: 0; border: none; background: transparent; }
.seg .body .warmup-strip .wu-title { display: none; }

.tl-toast {
  position: fixed; left: 50%; bottom: 70px; transform: translateX(-50%) translateY(180%);
  background: var(--text); color: var(--surface); padding: 10px 16px; border-radius: 10px;
  font-size: .88rem; font-weight: 600; box-shadow: 0 10px 28px rgba(0,0,0,.25); z-index: 300;
  transition: transform .35s cubic-bezier(.2,.9,.3,1);
}
.tl-toast.show { transform: translateX(-50%) translateY(0); }

@media (max-width: 640px) {
  .seg { grid-template-columns: 38px 16px 1fr; gap: 0 8px; }
  .block-sum { display: none; }
  .lt-nownext { min-width: 0; }
  .track::before, .track .elapsed { left: 48px; }
}
html[data-device="ipad"] .block-head { padding: 12px 14px; }

/* ── Fokusmodus (ett punkt om gangen) ── */
.tl-focus .track::before { display: none; }
.tl-focus .track { padding: 0; }
.tl-focus .seg { display: none; grid-template-columns: 1fr; padding: 0; }
.tl-focus .seg.active { display: block; }
.tl-focus .seg .seg-time, .tl-focus .seg .node { display: none; }
.tl-focus .seg.active .body { display: block; }
.tl-focus .seg.active .block {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: 0 1px 2px rgba(20,30,50,.04), 0 10px 30px rgba(20,30,50,.06);
  padding: 1.1rem 1.4rem 1.5rem;
}
.tl-focus .seg.active .block-head { cursor: default; margin-bottom: .5rem; flex-wrap: wrap; }
.tl-focus .session-stickybar { display: none; }
.block-tag {
  font-family: ui-monospace, Menlo, monospace; font-size: .68rem; font-weight: 700;
  background: var(--primary); color: #fff; border-radius: 6px; padding: 2px 7px;
}

.tl-strip { display: flex; align-items: stretch; gap: 6px; overflow-x: auto; padding: .1rem 0 .7rem; -webkit-overflow-scrolling: touch; }
.tl-step { flex-shrink: 1; flex-basis: 0; min-width: 60px; border: none; background: none; cursor: pointer; padding: 0; font-family: inherit; text-align: left; display: flex; flex-direction: column; gap: 5px; }
.tl-add { flex: 0 0 auto; align-self: center; width: 32px; height: 32px; border-radius: 8px; border: 1px dashed var(--border); background: none; color: var(--muted); cursor: pointer; font-size: 1.1rem; }
.tl-add:hover { color: var(--primary); border-color: var(--primary); }
.tl-rm { margin-left: 5px; color: var(--muted); font-size: .7rem; padding: 0 3px; border-radius: 3px; }
.tl-rm:hover { color: var(--danger, #dc2626); background: color-mix(in srgb, var(--danger, #dc2626) 12%, transparent); }
.tl-addmenu { position: fixed; z-index: 400; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; box-shadow: 0 10px 30px rgba(0,0,0,.2); padding: 6px; min-width: 190px; display: flex; flex-direction: column; gap: 2px; }
.tl-additem { text-align: left; border: none; background: none; border-radius: 7px; padding: 8px 10px; font-family: inherit; font-size: .9rem; color: var(--text); cursor: pointer; }
.tl-additem:hover { background: var(--bg); }
.act-ctl { display: inline-flex; align-items: center; gap: 3px; font-size: .72rem; color: var(--muted); }
.act-ctl .act-up, .act-ctl .act-down { border: 1px solid var(--border); background: var(--surface); color: var(--muted); border-radius: 5px; width: 22px; height: 22px; cursor: pointer; font-size: .75rem; line-height: 1; }
.act-ctl .act-up:hover, .act-ctl .act-down:hover { color: var(--text); border-color: var(--primary); }
.act-ctl .act-min { width: 44px; padding: .15rem .3rem; border: 1px solid var(--border); border-radius: 5px; background: var(--bg); color: var(--text); font-size: .75rem; text-align: center; font-family: inherit; }
html[data-device="ipad"] .act-ctl .act-up, html[data-device="ipad"] .act-ctl .act-down { width: 30px; height: 30px; }
.tl-budget { font-size: .78rem; font-weight: 600; color: var(--danger, #dc2626); margin: -.25rem 0 .6rem; }
.tl-step .sbar { height: 5px; border-radius: 3px; background: var(--border); }
.tl-step.done .sbar { background: #16a34a; }
.tl-step.cur .sbar { background: var(--primary); }
.tl-step .slab { font-size: .72rem; color: var(--muted); white-space: nowrap; display: flex; align-items: center; gap: 5px; }
.tl-step.cur .slab { color: var(--text); font-weight: 700; }
.tl-step .snum { font-family: ui-monospace, Menlo, monospace; font-size: .62rem; background: var(--bg); border: 1px solid var(--border); border-radius: 4px; padding: 0 5px; }
.tl-step.cur .snum { background: var(--primary); color: #fff; border-color: var(--primary); }
.tl-step .smins { font-size: .64rem; color: var(--muted); font-variant-numeric: tabular-nums; }

.tl-nav {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 200;
  display: flex; align-items: center; gap: 12px; padding: .55rem 1rem;
  background: var(--surface); border-top: 1px solid var(--border); box-shadow: 0 -2px 10px rgba(0,0,0,.08);
}
.tl-nav .tl-prev { border: 1px solid var(--border); background: var(--surface); color: var(--muted); border-radius: 9px; padding: .6rem 1rem; font-weight: 600; cursor: pointer; font-family: inherit; }
.tl-nav .tl-spacer { flex: 1; }
.tl-nav .tl-pos { font-variant-numeric: tabular-nums; font-size: .8rem; color: var(--muted); }
.tl-nav .tl-next { border: none; background: var(--primary); color: #fff; border-radius: 9px; padding: .7rem 1.5rem; font-size: 1rem; font-weight: 700; cursor: pointer; font-family: inherit; }
html[data-device="ipad"] .tl-nav .tl-next { padding: .9rem 1.9rem; font-size: 1.05rem; }

/* Sticky bunnlinje */
.session-stickybar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 200;
  display: flex; align-items: center; gap: .6rem;
  padding: .55rem 1rem; background: var(--surface);
  border-top: 1px solid var(--border); box-shadow: 0 -2px 10px rgba(0,0,0,.08);
}
.session-stickybar .sb-spacer { flex: 1; }

/* iPad: behold romslige touch-mål */
html[data-device="ipad"] .hw-section { padding: 1.1rem 1.25rem; }
html[data-device="ipad"] .warmup-strip { padding: .7rem .9rem; }
html[data-device="ipad"] .warmup-strip .wu-note { padding: .5rem .6rem; }
html[data-device="ipad"] .session-stickybar { padding: .8rem 1rem; }

/* ══════════════════════════════════════════════════════════════════
   DESIGNSYSTEM — trinn 4 (docs/opprydding-plan.md §4)
   Rent additivt. Ingen av selektorene under treffer eksisterende
   markup (verifisert), så dette endrer ingenting visuelt før sider
   migreres i trinn 5–8.
══════════════════════════════════════════════════════════════════ */

:root {
  /* Semantisk status – avledet av eksisterende tokens, så mørkt tema
     følger automatisk uten egne overstyringer. */
  --st-todo:        var(--muted);
  --st-todo-soft:   color-mix(in srgb, var(--muted)   14%, transparent);
  --st-active:      var(--primary);
  --st-active-soft: color-mix(in srgb, var(--primary) 14%, transparent);
  --st-done:        var(--success);
  --st-done-soft:   color-mix(in srgb, var(--success) 16%, transparent);

  /* Advarsel/mellomnivå – manglet i systemet (brukes til poengbånd o.l.) */
  --warn:      #b45309;
  --warn-soft: color-mix(in srgb, var(--warn) 18%, transparent);

  /* Skalaer – erstatter magiske tall og inline-stiler */
  --s-1: .25rem;  --s-2: .5rem;   --s-3: .75rem;
  --s-4: 1rem;    --s-5: 1.5rem;  --s-6: 2rem;
  --fs-sm: .8rem; --fs-base: .92rem; --fs-lg: 1.05rem; --fs-xl: 1.35rem;
  --radius-sm: 6px;
}

/* ── Layout-verktøy ──────────────────────────────────────────────── */
.stack    { display: flex; flex-direction: column; gap: var(--s-3); }
.stack-sm { gap: var(--s-2); }
.stack-lg { gap: var(--s-5); }
.cluster  { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); }
.push-end { margin-left: auto; }

/* ── Kort-hode (følger eksisterende .card, som ikke endres) ──────── */
.card-head { display: flex; align-items: center; gap: var(--s-2); margin-bottom: var(--s-3); }
.card-head .card-head-actions { margin-left: auto; display: flex; align-items: center; gap: var(--s-2); }

/* ── Seksjonsoverskrift ──────────────────────────────────────────── */
.section-head { display: flex; align-items: center; gap: var(--s-2); margin-bottom: var(--s-3); }
.section-head h2, .section-head h3 { margin: 0; font-size: var(--fs-lg); font-weight: 700; }
.section-head .section-actions { margin-left: auto; display: flex; align-items: center; gap: var(--s-2); }

/* ── Listerad ────────────────────────────────────────────────────── */
.row { display: flex; align-items: center; gap: var(--s-3); padding: var(--s-3) 0; border-bottom: 1px solid var(--border); }
.row:last-child { border-bottom: none; }
.row-main    { flex: 1; min-width: 0; }
.row-title   { font-weight: 600; font-size: var(--fs-base); }
.row-sub     { font-size: var(--fs-sm); color: var(--muted); }
.row-actions { margin-left: auto; flex: 0 0 auto; display: flex; align-items: center; gap: var(--s-2); }

/* ── Status-chip (ett trykk = neste status, trinn 5) ─────────────── */
.status-chip {
  display: inline-flex; align-items: center; gap: var(--s-1);
  border: 1px solid var(--border); border-radius: 999px;
  padding: .2rem .65rem; font-family: inherit; font-size: var(--fs-sm);
  font-weight: 600; line-height: 1.6; white-space: nowrap; cursor: pointer;
  background: var(--surface); color: var(--muted);
  transition: background .12s ease, color .12s ease, border-color .12s ease;
}
.status-chip::before { content: ""; width: .5rem; height: .5rem; border-radius: 50%; background: currentColor; flex: 0 0 auto; }
.status-chip[data-status="todo"],
.status-chip[data-status="pending"] { color: var(--st-todo);   background: var(--st-todo-soft);   border-color: transparent; }  /* pending = DB-alias for todo */
.status-chip[data-status="active"] { color: var(--st-active); background: var(--st-active-soft); border-color: transparent; }
.status-chip[data-status="done"]   { color: var(--st-done);   background: var(--st-done-soft);   border-color: transparent; }
.status-chip:hover        { filter: brightness(.97); }
.status-chip:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.status-chip[aria-busy="true"] { opacity: .55; cursor: progress; }
.status-chip[disabled]    { cursor: default; opacity: .7; }

/* ── Legg-til-panel (erstatter de 6 variantene i session.php) ────── */
.panel-add {
  background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius);
  padding: var(--s-3); margin-top: var(--s-2);
  display: flex; flex-direction: column;
}
/* Avstand via margin (ikke gap): JS setter style.display='block' på flere av
   panelene, og da ville gap falt bort. Owl-selektoren virker i begge modi. */
.panel-add > * + * { margin-top: var(--s-2); }

/* Skjemafelt – erstatter gjentatt inline-styling */
.field {
  padding: .3rem .5rem; border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--bg); color: var(--text); font-family: inherit; font-size: var(--fs-sm);
}
.field-label {
  display: flex; flex-direction: column; gap: var(--s-1);
  font-size: .82rem; color: var(--muted);
}
.panel-add[hidden] { display: none; }
#btn-open-add[hidden] { display: none; } /* .btn sets display:inline-flex – [hidden] alone loses on specificity */
.panel-add .panel-add-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); }

/* iPad: større touch-mål på de nye komponentene */
html[data-device="ipad"] .status-chip { padding: .4rem .9rem; font-size: var(--fs-base); }
html[data-device="ipad"] .row         { padding: var(--s-4) 0; }

/* ── «Elevens dag» (trinn 5) ─────────────────────────────────────── */
/* Én visning: timeplanen forlates aldri. Segmentene står igjen som
   oppbevaringssted for innholdet, som flyttes inn i tabellen når et punkt
   åpnes – derfor skjules sporet og den gamle framdriftsstripa. */
#tl-track, .tl-strip, .tl-budget { display: none; }

.dag-status {
  display: flex; align-items: center; gap: var(--s-2) var(--s-4); flex-wrap: wrap;
  background: var(--surface); border: 1px solid var(--border); border-left: 3px solid var(--primary);
  border-radius: var(--radius); padding: var(--s-2) var(--s-3); margin-bottom: var(--s-3);
}
.dag-name  { font-size: var(--fs-lg); font-weight: 700; }
.dag-meta  { font-size: var(--fs-sm); color: var(--muted); white-space: nowrap; }
.dag-card  { margin-bottom: var(--s-3); padding: var(--s-4); }
.dag-empty { color: var(--muted); font-size: var(--fs-sm); }
.dag-row-inactive { opacity: .45; }

.dag-back { margin-bottom: var(--s-3); }

.dag-undo {
  position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%);
  display: flex; align-items: center; gap: var(--s-3); z-index: 320;
  background: var(--text); color: var(--surface); border-radius: 10px;
  padding: .6rem 1rem; font-size: var(--fs-sm); font-weight: 600;
  box-shadow: 0 10px 28px rgba(0,0,0,.28);
}
.dag-undo button {
  background: none; border: none; cursor: pointer; font-family: inherit;
  font-size: var(--fs-sm); font-weight: 700; color: var(--primary); text-decoration: underline;
}

/* Skillelinje i nedtrekksmeny (materiale ↔ undervisningsopplegg) */
.nav-drop-sep { height: 1px; margin: .35rem .5rem; background: var(--border); list-style: none; }

/* ── Undervisningsdags-oversikt (etappe 1) ───────────────────────── */
/* .dagsoversikt er JS-roten og brukes av to visninger: dagsoversikten (tabell)
   og semesteroversikten (kort). Kortvarianten beholder flex-stabelen. */
.dagsoversikt { display: flex; flex-direction: column; gap: var(--s-3); }
.table-wrap.dagsoversikt { display: block; }
.dag-kort { padding: var(--s-4); }
.dag-tid  { font-variant-numeric: tabular-nums; font-weight: 700; font-size: var(--fs-base); white-space: nowrap; }
.dag-navn { font-size: var(--fs-lg); font-weight: 700; }
.dag-kort .card-head { flex-wrap: wrap; gap: var(--s-2) var(--s-3); }

/* ── Dagstabellen: regneark-format, én rad per stykke/aktivitet ─────────────
   Elevens celler (#, tid, navn, dagens punkter) slås sammen over radene hens.
   Synlige cellekanter og tett luft, som i et regneark – se docs/neste-fase-plan.md. */
.dag-ark {
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  overflow: hidden; box-shadow: var(--shadow);
}
/* Tittelrada er bevisst mørk i begge temaer (som forelegget), så fargene er satt
   her i stedet for å arve --primary – indigo i lyst tema gir for svak kontrast. */
.dag-ark-tittel {
  background: #24211b; color: #e8c15a;
  font-weight: 700; font-size: var(--fs-lg); text-align: center;
  padding: .5rem var(--s-3);
}
.dag-tabell { background: var(--surface); }
.dag-tabell th {
  position: sticky; top: 0; z-index: 2;
  background: color-mix(in srgb, var(--success) 18%, var(--surface));
  color: var(--text); text-transform: none; letter-spacing: 0;
  font-weight: 700; font-size: var(--fs-base); padding: .4rem .6rem;
  border: 1px solid var(--border);
}
.dag-tabell td {
  vertical-align: middle; padding: .4rem .6rem;
  border: 1px solid var(--border);
}
.dag-c-tid  { width: 7rem; }
.dag-c-elev { width: 15rem; }
.dag-c-add  { width: 4.5rem; text-align: center; }

/* ── Huskelapp fra forrige time ──────────────────────────────────────────
   Lappen skal kunne leses i et blikk før eleven kommer inn døra, men den skal
   ikke dominere lista. Derfor fast, moderat bredde og gul tone: dette er en
   lapp, ikke en datakolonne. */
/* min-width, ikke bare width: width alene er et ØNSKE i en tabell, og
   tabellen klemte kolonnen ned til én stavelse per linje når plassen ble
   knapp. min-width er et krav. */
.dag-c-husk { width: 17rem; min-width: 14rem; }
.dag-husk   { vertical-align: top; }
.dag-husk-tekst {
  font-size: var(--fs-sm); line-height: 1.35;
  background: color-mix(in srgb, var(--warn) 16%, transparent);
  border-left: 3px solid var(--warn);
  padding: .3rem .45rem; border-radius: var(--radius-sm);
  /* break-word, ikke anywhere: «anywhere» delte oppvarming i «oppvarmin g».
     Her skal bare et ord som er for langt for kolonnen brytes. */
  white-space: pre-line; overflow-wrap: break-word;
}
.dag-husk-dato { font-size: .68rem; color: var(--muted); margin-top: .2rem; }
/* På iPad leses dagslista på en meter, ikke på en armlengde. 12,8 px holdt
   ikke – lappen er det man skumleser rett før eleven kommer inn. */
html[data-device="ipad"] .dag-husk-tekst { font-size: var(--fs-base); line-height: 1.4; padding: .45rem .6rem; }
html[data-device="ipad"] .dag-husk-dato  { font-size: var(--fs-sm); }
/* Bredere lapp BARE når det er plass til den. Stående iPad er 834 px, og der
   spiste en 20rem-lapp stykkekolonnen ned til 176 px – smalere enn notisen
   ved siden av. Stykkene er hovedsaken; lappen er støtte. */
@media (min-width: 1000px) {
  html[data-device="ipad"] .dag-c-husk { width: 20rem; min-width: 17rem; }
}
/* Og motsatt vei på smal skjerm: lappen slipper taket, så stykkekolonnen –
   hovedsaken – ikke blir smalere enn notisen ved siden av. */
@media (max-width: 999px) {
  .dag-c-husk { width: 14rem; min-width: 11rem; }
}
/* Annenhver-elev-tonen ligger på td og ville slukt den gule lappen; her skal
   lappens egen farge vinne. */
.dag-elev:nth-of-type(even) .dag-husk-tekst {
  background: color-mix(in srgb, var(--warn) 22%, var(--surface));
}

/* Annenhver elev får tonet bakgrunn – hele elevens blokk, ikke annenhver rad,
   slik at flerlinjede elever fortsatt leses som én enhet. */
.dag-elev:nth-of-type(even) td { background: color-mix(in srgb, var(--text) 4%, transparent); }
.dag-elev + .dag-elev td { border-top: 1px solid var(--border); }
.dag-rad-tom .dag-innhold { color: var(--muted); }

/* ── Tidligere stykker (sammenklappet, i undervisningsvinduet) ───────────── */
/* Vannrett luft som matcher tabellcellene over, så teksten står på linje med
   dem og datoene ikke klistrer seg mot kanten. */
.tidligere-stykker {
  margin-top: .75rem; border-top: 1px solid var(--border);
  padding: .6rem .6rem .2rem;
}
.tidligere-stykker > summary {
  cursor: pointer; font-size: var(--fs-sm); color: var(--muted);
  list-style: none; display: flex; align-items: center; gap: .4rem; user-select: none;
}
.tidligere-stykker > summary::-webkit-details-marker { display: none; }
.tidligere-stykker > summary::before { content: '▸'; font-size: .7rem; transition: transform .12s; }
.tidligere-stykker[open] > summary::before { transform: rotate(90deg); }
.tidligere-stykker > summary:hover { color: var(--text); }
.tid-antall {
  font-size: .68rem; background: color-mix(in srgb, var(--text) 10%, transparent);
  border-radius: 10px; padding: .02rem .4rem;
}
.tid-liste { list-style: none; margin: .5rem 0 0; padding: 0; }
.tid-liste li {
  display: flex; align-items: baseline; gap: .35rem; flex-wrap: wrap;
  padding: .25rem 0; border-bottom: 1px dashed var(--border); font-size: var(--fs-sm);
}
.tid-liste li:last-child { border-bottom: none; }
.tid-tittel { font-weight: 600; }
.tid-komp   { color: var(--muted); min-width: 0; overflow-wrap: break-word; }
/* INGEN margin-left: auto. Første forsøk dyttet datoen helt til høyre for å
   få en loddrett datokolonne – men lista står i den smale venstrespalten, og
   da ble datoen presset ut mot kanten og klippet. Her får den heller bryte
   til neste linje når plassen er knapp. */
.tid-dato   { color: var(--muted); font-size: .72rem; white-space: nowrap; }

/* iPad: lista slås opp med en finger, så både teksten og selve
   sammendrags-raden må være større – 12,8 px og en 20 px høy klikkflate
   duger ikke når man står ved pianoet. */
/* min-height, ikke bare padding: padding alene ga 38 px, og raden er en
   klikkflate man skal treffe uten å sikte. */
html[data-device="ipad"] .tidligere-stykker > summary {
  font-size: var(--fs-base); padding: .5rem 0; min-height: 44px;
}
html[data-device="ipad"] .tid-liste li { padding: .5rem 0; font-size: var(--fs-base); }
html[data-device="ipad"] .tid-dato  { font-size: var(--fs-sm); }
html[data-device="ipad"] .tid-antall { font-size: var(--fs-sm); padding: .1rem .5rem; }

/* Avsluttet stykke: synlig, men tydelig ferdig. Nedtonet framfor
   gjennomstreket – teksten skal fortsatt kunne leses, det er hele poenget
   med å ha den der. */
.dag-avsluttet { color: var(--muted); }
.dag-avsluttet strong { font-weight: 600; }
.dag-avsluttet-merke {
  font-size: .68rem; color: var(--st-done, var(--success));
  border: 1px solid color-mix(in srgb, var(--success) 40%, transparent);
  border-radius: 10px; padding: .02rem .4rem; margin-left: .35rem;
  white-space: nowrap;
}
/* 10,9 px er for lite til å lese på en iPad. Merket skal kunne skumles – det
   er hele grunnen til at avsluttede stykker står i lista. */
html[data-device="ipad"] .dag-avsluttet-merke { font-size: var(--fs-sm); padding: .1rem .5rem; }
.dag-ferdig { color: var(--success); font-weight: 700; }

/* ✕ holder seg diskré til man er innom rada, men er alltid synlig på berøring
   (iPad har ingen hover) og alltid tilgjengelig for tastatur. */
.dag-tabell .dag-innhold { position: relative; padding-right: 2rem; }
.dag-rm {
  position: absolute; top: 50%; right: .4rem; transform: translateY(-50%);
  background: none; border: none; cursor: pointer; color: var(--muted);
  font-size: .75rem; line-height: 1; padding: .2rem .35rem; border-radius: 50%;
  opacity: 0; transition: opacity .12s;
}
tr:hover .dag-rm, .dag-rm:focus-visible { opacity: 1; }
.dag-rm:hover { color: var(--danger); background: color-mix(in srgb, var(--danger) 14%, transparent); }
/* 44×44 er Apples minstemål for noe man skal treffe med en finger. Regelen
   her ga 26×26 – stor nok for en mus, for liten for en hånd over et piano.
   Knappen SER like diskré ut; det er trykkflaten rundt som vokser. */
html[data-device="ipad"] .dag-rm {
  opacity: .55; font-size: var(--fs-base);
  min-width: 44px; min-height: 44px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
}

/* Scopet til tabellen: .dag-navn brukes også av semesteroversiktens kort. */
.dag-tabell .dag-navn { font-size: var(--fs-base); font-weight: 600; color: var(--text); }
.dag-tabell a.dag-navn:hover { color: var(--primary); text-decoration: underline; }

/* ── «+»-menyen: søk + stykker + aktiviteter ── */
.dag-add {
  background: none; border: none; cursor: pointer; color: var(--text);
  font-size: var(--fs-lg); font-weight: 700; line-height: 1;
  padding: .15rem .5rem; border-radius: var(--radius-sm);
}
.dag-add:hover { background: color-mix(in srgb, var(--primary) 14%, transparent); color: var(--primary); }
.dag-meny { width: 17rem; max-width: calc(100vw - 2rem); max-height: calc(100vh - 1rem); padding: var(--s-2); }
.dag-meny-sok {
  width: 100%; font: inherit; font-size: var(--fs-sm); color: var(--text);
  background: var(--bg); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: .3rem .5rem; margin-bottom: var(--s-2);
}
/* Eksplisitt: ingen author-regel setter display på feltet, men vi vil ikke være
   avhengige av at nettleserens [hidden] vinner hvis noen legger til en senere. */
.dag-meny-sok[hidden] { display: none; }
/* Lista krymper på lave skjermer, så hele menyen får plass i viewporten. */
.dag-meny-liste { max-height: min(16rem, 50vh); overflow-y: auto; }
.dag-meny-tilbake { color: var(--muted); font-size: var(--fs-sm); }
.dag-meny-tittel {
  font-size: var(--fs-sm); font-weight: 700; color: var(--muted);
  text-transform: uppercase; letter-spacing: .05em;
  padding: var(--s-2) var(--s-2) var(--s-1);
}

/* iPad: større trykkflater i tabellen. */
/* iPad brukes i landskap, og da er tettheten viktigere enn store rader.
   Knappene beholder trykkflaten sin lenger nede; det er bare radhøyden som
   ikke skal blåses opp. */
html[data-device="ipad"] .dag-tabell .status-chip { padding: .35rem .7rem; }

/* ── Semesteroversikt (etappe 2) ─────────────────────────────────── */
/* Arver .dagsoversikt/.dag-kort – her trengs bare nedtrekket og forfalls-markøren. */
.sem-select {
  font: inherit; font-size: var(--fs-sm); color: var(--text);
  background: var(--bg); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: .25rem .4rem; max-width: 11rem;
}
.sem-select:disabled { opacity: .55; cursor: not-allowed; }
/* Planlagt i fortida, men ikke avsluttet – læreren har sakket etter. */
.sem-overdue { border-left: 3px solid var(--warn); padding-left: var(--s-2); }
.sem-overdue .row-title { color: var(--warn); }
html[data-device="ipad"] .sem-select { font-size: var(--fs-base); padding: .45rem .6rem; }

/* Dato + klokkeslett i undervisningsvinduets topplinje. */
.session-dato { font-weight: 600; }
.session-kl   { color: var(--muted); }
.session-kl::before { content: '·'; margin: 0 .4rem; color: var(--border); }

/* ── Timeplanen i undervisningsvinduet (landingsside) ───────────────────── */
/* Arver .dag-ark/.dag-tabell fra dagsoversikten – samme regnearkspråk. */
.timeplan-ark { max-width: 900px; margin: 0 auto; }
.tp-horisont {
  display: flex; align-items: center; gap: var(--s-3);
  padding: var(--s-2) var(--s-3);
  background: var(--surface); border-bottom: 1px solid var(--border);
}
.tp-h-bar   { display: flex; flex: 1; height: 14px; min-width: 6rem;
              border-radius: 999px; overflow: hidden; background: var(--border); }
.tp-b-seg   { background: var(--primary); border-right: 1px solid var(--surface); }
.tp-b-seg:last-child { border-right: none; }
.tp-b-seg:nth-child(even) { opacity: .62; }
.tp-h-sum   { font-size: var(--fs-sm); font-variant-numeric: tabular-nums;
              color: var(--muted); white-space: nowrap; }
.tp-h-sum.tp-over { color: var(--danger); font-weight: 700; }

.tp-c-nr { width: 2.5rem; } .tp-c-punkt { width: 11rem; }
.tp-c-tid { width: 5.5rem; } .tp-c-apne { width: 5rem; }
.tp-nr   { text-align: center; color: var(--muted); font-weight: 600;
           font-variant-numeric: tabular-nums; }
.tp-punkt { font-weight: 600; white-space: nowrap; }
.tp-tid   { text-align: right; font-variant-numeric: tabular-nums; }
.tp-c-apne { text-align: center; }
.tp-rad-tom .tp-innhold { color: var(--muted); font-style: italic; }

/* ── KI-generator i modulbiblioteket ───────────────────────────────────── */
.mod-ai-form {
  border-color: color-mix(in srgb, var(--primary) 38%, var(--border));
  background: color-mix(in srgb, var(--primary) 5%, var(--surface));
}
.mod-ai-hint { margin: -.25rem 0 .75rem; font-size: var(--fs-sm); color: var(--muted); max-width: 60ch; }

/* ── «Legg til i timen» i timeplan-tabellen ────────────────────────────── */
.tp-legg-til { text-align: center; background: var(--surface); }
.tp-meny { width: 20rem; max-width: calc(100vw - 2rem); max-height: calc(100vh - 1rem); overflow-y: auto; }
.tp-meny-tittel {
  font-size: var(--fs-sm); font-weight: 700; color: var(--muted);
  text-transform: uppercase; letter-spacing: .05em;
  padding: var(--s-2) var(--s-2) var(--s-1); margin-top: var(--s-1);
  border-top: 1px solid var(--border);
}
.tp-meny-min { color: var(--muted); font-size: var(--fs-sm); margin-left: .35rem; }
.tl-additem-av { opacity: .5; cursor: not-allowed; }
.tp-meny-tom { padding: var(--s-2); font-size: var(--fs-sm); color: var(--muted); }
.ai-spm-status { margin-left: .6rem; font-size: var(--fs-sm); color: var(--muted); }

/* Punkt som ikke er planlagt i denne timen – ute av sporet, ikke bare tomt. */
.seg-av { display: none; }

/* ── Forrige times oppgaver, til vurdering ─────────────────────────────── */
.fh-ark { margin-top: var(--s-3); }
.fh-tittel {
  background: color-mix(in srgb, var(--warn) 16%, var(--surface));
  font-weight: 700; padding: .45rem var(--s-3); border-bottom: 1px solid var(--border);
}
.fh-dato { color: var(--muted); font-weight: 400; }
.fh-oppg { line-height: 1.35; }
.fh-tekst { display: block; }
.fh-knapper { width: 20rem; text-align: right; white-space: nowrap; }
.fh-btn {
  font: inherit; font-size: var(--fs-sm); cursor: pointer;
  background: var(--bg); color: var(--muted);
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: .25rem .5rem; margin-left: .25rem;
}
.fh-btn:hover { color: var(--text); border-color: var(--primary); }
/* Valgt vurdering farges; de to andre blir stående nøytrale så valget kan endres. */
.fh-klarte.fh-valgt { background: var(--st-done-soft); color: var(--st-done); border-color: transparent; }
.fh-nesten.fh-valgt { background: var(--warn-soft); color: var(--warn); border-color: transparent; }
.fh-ikke.fh-valgt   { background: color-mix(in srgb, var(--danger) 14%, transparent); color: var(--danger); border-color: transparent; }
.fh-rad[data-vurdert] .fh-tekst { color: var(--muted); }
html[data-device="ipad"] .fh-btn { font-size: var(--fs-base); padding: .45rem .75rem; }
/* Ett stykke, én modul – én linje. Komma mellom dem gjorde raden uleselig. */
.tp-linje { display: block; }
.tp-linje + .tp-linje { margin-top: .15rem; }

/* Pågående stykker øverst i «Ukens musikkstykke» – samme kilde som timeplanen. */
.stykke-paagaaende .sp-rad {
  display: flex; align-items: baseline; gap: var(--s-2);
  padding: .35rem 0; border-bottom: 1px dotted var(--border);
}
.sp-tittel { font-weight: 600; }
.sp-sub    { color: var(--muted); font-size: var(--fs-sm); }

/* ── Timen folder seg ut i timeplanen ──────────────────────────────────── */
.tp-rad-aapen > td  { background: color-mix(in srgb, var(--primary) 9%, transparent); font-weight: 600; }
.tp-rad-ferdig > td { color: var(--muted); }
.tp-rad-ferdig .tp-nr::after { content: ' ✓'; color: var(--success); }
.tp-detalj > td { padding: 0; background: var(--surface); }
/* Kroppen var skjult inne i segmentet; her skal den vises. */
.tp-detalj .body { display: block; padding: var(--s-3) var(--s-4) var(--s-4); }
.tp-detalj .hw-section { margin: 0 0 var(--s-3); }

/* Tekst i tidshorisonten – stripa var fin, men sa ikke hva delene var. */
.tp-h-bar { height: 26px; }
.tp-b-seg {
  display: flex; align-items: center; justify-content: center; overflow: hidden;
  min-width: 0; padding: 0 .2rem;
}
.tp-b-tekst {
  font-size: .68rem; font-weight: 600; color: #fff; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; opacity: .92;
}
.tp-b-done { background: var(--success); }
.tp-b-cur  { background: var(--primary-h, var(--primary)); box-shadow: inset 0 0 0 2px rgba(255,255,255,.55); }

/* Timeren står nå over tidshorisonten, i samme kort. */
.timeplan-ark .lesson-timer { border-bottom: 1px solid var(--border); }
.timeplan-ark .tl-nav { padding: var(--s-3); border-top: 1px solid var(--border); }

/* ── Dra for å flytte elementer i timen ────────────────────────────────── */
.tp-grep { cursor: grab; color: var(--muted); user-select: none; margin-right: .2rem; }
.tp-drar { opacity: .45; }
.tp-over-for  > td { box-shadow: inset 0 3px 0 var(--primary); }
.tp-over-etter > td { box-shadow: inset 0 -3px 0 var(--primary); }
.tp-fjern {
  background: none; border: none; cursor: pointer; color: var(--muted);
  font-size: .75rem; padding: .2rem .35rem; border-radius: 50%; margin-left: .25rem;
  opacity: 0; transition: opacity .12s;
}
tr:hover .tp-fjern, .tp-fjern:focus-visible { opacity: 1; }
.tp-fjern:hover { color: var(--danger); background: color-mix(in srgb, var(--danger) 14%, transparent); }
html[data-device="ipad"] .tp-fjern { opacity: .55; font-size: var(--fs-sm); }

/* Hver bit av timen åpnes og lukkes for seg. */
.tp-vipp {
  background: none; border: none; cursor: pointer; color: var(--muted);
  font-size: .8rem; line-height: 1; padding: .25rem .4rem; border-radius: var(--radius-sm);
}
.tp-vipp:hover { color: var(--primary); background: color-mix(in srgb, var(--primary) 12%, transparent); }
/* Gjeldende punkt (der timeren står) er markert sterkere enn de som bare er åpne. */
.tp-rad-naa > td { background: color-mix(in srgb, var(--primary) 12%, transparent); font-weight: 600; }
.tp-rad-aapen > td { background: color-mix(in srgb, var(--primary) 5%, transparent); }
.tp-rad-naa.tp-rad-aapen > td { background: color-mix(in srgb, var(--primary) 12%, transparent); }
tr[data-idx] { cursor: pointer; }
html[data-device="ipad"] .tp-vipp { font-size: var(--fs-base); padding: .45rem .6rem; }

/* Hvert stykke bærer sin egen lekse. */
.stykke-blokk + .stykke-blokk { margin-top: var(--s-4); padding-top: var(--s-3); border-top: 1px solid var(--border); }
.stykke-blokk .hw-section { margin-top: var(--s-2); }

/* ── Tettere undervisningsvindu ────────────────────────────────────────────
   Målet er mest mulig av timen på skjermen uten å rulle. */
.dag-tabell td { padding: .22rem .5rem; }
.dag-tabell th { padding: .25rem .5rem; font-size: var(--fs-sm); }
.tp-linje + .tp-linje { margin-top: 0; }
.tp-punkt, .tp-innhold, .tp-tid { line-height: 1.3; }

/* «Nå / Neste» i timeren sa det den uthevede raden allerede sier. */
.timeplan-ark .lt-nownext { display: none; }
.timeplan-ark .lesson-timer { padding: .3rem var(--s-3); gap: var(--s-2); }
.timeplan-ark .lt-big { font-size: 1.1rem; }
.timeplan-ark .tp-horisont { padding: .3rem var(--s-3); gap: var(--s-2); }
.timeplan-ark .tl-nav { padding: .4rem var(--s-3); }

/* Utfoldet innhold: mindre luft, så et åpent punkt ikke sprenger skjermen. */
.tp-detalj .body { padding: var(--s-2) var(--s-3) var(--s-3); }
.tp-detalj .hw-section { margin: 0 0 var(--s-2); }
.tp-detalj .hw-section-head { margin-bottom: .2rem; }
.tp-detalj .hw-section-head h2 { font-size: var(--fs-base); margin: 0; }
.stykke-blokk + .stykke-blokk { margin-top: var(--s-3); padding-top: var(--s-2); }

/* ── Pensum ────────────────────────────────────────────────────────────── */
.pensum-side { max-width: 1000px; margin: 0 auto; }
.pen-ny { margin-bottom: var(--s-4); }
.pen-ny-rad { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--s-3); }
.pen-ny-rad label { display: flex; flex-direction: column; gap: .2rem; font-size: var(--fs-sm); color: var(--muted); }
.pen-ny-rad input, .pen-ny-rad select {
  font: inherit; font-size: var(--fs-base); color: var(--text);
  background: var(--bg); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: .35rem .5rem;
}
.pen-ny-rad input[type="text"] { min-width: 22rem; }
.pen-ny-rad input[type="number"] { width: 7rem; }

.pen-omrade { margin-bottom: var(--s-3); padding: var(--s-3) var(--s-4); }
.pen-omr-navn { margin: 0; font-size: var(--fs-lg); }

.pen-rad {
  display: flex; align-items: baseline; gap: var(--s-2);
  padding: .25rem .2rem; border-bottom: 1px solid var(--border);
}
.pen-rad:hover { background: color-mix(in srgb, var(--primary) 5%, transparent); }
.pen-navn  { font-weight: 600; }
/* Koden er den permanente nøkkelen – synlig, men den skal ikke dominere. */
.pen-kode  { font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
             font-size: .72rem; color: var(--muted); }
.pen-trinn { font-size: var(--fs-sm); color: var(--muted); white-space: nowrap; }
.pen-bevis { font-size: var(--fs-sm); color: var(--st-done); margin-left: auto; white-space: nowrap; }
.pen-bevis.pen-tom { color: var(--warn); }
.pen-knapper { display: inline-flex; gap: .1rem; opacity: 0; transition: opacity .12s; }
.pen-rad:hover .pen-knapper, .pen-knapper:focus-within { opacity: 1; }
.pen-btn {
  background: none; border: none; cursor: pointer; color: var(--muted);
  font-size: .8rem; line-height: 1; padding: .2rem .35rem; border-radius: var(--radius-sm);
}
.pen-btn:hover { color: var(--primary); background: color-mix(in srgb, var(--primary) 12%, transparent); }
.pen-slett:hover { color: var(--danger); background: color-mix(in srgb, var(--danger) 14%, transparent); }
html[data-device="ipad"] .pen-knapper { opacity: .6; }
html[data-device="ipad"] .pen-btn { font-size: var(--fs-base); padding: .4rem .55rem; }

/* ── Pensumvisning: samme ark til skjerm og papir ───────────────────────── */
.pv-side { max-width: 52rem; margin: 0 auto; }

.pv-verktoy {
  display: flex; align-items: center; gap: var(--s-2);
  flex-wrap: wrap; margin-bottom: var(--s-3);
}
.pv-bryter {
  display: inline-flex; align-items: center; gap: .35rem;
  font-size: var(--fs-sm); color: var(--muted); cursor: pointer;
}

/* Arket. Hvit flate med skygge på skjerm, bare papir ved utskrift. */
.pv-ark {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow);
  padding: var(--s-5) var(--s-5) var(--s-6);
}
.pv-topp { border-bottom: 2px solid var(--border); padding-bottom: var(--s-3); margin-bottom: var(--s-4); }
.pv-sti { font-size: var(--fs-sm); color: var(--muted); margin-bottom: .2rem; }
.pv-sti a { color: var(--muted); text-decoration: none; }
.pv-sti a:hover { color: var(--primary); text-decoration: underline; }
.pv-pil { opacity: .5; }
.pv-tittel { margin: 0 0 .3rem; font-size: 1.7rem; line-height: 1.2; }
.pv-meta { margin: 0; display: flex; gap: var(--s-2); align-items: center; flex-wrap: wrap; }
.pv-kode {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .76rem; color: var(--muted);
}
.pv-trinn {
  font-size: .72rem; padding: .1rem .45rem; border-radius: 999px;
  background: color-mix(in srgb, var(--primary) 14%, transparent); color: var(--primary);
}
.pv-innledning { margin: var(--s-2) 0 0; color: var(--muted); font-style: italic; }
.pv-tom { padding: var(--s-6) var(--s-3); }

/* Innholdsblokker. Knappene ligger i margen og dukker opp ved hover, så de
   ikke konkurrerer med teksten – siden skal kunne leses, ikke bare redigeres. */
.pv-blokk { position: relative; }
.pv-blokk-knapper {
  position: absolute; top: .1rem; right: 0; display: flex; gap: .1rem;
  opacity: 0; transition: opacity .12s;
}
.pv-blokk:hover .pv-blokk-knapper, .pv-blokk:focus-within .pv-blokk-knapper { opacity: 1; }
.pv-bk {
  background: var(--surface); border: 1px solid var(--border); cursor: pointer;
  color: var(--muted); font-size: .72rem; line-height: 1;
  padding: .2rem .35rem; border-radius: var(--radius-sm);
}
.pv-bk:hover { color: var(--primary); border-color: var(--primary); }
.pv-bk-slett:hover { color: var(--danger); border-color: var(--danger); }

.pv-h { font-size: var(--fs-xl); margin: var(--s-4) 0 var(--s-2); line-height: 1.25; }
.pv-blokk:first-child .pv-h { margin-top: 0; }
.pv-t { margin: 0 0 var(--s-3); line-height: 1.65; }
.pv-eks {
  margin: 0 0 var(--s-3); padding: var(--s-2) var(--s-3);
  border-left: 3px solid var(--primary);
  background: color-mix(in srgb, var(--primary) 7%, transparent);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0; line-height: 1.6;
}

/* Plassholderen for et bilde KI-en ikke kan lage. Den skal se ut som et hull,
   ikke som innhold, og den skrives ut – så læreren ser hva som mangler. */
.pv-ill {
  margin: 0 0 var(--s-3); padding: var(--s-3);
  border: 2px dashed var(--border); border-radius: var(--radius-sm);
  text-align: center;
}
.pv-ill-merke {
  display: inline-block; font-size: var(--fs-sm); font-weight: 600;
  color: var(--warn, #b45309); margin-bottom: .3rem;
}
.pv-ill figcaption { font-size: var(--fs-sm); color: var(--muted); line-height: 1.5; }

/* Kontrollspørsmål */
.pv-spm { margin-top: var(--s-5); border-top: 2px solid var(--border); padding-top: var(--s-4); }
.pv-spm-h { margin-top: 0; }
.pv-spm-sub { margin: 0 0 var(--s-3); }
.pv-spm-liste { margin: 0; padding-left: 1.4rem; }
.pv-sp { position: relative; margin-bottom: var(--s-4); break-inside: avoid; }
.pv-sp-slett { position: absolute; top: 0; right: 0; opacity: 0; transition: opacity .12s; }
.pv-sp:hover .pv-sp-slett { opacity: 1; }
.pv-sp-tekst { margin: 0 0 .4rem; font-weight: 600; line-height: 1.5; }
.pv-alt { margin: 0; padding-left: 1.3rem; }
.pv-alt li { margin-bottom: .15rem; line-height: 1.45; }
/* Fasit vises bare når lærermodus er på. Uten den er arket en prøve. */
.pv-forkl { display: none; }
.pv-fasit-på .pv-forkl {
  display: block; margin: .4rem 0 0; font-size: var(--fs-sm);
  color: var(--muted); font-style: italic; line-height: 1.5;
}
.pv-fasit-på .pv-riktig { font-weight: 700; color: var(--success); }
.pv-fasit-på .pv-riktig::after { content: ' ✓'; }

html[data-device="ipad"] .pv-ark { padding: var(--s-4); }
html[data-device="ipad"] .pv-blokk-knapper,
html[data-device="ipad"] .pv-sp-slett { opacity: .55; }
html[data-device="ipad"] .pv-bk { font-size: var(--fs-sm); padding: .35rem .5rem; }

@media (max-width: 640px) {
  .pv-ark { padding: var(--s-3); border-radius: 0; border-left: none; border-right: none; }
  .pv-tittel { font-size: 1.35rem; }
  .pv-blokk-knapper, .pv-sp-slett { opacity: .55; }
}

@media print {
  @page { size: A4; margin: 15mm; }
  /* Arket skrives ut lyst uansett tema – mørk bakgrunn blir en svart side. */
  html, body { background: #fff !important; color: #111 !important; }
  .navbar, .pv-verktoy, .pv-blokk-knapper, .pv-sp-slett, .lang-switcher { display: none !important; }
  .pv-side { max-width: none; }
  .pv-ark {
    background: #fff !important; border: none; box-shadow: none;
    padding: 0; border-radius: 0;
  }
  .pv-topp { border-bottom: 2px solid #333; }
  .pv-h { break-after: avoid; }
  .pv-eks, .pv-ill, .pv-blokk, .noter-blokk { break-inside: avoid; }
  .pv-eks { background: #f4f4f4 !important; border-left-color: #555; }
  .pv-spm { border-top: 2px solid #333; }
}
a.pen-navn { color: var(--text); text-decoration: none; }
a.pen-navn:hover { color: var(--primary); text-decoration: underline; }
.pen-ark { font-size: .75rem; opacity: .75; flex: 0 0 auto; }

/* ── Hva mangler? (pensum × mestring) ──────────────────────────────────── */
.ps-velg { display: flex; align-items: flex-end; gap: var(--s-3); margin-bottom: var(--s-3); padding: var(--s-3) var(--s-4); }
.ps-velg label { display: flex; flex-direction: column; gap: .2rem; font-size: var(--fs-sm); color: var(--muted); }
.ps-velg select {
  font: inherit; font-size: var(--fs-base); color: var(--text);
  background: var(--bg); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: .35rem .5rem; min-width: 16rem;
}

.ps-sum { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-bottom: var(--s-2); font-size: var(--fs-sm); }
.ps-sum-del { display: inline-flex; align-items: center; gap: .3rem; }
.ps-varsel {
  margin: 0 0 var(--s-3); font-size: var(--fs-sm); color: var(--warn);
  background: color-mix(in srgb, var(--warn) 10%, transparent);
  border-left: 3px solid var(--warn); padding: .45rem .7rem;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}

.ps-rad {
  display: flex; align-items: baseline; gap: var(--s-2);
  padding: .25rem .2rem; border-bottom: 1px solid var(--border);
}
.ps-rad:hover { background: color-mix(in srgb, var(--primary) 5%, transparent); }
.ps-ikon { font-weight: 700; width: 1.1rem; text-align: center; flex: 0 0 auto; }
.ps-navn { font-weight: 600; color: var(--text); text-decoration: none; }
.ps-navn:hover { color: var(--primary); text-decoration: underline; }
.ps-trinn { font-size: var(--fs-sm); color: var(--muted); white-space: nowrap; }
.ps-tall { font-size: var(--fs-sm); color: var(--muted); margin-left: auto; white-space: nowrap; }
.ps-sist { opacity: .75; }
.ps-mangler { color: var(--warn); }
.ps-quiz {
  font-size: var(--fs-sm); text-decoration: none; white-space: nowrap;
  color: var(--primary); padding: .1rem .4rem; border-radius: var(--radius-sm);
  border: 1px solid transparent; flex: 0 0 auto;
}
.ps-quiz:hover { border-color: var(--primary); background: color-mix(in srgb, var(--primary) 10%, transparent); }

/* Tilstandene. Fargen sitter på ikonet og ikke på hele raden – en side der
   hver linje er farget blir uleselig, og det er avvikene som skal falle i
   øynene, ikke bakgrunnen. */
.ps-sitter    .ps-ikon, .ps-sum-del.ps-sitter    { color: var(--st-done); }
.ps-underveis .ps-ikon, .ps-sum-del.ps-underveis { color: var(--st-active); }
.ps-urort     .ps-ikon, .ps-sum-del.ps-urort     { color: var(--muted); }
.ps-umaalbar  .ps-ikon, .ps-sum-del.ps-umaalbar  { color: var(--warn); }
.ps-sitter .ps-navn { color: var(--muted); }

html[data-device="ipad"] .ps-rad { padding: .35rem .2rem; }
@media (max-width: 640px) {
  .ps-rad { flex-wrap: wrap; }
  .ps-tall { margin-left: 0; flex-basis: 100%; }
  .ps-velg select { min-width: 0; width: 100%; }
}

/* ── Pensum: instruks, redigering og bilder ────────────────────────────── */
.pv-instruks { margin: 0 0 var(--s-3); display: flex; flex-direction: column; gap: .25rem; }
.pv-instruks label { font-size: var(--fs-sm); color: var(--muted); font-weight: 600; }
.pv-instruks textarea,
.pv-rediger textarea, .pv-rediger input[type="text"], .pv-rediger select {
  font: inherit; font-size: var(--fs-base); color: var(--text);
  background: var(--bg); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: .45rem .6rem; width: 100%;
  resize: vertical; line-height: 1.5;
}
.pv-instruks textarea::placeholder, .pv-rediger textarea::placeholder { color: var(--muted); opacity: .7; }
.pv-instruks textarea:focus, .pv-rediger textarea:focus,
.pv-rediger input:focus, .pv-rediger select:focus { outline: 2px solid var(--primary); outline-offset: -1px; }

.pv-rediger { margin: 0 0 var(--s-3); display: flex; flex-direction: column; gap: .4rem; }
.pv-rediger textarea { font-family: inherit; }
/* Noter og klaviatur redigeres som kode – da må tegnene stå rett under hverandre. */
.pv-noter .pv-rediger textarea, .pv-tangenter .pv-rediger textarea {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .85rem;
}
.pv-hjelp {
  margin: 0; font-size: var(--fs-sm); color: var(--muted);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
.pv-rediger-knapper { display: flex; gap: var(--s-2); }
.pv-felt { display: flex; flex-direction: column; gap: .15rem; }
.pv-felt > span { font-size: var(--fs-sm); color: var(--muted); font-weight: 600; }

.pv-bilde { margin: 0 0 var(--s-3); text-align: center; }
.pv-bilde img {
  max-width: 100%; height: auto; border-radius: var(--radius-sm);
  border: 1px solid var(--border);
}

.pv-legg-til {
  display: flex; flex-wrap: wrap; gap: .3rem; align-items: center;
  margin-top: var(--s-4); padding-top: var(--s-3); border-top: 1px dashed var(--border);
}
.pv-legg-merke { font-size: var(--fs-sm); color: var(--muted); margin-right: .2rem; }
/* Pilleformen gjelder raden nederst. Oppe i verktøylinja bruker de samme
   knappene .btn, så de ser ut som naboene sine. */
.pv-legg-til .pv-nybtn {
  font: inherit; font-size: var(--fs-sm); cursor: pointer;
  background: var(--surface); color: var(--muted);
  border: 1px solid var(--border); border-radius: 999px; padding: .2rem .7rem;
}
.pv-legg-til .pv-nybtn:hover { color: var(--primary); border-color: var(--primary); }

.pv-sp-knapper { position: absolute; top: 0; right: 0; display: flex; gap: .1rem; opacity: 0; transition: opacity .12s; }
.pv-sp:hover .pv-sp-knapper, .pv-sp-redigeres .pv-sp-knapper { opacity: 1; }
.pv-sp-redigeres > .pv-sp-tekst, .pv-sp-redigeres > .pv-alt, .pv-sp-redigeres > .pv-forkl { display: none; }

html[data-device="ipad"] .pv-sp-knapper { opacity: .55; }
@media (max-width: 640px) { .pv-sp-knapper { opacity: .55; } }

@media print {
  .pv-instruks, .pv-legg-til, .pv-rediger, .pv-sp-knapper { display: none !important; }
  .pv-bilde { break-inside: avoid; }
  .pv-bilde img { border: none; }
}

/* ── Pensum: blokk-koder og formatknapper ──────────────────────────────── */
/* Koden er en peker for instruksen, ikke innhold – den skal kunne leses når
   man ser etter den, og ellers ikke stjele oppmerksomhet. Aldri på papir. */
.pv-blokk { position: relative; }
.pv-kode-merke {
  position: absolute; left: -3.1rem; top: .15rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .68rem; color: var(--muted); opacity: .45;
  padding: .05rem .3rem; border-radius: var(--radius-sm);
  border: 1px solid transparent; cursor: default; user-select: all;
}
.pv-blokk:hover .pv-kode-merke { opacity: 1; border-color: var(--border); }
.pv-kode-figur { color: var(--primary); font-weight: 600; opacity: .6; }

/* Under ~52rem + marg er det ikke plass i margen; da legges koden inn i flyten. */
@media (max-width: 1100px) {
  .pv-kode-merke { position: static; display: inline-block; margin-bottom: .1rem; opacity: .8; }
}

.pv-format { display: flex; gap: .2rem; }
.pv-format button {
  font: inherit; font-size: var(--fs-sm); cursor: pointer; min-width: 2rem;
  background: var(--surface); color: var(--text);
  border: 1px solid var(--border); border-radius: var(--radius-sm); padding: .15rem .4rem;
}
.pv-format button:hover { border-color: var(--primary); color: var(--primary); }

/* Utheving i brødteksten */
.pv-t strong, .pv-eks strong { font-weight: 700; }
.pv-t em, .pv-eks em { font-style: italic; }
.pv-t u, .pv-eks u { text-decoration: underline; text-underline-offset: 2px; }

@media print { .pv-kode-merke, .pv-format { display: none !important; } }

/* ── Ferdigheter i undervisningsvinduet ────────────────────────────────── */
.pf-tom { color: var(--muted); font-size: var(--fs-sm); margin: 0; padding: .4rem 0; }
.pf-kort {
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: .5rem .6rem; margin-bottom: .4rem; background: var(--surface);
}
.pf-hode { display: flex; align-items: baseline; gap: var(--s-2); flex-wrap: wrap; }
.pf-navn { font-size: var(--fs-base); }
.pf-trinn { font-size: var(--fs-sm); color: var(--muted); white-space: nowrap; }
.pf-status { margin-left: auto; font-size: var(--fs-sm); white-space: nowrap; }
.pf-sitter    { color: var(--st-done); font-weight: 600; }
.pf-underveis { color: var(--st-active); }
.pf-urort     { color: var(--muted); }
.pf-knapper { display: flex; align-items: center; gap: var(--s-2); margin-top: .4rem; flex-wrap: wrap; }
.pf-kode {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .68rem; color: var(--muted); margin-left: auto;
}
.pf-rest { margin: .35rem 0 0; font-size: var(--fs-sm); color: var(--muted); line-height: 1.4; }
html[data-device="ipad"] .pf-kort { padding: .4rem .5rem; }

/* Ferdighetsdokumentet i timen – til gjennomgang, ikke redigering. */
.pf-dok {
  margin: .5rem 0; padding: .5rem .65rem;
  background: var(--bg); border-radius: var(--radius-sm);
  border: 1px solid var(--border);
}
.pf-h  { margin: .5rem 0 .25rem; font-size: var(--fs-base); }
.pf-dok > .pf-h:first-child { margin-top: 0; }
.pf-t  { margin: 0 0 .4rem; font-size: var(--fs-sm); line-height: 1.55; }
.pf-eks {
  margin: 0 0 .4rem; padding: .3rem .5rem; font-size: var(--fs-sm); line-height: 1.5;
  border-left: 3px solid var(--primary);
  background: color-mix(in srgb, var(--primary) 7%, transparent);
}
.pf-bilde { max-width: 100%; height: auto; border-radius: var(--radius-sm); margin-bottom: .4rem; }
.pf-mangler { margin: 0 0 .4rem; font-size: var(--fs-sm); color: var(--warn); }
.pf-t strong, .pf-eks strong { font-weight: 700; }
.pf-t em, .pf-eks em { font-style: italic; }
.pf-t u, .pf-eks u { text-decoration: underline; }

/* Tre spørsmål, ikke hele quizen: her sjekkes forståelsen i timen. */
.pf-prove { margin: .5rem 0; }
.pf-prove-tittel { margin: 0 0 .3rem; font-size: var(--fs-sm); font-weight: 600; color: var(--muted); }
.pf-spm { margin: 0; padding-left: 1.3rem; font-size: var(--fs-sm); }
.pf-spm li { margin-bottom: .3rem; line-height: 1.45; }
.pf-spm-tekst { display: block; }
.pf-fasit { color: var(--st-done); font-weight: 600; }
.pf-fasit::before { content: '→ '; opacity: .6; }
.pf-resten { font-size: var(--fs-sm); color: var(--muted); }

/* ══════════ UNDERVISNINGSVINDUET: PARKERT ══════════
   Funksjonene under er bygget og virker, men skrudd av for å få flest mulig
   punkter på skjermen uten scrolling. Ingenting er slettet – fjern regelen,
   og funksjonen er tilbake. Se docs/parkerte-funksjoner.md.
   Parkert med CSS og ikke ved å ta ut markup, fordi JS-en i session.php leser
   #lesson-timer ved oppstart: tas elementet bort, slutter hele timeplanen å
   tegnes. Å skjule det er både tryggere og lettere å angre. */
.lesson-timer,            /* start/pause, klokke og «Nå / Neste» */
.tp-horisont,             /* framdriftsstripa med minutter og ▶ Start */
.track,                   /* den gamle tidslinja (holder fortsatt innholdet) */
.tp-c-punkt, .tp-punkt,   /* ikon-kolonnen */
.tp-c-tid,   .tp-tid,     /* minutt-kolonnen */
.tp-vipp {                /* ▸-pila: hele raden er klikkbar */
  display: none !important;
}
/* Haken på utførte punkter gjorde radene høyere. Punktet du står i er markert
   med farge, og det er nok. */
.tp-rad-ferdig .tp-nr::after { content: none !important; }

/* ══════════ UNDERVISNINGSVINDUET: TO KOLONNER ══════════ */
/* Arbeidsflaten fyller det som er igjen av skjermen, og hver kolonne ruller
   for seg. Før var panelet «sticky», men det virket ikke: et sticky-element
   må ha plass å gli innenfor griddraden sin, og panelet VAR draden – like
   høyt som den. Da følger det bare siden. Målt: 172 px over flaten, panelet
   656 px i et vindu på 768, altså 60 px overflow og sidescroll.
   Med fast høyde her trenger ingen av dem å stikke utenfor. */
.tp-arbeid {
  display: grid; grid-template-columns: minmax(16rem, 22rem) 1fr;
  gap: var(--s-3); align-items: stretch;
  height: calc(100vh - 11rem);
}
.tp-liste { margin-bottom: 0; min-height: 0; overflow-y: auto; }
.tp-panel { min-height: 0; height: 100%; max-height: none; }
/* Overskriften står stille, kroppen ruller. Flex-kolonne og ikke sticky: da
   deles høyden eksplisitt, og rullingen havner der innholdet er.
   min-height: 0 på kroppen er nødvendig – uten den nekter flex-elementet å
   krympe under innholdet sitt, og da ruller ingenting. Samme felle som i
   chatten. */
.tp-panel {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow);
  display: flex; flex-direction: column;
  overflow: hidden;
}
.tp-panel-hode {
  flex: 0 0 auto;
  display: flex; align-items: center; gap: var(--s-2);
  padding: var(--s-2) var(--s-3); border-bottom: 1px solid var(--border);
  background: var(--surface); font-weight: 600; font-size: var(--fs-lg);
}
/* Statusknappen hører til tittelen, ikke til en rad lenger nede i innholdet. */
.tp-panel-hode .status-chip { margin-left: auto; font-weight: 400; }
.tp-panel-kropp { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: var(--s-3); }
.tp-panel-kropp > .body { display: block; }
.tp-panel-tom { color: var(--muted); text-align: center; padding: var(--s-5) 0; margin: 0; }

/* Raden du står i. Fargen er markeringen – ingen hake, ingen ekstra høyde. */
.tp-liste .tp-rad-aapen > td { background: color-mix(in srgb, var(--primary) 14%, transparent); }
.tp-liste tbody tr[data-idx] { cursor: pointer; }
.tp-liste .tp-nr { width: 2.2rem; }
.tp-liste .tp-c-apne { width: 2rem; }

@media (max-width: 900px) {
  .tp-arbeid { grid-template-columns: 1fr; }
  .tp-arbeid { height: auto; }
  .tp-liste, .tp-panel { overflow: visible; height: auto; }
}

/* Menylinja på én linje. Ikonene er tatt ut av markupen (functions.php), og
   språkvelgeren er parkert – dette holder resten fra å brekke i to linjer. */
.navbar { flex-wrap: nowrap; }
/* IKKE overflow her. .nav-drop er position:absolute, og en forelder med
   overflow lager en klippekontekst som spiser hele nedtrekksmenyen – det
   skjedde, og det er grunnen til at regelen ikke kommer tilbake. Med fem
   korte tekstvalg trengs ingen sidescroll. */
.nav-links { flex-wrap: nowrap; }
.nav-links > li > a, .nav-group-btn { white-space: nowrap; }
.nav-user { flex-shrink: 0; white-space: nowrap; }
/* Nummerkolonnen bærer både håndtak og tall. */
.tp-liste .tp-nr { width: 3.4rem; white-space: nowrap; }
.tp-liste .tp-grep { margin-right: .25rem; }
.tp-liste .tp-tall { color: var(--muted); font-variant-numeric: tabular-nums; }
/* Under ~820 px er det ikke plass til alt på én linje. Da er det bedre at
   menyen brekker enn at valg havner utenfor skjermen uten vei tilbake –
   sidescroll er ikke et alternativ, se regelen over. */
@media (max-width: 820px) {
  .navbar { flex-wrap: wrap; }
  .nav-links { flex-wrap: wrap; }
}

/* ── Løft til pensum (spørsmålseditoren) ───────────────────────────────── */
.q-pensum { position: relative; margin: .3rem 0 .5rem; }
.q-pensum-btn {
  font: inherit; font-size: .76rem; cursor: pointer;
  background: none; color: var(--muted);
  border: 1px dashed var(--border); border-radius: 999px; padding: .12rem .6rem;
}
.q-pensum-btn:hover { color: var(--primary); border-color: var(--primary); }
/* Er spørsmålet koblet, er det et faktum og ikke en oppfordring – hel ramme. */
.q-pensum-satt {
  border-style: solid; color: var(--primary);
  background: color-mix(in srgb, var(--primary) 8%, transparent);
}

.pensum-velger {
  position: absolute; top: calc(100% + .2rem); left: 0; z-index: 400;
  width: 20rem; max-width: calc(100vw - 2rem);
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow); padding: .4rem;
}
.pensum-velger .pv-sok {
  font: inherit; font-size: var(--fs-sm); width: 100%;
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: .3rem .5rem; background: var(--bg); color: var(--text);
}
.pv-liste { max-height: 15rem; overflow: auto; margin: .3rem 0; }
.pv-omr {
  font-size: .68rem; text-transform: uppercase; letter-spacing: .04em;
  color: var(--muted); padding: .3rem .4rem .1rem;
}
.pv-valg, .pv-ny, .pv-fjern {
  display: block; width: 100%; text-align: left; font: inherit;
  font-size: var(--fs-sm); cursor: pointer; background: none; color: var(--text);
  border: none; border-radius: var(--radius-sm); padding: .3rem .5rem;
}
.pv-valg:hover, .pv-ny:hover, .pv-fjern:hover { background: var(--bg); color: var(--primary); }
.pv-valgt { color: var(--primary); font-weight: 600; }
.pv-ny { border-top: 1px solid var(--border); color: var(--muted); }
.pv-fjern { color: var(--danger); }
.pv-tom { color: var(--muted); font-size: var(--fs-sm); padding: .5rem; margin: 0; }
.pv-valg { display: flex; flex-direction: column; gap: .05rem; }
.pv-valg .pv-kode {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .64rem; color: var(--muted); opacity: .8;
}

/* Opplastingsknappen på en «bilde mangler»-plassholder er alltid synlig –
   der er opplasting hele poenget, ikke en sekundærhandling bak hover. */
.pv-ill-last {
  display: inline-block; margin-top: .5rem;
  font-size: var(--fs-sm); padding: .3rem .8rem;
  border-style: solid; color: var(--primary); border-color: var(--primary);
  background: var(--surface);
}
.pv-ill-last:hover { background: color-mix(in srgb, var(--primary) 10%, transparent); }
/* Tilbakemelding ved blokka, ikke bare oppe i verktøylinja. */
.pv-opplast { margin: .4rem 0 0; font-size: var(--fs-sm); color: var(--muted); }
@media print { .pv-ill-last, .pv-opplast { display: none !important; } }

/* «+ Legg til» på stykkets egen lekse – handlingen hører hjemme der leksen er. */
.hw-section-head .sp-legg-lekse { margin-left: auto; }
.sp-lekse-liste:empty { display: none; }

/* Instruksjoner for påfølgende uke – ett fritt felt, én instruksjon per linje.
   Linjeskiftet er ikke kosmetikk: hver linje blir et avkryssingspunkt hos
   eleven (se student/index.php). */
/* padding-right og posisjonert status: «✓ lagret» MÅ ligge utenfor flyten.
   Sto den i raden, la den beslag på en egen linjeboks – etiketten vokste 18 px
   hver gang meldingen kom, og hele tekstfeltet hoppet 17 px ned og opp igjen
   for hver autolagring. Det var det som rykket mens man skrev. */
.hw-instr-merke {
  position: relative; padding-right: 6rem;
  display: flex; align-items: center; gap: .4rem;
  font-size: var(--fs-sm); color: var(--muted); font-weight: 600;
  margin: .35rem 0 .2rem;
}
.hw-instr-felt {
  width: 100%; font: inherit; font-size: var(--fs-sm); line-height: 1.5;
  color: var(--text); background: var(--bg);
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: .4rem .55rem; resize: vertical;
  /* hidden, ikke auto: et rullefelt som dukker opp og forsvinner gjør teksten
     smalere, bryter om linjer og endrer høyden – altså nøyaktig det rykket vi
     prøver å bli kvitt. Høyden settes alltid stor nok (se voks()), så det
     finnes ingenting å rulle til. */
  overflow: hidden;
}
.hw-instr-felt:focus { outline: 2px solid var(--primary); outline-offset: -1px; }
.hw-instr-felt::placeholder { color: var(--muted); opacity: .7; }
.hw-instr-status {
  position: absolute; right: 0; top: 50%; transform: translateY(-50%);
  font-size: .72rem; font-weight: 400; white-space: nowrap;
}
.hw-instr-mic {
  background: none; border: none; cursor: pointer; padding: 0 .2rem;
  font-size: .9rem; line-height: 1; opacity: .6;
}
.hw-instr-mic:hover { opacity: 1; }
.hw-instr-mic.listening { opacity: 1; color: var(--danger); }
html[data-device="ipad"] .hw-instr-felt { font-size: var(--fs-base); }

/* Stykkets navn sto FIRE steder samtidig: raden i timeplanen, overskriften i
   panelet, .sp-tittel og etiketten på hver lekserad. To er nok – tabellen og
   paneloverskriften. De to inne i stykkeblokka skjules; markupen står igjen,
   så det er én regel å fjerne om de skal tilbake. */
.tp-panel .stykke-blokk .sp-tittel { display: none; }
.tp-panel .stykke-blokk .hw-label > strong { display: none; }
/* Uten tittelen trenger undertittelen å bære raden selv. */
.tp-panel .stykke-blokk .sp-rad .sp-sub { font-size: var(--fs-sm); color: var(--muted); }
/* Den tomme «ny lekse»-raden skal ikke se ut som en rad – bare et felt. */
.hw-row-ny { border: none; background: none; padding: 0; }
.hw-row-ny .hw-label { width: 100%; }
/* Er det verken steg eller notat, har raden ingenting å si – tittelen er
   skjult og statusknappen lånt opp i overskriften. Da skal den ikke stå igjen
   og spise en linje. */
.tp-panel .stykke-blokk .sp-rad-tom { display: none; }
/* Usynlig tvilling som høyden måles på, så selve feltet aldri kollapses.
   Den må bryte linjer nøyaktig som et textarea gjør. */
.hw-instr-speil {
  position: absolute; visibility: hidden; pointer-events: none;
  top: 0; left: -9999px; height: auto; min-height: 0;
  white-space: pre-wrap; overflow-wrap: break-word; word-break: break-word;
  box-sizing: border-box; border-color: transparent;
}

/* ── Diktatpanel ───────────────────────────────────────────────────────────
   Fast nede til høyre: det skal kunne stå åpent mens man underviser, uten å
   ta plass fra timeplanen. */
.dik-panel {
  position: fixed; right: var(--s-3); bottom: var(--s-3); z-index: 500;
  width: 24rem; max-width: calc(100vw - 2rem);
  max-height: calc(100vh - 8rem);
  display: flex; flex-direction: column;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: 0 8px 28px rgba(0,0,0,.22);
}
.dik-panel[hidden] { display: none; }
.dik-hode {
  flex: 0 0 auto; display: flex; align-items: center; gap: var(--s-2);
  padding: var(--s-2) var(--s-3); border-bottom: 1px solid var(--border);
}
.dik-status { margin-left: auto; font-size: var(--fs-sm); }
.dik-lukk {
  background: none; border: none; cursor: pointer; color: var(--muted);
  font-size: var(--fs-base); line-height: 1; padding: .1rem .3rem;
}
.dik-lukk:hover { color: var(--danger); }
/* iPad: diktatpanelet brukes MENS man underviser, med én hånd. Både knappen
   som åpner det og krysset som lukker det må kunne treffes uten å sikte. */
html[data-device="ipad"] #dik-apne { min-height: 44px; }
html[data-device="ipad"] .dik-lukk {
  min-width: 44px; min-height: 44px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
}
/* min-height: 0 – uten den ruller ikke kroppen, samme felle som ellers. */
.dik-kropp { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: var(--s-3); }
.dik-knapper { display: flex; gap: var(--s-2); margin-bottom: var(--s-2); }
.dik-merke {
  display: block; font-size: var(--fs-sm); font-weight: 600;
  color: var(--muted); margin: var(--s-2) 0 .2rem;
}
.dik-hint { font-weight: 400; opacity: .8; }
.dik-panel textarea {
  width: 100%; font: inherit; font-size: var(--fs-sm); line-height: 1.5;
  color: var(--text); background: var(--bg);
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: .4rem .55rem; resize: vertical;
}
.dik-mal {
  display: flex; align-items: flex-end; gap: var(--s-2);
  margin-top: var(--s-2); flex-wrap: wrap;
}
.dik-mal label { flex: 1; min-width: 10rem; font-size: var(--fs-sm); color: var(--muted); }
.dik-mal select {
  display: block; width: 100%; font: inherit; font-size: var(--fs-sm);
  color: var(--text); background: var(--bg);
  border: 1px solid var(--border); border-radius: var(--radius-sm); padding: .3rem .4rem;
}
.dik-resultat { margin-top: var(--s-3); border-top: 1px solid var(--border); padding-top: var(--s-2); }
.dik-resultat[hidden] { display: none; }
.dik-resultat .btn { margin-top: var(--s-2); }
/* Pulsen sier at den faktisk hører etter – et opptak uten tegn på liv er
   vanskelig å stole på. */
.dik-lytter { animation: dik-puls 1.4s ease-in-out infinite; }
@keyframes dik-puls { 50% { opacity: .55; } }
@media print { .dik-panel, #dik-apne { display: none !important; } }