/* Eposyne Director web surfaces, on Foundry's design tokens.
   Palette, type, radii, borders, and button shapes are copied from
   LoreWeaver-Foundry/frontend/src/styles/global.css (canonical tokens) and
   its public pages (Login.css, Pricing.css, DeviceApproval.css). The three
   appearance palettes are Foundry's Standard (default), Dark, and Midnight Blue. */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Fira+Code:wght@400;500&display=swap');

:root {
  /* Surfaces: cool, faintly indigo near-black ramp (Foundry Standard) */
  --bg-base: #15151e;
  --bg-panel: #1a1a25;
  --bg-elevated: #1e1e2a;
  --bg-hover: #24242f;
  --surface-1: rgba(255, 255, 255, 0.035);
  --surface-2: rgba(255, 255, 255, 0.06);
  --surface-hover: rgba(255, 255, 255, 0.09);
  --border: rgba(255, 255, 255, 0.08);
  --border-strong: rgba(255, 255, 255, 0.14);
  --text-primary: #e8e8ea;
  --text-secondary: #a0a0a6;
  --text-muted: #6a6a70;
  /* Single structural accent: antique parchment gold, for the acted-upon only */
  --accent: #c9a76a;
  --accent-hover: #d8b87f;
  --accent-dark: #b8965c;
  --accent-foreground: #171511;
  --accent-tint: rgba(201, 167, 106, 0.10);
  --status-success: #7fa884;
  --status-neutral: #8b8b91;
  --status-destructive: #c98b8b;
  --warning: #d49a4b;
  --overlay: rgba(0, 0, 0, 0.45);
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.25);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.3), 0 4px 6px -4px rgba(0, 0, 0, 0.3);
  --font-primary: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'Fira Code', Menlo, Monaco, Consolas, monospace;
  --font-serif: Georgia, serif;
  --radius-sm: 6px;
  --radius: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-shell: 20px;
  --radius-pill: 999px;
  --transition-fast: 0.15s ease-out;
  --measure: 64ch;
  --gutter: clamp(16px, 4vw, 48px);
}

:root[data-theme="dark"] {
  --bg-base: #171717;
  --bg-panel: #202020;
  --bg-elevated: #292929;
  --bg-hover: #343434;
  --text-primary: #ededed;
  --text-secondary: #aaa7a2;
  --text-muted: #76736f;
  --accent: #c7a363;
  --accent-hover: #d4b374;
  --accent-dark: #a8874e;
  --accent-tint: rgba(199, 163, 99, 0.1);
}

:root[data-theme="light"] {
  --bg-base: #f4efe4;
  --bg-panel: #ebe4d7;
  --bg-elevated: #dfd6c7;
  --bg-hover: #d4c8b6;
  --surface-1: rgba(55, 43, 28, 0.045);
  --surface-2: rgba(55, 43, 28, 0.075);
  --surface-hover: rgba(55, 43, 28, 0.11);
  --border: rgba(50, 40, 28, 0.14);
  --border-strong: rgba(50, 40, 28, 0.22);
  --text-primary: #29251f;
  --text-secondary: #655e54;
  --text-muted: #81786b;
  --accent: #7a5418;
  --accent-hover: #6b4915;
  --accent-dark: #80581c;
  --accent-foreground: #fffaf0;
  --accent-tint: rgba(122, 84, 24, 0.12);
  --status-success: #557b5b;
  --status-neutral: #746d63;
  --status-destructive: #a25454;
  --warning: #8a5a12;
  --overlay: rgba(32, 27, 21, 0.38);
  --shadow-sm: 0 1px 2px 0 rgba(47, 38, 27, 0.18);
  --shadow-lg: 0 10px 15px -3px rgba(47, 38, 27, 0.18), 0 4px 6px -4px rgba(47, 38, 27, 0.18);
}

:root[data-theme="midnight-blue"] {
  --bg-base: #0c1628;
  --bg-panel: #111e34;
  --bg-elevated: #172743;
  --bg-hover: #213555;
  --surface-1: rgba(161, 190, 229, 0.045);
  --surface-2: rgba(161, 190, 229, 0.075);
  --surface-hover: rgba(161, 190, 229, 0.12);
  --border: rgba(174, 197, 228, 0.12);
  --border-strong: rgba(174, 197, 228, 0.2);
  --text-primary: #edf2fb;
  --text-secondary: #aabbd2;
  --text-muted: #7186a2;
  --accent: #d1ad62;
  --accent-hover: #dfbd75;
  --accent-dark: #b3904d;
  --accent-foreground: #111827;
  --accent-tint: rgba(209, 173, 98, 0.11);
  --overlay: rgba(3, 9, 20, 0.56);
}

* { box-sizing: border-box; }
html { background: var(--bg-base); color: var(--text-primary); font-family: var(--font-primary); font-size: 16px; line-height: 1.55; -webkit-font-smoothing: antialiased; }
body { margin: 0; min-height: 100vh; background: var(--bg-base); }
a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-hover); text-decoration: underline; text-underline-offset: 3px; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
h1, h2, h3 { font-family: var(--font-primary); font-weight: 600; margin: 0; color: var(--text-primary); }
h1 { font-size: clamp(2rem, 3.4vw, 3rem); line-height: 1.05; letter-spacing: -0.03em; margin-bottom: 0.5em; }
h2 { font-size: 1.3rem; line-height: 1.25; letter-spacing: -0.01em; }
h3 { font-size: 1.1rem; line-height: 1.3; font-weight: 700; }
p { margin: 0 0 1em; max-width: var(--measure); }
.muted { color: var(--text-secondary); }
.mono { font-family: var(--font-mono); font-size: 0.9em; }
code { font-family: var(--font-mono); font-size: 0.86em; background: var(--surface-2); border: 1px solid var(--border); padding: 0.05em 0.35em; border-radius: 4px; }

/* Foundry's kicker: small uppercase pill or plain label, 0.08em tracking */
.kicker { display: inline-flex; width: fit-content; padding: 5px 10px; border: 1px solid var(--border); border-radius: var(--radius-pill); background: var(--bg-elevated); color: var(--text-secondary); font-size: 0.76rem; letter-spacing: 0.08em; text-transform: uppercase; }
.step, .lbl { font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-secondary); font-weight: 600; margin-bottom: 8px; font-style: normal; font-family: var(--font-primary); }

/* Chrome: Foundry's panel menubar, hairline bottom border */
.topbar { display: flex; align-items: center; gap: 28px; padding: 0 var(--gutter); height: 56px; background: var(--bg-panel); border-bottom: 1px solid var(--border); }
.wordmark { font-weight: 600; font-size: 1.15rem; letter-spacing: -0.02em; color: var(--text-primary); text-decoration: none; white-space: nowrap; }
.wordmark:hover { text-decoration: none; color: var(--text-primary); }
.wordmark em { font-style: normal; color: var(--text-secondary); font-weight: 500; }
.topbar nav { display: flex; gap: 4px; flex: 1; }
.topbar nav a { text-decoration: none; color: var(--text-secondary); font-size: 0.92rem; font-weight: 500; padding: 6px 10px; border-radius: var(--radius-sm); }
.topbar nav a:hover { color: var(--text-primary); background: var(--surface-hover); text-decoration: none; }
.topbar nav a.active { color: var(--text-primary); background: var(--surface-2); }
.status { display: inline-flex; align-items: center; gap: 8px; color: var(--text-secondary); white-space: nowrap; font-size: 0.9rem; padding: 4px 10px 4px 8px; border: 1px solid var(--border); border-radius: var(--radius-pill); background: var(--bg-elevated); }
.status::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--status-success); }
.status.down::before { background: var(--status-destructive); }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 8px 24px; min-height: 40px; border-radius: var(--radius-sm); border: 1px solid var(--border-strong); background: var(--bg-elevated); color: var(--text-primary); font: inherit; font-weight: 500; font-size: 0.95rem; cursor: pointer; text-decoration: none; transition: all var(--transition-fast); white-space: nowrap; }
.btn:hover { background: var(--bg-hover); box-shadow: var(--shadow-sm); text-decoration: none; color: var(--text-primary); }
.btn.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-foreground); font-weight: 600; }
.btn.primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); color: var(--accent-foreground); }
.btn[disabled] { opacity: 0.5; cursor: not-allowed; }
.btn.small { padding: 4px 16px; min-height: 32px; font-size: 0.875rem; }

main { padding: 0 var(--gutter) 80px; max-width: 1240px; margin: 0 auto; }
section { padding: 48px 0; border-bottom: 1px solid var(--border); }
section:last-of-type { border-bottom: 0; }
.lede { font-size: 1.05rem; color: var(--text-secondary); line-height: 1.6; }

/* Decision sequence: state -> context -> proposal -> receipt. Shell-style card, hairline dividers. */
.sequence { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; background: var(--bg-panel); }
.sequence > div { padding: 18px 20px; border-right: 1px solid var(--border); }
.sequence > div:last-child { border-right: 0; }
.sequence .proposal { background: var(--accent-tint); box-shadow: inset 0 2px 0 var(--accent); }
.sequence .proposal .step { color: var(--accent); }
.sequence .receipt { box-shadow: inset 0 2px 0 var(--status-success); }
.sequence .receipt .step { color: var(--status-success); }
.sequence p { font-size: 0.92rem; margin: 0; color: var(--text-primary); }

/* Ticket (download): Foundry card, raised surface, 12px radius */
.ticket { border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--bg-elevated); padding: 24px 26px; box-shadow: var(--shadow-sm); }
.ticket dl { display: grid; grid-template-columns: max-content 1fr; gap: 8px 18px; margin: 0 0 18px; font-size: 0.95rem; }
.ticket dt { color: var(--text-secondary); }
.ticket dd { margin: 0; }
.avail { display: inline-flex; align-items: center; gap: 8px; color: var(--status-success); }
.avail::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.avail.rest { color: var(--warning); }

/* Meter */
.meter { border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--bg-elevated); padding: 22px 24px; box-shadow: var(--shadow-sm); }
.meter .big { font-weight: 600; font-size: 2.2rem; line-height: 1; letter-spacing: -0.02em; }
.meter .big small { font-size: 1rem; color: var(--text-secondary); font-weight: 400; letter-spacing: 0; }
.bar { height: 6px; border-radius: 3px; background: var(--surface-2); margin: 14px 0 10px; overflow: hidden; }
.bar > i { display: block; height: 100%; background: var(--accent); border-radius: 3px; }
.bar.full > i { background: var(--status-destructive); }

/* Module cards: state is carried by the left rule and the pill, like Foundry's status pills */
.modules { display: grid; gap: 10px; }
.module { display: grid; grid-template-columns: 1fr auto; gap: 6px 16px; padding: 14px 16px; border-radius: var(--radius); border: 1px solid var(--border); background: var(--surface-1); }
.module.on { box-shadow: inset 3px 0 0 var(--status-success); }
.module.off { color: var(--text-secondary); }
.module h3 { font-size: 0.95rem; font-weight: 700; }
.module.off h3 { color: var(--text-primary); }
.module p { margin: 0; font-size: 0.9rem; grid-column: 1; }
.module .tag { align-self: start; font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; padding: 3px 9px; border-radius: var(--radius-pill); border: 1px solid var(--border); background: var(--bg-elevated); color: var(--text-secondary); }
.module.on .tag { color: var(--status-success); border-color: var(--status-success); }

/* Tables: Foundry .table, panel header */
table { width: 100%; border-collapse: collapse; font-size: 0.9rem; border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; }
thead { background: var(--bg-panel); }
th { text-align: left; font-weight: 600; color: var(--text-primary); padding: 10px 12px; border-bottom: 1px solid var(--border); }
td { padding: 12px; border-bottom: 1px solid var(--border); vertical-align: top; }
tbody tr:nth-child(even) { background: var(--surface-1); }
tbody tr:last-child td { border-bottom: 0; }
tr.default td:first-child::before { content: ''; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); margin-right: 8px; vertical-align: middle; }
td.num, th.num { text-align: right; font-family: var(--font-mono); font-size: 0.86rem; }

/* Panes */
.panes { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.pane { border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--bg-panel); overflow: hidden; box-shadow: var(--shadow-sm); }
.pane header { display: flex; align-items: center; gap: 14px; padding: 12px 16px; border-bottom: 1px solid var(--border); font-weight: 600; font-size: 0.95rem; background: var(--bg-elevated); }
.pane header .right { margin-left: auto; color: var(--text-secondary); font-weight: 400; font-size: 0.86rem; }
textarea, pre.code { font-family: var(--font-mono); font-size: 0.84rem; line-height: 1.55; background: var(--bg-base); color: var(--text-primary); border: 0; margin: 0; padding: 16px; width: 100%; min-height: 360px; resize: vertical; white-space: pre; overflow: auto; }
pre.code { min-height: 0; white-space: pre-wrap; word-break: break-word; }
select, input[type=text] { font: inherit; font-size: 0.92rem; background: var(--surface-2); color: var(--text-primary); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 8px 12px; width: 100%; }
select:focus, input:focus { border-color: var(--accent); outline: none; }
.field { display: grid; gap: 6px; }
.field label { font-size: 0.82rem; color: var(--text-secondary); font-weight: 500; }
.kv { display: grid; grid-template-columns: max-content 1fr; gap: 4px 16px; padding: 12px 16px; border-bottom: 1px solid var(--border); font-size: 0.86rem; }
.kv dt { color: var(--text-secondary); font-family: var(--font-mono); }
.kv dd { margin: 0; font-family: var(--font-mono); }
.resp-head { display: flex; gap: 22px; align-items: baseline; padding: 12px 16px; border-bottom: 1px solid var(--border); flex-wrap: wrap; background: var(--bg-elevated); }
.resp-head .m { font-family: var(--font-mono); font-size: 0.86rem; }
.resp-head .m span { color: var(--text-secondary); font-family: var(--font-primary); margin-right: 6px; }
.http { display: inline-flex; gap: 10px; align-items: baseline; }
.http b { font-family: var(--font-mono); font-weight: 500; color: var(--status-success); }
.http.err b { color: var(--status-destructive); }

.note { border-left: 3px solid var(--accent); padding: 4px 0 4px 14px; color: var(--text-secondary); font-size: 0.92rem; }

footer { padding: 24px var(--gutter); border-top: 1px solid var(--border); background: var(--bg-panel); color: var(--text-secondary); font-size: 0.86rem; display: flex; gap: 24px; flex-wrap: wrap; }
footer a { color: var(--text-secondary); }
footer a:hover { color: var(--text-primary); }

@media (max-width: 900px) {
  .sequence { grid-template-columns: 1fr 1fr; }
  .sequence > div:nth-child(2n) { border-right: 0; }
  .sequence > div:nth-child(-n+2) { border-bottom: 1px solid var(--border); }
  .panes { grid-template-columns: 1fr; }
  .topbar nav { display: none; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }