/* ==========================================================================
   Split Image — "cutting mat" design system.

   Loaded on every page. Page-specific sheets (tool.css, planner.css,
   page.css) are listed by the Blade view and load after this one.

   There is no build step. What is written here is what the browser gets, so
   the file is ordered the way a page is: tokens, reset, chrome, hero, then
   the shared editorial blocks that sit under every tool.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */

:root {
  --bg: #eef2ec;
  --bg-grain: #e6ebe3;
  --surface: #ffffff;
  --surface-2: #f6f9f4;
  --ink: #0f1613;
  --ink-2: #4c5a55;
  --ink-3: #7b8a84;
  --line: #d6ded4;
  --line-strong: #b9c4b8;
  --accent: #0b9a83;
  --accent-hover: #087a68;
  --accent-soft: #d9f2ec;
  --on-accent: #ffffff;
  --mark: #d8386f;
  --mat: #16302b;
  --mat-2: #1d3d36;
  --mat-line: rgba(126, 231, 206, 0.16);
  --shadow-sm: 0 1px 2px rgba(15, 22, 19, 0.06);
  --shadow-md: 0 6px 24px -12px rgba(15, 22, 19, 0.35);
  --shadow-lg: 0 24px 60px -24px rgba(15, 22, 19, 0.45);
  --radius: 10px;
  --radius-sm: 7px;
  --rail: 340px;
  --font-display: "Bricolage Grotesque", "Trebuchet MS", system-ui, sans-serif;
  --font-body: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", monospace;
}

[data-theme="dark"] {
  --bg: #0a110e;
  --bg-grain: #0d1512;
  --surface: #121b17;
  --surface-2: #18231e;
  --ink: #e7efe9;
  --ink-2: #a3b2ab;
  --ink-3: #7a8a83;
  --line: #24322c;
  --line-strong: #33453d;
  --accent: #2ad0af;
  --accent-hover: #57e0c3;
  --accent-soft: #14322b;
  --on-accent: #05231c;
  --mark: #ff5c92;
  --mat: #0e1f1c;
  --mat-2: #142a25;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5);
  --shadow-md: 0 8px 28px -14px rgba(0, 0, 0, 0.8);
  --shadow-lg: 0 24px 60px -24px rgba(0, 0, 0, 0.9);
}

/* --------------------------------------------------------------------------
   2. Reset and base
   -------------------------------------------------------------------------- */

* { box-sizing: border-box; }
[hidden] { display: none !important; }

body {
  margin: 0;
  background-color: var(--bg);
  background-image: radial-gradient(var(--bg-grain) 1px, transparent 1px);
  background-size: 4px 4px;
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
body.is-locked { overflow: hidden; }

h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 700; line-height: 1.14; margin: 0; letter-spacing: -0.015em; }
p { margin: 0 0 1em; }
a { color: inherit; }
img { max-width: 100%; }

.wrap { width: min(1240px, 100% - 40px); margin-inline: auto; }
@media (max-width: 640px) { .wrap { width: calc(100% - 28px); } }

.skip { position: absolute; left: -999px; top: 0; z-index: 100; background: var(--accent); color: var(--on-accent); padding: 10px 16px; }
.skip:focus { left: 0; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* --------------------------------------------------------------------------
   3. Header — static, does not follow the scroll
   -------------------------------------------------------------------------- */

.masthead { background: var(--surface); border-bottom: 1px solid var(--line); }
.masthead__inner { display: grid; grid-template-columns: 1fr minmax(0, auto) 1fr; align-items: center; gap: 16px; min-height: 62px; }
.masthead__left { display: flex; align-items: center; gap: 6px; min-width: 0; }
.masthead__right { display: flex; align-items: center; justify-content: flex-end; gap: 4px; }

.brand { display: inline-flex; align-items: center; gap: 9px; text-decoration: none; font-family: var(--font-display); font-weight: 800; font-size: 1.02rem; letter-spacing: -0.02em; }
.brand__mark { width: 26px; height: 26px; flex: none; }
.brand em { font-style: normal; color: var(--accent); }

.page-title {
  margin: 0; min-width: 0; font-family: var(--font-display); font-weight: 700; letter-spacing: -0.015em;
  font-size: clamp(1rem, 2.4vw, 1.2rem); text-align: center;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.page-title::before { content: "\2702  "; color: var(--mark); font-size: 0.85em; }
/* The brand is in the side menu, so on a phone the title is the only thing
   naming the page up here. It stays, and truncates rather than wrapping. */
@media (max-width: 560px) {
  .masthead__inner { gap: 8px; }
  .page-title::before { content: none; }
}

.icon-btn {
  width: 38px; height: 38px; display: inline-grid; place-items: center; cursor: pointer;
  background: none; border: 1px solid transparent; border-radius: var(--radius-sm); color: var(--ink-2);
}
.icon-btn:hover { background: var(--surface-2); border-color: var(--line); color: var(--ink); }
.icon-btn svg { width: 19px; height: 19px; flex: none; }
.icon-btn > span { display: inline-grid; place-items: center; }

/* The language picker: a globe, the current code, and a chevron. Wider than a
   plain icon button because the code has to fit. */
.icon-btn--wide { width: auto; gap: 5px; padding: 0 8px; display: inline-flex; align-items: center; }
.icon-btn--wide svg:last-child { width: 14px; height: 14px; opacity: 0.7; }
.langpick__code { font: 600 0.74rem var(--font-mono); letter-spacing: 0.04em; }
/* Both glyphs are in the markup; the theme decides which one is shown, so the
   button can never disagree with the page it is sitting on. */
[data-theme="dark"] .icon-theme--sun { display: none; }
[data-theme="light"] .icon-theme--moon { display: none; }

/* language popover */
.pop { position: relative; }
.menu {
  position: absolute; top: calc(100% + 8px); right: 0; min-width: 210px; max-height: 70vh; overflow-y: auto;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow-md); padding: 6px; display: none; z-index: 60;
}
.menu[data-open="true"] { display: block; animation: drop 0.14s ease both; }
@keyframes drop { from { opacity: 0; } }
.menu a { display: flex; gap: 10px; align-items: center; padding: 8px 10px; font-size: 0.88rem; text-decoration: none; color: var(--ink-2); border-radius: var(--radius-sm); }
.menu a:hover { background: var(--surface-2); color: var(--ink); }
.menu a[aria-current="true"] { color: var(--accent); font-weight: 600; }
.menu__label { font: 600 0.68rem/1 var(--font-mono); letter-spacing: 0.09em; text-transform: uppercase; color: var(--ink-3); padding: 8px 10px 6px; margin: 0; position: sticky; top: -6px; background: var(--surface); }
.menu__flag { font-size: 1rem; line-height: 1; flex: none; }
.menu__name { flex: 1; min-width: 0; white-space: nowrap; }
.menu .native { color: var(--ink-3); font-family: var(--font-mono); font-size: 0.76rem; flex: none; }

/* --------------------------------------------------------------------------
   4. Side menu
   -------------------------------------------------------------------------- */

.scrim { position: fixed; inset: 0; background: rgba(10, 24, 20, 0.5); z-index: 80; opacity: 0; transition: opacity 0.22s; }
.scrim[data-open="true"] { opacity: 1; }

/* The drawer slides on `left` rather than a translate, so it parks its own
   width off-screen and the distance travelled is exactly the width. */
.drawer {
  --drawer-w: min(320px, 86vw);
  position: fixed; top: 0; bottom: 0; width: var(--drawer-w); z-index: 90;
  left: calc(-1 * (var(--drawer-w) + 10px));
  background: var(--surface); border-right: 1px solid var(--line); box-shadow: var(--shadow-lg);
  display: flex; flex-direction: column; padding: 14px 12px 18px;
  transition: left 0.26s cubic-bezier(0.4, 0, 0.2, 1);
  overflow-y: auto; overscroll-behavior: contain;
}
.drawer[data-open="true"] { left: 0; }
.drawer__top { display: flex; align-items: center; justify-content: space-between; padding: 0 4px 12px; border-bottom: 1px solid var(--line); }
.drawer__nav { display: flex; flex-direction: column; padding-top: 8px; flex: 1; }
.drawer__label { font: 600 0.68rem/1 var(--font-mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); margin: 16px 8px 6px; }
.drawer__link {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 10px; border-radius: var(--radius-sm); text-decoration: none; color: var(--ink-2); font-size: 0.91rem;
}
.drawer__link svg { width: 17px; height: 17px; flex: none; color: var(--ink-3); }
.drawer__link span { flex: 1; min-width: 0; }
.drawer__link:hover { background: var(--surface-2); color: var(--ink); }
.drawer__link:hover svg { color: var(--accent); }
.drawer__link[aria-current="page"] { background: var(--accent-soft); color: var(--accent); font-weight: 600; }
.drawer__link[aria-current="page"] svg { color: var(--accent); }
.drawer__link em { font-style: normal; font-family: var(--font-mono); font-size: 0.74rem; color: var(--ink-3); }
.drawer__badge { font: 600 0.62rem var(--font-mono); text-transform: uppercase; letter-spacing: 0.06em; background: var(--accent); color: var(--on-accent); border-radius: 100px; padding: 2px 7px; }
.drawer__foot { margin: 18px 10px 0; font-size: 0.78rem; color: var(--ink-3); }

/* --------------------------------------------------------------------------
   5. Hero
   -------------------------------------------------------------------------- */

.hero { padding: 36px 0 24px; }
.eyebrow { font: 600 0.7rem/1 var(--font-mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); margin: 0 0 12px; display: flex; align-items: center; gap: 9px; }
.eyebrow::after { content: ""; height: 1px; flex: 1; background: repeating-linear-gradient(90deg, var(--line-strong) 0 5px, transparent 5px 10px); }
.hero h1 { font-size: clamp(1.75rem, 4.4vw, 2.9rem); max-width: 22ch; margin-bottom: 14px; }
/* Headings mark their own keyword with <mark>. The browser default is a yellow
   highlighter, which is not the effect wanted — colour the word instead. */
h1 mark, h2 mark { background: none; color: var(--accent); }
.hero__lede { color: var(--ink-2); max-width: 62ch; font-size: 1.03rem; }
.badges { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; padding: 0; list-style: none; }
.badges li { font: 500 0.76rem var(--font-mono); color: var(--ink-2); background: var(--surface); border: 1px solid var(--line); border-radius: 100px; padding: 5px 12px; display: flex; align-items: center; gap: 6px; }
.badges svg { width: 13px; height: 13px; color: var(--accent); flex: none; }

/* --------------------------------------------------------------------------
   6. Buttons, panels, toast
   -------------------------------------------------------------------------- */

.panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-sm); }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; cursor: pointer;
  font: 600 0.9rem var(--font-body); padding: 12px 16px; border-radius: var(--radius-sm);
  border: 1px solid var(--line); background: var(--surface); color: var(--ink); width: 100%;
  text-decoration: none; text-align: center;
}
.btn:hover { border-color: var(--line-strong); background: var(--surface-2); }
.btn svg { width: 16px; height: 16px; flex: none; }
.btn--primary { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.btn--primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); color: var(--on-accent); }
.btn--ghost { background: none; border-style: dashed; color: var(--ink-2); }
.btn--auto { width: auto; }
.btn-row { display: grid; gap: 8px; }
.btn-row--2 { grid-template-columns: 1fr 1fr; }

/* Centred with auto margins rather than a -50% translate, and it fades in
   instead of sliding. */
.toast {
  position: fixed; left: 16px; right: 16px; bottom: 24px; z-index: 95;
  width: fit-content; margin-inline: auto;
  background: var(--ink); color: var(--bg); padding: 11px 18px; border-radius: 100px;
  font: 500 0.86rem var(--font-body); opacity: 0; pointer-events: none;
  transition: opacity 0.2s; box-shadow: var(--shadow-md);
  max-width: calc(100% - 32px); text-align: center;
}
.toast[data-show="true"] { opacity: 1; }

/* --------------------------------------------------------------------------
   7. Editorial — the article under every tool
   -------------------------------------------------------------------------- */

.content { padding: 30px 0 10px; border-top: 1px solid var(--line); }
/* minmax(0, 1fr) rather than 1fr on both tracks: a grid item defaults to
   min-width:auto, so one wide reference table with nowrap cells would push the
   column past the viewport and scroll the whole page sideways. The table
   scrolls inside itself instead — see .tbl below. */
.content__grid { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 40px; align-items: start; }
@media (max-width: 900px) { .content__grid { grid-template-columns: minmax(0, 1fr); gap: 26px; } }

.prose { max-width: 68ch; min-width: 0; color: var(--ink-2); }
.prose h2 { font-size: 1.5rem; color: var(--ink); margin: 30px 0 12px; }
.prose h3 { font-size: 1.13rem; color: var(--ink); margin: 22px 0 8px; }
.prose > :first-child { margin-top: 0; }
.prose .lead { font-size: 1.06rem; color: var(--ink); }
.prose ul, .prose ol { margin: 0 0 1em; padding-left: 22px; }
.prose li { margin-bottom: 7px; }
.prose code {
  font: 500 0.86em var(--font-mono); background: var(--surface-2);
  border: 1px solid var(--line); border-radius: 4px; padding: 1px 5px;
}
.prose a { color: var(--accent); text-underline-offset: 3px; }
.prose strong { color: var(--ink); }

.steps { list-style: none; padding: 0 !important; margin: 0 0 1em; counter-reset: s; }
.steps li { position: relative; padding-left: 42px; margin-bottom: 14px; counter-increment: s; }
.steps li::before {
  content: counter(s, decimal-leading-zero); position: absolute; left: 0; top: 1px;
  font: 600 0.76rem var(--font-mono); color: var(--accent); background: var(--accent-soft);
  width: 30px; height: 24px; display: grid; place-items: center; border-radius: 5px;
}

.callout {
  background: var(--accent-soft); border-left: 3px solid var(--accent);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0; padding: 13px 16px; margin: 0 0 1.2em;
  font-size: 0.94rem; color: var(--ink-2);
}
.callout strong { color: var(--ink); }

.tbl { width: 100%; border-collapse: collapse; font-size: 0.9rem; margin: 0 0 1.4em; display: block; overflow-x: auto; }
.tbl th, .tbl td { text-align: left; padding: 9px 12px 9px 0; border-bottom: 1px solid var(--line); white-space: nowrap; }
.tbl th { font: 600 0.74rem var(--font-mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3); }
.tbl td { color: var(--ink-2); }
.tbl td:first-child { color: var(--ink); font-weight: 500; }

.faq details { border-bottom: 1px solid var(--line); padding: 4px 0; }
.faq summary { cursor: pointer; padding: 12px 0; font-weight: 600; color: var(--ink); list-style: none; display: flex; justify-content: space-between; gap: 16px; align-items: center; font-family: var(--font-body); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-family: var(--font-mono); color: var(--accent); font-size: 1.2rem; flex: none; }
.faq details[open] summary::after { content: "\2212"; }
.faq p { margin: 0 0 14px; }

/* --------------------------------------------------------------------------
   8. Sidebar cards
   -------------------------------------------------------------------------- */

.aside { display: grid; gap: 14px; position: sticky; top: 16px; }
@media (max-width: 900px) { .aside { position: static; } }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; }
.card h2 { font-size: 0.78rem; font-family: var(--font-mono); font-weight: 600; text-transform: uppercase; letter-spacing: 0.09em; color: var(--ink-3); margin: 0 0 11px; }
.card ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 2px; }
.card li a { display: flex; justify-content: space-between; gap: 12px; padding: 7px 8px; border-radius: var(--radius-sm); text-decoration: none; color: var(--ink-2); font-size: 0.87rem; }
.card li a:hover { background: var(--surface-2); color: var(--ink); }
.card li a span { font-family: var(--font-mono); font-size: 0.76rem; color: var(--ink-3); flex: none; }
.card li a[aria-current="page"] { background: var(--accent-soft); color: var(--accent); font-weight: 600; }
.card__note { font-size: 0.8rem; color: var(--ink-3); margin: 10px 0 0; }
.spec { width: 100%; border-collapse: collapse; font-size: 0.85rem; }
.spec th, .spec td { text-align: left; padding: 7px 0; border-bottom: 1px solid var(--line); color: var(--ink-2); }
.spec th { font-weight: 500; color: var(--ink-3); font-family: var(--font-mono); font-size: 0.78rem; }
.spec td { font-family: var(--font-mono); color: var(--ink); text-align: right; }
.spec tr:last-child th, .spec tr:last-child td { border-bottom: 0; }

/* --------------------------------------------------------------------------
   9. Related tools
   -------------------------------------------------------------------------- */

.related { padding: 26px 0 6px; }
.related h2 { font-size: 1.3rem; margin-bottom: 4px; }
.related__sub { color: var(--ink-3); font-size: 0.9rem; margin-bottom: 16px; }
.related__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 10px; }
.related__card {
  display: flex; gap: 12px; align-items: flex-start; padding: 14px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  text-decoration: none; transition: border-color 0.14s, box-shadow 0.14s, background 0.14s;
}
.related__card:hover { border-color: var(--accent); background: var(--surface-2); box-shadow: var(--shadow-md); }
.related__card svg { width: 20px; height: 20px; flex: none; color: var(--accent); margin-top: 2px; }
.related__card strong { display: block; color: var(--ink); font-size: 0.94rem; margin-bottom: 2px; }
.related__card span { color: var(--ink-3); font-size: 0.82rem; line-height: 1.45; }

/* --------------------------------------------------------------------------
   10. Footer
   -------------------------------------------------------------------------- */

.footer { border-top: 1px solid var(--line); margin-top: 40px; padding: 34px 0 44px; background: var(--surface); }
.footer__grid { display: grid; grid-template-columns: 1.4fr repeat(4, 1fr); gap: 26px; }
@media (max-width: 980px) { .footer__grid { grid-template-columns: 1fr 1fr 1fr; } }
@media (max-width: 640px) { .footer__grid { grid-template-columns: 1fr 1fr; } }
.footer h2 { font: 600 0.72rem var(--font-mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); margin: 0 0 10px; }
.footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 7px; }
.footer a { color: var(--ink-2); text-decoration: none; font-size: 0.87rem; }
.footer a:hover { color: var(--accent); }
.footer__note { color: var(--ink-3); font-size: 0.82rem; max-width: 34ch; margin-top: 10px; }
.footer__bottom { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-top: 28px; padding-top: 18px; border-top: 1px solid var(--line); font-size: 0.8rem; color: var(--ink-3); }
.footer__bottom a { font-size: inherit; }
.footer__bottom .sep { opacity: 0.5; margin: 0 6px; }

/* --------------------------------------------------------------------------
   11. Motion and print
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}
@media print {
  .masthead, .rail, .footer, .content, .hero, .drawer, .scrim, .related, .skip { display: none; }
}