/* SPDX-License-Identifier: MIT
 * By Shimon Shmueli */

/* ================================
   Theme tokens — CSS variables
   ================================
   - .dark toggles light/dark mode (high-level palette)
   - .scheme-* swaps accent (and for `claude`, also tints surfaces)
   - .dark.scheme-* combines both
   ================================ */

:root {
  /* surfaces & text — light */
  --bg:           #f8fafc;  /* slate-50 */
  --surface:      #ffffff;
  --surface-alt:  #f1f5f9;  /* slate-100 */
  --border:       #e2e8f0;  /* slate-200 */
  --text:         #0f172a;  /* slate-900 */
  --text-muted:   #475569;  /* slate-600 */
  --text-soft:    #94a3b8;  /* slate-400 */

  /* accent — indigo (default scheme) */
  --accent:       #4f46e5;  /* indigo-600 */
  --accent-hover: #4338ca;  /* indigo-700 */
  --accent-soft:  rgba(99, 102, 241, 0.10);
  --accent-on:    #ffffff;
}

.dark {
  --bg:           #020617;  /* slate-950 */
  --surface:      #0f172a;  /* slate-900 */
  --surface-alt:  #1e293b;  /* slate-800 */
  --border:       #1e293b;  /* slate-800 */
  --text:         #f1f5f9;  /* slate-100 */
  --text-muted:   #94a3b8;  /* slate-400 */
  --text-soft:    #64748b;  /* slate-500 */

  --accent:       #818cf8;  /* indigo-400 */
  --accent-hover: #a5b4fc;  /* indigo-300 */
  --accent-soft:  rgba(129, 140, 248, 0.12);
  --accent-on:    #0f172a;
}

/* ---- Claude scheme: warm coral + cream ---- */
.scheme-claude {
  --bg:           #faf5ec;
  --surface:      #ffffff;
  --surface-alt:  #f4ead6;
  --border:       #e6d5b6;
  --text:         #2a1d0e;
  --text-muted:   #6b4f2c;
  --text-soft:    #a68e63;

  --accent:       #c4602f;
  --accent-hover: #a04a25;
  --accent-soft:  rgba(196, 96, 47, 0.10);
  --accent-on:    #ffffff;
}
.dark.scheme-claude {
  --bg:           #1a1208;
  --surface:      #261b10;
  --surface-alt:  #2e2316;
  --border:       #3a2a1a;
  --text:         #f5e6d0;
  --text-muted:   #c4ac8a;
  --text-soft:    #9c8767;

  --accent:       #ea9676;
  --accent-hover: #f4ad8a;
  --accent-soft:  rgba(234, 150, 118, 0.14);
  --accent-on:    #1a1208;
}

/* ---- Slate scheme: minimal, no accent color ---- */
.scheme-slate {
  --accent:       #475569;
  --accent-hover: #334155;
  --accent-soft:  rgba(71, 85, 105, 0.10);
  --accent-on:    #ffffff;
}
.dark.scheme-slate {
  --accent:       #cbd5e1;
  --accent-hover: #e2e8f0;
  --accent-soft:  rgba(203, 213, 225, 0.10);
  --accent-on:    #0f172a;
}

/* ---- Emerald scheme: calm green ---- */
.scheme-emerald {
  --accent:       #059669;
  --accent-hover: #047857;
  --accent-soft:  rgba(5, 150, 105, 0.10);
  --accent-on:    #ffffff;
}
.dark.scheme-emerald {
  --accent:       #34d399;
  --accent-hover: #6ee7b7;
  --accent-soft:  rgba(52, 211, 153, 0.12);
  --accent-on:    #0f172a;
}

/* Translucent header backdrop — uses color-mix so it works with any scheme */
.surface-translucent {
  background-color: color-mix(in srgb, var(--surface) 80%, transparent);
}

/* ================================
   Density tokens
   ================================ */

:root, .density-cozy {
  --row-py:        0.375rem;   /* item top/bottom padding */
  --row-gap-y:     0.25rem;    /* vertical gap between item rows */
  --card-header-py: 0.75rem;
  --card-body-py:  1rem;
  --card-px:       1.25rem;
  --section-gap:   1rem;       /* margin between top-level cards */
}
.density-compact {
  --row-py:        0.125rem;
  --row-gap-y:     0;
  --card-header-py: 0.5rem;
  --card-body-py:  0.625rem;
  --card-px:       1rem;
  --section-gap:   0.5rem;
}
.density-comfortable {
  --row-py:        0.625rem;
  --row-gap-y:     0.5rem;
  --card-header-py: 1rem;
  --card-body-py:  1.25rem;
  --card-px:       1.5rem;
  --section-gap:   1.5rem;
}

.sections > * + * { margin-top: var(--section-gap); }

/* Item button focus ring — used for keyboard grid navigation */
.item-button:focus-visible {
  outline: none;
  background-color: var(--accent-soft) !important;
  box-shadow: 0 0 0 2px var(--accent);
}

/* ================================
   Misc
   ================================ */

* {
  scrollbar-width: thin;
  scrollbar-color: rgb(148 163 184 / 0.4) transparent;
}
*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
  background: rgb(148 163 184 / 0.4);
  border-radius: 999px;
}
.dark *::-webkit-scrollbar-thumb { background: rgb(71 85 105 / 0.5); }

input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; }

.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

[x-cloak] { display: none !important; }
pre code { white-space: pre; }

@keyframes copied-flash {
  0%   { transform: translateY(-2px); opacity: 0; }
  20%  { transform: translateY(0);    opacity: 1; }
  80%  { opacity: 1; }
  100% { opacity: 0; }
}
.copied-flash { animation: copied-flash 1.2s ease forwards; }

/* ================================
   Print stylesheet — clean B&W
   ================================ */

@media print {
  @page { margin: 0.6in; }

  /* Force a clean page regardless of theme/scheme/brightness. */
  html, body, body[class*="dark"], body[class*="scheme-"] {
    background: white !important;
    color: black !important;
    filter: none !important;
  }

  /* Hide chrome: header, footer, all modal/drawer wrappers, settings,
     the active tag-filter banner. */
  [data-print="hide"] {
    display: none !important;
  }

  /* Force every collapsed category open so the printout is complete. */
  [data-print="expand"] {
    display: block !important;
    height: auto !important;
    overflow: visible !important;
  }

  /* Cards: light border, no shadow, never split a category across pages. */
  section {
    background: white !important;
    border: 1px solid #bbb !important;
    border-radius: 6px !important;
    box-shadow: none !important;
    page-break-inside: avoid;
    break-inside: avoid;
    margin-bottom: 0.4rem !important;
  }

  /* Items: black text, no hover bg, allow breaking cleanly. */
  .item-button {
    color: black !important;
    background: transparent !important;
    page-break-inside: avoid;
  }

  /* Item titles: keep emphasis but force ink-friendly color. */
  .item-button span[style*="--accent"],
  .item-button span[style*="color: var(--accent)"] {
    color: black !important;
    font-weight: 600;
  }

  /* Restore dimmed (env-non-applicable) items so the printout is comprehensive. */
  .item-button.opacity-40,
  .opacity-40 {
    opacity: 1 !important;
  }

  /* Category accent header → black, slightly larger for legibility. */
  h2 {
    color: black !important;
    font-size: 10pt !important;
  }

  /* Drop the search input keycap and any chrome leftovers. */
  kbd, [aria-label="Settings"], [title="Settings"] {
    display: none !important;
  }

  /* Section gap tightens for paper. */
  .sections > * + * { margin-top: 0.4rem !important; }

  /* Avoid Tailwind's text-soft fading away on print. */
  [style*="color: var(--text-soft)"],
  [style*="color: var(--text-muted)"] {
    color: #444 !important;
  }
}