/*
 * grey.ooo brand kit — self-contained chrome.
 *
 * Everything is namespaced under .gooo-* and driven by --gooo-* custom
 * properties, so it renders identically in every app regardless of that app's
 * CSS/Tailwind setup, and needs no build step in consumers.
 *
 * The chrome is dark-first, matching the someones.computer aesthetic.
 */

:root {
    --gooo-bg:            #0b0f17;
    --gooo-surface:       #0f172a;
    --gooo-surface-2:     #131c30;
    --gooo-surface-glass: rgba(15, 23, 42, 0.72);
    --gooo-border:        #1e293b;
    --gooo-border-soft:   #16202f;
    --gooo-text:          #e2e8f0;
    --gooo-text-strong:   #f1f5f9;
    --gooo-muted:         #94a3b8;
    --gooo-faint:         #64748b;
    --gooo-accent:        #7dd3fc;
    --gooo-accent-dim:    rgba(125, 211, 252, 0.14);

    /*
     * Status hues, each paired with a dim fill the same way --gooo-accent is.
     * All three sit at the same weight as one another so a row of badges reads
     * as one set rather than three borrowed colours.
     *
     * A consumer cannot supply these from its own CSS: nothing in this file is
     * wrapped in @layer, and an unlayered declaration beats every layered one
     * regardless of specificity — so a Tailwind `text-amber-300` next to
     * .gooo-badge loses unconditionally. That is why the variants below exist
     * rather than being left to the app.
     */
    --gooo-danger:        #fb7185;
    --gooo-danger-dim:    rgba(251, 113, 133, 0.14);
    --gooo-warn:          #fbbf24;
    --gooo-warn-dim:      rgba(251, 191, 36, 0.14);
    --gooo-success:       #34d399;
    --gooo-success-dim:   rgba(52, 211, 153, 0.14);

    --gooo-topbar-h:      44px;   /* grey.ooo brand bar (top tier) */
    --gooo-appbar-h:      52px;   /* host app's own bar (second tier) */
    --gooo-chrome-h:      calc(var(--gooo-topbar-h) + var(--gooo-appbar-h));
    --gooo-sidebar-w:     248px;
    --gooo-radius:        10px;
    --gooo-radius-sm:     8px;
    --gooo-content-max:   1152px;
    --gooo-font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
        "Helvetica Neue", Arial, "Noto Sans", sans-serif;
    --gooo-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
        "Liberation Mono", monospace;
}

/* ---- Top bar -------------------------------------------------------------- */

.gooo-topbar {
    position: sticky;
    top: 0;
    z-index: 1000;
    height: var(--gooo-topbar-h);
    background: var(--gooo-surface-glass);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--gooo-border);
    color: var(--gooo-text);
    font-family: var(--gooo-font);
}

.gooo-topbar__inner {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0 0.75rem;
}

.gooo-topbar__left,
.gooo-topbar__right {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.gooo-brand {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    text-decoration: none;
    color: var(--gooo-text-strong);
    font-weight: 600;
    letter-spacing: -0.01em;
    padding: 0 0.25rem;
}

.gooo-brand__mark { display: inline-flex; font-size: 1.15rem; line-height: 1; }

/* An app whose icon is its own mark supplies inline SVG (`icon_svg`) rather than
   an emoji, and supplies geometry only — sizing it in `em` here means the two
   kinds sit at one optical scale wherever they appear together, and neither the
   roster nor the app has to know what that scale is. 1.1em rather than 1em
   because an emoji is drawn to fill its em box and a stroked mark is not. */
.gooo-brand__mark svg,
.gooo-menu__icon svg {
    width: 1.1em;
    height: 1.1em;
    display: inline-block;
    vertical-align: -0.2em;
}

.gooo-brand__word { font-size: 0.95rem; }
.gooo-dim { color: var(--gooo-faint); font-weight: 500; }

/* Icon buttons (shared) */
.gooo-iconbtn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: 1px solid transparent;
    border-radius: var(--gooo-radius-sm);
    background: transparent;
    color: var(--gooo-muted);
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.gooo-iconbtn:hover { background: var(--gooo-surface-2); color: var(--gooo-text-strong); border-color: var(--gooo-border); }
.gooo-iconbtn:focus-visible { outline: 2px solid var(--gooo-accent); outline-offset: 1px; }

.gooo-topbar__menu { display: none; }

/* ---- App bar (second tier — the host app's own horizontal bar) ------------ */

.gooo-appbar {
    position: sticky;
    top: var(--gooo-topbar-h);
    z-index: 999;
    height: var(--gooo-appbar-h);
    background: var(--gooo-bg);
    border-bottom: 1px solid var(--gooo-border);
    color: var(--gooo-text);
    font-family: var(--gooo-font);
}
.gooo-appbar__inner {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0 0.75rem;
}
.gooo-appbar__left,
.gooo-appbar__right {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
/* `padding-left` puts the mark's own optical *centre* on the same vertical line
   as the icons above and below it — not its left edge, because the three icons
   in this rail are three different widths (switcher 18px, mark 20px, nav 16px)
   and lining up left edges leaves differently-sized icons visibly off-centre
   from one another. The topbar's app-switcher button centres its 18px icon in
   a 36px box: 12px bar padding + half the box = a 30px centre. Matching that
   here (12px bar padding + 8px of this padding + half the 20px mark = 30) puts
   the mark on the same line — within a shared px of the sidebar's `.gooo-nav__icon`
   too (12px nav padding + 2px active-state border + half the 18.4px icon box
   ≈ 31px), which nothing here needs to move. At the old symmetric 0.25rem the
   mark's centre sat at 26px, six to seven px left of both. */
.gooo-appbar__title {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    text-decoration: none;
    color: var(--gooo-text-strong);
    font-weight: 600;
    font-size: 0.95rem;
    letter-spacing: -0.01em;
    padding: 0 0.25rem 0 0.5rem;
}
.gooo-appbar__title img { height: 20px; width: auto; }

/* ---- Dropdown menus (shared) --------------------------------------------- */

.gooo-switcher { position: relative; display: inline-flex; }

.gooo-menu {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    min-width: 232px;
    background: var(--gooo-surface);
    border: 1px solid var(--gooo-border);
    border-radius: var(--gooo-radius);
    box-shadow: 0 12px 32px -8px rgba(0, 0, 0, 0.6);
    padding: 6px;
    display: none;
    z-index: 1100;
    font-family: var(--gooo-font);
}
.gooo-menu--right { left: auto; right: 0; }
.gooo-menu.is-open { display: block; animation: gooo-pop 0.12s ease-out; }

/* Count badge + unread dot on top-bar icon buttons */
.gooo-count {
    position: absolute;
    top: -3px;
    right: -3px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.62rem;
    font-weight: 600;
    line-height: 1;
    color: #04121b;
    background: var(--gooo-accent);
    border-radius: 999px;
}
.gooo-dot {
    position: absolute;
    top: 4px;
    right: 5px;
    width: 7px;
    height: 7px;
    border-radius: 999px;
    background: var(--gooo-accent);
    box-shadow: 0 0 0 2px var(--gooo-surface-glass);
}

@keyframes gooo-pop {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}

.gooo-menu__label {
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--gooo-faint);
    padding: 6px 10px 4px;
}
/* One roster entry. A row rather than the item itself because an app with a
   staging deployment carries a second link, and an anchor cannot hold one. */
.gooo-menu__row { position: relative; display: flex; align-items: center; }

.gooo-menu__item {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 8px 10px;
    border-radius: var(--gooo-radius-sm);
    text-decoration: none;
    color: var(--gooo-text);
    font-size: 0.88rem;
    /* Opaque, and the same colour as the menu it sits on, so it looks unchanged
       while hiding the blade parked behind it. */
    position: relative;
    z-index: 1;
    background: var(--gooo-surface);
}
.gooo-menu__item:hover,
.gooo-menu__row:hover .gooo-menu__item { background: var(--gooo-surface-2); color: var(--gooo-text-strong); }
.gooo-menu__item.is-current { color: var(--gooo-text-strong); }
/* A fixed, centred box rather than an inline span sized in text: `width` alone
   is a no-op on an inline element, and even set as a block it only centres
   horizontally. An SVG mark fills its box exactly, but an emoji glyph carries
   its own font-drawn padding that varies by glyph and by platform emoji font,
   so on `text-align: center` alone it sat a few px off the SVG marks beside it
   in the switcher. Centring the box on both axes, with `line-height: 1`
   to strip the emoji's own leading, aligns every icon to the row regardless of
   whether it draws as SVG or text. */
.gooo-menu__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.25rem;
    height: 1.25rem;
    font-size: 0.95rem;
    line-height: 1;
}
.gooo-menu__name { flex: 1; }
.gooo-menu__here {
    font-size: 0.62rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--gooo-accent);
    background: var(--gooo-accent-dim);
    padding: 2px 6px;
    border-radius: 999px;
}
.gooo-menu__empty { padding: 10px; color: var(--gooo-faint); font-size: 0.85rem; }

/*
 * Staging blade — the second copy of an app, drawn as a second surface behind
 * its row with a sliver showing past the right edge, sliding out from under it
 * on hover. Behind rather than beside: the menu is a list of apps and this is
 * not another app, it is the same one a layer back, and a row of two equal
 * buttons would say otherwise.
 *
 * Amber because `--gooo-warn` is the kit's "this is not the normal state" hue
 * and staging should never be mistaken for production at a glance. The border
 * is mixed from the same token rather than written as its own literal, so an
 * app that retints `--gooo-warn` keeps a blade whose edge still matches it.
 */
.gooo-menu__blade {
    position: absolute;
    top: 3px;
    bottom: 3px;
    right: -4px;
    width: 62px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 0 6px;
    border: 1px solid color-mix(in srgb, var(--gooo-warn) 30%, transparent);
    /* Square on the left, where it meets the row it slid out from — rounding
       that edge would draw a free-floating pill parked beside the switcher
       rather than one surface emerging from behind another. */
    border-radius: 0 var(--gooo-radius-sm) var(--gooo-radius-sm) 0;
    background: var(--gooo-warn-dim);
    color: var(--gooo-warn);
    font-size: 0.62rem;
    letter-spacing: 0.04em;
    text-decoration: none;
    transition: right 0.15s ease;
}
.gooo-menu__row:hover .gooo-menu__blade,
.gooo-menu__row:focus-within .gooo-menu__blade { right: -44px; }
.gooo-menu__blade:hover { background: var(--gooo-warn); color: var(--gooo-bg); }
.gooo-menu__blade:focus-visible { outline: 2px solid var(--gooo-accent); outline-offset: 1px; }

/* Nothing hovers on a touch screen, and a 4px sliver is not a tap target, so
   there the blade simply stays out. */
@media (hover: none) {
    .gooo-menu__blade { right: -44px; }
}

/* ---- Shell ---------------------------------------------------------------- */

.gooo-shell {
    min-height: 100vh;
    background: var(--gooo-bg);
    color: var(--gooo-text);
    font-family: var(--gooo-font);
}

.gooo-shell__body {
    display: flex;
    align-items: flex-start;
}

.gooo-sidebar {
    position: sticky;
    top: var(--gooo-chrome-h);
    flex: 0 0 var(--gooo-sidebar-w);
    width: var(--gooo-sidebar-w);
    height: calc(100vh - var(--gooo-chrome-h));
    overflow-y: auto;
    border-right: 1px solid var(--gooo-border);
    background: var(--gooo-bg);
    padding: 0.75rem 0.5rem;
}

.gooo-shell__overlay { display: none; }

/*
 * Sidebar-less shell: nothing to open, so the drawer toggle goes too. The
 * two-class selector outranks the `display: inline-flex` the responsive block
 * sets on the toggle, whatever the source order.
 */
.gooo-shell--no-sidebar .gooo-topbar__menu { display: none; }

.gooo-main {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    min-height: calc(100vh - var(--gooo-chrome-h));
}
.gooo-main__inner {
    flex: 1 0 auto;
    width: 100%;
    max-width: var(--gooo-content-max);
    margin: 0 auto;
    padding: 1.75rem 1.25rem;
}

/* ---- Sidebar nav ---------------------------------------------------------- */

.gooo-nav { display: flex; flex-direction: column; gap: 2px; }

.gooo-nav__group-label {
    font-size: 0.66rem;
    text-transform: uppercase;
    letter-spacing: 0.09em;
    color: var(--gooo-faint);
    padding: 14px 12px 6px;
}

.gooo-nav__item {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 8px 12px;
    border-radius: var(--gooo-radius-sm);
    text-decoration: none;
    color: var(--gooo-muted);
    font-size: 0.9rem;
    line-height: 1.2;
    border-left: 2px solid transparent;
    transition: background-color 0.12s ease, color 0.12s ease;
}
.gooo-nav__item:hover { background: var(--gooo-surface-2); color: var(--gooo-text-strong); }
.gooo-nav__item.is-active {
    background: var(--gooo-accent-dim);
    color: var(--gooo-text-strong);
    border-left-color: var(--gooo-accent);
}
.gooo-nav__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.15rem;
    height: 1.15rem;
    flex: 0 0 auto;
}
.gooo-nav__icon svg { width: 1rem; height: 1rem; }
.gooo-nav__label { flex: 1; }

.gooo-nav__sub .gooo-nav__item { padding-left: 34px; font-size: 0.85rem; }

/* ---- Footer --------------------------------------------------------------- */

.gooo-footer {
    flex-shrink: 0;
    border-top: 1px solid var(--gooo-border);
    padding: 0.9rem 1.25rem;
    color: var(--gooo-faint);
    font-size: 0.78rem;
}
.gooo-footer a { color: var(--gooo-muted); text-decoration: none; }
.gooo-footer a:hover { color: var(--gooo-text); text-decoration: underline; }

/* ---- Small primitives (used by the style guide + hosts) ------------------- */

.gooo-card {
    background: var(--gooo-surface);
    border: 1px solid var(--gooo-border);
    border-radius: var(--gooo-radius);
    padding: 1rem;
}
.gooo-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 0.72rem;
    background: var(--gooo-surface-2);
    color: var(--gooo-muted);
    border: 1px solid var(--gooo-border);
}
/*
 * Badge variants. The bare .gooo-badge is deliberately muted — it is for
 * neutral facts ("current", "Billing") that should not compete with the
 * content. These three are for a badge whose whole job is to be noticed:
 * an account that is disabled, a queue somebody is waiting in, a message
 * that failed to send.
 *
 * Only the two colours and the border change, so a variant stays the same
 * shape and weight as its neutral sibling sitting beside it in the same row.
 */
.gooo-badge--danger {
    background: var(--gooo-danger-dim);
    color: var(--gooo-danger);
    border-color: color-mix(in srgb, var(--gooo-danger) 30%, transparent);
}
.gooo-badge--warn {
    background: var(--gooo-warn-dim);
    color: var(--gooo-warn);
    border-color: color-mix(in srgb, var(--gooo-warn) 30%, transparent);
}
.gooo-badge--success {
    background: var(--gooo-success-dim);
    color: var(--gooo-success);
    border-color: color-mix(in srgb, var(--gooo-success) 30%, transparent);
}
.gooo-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 7px 14px;
    border-radius: var(--gooo-radius-sm);
    border: 1px solid var(--gooo-border);
    background: var(--gooo-surface-2);
    color: var(--gooo-text-strong);
    font: inherit;
    font-size: 0.86rem;
    text-decoration: none;
    cursor: pointer;
}
.gooo-btn:hover { border-color: var(--gooo-accent); }
.gooo-btn--primary { background: var(--gooo-accent); color: #04121b; border-color: var(--gooo-accent); }
.gooo-btn--primary:hover { filter: brightness(1.08); }

/* ---- Responsive: collapse the sidebar into an overlay drawer --------------- */

@media (max-width: 900px) {
    .gooo-topbar__menu { display: inline-flex; }

    .gooo-sidebar {
        position: fixed;
        top: var(--gooo-chrome-h);
        left: 0;
        z-index: 1050;
        height: calc(100vh - var(--gooo-chrome-h));
        transform: translateX(-100%);
        transition: transform 0.2s ease;
        box-shadow: 0 0 40px rgba(0, 0, 0, 0.5);
    }
    .gooo-sidebar.is-open { transform: translateX(0); }

    .gooo-sidebar.is-open ~ .gooo-shell__overlay,
    .gooo-shell__overlay.is-open { display: block; }

    .gooo-shell__overlay {
        position: fixed;
        inset: var(--gooo-chrome-h) 0 0 0;
        z-index: 1040;
        background: rgba(2, 6, 12, 0.6);
    }
}