/*
 * SCP-AGGA visual system for tech.scp-agga.ru.
 * Applies to the landing screen and every internal catalog screen.
 */
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&family=Oswald:wght@500;600&display=swap');

:root{
  --ink:#091920;
  --muted:rgba(9,25,32,.68);
  --line:rgba(9,25,32,.2);
  --paper:#fff;
  --white:#fff;
  --red:#f4772c;
  --green:#f4772c;
  --orange:#f4772c;
  --agga-orange:#f4772c;
  --agga-orange-hover:#d95f1f;
}

html,
body,
.app-shell{
  background:#fff;
  color:var(--ink);
  font-family:Manrope,Arial,sans-serif;
}

body,
button,
input,
select,
textarea{
  font-family:Manrope,Arial,sans-serif;
  font-size:16px;
}

.app-shell :where(p,a,button,input,select,textarea,label,small),
.topbar-meta,
.topbar-stats,
.eyebrow,
.search-message,
.search-hints,
.section-heading p,
.step-num,
.brand-type,
.brand-count,
.breadcrumbs,
.model-toolbar p,
.model-code,
.model-count,
.tree-head span,
.tree-head small,
.tree-group-button strong,
.tree-group-button small,
.tree-items button,
.tree-items button>span,
.tree-guide p,
.back-link,
.node-code,
.result-title p,
.diagram-state,
.card-toolbar strong,
.card-toolbar>div>span,
.found-label,
.table-wrap table,
.table-wrap th,
.serial-entry>span,
.serial-entry>span small,
.serial-entry em,
.search-result-machine strong,
.search-result-part strong,
.search-result-machine small,
.search-result-part small,
.agga-order-list-button,
.agga-order-add,
.agga-order-item p,
.agga-order-item small,
.agga-order-qty span,
.agga-order-copy,
.agga-order-clear,
.agga-order-notice{
  font-size:16px!important;
  line-height:1.45;
  letter-spacing:0;
}

h1,
h2,
h3,
.hero h1,
.section-heading h2,
.brand-mark,
.brand-hero .brand-mark,
.model-toolbar h1,
.machine-title h1,
.result-title h1,
.tree-guide p strong,
.agga-order-head h2{
  font-family:Oswald,'Arial Narrow',sans-serif;
  font-weight:600;
}

/* Existing compact header: same logo, ink and orange as the main site. */
.topbar{
  min-height:76px;
  height:auto;
  padding:12px max(40px,calc((100vw - 1320px)/2));
  background:var(--ink);
  border-color:rgba(255,255,255,.14);
}
.topbar .wordmark{
  width:150px;
  height:30px;
  padding:0;
  border:0;
  flex:0 0 150px;
  background:transparent url('/assets/scp-agga-logo.jpeg') left center/contain no-repeat;
  mix-blend-mode:screen;
}
.topbar .wordmark span,
.topbar .wordmark b{display:none}
.topbar-meta,
.topbar-stats{color:rgba(255,255,255,.72)}
.topbar-stats strong{color:var(--agga-orange)}
.topbar-stats i{background:var(--agga-orange)}
.status-dot{
  background:var(--agga-orange);
  box-shadow:0 0 0 4px rgba(244,119,44,.2);
}
.agga-order-list-button{
  min-height:44px;
  border-color:rgba(255,255,255,.35);
  background:#fff;
  color:var(--ink);
  text-transform:none;
}
.agga-order-list-button:hover{border-color:var(--agga-orange);color:var(--agga-orange)}
.agga-order-list-button b{background:var(--agga-orange)}

/* Landing screen. */
.hero,
.app-shell:has(.hero) .hero{
  color:#fff;
  border-bottom-color:var(--agga-orange);
  background-color:var(--ink);
  background-image:linear-gradient(90deg,rgba(9,25,32,.99),rgba(13,36,45,.96) 55%,rgba(22,49,59,.78)),repeating-linear-gradient(115deg,transparent 0 86px,rgba(244,119,44,.04) 86px 87px);
}
.eyebrow,
.hero>p{color:rgba(255,255,255,.74)}
.eyebrow span{background:var(--agga-orange)}
.hero-search{border-color:rgba(244,119,44,.48)}
.search-field{background:#fff;color:var(--ink)}
.search-field label{color:var(--ink);text-transform:none}
.search-field input{color:var(--ink);font-size:20px!important}
.search-field input::placeholder{color:rgba(9,25,32,.42)}
.hero-search>button,
.vin-login button{
  background:var(--agga-orange);
  color:#fff;
  text-transform:none;
}
.hero-search>button:hover,
.vin-login button:hover{background:var(--agga-orange-hover)}
.search-message{
  color:#fff;
  border-left-color:var(--agga-orange);
  background:rgba(244,119,44,.2);
}
.search-hints{color:rgba(255,255,255,.7)}
.search-hints button{color:#fff;border-color:rgba(255,255,255,.45)}
.vin-login{background:rgba(255,255,255,.06);border-color:rgba(244,119,44,.55)}
.vin-login label{color:#fff;text-transform:none}
.vin-login label small{color:rgba(255,255,255,.68)}
.vin-login input{color:var(--ink)}

/* Landing cards. */
.brand-section{background:#fff;color:var(--ink)}
.section-heading p,
.model-toolbar p{color:var(--muted)}
.step-num{color:var(--agga-orange)}
.brand-card{
  background:#fff;
  border-color:var(--line);
}
.brand-card:hover{
  border-color:var(--agga-orange);
  box-shadow:0 12px 28px rgba(244,119,44,.14);
}
.brand-card.wirtgen,
.brand-card.voegele,
.brand-card.hamm{--brand:var(--agga-orange)}
.brand-mark.wirtgen,
.brand-mark.voegele,
.brand-mark.hamm{color:var(--agga-orange)}
.brand-card:after{border-color:rgba(244,119,44,.12)}
.brand-index,
.brand-type{color:var(--muted)}
.brand-count i{
  color:var(--agga-orange);
  background:#fff;
  border-color:var(--agga-orange);
}

/* Shared internal-page navigation and forms. */
.subbar{background:#fff;border-color:var(--line)}
.subbar-inner{width:min(1320px,calc(100% - 80px))}
.breadcrumbs{color:var(--muted)}
.breadcrumbs button{color:var(--ink)}
.breadcrumbs button:hover{color:var(--agga-orange)}
.breadcrumbs strong{color:var(--ink)}
.mini-search{height:48px;background:#fff;border-color:var(--ink)}
.mini-search input{width:250px;color:var(--ink)}
.mini-search button{background:var(--agga-orange);color:#fff}
.mini-search button:hover{background:var(--agga-orange-hover)}
.brand-section,
.content-page,
.result-page{width:min(1320px,calc(100% - 80px))}
.brand-hero{
  color:#fff;
  border-left-color:var(--agga-orange);
  background:var(--ink);
}
.brand-hero.wirtgen,
.brand-hero.voegele,
.brand-hero.hamm{--brand:var(--agga-orange)}
.brand-hero p{color:rgba(255,255,255,.7)}
.brand-hero>strong{color:var(--agga-orange)}
.brand-hero>strong span{color:rgba(255,255,255,.72)}
.model-filter{height:52px}
.model-filter input,
.serial-entry input{
  color:var(--ink);
  background:#fff;
  border-color:var(--ink);
}
.model-filter input:focus,
.serial-entry input:focus{
  border-color:var(--agga-orange);
  box-shadow:0 0 0 2px rgba(244,119,44,.16);
}
.model-count{color:var(--muted);border-color:var(--line)}
.model-count strong{color:var(--ink)}
.model-grid{border-color:var(--line)}
.model-grid button{
  min-height:96px;
  color:var(--ink);
  background:#fff;
  border-color:var(--line);
}
.model-grid button:hover{color:#fff;background:var(--agga-orange)}
.model-code{color:var(--agga-orange)}
.empty-models{color:var(--muted);background:#fff}
.serial-badge,
.machine-serial{background:#fff;border-color:var(--line)}
.serial-badge span{color:var(--muted)}

/* Machine tree. */
.tree-layout,
.diagram-card,
.parts-card{
  background:#fff;
  border-color:var(--line);
}
.tree-panel{border-color:var(--line)}
.tree-head{background:var(--ink);color:#fff}
.tree-head small{color:rgba(255,255,255,.68)}
.tree-group{border-color:var(--line)}
.tree-group-button{background:#fff;color:var(--ink)}
.tree-group-button:hover{color:var(--agga-orange)}
.tree-group-button>span{border-color:var(--agga-orange);color:var(--agga-orange)}
.tree-group-button small{color:var(--muted)}
.tree-items button{background:#fff;border-color:var(--line);color:var(--ink)}
.tree-items button:hover{color:var(--ink);background:rgba(244,119,44,.1)}
.tree-items button>span{color:var(--agga-orange)}
.tree-guide{color:var(--muted)}
.tree-guide p strong{color:var(--ink)}
.guide-symbol{border-color:var(--line)}
.guide-symbol:before{background:var(--ink)}
.guide-symbol span{background:var(--agga-orange)}

/* Drawing and parts result. */
.back-link{color:var(--ink)}
.back-link:hover,
.node-code{color:var(--agga-orange)}
.result-title p{color:var(--muted)}
.diagram-state{color:var(--ink);background:#fff;border-color:var(--line)}
.diagram-state span,
.diagram-state.ready span,
.found-label span{background:var(--agga-orange)}
.found-label{color:var(--agga-orange)}
.card-toolbar{background:#fff;border-color:var(--line)}
.card-toolbar>div>span{color:var(--muted)}
.card-toolbar button,
.viewer-controls button{background:var(--ink);color:#fff}
.card-toolbar button:hover,
.viewer-controls button:hover{background:var(--agga-orange);color:#fff}
.diagram-canvas,
.placeholder-machine span{background:#fff}
.diagram-placeholder{
  color:var(--muted);
  background:#fff;
}
.diagram-placeholder strong,
.parts-empty strong{color:var(--ink)}
.placeholder-machine,
.placeholder-machine:before,
.placeholder-machine span{border-color:var(--ink)}
.table-wrap th{
  color:#fff;
  background:var(--ink);
  border-color:var(--ink);
  text-transform:none;
}
.table-wrap td{color:var(--ink);border-color:var(--line)}
.table-wrap tbody tr:hover{background:rgba(244,119,44,.08)}
.table-wrap tr.highlighted,
.table-wrap tr.selected-part{
  background:rgba(244,119,44,.14);
  box-shadow:inset 5px 0 var(--agga-orange);
}
.position-chip{border-color:var(--ink)}
.table-wrap tr.selected-part .position-chip{
  border-color:var(--agga-orange);
  color:#fff;
  background:var(--agga-orange);
}
.part-number{color:var(--agga-orange)}
.parts-empty{color:var(--muted)}
.result-serial{background:#fff;border-color:var(--line)}
.serial-entry>span small,
.serial-entry em,
.result-serial em{color:var(--muted)}
.serial-entry.vin-switch button,
.serial-entry button{
  color:#fff;
  background:var(--agga-orange);
  text-transform:none;
}
.serial-entry.vin-switch button:hover,
.serial-entry button:hover{background:var(--agga-orange-hover)}
.serial-entry.vin-switch button:focus-visible{outline-color:rgba(244,119,44,.3)}
.loading-note{
  color:var(--ink);
  background:#fff;
  border-left-color:var(--agga-orange);
}

/* Search results. */
.search-results-list{border-color:var(--line)}
.search-results-list>button{
  color:var(--ink);
  background:#fff;
  border-color:var(--line);
}
.search-results-list>button:hover{background:rgba(244,119,44,.08)}
.search-result-machine small,
.search-result-part small{color:var(--muted)}
.search-position{background:var(--agga-orange);color:#fff;text-transform:none}

/* Drawing markers and selected-part card. */
.marker-arrow{color:var(--agga-orange)}
.marker-position{background:var(--agga-orange)}
.diagram-part-card{
  color:var(--ink);
  background:#fff;
  border-color:var(--line);
  border-top-color:var(--agga-orange);
}
.diagram-part-card strong b,
.diagram-part-card small{color:var(--agga-orange)}
.diagram-part-card>span,
.diagram-part-card em{color:var(--muted)}
.selection-card-overlay .diagram-part-card{
  color:var(--ink);
  background:#fff;
  border-color:var(--agga-orange);
}
.selection-card-overlay .diagram-part-card:after{border-top-color:var(--agga-orange)}
.viewer-hint{color:var(--ink);background:#fff;border-color:var(--line)}

/* Request list panel. */
.agga-order-overlay{background:rgba(9,25,32,.72)}
.agga-order-panel{background:#fff}
.agga-order-head{
  background:var(--ink);
  border-bottom-color:var(--agga-orange);
}
.agga-order-close{border-color:rgba(255,255,255,.45)}
.agga-order-empty{color:var(--muted)}
.agga-order-item{background:#fff;border-color:var(--line)}
.agga-order-item strong,
.agga-order-item p{color:var(--ink)}
.agga-order-item small,
.agga-order-qty span{color:var(--muted)}
.agga-order-qty input{background:#fff;border-color:var(--ink)}
.agga-order-remove{background:var(--ink);color:#fff}
.agga-order-remove:hover{background:var(--agga-orange);color:#fff}
.agga-order-footer{background:#fff;border-color:var(--line)}
.agga-order-copy,
.agga-order-add{background:var(--agga-orange);border-color:var(--agga-orange);color:#fff;text-transform:none}
.agga-order-copy:hover,
.agga-order-add:hover{background:var(--agga-orange-hover);border-color:var(--agga-orange-hover)}
.agga-order-add.is-added{background:var(--ink);border-color:var(--ink);color:#fff}
.agga-order-clear{background:var(--ink);color:#fff;text-transform:none}
.agga-order-notice{color:var(--agga-orange)}

/* The technical catalog keeps its compact native header; no extra site header is injected. */
.app-shell>footer{display:none!important}

@media(max-width:1199px){
  .topbar{padding-inline:24px}
  .subbar-inner,
  .brand-section,
  .content-page,
  .result-page{width:min(100% - 48px,1320px)}
}

@media(max-width:680px){
  .topbar{min-height:60px;padding:10px 14px}
  .topbar .wordmark{width:118px;height:23px;flex-basis:118px}
  .hero{padding-inline:14px}
  .hero h1{font-size:clamp(36px,11vw,48px)}
  .brand-section,
  .content-page,
  .result-page,
  .subbar-inner{width:calc(100% - 28px)}
  .table-wrap tbody tr{border-color:var(--line)}
  .table-wrap td:nth-child(3),
  .table-wrap td:nth-child(5){color:var(--ink)}
  .table-wrap td:nth-child(4):before,
  .table-wrap td:nth-child(5):before{color:var(--muted)}
}