/* ============================================================
   Admin styles — loaded only on admin_* pages (see header.php)
   Uses the color variables defined in styles.css :root.
   ============================================================ */

/* --- small shared helpers --- */
.muted{color:var(--ink-soft)}
.inline-form{display:inline}
.btn-danger{background:#a03a2a; color:#fff; border:0}
.btn-danger:hover{background:#873122}

/* --- flash messages --- */
.notice{padding:12px 16px; border-radius:10px; margin-bottom:16px}
.notice-ok{background:#e5f2e8; color:#1e6b3a}
.notice-err{background:#f6e2df; color:#a03a2a}
/* It worked, AND you have to go and look at something. Amber rather than
   green, because a duplicate cheque number read as "done" is a duplicate
   cheque number nobody deals with. */
.notice-warn{background:#fdf1d8; color:#7a5312; font-weight:600}

/* --- informational note callout --- */
.note{display:flex; gap:12px; align-items:flex-start; padding:14px 16px; margin:16px 0;
  background:var(--panel-green); border:1px solid var(--line); border-left:4px solid var(--gold);
  border-radius:10px; color:var(--ink-soft); font-size:.95rem; line-height:1.55}
.note .note-ico{flex:0 0 auto; margin-top:2px; color:var(--gold)}
.note b, .note strong{color:var(--pine-deep)}

/* --- toolbar / dropdown --- */
.mp-bar{display:flex; flex-wrap:wrap; gap:12px; align-items:center; margin:6px 0 18px}
.mp-bar select{padding:8px 12px; border:1px solid var(--line); border-radius:8px; font:inherit; background:var(--white)}

/* --- upload dropzone --- */
.uploader{background:var(--panel-green); border:1px dashed var(--gold-soft); border-radius:12px; padding:18px; margin:0 0 20px}

/* --- control-panel tiles --- */
.admin-tools{display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:18px; margin-top:8px}
.tool-card{display:flex; flex-direction:column; align-items:center; gap:12px; padding:26px 18px; background:var(--white); border:1px solid var(--line); border-radius:16px; text-decoration:none; color:var(--pine-deep); text-align:center; transition:transform .12s ease, box-shadow .2s ease, border-color .2s ease}
.tool-card:hover{transform:translateY(-3px); box-shadow:0 12px 26px rgba(14,48,89,.12); border-color:var(--gold-soft)}
.tool-ico{width:56px; height:56px; display:grid; place-items:center; border-radius:50%; background:var(--panel-green); color:var(--pine)}
.tool-label{font-family:"Fraunces",serif; font-size:1.1rem}

/* ===== The control panel: eight folding sections =====
   Ed, 3 Nov 2026, after seeing it on FEA: the sections fold, each person's
   folding is remembered, and the tiles are FEA's size rather than the big
   vertical cards this panel used to have. Thirteen tiles that led to
   sub-panels became fifty-odd pages on one page, and at the old size that
   would have been a scroll nobody reaches the foot of.

   The colours are Gold Hill's own tokens throughout; nothing of FEA's
   palette came across with the sizing. */

/* WIDER THAN THE REST OF THE SITE. A page of prose wants 780px - that is
   what .container.narrow is for, and what this panel used to use. A grid of
   tiles wants the room, and FEA's is 1140. */
.cp-wide{max-width:1160px}

.cp-bar{display:flex; flex-wrap:wrap; gap:10px; align-items:center; margin:0 0 10px}
/* margin-right:auto so the two buttons sit left and anything added to this
   bar later goes right, without either having to know about the other. */
.cp-fold-all{display:inline-flex; gap:6px; margin-right:auto}

/* THE HEADING IS THE SWITCH, and it stays when the section is closed - Ed:
   "the section headers will not collapse into 1". Gold Hill's own h2 face,
   not FEA's small uppercase label, so the page still reads as this site. */
.cp-section{margin:0 0 6px}
.cp-section > summary.cp-group,
.cp-section > a.cp-group{display:flex; align-items:center; gap:10px;
    margin:26px 0 12px; padding:2px 0; cursor:pointer; user-select:none;
    font-family:"Fraunces",Georgia,serif; font-size:1.35rem; font-weight:500;
    line-height:1.2; color:var(--pine-deep); text-decoration:none;
    list-style:none}
.cp-section:first-child > summary.cp-group,
.cp-section:first-child > a.cp-group{margin-top:4px}
/* The browser's own twisty goes: there is a chevron below that turns. */
.cp-section > summary.cp-group::-webkit-details-marker{display:none}
/* A CHEVRON MADE OF TWO BORDERS - no image, and it rotates rather than
   swapping, so the fold reads as a movement. */
.cp-section > summary.cp-group::before,
.cp-section > a.cp-group::before{content:""; width:8px; height:8px; flex:0 0 auto;
    border-right:2px solid currentColor; border-bottom:2px solid currentColor;
    transform:rotate(-45deg); transition:transform .15s; margin-right:2px}
.cp-section[open] > summary.cp-group::before{transform:rotate(45deg)}
.cp-section > summary.cp-group:hover,
.cp-section > a.cp-group:hover{color:var(--gold)}
.cp-section > summary.cp-group:focus-visible,
.cp-section > a.cp-group:focus-visible{outline:2px solid var(--gold);
    outline-offset:3px; border-radius:6px}
/* HOW MANY ARE IN THERE, shown only while it is shut: closed is not gone,
   and the number is what says so. */
.cp-count{display:none; font-family:"Mulish",sans-serif; font-size:.8rem;
    font-weight:700; color:var(--ink-soft); background:var(--panel);
    border:1px solid var(--line); border-radius:999px; padding:1px 9px}
.cp-section:not([open]) .cp-count, .cp-section.is-locked .cp-count{display:inline-block}
.cp-section:not([open]) > summary.cp-group{margin-bottom:0}

/* DONORS, BEFORE THE PIN. The heading is a link to the PIN page rather than
   a fold: there is nothing behind it to open yet, and an empty box that
   invites a click is worse than a door that says it is locked. */
.cp-pin{font-family:"Mulish",sans-serif; font-size:.75rem; font-weight:700;
    letter-spacing:.04em; text-transform:uppercase; color:var(--white);
    background:var(--gold); border-radius:999px; padding:2px 10px}
.cp-section.is-locked > a.cp-group{color:var(--ink-soft)}

/* THE TILES. FEA's metrics exactly: a row of them at 190px, the icon beside
   the words rather than above, and 12px between. Small enough that a section
   of ten is two rows and the whole panel is one screen. */
.cp-tiles{display:grid; grid-template-columns:repeat(auto-fill,minmax(190px,1fr));
    gap:12px}
.cp-tile{display:flex; align-items:center; gap:12px; padding:12px 14px;
    background:var(--white); border:1px solid var(--line); border-radius:12px;
    color:var(--pine-deep); text-decoration:none; font-weight:600;
    font-size:.95rem; line-height:1.25;
    transition:border-color .15s ease, box-shadow .15s ease}
.cp-tile:hover{border-color:var(--gold-soft); box-shadow:0 6px 16px rgba(14,48,89,.10)}
.cp-tile:focus-visible{outline:2px solid var(--gold); outline-offset:2px}
/* The icon keeps the round green well the big cards had - it is what made
   the panel look like this church's - at the size the small tile can hold. */
.cp-ico{flex:0 0 auto; width:34px; height:34px; display:grid; place-items:center;
    border-radius:50%; background:var(--panel-green); color:var(--pine)}
.cp-name{min-width:0}
/* People waiting to be put on the text list: the one number worth carrying
   onto a tile, because it is work nobody else will do. */
.cp-badge{display:inline-block; margin-left:6px; padding:0 7px; border-radius:999px;
    font-size:.72rem; font-weight:700; color:var(--white); background:#a03a2a}

@media (max-width:560px){
    /* One tile a row rather than two half-legible ones. */
    .cp-tiles{grid-template-columns:1fr}
    .cp-fold-all{margin-right:0}
}

/* Simple / Full, Customize, and the Hidden section at the foot. */
.cp-view{display:inline-flex; gap:4px; padding:3px; margin:0;
    border:1px solid var(--line); border-radius:999px; background:var(--white)}
.cp-note{font-size:.92rem; max-width:none; margin:0 0 14px}
/* A tile and its Hide button are one cell while customizing, so the button
   belongs to the tile above it and not to the one beside it. */
.cp-cell{display:flex; flex-direction:column; gap:4px}
.cp-cell .cp-tile{flex:1 1 auto}
.cp-hide{align-self:flex-end; margin:0}
.cp-cant{align-self:flex-end; font-size:.78rem}
/* Already put away, shown anyway while customizing - you cannot tidy what
   you cannot see - so it has to look different from the ones that are on. */
.cp-tile.is-put-away{opacity:.55; border-style:dashed}
/* WHAT IS NOT SHOWING, folded at the foot. Not one of the remembered
   sections: Expand all and Collapse all leave it alone, because it is a
   footnote to the panel rather than a part of it. */
.cp-notshown{margin-top:30px; padding-top:14px; border-top:1px solid var(--line)}
.cp-notshown > summary{display:flex; align-items:center; gap:10px; cursor:pointer;
    font-family:"Fraunces",Georgia,serif; font-size:1.15rem; color:var(--ink-soft);
    margin-bottom:12px; list-style:none}
.cp-notshown > summary::-webkit-details-marker{display:none}
.cp-notshown > summary::before{content:""; width:8px; height:8px; flex:0 0 auto;
    border-right:2px solid currentColor; border-bottom:2px solid currentColor;
    transform:rotate(-45deg); transition:transform .15s}
.cp-notshown[open] > summary::before{transform:rotate(45deg)}
.cp-notshown .cp-count{display:inline-block}
.cp-tile.is-quiet{opacity:.75}
/* Why it is not showing, under its own name - "where did Vendors go" has an
   answer on the same screen. */
.cp-tile small{display:block; font-weight:400; font-size:.75rem}

/* --- users table --- */
.admin-bar{display:flex; flex-wrap:wrap; gap:12px; align-items:center; justify-content:space-between; margin:6px 0 18px}
.admin-bar .left{display:flex; gap:12px; flex-wrap:wrap; align-items:center}
.table-wrap{overflow-x:auto; border:1px solid var(--line); border-radius:12px}
.admin-table{width:100%; border-collapse:collapse; background:var(--white); min-width:640px}
.admin-table th, .admin-table td{padding:12px 14px; text-align:left; border-bottom:1px solid var(--line); font-size:.96rem; vertical-align:middle}
.admin-table th{background:var(--panel-green); font-family:"Fraunces",serif; color:var(--pine-deep)}
.admin-table tr:last-child td{border-bottom:0}
.admin-table tr.is-deleted td{opacity:.6}
.admin-actions{display:flex; gap:8px; flex-wrap:wrap}
.badge{display:inline-block; padding:2px 10px; border-radius:999px; font-size:.78rem; font-weight:600}
.badge-active{background:#e5f2e8; color:#1e6b3a}
.badge-deleted{background:#f6e2df; color:#a03a2a}
.badge-warn{background:#fcefd9; color:#845611}

/* --- galleries grid --- */
.gal-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:18px}
.gal-card{background:var(--white); border:1px solid var(--line); border-radius:14px; overflow:hidden; display:flex; flex-direction:column}
.gal-card .cover{width:100%; aspect-ratio:4/3; object-fit:cover; background:var(--panel-green); display:block}
.gal-card .body{padding:14px 16px; display:flex; flex-direction:column; gap:8px}
.gal-card h3{margin:0; font-size:1.1rem}
.gal-card .acts{display:flex; gap:8px; flex-wrap:wrap; margin-top:4px}
.gal-card.is-deleted{opacity:.75}
.gal-card.is-deleted .cover{filter:grayscale(.25)}

/* --- photos / auto-images grid (shared) --- */
.photo-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:16px}
.photo-card{background:var(--white); border:1px solid var(--line); border-radius:12px; overflow:hidden; display:flex; flex-direction:column}
.photo-card .thumb{width:100%; aspect-ratio:1/1; object-fit:cover; background:var(--panel-green); display:block}
.photo-grid.wide .photo-card .thumb{aspect-ratio:4/3}   /* landscape thumbs (auto-images) */
.photo-card.is-deleted{opacity:.75}
.photo-card.is-deleted .thumb{filter:grayscale(.25)}
.photo-card .body{padding:10px 12px; display:flex; flex-direction:column; gap:6px}
.photo-card label{font-size:.78rem; color:var(--ink-soft)}
.photo-card input{width:100%}
.photo-card .acts{display:flex; gap:8px; margin-top:4px}

/* --- security checkboxes (manage users) --- */
/* These live inside .field, whose rules in styles.css are more specific than a
   bare class (.field label / .field input = 0,1,1). Everything here is scoped
   under .field so it actually wins, and the checkbox has to undo the full-width
   padded styling .field input applies to text boxes. */
.field .security-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(160px,1fr)); gap:10px}
.field label.security-item{display:flex; align-items:center; gap:9px; margin-bottom:0; padding:10px 12px; font-weight:500; font-size:.95rem; color:var(--ink); background:var(--white); border:1px solid var(--line); border-radius:10px; cursor:pointer}
.field label.security-item:hover{border-color:var(--gold-soft)}
.field .security-item input[type="checkbox"]{width:16px; height:16px; min-width:16px; flex:0 0 auto; margin:0; padding:0; border:0; border-radius:0; background:none; accent-color:var(--pine); cursor:pointer}
.field .security-item input[type="checkbox"]:disabled{cursor:not-allowed}
.field label.security-item:has(input:disabled){opacity:.7; cursor:not-allowed; background:var(--panel)}
.field label.security-item:has(input:checked){border-color:var(--gold); background:#fdf8ee}

/* --- read-only table viewers (logins, password resets) --- */
/* .field rules in styles.css are (0,1,1), so these are scoped to win. */
.viewer-filters{display:flex; flex-wrap:wrap; align-items:flex-end; gap:14px; padding:16px 18px; margin-bottom:18px; background:var(--white); border:1px solid var(--line); border-radius:14px}
/* The field sizes itself; the control fills it. The control used to carry a
   min-width of its own, which beat the max-width some fields set inline - CSS
   gives min-width the last word - so a 170px select sat inside a 150px field
   and lapped over the next one. */
/* Growing to fill is right for a chooser with long names in it, but a bar
   with one field in it should not stretch a select across the whole page. */
.viewer-filters .field{margin-bottom:0; flex:1 1 200px; min-width:0; max-width:420px}
.viewer-filters .field input[type="date"],
.viewer-filters .field select{width:100%; min-width:0; max-width:100%; padding:10px 12px; font:inherit; font-size:.95rem; color:var(--ink); background:var(--paper); border:1.5px solid var(--line); border-radius:10px}
.viewer-actions{display:flex; gap:10px; margin-left:auto}
/* A box and the button that acts on it, side by side inside one field - so a
   bar whose other controls fire themselves does not need a whole row for the
   one that cannot. The input takes whatever is left after the button. */
.viewer-filters .field-go{display:flex; gap:8px; align-items:stretch}
.viewer-filters .field-go input{flex:1 1 auto; min-width:0}
.viewer-filters .field-go .btn{flex:0 0 auto; padding-top:0; padding-bottom:0; white-space:nowrap}
.viewer-count{margin:0 0 14px}
.admin-table .col-id{font-variant-numeric:tabular-nums; color:var(--ink-soft); white-space:nowrap}
.admin-table .col-wrap{max-width:320px; overflow-wrap:anywhere; font-size:.86rem; color:var(--ink-soft)}
@media (max-width:640px){
  .viewer-filters{flex-direction:column; align-items:stretch}
  .viewer-filters .field input[type="date"],
  .viewer-filters .field select{width:100%}
  .viewer-actions{margin-left:0}
}

/* --- event / memory editing forms --- */
/* .field rules in styles.css are (0,1,1), so these are scoped the same way the
   security checkboxes above are, or the padded full-width input styling wins. */
.field-row{display:flex; flex-wrap:wrap; gap:16px}
.field-row .field{flex:1 1 200px; min-width:0}
/* The select rule that used to live here said exactly what .field input says
   in styles.css, and said it only inside .formcard. It is in the base rule
   there now, so every form gets it. Nothing replaces it here. */
.field label.check-item{display:flex; align-items:center; gap:9px; margin-bottom:0; padding:10px 12px; font-weight:500; font-size:.95rem; color:var(--ink); background:var(--white); border:1px solid var(--line); border-radius:10px; cursor:pointer}
.field label.check-item:hover{border-color:var(--gold-soft)}
.field label.check-item:has(input:checked){border-color:var(--gold); background:#fdf8ee}
.field .check-item input[type="checkbox"]{width:16px; height:16px; min-width:16px; flex:0 0 auto; margin:0; padding:0; border:0; border-radius:0; background:none; accent-color:var(--pine); cursor:pointer}

/* --- image panel (families / members) --- */
.field .image-panel{display:flex; gap:18px; align-items:flex-start; flex-wrap:wrap}
.image-current{display:block; width:140px; height:140px; border:1px solid var(--line); border-radius:12px; overflow:hidden; background:var(--panel); flex:0 0 auto}
.image-current img{width:100%; height:100%; object-fit:cover; display:block}
.image-current.is-empty{display:grid; place-items:center; color:var(--ink-soft)}
.image-pick{flex:1 1 240px; min-width:0}
.field .image-pick input[type="file"]{width:100%; padding:10px 12px; font:inherit; font-size:.92rem; background:var(--paper); border:1.5px dashed var(--line); border-radius:10px}
.image-history{display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:16px}
.image-hist{margin:0; background:var(--white); border:1px solid var(--line); border-radius:12px; overflow:hidden}
.image-hist.is-current{border-color:var(--gold); box-shadow:0 0 0 2px rgba(169,124,51,.18)}
.image-hist img{width:100%; aspect-ratio:1/1; object-fit:cover; display:block; background:var(--panel)}
.image-hist figcaption{padding:9px 10px; display:flex; flex-wrap:wrap; gap:6px; align-items:center; font-size:.8rem}
.grid-thumb{width:52px; height:52px; object-fit:cover; border-radius:8px; border:1px solid var(--line); display:block; background:var(--panel)}

/* --- side-by-side form fields --- */
.field-row{display:flex; gap:16px; flex-wrap:wrap}
.field-row .field{flex:1 1 200px; min-width:0}
@media (max-width:640px){ .field-row{flex-direction:column; gap:0} .field-row .field{max-width:none !important} }

/* --- family picker (members) --- */
.field input.family-filter{width:100%; margin-bottom:8px}
.field select.family-list{width:100%; padding:8px; font:inherit; font-size:.95rem; color:var(--ink); background:var(--paper); border:1.5px solid var(--line); border-radius:10px}
.field select.family-list option{padding:5px 6px}
.newfamily{margin:0 0 18px; padding:18px 20px; background:var(--panel-green); border:1px solid var(--line); border-radius:14px}
.newfamily h3{margin:0 0 4px; font-size:1.05rem}

/* --- family typeahead (members) --- */
.fam-picker{position:relative}
.field .fam-input{width:100%}
.fam-results{position:absolute; z-index:20; left:0; right:0; top:100%; margin:4px 0 0; padding:4px; list-style:none; overflow-y:auto; background:var(--white); border:1.5px solid var(--gold-soft); border-radius:12px; box-shadow:0 14px 34px rgba(14,48,89,.16)}
.fam-row{padding:11px 12px; border-radius:8px; cursor:pointer; font-size:.95rem; line-height:1.3; min-height:44px; display:flex; align-items:center}
.fam-row.is-hi{background:var(--panel-green)}
.fam-row.is-add{color:var(--pine); font-weight:600; border-top:1px solid var(--line); border-radius:0 0 8px 8px; margin-top:2px}

/* --- docked detail report (members grid) --- */
/* Desktop only. The breakpoint is 1220px, and that number is arithmetic rather
   than taste: the panel takes 360px out of the page, and the site's own header
   collapses to its compact nav at 860px. Media queries see the VIEWPORT, not
   the narrowed content, so engaging any earlier leaves the header believing it
   has room it no longer has and the brand collides with the menu.
   860 + 360 = 1220. It must stay in step with the matchMedia call in
   includes/inc_detailPanel.php.

   Below it none of this engages and the page behaves exactly as it did before
   the panel existed.

   The panel is fixed to the edge of the WINDOW, not placed in the content
   column, and the page is padded by its width so it can never cover anything.
   On a wide monitor that padding eats margin that was empty anyway - the
   content column caps at 1120px - so the grid keeps its full width. On a
   narrower screen the content shifts instead of shrinking.

   Fixed positioning resolves against the viewport only while no ancestor has a
   transform, filter or will-change. None does today; adding one to main,
   section or .container would silently re-anchor this panel. */
.detail-layout{display:block}
.detail-panel{display:none}
.row-open{padding:0; border:0; background:none; font:inherit; color:var(--pine-deep); text-align:left; cursor:pointer; text-decoration:underline; text-decoration-color:var(--gold-soft); text-underline-offset:3px}
.row-open:hover{color:var(--pine); text-decoration-color:var(--gold)}

@media (min-width:1220px){
  body.dp-open .detail-panel{display:flex; flex-direction:column; position:fixed; top:0; bottom:0;
    width:360px; z-index:60; background:var(--white); overflow:hidden;
    box-shadow:0 0 40px rgba(14,48,89,.18)}
  body.dp-open.dp-right .detail-panel{right:0; border-left:1px solid var(--line)}
  body.dp-open.dp-left  .detail-panel{left:0;  border-right:1px solid var(--line)}

  /* The page is padded so nothing sits under the panel. The sticky site header
     is in normal flow, so it narrows with everything else. */
  body.dp-open.dp-right{padding-right:360px}
  body.dp-open.dp-left {padding-left:360px}

  .admin-table tr.is-open > td{background:#fdf8ee}
}

/* Header pinned, body scrolls: the panel is full height, so a long record
   scrolls within it rather than the page. */
.detail-head{display:flex; align-items:flex-start; gap:10px; padding:16px 18px 12px; border-bottom:1px solid var(--line); background:var(--white); flex:0 0 auto}
.detail-head h2{margin:0; font-size:1.15rem; line-height:1.25; flex:1 1 auto; min-width:0; overflow-wrap:anywhere}
.detail-tools{display:flex; gap:6px; flex:0 0 auto}
.detail-body{padding:16px 18px 24px; overflow-y:auto; flex:1 1 auto}
.dp-photo{display:block; width:120px; height:120px; margin:0 0 16px; border:1px solid var(--line); border-radius:12px; overflow:hidden; background:var(--panel)}
.dp-photo img{width:100%; height:100%; object-fit:cover; display:block}
.dp-list{margin:0 0 14px; padding:0}
.dp-row{display:grid; grid-template-columns:118px 1fr; gap:10px; padding:6px 0; border-bottom:1px solid var(--panel)}
.dp-row:last-child{border-bottom:0}
.dp-row dt{margin:0; font-size:.82rem; color:var(--ink-soft)}
.dp-row dd{margin:0; font-size:.94rem; overflow-wrap:anywhere}
.dp-sub{margin:18px 0 6px; font-size:.95rem; color:var(--pine-deep)}
.dp-quiet .dp-row dd{color:var(--ink-soft); font-size:.86rem}

/* --- the class register, inside the detail report ---
   Absent is what this list gets read for on a Wednesday, so it is the one
   that carries colour; present is deliberately quiet. Reading down a column
   of identical words is how somebody misses a name. */
.dp-sheet{list-style:none; margin:0 0 14px; padding:0}
.dp-sheet li{display:flex; align-items:baseline; gap:10px; padding:6px 0;
             border-bottom:1px solid var(--panel); font-size:.92rem}
.dp-sheet li:last-child{border-bottom:0}
.dp-mark{flex:0 0 58px; font-size:.74rem; letter-spacing:.04em; text-transform:uppercase}
.dp-sheet .is-here .dp-mark{color:var(--ink-soft)}
.dp-sheet .is-away .dp-mark{color:#9a3412; font-weight:700}
.dp-sheet .is-away{font-weight:600}
.dp-sheet .is-off{opacity:.62}

/* --- the household's people, inside the detail report --- */
.dp-people{list-style:none; margin:0 0 14px; padding:0}
.dp-people li{display:flex; align-items:center; gap:10px; padding:7px 0; border-bottom:1px solid var(--panel)}
.dp-people li:last-child{border-bottom:0}
.dp-people li.is-inactive{opacity:.7}
.dp-thumb{width:50px; height:50px; flex:0 0 50px; border-radius:8px; object-fit:cover; display:block; border:1px solid var(--line); background:var(--panel)}
/* An empty box in place of a missing photo, so the names stay in a column. */
.dp-thumb.is-empty{background:var(--panel); border-style:dashed}
.dp-who{display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 8px; min-width:0}
.dp-person{font-size:.95rem; overflow-wrap:anywhere}
.dp-role{font-size:.8rem; color:var(--ink-soft)}

/* Cross-links between the two reports: readable as links, not shouty. */
.dp-row dd a, .dp-person a{color:var(--pine); text-decoration:underline; text-decoration-color:var(--gold-soft); text-underline-offset:3px}
.dp-row dd a:hover, .dp-person a:hover{color:var(--pine-deep); text-decoration-color:var(--gold)}

/* Back links. Two levels down there are two of them side by side, so the
   spacing lives on the row and the links themselves drop their own margin. */
.backlinks{display:flex; flex-wrap:wrap; align-items:center; gap:10px 22px; margin-bottom:16px}
.backlinks .backlink{margin-bottom:0}

/* A second line under a grid cell - an activity's assistant leader sits under
   the leader rather than taking a column most rows would leave empty. */
.admin-table .col-sub{margin-top:3px; font-size:.82rem; color:var(--ink-soft)}

/* Table Information. The table's own name is the heading people look for
   first, so it gets to be loud. */
.ti-name{margin:26px 0 12px; font-size:1.25rem}
.ti-name span{color:var(--gold); font-family:"Fraunces",serif; font-size:1.5rem}
.ti-count{margin:10px 0 24px; color:var(--ink-soft)}
.admin-table code{font-size:.86rem; background:var(--panel); padding:2px 6px; border-radius:6px}

/* The permissions list in a user's report: every right, ticked or not, in one
   column so the eye can run down it. */
.dp-rights{list-style:none; margin:0 0 14px; padding:0}
.dp-rights li{display:flex; align-items:baseline; gap:9px; padding:4px 0; font-size:.92rem}
.dp-rights li.is-off{color:var(--ink-soft)}
.dp-tick{flex:0 0 14px; text-align:center; font-weight:700}
.dp-rights li.is-on .dp-tick{color:#1e6b3a}
.dp-rights li.is-off .dp-tick{color:var(--line)}

/* A paragraph of body text in a report - a memory's summary. */
.dp-text{margin:0 0 14px; font-size:.92rem; line-height:1.55; color:var(--ink)}

/* A placeholder where a grid thumbnail would be, so the column keeps its
   width and the names stay in line whether there is a photo or not. */
.grid-thumb.is-empty{display:block; border-style:dashed}

/* A checkbox with its label on one line. .field label is display:block, which
   would otherwise drop the text under the box. */
.field label.check-line{display:flex; align-items:center; gap:10px; font-weight:600; cursor:pointer}
.field label.check-line input{width:auto; margin:0}

/* ===== Take the Register =====
   A sheet meant to be read at arm's length and clicked down in one go. The
   state lives on aria-pressed, so the buttons announce themselves correctly
   and there is no second class name to keep in step with it. */
.visually-hidden{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0}

/* ===== The chosen row does not say its own name on the bar =====
   #selName was drawn as a chip between the row buttons and the Action menu,
   and it grew and shrank with whatever was clicked: "Donor Deposit #2" is
   wider than "Ed Arthur", so the bar re-wrapped and the Action row jumped
   down the page under the pointer. Picking a row should not move the thing
   you are about to click next.

   HIDDEN, NOT REMOVED, and the difference matters twice over. grid.js reads
   its text to name the record in a confirm - "Remove Donor Deposit #2?" -
   which is the one thing standing between a click and the wrong record; and
   in a toolbar the link between a button and a row is otherwise only a
   highlight, which a screen reader cannot see. So it stays in the page, is
   still updated, is still read aloud, and takes up no room at all.

   The row is highlighted. On a screen, that was always the real answer. */
#selName{position:absolute; width:1px; height:1px; margin:-1px; padding:0;
    overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0}

.wz-pick-class{display:flex; align-items:center; gap:12px; margin:0 0 18px}
.wz-class-form{flex:1 1 auto; display:flex; gap:10px; min-width:0}
.wz-class-form select{width:100%; padding:13px 15px; font:inherit; font-size:1.05rem; color:var(--ink); background:var(--paper); border:1.5px solid var(--line); border-radius:12px}
.wz-arrow{font-size:1.3rem; line-height:1; padding:12px 18px}
.wz-arrow.is-off{opacity:.3; cursor:default}

.wz-sheet{width:100%; border-collapse:collapse; background:var(--white); border:1px solid var(--line); border-radius:12px; overflow:hidden}
.wz-sheet th[scope="row"]{text-align:left; padding:10px 14px; font-size:1.05rem; font-weight:600; border-bottom:1px solid var(--panel)}
.wz-sheet td{border-bottom:1px solid var(--panel); padding:0; width:78px}
.wz-sheet tr:last-child th, .wz-sheet tr:last-child td{border-bottom:0}
.wz-visitors th[scope="row"]{font-weight:700}
.wz-visitors input{width:100%; max-width:150px; padding:10px 12px; font:inherit; font-size:1.05rem; text-align:center; border:1.5px solid var(--ink); border-radius:8px; background:var(--paper)}

.wz-cell{text-align:center}
.wz-cell button{width:100%; min-height:48px; border:0; background:none; font:inherit; font-size:1.1rem; font-weight:800; color:var(--ink-soft); cursor:pointer}
.wz-cell button:focus-visible{outline:3px solid var(--gold); outline-offset:-3px}
/* Unpressed A still reads as the absent side, just quietly. */
.wz-p[aria-pressed="true"]{background:#2f6fbf; color:#fff}
.wz-a[aria-pressed="true"]{background:#c62828; color:#fff}
.wz-p[aria-pressed="false"], .wz-a[aria-pressed="false"]{background:var(--white); color:var(--ink-soft)}

/* Adding somebody written in on the paper sheet, without leaving the page. */
.wz-add{display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin:22px 0 0;
        padding:14px 16px; background:var(--panel); border-radius:12px}
.wz-add label{font-weight:700; white-space:nowrap}
.wz-add select{flex:1 1 240px; min-width:0; padding:11px 13px; font:inherit; color:var(--ink);
               background:var(--white); border:1.5px solid var(--line); border-radius:10px}

.wz-total{margin:16px 0 0; font-size:1.15rem; font-weight:700; color:var(--pine-deep)}

/* ===== The attendance sheet =====
   On screen it is a preview; on paper it is the thing itself. No PDF library:
   every browser's print dialog can save to PDF already. */
.sheet{background:var(--white); border:1px solid var(--line); border-radius:12px; padding:26px 28px; margin:0 0 26px}
.sheet-head{display:flex; justify-content:space-between; align-items:flex-start; gap:20px; flex-wrap:wrap;
            border-bottom:2px solid var(--ink); padding-bottom:12px; margin-bottom:16px}
.sheet-head h2{margin:0; font-size:1.4rem}
.sheet-when{margin:4px 0 0; color:var(--ink-soft)}
.sheet-teacher{text-align:right; font-size:.95rem}
.sheet-label{display:block; font-size:.72rem; letter-spacing:.09em; text-transform:uppercase; color:var(--ink-soft)}

.sheet-roll{width:100%; border-collapse:collapse}
.sheet-roll th{text-align:left; font-size:.78rem; letter-spacing:.07em; text-transform:uppercase;
               color:var(--ink-soft); border-bottom:1px solid var(--ink); padding:0 8px 6px}
.sheet-roll td{border-bottom:1px solid var(--line); padding:9px 8px; font-size:1rem}
.sheet-num{width:34px; text-align:right; color:var(--ink-soft)}
/* Whoever is running the class, at the top of its register. The rule under
   the last of them is what makes the grouping visible on paper - a change of
   order on its own just looks like an odd sort. */
.sheet-roll tr.is-teaching td{font-weight:600}
.sheet-roll tr.sheet-split td{border-top:2px solid var(--ink-soft)}
.sheet-role{margin-left:8px; font-weight:400; font-size:.8rem; color:var(--ink-soft)}
/* Boxes big enough to tick with a pen resting on a knee. */
.sheet-box{width:42px; text-align:center}
.sheet-roll tbody td.sheet-box{border:1px solid var(--ink); height:28px}
.sheet-notes{width:34%}
.sheet-spare td{height:30px}
.sheet-empty{text-align:center; color:var(--ink-soft); font-style:italic}

.sheet-foot{display:flex; gap:34px; flex-wrap:wrap; margin-top:18px; padding-top:14px; border-top:2px solid var(--ink)}
.sheet-rule{display:inline-block; width:88px; border-bottom:1px solid var(--ink); height:1.3em}

@media print {
    /* A grey rule disappears on paper, and the rule under the last teaching
       role is the whole reason the order changed. */
    .sheet-roll tr.sheet-split td{border-top:2px solid #000}
    .sheet-role{color:#444}
    /* Everything that is screen furniture goes: the site is not what is being
       printed, one sheet is. */
    .site-header, .site-footer, .page-head, .no-print, .backlinks, .notice { display:none !important; }
    body{background:#fff; color:#000}
    body.dp-open{padding:0 !important}
    main, section, .container, .container.narrow{margin:0; padding:0; max-width:none; width:auto}

    .sheet{border:0; border-radius:0; padding:0; margin:0;
           page-break-after:always; break-after:page}
    /* The last one must not eject a blank page after it. */
    .sheet:last-child{page-break-after:auto; break-after:auto}
    .sheet-head{border-bottom:2px solid #000}
    .sheet-roll th, .sheet-roll td{border-color:#000}
    .sheet-roll tbody td.sheet-box{border:1px solid #000}
    .sheet-foot{border-top:2px solid #000}
    .sheet-rule{border-bottom:1px solid #000}
    /* A row split across two pages is a row nobody can tick. */
    .sheet-roll tr{page-break-inside:avoid; break-inside:avoid}
    .sheet-roll thead{display:table-header-group}
    a[href]{text-decoration:none; color:#000}
}
@page { margin:14mm; }

/* ===== The reports list =====
   A list rather than a grid of tiles: a report has a name and a line saying
   what it does, and that reads down the page far better than it reads in a
   square. */
.rep-section{margin:28px 0 10px; font-size:1.15rem; padding-bottom:7px; border-bottom:2px solid var(--gold-soft)}
.rep-section:first-child{margin-top:6px}
.rep-list{list-style:none; margin:0 0 6px; padding:0}
.rep-list li{border-bottom:1px solid var(--panel)}
.rep-list li:last-child{border-bottom:0}
.rep-list a{display:flex; align-items:flex-start; gap:14px; padding:14px 10px; text-decoration:none;
            color:var(--pine-deep); border-radius:10px}
.rep-list a:hover{background:var(--panel)}
.rep-ico{flex:0 0 40px; height:40px; display:flex; align-items:center; justify-content:center;
         border-radius:10px; background:var(--panel); color:var(--pine)}
.rep-list a:hover .rep-ico{background:var(--white)}
.rep-text{min-width:0}
.rep-name{display:block; font-weight:700; font-size:1.05rem}
.rep-hint{display:block; margin-top:2px; font-size:.9rem; color:var(--ink-soft)}

/* A builder's link, carried in the label of the control it belongs to:
   "Filter (Manage)". Lighter and smaller than the label, because it is a way
   out of this page rather than part of the question being asked. */
.field label .field-link{margin-left:6px; font-weight:400; font-size:.86rem;
                         color:var(--pine); text-decoration:underline}
.field label .field-link:hover{color:var(--pine-deep)}

/* ===== Report tables =====
   Figures read down a column, so they are right-aligned and tabular: a 9 under
   a 12 has to line up on the units. */
.rep-heading{margin:22px 0 8px; font-size:1.05rem; letter-spacing:.04em; text-transform:uppercase; color:var(--ink-soft)}
.rep-table td.num, .rep-table th.num{text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap}
.rep-table tbody tr.rep-group th{background:var(--panel); font-size:.95rem; text-align:left; padding:8px 12px}
.rep-table .rep-indent{padding-left:26px}
.rep-table tr.rep-sub th, .rep-table tr.rep-sub td{background:var(--paper); font-weight:700; border-top:1px solid var(--line)}
.rep-table tr.rep-total th, .rep-table tr.rep-total td{background:var(--panel); font-weight:800; border-top:2px solid var(--ink)}
.rep-table tr.rep-sub th, .rep-table tr.rep-total th{text-align:left}
.rep-foot{font-size:.85rem; color:var(--ink-soft)}
.rep-foot .sheet-label{display:inline; margin-right:5px}

@media print {
    /* tbody, to match the screen rule it is overriding. Without it the screen
       rule is the more specific of the two and wins even on paper, so this
       line did nothing at all - found while printing the chart of accounts. */
    .rep-table tbody tr.rep-group th{background:#eee}
    .rep-table tr.rep-sub th, .rep-table tr.rep-sub td{background:#f4f4f4; border-top:1px solid #000}
    .rep-table tr.rep-total th, .rep-table tr.rep-total td{background:#e4e4e4; border-top:2px solid #000}
    .rep-table thead{display:table-header-group}
    .rep-table tr{page-break-inside:avoid; break-inside:avoid}
}

/* ===== The quarter grid =====
   A wide table read across rather than down: names pinned at the left, one
   narrow column per meeting. The colours are the point of it - a red streak
   across a row is visible from further away than any number. */
.qa-scroll{overflow-x:auto; -webkit-overflow-scrolling:touch}
.qa-table{width:auto; min-width:100%}
.qa-table th, .qa-table td{padding:6px 9px; font-size:.9rem; white-space:nowrap;
                           border:1px solid var(--line); vertical-align:middle}
/* Names stay put while the dates scroll past them; a P nine weeks along is no
   use if you cannot see whose row it is on. */
.qa-table .qa-name{position:sticky; left:0; z-index:1; text-align:left; min-width:180px}
.qa-table tbody th.qa-name{background:var(--white); font-family:inherit; color:var(--ink); font-weight:500}
.qa-table thead th{position:sticky; top:0; z-index:2}
.qa-table thead th.qa-name{z-index:3}
.qa-table tr.rep-sub th.qa-name{background:var(--paper); font-weight:700}
.qa-table tr.rep-total th.qa-name{background:var(--panel); font-weight:800}
.qa-num{text-align:right; font-variant-numeric:tabular-nums; width:62px}
.qa-mark{text-align:center; width:38px; font-weight:800; font-variant-numeric:tabular-nums}
.qa-month{display:block; font-size:.68rem; font-weight:600; letter-spacing:.05em;
          text-transform:uppercase; color:var(--ink-soft); line-height:1.4}
.qa-table thead th.qa-mark{font-weight:700}
/* The same two colours the register is marked in, so the sheet and the report
   look like the same thing. */
.qa-p{background:#2f6fbf; color:#fff}
.qa-a{background:#c62828; color:#fff}

@media print {
    /* Nine or thirteen date columns do not fit down a portrait page. */
    @page qa-land { size: landscape; margin:10mm; }
    .qa-sheet{page:qa-land}
    .qa-scroll{overflow:visible}
    /* On paper the grid sits at its own width rather than stretching: all the
       slack in a full-width table lands in the name column, and a 700px column
       of short names next to squares you cannot read is the wrong trade. */
    .qa-table{min-width:0}
    .qa-table th.qa-name{width:170px}
    /* Sticky and paged output do not mix: a pinned column reprints itself. */
    .qa-table .qa-name, .qa-table thead th{position:static}
    .qa-table th, .qa-table td{border:1px solid #000; padding:3px 5px; font-size:.78rem}
    .qa-table tbody th.qa-name, .qa-table thead th{background:#fff}
    .qa-table tr.rep-sub th.qa-name{background:#f4f4f4}
    .qa-table tr.rep-total th.qa-name{background:#e4e4e4}
    /* Tints rather than solid blocks: it reads the same and costs a tenth of
       the ink on a page that is mostly squares. */
    .qa-p, .qa-a{-webkit-print-color-adjust:exact; print-color-adjust:exact; color:#000}
    .qa-p{background:#d3e3f5}
    .qa-a{background:#f6d4d4}
}

/* A third badge, for a state that is neither good news nor bad: a job that has
   not run yet is not a failure, and colouring it like one would have somebody
   chasing it. */
.badge-muted{background:var(--panel); color:var(--ink-soft)}

/* ===== Queue these emails =====
   Folded away behind a summary: the report is what the page is for, and the
   send form is a thing you do occasionally. */
.send-card{background:var(--white); border:1px solid var(--line); border-radius:14px;
           padding:0 18px; margin:0 0 18px}
.send-card summary{cursor:pointer; padding:14px 0; font-weight:700; color:var(--pine-deep)}
.send-card[open] summary{border-bottom:1px solid var(--line); margin-bottom:14px}
.send-card form{padding-bottom:18px}
.send-card select[multiple]{width:100%; max-width:520px; padding:8px; font:inherit; font-size:.95rem;
                            border:1.5px solid var(--line); border-radius:10px; background:var(--paper)}
.send-list{list-style:none; margin:8px 0 14px; padding:0; font-size:.93rem}
.send-list li{padding:6px 0; border-bottom:1px solid var(--panel)}
.send-list li:last-child{border-bottom:0}
.send-who{display:inline-block; margin-left:10px; color:var(--ink-soft)}

/* ===== The working grid =====
   A grid you work through rather than read: it fills the window, scrolls
   inside itself, and the actions live once above it instead of on every row.
   Desktop only - below the breakpoint the per-row buttons come back and the
   page behaves exactly as it always has. */

.grid-bar{display:flex; flex-wrap:wrap; gap:14px; align-items:center; justify-content:space-between;
          padding:10px 12px; margin:0 0 10px; background:var(--white);
          border:1px solid var(--line); border-radius:12px}
.grid-bar .left, .grid-bar .right{display:flex; gap:10px; align-items:center; flex-wrap:wrap}
.grid-bar .sep{width:1px; align-self:stretch; background:var(--line); margin:0 4px}
.grid-bar select{padding:8px 10px; font:inherit; font-size:.92rem; color:var(--ink);
                 background:var(--paper); border:1.5px solid var(--line); border-radius:9px}
/* A disabled action has to look disabled, or it reads as a broken button. */
.grid-bar .btn[disabled]{opacity:.42; cursor:not-allowed; pointer-events:none}
.tag-count{font-weight:700; color:var(--pine-deep); white-space:nowrap}
.tag-count.is-none{font-weight:400; color:var(--ink-soft)}

/* The scroller. max-height is set in JS from where this lands on the page, so
   a notice appearing above it cannot push the bottom off screen. With no JS
   there is no max-height and the page scrolls as it always did.
   min-height stays modest on purpose: a floor taller than the space available
   gives you a page scrollbar AND a grid scrollbar, and the wheel then does
   whatever it likes. */
.grid-scroll{overflow-y:auto; overflow-x:auto; min-height:20rem;
             border:1px solid var(--line); border-radius:12px; background:var(--white)}
.grid-scroll .admin-table{border-radius:0; border:0; margin:0}

/* Sticky header. The bottom edge is a box-shadow, NOT a border: with
   border-collapse the borders belong to the table rather than the cell, so
   they do not travel with a stuck header and simply vanish. */
.grid-scroll thead th{position:sticky; top:0; z-index:2;
                      box-shadow:inset 0 -1.5px 0 var(--ink); border-bottom:0}

/* Rows are shorter with the buttons gone - that was the point. */
.grid-tight th, .grid-tight td{padding:6px 12px; font-size:.93rem}

/* A LOG THAT ONLY GROWS, kept to about ten rows.
   Every text anybody sends the church stays on the inbound list, which is
   right - a question nobody answered is worse than one nobody received - but
   a section that gets taller for ever pushes whatever is under it off the
   bottom of the page.
   TEN ROWS, MEASURED AND NOT GUESSED: 62px a row plus a 37px header on a wide
   screen. The first guess was 26rem, which drew six.

   Below 1220px an existing rule puts the full padding back for bigger touch
   targets, and the same height then shows about nine - still "about ten", and
   not worth a second breakpoint. That rule is also why the first measurement
   was wrong: the pane it was taken in was 800px wide.

   The header sticks, so the twentieth row still has column names above it;
   the bottom edge is a box-shadow for the reason .grid-scroll says. */
.log-scroll{max-height:41rem; overflow-y:auto; overflow-x:auto;
            border:1px solid var(--line); border-radius:12px; background:var(--white)}
.log-scroll .admin-table{border-radius:0; border:0; margin:0}
.log-scroll thead th{position:sticky; top:0; z-index:2; background:var(--paper);
                     box-shadow:inset 0 -1.5px 0 var(--ink); border-bottom:0}
.grid-tight .grid-thumb{width:34px; height:34px; border-radius:6px}
.grid-tight tbody tr{cursor:default}
/* scroll-margin so scrollIntoView does not park a row underneath the header. */
.grid-tight tbody tr, [data-grid] tbody tr{scroll-margin-top:3rem}

/* The selected row drives the buttons AND the confirm dialog, so it has to be
   unmistakable - a tint alone is fine for "this is what the panel shows", not
   for "this is what Delete will act on".

   Keyed on [data-grid] as well as .grid-tight, because .grid-tight is only
   how TIGHT the rows are. Attendance Dates and Attendance are selectable and
   are not tight, so the row that Delete was about to act on looked exactly
   like every other row - the toolbar changed and nothing else did. */
.grid-tight tbody tr.is-sel > td, .grid-tight tbody tr.is-sel > th,
[data-grid] tbody tr.is-sel > td, [data-grid] tbody tr.is-sel > th{
    background:#fbf1d9; box-shadow:inset 0 0 0 9999px rgba(0,0,0,0)}
.grid-tight tbody tr.is-sel > td:first-child, .grid-tight tbody tr.is-sel > th:first-child,
[data-grid] tbody tr.is-sel > td:first-child, [data-grid] tbody tr.is-sel > th:first-child{
    box-shadow:inset 4px 0 0 var(--gold)}

.tag-col{width:38px; text-align:center}
.tag-col input[type="checkbox"]{width:17px; height:17px; accent-color:var(--pine); cursor:pointer; margin:0}
/* A tag that failed to save flashes back, so nobody acts on a count the
   server does not share. */
.tag-col.is-bad{background:#f6e2df}

@media (min-width:1220px){
    /* The toolbar is live here, so the per-row buttons stand down. They stay
       in the markup on purpose: below this width they come back, and mobile
       keeps the page it has always had with no second layout to maintain.

       Keyed on data-row-tools, which a list sets ONLY when it has a toolbar
       carrying Edit, Make inactive and Delete for the selected row. Nothing
       else may hide those buttons, because nothing else puts them back.

       This is the second time that has had to be narrowed. It was keyed on
       .grid-tight and hid the buttons on the Filters list, which uses the
       same tight rows and has no toolbar. Re-keying it on [data-grid] fixed
       that and then did the same thing again the moment data-grid was added
       to six more lists - for the tick boxes, which have nothing to do with
       row buttons - and Edit and Delete quietly disappeared on every one of
       them above 1220px. A rule that hides something must be keyed on the
       thing that REPLACES it, not on whatever markup happens to sit nearby. */
    [data-grid][data-row-tools] .admin-actions{display:none}

    /* And the column with them. Hiding only the buttons leaves a strip of
       empty cells under a heading that says Actions, which reads as a fault
       rather than as a design - it is what made this worth reporting in the
       first place. A list marks that column and it goes with them. */
    [data-grid][data-row-tools] .col-actions{display:none}
}
@media (max-width:1219px){
    .grid-bar .desk-only{display:none}
    .grid-scroll{max-height:none !important; min-height:0; border:0; border-radius:0}
    [data-grid][data-row-tools] .admin-actions{display:flex}
    .grid-scroll thead th{position:static; box-shadow:none}
    .grid-tight th, .grid-tight td{padding:12px 14px; font-size:.96rem}
    .grid-tight .grid-thumb{width:52px; height:52px; border-radius:8px}
}

/* Edit lives in the toolbar AND at the top of the detail panel: the panel is
   already showing the record, so it is the other place a hand reaches. */
.dp-actions{margin:0 0 14px}

/* ===== The filter builder =====
   The controls sit in table cells rather than in .field wrappers, so none of
   the form styling reached them and they came out as raw browser selects in a
   styled table - which reads as half-finished rather than as deliberate. */
.cond-table{width:100%}
.cond-table th{font-size:.8rem; letter-spacing:.04em; text-transform:uppercase}
.cond-table td{padding:7px 8px; vertical-align:middle}
.cond-table select,
.cond-table input[type="text"]{
    width:100%; padding:9px 11px; font:inherit; font-size:.93rem; color:var(--ink);
    background:var(--paper); border:1.5px solid var(--line); border-radius:9px}
.cond-table select:focus,
.cond-table input[type="text"]:focus{outline:none; border-color:var(--pine); background:var(--white)}
/* The bracket columns are one character wide; centring stops them reading as
   empty boxes somebody forgot to fill in. */
.cond-table .cond-group{width:66px}
.cond-table .cond-group select{text-align:center; padding-left:6px; padding-right:6px; font-weight:700}
.cond-table .cond-conj{width:96px}
.cond-table .cond-x{width:44px; text-align:center}
.cond-table .cond-clear{padding:6px 10px; line-height:1; border-radius:8px}
.cond-table .cond-val2{margin-top:6px}
@media (max-width:900px){
    .cond-table select, .cond-table input[type="text"]{font-size:.88rem; padding:7px 8px}
}

/* A select sitting in the toolbar rather than in a .field got none of the form
   styling and came out as a raw browser control next to styled buttons. Only
   the Filters page and the Members grid have one. */
.admin-bar select{padding:8px 11px; font:inherit; font-size:.92rem; color:var(--ink);
                  background:var(--paper); border:1.5px solid var(--line); border-radius:9px}
.admin-bar select:focus{outline:none; border-color:var(--pine); background:var(--white)}
.admin-bar label{margin:0}

/* A filter's lines, read as a list rather than opened one at a time. */
.dp-lines{margin:0 0 10px; padding-left:22px; font-size:.95rem; line-height:1.7}
.dp-lines li{margin-bottom:3px}
.dp-lines i{color:var(--pine-deep); font-style:normal; background:var(--panel);
            padding:1px 6px; border-radius:6px}

/* The row whose filter is loaded in the form above. Distinct from .is-open,
   which the detail panel uses for the row you are reading. */
.admin-table tr.is-editing > td{background:#fbf1d9}
.admin-table tr.is-editing > td:first-child{box-shadow:inset 4px 0 0 var(--gold)}

/* ---- the two-list column picker (Grids, Step 1) --------------------------
   Two boxes and four buttons, because that is what everybody has used since
   Windows 3.1 and nothing about choosing eight things out of thirty-six is
   improved by inventing something newer. Side by side while there is room,
   stacked below 820px with the buttons turned to lie across the middle. */
.pick-two{display:grid; grid-template-columns:1fr auto 1fr; gap:14px;
          align-items:start; margin-top:6px}
.pick-side h3{margin:0 0 7px; font-size:.95rem; font-weight:700; color:var(--ink)}
.pick-side h3 .muted{font-weight:500}
.pick-side select{width:100%; padding:6px; font:inherit; font-size:.93rem;
                  border:1.5px solid var(--line); border-radius:10px;
                  background:var(--white); color:var(--ink)}
.pick-side select option{padding:4px 7px; border-radius:6px}
.pick-mid{display:flex; flex-direction:column; gap:8px; padding-top:30px}
.pick-mid .btn{min-width:44px; justify-content:center}

@media (max-width: 820px){
  .pick-two{grid-template-columns:1fr}
  .pick-mid{flex-direction:row; justify-content:center; padding-top:0}
}

/* ---- the column settings table (Grids, Step 2) --------------------------
   A row is a button: click it and it loads into the editor above. The saved
   flash is a word rather than a dialog, because saving one column of eight is
   not an event worth stopping for. */
.col-table tbody tr{cursor:pointer}
.col-table tbody tr:hover > td{background:var(--panel)}
.col-flash{font-size:.9rem; font-weight:700; color:var(--pine-deep);
           background:#fdf8ee; border:1px solid var(--gold-soft);
           padding:3px 10px; border-radius:999px}
.col-edit{border-bottom:1px solid var(--line); padding-bottom:14px; margin-bottom:4px}

/* ---- section tabs (Grids: Report / Columns / Report order) ---------------
   One section at a time, so reaching the third does not mean scrolling past
   the other two. Switching is done in the browser - the two lists below save
   as you go and may be holding unsaved edits in their boxes. */
.tabs{display:flex; gap:4px; flex-wrap:wrap; margin:18px 0 0;
      border-bottom:2px solid var(--line)}
.tabs .tab{appearance:none; border:0; background:none; cursor:pointer;
           font:inherit; font-weight:600; font-size:.98rem; color:var(--ink-soft);
           padding:10px 18px; border-radius:10px 10px 0 0;
           border-bottom:3px solid transparent; margin-bottom:-2px}
.tabs .tab:hover{color:var(--ink); background:var(--panel)}
.tabs .tab[aria-selected="true"]{color:var(--pine-deep); background:var(--white);
                                 border-bottom-color:var(--gold)}
.tabs .tab:focus-visible{outline:2px solid var(--pine); outline-offset:-2px}
/* Belt and braces: the hidden attribute already does this, but a stylesheet
   that later gives .tab-panel a display would silently turn every panel on. */
.tab-panel[hidden]{display:none}
.tab-panel > h2.rep-heading:first-child{margin-top:18px}

/* ---- Save as (Grids) ------------------------------------------------------
   Asked for inline rather than in a prompt box, so the name can be typed,
   corrected and read before anything happens. Hidden until it is wanted. */
.save-as{display:flex; gap:10px; flex-wrap:wrap; align-items:center;
         margin-top:14px; padding:14px; border:1px solid var(--gold-soft);
         border-radius:12px; background:#fdf8ee}
.save-as label{font-weight:600; font-size:.95rem; color:var(--ink)}
.save-as input[type="text"]{padding:9px 12px; font:inherit; font-size:.95rem;
                            min-width:230px; border:1.5px solid var(--line);
                            border-radius:10px; background:var(--white)}
.save-as[hidden]{display:none}

/* ===== A custom grid, printed =====
   The figures come from gridReportRun(); this is only how they look. Breaks
   and totals have to read as different KINDS of line at a glance, or a long
   report is a wall of numbers. */
.gr-sheet{background:var(--white); border:1px solid var(--line); border-radius:12px;
          padding:18px; margin-top:14px; overflow-x:auto}
.gr-head{border-bottom:2px solid var(--gold-soft); padding-bottom:10px; margin-bottom:12px}
.gr-head h2{margin:0 0 3px; font-size:1.3rem}
.gr-head p{margin:0; font-size:.92rem}

.gr-table{width:100%; border-collapse:collapse; font-size:.92rem}
.gr-table th{text-align:left; font-weight:700; padding:7px 9px;
             border-bottom:2px solid var(--line); white-space:nowrap}
.gr-table td{padding:6px 9px; border-bottom:1px solid var(--line-soft, #eee);
             vertical-align:top}

/* A group heading: the value it broke on, spanning the whole width. */
.gr-table tr.gr-break > td{background:var(--panel); font-size:.95rem;
                           padding-top:12px; border-bottom:1px solid var(--line)}
.gr-table tr.gr-break-1 > td{background:transparent; padding-left:22px}

.gr-table tr.gr-total > td{background:#fdf8ee; font-weight:600;
                           border-top:1px solid var(--gold-soft);
                           border-bottom:1px solid var(--gold-soft)}
.gr-table tr.gr-grand > td{background:var(--panel); font-weight:700;
                           border-top:2px solid var(--ink-soft)}
/* The record count, on a row of its own across the whole table. It used to
   share the first cell with that column's total, and the first column is
   usually the ID - too narrow to hold a sentence, so it wrapped to four lines
   on screen and was cut to "All r..." in the PDF. Nothing else can be in this
   row, so there is nothing for it to collide with. The top border is only
   drawn when it is the ONLY total row; otherwise the row above has already
   drawn the line and two would be a double rule. */
.gr-table tr.gr-count > td{background:var(--panel); font-weight:700; white-space:nowrap;
                           border-top:2px solid var(--ink-soft)}
.gr-table tr.gr-grand + tr.gr-count > td{border-top:0}
.gr-pagebreak > td{padding:0; border:0; height:0}

@media print {
    .gr-sheet{border:0; border-radius:0; padding:0; margin:0; overflow:visible}
    .gr-head{border-bottom:2px solid #000}
    .gr-table{font-size:.8rem}
    .gr-table th{border-bottom:1px solid #000}
    .gr-table td{border-bottom:1px solid #ddd}
    /* The column headings reprint at the top of every page. A table that runs
       to four pages is unreadable from page two without them. */
    .gr-table thead{display:table-header-group}
    /* A record split across two pages is a record nobody can read. */
    .gr-table tr{page-break-inside:avoid; break-inside:avoid}
    /* Where the report order asked for a new page. */
    .gr-pagebreak{page-break-after:always; break-after:page}
    .gr-table tr.gr-total > td{background:#f4f4f4; border-top:1px solid #000;
                               border-bottom:1px solid #000}
    .gr-table tr.gr-grand > td{background:#e8e8e8; border-top:2px solid #000}
    .gr-table tr.gr-count > td{background:#e8e8e8; border-top:2px solid #000}
    .gr-table tr.gr-grand + tr.gr-count > td{border-top:0}
    .gr-table tr.gr-break > td{background:#f4f4f4}
    /* A group heading with nothing under it on the same page is a heading on
       the wrong page. */
    .gr-table tr.gr-break{page-break-after:avoid; break-after:avoid}
    /* Landscape is NOT set here. A named page (@page gr-land, page: gr-land)
       reads well and does not reliably reach the printer - Chromium only
       learned it recently, Firefox never has - so a grid marked Landscape
       printed portrait with nothing to say why. rep_gridReport.php puts a
       plain @page in its own head instead, which every browser understands
       and which cannot leak onto another page of the site. */
}

/* ===== The staff noticeboard =====
   Above the tiles on the Control Panel, because that is where somebody lands
   after signing in and so where a note cannot be missed. An Alert looks
   different from a Notice; if everything shouted, nothing would. */
.notice-board{margin:0 0 22px}
.notice-item{background:var(--white); border:1px solid var(--line);
             border-left:4px solid var(--gold); border-radius:12px;
             padding:13px 16px; margin-bottom:10px}
.notice-item.is-alert{border-left-color:#c62828; background:#fff8f7}
.notice-head{display:flex; gap:10px; flex-wrap:wrap; align-items:baseline}
.notice-head .muted{font-size:.9rem}
.notice-body{margin:7px 0 9px; color:var(--ink)}
.notice-item .inline-form{margin:0}

/* Who a notice goes to: a column of names that stays readable at twenty. */
.notice-who{display:grid; grid-template-columns:repeat(auto-fill, minmax(210px, 1fr));
            gap:6px 18px; padding:12px; border:1px solid var(--line);
            border-radius:10px; background:var(--white)}

/* The eye on a password box (includes/inc_passwordToggle.php).
   .pw-wrap is what the button is positioned against; the input keeps all its
   own styling from .field input and only gives up room on the right for the
   button to sit in, so a long password never runs underneath it. */
.pw-wrap{position:relative; display:block}
.pw-wrap input{padding-right:48px}
.pw-eye{position:absolute; top:0; right:0; height:100%; width:46px; display:flex;
        align-items:center; justify-content:center; padding:0; margin:0;
        background:none; border:0; border-radius:0 12px 12px 0; cursor:pointer;
        color:var(--ink-soft); line-height:0}
.pw-eye:hover{color:var(--pine)}
/* Keyboard users must be able to see where they are. The outline sits inside
   so it is not clipped by the input's rounded corner. */
.pw-eye:focus-visible{outline:2px solid var(--pine); outline-offset:-3px; color:var(--pine)}
.pw-eye[hidden]{display:none}
.pw-eye .pw-ic-hide{display:none}
.pw-eye.is-shown .pw-ic-show{display:none}
.pw-eye.is-shown .pw-ic-hide{display:block}
.pw-eye.is-shown{color:var(--pine)}

/* ===========================================================================
   The admin header: shortcuts, and the user menu
   ===========================================================================
   Behind the login the public links are gone, so these sit in the row they
   used to occupy. The header does not get taller, which is the point: the
   shortcuts are free, and every pixel reclaimed below is kept. */
.ah-bar{display:flex; align-items:center; gap:6px; flex-wrap:wrap; margin-left:auto}
.ah-ico{display:grid; place-items:center; width:40px; height:40px; border-radius:50%;
        color:var(--pine); background:var(--panel); border:1px solid transparent;
        text-decoration:none; transition:background .12s ease, border-color .12s ease}
.ah-ico:hover{background:var(--white); border-color:var(--gold-soft)}
.ah-ico:focus-visible{outline:2px solid var(--pine); outline-offset:2px}
/* Where you are now, so the bar answers "which page is this" as well as
   "where can I go". */
.ah-ico.is-here{background:var(--white); border-color:var(--gold); color:var(--pine-deep)}
/* The label is for a screen reader and for the hover tooltip; drawing it would
   turn a row of icons back into a row of buttons. */
.ah-name{position:absolute; width:1px; height:1px; margin:-1px; padding:0;
         overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0}

/* The star that pins the page you are on. A form, not a script, so it works
   with JavaScript off - and it sits in the header, so no admin page has to
   know it exists. */
.ah-pin-form{display:flex; margin:0 0 0 8px}
.ah-pin{display:grid; place-items:center; width:36px; height:36px; padding:0;
        border:1px solid transparent; border-radius:50%; background:none;
        color:var(--ink-soft); cursor:pointer}
.ah-pin:hover{color:var(--gold); background:var(--panel)}
.ah-pin.is-on{color:var(--gold)}
.ah-pin:focus-visible{outline:2px solid var(--pine); outline-offset:2px}

.ah-user{position:relative; margin-left:10px}
.ah-user-btn{display:flex; align-items:center; gap:9px; padding:5px 10px 5px 5px;
             background:none; border:1px solid var(--line); border-radius:999px;
             cursor:pointer; font:inherit; color:var(--ink)}
.ah-user-btn:hover{background:var(--panel)}
.ah-user-btn:focus-visible{outline:2px solid var(--pine); outline-offset:2px}
.ah-avatar{display:grid; place-items:center; width:32px; height:32px; border-radius:50%;
           background:var(--pine); color:var(--white); font-weight:700; font-size:.82rem;
           letter-spacing:.02em}
.ah-user-name{font-weight:600; font-size:.95rem; white-space:nowrap}
.ah-caret{color:var(--ink-soft); flex:0 0 auto}

.ah-menu{position:absolute; right:0; top:calc(100% + 8px); min-width:220px; z-index:60;
         background:var(--white); border:1px solid var(--line); border-radius:12px;
         box-shadow:0 14px 40px rgba(0,0,0,.16); padding:6px; display:flex;
         flex-direction:column}
.ah-menu[hidden]{display:none}
.ah-menu-who{margin:4px 10px 6px; font-weight:700; color:var(--pine-deep); font-size:.95rem}
.ah-menu a{display:block; padding:9px 11px; border-radius:8px; text-decoration:none;
           color:var(--ink); font-size:.95rem}
.ah-menu a:hover{background:var(--panel); color:var(--pine)}
.ah-menu a:focus-visible{outline:2px solid var(--pine); outline-offset:-2px}
.ah-menu-rule{height:1px; background:var(--line); margin:6px 4px}
.ah-menu-out{color:var(--pine-deep); font-weight:600}

/* ===========================================================================
   The menu bar (Ed, 7 Nov 2026)
   ===========================================================================
   "I know I am old fashioned... I want to give an option if they are on a
   computer to use a menu system." Drop-downs across the header for whoever
   turns them on, and not one byte of markup for anybody who has not.

   EVERY RULE THAT CHANGES THE REST OF THE HEADER IS KEYED OFF .am-bar, so a
   person without the menu sees the header exactly as it was. */
/* THE ROW IS WIDER WHEN THE MENU IS ON. The page below is still 1120;
   this is the chrome, and seven menus beside eight shortcuts do not fit in
   it. Measured at 1366 - Ed's screen - where the row wanted 1210px. */
/* MEASURED AT 1366, WHICH IS ED'S SCREEN. The row holds the church's name,
   seven menus, eight shortcuts, the pin and the user button: 1360px wanted
   against 1318px of room. The 16px gap between the header's parts is 64px of
   that, so with the menu on the parts sit closer and the padding comes in.
   None of this touches the header of somebody without the menu. */
.nav-wrap.nav-menu{max-width:1500px; gap:10px; padding:0 16px}
.am-bar{display:flex; align-items:center; gap:1px; margin-left:4px}
.am-item{position:relative}
/* TIGHT, because there are seven of them and the shortcuts are still to
   come. 8px of padding a side rather than 10, and the label a shade
   smaller, is 50px back across the bar - which was the difference between
   fitting at 1366 and not. */
.am-btn{display:flex; align-items:center; gap:4px; padding:8px 8px;
        border:1px solid transparent; border-radius:8px; background:none;
        color:var(--ink); font:inherit; font-weight:600; font-size:.92rem;
        cursor:pointer; white-space:nowrap}
.am-btn svg{color:var(--ink-soft)}
.am-btn:hover, .am-btn[aria-expanded="true"]{background:var(--panel)}
/* The menu holding the page you are on, so the bar answers "where am I"
   even with every drop shut. */
.am-btn.is-here{color:var(--pine-deep)}
.am-btn.is-here svg{color:var(--gold)}
.am-btn:focus-visible{outline:2px solid var(--pine); outline-offset:2px}

.am-drop{position:absolute; left:0; top:calc(100% + 6px); min-width:250px; z-index:60;
         background:var(--white); border:1px solid var(--line); border-radius:12px;
         box-shadow:0 14px 40px rgba(14,48,89,.16); padding:6px;
         /* Accounting runs to sixteen items. A drop taller than the window
            is a drop whose last item cannot be clicked. */
         max-height:calc(100vh - 110px); overflow-y:auto}
.am-drop[hidden]{display:none}
.am-drop a{display:flex; align-items:center; gap:10px; padding:8px 11px;
           border-radius:8px; text-decoration:none; color:var(--ink);
           font-size:.94rem; white-space:nowrap}
.am-drop a svg{color:var(--pine); flex:0 0 auto}
.am-drop a:hover, .am-drop a:focus-visible{background:var(--panel); color:var(--pine);
                                           outline:none}
.am-drop a.is-here{background:var(--panel-green); color:var(--pine-deep); font-weight:600}
.am-head{margin:6px 11px 4px; font-size:.74rem; font-weight:700; letter-spacing:.08em;
         text-transform:uppercase; color:var(--ink-soft)}
.am-rule{height:1px; background:var(--line); margin:6px 4px}

/* The toggle in the user menu. A form, so it looks like the links around it
   but posts rather than follows. */
.ah-menu-form{margin:0}
.ah-menu-form button{display:block; width:100%; text-align:left; padding:9px 11px;
                     border:0; border-radius:8px; background:none; color:var(--ink);
                     font:inherit; font-size:.95rem; cursor:pointer}
.ah-menu-form button:hover{background:var(--panel); color:var(--pine)}
.ah-menu-form button:focus-visible{outline:2px solid var(--pine); outline-offset:-2px}

/* ---- ROOM FOR ALL OF IT ON ONE ROW.
   The header row holds the brand, seven menus, however many shortcuts and
   the user button. With the menu on, the shortcuts stop wrapping and go a
   little tighter, and the user button is just the initials - the name is
   inside the menu anyway. */
.am-bar ~ .ah-bar{flex-wrap:nowrap; gap:2px}
.am-bar ~ .ah-bar .ah-ico{width:32px; height:32px}
/* And the brand keeps its name: the shortcuts give way first, because the
   church's name read as "First Baptist Chu..." is worse than one fewer icon.

   A BREAKPOINT IS A GUESS ABOUT A CHURCH. These were measured on this
   church's name and Ed's eight shortcuts; a longer name, or a ninth
   shortcut, would put the row over again at some width nobody tried. So the
   shortcut bar is allowed to lose its last icon rather than push the user
   button off the end: a clipped row of icons is a nuisance, and a header
   with no way to log out is not. */
.nav-wrap.nav-menu .brand{flex-shrink:0}
.am-bar ~ .ah-bar{min-width:0; overflow:hidden}
.am-bar ~ .ah-user .ah-user-name{display:none}
/* ---- THREE RUNGS, AND EVERY ONE OF THEM MEASURED.
   Seven menus come to 653px. With the church's name (235), the pin and the
   user button, the row needs about 1080px before a single shortcut is drawn,
   and about 1330 with Ed's eight.

   FEA let the shortcuts go at 1100 and the menus at 900. Those numbers are
   FEA's, and four menus; seven do not fit in them. Copying them here put a
   sideways scrollbar on every width from 1280 down - which is a laptop, not
   an edge case.

   1340 and up   the menus and the shortcuts
   1100 to 1339  the menus; the shortcuts go, and the menus reach every page
                 they did
   under 1100    the menus go and the shortcuts come back, because a row of
                 drop-downs is a desktop idea and eight small icons are not.
                 The control panel is the way in, as it always was. */
@media (min-width: 1100px) and (max-width: 1339px){
    .am-bar ~ .ah-bar{display:none}
}
@media (max-width: 1099px){
    .am-bar{display:none}
    /* The wide row and the tight gap were for the menus. Without them the
       header is the one everybody else has. */
    .nav-wrap.nav-menu{max-width:var(--maxw); gap:16px; padding:0 24px}
}

/* ===========================================================================
   Compact chrome, behind the login only
   ===========================================================================
   Measured before this existed, on a 1440x900 screen: 75px of header, 372px of
   page heading and 56px of padding - 503px, 56% of the window, before the
   first row of data appeared. The public site keeps its proportions; a page
   somebody spends an hour entering attendance into does not want them. */
body.admin .page-head{padding:16px 0 12px}
body.admin .page-head h1{font-size:1.65rem; margin:0 0 2px; line-height:1.2}
body.admin .page-head .section-tag{font-size:.85rem; margin-bottom:2px}
/* The lede under the heading explains the page to somebody seeing it for the
   first time. After the first time it is a line of text between them and the
   work, so it stays for a screen reader and goes from the screen. */
body.admin .page-head > .container > p:not(.section-tag){
    position:absolute; width:1px; height:1px; margin:-1px; padding:0;
    overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0}
body.admin section{padding:16px 0}
body.admin .backlinks{margin-bottom:6px}
body.admin .site-footer{padding-top:18px}

@media (max-width: 900px) {
    /* The icons are the first thing to go when the row runs out of room; the
       user menu is not, because Log out lives in it. */
    .ah-bar{display:none}
    .ah-user-name{display:none}
    body.admin .page-head h1{font-size:1.4rem}
}

/* Picking your own shortcuts (admin_myShortcuts.php). A label wrapping the
   tick box, so the whole card is the hit area rather than a 16px square. */
.sc-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:10px}
.sc-item{display:flex; align-items:center; gap:10px; padding:9px 12px; margin:0;
         background:var(--white); border:1px solid var(--line); border-radius:10px;
         cursor:pointer; font-weight:500}
.sc-item:hover{border-color:var(--gold-soft)}
.sc-item.is-on{border-color:var(--gold); background:var(--panel)}
.sc-item input[type="checkbox"]{width:16px; height:16px; min-width:16px; flex:0 0 auto;
                                margin:0; padding:0; border:0; border-radius:0;
                                background:none; accent-color:var(--pine); cursor:pointer}
.sc-ico{display:grid; place-items:center; width:30px; height:30px; flex:0 0 auto;
        border-radius:50%; background:var(--panel); color:var(--pine)}
.sc-item.is-on .sc-ico{background:var(--white)}
.sc-label{flex:1 1 auto; font-size:.95rem}
.sc-ord{width:64px; flex:0 0 auto; padding:5px 8px!important; font-size:.9rem!important;
        text-align:right; border-radius:8px!important}

/* ---------------------------------------------------------------------------
   WRITING A CHEQUE. Two rows of controls above the cheque itself - where it is
   drawn on, and how it is being paid - then the cheque, then the stub.

   The sums sit on the second row rather than beside the stub because the one
   that matters is the difference, and it has to be in sight while somebody is
   typing amounts, not under the table they are typing into. */
.check-top{display:flex; flex-wrap:wrap; gap:16px; align-items:flex-end; margin-bottom:12px}
.check-top .field{margin-bottom:0}
.check-balance{margin:0 0 10px; font-size:1.15rem}
.check-balance b{margin-left:8px}
.check-actions{display:flex; gap:10px; margin:0 0 10px auto}

.check-bar{display:flex; flex-wrap:wrap; gap:18px; align-items:center;
    padding:12px 16px; margin-bottom:18px; background:var(--panel-green);
    border:1px solid var(--line); border-radius:12px}
.check-opt{display:inline-flex; align-items:center; gap:8px; font-weight:600}
/* A ROW OF THEM, under one label. Named here rather than borrowed from the
   Financial Reports wizard, which is where .fr-ticks lives: a layout class
   belongs to a layout, not to the page that happened to need it first. */
.check-row{display:flex; flex-wrap:wrap; align-items:center; gap:10px 22px}
/* A BOX THE SYSTEM KEEPS. It reads as a figure rather than as something to
   type in, so nobody tries and then wonders why it would not take. */
.field input[readonly]{background:var(--panel); color:var(--ink-soft); cursor:default}
/* A label with something beside it - "Create new" on the Vendor line. Baseline,
   not centre, so the two read as one line of text rather than two controls. */
.label-row{display:flex; align-items:baseline; justify-content:space-between; gap:10px}
.label-row label{margin:0}
.vendor-new{font-size:.85rem; font-weight:600; white-space:nowrap}
.check-opt input{width:auto; margin:0}

.check-sums{display:flex; gap:18px; margin:0 0 0 auto}
.check-sums div{text-align:right}
.check-sums dt{font-size:.82rem; color:var(--ink-soft); font-weight:600}
.check-sums dd{margin:0; font-variant-numeric:tabular-nums; font-size:1.05rem}
.check-sums .is-diff dd{border-top:2px solid var(--line); padding-top:2px}
.check-sums dd.is-ok{color:var(--pine)}
.check-sums dd.is-off{color:#9c2c2c; font-weight:700}

/* The cheque and the panel beside it. The panel is where the budget figures
   go when there are budgets to read. */
.check-layout{display:flex; gap:20px; align-items:flex-start; flex-wrap:wrap}
.check-main{flex:1 1 640px; min-width:0}
.check-side{flex:0 1 280px; padding:16px 18px; background:var(--white);
    border:1px solid var(--line); border-radius:14px}
.check-side h3{margin:0 0 8px; font-size:1rem}

/* THE CHEQUE LOOKS LIKE A CHEQUE. A dark surround and a pale face, the way
   one sits in a chequebook, so the eye knows at a glance which part of this
   page is the cheque and which part is the stub underneath it.

   The ring is a box-shadow rather than a wrapper div: it needs no markup, it
   cannot be mistaken for a border by anything measuring the box, and the
   margin is what keeps it from being clipped by the column. */
.check-face{position:relative; padding:22px 24px;
    margin:6px 14px 30px; background:var(--white);
    border:1px solid var(--line); border-radius:10px;
    box-shadow:0 0 0 14px var(--pine-deep), 0 14px 30px rgba(14,48,89,.22)}
/* A line of guilloche along the top, suggested rather than drawn: a repeating
   tint is all it takes to read as security paper, and it costs no image. */
.check-face::before{content:""; position:absolute; left:0; right:0; top:0; height:6px;
    border-radius:10px 10px 0 0;
    background:repeating-linear-gradient(135deg,
        var(--panel-green) 0 8px, var(--white) 8px 16px)}
.check-face .field label{color:var(--pine-deep)}
.check-line{display:flex; flex-wrap:wrap; gap:16px; align-items:flex-start}
/* The first line of the cheque or the slip: the vendor - or the name, on a
   deposit - takes whatever room there is, and the number and the date stack at
   the right-hand edge, the way they sit on a chequebook. Its own name, because
   .check-top is the row above the cheque entirely. */
.check-headline .vendor-pick{flex:1 1 340px; min-width:0}
.check-headline > .field{flex:1 1 340px}
/* Pushed right whatever is beside it: on a transfer the amount is a narrow box
   and the stack sat against it in the middle of the slip. */
.check-headline .check-nbrs{margin-left:auto}
.check-nbrs{flex:0 0 190px; display:flex; flex-direction:column}
.check-nbrs .field{margin-bottom:10px}
.check-nbrs .field:last-child{margin-bottom:0}
.check-line > .field{flex:1 1 220px; min-width:0; margin-bottom:14px}
.check-amount{text-align:right; font-variant-numeric:tabular-nums; font-size:1.1rem}

/* The stub. Tight rows, because eight lines of a cheque should be readable
   without scrolling the page. */
.check-stub td{padding:6px 8px; vertical-align:top}
.check-stub .field{margin-bottom:0}
.check-stub .picker-field label{display:none}
/* Every control fills its cell, and the cells are what the header says they
   are: table-layout:fixed, so a long account name cannot widen the column it
   is in and squeeze the one next to it. */
.check-stub{table-layout:fixed; width:100%}
.check-stub input, .check-stub select{width:100%; padding:8px 10px; font-size:.95rem}
.check-stub .fam-input{width:100%}
.check-stub .picker-chosen{display:none}
.stub-amount{font-variant-numeric:tabular-nums}

@media (max-width:860px){
    .check-sums{margin-left:0; width:100%; justify-content:space-between}
    .check-actions{margin-left:0}
}

/* ===== Enter Bills (admin_apBill.php) =====
   The bill sits in a frame the way the cheque sits in its ring, so the eye
   knows at a glance which half of the page is the document and which half is
   what it was for. The face is pale blue for a charge, pastel red for a
   credit, violet for a credit card - Ed: a credit must not be mistaken for a
   bill, and a card charge must not be mistaken for either. */
.apb-top{align-items:flex-end}
.apb-owed{margin-left:8px; padding:2px 8px; border-radius:6px;
    background:var(--panel); font-variant-numeric:tabular-nums}
.apb-frame{padding:14px; margin:0 0 16px; border-radius:14px;
    background:var(--pine-deep); box-shadow:0 14px 30px rgba(14,48,89,.22)}
.apb-face{position:relative; padding:18px 20px; border-radius:10px;
    background:#dfe9f6; transition:background .2s}
.apb-face.is-credit{background:#f6e2df; box-shadow:inset 0 0 0 3px #a03a2a}
.apb-face.is-card{background:#ece4f7}
.apb-face.is-card.is-credit{background:#f6e2df}
.apb-face .field{margin-bottom:0}
.apb-face label{color:var(--pine-deep); font-weight:600}
/* The vendor takes the width, and both of the things that belong to it -
   Edit Address and Create new - sit at the right-hand end of its label row.
   IN THE FLOW, NOT PINNED: the link was absolutely positioned at the top
   right of this block, which is where the picker's own label row puts Create
   new, so choosing a vendor drew one on top of the other. */
.apb-vendor{margin-bottom:14px}
.apb-beside{display:flex; align-items:baseline; gap:18px}
.apb-addr{font-size:.92rem; white-space:nowrap}
/* FOUR COLUMNS, AND TERMS DOWN THE SIDE OF THREE OF THEM, which is how Ed
   drew it: the terms are what fills Net On, Disc On and Disc $ in, so they
   stand beside all three rather than above one. */
.apb-grid{display:grid; grid-template-columns:1.1fr 1fr 1fr 1fr; gap:12px 16px; align-items:end}
.apb-terms{grid-row:span 2; align-self:center}
.apb-grid > .field:nth-child(5){grid-column:2}
.apb-comment{grid-column:2 / span 2}
.apb-kind{display:flex; gap:18px; align-items:center; padding-bottom:8px}
.apb-num{text-align:right; font-variant-numeric:tabular-nums}
/* CREDIT, said on the amount itself as well as in the colour: somebody
   looking at one box has to be able to see which way it goes. */
.apb-credit-tag{display:none; margin-left:6px; padding:0 6px; border-radius:4px;
    font-size:.72rem; letter-spacing:.05em; color:#fff; background:#a03a2a}
.apb-face.is-credit .apb-credit-tag{display:inline-block}
.apb-face.is-credit .apb-kind{color:#a03a2a}
/* A CARD HAS NO TERMS AND NO DISCOUNT - one due date a statement, not one for
   each charge - so .apb-nc ("not on a card") goes, and the three boxes that
   are left spread across the row. */
.apb-face.is-card .apb-nc{display:none}
.apb-face.is-card .apb-grid{grid-template-columns:1fr 1fr 1fr}
.apb-face.is-card .apb-comment{grid-column:1 / span 2}
.apb-card-tag{position:absolute; top:-10px; left:18px; padding:1px 10px; border-radius:6px;
    font-size:.72rem; font-weight:700; letter-spacing:.06em; color:#fff; background:#5b3fa8}

@media (max-width:860px){
    .apb-grid{grid-template-columns:1fr 1fr}
    .apb-terms{grid-row:auto; grid-column:1 / -1}
    .apb-grid > .field:nth-child(5){grid-column:auto}
    .apb-comment{grid-column:1 / -1}
    .apb-face.is-card .apb-grid{grid-template-columns:1fr 1fr}
    .apb-face.is-card .apb-comment{grid-column:1 / -1}
}

/* ===== Pay Bills (admin_apPay.php) and one payment shown (admin_apPayment.php)
   The row of choices at the top is the bill panel's own colour, so the two
   Accounts Payable screens read as one pair. The grid is the grid tables use,
   with a vendor row that totals its own bills and a grand total at the foot. */
.apay-top{display:flex; flex-wrap:wrap; align-items:flex-end; gap:12px 22px;
    padding:12px 16px; margin:0 0 14px;
    background:#dfe9f6; border:1px solid var(--line); border-radius:12px}
.apay-top label{display:flex; flex-direction:column; gap:4px;
    color:var(--pine-deep); font-weight:700}
.apay-top select, .apay-top input[type="date"], .apay-amt input{padding:8px 10px;
    font:inherit; font-weight:400; color:var(--ink);
    background:var(--white); border:1.5px solid var(--line); border-radius:9px}
.apay-top .apb-owed{align-self:flex-start}
.apay-top .apay-method{display:flex; gap:16px; padding-bottom:8px}
.apay-top .apay-method label{flex-direction:row; font-weight:600}
.apay-amt{display:flex; gap:6px; align-items:center}
.apay-amt input{width:120px; text-align:right; font-variant-numeric:tabular-nums}
/* The figure and the button that spends it, pushed to the right-hand end. */
.apay-go{display:flex; align-items:center; gap:12px; margin-left:auto}
.apay-go b{font-size:1.2rem; font-variant-numeric:tabular-nums}
/* TWELVE COLUMNS DO NOT FIT A PHONE, and squeezing them would make the
   figures unreadable. The grid scrolls sideways inside its own box instead,
   so the page itself never does. */
.apay-scroll{overflow-x:auto; border:1px solid var(--line); border-radius:10px}
.apay{min-width:1080px}
.apay .r{text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap}
.apay input{width:100px; padding:5px 7px; font:inherit; font-size:.9rem;
    text-align:right; font-variant-numeric:tabular-nums;
    border:1.5px solid var(--line); border-radius:7px; background:var(--white)}
.apay input[type="checkbox"]{width:auto}
.apay .apay-vrow td{background:var(--panel); font-weight:700}
/* A cheque for less than nothing, said before Save is pressed. */
.apay .apay-vrow.is-bad td{color:#a03a2a}
.apay .apay-row td:first-child{padding-left:28px}
.apay .apay-row.is-credit td{color:#a03a2a}
/* What is about to be paid, picked out as it is ticked. */
.apay .apay-row.is-on td{background:#eef6ea}
.apay .apay-grand td{font-weight:700; letter-spacing:.02em; background:var(--panel);
    border-top:2px solid var(--ink)}
.apay-who{color:var(--ink-soft); font-size:.86rem}
.apay-note{font-size:.9rem; max-width:none; margin-top:10px}

/* One payment, shown: a definition list that wraps rather than a table, so
   it reads on a phone without scrolling. */
.appay-head{display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr));
    gap:12px 24px; margin:0}
.appay-head dt{font-size:.8rem; font-weight:700; color:var(--ink-soft);
    text-transform:uppercase; letter-spacing:.04em}
.appay-head dd{margin:2px 0 0}
.appay-head .appay-wide{grid-column:1 / -1}
.appay-amt{font-size:1.2rem; font-variant-numeric:tabular-nums}

/* ===== What the fields mean, behind a ? =====
   A <details> whose open state is an overlay. No script is involved in any of
   it: the ? opens the panel and closes it again, which is what a <summary>
   does on its own. inc_formHelp.php adds Esc and clicking the dark part. */
.form-help{display:inline-block; vertical-align:middle; margin-left:10px}
.form-help > summary{display:inline-flex; align-items:center; justify-content:center;
    width:30px; height:30px; border-radius:50%; cursor:pointer; list-style:none;
    font-family:"Mulish",sans-serif; font-size:1rem; font-weight:700; line-height:1;
    color:var(--pine); background:var(--panel-green); border:1.5px solid var(--line)}
.form-help > summary::-webkit-details-marker{display:none}
.form-help > summary::marker{content:""}
.form-help > summary:hover{background:var(--pine); color:var(--white); border-color:var(--pine)}
.form-help > summary:focus-visible{outline:3px solid var(--gold-soft); outline-offset:2px}
/* ABOVE ITS OWN PANEL WHILE IT IS OPEN. The sheet is fixed over the whole
   window, which buried the ? underneath it: clicking it again hit the dark
   part instead, and with JavaScript off there would have been no way to shut
   the panel at all. */
.form-help[open] > summary{position:relative; z-index:90;
    background:var(--pine); color:var(--white); border-color:var(--pine)}

/* Only exists while it is open - a closed <details> renders nothing inside. */
.form-help-sheet{position:fixed; inset:0; z-index:80; overflow:auto;
    display:flex; align-items:flex-start; justify-content:center;
    padding:48px 16px; background:rgba(14,48,89,.45);
    /* ITS OWN TYPE, whatever it was dropped into. The ? sits inside an <h2> so
       that it lands beside the heading, which made every word of the panel
       inherit the heading's serif at the heading's size. A panel that reads
       differently depending on where the icon was put is not a shared one. */
    font-family:"Mulish",system-ui,-apple-system,sans-serif; font-size:1rem;
    font-weight:400; font-style:normal; line-height:1.6; color:var(--ink);
    text-align:left; letter-spacing:normal}
.form-help-card{width:100%; max-width:720px; padding:26px 28px; background:var(--white);
    border:1px solid var(--line); border-radius:16px;
    box-shadow:0 20px 50px rgba(14,48,89,.3); text-align:left}
.form-help-head{display:flex; align-items:baseline; justify-content:space-between;
    gap:14px; flex-wrap:wrap; margin-bottom:14px}
.form-help-head h2{margin:0; font-family:"Fraunces",Georgia,serif; font-size:1.5rem}
.form-help-hint{font-size:.86rem}
.form-help-list{margin:0}
.form-help-list > div{padding:10px 0; border-top:1px solid var(--line)}
.form-help-list > div:first-child{border-top:none}
.form-help-list dt{font-weight:700; color:var(--pine-deep)}
.form-help-list dd{margin:3px 0 0; color:var(--ink-soft); line-height:1.55}
@media (max-width:700px){
    .form-help-sheet{padding:16px 10px}
    .form-help-card{padding:20px 18px}
}

/* ===== The budget worksheet =====
   Six parts on one screen, because a budget is written by looking at last
   year while typing next year. */
.sr-only{position:absolute; width:1px; height:1px; margin:-1px; padding:0;
    overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0}

.bw-who{display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin-bottom:10px}
.bw-acct{font-weight:700; font-size:1.1rem; color:var(--pine-deep);
    background:var(--panel-green); border:1px solid var(--line);
    border-radius:10px; padding:7px 14px}

.bw-top{display:flex; gap:18px; align-items:flex-start; flex-wrap:wrap; margin-bottom:14px}
.bw-tools{flex:0 0 250px; padding:14px 16px; background:var(--white);
    border:1px solid var(--line); border-radius:14px}
.bw-work{flex:1 1 640px; min-width:0}

.bw-amt{display:flex; align-items:center; gap:8px; margin-bottom:8px}
.bw-amt label{font-weight:700; color:var(--pine-deep); font-size:.9rem}
.bw-amt input{width:110px; padding:7px 9px; font:inherit; font-size:.95rem;
    text-align:right; border:1.5px solid var(--line); border-radius:9px; background:var(--paper)}
.bw-amt select{width:auto; padding:7px 9px; font:inherit; font-size:.95rem;
    border:1.5px solid var(--line); border-radius:9px; background:var(--paper)}
.bw-amt #bwPct{width:58px}

.bw-links{list-style:none; margin:12px 0; padding:0}
.bw-links li{margin:0 0 6px}
.bw-links a{font-size:.95rem; font-weight:600}
.bw-head{margin:14px 0 6px; font-weight:700; color:var(--pine-deep)}
.bw-build a{color:var(--gold)}
.bw-auto{margin:10px 0 0}

.bw-sums{margin:14px 0 0; border-top:1px solid var(--line); padding-top:10px}
.bw-sums > div{display:flex; justify-content:space-between; gap:10px; padding:2px 0}
.bw-sums dt{font-size:.86rem; color:var(--ink-soft)}
.bw-sums dd{margin:0; font-variant-numeric:tabular-nums; font-weight:600}
.bw-sums .is-net{border-top:2px solid var(--line); margin-top:4px; padding-top:4px}

/* The worksheet itself: the month down the side, the budget, then the two
   read-only columns. */
.bw-table{width:100%; border-collapse:collapse; background:var(--white);
    border:1px solid var(--line); border-radius:14px; overflow:hidden}
.bw-table th{padding:8px 10px; text-align:center; font-size:.9rem;
    background:var(--panel-green); color:var(--pine-deep); vertical-align:top}
.bw-table td{padding:4px 8px; border-top:1px solid var(--line)}
.bw-table input{width:100%; padding:6px 9px; font:inherit; font-size:.95rem;
    text-align:right; border:1.5px solid var(--line); border-radius:8px; background:var(--paper)}
.bw-season label{display:flex; align-items:center; gap:7px; font-weight:600; cursor:pointer}
.bw-season input{width:auto; margin:0}
.bw-season-head{text-align:left !important; font-weight:400}
.bw-season-head a{font-size:.86rem}
.bw-ro{text-align:right; font-variant-numeric:tabular-nums; color:var(--ink-soft);
    background:var(--panel)}
.bw-total{text-align:right; font-variant-numeric:tabular-nums; font-weight:700;
    background:var(--panel-green)}
.bw-total-ro{font-weight:700}
.bw-prior-head{min-width:150px}
.bw-kind{display:block; font-size:.78rem; font-weight:400}
.bw-kind label{display:inline-flex; align-items:center; gap:4px; margin-right:8px}
.bw-kind input{width:auto; margin:0}
.bw-year{width:auto; max-width:140px; padding:4px 6px; font-size:.86rem;
    border:1.5px solid var(--line); border-radius:8px; background:var(--paper)}
.bw-save{display:block; width:100%; margin-top:10px; text-align:center}

.bw-filter{display:flex; align-items:center; gap:14px; flex-wrap:wrap;
    padding:10px 14px; background:var(--panel); border:1px solid var(--line);
    border-radius:12px; margin-bottom:10px}
.bw-filter > span:first-child{font-weight:700; color:var(--pine-deep)}

/* THE HEADINGS STAY PUT. A month column whose heading has scrolled off the
   top is a column nobody can name, and this grid is thirteen of them. */
.bw-grid{max-height:420px; overflow:auto; border:1px solid var(--line);
    border-radius:12px; background:var(--white)}
.bw-sheet{margin:0; border-collapse:separate; border-spacing:0; white-space:nowrap}
.bw-sheet thead th{position:sticky; top:0; z-index:2;
    background:var(--panel-green); box-shadow:inset 0 -1px 0 var(--line)}
.bw-sheet td, .bw-sheet th{padding:6px 10px; font-size:.9rem}
/* RIGHT, SO THE DECIMAL POINTS LINE UP. .admin-table sets every cell to the
   left and beats a single class on its own, which left thirteen columns of
   money ranged against the wrong edge and unreadable down the column. */
.bw-sheet .bw-num, .bw-sheet th.bw-num{text-align:right; font-variant-numeric:tabular-nums}
.bw-num{text-align:right; font-variant-numeric:tabular-nums}
.bw-dept{color:var(--ink-soft); font-size:.86rem}
.bw-row{cursor:pointer}
.bw-row:hover{background:var(--panel-green)}
.bw-row.is-on{background:var(--panel-green); box-shadow:inset 3px 0 0 var(--pine)}
.bw-type{font-size:.8rem; color:var(--ink-soft)}
.is-ok{color:var(--pine)}
.is-off{color:#a2331f}

@media (max-width:1100px){
    .bw-tools{flex:1 1 100%}
    .bw-work{flex:1 1 100%}
}

/* ===== The register =====
   One account read downwards. The headings stay put on EVERY grid that
   scrolls, not only this one: a column of figures whose heading has gone off
   the top is a column nobody can name, and these lists are long by nature. */
.grid-scroll .gr-table thead th{position:sticky; top:0; z-index:3;
    background:var(--panel-green); box-shadow:inset 0 -1px 0 var(--line)}

/* TIGHT, because the figures below it are the page. ONE ROW: the controls on
   the left, the four figures ranged right on the same line. Nothing here is
   wide by accident - a window narrow enough still wraps the figures under the
   controls rather than squeezing the account box out of readability. */
.reg-head{display:flex; gap:6px 10px; align-items:center; flex-wrap:wrap;
    justify-content:space-between;
    padding:8px 12px; margin-bottom:10px; background:var(--white);
    border:1px solid var(--line); border-radius:14px}
/* ONE LINE, NOT TWO. Select, what it is a register of, the balance forward
   and Show all sit on the same row: the head of this page was costing two
   rows of the window before the figures began, and the figures are the page.
   The picker's label is gone with it - an account number and its name say
   what they are without a word above them. */
.reg-pick{display:flex; gap:9px; align-items:center; flex-wrap:wrap; flex:0 1 auto}
.reg-by{display:flex; gap:8px; align-items:center; white-space:nowrap}
.reg-label{font-weight:700; color:var(--pine-deep)}
/* The account box is the width of the longest thing it has to show -
   "1010 - First Bank Chequing" - and does not shrink below it: a register
   whose heading says which account you are in, and then clips the name, has
   lost the one thing the heading was for. */
.reg-what{flex:0 0 247px; min-width:150px}
.reg-what .field{margin:0}
.reg-what .picker-field > label{display:none}
.reg-fwd{white-space:nowrap}
/* The tick in with the figures reads as their label, not as a control that
   wandered in: same size, same colour, same weight as Debits and Credits. */
.reg-sums dt .reg-fwd{display:inline-flex; align-items:center; gap:5px;
    font:inherit; color:inherit; cursor:pointer}
.reg-sums dt .reg-fwd input{margin:0}
@media (min-width:1000px){
    .reg-pick{flex-wrap:nowrap}
}

/* THE FIGURES ON ONE LINE WITH THEIR LABELS. Stacked - label over figure,
   with a caption under the first - they were what made the head of this page
   two rows deep, whatever the controls beside them did. */
/* Ranged right, whether they sit beside the controls or wrap under them: a
   balance is read off the right-hand edge of the page. */
.reg-sums{display:flex; gap:8px; margin:0 0 0 auto; align-items:baseline;
    flex-wrap:wrap; justify-content:flex-end}
.reg-sums > div{display:flex; align-items:baseline; gap:5px; white-space:nowrap}
.reg-sums dt{font-size:.78rem; color:var(--ink-soft); font-weight:600}
.reg-sums dd{margin:0; font-size:1rem; font-weight:700;
    font-variant-numeric:tabular-nums; color:var(--pine-deep)}
.reg-sums .is-net dd{border-bottom:2px solid var(--line)}
/* The figure that carries a tooltip says so, quietly. */
.reg-sums > div[title]{cursor:help}
.reg-sums > div[title] dt{border-bottom:1px dotted var(--line)}
.reg-head{align-items:center}

.reg-table td{white-space:nowrap}
.reg-balance{font-variant-numeric:tabular-nums; font-weight:600}
/* A cheque with no number is waiting to be printed, which an empty cell does
   not say. */
.reg-print{display:inline-block; padding:1px 8px; border-radius:999px;
    background:var(--panel-green); border:1px solid var(--line);
    font-size:.8rem; font-weight:700; color:var(--pine)}

/* ---------------------------------------------------------------------------
   PRINT CHEQUES

   The same shape as the Register's head: what you are looking at on the left,
   the figures ranged right on the same line, and everything the run needs on
   one row under it. The one figure that is not like the others is New Bal -
   a run that would overdraw the account says so in red before the paper goes
   through, not on a statement three weeks later.
   ------------------------------------------------------------------------ */
.pc-head{display:flex; gap:6px 14px; align-items:center; flex-wrap:wrap;
    justify-content:space-between; padding:8px 12px; margin-bottom:10px;
    background:var(--white); border:1px solid var(--line); border-radius:14px}
.pc-pick{display:flex; gap:9px; align-items:center; white-space:nowrap}
.pc-pick select{padding:7px 10px; font:inherit; font-size:.95rem; color:var(--ink);
    background:var(--paper); border:1.5px solid var(--line); border-radius:10px}
.pc-sums{display:flex; gap:11px; margin:0; align-items:baseline; flex-wrap:wrap}
.pc-sums > div{display:flex; align-items:baseline; gap:5px; white-space:nowrap}
.pc-sums dt{font-size:.78rem; color:var(--ink-soft); font-weight:600}
.pc-sums dd{margin:0; font-size:1rem; font-weight:700;
    font-variant-numeric:tabular-nums; color:var(--pine-deep)}
.pc-sums .is-net dd{border-bottom:2px solid var(--line)}
.pc-sums .is-short dd{color:var(--err, #a3242c); border-bottom-color:var(--err, #a3242c)}
.pc-nums{display:flex; gap:8px; align-items:center; white-space:nowrap}
.pc-nums label{font-size:.78rem; color:var(--ink-soft); font-weight:600}
.pc-nums input{padding:6px 8px; font:inherit; font-size:.95rem; color:var(--ink);
    background:var(--paper); border:1.5px solid var(--line); border-radius:10px}
.pc-nbr{width:7em; font-variant-numeric:tabular-nums}
.pc-bar{flex-wrap:wrap}
.pc-dates{display:flex; gap:10px; align-items:center; white-space:nowrap}
.pc-table td{white-space:nowrap}
.pc-table td.muted{font-size:.85rem}
/* WHAT KIND OF CHEQUE IT IS: said quietly, because on most rows it says
   "Check" and the eye is looking for the ones that do not. */
.pc-kind{color:var(--ink-soft); font-size:.88rem}

/* The alignment, folded away: it is set once when the printer is new. */
.pc-align{margin-top:14px}
.pc-align > summary{cursor:pointer; font-weight:700; color:var(--pine-deep)}
.pc-align-form{display:flex; gap:10px; align-items:center; flex-wrap:wrap;
    margin-top:10px; padding:12px; background:var(--white);
    border:1px solid var(--line); border-radius:12px}
.pc-align-form input{width:6em; padding:6px 8px; font:inherit;
    border:1.5px solid var(--line); border-radius:10px; background:var(--paper)}

/* DID THEY COME OUT RIGHT? Everything else on the page is replaced by this,
   because a run that has been printed and not answered for is the one state
   where doing anything else is a mistake. */
.notice-ask{background:var(--white); border:2px solid var(--pine);
    border-radius:14px; padding:18px 20px}
.check-ask h2{margin:0 0 8px}
.check-ask p{margin:0 0 10px; max-width:62ch}
.check-ask-forms{display:flex; gap:10px; align-items:center; flex-wrap:wrap;
    margin-top:14px}

/* ---------------------------------------------------------------------------
   FINANCIAL REPORTS

   A definition page, not a list: what is on it is one report being described.
   The bands of four columns are the shape the old reports were built in, and
   the shape somebody who has built one before will look for.
   ------------------------------------------------------------------------ */
.fr-bar{flex-wrap:wrap}
.fr-load{display:flex; gap:8px; align-items:center; margin-left:auto; white-space:nowrap}
.fr-load label{font-size:.78rem; color:var(--ink-soft); font-weight:600}
.fr-load select{padding:6px 10px; font:inherit; font-size:.92rem; color:var(--ink);
    background:var(--paper); border:1.5px solid var(--line); border-radius:10px;
    max-width:260px}

/* The way back to the document, for a browser that blocked the pop-up. */
.fr-opened{margin:0 0 10px}
.fr-head{padding:12px 14px; margin-bottom:12px; background:var(--white);
    border:1px solid var(--line); border-radius:14px}
.fr-names{display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin-bottom:10px}
.fr-names label{font-size:.78rem; color:var(--ink-soft); font-weight:600; white-space:nowrap}
.fr-names input{flex:1 1 220px; min-width:160px; padding:7px 10px; font:inherit;
    border:1.5px solid var(--line); border-radius:10px; background:var(--paper)}
.fr-opts,.fr-ticks,.fr-move{display:flex; gap:8px 18px; align-items:center; flex-wrap:wrap}
.fr-opts{margin-bottom:8px}
.fr-ticks{margin-bottom:8px}
/* The three questions on this row are told apart by their labels, and by the
   air between the groups being wider than the air inside one. */
.fr-opts{gap:8px 26px}
.fr-group{display:flex; gap:9px; align-items:center; white-space:nowrap}
.fr-label{color:var(--pine-deep); font-weight:700}
.fr-group .check-opt{margin-right:0}
.fr-group select{padding:6px 10px; font:inherit; font-size:.92rem;
    border:1.5px solid var(--line); border-radius:10px; background:var(--paper)}
.fr-move .btn{min-width:44px}

/* The bands. Four columns at a time, because thirteen across a page is a
   spreadsheet nobody can read and the paper only ever shows a few. */
.fr-band{margin-bottom:12px; background:var(--white); border:1px solid var(--line);
    border-radius:14px; overflow:hidden}
.fr-table{width:100%; border-collapse:collapse; font-size:.92rem}
.fr-table th,.fr-table td{padding:6px 10px; border-bottom:1px solid var(--line);
    text-align:left; vertical-align:middle}
.fr-table thead th{background:var(--panel-green); font-weight:700}
.fr-rowhead{width:9.5rem; font-weight:600; color:var(--ink-soft);
    background:var(--paper); white-space:nowrap}
.fr-table select,.fr-table input[type="text"],.fr-table input[type="date"]{
    width:100%; max-width:15rem; padding:5px 8px; font:inherit; font-size:.9rem;
    border:1.5px solid var(--line); border-radius:9px; background:var(--paper)}
/* display:flex BEATS THE hidden ATTRIBUTE. The script hides whichever of the
   three a column does not need by setting hidden on it, and a flex box with
   hidden set is still a flex box - the date range sat there under the month
   dropdown looking like something to fill in. */
.fr-select [hidden]{display:none}
.fr-pair{display:flex; gap:6px; align-items:center}
.fr-pair select{max-width:6.5rem}
.fr-range{display:flex; gap:6px; align-items:center; flex-wrap:wrap}
.fr-data{white-space:nowrap}
.fr-data .check-opt{margin-right:10px}

/* ---------------------------------------------------------------------------
   A FINANCIAL REPORT ON PAPER

   The sheet is the page: white, with the church's name over it and the
   figures ranged right so they can be read down. Everything that is not the
   report - the trail back, the three buttons - is .no-print and goes away
   when it is printed.
   ------------------------------------------------------------------------ */
.fin-bar{margin-bottom:12px}
/* The sheet is about the shape of the paper: A4 portrait has 186mm to write
   on and A4 landscape 273mm, so the landscape sheet is half as wide again.
   overflow-x is what stops a table that is still too wide from walking off
   across the page background - it scrolls inside the sheet instead. */
.fin-sheet{padding:18px 22px; background:#fff; border:1px solid var(--line);
    border-radius:12px; max-width:900px; margin:0 auto; overflow-x:auto}
.fin-sheet.is-land{max-width:1320px}
.container.fin-wide{max-width:1420px}
/* A REPORT TITLE IS NOT PROSE. The site reads better with p {max-width:66ch},
   and a centred line inside a 683px box on a 1032px page sits left of middle:
   the church's name was centred and the report's name under it was not. */
.fin-title{text-align:center; margin-bottom:14px}
.fin-title p{max-width:none}
.fin-title h2{margin:0; font-size:1.25rem}
.fin-name{margin:2px 0 0; font-weight:700}
.fin-sub{margin:2px 0 0; font-size:.88rem; color:var(--ink-soft)}
.fin-table{width:100%; border-collapse:collapse; font-size:.92rem;
    font-variant-numeric:tabular-nums}
.fin-table th,.fin-table td{padding:3px 8px}
.fin-table thead th{border-bottom:1.5px solid var(--ink); text-align:left}
/* THE NAMES GET THE SLACK, NOT THE GAPS BETWEEN THE NUMBERS. A table told to
   fill the width hands its spare room out in proportion, and the account
   column - whose longest WORD is "Offerings" - was left at 66px: every name
   down the left came apart over three lines while the figures sat in wide
   empty cells. The width is a hint; a figure is nowrap and keeps its own. */
.fin-acct{text-align:left; font-weight:400; width:24%; min-width:150px}
.fin-table.fin-many .fin-acct{min-width:120px}
.fin-num{text-align:right; white-space:nowrap}
/* THE HEADING WRAPS, THE FIGURE NEVER DOES. "Budget Y-T-D Sep 2027" held on
   one line is wider than any figure under it, and thirteen of them made a
   table 1872px wide on a page with 1032px to print on: it ran off the right
   and took the last four months with it. Broken over two lines the heading
   is no wider than its longest word. */
.fin-table thead .fin-num{text-align:right; white-space:normal}
/* AND THE TYPE STEPS DOWN AS THE COLUMNS GO UP. A year month by month is
   thirteen columns and there is no size at which thirteen read like four. */
.fin-table.fin-more{font-size:.82rem}
.fin-table.fin-more th,.fin-table.fin-more td{padding:3px 5px}
.fin-table.fin-many{font-size:.72rem}
.fin-table.fin-many th,.fin-table.fin-many td{padding:2px 4px}
.fin-section th{padding-top:10px; font-weight:700; text-transform:uppercase;
    font-size:.8rem; letter-spacing:.04em; color:var(--pine-deep)}
.fin-account .fin-acct{padding-left:18px}
/* FOUR LEVELS, AND THE WEIGHT SAYS WHICH. A section is the boldest thing on
   the page, a heading under it is bold but quieter, and each of them carries
   a total of its own so a question about Buildings is answered without adding
   up four lines by hand. */
/* DRAWN FROM THE WEIGHT, not from the name of the line: a class written
   fin-sectionTotal and a rule written .fin-sectiontotal are two different
   things to a browser, and the section total quietly came out lighter than
   the heading total under it. The weight is a number and cannot do that. */
/*  0 an account          4 a type's total
    1 a heading           5 a section's
    2 a heading's total   6 the statement's
    3 a type - which on a balance sheet is the level the sheet is read by:
      Bank Accounts, Accounts Receivable, Fixed Assets, each with a total. */
.fin-w0 .fin-acct{padding-left:18px}
.fin-w1 th{font-weight:700; padding-top:6px}
.fin-w2 th,.fin-w2 td{border-top:1px solid var(--line); font-weight:600}
.fin-w2 th{padding-left:18px}
.fin-w3 th{font-weight:700; padding-top:9px; color:var(--pine-deep)}
.fin-w4 th,.fin-w4 td{border-top:1px solid var(--ink-soft); font-weight:700}
.fin-w5 th,.fin-w5 td{border-top:1.5px solid var(--ink-soft); font-weight:800}
/* A HEADING HAS NOTHING TO DRAW A LINE UNDER. The weight rules above would
   rule a type heading at 3 the way they rule a total at 4; the three kinds
   that carry no figures say so here, which is what the PDF tests directly. */
.fin-section th,.fin-type th,.fin-header th{border-top:0}
.fin-total th,.fin-total td{border-top:1px solid var(--ink-soft); font-weight:700}
.fin-net th,.fin-net td{border-top:1px solid var(--ink-soft);
    border-bottom:3px double var(--ink); font-weight:700}

@media print {
    .no-print{display:none !important}
    .fin-sheet{border:0; border-radius:0; padding:0; max-width:none; overflow:visible}
    .container.fin-wide{max-width:none}
    .fin-break{break-after:page; page-break-after:always}
    /* The headings reprint at the top of every page: a statement that runs to
       three pages cannot be read from page two without them. */
    .fin-table thead{display:table-header-group}
    .fin-table tr{page-break-inside:avoid; break-inside:avoid}
    /* A heading with nothing under it is a heading on the wrong page. */
    .fin-w1,.fin-section{page-break-after:avoid; break-after:avoid}
    .fin-table{font-size:.8rem}
    .fin-table th,.fin-table td{padding:2px 6px}
    .fin-table.fin-more{font-size:.68rem}
    .fin-table.fin-more th,.fin-table.fin-more td{padding:2px 4px}
    .fin-table.fin-many{font-size:.58rem}
    .fin-table.fin-many th,.fin-table.fin-many td{padding:1px 3px}
}

/* ---------------------------------------------------------------------------
   Make Deposit.

   Three along the top - what is in the drawer, the gift being typed, and the
   sitting - then the detail rows, then everything entered so far. The middle
   one is the only part that grows, so it takes the spare width.

   It folds to one column below 1100px rather than at the usual breakpoint:
   the detail rows carry up to five controls across and stop being usable well
   before a phone. Somebody counting a plate is at a desk.
   ------------------------------------------------------------------------ */
.dep-top{display:grid; grid-template-columns:200px minmax(420px, 1fr) 210px;
         gap:14px; align-items:start; margin:0 0 12px}
@media (max-width:1100px){ .dep-top{grid-template-columns:1fr} }

.dep-totals,.dep-entry,.dep-sitting{
  border:1px solid var(--panel); border-radius:10px; padding:12px 14px;
  background:var(--panel-soft,transparent)}
.dep-entry{padding-top:8px}
.dep-totals hr{border:0; border-top:1px solid var(--panel); margin:8px 0}

/* The numbers read down a column with the money right-aligned under itself,
   which is the only way a row of totals can be checked at a glance. */
.dep-sums{margin:0; padding:0}
.dep-sums > div{display:grid; grid-template-columns:1fr auto; gap:10px; padding:2px 0}
.dep-sums dt{margin:0; font-size:.82rem; color:var(--ink-soft)}
.dep-sums dd{margin:0; font-size:.94rem; font-variant-numeric:tabular-nums}
.dep-sums .dep-bal{border-top:1px solid var(--panel); margin-top:4px; padding-top:5px}
.dep-sums .dep-bal dt,.dep-sums .dep-bal dd{font-weight:700; color:var(--ink)}
/* OUT OF BALANCE IS THE ONE THING ON THIS SCREEN THAT MUST BE SEEN. It is
   also the one the server refuses, so the colour is a warning and not news. */
.dep-sums .dep-bal.is-off dt,.dep-sums .dep-bal.is-off dd{color:var(--rust,#b00)}

.dep-ticks{display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin:8px 0 0}
.dep-sitting .field{margin:0 0 8px}
.dep-sub{margin:10px 0 4px; font-size:.82rem; color:var(--ink-soft)}

/* The options band: three toggles and the link that makes them stick. They
   are links, not controls, so they carry the tick box inside them. */
.dep-band{display:flex; align-items:center; gap:16px; flex-wrap:wrap;
          padding:8px 12px; margin:0 0 8px;
          border:1px solid var(--panel); border-radius:10px}
/* The toggles are LINKS - they change what the server draws - so the tick is
   drawn rather than being a checkbox that posts nothing. A real tick box here
   would sit on the same page as the ones that tag a gift and mean something
   else entirely. */
.dep-opt{text-decoration:none; color:var(--ink); display:inline-flex;
         align-items:center; gap:7px; font-size:.92rem}
.dep-opt::before{content:""; width:15px; height:15px; border-radius:3px;
                 border:1.5px solid var(--ink-soft); flex:none}
.dep-opt.is-on::before{content:"\2713"; border-color:var(--pine); background:var(--pine);
                       color:#fff; font-size:11px; line-height:13px; text-align:center}
.dep-opt:hover{color:var(--pine-deep)}

/* Narrow, like the tick column, but NOT .tag-col: that class means "the box
   that tags this record", and the sweep that checks every one of them carries
   a record id found this button instead. */
.dep-delcol{width:38px; text-align:center}

/* ---------------------------------------------------------------------------
   The project report wizard.

   Controls in two columns - what to report on, and what to include - then the
   sheet underneath. The controls are .no-print, so printing gives the report
   and nothing else.
   ------------------------------------------------------------------------ */
.pr-form{border:1px solid var(--panel); border-radius:12px; padding:0 0 10px; margin:0 0 14px}
.pr-form .fin-bar{margin:0; padding:10px 14px; border-bottom:1px solid var(--panel)}
/* THE DENSITY OF THE OTHER WIZARD. Nothing here set a size, so every tick
   and radio inherited the site's reading size of 18px while the labels
   beside them were 13.76 and the select 13.33 - three sizes in one row, and
   a block of controls half as tall again as it needed to be. The Financial
   Reports wizard settled on .92rem; a second wizard that looks like a
   different program is a second thing to learn. */
.pr-opts{display:grid; grid-template-columns:minmax(400px, 1.15fr) minmax(330px, 1fr);
         gap:4px 30px; padding:12px 14px; font-size:.92rem}
@media (max-width:980px){ .pr-opts{grid-template-columns:1fr} }
.pr-row{display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin:0 0 7px}
.pr-opts .check-row{gap:6px 18px}
/* A fixed label column, so Type, Order and Project line up down the left the
   way they do on a form somebody fills in top to bottom. */
.pr-lab{min-width:66px; font-size:.86rem; color:var(--ink-soft); font-weight:600}
/* Every box on this form looks like every other one. Left alone, a select and
   a date input are drawn by the browser and match nothing around them. */
.pr-opts select,.pr-opts input[type="date"]{
    padding:5px 9px; font:inherit; font-size:.92rem; color:var(--ink);
    background:var(--paper); border:1.5px solid var(--line); border-radius:9px}
.pr-pick{max-width:240px}
.pr-right .check-opt{display:flex; align-items:center; gap:8px; margin:0 0 5px}
/* The two that only Detail has, boxed so it reads as a group that comes and
   goes rather than two ticks that moved. */
.pr-detailonly{border:1px solid var(--panel); border-radius:8px;
               padding:7px 10px; margin:7px 0}
.pr-detailonly .check-opt{margin:0 0 4px}
.pr-detailonly p{font-size:.84rem; margin:3px 0 0; max-width:46ch}
.pr-dates{display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin:7px 0 0}
.pr-dates input[type="date"]{max-width:150px}
.pr-dates .pr-lab{min-width:0}
.pr-reportlab{margin:0 0 8px; color:var(--ink-soft)}
/* The sheet's own heading: what it is on the left, when it was run on the
   right, the way a printed report has always carried its date. */
.pr-head{display:flex; justify-content:space-between; align-items:flex-start; gap:16px;
         background:var(--ink); color:var(--white); padding:10px 14px;
         border-radius:8px; margin:0 0 12px}
.pr-head h2{margin:0; font-size:1.15rem; color:var(--white)}
.pr-head p{margin:2px 0 0; font-size:.9rem; color:var(--white); opacity:.85}
.pr-when{font-size:.95rem; white-space:nowrap}
/* The Budget / Actual / Difference table is narrow on purpose - three figures
   do not want the width of the report under them. */
.pr-block{max-width:520px; margin:0 0 14px}

/* The eight reports, two to a row: they are the width of their longest name
   and all the same, so a grid rather than a wrapping row of buttons. */
.dep-reports{display:grid; grid-template-columns:repeat(auto-fit, minmax(150px, 1fr)); gap:8px}
.dep-reports .btn{justify-content:center}
.dep-which{margin:0 0 12px}
.dep-which .check-opt{display:flex; align-items:center; gap:7px; margin:0 0 4px}

/* As tall as its rows and no taller - see the note on the page. It still
   scrolls sideways, because Pledge and Project together are a wide table. */
.dep-rowsbox{overflow-x:auto; border:1px solid var(--panel); border-radius:10px}
.dep-rowsbox table{margin:0}

/* The detail rows. Every control fills its cell, because a half-width select
   in a wide column is a target somebody misses. */
.dep-rows td{padding:4px 6px}
.dep-rows select,.dep-rows input{width:100%; min-width:0}
.dep-rows .dep-money{text-align:right; font-variant-numeric:tabular-nums}
.dep-del{border:0; background:none; cursor:pointer; font-size:1.1rem; line-height:1;
         color:var(--ink-soft); padding:2px 6px}
.dep-del:hover{color:var(--rust,#b00)}
.dep-money{font-variant-numeric:tabular-nums}

.dep-save{display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin:10px 0 18px}
.dep-newdonor{border:1px solid var(--panel); border-radius:10px; padding:14px 16px;
              margin:0 0 14px}

/* ===== reconciling an account =====
   The screen is one sum laid out left to right, and the styles are mostly
   about keeping it readable at that width: two lists side by side, figures
   in tabular numerals so the columns line up, and the difference loud
   enough to be the thing somebody watches. */

/* WIDER THAN THE REST OF THE SITE, for the same reason .fin-wide is: two
   full lists of transactions side by side do not fit in 1120px, and
   stacking them would hide the second one below the fold. */
.container.recon-wide{max-width:1500px}

.recon-bar{display:flex; flex-wrap:wrap; gap:10px; align-items:center;
  background:var(--panel-green); border:1px solid var(--line); border-radius:12px;
  padding:10px 14px; margin:0 0 14px}
.recon-print{display:flex; gap:8px; align-items:center; margin:0}
.recon-print select{padding:5px 8px; border:1px solid var(--line); border-radius:8px;
  font:inherit; font-size:.86rem; background:var(--white)}
.recon-spacer{flex:1 1 auto}
.recon-adj{display:flex; gap:10px; align-items:center}
.recon-adj-lab{font-size:.8rem; color:var(--ink-soft)}

/* ---- the four counts, and where the adjustments post ---- */
.recon-boxes{display:flex; flex-wrap:wrap; gap:14px; margin:0 0 14px}
.recon-box{flex:1 1 240px; margin:0; border:1px solid var(--line); border-radius:12px;
  background:var(--white); padding:8px 14px 12px}
.recon-box-wide{flex:2 1 430px}
.recon-box legend{font-family:"Fraunces",serif; color:var(--pine-deep);
  font-size:.95rem; padding:0 6px}
.recon-pair{display:flex; gap:10px; align-items:center; margin:4px 0}
.recon-pair-lab{flex:0 0 110px; font-size:.86rem; color:var(--ink-soft)}
.recon-pair select{flex:1 1 auto; min-width:0; padding:5px 8px; border:1px solid var(--line);
  border-radius:8px; font:inherit; font-size:.86rem; background:var(--white)}
.recon-n{flex:0 0 54px; text-align:right; font-size:.86rem; color:var(--ink-soft);
  font-variant-numeric:tabular-nums}

/* ---- the sum ---- */
.recon-sum{display:flex; flex-wrap:wrap; gap:14px; margin:0 0 18px}
.recon-side{flex:1 1 320px; position:relative; display:flex; flex-wrap:wrap; gap:8px;
  align-items:flex-end; background:var(--white); border:1px solid var(--line);
  border-radius:12px; padding:26px 14px 12px}
.recon-side-lab{position:absolute; top:7px; left:14px; font-size:.76rem;
  letter-spacing:.04em; text-transform:uppercase; color:var(--ink-soft)}
.recon-cell{display:flex; flex-direction:column; gap:3px; min-width:0}
.recon-cell label{font-size:.76rem; color:var(--ink-soft); margin:0; font-weight:400}
.recon-op{padding:0 1px 7px; color:var(--ink-soft)}
/* EACH HALF'S RESULT ON ITS OWN LINE, always. Left to wrap where it liked it
   put the "=" dangling at the end of a row at some widths and not others. */
.recon-result{flex-basis:100%; display:flex; gap:8px; align-items:flex-end; margin-top:4px}
.recon-in{width:112px; padding:5px 8px; border:1px solid var(--line); border-radius:8px;
  font:inherit; font-size:.9rem; text-align:right; background:var(--white);
  font-variant-numeric:tabular-nums}
.recon-out{display:inline-block; min-width:96px; padding:5px 8px; text-align:right;
  font-size:.9rem; font-variant-numeric:tabular-nums; border:1px solid transparent}
/* The result of each half, which is what the next half is compared with. */
.recon-lead{background:var(--panel); border-color:var(--line); border-radius:8px;
  font-weight:600; color:var(--pine-deep)}
.recon-answer{flex:1 1 280px; align-items:center}
/* WHY RECONCILE IS OFF. Amber rather than red: nothing is wrong, there is
   just something still to do - and a dead button with no explanation beside
   it is the thing somebody clicks twice and then distrusts. */
.recon-notready{margin-left:auto; padding:3px 9px; border-radius:7px;
  background:#fcefd9; color:#845611; font-size:.8rem; font-weight:600}
.recon-acts{display:flex; gap:8px; margin-left:auto; align-items:center}
/* RECONCILE IS OFF UNTIL IT BALANCES, and it has to LOOK off: a primary
   button carries its colour through the disabled attribute, so without this
   the one control the screen is working towards looks pressable the whole
   time. Same rule as .grid-bar .btn[disabled], scoped rather than shared
   because widening it would restyle every disabled button on the site. */
.recon-acts .btn[disabled]{opacity:.42; cursor:not-allowed; pointer-events:none}
/* NOUGHT OR NOT is the whole screen, so it is the loudest thing on it. */
.recon-diff{font-size:1.05rem; font-weight:700; border-radius:8px; min-width:120px}
.recon-diff.is-off{background:#fcefd9; color:#845611; border-color:#e8d2a6}
.recon-diff.is-ok{background:#e5f2e8; color:#1e6b3a; border-color:#bfdcc8}

/* ---- the two lists ---- */
.recon-lists{display:flex; flex-wrap:wrap; gap:16px; align-items:flex-start}
.recon-list{flex:1 1 440px; min-width:0}
.recon-list h3{font-size:1.05rem; margin:0 0 6px}
.recon-why{font-family:"Mulish",sans-serif; font-size:.78rem; font-weight:400}
.recon-scroll{max-height:460px; overflow:auto; border:1px solid var(--line);
  border-radius:12px; background:var(--white)}
.recon-table{min-width:0}
.recon-table thead th{position:sticky; top:0; z-index:1}
.recon-table td, .recon-table th{padding:5px 8px; font-size:.86rem}
.recon-table td{font-variant-numeric:tabular-nums}
.recon-tick{width:34px; text-align:center}
.recon-tick input{width:16px; height:16px; accent-color:var(--pine); cursor:pointer}
.recon-table tr.is-ticked td{background:var(--panel-green)}

/* ===== cleared, on a register =====
   Blank when nothing has cleared the line; an asterisk while a statement is
   still being worked on; a tick once it has been agreed. The title says
   which in words, because a mark on its own teaches nobody anything. */
.clr-part{color:#845611; font-weight:700}
.clr-done{color:#1e6b3a; font-weight:700}
/* And the one figure on the reconciliations list that must be seen. */
.recon-off{color:#845611; font-weight:700}

/* ===== budget status, while somebody is typing =====
   Dark, because it is a readout rather than part of the form: nothing on it
   is typed into and nothing on it is a control except the heading. Nine
   figures in three columns, and the one anybody actually reads is the
   coloured strip at the foot of each. */
.bud-panel{background:#2b2b2b; color:#f3f1ea; border-radius:14px; overflow:hidden;
  margin:0 0 18px; box-shadow:0 6px 18px rgba(14,48,89,.14)}
.bud-head{display:flex; align-items:center; gap:10px; width:100%; padding:9px 16px;
  background:var(--white); color:#8a2a1c; border:0; border-bottom:1px solid var(--line);
  font:inherit; font-weight:700; cursor:pointer; text-align:left}
.bud-caret{font-size:.7rem; transition:transform .15s ease}
.bud-panel.is-shut .bud-caret{transform:rotate(-90deg)}
.bud-panel.is-shut .bud-body,
.bud-panel.is-shut .bud-note,
.bud-panel.is-shut .bud-none{display:none}
.bud-title{font-family:"Fraunces",serif}
.bud-what{font-weight:600; color:var(--pine-deep)}
/* SAID QUIETLY, BUT SAID. Figures that silently counted an unsaved line
   would eventually be acted on as though they were the books. */
.bud-note{margin:0; padding:5px 16px; background:#3a3a3a; color:#d9d4c4;
  font-size:.8rem; font-style:italic}
.bud-body{display:flex; flex-wrap:wrap}
.bud-col{flex:1 1 220px; min-width:0; padding:12px 16px 14px;
  border-right:1px solid #454545}
.bud-col:last-child{border-right:0}
.bud-col h4{margin:0 0 8px; font-family:"Mulish",sans-serif; font-size:.95rem;
  color:#fff; text-decoration:underline; text-underline-offset:3px}
.bud-col dl{margin:0}
.bud-line{display:flex; align-items:baseline; gap:8px; margin:0 0 3px}
.bud-line dt{flex:1 1 auto; font-size:.9rem; color:#cfe3f7}
.bud-line dt i{font-style:italic; opacity:.85}
.bud-line dd{margin:0; font-weight:700; font-variant-numeric:tabular-nums}
/* THE ONE LINE ANYBODY READS. Green is room, red is past it - and on an
   income account those are the other way about, which is why the colour is
   told by the server rather than worked out from the sign here. */
.bud-left{display:flex; align-items:baseline; justify-content:space-between; gap:10px;
  margin:9px 0 0; padding:5px 9px; border-radius:7px; font-size:.9rem; font-weight:700;
  color:#1b1b1b; background:#e6e6e6}
.bud-left.is-good{background:#8ef0ae}
.bud-left.is-bad{background:#f3a7a7}
.bud-left b{font-variant-numeric:tabular-nums}
.bud-none{margin:0; padding:8px 16px; background:#4a3a1c; color:#f0dfae; font-size:.86rem}
@media (max-width:820px){ .bud-col{flex:1 1 100%; border-right:0; border-bottom:1px solid #454545} }

/* IN THE COLUMN BESIDE THE CHEQUE, where this page always meant it to go.
   The aside stops being a card of its own and lets the panel be one - a
   dark box inside a white box with two sets of padding reads as a mistake.
   Nothing else changes: the three parts stack because they are flexible
   boxes with a 220px basis in a column narrower than that, which is the
   same markup doing the right thing rather than a second layout. */
.check-side-bud{padding:0; background:none; border:0; box-shadow:none}
.check-side-bud .bud-panel{margin:0}
.check-side-bud .bud-col{border-right:0; border-bottom:1px solid #454545}
.check-side-bud .bud-col:last-child{border-bottom:0}
/* THE HEADING STACKS TOO. "Budget Status" and a full account name do not sit
   on one line in 280px, and letting them try broke the title across two. */
.check-side-bud .bud-head{flex-wrap:wrap}
.check-side-bud .bud-what{flex-basis:100%; padding-left:18px; font-size:.86rem}
.check-side-bud .bud-title{white-space:nowrap}
/* WHAT IT SAYS WHILE THERE IS NOTHING TO SAY. The placeholder it replaces
   said budgets were "not built", which stayed on the screen after they were
   and read as a feature that does not work. */
.bud-idle{margin:10px 2px 0; font-size:.86rem}

/* ===== Donation receipts =====
   THE ONLY STYLESHEET IN THIS SYSTEM THAT IS ABOUT PAPER. Everything else
   here decides what something looks like; this decides WHERE IT LANDS, in
   inches, because a receipt goes in a #9 double-window envelope and either
   the two addresses line up with the two windows or the whole run is
   reprinted.

   THE MEASUREMENTS ARE ALL IN ONE PLACE, below, and they are named. Window
   positions vary by who made the envelope - there is no standard anybody
   enforces - so the way to settle this is to print one, fold it on the marks
   and hold it against the real thing. Nothing else in the file needs to
   change when a figure here does.

   Letter paper folds in thirds at 3.667in and 7.333in. BOTH ADDRESSES ARE
   ABOVE THE FIRST FOLD, so whichever way round the fold goes, they stay on
   one panel together and travel as one. */
.rcp{
    --rcp-left:     0.60in;   /* in from the paper's left edge */
    --rcp-top:      0.45in;   /* church block, down from the top */
    --rcp-to-top:   1.85in;   /* donor block, down from the top */
    --rcp-fold-one: 3.667in;  /* first crease */
    --rcp-fold-two: 7.333in;  /* second crease */
    --rcp-body-gap: 0.28in;   /* clearance below the first crease */
    --rcp-win-wide: 3.40in;   /* widest a window may show - see .rcp-from */

    position:relative; box-sizing:border-box;
    width:8.5in; min-height:11in; margin:22px auto; padding:0;
    background:#fff; color:#000;
    font-family:Georgia, 'Times New Roman', serif; font-size:10.5pt; line-height:1.35;
    box-shadow:0 2px 14px rgba(0,0,0,.18);
}

/* ---- the top third: this is the envelope ---- */
.rcp-win{position:relative; height:var(--rcp-fold-one)}
/* NOTHING WIDER THAN --rcp-win-wide. On a DOUBLE window envelope the upper
   window - the one the church's own address shows through - is the small
   one, commonly three and a half inches, not the four and a half of the
   address window below it. Anything past that edge is behind paper.

   THIS IS THE FIGURE TO CHANGE after folding a test print, and it is the
   only one: both blocks take their width from it. */
.rcp-from{position:absolute; left:var(--rcp-left); top:var(--rcp-top);
          display:flex; gap:9px; align-items:flex-start; max-width:var(--rcp-win-wide)}
.rcp-logo{max-height:0.58in; max-width:0.85in; width:auto; height:auto; flex:0 0 auto}
/* min-width:0 OR THE CAP ABOVE MEANS NOTHING. A flex item will not shrink
   below its own content unless it is told it may, so without this the name
   and address simply run out past the edge of the window - which measured
   4.32in against a cap of 3.90 and looked perfectly fine on screen. With
   it, a church with a longer name wraps INSIDE the window instead. */
.rcp-from > div{min-width:0}
/* BALANCED, so a name that has to wrap breaks where somebody would say it.
   Left to itself the line fills to the edge and gives "First Baptist Church
   of Gold / Hill", splitting the town's name across two lines; balanced it
   gives "First Baptist Church / of Gold Hill". A browser that does not know
   the property ignores it and wraps as before, which is no worse than it
   was. */
.rcp-church{margin:0 0 2px; font-size:12pt; font-weight:700; line-height:1.15;
            text-wrap:balance}
.rcp-line{margin:0; font-size:10.5pt; line-height:1.3}
/* THE RETURN ADDRESS IS THE SMALLER OF THE TWO. It is not what anybody has
   to read to deliver the letter - the donor's block below it is - and a post
   office sorting by the wrong one is a receipt that comes back. Smaller also
   keeps the church block clear of the window's edge when the name runs to
   two lines, as a long one does. */
.rcp-from .rcp-line{font-size:9pt; line-height:1.25}

/* THE DONOR'S OWN BLOCK, and nothing else may sit at this height: it is
   what shows through the lower window. */
.rcp-to{position:absolute; left:var(--rcp-left); top:var(--rcp-to-top);
        max-width:var(--rcp-win-wide)}
.rcp-name{margin:0 0 2px; font-size:11.5pt; font-weight:700}

/* CLEAR OF THE WINDOWS. A window runs to about 4.6in across, so the title
   starts at 5in and the two never meet. */
.rcp-title{position:absolute; right:var(--rcp-left); top:var(--rcp-top);
           left:5in; text-align:right}
.rcp-what{margin:0 0 3px; font-size:13pt; font-weight:700; letter-spacing:.04em;
          text-transform:uppercase}

/* ---- the fold marks ---- */
/* FAINT, AND AT THE EDGES ONLY. They are there to be folded on once, by
   whoever is checking the envelopes, and then ignored. */
.rcp::before, .rcp::after{
    content:''; position:absolute; left:0; right:0; height:1px;
    /* A TICK AT EACH EDGE AND NOTHING ACROSS THE MIDDLE. One gradient with
       hard stops rather than a border, so the line simply is not there where
       the writing is - a dashed rule straight through a column of amounts
       reads as a strike-through. */
    background:linear-gradient(to right,
        #bdbdbd 0, #bdbdbd 0.3in,
        transparent 0.3in, transparent calc(100% - 0.3in),
        #bdbdbd calc(100% - 0.3in), #bdbdbd 100%);
    /* A GRADIENT IS A BACKGROUND IMAGE, and a browser printing a page leaves
       background images out unless somebody has ticked a box in the print
       dialog. These marks exist for no other purpose than to be printed and
       folded on, so they say to print them. */
    -webkit-print-color-adjust:exact; print-color-adjust:exact;
}
.rcp::before{top:var(--rcp-fold-one)}
.rcp::after {top:var(--rcp-fold-two)}

/* ---- everything a receipt actually says ---- */
/* CLEAR OF THE CREASE. .rcp-win is exactly one third tall, so this begins on
   the fold itself; the padding drops the first heading below it, because a
   heading creased down the middle is the one line nobody can read. */
.rcp-body{padding:var(--rcp-body-gap) var(--rcp-left) 0.5in}
.rcp-h{margin:0 0 6px; font-size:11pt; font-weight:700; letter-spacing:.03em;
       text-transform:uppercase; border-bottom:1px solid #000; padding-bottom:3px}
.rcp-body .rcp-h:first-child{margin-top:0}
.rcp-body .rcp-h + *{margin-top:0}
.rcp-h ~ .rcp-h{margin-top:20px}

/* TWO COLUMNS, NOT THREE. Somebody giving every week has fifty-two lines;
   two columns of twenty-six fit under the fold with room to read them,
   where three columns of eighteen leaves each amount squeezed against the
   date beside it. Under thirteen gifts it drops to one column - see
   receiptColumns() - because two short stacks look like a mistake. */
.rcp-cols{display:flex; gap:28px; align-items:flex-start}
.rcp-cols > .rcp-table{flex:1 1 0; min-width:0}
/* A DOZEN GIFTS DO NOT NEED EIGHT INCHES. On its own a column keeps the
   amount beside its date instead of stranding it at the far edge of the
   paper, where the eye has to travel the width of the sheet to pair them. */
.rcp-cols > .rcp-table:only-child{flex:0 1 auto; max-width:3.4in}

/* THE ROW HEIGHT IS A MEASUREMENT, not a preference: receiptColumns() puts
   nineteen rows in a column on the strength of it, and loosening this is
   what pushes a year of weekly giving onto a second page. */
.rcp-table{width:100%; border-collapse:collapse; font-size:10pt; line-height:1.25}
.rcp-table th{text-align:left; font-weight:700; padding:2px 4px;
              border-bottom:1px solid #666; white-space:nowrap}
.rcp-table td{padding:1px 4px; vertical-align:top}
/* THE DATE AND THE AMOUNT NEVER WRAP, so the comment gets whatever width is
   left over rather than all three fighting for it. A wrapped date is also
   simply wrong to look at - "5 Jan" over "2025" is not a date. */
.rcp-cols .rcp-table td:first-child,
.rcp-cols .rcp-table td:last-child{white-space:nowrap}
.rcp-table tfoot th, .rcp-table tfoot td{border-top:1px solid #000; padding-top:4px}
.rcp-sum{max-width:4in}
.rcp-nd{color:#444; font-style:italic}
.rcp-small{margin:10px 0 0; font-size:8.5pt; line-height:1.4; color:#222; max-width:6.5in}

@media print{
    /* THE MARGIN IS NOUGHT HERE and the figures above do all the work. The
       page-wide 14mm would otherwise shift every measurement by half an inch
       and put both addresses off their windows. This report sets its own
       @page in its head for exactly that reason. */
    .rcp{width:auto; min-height:0; margin:0; box-shadow:none;
         page-break-after:always; break-after:page}
    .rcp:last-child{page-break-after:auto; break-after:auto}
    .rcp-table tr{page-break-inside:avoid; break-inside:avoid}
}

/* ===== The texting consent, on the member form =====
   IT WAS BORROWING .ff-box, which belongs to the PRINTED family form and
   carries white-space:nowrap because the labels there are one word each.
   Lent to a three-sentence consent it ran straight off the side of the
   fieldset and past the edge of the page.

   A consent has to be readable or it is not a consent, so this wraps, keeps
   its lines close, and holds the tick at the top where the first line is
   rather than floating it against the middle of a paragraph. */
.tx-consent{display:flex; align-items:flex-start; gap:9px; max-width:62ch;
            cursor:pointer}
.tx-consent input{flex:0 0 auto; margin-top:3px}
.tx-consent span{font-size:.9rem; line-height:1.4}

/* ===== Positions on the member form =====
   TICK BOXES, NOT A DROPDOWN, because one person holds several and a
   dropdown can say only one of them. Each box carries its own "since" date,
   so assigning Pastor to a man who has held it for twenty-six years does not
   record him as starting this morning.

   A GRID THAT FILLS THE WIDTH rather than a single tall column: a church may
   have twenty offices, and twenty stacked rows push the Save button off the
   screen on the form where it is most needed. */
.pos-grid{display:grid; gap:6px 18px; margin:0;
          grid-template-columns:repeat(auto-fill, minmax(260px, 1fr))}
.pos-cell{display:flex; align-items:center; gap:8px; min-width:0; min-height:28px}
.pos-tick{display:flex; align-items:center; gap:6px; flex:1 1 auto; min-width:0;
          cursor:pointer}
/* A LONG NAME WRAPS RATHER THAN BEING CUT OFF. "Sunday School Dire..."
   and "Benevolence Com..." are not names anybody can tick with
   confidence, and an uneven row is a far smaller price than a label you
   have to guess at. */
.pos-tick span{overflow-wrap:anywhere}
/* THE DATE IS SECONDARY and says so: narrow, quiet, and out of the way until
   somebody needs it. */
.pos-since{flex:0 0 130px; font-size:.85rem; padding:2px 4px}

/* ===== The family verification form =====
   A FORM, NOT A REPORT, and every rule here follows from that. It is printed,
   handed to a household, written on with a pen and handed back.

   EVERY FIELD IS A RULED SLOT of the same shape: a box with a line under it,
   the value we hold printed on the line, and the label small underneath. A
   field with nothing on file is the same slot, empty. That sameness is the
   whole trick - nobody has to be told which fields they may write on.

   IT IS AIRY ON PURPOSE, AND IT WAS NOT ALWAYS. The first version fitted ten
   people on a page and was unreadable; this one fits eight and can be filled
   in by somebody holding it against a hymn book. Room to write is the point
   of the exercise - a cramped form comes back blank.

   NOTHING HERE CAN BE CHANGED WITHOUT MEASURING AGAIN. tests/famform_draw.php
   is the only thing that can tell you whether a household still fits on one
   sheet of paper. */
.ff{
    --ff-rule: #555;          /* the line somebody writes on */
    --ff-ink:  #000;
    --ff-alt:  #eaf1f8;       /* the shade behind every other person */
    box-sizing:border-box; width:100%; margin:0 auto 26px; padding:0;
    background:#fff; color:var(--ff-ink);
    font-family:Georgia, 'Times New Roman', serif; font-size:10.5pt; line-height:1.3;
}
/* THE SITE'S READING WIDTH IS WRONG HERE. styles.css caps every paragraph at
   66ch so prose is readable on a wide screen, which on this form stopped the
   legend half way across the page and wrapped a single line of choices into
   three. A form is not prose; it uses the paper it has. */
.ff p{max-width:none}

.ff-head{display:flex; justify-content:space-between; align-items:flex-start;
         gap:16px; border-bottom:2px solid var(--ff-ink); padding-bottom:4px}
.ff-church{margin:0; font-size:14pt; font-weight:700; line-height:1.15}
.ff-what{margin:1px 0 0; font-size:10pt; font-style:italic}
.ff-who{text-align:right}
.ff-fam{margin:0; font-size:12.5pt; font-weight:700; line-height:1.15}
.ff-small{margin:0; font-size:9pt}
.ff-intro{margin:7px 0 0; font-size:9.5pt; line-height:1.35}

.ff-h{margin:10px 0 4px; font-size:9.5pt; font-weight:700; letter-spacing:.06em;
      text-transform:uppercase; border-bottom:1px solid var(--ff-ink);
      padding-bottom:2px}
.ff-hnote{font-weight:400; font-size:8pt; letter-spacing:0; text-transform:none;
          font-style:italic}

/* ---- a ruled slot ---- */
.ff-row{display:flex; gap:9px; align-items:flex-end; margin:0 0 4px}
.ff-slot{min-width:0}
/* THE VALUE SITS ON THE LINE, not above it, so a correction is written
   across what is there and the two are plainly one field. The line is the
   slot's own bottom border, which prints. The height is what gives somebody
   room to write over what is already there. */
.ff-val{display:block; min-height:17px; padding:0 3px 2px;
        border-bottom:1px solid var(--ff-rule);
        font-size:10.5pt; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.ff-lab{display:block; padding:1px 3px 0; font-size:7pt; color:#333;
        letter-spacing:.02em; line-height:1.2;
        white-space:nowrap; overflow:hidden; text-overflow:ellipsis}

/* The number down the left, so a family can say "number 4 has moved out". */
.ff-num{flex:0 0 16px; font-size:9pt; font-weight:700; text-align:right;
        padding-bottom:3px}
/* THE INDENT IS NOT THE NUMBER. A person's later rows line up under their
   name but carry no number of their own, and giving the spacer the same
   class made "how many people are on this sheet" uncountable - the test
   asking it got nine for four. Same width, different job, different name. */
.ff-gap{flex:0 0 16px}

/* ---- circle one ---- */
/* NEITHER IS CIRCLED WHEN IT PRINTS. The words are spaced so a biro can go
   round one without touching the other. */
.ff-circle .ff-val{display:flex; gap:16px; align-items:flex-end}
.ff-opt{font-size:10.5pt}

/* ---- tick boxes ---- */
.ff-perms{align-items:center; gap:5px 16px; flex-wrap:wrap; margin-top:3px}
.ff-permlab{font-weight:700; font-size:9pt}
.ff-box{display:inline-flex; align-items:center; gap:4px; font-size:9pt;
        white-space:nowrap}
/* A REAL SQUARE TO TICK, drawn with a border so it prints, and big enough
   for a biro. Whatever we already hold is printed inside it. */
.ff-tick{display:inline-block; width:12px; height:12px; line-height:12px;
         border:1px solid var(--ff-ink); text-align:center;
         font-size:9px; font-family:Arial, Helvetica, sans-serif}
/* The five on a person's line sit at the end of it, and never wrap: a box
   on its own below the name belongs to nobody. */
.ff-boxes{display:flex; gap:10px; align-items:center; flex:0 0 auto;
          padding-bottom:2px}

/* ---- one person ---- */
.ff-mem{padding:3px 4px 2px}
.ff-note{margin:0; font-size:8pt; font-style:italic}
/* EVERY OTHER ONE SHADED. On a row this wide the eye loses its place between
   a name on the left and that person's tick boxes on the right; a band of
   colour carries it across. Pale enough to write over in pen and to leave a
   photocopy legible.

   IT HAS TO BE TOLD TO PRINT. A background colour is the first thing a
   browser drops from a printout, and a form whose banding only exists on
   screen has the banding exactly where it is not needed. */
.ff-mem.is-alt{background:var(--ff-alt);
               -webkit-print-color-adjust:exact; print-color-adjust:exact}

/* ---- what the words mean ---- */
/* ONLY WHAT IS ACTUALLY ASKED. Status became a Yes/No to circle, which
   explains itself, and the tick boxes are explained aloud when the forms are
   handed out. What is left is Position, which is a list of eight nobody can
   guess, and the texting wording, which is a legal record rather than help. */
.ff-legend{margin:9px 0 0; padding:6px 9px; border:1px solid var(--ff-ink)}
.ff-leg{margin:0 0 3px; font-size:8.5pt; line-height:1.35}
.ff-leg:last-child{margin-bottom:0}
.ff-consent{margin-top:4px; padding-top:4px; border-top:1px dotted #999}

.ff-sign{margin-top:10px}

@media print{
    /* ONE HOUSEHOLD TO A PAGE. That was the first thing asked for and it is
       the one rule here that cannot be compromised on. */
    .ff{page-break-after:always; break-after:page; margin-bottom:0}
    .ff:last-of-type{page-break-after:auto; break-after:auto}
    /* AND NOBODY SPLIT ACROSS TWO PAGES. A person whose name is on one sheet
       and whose tick boxes are on the next cannot be filled in. */
    .ff-mem{page-break-inside:avoid; break-inside:avoid}
    .ff-legend{page-break-inside:avoid; break-inside:avoid}
}

/* ---------------------------------------------------------------------------
   THE SIGNED DOCUMENTS ON A SET OF MINUTES

   A meeting holds up to three (Ed, 4 Nov 2026), each with its own description
   box and its own Save. One browser-default text box in a table was easy to
   overlook; three of them stacked up read as an unfinished form dropped into
   a finished page, so they get the same paper, border and radius as every
   other box on the site.

   The box and its Save are one flex row: .inline-form is display:inline, so
   at any width worth having the button wrapped underneath and each row grew
   a second line for no reason.
   ------------------------------------------------------------------------- */
.mn-docs{max-width:860px}
.mn-docs td{vertical-align:middle}
.mn-docs .inline-form{display:flex; align-items:center; gap:8px; margin:0}
.mn-docs input[type="text"]{
    flex:1 1 auto; min-width:0; padding:9px 11px; font:inherit; font-size:.93rem;
    color:var(--ink); background:var(--paper);
    border:1.5px solid var(--line); border-radius:9px}
.mn-docs input[type="text"]:focus{outline:none; border-color:var(--pine); background:var(--white)}
/* Open and Remove side by side, not one above the other. */
.mn-docs .admin-actions{display:flex; align-items:center; gap:8px; flex-wrap:nowrap}

/* ===== hidden means hidden =====
   The browser hides a [hidden] element with display:none at the very bottom
   of the cascade, so ANY class that sets a display of its own beats it and
   the element stays on the screen with the attribute set. There are five
   rules above this one patching a single class each, written one at a time
   as the bug turned up - .check-opt was the sixth, and the Move tick on a
   calculated column sat there in plain sight with hidden="hidden" on it.

   Last in the file, so it beats a class rule of the same weight set earlier,
   and no !important, so anything deliberately more specific still wins. */
[hidden]{display:none}