/*
 * The shared theme for every real Zephyrus page (i.e. every page that links
 * it — the settings-chart popout deliberately does not, see its own
 * template). One request instead of a handful of inline <style> blocks
 * repeated verbatim across every page's own template.
 *
 * Below the base/nav/tips pieces, this also carries the common shape of
 * elements that were "almost the same" across pages rather than byte-
 * identical — headings, tables, empty/error states. Each page's own
 * <style> block still wins where it explicitly restates a property (later
 * source order, equal specificity), which is how a page keeps a
 * deliberately different value without fighting this file — see e.g.
 * settings.ftl's own h2, or diagnostic.ftl's own td.
 *
 * Deliberately NOT shared here: several selectors reuse the same name for a
 * genuinely different component on another page — a false cognate, not a
 * duplicate — where merging would corrupt a layout rather than just nudge a
 * value. Left fully page-owned: bare `button` (its default color encodes an
 * action's meaning per page — green/blue/grey — and DASH relies on no bare
 * `button` rule existing at all), `.field` (a labelled input on most pages,
 * a slider row on settings.ftl), `.panel`/`.panel-head`/`.panel-body` (padding
 * lives in different places on diagnostic.ftl vs settings.ftl), `.controls`
 * (a bordered toolbar on most pages, a bare inline row on diagnostic.ftl),
 * `.mode-*`, `.uuid`, `.orb`, `.stat`, `.note`, `.copy-tooltip`, `code`/`pre`.
 */

/* ---------- base ---------- */

:root {
    --bg: #1e1f24;
    --fg: #e6e6e6;
}

body {
    font-family: -apple-system, Segoe UI, Roboto, Arial, sans-serif;
    background: var(--bg);
    color: var(--fg);
    margin: 0;
    padding: 2rem;
}

/* ---------- nav bar (see nav.ftl) ----------
 *
 * The negative margins assume the page body has 2rem of padding — which
 * every page linking this stylesheet does — and let the bar reach the
 * window edges while the content under it stays inset.
 */

.zephyrus-nav {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    margin: -2rem -2rem 1.75rem;
    padding: 0.7rem 2rem;
    background: #191a1e;
    border-bottom: 1px solid #2c2d33;
}

.zephyrus-nav-brand {
    margin-right: 0.9rem;
    color: #e6e6e6;
    font-size: 0.9rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-decoration: none;
}

.zephyrus-nav-brand:hover {
    color: #fff;
}

.zephyrus-nav a.zephyrus-nav-link,
.zephyrus-nav span.zephyrus-nav-link {
    padding: 0.32rem 0.75rem;
    white-space: nowrap;
    border: 1px solid transparent;
    border-radius: 6px;
    color: #9aa;
    font-size: 0.82rem;
    text-decoration: none;
}

.zephyrus-nav a.zephyrus-nav-link:hover {
    background: #23242a;
    color: #e6e6e6;
}

.zephyrus-nav .zephyrus-nav-link.current {
    background: #202a38;
    border-color: #2d5fa3;
    color: #cfe3ff;
    font-weight: 600;
}

/* The build stamp, pushed to the far end of the bar by the auto margin.
   Quiet by design: it is there to be looked up when a page behaves oddly,
   not to compete with the links. */
.zephyrus-nav-version {
    padding-left: 0.9rem;
    color: #5c5d66;
    font-size: 0.72rem;
    font-variant-numeric: tabular-nums;
    cursor: help;
    white-space: nowrap;
}

/* The language selector, pushed to the right end of the bar with the build
   stamp. The visible label is for screen readers only: the language names,
   each written in itself, say what the control is. */
.zephyrus-nav-lang {
    margin-left: auto;
}

.zephyrus-nav-lang-label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
}

.zephyrus-nav-lang select {
    background: #23242a;
    color: #9aa;
    border: 1px solid #2c2d33;
    border-radius: 6px;
    padding: 0.28rem 0.4rem;
    font-family: inherit;
    font-size: 0.78rem;
    cursor: pointer;
}

.zephyrus-nav-lang select:hover {
    color: #e6e6e6;
}

/* A section this deployment does not serve: listed so its absence is
   visible, but plainly not somewhere to click. */
.zephyrus-nav .zephyrus-nav-link.unavailable {
    color: #5c5d66;
    cursor: help;
    text-decoration: line-through;
}

/* ---------- help-tip markers (see tips.ftl) ----------
 *
 * A visible "?" rather than a title attribute: the point of these is that
 * the explanation can be found, and a tooltip nobody knows is there
 * explains nothing.
 */

.zephyrus-tip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 0.95rem;
    height: 0.95rem;
    margin-left: 0.3rem;
    border: 1px solid #4a4b53;
    border-radius: 50%;
    background: #2a2b31;
    color: #99a;
    font-size: 0.6rem;
    font-weight: 700;
    text-transform: none;
    letter-spacing: normal;
    cursor: help;
    vertical-align: middle;
}

.zephyrus-tip:hover {
    background: #2d5fa3;
    border-color: #3d76c4;
    color: #fff;
}

.zephyrus-tip-bubble {
    position: fixed;
    z-index: 200;
    max-width: 22rem;
    padding: 0.5rem 0.65rem;
    border: 1px solid #44454d;
    border-radius: 6px;
    background: #101116;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.55);
    color: #dcdcdc;
    font-size: 0.72rem;
    font-weight: 400;
    line-height: 1.4;
    text-align: left;
    text-transform: none;
    letter-spacing: normal;
    white-space: normal;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.12s ease;
}

.zephyrus-tip-bubble.shown {
    opacity: 1;
    visibility: visible;
}

/* ---------- headings & subtitle ---------- */

h1 {
    margin: 0 0 0.35rem;
    font-size: 1.4rem;
}

h2 {
    margin: 1rem 0 0.75rem;
    font-size: 1.05rem;
    color: #ccc;
}

h2 .hint {
    font-weight: 400;
    font-size: 0.78rem;
    color: #777;
    margin-left: 0.6rem;
}

.subtitle {
    margin: 0 0 1.5rem;
    color: #888;
    font-size: 0.85rem;
}

/* ---------- tables ---------- */

table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
}

th, td {
    text-align: left;
    padding: 0.5rem 0.7rem;
    border-bottom: 1px solid #33343a;
    font-variant-numeric: tabular-nums;
}

th {
    color: #999;
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.7rem;
}

.table-box {
    background: #26272d;
    border: 1px solid #33343a;
    border-radius: 8px;
    overflow-x: auto;
}

/* Three names for the same idea, on tables that scroll but do not want the
   .table-box treatment (own background, own border already provided by a
   surrounding panel). */
.table-scroll,
.fact-scroll,
.channel-scroll {
    overflow-x: auto;
}

/* ---------- form fields ---------- */

.field label {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #888;
}

/* ---------- status text ---------- */

.na {
    color: #555;
}

.empty {
    padding: 1rem 0.9rem;
    font-size: 0.85rem;
    color: #777;
}

.error {
    color: #ff8888;
    font-size: 0.85rem;
    margin-top: 1rem;
}

.message.error {
    background: #3a1f1f;
    border: 1px solid #6f1f1f;
    color: #ffd6d6;
}

.message.empty {
    background: #26272d;
    border: 1px solid #33343a;
    color: #999;
}

/* ---------- misc ---------- */

.chart-box {
    background: #26272d;
    border: 1px solid #33343a;
    border-radius: 8px;
    padding: 1rem;
}

.hidden {
    display: none !important;
}