/* Shared shell + document styling for every generator under /tools/.
   Loaded after styles.min.css so it can use the site's CSS variables. */

/* ============================================================
   TOOL SHELL (screen only)
   ============================================================ */
.tool-hero {
    padding: 7rem 0 2rem;
    background: linear-gradient(135deg, #f8fafc 0%, #eef2f7 100%);
    border-bottom: 1px solid #e2e8f0;
}
.tool-breadcrumb { font-size: 0.85rem; color: #64748b; margin-bottom: 0.75rem; }
.tool-breadcrumb a { color: #64748b; text-decoration: none; }
.tool-breadcrumb a:hover { color: var(--primary-color); }
.tool-hero h1 { font-size: clamp(1.6rem, 4vw, 2.3rem); margin: 0 0 0.5rem; line-height: 1.2; }
.tool-hero h1 .ne { font-family: 'Kalimati', 'Noto Sans Devanagari', serif; font-weight: 400; color: #475569; }
.tool-hero .sub { color: #475569; max-width: 62ch; margin: 0; font-size: 1.02rem; }
.tool-note {
    margin-top: 1rem; padding: 0.75rem 1rem; background: #fff;
    border: 1px solid #e2e8f0; border-left: 3px solid var(--primary-color);
    border-radius: 4px; font-size: 0.9rem; color: #475569; max-width: 70ch;
}

.tool-layout { padding: 2rem 0 4rem; display: grid; gap: 2rem; }
@media (min-width: 1024px) {
    .tool-layout { grid-template-columns: minmax(0, 400px) minmax(0, 1fr); align-items: start; }
    .tool-form-pane { position: sticky; top: 90px; max-height: calc(100vh - 110px); overflow-y: auto; padding-right: 0.5rem; }
}

/* ---------------------------- form ---------------------------- */
.fieldset { border: 1px solid #e2e8f0; border-radius: 8px; padding: 1rem 1.1rem 1.1rem; margin-bottom: 1rem; background: #fff; }
.fieldset > legend {
    font-size: 0.72rem; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase;
    color: var(--primary-color); padding: 0 0.4rem;
}
.field { margin-bottom: 0.8rem; }
.field:last-child { margin-bottom: 0; }
.field label { display: block; font-size: 0.8rem; font-weight: 600; color: #334155; margin-bottom: 0.25rem; }
.field label .ne { font-weight: 400; color: #64748b; }
.field input, .field select, .field textarea {
    width: 100%; padding: 0.5rem 0.65rem; border: 1px solid #cbd5e1; border-radius: 5px;
    font-size: 0.92rem; font-family: inherit; color: #0f172a; background: #fff;
}
.field input:focus, .field select:focus, .field textarea:focus {
    outline: none; border-color: var(--primary-color); box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}
.field .hint { font-size: 0.74rem; color: #64748b; margin-top: 0.22rem; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem; }
.field-row-3 { display: grid; grid-template-columns: 1fr 1.3fr 1fr; gap: 0.6rem; }
.devanagari-input { font-family: 'Kalimati', 'Noto Sans Devanagari', 'Mangal', serif; }
.check { display: flex; align-items: flex-start; gap: 0.5rem; font-size: 0.83rem; color: #334155; font-weight: 500 !important; }
.check input { width: auto; margin-top: 0.15rem; flex-shrink: 0; }
.subgroup { display: block; }
.subgroup .field { margin-bottom: 0.55rem; }

/* ---------------------------- repeats ---------------------------- */
.repeat-row { border: 1px solid #e2e8f0; border-radius: 6px; padding: 0.7rem 0.8rem; margin-bottom: 0.7rem; background: #f8fafc; }
.repeat-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.5rem; }
.repeat-n { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: #64748b; }
.btn-add, .btn-remove {
    font-family: inherit; cursor: pointer; border-radius: 5px; font-weight: 600;
    border: 1px solid #cbd5e1; background: #fff; color: #475569;
}
.btn-add { padding: 0.45rem 0.9rem; font-size: 0.83rem; width: 100%; }
.btn-add:hover { border-color: var(--primary-color); color: var(--primary-color); }
.btn-remove { padding: 0.15rem 0.5rem; font-size: 0.72rem; color: #b91c1c; border-color: #fecaca; }
.btn-remove:hover { background: #fef2f2; }

.form-actions { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 0.4rem; }
.btn-reset {
    background: transparent; color: #64748b; border: 1px solid #cbd5e1;
    padding: 0.5rem 0.9rem; border-radius: 5px; font-size: 0.85rem; cursor: pointer; font-family: inherit;
}
.btn-reset:hover { border-color: #94a3b8; color: #475569; }
.save-state { font-size: 0.76rem; color: #64748b; align-self: center; }

/* ---------------------------- preview ---------------------------- */
.preview-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; margin-bottom: 0.9rem; }
.preview-bar h2 { font-size: 1rem; margin: 0; flex: 1 1 auto; color: #0f172a; }
.btn-print {
    background: var(--primary-color); color: #fff; border: none; cursor: pointer;
    padding: 0.65rem 1.3rem; border-radius: 6px; font-size: 0.95rem; font-weight: 600;
    font-family: inherit; display: inline-flex; align-items: center; gap: 0.45rem;
}
.btn-print:hover { filter: brightness(0.93); }
.print-tip {
    background: #fffbeb; border: 1px solid #fde68a; border-radius: 6px;
    padding: 0.7rem 0.9rem; font-size: 0.85rem; color: #78350f; margin-bottom: 1rem;
}
.print-tip strong { color: #713f12; }
.font-warn, .tpl-error {
    display: none; background: #fef2f2; border: 1px solid #fecaca; border-radius: 6px;
    padding: 0.7rem 0.9rem; font-size: 0.85rem; color: #991b1b; margin-bottom: 1rem;
}
.font-warn.show { display: block; }
.tpl-error:not([hidden]) { display: block; }

.paper-scroll { background: #e9e9e9; border: 1px solid #d4d4d4; border-radius: 6px; padding: 16px; overflow-x: auto; }

/* ============================================================
   THE DOCUMENT
   Screen padding equals the @page margin, so the preview shows the
   same text box that actually prints.
   ============================================================ */
.paper {
    background: #fff;
    width: 210mm;
    min-height: 297mm;
    margin: 0 auto;
    padding: 20mm;
    box-shadow: 0 1px 4px rgba(0,0,0,0.14);
    font-family: 'Kalimati', 'Noto Sans Devanagari', 'Mangal', serif;
    font-size: 12pt;
    line-height: 1.6;
    color: #000;
}
.paper .title { text-align: center; font-size: 16pt; font-weight: bold; margin: 0 0 22px; }
.paper .subtitle { text-align: center; font-size: 12pt; margin: -14px 0 20px; }
.paper .preamble, .paper p { text-align: justify; margin: 0 0 12px; }
.paper .sec-head { font-weight: bold; text-decoration: underline; font-size: 13pt; margin: 14px 0 10px; }
.paper .center { text-align: center; }
.paper .right { text-align: right; }

/* Letterhead used by letters to OCR / IRD / banks. */
.paper .letterhead { border-bottom: 2px solid #000; padding-bottom: 8px; margin-bottom: 14px; }
.paper .letterhead .regno { font-size: 10pt; }
.paper .letterhead .coname { text-align: center; font-weight: bold; font-size: 15pt; margin: 2px 0; }
.paper .letterhead .coaddr { text-align: center; font-size: 11pt; }

/* Clauses flow and paginate themselves: documents change length with the
   data, so the browser must decide where pages break, not the author. */
.paper .clauses { list-style: none; counter-reset: cl; margin: 0; padding: 0; }
.paper .clauses li {
    counter-increment: cl; position: relative; padding-left: 30px;
    text-align: justify; margin-bottom: 8px;
    break-inside: avoid; page-break-inside: avoid;
}
.paper .clauses li::before { content: counter(cl, devanagari) "."; position: absolute; left: 0; top: 0; }

/* Nepali letter-ordered sub-list: क) ख) ग) */
.paper .sub-clauses { list-style: none; counter-reset: sub; margin: 6px 0 6px 0; padding: 0; }
.paper .sub-clauses li {
    counter-increment: sub; position: relative; padding-left: 34px;
    text-align: justify; margin-bottom: 6px;
    break-inside: avoid; page-break-inside: avoid;
}
.paper .sub-clauses li::before {
    content: "(" counter(sub, devanagari) ")"; position: absolute; left: 0; top: 0;
}

.paper table { width: 100%; border-collapse: collapse; margin: 10px 0; font-size: 11pt; }
.paper th, .paper td { border: 1px solid #000; padding: 5px 7px; text-align: left; vertical-align: top; }
.paper th { font-weight: bold; text-align: center; }
.paper td.num { text-align: right; white-space: nowrap; }
.paper tr { break-inside: avoid; page-break-inside: avoid; }

.paper .sign-block { display: flex; justify-content: space-between; margin-top: 30px; break-inside: avoid; page-break-inside: avoid; }
.paper .sign-col { width: 46%; }
.paper .party-head { font-weight: bold; text-decoration: underline; }
.paper .sig-line { width: 170px; border-top: 1px solid #000; margin: 64px 0 6px; }
.paper .sign-col .nm { font-weight: bold; }
.paper .date-line { margin-top: 40px; break-inside: avoid; page-break-inside: avoid; }
.paper .dotfill { letter-spacing: 1px; }
.paper .page-break { break-before: page; page-break-before: always; }

/* ============================================================
   PRINT
   ============================================================ */
@media print {
    .navbar, .footer, .whatsapp-float, .tool-hero, .tool-form-pane,
    .preview-bar, .print-tip, .font-warn, .tpl-error, .tool-cta { display: none !important; }
    .tool-layout { display: block; padding: 0; }
    .paper-scroll { background: none; border: none; border-radius: 0; padding: 0; overflow: visible; }
    .paper { width: auto; min-height: auto; margin: 0; padding: 0; box-shadow: none; background: #fff; }
    @page { size: A4; margin: 20mm; }
    body { background: #fff; }
}

/* ---------------------------- CTA ---------------------------- */
.tool-cta {
    margin-top: 2.5rem; padding: 1.75rem; border-radius: 10px;
    background: linear-gradient(135deg, var(--primary-color) 0%, #1e40af 100%);
    color: #fff;
}
.tool-cta h3 { color: #fff; margin: 0 0 0.5rem; font-size: 1.25rem; }
.tool-cta p { margin: 0 0 1.1rem; opacity: 0.94; max-width: 60ch; }
.tool-cta .cta-buttons { display: flex; flex-wrap: wrap; gap: 0.7rem; }
.tool-cta .btn-cta-call {
    background: #fff; color: var(--primary-color); padding: 0.7rem 1.4rem; border-radius: 6px;
    font-weight: 600; text-decoration: none; display: inline-flex; align-items: center; gap: 0.45rem;
}
.tool-cta .btn-cta-wa {
    background: transparent; color: #fff; border: 2px solid #fff; padding: 0.7rem 1.4rem;
    border-radius: 6px; font-weight: 600; text-decoration: none; display: inline-flex; align-items: center; gap: 0.45rem;
}

/* ---------------------------- tools index ---------------------------- */
.tool-grid { display: grid; gap: 1rem; padding: 2rem 0 4rem; }
@media (min-width: 640px) { .tool-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .tool-grid { grid-template-columns: repeat(3, 1fr); } }
.tool-card {
    display: block; border: 1px solid #e2e8f0; border-radius: 8px; padding: 1.1rem 1.2rem;
    background: #fff; text-decoration: none; color: inherit; transition: border-color .15s, transform .15s;
}
.tool-card:hover { border-color: var(--primary-color); transform: translateY(-2px); }
.tool-card .tag {
    font-size: 0.66rem; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase;
    color: var(--primary-color); display: block; margin-bottom: 0.4rem;
}
.tool-card h3 { margin: 0 0 0.35rem; font-size: 1.02rem; }
.tool-card h3 .ne { font-family: 'Kalimati', 'Noto Sans Devanagari', serif; font-weight: 400; color: #64748b; font-size: 0.92rem; }
.tool-card p { margin: 0; font-size: 0.86rem; color: #64748b; line-height: 1.5; }
/* "Ask us" cards: a request is worth more than a "coming soon" badge, so
   these are live WhatsApp links rather than disabled placeholders. */
.tool-card.ask { border-style: dashed; background: #fcfcfd; }
.tool-card.ask:hover { border-style: solid; }
.tool-card.ask .tag { color: #64748b; }
.tool-card .ask-cta {
    display: inline-block; margin-top: 0.7rem; font-size: 0.82rem;
    font-weight: 600; color: var(--primary-color);
}

/* Derived values (e.g. share count = capital / par value) are shown so the
   user can sanity-check them, but never typed. */
.field input.computed { background: #f1f5f9; color: #475569; cursor: default; }

/* Nepali letter ordering — क) ख) ग) — used for MOA/AOA sub-clauses.
   CSS has no built-in Devanagari-letter counter, so declare one. */
@counter-style nepali-alpha {
    system: fixed;
    symbols: "क" "ख" "ग" "घ" "ङ" "च" "छ" "ज" "झ" "ञ" "ट" "ठ" "ड" "ढ" "ण" "त" "थ" "द" "ध" "न";
    suffix: "";
}
.paper .alpha-clauses { list-style: none; counter-reset: al; margin: 6px 0; padding: 0; }
.paper .alpha-clauses li {
    counter-increment: al; position: relative; padding-left: 34px;
    text-align: justify; margin-bottom: 6px;
    break-inside: avoid; page-break-inside: avoid;
}
.paper .alpha-clauses li::before {
    content: "(" counter(al, nepali-alpha) ")"; position: absolute; left: 0; top: 0;
}

/* The §16 subscriber table is wide; let it use the full text box and wrap. */
.paper table.subscribers { font-size: 9.5pt; table-layout: fixed; }
.paper table.subscribers td, .paper table.subscribers th { padding: 4px 5px; word-wrap: break-word; }
/* Own the table wrapper rather than borrowing the blog's .blog-table-wrapper,
   whose styles are not ours to depend on. */
.paper .doc-table-wrap { width: 100%; margin: 10px 0; }
.paper .doc-table-wrap > table { width: 100%; }

/* AOA-style documents: numbered rules grouped under परिच्छेद headings.
   Headings sit between rules without breaking the numbering, which a plain
   <ol> cannot do (an <ol> may only contain <li>). */
.paper .rules { counter-reset: r; }
.paper .rule {
    counter-increment: r; position: relative; padding-left: 34px;
    text-align: justify; margin-bottom: 10px;
    break-inside: avoid; page-break-inside: avoid;
}
.paper .rule::before { content: counter(r, devanagari) "."; position: absolute; left: 0; top: 0; }
.paper .chapter {
    text-align: center; font-weight: bold; font-size: 13pt;
    margin: 22px 0 12px; break-after: avoid; page-break-after: avoid;
}
.paper .chapter .sub { display: block; font-weight: normal; font-size: 12pt; }