/* ==================================================================
   Starship Horizons - site shell.

   Replaces default.css for pages on site.master. It is deliberately a
   separate file: default.css still serves the pages that have not been
   migrated, and its .button / .label-f / input rules would fight these.
   Nothing here should be added to default.css until the migration is
   finished and default.css is retired.

   Palette is the existing one - #49acff accent, #2b2b2b panels, the
   back-space starfield - rebuilt on tokens with fluid spacing so the
   same page works from a phone to a desktop. Desktop stays the focus;
   the phone layout is a fold, not a different design.
   ================================================================== */

:root {
    /* --- brand ------------------------------------------------- */
    --accent:        #49acff;   /* was --main-color */
    --accent-deep:   #008aff;
    --accent-dim:    #2b6ea8;
    --accent-glow:   rgba(73, 172, 255, .16);

    /* --- surfaces ---------------------------------------------- */
    --panel:         #2b2b2b;   /* the existing .page-content grey */
    --panel-raised:  #343434;
    --panel-sunk:    #1e1e1e;
    --line:          #444a52;
    --line-soft:     #383c42;

    /* --- ink ---------------------------------------------------- */
    --ink:           #ffffff;
    --ink-soft:      #c8ced6;
    --ink-faint:     #949ba4;

    /* --- state -------------------------------------------------- */
    --warn:          #f0a838;
    --bad:           #e2725b;
    --good:          #5fd08a;

    /* --- metrics ------------------------------------------------ */
    --center-width:  1200px;
    /* The single column everything lines up in: banner, title bar, core and
       footer are all this wide, so their edges stack. */
    --content-width: calc(1200px - 28px * 2);
    --titlebar-h:    40px;
    --radius:        6px;
    --radius-sm:     4px;

    /* Spacing scales with the viewport instead of snapping at a
       breakpoint, so the page breathes on a desktop without wasting
       half the screen on a phone. */
    --pad-page:      clamp(12px, 2.4vw, 28px);
    --gap:           clamp(10px, 1.4vw, 18px);
    --gap-sm:        8px;

    --shadow:        0 1px 2px rgba(0,0,0,.4), 0 10px 28px -18px rgba(0,0,0,.9);
    --font:          "Segoe UI", Roboto, -apple-system, BlinkMacSystemFont, Arial, sans-serif;
    --font-mono:     Consolas, "SF Mono", Menlo, "Courier New", monospace;
}

/* ==================================================================
   Base
   ================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    padding: 0;
    color: var(--ink);
    background: url('/images/back-space.jpg') no-repeat center center fixed;
    background-size: cover;
    background-color: #000;
    font-family: var(--font);
    font-size: 15px;
    line-height: 1.6;
    text-align: left;
    /* the starfield is fixed, so the shell scrolls over it */
    min-height: 100vh;
}

img { max-width: 100%; height: auto; border: 0; }

a { color: var(--accent); }
a:hover { color: #7cc4ff; }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

h1, h2, h3, h4, h5, h6 { margin: 0; line-height: 1.25; text-wrap: balance; }

hr { border: 0; border-top: 1px solid var(--line); margin: 1.5em 0; }

code, pre, kbd, samp { font-family: var(--font-mono); }

/* ==================================================================
   Logo band
   ================================================================== */

/* The bridge artwork sits behind the logo, sized to the content column so its
   edges line up with the title bar and the core below.
   The band's height comes from the logo, as it did before the artwork was
   added; the image covers that band and is cropped, rather than the band
   growing to fit the whole image. */
#logo-band {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    max-width: var(--content-width);
    margin: 0 auto;
    padding: clamp(6px, 1.1vw, 12px) var(--pad-page);
    background: url('/images/web-banner.png') no-repeat center center;
    background-size: cover;
    background-color: #000;
    overflow: hidden;
}

/* A shadow rather than a scrim: the logo stays legible over the bright part
   of the artwork without dulling the artwork itself. */
#logo-band img {
    width: 100%;
    max-width: 400px;
    height: auto;
    filter: drop-shadow(0 2px 12px rgba(0,0,0,.95)) drop-shadow(0 0 3px rgba(0,0,0,.8));
}

/* ==================================================================
   Title bar

   Sticky, because documentation pages are long and the navigation
   should not require a scroll back to the top to reach.
   ================================================================== */

#titlebar {
    position: sticky;
    top: 0;
    z-index: 900;
    display: flex;
    justify-content: center;
    /* Contained rather than full-bleed, so the bar is the same column as the
       banner above it and the core below. */
    width: 100%;
    max-width: var(--content-width);
    margin: 0 auto;
    background-color: #12305a;
    background-image: url('/images/page-title.jpg');
    background-repeat: repeat-x;
    background-size: auto 100%;
    border-top: 1px solid rgba(255,255,255,.10);
    border-bottom: 1px solid rgba(0,0,0,.5);
    box-shadow: 0 2px 10px rgba(0,0,0,.45);
}

#titlebar-content {
    position: relative;
    display: flex;
    align-items: stretch;
    gap: 2px;
    width: 100%;
    /* The bar itself is already the content column, so no inset of its own -
       the home icon and the menu button sit on its edges. */
    max-width: none;
    height: var(--titlebar-h);
    padding: 0;
}

#titlebar-home,
a#titlebar-home:link,
a#titlebar-home:visited {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
    width: var(--titlebar-h);
    color: #fff;
    text-decoration: none;
    background-color: rgba(0,0,0,.45);
}

#titlebar-home:hover { background-color: rgba(0,0,0,.7); color: var(--accent); }
#titlebar-home svg { width: 20px; height: 20px; fill: currentColor; }

/* The flexible spacer. It stays in the layout on a phone even though its
   links are hidden - it is what holds the member name and the menu button
   over on the right. */
#titlebar-nav {
    display: flex;
    align-items: center;
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    padding-left: 6px;
}

.header-item,
a.header-item:link,
a.header-item:visited {
    display: flex;
    align-items: center;
    height: 100%;
    padding: 0 11px;
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    border-bottom: 2px solid transparent;
}

.header-item:hover { color: var(--accent); background-color: rgba(0,0,0,.28); }
.header-item.on { color: var(--accent); border-bottom-color: var(--accent); }

.titlebar-member {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    gap: 6px;
    max-width: 190px;
    padding: 0 10px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: 13px;
    font-weight: 700;
    color: #fff;
    cursor: pointer;
}

.titlebar-member:hover { color: var(--accent); }

.titlebar-avatar {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background-color: rgba(0,0,0,.5);
    background-size: cover;
    background-position: center;
    flex-shrink: 0;
}

#titlebar-menu {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
    width: var(--titlebar-h);
    font-size: 20px;
    line-height: 1;
    color: #fff;
    background-color: rgba(0,0,0,.45);
    cursor: pointer;
    user-select: none;
}

#titlebar-menu:hover { background-color: rgba(0,0,0,.7); color: var(--accent); }

/* ==================================================================
   Pop-out menu

   Holds account actions on every screen size, and absorbs the whole
   navigation below 820px.
   ================================================================== */

.pop-menu {
    position: absolute;
    top: var(--titlebar-h);
    right: var(--pad-page);
    z-index: 950;
    display: flex;
    flex-direction: column;
    min-width: 220px;
    background-color: #14161a;
    border: 1px solid var(--line);
    border-top: 0;
    border-radius: 0 0 var(--radius) var(--radius);
    box-shadow: var(--shadow);
    overflow: hidden;
}

.pop-menu.hidden { display: none; }

.pop-menu-nav { display: none; flex-direction: column; }

.pop-menu-account {
    display: flex;
    flex-direction: column;
    border-top: 1px solid var(--line-soft);
}

.pop-menu-item,
a.pop-menu-item:link,
a.pop-menu-item:visited {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    /* 44px is the accepted minimum for a reliable touch target */
    min-height: 44px;
    padding: 6px 14px;
    color: #fff;
    font-size: 15px;
    text-decoration: none;
    cursor: pointer;
}

.pop-menu-item:hover { background-color: var(--accent-glow); color: var(--accent); }

.pop-menu-label {
    padding: 8px 14px 4px;
    color: var(--ink-faint);
    font-size: 11px;
    letter-spacing: .06em;
}

/* ==================================================================
   Page shell
   ================================================================== */

/* The core column is solid, so the starfield is a border treatment either
   side on a wide screen and is not behind the reading area at all below
   --center-width. Text over a photographic background is the single worst
   thing for legibility on a documentation site. */
#page {
    width: 100%;
    /* Same width as the title bar's inner content, so the solid core lines up
       with the navigation instead of sitting wider than it. */
    max-width: var(--content-width);
    margin: 0 auto;
    /* No horizontal padding: the left and right columns sit flush with the
       edges of the core, which is where the title bar's first and last items
       are. Restored below, once the column runs out of starfield margin.
       No top padding either, so the strip under the title bar sits directly
       against it and can centre its own contents. */
    padding: 0 0 60px;
    background-color: var(--panel);
    /* fill the viewport even on a short page, so the solid column reads as
       the page rather than as a floating box */
    min-height: calc(100vh - var(--titlebar-h));
    box-shadow: 0 0 30px rgba(0,0,0,.6);
}

/* Once the core is as wide as the window there is no margin left to act as
   breathing room, so the inset comes back rather than letting text run into
   the screen edge. */
/* Below this the centred column has no starfield margin left to breathe in,
   so banner, bar, core and footer all go full width and take an inset
   instead. Doing it to all four keeps their edges aligned either way. */
@media only screen and (max-width: 1260px) {
    #logo-band,
    #titlebar,
    #page,
    #page-footer { max-width: none; }

    #page {
        padding-left: var(--pad-page);
        padding-right: var(--pad-page);
    }

    #titlebar-content { padding: 0 var(--pad-page); }
}

/* The old layout put an absolutely positioned 192px rail here. Content
   is full width now; a page that wants a sidebar builds its own, so it
   can decide how that sidebar behaves on a phone. */
/* #page has no padding of its own, so pages using the master's heading
   carry their own inset here. */
.page-title-bar {
    margin: 0 0 var(--gap) 0;
    padding: var(--gap) var(--pad-page) 10px;
    border-bottom: 2px solid var(--accent-dim);
}

.page-title-bar h1 {
    font-size: clamp(22px, 3.2vw, 32px);
    font-weight: 700;
}

.panel {
    background-color: var(--panel);
    border: 1px solid var(--line-soft);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: var(--pad-page);
}

.panel + .panel { margin-top: var(--gap); }

.panel-flush { padding: 0; overflow: hidden; }

.panel-title {
    color: var(--accent);
    font-size: 17px;
    font-weight: 700;
    margin-bottom: 8px;
}

/* ==================================================================
   Footer
   ================================================================== */

#page-footer {
    width: 100%;
    max-width: var(--content-width);
    margin: 40px auto 0;
    border-top: 1px solid var(--line-soft);
    background-color: rgba(0,0,0,.55);
}

#footer-content {
    display: flex;
    flex-wrap: wrap;
    gap: var(--gap);
    align-items: center;
    justify-content: space-between;
    width: 100%;
    /* the footer strip is already the content column */
    max-width: none;
    margin: 0 auto;
    padding: 18px 0;
    color: var(--ink-faint);
    font-size: 13px;
}

@media only screen and (max-width: 1260px) {
    #footer-content { padding-left: var(--pad-page); padding-right: var(--pad-page); }
}

#footer-social { display: flex; gap: 10px; align-items: center; }

/* The sprite is four 40px tiles. default.css positioned these absolutely
   inside the old header box; here they are flex items in the footer. */
.social-icon {
    display: block;
    width: 40px;
    height: 40px;
    border-radius: var(--radius-sm);
    background-image: url('/images/social-icons.png');
    background-repeat: no-repeat;
    opacity: .78;
}

.social-icon:hover { opacity: 1; }

.social-icon-fb { background-position:    0    0; }
.social-icon-tw { background-position: -40px  0; }
.social-icon-yt { background-position: -80px  0; }
.social-icon-dc { background-position: -120px 0; }

/* ==================================================================
   Forms

   default.css styles bare input/textarea/select globally and this file
   replaces that wholesale, so no !important is needed here - but the
   :focus rules are still written as class+pseudo-class so they keep
   working if a page also pulls in default.css during the migration.
   ================================================================== */

input, textarea, select, button { font-family: inherit; font-size: inherit; }

.field {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 12px;
    align-items: flex-start;
    margin-bottom: 10px;
}

.field > .label-f,
.label-f {
    flex: 0 0 var(--label-w, 110px);
    padding-top: 7px;
    color: var(--ink-soft);
    font-size: 13px;
    text-align: right;
}

.field > .cell-data,
.cell-data { flex: 1 1 260px; min-width: 0; }

.input,
input[type="text"].input,
input[type="password"].input,
input[type="email"].input,
textarea.input,
select.input {
    width: 100%;
    max-width: 760px;
    padding: 6px 10px;
    color: var(--ink);
    background-color: #05090e;
    border: 1px solid #3a556a;
    border-radius: var(--radius-sm);
    line-height: 1.4;
}

textarea.input { min-height: 120px; line-height: 1.55; }

.input:focus,
.input:focus-visible {
    background-color: #05090e;
    color: var(--ink);
    border-color: var(--accent);
    outline: none;
}

.input::placeholder { color: var(--ink-faint); }

.hint { color: var(--ink-faint); font-size: 12px; margin-top: 4px; line-height: 1.45; }

/* ==================================================================
   Buttons

   Real inline-block buttons. default.css made .button display:table-cell,
   which is why buttons in a row never shared a baseline.
   ================================================================== */

.button,
a.button:link,
a.button:visited,
button.button,
input[type="submit"].button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 38px;
    padding: 7px 16px;
    color: #fff;
    background-color: var(--accent-deep);
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    font-size: 14px;
    font-weight: 700;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    white-space: nowrap;
}

.button:hover { background-color: var(--accent); color: #06121e; }

.button-quiet {
    background-color: transparent;
    border-color: var(--line);
    color: var(--ink-soft);
}

.button-quiet:hover { background-color: rgba(255,255,255,.06); border-color: var(--accent); color: var(--accent); }

.button-green { background-color: #1d7a45; }
.button-red   { background-color: #8a3527; }
.button-green:hover { background-color: #249755; color: #fff; }
.button-red:hover   { background-color: #a8412f; color: #fff; }

/* Kept so pages migrating from default.css do not lose their layout.
   .button is already inline-flex here, so this is a no-op by design. */
.button-web { }

.button-row { display: flex; flex-wrap: wrap; gap: var(--gap-sm); align-items: center; }

/* ==================================================================
   Tables
   ================================================================== */

.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

.table {
    width: 100%;
    border-collapse: collapse;
}

.table th, .table td {
    padding: 8px 10px;
    border-bottom: 1px solid var(--line-soft);
    text-align: left;
    vertical-align: top;
}

.table th { color: var(--ink-soft); font-size: 13px; }
.table tr:hover td { background-color: rgba(73,172,255,.08); }
.table .num { text-align: right; font-variant-numeric: tabular-nums; }

/* ==================================================================
   Utilities carried over from default.css by name, so migrated pages
   keep working without a rewrite.
   ================================================================== */

.centered     { text-align: center; }
.float-right  { float: right; }
.float-left   { float: left; }
.relative     { position: relative; }
.align-full   { width: 100%; }
.font-small   { font-size: 12px; }
.font-small2  { font-size: 11px; }
.light-grey   { color: var(--ink-faint); }
.subtitle     { color: var(--ink-faint); }
.padded       { padding: 6px; }
.padded2      { padding: 10px; }
.pad-v        { height: var(--gap); }
.pad-h        { width: var(--gap-sm); display: inline-block; }
.rounded      { border-radius: var(--radius-sm); }
.hidden       { display: none !important; }
.nowrap       { white-space: nowrap; }

.stack        { display: flex; flex-direction: column; gap: var(--gap); }
.row          { display: flex; flex-wrap: wrap; gap: var(--gap); }
.row-tight    { display: flex; flex-wrap: wrap; gap: var(--gap-sm); }
.grow         { flex: 1 1 auto; min-width: 0; }

.notice {
    padding: 10px 14px;
    border-left: 4px solid var(--accent);
    border-radius: var(--radius-sm);
    background-color: var(--accent-glow);
    margin-bottom: var(--gap);
    font-size: 14px;
}

.notice-bad  { border-left-color: var(--bad);  background-color: rgba(226,114,91,.14); }
.notice-warn { border-left-color: var(--warn); background-color: rgba(240,168,56,.13); }
.notice-good { border-left-color: var(--good); background-color: rgba(95,208,138,.13); }

/* ==================================================================
   Responsive

   820px  navigation folds into the pop-out menu
   560px  tighten type and stack label/field pairs
   ================================================================== */

@media only screen and (max-width: 820px) {

    /* The links move into the menu rather than disappearing. #titlebar-nav
       itself stays: it is the spacer that keeps the member block and the
       menu button on the right. */
    #titlebar-nav .header-item { display: none; }
    .pop-menu-nav { display: flex; }
    .pop-menu { min-width: 60vw; right: 0; border-radius: 0 0 0 var(--radius); }

    #logo-band img { max-width: 300px; }
    .titlebar-member { max-width: 130px; }
}

@media only screen and (max-width: 560px) {

    body { font-size: 14px; }


    #logo-band img { max-width: 230px; }

    /* A right-aligned label column is unreadable at this width; stack. */
    .field { flex-direction: column; gap: 2px; }
    .field > .label-f,
    .label-f { flex: 1 1 auto; text-align: left; padding-top: 0; }

    .input { max-width: none; }

    /* Full-width buttons are easier to hit than a wrapped row of small ones. */
    .button-row .button { flex: 1 1 auto; }

    #footer-content { justify-content: center; text-align: center; }
}

@media (prefers-reduced-motion: reduce) {
    * { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}