/* ECEUH shared theme — universal sidebar (replaces topbar on every page). */

:root {
  --eceuh-serif: 'Lora', 'Liberation Serif', Georgia, serif;
  --eceuh-sans:  'Inter', system-ui, -apple-system, sans-serif;
  --eceuh-mono:  'JetBrains Mono', 'Liberation Mono', ui-monospace, monospace;
  --eceuh-accent: #FF6363;
  --eceuh-accent-deep: #67000E;
  --eceuh-bg: #1A1A2E;
  --eceuh-text: #FFFFFF;
  --eceuh-muted: #94A3B8;
  --eceuh-dim: #64748B;
  --eceuh-active: #2A2A3E;
  --eceuh-border: rgba(255, 255, 255, 0.05);
  --eceuh-border-2: rgba(255, 255, 255, 0.1);
}
html.light {
  --eceuh-bg: #f4ecea;
  --eceuh-text: #1A1A2E;
  --eceuh-muted: #475569;
  --eceuh-dim: #64748B;
  --eceuh-active: #ffe4df;
  --eceuh-border: rgba(26, 26, 46, 0.08);
  --eceuh-border-2: rgba(26, 26, 46, 0.14);
}

/* ── Sidebar ─────────────────────────────────────────────────────────── */
.eceuh-sidebar {
  position: fixed;
  top: 0; left: 0; bottom: 0;
  width: 256px;
  padding: 16px;
  background: var(--eceuh-bg);
  border-right: 1px solid var(--eceuh-border);
  display: flex; flex-direction: column; justify-content: space-between;
  z-index: 100;
  font-family: var(--eceuh-sans);
  overflow-y: auto;
  transform: translateX(0);
  transition: transform .25s ease;
}
.eceuh-sidebar::-webkit-scrollbar { width: 6px; }
.eceuh-sidebar::-webkit-scrollbar-thumb { background: var(--eceuh-border-2); border-radius: 4px; }

/* Permanent on the home page; collapsible elsewhere */
body.eceuh-collapsible .eceuh-sidebar { transform: translateX(-100%); box-shadow: none; }
body.eceuh-collapsible.eceuh-sidebar-open .eceuh-sidebar {
  transform: translateX(0);
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
}

/* Body offset on permanent layouts */
body.eceuh-shell { padding-left: 256px !important; padding-top: 0 !important; }
@media (max-width: 900px) {
  body.eceuh-shell { padding-left: 0 !important; }
  .eceuh-sidebar { transform: translateX(-100%); box-shadow: none; }
  body.eceuh-shell.eceuh-sidebar-open .eceuh-sidebar { transform: translateX(0); }
}

/* Brand */
.eceuh-sidebar .brand {
  display: flex; align-items: center; gap: 12px;
  padding: 0 8px 24px;
  text-decoration: none;
}
.eceuh-sidebar .brand-mark {
  width: 40px; height: 40px;
  background: var(--eceuh-accent);
  color: var(--eceuh-accent-deep);
  border-radius: 8px;
  display: grid; place-items: center;
  flex: none;
  box-shadow: 0px 10px 15px -3px rgba(0,0,0,0.1), 0px 4px 6px -4px rgba(0,0,0,0.1);
  animation: none;
  font-family: var(--eceuh-sans);
  font-weight: 900;
  font-size: 18px;
}
.eceuh-sidebar .brand-text {
  display: flex; flex-direction: column;
  font-family: var(--eceuh-serif);
  font-weight: 700;
  font-size: 14px;
  line-height: 20px;
  color: var(--eceuh-text);
}
.eceuh-sidebar .brand-text small {
  font-family: var(--eceuh-sans);
  font-size: 10px;
  line-height: 15px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--eceuh-dim);
  font-weight: 400;
}

/* Nav */
.eceuh-sidebar nav {
  display: flex; flex-direction: column; gap: 4px; flex: 1;
}
.eceuh-sidebar nav a {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 12px;
  border-radius: 8px;
  font-weight: 500;
  font-size: 13px;
  line-height: 16px;
  color: var(--eceuh-dim);
  text-decoration: none;
  transition: background .15s, color .15s;
}
.eceuh-sidebar nav a:hover { color: var(--eceuh-text); background: var(--eceuh-border); }
.eceuh-sidebar nav a.active {
  background: var(--eceuh-active);
  color: var(--eceuh-accent);
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.05);
}
.eceuh-sidebar nav a svg { width: 16px; height: 16px; flex: none; color: currentColor; }

/* Bottom block: theme toggle + account */
.eceuh-sidebar .bottom {
  padding-top: 16px;
  border-top: 1px solid var(--eceuh-border);
  display: flex; flex-direction: column; gap: 8px;
}
.eceuh-sidebar .theme-btn {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px;
  border-radius: 8px;
  background: none; border: none;
  color: var(--eceuh-dim);
  font-family: var(--eceuh-sans);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: background .15s, color .15s;
}
.eceuh-sidebar .theme-btn:hover { color: var(--eceuh-text); background: var(--eceuh-border); }
.eceuh-sidebar .theme-btn svg { width: 16px; height: 16px; }

/* Account block */
.eceuh-sidebar .account {
  display: flex; flex-direction: column; gap: 4px;
}
.eceuh-sidebar .signin-cta {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%;
  padding: 12px 0;
  background: var(--eceuh-accent);
  color: #fff;
  border: none;
  border-radius: 8px;
  font-family: var(--eceuh-sans);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  cursor: pointer;
  transition: filter .15s, transform .1s;
}
.eceuh-sidebar .signin-cta:hover { filter: brightness(1.08); }
.eceuh-sidebar .signin-cta:active { transform: translateY(1px); }
.eceuh-sidebar .account-pill {
  display: flex; align-items: center; gap: 10px;
  padding: 8px;
  border-radius: 9999px;
  background: rgba(255,255,255,0.05);
  border: 1px solid var(--eceuh-border-2);
  color: var(--eceuh-text);
  font-family: var(--eceuh-sans);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: background .15s;
  width: 100%;
}
.eceuh-sidebar .account-pill:hover { background: rgba(255,255,255,0.1); }
.eceuh-sidebar .account-pill .av {
  width: 30px; height: 30px;
  border-radius: 9999px;
  background: linear-gradient(135deg, #FF6363, #a83838);
  color: #fff;
  display: grid; place-items: center;
  font-weight: 900;
  font-size: 11px;
  flex: none;
}
.eceuh-sidebar .account-pill .who {
  flex: 1; min-width: 0;
  text-align: left;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.eceuh-sidebar .account-menu {
  display: none;
  flex-direction: column;
  gap: 2px;
  padding: 6px;
  margin-top: 6px;
  background: rgba(0,0,0,0.2);
  border: 1px solid var(--eceuh-border-2);
  border-radius: 10px;
}
.eceuh-sidebar.show-account-menu .account-menu { display: flex; }
.eceuh-sidebar .account-menu .meta {
  padding: 8px 10px;
  border-bottom: 1px solid var(--eceuh-border);
  margin-bottom: 4px;
}
.eceuh-sidebar .account-menu .meta strong { display: block; font-size: 13px; color: var(--eceuh-text); }
.eceuh-sidebar .account-menu .meta small { display: block; color: var(--eceuh-dim); font-size: 11px; }
.eceuh-sidebar .account-menu button {
  display: flex; align-items: center; gap: 10px;
  padding: 10px;
  border-radius: 8px;
  background: none;
  border: none;
  color: var(--eceuh-text);
  font-size: 13px;
  cursor: pointer;
  text-align: left;
  font-family: var(--eceuh-sans);
}
.eceuh-sidebar .account-menu button:hover { background: rgba(255,255,255,0.06); }

/* Hamburger toggle (only on collapsible pages) */
.eceuh-toggle {
  display: none;
  position: fixed;
  top: calc(env(safe-area-inset-top, 0px) + 16px);
  left: calc(env(safe-area-inset-left, 0px) + 16px);
  width: 44px; height: 44px;
  border-radius: 12px;
  background: rgba(26, 26, 46, 0.85);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid var(--eceuh-border-2);
  color: var(--eceuh-text);
  cursor: pointer;
  z-index: 99;
  align-items: center; justify-content: center;
  transition: background .15s;
}
html.light .eceuh-toggle { background: rgba(244, 236, 234, 0.92); color: #1A1A2E; }
.eceuh-toggle:hover { background: rgba(255, 99, 99, 0.2); }
body.eceuh-collapsible .eceuh-toggle { display: inline-flex; }
@media (max-width: 900px) {
  body.eceuh-shell .eceuh-toggle { display: inline-flex; }
  .eceuh-sidebar {
    width: min(300px, calc(100vw - 28px));
    padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  }
}
.eceuh-toggle svg { width: 20px; height: 20px; }

/* Backdrop when sidebar is open on collapsible pages */
.eceuh-sidebar-backdrop {
  display: none;
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.5);
  z-index: 99;
  animation: eceuhFade .2s ease;
}
body.eceuh-sidebar-open.eceuh-collapsible .eceuh-sidebar-backdrop,
body.eceuh-sidebar-open.eceuh-shell .eceuh-sidebar-backdrop {
  display: block;
}
@media (min-width: 901px) {
  body.eceuh-shell:not(.eceuh-collapsible) .eceuh-sidebar-backdrop { display: none !important; }
}
@keyframes eceuhFade { from { opacity: 0 } to { opacity: 1 } }

/* ── Hide legacy headers, sidebars, and footers everywhere ────────────── */
.topbar:not(.eceuh-topbar),
nav.topbar:not(.eceuh-topbar),
.eceuh-topbar,
header.topbar,
aside.sidebar:not(.eceuh-sidebar) {
  display: none !important;
}
body footer:not(.eceuh-footer) { display: none !important; }

/* Home page's main wrapper used padding-left:256px + padding-top:56px to make
   room for its own sidebar + header. The universal sidebar handles the left
   offset on the body, and there's no header anymore. Reset the inner shell. */
body.eceuh-shell .shell { padding-left: 0 !important; padding-top: 0 !important; }

/* Collapsible pages: body has no permanent left offset; sidebar slides in on top. */
body.eceuh-shell.eceuh-collapsible { padding-left: 0 !important; }

/* ── Card unification — soft rounded bento aesthetic everywhere ────── */
.card, .topic-card, .prof-card, .future-card, .resource-card, .guide-card {
  border-radius: 20px !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
}
html.light .card,
html.light .topic-card,
html.light .prof-card,
html.light .future-card,
html.light .resource-card,
html.light .guide-card {
  border-color: rgba(26, 26, 46, 0.10) !important;
}
.card::before, .card::after,
.topic-card::before, .topic-card::after,
.future-card::before, .future-card::after,
.prof-card::before, .prof-card::after,
.resource-card::before, .resource-card::after,
.guide-card::before, .guide-card::after {
  display: none !important;
}

/* ── Standardized footer ──────────────────────────────────────────────── */
.eceuh-footer {
background: transparent;
  border-top: 1px solid var(--eceuh-border);
  padding: 32px 24px;
  text-align: center;
  font-family: var(--eceuh-sans);
}
.eceuh-footer p {
  font-size: 12px;
  line-height: 18px;
  letter-spacing: 0.4px;
  color: #475569;
  margin: 0;
}
html.light .eceuh-footer p { color: #64748B; }

/* ── Page transition + button press animations ────────────────────────── */
@keyframes eceuhPageEnter {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes eceuhPageExit {
  to { opacity: 0; transform: translateY(-4px); }
}
@keyframes eceuhRipple {
  0%   { transform: scale(0); opacity: 0.45; }
  100% { transform: scale(3); opacity: 0; }
}

/* Animate the content wrapper instead of body so the fixed sidebar stays put. */
body.eceuh-shell main,
body.eceuh-shell > main,
body.eceuh-shell .shell {
  animation: eceuhPageEnter 0.42s cubic-bezier(0.2, 0.8, 0.2, 1);
}
body.eceuh-shell.leaving main,
body.eceuh-shell.leaving > main,
body.eceuh-shell.leaving .shell {
  animation: eceuhPageExit 0.22s ease-in forwards;
}

/* Global press feedback — every button + link button shrinks slightly on press */
button, a.signin-cta, a.fab, a.archive-card, a.status-card,
a.archives-cta, a.picker-btn, a.eceuh-pill {
  transition: transform 0.12s ease, filter 0.12s ease, box-shadow 0.18s ease;
}
button:active, .signin-cta:active, .fab:active,
.picker-btn:active, .edit-btn:active, .pick-cta:active,
.eceuh-pill:active, .archives-cta:active, .topbar-link:active,
.eceuh-iconbtn:active, .eceuh-toggle:active, .theme-btn:active,
.account-pill:active {
  transform: scale(0.95);
}

/* Ripple element appended at click time */
.eceuh-ripple {
  position: absolute;
  pointer-events: none;
  border-radius: 9999px;
  background: rgba(255, 255, 255, 0.35);
  width: 12px; height: 12px;
  transform: scale(0);
  animation: eceuhRipple 0.55s ease-out forwards;
}

/* Sidebar nav link slide-in highlight on hover */
.eceuh-sidebar nav a {
  position: relative;
  overflow: hidden;
}
.eceuh-sidebar nav a::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 2px;
  background: var(--eceuh-accent);
  transform: scaleY(0);
  transform-origin: center;
  transition: transform 0.2s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.eceuh-sidebar nav a:hover::before,
.eceuh-sidebar nav a.active::before { transform: scaleY(1); }

/* Sidebar slide-in on collapsible pages already exists via transform; tighten the
   curve so the entrance feels deliberate. */
.eceuh-sidebar { transition: transform 0.28s cubic-bezier(0.2, 0.8, 0.2, 1) !important; }
.eceuh-sidebar-backdrop { transition: opacity 0.2s ease; }

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
}

/* ── Mobile: scroll lock + rubber-band containment ──────────────────────── */
@media (max-width: 900px) {
  body.eceuh-sidebar-open { overflow: hidden; }
  .eceuh-sidebar { overscroll-behavior-y: contain; }
}

/* ── Safe-area bottom for the sidebar itself ────────────────────────────── */
.eceuh-sidebar {
  padding-bottom: max(16px, env(safe-area-inset-bottom, 0px));
}