/* OmniMem Web UI — functional, clean, responsive */

/* Ubuntu + Ubuntu Mono, self-hosted (latin + latin-ext subsets) */
@font-face {
  font-family: 'Ubuntu';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('/static/fonts/ubuntu-400-italic-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Ubuntu';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('/static/fonts/ubuntu-400-italic-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Ubuntu';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/static/fonts/ubuntu-400-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Ubuntu';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/static/fonts/ubuntu-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Ubuntu';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/static/fonts/ubuntu-500-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Ubuntu';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/static/fonts/ubuntu-500-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Ubuntu';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/static/fonts/ubuntu-700-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Ubuntu';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/static/fonts/ubuntu-700-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Ubuntu Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/static/fonts/ubuntu-mono-400-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Ubuntu Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/static/fonts/ubuntu-mono-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Ubuntu Mono';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/static/fonts/ubuntu-mono-700-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Ubuntu Mono';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/static/fonts/ubuntu-mono-700-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

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

/* SquareCows palette — dark theme (default): brand navy surfaces, orange accent.
   Contrast notes (WCAG AA): #FF8E01 text on #00101D is 8.35:1 and on the card
   7.2:1, so orange may carry text on dark surfaces. Text placed ON an orange
   fill must be navy (--on-accent), never white (2.3:1). */
:root {
  --bg: #00101d;
  --bg-card: #0a2033;
  --bg-sidebar: #041724;
  --bg-input: #10293e;
  --border: #1c3a52;
  --border-strong: #2e5573;
  --border-focus: #ff8e01;
  --text: #d9e2ea;
  --text-dim: #8ca3b5;
  --text-bright: #fbf7f0;
  --accent: #ff8e01;        /* borders, translucent fills, non-text uses */
  --accent-strong: #ff8e01; /* solid fills — always paired with --on-accent text */
  --accent-text: #ff8e01;   /* accent-coloured text on dark surfaces (8.35:1) */
  --accent-hover: #ffa733;
  --accent-fill-hover: #e37a00; /* hover for solid orange fills (navy text: 6.4:1) */
  --on-accent: #00101d;     /* text on orange fills (8.35:1 AAA) */
  --accent-soft: rgba(255, 142, 1, 0.12); /* translucent orange washes */
  --green: #34d399;
  --yellow: #fbbf24;
  --red: #f87171;
  --orange: #fb923c;
  --cyan: #22d3ee;
  --pink: #f472b6;
  /* Namespace hues — dots, bar segments (non-text, always beside a label) */
  --ns-episodic: #ff8e01;
  --ns-project: #34d399;
  --ns-knowledge: #fbbf24;
  --ns-preference: #f472b6;
  --ns-skill: #22d3ee;
  --radius: 6px;
  --sidebar-width: 220px;
  --font-mono: 'Ubuntu Mono', 'SF Mono', 'Cascadia Code', 'Fira Code', monospace;
}

/* Light theme: warm paper surfaces, navy ink. Orange #FF8E01 fails as text on
   paper (2.16:1) — per the brand guidelines it is reserved for large fills and
   accents here; text-carrying accent roles drop to burnt orange (#9a5a00, 5.1:1). */
html[data-theme="light"] {
  --bg: #fbf7f0;
  --bg-card: #ffffff;
  --bg-sidebar: #f3ecdf;
  --bg-input: #ffffff;
  --border: #e3daca;
  --border-strong: #c2b69e;
  --border-focus: #9a5a00;
  --text: #20323d;
  --text-dim: #5c6f7d;
  --text-bright: #00101d;
  --accent: #c25e00;        /* borders and boundaries (4.0:1 on paper) */
  --accent-strong: #ff8e01; /* solid fills keep brand orange, navy text */
  --accent-text: #9a5a00;   /* accent-coloured text (5.1:1 on paper) */
  --accent-hover: #7c4a00;
  --accent-fill-hover: #e37a00;
  --on-accent: #00101d;
  --accent-soft: rgba(255, 142, 1, 0.14);
  --green: #3d7a1e;
  --yellow: #8f5700;
  --red: #b2432c;
  --orange: #9c4a00;
  --cyan: #0e7490;
  --pink: #a61e64;
  --ns-episodic: #ff8e01;
  --ns-project: #3d7a1e;
  --ns-knowledge: #c87a00;
  --ns-preference: #a61e64;
  --ns-skill: #0e7490;
}

html { color-scheme: dark; }
html[data-theme="light"] { color-scheme: light; }

body {
  font-family: 'Ubuntu', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.5;
  font-size: 14px;
}

::selection { background: rgba(255, 142, 1, 0.35); }

:focus-visible {
  outline: 2px solid var(--accent-text);
  outline-offset: 2px;
}

/* Skip link — first focusable element, visible only on keyboard focus */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  background: var(--accent-strong);
  color: #fff;
  padding: 0.5rem 1rem;
  border-radius: 0 0 var(--radius) var(--radius);
  font-weight: 600;
  text-decoration: none;
}

.skip-link:focus {
  left: 1rem;
}

/* Layout */
.layout {
  display: flex;
  min-height: 100vh;
}

.sidebar {
  width: var(--sidebar-width);
  background: var(--bg-sidebar);
  border-right: 1px solid var(--border);
  padding: 1.25rem 0 2.5rem;
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  overflow-y: auto;
}

.sidebar-header {
  padding: 0 1.25rem 1.25rem;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.logo {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--text-bright);
  letter-spacing: -0.02em;
  white-space: nowrap;
}

.logo-bracket {
  color: var(--accent-text);
}

/* Sidebar collapse toggle (in the sidebar header) */
.sidebar-toggle {
  margin-left: auto;
  background: none;
  border: none;
  color: var(--text-dim);
  cursor: pointer;
  font-size: 1.1rem;
  line-height: 1;
  padding: 0.2rem 0.45rem;
  border-radius: var(--radius);
  transition: color 0.15s, background 0.15s;
}

.sidebar-toggle:hover {
  color: var(--text);
  background: var(--accent-soft);
}

/* Floating expand button, only visible while the sidebar is collapsed */
.sidebar-expand {
  display: none;
  position: fixed;
  top: 0.75rem;
  left: 0.75rem;
  z-index: 60;
  background: var(--bg-card);
  border: 1px solid var(--border);
  color: var(--text-dim);
  cursor: pointer;
  font-size: 1.1rem;
  line-height: 1;
  padding: 0.35rem 0.55rem;
  border-radius: var(--radius);
  transition: color 0.15s, border-color 0.15s;
}

.sidebar-expand:hover {
  color: var(--text);
  border-color: var(--accent);
}

html.sidebar-collapsed .sidebar { display: none; }
html.sidebar-collapsed .sidebar-expand { display: inline-flex; }

html.sidebar-collapsed .content {
  margin-left: 0;
  max-width: 1400px;
  padding-left: 3.5rem;
}

.version-badge {
  font-size: 0.65rem;
  background: var(--accent-strong);
  color: var(--on-accent);
  padding: 0.1rem 0.4rem;
  border-radius: 99px;
  font-weight: 600;
  white-space: nowrap;
}

.version-update-wrapper {
  position: relative;
  display: inline-block;
  cursor: pointer;
  vertical-align: middle;
}

.version-update-icon {
  font-size: 1rem;
  color: var(--red);
  line-height: 1;
}

.version-update-tooltip {
  display: none;
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  background: var(--bg-card);
  border: 1px solid var(--red);
  color: var(--red);
  font-size: 0.7rem;
  font-weight: 600;
  padding: 0.3rem 0.6rem;
  border-radius: var(--radius);
  white-space: nowrap;
  z-index: 50;
  pointer-events: none;
}

.version-update-wrapper:hover .version-update-tooltip {
  display: block;
}

.nav-list {
  list-style: none;
  padding: 0.75rem 0;
}

.nav-link {
  display: block;
  padding: 0.45rem 1.25rem 0.45rem calc(1.25rem - 2px);
  border-left: 2px solid transparent;
  color: var(--text-dim);
  text-decoration: none;
  font-size: 0.85rem;
  font-weight: 500;
  transition: color 0.15s, background 0.15s;
}

.nav-link:hover {
  color: var(--text);
  background: rgba(255, 142, 1, 0.07);
}

.nav-link.active {
  color: var(--accent-text);
  background: var(--accent-soft);
  border-left-color: var(--accent);
}

.nav-divider {
  height: 1px;
  background: var(--border);
  margin: 0.5rem 1.25rem;
}

.nav-section-label {
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-dim);
  padding: 0.25rem 1.25rem 0;
  margin-top: 0.9rem;
  list-style: none;
}

/* Site footer */
.site-footer {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: var(--bg-sidebar);
  border-top: 1px solid var(--border);
  z-index: 10;
}

.footer-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  padding: 0.5rem 1rem;
}

.footer-sep {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--border);
}

.footer-link {
  font-size: 0.75rem;
  color: var(--text-dim);
  text-decoration: none;
  font-weight: 500;
  transition: color 0.15s;
}

.footer-link:hover {
  color: var(--accent-text);
}

.content {
  flex: 1;
  /* flex items default to min-width auto, so a child with a wide
     min-content (a long URL, a wide table) silently widens the whole
     page — allow the column to shrink and let children handle overflow */
  min-width: 0;
  margin-left: var(--sidebar-width);
  padding: 1.5rem 2rem 3rem;
  max-width: 1100px;
}

/* Page header */
.page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
  margin-bottom: 1.5rem;
}

.page-header h2 {
  font-size: 1.75rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--text-bright);
}

/* Health indicators */
.health-indicators {
  display: flex;
  gap: 0.5rem;
}

.indicator {
  font-size: 0.75rem;
  padding: 0.2rem 0.6rem;
  border-radius: 99px;
  font-weight: 600;
}

.indicator.ok {
  background: rgba(52, 211, 153, 0.15);
  color: var(--green);
}

.indicator.err {
  background: rgba(248, 113, 113, 0.15);
  color: var(--red);
}

.indicator.warn {
  background: rgba(251, 191, 36, 0.15);
  color: var(--yellow);
}

/* Stats grid */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 1rem;
  margin-bottom: 2rem;
}

.stat-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.25rem;
}

/* Whole-card links on the dashboard — clickable, never underlined */
a.stat-card {
  display: block;
  color: inherit;
  text-decoration: none;
  transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s;
}

a.stat-card:hover {
  border-color: var(--accent);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
  transform: translateY(-2px);
}

a.stat-card:hover .stat-ns {
  color: var(--accent-text);
}

.stat-card-highlight {
  border-color: var(--accent);
  background: rgba(255, 142, 1, 0.06);
}

.stat-ns {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-dim);
  margin-bottom: 0.5rem;
  font-weight: 600;
  transition: color 0.15s;
}

.stat-total {
  font-family: var(--font-mono);
  font-size: 2.1rem;
  font-weight: 700;
  color: var(--text-bright);
  line-height: 1;
  margin-bottom: 0.75rem;
  font-variant-numeric: tabular-nums;
}

.stats-meta {
  color: var(--text-dim);
  font-size: 0.8rem;
  margin: 0 0 0.75rem;
}

.stats-meta a {
  color: var(--accent-text);
}

.stat-breakdown {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

/* Badges */
.badge {
  font-size: 0.7rem;
  padding: 0.15rem 0.5rem;
  border-radius: 99px;
  font-weight: 600;
  white-space: nowrap;
}

.badge.active {
  background: rgba(52, 211, 153, 0.15);
  color: var(--green);
}

.badge.deprioritised {
  background: rgba(251, 191, 36, 0.15);
  color: var(--yellow);
}

.badge.archived {
  background: rgba(139, 143, 163, 0.15);
  color: var(--text-dim);
}

.badge.abandoned {
  background: rgba(248, 113, 113, 0.15);
  color: var(--red);
}

/* Namespace markers — a coloured dot beside plain text, not another pill.
   Pills stay reserved for lifecycle state, the actionable badge. The dot is
   decorative (the namespace name sits right next to it), so it carries no
   contrast requirement of its own. */
.badge.ns-episodic, .badge.ns-project, .badge.ns-knowledge,
.badge.ns-preference, .badge.ns-skill {
  background: transparent;
  padding: 0;
  border-radius: 0;
  font-weight: 500;
  color: var(--text-dim);
}

.badge.ns-episodic::before, .badge.ns-project::before, .badge.ns-knowledge::before,
.badge.ns-preference::before, .badge.ns-skill::before {
  content: "";
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  margin-right: 0.4rem;
}

.badge.ns-episodic::before { background: var(--ns-episodic); }
.badge.ns-project::before { background: var(--ns-project); }
.badge.ns-knowledge::before { background: var(--ns-knowledge); }
.badge.ns-preference::before { background: var(--ns-preference); }
.badge.ns-skill::before { background: var(--ns-skill); }

/* Skill badges */
.badge.generated { background: rgba(34, 211, 238, 0.15); color: var(--cyan); }
.badge.rule-do { background: rgba(52, 211, 153, 0.15); color: var(--green); }
.badge.rule-watch { background: rgba(251, 191, 36, 0.15); color: var(--yellow); }
.badge.rule-dont { background: rgba(251, 146, 60, 0.15); color: var(--orange); }
.badge.rule-ref { background: rgba(34, 211, 238, 0.15); color: var(--cyan); }

/* Tables */
.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.85rem;
}

.data-table th {
  text-align: left;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-dim);
  padding: 0.6rem 0.75rem;
  border-bottom: 1px solid var(--border);
  font-weight: 600;
}

.data-table td {
  padding: 0.6rem 0.75rem;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
}

.data-table tbody tr:hover {
  background: rgba(255, 142, 1, 0.04);
}

.content-cell {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.content-cell a {
  color: var(--text);
  text-decoration: none;
}

.content-cell a:hover {
  color: var(--accent-text);
}

.mono {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  font-variant-numeric: tabular-nums;
}

/* Projects table */
.projects-table {
  table-layout: fixed;
  width: 100%;
}

.projects-table th:nth-child(1),
.projects-table td:nth-child(1) { width: 20%; }

.projects-table th:nth-child(2),
.projects-table td:nth-child(2) { width: 32%; }

.projects-table th:nth-child(3),
.projects-table td:nth-child(3) { width: 32%; }

.projects-table th:nth-child(4),
.projects-table td:nth-child(4) { width: 16%; }

/* Memories table — six columns; the dashboard's five-column recent activity
   table reuses this, and the missing Actions column's share redistributes
   across its columns. */
.memories-table {
  table-layout: fixed;
  width: 100%;
}

.memories-table th:nth-child(1),
.memories-table td:nth-child(1) { width: 10%; }

.memories-table th:nth-child(2),
.memories-table td:nth-child(2) { width: 38%; }

.memories-table th:nth-child(3),
.memories-table td:nth-child(3) { width: 11%; }

.memories-table th:nth-child(4),
.memories-table td:nth-child(4) { width: 13%; }

.memories-table th:nth-child(5),
.memories-table td:nth-child(5) { width: 14%; }

.memories-table th:nth-child(6),
.memories-table td:nth-child(6) { width: 14%; }

.name-cell {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding-right: 1rem;
}

.project-name {
  font-weight: 600;
  color: var(--accent-text);
  text-decoration: none;
}

span.project-name {
  color: var(--text-bright);
}

.memory-count-badge {
  display: inline-block;
  margin-left: 0.4rem;
  font-size: 0.7rem;
  background: var(--accent-strong);
  color: var(--on-accent);
  font-weight: 600;
  border-radius: 9999px;
  padding: 0.1rem 0.45rem;
  vertical-align: middle;
  line-height: 1.4;
}

.date-cell {
  white-space: nowrap;
}

.date-main {
  display: block;
  font-size: 0.85rem;
  color: var(--text-bright);
}

.date-time {
  display: block;
  font-size: 0.75rem;
  color: var(--text-dim);
  font-family: var(--font-mono);
}

/* Skills table — fixed layout, so anything that can't fit its column would
   spill under the neighbour: clip the cells and let badges wrap instead */
.skills-table {
  table-layout: fixed;
  width: 100%;
}

.skills-table td {
  overflow: hidden;
  overflow-wrap: break-word;
}

.skills-table td:nth-child(2) .badge,
.skills-table td:nth-child(4) .badge {
  white-space: normal;
  overflow-wrap: break-word;
}

.skills-table .skill-actions {
  text-align: right;
}

.skills-table .skill-actions .btn {
  margin-bottom: 0.25rem;
}

.skills-table th:nth-child(1),
.skills-table td:nth-child(1) { width: 16%; }
.skills-table th:nth-child(2),
.skills-table td:nth-child(2) { width: 12%; }
.skills-table th:nth-child(3),
.skills-table td:nth-child(3) { width: 23%; }
.skills-table th:nth-child(4),
.skills-table td:nth-child(4) { width: 12%; }
.skills-table th:nth-child(5),
.skills-table td:nth-child(5) { width: 13%; }
.skills-table th:nth-child(6),
.skills-table td:nth-child(6) { width: 6%; }
.skills-table th:nth-child(7),
.skills-table td:nth-child(7) { width: 18%; }

/* Graveyard table */
.graveyard-table {
  table-layout: fixed;
  width: 100%;
}

.graveyard-table td { overflow-wrap: break-word; }

.graveyard-table th:nth-child(1),
.graveyard-table td:nth-child(1) { width: 24%; }
.graveyard-table th:nth-child(2),
.graveyard-table td:nth-child(2) { width: 12%; }
.graveyard-table th:nth-child(3),
.graveyard-table td:nth-child(3) { width: 44%; }
.graveyard-table th:nth-child(4),
.graveyard-table td:nth-child(4) { width: 9%; }
.graveyard-table th:nth-child(5),
.graveyard-table td:nth-child(5) { width: 11%; }

/* SKILL.md body — the whole document, monospace, scrolls inside its own box */
.skill-body {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.25rem;
  font-family: var(--font-mono);
  font-size: 0.85rem;
  line-height: 1.65;
  white-space: pre-wrap;
  word-break: break-word;
  overflow-x: auto;
}

/* Feeds table — six columns: Name, URL, Topics, Skills, Mode, Actions */
.feeds-table { table-layout: fixed; }
.feeds-table th:nth-child(1),
.feeds-table td:nth-child(1) { width: 16%; }
.feeds-table th:nth-child(2),
.feeds-table td:nth-child(2) { width: 24%; }
.feeds-table th:nth-child(3),
.feeds-table td:nth-child(3) { width: 18%; }
.feeds-table th:nth-child(4),
.feeds-table td:nth-child(4) { width: 16%; overflow-wrap: anywhere; }
.feeds-table th:nth-child(5),
.feeds-table td:nth-child(5) { width: 9%; white-space: nowrap; }
.feeds-table th:nth-child(6),
.feeds-table td:nth-child(6) { width: 17%; }

/* Effortful memories table (experience page) — three columns */
.effortful-table { table-layout: fixed; }
.effortful-table th:nth-child(1),
.effortful-table td:nth-child(1) { width: 12%; }
.effortful-table th:nth-child(2),
.effortful-table td:nth-child(2) { width: 16%; }
.effortful-table th:nth-child(3),
.effortful-table td:nth-child(3) { width: 72%; }

/* Backups table — four columns */
.backups-table { table-layout: fixed; }
.backups-table th:nth-child(1),
.backups-table td:nth-child(1) { width: 42%; overflow-wrap: anywhere; }
.backups-table th:nth-child(2),
.backups-table td:nth-child(2) { width: 12%; }
.backups-table th:nth-child(3),
.backups-table td:nth-child(3) { width: 26%; }
.backups-table th:nth-child(4),
.backups-table td:nth-child(4) { width: 20%; }

/* Skill detail rules table — column widths are inline on the th elements,
   fixed layout makes them stick and long rule text wraps instead of
   widening the table */
.skill-rules-table { table-layout: fixed; }
.skill-rules-table td { overflow-wrap: break-word; }

/* display:flex on a td detaches it from table-cell layout and the fixed
   column widths stop applying — keep the cell a cell, flow children inline */
.actions-cell > * {
  display: inline-flex;
  vertical-align: middle;
  margin: 0.1rem 0.35rem 0.1rem 0;
}

/* Section note */
.section-note {
  color: var(--text-dim);
  font-size: 0.8rem;
  margin: 0 0 1rem;
}

/* Stat label (sub-text under stat-total) */
.stat-label {
  color: var(--text-dim);
  font-size: 0.7rem;
  margin-top: 0.15rem;
}

/* Token overhead table */
.overhead-table { table-layout: fixed; }
.overhead-table th:nth-child(1),
.overhead-table td:nth-child(1) { width: 40%; }
.overhead-table th:nth-child(2),
.overhead-table td:nth-child(2) { width: 30%; }
.overhead-table th:nth-child(3),
.overhead-table td:nth-child(3) { width: 30%; }
.overhead-table th:nth-child(4),
.overhead-table td:nth-child(4) { width: 30%; }
.total-row td { border-top: 2px solid var(--border); }

/* Dynamic overhead table (variable columns) */
.overhead-table-dynamic { table-layout: auto; }

/* Tool metrics table */
.tool-metrics-table { table-layout: auto; }

/* Telemetry table */
.telemetry-table { table-layout: fixed; }
.telemetry-table th:nth-child(1),
.telemetry-table td:nth-child(1) { width: 12%; }
.telemetry-table th:nth-child(2),
.telemetry-table td:nth-child(2) { width: 40%; }
.telemetry-table th:nth-child(3),
.telemetry-table td:nth-child(3) { width: 16%; }
.telemetry-table th:nth-child(4),
.telemetry-table td:nth-child(4) { width: 10%; }
.telemetry-table th:nth-child(5),
.telemetry-table td:nth-child(5) { width: 22%; }

.recall-badge {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.8rem;
  font-weight: 600;
  background: var(--accent-soft);
  color: var(--accent-text);
  padding: 0.1rem 0.5rem;
  border-radius: 99px;
  min-width: 1.8rem;
  text-align: center;
}

.cold-row {
  border-left: 3px solid var(--yellow);
}

/* Section */
.recent-section h3 {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text-bright);
  margin-bottom: 1rem;
}

.empty-state {
  color: var(--text-dim);
  padding: 2rem;
  text-align: center;
}

.empty-state a { color: var(--accent-text); }

/* Flash messages */
.flash {
  padding: 0.6rem 1rem;
  border-radius: var(--radius);
  margin-bottom: 1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.85rem;
}

.flash-success { background: rgba(52, 211, 153, 0.12); color: var(--green); border: 1px solid rgba(52, 211, 153, 0.3); }
.flash-error { background: rgba(248, 113, 113, 0.12); color: var(--red); border: 1px solid rgba(248, 113, 113, 0.3); }
.flash-warning { background: rgba(251, 191, 36, 0.12); color: var(--yellow); border: 1px solid rgba(251, 191, 36, 0.3); }
.flash-info { background: var(--accent-soft); color: var(--accent-text); border: 1px solid rgba(255, 142, 1, 0.35); }

.flash-close {
  background: none;
  border: none;
  color: inherit;
  cursor: pointer;
  font-size: 1.2rem;
  padding: 0 0.25rem;
  opacity: 0.7;
}

.flash-close:hover { opacity: 1; }

/* Pagination */
.pagination {
  display: flex;
  gap: 0.25rem;
  margin-top: 1.25rem;
  justify-content: center;
}

.page-link {
  padding: 0.3rem 0.7rem;
  border-radius: var(--radius);
  font-size: 0.8rem;
  color: var(--text-dim);
  text-decoration: none;
  background: var(--bg-card);
  border: 1px solid var(--border);
}

.page-link:hover { color: var(--text); border-color: var(--accent); }
.page-link.current { background: var(--accent-strong); color: var(--on-accent); border-color: var(--accent-strong); font-weight: 600; }
.page-link.ellipsis { border: none; background: none; }

/* Forms */
.form-group {
  margin-bottom: 1rem;
}

.form-group label {
  display: block;
  font-size: 0.8rem;
  color: var(--text-dim);
  margin-bottom: 0.35rem;
  font-weight: 600;
}

.form-input, .form-select, .form-textarea {
  width: 100%;
  padding: 0.5rem 0.75rem;
  background: var(--bg-input);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  color: var(--text);
  font-size: 0.85rem;
  font-family: inherit;
  transition: border-color 0.15s;
  box-sizing: border-box;
  height: 2.25rem;
}

.form-input:focus, .form-select:focus, .form-textarea:focus {
  outline: none;
  border-color: var(--border-focus);
  box-shadow: 0 0 0 1px var(--border-focus);
}

.form-textarea {
  min-height: 120px;
  resize: vertical;
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.45rem 1rem;
  border-radius: var(--radius);
  font-size: 0.8rem;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  border: 1px solid transparent;
  transition: background 0.15s, border-color 0.15s;
  text-decoration: none;
}

.btn-primary { background: var(--accent-strong); color: var(--on-accent); }
.btn-primary:hover { background: var(--accent-fill-hover); }

.btn-secondary { background: var(--bg-card); color: var(--text); border-color: var(--border); }
.btn-secondary:hover { border-color: var(--accent); }

.btn-danger { background: rgba(248, 113, 113, 0.15); color: var(--red); border-color: rgba(248, 113, 113, 0.3); }
.btn-danger:hover { background: rgba(248, 113, 113, 0.25); }

.btn-sm { padding: 0.3rem 0.65rem; font-size: 0.75rem; }

/* Filter bar */
.filter-bar {
  display: flex;
  gap: 0.75rem;
  margin-bottom: 1.25rem;
  flex-wrap: wrap;
  align-items: end;
}

.filter-bar .form-group {
  margin-bottom: 0;
}

/* Detail view */
.detail-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1.5rem;
}

.detail-key {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  color: var(--text-dim);
  overflow-wrap: anywhere;
}

.detail-content {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.25rem;
  white-space: pre-wrap;
  word-break: break-word;
  margin-bottom: 1.5rem;
  font-size: 0.9rem;
  line-height: 1.7;
}

.meta-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 0.75rem;
  margin-bottom: 1.5rem;
}

.meta-item {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0.75rem;
}

.meta-label {
  font-size: 0.75rem;
  color: var(--text-dim);
  margin-bottom: 0.25rem;
  font-weight: 600;
}

.meta-value {
  font-size: 0.85rem;
  color: var(--text-bright);
}

.action-bar {
  display: flex;
  gap: 0.5rem;
  margin-top: 1.5rem;
}

/* Score badge */
.score {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  background: var(--bg-input);
  padding: 0.1rem 0.4rem;
  border-radius: var(--radius);
}

/* Search results */
.search-result {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1rem;
  margin-bottom: 0.75rem;
}

.search-result:hover {
  border-color: rgba(255, 142, 1, 0.4);
}

.search-result-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}

.search-result-content {
  font-size: 0.85rem;
  color: var(--text);
  line-height: 1.6;
  overflow-wrap: break-word;
}

/* Confirm modal */
.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
}

.modal {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.5rem;
  max-width: 450px;
  width: 90%;
}

.modal h3 {
  margin-bottom: 0.75rem;
  color: var(--text-bright);
}

.modal p {
  margin-bottom: 1rem;
  color: var(--text-dim);
  font-size: 0.85rem;
}

.modal-actions {
  display: flex;
  gap: 0.5rem;
  justify-content: flex-end;
}

/* Compile-skill modal: wide enough to review a SKILL.md draft */
.modal-wide {
  max-width: 720px;
  max-height: 85vh;
  overflow-y: auto;
}

.skill-draft {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0.75rem;
  max-height: 40vh;
  overflow: auto;
  white-space: pre-wrap;
  overflow-wrap: break-word;
}

/* Skill import preview: what confirm would add vs leave untouched */
.import-plan {
  list-style: none;
  margin: 0 0 0.75rem;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  font-size: 0.85rem;
}

.import-plan li {
  display: block;
  line-height: 1.5;
}

.import-plan .badge {
  margin-right: 0.35rem;
}

.import-plan .mono {
  font-size: 0.75rem;
  overflow-wrap: anywhere;
}

.import-keys {
  margin-bottom: 0.75rem;
  font-size: 0.8rem;
}

.import-keys summary {
  cursor: pointer;
  color: var(--text-dim);
  margin-bottom: 0.35rem;
}

.import-keys .mono {
  display: block;
  font-size: 0.72rem;
  padding: 0.1rem 0;
  overflow-wrap: anywhere;
}

/* Refresh feedback: dim the target while the request is in flight,
   then fade the fresh content back in so a refresh is always visible
   even when the numbers haven't changed */
.refresh-target {
  transition: opacity 0.25s ease;
}

.refresh-target.htmx-request {
  opacity: 0.4;
}

@media (prefers-reduced-motion: reduce) {
  .refresh-target { transition: none; }
}

/* Spinner for htmx loading */
.htmx-indicator {
  display: none;
}

.htmx-request .htmx-indicator,
.htmx-request.htmx-indicator {
  display: inline-block;
}

.spinner {
  width: 1rem;
  height: 1rem;
  border: 2px solid var(--border);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 0.6s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* Composition bar — the dashboard hero: what the memory corpus is made of.
   Segment widths are proportional to namespace counts; each namespace's dot
   colour repeats in the legend and the table markers, so the bar, legend and
   rows read as one system. */
.composition {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.25rem 1.5rem;
  margin-bottom: 1.5rem;
}

.composition-total {
  text-decoration: none;
  color: inherit;
  flex-shrink: 0;
}

.composition-num {
  display: block;
  font-family: var(--font-mono);
  font-size: 2.75rem;
  font-weight: 700;
  line-height: 1;
  color: var(--text-bright);
  font-variant-numeric: tabular-nums;
}

a.composition-total:hover .composition-num { color: var(--accent-text); }

.composition-label {
  display: block;
  font-size: 0.75rem;
  color: var(--text-dim);
  margin-top: 0.3rem;
}

.composition-main { flex: 1; min-width: 0; }

.composition-bar {
  display: flex;
  height: 12px;
  border-radius: 99px;
  overflow: hidden;
  background: var(--bg-input);
}

.composition-seg { min-width: 3px; }
.composition-seg + .composition-seg { margin-left: 2px; }

.composition-seg.ns-episodic { background: var(--ns-episodic); }
.composition-seg.ns-project { background: var(--ns-project); }
.composition-seg.ns-knowledge { background: var(--ns-knowledge); }
.composition-seg.ns-preference { background: var(--ns-preference); }

.composition-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 1.25rem;
  margin-top: 0.7rem;
  font-size: 0.75rem;
  color: var(--text-dim);
}

.composition-legend .count {
  font-family: var(--font-mono);
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

/* Recall heat — memories fade in the UI the way they fade in the ranking.
   The left rule dims with time since the memory last surfaced in recall; the
   Updated column still carries the same information as text. */
.heat-hot td:first-child { box-shadow: inset 3px 0 0 var(--accent); }
.heat-warm td:first-child { box-shadow: inset 3px 0 0 rgba(255, 142, 1, 0.55); }
.heat-cool td:first-child { box-shadow: inset 3px 0 0 rgba(255, 142, 1, 0.25); }

/* Deprioritised memories drop one ink step (still AA on all surfaces) */
.row-deprioritised .content-cell a,
.row-deprioritised .content-cell,
.row-deprioritised .date-main {
  color: var(--text-dim);
}

/* Theme toggle — lives in the footer, labelled in text */
.theme-toggle {
  background: none;
  border: 1px solid var(--border);
  border-radius: 99px;
  color: var(--text-dim);
  cursor: pointer;
  font-family: inherit;
  font-size: 0.75rem;
  font-weight: 500;
  padding: 0.2rem 0.7rem;
  transition: color 0.15s, border-color 0.15s;
}

.theme-toggle:hover {
  color: var(--accent-text);
  border-color: var(--accent);
}

/* Reduced motion — kill transitions, animations and hover lift */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  a.stat-card:hover {
    transform: none;
  }
}

/* Responsive */
@media (max-width: 768px) {
  .sidebar {
    position: static;
    width: 100%;
    border-right: none;
    border-bottom: 1px solid var(--border);
  }

  .layout { flex-direction: column; }
  .content { margin-left: 0; padding: 1rem 1rem 3rem; }
  .stats-grid { grid-template-columns: repeat(2, 1fr); }
  .composition { flex-direction: column; align-items: stretch; gap: 1rem; }
  .nav-list { display: flex; flex-wrap: wrap; gap: 0; padding: 0.5rem 1rem; }
  .nav-link { padding: 0.35rem 0.75rem; }
  .nav-divider { display: none; }
  .nav-section-label { display: none; }

  /* Tables keep their fixed percentage layouts on small screens — switching
     to table-layout auto lets nowrap cells force the table wider than the
     viewport and the whole page scrolls sideways. Tighter cell padding
     buys the narrow columns some room instead, and breaking anywhere
     stops long unbroken tokens widening the auto-layout tables. */
  .data-table th, .data-table td { padding: 0.6rem 0.4rem; }
  .data-table td { overflow-wrap: anywhere; }
  .data-table th {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .data-table .btn-sm { padding: 0.3rem 0.45rem; }

  /* Namespace pills and dates are wider than their narrow columns on
     phones — let them break onto two lines rather than widen the table */
  .data-table .badge { white-space: normal; overflow-wrap: anywhere; }
  .data-table .date-cell { white-space: normal; }

  /* Header action rows (inline display:flex divs/forms) wrap under the h2 */
  .page-header > div, .page-header > form { flex-wrap: wrap; }
}

/* Login page — standalone card, no sidebar or footer */
.login-body {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: 1rem;
  margin: 0;
}

.login-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 2rem;
  width: 100%;
  max-width: 380px;
}

.login-logo {
  text-align: center;
  margin: 0 0 0.25rem;
}

.login-sub {
  text-align: center;
  color: var(--text-dim);
  font-size: 0.9rem;
  margin: 0 0 1.5rem;
}

.login-submit {
  width: 100%;
  margin-top: 0.5rem;
}

/* Sign out — a form-wrapped button styled like the other footer links */
.logout-form {
  display: inline-flex;
}

button.footer-link {
  background: none;
  border: none;
  cursor: pointer;
  font-family: inherit;
  padding: 0;
}