/* FinOpsWay site styles.
 *
 * Every colour here is one the extension already uses, so the site and the
 * product cannot drift: #0e1418 is the dark Databricks nav the chip sits in,
 * #eef3f5 the amount, #7c868d the muted ink, #3ddc97 the healthy lamp, and
 * #e8452c the brand red. The one addition is #3f6a7d for the timeline's
 * reported span - deliberately not a lamp colour, because the lamp colours are
 * status and the timeline is not reporting a status. */

:root {
  --ink: #0e1418;
  --ink-lift: #1d252b;
  --pale: #eef3f5;
  --muted: #7c868d;
  --red: #e8452c;
  --mint: #3ddc97;
  --span: #3f6a7d;

  --paper: #f7f9fa;
  --surface: #ffffff;
  --fg: #1b3139;
  --fg-soft: #4d626c;
  --border: #e2e8eb;

  --measure: 64ch;
  --pad: clamp(20px, 5vw, 48px);

  --sans: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: Consolas, "SF Mono", ui-monospace, "Cascadia Mono", monospace;
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper: #12191d;
    --surface: #182227;
    --fg: #eef3f5;
    --fg-soft: #a8b8c0;
    --border: #26333a;
  }
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--fg);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

p {
  margin: 0;
  max-width: var(--measure);
}

code {
  font-family: var(--mono);
  font-size: 0.87em;
}

a {
  color: var(--red);
}

a:focus-visible,
.skip:focus-visible {
  outline: 2px solid var(--red);
  outline-offset: 3px;
  border-radius: 2px;
}

/* Keyboard users get to the content without walking the nav. */
.skip {
  position: absolute;
  left: -9999px;
}
.skip:focus {
  left: 12px;
  top: 12px;
  z-index: 2;
  background: var(--pale);
  color: var(--ink);
  padding: 8px 14px;
  border-radius: 3px;
}

/* ---------- masthead ------------------------------------------------------ */
/* Flat, not a gradient: the header glyph knocks its ring out in var(--ink),
 * which only disappears if the background behind it is one colour. */
.masthead {
  background: var(--ink);
  color: var(--pale);
  padding: 0 var(--pad) clamp(56px, 9vw, 96px);
}

.bar {
  max-width: 960px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
  padding: 22px 0;
}

.lockup {
  display: flex;
  align-items: center;
  gap: 11px;
  text-decoration: none;
}

.glyph {
  width: 32px;
  height: 32px;
  flex: 0 0 auto;
}

.wordmark {
  font-size: 21px;
  font-weight: 800;
  letter-spacing: -0.5px;
  line-height: 1;
}
.wordmark.small {
  font-size: 17px;
}
.wm-red {
  color: var(--red);
}
.wm-pale {
  color: var(--pale);
}

.nav {
  margin-left: auto;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
  font-size: 15px;
}
.nav a {
  color: var(--muted);
  text-decoration: none;
}
.nav a:hover {
  color: var(--pale);
}

.hero {
  max-width: 960px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 22px;
  padding-top: clamp(28px, 5vw, 52px);
}

h1 {
  font-size: clamp(30px, 5.4vw, 46px);
  line-height: 1.08;
  letter-spacing: -0.025em;
  font-weight: 800;
  text-wrap: balance;
  margin: 0;
  max-width: 24ch;
}

.standfirst {
  font-size: clamp(17px, 2.2vw, 20px);
  color: #b6c2c9;
  max-width: 58ch;
}
.standfirst em {
  color: var(--pale);
  font-style: italic;
}

/* ---------- the two clocks ------------------------------------------------ */
/* The gap is the argument, so the clocks render before the headline. "Your
 * clock" is deliberately hollow - the present is the part with no data in it
 * yet - and the stroke fallback keeps it legible where text-stroke is not
 * supported.
 *
 * The composition is the store promo tile's: three equal columns over one
 * bar, with the hatch starting at the third column (see .timebar-known and
 * .timelabels-known - the fractions must agree), so the difference clock
 * sits exactly over the hours nobody has data for. */
.clocks {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  align-items: start;
  gap: 20px;
}

.clk {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.clk-label {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}

.clk-time {
  font-size: clamp(40px, 8vw, 72px);
  font-weight: 800;
  letter-spacing: -0.045em;
  line-height: 0.95;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.clk-now .clk-time {
  color: #55636b;
}
@supports (-webkit-text-stroke: 1px black) {
  .clk-now .clk-time {
    color: transparent;
    -webkit-text-stroke: 1.5px #55636b;
  }
}

.clk-known .clk-time {
  color: var(--pale);
}

.clk-gap .clk-label {
  color: var(--red);
}
.clk-gap .clk-time {
  color: var(--red);
  font-size: clamp(26px, 4.6vw, 42px);
}

/* ---------- the timeline -------------------------------------------------- */
/* One bar, two textures: solid for the hours billing has reported, hatched
 * for the hours since. The hatch is the extension's own overhang idiom. */
/* Full hero width, not a capped one: the clocks grid above shares the 78%
 * split, and the two only line up if they are the same width. */
.timeline {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.timebar {
  display: flex;
  height: 14px;
  border-radius: 3px;
  overflow: hidden;
  border: 1px solid #212c33;
}

.timebar-known {
  /* Two clock columns of the three above, so the hatch starts under the
   * difference clock. The gap between columns keeps this exact enough. */
  flex: 0 0 66.666%;
  background: var(--span);
}

.timebar-gap {
  flex: 1;
  background-color: #141d22;
  background-image: repeating-linear-gradient(
    45deg,
    transparent 0 3px,
    rgba(238, 243, 245, 0.35) 3px 5px
  );
}

.timelabels {
  display: flex;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--muted);
}
.timelabels-known {
  flex: 0 0 66.666%;
}
.timelabels-gap {
  white-space: nowrap;
}

.caption {
  font-size: 14.5px;
  color: var(--muted);
  max-width: 56ch;
}

/* ---------- sections ----------------------------------------------------- */
/* The +2*--pad keeps the CONTENT box at 960px, so section text lines up with
 * the masthead's .bar and .hero, which are 960px inside the masthead's own
 * horizontal padding. A flat max-width:960px here would inset them by --pad
 * relative to the header and read as a wobble down the left edge. */
.section {
  max-width: calc(960px + var(--pad) * 2);
  margin: 0 auto;
  padding: clamp(44px, 7vw, 76px) var(--pad);
  display: flex;
  flex-direction: column;
  gap: 20px;
  border-bottom: 1px solid var(--border);
}
.section:last-child {
  border-bottom: none;
}

h2 {
  font-size: clamp(22px, 3vw, 27px);
  letter-spacing: -0.02em;
  line-height: 1.2;
  font-weight: 700;
  margin: 0;
}

h3 {
  font-size: 17px;
  letter-spacing: -0.01em;
  font-weight: 700;
  margin: 0;
}

.lead {
  color: var(--fg-soft);
}

.note {
  font-size: 15px;
  color: var(--fg-soft);
}

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 18px;
}

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 20px 20px 22px;
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.card p {
  font-size: 15.5px;
  color: var(--fg-soft);
  max-width: none;
}

/* ---------- the screenshot and its callouts ------------------------------- */
/* The shot is dark workspace UI, so on the light theme it needs a frame to read
 * as a screen rather than a hole in the page: ink ground, hairline, radius. The
 * figure is the positioning context for the pins. */
.shot {
  position: relative;
  margin: 0;
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
  background: var(--ink);
  line-height: 0; /* kills the inline-image descender gap under the frame */
}
.shot img {
  display: block;
  width: 100%;
  height: auto;
}

/* Numbered pins, placed in percentages against the crop they were measured on
 * (988x700). Replacing the image means re-measuring them - there is no way to
 * make a pin track a picture. The ring is the page ground, not a colour, so the
 * pin reads on either theme and over any part of the shot. */
.pin {
  position: absolute;
  transform: translate(-50%, -50%);
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background: var(--red);
  color: #fff;
  font-size: 14px;
  font-weight: 800;
  line-height: 25px;
  text-align: center;
  box-shadow: 0 0 0 3px rgba(14, 20, 24, 0.7);
}

/* The legend under the shot, not beside it: a side column would squeeze the
 * image to about 600px, and the popover's own type would stop being readable -
 * which defeats showing a screenshot at all. */
.callouts {
  list-style: none;
  counter-reset: callout;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px 24px;
}
/* The row gap is tiny on purpose: it separates a heading from its own sentence,
 * not one callout from the next - that is the parent grid's 20px. */
.callouts li {
  counter-increment: callout;
  display: grid;
  grid-template-columns: 25px 1fr;
  column-gap: 10px;
  row-gap: 2px;
  font-size: 15px;
  color: var(--fg-soft);
}
/* Same disc as .pin, so the eye pairs number to number without being told. */
.callouts li::before {
  content: counter(callout);
  grid-row: 1 / 3;
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background: var(--red);
  color: #fff;
  font-size: 14px;
  font-weight: 800;
  line-height: 25px;
  text-align: center;
}
.callouts b {
  color: var(--fg);
  font-weight: 700;
}

/* ---------- chip anatomy -------------------------------------------------- */
/* Each term opens with the fragment of the chip it names, rendered in the
 * chip's own colours. The pills are literal product colours on both themes,
 * because they depict the product rather than the page. */
/* minmax(300px), not the cards' 240px: four parts at 240 break 3+1 inside the
 * 960px measure and orphan the horizon on its own row; 300 makes it a 2x2. */
.anatomy {
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 18px;
}

.part {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 18px 20px 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.part dt {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  font-size: 16px;
}

.part dd {
  margin: 0;
  font-size: 15px;
  color: var(--fg-soft);
}

.chipbit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: var(--ink-lift);
  border: 1px solid #2c363d;
  border-radius: 999px;
  padding: 5px 11px;
  min-width: 34px;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  flex: 0 0 auto;
}

.bit-amount {
  color: var(--pale);
  font-weight: 700;
}
.bit-denom,
.bit-window {
  color: var(--muted);
}

/* ---------- facts ------------------------------------------------------- */
.facts {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: 4px;
  overflow: hidden;
}

.fact {
  background: var(--surface);
  padding: 15px 20px;
  display: grid;
  grid-template-columns: 130px 1fr;
  gap: 18px;
  align-items: baseline;
}

/* --fg-soft, not --muted: #7c868d is 4.81:1 on the dark masthead but only
 * 3.75:1 on a white card, which fails AA for 11px text. --fg-soft is 6.31:1
 * light and 7.97:1 dark. */
.fact dt {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--fg-soft);
}

.fact dd {
  margin: 0;
  font-size: 15.5px;
  color: var(--fg-soft);
}

/* ---------- get it -------------------------------------------------------- */
.getrow {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.cta {
  display: inline-block;
  background: var(--red);
  color: #ffffff;
  text-decoration: none;
  font-weight: 600;
  font-size: 15px;
  padding: 11px 18px;
  border-radius: 4px;
}
.cta:hover {
  filter: brightness(1.08);
}

.cta.ghost {
  background: transparent;
  color: var(--red);
  border: 1px solid var(--red);
}
.cta.ghost:hover {
  filter: none;
  background: color-mix(in srgb, var(--red) 8%, transparent);
}

/* ---------- prose (the privacy policy) ---------------------------------- */
/* Used as `class="section prose"`, so it inherits the section's centred
 * measure and flex-column gap. It must undo the section's rule: .prose is
 * declared after .section at equal specificity, so it wins. */
.prose {
  border-bottom: none;
}

.prose-title {
  font-size: clamp(28px, 4.4vw, 38px);
  line-height: 1.1;
  letter-spacing: -0.025em;
  font-weight: 800;
  margin: 0;
}

.prose-meta {
  color: var(--fg-soft);
  font-size: 15.5px;
}

/* Extra air above a heading than the section's flex gap alone gives, so the
 * policy reads as sections rather than one undifferentiated column. */
.prose h2 {
  margin-top: 18px;
}

.prose ul {
  margin: 0;
  padding-left: 22px;
  max-width: var(--measure);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.prose code {
  background: color-mix(in srgb, var(--fg) 7%, transparent);
  border-radius: 3px;
  padding: 1px 5px;
}

/* No hero underneath, so the masthead does not need the hero's bottom room. */
.masthead.is-compact {
  padding-bottom: 0;
}

/* ---------- footer ------------------------------------------------------ */
.footer {
  background: var(--ink);
  color: var(--muted);
  padding: 0 var(--pad);
  margin-top: clamp(24px, 5vw, 48px);
}
.footer-id {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

/* No margin-left:auto here - .nav already claims the free space, and two
 * competing autos would split it and pull the tagline off the wordmark. */
.colophon {
  font-size: 14.5px;
  color: var(--muted);
}

/* Its own row under the footer bar rather than a third item inside it, which
 * would fight the nav for the same line. It sits OUTSIDE .bar, so it has to
 * repeat that column itself - and it overrides the 64ch measure every other
 * `p` carries, or a one-line notice wraps for no reason. */
.legal {
  max-width: 960px;
  margin: 0 auto;
  padding: 0 0 20px;
  font-size: 13px;
  color: var(--muted);
}

/* Brand red on the ink footer reads as a call to action; a boilerplate line
 * should not shout. Underlined so it is still visibly a link. */
.legal a {
  color: var(--muted);
  text-decoration-color: var(--span);
}
.legal a:hover {
  color: var(--pale);
}

/* The three clocks hold ONE row all the way down: your clock, the bill's clock,
 * the difference, left to right over the bar the difference sits above. What
 * gives way is the type scale, never the row - wrapping it puts the difference
 * under a clock instead of over the hatch, and the composition is the argument.
 *
 * `.clk` goes display:contents so the labels share grid row 1 and the times row
 * 2. Without that, a label that wraps ("your bill's clock" is the long one)
 * pushes its own time down and the three times stop lining up. */
@media (max-width: 720px) {
  .clocks {
    grid-auto-flow: column;
    grid-template-rows: auto auto;
    align-items: end;
    gap: 6px 12px;
  }
  .clk {
    display: contents;
  }
  .clk-label {
    font-size: 9.5px;
    letter-spacing: 0.08em;
  }
  .clk-time {
    font-size: clamp(24px, 7.6vw, 44px);
  }
  .clk-gap .clk-time {
    font-size: clamp(17px, 5vw, 30px);
  }

  /* The narrow crop takes over here (see the <picture> in index.html), and the
   * pins were measured against the wide one. Hiding them is the honest move:
   * placed on a different crop they would point at the wrong thing. */
  .pin {
    display: none;
  }
  /* One column: the legend now reads as a list, since it no longer has pins to
   * pair with, and four 200px columns would shrink the text to fit. */
  .callouts {
    grid-template-columns: 1fr;
    gap: 14px;
  }
}

@media (max-width: 560px) {
  .fact {
    grid-template-columns: 1fr;
    gap: 4px;
  }

  /* The lockup fills the row on its own, so `margin-left: auto` strands the
   * links against the right edge one line below it - a header split down the
   * middle with nothing between. Dropping it lines the nav up with the lockup,
   * the hero text and everything else on the left edge. Both bars, header and
   * footer, wrap the same way and want the same fix. */
  .nav {
    margin-left: 0;
  }

  /* The 78% basis plus a nowrap label overflows a phone; let the reported
   * label shrink and the hatched label wrap instead. */
  .timelabels-known {
    flex: 1 1 auto;
  }
  .timelabels-gap {
    white-space: normal;
    text-align: right;
  }
}