/* Stocare design system v2 (tokens from the design canvas, project/ds/stocare/tokens.json).
   Layout and type live in inline styles on the templates, as in the design; this file holds the tokens,
   the page basics, the 760px phone rules from the design, and the classes generated markup needs. */
:root {
  --paper: #f4efe6;
  --surface: #ffffff;
  --espresso: #1d1a17;
  --ink: #16161d;
  --muted: #5f5e66;
  --hairline: #e7e7ec;
  --brand: #c8381c;
  --brand-on-dark: #ff9b7a;
  --marker: #ffc9b5;
  --up: #15803d;
  --down: #be123c;
  --display: "Bricolage Grotesque", "Geist", system-ui, sans-serif;
  --sans: "Geist", system-ui, sans-serif;
  --mono: "Geist Mono", ui-monospace, monospace;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }   /* the hidden attribute must beat the inline display of a card */
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--sans); font-size: 16px; line-height: 1.55; }
body.home { background: var(--surface); }
a { color: var(--ink); }
a:hover { color: var(--brand); }
:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.up { color: var(--up); }
.down { color: var(--down); }
.flat { color: var(--muted); }

/* phone menu: a <details> so it works without script */
.nav-menu { display: none; }
.nav-menu > summary { list-style: none; width: 44px; height: 44px; border-radius: 10px; border: 1px solid var(--hairline);
  background: var(--surface); color: var(--ink); display: flex; align-items: center; justify-content: center; cursor: pointer; }
.nav-menu > summary::-webkit-details-marker { display: none; }
.nav-menu .nav-menu-panel { position: absolute; left: 0; right: 0; top: 100%; z-index: 20; display: flex; flex-direction: column;
  padding: 4px 16px 16px; background: var(--paper); border-bottom: 1px solid var(--hairline); }
.nav-menu .nav-menu-panel a { display: flex; align-items: center; min-height: 48px; padding: 0 4px; border-top: 1px solid var(--hairline);
  color: var(--ink); text-decoration: none; font-size: 17px; font-weight: 500; }

/* price chart (generated by render.price_chart) */
.chart { display: block; width: 100%; height: auto; }
.chart .grid { stroke: var(--hairline); stroke-width: 1; }
.chart .ylab, .chart .xlab { font-family: var(--mono); font-size: 11px; fill: var(--muted); }
.chart .xlab { text-anchor: middle; }
.chart .area { fill: var(--marker); opacity: .35; }
.chart .line { fill: none; stroke: var(--ink); stroke-width: 2; stroke-linejoin: round; }
.chart .drop { stroke-width: 1; stroke-dasharray: 3 3; opacity: .5; }
.chart .mark { stroke-width: 2; }
.chart .now { fill: var(--brand); stroke: var(--surface); stroke-width: 3; }

/* phone rules, verbatim from the design */
.m-show { display: none !important; }
@media (max-width: 760px) {
  .m-hide { display: none !important; }
  .m-show { display: flex !important; }
  .m-sec { padding-bottom: 72px !important; }
  .m-pad { padding-left: 16px !important; padding-right: 16px !important; }
  .m-tabs { flex-wrap: nowrap !important; overflow-x: auto; gap: 22px !important; }
  .m-tabs > * { flex: 0 0 auto; }
  .m-table { min-width: 0 !important; }
  .m-table thead { display: none; }
  .m-table tr { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px 12px; padding: 14px 0; }
  .m-table td { padding: 0 !important; white-space: normal !important; }
  .m-table td:nth-child(1), .m-table td:nth-child(2) { grid-column: 1 / -1; }
  .m-side { flex-direction: row !important; flex-wrap: nowrap !important; overflow-x: auto; align-items: center; gap: 4px !important; }
  .m-side nav { flex-direction: row !important; }
  .m-side a { white-space: nowrap; padding-bottom: 4px !important; }
  .m-card { padding: 20px !important; }
  .nav-menu { display: block; }
}