/* Self-hosted Geist (SIL OFL 1.1; see /assets/fonts/LICENSE.txt). Served by
 * each app's ASSETS binding from web/dist/assets/fonts/ — no third-party CDN. */
@font-face {
  font-family: 'Geist';
  src: url('/assets/fonts/Geist-Variable.woff2') format('woff2-variations'),
       url('/assets/fonts/Geist-Variable.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Geist Mono';
  src: url('/assets/fonts/GeistMono-Variable.woff2') format('woff2-variations'),
       url('/assets/fonts/GeistMono-Variable.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Surfaces — warm paper, carried from pastebin */
  --pb-bg:      #fbfbfa;
  --pb-surface: #ffffff;
  --pb-panel:   #f6f6f4;
  --pb-panel-2: #f1f1ee;
  --pb-hair:    #ececea;
  --pb-hair-2:  #e3e3e0;
  --pb-hair-3:  #d4d4d0;

  /* Ink */
  --pb-ink:   #0f0f10;
  --pb-body:  #262626;
  --pb-dim:   #5d5d5d;
  --pb-mute:  #6f6f6f;
  --pb-faint: #c0c0bd;

  /* Accent ramp — overridden per brand */
  --pb-accent:      #c2531a;
  --pb-accent-soft: #fbe9d6;
  --pb-accent-ink:  #7a3009;
  --pb-accent-dark: #a4400f;
  --pb-accent-fg:   #ffffff; /* on-accent text; flips near-black in dark mode */

  --pb-green:      #147a3c;
  --pb-green-soft: #e2f1e3;
  --pb-red:        #b91d3a;
  --pb-red-soft:   #fdecef;

  --pb-font-sans: 'Geist', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --pb-font-mono: 'Geist Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  --pb-radius-sm: 4px;
  --pb-radius:    8px;
  --pb-radius-lg: 14px;

  --pb-s1: 4px; --pb-s2: 8px; --pb-s3: 12px; --pb-s4: 16px;
  --pb-s5: 24px; --pb-s6: 32px; --pb-s7: 48px; --pb-s8: 72px;

  --pb-shadow:    0 1px 2px rgba(15,15,16,.04), 0 4px 16px rgba(15,15,16,.06);
  --pb-shadow-lg: 0 8px 40px rgba(15,15,16,.12);

  /* Dotted-paper texture — the family "scratchpad" signature */
  --pb-texture-dot:  #e3e3e0;
  --pb-texture-size: 24px;
  --pb-texture: radial-gradient(circle at 1px 1px, var(--pb-texture-dot) .8px, transparent 1.2px);
  color-scheme: light;
}

/* Dark: explicit toggle wins; else follow the OS. Brand accent flips via brandVars(). */
:root[data-theme="dark"] { 
  --pb-bg:#131316; --pb-surface:#1c1c20; --pb-panel:#18181c; --pb-panel-2:#232328;
  --pb-hair:#2a2a30; --pb-hair-2:#3a3a40; --pb-hair-3:#4c4c54;
  --pb-ink:#f5f4f0; --pb-body:#d6d4cf; --pb-dim:#c1bfba; --pb-mute:#a8a6a1; --pb-faint:#4b4a47;
  --pb-green:#65d089; --pb-green-soft:#163022; --pb-red:#f08b9a; --pb-red-soft:#2c1820;
  --pb-texture-dot:#26262b;
  --pb-accent-fg:#11111a;
  --pb-shadow: 0 1px 2px rgba(0,0,0,.3), 0 4px 16px rgba(0,0,0,.4);
  --pb-shadow-lg: 0 14px 34px rgba(0,0,0,.5);
  color-scheme: dark;
 }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]):not([data-theme="dark"]) { 
  --pb-bg:#131316; --pb-surface:#1c1c20; --pb-panel:#18181c; --pb-panel-2:#232328;
  --pb-hair:#2a2a30; --pb-hair-2:#3a3a40; --pb-hair-3:#4c4c54;
  --pb-ink:#f5f4f0; --pb-body:#d6d4cf; --pb-dim:#c1bfba; --pb-mute:#a8a6a1; --pb-faint:#4b4a47;
  --pb-green:#65d089; --pb-green-soft:#163022; --pb-red:#f08b9a; --pb-red-soft:#2c1820;
  --pb-texture-dot:#26262b;
  --pb-accent-fg:#11111a;
  --pb-shadow: 0 1px 2px rgba(0,0,0,.3), 0 4px 16px rgba(0,0,0,.4);
  --pb-shadow-lg: 0 14px 34px rgba(0,0,0,.5);
  color-scheme: dark;
 }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font: 400 15px/1.6 var(--pb-font-sans);
  color: var(--pb-body);
  background-color: var(--pb-bg);
  background-image: var(--pb-texture);
  background-size: var(--pb-texture-size) var(--pb-texture-size);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
a { color: var(--pb-accent-dark); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3 { color: var(--pb-ink); letter-spacing: -.02em; margin: 0; }
code, kbd, samp { font-family: var(--pb-font-mono); font-size: .92em; }

.wrap { max-width: 980px; margin: 0 auto; padding: 0 var(--pb-s5); }

/* ---- Header ---- */
.site-head {
  border-bottom: 1px solid var(--pb-hair);
  background: color-mix(in srgb, var(--pb-bg) 86%, transparent);
  backdrop-filter: saturate(1.2) blur(8px);
  position: sticky; top: 0; z-index: 20;
}
.site-head__row { display: flex; align-items: center; gap: var(--pb-s4); height: 58px; }
.wordmark { display: inline-flex; align-items: baseline; gap: 2px; font-weight: 650; font-size: 18px; color: var(--pb-ink); letter-spacing: -.03em; }
.wordmark:hover { text-decoration: none; }
.wordmark .dot { color: var(--pb-accent); }
.wordmark .tld { color: var(--pb-mute); font-weight: 500; }
.site-head nav { margin-left: auto; display: flex; align-items: center; gap: var(--pb-s4); }
.site-head nav a { color: var(--pb-dim); font-weight: 500; font-size: 13.5px; }
.site-head nav a:hover { color: var(--pb-ink); text-decoration: none; }
.theme-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; padding: 0; border-radius: var(--pb-radius-sm);
  border: 1px solid var(--pb-hair-2); background: var(--pb-surface); color: var(--pb-dim);
  font-size: 15px; line-height: 1; cursor: pointer;
}
.theme-toggle:hover { color: var(--pb-ink); border-color: var(--pb-accent); }

/* ---- Buttons ---- */
.btn {
  display: inline-flex; align-items: center; gap: var(--pb-s2);
  font: 550 14px/1 var(--pb-font-sans);
  padding: 10px 16px; border-radius: var(--pb-radius);
  border: 1px solid var(--pb-accent-dark); background: var(--pb-accent); color: var(--pb-accent-fg);
  cursor: pointer; transition: transform .08s ease, filter .12s ease, box-shadow .12s ease;
  box-shadow: var(--pb-shadow);
}
.btn:hover { filter: brightness(1.06); text-decoration: none; }
.btn:active { transform: translateY(1px); }
.btn--ghost { background: var(--pb-surface); color: var(--pb-ink); border-color: var(--pb-hair-3); box-shadow: none; }
.btn--ghost:hover { border-color: var(--pb-accent); color: var(--pb-accent-dark); }
.btn[disabled] { opacity: .55; cursor: default; }

/* ---- Hero ---- */
.hero { padding: var(--pb-s8) 0 var(--pb-s6); }
.eyebrow {
  display: inline-block; font: 600 11.5px/1 var(--pb-font-mono);
  letter-spacing: .12em; text-transform: uppercase; color: var(--pb-accent-dark);
  background: var(--pb-accent-soft); padding: 6px 10px; border-radius: 100px; margin-bottom: var(--pb-s4);
}
.hero h1 { font-size: clamp(32px, 5vw, 46px); line-height: 1.04; font-weight: 680; }
.hero p { font-size: 17px; color: var(--pb-dim); max-width: 54ch; margin: var(--pb-s4) 0 0; }
.limits { font-size: 13.5px; color: var(--pb-mute); margin: var(--pb-s4) 0 0; }
.limits__k { font: 600 11px/1 var(--pb-font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--pb-accent-dark); background: var(--pb-accent-soft); padding: 4px 7px; border-radius: 100px; margin-right: 6px; }
.limits strong { color: var(--pb-body); font-weight: 600; }

/* ---- Dropzone ---- */
.dropzone {
  display: block;
  margin-top: var(--pb-s6); border: 2px dashed var(--pb-hair-3); border-radius: var(--pb-radius-lg);
  background: var(--pb-surface);
  padding: var(--pb-s8) var(--pb-s5); text-align: center; cursor: pointer;
  transition: border-color .15s ease, background .15s ease, transform .1s ease;
}
.dropzone:hover { border-color: var(--pb-accent); }
.dropzone.is-drag { border-color: var(--pb-accent); background: var(--pb-accent-soft); transform: scale(1.005); }
.dropzone__big { font: 620 19px/1.2 var(--pb-font-sans); color: var(--pb-ink); }
.dropzone__sub { color: var(--pb-mute); font-size: 13.5px; margin-top: var(--pb-s2); }
.dropzone input[type=file] { display: none; }

.uploads { margin-top: var(--pb-s5); display: grid; gap: var(--pb-s3); }
.upitem {
  display: flex; align-items: center; gap: var(--pb-s4); padding: var(--pb-s3) var(--pb-s4);
  background: var(--pb-surface); border: 1px solid var(--pb-hair); border-radius: var(--pb-radius);
}
.upitem__thumb { width: 44px; height: 44px; border-radius: var(--pb-radius-sm); object-fit: cover; background: var(--pb-panel); flex: none; }
.upitem__meta { min-width: 0; flex: 1; }
.upitem__name { font-weight: 550; color: var(--pb-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.upitem__link { font-family: var(--pb-font-mono); font-size: 12.5px; color: var(--pb-accent-dark); }
.upitem__bar { height: 4px; border-radius: 100px; background: var(--pb-panel-2); overflow: hidden; }
.upitem__bar > i { display: block; height: 100%; width: 0; background: var(--pb-accent); transition: width .2s ease; }

/* ---- Section + gallery ---- */
.section { padding: var(--pb-s7) 0; }
.section h2 { font-size: 15px; font-weight: 600; color: var(--pb-mute); letter-spacing: .02em; margin-bottom: var(--pb-s4); }
.gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--pb-s3); }
.tile { display: block; aspect-ratio: 1; border-radius: var(--pb-radius); overflow: hidden; background: var(--pb-panel); border: 1px solid var(--pb-hair); transition: transform .1s ease, box-shadow .15s ease; }
.tile:hover { transform: translateY(-2px); box-shadow: var(--pb-shadow-lg); }
.tile img { width: 100%; height: 100%; object-fit: cover; display: block; }

.filelist { display: grid; gap: var(--pb-s2); }
.filerow { display: flex; align-items: center; gap: var(--pb-s4); padding: var(--pb-s3) var(--pb-s4); background: var(--pb-surface); border: 1px solid var(--pb-hair); border-radius: var(--pb-radius); }
.filerow .ext { font: 600 11px/1 var(--pb-font-mono); text-transform: uppercase; color: var(--pb-accent-dark); background: var(--pb-accent-soft); padding: 7px 9px; border-radius: var(--pb-radius-sm); flex: none; }
.filerow .grow { flex: 1; min-width: 0; }
.filerow .name { font-weight: 550; color: var(--pb-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.filerow .sub { font-size: 12.5px; color: var(--pb-mute); }
.empty { color: var(--pb-mute); font-size: 14px; padding: var(--pb-s5); text-align: center; border: 1px dashed var(--pb-hair-2); border-radius: var(--pb-radius); }

/* ---- View page ---- */
.viewer { padding: var(--pb-s6) 0; display: grid; gap: var(--pb-s5); grid-template-columns: 1fr; }
@media (min-width: 760px) { .viewer { grid-template-columns: 1fr 280px; align-items: start; } }
.viewer__stage { background: var(--pb-panel-2); border: 1px solid var(--pb-hair); border-radius: var(--pb-radius-lg); padding: var(--pb-s4); text-align: center; }
.viewer__stage img { max-width: 100%; max-height: 70vh; border-radius: var(--pb-radius); box-shadow: var(--pb-shadow); }
.meta { background: var(--pb-surface); border: 1px solid var(--pb-hair); border-radius: var(--pb-radius); padding: var(--pb-s4); }
.meta dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 8px 14px; font-size: 13px; }
.meta dt { color: var(--pb-mute); }
.meta dd { margin: 0; color: var(--pb-body); font-family: var(--pb-font-mono); font-size: 12px; word-break: break-all; }
.copyfield { display: flex; gap: var(--pb-s2); margin-top: var(--pb-s3); }
.copyfield input { flex: 1; min-width: 0; font: 500 12px/1 var(--pb-font-mono); padding: 9px 10px; border: 1px solid var(--pb-hair-3); border-radius: var(--pb-radius-sm); background: var(--pb-panel); color: var(--pb-body); }

/* ---- Footer ---- */
.site-foot { border-top: 1px solid var(--pb-hair); margin-top: var(--pb-s8); padding: var(--pb-s6) 0; color: var(--pb-mute); font-size: 13px; }
.site-foot a { color: var(--pb-dim); }
.site-foot .fam { display: flex; flex-wrap: wrap; gap: var(--pb-s4); margin-top: var(--pb-s3); }
.site-foot .foot-legal { display: flex; flex-wrap: wrap; align-items: center; gap: var(--pb-s2); margin-bottom: var(--pb-s3); }
.site-foot .foot-sep { color: var(--pb-hair); }

.skip-link { position: absolute; left: -999px; }
.skip-link:focus { left: var(--pb-s4); top: var(--pb-s4); background: var(--pb-ink); color: #fff; padding: 8px 12px; border-radius: 6px; z-index: 50; }

/* ---- View metadata (title / description / tags) ---- */
.view-head { padding-top: var(--pb-s5); }
.view-title { font-size: 22px; font-weight: 650; letter-spacing: -.02em; margin: 0; color: var(--pb-ink); word-break: break-word; }
.view-desc { color: var(--pb-dim); font-size: 14px; margin: 0 0 var(--pb-s3); white-space: pre-wrap; word-break: break-word; }
.view-tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 var(--pb-s3); }
.tag { font: 500 11px/1 var(--pb-font-mono); color: var(--pb-accent-dark); background: var(--pb-accent-soft); padding: 5px 8px; border-radius: 100px; }

/* ---- Mobile (≤640px): tighten chrome, hero, gallery, viewer ---- */
@media (max-width: 640px) {
  .wrap { padding: 0 var(--pb-s4); }
  .site-head__row { gap: var(--pb-s3); height: 52px; }
  .site-head nav { gap: var(--pb-s3); }
  .hero h1 { font-size: 26px; }
  .hero p { font-size: 15px; }
  .gallery { grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: var(--pb-s2); }
  .viewer { padding: var(--pb-s4) 0; gap: var(--pb-s4); }
  .viewer__stage { padding: var(--pb-s2); }
  .viewer__stage img { max-height: 60vh; }
  .view-title { font-size: 19px; }
  .filerow { gap: var(--pb-s3); padding: var(--pb-s3); }
  .site-foot { padding: var(--pb-s5) 0; margin-top: var(--pb-s6); }
}