/* Kwikz — Artifact design language, Kwikz content.
 *
 * Palette is Artifact's own: indigo #4f46e5, near-black #141822 (never pure
 * black), and an accent that is a TINT of the primary rather than a grey.
 * Chart series are one hue ramped with color-mix(), copied from their CSS:
 *   --color-series-2: color-mix(in oklch, var(--primary) 75%, var(--background));
 *
 * The Kwikz crest keeps its own green — it is the brand mark, not theme paint.
 * Everything directional is a logical property so the RTL flip costs nothing.
 */

/* ---------------------------------------------------------------- tokens */

:root {
  --radius: .75rem;
  --radius-sm: .5rem;

  --primary: #4f46e5;
  --primary-fg: #fafafa;
  --ring: #4f46e5;

  --background: #ffffff;
  --foreground: #141822;
  --card: #ffffff;
  --card-fg: #141822;

  --secondary: #f2f4f9;
  --muted: #f2f4f9;
  /* Artifact's #6c727e is 4.26:1 on --accent and 4.39:1 on --muted — just under
   * AA. Same hue and saturation, lightness stepped down until every surface this
   * token can land on clears 4.5:1 (worst case is --accent at 4.57:1). */
  --muted-fg: #686d79;
  --border: #e4e7ee;
  --input: #e4e7ee;

  --accent: #edf0ff;
  --accent-fg: #4338ca;

  --sidebar: #f9fafd;
  --sidebar-fg: #4a5060;
  --sidebar-border: #e4e7ee;

  --good: #067647;
  --good-bg: #ecfdf3;
  --warn: #b54708;
  --warn-bg: #fffaeb;
  --bad: #b42318;
  --bad-bg: #fef3f2;
  --info: #175cd3;
  --info-bg: #eff8ff;

  /* one-hue ramp — Artifact's color-mix technique, resolved for wide support */
  --series-1: #4f46e5;
  --series-2: #8b8cf0;
  --series-3: #b3b1f6;
  --series-4: #d5d3fa;
  --series-5: #ecebfd;

  --shadow-sm: 0 1px 2px rgba(20, 24, 34, .05);
  --shadow: 0 1px 3px rgba(20, 24, 34, .07), 0 1px 2px rgba(20, 24, 34, .04);
  --shadow-md: 0 4px 12px rgba(20, 24, 34, .07);
  --shadow-lg: 0 16px 40px rgba(20, 24, 34, .14);

  --font: Alexandria, Manrope, system-ui, -apple-system, sans-serif;
  --font-num: Manrope, Alexandria, system-ui, sans-serif;

  --sidebar-w: 248px;
}

[data-theme="dark"] {
  --primary: #7f8aff;
  --primary-fg: #10141d;
  --ring: #7f8aff;

  --background: #10141d;
  --foreground: #fafafa;
  --card: #181d27;
  --card-fg: #fafafa;

  --secondary: #232936;
  --muted: #232936;
  --muted-fg: #98a0b3;
  --border: #2c3341;
  --input: #333b4b;

  --accent: #2c304c;
  --accent-fg: #b3b1f6;

  --sidebar: #141926;
  --sidebar-fg: #98a0b3;
  --sidebar-border: #2c3341;

  --good: #47cd89;
  --good-bg: #0c2b1c;
  --warn: #fdb022;
  --warn-bg: #33240a;
  --bad: #fda29b;
  --bad-bg: #38191a;
  --info: #84adff;
  --info-bg: #102a54;

  --series-1: #7f8aff;
  --series-2: #6d74f5;
  --series-3: #4f46e5;
  --series-4: #3b3599;
  --series-5: #2a276b;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .4);
  --shadow: 0 1px 3px rgba(0, 0, 0, .5);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, .5);
  --shadow-lg: 0 16px 40px rgba(0, 0, 0, .6);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--background);
  color: var(--foreground);
  font-family: var(--font);
  font-size: 14px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

button, input, select, textarea { font: inherit; color: inherit; }
a { color: var(--primary); text-decoration: none; }
img { max-width: 100%; }

.num { font-family: var(--font-num); font-variant-numeric: tabular-nums; direction: ltr; unicode-bidi: isolate; display: inline-block; }
/* A bare inline link is only as tall as its glyphs, so it misses the 24px
   target size floor even though it reads as a normal text link. */
a.num { display: inline-block; min-block-size: 24px; padding-block: 3px; }

/* ----------------------------------------------------------------- gate */

/* The demo opens on a role chooser, like the live site's merchant/admin
   dialogs. The shell stays hidden until a role is chosen, so nothing behind
   the gate is rendered or reachable first. */
.gate {
  min-height: 100vh; display: grid; place-items: center;
  padding: 32px 20px;
  background:
    radial-gradient(900px 480px at 50% -10%, var(--accent), transparent 70%),
    var(--background);
}
.gate[hidden] { display: none; }
.gate-box {
  width: min(420px, 100%);
  background: var(--card); color: var(--card-fg);
  border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  padding: 30px 28px;
  text-align: center;
}
.gate-crest { width: 52px; height: 52px; border-radius: 13px; }
.gate-eyebrow { margin: 14px 0 2px; font-size: 11.5px; font-weight: 700; letter-spacing: .07em; color: var(--muted-fg); }
.gate-title { margin: 0; font-size: 26px; font-weight: 800; letter-spacing: -.03em; }
.gate-lead { margin: 7px 0 20px; font-size: 13.5px; color: var(--muted-fg); }
.gate-roles { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding: 4px; background: var(--muted); border-radius: var(--radius-sm); }
.gate-roles button {
  min-block-size: 34px; border: 0; border-radius: 7px; cursor: pointer;
  background: transparent; color: var(--muted-fg); font-size: 13px; font-weight: 600;
  transition: background .13s, color .13s;
}
.gate-roles button[aria-selected="true"] { background: var(--card); color: var(--foreground); box-shadow: var(--shadow-sm); }
.gate-form { display: grid; gap: 13px; margin-top: 18px; text-align: start; }
.gate-form .field { display: grid; gap: 6px; }
.gate-submit { width: 100%; justify-content: center; min-block-size: 38px; }
.gate-error {
  margin: 0; padding: 8px 11px; border-radius: var(--radius-sm);
  background: var(--bad-bg); color: var(--bad); font-size: 12.5px; font-weight: 600;
}
.gate-error[hidden] { display: none; }
.gate-note { margin: 18px 0 0; font-size: 11.5px; line-height: 1.65; color: var(--muted-fg); }

/* who is signed in, and the way out */
.who {
  display: flex; align-items: center; gap: 9px;
  padding: 8px; margin-block-end: 6px;
  border: 1px solid var(--sidebar-border); border-radius: var(--radius-sm);
  background: var(--card);
}
.who-avatar {
  width: 30px; height: 30px; flex: none; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--accent); color: var(--accent-fg);
  font-size: 13px; font-weight: 700;
}
.who-text { display: grid; min-width: 0; margin-inline-end: auto; }
.who-name { font-size: 12.5px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.who-role { font-size: 11px; color: var(--muted-fg); }

/* ---------------------------------------------------------------- shell */

.shell { display: grid; grid-template-columns: var(--sidebar-w) 1fr; min-height: 100vh; }

.sidebar {
  background: var(--sidebar);
  border-inline-end: 1px solid var(--sidebar-border);
  display: flex; flex-direction: column;
  padding: 14px 10px;
  position: sticky; top: 0; height: 100vh; overflow-y: auto;
  gap: 2px;
}

.brand { display: flex; align-items: center; gap: 9px; padding: 6px 8px 14px; }
.brand img { width: 30px; height: 30px; border-radius: 8px; flex: none; }
.brand-text { line-height: 1.15; }
.brand-name { font-family: var(--font-num); font-weight: 900; font-size: 17px; letter-spacing: -.045em; }
.brand-sub { font-size: 10.5px; color: var(--muted-fg); }

.nav-label { font-size: 10px; font-weight: 700; letter-spacing: .08em; color: var(--muted-fg); padding: 12px 8px 5px; }

.nav-item {
  display: flex; align-items: center; gap: 9px; width: 100%;
  padding: 7px 8px; border: 0; border-radius: 7px; background: none;
  color: var(--sidebar-fg); font-size: 13px; font-weight: 500;
  cursor: pointer; text-align: start; transition: background .13s, color .13s;
}
.nav-item:hover { background: var(--secondary); color: var(--foreground); }
.nav-item[aria-current="page"] { background: var(--primary); color: var(--primary-fg); font-weight: 600; }
.nav-item[aria-current="page"] .ico { opacity: 1; }
.nav-item .ico { width: 16px; height: 16px; flex: none; opacity: .7; }
.nav-item .n-badge { margin-inline-start: auto; font-size: 11px; font-family: var(--font-num); opacity: .8; }

/* collapsible group */
.nav-group > .nav-item { font-weight: 600; color: var(--foreground); }
.nav-caret { margin-inline-start: auto; width: 13px; height: 13px; opacity: .5; transition: transform .16s; }
.nav-group[data-open="true"] .nav-caret { transform: rotate(-90deg); }
.nav-sub { display: none; padding: 2px 0 4px; }
.nav-group[data-open="true"] .nav-sub { display: block; }
.nav-sub .nav-item { padding-inline-start: 32px; font-size: 12.5px; font-weight: 400; }

.sidebar-foot { margin-top: auto; padding-top: 12px; display: grid; gap: 6px; }

.user-chip { display: flex; align-items: center; gap: 9px; padding: 8px; border-radius: 8px; cursor: pointer; background: none; border: 0; width: 100%; text-align: start; }
.user-chip:hover { background: var(--secondary); }
.avatar { width: 28px; height: 28px; border-radius: 50%; background: var(--primary); color: var(--primary-fg); display: grid; place-items: center; font-size: 12px; font-weight: 700; flex: none; font-family: var(--font-num); }
.user-name { font-size: 12.5px; font-weight: 600; }
.user-mail { font-size: 10.5px; color: var(--muted-fg); }

.main { min-width: 0; display: flex; flex-direction: column; }

.topbar {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 22px; border-bottom: 1px solid var(--border);
  background: var(--card); position: sticky; top: 0; z-index: 30;
}
.topbar h1 { margin: 0; font-size: 15px; font-weight: 700; letter-spacing: -.01em; }
.topbar .crumb { font-size: 11.5px; color: var(--muted-fg); }
.topbar-spacer { flex: 1; }

.command {
  display: flex; align-items: center; gap: 8px; width: 210px;
  padding: 6px 10px; border-radius: 7px;
  border: 1px solid var(--border); background: var(--background);
  color: var(--muted-fg); font-size: 12.5px; cursor: pointer;
}
.command:hover { border-color: var(--muted-fg); }
.command kbd { margin-inline-start: auto; font-size: 10px; font-family: var(--font-num); border: 1px solid var(--border); border-radius: 4px; padding: 1px 5px; background: var(--muted); }

.content { padding: 22px; max-width: 1400px; width: 100%; }
.page[hidden] { display: none; }

/* --------------------------------------------------------------- pieces */

.card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-sm); }
.card-pad { padding: 18px; }
.card-head { display: flex; align-items: center; gap: 12px; padding: 16px 18px; border-bottom: 1px solid var(--border); }
.card-head h2, .card-head h3 { margin: 0; font-size: 14px; font-weight: 700; }
.card-head p { margin: 1px 0 0; font-size: 11.5px; color: var(--muted-fg); }
.card-head .spacer { flex: 1; }

.btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 13px; border-radius: 7px; cursor: pointer;
  border: 1px solid var(--border); background: var(--card); color: var(--foreground);
  font-size: 12.5px; font-weight: 600; white-space: nowrap;
  transition: background .13s, border-color .13s, transform .06s;
}
.btn:hover { background: var(--secondary); }
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--primary); border-color: var(--primary); color: var(--primary-fg); }
.btn-primary:hover { filter: brightness(1.07); background: var(--primary); }
.btn-ghost { border-color: transparent; background: none; }
.btn-ghost:hover { background: var(--secondary); }
.btn-good { background: var(--good-bg); border-color: transparent; color: var(--good); }
.btn-bad { background: var(--bad-bg); border-color: transparent; color: var(--bad); }
.btn-warn { background: var(--warn-bg); border-color: transparent; color: var(--warn); }
.btn-sm { padding: 5px 10px; font-size: 11.5px; }
.btn-icon { padding: 6px; }
/* WCAG 2.2 target size: an icon-only button still needs a 24×24 hit area,
   which padding alone will not give at the smaller icon sizes. */
.btn-icon, .btn-sm.btn-icon {
  min-inline-size: 28px; min-block-size: 28px;
  padding-inline: 0; padding-block: 0;
  justify-content: center; align-items: center;
}
/* The pager's page number is a bare glyph, so its box is far smaller than the
   label it holds. Same floor as the icon buttons. */
.pager .btn-sm { min-inline-size: 28px; min-block-size: 28px; justify-content: center; }
.btn:focus-visible, .nav-item:focus-visible, .seg button:focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible, .tab:focus-visible {
  outline: 2px solid var(--ring); outline-offset: 2px;
}
.btn:disabled { opacity: .5; cursor: not-allowed; }

.seg { display: inline-flex; background: var(--muted); border-radius: 7px; padding: 2px; gap: 2px; }
.seg button { border: 0; background: none; cursor: pointer; padding: 5px 11px; border-radius: 5px; font-size: 12px; font-weight: 600; color: var(--muted-fg); transition: background .13s, color .13s; }
.seg button:hover { color: var(--foreground); }
.seg button[aria-pressed="true"] { background: var(--card); color: var(--foreground); box-shadow: var(--shadow-sm); }

.chip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 9px; border-radius: 999px;
  background: var(--muted); color: var(--muted-fg);
  font-size: 11px; font-weight: 600; white-space: nowrap;
}
.chip.good { background: var(--good-bg); color: var(--good); }
.chip.warn { background: var(--warn-bg); color: var(--warn); }
.chip.bad { background: var(--bad-bg); color: var(--bad); }
.chip.info { background: var(--info-bg); color: var(--info); }
.chip.primary { background: var(--accent); color: var(--accent-fg); }
.chip i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

/* stat card — Artifact dashboard-3 */
.stat { padding: 15px 16px; display: grid; gap: 5px; align-content: start; }
.stat .s-label { font-size: 12px; color: var(--muted-fg); font-weight: 500; }
.stat .s-value { font-size: 25px; font-weight: 700; letter-spacing: -.025em; line-height: 1.15; }
.stat .s-foot { display: flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--muted-fg); flex-wrap: wrap; }
.trend { font-weight: 700; font-family: var(--font-num); }
.trend.up { color: var(--good); }
.trend.down { color: var(--bad); }

.grid { display: grid; gap: 16px; }
.g-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.g-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.g-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.g-2-1 { grid-template-columns: 2fr 1fr; }
.g-1-2 { grid-template-columns: 1fr 2fr; }
.g-3-2 { grid-template-columns: 3fr 2fr; }
@media (max-width: 1200px) { .g-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .g-2-1, .g-1-2, .g-3-2 { grid-template-columns: 1fr; } }
@media (max-width: 860px) { .g-2, .g-3, .g-4 { grid-template-columns: 1fr; } .shell { grid-template-columns: 1fr; } .sidebar { position: fixed; inset-block: 0; inset-inline-start: 0; width: var(--sidebar-w); z-index: 60; transform: translateX(var(--sb-x, 0)); } }

/* table */
/* In RTL a wide table's overflow still reaches the document, so the whole page
   scrolls sideways. `contain: paint` clips descendants to the scrollport; the
   wrap stays scrollable, the document does not. */
.table-wrap { overflow-x: auto; contain: paint; }
table { width: 100%; border-collapse: collapse; font-size: 13px; }
thead th { text-align: start; font-size: 11.5px; font-weight: 600; color: var(--muted-fg); padding: 10px 14px; border-bottom: 1px solid var(--border); white-space: nowrap; }
tbody td { padding: 11px 14px; border-bottom: 1px solid var(--border); vertical-align: middle; }
tbody tr:last-child td { border-bottom: 0; }
tbody tr.clickable { cursor: pointer; }
tbody tr.clickable:hover { background: var(--secondary); }
td.num-cell, th.num-cell { text-align: end; font-family: var(--font-num); font-variant-numeric: tabular-nums; white-space: nowrap; }
.c-title { font-weight: 600; }
.c-sub { font-size: 11.5px; color: var(--muted-fg); }
.thumb { width: 34px; height: 34px; border-radius: 7px; background: var(--muted); display: grid; place-items: center; color: var(--muted-fg); flex: none; }

.pager { display: flex; align-items: center; gap: 8px; padding: 12px 16px; border-top: 1px solid var(--border); font-size: 12px; color: var(--muted-fg); }
.pager .spacer { flex: 1; }

/* forms */
/* A checkbox row: the wrapping <label> is the real hit area, so it is the row
 * that has to clear the 24px target floor — the 15px box alone never does. */
.check {
  display: flex; align-items: center; gap: 9px;
  min-block-size: 28px; cursor: pointer;
  font-size: 12.5px; color: var(--foreground);
}
.check input[type="checkbox"] {
  inline-size: 17px; block-size: 17px; flex: none; margin: 0;
  accent-color: var(--primary); cursor: pointer;
}
.check:hover { color: var(--primary); }

.field { display: grid; gap: 5px; }
.field > label { font-size: 12.5px; font-weight: 600; }
.field .hint { font-size: 11.5px; color: var(--muted-fg); }
input[type="text"], input[type="number"], input[type="email"], input[type="search"], input[type="date"], select, textarea {
  width: 100%; padding: 7px 11px;
  background: var(--card); color: var(--foreground);
  border: 1px solid var(--input); border-radius: 7px;
  font-size: 13px; transition: border-color .13s, box-shadow .13s;
}
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--ring); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ring) 14%, transparent); }
input::placeholder, textarea::placeholder { color: var(--muted-fg); }
textarea { resize: vertical; min-height: 68px; }
select { appearance: none; background-image: none; cursor: pointer; }
.check { display: flex; align-items: center; gap: 8px; font-size: 13px; cursor: pointer; }
.check input { width: 15px; height: 15px; accent-color: var(--primary); }

.search { position: relative; }
.search input { padding-inline-start: 32px; }
.search .ico { position: absolute; inset-inline-start: 10px; top: 50%; transform: translateY(-50%); width: 15px; height: 15px; color: var(--muted-fg); pointer-events: none; }

.drop {
  display: grid; place-items: center; gap: 6px;
  padding: 22px; border: 1px dashed var(--border); border-radius: var(--radius);
  background: var(--background); color: var(--muted-fg); cursor: pointer; text-align: center;
  font-size: 12.5px;
}
.drop:hover { border-color: var(--primary); color: var(--primary); }
.drop .ico { width: 22px; height: 22px; }

.gallery { display: flex; gap: 9px; flex-wrap: wrap; }
.gallery .g-item { width: 74px; height: 74px; border-radius: 9px; background: var(--muted); display: grid; place-items: center; color: var(--muted-fg); position: relative; }
.gallery .g-item .x { position: absolute; top: -5px; inset-inline-end: -5px; width: 17px; height: 17px; border-radius: 50%; background: var(--card); border: 1px solid var(--border); display: grid; place-items: center; cursor: pointer; }
.gallery .g-item.add { border: 1px dashed var(--border); background: var(--background); cursor: pointer; }

/* tabs */
.tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--border); margin-bottom: 18px; overflow-x: auto; }
.tab { border: 0; background: none; cursor: pointer; padding: 9px 13px; font-size: 13px; font-weight: 500; color: var(--muted-fg); border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; }
.tab:hover { color: var(--foreground); }
.tab[aria-selected="true"] { color: var(--primary); border-bottom-color: var(--primary); font-weight: 600; }

/* stepper — add-order / add-product-2 */
.steps { display: flex; align-items: stretch; gap: 10px; margin-bottom: 20px; flex-wrap: wrap; }
.step-card { flex: 1; min-width: 190px; text-align: start; padding: 13px 14px; border-radius: var(--radius); border: 1px solid var(--border); background: var(--card); cursor: pointer; display: grid; gap: 3px; }
.step-card:hover { border-color: var(--muted-fg); }
.step-card[aria-current="step"] { border-color: var(--primary); box-shadow: 0 0 0 1px var(--primary); }
.step-card .s-num { font-size: 11px; font-weight: 700; color: var(--primary); }
.step-card .s-title { font-size: 13.5px; font-weight: 600; }
.step-card .s-sub { font-size: 11.5px; color: var(--muted-fg); }
.step-card.done .s-num { color: var(--good); }

/* row: label ......... value */
.row { display: flex; align-items: baseline; gap: 14px; padding: 9px 0; }
.row + .row { border-top: 1px solid var(--border); }
.row .r-label { font-size: 12.5px; color: var(--muted-fg); }
.row .r-value { margin-inline-start: auto; font-size: 13px; font-weight: 600; white-space: nowrap; }
/* Standalone links (an email, a phone) are not inline in a sentence, so they
   need the full hit area rather than just the text box. */
.row .r-value a { display: inline-block; min-block-size: 24px; padding-block: 4px; }
.note { font-size: 11.5px; color: var(--muted-fg); line-height: 1.75; }

.banner { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-radius: var(--radius); background: var(--accent); color: var(--accent-fg); margin-bottom: 18px; }
.banner .b-ico { width: 17px; height: 17px; flex: none; }
.banner .b-text { font-size: 12.5px; font-weight: 600; }
.banner .b-sub { font-size: 11.5px; opacity: .8; }
.banner .b-end { margin-inline-start: auto; }

/* charts */
.chart { width: 100%; }
.chart svg { display: block; width: 100%; overflow: visible; }
.chart .grid-line { stroke: var(--border); stroke-width: 1; }
.chart .axis-text { fill: var(--muted-fg); font-size: 10px; font-family: var(--font-num); }
.chart .bar { transition: opacity .13s; }
.chart .bar-hit:hover { opacity: .8; }

.donut-wrap { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.donut { width: 168px; height: 168px; flex: none; position: relative; }
.donut svg { transform: rotate(-90deg); }
.donut .d-center { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; }
.donut .d-total { font-size: 20px; font-weight: 700; letter-spacing: -.02em; }
.donut .d-caption { font-size: 11px; color: var(--muted-fg); }
.legend { display: grid; gap: 9px; min-width: 150px; flex: 1; }
.legend .l-row { display: flex; align-items: center; gap: 8px; font-size: 12.5px; }
.legend .l-row i { width: 9px; height: 9px; border-radius: 3px; flex: none; }
.legend .l-name { color: var(--foreground); }
.legend .l-pct { margin-inline-start: auto; color: var(--muted-fg); font-family: var(--font-num); font-size: 11.5px; }
.legend .l-amt { font-family: var(--font-num); font-weight: 600; }

.bar-list { display: grid; gap: 11px; }
.bar-list .bl-row { display: grid; gap: 5px; }
.bar-list .bl-top { display: flex; align-items: baseline; gap: 8px; font-size: 12.5px; }
.bar-list .bl-pct { margin-inline-start: auto; color: var(--muted-fg); font-family: var(--font-num); font-size: 11.5px; }
.bar-track { height: 7px; border-radius: 4px; background: var(--muted); overflow: hidden; }
.bar-track i { display: block; height: 100%; border-radius: 4px; }

/* activity feed */
.feed { display: grid; }
.feed .f-item { display: flex; gap: 12px; padding: 11px 0; }
.feed .f-item + .f-item { border-top: 1px solid var(--border); }
.feed .f-ico { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; flex: none; background: var(--accent); color: var(--accent-fg); }
.feed .f-ico .ico { width: 14px; height: 14px; }
.feed .f-title { font-size: 12.5px; font-weight: 600; }
.feed .f-meta { font-size: 11.5px; color: var(--muted-fg); }
.feed-scroll { max-height: 330px; overflow-y: auto; }

/* timeline */
.timeline { display: grid; }
.timeline .t-item { display: flex; gap: 12px; padding-bottom: 16px; position: relative; }
.timeline .t-item:not(:last-child)::before { content: ""; position: absolute; inset-inline-start: 9px; top: 20px; bottom: 0; width: 1px; background: var(--border); }
.timeline .t-dot { width: 19px; height: 19px; border-radius: 50%; border: 2px solid var(--card); background: var(--primary); flex: none; z-index: 1; box-shadow: 0 0 0 1px var(--border); }
.timeline .t-dot.muted { background: var(--muted-fg); }
.timeline .t-title { font-size: 12.5px; font-weight: 600; }
.timeline .t-meta { font-size: 11.5px; color: var(--muted-fg); }

/* empty */
.empty { padding: 34px 20px; text-align: center; color: var(--muted-fg); font-size: 13px; }

.toast { position: fixed; inset-block-end: 20px; inset-inline-start: 20px; background: var(--foreground); color: var(--background); padding: 11px 16px; border-radius: var(--radius); font-size: 12.5px; font-weight: 600; box-shadow: var(--shadow-lg); opacity: 0; pointer-events: none; transition: opacity .18s, transform .18s; transform: translateY(8px); z-index: 80; max-width: 380px; }
.toast.show { opacity: 1; transform: translateY(0); }

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* command palette */
.palette { position: fixed; inset: 0; background: rgba(20,24,34,.4); display: grid; place-items: start center; padding-top: 14vh; z-index: 90; }
.palette[hidden] { display: none; }
.palette-box { width: 100%; max-width: 480px; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-lg); overflow: hidden; }
.palette-box input { border: 0; border-bottom: 1px solid var(--border); border-radius: 0; padding: 13px 15px; font-size: 14px; }
.palette-box input:focus { box-shadow: none; }
.palette-list { max-height: 290px; overflow-y: auto; padding: 6px; }
.palette-item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; border: 0; background: none; border-radius: 6px; cursor: pointer; text-align: start; font-size: 13px; }
.palette-item:hover, .palette-item.hot { background: var(--secondary); }
.palette-item .ico { width: 15px; height: 15px; color: var(--muted-fg); }

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}
/* chart series aliases, so the older bar chart keeps the same ramp */
:root { --chart-1: var(--series-1); --chart-2: var(--series-2); --chart-3: var(--series-3); }

/* ---------------------------------------------------------------------
 * The Kwikz screens (بوصلة شغلك / إعداد النشاط / الإدارة) predate the
 * commerce screens and carry their own class names. Same tokens, same
 * purple — these rules exist so that code is styled by this file too,
 * rather than shipping a second stylesheet.
 * ------------------------------------------------------------------- */

.g-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.g-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
@media (max-width: 1200px) { .g-5, .g-6 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 860px) { .g-5, .g-6 { grid-template-columns: 1fr; } }

.section-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin: 24px 0 10px; }
.section-head h2 { margin: 0; font-size: 15px; font-weight: 700; letter-spacing: -.015em; }
.section-head p { margin: 0; font-size: 11.5px; color: var(--muted-fg); }

/* metric card — same anatomy as .stat, with an optional filled variant */
.metric { padding: 15px 16px; display: grid; gap: 5px; align-content: start; }
.m-top { display: flex; align-items: center; gap: 7px; }
.m-ico { width: 15px; height: 15px; flex: none; color: var(--muted-fg); }
.m-label { font-size: 12px; color: var(--muted-fg); font-weight: 500; }
.m-value { font-size: 24px; font-weight: 700; letter-spacing: -.025em; line-height: 1.2; }
.m-foot { font-size: 11.5px; color: var(--muted-fg); }
.metric.dark { background: var(--primary); border-color: var(--primary); color: var(--primary-fg); }
/* 76% of the on-primary ink over the purple fill lands at 4.17:1, just under AA.
   94% holds the same hue and reads as softened rather than dimmed. */
.metric.dark .m-label, .metric.dark .m-foot { color: color-mix(in srgb, var(--primary-fg) 94%, transparent); }
.metric.dark .m-ico { color: color-mix(in srgb, var(--primary-fg) 82%, transparent); }
.metric.dark .chip { background: color-mix(in srgb, var(--primary-fg) 18%, transparent); color: var(--primary-fg); }

.chart-wrap { padding: 16px 18px 12px; }
.chart-head { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.chart-head .c-title { font-size: 13.5px; font-weight: 600; }
.chart-legend { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 10px; font-size: 11.5px; color: var(--muted-fg); }
.chart-legend span { display: inline-flex; align-items: center; gap: 6px; }
.chart-legend i { width: 9px; height: 9px; border-radius: 3px; display: inline-block; }
.chart .bar.hot { stroke: var(--card); stroke-width: 1.5; }

.bar-mini { display: block; height: 6px; border-radius: 3px; background: var(--muted); overflow: hidden; }
.bar-mini i { display: block; height: 100%; border-radius: 3px; background: var(--series-1); }
td .down, .num-cell .down { color: var(--bad); }

.rank {
  display: grid; place-items: center; width: 21px; height: 21px; border-radius: 6px;
  background: var(--muted); color: var(--muted-fg);
  font-family: var(--font-num); font-size: 11px; font-weight: 700;
}
.rank.top { background: var(--primary); color: var(--primary-fg); }
.cell-title { font-weight: 600; }
.cell-sub { font-size: 11.5px; color: var(--muted-fg); }

.progress { height: 8px; border-radius: 4px; background: var(--muted); overflow: hidden; }
.progress i { display: block; height: 100%; border-radius: 4px; background: var(--series-1); }

/* onboarding: kind picker + category chips */
.picker-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
@media (max-width: 860px) { .picker-grid { grid-template-columns: 1fr; } }
.pick {
  text-align: start; padding: 12px 13px; border-radius: var(--radius); cursor: pointer;
  border: 1px solid var(--border); background: var(--card); display: grid; gap: 3px;
  transition: border-color .13s, background .13s;
}
.pick:hover { border-color: var(--muted-fg); }
.pick[aria-pressed="true"] { border-color: var(--primary); background: var(--accent); box-shadow: 0 0 0 1px var(--primary); }
.p-title { font-size: 13.5px; font-weight: 600; }
.p-sub { font-size: 11.5px; color: var(--muted-fg); line-height: 1.65; }

.chips { display: flex; gap: 7px; flex-wrap: wrap; }
.chips button {
  padding: 5px 12px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--border); background: var(--card); color: var(--foreground);
  font-size: 12.5px; font-weight: 500;
}
.chips button:hover:not([disabled]) { border-color: var(--primary); color: var(--primary); }
.chips button[aria-pressed="true"] { background: var(--primary); border-color: var(--primary); color: var(--primary-fg); font-weight: 600; }

/* the trial chip keeps Kwikz's own green identity, tinted for contrast */
.chip.lime { background: var(--accent); color: var(--accent-fg); }

/* onboarding: numbered stepper */
.step { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--muted-fg); white-space: nowrap; }
.step i {
  display: grid; place-items: center; width: 21px; height: 21px; border-radius: 50%;
  background: var(--muted); color: var(--muted-fg);
  font-family: var(--font-num); font-size: 11px; font-weight: 700; font-style: normal;
}
.step.on { color: var(--foreground); font-weight: 600; }
.step.on i { background: var(--primary); color: var(--primary-fg); }
.step.done i { background: var(--good-bg); color: var(--good); }
.step-line { flex: 1; min-width: 18px; height: 1px; background: var(--border); }

/* live margin preview beside the product form */
.margin-box {
  display: grid; gap: 7px; padding: 13px 14px; border-radius: var(--radius);
  background: var(--accent); color: var(--accent-fg);
}
.margin-box.bad { background: var(--bad-bg); color: var(--bad); }
.mb-top { display: flex; align-items: baseline; gap: 8px; }
.mb-value { font-size: 19px; font-weight: 700; letter-spacing: -.02em; }
.mb-label { font-size: 11.5px; opacity: .82; }
.margin-box .r-label { color: inherit; opacity: .82; }
.margin-box .r-value, .margin-box .note { color: inherit; }

.chart .bars { display: block; }
.topbar-inline { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }

/* ------------------------------------------------------- the platform page */

/* A read-only step list wears the stepper's cards but must not read as
   clickable, so the pointer and the hover border are both withdrawn. */
.step-card.static { cursor: default; }
.step-card.static:hover { border-color: var(--border); }

.plat-hero { text-align: start; }
.plat-h1 {
  margin: 0 0 10px; font-size: 24px; font-weight: 800;
  letter-spacing: -.03em; line-height: 1.35;
}
.plat-lead { margin: 0 0 16px; font-size: 14px; line-height: 1.85; color: var(--muted-fg); max-inline-size: 68ch; }
.plat-chips { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 14px; }
.plat-hero .note { margin: 0; max-inline-size: 68ch; }

.tool-card { display: grid; align-content: start; gap: 8px; }
.tool-ico {
  inline-size: 34px; block-size: 34px; border-radius: 9px;
  display: grid; place-items: center;
  background: var(--accent); color: var(--accent-fg);
}
.tool-title { margin: 0; font-size: 14.5px; font-weight: 700; }
.tool-text { margin: 0; font-size: 12.5px; line-height: 1.8; color: var(--muted-fg); }

/* The twelve tools read as a definition list, so the name keeps a fixed
   column on wide screens and wraps under it on narrow ones. A grid, not the
   flex row it inherits: `.row .r-value` carries `margin-inline-start: auto`,
   and an auto margin absorbs the free space before `flex-grow` can distribute
   it, which left the name column swallowing the row. `.r-value` is also
   nowrap by default because it usually holds a figure; these hold sentences,
   so both are overridden here at (0,3,0) against (0,2,0). */
.tool-list .tool-row {
  display: grid; grid-template-columns: minmax(0, 42%) minmax(0, 1fr);
  align-items: start; gap: 16px;
}
.tool-list .r-label { display: flex; align-items: center; gap: 9px; font-weight: 600; }
.tool-list .r-value { margin-inline-start: 0; white-space: normal; min-inline-size: 0; }
.tool-n {
  flex: none; inline-size: 21px; block-size: 21px; border-radius: 50%;
  display: grid; place-items: center; font-size: 10.5px; font-weight: 700;
  background: var(--accent); color: var(--accent-fg);
}
.tool-body { font-size: 12.5px; line-height: 1.8; color: var(--muted-fg); }

.plat-hero .r-label.check { display: flex; align-items: center; gap: 8px; font-weight: 500; }
.plat-hero .r-label.check .ico { inline-size: 15px; block-size: 15px; color: var(--good); flex: none; }

@media (max-width: 900px) {
  .tool-list .tool-row { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .tool-list .r-value { padding-inline: 30px; }
}