/* Kub-House — глобальные стили / дизайн-токены
   Палитра вытянута из PDF: тёплая бумажная база, кофейные акценты, серая графика.
*/

:root{
  /* Light (paper) */
  --paper:#F4EFE4;          /* фон бумаги */
  --paper-2:#EFE9DC;        /* фон сайдбара / панели */
  --paper-3:#E7E0CF;        /* грид-линии */
  --ink:#1A1714;            /* основной текст */
  --ink-2:#3C342B;          /* вторичный */
  --ink-3:#7A6F60;          /* подписи / muted */
  --ink-4:#A89B87;          /* совсем тонкое */
  --rule:#CFC4AE;           /* линии-разделители */
  --rule-2:#DDD2BC;
  --coffee:#5C3A1E;         /* CTA / акцент 1 */
  --coffee-2:#3E2614;       /* hover */
  --espresso:#1F1612;
  --gold:#A98142;           /* акцент-золото */
  --moss:#6E7B4F;           /* живой акцент */
  --rust:#9A4422;
  --good:#6B8F4E;
  --warn:#B68A2C;
  --paper-card:#FBF7EE;     /* карточки */
  --shadow-1:0 1px 0 rgba(255,255,255,.6) inset, 0 1px 2px rgba(70,52,30,.08);
  --shadow-2:0 1px 0 rgba(255,255,255,.6) inset, 0 18px 40px -18px rgba(70,52,30,.25);

  --serif:"Cormorant Garamond","EB Garamond",Georgia,serif;
  --sans:"Geist","Inter",system-ui,-apple-system,sans-serif;
  --mono:"JetBrains Mono","IBM Plex Mono",ui-monospace,monospace;

  --r-sm:6px;
  --r-md:10px;
  --r-lg:14px;
  --r-xl:20px;
}

[data-theme="dark"]{
  --paper:#15110D;
  --paper-2:#1B1612;
  --paper-3:#231D17;
  --ink:#F2EADB;
  --ink-2:#D7CDB8;
  --ink-3:#9C8E78;
  --ink-4:#6B5F4E;
  --rule:#2E2620;
  --rule-2:#3A3127;
  --coffee:#C89368;
  --coffee-2:#E0AE85;
  --espresso:#F2EADB;
  --gold:#D7AB6A;
  --moss:#9CAE7B;
  --rust:#D17B53;
  --paper-card:#1E1812;
  --shadow-1:0 1px 0 rgba(255,255,255,.04) inset, 0 1px 2px rgba(0,0,0,.4);
  --shadow-2:0 1px 0 rgba(255,255,255,.04) inset, 0 24px 60px -20px rgba(0,0,0,.7);
}

[data-theme="warm"]{
  --paper:#E9D9BC;
  --paper-2:#E0CDA9;
  --paper-3:#D6C098;
  --ink:#231405;
  --ink-2:#3F2611;
  --ink-3:#6B4D2C;
  --ink-4:#8C6E47;
  --rule:#B79D70;
  --rule-2:#C8B284;
  --coffee:#3E2614;
  --coffee-2:#231405;
  --paper-card:#F1E4CB;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--paper);color:var(--ink);
  font-family:var(--sans);
  font-feature-settings:"ss01","cv11";
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
body{
  /* грид-фон бумаги — лёгкая миллиметровка как на референсе */
  background-image:
    linear-gradient(var(--paper-3) 1px, transparent 1px),
    linear-gradient(90deg, var(--paper-3) 1px, transparent 1px);
  background-size: 28px 28px;
  background-position: -1px -1px;
  background-attachment: fixed;
  background-color: var(--paper);
}
[data-theme="dark"] body{
  background-image:
    linear-gradient(var(--paper-3) 1px, transparent 1px),
    linear-gradient(90deg, var(--paper-3) 1px, transparent 1px);
}

a{color:inherit;text-decoration:none}
button{font-family:inherit;color:inherit}

/* Типографика */
.serif{font-family:var(--serif);font-weight:500;letter-spacing:-0.01em}
.serif-it{font-family:var(--serif);font-style:italic;font-weight:500}
.mono{font-family:var(--mono);font-feature-settings:"zero","ss01"}

.eyebrow{
  font-family:var(--mono);
  font-size:10px;
  font-weight:500;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--ink-3);
}
.eyebrow .dot{display:inline-block;width:5px;height:5px;border-radius:99px;background:var(--moss);vertical-align:middle;margin-right:6px}

h1,h2,h3{margin:0;font-family:var(--serif);font-weight:500;letter-spacing:-0.02em;line-height:1.02}
h1{font-size:clamp(44px,6.4vw,100px);line-height:1.0}
h2{font-size:clamp(40px,5.5vw,84px)}
h3{font-size:clamp(28px,3vw,44px)}
p{margin:0;line-height:1.55;color:var(--ink-2)}

.container{max-width:1440px;margin:0 auto;padding:0 40px}
@media (max-width:720px){ .container{padding:0 20px} }

/* Кнопки */
.btn{
  display:inline-flex;align-items:center;gap:8px;
  padding:11px 18px;border-radius:99px;border:1px solid var(--rule);
  background:transparent;color:var(--ink);
  font-size:13px;font-weight:500;letter-spacing:.005em;
  cursor:pointer;transition:transform .12s ease, background .15s ease, border-color .15s ease;
  font-family:var(--sans);
}
.btn:hover{background:rgba(0,0,0,.04);border-color:var(--ink-3)}
[data-theme="dark"] .btn:hover{background:rgba(255,255,255,.04)}
.btn-primary{
  background:var(--coffee);color:#FBF5E7;border-color:transparent;
  box-shadow:0 1px 0 rgba(255,255,255,.18) inset, 0 8px 22px -8px rgba(92,58,30,.55);
}
.btn-primary:hover{background:var(--coffee-2)}
.btn-ghost{border-color:transparent}
.btn-sm{padding:7px 12px;font-size:12px}
.btn-icon{width:32px;height:32px;padding:0;justify-content:center;border-radius:99px}
.btn:disabled,.btn[disabled]{opacity:.45;cursor:not-allowed;pointer-events:none}

/* Понятный клик: курсор-указатель (значок руки) на интерактивных элементах */
a[href],
button:not(:disabled),
summary,
label[for],
select,
[role="button"],
[role="link"],
[role="tab"],
[role="menuitem"],
[role="option"],
[onclick],
input[type="checkbox"],
input[type="radio"],
input[type="submit"],
input[type="button"],
input[type="reset"],
input[type="file"]::-webkit-file-upload-button,
.kh-mobile-nav__chip,
.kh-tab,
.product-link,
.btn-link,
.del-btn,
.r-add,
.picker__item{
  cursor:pointer;
}

a[aria-disabled="true"],
button[disabled],
button:disabled,
[aria-disabled="true"]{
  cursor:not-allowed;
}

/* Сайдбар-навигация и мобильные чипы — перебиваем возможные инлайн-стили */
.kh-sidebar button,
.kh-mobile-nav__chip{
  cursor:pointer !important;
}

/* Inline editable fields */
.kh-editable{transition:background .15s ease, box-shadow .15s ease}
.kh-editable:hover:not(.kh-editable--editing){background:rgba(110,123,79,.10);box-shadow:0 0 0 1px rgba(110,123,79,.25)}
[data-theme="dark"] .kh-editable:hover:not(.kh-editable--editing){background:rgba(156,174,123,.12)}
.kh-editable--editing{caret-color:var(--moss)}

/* Highlight estimate row when scrolled to via search */
@keyframes kh-row-flash{
  0%{background:rgba(110,123,79,.30)}
  60%{background:rgba(110,123,79,.18)}
  100%{background:transparent}
}
.kh-row-highlight{animation:kh-row-flash 1.8s ease-out}

/* Hide browser-native number-input spin buttons */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
input[type="number"]{-moz-appearance:textfield;appearance:textfield}

/* === Kub-House: модалка загрузки цен === */
.kh-prices-backdrop{
  position:fixed; inset:0; z-index:1100;
  background:rgba(20,16,12,.42);
  backdrop-filter:blur(3px);
  display:flex; align-items:center; justify-content:center;
  animation:kh-fade-in .22s ease-out;
}
@keyframes kh-fade-in{from{opacity:0}to{opacity:1}}
.kh-prices-card{
  width:min(420px, calc(100vw - 48px));
  background:var(--paper-card);
  border:1px solid var(--rule);
  padding:32px 36px 28px;
  display:flex; flex-direction:column; align-items:center; gap:14px;
  animation:kh-pop-in .35s cubic-bezier(.2,.9,.3,1.2);
  box-shadow:0 30px 80px -20px rgba(20,16,12,.45);
}
@keyframes kh-pop-in{
  from{transform:translateY(8px) scale(.96); opacity:0}
  to{transform:translateY(0) scale(1); opacity:1}
}
.kh-prices-title{
  font-size:26px; line-height:1.1; letter-spacing:-0.015em;
  text-align:center; margin-top:4px;
}
.kh-prices-sources{
  color:var(--ink-3); letter-spacing:.16em; font-size:10px;
  margin-bottom:6px;
}
.kh-prices-progress{
  width:100%; height:3px; background:var(--rule); border-radius:99px;
  overflow:hidden; position:relative;
}
.kh-prices-progress__bar{
  height:100%; background:var(--coffee);
  border-radius:99px;
  transition:width .35s ease-out;
  position:relative;
}
.kh-prices-progress__bar::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.5),transparent);
  animation:kh-shimmer 1.6s linear infinite;
}
@keyframes kh-shimmer{
  0%{transform:translateX(-100%)}
  100%{transform:translateX(100%)}
}

/* анимированная кладка кирпичей */
.kh-prices-bricks{
  position:relative; width:88px; height:88px;
  margin:6px 0 4px;
  display:block;
}
.kh-prices-bricks .kh-brick{
  position:absolute; left:50%; transform:translateX(-50%);
  width:64px; height:14px; border:1px solid var(--ink);
  background:var(--coffee);
  background-image:
    linear-gradient(90deg, rgba(255,255,255,.10) 0 1px, transparent 1px 32px, rgba(255,255,255,.10) 32px 33px),
    linear-gradient(0deg, rgba(0,0,0,.10), rgba(0,0,0,.10));
  border-radius:1px;
  opacity:0;
  animation:kh-brick-rise 1.6s cubic-bezier(.32,.72,.36,1) infinite;
  box-shadow:inset 0 -2px 0 rgba(0,0,0,.12);
}
.kh-prices-bricks .kh-brick--1{bottom:0;  width:72px; animation-delay:.0s}
.kh-prices-bricks .kh-brick--2{bottom:16px; width:64px; animation-delay:.12s}
.kh-prices-bricks .kh-brick--3{bottom:32px; width:56px; animation-delay:.24s}
.kh-prices-bricks .kh-brick--4{bottom:48px; width:48px; animation-delay:.36s}
.kh-prices-bricks .kh-brick--5{bottom:64px; width:40px; animation-delay:.48s; background:var(--moss)}
@keyframes kh-brick-rise{
  0%   {opacity:0; transform:translate(-50%,-14px) scale(.92)}
  18%  {opacity:1; transform:translate(-50%,0)     scale(1)}
  72%  {opacity:1; transform:translate(-50%,0)     scale(1)}
  100% {opacity:0; transform:translate(-50%,-4px)  scale(.94)}
}
@media (prefers-reduced-motion: reduce){
  .kh-prices-bricks .kh-brick{animation-duration:0s;opacity:1;transform:translateX(-50%)}
  .kh-prices-progress__bar::after{animation:none}
}

/* Бегущая лента цифр на «рулетке» в PriceFetchOverlay. Раньше жила инлайном
   в удалённом components/Loader.jsx; без неё лента стоит неподвижно. */
@keyframes kh-tape{0%,100%{transform:translateX(0)}50%{transform:translateX(-160px)}}
.kh-tape{animation:kh-tape 2.6s ease-in-out infinite}
@media (prefers-reduced-motion: reduce){
  .kh-tape{animation:none}
}

/* Тонкие линии-засечки в углах кадра — как на PDF */
.frame{position:relative}
.frame::before,
.frame::after,
.frame > .frame-bl,
.frame > .frame-br{
  content:"";position:absolute;width:14px;height:14px;
  border:1px solid var(--ink-4); opacity:.55;
}
.frame::before{top:-1px;left:-1px;border-right:0;border-bottom:0}
.frame::after{top:-1px;right:-1px;border-left:0;border-bottom:0}
.frame > .frame-bl{bottom:-1px;left:-1px;border-right:0;border-top:0}
.frame > .frame-br{bottom:-1px;right:-1px;border-left:0;border-top:0}

/* Утилиты */
.row{display:flex}
.col{display:flex;flex-direction:column}
.gap-2{gap:8px}.gap-3{gap:12px}.gap-4{gap:16px}.gap-6{gap:24px}.gap-8{gap:32px}
.center{align-items:center}
.between{justify-content:space-between}
.muted{color:var(--ink-3)}
.tiny{font-size:11px}
.divider{height:1px;background:var(--rule);width:100%}
.divider-dashed{border-top:1px dashed var(--rule);width:100%;height:0}

/* Тики-измерения (как на чертеже) */
.tick{position:relative;display:inline-block}
.tick::before,.tick::after{content:"";position:absolute;width:1px;height:7px;background:var(--ink-3);top:50%;transform:translateY(-50%)}
.tick::before{left:-9px}
.tick::after{right:-9px}

/* Селект-фокус */
.focusable{outline:none}
.focusable:focus-visible{box-shadow:0 0 0 3px rgba(92,58,30,.18)}

/* iOS / mobile baseline */
html{-webkit-text-size-adjust:100%}
body{overscroll-behavior-y:none;overflow-x:hidden}
#root{overflow-x:hidden}

/* Mobile-only nav burger + sidebar drawer (defaults — desktop hides them) */
.kh-topbar__burger{display:none}
.kh-sidebar__head{display:none}
.kh-sidebar-backdrop{display:none}
.kh-mobile-nav{display:none}
.kh-mobile-nav__scroll{
  display:flex;gap:6px;padding:10px 14px;
  overflow-x:auto;-webkit-overflow-scrolling:touch;
  scrollbar-width:none;
}
.kh-mobile-nav__scroll::-webkit-scrollbar{display:none}
.kh-mobile-nav{
  background:var(--paper);
  border-bottom:1px solid var(--rule);
}
.kh-mobile-nav__chip{
  display:inline-flex;align-items:center;gap:6px;flex-shrink:0;
  padding:7px 12px;border-radius:99px;
  border:1px solid var(--rule);background:var(--paper-card);
  color:var(--ink-2);font-size:12px;font-family:var(--sans);
  cursor:pointer;white-space:nowrap;
}
.kh-mobile-nav__chip[data-active="true"]{
  background:var(--ink);color:var(--paper);border-color:var(--ink);
}
.kh-mobile-nav__count{
  font-size:10px;opacity:.6;margin-left:2px;
}
@media (max-width:760px){
  .kh-sidebar-backdrop{
    display:block;
    position:fixed;inset:0;z-index:40;
    background:rgba(20,16,12,.42);
    backdrop-filter:blur(2px);
    animation:kh-fade-in .18s ease-out;
  }
}

/* Tablet (iPad portrait and below): hide right rail, scale hero down */
@media (max-width:1024px){
  main ~ aside{display:none !important}
  main{min-width:0;overflow-x:auto;-webkit-overflow-scrolling:touch}

  .kh-hero{padding:24px 24px 22px !important}
  .kh-hero__title{font-size:46px !important;white-space:normal !important;word-break:break-word}
  .kh-hero__top{flex-wrap:wrap;gap:14px !important}
  .kh-hero__meta{align-items:flex-start !important;flex-direction:row;flex-wrap:wrap;gap:6px 14px !important;white-space:normal !important}

  .kh-toolbar-bar{padding:14px 24px !important}
  .kh-positions{padding:14px 24px 12px !important}
  .kh-est-search{padding:0 24px 12px !important}
  .kh-cols{padding:10px 24px !important}
  .kh-est-row__inner{padding:12px 24px !important}
  .kh-statusbar{padding:8px 24px !important}
}

/* Phone: stack everything, sidebar becomes drawer, shrink hero */
@media (max-width:760px){
  /* By default hide both rails on phones */
  main ~ aside{display:none !important}
  aside.kh-sidebar{
    display:flex !important;
    position:fixed;top:0;bottom:0;left:0;
    width:min(280px, 82vw);
    transform:translateX(-100%);
    transition:transform .25s ease;
    z-index:50;
    box-shadow:0 30px 80px -20px rgba(20,16,12,.45);
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
  }
  aside.kh-sidebar.kh-sidebar--open{transform:translateX(0)}
  .kh-sidebar__head{display:flex !important}
  .kh-topbar__burger{display:inline-flex !important}
  .kh-mobile-nav{display:block !important}

  .container{padding:0 12px}

  body, #root, .col[style*="min-height: 100vh"], .col[style*="minHeight: 100vh"]{min-width:0}

  /* TopBar */
  .kh-topbar{padding:10px 14px !important;flex-wrap:wrap;gap:8px !important;row-gap:10px !important}
  .kh-topbar__brand{gap:10px !important;flex:1;min-width:0}
  .kh-topbar__crumbs{margin-left:0 !important;flex-wrap:wrap;font-size:10px !important;row-gap:2px}
  .kh-topbar__actions{gap:6px !important;flex-wrap:wrap;justify-content:flex-end}
  .kh-topbar__autosave{display:none !important}
  .kh-topbar__new{padding:6px 10px !important;font-size:11px !important}

  /* Hero */
  .kh-hero{padding:18px 14px 18px !important}
  .kh-hero__top{flex-direction:column;align-items:flex-start !important;gap:10px !important}
  .kh-hero__title{font-size:30px !important;line-height:1.05 !important;white-space:normal !important;word-break:break-word}
  .kh-hero__sub{font-size:10px !important;line-height:1.5}
  .kh-hero__meta{align-self:stretch;align-items:flex-start !important;flex-direction:row;flex-wrap:wrap;gap:4px 12px !important;white-space:normal !important;font-size:10px !important}
  .kh-hero__stats{flex-direction:column;margin-top:18px !important;gap:10px !important}
  .kh-hero__stat{flex:0 0 auto !important;padding:0 !important;border-right:0 !important;border-bottom:1px dashed var(--rule);padding-bottom:10px !important}
  .kh-hero__stat:last-child{border-bottom:0;padding-bottom:0 !important}
  .kh-hero__stat .serif{font-size:30px !important}

  /* Toolbar */
  .kh-toolbar-bar{padding:12px 14px !important;gap:8px !important}
  .kh-toolbar-bar__search{min-width:0 !important;flex:1 1 100% !important}
  .kh-toolbar-bar__hint{display:none !important}
  .kh-toolbar-bar__tabs{flex-wrap:wrap;gap:4px !important}

  /* Positions header */
  .kh-positions{padding:12px 14px 10px !important;align-items:flex-start !important}
  .kh-positions > .col{width:100%}
  .kh-positions__actions{flex-wrap:wrap;gap:6px !important;width:100%}
  .kh-positions__actions .btn-sm{padding:6px 10px !important;font-size:11px !important}

  /* Estimate search */
  .kh-est-search{padding:0 14px 10px !important}

  /* Estimate table — let it scroll horizontally inside main */
  .kh-cols, .kh-est-row__inner{padding-left:14px !important;padding-right:14px !important;min-width:760px}

  /* Empty state */
  .kh-empty{padding:24px 14px 32px !important}

  /* Status bar */
  .kh-statusbar{padding:8px 14px !important;flex-wrap:wrap;gap:6px !important;font-size:10px !important;letter-spacing:.06em !important}
  .kh-statusbar > .row{flex-wrap:wrap;gap:8px !important}

  /* Floating helpers */
  .kh-prices-card{padding:24px 20px 22px}
}