@page {
    size: A4;
    margin: 0;
}

* {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    padding: 0;
    background: #e5e5e5;
    font-family: "Times New Roman", Times, serif;
    color: #000;
    /* Stop mobile Safari from independently inflating text in wide blocks,
       which breaks the layout (inconsistent font sizes, different wrapping).
       We want the page rendered at its true size, then scaled uniformly. */
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

.page {
    width: 210mm;
    min-height: 297mm;
    padding: var(--top-margin, 9mm) var(--side-margin, 10mm) var(--bottom-margin, 0mm) var(--side-margin, 10mm);
    margin: 10mm auto;
    background: #fff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    font-size: var(--font-size, 11.5pt);
    line-height: var(--line-height, 1.25);
    position: relative;
}

/* Floating "Fit to screen" button (screen only). */
#fitBtn {
    position: fixed;
    /* left/top are set by script.js to sit beside the page's top-right corner.
       Hidden until then to avoid a flash in the top-left corner. */
    left: 0;
    top: 0;
    visibility: hidden;
    z-index: 1000;
    padding: 7px 14px;
    border: none;
    border-radius: 999px;
    background: rgba(31, 41, 55, 0.35);
    color: #f9fafb;
    font: 600 12px/1 system-ui, -apple-system, sans-serif;
    letter-spacing: 0.02em;
    cursor: pointer;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
    transition: background 0.15s ease, transform 0.1s ease;
    transform-origin: center center;
    will-change: transform;
}

#fitBtn:hover {
    background: #1f2937;
}

#fitBtn.message {
    background: rgba(17, 24, 39, 0.92);
}

#fitBtn:active {
    transform: translateY(1px);
}

/* While growing on hover, the inline transform is driven by JS, so disable
   the snappy active offset. */
#fitBtn.growing,
#fitBtn.growing:active {
    transform-origin: center center;
}

/* Quick wobble as the button gets dangerously large. */
#fitBtn.straining {
    animation: fitBtnWobble 0.06s ease-in-out infinite;
}

@keyframes fitBtnWobble {
    0%   { margin-left: -5px; margin-top: -4px; }
    25%  { margin-left: 5px;  margin-top: 3px; }
    50%  { margin-left: -4px; margin-top: 4px; }
    75%  { margin-left: 4px;  margin-top: -3px; }
    100% { margin-left: -5px; margin-top: -4px; }
}

#fitBtn.exploded {
    opacity: 0;
    pointer-events: none;
    transform: scale(0);
}

/* The button popping back into existence after respawn. */
#fitBtn.respawn {
    animation: fitBtnRespawn 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes fitBtnRespawn {
    0%   { transform: scale(0); opacity: 0; }
    60%  { transform: scale(1.15); opacity: 1; }
    100% { transform: scale(1); opacity: 1; }
}

/* Explosion particles. */
.fit-particle {
    position: fixed;
    z-index: 1001;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    pointer-events: none;
    will-change: transform, opacity;
}

@media print {
    .fit-particle {
        display: none !important;
    }
}

@media print {
    #fitBtn {
        display: none !important;
    }
}

/* Hide the Fit-to-screen button on mobile / touch devices. */
@media (max-width: 768px), (hover: none) and (pointer: coarse) {
    #fitBtn {
        display: none !important;
    }
}

/* Overflow indicator line at 297mm */
.page::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 297mm;
    border-top: 2px dashed #d33;
    pointer-events: none;
    display: none;
}

html.show-controls .page.overflow::after {
    display: block;
}

/* Links: always black + underline, even on print/PDF */
a,
a:link,
a:visited,
a:hover,
a:active {
    color: #000 !important;
    text-decoration: underline !important;
}

/* Floating margin control */
.controls {
    position: fixed;
    top: 16px;
    right: 16px;
    z-index: 1000;
    background: #ffffff;
    border: 1px solid #c8c8c8;
    border-radius: 8px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18);
    padding: 12px 14px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: 12px;
    color: #222;
    min-width: 220px;
    user-select: none;
}

.controls header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
    cursor: move;
}

.controls h4 {
    margin: 0;
    font-size: 12px;
    font-weight: 600;
}

.controls .row-ctrl {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 6px;
}

.controls input[type="range"] {
    flex: 1;
}

.controls input[type="number"] {
    width: 56px;
    padding: 2px 4px;
    font-size: 12px;
}

.controls button {
    background: #f3f3f3;
    border: 1px solid #c8c8c8;
    border-radius: 4px;
    padding: 4px 8px;
    cursor: pointer;
    font-size: 11px;
}

.controls button:hover {
    background: #e7e7e7;
}

.controls .actions {
    display: flex;
    gap: 6px;
    margin-top: 8px;
}

@media print {
    body {
        background: #fff;
    }

    .page {
        margin: 0;
        box-shadow: none;
        width: 210mm;
        min-height: 297mm;
    }

    .controls {
        display: none !important;
    }
}

.header {
    text-align: center;
    margin-bottom: 6pt;
}

.header .name {
    margin: 0 0 2pt 0;
}

.section-title {
    font-weight: bold;
    border-bottom: 1px solid #000;
    padding-bottom: 2pt;
    margin-top: 10pt;
    margin-bottom: 4pt;
    letter-spacing: 0.2pt;
}

.row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
}

.row .left {
    font-weight: bold;
}

.row .right {
    white-space: nowrap;
}

ul {
    margin: 2pt 0 4pt 0;
    padding-left: 18pt;
}

ul li {
    margin: 1pt 0;
    text-align: justify;
}

.sub-heading {
    font-weight: bold;
    margin-top: 4pt;
}

.underline-name {
    text-decoration: underline;
}

p {
    margin: 2pt 0;
}