/* VB2 — design tokens. Generated from brand green #237352 at Material tone 40.
   Never write a hex value in a component. Only var(--md-*). */
:root{
  color-scheme:light dark;
  --font-scale:1;

  --md-primary:#237352;              --md-on-primary:#FFFFFF;
  --md-primary-container:#C4EEDC;    --md-on-primary-container:#081C13;
  --md-secondary:#49695C;            --md-on-secondary:#FFFFFF;
  --md-secondary-container:#DBE6E1;  --md-on-secondary-container:#0A1F18;
  --md-tertiary:#3E6774;             --md-on-tertiary:#FFFFFF;
  --md-tertiary-container:#D6E6EB;   --md-on-tertiary-container:#071E26;
  --md-error:#BA1A1A;                --md-on-error:#FFFFFF;
  --md-error-container:#FFDAD6;      --md-on-error-container:#410002;
  --md-surface:#F7FAF8;              --md-surface-dim:#D9DEDB;
  --md-surface-container-lowest:#FFFFFF;
  --md-surface-container-low:#F1F5F2;
  --md-surface-container:#EBEFEC;
  --md-surface-container-high:#E5EAE7;
  --md-surface-container-highest:#DFE4E1;
  --md-on-surface:#171D1A;           --md-on-surface-variant:#3F4945;
  --md-outline:#6F7975;              --md-outline-variant:#BFC9C4;
  --md-inverse-surface:#2B322F;      --md-inverse-on-surface:#EDF1EE;

  --md-elevation-1:0 1px 2px 0 rgb(0 0 0/.30),0 1px 3px 1px rgb(0 0 0/.15);
  --md-elevation-2:0 1px 2px 0 rgb(0 0 0/.30),0 2px 6px 2px rgb(0 0 0/.15);
  --md-elevation-3:0 1px 3px 0 rgb(0 0 0/.30),0 4px 8px 3px rgb(0 0 0/.15);

  --r-sm:12px; --r-md:16px; --r-lg:20px; --r-xl:28px; --r-full:9999px;
  --ease-emphasized:cubic-bezier(.2,0,0,1);
  --ease-decelerate:cubic-bezier(.05,.7,.1,1);
  --dur-short:150ms; --dur-medium:300ms;
}
.dark{
  --md-primary:#88DDBA;              --md-on-primary:#113928;
  --md-primary-container:#174F38;    --md-on-primary-container:#C4EEDC;
  --md-secondary:#AFCCC0;            --md-on-secondary:#1B3529;
  --md-secondary-container:#324B40;  --md-on-secondary-container:#CBE9DC;
  --md-tertiary:#A6CCDA;             --md-on-tertiary:#093642;
  --md-tertiary-container:#254C59;   --md-on-tertiary-container:#C2E8F6;
  --md-error:#FFB4AB;                --md-on-error:#690005;
  --md-error-container:#93000A;      --md-on-error-container:#FFDAD6;
  --md-surface:#0F1512;
  --md-surface-container-lowest:#0A100D;
  --md-surface-container-low:#171D1A;
  --md-surface-container:#1B211E;
  --md-surface-container-high:#262B28;
  --md-surface-container-highest:#303633;
  --md-on-surface:#DFE4E1;           --md-on-surface-variant:#BFC9C4;
  --md-outline:#89938E;              --md-outline-variant:#3F4945;
  --md-inverse-surface:#DFE4E1;      --md-inverse-on-surface:#2B322F;
  /* Shadows do not read on dark. Raise the container instead. */
  --md-elevation-1:none; --md-elevation-2:none;
}

/* Font scale. Every type token is in rem, so one variable moves the system.
   This is why px font sizes are a build failure. */
[data-font-scale="compact"]{--font-scale:.9375}
[data-font-scale="default"]{--font-scale:1}
[data-font-scale="large"]{--font-scale:1.125}
[data-font-scale="xlarge"]{--font-scale:1.25}
html{font-size:calc(1rem * var(--font-scale))}

*{box-sizing:border-box}
body{
  margin:0;background:var(--md-surface);color:var(--md-on-surface);
  font-family:'Inter Variable','Inter',system-ui,-apple-system,sans-serif;
  font-feature-settings:'cv11','ss01','tnum';   /* tnum: money columns must not dance */
  font-optical-sizing:auto;
  -webkit-font-smoothing:antialiased;
}
.tnum{font-variant-numeric:tabular-nums}

/* Type scale — Material 3, tracking retuned for Inter. Weights 400/500/600 only. */
.display-sm  {font-size:2.25rem;line-height:2.75rem;font-weight:600;letter-spacing:-.020em}
.headline-lg {font-size:2rem;line-height:2.5rem;font-weight:600;letter-spacing:-.018em}
.headline-sm {font-size:1.5rem;line-height:2rem;font-weight:600;letter-spacing:-.014em}
.title-lg    {font-size:1.375rem;line-height:1.75rem;font-weight:600;letter-spacing:-.011em}
.title-md    {font-size:1rem;line-height:1.5rem;font-weight:500;letter-spacing:-.006em}
.title-sm    {font-size:.875rem;line-height:1.25rem;font-weight:500}
.body-md     {font-size:.875rem;line-height:1.375rem;font-weight:400}
.body-sm     {font-size:.75rem;line-height:1.125rem;font-weight:400;letter-spacing:.004em}
.label-lg    {font-size:.875rem;line-height:1.25rem;font-weight:500;letter-spacing:.006em}
.label-md    {font-size:.75rem;line-height:1rem;font-weight:500;letter-spacing:.012em}
.label-sm    {font-size:.6875rem;line-height:1rem;font-weight:500;letter-spacing:.016em}

/* Cards are 20px. No exceptions. Border OR shadow, never both. */
.card{
  background:var(--md-surface-container-low);border:0;border-radius:var(--r-lg);
  padding:20px;box-shadow:var(--md-elevation-1);
}
.dark .card{background:var(--md-surface-container)}
@media(min-width:768px){.card{padding:24px}}

.btn{
  position:relative;overflow:hidden;border:0;cursor:pointer;
  height:2.75rem;padding:0 1.5rem;border-radius:var(--r-full);
  font:inherit;font-size:.875rem;font-weight:500;letter-spacing:.006em;
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  transition:box-shadow var(--dur-short) var(--ease-emphasized);
}
.btn-filled{background:var(--md-primary);color:var(--md-on-primary);box-shadow:var(--md-elevation-1)}
.btn-filled:hover{box-shadow:var(--md-elevation-2)}
.btn-tonal{background:var(--md-primary-container);color:var(--md-on-primary-container)}
.btn-outlined{background:transparent;color:var(--md-primary);border:1px solid var(--md-outline)}
.btn-danger{background:var(--md-error);color:var(--md-on-error)}
.btn-text{border-radius:var(--r-sm);height:2.5rem;padding:0 .75rem;background:transparent;color:var(--md-primary)}
.icon-btn{
  width:2.75rem;height:2.75rem;padding:0;border-radius:var(--r-full);
  display:grid;place-items:center;background:transparent;color:var(--md-on-surface-variant);
  border:0;cursor:pointer;position:relative;overflow:hidden;
}
/* State layers replace every hover-colour hack. */
.btn::after,.icon-btn::after{
  content:'';position:absolute;inset:0;background:currentColor;opacity:0;
  transition:opacity var(--dur-short) var(--ease-emphasized);pointer-events:none;
}
.btn:hover::after,.icon-btn:hover::after{opacity:.08}
.btn:active::after,.icon-btn:active::after{opacity:.10}
.btn:disabled{opacity:.38;cursor:not-allowed}

:focus-visible{outline:2px solid var(--md-primary);outline-offset:2px}

.field{
  width:100%;height:3rem;padding:0 1rem;border-radius:var(--r-sm);
  background:var(--md-surface-container-highest);color:var(--md-on-surface);
  border:0;border-bottom:2px solid var(--md-outline);font:inherit;font-size:.875rem;
  transition:border-color var(--dur-short) var(--ease-emphasized);
}
.field:focus{outline:0;border-bottom-color:var(--md-primary)}

.chip{
  display:inline-flex;align-items:center;height:1.75rem;padding:0 .75rem;
  border-radius:var(--r-full);background:var(--md-secondary-container);
  color:var(--md-on-secondary-container);font-size:.75rem;font-weight:500;
}
.chip-ok{background:var(--md-primary-container);color:var(--md-on-primary-container)}
.chip-warn{background:var(--md-tertiary-container);color:var(--md-on-tertiary-container)}
.chip-bad{background:var(--md-error-container);color:var(--md-on-error-container)}

/* Switch — Material 3 geometry, 52x32 */
.sw{width:52px;height:32px;border-radius:var(--r-full);background:var(--md-surface-container-highest);
    border:2px solid var(--md-outline);position:relative;cursor:pointer;flex:none;
    transition:background var(--dur-short) var(--ease-emphasized),border-color var(--dur-short)}
.sw[data-on="true"]{background:var(--md-primary);border-color:var(--md-primary)}
.sw::after{content:'';position:absolute;top:50%;left:6px;width:16px;height:16px;border-radius:50%;
  background:var(--md-outline);transform:translateY(-50%);
  transition:all var(--dur-medium) var(--ease-emphasized)}
.sw[data-on="true"]::after{width:24px;height:24px;left:22px;background:var(--md-on-primary)}

table{width:100%;border-collapse:collapse}
th{text-align:left;padding:0 12px;height:2.5rem;color:var(--md-on-surface-variant);
   font-size:.875rem;font-weight:500}
td{padding:0 12px;height:52px;border-top:1px solid var(--md-outline-variant);font-size:.875rem}
.num{text-align:right;font-variant-numeric:tabular-nums}

/* Enter decelerates, exit accelerates. Transform and opacity only. */
@keyframes rise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.rise{animation:rise 400ms var(--ease-decelerate) both}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
}
@supports (corner-shape:squircle){.card,.btn{corner-shape:squircle}}

/* Grid items refuse to shrink below their content (min-width:auto), which let
   the trades table push the page wider than a phone. Let cards shrink so the
   table scrolls inside its own overflow container instead of the whole page. */
main .card, main > div{min-width:0}