/* The date picker, ported from the church website's view-date-pick.php.
   Upgrades every input[type=date] on the page; data-dp="off" opts out. */
/* The real input is still there and still doing its job - it is simply
       not what anybody looks at. Not display:none: a hidden field cannot be
       focused by a label, and required validation on a hidden input is a
       browser error nobody can see. */
    .dd-dp-wrap { position: relative; display: block; }
    .dd-dp-wrap > input[type=date],
    .dd-dp-wrap > input[type=datetime-local] {
        position: absolute !important; inset: 0 !important; width: 100% !important;
        height: 100% !important; margin: 0 !important; padding: 0 !important;
        opacity: 0 !important; pointer-events: none !important; border: 0 !important;
    }
    /* Chrome's own calendar button, gone - ours is the one that opens. */
    .dd-dp-wrap > input[type=date]::-webkit-calendar-picker-indicator,
    .dd-dp-wrap > input[type=datetime-local]::-webkit-calendar-picker-indicator { display: none; }

    .dd-dp-field {
        display: flex; align-items: center; gap: 10px; width: 100%;
        box-sizing: border-box; min-height: 40px; padding: 0 12px;
        border: 1px solid #DDE3E9; border-radius: 8px; background: #fff;
        font: inherit; font-size: 14px; color: #1e2430; text-align: left;
        cursor: pointer; transition: border-color .15s, box-shadow .15s;
    }
    /* EVERY STATE, STATED. It is a bare <button>, and a theme that fills
       buttons dark on hover turned the whole field black with the date
       disappearing into it. */
    .dd-dp-field,
    .dd-dp-field:hover,
    .dd-dp-field:focus,
    .dd-dp-field:active,
    .dd-dp-field:focus-visible { background: #fff !important; color: #1e2430 !important;
                                 text-decoration: none !important; }
    .dd-dp-field:hover { border-color: #C4D3DE !important; }
    .dd-dp-field:focus-visible, .dd-dp-wrap.open .dd-dp-field {
        outline: none; border-color: #2176d2 !important;
        box-shadow: 0 0 0 3px rgba(33,118,210,.14) !important;
    }
    .dd-dp-field:hover > svg, .dd-dp-field:focus > svg { color: #8A929B !important; }
    .dd-dp-field > svg { flex: none; color: #8A929B; }
    .dd-dp-nav > svg { display: block; }
    .dd-dp-field .v { flex: 1 1 auto; min-width: 0; overflow: hidden;
                      text-overflow: ellipsis; white-space: nowrap; }
    /* NAMESPACED, BECAUSE .none IS ALREADY TAKEN. The bulletin's own
       stylesheet uses .none for the empty-state panels - "Nothing on the
       calendar for the next three months" - and gives it padding: 44px 20px.
       A placeholder wearing that class became 106px tall, which is why one
       date field stood three times the height of the one beside it. */
    .dd-dp-field .v.dd-dp-empty { color: #A2AAB2 !important; padding: 0 !important;
                                  text-align: left !important; }
    /* Clearing is part of the field, not a second control beside it. */
    .dd-dp-x { flex: none; width: 22px; height: 22px; border: 0; border-radius: 50%;
               background: #EFF1F3; color: #6B7278; font-size: 11px; line-height: 1;
               display: none; align-items: center; justify-content: center; cursor: pointer; }
    .dd-dp-wrap.has .dd-dp-x { display: inline-flex; }
    .dd-dp-x:hover { background: #E2E6EA; color: #1e2430; }

    /* ── THE CALENDAR ─────────────────────────────────────────────────────
       Floating, so a month cannot push the form about as it opens. */
    .dd-dp-panel {
        position: absolute; z-index: 60; top: calc(100% + 8px); left: 0;
        width: 300px; max-width: calc(100vw - 24px); padding: 14px; box-sizing: border-box;
        background: #fff; border: 1px solid #E7EBEE; border-radius: 16px;
        box-shadow: 0 12px 32px rgba(16,32,42,.14), 0 2px 6px rgba(16,32,42,.06);
        display: none;
    }
    .dd-dp-wrap.open .dd-dp-panel { display: block; }
    /* Near the right-hand edge it opens leftwards instead of off the screen. */
    .dd-dp-panel.right { left: auto; right: 0; }

    .dd-dp-top { display: flex; align-items: center; gap: 6px; margin: 0 0 10px; }
    .dd-dp-top b { flex: 1 1 auto; min-width: 0; font-size: 15px !important;
                   font-weight: 700; letter-spacing: -.01em; color: #1e2430;
                   text-align: center; margin: 0 !important; }
    .dd-dp-nav { flex: none; width: 30px !important; min-width: 0 !important;
                 height: 30px !important; min-height: 0 !important;
                 padding: 0 !important; margin: 0 !important; border: 0 !important;
                 border-radius: 9px !important; background: none; box-shadow: none !important;
                 color: #6B7278; font-size: 12px !important; cursor: pointer;
                 display: inline-flex !important; align-items: center; justify-content: center; }
    .dd-dp-nav:hover { background: #F1F4F7; color: #1e2430; }

    /* The month and the year, chosen straight from the head of the panel. Two
       plain menus dressed to look like the title they replaced: no border
       until the pointer is on them, so the calendar still reads as a calendar
       rather than a form. */
    .dd-dp-pick { flex: 1 1 auto; min-width: 0; display: flex; align-items: center;
                  justify-content: center; gap: 4px; }
    .dd-dp-pick select { -webkit-appearance: none; appearance: none;
                  height: 30px !important; min-height: 0 !important; width: auto !important;
                  max-width: none !important; min-width: 0 !important;
                  padding: 0 7px !important; margin: 0 !important;
                  border: 1px solid transparent !important; border-radius: 8px !important;
                  background: none !important; box-shadow: none !important;
                  font: inherit; font-size: 15px !important; font-weight: 700;
                  letter-spacing: -.01em; color: #1e2430; cursor: pointer; }
    .dd-dp-pick select:hover { background: #F1F4F7 !important; }
    .dd-dp-pick select:focus { outline: none; border-color: #0d6fb8 !important;
                  box-shadow: 0 0 0 3px rgba(13,111,184,.13) !important; }

    /* ── IT BORROWS NOTHING FROM THE FORM IT LANDS IN ────────────────────
       THE GRID BURST ITS PANEL. A grid item's min-width is auto, so a track
       cannot be narrower than what is in it - and a screen that gives every
       <button> its own padding and font-size makes each cell far wider than
       a seventh of 300px. Seven of those pushed the days out over the fields
       beside them.

       minmax(0, 1fr) lets the tracks shrink, min-width: 0 lets the cells,
       and every metric the widget depends on is stated here rather than
       inherited - the same reasoning as the icon picker's stylesheet. */
    .dd-dp-panel, .dd-dp-panel * { box-sizing: border-box !important; }
    .dd-dp-dows, .dd-dp-grid { display: grid !important;
                               grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
                               gap: 2px !important; width: 100% !important; margin: 0 !important; }
    .dd-dp-dows span { display: block; min-width: 0; text-align: center;
                       font-size: 11px !important; font-weight: 700; letter-spacing: .04em;
                       text-transform: uppercase; color: #A2AAB2; padding: 0 0 6px !important;
                       margin: 0 !important; line-height: 1.2 !important; }
    .dd-dp-day { min-width: 0 !important; width: auto !important;
                 height: 36px !important; min-height: 0 !important; max-height: none !important;
                 padding: 0 !important; margin: 0 !important;
                 border: 0 !important; border-radius: 10px !important;
                 background: none; box-shadow: none !important;
                 font-family: inherit !important; font-size: 14px !important;
                 font-weight: 400 !important; line-height: 1 !important;
                 letter-spacing: normal !important; text-transform: none !important;
                 color: #1e2430 !important; cursor: pointer;
                 display: inline-flex !important; align-items: center; justify-content: center; }
    /* THE COLOUR ON HOVER, STATED — which is the whole point of the note
       above and the one property here that was left without it. These are
       bare <button>s, the theme colours a hovered button's text white, and
       so the number under the cursor turned white on a pale grey square and
       vanished. Every other line in this block already says !important; this
       one did not, and that was the entire bug. */
    .dd-dp-day:hover, .dd-dp-day:focus, .dd-dp-day:active {
        background: #F1F4F7 !important; color: #1e2430 !important; }
    .dd-dp-day.out, .dd-dp-day.out:hover { color: #C7CDD3 !important; }
    .dd-dp-day.off, .dd-dp-day.off:hover { color: #D6DBE0 !important; cursor: default; }
    .dd-dp-day.off:hover { background: none !important; }
    /* Today is marked, not selected - a dot rather than a fill, so the two
       cannot be mistaken for each other. */
    .dd-dp-day.today { font-weight: 700; position: relative; }
    .dd-dp-day.today::after { content: ''; position: absolute; bottom: 5px; left: 50%;
                              transform: translateX(-50%); width: 4px; height: 4px;
                              border-radius: 50%; background: #2176d2; }
    /* The chosen day stays white on blue, hovered or not. */
    .dd-dp-day.on, .dd-dp-day.on:hover, .dd-dp-day.on:focus {
        background: #2176d2 !important; color: #fff !important; font-weight: 600; }
    .dd-dp-day.on::after { background: #fff; }

    .dd-dp-foot { display: flex; gap: 8px; margin: 12px 0 0; padding-top: 10px;
                  border-top: 1px solid #EEF1F4; }
    .dd-dp-foot button { flex: 1 1 auto; min-width: 0 !important;
                         height: 34px !important; min-height: 0 !important;
                         padding: 0 !important; margin: 0 !important;
                         border: 1px solid #DDE3E9 !important; border-radius: 999px !important;
                         background: #fff !important; box-shadow: none !important;
                         font-family: inherit !important; font-size: 13px !important;
                         font-weight: 500 !important; line-height: 1 !important;
                         text-transform: none !important; color: #1e2430 !important;
                         cursor: pointer; }
    .dd-dp-foot button:hover { background: #F5F7F9; }

/* ── A TIME AS WELL AS A DAY ───────────────────────────────────────────────
   Added 2026-09-19 for `remind_at` on a Done task (Jerry, looking at the
   operating system's own datetime stepper: "Make it modern"). The calendar
   above is unchanged; underneath it the half hours of a working day sit in
   four columns that scroll, the way a booking page offers times, rather than
   a pair of tiny spinners you have to hit dead on.

   Every metric is stated, for the reason the grid block above gives: these
   are bare <button>s inside a screen that gives every button its own padding,
   font and hover colour, and a borrowed one bursts the panel. */
    .dd-dp-timehd { margin: 13px 0 7px; font-size: 11px !important; font-weight: 700;
                    letter-spacing: .04em; text-transform: uppercase; color: #A2AAB2;
                    line-height: 1.2 !important; }
    .dd-dp-times { display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
                   gap: 5px !important; width: 100% !important; margin: 0 !important;
                   max-height: 124px; overflow-y: auto; overscroll-behavior: contain;
                   scrollbar-width: thin; padding: 1px !important; }
    .dd-dp-time { min-width: 0 !important; width: auto !important;
                  height: 30px !important; min-height: 0 !important; max-height: none !important;
                  padding: 0 2px !important; margin: 0 !important;
                  border: 1px solid #E7EBEE !important; border-radius: 9px !important;
                  background: #fff !important; box-shadow: none !important;
                  font-family: inherit !important; font-size: 12px !important;
                  font-weight: 600 !important; line-height: 1 !important;
                  letter-spacing: normal !important; text-transform: none !important;
                  color: #1e2430 !important; cursor: pointer; white-space: nowrap;
                  display: inline-flex !important; align-items: center; justify-content: center;
                  transition: border-color .12s, background .12s; }
    .dd-dp-time:hover, .dd-dp-time:focus, .dd-dp-time:active {
                  background: #F1F4F7 !important; color: #1e2430 !important; border-color: #C4D3DE !important; }
    .dd-dp-time.on, .dd-dp-time.on:hover, .dd-dp-time.on:focus {
                  background: #0d6fb8 !important; border-color: #0d6fb8 !important; color: #fff !important; }