/* ============================================================
   QABOO YAA'II — visual identity: a plain white ruled notebook,
   written in blue pen. Pure white paper, pale-blue ruled lines,
   blue ink for every letter, Helvetica throughout. No leather,
   wood, or gold — white and blue are the only colors used for
   the notebook itself. A few small, deliberate exceptions are
   kept in a muted red purely as functional UI signals (delete /
   remove / clear / error) — never as decoration — and are called
   out at each spot below.
   ============================================================ */

:root {
    --paper:      #FFFFFF;   /* the page itself: pure white, always */
    --paper-dim:  #F3F7FC;   /* a whisper of blue-white, for hover/alt-row states only */
    --ink:        #17458F;   /* the "pen" — every letter on the page is this blue */
    --ink-soft:   #2E63AA;   /* lighter blue: hover states, secondary UI accents */
    --line-blue:  #BBD6F0;   /* the pale blue ruled line, like real notebook paper */
    --muted:      #74849B;   /* muted blue-gray, for secondary/quiet text only */
    --border-soft:#D9E6F6;   /* faint blue-gray hairline for table/card borders */

    /* Kept ONLY for functional delete/remove/clear/error signals —
       never used decoratively anywhere in the notebook itself. */
    --danger:     #B23A2E;
    --success:    #2E7D46;

    --shadow:     rgba(0, 0, 0, 0.18);   /* neutral, colorless — real depth, not a tint */

    --font-sans:    'Helvetica Neue', Helvetica, Arial, sans-serif;
    --font-display: var(--font-sans);
    --font-body:    var(--font-sans);

    --line-h: 28px;   /* one ruled notebook line — this is the TEXT grid.
       line-height everywhere on the page stays locked to this value, so
       every letter sits exactly where it always has. Nothing below ever
       changes this variable or what it's applied to. */
    /* the big heading line a real notebook has near the top of a page —
       double the height of a normal ruled line. The topbar brand and
       the meeting-title dropdown are both locked to this exact value
       so they read as the same kind of line. */
    --line-h-lg: calc(var(--line-h) * 2);

    /* --- Visual-only ruled-line pitch, separate from --line-h above ---
       These two variables control ONLY the spacing of the pale blue
       background rule pattern in two specific kinds of areas — never
       line-height, never font-size, never where a letter sits. Text
       positioning is 100% governed by --line-h (28px) everywhere on
       the page, exactly as before; these just repaint the background
       lines under two kinds of areas at a different pitch than that
       text grid, per an explicit request to make the lines themselves
       (not the letters) wider apart in these two spots. Because the
       pitch no longer equals --line-h in these areas, the background
       rule and the text baseline will not stay in perfect lockstep on
       every row the way they do under the default single 28px grid —
       that's the accepted, deliberate trade-off of using two pitches
       on one page instead of one. */
    --content-rule-h: 33px;  /* rule spacing in fields you type into: table cells, textareas, inputs */
    --heading-rule-h: 35px;  /* rule spacing behind the section headings (the uppercase topic titles) */
    --sig-line-h: 46px;      /* rule spacing for the signature table specifically (Maqaa/Mallattoo/Guyyaa rows) — kept separate from --content-rule-h so this one table's lines can be tuned on their own */

    /* How far EARLY the pale rule sits relative to the text row above it.
       Text itself never moves — its baseline stays exactly where the
       28px grid puts it. Instead, every ruled-background pattern on the
       page is nudged later by this amount, so the rule that used to sit
       right against the bottom of a line of text now sits a few pixels
       further down (inside the next 28px band, before that band's own
       text). The 28px pitch itself is untouched, so this can never drift
       multi-line textareas or the JS auto-grow math out of sync — only
       *where within each band* the visible rule falls changes.

       NEGATIVE on purpose: there is only one ruled line between any two
       lines of text — it's the "below" line for the text above it and
       the "above" line for the text below it, at the same time. A
       positive value here pushes that shared line DOWN, which makes
       the gap above each line of text small/tight and the gap below it
       large/loose. Real ruled notebook paper is the opposite: writing
       sits close to the line beneath it, with more headroom above (for
       ascenders and the line before). A negative value pushes every
       rule UP instead, which swaps that: gap-above becomes the roomy
       one and gap-below becomes the tight one — letters now sit down
       on the line beneath them, the way handwriting actually does. */
    --text-lift: -4px;
}

* { box-sizing: border-box; }

/* Browsers give input/textarea/select/button their OWN default font via
   the UA stylesheet's `font` shorthand — and setting `font` (even
   implicitly) always resets `line-height` back to `normal`, no matter
   what the parent specifies. Any form control that doesn't explicitly
   set its own line-height therefore silently falls back to browser-
   default metrics instead of the ruled-line grid, drifting a fraction
   of a pixel off --line-h at a time. This single rule is the actual
   fix: every form control always inherits the page's real typography,
   so no individual class can ever forget to re-declare it. */
input, textarea, select, button {
    font: inherit;
    line-height: inherit;
    margin: 0;
    color: inherit;
}

body {
    font-family: var(--font-body);
    font-size: 12pt;
    /* pure white surrounding page — nothing else behind the notebook */
    background: var(--paper);
    color: var(--ink);
    margin: 0;
    padding: 0;
    min-height: 100vh;
}

a { color: var(--ink-soft); }

/* ---------------- Topbar ---------------- */
.topbar {
    position: relative;
    background: var(--paper);
    color: var(--ink);
    padding: 16px 32px 14px 32px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-family: var(--font-display);
    border-bottom: 2px solid var(--line-blue);
    box-shadow: 0 2px 10px rgba(0,0,0,0.08);
}
.topbar .brand { display: flex; align-items: center; gap: 14px; }
/* the seal, org name, and hospital name used to be three stacked
   pieces (icon + two separate lines of text). They now read as one
   single large notebook heading line, sized to --line-h-lg — the
   same "big line" the meeting-title dropdown below sits on. */
.topbar .brand-text {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    column-gap: 10px;
    line-height: var(--line-h-lg);
}
.topbar .brand-text .en {
    font-size: 20pt;
    font-weight: 700;
    color: var(--ink);
}
.topbar .brand-text .sub {
    font-family: var(--font-body);
    font-size: 12pt;
    font-weight: 400;
    color: var(--muted);
}
.topbar .brand-text .sub::before {
    content: "\2014  "; /* em dash joining the two into one line */
}
.topbar nav a {
    color: var(--ink);
    text-decoration: none;
    text-transform: uppercase;
    margin-left: 22px;
    font-family: var(--font-body);
    font-size: 12pt;
    border-bottom: 1px solid transparent;
    padding-bottom: 2px;
}
.topbar nav a:hover { color: var(--ink-soft); border-bottom-color: var(--ink-soft); }

.seal {
    width: var(--line-h-lg); height: var(--line-h-lg);
    border-radius: 50%;
    border: 2px solid var(--ink);
    display: flex; align-items: center; justify-content: center;
    font-family: var(--font-display);
    font-weight: 700;
    color: var(--ink);
    font-size: 13pt;
    background: radial-gradient(circle at 35% 30%, rgba(23,69,143,0.08), transparent 70%);
    flex-shrink: 0;
    overflow: hidden;
}
.seal img {
    width: 100%; height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

/* ---------------- Flash messages ---------------- */
/* Success/danger/info keep their conventional colors — these are
   functional status signals, not part of the notebook's own theme. */
.alert {
    max-width: 850px;
    margin: 16px auto 0 auto;
    padding: 11px 18px;
    border-radius: 3px;
    font-family: var(--font-body);
    font-size: 11pt;
    border-left: 4px solid;
}
.alert-success { background: #eaf5e9; border-color: var(--success); color: #234c26; }
.alert-danger  { background: #fbeaea; border-color: var(--danger);  color: #6e2420; }
.alert-info    { background: #eaf1fb; border-color: var(--ink-soft); color: #1f3c58; }

/* ---------------- The ledger page ---------------- */
.page-sheet {
    position: relative;
    max-width: 850px;
    margin: 30px auto 50px auto;
    /* Plain white paper, nothing else. There used to be one global
       28px ruled-line pattern painted here that every field on the
       page relied on. Now that the content areas and section headings
       each paint their OWN local rule pattern (33px / 35px), keeping
       this old 28px pattern around too meant it was still showing
       through in every gap those local patterns don't cover — the
       decorative margin column on the left, the blank space between
       sections, etc. — at a pitch that no longer matches anything
       next to it. That mismatch is exactly what a person notices as
       "the lines don't line up." The fix is to not paint a page-wide
       grid at all any more: the page itself is blank white, and the
       ONLY ruled lines anywhere are the local 33px/35px ones inside
       the elements that declare them, so there is nothing left
       anywhere on the page for those to clash against. */
    background: var(--paper);
    /* a large top margin, like the blank header band on a real
       notebook page, before the ruled lines begin */
    padding: 110px 50px 46px 70px;
    box-shadow: 0 14px 34px var(--shadow), 0 2px 6px rgba(0,0,0,0.12);
    font-family: var(--font-body);
    /* Plain fallback line-height for any stray text on the page that
       isn't inside one of the local-pattern elements (there shouldn't
       normally be any, but this keeps such text on a sane grid rather
       than the browser default). Content areas and section headings
       both set their own line-height (33px / 35px) explicitly and are
       unaffected by this. */
    line-height: var(--line-h);
    border-radius: 2px;
}

/* the blue margin rule, standing in for the classic notebook margin
   column — no binding graphic, no leather, just a second blue line.
   The margin column itself (to the left of this rule) is now plain
   white, same as the rest of the page background above — no ruled
   lines of its own to potentially clash with the 33px/35px content
   lines beside it. */
.page-sheet::after {
    content: "";
    position: absolute;
    left: 46px; top: 0; bottom: 0;
    width: 2px;
    background: var(--line-blue);
}

.doc-title {
    text-align: center;
    margin-bottom: 0;
    font-family: var(--font-display);
}
/* The document title is one of the 8 full QABOO YAA'II meeting-type
   names, sized and wrapped like a heading sentence. line-height is
   locked to the ruled-line unit so every wrapped line of the title —
   however many it takes — lands on its own rule, and the rule/
   underline below is sized so the whole title block always ends a
   whole number of ruled lines down from where it started. */
.doc-title h1 {
    font-family: var(--font-display);
    font-size: 20pt;
    font-weight: 700;
    line-height: var(--line-h);
    color: var(--ink);
    margin: 0 auto;
    max-width: 92%;
}
.doc-title .rule {
    width: 120px;
    height: 2px;
    background: var(--ink-soft);
    margin: 13px auto;
    border-radius: 2px;
}

/* The control that picks the meeting type / document title. This is
   a custom listbox, not a native <select> — every browser renders a
   select's closed box as a single, non-wrapping line, which was
   cutting the longer meeting-type names off flush against the page
   edge instead of wrapping like a real heading. Styled to read as
   exactly the same bold heading the print-only <h1> below mirrors:
   same font size/weight, same centered multi-line wrapping, so the
   edit view and the read-only view show literally the same heading
   block instead of two different-looking things. */
.doc-title-field {
    position: relative;
    display: block;
    width: 100%;
    max-width: 92%;
    /* vertical padding is 0 on purpose: this field's line-height
       already equals --line-h, so its box is a clean multiple of
       --line-h with nothing extra added. A few pixels of top/bottom
       padding here used to push the .rule underneath (and therefore
       the whole meta-table below it) that same few pixels out of
       phase with the shared ruled grid — the same class of bug as
       .btn-remove-section above, just on the very first block of the
       page instead of partway down it. */
    margin: 0 auto;
    font-family: var(--font-display);
    font-size: 20pt;
    font-weight: 700;
    line-height: var(--line-h);
    color: var(--ink);
    padding: 0 30px 0 8px;
    text-align: center;
    cursor: pointer;
}
/* No border, no fill box — this must read as plain heading text
   sitting on the page's own ruled line, exactly like the <h1> it
   mirrors in the read-only view, not as a UI field with a structure
   of its own drawn on top of that line. The caret to the right of
   the text is the only hint that it's interactive. A box-shadow
   (not border-bottom) draws the hover/focus hint so it never adds
   real height to the box and can't nudge anything below out of
   phase, even for the instant it's shown. */
.doc-title-field:hover .doc-title-current,
.doc-title-field:focus .doc-title-current {
    box-shadow: 0 1px 0 0 var(--ink-soft);
}
.doc-title-field:focus { outline: none; }
.doc-title-current {
    overflow-wrap: break-word;
    word-break: break-word;
}
.doc-title-caret {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 10pt;
    color: var(--ink-soft);
    pointer-events: none;
}
/* The dropdown list itself: a floating card, same visual language as
   the Ethiopian-calendar popup elsewhere in the app (see
   .eth-cal-popup) — plain white card, blue border, real shadow. */
.doc-title-popup {
    display: none;
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    margin-top: 6px;
    z-index: 90;
    width: min(92vw, 560px);
    max-height: 320px;
    overflow-y: auto;
    background: #FFFFFF;
    border: 2px solid var(--ink-soft);
    border-radius: 6px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
    padding: 6px;
    text-align: left;
    cursor: default;
}
.doc-title-popup.open { display: block; }
.doc-title-option {
    padding: 9px 12px;
    font-family: var(--font-body);
    font-weight: 400;
    font-size: 11pt;
    line-height: 1.35;
    color: var(--ink);
    border-radius: 4px;
    cursor: pointer;
}
.doc-title-option:hover { background: var(--paper-dim); }
.doc-title-option.selected { background: var(--ink); color: #FFFFFF; font-weight: 600; }
.print-only { display: none; }

/* margin-top and margin-bottom here are just visual breathing room —
   they no longer need to add up to a multiple of any shared grid,
   since this heading paints its own local rule pattern (below) and
   the next block does the same, each restarting fresh from its own
   top edge. */
.section-title {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 16pt;
    /* Text now flows at the SAME 35px pitch as the rule pattern below
       it, so if a long title wraps onto a second line, that line
       lands right on its own rule too — no drift between the two. */
    line-height: var(--heading-rule-h);
    color: var(--ink);
    text-transform: uppercase;
    letter-spacing: 0.4px;
    margin-top: var(--line-h);
    margin-bottom: 20px;
    padding-bottom: 6px;
    border-bottom: 2px solid var(--line-blue);
    display: flex;
    align-items: baseline;
    gap: 8px;
    position: relative;
    /* Local ruled-line pattern at --heading-rule-h (35px). Because
       line-height above is ALSO --heading-rule-h, this heading's real
       height is always a whole multiple of 35px on its own — one line
       or two, wrapped or not — so the pattern never gets cut off
       mid-repeat, and there's nothing to fall out of phase within
       this element no matter how many lines the title takes. An
       opaque paper layer first blanks anything that might otherwise
       show through underneath. */
    background-color: var(--paper);
    background-image: repeating-linear-gradient(
        to bottom,
        transparent 0,
        transparent calc(var(--heading-rule-h) - 1px),
        var(--line-blue) calc(var(--heading-rule-h) - 1px),
        var(--line-blue) var(--heading-rule-h)
    );
    background-position: 0 var(--text-lift);
    background-repeat: repeat;
}
/* Every section heading doubles as an editable field, so the content
   under it can be given a different name. Styled to look identical
   to the plain heading text until hovered/focused, when a faint
   highlight hints that it can be typed into. */
.section-title-input {
    font-family: inherit;
    font-weight: inherit;
    font-size: inherit;
    line-height: inherit;
    color: inherit;
    text-transform: inherit;
    letter-spacing: inherit;
    border: none;
    background: transparent;
    padding: 2px 4px;
    margin: -2px -4px;
    border-radius: 3px;
    flex: 1;
    min-width: 0;
}
/* No highlight box on hover/focus — a section title is plain text
   on the page, not a field with its own visible structure. */
.section-title-input:hover, .section-title-input:focus {
    outline: none;
}

/* ---------------- Tables ---------------- */
table.meta-table, table.data-table {
    width: 100%;
    /* fixed layout = columns keep the widths we give them (via <colgroup>)
       no matter how much text goes in a cell, so a long answer wraps
       inside its own column instead of stretching the table sideways
       and pushing the remove (×) button out past the page margin */
    table-layout: fixed;
    border-collapse: collapse;
    /* explicit 0 on both — a bare <table> has no default browser
       margin, but leaving margin-top implicit invited exactly the
       kind of silent, easy-to-miss offset this whole grid depends on
       never having, so it's stated here rather than assumed. */
    margin-top: 0;
    margin-bottom: 0;
    font-size: 11pt;
}
/* Every table in the app now follows the same rule as the fixed
   meta-table: no solid background of its own, no boxed horizontal
   borders duplicating the ruled lines — the one set of lines already
   painted on .page-sheet is the only line system anywhere on the
   page. Attendees / Ajandaa / Karoora gochaa keep a thin vertical
   divider between columns (so the table shape still reads), but
   nothing horizontal that could sit a pixel off the real rule and
   look doubled, and no zebra-striping tint hiding the lines. */
/* ---- Ruled lines: ONE set only, the single pattern painted once on
   .page-sheet. Every cell here is transparent — no background-color,
   no background-image of its own — so the page's real grid shows
   straight through, exactly like view.html's plain text does. That
   means every block's height on this page has to add up to a whole
   number of --line-h so the shared grid never falls out of phase by
   the time it reaches a cell further down (see the margin-math note
   above .section-title, and table.meta-table/data-table row heights
   below) — but the payoff is that nothing is ever drawn twice: no
   cell can show a "stacked box" of its own lines sitting a pixel off
   the real one, because it has no lines of its own to be off with. */
table.data-table td, table.data-table th {
    border: none;
    border-right: 1px solid var(--border-soft);
    padding: 0 10px;
    /* Text now flows at the SAME 33px pitch as the rule pattern below,
       so every wrapped line — not just the first — lands right on its
       own rule. This does shift where later lines of text sit
       compared to the old 28px grid (a necessary trade-off: 28 and 33
       don't share a repeating pattern, so keeping text at 28 while
       lines repeat at 33 is what caused rules to drift under the
       wrong row). th gets its own line-height further below since it
       has a solid ink fill and no visible rule lines to match. */
    line-height: var(--content-rule-h);
    /* top, not bottom: when a sibling cell's text wraps onto extra
       lines and grows the row taller, a short cell (a row number, for
       example) must stay next to the row's FIRST line, not sink down
       to its last line. For an ordinary single-line row there is no
       extra space to distribute either way, so this changes nothing
       visually there — it only fixes the multi-line case. */
    vertical-align: top;
    overflow-wrap: break-word;
    word-break: break-word;
    position: relative;
}
table.data-table td:last-child, table.data-table th:last-child { border-right: none; }
/* Content cells (Hirmaattota / Ajandaa / Karoora gochaa rows) get
   their own local ruled-line pattern at --content-rule-h (33px).
   Because line-height above is now ALSO --content-rule-h, the row's
   real height is always an exact whole multiple of 33px on its own —
   one wrapped line = 33px, two = 66px, etc. — so this pattern never
   needs to be cut off partway through a repeat, and there's nothing
   left to fall out of phase within this cell no matter how many
   lines it wraps to. An opaque paper layer first blanks anything
   that might otherwise show through underneath. table.data-table th
   keeps its solid ink fill from the rule further below, which simply
   overrides this background again on that selector, so header cells
   are unaffected. */
table.data-table td {
    background-color: var(--paper);
    background-image: repeating-linear-gradient(
        to bottom,
        transparent 0,
        transparent calc(var(--content-rule-h) - 1px),
        var(--line-blue) calc(var(--content-rule-h) - 1px),
        var(--line-blue) var(--content-rule-h)
    );
    background-position: 0 var(--text-lift);
    background-repeat: repeat;
}
/* Column header labels (LAKK. / MAQAA / ...): centered on a solid
   ink fill, no ruled lines ever show behind them, so they don't need
   to match the 33px content grid — a normal, compact line-height
   keeps a wrapped header label (e.g. a narrow "Lakk." column) looking
   right instead of being stretched to a 33px-per-line content row. */
table.data-table th {
    line-height: 1.3;
}
/* The meta-table (Guyyaa Yaa'ii / Iddoo / Sa'aatii / Ajandaa / Kan
   mariisise) is NOT a boxed table visually — it's plain text written
   directly on ruled notebook lines, with no border/underline of its
   own. Those ruled lines are painted locally on each cell (see the
   comment above table.data-table) so the label column and the value
   column — which never wrap onto a different number of lines from
   each other in practice, but might — always show a rule directly
   under their own text regardless of what the rest of the page did. */
table.meta-table td, table.meta-table th {
    border: none;
    padding: 0 10px;
    /* Same reasoning as table.data-table td above: text flows at
       --content-rule-h (33px) so it stays locked to its own rule on
       every line, including if a value ever wraps to a second line. */
    line-height: var(--content-rule-h);
    vertical-align: top;
    overflow-wrap: break-word;
    word-break: break-word;
    position: relative;
    /* Local ruled-line pattern at --content-rule-h (33px), same
       reasoning as table.data-table td above: an opaque paper layer
       blanks anything underneath, then this pattern paints the
       visible lines at the new pitch — and because this row's real
       height is always a whole multiple of 33px now, the pattern
       never gets cut off mid-repeat. */
    background-color: var(--paper);
    background-image: repeating-linear-gradient(
        to bottom,
        transparent 0,
        transparent calc(var(--content-rule-h) - 1px),
        var(--line-blue) calc(var(--content-rule-h) - 1px),
        var(--line-blue) var(--content-rule-h)
    );
    background-position: 0 var(--text-lift);
    background-repeat: repeat;
}
table.meta-table td:first-child {
    font-weight: 700;
    /* wide enough that even the longest label ("Iddoo mariachi itti
       gaggeeffame:") always fits on a single line — nowrap below is
       the hard guarantee of that, this width just keeps it from
       looking cramped. A label that's ever allowed to wrap makes its
       own row taller than one ruled line, which knocks every label
       after it out of 1-to-1 alignment with its input line — that
       was the actual cause of "only Guyyaa Yaa'ii works". */
    width: 340px;
    white-space: nowrap;
    color: var(--ink);
    text-transform: uppercase;
    font-family: var(--font-display);
    font-size: 11pt;
}
table.data-table th {
    background: var(--ink);
    color: #FFFFFF;
    font-weight: 600;
    text-align: center;
    text-transform: uppercase;
    font-family: var(--font-display);
    font-size: 10pt;
}
/* No alternating-row tint — a solid color here would hide the ruled
   lines on every even row, the same bug that was hiding them under
   the meta-table labels. */

textarea.plain, input.plain, select.plain {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    border: none;
    font-family: var(--font-body);
    font-size: 11pt;
    /* Same 33px pitch as the rule pattern behind it (see
       table.data-table td above) — text and lines now move together
       on every line, including wrapped ones. */
    line-height: var(--content-rule-h);
    padding: 0 2px;
    background: transparent;
    color: var(--ink);
    /* Guarantees a long unbroken run of characters (no spaces to wrap
       at) still breaks inside this field's own width instead of
       spilling past its column/page edge — needed on top of the
       table cell's own overflow-wrap/word-break, since a form control
       doesn't reliably inherit those from its parent in every
       browser. */
    overflow-wrap: break-word;
    word-break: break-word;
}
input.plain, select.plain { height: var(--content-rule-h); }
textarea.plain:focus, input.plain:focus, select.plain:focus {
    /* No box, no tint, no extra line of its own — focusing a field
       must not draw any structure on top of the notebook page. The
       text still sits on the one ruled line that's already there. */
    outline: none;
}
/* No dotted underline of its own on meta-table inputs — the ruled
   page background beneath is the only line these fields need. */

/* textareas used *inside* table cells (attendee, agenda, action-plan,
   signature rows): they wrap and grow taller as you type instead of
   scrolling text sideways out of view, and they never force the
   column — and therefore the whole table — wider than the page.

   The grown height is applied directly to the textarea (in normal
   document flow, not position:absolute), so it becomes a real,
   permanent part of the row's height: it is set the same way on
   initial page load (from saved content), on every keystroke, and
   after a window resize — never merely on focus/blur — so the same
   amount of content always produces the same cell size, saving and
   reopening a record never loses or hides any of it, and moving
   between cells never makes the layout jump. */
textarea.plain {
    display: block;
    resize: none;
    overflow: hidden;
    white-space: pre-wrap;
    line-height: var(--content-rule-h);
    min-height: var(--content-rule-h);
    box-sizing: border-box;
}

textarea.block {
    width: 100%;
    box-sizing: border-box;
    min-height: 110px;
    border: 1px solid var(--border-soft);
    font-family: var(--font-body);
    font-size: 11pt;
    padding: 12px;
    background: var(--paper);
    color: var(--ink);
    border-radius: 2px;
}
textarea.block:focus { outline: none; border-color: var(--ink-soft); background: #F9FBFE; }

/* ---- Marii gaggeeffame / Yaadaa fi gaafii / Murtii: plain text
   written straight on the page's own ruled lines, exactly like every
   other field now. These used to be a separate boxed widget — own
   border, own solid background, and a second, independently-drawn
   ruled-line pattern (at a different offset than the real one) plus
   a duplicate "margin" column of its own. All of that has been
   removed: no box, no background, no second set of lines, no second
   margin line (the page already has one, running the full height of
   .page-sheet). This textarea now has nothing painted on it at all —
   the one shared rule pattern from .page-sheet is the only line
   under it, same as everywhere else. */
.notebook-wrap {
    overflow-anchor: none;
    /* 0, not a few odd pixels: this sits directly in the page's flow
       between one ruled block and the next, so anything other than
       a whole multiple of --line-h here (0 is the simplest one)
       knocks every rule below it out of phase — the same drift bug
       described above table.data-table, just from a margin instead
       of a background. */
    margin-bottom: 0;
}
/* These fields get their own local ruled-line pattern at
   --content-rule-h (33px) — same "content area" as the table cells
   above. line-height is ALSO set to --content-rule-h (not the old
   28px page grid), so text and rule move together on every wrapped
   line — no drift, no line landing under the wrong row of text. An
   opaque paper layer blanks anything that might otherwise show
   through underneath. */
textarea.notebook-lines,
.notebook-lines-static {
    width: 100%;
    box-sizing: border-box;
    display: block;
    border: none;
    background-color: var(--paper);
    background-image: repeating-linear-gradient(
        to bottom,
        transparent 0,
        transparent calc(var(--content-rule-h) - 1px),
        var(--line-blue) calc(var(--content-rule-h) - 1px),
        var(--line-blue) var(--content-rule-h)
    );
    background-position: 0 var(--text-lift);
    background-repeat: repeat;
    color: var(--ink);
    font-family: var(--font-body);
    font-size: 13pt;
    line-height: var(--content-rule-h);
    padding: 0 10px;
    overflow-wrap: break-word;
    word-break: break-word;
}
textarea.notebook-lines {
    resize: none;
    overflow: hidden;
    min-height: var(--content-rule-h);
}
textarea.notebook-lines:focus { outline: none; }
.notebook-lines-static {
    min-height: var(--content-rule-h);
    white-space: pre-wrap;
}

.row-actions { white-space: nowrap; text-align: center; width: 40px; }
/* Delete/remove is the one place a muted red is kept — a functional
   "this removes something" signal, not notebook theming. */
.btn-x {
    background: var(--danger);
    color: #fff;
    border: none;
    border-radius: 50%;
    width: 26px;
    height: 26px;
    cursor: pointer;
    font-weight: bold;
    line-height: 1;
}
.btn-x:hover { background: #8f2e24; }

/* Box math has to add up to a whole multiple of --line-h, the same
   requirement as everything else that sits directly in the page's
   flow: line-height 28 (inherited) + padding 7+7=14 + border 1.5+1.5=3
   = 45px of content, so margin-top + margin-bottom must total 39 —
   not an arbitrary 6/20 — to bring the whole block to 84px (3 whole
   ruled lines) before the next table or section-title resumes. */
.btn-add {
    margin-top: 15px;
    margin-bottom: 24px;
    background: transparent;
    color: var(--ink);
    border: 1.5px solid var(--ink-soft);
    border-radius: 20px;
    padding: 7px 18px;
    cursor: pointer;
    font-family: var(--font-body);
    font-size: 11pt;
}
.btn-add:hover { background: var(--paper-dim); }

/* The signature table's own ruled-line pitch: --sig-line-h (35px),
   distinct from the 33px --content-rule-h every other data-table
   (attendee/ajandaa/karoora gochaa) uses — scoped to #sig-table only,
   so the Maqaa/Mallattoo/Guyyaa row is 35px per line without
   changing any other table on the page. */
#sig-table.data-table td, #sig-table.data-table th {
    line-height: var(--sig-line-h);
}
#sig-table.data-table td {
    background-image: repeating-linear-gradient(
        to bottom,
        transparent 0,
        transparent calc(var(--sig-line-h) - 1px),
        var(--line-blue) calc(var(--sig-line-h) - 1px),
        var(--line-blue) var(--sig-line-h)
    );
}
/* Lets the expanded signing pad below anchor itself to this table's
   own box (see .sig-pad-wrap.expanded) instead of the whole
   viewport. */
#sig-table.data-table { position: relative; }

/* ---- Signature pad: draw-your-signature cell in the sig table ----
   One ruled line tall (--sig-line-h, 35px) — the "+ Mallattoo"
   button and the confirmed signature image are never shown at the
   same time, so this cell only ever needs to hold one of them, sized
   to sit on the very same line the row's Maqaa/Guyyaa text sits on. */
table.data-table td.sig-cell {
    height: var(--sig-line-h);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 10px;
}
/* Expand button to show signature pad */
.btn-expand-sig {
    /* explicit line-height (not the inherited 28px page grid) so this
       button's own box stays compact — it lives inside the fixed-
       height .sig-cell above, not directly on the page's ruled lines,
       so it doesn't need to match --line-h itself. */
    line-height: 1.4;
    background: var(--ink);
    color: #fff;
    border: none;
    border-radius: 15px;
    padding: 5px 14px;
    cursor: pointer;
    font-family: var(--font-body);
    font-size: 9pt;
}
.btn-expand-sig:hover { background: var(--ink-soft); }
/* sig-pad-wrap container - no min-height since it's hidden by default */
.sig-pad-wrap { position: relative; }
canvas.sig-pad {
    display: block;
    width: 100%;
    height: 28px;
    background: #FFFFFF;
    background-image:
        linear-gradient(#FFFFFF, #FFFFFF),
        linear-gradient(to bottom, transparent calc(100% - 2px), var(--line-blue) calc(100% - 2px), var(--line-blue) calc(100% - 1px), transparent calc(100% - 1px));
    border: 2px solid var(--border-soft);
    border-radius: 6px;
    cursor: crosshair;
    touch-action: none;
    -webkit-user-select: none;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.05);
}
/* ---- Expanded signature pad: as soon as the person starts signing
   (finger, stylus or mouse down on the pad) the WHOLE pad — canvas
   and both buttons together — pops up as one precisely-sized card,
   same size as the collapsed pad's default (min(92vw,420px) wide,
   240px tall), but now positioned absolute against #sig-table (which
   is position:relative above) instead of fixed to the viewport — so
   it opens centered in the middle of the signature table itself,
   never floating off somewhere else on the page. Because it's a real
   width/height box (not just the canvas floating inside an empty
   wrapper), the "+" and "-" buttons anchor exactly to the pad's own
   bottom-left and bottom-right corners. It collapses back to the
   exact default line size the instant they tap "+" to confirm (or
   tap anywhere outside it). ---- */
.sig-pad-wrap.expanded {
    position: absolute;
    /* Dead-centre of the MAQAA FI MALLATTOO HIRMAATTOTAA table itself
       (#sig-table is position:relative), both axes, so the pad always
       opens in the middle of that section of the notebook — never
       drifting to a row's own cell, never floating off-page. */
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    /* Substantially larger than before (was 420x240) so a full
       signature can be written comfortably with a fingertip or stylus
       instead of being cramped. Fluid: it takes the width it can get
       on a phone and caps out on a desktop, and its height follows the
       viewport rather than being a fixed pixel count. */
    width: min(94vw, 760px);
    height: clamp(260px, 46vh, 420px);
    z-index: 1200;
    background: #FFFFFF;
    border: 2px solid var(--ink);
    border-radius: 14px;
    box-shadow: 0 28px 70px rgba(0, 0, 0, 0.38), 0 8px 22px rgba(0, 0, 0, 0.22);
    /* GPU-promoted and isolated: the canvas repaints during a stroke
       can never trigger layout or paint work anywhere else on the
       page, which is what keeps drawing smooth on a long document. */
    will-change: transform;
    contain: layout paint;
    animation: sigPadIn 0.16s ease-out;
}
@keyframes sigPadIn {
    from { opacity: 0; transform: translate(-50%, -50%) scale(0.96); }
    to   { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}
/* A baseline rule to sign on, drawn on the wrapper (not the canvas),
   so it is never part of the exported signature image. */
.sig-pad-wrap.expanded::after {
    content: "";
    position: absolute;
    left: 8%; right: 8%;
    bottom: 34%;
    border-bottom: 1.5px solid var(--line-blue);
    pointer-events: none;
}
.sig-pad-wrap.expanded canvas.sig-pad {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    border: none;
    border-radius: 14px;
    box-shadow: none;
    background: transparent;
    background-image: none;
    cursor: crosshair;
    /* No browser gesture may ever steal a stroke: no scrolling, no
       pinch-zoom, no long-press callout, no text selection, no tap
       highlight. This is the single biggest cause of a "jumpy" or
       "dropped" signature on touch devices. */
    touch-action: none;
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
    -webkit-tap-highlight-color: transparent;
}
/* A dimmed page behind the open pad: makes it unmistakable where to
   sign. A stray tap outside changes nothing — only "+", "×" or Esc can
   close the pad (see EXPLICIT CONFIRM ONLY in form.html). */
body.sig-signing::before {
    content: "";
    position: fixed;
    inset: 0;
    background: rgba(23, 69, 143, 0.18);
    backdrop-filter: blur(1.5px);
    z-index: 1100;
}

/* ---- Read-only signature preview -------------------------------
   Tapping a signature that has already been given opens this. It
   shows the signature, larger, and nothing else: there is no edit
   control and no clear control, because a signature is permanent. */
.sig-preview-overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 1400;
    background: rgba(23, 69, 143, 0.28);
    backdrop-filter: blur(2px);
    align-items: center;
    justify-content: center;
    padding: 24px;
}
.sig-preview-overlay.open { display: flex; }
.sig-preview-box {
    background: #fff;
    border: 2px solid var(--ink);
    border-radius: 14px;
    padding: 18px 22px;
    max-width: min(92vw, 640px);
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
    text-align: center;
}
.sig-preview-img {
    display: block;
    max-width: 100%;
    max-height: 46vh;
    margin: 0 auto;
}
.sig-preview-note {
    margin-top: 12px;
    font-family: var(--font-body);
    font-size: 9pt;
    line-height: 1.4;
    color: var(--muted);
}

/* View signature button */
.btn-view-sig {
    display: block;
    margin-top: 4px;
    background: var(--ink);
    color: #fff;
    border: none;
    border-radius: 12px;
    padding: 4px 10px;
    cursor: pointer;
    font-family: var(--font-body);
    font-size: 8pt;
}
.btn-view-sig:hover { background: var(--ink-soft); }

/* Signature display image - rescaled to fit exactly inside the
   35px signature line (object-fit: contain keeps the drawing's own
   proportions, so it shrinks to fit without ever stretching or
   squashing). max-height is a couple px under --sig-line-h so the
   1px border above/below still lands inside the 35px cell instead
   of pushing it taller. Clickable: tapping it opens a read-only zoom
   preview — a signed cell can never be re-opened for editing. */
.sig-display-img {
    display: block;
    max-width: 100%;
    max-height: 42px;
    object-fit: contain;
    border: 1px solid var(--border-soft);
    border-radius: 4px;
    background: #fff;
    margin-top: 0;
    cursor: pointer;
    transition: box-shadow 0.15s ease;
}
.sig-display-img:hover { box-shadow: 0 0 0 2px var(--ink-soft); }
/* A signed cell is final — there is no "+ Mallattoo" button left in
   it to press and no pad to reopen. */
table.data-table td.sig-cell.signed .btn-expand-sig,
table.data-table td.sig-cell.signed .sig-pad-wrap { display: none !important; }
/* Clear is a destructive action — keeps the same functional red as
   the other delete controls, not part of the notebook's own colors. */
.btn-clear-sig {
    position: absolute;
    bottom: 0; right: 0;
    font-family: var(--font-body);
    font-size: 18pt;
    font-weight: bold;
    padding: 4px 14px;
    border-radius: 50%;
    border: 1px solid var(--ink-soft);
    background: rgba(255, 255, 255, 0.95);
    color: var(--danger);
    cursor: pointer;
    z-index: 81;
    width: 40px;
    height: 40px;
    line-height: 1;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}
.btn-clear-sig:hover { background: var(--paper-dim); }
/* "+" (confirm) button: only appears while the pad is
   expanded, sits on top of the enlarged canvas, and is the explicit
   way to finish signing and snap the pad back to its default size */
.btn-confirm-sig {
    display: none;
    position: absolute;
    bottom: 0; left: 0;
    font-family: var(--font-body);
    font-size: 18pt;
    font-weight: bold;
    padding: 4px 14px;
    border-radius: 50%;
    border: 1px solid var(--ink);
    background: var(--ink);
    color: #fff;
    cursor: pointer;
    z-index: 81;
    width: 40px;
    height: 40px;
    line-height: 1;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}
.sig-pad-wrap.expanded .btn-confirm-sig { display: block; }
.btn-confirm-sig:hover { background: var(--ink-soft); }
/* "×" (close, no save) button: top-right of the pad, the same size
   and shape family as "+"/"-" so all three read as one control group.
   This is the ONLY way besides Esc to close a pad without signing —
   it always discards whatever was drawn, same as clicking "-" then
   walking away, never the same code path as "+". */
.btn-close-sig {
    display: none;
    position: absolute;
    top: 0; right: 0;
    font-family: var(--font-body);
    font-size: 15pt;
    font-weight: bold;
    padding: 0;
    border-radius: 50%;
    border: 1px solid var(--ink-soft);
    background: rgba(255, 255, 255, 0.95);
    color: var(--muted);
    cursor: pointer;
    z-index: 82;
    width: 34px;
    height: 34px;
    line-height: 1;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}
.sig-pad-wrap.expanded .btn-close-sig { display: block; }
.btn-close-sig:hover { background: var(--danger); color: #fff; border-color: var(--danger); }
.sig-hint {
    font-size: 8pt;
    line-height: 1.3;
    color: var(--muted);
    text-align: center;
    margin-top: 0;
}
/* Printed/view page only: the signature image has to sit ON the same
   single 35px ruled line the person's typed name occupies in the row
   next to it — not overflow down across the line below, which is
   what made it look detached from the name. The cell is pinned to
   exactly one --sig-line-h line and its contents vertically centered
   on that line, the same way the row's plain text is. */
td.sig-view-cell {
    height: var(--sig-line-h);
    display: flex;
    align-items: center;
    overflow: hidden;
}
/* object-fit: contain rescales the drawing to fit inside the line
   while keeping its original proportions — it shrinks, it never
   stretches or squashes. */
.sig-img { max-width: 100%; max-height: 42px; object-fit: contain; display: block; }

/* SIGNATURE VISIBILITY (screen + paper).
   The saved signature is a PNG of blue ink on transparency. Browsers
   default to dropping backgrounds and lightening images when printing,
   which is what makes a signature come out faint or missing. These two
   rules force the browser to print the image exactly as rendered, and
   give the ink a little more room on the line so it is unmistakably
   legible rather than squeezed into a 28px sliver. */
.sig-img, .sig-display-img {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
    image-rendering: auto;
}
@media print {
    td.sig-view-cell, table.data-table td.sig-cell { overflow: visible; }
    .sig-img, .sig-display-img {
        max-height: 42px !important;
        opacity: 1 !important;
        filter: contrast(1.15) saturate(1.1);
    }
}

/* ---- Table-cell textareas (attendee/agenda/action-plan rows): a
   stable baseline height that grows only when the content in that
   specific cell actually needs more room (see the shared growTextarea
   logic in base.html). No focus/blur-triggered resizing, no
   position:absolute pop-over — the height set here is the row's real,
   saved height. ---- */
table.data-table textarea.plain {
    min-height: var(--line-h);
    overflow: hidden;
    resize: none;
    /* No transition here on purpose. growTextarea() (base.html) measures
       height by briefly setting height:auto, then snapping straight to
       the new line-locked pixel value. Animating that height meant the
       collapse-to-auto step and the regrow step each played out over
       0.12s on every keystroke, which is what made the signature
       section (and anything else below a growing cell) visibly jump
       twice instead of reflowing once, cleanly, in a single step. */
}

/* ---- Remove section button (destructive — kept functionally red) ---- */
/* Capped well under one heading ruled line (--heading-rule-h, 35px)
   and pinned to the center of the section-title's flex row (not
   "baseline", the row's default) so it can never make that row's own
   content taller than its text line — a button here that grows the
   row past 35px would throw that heading's own local ruled-line
   pattern out of phase with its own text, the same class of bug this
   file has run into before whenever a flex sibling was taller than
   the line it sits next to. */
.btn-remove-section {
    align-self: center;
    height: 20px;
    line-height: 1;
    margin-left: 12px;
    background: var(--danger);
    color: #fff;
    border: none;
    border-radius: 20px;
    padding: 0 14px;
    cursor: pointer;
    font-family: var(--font-body);
    font-size: 9pt;
}
.btn-remove-section:hover { background: #8f2e24; }

.form-actions {
    margin-top: 34px;
    padding-top: 20px;
    border-top: 1px solid var(--border-soft);
    text-align: right;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 12px;
}
.btn-save {
    background: var(--ink);
    color: #fff;
    border: none;
    padding: 11px 30px;
    font-size: 12pt;
    font-family: var(--font-display);
    font-weight: 600;
    border-radius: 3px;
    cursor: pointer;
}
.btn-save:hover { background: var(--ink-soft); }
.btn-secondary {
    background: transparent;
    color: var(--ink);
    border: 1.5px solid var(--ink);
    padding: 10px 22px;
    border-radius: 3px;
    cursor: pointer;
    text-decoration: none;
    font-family: var(--font-body);
    font-size: 11pt;
}
.btn-secondary:hover { background: var(--paper-dim); }

/* ---------------- List / ledger index page ---------------- */
.list-toolbar {
    max-width: 850px;
    margin: 30px auto 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    padding: 0 6px;
}
.list-toolbar h2 {
    font-family: var(--font-display);
    color: var(--ink);
    text-transform: uppercase;
    font-size: 19pt;
    margin: 0;
}
.list-toolbar .search-box {
    display: flex;
    gap: 8px;
}
.list-toolbar input.plain {
    background: var(--paper);
    border: 1.5px solid var(--ink-soft);
    padding: 9px 12px;
    border-radius: 20px;
    min-width: 260px;
    font-family: var(--font-body);
    font-size: 11pt;
}
.list-toolbar .btn-secondary { background: var(--paper); border-color: var(--ink-soft); color: var(--ink); border-radius: 20px; }

.ledger-index {
    position: relative;
    max-width: 850px;
    margin: 16px auto 50px auto;
    background: var(--paper);
    border-radius: 3px;
    box-shadow: 0 10px 26px var(--shadow);
    padding: 30px 6px 6px 70px;
    /* the same ruled notebook paper as the writing page */
    background-image: repeating-linear-gradient(
        to bottom,
        transparent 0,
        transparent calc(var(--line-h) - 1px),
        var(--line-blue) calc(var(--line-h) - 1px),
        var(--line-blue) var(--line-h)
    );
    background-position: 0 calc(30px + var(--text-lift));
}
/* the blue margin rule, matching the page-sheet */
.ledger-index::after {
    content: "";
    position: absolute;
    left: 46px; top: 0; bottom: 0;
    width: 2px;
    background: var(--line-blue);
}
.ledger-index table { position: relative; z-index: 1; width: 100%; border-collapse: collapse; }
.ledger-index th {
    background: var(--ink);
    color: #FFFFFF;
    font-family: var(--font-display);
    font-weight: 600;
    text-align: left;
    padding: 0 16px;
    line-height: var(--line-h);
    font-size: 11pt;
}
/* No border-bottom here on purpose: .ledger-index already paints the
   shared ruled-line background behind every row (see above), and each
   row is exactly one ruled line (--line-h) tall — so a second,
   independently-drawn border here would sit right on top of that same
   rule, in a slightly different shade of blue, and read as a doubled/
   duplicated line under every row. This is the same trap data-table
   and meta-table deliberately avoid elsewhere in this file. */
.ledger-index td {
    padding: 0 16px;
    line-height: var(--line-h);
    font-size: 11pt;
}
.ledger-index tbody tr:hover { background: var(--paper-dim); }
/* Status badges stay monochrome (blue/gray only) rather than the old
   amber/green fill, so nothing but blue appears on the page. */
.status-pill {
    display: inline-block;
    padding: 3px 11px;
    border-radius: 12px;
    font-size: 9pt;
    font-family: var(--font-display);
    font-weight: 600;
    border: 1px solid var(--line-blue);
}
.status-pill.DRAFT { background: var(--paper-dim); color: var(--muted); }
.status-pill.FINAL { background: var(--ink); color: #FFFFFF; border-color: var(--ink); }
.ledger-index a.action-link { color: var(--ink); text-decoration: none; font-size: 10pt; margin-right: 10px; border-bottom: 1px solid var(--line-blue); }
.ledger-index .empty-row { text-align: center; padding: 40px; color: var(--muted); font-style: italic; }

/* ---------------- Login / cover page ---------------- */
/* The surrounding page is pure white; the "book" itself is a plain
   white object with a blue edge, kept legible against the white
   background only by real shadow/border depth — not by color. */
.cover-wrap {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 30px;
    perspective: 1400px;
    /* a faint vignette "desk" surface — still reads as a light,
       neutral room, but gives the white notebook something to
       visibly sit on instead of floating on a flat, blank white */
    background: radial-gradient(ellipse at center, #FDFEFF 0%, #E9EEF3 100%);
}
.cover-book {
    position: relative;
    width: 100%;
    max-width: 440px;
    text-align: center;
    color: var(--ink);
    border: 2px solid var(--ink-soft);
    border-radius: 8px;
    padding: 34px 26px 30px 26px;
    background: linear-gradient(160deg, #FFFFFF 0%, #F2F7FC 100%);
    /* a genuinely elevated, real-object shadow is what separates a
       white book from a white page — color plays no part in it */
    box-shadow: 0 26px 55px rgba(0,0,0,0.22), 0 6px 16px rgba(0,0,0,0.12);
    transform-style: preserve-3d;
    transform-origin: left center;
    transition: transform .8s ease-in, opacity .6s ease-in .3s;
}
/* a soft contact-shadow ellipse under the book, like a real object
   casting a shadow on the surface it's resting on */
.cover-book::after {
    content: "";
    position: absolute;
    left: 8%; right: 8%; bottom: -22px;
    height: 26px;
    background: radial-gradient(ellipse at center, rgba(0,0,0,0.22) 0%, transparent 72%);
    z-index: -1;
}
/* ribbon bookmark hanging from the spine */
.cover-book::before {
    content: "";
    position: absolute;
    top: -16px; left: 50%;
    width: 24px; height: 74px;
    background: var(--ink-soft);
    transform: translateX(-50%);
    clip-path: polygon(0 0, 100% 0, 100% 82%, 50% 100%, 0 82%);
    box-shadow: 0 4px 8px rgba(0,0,0,0.25);
}
.cover-logos {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 28px;
    margin: 4px auto 20px auto;
}
.cover-logo {
    width: 92px; height: 92px;
    border-radius: 50%;
    border: 3px solid var(--ink-soft);
    object-fit: cover;
    background: #fff;
}
.cover-book .org { font-family: var(--font-body); font-size: 11pt; color: var(--muted); }
.cover-book .hosp { font-family: var(--font-body); font-size: 12pt; margin-top: 2px; color: var(--ink); }
.cover-book h1 {
    font-family: var(--font-display);
    font-size: 35pt;
    font-weight: 700;
    margin: 10px 0 26px 0;
    color: var(--ink);
    text-shadow: 0 1px 2px rgba(0,0,0,0.12);
}

.login-card {
    background: var(--paper);
    background-image: repeating-linear-gradient(
        to bottom, transparent 0, transparent calc(var(--line-h) - 1px),
        var(--line-blue) calc(var(--line-h) - 1px), var(--line-blue) var(--line-h)
    );
    background-position: 0 var(--text-lift);
    border-radius: 4px;
    /* top/bottom padding kept to whole multiples of --line-h so every
       label and input below lands exactly on a real ruled line instead
       of drifting out of phase with the card's own background grid */
    padding: calc(var(--line-h) * 2) 30px calc(var(--line-h) * 2) 30px;
    box-shadow: 0 16px 40px rgba(0,0,0,0.2);
    text-align: left;
}
/* one field = one ruled line for the label, one ruled line for the
   typed value, then a blank ruled line as breathing room before the
   next field — all three are real multiples of --line-h, so nothing
   here ever needs a line of its own; it only ever sits on the ruled
   lines the card's background already draws. */
.login-card .field {
    height: calc(var(--line-h) * 3);
    margin: 0;
}
.login-card label {
    display: block;
    height: var(--line-h);
    box-sizing: border-box;
    font-family: var(--font-display);
    font-size: 11pt;
    color: var(--ink);
    font-weight: 600;
    line-height: 1.1;
    /* pushes the label text down to rest on the bottom of its ruled
       line instead of floating centered/above it */
    padding: calc(var(--line-h) - 1.1em - 3px) 4px 3px 0;
}
.login-card input {
    display: block;
    width: 100%;
    height: var(--line-h);
    box-sizing: border-box;
    border: none;
    font-family: var(--font-body);
    font-size: 12pt;
    line-height: 1.1;
    /* same bottom-resting treatment as the label, so typed text sits
       right on the rule instead of floating above it */
    padding: calc(var(--line-h) - 1.1em - 3px) 4px 3px 4px;
    background: transparent;
    color: var(--ink);
}
.login-card input:focus { outline: none; }
.login-card .btn-save { width: 100%; margin-top: calc(var(--line-h) / 2); }

/* the notebook "opening" transition, played on submit */
.page-reveal {
    position: fixed;
    inset: 0;
    z-index: 500;
    background: var(--paper);
    background-image: repeating-linear-gradient(
        to bottom, transparent 0, transparent calc(var(--line-h) - 1px),
        var(--line-blue) calc(var(--line-h) - 1px), var(--line-blue) var(--line-h)
    );
    transform: scaleY(0);
    transform-origin: center;
    opacity: 0;
    pointer-events: none;
}
body.book-opening .cover-book {
    transform: rotateY(-55deg) translateX(-14%) scale(0.92);
    opacity: 0;
}
body.book-opening .page-reveal {
    animation: pageOpen 0.85s ease 0.2s forwards;
}
@keyframes pageOpen {
    0%   { transform: scaleY(0);   opacity: 0; }
    45%  { transform: scaleY(0.6); opacity: 1; }
    100% { transform: scaleY(1);   opacity: 1; }
}


/* ---------------- Numbering columns ----------------
   The three numbered tables (Hirmaattota Yaa'ichaa, Karoora Gochaa and
   Maqaa fi Mallattoo Hirmaattotaa) no longer carry a "Lakk." word in
   their header: the column is self-evidently a row number, and the
   label was eating width that the content columns needed. The header
   cell stays (so the ink bar runs unbroken across the whole table
   head) but is empty, and the numbers themselves are centred. */
table.data-table th.th-no {
    padding: 0;
    text-align: center;
}
table.data-table td.row-no {
    text-align: center;
    padding: 0 4px;
    font-variant-numeric: tabular-nums;
    color: var(--ink);
}

/* ---------------- Autosave status + recovery banner ---------------- */
.autosave-status {
    font-family: var(--font-body);
    font-size: 9pt;
    line-height: 1.3;
    color: var(--muted);
    margin-right: auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.autosave-status::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--muted);
}
.autosave-status.ok::before { background: var(--success); }
.autosave-status.pending::before { background: var(--ink-soft); }
.autosave-status.warn::before { background: var(--danger); }
.autosave-status.warn { color: var(--danger); }

.restore-banner {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    margin: 0 0 16px;
    padding: 10px 14px;
    border: 1px solid var(--ink-soft);
    border-left: 4px solid var(--ink);
    border-radius: 8px;
    background: var(--paper-dim);
    font-family: var(--font-body);
    font-size: 9.5pt;
    line-height: 1.45;
    color: var(--ink);
}
.restore-dismiss {
    margin-left: auto;
    background: var(--ink);
    color: #fff;
    border: none;
    border-radius: 14px;
    padding: 5px 14px;
    font-family: var(--font-body);
    font-size: 9pt;
    cursor: pointer;
}
.restore-dismiss:hover { background: var(--ink-soft); }

/* ---------------- Sealed (FINAL / "Xumurame") record ----------------
   A finalised record is read-only forever: this is the notice that
   explains why no edit control is offered for it. */
.action-link.locked {
    cursor: default;
    opacity: 0.75;
    text-decoration: none;
}

.locked-banner {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 16px;
    padding: 10px 14px;
    border: 1px solid var(--success);
    border-left: 4px solid var(--success);
    border-radius: 8px;
    background: #F1F8F3;
    font-family: var(--font-body);
    font-size: 9.5pt;
    line-height: 1.45;
    color: #1F5A33;
}

@media print {
    .topbar, .form-actions, .btn-x, .btn-add, .btn-clear-sig, .btn-close-sig, .sig-hint,
    .autosave-status, .restore-banner, .locked-banner, .sig-preview-overlay,
    .sig-pad-wrap, .no-print { display: none !important; }
    body { background: #fff; }
    .page-sheet { box-shadow: none; margin: 0; padding-left: 50px; }
    .page-sheet::after { display: none; }
    textarea.plain, textarea.notebook-lines { overflow: visible; }
    .print-only { display: block; }
}

/* ---------------- Ethiopian calendar date picker ---------------- */
/* The user only ever sees/selects an Ethiopian date; the real
   Gregorian value the database needs travels invisibly in a hidden
   input (see app/static/js/ethiopian-calendar.js). */
.eth-date-field {
    position: relative;
    display: flex;
    align-items: center;
    /* Explicit, not relied-on-as-default: this row (icon + input)
       must never break onto two lines, even when a sibling cell in
       the same row (a long Maqaa name) grows the row's height. */
    flex-wrap: nowrap;
    gap: 4px;
}
input.eth-date-display {
    /* editable now: typing a date is a first-class alternative to
       tapping through the calendar popup (opened via the icon) */
    cursor: text;
    /* Without this, a flex item's default min-width:auto can force
       the row wider than its cell instead of letting the text field
       shrink, which is what was pushing the date icon down/out. */
    min-width: 0;
}
.eth-date-icon {
    cursor: pointer;
    color: var(--ink);
    font-size: 13px;
    line-height: 1;
    padding: 2px;
    flex: 0 0 auto;
    user-select: none;
}
/* Invalid-field indicator is a functional error signal, kept red */
.eth-date-field.eth-date-invalid input.eth-date-display {
    box-shadow: inset 0 -2px 0 var(--danger);
}
table.data-table .eth-date-field { min-width: 100px; }

.eth-cal-popup {
    position: absolute;
    top: 100%;
    left: 0;
    margin-top: 4px;
    z-index: 90;
    background: #FFFFFF;
    border: 2px solid var(--ink-soft);
    border-radius: 6px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
    padding: 8px;
    width: 232px;
    font-family: var(--font-body);
}
.eth-cal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 6px;
}
.eth-cal-label {
    font-weight: 700;
    font-size: 11pt;
    color: var(--ink);
    flex: 1;
    text-align: center;
    white-space: nowrap;
}
.eth-cal-nav {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--ink);
    font-size: 13pt;
    line-height: 1;
    padding: 2px 5px;
    border-radius: 3px;
}
.eth-cal-nav:hover { background: var(--paper-dim); }
.eth-cal-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
}
.eth-cal-grid-pagumen { grid-template-columns: repeat(3, 1fr); }
.eth-cal-weekday {
    text-align: center;
    font-size: 8pt;
    color: var(--muted);
    font-weight: 700;
    padding-bottom: 2px;
}
.eth-cal-blank { visibility: hidden; }
.eth-cal-day {
    background: none;
    border: 1px solid transparent;
    border-radius: 4px;
    padding: 5px 0;
    font-size: 10pt;
    cursor: pointer;
    color: var(--ink);
}
.eth-cal-day:hover { background: var(--paper-dim); }
.eth-cal-day.today { border-color: var(--ink-soft); font-weight: 700; }
.eth-cal-day.selected { background: var(--ink); color: #fff; }
.eth-cal-footer {
    display: flex;
    justify-content: space-between;
    margin-top: 6px;
    padding-top: 6px;
    border-top: 1px solid var(--paper-dim);
}
.eth-cal-today-btn { color: var(--ink); }
.eth-cal-today-btn, .eth-cal-clear-btn {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 9pt;
    text-decoration: underline;
}
/* Clear is destructive — kept as the one functional red here too */
.eth-cal-clear-btn { color: var(--danger); }

@media print {
    .eth-cal-popup, .eth-date-icon { display: none !important; }
}

@media (max-width: 640px) {
    .page-sheet {
        padding: 34px 22px 34px 46px;
        background-image:
            linear-gradient(to bottom, var(--paper) 0, var(--paper) calc(34px + var(--text-lift)), transparent calc(34px + var(--text-lift)), transparent 100%),
            repeating-linear-gradient(
                to bottom,
                transparent 0,
                transparent calc(var(--line-h) - 1px),
                var(--line-blue) calc(var(--line-h) - 1px),
                var(--line-blue) var(--line-h)
            );
        background-position: 0 0, 0 calc(34px + var(--text-lift));
        background-repeat: no-repeat, repeat;
    }
    .page-sheet::after { left: 26px; }
    .ledger-index { padding-left: 46px; background-position: 0 calc(30px + var(--text-lift)); }
    .ledger-index::after { left: 26px; }
    .list-toolbar { flex-direction: column; align-items: stretch; gap: 12px; }
    .list-toolbar input.plain { min-width: 0; width: 100%; }
    .notebook-lines, .notebook-lines-static { font-size: 12pt; }
    .sig-pad-wrap.expanded {
        width: 96vw;
        height: clamp(240px, 52vh, 380px);
    }
}