/* MK Business OS — "Obsidian Atelier" design system (owner-approved concepts, 2026-10-15:
   ui-reimagination-skill / mk-business-os / 2026-10-15-obsidian-atelier).
   Shared by every page: tokens, type, motion tokens, base controls and the top bar.
   Warm lacquer and onyx, one bronze accent, cream ink. Colour carries meaning only together with a word or an icon. */
@font-face { font-family: "Manrope"; src: url(/vendor/fonts/Manrope-Variable.ttf) format("truetype"); font-weight: 200 800; font-display: swap; }
@font-face { font-family: "Readex Pro"; src: url(/vendor/fonts/readex-pro-arabic.woff2) format("woff2"); font-weight: 160 700; font-display: swap;
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-08FF, U+200C-200E, U+FB50-FDFF, U+FE70-FEFC; }

:root {
  /* Light: cream paper, warm white cards, deep brown ink, darker bronze so small text passes AA. */
  --bg: #f5efe6; --bg-deep: #ede5d9; --surface: #fffcf7; --surface-2: #f4ede3; --raised: #ffffff;
  --ink: #2a2119; --ink-2: #4b3e33; --muted: #75685b; --faint: #a5978a;
  --line: rgba(64, 46, 30, .13); --line-2: rgba(64, 46, 30, .22); --hair: rgba(64, 46, 30, .08);
  --accent: #8a5d34; --accent-strong: #74491f; --accent-soft: rgba(138, 93, 52, .10); --accent-line: rgba(138, 93, 52, .45); --on-accent: #fffaf2;
  --ok: #3f7a4c; --ok-soft: rgba(63, 122, 76, .11); --warn: #9a6512; --warn-soft: rgba(154, 101, 18, .11); --danger: #b23b2a; --danger-soft: rgba(178, 59, 42, .10);
  --shadow-1: 0 1px 2px rgba(42, 33, 25, .06), 0 6px 18px rgba(42, 33, 25, .05);
  --shadow-2: 0 2px 6px rgba(42, 33, 25, .07), 0 24px 60px rgba(42, 33, 25, .14);
  --edge: inset 0 1px 0 rgba(255, 255, 255, .7);
  --scrim: rgba(42, 33, 25, .32);
  color-scheme: light;

  --font: "Manrope", "Readex Pro", -apple-system, BlinkMacSystemFont, "Segoe UI Variable Text", "Segoe UI", system-ui, sans-serif;
  --font-ar: "Readex Pro", "Manrope", "Segoe UI", system-ui, sans-serif;
  --mono: ui-monospace, "Cascadia Mono", Consolas, monospace;
  --r-s: 8px; --r-m: 12px; --r-l: 16px; --r-xl: 20px;

  /* Motion: weighted, decelerating, never bouncy. Every duration below is a token; reduced motion collapses them. */
  --ease-out: cubic-bezier(.16, 1, .3, 1);       /* arrivals: fast start, long settle */
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);   /* morphs between two resting places */
  --ease-exit: cubic-bezier(.4, 0, 1, 1);        /* departures get out of the way */
  --t-press: 120ms; --t-ui: 200ms; --t-step: 280ms; --t-close: 240ms; --t-nav: 420ms; --t-sheet: 420ms; --t-theme: 600ms; --t-breathe: 2.4s;
  --stagger: 40ms;
}
:root[data-theme="dark"] {
  /* Dark (the hero): warm lacquer canvas, onyx surfaces with a faint edge light, bronze, cream ink. */
  --bg: #1d1a17; --bg-deep: #171411; --surface: #24201c; --surface-2: #2b2621; --raised: #312b25;
  --ink: #efe5d6; --ink-2: #d2c5b3; --muted: #a09382; --faint: #74695d;
  --line: rgba(239, 229, 214, .11); --line-2: rgba(239, 229, 214, .19); --hair: rgba(239, 229, 214, .07);
  --accent: #c99a6c; --accent-strong: #ddb388; --accent-soft: rgba(201, 154, 108, .12); --accent-line: rgba(201, 154, 108, .55); --on-accent: #1d1a17;
  --ok: #93c19a; --ok-soft: rgba(147, 193, 154, .12); --warn: #e3b866; --warn-soft: rgba(227, 184, 102, .12); --danger: #ec8a74; --danger-soft: rgba(236, 138, 116, .12);
  --shadow-1: 0 1px 0 rgba(255, 240, 220, .03) inset, 0 10px 28px rgba(0, 0, 0, .35);
  --shadow-2: 0 2px 8px rgba(0, 0, 0, .45), 0 30px 80px rgba(0, 0, 0, .55);
  --edge: inset 0 1px 0 rgba(255, 236, 210, .05);
  --scrim: rgba(10, 8, 6, .55);
  color-scheme: dark;
}
/* Before os.js sets data-theme, a dark-mode computer already paints dark: no light flash on first load. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    /* Dark (the hero): warm lacquer canvas, onyx surfaces with a faint edge light, bronze, cream ink. */
    --bg: #1d1a17; --bg-deep: #171411; --surface: #24201c; --surface-2: #2b2621; --raised: #312b25;
    --ink: #efe5d6; --ink-2: #d2c5b3; --muted: #a09382; --faint: #74695d;
    --line: rgba(239, 229, 214, .11); --line-2: rgba(239, 229, 214, .19); --hair: rgba(239, 229, 214, .07);
    --accent: #c99a6c; --accent-strong: #ddb388; --accent-soft: rgba(201, 154, 108, .12); --accent-line: rgba(201, 154, 108, .55); --on-accent: #1d1a17;
    --ok: #93c19a; --ok-soft: rgba(147, 193, 154, .12); --warn: #e3b866; --warn-soft: rgba(227, 184, 102, .12); --danger: #ec8a74; --danger-soft: rgba(236, 138, 116, .12);
    --shadow-1: 0 1px 0 rgba(255, 240, 220, .03) inset, 0 10px 28px rgba(0, 0, 0, .35);
    --shadow-2: 0 2px 8px rgba(0, 0, 0, .45), 0 30px 80px rgba(0, 0, 0, .55);
    --edge: inset 0 1px 0 rgba(255, 236, 210, .05);
    --scrim: rgba(10, 8, 6, .55);
    color-scheme: dark;
  }
}
@media (prefers-reduced-motion: reduce) {
  :root { --t-press: 1ms; --t-ui: 120ms; --t-step: 150ms; --t-close: 120ms; --t-nav: 150ms; --t-sheet: 150ms; --t-theme: 150ms; --stagger: 0ms; }
}

/* ── Base ── */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body { background: var(--bg); color: var(--ink); font: 450 14.5px/1.55 var(--font); -webkit-font-smoothing: antialiased; font-feature-settings: "ss01", "cv11"; }
html[lang="ar"] body { font-family: var(--font-ar); }
button, input, textarea, select { font: inherit; color: inherit; }
a { color: var(--accent); text-decoration: none; }
img { display: block; max-width: 100%; }
[hidden] { display: none !important; }
::selection { background: color-mix(in srgb, var(--accent) 28%, transparent); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
* { scrollbar-width: thin; scrollbar-color: var(--line-2) transparent; }
.num, .tabular { font-variant-numeric: tabular-nums; }
.eyebrow { font-size: 11px; font-weight: 650; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); }
html[lang="ar"] .eyebrow { letter-spacing: 0; font-size: 12.5px; }

/* ── Shared top bar (os.html and the standalone pages) ── */
.atelier-bar { position: sticky; top: 0; z-index: 40; height: 64px; display: flex; align-items: center; gap: 18px; padding: 0 clamp(16px, 3vw, 40px);
  background: color-mix(in srgb, var(--bg) 92%, transparent); border-bottom: 1px solid var(--hair); view-transition-name: atelier-bar; }
.atelier-mark { display: inline-flex; align-items: center; gap: 14px; color: var(--ink); white-space: nowrap; }
.atelier-mark .bar-mark { font: 500 26px/1 Georgia, "Times New Roman", serif; letter-spacing: -.04em; color: var(--accent); background: none; }
.atelier-mark .brand-rule { width: 1px; height: 26px; background: var(--line-2); }
.atelier-mark strong { font-size: 12.5px; font-weight: 600; letter-spacing: .32em; text-transform: uppercase; }

/* ── Cross-document transitions: the bar stays put while the page under it changes ── */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: atelier-out var(--t-close) var(--ease-exit) both; }
::view-transition-new(root) { animation: atelier-in var(--t-nav) var(--ease-out) both; }
@keyframes atelier-out { to { opacity: 0; transform: scale(.992); } }
@keyframes atelier-in { from { opacity: 0; transform: translateY(14px); filter: blur(6px); } }
@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root) { animation-name: atelier-fade-out; }
  ::view-transition-new(root) { animation-name: atelier-fade-in; }
  @keyframes atelier-fade-out { to { opacity: 0; } }
  @keyframes atelier-fade-in { from { opacity: 0; } }
}

/* The top bar built by atelier-page.js: the page's own links sit in the middle as quiet pills. */
.atelier-bar .atelier-links { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; flex: 1; justify-content: center; min-width: 0; }
.atelier-links .brand { display: none; }
.atelier-links a, .atelier-links button { min-height: 40px; padding: 0 14px; display: inline-flex; align-items: center; border-radius: var(--r-s); border: 0; background: transparent; color: var(--ink-2); font: 550 14px var(--font); text-decoration: none; }
.atelier-links a:hover, .atelier-links button:hover:not(:disabled) { background: color-mix(in srgb, var(--ink) 6%, transparent); color: var(--ink); }
.atelier-links button.secondary { border: 1px solid var(--line-2); }
.atelier-tools { display: inline-flex; align-items: center; gap: 4px; margin-inline-start: auto; }
.atelier-tool { min-width: 44px; height: 44px; padding: 0 10px; border: 0; border-radius: var(--r-s); background: transparent; color: var(--ink-2); display: inline-grid; place-items: center; cursor: pointer; font: 500 15px var(--font-ar); }
.atelier-tool:hover { background: color-mix(in srgb, var(--ink) 6%, transparent); color: var(--ink); }
.atelier-tool svg { color: var(--accent); }
.atelier-lang[lang="en"] { font-family: var(--font); }
/* The return control added by companion-bridge.js sits under the bar like the Companion's own back link. */
.companion-return { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; max-width: 1180px; margin: 0 auto; padding: 10px clamp(16px, 3vw, 40px) 0; }
.companion-return .companion-back { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0; border: 0; background: none; color: var(--ink-2); font: 550 14px var(--font); cursor: pointer; }
.companion-return .companion-back::before { content: "←"; color: var(--accent); font-size: 17px; }
html[dir="rtl"] .companion-return .companion-back::before { content: "→"; }
.companion-return .companion-back:hover { color: var(--ink); background: none; }
#companion-action-hint { margin: 0; max-width: 70ch; color: var(--ink-2); padding: 8px 14px; border: 1px solid var(--accent-line); border-radius: var(--r-s); background: var(--accent-soft); }
[data-companion-focus] { outline: 2px solid var(--accent); outline-offset: 5px; scroll-margin-top: 140px; }

.atelier-links a, .atelier-links button { white-space: nowrap; flex: none; }
.atelier-links a[href="/"] { display: none; }
.atelier-tool, .atelier-links a, .atelier-links button { box-shadow: none; }
.topbar .breadcrumb { visibility: hidden; }
@media (max-width: 860px) { .atelier-bar { height: auto; min-height: 64px; flex-wrap: wrap; padding-block: 8px; } .atelier-bar .atelier-links { order: 3; flex-basis: 100%; justify-content: flex-start; overflow-x: auto; flex-wrap: nowrap; } }
@media (max-width: 860px) { .atelier-links a, .atelier-links button, .atelier-tool { min-height: 44px; } }