/* Dikto chrome, sent lager. Laddas EFTER style.css.

   Varfor en egen fil: allt under markoren "Steg 3: resultat" i style.css ar
   fryst (resultatdokumentet ar kalibrerat mot modellens utdata). Dar ligger
   ocksa nagra chrome-block av historiska skal: foten, QR-kortet, prose-sidorna
   (integritet, tillagg) och mobilbrytpunkterna. Regler har vinner over dem
   genom ordningen, utan att en enda rad under markoren andras.

   Har finns bara chrome: typskalan (rem, inget under 12 px), radierna pa
   4 px-rutnatet och morkt lage for de blocken. Ingenting i steg 3. */

/* ---------- Fot ---------- */

.footer p {
  font-size: var(--text-small);
  line-height: var(--text-small--line-height);
}

.footer-links { font-size: var(--text-small); }

.footer-slogan,
.footer .brand-name { font-size: var(--text-title-sm); }

.footer a:focus-visible { outline-color: var(--mint); }

/* ---------- Diktera pa sprang: QR-kort och mobilinkorg ---------- */

.qr-card {
  background: var(--surface-raised);
  border-radius: var(--ui-r-lg);
}

.qr-title {
  font-size: var(--text-small);
  color: var(--fg-brand);
}

/* QR-koden behaller vit platta i bada lagena: den maste ga att skanna. */
.qr-box { border-radius: var(--ui-r-sm); }

.qr-text {
  font-size: var(--text-meta);
  line-height: var(--text-meta--line-height);
}

.qr-close,
.relay-raw summary { font-size: var(--text-small); }

.qr-close:hover { color: var(--fg-brand); }

.relay-raw summary { color: var(--fg-brand); }

.relay-raw-text {
  font-size: var(--text-meta);
  line-height: var(--text-meta--line-height);
}

.relay-insert {
  font-size: var(--text-small);
  border-radius: var(--ui-r-md);
  background: var(--fill-brand);
  color: var(--on-fill-brand);
}

.relay-insert:hover { background: var(--fill-brand-hover); }

.qr-fab {
  background: var(--surface-raised);
  color: var(--fg-brand);
}

/* ---------- Prose-sidor: integritet, tillagg ---------- */

.prose-shell { border-radius: var(--ui-r-2xl); }

.prose-shell h1 {
  font-size: var(--text-title-lg);
  line-height: var(--text-title-lg--line-height);
  color: var(--fg-brand);
  text-wrap: balance;
}

.prose-shell h2 {
  font-size: var(--text-title-sm);
  line-height: var(--text-title-sm--line-height);
  color: var(--fg-brand);
}

.prose-shell p,
.prose-shell li {
  font-size: var(--text-body);
  line-height: var(--text-body--line-height);
}

.prose-shell a { color: var(--fg-brand); }

.prose-shell .fine-print {
  margin-top: 40px;
  font-size: var(--text-meta);
  line-height: var(--text-meta--line-height);
  color: var(--text-muted);
}

.tool {
  background: var(--surface);
  border-color: var(--line);
  border-radius: var(--ui-r-lg);
}

.tool .tool-tag { font-size: var(--text-small); }

.tool h3 {
  font-size: var(--text-lead);
  line-height: var(--text-lead--line-height);
  color: var(--fg-brand);
}

/* .dl-btn har "color: #fff !important" under markoren, darav !important. */
.dl-btn {
  background: var(--fill-brand);
  color: var(--on-fill-brand) !important;
  border-radius: var(--ui-r-md);
}

.dl-btn:hover { background: var(--fill-brand-hover); }

.dl-btn small { font-size: var(--text-small); }

.tool ol.guide > li::before {
  background: var(--fill-brand);
  color: var(--on-fill-brand);
  font-size: var(--text-small);
}

.callout {
  background: var(--callout-bg);
  border-left-color: var(--fg-brand);
}

.callout strong { color: var(--fg-brand); }

.callout code {
  background: var(--code-bg);
  border-radius: var(--ui-r-xs);
  font-size: var(--text-small);
}

/* ---------- Mobil: regler som annars vinner fran brytpunkten under
   markoren ---------- */

@media (max-width: 860px) {
  .stage { border-radius: var(--ui-r-xl); }

  .step-actions-sticky { border-radius: 0 0 var(--ui-r-xl) var(--ui-r-xl); }

  .btn-paste,
  .btn-mic { font-size: var(--text-small); }

  .type-pill { font-size: var(--text-small); }

  .announce-inner {
    font-size: var(--text-small);
    line-height: var(--text-small--line-height);
  }

  .dot-label { font-size: var(--text-meta); }

  /* Nedladdningsknappen: rubrik och fakta pa var sin rad i stallet for
     tva smala spalter som bryts om varandra. */
  .dl-btn {
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
  }

  /* Temaknappen ar det enda i topbarens hogerdel som syns pa mobilen. */
  .topbar-right .theme-toggle { display: grid; }
}

@media (max-width: 420px) {
  /* Handlingsraden staplas: forklaringen hamnar ovanfor knappen. */
  .gate {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }

  .gate-hint { text-align: center; }
}

/* ---------- Arbetsytan: stegrad, anteckningsfalt och mobil ----------

   Hor till "Arbetsytan: steg 1" i style.css men ligger har for att vinna
   over .shell-, .progress-, textarea- och .step-actions-reglerna i
   brytpunkterna under markoren. */

/* Under 1200 px ingen vanster-rail: stegvisaren blir en kompakt rad ovanfor
   kortet och "Sa skyddas patienten" en lank, sa att arbetsytan far hela
   bredden. Raden ar 22 px + 12 px mellanrum = --rail-row, som anteckningens
   hojdberakning (--work-chrome) raknar med. */
@media (max-width: 1199px) {
  .shell {
    --rail-row: 34px;
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
  }

  .rail { align-self: auto; }

  .rail-inner {
    position: static;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    min-height: 22px;
  }

  .rail-promise { display: none; }

  .rail-promise-link { display: inline; }

  .progress {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    margin: 0;
    padding: 0;
  }

  .progress::before { display: none; }

  .progress-dot {
    flex: none;
    flex-direction: row;
    gap: 8px;
    padding: 0;
  }

  /* Tunn linje mellan stegen, i stallet for den vertikala railinjen. */
  .progress-dot + .progress-dot::before {
    content: "";
    width: 24px;
    height: 1.5px;
    background: var(--line-strong);
  }

  .progress-dot .dot {
    width: 20px;
    height: 20px;
  }

  .dot-label { font-size: var(--text-small); }
}

/* Skarmar dar QR-knappen (nere till hoger) annars nuddar huvudknappen i
   kortets nedre hogra horn. */
@media (min-width: 861px) and (max-width: 1199px) {
  .qr-fab {
    right: 12px;
    bottom: 12px;
    width: 40px;
    height: 40px;
  }
}

/* En spalt: faltet borjar pa drygt en tredjedel av skarmhojden och vaxer
   med texten (fitNote i app.js) upp till taket, sedan skrollar det inuti.
   16 px text sa att iOS inte zoomar vid fokus. */
@media (max-width: 1023px) {
  /* 36 % av hojden, men aldrig sa hogt att forsta raden typval hamnar
     bakom den klistrade handlingsraden pa en lag telefon (440 px = allt
     ovanfor och under faltet fram till forsta pillraden). */
  textarea#note-input {
    height: max(160px, min(36vh, calc(100vh - 440px)));
    height: max(160px, min(36dvh, calc(100dvh - 440px)));
    min-height: 160px;
    max-height: 62vh;
    max-height: 62dvh;
    font-size: 16px;
    resize: none;
  }
}

@media (min-width: 861px) and (max-width: 1023px) {
  #step-1 .step-actions-sticky { border-radius: 0 0 var(--ui-r-2xl) var(--ui-r-2xl); }
}

/* Den langa notistexten ryms fran 1024 px. Smalare far den korta, som ar en
   enda lank, i stallet for att lanken "Hamta bada" klipps bort av ellipsen. */
@media (max-width: 1023px) {
  .announce-long { display: none; }

  .announce-short { display: inline; }
}

/* Mobil: textfaltet ska borja hogst 200 px ner. Notisraden en rad med kort
   text, stegraden kompakt och centrerad, rubriken en rad, tunnare luft. */
@media (max-width: 860px) {
  .shell {
    padding: 12px 14px 24px;
    gap: 10px;
  }

  .rail-inner { justify-content: center; }

  .rail-promise-link { display: none; }

  .dot-label { font-size: var(--text-meta); }

  .stage[data-step="1"] { padding: 16px; }

  .work-title { margin-bottom: 10px; }

  .type-block { margin-top: 16px; }

  /* Mobilens notis ar en upplysning om datortillaggen (ersatter den gamla
     extra lankraden), inte en nyhet: ingen Nytt-etikett, sa att texten
     ryms pa en rad ner till 360 px. */
  .announce-inner { padding: 0 20px 0 16px; }

  .announce-tag { display: none; }

  /* Handlingsraden klistrar mot skarmens underkant, med marginal for
     hemindikatorn. Kant i kant med kortet. */
  #step-1 .step-actions-sticky {
    margin: 16px -16px -16px;
    padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px));
    border-radius: 0 0 var(--ui-r-xl) var(--ui-r-xl);
  }

  #step-1 .gate-hint { text-align: center; }

  #step-1 .step-actions { column-gap: 8px; }

  /* Tatare knappar sa att de ryms bredvid varandra ner till 360 px. */
  #step-1 #paste-btn { padding: 0 14px; }

  #step-1 #to-step-2 {
    flex: 1 1 auto;
    margin-left: 0;
    padding: 0 16px;
  }
}

@media (max-width: 420px) {
  /* Steg 1: Klistra in och huvudknappen bredvid varandra, inte staplade
     (regeln under markoren staplar alla handlingsrader). */
  #step-1 .step-actions {
    flex-direction: row;
    align-items: center;
  }

  #step-1 .step-actions .btn-ghost,
  #step-1 .step-actions .btn-primary { width: auto; }
}