/* ============================================================
 * Terminal theme
 * ------------------------------------------------------------
 * Project-owned styling. The vendored `app.css` (a pre-compiled
 * Tailwind + DaisyUI bundle) is NOT edited. This file loads
 * after it (see base.html / admin/base.html) and provides:
 *
 *   1. Catppuccin Latte for DaisyUI's `light` theme
 *      and Gruvbox for DaisyUI's `dark` theme
 *   2. square corners (terminals have none)
 *   3. a terminal look & feel: monospace, window chrome,
 *      vim-style statusline, CRT scanlines
 *   4. `.term-*` building blocks used by the templates
 *
 * Why CSS classes and not utility classes: `app.css` is frozen
 * and only contains the utilities the original project used, so
 * new Tailwind classes would not exist. The DaisyUI *components*
 * (card/btn/badge/menu/...) do exist and are reused; everything
 * else is defined here as real, themeable CSS.
 *
 * Palettes:
 *   - https://github.com/catppuccin/catppuccin  (Latte)
 *   - https://github.com/morhetz/gruvbox        (dark, bright)
 * DaisyUI color vars are OKLch "L% C H" triplets; this file can
 * therefore tint anything with `oklch(var(--x) / <alpha>)`.
 * ============================================================ */

/* === 1. Theme palettes ====================================== */
/* Catppuccin Latte. */
[data-theme="light"] {
  --b1: 95.78% 0.006 264.5;    /* #eff1f5  base              */
  --b2: 93.35% 0.009 264.5;    /* #e6e9ef  mantle            */
  --b3: 90.60% 0.012 264.5;    /* #dce0e8  crust             */
  --bc: 43.55% 0.043 279.3;    /* #4c4f69  text              */

  --n:  80.83% 0.017 271.2;    /* #bcc0cc  surface1          */
  --nc: 43.55% 0.043 279.3;    /* #4c4f69  text              */

  --p:  55.86% 0.226 262.1;    /* #1e66f5  blue    primary   */
  --pc: 95.78% 0.006 264.5;    /* #eff1f5  text on primary   */
  --s:  55.47% 0.250 297.0;    /* #8839ef  mauve   secondary */
  --sc: 95.78% 0.006 264.5;    /* #eff1f5  text on secondary */
  --a:  60.23% 0.098 201.1;    /* #179299  teal    accent    */
  --ac: 95.78% 0.006 264.5;    /* #eff1f5  text on accent    */

  --in:  68.20% 0.145 235.4;   /* #04a5e5  sky     info      */
  --su:  62.50% 0.177 140.4;   /* #40a02b  green   success   */
  --wa:  71.40% 0.149 67.8;    /* #df8e1d  yellow  warning   */
  --er:  55.05% 0.216 19.8;    /* #d20f39  red     error     */
  --inc: 43.55% 0.043 279.3;   /* #4c4f69  text on status    */
  --suc: 95.78% 0.006 264.5;
  --wac: 95.78% 0.006 264.5;
  --erc: 95.78% 0.006 264.5;
}

/* Source hex noted per line. To retune: change hex, reconvert
 * to OKLch, update the value. */
[data-theme="dark"] {
  --b1: 27.69% 0 0;            /* #282828  bg0    screen background */
  --b2: 31.10% 0.003 49.7;     /* #32302f  bg0_s  panels / chrome   */
  --b3: 34.40% 0.0066 48.7;    /* #3c3836  bg1    borders           */
  --bc: 89.42% 0.0566 89.5;    /* #ebdbb2  fg     body text         */

  --n:  34.40% 0.0066 48.7;    /* #3c3836  bg1                      */
  --nc: 89.42% 0.0566 89.5;    /* #ebdbb2  fg                       */

  --p:  73.10% 0.182 51.7;     /* #fe8019  bright orange  primary   */
  --pc: 27.69% 0 0;            /* #282828  text on primary          */
  --s:  70.54% 0.097 2.3;      /* #d3869b  bright purple  secondary */
  --sc: 27.69% 0 0;            /* #282828  text on secondary        */
  --a:  75.57% 0.108 137.6;    /* #8ec07c  bright aqua    accent    */
  --ac: 27.69% 0 0;            /* #282828  text on accent           */

  --in:  69.26% 0.042 169.8;   /* #83a598  bright blue    info      */
  --su:  76.52% 0.158 110.8;   /* #b8bb26  bright green   success   */
  --wa:  83.49% 0.160 83.6;    /* #fabd2f  bright yellow  warning   */
  --er:  65.97% 0.217 30.4;    /* #fb4934  bright red     error     */
  --inc: 24.07% 0.005 220.9;   /* #1d2021  bg0_h  text on status    */
  --suc: 24.07% 0.005 220.9;
  --wac: 24.07% 0.005 220.9;
  --erc: 24.07% 0.005 220.9;
}

/* === 2. Square corners ====================================== */
/* `[data-theme]` matches the same <html> element as the vendored
 * `[data-theme=dark|light]` rules with equal specificity, and
 * wins by load order. Applies to both themes. */
[data-theme] {
  --rounded-box: 0;
  --rounded-btn: 0;
  --rounded-badge: 0;
  --tab-radius: 0;
  --animation-btn: 0;
  --animation-input: 0;
}

/* === 3. Terminal look & feel ================================ */
body {
  font-family: "JetBrains Mono", "Cascadia Code", "Fira Code",
    ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  font-size: 15px;
  line-height: 1.6;
}

/* Text selection + scrollbars */
[data-theme="light"] ::selection { background: #acb0be; color: #4c4f69; }
[data-theme="light"] { scrollbar-color: #bcc0cc #eff1f5; }
[data-theme="light"] ::-webkit-scrollbar { width: 12px; height: 12px; }
[data-theme="light"] ::-webkit-scrollbar-track { background: #eff1f5; }
[data-theme="light"] ::-webkit-scrollbar-thumb {
  background: #bcc0cc; border: 3px solid #eff1f5;
}
[data-theme="light"] ::-webkit-scrollbar-thumb:hover { background: #acb0be; }

[data-theme="dark"] ::selection { background: #fe8019; color: #282828; }
[data-theme="dark"] { scrollbar-color: #504945 #282828; }
[data-theme="dark"] ::-webkit-scrollbar { width: 12px; height: 12px; }
[data-theme="dark"] ::-webkit-scrollbar-track { background: #282828; }
[data-theme="dark"] ::-webkit-scrollbar-thumb {
  background: #504945; border: 3px solid #282828;
}
[data-theme="dark"] ::-webkit-scrollbar-thumb:hover { background: #665c54; }

/* Faint CRT scanlines — dark only. Remove this block to drop it. */
[data-theme="dark"] body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 90;
  pointer-events: none;
  background: repeating-linear-gradient(
    0deg, rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0.15) 1px,
    transparent 1px, transparent 3px);
  opacity: 0.45;
}

/* --- color helpers (theme-adaptive: gruvbox in dark) -------- */
.t-orange { color: oklch(var(--p)); }
.t-purple { color: oklch(var(--s)); }
.t-aqua   { color: oklch(var(--a)); }
.t-blue   { color: oklch(var(--in)); }
.t-green  { color: oklch(var(--su)); }
.t-yellow { color: oklch(var(--wa)); }
.t-red    { color: oklch(var(--er)); }
.t-dim    { color: oklch(var(--bc) / 0.5); }

/* --- window titlebar (the header) -------------------------- */
.term-titlebar {
  position: sticky;
  top: 0;
  z-index: 50;
  background: oklch(var(--b2));
  border-bottom: 1px solid oklch(var(--b3));
}
.term-nav {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  width: 100%;
  max-width: 72rem;
  margin: 0 auto;
  padding: 0.5rem 1rem;
}
.term-dots { display: inline-flex; gap: 0.45rem; flex: none; }
.term-dot {
  width: 0.72rem;
  height: 0.72rem;
  border-radius: 9999px;
  display: block;
}
.term-dot.r { background: oklch(var(--er)); }
.term-dot.y { background: oklch(var(--wa)); }
.term-dot.g { background: oklch(var(--su)); }
.term-brand {
  font-size: 0.85rem;
  white-space: nowrap;
  text-decoration: none;
}
.term-brand:hover { text-decoration: none; }
.term-nav-right { margin-left: auto; display: flex; align-items: center; gap: 0.25rem; }

/* horizontal nav links */
.term-navlinks { padding: 0; gap: 0; }
.term-navlinks li > a,
.term-navlinks li > form > button {
  padding: 0.2rem 0.55rem;
  font-size: 0.85rem;
  border-radius: 0;
}
.term-navlinks li > a::before { content: ""; }
.term-navlinks li > a:hover,
.term-navlinks li > form > button:hover {
  background: transparent;
  color: oklch(var(--p));
}
.term-navlinks a.is-active {
  color: oklch(var(--p));
  background: oklch(var(--p) / 0.12);
}
.term-navlinks a.is-active::before {
  content: "▸ ";
  color: oklch(var(--p));
}

/* --- page body layout -------------------------------------- */
.term-main {
  flex: 1 1 auto;
  width: 100%;
  max-width: 72rem;
  margin: 0 auto;
  padding: 2.25rem 1rem 3rem;
}

/* --- command-prompt page heading --------------------------- */
.term-cmd {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.75rem;
  padding-bottom: 0.85rem;
  border-bottom: 1px solid oklch(var(--b3));
}
.term-cmd-line { font-size: 0.8rem; color: oklch(var(--bc) / 0.85); }
.term-title {
  margin-top: 0.4rem;
  font-size: 1.7rem;
  font-weight: 700;
  line-height: 1.15;
  color: oklch(var(--p));
}
.term-sub { margin-top: 0.2rem; font-size: 0.85rem; color: oklch(var(--bc) / 0.55); }
.term-cmd-actions { display: flex; gap: 0.5rem; flex-wrap: wrap; }

/* --- responsive card grid ---------------------------------- */
.term-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
}
.term-stack > * + * { margin-top: 1rem; }

/* --- cards as terminal windows ----------------------------- */
.card {
  background: oklch(var(--b2));
  border: 1px solid oklch(var(--b3));
  box-shadow: none;
}
.card:hover { border-color: oklch(var(--p) / 0.5); }
/* filename strip at the top of a card */
.term-head {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 0.85rem;
  font-size: 0.74rem;
  color: oklch(var(--bc) / 0.6);
  background: oklch(var(--b1));
  border-bottom: 1px solid oklch(var(--b3));
}
.term-head .term-dots .term-dot { width: 0.55rem; height: 0.55rem; }
.term-head-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.term-head-meta { margin-left: auto; }
.card-title a { color: oklch(var(--p)); text-decoration: none; }
.card-title a:hover { text-decoration: underline; }

/* --- inline tags ------------------------------------------- */
.term-tag {
  display: inline-block;
  padding: 0.02rem 0.45rem;
  font-size: 0.7rem;
  letter-spacing: 0.03em;
  border: 1px solid oklch(var(--p) / 0.55);
  color: oklch(var(--p));
}
.term-tag.is-aqua   { border-color: oklch(var(--a) / 0.55);  color: oklch(var(--a)); }
.term-tag.is-purple { border-color: oklch(var(--s) / 0.55);  color: oklch(var(--s)); }
.term-tag.is-blue   { border-color: oklch(var(--in) / 0.55); color: oklch(var(--in)); }
.term-tag.is-green  { border-color: oklch(var(--su) / 0.55); color: oklch(var(--su)); }

/* --- empty / "no results" state ---------------------------- */
.term-empty {
  padding: 2.25rem 1rem;
  text-align: center;
  color: oklch(var(--bc) / 0.6);
  border: 1px dashed oklch(var(--b3));
}
.term-empty-cmd { font-size: 0.8rem; color: oklch(var(--bc) / 0.45); }

/* --- how-it-works note + form helpers (admin) -------------- */
.term-note {
  margin-bottom: 1.5rem;
  padding: 0.9rem 1.1rem;
  background: oklch(var(--b2));
  border: 1px solid oklch(var(--b3));
  border-left: 3px solid oklch(var(--a));
}
.term-note-title { margin-bottom: 0.55rem; font-size: 0.8rem; color: oklch(var(--a)); }
.term-step { display: flex; gap: 0.55rem; font-size: 0.88rem; }
.term-step + .term-step { margin-top: 0.3rem; }
.term-step-n { flex: none; color: oklch(var(--p)); }
.term-note-foot { margin-top: 0.6rem; font-size: 0.8rem; color: oklch(var(--bc) / 0.6); }
.term-help { margin-top: 0.2rem; font-size: 0.76rem; color: oklch(var(--bc) / 0.55); }
.term-picklist {
  border: 1px solid oklch(var(--b3));
  background: oklch(var(--b1));
  max-height: 18rem;
  overflow-y: auto;
}
.term-pick {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.5rem 0.7rem;
  border-top: 1px solid oklch(var(--b3));
  cursor: pointer;
}
.term-pick:first-child { border-top: 0; }
.term-pick:hover { background: oklch(var(--b2)); }
.term-formdiv { margin: 1.25rem 0; border-top: 1px dashed oklch(var(--b3)); }

/* --- terminal session block (mockup-code substitute) ------- */
.term-screen {
  background: oklch(var(--b1));
  border: 1px solid oklch(var(--b3));
  padding: 0.85rem 1rem;
  font-size: 0.85rem;
  overflow-x: auto;
}
.term-screen .line { white-space: pre-wrap; }
.term-screen .line::before {
  content: attr(data-p) " ";
  color: oklch(var(--su));
}
.term-screen .line.out::before { content: ""; }
.term-screen .line.out { color: oklch(var(--bc) / 0.8); }

/* --- prose (article / about bodies) ------------------------ */
.term-prose { line-height: 1.7; }
.term-prose a { color: oklch(var(--in)); }

/* --- audio rows -------------------------------------------- */
.term-track {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.5rem 0;
  border-top: 1px solid oklch(var(--b3));
}
.term-track:first-child { border-top: 0; }
.term-track .btn { flex: none; }
.term-track-name { font-size: 0.9rem; }
/* "play album" row sitting above the per-track list */
.term-track-bar {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding-bottom: 0.65rem;
  margin-bottom: 0.15rem;
  border-bottom: 1px solid oklch(var(--b3));
}
.term-track-bar .btn { flex: none; }

/* --- persistent audio player bar --------------------------- */
/* Hidden until the first song plays; shown by adding `uw-playing`
 * to <html>. The bar itself carries `hx-preserve` so the <audio>
 * keeps playing while htmx swaps the page around it. */
#uw-player { display: none; }
.uw-playing #uw-player {
  display: block;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 80;
  background: oklch(var(--b2));
  border-top: 3px solid oklch(var(--p));
  box-shadow: 0 -12px 32px rgba(0, 0, 0, 0.6);
}
.uw-playing body { padding-bottom: 6.75rem; }
.uw-player-inner {
  display: flex;
  align-items: center;
  gap: 1.15rem;
  width: 100%;
  max-width: 72rem;
  margin: 0 auto;
  padding: 1rem 1.5rem;
}
.uw-player-tag {
  flex: none;
  font-size: 0.98rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: oklch(var(--p));
  white-space: nowrap;
}
.uw-player-title {
  flex: none;
  max-width: 24rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 1.1rem;
  color: oklch(var(--bc));
}
#uw-audio {
  flex: 1;
  min-width: 9rem;
  width: auto;
  height: 3.25rem;
  margin: 0;
}
.uw-player-close {
  flex: none;
  width: 2.85rem;
  height: 2.85rem;
  font-size: 1.05rem;
  background: transparent;
  border: 1px solid oklch(var(--b3));
  color: oklch(var(--bc) / 0.7);
  cursor: pointer;
  line-height: 1;
}
.uw-player-close:hover { color: oklch(var(--er)); border-color: oklch(var(--er)); }
/* transport + playlist toggle buttons in the player bar */
.uw-player-btn {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.3rem;
  min-width: 2.85rem;
  height: 2.85rem;
  padding: 0 0.6rem;
  font-size: 1.05rem;
  background: transparent;
  border: 1px solid oklch(var(--b3));
  color: oklch(var(--bc) / 0.78);
  cursor: pointer;
  line-height: 1;
}
.uw-player-btn:hover { color: oklch(var(--p)); border-color: oklch(var(--p)); }
.uw-queue-badge {
  font-size: 0.72rem;
  font-weight: 700;
  min-width: 1.25rem;
  padding: 0.05rem 0.3rem;
  background: oklch(var(--p));
  color: oklch(var(--pc));
}
#uw-player:not(.uw-has-queue) .uw-queue-badge { display: none; }

/* --- the SoundCloud-style playlist panel ------------------- */
.uw-queue {
  width: 100%;
  max-width: 72rem;
  margin: 0 auto;
  border-bottom: 1px solid oklch(var(--b3));
}
.uw-queue[hidden] { display: none; }
.uw-queue-head {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.6rem 1.5rem;
  border-bottom: 1px solid oklch(var(--b3));
}
.uw-queue-title { font-weight: 700; font-size: 0.95rem; color: oklch(var(--p)); }
.uw-queue-meta { font-size: 0.8rem; color: oklch(var(--bc) / 0.6); }
.uw-queue-clear {
  margin-left: auto;
  padding: 0.25rem 0.6rem;
  font-size: 0.8rem;
  background: transparent;
  border: 1px solid oklch(var(--b3));
  color: oklch(var(--bc) / 0.7);
  cursor: pointer;
}
.uw-queue-clear:hover { color: oklch(var(--er)); border-color: oklch(var(--er)); }
.uw-queue-list {
  list-style: none;
  margin: 0;
  padding: 0.35rem 0;
  max-height: 15rem;
  overflow-y: auto;
}
.uw-queue-item {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.4rem 1.5rem;
}
.uw-queue-item:hover { background: oklch(var(--b3) / 0.5); }
.uw-queue-item.is-current { background: oklch(var(--p) / 0.12); }
.uw-queue-jump {
  flex: none;
  width: 1.85rem;
  height: 1.85rem;
  font-size: 0.8rem;
  background: transparent;
  border: 1px solid oklch(var(--b3));
  color: oklch(var(--bc) / 0.7);
  cursor: pointer;
  line-height: 1;
}
.uw-queue-item.is-current .uw-queue-jump { color: oklch(var(--p)); border-color: oklch(var(--p)); }
.uw-queue-name {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.9rem;
  cursor: pointer;
}
.uw-queue-item.is-current .uw-queue-name { color: oklch(var(--p)); font-weight: 600; }
.uw-queue-remove {
  flex: none;
  width: 1.85rem;
  height: 1.85rem;
  font-size: 0.8rem;
  background: transparent;
  border: 1px solid transparent;
  color: oklch(var(--bc) / 0.5);
  cursor: pointer;
  line-height: 1;
}
.uw-queue-remove:hover { color: oklch(var(--er)); border-color: oklch(var(--er)); }

@media (max-width: 640px) {
  .uw-player-tag { display: none; }
  .uw-player-title { max-width: 7rem; font-size: 0.95rem; }
  .uw-player-inner { padding: 0.75rem 0.95rem; gap: 0.6rem; }
  .uw-playing body { padding-bottom: 5.75rem; }
  .uw-player-btn { min-width: 2.4rem; height: 2.4rem; padding: 0 0.4rem; font-size: 0.95rem; }
  .uw-player-close { width: 2.4rem; height: 2.4rem; }
  #uw-audio { height: 2.7rem; min-width: 7rem; }
  .uw-queue-head, .uw-queue-item { padding-left: 0.95rem; padding-right: 0.95rem; }
}

/* --- vim-style statusline (the footer) --------------------- */
.term-statusline {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  font-size: 0.72rem;
  border-top: 1px solid oklch(var(--b3));
}
.term-seg {
  display: flex;
  align-items: center;
  padding: 0.25rem 0.8rem;
  background: oklch(var(--b3));
  color: oklch(var(--bc));
  white-space: nowrap;
}
.term-seg.is-mode {
  background: oklch(var(--p));
  color: oklch(var(--pc));
  font-weight: 700;
  letter-spacing: 0.06em;
}
.term-seg.is-alt {
  background: oklch(var(--s));
  color: oklch(var(--sc));
  font-weight: 700;
}
.term-seg.is-fill {
  flex: 1 1 8rem;
  background: oklch(var(--b2));
  color: oklch(var(--bc) / 0.55);
}

/* --- square the icon buttons ------------------------------- */
.btn-circle { border-radius: 0; }

/* --- blog editor ------------------------------------------- */
.blog-editor {
  min-height: 24rem;
  background: oklch(var(--b1));
}
.blog-editor .ql-editor {
  min-height: 24rem;
  font-size: 1rem;
  line-height: 1.7;
}
.ql-toolbar.ql-snow,
.ql-container.ql-snow {
  border-color: oklch(var(--b3));
}
.ql-toolbar.ql-snow {
  background: oklch(var(--b2));
}
.ql-snow .ql-stroke {
  stroke: oklch(var(--bc));
}
.ql-snow .ql-fill {
  fill: oklch(var(--bc));
}
.ql-snow .ql-picker,
.ql-snow .ql-picker-options {
  color: oklch(var(--bc));
}
.ql-snow .ql-picker-options {
  background: oklch(var(--b1));
  border-color: oklch(var(--b3));
}
.blog-image-size-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.5rem;
  font-size: 0.875rem;
}
.blog-image-size-controls.hidden {
  display: none;
}
.blog-image-size-controls button {
  border: 1px solid oklch(var(--b3));
  background: oklch(var(--b2));
  padding: 0.3rem 0.65rem;
  line-height: 1;
}
.blog-image-size-controls button:hover {
  border-color: oklch(var(--p));
  color: oklch(var(--p));
}
.blog-image-size-controls label {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}
.blog-image-size-controls input {
  width: 6rem;
}
.blog-editor img,
.blog-content img {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 1rem auto;
  border-radius: 0.25rem;
}
.blog-editor img {
  cursor: pointer;
}
.blog-image-small {
  width: min(100%, 18rem);
}
.blog-image-medium {
  width: min(100%, 34rem);
}
.blog-image-full {
  width: 100%;
}
.blog-content {
  line-height: 1.75;
}
.blog-content h2 {
  margin: 1.5rem 0 0.75rem;
  font-size: 1.35rem;
  font-weight: 700;
}
.blog-content h3 {
  margin: 1.25rem 0 0.5rem;
  font-size: 1.15rem;
  font-weight: 700;
}
.blog-content p,
.blog-content ul,
.blog-content ol {
  margin: 0.75rem 0;
}
.blog-content ul {
  list-style: disc;
  padding-left: 1.4rem;
}
.blog-content ol {
  list-style: decimal;
  padding-left: 1.4rem;
}
.blog-content a {
  color: oklch(var(--p));
  text-decoration: underline;
}

/* --- small screens ----------------------------------------- */
@media (max-width: 767px) {
  .term-nav { gap: 0.5rem; }
  .term-title { font-size: 1.4rem; }
}