/* The generator is screen UI; .bj-sheet is the only printed content. */
.bird-watching-journal-template-page { --bird-ink: #365d43; --tool-peek-bg: #365d43; }
.bj-container { max-width: 820px; margin: auto; padding: 64px 24px; }
.bj-title { font-size: clamp(2rem, 5vw, 3.25rem); line-height: 1.12; text-wrap: balance; margin: 0 0 20px; }
.bj-lede { font-size: 1.1rem; line-height: 1.7; max-width: 690px; margin-bottom: 30px; text-wrap: pretty; }
.bj-form { display: grid; gap: 24px; padding-block: 12px 24px; }
.bj-field { border: 0; padding: 0; margin: 0; min-width: 0; }
.bj-field legend { font-weight: 700; margin-bottom: 12px; }
.bj-options { display: flex; flex-wrap: wrap; gap: 10px; }
.bj-options input { position: absolute; opacity: 0; }
.bj-options label { display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 10px 16px; border-radius: 12px; background: #fff; box-shadow: 0 1px 4px rgb(0 0 0 / .08); cursor: pointer; }
.bj-options input:checked + label { background: var(--bird-ink); color: #fff; }
.bj-options input:focus-visible + label { outline: 2px solid var(--bird-ink); outline-offset: 3px; }
.bj-details { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.bj-detail { display: grid; gap: 7px; min-width: 0; }
.bj-detail label { font-size: .85rem; }
.bj-detail input { box-sizing: border-box; width: 100%; min-width: 0; min-height: 44px; padding: 10px 12px; border: 1px solid #ccc; border-radius: 10px; background: #fff; color: #222; font: inherit; }
.bj-detail:first-child { grid-column: 1 / -1; }
.bj-detail input:focus-visible { outline: 2px solid var(--bird-ink); outline-offset: 2px; }
.bird-watching-journal-template-page .tk-app .tk-q .bj-detail label::before { content: none !important; counter-increment: none; }
.bird-watching-journal-template-page .tk-app .tk-q .bj-detail input[type="date"] { min-height: 52px; border: 2px solid var(--tk-line); border-radius: 14px; }
.bj-result-label { text-transform: uppercase; font-size: .75rem; letter-spacing: .1em; }
.bj-result-headline { font-size: 1.8rem; font-weight: 700; margin: 8px 0 12px; }
.bj-result-body { line-height: 1.6; }
.bj-print-actions { display: flex; gap: 18px; align-items: center; margin: 20px 0 28px; }
.bj-print-actions button { flex-shrink: 0; min-height: 48px; padding: 12px 20px; border: 0; border-radius: 14px; background: var(--bird-ink); color: #fff; font: inherit; font-weight: 700; cursor: pointer; transition: transform .15s ease; }
.bj-print-actions button:active { transform: scale(.96); }
.bj-print-actions button:focus-visible { outline: 2px solid var(--bird-ink); outline-offset: 3px; }
.bj-print-actions p { font-size: .8rem; line-height: 1.5; margin: 0; }
.bj-sheet { --sheet-content: 870px; box-sizing: border-box; padding: 28px; background: #fff; color: #222; border: 1px solid #ddd; box-shadow: 0 8px 24px rgb(0 0 0 / .06); font-variant-numeric: tabular-nums; }
.bj-sheet[data-paper="letter"] { --sheet-content: 790px; }
.bj-sheet h2 { font: 700 clamp(1.15rem, 3vw, 1.9rem)/1.25 var(--font-ui); overflow-wrap: anywhere; margin: 6px 0 18px; }
.bj-sheet .bj-sheet-kicker { font-size: .65rem; letter-spacing: .12em; margin: 0; }
.bj-sheet-meta { display: grid; grid-template-columns: 2fr 1fr; gap: 8px 16px; margin-bottom: 24px; }
.bj-sheet-meta .bj-write:first-child { grid-column: 1 / -1; }
.bj-sheet .bj-write { display: flex; align-items: baseline; gap: 9px; margin: 0; font-size: .72rem; min-width: 0; }
.bj-write span { flex-shrink: 0; }
.bj-write b { font-weight: 400; min-width: 0; flex: 1; min-height: 1.6em; border-bottom: 1px solid #aaa; overflow-wrap: anywhere; }
.bj-sheet-content { min-height: var(--sheet-content); display: flex; flex-direction: column; gap: 22px; }
body.page-sketch .bj-entry, .bj-entry { display: flex; flex: 1; flex-direction: column; margin: 0; padding: 0; background: #fff; border: 1px solid #aaa; }
.bj-entry-head { display: grid; grid-template-columns: auto 1.4fr 1fr; gap: 14px; align-items: baseline; padding: 14px; border-bottom: 1px solid #aaa; }
.bj-entry-head > span { font-size: .7rem; font-weight: 700; }
.bj-entry-body { display: grid; grid-template-columns: 1fr 1fr; flex: 1; }
.bj-sketch-space { padding: 12px; border-right: 1px solid #aaa; }
.bj-sketch-space span { color: #666; font-size: .65rem; }
.bj-notes-space { display: grid; grid-template-rows: repeat(4, 1fr); padding: 12px; }
.bj-notes-space .bj-write { display: block; }
.bj-notes-space .bj-write b { display: block; margin-top: 8px; min-height: 2em; }
.bj-sheet-sketch .bj-entry-body { grid-template-columns: 1fr; grid-template-rows: 2fr 1fr; }
.bj-sheet-sketch .bj-sketch-space { border-right: 0; border-bottom: 1px solid #aaa; }
.bj-sheet-sketch .bj-notes-space { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 16px; }
.bj-log { border-collapse: collapse; table-layout: fixed; width: 100%; flex: 1; }
.bj-log th, .bj-log td { border: 1px solid #aaa; padding: 10px; text-align: left; }
.bj-log th { font-size: .7rem; height: 30px; }
.bj-log th:nth-child(1) { width: 32%; }
.bj-log th:nth-child(2) { width: 12%; }
.bj-log th:nth-child(3) { width: 10%; }
.bj-sheet .bj-sheet-tip { font-size: .7rem; line-height: 1.5; margin: 0; }
.bj-sheet-footer { display: flex; justify-content: space-between; gap: 10px; border-top: 1px solid #aaa; padding-top: 12px; margin-top: 22px; font-size: .65rem; }
.bj-prose { margin-top: 44px; line-height: 1.8; }
.bj-prose h2 { margin-top: 30px; text-wrap: balance; }
@media (max-width: 600px) {
    .bj-container { padding: 40px 16px; }
    .bj-options { flex-direction: column; }
    .bj-options label { width: 100%; box-sizing: border-box; }
    .bj-details { grid-template-columns: 1fr; }
    .bj-print-actions { flex-direction: column; align-items: stretch; }
    .bj-sheet { padding: 12px; --sheet-content: 620px; }
    .bj-sheet[data-paper="letter"] { --sheet-content: 560px; }
    .bj-entry-head { grid-template-columns: auto 1fr; padding: 9px; gap: 8px; }
    .bj-entry-head .bj-write:last-child { grid-column: 2; }
    .bj-entry-body { grid-template-columns: 1fr; grid-template-rows: 1fr 1.3fr; }
    .bj-sketch-space { border-right: 0; border-bottom: 1px solid #aaa; }
    .bj-sheet-sketch .bj-notes-space { grid-template-columns: 1fr; grid-template-rows: repeat(4, 1fr); gap: 8px; }
    .bj-log th, .bj-log td { padding: 4px; }
    .bj-log th { font-size: .58rem; overflow-wrap: anywhere; }
    .bj-sheet-footer { font-size: .55rem; }
}
@media print {
    html, body { margin: 0 !important; padding: 0 !important; background: #fff !important; }
    body.bird-watching-journal-template-page > :not(main), main > :not(.bj-container),
    .bj-container > :not(.bird-journal), .bird-journal .tk-app > :not(.tk-r),
    .bird-journal .tk-r > :not(.bj-result), .bj-result > :not(.bj-sheet) { display: none !important; }
    main, .bj-container, .bird-journal, .bird-journal .tk-app, .bird-journal .tk-r, .bj-result { display: block !important; position: static !important; margin: 0 !important; padding: 0 !important; width: 100% !important; max-width: none !important; height: auto !important; max-height: none !important; overflow: visible !important; border: 0 !important; box-shadow: none !important; background: #fff !important; transform: none !important; opacity: 1 !important; }
    .bj-result *, .bj-result *::before, .bj-result *::after { animation: none !important; transition: none !important; opacity: 1 !important; transform: none !important; }
    /* Leave room for the printer's hardware margins and browser furniture.
       Filling the nominal @page area split Safari's footer onto a second page. */
    .bj-sheet { display: flex; flex-direction: column; height: 252mm; padding: 0; margin: 0; border: 0; box-shadow: none; font-family: Arial, sans-serif; break-inside: avoid; }
    .bj-sheet[data-paper="letter"] { height: 234mm; }
    .bj-sheet-content { min-height: 0; flex: 1; gap: 6mm; }
    .bj-sheet-head { flex-shrink: 0; }
    .bj-sheet h2 { font: 700 20pt/1.2 Arial, sans-serif; margin-bottom: 5mm; }
    .bj-sheet .bj-sheet-kicker, .bj-sheet .bj-write, .bj-sheet .bj-sheet-tip { font-family: Arial, sans-serif; font-size: 9pt; }
    .bj-sheet-meta { margin-bottom: 6mm; }
    .bj-sheet-footer { font-family: Arial, sans-serif; font-size: 8pt; margin-top: 5mm; padding-top: 3mm; }
}
@media (prefers-reduced-motion: reduce) { .bj-print-actions button { transition: none; } }