/* =============================================================
   home.css  ·  faces/home/mobile/  ·  standalone
   Mobile home face: outer band geometry + placeholder labels.
   Component CSS (tabs, carousel, chips) lives in sibling files.

   R6: hard cap 200 lines — split when content exceeds.
   Loaded order in home.html: shared first, then this, then tabs.css,
   carousel.css, chips.css.
   ============================================================= */

/* ---------- desktop-preview constraint: lock canvas to 9:16 ----------
   When the mobile face is viewed on a viewport wider than a phone
   (i.e., desktop), don't stretch the canvas across the screen — show
   it as a phone-shaped 9:16 portrait centered in the viewport.
   On real phones (aspect-ratio < 9/16), this query doesn't trigger
   and the canvas fills naturally. */
@media (min-aspect-ratio: 9 / 16) {
    .canvas-root {
        width: auto;
        height: 100%;
        aspect-ratio: 9 / 16;
        margin-inline: auto;
    }
}

/* ---------- header / footer geometry ---------- */
.home-header {
    /* lock the grid track to the band size so percentage children
       resolve against the band, not against image-intrinsic 1024px. */
    display: grid;
    grid-template-rows: 100%;
    grid-template-columns: 100%;
    place-items: center;
}
.home-header-logo {
    /* fits inside the 10% header band — square, capped at 90% of band height. */
    max-height: 90%;
    max-width: 90%;
    width: auto;
    height: auto;
    aspect-ratio: 1 / 1;
    user-select: none;
    -webkit-user-drag: none;
    pointer-events: none;
}
.home-footer {
    display: grid;
    place-items: stretch;          /* let dirty actions fill the band */
    padding: 6px 4%;
}

/* ---------- footer dirty actions: CANCEL + APPLY (shown when dirty) ---------- */
.footer-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    width: 100%;
    height: 100%;
}
.footer-actions[hidden] { display: none; }

.footer-btn {
    border: 2px solid var(--brand-active);
    background: transparent;
    color: var(--on-brand);
    font-family: var(--font-sans);
    font-size: 18px;
    text-transform: uppercase;
    letter-spacing: 3px;
    border-radius: 8px;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
    padding: 0;
}
.footer-btn:active { transform: scale(0.97); }

.footer-cancel {
    color: var(--on-brand-muted);
    border-color: var(--on-brand-muted);
}
.footer-apply {
    color: var(--brand);
    background: var(--status-warn);
    border-color: var(--status-warn);
}
.footer-delete {
    color: var(--brand);
    background: var(--status-error);
    border-color: var(--status-error);
}
.footer-delete[disabled] {
    opacity: 0.4;
    cursor: not-allowed;
    pointer-events: none;
}

/* Lock badge inside a forwarder chip (right side, near the toggle).
   Absolute-positioned so it doesn't disrupt the chip-twologo grid. */
.chip { position: relative; }
.icon-lock {
    position: absolute;
    top: 50%;
    right: calc(20% + 6px);
    transform: translateY(-50%);
    width: 16px;
    height: 16px;
    color: var(--status-error);
    filter: drop-shadow(0 0 4px var(--status-error)) drop-shadow(0 0 8px rgba(244, 66, 74, 0.5));
    pointer-events: none;
}
.icon-lock[hidden] { display: none; }

/* Locked forwarder: dim its sources/destinations lists + block toggling. */
.chip-list.is-locked .chip-check {
    pointer-events: none;
    opacity: 0.4;
}
.chip-list.is-locked .chip {
    opacity: 0.85;
}

/* confirm overlay styles live in shared/components/confirm-overlay.css */

/* ---------- main band: nested 7 / 93 grid (subheader / content) ---------- */
.home-main {
    display: grid;
    grid-template-rows: 7% 93%;
    overflow: hidden;
}

/* ---------- placeholder big number on pages 2–6 ---------- */
.carousel-label {
    text-align: center;
}

.carousel-label .page-num {
    font-size: 64px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -2px;
    color: var(--on-brand);
    margin-bottom: 8px;
}

.carousel-label .page-of {
    font-size: 11px;
    color: var(--on-brand-muted);
    text-transform: uppercase;
    letter-spacing: 0.6px;
}

/* ---------- per-tab accent colours ----------
   sources keep the default yellow (--status-warn) for the count badge
   and the checked toggles. Destinations override to red. The chip-add
   plus icon is green via .chip-avatar-plus in chips.css. */

/* count badge is now on the RIGHT in source/dest headers (swapped with the
   forwarder logo). Target via :last-child so colour follows the swap. */

/* tab-3: sources — yellow count badge */
#source-header > .chip-avatar:last-child {
    color: var(--status-warn);
    border-color: var(--status-warn);
}

/* tab-4: destinations — red count badge + red checked toggles */
#dest-header > .chip-avatar:last-child {
    color: var(--status-error);
    border-color: var(--status-error);
}
#dest-list .chip-check[aria-pressed="true"] {
    color: var(--status-error);
    border-color: var(--status-error);
}

/* ---------- placeholder labels (header / footer rows) ---------- */
.placeholder-label {
    text-align: center;
}

.placeholder-label .row-name {
    font-size: 13px;
    font-weight: 400;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: 4px;
    color: var(--on-brand);
}

.placeholder-label .row-pct {
    font-size: 11px;
    color: var(--on-brand-muted);
    text-transform: uppercase;
    letter-spacing: 1.5px;
}