/*
  Shared design system for every page on this site.
  Edit tokens/components here and every tool picks up the change —
  no need to touch individual tool pages for a site-wide tweak.
*/

:root{
  color-scheme: light;
  --bg:#F2F0E8;
  --surface:#F9F7F0;
  --surface-alt:#EBE8DC;
  --ink:#1C1B17;
  --ink-soft:#5E5B52;
  --ink-faint:#726D5E;
  --accent:#33503F;
  --accent-ink:#FFFFFF;
  --accent-soft:#E7EDE8;
  --border:#E6E2D8;
  --success:#2B6E76;
  --success-soft:#E4EEEF;
  --danger:#A6432F;
  --danger-soft:#F5E9E5;
  --font-display:'Nunito Sans',system-ui,-apple-system,sans-serif;
  --font-body:'Nunito Sans',system-ui,-apple-system,sans-serif;
  --font-mono:'Nunito Sans',system-ui,-apple-system,sans-serif;
}
/* Dark mode intentionally disabled: the site always shows this warm
   off-white design, regardless of the visitor's device/browser theme
   setting, so the look stays consistent for everyone. */

*{ box-sizing:border-box; }
html,body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--font-body);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

/* Page shell — pages set their own max-width, this handles the rest */
.wrap{
  margin:0 auto;
  padding:64px 24px 120px;
}

/* Header typography, shared by every page */
.eyebrow{
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.16em;
  color:var(--accent);
  text-transform:uppercase;
  margin:0 0 16px;
}
h1{
  font-family:var(--font-display);
  font-weight:700;
  font-size:clamp(34px,6vw,50px);
  line-height:1.12;
  letter-spacing:-0.01em;
  margin:0 0 16px;
  text-wrap:balance;
}

/* Title row: page title + small analog clock to its right.
   Round 8: aligned to the top (not centered) so the clock's own top
   edge lines up with the top edge of the title text.
   Round 8 follow-up: the clock (120px) is noticeably taller than a
   single line of title text (~56px). With a flex layout, the row's
   own box height is always set by its tallest child regardless of
   align-items, so the leftover ~64px used to sit as one big blank
   gap under the title before the next paragraph. Taking the clock out
   of normal flow with position:absolute fixes that — the row's height
   now comes from the title text alone, and the clock is pinned to the
   row's own top-right corner independent of how tall the title is
   (including when a longer tool title wraps to two lines). */
.title-row{
  position:relative;
}
.title-row h1{
  /* Reserve the same width the clock used to take out of the flex
     layout (120px clock + 20px gap), so the title still wraps around
     it instead of running underneath. */
  padding-right:140px;
}
.analog-clock{
  position:absolute;
  top:0;
  right:0;
  width:120px;
  height:120px;
}
/* Round 8: the dial itself now blends into the page — fill is --bg
   (the same color as the page background, not the slightly lighter
   --surface card color) with only a whisper-thin --border outline so
   the circle is still discoverable up close without reading as a
   distinct card/panel sitting on the page. */
.analog-clock .clock-face{
  fill:var(--bg);
  stroke:var(--border);
  stroke-width:0.5;
}
.analog-clock .clock-hand{
  /* Round 7: hands use the same soft, low-contrast ink tone as the rest
     of the site's muted text (--ink-soft) instead of full-strength
     --ink, so the face reads as a quiet part of the page rather than a
     high-contrast graphic element. */
  stroke:var(--ink-soft);
  stroke-linecap:butt;
  /* Pivot every hand around the clock's own center (the SVG viewBox
     center), not each hand's individual bounding box — using
     transform-box:fill-box here was the bug: since each <line> has a
     different bounding box, "center" meant a different point for every
     hand, so they didn't rotate around a shared pivot and the clock
     looked broken/crossed instead of like a normal clock face. */
  transform-box:view-box;
  transform-origin:center;
}
/* Round 8: pushed to hairline weights again — thinner than Round 7 on
   every stroke in the face. */
.analog-clock .minute-hand{ stroke-width:0.5; }
.analog-clock .hour-hand{ stroke-width:0.7; }
/* Round 7: the second hand dropped its red accent color for the same
   muted --ink-faint tone as the hour ticks, so nothing on the face
   stands out in color — only line weight and length differentiate the
   hands now. Rotates as one group each tick.
   Round 8: the dot at the tip was removed per user feedback — the
   second hand is now a plain hairline with nothing at its end. */
.analog-clock .second-hand-group{
  transform-box:view-box;
  transform-origin:center;
}
.analog-clock .second-hand{
  stroke:var(--ink-faint);
  stroke-width:0.35;
  stroke-linecap:butt;
}
.analog-clock .clock-center{ fill:var(--ink-soft); }
/* Round 7: hour indices restored for all 12 hours (briefly pared back to
   just 4 cardinal ticks, but the user asked for the full set of indices
   back) — kept hairline-thin and in the same muted --ink-faint tone as
   the second hand so the extra marks don't add visual weight.
   Round 8: thinned further still. */
.analog-clock .clock-tick{ stroke:var(--ink-faint); stroke-width:0.5; stroke-linecap:butt; }
@media (max-width:640px){
  .analog-clock{ width:72px; height:72px; }
  .title-row h1{ padding-right:92px; }
}
.lede{
  color:var(--ink-soft);
  font-size:16px;
  line-height:1.7;
  max-width:54ch;
  margin:0;
}
.credit-line{
  font-size:12.5px;
  color:var(--ink-faint);
  margin:0 0 20px;
}
.credit-line a{
  color:inherit;
  text-decoration:underline;
  text-underline-offset:2px;
}
.credit-line a:hover{
  color:var(--accent);
}

/* Back-to-hub link used on every tool page */
.back-link{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-size:12.5px;
  font-weight:500;
  color:var(--ink-soft);
  text-decoration:none;
  margin-bottom:28px;
  transition:color .15s;
}
.back-link:hover{ color:var(--accent); }

/* Settings panel, used by tool pages for their controls */
.panel{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:16px;
  padding:28px;
  margin-top:36px;
}
.panel-title{
  font-family:var(--font-mono);
  font-size:11px;
  font-weight:400;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--ink-faint);
  margin:0 0 18px;
}
.field{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:8px;
}
.field label{
  font-size:12px;
  color:var(--ink-soft);
  font-weight:500;
}
/* .field sets display:flex, which otherwise overrides the [hidden]
   attribute's UA default (author styles beat UA styles regardless of
   specificity) — this restores hiding when [hidden] is set via JS. */
.field[hidden]{ display:none; }

/* Segmented button control (mode toggles, preset pickers) */
.segmented{
  display:inline-flex;
  border:1px solid var(--border);
  border-radius:999px;
  overflow:hidden;
  background:var(--surface-alt);
}
.segmented button{
  appearance:none;
  border:none;
  background:transparent;
  color:var(--ink-soft);
  font-family:var(--font-body);
  font-size:13px;
  font-weight:500;
  padding:13px 18px;
  cursor:pointer;
  transition:background .15s,color .15s;
}
.segmented button + button{
  border-left:1px solid var(--border);
}
.segmented button[aria-pressed="true"]{
  background:var(--accent);
  color:var(--accent-ink);
}
.segmented.mono button{
  font-family:var(--font-mono);
  padding:10px 16px;
}

.segmented button:focus-visible,
button:focus-visible,
input:focus-visible,
a:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:2px;
}

/* Buttons */
.btn{
  appearance:none;
  border:none;
  border-radius:999px;
  font-family:var(--font-body);
  font-weight:600;
  font-size:14px;
  padding:13px 24px;
  cursor:pointer;
  transition:opacity .15s,background .15s;
}
.btn-primary{
  background:var(--accent);
  color:var(--accent-ink);
}
.btn-primary:hover{ opacity:.88; }
.btn-primary:disabled{ opacity:.5; cursor:not-allowed; }
.btn-secondary{
  background:var(--surface-alt);
  color:var(--ink-soft);
  border:1px solid var(--border);
}
.btn-secondary:hover{ border-color:var(--accent); color:var(--ink); }
.btn-secondary[aria-pressed="true"]{
  background:var(--accent);
  color:var(--accent-ink);
  border-color:var(--accent);
}

/* Groups a batch tool's "Download all as ZIP" button with its
   "Save each file to a folder…" alternative (the latter is hidden by
   default and only revealed by script when the browser supports
   picking a save folder), so they sit together as one unit inside a
   wider flex row rather than each fighting for space independently. */
.save-actions{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}

/* Drag-and-drop upload zone, used by any upload-based tool */
.dropzone{
  margin-top:24px;
  border:1.5px dashed var(--border);
  border-radius:16px;
  padding:44px 24px;
  text-align:center;
  cursor:pointer;
  background:var(--surface);
  transition:border-color .15s,background .15s;
}
.dropzone.drag{
  border-color:var(--accent);
  background:var(--accent-soft);
}
.dropzone strong{
  display:block;
  font-family:var(--font-display);
  font-weight:700;
  font-size:19px;
  margin-bottom:6px;
}
.dropzone p{
  margin:0;
  color:var(--ink-soft);
  font-size:13px;
}
.dropzone input{
  display:none;
}

.privacy-note{
  display:flex;
  gap:8px;
  align-items:flex-start;
  font-size:12px;
  color:var(--ink-faint);
  margin-top:14px;
}

.drop-hint{
  font-size:12.5px;
  color:var(--danger);
  margin:12px 0 0;
}

.footer-note{
  margin-top:40px;
  font-size:12px;
  color:var(--ink-faint);
}

.quality-note{
  margin-top:32px;
  padding-top:16px;
  border-top:1px solid var(--border);
  font-size:12px;
  line-height:1.6;
  color:var(--ink-faint);
}

/* Base surface for any card-shaped block — combine with a page-local
   class for the card's own internal layout */
.surface-card{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:16px;
}

/* Tool page top navigation: back-link + "All tools" dropdown menu,
   shared by every tool page so visitors can jump straight to another
   tool without using the browser's back button. */
.tools-nav{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  flex-wrap:wrap;
}
.tools-menu{ position:relative; }
.tools-menu-btn{
  appearance:none;
  border:1px solid var(--border);
  background:var(--surface);
  color:var(--ink-soft);
  font-family:var(--font-body);
  font-size:13px;
  font-weight:600;
  padding:8px 14px;
  border-radius:999px;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  gap:6px;
  transition:border-color .15s,color .15s;
}
.tools-menu-btn:hover{ border-color:var(--accent); color:var(--ink); }
.tools-menu-btn .chev{ font-size:10px; transition:transform .15s; }
.tools-menu-btn[aria-expanded="true"] .chev{ transform:rotate(180deg); }
.tools-menu-panel{
  position:absolute;
  top:calc(100% + 8px);
  right:0;
  z-index:40;
  display:grid;
  grid-template-columns:repeat(2, minmax(160px,1fr));
  gap:18px 28px;
  width:min(560px, 86vw);
  padding:22px 24px;
  box-shadow:0 12px 32px rgba(30,26,16,.14);
}
.tools-menu-panel[hidden]{ display:none; }
.tools-menu-col{ display:flex; flex-direction:column; gap:6px; }
.tools-menu-cat{
  font-family:var(--font-mono);
  font-size:13px;
  font-weight:700;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--ink);
  margin:0 0 6px;
}
.tools-menu-col a{
  display:flex;
  align-items:center;
  gap:8px;
  font-size:13.5px;
  color:var(--ink-soft);
  text-decoration:none;
  padding:3px 0;
  border-radius:6px;
}
.tools-menu-col a:hover{ color:var(--accent); }
.tools-menu-col a.current{ pointer-events:none; }
.menu-icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:16px;
  font-size:14px;
  line-height:1;
  flex-shrink:0;
}
@media (max-width:560px){
  .tools-menu-panel{ grid-template-columns:1fr; width:min(300px,88vw); }
}

/* "More in <category>" band at the bottom of every tool page — lets
   people move on to a related tool without scrolling back to the top
   or leaving the page via the back button. */
.related-tools{
  margin-top:48px;
  padding-top:24px;
  border-top:1px solid var(--border);
}
.related-tools-label{
  font-family:var(--font-mono);
  font-size:11px;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--ink-faint);
  margin:0 0 12px;
}
.related-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(188px,1fr));
  gap:12px;
}
.related-card{
  display:flex;
  align-items:center;
  gap:12px;
  padding:14px 16px;
  max-width:340px;
  text-decoration:none;
  color:inherit;
  transition:border-color .2s,transform .2s;
}
.related-card:hover{ border-color:var(--accent); transform:translateY(-2px); }
.related-icon{
  width:30px;
  height:30px;
  border-radius:9px;
  background:var(--accent-soft);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:15px;
  flex-shrink:0;
}
.related-name{ font-size:13.5px; font-weight:600; }