/* ── LotN Character Sheet – Frontend Sheet Styles ───────────────────────── */

/* Variables */
:root {
    --lotn-red:       #8b0000;
    --lotn-red-light: #c0392b;
    --lotn-dark:      #1a1a1a;
    --lotn-mid:       #444;
    --lotn-light:     #f8f5f0;
    --lotn-border:    #c9b99a;
    --lotn-dot-empty: #ccc;
    --lotn-dot-full:  #8b0000;
    --lotn-font-body: 'Georgia', serif;
    --lotn-font-head: 'Georgia', serif;
}

/* ── Wrapper ─────────────────────────────────────────────────────────────── */
.lotn-sheet-wrap {
    max-width: 900px;
    margin: 0 auto;
    padding: 16px;
    font-family: var(--lotn-font-body);
    font-size: 13px;
    color: var(--lotn-dark);
    background: #fff;
}

/* ── Notice ──────────────────────────────────────────────────────────────── */
.lotn-notice { padding: 10px 14px; border-radius: 4px; margin-bottom: 16px; font-size: 13px; }
.lotn-notice-warning { background: #fff3cd; border: 1px solid #ffc107; color: #856404; }

/* ── XP Banner ───────────────────────────────────────────────────────────── */
.lotn-xp-banner {
    display: flex; align-items: center; gap: 16px;
    background: var(--lotn-red); color: #fff;
    padding: 8px 14px; border-radius: 4px; margin-bottom: 16px;
    font-size: 13px;
}
.lotn-xp-banner strong { font-size: 16px; }
.lotn-xp-banner .lotn-btn-sm { margin-left: auto; font-size: 11px; padding: 3px 10px; }

/* ── Header ──────────────────────────────────────────────────────────────── */
.lotn-header {
    display: flex; align-items: flex-start; gap: 20px;
    border-bottom: 3px solid var(--lotn-red);
    padding-bottom: 12px; margin-bottom: 16px;
}
.lotn-title-block { text-align: center; line-height: 1; min-width: 100px; }
.lotn-laws   { font-size: 28px; font-weight: 900; color: var(--lotn-red); letter-spacing: -1px; }
.lotn-of-the { font-size: 11px; text-transform: uppercase; letter-spacing: 2px; color: var(--lotn-mid); }
.lotn-night  { font-size: 36px; font-weight: 900; color: var(--lotn-red); letter-spacing: -2px; }
.lotn-ident-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 4px 16px; flex: 1; font-size: 12px; }
.lotn-label  { font-weight: 700; text-transform: uppercase; font-size: 10px; letter-spacing: .5px; color: var(--lotn-mid); }

/* ── Pages ───────────────────────────────────────────────────────────────── */
.lotn-page { margin-bottom: 32px; }

/* ── Sections ────────────────────────────────────────────────────────────── */
.lotn-section { margin-bottom: 16px; }
.lotn-section-title {
    font-size: 14px; font-weight: 900; text-transform: uppercase;
    letter-spacing: 2px; text-align: center;
    border-top: 1px solid var(--lotn-border);
    border-bottom: 1px solid var(--lotn-border);
    padding: 4px 0; margin: 0 0 8px;
    color: var(--lotn-dark);
}
.lotn-rule-hint { font-size: 10px; text-align: center; color: #888; margin: 0 0 8px; font-style: italic; }

/* ── Three / two column grids ────────────────────────────────────────────── */
.lotn-three-col { display: grid; grid-template-columns: repeat(3,1fr); gap: 0 20px; }
.lotn-two-col   { display: grid; grid-template-columns: repeat(2,1fr); gap: 0 24px; }
.lotn-three-col h3,
.lotn-two-col h3 {
    font-size: 11px; text-transform: uppercase; letter-spacing: 1px;
    text-align: center; border-bottom: 1px solid var(--lotn-border);
    margin: 0 0 6px; padding-bottom: 2px;
}

/* ── Stat rows ───────────────────────────────────────────────────────────── */
.lotn-stat-row {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 4px; padding: 2px 4px; border-radius: 3px;
}
.lotn-stat-name {
    font-size: 12px;
    flex: 1;
    overflow: hidden;
    min-width: 0;
    container-type: inline-size;
}
.lotn-stat-detail {
    font-size: 8px;
    font-weight: 400;
    color: #666;
    display: inline-block;
    vertical-align: middle;
    max-width: 90px;
    overflow: hidden;
    white-space: nowrap;
    /* Shrink text to fit within the available space */
    font-size: clamp(5px, 1.5cqw, 8px);
}

/* ── Backgrounds + Advantages unified table ──────────────────────────────── */
.lotn-p2-bg-table { margin-bottom: 10px; width: 100%; }
.lotn-p2-bg-table-header {
    display: grid;
    grid-template-columns: 1fr 1fr;
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    text-align: center;
    padding-bottom: 3px;
    border-bottom: 1px solid var(--lotn-dark);
    margin-bottom: 2px;
    color: var(--lotn-red);
}
.lotn-p2-bg-table-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 8px;
    min-height: 14px;
}
.lotn-p2-bg-cell,
.lotn-p2-adv-cell {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 1px 0;
    min-height: 14px;
}
/* ── CSS pip dots — render correctly in all print/PDF engines ── */
.lotn-pip-row   { display: inline-flex; align-items: center; gap: 3px; vertical-align: middle; }
.lotn-pip       { display: inline-block; width: 10px; height: 10px; border-radius: 50%;
                  border: 1.5px solid var(--lotn-dot-empty); background: transparent;
                  -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.lotn-pip.lotn-pip-filled
                { background: var(--lotn-dot-full); border-color: var(--lotn-dot-full);
                  -webkit-print-color-adjust: exact; print-color-adjust: exact; }
/* Square pips for health/willpower boxes */
.lotn-pip-sq.lotn-dmg-surf { border-color: #333 !important; color: #333; display: inline-flex !important; align-items: center; justify-content: center; font-size: 9px; font-weight: bold; }
.lotn-pip-sq.lotn-dmg-surf::after { content: '\\'; }
.lotn-pip-sq.lotn-dmg-agg  { border-color: #8b0000 !important; color: #8b0000; display: inline-flex !important; align-items: center; justify-content: center; font-size: 9px; font-weight: bold; }
.lotn-pip-sq.lotn-dmg-agg::after  { content: 'X'; }
.lotn-edit-damage-track span:hover { border-color: #8b0000 !important; }

.lotn-pip-sq    { display: inline-block; width: 11px; height: 11px; border-radius: 2px;
                  border: 1.5px solid #888; background: transparent;
                  -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.lotn-pip-sq.lotn-pip-sq-filled
                { background: var(--lotn-red); border-color: var(--lotn-red);
                  -webkit-print-color-adjust: exact; print-color-adjust: exact; }
/* Legacy .dot support for any templates not yet migrated */
.dot { font-size: 14px; color: var(--lotn-dot-empty); line-height: 1; }
.dot.filled { color: var(--lotn-dot-full); }

/* XP-spendable rows show a subtle indicator on hover */
.lotn-xp-spendable { cursor: pointer; }
.lotn-xp-spendable:hover {
    background: #fff8e1;
    outline: 1px dashed var(--lotn-red);
}

/* ── Text sections ───────────────────────────────────────────────────────── */
.lotn-text-sections { margin: 12px 0; }
.lotn-text-sections h3 { font-size: 10px; text-transform: uppercase; letter-spacing: 1px; margin: 0 0 4px; }
.lotn-text-sections p  { font-size: 11px; color: var(--lotn-mid); margin: 0; min-height: 36px; }

/* ── Disciplines ─────────────────────────────────────────────────────────── */
.lotn-disciplines-trackers { display: grid; grid-template-columns: 1fr 220px; gap: 20px; margin-top: 12px; }
.lotn-disciplines h2 { margin-bottom: 6px; }
.lotn-disc-block { margin-bottom: 10px; padding: 6px 8px; border: 1px solid #e8e0d0; border-radius: 4px; }
.lotn-disc-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; }
.lotn-disc-name   { font-size: 12px; font-weight: 700; }
.lotn-disc-powers { list-style: none; margin: 0; padding: 0 0 0 8px; }
.lotn-disc-powers li { font-size: 11px; color: var(--lotn-mid); margin-bottom: 2px; }
.lotn-disc-powers li::before { content: '· '; color: var(--lotn-red); }

/* ── Trackers ────────────────────────────────────────────────────────────── */
.lotn-trackers { }
.lotn-tracker-block { margin-bottom: 10px; }
.lotn-tracker-block h3 { font-size: 11px; text-transform: uppercase; letter-spacing: .5px; margin: 0 0 4px; }
.lotn-tracker-block h3 small { font-size: 9px; color: #888; text-transform: none; letter-spacing: 0; }
.lotn-tracker-sublabel { font-size: 9px; color: #888; text-transform: none; letter-spacing: 0; font-weight: 400; }
.health-box, .will-box {
    display: inline-flex; align-items: center; justify-content: center;
    width: 14px; height: 14px; border: 1px solid #888;
    margin: 1px; font-size: 10px; line-height: 1; box-sizing: border-box;
    font-weight: bold;
}
.health-box.surf, .will-box.surf  { border-color: #333; color: #333; }
.health-box.surf::after, .will-box.surf::after { content: '\\'; }
.health-box.agg,  .will-box.agg   { border-color: var(--lotn-red); color: var(--lotn-red); }
.health-box.agg::after, .will-box.agg::after   { content: 'X'; }

.lotn-stain-filled { border-color: #8b0000 !important; color: #8b0000; display: inline-flex !important; align-items: center; justify-content: center; font-size: 9px; font-weight: bold; }
.lotn-stain-filled::after { content: '\\'; }

.lotn-derived-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 8px; margin-top: 8px; font-size: 11px; }
.lotn-derived-grid .lotn-label { font-size: 9px; }

/* ── Hunger reference ────────────────────────────────────────────────────── */
.lotn-hunger-ref { border: 1px solid var(--lotn-border); padding: 8px; border-radius: 4px; background: #fafaf8; }
.lotn-hunger-ref h3 { font-size: 11px; text-transform: uppercase; margin: 0 0 6px; }
.lotn-hunger-rules { list-style: none; margin: 0; padding: 0; }
.lotn-hunger-rules li { font-size: 11px; margin-bottom: 4px; color: var(--lotn-mid); }

/* ── City status ─────────────────────────────────────────────────────────── */
.lotn-status-row { font-size: 12px; margin-bottom: 3px; }

/* ── Conditions ──────────────────────────────────────────────────────────── */
.lotn-conditions p { font-size: 11px; margin: 2px 0; color: var(--lotn-mid); }
.lotn-conditions strong { color: var(--lotn-dark); }

/* ── Biography / Notes ───────────────────────────────────────────────────── */
.lotn-biography, .lotn-other-notes { margin-top: 12px; font-size: 12px; line-height: 1.6; }
.lotn-biography p, .lotn-other-notes p { margin: 4px 0; }

/* ── XP section ──────────────────────────────────────────────────────────── */
.lotn-xp-section { border-top: 1px solid var(--lotn-border); margin-top: 16px; padding-top: 8px; font-size: 12px; }

/* ── XP Log Overlay ──────────────────────────────────────────────────────── */
#lotn-xp-log-overlay {
    position: fixed; inset: 0; background: rgba(0,0,0,.5);
    z-index: 9999; display: flex; align-items: center; justify-content: center;
}
.lotn-xp-log-panel {
    background: #fff; border-radius: 6px; padding: 20px;
    width: min(700px, 95vw); max-height: 80vh; overflow-y: auto;
    box-shadow: 0 8px 40px rgba(0,0,0,.3);
}
.lotn-xp-log-panel h3 { margin: 0 0 12px; display: flex; justify-content: space-between; align-items: center; }
.lotn-xp-log-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.lotn-xp-log-table th { background: var(--lotn-red); color: #fff; padding: 6px 8px; text-align: left; }
.lotn-xp-log-table td { padding: 5px 8px; border-bottom: 1px solid #eee; vertical-align: top; }
.lotn-xp-log-table tr:hover td { background: #fafafa; }

/* ── XP Spend Modal ──────────────────────────────────────────────────────── */
#lotn-xp-spend-modal {
    position: fixed; inset: 0; background: rgba(0,0,0,.5);
    z-index: 9999; display: flex; align-items: center; justify-content: center;
}
.lotn-modal-panel {
    background: #fff; border-radius: 6px; padding: 24px;
    width: min(420px, 95vw); box-shadow: 0 8px 40px rgba(0,0,0,.3);
}
.lotn-modal-panel h3   { margin: 0 0 12px; display: flex; justify-content: space-between; align-items: center; }
.lotn-modal-panel label{ display: flex; flex-direction: column; gap: 4px; font-size: 13px; margin-top: 10px; }
.lotn-modal-panel input{ padding: 6px 8px; border: 1px solid #ccc; border-radius: 3px; font-size: 13px; }
.lotn-modal-actions    { display: flex; gap: 10px; margin-top: 16px; }

/* ── Buttons ─────────────────────────────────────────────────────────────── */
.lotn-btn {
    padding: 7px 16px; border: 1px solid #888; background: #f5f5f5;
    border-radius: 4px; cursor: pointer; font-size: 13px;
    font-family: var(--lotn-font-body);
}
.lotn-btn:hover { background: #e8e8e8; }
.lotn-btn-primary { background: var(--lotn-red); color: #fff; border-color: var(--lotn-red); }
.lotn-btn-primary:hover { background: var(--lotn-red-light); }
.lotn-btn-close { background: none; border: none; font-size: 20px; cursor: pointer; line-height: 1; color: #888; }
.lotn-btn-close:hover { color: var(--lotn-red); }
.lotn-btn-sm { padding: 4px 10px; font-size: 11px; }

/* ── Print bar ───────────────────────────────────────────────────────────── */
.lotn-print-bar { text-align: center; margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--lotn-border); }

/* ── Print styles ────────────────────────────────────────────────────────── */
@media print {
    .no-print, .lotn-xp-banner, .lotn-print-bar, #lotn-xp-log-overlay, #lotn-xp-spend-modal { display: none !important; }
    .lotn-sheet-wrap { max-width: 100%; padding: 0; }
    .lotn-page { page-break-after: always; }
    .lotn-page:last-child { page-break-after: avoid; }
    .lotn-xp-spendable:hover { background: none; outline: none; cursor: default; }
    .dot, .health-box, .will-box { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* ── Mobile ──────────────────────────────────────────────────────────────── */
@media (max-width: 600px) {
    .lotn-three-col { grid-template-columns: 1fr; }
    .lotn-two-col   { grid-template-columns: 1fr; }
    .lotn-disciplines-trackers { grid-template-columns: 1fr; }
    .lotn-header    { flex-direction: column; }
    .lotn-ident-grid{ grid-template-columns: 1fr 1fr; }
    .lotn-title-block { display: none; } /* hide big logo on mobile, keep data */
    .lotn-derived-grid { grid-template-columns: 1fr; }

    /* Stack stat rows nicely on small screens */
    .lotn-stat-row  { padding: 5px 8px; background: #faf8f5; border-bottom: 1px solid #eee; border-radius: 0; margin: 0; }
    .lotn-stat-name { font-size: 13px; }
    .dot            { font-size: 18px; }

    /* Larger touch targets for XP-spendable rows on mobile */
    .lotn-xp-spendable { padding: 8px; }
}

/* ── Background groups (linked advantages/disadvantages) ─────────────────── */
.lotn-bg-group {
    border: 1px solid var(--lotn-border);
    border-radius: 3px;
    margin-bottom: 6px;
    overflow: hidden;
}
.lotn-bg-row {
    background: #f0e8d8;
    padding: 3px 6px;
    font-weight: 600;
}
.lotn-bg-name { font-weight: 700; }
.lotn-bg-adv-row {
    padding: 2px 6px 2px 16px;
    border-top: 1px solid #ede4d0;
    font-size: 11px;
}
.lotn-bg-adv-row:last-child { border-bottom: none; }
.lotn-bg-adv-name { display: flex; align-items: center; gap: 5px; }
.lotn-adv-type-label {
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .5px;
    padding: 1px 5px;
    border-radius: 3px;
    white-space: nowrap;
}
.lotn-adv-label  { background: #d4edda; color: #155724; }
.lotn-dis-label  { background: #f8d7da; color: #721c24; }

/* Print: keep each background group together */
@media print {
    .lotn-bg-group { page-break-inside: avoid; }
}

/* ── Linked Background blocks ────────────────────────────────────────────── */
.lotn-bg-block {
    border-left: 2px solid var(--lotn-border);
    margin-bottom: 6px;
    padding-left: 4px;
}
.lotn-bg-main .lotn-stat-name { font-weight: 700; }
.lotn-bg-adv  { margin-bottom: 2px; }

/* ── Print pagination ────────────────────────────────────────────────────── */
@media print {
    /* Each discipline block should not be split across pages */
    .lotn-disc-block { page-break-inside: avoid; }

    /* Each background block should not be split across pages */
    .lotn-bg-block { page-break-inside: avoid; }

    /* Force disciplines section to its own page if it contains many entries */
    .lotn-disciplines-trackers { page-break-before: auto; }

    /* When backgrounds overflow, the section flows to a new page */
    .lotn-page-2 .lotn-two-col > div:first-child { page-break-inside: auto; }

    /* Section titles never orphaned at bottom of page */
    .lotn-section-title { page-break-after: avoid; }
    h3 { page-break-after: avoid; }
}

/* ══════════════════════════════════════════════════════════════════════════
   DISCIPLINE BOXES — two-column named box layout matching official sheet
   ══════════════════════════════════════════════════════════════════════════ */

.lotn-disc-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.lotn-disc-box {
    border: 1px solid var(--lotn-border);
    border-radius: 3px;
    padding: 0;
    page-break-inside: avoid;
    break-inside: avoid;
}

.lotn-disc-box-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 4px 6px;
    background: #f5f0e8;
    border-bottom: 1px solid var(--lotn-border);
}

.lotn-disc-box-name {
    font-size: 11px;
    font-weight: 700;
    flex: 1;
}

.lotn-disc-box-empty .lotn-disc-box-header {
    background: #fafaf8;
}

.lotn-disc-power-row {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 1px 6px;
    border-bottom: 1px solid #f0ebe0;
    min-height: 16px;
}

.lotn-disc-pnum {
    font-size: 9px;
    color: var(--lotn-mid);
    min-width: 10px;
    flex-shrink: 0;
}

.lotn-disc-pname {
    font-size: 10px;
    color: var(--lotn-dark);
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ══════════════════════════════════════════════════════════════════════════
   BACKGROUND / ADVANTAGE TABLE — bordered two-column layout
   ══════════════════════════════════════════════════════════════════════════ */

.lotn-bg-table-wrap {
    border: 1px solid var(--lotn-border);
    border-radius: 3px;
    overflow: hidden;
    margin-bottom: 10px;
}

.lotn-bg-table-headers {
    display: grid;
    grid-template-columns: 1fr 1fr;
    background: #1a1a1a;
    color: #fff;
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.lotn-bg-table-headers span {
    padding: 4px 8px;
    text-align: center;
    border-right: 1px solid #444;
}

.lotn-bg-table-headers span:last-child { border-right: none; }

.lotn-bg-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    border-bottom: 1px solid var(--lotn-border);
    page-break-inside: avoid;
    break-inside: avoid;
}

.lotn-bg-row:last-child { border-bottom: none; }

.lotn-bg-cell {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 3px 8px;
    min-height: 20px;
    font-size: 11px;
}

.lotn-bg-left {
    border-right: 1px solid var(--lotn-border);
    background: #fafaf8;
}

.lotn-bg-right {
    background: #fff;
}

.lotn-bg-adv  { background: #f0fff0; }
.lotn-bg-dis  { background: #fff5f5; }

.lotn-bg-cell-name {
    flex: 1;
    font-size: 11px;
}

.lotn-bg-cell-dots { flex-shrink: 0; }

/* ══════════════════════════════════════════════════════════════════════════
   PAGE 2 LAYOUT
   ══════════════════════════════════════════════════════════════════════════ */

.lotn-p2-layout {
    display: grid;
    grid-template-columns: 3fr 1fr;
    gap: 16px;
    align-items: start;
}

.lotn-p2-right { font-size: 11px; }

/* Blank stat rows (padding) */
.lotn-stat-row-blank { opacity: 0.3; }

/* ══════════════════════════════════════════════════════════════════════════
   TRACK BOXES (health/willpower)
   ══════════════════════════════════════════════════════════════════════════ */
.lotn-track-boxes { display: flex; flex-wrap: wrap; gap: 2px; margin: 2px 0; }

/* ══════════════════════════════════════════════════════════════════════════
   OVERFLOW PAGE
   ══════════════════════════════════════════════════════════════════════════ */
.lotn-page-overflow {
    margin-top: 32px;
}

/* ══════════════════════════════════════════════════════════════════════════
   PRINT — page breaks and colour preservation
   ══════════════════════════════════════════════════════════════════════════ */
@media print {
    @page { margin: 10mm; size: letter portrait; }

    .lotn-page-1         { page-break-after: always; break-after: page; }
    .lotn-page-2         { page-break-after: always; break-after: page; }
    .lotn-page-overflow  { page-break-before: always; break-before: page; }

    .lotn-disc-box       { page-break-inside: avoid; break-inside: avoid; }
    .lotn-bg-row         { page-break-inside: avoid; break-inside: avoid; }
    .lotn-section-title  { page-break-after:  avoid; break-after:  avoid; }
    h3                   { page-break-after:  avoid; break-after:  avoid; }

    .lotn-bg-adv  { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
    .lotn-bg-dis  { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
    .health-box.agg, .will-box.agg { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
    .dot.filled   { -webkit-print-color-adjust: exact; print-color-adjust: exact; }

    .lotn-p2-layout { grid-template-columns: 3fr 1fr; }
}

@media (max-width: 600px) {
    .lotn-disc-grid   { grid-template-columns: 1fr; }
    .lotn-p2-layout   { grid-template-columns: 1fr; }
    .lotn-bg-table-headers,
    .lotn-bg-row      { grid-template-columns: 1fr; }
    .lotn-bg-left     { border-right: none; border-bottom: 1px solid var(--lotn-border); }
}

/* ── Page 2 layout ───────────────────────────────────────────────────────── */
.lotn-p2-layout {
    display: grid;
    grid-template-columns: 3fr 1fr;
    gap: 14px;
    align-items: start;
}
.lotn-p2-left  { min-width: 0; }
.lotn-p2-right { font-size: 11px; }

/* Merits/Flaws side by side below backgrounds */
.lotn-p2-mf {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 12px;
    margin-top: 10px;
}

/* RCF below merits/flaws */
.lotn-p2-rcf { margin-top: 10px; }
.lotn-p2-rcf .lotn-stat-row { margin-bottom: 2px; }

/* ── Status grid ─────────────────────────────────────────────────────────── */
.lotn-status-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2px 8px;
    font-size: 11px;
    margin-top: 4px;
}

/* ── Overflow page headers ───────────────────────────────────────────────── */
.lotn-overflow-header {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--lotn-red);
    border-bottom: 2px solid var(--lotn-red);
    padding-bottom: 4px;
    margin-bottom: 10px;
}

/* ── Wide disc grid (overflow page uses full width) ─────────────────────── */
.lotn-disc-grid-wide {
    grid-template-columns: 1fr 1fr;
}

/* ── Two-column background layout (overflow page) ───────────────────────── */
.lotn-bg-two-col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    align-items: start;
}
.lotn-bg-two-col .lotn-bg-table-wrap { width: 100%; }
/* removed old bg-two-col rules */

/* ── Print page breaks ───────────────────────────────────────────────────── */
@media print {
    @page { margin: 10mm; size: letter portrait; }
    .lotn-page-1         { page-break-after: always; break-after: page; }
    .lotn-page-2         { page-break-after: always; break-after: page; }
    .lotn-page-disc-over { page-break-after: always; break-after: page; }
    .lotn-page-bg-over   { page-break-before: auto;  break-before: auto; }
    .lotn-page-overflow  { page-break-before: always; break-before: page; }

    .lotn-disc-box, .lotn-bg-row, .lotn-stat-row { page-break-inside: avoid; break-inside: avoid; }
    .lotn-section-title, h3 { page-break-after: avoid; break-after: avoid; }

    .lotn-p2-layout         { grid-template-columns: 3fr 1fr; }
    .lotn-bg-two-col        { grid-template-columns: 1fr 1fr; }
    .lotn-p2-mf             { grid-template-columns: 1fr 1fr; }
    .lotn-p2-bg-table-header{ display: grid !important; grid-template-columns: 1fr 1fr !important; }
    .lotn-p2-bg-table-row   { display: grid !important; grid-template-columns: 1fr 1fr !important; }
    .lotn-p2-ls             { display: grid !important; grid-template-columns: 1fr 1fr !important; }

    .lotn-bg-adv, .lotn-bg-dis,
    .health-box.agg, .will-box.agg,
    .dot.filled,
    .lotn-bg-table-headers { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

@media (max-width: 600px) {
    .lotn-p2-layout     { grid-template-columns: 1fr; }
    .lotn-bg-two-col    { grid-template-columns: 1fr; }
    .lotn-disc-grid,
    .lotn-disc-grid-wide{ grid-template-columns: 1fr; }
    .lotn-p2-mf         { grid-template-columns: 1fr; }
}

/* ── Ref boxes — City Status & Conditions (same style as Hunger box) ─────── */
.lotn-ref-box {
    border: 1px solid var(--lotn-border);
    padding: 8px;
    border-radius: 4px;
    background: #fafaf8;
}
.lotn-ref-box h3 {
    font-size: 11px;
    text-transform: uppercase;
    margin: 0 0 6px;
    font-weight: 700;
}

/* ── Chronicle Tenets & Touchstones list ─────────────────────────────────── */
.lotn-tenet-list {
    margin: 4px 0 0 14px;
    padding: 0;
    font-size: 9px;
    line-height: 1.6;
}
.lotn-tenet-list li {
    margin-bottom: 2px;
    word-break: break-word;
}

/* ── Merit/Flaw detail sub-label ─────────────────────────────────────────── */
.lotn-stat-detail {
    font-size: 8px;
    font-weight: 400;
    color: #666;
}



/* ── Loresheet blocks ────────────────────────────────────────────────────── */
.lotn-p2-ls {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 12px;
    margin-bottom: 10px;
}
.lotn-ls-block {
    border-top: 1px solid var(--lotn-border);
    padding-top: 4px;
}
.lotn-ls-block-header {
    display: flex;
    justify-content: space-between;
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 3px;
    color: var(--lotn-dark);
}

/* ── Loresheet form widgets ──────────────────────────────────────────────── */
.lotn-ls-dot-rows {
    display: flex;
    flex-direction: column;
    gap: 0;
}
.lotn-ls-dot-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 4px 0;
    border-bottom: 1px dotted #e8d99a;
    min-height: 26px;
    gap: 8px;
}
.lotn-ls-dot-name {
    flex: 1;
    color: #444;
    font-size: 12px;
    font-style: italic;
}
.lotn-ls-dot input[type="checkbox"],
.lotn-ls-dot-row input[type="checkbox"] {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    cursor: pointer;
    accent-color: var(--lotn-red);
}