/* Meldingsskriveren i Oppfølging (del-melding.js).
 *
 * Arket eier ingen nye farger, ingen nye mål og ingen ny kortform. Skriveren
 * er tegnet som kundekortet rett over den — `--fill-subtle` på radens
 * `--navy2`, samme innrykk, samme radius — fordi de to folder seg ut av samme
 * rad og skal leses som to deler av den, ikke som to fremmede bokser.
 *
 * Det ene som er nytt er MÅLELINJA. Den er tre tall som står rolig, og som
 * bare skifter farge når de betyr penger: over én SMS, eller feil alfabet.
 * En linje som lyser hele tiden, er en linje ingen leser.
 */

.np-meld {
  margin-top: 12px;
  padding: 14px;
  background: var(--fill-subtle);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-md);
}

/* ── Hodet ───────────────────────────────────────────────────────────────
   Navnet til venstre, malen til høyre. Malen står der fordi den forklarer
   hvorfor teksten sier det den sier — den som ser «Mal: Frafall» over en
   melding om at det er sju måneder siden sist, skjønner på ett blikk at
   panelet ikke har funnet på tallet. */
.np-meld-hode {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 6px 10px;
  margin-bottom: 10px;
}
.np-meld-hode h3 {
  margin: 0;
  font-family: var(--np-font-display);
  font-size: var(--np-t-md);
  font-weight: 700;
  letter-spacing: var(--np-t-trakk-tett);
  color: var(--white);
}
.np-meld-mal {
  margin-left: auto;
  font-size: var(--np-t-mikro);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--silver);
}
/* På smal skjerm er `margin-left: auto` en tom gest — malen brekker til egen
   linje uansett — og den gjør at den står klistret til høyre kant under et
   navn som starter til venstre. Venstrestilt under navnet leser som en
   undertittel, som er det den er. */
@media (max-width: 560px) {
  .np-meld-mal {
    margin-left: 0;
  }
}

/* ── Feltet ──────────────────────────────────────────────────────────────
   `.np-felt` gjør jobben; her står bare det en textarea trenger og et
   <input> ikke har.

   `resize: vertical` og ikke `none`: meldinga kan bli lang, og den som vil
   se hele skal få lov. Vannrett resize ville sprengt raden.

   ET FELT SOM ER KORTERE ENN TEKSTEN DET ÅPNER MED, ber om å bli rullet i
   før man har lest den — og da er det ikke et utkast man leser gjennom, det
   er en tekst man stoler blindt på.

   MÅLT, den lengste av de seks malene med de lengste navnene verdenen har
   (Mercedes-Benz C-klasse hos Nordic Bilservice), i den ekte flata:

       viewport   feltbredde   teksten trenger
       320 px     200 px       214 px
       360 px     262 px       164 px
       390 px     292 px       140 px
       430 px     332 px       116 px

   Fire rader gir 118 px, så fra 430 og opp holder de. Under det gjør de det
   ikke, og gulvet er satt til 216 — verstefallet på 320 — i ETT trinn og
   ikke i tre. Tre trinn ville gitt riktig tall på 320, 360 og 390 og latt
   hver telefon MELLOM dem rulle i et felt som så ut som det ikke gjorde det.
   Prisen er et romsligere felt på 390 enn teksten strengt tatt krever; det
   er et felt man skal redigere i, så plassen er ikke bortkastet.

   Skriver man selv mer enn malen, ruller feltet. Det er riktig: da er
   teksten ens egen, og man vet hva som står der. */
.np-root .np-meld-felt {
  resize: vertical;
  min-height: 96px;
  line-height: var(--np-lh-brod);
}
/* `.np-root` foran begge: `demo-tillegg.css:1481` setter
   `.np-root .np-felt { min-height: 44px }` for trykkflatenes skyld, og TO
   klasser slår ÉN. Uten prefikset her ble gulvet overkjørt av 44 uten et
   ord, og feltet sto igjen med høyden `rows="4"` ga det — usynlig fra koden,
   og målt i nettleseren. */
@media (max-width: 420px) {
  .np-root .np-meld-felt {
    min-height: 216px;
  }
}

/* ── Målelinja ───────────────────────────────────────────────────────────
   Tre tall, tabulære så de ikke hopper mens man skriver. Sølv i ro. */
.np-meld-maal {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
  margin: 8px 0 0;
  font-size: var(--np-t-sm);
  font-variant-numeric: tabular-nums;
  color: var(--silver);
}
/* Over én SMS, eller feil alfabet: tallene går fra sølv til varselgult. Ikke
   rødt — ingenting er galt, meldinga går ut akkurat som den står. Den koster
   bare mer enn den som skrev den tror. */
.np-meld-maal.tung {
  color: var(--warn);
}
.np-meld-tall {
  white-space: nowrap;
}

/* Advarselen under tallene. Samme form som merknaden nederst på skjermen —
   tonet flate, gul strek til venstre — fordi de sier samme slags ting: her
   er noe du bør vite før du trykker. */
.np-meld-advarsel {
  margin: 8px 0 0;
  padding: 8px 10px;
  background: var(--fill-subtle);
  border-left: 2px solid var(--warn);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  max-width: 78ch;
  font-size: var(--np-t-sm);
  line-height: var(--np-lh-brod);
  color: var(--offwhite);
}

/* ── Handlingene ─────────────────────────────────────────────────────── */
.np-meld-handling {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}
.np-meld-handling > .np-btn {
  min-width: 112px;
}
/* «Lukk» er en tekstknapp, som «Ferdig» på raden over: den gjør ingenting med
   meldinga, og skal ikke se ut som de to som gjør det. Samme mål som
   `.np-oppf-avfei`, og samme løft på berøring. */
.np-meld-lukk {
  display: inline-flex;
  align-items: center;
  margin-left: 24px;
  min-height: 36px;
  padding: 0 10px;
  background: none;
  border: 0;
  border-radius: var(--r-btn);
  font-family: inherit;
  font-size: var(--np-t-sm);
  font-weight: 600;
  color: var(--silver);
  cursor: pointer;
}
.np-meld-lukk:hover {
  color: var(--offwhite);
  background: var(--fill-subtle);
}
@media (pointer: coarse) {
  .np-meld-lukk {
    min-height: 44px;
  }
}
@media (max-width: 560px) {
  /* TO KNAPPER SOM DELER EN LINJE SKAL FØLGE DEN HØYESTE.
     MÅLT på 390 px: «Bruk malen» brakk til to linjer og ble 53 px, mens
     «Send melding» ved siden av sto på 44 — og de to sto dermed med hver
     sin overkant, 4 px fra hverandre. Nøyaktig samme funn som ble rettet i
     `.np-oppf-handling` (stil-oppfolging.css), og rettet på samme måte.
     Etiketten er kortet ned i samme slengen, så den slipper å brekke i det
     hele tatt — men `stretch` blir stående, for engelsk «Use the template»
     er lengre enn norsk. */
  .np-meld-handling {
    align-items: stretch;
  }
  /* To knapper deler linje én, «Lukk» faller til linje to — samme oppdeling
     som handlingsrada på raden over, og av samme grunn: tekstknappen skal
     ikke ende alene i full bredde og dermed bli den mest iøynefallende. */
  .np-meld-handling > .np-btn {
    flex: 1 1 calc(50% - 4px);
    text-align: center;
  }
  .np-meld-lukk {
    flex: 0 1 auto;
    margin-left: 0;
  }
}

/* ── Kvitteringa ─────────────────────────────────────────────────────────
   Meldinga slik kunden ville sett den. Bobla er `--navy` — mørkere enn
   flata rundt — fordi den skal lese som et SITAT, noe som kommer utenfra,
   og ikke som enda et felt i panelet. */
.np-meld-kvitt {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}
.np-meld-kvitt-hode {
  margin: 0 0 6px;
  font-size: var(--np-t-mikro);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--silver);
}
.np-meld-boble {
  margin: 0;
  padding: 12px 14px;
  max-width: 46ch;
  background: var(--navy);
  border: 1px solid var(--border-strong);
  /* Tre runde hjørner og ett tettere nede til venstre: formen på en mottatt
     melding, uten å herme en bestemt telefon. */
  border-radius: var(--r-md) var(--r-md) var(--r-md) var(--r-sm);
  font-size: var(--np-t-md);
  line-height: var(--np-lh-brod);
  color: var(--offwhite);
  /* Meldinga kan ha linjeskift den som skrev satte selv. De skal stå. */
  white-space: pre-wrap;
}
.np-meld-kvitt-fot {
  margin: 10px 0 0;
  max-width: 78ch;
  font-size: var(--np-t-sm);
  line-height: var(--np-lh-brod);
  color: var(--silver);
}
/* Samme regel som `.np-oppf-merknad b`: ordet «Demo.» er gult overalt ellers
   i huset, og et hvitt «Demo.» her ville lest som et annet ord. */
.np-meld-kvitt-fot b {
  color: var(--warn);
  font-weight: 700;
}

/* ── Merket på raden ─────────────────────────────────────────────────────
   «Melding skrevet i denne økta.» Sølv, liten, uten flate: den er en
   opplysning om hva man selv har gjort, ikke et varsel. */
.np-oppf-skrevet {
  margin: 8px 0 0;
  font-size: var(--np-t-sm);
  color: var(--silver);
}

/* ── UTSKRIFT ────────────────────────────────────────────────────────────
   Ringelista på papir er til telefonen. En skriver man ikke kan skrive i,
   og en kvittering for noe som ikke ble sendt, hører ikke hjemme der.
   Merket blir derimot stående og svertes: den som tar med seg lista skal se
   hvem det alt er skrevet til, ellers ringer de dem også. */
@media print {
  .np-meld {
    display: none !important;
  }
  .np-oppf-skrevet {
    color: #333;
  }
}