/* fkweb: kun layout oven på DaisyUI-komponenter. Mobil først. */
body { background: var(--color-base-100); color: var(--color-base-content); }
.side { max-width: 60rem; margin: 0 auto; padding: 1rem; display: flex; flex-direction: column; gap: 1rem; }
h1 { font-size: 1.5rem; font-weight: 700; line-height: 1.2; }
h2 { font-size: 1.2rem; font-weight: 600; margin-top: .5rem; }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.raekke { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.stak { display: flex; flex-direction: column; gap: .75rem; }
.stak > .input, .stak > .textarea, .stak > .file-input { width: 100%; }
.gitter { display: grid; gap: 1rem; grid-template-columns: 1fr; }
.login { max-width: 28rem; width: 100%; margin: 3rem auto; }
.rul { overflow-x: auto; }
.sektion { border-top: 1px solid var(--color-base-300); padding-top: .75rem; }
.lyd { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin-bottom: .5rem; }
.lyd audio { max-width: 100%; height: 2.25rem; }
.graf { max-width: 100%; height: auto; background: #fff; border-radius: var(--radius-box); }
.skud { max-width: 100%; border: 1px solid var(--color-base-300); border-radius: var(--radius-box); }
.diff, .fritekst { white-space: pre-wrap; word-break: break-word; font-size: .85rem;
  background: var(--color-base-200); padding: .75rem; border-radius: var(--radius-box); overflow-x: auto; }
.fritekst { font-family: inherit; font-size: 1rem; }
.list-row { grid-template-columns: auto 1fr auto; }

/* Markdown */
.md h2 { font-size: 1.2rem; font-weight: 600; margin: .25rem 0 .5rem; }
.md h3 { font-weight: 600; margin: .5rem 0; }
.md p, .md ul, .md ol, .md pre, .md table { margin: .5rem 0; }
.md ul { list-style: disc; padding-left: 1.5rem; }
.md ol { list-style: decimal; padding-left: 1.5rem; }
.md a { text-decoration: underline; }
.md code { font-family: ui-monospace, Menlo, monospace; font-size: .9em; }
.md pre { background: var(--color-base-200); padding: .75rem; border-radius: var(--radius-box); overflow-x: auto; }
.md img { max-width: 100%; }
.md table td, .md table th { border: 1px solid var(--color-base-300); padding: .25rem .5rem; }

@media (min-width: 40rem) {
  .gitter { grid-template-columns: repeat(2, 1fr); }
  .side { padding: 1.5rem; }
}