/* dots app mockups (M1–M13): static HTML/CSS imitations with fictional data.
   Fragments live in mockups/m*.html (repo root) and are copied into pages by scripts/inline-mockups.mjs.
   Designed at 1200 px wide: 1em = 16 px there (font-size: 100cqi / 75). Under 640 px the
   crop rules hide the app chrome and every .mk-w widget not marked [data-keep].
   Rules: logical properties only, no text below 11 px at 1200 px, light theme only. */

.mk {
  --app-header-1: #0B4F6C;
  --app-header-2: #0E7490;
  --app-bg: #F5F7FA;
  --app-text: #1F2937;
  --app-muted: #5B6472;
  --app-series: #2F6FC0;
  --app-series-2: #4A90E2;
  --app-up: #15803D;
  --app-up-bg: #DCFCE7;
  --app-down: #B91C1C;
  --app-ai: #6D28D9;
  --app-ai-bg: #F3EEFF;
  --app-border: #E5E9F0;
  --app-grid: #EDF0F5;
  --app-teal: #0E7490;
  --app-teal-ink: #0B4F6C;
  --app-teal-bg: #E4F2F6;
  --app-amber: #92400E;
  --app-amber-bg: #FEF3C7;
  --app-glass: rgb(6 36 52 / .28);

  container-type: inline-size;
  display: block;
  position: relative;
  overflow: hidden;
  color: var(--app-text);
  background: var(--app-bg);
  font-family: "IBM Plex Sans", "IBM Plex Sans Arabic", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-weight: 400;
  line-height: 1.35;
  text-align: start;
  letter-spacing: 0;
  -webkit-font-smoothing: antialiased;
  user-select: none;
}
.mk[dir="rtl"] { font-family: "IBM Plex Sans Arabic", "IBM Plex Sans", system-ui, sans-serif; }
.mk > * { font-size: calc(100cqi / 75); }
.mk *, .mk *::before, .mk *::after { box-sizing: border-box; margin: 0; padding: 0; max-inline-size: none; }
.mk ul, .mk ol { list-style: none; }
.mk b { font-weight: 600; }
.mk table { border-collapse: collapse; inline-size: 100%; }
.mk .mk-crop { display: none; }

/* Icons */
.mk-i {
  inline-size: 1.15em; block-size: 1.15em; flex: none;
  fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}
[dir="rtl"] .mk-i--dir { transform: scaleX(-1); }

/* ---------- App shell ---------- */
.mk-shell {
  position: relative;
  display: grid;
  grid-template-columns: 13.75em minmax(0, 1fr);
  grid-template-rows: 3.5em minmax(0, 1fr);
  block-size: 46.875em;
}
.mk-side {
  grid-row: 1 / span 2;
  display: flex; flex-direction: column;
  background: #fff;
  border-inline-end: 1px solid var(--app-border);
  overflow: hidden;
}
.mk-logo {
  display: flex; align-items: center; gap: .5em;
  block-size: 3.5em; flex: none;
  padding-inline: 1.25em;
  border-block-end: 1px solid var(--app-border);
}
.mk-logo b { font-size: 1.5em; font-weight: 700; letter-spacing: -.03em; color: var(--app-teal-ink); }
.mk-logo span { font-size: .6875em; font-weight: 600; letter-spacing: .14em; color: var(--app-teal); padding-block-start: .5em; }
.mk-group { font-size: .6875em; font-weight: 600; letter-spacing: .08em; color: var(--app-teal); padding: 1.6em 1.8em .5em; }
.mk-nav { display: grid; gap: .125em; padding-inline: .625em; }
.mk-nav__item {
  display: flex; align-items: center; gap: .65em;
  padding: .55em .7em; border-radius: 6px;
  font-size: .8125em; font-weight: 600; color: var(--app-text);
}
.mk-nav__item.is-active { background: var(--app-teal-bg); color: var(--app-teal-ink); }
.mk-nav__item .mk-i { color: var(--app-muted); }
.mk-nav__item.is-active .mk-i { color: var(--app-teal); }
.mk-nav__chev { margin-inline-start: auto; display: flex; }
.mk-nav__chev .mk-i { inline-size: .9em; block-size: .9em; }
.mk-sub { display: grid; gap: .0625em; padding-block: .2em .3em; padding-inline-start: 1.5em; }
.mk-sub li { display: flex; align-items: center; gap: .6em; padding: .4em .7em; font-size: .75em; color: var(--app-muted); }
.mk-sub li::before { content: ""; inline-size: .6em; block-size: .6em; border: 1.5px solid currentColor; border-radius: 50%; flex: none; }
.mk-sub li.is-active { color: var(--app-teal-ink); font-weight: 600; }
.mk-sub li.is-active::before { background: var(--app-teal); border-color: var(--app-teal); }

.mk-top {
  display: flex; align-items: center; gap: 1.5em;
  padding-inline: 1.5em;
  background: #fff;
  border-block-end: 1px solid var(--app-border);
}
.mk-top__menu { display: flex; color: var(--app-muted); margin-inline-end: auto; }
.mk-top__menu .mk-i { inline-size: 1.4em; block-size: 1.4em; }
.mk-schema { display: flex; align-items: center; gap: .5em; color: var(--app-muted); }
.mk-schema__k { font-size: .6875em; font-weight: 600; letter-spacing: .1em; }
.mk-schema__v { font-size: .8125em; color: var(--app-text); }
.mk-avatar { display: flex; align-items: center; gap: .5em; color: var(--app-muted); }
.mk-avatar__pic { display: grid; place-items: center; inline-size: 2em; block-size: 2em; border-radius: 6px; background: var(--app-teal); color: #fff; }
.mk-avatar__name { font-size: .8125em; color: var(--app-text); }

/* Buttons and chips */
.mk-btn {
  display: inline-flex; align-items: center; gap: .45em;
  padding: .55em .9em; border-radius: 6px; border: 1px solid transparent;
  font-size: .75em; font-weight: 600; line-height: 1.2; white-space: nowrap;
}
.mk-btn .mk-i { inline-size: 1.2em; block-size: 1.2em; }
.mk-btn--ask { background: var(--app-teal); color: #fff; padding: .6em 1em; box-shadow: 0 2px 6px rgb(14 116 144 / .3); }
.mk-btn--glass { background: var(--app-glass); border-color: rgb(255 255 255 / .4); color: #fff; }
.mk-btn--light { background: #fff; color: var(--app-teal-ink); }
.mk-btn--ghost { background: #fff; border-color: var(--app-border); color: var(--app-text); }
.mk-btn--primary { background: var(--app-teal); color: #fff; }
.mk-btn--dark { background: #4B5563; color: #fff; }

.mk-chips { display: flex; gap: .375em; flex-wrap: wrap; }
.mk-chip {
  display: inline-flex; align-items: center; gap: .35em;
  padding: .3em .55em; border-radius: 4px;
  font-size: .6875em; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; white-space: nowrap;
}
.mk-chip .mk-i { inline-size: 1.1em; block-size: 1.1em; }
.mk-chip--ai { color: var(--app-ai); background: var(--app-ai-bg); }
.mk-chip--up { color: var(--app-up); background: var(--app-up-bg); }
.mk-chip--teal { color: var(--app-teal-ink); background: var(--app-teal-bg); }
.mk-chip--busy { color: var(--app-amber); background: var(--app-amber-bg); }
.mk-up { color: var(--app-up); font-weight: 600; }
.mk-down { color: var(--app-down); font-weight: 600; }
.mk-muted { font-size: .75em; color: var(--app-muted); }
.mk-code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .75em; color: var(--app-text); }

/* Page band */
.mk-main { position: relative; display: flex; flex-direction: column; min-block-size: 0; overflow: hidden; }
.mk-band {
  flex: none;
  display: flex; align-items: flex-start; justify-content: space-between; gap: 1.5em;
  padding: 1.125em 1.5em 1.5em;
  color: #fff;
  background: linear-gradient(100deg, var(--app-header-1), var(--app-header-2));
}
.mk[dir="rtl"] .mk-band { background: linear-gradient(-100deg, var(--app-header-1), var(--app-header-2)); }
.mk-crumbs { display: flex; align-items: center; gap: .45em; font-size: .6875em; color: rgb(255 255 255 / .92); margin-block-end: .6em; }
.mk-crumbs .mk-i { inline-size: 1.1em; block-size: 1.1em; }
.mk-title { font-size: 1.5em; font-weight: 700; line-height: 1.2; letter-spacing: -.01em; }
.mk-subtitle { font-size: .8125em; color: rgb(255 255 255 / .92); margin-block-start: .4em; max-inline-size: 34em; }
.mk-band__side { display: flex; flex-direction: column; align-items: flex-end; gap: .75em; }
.mk-band__actions { display: flex; gap: .5em; }
.mk-tiles { display: flex; gap: .5em; }
.mk-tile {
  display: grid; justify-items: center; min-inline-size: 4.25em;
  padding: .45em .8em; border-radius: 8px;
  background: var(--app-glass); border: 1px solid rgb(255 255 255 / .35);
}
.mk-tile b { font-size: 1.375em; font-weight: 700; line-height: 1.15; }
.mk-tile span { font-size: .6875em; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.mk-status-chip {
  display: inline-flex; align-items: center; gap: .4em;
  padding: .5em .8em; border-radius: 999px;
  background: var(--app-up-bg); color: var(--app-up);
  font-size: .75em; font-weight: 600;
}

/* Canvas, cards */
.mk-canvas { flex: 1; min-block-size: 0; display: grid; align-content: start; gap: 1em; padding: 1.25em 1.5em; overflow: hidden; }
.mk-card { background: #fff; border: 1px solid var(--app-border); border-radius: 8px; min-inline-size: 0; box-shadow: 0 1px 2px rgb(16 24 40 / .04); }
.mk-card__head { display: flex; align-items: center; gap: .6em; padding: .7em 1em; border-block-end: 1px solid var(--app-border); background: #FAFBFC; border-start-start-radius: 8px; border-start-end-radius: 8px; }
.mk-card__title { font-size: .8125em; font-weight: 600; margin-inline-end: auto; }
.mk-card__body { padding: .75em 1em 1em; }
.mk-legend { display: flex; align-items: center; justify-content: center; gap: .5em; font-size: .6875em; color: var(--app-muted); margin-block-start: .25em; }
.mk-swatch { inline-size: .9em; block-size: .9em; border-radius: 50%; background: var(--app-series); }
.mk-swatch--s1 { background: var(--app-series-2); margin-inline-start: .75em; }
.mk-swatch--s2 { background: #9CC3EE; margin-inline-start: .75em; }

.mk-kpis { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1em; }
.mk-kpi { display: grid; align-content: center; justify-items: center; gap: .3em; padding: 1em .75em; text-align: center; }
.mk-kpi__label { font-size: .6875em; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--app-muted); }
.mk-kpi__value { font-size: 1.625em; font-weight: 700; letter-spacing: -.01em; line-height: 1.15; }
.mk-kpi__unit { font-size: .55em; font-weight: 600; color: var(--app-muted); }
.mk-kpi__delta { font-size: .6875em; color: var(--app-muted); }

.mk-row { display: grid; grid-template-columns: minmax(0, 1.62fr) minmax(0, 1fr); gap: 1em; }

/* Charts */
.mk-chart { display: block; inline-size: 100%; block-size: auto; direction: ltr; overflow: visible; }
.mk-gridline { stroke: var(--app-grid); stroke-width: 1; }
.mk-ax { fill: var(--app-muted); font-family: inherit; }
.mk-ax--dark { fill: var(--app-text); font-weight: 600; }
.mk-dl { fill: var(--app-text); font-weight: 600; font-family: inherit; }
.mk-area { fill: var(--app-series-2); fill-opacity: .3; }
.mk-line { fill: none; stroke: var(--app-series); stroke-width: 2.5; stroke-linejoin: round; }
.mk-dot { fill: #fff; stroke: var(--app-series); stroke-width: 2; }
.mk-area--teal { fill: var(--app-teal); fill-opacity: .1; }
.mk-line--teal { stroke: var(--app-teal); }
.mk-dot--teal { stroke: var(--app-teal); }
.mk-band-fc { fill: var(--app-up); fill-opacity: .2; }
.mk-line-fc { fill: none; stroke: var(--app-up); stroke-width: 2.5; stroke-dasharray: 6 5; }
.mk-dot-fc { fill: #fff; stroke: var(--app-up); stroke-width: 2; }
.mk-bar { fill: var(--app-series); }
.mk-bar--s1 { fill: var(--app-series-2); }
.mk-bar--s2 { fill: #9CC3EE; }
.mk-ring { display: block; inline-size: 8.5em; block-size: 8.5em; flex: none; }
.mk-overall__body { padding-block: .6em; }
.mk-ring__track { fill: none; stroke: var(--app-grid); }
.mk-ring__value { fill: none; stroke: var(--app-up); stroke-linecap: round; }
.mk-ring__pct { fill: var(--app-up); font-weight: 700; font-family: inherit; }

/* Tables */
.mk-table th, .mk-table td { padding: .6em .9em; font-size: .75em; text-align: start; border-block-end: 1px solid var(--app-border); white-space: nowrap; }
.mk-table thead th { background: #F8FAFC; color: var(--app-muted); font-weight: 600; font-size: .6875em; letter-spacing: .04em; text-transform: uppercase; }
.mk-num { font-variant-numeric: tabular-nums; }

/* ---------- Modal (M2, M3, M11) ---------- */
.mk-scrim { position: absolute; inset: 0; background: rgb(15 23 42 / .5); }
.mk-modal {
  position: absolute; inset-inline: 9.5em 4.5em; inset-block-start: 9.5em;
  display: flex; flex-direction: column;
  background: #fff; border-radius: 10px;
  box-shadow: 0 24px 60px rgb(15 23 42 / .35);
}
.mk-modal__head { display: flex; align-items: center; gap: .75em; padding: 1em 1.5em; border-block-end: 1px solid var(--app-border); }
.mk-modal__title { display: flex; align-items: center; gap: .5em; font-size: .9375em; font-weight: 600; color: var(--app-teal-ink); margin-inline-end: auto; }
.mk-modal__x { display: flex; color: var(--app-muted); }
.mk-modal__body { display: grid; gap: 1.1em; padding: 1.1em 1.5em 1.25em; }
.mk-modal__foot { display: flex; align-items: center; justify-content: space-between; gap: .75em; padding: .85em 1.5em; border-block-start: 1px solid var(--app-border); }
.mk-modal__btns { display: flex; gap: .5em; }
.mk-sec { display: grid; gap: .55em; }
.mk-sec__h { font-size: .875em; font-weight: 600; color: var(--app-teal-ink); padding-block-end: .4em; border-block-end: 1px solid var(--app-border); }
.mk-p { font-size: .8125em; line-height: 1.55; }
.mk-table--pred thead th { background: var(--app-series); color: #fff; }
.mk-table--pred tbody tr:nth-child(even) { background: #F8FAFC; }
.mk-scen { display: grid; gap: .35em; }
.mk-scen li { font-size: .8125em; }
.mk-scen b { display: inline-block; min-inline-size: 5.5em; color: var(--app-teal-ink); }
.mk--m2 .mk-modal { inset-block-start: 11.75em; inset-inline: 15.5em auto; inline-size: 38.5em; }
.mk--m2 .mk-scrim { background: rgb(15 23 42 / .42); }
.mk-swatch--fc { background: var(--app-up); margin-inline-start: .75em; }
.mk--m3 .mk-modal { inset-block-start: 12.5em; inset-inline: 13em 8em; }
.mk-insights { display: grid; gap: .5em; }
.mk-insights li { display: flex; align-items: center; gap: .75em; padding: .65em .85em; border-radius: 8px; background: var(--app-ai-bg); font-size: .875em; }
.mk-ins__i { display: grid; place-items: center; inline-size: 2em; block-size: 2em; border-radius: 6px; background: #fff; color: var(--app-ai); flex: none; }
.mk-ins__v { margin-inline-start: auto; color: var(--app-ai); white-space: nowrap; }
.mk-recs { display: grid; gap: .4em; counter-reset: rec; }
.mk-recs li { position: relative; padding-inline-start: 1.75em; font-size: .8125em; line-height: 1.5; counter-increment: rec; }
.mk-recs li::before { content: counter(rec); position: absolute; inset-inline-start: 0; inset-block-start: .1em; display: grid; place-items: center; inline-size: 1.35em; block-size: 1.35em; border-radius: 50%; background: var(--app-teal-bg); color: var(--app-teal-ink); font-size: .85em; font-weight: 700; }

/* ---------- Ask dots chat (M4) ---------- */
.mk-chat {
  position: absolute; inset-block: .75em; inset-inline-end: .75em; inline-size: 27em;
  display: flex; flex-direction: column;
  background: #fff; border-radius: 12px; border: 1px solid var(--app-border);
  box-shadow: 0 20px 50px rgb(15 23 42 / .28);
  overflow: hidden;
}
.mk-chat__head { display: flex; align-items: center; justify-content: center; gap: .6em; padding: .9em 1em; background: linear-gradient(100deg, var(--app-header-1), var(--app-header-2)); color: #fff; position: relative; }
.mk-chat__badge { display: grid; place-items: center; inline-size: 1.9em; block-size: 1.9em; border-radius: 6px; background: var(--app-glass); }
.mk-chat__title { font-size: 1em; font-weight: 600; }
.mk-chat__x { position: absolute; inset-inline-end: 1em; display: grid; place-items: center; inline-size: 1.75em; block-size: 1.75em; border-radius: 6px; background: var(--app-glass); }
.mk-chat__log { flex: 1; display: flex; flex-direction: column; gap: .8em; padding: 1em; background: #FAFBFC; overflow: hidden; }
.mk-msg { display: grid; gap: .3em; max-inline-size: 88%; padding: .7em .9em; border-radius: 12px; }
.mk-msg p { font-size: .8125em; line-height: 1.5; }
.mk-msg--bot { justify-self: start; background: #fff; border: 1px solid var(--app-border); border-end-start-radius: 4px; }
.mk-msg--user { align-self: flex-end; background: var(--app-teal); color: #fff; border-end-end-radius: 4px; }
.mk-msg--answer { max-inline-size: 96%; gap: .6em; }
.mk-msg__time { font-size: .6875em; color: var(--app-muted); justify-self: end; }
.mk-msg--user .mk-msg__time { color: rgb(255 255 255 / .9); }
.mk-answer { display: grid; gap: .5em; justify-items: start; padding: .6em .7em .3em; border-radius: 8px; background: var(--app-bg); }
.mk-askbars { inline-size: 18.75em; }
.mk-msg .mk-source, .mk-source { display: flex; align-items: center; gap: .4em; font-size: .6875em; color: var(--app-muted); }
.mk-chat__input { display: flex; align-items: center; gap: .5em; padding: .8em 1em; border-block-start: 1px solid var(--app-border); }
.mk-chat__field { flex: 1; padding: .7em .9em; border: 1.5px solid var(--app-teal); border-radius: 8px; font-size: .8125em; color: var(--app-muted); }
.mk-chat__send, .mk-chat__mic { display: grid; place-items: center; inline-size: 2.4em; block-size: 2.4em; border-radius: 8px; }
.mk-chat__send { background: var(--app-teal); color: #fff; }
.mk-chat__mic { color: var(--app-muted); border: 1px solid var(--app-border); }

/* ---------- Dashboard Builder (M5) ---------- */
.mk-builder {
  display: grid;
  grid-template-columns: 16em minmax(0, 1fr);
  grid-template-rows: 4em minmax(0, 1fr);
  block-size: 46.875em;
  background: #fff;
}
.mk-bhead { grid-column: 1 / -1; display: flex; align-items: center; gap: .8em; padding-inline: 1.25em; border-block-end: 1px solid var(--app-border); }
.mk-bhead__icon { display: grid; place-items: center; inline-size: 2.2em; block-size: 2.2em; border-radius: 8px; background: var(--app-teal-bg); color: var(--app-teal); }
.mk-bhead__title { font-size: .9375em; font-weight: 700; }
.mk-bhead__sub { font-size: .6875em; color: var(--app-muted); }
.mk-bhead__actions { margin-inline-start: auto; display: flex; align-items: center; gap: 1em; }
.mk-toggle-row { display: inline-flex; align-items: center; gap: .5em; font-size: .75em; font-weight: 600; }
.mk-switch { position: relative; inline-size: 2.6em; block-size: 1.5em; border-radius: 999px; background: #CBD2DC; }
.mk-switch::after { content: ""; position: absolute; inset-block-start: .2em; inset-inline-start: .2em; inline-size: 1.1em; block-size: 1.1em; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgb(0 0 0 / .2); }
.mk-switch.is-on { background: var(--app-up); }
.mk-switch.is-on::after { inset-inline-start: 1.3em; }
.mk-lib { display: flex; flex-direction: column; gap: .6em; padding: .9em; border-inline-end: 1px solid var(--app-border); background: #FBFCFD; overflow: hidden; }
.mk-lib__head { display: flex; align-items: center; justify-content: space-between; color: var(--app-muted); }
.mk-lib__title { font-size: .6875em; font-weight: 700; letter-spacing: .08em; color: var(--app-text); }
.mk-search { display: flex; align-items: center; gap: .5em; padding: .5em .75em; border: 1px solid var(--app-border); border-radius: 999px; background: #fff; color: var(--app-muted); }
.mk-search span { font-size: .75em; }
.mk-lib__group { display: grid; gap: .45em; }
.mk-lib__g { display: flex; align-items: center; gap: .4em; color: var(--app-text); }
.mk-lib__g span { font-size: .75em; font-weight: 600; margin-inline-end: auto; }
.mk-lib__g .mk-i { color: var(--app-teal); }
.mk-lib__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .4em; }
.mk-tilew { display: grid; justify-items: center; gap: .2em; padding: .4em .3em; border: 1px solid var(--app-border); border-radius: 8px; background: #fff; color: var(--app-series); }
.mk-tilew .mk-i { inline-size: 1.3em; block-size: 1.3em; }
.mk-tilew span { font-size: .6875em; color: var(--app-text); }
.mk-board { display: flex; flex-direction: column; min-block-size: 0; background: var(--app-bg); background-image: radial-gradient(#D7DDE6 1px, transparent 1px); background-size: 1.25em 1.25em; }
.mk-board__bar { display: flex; align-items: center; gap: .75em; padding: .7em 1em; background: #fff; border-block-end: 1px solid var(--app-border); color: var(--app-muted); }
.mk-zoom { margin-inline-start: auto; display: flex; align-items: center; gap: .6em; padding: .3em .6em; border: 1px solid var(--app-border); border-radius: 6px; }
.mk-zoom span { font-size: .75em; color: var(--app-text); font-weight: 600; }
.mk-board__grid { flex: 1; display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); grid-template-rows: auto auto; gap: 1em; padding: 1em; align-content: start; }
.mk-edit { position: relative; background: #fff; border: 1.5px dashed #AFC3DD; border-radius: 10px; min-inline-size: 0; }
.mk-edit--selected { border: 2px solid var(--app-series); box-shadow: 0 0 0 4px rgb(47 111 192 / .15); }
.mk-edit--channels { grid-column: 1 / -1; }
.mk-edit__head { display: flex; align-items: center; gap: .45em; padding: .6em .8em; border-block-end: 1px solid var(--app-border); color: var(--app-series); }
.mk-i--grip { color: #9AA3B2; }
.mk-edit__tools { display: flex; gap: .5em; color: var(--app-muted); }
.mk-edit__body { padding: .6em .9em .8em; }
.mk-handle { position: absolute; inset-block-end: -.4em; inset-inline-end: -.4em; inline-size: .8em; block-size: .8em; border-radius: 2px; background: var(--app-series); border: 2px solid #fff; }
.mk-bigkpi { display: grid; place-content: center; justify-items: center; gap: .4em; block-size: calc(100% - 2.6em); }
.mk-bigkpi .mk-kpi__value { font-size: 2.5em; color: var(--app-text); }
.mk-bigkpi .mk-kpi__delta { font-size: .75em; }
.mk-drop { display: none; }

/* ---------- OLAP (M6) ---------- */
.mk-olapbar { display: flex; align-items: center; justify-content: space-between; gap: 1em; }
.mk-select { display: inline-flex; align-items: center; gap: .6em; padding: .45em .8em; border: 1px solid var(--app-border); border-radius: 6px; background: #fff; color: var(--app-muted); }
.mk-select__k { font-size: .6875em; font-weight: 600; letter-spacing: .08em; }
.mk-select b { font-size: .8125em; color: var(--app-text); }
.mk-olap { display: grid; grid-template-columns: minmax(0, 1fr) 24em; gap: 1em; align-items: start; }
.mk-olap__tools { display: flex; align-items: center; gap: .7em; padding: .6em .8em; border-block-end: 1px solid var(--app-border); color: var(--app-muted); }
.mk-olap__spacer { flex: 1; }
.mk-olap__hint { display: flex; align-items: center; gap: .5em; margin: .9em; padding: .7em .9em; border-radius: 6px; background: var(--app-teal-bg); color: var(--app-teal-ink); }
.mk-olap__hint span { font-size: .75em; }
.mk-pivot th, .mk-pivot td { padding-block: .75em; }
.mk-pivot th, .mk-pivot td { font-variant-numeric: tabular-nums; border: 1px solid var(--app-border); }
.mk-pivot td { text-align: end; }
.mk-pivot tbody th { font-weight: 600; background: #FAFBFC; }
.mk-pivot thead th { text-transform: none; letter-spacing: 0; font-size: .75em; color: var(--app-text); background: #F1F5F9; }
.mk-pivot thead th:not(:first-child) { text-align: end; }
.mk-pivot .mk-pivot__dim { text-align: center; color: var(--app-teal-ink); background: var(--app-teal-bg); }
.mk-pivot .mk-pivot__corner { color: var(--app-muted); background: #F8FAFC; }
.mk-pivot__tot { font-weight: 600; background: #F8FAFC; }
.mk-pivot__grand th, .mk-pivot__grand td { font-weight: 700; background: var(--app-teal-bg); color: var(--app-teal-ink); }
.mk-fields { box-shadow: 0 12px 32px rgb(15 23 42 / .12); }
.mk-fields__head { display: flex; align-items: center; padding: .7em 1em; border-block-end: 1px solid var(--app-border); }
.mk-fields__body { display: grid; grid-template-columns: 9.5em minmax(0, 1fr); gap: .6em; padding: .8em; }
.mk-fields__all { border: 1px solid var(--app-border); border-radius: 6px; padding: .5em; }
.mk-fields__all ul { display: grid; gap: .1em; margin-block-start: .3em; }
.mk-fields__all li { display: flex; align-items: center; gap: .5em; padding: .3em .2em; font-size: .6875em; }
.mk-fields__all li.is-on { font-weight: 600; color: var(--app-teal-ink); }
.mk-cb { display: grid; place-items: center; inline-size: 1.25em; block-size: 1.25em; border: 1.5px solid #9AA3B2; border-radius: 3px; color: #fff; }
.is-on > .mk-cb { background: var(--app-teal); border-color: var(--app-teal); }
.mk-zones { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5em; }
.mk-zone { display: grid; align-content: start; gap: .45em; min-block-size: 5.5em; padding: .5em; border: 1px solid var(--app-border); border-radius: 6px; }
.mk-zone__h { display: flex; align-items: center; gap: .35em; font-size: .6875em; font-weight: 600; color: var(--app-muted); }
.mk-zone__empty { font-size: .6875em; color: var(--app-muted); text-align: center; padding-block: .6em; }
.mk-pill { justify-self: start; padding: .3em .6em; border-radius: 4px; background: var(--app-teal); color: #fff; font-size: .6875em; font-weight: 600; }

/* ---------- Scorecard (M7) ---------- */
.mk-scoretop { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.9fr); gap: 1em; }
.mk-overall__body { display: flex; align-items: center; justify-content: center; gap: 1.5em; padding: 1em; }
.mk-status { display: grid; gap: .5em; }
.mk-status li { display: flex; align-items: center; gap: .5em; padding: .45em .8em; border-radius: 6px; background: var(--app-bg); font-size: .75em; color: var(--app-muted); }
.mk-status b { font-size: 1.25em; color: var(--app-text); }
.mk-sdot { inline-size: .7em; block-size: .7em; border-radius: 50%; background: #8B94A3; }
.mk-sdot--ok { background: var(--app-up); }
.mk-sdot--risk { background: #D97706; }
.mk-persp__head { display: flex; align-items: center; gap: .8em; padding: .8em 1em; border-block-end: 1px solid var(--app-border); }
.mk-persp__head > div { margin-inline-end: auto; }
.mk-persp__icon { display: grid; place-items: center; inline-size: 2.3em; block-size: 2.3em; border-radius: 8px; background: var(--app-teal); color: #fff; }
.mk-persp__list li { display: grid; grid-template-columns: minmax(0, 1fr) 16em 4em 4.5em 1.2em; align-items: center; gap: 1em; padding: .5em 1.25em; border-block-end: 1px solid var(--app-border); color: var(--app-muted); }
.mk-persp__list li:last-child { border-block-end: 0; }
.mk-persp__n { font-size: .8125em; font-weight: 600; color: var(--app-text); }
.mk-bar-track { block-size: .55em; border-radius: 999px; background: var(--app-grid); overflow: hidden; }
.mk-bar-fill { display: block; block-size: 100%; border-radius: 999px; background: var(--app-up); }
.mk-bar-fill--88 { inline-size: 88%; }
.mk-bar-fill--84 { inline-size: 84%; }
.mk-bar-fill--79 { inline-size: 79%; }
.mk-bar-fill--76 { inline-size: 76%; }
.mk-pct { justify-self: center; padding: .3em .5em; border-radius: 4px; background: var(--app-up-bg); color: var(--app-up); font-size: .75em; font-weight: 700; }
.mk-weight { display: grid; justify-items: center; }
.mk-weight span { font-size: .6875em; letter-spacing: .06em; }
.mk-weight b { font-size: .8125em; color: var(--app-text); }

/* ---------- Semantic Model (M8) ---------- */
.mk-canvas--model { grid-template-columns: 38.5em minmax(0, 1fr); align-items: start; }
.mk-diagram {
  position: relative; block-size: 32.5em;
  border: 1px solid var(--app-border); border-radius: 8px;
  background-color: #fff;
  background-image: radial-gradient(#DCE2EA 1px, transparent 1px); background-size: 1em 1em;
}
.mk-links { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; }
.mk[dir="rtl"] .mk-links { transform: scaleX(-1); }
.mk-link { fill: none; stroke: #8FA9CC; stroke-width: 1.75; }
.mk-card-lbl { fill: var(--app-teal-ink); font-weight: 700; font-family: inherit; }
.mk-ent { position: absolute; inline-size: 10em; background: #fff; border: 1px solid #C9D3E1; border-radius: 8px; box-shadow: 0 4px 12px rgb(15 23 42 / .08); overflow: hidden; }
.mk-ent__h { display: flex; align-items: center; gap: .4em; padding: .5em .7em; background: var(--app-teal-bg); color: var(--app-teal-ink); }
.mk-ent__h span { font-size: .75em; font-weight: 700; }
.mk-ent__h .mk-ent__tag { margin-inline-start: auto; padding: .1em .4em; border-radius: 3px; background: var(--app-teal); color: #fff; font-size: .6875em; letter-spacing: .06em; }
.mk-ent ul { padding: .35em .7em .5em; display: grid; gap: .1em; }
.mk-ent li { display: flex; align-items: center; gap: .35em; font-size: .6875em; color: var(--app-text); }
.mk-ent li.is-key { font-weight: 600; }
.mk-ent li .mk-i { inline-size: 1em; block-size: 1em; color: #B7791F; }
.mk-ent--fact { inline-size: 10em; border: 2px solid var(--app-teal); box-shadow: 0 8px 20px rgb(14 116 144 / .18); }
.mk-ent--fact .mk-ent__h { background: var(--app-teal); color: #fff; }
.mk-ent--fact .mk-ent__tag { background: #fff; color: var(--app-teal-ink); }
.mk-ent--fact { inset-inline-start: 14.5em; inset-block-start: 10.5em; }
.mk-ent--cust { inset-inline-start: 1.25em; inset-block-start: 1.75em; }
.mk-ent--prod { inset-inline-end: 1.25em; inset-block-start: 1.75em; }
.mk-ent--reg { inset-inline-start: 1.25em; inset-block-end: 2.5em; }
.mk-ent--cal { inset-inline-end: 1.25em; inset-block-end: 1.5em; }
.mk .mk-rel { display: none; }
.mk-measures__list { display: grid; }
.mk-measures__list li { display: grid; gap: .3em; padding: .75em 1em; border-block-end: 1px solid var(--app-border); }
.mk-measure__n { display: flex; align-items: center; gap: .45em; font-size: .8125em; font-weight: 600; }
.mk-measure__n .mk-i { color: var(--app-teal); }
.mk-measures .mk-code { padding: .35em .6em; border-radius: 4px; background: var(--app-bg); }
.mk-measures__foot { display: flex; align-items: center; gap: .45em; padding: .8em 1em; font-size: .75em; color: var(--app-up); font-weight: 600; }

/* ---------- Data Source dialog (M11) ---------- */
.mk--m11 .mk-shell { block-size: 56.25em; }
.mk-canvas--list .mk-table td { color: var(--app-text); }
.mk-modal--ds { inset-inline: 17em 6em; inset-block-start: 12.5em; }
.mk-dstiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .75em; margin-block-start: .25em; }
.mk-dstile { position: relative; display: flex; align-items: center; gap: .7em; padding: .9em 1em; border: 1.5px solid var(--app-border); border-radius: 8px; color: var(--app-series); }
.mk-dstile .mk-i { inline-size: 1.6em; block-size: 1.6em; }
.mk-dstile span { font-size: .8125em; font-weight: 600; color: var(--app-text); }
.mk-dstile.is-selected { border-color: var(--app-teal); background: var(--app-teal-bg); box-shadow: 0 0 0 3px rgb(14 116 144 / .15); }
.mk-dstile__check { position: absolute; inset-block-start: 50%; margin-block-start: -.7em; inset-inline-end: .9em; display: grid; place-items: center; inline-size: 1.4em; block-size: 1.4em; border-radius: 50%; background: var(--app-teal); color: #fff; }
.mk-dstile .mk-dstile__check { color: #fff; }
.mk-dstile .mk-dstile__check .mk-i { inline-size: .9em; block-size: .9em; stroke-width: 3; }
.mk-form { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .75em; margin-block-start: .25em; }
.mk-field { display: grid; gap: .35em; }
.mk-field__l { font-size: .75em; font-weight: 600; color: var(--app-text); }
.mk-field__v { padding: .6em .75em; border: 1px solid #A3ADBD; border-radius: 6px; font-size: .8125em; }

/* ---------- Data Views (M12) ---------- */
.mk-viewbar { display: flex; align-items: center; justify-content: space-between; }
.mk-search--wide { inline-size: 22em; border-radius: 8px; }
.mk-viewtoggle { display: flex; border: 1px solid var(--app-border); border-radius: 6px; overflow: hidden; background: #fff; color: var(--app-muted); }
.mk-viewtoggle span { display: grid; place-items: center; padding: .4em .5em; }
.mk-viewtoggle .is-on { background: var(--app-teal); color: #fff; }
.mk-views { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1em; }
.mk-view { display: grid; justify-items: start; gap: .55em; padding: 1em; }
.mk-view__n { font-size: .9375em; font-weight: 700; }
.mk-view__btns { display: flex; gap: .5em; margin-block-start: .3em; }

/* ---------- MCP split (M13) ---------- */
.mk-split { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 1.5em; block-size: 46.875em; padding: 1.5em; background: linear-gradient(135deg, #E9EEF5, #F5F7FA); }
.mk-split__app, .mk-split__ai { display: flex; flex-direction: column; min-block-size: 0; border-radius: 12px; overflow: hidden; box-shadow: 0 16px 40px rgb(15 23 42 / .16); }
.mk-split__app { background: var(--app-bg); border: 1px solid var(--app-border); }
.mk-mini-top { display: flex; align-items: center; justify-content: space-between; padding-inline-end: 1em; background: #fff; border-block-end: 1px solid var(--app-border); }
.mk-mini-top .mk-logo { border-block-end: 0; }
.mk-split__body { padding: 1.25em; }
.mk-mcp { display: grid; }
.mk-mcp__row { display: flex; align-items: center; justify-content: space-between; gap: 1em; padding: 1.1em 1.25em; border-block-end: 1px solid var(--app-border); }
.mk-mcp__h { font-size: .9375em; font-weight: 700; margin-block-end: .2em; }
.mk-mcp__sec { display: grid; gap: .5em; padding: 1em 1.25em; border-block-end: 1px solid var(--app-border); }
.mk-mcp__sec:last-child { border-block-end: 0; }
.mk-endpoint { display: flex; align-items: center; gap: .6em; }
.mk-endpoint .mk-code { flex: 1; padding: .65em .8em; border: 1px solid #A3ADBD; border-radius: 6px; background: var(--app-bg); font-size: .8125em; direction: ltr; text-align: start; }
.mk-reach { display: flex; flex-wrap: wrap; gap: .5em; }
.mk-reach li { display: inline-flex; align-items: center; gap: .4em; padding: .45em .75em; border-radius: 999px; background: var(--app-up-bg); color: var(--app-up); font-size: .75em; font-weight: 600; }
.mk-split__ai { background: #fff; border: 1px solid #D4D8DE; }
.mk-aiw__head { position: relative; display: flex; align-items: center; justify-content: center; padding: .85em 1em; background: #EEF0F3; border-block-end: 1px solid #D4D8DE; }
.mk-aiw__dots { position: absolute; inset-inline-start: 1em; display: flex; gap: .4em; }
.mk-aiw__dots span { inline-size: .75em; block-size: .75em; border-radius: 50%; background: #C3C8D0; }
.mk-aiw__title { font-size: .875em; font-weight: 600; color: #374151; }
.mk-aiw__log { flex: 1; display: flex; flex-direction: column; gap: 1em; padding: 1.25em; }
.mk-aiw__conn { align-self: center; display: inline-flex; align-items: center; gap: .45em; padding: .4em .8em; border-radius: 999px; border: 1px solid #D4D8DE; background: #F7F8FA; font-size: .75em; font-weight: 600; color: #374151; }
.mk-msg--grey { background: #E9EBEF; color: var(--app-text); }
.mk-aiw__reply { display: grid; gap: .6em; max-inline-size: 92%; }
.mk-aiw__reply > p:first-child { font-size: .9375em; line-height: 1.55; }
.mk-aiw__input { display: flex; align-items: center; gap: .6em; padding: 1em 1.25em; border-block-start: 1px solid #E5E7EB; }
.mk-aiw__input .mk-chat__field { border-color: #C3C8D0; border-radius: 999px; }
.mk-aiw__send { display: grid; place-items: center; inline-size: 2.4em; block-size: 2.4em; border-radius: 50%; background: #4B5563; color: #fff; }

/* ---------- Crop: container under 640 px ---------- */
@container (max-width: 639px) {
  .mk > * { font-size: clamp(13px, 100cqi / 21, 16px); }
  .mk .mk-crop { display: block; }
  .mk .mk-full,
  .mk .mk-side, .mk .mk-top, .mk .mk-crumbs, .mk .mk-subtitle, .mk .mk-band__side,
  .mk .mk-w:not([data-keep]) { display: none; }
  .mk-shell, .mk-builder, .mk-split, .mk--m11 .mk-shell { display: block; block-size: auto; }
  .mk-band { padding: .8em 1em; }
  .mk-title { font-size: 1.125em; }
  .mk-canvas { padding: .75em; gap: .75em; }
  .mk-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75em; }
  .mk-kpi__value { font-size: 1.25em; }
  .mk-row, .mk-scoretop, .mk-olap, .mk-canvas--model { grid-template-columns: minmax(0, 1fr); }
  .mk-card__head { flex-wrap: wrap; }
  .mk-chips { display: none; }

  /* Modals become plain cards */
  .mk-modal, .mk-modal--ds { position: static; margin: .75em; box-shadow: 0 4px 16px rgb(15 23 42 / .12); border: 1px solid var(--app-border); }
  .mk-modal__head { padding: .75em 1em; }
  .mk-modal__body { padding: .75em 1em 1em; }
  .mk-modal__title { font-size: .875em; }
  .mk-table th, .mk-table td { padding: .5em .5em; white-space: normal; }
  .mk--m2 .mk-modal { inline-size: auto; }
  .mk-table--pred th:nth-child(4), .mk-table--pred td:nth-child(4) { display: none; }
  .mk-insights li { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: .75em; row-gap: .2em; font-size: .8125em; }
  .mk-ins__i { grid-row: span 2; align-self: start; }
  .mk-ins__v { margin-inline-start: 0; }
  .mk--m2 .mk-shell, .mk--m3 .mk-shell { display: block; }
  .mk--m2 .mk-band, .mk--m3 .mk-band, .mk--m4 .mk-band, .mk--m11 .mk-band, .mk--m11 .mk-canvas { display: none; }
  .mk--m2 .mk-canvas, .mk--m3 .mk-canvas, .mk--m4 .mk-canvas { display: none; }

  /* Ask dots panel fills the crop */
  .mk-chat { position: static; inline-size: auto; margin: .75em; }
  .mk-askbars { inline-size: 100%; }

  /* Builder: library + one widget */
  .mk-bhead { padding: .6em .9em; }
  .mk-bhead__actions .mk-btn { display: none; }
  .mk-lib { border-inline-end: 0; border-block-end: 1px solid var(--app-border); }
  .mk-lib__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .mk-lib__group:nth-of-type(n+3) { display: none; }
  .mk-board__grid { display: block; }

  /* OLAP */
  .mk-olap__tools .mk-btn, .mk-olap__tools .mk-select { display: none; }
  .mk-pivot th, .mk-pivot td { font-size: .6875em; padding: .45em .4em; }
  .mk-pivot__corner { white-space: normal; }

  /* Scorecard */
  .mk-overall__body { gap: 1em; }
  .mk-ring { inline-size: 7.5em; block-size: 7.5em; }
  .mk-persp__head .mk-btn { display: none; }
  .mk-persp__list li { grid-template-columns: minmax(0, 1fr) 3.5em; row-gap: .4em; padding: .65em .9em; }
  .mk-persp__list .mk-bar-track { grid-column: 1 / -1; grid-row: 2; }
  .mk-persp__list .mk-weight, .mk-persp__list li > .mk-i { display: none; }

  /* Semantic Model: stacked tables, relationship chips instead of lines */
  .mk-diagram { block-size: auto; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6em; padding: .75em; }
  .mk-links { display: none; }
  .mk-ent { position: static; inline-size: auto; }
  .mk-ent--fact { grid-column: 1 / -1; }
  .mk-ent--fact ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mk-ent li:nth-child(n+3) { display: none; }
  .mk-ent--fact li:nth-child(n+3) { display: flex; }
  .mk .mk-rel { display: block; padding: .35em .7em; border-block-start: 1px solid var(--app-border); font-size: .6875em; font-weight: 600; color: var(--app-teal-ink); }

  /* Data Source tiles */
  .mk-dstiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5em; }
  .mk-dstile { padding-block: .7em; padding-inline: .7em 2.2em; }
  .mk-dstile__check { inset-block-start: .4em; margin-block-start: 0; inset-inline-end: .4em; }
  .mk--m11 .mk-modal__foot { display: none; }

  /* Data Views */
  .mk-views { grid-template-columns: minmax(0, 1fr); gap: .75em; }

  /* MCP: chat only */
  .mk-split { padding: .75em; background: none; }
  .mk-aiw__log { padding: 1em; }
}

/* ---------- Phone (M10): designed at 390 px wide, never cropped ---------- */
.mk--m10 { background: transparent; }
.mk--m10 > * { font-size: calc(100cqi / 24.375); }
.mk-phone { padding: .5em; border-radius: 3em; background: #111827; box-shadow: inset 0 0 0 2px #374151; }
.mk-phone__screen { position: relative; display: flex; flex-direction: column; aspect-ratio: 374 / 828; border-radius: 2.5em; background: var(--app-bg); overflow: hidden; }
.mk-phone__status { display: flex; align-items: center; justify-content: space-between; padding: .9em 1.6em .3em; background: #fff; }
.mk-phone__status b { font-size: .875em; }
.mk-phone__island { inline-size: 6.5em; block-size: 1.9em; border-radius: 999px; background: #111827; }
.mk-phone__sig { display: flex; align-items: flex-end; gap: .15em; }
.mk-phone__sig span { inline-size: .25em; block-size: .5em; border-radius: 1px; background: var(--app-text); }
.mk-phone__sig span:nth-child(2) { block-size: .7em; }
.mk-phone__sig span:nth-child(3) { block-size: .9em; }
.mk-phone__bar { display: flex; align-items: center; gap: .75em; padding: .5em 1em .7em; background: #fff; border-block-end: 1px solid var(--app-border); }
.mk-phone__bar .mk-top__menu { margin-inline-end: 0; }
.mk-logo--sm { block-size: auto; padding: 0; border: 0; margin-inline-end: auto; }
.mk-phone__band { padding: .9em 1.1em 1.1em; color: #fff; background: linear-gradient(100deg, var(--app-header-1), var(--app-header-2)); }
.mk-phone__band .mk-crumbs { margin-block-end: .3em; font-size: .75em; }
.mk-phone__body { display: grid; gap: .75em; padding: .9em; }
.mk-phone__ring { display: flex; align-items: center; justify-content: space-around; padding: 1em .75em; }
.mk-phone__ring .mk-ring { inline-size: 8em; block-size: 8em; }
.mk-phone__kpis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75em; }
.mk-phone__kpis .mk-kpi { padding: .8em .5em; }
.mk-phone__kpis .mk-kpi__value { font-size: 1.375em; }
.mk-phone__chart .mk-card__body { padding: .5em .6em .6em; }
.mk-phone__home { position: absolute; inset-block-end: .6em; inset-inline-start: 50%; inline-size: 8em; block-size: .3em; margin-inline-start: -4em; border-radius: 999px; background: #111827; }

/* ---------- Gallery page (mockups/gallery.html, not deployed) ---------- */
.mk-gallery { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s6, 48px); padding-block: var(--s6, 48px); }
.mk-gallery__item { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s4, 24px); }
.mk-gallery__item > h2 { font-size: 1.25rem; }
.mk-gallery__full { inline-size: 100%; max-inline-size: 1200px; }
.mk-gallery__crop { inline-size: 375px; max-inline-size: 100%; }
.mk-gallery__phone { inline-size: 390px; max-inline-size: 100%; }
.mk-gallery figure { margin: 0; }
.mk-gallery figcaption { margin-block-start: 8px; font-size: .875rem; color: var(--c-muted, #475569); }

/* ---------- F11: fill the empty lower halves (M10 phone list, M13 shorter split) ---------- */
.mk-phone__persp { padding: .7em .8em .8em; }
.mk-phone__persp ul { list-style: none; display: grid; gap: .55em; margin-block-start: .5em; }
.mk-phone__persp li { display: grid; grid-template-columns: minmax(0, 1fr) auto; row-gap: .3em; align-items: center; }
.mk-phone__persp .mk-bar-track { grid-column: 1 / -1; }
.mk-phone__pv { font-size: .8125em; font-weight: 700; color: var(--app-text); }
.mk--m13 .mk-split { block-size: 38em; }
@container (max-width: 639px) { .mk--m13 .mk-split { block-size: auto; } }

/* F5: longer Arabic units ("مليون") need a smaller KPI value so the unit stays on one line */
.mk--m9 .mk-kpi__value { font-size: 1.375em; white-space: nowrap; }
@container (max-width: 639px) { .mk--m9 .mk-kpi__value { font-size: 1.25em; } }