/* ==========================================================================
   PDFtoGrid — the converter (home page only)
   The ledger is drawn as continuous-feed computer paper: sprocket holes
   down both edges, green bars, a red margin rule beside the row numbers.
   ========================================================================== */

/* --- hero ------------------------------------------------------------- */
.hero { padding: 3.25rem 0 1.5rem; }
@media (max-width: 620px) { .hero { padding: 2rem 0 1rem; } }
.hero-head { max-width: 50rem; }
.hero h1 { font-size: clamp(2rem, 5.4vw, 3.6rem); max-width: 17ch; }
.hero .lede { font-size: clamp(1.08rem, 1.6vw, 1.22rem); line-height: 1.6; color: var(--slate); max-width: 40rem; margin: 0; }
.facts { list-style: none; display: flex; flex-wrap: wrap; gap: .5rem; padding: 0; margin: 1.25rem 0 0; }
.facts li { margin: 0; font-family: var(--data); font-size: .78rem; color: var(--ink-2); background: var(--bar); padding: .3rem .65rem .3rem .55rem; border-radius: 3px; display: flex; align-items: center; gap: .45rem; }
.facts li::before { content: ""; width: 7px; height: 7px; background: var(--redink); border-radius: 50%; flex: none; }

/* --- SIGNATURE: the ledger, as tractor-feed paper ---------------------- */
.ledger {
  --feed: 1.75rem;                      /* width of each sprocket strip */
  margin: 2rem 0 0; position: relative; background: var(--paper);
  border: 1px solid var(--ink); box-shadow: var(--shadow);
  padding-inline: var(--feed);
}
.ledger::before, .ledger::after {     /* punched sprocket strips with a perforation line */
  content: ""; position: absolute; top: 0; bottom: 0; width: var(--feed); pointer-events: none;
  background:
    radial-gradient(circle at 50% .75rem, var(--deep) 0 .28rem, transparent .3rem) 0 0 / 100% 1.5rem repeat-y,
    #F3F6F2;
}
.ledger::before { left: 0; border-right: 1px dashed var(--rule); }
.ledger::after  { right: 0; border-left: 1px dashed var(--rule); }
@media (max-width: 620px) { .ledger { --feed: 1rem; } .ledger::before, .ledger::after { background: radial-gradient(circle at 50% .75rem, var(--deep) 0 .2rem, transparent .22rem) 0 0 / 100% 1.5rem repeat-y, #F3F6F2; } }

.ledger-bar {
  display: flex; align-items: center; justify-content: space-between; gap: .5rem 1rem; flex-wrap: wrap;
  padding: .6rem .85rem; background: var(--ink); color: var(--paper);
}
.ledger-bar .label { margin: 0; font-family: var(--display); font-size: .74rem; letter-spacing: -.03em; font-weight: 700; display: flex; align-items: center; gap: .55rem; }
.ledger-bar .label::before { content: ""; width: .6rem; height: .75rem; border: 1.5px solid var(--bar); border-radius: 1px; flex: none; }
.status { margin: 0; font-family: var(--data); font-size: .76rem; color: var(--bar); }
.status[data-tone="error"] { color: #FF9A93; }

.sheet { position: relative; min-height: 20rem; overflow: auto; background: var(--paper); }

/* empty state: a blank green-bar sheet waiting for a file */
.empty {
  position: relative; min-height: 20rem;
  background:
    repeating-linear-gradient(180deg, var(--bar) 0 2.2rem, transparent 2.2rem 4.4rem),
    linear-gradient(90deg, var(--gutter) 0 2.4rem, transparent 2.4rem);
  display: grid; place-items: center; text-align: center; padding: 2.5rem 1.25rem; cursor: pointer;
}
.empty::before { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(90deg, transparent 0 calc(20% - 1px), var(--rule) calc(20% - 1px) 20%); }
.empty::after { content: ""; position: absolute; left: 2.4rem; top: 0; bottom: 0; width: 1px; background: var(--redink); opacity: .6; }
.empty > * { position: relative; z-index: 1; }
.empty-inner { background: var(--paper); border: 1.5px dashed var(--ink); padding: 1.75rem 2rem; max-width: 27rem; box-shadow: 0 10px 30px -18px rgba(16,22,20,.45); transition: transform .15s ease, background .15s ease; }
.empty:hover .empty-inner { transform: translateY(-2px); }
.empty h2 { margin: 0 0 .4rem; font-size: 1.3rem; }
.empty p { margin: 0; color: var(--slate); font-size: .94rem; }
.ledger.dragging .empty-inner { border-style: solid; border-color: var(--redink); background: var(--bar); }
.pick {
  margin-top: 1.1rem; font-family: var(--display); font-weight: 700; font-size: .78rem; letter-spacing: -.02em;
  background: var(--redink); color: #fff; border: 0; padding: .8rem 1.25rem; cursor: pointer; border-radius: 3px;
  box-shadow: 0 2px 0 var(--ink);
}
.pick:hover { background: var(--ink); box-shadow: 0 2px 0 var(--redink); }
@media (prefers-reduced-motion: reduce) { .empty-inner { transition: none; } .empty:hover .empty-inner { transform: none; } }

/* result grid */
table.grid { border-collapse: collapse; font-family: var(--data); font-size: .8rem; width: 100%; }
table.grid th, table.grid td { border: 1px solid var(--rule); padding: .32rem .55rem; text-align: left; vertical-align: top; white-space: pre-wrap; min-width: 5rem; }
table.grid thead th { position: sticky; top: 0; z-index: 2; background: var(--deep); color: var(--bar); font-size: .68rem; text-align: center; font-weight: 500; border-color: var(--deep); }
table.grid tbody tr:nth-child(even) td { background: var(--bar); }
table.grid td.rownum { background: var(--gutter); color: var(--slate); text-align: right; font-size: .68rem; min-width: 2.4rem; width: 2.4rem; position: sticky; left: 0; z-index: 1; border-right: 1px solid var(--redink); }
table.grid tbody tr:nth-child(even) td.rownum { background: var(--gutter); }
table.grid td[contenteditable]:hover { background: #fff; }
table.grid td[contenteditable]:focus { background: #fff; outline: 2px solid var(--redink); outline-offset: -2px; }
.page-title { margin: 0; font-family: var(--data); font-size: .74rem; padding: .5rem .75rem; background: var(--gutter); border-bottom: 1px solid var(--rule); color: var(--slate); }
@media (prefers-reduced-motion: no-preference) {
  table.grid tbody tr { animation: feed .28s ease-out backwards; }
  @keyframes feed { from { opacity: 0; transform: translateY(-.35rem); } to { opacity: 1; transform: none; } }
}

/* controls */
.controls { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: 1rem 1.75rem; padding: 1rem .85rem; border-top: 1px solid var(--ink); background: var(--gutter); }
.field { display: flex; flex-direction: column; gap: .35rem; }
.field > .label { font-family: var(--display); font-size: .72rem; letter-spacing: -.02em; color: var(--ink-2); font-weight: 700; }
.field input[type=text] { font-family: var(--data); font-size: .85rem; padding: .5rem .6rem; border: 1px solid var(--rule); background: var(--paper); color: var(--ink); border-radius: 3px; }
.field input[type=text]:focus { border-color: var(--ink); }
.field input[type=range] { accent-color: var(--redink); width: 100%; }
.check { display: flex; align-items: flex-start; gap: .5rem; font-family: var(--data); font-size: .8rem; color: var(--ink); cursor: pointer; }
.check input { accent-color: var(--redink); margin-top: .2rem; }
.rangewrap { display: flex; align-items: center; gap: .6rem; }
.rangewrap output { font-family: var(--data); font-size: .78rem; color: var(--ink); background: var(--paper); border: 1px solid var(--rule); border-radius: 3px; min-width: 2.6rem; text-align: center; padding: .1rem .3rem; }

.actions { display: flex; flex-wrap: wrap; gap: .6rem; padding: .9rem .85rem; border-top: 1px solid var(--rule); }
.btn { font-family: var(--display); font-weight: 700; font-size: .74rem; letter-spacing: -.02em; padding: .7rem 1.05rem; border: 1px solid var(--ink); background: var(--paper); color: var(--ink); cursor: pointer; border-radius: 3px; }
.btn:hover:not(:disabled) { background: var(--bar); }
.btn.primary { background: var(--ink); color: var(--paper); box-shadow: 0 2px 0 var(--redink); }
.btn.primary:hover:not(:disabled) { background: var(--redink); border-color: var(--redink); box-shadow: 0 2px 0 var(--ink); }
.btn:disabled { opacity: .35; cursor: not-allowed; box-shadow: none; }
.hint { font-family: var(--data); font-size: .76rem; color: var(--slate); margin: 0; padding: 0 .85rem 1rem; }

/* --- content below the tool ------------------------------------------- */
.content { padding: 3rem 0 1rem; }
.content > .wrap.col { max-width: var(--max); }
.content .col > section, .content .col > .answer, .content .col > .ad-slot { max-width: var(--read); }
.content section { margin-bottom: 3rem; }
.content h2 { margin: 0 0 .8rem; padding-top: 1.1rem; border-top: 2px solid var(--ink); }
.content h3 { margin: 1.6rem 0 .4rem; }
.content ul, .content ol { padding-left: 1.2rem; margin: 0 0 1rem; }
.content li { margin-bottom: .5rem; }
.content li::marker { color: var(--redink); font-family: var(--data); }
.content .kicker { font-family: var(--data); font-size: .8rem; font-weight: 400; color: var(--slate); border-left: 2px solid var(--redink); padding-left: .8rem; margin: 1.25rem 0; display: block; line-height: 1.6; }
.content .kicker::before { display: none; }
.split { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: 0; border: 1px solid var(--ink); }
.card { padding: 1rem 1.1rem 1.1rem; border-bottom: 1px solid var(--rule); }
.card:nth-child(odd) { background: var(--bar); }
.card h3 { margin-top: 0; font-size: .92rem; }
.card p { font-size: .94rem; color: var(--ink-2); margin: 0; }
.content table { width: 100%; border-collapse: collapse; font-size: .9rem; margin: .4rem 0 1rem; font-family: var(--data); }
.content table caption { text-align: left; font-family: var(--data); font-size: .76rem; color: var(--slate); padding-bottom: .4rem; }
.content table th, .content table td { padding: .5rem .7rem; border-bottom: 1px solid var(--rule); text-align: left; }
.content table thead th { background: var(--ink); color: var(--paper); font-weight: 500; font-size: .74rem; }
.content table tbody tr:nth-child(even) td { background: var(--bar); }

/* answer slip sits in the content column on the home page */
.content .answer h2 { border-top: 0; padding-top: .65rem; margin: 0; }
.content .answer ol { padding-left: 0; margin: 0; }
.content .answer li { margin: 0; }
.content .answer li::marker { content: none; }

/* --- guides ledger ---------------------------------------------------- */
.guides { padding: 1rem 0 2rem; }
.guides h2 { margin: 0 0 .5rem; padding-top: 1.1rem; border-top: 2px solid var(--ink); max-width: 40rem; }
.guides > .wrap > p { color: var(--slate); margin: 0 0 1.25rem; max-width: 40rem; }
.guides__sheet { border: 1px solid var(--ink); overflow-x: auto; box-shadow: var(--shadow); }
.guides__table { width: 100%; border-collapse: collapse; font-size: .92rem; }
.guides__table thead th { background: var(--ink); color: var(--paper); font-family: var(--data); font-weight: 500; font-size: .74rem; text-align: left; padding: .55rem .8rem; }
.guides__table tbody tr:nth-child(odd) { background: var(--bar); }
.guides__table th[scope=row] { text-align: left; font-family: var(--display); font-size: .82rem; letter-spacing: -.035em; padding: .6rem .8rem; white-space: nowrap; }
.guides__table th[scope=row] a { text-decoration: none; }
.guides__table th[scope=row] a::after { content: " →"; color: var(--redink); }
.guides__table td { padding: .6rem .8rem; color: var(--ink-2); }
.guides__table td.rownum { width: 2.6rem; text-align: right; font-family: var(--data); font-size: .7rem; color: var(--slate); background: var(--gutter); border-right: 1px solid var(--redink); }
.guides__table tbody tr:hover { background: #fff; }
@media (max-width: 620px) { .guides__table td:last-child { display: none; } .guides__table th[scope=row] { white-space: normal; } }