/* ===== qNet Hub — app-specific styles =====
 * Base reset, tokens, layout, theming: qnet-shell.css (from qNet.Web.Shell)
 * This file: Hub-specific components only, fully retokenized.
 */

/* Hub-specific token */
:root {
    --crimson: #9b1c3a;
    --crimson-glow: rgba(155,28,58,.35);
}

/* ---------- landing (public hero) ---------- */
.hub-landing {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    min-height: calc(100vh - 60px);
    padding: clamp(3rem, 8vw, 7rem) clamp(1rem, 6vw, 3rem);
    text-align: center;
    position: relative; overflow: hidden;
}

/* Court Seal */
.court-seal {
    position: relative;
    width: clamp(120px, 20vw, 200px);
    height: clamp(120px, 20vw, 200px);
    margin: 0 auto 3rem;
    animation: seal-breathe 6s ease-in-out infinite;
    /* currentColor cascades into SVG stroke/fill — lets the star use --accent */
    color: var(--accent);
}
/* Secondary ring element uses accent-2 */
.court-seal .seal-ring-secondary {
    color: var(--accent-2);
}
.court-seal svg {
    width: 100%; height: 100%;
    filter:
        drop-shadow(0 0 18px color-mix(in srgb, var(--accent) 45%, transparent))
        drop-shadow(0 0 40px var(--crimson-glow));
    animation: seal-enter 1.2s cubic-bezier(.16,1,.3,1) both;
}
@keyframes seal-breathe {
    0%, 100% {
        filter:
            drop-shadow(0 0 18px color-mix(in srgb, var(--accent) 45%, transparent))
            drop-shadow(0 0 40px var(--crimson-glow));
    }
    50% {
        filter:
            drop-shadow(0 0 26px color-mix(in srgb, var(--accent) 65%, transparent))
            drop-shadow(0 0 60px rgba(155,28,58,.5));
    }
}
@keyframes seal-enter {
    from { opacity: 0; transform: scale(.88) rotate(-4deg); }
    to   { opacity: 1; transform: scale(1)  rotate(0deg); }
}

.hero-eyebrow {
    font-family: var(--mono); font-size: .7rem; letter-spacing: .22em; text-transform: uppercase;
    color: var(--accent); opacity: .7; margin: 0 0 .9rem;
    animation: fade-up .8s .15s cubic-bezier(.16,1,.3,1) both;
}
.hero-title {
    font-family: var(--serif); font-weight: 400;
    font-size: clamp(2.4rem, 6vw, 4.8rem);
    line-height: 1.08; letter-spacing: -.01em;
    margin: 0 0 1.2rem;
    background: linear-gradient(160deg, #fff 20%, var(--accent-bright) 55%, var(--accent-2) 110%);
    -webkit-background-clip: text; background-clip: text; color: transparent;
    animation: fade-up .9s .25s cubic-bezier(.16,1,.3,1) both;
}
.hero-sub {
    max-width: 52ch; margin: 0 auto 2.4rem;
    color: var(--ink-dim); font-size: clamp(.95rem, 1.8vw, 1.1rem); line-height: 1.65;
    animation: fade-up .9s .35s cubic-bezier(.16,1,.3,1) both;
}
.hero-enter {
    display: inline-flex; align-items: center; gap: .6rem;
    font-family: var(--serif); font-size: 1.05rem; letter-spacing: .03em;
    color: var(--void-0);
    background: linear-gradient(135deg, var(--accent) 0%, color-mix(in srgb, var(--accent) 70%, black) 100%);
    border: none; border-radius: 12px;
    padding: .75rem 2rem;
    cursor: pointer; text-decoration: none;
    box-shadow: 0 8px 28px -10px color-mix(in srgb, var(--accent) 55%, transparent);
    transition: transform .18s ease, box-shadow .18s ease;
    animation: fade-up .9s .45s cubic-bezier(.16,1,.3,1) both;
}
.hero-enter:hover {
    color: var(--void-0);
    transform: translateY(-3px);
    box-shadow:
        0 0 0 3px color-mix(in srgb, var(--accent) 25%, transparent),
        0 16px 40px -12px color-mix(in srgb, var(--accent) 65%, transparent);
}
.hero-enter:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

@keyframes fade-up {
    from { opacity: 0; transform: translateY(18px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ---------- dashboard (authenticated /hub) ---------- */
.hub-wrap {
    max-width: 1000px; margin: 0 auto;
    padding: clamp(2rem, 5vw, 3.5rem) clamp(1rem, 4vw, 2rem);
}

.hub-identity {
    display: flex; align-items: flex-start; gap: 1.4rem;
    padding: 1.6rem 1.8rem;
    background: linear-gradient(135deg, var(--void-2), var(--void-1));
    border: 1px solid var(--line); border-radius: 18px;
    margin-bottom: 2.5rem;
}
.identity-glyph {
    flex: 0 0 auto; width: 52px; height: 52px;
    display: flex; align-items: center; justify-content: center;
    background: radial-gradient(circle at center, color-mix(in srgb, var(--accent) 12%, transparent), transparent 70%);
    border: 1px solid color-mix(in srgb, var(--accent) 28%, transparent); border-radius: 14px;
    font-size: 1.6rem; line-height: 1;
    color: var(--accent);
    filter: drop-shadow(0 0 8px color-mix(in srgb, var(--accent) 40%, transparent));
}
.identity-body { flex: 1 1 auto; }
.identity-name {
    font-family: var(--serif); font-size: clamp(1.5rem, 3vw, 2rem);
    line-height: 1.15; margin: 0 0 .4rem;
    display: flex; align-items: baseline; flex-wrap: wrap; gap: .4rem;
}
.identity-name .title-affix { font-size: .82rem; font-style: italic; color: var(--accent); opacity: .85; font-weight: 400; }
.identity-name .display-name { color: var(--ink); font-weight: 400; }

/* ---------- section headings ---------- */
.hub-section-label {
    font-family: var(--mono); font-size: .66rem; letter-spacing: .2em; text-transform: uppercase;
    color: var(--ink-faint); margin: 0 0 1rem;
}

/* ---------- app launcher ---------- */
.launcher { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 1rem; margin-bottom: 2.5rem; }

.launcher-card {
    display: flex; flex-direction: column; gap: .35rem;
    padding: 1.2rem 1.3rem;
    background: linear-gradient(160deg, var(--void-2), var(--void-1));
    border: 1px solid var(--line); border-radius: 16px;
    color: var(--ink); text-decoration: none;
    transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.launcher-card:hover {
    color: var(--ink);
    border-color: var(--line-strong);
    transform: translateY(-3px);
    box-shadow: 0 18px 40px -20px color-mix(in srgb, var(--accent-2) 30%, transparent);
}
.launcher-card:focus-visible { outline: 2px solid var(--accent-2); outline-offset: 3px; }
.card-icon { font-size: 1.5rem; line-height: 1; margin-bottom: .2rem; }
.card-title { font-family: var(--serif); font-size: 1.05rem; color: var(--ink); font-weight: 400; }
.card-sub { font-family: var(--mono); font-size: .67rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-faint); }

/* ---------- presence placeholder ---------- */
.presence-panel {
    padding: 1.5rem 1.8rem;
    background: linear-gradient(135deg, var(--void-2), var(--void-1));
    border: 1px solid var(--line); border-radius: 18px;
    display: flex; align-items: center; gap: 1.2rem;
}
.presence-dot {
    flex: 0 0 auto; width: 10px; height: 10px; border-radius: 50%;
    background: var(--ink-faint); opacity: .4;
}
.presence-text { color: var(--ink-faint); font-size: .9rem; line-height: 1.5; }
.presence-text strong { color: var(--ink-dim); font-weight: 500; }
.presence-soon {
    margin-left: auto; flex: 0 0 auto;
    font-family: var(--mono); font-size: .62rem; letter-spacing: .14em; text-transform: uppercase;
    color: var(--ink-faint); opacity: .55;
    border: 1px solid var(--line); border-radius: 8px; padding: .2rem .6rem;
}

/* ---------- responsive ---------- */
@media (max-width: 600px) {
    .hub-identity { flex-direction: column; gap: 1rem; }
    .launcher { grid-template-columns: 1fr 1fr; }
    .presence-panel { flex-direction: column; align-items: flex-start; }
    .presence-soon { margin-left: 0; }
}

/* ---------- /ui gallery: QEditableLabel baseline guide ----------
   Drawn as an underline on the label's OWN text node (QEditableLabel's .qel), toggled by the gallery
   passing Class="demo-baseline". This MUST be global (not Gallery.razor.css): scoped CSS can't reach a
   child component's element, and the rule has to sit on the text node itself because the component's
   inline-block field blocks an ancestor's text-decoration from painting through. text-underline-offset:0
   parks the rule right at the font baseline — the point of the toggle: entering edit mode is zero-shift,
   so the text stays sitting exactly on this line. */
.qel.demo-baseline {
    /* !important so the guide always wins over the component's own underline-cue rule, whose scoped
       (attribute) selectors out-specify this global one — otherwise turning UnderlineAffordance on would
       override the guide (and blank it entirely in edit mode, where the cue resolves to transparent). */
    text-decoration-line: underline !important;
    text-decoration-style: solid !important;
    text-decoration-color: color-mix(in srgb, var(--ember) 80%, transparent) !important;
    text-decoration-thickness: 1.5px !important;
    text-underline-offset: 0 !important;
    /* skip-ink:none is essential here — at offset 0 the rule sits ON the baseline, so EVERY glyph
       touches it; the default (auto) would carve a gap around each letter and shatter the line. */
    text-decoration-skip-ink: none !important;
}