/* Axen Works shared stylesheet. Plain CSS, no framework, no build step. */

:root {
  --bg: #ffffff;
  --surface: #f6f8fa;
  --surface-2: #eef1f5;
  --line: #dfe3e9;
  --ink: #11151b;
  --ink-2: #333c49;
  --muted: #5c6675;
  --accent: #0d5bd1;
  --accent-ink: #0a47a4;
  --accent-soft: #e8f0fe;
  --good: #0a7040;
  --warn: #8a4b00;
  --warn-soft: #fdf3e3;
  --radius: 10px;
  --stick-top: 57px;   /* height of the compact bar, and of the sticky header */
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0f1216;
    --surface: #161a20;
    --surface-2: #1d222a;
    --line: #29303a;
    --ink: #e9ecf1;
    --ink-2: #c7ced8;
    --muted: #97a1af;
    --accent: #6fa8ff;
    --accent-ink: #9cc4ff;
    --accent-soft: #16273f;
    --good: #4fc48b;
    --warn: #e2b06a;
    --warn-soft: #2a2214;
  }
}

* { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  overflow-x: hidden;
  scroll-padding-top: 60px;  /* clears the compact bar on an anchor jump */
}

/* Nothing on this site may push the page sideways. Wide things scroll inside
   their own box, which is what .table-scroll is for. */
img, svg, video, iframe { max-width: 100%; height: auto; }
pre, code { overflow-wrap: break-word; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.6;
}

.wrap { width: 100%; max-width: 1060px; margin: 0 auto; padding: 0 16px; }

/* Header and primary navigation.
   Every calculator is a visible link on every page at every width. Nothing is
   hidden behind a toggle and nothing scrolls off the side, because a menu item
   the visitor cannot see is a menu item that does not exist. On a phone the bar
   wraps to two rows and does not stick, so it costs its height once instead of
   on every scroll: below 800 pixels the compact bar further down takes over
   after 300 pixels of scrolling. From 800 up the row fits beside the brand and
   the whole header sticks. */
.site-head {
  border-bottom: 1px solid var(--line);
  background: var(--bg);
}
.site-head .wrap {
  display: flex;
  align-items: center;
  gap: 6px 16px;
  flex-wrap: wrap;
  padding-top: 6px;
  padding-bottom: 8px;
}
.brand {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ink);
  text-decoration: none;
  font-size: 18px;
  white-space: nowrap;
}
.brand span { color: var(--accent); }

.site-nav {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  font-size: 14px;
  width: 100%;
}
.site-nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 11px;
  border: 1px solid transparent;
  border-radius: 999px;
  color: var(--ink-2);
  text-decoration: none;
  white-space: nowrap;
}
.site-nav a:hover { border-color: var(--line); background: var(--surface); color: var(--accent); }
.site-nav a:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.site-nav a[aria-current="page"] {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--accent-ink);
  box-shadow: inset 0 0 0 1px var(--accent);
}

/* At 320 the seven pills wrapped to three rows and the header ate a third of
   the screen. Tighter pills put them back on two without losing the 44 pixel
   touch target, which is the part that is not negotiable. */
@media (max-width: 359px) {
  .site-nav { gap: 5px; font-size: 13px; }
  .site-nav a { padding: 0 8px; }
}

@media (min-width: 800px) {
  .site-head { position: sticky; top: 0; z-index: 20; }
  /* A sticky bar means an anchor jump lands underneath it. Reserve its height
     so the skip link and every in page link put the target where it can be
     read, not behind the menu. */
  html { scroll-padding-top: 68px; }
  .site-head .wrap { padding-top: 0; padding-bottom: 0; min-height: 56px; gap: 4px 16px; }
  .site-nav { width: auto; margin-left: auto; }
  .site-nav a { min-height: 36px; padding: 0 10px; color: var(--muted); }
}
/* The row only just fits at 800, so it is tightened until there is room again. */
@media (min-width: 800px) and (max-width: 899px) {
  .site-head .wrap { gap: 4px 10px; }
  .site-nav { gap: 4px; }
  .site-nav a { padding: 0 7px; }
}

/* Breadcrumb. A real trail: an ordered list inside a labelled nav, with the
   page you are on marked rather than merely printed. On a phone each step is a
   44 pixel target like every other link on the site. */
.crumb { font-size: 13px; color: var(--muted); padding-top: 4px; }
.crumb ol { display: flex; flex-wrap: wrap; align-items: center; gap: 0 6px; list-style: none; margin: 0; padding: 0; }
.crumb li { display: flex; align-items: center; margin: 0; }
.crumb li + li::before { content: "/"; margin-right: 6px; color: var(--line); }
.crumb a, .crumb [aria-current="page"] { display: inline-flex; align-items: center; min-height: 44px; }
.crumb a { color: var(--muted); }
@media (min-width: 800px) {
  .crumb { padding-top: 14px; }
  .crumb a, .crumb [aria-current="page"] { min-height: 26px; }
}

/* Typography */
h1 { font-size: 28px; line-height: 1.25; letter-spacing: -0.02em; margin: 12px 0 8px; }
h2 { font-size: 21px; line-height: 1.3; letter-spacing: -0.01em; margin: 32px 0 10px; }
h3 { font-size: 17px; margin: 22px 0 6px; }
p { margin: 0 0 14px; }
a { color: var(--accent); }
.lede { font-size: 18px; color: var(--ink-2); max-width: 66ch; }
.prose { max-width: 68ch; }
.prose li { margin-bottom: 8px; }
small, .small { font-size: 14px; }

/* Reading pages narrow the whole column and centre it, instead of leaving a
   68ch paragraph against the left edge of a wrap built for wide tables. */
.page-text > .wrap { max-width: 760px; }
.page-text .lede, .page-text .prose { max-width: 100%; margin-inline: auto; }

/* Every link gets a focus ring, not only the ones in the menu. */
a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 2px; }

@media (min-width: 700px) {
  h1 { font-size: 34px; }
  h2 { font-size: 24px; }
}

/* Tool card */
.tool {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  margin: 18px 0 8px;
  overflow: hidden;
}
.tool-grid { display: grid; grid-template-columns: 1fr; }
@media (min-width: 880px) {
  .tool-grid { grid-template-columns: 1.05fr 0.95fr; }
  .tool-out { border-left: 1px solid var(--line); border-top: 0 !important; }
}
.tool-in { padding: 18px; }
.tool-out { padding: 18px; background: var(--bg); border-top: 1px solid var(--line); }

.working > summary {
  cursor: pointer;
  display: flex;
  align-items: center;
  min-height: 44px;
  font-size: 14px;
  color: var(--accent);
  margin-top: 6px;
}
@media (min-width: 880px) { .working > summary { display: none; } }

.mode-row { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 16px; }
.mode-row button {
  font: inherit;
  font-size: 14px;
  min-height: 44px;
  padding: 8px 14px;
  border: 1px solid var(--line);
  background: var(--bg);
  color: var(--ink-2);
  border-radius: 999px;
  cursor: pointer;
}
.mode-row button[aria-pressed="true"] {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--accent-ink);
  font-weight: 600;
}

.field { margin-bottom: 14px; }
.field > label, .field > .label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--ink-2);
  margin-bottom: 5px;
  text-transform: uppercase;
}
.field .hint { font-size: 13px; color: var(--muted); margin-top: 4px; display: block; }
.row { display: flex; gap: 8px; }
.row > * { min-width: 0; }
.row .grow { flex: 1 1 auto; }

input[type="text"], input[type="number"], select {
  font: inherit;
  width: 100%;
  max-width: 460px;
  padding: 10px 11px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--bg);
  color: var(--ink);
  min-height: 44px;
}
/* The cap above is for standalone forms such as the contact page. Inside a
   calculator a field fills its own column, which is already narrow. */
.tool-grid input[type="text"], .tool-grid input[type="number"], .tool-grid select { max-width: none; }
input[type="number"] { font-family: var(--mono); }
input:focus, select:focus, button:focus {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}
input[aria-invalid="true"] { border-color: #c02020; }
select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%); background-position: calc(100% - 16px) 20px, calc(100% - 11px) 20px; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; padding-right: 32px; }

.check { display: flex; align-items: center; gap: 10px; min-height: 44px; font-size: 14px; color: var(--ink-2); }
.check input { margin: 0; width: 22px; height: 22px; flex: none; }

/* Result */
.result-label { font-size: 13px; text-transform: uppercase; letter-spacing: 0.02em; color: var(--muted); font-weight: 600; }
.result-big {
  font-family: var(--mono);
  font-size: 34px;
  line-height: 1.1;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 6px 0 2px;
  word-break: break-word;
}
@media (min-width: 700px) { .result-big { font-size: 42px; } }
.result-sub { color: var(--muted); font-size: 15px; margin-bottom: 14px; }
.kv { border-top: 1px solid var(--line); margin-top: 12px; padding-top: 12px; }
.kv div { display: flex; justify-content: space-between; gap: 12px; font-size: 15px; padding: 3px 0; }
.kv dt, .kv .k { color: var(--muted); }
.kv .v { font-family: var(--mono); text-align: right; }

.msg { font-size: 14px; padding: 9px 11px; border-radius: 8px; margin: 10px 0 0; }
.msg-warn { background: var(--warn-soft); color: var(--warn); border: 1px solid rgba(138,75,0,0.25); }
.msg-err { background: #fdecec; color: #8a1414; border: 1px solid rgba(138,20,20,0.25); }
@media (prefers-color-scheme: dark) { .msg-err { background: #2a1414; color: #ffb4b4; } }

/* The source line under the answer. Neutral on purpose, not a warning: naming
   the source is what this site promises, so it has to read as information. */
.msg-src { background: var(--surface-2); color: var(--ink-2); border: 1px solid var(--line); }
.msg-src a { color: var(--accent-ink); }

/* On a phone the answer comes first, so somebody arriving from a search for
   "how many hours fit on 128GB" reads the number without scrolling or tapping,
   and it stays there while they work down the fields. A calculator where you
   change a field and cannot see the number change is broken as a tool, not
   merely as a layout. The result column dissolves into the grid so the headline
   can pin on its own and the working can sit after the fields. */
@media (max-width: 879px) {
  .tool { overflow: clip; }  /* clip and not hidden: hidden would kill the pin */
  .tool-grid { display: flex; flex-direction: column; }
  .tool-out { display: contents; }
  .tool-out > * { order: 1; margin: 0 18px 14px; }
  .tool-out > .msg { order: -1; margin-top: 12px; }
  .result-head {
    order: -1;
    position: sticky;
    top: var(--stick-top);
    z-index: 6;
    margin: 0;
    padding: 12px 18px 10px;
    background: var(--bg);
    border-bottom: 1px solid var(--line);
  }
  .result-head > :last-child { margin-bottom: 0; }
}
/* With the on screen keyboard open a phone has about 400 pixels of page left,
   so the pinned answer gets out of its own way. */
@media (max-width: 879px) and (max-height: 520px) {
  .result-head { padding: 8px 18px 6px; }
  .result-big { font-size: 27px; }
  .result-sub { font-size: 14px; margin-bottom: 8px; }
}

/* Notes and callouts */
.note {
  border-left: 3px solid var(--accent);
  background: var(--surface);
  padding: 12px 14px;
  border-radius: 0 8px 8px 0;
  margin: 18px 0;
  font-size: 15px;
}
.note strong { color: var(--ink); }
.byline { font-size: 14px; color: var(--muted); margin: 0 0 18px; }
/* A citation with no date is a citation on trust. */
.verified { font-size: 13px; color: var(--muted); margin: 0 0 16px; }

/* Tables */
.table-scroll { overflow-x: auto; margin: 14px 0 18px; border: 1px solid var(--line); border-radius: var(--radius); }
table { border-collapse: collapse; width: 100%; font-size: 14px; }
caption { text-align: left; font-size: 14px; color: var(--muted); padding: 10px 12px; border-bottom: 1px solid var(--line); }
th, td { padding: 8px 12px; text-align: right; white-space: nowrap; border-bottom: 1px solid var(--line); }
th:first-child, td:first-child { text-align: left; }
thead th { background: var(--surface-2); font-size: 13px; color: var(--ink-2); position: sticky; top: 0; }
tbody tr:last-child td { border-bottom: 0; }
td.num, th.num { font-family: var(--mono); }

/* Link lists */
.cards { display: grid; gap: 10px; grid-template-columns: 1fr; margin: 14px 0 8px; padding: 0; list-style: none; }
@media (min-width: 640px) { .cards { grid-template-columns: 1fr 1fr; } }
.cards li { margin: 0; }
.cards a {
  display: block;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 13px 14px;
  min-height: 44px;
  text-decoration: none;
  background: var(--surface);
  height: 100%;
}
.cards a:hover { border-color: var(--accent); }
.cards .t { font-weight: 600; color: var(--ink); display: block; }
.cards .d { color: var(--muted); font-size: 14px; display: block; margin-top: 2px; }

.chips { display: flex; flex-wrap: wrap; gap: 8px; padding: 0; list-style: none; margin: 12px 0 18px; }
.chips a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0 15px;
  font-size: 15px;
  text-decoration: none;
  background: var(--surface);
}
.chips a:hover { border-color: var(--accent); }

/* Footer */
.site-foot {
  border-top: 1px solid var(--line);
  margin-top: 48px;
  padding: 24px 0 40px;
  font-size: 14px;
  color: var(--muted);
  background: var(--surface);
}
.site-foot a { color: var(--muted); }
.foot-grid { display: grid; gap: 8px 24px; grid-template-columns: 1fr; }
@media (min-width: 560px) { .foot-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 940px) { .foot-grid { grid-template-columns: 1.7fr 1fr 1fr 1fr; } }
.foot-about { margin-bottom: 10px; }
@media (min-width: 560px) { .foot-about { grid-column: 1 / -1; } }
@media (min-width: 940px) { .foot-about { grid-column: auto; margin-bottom: 0; } }
.foot-grid ul { list-style: none; padding: 0; margin: 0 0 12px; }
.foot-grid li { margin: 0; }
/* Footer links are the second half of the navigation, so they get the same
   44 pixel target as everything else on a phone. */
.foot-grid li a {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 2px 0;
}
@media (max-width: 559px) {
  .foot-caps ul { display: flex; flex-wrap: wrap; gap: 8px; }
  .foot-caps li a {
    justify-content: center;
    padding: 0 16px;
    text-decoration: none;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--bg);
  }
}
@media (min-width: 780px) { .foot-grid li a { min-height: 28px; } }
/* The contact address is a link people tap, not a link inside a sentence, so on
   a phone it gets the same target as everything else. */
@media (max-width: 779px) {
  .foot-about a[href^="mailto:"] { display: inline-flex; align-items: center; min-height: 44px; }
}
.foot-col h2 { font-size: 15px; margin: 0; }
.foot-title { font-weight: 600; color: var(--ink-2); margin-bottom: 4px; font-size: 15px; }

/* The terms page claims copyright, so the footer declares it where a reader
   looks for it. */
.foot-legal {
  border-top: 1px solid var(--line);
  margin: 20px 0 0;
  padding-top: 16px;
  font-size: 13px;
  line-height: 1.7;
}

/* The compact bar.
   Below 800 the header does not stick and these pages run to seven thousand
   pixels, so after 300 pixels of scrolling this takes over: the brand, a button
   that opens every calculator, and a way back to the top. It is fixed rather
   than sticky, so nothing reflows when it appears or leaves. Above 800 the
   header sticks by itself and only the back to top button survives, floating in
   the corner. js/nav.js builds it from links already on the page and reuses the
   brand and pill styles above rather than inventing new ones. With no
   JavaScript nothing here appears, and the header at the top and the footer at
   the bottom still reach every page. */
.minibar { position: fixed; inset: 0 0 auto; z-index: 40; }
.minibar-bar {
  display: flex; align-items: center; gap: 8px;
  height: 56px; padding: 0 12px;
  background: var(--bg); border-bottom: 1px solid var(--line);
}
.minibar .brand { font-size: 15px; }
.minibar button {
  font: inherit; font-size: 14px; min-height: 44px; padding: 0 14px;
  border: 1px solid var(--line); border-radius: 999px;
  background: var(--surface); color: var(--ink-2); cursor: pointer; white-space: nowrap;
}
.minibar-menu { margin-left: auto; }
.minibar-menu[aria-expanded="true"] { background: var(--accent-soft); border-color: var(--accent); color: var(--accent-ink); }
.minibar-panel {
  max-height: calc(100vh - 57px); overflow-y: auto; padding: 6px 12px 10px;
  background: var(--bg); border-bottom: 1px solid var(--line);
  box-shadow: 0 12px 24px rgba(0,0,0,0.14);
}
.minibar-panel .chips { margin: 0 0 6px; }
.chips a[aria-current="page"] { background: var(--accent-soft); border-color: var(--accent); color: var(--accent-ink); font-weight: 600; }

@media (min-width: 800px) {
  .minibar { inset: auto 0 0 auto; pointer-events: none; }
  .minibar-bar { height: auto; padding: 0 16px 16px; background: none; border: 0; }
  .minibar .brand, .minibar-menu, .minibar-panel { display: none; }
  .minibar-top { pointer-events: auto; background: var(--bg); box-shadow: 0 2px 10px rgba(0,0,0,0.16); }
}

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

/* A skip link that never becomes visible helps nobody. This one appears the
   moment it takes keyboard focus. */
a.sr-only:focus {
  position: fixed;
  top: 8px;
  left: 8px;
  z-index: 100;
  display: inline-flex;
  align-items: center;
  width: auto;
  height: auto;
  min-height: 44px;
  padding: 0 16px;
  margin: 0;
  clip: auto;
  overflow: visible;
  border-radius: 8px;
  background: var(--accent);
  color: #ffffff;
  font-weight: 600;
  text-decoration: none;
}