/* JuriShrink Web — tool page + landing pages. Suite navy/gold, self-hosted fonts. */

/* Fonts are self-hosted (no Google Fonts request — a CWV and privacy win). Drop
   the woff2 files into static/fonts/ (see scripts/download_fonts.py); until then
   the stacks fall back to system serif/sans, so the page never blocks on a font. */
@font-face{font-family:'Marcellus';src:url('../fonts/marcellus.woff2') format('woff2');
  font-weight:400;font-display:swap;}
@font-face{font-family:'Poppins';src:url('../fonts/poppins-300.woff2') format('woff2');
  font-weight:300;font-display:swap;}
@font-face{font-family:'Poppins';src:url('../fonts/poppins-400.woff2') format('woff2');
  font-weight:400;font-display:swap;}
@font-face{font-family:'Poppins';src:url('../fonts/poppins-600.woff2') format('woff2');
  font-weight:600;font-display:swap;}

:root{
  --bg:#050c18; --panel:#0b1624; --panel-2:#0f1e33; --ink:#ede8da; --ink-2:#bfb49a;
  --muted:#66768f; --line:rgba(255,255,255,.07); --gold:#eec67f; --gold-h:#d4a85e;
  --gold-border:rgba(238,198,127,.25); --gold-light:rgba(238,198,127,.08);
  --ok:#86efac; --ok-bg:rgba(134,239,172,.08); --ok-border:rgba(134,239,172,.2);
  --warn:#fde68a; --warn-bg:rgba(253,230,138,.08); --warn-border:rgba(253,230,138,.22);
  --bad:#fca5a5; --bad-bg:rgba(252,165,165,.08); --bad-border:rgba(252,165,165,.22);
  --radius:12px; --radius-sm:8px;
  --font-display:'Marcellus',Georgia,serif; --font-body:'Poppins',system-ui,sans-serif;
}
*,*::before,*::after{box-sizing:border-box;}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--font-body);
  font-size:15px;line-height:1.65;-webkit-font-smoothing:antialiased;}
a{color:var(--gold);text-decoration:none;} a:hover{text-decoration:underline;}
h1,h2,h3{font-family:var(--font-display);font-weight:400;line-height:1.2;}

/* Header */
.site-header{display:flex;align-items:center;justify-content:space-between;
  padding:16px 28px;border-bottom:1px solid var(--line);position:sticky;top:0;
  background:rgba(5,12,24,.85);backdrop-filter:blur(8px);z-index:40;}
.brand{display:flex;align-items:center;gap:11px;font-family:var(--font-display);
  font-size:22px;color:var(--gold);line-height:1;}
.brand:hover{text-decoration:none;}
.brand-mark{width:36px;height:36px;color:var(--gold);flex-shrink:0;}
.brand-text span{display:block;color:var(--ink-2);font-size:9.5px;font-family:var(--font-body);
  letter-spacing:.18em;text-transform:uppercase;margin-top:4px;}
.site-header nav a{color:var(--ink-2);font-size:13px;margin-left:20px;}

/* Layout */
main{max-width:900px;margin:0 auto;padding:48px 24px 24px;}
.hero{position:relative;text-align:center;margin-bottom:36px;}
.hero-glow{position:absolute;left:50%;top:-90px;width:560px;height:300px;margin-left:-280px;
  background:radial-gradient(ellipse closest-side,rgba(238,198,127,.13),transparent 70%);
  pointer-events:none;}
.hero h1{position:relative;font-size:41px;margin:0 0 14px;}
.hero p.sub{color:var(--ink-2);font-size:17px;max-width:620px;margin:0 auto;}
.chips{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-top:20px;}
.chip{font-size:12px;color:var(--gold);border:1px solid var(--gold-border);
  background:var(--gold-light);border-radius:999px;padding:5px 13px;}
a.chip{text-decoration:none;transition:border-color .15s,background .15s;}
a.chip:hover{border-color:var(--gold);background:rgba(238,198,127,.14);text-decoration:none;}

/* Compact portal preset links under the dropzone */
.portal-presets{display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  margin-top:18px;padding-top:16px;border-top:1px solid var(--line);}
.pp-label{font-size:12.5px;color:var(--muted);margin-right:2px;}

.portal-intro{background:var(--panel);border:1px solid var(--gold-border);
  border-radius:var(--radius);padding:22px 26px;margin-bottom:28px;}
.portal-intro h1{font-size:26px;margin:0 0 8px;}
.portal-intro .portal-cap{color:var(--gold);font-weight:600;margin:10px 0 0;}
.portal-intro p{color:var(--ink-2);margin:0;}

/* Tool card */
.tool{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
  padding:28px;box-shadow:0 8px 30px rgba(0,0,0,.4);}
.dropzone{border:2px dashed var(--gold-border);border-radius:var(--radius);
  padding:48px 24px;text-align:center;cursor:pointer;transition:all .18s;}
.dropzone:hover,.dropzone.drag,.dropzone:focus-visible{border-color:var(--gold);
  background:var(--gold-light);transform:translateY(-2px);
  box-shadow:0 10px 28px rgba(0,0,0,.35);}
.dropzone .dz-icon{width:54px;height:54px;color:var(--gold);margin-bottom:10px;
  transition:transform .18s;}
.dropzone:hover .dz-icon,.dropzone.drag .dz-icon{transform:translateY(-3px);}
.dropzone h3{margin:0 0 6px;font-size:20px;color:var(--ink);}
.dropzone p{margin:0;color:var(--muted);font-size:13px;}
.dropzone .browse{color:var(--gold);text-decoration:underline;}
.dropzone .dz-file{margin-top:10px;color:var(--gold);font-size:13px;font-weight:600;}

/* Options sit ABOVE the dropzone so the caps are set before a drop starts the run. */
.options{display:flex;gap:26px;flex-wrap:wrap;margin-bottom:22px;padding-bottom:20px;
  border-bottom:1px solid var(--line);}
.opt{display:flex;flex-direction:column;gap:6px;}
.opt label{font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:.06em;}
.opt input[type=number]{background:var(--panel-2);border:1px solid var(--line);
  color:var(--ink);border-radius:var(--radius-sm);padding:8px 10px;width:120px;font:inherit;}
.opt input[type=number]:focus{border-color:var(--gold-border);outline:none;}
.opt-inline{display:flex;align-items:center;gap:8px;}
.opt-inline input[type=checkbox]{accent-color:var(--gold);width:16px;height:16px;}

/* Job modal (progress + result live here) */
.modal-backdrop{position:fixed;inset:0;background:rgba(3,8,16,.74);backdrop-filter:blur(3px);
  display:flex;align-items:center;justify-content:center;z-index:80;padding:20px;}
.modal-backdrop[hidden]{display:none;}
.modal-card{position:relative;background:var(--panel);border:1px solid var(--gold-border);
  border-radius:var(--radius);padding:30px 28px;max-width:540px;width:100%;max-height:88vh;
  overflow:auto;box-shadow:0 24px 70px rgba(0,0,0,.65);animation:modalIn .2s ease;}
@keyframes modalIn{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:none;}}
.modal-close{position:absolute;top:10px;right:14px;background:none;border:none;color:var(--muted);
  font-size:26px;line-height:1;cursor:pointer;padding:2px 6px;}
.modal-close:hover{color:var(--ink);}

/* Progress */
.progress{display:block;}
.progress[hidden]{display:none;}
.bar-track{height:10px;background:var(--panel-2);border-radius:999px;overflow:hidden;}
.bar-fill{height:100%;width:0;background:linear-gradient(90deg,var(--gold-h),var(--gold));
  border-radius:999px;transition:width .3s ease;}
.bar-meta{display:flex;justify-content:space-between;margin-top:10px;font-size:13px;}
.bar-meta .pct{color:var(--gold);font-weight:600;}
.bar-meta .eta{color:var(--muted);}
.stage{color:var(--ink-2);font-size:14px;margin-top:8px;min-height:20px;}
.queued-note{color:var(--warn);font-size:13px;margin-top:6px;}

/* ── The gavel ─────────────────────────────────────────────────────────────
   Order in the court: each numbered page card takes the stand, the gavel
   comes down, and the flattened gold slip joins the record pile.
   --p (0 → 1, real engine fraction) is read by the byte ticker in app.js. */
.gavel-scene{position:relative;height:200px;max-width:360px;margin:10px auto 8px;--p:0;}
.gs-floor{position:absolute;left:24px;right:24px;bottom:26px;
  border-bottom:2px solid var(--line);}
.page-card{position:absolute;left:50%;bottom:28px;width:46px;height:58px;margin-left:-23px;
  background:var(--panel-2);border:1.5px solid var(--gold-border);border-radius:4px;
  display:flex;align-items:center;justify-content:center;transform-origin:50% 100%;
  opacity:0;transition:height .18s ease,background-color .18s ease,border-color .18s ease;}
.page-card span{font-family:var(--font-display);font-size:16px;color:var(--gold);
  transition:color .18s ease;}
/* The struck page: pressed to a short gold slip that keeps its number in dark ink. */
.page-card.stamped{height:30px;background:var(--gold);border-color:var(--gold);
  box-shadow:0 2px 6px rgba(0,0,0,.35);}
.page-card.stamped span{color:#1a1205;font-size:14px;}
/* The record pile: a stack of numbered gold slips, in its own lane on the left
   so it never collides with the gavel arm and knob (which live on the right). */
.flat-stack{position:absolute;left:30px;bottom:28px;display:flex;flex-direction:column-reverse;
  align-items:center;gap:3px;}
.flat-stack .slip{width:42px;height:15px;background:var(--gold);border-radius:2px;
  display:flex;align-items:center;justify-content:center;box-shadow:0 1px 2px rgba(0,0,0,.3);}
.flat-stack .slip:not(:last-child){opacity:.82;}
.flat-stack .slip span{font-family:var(--font-display);font-size:10px;line-height:1;color:#1a1205;}
.gs-flash{position:absolute;left:50%;bottom:70px;width:70px;height:70px;margin-left:-35px;
  border-radius:50%;pointer-events:none;opacity:0;
  background:radial-gradient(circle,rgba(238,198,127,.9),rgba(238,198,127,0) 65%);}
/* The gavel pivots at the knob (bottom-right of the group); the base pose is
   raised, and app.js swings it down onto the card with the Web Animations API. */
.gavel{position:absolute;left:50%;bottom:78px;width:150px;height:120px;margin-left:-32px;
  transform-origin:132px 86px;transform:rotate(34deg);
  filter:drop-shadow(0 6px 12px rgba(0,0,0,.45));}
.g-handle{position:absolute;left:26px;top:80px;width:110px;height:9px;border-radius:5px;
  background:linear-gradient(90deg,var(--gold),var(--gold-h));}
.g-head{position:absolute;left:8px;top:56px;width:34px;height:56px;border-radius:8px;
  background:linear-gradient(180deg,#f6dda4,var(--gold) 45%,var(--gold-h));}
.g-head::before,.g-head::after{content:'';position:absolute;left:0;right:0;height:9px;
  background:#8a6b3a;border-radius:8px 8px 3px 3px;}
.g-head::before{top:0;} .g-head::after{bottom:0;border-radius:3px 3px 8px 8px;}
.g-knob{position:absolute;left:132px;top:76px;width:16px;height:16px;border-radius:50%;
  background:var(--gold-h);}
.byte-ticker{text-align:center;color:var(--gold);font-size:14px;font-weight:600;
  min-height:20px;letter-spacing:.02em;}

/* Results */
.results{margin-top:24px;display:none;}
.results.show{display:block;}
.file-row{background:var(--panel-2);border:1px solid var(--line);border-radius:var(--radius);
  padding:18px 20px;margin-bottom:14px;}
.file-row .fr-outcome{font-size:15px;color:var(--ink);margin-bottom:4px;}
.file-row .fr-sub{font-size:13px;color:var(--muted);margin-bottom:14px;}
.file-row.skipped{border-color:var(--warn-border);background:var(--warn-bg);}
.file-row.failed{border-color:var(--bad-border);background:var(--bad-bg);}
.parts{display:flex;flex-direction:column;gap:8px;}
.part{display:flex;align-items:center;justify-content:space-between;
  background:var(--panel);border:1px solid var(--line);border-radius:var(--radius-sm);
  padding:10px 14px;font-size:13px;}
.part .p-size{color:var(--muted);}
.btn{display:inline-block;background:var(--gold);color:#1a1205;font-weight:600;
  border:none;border-radius:var(--radius-sm);padding:9px 16px;cursor:pointer;font:inherit;
  font-weight:600;text-decoration:none;}
.btn:hover{background:var(--gold-h);text-decoration:none;}
.btn.ghost{background:transparent;color:var(--gold);border:1px solid var(--gold-border);}
.btn-zip{margin-top:12px;}
.deleted-note{color:var(--muted);font-size:12px;margin-top:14px;text-align:center;}
.payoff{text-align:center;font-size:16px;color:var(--ok);margin:10px 0 2px;font-weight:600;}
.payoff .fun{display:block;color:var(--ink-2);font-weight:400;font-size:13px;margin-top:2px;}

/* Prominent "work offline" Windows-app callout */
.offline-cta{display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;
  margin-top:28px;padding:22px 26px;border:1px solid var(--gold-border);border-radius:var(--radius);
  background:linear-gradient(120deg,var(--gold-light),rgba(238,198,127,.02));}
.offline-cta .oc-text h3{font-size:19px;margin:0 0 4px;}
.offline-cta .oc-text p{margin:0;color:var(--ink-2);font-size:14px;max-width:520px;}
.offline-cta .oc-btn{white-space:nowrap;flex-shrink:0;}

/* Content sections (SEO) */
.section{margin-top:56px;}
.section h2{font-size:26px;margin:0 0 18px;}

/* Portal upload limits table */
.limits-intro{color:var(--ink-2);margin:0 0 18px;max-width:70ch;}
.limits-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--radius);}
.limits-table{width:100%;border-collapse:collapse;font-size:14px;min-width:560px;}
.limits-table th,.limits-table td{text-align:left;padding:13px 16px;
  border-bottom:1px solid var(--line);vertical-align:top;}
.limits-table thead th{color:var(--muted);font-size:11.5px;font-weight:600;
  text-transform:uppercase;letter-spacing:.05em;background:var(--panel);}
.limits-table tbody tr:last-child td{border-bottom:none;}
.limits-table tbody tr:hover{background:var(--gold-light);}
.limits-table td:first-child{color:var(--ink);font-weight:600;white-space:nowrap;}
.limits-table td:nth-child(2){color:var(--gold);font-weight:600;white-space:nowrap;}
.limits-table td:nth-child(3){color:var(--ink-2);}
.ll-cell{white-space:nowrap;}
.ll-link{color:var(--gold);font-weight:600;}

/* On narrow screens the table becomes stacked cards (label from data-label) */
@media (max-width:640px){
  .limits-wrap{border:none;}
  .limits-table{min-width:0;}
  .limits-table thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);}
  .limits-table tbody tr{display:block;background:var(--panel);border:1px solid var(--line);
    border-radius:var(--radius);padding:8px 4px;margin-bottom:12px;}
  .limits-table tbody tr:hover{background:var(--panel);}
  .limits-table td{display:block;border-bottom:none;padding:6px 16px;white-space:normal;}
  .limits-table td[data-label]::before{content:attr(data-label);display:block;
    color:var(--muted);font-size:10.5px;text-transform:uppercase;letter-spacing:.05em;margin-bottom:2px;}
  .limits-table td:first-child,.limits-table td:nth-child(2){white-space:normal;}
}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;}
.step{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:20px;
  transition:border-color .18s,transform .18s;}
.step:hover{border-color:var(--gold-border);transform:translateY(-2px);}
.step .num{color:var(--gold);font-family:var(--font-display);font-size:24px;}
.step h3{font-size:17px;margin:8px 0 6px;}
.step p{color:var(--ink-2);font-size:14px;margin:0;}
.faq details,.portal-notes details{border:1px solid var(--line);border-radius:var(--radius-sm);
  padding:14px 18px;margin-bottom:10px;background:var(--panel);transition:border-color .18s;}
.faq details:hover,.faq details[open],
.portal-notes details:hover,.portal-notes details[open]{border-color:var(--gold-border);}
.faq summary,.portal-notes summary{cursor:pointer;font-weight:600;color:var(--ink);}
.faq details p,.portal-notes details p{color:var(--ink-2);margin:10px 0 0;}
/* Offset scroll targets so the sticky header does not cover the opened note / tool. */
.portal-notes details{scroll-margin-top:80px;}
.portal-notes{margin-top:22px;}
.note-cta{font-weight:600;}
#compress{scroll-margin-top:70px;}
html{scroll-behavior:smooth;}

.site-footer{text-align:center;color:var(--muted);font-size:13px;padding:40px 24px;
  border-top:1px solid var(--line);margin-top:56px;}
.site-footer a{color:var(--gold);}

@media (max-width:680px){
  .hero h1{font-size:30px;} main{padding:32px 18px;}
  .steps{grid-template-columns:1fr;} .tool{padding:20px;}
  .site-header nav{display:none;}
}

/* Keyboard focus */
a:focus-visible,button:focus-visible,input:focus-visible,summary:focus-visible,
.dropzone:focus-visible{outline:2px solid var(--gold);outline-offset:2px;}

/* Honesty + accessibility: no motion when the user asks for none. The gavel sits
   raised, the page card shows its real number, and the bar tells the story
   (app.js also skips the strike sequence under prefers-reduced-motion). */
@media (prefers-reduced-motion:reduce){
  .bar-fill{transition:none;}
  .confetti{display:none !important;}
  .modal-card{animation:none;}
  .page-card{opacity:1;}
  .dropzone,.step,.dz-icon{transition:none;}
}

/* Completion confetti (JS spawns .confetti-bit children) */
.confetti{position:fixed;inset:0;pointer-events:none;overflow:hidden;z-index:60;}
.confetti-bit{position:absolute;width:8px;height:8px;opacity:.9;
  animation:fall 1s ease-in forwards;}
@keyframes fall{to{transform:translateY(90vh) rotate(360deg);opacity:0;}}