/* ==========================================================================
   convert.css — the converter pages.

   Loaded only on pages generated from _templates/converter.html; tokens,
   cards, buttons and panels all come from style.css. Everything here is
   either the file list, the option row, or the print sheet.
   ========================================================================== */

/* The tier between the page title and the small labels. Without it a converter
   page jumps straight from a 73px h1 to 17px terms, and the tool card carries
   no name at all. */
.convert__heading {
  font-size: clamp(1.5rem, 2.6vw, 2rem);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: -.01em;
  line-height: 1.1;
  margin-block-end: 1.35rem;
}

.convert__drop { transition: border-color .25s var(--ease), background .25s var(--ease); }
.convert__drop.is-over {
  border-color: var(--cocoa);
  background: var(--sand-deep);
}

/* ---------- the chosen files ---------- */
.convert__files { margin-block-start: 1.5rem; }

.convert__count {
  font-size: var(--fs-label); font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--cocoa-soft);
  margin-block-end: .75rem;
}

.convert__list { counter-reset: page; }

.convert__row {
  display: flex; align-items: center; gap: .75rem;
  padding-block: .6rem;
  border-block-start: 1px solid var(--rule-soft);
}
.convert__row:first-child { border-block-start: 0; }

.convert__name {
  flex: 1 1 auto;
  font-size: .9375rem;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.convert__name::before {
  counter-increment: page;
  content: counter(page) ".";
  color: var(--cocoa-soft);
  margin-inline-end: .5rem;
  font-variant-numeric: tabular-nums;
}

.convert__rowTools { display: flex; gap: .35rem; flex: 0 0 auto; }
.convert__rowBtn {
  inline-size: 2rem; block-size: 2rem;
  font-size: .9rem; line-height: 1;
}
.convert__rowBtn:disabled { opacity: .3; cursor: not-allowed; }
.convert__rowBtn:disabled:hover { background: transparent; color: inherit; border-color: var(--rule); }

/* ---------- the batch list: a thumbnail, the file, where it stands ---------- */
.convert__items { list-style: none; margin: 0; padding: 0; }

.convert__item {
  display: flex; align-items: center; gap: .85rem;
  padding-block: .6rem;
  border-block-start: 1px solid var(--rule-soft);
}
.convert__item:first-child { border-block-start: 0; }

.convert__thumb {
  flex: 0 0 auto;
  inline-size: 3.5rem; block-size: 3.5rem;
  object-fit: cover;
  border-radius: 10px;
  border: 1px solid var(--rule-soft);
  background: var(--sand-deep);
}
.convert__thumb--empty { display: block; animation: convert-pulse 1.2s ease-in-out infinite; }
@keyframes convert-pulse { 50% { opacity: .45; } }
@media (prefers-reduced-motion: reduce) { .convert__thumb--empty { animation: none; } }

.convert__info {
  flex: 1 1 auto; min-inline-size: 0;
  display: flex; flex-direction: column; gap: .15rem;
}
.convert__fname {
  font-size: .9375rem;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.convert__meta { font-size: .8125rem; color: var(--cocoa-soft); }

.convert__badge {
  flex: 0 0 auto;
  font-size: var(--fs-label); font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--cocoa-soft);
}
.convert__item[data-state="done"] .convert__badge { color: var(--cocoa); }
.convert__item[data-state="failed"] .convert__badge { color: #8A3B22; }

@media (max-width: 30rem) {
  .convert__badge { display: none; }
}

/* Once every file is converted there is nothing left for the button to do:
   it goes flat grey, not merely faded, so it cannot be mistaken for live. */
.convert__go:disabled {
  background: #D3CEC6; border-color: #D3CEC6;
  color: #8C867C;
  opacity: 1;
}

/* ---------- options ---------- */
.convert__options {
  margin-block-start: 1.5rem;
  display: flex; flex-wrap: wrap; gap: 1rem;
}

.convert__field { display: flex; flex-direction: column; gap: .4rem; flex: 1 1 8rem; }

.convert__label {
  font-size: var(--fs-label); font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--cocoa-soft);
}

.convert__select {
  appearance: none; -webkit-appearance: none;
  background: var(--cream-lift);
  border: 1px solid var(--rule-soft);
  border-radius: var(--r-sm);
  padding: .7rem 1rem;
  font-size: .9375rem;
  cursor: pointer;
  transition: border-color .25s var(--ease);
}
.convert__select:focus { outline: none; border-color: var(--cocoa); }

.convert__hint {
  flex: 1 1 100%;
  font-size: .8125rem; line-height: 1.55;
  color: var(--cocoa-soft);
}

/* ---------- status + result ---------- */
.convert__go { margin-block-start: 1.5rem; }

.convert__status {
  margin-block-start: 1rem;
  font-size: .9375rem;
  color: var(--cocoa-soft);
  min-block-size: 1.4rem;
}
.convert__status[data-kind="error"] { color: #8A3B22; font-weight: 600; }

.convert__result {
  margin-block-start: 1.25rem;
  display: flex; flex-wrap: wrap; gap: .75rem;
}

/* ==========================================================================
   The print sheet
   Hidden on screen; on paper it is the only thing left. Sizing here is in
   physical units on purpose — this block is never seen on a display.
   ========================================================================== */
.printsheet { display: none; }

@media print {
  body.is-printing > *:not(.printsheet),
  body.is-printing .frame { display: none !important; }

  body.is-printing {
    background: #fff;
    color: #000;
  }

  body.is-printing .printsheet {
    display: block;
    margin: 0;
    padding: 0;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 11pt;
    line-height: 1.5;
    color: #000;
  }

  .printsheet h1 { font-size: 18pt; margin: 0 0 12pt; }
  .printsheet h2 { font-size: 15pt; margin: 16pt 0 8pt; }
  .printsheet h3 { font-size: 13pt; margin: 14pt 0 6pt; }
  .printsheet h4, .printsheet h5, .printsheet h6 { font-size: 11.5pt; margin: 12pt 0 5pt; }
  .printsheet p { margin: 0 0 8pt; orphans: 3; widows: 3; }
  /* style.css resets every list to list-style:none for the site's own menus.
     A printed document needs its markers back -- and a numbered list without
     its numbers does not just look wrong, it reads wrong. Indent is logical,
     so an Arabic or Urdu document indents from the right. */
  .printsheet ul, .printsheet ol {
    margin: 0 0 8pt;
    padding-inline-start: 18pt;
  }
  .printsheet ul { list-style: disc; }
  .printsheet ol { list-style: decimal; }
  .printsheet ul ul { list-style: circle; }
  .printsheet li { margin-block-end: 3pt; }
  .printsheet img { max-width: 100%; height: auto; }

  .printsheet table {
    border-collapse: collapse;
    width: 100%;
    margin: 0 0 10pt;
    font-size: 9.5pt;
  }
  .printsheet th, .printsheet td {
    border: 0.5pt solid #999;
    padding: 3pt 5pt;
    text-align: start;
    vertical-align: top;
  }
  .printsheet thead { display: table-header-group; }
  .printsheet tr { page-break-inside: avoid; }

  @page { margin: 18mm 15mm; }
}

/* ==========================================================================
   Slide-urile, la tiparire
   Un slide nu e o pagina de document: are marimea lui, iar fiecare caseta are
   coordonatele ei din fisier. De aceea aici nu curge nimic -- totul e asezat
   exact unde spune .pptx-ul, la marimea paginii pe care o cere prezentarea
   (marimea vine dintr-un `@page` injectat de motor, fiindcă ea difera de la un
   fisier la altul).
   ========================================================================== */
@media print {
  body.is-printing .printsheet--slides {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 18pt;
    line-height: 1.2;
  }

  .printsheet--slides .slide {
    position: relative;
    overflow: hidden;
    background: #fff;
    page-break-after: always;
    break-after: page;
  }
  .printsheet--slides .slide:last-child {
    page-break-after: auto;
    break-after: auto;
  }

  /* Casetele nu se aseaza una sub alta: fiecare isi are locul ei.
     `overflow: visible` e deliberat. PowerPoint micsoreaza singur textul care
     nu incape in caseta lui; noi nu. Cu `hidden`, un rand in plus ar disparea
     in tacere -- iar un text pierdut fara ca nimeni sa observe e mai rau decat
     un text care se revarsa si se vede ca atare. Slide-ul insusi taie, ca
     nimic sa nu iasa din pagina. */
  .printsheet--slides .slide__box {
    position: absolute;
    overflow: visible;
    transform-origin: 0 0;
  }
  .printsheet--slides .slide__box > p {
    margin: 0;
    orphans: 1;
    widows: 1;
  }
  .printsheet--slides .slide__bullet { padding-inline-start: 1.2em; text-indent: -1.2em; }
  .printsheet--slides .slide__bullet::before { content: "• "; }

  /* Imaginea umple caseta pe care o declara fisierul, fara sa se deformeze. */
  .printsheet--slides .slide__box > img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
  }

  .printsheet--slides table {
    width: 100%;
    border-collapse: collapse;
    font-size: inherit;
  }
  .printsheet--slides td {
    border: 0.75pt solid #888;
    padding: 2pt 4pt;
    vertical-align: top;
  }
}

/* ==========================================================================
   Cartea tiparita
   --------------------------------------------------------------------------
   O carte nu e un document lung: e o succesiune de capitole, iar un capitol
   incepe pe pagina lui. De aceea singura regula care conteaza aici e ruperea
   de pagina intre sectiuni -- restul textului curge dupa aceleasi reguli ca
   orice document, fiindcă asta si este.

   Foaia de stil a cartii nu se aplica. Un ePub e scris ca sa se reaseze pe un
   ecran de marime necunoscuta; pe hartie, marginile lui in unitati de fereastra
   si literele lui de telefon ar da o pagina mai proasta decat cea de aici.
   ========================================================================== */
@media print {
  .printsheet--book .chapter {
    page-break-before: always;
    break-before: page;
  }
  /* Primul capitol nu vine dupa nimic, deci n-are de ce sa rupa o pagina. */
  .printsheet--book .chapter:first-child {
    page-break-before: auto;
    break-before: auto;
  }

  .printsheet--book .chapter--title {
    text-align: center;
    padding-block-start: 25vh;
  }
  .printsheet--book .chapter--title h1 { font-size: 26pt; margin-block-end: 10pt; }
  .printsheet--book .chapter__author {
    font-size: 13pt;
    font-style: italic;
  }

  /* O coperta e cat o pagina intreaga. Fara limita de inaltime ar imparti-o in
     doua pagini, cu o fasie de imagine ramasa pe a doua. */
  .printsheet--book img {
    max-height: 90vh;
    object-fit: contain;
  }
}

/* ==========================================================================
   Semnatura de mana
   --------------------------------------------------------------------------
   `touch-action: none` e singura regula de aici fara de care unealta nu merge
   deloc pe telefon: fara ea, degetul care deseneaza deruleaza pagina, si nu
   se poate semna. Restul sunt doar haine.
   ========================================================================== */
/* Doi pasi care se urmeaza, nu campuri alaturate. */
.convert__options.sign__options { display: block; }

.sign__step.eyebrow {
  display: block;
  margin-block: 1.75rem .6rem;
}
.sign__step:first-child { margin-block-start: 0; }
.sign__hint {
  font-size: .8125rem;
  color: var(--cocoa-soft);
  margin-block-end: .6rem;
}

.sign__pageWrap {
  padding: 12px;
  border-radius: var(--r-sm);
  border: 1px solid var(--rule-soft);
  background: var(--cream-lift);
  display: flex;
  justify-content: center;
}

.sign__nav {
  display: flex; align-items: center; justify-content: center;
  gap: .9rem;
  margin-block-start: .6rem;
}
.sign__navBtn { padding-block: .35rem; padding-inline: .8rem; line-height: 1; }
.sign__navBtn:disabled { opacity: .35; cursor: not-allowed; }
.sign__pageInfo {
  font-size: .75rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  color: var(--cocoa-soft);
  margin: 0; min-inline-size: 9ch; text-align: center;
}

.sign__padWrap {
  position: relative;
  margin-block-end: .9rem;
  border: 1px solid var(--rule-soft);
  border-radius: var(--r-sm);
  background: var(--cream-lift);
  overflow: hidden;
}
.sign__pad {
  display: block;
  inline-size: 100%;
  block-size: auto;
  touch-action: none;
  cursor: crosshair;
  position: relative;
  z-index: 1;
}
/* Linia pe care se semneaza, ca pe hartie: arata unde e jos, fara sa intre in
   desen -- e sub panza, deci nu ajunge in fisier. */
.sign__baseline {
  position: absolute;
  inset-inline: 8%;
  inset-block-start: 72%;
  border-block-end: 1px solid var(--rule);
  z-index: 0;
}

.sign__inkRow {
  display: flex; align-items: center; flex-wrap: wrap; gap: .9rem;
  margin-block-end: .4rem;
}
.sign__swatches { display: flex; gap: .45rem; }
.sign__swatch {
  inline-size: 1.9rem; block-size: 1.9rem; border-radius: 50%;
  border: 2px solid var(--cream-lift);
  box-shadow: 0 0 0 1px var(--rule);
  padding: 0; cursor: pointer;
}
.sign__swatch[aria-checked="true"] { box-shadow: 0 0 0 2px var(--cocoa); }
.sign__custom {
  inline-size: 2.1rem; block-size: 2.1rem;
  border: 1px solid var(--rule-soft); border-radius: 8px;
  background: none; cursor: pointer; padding: 0;
}
.sign__widthWrap { display: inline-flex; align-items: center; gap: .6rem; flex: 1 1 10rem; }
.sign__widthWrap input[type="range"] { flex: 1 1 auto; accent-color: var(--cocoa); }
.sign__widthLabel {
  font-size: var(--fs-label); font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--cocoa-soft);
}
/* Un punct de marimea penitei: cifra "5" nu spune nimic, un punct spune tot. */
.sign__nib { display: inline-block; border-radius: 50%; flex: 0 0 auto; }
.sign__clear { padding-block: .45rem; padding-inline: .9rem; font-size: .8125rem; }

/* ---- pagina si dreptunghiul de pe ea ---- */
.sign__stage { position: relative; display: block; max-inline-size: 100%; }
.sign__page { display: block; inline-size: 100%; block-size: auto; }
.sign__overlay {
  position: absolute; inset: 0;
  touch-action: none;
  cursor: crosshair;
}
.sign__rect {
  position: absolute;
  border: 1px dashed var(--cocoa);
  background: rgba(90, 70, 50, .08);
  pointer-events: none;
}
.sign__rect--set { background: none; border-style: solid; border-color: var(--tan); }
/* Semnatura se vede unde va ajunge, la marimea la care va ajunge: `contain`,
   fiindcă la fel o aseaza si motorul in pagina. */
.sign__ghost {
  inline-size: 100%; block-size: 100%;
  object-fit: contain; display: block;
}

/* ==========================================================================
   Parola de deschidere
   --------------------------------------------------------------------------
   Doua campuri unul sub altul, nu unul langa altul: sunt aceeasi intrebare
   pusa de doua ori, iar alaturarea le-ar face sa para doua lucruri diferite.
   ========================================================================== */
.convert__options.lock__options { display: block; max-inline-size: 28rem; }
.lock__options .field { margin-block-end: 1rem; }

.lock__show {
  display: inline-flex; align-items: center; gap: .1rem;
  font-size: .8125rem; color: var(--cocoa-soft);
  cursor: pointer;
}
.lock__show input { accent-color: var(--cocoa); margin-inline-end: .35rem; }

/* Spus inainte de apasarea butonului, nu dupa: dintr-o parola uitata nu se mai
   iese, si asta e clipa in care conteaza. */
.lock__warn {
  margin-block-start: 1rem;
  padding: .75rem .9rem;
  border-radius: var(--r-sm);
  border: 1px solid var(--rule);
  background: var(--sand-deep);
  font-size: .8125rem;
  color: var(--cocoa);
}