/* =========================================================
   UTP Mission Control V2
   ---------------------------------------------------------
   The hero window and the 7-workspace grid share ONE stage.
   Clicking the hero replaces it with the workspace grid.
   ========================================================= */

.utp-mission-control {
    min-height: 100%;
    padding: 22px 16px 28px;
    box-sizing: border-box;
    color: #182234;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

.utp-window-header {
    width: 100%;
    max-width: 1326px;
    margin: 0 auto 18px;
    text-align: center;
}

.utp-window-title {
    margin: 0 0 10px;
    font-size: clamp(40px, 3.6vw, 55px);
    line-height: 1;
    letter-spacing: -.018em;
    font-weight: 900;
    color: #fff;
    text-shadow: 0 8px 28px rgba(0,0,0,.48);
}

.utp-window-subtitle {
    max-width: 680px;
    margin: 0 auto;
    font-size: 18px;
    line-height: 1.45;
    font-weight: 500;
    color: rgba(255,255,255,.82);
    text-shadow: 0 4px 18px rgba(0,0,0,.42);
}

/* One fixed visual stage: hero OR workspace grid. */
.utp-mission-control__hero,
.utp-mission-control__workspaces {
    width: 100%;
    min-height: 430px;
    box-sizing: border-box;
}

.utp-mission-control__hero {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    opacity: 1;
    transform: translateY(0) scale(1);
    transition:
        opacity .24s ease,
        transform .30s ease,
        visibility 0s linear 0s;
}

.utp-mission-control__hero .utp-workspace-mark--hero {
    cursor: pointer;
    transition:
        transform .22s ease,
        filter .22s ease,
        opacity .22s ease;
}

.utp-mission-control__hero .utp-workspace-mark--hero:hover {
    transform: translateY(-3px) scale(1.012);
    filter: drop-shadow(0 18px 30px rgba(0,0,0,.28));
}

.utp-mission-control__explore {
    display: block;
    margin-top: 18px;
    text-align: center;
    cursor: pointer;
    color: rgba(255,255,255,.82);
    transition: color .2s ease, transform .2s ease;
}

.utp-mission-control__explore::after {
    content: "↓";
    display: inline-block;
    margin-left: 10px;
    color: #f5793b;
    font-size: .9em;
    font-weight: 700;
}

.utp-mission-control__explore:hover {
    color: #fff;
    transform: translateY(2px);
}

/* Closed state: workspaces occupy no layout height. */
.utp-mission-control__workspaces {
    display: none;
    opacity: 0;
    transform: translateY(16px) scale(.985);
}

/* Open state: hero is gone; grid takes exactly its place. */
.utp-mission-control.is-workspaces-open .utp-mission-control__hero {
    display: none;
}

.utp-mission-control.is-workspaces-open .utp-mission-control__workspaces {
    display: block;
    min-height: 430px;
    margin: 0;
    overflow: visible;
    opacity: 1;
    transform: translateY(0) scale(1);
    animation: utpMissionGridIn .32s ease both;
}

@keyframes utpMissionGridIn {
    from {
        opacity: 0;
        transform: translateY(14px) scale(.985);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.utp-mission-control__workspace-header {
    margin: 0 0 18px;
    text-align: center;
}

.utp-mission-control__workspace-title {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    color: rgba(255,255,255,.78);
}

.utp-mission-control__workspace-title strong {
    color: #fff;
    font-weight: 800;
}

/* 2 + 3 + 2, alphabetical order supplied by MissionControl.php. */
.utp-mission-grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0,1fr));
    gap: 18px;
    width: 100%;
    max-width: 1260px;
    margin: 0 auto;
    align-items: stretch;
}

.utp-mission-grid > .utp-mission-card:nth-child(1) { grid-column: 2 / span 2; }
.utp-mission-grid > .utp-mission-card:nth-child(2) { grid-column: 4 / span 2; }
.utp-mission-grid > .utp-mission-card:nth-child(3) { grid-column: 1 / span 2; }
.utp-mission-grid > .utp-mission-card:nth-child(4) { grid-column: 3 / span 2; }
.utp-mission-grid > .utp-mission-card:nth-child(5) { grid-column: 5 / span 2; }
.utp-mission-grid > .utp-mission-card:nth-child(6) { grid-column: 2 / span 2; }
.utp-mission-grid > .utp-mission-card:nth-child(7) { grid-column: 4 / span 2; }

.utp-mission-card,
.utp-mission-card:visited {
    min-height: 124px;
    padding: 21px 23px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    border: 1px solid rgba(255,255,255,.22);
    border-radius: 20px;
    color: #fff;
    text-decoration: none !important;
    background:
        linear-gradient(135deg, rgba(255,255,255,.09), rgba(255,255,255,.022)),
        rgba(9,18,34,.48);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    box-shadow:
        0 20px 55px rgba(0,0,0,.30),
        inset 0 1px 0 rgba(255,255,255,.13),
        0 0 0 1px rgba(245,121,59,.07);
    transition:
        transform .18s ease,
        border-color .18s ease,
        background .18s ease,
        box-shadow .18s ease;
}

.utp-mission-card:hover {
    transform: translateY(-3px);
    border-color: rgba(245,121,59,.72);
    background:
        linear-gradient(135deg, rgba(245,121,59,.18), rgba(255,255,255,.035)),
        rgba(10,20,38,.56);
    box-shadow:
        0 26px 68px rgba(0,0,0,.40),
        0 0 30px rgba(245,121,59,.15),
        inset 0 1px 0 rgba(255,255,255,.16);
}

.utp-mission-card,
.utp-mission-card * {
    text-decoration: none !important;
}

.utp-mission-card__main {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 17px;
}

.utp-mission-card__icon {
    width: 56px;
    height: 56px;
    min-width: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(245,121,59,.90);
    border-radius: 14px;
    background:
        linear-gradient(135deg, rgba(245,121,59,.18), rgba(255,255,255,.03)),
        rgba(3,7,18,.38);
    box-shadow:
        0 0 20px rgba(245,121,59,.14),
        inset 0 1px 0 rgba(255,255,255,.13);
}

.utp-mission-card__icon-svg {
    display: block;
    width: 25px;
    height: 25px;
    background-color: currentColor;
    -webkit-mask: var(--utp-mission-icon) center / contain no-repeat;
    mask: var(--utp-mission-icon) center / contain no-repeat;
}

.utp-mission-card__copy {
    min-width: 0;
}

.utp-mission-card__copy h3 {
    margin: 0 0 5px;
    font-size: 19px;
    line-height: 1.1;
    font-weight: 850;
    color: #fff;
    text-shadow: 0 4px 14px rgba(0,0,0,.35);
}

.utp-mission-card__copy p {
    max-width: 310px;
    margin: 0;
    font-size: 12px;
    line-height: 1.38;
    font-weight: 500;
    color: rgba(255,255,255,.64);
}

.utp-mission-card__arrow {
    flex: 0 0 auto;
    font-size: 25px;
    line-height: 1;
    color: #f5793b;
    text-shadow: 0 0 16px rgba(245,121,59,.30);
}

.utp-mission-card__brand {
    margin-right: 6px;
    color: #ff7a2f;
}

/* Existing workspace launcher used from workspace headers. */
.utp-workspace-launcher {
    width: calc(100% - 48px);
    max-width: 1180px;
    margin: 24px auto 4px;
    padding: 24px;
    box-sizing: border-box;
    border: 1px solid rgba(255,255,255,.16);
    border-radius: 26px;
    background:
        radial-gradient(circle at 50% 0%, rgba(245,121,59,.10), transparent 48%),
        linear-gradient(145deg, rgba(255,255,255,.085), rgba(255,255,255,.018)),
        rgba(7,15,29,.70);
    backdrop-filter: blur(22px);
    -webkit-backdrop-filter: blur(22px);
    box-shadow:
        0 30px 80px rgba(0,0,0,.38),
        inset 0 1px 0 rgba(255,255,255,.15),
        0 0 0 1px rgba(245,121,59,.045);
    transform-origin: top center;
    animation: utpWorkspaceLauncherOpen .34s ease both;
}

.utp-workspace-launcher[hidden] { display: none; }

@keyframes utpWorkspaceLauncherOpen {
    from { opacity: 0; transform: translateY(-10px) scale(.985); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

.utp-workspace-launcher__heading {
    margin: 0 0 18px;
    text-align: center;
}

.utp-workspace-launcher__eyebrow {
    display: inline-block;
    font-size: 13px;
    line-height: 1;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: rgba(255,255,255,.68);
}

/* Tablet */
@media (min-width: 768px) and (max-width: 1024px) {
    .utp-mission-control {
        padding: 10px 18px 34px;
    }

    .utp-window-header {
        margin-bottom: 18px;
    }

    .utp-window-title {
        margin-bottom: 8px;
        font-size: clamp(34px,5vw,44px);
    }

    .utp-window-subtitle {
        font-size: 16px;
    }

    .utp-mission-control__hero,
    .utp-mission-control__workspaces,
    .utp-mission-control.is-workspaces-open .utp-mission-control__workspaces {
        min-height: 470px;
    }

    .utp-mission-control .utp-workspace-mark--hero {
        width: min(52vw,360px);
        max-width: 360px;
    }

    .utp-mission-grid {
        grid-template-columns: repeat(2,minmax(0,1fr));
        max-width: 760px;
    }

    .utp-mission-grid > .utp-mission-card:nth-child(n) {
        grid-column: auto;
    }

    .utp-mission-grid > .utp-mission-card:nth-child(7) {
        grid-column: 1 / -1;
        width: calc(50% - 7px);
        justify-self: center;
    }

    .utp-mission-card,
    .utp-mission-card:visited {
        min-height: 96px;
        padding: 15px 17px;
    }
}

/* Short desktop: everything still replaces the hero without page expansion. */
@media (max-height: 780px) and (min-width: 1025px) {
    .utp-mission-control {
        padding-top: 0;
        padding-bottom: 10px;
    }

    .utp-window-header {
        margin-bottom: 14px;
    }

    .utp-window-title {
        margin-bottom: 7px;
        font-size: clamp(36px,3.2vw,50px);
    }

    .utp-window-subtitle {
        font-size: 16px;
    }

    .utp-mission-control__hero,
    .utp-mission-control__workspaces,
    .utp-mission-control.is-workspaces-open .utp-mission-control__workspaces {
        min-height: 365px;
    }

    .utp-mission-control__workspace-header {
        margin-bottom: 12px;
    }

    .utp-mission-grid {
        gap: 9px;
    }

    .utp-mission-card,
    .utp-mission-card:visited {
        min-height: 82px;
        padding: 11px 15px;
        border-radius: 17px;
    }

    .utp-mission-card__icon {
        width: 40px;
        height: 40px;
        min-width: 40px;
        border-radius: 12px;
    }

    .utp-mission-card__copy h3 {
        margin-bottom: 3px;
        font-size: 15px;
    }

    .utp-mission-card__copy p {
        font-size: 10px;
        line-height: 1.28;
    }
}

@media (prefers-reduced-motion: reduce) {
    .utp-mission-control__hero,
    .utp-mission-control__workspaces,
    .utp-mission-card {
        transition: none;
        animation: none !important;
    }
}


/* Mission Control V2 final polish:
   the workspace cards themselves are the statement; no duplicate heading. */
.utp-mission-control.is-workspaces-open .utp-mission-grid {
    padding-top: 4px;
}

@media (min-width: 1025px) {
    .utp-mission-control.is-workspaces-open .utp-mission-control__workspaces {
        padding-top: 0;
    }
}

/* Preserve the larger presence even on short desktop screens,
   but keep the complete 2+3+2 composition inside the viewport. */
@media (max-height: 780px) and (min-width: 1025px) {
    .utp-mission-grid {
        max-width: 1190px;
        gap: 11px;
    }

    .utp-mission-card,
    .utp-mission-card:visited {
        min-height: 98px;
        padding: 14px 18px;
    }

    .utp-mission-card__icon {
        width: 46px;
        height: 46px;
        min-width: 46px;
    }

    .utp-mission-card__copy h3 {
        font-size: 17px;
    }

    .utp-mission-card__copy p {
        font-size: 10.5px;
        line-height: 1.3;
    }
}


/* Final lock: the duplicate workspace instruction is gone, but its vertical
   rhythm is intentionally preserved so the cards do not climb into the hero. */
.utp-mission-control.is-workspaces-open .utp-mission-grid {
    padding-top: 30px;
}

/* =========================================================
   UMA Foundation — Mission Control desk
   Signed-in users land on a calm 1 + 3 personal work surface.
   ========================================================= */

.utp-mission-control.is-personal {
    padding-top: 22px;
}

.utp-mission-desk {
    width: min(1010px, calc(100% - 40px));
    min-height: 370px;
    margin: 2px auto 0;
    display: grid;
    grid-template-columns: minmax(0, 2.05fr) minmax(270px, .95fr);
    gap: 12px;
}

.utp-mission-desk__attention,
.utp-mission-desk__continue-slot {
    border-radius: 20px;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}

/* Attention is the primary Mission Control work surface. */
.utp-mission-desk__attention {
    min-height: 370px;
    border: 1px solid rgba(255,255,255,.22);
    background:
        linear-gradient(135deg, rgba(27,35,51,.94), rgba(13,22,36,.92)),
        rgba(15,24,39,.94);
    box-shadow:
        0 20px 52px rgba(0,0,0,.28),
        inset 0 1px 0 rgba(255,255,255,.055),
        0 0 0 1px rgba(245,121,59,.025);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 30px;
    box-sizing: border-box;
}

.utp-mission-desk__continue {
    min-width: 0;
    display: grid;
    grid-template-rows: repeat(3, 1fr);
    gap: 12px;
}

/* Continue slots are secondary: a slightly lighter slate surface than Attention. */
.utp-mission-desk__continue-slot {
    min-height: 0;
    border: 1px solid rgba(255,255,255,.20);
    background:
        linear-gradient(135deg, rgba(38,48,65,.92), rgba(24,34,50,.90)),
        rgba(28,38,54,.92);
    box-shadow:
        0 14px 38px rgba(0,0,0,.24),
        inset 0 1px 0 rgba(255,255,255,.05);
}

.utp-mission-desk__empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 8px;
    color: rgba(255,255,255,.64);
}

.utp-mission-desk__empty strong {
    font-size: clamp(24px, 2.1vw, 31px);
    line-height: 1.15;
    color: #fff;
    font-weight: 750;
    letter-spacing: -.02em;
}

.utp-mission-desk__empty span:not(.utp-mission-desk__coffee) {
    font-size: 15px;
}

.utp-mission-desk__coffee {
    margin-top: 9px;
    font-size: 25px;
    opacity: .88;
}

/* Public UMA is the access point; Explore remains the guest product tour. */
.utp-mission-control.is-public .utp-mission-control__hero .utp-workspace-mark--hero {
    cursor: pointer;
}

@media (max-width: 900px) {
    .utp-mission-desk {
        grid-template-columns: 1fr;
    }

    .utp-mission-desk__continue {
        grid-template-rows: repeat(3, minmax(118px, auto));
    }
}


/* UMA single-surface Mission Control experiment. */
.utp-mission-desk--single {
    display: block;
    width: min(1010px, calc(100% - 40px));
    min-height: 370px;
}
.utp-mission-desk--single .utp-mission-desk__attention {
    width: 100%;
    min-height: 370px;
}

/* =========================================================
   UMA canonical surface reconciliation experiment
   Same four-field visual language as the public UMA portal,
   expanded horizontally after authentication.
   ========================================================= */
.utp-mission-uma-surface {
    position: relative;
    isolation: isolate;
    width: min(930px, calc(100% - 40px));
    min-height: 350px;
    margin: 2px auto 0;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.22);
    border-radius: 28px;
    background:
        radial-gradient(circle at 50% 42%, rgba(255,255,255,.075), transparent 58%),
        linear-gradient(145deg, rgba(255,255,255,.085), rgba(255,255,255,.018)),
        rgba(7,15,29,.58);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    box-shadow:
        0 38px 110px rgba(0,0,0,.46),
        inset 0 1px 0 rgba(255,255,255,.18),
        inset 0 -1px 0 rgba(255,255,255,.035),
        0 0 0 1px rgba(245,121,59,.055);
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
}

.utp-mission-uma-surface__grid {
    position: absolute;
    inset: 0;
    z-index: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0,1fr));
    grid-template-rows: repeat(2, minmax(0,1fr));
    pointer-events: none;
}

.utp-mission-uma-surface__cell {
    position: relative;
    background:
        radial-gradient(circle at center, rgba(255,255,255,.07), rgba(255,255,255,.01) 60%, transparent 80%),
        linear-gradient(145deg, rgba(255,255,255,.055), rgba(255,255,255,.012));
}

.utp-mission-uma-surface__cell:nth-child(1),
.utp-mission-uma-surface__cell:nth-child(2) {
    border-bottom: 1px solid rgba(255,255,255,.075);
}

.utp-mission-uma-surface__cell:nth-child(1),
.utp-mission-uma-surface__cell:nth-child(3) {
    border-right: 1px solid rgba(255,255,255,.075);
}

.utp-mission-uma-surface__cell:nth-child(2),
.utp-mission-uma-surface__cell:nth-child(3) {
    background:
        radial-gradient(circle at center, rgba(245,121,59,.13), rgba(245,121,59,.03) 56%, transparent 76%),
        linear-gradient(145deg, rgba(245,121,59,.06), rgba(255,255,255,.008));
}

.utp-mission-uma-surface .utp-mission-desk__empty {
    position: relative;
    z-index: 1;
    padding: 28px;
}

@media (max-width: 900px) {
    .utp-mission-uma-surface {
        width: min(88vw, 760px);
        min-height: 330px;
        border-radius: 26px;
    }
}

/* UMA live briefing visual prototype — presentation only. */
.utp-uma-briefing{position:relative;z-index:2;width:min(760px,calc(100% - 72px));color:rgba(255,255,255,.78)}
.utp-uma-briefing__viewport{height:230px;overflow:hidden;mask-image:linear-gradient(to bottom,transparent 0,#000 11%,#000 89%,transparent 100%);-webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 11%,#000 89%,transparent 100%)}
.utp-uma-briefing__track{padding:22px 0;will-change:transform}
.utp-uma-briefing__track.is-rolling{animation:utpUmaBriefingRoll var(--utp-briefing-duration,28s) linear infinite alternate}
.utp-uma-briefing:hover .utp-uma-briefing__track.is-rolling{animation-play-state:paused}
@keyframes utpUmaBriefingRoll{from{transform:translateY(0)}to{transform:translateY(var(--utp-briefing-travel,0px))}}
.utp-uma-briefing__row{display:grid;grid-template-columns:22px minmax(0,1fr) auto;align-items:center;gap:7px;min-height:43px;padding:3px 8px;border-radius:10px;font-size:15px;line-height:1.42;letter-spacing:-.005em;transition:background .18s ease,color .18s ease,opacity .22s ease}
.utp-uma-briefing__row:hover{background:rgba(255,255,255,.045);color:#fff}
.utp-uma-briefing__dash{align-self:start;padding-top:10px;color:rgba(245,121,59,.82);font-weight:700}
.utp-uma-briefing__text strong{color:rgba(255,255,255,.96);font-weight:680}
.utp-uma-briefing__actions{display:flex;gap:4px;opacity:0;transform:translateX(5px);transition:opacity .16s ease,transform .16s ease}
.utp-uma-briefing__row:hover .utp-uma-briefing__actions,.utp-uma-briefing__row:focus-within .utp-uma-briefing__actions{opacity:1;transform:none}
.utp-uma-briefing__action{appearance:none;border:1px solid rgba(255,255,255,.14);border-radius:999px;background:rgba(7,15,29,.28);color:rgba(255,255,255,.66);font:inherit;font-size:11px;line-height:1;padding:6px 9px;cursor:pointer}
.utp-uma-briefing__action:hover,.utp-uma-briefing__action:focus-visible{border-color:rgba(245,121,59,.42);color:#fff;background:rgba(245,121,59,.09);outline:none}
.utp-uma-briefing__row.is-leaving{opacity:0;transform:translateY(-3px)}
.utp-uma-briefing__calm{display:flex;min-height:230px;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:8px;color:rgba(255,255,255,.64)}
.utp-uma-briefing__calm[hidden]{display:none}
.utp-uma-briefing__calm strong{font-size:clamp(24px,2.1vw,31px);line-height:1.15;color:#fff;font-weight:750;letter-spacing:-.02em}
.utp-uma-briefing__calm>span:not(.utp-mission-desk__coffee){font-size:15px}
@media (prefers-reduced-motion:reduce){.utp-uma-briefing__track.is-rolling{animation:none}.utp-uma-briefing__viewport{overflow-y:auto;mask-image:none;-webkit-mask-image:none}}

/* UMA Live Pilot V0 — calm operational briefing. */
.utp-uma-briefing__pilot{display:block;margin:0 0 2px 30px;font-size:9px;font-weight:700;letter-spacing:.16em;color:rgba(255,255,255,.28)}
.utp-uma-briefing__row:hover{background:transparent}
.utp-uma-briefing__text strong{font-weight:600;color:rgba(255,255,255,.9)}

/* UMA attention hierarchy: one calm surface, two levels of information. */
.utp-uma-briefing__lane{position:relative}
.utp-uma-briefing__lane[hidden]{display:none}
.utp-uma-briefing__lane--attention{margin-bottom:7px}
.utp-uma-briefing__lane--awareness{padding-top:5px;border-top:1px solid rgba(255,255,255,.075)}
.utp-uma-briefing__viewport--attention{height:138px}
.utp-uma-briefing__viewport--awareness{height:76px}
.utp-uma-briefing__lane .utp-uma-briefing__track{padding:4px 0}
.utp-uma-briefing__lane--attention .utp-uma-briefing__pilot{color:rgba(245,121,59,.72)}
.utp-uma-briefing__row--attention{color:rgba(255,255,255,.86)}
.utp-uma-briefing__row--attention .utp-uma-briefing__dash{color:rgba(245,121,59,.96)}
.utp-uma-briefing__row--awareness{min-height:34px;color:rgba(255,255,255,.56);font-size:13px}
.utp-uma-briefing__row--awareness .utp-uma-briefing__dash{padding-top:7px;color:rgba(245,121,59,.5)}
.utp-uma-briefing__row--awareness .utp-uma-briefing__actions{display:none}