/* ══════════════════════════════════════════════════════════════
   PADREGPT SITE
   Shared by every page: palette, type, the top bar and the basic
   pieces (panels, headers, buttons, chips, fields). Navy-black panels,
   gilt chrome, vellum text. Bright colours are for data only.
   ══════════════════════════════════════════════════════════════ */

:root {
    --black: #06070d;
    --bezel: #090b15;
    --panel: #0c0f1c;
    --panel-2: #12162a;
    --rule: #1c2140;
    --rule-2: #2b3260;
    --fde: #3a4170;
    --tan: #b8b3a5;
    --bone: #e8e3d4;
    --muted: #8189a6;
    --gilt: #e6b94f;
    --gilt-dim: #8c7235;
    --cyan: #43e6d9;
    --signal: #e0603b;
    --ink: #1c160d;
    --parch: #f3e8cc;
    --mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    --serif: 'EB Garamond', 'Palatino Linotype', Palatino, Georgia, serif;
    --black-letter: 'UnifrakturMaguntia', 'Old English Text MT', Georgia, serif;
    --gutter: max(16px, env(safe-area-inset-left, 0px));
    color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { height: 100%; }
body {
    margin: 0;
    background: var(--black);
    color: var(--bone);
    font-family: var(--mono);
    font-size: 12px;
    line-height: 1.45;
    -webkit-font-smoothing: antialiased;
}
body::after {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 3000;
    background: repeating-linear-gradient(0deg, rgba(255,255,255,.018) 0 1px, transparent 1px 3px),
                radial-gradient(ellipse at 50% 45%, transparent 60%, rgba(0,0,0,.45) 100%);
}
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
button:disabled { cursor: default; opacity: .5; }
input, textarea, select { font: inherit; color: inherit; }
button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible, a:focus-visible,
summary:focus-visible, [tabindex]:focus-visible {
    outline: 1px solid var(--gilt);
    outline-offset: 2px;
}
a { color: var(--gilt); }
html { -webkit-tap-highlight-color: transparent; }
::selection { background: rgba(230,185,79,.35); }
* { scrollbar-width: thin; scrollbar-color: var(--rule-2) transparent; }
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-thumb { background: var(--rule-2); }
::-webkit-scrollbar-track { background: transparent; }

/* ── Panels ────────────────────────────────────────────── */

.panel {
    position: relative;
    background: linear-gradient(180deg, var(--panel), var(--bezel));
    border: 1px solid var(--rule);
    min-width: 0;
    min-height: 0;
}
.panel::before, .panel::after {
    content: "";
    position: absolute;
    width: 11px;
    height: 11px;
    border: 1px solid var(--gilt);
    opacity: .85;
    pointer-events: none;
    z-index: 5;
}
.panel::before { top: -1px; left: -1px; border-right: 0; border-bottom: 0; }
.panel::after { bottom: -1px; right: -1px; border-left: 0; border-top: 0; }
.ph {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    padding: 9px 12px 8px;
    border-bottom: 1px solid var(--rule);
    font-weight: 600;
    font-size: 11px;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--gilt);
    flex: 0 0 auto;
}
.ph em { font-style: normal; font-weight: 500; letter-spacing: .08em; color: var(--muted); font-size: 10.5px; margin-left: auto; text-align: right; }

/* ── Controls ──────────────────────────────────────────── */

.btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: .14em;
    text-transform: uppercase;
    padding: 5px 9px;
    border: 1px solid var(--rule-2);
    color: var(--tan);
    text-decoration: none;
    background: none;
}
.btn:hover { border-color: var(--bone); color: var(--bone); }
.btn.prim { border-color: var(--gilt); color: var(--gilt); }
.btn.prim:hover { background: rgba(230,185,79,.1); }
.btn.solid { background: var(--gilt); border-color: var(--gilt); color: var(--black); }
.btn.solid:hover { background: #f0c862; color: var(--black); }
.btn.danger:hover { border-color: var(--signal); color: var(--signal); }
.chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: .08em;
    text-transform: uppercase;
    padding: 3px 7px;
    border: 1px solid var(--rule-2);
    color: var(--tan);
    background: none;
}
.chip:hover { border-color: var(--fde); color: var(--bone); }
.chip.on, .chip[aria-pressed="true"] { border-color: var(--gilt); color: var(--gilt); background: rgba(230,185,79,.08); }
.chip .n { opacity: .6; }
.chip .dot { display: inline-block; width: 7px; height: 7px; background: var(--c, var(--muted)); }
.seg { display: inline-flex; border: 1px solid var(--rule-2); }
.seg button { padding: 6px 11px; font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--tan); border-right: 1px solid var(--rule-2); }
.seg button:last-child { border-right: 0; }
.seg button:hover { color: var(--bone); }
.seg button[aria-pressed="true"], .seg button.on { background: var(--gilt); color: var(--black); }
.field {
    display: block;
    width: 100%;
    background: var(--black);
    border: 1px solid var(--rule-2);
    color: var(--bone);
    font-family: var(--mono);
    font-size: 12px;
    padding: 8px 10px;
}
.field::placeholder { color: var(--muted); }
.field:focus { border-color: var(--gilt); outline: none; }
.kicker { font-size: 10px; letter-spacing: .22em; text-transform: uppercase; color: var(--muted); }

/* A figure, event or place that opens in the explorer */
.xlink {
    color: inherit;
    text-decoration: underline;
    text-decoration-color: rgba(230,185,79,.55);
    text-decoration-style: dotted;
    text-underline-offset: 3px;
    cursor: pointer;
}
.xlink:hover { color: var(--gilt); text-decoration-color: var(--gilt); }

/* ── Map tracker ───────────────────────────────────────
   One mark for "here" on every map: four square corners around a small
   square, in the colour of what it tracks (--c). The corners breathe
   slowly; a smaller, still version marks the other tracked figures. */

.jm { background: none !important; border: 0 !important; }
.tgt { position: relative; }
.tgt .bx { position: absolute; left: -17px; top: -17px; width: 34px; height: 34px; }
.tgt .bx i { position: absolute; width: 10px; height: 10px; border: 2.5px solid var(--c); filter: drop-shadow(0 0 1px #000) drop-shadow(0 0 1px #000); }
.tgt .bx i:nth-child(1) { top: 0; left: 0; border-right: 0; border-bottom: 0; --dx: -1; --dy: -1; }
.tgt .bx i:nth-child(2) { top: 0; right: 0; border-left: 0; border-bottom: 0; --dx: 1; --dy: -1; }
.tgt .bx i:nth-child(3) { bottom: 0; left: 0; border-right: 0; border-top: 0; --dx: -1; --dy: 1; }
.tgt .bx i:nth-child(4) { bottom: 0; right: 0; border-left: 0; border-top: 0; --dx: 1; --dy: 1; }
.tgt .core { position: absolute; left: -4px; top: -4px; width: 8px; height: 8px; background: var(--black); box-shadow: 0 0 0 2px var(--c), 0 0 0 3.5px var(--black); }
@media (prefers-reduced-motion: no-preference) {
    .tgt:not(.ghost) .bx i { animation: tgt-breathe 3s ease-in-out infinite; }
    @keyframes tgt-breathe { 50% { transform: translate(calc(var(--dx) * 2px), calc(var(--dy) * 2px)); } }
}

/* ── Top bar ───────────────────────────────────────────── */

.top { display: flex; align-items: center; gap: 18px; padding: 8px 14px; flex-wrap: wrap; }
.brand { display: flex; align-items: center; gap: 12px; min-width: 0; text-decoration: none; }
.bl { font-family: var(--black-letter); font-size: 31px; line-height: 1; color: var(--gilt); text-shadow: 0 0 12px rgba(230,185,79,.45); }
.bs { font-size: 10px; letter-spacing: .24em; color: var(--bone); line-height: 1.35; text-transform: uppercase; }
.bs em { font-style: normal; letter-spacing: .06em; color: var(--muted); text-transform: none; }
.nav { display: flex; gap: 2px; flex-wrap: wrap; }
.nav a { text-decoration: none; color: var(--tan); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; padding: 6px 10px; border: 1px solid transparent; }
.nav a:hover { border-color: var(--rule-2); color: var(--bone); }
.nav a.on { color: var(--black); background: var(--gilt); border-color: var(--gilt); }
.status { margin-left: auto; display: flex; gap: 14px; flex-wrap: wrap; align-items: center; font-size: 10.5px; letter-spacing: .1em; color: var(--muted); }
.status b { color: var(--tan); font-weight: 500; }
.status .live { color: #8fd3a6; }
.ask { font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--gilt); border: 1px solid var(--gilt); padding: 7px 12px; text-decoration: none; }
.ask:hover { background: rgba(230,185,79,.1); }
.top .tools { margin-left: auto; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.top .status + .tools { margin-left: 0; }

/* Inside the site shell the shell's top bar is the only one */
html.embedded { --gutter: 0px; }
html.embedded header.top { display: none !important; }
html.embedded body::after { display: none; }   /* the shell draws the scanlines and vignette once */
html.embedded .site { padding: 0; }

/* ── Document pages (Sources, Sprints): a framed column ── */

.site { min-height: 100%; display: flex; flex-direction: column; gap: 10px; padding: 10px var(--gutter); }
.site > .top { flex: 0 0 auto; }
.page-head { padding: 22px 20px 18px; display: grid; gap: 6px; }
.page-head h1 { margin: 0; font-family: var(--serif); font-weight: 500; font-size: 34px; line-height: 1.05; color: var(--bone); }
.page-head p { margin: 0; font-family: var(--serif); font-size: 17px; line-height: 1.45; color: var(--tan); max-width: 68ch; }

/* Touch: controls people tap get at least a 40px target */
@media (pointer: coarse) {
    .btn, .seg button { min-height: 40px; }
    .chip { min-height: 36px; }
    .nav a { min-height: 40px; display: inline-flex; align-items: center; }
}

@media (max-width: 900px) {
    .top { row-gap: 8px; }
    .status { margin-left: 0; width: 100%; }
    .top .tools { margin-left: 0; width: 100%; }
    .bs em { display: none; }
    .bl { font-size: 26px; }
    .page-head h1 { font-size: 28px; }
}

/* ── Phones: the top bar is the wordmark and a three-line menu ── */

.menu-btn { display: none; }
@media (max-width: 900px) {
    header.top .nav, header.top .acct, header.top .status, header.top .top-gap { display: none !important; }
    header.top { flex-wrap: nowrap; padding: 6px 12px; }
    .bs { display: none; }
    .menu-btn {
        display: inline-grid;
        align-content: center;
        gap: 5px;
        margin-left: auto;
        width: 44px;
        height: 40px;
        padding: 0 11px;
        border: 1px solid var(--rule-2);
    }
    .menu-btn i { display: block; height: 2px; background: var(--gilt); }
    .menu-btn[aria-expanded="true"] { border-color: var(--gilt); }
}
.smenu-back { position: fixed; inset: 0; z-index: 4500; background: rgba(3, 4, 9, .6); }
.smenu {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(340px, 88vw);
    display: flex;
    flex-direction: column;
    padding-bottom: env(safe-area-inset-bottom, 0px);
    box-shadow: -18px 0 40px rgba(0, 0, 0, .55);
}
.smenu .ph { align-items: center; }
.smenu-x { margin-left: auto; width: 40px; height: 40px; font-size: 22px; line-height: 1; color: var(--muted); }
.smenu-x:hover { color: var(--bone); }
.smenu-body { flex: 1; overflow: auto; padding: 4px 0 16px; overscroll-behavior: contain; }
.smenu-sec { display: grid; padding: 12px 0 6px; border-bottom: 1px solid var(--rule); }
.smenu-sec > .kicker { padding: 0 16px 6px; }
.smenu-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    min-height: 44px;
    padding: 8px 16px;
    text-align: left;
    text-decoration: none;
    font: 500 12px var(--mono);
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--tan);
    border-left: 2px solid transparent;
}
.smenu-item:hover { color: var(--bone); background: rgba(255, 255, 255, .03); }
.smenu-item.on { color: var(--bone); border-left-color: var(--gilt); background: var(--panel-2); }
.smenu-sess { text-transform: none; letter-spacing: .02em; font-size: 12.5px; color: var(--bone); }
.smenu-sess span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.smenu-sess time { flex: 0 0 auto; font-size: 10px; color: var(--muted); }
.smenu-new { color: var(--gilt); }
.smenu-all { font-size: 10.5px; color: var(--muted); }
.smenu-note { margin: 0; padding: 4px 16px 10px; font: 500 11px/1.5 var(--mono); color: var(--muted); }
.smenu-who { margin: 0; padding: 4px 16px 10px; font: 500 12.5px var(--mono); color: var(--bone); }
.smenu-sec > .btn { margin: 0 16px 8px; justify-self: start; }
.smenu-acts { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 16px 8px; }
body.smenu-open { overflow: hidden; }