/* tk-shell.css — Phase 1 shell for TK-OS (only active with ?v2=1)
 *
 * Applied on top of the existing app. It restyles the frame — sidebar, header,
 * page background, typography — and leaves every view's markup untouched.
 * Removing ?v2=1 from the URL restores the old look exactly.
 */

:root {
  --tk-paper: #F6F4EF;
  --tk-card: #FFFFFF;
  --tk-ink: #12161A;
  --tk-ink-2: #3C434B;
  --tk-muted: #6E7681;
  --tk-line: #E6E2D9;
  --tk-accent: #d93a1e;
  --tk-accent-strong: #b32d15;
  --tk-accent-soft: #FBEDEA;
  --tk-sidebar: #0e0e0c;
  --tk-sidebar-line: #232120;
  --tk-sidebar-text: #C9C3B8;
  --tk-sidebar-dim: #7C766B;
}

body.tk-v2 {
  background: var(--tk-paper) !important;
  color: var(--tk-ink);
  padding-left: 240px;
  -webkit-font-smoothing: antialiased;
}

/* --- header becomes a slim context bar --- */
body.tk-v2 > header.glass-nav {
  background: rgba(246, 244, 239, .92) !important;
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--tk-line) !important;
  box-shadow: none !important;
}
body.tk-v2 > header.glass-nav > div { max-width: none !important; padding-left: 28px; padding-right: 28px; }
body.tk-v2 > header.glass-nav .h-20 { height: 58px !important; }
body.tk-v2 > header.glass-nav h1 { font-size: 14px !important; letter-spacing: -.01em; }
body.tk-v2 > header.glass-nav p { display: none !important; }
body.tk-v2 > header.glass-nav .w-12 { width: 30px !important; height: 30px !important; border-radius: 8px !important; font-size: 12px !important; }

/* --- page container --- */
body.tk-v2 main { max-width: 1280px !important; padding-top: 20px; }

/* --- sidebar --- */
#tk-sidebar {
  position: fixed;
  inset: 0 auto 0 0;
  width: 240px;
  background: var(--tk-sidebar);
  color: var(--tk-sidebar-text);
  padding: 18px 12px;
  display: flex;
  flex-direction: column;
  gap: 22px;
  z-index: 9999;
  overflow-y: auto;
  font-family: 'Archivo', ui-sans-serif, system-ui, sans-serif;
}

#tk-sidebar .tk-brand { display: flex; align-items: center; gap: 10px; padding: 0 8px; }
#tk-sidebar .tk-mark {
  width: 32px; height: 32px; border-radius: 9px; flex: 0 0 auto;
  background: #fff;
  display: grid; place-items: center; color: #0e0e0c; font-weight: 700; font-size: 12px;
  border: 1px solid #2a2824;
}
#tk-sidebar .tk-name { font-size: 13px; font-weight: 600; color: #F0F4F2; line-height: 1.15; }
#tk-sidebar .tk-sub { font-size: 10px; color: var(--tk-sidebar-dim); letter-spacing: .04em; text-transform: uppercase; }

#tk-sidebar .tk-group { display: flex; flex-direction: column; gap: 1px; }
#tk-sidebar .tk-group-label {
  font-size: 10px; font-weight: 600; letter-spacing: .09em; text-transform: uppercase;
  color: var(--tk-sidebar-dim); padding: 0 10px; margin-bottom: 6px;
}
#tk-sidebar .tk-link {
  display: flex; align-items: center; gap: 9px;
  padding: 7px 10px; border-radius: 8px;
  font-size: 12.5px; font-weight: 500; color: var(--tk-sidebar-text);
  border: 0; background: transparent; text-align: left; width: 100%; cursor: pointer;
  transition: background .12s ease, color .12s ease;
}
#tk-sidebar .tk-link:hover { background: #16211D; color: #F0F4F2; }
#tk-sidebar .tk-link.is-active { background: #1a1917; color: #FFFFFF; }
#tk-sidebar .tk-link.is-active::before {
  content: ''; width: 3px; height: 14px; border-radius: 2px;
  background: #d93a1e; margin-left: -10px; margin-right: 7px;
}
#tk-sidebar .tk-link .tk-dot {
  width: 4px; height: 4px; border-radius: 999px; background: #3A4A44; margin-left: auto;
}
#tk-sidebar .tk-link.is-active .tk-dot { background: #d93a1e; }

#tk-sidebar .tk-foot { margin-top: auto; display: flex; flex-direction: column; gap: 8px; }
#tk-sidebar .tk-exit {
  font-size: 10.5px; color: var(--tk-sidebar-dim); background: transparent;
  border: 1px solid var(--tk-sidebar-line); border-radius: 7px; padding: 6px 8px;
  cursor: pointer; text-align: left;
}
#tk-sidebar .tk-exit:hover { color: #D9E2DE; border-color: #2C3D37; }

/* --- soften the existing cards so they sit on the warm background --- */
body.tk-v2 .bg-white { border-color: var(--tk-line) !important; }
body.tk-v2 .rounded-xl, body.tk-v2 .rounded-2xl { border-radius: 12px !important; }

@media (max-width: 900px) {
  body.tk-v2 { padding-left: 0; }
  #tk-sidebar { display: none; }
}