/* ============================================================================
   PLUTUS TECHNOLOGY · "ENGINE ROOM" DESIGN SYSTEM
   The sister of GMI's Observatory: same skeleton, same three typefaces, a
   different temperature. GMI is copper on warm black — an observatory at
   dusk. Plutus is the machine at 06:45: ice and cold steel on blue-black,
   verdigris for nominal, ember for refused. Every color here means something.
   ============================================================================ */

:root {
    /* --- Plutus cold-steel palette --- */
    --pl-ice:        #9BD1FF;   /* accent: links, HUD text, labels */
    --pl-frost:      #DCEBFF;   /* metal highlight */
    --pl-cobalt:     #4F8FE6;   /* metal mid */
    --pl-indigo:     #2B4C8C;   /* metal deep */
    --pl-abyss:      #172A4F;
    --pl-silver:     #D5DBE4;
    --pl-slate:      #8C97A8;
    --pl-gunmetal:   #4E5766;
    --pl-charcoal:   #262C36;

    /* semantic — a trading system's two verdicts */
    --pl-nominal:    #6FD6B0;   /* pass, fresh, paper-nominal */
    --pl-refused:    #FF8A5B;   /* refused, risk, stale, fail */
    --pl-caution:    #E6C06A;

    --metal:        linear-gradient(120deg, #DCEBFF 0%, #4F8FE6 46%, #2B4C8C 100%);
    --metal-soft:   linear-gradient(120deg, rgba(79,143,230,0.95) 0%, rgba(43,76,140,0.95) 100%);
    --metal-steel:  linear-gradient(120deg, #D5DBE4 0%, #8C97A8 50%, #4E5766 100%);

    /* --- surfaces: blue-black, not tinted grey --- */
    --bg-void:     #06080D;
    --bg-base:     #090C13;
    --bg-panel:    #10141D;
    --bg-elevated: #161B26;
    --glass:       rgba(16, 20, 29, 0.64);
    --glass-2:     rgba(24, 30, 42, 0.55);
    --hairline:    rgba(155, 209, 255, 0.16);
    --hairline-2:  rgba(255, 255, 255, 0.07);

    --text-bright: #EEF2F7;
    --text:        #C0C7D1;
    --text-muted:  #7E8794;

    --glow-ice: 0 0 0 1px rgba(155,209,255,0.20), 0 10px 34px rgba(79,143,230,0.16);
    --shadow-card: 0 12px 34px rgba(0, 0, 0, 0.45);
    --radius: 14px;
    --radius-sm: 9px;

    --font-display: 'Chakra Petch', ui-sans-serif, system-ui, sans-serif;
    --font-body:    'Outfit', ui-sans-serif, system-ui, sans-serif;
    --font-mono:    'JetBrains Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;

    --th-primary: var(--pl-cobalt);
    --th-primary-dark: var(--pl-indigo);
    --th-secondary: var(--pl-slate);
    --th-dark: var(--text-bright);
    --th-light: var(--bg-panel);
}

/* ---------------------------------------------------------------- base ---- */
html, body {
    font-family: var(--font-body);
    background-color: var(--bg-void);
    color: var(--text);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

body {
    background-image:
        radial-gradient(1100px 620px at 6% -12%, rgba(79,143,230,0.18), transparent 60%),
        radial-gradient(950px 620px at 102% -4%, rgba(111,214,176,0.07), transparent 56%),
        radial-gradient(820px 820px at 50% 128%, rgba(43,76,140,0.12), transparent 60%),
        linear-gradient(180deg, #06080D 0%, #080B12 100%);
    background-attachment: fixed;
    min-height: 100vh;
}

/* the grid is finer than GMI's: ledger paper, not blueprint */
body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background-image:
        linear-gradient(rgba(155,209,255,0.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(155,209,255,0.04) 1px, transparent 1px);
    background-size: 32px 32px;
    -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 0%, #000 35%, transparent 86%);
            mask-image: radial-gradient(ellipse 80% 70% at 50% 0%, #000 35%, transparent 86%);
}

.page, main, .content { position: relative; z-index: 1; }
::selection { background: rgba(79,143,230,0.35); color: #fff; }

* { scrollbar-width: thin; scrollbar-color: #26344d #080a0f; }
*::-webkit-scrollbar { width: 11px; height: 11px; }
*::-webkit-scrollbar-track { background: #080a0f; }
*::-webkit-scrollbar-thumb { background: linear-gradient(180deg, #2b3c5c, #172033); border-radius: 7px; border: 2px solid #080a0f; }
*::-webkit-scrollbar-thumb:hover { background: var(--pl-indigo); }

/* ------------------------------------------------------- typography ------ */
h1, h2, h3, h4, h5, h6 { color: var(--text-bright); font-family: var(--font-display); font-weight: 600; letter-spacing: -0.01em; }
.display-1, .display-2, .display-3, .display-4, .display-5, .display-6 {
    font-family: var(--font-display); font-weight: 700; letter-spacing: -0.015em;
    background: var(--metal); -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: transparent;
}
.lead { color: var(--text); font-weight: 300; font-size: 1.18rem; max-width: 62ch; }
p { color: var(--text); max-width: 72ch; }
.card p, .card .lead, .ledger p { max-width: none; }
small, .small { color: var(--text-muted); }
strong, b { color: var(--text-bright); font-weight: 600; }
hr { border-color: var(--hairline-2); opacity: 1; }
a, .btn-link { color: var(--pl-ice); text-decoration: none; }
a:hover, .btn-link:hover { color: var(--pl-frost); }

code, kbd, samp {
    font-family: var(--font-mono); color: var(--pl-ice);
    background: rgba(79,143,230,0.10); border: 1px solid var(--hairline);
    border-radius: 5px; padding: 0.08em 0.4em; font-size: 0.86em;
}
pre code { background: none; border: none; padding: 0; }

.metal-text { background: var(--metal); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; }
.steel-text { background: var(--metal-steel); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; }
.tele-label {
    font-family: var(--font-mono); text-transform: uppercase; letter-spacing: 0.2em;
    font-size: 0.7rem; font-weight: 500; color: var(--pl-ice);
    display: inline-flex; align-items: center; gap: 0.6rem;
}
.tele-label::before { content: ""; width: 18px; height: 1px; background: linear-gradient(90deg, var(--pl-cobalt), transparent); display: inline-block; }

/* verdict colors as text */
.nominal { color: var(--pl-nominal) !important; }
.refused { color: var(--pl-refused) !important; }
.caution { color: var(--pl-caution) !important; }

/* ------------------------------------------------------------- ledger ----- */
/* The one bold element on the site: a terminal ledger that prints real numbers. */
.ledger {
    font-family: var(--font-mono);
    font-size: 0.86rem;
    line-height: 1.75;
    color: var(--text);
    background:
        linear-gradient(180deg, rgba(155,209,255,0.05), transparent 30%),
        #070A11;
    border: 1px solid var(--hairline);
    border-radius: var(--radius);
    box-shadow: var(--shadow-card), inset 0 1px 0 rgba(255,255,255,0.04), 0 0 60px rgba(79,143,230,0.08);
    padding: 1.4rem 1.6rem;
    overflow-x: auto;
    white-space: pre;
    position: relative;
}
.ledger::before {
    content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
    background: var(--metal); border-radius: var(--radius) 0 0 var(--radius);
}
.ledger .k { color: var(--text-muted); }
.ledger .v { color: var(--text-bright); }
.ledger .hi { color: var(--pl-ice); }
.ledger .pass { color: var(--pl-nominal); font-weight: 600; }
.ledger .fail { color: var(--pl-refused); font-weight: 600; }
.ledger .cap { color: var(--pl-caution); }
.ledger-title {
    font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.22em; text-transform: uppercase;
    color: var(--pl-ice); margin-bottom: 0.6rem; display: flex; align-items: center; gap: 0.6rem;
}

/* ------------------------------------------------------------- cards ------ */
.card {
    background: var(--glass); backdrop-filter: blur(16px) saturate(120%); -webkit-backdrop-filter: blur(16px) saturate(120%);
    border: 1px solid var(--hairline-2); border-radius: var(--radius); box-shadow: var(--shadow-card); color: var(--text);
    transition: border-color .28s ease, box-shadow .28s ease; overflow: hidden;
}
.card:hover { border-color: var(--hairline); box-shadow: 0 18px 48px rgba(0,0,0,0.55), 0 0 0 1px rgba(155,209,255,0.18); }
.card-body { color: var(--text); }
.card-title, .card-body h1, .card-body h2, .card-body h3, .card-body h4, .card-body h5, .card-body h6 { color: var(--text-bright); }
.card-header { background: rgba(255,255,255,0.025); border-bottom: 1px solid var(--hairline); color: var(--text-bright); font-family: var(--font-display); font-weight: 600; }
.card-header h1, .card-header h2, .card-header h3, .card-header h4, .card-header h5, .card-header h6 { color: inherit; margin: 0; }
.card-header.bg-primary { background: var(--metal-soft) !important; color: #06101f !important; border-bottom: 1px solid rgba(0,0,0,0.25); box-shadow: inset 0 -1px 0 rgba(255,255,255,0.15); }
.card-header.bg-secondary { background: linear-gradient(120deg, rgba(140,151,168,0.92), rgba(78,87,102,0.92)) !important; color: #0c1017 !important; }
.card-header.bg-dark { background: rgba(8,11,17,0.7) !important; color: var(--text-bright) !important; }
.card-header.bg-success { background: linear-gradient(120deg,#1c7a58,#125440) !important; color:#eafff5 !important; }
.card-header.bg-info    { background: linear-gradient(120deg,#1f6f88,#134f63) !important; color:#eafaff !important; }
.card-header.bg-warning { background: linear-gradient(120deg,#b78a2e,#8a651d) !important; color:#fff7e6 !important; }
.card-header.bg-danger  { background: linear-gradient(120deg,#a1452e,#732e1f) !important; color:#ffeceb !important; }
.card-header.bg-primary *, .card-header.bg-secondary * { color: inherit !important; }
.card.border-primary, .card.border-success, .card.border-info, .card.border-warning, .card.border-danger { border-color: var(--hairline) !important; }

/* a card that is one of the seven roles, or one phase: a left rule, not a shadow */
.role-card { border-left: 3px solid var(--pl-cobalt); }
.role-card.nominal-rule { border-left-color: var(--pl-nominal); }
.role-card.refused-rule { border-left-color: var(--pl-refused); }

/* ----------------------------------------------------------- buttons ------ */
.btn { font-family: var(--font-body); font-weight: 500; border-radius: 9px; }
.btn-primary { background: var(--metal); border: none; color: #06101f; font-weight: 600; }
.btn-primary:hover, .btn-primary:focus { color: #06101f; filter: brightness(1.08); box-shadow: var(--glow-ice); }
.btn-outline-primary { color: var(--pl-ice); border-color: rgba(155,209,255,0.42); }
.btn-outline-primary:hover { background: var(--metal); border-color: transparent; color: #06101f; }
.btn-outline-secondary { color: var(--pl-silver); border-color: rgba(213,219,228,0.34); }
.btn-outline-secondary:hover { background: var(--metal-steel); border-color: transparent; color: #0c1017; }
.btn-outline-success { color: var(--pl-nominal); border-color: rgba(111,214,176,0.4); }
.btn-outline-success:hover { background:#1c7a58; color:#fff; border-color:transparent; }
.btn-outline-info { color:#5cc8e0; border-color: rgba(92,200,224,0.4); }
.btn-outline-info:hover { background:#1f6f88; color:#fff; border-color:transparent; }
.btn-outline-warning { color: var(--pl-caution); border-color: rgba(230,192,106,0.4); }
.btn-outline-danger { color: var(--pl-refused); border-color: rgba(255,138,91,0.4); }
.btn:focus, .btn:active:focus, .form-control:focus { box-shadow: 0 0 0 0.18rem rgba(79,143,230,0.35); }

/* -------------------------------------------------- text/bg utilities ----- */
.text-primary   { color: var(--pl-ice) !important; }
.text-secondary { color: var(--pl-slate) !important; }
.text-dark      { color: var(--text-bright) !important; }
.text-muted     { color: var(--text-muted) !important; }
.text-body      { color: var(--text) !important; }
.text-success   { color: var(--pl-nominal) !important; }
.text-info      { color: #5cc8e0 !important; }
.text-warning   { color: var(--pl-caution) !important; }
.text-danger    { color: var(--pl-refused) !important; }
.text-white     { color: #f2f5f9 !important; }
.bg-primary { background: var(--metal-soft) !important; }
.bg-secondary { background: linear-gradient(120deg, var(--pl-gunmetal), var(--pl-charcoal)) !important; }
.bg-light { background: rgba(255,255,255,0.04) !important; color: var(--text) !important; }
.bg-white { background: var(--bg-panel) !important; color: var(--text) !important; }
.bg-dark { background: rgba(7,10,16,0.72) !important; }
.border-primary { border-color: var(--pl-cobalt) !important; }
.th-accent-border { border-left: 3px solid var(--pl-cobalt); }

/* ------------------------------------------------------------ tables ------ */
.table {
    --bs-table-bg: transparent; --bs-table-color: var(--text); --bs-table-border-color: var(--hairline-2);
    --bs-table-striped-bg: rgba(255,255,255,0.02); --bs-table-striped-color: var(--text);
    --bs-table-hover-bg: rgba(79,143,230,0.08); --bs-table-hover-color: var(--text-bright);
    color: var(--text); border-color: var(--hairline-2);
}
.table > thead { color: var(--text-bright); }
.table > thead th {
    font-family: var(--font-mono); text-transform: uppercase; letter-spacing: 0.05em; font-size: 0.74rem; font-weight: 600;
    color: var(--pl-ice); border-bottom: 1px solid var(--hairline); background: rgba(79,143,230,0.06);
}
.table td, .table th { border-color: var(--hairline-2); }
.table td.num, .table th.num { font-family: var(--font-mono); text-align: right; font-variant-numeric: tabular-nums; }

/* -------------------------------------------------------- list groups ----- */
.list-group { --bs-list-group-bg: transparent; --bs-list-group-color: var(--text); --bs-list-group-border-color: var(--hairline-2); --bs-list-group-action-hover-bg: rgba(79,143,230,0.08); --bs-list-group-action-hover-color: var(--text-bright); }
.list-group-item { background: transparent; color: var(--text); border-color: var(--hairline-2); }
.list-group-item strong { color: var(--text-bright); }

/* -------------------------------------------------------- breadcrumb ------ */
.breadcrumb { font-family: var(--font-mono); font-size: 0.78rem; letter-spacing: 0.03em; }
.breadcrumb-item, .breadcrumb-item.active { color: var(--text-muted); }
.breadcrumb-item a { color: var(--pl-ice); }
.breadcrumb-item + .breadcrumb-item::before { color: var(--text-muted); content: "›"; }

/* ----------------------------------------------------------- badges ------- */
.badge { font-family: var(--font-mono); font-weight: 500; letter-spacing: 0.02em; }
.badge.bg-primary { background: var(--metal-soft) !important; color: #06101f !important; }
.badge.bg-secondary { background: linear-gradient(120deg, var(--pl-gunmetal), var(--pl-charcoal)) !important; color: var(--text-bright) !important; }
.badge.bg-light { background: rgba(255,255,255,0.08) !important; color: var(--text-bright) !important; }
.badge.bg-success { background: rgba(111,214,176,0.18) !important; color: var(--pl-nominal) !important; border: 1px solid rgba(111,214,176,0.35); }
.badge.bg-danger { background: rgba(255,138,91,0.16) !important; color: var(--pl-refused) !important; border: 1px solid rgba(255,138,91,0.35); }
.badge.bg-warning { background: rgba(230,192,106,0.16) !important; color: var(--pl-caution) !important; border: 1px solid rgba(230,192,106,0.35); }

/* ----------------------------------------------------------- alerts ------- */
.alert { border-radius: var(--radius); border: 1px solid var(--hairline-2); background: var(--glass-2); color: var(--text); }
.alert-primary { color: var(--pl-frost); background: rgba(79,143,230,0.12); border-color: rgba(155,209,255,0.28); }
.alert-info    { color: #bfe6f0; background: rgba(92,200,224,0.09); border-color: rgba(92,200,224,0.22); }
.alert-success { color: #c6f2e0; background: rgba(111,214,176,0.09); border-color: rgba(111,214,176,0.22); }
.alert-warning { color: #f0dca6; background: rgba(230,192,106,0.09); border-color: rgba(230,192,106,0.22); }
.alert-danger  { color: #ffd4c4; background: rgba(255,138,91,0.09); border-color: rgba(255,138,91,0.22); }

/* ------------------------------------------------------------ figures ----- */
.diagram-figure {
    background: radial-gradient(120% 100% at 50% 0%, rgba(79,143,230,0.06), transparent 70%), var(--glass);
    border: 1px solid var(--hairline); border-radius: var(--radius);
    padding: 1.2rem 1.25rem 1rem; margin: 1.25rem 0;
    box-shadow: var(--shadow-card), inset 0 1px 0 rgba(255,255,255,0.03); overflow-x: auto;
}
.diagram-figure img { display: block; max-width: 100%; height: auto; margin: 0 auto; border-radius: 8px; background: #fff; }
.diagram-cap { margin-top: 0.9rem; padding-top: 0.75rem; border-top: 1px dashed var(--hairline-2); font-family: var(--font-mono); font-size: 0.74rem; letter-spacing: 0.04em; color: var(--text-muted); text-align: center; }

/* HUD status dot */
.hud-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--pl-nominal); box-shadow: 0 0 0 0 rgba(111,214,176,0.6); animation: hud-pulse 2.4s infinite; display: inline-block; }
@keyframes hud-pulse { 0% { box-shadow: 0 0 0 0 rgba(111,214,176,0.55); } 70% { box-shadow: 0 0 0 7px rgba(111,214,176,0); } 100% { box-shadow: 0 0 0 0 rgba(111,214,176,0); } }

/* one page-load reveal, and nothing else moves on its own */
@keyframes pl-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
article.content { animation: pl-rise 0.5s cubic-bezier(.2,.7,.2,1) both; }
@media (prefers-reduced-motion: reduce) { article.content, .hud-dot { animation: none; } .card { transition: none; } }

h1:focus { outline: none; }
a:focus-visible, button:focus-visible { outline: 2px solid var(--pl-ice); outline-offset: 2px; }

/* logos */
.th-logo { max-height: 38px; width: auto; }
.leopard-logo {
    height: 30px; width: auto; border-radius: 12px; padding: 7px 13px;
    background: linear-gradient(180deg, #f6f3ec 0%, #e9e3d6 100%);
    border: 1px solid rgba(155,209,255,0.35); box-shadow: 0 6px 18px rgba(0,0,0,0.55), inset 0 1px 0 rgba(255,255,255,0.7);
}
@media (max-width: 768px) { .th-logo { max-height: 30px; } .leopard-logo { height: 26px; border-radius: 10px; padding: 6px 11px; } }

/* architect */
.architect-portrait { width: 170px; height: 170px; object-fit: cover; border-radius: 50%; border: 2px solid rgba(155,209,255,0.35); box-shadow: 0 12px 34px rgba(0,0,0,0.5), 0 0 0 6px rgba(79,143,230,0.10); }

/* phase strip on the build log */
.phase { display: grid; grid-template-columns: 6.5rem 1fr auto; gap: 1rem; align-items: baseline; padding: 0.9rem 0; border-bottom: 1px solid var(--hairline-2); }
.phase:last-child { border-bottom: none; }
.phase-id { font-family: var(--font-mono); font-size: 0.8rem; color: var(--pl-ice); letter-spacing: 0.06em; }
.phase-name { color: var(--text-bright); font-family: var(--font-display); font-weight: 600; }
.phase-note { color: var(--text-muted); font-size: 0.92rem; }
.phase-state { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; }
@media (max-width: 640px) { .phase { grid-template-columns: 1fr; } }