/* Consolidated Summary price card, signed-out headline scale, floating AI Analysis action,
   mobile logo spacing, and themed plan-change refresh icon. Loaded last so it settles the
   earlier dated patch layers. */

/* ---- Summary: single Suggested Selling Price card ------------------------------------ */
/* The Detailed Cost Summary hero was removed; its icon and profit/fee/rounding breakdown now
   live in the estimate tile that sits above the break-even and profit comparisons. */
.priceEstimateTile.suggested{
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  grid-template-areas:"icon label" "icon value" "icon note" "steps steps";
  align-items:start;
  column-gap:20px;
  row-gap:6px;
}
.priceEstimateTile.suggested>span:not(.suggestedPriceTileIcon){grid-area:label;align-self:end}
.priceEstimateTile.suggested>b{grid-area:value}
.priceEstimateTile.suggested>em{grid-area:note}
.suggestedPriceTileIcon{
  grid-area:icon;
  align-self:center;
  display:grid;
  place-items:center;
  width:84px;
  height:84px;
  border-radius:50%;
  border:1px solid color-mix(in srgb,var(--accent) 45%,var(--line));
  background:color-mix(in srgb,var(--accent) 16%,var(--surface-raised,var(--panel)));
}
.suggestedPriceTileIcon img{width:50px;height:50px;object-fit:contain}
#suggestedPriceBreakdown{grid-area:steps;margin-top:6px}
#suggestedPriceBreakdown:empty{display:none}

@media(max-width:640px){
  .priceEstimateTile.suggested{
    grid-template-columns:minmax(0,1fr);
    grid-template-areas:"icon" "label" "value" "note" "steps";
    justify-items:center;
    text-align:center;
  }
  .suggestedPriceTileIcon{width:64px;height:64px}
  .suggestedPriceTileIcon img{width:38px;height:38px}
  #suggestedPriceBreakdown{justify-content:center}
}

/* ---- Plan change: themed refresh icon ------------------------------------------------ */
/* refresh.svg is a filled mark, so the stroke-based icon rule has to be overridden. It keeps
   currentColor and therefore still follows the accent/complete/error states of the toast. */
.planProgressIcon svg.planRefreshIcon{
  width:25px;
  height:25px;
  fill:currentColor!important;
  stroke:none!important;
}

/* ---- Signed-out showcase headlines --------------------------------------------------- */
/* Projects, Profiles, and Inventory previously ran at three different oversized clamps. */
body .projectReferenceShowcase .projectReferenceHeadline h2,
body .inventoryReferenceShowcase .inventoryReferenceHeadline h2,
body .profileInfoHeader h2,
body .inventoryReplicaIntro h2,
body .showcaseV3Header h2{
  max-width:38ch!important;
  margin:12px 0 10px!important;
  font-size:clamp(1.45rem,2.1vw,1.95rem)!important;
  font-weight:800!important;
  line-height:1.18!important;
  letter-spacing:-.015em!important;
  text-transform:none!important;
}
body .projectReferenceShowcase .projectReferenceHeadline h2 em{
  color:var(--accent);
  font-style:normal;
}

@media(max-width:760px){
  body .projectReferenceShowcase .projectReferenceHeadline h2,
  body .inventoryReferenceShowcase .inventoryReferenceHeadline h2,
  body .profileInfoHeader h2,
  body .inventoryReplicaIntro h2,
  body .showcaseV3Header h2{
    font-size:clamp(1.28rem,4.4vw,1.62rem)!important;
    line-height:1.22!important;
  }
}

/* Profiles injected a decorative title icon next to headings that already carry their own
   icon tile, which read as a duplicate. Projects and Inventory already suppress these. */
/* #materials is required here: an earlier `#materials h2 > span:last-child{display:block!important}`
   rule outranks a class-only selector. */
#materials .profileInformationShowcase h2>.titleIcon,
#materials .profileInformationShowcase h3>.titleIcon,
#materials .profileInfoHeadline h2>.titleIcon,
#materials .profilePreviewHeading h3>.titleIcon,
.profileInformationShowcase h2>.titleIcon,
.profileInformationShowcase h3>.titleIcon,
.profileInfoHeadline h2>.titleIcon,
.profilePreviewHeading h3>.titleIcon{display:none!important}

/* ---- Mobile: reclaim the empty band above the logo ----------------------------------- */
/* .hero reserved a flat 154px for the absolutely positioned account row, which is roughly right
   when signed in (the row grows a renew badge and upgrade button) but leaves a dead band when
   signed out. updates-20260718.js measures the row and publishes --hero-utility-space, so the
   reserved height now tracks the content instead of a worst-case constant. */
@media(max-width:760px){
  /* Static on purpose. This was measured in JS after paint, which meant the header reserved one
     height on first render and a different one once the account row resolved — the logo visibly
     dropped a few seconds after load. A fixed reservation that clears the tallest state (signed
     in, with renew badge and upgrade button) trades a little slack when signed out for no shift. */
  body .hero{padding-top:140px!important}
  body .hero .appLogo{margin-top:0!important}
}
@media(max-width:620px){
  body .appLogo{
    transform:translateY(-10px)!important; /* horizontal nudge removed: it pushed the logo off-centre on phones */
    margin-bottom:-8px!important;
  }
}

/* ---- AI Analysis: floating action beside Support ------------------------------------- */
#floatingActionDock{
  position:fixed;
  z-index:906;
  right:18px;
  bottom:76px;
  display:flex;
  align-items:center;
  gap:9px;
}
#floatingActionDock .supportChatButton,
#floatingActionDock .aiAnalysisFloatButton{
  position:static!important;
  right:auto!important;
  bottom:auto!important;
}
.aiAnalysisFloatButton{
  display:flex;
  align-items:center;
  gap:8px;
  min-height:42px;
  padding:9px 14px;
  border:1px solid color-mix(in srgb,var(--accent) 72%,var(--line));
  border-radius:999px;
  background:linear-gradient(145deg,var(--surface-raised,var(--panel)),color-mix(in srgb,var(--accent) 16%,var(--surface-raised,var(--panel))));
  color:var(--text);
  box-shadow:0 13px 30px rgba(0,0,0,.3),0 0 18px color-mix(in srgb,var(--accent) 20%,transparent);
  font:650 .78rem/1 var(--app-font,system-ui);
  cursor:pointer;
  transition:transform .18s ease,box-shadow .18s ease;
}
.aiAnalysisFloatButton:hover{
  transform:translateY(-2px);
  box-shadow:0 16px 34px rgba(0,0,0,.34),0 0 24px color-mix(in srgb,var(--accent) 34%,transparent);
}
.aiAnalysisFloatButton svg{
  width:19px;
  height:19px;
  fill:none;
  stroke:var(--accent2);
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.aiAnalysisFloatButton[disabled]{opacity:.55;cursor:progress}

@media(max-width:620px){
  #floatingActionDock{right:12px;bottom:68px;gap:7px}
  .aiAnalysisFloatButton{padding:8px 12px;font-size:.74rem}
}

/* The in-summary button is replaced by the floating action. */
#aiAnalysisBtn{display:none!important}

/* ---- AI Analysis dialog: centered Close --------------------------------------------- */
/* Only when the bar holds a single action — the confirm step has Cancel + Continue and must
   keep the standard two-column layout. */
.aiAnalysisDialog .themedDialogActions.aiAnalysisSingleAction,
.aiAnalysisDialog .themedDialogActions:not(.aiAnalysisSingleAction):has(>button:only-child){
  grid-template-columns:minmax(150px,220px)!important;
  justify-content:center!important;
}

/* ---- Phantom scroll guard ------------------------------------------------------------ */
/* clip (rather than hidden) contains stray horizontal overflow without turning the page into
   a scroll container, so position:sticky and fixed overlays keep working. */
html{overflow-x:clip}
body{overflow-x:clip}

/* overflow-x:clip is unsupported on older engines, where it computes to visible
   and an oversized child can widen the layout viewport again — which makes the
   whole page look shifted sideways. Fall back to hidden there. */
@supports not (overflow: clip) {
  html, body { overflow-x: hidden; }
}