/* Final pre-rollout interface cleanup.
   Visual-only layer: modal chrome, spacing, click affordances, and small-screen ergonomics.
   Loaded last so it can reconcile older pilot-era style layers without changing workflows. */

:root{
  --control-h:40px;
  --control-gap:9px;
  --modal-pad-x:22px;
}

/* ---- Modal / pop-out shell ------------------------------------------------ */
#ov.overlay{
  padding:24px!important;
  align-items:center!important;
  overflow:hidden!important;
  background:rgba(29,25,33,.46)!important;
  backdrop-filter:blur(10px) saturate(108%)!important;
  -webkit-backdrop-filter:blur(10px) saturate(108%)!important;
}
#ov .modal{
  display:flex!important;
  flex-direction:column!important;
  width:min(1020px,calc(100vw - 48px))!important;
  max-height:calc(100dvh - 48px)!important;
  padding:0!important;
  overflow:hidden!important;
  border:1px solid rgba(91,79,101,.16)!important;
  border-radius:24px!important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.72),
    0 30px 90px rgba(35,29,40,.23),
    0 8px 26px rgba(55,46,64,.12)!important;
}
#ov .modal:before{
  top:0!important;
  left:0!important;
  right:0!important;
  height:88px!important;
  border-radius:0!important;
  opacity:.48!important;
}
#ov .modalhead{
  position:relative!important;
  top:auto!important;
  z-index:8!important;
  flex:0 0 auto!important;
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:18px!important;
  min-height:78px!important;
  margin:0!important;
  padding:18px var(--modal-pad-x) 16px!important;
  border-bottom:1px solid rgba(91,79,101,.12)!important;
  background:
    radial-gradient(ellipse 58% 120% at 8% 0%,rgba(255,255,255,.62),transparent 72%),
    linear-gradient(145deg,rgba(255,255,255,.38),rgba(235,229,239,.18))!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.55)!important;
  backdrop-filter:blur(18px) saturate(116%)!important;
  -webkit-backdrop-filter:blur(18px) saturate(116%)!important;
}
#ov .modalhead>div{
  min-width:0!important;
  flex:1 1 auto!important;
}
#ov #mt{
  margin:0!important;
  color:var(--ink)!important;
  font-family:var(--font-display,Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif)!important;
  font-size:clamp(21px,2.2vw,27px)!important;
  font-weight:650!important;
  line-height:1.12!important;
  letter-spacing:-.025em!important;
  text-wrap:balance;
}
#ov #ms{
  max-width:760px!important;
  margin-top:5px!important;
  font-size:12px!important;
  line-height:1.4!important;
  color:color-mix(in srgb,var(--muted) 92%,var(--ink) 8%)!important;
  overflow-wrap:anywhere;
}
#ov #mb{
  flex:1 1 auto!important;
  min-height:0!important;
  margin-top:0!important;
  padding:18px var(--modal-pad-x) 22px!important;
  overflow-y:auto!important;
  overflow-x:hidden!important;
  overscroll-behavior:contain!important;
  -webkit-overflow-scrolling:touch;
  scrollbar-gutter:stable;
}
#ov #mb>:first-child{margin-top:0!important}
#ov #mb>:last-child{margin-bottom:0!important}
#ov .close{
  appearance:none!important;
  flex:0 0 38px!important;
  display:grid!important;
  place-items:center!important;
  width:38px!important;
  height:38px!important;
  min-width:38px!important;
  min-height:38px!important;
  padding:0!important;
  margin:0!important;
  border:1px solid rgba(91,79,101,.13)!important;
  border-radius:999px!important;
  background:rgba(255,255,255,.48)!important;
  color:var(--ink)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.68),0 5px 16px rgba(54,45,61,.06)!important;
  font-size:24px!important;
  font-weight:400!important;
  line-height:1!important;
  cursor:pointer!important;
  transition:background .15s ease,border-color .15s ease,transform .12s ease,box-shadow .15s ease!important;
}
#ov .close:hover{
  transform:translateY(-1px)!important;
  border-color:color-mix(in srgb,var(--accent) 30%,var(--border))!important;
  background:rgba(255,255,255,.68)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.78),0 8px 18px rgba(54,45,61,.09)!important;
}
#ov .close:active{transform:translateY(0)!important}

/* ---- Controls / button rhythm ------------------------------------------- */
.btn,.tab{
  min-height:var(--control-h);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  padding:9px 13px!important;
  line-height:1.15;
  white-space:normal;
  text-align:center;
}
.btn:focus-visible,.tab:focus-visible,.close:focus-visible,.click:focus-visible,.item-link:focus-visible{
  outline:2px solid color-mix(in srgb,var(--accent) 62%,#fff)!important;
  outline-offset:2px!important;
}
#ov .backrow,#ov .tabs,#ov .integration-actions,#ov .resource-actions,#ov .recvchoices,#ov .editor-actions,#ov .item-detail-actions,#ov .cost-hub-actions,#ov .cost-feature-actions{
  gap:var(--control-gap)!important;
  row-gap:var(--control-gap)!important;
}
#ov .backrow,#ov .item-detail-actions,#ov .integration-actions,#ov .resource-actions,#ov .editor-actions{
  margin-top:14px!important;
  margin-bottom:14px!important;
}
#ov .item-detail-actions:empty{display:none!important}

/* Clickable surfaces should look and behave clickable without being loud. */
.click,.listrow,.truth-action-card,.settings-card,.mpl-category-head,.mpl-family-head,.sm-family-head{
  transition:background .15s ease,border-color .15s ease,box-shadow .15s ease,transform .12s ease!important;
}
.click:hover,.listrow:hover,.truth-action-card:hover,.settings-card:hover{
  border-color:color-mix(in srgb,var(--accent) 20%,var(--border))!important;
}
button:not(:disabled){touch-action:manipulation}
button:disabled{filter:saturate(.65)}

/* ---- Modal internals ----------------------------------------------------- */
#ov .section{
  margin-top:22px!important;
  margin-bottom:11px!important;
}
#ov .section:first-child{margin-top:0!important}
#ov .note,#ov .err,#ov .confirmbox{
  line-height:1.45!important;
}
#ov .field label,#ov .k{
  line-height:1.2!important;
}
#ov .field input,#ov .field select,#ov textarea{
  min-height:42px;
}
#ov textarea{line-height:1.4}
#ov .card{
  min-width:0;
}
#ov .grid{
  align-items:stretch;
}
#ov details>summary{
  outline:none;
}
#ov details>summary:focus-visible{
  outline:2px solid color-mix(in srgb,var(--accent) 56%,#fff);
  outline-offset:3px;
  border-radius:8px;
}

/* Item detail is a high-frequency nested workspace; keep it calm and aligned. */
#ov .item-detail-actions{
  display:flex!important;
  flex-wrap:wrap!important;
  align-items:center!important;
}
#ov .item-detail-section{
  margin-top:18px!important;
  padding-top:17px!important;
  border-top:1px solid rgba(91,79,101,.11)!important;
}
#ov .item-detail-section:first-of-type{
  margin-top:12px!important;
}
#ov .item-detail-facts{
  gap:10px!important;
}
#ov .item-detail-facts .card{
  min-height:92px!important;
  padding:14px 15px!important;
}
#ov .item-detail-readonly{
  min-width:0!important;
  padding:13px 14px!important;
  border-radius:15px!important;
  background:linear-gradient(145deg,rgba(255,255,255,.38),rgba(255,255,255,.16))!important;
  border-color:rgba(91,79,101,.11)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.46)!important;
  overflow-wrap:anywhere;
}
#ov .item-detail-section .v{
  font-size:25px!important;
  line-height:1.05!important;
}

/* Tables/action controls: prevent cramped micro-buttons and ragged baselines. */
.table td .btn,.table td .tab,.sm-record .btn,.mpl-service-row .btn{
  min-height:34px;
  padding:7px 10px!important;
}
td:last-child .btn+ .btn,td:last-child button+button{
  margin-left:6px;
}

/* ---- Small screens ------------------------------------------------------- */
@media(max-width:700px){
  :root{--modal-pad-x:16px;--control-h:42px}
  #ov.overlay{
    align-items:flex-end!important;
    padding:0!important;
  }
  #ov .modal{
    width:100%!important;
    max-height:92dvh!important;
    border-left:0!important;
    border-right:0!important;
    border-bottom:0!important;
    border-radius:22px 22px 0 0!important;
    padding-bottom:env(safe-area-inset-bottom,0px)!important;
  }
  #ov .modalhead{
    min-height:70px!important;
    padding:15px var(--modal-pad-x) 13px!important;
    gap:12px!important;
  }
  #ov #mt{font-size:21px!important}
  #ov #ms{font-size:11px!important;margin-top:4px!important}
  #ov #mb{padding:16px var(--modal-pad-x) 20px!important}
  #ov .close{
    flex-basis:40px!important;
    width:40px!important;
    height:40px!important;
    min-width:40px!important;
    min-height:40px!important;
  }
  #ov .item-detail-actions .btn{
    flex:1 1 180px;
  }
  #ov .item-detail-facts{
    grid-template-columns:1fr 1fr!important;
  }
}

@media(max-width:480px){
  #ov .item-detail-facts{grid-template-columns:1fr!important}
  #ov .item-detail-actions .btn{flex:1 1 100%}
  #ov .modal .two,#ov .modal .three,#ov .modal .four{grid-template-columns:1fr!important}
  td:last-child .btn+ .btn,td:last-child button+button{margin-left:0;margin-top:6px}
}

@media(prefers-reduced-motion:reduce){
  .btn,.tab,.close,.click,.listrow,.truth-action-card,.settings-card,.mpl-category-head,.mpl-family-head,.sm-family-head{transition:none!important}
}