/* ═══════════════════════════════════════════════════════════════
   gpe.css - GPE PHASE design system

   Soft-card dashboard language: large radii, generous padding,
   pill controls, quiet shadows. Rendered entirely in a neutral
   grey ramp (black → white and the degrees between), with light
   and dark themes driven off one set of semantic tokens.

   Theme resolution:
     html[data-theme="light"|"dark"]  explicit user choice (theme.js)
     no attribute                     follows prefers-color-scheme

   Namespaced under static/gpe/. The tool assets live in static/CSS
   and static/Images; a lowercase static/css would collide with those
   on Windows and then break on case-sensitive Linux hosting.
═══════════════════════════════════════════════════════════════ */

/* ── Grey ramp: the only hues in the system ── */
:root {
    --g0:   #ffffff;
    --g50:  #f7f8f9;
    --g100: #eff1f3;
    --g150: #e6e8eb;
    --g200: #d9dce0;
    --g300: #bcc1c7;
    --g400: #949aa2;
    --g500: #70767e;
    --g600: #545a62;
    --g700: #3a4047;
    --g800: #24282d;
    --g900: #16191d;
    --g950: #0e1013;
    --g1000:#08090b;

    --radius-xl: 24px;
    --radius-lg: 18px;
    --radius-md: 12px;
    --radius-sm: 9px;
    --radius-pill: 999px;

    --shadow-card: 0 1px 2px rgba(16, 18, 22, 0.04), 0 8px 24px rgba(16, 18, 22, 0.06);
    --shadow-pop:  0 8px 30px rgba(16, 18, 22, 0.14);

    --ease: cubic-bezier(0.4, 0, 0.2, 1);
}

/* ── Light (default) ── */
:root {
    --bg:          var(--g100);
    --surface:     var(--g0);
    --surface-2:   var(--g50);
    --surface-ink: var(--g900);   /* inverted panels / dark blocks */
    --on-ink:      var(--g0);

    --text:        var(--g900);
    --text-2:      var(--g500);
    --text-3:      var(--g400);

    --line:        var(--g150);
    --line-2:      var(--g200);

    --accent:      var(--g900);   /* primary emphasis = near-black */
    --on-accent:   var(--g0);

    --field:       var(--g0);
    --field-line:  var(--g200);

    --track:       var(--g150);   /* chart/meter background */
    --fill:        var(--g800);   /* chart/meter foreground */

    --ok-bg:   var(--g100);  --ok-fg:   var(--g800);
    --warn-bg: var(--g150);  --warn-fg: var(--g700);
    --bad-bg:  var(--g200);  --bad-fg:  var(--g900);

    --shadow-card: 0 1px 2px rgba(16, 18, 22, 0.04), 0 8px 24px rgba(16, 18, 22, 0.06);
    color-scheme: light;
}

/* ── Dark: only ever an explicit choice ──
   White is the product default, so the OS preference is deliberately not
   consulted: the app looks the same on every machine until the viewer picks
   dark from the toggle. That also keeps it white when JS is unavailable. */
:root[data-theme="dark"] {
    --bg:          var(--g1000);
    --surface:     var(--g900);
    --surface-2:   var(--g950);
    --surface-ink: var(--g0);
    --on-ink:      var(--g900);

    --text:        var(--g50);
    --text-2:      var(--g400);
    --text-3:      var(--g500);

    --line:        #23272d;
    --line-2:      #2e333a;

    --accent:      var(--g0);
    --on-accent:   var(--g900);

    --field:       var(--g950);
    --field-line:  #2e333a;

    --track:       #23272d;
    --fill:        var(--g300);

    --ok-bg:   rgba(255,255,255,0.09); --ok-fg:   var(--g100);
    --warn-bg: rgba(255,255,255,0.07); --warn-fg: var(--g200);
    --bad-bg:  rgba(255,255,255,0.13); --bad-fg:  var(--g0);

    --shadow-card: 0 1px 2px rgba(0,0,0,0.4), 0 8px 24px rgba(0,0,0,0.45);
    color-scheme: dark;
}

/* ═══════════════════════════════════════════════
   BASE
═══════════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

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

body {
    background: var(--bg);
    color: var(--text);
    font-family: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
    font-size: 14px;
    line-height: 1.5;
    min-height: 100vh;
    -webkit-font-smoothing: antialiased;
    transition: background 0.2s var(--ease), color 0.2s var(--ease);
}

a { color: inherit; text-decoration: none; }

img { max-width: 100%; }

/* Inline SVG icons, used in place of emoji. They inherit the text colour, so
   one icon works on every surface and in both themes. */
.ic {
    width: 16px;
    height: 16px;
    fill: currentColor;
    flex-shrink: 0;
    display: block;
}

.ic-sm { width: 13px; height: 13px; }
.ic-lg { width: 20px; height: 20px; }

/* Icons sitting inside a text run need to sit on the baseline. */
.btn .ic, .pill .ic, .chip .ic, .msg .ic { display: inline-block; vertical-align: -2px; }

/* Logo art is black with real alpha; invert it only when the surface is dark. */
.brand-logo, .topbar-mark { filter: none; }
:root[data-theme="dark"] .brand-logo,
:root[data-theme="dark"] .topbar-mark { filter: invert(1); }

/* ═══════════════════════════════════════════════
   APP SHELL
═══════════════════════════════════════════════ */
.shell { max-width: 1180px; margin: 0 auto; padding: 20px; }

.topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    padding: 12px 18px;
    margin-bottom: 22px;
    box-shadow: var(--shadow-card);
}

.topbar-brand { display: flex; align-items: center; gap: 11px; }
.topbar-mark  { width: 26px; height: 26px; }

.topbar-name {
    font-size: 13px;
    font-weight: 800;
    letter-spacing: -0.2px;
}

.topbar-right { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* ── Hero ── */
.hero { text-align: center; padding: 26px 16px 30px; }

.hero-eyebrow {
    font-size: 13px;
    font-weight: 500;
    color: var(--text-2);
    margin-bottom: 6px;
}

.hero-title {
    font-size: 28px;
    font-weight: 800;
    letter-spacing: -0.7px;
    margin-bottom: 20px;
}

.hero-actions {
    display: flex;
    gap: 10px;
    justify-content: center;
    flex-wrap: wrap;
}

/* Pill button with a filled icon disc, per the reference layout. */
.pill-btn {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-pill);
    padding: 7px 18px 7px 7px;
    font-size: 13.5px;
    font-weight: 700;
    color: var(--text);
    cursor: pointer;
    font-family: inherit;
    box-shadow: var(--shadow-card);
    transition: transform 0.12s var(--ease), box-shadow 0.18s var(--ease), border-color 0.18s var(--ease);
}

.pill-btn:hover { transform: translateY(-1px); box-shadow: var(--shadow-pop); }
.pill-btn:active { transform: translateY(0); }

.pill-ico {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: var(--surface-ink);
    color: var(--on-ink);
    flex-shrink: 0;
}

.pill-ico svg { width: 15px; height: 15px; fill: currentColor; display: block; }

/* Tonal variants - "degrees" of the ramp rather than hues. */
.pill-ico.t1 { background: var(--g800); color: var(--g0); }
.pill-ico.t2 { background: var(--g600); color: var(--g0); }
.pill-ico.t3 { background: var(--g400); color: var(--g900); }
:root[data-theme="dark"] .pill-ico.t1 { background: var(--g0);   color: var(--g900); }
:root[data-theme="dark"] .pill-ico.t2 { background: var(--g300); color: var(--g900); }
:root[data-theme="dark"] .pill-ico.t3 { background: var(--g500); color: var(--g0); }

/* ═══════════════════════════════════════════════
   CARDS
═══════════════════════════════════════════════ */
.card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-xl);
    padding: 22px;
    box-shadow: var(--shadow-card);
}

.card-ink {
    background: var(--surface-ink);
    color: var(--on-ink);
    border-color: transparent;
}

.card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 16px;
}

.card-title { font-size: 16px; font-weight: 800; letter-spacing: -0.3px; }

.card-sub { font-size: 12.5px; color: var(--text-2); margin-top: 4px; line-height: 1.6; }

.card-ink .card-sub { color: rgba(255,255,255,0.62); }
:root[data-theme="dark"] .card-ink .card-sub { color: rgba(0,0,0,0.6); }

/* Small "This Week ⌄" style chip */
.chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-2);
    background: var(--surface-2);
    border: 1px solid var(--line);
    border-radius: var(--radius-pill);
    padding: 6px 12px;
    transition: color 0.18s var(--ease), border-color 0.18s var(--ease), background 0.18s var(--ease);
}

a.chip:hover, button.chip:hover { color: var(--text); border-color: var(--line-2); }

.chip-strong { background: var(--surface-ink); color: var(--on-ink); border-color: transparent; }
a.chip-strong:hover { color: var(--on-ink); opacity: 0.88; }

/* Trend badge - ↗ 25% */
.trend {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 11.5px;
    font-weight: 700;
    color: var(--ok-fg);
    background: var(--ok-bg);
    border-radius: var(--radius-pill);
    padding: 5px 10px;
}

/* Stat card with an accent rule down the left edge */
.stat {
    position: relative;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    padding: 18px 20px 18px 24px;
    overflow: hidden;
    box-shadow: var(--shadow-card);
}

.stat::before {
    content: '';
    position: absolute;
    left: 0; top: 14px; bottom: 14px;
    width: 4px;
    border-radius: 0 4px 4px 0;
    background: var(--fill);
}

.stat.t2::before { background: var(--g500); }
.stat.t3::before { background: var(--g300); }

.stat-value { font-size: 26px; font-weight: 800; letter-spacing: -0.8px; margin: 8px 0 2px; }
.stat-label { font-size: 12.5px; color: var(--text-2); }

/* ═══════════════════════════════════════════════
   GRID HELPERS
═══════════════════════════════════════════════ */
.grid { display: grid; gap: 16px; }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.stack > * + * { margin-top: 16px; }

/* ═══════════════════════════════════════════════
   FORMS
═══════════════════════════════════════════════ */
.field { margin-bottom: 15px; }

.lbl, .field label {
    display: block;
    font-size: 12px;
    font-weight: 700;
    color: var(--text-2);
    margin-bottom: 7px;
}

input[type=text], input[type=password], input[type=number],
input[type=datetime-local], input[type=file], select, textarea {
    width: 100%;
    background: var(--field);
    border: 1px solid var(--field-line);
    border-radius: var(--radius-md);
    padding: 11px 14px;
    color: var(--text);
    font-family: inherit;
    font-size: 13.5px;
    font-weight: 500;
    outline: none;
    transition: border-color 0.18s var(--ease), box-shadow 0.18s var(--ease);
}

input::placeholder { color: var(--text-3); }
input:hover, select:hover, textarea:hover { border-color: var(--line-2); }

input:focus, select:focus, textarea:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 16%, transparent);
}

select option { background: var(--surface); color: var(--text); }

input[type=checkbox] { width: auto; accent-color: var(--accent); }

/* ── Buttons ── */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    border: 1px solid var(--line-2);
    border-radius: var(--radius-md);
    background: var(--surface);
    color: var(--text);
    font-family: inherit;
    font-size: 13px;
    font-weight: 700;
    padding: 10px 16px;
    cursor: pointer;
    transition: background 0.18s var(--ease), border-color 0.18s var(--ease), transform 0.1s var(--ease);
}

.btn:hover { border-color: var(--text-3); background: var(--surface-2); }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: 0.4; cursor: not-allowed; transform: none; }

.btn-primary {
    background: var(--accent);
    color: var(--on-accent);
    border-color: var(--accent);
}

.btn-primary:hover { background: var(--accent); border-color: var(--accent); opacity: 0.88; }

.btn-danger {
    background: var(--bad-bg);
    color: var(--bad-fg);
    border-color: transparent;
}

.btn-danger:hover { background: var(--bad-bg); border-color: var(--text-3); }

.btn-sm { padding: 7px 12px; font-size: 12px; border-radius: var(--radius-sm); }

.btn-block { width: 100%; }

.submit {
    width: 100%;
    margin-top: 6px;
    padding: 13px;
    border: 0;
    border-radius: var(--radius-md);
    background: var(--accent);
    color: var(--on-accent);
    font-family: inherit;
    font-size: 13.5px;
    font-weight: 800;
    cursor: pointer;
    transition: opacity 0.18s var(--ease), transform 0.1s var(--ease);
}

.submit:hover { opacity: 0.88; }
.submit:active { transform: translateY(1px); }

/* ── Theme toggle ── */
.theme-btn {
    display: inline-grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--surface-2);
    border: 1px solid var(--line);
    color: var(--text-2);
    cursor: pointer;
    transition: color 0.18s var(--ease), border-color 0.18s var(--ease);
}

.theme-btn:hover { color: var(--text); border-color: var(--line-2); }
.theme-btn svg { width: 16px; height: 16px; fill: currentColor; }
.theme-btn .ico-sun  { display: none; }
.theme-btn .ico-moon { display: block; }
:root[data-theme="dark"] .theme-btn .ico-sun  { display: block; }
:root[data-theme="dark"] .theme-btn .ico-moon { display: none; }

/* ═══════════════════════════════════════════════
   MESSAGES
═══════════════════════════════════════════════ */
.msg {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.55;
    border-radius: var(--radius-md);
    padding: 12px 14px;
    margin-bottom: 18px;
    border: 1px solid var(--line);
    background: var(--surface-2);
    color: var(--text);
}

.msg-error { background: var(--bad-bg); color: var(--bad-fg); border-color: transparent; }
.msg-info  { background: var(--ok-bg);  color: var(--ok-fg);  border-color: transparent; }
.msg-warn  { background: var(--warn-bg);color: var(--warn-fg);border-color: transparent; }

/* ═══════════════════════════════════════════════
   TABS
═══════════════════════════════════════════════ */
.tabs { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 20px; }

.tab {
    font-size: 13px;
    font-weight: 700;
    color: var(--text-2);
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-pill);
    padding: 9px 18px;
    transition: all 0.18s var(--ease);
}

.tab:hover { color: var(--text); border-color: var(--line-2); }
.tab.active { color: var(--on-accent); background: var(--accent); border-color: var(--accent); }

/* ═══════════════════════════════════════════════
   TABLES
═══════════════════════════════════════════════ */
.table-wrap { overflow-x: auto; margin: 0 -4px; padding: 0 4px; }

table { width: 100%; border-collapse: collapse; font-size: 13px; min-width: 560px; }

th {
    text-align: left;
    font-size: 11px;
    font-weight: 700;
    color: var(--text-3);
    padding: 0 12px 12px;
    border-bottom: 1px solid var(--line);
    white-space: nowrap;
}

td { padding: 14px 12px; border-bottom: 1px solid var(--line); vertical-align: middle; }
tr:last-child td { border-bottom: 0; }
tbody tr { transition: background 0.15s var(--ease); }
tbody tr:hover { background: var(--surface-2); }

.mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12px; }
.dim  { color: var(--text-2); }

.pill {
    display: inline-block;
    font-size: 11px;
    font-weight: 700;
    border-radius: var(--radius-pill);
    padding: 5px 11px;
    white-space: nowrap;
    background: var(--surface-2);
    color: var(--text-2);
    border: 1px solid var(--line);
}

.pill-on   { background: var(--surface-ink); color: var(--on-ink); border-color: transparent; }
.pill-warn { background: var(--warn-bg); color: var(--warn-fg); border-color: transparent; }
.pill-off  { background: var(--bad-bg);  color: var(--bad-fg);  border-color: transparent; }

.actions { display: flex; gap: 7px; flex-wrap: wrap; }

.empty {
    border: 1px dashed var(--line-2);
    border-radius: var(--radius-lg);
    padding: 44px 24px;
    text-align: center;
    color: var(--text-2);
    font-size: 13.5px;
}

/* Copyable link row */
.linkbox {
    display: flex;
    gap: 8px;
    align-items: center;
    background: var(--surface-2);
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    padding: 7px 8px 7px 12px;
    margin-top: 8px;
}

.linkbox input {
    flex: 1;
    border: 0;
    background: transparent;
    padding: 2px;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 12px;
    color: var(--text-2);
}

.linkbox input:focus { box-shadow: none; border: 0; }

.hint { font-size: 12px; color: var(--text-3); margin-top: 7px; line-height: 1.6; }

/* ═══════════════════════════════════════════════
   TOOL CARDS  (dashboard)
═══════════════════════════════════════════════ */
.tool-card {
    position: relative;
    display: block;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-xl);
    padding: 24px;
    box-shadow: var(--shadow-card);
    transition: transform 0.14s var(--ease), box-shadow 0.2s var(--ease), border-color 0.18s var(--ease);
}

a.tool-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-pop); border-color: var(--line-2); }
.tool-card.locked { opacity: 0.55; }

.tool-icon-wrap {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: var(--surface-ink);
    margin-bottom: 16px;
}

.tool-icon { width: 22px; height: 22px; fill: var(--on-ink); }
.tool-card.locked .tool-icon-wrap { background: var(--track); }
.tool-card.locked .tool-icon { fill: var(--text-3); }

.tool-name { font-size: 16px; font-weight: 800; letter-spacing: -0.3px; margin-bottom: 4px; }
.tool-meta { font-size: 12.5px; color: var(--text-2); }

.tool-badge { position: absolute; top: 20px; right: 20px; }

/* ═══════════════════════════════════════════════
   AUTH  (login)
═══════════════════════════════════════════════ */
body.auth { display: grid; place-items: center; padding: 24px; min-height: 100dvh; }

.auth-card {
    position: relative;
    width: 100%;
    max-width: 400px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-xl);
    padding: 40px 34px 32px;
    box-shadow: var(--shadow-card);
}

.auth-theme { position: absolute; top: 18px; right: 18px; }

.brand { display: flex; flex-direction: column; align-items: center; gap: 14px; margin-bottom: 28px; }
.brand-logo { width: 148px; height: auto; display: block; }

.brand-sub {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-2);
}

/* "Keep me signed in" */
.remember {
    display: flex;
    align-items: center;
    gap: 9px;
    margin: 4px 0 16px;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-2);
    cursor: pointer;
    user-select: none;
}

.remember input { width: auto; margin: 0; cursor: pointer; }
.remember:hover { color: var(--text); }

.setup-note {
    font-size: 13px;
    line-height: 1.65;
    color: var(--text-2);
    text-align: center;
    margin-bottom: 22px;
}

.foot {
    margin-top: 26px;
    padding-top: 18px;
    border-top: 1px solid var(--line);
    text-align: center;
    font-size: 11.5px;
    font-weight: 600;
    color: var(--text-3);
}

/* ═══════════════════════════════════════════════
   RESPONSIVE
═══════════════════════════════════════════════ */
@media (max-width: 640px) {
    .shell { padding: 14px; }
    .topbar { padding: 11px 14px; border-radius: var(--radius-md); }
    .hero-title { font-size: 22px; }
    .card { padding: 18px; border-radius: var(--radius-lg); }
    .auth-card { padding: 32px 22px 26px; }
    .brand-logo { width: 126px; }
    .grid-2, .grid-3 { grid-template-columns: 1fr; }
}

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