/* ── Layout ──────────────────────────────────────────────── */
.shell {
  display: grid;
  grid-template-columns: 220px 1fr;
  grid-template-rows: 1fr;
  min-height: 100vh;
  transition: grid-template-columns 0.25s ease;
}

body.sidebar-collapsed .shell {
  grid-template-columns: 0px 1fr;
}

body.demo-mode .shell {
  margin-top: var(--demo-banner-height);
  min-height: calc(100vh - var(--demo-banner-height));
}

/* ── Demo banner ─────────────────────────────────────────── */
#demoBanner {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  background: var(--demo-banner-bg);
  border-bottom: 1px solid var(--demo-banner-border);
  color: var(--demo-banner-text);
  text-align: center;
  padding: 8px 16px;
  font-size: var(--text-base);
  height: var(--demo-banner-height);
  align-items: center;
  justify-content: center;
}

body.demo-mode #demoBanner { display: flex; }

/* Demo users can't sync (enforced on the backend via @require_not_demo) */
body.demo-mode #syncBtn { display: none; }

#demoBanner .demo-exit-btn {
  margin-left: 12px;
  padding: 3px 10px;
  background: transparent;
  color: var(--demo-banner-text);
  border: 1px solid var(--demo-banner-border);
  border-radius: 4px;
  cursor: pointer;
  font-size: var(--text-sm);
  font-family: var(--font-sans);
}

#demoBanner .demo-exit-btn:hover {
  background: rgba(255,255,255,0.08);
}

/* ── Sidebar ─────────────────────────────────────────────── */
.sidebar {
  background: var(--surface);
  border-right: 1px solid var(--border);
  padding: 28px 0;
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
  transition: border-color 0.25s ease;
}

body.sidebar-collapsed .sidebar {
  border-right-color: transparent;
}

.sidebar-collapse-btn {
  background: none;
  border: none;
  color: var(--muted);
  cursor: pointer;
  padding: 4px 6px;
  font-size: 18px;
  line-height: 1;
  transition: color 0.15s;
  flex-shrink: 0;
}
.sidebar-collapse-btn:hover { color: var(--text-bright); }

.sidebar-expand-btn {
  display: none;
  position: fixed;
  top: 48px;
  left: 0;
  transform: translateY(-50%);
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: none;
  border-radius: 0 6px 6px 0;
  color: var(--text-dim);
  cursor: pointer;
  padding: 6px 7px;
  z-index: 100;
  font-size: 18px;
  line-height: 1;
  transition: color 0.15s, background 0.15s;
}
.sidebar-expand-btn:hover {
  background: var(--surface2);
  color: var(--text-bright);
}
body.sidebar-collapsed .sidebar-expand-btn {
  display: flex;
  align-items: center;
}

.sidebar-backdrop { display: none; }

/* ── Sidebar, mobile ─────────────────────────────────────────
   As a grid column the open sidebar squeezed the page into whatever was
   left of a phone's width (~170px), cutting off every widget. On phones it
   is a drawer over the page instead, so the content column never changes
   width. Below the modals (z-index 200) so a dialog opened from it shows. */
@media (max-width: 768px) {
  .shell,
  body.sidebar-collapsed .shell { grid-template-columns: 1fr; }

  .sidebar {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    width: 240px;
    max-width: 85vw;
    height: auto;
    z-index: 160;
    box-shadow: 0 0 24px var(--shadow-color);
    transition: transform 0.25s ease, visibility 0s;
  }
  body.demo-mode .sidebar { top: var(--demo-banner-height); }
  /* visibility waits out the slide, then takes the hidden links out of the
     tab order. */
  body.sidebar-collapsed .sidebar {
    transform: translateX(-100%);
    visibility: hidden;
    box-shadow: none;
    transition: transform 0.25s ease, visibility 0s linear 0.25s;
  }

  .sidebar-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 155;
    background: var(--overlay-bg);
  }
  body.sidebar-collapsed .sidebar-backdrop { display: none; }
}

.logo {
  padding: 0 16px 28px 24px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.logo-mark {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 600;
  color: var(--accent-text);
  letter-spacing: -0.5px;
  line-height: 1;
}

.logo-moon {
  width: 15px;
  height: 15px;
  fill: currentColor;
  margin-left: 6px;
  vertical-align: -1px;
  transform: rotate(12deg);
}

.logo-sub {
  color: var(--muted);
  font-size: var(--text-caption);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-top: 4px;
}

nav {
  padding: 24px 0;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.nav-bottom-group {
  margin-top: auto;
  display: flex;
  flex-direction: column;
}

.nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 24px;
  cursor: pointer;
  color: var(--text-dim);
  transition: all 0.15s;
  border-left: 2px solid transparent;
  border-top: none;
  border-right: none;
  border-bottom: none;
  font-size: var(--text-sm);
  font-family: var(--font-sans);
  letter-spacing: 0.04em;
  background: none;
  width: 100%;
  text-align: left;
}

.nav-item:hover { color: var(--text); background: var(--accent-glow); }

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

.nav-icon { font-size: var(--text-lg); width: 18px; text-align: center; }

/* Icons are Unicode symbols, and several of them (⚙ ◻ ↗ ↘ ◼ ⚖ ♻ ⏱ ↩) have both
   a text and an emoji presentation. Karla has glyphs for none of them, so mobile
   font fallback reaches Apple Color Emoji and renders them in colour. This pins
   them to the monochrome text form on browsers that support it; a U+FE0E
   variation selector in the markup covers the ones that don't. */
.nav-icon,
.icon-option,
.empty-icon,
.sidebar-btn,
.sort-icon {
  font-variant-emoji: text;
}

.sync-area {
  padding: 20px 24px 8px;
  border-top: 1px solid var(--border);
}

.account-email {
  font-size: var(--text-caption);
  color: var(--text-dim);
  text-align: center;
  margin-bottom: 6px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.last-sync {
  color: var(--muted);
  font-size: var(--text-caption);
  text-align: center;
  margin-top: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.sync-spinner {
  width: 14px;
  height: 14px;
  border: 2px solid var(--accent-border);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  flex-shrink: 0;
}

.last-sync--active {
  color: var(--accent-text);
  font-size: var(--text-sm);
  font-weight: 600;
}

.sync-btn.is-syncing,
.sync-btn:disabled {
  background: var(--accent-dim);
  border-color: var(--accent);
  cursor: progress;
}

/* ── Sync status card ────────────────────────────────────
   Persistent while a sync, link or update-mode call runs. Toasts expire after
   4s, but a first link can take much longer, so this one stays until the
   request returns. Sits in the toast corner, above the toast stack. */
.sync-status {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 10000;
  display: flex;
  align-items: center;
  gap: 14px;
  max-width: 340px;
  padding: 14px 18px;
  background: var(--surface);
  border: 1px solid var(--accent-border);
  border-left: 3px solid var(--accent);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
  color: var(--text);
  animation: slideIn 0.2s ease;
}

body:has(.sync-status) .toast-wrap {
  bottom: 110px;
}

.sync-status-spinner {
  width: 24px;
  height: 24px;
  border: 3px solid var(--accent-dim);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  flex-shrink: 0;
}

.sync-status-label {
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--text-bright);
}

.sync-status-hint {
  margin-top: 2px;
  font-size: var(--text-sm);
  color: var(--text-dim);
}

@media (max-width: 768px) {
  .sync-status {
    left: 16px;
    right: 16px;
    bottom: 16px;
    max-width: none;
  }
}

.demo-btn {
  width: 100%;
  background: transparent;
  color: var(--muted);
  border: 1px solid var(--border);
  padding: 8px 16px;
  font-family: var(--font-sans);
  font-size: var(--text-caption);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  margin-top: 8px;
  transition: all 0.2s;
}

.demo-btn:hover { border-color: var(--muted); color: var(--text-dim); }
.demo-btn.remove { color: var(--red); border-color: var(--red); }
.demo-btn.remove:hover { background: var(--red-dim); border-color: var(--red); color: var(--red); }

.sidebar-btn {
  width: 100%;
  background: transparent;
  border: 1px solid var(--border);
  color: var(--muted);
  font-family: var(--font-sans);
  font-size: var(--text-caption);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 8px 16px;
  cursor: pointer;
  transition: all 0.2s;
}

.sync-btn {
  color: var(--accent-text);
  border-color: var(--accent-border);
}

.sync-btn:hover {
  background: var(--accent-dim);
  border-color: var(--accent);
}

.sign-out-btn {
  margin-top: 8px;
  border-color: var(--border);
  color: var(--text-dim);
}

.sign-out-btn:hover {
  color: var(--text);
  border-color: var(--muted);
}

/* ── Main content ────────────────────────────────────────── */
main {
  overflow-y: auto;
  background: var(--bg);
  min-width: 0;
}

.page { display: none; padding: 36px 40px; animation: fadeIn 0.2s ease; }
.page.active { display: block; }

@keyframes fadeIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }

/* ── Sync flash ──────────────────────────────────────────── */
@keyframes syncFlash {
  0%   { color: var(--accent); }
  60%  { color: var(--accent); }
  100% { color: var(--muted);  }
}

.last-sync--fresh {
  animation: syncFlash 2.5s ease-out forwards;
}

/* ── Custom pages ──────────────────────────────────────── */
#navCustomPages {
  display: flex;
  flex-direction: column;
}

.nav-item--custom {
  position: relative;
  padding-right: 36px;
}

.nav-drag-handle {
  font-size: 14px;
  color: var(--muted);
  opacity: 0;
  cursor: grab;
  margin-left: -14px;
  margin-right: 2px;
  flex-shrink: 0;
  transition: opacity 0.15s;
  user-select: none;
}
@media (max-width: 768px) {
  .nav-drag-handle { display: none; }
}
.nav-item--custom:hover .nav-drag-handle {
  opacity: 0.5;
}
.nav-item--custom:hover .nav-drag-handle:hover {
  opacity: 1;
}
.nav-item--ghost {
  opacity: 0.4;
  background: var(--surface2) !important;
}

.nav-item-label {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.nav-item-options-btn {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: var(--muted);
  cursor: pointer;
  padding: 4px 6px;
  font-size: 14px;
  line-height: 1;
  letter-spacing: 1px;
  opacity: 0;
  transition: opacity 0.15s, color 0.15s;
  width: auto;
  min-width: 0;
  height: auto;
}

.nav-item--custom:hover .nav-item-options-btn,
.nav-item--custom.active .nav-item-options-btn {
  opacity: 1;
}

.nav-item-options-btn:hover {
  color: var(--text-bright);
  background: none;
}

.nav-add-page-btn {
  color: var(--muted);
  font-size: var(--text-caption);
  opacity: 0.7;
  padding-left: 34px;
}

.nav-add-page-btn:hover {
  opacity: 1;
  color: var(--text);
}

/* ── Danger modal variants ─────────────────────────────── */
.modal-danger-btn,
.modal-confirm--danger {
  background: var(--red-dim);
  color: var(--red);
  border: 1px solid var(--red);
}

.modal-danger-btn:hover,
.modal-confirm--danger:hover {
  background: var(--red);
  color: #fff;
}

.modal-p {
  color: var(--muted);
  font-size: var(--text-caption);
  margin: 0 0 16px;
  line-height: 1.5;
}

.modal-error {
  color: var(--red, #e55);
  font-size: var(--text-caption);
  min-height: 18px;
  margin-bottom: 4px;
}

.modal-hint {
  color: var(--muted);
  font-size: var(--text-caption);
  margin-top: 5px;
}

/* ── Icon picker ───────────────────────────────────────── */
.page-icon-picker {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.icon-option {
  width: 32px;
  height: 32px;
  border: 1px solid var(--border);
  background: none;
  cursor: pointer;
  font-size: 16px;
  border-radius: 4px;
  color: var(--text);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: border-color 0.1s, color 0.1s;
}

.icon-option:hover {
  border-color: var(--muted);
}

.icon-option.selected {
  border-color: var(--accent);
  color: var(--accent);
}