/* home-rooms.css — the Bridge home as a phone home screen.
 *
 * Brief (Al, 2026-09-30): "chains of command in a visual interface ...
 * otherwise I won't remember it"; a recent-apps bar across the top; each
 * category carrying its 3 most-used apps with the rest tucked away;
 * "inspired by Android phones front screen with app icons and group
 * folders"; several folders open at once, remembered; the alert sidebar
 * stays. Round 3: "the font is horrid ... give me the best you got."
 *
 * Choices, and why:
 *   - Type: Fraunces Light for the clock only (the one characterful moment,
 *     a desk clock rather than a dashboard number) and Figtree for every
 *     word, because it stays open and readable at 12px under an icon.
 *     Picked from rendered specimens of six sans and six display faces.
 *     Both self-hosted in static/fonts, so the page calls no outside server.
 *   - Color: a dusk wallpaper, and one pastel per folder. Icons are solid
 *     pastel squircles with dark glyphs, which read as apps at a glance;
 *     the old dim outlines read as form fields.
 *   - Structure: no cards and no stripes. A folder is a label and a row of
 *     four icon slots; opening it lays a tray under the row. Both rows sit
 *     on the same four-column grid so every icon on the screen lines up.
 *
 * Scoped to body.home-screen / .home. style.css and design-tokens.css are
 * untouched (tokens are shared with other Bridge apps). #alert-rail is
 * outside #main and is not restyled.
 */

@font-face {
    font-family: 'Figtree';
    src: url('/static/fonts/figtree-latin-400-normal.woff2') format('woff2');
    font-weight: 400;
    font-display: swap;
}
@font-face {
    font-family: 'Figtree';
    src: url('/static/fonts/figtree-latin-600-normal.woff2') format('woff2');
    font-weight: 600;
    font-display: swap;
}
@font-face {
    font-family: 'Figtree';
    src: url('/static/fonts/figtree-latin-700-normal.woff2') format('woff2');
    font-weight: 700;
    font-display: swap;
}
@font-face {
    font-family: 'Fraunces';
    src: url('/static/fonts/fraunces-latin-300-normal.woff2') format('woff2');
    font-weight: 300;
    font-display: swap;
}

body.home-screen {
    --ink: #131218;
    --ink-raised: #1d1b24;
    --ink-tray: #221f2b;
    --line: #35313f;
    --on-ink: #efeaf3;
    --on-ink-soft: #b3acbd;
    --alarm: #ff6b6b;
    --ui: 'Figtree', system-ui, sans-serif;
    --clock: 'Fraunces', Georgia, serif;
    --squircle: 18px;
    --slot: 25%;                 /* four icon slots per row, everywhere */

    font-family: var(--ui);
    color: var(--on-ink);
    /* The wallpaper. Fixed, so the home scrolls over it like a phone. */
    background:
        radial-gradient(120% 55% at 50% 0%, #2a2340 0%, rgba(42, 35, 64, 0) 70%) fixed,
        var(--ink);
}

/* The page-level chrome, brought into the same voice. */
body.home-screen #header {
    background: color-mix(in srgb, var(--ink) 72%, transparent);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-bottom-color: transparent;
    box-shadow: none;
}

body.home-screen .header-title {
    font: 700 18px/1 var(--ui);
    letter-spacing: 0;
}

body.home-screen .section-title {
    font: 700 17px/1.2 var(--ui);
    letter-spacing: 0;
    text-transform: none;
    color: var(--on-ink);
}

body.home-screen .section-title::after { display: none; }

/* ---------- At a glance ---------- */

.home {
    margin: 4px 0 28px;
}

.glance {
    padding: 8px 4px 18px;
}

.glance-time {
    margin: 0;
    font: 300 88px/0.95 var(--clock);
    letter-spacing: -2px;
    font-variant-numeric: lining-nums;
    color: var(--on-ink);
}

.glance-ampm {
    margin-left: 8px;
    font: 600 17px/1 var(--ui);
    letter-spacing: 0.5px;
    color: var(--on-ink-soft);
}

.glance-date {
    margin: 10px 0 14px;
    font: 600 17px/1.2 var(--ui);
    color: var(--on-ink-soft);
}

.glance-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.glance-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 36px;
    padding: 0 14px;
    background: var(--ink-raised);
    border: 1px solid var(--line);
    border-radius: 18px;
    color: var(--on-ink);
    font: 600 14px/1 var(--ui);
    cursor: pointer;
}

.glance-chip::before {
    content: '';
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--chip-dot, var(--on-ink-soft));
}

.glance-chip.is-alarm {
    --chip-dot: var(--alarm);
    background: color-mix(in srgb, var(--alarm) 14%, var(--ink-raised));
    border-color: color-mix(in srgb, var(--alarm) 45%, var(--line));
}

.glance-chip.is-quiet { cursor: default; color: var(--on-ink-soft); }
.glance-chip.is-quiet::before { background: #7fd1a0; }

.glance-chip:focus-visible { outline: 2px solid var(--on-ink); outline-offset: 2px; }

/* ---------- Search ---------- */

.dir-find {
    position: relative;
    margin-bottom: 26px;
}

.find-pill {
    display: flex;
    align-items: center;
    gap: 12px;
    height: 52px;
    padding: 0 20px;
    background: var(--ink-raised);
    border-radius: 26px;
    color: var(--on-ink-soft);
    cursor: text;
}

.find-pill svg { width: 20px; height: 20px; flex: none; }

.find-pill:focus-within { box-shadow: 0 0 0 2px var(--on-ink-soft); }

.dir-find-input {
    flex: 1;
    min-width: 0;
    height: 100%;
    background: none;
    border: 0;
    outline: none;
    color: var(--on-ink);
    font: 400 16px/1 var(--ui); /* 16px stops iOS zooming on focus */
}

.dir-find-input::placeholder { color: var(--on-ink-soft); }
.dir-find-input::-webkit-search-cancel-button { display: none; }

.dir-find-results {
    position: absolute;
    top: calc(100% + 8px);
    left: 0; right: 0;
    z-index: 30;
    margin: 0;
    padding: 8px;
    list-style: none;
    background: var(--ink-tray);
    border: 1px solid var(--line);
    border-radius: 22px;
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.5);
    max-height: 60vh;
    overflow-y: auto;
}

.dir-find-results[hidden] { display: none; }

.dir-hit {
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    min-height: 52px;
    padding: 6px 10px;
    background: none;
    border: 0;
    border-radius: 14px;
    color: var(--on-ink);
    font: 600 16px/1.2 var(--ui);
    text-align: left;
    cursor: pointer;
}

.dir-hit .app-glyph { width: 38px; height: 38px; border-radius: 12px; }
.dir-hit .app-glyph svg { width: 20px; height: 20px; }

.dir-hit-room {
    margin-left: auto;
    color: var(--on-ink-soft);
    font-weight: 400;
    font-size: 14px;
}

.dir-hit[aria-selected="true"],
.dir-hit:hover { background: rgba(255, 255, 255, 0.06); }

.dir-none {
    padding: 12px;
    color: var(--on-ink-soft);
    font-size: 15px;
}

/* ---------- Shelf titles (Recent, folder names) ---------- */

.shelf-title {
    margin: 0;
    font: 700 17px/1.2 var(--ui);
    color: var(--on-ink);
}

/* ---------- The app icon ---------- */

.app-icon {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    min-width: 0;
    padding: 6px 2px 4px;
    background: none;
    border: 0;
    border-radius: 16px;
    color: var(--on-ink);
    font: 600 12.5px/1.2 var(--ui);
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.app-glyph {
    position: relative;
    display: grid;
    place-items: center;
    width: 60px;
    height: 60px;
    border-radius: var(--squircle);
    background: var(--room-color);
    color: color-mix(in oklab, var(--room-color) 22%, #0b0a10);
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.35) inset, 0 6px 14px rgba(0, 0, 0, 0.35);
    transition: transform 0.12s ease;
}

.app-glyph svg { width: 28px; height: 28px; stroke-width: 2.1; }

.app-name {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    max-width: 100%;
}

.app-icon:active .app-glyph { transform: scale(0.9); }
.app-icon:focus-visible { outline: none; }
.app-icon:focus-visible .app-glyph { outline: 2px solid var(--on-ink); outline-offset: 3px; }

/* Android-style notification badge on the icon's corner. */
.app-badge {
    position: absolute;
    top: -5px;
    right: -5px;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: 10px;
    background: var(--alarm);
    border: 2px solid var(--ink);
    color: #fff;
    font: 700 11px/16px var(--ui);
    text-align: center;
}

.app-badge:empty { min-width: 14px; width: 14px; height: 14px; padding: 0; top: -3px; right: -3px; }

/* ---------- Recent ---------- */

.recent { margin-bottom: 26px; }

.recent-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 4px 10px;
}

.pager { display: flex; gap: 6px; }

.pager i {
    width: 6px;
    height: 6px;
    border-radius: 3px;
    background: var(--line);
    transition: width 0.2s ease, background 0.2s ease;
}

.pager i.on { width: 18px; background: var(--on-ink-soft); }

.recent-strip {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 20%;     /* five to a page on a phone */
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
}

.recent-strip::-webkit-scrollbar { display: none; }
.recent-strip > :nth-child(5n + 1) { scroll-snap-align: start; }

/* ---------- Folders ---------- */

.folders {
    display: grid;
    gap: 22px;
}

.folder {
    border-radius: 26px;
    transition: background 0.2s ease;
}

.folder-head {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 0 6px 10px;
    background: none;
    border: 0;
    color: var(--on-ink);
    text-align: left;
    cursor: pointer;
}

.folder-chevron {
    width: 18px;
    height: 18px;
    color: var(--on-ink-soft);
    transition: transform 0.2s ease;
}

.folder.is-open .folder-chevron { transform: rotate(180deg); }
.folder.is-flat .folder-chevron { display: none; }
.folder.is-flat .folder-head { cursor: default; }
.folder-head:focus-visible { outline: 2px solid var(--on-ink); outline-offset: 2px; border-radius: 10px; }

.folder-row,
.home .folder-body {
    display: grid;
    grid-template-columns: repeat(4, var(--slot));
    /* column-gap 0 on purpose: style.css gives .app-dock/.tools-grid their
       own gap, which pushed the tray's icons off the row's columns. */
    gap: 14px 0;
}

/* The folder icon: a tray of tiny glyphs, like an Android folder. */
.folder-glyph {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 4px;
    padding: 9px;
    background: color-mix(in srgb, var(--room-color) 20%, var(--ink-raised));
    box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--room-color) 45%, transparent);
    color: var(--room-color);
}

/* :not(.app-badge) — the corner badge is also a span in here, and was
   being painted as a mini tile (green, not red). */
.folder-glyph > span:not(.app-badge) {
    display: grid;
    place-items: center;
    border-radius: 6px;
    background: var(--room-color);
    color: color-mix(in oklab, var(--room-color) 22%, #0b0a10);
}

.folder-glyph > span svg { width: 12px; height: 12px; stroke-width: 2.6; }

.folder.is-open .folder-glyph {
    display: grid;
    place-items: center;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
    background: color-mix(in srgb, var(--room-color) 32%, var(--ink-raised));
}

.folder-glyph .close-mark { width: 26px; height: 26px; }

/* The tray: an opened folder sits on a raised surface. */
.folder.is-open {
    background: var(--ink-tray);
    padding: 12px 0 6px;
    margin: -12px 0 0;
}

.folder.is-open .folder-head { padding-left: 16px; }

.home .folder-body[hidden] { display: none; }

.folder.is-open .folder-body {
    margin-top: 6px;
    padding-top: 14px;
    border-top: 1px solid var(--line);
    animation: tray-open 0.22s ease-out;
}

@keyframes tray-open {
    from { opacity: 0; transform: translateY(-8px); }
    to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    .folder.is-open .folder-body { animation: none; }
    .folder-chevron, .pager i, .app-glyph, .folder { transition: none; }
}

/* The original tiles live in the tray untouched (ids, badges, handlers)
   and are re-dressed to match .app-icon exactly. */
.home .folder-body > .dock-tile,
.home .folder-body > .tool-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    min-width: 0;
    min-height: 0;
    padding: 6px 2px 4px;
    background: none;
    border: 0;
    border-radius: 16px;
    box-shadow: none;
    color: var(--on-ink);
    font: 600 12.5px/1.2 var(--ui);
    letter-spacing: 0;
    text-align: center;
    animation: none;
}

.home .folder-body > .dock-tile .dock-icon,
.home .folder-body > .tool-btn > svg {
    box-sizing: content-box;
    width: 28px;
    height: 28px;
    padding: 16px;
    border-radius: var(--squircle);
    background: var(--room-color);
    color: color-mix(in oklab, var(--room-color) 22%, #0b0a10);
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.35) inset, 0 6px 14px rgba(0, 0, 0, 0.35);
    animation: none;
}

.home .folder-body > .dock-tile .dock-label { font-size: 12.5px; }

.home .folder-body > .dock-tile .dock-badge {
    top: 0;
    right: calc(50% - 38px);
    background: var(--alarm);
    border: 2px solid var(--ink-tray);
}

.home .folder-body > .dock-tile.has-alerts .dock-icon { box-shadow: 0 0 0 3px var(--alarm); }

/* Promoted into the folder's row, so not repeated in the tray. */
.home .folder-body > .is-promoted { display: none; }

/* ---------- Wider screens ---------- */

@media (min-width: 760px) {
    .glance { display: grid; grid-template-columns: auto 1fr; align-items: end; column-gap: 28px; }
    .glance-time { grid-row: span 2; }
    .glance-date { margin: 0 0 10px; }
    .recent-strip { grid-auto-columns: 10%; overflow: visible; }
    .pager { display: none; }
    .folders { grid-template-columns: 1fr 1fr; column-gap: 20px; align-items: start; }
}

/* ---------- The alert sidebar, in the home's voice ----------
   Same element, same behavior (app.js renders it at >=1360px whenever an
   alert is live); only the type and surfaces change to match. */

body.home-screen #alert-rail { font-family: var(--ui); }

body.home-screen .rail-title {
    font: 700 17px/1.2 var(--ui);
    letter-spacing: 0;
    text-transform: none;
    color: var(--on-ink);
}

body.home-screen .rail-all { font: 600 13px/1 var(--ui); color: var(--on-ink-soft); }

body.home-screen .rail-item {
    background: var(--ink-raised);
    border-color: var(--line);
    border-radius: 16px;
}

/* On a laptop ten icons share the row, ~67px each; one-word names like
   "Watchtower" were being clipped at 12.5px. */
@media (min-width: 760px) {
    .recent-strip .app-name { font-size: 11.5px; }
}