/*
 * Zero — base stylesheet (screen and print). Requires zero-tokens.css first:
 *   <link rel="stylesheet" href="zero-tokens.css"><link rel="stylesheet" href="zero.css">
 * Add zero-print.css for paged documents (PDF). Components are prefixed `z-` so they never
 * collide with a host application's CSS (Frappe, SharePoint, email clients).
 * Guidelines: ../guidelines/ — this file implements them; it does not replace them.
 */

@font-face { font-family: Inter; font-weight: 400; font-display: swap;
  src: url(../assets/fonts/inter/inter-400.woff2) format("woff2"), url(../assets/fonts/inter/inter-ext-400.woff2) format("woff2"); }
@font-face { font-family: Inter; font-weight: 500; font-display: swap;
  src: url(../assets/fonts/inter/inter-500.woff2) format("woff2"), url(../assets/fonts/inter/inter-ext-500.woff2) format("woff2"); }
@font-face { font-family: Inter; font-weight: 600; font-display: swap;
  src: url(../assets/fonts/inter/inter-600.woff2) format("woff2"), url(../assets/fonts/inter/inter-ext-600.woff2) format("woff2"); }
@font-face { font-family: Inter; font-weight: 700; font-display: swap;
  src: url(../assets/fonts/inter/inter-700.woff2) format("woff2"), url(../assets/fonts/inter/inter-ext-700.woff2) format("woff2"); }

:root {
  /* Short aliases used below and in templates. */
  --ink: var(--zero-color-ink); --ink-2: var(--zero-color-ink-2); --ink-3: var(--zero-color-ink-3);
  --ink-4: var(--zero-color-ink-4); --line: var(--zero-color-line); --line-2: var(--zero-color-line-2);
  --fill: var(--zero-color-fill); --fill-2: var(--zero-color-fill-2); --paper: var(--zero-color-paper);
  --night: var(--zero-color-night); --on-night: var(--zero-color-on-night);
  --sans: var(--zero-font-family-sans); --mono: var(--zero-font-family-mono);
  color-scheme: light dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { font-family: var(--sans); font-size: 100%; color: var(--ink); background: var(--paper);
  -webkit-print-color-adjust: exact; print-color-adjust: exact; text-rendering: optimizeLegibility;
  font-feature-settings: "cv11", "ss01"; }
body { margin: 0; font-size: var(--zero-font-size-base); line-height: var(--zero-font-line-height-body); }

/* Type ---------------------------------------------------------------------------------- */
h1, h2, h3, h4 { font-weight: 600; letter-spacing: var(--zero-font-tracking-heading); line-height: var(--zero-font-line-height-snug); margin: 0; }
h1 { font-size: var(--zero-font-size-2xl); letter-spacing: var(--zero-font-tracking-display); line-height: var(--zero-font-line-height-tight); }
h2 { font-size: var(--zero-font-size-xl); }
h3 { font-size: var(--zero-font-size-lg); margin-top: var(--zero-space-6); }
h4 { font-size: var(--zero-font-size-md); margin-top: var(--zero-space-4); }
p { margin: 0 0 var(--zero-space-3); }
strong, b { font-weight: 600; }
small, .z-small { font-size: var(--zero-font-size-sm); }
.z-muted { color: var(--ink-3); }
a { color: inherit; text-decoration: underline; text-decoration-color: var(--line-2); text-underline-offset: 2px; }
a:hover { text-decoration-color: currentColor; }
.z-kicker { font-size: var(--zero-font-size-xs); font-weight: 600; letter-spacing: var(--zero-font-tracking-kicker); text-transform: uppercase; color: var(--ink-3); }
.z-label { font-size: var(--zero-font-size-xs); font-weight: 600; letter-spacing: var(--zero-font-tracking-label); text-transform: uppercase; color: var(--ink-3); }
.z-display { font-size: var(--zero-font-size-3xl); font-weight: 700; letter-spacing: var(--zero-font-tracking-display); line-height: var(--zero-font-line-height-tight); }
.z-num, td.z-num, th.z-num { font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
code, .z-mono { font-family: var(--mono); font-size: .9em; background: var(--fill); border: 1px solid var(--line); border-radius: var(--zero-radius-sm); padding: 0 .3em; }
pre { font-family: var(--mono); font-size: var(--zero-font-size-sm); background: var(--fill); border: 1px solid var(--line); border-radius: var(--zero-radius-md); padding: var(--zero-space-3) var(--zero-space-4); overflow: auto; }
pre code { background: none; border: 0; padding: 0; }
kbd, .z-kbd { font-family: var(--mono); font-size: .85em; border: 1px solid var(--line-2); border-bottom-width: 2px; border-radius: var(--zero-radius-sm); padding: 0 .35em; background: var(--paper); }
hr { border: 0; border-top: 1px solid var(--line); margin: var(--zero-space-6) 0; }

/* Brand ---------------------------------------------------------------------------------- */
.z-brand { display: inline-flex; align-items: center; gap: .55em; font-weight: 600; letter-spacing: -.01em; color: inherit; text-decoration: none; }
.z-brand svg, .z-brand img { height: 1.6em; width: auto; display: block; }
.z-brand .z-product { font-weight: 400; }

/* Buttons, chips, pills ------------------------------------------------------------------- */
.z-btn { display: inline-flex; align-items: center; gap: var(--zero-space-2); font: 600 var(--zero-font-size-sm)/1 var(--sans);
  border: 1px solid var(--line-2); border-radius: var(--zero-radius-md); padding: .55em 1em; background: var(--paper); color: var(--ink); text-decoration: none; cursor: pointer; }
.z-btn:hover { background: var(--fill); }
.z-btn--primary { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.z-btn--primary:hover { background: var(--ink-2); }
.z-btn:focus-visible, a:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.z-chip { display: inline-block; font-size: var(--zero-font-size-xs); font-weight: 500; background: var(--fill); border: 1px solid var(--line-2); border-radius: var(--zero-radius-md); padding: .1em .55em; }
.z-path { display: inline-flex; flex-wrap: wrap; align-items: center; gap: .3em; }
.z-path > i { font-style: normal; color: var(--ink-4); }
.z-pill { display: inline-block; font-size: var(--zero-font-size-xs); font-weight: 600; border-radius: var(--zero-radius-pill); padding: .1em .65em; background: var(--fill-2); color: var(--ink-2); white-space: nowrap; }
.z-pill--success { background: var(--zero-color-signal-success-fill); color: var(--zero-color-signal-success); }
.z-pill--warning { background: var(--zero-color-signal-warning-fill); color: var(--zero-color-signal-warning); }
.z-pill--danger  { background: var(--zero-color-signal-danger-fill);  color: var(--zero-color-signal-danger); }
.z-pill--info    { background: var(--zero-color-signal-info-fill);    color: var(--zero-color-signal-info); }
.z-pill--dark    { background: var(--ink); color: var(--paper); }

/* Tables ---------------------------------------------------------------------------------- */
.z-table { width: 100%; border-collapse: collapse; font-size: var(--zero-font-size-sm); margin: var(--zero-space-2) 0 var(--zero-space-4); }
.z-table th { font-size: var(--zero-font-size-xs); font-weight: 600; letter-spacing: var(--zero-font-tracking-label); text-transform: uppercase; color: var(--ink-3);
  text-align: left; border-bottom: var(--zero-border-rule) solid var(--ink); padding: var(--zero-space-2) var(--zero-space-3); vertical-align: bottom; }
.z-table td { border-bottom: 1px solid var(--line); padding: var(--zero-space-2) var(--zero-space-3); vertical-align: top; }
.z-table tr { break-inside: avoid; }
.z-table .z-group td { font-weight: 600; background: var(--fill); }
.z-table .z-indent-1 td:first-child { padding-left: calc(var(--zero-space-3) + 1.2em); }
.z-table .z-indent-2 td:first-child { padding-left: calc(var(--zero-space-3) + 2.4em); }
.z-table .z-subtotal td { font-weight: 600; border-top: 1px solid var(--ink-3); }
.z-table .z-total td { font-weight: 700; border-top: var(--zero-border-rule) solid var(--ink); border-bottom: 3px double var(--ink); }
.z-table--striped tbody tr:nth-child(even) td { background: var(--fill); }
.z-table--compact td, .z-table--compact th { padding: 3px var(--zero-space-2); }

/* Cards, callouts, KPIs -------------------------------------------------------------------- */
.z-card { border: 1px solid var(--line-2); border-radius: var(--zero-radius-lg); padding: var(--zero-space-4) var(--zero-space-5); background: var(--paper); break-inside: avoid; }
.z-card > :first-child { margin-top: 0; }
.z-note { border: 1px solid var(--line-2); border-left: 3px solid var(--ink); background: var(--fill); border-radius: var(--zero-radius-md);
  padding: var(--zero-space-3) var(--zero-space-4); margin: var(--zero-space-3) 0 var(--zero-space-4); break-inside: avoid; }
.z-note > .z-label { display: block; color: var(--ink); margin-bottom: 2px; }
.z-note > :last-child { margin-bottom: 0; }
.z-note--dark { background: var(--night); color: var(--on-night); border-color: var(--night); }
.z-note--dark > .z-label { color: var(--zero-color-on-night-3); }
.z-note--warning { border-left-color: var(--zero-color-signal-warning); }
.z-note--danger { border-left-color: var(--zero-color-signal-danger); }
.z-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--zero-space-3); margin: var(--zero-space-3) 0 var(--zero-space-5); }
.z-kpi { border: 1px solid var(--line-2); border-radius: var(--zero-radius-lg); padding: var(--zero-space-3) var(--zero-space-4); }
.z-kpi .z-label { display: block; }
.z-kpi .z-value { display: block; font-size: var(--zero-font-size-xl); font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -.01em; margin-top: 2px; }
.z-kpi .z-delta { font-size: var(--zero-font-size-xs); color: var(--ink-3); }
.z-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--zero-space-4); }

/* Numbered steps ------------------------------------------------------------------------------ */
.z-steps { list-style: none; padding: 0; margin: var(--zero-space-2) 0 var(--zero-space-4); counter-reset: z-step; }
.z-steps > li { display: grid; grid-template-columns: 1.6em 1fr; column-gap: .75em; padding: 1px 0 .75em; break-inside: avoid; }
.z-steps > li::before { counter-increment: z-step; content: counter(z-step); width: 1.6em; height: 1.6em; border-radius: 50%;
  background: var(--ink); color: var(--paper); font-weight: 600; font-size: .8em; display: flex; align-items: center; justify-content: center; margin-top: .1em; }
.z-steps > li > b:first-child { display: block; }

/* Definition list (field reference) ------------------------------------------------------------ */
.z-fields { display: grid; grid-template-columns: minmax(8em, 34%) 1fr; margin: var(--zero-space-2) 0 var(--zero-space-4); border-top: 1px solid var(--line); }
.z-fields > dt, .z-fields > dd { margin: 0; padding: var(--zero-space-2) var(--zero-space-3) var(--zero-space-2) 0; border-bottom: 1px solid var(--line); }
.z-fields > dt { font-weight: 500; }

/* Page chrome for web pages ------------------------------------------------------------------ */
.z-topbar { display: flex; align-items: center; gap: var(--zero-space-4); height: 56px; padding: 0 var(--zero-space-6); border-bottom: 1px solid var(--line); background: var(--paper); }
.z-topbar .z-spacer { flex: 1; }
.z-container { max-width: 1040px; margin: 0 auto; padding: var(--zero-space-8) var(--zero-space-6); }
.z-footer { border-top: 1px solid var(--line); color: var(--ink-3); font-size: var(--zero-font-size-xs); padding: var(--zero-space-4) var(--zero-space-6); }
@media (max-width: 640px) { .z-container { padding: var(--zero-space-6) var(--zero-space-4); } .z-topbar { padding: 0 var(--zero-space-4); } }
.z-note--dark .z-kbd, .z-note--dark kbd, .z-note--dark code { background: transparent; color: inherit; border-color: var(--zero-color-night-line); }