/* ============================================================================
   ms-kit — minimal step internal tool kit
   ----------------------------------------------------------------------------
   Direction B (cool neutral + blue), 6px radius. Internal tools ONLY.
   The storefront (minimalstep.pl) has its own theme and does NOT consume this
   — decided 2026-08-06, Mariusz. Do not "converge" them later without asking.

   Everything is prefixed --ms- / .ms- because this file gets dropped into
   hostile CSS environments (WP admin, Apps Script dialogs) where unprefixed
   .btn or .table WILL collide.

   Consume: see README.md. Reference render: kit.html.
   ========================================================================== */

/* ── TOKENS ───────────────────────────────────────────────────────────────
   The only layer a tool is allowed to depend on. Change a value here and
   every tool moves together; hardcode a hex in a tool and it drifts forever.
   ------------------------------------------------------------------------ */
:root {
  /* Surfaces */
  --ms-bg:          #f7f8fa;   /* page */
  --ms-panel:       #ffffff;   /* card, table, dialog */
  --ms-panel-2:     #f1f3f6;   /* subtle fill: secondary btn, zebra, selected */
  --ms-field:       #ffffff;   /* input interior */
  --ms-line:        #e5e7eb;   /* borders */
  --ms-line-soft:   #f1f3f5;   /* dividers inside a panel */

  /* Text */
  --ms-ink:         #1a1d21;   /* primary */
  --ms-ink-2:       #4b5563;   /* secondary */
  --ms-muted:       #6b7280;   /* meta, placeholders, column heads */

  /* Brand / primary action */
  --ms-brand:       #2563eb;
  --ms-brand-hover: #1d4ed8;
  --ms-brand-soft:  #eaf0fe;   /* tinted background */
  --ms-on-brand:    #ffffff;

  /* Semantics — text / fill / border, in that order */
  --ms-ok:    #166534;  --ms-ok-bg:   #dcfce7;  --ms-ok-line:   #bbf7d0;
  --ms-warn:  #92400e;  --ms-warn-bg: #fef3c7;  --ms-warn-line: #fde68a;
  --ms-bad:   #991b1b;  --ms-bad-bg:  #fee2e2;  --ms-bad-line:  #fecaca;
  --ms-info:  #0f766e;  --ms-info-bg: #ccfbf1;  --ms-info-line: #99f6e4;

  /* Type — two families, both already on every device. No webfonts:
     the dashboard contract bans them and Apps Script dialogs can't load them. */
  --ms-font-ui:   ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI",
                  Roboto, "Helvetica Neue", Arial, sans-serif;
  --ms-font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
                  "Liberation Mono", monospace;

  --ms-fs-micro: 10.5px;  /* column heads, all-caps labels */
  --ms-fs-meta:  12px;    /* timestamps, hints, counts */
  --ms-fs-body:  13px;    /* table body — the workhorse */
  --ms-fs-panel: 14px;    /* panel titles */
  --ms-fs-lg:    16px;    /* section heads */
  --ms-fs-title: 20px;    /* page title */

  --ms-fw-normal: 400;
  --ms-fw-med:    560;
  --ms-fw-semi:   600;
  --ms-fw-bold:   650;

  --ms-lh-tight: 1.25;
  --ms-lh-body:  1.45;
  --ms-lh-prose: 1.55;

  /* Space — 4px base. Only these six. */
  --ms-sp-1: 4px;  --ms-sp-2: 8px;   --ms-sp-3: 12px;
  --ms-sp-4: 16px; --ms-sp-5: 24px;  --ms-sp-6: 32px;

  /* Radius — 6px everywhere, pill on chips only (Mariusz, 2026-08-06) */
  --ms-r:      6px;
  --ms-r-pill: 999px;

  /* Control heights — dense by default; these are tools, not landing pages */
  --ms-h-sm: 26px;
  --ms-h:    32px;
  --ms-h-lg: 38px;

  /* Elevation + focus */
  --ms-shadow-1: 0 1px 2px rgba(16,24,40,.06);
  --ms-shadow-2: 0 8px 24px rgba(16,24,40,.12);
  --ms-focus:    0 0 0 3px rgba(37,99,235,.30);
}

/* LIGHT ONLY — deliberate, not an omission (Mariusz, 2026-08-06).
   Every internal tool renders exactly one way, on every device, for every
   person. The reason is support, not taste: when Olha sends a screenshot
   saying a status looks wrong, there is one rendering to reason about, not
   two. It matters most on colour-coded tools (size-curve's red/amber/green
   gate) — and staff don't *choose* dark anyway, iOS flips it after sunset.
   So there is no dark block here and no theme switch to maintain.
   If this is ever revisited: git show a01cbf7 has the dark token set. */

/* ── BASE ────────────────────────────────────────────────────────────────
   Scoped to .ms-app so the kit can be dropped inside WP admin or an Apps
   Script dialog without restyling the host page. Wrap your tool in
   <body class="ms-app"> (or any container).
   ------------------------------------------------------------------------ */
.ms-app {
  background: var(--ms-bg);
  color: var(--ms-ink);
  font-family: var(--ms-font-ui);
  font-size: var(--ms-fs-body);
  line-height: var(--ms-lh-body);
  -webkit-font-smoothing: antialiased;
}
.ms-app *, .ms-app *::before, .ms-app *::after { box-sizing: border-box; }
.ms-app :focus-visible { outline: none; box-shadow: var(--ms-focus); border-radius: var(--ms-r); }

.ms-page  { max-width: 1280px; margin: 0 auto; padding: var(--ms-sp-4); }
.ms-h1    { font-size: var(--ms-fs-title); font-weight: var(--ms-fw-semi); letter-spacing: -.02em;
            line-height: var(--ms-lh-tight); margin: 0 0 var(--ms-sp-1); }
.ms-h2    { font-size: var(--ms-fs-lg); font-weight: var(--ms-fw-semi); letter-spacing: -.01em;
            margin: var(--ms-sp-5) 0 var(--ms-sp-3); }
.ms-eyebrow { font-size: var(--ms-fs-micro); text-transform: uppercase; letter-spacing: .08em;
            font-weight: var(--ms-fw-semi); color: var(--ms-muted); margin: 0 0 var(--ms-sp-2); }

/* Layout helpers — deliberately only three. Reach for CSS grid directly
   for anything else rather than growing a utility framework in here. */
.ms-row   { display: flex; align-items: center; gap: var(--ms-sp-2); flex-wrap: wrap; }
.ms-stack { display: flex; flex-direction: column; gap: var(--ms-sp-3); }
.ms-spacer{ margin-left: auto; }

/* Text utilities */
.ms-muted    { color: var(--ms-muted); }
.ms-meta     { color: var(--ms-muted); font-size: var(--ms-fs-meta); }
.ms-mono     { font-family: var(--ms-font-mono); font-size: .96em; }
.ms-num      { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; text-align: right; }
.ms-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ── PANEL ─────────────────────────────────────────────────────────────── */
.ms-panel {
  background: var(--ms-panel);
  border: 1px solid var(--ms-line);
  border-radius: var(--ms-r);
  box-shadow: var(--ms-shadow-1);
  overflow: hidden;
}
.ms-panel-head, .ms-panel-foot {
  display: flex; align-items: center; gap: var(--ms-sp-2); flex-wrap: wrap;
  padding: var(--ms-sp-3);
}
.ms-panel-head { border-bottom: 1px solid var(--ms-line); }
.ms-panel-foot { border-top: 1px solid var(--ms-line); }
.ms-panel-title { font-size: var(--ms-fs-panel); font-weight: var(--ms-fw-bold);
                  letter-spacing: -.01em; margin: 0; }
.ms-panel-body { padding: var(--ms-sp-3); }

/* ── BUTTONS ──────────────────────────────────────────────────────────────
   Five variants, and that is the whole vocabulary. The rule that keeps a
   toolbar calm: ONE solid primary per screen region, everything else
   secondary or ghost. Destructive is outlined, never solid — solid red
   draws the eye straight to the thing you least want clicked.
   ------------------------------------------------------------------------ */
.ms-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--ms-sp-1);
  height: var(--ms-h); padding: 0 var(--ms-sp-3);
  font-family: inherit; font-size: var(--ms-fs-body); font-weight: var(--ms-fw-med);
  line-height: 1; white-space: nowrap; text-decoration: none;
  border: 1px solid transparent; border-radius: var(--ms-r);
  cursor: pointer; user-select: none;
  transition: background-color .12s ease, border-color .12s ease, color .12s ease;
}
.ms-btn:disabled, .ms-btn[aria-disabled="true"] {
  cursor: not-allowed; opacity: .55;
}
.ms-btn--sm { height: var(--ms-h-sm); padding: 0 var(--ms-sp-2); font-size: var(--ms-fs-meta); }
.ms-btn--lg { height: var(--ms-h-lg); padding: 0 var(--ms-sp-4); }
.ms-btn--block { width: 100%; }

.ms-btn--primary   { background: var(--ms-brand); color: var(--ms-on-brand); font-weight: var(--ms-fw-semi); }
.ms-btn--primary:hover:not(:disabled)   { background: var(--ms-brand-hover); }

.ms-btn--secondary { background: var(--ms-panel-2); color: var(--ms-ink); border-color: var(--ms-line); }
.ms-btn--secondary:hover:not(:disabled) { border-color: var(--ms-muted); }

.ms-btn--ghost     { background: transparent; color: var(--ms-ink-2); }
.ms-btn--ghost:hover:not(:disabled)     { background: var(--ms-panel-2); color: var(--ms-ink); }

.ms-btn--danger    { background: transparent; color: var(--ms-bad); border-color: var(--ms-bad-line); }
.ms-btn--danger:hover:not(:disabled)    { background: var(--ms-bad-bg); }

.ms-btn--link      { background: transparent; color: var(--ms-brand); height: auto; padding: 0;
                     border: 0; text-decoration: underline; text-underline-offset: 2px; }

/* Joined group — for mutually-exclusive actions on one object */
.ms-btn-group { display: inline-flex; }
.ms-btn-group .ms-btn { border-radius: 0; margin-left: -1px; }
.ms-btn-group .ms-btn:first-child { border-radius: var(--ms-r) 0 0 var(--ms-r); margin-left: 0; }
.ms-btn-group .ms-btn:last-child  { border-radius: 0 var(--ms-r) var(--ms-r) 0; }

/* ── FIELDS ───────────────────────────────────────────────────────────── */
.ms-field { display: flex; flex-direction: column; gap: var(--ms-sp-1); }
.ms-label { font-size: var(--ms-fs-meta); font-weight: var(--ms-fw-semi); color: var(--ms-ink-2); }
.ms-hint  { font-size: var(--ms-fs-meta); color: var(--ms-muted); }
.ms-error { font-size: var(--ms-fs-meta); color: var(--ms-bad); }

.ms-input, .ms-select, .ms-textarea {
  height: var(--ms-h); padding: 0 var(--ms-sp-2);
  background: var(--ms-field); color: var(--ms-ink);
  border: 1px solid var(--ms-line); border-radius: var(--ms-r);
  font-family: inherit; font-size: var(--ms-fs-body); line-height: var(--ms-lh-body);
  width: 100%;
}
.ms-textarea { height: auto; min-height: 72px; padding: var(--ms-sp-2); resize: vertical; }
.ms-select   { padding-right: var(--ms-sp-4); cursor: pointer; }
.ms-input::placeholder, .ms-textarea::placeholder { color: var(--ms-muted); }
.ms-input:hover, .ms-select:hover, .ms-textarea:hover { border-color: var(--ms-muted); }
.ms-input:disabled, .ms-select:disabled, .ms-textarea:disabled {
  background: var(--ms-panel-2); color: var(--ms-muted); cursor: not-allowed;
}
.ms-input[aria-invalid="true"], .ms-textarea[aria-invalid="true"] { border-color: var(--ms-bad); }
.ms-input--mono { font-family: var(--ms-font-mono); }
.ms-input--num  { text-align: right; font-variant-numeric: tabular-nums; }

/* Checkbox / radio — 16px, accent-color does the theming in one line */
.ms-check { display: inline-flex; align-items: center; gap: var(--ms-sp-2); cursor: pointer; }
.ms-check input { width: 16px; height: 16px; margin: 0; accent-color: var(--ms-brand); cursor: pointer; }

/* Segmented control — for 2–4 mutually exclusive views. More than 4 → tabs. */
.ms-seg { display: inline-flex; border: 1px solid var(--ms-line); border-radius: var(--ms-r);
          overflow: hidden; background: var(--ms-panel); }
.ms-seg button {
  height: calc(var(--ms-h) - 2px); padding: 0 var(--ms-sp-3);
  background: transparent; border: 0; border-right: 1px solid var(--ms-line);
  font: inherit; font-size: var(--ms-fs-meta); color: var(--ms-muted);
  cursor: pointer; white-space: nowrap;
}
.ms-seg button:last-child { border-right: 0; }
.ms-seg button:hover { background: var(--ms-panel-2); color: var(--ms-ink); }
.ms-seg button[aria-pressed="true"], .ms-seg button.is-on {
  background: var(--ms-panel-2); color: var(--ms-ink); font-weight: var(--ms-fw-semi);
}

/* Tabs — for switching the whole body of a panel */
.ms-tabs { display: flex; gap: var(--ms-sp-4); border-bottom: 1px solid var(--ms-line); }
.ms-tabs button {
  background: none; border: 0; border-bottom: 2px solid transparent;
  padding: var(--ms-sp-2) 0; margin-bottom: -1px;
  font: inherit; font-size: var(--ms-fs-body); color: var(--ms-muted); cursor: pointer;
}
.ms-tabs button:hover { color: var(--ms-ink); }
.ms-tabs button[aria-selected="true"] {
  color: var(--ms-ink); font-weight: var(--ms-fw-semi); border-bottom-color: var(--ms-brand);
}

/* ── TOOLBAR ─────────────────────────────────────────────────────────────
   The row above a table. Title left, controls right, primary action last —
   consistently, so staff stop hunting for it between tools.
   ------------------------------------------------------------------------ */
.ms-bar { display: flex; align-items: center; gap: var(--ms-sp-2); flex-wrap: wrap;
          padding: var(--ms-sp-3); border-bottom: 1px solid var(--ms-line); }
.ms-bar .ms-panel-title { margin-right: auto; }
.ms-bar .ms-input { width: auto; min-width: 180px; }

/* ── TABLE ────────────────────────────────────────────────────────────────
   Numbers right + tabular, IDs mono, header sticky. That trio is most of
   what makes a table feel like a tool rather than a web page.
   ------------------------------------------------------------------------ */
.ms-table { width: 100%; border-collapse: collapse; font-size: var(--ms-fs-body); }
.ms-table th {
  position: sticky; top: 0; z-index: 1;
  background: var(--ms-panel); text-align: left;
  font-size: var(--ms-fs-micro); text-transform: uppercase; letter-spacing: .07em;
  font-weight: var(--ms-fw-semi); color: var(--ms-muted);
  padding: var(--ms-sp-2) var(--ms-sp-3);
  border-bottom: 1px solid var(--ms-line); white-space: nowrap;
}
.ms-table th.ms-num, .ms-table td.ms-num { text-align: right; }
.ms-table td { padding: var(--ms-sp-2) var(--ms-sp-3); border-bottom: 1px solid var(--ms-line-soft); }
.ms-table tbody tr:last-child td { border-bottom: 0; }
.ms-table tbody tr:hover td { background: var(--ms-panel-2); }
.ms-table--zebra tbody tr:nth-child(even) td { background: var(--ms-panel-2); }
.ms-table--zebra tbody tr:hover td { background: var(--ms-brand-soft); }
.ms-table td.ms-mono { color: var(--ms-muted); }
/* Wrap any table in this so it scrolls itself instead of the page */
.ms-table-scroll { overflow: auto; max-height: 70vh; }

/* ── CHIPS ────────────────────────────────────────────────────────────────
   Pill — the one radius exception. The shape is what tells the eye
   "status", not "button", at a glance.
   ------------------------------------------------------------------------ */
.ms-chip {
  display: inline-block; padding: 2px var(--ms-sp-2);
  font-size: 11px; font-weight: var(--ms-fw-semi); line-height: 1.5;
  border-radius: var(--ms-r-pill); white-space: nowrap;
  background: var(--ms-panel-2); color: var(--ms-muted);
}
.ms-chip--ok   { background: var(--ms-ok-bg);   color: var(--ms-ok); }
.ms-chip--warn { background: var(--ms-warn-bg); color: var(--ms-warn); }
.ms-chip--bad  { background: var(--ms-bad-bg);  color: var(--ms-bad); }
.ms-chip--info { background: var(--ms-info-bg); color: var(--ms-info); }

/* Count badge — square-ish, sits next to a tab or filter label */
.ms-count {
  display: inline-block; min-width: 18px; padding: 0 5px;
  font-size: 11px; font-weight: var(--ms-fw-semi); text-align: center;
  font-variant-numeric: tabular-nums;
  background: var(--ms-panel-2); color: var(--ms-muted); border-radius: var(--ms-r);
}

/* ── ALERT ────────────────────────────────────────────────────────────────
   A banner is for state that persists. For "your click worked", use a toast.
   ------------------------------------------------------------------------ */
.ms-alert {
  display: flex; gap: var(--ms-sp-2); align-items: flex-start;
  padding: var(--ms-sp-3); border-radius: var(--ms-r);
  border: 1px solid var(--ms-line); background: var(--ms-panel-2); color: var(--ms-ink);
  font-size: var(--ms-fs-body);
}
.ms-alert strong { font-weight: var(--ms-fw-semi); }
.ms-alert--ok   { background: var(--ms-ok-bg);   border-color: var(--ms-ok-line);   color: var(--ms-ok); }
.ms-alert--warn { background: var(--ms-warn-bg); border-color: var(--ms-warn-line); color: var(--ms-warn); }
.ms-alert--bad  { background: var(--ms-bad-bg);  border-color: var(--ms-bad-line);  color: var(--ms-bad); }
.ms-alert--info { background: var(--ms-info-bg); border-color: var(--ms-info-line); color: var(--ms-info); }

/* ── EMPTY STATE ──────────────────────────────────────────────────────────
   Never ship a blank rectangle. Say what would be here and how to make it
   appear — an empty table is the single most common "is it broken?" ping.
   ------------------------------------------------------------------------ */
.ms-empty { padding: var(--ms-sp-6) var(--ms-sp-4); text-align: center; color: var(--ms-muted); }
.ms-empty-title { font-size: var(--ms-fs-panel); font-weight: var(--ms-fw-semi);
                  color: var(--ms-ink); margin: 0 0 var(--ms-sp-1); }
.ms-empty p { margin: 0 auto var(--ms-sp-3); max-width: 44ch; font-size: var(--ms-fs-meta); }

/* ── TOAST ────────────────────────────────────────────────────────────── */
.ms-toast {
  display: inline-flex; align-items: center; gap: var(--ms-sp-2);
  padding: var(--ms-sp-2) var(--ms-sp-3);
  background: var(--ms-ink); color: var(--ms-bg);
  border-radius: var(--ms-r); box-shadow: var(--ms-shadow-2);
  font-size: var(--ms-fs-body);
}
.ms-toast-host { position: fixed; bottom: var(--ms-sp-4); left: 50%; transform: translateX(-50%);
                 display: flex; flex-direction: column; gap: var(--ms-sp-2); z-index: 60; }

/* ── MODAL ────────────────────────────────────────────────────────────────
   Native <dialog>. No JS library, no focus-trap of our own to maintain.
   ------------------------------------------------------------------------ */
.ms-modal {
  padding: 0; border: 1px solid var(--ms-line); border-radius: var(--ms-r);
  background: var(--ms-panel); color: var(--ms-ink);
  box-shadow: var(--ms-shadow-2); max-width: 480px; width: calc(100% - var(--ms-sp-5));
}
.ms-modal::backdrop { background: rgba(15,17,21,.45); }

/* ── SPINNER ──────────────────────────────────────────────────────────── */
.ms-spin {
  width: 14px; height: 14px; display: inline-block; vertical-align: -2px;
  border: 2px solid var(--ms-line); border-top-color: var(--ms-brand);
  border-radius: 50%; animation: ms-spin .7s linear infinite;
}
@keyframes ms-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .ms-spin { animation-duration: 2.5s; }
  .ms-btn { transition: none; }
}

/* ── TOUCH ────────────────────────────────────────────────────────────────
   iOS Safari zooms the whole page whenever a focused form control renders text
   below 16px. The kit's body size is 13px, so EVERY tool opened on a phone gets
   yanked around on the first tap into a field — reported on the margin
   calculator 2026-08-06, but it was never specific to that tool.

   So: 16px controls on coarse pointers, with the boxes grown to match so rows
   stay aligned. **Do not set a control's font-size below 16px in a tool** — that
   is exactly what re-introduces the zoom, and it will look like a tool bug.
   Segmented controls move too because they sit beside inputs in the same row.
   ------------------------------------------------------------------------ */
@media (pointer: coarse) {
  .ms-input, .ms-select, .ms-textarea { font-size: 16px; }
  .ms-input, .ms-select               { height: var(--ms-h-lg); }
  .ms-seg button { font-size: var(--ms-fs-body); height: calc(var(--ms-h-lg) - 2px); }
}

/* ── PRINT ────────────────────────────────────────────────────────────────
   Staff print pick lists. Force light, drop the chrome, keep the data. */
@media print {
  .ms-app { background: #fff; color: #000; }
  .ms-panel { border-color: #999; box-shadow: none; }
  .ms-bar, .ms-panel-foot, .ms-btn { display: none !important; }
  .ms-table th { position: static; }
}