/* The dashboard. Colours, type, the nav bar along the top and the footer
   come from site.css (the look of the FinDash Figma file); this adds the
   dashboard's own parts: the import box, the toolbar, the cards and the
   charts. The kit has no cards or charts, so they are drawn here from its
   colours, type and shapes: white cards with a thin border and round
   corners, pill buttons, mono captions. */

main {
  max-width: calc(var(--page-width) + 2 * var(--gutter));
  margin: 0 auto;
  padding: 16px var(--gutter) 72px;
  font-size: 14px;
  line-height: 1.5;
}

/* ---- who is logged in, in the nav bar (account.js fills #account) ---- */
.account {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: var(--ink-2);
}
.account-link {
  font: inherit;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: -0.025em;
  color: var(--ink);
  background: none;
  border: 0;
  padding: 6px 4px;
  text-decoration: none;
  cursor: pointer;
}
.account-link:hover {
  color: var(--accent);
}
/* Sits under Log out, out of the row, so it never runs into the centred links. */
.account-email {
  position: absolute;
  top: 100%;
  right: 0;
  max-width: 22ch;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
@media (max-width: 560px) {
  .account-email {
    display: none;
  }
}

/* ---- import box ---- */
.loader {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 24px 26px;
  margin-bottom: 28px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.loader-top {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
.loader-head {
  min-width: 0;
  flex: 1 1 320px;
  font-size: 13px;
  color: var(--ink-2);
}
.loader-head strong {
  display: block;
  font-size: 15px;
  font-weight: 700;
  color: var(--ink);
}
.loader-head .bad {
  color: var(--critical);
}
.privacy-line {
  margin: 6px 0 0;
  font-size: 12px;
  color: var(--ink-3);
}
.privacy-line a {
  color: var(--ink-2);
}

.steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
.steps li {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  min-width: 0;
  background: var(--card-2);
  border: 1px solid var(--line-soft);
  border-radius: 10px;
  padding: 12px 14px;
}
.step-n {
  flex: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  margin-top: 1px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  background: var(--accent);
  color: var(--accent-ink);
}
.step-title {
  display: block;
  font-size: 13px;
  color: var(--ink);
}
.steps p {
  margin: 3px 0 0;
  font-size: 12px;
  color: var(--ink-3);
}
.step-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 9px;
}
.howto {
  margin-top: 8px;
  font-size: 12px;
  color: var(--ink-2);
}
.howto summary {
  cursor: pointer;
  color: var(--ink);
  font-weight: 600;
}
.howto summary:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
  border-radius: 4px;
}
.howto ol {
  margin: 0;
  padding-left: 18px;
}
.howto li {
  display: list-item;
  background: none;
  border: 0;
  padding: 1px 0;
}
.howto p {
  margin: 8px 0 0;
}
@media (max-width: 860px) {
  .steps {
    grid-template-columns: 1fr;
  }
}

.dropzone {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  text-align: center;
  padding: 22px 20px;
  border: 1.5px dashed var(--line);
  border-radius: 12px;
  cursor: pointer;
  background: var(--card-2);
  transition:
    border-color 0.12s,
    background 0.12s,
    box-shadow 0.12s;
}
.dropzone:hover,
.dropzone:focus-visible {
  border-color: var(--ink-3);
}
.dropzone:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}
.dropzone.over {
  border-color: var(--accent);
  background: var(--card);
  box-shadow: 0 0 0 3px var(--line-soft);
}
.dropzone-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  margin-bottom: 6px;
  border-radius: 999px;
  background: var(--card);
  border: 1px solid var(--line);
  color: var(--accent);
}
.dropzone.over .dropzone-icon {
  border-color: var(--accent);
}
.dropzone-title {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
}
.dropzone-sub {
  margin: 0;
  font-size: 12px;
  color: var(--ink-3);
}

/* Once the reader's own figures are showing, the import box shrinks to one
     line: the steps were for getting here, and a full-height drop zone above
     every visit pushes the numbers off the first screen. */
.loader.compact .steps,
.loader.compact .dropzone {
  display: none;
}

.loader-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}

/* ---- checking a photo's reading ---- */
.review {
  border: 1px solid var(--accent);
  border-radius: 12px;
  padding: 16px;
  background: var(--card-2);
}
.review-top {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  margin-bottom: 12px;
}
.review-thumb {
  flex: none;
  width: 72px;
  max-height: 110px;
  object-fit: cover;
  object-position: top;
  border-radius: 6px;
  border: 1px solid var(--line);
  background: #fff;
}
.review-kicker {
  margin: 0;
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: -0.01em;
  color: var(--caption);
}
.review h3 {
  margin: 2px 0 0;
  font-size: 16px;
  font-weight: 700;
  color: var(--ink);
}
.review-meta {
  margin: 2px 0 0;
  font-size: 12px;
  color: var(--ink-3);
}
.review-check {
  margin: 8px 0 0;
  font-size: 13px;
  font-weight: 600;
}
.review-check.ok {
  color: var(--positive);
}
.review-check.warn {
  color: var(--ink-2);
  font-weight: 500;
}
.review-check.bad {
  color: var(--critical);
}
.review-lines th,
.review-lines td {
  font-size: 13px;
  padding: 7px 0;
  vertical-align: top;
}
.review-lines td:nth-child(2) {
  padding-left: 10px;
  width: 12em;
}
.review-lines tr.flag th {
  color: var(--critical);
}
.review-lines tfoot th,
.review-lines tfoot td {
  font-weight: 600;
  border-top: 1px solid var(--line);
  border-bottom: 0;
}
.review-orig {
  display: block;
  font-size: 11px;
  color: var(--ink-3);
  font-weight: 400;
}
.review-flag {
  display: block;
  font-size: 11px;
  font-weight: 600;
  color: var(--critical);
}
.review-flag.soft {
  color: var(--ink-3);
  font-weight: 500;
}
.select.small {
  font-size: 12px;
  padding: 4px 6px;
  border-radius: 7px;
  max-width: 100%;
}
.review-sum {
  margin: 10px 0 0;
  font-size: 13px;
  color: var(--ink-2);
}
.review-sum b {
  color: var(--ink);
  font-weight: 600;
}
.review-notes {
  margin: 8px 0 0;
  padding-left: 18px;
  font-size: 12px;
  color: var(--ink-3);
}
.review-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 10px;
  margin-top: 12px;
}
.review-actions .btn.primary {
  margin-left: auto;
}
.review-dup {
  font-size: 12px;
  font-weight: 600;
  color: var(--critical);
}
.review-foot {
  margin: 10px 0 0;
  font-size: 11px;
  color: var(--ink-3);
}
.inv-list {
  font-size: 12px;
  color: var(--ink-2);
}
.inv-list summary {
  cursor: pointer;
  font-weight: 600;
  color: var(--ink);
}
.inv-list ul {
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
}
.inv-list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 6px 0;
  border-bottom: 1px solid var(--line-soft);
}
.inv-list li:last-child {
  border-bottom: 0;
}
/* On a phone each line stacks: what it is, then where it goes and how much,
     so the amount is never pushed off the side by the picker. */
@media (max-width: 560px) {
  .review-lines thead {
    display: none;
  }
  .review-lines tr {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 6px 10px;
    padding: 9px 0;
    border-bottom: 1px solid var(--line-soft);
  }
  .review-lines th,
  .review-lines td {
    border: 0;
    padding: 0;
  }
  .review-lines th {
    grid-column: 1/-1;
  }
  .review-lines td:nth-child(2) {
    width: auto;
    padding-left: 0;
    justify-self: start;
  }
  .review-lines tfoot tr {
    border-top: 1px solid var(--line);
    border-bottom: 0;
  }
  .review-lines tfoot th,
  .review-lines tfoot td {
    border-top: 0;
  }
  .review-lines tfoot th {
    grid-column: 1;
  }
  .review-lines tfoot td:nth-child(2) {
    display: none;
  }
  .review-actions .btn.primary {
    margin-left: 0;
    width: 100%;
  }
}
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font: inherit;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: -0.025em;
  border: 0;
  background: var(--accent-soft);
  color: var(--accent-soft-ink);
  border-radius: var(--radius-pill);
  padding: 11px 20px;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition:
    background 0.15s,
    color 0.15s;
}
.btn:hover {
  background: var(--accent-hover);
  color: #ffffff;
}
.btn.primary {
  background: var(--accent);
  color: var(--accent-ink);
}
.btn.primary:hover {
  background: var(--accent-hover);
  color: #ffffff;
}
.btn.small {
  font-size: 13px;
  padding: 8px 14px;
}
.btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

/* ---- busy state ----
     A file that parses instantly and one that waits on a network round trip
     look identical without this, and a still screen reads as a broken one. */
.spin {
  display: inline-block;
  width: 12px;
  height: 12px;
  vertical-align: -1px;
  margin-right: 7px;
  border-radius: 50%;
  border: 2px solid var(--line);
  border-top-color: var(--accent);
  animation: spin 0.7s linear infinite;
}
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}
@media (prefers-reduced-motion: reduce) {
  .spin {
    animation-duration: 2.4s;
  }
}
.loader.busy {
  border-color: var(--accent);
}
.btn[disabled] {
  opacity: 0.55;
  cursor: default;
}
.btn[disabled]:hover {
  background: var(--accent-soft);
  color: var(--accent-soft-ink);
}

/* ---- toolbar: what period every "period" card below covers ---- */
.toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 20px;
  margin: 0 0 12px;
}
.tool {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 10px;
}
.tool-label {
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: -0.01em;
  color: var(--caption);
}
.seg-ctl {
  display: inline-flex;
  gap: 2px;
  padding: 4px;
  margin: 0;
  list-style: none;
  background: var(--surface);
  border-radius: var(--radius-pill);
}
.seg-ctl button {
  font: inherit;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: -0.025em;
  color: var(--ink-2);
  background: none;
  border: 0;
  border-radius: var(--radius-pill);
  padding: 9px 18px;
  cursor: pointer;
}
.seg-ctl button:hover {
  color: var(--ink);
}
.seg-ctl button[aria-pressed="true"] {
  background: var(--accent);
  color: var(--accent-ink);
}
.seg-ctl button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.select {
  font: inherit;
  font-size: 14px;
  color: var(--ink);
  background: var(--card-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-control);
  padding: 9px 12px;
  cursor: pointer;
}
.select:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.check {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--ink-2);
  cursor: pointer;
}
.check {
  min-height: 24px;   /* the whole label is the tap target */
}
.check input {
  accent-color: var(--accent);
  width: 18px;
  height: 18px;
  margin: 0;
}

.filters {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.filters button {
  font: inherit;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: -0.025em;
  color: var(--ink);
  background: var(--surface);
  border: 0;
  border-radius: var(--radius-pill);
  padding: 9px 16px;
  cursor: pointer;
  text-transform: capitalize;
  transition:
    background 0.12s,
    color 0.12s;
}
.filters button:hover {
  background: var(--accent-soft);
  color: var(--accent-soft-ink);
}
.filters button.in-range {
  background: var(--accent-soft);
  color: var(--accent-soft-ink);
}
.filters button[aria-pressed="true"] {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-ink);
}
.filters button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.showing {
  margin: 32px 0 20px;
}
.page-title {
  margin: 8px 0 20px;
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: -0.01em;
  color: var(--caption);
}
/* Room for the buttons the script adds, so the page doesn't jump down
   when they arrive. */
#periods {
  min-height: 42px;
}
.months-row {
  min-height: 34px;
}
.showing h2 {
  margin: 0;
  font-family: var(--font-serif);
  font-size: clamp(36px, 5vw, 48px);
  font-weight: 400;
  line-height: 0.95;
  letter-spacing: -0.03em;
}
.showing p {
  margin: 8px 0 0;
  font-size: 14px;
  color: var(--ink-2);
}
.print-only {
  display: none;
}

/* ---- headline numbers ---- */
.pulse {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-bottom: 16px;
}
.pulse .stat {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 18px 20px;
  min-width: 0;
}
.pulse .lab {
  font-size: 12px;
  color: var(--ink-3);
  margin: 0 0 6px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pulse .num {
  font-size: 28px;
  font-weight: 500;
  letter-spacing: -0.04em;
  margin: 0;
  color: var(--ink);
}
.pulse .chg {
  font-size: 12px;
  font-weight: 600;
  margin-top: 4px;
  color: var(--positive);
}
.pulse .chg.down {
  color: var(--critical);
}
.pulse .chg span {
  font-weight: 400;
  color: var(--ink-3);
}
@media (max-width: 760px) {
  .pulse {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ---- plain-language "?" explanations ----
     The visible circle is 16px; the button around it is 24px so it is still a
     comfortable tap target. Negative margins keep it from stretching the line. */
.help {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
  width: 24px;
  height: 24px;
  margin: -5px -3px -5px 0;
  padding: 0;
  background: none;
  border: 0;
  cursor: help;
  color: var(--ink-3);
}
.help::before {
  content: "?";
  display: flex;
  align-items: center;
  justify-content: center;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  border: 1px solid currentColor;
  font:
    700 10px/1 var(--font-sans),
    ui-sans-serif,
    system-ui,
    sans-serif;
}
.help:hover,
.help[aria-expanded="true"] {
  color: var(--ink);
}
.help:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: -2px;
  border-radius: 50%;
}
.help-pop {
  position: fixed;
  z-index: 30;
  max-width: min(300px, calc(100vw - 16px));
  background: var(--ink);
  color: var(--ground);
  border-radius: 8px;
  padding: 8px 11px;
  font-size: 12px;
  line-height: 1.45;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  white-space: normal;
  text-align: left;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.25);
  pointer-events: none;
}
.help-pop b {
  display: block;
  font-weight: 700;
  margin-bottom: 2px;
}

/* ---- forecast fan ---- */
.fan svg {
  width: 100%;
  height: 150px;
  display: block;
  overflow: visible;
}
.fan-band {
  fill: var(--s2);
  opacity: 0.16;
}
.fan-hist {
  fill: none;
  stroke: var(--positive);
  stroke-width: 2;
  vector-effect: non-scaling-stroke;
  stroke-linejoin: round;
}
.fan-mid {
  fill: none;
  stroke: var(--s2);
  stroke-width: 2;
  stroke-dasharray: 5 4;
  vector-effect: non-scaling-stroke;
  stroke-linejoin: round;
}
.fan-zero {
  stroke: var(--line);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}
.fan-labels {
  display: flex;
  margin-top: 8px;
}
.fan-labels span {
  flex: 1;
  text-align: center;
  font-size: 11px;
  color: var(--ink-3);
  text-transform: capitalize;
  white-space: nowrap;
}
.fan-labels .fut {
  color: var(--s2);
  font-weight: 600;
}
.fan .key i.fan-sw-hist {
  background: var(--positive);
}
.fan .key i.fan-sw-mid {
  background: var(--s2);
}
.fan .key i.fan-sw-band {
  background: var(--s2);
  opacity: 0.3;
}
.fan .brief-note {
  margin-top: 10px;
}
.fan-plot {
  position: relative;
}
.fan-pt {
  --dot: var(--positive);
  position: absolute;
  width: 24px;
  height: 24px;
  margin: -12px 0 0 -12px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  /* The visible dot: 5px of colour inside a 2px ring, the rest transparent. */
  background: radial-gradient(circle, var(--dot) 0 5px, var(--card) 5px 7px, transparent 7px);
  cursor: pointer;
  transition: transform 0.1s ease;
}
.fan-pt.proj {
  --dot: var(--s2);
}
.fan-pt:hover,
.fan-pt:focus-visible {
  transform: scale(1.4);
}
.fan-pt-label {
  position: absolute;
  transform: translate(-50%, calc(-100% - 12px));
  background: var(--ink);
  color: var(--card);
  font-size: 11px;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 6px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.12s ease;
  z-index: 2;
}
.fan-pt-label.on {
  opacity: 1;
}
.fc-msg {
  margin: 12px 0 0;
  font-size: 13px;
  color: var(--ink-2);
}
.fc-msg b {
  color: var(--ink);
}

/* ---- shared y-axis scale ----
     Every bar/line chart needs a reference value for its top and bottom, or a
     reader has no way to judge "is that bar big" without hovering each one.
     The scale sits in a 48px left gutter INSIDE each chart's own box. The fan
     used to offset it by -48px from a box that already had the gutter as
     padding, and the grouped bars had no positioned box at all, so their
     labels were placed against the card and hung off its left edge. */
.fan {
  padding-left: 48px;
  position: relative;
}
.fan .axis-y {
  left: 0;
}
.trend-scroll {
  padding-left: 48px;
}
.trend .axis-y {
  left: -48px;
}
.pair-scroll {
  padding-left: 48px;
}
.pairs .axis-y {
  left: -48px;
}
.axis-y {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 42px;
  pointer-events: none;
}
.axis-y span {
  position: absolute;
  left: 0;
  right: 0;
  transform: translateY(-50%);
  text-align: right;
  font-size: 11px;
  color: var(--ink-3);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* ---- budget estimator ---- */
.est-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 12px;
}
.est-pair > div {
  background: var(--ground);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 12px 14px;
}
.est-pair .lab {
  font-size: 12px;
  color: var(--ink-3);
  margin: 0 0 5px;
}
.est-pair .num {
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 0;
  color: var(--ink);
}
.est-pair .chg {
  font-size: 11px;
  margin: 4px 0 0;
  color: var(--ink-3);
}
.est-pair .chg .ok {
  color: var(--positive);
  font-weight: 600;
}
.est-pair .chg .miss {
  color: var(--critical);
  font-weight: 600;
}
.est-note {
  font-size: 13px;
  color: var(--ink-2);
  margin: 0 0 14px;
}
.est-note em {
  font-style: normal;
}
.est table {
  margin-top: 0;
}
@media (max-width: 560px) {
  .est-pair {
    grid-template-columns: 1fr;
  }
}

/* ---- what needs attention ---- */
.prio {
  list-style: none;
  margin: 0;
  padding: 0;
}
.prio li {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 10px 0;
  border-bottom: 1px solid var(--line-soft);
  font-size: 13px;
}
.prio li:last-child {
  border-bottom: none;
}
.prio .tag {
  flex: none;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: -0.01em;
  padding: 3px 10px;
  border-radius: var(--radius-pill);
  background: var(--surface);
  color: var(--ink);
}
.prio .tag.urgent {
  background: var(--critical);
  color: #fff;
}
.prio .tag.watch {
  background: var(--s3);
  color: #1a1205;
}
.prio p {
  margin: 0;
  color: var(--ink);
}
.prio p em {
  font-style: normal;
  color: var(--ink-3);
}
.none {
  color: var(--ink-3);
  margin: 0;
}
.prio .none {
  padding: 10px 0;
}

/* ---- briefing ---- */
.brief-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}
.brief-head .btn {
  margin-left: auto;
}
.brief-note {
  font-size: 12px;
  color: var(--ink-3);
  margin: 0;
  max-width: 72ch;
}
.brief h3 {
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: -0.01em;
  color: var(--caption);
  margin: 16px 0 8px;
}
.brief h3:first-child {
  margin-top: 0;
}
.brief ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
.brief li {
  display: flex;
  gap: 9px;
  align-items: flex-start;
  padding: 7px 0;
  font-size: 13px;
  color: var(--ink);
}
.brief li::before {
  content: "";
  flex: none;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  margin-top: 6px;
  background: var(--ink-3);
}
.brief .up li::before {
  background: var(--positive);
}
.brief .risk li::before {
  background: var(--critical);
}
.brief .act li::before {
  background: var(--s2);
}
.brief .stamp-note {
  margin-top: 12px;
}

/* ---- cards ---- */
.grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 24px 26px;
  min-width: 0;
  position: relative;
}
.card.wide {
  grid-column: 1/-1;
}

/* Title on the left, the period the card covers on the right. A card that
     follows the period selector and one that always shows every month on file
     look identical otherwise, and readers could not tell which was which. */
.card-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 6px 12px;
  margin-bottom: 16px;
}
.card-head > div {
  min-width: 0;
  flex: 1 1 220px;
}
.card h2 {
  font-family: var(--font-serif);
  font-size: 24px;
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: -0.03em;
  margin: 0;
  color: var(--ink);
}
.card .sub {
  font-size: 13px;
  color: var(--ink-2);
  margin: 6px 0 0;
}
.scope {
  flex: none;
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: -0.01em;
  color: var(--caption);
  white-space: nowrap;
  background: var(--accent-soft);
  border-radius: var(--radius-pill);
  padding: 4px 12px;
}

/* ---- did you make money ---- */
.hero {
  padding: 26px 28px;
  margin-bottom: 16px;
}
.hero .card-head {
  margin-bottom: 8px;
}
.eyebrow {
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: -0.01em;
  color: var(--caption);
  margin: 0;
}
.figure {
  font-size: clamp(40px, 6vw, 64px);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.045em;
  font-variant-numeric: normal; /* proportional figures at display size */
  margin: 4px 0 0;
  color: var(--ink);
  display: inline-flex;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
}
.figure.loss {
  color: var(--critical);
}
.delta {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0;
  color: var(--positive);
}
.delta.down {
  color: var(--critical);
}
.delta span {
  font-weight: 400;
  color: var(--ink-3);
}
.note {
  font-size: 14px;
  color: var(--ink-2);
  margin: 10px 0 0;
  max-width: 62ch;
}
.note b {
  color: var(--ink);
}

/* ---- stacked allocation bar ---- */
.barwrap {
  position: relative;
  margin-top: 22px;
}
.bar {
  display: flex;
  gap: 2px;
  height: 38px;
}
.bar .seg {
  border: none;
  padding: 0;
  font: inherit;
  cursor: default;
  min-width: 2px;
  border-radius: 2px;
  transition: filter 0.12s;
}
.bar .seg:first-child {
  border-radius: 8px 2px 2px 8px;
}
.bar .seg:last-child {
  border-radius: 2px 8px 8px 2px;
}
.bar .seg:hover,
.bar .seg:focus-visible {
  filter: brightness(1.12);
  outline: none;
}
.bar .seg:focus-visible {
  box-shadow:
    0 0 0 2px var(--card),
    0 0 0 4px var(--ink);
}
.seg-1 {
  background: var(--s1);
}
.seg-2 {
  background: var(--s2);
}
.seg-3 {
  background: var(--s3);
}
.seg-4 {
  background: var(--s4);
}
.seg-rest {
  background: var(--rest);
}
.seg-short {
  background: var(--critical);
}

/* revenue cut-off marker, shown only on a loss month */
.revmark {
  position: absolute;
  top: -7px;
  bottom: -7px;
  width: 2px;
  background: var(--ink);
}
.shortspan {
  position: absolute;
  bottom: -9px;
  height: 3px;
  border-radius: 2px;
  background: var(--critical);
}
.revmark span {
  position: absolute;
  top: -19px;
  left: 0;
  transform: translateX(-50%);
  white-space: nowrap;
  font-size: 11px;
  font-weight: 600;
  color: var(--ink);
}

.tip {
  position: absolute;
  z-index: 5;
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%, -100%);
  background: var(--ink);
  color: var(--ground);
  border-radius: 8px;
  padding: 7px 10px;
  font-size: 12px;
  line-height: 1.4;
  white-space: nowrap;
  transition: opacity 0.1s;
}
.tip.on {
  opacity: 1;
}
.tip b {
  font-weight: 600;
}

.key {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  margin: 16px 0 0;
  padding: 0;
  list-style: none;
  font-size: 13px;
}
.key li {
  display: flex;
  align-items: center;
  gap: 7px;
  color: var(--ink-2);
}
.key i {
  width: 10px;
  height: 10px;
  border-radius: 2px;
  flex: none;
}
.key b {
  font-weight: 500;
  color: var(--ink);
}

/* ---- budget gauge ---- */
.gaugeline {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 14px;
  font-size: 14px;
  color: var(--ink-2);
  margin-bottom: 12px;
}
.gaugeline strong {
  color: var(--ink);
  font-weight: 600;
}
.gaugeline strong.neg {
  color: var(--critical);
}
.gauge {
  position: relative;
  height: 12px;
  background: var(--line-soft);
  border-radius: 6px;
}
.gauge-fill {
  height: 100%;
  background: var(--positive);
  border-radius: 6px;
}
.gauge-fill.over {
  background: var(--critical);
}
.gauge-mark {
  position: absolute;
  top: -5px;
  bottom: -5px;
  width: 2px;
  background: var(--ink);
}
.gauge-foot {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: var(--ink-3);
  margin-top: 8px;
}
.gauge-note {
  font-size: 12px;
  color: var(--ink-3);
  margin: 10px 0 0;
}

/* ---- monthly net bars ---- */
.trend-scroll {
  --colw: 66px;
  overflow-x: auto;
  overflow-y: hidden;
  padding-top: 24px;
}
.trend {
  display: flex;
  align-items: flex-end;
  gap: 12px;
  height: 150px;
  position: relative;
  min-width: max-content;
}
/* basis, not content, sets the column width - the bars carry no text and the
     labels do, so an auto basis would drift the two rows out of alignment.
     66px holds "September" at 12px; past that the row scrolls. */
.trend .col {
  flex: 1 0 var(--colw);
  min-width: 0;
  display: flex;
  flex-direction: column;
  height: 100%;
  position: relative;
}
/* transparent overlay: the whole column is the hit target, not just the bar */
.trend .hit {
  position: absolute;
  inset: 0;
  width: 100%;
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  cursor: pointer;
  border-radius: 6px;
}
.trend .hit:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}
.trend .col:hover .mark {
  filter: brightness(0.94);
}
.trend .above {
  flex: none;
  display: flex;
  align-items: flex-end;
}
.trend .below {
  flex: none;
  display: flex;
  align-items: flex-start;
}
.trend .mark {
  width: 100%;
  background: var(--line);
  border: none;
  padding: 0;
  cursor: default;
}
.trend .above .mark {
  border-radius: 4px 4px 0 0;
}
.trend .below .mark {
  border-radius: 0 0 4px 4px;
}
.trend .col.on .mark {
  background: var(--positive);
}
.trend .col.on.neg .mark {
  background: var(--critical);
}
.trend .zero {
  position: absolute;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--line);
  pointer-events: none;
}
.trend-labels {
  display: flex;
  gap: 12px;
  margin-top: 8px;
  min-width: max-content;
}
.trend-labels div {
  flex: 1 0 var(--colw);
  min-width: 0;
  white-space: nowrap;
  text-align: center;
  font-size: 12px;
  color: var(--ink-3);
  text-transform: capitalize;
  cursor: pointer;
}
.trend-labels div:hover {
  color: var(--ink);
}
.trend-labels div.on {
  color: var(--ink);
  font-weight: 600;
}
.trend .val {
  position: absolute;
  left: -6px;
  right: -6px;
  text-align: center;
  white-space: nowrap;
  font-size: 12px;
  font-weight: 600;
  color: var(--ink);
}

/* ---- revenue vs costs, grouped bars ---- */
.pair-scroll {
  --pairw: 96px;
  overflow-x: auto;
  overflow-y: hidden;
  padding-top: 26px;
}
.pairs {
  display: flex;
  gap: 14px;
  height: 150px;
  align-items: flex-end;
  min-width: max-content;
  position: relative;
}
.pair {
  flex: 1 0 var(--pairw);
  min-width: 0;
  height: 100%;
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 6px;
}
.pair .bar2 {
  width: 30px;
  border: none;
  padding: 0;
  cursor: pointer;
  border-radius: 4px 4px 0 0;
  transition: filter 0.12s;
}
.pair .bar2:hover {
  filter: brightness(1.1);
}
.pair .bar2:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}
.bar-rev {
  background: var(--s1);
}
.bar-exp {
  background: var(--s2);
}
.pair .net {
  position: absolute;
  top: -22px;
  left: 0;
  right: 0;
  text-align: center;
  font-size: 12px;
  font-weight: 600;
  color: var(--positive);
  white-space: nowrap;
}
.pair .net.loss {
  color: var(--critical);
}
.pair-labels {
  display: flex;
  gap: 14px;
  margin-top: 8px;
  min-width: max-content;
}
.pair-labels div {
  flex: 1 0 var(--pairw);
  min-width: 0;
  text-align: center;
  font-size: 12px;
  color: var(--ink-3);
  text-transform: capitalize;
  white-space: nowrap;
  cursor: pointer;
}
.pair-labels div.on {
  color: var(--ink);
  font-weight: 600;
}
.pair-vals {
  display: flex;
  gap: 14px;
  margin-top: 2px;
  min-width: max-content;
}
.pair-vals div {
  flex: 1 0 var(--pairw);
  min-width: 0;
  text-align: center;
  font-size: 11px;
  color: var(--ink-3);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* ---- ledger table ----
     Amounts are right-aligned, headers included, the way every accounting
     report sets them, so units line up under units and a longer figure reads
     as a bigger one at a glance. Tabular figures keep every digit the same
     width for that to hold. */
.table-wrap {
  overflow-x: auto;
}
table {
  width: 100%;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
}
th,
td {
  padding: 9px 0;
  border-bottom: 1px solid var(--line-soft);
  font-weight: 400;
  text-align: right;
}
th {
  text-align: left;
} /* row labels in the Line column */
/* Numeric columns (Amount, Of revenue) are right-aligned, header and
     values alike, so digits line up on their ones place for easy scanning. */
thead th:not(:first-child) {
  text-align: right;
  padding-left: 12px;
}
td.amt,
td.share {
  text-align: right;
}
thead th {
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: -0.01em;
  color: var(--caption);
  border-bottom: 1px solid var(--line-strong);
}
thead th {
  white-space: nowrap;
}
thead .help {
  text-transform: none;
}
thead .short {
  display: none;
}
.group th,
.group td {
  font-weight: 600;
}
.indent {
  padding-left: 22px;
  color: var(--ink-2);
  font-weight: 400;
}
.total th,
.total td {
  font-weight: 600;
  border-top: 1px solid var(--line);
  border-bottom: none;
}
.neg {
  color: var(--critical);
}
td.share {
  color: var(--ink-3);
  width: 8.5em;
  padding-left: 12px;
}
td.amt {
  width: 10em;
  padding-left: 12px;
}
/* A narrow column broke "−$3,640" after the minus sign. */
td.amt,
td.share,
.num,
.gaugeline strong {
  white-space: nowrap;
}

.notice {
  margin-top: 16px;
  padding: 14px 16px;
  background: var(--card);
  border: 1px solid var(--line);
  border-left: 3px solid var(--critical);
  border-radius: 10px;
  font-size: 13px;
  color: var(--ink-2);
}
.notice code {
  font-size: 12px;
}

/* ---- what you buy ----
     One row per item, the money columns right-aligned like the report's.
     The name as printed and the item's code sit under its English name, as
     they do on the invoice. */
.item-table th,
.item-table td {
  font-size: 13px;
  vertical-align: top;
}
.item-table td {
  padding-left: 12px;
}
.item-table td:nth-child(2) {
  text-align: left;
}
.item-table thead th:nth-child(2) {
  text-align: left;
}
.item-table th[scope="row"] {
  font-weight: 600;
  color: var(--ink);
}
.item-sub {
  display: block;
  font-size: 11px;
  font-weight: 400;
  color: var(--ink-3);
}
.item-up {
  color: var(--critical);
  font-weight: 600;
}
.item-down {
  color: var(--positive);
  font-weight: 600;
}
.item-same {
  color: var(--ink-3);
}
/* A price that wasn't compared says why, with a button to confirm what a
   case or bag holds; the form for it opens in a row of its own. */
.item-unsure {
  display: block;
  min-width: 160px;
  max-width: 220px;
  margin-left: auto;
  font-size: 12px;
  color: var(--ink-2);
  text-align: right;
  white-space: normal;
}
.item-size {
  margin-top: 6px;
}
.item-size-row td {
  padding: 12px 0 18px;
  text-align: left;
}
/* On a phone the table scrolls sideways; the form keeps to the width of
   the screen, so every field is in sight. */
.item-size-form {
  max-width: calc(100vw - 64px);
}
.item-size-form,
.item-size-fields {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 12px 16px;
}
.item-size-form .message,
.item-size-form .item-actions {
  flex-basis: 100%;
  margin: 0;
}
.item-size-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 12px;
  color: var(--ink-2);
}
.item-size-pair {
  display: flex;
  gap: 6px;
}
.item-size-pair input {
  width: 96px;
}
.item-more {
  margin-top: 10px;
}
.item-note {
  margin: 12px 0 0;
  font-size: 12px;
  color: var(--ink-3);
}
.item-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

/* The count sheet exists only on paper: it is filled in and shown when
     "Print count sheet" is pressed, and the rest of the page is hidden then
     (see the print styles below). */
.count-sheet {
  display: none;
}

@media (max-width: 760px) {
  .grid {
    grid-template-columns: 1fr;
  }
  .card {
    padding: 18px 16px;
  }
  .hero {
    padding: 20px 18px;
  }
  th,
  td {
    font-size: 14px;
  }
  .indent {
    padding-left: 14px;
  }
  .toolbar {
    align-items: flex-start;
    justify-content: flex-start;
  }
  /* Phones cannot drag a file onto a page; "Choose file" does the job, and
       dropping still works anywhere on the page for a narrow desktop window. */
  .dropzone {
    display: none;
  }
  .pair-scroll {
    --pairw: 76px;
  }
  .pair .bar2 {
    width: 24px;
  }
  /* min-width:0 lets the figures wrap under each pair; max-content would
       size the row to the unwrapped text and push it past the card. */
  .pair-vals {
    min-width: 0;
  }
  .pair-vals div {
    white-space: normal;
    line-height: 1.35;
  }
  td.amt {
    width: auto;
    padding-left: 8px;
  }
  td.share {
    width: 5.5em;
    padding-left: 8px;
  }
  .est th,
  .est td {
    font-size: 13px;
  }
  thead .long {
    display: none;
  }
  thead .short {
    display: inline;
  }
}
@media (max-width: 560px) {
  .fan-labels .yr {
    display: none;
  }
}

/* ---- print / save as PDF ----
     One clean report: light colours whatever the screen theme, no controls,
     cards kept whole across page breaks. */
@media print {
  :root,
  :root[data-theme] {
    color-scheme: light;
    --ground: #ffffff;
    --card: #ffffff;
    --card-2: #f5f5f3;
    --surface: #e4e4e4;
    --line: #d9d9d9;
    --line-soft: #ececec;
    --line-strong: #929292;
    --ink: #000000;
    --ink-2: #4f4f4f;
    --ink-3: #5f5f5f;
    --accent: #485c11;
    --accent-ink: #ffffff;
    --accent-soft: #dfecc6;
    --accent-soft-ink: #000000;
    --caption: #485c11;
    --positive: #15803d;
    --critical: #c62828;
    --s1: #2f7d6d;
    --s2: #3f6fd0;
    --s3: #c8742a;
    --s4: #8a5cc7;
    --rest: #15803d;
  }
  @page {
    margin: 14mm;
  }
  body {
    background: #fff;
    padding: 0;
    font-size: 12px;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
  main {
    max-width: none;
  }
  .loader,
  .toolbar,
  .months-row,
  .theme-toggle,
  .account,
  .no-print,
  .help {
    display: none !important;
  }
  .print-only {
    display: block;
  }
  .card,
  .pulse .stat {
    break-inside: avoid;
    box-shadow: none;
  }
  .grid {
    gap: 10px;
  }
  .card {
    padding: 12px 14px;
  }
  .trend-scroll,
  .pair-scroll,
  .table-wrap {
    overflow: visible;
  }
  /* Advice that has not been asked for is an empty card on paper. */
  .card:has(#brief:empty) {
    display: none;
  }

  /* Printing the count sheet: only the sheet, in black on white, with a
     tall row and a wide box beside each item for a pen. */
  body.printing-count-sheet main > *,
  body.printing-count-sheet .site-nav,
  body.printing-count-sheet .site-footer {
    display: none !important;
  }
  body.printing-count-sheet main > .count-sheet {
    display: block !important;
    color: #000;
  }
  .count-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 6px 24px;
    margin-bottom: 12px;
  }
  .count-head > div {
    flex: 1 1 100%;
  }
  .count-head h2 {
    margin: 0;
    font-size: 20px;
  }
  .count-head p {
    margin: 2px 0 0;
    font-size: 11px;
  }
  .count-fill span {
    display: inline-block;
    width: 150px;
    border-bottom: 1px solid #000;
    margin-left: 6px;
  }
  .count-group h3 {
    margin: 14px 0 4px;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
  }
  /* Fixed column widths, so every group's table lines up with the others. */
  .count-table {
    table-layout: fixed;
  }
  .count-table thead th:nth-child(1) {
    width: 36%;
  }
  .count-table thead th:nth-child(2) {
    width: 11%;
  }
  .count-table thead th:nth-child(3) {
    width: 19%;
  }
  .count-table thead th:nth-child(4) {
    width: 11%;
  }
  .count-table th,
  .count-table td {
    padding: 7px 8px 7px 0;
    border-bottom: 1px solid #999;
    font-size: 12px;
    text-align: left;
    vertical-align: top;
  }
  .count-table thead th {
    color: #000;
    border-bottom: 1.5px solid #000;
  }
  .count-table thead th:not(:first-child) {
    text-align: left;
    padding-left: 0;
  }
  .count-table th[scope="row"] {
    font-weight: 600;
  }
  .count-table tr {
    break-inside: avoid;
  }
  .count-orig {
    display: block;
    font-weight: 400;
    font-size: 11px;
  }
  .count-box {
    border-left: 1px solid #999;
  }
  .count-foot {
    margin-top: 14px;
    font-size: 10px;
  }
}

/* Source-specific import help should not stretch neighboring setup cards. */
.steps { align-items: start; }
.howto details { margin-block: 10px; }