/* ═══════════════════════════════════════════════════════════════
   JURNAL — rustic (28 aug 2026, cerut de Liviu: „vreau sa arate rustic")

   Hartie veche peste aplicatia verde-pixel: pergament cald, cerneala maro,
   randuri trase ca intr-un caiet, serif de carte.

   DECIZII:
   • Fontul e un stack SERIF DE SISTEM, nu unul de la Google. Aplicatia e PWA
     si trebuie sa mearga offline — un font descarcat ar cadea taman cand n-ai
     net, si jurnalul ar arata brusc a altceva.
   • Textura de hartie e facuta din gradienti CSS, zero imagini: nimic de
     descarcat, nimic de pus in cache, si nu ingrasa bundle-ul.
   • ZERO animatii — Liviu are `prefers-reduced-motion` pornit, si oricum o
     pagina de jurnal se citeste, nu se priveste cum misca.
   ═══════════════════════════════════════════════════════════════ */

#journalModal {
  --hartie:   #e9dcbe;
  --hartie2:  #dfd0ac;
  --cerneala: #3a2c1c;
  --sters:    #7d6a4e;
  --sepia:    #8a5a2b;
  --linie:    rgba(58, 44, 28, 0.13);

  background:
    /* pete de varsta, imprastiate neregulat */
    radial-gradient(ellipse at 12% 18%, rgba(150,110,60,.13), transparent 42%),
    radial-gradient(ellipse at 88% 72%, rgba(130,95,50,.11),  transparent 46%),
    radial-gradient(ellipse at 62% 8%,  rgba(120,90,45,.08),  transparent 38%),
    /* fibra hartiei */
    repeating-linear-gradient(94deg, rgba(120,90,50,.035) 0 2px, transparent 2px 5px),
    linear-gradient(168deg, var(--hartie) 0%, var(--hartie2) 100%);
  border: 1px solid #8d7550;
  border-radius: 3px;
  color: var(--cerneala);
  font-family: 'Iowan Old Style', 'Palatino Linotype', Palatino, Georgia, 'Times New Roman', serif;
  /* umbra grea + o margine interioara care da senzatia de foaie groasa */
  box-shadow: 0 22px 60px rgba(0,0,0,.6), inset 0 0 0 1px rgba(255,250,235,.5),
              inset 0 0 44px rgba(140,105,60,.14);
  padding: 26px 24px 22px;
}
#journalModal .mcls { color: var(--sters); background: none; border: none; }
#journalModal .mcls:hover { color: var(--cerneala); }

.jr-titlu {
  font-family: 'Iowan Old Style', Georgia, serif;
  font-size: 21px; font-weight: 600; letter-spacing: .04em;
  color: var(--cerneala); text-align: center;
  padding-bottom: 12px; margin-bottom: 16px;
  border-bottom: 1px solid var(--linie);
}

/* ── capul paginii: ziua + navigare ── */
.jr-head { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.jr-data { flex: 1; text-align: center; min-width: 0; }
.jr-zi {
  font-size: 16px; font-weight: 600; color: var(--cerneala);
  text-transform: lowercase; letter-spacing: .01em;
}
.jr-sub { font-size: 11.5px; color: var(--sters); font-style: italic; margin-top: 2px; min-height: 14px; }
.jr-nav {
  background: rgba(138,90,43,.09); border: 1px solid rgba(138,90,43,.28);
  color: var(--sepia); border-radius: 3px; cursor: pointer;
  font-size: 13px; padding: 6px 11px; line-height: 1; flex-shrink: 0;
}
.jr-nav:hover:not(:disabled) { background: rgba(138,90,43,.17); }
.jr-nav:disabled { opacity: .28; cursor: default; }

/* ── starea zilei ── */
.jr-mood { display: flex; justify-content: center; gap: 8px; margin-bottom: 14px; }
.jr-m {
  background: rgba(255,252,242,.5); border: 1px solid rgba(138,90,43,.22);
  border-radius: 50%; width: 36px; height: 36px; cursor: pointer;
  font-size: 16px; line-height: 1; padding: 0;
  filter: saturate(.62) opacity(.62);
}
.jr-m:hover { filter: saturate(.9) opacity(.9); }
.jr-m.on {
  filter: none; border-color: var(--sepia);
  background: rgba(138,90,43,.15);
  box-shadow: inset 0 0 0 1px rgba(138,90,43,.3);
}

/* ── foaia de scris: randuri trase, ca in caiet ── */
.jr-text {
  width: 100%; min-height: 190px; resize: vertical;
  background: transparent;
  /* liniile cad exact sub randurile de text: line-height 28px = pasul liniilor */
  background-image: repeating-linear-gradient(
    transparent 0 27px, var(--linie) 27px 28px);
  border: none; border-top: 1px solid var(--linie); border-bottom: 1px solid var(--linie);
  color: var(--cerneala);
  font-family: inherit; font-size: 15px; line-height: 28px;
  padding: 6px 2px; outline: none;
  box-sizing: border-box;
}
.jr-text::placeholder { color: rgba(125,106,78,.6); font-style: italic; }
.jr-text:focus { background-color: rgba(255,252,242,.28); }

/* ── bara de sub foaie ── */
.jr-bara {
  display: flex; align-items: center; gap: 10px;
  margin-top: 9px; font-size: 11.5px; color: var(--sters); min-height: 20px;
}
.jr-stare { font-style: italic; }
.jr-stare.ok  { color: #5b7a3a; }
.jr-stare.rau { color: #a33; font-style: normal; font-weight: 600; }
.jr-numar { margin-left: auto; font-style: italic; opacity: .75; }
.jr-sterge {
  background: none; border: none; cursor: pointer; padding: 2px 4px;
  color: #9a4a3a; font-family: inherit; font-size: 11.5px;
  text-decoration: underline; text-underline-offset: 2px;
}

/* ── cuprinsul: paginile scrise ── */
.jr-lista-tit {
  margin-top: 20px; padding-top: 12px; border-top: 1px solid var(--linie);
  font-size: 11px; color: var(--sters); font-style: italic;
  text-transform: lowercase; letter-spacing: .06em;
}
.jr-lista { display: flex; flex-direction: column; margin-top: 6px; }
.jr-item {
  display: flex; align-items: baseline; gap: 9px; width: 100%;
  background: none; border: none; border-bottom: 1px dotted rgba(58,44,28,.2);
  cursor: pointer; text-align: left; padding: 7px 3px;
  font-family: inherit; color: var(--cerneala);
}
.jr-item:hover { background: rgba(255,252,242,.4); }
.jr-item.on { background: rgba(138,90,43,.11); }
.jr-item-d { font-size: 11px; color: var(--sepia); font-weight: 600; flex-shrink: 0; min-width: 34px; }
.jr-item-t {
  font-size: 12.5px; flex: 1; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; opacity: .85;
}
.jr-item-m { font-size: 12px; flex-shrink: 0; filter: saturate(.7); }

/* ── starea goala / neconfigurata ── */
.jr-gol {
  text-align: center; padding: 30px 14px; color: var(--sters);
  font-size: 14px; font-style: italic; line-height: 1.6;
}
.jr-gol span { display: block; margin-top: 8px; font-size: 12px; opacity: .82; font-style: normal; }
.jr-gol b { color: var(--sepia); font-style: normal; }

@media (max-width: 760px) {
  #journalModal { padding: 20px 16px 16px; }
  .jr-titlu { font-size: 18px; }
  .jr-zi { font-size: 15px; }
  .jr-text { min-height: 210px; font-size: 15px; }
  .jr-m { width: 40px; height: 40px; font-size: 17px; }   /* tinte de deget */
}

/* salvat local, dar inca n-a plecat spre server (outbox) */
.jr-stare.coada { color: #9a6a2b; font-style: normal; }

/* ═══════════════════════════════════════════════════════════════
   MASINA TIMPULUI — aceeasi hartie ca jurnalul, dar mai grava.
   Verde-inchis peste pergament: e ceva ce se sigileaza, nu se rasfoieste.
   ═══════════════════════════════════════════════════════════════ */
#timpModal {
  --hartie: #e6dcc6; --cerneala: #2f2a20; --sters: #6f6552;
  --sigiliu: #6b4a2f; --verde: #3d5540;
  background:
    radial-gradient(ellipse at 20% 12%, rgba(120,95,55,.14), transparent 44%),
    radial-gradient(ellipse at 82% 80%, rgba(100,80,45,.12), transparent 48%),
    repeating-linear-gradient(91deg, rgba(110,85,50,.04) 0 2px, transparent 2px 6px),
    linear-gradient(172deg, #eae0ca 0%, #ddd1b4 100%);
  border: 1px solid #8a7250; border-radius: 3px;
  color: var(--cerneala);
  font-family: 'Iowan Old Style', 'Palatino Linotype', Palatino, Georgia, serif;
  box-shadow: 0 22px 60px rgba(0,0,0,.62), inset 0 0 0 1px rgba(255,250,235,.45),
              inset 0 0 50px rgba(130,100,55,.16);
  padding: 26px 24px 22px;
}
#timpModal .mcls { color: var(--sters); background: none; border: none; }
/* 4 sept 2026 — Liviu: „in panoul masina timpului pot sa dau slide dreapta
   stanga, fa sa fie stay still". `.modal` avea `overflow-y:auto` dar nimic pe
   orizontala, asa ca orice element care depasea cu un pixel (campul de data pe
   Android, un titlu lung, o cheie lipita) facea toata foaia sa alunece lateral.
   Aici: pe verticala se scroleaza, pe orizontala nu se misca nimic. */
#timpModal { overflow-x: hidden; overscroll-behavior-x: contain; }
#mtBody { max-width: 100%; overflow-x: hidden; overflow-wrap: anywhere; }
#mtBody * { max-width: 100%; box-sizing: border-box; }
.mt-titlu-mare {
  font-size: 20px; font-weight: 600; text-align: center; letter-spacing: .03em;
  padding-bottom: 12px; margin-bottom: 14px; border-bottom: 1px solid rgba(47,42,32,.14);
}
.mt-sectiune {
  font-size: 10.5px; color: var(--sters); font-style: italic; letter-spacing: .08em;
  margin: 18px 0 8px; padding-top: 10px; border-top: 1px solid rgba(47,42,32,.12);
}
.mt-card {
  border: 1px solid rgba(107,74,47,.26); border-radius: 3px;
  padding: 11px 13px; margin-bottom: 8px; background: rgba(255,252,242,.36);
}
.mt-card.sosit { border-color: var(--verde); background: rgba(61,85,64,.1); }
.mt-titlu { font-size: 15px; font-weight: 600; }
.mt-meta { font-size: 11.5px; color: var(--sters); margin-top: 3px; font-style: italic; }
.mt-sigilat { font-size: 11px; color: var(--sigiliu); margin-top: 6px; }
.mt-input, .mt-text {
  width: 100%; box-sizing: border-box; background: rgba(255,252,242,.5);
  border: 1px solid rgba(107,74,47,.28); border-radius: 3px;
  color: var(--cerneala); font-family: inherit; font-size: 15px;
  padding: 9px 10px; margin-bottom: 8px; outline: none;
}
.mt-text { min-height: 130px; line-height: 26px; resize: vertical; }
.mt-input::placeholder, .mt-text::placeholder { color: rgba(111,101,82,.62); font-style: italic; }
.mt-cand { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.mt-p {
  background: rgba(107,74,47,.1); border: 1px solid rgba(107,74,47,.28);
  color: var(--sigiliu); border-radius: 3px; cursor: pointer;
  font-family: inherit; font-size: 12px; padding: 6px 10px;
}
.mt-p:hover { background: rgba(107,74,47,.2); }
/* Butonul de perioada APRINS = chiar data din calendar. Se aprinde singur
   cand data coincide si se stinge singur cand atingi calendarul — nu mai pot
   spune lucruri diferite (4 sept 2026). */
.mt-p.activ {
  background: var(--verde); border-color: var(--verde); color: #f0ead9; font-weight: 600;
}
.mt-cand-sumar { font-size: 12px; color: var(--sters); font-style: italic; margin: -2px 0 10px; min-height: 16px; }
.mt-cand-sumar.bun { color: var(--verde); font-style: normal; }
.mt-cand-sumar.rau { color: #a33; font-style: normal; }

/* 📬 PANOUL DE ADRESA — pasul obligatoriu dinainte de sigilare */
.mt-adresa { padding: 4px 0; }
.mt-adresa .mt-cheie-tit { text-align: center; }
.mt-adresa-scr {
  border-left: 3px solid var(--verde); padding: 6px 0 6px 11px; margin: 0 0 14px;
  font-size: 14.5px; font-weight: 600; line-height: 1.45;
}
.mt-adresa-scr span { display: block; margin-top: 4px; font-size: 12px; font-weight: 400;
  color: var(--sters); font-style: italic; }
.mt-adresa-de-ce { font-size: 12.5px; line-height: 1.65; color: var(--sters); margin: 2px 0 12px; }
.mt-adresa-ok { font-size: 12.5px; color: var(--verde); margin: 2px 0 12px; }
.mt-cod { border-top: 1px dashed rgba(107,74,47,.3); margin-top: 14px; padding-top: 12px; }
.mt-cod-tit { font-size: 13px; margin-bottom: 8px; }

.mt-trimite, .mt-btn {
  width: 100%; background: var(--verde); border: none; border-radius: 3px;
  color: #f0ead9; cursor: pointer; font-family: inherit; font-size: 14px;
  padding: 11px; margin-top: 6px; letter-spacing: .02em;
}
.mt-btn { background: var(--sigiliu); }
.mt-mic {
  background: none; border: none; color: #9a4a3a; cursor: pointer;
  font-family: inherit; font-size: 11px; padding: 4px 0; margin-top: 4px;
  text-decoration: underline; text-underline-offset: 2px;
}
/* 📬 SCRISOAREA DESCHISA DINTR-O NOTIFICARE (3 sept 2026)
   Apasi notificarea si intri fix pe ea, sus, singura, cu buton — nu intr-o
   lista in care nu stii ce sa cauti. Verde inchis = a sosit ceva; capatul de
   sus lipit de marginea foii, ca un antet de scrisoare. */
.mt-focus {
  border: 2px solid var(--verde); border-radius: 3px;
  background: rgba(61,85,64,.12); padding: 13px 14px 12px;
  margin-bottom: 16px; box-shadow: 0 2px 14px rgba(61,85,64,.18);
}
.mt-focus-sus {
  font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--verde); font-weight: 600; margin-bottom: 7px;
}
.mt-focus-txt { font-size: 13px; line-height: 1.6; color: var(--cerneala); margin-top: 8px; }
.mt-stare.bun { color: #3d5540; font-style: normal; font-weight: 600; }

/* doua butoane-link unul langa altul se citeau ca un singur cuvant
   („arata-mi cum vinerenunta la el") — sunt inline, fara spatiu intre ele */
.mt-mic + .mt-mic { margin-left: 16px; }
.mt-stare { font-size: 12px; margin-top: 8px; font-style: italic; color: var(--sters); min-height: 16px; }
.mt-stare.rau { color: #a33; font-style: normal; }
.mt-gol { text-align: center; padding: 26px 12px; color: var(--sters); font-style: italic; line-height: 1.6; }
.mt-gol span, .mt-atentie span { display: block; margin-top: 7px; font-size: 12px; font-style: normal; }
.mt-gol-mic { color: var(--sters); font-size: 12.5px; font-style: italic; padding: 4px 2px 8px; }
.mt-atentie {
  border: 1px solid rgba(154,74,58,.4); background: rgba(154,74,58,.09);
  border-radius: 3px; padding: 11px 13px; font-size: 13px; color: #7a3d2f;
}
/* v116 — intro pentru cine deschide ⏳ prima oara si nu stie ce e */
.mt-intro {
  border: 1px solid rgba(107,74,47,.22); background: rgba(255,252,242,.34);
  border-radius: 3px; padding: 12px 14px; font-size: 13.5px; line-height: 1.6;
}
.mt-intro span { display: block; margin-top: 6px; font-size: 12px; color: var(--sters); font-style: italic; }
.mt-fin { font-size: 10.5px; color: var(--sters); font-style: italic; }
.mt-atentie .mt-input { background: rgba(255,252,242,.72); border-color: rgba(154,74,58,.42); }
.mt-cheie { text-align: center; padding: 8px 0; }
.mt-cheie-tit { font-size: 15px; font-weight: 600; margin-bottom: 12px; }
.mt-cheie-val {
  font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 17px;
  letter-spacing: .06em; word-break: break-all; padding: 13px;
  background: rgba(255,252,242,.7); border: 1px dashed var(--sigiliu);
  border-radius: 3px; margin-bottom: 10px; color: var(--cerneala);
}
.mt-cheie-exp { font-size: 12.5px; color: var(--sters); line-height: 1.65; text-align: left; margin-top: 12px; }
.mt-deschis .mt-clar {
  white-space: pre-wrap; font-size: 15px; line-height: 27px; margin: 14px 0;
  padding: 14px; background: rgba(255,252,242,.5);
  border-left: 3px solid var(--verde); border-radius: 2px;
}
@media (max-width: 760px) {
  #timpModal { padding: 20px 16px 16px; }
  .mt-input, .mt-text { font-size: 16px; }   /* iOS nu mai da zoom */
}