/* 3hz.dev
   catppuccin palettes, the bar, the windows, and everything that lives in them.
   colors: https://catppuccin.com/palette  (mocha is the default) */

@font-face { font-family: "Iosevka"; src: url("../fonts/iosevka-400-normal.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Iosevka"; src: url("../fonts/iosevka-400-italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Iosevka"; src: url("../fonts/iosevka-700-normal.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Silkscreen"; src: url("../fonts/silkscreen-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }

/* ── palettes ─────────────────────────────────────────── */

:root, [data-flavor="mocha"] {
  --rosewater:#f5e0dc; --flamingo:#f2cdcd; --pink:#f5c2e7; --mauve:#cba6f7; --red:#f38ba8; --maroon:#eba0ac;
  --peach:#fab387; --yellow:#f9e2af; --green:#a6e3a1; --teal:#94e2d5; --sky:#89dceb; --sapphire:#74c7ec;
  --blue:#89b4fa; --lavender:#b4befe; --text:#cdd6f4; --subtext1:#bac2de; --subtext0:#a6adc8;
  --overlay2:#9399b2; --overlay1:#7f849c; --overlay0:#6c7086; --surface2:#585b70; --surface1:#45475a;
  --surface0:#313244; --base:#1e1e2e; --mantle:#181825; --crust:#11111b;
  color-scheme: dark;
}
[data-flavor="macchiato"] {
  --rosewater:#f4dbd6; --flamingo:#f0c6c6; --pink:#f5bde6; --mauve:#c6a0f6; --red:#ed8796; --maroon:#ee99a0;
  --peach:#f5a97f; --yellow:#eed49f; --green:#a6da95; --teal:#8bd5ca; --sky:#91d7e3; --sapphire:#7dc4e4;
  --blue:#8aadf4; --lavender:#b7bdf8; --text:#cad3f5; --subtext1:#b8c0e0; --subtext0:#a5adcb;
  --overlay2:#939ab7; --overlay1:#8087a2; --overlay0:#6e738d; --surface2:#5b6078; --surface1:#494d64;
  --surface0:#363a4f; --base:#24273a; --mantle:#1e2030; --crust:#181926;
  color-scheme: dark;
}
[data-flavor="frappe"] {
  --rosewater:#f2d5cf; --flamingo:#eebebe; --pink:#f4b8e4; --mauve:#ca9ee6; --red:#e78284; --maroon:#ea999c;
  --peach:#ef9f76; --yellow:#e5c890; --green:#a6d189; --teal:#81c8be; --sky:#99d1db; --sapphire:#85c1dc;
  --blue:#8caaee; --lavender:#babbf1; --text:#c6d0f5; --subtext1:#b5bfe2; --subtext0:#a5adce;
  --overlay2:#949cbb; --overlay1:#838ba7; --overlay0:#737994; --surface2:#626880; --surface1:#51576d;
  --surface0:#414559; --base:#303446; --mantle:#292c3c; --crust:#232634;
  color-scheme: dark;
}
[data-flavor="latte"] {
  /* latte's accents are pastel enough that small text on a light background gets
     hard to read, so these are the same hues pulled darker (oklch lightness only)
     until they pass wcag aa. the originals are in the comments. */
  --rosewater:#974b3c; /* #dc8a78 */ --flamingo:#a24346; /* #dd7878 */ --pink:#a33389;  /* #ea76cb */
  --mauve:#802ce4;     /* #8839ef */ --red:#c20f35;      /* #d20f39 */ --maroon:#c01935; /* #e64553 */
  --peach:#aa4005;     /* #fe640b */ --yellow:#8a5507;   /* #df8e1d */ --green:#1f7107;  /* #40a02b */
  --teal:#056d73;      /* #179299 */ --sky:#046993;      /* #04a5e5 */ --sapphire:#076c7c; /* #209fb5 */
  --blue:#0b55e3;      /* #1e66f5 */ --lavender:#4755c6; /* #7287fd */
  --text:#4c4f69; --subtext1:#5c5f77; --subtext0:#5c5f77; /* #6c6f85 */
  --overlay2:#7c7f93; --overlay1:#8c8fa1; --overlay0:#9ca0b0; --surface2:#acb0be; --surface1:#bcc0cc;
  --surface0:#ccd0da; --base:#eff1f5; --mantle:#e6e9ef; --crust:#dce0e8;
  color-scheme: light;
}

/* ── knobs ────────────────────────────────────────────── */

:root {
  --gap: 12px;           /* gaps_in, basically */
  --radius: 10px;
  --border: 2px;
  --win-bg: color-mix(in srgb, var(--base) 84%, transparent);
  --bar-bg: color-mix(in srgb, var(--mantle) 88%, transparent);
  --mono: "Iosevka", "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  --pixel: "Silkscreen", var(--mono);
  --dim: var(--subtext0);        /* secondary text */
  --pill: color-mix(in srgb, var(--surface0) 70%, var(--mantle));  /* bar modules */
  --sel: var(--surface0);        /* selected / hovered rows */
  --on-accent: var(--crust);     /* text sitting on an accent color */
}
:root[data-flavor="latte"] { --pill: var(--base); --sel: var(--crust); --on-accent: var(--base); }
/* older browsers without color-mix() get solid windows instead of see-through ones */
@supports not (color: color-mix(in srgb, red, blue)) {
  :root { --win-bg: var(--base); --bar-bg: var(--mantle); --pill: var(--surface0); }
}

@property --angle { syntax: "<angle>"; inherits: false; initial-value: 45deg; }

/* ── base ─────────────────────────────────────────────── */

*, *::before, *::after { box-sizing: border-box; }
html { background: var(--crust); scroll-padding-top: 68px; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100vh;
  font-family: var(--mono);
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--text);
}
p, ul, dl, dd, h1, h2, h3, pre { margin: 0; }
ul { padding: 0; list-style: none; }
a { color: var(--blue); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--sky); }
:focus-visible { outline: 2px solid var(--mauve); outline-offset: 2px; border-radius: 4px; }
::selection { background: color-mix(in srgb, var(--mauve) 35%, transparent); color: var(--text); }
b { font-weight: 700; }
kbd { font: inherit; font-size: .9em; padding: 0 5px; border: 1px solid var(--surface2); border-bottom-width: 2px; border-radius: 4px; color: var(--subtext1); }
.ic { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }

.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: absolute; left: -999px; top: 8px; z-index: 50; background: var(--mauve); color: var(--on-accent); padding: 4px 10px; border-radius: 6px; }
.skip:focus { left: 8px; }

/* the wallpaper canvas sits behind everything */
#wall {
  position: fixed; inset: 0;
  width: 100vw; height: 100vh; height: 100lvh;
  image-rendering: pixelated;
  z-index: -1;
  background: var(--crust);
}

/* ── bar (waybar-ish) ─────────────────────────────────── */

.bar {
  position: sticky; top: 10px; z-index: 20;
  display: flex; align-items: center; gap: 10px;
  width: calc(100% - 20px);
  max-width: 1200px;
  height: 42px;
  margin: 10px auto 0;
  padding: 0 6px;
  font-size: 13.5px;
  background: var(--bar-bg);
  border: var(--border) solid var(--surface0);
  border-radius: var(--radius);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}
.bar a { text-decoration: none; }

.bar-logo {
  display: flex; align-items: center; gap: 7px;
  height: 30px; padding: 0 10px;
  color: var(--on-accent);
  background: var(--mauve);
  border-radius: 7px;
  font-family: var(--pixel);
  font-size: 13px;
  letter-spacing: .02em;
}
.bar-logo:hover { color: var(--on-accent); background: var(--lavender); }
.bar-logo svg { width: 24px; height: 12px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }

.ws { display: flex; gap: 2px; }
.ws a {
  display: flex; align-items: center; gap: 6px;
  height: 30px; padding: 0 9px;
  color: var(--dim);
  border-radius: 7px;
}
.ws a b { color: var(--dim); font-weight: 700; }
.ws a:hover { background: var(--pill); color: var(--text); }
.ws a[aria-current="true"] { background: var(--pill); color: var(--text); }
.ws a[aria-current="true"] b { color: var(--mauve); }

.bar-title {
  flex: 1; min-width: 0;
  text-align: center;
  color: var(--subtext0);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.bar-mods { display: flex; gap: 6px; margin-left: auto; }
.mod {
  display: flex; align-items: center; gap: 7px;
  height: 30px; padding: 0 11px;
  font: inherit;
  color: var(--subtext1);
  background: var(--pill);
  border: 0;
  border-radius: 7px;
  white-space: nowrap;
}
.mod-cpu { color: var(--peach); }
.mod-clock { color: var(--lavender); }
.mod-clock .day { color: var(--dim); }
.mod-flavor { color: var(--mauve); cursor: pointer; }
.mod-flavor:hover { background: var(--surface1); }
.swatch { width: 11px; height: 11px; border-radius: 50%; background: conic-gradient(var(--mauve) 0 25%, var(--pink) 0 50%, var(--lavender) 0 75%, var(--blue) 0); }

/* ── the desk: tiled windows ──────────────────────────── */

.desk {
  display: grid;
  gap: var(--gap);
  max-width: 1200px;
  margin: 0 auto;
  padding: var(--gap) 10px;
}

.win {
  position: relative;
  display: flex; flex-direction: column;
  min-width: 0;
  background: var(--win-bg);
  border-radius: var(--radius);
  -webkit-backdrop-filter: blur(12px) saturate(1.15);
  backdrop-filter: blur(12px) saturate(1.15);
}
/* border lives on a masked pseudo-element so the translucent window
   doesn't show the gradient through it */
.win::before {
  content: "";
  position: absolute; inset: 0;
  padding: var(--border);
  border-radius: inherit;
  background: var(--surface0);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  pointer-events: none;
}
.win.is-focused::before, html:not(.js) .win:hover::before {
  background: conic-gradient(from var(--angle), var(--mauve), var(--lavender), var(--pink), var(--mauve));
}
.win.is-focused::before { animation: borderangle 8s linear infinite; }
@keyframes borderangle { to { --angle: 405deg; } }

.win-bar {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 7px 16px 6px;
  font-size: 13px;
  color: var(--dim);
  border-bottom: 1px solid var(--surface0);
}
.win-bar h1, .win-bar h2, .win-title { font-size: inherit; font-weight: 400; color: var(--subtext0); }
.win-bar b { color: var(--subtext1); margin-right: 4px; }
.win.is-focused .win-bar b { color: var(--mauve); }
.win-meta { color: var(--dim); }
.win-body { flex: 1; padding: 14px 18px 18px; }

/* the shell prompt at the top of terminal windows */
.cmd { color: var(--text); margin-bottom: 10px; }
.p-dir { color: var(--blue); font-weight: 700; }
.p-arrow { color: var(--green); }

/* ── fetch ────────────────────────────────────────────── */

.fetch { display: flex; gap: 22px; align-items: flex-start; }
.fetch-logo { flex-shrink: 0; padding-top: 4px; }
.fetch-logo img {
  display: block;
  width: 170px; height: 170px;
  border-radius: 8px;
  object-fit: cover;
}
.fetch-info { min-width: 0; }
.fetch-info dl > div { display: grid; grid-template-columns: 9ch 1fr; column-gap: 1ch; }
.fetch-info dt { color: var(--mauve); font-weight: 700; }
.fetch-info dd { color: var(--text); min-width: 0; }
.fetch-head { font-size: inherit; font-weight: 700; }
.fetch-head .u, .fetch-head .h { color: var(--mauve); }
.fetch-head .at { color: var(--text); }
.fetch-rule { color: var(--overlay0); line-height: 1.2; overflow: hidden; white-space: nowrap; }
.fetch-colors { display: flex; margin-top: 12px; }
.fetch-colors i { display: block; width: 30px; height: 18px; background: var(--c); }

/* ── rofi ─────────────────────────────────────────────── */

.rofi { display: flex; flex-direction: column; gap: 10px; }
.rofi-input {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 12px;
  color: var(--text);
  background: var(--mantle);
  border: 1px solid var(--surface0);
  border-radius: 8px;
}
.rofi-input .ic { color: var(--mauve); width: 16px; height: 16px; }
.caret { width: 8px; height: 17px; margin-left: -8px; background: var(--rosewater); animation: blink 1.1s steps(1) infinite; }
.rofi-list { display: flex; flex-direction: column; gap: 2px; }
.rofi-list a {
  display: grid; grid-template-columns: 18px auto 1fr; align-items: center; gap: 12px;
  padding: 8px 12px;
  color: var(--text);
  text-decoration: none;
  border-radius: 8px;
}
.rofi-list .ic { color: var(--overlay2); }
.r-name { white-space: nowrap; }
.r-desc { color: var(--dim); font-size: 13.5px; text-align: right; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* first entry is "selected" until you point at another one */
.rofi-list li:first-child a,
.rofi-list a:hover, .rofi-list a:focus-visible { background: var(--sel); color: var(--text); }
.rofi-list li:first-child a .ic,
.rofi-list a:hover .ic, .rofi-list a:focus-visible .ic { color: var(--mauve); }
.rofi-list li:first-child a .r-desc,
.rofi-list a:hover .r-desc, .rofi-list a:focus-visible .r-desc { color: var(--subtext1); }
.rofi-list:hover li:first-child a:not(:hover) { background: none; }
.rofi-list:hover li:first-child a:not(:hover) .r-desc { color: var(--dim); }
.rofi-list:hover li:first-child a:not(:hover) .ic { color: var(--overlay2); }
.rofi-list a[aria-current] .r-name { color: var(--dim); }
.rofi-foot { margin-top: auto; font-size: 12.5px; color: var(--overlay0); text-align: right; }

/* ── nvim ─────────────────────────────────────────────── */

.nvim { display: flex; flex-direction: column; padding: 0; }
.nv-buf { flex: 1; padding: 12px 18px 8px 0; }
.nv-line { display: grid; grid-template-columns: 4.5ch 1fr; column-gap: 1.5ch; }
.nv-line + .nv-line { margin-top: 10px; }
.ln { text-align: right; color: var(--surface2); user-select: none; }
.nv-line:first-child { background: color-mix(in srgb, var(--sel) 45%, transparent); }
.nv-line:first-child .ln { color: var(--lavender); }
.nv-line p { color: var(--text); }
.nv-line .md-h { color: var(--mauve); font-weight: 700; }
.nv-line .md-h2 { color: var(--peach); }
.md-list li { padding-left: 2ch; text-indent: -2ch; }
.md-list li::before { content: "- "; color: var(--teal); }
.nv-tilde { margin-top: 10px; padding-left: 2ch; color: var(--surface1); line-height: 1.5; user-select: none; }
.nv-status {
  display: flex; align-items: stretch;
  font-size: 12.5px;
  line-height: 24px;
  background: var(--mantle);
  border-radius: 0 0 var(--radius) var(--radius);
  overflow: hidden;
}
.nv-status > span { padding: 0 12px; white-space: nowrap; }
.nv-mode { background: var(--mauve); color: var(--on-accent); font-weight: 700; }
.nv-file { background: var(--surface0); color: var(--text); }
.nv-fill { flex: 1; }
.nv-ft { color: var(--overlay1); }
.nv-pos { background: var(--mauve); color: var(--on-accent); font-weight: 700; }

/* ── now + cava ───────────────────────────────────────── */

.now { display: flex; flex-direction: column; }
.now-list > div { display: grid; grid-template-columns: 10ch 1fr; column-gap: 1ch; padding: 3px 0; }
.now-list dt { color: var(--teal); }
.np { margin-top: 18px; padding-top: 14px; border-top: 1px dashed var(--surface1); }
.np-label { color: var(--pink); font-size: 13px; }
.np-track { color: var(--text); font-weight: 700; margin-top: 2px; }
.np-artist { color: var(--subtext0); font-size: 14px; }
.np-bar { display: flex; align-items: center; gap: 10px; margin-top: 8px; font-size: 12.5px; color: var(--dim); }
.np-track-line { flex: 1; height: 3px; background: var(--surface1); border-radius: 2px; position: relative; }
.np-track-line i { position: absolute; inset: 0 62% 0 0; background: var(--mauve); border-radius: 2px; }
.np-track-line i::after { content: ""; position: absolute; right: -5px; top: -4px; width: 11px; height: 11px; border-radius: 50%; background: var(--text); }
.cava {
  display: flex; align-items: flex-end; gap: 3px;
  flex: 1;
  min-height: 56px; max-height: 130px;
  margin-top: 18px;
}
.cava i {
  flex: 1;
  height: 100%;
  background: linear-gradient(to top, var(--blue), var(--mauve) 55%, var(--pink));
  border-radius: 2px 2px 0 0;
  transform-origin: bottom;
  transform: scaleY(.2);
  animation: cava 1.3s ease-in-out infinite alternate;
  opacity: .85;
}
.cava i:nth-child(3n)   { animation-duration: .9s; }
.cava i:nth-child(3n+1) { animation-duration: 1.7s; }
.cava i:nth-child(4n)   { animation-delay: -.6s; }
.cava i:nth-child(5n)   { animation-delay: -1.1s; animation-duration: 1.1s; }
.cava i:nth-child(7n)   { animation-delay: -.3s; animation-duration: 2.1s; }
.cava i:nth-child(2n)   { animation-name: cava2; }
@keyframes cava  { 0% { transform: scaleY(.12); } 40% { transform: scaleY(.7); } 100% { transform: scaleY(.3); } }
@keyframes cava2 { 0% { transform: scaleY(.5); } 55% { transform: scaleY(.15); } 100% { transform: scaleY(.9); } }

/* ── ls -l ────────────────────────────────────────────── */

.ls-total { color: var(--dim); margin-bottom: 4px; }
.ls a {
  display: grid;
  grid-template-columns: 10ch minmax(0, 21ch) minmax(0, 1fr) auto;
  column-gap: 1.5ch;
  padding: 7px 10px;
  margin: 0 -10px;
  color: var(--text);
  text-decoration: none;
  border-radius: 7px;
}
.ls a:hover, .ls a:focus-visible { background: color-mix(in srgb, var(--sel) 70%, transparent); color: var(--text); }
.ls-perm { color: var(--overlay0); }
/* the date column only shows up once github has answered (see main.js) */
.ls-date { display: none; color: var(--dim); white-space: pre; }
.ls.has-dates a { grid-template-columns: 10ch 8ch minmax(0, 21ch) minmax(0, 1fr) auto; }
.ls.has-dates .ls-date { display: block; }
.ls.has-dates .ls-desc { grid-column: 3 / -1; }
.ls-name { color: var(--blue); font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ls a:hover .ls-name { text-decoration: underline; text-underline-offset: 3px; }
.ls-file .ls-name { color: var(--text); font-weight: 400; }
.ls-lang { color: var(--sky); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ls-tag { color: var(--dim); white-space: nowrap; }
.ls-tag.star { color: var(--yellow); }
.ls-desc { grid-column: 2 / -1; color: var(--subtext0); font-size: 14.5px; margin-top: 1px; }

/* ── tree ─────────────────────────────────────────────── */

.tree-root { color: var(--blue); font-weight: 700; }
.tree li { position: relative; padding: 0 0 14px 30px; }
.tree li::before { content: ""; position: absolute; left: 6px; top: 0; bottom: 0; border-left: 1px solid var(--surface2); }
.tree li::after { content: ""; position: absolute; left: 6px; top: .8em; width: 16px; border-top: 1px solid var(--surface2); }
.tree li:last-child { padding-bottom: 4px; }
.tree li:last-child::before { bottom: auto; height: .8em; }
.tree-name { color: var(--text); font-weight: 700; }
.tree-name a { color: var(--text); }
.tree-name a:hover { color: var(--mauve); }
.tree-dir .tree-name { color: var(--blue); }
.tree-meta { color: var(--dim); font-size: 13.5px; }
.tree-desc { color: var(--subtext0); font-size: 14.5px; margin-top: 3px; }
.tree-note { color: var(--peach); font-size: 13.5px; margin-top: 4px; }
.tree-note a { color: var(--peach); }
.tree-sum { color: var(--dim); margin-top: 12px; }
.badge {
  display: inline-block;
  margin-left: 6px;
  padding: 0 7px;
  font-size: 11.5px; font-weight: 400;
  line-height: 18px;
  vertical-align: 1px;
  border-radius: 4px;
}
.badge.wip { color: var(--on-accent); background: var(--yellow); }
.badge.done { color: var(--on-accent); background: var(--green); }
.badge.empty { color: var(--subtext1); background: var(--sel); }

/* ── man ──────────────────────────────────────────────── */

.man { font-size: 15px; }
.man-head { display: flex; justify-content: space-between; gap: 1ch; color: var(--text); margin-bottom: 14px; }
.man-mid { color: var(--dim); }
.man-foot { margin: 18px 0 0; }
.man h3 { font-size: inherit; color: var(--mauve); margin-top: 14px; }
.man h3 + p, .man h3 + dl { margin-left: 5ch; }
.man p { color: var(--text); }
.man b { color: var(--text); }
.man i { color: var(--peach); font-style: normal; text-decoration: underline; text-underline-offset: 3px; }
.man a { color: var(--text); text-decoration-color: var(--overlay1); }
.man a:hover { color: var(--mauve); }
.man-opts dt { margin-top: 4px; }
.nw { white-space: nowrap; }
.man-opts dd { margin-left: 5ch; color: var(--subtext1); }

/* ── friends / 88x31 ──────────────────────────────────── */

.buttons { display: flex; flex-wrap: wrap; align-content: flex-start; align-self: start; gap: 8px; }
.buttons a { text-decoration: none; }
.buttons a, .mybutton { display: block; line-height: 0; }
.buttons img, .mybutton img, .btn-fallback {
  display: block;
  width: 88px; height: 31px;
  image-rendering: pixelated;
  transition: transform .12s;
}
.buttons a:hover img, .buttons a:hover .btn-fallback, .mybutton:hover img { transform: translateY(-2px); }
/* shown when a friend's button image isn't in /buttons/friends yet */
.btn-fallback {
  display: flex; flex-direction: column; justify-content: center;
  padding: 0 6px;
  overflow: hidden;
  font-size: 10.5px; line-height: 1.1;
  text-align: center;
  color: var(--text);
  background: var(--mantle);
  border: 1px solid var(--surface2);
  box-shadow: inset 1px 1px 0 var(--surface1), inset -1px -1px 0 var(--crust);
  white-space: nowrap;
}
.btn-fallback b { color: var(--text); overflow: hidden; text-overflow: ellipsis; }
.btn-fallback small { color: var(--mauve); font-size: 9.5px; }
.buttons a:hover .btn-fallback { border-color: var(--mauve); }

.linkme { margin-top: 22px; padding-top: 14px; border-top: 1px dashed var(--surface1); }
/* no friends' buttons yet: hide the empty wall and just show mine */
#friends:not(:has(.buttons a)) .win-body > .cmd,
#friends:not(:has(.buttons a)) .buttons { display: none; }
#friends:not(:has(.buttons a)) .linkme { margin: 0; padding: 0; border: 0; }
.linkme-row { display: flex; align-items: center; gap: 12px; }
.snippet {
  flex: 1; min-width: 0;
  padding: 7px 10px;
  font: inherit; font-size: 12.5px;
  color: var(--subtext1);
  background: var(--mantle);
  border: 1px solid var(--surface0);
  border-radius: 7px;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.copy {
  font: inherit; font-size: 13px;
  padding: 6px 12px;
  color: var(--on-accent);
  background: var(--mauve);
  border: 0; border-radius: 7px;
  cursor: pointer;
}
.copy:hover { background: var(--lavender); }
.copy.done { background: var(--green); }
.linkme-note { margin-top: 8px; font-size: 13px; color: var(--dim); }
.linkme-note a { color: var(--subtext1); }

/* ── footer ───────────────────────────────────────────── */

.foot {
  max-width: 1200px;
  margin: 26px auto 0;
  padding: 0 16px 42vh;
  text-align: center;
}
.foot-line { color: var(--subtext0); font-style: italic; }
.foot-small { margin-top: 6px; font-size: 13px; color: var(--dim); }
.foot-small a { color: var(--subtext1); }
.cursor { display: inline-block; width: 8px; height: 16px; margin-left: 4px; vertical-align: -2px; background: var(--mauve); animation: blink 1.1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }

/* ── layout ───────────────────────────────────────────── */

@media (min-width: 1040px) {
  .desk {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    grid-template-areas:
      "fetch fetch fetch fetch fetch fetch fetch links links links links links"
      "about about about about about about about now   now   now   now   now"
      "proj  proj  proj  proj  proj  proj  proj  write write write write write"
      "fr    fr    fr    fr    fr    fr    fr    fr    fr    fr    fr    fr"
      "man   man   man   man   man   man   man   man   man   man   man   man";
  }
  #fetch { grid-area: fetch; }
  #links { grid-area: links; }
  #about { grid-area: about; }
  #now { grid-area: now; }
  #projects { grid-area: proj; }
  #writing { grid-area: write; }
  #man { grid-area: man; }
  #friends { grid-area: fr; }
  #friends .win-body { display: grid; grid-template-columns: 1fr minmax(0, 470px); column-gap: 28px; }
  #friends .win-body > .cmd { grid-column: 1 / -1; }
  #friends .linkme { margin: 0; padding: 0 0 0 26px; border: 0; border-left: 1px dashed var(--surface1); }
  #friends .linkme-row { flex-wrap: wrap; }
  #friends .snippet { flex-basis: 100%; order: 3; }
  #friends:not(:has(.buttons a)) .win-body { display: block; }
  #friends:not(:has(.buttons a)) .linkme-row { flex-wrap: nowrap; }
  #friends:not(:has(.buttons a)) .snippet { flex-basis: auto; order: 0; }
  .man-cols { columns: 2; column-gap: 56px; column-rule: 1px dashed var(--surface1); }
  .man-sec { break-inside: avoid; }
  .man-sec:first-child h3 { margin-top: 0; }
}

@media (max-width: 1039px) {
  .desk { max-width: 760px; }
  .bar { max-width: 740px; }
  .bar-title { display: none; }
  .bar-mods { margin-left: auto; }
  .mod-cpu { display: none; }
}

@media (max-width: 720px) {
  body { font-size: 15px; }
  :root { --gap: 10px; --win-bg: var(--base); --bar-bg: var(--mantle); }
  .bar { width: calc(100% - 16px); margin: 8px auto 0; top: 8px; gap: 6px; padding: 0 4px; }
  .desk { padding: var(--gap) 8px; }
  .win, .bar { -webkit-backdrop-filter: none; backdrop-filter: none; }
  .ws a { padding: 0 8px; }
  .ws a span { display: none; }
  .mod-cpu { display: none; }
  .mod { padding: 0 9px; }
  .mod-flavor #flavor-name { display: none; }
  .bar-logo span { display: none; }
  .win-body { padding: 12px 14px 16px; }
  .fetch { flex-direction: column; gap: 14px; }
  .fetch-logo img { width: 120px; height: 120px; }
  .fetch-colors i { width: 24px; }
  .ls a, .ls.has-dates a { grid-template-columns: minmax(0, 1fr) auto; }
  .ls-perm { display: none; }
  .ls-lang { grid-column: 1; grid-row: 2; }
  .ls-tag { grid-column: 2; grid-row: 1; }
  .ls-date { grid-column: 2; grid-row: 2; text-align: right; }
  .ls-desc, .ls.has-dates .ls-desc { grid-column: 1 / -1; }
  .man h3 + p, .man h3 + dl, .man-opts dd { margin-left: 3ch; }
  .man-mid { display: none; }
  .linkme-row { flex-wrap: wrap; }
  .snippet { flex-basis: 100%; order: 3; }
  .nv-line { grid-template-columns: 3ch 1fr; column-gap: 1ch; }
  .nv-buf { padding-right: 14px; }
}

@media (max-width: 380px) {
  .ws a { padding: 0 6px; }
  .mod-clock { display: none; }
  .nw { white-space: normal; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .cava i { transform: scaleY(.45); }
  .cava i:nth-child(2n) { transform: scaleY(.7); }
  .cava i:nth-child(3n) { transform: scaleY(.3); }
}