/* chrishob.de 10.10.6 unified UI/GUI design system */
:root{
  --ch-ink:#071a34;
  --ch-text:#173651;
  --ch-muted:#60758e;
  --ch-muted-2:#71859a;
  --ch-accent:#0968e9;
  --ch-accent-hover:#075dce;
  --ch-accent-soft:#f0f6ff;
  --ch-panel:#fff;
  --ch-soft:#f7f9fc;
  --ch-soft-2:#fbfdff;
  --ch-line:#d9e5f2;
  --ch-line-strong:#cbdbea;
  --ch-success:#0f8a58;
  --ch-warning:#b56608;
  --ch-danger:#c53030;
  --ch-radius-sm:10px;
  --ch-radius:14px;
  --ch-radius-lg:18px;
  --ch-control-height:44px;
  --ch-content-width:1160px;
  --ch-wide-width:1220px;
  --ch-shadow-card:0 12px 30px rgba(25,57,91,.05);
  --ch-shadow-raised:0 18px 46px rgba(25,57,91,.11);
  --ch-focus:0 0 0 3px rgba(9,104,233,.14);
  --cp86-accent:var(--ch-accent);
  --cp86-line:var(--ch-line);
  --cp86-soft:var(--ch-soft);
  --cp86-accent-soft:var(--ch-accent-soft);
  --cp87-accent:var(--ch-accent);
  --cp87-line:var(--ch-line);
  --cp87-soft:var(--ch-soft);
  --cp87-panel:var(--ch-panel);
  --cp87-radius:var(--ch-radius);
  --cp87-shadow:var(--ch-shadow-raised);
}

/* Global public rhythm and typography. */
body.ch-public-body{background:var(--ch-panel);color:var(--ch-ink);font-size:16px}
body.ch-public-body>main{min-height:52vh}
body.ch-public-body :where(h1,h2,h3,h4){color:var(--ch-ink);text-wrap:balance}
body.ch-public-body :where(p,li,dd){text-wrap:pretty}
body.ch-public-body :where(a){text-underline-offset:.16em}
body.ch-public-body :where(input,select,textarea,button){font-family:inherit}
body.ch-public-body :where(input,select,textarea):focus-visible{outline:0;border-color:var(--ch-accent)!important;box-shadow:var(--ch-focus)!important}

/* Canonical shell: compact, quiet and aligned with the public content grid. */
.ch-public-utility__inner,.ch-public-header__inner{width:min(var(--ch-wide-width),calc(100% - 2rem));padding-left:0;padding-right:0}
.ch-public-header__inner{min-height:76px;padding-top:.7rem;padding-bottom:.7rem;gap:1.5rem}
.ch-public-brand__mark{width:34px;height:40px;color:var(--ch-ink)}
.ch-public-brand__copy strong{font-size:1.32rem}
.ch-public-brand__copy small{color:var(--ch-muted)}
.ch-public-primary{max-width:none;padding:0;border:0;border-radius:0;background:transparent}
.ch-public-primary .cp87-navlinks{gap:.08rem}
.ch-public-primary .cp87-navlink{min-height:40px;padding:.52rem .65rem;border-radius:var(--ch-radius-sm)}
.ch-public-primary .cp87-mega{border-color:var(--ch-line);border-radius:var(--ch-radius-lg);box-shadow:var(--ch-shadow-raised)}
.cp87-footer-inner{width:min(var(--ch-content-width),calc(100% - 2rem));padding:2rem 0 2.25rem}

/* Shared page frame. Full-width finder/comparison heroes intentionally stay full width. */
.cp87-page,.cp86-page,.cpf101-page{width:min(var(--ch-content-width),calc(100% - 2rem))}
.cp87-page{padding-top:clamp(1.35rem,3vw,2.45rem)}
.cp86-page{padding-top:clamp(1.35rem,3vw,2.45rem)}
.cp87-topicbar{padding-bottom:0}
.cp87-breadcrumbs{margin-bottom:1.05rem;color:var(--ch-muted);opacity:1}
.cp87-pagehead,.cp86-pagehead{gap:1.4rem;padding-bottom:1.25rem;margin-bottom:1.2rem;border-color:var(--ch-line)}
.cp87-kicker,.cp86-kicker,.cp90-eyebrow,.cp88-kicker,.cp89-kicker{color:var(--ch-accent);opacity:1}
.cp87-pagehead h1,.cp86-pagehead h1{font-size:clamp(2rem,4vw,3.05rem);line-height:1.02;letter-spacing:-.045em}
.cp87-pagehead p,.cp86-pagehead p{color:var(--ch-muted);opacity:1;font-size:1rem;line-height:1.65}
.cp87-section,.cp86-section,.cp88-section,.cp89-section,.cp90-section{margin-top:2rem}
.cp87-sectionhead,.cp86-sectionhead,.cp88-sectionhead,.cp89-sectionhead{margin-bottom:.9rem}
.cp87-sectionhead h2,.cp86-sectionhead h2,.cp88-sectionhead h2,.cp89-sectionhead h2{font-size:clamp(1.35rem,2.45vw,1.8rem);letter-spacing:-.025em}
.cp87-sectionhead p,.cp86-sectionhead p,.cp88-sectionhead p,.cp89-sectionhead p{color:var(--ch-muted);opacity:1}

/* One button language across portal, finder, compare, product and planning UIs. */
.cp87-btn,.cp86-btn,.cf12-btn,.cu13-btn,.pd20-btn,.cpf101-submit,.cp90-btn,.cp88-formactions button,.cp89-formactions button{
  min-height:var(--ch-control-height);border-radius:var(--ch-radius-sm);font-weight:800;transition:background-color .15s,border-color .15s,box-shadow .15s,transform .15s
}
.cp87-btn,.cp86-btn,.cf12-btn,.cu13-btn,.pd20-btn,.cp90-btn{border-color:var(--ch-line-strong)}
.cp87-btn:hover,.cp86-btn:hover,.cf12-btn:hover,.cu13-btn:hover,.pd20-btn:hover,.cp90-btn:hover{background:var(--ch-soft)}
.cp87-btn--primary,.cp86-btn--primary,.cf12-btn--primary,.cu13-btn--primary,.pd20-btn--primary,.cpf101-submit,.cp90-btn--primary{
  background:var(--ch-accent)!important;border-color:var(--ch-accent)!important;color:#fff!important;box-shadow:0 8px 18px rgba(9,104,233,.14)
}
.cp87-btn--primary:hover,.cp86-btn--primary:hover,.cf12-btn--primary:hover,.cu13-btn--primary:hover,.pd20-btn--primary:hover,.cpf101-submit:hover,.cp90-btn--primary:hover{background:var(--ch-accent-hover)!important}

/* Tabs and compact topic navigation. */
.cp87-tabs,.cp86-topicnav{border-color:var(--ch-line);border-radius:12px;background:var(--ch-soft);padding:.3rem;gap:.24rem}
.cp87-tabs a,.cp86-topicnav a{border-radius:8px;min-height:34px;display:inline-flex;align-items:center}
.cp87-tabs a[aria-current="page"],.cp86-topicnav a[aria-current="page"]{background:var(--ch-accent);color:#fff}

/* Card language. */
.cp87-card,.cp86-hubcard,.cp86-product,.cp86-knowledge,.cp88-result,.cp88-ref,.cp88-knowledgegrid article,.cp89-result,.cp89-ref,.cp89-knowledgegrid article,
.cp90-section>article,.cp90-card,.cp91-project,.cp92-card,.cp93-card,.cp94-topic,.cp94-gates article,.cp95-card,.cp97-card,.cp98-card,.cp100-model-grid article{
  border-color:var(--ch-line);border-radius:var(--ch-radius);background:var(--ch-panel);box-shadow:var(--ch-shadow-card)
}
.cp87-card,.cp86-hubcard{padding:1.05rem}
.cp87-card p,.cp86-hubcard p,.cp86-knowledge p{color:var(--ch-muted);opacity:1}
.cp87-card:hover,.cp86-hubcard:hover{border-color:var(--ch-line-strong)}
.cp87-notice,.cp88-note,.cp89-note{border-color:var(--ch-line);border-radius:var(--ch-radius-sm);background:var(--ch-soft);color:var(--ch-text)}

/* Infrastructure and workplace suites: same controls and result cards as the firewall/network UI. */
.cp88-page,.cp89-page{--cp88-line:var(--ch-line);--cp88-soft:var(--ch-soft);--cp88-panel:var(--ch-panel);--cp88-accent:var(--ch-accent);--cp89-line:var(--ch-line);--cp89-soft:var(--ch-soft);--cp89-panel:var(--ch-panel);--cp89-accent:var(--ch-accent)}
.cp88-form,.cp89-form,.cp90-form,.cpf101-form{border-color:var(--ch-line);border-radius:var(--ch-radius-lg);background:var(--ch-panel);box-shadow:var(--ch-shadow-card);padding:1.05rem}
.cp88-field,.cp89-field,.cp90-field,.cpf101-field,.cpf101-check{border-color:var(--ch-line);border-radius:12px;background:var(--ch-soft-2)}
.cp88-field input,.cp88-field select,.cp89-field input,.cp89-field select,.cp90-field input,.cp90-field select,.cpf101-field input,.cpf101-field select{
  min-height:var(--ch-control-height);border-color:var(--ch-line-strong);border-radius:var(--ch-radius-sm);background:var(--ch-panel);color:var(--ch-ink)
}
.cp88-check,.cp89-check,.cp90-check{border-color:var(--ch-line);border-radius:12px;background:var(--ch-soft-2)}
.cp88-result--top,.cp89-result--top{border-color:#6aa4ec;background:var(--ch-accent-soft)}
.cp88-resulttop strong,.cp89-resulttop strong{color:var(--ch-accent)}
.cp88-warnings span,.cp89-warnings span{color:#7a4804}
.cp88-tablewrap,.cp89-tablewrap{border-color:var(--ch-line);border-radius:var(--ch-radius);box-shadow:var(--ch-shadow-card)}
.cp88-table thead th,.cp89-table thead th{background:var(--ch-soft)}

/* Firewall/network finder and comparison keep their strong identity but use the same grid/tokens. */
.cf12-page>.cp87-tabs,.cu13-page>.cp87-tabs{width:min(var(--ch-content-width),calc(100% - 2rem))}
.cf12-hero,.cu13-hero{border-color:var(--ch-line);background:linear-gradient(180deg,#f7faff 0%,#fff 100%)}
.cf12-hero h1,.cu13-hero h1{color:var(--ch-ink)}
.cf12-eyebrow,.cu13-eyebrow{color:var(--ch-accent)}
.cf12-layout,.cf12-results,.cu13-shell{width:min(var(--ch-wide-width),calc(100% - 2rem))}
.cf12-wizard,.cf12-side,.cf12-result,.cu13-filter,.cu13-product{border-color:var(--ch-line);box-shadow:var(--ch-shadow-card)}
.cf12-input,.cf12-choice span,.cf12-check>span,.cu13-field input,.cu13-field select{border-color:var(--ch-line-strong)}

/* Product catalog and detail pages. */
.pd20-page,.pd30-page{color:var(--ch-ink)}
.pd20-shell,.pd20-hero,.pd20-detailhero,.pd20-breadcrumb,.pd30-vendorstrip,.pd30-pairs,.pd30-guidance,.pd30-related{width:min(var(--ch-content-width),calc(100% - 2rem))}
.pd20-hero,.pd20-detailhero{border-color:var(--ch-line);border-radius:var(--ch-radius-lg);box-shadow:var(--ch-shadow-card)}
.pd20-topic,.pd20-card,.pd20-columns article,.pd20-detailhero aside{border-color:var(--ch-line);border-radius:var(--ch-radius);box-shadow:var(--ch-shadow-card)}
.pd20-hero>span,.pd20-detailhero>div>span,.pd20-sectionhead>span,.pd20-columns article>span{color:var(--ch-accent)}
.pd20-hero h1,.pd20-detailhero h1,.pd20-card h3,.pd20-topic h2{color:var(--ch-ink)}
.pd20-hero p,.pd20-detailhero p,.pd20-card>p,.pd20-topic p,.pd20-columns p{color:var(--ch-muted)}
.pd20-btn{border-color:var(--ch-line-strong)}

/* Planning/workspace surfaces. Preserve functional layout while normalising visual primitives. */
.cp90-page{--cp90-accent:var(--ch-accent);--cp90-line:var(--ch-line);--cp90-soft:var(--ch-soft);--cp90-panel:var(--ch-panel)}
.cp90-stackhero,.cp90-homepromo,.cp100-homepromo{border-color:var(--ch-line);border-radius:var(--ch-radius-lg);box-shadow:var(--ch-shadow-card)}
.cp90-fieldset,.cp91-workspace section,.cp92-costing section,.cp93-reports section,.cp94-section,.cp95-section,.cp97-procurement section,.cp98-assets section,.cp100-lifecycle section{border-color:var(--ch-line)}
.cp90-field input,.cp90-field select{border-color:var(--ch-line-strong);border-radius:var(--ch-radius-sm);min-height:var(--ch-control-height)}
.cp90-sectionhead>div>span,.cp94-section .cp90-sectionhead>div>span{color:var(--ch-accent)}
.cp90-profilebar,.cp94-policy,.cp97-policy,.cp98-policy{border-color:var(--ch-line);border-radius:var(--ch-radius);background:var(--ch-soft)}

/* Planning detail/list modules: one card, control and KPI language across the complete workflow. */
.cp91-project-list,.cp91-detail,.cp92-model-list,.cp92-detail,.cp93-report-list,.cp93-detail{
  border-color:var(--ch-line)!important;border-radius:var(--ch-radius-lg)!important;background:var(--ch-panel)!important;box-shadow:var(--ch-shadow-card)
}
.cp91-project-card,.cp92-model-card,.cp93-report-card,
.cp93-kpis article,.cp93-report-kpis article,.cp93-priority-grid article,.cp93-decision-list article,
.cp94-topic,.cp94-gates article,.cp97-kpis article,.cp97-grid>section,.cp98-kpis article,.cp98-row,
.cp100-stage,.cp100-kpis article,.cp100-project,.cp100-model-grid article{
  border-color:var(--ch-line)!important;border-radius:var(--ch-radius)!important;background:var(--ch-panel);box-shadow:var(--ch-shadow-card)
}
.cp91-project-card,.cp92-model-card{background:var(--ch-soft-2)}
.cp91-project-card:hover,.cp91-project-card.is-active,.cp92-model-card:hover,.cp92-model-card.is-active{background:var(--ch-accent-soft);border-color:#8fb9ee!important}
.cp93-create,.cp92-create{border-color:var(--ch-line)!important;border-radius:var(--ch-radius-lg)!important;background:var(--ch-panel)!important;box-shadow:var(--ch-shadow-card)}
.cp91-project-search,.cp91-save-form input,.cp91-save-form select,.cp91-decision-field input,.cp91-decision-field select,.cp91-decision-field textarea,
.cp92-create input,.cp92-create select,.cp92-item-row input,.cp92-item-row select,.cp93-create select,.cp97-controls select,.cp98-controls select,.cp98-field input,.cp98-field select{
  min-height:var(--ch-control-height);border-color:var(--ch-line-strong);border-radius:var(--ch-radius-sm);background:var(--ch-panel);color:var(--ch-ink)
}
.cp93-note,.cp93-cost-warning,.cp91-storage-banner,.cp92-policy,.cp93-policy{border-color:var(--ch-line)!important;border-radius:var(--ch-radius)!important;background:var(--ch-soft)!important}

/* Manufacturer and product-comparison extensions use the same product card contract. */
.pd30-manufacturer,.pd30-pair,.pd30-vs-summary article{
  border-color:var(--ch-line);border-radius:var(--ch-radius);background:var(--ch-panel);box-shadow:var(--ch-shadow-card)
}
.pd30-manufacturer p,.pd30-pair span,.pd30-guidance p{color:var(--ch-muted)}
.pd30-manufacturer>a,.pd30-vs-summary a{color:var(--ch-accent)}
.pd30-vendorlinks a,.pd30-related>a{border-color:var(--ch-line);background:var(--ch-panel);color:var(--ch-text)}
.pd30-vendorlinks a:hover,.pd30-related>a:hover{border-color:var(--ch-line-strong);background:var(--ch-soft)}
.pd30-guidance{border-color:var(--ch-line);border-radius:var(--ch-radius-lg);background:var(--ch-accent-soft)}

/* Tables across public tools. */
body.ch-public-body :where(.cp87-page,.cp86-page,.cp90-page,.pd20-page,.cpf101-page) table{border-color:var(--ch-line)}
body.ch-public-body :where(.cp87-page,.cp86-page,.cp90-page,.pd20-page,.cpf101-page) th{color:var(--ch-text)}

/* Unified status semantics. */
.cp86-status,.cp87-status,.cp86-badge,.cp87-badge{border-color:var(--ch-line);background:var(--ch-soft);color:var(--ch-text)}

/* About page joins the same visual language without changing its content model. */
.ch-about{color:var(--ch-ink)}
.ch-about__note{border-color:var(--ch-line)!important;border-radius:var(--ch-radius)!important;background:var(--ch-soft)!important}

/* Admin UI is opt-in via system_runtime_admin_ui_boot(). Only the content area is normalised. */
body.ch-admin-ui{
  --accent:var(--ch-accent);--primary:var(--ch-accent);--surface:var(--ch-panel);--card:var(--ch-panel);--bg:var(--ch-panel);
  background:#f4f7fb;color:var(--ch-ink);font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif
}
body.ch-admin-ui :where(input,select,textarea,button){font-family:inherit}
body.ch-admin-ui main{color:var(--ch-ink)}
body.ch-admin-ui main>section{margin:0 0 1rem;padding:1.15rem 1.2rem;border:1px solid var(--ch-line);border-radius:var(--ch-radius-lg);background:var(--ch-panel);box-shadow:var(--ch-shadow-card)}
body.ch-admin-ui main>section>h1:first-child{margin-top:0;font-size:clamp(1.45rem,2vw,1.85rem);letter-spacing:-.025em}
body.ch-admin-ui main :where(h2,h3){letter-spacing:-.015em}
body.ch-admin-ui main :where(p,li,dd){line-height:1.55}
body.ch-admin-ui main :where(p,small,dt){color:var(--ch-muted)}
body.ch-admin-ui main a{color:#075fd1;text-underline-offset:.16em}
body.ch-admin-ui main :where(input:not([type=checkbox]):not([type=radio]),select,textarea){min-height:42px;padding:.55rem .65rem;border:1px solid var(--ch-line-strong);border-radius:var(--ch-radius-sm);background:#fff;color:var(--ch-ink)}
body.ch-admin-ui main textarea{min-height:110px}
body.ch-admin-ui main :where(input,select,textarea):focus-visible{outline:0;border-color:var(--ch-accent);box-shadow:var(--ch-focus)}
body.ch-admin-ui main :where(button,input[type=submit],input[type=button],a.button,.btn){min-height:40px;border-radius:var(--ch-radius-sm);font-weight:800}
body.ch-admin-ui main :where(table){width:100%;border-collapse:separate;border-spacing:0;border:1px solid var(--ch-line);border-radius:var(--ch-radius);overflow:hidden;background:#fff;font-size:.86rem}
body.ch-admin-ui main :where(th,td){padding:.7rem .75rem;border-bottom:1px solid var(--ch-line);vertical-align:top;text-align:left}
body.ch-admin-ui main thead th{background:var(--ch-soft);color:var(--ch-text);font-weight:800}
body.ch-admin-ui main tbody tr:last-child :where(th,td){border-bottom:0}
body.ch-admin-ui main tbody tr:hover{background:var(--ch-soft-2)}
body.ch-admin-ui main dl{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:.65rem;margin:1rem 0 0}
body.ch-admin-ui main dl>div{padding:.75rem;border:1px solid var(--ch-line);border-radius:var(--ch-radius-sm);background:var(--ch-soft-2)}
body.ch-admin-ui main dt{font-size:.72rem;font-weight:750}
body.ch-admin-ui main dd{margin:.2rem 0 0;color:var(--ch-ink);font-weight:800}
body.ch-admin-ui main :where(code,pre){font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
body.ch-admin-ui main pre{overflow:auto;padding:.9rem;border:1px solid var(--ch-line);border-radius:var(--ch-radius-sm);background:#071d37;color:#e8f1fb}

@media(max-width:900px){
  .ch-public-header__inner{width:min(100% - 1.5rem,var(--ch-wide-width));align-items:center}
  .ch-public-primary{width:100%}
  .cp87-pagehead,.cp86-pagehead{grid-template-columns:1fr}
  .cp87-actions,.cp86-actions{justify-content:flex-start}
  body.ch-admin-ui main>section{padding:1rem}
}
@media(max-width:620px){
  .ch-public-utility__inner,.ch-public-header__inner,.cp87-footer-inner{width:min(100% - 1.1rem,var(--ch-wide-width))}
  .ch-public-header__inner{min-height:68px}
  .cp87-page,.cp86-page,.cpf101-page{width:min(100% - 1.1rem,var(--ch-content-width))}
  .cp87-pagehead h1,.cp86-pagehead h1{font-size:1.9rem}
  .cf12-page>.cp87-tabs,.cu13-page>.cp87-tabs,.cf12-layout,.cf12-results,.cu13-shell,.pd20-shell,.pd20-hero,.pd20-detailhero,.pd20-breadcrumb,.pd30-vendorstrip,.pd30-pairs,.pd30-guidance,.pd30-related{width:min(100% - 1.1rem,var(--ch-wide-width))}
  .cp87-tabs,.cp86-topicnav{width:100%}
  body.ch-admin-ui main :where(table){font-size:.8rem}
}
@media(prefers-reduced-motion:reduce){
  body.ch-public-body *,body.ch-admin-ui *{scroll-behavior:auto!important;transition:none!important;animation:none!important}
}