/* ===================================
   Portal Internal HBM v2.0 - Dial View
   Radial app launcher. Geometry derives from --dial-size so it
   always fits the viewport without scrolling.
   =================================== */

.dial-view {
    --dial-size: min(calc(100vw - 3rem), 56vh, 600px);
    --hub: calc(var(--dial-size) * 0.46);
    --marker: calc(var(--dial-size) * 0.095);
    --r-open: calc(var(--dial-size) * 0.40);
    --r-idle: calc(var(--dial-size) * 0.255);

    --spring: cubic-bezier(.34, 1.56, .64, 1);
    --ease-out: cubic-bezier(.22, 1, .36, 1);

    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    padding: 0.5rem 0 1.5rem;
}

/* --- Dial --- */
.dial {
    --r: var(--r-idle);
    --s: .3;
    --phi: -16deg;

    position: relative;
    width: var(--dial-size);
    height: var(--dial-size);
    display: grid;
    place-items: center;
    flex: none;
    animation: dial-in .8s var(--ease-out) both;
}
.dial:hover { --r: var(--r-open); --s: 1; --phi: 0deg; }

@keyframes dial-in {
    from { opacity: 0; transform: scale(.88); }
    to { opacity: 1; transform: scale(1); }
}

.dial-ring {
    position: absolute;
    width: calc(var(--r) * 2 + var(--marker));
    height: calc(var(--r) * 2 + var(--marker));
    border-radius: 50%;
    border: 1px solid var(--border-subtle);
    transition: width .75s var(--spring), height .75s var(--spring), opacity .4s ease;
}
.dial:hover .dial-ring { opacity: .45; }

.dial-glow {
    position: absolute;
    width: calc(var(--r) * 2);
    height: calc(var(--r) * 2);
    border-radius: 50%;
    background: radial-gradient(circle, rgba(2,132,199,.07) 0%, transparent 68%);
    opacity: 0;
    transition: width .75s var(--spring), height .75s var(--spring), opacity .5s ease;
    pointer-events: none;
}
.dial:hover .dial-glow { opacity: 1; }

/* Clock hand pointing at the focused app */
.dial-hand {
    position: absolute;
    width: 2px;
    height: var(--r-open);
    top: 50%; left: 50%;
    transform-origin: top center;
    transform: translate(-50%, 0) rotate(calc(var(--hand, 0deg) + 180deg));
    background: linear-gradient(to top, transparent 10%, var(--brand-accent));
    opacity: 0;
    transition: transform .6s var(--spring), opacity .3s ease;
    pointer-events: none;
}
.dial.has-detail .dial-hand { opacity: .5; }

/* --- Hub --- */
.dial-hub {
    position: relative;
    z-index: 3;
    width: var(--hub);
    height: var(--hub);
    border-radius: 50%;
    background: var(--surface-card);
    border: 1px solid var(--border-subtle);
    box-shadow: 0 10px 34px -12px rgba(15,23,42,.22);
    display: grid;
    place-items: center;
    text-align: center;
    padding: calc(var(--dial-size) * .035);
    transition: transform .7s var(--spring), box-shadow .5s ease;
}
.dial:hover .dial-hub {
    transform: scale(.94);
    box-shadow: 0 6px 20px -10px rgba(15,23,42,.18);
}

.hub-idle, .hub-detail {
    grid-area: 1 / 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .35rem;
    max-width: 100%;
    transition: opacity .28s ease, transform .35s var(--ease-out);
}
.hub-detail { opacity: 0; transform: scale(.9) translateY(6px); pointer-events: none; }
.dial.has-detail .hub-idle { opacity: 0; transform: scale(.9) translateY(-6px); }
.dial.has-detail .hub-detail { opacity: 1; transform: none; pointer-events: auto; }

.hub-idle img { height: calc(var(--dial-size) * .04); opacity: .9; }
.hub-clock {
    font-family: var(--font-mono);
    font-size: calc(var(--dial-size) * .075);
    font-weight: 600;
    letter-spacing: -.02em;
    color: var(--text-main);
}
.hub-date { font-size: calc(var(--dial-size) * .018); color: var(--text-soft); }
.hub-hint {
    margin-top: .2rem;
    font-size: calc(var(--dial-size) * .018);
    color: var(--text-muted);
    display: inline-flex; align-items: center; gap: 4px;
    white-space: nowrap;
}
.hub-hint .material-symbols-outlined { font-size: calc(var(--dial-size) * .024); }

.hub-detail .d-icon {
    width: calc(var(--dial-size) * .072); height: calc(var(--dial-size) * .072);
    border-radius: 9px;
    background: var(--surface-subtle);
    border: 1px solid var(--border-subtle);
    display: grid; place-items: center;
    font-size: calc(var(--dial-size) * .04); line-height: 1;
    overflow: hidden;
}
.hub-detail .d-icon img {
    max-width: calc(var(--dial-size) * .046); max-height: calc(var(--dial-size) * .046);
    object-fit: contain;
}
.hub-detail .d-name {
    font-size: calc(var(--dial-size) * .023); font-weight: 600; line-height: 1.25;
    color: var(--text-main);
}
.hub-detail .d-desc {
    font-size: calc(var(--dial-size) * .0185); color: var(--text-muted); line-height: 1.35;
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.hub-detail .d-open {
    margin-top: .15rem;
    font-size: calc(var(--dial-size) * .019); font-weight: 600; color: var(--brand-accent);
    display: inline-flex; align-items: center; gap: 3px;
}
.hub-detail .d-open .material-symbols-outlined { font-size: calc(var(--dial-size) * .024); }

/* --- Markers --- */
.marker {
    position: absolute;
    top: 50%; left: 50%;
    width: var(--marker); height: var(--marker);
    margin: calc(var(--marker) / -2) 0 0 calc(var(--marker) / -2);
    border-radius: 50%;
    cursor: pointer;
    z-index: 2;
    /* --phi sweeps the ring round as it blooms; the third rotate cancels
       it out so every icon stays upright during the sweep. */
    transform:
        rotate(calc(var(--a) + var(--phi)))
        translateY(calc(var(--r) * -1))
        rotate(calc(-1 * var(--a) - var(--phi)))
        scale(var(--s));
    transition: transform .78s var(--spring);
    transition-delay: var(--d);
}

.marker-dot {
    position: absolute; inset: 0;
    border-radius: 50%;
    background: var(--border-strong);
    transition: opacity .3s ease;
}
.dial:hover .marker-dot { opacity: 0; }

.marker-face {
    position: absolute; inset: 0;
    border-radius: 50%;
    background: var(--surface-card);
    border: 1px solid var(--border-subtle);
    box-shadow: 0 3px 10px -3px rgba(15,23,42,.14);
    display: grid; place-items: center;
    font-size: calc(var(--marker) * .46); line-height: 1;
    overflow: hidden;
    opacity: 0;
    transform: scale(var(--pop, 1));
    transition: opacity .32s ease .14s, transform .26s var(--spring),
                border-color .2s ease, box-shadow .25s ease;
}
.dial:hover .marker-face { opacity: 1; }
.marker-face img {
    max-width: calc(var(--marker) * .56); max-height: calc(var(--marker) * .56);
    object-fit: contain;
}

.marker:hover .marker-face, .marker.active .marker-face {
    --pop: 1.18;
    border-color: var(--brand-accent);
    box-shadow: 0 0 0 4px rgba(2,132,199,.14), 0 8px 20px -6px rgba(15,23,42,.24);
}

.marker-pip {
    position: absolute;
    right: 1px; bottom: 1px;
    width: calc(var(--marker) * .2); height: calc(var(--marker) * .2);
    min-width: 8px; min-height: 8px;
    border-radius: 50%;
    border: 2px solid var(--surface-card);
    opacity: 0;
    transition: opacity .3s ease .14s;
}
.dial:hover .marker-pip { opacity: 1; }
.pip-active { background: var(--status-active-dot); }
.pip-new { background: var(--status-new-dot); }
.pip-beta { background: var(--status-beta-dot); }
.pip-comingsoon { background: var(--status-review-dot); }
.pip-local { background: var(--status-local-dot); }

/* --- Hint + legend --- */
.dial-hint {
    display: none;
    font-size: 12.5px;
    color: var(--text-muted);
    text-align: center;
}
.dial-legend {
    display: flex; flex-wrap: wrap; gap: .5rem 1rem;
    justify-content: center;
    font-size: 11.5px; color: var(--text-muted);
}
.dial-legend span { display: inline-flex; align-items: center; gap: 5px; }
.dial-legend i { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }

/* --- Bottom sheet (phones) --- */
.sheet-scrim {
    position: fixed; inset: 0;
    background: rgba(15,23,42,.45);
    opacity: 0; pointer-events: none;
    transition: opacity .3s ease;
    z-index: 120;
}
.app-sheet {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 130;
    background: var(--surface-card);
    border-top-left-radius: 18px;
    border-top-right-radius: 18px;
    box-shadow: 0 -12px 40px -12px rgba(15,23,42,.3);
    padding: .75rem 1.25rem calc(1.5rem + env(safe-area-inset-bottom));
    transform: translateY(102%);
    transition: transform .45s var(--ease-out, cubic-bezier(.22,1,.36,1));
}
body.sheet-open .app-sheet { transform: none; }
body.sheet-open .sheet-scrim { opacity: 1; pointer-events: auto; }

.sheet-grip {
    width: 40px; height: 4px; border-radius: 99px;
    background: var(--border-strong);
    margin: 0 auto .875rem;
}
.sheet-head { display: flex; align-items: center; gap: .75rem; }
.sheet-icon {
    width: 48px; height: 48px; border-radius: 10px;
    background: var(--surface-subtle); border: 1px solid var(--border-subtle);
    display: grid; place-items: center; font-size: 26px; line-height: 1;
    flex: none; overflow: hidden;
}
.sheet-icon img { max-width: 30px; max-height: 30px; object-fit: contain; }
.sheet-name { font-size: 15px; font-weight: 600; line-height: 1.25; color: var(--text-main); }
.sheet-desc { font-size: 13px; color: var(--text-muted); margin-top: .625rem; line-height: 1.45; }
.sheet-cta {
    display: flex; align-items: center; justify-content: center; gap: .375rem;
    margin-top: 1rem; width: 100%;
    background: var(--text-main); color: var(--surface-card);
    font-size: 14px; font-weight: 600;
    padding: .75rem; border-radius: 10px; border: 0;
    font-family: inherit; cursor: pointer;
}
.sheet-cta[disabled] { background: var(--surface-subtle); color: var(--text-soft); }

/* --- View toggle --- */
.view-toggle {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    background: var(--surface-subtle);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    padding: .25rem;
}
.view-btn {
    display: inline-flex; align-items: center; gap: .3rem;
    padding: .375rem .75rem;
    border-radius: var(--radius-md);
    font-size: .8125rem; font-weight: 500;
    font-family: inherit;
    color: var(--text-muted);
    background: transparent;
    border: 0; cursor: pointer;
    transition: var(--transition-smooth);
}
.view-btn:hover { color: var(--text-main); }
.view-btn.active {
    background: var(--surface-card);
    color: var(--text-main);
    box-shadow: var(--shadow-sm);
}
.view-btn .material-symbols-outlined { font-size: 17px; }

/* ================= PHONE ================= */
@media (max-width: 640px) {
    .dial-view {
        --dial-size: min(calc(100vw - 2.5rem), 54vh, 420px);
        --hub: calc(var(--dial-size) * 0.38);
        --marker: calc(var(--dial-size) * 0.125);
        --r-open: calc(var(--dial-size) * 0.415);
        --r-idle: calc(var(--dial-size) * 0.26);
        gap: .75rem;
    }
    .hub-clock { font-size: calc(var(--dial-size) * .115); }
    .hub-date { font-size: calc(var(--dial-size) * .03); }
    /* the hub is too small for the hint and the detail panel on phones */
    .hub-hint, .hub-detail { display: none; }
    .dial-hint { display: block; }
    .dial.has-detail .hub-idle { opacity: 1; transform: none; }
    .dial-legend { font-size: 10.5px; gap: .375rem .75rem; }
}

/* Touch devices have no hover: show the apps straight away */
@media (hover: none) {
    .dial { --r: var(--r-open); --s: 1; --phi: 0deg; }
    .dial .marker-dot { opacity: 0; }
    .dial .marker-face, .dial .marker-pip { opacity: 1; }
    .dial .dial-ring { opacity: .45; }
    .dial .dial-glow { opacity: 1; }
    .dial .dial-hub { transform: scale(.94); }
}

@media (prefers-reduced-motion: reduce) {
    .dial, .dial *, .app-sheet, .sheet-scrim {
        animation-duration: .01ms !important;
        transition-duration: .01ms !important;
    }
}