/* ═══════════════════════════════════════════════════════════════════════
   HiAnalytics — the dashboard sheet.

   Built on the spec-sheet design system: white paper, hairline black ink
   rules, the IEC wire-colour palette, ledger tables, mono data. A trade
   counter's price book, softened at the corners.

   PERMANENT DESIGN LAW applies here exactly as it does to the storefront and
   the admin panel: no glass, no blur, no hue cycling, no gradient decor, no
   soft shadows. If a number needs emphasis it gets weight and a rule, not a
   glow.

   ── What this sheet borrows from the storefront, on purpose ─────────────

   The dashboard is not a separate product with a family resemblance; it is
   the same shop's back office, so it uses the same furniture:

     · the same wordmark SVG, at the same size, over the same grey sub-line
     · page titles under a --rule ink line, sections under a --rule ink line
       with a mono aside on the far end (F-t «منتخب فروشگاه» grammar)
     · headline figures set like prices — big, mono, tabular, with the unit
       trailing small and muted
     · the cobalt-deep footer band with mono column heads and a translucent
       white rule, exactly as .ft-* renders it on the shop

   This is a SEPARATE docroot, so it carries its own copy of the tokens and
   fonts rather than linking across origins to css/spec.css. The tokens below
   are the same values; when spec.css :root changes, this block follows.
   ═══════════════════════════════════════════════════════════════════════ */

@font-face { font-family: "Vazirmatn"; font-style: normal; font-weight: 300; font-display: swap;
             src: url("fonts/vazirmatn-300.woff2") format("woff2"); }
@font-face { font-family: "Vazirmatn"; font-style: normal; font-weight: 400; font-display: swap;
             src: url("fonts/vazirmatn-400.woff2") format("woff2"); }
@font-face { font-family: "Vazirmatn"; font-style: normal; font-weight: 500; font-display: swap;
             src: url("fonts/vazirmatn-500.woff2") format("woff2"); }
@font-face { font-family: "Vazirmatn"; font-style: normal; font-weight: 700; font-display: swap;
             src: url("fonts/vazirmatn-700.woff2") format("woff2"); }
@font-face { font-family: "Saira Condensed"; font-style: normal; font-weight: 600; font-display: swap;
             src: url("fonts/saira-condensed-600.woff2") format("woff2"); }
@font-face { font-family: "Saira Condensed"; font-style: normal; font-weight: 700; font-display: swap;
             src: url("fonts/saira-condensed-700.woff2") format("woff2"); }
@font-face { font-family: "Spline Sans Mono"; font-style: normal; font-weight: 400; font-display: swap;
             src: url("fonts/spline-sans-mono-400.woff2") format("woff2"); }
@font-face { font-family: "Spline Sans Mono"; font-style: normal; font-weight: 500; font-display: swap;
             src: url("fonts/spline-sans-mono-500.woff2") format("woff2"); }

/* ————— tokens ————— */
:root {
  --bg: oklch(1 0 0);
  --surface: oklch(0.966 0.004 250);
  --jacket: oklch(0.888 0.004 250);
  --chalk: oklch(0.93 0.012 85);
  --ink: oklch(0.185 0.015 255);
  --muted: oklch(0.43 0.02 252);
  --line: oklch(0.872 0.008 250);
  --cobalt: oklch(0.50 0.135 245);
  --cobalt-hover: oklch(0.44 0.13 245);
  --cobalt-text: oklch(0.42 0.125 245);
  --cobalt-deep: oklch(0.295 0.072 252);
  --copper: oklch(0.66 0.115 58);
  --copper-deep: oklch(0.47 0.10 50);
  --earth-green: oklch(0.53 0.135 150);
  --earth-yellow: oklch(0.85 0.155 97);
  --brown-core: oklch(0.40 0.075 55);
  --on-dark: oklch(0.97 0.005 250);
  --on-dark-muted: oklch(0.845 0.012 250);
  /* The logo's tittle dot reads this. It belongs to the mark, never to the UI
     palette — links, buttons and state are --cobalt. */
  --spark: #1A4BFF;

  --font-display: "Vazirmatn", "Saira Condensed", "Arial Narrow", sans-serif;
  --font-body: "Vazirmatn", "Helvetica Neue", sans-serif;
  --font-mono: "Spline Sans Mono", "Vazirmatn", "Courier New", monospace;
  --font-latin-display: "Saira Condensed", "Arial Narrow", sans-serif;

  --radius-xs: 5px;
  --radius-sm: 9px;
  --radius-md: 13px;
  --radius-lg: 18px;
  --hair: 0.5px;
  --rule: 1.5px;

  --gutter: clamp(1rem, 2.4vw, 2.25rem);
  --tap: 44px;
  --rail-w: 13.5rem;
  --top-h: 3.9rem;

  /* The series palette. IEC wire colours, in the order a chart should reach
     for them — cobalt (neutral/blue), copper (line), green (earth), brown
     (line), yellow (earth). Five is the honest maximum for a legend somebody
     reads at a glance; a sixth series belongs in a table. */
  --s1: var(--cobalt);
  --s2: var(--copper);
  --s3: var(--earth-green);
  --s4: var(--brown-core);
  --s5: oklch(0.72 0.14 97);

  /* Proportion gauges and chart fills: cobalt washed out until it is quiet
     enough to sit under ten rows of text without shouting. Flat values, not
     alpha over an unknown ground — this sheet only ever paints on paper. */
  --gauge: oklch(0.845 0.055 245);
  --area: oklch(0.964 0.017 245);
}

/* ————— reset ————— */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.65;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 700; line-height: 1.3; margin: 0; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
a { color: var(--cobalt-text); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }
table { border-collapse: collapse; width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
img, svg { max-width: 100%; }
::selection { background: var(--cobalt); color: var(--on-dark); }

/* Apple-style continuous corners where the engine has them; border-radius is
   the universal fallback. :where() keeps specificity at 0 so nothing here ever
   fights the cascade. */
@supports (corner-shape: squircle) {
  :where(.an-btn, .an-inp, .an-sel, .an-card, .an-kpis, .an-chip, .an-code,
         .an-empty, .an-alert, .an-login-card, .an-tag, .an-rail-a, textarea) {
    corner-shape: squircle;
  }
}

/* NO letter-spacing anywhere Persian can appear. Vazirmatn's letters join;
   tracking them apart breaks the joins and «بانک برق اصفهان» renders as three
   words full of holes. The storefront has exactly one letter-spaced rule
   (.kicker, Latin only) and this sheet keeps to that. */

/* Latin runs inside Persian text — SKUs, paths, hostnames, dates. */
.ltr { direction: ltr; unicode-bidi: isolate; font-family: var(--font-mono); font-weight: 400; }
.num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-weight: 500; }

:focus-visible { outline: 2px solid var(--cobalt); outline-offset: 2px; border-radius: var(--radius-xs); }

/* Named for a screen reader, invisible to everyone else. The wordmark is
   outline art with aria-hidden on it, so without this the only accessible
   name the home link has is «دفتر آمار». */
.an-sr {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap; border: 0;
}

.an-skip {
  position: absolute; inset-inline-start: -9999px; top: 0; z-index: 90;
  background: var(--ink); color: var(--on-dark); padding: .6rem 1rem;
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
}
.an-skip:focus { inset-inline-start: 0; }

/* ═══════════ shell ═══════════ */

/* The masthead. Hairline grey under it, not ink: the heavy ink rules in this
   sheet are reserved for page and section titles, so that a reader scanning
   down the page can tell furniture from content by line weight alone. */
.an-top {
  border-bottom: var(--hair) solid var(--line);
  background: var(--bg);
  position: sticky; top: 0; z-index: 30;
}
.an-top-in {
  display: flex; align-items: center; gap: 1rem;
  padding: .55rem var(--gutter);
  min-height: var(--top-h);
  flex-wrap: wrap;
}

/* Same mark, same 23px block-size, same grey sub-line as .nv-wordmark on the
   shop — the one element that has to be pixel-identical for this to read as
   the same company's back office rather than a lookalike. */
.an-brand {
  display: flex; flex-direction: column; align-items: flex-start; justify-content: center;
  gap: 4px; flex: none;
  color: var(--ink); text-decoration: none; white-space: nowrap;
  padding-inline-end: 1rem;
  border-inline-end: var(--hair) solid var(--line);
}
.an-brand:hover { text-decoration: none; }
.an-logo { display: block; block-size: 23px; inline-size: auto; }
.an-brand-sub {
  font-family: var(--font-display); font-weight: 500;
  font-size: .68rem; line-height: 1; color: var(--muted);
  transition: color 150ms ease-out;
}
.an-brand:hover .an-brand-sub { color: var(--ink); }

/* The range control, and the resolved dates beside it. The dates are not
   decoration: a preset like «۷ روز گذشته» ends yesterday, and an owner who
   does not know that reads every Saturday morning as a crash. */
.an-range { display: flex; align-items: center; gap: .5rem; margin-inline-start: auto; flex-wrap: wrap; }
.an-range-lbl {
  font-family: var(--font-mono); font-size: .72rem; font-weight: 500;
  color: var(--muted);
}
.an-range-txt {
  font-family: var(--font-mono); font-size: .74rem; color: var(--muted);
  border-inline-start: var(--hair) solid var(--line);
  padding-inline-start: .6rem;
}

.an-top-end { display: flex; align-items: center; gap: .7rem; }
.an-who {
  font-size: .8rem; color: var(--muted);
  display: inline-flex; align-items: center; gap: .35rem;
}
.an-who::before {
  content: ""; inline-size: 7px; block-size: 7px; border-radius: 2px;
  background: var(--earth-green); flex: none;
}
.an-inline { display: inline; }

/* ————— the report rail ————— */

.an-shell {
  display: grid;
  grid-template-columns: var(--rail-w) minmax(0, 1fr);
  align-items: start;
  max-width: 108rem; margin-inline: auto;
  position: relative;
}
/* The rail/report divider belongs to the SHELL, not to the rail.
   Hung on the rail it either stops halfway down a long report, or — if the
   rail is stretched to fill — the rail's own height starts driving the page
   height, and a short report ends up a screen taller than its content with
   the footer pushed under the fold. An absolutely positioned rule spans
   whatever the taller column turns out to be and costs the layout nothing. */
.an-shell::before {
  content: "";
  position: absolute; top: 0; bottom: 0;
  inset-inline-start: var(--rail-w);
  inline-size: var(--hair);
  background: var(--line);
}

.an-rail {
  position: sticky; top: var(--top-h);
  align-self: start;
  max-height: calc(100dvh - var(--top-h));
  overflow-y: auto;
  padding: 1.35rem 0 2rem var(--gutter);
  padding-inline-start: var(--gutter);
  padding-inline-end: 0;
}
/* Thirteen reports in one flat list is a menu nobody reads twice. The groups
   are how an owner finds «قیف‌ها» without hunting: they name the question
   being asked, not the table being read. */
.an-rail-g {
  font-family: var(--font-mono); font-size: .7rem; font-weight: 500;
  color: var(--muted);
  padding: 0 .55rem .3rem;
  margin-top: 1.15rem;
  border-bottom: var(--hair) solid var(--line);
  margin-inline-end: .9rem;
}
.an-rail-g:first-child { margin-top: 0; }
.an-rail-list { margin-top: .3rem; margin-inline-end: .9rem; }
.an-rail-a {
  display: block; position: relative;
  padding: .3rem .55rem;
  border-radius: var(--radius-sm);
  color: var(--ink); font-size: .9rem;
  transition: background-color 130ms ease-out, color 130ms ease-out;
}
.an-rail-a:hover { background: var(--surface); text-decoration: none; }
.an-rail-a.is-on { background: var(--surface); font-weight: 500; }
/* The active mark is a cobalt bar on the reading edge — the same 2px cobalt
   the shop's nav puts under the current link, turned on its side because this
   list runs vertically. */
.an-rail-a.is-on::before {
  content: ""; position: absolute;
  inset-inline-start: -1px; top: .38rem; bottom: .38rem;
  inline-size: 2px; border-radius: 2px;
  background: var(--cobalt);
}

.an-main { padding: 1.6rem var(--gutter) 3.5rem; min-width: 0; }

/* ————— footer: the shop's own dark band ————— */

.an-foot {
  background: var(--cobalt-deep); color: var(--on-dark-muted);
  margin-top: 3rem;
  padding: 1.6rem var(--gutter);
  font-size: .82rem;
}
.an-foot-in {
  max-width: 108rem; margin-inline: auto;
  display: flex; flex-wrap: wrap; gap: .6rem 2rem; align-items: baseline;
}
.an-foot b { color: var(--on-dark); font-weight: 500; }
.an-foot-note { color: var(--on-dark-muted); }
.an-foot-stamp {
  font-family: var(--font-mono); font-size: .74rem;
  color: var(--on-dark-muted);
  margin-inline-start: auto;
  border-inline-start: 1px solid oklch(1 0 0 / 0.25);
  padding-inline-start: .8rem;
}

/* ═══════════ page furniture ═══════════ */

/* Page title under a heavy ink rule, with the range restated in mono on the
   far end of the same baseline — the shop's «فروشگاه ⋯ ۱۲ کالا در دفتر». */
.an-h {
  display: flex; align-items: baseline; gap: .75rem 1rem; flex-wrap: wrap;
  border-bottom: var(--rule) solid var(--ink);
  padding-bottom: .5rem;
  margin-bottom: 1.35rem;
}
.an-h h1 { font-size: 1.5rem; }
.an-h-note {
  font-family: var(--font-mono); font-size: .78rem; color: var(--muted);
  font-weight: 400;
}
/* The aside is pushed away by the TITLE, not pulled by itself: these asides
   carry class="ltr", which sets direction on the element, and an auto
   margin-inline-start on an LTR element inside an RTL row resolves to the
   left — the side it was already on. Pushing from the h1 has no such trap. */
.an-h h1 { margin-inline-end: auto; }
.an-h-lede {
  color: var(--muted); font-size: .9rem;
  max-width: 46rem; margin: -.7rem 0 1.4rem;
}

.an-sec { margin-top: 2.25rem; }
/* A section that opens the page directly under the title would draw a second
   heavy ink rule two centimetres below the first — the page rule and the
   section rule stacked, reading as a printing fault rather than a hierarchy.
   The page rule already opened the section; this one only repeats it. */
.an-h + .an-sec { margin-top: 1.5rem; }
.an-h + .an-sec > .an-sec-h { border-top: 0; padding-top: 0; }
.an-sec-h {
  display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
  border-top: var(--rule) solid var(--ink);
  padding-top: .5rem; margin-bottom: .85rem;
}
.an-sec-h h2 { font-size: 1.05rem; }
.an-sec-h a {
  font-family: var(--font-mono); font-size: .76rem;
  color: var(--cobalt-text); white-space: nowrap;
}
/* The arrow slides along the reading direction on hover — the one micro-move
   this design system signs its name with. */
.an-sec-h a::after { content: " ‹"; display: inline-block; transition: transform 140ms ease-out; }
.an-sec-h a:hover::after { transform: translateX(-4px); }

/* ————— KPI ledger: the headline figures ————— */

/* Set like the shop's price cards — big tabular mono, unit trailing small and
   muted — because these ARE the prices of this page. The row is one ruled
   block, hairline verticals inside, heavy ink on top: a ledger header. */
/* The seams are the grid GAP showing the container's own ground, not borders
   on the cells. Six KPIs in a column narrow enough to wrap used to break into
   4 + 2 with nothing ruling the two rows apart, because a cell only knew
   about its inline-start neighbour. A gap cannot miss a seam it did not
   predict. */
.an-kpis {
  display: grid; gap: 1px;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  border: var(--hair) solid var(--line);
  border-top: var(--rule) solid var(--ink);
  border-radius: 0 0 var(--radius-md) var(--radius-md);
  overflow: hidden;
  background: var(--line);
}
.an-kpi {
  padding: .8rem 1rem .85rem;
  background: var(--bg);
  min-width: 0;
}
.an-kpi-l {
  display: block; color: var(--muted); font-size: .78rem;
  margin-bottom: .1rem; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
}
.an-kpi-v {
  display: block; font-family: var(--font-mono); font-weight: 500;
  font-size: 1.75rem; line-height: 1.15;
  font-variant-numeric: tabular-nums;
  /* Left in the page's own RTL flow, exactly like a price on the shop.
     Persian digits are bidi-EN and order themselves; forcing direction:ltr
     here only moves «ریال» to the wrong side of the figure. */
  text-align: start;
  white-space: nowrap;
}
.an-kpi-v.is-money { font-size: 1.28rem; }
/* The unit, never the figure. Same relationship the shop's price card sets up
   between «۲۶,۰۰۰» and «ریال». */
.an-kpi-u {
  font-family: var(--font-body); font-style: normal; font-weight: 400;
  font-size: .72rem; color: var(--muted); margin-inline-start: .3rem;
}
.an-kpi-foot { display: flex; align-items: center; gap: .5rem; margin-top: .25rem; min-height: 1.15rem; }
.an-kpi-s { display: block; flex: none; inline-size: 4.5rem; }
.an-kpi-s svg { display: block; }

.an-d { font-size: .74rem; font-family: var(--font-mono); font-weight: 500; white-space: nowrap; }
.an-d-up   { color: var(--earth-green); }
.an-d-down { color: var(--copper-deep); }
.an-d-flat, .an-d-new { color: var(--muted); font-weight: 400; }

/* ————— cards ————— */

.an-card {
  border: var(--hair) solid var(--line);
  border-radius: var(--radius-md);
  background: var(--bg);
  padding: 1rem 1.15rem 1.1rem;
  min-width: 0;
}
.an-card + .an-card { margin-top: 1rem; }
.an-card-h {
  display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
  border-bottom: var(--hair) solid var(--line);
  padding-bottom: .5rem;
  margin-bottom: .75rem;
}
.an-card-h h3 { font-size: .95rem; }
.an-card-h .an-h-note { font-size: .74rem; }
.an-card-h a { font-family: var(--font-mono); font-size: .74rem; white-space: nowrap; }

/* A card whose table already carries its own head rule does not need a second
   one directly above it. */
.an-card > .an-tbl-wrap:first-child { margin-top: -.15rem; }

.an-grid { display: grid; gap: 1rem; }
.an-grid-2 { grid-template-columns: repeat(auto-fit, minmax(23rem, 1fr)); }
.an-grid-3 { grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); }

/* ————— ledger table ————— */

.an-tbl-wrap { overflow-x: auto; }
.an-tbl { font-size: .87rem; }
.an-tbl th, .an-tbl td {
  padding: .42rem .6rem;
  border-bottom: var(--hair) solid var(--line);
  text-align: start;
  vertical-align: baseline;
}
.an-tbl th:first-child, .an-tbl td:first-child { padding-inline-start: 0; }
.an-tbl th:last-child,  .an-tbl td:last-child  { padding-inline-end: 0; }
.an-tbl thead th {
  border-bottom: var(--hair) solid var(--ink);
  font-family: var(--font-mono); font-weight: 500;
  color: var(--muted); font-size: .74rem;
  white-space: nowrap;
  padding-bottom: .35rem;
}
.an-tbl tbody tr:last-child td { border-bottom: 0; }
.an-tbl tbody tr { transition: background-color 120ms ease-out; }
.an-tbl tbody tr:hover { background: var(--surface); }
/* Figures stack on the units digit.
   `text-align: right` and not the logical `end`, deliberately: a Persian-digit
   number renders left-to-right whatever the paragraph does, so its units digit
   is always on its right. Aligning the column's logical end (the LEFT, in RTL)
   stacks the MOST significant digit instead, and «۴۴,۵۵۳,۰۰۰» over
   «۱,۰۰۰,۰۰۰» then reads as two numbers of the same size. In a price book the
   units column is the one that has to line up. */
.an-tbl .n {
  font-family: var(--font-mono); font-variant-numeric: tabular-nums;
  text-align: right; white-space: nowrap; font-weight: 500;
  /* Shrink to content. Without it the browser splits the leftover width
     evenly, and a two-column table pushes its one figure column to the far
     edge with a hand's width of nothing between the gauge and the number. */
  width: 1%;
}
/* Data cells only. The heads carry Persian words — «درآمد (ریال)» — and an
   LTR base direction would move the bracket to the wrong end of the phrase. */
.an-tbl td.n { direction: ltr; }
/* The label column carries the proportion gauge, so it needs a floor: in a
   narrow column every gauge is short and two rows an order of magnitude apart
   look similar. It also needs a ceiling, or one long page title pushes the
   numbers off the screen. */
.an-tbl .an-lbl-cell {
  min-width: 22ch; max-width: 46ch;
}
.an-tbl tfoot td {
  border-top: var(--hair) solid var(--ink);
  border-bottom: 0;
  font-weight: 700; padding-top: .5rem;
}
.an-tbl tfoot .n { font-weight: 700; }

/* The proportion gauge.

   Was a filled block behind the label, which at ten rows read as a stack of
   loading skeletons — grey rectangles are what an unfinished page looks like.
   It is now a rule UNDER the label, sized by --w: the same thing the ledger
   does everywhere else in this design system, which is draw a line. */
.an-bar {
  position: relative; display: block;
  padding-block: .05rem .38rem;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.an-bar::after {
  content: "";
  position: absolute; inset-inline-start: 0; bottom: 0;
  block-size: 3px; inline-size: var(--w, 0%); min-inline-size: 2px;
  background: var(--gauge);
  border-radius: 2px;
}
.an-tbl tbody tr:hover .an-bar::after { background: var(--cobalt); }
.an-h-note { font-family: var(--font-mono); }
.an-bar .an-h-note { font-size: .74rem; }

/* ————— states ————— */

.an-empty {
  border: var(--hair) solid var(--line);
  border-radius: var(--radius-md);
  background: var(--surface);
  padding: 1.5rem 1rem; text-align: center; color: var(--muted); font-size: .87rem;
}
.an-alert {
  border: var(--hair) solid var(--copper-deep);
  border-inline-start: var(--rule) solid var(--copper-deep);
  border-radius: var(--radius-sm);
  background: var(--bg); color: var(--copper-deep);
  padding: .55rem .85rem; font-size: .87rem; margin-bottom: 1rem;
}
.an-note {
  border-inline-start: var(--rule) solid var(--line);
  padding: .05rem .7rem; color: var(--muted); font-size: .8rem;
  margin-top: .5rem;
}
.an-code {
  font-family: var(--font-mono); font-size: .8rem;
  direction: ltr; text-align: left;
  background: var(--surface);
  border: var(--hair) solid var(--line);
  border-radius: var(--radius-sm);
  padding: .5rem .7rem; margin-top: .5rem;
  overflow-x: auto;
}

/* ————— controls ————— */

.an-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
  min-height: 2.1rem;
  padding: .3rem 1rem;
  border: var(--hair) solid var(--ink);
  border-radius: var(--radius-sm);
  background: var(--ink); color: var(--on-dark);
  font-weight: 500; font-size: .88rem; cursor: pointer;
  transition: background-color 130ms ease-out, border-color 130ms ease-out;
}
.an-btn:hover { background: var(--cobalt-deep); border-color: var(--cobalt-deep); text-decoration: none; }
.an-btn-quiet { background: var(--bg); color: var(--ink); border-color: var(--line); }
.an-btn-quiet:hover { background: var(--surface); color: var(--ink); border-color: var(--ink); }
.an-btn-sm { min-height: 1.85rem; padding: .15rem .7rem; font-size: .82rem; }
.an-btn-full { width: 100%; min-height: var(--tap); margin-top: 1.2rem; }

.an-inp, .an-sel {
  min-height: 2.1rem;
  padding: .2rem .6rem;
  border: var(--hair) solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--bg);
  font-size: .87rem;
  transition: border-color 130ms ease-out;
}
.an-inp:hover, .an-sel:hover { border-color: var(--ink); }
.an-inp:focus, .an-sel:focus { border-color: var(--ink); }
.an-sel { padding-inline-end: 1.6rem; cursor: pointer; }
.an-inp-date { width: 9ch; text-align: center; }
.an-lbl {
  display: block; margin-top: .95rem; margin-bottom: .25rem;
  font-size: .84rem; font-weight: 500; color: var(--ink);
}
.an-login .an-inp { width: 100%; min-height: var(--tap); }

/* ————— chips ————— */

.an-chips { display: flex; flex-wrap: wrap; gap: .35rem; align-items: center; }
.an-chips-row { margin-bottom: 1.1rem; }
.an-chips-row .an-chip { min-height: 1.85rem; display: inline-flex; align-items: center; padding: .1rem .75rem; }
.an-chip {
  display: inline-block; padding: .05rem .55rem;
  border: var(--hair) solid var(--line); border-radius: var(--radius-sm);
  font-size: .77rem; color: var(--muted); background: var(--bg);
  transition: border-color 130ms ease-out, background-color 130ms ease-out, color 130ms ease-out;
}
a.an-chip:hover { border-color: var(--ink); color: var(--ink); text-decoration: none; }
.an-chip.is-on {
  border-color: var(--cobalt); background: var(--cobalt); color: var(--on-dark);
  font-weight: 500;
}
a.an-chip.is-on:hover { border-color: var(--cobalt-hover); background: var(--cobalt-hover); color: var(--on-dark); }
.an-chip-server { border-color: var(--earth-green); color: var(--earth-green); }
.an-chip-bot    { border-color: var(--copper-deep); color: var(--copper-deep); }

/* One condition row of the segment builder: field, operator, value. */
.an-cond { display: flex; gap: .5rem; margin-bottom: .45rem; flex-wrap: wrap; }
.an-cond .an-sel { flex: 0 1 auto; }
.an-cond .an-inp { flex: 1 1 12rem; min-width: 8rem; max-width: 22rem; }

/* A destructive action that must be a POST button but should read as a link —
   a GET delete is one prefetch away from firing by itself. */
.an-linkbtn {
  background: none; border: 0; padding: 0; cursor: pointer;
  color: var(--copper-deep); font-size: inherit; text-decoration: none;
}
.an-linkbtn:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ═══════════ charts ═══════════ */

/* The host is the positioning context for the hover readout, so the readout
   can be placed with CSSOM instead of a style attribute — style-src 'self'
   blocks the attribute outright. */
[data-an-chart] { position: relative; }
.an-chart { width: 100%; display: block; touch-action: pan-y; }
.an-chart .grid { stroke: var(--line); stroke-width: 1; }
.an-chart .axis { stroke: var(--ink); stroke-width: 1; }
.an-chart .lbl  { fill: var(--muted); font-size: 11px; font-family: var(--font-mono); }
/* Time-axis labels only. The value axis is a bare figure with at most a
   one-letter magnitude glued to it and reads the same either way; a date does
   not. */
.an-chart .lblx { direction: rtl; }
.an-chart .area { fill: var(--area); stroke: none; }
.an-chart .ser1 { stroke: var(--s1); fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.an-chart .ser2 { stroke: var(--muted); fill: none; stroke-width: 1.25; stroke-dasharray: 4 3; }
.an-chart .bar1 { fill: var(--s1); }
.an-chart .bar2 { fill: var(--s2); }
.an-chart .dot  { fill: var(--s1); }
.an-chart .cross { stroke: var(--ink); stroke-width: 1; stroke-dasharray: 3 3; }
.an-chart .hit  { fill: transparent; }
.an-chart .marker { fill: var(--bg); stroke: var(--s1); stroke-width: 2; }

/* The hover readout. A bordered paper chip, not a floating dark tooltip —
   this sheet has no shadows to lift one off the page with. */
.an-tip {
  position: absolute; z-index: 5; pointer-events: none;
  transform: translate(-50%, -100%);
  background: var(--bg);
  border: var(--hair) solid var(--ink);
  border-radius: var(--radius-sm);
  padding: .25rem .5rem;
  font-size: .76rem; line-height: 1.5;
  white-space: nowrap;
}
.an-tip[hidden] { display: none; }
.an-tip b { font-family: var(--font-mono); font-weight: 500; }
.an-tip b.is-cmp { font-weight: 400; color: var(--muted); }
.an-tip i { font-style: normal; color: var(--muted); display: block; font-size: .7rem; }

.an-legend {
  display: flex; gap: 1.1rem; font-size: .76rem; color: var(--muted);
  margin-top: .5rem; padding-top: .45rem;
  border-top: var(--hair) solid var(--line);
}
.an-legend i { display: inline-block; width: 14px; height: 2px; vertical-align: middle; margin-inline-end: .35rem; }
.an-legend .l1 { background: var(--s1); }
.an-legend .l2 { background: var(--muted); }

/* ═══════════ login ═══════════ */

.an-login-body { background: var(--surface); }
.an-login {
  min-height: 100dvh;
  display: grid; place-items: center;
  padding: var(--gutter);
}
.an-login-card {
  width: min(24rem, 100%);
  border: var(--hair) solid var(--line);
  border-top: var(--rule) solid var(--ink);
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
  background: var(--bg);
  padding: 1.5rem 1.5rem 1.8rem;
}
.an-login-head {
  text-align: center;
  border-bottom: var(--hair) solid var(--line);
  padding-bottom: 1rem; margin-bottom: .4rem;
}
.an-login-head .an-logo { block-size: 26px; margin-inline: auto; }
.an-login-title {
  font-size: 1.05rem; margin-top: .75rem;
}
.an-login-sub {
  font-family: var(--font-mono); font-size: .78rem;
  color: var(--muted); margin-top: .15rem;
}

/* ═══════════ small screens ═══════════ */

@media (max-width: 60rem) {
  .an-shell { display: block; }
  .an-shell::before { display: none; }
  /* The rail lies down and becomes a scrolling strip. The group labels stay:
     they are the only thing telling a reader that «قیف‌ها» and «جست‌وجو»
     answer the same kind of question. */
  .an-rail {
    position: sticky; top: var(--top-h);
    /* The desktop rail is a scrolling full-height column; left capped here it
       would be a horizontal strip with a vertical scrollbar. */
    max-height: none;
    overflow-x: auto; overflow-y: hidden;
    padding: 0 var(--gutter);
    border-bottom: var(--hair) solid var(--line);
    background: var(--bg); z-index: 25;
  }
  .an-rail-in { display: flex; align-items: center; gap: .1rem; min-width: max-content; }
  .an-rail-g {
    margin: 0 .5rem 0 0; padding: 0 .5rem 0 0;
    border-bottom: 0;
    border-inline-end: var(--hair) solid var(--line);
    align-self: center;
  }
  .an-rail-g:first-child { margin-top: 0; }
  .an-rail-list { display: flex; margin: 0; }
  .an-rail-a { padding: .55rem .6rem; border-radius: 0; white-space: nowrap; }
  .an-rail-a:hover, .an-rail-a.is-on { background: transparent; }
  .an-rail-a.is-on::before {
    inset-inline-start: .6rem; inset-inline-end: .6rem;
    top: auto; bottom: 0; block-size: 2px; inline-size: auto;
  }
}

@media (max-width: 45rem) {
  .an-top-in { gap: .55rem; }
  .an-brand { border-inline-end: 0; padding-inline-end: 0; }
  .an-range { width: 100%; margin-inline-start: 0; order: 3; }
  .an-kpis { grid-template-columns: repeat(2, 1fr); }
  .an-kpi-v { font-size: 1.5rem; }
  .an-kpi-v.is-money { font-size: 1.05rem; }
  .an-main { padding-top: 1.1rem; }
  /* 22ch of label on a phone pushes every figure off-screen and makes the
     reader scroll sideways to learn anything at all. The gauge still reads
     at 14ch; the numbers matter more. */
  .an-tbl .an-lbl-cell { min-width: 14ch; }
  .an-h h1 { font-size: 1.3rem; }
  .an-h h1 { margin-inline-end: 0; }
  .an-foot-stamp { margin-inline-start: 0; border-inline-start: 0; padding-inline-start: 0; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition-duration: 1ms !important; animation-duration: 1ms !important; }
  .an-sec-h a:hover::after { transform: none; }
}

@media print {
  .an-top, .an-rail, .an-foot, .an-btn, .an-tip { display: none; }
  .an-shell { display: block; }
  .an-shell::before { display: none; }
  .an-main { padding: 0; }
  .an-card, .an-kpis { break-inside: avoid; }
  .an-tbl tbody tr:hover { background: none; }
}