@charset "UTF-8";
/* ==========================================================================
   Skiwo UI — Design Tokens (base / default skin)
   The reusable token CONTRACT. Components reference var(--token) only — never a
   hard-coded value. Per-product themes override these var VALUES (one file, no
   forked stylesheet); dark theme overrides under [data-theme="dark"] at bottom.

   Structure + values lifted from the bemywords design handoff
   (the source handoff files have since been removed from docs/). The
   violet --brand is the catalog's PLACEHOLDER default skin; a dedicated neutral
   Skiwo palette swaps in here later without touching any component.
   ========================================================================== */
:root {
  /* ---- Brand (violet — placeholder default skin) ---- */
  --brand: #5B5BD6; /* primary actions, active nav, focus ring, links */
  --brand-hover: #4B4BC4; /* hover/pressed on primary */
  --brand-ink: #4B4BC4; /* brand-colored text on light bg */
  --brand-tint: #EEEDFB; /* active nav bg, icon chips */
  --brand-tint-2: #F4F4FD; /* selected sub-item bg, subtle brand fill */
  --brand-tint-3: #F3EEFC; /* zone bg accents */
  --brand-avatar-bg: #E7E7FA; /* avatar circle bg */
  --brand-border: #D7D6F6; /* brand-tinted hairline (ghost-button outline) */
  --brand-ring: rgba(91,91,214,.12); /* focus ring around active input */
  /* ---- Neutrals / surfaces ---- */
  --bg-app: #F7F8FA; /* app canvas behind cards */
  --surface: #FFFFFF; /* cards, bars, inputs */
  --surface-2: #FAFBFC; /* subtle raised/inset (filter bars, source cells) */
  --surface-3: #FBFBFC; /* read-only cell bg */
  --surface-light-violet: #FAFAFE; /* active editor-row wash (KeyRow) */
  /* ---- Borders / dividers (light -> strong) ---- */
  --hairline: #F1F2F4; /* in-grid row dividers */
  --border-1: #F0F1F4; /* faint section dividers */
  --border-2: #EAECF0; /* default card/bar border */
  --border-3: #E8EAEF; /* card border (slightly stronger) */
  --border-4: #E4E6EB; /* control/input border */
  /* ---- Text ---- */
  --text: #1B1D27; /* headings, primary values */
  --text-2: #2A2D38; /* strong body */
  --text-3: #3A3D49; /* read-only/source text */
  --text-mid: #4A4E5A; /* secondary labels, ghost-button text */
  --text-muted: #5A5E6B; /* muted body */
  --text-faint: #8A8F9C; /* meta, placeholders */
  --text-faint2: #9499A6; /* keys, captions, disabled */
  --on-brand: #FFFFFF; /* fg on a solid brand/coloured fill (primary btn, done marker) — stays white in dark too */
  --icon-faint: #A9AEBA; /* default stroke-icon color in lists */
  /* ---- Semantic (status) — each has ink + bar + tint(bg) ---- */
  --ok: #1F8A5B;
  --ok-bar: #27a36b;
  --ok-tint: #E6F4EC; /* Approved / live / 100% */
  --info: #3A6EA5;
  --info-bar: #4581c2;
  --info-tint: #E8F0F8; /* AI draft / in-progress / mid */
  --warn: #9a6a17;
  --warn-bar: #cf982f;
  --warn-tint: #FBF1DF; /* Needs review / low coverage */
  --warn-strong:#c79a3a; /* amber editor border for review state */
  --danger: #C2410C;
  --danger-ink:#C06868;
  --danger-tint: #FBE9E2; /* Empty / Untranslated */
  --danger-cell:#FDF6F6; /* untranslated grid-cell bg */
  --destruct: #D14343; /* destructive actions (delete, remove) */
  /* ---- Mode badges ---- */
  --mode-script-ink: #5B5BD6;
  --mode-script-bg: #EEEDFB;
  --mode-standard-ink:#5A5E6B;
  --mode-standard-bg:#EEF0F3;
  /* ---- Typography (per-product token, not a fork) ---- */
  --font-ui: "Schibsted Grotesk", system-ui, -apple-system, sans-serif;
  --font-prose: "Hanken Grotesk", system-ui, sans-serif; /* auth rail, marketing prose */
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, monospace; /* keys, IDs, code, numeric */
  --fs-display:36px;
  --fw-display:700; /* hero numbers — pricing amount, big stat */
  --fs-page: 22px;
  --fw-page: 700; /* page H1 */
  --fs-h2: 18px;
  --fw-h2: 700; /* card/section headings */
  --fs-title: 15px;
  --fw-title:600; /* card titles, nav items */
  --fs-read: 15.5px; /* text being JUDGED, not skimmed — a
   social post in the deck/composer/
   preview reads at the size it will be
   read at on the platform */
  --fs-body: 13.5px; /* default body / inputs */
  --fs-body-sm:13px;
  --fs-sm: 12.5px; /* secondary controls */
  --fs-meta: 12px; /* meta text */
  --fs-cap: 11px; /* captions, key mono */
  --fs-tiny: 10.5px;
  --fw-tiny: 600; /* status pills, tiny caps labels */
  --lh-tight: 1.4;
  --lh-body: 1.5;
  /* ---- Spacing scale (4px base) ---- */
  --s-1: 4px;
  --s-2: 6px;
  --s-3: 8px;
  --s-4: 10px;
  --s-5: 12px;
  --s-6: 14px;
  --s-7: 16px;
  --s-8: 18px;
  --s-9: 20px;
  --s-10: 24px;
  --s-11: 32px;
  --s-12: 36px; /* card-scale padding: the top of the scale */
  /* ---- Radii ---- */
  --r-mark: 4px; /* data marks & inline runs: bar caps, diff spans, inline focus rings */
  --r-chip: 6px; /* below control size: legend swatches, keycaps, small menu rows */
  --r-control: 8px; /* buttons, inputs, chips */
  --r-control-sm: 7px; /* small inline buttons */
  --r-card: 13px; /* cards */
  --r-card-lg: 16px; /* large panels */
  --r-pill: 999px;
  /* ---- Shadows ---- */
  --sh-card: 0 1px 2px rgba(16,18,30,.04); /* resting card */
  --sh-raise: 0 6px 20px rgba(16,18,30,.09); /* hover card */
  --sh-float: 0 14px 44px rgba(20,22,40,.12); /* modals, menus, popovers */
  --sh-btn: 0 1px 2px rgba(91,91,214,.40); /* primary button */
  --sh-focus: 0 0 0 3px var(--brand-ring); /* focused control ring */
  /* ---- Layout constants ---- */
  --header-h: 60px;
  /* Rail geometry. SoftReply's numbers, promoted to the kit default
     2026-07-31 (Gautam: the LeftTopSideBottom products are one chrome, so the
     widths are the kit's, not each product's) — every product that had been
     redeclaring these now inherits them. */
  --sidebar-w: 216px;
  --sidebar-w-collapsed: 52px;
  --rail-w: 200px; /* the Folder column — a FLOOR; it grows to fit */
  --rail-w-max: 320px; /* …up to here, then labels ellipsize */
  --content-max: 1320px;
  --tap-min: 44px; /* minimum mobile hit target */
  --grid-row-h: 32px; /* dense table row height */
  /* ---- Gantt (UI::Gantt) structural constants — geometry only, no colour ---- */
  --gantt-label-w: 200px; /* width of the lane / header label column */
  --gantt-col-w: 34px; /* min width of one time-axis (day) column */
  --gantt-row-h: 30px; /* height of one bar track row */
  /* ---- Kanban (UI::Kanban) structural constants — geometry only, no colour ---- */
  --kanban-col-w: 288px; /* fixed width of one board column */
  --kanban-track-min: 64px; /* min height of a column's card track so an empty
   column still presents a droppable area */
  /* ---- Density — app-chrome spacing that scales comfortable (default) →
     compact. Set [data-density] on the AppShell root; the chrome reads THESE
     (never the raw scale) so a product flips density globally with no
     per-component overrides. Comfortable values equal the current look, so
     existing consumers see no change. Compact lives in the block at file end. */
  --dz-rail-pad: var(--s-5); /* UI::Sidebar outer padding */
  --dz-nav-pad-block: var(--s-2); /* UI::NavItem row padding (block axis) */
  --dz-nav-pad-inline: var(--s-5); /* UI::NavItem row padding (inline axis) */
  --dz-pagehead-gap: var(--s-9); /* UI::PageHeader space below the title row */
  --nt-detractor-ink: #7B3F28;
  --nt-detractor-bg: #FBF1EE;
  --nt-detractor-border: #ECD3CA;
  --nt-passive-ink: #4A5568;
  --nt-passive-bg: #F7FAFC;
  --nt-passive-border: #E2E8F0;
  --nt-promoter-ink: #276749;
  --nt-promoter-bg: #EDF6F0;
  --nt-promoter-border: #CFE6D9;
  --auth-rail-bg: #1B1D27;
  --auth-rail-ink: #FFFFFF;
  --auth-rail-ink-dim: rgba(255, 255, 255, 0.72);
  --auth-rail-accent: #FFFFFF;
  --auth-rail-glow: var(--brand);
  --auth-rail-card-bg: rgba(255, 255, 255, 0.06);
  --auth-rail-card-border: rgba(255, 255, 255, 0.12);
}

/* Dark theme: override token VALUES only — every component references vars, so
   this single block re-themes the whole UI. */
[data-theme=dark] {
  --bg-app: #15161C;
  --surface: #1B1D27;
  --surface-2:#20222D;
  --surface-3:#20222D;
  --surface-light-violet:#201F33;
  --border-2: #2A2C38;
  --border-3: #2A2C38;
  --border-4: #313445;
  --text: #ECEDF2;
  --text-2: #D7D9E2;
  --text-3: #C2C5D1;
  --text-mid: #A3A7B5;
  --text-muted:#9499A6;
  --text-faint:#7C8090;
  --brand-tint:#262648;
  --brand-tint-2:#20203B;
  --brand-border:#33335A;
}

/* Density — compact preference. Set [data-density="compact"] on the AppShell
   root (UI::AppShell density: :compact, or the ui-density controller at runtime);
   --header-h + the chrome tokens tighten and the whole shell follows. Comfortable
   is the :root default. NOTE: --tap-min (NavItem touch target) intentionally does
   NOT shrink — compact is a desktop spacing preference, not a hit-target override
   (WCAG 2.5.8 target size stays satisfied). */
[data-density=compact] {
  --header-h: 50px;
  --dz-rail-pad: var(--s-3);
  --dz-nav-pad-block: var(--s-1);
  --dz-nav-pad-inline: var(--s-4);
  --dz-pagehead-gap: var(--s-5);
}

/* The kit is designed for the border-box model; on most surfaces Bootstrap
   supplies it as the substrate. A page loading skiwo_ui WITHOUT Bootstrap
   (PrepperShaker's paid shell) fell back to content-box and every fixed-width
   element grew by its padding — the collapsed 52px sidebar rendered 76px and
   clipped against the content (2026-08-02). Scoped to the kit root; identical
   to Bootstrap's own reset, so co-loading changes nothing. */
.skiwo-ui,
.skiwo-ui *,
.skiwo-ui *::before,
.skiwo-ui *::after {
  box-sizing: border-box;
}

.theme-varslingssystem {
  --brand: #1d3a5f;
  --brand-hover: #142a46;
  --brand-tint: #eef3f9;
  --brand-border: #c3d2e4;
  --brand-ring: rgba(29, 58, 95, 0.15);
  --on-brand: #FFFFFF;
  --bg-app: #f7f9fc;
  --surface: #FFFFFF;
  --surface-2: #f3f6fa;
  --surface-3: #eef3f9;
  --hairline: #e5eaf1;
  --border-1: #e5eaf1;
  --border-2: #d2dae5;
  --border-3: #d2dae5;
  --border-4: #9fafc4;
  --text: #1e293b;
  --text-2: #2b3a4e;
  --text-mid: #4b5563;
  --text-muted: #4b5563;
  --text-faint: #64748b;
  --sh-focus: 0 0 0 3px var(--brand-ring);
  --auth-bg-from: #e9eff7;
  --auth-bg-to: #d0dcec;
  --auth-header-bg: #1d3a5f;
}

.theme-varslingssystem {
  background: var(--bg-app);
  color: var(--text);
  margin: 0;
  font-family: var(--font-body, system-ui, -apple-system, "Segoe UI", sans-serif);
}
.theme-varslingssystem .vs-container {
  max-width: 68rem;
  margin: 0 auto;
  padding: 0 1.25rem;
}
.theme-varslingssystem .vs-header {
  background: var(--surface);
  border-bottom: 1px solid var(--hairline);
}
.theme-varslingssystem .vs-header .vs-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 3.5rem;
  gap: 1rem;
}
.theme-varslingssystem .vs-brand {
  font-weight: 700;
  font-size: 1.125rem;
  color: var(--brand);
  text-decoration: none;
}
.theme-varslingssystem .vs-header-nav {
  display: flex;
  align-items: center;
  gap: 1.25rem;
}
.theme-varslingssystem .vs-header-nav a {
  color: var(--text-2);
  text-decoration: none;
}
.theme-varslingssystem .vs-header-nav a:hover {
  color: var(--brand);
  text-decoration: underline;
}
.theme-varslingssystem .vs-header-nav a.vs-cta {
  color: var(--on-brand);
}
.theme-varslingssystem .vs-header-nav a.vs-cta:hover {
  color: var(--on-brand);
  text-decoration: none;
}
.theme-varslingssystem .vs-section {
  padding: 3rem 0;
}
.theme-varslingssystem .vs-section h2 {
  font-size: 1.5rem;
  margin: 0 0 1.25rem;
  color: var(--text);
}
.theme-varslingssystem .vs-section--alt {
  background: var(--surface);
  border-block: 1px solid var(--hairline);
}
.theme-varslingssystem .vs-hero {
  padding: 4rem 0 3.5rem;
}
.theme-varslingssystem .vs-hero h1 {
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  line-height: 1.15;
  margin: 0 0 1rem;
  max-width: 40rem;
}
.theme-varslingssystem .vs-hero .vs-lede {
  font-size: 1.125rem;
  color: var(--text-mid);
  max-width: 38rem;
  margin: 0 0 1.5rem;
}
.theme-varslingssystem .vs-cta {
  display: inline-block;
  background: var(--brand);
  color: var(--on-brand);
  padding: 0.75rem 1.5rem;
  border-radius: 0.5rem;
  text-decoration: none;
  font-weight: 600;
}
.theme-varslingssystem .vs-cta:hover {
  background: var(--brand-hover);
  color: var(--on-brand);
}
.theme-varslingssystem .vs-cta:focus-visible {
  outline: none;
  box-shadow: var(--sh-focus);
}
.theme-varslingssystem .vs-price-note {
  margin: 0.75rem 0 0;
  color: var(--text-muted);
  font-size: 0.9375rem;
}
.theme-varslingssystem .vs-steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: 1.5rem;
  padding: 0;
  margin: 0;
  list-style: none;
  counter-reset: vs-step;
}
.theme-varslingssystem .vs-steps li {
  counter-increment: vs-step;
  background: var(--surface);
  border: 1px solid var(--border-1);
  border-radius: 0.75rem;
  padding: 1.25rem;
}
.theme-varslingssystem .vs-steps li::before {
  content: counter(vs-step);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background: var(--brand-tint);
  color: var(--brand);
  font-weight: 700;
  margin-bottom: 0.75rem;
}
.theme-varslingssystem .vs-steps li h3 {
  font-size: 1.0625rem;
  margin: 0 0 0.5rem;
}
.theme-varslingssystem .vs-steps li p {
  margin: 0;
  color: var(--text-mid);
}
.theme-varslingssystem .vs-legal-list {
  margin: 0 0 1rem;
  padding-left: 1.25rem;
  color: var(--text-2);
}
.theme-varslingssystem .vs-legal-list li {
  margin-bottom: 0.5rem;
}
.theme-varslingssystem .vs-external {
  color: var(--brand);
}
.theme-varslingssystem .vs-trust-items {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: 1.5rem;
  padding: 0;
  margin: 0;
  list-style: none;
}
.theme-varslingssystem .vs-trust-items li {
  border-left: 3px solid var(--brand);
  padding-left: 1rem;
}
.theme-varslingssystem .vs-trust-items li h3 {
  font-size: 1.0625rem;
  margin: 0 0 0.5rem;
}
.theme-varslingssystem .vs-trust-items li p {
  margin: 0;
  color: var(--text-mid);
}
.theme-varslingssystem .vs-faq {
  max-width: 42rem;
}
.theme-varslingssystem .vs-faq details {
  border-bottom: 1px solid var(--hairline);
  padding: 0.75rem 0;
}
.theme-varslingssystem .vs-faq details summary {
  cursor: pointer;
  font-weight: 600;
  color: var(--text);
}
.theme-varslingssystem .vs-faq details summary:focus-visible {
  outline: none;
  box-shadow: var(--sh-focus);
  border-radius: 0.25rem;
}
.theme-varslingssystem .vs-faq details p {
  margin: 0.75rem 0 0;
  color: var(--text-mid);
}
.theme-varslingssystem .vs-wizard {
  max-width: 34rem;
}
.theme-varslingssystem .vs-wizard h1 {
  font-size: 1.75rem;
  margin: 0 0 0.75rem;
}
.theme-varslingssystem .vs-wizard form {
  margin-top: 1.5rem;
  display: grid;
  gap: 1rem;
  justify-items: start;
}
.theme-varslingssystem .vs-access-code {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 1.375rem;
  letter-spacing: 0.06em;
  background: var(--brand-tint);
  border: 1px dashed var(--brand-border);
  border-radius: 0.5rem;
  padding: 0.75rem 1rem;
  user-select: all;
  overflow-wrap: anywhere;
}
.theme-varslingssystem .vs-step-indicator {
  color: var(--text-faint);
  font-size: 0.875rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin: 0 0 0.5rem;
}
.theme-varslingssystem .vs-app-nav {
  display: flex;
  gap: 0.25rem;
  border-bottom: 1px solid var(--hairline);
  margin-bottom: 1.5rem;
}
.theme-varslingssystem .vs-app-nav__tab {
  padding: 0.5rem 1rem;
  color: var(--text-mid);
  text-decoration: none;
  border-bottom: 2px solid transparent;
}
.theme-varslingssystem .vs-app-nav__tab.is-active {
  color: var(--brand);
  border-bottom-color: var(--brand);
  font-weight: 600;
}
.theme-varslingssystem .vs-app-nav__tab:hover {
  color: var(--brand);
}
.theme-varslingssystem .vs-case-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}
.theme-varslingssystem .vs-case-header h1 {
  margin: 0;
  font-size: 1.5rem;
}
.theme-varslingssystem .vs-case-actions {
  display: flex;
  gap: 0.5rem;
  margin-left: auto;
}
.theme-varslingssystem .vs-case-deadlines {
  display: flex;
  gap: 0.5rem;
  margin: 0.75rem 0 1.25rem;
}
.theme-varslingssystem .vs-dialogue-original {
  white-space: pre-wrap;
}
.theme-varslingssystem .vs-audit-list {
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: 0.9375rem;
  color: var(--text-mid);
}
.theme-varslingssystem .vs-audit-list li {
  padding: 0.25rem 0;
  border-bottom: 1px solid var(--hairline);
}
.theme-varslingssystem .vs-audit-list .vs-audit-time {
  color: var(--text-faint);
}
.theme-varslingssystem .vs-doc-downloads {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0.5rem 0 1rem;
}
.theme-varslingssystem .vs-handbook-paragraph {
  background: var(--surface-2);
  border-radius: 0.5rem;
  padding: 0.75rem 1rem;
  user-select: all;
}
.theme-varslingssystem .vs-directory-search {
  display: flex;
  gap: 0.75rem;
  align-items: flex-end;
  margin-bottom: 1.5rem;
  max-width: 34rem;
}
.theme-varslingssystem .vs-directory-search .skiwo-field {
  flex: 1;
}
.theme-varslingssystem .vs-directory-list {
  list-style: none;
  padding: 0;
  margin: 0;
  max-width: 42rem;
}
.theme-varslingssystem .vs-directory-list li {
  border-bottom: 1px solid var(--hairline);
}
.theme-varslingssystem .vs-directory-list li a {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.75rem 0.25rem;
  text-decoration: none;
  color: var(--text);
}
.theme-varslingssystem .vs-directory-list li a:hover .vs-directory-name {
  color: var(--brand);
  text-decoration: underline;
}
.theme-varslingssystem .vs-directory-name {
  font-weight: 600;
}
.theme-varslingssystem .vs-directory-org {
  color: var(--text-faint);
  font-size: 0.9375rem;
}
.theme-varslingssystem .vs-footer {
  background: var(--surface);
  border-top: 1px solid var(--hairline);
  padding: 2rem 0;
  color: var(--text-muted);
  font-size: 0.9375rem;
}
.theme-varslingssystem .vs-footer .vs-container {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: space-between;
}
.theme-varslingssystem .vs-footer a {
  color: var(--text-2);
}