/* Filekin
   Palette: cool paper, slate ink, pine for actions, and highlighter yellow
   used in exactly one place: the drop zone. */

:root {
  --paper: #F5F7F4;
  --surface: #FFFFFF;
  --ink: #18232E;
  --muted: #56636E;
  --line: #D3DAD4;
  --pine: #0F6A57;
  --pine-ink: #FFFFFF;
  --pine-soft: #E3EFEA;
  --highlight: #F3DA4E;
  --error: #B3261E;
  --error-soft: #FBEAE8;
  --warn: #8A5300;

  --display: "Bricolage Grotesque", "Segoe UI", system-ui, sans-serif;
  --body: "Atkinson Hyperlegible", "Segoe UI", system-ui, sans-serif;

  --radius-sheet: 14px;
  --radius-control: 8px;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper: #121A20;
    --surface: #1A242C;
    --ink: #E7ECE8;
    --muted: #9AA7AE;
    --line: #2C3942;
    --pine: #3FB497;
    --pine-ink: #0B1915;
    --pine-soft: #17302A;
    --highlight: #E8CD3C;
    --error: #FF8A80;
    --error-soft: #3A1E1C;
    --warn: #F2B65A;
    color-scheme: dark;
  }
}

*, *::before, *::after { box-sizing: border-box; }
/* Something marked hidden stays hidden, whatever a button or box style says. */
[hidden] { display: none !important; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 1.0625rem/1.6 var(--body);
  -webkit-font-smoothing: antialiased;
}

a { color: var(--pine); }
a:focus-visible, button:focus-visible, .sheet:focus-visible {
  outline: 3px solid var(--pine);
  outline-offset: 3px;
}

h1, h2 { font-family: var(--display); font-weight: 700; margin: 0; }

/* ---------------------------------------------------------------- header */

.site-header {
  position: relative;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  max-width: 72rem;
  margin: 0 auto;
  padding: 1.25rem 1.25rem 0;
}

/* "All tools": a menu of every tool, by category, on every page. */
.tools-menu { position: static; }
.tools-menu summary {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  list-style: none;
  cursor: pointer;
  padding: .55rem 1rem;
  border: 1.5px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  font: 700 1rem/1.2 var(--display);
  color: var(--ink);
  user-select: none;
}
.tools-menu summary::-webkit-details-marker { display: none; }
.tools-menu summary::before {
  content: "";
  width: .95rem;
  height: .7rem;
  background:
    linear-gradient(currentColor 0 0) top / 100% 2px no-repeat,
    linear-gradient(currentColor 0 0) center / 100% 2px no-repeat,
    linear-gradient(currentColor 0 0) bottom / 100% 2px no-repeat;
}
.tools-menu summary:hover, .tools-menu[open] summary { border-color: var(--pine); color: var(--pine); }
.tools-menu summary:focus-visible { outline: 3px solid var(--pine); outline-offset: 3px; }

/* Business, beside All tools: a green-to-yellow outline sets it apart without competing with a tool's own button. */
.header-actions { display: flex; align-items: center; gap: .6rem; }
.biz-button {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .45rem .45rem .45rem .95rem;
  border: 2px solid transparent;
  border-radius: 999px;
  background:
    linear-gradient(var(--surface), var(--surface)) padding-box,
    linear-gradient(120deg, var(--pine), var(--highlight)) border-box;
  color: var(--ink);
  font: 700 1rem/1.2 var(--display);
  text-decoration: none;
  white-space: nowrap;
}
.biz-button svg { color: var(--pine); flex: none; }
.biz-tag { padding: .2rem .55rem; border-radius: 999px; background: var(--highlight); color: #18232E; font-size: .8rem; }
.biz-button:hover { background:
    linear-gradient(var(--pine-soft), var(--pine-soft)) padding-box,
    linear-gradient(120deg, var(--pine), var(--highlight)) border-box; }
.biz-button:focus-visible { outline: 3px solid var(--pine); outline-offset: 3px; }
.tools-menu summary { white-space: nowrap; }
@media (max-width: 30rem) {
  .site-header { gap: .5rem; padding-inline: 1rem; }
  .header-actions { gap: .4rem; }
  .biz-button { padding-left: .7rem; gap: .35rem; }
  .biz-button svg { display: none; }
  /* On phones the menu button shows only its icon; its words stay for screen readers. */
  .tools-menu summary { font-size: 0; gap: 0; padding: 0; width: 2.75rem; height: 2.75rem; justify-content: center; }
  .tools-menu summary::before { width: 1.1rem; height: .8rem; }
}
@media (max-width: 24rem) {
  .site-header { padding-inline: .75rem; }
  .biz-button { padding-left: .6rem; }
  .biz-tag { padding: .15rem .4rem; font-size: .75rem; }
}
@media (max-width: 22rem) { .biz-tag { display: none; } .biz-button { padding-right: .7rem; } }

.menu-panel {
  position: absolute;
  top: calc(100% + .6rem);
  left: 1.25rem;
  right: 1.25rem;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.5rem 2rem;
  padding: 1.5rem;
  background: var(--surface);
  border: 1.5px solid var(--line);
  border-radius: var(--radius-sheet);
  box-shadow: 0 18px 40px rgb(0 0 0 / .14);
  animation: menu-in .14s ease-out;
}
@keyframes menu-in { from { opacity: 0; transform: translateY(-4px); } }
.menu-heading { margin: 0 0 .4rem; color: var(--muted); font-size: .9rem; }
.menu-group ul { list-style: none; margin: 0; padding: 0; }
.menu-group a {
  display: flex;
  align-items: center;
  gap: .55rem;
  padding: .4rem .5rem;
  margin-left: -.5rem;
  border-radius: 8px;
  color: var(--ink);
  text-decoration: none;
  font-weight: 700;
}
.menu-group a:hover { background: var(--pine-soft); color: var(--pine); }
.menu-group .tool-icon { width: 1.15rem; height: 1.15rem; color: var(--pine); flex: none; }
.menu-group { min-width: 0; }
.menu-group a { overflow-wrap: anywhere; }
@media (max-width: 52rem) {
  .menu-panel { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 34rem) {
  .menu-panel {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.1rem 1rem;
    left: .75rem;
    right: .75rem;
    padding: 1.1rem;
    max-height: calc(100vh - 6rem);
    overflow-y: auto;
  }
  .menu-group a { font-size: .92rem; padding: .35rem .4rem; }
}
@media (prefers-reduced-motion: reduce) { .menu-panel { animation: none; } }

.wordmark {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font: 700 1.5rem/1 var(--display);
  letter-spacing: -.02em;
  color: var(--ink);
  text-decoration: none;
}

/* ---------------------------------------------------------------- home */

.home {
  max-width: 72rem;
  margin: 0 auto;
  padding: 0 1.25rem;
}

.hero {
  padding: clamp(3rem, 9vw, 6.5rem) 0 clamp(2.5rem, 6vw, 4rem);
  text-align: center;
}

.hero h1 {
  font-size: clamp(2.6rem, 7.5vw, 5.25rem);
  line-height: .98;
  letter-spacing: -.035em;
}
/* Each half of the headline is its own line on screens wide enough to hold it. */
.hero h1 .line { display: block; }
@media (max-width: 40rem) { .hero h1 .line { display: inline; } }

.hero .lede { margin-inline: auto; }
.hero .promises { justify-content: center; }

/* ------------------------------------------------ hero effects (each optional)
   Turned on by classes on .hero (HERO_EFFECTS in main.py). They play once on
   load, cost nothing to download, and never move the layout. People who ask
   their device for less motion see the finished state straight away. */
.hero { position: relative; isolation: isolate; }
.hero-papers { display: none; }

/* 1. A highlighter stroke sweeps across "actually free." */
.fx-highlight .hl {
  background:
    linear-gradient(100deg, transparent .2em, var(--highlight) .25em, var(--highlight) calc(100% - .2em), transparent calc(100% - .15em))
    no-repeat 0 88% / 0% 42%;
  padding: 0 .12em;
  margin: 0 -.12em;
  border-radius: .12em;
  animation: hl-sweep .85s cubic-bezier(.65, 0, .35, 1) .35s forwards;
}
@keyframes hl-sweep { to { background-size: 100% 42%; } }

/* 2. The promises are always there; their check marks pop in one by one. */
.fx-checks .promises li::before { animation: check-pop .35s ease-out both; }
.fx-checks .promises li:nth-child(1)::before { animation-delay: .9s; }
.fx-checks .promises li:nth-child(2)::before { animation-delay: 1.2s; }
.fx-checks .promises li:nth-child(3)::before { animation-delay: 1.5s; }
@keyframes check-pop { from { transform: scale(.2); } 70% { transform: scale(1.2); } }
.fx-checks .promises li::before {
  width: 1.15em;
  height: 1.15em;
  vertical-align: -.2em;
  background: var(--pine) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5l3 3 6-7' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 75% no-repeat;
}

/* 3. Faint file sheets drift slowly behind the headline, kept to the sides. */
.fx-papers .hero-papers {
  display: block;
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}
.paper {
  position: absolute;
  width: 4.2rem;
  height: 5.4rem;
  border-radius: 6px;
  border: 1.5px solid var(--ink);
  background: var(--surface);
  opacity: .09;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding-bottom: .55rem;
  font: 800 .8rem/1 var(--display);
  letter-spacing: .04em;
  color: var(--ink);
  clip-path: polygon(0 0, 72% 0, 100% 22%, 100% 100%, 0 100%);  /* folded corner */
  animation: drift 18s ease-in-out infinite alternate;
}
.paper::before {
  content: "";
  position: absolute;
  top: 1rem;
  left: .7rem;
  right: .7rem;
  height: 1.6rem;
  background: repeating-linear-gradient(var(--ink) 0 2px, transparent 2px 7px);
  opacity: .7;
}
.paper.p1 { left: 4%;  top: 14%; transform: rotate(-12deg); animation-duration: 19s; }
.paper.p2 { left: 12%; top: 58%; transform: rotate(8deg);   animation-duration: 23s; animation-delay: -6s; }
.paper.p3 { left: 1%;  top: 78%; transform: rotate(-4deg);  animation-duration: 21s; animation-delay: -3s; }
.paper.p4 { right: 5%; top: 12%; transform: rotate(10deg);  animation-duration: 22s; animation-delay: -9s; }
.paper.p5 { right: 13%; top: 55%; transform: rotate(-8deg); animation-duration: 20s; animation-delay: -4s; }
.paper.p6 { right: 2%; top: 80%; transform: rotate(5deg);   animation-duration: 24s; animation-delay: -12s; }
@keyframes drift {
  from { translate: 0 0; rotate: 0deg; }
  to { translate: 0 -18px; rotate: 4deg; }
}

/* "fx-fall" (with fx-papers): instead of floating in place, the sheets drift
   slowly down through the top section, turning a little, and fade out at the
   bottom as another fades in at the top. */
.fx-fall .paper { --o: .17; top: -7rem; opacity: 0; animation: fall 24s linear infinite; }
/* Same speed for all, evenly staggered: each side always has three sheets
   on the way down, one every 8 seconds, so the stream never gaps or bunches. */
.fx-fall .paper.p1 { left: 5%;  animation-delay: 0s; }
.fx-fall .paper.p2 { left: 14%; animation-delay: -8s; }
.fx-fall .paper.p3 { left: 1%;  animation-delay: -16s; }
.fx-fall .paper.p4 { right: 4%;  left: auto; animation-delay: -4s; }
.fx-fall .paper.p5 { right: 13%; left: auto; animation-delay: -12s; }
.fx-fall .paper.p6 { right: 1%;  left: auto; animation-delay: -20s; }
@keyframes fall {
  0%   { opacity: 0;        transform: translateY(0) rotate(-14deg); }
  12%  { opacity: var(--o); }
  50%  {                    transform: translateY(19rem) rotate(4deg); }
  88%  { opacity: var(--o); }
  100% { opacity: 0;        transform: translateY(38rem) rotate(16deg); }
}
@media (max-width: 52rem) { .fx-papers .hero-papers { display: none; } }  /* no room beside the text */

@media (prefers-color-scheme: dark) {
  /* On a dark page the stroke sits lower, under the letters, so light text stays readable. */
  .fx-highlight .hl { background-position: 0 100%; background-size: 0% 26%; }
  @keyframes hl-sweep { to { background-size: 100% 26%; } }
  .paper { opacity: .12; }
  .fx-fall .paper { --o: .12; }
}

@media (prefers-reduced-motion: reduce) {
  .fx-highlight .hl { animation: none; background-size: 100% 42%; }
  .fx-checks .promises li::before { animation: none; }
  .paper { animation: none; }
  /* Frozen part-way down, so they still sit scattered across the section. */
  .fx-fall .paper { animation: fall 24s linear infinite paused; }
}
@media (prefers-reduced-motion: reduce) and (prefers-color-scheme: dark) {
  .fx-highlight .hl { background-size: 100% 26%; }
}

.lede {
  color: var(--muted);
  font-size: 1.2rem;
  max-width: 34rem;
  margin: 1.25rem 0 0;
}

.promises {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 1.5rem;
  list-style: none;
  padding: 0;
  margin: 1.75rem 0 0;
  font-weight: 700;
}
.promises li::before {
  content: "";
  display: inline-block;
  width: .55em;
  height: .55em;
  margin-right: .5em;
  border-radius: 50%;
  background: var(--pine);
  vertical-align: .08em;
}

/* Every tool on the left, by category; on the right, the showcase (and an ad,
   when ads are on), the same width as the sidebar on tool pages. Stacks on
   narrow screens, the showcase after the tools. */
.home-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 19rem;
  gap: 3rem;
  align-items: start;
}
.home-aside {
  display: grid;
  gap: 1.5rem;
  position: sticky;
  top: 1.25rem;
}
@media (max-width: 60rem) {
  .home-layout { grid-template-columns: 1fr; }
  .home-aside { position: static; }
}

/* ---------------------------------------------------------------- tool index
   A plain grouped list, like a well-kept filing index. */

.tool-index {
  display: grid;
  gap: 2.25rem;
  border-top: 2px solid var(--ink);
  padding-top: 1.75rem;
}

.tool-group h2 {
  font-size: 1.05rem;
  font-weight: 500;
  color: var(--muted);
  margin-bottom: .6rem;
}

.tool-group ul { list-style: none; margin: 0; padding: 0; }
.tool-index .tool-group ul {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(14.5rem, 1fr));
  gap: .7rem;
}
.tool-group li + li { margin-top: .6rem; }
.tool-index .tool-group li + li { margin-top: 0; }

/* Each tool is a button-like tile: an icon, a border, a hover lift and an arrow,
   so it reads as something to click rather than a line of text. */
.tool-group a {
  position: relative;
  display: flex;
  align-items: center;
  gap: .85rem;
  box-sizing: border-box;
  height: 100%;
  min-height: 5.25rem;
  padding: .8rem 2.5rem .8rem .85rem;
  background: var(--surface);
  border: 1.5px solid var(--line);
  border-radius: 10px;
  text-decoration: none;
  color: var(--ink);
  transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.tool-group a::after {
  content: "";
  position: absolute;
  right: 1rem;
  top: 50%;
  width: .5rem;
  height: .5rem;
  border-top: 2.5px solid var(--muted);
  border-right: 2.5px solid var(--muted);
  transform: translateY(-50%) rotate(45deg);
  transition: border-color .15s ease, right .15s ease;
}
.tool-group a:hover {
  border-color: var(--pine);
  box-shadow: 0 2px 0 var(--pine);
  transform: translateY(-1px);
}
.tool-group a:hover::after { border-color: var(--pine); right: .8rem; }
.tool-group a:hover .tool-name { color: var(--pine); }
.tool-group a:focus-visible { outline: 3px solid var(--pine); outline-offset: 2px; }

.tool-group a[aria-current="page"] {
  border-color: var(--pine);
  background: var(--pine-soft);
}
.tool-group a[aria-current="page"] .tool-name { color: var(--pine); }

.tool-group .tool-icon {
  flex: none;
  box-sizing: content-box;
  width: 1.45rem;
  height: 1.45rem;
  padding: .55rem;
  border-radius: 9px;
  color: var(--pine);
  background: var(--pine-soft);
}
.tool-text { min-width: 0; max-width: 100%; }

.tool-name {
  display: block;
  font: 700 1.12rem/1.25 var(--display);
  letter-spacing: -.01em;
}
.tool-summary {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
  color: var(--muted);
  font-size: .9rem;
  line-height: 1.4;
  margin-top: .15rem;
}
/* "In your browser": a small drawn label (see BROWSER_TAG in main.py), sized in
   rem so a browser's minimum font size can't stretch or wrap it. */
.tool-tag { display: block; margin-top: .4rem; line-height: 0; color: var(--pine); }
.tool-tag svg { height: 1.15rem; width: auto; overflow: visible; font-family: var(--body); }

.all-tools-link {
  font-weight: 700;
  color: var(--pine);
  text-underline-offset: 3px;
}

/* ---------------------------------------------------------------- showcase (home) */

.spotlight {
  padding: 1.35rem 1.25rem 1.25rem;
  border-radius: var(--radius-sheet);
  background: var(--pine-soft);
  border: 1.5px solid color-mix(in srgb, var(--pine) 35%, transparent);
}
.spotlight-kicker {
  display: inline-block;
  margin: 0 0 .6rem;
  padding: .15rem .6rem;
  border-radius: 999px;
  background: var(--highlight);
  color: #18232E;
  font: 700 .8rem/1.4 var(--body);
  letter-spacing: .03em;
  text-transform: uppercase;
  white-space: nowrap;
}
.spotlight h2, .private-box h2 { font-size: 1.35rem; line-height: 1.2; letter-spacing: -.015em; }
.spotlight > p:not(.spotlight-kicker), .private-box > p { color: var(--muted); margin: .5rem 0 1rem; font-size: .95rem; line-height: 1.5; }
.spotlight-tools { list-style: none; margin: 0; padding: 0; }
.spotlight-tools li + li { margin-top: .5rem; }
.spotlight-tools a { min-height: 4.25rem; }
.spotlight-tools .tool-summary { -webkit-line-clamp: 2; }

/* Phones: two compact tiles per row, name and icon only, so all the tools fit
   in a few screens. The summaries are still read out by screen readers. */
@media (max-width: 34rem) {
  .tool-index { gap: 1.75rem; }
  .tool-index .tool-group ul { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .55rem; }
  .tool-index .tool-group a {
    flex-direction: column;
    align-items: flex-start;
    gap: .55rem;
    min-height: 0;
    padding: .8rem .8rem .85rem;
  }
  .tool-index .tool-group a::after { display: none; }
  .tool-index .tool-name { font-size: 1rem; }
  .tool-index .tool-summary {
    position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
  }
  .tool-index .tool-tag svg { height: 1.05rem; }
  .tool-index .tool-group .tool-icon { width: 1.25rem; height: 1.25rem; padding: .45rem; }
}

.private-box {
  padding: 1.35rem 1.25rem 1.25rem;
  border-radius: var(--radius-sheet);
  border: 1.5px solid var(--line);
  background: var(--surface);
}
.chip-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .4rem; }
.chip-list a {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .3rem .65rem .3rem .45rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--ink);
  text-decoration: none;
  font-size: .88rem;
  font-weight: 700;
  white-space: nowrap;
}
.chip-list a:hover { border-color: var(--pine); color: var(--pine); }
.chip-list .tool-icon { width: 1rem; height: 1rem; color: var(--pine); }

.lang-switch { margin: .6rem 0 0; font-size: .95rem; }
.lang-switch a { color: var(--pine); font-weight: 700; text-underline-offset: 3px; }
.menu-heading small { font-size: .8em; opacity: .8; }

/* ---------------------------------------------------------------- what next / related */

.next-steps { margin-top: 1.4rem; padding-top: 1.1rem; border-top: 1px solid color-mix(in srgb, var(--pine) 25%, transparent); }
.next-title { margin: 0 0 .6rem; font: 700 1.05rem/1.3 var(--display); }
.next-steps ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(11.5rem, 1fr)); gap: .55rem; }
.next-steps li[hidden] { display: none; }
.next-steps a {
  display: flex;
  align-items: center;
  gap: .65rem;
  height: 100%;
  box-sizing: border-box;
  padding: .65rem .8rem;
  border: 1.5px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
  color: var(--ink);
  text-decoration: none;
}
.next-steps a:hover { border-color: var(--pine); }
.next-steps a:focus-visible { outline: 3px solid var(--pine); outline-offset: 2px; }
.next-steps .tool-icon { flex: none; width: 1.25rem; height: 1.25rem; padding: .4rem; border-radius: 8px; color: var(--pine); background: var(--pine-soft); box-sizing: content-box; }
.next-action { display: block; font-weight: 700; line-height: 1.3; }
.next-tool { display: block; color: var(--muted); font-size: .85rem; }
.next-steps a:hover .next-action { color: var(--pine); }

.related { margin-top: 2.5rem; padding-top: 1.75rem; border-top: 2px solid var(--ink); }
.related h2 { font-size: 1.35rem; margin-bottom: .9rem; }

@media (prefers-reduced-motion: reduce) {
  .tool-group a, .tool-group a::after { transition: none; }
  .tool-group a:hover { transform: none; }
}

/* ---------------------------------------------------------------- tool page */

.tool-layout {
  max-width: 72rem;
  margin: 0 auto;
  padding: clamp(2rem, 6vw, 4rem) 1.25rem 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 17rem;
  gap: 4rem;
  align-items: start;
}

.workspace { max-width: 42rem; }

.workspace h1 {
  font-size: clamp(2.2rem, 5.5vw, 3.5rem);
  line-height: 1.02;
  letter-spacing: -.03em;
}

.sidebar {
  grid-template-columns: 1fr;
  gap: 1.75rem;
  border-top-width: 2px;
}
.sidebar .tool-summary { display: none; }
.sidebar .tool-group a { gap: .6rem; }
.sidebar .tool-group .tool-icon { width: 1.05rem; height: 1.05rem; padding: .35rem; border-radius: 7px; }
.sidebar .tool-name { font-size: 1.05rem; }
.sidebar .tool-group a { padding: .6rem 2.25rem .6rem .85rem; min-height: 2.9rem; }
.sidebar .tool-group li + li { margin-top: .45rem; }

/* The drop zone is a sheet of paper. Its instruction is highlighted like a
   marked-up page, and the highlight sweeps across when a file hovers over it. */

.sheet {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .35rem;
  margin-top: 2rem;
  padding: 2.75rem 2rem 2rem;
  min-height: 15rem;
  background: var(--surface);
  border: 1.5px solid var(--line);
  border-radius: var(--radius-sheet);
  cursor: pointer;
}
/* Folded corner */
.sheet::after {
  content: "";
  position: absolute;
  top: -1.5px;
  right: -1.5px;
  width: calc(2.25rem + 1.5px);
  height: calc(2.25rem + 1.5px);
  background: linear-gradient(225deg, var(--paper) 50%, var(--line) 50%);
  border-bottom-left-radius: 5px;
}

.sheet-title {
  font: 700 clamp(1.6rem, 4vw, 2.1rem)/1.2 var(--display);
  letter-spacing: -.02em;
}
.sheet-title mark {
  color: inherit;
  background:
    linear-gradient(var(--highlight), var(--highlight))
    no-repeat 0 85% / 100% 55%;
  padding: 0 .15em;
  margin: 0 -.15em;
  transition: background-size .35s ease;
}
.sheet-sub { font-size: 1.1rem; }
.sheet-sub u { text-decoration-color: var(--pine); text-underline-offset: .2em; }
.sheet-meta { margin-top: auto; padding-top: 1.5rem; color: var(--muted); font-size: .9rem; }

.sheet.dragging { border-color: var(--pine); border-style: dashed; }
.sheet.dragging .sheet-title mark { background-size: 100% 95%; }

.sheet.compact { min-height: 0; padding: 1.1rem 1.5rem; flex-direction: row; align-items: baseline; gap: .75rem; flex-wrap: wrap; }
.sheet.compact .sheet-title { font-size: 1.15rem; }
.sheet.compact .sheet-meta { margin: 0; padding: 0; }
.sheet.compact::after { width: calc(1.25rem + 1.5px); height: calc(1.25rem + 1.5px); }

@media (prefers-reduced-motion: reduce) {
  .sheet-title mark { transition: none; }
}

/* ---------------------------------------------------------------- file list */

.file-list {
  list-style: none;
  margin: 1.25rem 0 0;
  padding: 0;
  counter-reset: file;
}

.file-list li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: .75rem;
  padding: .65rem 0;
  border-bottom: 1px solid var(--line);
  counter-increment: file;
}
/* Numbers only appear when order matters (merge). */
.file-list.ordered li::before {
  content: counter(file);
  font: 700 1rem/1 var(--display);
  color: var(--muted);
  min-width: 1.5ch;
  text-align: right;
}
.file-list:not(.ordered) li { grid-template-columns: minmax(0, 1fr) auto; }

.file-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 700; }
.file-size { color: var(--muted); font-weight: 400; margin-left: .5rem; }

.file-actions { display: flex; gap: .25rem; }
.icon-button {
  width: 2.25rem;
  height: 2.25rem;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: var(--radius-control);
  background: var(--surface);
  color: var(--ink);
  font-size: 1rem;
  cursor: pointer;
}
.icon-button:hover:not(:disabled) { border-color: var(--ink); }
.icon-button:disabled { opacity: .35; cursor: default; }

/* ---------------------------------------------------------------- options */

.options:empty { display: none; }
.options { margin-top: 1.75rem; display: grid; gap: 1.5rem; }

fieldset { border: 0; margin: 0; padding: 0; }
legend, .field-label {
  display: block;
  font: 700 1.05rem/1.3 var(--display);
  margin-bottom: .6rem;
  padding: 0;
}

.choices { display: grid; grid-template-columns: repeat(auto-fit, minmax(10.5rem, 1fr)); gap: .6rem; }

.choice { position: relative; }
.choice input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.choice span {
  display: block;
  height: 100%;
  padding: .75rem .9rem;
  border: 1.5px solid var(--line);
  border-radius: var(--radius-control);
  background: var(--surface);
}
.choice strong { display: block; }
.choice small { display: block; color: var(--muted); font-size: .88rem; line-height: 1.35; margin-top: .15rem; }
.choice input:checked + span { border-color: var(--pine); background: var(--pine-soft); box-shadow: inset 0 0 0 1px var(--pine); }
.choice input:focus-visible + span { outline: 3px solid var(--pine); outline-offset: 2px; }

.text-input {
  width: 100%;
  max-width: 24rem;
  font: inherit;
  padding: .65rem .8rem;
  border: 1.5px solid var(--line);
  border-radius: var(--radius-control);
  background: var(--surface);
  color: var(--ink);
}
.text-input:focus { outline: 3px solid var(--pine); outline-offset: 1px; border-color: var(--pine); }
.field-help { color: var(--muted); font-size: .9rem; margin: .4rem 0 0; }

/* ---------------------------------------------------------------- actions */

.actions { margin-top: 2rem; display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }

.primary, .secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 3.25rem;
  padding: 0 1.75rem;
  border-radius: var(--radius-control);
  font: 700 1.1rem/1 var(--body);
  text-decoration: none;
  cursor: pointer;
}
.primary { background: var(--pine); color: var(--pine-ink); border: 0; }
.primary:hover:not(:disabled) { filter: brightness(1.08); }
.primary:disabled { opacity: .4; cursor: default; }
.secondary { background: transparent; color: var(--ink); border: 1.5px solid var(--line); }
.secondary:hover { border-color: var(--ink); }

.status { margin: 0; color: var(--muted); }
.status.error {
  color: var(--error);
  background: var(--error-soft);
  padding: .6rem .85rem;
  border-radius: var(--radius-control);
  flex-basis: 100%;
}

.busy .primary { position: relative; color: transparent; }
.busy .primary::after {
  content: "";
  position: absolute;
  width: 1.2rem;
  height: 1.2rem;
  border: 2.5px solid var(--pine-ink);
  border-right-color: transparent;
  border-radius: 50%;
  animation: spin .8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------------------------------------------------------------- result */

.result {
  margin-top: 2rem;
  padding: 1.5rem 1.75rem;
  border-left: 4px solid var(--pine);
  background: var(--pine-soft);
  border-radius: 0 var(--radius-control) var(--radius-control) 0;
}
.result-title { font: 700 1.5rem/1.2 var(--display); margin: 0; }
.result-detail { margin: .35rem 0 0; color: var(--muted); }
.result-actions { display: flex; gap: .75rem; flex-wrap: wrap; margin-top: 1.25rem; }

/* ---------------------------------------------------------------- footer */

.site-footer {
  max-width: 72rem;
  margin: 5rem auto 0;
  padding: 1.5rem 1.25rem 2.5rem;
  color: var(--muted);
  font-size: .92rem;
}
.site-footer p { max-width: 40rem; margin: 0; }

/* ---------------------------------------------------------------- small screens */

@media (max-width: 52rem) {
  .tool-layout { grid-template-columns: 1fr; gap: 3rem; }
  .sheet { padding: 2rem 1.25rem 1.5rem; min-height: 12rem; }
}

/* In dark mode the highlighter covers the whole line, so the dark text on it stays readable. */
@media (prefers-color-scheme: dark) {
  .sheet-title mark { color: #18232E; background-size: 100% 100%; }
}

/* ---------------------------------------------------------------- legal + contact pages */

.prose-page {
  max-width: 42rem;
  margin: 0 auto;
  padding: clamp(2rem, 6vw, 4rem) 1.25rem 0;
}
.prose-page h1 {
  font-size: clamp(2.2rem, 5.5vw, 3.25rem);
  line-height: 1.05;
  letter-spacing: -.03em;
}
.prose-page h2 { font-size: 1.35rem; margin: 2.25rem 0 .5rem; letter-spacing: -.01em; }
.prose-page p, .prose-page li { max-width: 38rem; }
.prose-page ul { padding-left: 1.25rem; }
.prose-page li { margin-bottom: .6rem; }
.updated { color: var(--muted); margin-top: .5rem; }

/* ---------------------------------------------------------------- footer links + ads */

.footer-links { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; margin-top: 1rem; }
.footer-links a { color: var(--muted); }
.footer-links a:hover { color: var(--ink); }

.sidebar-column { display: grid; gap: 2rem; align-content: start; }

/* Space is reserved so the page doesn't jump when an ad loads. */
.ad { margin-top: 2.5rem; min-height: 100px; }
.ad-sidebar { margin-top: 0; min-height: 250px; }
@media (max-width: 52rem) { .ad-sidebar { display: none; } }

/* ---------------------------------------------------------------- how-to and questions under each tool */

.guide {
  margin-top: 4.5rem;
  padding-top: 2rem;
  border-top: 2px solid var(--ink);
}
.guide h2 {
  font-size: 1.6rem;
  letter-spacing: -.02em;
  margin: 0 0 1.25rem;
}
.guide h2 + .steps { margin-top: 0; }
.guide .steps + h2 { margin-top: 3rem; }

/* The steps really are a sequence, so they get big numbers. */
.steps {
  list-style: none;
  counter-reset: step;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1rem;
}
.steps li {
  counter-increment: step;
  display: grid;
  grid-template-columns: 2.25rem minmax(0, 1fr);
  gap: .75rem;
  align-items: baseline;
}
.steps li::before {
  content: counter(step);
  font: 700 1.5rem/1 var(--display);
  color: var(--pine);
}

.faq { display: grid; gap: 1.5rem; }
.faq-item h3 {
  font: 700 1.1rem/1.35 var(--display);
  margin: 0 0 .3rem;
}
.faq-item p { margin: 0; color: var(--muted); }

/* ---------------------------------------------------------------- PDF editor */

.editor { margin-top: 1.5rem; }

/* Edit PDF page layout. Before a PDF is opened it looks like every tool page:
   heading and drop zone on the left, the tool list on the right, the guide
   below. Once a PDF is open, the editor (toolbar and pages) takes the full
   width under both, so the document is as large and legible as possible. */
.editor-layout { row-gap: 0; }
.editor-layout > .workspace { grid-column: 1; grid-row: 1; }
.editor-layout > .sidebar-column { grid-column: 2; grid-row: 1 / span 3; }
.editor-layout > .editor { grid-column: 1 / -1; grid-row: 2; margin-top: 2.5rem; }
.editor-layout > .editor-after { grid-column: 1; grid-row: 3; max-width: 42rem; }
.editor-layout.is-editing > .sidebar-column { grid-row: 1; }
.editor-layout.is-editing { row-gap: 0; }
@media (max-width: 52rem) {
  /* One column: drop zone, editor, guide, and the tool list last. */
  .editor-layout > .workspace, .editor-layout > .sidebar-column,
  .editor-layout > .editor, .editor-layout > .editor-after { grid-column: 1; grid-row: auto; }
  .editor-layout > .sidebar-column,
  .editor-layout.is-editing > .sidebar-column { order: 4; grid-row: auto; }
  .editor-layout > .editor { margin-top: 1.5rem; }
}

/* The toolbar stays in view while scrolling through the pages: a row of tools,
   each an icon with its name underneath, and a slim settings row below that
   shows only what the current tool uses. */
.editor-bar {
  position: sticky;
  top: .5rem;
  z-index: 5;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .06), 0 10px 28px -16px rgba(0, 0, 0, .35);
}
.editor-row {
  display: flex;
  align-items: center;
  gap: .25rem;
  padding: .45rem .5rem;
}
.editor-tools, .editor-actions { display: flex; gap: .15rem; }
.editor-divider { width: 1px; align-self: stretch; margin: .35rem .4rem; background: var(--line); }

.tool-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .28rem;
  min-width: 3.9rem;
  padding: .5rem .35rem .45rem;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--ink);
  font: 600 .72rem/1 var(--body);
  letter-spacing: .01em;
  cursor: pointer;
  transition: background-color .12s ease, color .12s ease;
}
.tool-btn svg {
  width: 1.45rem;
  height: 1.45rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
}
.tool-btn svg .ink { stroke: var(--highlight); stroke-width: 2.6; }
.tool-btn:hover:not(:disabled) { background: var(--pine-soft); color: var(--pine); }
.tool-btn:focus-visible { outline: 2px solid var(--pine); outline-offset: 1px; }
.tool-btn:disabled { opacity: .35; cursor: default; }
.tool-btn[aria-pressed="true"] { background: var(--pine-soft); color: var(--pine); box-shadow: inset 0 0 0 1.5px var(--pine); }

/* Zoom: − 125% + with its name underneath, like the tool buttons. */
.zoom {
  margin-left: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .28rem;
  padding: .35rem .3rem .45rem;
}
.zoom-controls {
  display: flex;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
}
.zoom-btn, .zoom-level {
  border: 0;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  height: 1.75rem;
}
.zoom-btn { width: 1.8rem; display: grid; place-items: center; border-radius: 7px; }
.zoom-btn svg { width: 1rem; height: 1rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.zoom-level {
  min-width: 3.4rem;
  font: 700 .78rem/1 var(--body);
  font-variant-numeric: tabular-nums;
  border-inline: 1px solid var(--line);
}
.zoom-btn:hover:not(:disabled), .zoom-level:hover { background: var(--pine-soft); color: var(--pine); }
.zoom-btn:disabled { opacity: .35; cursor: default; }
.zoom-level[aria-pressed="true"] { color: var(--pine); }
.zoom-label { font: 600 .72rem/1 var(--body); color: var(--ink); }

.save-btn {
  margin-left: .5rem;
  gap: .5rem;
  min-height: 2.75rem;
  padding: 0 1.15rem 0 .95rem;
  font-size: 1rem;
  border-radius: 10px;
}
.save-btn svg { width: 1.25rem; height: 1.25rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

.editor-settings {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .4rem 1.1rem;
  padding: .5rem .9rem;
  border-top: 1px solid var(--line);
  background: color-mix(in srgb, var(--paper) 60%, var(--surface));
  border-radius: 0 0 14px 14px;
}
/* Nothing to set for this tool: no settings row at all. */
.editor-settings:not(:has(.setting:not([hidden]))) { display: none; }

.setting { display: inline-flex; align-items: center; gap: .45rem; font: 600 .8rem/1 var(--body); color: var(--muted); }
.setting[hidden] { display: none; }
.setting select {
  font: 600 .85rem/1 var(--body);
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: .35rem .45rem;
}
.setting input[type="color"] {
  width: 1.9rem;
  height: 1.9rem;
  padding: 2px;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--surface);
  cursor: pointer;
}
.setting input[type="color"]::-webkit-color-swatch-wrapper { padding: 0; }
.setting input[type="color"]::-webkit-color-swatch { border: 0; border-radius: 50%; }
.setting input[type="color"]::-moz-color-swatch { border: 0; border-radius: 50%; }

/* Narrow screens: the tools scroll sideways, Save stays in reach. */
.editor-workspace, .editor, .editor-bar, .editor-row, .editor-tools { min-width: 0; }
.tool-btn { white-space: nowrap; }
@media (max-width: 52rem) {
  .tool-layout { grid-template-columns: minmax(0, 1fr); }
  .editor-row { flex-wrap: wrap; }
  .editor-tools { overflow-x: auto; flex: 1 1 100%; scrollbar-width: none; }
  .editor-tools::-webkit-scrollbar { display: none; }
  .editor-divider { display: none; }
  .tool-btn { min-width: 3.5rem; }
  .zoom { margin-left: 0; padding-inline: .1rem; }
  .zoom-level { min-width: 2.9rem; }
  .editor-row { row-gap: .1rem; }
  .editor-actions .tool-btn { min-width: 3rem; padding-inline: .2rem; }
  .save-btn { margin-left: auto; min-height: 2.5rem; padding: 0 .8rem 0 .65rem; font-size: .92rem; gap: .35rem; }
}

.editor-hint { color: var(--muted); font-size: .92rem; margin: .75rem 0 1rem; min-height: 1.4em; }

/* The document viewer: its own scrolling window filling the screen under the
   toolbar, with both scrollbars always in reach. Pages are centred; zoomed in
   past the width, they scroll sideways. Touch gestures are handled by the
   editor (one finger draws, two fingers move and zoom). */
.viewer { position: relative; }
.pages {
  position: relative;
  height: max(22rem, calc(100dvh - var(--bar-h, 8rem) - 2.25rem));
  overflow: auto;
  overscroll-behavior: contain;
  touch-action: none;
  padding: 1rem 0 4rem;
  background: color-mix(in srgb, var(--paper) 70%, var(--line));
  border: 1px solid var(--line);
  border-radius: 12px;
  scrollbar-gutter: stable;
}
.editor[data-tool="hand"] .pages, .editor[data-tool="hand"] .layer,
.editor.space-pan .pages, .editor.space-pan .layer { cursor: grab; }
.editor.panning .pages, .editor.panning .layer { cursor: grabbing; }

/* Floating page navigation at the bottom of the viewer: < [3] of 12 > */
.page-nav {
  position: absolute;
  left: 50%;
  bottom: 1rem;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: .35rem;
  padding: .3rem .4rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 999px;
  box-shadow: 0 6px 20px -8px rgba(0, 0, 0, .35);
  font: 600 .85rem/1 var(--body);
  color: var(--muted);
}
.page-nav[hidden] { display: none; }
.page-nav button {
  width: 2rem;
  height: 2rem;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
}
.page-nav button:hover:not(:disabled) { background: var(--pine-soft); color: var(--pine); }
.page-nav button:disabled { opacity: .3; cursor: default; }
.page-nav svg { width: 1.1rem; height: 1.1rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.page-nav input {
  width: 2.6rem;
  text-align: center;
  font: 700 .9rem/1 var(--body);
  font-variant-numeric: tabular-nums;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: .3rem .2rem;
}
.page-nav input:focus { outline: 2px solid var(--pine); outline-offset: 1px; }
.page-total { padding-right: .2rem; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.page {
  margin: 0 auto 1.25rem;
  position: relative;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .18), 0 8px 24px -14px rgba(0, 0, 0, .4);
}
.page canvas { display: block; }
.layer { position: absolute; inset: 0; overflow: hidden; }
.editor[data-tool="text"] .layer { cursor: text; }
.editor[data-tool="whiteout"] .layer, .editor[data-tool="highlight"] .layer,
.editor[data-tool="rect"] .layer, .editor[data-tool="draw"] .layer, .editor[data-tool="image"] .layer { cursor: crosshair; }
/* While drawing, a finger draws instead of scrolling the page. */
.editor[data-tool="draw"] .layer, .editor[data-tool="rect"] .layer,
.editor[data-tool="whiteout"] .layer, .editor[data-tool="highlight"] .layer { touch-action: none; }

.item { position: absolute; box-sizing: border-box; touch-action: none; }
.editor[data-tool="select"] .item { cursor: move; }
.item-text { white-space: pre; line-height: 1.2; padding: 0; user-select: none; }
.item-whiteout { background: #fff; }
.item-highlight { opacity: .4; mix-blend-mode: multiply; }
.item-draw { overflow: visible; }
.item-image { user-select: none; }
.item.selected { outline: 2px solid var(--pine); outline-offset: 2px; }
.item-whiteout.selected { outline-style: dashed; }
.handle {
  position: absolute;
  right: -7px;
  bottom: -7px;
  width: 12px;
  height: 12px;
  background: var(--pine);
  border: 2px solid #fff;
  border-radius: 50%;
  cursor: nwse-resize;
}

.text-editor {
  position: absolute;
  min-width: 2ch;
  white-space: pre;
  line-height: 1.2;
  outline: 2px dashed var(--pine);
  outline-offset: 2px;
  background: rgba(255, 255, 255, .6);
  cursor: text;
}



/* A long list of files (big batches) scrolls inside its own box. */
.file-list.long { max-height: 24rem; overflow-y: auto; padding-right: .25rem; }

/* ---------------------------------------------------------------- rotate PDF */

.rotator { margin-top: 1.5rem; }
.rotator-bar { display: flex; align-items: center; justify-content: space-between; gap: .75rem 1rem; flex-wrap: wrap; }
.rotator-file { margin: 0; font-weight: 700; min-width: 0; overflow-wrap: anywhere; }
.rotator-all { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.rotator-all .secondary { display: inline-flex; align-items: center; gap: .4rem; padding: .5rem .85rem; font-size: .95rem; }
.rotator-all svg, .thumb-turn svg {
  width: 1.1rem; height: 1.1rem; fill: none; stroke: currentColor;
  stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round;
}
.link-button {
  background: none; border: 0; padding: .5rem .4rem; font: inherit; font-size: .95rem;
  color: var(--pine); text-decoration: underline; text-underline-offset: 3px; cursor: pointer;
}
.link-button:disabled { color: var(--muted); opacity: .5; text-decoration: none; cursor: default; }
.rotator-hint { margin: .5rem 0 0; color: var(--muted); font-size: .92rem; }

.thumbs {
  list-style: none; margin: 1rem 0 0; padding: 1rem;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr)); gap: 1rem;
  background: color-mix(in srgb, var(--line) 35%, var(--paper));
  border: 1px solid var(--line); border-radius: var(--radius-sheet);
  max-height: 34rem; overflow-y: auto; overscroll-behavior: contain;
}
.thumb { display: flex; flex-direction: column; gap: .4rem; min-width: 0; }
.thumb-page {
  display: block; width: 100%; padding: 0; border: 0; background: none; cursor: pointer;
  border-radius: var(--radius-control);
}
.thumb-frame {
  position: relative; display: block; aspect-ratio: 1; border-radius: var(--radius-control);
  border: 2px solid transparent; transition: border-color .15s, background-color .15s;
}
.thumb-page:hover .thumb-frame { background: color-mix(in srgb, var(--surface) 70%, transparent); }
.thumb-page:focus-visible { outline: none; }
.thumb-page:focus-visible .thumb-frame { border-color: var(--ink); }
.turned .thumb-frame { border-color: var(--pine); background: var(--pine-soft); }
.thumb-sheet {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.18), 0 0 0 1px rgba(0,0,0,.06);
  transition: transform .28s cubic-bezier(.3,.7,.3,1); overflow: hidden;
}
.thumb-sheet canvas { display: block; width: 100%; height: 100%; }
.thumb-foot { display: flex; align-items: center; justify-content: space-between; gap: .25rem; }
.thumb-label { font-size: .88rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.turned .thumb-label { color: var(--pine); font-weight: 700; }
.thumb-turn {
  display: grid; place-items: center; width: 2rem; height: 2rem; padding: 0;
  border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--ink); cursor: pointer;
}
.thumb-turn:hover { border-color: var(--ink); }
@media (prefers-reduced-motion: reduce) { .thumb-sheet { transition: none; } }
@media (max-width: 40rem) {
  .thumbs { grid-template-columns: repeat(auto-fill, minmax(7rem, 1fr)); padding: .75rem; gap: .75rem; max-height: 28rem; }
}

/* Edit PDF: the one-time "how to move around" tip after the first zoom in */
.zoom-tip {
  position: absolute; left: 50%; top: 1rem; z-index: 5; margin: 0;
  max-width: calc(100% - 2rem); padding: .6rem 1rem;
  background: var(--ink); color: var(--paper); border-radius: 999px;
  font: 600 .9rem/1.3 var(--body); text-align: center; cursor: pointer;
  box-shadow: 0 8px 24px -10px rgba(0, 0, 0, .5);
  opacity: 0; transform: translate(-50%, -.5rem); transition: opacity .35s, transform .35s;
}
.zoom-tip.show { opacity: 1; transform: translate(-50%, 0); }
.zoom-tip[hidden] { display: none; }
@media (prefers-reduced-motion: reduce) { .zoom-tip { transition: none; } }

/* A password box with its Show button beside it (Unlock PDF) */
.secret-row { display: flex; gap: .5rem; max-width: 24rem; }
.secret-row .text-input { flex: 1; min-width: 0; }
.secret-row .reveal { min-height: 0; padding: 0 1rem; font-size: .95rem; }

/* ---------------------------------------------------------------- organize pages */

.organizer .thumbs { user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.organizer .thumb { position: relative; }
.organizer .thumb-page { touch-action: manipulation; }
.organizer .thumb-foot { gap: .15rem; }
.organizer .thumb-turn { width: 1.85rem; height: 1.85rem; }
.organizer .thumb-turn:disabled { opacity: .35; cursor: default; }
.organizer .thumb-turn:disabled:hover { border-color: var(--line); }
.organizer .thumb-turn svg {
  width: 1rem; height: 1rem; fill: none; stroke: currentColor;
  stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round;
}
.thumb-delete:hover:not(:disabled) { color: var(--error); border-color: var(--error); }
.organizer .rotator-all svg { width: 1.05rem; height: 1.05rem; }

/* Moved pages: the number turns pine. Selected pages: pine frame and a tick. */
.moved .thumb-label { color: var(--pine); font-weight: 700; }
.thumb-check {
  position: absolute; top: .35rem; right: .35rem; display: grid; place-items: center;
  width: 1.5rem; height: 1.5rem; border-radius: 999px;
  background: var(--surface); border: 1.5px solid var(--line); color: transparent;
  opacity: 0; transition: opacity .15s;
}
.thumb-check svg { width: .95rem; height: .95rem; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.thumb-page:hover .thumb-check, .thumb-page:focus-visible .thumb-check { opacity: 1; }
.selected .thumb-frame { border-color: var(--pine); background: var(--pine-soft); }
.selected .thumb-check { opacity: 1; background: var(--pine); border-color: var(--pine); color: var(--pine-ink); }

/* Dragging: the lifted pages fade, a line shows where they'll land. */
.dragging-pages, .dragging-pages * { cursor: grabbing !important; }
.lifted { opacity: .35; }
.drop-before::before, .drop-after::after {
  content: ""; position: absolute; top: 4%; bottom: 18%; width: 4px; border-radius: 4px;
  background: var(--pine); pointer-events: none;
}
.drop-before::before { left: -.6rem; }
.drop-after::after { right: -.6rem; }
@media (max-width: 40rem) {
  .drop-before::before { left: -.5rem; }
  .drop-after::after { right: -.5rem; }
}
.drag-ghost {
  position: fixed; left: 0; top: 0; z-index: 50; pointer-events: none;
  border-radius: var(--radius-control); background: color-mix(in srgb, var(--surface) 85%, transparent);
  box-shadow: 0 14px 32px -12px rgba(0, 0, 0, .45); outline: 2px solid var(--pine);
}
.drag-count {
  position: absolute; top: -.6rem; right: -.6rem; min-width: 1.7rem; height: 1.7rem; padding: 0 .4rem;
  display: grid; place-items: center; border-radius: 999px;
  background: var(--pine); color: var(--pine-ink); font: 700 .9rem/1 var(--body);
}

.organizer-count { margin: .6rem 0 0; color: var(--muted); font-size: .92rem; font-variant-numeric: tabular-nums; }
.actions .secondary[hidden] { display: none; }

/* A spinner on the one button that's working (Organize pages has two). */
.working { position: relative; color: transparent !important; }
.working svg { visibility: hidden; }
.working::after {
  content: ""; position: absolute; width: 1.2rem; height: 1.2rem;
  border: 2.5px solid var(--pine-ink); border-right-color: transparent; border-radius: 50%;
  animation: spin .8s linear infinite;
}
.secondary.working::after { border-color: var(--ink); border-right-color: transparent; }
.organizer .rotator-all .secondary { min-height: 2.5rem; }
.organizer .thumbs button { -webkit-tap-highlight-color: transparent; }
.hint-touch { display: none; }
@media (hover: none) and (pointer: coarse) {
  .hint-mouse { display: none; }
  .hint-touch { display: inline; }
}

/* Edit PDF: page numbers preview, drawn over each page in its own units */
.page-number { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.page-number text { font-family: Arial, "Liberation Sans", Helvetica, sans-serif; fill: #3b4550; }
.setting input[type="number"] {
  width: 4.5rem; font: 600 .85rem/1 var(--body); color: var(--ink); background: var(--surface);
  border: 1px solid var(--line); border-radius: 7px; padding: .35rem .45rem;
}
.setting input[type="checkbox"] { width: 1rem; height: 1rem; accent-color: var(--pine); margin: 0; }

/* ---------------------------------------------------------------- redact + signature */

.item-redact { background: #000; }
.item-redact.selected { outline-color: var(--pine); outline-style: dashed; }
.tool-btn svg .ink-fill { fill: currentColor; stroke: none; }

.sig-backdrop {
  position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 1rem;
  background: rgba(10, 16, 20, .55);
}
.sig-backdrop[hidden] { display: none; }
.sig-dialog {
  width: min(34rem, 100%); max-height: calc(100vh - 2rem); overflow: auto;
  background: var(--surface); color: var(--ink); border-radius: var(--radius-sheet);
  padding: 1.4rem 1.5rem 1.25rem; box-shadow: 0 24px 60px -20px rgba(0, 0, 0, .55);
}
.sig-dialog h2 { font-size: 1.4rem; letter-spacing: -.01em; }
.sig-tabs { display: flex; gap: .25rem; margin: 1rem 0 .9rem; border-bottom: 1px solid var(--line); }
.sig-tabs button {
  background: none; border: 0; border-bottom: 2.5px solid transparent; margin-bottom: -1px;
  padding: .55rem .9rem; font: 700 .98rem/1 var(--body); color: var(--muted); cursor: pointer;
}
.sig-tabs button[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--pine); }
.sig-pad {
  display: block; width: 100%; height: 11rem; touch-action: none; cursor: crosshair;
  background: #fff; border: 1.5px dashed var(--line); border-radius: var(--radius-control);
}
.sig-row { display: flex; justify-content: space-between; align-items: center; gap: .5rem; margin-top: .35rem; }
.sig-note { color: var(--muted); font-size: .88rem; }
.sig-panel .text-input { max-width: none; }
.sig-typed {
  min-height: 6.5rem; margin-top: .75rem; padding: .5rem 1rem; display: flex; align-items: center;
  background: #fff; border: 1.5px dashed var(--line); border-radius: var(--radius-control);
  font: 400 2.6rem/1.2 "Dancing Script", cursive; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
}
.sig-preview { margin-top: .75rem; min-height: 4rem; background: #fff; border-radius: var(--radius-control); display: grid; place-items: center; }
.sig-preview img { max-width: 100%; max-height: 9rem; }
.sig-ink { display: flex; align-items: center; gap: .6rem; margin-top: 1rem; }
.sig-ink-label { font: 600 .85rem/1 var(--body); color: var(--muted); }
.sig-swatch {
  width: 1.75rem; height: 1.75rem; border-radius: 50%; border: 2px solid var(--surface);
  box-shadow: 0 0 0 1.5px var(--line); cursor: pointer; padding: 0;
}
.sig-swatch[aria-checked="true"] { box-shadow: 0 0 0 2.5px var(--pine); }
.sig-actions { display: flex; justify-content: flex-end; gap: .6rem; margin-top: 1.25rem; flex-wrap: wrap; }
.sig-actions .primary, .sig-actions .secondary { min-height: 2.9rem; padding: 0 1.3rem; font-size: 1rem; }
@media (max-width: 30rem) { .sig-dialog { padding: 1.1rem 1rem 1rem; } .sig-pad { height: 9.5rem; } }
.tool-btn[hidden] { display: none; }

/* ---------------------------------------------------------------- e-invoice validator */

.sheet.checking { opacity: .6; pointer-events: none; }
.report { margin-top: 1.5rem; }
.verdict {
  display: flex; gap: 1rem; align-items: center; padding: 1.25rem 1.4rem;
  border-radius: var(--radius-sheet); border: 1.5px solid var(--line); background: var(--surface);
}
.verdict-icon { flex: none; width: 2.6rem; height: 2.6rem; border-radius: 50%; display: grid; place-items: center; font: 800 1.4rem/1 var(--body); }
.verdict-ok { border-color: var(--pine); background: var(--pine-soft); }
.verdict-ok .verdict-icon { background: var(--pine); color: var(--pine-ink); }
.verdict-ok .verdict-icon::before { content: "\2713"; }
.verdict-bad { border-color: var(--error); background: var(--error-soft); }
.verdict-bad .verdict-icon { background: var(--error); color: #fff; }
.verdict-bad .verdict-icon::before { content: "!"; }
.verdict-warn { border-color: #B7791F; background: color-mix(in srgb, #F3DA4E 22%, var(--surface)); }
.verdict-warn .verdict-icon { background: #B7791F; color: #fff; }
.verdict-warn .verdict-icon::before { content: "!"; }
.verdict-title { font-size: 1.45rem; letter-spacing: -.01em; outline: none; }
.verdict-format { margin: .2rem 0 0; color: var(--muted); overflow-wrap: anywhere; }
.facts { display: grid; grid-template-columns: max-content 1fr; gap: .35rem 1.25rem; margin: 1.1rem 0 0; padding: 0 .2rem; }
.facts dt { color: var(--muted); font-size: .95rem; }
.facts dd { margin: 0; font-weight: 700; overflow-wrap: anywhere; }
.verdict-germany { margin: 1rem 0 0; padding: .8rem 1rem; border-left: 3px solid var(--line); background: var(--surface); border-radius: 0 var(--radius-control) var(--radius-control) 0; }
.report-note { margin: .75rem 0 0; color: var(--muted); font-size: .95rem; }
.report-heading { font: 700 1.15rem/1.3 var(--display); margin: 1.6rem 0 .6rem; }
.findings { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.finding { padding: .8rem 1rem; border: 1px solid var(--line); border-left: 4px solid var(--error); border-radius: var(--radius-control); background: var(--surface); }
.finding-warning { border-left-color: #B7791F; }
.finding p { margin: 0; }
.finding-head { font-weight: 700; overflow-wrap: anywhere; }
.finding-rule { font: 700 .82rem/1 ui-monospace, "Cascadia Mono", Menlo, monospace; padding: .2rem .4rem; border-radius: 5px; background: var(--paper); border: 1px solid var(--line); white-space: nowrap; }
.finding-help { margin-top: .4rem !important; color: var(--ink); }
.finding-where { margin-top: .35rem !important; color: var(--muted); font-size: .88rem; overflow-wrap: anywhere; }
.report-more { margin-top: 1.25rem; }
.report-more summary { cursor: pointer; font-weight: 700; padding: .4rem 0; }
.report-more .findings { margin-top: .5rem; }
.report-checked { margin: 1.25rem 0 0; color: var(--muted); font-size: .88rem; }
.report .result-actions { margin-top: 1.25rem; align-items: center; }
.report .result-actions .secondary { min-height: 2.9rem; padding: 0 1.2rem; font-size: 1rem; }
@media (prefers-color-scheme: dark) {
  .verdict-warn { border-color: #E3A93B; background: color-mix(in srgb, #E3A93B 14%, var(--surface)); }
}

/* ---------------------------------------------------------------- e-invoice viewer */

.viewer-out { margin-top: 1.5rem; }
.viewer-bar { display: flex; flex-wrap: wrap; gap: .75rem 1rem; align-items: center; justify-content: space-between; margin-bottom: 1rem; }
.viewer-kind { margin: 0; color: var(--muted); font-size: .92rem; overflow-wrap: anywhere; min-width: 0; }
.viewer-actions { display: flex; flex-wrap: wrap; gap: .5rem; }
.viewer-actions .primary, .viewer-actions .secondary { min-height: 2.75rem; padding: 0 1.1rem; font-size: .98rem; gap: .45rem; }
.viewer-actions svg { width: 1.15rem; height: 1.15rem; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linejoin: round; }
.viewer-out > .link-button { margin-top: 1rem; }

/* The invoice itself is always dark text on white, like paper, in either theme. */
.invoice-sheet {
  background: #fff; color: #1d2530; border-radius: var(--radius-sheet); padding: clamp(1.1rem, 4vw, 2.6rem);
  box-shadow: 0 1px 3px rgba(0, 0, 0, .12), 0 12px 32px -18px rgba(0, 0, 0, .35); font-size: .95rem; line-height: 1.45;
}
.invoice-sheet h2 { font: 800 1.9rem/1.1 var(--display); letter-spacing: -.02em; margin: 0 0 .9rem; color: #1d2530; }
.inv-label { font: 700 .74rem/1 var(--body); text-transform: uppercase; letter-spacing: .08em; color: #6a7682; margin: 0 0 .5rem; }
.inv-meta { display: grid; grid-template-columns: max-content 1fr; gap: .2rem 1.2rem; margin: 0; }
.inv-meta dt, .inv-small dt { color: #6a7682; }
.inv-meta dd, .inv-small dd { margin: 0; font-weight: 700; overflow-wrap: anywhere; }
.inv-parties { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: 1.4rem; margin: 1.8rem 0; }
.inv-party p { margin: 0; overflow-wrap: anywhere; }
.inv-party-name { font-weight: 700; }
.inv-small { display: grid; grid-template-columns: max-content 1fr; gap: .1rem .8rem; margin: .55rem 0 0; font-size: .88rem; }
.inv-lines-wrap { overflow-x: auto; margin: 0 -.25rem; }
.inv-lines { width: 100%; border-collapse: collapse; min-width: 34rem; }
.inv-lines th { font: 700 .74rem/1.2 var(--body); text-transform: uppercase; letter-spacing: .06em; color: #6a7682; text-align: left; padding: .55rem .4rem; border-bottom: 2px solid #1d2530; }
.inv-lines td { padding: .6rem .4rem; border-bottom: 1px solid #e3e8e4; vertical-align: top; }
.inv-lines .num, .inv-vat .num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.inv-id { color: #6a7682; width: 2rem; }
.inv-sub { display: block; color: #6a7682; font-size: .85rem; margin-top: .15rem; overflow-wrap: anywhere; }
.inv-bottom { display: grid; grid-template-columns: 1fr minmax(15rem, 20rem); gap: 1.5rem; margin-top: 1.4rem; align-items: start; }
.inv-vat { border-collapse: collapse; font-size: .88rem; width: 100%; }
.inv-vat caption { text-align: left; font: 700 .74rem/1 var(--body); text-transform: uppercase; letter-spacing: .08em; color: #6a7682; padding-bottom: .4rem; }
.inv-vat th { text-align: left; color: #6a7682; font-weight: 600; padding: .25rem .3rem; border-bottom: 1px solid #e3e8e4; }
.inv-vat td { padding: .3rem; border-bottom: 1px solid #f0f2f0; vertical-align: top; }
.inv-sum { display: grid; grid-template-columns: 1fr auto; gap: .3rem 1rem; margin: 0; font-variant-numeric: tabular-nums; }
.inv-sum dt { color: #4a5560; }
.inv-sum dd { margin: 0; text-align: right; }
.inv-sum .inv-due { font: 800 1.15rem/1.3 var(--display); color: #1d2530; padding-top: .5rem; border-top: 2px solid #1d2530; margin-top: .3rem; }
.inv-foot { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: 1.4rem; margin-top: 2rem; padding-top: 1.2rem; border-top: 1px solid #e3e8e4; }
.inv-terms, .inv-note { margin: .5rem 0 0; white-space: pre-line; overflow-wrap: anywhere; }
.viewer-files { margin-top: 1.4rem; }
.viewer-files h2 { font-size: 1.2rem; margin-bottom: .5rem; }
.viewer-files ul { margin: 0; padding-left: 1.2rem; }
.viewer-files li { margin-bottom: .4rem; }
@media (max-width: 40rem) {
  .inv-bottom { grid-template-columns: 1fr; }
  .invoice-sheet h2 { font-size: 1.5rem; }
}

/* Print or save as PDF: just the invoice, nothing of the website around it. */
@media print {
  body { background: #fff !important; }
  body * { visibility: hidden !important; }
  #invoice, #invoice * { visibility: visible !important; }
  #invoice { position: absolute; left: 0; top: 0; width: 100%; box-shadow: none; border-radius: 0; padding: 0; }
  .inv-lines-wrap { overflow: visible; }
  .inv-lines { min-width: 0; }
  .inv-lines tr, .inv-bottom, .inv-foot section { break-inside: avoid; }
  @page { margin: 16mm 14mm; }
}
.inv-lines.long-ids th:first-child, .inv-lines.long-ids td:first-child { display: none; }

/* ---------------------------------------------------------------- create invoice */

.invoice-layout .workspace { max-width: 48rem; }
.inv-form { display: grid; gap: 1.25rem; margin-top: 1.75rem; }
.inv-card {
  border: 1.5px solid var(--line);
  border-radius: var(--radius-sheet);
  background: var(--surface);
  padding: 1.1rem 1.25rem 1.25rem;
  min-width: 0;
}
.inv-card legend { float: left; width: 100%; margin-bottom: .85rem; }
.inv-card > :not(legend) { clear: both; }
.inv-modes { grid-template-columns: repeat(auto-fit, minmax(12.5rem, 1fr)); }
.inv-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr)); gap: .75rem 1rem; }
.inv-grid + .inv-check, .inv-check + .inv-grid { margin-top: .9rem; }
.inv-wide { grid-column: 1 / -1; }
.inv-field { display: flex; flex-direction: column; gap: .3rem; min-width: 0; }
.inv-field > span { font-size: .9rem; font-weight: 700; color: var(--ink); }
.inv-field > span b { color: var(--pine); }
.inv-field input, .inv-field select, .inv-field textarea {
  width: 100%;
  min-width: 0;
  font: inherit;
  padding: .55rem .7rem;
  border: 1.5px solid var(--line);
  border-radius: var(--radius-control);
  background: var(--paper);
  color: var(--ink);
}
.inv-field input, .inv-field select { height: 2.75rem; }
.inv-field textarea { resize: vertical; }
.inv-field input:focus, .inv-field select:focus, .inv-field textarea:focus {
  outline: 3px solid var(--pine);
  outline-offset: 1px;
  border-color: var(--pine);
}
.inv-field .field-help { font-weight: 400; margin: 0; font-size: .85rem; }
/* Live checks under a field (static/field-checks.js): a mark, then a short sentence. */
.field-check { display: block; padding-left: 1.1em; text-indent: -1.1em; font-size: .85rem; font-weight: 400; line-height: 1.4; color: var(--muted); overflow-wrap: anywhere; }
.field-check:empty { display: none; }
.field-check::before { display: inline-block; width: 1.1em; font-weight: 700; }
.field-check.is-ok { color: var(--pine); }
.field-check.is-ok::before { content: "\2713"; }
.field-check.is-error { color: var(--error); }
.field-check.is-error::before { content: "!"; }
.field-check.is-warn { color: var(--warn); }
.field-check.is-warn::before { content: "!"; }
.field-check.is-info::before { content: "i"; font-style: italic; font-family: Georgia, serif; }
.inv-field input.field-bad { border-color: var(--error); }
.vies-ask { font-size: inherit; padding: 0; color: var(--pine); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.inv-check { display: flex; align-items: flex-start; gap: .55rem; margin-top: .9rem; font-size: .95rem; cursor: pointer; }
.inv-check input { width: 1.05rem; height: 1.05rem; margin: .15rem 0 0; accent-color: var(--pine); flex: none; }

.inv-lines-head, .inv-item-main {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 4.5rem 6.5rem 6.5rem 4.5rem 7rem 2rem;
  gap: .5rem;
  align-items: end;
}
.inv-lines-head { font-size: .82rem; font-weight: 700; color: var(--muted); padding: 0 0 .35rem; }
.inv-lines-head span:nth-child(6) { text-align: right; }
.inv-items { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.inv-item { padding: .6rem 0 .7rem; border-top: 1px solid var(--line); }
.inv-item:first-child { border-top: 0; padding-top: 0; }
.inv-item-main .inv-field > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.inv-item-more { display: grid; grid-template-columns: minmax(0, 1fr) 6rem 8rem 10rem; gap: .5rem; margin-top: .45rem; margin-right: 2.5rem; }
.inv-item-more .inv-field > span { font-size: .78rem; font-weight: 400; color: var(--muted); }
.inv-item-more input, .inv-item-more select { height: 2.35rem; padding: .3rem .6rem; font-size: .92rem; }
.inv-amount { display: block; margin: 0; text-align: right; font-variant-numeric: tabular-nums; align-self: center; font-weight: 700; }
.inv-remove {
  width: 2rem; height: 2.4rem;
  border: 0; background: transparent; color: var(--muted);
  font-size: 1.4rem; line-height: 1; cursor: pointer; border-radius: var(--radius-control);
}
.inv-remove:hover { color: var(--error); background: var(--error-soft); }
.inv-add { min-height: 2.6rem; padding: 0 1.1rem; font-size: 1rem; margin-top: .8rem; }
.inv-form:not(.exporting) .export-col { display: none; }
.inv-form:not(.exporting) .inv-item-more { grid-template-columns: minmax(0, 1fr) 6rem; }
.inv-form.no-vat .vat-col { visibility: hidden; }
.inv-tax { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: .75rem 1rem; margin-top: 1.25rem; padding-top: 1rem; border-top: 1.5px solid var(--line); }
#export-box { margin-top: .9rem; }
#export-box > .field-help { margin: 0 0 .85rem; }

.inv-summary {
  margin-top: 1.25rem;
  padding: 1.1rem 1.25rem;
  border-radius: var(--radius-sheet);
  background: var(--pine-soft);
}
.inv-summary dl { display: grid; grid-template-columns: 1fr auto; gap: .3rem 1.5rem; margin: 0 0 0 auto; max-width: 20rem; font-variant-numeric: tabular-nums; }
.inv-summary dd { margin: 0; text-align: right; }
.inv-summary .total { font: 700 1.25rem/1.3 var(--display); padding-top: .35rem; border-top: 1.5px solid var(--line); }
.inv-summary .actions { margin-top: 1rem; justify-content: flex-end; }
.inv-privacy { text-align: right; }

@media (max-width: 40rem) {
  .inv-card { padding: 1rem; }
  .inv-lines-head { display: none; }
  .inv-item-main { grid-template-columns: repeat(6, minmax(0, 1fr)); row-gap: .5rem; }
  .inv-item-main .inv-field > span { position: static; width: auto; height: auto; clip: auto; font-size: .78rem; font-weight: 400; color: var(--muted); }
  .inv-item-main .inv-desc { grid-column: 1 / 6; }
  .inv-item-main .inv-remove { grid-column: 6; grid-row: 1; justify-self: end; }
  .inv-item-main .inv-field:nth-child(2) { grid-column: 1 / 3; }
  .inv-item-main .inv-field:nth-child(3) { grid-column: 3 / 5; }
  .inv-item-main .inv-field:nth-child(4) { grid-column: 5 / 7; }
  .inv-item-main .vat-col { grid-column: 1 / 3; }
  .inv-item-main .inv-amount { grid-column: 3 / 7; }
  .inv-form.no-vat .inv-item-main .vat-col { display: none; }
  .inv-form.no-vat .inv-item-main .inv-amount { grid-column: 1 / 7; }
  .inv-item-more, .inv-form.exporting .inv-item-more { grid-template-columns: 1fr 1fr; margin-right: 0; }
  .inv-item-more .inv-desc { grid-column: 1 / -1; }
  .inv-tax { grid-template-columns: 1fr; }
  .inv-summary dl { max-width: none; }
  .inv-summary .actions .primary { width: 100%; }
  .inv-privacy { text-align: left; }
}

/* ---------------------------------------------------------------- e-invoice error pages */

.crumbs { margin: 0 0 .75rem; font-size: .95rem; }
.crumbs a { color: var(--pine); font-weight: 700; text-underline-offset: 3px; }
.rule-code {
  display: inline-block;
  font: 700 .55em/1.2 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  letter-spacing: 0;
  padding: .2em .5em;
  margin-right: .25em;
  vertical-align: .2em;
  border-radius: 8px;
  background: var(--pine-soft);
  color: var(--pine);
}
.rule-doc { margin-top: 2rem; }
.rule-doc h2 { font-size: 1.3rem; margin: 2rem 0 .6rem; }
.rule-doc h2:first-child { margin-top: 0; }
.rule-doc p { margin: 0; line-height: 1.6; }
.rule-official {
  margin: 0;
  padding: .9rem 1.1rem;
  border-left: 4px solid var(--pine);
  background: var(--surface);
  border-radius: 0 var(--radius-control) var(--radius-control) 0;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .92rem;
  overflow-wrap: anywhere;
}
.rule-official + .field-help { margin-top: .5rem; }
.rule-cta { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 2rem; }
.rule-more { margin-top: 3rem; padding-top: 2rem; border-top: 1.5px solid var(--line); }
.rule-more h2 { font-size: 1.3rem; margin: 0 0 .8rem; }
.rule-more h3 { font-size: 1.05rem; margin: 1.8rem 0 .6rem; }
.rule-more p { margin: 0 0 .9rem; line-height: 1.65; }
.rule-more a { color: var(--pine); font-weight: 700; text-underline-offset: 3px; }
.rule-fields { margin: 0; display: grid; gap: .6rem; }
.rule-field { padding: .7rem .9rem; border: 1.5px solid var(--line); border-radius: 10px; background: var(--surface); }
.rule-field dt { font-weight: 700; margin-bottom: .3rem; }
.rule-field .bt { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; color: var(--pine); margin-right: .3rem; }
.rule-field dd { display: grid; grid-template-columns: 2.6rem minmax(0, 1fr); align-items: baseline; margin: .2rem 0 0; font-size: .88rem; }
.rule-field dd code { overflow-wrap: anywhere; }
.rule-field .syntax { font-size: .75rem; font-weight: 700; color: var(--muted); }
.rule-situations { margin: 0; padding-left: 1.2rem; line-height: 1.6; }
.rule-situations li + li { margin-top: .35rem; }
.rule-example {
  margin: 0;
  padding: .9rem 1rem;
  background: var(--surface);
  border: 1.5px solid var(--line);
  border-radius: 10px;
  font-size: .82rem;
  line-height: 1.5;
  overflow-x: auto;
  max-width: 100%;
}
.rule-group { margin-top: 2.5rem; }
.rule-group h2 { font-size: 1.3rem; margin-bottom: .8rem; }
.rule-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .45rem; }
.rule-list a {
  display: flex;
  align-items: baseline;
  gap: .75rem;
  padding: .65rem .85rem;
  border: 1.5px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
  color: var(--ink);
  text-decoration: none;
}
.rule-list a:hover { border-color: var(--pine); }
.rule-list code { flex: none; min-width: 9.5rem; font-weight: 700; color: var(--pine); overflow-wrap: anywhere; }
/* PDF Accessibility Checker: one style per finding level, the fix panel and the Word route. */
.a11y-finding.is-warning { border-left-color: #B7791F; }
.a11y-finding.is-manual { border-left-color: var(--muted); }
.a11y-finding.is-pass { border-left-color: var(--pine); }
.a11y-finding .finding-head::before { display: inline-block; width: 1.2em; font-weight: 800; }
.a11y-finding.is-error .finding-head::before { content: "✗"; color: var(--error); }
.a11y-finding.is-warning .finding-head::before { content: "!"; color: #B7791F; }
.a11y-finding.is-manual .finding-head::before { content: "?"; color: var(--muted); }
.a11y-finding.is-pass .finding-head::before { content: "\2713"; color: var(--pine); }
.a11y-finding p + p { margin-top: .3rem; }
.finding-how { color: var(--muted); font-size: .94rem; }
.finding-how strong { color: var(--ink); }
.a11y-fix, .a11y-word { margin-top: 1.25rem; padding: 1rem 1.1rem; border: 1.5px solid var(--line); border-radius: var(--radius-sheet); background: var(--surface); }
.a11y-fix { border-color: var(--pine); }
.a11y-fix .report-heading, .a11y-word .report-heading { margin-top: 0; }
.a11y-fix p, .a11y-word p { margin: 0 0 .8rem; line-height: 1.55; }
.a11y-fix .result-actions { margin-top: .9rem; }
.a11y-done { margin: 0 !important; font-weight: 700; color: var(--pine); }
.a11y-word a, .a11y-done a { color: var(--pine); font-weight: 700; text-underline-offset: 3px; }
.finding-doc { display: inline-block; margin-top: .35rem; font-size: .92rem; font-weight: 700; color: var(--pine); text-underline-offset: 3px; }
@media (max-width: 34rem) {
  .rule-list a { flex-direction: column; gap: .15rem; }
  .rule-list code { min-width: 0; }
}

/* ---------------------------------------------------------------- Filekin for Business (app.filekin.io) */

.biz-mark { font: 700 .8rem/1 var(--body); color: var(--pine); border: 1.5px solid var(--pine); border-radius: 999px; padding: .2rem .5rem; margin-left: .35rem; letter-spacing: .02em; }
.biz-nav { display: flex; align-items: center; gap: .25rem 1rem; flex-wrap: wrap; }
.biz-nav a { color: var(--ink); font-weight: 700; text-underline-offset: 3px; }
.biz-nav form { margin: 0; }
.biz-nav .link-button { color: var(--ink); font-weight: 700; padding: .5rem 0; }
.biz-form { display: grid; gap: 1rem; max-width: 26rem; margin-top: 1.5rem; }
.biz-form .primary, .biz-form .secondary { justify-self: start; }
.biz-inline { grid-template-columns: minmax(0, 1fr) auto; align-items: end; max-width: 34rem; }
.biz-inline .secondary { min-height: 2.75rem; padding: 0 1.2rem; font-size: 1rem; }
.biz-button { width: fit-content; }
.biz-page .result-actions form { margin: 0; }
.biz-page .result-actions .secondary { min-height: 2.9rem; padding: 0 1.2rem; font-size: 1rem; }
.prose-page .biz-usage, .prose-page .biz-keys { list-style: none; padding: 0; }
.biz-usage li { display: grid; grid-template-columns: 7rem minmax(6rem, 14rem) auto; gap: .75rem; align-items: center; }
.biz-usage meter { width: 100%; height: .9rem; }
.biz-keys li { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; border-bottom: 1px solid var(--line); padding: .4rem 0; margin: 0; }
.biz-keys form { margin: 0; }
.biz-secret { display: flex; gap: .75rem; align-items: center; flex-wrap: wrap; }
.biz-secret code { background: var(--surface); border: 1.5px solid var(--line); border-radius: var(--radius-control); padding: .6rem .8rem; overflow-wrap: anywhere; font-size: .95rem; }
.biz-secret .secondary { min-height: 2.75rem; padding: 0 1.2rem; font-size: 1rem; }
.biz-danger { margin-top: 2.5rem; border-top: 1px solid var(--line); padding-top: 1rem; }
.biz-danger summary { cursor: pointer; font-weight: 700; color: var(--error); }
.biz-delete { justify-self: start; min-height: 2.9rem; padding: 0 1.2rem; border-radius: var(--radius-control); border: 1.5px solid var(--error); background: transparent; color: var(--error); font: 700 1rem/1 var(--body); cursor: pointer; }
.biz-delete:hover { background: var(--error-soft); }
.prose-page .biz-plans { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: 1rem; margin-top: 1.5rem; }
.prose-page .biz-plans > li { max-width: none; margin: 0; }
.biz-plan { display: flex; flex-direction: column; gap: .5rem; background: var(--surface); border: 1.5px solid var(--line); border-radius: var(--radius-sheet); padding: 1.25rem; }
.biz-plan h2 { margin: 0; font-size: 1.2rem; }
.biz-price { margin: 0; color: var(--muted); }
.biz-price strong { font: 700 1.8rem/1 var(--display); color: var(--ink); margin-right: .25rem; }
.biz-plan ul { padding-left: 1.1rem; margin: .25rem 0 auto; }
.biz-plan li { font-size: .95rem; margin-bottom: .35rem; }
.biz-plan .primary, .biz-plan .secondary { width: 100%; margin-top: .75rem; min-height: 2.9rem; font-size: 1rem; }
.biz-current { margin: .75rem 0 0; font-weight: 700; color: var(--pine); }
@media (max-width: 34rem) {
  .biz .site-header { flex-wrap: wrap; }
  .biz-nav { width: 100%; gap: .25rem 1.25rem; }
  .biz-inline { grid-template-columns: 1fr; }
  .biz-usage li { grid-template-columns: 1fr; gap: .25rem; }
}

/* ---------------------------------------------------------------- Filekin for Business page (filekin.io/business) */

.biz-kicker { margin: 0 0 .5rem; font-weight: 700; color: var(--pine); letter-spacing: .02em; }
.biz-returning { margin: .75rem 0 0; color: var(--muted); font-size: .95rem; }
.biz-soon { margin-top: 1.25rem; padding: .9rem 1.1rem; border-radius: var(--radius-control); background: var(--pine-soft); color: var(--ink); }
.prose-page .biz-features { list-style: none; padding: 0; }
.biz-features li { padding-left: 1.6rem; position: relative; }
.biz-features li::before { content: "\2713"; position: absolute; left: 0; color: var(--pine); font-weight: 700; }
.biz-table-wrap { overflow-x: auto; margin-top: .75rem; }
.biz-table { width: 100%; border-collapse: collapse; font-size: .98rem; }
.biz-table th, .biz-table td { text-align: left; padding: .65rem .75rem; border-bottom: 1px solid var(--line); }
.biz-table thead th { font-size: .85rem; color: var(--muted); font-weight: 700; }
.biz-table tbody th { font-weight: 700; }
.biz-prices td:nth-child(2) { font-weight: 700; }
.biz-policies { margin-top: 2.5rem; color: var(--muted); }
.biz-legal { margin-top: 1.5rem; }
@media (max-width: 34rem) {
  .biz-table { font-size: .9rem; }
  .biz-table th, .biz-table td { padding: .55rem .35rem; }
}

/* ---------------------------------------------------------------- Business workspace */

.biz-tabs { display: flex; flex-wrap: wrap; gap: .4rem; margin: 0 0 1.5rem; }
.biz-tabs a { padding: .45rem .8rem; border-radius: 999px; border: 1.5px solid var(--line); color: var(--ink); font-weight: 700; font-size: .92rem; text-decoration: none; }
.biz-tabs a:hover { border-color: var(--ink); }
.biz-tabs a[aria-current="page"] { background: var(--pine); border-color: var(--pine); color: var(--pine-ink); }
.biz-page:has(.biz-sheet, #bulk, .biz-table) { max-width: 52rem; }
.biz-sheet h2 { margin-top: 2rem; }
.biz-sheet .inv-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: 1rem; }
.biz-sheet .inv-wide { grid-column: 1 / -1; }
.biz-ok { margin: 1rem 0; padding: .75rem 1rem; border-radius: var(--radius-control); background: var(--pine-soft); color: var(--ink); font-weight: 700; }
.prose-page .biz-problems, .prose-page .biz-warnings { padding-left: 1.25rem; }
.biz-problems li { color: var(--error); }
.biz-warnings li { color: var(--warn); }
.biz-check { display: flex; gap: .5rem; align-items: center; margin-top: 1rem; font-weight: 700; }
.biz-check input { width: 1.15rem; height: 1.15rem; accent-color: var(--pine); }
.biz-row-actions { display: flex; gap: .75rem; align-items: center; justify-content: flex-end; white-space: nowrap; }
.biz-row-actions form { margin: 0; }
.biz-row-actions .link-button { padding: 0; }
.biz-progress { width: 100%; height: 1rem; margin-top: 1rem; accent-color: var(--pine); }
.biz-templates { font-weight: 700; }
.biz-pages { display: flex; flex-wrap: wrap; gap: .5rem; }
.biz-pages a[aria-current="page"] { font-weight: 700; text-decoration: none; }
.biz-map { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: .75rem; margin-top: .75rem; }
#bulk-review h2 { margin-top: 1.5rem; }
.biz-notice { margin: 1rem 0; padding: .9rem 1.1rem; border-radius: var(--radius-control); border: 1.5px solid var(--warn); background: color-mix(in srgb, var(--warn) 8%, var(--surface)); }
.biz-notice p { margin: 0 0 .5rem; }
.biz-notice .biz-check { margin-top: .5rem; }
.biz-page pre { overflow-x: auto; padding: .9rem 1rem; border: 1.5px solid var(--line); border-radius: var(--radius-control); background: var(--surface); font-size: .86rem; line-height: 1.5; }
.biz-page code { font-size: .92em; }
.biz-page h3 { margin-top: 1.75rem; }
.biz-good { color: var(--pine); font-weight: 700; }
.biz-bad { color: var(--error); font-weight: 700; }

/* ---------------------------------------------------------------- Business app shell (signed in) */

.biz-app { background: var(--paper); }
.app-skip { position: absolute; left: -999px; top: .5rem; z-index: 50; padding: .5rem .9rem; background: var(--ink); color: var(--paper); border-radius: var(--radius-control); }
.app-skip:focus { left: .5rem; }
.app { display: grid; grid-template-columns: 15.5rem minmax(0, 1fr); min-height: 100vh; }
.app-side {
  position: sticky; top: 0; height: 100vh; overflow-y: auto;
  display: flex; flex-direction: column; gap: 1.75rem;
  padding: 1.25rem .9rem 1.25rem;
  border-right: 1px solid var(--line);
  background: color-mix(in srgb, var(--pine) 5%, var(--paper));
}
.app-brand { padding: 0 .6rem; font-size: 1.15rem; }
.app-nav ul { list-style: none; margin: 0; padding: 0 0 .9rem; display: grid; gap: .15rem; }
.app-nav ul + ul { padding-top: .9rem; border-top: 1px solid var(--line); }
.app-nav a { display: block; padding: .5rem .7rem; border-radius: var(--radius-control); color: var(--ink); font-weight: 700; font-size: .96rem; text-decoration: none; }
.app-nav a:hover { background: var(--pine-soft); }
.app-nav a[aria-current="page"] { background: var(--pine); color: var(--pine-ink); }
.app-nav-help span { display: block; color: var(--muted); font-weight: 400; font-size: .85rem; margin-top: .1rem; }
.app-plan { margin-top: auto; padding: .9rem .7rem 0; border-top: 1px solid var(--line); font-size: .9rem; }
.app-plan p { margin: 0 0 .4rem; }
.app-plan-name { font: 700 1rem/1.2 var(--display); }
.app-plan-use { color: var(--muted); }
.app-plan a { color: var(--pine); font-weight: 700; text-underline-offset: 3px; }
.app-meter { height: .45rem; border-radius: 999px; background: var(--line); overflow: hidden; margin-bottom: .45rem; }
.app-meter span { display: block; height: 100%; background: var(--pine); border-radius: inherit; }
.app-main { display: flex; flex-direction: column; min-width: 0; }
.app-top { display: flex; justify-content: flex-end; align-items: center; gap: 1rem; padding: .9rem 2.25rem 0; color: var(--muted); font-size: .92rem; }
.app-top form { margin: 0; }
.app-top .link-button { padding: .25rem 0; font-size: .92rem; }
.app-user { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 22rem; }
.app-content { flex: 1; width: 100%; max-width: 58rem; padding: 1rem 2.25rem 4rem; }
.app-content h1 { font: 700 clamp(1.9rem, 3.4vw, 2.5rem)/1.08 var(--display); letter-spacing: -.025em; margin: 0; }
.app-head { margin-bottom: 1.5rem; }
.app-head p { margin: .6rem 0 0; color: var(--muted); max-width: 42rem; font-size: 1.05rem; line-height: 1.55; }
.app-content h2 { font: 700 1.25rem/1.25 var(--display); letter-spacing: -.01em; margin: 0; }
.app-section { margin-top: 2.25rem; padding-top: 1.5rem; border-top: 1px solid var(--line); }
.app-section-head { margin-bottom: 1.1rem; }
.app-section-head p { margin: .35rem 0 0; color: var(--muted); max-width: 40rem; }
.app-content p, .app-content li { max-width: 44rem; }
.app-empty { color: var(--muted); }
.app-foot { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; padding: 1.5rem 2.25rem 2rem; font-size: .88rem; }
.app-foot a { color: var(--muted); }
.biz-table td.num { text-align: right; white-space: nowrap; }

/* Forms: each section's title and help on the left, its fields on the right. */
.biz-sheet .app-section { display: grid; grid-template-columns: 14rem minmax(0, 1fr); gap: 1.5rem 2rem; }
.biz-sheet .app-section .app-section-head { margin: 0; }
.biz-sheet .app-section .app-section-head p { font-size: .92rem; }
.app-save { position: sticky; bottom: 0; z-index: 5; display: flex; gap: 1rem; align-items: center; margin-top: 2rem; padding: .9rem 0; background: var(--paper); border-top: 1px solid var(--line); }
.app-notice { margin: 0 0 2rem; padding: 1.25rem 1.5rem; border: 1.5px solid var(--pine); border-radius: var(--radius-sheet); background: var(--pine-soft); }
.app-notice p { margin: .4rem 0 1rem; }
.app-notice .primary { min-height: 2.9rem; font-size: 1rem; padding: 0 1.25rem; }

/* The setup path on the overview: three real steps in order, joined by a line. */
.setup-path { list-style: none; margin: 0; padding: 0; }
.setup-step { position: relative; display: grid; grid-template-columns: 2.5rem minmax(0, 1fr); gap: 1rem; padding-bottom: 1.6rem; }
.setup-step:last-child { padding-bottom: 0; }
.setup-step:not(:last-child)::before { content: ""; position: absolute; left: calc(1.25rem - 1px); top: 2.6rem; bottom: .2rem; width: 2px; background: var(--line); }
.setup-step.is-done:not(:last-child)::before { background: var(--pine); }
.setup-dot { display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: 50%; border: 2px solid var(--line); background: var(--surface); font: 700 1rem/1 var(--display); color: var(--muted); }
.setup-step.is-done .setup-dot { border-color: var(--pine); background: var(--pine); color: var(--pine-ink); }
.setup-step.is-next .setup-dot { border-color: var(--ink); color: var(--ink); }
.setup-step h3 { margin: .1rem 0 .3rem; font: 700 1.1rem/1.3 var(--display); width: fit-content; }
.setup-step.is-next h3 { background: linear-gradient(transparent 58%, var(--highlight) 58%); }
.setup-step p { margin: 0 0 .7rem; color: var(--muted); }
.setup-step .setup-badge { margin: 0; font-size: .82rem; font-weight: 700; color: var(--muted); }
.setup-step.is-done .setup-badge { color: var(--pine); }
.setup-step.is-later { opacity: .6; }
.setup-step .primary { min-height: 2.75rem; padding: 0 1.15rem; font-size: 1rem; }
.setup-step a:not(.primary) { color: var(--pine); font-weight: 700; text-underline-offset: 3px; }

/* Create invoices: the three steps. */
.app-steps { list-style: none; margin: 0; padding: 0; counter-reset: step; }
.app-step { counter-increment: step; position: relative; padding: 0 0 2.25rem 3.5rem; }
.app-step::before { content: counter(step); position: absolute; left: 0; top: -.15rem; display: grid; place-items: center; width: 2.4rem; height: 2.4rem; border-radius: 50%; background: var(--pine); color: var(--pine-ink); font: 700 1.05rem/1 var(--display); }
.app-step:not(:last-child)::after { content: ""; position: absolute; left: calc(1.2rem - 1px); top: 2.55rem; bottom: .4rem; width: 2px; background: var(--line); }
.app-step > p { margin: .4rem 0 .9rem; color: var(--muted); }
.app-step.is-locked { opacity: .55; }
.app-step.is-locked::before { background: var(--line); color: var(--muted); }
.app-rules { margin: 0 0 1.1rem; padding-left: 1.2rem; }
.app-rules li { margin-bottom: .35rem; }
.app-downloads { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.25rem; margin: 0 0 1rem; }
.app-downloads .secondary { min-height: 2.9rem; padding: 0 1.2rem; font-size: 1rem; }
.app-downloads a:not(.secondary) { color: var(--pine); font-weight: 700; text-underline-offset: 3px; }
.app-details { margin-top: .6rem; border-top: 1px solid var(--line); padding-top: .6rem; }
.app-details summary { cursor: pointer; font-weight: 700; color: var(--pine); padding: .25rem 0; }
.app-details[open] summary { margin-bottom: .6rem; }
.app-columns td.need { font-weight: 700; }
.app-columns code, .app-sample td { font-size: .88rem; }
.app-sample td { white-space: nowrap; }

@media (max-width: 56rem) {
  .app { grid-template-columns: 1fr; }
  .app-side { position: static; height: auto; flex-direction: row; flex-wrap: wrap; align-items: center; gap: .75rem; padding: .9rem 1rem; border-right: 0; border-bottom: 1px solid var(--line); }
  .app-nav { order: 3; width: 100%; overflow-x: auto; }
  .app-nav ul, .app-nav ul + ul { display: flex; gap: .25rem; padding: 0; border: 0; }
  .app-nav { display: flex; gap: .25rem; }
  .app-nav a { white-space: nowrap; padding: .45rem .7rem; }
  .app-nav-help span { display: none; }
  .app-plan { margin: 0 0 0 auto; padding: 0; border: 0; text-align: right; }
  .app-plan .app-meter, .app-plan .app-plan-use { display: none; }
  .app-top { padding: .75rem 1rem 0; }
  .app-content { padding: .75rem 1rem 3rem; }
  .app-foot { padding: 1.25rem 1rem 2rem; }
  .biz-sheet .app-section { grid-template-columns: 1fr; gap: 1rem; }
}
@media (prefers-reduced-motion: reduce) { .app * { scroll-behavior: auto; } }
.app-month-plan { display: flex; flex-wrap: wrap; gap: .4rem 1rem; align-items: baseline; margin: 0 0 1rem; }
.app-month-plan a { color: var(--pine); font-weight: 700; text-underline-offset: 3px; }
.app-uses { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: 1rem 2.5rem; max-width: 40rem; }
.app-use p { display: flex; justify-content: space-between; gap: 1rem; margin: 0 0 .45rem; }
.app-use p span:last-child { font-variant-numeric: tabular-nums; color: var(--muted); }
@media (min-width: 56.01rem) {
  .app { background: linear-gradient(to right, color-mix(in srgb, var(--pine) 5%, var(--paper)) calc(15.5rem - 1px), var(--line) calc(15.5rem - 1px) 15.5rem, transparent 15.5rem); }
  .app-side { background: none; border-right: 0; }
}
/* In dark mode the highlighter sits under the words, so light text on yellow never happens. */
@media (prefers-color-scheme: dark) {
  .setup-step.is-next h3 { background: linear-gradient(transparent 82%, var(--highlight) 82%); padding-bottom: .1rem; }
}
@media (max-width: 56rem) {
  .app-plan { display: none; }
  .app-nav { -webkit-mask-image: linear-gradient(to right, #000 85%, transparent); mask-image: linear-gradient(to right, #000 85%, transparent); padding-right: 2rem; }
  .app-top { padding-top: .5rem; }
}
.app-split { display: grid; grid-template-columns: 11rem minmax(0, 1fr); gap: 1rem 2rem; }
.app-split .app-section-head { margin: 0; }
.app-split .app-uses { margin-top: 1rem; }
.app-split p:first-child { margin-top: 0; }
.app-split .biz-danger { margin-top: 1.5rem; }
@media (max-width: 56rem) { .app-split { grid-template-columns: 1fr; } }

/* ---------------------------------------------------------------- tool index: equal tiles
   Every tile on the home page has the same size. The icon and the "In your
   browser" label share the top row, so a label never makes a tile taller; the
   name and summary sit together at the bottom, so every tile lines up the same
   way however long its name is. The summary is kept to two lines. */
.tool-index { --tile-h: 10.25rem; }
.tool-index .tool-group ul { grid-auto-rows: var(--tile-h); }
.tool-index .tool-group a {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-rows: auto 1fr auto;
  align-items: start;
  gap: 0 .75rem;
  height: var(--tile-h);
  min-height: 0;
  padding: .9rem 1rem 1rem;
  overflow: hidden;
}
.tool-index .tool-group a::after { display: none; }
.tool-index .tool-text { display: contents; }
.tool-index .tool-group .tool-icon { grid-row: 1; grid-column: 1; width: 1.25rem; height: 1.25rem; padding: .5rem; }
.tool-index .tool-tag { grid-row: 1; grid-column: 2; justify-self: end; align-self: center; margin: 0; }
.tool-index .tool-name { grid-row: 2; grid-column: 1 / -1; align-self: end; margin-top: .7rem; text-wrap: balance; }
.tool-index .tool-summary { grid-row: 3; grid-column: 1 / -1; -webkit-line-clamp: 2; min-height: 2.8em; margin-top: .2rem; }

@media (max-width: 34rem) {
  .tool-index { --tile-h: 7.75rem; }
  .tool-index .tool-group a { padding: .75rem .75rem .8rem; }
  .tool-index .tool-name { margin-top: .6rem; }
  .tool-index .tool-group .tool-icon { width: 1.1rem; height: 1.1rem; padding: .45rem; }
}
/* The narrowest phones: no room beside the icon, so the label goes under the name. */
@media (max-width: 22rem) {
  .tool-index { --tile-h: 8.9rem; }
  .tool-index .tool-tag { grid-row: 3; grid-column: 1 / -1; justify-self: start; margin-top: .4rem; }
  .tool-index .tool-name { align-self: start; }
}

/* Beside a page (guides, error codes, translated tools) the index is a compact list:
   one row per tool, icon beside the name, not the home page's tiles. */
.sidebar.tool-index .tool-group ul { grid-template-columns: 1fr; grid-auto-rows: auto; gap: .4rem; }
.sidebar.tool-index .tool-group a {
  display: flex; align-items: center; gap: .65rem;
  height: auto; min-height: 2.9rem; padding: .55rem .85rem;
}
.sidebar.tool-index .tool-text { display: block; }
.sidebar.tool-index .tool-group li + li { margin-top: 0; }
.sidebar.tool-index .tool-group li { display: grid; }
.sidebar.tool-index .tool-name { margin: 0; font-size: 1rem; }
.sidebar.tool-index .tool-summary, .sidebar.tool-index .tool-tag { display: none; }
.sidebar.tool-index .tool-group .tool-icon { width: 1.05rem; height: 1.05rem; padding: .35rem; flex: none; }
@media (max-width: 60rem) {
  .sidebar.tool-index .tool-group ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sidebar.tool-index .tool-group a { flex-direction: row; justify-content: flex-start; text-align: left; }
}
@media (max-width: 22rem) { .sidebar.tool-index .tool-group ul { grid-template-columns: 1fr; } }

/* ---------------------------------------------------------------- Create invoices: two ways to start */
.paths { display: grid; grid-template-columns: 1fr 1fr; gap: .9rem; max-width: 46rem; margin-top: .4rem; }
.path { position: relative; display: grid; gap: .3rem; padding: 1rem 1.1rem 1.05rem 2.9rem; border: 1.5px solid var(--line); border-radius: var(--radius-sheet); background: var(--surface); cursor: pointer; }
.path input { position: absolute; left: 1.05rem; top: 1.2rem; width: 1.15rem; height: 1.15rem; margin: 0; accent-color: var(--pine); }
.path-title { font: 700 1.05rem/1.3 var(--display); }
.path-text { color: var(--muted); font-size: .93rem; line-height: 1.45; }
.path:hover { border-color: var(--pine); }
.path:has(input:checked) { border-color: var(--pine); box-shadow: inset 0 0 0 1px var(--pine); }
.path:has(input:focus-visible) { outline: 3px solid var(--pine); outline-offset: 2px; }
.path-panel { grid-column: 1 / -1; margin-top: .6rem; }
.paths:has(input[name="path"][value="template"]:checked) .path-panel[data-path="export"],
.paths:has(input[name="path"][value="export"]:checked) .path-panel[data-path="template"] { display: none; }
.src-pick { border: 0; margin: 0 0 1rem; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.src-pick legend { font-weight: 700; margin-bottom: .55rem; padding: 0; }
.src-chip { display: inline-flex; align-items: center; gap: .45rem; min-height: 2.6rem; padding: 0 1rem 0 .8rem; border: 1.5px solid var(--line); border-radius: 999px; background: var(--surface); font-weight: 700; cursor: pointer; }
.src-chip input { margin: 0; accent-color: var(--pine); }
.src-chip:has(input:checked) { border-color: var(--pine); background: var(--pine-soft); }
.src-chip:has(input:focus-visible) { outline: 3px solid var(--pine); outline-offset: 2px; }
.src-guide { padding: 1rem 1.2rem; border-left: 3px solid var(--pine); background: var(--surface); border-radius: 0 var(--radius-control) var(--radius-control) 0; }
.src-guide h3 { margin: 0 0 .5rem; font: 700 1rem/1.3 var(--display); }
.src-guide ol { margin: 0 0 .6rem; padding-left: 1.3rem; }
.src-guide li { margin-bottom: .3rem; }
.src-guide .field-help { margin: 0; }
.path-panel:has(input[name="source"]:checked) .src-guide { display: none; }
.path-panel:has(input[value="shopify"]:checked) .src-guide[data-src="shopify"],
.path-panel:has(input[value="paypal"]:checked) .src-guide[data-src="paypal"],
.path-panel:has(input[value="other"]:checked) .src-guide[data-src="other"] { display: block; }
.src-guide + .src-guide { margin-top: .75rem; }
@media (max-width: 40rem) { .paths { grid-template-columns: 1fr; } }

/* ---------------------------------------------------------------- the preview */
.pv-head h2 { margin-bottom: .3rem; }
.pv-head p { margin: 0 0 .35rem; }
.pv-read { font-weight: 700; }
.pv-bar { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1.5rem; margin: 1rem 0 .5rem; }
.pv-bar .biz-check { margin: 0; }
.pv-counts { display: flex; flex-wrap: wrap; gap: .4rem; margin: 0 auto 0 0; }
.pv-counts span { padding: .2rem .7rem; border-radius: 999px; font-weight: 700; font-size: .9rem; }
.pv-counts .is-ready { background: var(--pine-soft); color: var(--pine); }
.pv-counts .is-fix { background: var(--highlight); color: #18232E; }
.pv-counts .is-out { background: var(--line); color: var(--ink); }
.pv-gross-help { margin-top: 0; }
.pv-table { width: 100%; }
.pv-table td, .pv-table th { vertical-align: middle; }
.pv-status { display: inline-block; padding: .1rem .55rem; border-radius: 999px; font-size: .82rem; font-weight: 700; white-space: nowrap; }
.pv-row.is-ready .pv-status { background: var(--pine-soft); color: var(--pine); }
.pv-row.is-fix .pv-status { background: var(--highlight); color: #18232E; }
.pv-row.is-out { color: var(--muted); }
.pv-row.is-out .pv-status { background: var(--line); color: var(--ink); }
.pv-row.is-out .pv-customer, .pv-row.is-out .pv-total { text-decoration: line-through; }
.pv-row.is-open td { border-bottom-color: transparent; }
.pv-customer { max-width: 16rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pv-muted { color: var(--muted); }
.pv-match { color: var(--pine); font-weight: 700; margin-left: .2rem; }
.pv-act { text-align: right; }
.pv-act .link-button { font-weight: 700; color: var(--pine); }
.pv-edit > td { padding: 0 0 1rem; }
.pv-editor { padding: 1rem 1.1rem 1.1rem; border: 1.5px solid var(--line); border-radius: var(--radius-control); background: var(--paper); }
.pv-editor h4 { margin: 1rem 0 .6rem; font: 700 .98rem/1.3 var(--display); }
.pv-editor h4:first-of-type { margin-top: .2rem; }
.pv-fields { display: grid; grid-template-columns: repeat(auto-fill, minmax(12.5rem, 1fr)); gap: .75rem 1rem; }
.pv-msgs { margin: 0 0 .9rem; padding: .7rem 1rem .7rem 1.9rem; border-radius: var(--radius-control); background: var(--error-soft); color: var(--error); font-weight: 700; }
.pv-msgs li.is-note { color: var(--warn); }
.pv-msgs:not(:has(li:not(.is-note))) { background: color-mix(in srgb, var(--highlight) 22%, var(--paper)); }
.pv-lines { width: 100%; border-collapse: collapse; }
.pv-lines th { text-align: left; font-size: .85rem; padding: 0 .4rem .35rem 0; color: var(--muted); }
.pv-lines td { padding: 0 .4rem .4rem 0; }
.pv-lines td:first-child { width: 55%; min-width: 12rem; }
.pv-lines input { width: 100%; min-width: 4.5rem; height: 2.5rem; box-sizing: border-box; padding: 0 .6rem; border: 1.5px solid var(--line); border-radius: var(--radius-control); background: var(--surface); color: var(--ink); font: inherit; }
.pv-lines input:focus, .pv-fields input:focus { border-color: var(--pine); outline: 2px solid color-mix(in srgb, var(--pine) 35%, transparent); }
.pv-lines input.is-missing { border-color: var(--warn); background: color-mix(in srgb, var(--highlight) 25%, var(--surface)); }
.pv-create { margin-top: 1.5rem; padding-top: 1.1rem; border-top: 1px solid var(--line); }
.pv-columns { margin-top: 1.2rem; }
@media (max-width: 40rem) {
  .pv-table > thead th:nth-child(4), .pv-table > tbody > tr > td.pv-date, .pv-table > thead th:nth-child(5), .pv-table > tbody > tr.pv-row > td:nth-child(5) { display: none; }
  .pv-customer { max-width: 8rem; }
  .pv-edit > td { padding: 0 0 .8rem; }
}
.pv-fields .inv-field input { background: var(--surface); height: 2.5rem; }
.path { align-content: start; }
.pv-date { white-space: nowrap; }
#bulk-step3 > section { margin-top: 1.25rem; }
#bulk-step3 .pv-head h2 { font-size: 1.15rem; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
.app-content li.app-step { max-width: none; }
.app-step > p, .app-step > .paths { max-width: 46rem; }
.pv-edit > td { border-bottom: 0; }
@media (max-width: 40rem) {
  .app-step { padding-left: 2.85rem; }
  .app-step::before { width: 2rem; height: 2rem; font-size: .95rem; }
  .app-step:not(:last-child)::after { left: calc(1rem - 1px); top: 2.15rem; }
  .pv-table { table-layout: fixed; }
  /* Phones: each invoice is one line (customer, total, open); the status shows as the
     coloured edge and is still read out. The number and date are in the editor. */
  .pv-table { table-layout: auto; }
  .pv-table, .pv-table > tbody { display: block; width: 100%; }
  .pv-table > thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .pv-table > tbody > tr.pv-row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; border-left: 4px solid var(--pine); border-bottom: 1px solid var(--line); }
  .pv-table > tbody > tr.pv-row.is-fix { border-left-color: var(--highlight); }
  .pv-table > tbody > tr.pv-row.is-out { border-left-color: var(--line); }
  .pv-table > tbody > tr.pv-row > td { border: 0; padding: .7rem .5rem; }
  .pv-table > tbody > tr.pv-row > td:first-child { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .pv-table > tbody > tr.pv-row > td:nth-child(2) { display: none; }
  .pv-table > tbody > tr.pv-edit { display: block; }
  .pv-table > tbody > tr.pv-edit > td { display: block; padding-top: .5rem; }
  .pv-customer { max-width: none; }
  .pv-match { display: none; }
  .pv-editor { padding: .8rem; }
  .pv-fields { grid-template-columns: 1fr; }
  .pv-lines thead { display: none; }
  .pv-lines, .pv-lines tbody { display: block; }
  .pv-lines tr { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: end; gap: .4rem; padding: .6rem 0; border-bottom: 1px solid var(--line); }
  .pv-lines td { display: block; padding: 0; width: auto !important; min-width: 0 !important; }
  .pv-lines td:first-child { grid-column: 1 / -1; }
  .pv-lines td::before { content: attr(data-label); display: block; font-size: .78rem; font-weight: 700; color: var(--muted); margin-bottom: .2rem; }
  .pv-lines input { min-width: 0; }
}
.pv-question { margin: .8rem 0 1rem; padding: 1rem 1.2rem; border-radius: var(--radius-sheet); background: color-mix(in srgb, var(--highlight) 28%, var(--surface)); border: 1.5px solid color-mix(in srgb, var(--highlight) 70%, var(--line)); }
.pv-question p { margin: 0 0 .7rem; font: 700 1.05rem/1.35 var(--display); max-width: 40rem; }
.pv-answers { display: flex; flex-wrap: wrap; gap: .6rem; }
.pv-answers .secondary { min-height: 2.75rem; padding: 0 1.1rem; background: var(--surface); }
.pv-tag { display: inline-block; margin-left: .35rem; padding: .05rem .5rem; border-radius: 999px; border: 1.5px solid var(--pine); color: var(--pine); font-size: .75rem; font-weight: 700; white-space: nowrap; vertical-align: .1em; }
.pv-vat { max-width: 26rem; margin-bottom: .4rem; }
.pv-vat select { background: var(--surface); }
.pv-vat small { font-size: .82rem; font-weight: 400; color: var(--muted); }
@media (max-width: 40rem) { .pv-tag { display: block; width: fit-content; margin: .25rem 0 0; } }
.pv-lines input:disabled { opacity: .55; }
.pv-duty { max-width: 46rem; margin: .8rem 0 1rem; font-size: .88rem; line-height: 1.5; color: var(--muted); }
.pv-duty a { color: var(--pine); font-weight: 700; }
.app-content .biz-plans { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 46rem; gap: 1rem; margin: 1.5rem 0; padding: 0; list-style: none; }
.app-content .biz-plan { display: flex; flex-direction: column; margin: 0; }
.app-content .biz-plan > :last-child { margin-top: auto; }
@media (max-width: 40rem) { .app-content .biz-plans { grid-template-columns: 1fr; } }
.biz-signin-as { max-width: 34rem; padding: .8rem 1rem; border-left: 3px solid var(--highlight); background: var(--surface); border-radius: 0 var(--radius-control) var(--radius-control) 0; }

/* ---------------------------------------------------------------- Business: invoices, overview, phone menu */

.app-head-actions { display: flex; flex-wrap: wrap; gap: .75rem; margin: 1.25rem 0 0; }
.app-head-actions .biz-button { min-height: 2.85rem; padding: 0 1.2rem; font-size: 1rem; display: inline-flex; align-items: center; }
.ov-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; }
.ov-head .app-head-actions { margin: 0; }
.setup-actions { display: inline-flex; flex-wrap: wrap; align-items: center; gap: .6rem 1.25rem; }
/* The setup path's "next" step is marked by its dark ring and label; no highlighter. */
.setup-step.is-next h3, .biz-app .setup-step.is-next h3 { background: none; padding-bottom: 0; }
.biz-app .sheet-title mark { background: none; color: inherit; padding: 0; }

/* Money at a glance: three cards that open the matching list. */
.ov-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; margin-top: 2rem; }
.ov-card { display: flex; flex-direction: column; gap: .3rem; padding: 1.1rem 1.2rem; border: 1.5px solid var(--line); border-radius: var(--radius-sheet);
  background: var(--surface); color: var(--ink); text-decoration: none; }
.ov-card:hover { border-color: var(--pine); }
.ov-card:focus-visible { outline: 3px solid var(--pine); outline-offset: 2px; }
.ov-label { font-size: .9rem; font-weight: 700; color: var(--muted); }
.ov-sum { font: 700 1.45rem/1.2 var(--display); letter-spacing: -.01em; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.ov-count { font-size: .88rem; color: var(--muted); }
.ov-card.is-warn { border-color: var(--error); background: var(--error-soft); }
.ov-card.is-warn .ov-label, .ov-card.is-warn .ov-sum { color: var(--error); }
@media (max-width: 40rem) { .ov-cards { grid-template-columns: 1fr; } .ov-sum { font-size: 1.25rem; } }

/* An invoice's status. */
.inv-status { display: inline-block; padding: .15rem .55rem; border-radius: 999px; font-size: .8rem; font-weight: 700; white-space: nowrap;
  border: 1.5px solid var(--line); color: var(--muted); }
.inv-status.is-paid { border-color: var(--pine); color: var(--pine); background: var(--pine-soft); }
.inv-status.is-overdue { border-color: var(--error); color: var(--error); background: var(--error-soft); }
.inv-status.is-cancelled, .inv-status.is-expired { text-decoration: line-through; }
.inv-status.is-cancellation, .inv-status.is-quote { border-style: dashed; color: var(--ink); }
.inv-status.is-accepted { border-color: var(--pine); color: var(--pine); }
.inv-sub { display: block; margin-top: .2rem; font-size: .78rem; color: var(--muted); white-space: nowrap; }

/* The list: filter tabs and search, then the table, then what to do with the selection. */
.inv-tools { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem 1.5rem; margin: 1.5rem 0 1rem; }
.inv-filter { display: flex; flex-wrap: wrap; gap: .25rem; }
.inv-filter a { padding: .45rem .8rem; border-radius: 999px; color: var(--ink); font-weight: 700; font-size: .93rem; text-decoration: none; border: 1.5px solid transparent; }
.inv-filter a span { color: var(--muted); font-weight: 400; margin-left: .2rem; font-variant-numeric: tabular-nums; }
.inv-filter a:hover { background: var(--pine-soft); }
.inv-filter a[aria-current="page"] { border-color: var(--pine); background: var(--pine-soft); color: var(--pine); }
.inv-filter a.is-overdue:not([aria-current]) { color: var(--error); }
.inv-search { display: flex; gap: .5rem; align-items: center; flex: 0 1 22rem; }
.inv-search input { flex: 1; min-width: 0; min-height: 2.6rem; padding: 0 .8rem; border: 1.5px solid var(--line); border-radius: var(--radius-control);
  background: var(--surface); color: var(--ink); font: inherit; }
.inv-search .secondary { min-height: 2.6rem; padding: 0 .9rem; }
.inv-search a { color: var(--pine); font-weight: 700; font-size: .92rem; }
.inv-table td, .inv-table th { vertical-align: middle; }
.inv-table .inv-pick { width: 2.2rem; padding-right: 0; }
.inv-table .inv-pick input { width: 1.1rem; height: 1.1rem; accent-color: var(--pine); }
.inv-table th[scope="row"] a, .biz-table th[scope="row"] a { color: var(--ink); text-underline-offset: 3px; }
.inv-table td a { color: var(--pine); font-weight: 700; text-underline-offset: 3px; }
.inv-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .75rem; margin: 1rem 0 0; padding: .8rem 1rem;
  border: 1px solid var(--line); border-radius: var(--radius-sheet); background: var(--surface); }
.inv-actions span { font-size: .92rem; font-weight: 700; color: var(--muted); margin-right: .25rem; }
.inv-actions .secondary { min-height: 2.4rem; padding: 0 .9rem; font-size: .93rem; }
.inv-actions button:disabled { opacity: .45; cursor: default; }
.biz-danger-link { color: var(--error); font-weight: 700; }
.biz-danger-button.primary { background: var(--error); border-color: var(--error); color: #fff; }
.inv-csv { margin-top: 1rem; font-size: .93rem; }
.inv-csv a { color: var(--pine); font-weight: 700; }
.inv-keep { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .75rem; margin: 1.25rem 0 .5rem; }
.inv-keep .inv-field { margin: 0; min-width: 14rem; }
.inv-keep .secondary { min-height: 2.75rem; }
#files .app-use { max-width: 26rem; margin-top: 1rem; }

/* One invoice. */
.inv-back { margin: 0 0 .5rem; font-size: .93rem; }
.inv-back a { color: var(--pine); font-weight: 700; }
.inv-head { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; }
.inv-head .inv-status { font-size: .9rem; }
.inv-facts { display: grid; grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr)); gap: 1rem 2rem; margin: 1.5rem 0; padding: 1.25rem 1.4rem;
  border: 1px solid var(--line); border-radius: var(--radius-sheet); background: var(--surface); max-width: 44rem; }
.inv-facts dt { font-size: .85rem; font-weight: 700; color: var(--muted); }
.inv-facts dd { margin: .2rem 0 0; font-size: 1.02rem; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.inv-detail-actions { align-items: center; }
.inv-detail-actions form { margin: 0; }
.inv-detail-actions .secondary { min-height: 2.85rem; }
.inv-detail-actions .biz-button { min-height: 2.85rem; padding: 0 1.3rem; display: inline-flex; align-items: center; }

/* The New invoice form: lines as a compact table. */
.ni-new[hidden] { display: none; }
.ni-lines-section { grid-template-columns: 1fr !important; }
.ni-lines { min-width: 44rem; }
.ni-lines th { font-size: .82rem; white-space: nowrap; }
.ni-lines td { padding: .3rem .3rem .3rem 0; }
.ni-lines input, .ni-lines select { width: 100%; min-height: 2.5rem; padding: 0 .55rem; border: 1.5px solid var(--line); border-radius: var(--radius-control);
  background: var(--surface); color: var(--ink); font: inherit; font-size: .95rem; }
.ni-lines td:nth-child(1) { width: 8rem; } .ni-lines td:nth-child(3) { width: 4.5rem; } .ni-lines td:nth-child(4) { width: 7.5rem; }
.ni-lines td:nth-child(5) { width: 8rem; } .ni-lines td:nth-child(6) { width: 5rem; }
.ni-lines input:focus, .ni-lines select:focus { outline: 3px solid color-mix(in srgb, var(--pine) 40%, transparent); border-color: var(--pine); }
.ni-under { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem; margin: .75rem 0; }
.ni-total { font-size: 1.02rem; font-variant-numeric: tabular-nums; }
.ni-form .pv-duty { margin-top: 1.5rem; }

/* Invoices from a spreadsheet: step 1 folds to one line once a file is loaded. */
.app-step.is-folded > :not(h2):not(.app-step-fold) { display: none; }
.app-step:not(.is-folded) > .app-step-fold { display: none; }
.app-step-fold { margin: .4rem 0 0; color: var(--muted); }
.app-step.is-folded { padding-bottom: 1.5rem; }
.app-step-fold .link-button { color: var(--pine); font-weight: 700; margin-left: .35rem; }

/* Plans: the usual choice stands out; what every plan has is said once. */
.biz-plan.is-recommended { border: 2px solid var(--pine); }
.biz-plan-tag { align-self: flex-start; margin: 0 0 .25rem; padding: .15rem .6rem; border-radius: 999px; background: var(--pine); color: var(--pine-ink);
  font-size: .8rem; font-weight: 700; }
.biz-every { max-width: 44rem; margin: 1.25rem 0 0; color: var(--ink); line-height: 1.55; }

/* The phone menu: one button naming the page you're on; the full list opens under it. */
.app-menu-toggle { display: none; }
.app-phone-only { display: none; }
@media (max-width: 56rem) {
  .app-side { position: relative; overflow: visible; }
  .app-menu-toggle:not([hidden]) { display: inline-flex; align-items: center; gap: .5rem; order: 2; margin-left: auto; min-height: 2.6rem; padding: 0 .9rem;
    border: 1.5px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--ink); font: inherit; font-size: .93rem; cursor: pointer; }
  .app-menu-toggle[aria-expanded="true"] { border-color: var(--pine); }
  .app-menu-icon { width: 1rem; height: .75rem; background: linear-gradient(currentColor 0 0) top / 100% 2px no-repeat, linear-gradient(currentColor 0 0) center / 100% 2px no-repeat,
    linear-gradient(currentColor 0 0) bottom / 100% 2px no-repeat; }
  .has-menu .app-nav { display: none; -webkit-mask-image: none; mask-image: none; padding-right: 0; }
  .has-menu .app-nav.is-open { display: block; position: absolute; left: 0; right: 0; top: 100%; z-index: 40; padding: .75rem 1rem 1rem;
    background: var(--paper); border-bottom: 1px solid var(--line); box-shadow: 0 12px 24px -16px rgb(0 0 0 / .35); }
  .has-menu .app-nav.is-open ul { display: grid; gap: .1rem; padding: 0 0 .6rem; }
  .has-menu .app-nav.is-open ul + ul { padding-top: .6rem; border-top: 1px solid var(--line); }
  .has-menu .app-nav.is-open a { padding: .6rem .7rem; }
  .app-phone-only { display: inline; }
}

/* On a phone, each invoice is a small card instead of a squeezed row. */
@media (max-width: 40rem) {
  .inv-table, .inv-recent { min-width: 0; }
  .inv-table thead { display: none; }
  .inv-table tr, .inv-recent tr { display: grid; gap: .2rem .75rem; padding: .8rem 0; border-bottom: 1px solid var(--line); align-items: center; }
  .inv-table td, .inv-table th, .inv-recent td, .inv-recent th { display: block; padding: 0; border: 0; text-align: left; }
  .inv-table tr { grid-template-columns: 1.6rem minmax(0, 1fr) auto; grid-template-areas: "pick num status" "pick cust total" "pick date file"; }
  .inv-table tr > :nth-child(1) { grid-area: pick; align-self: start; padding-top: .15rem; }
  .inv-table tr > :nth-child(2) { grid-area: num; }
  .inv-table tr > :nth-child(3) { grid-area: date; color: var(--muted); font-size: .9rem; }
  .inv-table tr > :nth-child(4) { grid-area: cust; }
  .inv-table tr > :nth-child(5) { grid-area: total; text-align: right; font-weight: 700; }
  .inv-table tr > :nth-child(6) { display: none; }
  .inv-table tr > :nth-child(7) { grid-area: status; justify-self: end; }
  .inv-table tr > :nth-child(8) { grid-area: file; justify-self: end; font-size: .9rem; }
  .inv-recent tr { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "num status" "cust total" "date date"; }
  .inv-recent tr > :nth-child(1) { grid-area: num; }
  .inv-recent tr > :nth-child(2) { grid-area: date; color: var(--muted); font-size: .9rem; }
  .inv-recent tr > :nth-child(3) { grid-area: cust; }
  .inv-recent tr > :nth-child(4) { grid-area: total; text-align: right; font-weight: 700; }
  .inv-recent tr > :nth-child(5) { grid-area: status; justify-self: end; }
  .inv-tools { align-items: stretch; }
  .inv-search { flex-basis: 100%; }
}

/* One invoice: the less frequent actions as one quiet row; links to related documents. */
.inv-more { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1.4rem; margin: 1.5rem 0 .5rem; padding-top: 1.1rem; border-top: 1px solid var(--line); max-width: 44rem; }
.inv-more form { margin: 0; }
.inv-more a:not(.biz-button) { color: var(--pine); font-weight: 700; text-underline-offset: 3px; }
.inv-more .secondary, .inv-more .biz-button { min-height: 2.6rem; padding: 0 1rem; display: inline-flex; align-items: center; }
.inv-link { margin: .25rem 0 0; }
.inv-link a { color: var(--pine); font-weight: 700; }
.inv-repeat { display: grid; gap: 1rem; max-width: 26rem; }
.inv-row-actions { display: flex; gap: 1rem; margin: 0; }
.inv-sub.is-error { color: var(--error); white-space: normal; }

/* Plans: monthly or yearly. */
.biz-billing { display: inline-flex; gap: .25rem; margin: 1.25rem 0 0; padding: .25rem; border: 1.5px solid var(--line); border-radius: 999px; background: var(--surface); }
.biz-billing a { padding: .45rem 1rem; border-radius: 999px; color: var(--ink); font-weight: 700; font-size: .93rem; text-decoration: none; }
.biz-billing a[aria-current="page"] { background: var(--pine); color: var(--pine-ink); }
.biz-price-sub { margin: -.2rem 0 0; color: var(--muted); font-size: .9rem; }
.biz-logo img { max-width: 16rem; max-height: 6rem; padding: .5rem; background: #fff; border: 1px solid var(--line); border-radius: var(--radius-control); }
#logo { display: grid; grid-template-columns: 14rem minmax(0, 1fr); gap: 1.5rem 2rem; }
#logo .app-section-head { margin: 0; }
#logo .app-section-head p { font-size: .92rem; }
@media (max-width: 56rem) { #logo { grid-template-columns: 1fr; } }
.inv-csv { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; }
.inv-period { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .75rem; margin: 0 0 1rem; }
.inv-period .inv-field { margin: 0; min-width: 10rem; }
.inv-export-sum { margin: 0 0 .5rem; }
.inv-datev .inv-grid { margin-bottom: .5rem; }

/* Several companies: which one is open, in the side menu; the list of people with access. */
.app-company { display: grid; gap: .1rem; margin: 0 .2rem; padding: .6rem .7rem; border: 1.5px solid var(--line); border-radius: var(--radius-control);
  background: var(--surface); color: var(--ink); text-decoration: none; font-size: .88rem; }
.app-company span:first-child { color: var(--muted); font-size: .78rem; font-weight: 700; }
.app-company strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.app-company-switch { color: var(--pine); font-weight: 700; font-size: .82rem; }
.app-company:hover { border-color: var(--pine); }
@media (max-width: 56rem) { .app-company { order: 2; margin: 0; padding: .35rem .6rem; } .app-company span:first-child { display: none; } }
.biz-companies tr.is-here th { color: var(--pine); }
.biz-companies form { margin: 0; }
.biz-people { list-style: none; margin: 0 0 1rem; padding: 0; }
.biz-people li { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem 1rem; padding: .6rem 0; border-bottom: 1px solid var(--line); }
.biz-people form { margin: 0; }

/* Guides: articles to read, so a calm measure and room between sections. */
.crumbs { font-size: .95rem; margin-bottom: .5rem; }
.crumbs a { color: var(--pine); font-weight: 700; text-underline-offset: 3px; }
.guide-meta { color: var(--muted); font-size: .95rem; margin: .8rem 0 0; }
.guide-body { max-width: 40rem; }
.guide-body h2 { font-size: 1.35rem; margin: 2.25rem 0 .5rem; letter-spacing: -.01em; }
.guide-body p, .guide-body li { line-height: 1.65; }
.guide-body ul { padding-left: 1.25rem; }
.guide-body li { margin-bottom: .55rem; }
.guide-body a, .guide-list a, .guide-related a { color: var(--pine); font-weight: 700; text-underline-offset: 3px; }
.guide-cta { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 2.25rem; padding: 1.1rem; border: 1.5px solid var(--line);
  border-radius: var(--radius-sheet); background: var(--pine-soft); }
.guide-cta a { display: inline-flex; align-items: center; min-height: 2.9rem; padding: 0 1.2rem; text-decoration: none; }
.guide-cta .secondary { background: var(--surface); }
.guide-note { color: var(--muted); font-size: .9rem; margin-top: 1.25rem; max-width: 40rem; }
.guide-related { margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1.5px solid var(--line); }
.guide-related h2 { font-size: 1.15rem; margin: 0 0 .6rem; }
.guide-related ul, .guide-list { list-style: none; padding: 0; margin: 0; }
.guide-related li { margin-bottom: .45rem; }
.guide-list { margin-top: 2rem; display: grid; gap: 1.5rem; max-width: 40rem; }
.guide-list h2 { font-size: 1.2rem; margin: 0 0 .3rem; line-height: 1.3; }
.guide-list p { margin: 0; color: var(--muted); line-height: 1.55; }
.inv-french { display: grid; gap: .2rem; }
.inv-french .inv-check { margin-top: .4rem; }

/* Discounts, surcharges, down payments and early payment */
.inv-extra { margin-top: 1rem; }
.inv-fold > summary { cursor: pointer; font-weight: 700; color: var(--pine); padding: .3rem 0; }
.inv-fold[open] > summary { margin-bottom: .6rem; }
.inv-fold .inv-grid { grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr)); }
.inv-prep { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, .8fr) minmax(0, .8fr) 2rem; align-items: end; margin-bottom: .5rem; }
.inv-prep .inv-remove { align-self: end; margin-bottom: .35rem; }
#prep-box { margin: .9rem 0; }
.inv-skonto { margin-top: 1rem; }
@media (max-width: 40rem) {
  .inv-prep { grid-template-columns: 1fr 1fr; }
  .inv-prep .inv-remove { grid-column: 2; justify-self: end; }
}
.ni-more .inv-fold { margin-top: 1rem; }
.ni-partials { border: 0; padding: 0; margin: 1rem 0 0; display: grid; gap: .35rem; }
.ni-partials legend { font-weight: 700; margin-bottom: .4rem; padding: 0; }
.ni-skonto { margin-top: 1rem; }
.ni-lines td:nth-child(7) { width: 5rem; }
.ni-lines-section > div, .ni-more > div { min-width: 0; }
.ni-lines-section .biz-table-wrap { max-width: 100%; overflow-x: auto; }

/* Filekin for Business: what a subscription includes */
.biz-callout { margin: 2rem 0 0; padding: 1rem 1.2rem; border: 1.5px solid var(--pine); border-radius: var(--radius-sheet); background: var(--pine-soft); max-width: 46rem; }
.biz-callout p { margin: 0; }
.biz-groups { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem 2.5rem; margin-top: 1rem; }
.biz-group h3 { font: 700 1.15rem/1.3 var(--display); margin: 0 0 .4rem; }
.prose-page .biz-group .biz-features li { max-width: none; }
.biz-trust { color: var(--muted); max-width: 46rem; margin-top: 1.5rem; }
.biz-prices .biz-sub { color: var(--muted); font-size: .85rem; white-space: nowrap; }
@media (max-width: 52rem) { .biz-groups { grid-template-columns: 1fr; } }
.biz-plan-for { color: var(--muted); font-size: .92rem; margin: .2rem 0 .6rem; }
.biz-every { margin-top: 2.5rem; max-width: none; }
.biz-every h2 { font-size: 1.35rem; margin: 0 0 .3rem; }
.prose-page .biz-every-list, .biz-every-list { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); gap: .45rem 1.5rem; }
/* Invoice numbers, dates and amounts stay on one line: "RE-2026-0010" split in two is hard to read. */
.inv-table th[scope="row"], .inv-table td:nth-child(3), .inv-table td:nth-child(6), .inv-table .num { white-space: nowrap; }