/* ShiftLedger brand tokens.
   Canonical logo package: SL365_Logo_V2_Package (transparent lockups + icons).
   theme_color / background_color from site.webmanifest.
   Accent indigo/violet aligned with the approved navy/purple identity.
   Semantic ready/warning/error stay distinct from brand decoration.
   Logo containers stay frameless: transparent background, no border, no box-shadow.
*/

:root {
  color-scheme: light;
  --brand-primary: #15125b;
  --brand-accent: #4414d8;
  --brand-accent-soft: #782cf8;
  --brand-deep: #001434;
  --surface: #ffffff;
  --surface-muted: #f4f5fb;
  --surface-card: #fffcff;
  --ink: #16162a;
  --ink-secondary: #3c3c55;
  --ink-faint: #5c5c78;
  --line: #d8d8e8;
  --focus: #4414d8;
  --ready: #1d5c40;
  --warning: #8a5a12;
  --error: #8a2430;
  --held: #4a453c;
  --radius: 0.55rem;
  --font: "Segoe UI", system-ui, sans-serif;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--font);
  background: var(--surface-muted);
  color: var(--ink);
  line-height: 1.45;
}

a { color: var(--brand-primary); }

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
summary:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

.brand-mast {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.85rem 1.25rem;
  padding: 0.45rem 0 1.05rem;
  border-bottom: 1px solid var(--line);
  background: transparent;
}

.brand-home {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  margin: 0;
  padding: 0.15rem 0;
  background: transparent;
  border: none;
  box-shadow: none;
  text-decoration: none;
  line-height: 0;
}

.brand-logo,
.brand-logo-header {
  display: block;
  width: min(12.5rem, 58vw); /* ~200px desktop — primary brand identifier */
  max-width: 12.5rem;
  height: auto;
  background: transparent;
  border: none;
  box-shadow: none;
  border-radius: 0;
}

/* Workspace / quarterly headers use the same readable lockup size. */
.brand-logo-workspace {
  width: min(12.5rem, 58vw);
  max-width: 12.5rem;
}

.brand-logo-mark {
  display: none;
  width: 3.25rem;
  height: auto;
  background: transparent;
  border: none;
  box-shadow: none;
}

.brand-mast-meta {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.2rem;
  min-width: 0;
}

.brand-view {
  margin: 0;
  color: var(--ink-secondary);
  font-size: 1.05rem;
  font-weight: 650;
  line-height: 1.25;
}

.brand-tag {
  margin: 0;
  color: var(--ink-faint);
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

@media (max-width: 390px) {
  .brand-mast,
  .brand-mast-workspace {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.55rem;
    padding-bottom: 0.95rem;
  }

  .brand-logo,
  .brand-logo-header,
  .brand-logo-workspace {
    /* Keep lockup text readable; do not crush into an icon. */
    width: min(11.25rem, 82vw);
    max-width: 11.25rem;
  }

  .brand-view {
    font-size: 1rem;
  }

  /* Hide the HTML tagline under the logo — lockup already carries brand words. */
  .brand-tag {
    display: none;
  }
}

/* Very narrow: lockup text would become microscopic — switch to icon mark. */
@media (max-width: 320px) {
  .brand-logo,
  .brand-logo-header,
  .brand-logo-workspace {
    display: none;
  }

  .brand-logo-mark {
    display: block;
    width: 3.5rem;
  }
}

.card,
.expense-panel,
.expense-import,
.trust,
.evidence,
.primary {
  background: var(--surface-card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.btn-primary,
button.primary-action {
  background: var(--brand-primary);
  color: #fff;
  border: 1px solid var(--brand-primary);
  font-weight: 650;
}

.btn-primary:hover,
button.primary-action:hover {
  background: var(--brand-accent);
  border-color: var(--brand-accent);
}

.btn-secondary,
button.secondary {
  background: var(--surface);
  color: var(--ink);
  border: 1px solid var(--line);
}

.btn-danger,
button.danger {
  background: var(--surface);
  color: var(--error);
  border: 1px solid var(--line);
}

.status-ready,
.status.available {
  color: var(--ready);
  font-weight: 650;
}

.status-unavailable,
.status.unavailable {
  color: var(--held);
  font-weight: 650;
}

.status-held,
.expense-item.held .expense-status,
.import-row[data-kind="held"] {
  color: var(--warning);
}

.status-attention,
.import-row[data-kind="needs_attention"] {
  color: var(--error);
}

.helper,
.file {
  color: var(--ink-faint);
}

.lead,
.expense-lead {
  color: var(--ink-secondary);
}