/* SpecHub :: Engineering tools in the kit look (Batch G, 12 Oct 2026).
   Loaded after each tool's own <style>, scoped to .kt (the tool's .app-shell) so nothing else moves.
   Square number steps (C1), grey tints instead of pink, plain red labels, a full-height sidebar,
   and the Where / Save / Done pieces of the shared journey (includes/tools-desk.php). */

.kt{--acc-light:#F3F4F5;--acc-light2:#FAF8F5;--acc-border:#E9E2D9;--acc-text:#C24E1C;--kt-red:#F06C38;--kt-ink:#211D22;--kt-grey:#6B6463;--kt-line:#E9E2D9;--kt-green:#211D22}

/* header band: full width, the "Filed to" line on the right */
.kt .mx-ctxrow{margin-left:0!important;align-items:flex-end!important}
.kt-filed{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;font-size:14px;line-height:1.4;color:var(--kt-ink);padding-bottom:2px}
.kt-filed span{font-size:11.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--kt-grey)}
.kt-filed b{font-weight:700}
.kt-filed button{border:0;background:none;padding:0;font:inherit;font-weight:700;color:var(--kt-red);cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.kt-filed--none b{color:var(--kt-grey);font-weight:600}

/* full-height sidebar that stays put while the page scrolls */
.kt .sidebar{position:sticky;top:var(--kt-top,117px);left:auto;bottom:auto;height:calc(100vh - var(--kt-top,117px));flex:0 0 220px;align-self:flex-start;padding:22px 12px 40px}
.kt .main-content{margin-left:0;min-width:0;flex:1}
.kt .sidebar-section-label{font-size:11.5px;font-weight:800;letter-spacing:.08em;color:var(--kt-grey)}

/* steps: square numbers, C1 */
.kt .nav-item{border-radius:0;color:#3C4248;font-size:14px;padding:8px 10px;gap:11px}
.kt .nav-item:hover{background:#F3F4F5;color:var(--kt-ink)}
.kt .nav-item.active{background:#FFF9F9;color:var(--kt-ink);font-weight:700;box-shadow:inset 0 0 0 1.5px #F0A3A4}
.kt .nav-step{width:24px;height:24px;border-radius:0;background:#fff;border:1.5px solid #D8D0C5;color:var(--kt-grey);font-size:12.5px;font-weight:700}
.kt .nav-item.active .nav-step{background:var(--kt-red);border-color:var(--kt-red);color:#fff}
.kt .nav-item.done .nav-step{background:var(--kt-green);border-color:var(--kt-green);color:#fff}
.kt .nav-item.done.active .nav-step{background:var(--kt-red);border-color:var(--kt-red)}
.kt .nav-item.kt-off{opacity:.45;pointer-events:none}
.kt-sbtn{width:100%;display:flex;align-items:center;gap:8px;margin-top:6px;padding:9px 10px;border:1px solid var(--kt-line);background:#fff;color:var(--kt-ink);font:inherit;font-size:13.5px;white-space:nowrap;font-weight:600;cursor:pointer;text-align:left;border-radius:0}
.kt-sbtn:hover{border-color:#D8D0C5;background:#FAF8F5}
.kt-sbtn svg{flex-shrink:0;color:var(--kt-grey)}
.kt-sbtn--red{border-color:var(--kt-red);color:var(--kt-red)}
.kt-sbtn--red svg{color:var(--kt-red)}
.kt-sbtn--red:hover{background:#FFF9F9;border-color:var(--kt-red)}
.kt-slinks{margin:10px 2px 0;font-size:13px;line-height:1.5;color:var(--kt-grey)}
.kt-slinks button{border:0;background:none;padding:0;font:inherit;color:var(--kt-grey);text-decoration:underline;text-underline-offset:2px;cursor:pointer}
.kt-slinks button:hover{color:var(--kt-ink)}

/* cards: plain red labels, no dot, grey rules */
.kt .card{border-color:var(--kt-line);box-shadow:none}
.kt .card-title{color:var(--kt-red);font-weight:800;letter-spacing:.08em;border-bottom:1px solid #EFE8DF}
.kt .card-title-dot{display:none}
.kt .guide-num{border-radius:0;width:26px;height:26px;font-size:12.5px;font-weight:700}
.kt .badge{border-radius:0}
.kt .metric{background:#FAF8F5;border-color:var(--kt-line)}
.kt .metric-label{color:var(--kt-grey)}
.kt .row-cement td{background:#FAF8F5}
.kt .page-title{font-size:22px;font-weight:800;letter-spacing:-.01em;color:var(--kt-ink)}
.kt .page-desc{font-size:14.5px;color:#4A5057}
.kt .info-box{background:#FAF8F5;border-color:var(--kt-line);border-left-color:var(--kt-red);color:#3C4248}
.kt .wizbtn{box-shadow:none}
.kt .modpick button{border-radius:0}
.kt .modpick button.active{background:#FFF9F9;box-shadow:inset 0 0 0 1px var(--kt-red)}

/* Where / Done */
.kt-panel .page-header{margin-bottom:18px}
.kt-where,.kt-done{padding:24px 26px!important;max-width:980px}
.kt-lab{display:block;margin:0 0 10px;font-size:11.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--kt-red)}
.kt-now b{display:block;font-size:20px;font-weight:800;color:var(--kt-ink);line-height:1.3}
.kt-now s{display:block;text-decoration:none;font-size:14.5px;color:var(--kt-grey);margin-top:2px}
.kt-cols{display:grid;grid-template-columns:1fr 1fr;gap:26px}
.kt-list{display:flex;flex-direction:column;gap:8px;max-height:360px;overflow:auto;padding:2px}
.kt-opt{display:flex;align-items:center;gap:12px;border:1.5px solid var(--kt-line);padding:11px 14px;cursor:pointer;background:#fff;transition:border-color .15s}
.kt-opt:hover{border-color:#D8D0C5}
.kt-opt:has(input:checked){border-color:var(--kt-red);background:#FFF9F9}
.kt-opt input{accent-color:var(--kt-red);width:auto;margin:0}
.kt-opt b{display:block;font-size:14.5px;font-weight:700;color:var(--kt-ink)}
.kt-opt s{display:block;text-decoration:none;font-size:13px;color:var(--kt-grey)}
.kt-new{margin-top:10px;width:100%;border:1.5px dashed #D8D0C5;background:#fff;padding:11px 14px;font:inherit;font-size:14px;font-weight:700;color:var(--kt-ink);cursor:pointer;text-align:left}
.kt-new:hover{border-color:var(--kt-red);color:var(--kt-red)}
.kt-empty{font-size:14px;color:var(--kt-grey);margin:0;padding:12px 0}
.kt-empty--first{padding:0 0 14px;color:#3C4248;font-size:15px}
.kt-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:20px}
.kt-row--end{padding-top:18px;border-top:1px solid #EFE8DF}
.kt-btn{display:inline-flex;align-items:center;gap:8px;background:var(--kt-red);color:#fff;border:1.5px solid var(--kt-red);padding:11px 22px;font:inherit;font-size:14.5px;font-weight:700;cursor:pointer;text-decoration:none;border-radius:0}
.kt-btn:hover{background:#D9561F;border-color:#D9561F;color:#fff}
.kt-btn:disabled{opacity:.4;cursor:default;background:var(--kt-red);border-color:var(--kt-red)}
.kt-btn--ghost{background:#fff;color:var(--kt-ink);border-color:#D8D0C5}
.kt-btn--ghost:hover{background:#FAF8F5;color:var(--kt-ink);border-color:#6B6463}
.kt-link{border:0;background:none;padding:0;font:inherit;font-size:14px;font-weight:600;color:var(--kt-grey);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.kt-link:hover{color:var(--kt-ink)}
.kt-note{margin:12px 0 0;font-size:13.5px;color:var(--kt-grey)}
.kt-why{max-width:980px;margin:0 0 14px;padding:12px 16px;background:#FFF9F9;box-shadow:inset 0 0 0 1.5px #F0A3A4;font-size:14.5px;font-weight:600;color:var(--kt-ink)}
.kt-done__h{display:flex;gap:16px;align-items:flex-start}
.kt-done__h b{display:block;font-size:20px;font-weight:800;color:var(--kt-ink);line-height:1.3}
.kt-done__h s{display:block;text-decoration:none;font-size:14.5px;color:#4A5057;margin-top:4px;line-height:1.5}
.kt-tick{flex:0 0 36px;height:36px;background:var(--kt-green);position:relative}
.kt-tick::after{content:"";position:absolute;left:13px;top:7px;width:8px;height:15px;border:solid #fff;border-width:0 3px 3px 0;transform:rotate(45deg)}
.kt-tick--err{background:#C24E1C}
.kt-tick--err::after{left:16px;top:7px;width:0;height:13px;border-width:0 3px 0 0;transform:none;box-shadow:0 18px 0 -0px #fff}

/* save panel */
.kt-check{display:flex;align-items:center;gap:8px;margin:4px 0 14px;font-size:14px;color:#3C4248;cursor:pointer}
.kt-check input{width:auto;accent-color:var(--kt-red)}
.kt-msg{margin-top:14px;padding:12px 14px;font-size:14px;line-height:1.5}
.kt-msg b{display:block}
.kt-msg span{display:block;color:#4A5057}
.kt-msg a{display:inline-block;margin-top:6px;font-weight:700;color:var(--kt-red)}
.kt-msg--ok{background:#F5EFE8;color:#211D22}
.kt-msg--err{background:#FFF9F9;box-shadow:inset 0 0 0 1.5px #F0A3A4;color:#B8471A}
.kt-alt{margin:18px 0 0;padding-top:14px;border-top:1px solid #EFE8DF;font-size:13.5px;color:var(--kt-grey)}
.kt-alt .kt-link{font-size:13.5px}

@media (max-width:860px){
  /* Batch J: on phones and small tablets the sidebar becomes a bar under "Filed to" instead of disappearing,
     so the steps and Save / Open / Start over / Manual (and Manage admixtures) stay in reach */
  .kt div:has(> nav.sidebar){flex-direction:column}
  .kt .sidebar{display:flex!important;flex-wrap:wrap;align-items:center;gap:6px;position:static;top:auto;height:auto;flex:none;width:auto;align-self:stretch;padding:12px 16px 14px;border-right:0;border-bottom:1px solid #E9E2D9;background:#fff}
  .kt .sidebar .sidebar-section-label{display:none}
  .kt .sidebar > div[id^="navlist-"]:not([style*="none"]){display:contents!important}
  .kt .sidebar .nav-item{width:auto;flex:0 0 auto;font-size:0;padding:3px;gap:0;margin:0}
  .kt .sidebar .nav-item .nav-step{font-size:12.5px;width:28px;height:28px}
  .kt .sidebar .nav-item.active{font-size:13.5px;gap:8px;padding:3px 12px 3px 3px}
  .kt .sidebar > div:not([id^="navlist-"]){flex:1 1 100%;display:flex;flex-wrap:wrap;gap:6px;margin:6px 0 0!important;padding:10px 0 0!important;border-top:1px solid #EFE8DF!important}
  .kt .sidebar .kt-sbtn{width:auto;flex:1 1 calc(50% - 6px);margin:0;font-size:13px;padding:9px 10px}
  .kt .sidebar .kt-slinks{flex:1 1 100%;margin:4px 2px 0}
  .kt-cols{grid-template-columns:1fr}
  .kt-where,.kt-done{padding:18px 16px!important}
  .kt-filed{font-size:13.5px}
}

/* help tips (Batch I): the (i) beside a label, and its callout. Text from includes/tools-help.json */
.kh-i{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;margin:-4px 0 -4px 3px;padding:0;border:0;background:none;color:#8A9097;cursor:help;vertical-align:middle;border-radius:50%;flex-shrink:0}
.kh-i:hover,.kh-i[aria-expanded="true"]{color:#F06C38;background:#FFF1F1}
.kh-i:focus-visible{outline:2px solid #F06C38;outline-offset:1px}
th .kh-i{margin-left:2px}
.kh-pop{position:fixed;z-index:3000;width:340px;max-width:calc(100vw - 24px);background:#fff;color:#211D22;border:1px solid #D5D9DD;border-top:1px solid #E9E2D9;box-shadow:0 10px 30px rgba(20,24,30,.16);padding:13px 15px 12px;font:400 13.5px/1.5 Inter,'DM Sans',system-ui,sans-serif;text-align:left;text-transform:none;letter-spacing:0}
.kh-pop::before{content:"";position:absolute;top:-9px;left:var(--kh-arrow,20px);width:12px;height:12px;background:#F06C38;transform:translateX(-50%) rotate(45deg);z-index:-1}
.kh-pop--up{border-top:1px solid #D5D9DD;border-bottom:1px solid #E9E2D9}
.kh-pop--up::before{top:auto;bottom:-9px}
.kh-t{font-weight:800;font-size:14px;margin-bottom:4px}
.kh-w{margin:0 0 8px;color:#2B3036}
.kh-r{display:grid;grid-template-columns:96px 1fr;gap:8px;padding:6px 0;border-top:1px dashed #E9E2D9;font-size:13px}
.kh-r b{font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:#6B6463;padding-top:2px}
.kh-n{margin:8px 0 0;padding:7px 9px;background:#FFF8F4;border-left:1px solid #E0D7CC;font-size:13px}
.kh-m{display:inline-block;margin-top:9px;font-weight:700;font-size:13px;color:#F06C38;text-decoration:none}
.kh-m:hover{text-decoration:underline}
.kh-pop--sheet{left:0!important;right:0;bottom:0;top:auto!important;width:auto;max-width:none;max-height:70vh;overflow:auto;border-top:1px solid #E9E2D9;border-bottom:0;padding:16px 18px 22px;box-shadow:0 -8px 30px rgba(20,24,30,.22)}
.kh-pop--sheet::before{display:none}
@media print{.kh-i,.kh-pop{display:none!important}}
a.kt-sbtn{text-decoration:none}
.kh-pop--free::before{display:none}

/* Open from Design Desk (Batch J): grouped list of every saved design, with search */
.kt-og{display:flex;flex-direction:column;gap:8px;margin-bottom:18px}
.kt-og__h{font-size:11.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:#6B6463;display:flex;gap:8px;align-items:baseline}
.kt-og__h em{font-style:normal;font-weight:700;color:#6B6463}
.kt-og[hidden],.mxopen-row[hidden]{display:none!important}
.kt-osearch{width:100%;padding:10px 12px;border:1.5px solid #E9E2D9;font:inherit;font-size:14px;margin-bottom:14px;border-radius:0}
.kt-osearch:focus{outline:none;border-color:#F06C38}