/* Shared by every page: the look from the FinDash Figma file (the "Area" kit),
   so every page is visibly one product.

     - the typefaces, served from this site
     - the colours, light first, with a dark version under data-theme="dark"
     - type: serif headings, plain body text, small mono captions
     - buttons, the nav bar along the top and the footer
     - the bar along the bottom of the screen that holds the cookie notice
       (and, on the home page, the sticky button on phones)

   Each page's own stylesheet (dashboard.css, landing.css, …) only adds what
   that page has that others don't. docs/design/DESIGN-SYSTEM.md explains the parts. */

/* The kit's three typefaces, served from this site rather than Google Fonts:
   one request fewer before anything shows, and no visitor's address sent to
   Google. All three are under the SIL Open Font License
   (frontend/fonts/LICENSE-*.txt). DM Sans and Roboto Mono are variable fonts, so
   one file covers every weight. */
@font-face {
  font-family: "DM Sans";
  font-style: normal;
  font-weight: 100 1000;
  font-display: swap;
  src: url("/fonts/dm-sans.woff2") format("woff2");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: "Crimson Text";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/crimson-text.woff2") format("woff2");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: "Roboto Mono";
  font-style: normal;
  font-weight: 100 700;
  font-display: swap;
  src: url("/fonts/roboto-mono.woff2") format("woff2");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

/* ---- colours ----
   Light is the kit's own palette; the page opens in it. Dark is drawn from
   the same colours for anyone who switches (theme-toggle.js). */
:root {
  color-scheme: light;
  --ground: #ffffff;        /* the page */
  --card: #ffffff;          /* cards and panels, told apart by --line */
  --card-2: #f5f5f3;        /* text boxes, chips, a surface inside a card */
  --surface: #e4e4e4;       /* the kit's light grey: arrow buttons, toggles */
  --line: #e9e9e9;          /* dividers and borders */
  --line-soft: #f1f1f1;
  --line-strong: #929292;   /* the darker rule above a big section */
  --ink: #000000;           /* headings and main text */
  --ink-2: #6f6f6f;         /* paragraphs */
  --ink-3: #737373;         /* labels and hints, still readable on white */
  --ink-faint: #929292;     /* only for large figures, such as the 01 02 03 of steps */

  /* The brand colour, olive, for buttons, links and focus. The money colours
     below are kept clearly apart from it: profit is a bluer green, a loss is
     red, so a button never reads as good or bad news. */
  --accent: #485c11;
  --accent-ink: #ffffff;    /* text on --accent */
  --accent-soft: #dfecc6;   /* the pale green of soft buttons, tags, selection */
  --accent-soft-ink: #000000;
  --accent-hover: #8e9c78;  /* sage, what a button turns on hover */
  --caption: #485c11;       /* the small mono captions above headings */

  --positive: #15803d;      /* profit, good news */
  --critical: #c62828;      /* loss, over budget, errors */

  /* The dashboard's four cost groups and what's left as profit. */
  --s1: #2f7d6d;            /* direct costs: teal */
  --s2: #3f6fd0;            /* operating costs: blue */
  --s3: #c8742a;            /* variable overhead: ochre */
  --s4: #8a5cc7;            /* fixed overhead: violet */
  --rest: #15803d;          /* profit remainder */

  --font-sans: "DM Sans", ui-sans-serif, system-ui, sans-serif;
  --font-serif: "Crimson Text", ui-serif, Georgia, "Times New Roman", serif;
  --mono: "Roboto Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --radius: 20px;           /* cards */
  --radius-control: 12px;   /* text boxes, small buttons */
  --radius-image: 30px;     /* photos */
  --radius-pill: 1000px;    /* buttons */
  --shadow-card: 0 2px 8px rgba(0, 0, 0, 0.08);
  --page-width: 1200px;
  --gutter: clamp(20px, 3.4vw, 40px);
}

html[data-theme="dark"] {
  color-scheme: dark;
  --ground: #0e100b;
  --card: #15180f;
  --card-2: #1c2016;
  --surface: #262a1f;
  --line: #2b2f24;
  --line-soft: #20231a;
  --line-strong: #5d6253;
  --ink: #f3f4ee;
  --ink-2: #b7baae;
  --ink-3: #9a9e90;
  --ink-faint: #6f7366;
  --accent: #c2d69a;
  --accent-ink: #141a05;
  --accent-soft: #2e3819;
  --accent-soft-ink: #e7f0d3;
  --accent-hover: #8e9c78;
  --caption: #b8cc8c;
  --positive: #34d399;
  --critical: #f87171;
  --s1: #4fb8a3;
  --s2: #6c95ef;
  --s3: #e39a55;
  --s4: #b294ec;
  --rest: #34d399;
  --shadow-card: 0 2px 8px rgba(0, 0, 0, 0.4);
}

* {
  box-sizing: border-box;
}
html {
  -webkit-text-size-adjust: 100%;
}
body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 1.4;
  letter-spacing: -0.005em;
}
a {
  color: inherit;
}
[hidden] {
  display: none !important;
}
/* The way in: before launch, the waitlist's version of a button or
   sentence; once the app is open, the app's. /app-state.js marks the page
   "app-open" before it is drawn (backend/lib/app-gate.js). */
html:not(.app-open) .app-only,
html.app-open .waitlist-only {
  display: none !important;
}
::selection {
  background: var(--accent-soft);
  color: var(--accent-soft-ink);
}
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

/* ---- type ----
   Headings in Crimson Text, tight; body in DM Sans; captions in Roboto Mono. */
.display {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(56px, 12vw, 160px);
  line-height: 0.9;
  letter-spacing: -0.0425em;
}
.heading-1 {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(40px, 5.4vw, 60px);
  line-height: 0.9;
  letter-spacing: -0.03em;
}
.heading-2 {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(30px, 3.6vw, 40px);
  line-height: 1;
  letter-spacing: -0.03em;
}
.heading-3 {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: 18px;
  line-height: 1;
  letter-spacing: -0.03em;
}
.paragraph {
  font-size: 15px;
  line-height: 1.4;
  color: var(--ink-2);
}
/* The small mono line above a heading ("Benefits", "Specs"). */
.caption {
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: -0.01em;
  color: var(--caption);
}

/* ---- buttons ----
   Pills, as in the kit. .button is the soft pale-green one; .button.solid
   the olive one, for the one thing a page most wants done; an arrow after
   the words (.button-arrow) means it leads to another page. */
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  font: inherit;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: -0.025em;
  color: var(--accent-soft-ink);
  background: var(--accent-soft);
  border: 0;
  border-radius: var(--radius-pill);
  padding: 14px 22px;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.button:hover {
  background: var(--accent-hover);
  color: #ffffff;
}
.button.solid {
  background: var(--accent);
  color: var(--accent-ink);
}
.button.solid:hover {
  background: var(--accent-hover);
  color: #ffffff;
}
.button:disabled {
  opacity: 0.55;
  cursor: default;
}
.button-arrow {
  flex: none;
  width: 7px;
  height: 7px;
  transition: transform 0.15s;
}
.button:hover .button-arrow {
  transform: translate(1px, -2px);
}

/* The square arrow buttons (previous, next). */
.arrow-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  border-radius: 10px;
  background: var(--surface);
  color: var(--ink);
  cursor: pointer;
}
.arrow-button:hover {
  background: var(--accent-soft);
  color: var(--accent-soft-ink);
}

/* ---- the nav bar along the top ----
   Written into every page by tools/build-pages.py. The wordmark on the left,
   the links in the middle, the main button on the right; on a phone the
   links fold into a menu. */
.site-nav {
  position: relative;
  z-index: 20;
  max-width: calc(var(--page-width) + 2 * var(--gutter));
  margin: 0 auto;
  padding: 20px var(--gutter) 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 92px;
}
.wordmark {
  font-family: var(--font-sans);
  font-size: 30px;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.05em;
  color: var(--ink);
  text-decoration: none;
  white-space: nowrap;
}
.site-nav .nav-links {
  display: flex;
  align-items: center;
  gap: 28px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, calc(-50% + 10px));   /* level with the wordmark, below the top padding */
}
.site-nav .nav-links a,
.footer-links a {
  font-size: 14px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: -0.025em;
  color: var(--ink);
  text-decoration: none;
  padding: 4px 0;
}
.site-nav .nav-links a:hover,
.footer-links a:hover {
  color: var(--accent);
}
.site-nav .nav-links a[aria-current="page"] {
  text-decoration: underline;
  text-underline-offset: 6px;
  text-decoration-thickness: 2px;
}
.nav-end {
  display: flex;
  align-items: center;
  gap: 12px;
}
.nav-end .login-link {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: -0.025em;
  color: var(--ink);
  text-decoration: none;
  padding: 6px 4px;
}
.nav-end .login-link:hover {
  color: var(--accent);
}

/* The sun and moon button. */
.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  border-radius: 10px;
  background: var(--surface);
  color: var(--ink);
  cursor: pointer;
}
.theme-toggle:hover {
  background: var(--accent-soft);
  color: var(--accent-soft-ink);
}
.theme-toggle .icon-sun {
  display: none;
}
html[data-theme="dark"] .theme-toggle .icon-sun {
  display: block;
}
html[data-theme="dark"] .theme-toggle .icon-moon {
  display: none;
}

/* The phone menu: a <details>, so it opens and closes without a script. */
.nav-menu {
  display: none;
}
.nav-menu > summary {
  list-style: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  cursor: pointer;
  color: var(--ink);
}
.nav-menu > summary::-webkit-details-marker {
  display: none;
}
.nav-menu .icon-close,
.nav-menu[open] .icon-menu {
  display: none;
}
.nav-menu[open] .icon-close {
  display: block;
}
.nav-menu-panel {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  background: var(--card);
  border-radius: 0 0 20px 20px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
  padding: 8px var(--gutter) 32px;
  display: flex;
  flex-direction: column;
  gap: 32px;
}
.nav-menu-panel ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav-menu-panel li a {
  display: block;
  border-top: 1px solid var(--line);
  padding: 26px 0;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: -0.025em;
  color: var(--ink);
  text-decoration: none;
}

@media (max-width: 1040px) {
  .site-nav {
    min-height: 78px;
    padding-top: 16px;
    padding-bottom: 8px;
  }
  .site-nav .nav-links,
  .nav-end > .login-link {
    display: none;
  }
  .nav-menu {
    display: block;
  }
}
/* Small phones: the wordmark, the light and dark switch, Open dashboard
   and the menu all fit on one line. */
@media (max-width: 420px) {
  .site-nav {
    gap: 8px;
  }
  .wordmark {
    font-size: 24px;
  }
  .nav-end {
    gap: 4px;
  }
  .nav-end .button {
    font-size: 13px;
    padding: 10px 13px;
  }
  /* Keep the stock development notice inside the phone's navigation. */
  .nav-end .enter-link:disabled {
    max-width: 130px;
    white-space: normal;
  }
  .theme-toggle,
  .nav-menu > summary {
    width: 36px;
    height: 36px;
  }
}
@media (max-width: 370px) {
  .nav-end .button .button-arrow {
    display: none;
  }
}

/* ---- the footer ----
   Written into every page by tools/build-pages.py. */
.site-footer {
  max-width: calc(var(--page-width) + 2 * var(--gutter));
  margin: 0 auto;
  padding: 0 var(--gutter);
}
.site-footer-inner {
  border-top: 1px solid var(--line);
  padding: 40px 0 20px;
  display: flex;
  flex-direction: column;
  gap: 64px;
}
.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 27px;
}
.footer-note {
  margin: -40px 0 0;
  font-size: 13px;
  color: var(--ink-3);
}
.footer-note:empty {
  display: none;
}
.footer-credits {
  display: flex;
  align-items: flex-end;
  gap: 16px 40px;
  flex-wrap: wrap;
  font-family: var(--mono);
  font-size: 12px;
  line-height: 1.4;
  letter-spacing: -0.01em;
  color: var(--caption);
}
.footer-credits .footer-mark {
  color: var(--ink);
}
.footer-credits .footer-name {
  flex: 1;
}

/* ---- the bar along the bottom of the screen ---- */
.bottom-dock {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 50;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 0 12px 12px;
  pointer-events: none;   /* only its contents take clicks */
}
.bottom-dock > * {
  pointer-events: auto;
}

.cookie-notice {
  width: 100%;
  max-width: 640px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 14px 12px 18px;
  background: var(--card);
  color: var(--ink-2);
  border: 1px solid var(--line);
  border-radius: 20px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
  font: 13px/1.45 var(--font-sans);
  letter-spacing: normal;
  text-transform: none;
}
.cookie-notice p {
  margin: 0;
  flex: 1;
}
.cookie-notice a {
  color: var(--ink);
}
.cookie-notice button {
  font: inherit;
  font-weight: 700;
  background: var(--accent);
  color: var(--accent-ink);
  border: 0;
  border-radius: var(--radius-pill);
  padding: 10px 18px;
  cursor: pointer;
}

/* Questions and answers (the home and restaurant pages). */
.faq-item {
  border-top: 1px solid var(--line);
}
.faq-item summary {
  cursor: pointer;
  padding: 20px 0;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.01em;
  list-style-position: inside;
}
.faq-item p {
  margin: 0 0 20px;
  max-width: 75ch;
  font-size: 15px;
  line-height: 1.5;
  color: var(--ink-2);
}

/* On paper: the FinDash name stays at the top, the links and buttons go. */
@media print {
  .bottom-dock,
  .nav-main,
  .footer-links,
  .footer-credits {
    display: none !important;
  }
  .site-nav,
  .site-footer {
    min-height: 0;
    padding: 0;
  }
  .site-footer-inner {
    border: 0;
    padding: 12px 0 0;
  }
  .footer-note {
    margin: 0;
  }
}