/*
 * SmartBTN cabinet skin «Future» -- the look of smartbtn.me over the Pulse base (docs/skins/FUTURE.md).
 *
 * ONE layer, loaded after pulse.css and every section stylesheet (layouts/app.blade.php, only when the skin is
 * Future). It never changes Pulse or classic: everything is scoped by html.pulse[data-skin="future"].
 * pulse.css is not touched; it keeps the markup and the component structure, this file re-skins the tokens (--p-*)
 * and the components. Values come from the live site.css (smartbtn.me v=20261019seo): paper #ECE9E3 / #111110,
 * a single red accent #FF4B2B, SF system font, pills, r22 cards without a border, long soft shadows.
 *
 * Parts:  1 tokens (light / dark / system)   2 base type   3 shell   4 components   5 mobile
 *         6 motion + focus                    7 cold-colour overrides: future-cold.css (generated, see ops/scripts/future)
 */

/* ---------- 1. Tokens ---------- */
.pulse[data-skin="future"] {
  --p-font: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Helvetica Neue", Arial, sans-serif;
  --p-mono: "SF Mono", ui-monospace, Menlo, Consolas, monospace;

  --p-bg: #ECE9E3;
  --p-surface: #FFFFFF;
  --p-surface-2: #F4F2EE;
  --p-sidebar: #E3DFD8;
  --p-border: #D3CEC6;
  --p-divider: #E4E0D9;
  --p-seg: #E3DFD8;
  --p-hover: #E3DFD8;
  --p-ink: #141414;
  --p-text: #383531;
  --p-muted: #68635C;
  --p-faint: #68635C;
  --p-chip-neutral: #E3DFD8;

  --p-accent: #FF4B2B;
  --p-accent-hover: #E03A1B;
  --p-accent-soft: rgba(255, 75, 43, .12);
  --p-accent-soft-2: rgba(255, 75, 43, .20);
  --p-accent-ink: #BE2A0E;
  --p-accent-edge: #B8321A;
  --p-on-accent: #FFFFFF;

  --p-primary: #141414;
  --p-primary-hover: #FF4B2B;
  --p-on-primary: #ECE9E3;

  --p-success: #196E3B; --p-success-soft: rgba(46, 158, 91, .12); --p-success-ink: #196E3B; --p-success-dot: #26C266;
  --p-warning: #9C4D00; --p-warning-soft: rgba(156, 77, 0, .10); --p-warning-border: rgba(156, 77, 0, .28); --p-warning-ink: #7A3C00;
  --p-danger: #BE2A0E;  --p-danger-soft: rgba(255, 75, 43, .12);  --p-danger-ink: #9A220B;
  /* no blue: information is ink, the AI voice is the red-soft «суфлёр» of the site's operator app */
  --p-info: #141414;    --p-info-soft: #E3DFD8;    --p-info-ink: #383531;
  --p-ai: #141414;      --p-ai-soft: rgba(255, 75, 43, .08);  --p-ai-ink: #BE2A0E;

  --p-radius-sm: 8px;
  --p-radius: 12px;
  --p-radius-md: 14px;
  --p-radius-lg: 22px;
  --p-radius-xl: 26px;
  --p-radius-pill: 999px;

  --p-shadow-sm: 0 2px 8px rgba(40, 30, 20, .06);
  --p-shadow: 0 20px 50px -24px rgba(40, 30, 20, .22);
  --p-shadow-lg: 0 40px 90px -30px rgba(40, 30, 20, .45);
  --p-shadow-key: 0 6px 0 #CBC5BC, 0 12px 18px -8px rgba(0, 0, 0, .18);
  --p-shadow-cta: 0 10px 24px -8px rgba(255, 75, 43, .55);
  --p-overlay: rgba(12, 12, 12, .62);

  --p-ease: cubic-bezier(.2, .8, .2, 1);
  --p-ease-ui: cubic-bezier(.2, .9, .2, 1);
  --p-dur-fast: .15s;
  --p-dur: .24s;

  --p-fs: 14px;
  /* spacing scale (owner 21.10: rhythm): ONLY these steps in margin / padding / gap of future*.css, ops/scripts/future/check-spacing.py */
  --fx-sp-4: 4px; --fx-sp-8: 8px; --fx-sp-12: 12px; --fx-sp-16: 16px; --fx-sp-24: 24px; --fx-sp-32: 32px; --fx-sp-48: 48px;
  --p-ctl-h: 40px;
  --p-pad-x: var(--fx-sp-32);
  --p-pad-y: var(--fx-sp-24);
  --p-gap: var(--fx-sp-24);
  --p-card-pad: var(--fx-sp-24);
  --p-row-pad: var(--fx-sp-12);
  --p-content-max: 1320px;
  --p-sidebar-w: 264px;
  --p-sidebar-w-collapsed: 68px;
  --p-h1: clamp(28px, 2.6vw, 40px);
  --p-h1-ls: -.035em;
  --p-h2: 20px;
  --p-h3: 16px;
  --p-kicker-ls: .12em;

  color-scheme: light;
}
.pulse[data-skin="future"][data-density="compact"] {
  --p-pad-x: var(--fx-sp-24); --p-pad-y: var(--fx-sp-16); --p-gap: var(--fx-sp-16); --p-card-pad: var(--fx-sp-16); --p-row-pad: var(--fx-sp-8); --p-ctl-h: 34px; --p-fs: 13px;
}

.pulse[data-skin="future"][data-theme="dark"] {
  --p-bg: #111110;
  --p-surface: #1E1E1D;
  --p-surface-2: #1A1A19;
  --p-sidebar: #161615;
  --p-border: #2C2B29;
  --p-divider: #252422;
  --p-seg: #252423;
  --p-hover: #252423;
  --p-ink: #EDEAE4;
  --p-text: #C9C4BC;
  --p-muted: #9A948C;
  --p-faint: #9A948C;
  --p-chip-neutral: #2C2B29;
  --p-accent-soft: rgba(255, 75, 43, .16);
  --p-accent-soft-2: rgba(255, 75, 43, .26);
  --p-accent-ink: #FF765C;
  --p-primary: #EDEAE4;
  --p-primary-hover: #FF4B2B;
  --p-on-primary: #111110;
  --p-success: #4CC27E; --p-success-soft: rgba(76, 194, 126, .14); --p-success-ink: #4CC27E;
  --p-warning: #F0A04B; --p-warning-soft: rgba(240, 160, 75, .12); --p-warning-border: rgba(240, 160, 75, .30); --p-warning-ink: #F0A04B;
  --p-danger: #FF765C; --p-danger-soft: rgba(255, 75, 43, .16); --p-danger-ink: #FF9A86;
  --p-info: #EDEAE4; --p-info-soft: #252423; --p-info-ink: #C9C4BC;
  --p-ai: #EDEAE4; --p-ai-soft: rgba(255, 75, 43, .12); --p-ai-ink: #FF765C;
  --p-shadow-sm: 0 2px 8px rgba(0, 0, 0, .4);
  --p-shadow: 0 20px 50px -24px rgba(0, 0, 0, .6);
  --p-shadow-lg: 0 40px 100px -20px rgba(0, 0, 0, .7);
  --p-shadow-key: 0 6px 0 #0B0B0A, 0 12px 18px -8px rgba(0, 0, 0, .5);
  --p-overlay: rgba(0, 0, 0, .6);
  color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
  .pulse[data-skin="future"][data-theme="system"] {
    --p-bg: #111110;
    --p-surface: #1E1E1D;
    --p-surface-2: #1A1A19;
    --p-sidebar: #161615;
    --p-border: #2C2B29;
    --p-divider: #252422;
    --p-seg: #252423;
    --p-hover: #252423;
    --p-ink: #EDEAE4;
    --p-text: #C9C4BC;
    --p-muted: #9A948C;
    --p-faint: #9A948C;
    --p-chip-neutral: #2C2B29;
    --p-accent-soft: rgba(255, 75, 43, .16);
    --p-accent-soft-2: rgba(255, 75, 43, .26);
    --p-accent-ink: #FF765C;
    --p-primary: #EDEAE4;
    --p-primary-hover: #FF4B2B;
    --p-on-primary: #111110;
    --p-success: #4CC27E; --p-success-soft: rgba(76, 194, 126, .14); --p-success-ink: #4CC27E;
    --p-warning: #F0A04B; --p-warning-soft: rgba(240, 160, 75, .12); --p-warning-border: rgba(240, 160, 75, .30); --p-warning-ink: #F0A04B;
    --p-danger: #FF765C; --p-danger-soft: rgba(255, 75, 43, .16); --p-danger-ink: #FF9A86;
    --p-info: #EDEAE4; --p-info-soft: #252423; --p-info-ink: #C9C4BC;
    --p-ai: #EDEAE4; --p-ai-soft: rgba(255, 75, 43, .12); --p-ai-ink: #FF765C;
    --p-shadow-sm: 0 2px 8px rgba(0, 0, 0, .4);
    --p-shadow: 0 20px 50px -24px rgba(0, 0, 0, .6);
    --p-shadow-lg: 0 40px 100px -20px rgba(0, 0, 0, .7);
    --p-shadow-key: 0 6px 0 #0B0B0A, 0 12px 18px -8px rgba(0, 0, 0, .5);
    --p-overlay: rgba(0, 0, 0, .6);
    color-scheme: dark;
  }
}

/* ---------- 2. Base type ---------- */
html.pulse[data-skin="future"] { scroll-padding-top: 84px; }
.pulse[data-skin="future"] body {
  font-family: var(--p-font);
  font-kerning: normal;
  font-variant-numeric: tabular-nums;
  line-height: 1.5;
  transition: background-color .35s var(--p-ease), color .35s var(--p-ease);
}
.pulse[data-skin="future"] ::selection { background: var(--p-accent); color: #fff; }
/* plain links in text only: every component link (nav, buttons, cards) keeps the colour its own class gives it */
.pulse[data-skin="future"] a:not([class]) { color: var(--p-accent-ink); text-decoration: none; }
.pulse[data-skin="future"] a:not([class]):hover { color: var(--p-accent); }
.pulse[data-skin="future"] .p-h1,
.pulse[data-skin="future"] .p-h2,
.pulse[data-skin="future"] .p-h3,
.pulse[data-skin="future"] h1,
.pulse[data-skin="future"] h2,
.pulse[data-skin="future"] h3 { text-wrap: balance; }
.pulse[data-skin="future"] p,
.pulse[data-skin="future"] li,
.pulse[data-skin="future"] td,
.pulse[data-skin="future"] .p-lead,
.pulse[data-skin="future"] .p-small { text-wrap: pretty; }
.pulse[data-skin="future"] .p-h1 { font-size: var(--p-h1); font-weight: 600; letter-spacing: var(--p-h1-ls); line-height: 1.04; }
.pulse[data-skin="future"] .p-h2 { font-size: var(--p-h2); font-weight: 600; letter-spacing: -.025em; line-height: 1.15; }
.pulse[data-skin="future"] .p-h3 { font-size: var(--p-h3); font-weight: 600; letter-spacing: -.015em; line-height: 1.2; }
.pulse[data-skin="future"] .p-lead { font-size: 15px; line-height: 1.45; }
.pulse[data-skin="future"] code,
.pulse[data-skin="future"] kbd,
.pulse[data-skin="future"] pre,
.pulse[data-skin="future"] .p-mono { font-family: var(--p-mono); }
.pulse[data-skin="future"] .p-stat__value { font-size: clamp(28px, 2.4vw, 36px); font-weight: 600; letter-spacing: -.04em; line-height: 1.05; }
.pulse[data-skin="future"] .p-nav__group,
.pulse[data-skin="future"] .p-table > .p-table__head > * { letter-spacing: var(--p-kicker-ls); }

/* ---------- 3. Shell ---------- */
.pulse[data-skin="future"] .p-sidebar { background: var(--p-sidebar); border-right: 0; }
.pulse[data-skin="future"] .p-logo { border-radius: 50%; background: var(--p-accent); color: #fff; box-shadow: inset 0 -3px 0 var(--p-accent-edge); }
.pulse[data-skin="future"] a.p-logo:hover { color: #fff; }
.pulse[data-skin="future"] .p-project { border-radius: var(--p-radius); }
.pulse[data-skin="future"] .p-search-btn { border: 0; background: var(--p-surface); border-radius: var(--p-radius-pill); padding: var(--fx-sp-8) var(--fx-sp-16); }
.pulse[data-skin="future"] .p-search-btn:hover { box-shadow: var(--p-shadow-sm); }
.pulse[data-skin="future"] .p-nav__item { border-radius: var(--p-radius); transition: background-color var(--p-dur-fast) var(--p-ease-ui), color var(--p-dur-fast) var(--p-ease-ui); }
.pulse[data-skin="future"] .p-nav__item[aria-current="page"] {
  background: var(--p-surface); color: var(--p-ink); font-weight: 600;
  box-shadow: inset 3px 0 0 var(--p-accent), var(--p-shadow-sm);
}
.pulse[data-skin="future"] .p-nav__item[data-section="home"] { background: var(--p-sidebar); }
.pulse[data-skin="future"] .p-nav__item[data-section="home"][aria-current="page"] { background: var(--p-surface); }
.pulse[data-skin="future"] .p-nav__item[aria-current="page"] .p-nav__badge { color: var(--p-accent-ink); background: var(--p-accent-soft); }
.pulse[data-skin="future"] .p-nav__badge--alert,
.pulse[data-skin="future"] .p-nav__item[aria-current="page"] .p-nav__badge--alert { background: var(--p-accent); color: #fff; }
.pulse[data-skin="future"] .p-sidebar__foot { border-top-color: var(--p-border); }
.pulse[data-skin="future"] .p-topbar {
  border-bottom: 0;
  background: var(--p-bg);   /* solid paper: a translucent colour-mix() reads as black to contrast tools and the topbar text sits on the page anyway */
  -webkit-backdrop-filter: blur(14px) saturate(1.4); backdrop-filter: blur(14px) saturate(1.4);
}
@supports not (background: color-mix(in srgb, red 50%, blue)) {
  .pulse[data-skin="future"] .p-topbar { background: var(--p-bg); }
}
.pulse[data-skin="future"] .p-popover,
.pulse[data-skin="future"] .p-project-menu {
  border: 0; border-radius: var(--p-radius-lg); box-shadow: var(--p-shadow-lg);
}
.pulse[data-skin="future"] .p-modal { border: 0; border-radius: var(--p-radius-xl); box-shadow: var(--p-shadow-lg); }

/* ---------- 4. Components ---------- */
/* buttons: pill; primary = ink, hover -> the red; ONE red call to action (.p-btn--accent) */
.pulse[data-skin="future"] .p-btn {
  border-radius: var(--p-radius-pill); padding: var(--fx-sp-8) var(--fx-sp-16); font-weight: 500;
  border-color: var(--p-border); background: transparent;
  transition: background-color var(--p-dur-fast) var(--p-ease-ui), border-color var(--p-dur-fast) var(--p-ease-ui), color var(--p-dur-fast) var(--p-ease-ui), transform .12s var(--p-ease-ui);
}
.pulse[data-skin="future"] .p-btn:hover { background: var(--p-surface); border-color: var(--p-ink); }
.pulse[data-skin="future"] .p-btn:active { transform: translateY(1px); }
.pulse[data-skin="future"] .p-btn--icon { padding: 0; width: var(--p-ctl-h); }
.pulse[data-skin="future"] .p-btn--sm { padding: var(--fx-sp-4) var(--fx-sp-16); min-height: 32px; }
.pulse[data-skin="future"] .p-btn--primary { background: var(--p-primary); border-color: var(--p-primary); color: var(--p-on-primary); }
.pulse[data-skin="future"] a.p-btn--primary { color: var(--p-on-primary); }
.pulse[data-skin="future"] .p-btn--primary:hover,
.pulse[data-skin="future"] a.p-btn--primary:hover { background: var(--p-primary-hover); border-color: var(--p-primary-hover); color: #fff; }
.pulse[data-skin="future"] .p-btn--accent { background: var(--p-accent); border-color: var(--p-accent); color: #fff; box-shadow: var(--p-shadow-cta); }
.pulse[data-skin="future"] a.p-btn--accent { color: #fff; }
.pulse[data-skin="future"] .p-btn--accent:hover,
.pulse[data-skin="future"] a.p-btn--accent:hover { background: var(--p-primary); border-color: var(--p-primary); color: var(--p-on-primary); box-shadow: none; }
.pulse[data-skin="future"] .p-btn--ghost { background: transparent; border-color: transparent; color: var(--p-muted); }
.pulse[data-skin="future"] .p-btn--ghost:hover { background: var(--p-hover); border-color: transparent; color: var(--p-ink); }
.pulse[data-skin="future"] .p-btn--danger { background: transparent; border-color: var(--p-border); color: var(--p-danger); }
.pulse[data-skin="future"] .p-btn--danger:hover { background: var(--p-danger-soft); border-color: transparent; }

/* tabs and segments: pill segment on bg2, the active one is ink (site .tabs) */
.pulse[data-skin="future"] .p-seg,
.pulse[data-skin="future"] .p-tabs {
  display: inline-flex; gap: var(--fx-sp-4); padding: var(--fx-sp-4); border: 0; background: var(--p-seg);
  border-radius: var(--p-radius-pill); max-width: 100%;
}
.pulse[data-skin="future"] .p-tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.pulse[data-skin="future"] .p-tabs::-webkit-scrollbar { display: none; }
.pulse[data-skin="future"] .p-seg > button, .pulse[data-skin="future"] .p-seg > a, .pulse[data-skin="future"] .p-seg > label,
.pulse[data-skin="future"] .p-tabs > button, .pulse[data-skin="future"] .p-tabs > a {
  border: 0; border-radius: var(--p-radius-pill); padding: var(--fx-sp-8) var(--fx-sp-16); margin: 0; font-size: 13px; font-weight: 500;
  color: var(--p-text); white-space: nowrap; flex: none;
  transition: background-color var(--p-dur-fast) var(--p-ease-ui), color var(--p-dur-fast) var(--p-ease-ui);
}
.pulse[data-skin="future"] .p-tabs > a { color: var(--p-text); }
.pulse[data-skin="future"] .p-seg > button:hover, .pulse[data-skin="future"] .p-seg > a:hover,
.pulse[data-skin="future"] .p-tabs > button:hover, .pulse[data-skin="future"] .p-tabs > a:hover { color: var(--p-ink); background: var(--p-surface-2); }
.pulse[data-skin="future"] .p-seg > [aria-pressed="true"], .pulse[data-skin="future"] .p-seg > [aria-selected="true"],
.pulse[data-skin="future"] .p-seg > [aria-current="page"], .pulse[data-skin="future"] .p-seg > label.is-on,
.pulse[data-skin="future"] .p-tabs > [aria-selected="true"], .pulse[data-skin="future"] .p-tabs > [aria-current="page"],
.pulse[data-skin="future"] .p-tabs > a[aria-current="page"] {
  background: var(--p-primary); color: var(--p-on-primary); font-weight: 500; box-shadow: none; border: 0;
}
.pulse[data-skin="future"] .p-tabs > [aria-selected="true"] .p-tabs__count { color: var(--p-on-primary); background: rgba(255, 255, 255, .18); }
.pulse[data-skin="future"] .p-lang { padding: var(--fx-sp-4); }

/* cards: r22, no border, the paper around them separates them */
.pulse[data-skin="future"] .p-card,
.pulse[data-skin="future"] .p-stat,
.pulse[data-skin="future"] .p-table-wrap { border: 0; border-radius: var(--p-radius-lg); background: var(--p-surface); }
.pulse[data-skin="future"] .p-card__head,
.pulse[data-skin="future"] .p-card__row { border-bottom-color: var(--p-divider); }
.pulse[data-skin="future"] .p-table > .p-table__head > * { background: transparent; border-bottom: 1px solid var(--p-ink); text-transform: uppercase; font-size: 11.5px; }
.pulse[data-skin="future"] .p-table > .p-table__row > * { border-bottom-color: var(--p-divider); }

/* forms */
.pulse[data-skin="future"] .p-input,
.pulse[data-skin="future"] .p-select,
.pulse[data-skin="future"] .p-textarea { border-radius: var(--p-radius); background: var(--p-surface); border-color: var(--p-border); padding-left: var(--fx-sp-16); padding-right: var(--fx-sp-16); }
.pulse[data-skin="future"] .p-input:hover,
.pulse[data-skin="future"] .p-select:hover,
.pulse[data-skin="future"] .p-textarea:hover { border-color: var(--p-muted); }
.pulse[data-skin="future"] .p-input:focus,
.pulse[data-skin="future"] .p-select:focus,
.pulse[data-skin="future"] .p-textarea:focus { border-color: var(--p-ink); box-shadow: 0 0 0 3px var(--p-accent-soft); }
.pulse[data-skin="future"] .p-switch[aria-checked="true"] { background: var(--p-ink); }

/* chips, tags, alerts */
.pulse[data-skin="future"] .p-chip { border-radius: var(--p-radius-pill); }
.pulse[data-skin="future"] .p-chip--square { border-radius: var(--p-radius-sm); text-transform: uppercase; letter-spacing: .06em; font-size: 11.5px; font-weight: 600; }
.pulse[data-skin="future"] .p-chip--info { background: var(--p-info-soft); color: var(--p-info-ink); }
.pulse[data-skin="future"] .p-chip--ai, .pulse[data-skin="future"] .p-alert--ai { background: var(--p-ai-soft); color: var(--p-ai-ink); }
.pulse[data-skin="future"] .p-alert { border-radius: var(--p-radius-lg); padding: var(--fx-sp-16) var(--fx-sp-16); }
.pulse[data-skin="future"] .p-alert--info { background: var(--p-surface-2); color: var(--p-text); }
/* «Ask SIA» keeps its ORIGINAL look (the vermilion pill with the Sia mark, as in Pulse and on smartbtn.me): nothing here recolours it. Owner 21.10. */

/* 4b (depth, inverse blocks, keys, reveal) moved to future-v2.css (FUTURE-DESIGN-V2 §2, package P2). */

/* ---------- 5. Mobile ---------- */
@media (max-width: 820px) {
  .pulse[data-skin="future"] {
    --p-pad-x: var(--fx-sp-16); --p-pad-y: var(--fx-sp-16); --p-gap: var(--fx-sp-16); --p-card-pad: var(--fx-sp-16); --p-ctl-h: 44px;
    --p-radius-lg: 18px; --p-radius-xl: 22px;
  }
  .pulse[data-skin="future"] .p-btn { min-height: 44px; }
  .pulse[data-skin="future"] .p-btn--sm { min-height: 36px; }
  .pulse[data-skin="future"] .p-input, .pulse[data-skin="future"] .p-select, .pulse[data-skin="future"] .p-textarea { font-size: 16px; min-height: 44px; }
  .pulse[data-skin="future"] .p-seg, .pulse[data-skin="future"] .p-tabs { max-width: 100%; }
  .pulse[data-skin="future"] .p-topbar { padding-left: var(--fx-sp-16); padding-right: var(--fx-sp-16); }
}
@media (max-width: 480px) {
  .pulse[data-skin="future"] { --p-h1: 28px; }
}

/* ---------- 6. Focus and motion ---------- */
.pulse[data-skin="future"] :focus-visible { outline: 2px solid var(--p-accent); outline-offset: 2px; border-radius: 6px; }
.pulse[data-skin="future"] .p-btn:focus-visible,
.pulse[data-skin="future"] .p-seg > :focus-visible,
.pulse[data-skin="future"] .p-tabs > :focus-visible { border-radius: var(--p-radius-pill); }
.pulse[data-skin="future"] .p-input:focus-visible,
.pulse[data-skin="future"] .p-select:focus-visible,
.pulse[data-skin="future"] .p-textarea:focus-visible { outline-offset: 0; border-radius: var(--p-radius); }
@media (prefers-reduced-motion: reduce) {
  .pulse[data-skin="future"] *, .pulse[data-skin="future"] *::before, .pulse[data-skin="future"] *::after {
    animation-duration: .001ms !important; animation-iteration-count: 1 !important;
    transition-duration: .001ms !important; scroll-behavior: auto !important;
  }
}