/* BulletinCreate — the application, not the bulletin.
   The bulletin brings its own stylesheet and is rendered inside an iframe, so
   nothing here can reach it. That separation is the point: a rule added to
   tidy up the editor must not be able to change what comes out of the
   printer. */

:root {
    --ink:      #1c2024;
    --ink-soft: #5a6472;
    --line:     #dfe3e8;
    --bg:       #f4f6f8;
    --card:     #ffffff;
    /* Warmed from #1f4e79: the old accent leaned cold steel; this one carries
       a touch of red in the same depth, so the chrome reads warm without
       going purple. */
    --accent:   #2d5aa0;
    --accent-d: #20447e;
    --warn:     #9a5b00;
    --warn-bg:  #fff5e2;
    --bad:      #a32020;
    --bad-bg:   #fdeaea;
    --ok:       #1d6a3a;
    --ok-bg:    #e8f5ec;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    /* A TENTH LARGER THROUGHOUT. Fifteen pixels is a size for a screen
       somebody leans into; a church office works at arm's length on whatever
       monitor the church already owned. Every size in this file went up with
       it — see the sweep — and the widths did not, so nothing that has to
       measure an inch stopped measuring one. */
    font: 16.5px/1.55 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    color: var(--ink);
    background: var(--bg);
}

a { color: var(--accent); }

/* ── THE BAR ────────────────────────────────────────────────────────────── */

/* THE WORDMARK'S FACE, third fitting: Akshar Bold. Spartan read rounded,
   Archivo read heavy-set; Akshar is the genuinely squared one — flat
   terminals, compact caps, engineered rather than drawn. Shipped with the
   app like the others. */
@font-face {
    font-family: 'AksharBold';
    src: url('/assets/fonts/Akshar-Bold.ttf') format('truetype');
    font-weight: 700; font-style: normal; font-display: swap;
}

.bar {
    display: flex; align-items: center; flex-wrap: wrap; gap: 10px 18px;
    padding: 10px 24px; min-height: 72px;
    background: var(--card); border-bottom: 1px solid var(--line);
    box-shadow: 0 1px 0 rgba(16,24,40,.02), 0 1px 8px rgba(16,24,40,.04);
    position: sticky; top: 0; z-index: 20;
}
/* THE MARK STANDS BESIDE THE WORDMARK, and it is the same file the tab shows
   — one drawing of this thing rather than two that can disagree. It also
   gives the bar a fixed point on the left: the wordmark alone, at a bar this
   wide, read as the first word of the menu. */
.brand { display: inline-flex; align-items: center; gap: 10px;
         font-family: 'AksharBold', system-ui, sans-serif; font-weight: 700;
         font-size: 31px; text-decoration: none; color: var(--ink);
         text-transform: lowercase; letter-spacing: 0.2px; line-height: 1;
         /* Akshar stops at 700; the stroke is how it gets past it. */
         -webkit-text-stroke: 0.7px currentColor; }
.brand img { width: 30px; height: 30px; display: block;
             /* The stroke above is inherited by everything in the anchor and
                would fur the edges of a picture. */
             -webkit-text-stroke: 0; }
/* "create" in the accent — and said of the INNER span only, now that the
   wordmark sits in a wrapper of its own: matched loosely it painted the whole
   word blue. */
.brand .wm { color: var(--ink); }
.brand .wm span { color: var(--accent); }
/* Below this the mark carries the brand on its own and the tabs get the room
   the wordmark was taking. */
@media (max-width: 700px) { .brand .wm { display: none; } }

/* The wordmark goes on a narrow window; the mark alone carries the brand. */
/* ── THE ACCOUNT, TOP RIGHT ──────────────────────────────────────────────
   Settings and Keys are not work — they are the account, opened twice a year
   — so they sit up here with the church's name and the way out, rather than
   taking two of the thirteen places in the list of screens. */
.who { margin-left: auto; display: flex; align-items: center; gap: 6px;
       font-size: 14.5px; color: var(--ink-soft); }
.who .wl { display: inline-flex; align-items: center; gap: 7px; padding: 8px 12px;
           border-radius: 999px; text-decoration: none; color: #55606C;
           font-size: 15px; font-weight: 600; white-space: nowrap;
           transition: background .12s, color .12s; }
.who .wl .ni { font-size: 14.5px; opacity: .6; }
.who .wl:hover { background: var(--bg); color: var(--ink); }
.who .wl:hover .ni { opacity: 1; }
.who .wl.on { background: #E9EFF8; color: var(--accent); }
.who .wl.on .ni { opacity: 1; }
.who .wc { background: var(--bg); border: 1px solid var(--line);
           border-radius: 999px; padding: 5px 12px; font-weight: 600;
           color: #55606C; white-space: nowrap; margin-left: 8px; }
.who > a[href="/logout.php"] { color: var(--ink-soft); text-decoration: none;
                               font-weight: 600; padding: 0 4px 0 8px; }
.who > a[href="/logout.php"]:hover { color: var(--ink); }

/* ── THE SCREENS, DOWN THE LEFT ──────────────────────────────────────────
   A row of tabs has to be measured against the window every time a screen is
   added — thirteen of them folded the bar onto two lines at 1440 and hid the
   last three at 1280. A column has no such edge: a fourteenth screen costs a
   row, and the name of every screen is readable at a glance instead of being
   a chip somewhere along a line. */
.shell { display: flex; align-items: flex-start; min-height: calc(100vh - 72px); }

.rail { flex: 0 0 264px; width: 264px; align-self: stretch;
        background: var(--card); border-right: 1px solid var(--line);
        padding: 16px 14px 28px; position: sticky; top: 72px;
        max-height: calc(100vh - 72px); overflow-y: auto; }
.rail nav { display: flex; flex-direction: column; gap: 3px; }
.rail nav a { display: flex; align-items: center; gap: 13px; padding: 12px 14px;
              border-radius: 12px; text-decoration: none; color: #55606C;
              font-size: 17px; font-weight: 600; line-height: 1.25;
              transition: background .12s, color .12s; }
.rail nav a .ni { flex: 0 0 20px; font-size: 18px; opacity: .55; text-align: center; }
.rail nav a:hover { background: var(--bg); color: var(--ink); }
.rail nav a:hover .ni { opacity: 1; }
/* The screen you are on, named by the accent — a tinted row rather than a
   solid slab, so it marks the place without shouting over the work. */
.rail nav a.on { background: #E9EFF8; color: var(--accent); }
.rail nav a.on .ni { opacity: 1; }

main { flex: 1 1 auto; min-width: 0; padding: 24px; }

/* NARROW: the names go and the marks stay, which is a rail rather than a
   list — and narrower still it lies down across the top, because a column
   down the side of a telephone is most of the telephone. */
@media (max-width: 1180px) {
    .rail { flex-basis: 68px; width: 68px; padding: 14px 9px 22px; }
    .rail nav a { justify-content: center; padding: 11px 0; }
    .rail nav a .nw { display: none; }
    .rail nav a .ni { flex: 0 0 auto; font-size: 17.5px; }
}
@media (max-width: 760px) {
    .shell { display: block; }
    .rail { position: static; width: auto; max-height: none; flex-basis: auto;
            border-right: 0; border-bottom: 1px solid var(--line);
            padding: 8px 10px; overflow-x: auto; }
    .rail nav { flex-direction: row; }
    .rail nav a { padding: 9px 12px; }
    .rail nav a .nw { display: inline; }
}

/* ── THE EDITOR: FIELDS ON THE LEFT, THE PAGE ON THE RIGHT ─────────────── */

/* Two columns, because the whole promise of the thing is that you see what
   you are making while you make it. Below 1000px they stack — the preview
   first, so a phone still opens on the bulletin rather than on a form. */
.editor { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.05fr);
          gap: 20px; align-items: start; max-width: 1500px; margin: 0 auto; }
@media (max-width: 1000px) {
    .editor { grid-template-columns: 1fr; }
    .editor .paper { order: -1; }
}

.card {
    background: var(--card); border: 1px solid var(--line);
    border-radius: 10px; padding: 16px 18px; margin-bottom: 16px;
}
.card > h2 { margin: 0 0 2px; font-size: 16.5px; }
.card > .hint { margin: 0 0 14px; font-size: 14.5px; color: var(--ink-soft); }

.row { display: flex; gap: 12px; }
.row > * { flex: 1; min-width: 0; }

label { display: block; font-size: 13px; font-weight: 600;
        color: var(--ink-soft); margin: 0 0 4px; }
label .note { font-weight: 400; text-transform: none; }

input[type=text], input[type=email], input[type=password],
input[type=date], input[type=time], input[type=datetime-local],
input[type=url], select, textarea {
    width: 100%; padding: 8px 10px; font: inherit; font-size: 15.5px;
    /* THE SAME LEADING AS A BUTTON, SO THE TWO ARE THE SAME HEIGHT.
       A button inherits the body's 1.5 and a form control defaults to normal,
       which for 14px is about 18.5 — so every input standing beside a button
       was two and a half pixels shorter than it, everywhere in the app. Near
       enough to look like a mistake and not near enough to see why. */
    line-height: 21px;
    border: 1px solid var(--line); border-radius: 7px; background: #fff;
    color: var(--ink);
}
textarea { resize: vertical; min-height: 68px; line-height: 1.45; }

/* A SELECT WILL NOT TAKE ITS HEIGHT FROM ITS LEADING.
   The line-height above squares a text input with a button; a native select
   ignores it and sizes itself from its own metrics, which left it two and a
   half pixels short of everything it stood beside. The height is therefore
   said out loud — as the sum it ought to have arrived at, so the number is
   readable rather than magic. */
select { height: calc(21px + 16px + 2px); }   /* line + padding + border */
input:focus, select:focus, textarea:focus {
    outline: none; border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(31,78,121,.13);
}
.field { margin-bottom: 12px; }
.field:last-child { margin-bottom: 0; }

.check { display: flex; align-items: center; gap: 8px; font-size: 15.5px; }
.check input { width: 16px; height: 16px; margin: 0; }
.check label { margin: 0; font-size: 15.5px; font-weight: 400; color: var(--ink); }

/* ── BUTTONS ───────────────────────────────────────────────────────────── */

.btn {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 8px 14px; font: inherit; font-size: 15.5px; font-weight: 500;
    border: 1px solid var(--line); border-radius: 7px;
    background: #fff; color: var(--ink); cursor: pointer; text-decoration: none;
}
.btn:hover { background: var(--bg); }
.btn.primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn.primary:hover { background: var(--accent-d); }
.btn[disabled] { opacity: .55; cursor: default; }
/* A button is inline-flex, and inline-flex outranks the browser's own rule
   for [hidden] — so a hidden button was not hidden at all. */
.btn[hidden] { display: none; }
.btn.small { padding: 5px 10px; font-size: 14.5px; }

/* THE SUNDAY IS ONE DATE. It had the width of two fields and the row beside
   it — a select holding "September 27, 2026" stretched across most of a card,
   which reads as a field somebody forgot to size. It takes the width of its
   own longest option now. */
#sunday { width: auto; min-width: 205px; }

/* ── THE PAPER ─────────────────────────────────────────────────────────── */

/* Sticky, so the page stays in view while the form is scrolled. */
.paper { position: sticky; top: 72px; }
.paper .tools {
    display: flex; align-items: center; gap: 10px; margin-bottom: 10px;
}
.paper .tools .spacer { margin-left: auto; }
.paper iframe {
    width: 100%; height: 78vh; border: 1px solid var(--line);
    border-radius: 10px; background: #8b9199; display: block;
}
/* WHILE THE BULLETIN IS BEING REDRAWN, IT LOOKS LIKE IT.
   The redraw is a round trip to the server and back — long enough that a
   change made and then looked at appears not to have happened. See stale()
   in app.js. Fading rather than covering, so you can still read the page you
   were working on while the new one is on its way. */
.paper iframe            { transition: opacity .15s ease; }
.paper iframe.stale      { opacity: .38; }

/* A BLOCK THAT DID NOT PRINT AT ALL reads redder than one that merely spilled
   onto another sheet, because losing something is not the same as moving it. */
.toofull.bad { background: #fdeaea; color: #a32020; }

.saving { font-size: 13px; color: var(--ink-soft); }

/* When a page holds more than will fit, the PDF spills onto another sheet.
   The browser clips instead, so without this the office would never know. */
.toofull {
    margin-top: 10px; padding: 9px 12px; border-radius: 8px;
    background: var(--warn-bg); color: var(--warn); font-size: 14.5px;
    border: 1px solid #f0dcae;
}

/* ── MESSAGES ──────────────────────────────────────────────────────────── */

.flash { padding: 10px 14px; border-radius: 8px; margin-bottom: 16px; font-size: 15.5px; }
.flash.ok   { background: var(--ok-bg);   color: var(--ok);   border: 1px solid #bfe3cc; }
.flash.bad  { background: var(--bad-bg);  color: var(--bad);  border: 1px solid #f0c2c2; }
.flash.warn { background: var(--warn-bg); color: var(--warn); border: 1px solid #f0dcae; }

/* ── SIGNING IN ────────────────────────────────────────────────────────── */

.gate { max-width: 400px; margin: 8vh auto; }
.gate .card { padding: 26px; }
.gate h1 { margin: 0 0 4px; font-size: 23px; }
.gate .hint { margin: 0 0 20px; color: var(--ink-soft); font-size: 15.5px; }
.gate .btn { width: 100%; justify-content: center; margin-top: 6px; }
.gate .alt { text-align: center; margin-top: 16px; font-size: 14.5px; color: var(--ink-soft); }

/* ── LISTS (events, announcements) ─────────────────────────────────────── */

.item {
    border: 1px solid var(--line); border-radius: 8px;
    padding: 11px 13px; margin-bottom: 9px; background: #fff;
}
.item .top { display: flex; align-items: baseline; gap: 10px; }
.item .top strong { font-size: 15.5px; }
.item .top .when { font-size: 13px; color: var(--ink-soft); margin-left: auto; }
.item .blurb { font-size: 14.5px; color: var(--ink-soft); margin-top: 3px; }

/* THE TICK THAT CARRIES AN EVENT INTO COMING UP.
   Its own class, not .check or .row: those belong to the forms, and borrowing
   one of them for a list item has already collapsed two screens once. */
.ev-tick { margin-top: 8px; }
.ev-tick label { display: inline-flex; align-items: center; gap: 7px;
                 cursor: pointer; font-size: 14.5px; color: var(--ink-soft); }
.ev-tick input[type="checkbox"] { width: 15px; height: 15px; margin: 0;
                                  accent-color: var(--accent); }

/* The Save for the whole list, above it and below it — the list runs to sixty
   dates and a button only at one end is a button somebody has to go looking
   for. */
/* ── THE EVENTS SCREEN ─────────────────────────────────────────────────────
   One column down the middle rather than a form beside a list. The form was
   permanently open next to something it had nothing to do with, taking half
   the screen to be used once a week; it is a panel now, and the dates have the
   width to themselves. */
.ev-page { max-width: 840px; margin: 0 auto; }

.ev-bar { display: flex; align-items: flex-start; gap: 20px; margin-bottom: 18px; }
.ev-bar-l { flex: 1 1 auto; }
.ev-bar h1 { font-size: 23px; margin: 0 0 5px; }
.ev-bar .hint { margin: 0; max-width: 56ch; }
.ev-bar-r { flex: 0 0 auto; padding-top: 2px; }
.ev-plus { font-size: 18.5px; line-height: 1; margin-top: -2px; }

.ev-filters {
    display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px;
    padding: 12px 0 16px; border-bottom: 1px solid var(--line); margin-bottom: 4px;
}
.ev-save { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.ev-save .note { color: var(--ink-soft); font-size: 14.5px; }

.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip {
    padding: 5px 11px; border: 1px solid var(--line); border-radius: 999px;
    background: #fff; font: inherit; font-size: 14.5px; color: var(--ink-soft);
    cursor: pointer; white-space: nowrap;
}
.chip:hover { border-color: var(--ink-soft); color: var(--ink); }
.chip.on { background: var(--accent); border-color: var(--accent); color: #fff; }

.ev-empty {
    text-align: center; padding: 46px 20px; color: var(--ink-soft);
    border: 1px dashed var(--line); border-radius: 12px; margin-top: 16px;
}
.ev-empty p { margin: 0 0 14px; }

/* ── THE LINE ──────────────────────────────────────────────────────────────
   Every date is a bead on one rule, so a month reads as a run of dates rather
   than a stack of boxes that happen to be in order. The rule is drawn on the
   list rather than on each row, or it would break at every gap. */
.tl { position: relative; padding: 8px 0 0 76px; }
.tl::before {
    content: ''; position: absolute; left: 27px; top: 18px; bottom: 10px;
    width: 2px; background: var(--line); border-radius: 2px;
}

.tl-month { position: relative; margin: 18px 0 12px; }
.tl-month[hidden] { display: none; }
.tl-month span {
    font-size: 13px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
    color: var(--ink-soft); background: var(--bg); padding: 3px 10px;
    border-radius: 999px; border: 1px solid var(--line);
}
/* The marker sits ON the line, which means covering it — the rule is drawn
   behind everything, so a solid ground is what makes the break. */
.tl-month::before {
    content: ''; position: absolute; left: -60px; top: -4px; width: 20px; height: 28px;
    background: var(--bg);
}

.tl-row { position: relative; margin-bottom: 12px; }
.tl-row[hidden] { display: none; }

.tl-bead {
    position: absolute; left: -76px; top: 10px;
    width: 54px; height: 54px; border-radius: 50%;
    background: #fff; border: 2px solid var(--line);
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    line-height: 1;
}
.tl-bead .d { font-size: 18.5px; font-weight: 700; color: var(--ink); }
.tl-bead .w { font-size: 11px; font-weight: 700; letter-spacing: .06em;
              text-transform: uppercase; color: var(--ink-soft); margin-top: 2px; }

.tl-card {
    background: #fff; border: 1px solid var(--line); border-radius: 12px;
    padding: 14px 16px;
}
/* An event carried in Coming Up says so along its edge, which is quieter than
   a badge and visible down the whole list at once. */
.tl-card.on + .tl-bead, .tl-row:has(.tl-card.on) .tl-bead { border-color: var(--accent); }

.tl-head { display: flex; align-items: baseline; gap: 10px; }
.tl-head h3 { font-size: 16.5px; margin: 0; flex: 1 1 auto; }
.tl-head .tag {
    flex: 0 0 auto; font-size: 12px; font-weight: 700; letter-spacing: .05em;
    text-transform: uppercase; color: var(--ink-soft);
    background: var(--bg); border-radius: 999px; padding: 3px 9px;
}

.tl-when { margin: 5px 0 0; font-size: 14.5px; color: var(--accent); font-weight: 600; }
.tl-when .dot { color: var(--line); margin: 0 7px; font-weight: 400; }
.tl-blurb { margin: 6px 0 0; font-size: 14.5px; color: var(--ink-soft); }

.tl-foot {
    display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px;
    margin-top: 12px; padding-top: 11px; border-top: 1px solid var(--line);
}
.tl-tick { display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
           font-size: 14.5px; color: var(--ink-soft); }
.tl-tick input { width: 16px; height: 16px; margin: 0; accent-color: var(--accent); }
.tl-acts { margin-left: auto; display: flex; gap: 6px; align-items: center; }
.btn.small.danger { color: var(--bad); }
.btn.small.danger:hover { border-color: var(--bad); }

.tl-none { padding: 30px 4px; color: var(--ink-soft); }
.tl-none[hidden] { display: none; }

/* ── A PANEL OVER THE PAGE ─────────────────────────────────────────────────
   display is said twice for the same reason the toast says it: `display:flex`
   beats the hidden attribute, and a panel that ignores hidden is a panel that
   is always open. */
.modal[hidden] { display: none; }
.modal { position: fixed; inset: 0; z-index: 90; display: flex;
         align-items: flex-start; justify-content: center; padding: 40px 20px; overflow: auto; }
.modal-back { position: fixed; inset: 0; background: rgba(16,24,40,.45); }
body.modal-open { overflow: hidden; }

.modal-box {
    position: relative; width: 100%; max-width: 980px;
    max-height: calc(100vh - 60px); overflow-y: auto;
    background: #fff; border-radius: 14px; box-shadow: 0 24px 60px rgba(16,24,40,.28);
}
.modal-head {
    display: flex; align-items: center; gap: 12px;
    padding: 17px 22px; border-bottom: 1px solid var(--line);
}
.modal-head h2 { margin: 0; font-size: 18.5px; flex: 1 1 auto; }
.modal-x {
    flex: 0 0 auto; width: 30px; height: 30px; border: 0; border-radius: 7px;
    background: none; font-size: 24px; line-height: 1; color: var(--ink-soft); cursor: pointer;
}
.modal-x:hover { background: var(--bg); color: var(--ink); }
.modal-body { padding: 20px 22px; }
.modal-foot {
    display: flex; gap: 8px; align-items: center;
    margin-top: 4px; padding-top: 14px; border-top: 1px solid var(--line);
}

/* SPECIAL DAYS, on its own screen: grouped by month, because that is the unit
   the bulletin prints in and the only grouping that answers "who will be on
   it". The month this Sunday falls in is marked, since that is the one the
   church is about to hand out. */
.sd-month { margin: 0 0 16px; }
.sd-month h3 { font-size: 14.5px; text-transform: uppercase; letter-spacing: .06em;
               color: var(--ink-soft); margin: 0 0 6px; font-weight: 700; }
.sd-month h3 .note { text-transform: none; letter-spacing: 0; color: var(--accent);
                     font-weight: 600; }
.sd-month.now h3 { color: var(--accent); }
.sd-row { display: flex; align-items: center; gap: 10px; padding: 6px 0;
          border-bottom: 1px solid var(--line); }
.sd-row:last-child { border-bottom: 0; }
.sd-row .d { flex: 0 0 24px; text-align: right; font-weight: 700;
             color: var(--accent); font-size: 15.5px; }
.sd-row .n { flex: 1 1 auto; font-size: 15.5px; }
.sd-row .k { flex: 0 0 auto; font-size: 13px; color: var(--ink-soft); }
.sd-row .acts { flex: 0 0 auto; display: flex; gap: 6px; align-items: center; }

/* The name of the block a group of fields belongs to. Without it a page
   holding two announcements showed two identical stacks of inputs. */
.placed-k { margin: 0 0 9px; font-size: 12px; font-weight: 700; letter-spacing: .07em;
            text-transform: uppercase; color: var(--ink-soft); }

.tickbar { display: flex; align-items: center; gap: 12px; margin: 4px 0 14px; }
.tickbar:last-child { margin: 14px 0 0; }
.tickbar .note { color: var(--ink-soft); font-size: 14.5px; }
.empty { color: var(--ink-soft); font-size: 15.5px; padding: 10px 0; }

/* ── STOCK PHOTOGRAPH RESULTS ──────────────────────────────────────────── */

.stock { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-top: 9px; }
.stock:empty { margin-top: 0; }
.stock button {
    padding: 0; border: 1px solid var(--line); border-radius: 6px;
    overflow: hidden; cursor: pointer; background: #fff; line-height: 0;
}
.stock button:hover { border-color: var(--accent); }
.stock img { width: 100%; height: 62px; object-fit: cover; display: block; }
.stock .by { display: block; font-size: 10px; color: var(--ink-soft);
             padding: 2px 3px; line-height: 1.25; text-align: left;
             white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stock-msg { font-size: 14.5px; color: var(--ink-soft); margin-top: 8px; }

/* ── FINDING A PHOTOGRAPH, BESIDE ANY PICTURE FIELD ───────────────────────
   The same panel as the icon chooser, and placed the same way: anchored to its
   own right edge, because this button sits at the end of a row and a panel
   hung from its left would run off the side of the column. */
.stockpick { position: relative; flex: 0 0 auto; }
.stockpick .find { margin: 0; }
.stockpick .hits {
    position: absolute; z-index: 30; right: 0; top: calc(100% + 3px);
    width: 330px; max-width: 76vw;
    background: #fff; border: 1px solid var(--line); border-radius: 8px;
    box-shadow: 0 10px 26px rgba(0,0,0,.13); padding: 6px;
}
.stockpick.up .hits { top: auto; bottom: calc(100% + 3px); }
.stockpick .hits input {
    width: 100%; margin-bottom: 6px; padding: 6px 9px; font-size: 14.5px; border-radius: 6px;
}
/* Three across rather than four: the panel is narrower than the Design screen
   column this grid was written for, and four made thumbnails too small to
   judge a photograph by. */
.stockpick .stock {
    grid-template-columns: repeat(3, 1fr); gap: 4px;
    max-height: 202px; overflow-y: auto; margin-top: 0;
}
.stockpick .stock:empty { display: none; }
.stockpick .note { font-size: 12px; color: var(--ink-soft); padding: 5px 2px 0; }

/* ── SEARCHING THE FONT CATALOGUE ──────────────────────────────────────── */

.fontlist { position: relative; }
.fontlist .hits {
    position: absolute; z-index: 30; left: 0; right: 0; top: 2px;
    max-height: 260px; overflow-y: auto;
    background: #fff; border: 1px solid var(--line); border-radius: 8px;
    box-shadow: 0 10px 26px rgba(0,0,0,.13);
}
.fontlist button {
    display: block; width: 100%; text-align: left; border: 0; background: none;
    padding: 7px 11px; cursor: pointer; font: inherit; font-size: 15.5px;
    border-bottom: 1px solid #f0f2f4;
}
.fontlist button:last-child { border-bottom: 0; }
.fontlist button:hover, .fontlist button.on { background: var(--bg); }
.fontlist .cat { font-size: 12px; color: var(--ink-soft); margin-left: 7px; }
.fontlist .have { font-size: 11px; color: var(--ok); margin-left: 7px; }
.fontlist .note { padding: 7px 11px; font-size: 13px; color: var(--ink-soft); }

/* ── THE DATE PICKER ───────────────────────────────────────────────────────
   See assets/js/datepick.js. The native field is still here and still holds
   the value — it is moved out of sight rather than hidden, because a required
   field that is display:none makes the browser refuse to submit and refuse to
   say why. It keeps a one-pixel footprint under the button so that if the
   browser does complain, the complaint points at the right place. */
.dpick { position: relative; }
.dpick .dp-native {
    position: absolute; left: 12px; bottom: 0; width: 1px; height: 1px;
    opacity: 0; padding: 0; border: 0; pointer-events: none;
}

.dp-cur {
    display: flex; align-items: center; gap: 9px; width: 100%;
    height: calc(21px + 16px + 2px); padding: 0 10px;
    border: 1px solid var(--line); border-radius: 7px; background: #fff;
    font: inherit; font-size: 15.5px; color: var(--ink);
    cursor: pointer; text-align: left;
}
.dp-cur:hover { border-color: var(--ink-soft); }
.dp-cur.empty .dp-t { color: var(--ink-soft); }
.dp-cur .dp-ic { flex: 0 0 auto; width: 17px; height: 17px; color: var(--accent); }
.dp-cur .dp-ic svg { width: 17px; height: 17px; display: block; }

.dp-pop {
    position: absolute; z-index: 40; left: 0; top: calc(100% + 4px); width: 268px;
    background: #fff; border: 1px solid var(--line); border-radius: 10px;
    box-shadow: 0 12px 30px rgba(16,24,40,.16); padding: 10px;
}
.dp-pop[hidden] { display: none; }
.dp-pop.right { left: auto; right: 0; }

.dp-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.dp-head strong { font-size: 15.5px; }
.dp-nav {
    width: 28px; height: 28px; border: 0; border-radius: 6px; background: none;
    font-size: 21px; line-height: 1; color: var(--ink-soft); cursor: pointer;
}
.dp-nav:hover { background: var(--bg); color: var(--ink); }

.dp-dow, .dp-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.dp-dow span {
    text-align: center; font-size: 12px; font-weight: 700; color: var(--ink-soft);
    padding-bottom: 4px;
}
.dp-grid button {
    height: 32px; border: 0; border-radius: 6px; background: none;
    font: inherit; font-size: 14.5px; color: var(--ink); cursor: pointer;
}
.dp-grid button:hover { background: var(--bg); }
/* Today is marked, not chosen — an outline says "you are here" where a fill
   would say "this is the answer". */
.dp-grid button.now { box-shadow: inset 0 0 0 1px var(--line); font-weight: 700; }
.dp-grid button.on  { background: var(--accent); color: #fff; font-weight: 700; }
.dp-grid button.on:hover { background: var(--accent-d); }

.dp-time {
    display: flex; align-items: center; gap: 9px;
    margin-top: 9px; padding-top: 9px; border-top: 1px solid var(--line);
}
.dp-time label { font-size: 14.5px; color: var(--ink-soft); }
.dp-time input { width: auto; flex: 1 1 auto; }

.dp-foot { display: flex; gap: 8px; margin-top: 9px; }
.dp-foot button {
    flex: 1 1 0; padding: 6px 0; border: 1px solid var(--line); border-radius: 6px;
    background: #fff; font: inherit; font-size: 14.5px; color: var(--ink); cursor: pointer;
}
.dp-foot button:hover { background: var(--bg); }

/* ── COLOUR PICKERS ────────────────────────────────────────────────────────
   A colour input is a rounded rectangle by default and looks like a squashed
   pill at any height that is not its natural one. Made round on purpose: it
   is a swatch of colour, and a circle says that with no other explanation.

   The inner swatch has to be styled through its own pseudo-elements — the
   border-radius on the input itself only rounds the frame, leaving a square
   of colour sitting inside a circle. */
/* A COLOUR IS A CIRCLE, AND THE RING IS BLACK. Round means equal width and
   height wherever one of these appears — a swatch given 42 by 34 is an egg —
   and the ring has to be heavy and dark or a white swatch on a white card is
   an invisible control with a shadow. */
input[type=color] {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    width: 42px; height: 42px;
    flex: 0 0 42px;
    padding: 0;
    border: 3px solid #111418;
    border-radius: 50%;
    background: none;
    cursor: pointer;
    display: block;
}
input[type=color]:hover  { border-color: #000; }
input[type=color]:focus  { outline: none; border-color: var(--accent);
                           box-shadow: 0 0 0 3px rgba(31,78,121,.22); }
input[type=color]::-webkit-color-swatch-wrapper { padding: 0; border-radius: 50%; }
input[type=color]::-webkit-color-swatch { border: none; border-radius: 50%; }
input[type=color]::-moz-color-swatch     { border: none; border-radius: 50%; }

/* ── ICONS IN THE APPLICATION ──────────────────────────────────────────────
   The bulletin sets its icons in the font directly; these are for the
   choosers, which have to show a shape before it has been chosen. */
.fa-s { font-family: 'faSolid';   font-style: normal; }
.fa-r { font-family: 'faRegular'; font-style: normal; }
.fa-b { font-family: 'faBrands';  font-style: normal; }

.iconpick { position: relative; }
/* The same height as every other control it stands beside. The glyph inside
   it is 17px, which was setting the height on its own and making the picker
   the one tall thing in a row of fields. */
/* ── THE CHIP, MODERN: a soft tile holding the glyph, the name beside,
   and an empty state that reads as an invitation instead of punctuation. */
.iconpick .cur .g { width: 30px; height: 30px; display: inline-flex; align-items: center;
    justify-content: center; background: #F2F4F7; border-radius: 8px; flex: 0 0 auto; }
.iconpick .cur.empty .g { background: transparent; border: 1.5px dashed #C6CBD1;
    color: var(--ink-soft); font-size: 16.5px; }
.iconpick .cur.empty .n { color: var(--ink-soft); }
.iconpick .setrow { display: flex; gap: 4px; overflow-x: auto; padding-bottom: 6px;
    margin-bottom: 6px; scrollbar-width: thin; }
.ip-set { flex: 0 0 auto; border: 1px solid var(--line); background: #fff;
    border-radius: 999px; padding: 4px 11px; font-size: 13px; font-weight: 600;
    color: #55606C; cursor: pointer; }
.ip-set:hover { background: var(--bg); }
.ip-set.on { background: #E9EFF8; border-color: transparent; color: var(--accent); }
.iconpick .cur {
    display: flex; align-items: center; gap: 9px; width: 100%;
    height: calc(21px + 16px + 2px); padding: 0 10px;
    border: 1px solid var(--line); border-radius: 7px;
    background: #fff; cursor: pointer; font: inherit; font-size: 15.5px; text-align: left;
}
.iconpick .cur:hover { border-color: var(--ink-soft); }
.iconpick .cur .g { font-size: 18.5px; color: var(--accent); width: 22px; text-align: center; }
.iconpick .cur .n { color: var(--ink-soft); font-size: 14.5px; }

.iconpick .hits {
    position: absolute; z-index: 30; left: 0; right: 0; top: calc(100% + 3px);
    background: #fff; border: 1px solid var(--line); border-radius: 8px;
    box-shadow: 0 10px 26px rgba(0,0,0,.13); padding: 6px;
}
/* Opened upwards, when there is no room for it below — see place(). */
.iconpick.up .hits { top: auto; bottom: calc(100% + 3px); }
/* A CHOOSER, NOT A PAGE. Everything in here was at the size of a field on the
   form behind it, which made a panel about a third of the window tall for the
   job of picking one small shape. The glyphs are what matter; the furniture
   round them is now as small as it can be and still be hit. */
.iconpick .hits input {
    margin-bottom: 6px; padding: 8px 11px; font-size: 15px; border-radius: 9px;
    background: #F7F8FA; border: 1px solid transparent;
}
.iconpick .hits input:focus { background: #fff; border-color: var(--accent); outline: none; }
/* THE CROSS ON THE FIELD, which is where somebody looks to undo something.
   Only drawn when there is an icon to remove — see showCross() in iconpick.js. */
.iconpick .clear { display: none; }
.iconpick.has .clear {
    display: block; position: absolute; z-index: 2;
    top: 50%; right: 9px; transform: translateY(-50%);
    width: 21px; height: 21px; padding: 0; line-height: 19px;
    border: 0; border-radius: 50%; background: var(--bg);
    color: var(--ink-soft); cursor: pointer; font-size: 17.5px; text-align: center;
}
.iconpick.has .clear:hover { background: #fdeaea; color: #a32020; }
/* So a long icon name does not run under the cross. */
.iconpick.has .cur { padding-right: 36px; }

/* AND THE SAME WAY OUT FROM INSIDE THE PANEL. It was a white box with a grey
   border directly above a white box with a grey border, which is to say it
   looked like a second search field and read as one — the reason this was
   reported as having no way to remove an icon after it had been added. An
   action is not a field, so it stops looking like one. */
.iconpick .hits .none {
    display: block; width: 100%; margin-bottom: 6px; padding: 5px 9px;
    border: 0; border-radius: 6px; background: #fdeaea;
    cursor: pointer; font: inherit; font-size: 13px; font-weight: 600;
    color: #a32020; text-align: left;
}
.iconpick .hits .none:hover { background: #f8dcdc; }
.iconpick .grid {
    display: grid; grid-template-columns: repeat(10, 1fr); gap: 2px;
    max-height: 154px; overflow-y: auto;
}
.iconpick .grid button {
    border: 1px solid transparent; border-radius: 8px; background: none;
    cursor: pointer; padding: 6px 0; font-size: 16.5px; color: var(--ink);
    line-height: 1;
}
.iconpick .grid button:hover { background: #E9EFF8; border-color: transparent;
    color: var(--accent); }
.iconpick .note { font-size: 12px; color: var(--ink-soft); padding: 5px 2px 0; }


/* ── THE PRAYER SCREEN ────────────────────────────────────────────────────
   Rows like the events screen: words on the left, what you can do on the
   right, a hairline between rows and nothing boxed. */
.pr-row { display: flex; align-items: center; justify-content: space-between;
          gap: 12px; padding: 11px 0; border-top: 1px solid var(--line); }
.pr-row:first-of-type { border-top: 0; }
.pr-row.answered .pr-words { color: var(--ink-soft); }
.pr-words { font-size: 15.5px; line-height: 1.45; }
.pr-req { color: var(--ink-soft); }
.pr-tag { display: inline-block; font-size: 11px; font-weight: 700;
          letter-spacing: .08em; text-transform: uppercase; color: var(--accent);
          background: var(--bg); border-radius: 4px; padding: 3px 6px;
          margin-right: 6px; vertical-align: 1px; }
/* The category column: one width for every chip, so the names line up. */
.pr-tag.cat { min-width: 96px; text-align: center; }
.pr-tag.new { background: #E8F4EC; color: #1F7A3D; }
.pr-tag.upd { background: #FCF1DF; color: #A96A0C; }
/* The mission field: geography, not status — quiet grey, no shout. */
.pr-tag.fld { background: #F1F4F7; color: #55606C; text-transform: none;
              letter-spacing: .02em; }
.pr-do { flex: 0 0 auto; display: flex; gap: 5px; align-items: center; }
/* Update and Un-update share one width, so the row of buttons under them
   never shifts with the word. */
.pr-do .btn.w-upd { min-width: 86px; text-align: center; }
/* THE ANSWERED ROW: one line of facts, one line of words.
   The name leads; category and date sit quiet at the far end of the same
   line; the note runs the width beneath with a single Save that never
   wraps. */
.pr-row.ans { align-items: flex-start; }
.pr-main { flex: 1 1 auto; min-width: 0; }
.pr-top { display: flex; align-items: baseline; gap: 10px; }
.pr-top b { font-size: 15.5px; }
.pr-when { margin-left: auto; font-size: 13px; color: var(--ink-soft);
           white-space: nowrap; padding-right: 8px; }
.pr-note { display: flex; gap: 6px; margin-top: 7px; }
.pr-note input[type=text] { flex: 1 1 auto; font-size: 14.5px; padding: 6px 9px; }
.pr-note .btn { white-space: nowrap; flex: 0 0 auto; }
/* The bulletin tick reads as a state, not a button: quiet until it is on. */
.pr-onb { display: inline-flex; margin: 0; }
.pr-onb label { display: inline-flex; align-items: center; gap: 4px;
                font-size: 13px; color: var(--ink-soft); cursor: pointer;
                padding: 4px 8px; border: 1px solid var(--line); border-radius: 6px; }
.pr-onb label.on { background: var(--accent); border-color: var(--accent); color: #fff; }

/* The category filter: a row of chips, the counts inside them, the one that is
   on filled with the accent. */
.pr-fit { display: flex; align-items: center; gap: 14px; margin: 16px 0 0;
          font-size: 14px; color: var(--ink-soft); }
.pr-fit label { display: inline-flex; align-items: center; gap: 5px;
                font-size: 14px; color: var(--ink); cursor: pointer; }

/* ── THE OUTLINE ON THE BACK ────────────────────────────────────────────
   Three loose parts — a wrapping tick, a browser-drawn search pill and a
   select stretched the width of a very wide desk — read as leftovers rather
   than as a control. One strip now, and it says one sentence: whether the
   Prayer Bulletin carries an outline, and which. The chooser is only there
   when the answer is yes, because a list you cannot act on is furniture. */
.ol-back { display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
           margin: 14px 0 0; padding: 9px 13px;
           border: 1px solid var(--line); border-radius: 10px;
           background: #fafbfc; }
.ol-back.on { background: var(--card); border-color: #ccd8ea;
              box-shadow: 0 1px 3px rgba(16,24,40,.05); }

/* The switch. A tick answers "is this ticked"; a switch answers "is this on",
   which is the question being asked. */
.ol-sw { display: inline-flex; align-items: center; gap: 9px; cursor: pointer;
         font-size: 15px; font-weight: 600; color: var(--ink);
         white-space: nowrap; margin: 0; text-transform: none;
         letter-spacing: 0; }
.ol-sw input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.ol-track { position: relative; flex: 0 0 auto; width: 36px; height: 21px;
            border-radius: 999px; background: #c6cfda;
            transition: background .15s ease; }
.ol-knob { position: absolute; top: 3px; left: 3px; width: 15px; height: 15px;
           border-radius: 50%; background: #fff;
           box-shadow: 0 1px 2px rgba(16,24,40,.35);
           transition: transform .15s ease; }
.ol-sw input:checked + .ol-track { background: var(--accent); }
.ol-sw input:checked + .ol-track .ol-knob { transform: translateX(15px); }
.ol-sw input:focus-visible + .ol-track {
    box-shadow: 0 0 0 3px rgba(45,90,160,.22); }

.ol-pick { display: flex; align-items: center; gap: 8px; min-width: 0;
           flex: 1 1 300px; }
.ol-pick select { flex: 1 1 auto; min-width: 0; max-width: 440px;
                  font-size: 15px; }
.ol-back .ol-hint { font-size: 14px; color: var(--ink-soft); }

/* A search field is drawn by the browser unless it is told otherwise, so
   beside an app-styled select it arrived as a grey pill from another app. */
.ol-find { -webkit-appearance: none; appearance: none;
           flex: 0 0 150px; width: 150px; padding: 8px 10px;
           font: inherit; font-size: 15px; line-height: 21px;
           border: 1px solid var(--line); border-radius: 7px;
           background: #fff; color: var(--ink); }
.ol-find::-webkit-search-decoration,
.ol-find::-webkit-search-cancel-button { -webkit-appearance: none; }
.ol-find:focus { outline: none; border-color: var(--accent);
                 box-shadow: 0 0 0 3px rgba(31,78,121,.13); }
/* The prayer screen: forms narrow, the list wide — the list is the work. */
/* THE PRAYER SCREEN IS A LEDGER, NOT A DOCUMENT. Eighty requests with a
   category, a name, a field, two ticks and five buttons on every row need
   the desk they are worked at, not the 1500px a page of prose wants. */
/* A shade wider on the left than it was: the type grew a tenth and the form
   beside the ledger had stopped fitting a name. */
.editor.pr-wide { grid-template-columns: minmax(0,1fr) minmax(0,2.1fr);
                  /* Against the column it sits in, not the window: with the
                     screens down the left, 97vw is wider than the room. */
                  max-width: min(2100px, 100%); }
@media (max-width: 1000px) { .editor.pr-wide { grid-template-columns: 1fr; } }

/* THE PRAYER BULLETIN'S OWN CARD, at the foot of the settings column: the
   button, what happens when the page fills, and what rides on the back. In a
   column half the width of the ledger the strip stacks — switch on one line,
   chooser under it, both the full width they are given. */
.pr-print .pr-fit { flex-wrap: wrap; gap: 9px 14px; margin: 15px 0 0; }
.pr-print .ol-back { margin-top: 12px; }
.pr-print .ol-pick { flex: 1 1 100%; }
.pr-print .ol-pick select { max-width: none; }
.pr-print-go { display: flex; justify-content: center; width: 100%;
               margin-top: 16px; padding: 10px 14px; font-size: 16.5px;
               font-weight: 600; }

.pr-chips { display: flex; flex-wrap: wrap; gap: 7px; margin: 16px 0 14px;
            padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.pr-chips .chip {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 5px 11px; border: 1px solid var(--line); border-radius: 999px;
    font-size: 14px; font-weight: 600; color: var(--ink);
    text-decoration: none; background: #fff;
}
.pr-chips .chip span { font-weight: 400; color: var(--ink-soft); font-size: 12.5px; }
.pr-chips .chip:hover { border-color: var(--accent); }
.pr-chips .chip.on { background: var(--accent); border-color: var(--accent); color: #fff; }
.pr-chips .chip.on span { color: rgba(255,255,255,.75); }
.pr-cat + .pr-cat { margin-top: 6px; }
/* The name grows; the little buttons stay the size of what they say. */
.pr-cat input[type=text] { flex: 1 1 auto; }
.pr-cat .btn { flex: 0 0 auto; }

/* ── THE PAGE BUILDER ─────────────────────────────────────────────────────
   Everything on this screen is quiet except the sheet. The sheet is the only
   thing worth looking at: it is the page, at the page's proportions, and what
   is arranged on it is what prints. */
.pgb { max-width: 1560px; margin: 0 auto; padding: 26px 30px 60px; }

.pgb-bar { display: flex; align-items: flex-end; justify-content: space-between;
           gap: 16px 20px; flex-wrap: wrap; margin-bottom: 24px; }
.pgb-bar > div:first-child { flex: 1 1 260px; min-width: 0; }
.pgb-bar h1 { margin: 0; font-size: 24px; letter-spacing: -.2px; color: #12161B; }
.pgb-bar p  { margin: 4px 0 0; font-size: 14.5px; color: #667085; }
.pgb-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }

/* Twelve marks, because the page is twelve units. A bar that slides is a
   proportion; twelve marks are a count, and the count is what is being spent. */
.gauge { display: flex; align-items: center; gap: 9px; padding: 7px 12px;
         background: #F4F6F8; border-radius: 999px; }
.gauge-cells { display: flex; gap: 2px; }
.gauge-cells i { width: 7px; height: 15px; border-radius: 2px; background: #DCE1E7; }
.gauge-cells i.on { background: var(--accent); }
.gauge span { font-size: 13px; color: #667085; white-space: nowrap; }
.gauge.full .gauge-cells i.on { background: #B45309; }
.gauge.full span { color: #B45309; }

/* The palette earns two columns and the sheet earns the rest of the width —
   one tall single-file list put half the blocks below the fold and left the
   sheet floating in a corridor. */
.pgb-body { display: grid; grid-template-columns: 430px minmax(0, 660px); gap: 44px;
            align-items: start; justify-content: start; }
.pgb-side h2 { margin: 0 0 12px; font-size: 13px; text-transform: uppercase;
               letter-spacing: .09em; color: #8A94A2; font-weight: 700; }
.pgb-side .hint { margin: 16px 2px 0; font-size: 13px; color: #8A94A2; line-height: 1.5; }

.palette { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.chip { display: flex; align-items: center; gap: 10px; padding: 9px 11px;
        background: #fff; border: 1px solid #E4E8ED; border-radius: 11px;
        cursor: grab; user-select: none; touch-action: none; min-width: 0;
        transition: border-color .13s, box-shadow .13s, transform .13s; }
.chip:hover { border-color: #B9D7EC; box-shadow: 0 2px 10px rgba(16,24,40,.07); transform: translateY(-1px); }
.chip.lifting { opacity: .35; }
.chip-i { flex: 0 0 30px; height: 30px; border-radius: 9px; background: #EBF0F9; color: var(--accent);
          display: flex; align-items: center; justify-content: center; }
.chip-i .fa-s { font-size: 15.5px; line-height: 1; }
.chip-w { min-width: 0; }
.chip-w b { display: block; font-size: 14px; color: #1A1D21; line-height: 1.25;
            white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chip-w i { display: block; font-style: normal; font-size: 11.5px; color: #8A94A2;
            margin-top: 1px; white-space: nowrap; }

/* The sheet. Its height comes from its width in script, so it keeps the
   paper's shape whatever the window does. */
.sheet-wrap { display: flex; justify-content: flex-start; }
/* The width cap lives in page.js, measured from where the sheet actually
   sits — a CSS guess at the chrome above was a guess, and guessed short. */
.sheet { position: relative; width: 100%; max-width: 620px; background: #fff;
         border-radius: 6px; box-shadow: 0 1px 2px rgba(16,24,40,.09), 0 12px 34px rgba(16,24,40,.10);
         padding: 5px; box-sizing: border-box; }

/* THE GRID, FAINTLY — so the units being spoken about are units that can be
   seen, and a block placed at the foot of an empty page looks deliberate
   rather than lost. */
.rules { position: absolute; inset: 5px; pointer-events: none; }
.rules i { position: absolute; left: 0; right: 0; height: 1px; background: #E3E8EE; }
.rules u { position: absolute; top: 0; bottom: 0; left: 50%; width: 1px; background: #EDF1F5; }

/* A block owns a place on the sheet. It does not queue behind anything, which
   is the whole point: one card at the top and one at the foot, nothing between. */
.blk { position: absolute; z-index: 2; display: flex; align-items: flex-start; gap: 9px;
       border: 1px solid #DDE3EA; border-radius: 9px; background: #FBFCFD;
       padding: 9px 11px; cursor: grab; user-select: none; touch-action: none;
       overflow: hidden; box-sizing: border-box;
       transition: border-color .13s, background .13s; }
.blk.full { left: 5px; right: 5px; }
.blk.l    { left: 5px; width: calc(50% - 8px); }
.blk.r    { right: 5px; width: calc(50% - 8px); }
.blk:hover { border-color: #B9D7EC; background: #F7FBFE; }
.blk.lifting { opacity: .3; }
.blk-i .fa-s { font-size: 13px; line-height: 1; }
.blk-i { flex: 0 0 26px; height: 26px; border-radius: 7px; background: #EBF0F9; color: var(--accent);
         display: flex; align-items: center; justify-content: center; }
.blk-i svg { width: 15px; height: 15px; }
.blk-n { font-size: 13px; font-weight: 600; color: #1A1D21; line-height: 1.3; flex: 1 1 auto;
         padding-top: 4px; }
.blk-h { font-size: 11px; color: #A6AEB8; padding-top: 5px; }
/* The foot pin is an action, not a caption — it speaks on hover, the way the
   remove button does, so a resting sheet is just blocks. A block already AT
   the foot keeps its pin visible, because that one is a state. */
.blk .blk-pin { visibility: hidden; }
.blk:hover .blk-pin, .blk .blk-pin.on { visibility: visible; }

/* Only on hover, and never smaller than a finger. The first version put a
   tiny permanent × on every block and blocks came off the page by accident. */
.blk-x { position: absolute; top: 4px; right: 4px; width: 26px; height: 26px;
         display: none; align-items: center; justify-content: center;
         border: 0; border-radius: 7px; background: rgba(255,255,255,.92);
         color: #98A2B3; cursor: pointer; padding: 0; }
.blk:hover .blk-x { display: flex; }
.blk-x:hover { background: #FEF2F2; color: #B42318; }
.blk-x svg { width: 13px; height: 13px; }

.grip { position: absolute; left: 10px; right: 10px; bottom: 0; height: 10px;
        cursor: ns-resize; touch-action: none; z-index: 2; }
.grip::after { content: ''; position: absolute; left: 50%; top: 4px; width: 30px; height: 3px;
               margin-left: -15px; border-radius: 2px; background: transparent; transition: background .13s; }
.blk:hover .grip::after { background: #CBD9E5; }
.grip:hover::after { background: var(--accent); }

.rest { display: flex; align-items: center; justify-content: center;
        margin: 3px; border: 1px dashed #E4E8ED; border-radius: 9px; box-sizing: border-box; }
.rest span { font-size: 12px; color: #B6BDC6; }

/* THE HIGHLIGHT — the whole point of the screen. Drawn over the sheet at the
   exact size the block would take, so the size is known before the drop. */
.mark { position: absolute; z-index: 6; pointer-events: none; box-sizing: border-box;
        border: 2px solid var(--accent); background: rgba(45,90,160,.10); border-radius: 10px;
        display: flex; align-items: center; justify-content: center; }
.mark.full { left: 5px; right: 5px; }
.mark.l    { left: 5px; width: calc(50% - 8px); }
.mark.r    { right: 5px; width: calc(50% - 8px); }
.mark span { font-size: 12px; font-weight: 700; color: var(--accent);
             background: #fff; padding: 2px 9px; border-radius: 999px;
             box-shadow: 0 1px 4px rgba(16,24,40,.13); }
.mark.no { border-color: #D97706; background: rgba(217,119,6,.09); }
.mark.no span { color: #B45309; }

/* The block under the cursor. The browser's own drag image is what the first
   version relied on, and on a tablet there was no drag at all to image.

   NOT `.ghost` — that is already the app's name for a quiet button, and the
   drag rules below sent every one of them to the top-left corner of the
   window, where "Undo changes" sat on top of the brand. */
.drag-ghost { position: fixed; top: 0; left: 0; z-index: 60; pointer-events: none;
         display: flex; align-items: center; gap: 8px;
         padding: 8px 13px; background: #fff; border: 1px solid #B9D7EC; border-radius: 10px;
         box-shadow: 0 8px 22px rgba(16,24,40,.17); font-size: 13px; font-weight: 600; color: #1A1D21; }
.drag-ghost .blk-i { width: 22px; height: 22px; flex: 0 0 22px; }
.drag-ghost .blk-i svg { width: 13px; height: 13px; }

body.dragging, body.resizing { cursor: grabbing; user-select: none; }

.btn.dirty { background: var(--accent); border-color: var(--accent); color: #fff; }

/* THE ATTRIBUTE HAS TO BE SAID TWICE. `display: flex` beats the `hidden`
   attribute's own display:none, so the toast sat on the page from the moment
   it loaded, offering to undo something nobody had done. */
.toast[hidden] { display: none; }
.toast { position: fixed; left: 50%; bottom: 26px; transform: translateX(-50%); z-index: 70;
         display: flex; align-items: center; gap: 14px;
         background: #12161B; color: #fff; font-size: 14.5px;
         padding: 11px 15px 11px 18px; border-radius: 11px;
         box-shadow: 0 10px 30px rgba(16,24,40,.28); }
.toast button { border: 0; background: none; color: #7FC0EE; font-size: 14.5px;
                font-weight: 700; cursor: pointer; padding: 2px 4px; }
.toast button:hover { color: #fff; }

@media (max-width: 900px) {
    .pgb-body { grid-template-columns: 1fr; }
    .chip { flex: 1 1 200px; }
}

/* A block placed on the page, given its words here. */
.placed { border: 1px solid #E7EAEE; border-radius: 10px; padding: 12px 13px; margin-bottom: 10px; background: #FCFDFE; }
.placed label { display: block; font-size: 12px; text-transform: uppercase; letter-spacing: .07em;
                color: #8A94A2; font-weight: 700; margin: 0 0 4px; }
.placed label + * { margin-bottom: 10px; }
.placed > *:last-child { margin-bottom: 0; }

/* The inside pages, as tabs over the sheet. Each carries how full it is, so a
   page that needs attention does not have to be opened to discover that. */
.pager { display: flex; gap: 6px; justify-content: flex-start; margin-bottom: 14px; }
.pg-tab { display: flex; align-items: center; gap: 7px; border: 1px solid #E4E8ED;
          background: #fff; border-radius: 999px; padding: 7px 14px;
          font-size: 13px; font-weight: 600; color: #667085; cursor: pointer; }
.pg-tab:hover { border-color: #B9D7EC; color: #1A1D21; }
.pg-tab.on { background: #12161B; border-color: #12161B; color: #fff; }
.pg-dot { font-size: 11px; font-weight: 700; color: #98A2B3;
          background: #F1F4F7; border-radius: 999px; padding: 1px 6px; }
.pg-tab.on .pg-dot { background: rgba(255,255,255,.16); color: #E7EDF3; }
.pg-dot.full { background: #FEF3E2; color: #B45309; }
.pg-tab.on .pg-dot.full { background: rgba(255,255,255,.2); color: #FFD9A8; }

/* The unit kept back at the foot of the page, shown rather than merely
   enforced. A block that overruns its box grows into this instead of off the
   paper — and a rule nobody can see is a rule nobody can plan around. */
.reserve { position: absolute; left: 5px; right: 5px; z-index: 1;
           border-top: 1px dashed #E0E5EA; display: flex;
           align-items: center; justify-content: center;
           background: repeating-linear-gradient(45deg, #FBFCFD 0 6px, #F5F7F9 6px 12px); }
.reserve span { font-size: 11px; color: #B6BDC6; letter-spacing: .04em; }

/* A block with more in it than it has room for. It will still print — it grows
   and pushes what is under it onto the next page — so this is a warning, not a
   refusal. Amber rather than red for the same reason. */
/* A block drawn at the room it really uses, which is more than it was given.
   It overlaps what is under it on purpose: that is what it does on paper. */
/* The part it needs beyond what it was given is hatched, so the overspill is
   read as overspill rather than as a very tall block. */
.blk.short { border-color: #E09A2E;
             background: repeating-linear-gradient(45deg, #FFF9EF 0 7px, #FDF2DF 7px 14px); }
.blk.short .blk-i { background: #FDF0DA; color: #B45309; }
.blk-n em { display: block; font-style: normal; font-size: 11px; font-weight: 700;
            color: #B45309; margin-top: 2px; }
.blk-fix { position: absolute; left: 10px; bottom: 8px; border: 1px solid #EBC98F;
           background: #fff; color: #92400E; font-size: 11px; font-weight: 700;
           border-radius: 6px; padding: 3px 8px; cursor: pointer; }
.blk-fix:hover { background: #FEF6E7; border-color: #D9A441; }

/* A block the page could not print: something above it grew and pushed it past
   the foot. Still shown where it was put, because it is still part of the
   arrangement — struck through, so what is missing from the print is obvious
   here rather than at the printer. */
.blk.dropped { border-style: dashed; border-color: #E4A2A2; background: #FEF7F7; opacity: .85; }
.blk.dropped .blk-i { background: #FBE9E9; color: #B42318; }
.blk.dropped .blk-n { color: #7A2E2E; }
.blk.dropped .blk-n em { color: #B42318; }
.blk.dropped::after { content: ''; position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(to bottom right, transparent calc(50% - 1px),
                #E4A2A2 calc(50% - 1px), #E4A2A2 calc(50% + 1px), transparent calc(50% + 1px)); }

/* ── THE SHEET, AS A FLOW ─────────────────────────────────────────────────
   Rows in order, each as tall as its contents. Nothing is resized here, so
   there are no handles: a block is the size it is, and the only decisions are
   order, pairing, and whether something is pinned to the foot. */
/* SCOPED TO THE SHEET, AND THAT IS NOT FUSSINESS.
   This was `.row`, which is also what every field row in the editor is called
   — so every form on the Bulletin and Design screens had its rows made
   absolutely positioned and collapsed into each other. The second time a
   class name has been borrowed from the app and broken it; the first was
   `.ghost`, which threw a button into the corner of the window. */
.sheet .srow { position: absolute; left: 5px; right: 5px; display: flex; gap: 7px; }
.sheet .srow.pinned .blk { border-style: dashed; }
.sheet .srow .blk { position: static; flex: 1 1 0; min-width: 0; }

/* Where the page runs out. Drawn where it really is, because "the page is
   full" should be a line you can see rather than a number you are told. */
.edge { position: absolute; left: 5px; right: 5px; height: 0; z-index: 1;
        border-top: 1px dashed #E0A9A9; }

.blk-pin { position: absolute; left: 9px; bottom: 6px; border: 1px solid #DFE5EB;
           background: #fff; color: #6B7280; font-size: 11px; font-weight: 600;
           border-radius: 6px; padding: 2px 7px; cursor: pointer; }
.blk-pin:hover { border-color: #B9D7EC; color: var(--accent); }
.blk-pin.on { background: #12161B; border-color: #12161B; color: #fff; }

/* An insertion point between two rows: a line, because that is what it is. */
.mark.line { left: 5px; right: 5px; height: 0; border: 0; border-top: 3px solid var(--accent);
             background: none; border-radius: 0; }
.mark.line span { position: relative; top: -9px; }
.mark.pair { position: absolute; }


/* ── THE ARCHIVE ─────────────────────────────────────────────────────────
   Rows, not cards: a decade of Sundays has to scan like a ledger. The three
   buttons on every row are the same size on purpose — ragged widths read as
   clutter before anybody reads the words. */
.arch-row { display: flex; align-items: center; justify-content: space-between;
            gap: 14px; padding: 13px 0; border-top: 1px solid var(--line); }
.arch-row.slim { padding: 8px 0; }
.arch-when { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.arch-when strong { font-size: 16.5px; }
.arch-when a { font-weight: 700; text-decoration: none; color: var(--ink); }
.arch-when a:hover { color: var(--accent); }
.arch-about { color: var(--ink-soft); font-size: 14.5px;
              overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.arch-marks { color: var(--ink-soft); font-weight: 400; font-size: 14.5px; }
.arch-do { display: flex; gap: 8px; align-items: center; flex: 0 0 auto; }
.arch-do .btn, .arch-menu summary.btn {
    width: 72px; text-align: center; justify-content: center; margin: 0; }

/* The find box: one big friendly date, styled like the thing it is. */
.arch-find { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.arch-find input[type=date] {
    padding: 11px 14px; font-size: 16.5px; border: 1px solid var(--line);
    border-radius: 10px; background: #fff; color: var(--ink);
    font-family: inherit; max-width: 230px; }
.arch-find input[type=date]:focus {
    outline: none; border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(45,90,160,.14); }
.arch-find .btn { margin: 0; padding-top: 10px; padding-bottom: 10px; }
.arch-find .small { color: var(--ink-soft); }

/* The Reuse menu: a plain details element wearing a popover. */
.arch-menu { position: relative; }
.arch-menu summary { list-style: none; cursor: pointer; display: inline-flex; }
.arch-menu summary::-webkit-details-marker { display: none; }
.arch-menu[open] summary { border-color: var(--accent); color: var(--accent); }
.arch-menu .menu {
    position: absolute; right: 0; top: calc(100% + 6px); z-index: 30;
    background: #fff; border: 1px solid var(--line); border-radius: 12px;
    box-shadow: 0 12px 30px rgba(16,24,40,.16); padding: 8px; width: 220px; }
.arch-menu .menu .t { font-size: 13px; font-weight: 700; color: var(--ink-soft);
    text-transform: uppercase; letter-spacing: .4px; padding: 4px 8px 8px; }
.arch-menu .menu form { display: flex; flex-direction: column; gap: 2px; }
.arch-menu .menu button {
    all: unset; box-sizing: border-box; width: 100%; padding: 8px 10px;
    border-radius: 8px; font-size: 15px; cursor: pointer; color: var(--ink); }
.arch-menu .menu button:hover { background: #E9EFF8; color: var(--accent-d); }
.arch-year { font-weight: 800; margin: 14px 0 2px; color: var(--ink-soft);
             letter-spacing: .4px; }


/* ── THE MONTH AT A GLANCE ───────────────────────────────────────────────
   The calendar view: seven columns, a cell per day, a + that appears where
   the pointer is. The page sheds its reading width for this — a month wants
   the whole window. */
.ev-page.wide { max-width: 1500px; }
.ev-views { display: inline-flex; border: 1px solid var(--line); border-radius: 999px;
            padding: 3px; gap: 2px; background: #fff; margin-right: 10px; }
.ev-views a { padding: 0 16px; border-radius: 999px; text-decoration: none;
              display: inline-flex; align-items: center;
              font-size: 15px; font-weight: 600; color: #55606C; line-height: 1; }
.ev-views a.on { background: #E9EFF8; color: var(--accent); }
/* Stretched, not centred: the toggle takes the Add button's height, so the
   two read as one row of controls rather than a button and a smaller thing. */
.ev-bar-r { display: flex; align-items: stretch; }

.cal { background: #fff; border: 1px solid var(--line); border-radius: 14px;
       overflow: hidden; box-shadow: 0 1px 0 rgba(16,24,40,.02), 0 1px 8px rgba(16,24,40,.04); }
.cal-top { display: flex; align-items: center; justify-content: space-between;
           padding: 14px 18px; }
.cal-top h2 { margin: 0; font-size: 22px; }
.cal-nav { display: flex; gap: 6px; }
.cal-nav .btn { margin: 0; }
.cal-dow { display: grid; grid-template-columns: repeat(7, 1fr);
           border-top: 1px solid var(--line); background: var(--bg); }
.cal-dow span { padding: 8px 12px; font-size: 12.5px; font-weight: 700;
                letter-spacing: .5px; text-transform: uppercase; color: var(--ink-soft); }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr);
            gap: 1px; background: var(--line); border-top: 1px solid var(--line); }
.cal-cell { background: #fff; min-height: 118px; padding: 8px 8px 10px; position: relative; }
.cal-cell.mute { background: #FAFBFC; }
.cal-cell .d { display: inline-flex; align-items: center; justify-content: center;
               width: 24px; height: 24px; font-size: 14.5px; font-weight: 700;
               color: var(--ink-soft); border-radius: 999px; }
.cal-cell.today .d { background: var(--accent); color: #fff; }
.cal-add { position: absolute; top: 7px; right: 7px; width: 24px; height: 24px;
           border: none; border-radius: 999px; background: #E9EFF8; color: var(--accent);
           font-size: 17.5px; font-weight: 700; line-height: 1; cursor: pointer;
           opacity: 0; transition: opacity .1s, background .1s; }
.cal-cell:hover .cal-add { opacity: 1; }
.cal-add:hover { background: var(--accent); color: #fff; }
.cal-ev { display: block; margin-top: 6px; padding: 4px 9px; border-radius: 7px;
          background: #E9EFF8; color: var(--accent-d); font-size: 14px;
          font-weight: 600; text-decoration: none; overflow: hidden;
          text-overflow: ellipsis; white-space: nowrap; }
.cal-ev:hover { background: var(--accent); color: #fff; }
.cal-ev .t { font-weight: 500; opacity: .75; margin-right: 4px; }

/* The one-date-or-series question, hung under the foot of its card. */
.tl-foot { position: relative; }
.ask-pop { position: absolute; left: 0; top: calc(100% + 2px); z-index: 30;
           display: flex; gap: 6px; background: #fff; border: 1px solid var(--line);
           border-radius: 10px; padding: 6px;
           box-shadow: 0 10px 26px rgba(16,24,40,.16); white-space: nowrap; }
.ask-pop button { border: 1px solid var(--line); background: #fff; border-radius: 8px;
                  padding: 6px 11px; font-size: 14px; font-weight: 600;
                  color: var(--ink); cursor: pointer; }
.ask-pop button.all { border-color: var(--accent); color: var(--accent); }
.ask-pop button:hover { background: #E9EFF8; }

/* The Remove menu's grave option reads as what it is. */
.ev-rm summary.btn.danger { width: auto; }
.arch-menu .menu button.grave { color: var(--bad, #B42318); }
.arch-menu .menu button.grave:hover { background: #FEE4E2; color: #B42318; }

/* The printed month, living under the month being edited. */
.cal-prev { margin-top: 18px; background: #fff; border: 1px solid var(--line);
            border-radius: 14px; overflow: hidden;
            box-shadow: 0 1px 0 rgba(16,24,40,.02), 0 1px 8px rgba(16,24,40,.04); }
.cal-prev-bar { display: flex; align-items: center; gap: 8px; padding: 10px 14px;
                border-bottom: 1px solid var(--line); }
.cal-prev-bar .small { color: var(--ink-soft); }
.cal-prev-bar .spacer { flex: 1; }
.cal-prev iframe { display: block; width: 100%; aspect-ratio: 11 / 8.6; border: 0; }

/* ── THE DAY EDITOR under the Wall Calendar ──────────────────────────────── */
.calmonth { display: block; width: 100%; aspect-ratio: 11 / 8.6; border: 1px solid var(--line);
            border-radius: 10px; margin-bottom: 14px; }
.calday { display: flex; gap: 14px; padding: 10px 0; border-top: 1px solid var(--line); }
.calday-n { flex: 0 0 52px; text-align: center; padding-top: 2px; }
.calday-n strong { display: block; font-size: 18.5px; line-height: 1; }
.calday-n span { font-size: 12.5px; color: var(--ink-soft); text-transform: uppercase;
                 letter-spacing: .4px; }
.calday-b { flex: 1; display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.calday-ev { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 0; }
.calday-t { font-size: 15px; font-weight: 600; min-width: 200px; }
.calday-ev .iconpick { margin: 0; }
.calday-ev input[type=color] { width: 30px; height: 30px; flex: 0 0 30px; padding: 0; border-width: 2px; }
.calday-ev input[type=number], .calday-ev input[type=date] { padding: 5px 7px; font-size: 14.5px; }

/* ── THE WALL CALENDAR BUILDER ───────────────────────────────────────────
   The month on the right is the printed page redrawn; the left column is
   whatever is selected. Full width — a month wants the whole window. */
.wcb { display: grid; grid-template-columns: 520px minmax(0, 1fr); gap: 24px;
       max-width: 1720px; margin: 0 auto; align-items: start; }
.wcb-sheet .wcb-cal td { height: 118px; }
.wcb-bar { display: flex; align-items: center; gap: 12px;
           max-width: 1720px; margin: 0 auto 16px; }
.wcb-bar .chips { flex: 1; justify-content: center; }
.wcb-bar .btn { margin: 0; }
.wcb-left { position: sticky; top: 16px; }
/* The page floats too — scroll the panel and the month stays with you. */
.wcb-right { position: sticky; top: 16px; }
.wcb-yr { font-weight: 800; color: var(--ink-soft); }
.wcb-sheet { background: #fff; border: 1px solid var(--line); border-radius: 14px;
             padding: 34px 38px 24px;
             box-shadow: 0 1px 0 rgba(16,24,40,.02), 0 1px 8px rgba(16,24,40,.04); }
.wcb-mt { font-family: 'AksharBold', system-ui, sans-serif; font-size: 54px;
          text-align: center; line-height: 1; margin-bottom: 30px; }
table.wcb-cal { width: 100%; border-collapse: collapse; table-layout: fixed; }
.wcb-cal th { font-size: 11.5px; font-weight: 700; letter-spacing: 2px; color: #55595E;
              padding: 0 0 8px; text-align: center; }
.wcb-cal td { border: 1px solid #98A0A8; vertical-align: top; height: 96px;
              padding: 4px 5px; position: relative; }
/* PINNED TO THE FLOOR, NOT MEASURED TO IT. A fixed min-height cannot know
   how tall the row really is — the folded week stretches its whole row and
   left every fixed-height body floating. Absolute bottom always means the
   bottom. Split cells keep two stacked halves instead, each ending at its
   own floor. */
.wcb-cal td:not(.sp) .wcb-body { position: absolute; left: 5px; right: 5px;
                                 bottom: 6px; min-height: 0; }
.wcb-cal td.sp .wcb-body { min-height: 46px; }
.wcb-cal td.mute { background: #FAFBFC; }
.wcb-cal td.mute .wcb-d { color: #C2C8CE; }
.wcb-d { display: block; text-align: right; font-size: 14.5px; font-weight: 600; }
.wcb-body { display: flex; flex-direction: column; align-items: center;
            justify-content: flex-end; gap: 2px; }
.wcb-split { display: block; border-top: 1px solid #98A0A8; margin: 4px -5px 0;
             padding: 2px 5px 0; }
.wcb-ev { display: block; text-align: center; text-decoration: none; color: #000;
          border-radius: 6px; padding: 2px 4px; }
.wcb-ev:hover { background: #E9EFF8; }
.wcb-ev.on { background: #E9EFF8; outline: 2px solid var(--accent); }
.wcb-ev .i { display: block; line-height: 1.1; }
.wcb-ev .i img { height: 18px; }
.wcb-ev .t { display: block; font-size: 14px; font-weight: 700; line-height: 1.25; }
.wcb-ev .n { font-weight: 400; color: #444; }
.wcb-hol { display: block; text-align: center; font-size: 14px; font-weight: 700; }
.wcb-sea { display: block; text-align: center; font-size: 14px; color: #000; }
.wcb-vs { text-align: center; font-size: 27.5px; margin-top: 26px; line-height: 1.32;
          color: #000; }
.wcb-vsr { text-align: center; font-size: 14.5px; font-weight: 700;
           letter-spacing: 3px; color: #55595E; margin-top: 7px; margin-bottom: 8px; }
@media (max-width: 1100px) { .wcb { grid-template-columns: 1fr; } }


/* The event panel's own order: a titled section for the mark, one aligned
   row for its three controls, the buttons on their own line. */
.wcb-sect { border-top: 1px solid var(--line); padding-top: 12px; margin-top: 4px; }
.wcb-markrow { display: flex; align-items: center; gap: 10px; }
.wcb-markrow .field { flex: 1; margin: 0; }
.wcb-markrow .field label { display: none; }
.wcb-markrow .iconpick { margin: 0; }
.wcb-markrow input[type=color] { flex: 0 0 40px; width: 40px; height: 40px; padding: 0; }
.wcb-markrow input[type=number] { flex: 0 0 76px; width: 76px; }
.wcb-foot { display: flex; gap: 8px; margin-top: 14px; }
.wcb-foot .btn { margin: 0; }


/* The true page on screen: eleven inches wide, the staple strip and margins
   real, scaled down to whatever the pane offers. */
.wcb-fit { overflow: hidden; display: flex; justify-content: center; }
.wcb-page { width: 11in; flex: 0 0 auto; background: #fff; border: 1px solid var(--line);
            border-radius: 14px; padding: 0.60in 0.35in 0.22in;
            transform-origin: top center;
            box-shadow: 0 1px 0 rgba(16,24,40,.02), 0 1px 8px rgba(16,24,40,.04); }


/* ── THE INSPECTOR ROWS the builder's panels are made of ─────────────────
   Label on the left, control on the right, one decision per line — the way
   a modern editor's sidebar reads. */
.ins { display: flex; flex-direction: column; }
.ins-row { display: flex; align-items: center; gap: 12px; padding: 8px 0;
           border-bottom: 1px solid #F1F3F5; }
.ins-row:last-child { border-bottom: 0; }
.ins-l { flex: 0 0 96px; font-size: 12.5px; font-weight: 700; color: var(--ink-soft);
         text-transform: uppercase; letter-spacing: .5px; }
.ins-c { flex: 1; display: flex; align-items: center; gap: 10px; min-width: 0; }
.ins-c input[type=range] { flex: 1; accent-color: var(--accent); }
.ins-c output { flex: 0 0 52px; font-size: 14px; font-weight: 600; text-align: right;
                color: var(--ink); }
/* A swatch, not a form control: the native colour well is a bordered oval
   that reads as a blob. Stripped to a small circle with a hairline ring. */
.ins-c input[type=color] { appearance: none; -webkit-appearance: none;
    width: 26px; height: 26px; flex: 0 0 26px; padding: 0; border: 0;
    border-radius: 999px; background: none; cursor: pointer; }
.ins-c input[type=color]::-webkit-color-swatch-wrapper { padding: 0; }
/* The ring rides the swatch itself, not the input beneath it — a white
   swatch over an under-painted ring is an invisible control. */
.ins-c input[type=color]::-webkit-color-swatch { border: 1px solid rgba(16,24,40,.32); border-radius: 999px; }
.ins-c input[type=color]::-moz-color-swatch     { border: 1px solid rgba(16,24,40,.32); border-radius: 999px; }
.ins-link { border: 0; background: none; color: var(--accent); font-size: 14px;
            font-weight: 600; cursor: pointer; padding: 0; margin-left: auto; }
.ins-link:hover { text-decoration: underline; }
.ins-c select { flex: 1; }
.ins-c .iconpick { margin: 0; flex: 1; }
.ins-hint { font-size: 13px; color: var(--ink-soft); }

.ins-t { width: 18px; height: 18px; accent-color: var(--accent); flex: 0 0 auto; }

/* ── THE SIDEBAR, ONE PIECE ──────────────────────────────────────────────
   Not three cards drifting apart: one panel, sections parted by hairlines,
   small quiet headers, and no save buttons — the editor is instant and a
   whisper says so. */
.side { background: #fff; border: 1px solid var(--line); border-radius: 14px;
        overflow: hidden;
        box-shadow: 0 1px 0 rgba(16,24,40,.02), 0 1px 8px rgba(16,24,40,.04); }
.side-sec { padding: 16px 18px 18px; border-bottom: 1px solid var(--line); }
.side-sec:last-child { border-bottom: 0; }
.side-h { display: flex; align-items: center; gap: 8px;
          font-size: 12.5px; font-weight: 800; letter-spacing: .8px;
          text-transform: uppercase; color: var(--ink-soft); margin: 0 0 12px; }
.side-h2 { font-size: 12.5px; font-weight: 800; letter-spacing: .8px;
           text-transform: uppercase; color: var(--ink-soft); margin: 16px 0 4px; }
.side-x { margin-left: auto; text-decoration: none; color: var(--ink-soft);
          font-size: 20px; line-height: 1; padding: 2px 6px; border-radius: 6px; }
.side-x:hover { background: var(--bg); color: var(--ink); }
.side-state { font-weight: 600; letter-spacing: 0; text-transform: none;
              color: var(--ok, #12805C); margin-left: 4px; }
.side-title { width: 100%; font-size: 16.5px; font-weight: 600; padding: 10px 12px;
              border: 1px solid var(--line); border-radius: 10px; margin-bottom: 8px; }
.side-verse { width: 100%; padding: 10px 12px; border: 1px solid var(--line);
              border-radius: 10px; margin-bottom: 8px; resize: vertical; }
.side-hint { font-size: 13px; color: var(--ink-soft); }
.side-foot { display: flex; gap: 8px; margin-top: 14px; }
.side-foot .btn { margin: 0; }

/* The B I U strip — a modern editor's smallest toolbar. */
.fmt { display: inline-flex; gap: 2px; border: 1px solid var(--line); border-radius: 9px;
       padding: 2px; background: #fff; margin-bottom: 6px; }
.fmt button { border: 0; background: transparent; border-radius: 7px; cursor: pointer;
              width: 30px; height: 26px; font-size: 14.5px; color: var(--ink);
              display: inline-flex; align-items: center; justify-content: center; }
.fmt button:hover { background: #E9EFF8; color: var(--accent); }

/* The little x that takes a choice away — the icon picker's own manners. */
.ins-x { border: 0; background: #F2F4F7; color: var(--ink-soft); width: 22px; height: 22px;
         border-radius: 999px; font-size: 15.5px; line-height: 1; cursor: pointer;
         display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.ins-x:hover { background: #FEE4E2; color: #B42318; }

/* THE CHOOSER GETS ROOM IN THE BUILDER. Inside a 96px-labelled inspector row
   the picker's panel inherited a field's width — six cramped glyphs to a
   line. It is a chooser, not a field: in the builder it opens at its own
   width with glyphs big enough to recognise. */
.wcb-left .side { overflow: visible; }   /* the chooser must escape the card */
.wcb-left .iconpick .hits { left: 0; right: auto; width: 430px;
                            max-width: calc(100vw - 60px); padding: 8px; }
.wcb-left .iconpick .grid { grid-template-columns: repeat(9, 1fr); gap: 3px;
                            max-height: 320px; }
.wcb-left .iconpick .grid button { font-size: 22px; padding: 9px 0; }
.wcb-left .iconpick .hits input { font-size: 15.5px; padding: 8px 10px; }

/* Cards, plural again — one per concern, air between them. */
.wcb-left .side { margin-bottom: 16px; }

/* ── THE BUILDER'S TABS: one card, four panes ─────────────────────────────
   The strip sits flush with the card's top edge — its negative margins undo
   the section padding — and the saved-whisper rides its right end so it is
   seen whichever pane is open. */
.wcb-tabs { display: flex; align-items: center; gap: 2px;
            margin: -16px -18px 16px; padding: 2px 10px 0;
            border-bottom: 1px solid var(--line); }
.wcb-tab { border: 0; background: none; font: inherit; font-size: 14.5px;
           font-weight: 600; color: var(--ink-soft); cursor: pointer;
           padding: 11px 10px 10px; border-bottom: 2px solid transparent;
           margin-bottom: -1px; border-radius: 0; }
.wcb-tab:hover { color: var(--ink); }
.wcb-tab.on { color: var(--accent); border-bottom-color: var(--accent); }
.wcb-tabs .side-state { margin-left: auto; padding-right: 6px; }
.wcb-pane[hidden] { display: none; }

/* ── THE MISSIONARY LIST on the Cover Design screen ─────────────────────── */
.pinrow { display: flex; align-items: center; gap: 10px;
          border: 1px solid var(--line); border-radius: 10px;
          padding: 8px 12px; margin-bottom: 6px; font-size: 15px;
          background: var(--card); cursor: pointer; }
.pinrow .pn { font-weight: 600; white-space: nowrap; }
.pinrow .pf { color: var(--ink-soft); flex: 1; min-width: 0;
              overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pinrow .pin-name { flex: 1; border: 0; font: inherit; font-weight: 600;
                    outline: none; background: none; }
.pinrow.off { opacity: .5; }
.pinrow.off .pn, .pinrow.off .pf { text-decoration: line-through; }
.pin-toggle { border: 0; background: none; color: var(--ink-soft);
              font-size: 15.5px; font-weight: 700; cursor: pointer;
              padding: 2px 6px; border-radius: 6px; flex: 0 0 auto; }
.pin-toggle:hover { background: var(--wash, #f2f5f8); color: var(--ink); }
.wcb-pane > .side-h:first-child { margin-top: 0; }
.wcb-left .side:last-child { margin-bottom: 0; }


/* The date button says its whole date on one line. */
.ins-c .dp-cur, .ins-c .dp { white-space: nowrap; }
.ins-c button.dp-cur { flex: 0 0 auto; }

/* ── THE DASHBOARD ───────────────────────────────────────────────────────
   Four counts along the top and four cards under them, each card a list of
   rows that lead somewhere. Nothing here is a control: the whole screen is
   a set of doors, so everything on it is either a number or a link, and the
   type does the sorting rather than boxes inside boxes. */
.dash-nums { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
             gap: 14px; margin: 22px 0 18px; }
@media (max-width: 900px) { .dash-nums { grid-template-columns: repeat(2, minmax(0,1fr)); } }

.dnum { display: block; padding: 15px 17px 14px; text-decoration: none;
        background: var(--card); border: 1px solid var(--line); border-radius: 12px;
        box-shadow: 0 1px 2px rgba(16,24,40,.04); transition: border-color .12s, box-shadow .12s; }
.dnum:hover { border-color: #bfd0e6; box-shadow: 0 3px 10px rgba(16,24,40,.08); }
.dnum .k { display: block; font-size: 12px; font-weight: 700; letter-spacing: .09em;
           text-transform: uppercase; color: var(--ink-soft); }
.dnum .v { display: block; margin: 5px 0 2px; font-size: 33px; font-weight: 700;
           line-height: 1.05; letter-spacing: -.6px; color: var(--accent); }
.dnum .s { display: block; font-size: 14px; color: var(--ink-soft); }

/* THE FOUR CARDS LINE UP, ROW BY ROW. Left to find their own heights they
   ended wherever their content did — a card of one outline beside a card of
   twelve birthdays, and a column of white between them that read as something
   missing rather than as space. Each row of the grid is now as tall as the
   taller of its two, every card is a column with its actions pinned to the
   foot, and the lists are cut to six so the two in a row start out close. */
.dash { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px;
        align-items: stretch; }
@media (max-width: 1000px) { .dash { grid-template-columns: 1fr; } }
.dcard { margin: 0; padding: 0; overflow: hidden;
         display: flex; flex-direction: column; }
.dcard .drows, .dcard .dsp { flex: 1 1 auto; }

/* The foot: what you would do next from this card, and the thing that keeps
   a short card from ending in mid-air. */
.dfoot { margin-top: auto; display: flex; flex-wrap: wrap; gap: 8px;
         padding: 11px 18px; border-top: 1px solid #eef1f4; background: #fafbfc; }
.dfoot .btn { margin: 0; }

.dhead { display: flex; align-items: center; justify-content: space-between;
         gap: 12px; padding: 14px 18px 12px; border-bottom: 1px solid var(--line); }
.dhead h2 { display: flex; align-items: center; gap: 9px; margin: 0;
            font-size: 16.5px; letter-spacing: -.1px; }
.dhead .di { color: var(--accent); font-size: 16.5px; line-height: 1; }
.dhead a { font-size: 14px; text-decoration: none; white-space: nowrap; }
.dhead a:hover { text-decoration: underline; }

.drows { list-style: none; margin: 0; padding: 0; }
.drows li { display: flex; align-items: center; gap: 12px;
            padding: 11px 18px; border-bottom: 1px solid #eef1f4; }
.drows li:last-child { border-bottom: 0; }
.drows li:hover { background: #fafbfc; }

/* The date as a block of two lines, which reads as a date at a glance where
   "Sep 6" in a row of sentences does not. */
.dwhen { flex: 0 0 auto; width: 44px; text-align: center; text-decoration: none;
         padding: 5px 0 6px; border-radius: 9px; background: #f1f4f8; color: var(--ink); }
.dwhen .m { display: block; font-size: 10.5px; font-weight: 700; letter-spacing: .08em;
            text-transform: uppercase; color: var(--ink-soft); }
.dwhen .d { display: block; font-size: 18.5px; font-weight: 700; line-height: 1.1; }
.dwhen.near { background: var(--accent); }
.dwhen.near .m { color: rgba(255,255,255,.78); }
.dwhen.near .d { color: #fff; }

.dwhat { flex: 1 1 auto; min-width: 0; }
.dwhat > a { display: block; font-size: 15.5px; font-weight: 600; color: var(--ink);
             text-decoration: none; }
.dwhat > a:hover { color: var(--accent); }
.dsub { display: block; margin-top: 2px; font-size: 14px; color: var(--ink-soft); }
/* Two lines of a request, then the ellipsis — a prayer list is written in
   sentences and one line of them tells you nothing. */
.dsub.clip { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
             overflow: hidden; }

.dtag { flex: 0 0 auto; font-size: 11px; font-weight: 700; letter-spacing: .07em;
        text-transform: uppercase; color: var(--ink-soft); background: #eef1f4;
        border-radius: 999px; padding: 3px 9px; white-space: nowrap; }
.dtag.on { margin-left: 8px; color: var(--accent); background: #e7eff9; }
.drows .btn { flex: 0 0 auto; }

.dempty { margin: 0; padding: 22px 18px; font-size: 15px; color: var(--ink-soft); }
.dmore  { margin: 0; padding: 10px 18px 14px; font-size: 13px; color: var(--ink-soft); }

/* The month's days: a column of numbers with the names beside them, two up
   where there is room — a birthday list is short lines and one per row wastes
   half the card. */
.dsp { list-style: none; margin: 0; padding: 8px 8px 12px; columns: 2; column-gap: 18px; }
@media (max-width: 620px) { .dsp { columns: 1; } }
.dsp li { display: flex; align-items: baseline; gap: 9px; padding: 5px 10px;
          break-inside: avoid; font-size: 15px; }
.dsp .n { flex: 0 0 22px; text-align: right; font-weight: 700; color: var(--accent);
          font-variant-numeric: tabular-nums; }
.dsp .w { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis;
          white-space: nowrap; }
.dsp .ki { flex: 0 0 auto; font-size: 12px; color: #9aa4b2; }

/* ── THE YEAR'S VERSES ───────────────────────────────────────────────────
   Twelve rows folded into the verse card: the month, the reference, and the
   words beside it. A row a month rather than a card a month — this is a list
   somebody fills in once, in one sitting, and reads down afterwards. */
.vy { margin-top: 14px; border-top: 1px solid var(--line); padding-top: 12px; }
.vy > summary { cursor: pointer; font-size: 14.5px; font-weight: 700; color: var(--ink);
                list-style: none; display: flex; align-items: center; gap: 7px; }
.vy > summary::-webkit-details-marker { display: none; }
/* THE ARROW IS DRAWN, NOT SET. As a character it is at the mercy of whatever
   font the machine has — one screenshot came back with a bullet where the
   triangle should be. Three borders are a triangle everywhere. */
.vy > summary::before { content: ""; flex: 0 0 auto; width: 0; height: 0;
                        border: 5px solid transparent; border-left-color: var(--ink-soft);
                        margin-left: 2px; transition: transform .12s; }
.vy[open] > summary::before { transform: rotate(90deg) translateX(1px); }
.vy > summary .note { font-weight: 400; }

.vy-row { display: flex; align-items: flex-start; gap: 8px; padding: 4px 0; }
.vy-row .vy-m { flex: 0 0 78px; padding-top: 9px; font-size: 13px; font-weight: 700;
                color: var(--ink-soft); }
.vy-row .vy-ref { flex: 0 0 148px; font-size: 15px; }
/* Two lines of the verse rather than one: a single line cut most of them
   mid-word, which reads as a fault rather than as a preview. */
.vy-row .vy-words { flex: 1 1 auto; min-width: 0; min-height: 0; height: 48px;
                    font-size: 14.5px; line-height: 1.4; resize: vertical;
                    padding: 6px 9px; overflow: auto; }
/* The month this Sunday belongs to, so the row that matters is findable in
   a column of twelve that otherwise look alike. */
.vy-row.now .vy-m { color: var(--accent); }
.vy-row.now .vy-ref { border-color: #bfd0e6; }
@media (max-width: 700px) {
    .vy-row { flex-wrap: wrap; }
    .vy-row .vy-m { flex: 0 0 100%; padding-top: 2px; }
    .vy-row .vy-ref { flex: 1 1 100%; }
}

/* A block carrying as many of its items as the room allows. NOT A WARNING,
   and it was amber for a day: a list block is elastic by design — four events
   where five were asked for is the block working, not the page failing — so
   it is said in the quiet ink, as a fact about what will print. */
.blk.trimmed { border-color: var(--line); }
.blk.trimmed .blk-n em { color: #6b7683; font-style: normal; font-weight: 600; }

/* ── THE EMAIL'S DESIGN LIST ─────────────────────────────────────────────
   One row a section, in the order they will be sent. The row is the record:
   move it and the email moves, because the form posts in the order the rows
   sit in. */
.eb-row { display: flex; align-items: flex-start; gap: 10px;
          padding: 11px 12px; border: 1px solid var(--line); border-radius: 11px;
          background: #fafbfc; margin: 0 0 8px; }
.eb-row.on { background: var(--card); border-color: #cdd8ea; }
.eb-row.lift { box-shadow: 0 8px 20px rgba(16,24,40,.14); opacity: .96; }

.eb-grip { flex: 0 0 auto; cursor: grab; user-select: none; letter-spacing: -3px;
           color: #b6bfca; font-size: 16.5px; line-height: 1.4; padding: 2px 4px 2px 0;
           touch-action: none; border-radius: 6px; }
.eb-grip:hover { color: var(--ink-soft); }
.eb-grip:active { cursor: grabbing; }
.eb-grip:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(45,90,160,.25); color: var(--accent); }

/* THE ROW LEAVES THE LIST WHILE IT IS HELD, so the list closes up behind it
   and the line below can say where it will come back in. */
.eb-row.lift { position: fixed; z-index: 60; pointer-events: none;
               box-shadow: 0 14px 34px rgba(16,24,40,.18); background: var(--card);
               border-color: #cdd8ea; transform: rotate(-.3deg); }
body.eb-dragging { cursor: grabbing; user-select: none; }

/* Where it lands. */
.eb-mark { height: 3px; border-radius: 999px; background: var(--accent);
           margin: 3px 0 5px; box-shadow: 0 0 0 3px rgba(45,90,160,.14); }

/* The tick as a small switch, matching the Prayer screen's. */
.eb-tick { flex: 0 0 auto; position: relative; width: 34px; height: 20px; margin: 1px 2px 0 0; }
.eb-tick input { position: absolute; opacity: 0; width: 0; height: 0; }
.eb-tick span { position: absolute; inset: 0; border-radius: 999px; background: #c6cfda;
                transition: background .15s ease; }
.eb-tick span::after { content: ""; position: absolute; top: 3px; left: 3px; width: 14px; height: 14px;
                       border-radius: 50%; background: #fff; transition: transform .15s ease;
                       box-shadow: 0 1px 2px rgba(16,24,40,.35); }
.eb-tick input:checked + span { background: var(--accent); }
.eb-tick input:checked + span::after { transform: translateX(14px); }

.eb-what { flex: 1 1 auto; min-width: 0; }
.eb-what > b { font-size: 15.5px; }
.eb-hint { display: block; font-size: 14px; color: var(--ink-soft); margin-top: 2px; line-height: 1.45; }

/* The options only matter for a section that is on, so they fade back when
   it is not — still reachable, never shouting. */
.eb-opts { display: flex; flex-wrap: wrap; gap: 8px 12px; margin-top: 10px; }
.eb-row:not(.on) .eb-opts { opacity: .45; }
.eb-f { display: flex; flex-direction: column; gap: 3px; flex: 1 1 190px; min-width: 0; }
.eb-f > span { font-size: 12px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
               color: var(--ink-soft); }
.eb-f input, .eb-f select, .eb-f textarea { font-size: 15px; }
.eb-f.eb-wide { flex: 1 1 100%; }
.eb-f.eb-n { flex: 0 0 110px; }
.eb-ic .field { margin: 0; }
.eb-ic .field label { display: none; }

.eb-move { flex: 0 0 auto; display: flex; gap: 4px; }
.eb-move button { border: 1px solid var(--line); background: #fff; border-radius: 7px;
                  width: 26px; height: 26px; cursor: pointer; color: var(--ink-soft);
                  font-size: 14.5px; line-height: 1; }
.eb-move button:hover { border-color: var(--accent); color: var(--accent); }
.eb-move .eb-x:hover { border-color: #b4232a; color: #b4232a; }

/* ── MISSIONARIES ────────────────────────────────────────────────────────
   A card a family, and then a page a family: what they last wrote on the
   left, the box to write the next one on the right. */
.ms-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; }
.ms-card { display: flex; align-items: center; gap: 14px; padding: 14px 16px;
           background: var(--card); border: 1px solid var(--line); border-radius: 14px;
           text-decoration: none; color: var(--ink);
           transition: border-color .12s, box-shadow .12s, transform .12s; }
.ms-card:hover { border-color: #bfd0e6; box-shadow: 0 4px 14px rgba(16,24,40,.08);
                 transform: translateY(-1px); }
.ms-card.off { opacity: .6; }
.ms-face { flex: 0 0 auto; width: 54px; height: 54px; border-radius: 16px; overflow: hidden;
           background: #eef2f7; display: flex; align-items: center; justify-content: center; }
.ms-face img { width: 54px; height: 54px; object-fit: cover; display: block; }
.ms-initials { font-size: 22px; font-weight: 700; color: var(--accent); }
.ms-who { min-width: 0; display: block; }
.ms-who b { display: block; font-size: 17px; letter-spacing: -.1px; }
.ms-field { display: block; font-size: 14.5px; color: var(--accent); font-weight: 600; margin-top: 1px; }
.ms-note { display: block; font-size: 14px; color: var(--ink-soft); margin-top: 3px; }

.ms-page { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 20px;
           align-items: start; }
@media (max-width: 1100px) { .ms-page { grid-template-columns: 1fr; } }

.ms-letter { margin: 0 0 14px; }
.ms-when { display: flex; align-items: center; gap: 9px; font-size: 14px; font-weight: 700;
           color: var(--ink-soft); }
.ms-when em { font-style: normal; font-size: 11.5px; font-weight: 700; letter-spacing: .07em;
              text-transform: uppercase; color: var(--accent); background: #e7eff9;
              border-radius: 999px; padding: 3px 9px; }
.ms-shot { display: block; width: 100%; max-width: 320px; border-radius: 14px; margin: 12px 0 0; }
.ms-body { margin: 12px 0 0; font-size: 16.5px; line-height: 1.65; color: #333a42; }
.ms-pray { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); }
.ms-pray b { font-size: 13px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
             color: var(--ink-soft); }
.ms-pray ul { margin: 8px 0 0; padding-left: 20px; font-size: 16.5px; line-height: 1.6; color: #333a42; }
.ms-acts { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 16px; padding-top: 14px;
           border-top: 1px solid var(--line); }
.ms-acts .btn { margin: 0; }

/* ── THE LATEST FROM THE FIELD ───────────────────────────────────────────
   The reason anybody opens the Missionaries screen: twenty families, and the
   one that wrote this month. Newest first, above the list of everyone. */
.ms-latest { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr));
             gap: 14px; margin: 0 0 26px; }
.ms-up { display: block; padding: 16px 18px 15px; background: var(--card);
         border: 1px solid var(--line); border-radius: 16px; text-decoration: none;
         color: var(--ink); box-shadow: 0 1px 2px rgba(16,24,40,.04);
         transition: border-color .12s, box-shadow .12s, transform .12s; }
a.ms-up:hover { border-color: #bfd0e6; box-shadow: 0 6px 18px rgba(16,24,40,.09);
                transform: translateY(-1px); }
.ms-up-top { display: flex; align-items: center; gap: 11px; }
.ms-face.sm { width: 40px; height: 40px; border-radius: 12px; }
.ms-face.sm img { width: 40px; height: 40px; }
.ms-face.sm .ms-initials { font-size: 16.5px; }
.ms-up-who { min-width: 0; }
.ms-up-who b { display: block; font-size: 16.5px; letter-spacing: -.1px; }
.ms-up-when { display: block; font-size: 14px; color: var(--ink-soft); margin-top: 1px; }
.ms-up-said { display: block; margin-top: 11px; font-size: 15.5px; line-height: 1.55;
              color: #333a42; }
.ms-up-pray { display: block; margin-top: 11px; padding-top: 10px;
              border-top: 1px solid var(--line); font-size: 14.5px; color: var(--ink-soft);
              line-height: 1.5; }
.ms-up-pray b { display: block; color: var(--accent); font-size: 12.5px; font-weight: 700;
                letter-spacing: .06em; text-transform: uppercase; margin-bottom: 2px; }
.ms-all-head { margin: 0 0 12px; font-size: 14.5px; font-weight: 700; letter-spacing: .08em;
               text-transform: uppercase; color: var(--ink-soft); }

/* Reading a letter: the button and what it is doing, on one line. */
.ms-read { display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
           margin: 0 0 14px; padding: 12px 14px; background: #fafbfc;
           border: 1px solid var(--line); border-radius: 12px; }
.ms-read .note { flex: 1 1 220px; min-width: 0; line-height: 1.45; }

/* What Brevo says became of the last few sends. */
table.eb-sent { width: 100%; border-collapse: collapse; font-size: 14px; }
table.eb-sent td { padding: 8px 6px; border-bottom: 1px solid var(--line); vertical-align: top; }
table.eb-sent tr:last-child td { border-bottom: 0; }
table.eb-sent td.w { width: 130px; color: var(--ink-soft); white-space: nowrap; }
table.eb-sent td.s { width: 96px; font-weight: 700; text-transform: capitalize; }
table.eb-sent tr.good td.s { color: var(--ok); }
table.eb-sent tr.bad  td.s { color: var(--bad); }
table.eb-sent .why { display: block; font-size: 12.5px; color: var(--bad); margin-top: 2px; }

/* The three records that decide whether a church's email is read. */
.eb-dns { margin-top: 10px; padding-top: 10px; border-top: 1px solid rgba(0,0,0,.08);
          font-size: 13.5px; line-height: 1.6; }
.eb-dns > div { margin: 0 0 4px; }
.eb-dns b { display: inline-block; min-width: 54px; }
.eb-dns code { display: inline-block; margin-top: 3px; padding: 3px 7px; border-radius: 6px;
               background: rgba(0,0,0,.06); font-family: ui-monospace, Menlo, monospace;
               font-size: 12.5px; word-break: break-all; }

/* ── THE eBULLETIN SCREEN ────────────────────────────────────────────────
   Four jobs behind four tabs, and the email beside them the whole time —
   the preview belongs to all four, so it does not move when the tab does. */
.editor.eb-wide { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
                  max-width: min(1960px, 100%); gap: 26px; }
@media (max-width: 1100px) { .editor.eb-wide { grid-template-columns: 1fr; } }
.eb-left { min-width: 0; }

.eb-tabs { display: flex; flex-wrap: wrap; gap: 4px; margin: 0 0 16px;
           padding: 5px; background: #eef1f5; border-radius: 12px; }
.eb-tabs button { flex: 1 1 auto; border: 0; background: none; cursor: pointer;
                  padding: 10px 16px; border-radius: 9px; font: inherit;
                  font-size: 14.5px; font-weight: 600; color: var(--ink-soft);
                  white-space: nowrap; transition: background .12s, color .12s; }
.eb-tabs button:hover { color: var(--ink); }
.eb-tabs button.on { background: var(--card); color: var(--accent);
                     box-shadow: 0 1px 3px rgba(16,24,40,.10); }

/* A row where a field and its button belong together: same height, bottoms
   aligned, the button never stretched to the width of the field. */
.editor.eb-wide .row { align-items: flex-end; }
.editor.eb-wide .row .field { margin-bottom: 12px; }
.editor.eb-wide .row .field:last-child { margin-bottom: 12px; }
.editor.eb-wide .row .field .btn { margin: 0; height: 39px; }
.eb-pane .card { margin-bottom: 16px; }
.eb-pane .card:last-child { margin-bottom: 0; }

/* ── THE PRAYER LIST, GROUPED ────────────────────────────────────────────
   A church with eighty-four requests had eighty-four rows, each repeating
   the name of its category and carrying five buttons. The category is now
   said once, at the head of the group, and the week's two decisions are the
   only ones on the row. */
.pr-tools { display: flex; gap: 10px; align-items: center; margin: 0 0 12px; }
.pr-find { flex: 1 1 auto; }
.pr-tools .btn { flex: 0 0 auto; }

.pr-group { border-top: 1px solid var(--line); }
.pr-group > summary { display: flex; align-items: center; gap: 10px; cursor: pointer;
                      padding: 11px 2px; list-style: none; user-select: none; }
.pr-group > summary::-webkit-details-marker { display: none; }
.pr-group > summary::before { content: '▸'; font-size: 11px; color: var(--ink-soft);
                              transition: transform .12s; }
.pr-group[open] > summary::before { transform: rotate(90deg); }
.pr-group > summary:hover .pr-gname { color: var(--accent); }
.pr-gname { font-size: 12.5px; font-weight: 700; letter-spacing: .06em;
            text-transform: uppercase; color: var(--ink); }
.pr-gcount { font-size: 12px; font-weight: 600; color: var(--ink-soft);
             background: #EEF1F5; border-radius: 20px; padding: 1px 8px; }
.pr-gon { margin-left: auto; font-size: 12px; color: var(--accent); font-weight: 600; }

.pr-group .pr-row { border-top: 1px solid var(--line); padding: 7px 2px 7px 20px; }
.pr-group .pr-row:first-of-type { border-top: 1px solid var(--line); }
.pr-row[hidden] { display: none; }

/* The handle, and what is behind it. */
.pr-menu { position: relative; display: inline-block; }
.pr-menu > summary { list-style: none; cursor: pointer; border: 1px solid var(--line);
                     border-radius: 8px; padding: 3px 9px; font-size: 15px; line-height: 1.2;
                     color: var(--ink-soft); background: var(--card); }
.pr-menu > summary::-webkit-details-marker { display: none; }
.pr-menu > summary:hover { border-color: var(--ink-soft); color: var(--ink); }
.pr-menu[open] > summary { border-color: var(--accent); color: var(--accent); }
.pr-panel { position: absolute; right: 0; top: calc(100% + 5px); z-index: 40;
            min-width: 208px; background: var(--card); border: 1px solid var(--line);
            border-radius: 12px; padding: 6px; box-shadow: 0 12px 32px rgba(16,24,40,.16); }
.pr-panel a, .pr-panel button { display: block; width: 100%; text-align: left;
            background: none; border: 0; border-radius: 8px; padding: 8px 10px;
            font: inherit; font-size: 14px; color: var(--ink); cursor: pointer;
            text-decoration: none; }
.pr-panel a:hover, .pr-panel button:hover { background: #F2F5F9; color: var(--accent); }
.pr-panel button.gone { color: #B42318; }
.pr-panel button.gone:hover { background: #FEF3F2; color: #B42318; }
.pr-panel form { margin: 0; }
.pr-panel form + form { border-top: 1px solid var(--line); margin-top: 4px; padding-top: 4px; }

/* The picture's own design, folded into its row in the list — opened by the
   chevron on the right, where the two dead arrows used to sit. */
.eb-row { position: relative; }
.eb-art { margin: 0; }
.eb-art > summary { list-style: none; cursor: pointer; user-select: none;
                    position: absolute; top: 12px; right: 10px;
                    width: 32px; height: 32px; border: 2px solid var(--line);
                    border-radius: 50%; background: var(--card);
                    display: flex; align-items: center; justify-content: center; }
.eb-art > summary::-webkit-details-marker { display: none; }
/* THE ARROW IS DRAWN, NOT TYPED. A chevron character sits wherever its font
   decides, which was a little low and a little light; two borders make a
   stroke of a chosen thickness, and shifting it by a quarter of itself puts
   the corner — not the box around it — in the middle of the circle. */
.eb-art > summary::after { content: ''; width: 9px; height: 9px;
                    border-right: 3px solid var(--ink-soft);
                    border-bottom: 3px solid var(--ink-soft);
                    transform: translateY(-3px) rotate(45deg);
                    transition: transform .14s, border-color .12s; }
.eb-art > summary:hover { border-color: var(--accent); }
.eb-art > summary:hover::after { border-color: var(--accent); }
.eb-art[open] > summary { border-color: var(--accent); }
.eb-art[open] > summary::after { transform: translateY(2px) rotate(225deg);
                    border-color: var(--accent); }
.eb-artin { padding: 12px 0 2px; margin-top: 10px; border-top: 1px solid var(--line); }
.eb-artin .row { gap: 12px; }
.eb-artin .field { margin-bottom: 12px; }
.eb-artin input[type=color] { width: 34px; height: 34px; flex: 0 0 34px; padding: 0; }
.eb-artin .fontlist { position: relative; z-index: 5; }

/* The last few typefaces this church chose, under every font search box. */
.fontrecent { display: flex; flex-wrap: wrap; gap: 5px; margin: 6px 0 0; }
.fontrecent button { border: 1px solid var(--line); background: var(--card);
                     border-radius: 20px; padding: 3px 11px; font: inherit;
                     font-size: 12.5px; color: var(--ink-soft); cursor: pointer;
                     white-space: nowrap; }
.fontrecent button:hover { border-color: var(--accent); color: var(--accent); }

/* A picture chooser inside one row of the eBulletin's design list. */
.eb-pic { display: flex; gap: 8px; align-items: center; }
.eb-pic select { flex: 1 1 auto; min-width: 0; }
.eb-pic .btn, .eb-pic .stockpick { flex: 0 0 auto; margin: 0; }

/* The foot of the website — every page, under everything, saying little. */
.siteft { display: flex; flex-wrap: wrap; align-items: center;
          justify-content: center; gap: 8px; padding: 24px 20px 30px;
          font-size: 13px; color: var(--ink-soft); }
.siteft a { color: var(--ink-soft); text-decoration: none; }
.siteft a:hover { color: var(--accent); text-decoration: underline; }
.siteft .dot { opacity: .5; }

/* The development copy says so, beside the name. */
.devtag { flex: 0 0 auto; margin-left: 10px; background: #B45309; color: #fff;
          border-radius: 7px; padding: 3px 9px 4px; font-size: 11px;
          font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
          line-height: 1; }

/* ── THE CONNECTION CARDS ────────────────────────────────────────────────
   A list of people, which is a different thing from a list of records: the
   name is what you are looking for, the rest is what tells you whether to
   ring them today. */
.editor.cc-wide { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); }
@media (max-width: 1100px) { .editor.cc-wide { grid-template-columns: 1fr; } }

.cc-top { display: flex; align-items: flex-start; gap: 12px; }
.cc-top .btn { flex: 0 0 auto; margin-left: auto; }

.cc-row { display: flex; align-items: flex-start; gap: 14px; padding: 12px 4px;
          border-top: 1px solid var(--line); text-decoration: none; color: inherit; }
.cc-row:first-of-type { border-top: 0; }
.cc-row:hover { background: #F7F9FC; }
.cc-when { flex: 0 0 62px; text-align: right; }
.cc-when b { display: block; font-size: 13.5px; color: var(--ink); }
.cc-when i { display: block; font-size: 12px; color: var(--ink-soft); font-style: normal; }
.cc-who { flex: 1 1 auto; min-width: 0; }
.cc-who b { font-size: 15.5px; color: var(--ink); }
.cc-who i { display: block; font-style: normal; font-size: 13.5px; color: var(--ink-soft);
            margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cc-marks { flex: 0 0 auto; display: flex; gap: 6px; align-items: center; }
.cc-new { display: inline-block; margin-left: 8px; background: var(--accent); color: #fff;
          border-radius: 20px; padding: 1px 9px 2px; font-size: 11px; font-weight: 700;
          letter-spacing: .05em; text-transform: uppercase; vertical-align: 2px; }
.cc-tag { display: inline-block; background: #EEF1F5; color: #55606C; border-radius: 20px;
          padding: 2px 9px 3px; font-size: 11.5px; font-weight: 600; }
.cc-tag.pray { background: #E8F0FB; color: var(--accent); }
.cc-row.new { background: #FBFCFE; }

.cc-detail { width: 100%; border-collapse: collapse; margin-top: 14px; }
.cc-detail th { text-align: left; vertical-align: top; white-space: nowrap;
                padding: 9px 16px 9px 0; font-size: 13px; font-weight: 600;
                color: var(--ink-soft); border-top: 1px solid var(--line); }
.cc-detail td { padding: 9px 0; font-size: 15.5px; color: var(--ink);
                border-top: 1px solid var(--line); }
.cc-detail tr:first-child th, .cc-detail tr:first-child td { border-top: 0; }

.cc-qr { text-align: center; padding: 4px 0 16px; }
.cc-qr img { width: 200px; height: 200px; border: 1px solid var(--line); border-radius: 14px;
             padding: 10px; background: #fff; }

/* The wording screen: the fields on the left, the page itself on the right. */
.editor.cc-words { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); }
@media (max-width: 1100px) { .editor.cc-words { grid-template-columns: 1fr; } }
.cc-see { width: 100%; height: 620px; border: 1px solid var(--line); border-radius: 14px;
          background: #fff; }

/* A list a church can add to and take from, on the card's wording screen. */
.cc-list { margin: 0 0 8px; }
.cc-item { display: flex; gap: 6px; margin: 0 0 6px; }
.cc-item input { flex: 1 1 auto; min-width: 0; }
.cc-item .btn { flex: 0 0 auto; }