/* ==================================================================
   SpecHub stage 14 C: the UX review fixes (UX-01 to UX-29), in one sheet.
   Linked once from sh_bar() in includes/chrome.php, after every page's own CSS.
   Rules for the shared chrome (top bar, menu, footer) apply on every page.
   Rules for page content start with .ux14, the body class sh_head() sets on
   every page except Surface Studio, so Surface Studio stays as it is.
   ================================================================== */

/* ---------- UX-01: one way to move around a section page ---------- */
/* the choice trail says the same as the breadcrumb, shorter: the breadcrumb goes at every width */
body.ux14:has(.s9t) .k-head .k-crumb{display:none}
/* the filter box is not drawn inside another box */
.ux14 .s9f:has(> .s9f__main > .s9k){border:0;background:transparent}
.ux14 .s9f:has(> .s9f__main > .s9k) > .s9f__main{padding:0}

/* ---------- UX-02: one way back, inside the header band ---------- */
.sh-back,.spx .sh-back,.ux14 a.sh-back{color:#D9561F!important;margin:0!important;font-size:14px;font-weight:700}
.sh-hasback>.sh-crumbold{display:none!important}
.sh-hasback{display:flex;align-items:center}

/* ---------- UX-03: 44px tap targets on a phone ---------- */
@media (max-width:640px){
  .foot__cols nav a,.s9gd__a a,.s9s__b a,.s9t__m a,.hlp__toc a,.bd-btn--sm,.kt .nav-item,.k-chip,.kcity__chip,.ubar__menu a{min-height:44px!important}
  .ctxbar__in a,.s9e a,.s9k a.s9k__b,.s9k a.s9k__x,.sup-tabs a,.admbar__path a{display:inline-flex;align-items:center;min-height:44px}
  .ubar__in2>a.ubar__lib{display:inline-flex;align-items:center;min-height:44px;min-width:44px;justify-content:center}
  .ubar__acct summary{display:flex;align-items:center;min-height:44px}
  .ctxbar__in{padding-top:2px;padding-bottom:2px;row-gap:0}
}

/* ---------- UX-04: the footer "Ask DCP" keeps its padding ---------- */
.foot .foot__ask{padding:0 20px;display:inline-flex}

/* ---------- UX-09: one selected look: tint with a 1px orange line ---------- */
.ux14 .aca-fmt button[aria-pressed=true],.ux14 .s9s__b a.on,.ux14 .s9gd__a a.on,.ux14 .k-seg__b[aria-pressed="true"],
.ux14 .k-chip--on,.ux14 .k-chip.k-chip--on,.ux14 .kcity__chip.is-on,.ux14 .k-row--on,.ux14 .s9t__d[open] summary,
.ux14 .kt .nav-item.active{
  background:#FDF1EB!important;box-shadow:inset 0 0 0 1px #F06C38!important;border-color:#F06C38!important;color:#211D22!important}
.ux14 .k-chip--on span,.ux14 .kcity__chip.is-on span{color:#6B6463!important}
.ux14 .k-aca__pwc[aria-pressed="true"]{background:#FDF1EB!important;box-shadow:inset 0 0 0 1px #F06C38!important;border-color:#F06C38!important}

/* ---------- UX-10: chips one height, tags one look ---------- */
.ux14 .k-chip,.ux14 .kcity__chip,.ux14 .s9gd__a a,.ux14 .s9s__b a{min-height:40px;box-sizing:border-box;font-size:14px}
.ux14 .spx .chip,.ux14 .spx .chip.o,.ux14 .s9l__f i,.ux14 .k-result__f span{font-size:12.5px;font-weight:600;border:1px solid #E4DDD3;background:#fff;color:#3A3537;padding:3px 8px;line-height:1.4}
@media (max-width:640px){.ux14 .k-chip,.ux14 .kcity__chip,.ux14 .s9gd__a a,.ux14 .s9s__b a{min-height:44px}}

/* ---------- UX-11 and UX-13: one secondary button: white, 1px warm line ---------- */
.ux14 .spx .btn.ol,.ux14 .spx .dlg .btn:not(.pri),.ux14 .spx .pf .btn:not(.pri){background:#fff;border:1px solid #D8D0C6!important;color:#211D22}
.ux14 .spx .btn.ol:hover,.ux14 .spx .dlg .btn:not(.pri):hover,.ux14 .spx .pf .btn:not(.pri):hover{border-color:#211D22!important;background:#fff}
/* "Add … to Design Desk" is the main action on every item page */
.ux14 .spx .topadd #topBtn{background:#F06C38;border:1px solid #F06C38!important;color:#fff}
.ux14 .spx .topadd #topBtn:hover{background:#D9561F;border-color:#D9561F!important}
.ux14 .bd-btn--ghost,.ux14 .kt-sbtn{background:#fff;border:1px solid #D8D0C6;color:#211D22;min-height:40px}
.ux14 .bd-btn--ghost:hover,.ux14 .kt-sbtn:hover{border-color:#211D22}
/* Support: the footer's "Ask DCP" column is not needed on the Support page itself */
body:has(main.sup:not(.sua)) .foot__help{display:none}
/* System Library cards: a text link, not an orange button on every card */
.ux14 .ksl__go .k-card__go{font-size:14px;font-weight:700;color:#C24E1C;text-decoration:none}
.ux14 .ksl__go .k-card__go:hover{text-decoration:underline}
.ux14 .ksl__none{display:flex;align-items:center;justify-content:center;width:100%;height:100%;min-height:120px;font-size:13.5px;font-weight:600;color:#6B6463;background:#FAF8F5}

/* ---------- UX-06: statuses are pills, not buttons ---------- */
.ux14 .sup-st{min-width:0;box-shadow:none!important;border:0!important;font-size:12.5px;font-weight:700;padding:4px 11px}
.ux14 .sup-st--new,.ux14 .sup-st--open{background:#F5EFE8;color:#211D22}
.ux14 .sup-st--answered{background:rgba(240,108,56,.10);color:#C24E1C}
.ux14 .sup-st--closed{background:#F2EFEB;color:#6B6463}
.ux14 .sup-new.k-pill{color:#C24E1C}
.ux14 .k-pill--off{background:#F2EFEB;color:#6B6463}

/* ---------- UX-12: the engineering tools do not restyle the shared chrome ---------- */
.ubar,.nav,.foot{font-size:16px;line-height:normal}
.ubar .ubar__reg select{font-size:13.5px!important;line-height:normal!important;height:auto!important;min-height:0!important;padding:2px 0!important;border:0!important;background-color:transparent!important;background-image:none!important;box-shadow:none!important;width:auto!important;-webkit-appearance:auto!important;appearance:auto!important}
.foot .foot__ask{font-size:16px}
.ux14 .kt-h1{font-size:clamp(26px,2.6vw,34px)!important;font-weight:600!important;letter-spacing:-.03em!important;line-height:1.1!important;margin:0!important}
.ux14 .kt .nav-item.done .nav-step,.ux14 .nav-item.done .num{background:#fff!important;border-color:#F06C38!important;color:#D9561F!important}
.ux14 .kt .nav-item.active .nav-step,.ux14 .kt .nav-item.done.active .nav-step{background:#F06C38!important;border-color:#F06C38!important;color:#fff!important}
.ux14 .info-box,.ux14 .kt .info-box{border-left-width:1px!important;border-left-color:#E9E2D9!important}
.ux14 .kt-tick{background:#F06C38}

/* ---------- UX-14: the header band reaches up to the bar above it ---------- */
.ux14 main.hlp,.ux14 main.sup{--k-up:30px}
.ux14 main.dfn{--k-up:28px}

/* ---------- UX-15: a shorter phone header: Menu and Design Desk on the logo row ---------- */
@media (max-width:640px){
  .nav .nav__in{flex-wrap:wrap;row-gap:10px}
  .nav .nav__r{display:contents}
  .nav .nav__brand{margin-right:auto}
  .nav .nav__menu{order:2}
  .nav .desk-btn{order:3}
  .nav .srch{order:5;flex:1 1 100%}
  .nav .nav__in{column-gap:10px}
  .nav .nav__brand{gap:10px}
  .nav .nav__brand img{height:44px;width:auto}
  .nav .nav__menu{padding:9px 12px}
  .nav .desk-btn{padding-left:14px;padding-right:14px;margin-left:0}
}
.nav .desk-btn .dd-1{all:unset;margin-right:-4px}
@media (max-width:430px){.nav .desk-btn .dd-1{display:none}}

/* ---------- UX-16: the phone menu: tasks first, then your account ---------- */
.nav .nav__links .nav__mobh{display:none}
@media (max-width:900px){
  .nav.is-open .nav__links .nav__mobh{display:block;font-size:12px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:#6B6463;padding:22px 12px 6px;border:0}
  .nav.is-open .nav__links .nav__mob .ubar__new{margin-left:10px;vertical-align:3px}
}

/* ---------- UX-17: admin pages: one path, warm bar, tabs that wrap ---------- */
body:has(.admbar) .k-crumb,body:has(.admbar) .cp__h .k-crumb{display:none}
.sup-tabs{flex-wrap:wrap}
@media (max-width:640px){
  .sup-tabs a{flex:1 1 auto}
  .sup-listbar{flex-wrap:wrap;gap:10px}
}

/* ---------- UX-18: the count badge is round ---------- */
.ubar__new{border-radius:9px!important}

/* ---------- UX-19: one look for step numbers: round, orange line; the current one filled ---------- */
.ux14 .hlp__steps li::before{border-radius:50%;width:28px;height:28px;background:#fff;border:1.5px solid #F06C38;color:#D9561F}
.ux14 .k-num{border-radius:50%!important;border-color:#F06C38;color:#D9561F}
.ux14 .spx .sh .sn,.ux14 .spx .st .n{background:#fff;border-color:#F06C38;color:#D9561F}
.ux14 .spx .st.on .n,.ux14 .spx .tray .sn{background:#F06C38!important;border-color:#F06C38!important;color:#fff!important}
.ux14 .spx .st.done .n{background:#fff!important;border-color:#F06C38!important;color:#D9561F!important}
.ux14 .spx .nl .no{background:#fff;border:1.5px solid #F06C38;color:#D9561F;box-sizing:border-box}

/* ---------- UX-21: ticked boxes in orange, labels in the site font ---------- */
.ux14 input[type=checkbox],.ux14 input[type=radio]{accent-color:#F06C38}
.ux14 .spx .upick,.ux14 .spx .kick,.ux14 .spx .grphd,.ux14 .spx .fact span,.ux14 .spx .nl small,.ux14 .spx .side h4,.ux14 .spx .used a span,.ux14 .spx .cc b{font-family:var(--k-font,'Inter',system-ui,sans-serif)!important}
.ux14 .spx .upick{font-size:12px;font-weight:700;letter-spacing:.06em}

/* ---------- UX-22: nothing under 12px ---------- */
.ux14 .s9t__k,.ux14 .s9l__n em,.ux14 .hm__kick,.ux14 .k-card__k,.ux14 .k-aca__obj .k-pill,.ux14 .dstool__tag,.ux14 .spx .kick,.ux14 .spx .fact span,.ux14 .spx .nl small{font-size:12px}
.ux14 .kcity__tag{font-size:clamp(12px,1.2cqw,14px)}

/* ---------- UX-26: one header between 901 and 1279 ---------- */
@media (min-width:901px) and (max-width:1279px){
  .nav .nav__brand img{height:56px;width:auto}
  .nav .srch{position:static;width:auto;flex:0 1 220px}
  .nav .srch input,.nav .srch input:focus{position:static;transform:none;width:220px;margin:0;color:var(--black,#211D22);cursor:text;box-shadow:none}
  .nav .srch input::placeholder{color:var(--grey-light,#9A9290)}
}
@media (min-width:1280px) and (max-width:1420px){.nav .nav__brand{margin-right:12px}}
/* follow-ups after the first check */
.ux14 .ksl__pic,.ux14 .ksl__pic:hover,.ux14 .ksl__go a,.ux14 .ksl__go a:hover{text-decoration:none!important}
.ux14 .ksl__go a:hover{text-decoration:underline!important}
.ux14 .spx .st.on{border-color:#F06C38!important;background:#FDF1EB!important;box-shadow:inset 0 0 0 1px #F06C38}