/**
 * Planner reminders — the portal-wide answer sheet (2026-08-13, M32).
 *
 * ⚠ EVERY SELECTOR HANGS OFF #plReminderSheet, AND THAT IS NOT TIDINESS. The
 *   portal's own button rules win at (1,0,1), so a class alone can never
 *   restyle a bare <button> — an id root is what gives every rule here enough
 *   specificity to land. The same trap has produced "the button looks wrong"
 *   bugs elsewhere in this portal.
 *
 * ⚠ THERE IS NO GLOBAL border-box IN THIS PORTAL, so every box below sets its
 *   own. Omitting it reads as a spacing bug rather than as a missing rule.
 *
 * ⚠ THE SHEET SITS ABOVE #header (fixed, z-index 5). It is appended to <body>
 *   by reminders.js for exactly this reason: #body is a stacking context
 *   beneath the header, so a sheet mounted inside the page content cannot
 *   paint over it whatever z-index it claims.
 *
 * Palette is the BMS house one — charcoal #28292c, orange #f39200, light card
 * #f5f5f5. Deliberately NOT the #1f6feb slate system, which is for panels on
 * white rather than for chrome.
 */

#plReminderSheet {
    position: fixed;
    inset: 0;
    z-index: 2147483000;   /* above the fixed header and any portal overlay */
    display: none;
}

#plReminderSheet.plrShow { display: block; }

#plReminderSheet .plrScrim {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, .55);
}

#plReminderSheet .plrSheet {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    box-sizing: border-box;
    margin: 0 auto;
    max-width: 620px;
    background: #ffffff;
    color: #28292c;
    border-radius: 18px 18px 0 0;
    padding: 18px 18px 22px;
    box-shadow: 0 -8px 40px rgba(0, 0, 0, .35);
    /* 180 ms is the house ceiling for any animation. */
    animation: plrRise 180ms ease-out;
}

@keyframes plrRise {
    from { transform: translateY(16px); opacity: .6; }
    to   { transform: translateY(0);    opacity: 1; }
}

/* On a wide screen a full-width bottom sheet looks like a mistake; centre it. */
@media (min-width: 700px) {
    #plReminderSheet .plrSheet {
        bottom: 50%;
        transform: translateY(50%);
        border-radius: 18px;
    }
    @keyframes plrRise {
        from { transform: translateY(calc(50% + 16px)); opacity: .6; }
        to   { transform: translateY(50%);              opacity: 1; }
    }
}

/* ------------------------------------------------------------------- head */

#plReminderSheet .plrHead {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 6px;
}

#plReminderSheet .plrHeadCenter { justify-content: space-between; }

#plReminderSheet .plrWhen {
    color: #f39200;
    font-weight: 700;
    font-size: 14px;
}

/*
 * The previous snooze, beside the due time and never instead of it.
 *
 * ⚠ QUIET ON PURPOSE. The orange .plrWhen is the card's due moment — the fact
 *   that matters and the one thing a snooze does NOT change. This is context
 *   for why the alarm is speaking now, so it reads as a muted chip; giving it
 *   the accent would put two competing times in one line and make a private
 *   postponement look like a rescheduled deadline.
 */
#plReminderSheet .plrSnoozed {
    box-sizing: border-box;
    color: #6b6b6b;
    background: #f2f2f2;
    border-radius: 10px;
    padding: 1px 7px;
    font-size: 12px;
    white-space: nowrap;
}

#plReminderSheet .plrBoard {
    color: #6b6b6b;
    font-size: 13px;
}

#plReminderSheet .plrPanelTitle {
    font-weight: 700;
    font-size: 16px;
}

#plReminderSheet .plrHeadBtns {
    margin-left: auto;
    display: flex;
    gap: 4px;
}

#plReminderSheet .plrIcon {
    box-sizing: border-box;
    width: 34px;
    height: 34px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: #6b6b6b;
    font-size: 17px;
    line-height: 34px;
    cursor: pointer;
}

#plReminderSheet .plrIcon:hover { background: #f5f5f5; color: #28292c; }
/* A spacer that keeps the panel title optically centred. */
#plReminderSheet .plrIconGhost { pointer-events: none; }

/* ------------------------------------------------------------------- body */

#plReminderSheet .plrTitle {
    margin: 2px 0 10px;
    font-size: 21px;
    line-height: 1.3;
    font-weight: 700;
    color: #28292c;
    /* A long card title must not push the buttons off a phone screen. */
    max-height: 4.5em;
    overflow: hidden;
}

#plReminderSheet .plrNote {
    margin: 0 0 12px;
    font-size: 13px;
    color: #6b6b6b;
}

#plReminderSheet .plrSpent {
    flex: 1;
    font-size: 13px;
    color: #6b6b6b;
    align-self: center;
}

/* ---------------------------------------------------------------- actions */

#plReminderSheet .plrActions {
    display: flex;
    gap: 10px;
    margin-top: 18px;
}

#plReminderSheet .plrBtn {
    box-sizing: border-box;
    flex: 1;
    min-height: 46px;
    padding: 0 16px;
    border: 0;
    border-radius: 10px;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
}

#plReminderSheet .plrGhost {
    background: #f5f5f5;
    color: #28292c;
}

#plReminderSheet .plrGhost:hover { background: #ececec; }

#plReminderSheet .plrPrimary {
    background: #f39200;
    color: #ffffff;
}

#plReminderSheet .plrPrimary:hover { background: #d98300; }

/* ------------------------------------------------------------ snooze tiles */

#plReminderSheet .plrTiles {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    margin: 14px 0 6px;
}

/* Four across is tight below ~380px; two rows of two reads better than a
   squeeze that truncates every label. */
@media (max-width: 380px) {
    #plReminderSheet .plrTiles { grid-template-columns: repeat(2, 1fr); }
}

#plReminderSheet .plrTile {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 14px 4px 10px;
    border: 0;
    border-radius: 12px;
    background: #f5f5f5;
    color: #28292c;
    cursor: pointer;
}

#plReminderSheet .plrTile:hover { background: #ffce75; }

#plReminderSheet .plrGlyph {
    font-size: 18px;
    font-weight: 700;
    color: #f39200;
}

#plReminderSheet .plrTileLabel {
    font-size: 11px;
    color: #6b6b6b;
    text-align: center;
    line-height: 1.25;
}

#plReminderSheet .plrLink {
    display: block;
    width: 100%;
    margin-top: 12px;
    padding: 12px 0 2px;
    border: 0;
    border-top: 1px solid #ececec;
    background: transparent;
    color: #f39200;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
}

/* -------------------------------------------------------------- custom dial */

#plReminderSheet .plrDial {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    margin: 22px 0 6px;
}

#plReminderSheet .plrDialValue {
    font-size: 40px;
    font-weight: 700;
    color: #28292c;
}

#plReminderSheet .plrRange {
    width: 100%;
    max-width: 340px;
    accent-color: #f39200;
}

#plReminderSheet .plrPreview {
    margin: 4px 0 0;
    text-align: center;
    font-size: 14px;
    color: #6b6b6b;
}

/* --------------------------------------------------------------- dark mode */

@media (prefers-color-scheme: dark) {
    #plReminderSheet .plrSheet { background: #1f2023; color: #f1f1f1; }
    #plReminderSheet .plrTitle,
    #plReminderSheet .plrDialValue { color: #f1f1f1; }
    #plReminderSheet .plrGhost,
    #plReminderSheet .plrTile { background: #2b2c30; color: #f1f1f1; }
    #plReminderSheet .plrGhost:hover,
    #plReminderSheet .plrTile:hover { background: #3a3b40; }
    #plReminderSheet .plrIcon:hover { background: #2b2c30; color: #f1f1f1; }
    #plReminderSheet .plrLink { border-top-color: #34353a; }
}