/*
 * Google Sans Flex, self-hosted (variable, wght 400..700), latin + latin-ext subsets.
 * Source CSS: https://fonts.googleapis.com/css2?family=Google+Sans+Flex:wght@400..700&display=swap
 * Files: fonts.gstatic.com/s/googlesansflex/v22/ (fetched 2026-09-30)
 *
 * License: Google Fonts, SIL Open Font License, Version 1.1.
 * Verified 2026-09-30: fonts.google.com metadata for the family reports "license": "ofl";
 * github.com/google/fonts ofl/googlesansflex/METADATA.pb says license: "OFL" and OFL.txt says
 * "This Font Software is licensed under the SIL Open Font License, Version 1.1."
 * Copyright The Google Sans Flex Project Authors (https://github.com/googlefonts/googlesans-flex)
 *
 * Paths: the files live in public/fonts/. "/fonts/..." here is a public-folder path, and Vite adds
 * the site base in dev and build, so it is served and shipped as /tools/watermark/fonts/... (vite.config.js).
 */

/* latin-ext */
@font-face {
  font-family: 'Google Sans Flex';
  font-style: normal;
  font-weight: 400 700;
  font-stretch: 100%;
  font-display: swap;
  src: url('/tools/fonts/google-sans-flex-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
  font-family: 'Google Sans Flex';
  font-style: normal;
  font-weight: 400 700;
  font-stretch: 100%;
  font-display: swap;
  src: url('/tools/fonts/google-sans-flex-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* UptoSolve tools: the shared look.
   Every tool and the /tools/ hub start from this file, so they all feel like one site.
   Paper white, warm ink, 1px lines, one yellow kept for the main action and selection.

   How it is shared: each tool keeps its OWN copy (new-tool.mjs copies it in). Nothing is
   loaded from another tool at runtime, so one tool's deploy can never break another's.
   If you change a token here, copy the change into the tools that should get it. */

:root {
  --page: #ffffff;
  --band: #f7f7f5;          /* footer, quiet panels */
  --field: #f4f3ef;         /* inputs, hover fill */
  --ink: #23231e;           /* text: 15.8:1 on white */
  --soft: #52524b;          /* secondary text: 7.9:1 on white, 7.3:1 on --band */
  --line: #e2e1db;          /* borders */
  --hair: #ebeae4;          /* faint dividers */
  --edge: #8c8b82;          /* outlines of ghost buttons and inputs (3.4:1, fine for borders) */
  --accent: #fcec45;        /* UptoSolve yellow: backgrounds only, never text on white */
  --accent-hover: #f5e02c;
  --accent-wash: #fffbdc;
  --ok: #1d7a48;
  --err: #b3261e;
  --focus: #23231e;

  --r1: 10px;
  --r2: 18px;
  --r3: 99px;               /* pills */
  --shadow: 0 1px 2px rgba(35, 35, 30, .06), 0 8px 24px rgba(35, 35, 30, .06);
  --font: "Google Sans Flex", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --ease: cubic-bezier(.16, 1, .3, 1);
  --wide: 1360px;           /* page width */
  --gutter: 28px;
  color-scheme: light;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
html, body { margin: 0; }
body {
  background: var(--page);
  color: var(--ink);
  font: 400 1rem/1.55 var(--font);
  -webkit-font-smoothing: antialiased;
}
[hidden] { display: none !important; }
button, input, select, summary { font: inherit; color: inherit; }
::selection { background: var(--accent); color: #23231e; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.vh { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.wrap { max-width: var(--wide); margin: 0 auto; padding-left: var(--gutter); padding-right: var(--gutter); }

/* ---------- top bar ---------- */
.bar { display: flex; align-items: center; gap: 16px; max-width: var(--wide); margin: 0 auto; padding: 14px var(--gutter); }
.brand { display: flex; align-items: baseline; gap: 10px; color: var(--ink); text-decoration: none; }
.brand-mark { width: 28px; height: 20px; align-self: center; }
.brand-dot { fill: var(--accent); stroke: var(--ink); stroke-width: 1.2; }
.brand-name { font-size: 1.25rem; font-weight: 700; letter-spacing: -0.02em; }
.brand-by { color: var(--soft); font-size: 0.875rem; }
.bar-note { margin: 0 0 0 auto; display: flex; align-items: center; gap: 8px; color: var(--soft); font-size: 0.875rem; }
.bar-all {
  flex: none; padding: 7px 14px; border-radius: var(--r3); box-shadow: inset 0 0 0 1px var(--edge);
  color: var(--ink); text-decoration: none; font-weight: 500; font-size: 0.875rem; transition: background .15s var(--ease);
}
.bar-all:hover { background: var(--field); }

/* ---------- buttons: pills ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border: 0; border-radius: var(--r3); padding: 10px 18px; cursor: pointer; font-weight: 600; white-space: nowrap;
  color: var(--ink); text-decoration: none;
  transition: background .15s var(--ease), box-shadow .15s var(--ease), transform .1s var(--ease);
}
.btn.small { padding: 6px 12px; font-size: 0.875rem; font-weight: 500; gap: 6px; }
.btn.ghost { background: transparent; box-shadow: inset 0 0 0 1px var(--edge); }
.btn.ghost:hover { background: var(--field); }
.btn.primary { background: var(--accent); color: #23231e; }
.btn.primary:hover { background: var(--accent-hover); }
.btn.primary:active { transform: translateY(1px); }
.btn:disabled { background: var(--hair); color: #8c8b82; cursor: not-allowed; box-shadow: none; }

/* ---------- breadcrumbs ---------- */
.crumbs ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 2px 6px; font-size: 0.8125rem; color: var(--soft); }
.crumbs li { display: flex; align-items: center; gap: 6px; min-width: 0; }
.crumbs li + li::before { content: "/"; color: var(--edge); }
.crumbs a { color: var(--soft); text-decoration: none; }
.crumbs a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.crumbs [aria-current] { color: var(--ink); }

/* ---------- reading text ---------- */
.lede { margin: 0; color: var(--soft); font-size: 1.125rem; line-height: 1.55; max-width: 64ch; text-wrap: pretty; }
.prose { max-width: 70ch; font-size: 1.0625rem; line-height: 1.7; overflow-wrap: break-word; }
.prose > :first-child { margin-top: 0; }
.prose h2 { margin: 2.2em 0 0.6em; font-size: 1.5rem; line-height: 1.25; font-weight: 700; letter-spacing: -0.02em; text-wrap: balance; }
.prose h3 { margin: 1.6em 0 0.4em; font-size: 1.1875rem; line-height: 1.35; font-weight: 650; }
.prose p, .prose ul, .prose ol { margin: 0 0 1em; }
.prose ul, .prose ol { padding-left: 1.3em; }
.prose li + li { margin-top: 0.45em; }
.prose li::marker { color: var(--soft); }
.prose a { color: var(--ink); text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 3px; text-decoration-color: #b4b3aa; }
.prose a:hover { text-decoration-color: var(--ink); background: var(--accent-wash); }

/* ---------- link cards ---------- */
.cards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; }
.card {
  display: flex; flex-direction: column; gap: 6px; height: 100%; padding: 20px 22px;
  border: 1px solid var(--line); border-radius: var(--r2); color: var(--ink); text-decoration: none;
  transition: border-color .15s var(--ease), background .15s var(--ease);
}
.card:hover { border-color: var(--ink); background: var(--band); }
.card b { font-weight: 650; font-size: 1.0625rem; letter-spacing: -0.01em; }
.card span { color: var(--soft); font-size: 0.9375rem; line-height: 1.5; }

/* ---------- footer ---------- */
.site-foot { margin-top: 64px; background: var(--band); border-top: 1px solid var(--line); }
.foot-grid {
  max-width: var(--wide); margin: 0 auto; padding: 36px var(--gutter) 44px;
  display: grid; grid-template-columns: minmax(0, 2fr) repeat(2, minmax(0, 1fr)); gap: 28px;
}
.foot-brand { margin: 0 0 6px; font-weight: 700; letter-spacing: -0.01em; }
.foot-about p:not(.foot-brand) { margin: 0; color: var(--soft); font-size: 0.875rem; line-height: 1.55; max-width: 60ch; }
.foot-h { margin: 0 0 12px; font-weight: 650; font-size: 0.875rem; }
.links { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; font-size: 0.875rem; }
.links a { color: var(--ink); text-decoration: none; }
.links a:hover { text-decoration: underline; text-underline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}
@media (max-width: 960px) {
  :root { --gutter: 16px; }
  .bar { flex-wrap: wrap; row-gap: 8px; }
  .bar-note { margin: 0; width: 100%; order: 3; font-size: 0.8125rem; }
  .bar-all { margin-left: auto; }
  .foot-grid { grid-template-columns: 1fr 1fr; gap: 24px; }
  .foot-about { grid-column: 1 / -1; }
}
@media (max-width: 520px) {
  .cards { grid-template-columns: 1fr; }
  .prose { font-size: 1rem; }
  .lede { font-size: 1rem; }
}

/* a bar with no note: the pill moves to the right edge */
.bar > .brand + .bar-all { margin-left: auto; }

/* The /tools/ hub only. Shared look is in ../kit/brand.css. */

.hero { display: flex; flex-direction: column; gap: 12px; padding: 40px 0 36px; max-width: 760px; }
.hero h1 {
  margin: 4px 0 0; font-size: clamp(2.25rem, 1.6rem + 2.4vw, 3.5rem); line-height: 1.05; font-weight: 700;
  letter-spacing: -0.035em; text-wrap: balance;
}
.hero h1::after {
  content: ""; display: block; width: 56px; height: 8px; margin-top: 18px; border-radius: var(--r3); background: var(--accent);
  box-shadow: inset 0 0 0 1px rgba(35, 35, 30, .25);
}

/* the tool cards: picture on top, then name, what it does, tags and the way in */
.tools { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 380px), 1fr)); gap: 20px; }
.tool {
  display: flex; flex-direction: column; height: 100%; overflow: hidden;
  border: 1px solid var(--line); border-radius: var(--r2); background: var(--page); color: var(--ink); text-decoration: none;
  transition: border-color .15s var(--ease), box-shadow .2s var(--ease), transform .2s var(--ease);
}
.tool:hover { border-color: var(--ink); box-shadow: var(--shadow); transform: translateY(-2px); }
.tool img { display: block; width: 100%; height: auto; aspect-ratio: 1200 / 630; object-fit: cover; border-bottom: 1px solid var(--line); background: var(--band); }
.tool-body { display: flex; flex-direction: column; gap: 8px; padding: 20px 22px 22px; flex: 1; }
.tool-name { font-size: 0.875rem; font-weight: 600; color: var(--soft); }
.tool b { font-size: 1.375rem; line-height: 1.2; font-weight: 700; letter-spacing: -0.02em; }
.tool-sum { color: var(--soft); font-size: 1rem; line-height: 1.55; }
.tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 2px; }
.tags span { padding: 3px 10px; border-radius: var(--r3); background: var(--field); font-size: 0.8125rem; font-weight: 500; }
.tool-go {
  align-self: flex-start; margin-top: auto; padding: 9px 16px; border-radius: var(--r3);
  background: var(--accent); font-weight: 600; font-size: 0.9375rem; transition: background .15s var(--ease);
}
.tool:hover .tool-go { background: var(--accent-hover); }
.tool-body > .tags + .tool-go, .tool-sum + .tool-go { margin-top: 12px; }

/* how it works */
.how { margin-top: 64px; padding-top: 40px; border-top: 1px solid var(--line); }
.how h2 { margin: 0 0 20px; font-size: 1.5rem; line-height: 1.25; font-weight: 700; letter-spacing: -0.02em; }
.points { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; }
.points li { display: flex; flex-direction: column; gap: 6px; padding-top: 14px; border-top: 3px solid var(--ink); }
.points b { font-size: 1.0625rem; font-weight: 650; }
.points span { color: var(--soft); font-size: 1rem; line-height: 1.55; }

@media (max-width: 960px) {
  .hero { padding: 24px 0 28px; }
  .points { grid-template-columns: 1fr; gap: 20px; }
  .how { margin-top: 48px; padding-top: 32px; }
}

/* while there is only one tool, show it as one wide card instead of a lonely column */
@media (min-width: 961px) {
  .tools:has(> li:only-child) { grid-template-columns: 1fr; }
  .tools > li:only-child .tool { flex-direction: row; }
  .tools > li:only-child .tool img { width: 56%; flex: none; border-bottom: 0; border-right: 1px solid var(--line); }
  .tools > li:only-child .tool-body { padding: 32px 36px; justify-content: center; }
  .tools > li:only-child .tool b { font-size: 1.75rem; }
}