/* PEBBLE-WIRE-UP-POLISH-2026-05-19 — frame styling for the 4 new mount
   slots (voice card, report card, hygiene rail). Uses gentoo-tokens and
   pebble-tokens-airy vocab so the new pieces feel like they belong. */

/* Top-card slot — voice update card lives above the inbox. Slim, airy. */
.pebble-top-card-slot {
    margin: 12px 16px 0;
}
.pebble-top-card-slot:empty {
    display: none;
}

/* Rail panel — Pebble Report Card slot lives in the right rail. */
.pebble-rail-panel {
    margin: 12px 16px 0;
    background: var(--gl-surface);
    border: 1px solid var(--gl-border);
    border-radius: 8px;
    overflow: hidden;
}
.pebble-rail-panel:empty {
    display: none;
}

/* Hygiene rail — sticky right-side stack for Outgoing / History / Sync.
   Positioned as an aside that floats over the bottom-right when there is
   activity; collapses to nothing when both lists + banner are empty. */
#pebble-hygiene-rail.pebble-rail {
    position: fixed;
    right: 16px;
    bottom: 16px;
    width: 320px;
    max-height: 60vh;
    overflow-y: auto;
    background: var(--gl-surface);
    border: 1px solid var(--gl-border);
    border-radius: 10px;
    box-shadow: 0 6px 24px rgba(15, 23, 42, 0.10);
    padding: 12px 14px;
    z-index: 60;
    font-size: 13px;
}
#pebble-hygiene-rail.pebble-rail section {
    margin-bottom: 12px;
}
#pebble-hygiene-rail.pebble-rail section:last-child {
    margin-bottom: 0;
}
#pebble-hygiene-rail.pebble-rail h3 {
    font-size: 12px;
    font-weight: 600;
    color: var(--gl-text-2);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin: 0 0 6px;
}
#pebble-hygiene-rail.pebble-rail .pebble-list {
    list-style: none;
    margin: 0;
    padding: 0;
}
#pebble-hygiene-rail.pebble-rail .pebble-list li {
    padding: 6px 0;
    border-top: 1px solid var(--gl-border);
    font-size: 12px;
    color: var(--gl-text);
}
#pebble-hygiene-rail.pebble-rail .pebble-list li:first-child {
    border-top: none;
}
#pebble-hygiene-rail.pebble-rail .pebble-empty {
    margin: 0;
    color: var(--gl-text-3);
    font-size: 12px;
    font-style: italic;
}
#pebble-hygiene-rail.pebble-rail input[type="search"] {
    width: 100%;
    padding: 6px 8px;
    margin-bottom: 6px;
    border: 1px solid var(--gl-border);
    border-radius: 6px;
    font-size: 12px;
}
#pebble-hygiene-rail.pebble-rail .pebble-banner {
    background: var(--gl-brand-soft, #D6F0F9);
    color: var(--gl-brand-strong, #0D2A4A);
    padding: 8px 10px;
    border-radius: 6px;
    margin-bottom: 10px;
    font-size: 12px;
}
/* Hide the whole rail until JS populates content. The mount functions reveal
   it by removing the [hidden] attribute on the banner OR by populating a
   list. Until then, this CSS keeps it out of the way. */
#pebble-hygiene-rail.pebble-rail:not(:has(li, .pebble-banner:not([hidden]))) {
    display: none;
}

@media (max-width: 768px) {
    #pebble-hygiene-rail.pebble-rail {
        right: 8px;
        left: 8px;
        width: auto;
        max-height: 40vh;
    }
    .pebble-top-card-slot,
    .pebble-rail-panel {
        margin: 8px 8px 0;
    }
}