/* Kliksight Design System, global tokens, fonts, resets */
/* Satoshi is self-hosted (POPIA/GDPR: no CDN font loads leaking visitor IPs). Single-family system: Satoshi only. */
@font-face {
  font-family: 'Satoshi';
  src: url('assets/fonts/Satoshi-Variable.woff2') format('woff2'),
       url('assets/fonts/Satoshi-Variable.woff') format('woff');
  font-weight: 300 900;
  font-style: normal;
  font-display: swap;
}
:root {
  /* ---- Color (dark-first) ---- */
  --base:      #08060F;  /* page background, deep cool near-black */
  --plum:      #241B3A;  /* raised dark sections, the ledger, heading blocks */
  --plum-2:    #2E2447;  /* raised dark surface */
  --ink:       #ECEAF6;  /* primary text (light on dark) */
  --ink-strong:#FFFFFF;  /* max-contrast headlines */
  --mint:      #17D9A0;  /* THE money signal: CREDITED, RECOVERED or RECOVERABLE. Never decorative.
                            RULED part 86, register item 27. "recovered $ ONLY" was narrower than the
                            rule and left a correctly-labelled recoverable figure looking illegal.
                            There is no separate recoverable hue and none is to be added. */
  --mint-deep: #0BA377;  /* deeper mint for on-light / dense fills */
  --coral:     #FF7A5C;  /* brand energy: highlights, flagged waste (DATA meaning), never recovered $, never error */
  --lilac:     #9A93B5;  /* DATA HUE - platform-credited amounts and credited-state indicators ONLY.
                            Not a text colour. If you are colouring a label, kicker, caption, helper
                            note, rule, bullet, status dot or any interactive chrome, you want
                            --ui-muted (or --ui-muted-on-plum on the plum ledger). 5.6:1 on --plum. */
  /* ============================================================================
     ACCENT (ruled 12 Aug 2026, the accent sitting). THE ONE BRAND CHROME HUE.
     It exists because chrome had nothing to reach for: Dialog's decorative top
     border was --mint, so a modal about deleting an account wore the
     recovered-money hue. Azure carries NO DATA MEANING. It is not a state, not
     a verdict, not a tone, and nothing about it says anything about money.
       PERMITTED: decorative and structural brand chrome that asserts nothing.
         Dialog's top border, a section or heading rule, a masthead rule, a
         brand mark, a focus ring on a surface that wants a branded one.
       FORBIDDEN: any figure, chip, chart mark, table row, row rail, status dot,
         direction arrow or legend key (that is data, and data has three hues);
         any success, warning, error or pending treatment (a state reads from
         the --state-* steps, --warn or --danger); the plum ledger's own
         instrument rules, which stay neutral.
       NOT the agency accent. AccentInput's brand_accent is the AGENCY's colour,
         confined to white-label masthead chrome on the client report. This
         token is Kliksight's own and never renders on a white-label surface.
       Distinguishable from all four hues in force: mint 162deg, coral 11deg,
       lilac 252deg at 19% saturation (HSL), danger 346deg. Azure sits at 207deg.
       Contrast, every figure named with the token it is measured against
       (desk-verified 13 Aug 2026): 7.91:1 on --base, 6.38:1 on --plum. The
       light theme darkens it to #1A66C7 for 5.15:1 on --mist #F7F5FB, the
       light report surface, which clears AA at 4.5:1 and governs the masthead
       and heading rules that survive into print. The system focus ring stays --ui-focus (mist) by
       default: one focus treatment, chosen once, so surfaces cannot drift.
     ============================================================================ */
  --accent:    #3EA8FF; /* @kind color */
  /* ---- Danger: validation errors + destructive actions (split from coral so a form error never reads as detected fraud) ---- */
  --danger:    #F2557A; /* @kind color */
  --danger-bg: rgba(242,85,122,.12); /* @kind color */
  /* ---- Warn: setup/attention states (pixel signal lost, rejected host). Amber, distinct from coral-waste and danger-error ---- */
  --warn:      #E6A23C; /* @kind color */
  --warn-bg:   rgba(230,162,60,.12); /* @kind color */
  --warn-line: rgba(230,162,60,.36); /* @kind color */
  /* ============================================================================
     CHROME RULE - DO NOT BREAK THIS WHEN EDITING THE SYSTEM
     Hue carries data meaning, chrome carries none.
       --coral = flagged waste · --lilac = platform-credited · --mint = credited, recovered or recoverable.
     Interactive elements (buttons, focus rings, active nav, active page, selected
     states, links, tab indicators) take the --ui-* tokens below: neutrals at rest,
     AZURE (--accent, the data-free chrome hue) on hover and active. Never a data hue.
     If you put a semantic hue on something the user clicks, the UI is telling a
     lie about the data. The only exception is Button variant="credit" (mint),
     which is scoped to credited/recovered-amount contexts.
     ============================================================================ */
  /* ============================================================================
     MONEY ROUNDING RULE - ONE RULE, SYSTEM-WIDE. DO NOT REINTRODUCE A THRESHOLD.
     A magnitude threshold (whole units above 1000, cents below) puts R4 880 next
     to R310,00 on the same surface, which is the one juxtaposition the system
     rejects: a column of figures has to scan as one measurement, not two.
     The split is by SURFACE, never by magnitude:

       SCANNING surfaces - whole major units, always. maximumFractionDigits: 0.
         StatCard, DataTable cells, Chart axes + tooltips, ReportCard headline,
         and every template screen (Overview, Account Detail, Report Studio,
         Activity Trail, Multi-Client Overview).

         ONE stated exception, and it is not a threshold: COMPACT NOTATION.
         A Chart axis that has to compact (notation: "compact") keeps ONE fraction
         digit - "R12.5k", not "R12k". The digit lands on the compact multiplier,
         never on cents, so it does not reintroduce the R4 880 / R310,00 clash; it
         exists because whole-unit compact ticks collide ("R12k" next to "R13k"
         over a 900-unit gap is a false axis). Stated here rather than left to the
         Chart, because an unstated exception is how a threshold creeps back in.

       INSTRUMENT surfaces - full minor units of the row's own currency, always.
         min = max = the currency's own digit count (2 for ZAR/USD, 0 for JPY),
         never a hardcoded 2. ReconciliationLedger, ClaimPackage,
         AgencyActionPack, VerificationStatement, and anything printed or exported.

     A figure someone reads is rounded; a figure someone files is exact.
     Money is ALWAYS integer minor units + an explicit ISO-4217 code at the API
     boundary - the rounding is a rendering decision and nothing else.
     ============================================================================ */

  /* ============================================================================
     ABSENCE MARKER LAW (ruled 11 Aug 2026, sitting 4). The figure slot's own
     vocabulary when there is no number. money()'s em-dash null placeholder is
     DELETED: an absence renders only from a STATED kind, never derived from a
     bare null, because the four facts are four different inputs.
       REAL ZERO       renders 0.00. A number, not an absence. No marker.
       NOT YET         ring (outlined circle). Outlined = in motion. Temporal.
       NEVER           solid-slashed circle. Solid = settled. Permanent. Line:
                       "No verifiable credit figure for this platform."
       NOT COMPUTABLE  dashed-slashed circle (dashed = derived). Line: "Cannot
                       be computed - one term of this calculation has no
                       verifiable figure."
     Geometry, one spec so surfaces cannot drift: an inline SVG in the figure
     position, sized .6em of the figure's OWN font size (a digit's optical
     weight, never superscript); circle r .41em, stroke .125em, 45-degree
     slash, dash pattern 2.4/2 on the not-computable circle; colour
     --state-muted (--state-muted-on-plum on the ledger), never a data hue:
     absence is provenance, not a data class. The glyph NEVER renders alone.
     Hero, stat and instrument slots pair it with the ruled line at the muted
     step; table cells pair it with the DataTable cell-state wording at every
     width. Print carries state by inked glyph + visible words only (sr-only
     is lost in PDF export). An absence with NO stated kind is a caller defect
     and renders the defect trap (dotted frame + "Absence unstated"): loud at
     review, never a quiet dash shipped as an answer. Contract check flags
     data-shaped null placeholders for the same reason.
     ============================================================================ */

  --mist:      #F7F5FB;  /* neutral chrome white: primary-action fill, focus rings */

  /* ---- Chrome (interactive layer). Neutrals derived from --mist / --ink. ---- */
  --ui-primary-bg:       var(--mist); /* @kind color */
  --ui-primary-bg-hover: #FFFFFF;     /* @kind color */
  --ui-primary-bg-press: #E4E0EE;     /* @kind color */
  --ui-primary-ink:      #1A1526;     /* @kind color */ /* 17.1:1 on --mist */
  --ui-disabled-bg:      rgba(247,245,251,.14); /* @kind color */
  --ui-disabled-ink:     rgba(247,245,251,.62); /* @kind color */ /* 5.1:1 on the above */
  --ui-muted:        rgba(247,245,251,.62); /* @kind color */ /* inactive/secondary chrome text: labels, eyebrows, one-word states */
  /* NOTES ARE READ, SO THEY ARE SET TO BE READ (ruled 7 Sep 2026). The sentence under a control or
     section that explains what it does, what was checked or what happens next is prose, not chrome,
     and it was being set in --state-quiet at 10.5px: a data-state hue tuned for one-word labels,
     spent on whole sentences at a size mono cannot carry. Explanatory prose takes --ui-note at
     12px or larger, line-height 1.6. --state-quiet returns to data states only. 8.9:1 on --card. */
  --ui-note:         rgba(247,245,251,.78); /* @kind color */ /* explanatory prose under controls and sections */
  --ui-line:         rgba(247,245,251,.42); /* @kind color */ /* control outline, rest */
  /* HOVER / ACTIVE, ruled 6 Sep 2026: azure, the one brand chrome hue. The mist-at-10% lift
     was near-invisible on a blue-and-white product and a reader could not tell where they were.
     Azure carries no data meaning (see the accent ruling above), so hover, the active nav rail
     and selected edges may wear it at full strength. Coral was asked for and refused: it is the
     waste hue, and chrome wearing it would put "detected" on every button. */
  --ui-line-hover:   var(--accent); /* @kind color */
  --ui-line-active:  var(--accent); /* @kind color */ /* active page / selected edge */
  --ui-fill-active:  rgba(62,168,255,.14); /* @kind color */
  --ui-focus:        var(--mist); /* @kind color */ /* focus ring - neutral, never mint */
  --link-hover:      var(--mist); /* @kind color */ /* link hover ink (inverts on light) */
  /* The plum ledger surface stays dark in BOTH themes, so its muted text is the same
     mist-at-62% grey as --ui-muted on dark - one grey, not a third. 6.6:1 on --plum. */
  --ui-muted-on-plum: rgba(247,245,251,.62); /* @kind color */

  /* ---- State steps (SOLID neutrals, NOT alpha) ----
     The --ui-* tokens are mist-at-N%, so they composite differently over --base, --card,
     --plum, --plum-2 and --glass: five actual colours. That is fine for the two chrome
     states they serve, and it breaks the moment "one step heavier" has to carry MEANING.
     These three are solid values, so the order quiet < muted < marked reads the same on
     every surface. State semantics only - never interactive chrome, never a data hue.
     Contrast measured on --base / --card / --plum. */
  --state-quiet:  #8A84A3; /* @kind color */ /* below the observation floor, dimmest legible step - 5.7:1 / 5.2:1 / 4.6:1 */
  --state-muted:  #A9A3C0; /* @kind color */ /* insufficient observations, establishing baseline - 8.3:1 / 7.7:1 / 6.7:1 */
  --state-marked: #CFCADD; /* @kind color */ /* alert row rail + state emphasis - 12.6:1 / 11.6:1 / 10.2:1 */
  --state-marked-fill: rgba(247,245,251,.055); /* @kind color */ /* the ONE surface step under a marked row. Rail + step, never rail + heavier rule + fill. */
  /* The plum ledger stays dark in BOTH themes, so its state steps are always the dark-surface values. */
  --state-quiet-on-plum:  #8A84A3; /* @kind color */
  --state-muted-on-plum:  #A9A3C0; /* @kind color */
  --state-marked-on-plum: #CFCADD; /* @kind color */

  --card:      #141124;  /* dark card surface */
  --hairline:  #2A2442;  /* hairlines / card borders on dark */
  --line-dark: #3A3153;  /* hairlines on plum */
  --glass:     rgba(255,255,255,.04);  /* glassy card fill */
  --glass-line:rgba(255,255,255,.09);  /* glassy card border */

  /* ---- Type ---- */
  --display: 'Satoshi', system-ui, sans-serif; /* @kind font */
  --body:    'Satoshi', system-ui, sans-serif; /* @kind font */
  --mono:    'Satoshi', system-ui, sans-serif; /* @kind font */

  /* ---- Radius ---- */
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 18px;
  --r-pill: 999px;

  /* ---- Spacing (4px base; steps grow ~1.5×) ---- */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;
  --sp-8: 64px;
  --sp-9: 96px;

  /* ---- Layout ---- */
  --measure: 66ch;        /* max readable text width */
  --content-max: 1200px;  /* max app content width */
  --gutter: var(--sp-5);  /* default page gutter */

  /* ---- Motion ---- */
  --dur-fast:  120ms;  /* @kind other */
  --dur:       240ms;  /* @kind other */
  --dur-slow:  600ms;  /* @kind other */
  --dur-count: 1100ms; /* @kind other */
  --ease:      cubic-bezier(.4, 0, .2, 1);   /* @kind other */
  --ease-out:  cubic-bezier(.16, 1, .3, 1);  /* @kind other */
  --ease-in:   cubic-bezier(.4, 0, 1, 1);    /* @kind other */

  /* ---- Data-viz palette (semantic, same meanings as everywhere) ---- */
  --viz-recovered: var(--mint);   /* money back */
  --viz-waste:     var(--coral);  /* detected waste */
  --viz-credited:  var(--lilac);  /* Google already credited */
  --viz-grid:      rgba(255,255,255,.07);
  --viz-axis:      rgba(255,255,255,.28);
}

*, *::before, *::after { box-sizing: border-box; }

body {
  font-family: var(--body);
  background: var(--base);
  /* Ambient depth only. Plum-cast neutral, NOT mint and NOT coral: a data hue on wallpaper
     spends the money signal on decoration. Same geometry and opacity range as before. */
  background-image:
    radial-gradient(120% 80% at 12% -10%, rgba(110,95,148,.10), transparent 55%),
    radial-gradient(90% 70% at 100% 0%, rgba(88,78,120,.07), transparent 50%);
  background-attachment: fixed;
  color: var(--ink);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "tnum" 1; /* tabular numerals everywhere */
  margin: 0;
}

/* Links are chrome: neutral ink + a mist underline carries the affordance, never mint. */
a { color: var(--ink-strong); text-decoration: underline; text-decoration-color: var(--ui-line); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--link-hover); text-decoration-color: var(--ui-line-active); }

/* Money-figure treatment, a ONE-TIME reveal that settles (never an infinite pulse).
   The recoverable figure is the make-or-break number; a perpetual glow contradicts
   the "never round up hope" voice. It counts up once on mount, then rests. */
@keyframes km-money-settle {
  0%   { opacity: .35; transform: translateY(4px); }
  100% { opacity: 1;   transform: none; }
}
.km-money { animation: km-money-settle var(--dur-slow) var(--ease-out) both; }
/* Legacy class kept as a settle alias so older markup doesn't pulse. NEVER on client-facing/print surfaces. */
.km-money-glow { animation: km-money-settle var(--dur-slow) var(--ease-out) both; }

/* The provenance unfold - the ONE place motion is spent outside the money settle.
   In-flow unfolds animate grid-template-rows; the anchored popover uses this. */
@keyframes km-unfold-in {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: none; }
}
.km-unfold { animation: km-unfold-in var(--dur) var(--ease-out) both; }
@media (prefers-reduced-motion: reduce) { .km-unfold { animation: none; } }

@keyframes km-toast-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes km-spin { to { transform: rotate(360deg); } }

/* Pixel "live/active" heartbeat - a slow single-ring pulse, never a frantic blink.
   NEUTRAL: a healthy pixel is state, not data - coral would read as flagged waste. */
@keyframes km-pixel-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(207,202,221,.5); }
  70%  { box-shadow: 0 0 0 5px rgba(207,202,221,0); }
  100% { box-shadow: 0 0 0 0 rgba(207,202,221,0); }
}
@media (prefers-reduced-motion: reduce) {
  [style*="km-pixel-pulse"] { animation: none !important; }
}

/* Chart line draw-in (respect reduced-motion at the component level) */
@keyframes km-draw { to { stroke-dashoffset: 0; } }

@keyframes km-overlay-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes km-dialog-in {
  from { opacity: 0; transform: translateY(10px) scale(.985); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .km-money, .km-money-glow { animation: none; }
}

/* ---- Accessibility baseline (retrofit for every interactive component) ---- */
:where(button,a,input,select,textarea,[role="button"],[role="tab"],[role="menuitem"],[tabindex]):focus-visible {
  outline: 2px solid var(--ui-focus);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}
.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;
}
.skip-link {
  position: absolute; left: var(--sp-3); top: -60px; z-index: 1000;
  background: var(--ui-primary-bg); color: var(--ui-primary-ink); padding: var(--sp-2) var(--sp-4);
  border-radius: var(--r-sm); font-weight: 600; transition: top var(--dur) var(--ease);
}
.skip-link:focus { top: var(--sp-3); }

/* ---- Light + print theme ----
   The dashboard stays DARK. The white-label ReportCard, emails and PDF export use LIGHT.
   Scope with data-theme="light" on the report/email root. */
[data-theme="light"] {
  --base:      #FBFBFD;
  --plum:      #241B3A;   /* headers/accents still plum */
  --plum-2:    #2E2447;
  --ink:       #1A1526;   /* dark text on light */
  --ink-strong:#0B0713;
  --lilac:     #6E6785;   /* credited-amount hue, darkened for AA on light (5.0:1 on --base) */
  --card:      #FFFFFF;
  --hairline:  #E4E1EC;
  --line-dark: #D6D2E2;
  --glass:     #F4F2F9;
  --glass-line:#E4E1EC;
  --mint:      #0BA377;   /* mint-deep is the on-light money colour (text contrast); keep #17D9A0 for fills/bars only */
  --mint-deep: #087F5E;
  --accent:    #1A66C7;   /* brand chrome hue darkened for the light report header (5.15:1 on --mist #F7F5FB) */
  --warn:      #9A6516;   /* darkened amber for AA text on light */
  --warn-bg:   rgba(230,162,60,.16);
  --warn-line: rgba(154,101,22,.34);
  /* chrome inverts on light: dark neutral fill, mist ink */
  --ui-primary-bg:       #1A1526;
  --ui-primary-bg-hover: #2E2447;
  --ui-primary-bg-press: #0B0713;
  --ui-primary-ink:      #F7F5FB;
  --ui-disabled-bg:      rgba(26,21,38,.10);
  --ui-disabled-ink:     rgba(26,21,38,.55);
  --ui-muted:        rgba(26,21,38,.62);
  --ui-note:         rgba(26,21,38,.80); /* explanatory prose, 10.9:1 on --card */
  --ui-line:         rgba(26,21,38,.26);
  --ui-line-hover:   #1A66C7;
  --ui-line-active:  #1A66C7;
  --ui-fill-active:  rgba(26,102,199,.10);
  --ui-focus:        #1A1526;
  /* State steps re-derived for light surfaces. Contrast on --base / --card. */
  --state-quiet:  #726C85; /* 4.7:1 / 5.0:1 */
  --state-muted:  #574F6D; /* 7.1:1 / 7.7:1 */
  --state-marked: #3A3350; /* 11.0:1 / 11.9:1 */
  --state-marked-fill: rgba(26,21,38,.045);
  /* -on-plum steps intentionally NOT overridden: the ledger surface is dark in this theme too. */

  --viz-grid:  rgba(20,17,36,.08);
  --viz-axis:  rgba(20,17,36,.34);
}
[data-theme="light"] body,
[data-theme="light"] { background-image: none; }

@media print {
  /* PRINT TOKEN SET (ruled 15 Aug 2026, item 106). SYSTEM SCOPE, fixed once here, never per
     template. The system is dark first and print inherited it: previously only --base and
     --card reset, so the other root tokens survived with dark values (--ink #ECEAF6 near-white
     on white paper) - the dark block on the client report was a symptom; the defect governed
     EVERY printable surface.
     WHICH TOKENS RESET: exactly the light theme's override set, restated verbatim below, plus
     the two paper literals (--base and --card go to #fff - paper is white, not the light
     theme's #FBFBFD).
     WHY THE SET IS COMPLETE: by construction. Print is the light theme on white, so the reset
     list IS the light theme's override list; any token the light theme does not override is
     theme-invariant by ruling and correct on paper as-is: --plum / --plum-2 and every -on-plum
     step (the ledger stays dark in BOTH themes and prints as an inked block,
     print-color-adjust: exact), --mist, --coral, --danger, --danger-bg, and the radius,
     spacing, type and motion tokens. Surfaces that scope data-theme="light" already carry
     these values; this block makes bare dark app chrome print legible too. If the light theme
     gains or loses an override, this block moves with it - the two lists are one list. */
  :root, [data-theme="light"] {
    --base:#fff; --card:#fff;
    --ink:#1A1526; --ink-strong:#0B0713;
    --lilac:#6E6785;
    --hairline:#E4E1EC; --line-dark:#D6D2E2;
    --glass:#F4F2F9; --glass-line:#E4E1EC;
    --mint:#0BA377; --mint-deep:#087F5E;
    --accent:#1A66C7;
    --warn:#9A6516; --warn-bg:rgba(230,162,60,.16); --warn-line:rgba(154,101,22,.34);
    --ui-primary-bg:#1A1526; --ui-primary-bg-hover:#2E2447; --ui-primary-bg-press:#0B0713;
    --ui-primary-ink:#F7F5FB;
    --ui-disabled-bg:rgba(26,21,38,.10); --ui-disabled-ink:rgba(26,21,38,.55);
    --ui-muted:rgba(26,21,38,.62); --ui-note:rgba(26,21,38,.80);
    --ui-line:rgba(26,21,38,.26); --ui-line-hover:#1A66C7; --ui-line-active:#1A66C7;
    --ui-fill-active:rgba(26,102,199,.10);
    --ui-focus:#1A1526;
    --state-quiet:#726C85; --state-muted:#574F6D; --state-marked:#3A3350;
    --state-marked-fill:rgba(26,21,38,.045);
    --viz-grid:rgba(20,17,36,.08); --viz-axis:rgba(20,17,36,.34);
  }
  body { background:#fff !important; background-image:none !important; color:#000; }
  .km-money, .km-money-glow { animation:none !important; text-shadow:none !important; }
  .no-print { display:none !important; }
  a { color:#1A1526; text-decoration-color:rgba(26,21,38,.45); }

  /* ProvenanceUnfold in print, decided once so no surface improvises it:
     IN-FLOW unfolds (stat, inline) print ALWAYS EXPANDED, open or closed on screen.
     A printed figure is an instrument, not a scan: paper has no disclosure, so a
     collapsed unfold prints as an unexplained number and the working - the whole
     reason the pattern exists - is lost the moment the page leaves the screen.
     The ANCHORED popover (cell context) prints hidden. It is a screen affordance
     positioned against a live viewport; on paper it would land on top of the table
     it explains, and it is not in the DOM at all unless the reader happened to have
     it open. Cell working reaches print through the claim package, not through a
     floating panel. */
  .km-unfold-flow { grid-template-rows: 1fr !important; }
  /* The clip wrapper is visibility:hidden while collapsed on SCREEN (it is how the copy control
     leaves the tab order and the a11y tree). Paper has no disclosure, so print puts it back. */
  .km-unfold-clip { visibility: visible !important; }
  .km-unfold-flow .km-unfold-panel { opacity: 1 !important; }
  .km-unfold { display: none !important; }
}
