/**
 * Clay Shrinkage Calculator — page template styles ("Studio" direction).
 *
 * Scoped under .mwp-shrinkage-page / #mwp-shrinkage so nothing collides with
 * the theme. Consumes the theme tokens from assets/css/style.css (--color-*,
 * --space-*, --radius-*) rather than re-declaring hexes, so the page follows
 * the brand automatically.
 *
 * Layout: dark hero band → card overlaps up into it → controls left,
 * result right. The value separation (charcoal / cream / warm-white) is what
 * keeps the tool from reading as a widget dropped on a white page.
 */

/* ── Page shell ─────────────────────────────────────────────────────────── */
.mwp-shrinkage-page{
  /* Local alias: the theme hardcodes this face rather than tokenizing it. */
  --mwp-font-label: 'VolumeTCSans-RusticSolid', sans-serif;
  --mwp-texture: url('../images/clay-texture.jpg');
  background: var(--color-cream);
}

/* The dark hero runs to the very top, behind the transparent fixed nav,
   so kill the global 72px offset that would leave a pale strip above it. */
body:not(.home) .mwp-shrinkage-page{ padding-top: 0; }

/* ── Hero — charcoal band, textured, deep enough for the card to overlap ── */
.mwp-shrinkage-hero{
  position: relative;
  overflow: hidden;
  text-align: center;
  background: var(--color-charcoal);
  padding-top: calc(var(--space-2xl) + 72px);
  padding-bottom: calc(var(--space-2xl) + 90px);
}
.mwp-shrinkage-hero::before{
  content: '';
  position: absolute;
  inset: 0;
  background: var(--mwp-texture) center / cover;
  opacity: .16;
  mix-blend-mode: overlay;
  pointer-events: none;
}
.mwp-shrinkage-hero > .container{ position: relative; z-index: 2; }

.mwp-shrinkage-hero .section-label{
  display: block;
  color: var(--color-terracotta-light); /* terracotta is too dark on charcoal */
  margin-bottom: var(--space-xs);
}
.mwp-shrinkage-hero .page-title{
  font-family: var(--font-display);
  font-size: clamp(3rem, 7.5vw, 6rem);
  font-weight: 400;
  line-height: 1;
  color: var(--color-warm-white);
  margin-bottom: var(--space-sm);
}
.mwp-shrinkage-hero .page-title em{
  font-style: italic;
  color: var(--color-terracotta-light);
}
.mwp-shrinkage-hero p{
  max-width: 500px;
  margin: 0 auto;
  font-size: 1.05rem;
  font-weight: 300;
  line-height: 1.7;
  color: var(--color-light-gray);
}

/* ── Card overlaps up into the dark band ────────────────────────────────── */
.mwp-shrinkage-wrap{
  position: relative;
  z-index: 3;
  margin-top: -90px;
  padding-bottom: var(--space-2xl);
}
.mwp-shrinkage-wrap .container{ max-width: 1040px; }

#mwp-shrinkage{
  color: var(--color-charcoal);
  font-family: var(--font-body);
  line-height: 1.6;
}
#mwp-shrinkage *{ box-sizing: border-box; }

#mwp-shrinkage .mwp-card{
  background: var(--color-warm-white);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  box-shadow:
    0 2px 4px rgba(46, 42, 38, .06),
    0 18px 40px -10px rgba(46, 42, 38, .22),
    0 48px 80px -32px rgba(46, 42, 38, .28);
}

#mwp-shrinkage .mwp-sub{
  font-size: .95rem;
  font-weight: 300;
  color: var(--color-warm-gray);
  margin: 0 0 var(--space-md);
}

/* ── Mode tabs — pill geometry borrowed from .btn; sage marks mode two ──── */
#mwp-shrinkage .mwp-tabs{
  display: flex;
  gap: 6px;
  background: var(--color-cream);
  padding: 6px;
  border-radius: var(--radius-pill);
  margin-bottom: var(--space-lg);
}
#mwp-shrinkage .mwp-tab{
  flex: 1;
  padding: .75rem .8rem;
  text-align: center;
  border: none;
  cursor: pointer;
  background: transparent;
  border-radius: var(--radius-pill);
  font-family: var(--mwp-font-label);
  font-size: 1.05rem;
  color: var(--color-warm-gray);
  transition: all .25s ease;
}
#mwp-shrinkage .mwp-tab:not(.is-active):hover{ color: var(--color-charcoal); }
#mwp-shrinkage .mwp-tabs .mwp-tab.is-active{
  background: var(--color-terracotta);
  color: #fff;
  box-shadow: 0 2px 6px rgba(196, 112, 75, .28);
}
#mwp-shrinkage .mwp-tab[data-tab="rate"].is-active{
  background: var(--color-sage);
  box-shadow: 0 2px 6px rgba(122, 139, 111, .3);
}

#mwp-shrinkage .mwp-panel{ display: none; }
#mwp-shrinkage .mwp-panel.is-active{ display: block; }

/* Direction toggle — squarer, quieter, clearly subordinate to the mode tabs */
#mwp-shrinkage .mwp-tabs--dir{
  background: transparent;
  padding: 0;
  gap: 8px;
  border-radius: 0;
  margin-bottom: var(--space-md);
}
#mwp-shrinkage .mwp-tabs--dir .mwp-tab{
  flex: 0 1 auto;
  background: var(--color-cream);
  border: 1px solid var(--color-sand);
  border-radius: var(--radius-sm);
  padding: .55rem .9rem;
  font-family: var(--font-body);
  font-size: .95rem;
  font-weight: 500;
}
#mwp-shrinkage .mwp-tabs--dir .mwp-tab.is-active{
  background: var(--color-charcoal);
  border-color: var(--color-charcoal);
  color: var(--color-cream);
  box-shadow: none;
}

/* ── Two columns: controls left, result parked alongside ────────────────── */
#mwp-shrinkage .mwp-grid{ display: grid; gap: var(--space-lg); }
@media (min-width: 860px){
  #mwp-shrinkage .mwp-grid{
    grid-template-columns: 1fr 380px;
    align-items: start;
  }
  #mwp-shrinkage .mwp-grid__result{
    position: sticky;
    top: 100px; /* clears the 72px fixed nav */
  }
}

/* ── Fields ─────────────────────────────────────────────────────────────── */
#mwp-shrinkage label{
  display: block;
  font-size: .85rem;
  font-weight: 600;
  color: var(--color-charcoal);
  margin: 0 0 .45rem;
}
#mwp-shrinkage .mwp-hint{
  display: block;
  font-weight: 400;
  font-size: .78rem;
  color: var(--color-warm-gray);
}
#mwp-shrinkage input[type=number],
#mwp-shrinkage select{
  width: 100%;
  padding: .8rem .9rem;
  font-family: var(--font-body);
  font-size: 1rem;
  border: 1px solid var(--color-sand);
  border-radius: var(--radius-sm);
  background: #fff;
  color: var(--color-charcoal);
  color-scheme: light;
  -webkit-appearance: none;
  appearance: none;
}
#mwp-shrinkage select{
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236B635B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right .9rem center;
  padding-right: 2.4rem;
}
#mwp-shrinkage input[type=number]:focus,
#mwp-shrinkage select:focus{
  outline: none;
  border-color: var(--color-terracotta);
  box-shadow: 0 0 0 3px rgba(196, 112, 75, .15);
}
#mwp-shrinkage .mwp-row{
  display: flex;
  gap: var(--space-sm);
  flex-wrap: wrap;
  margin-bottom: var(--space-md);
}
#mwp-shrinkage .mwp-row > div{ flex: 1; min-width: 150px; }
#mwp-shrinkage .mwp-dimhead{
  display: block;
  font-size: .85rem;
  font-weight: 600;
  color: var(--color-charcoal);
  margin: 0 0 .45rem;
}
#mwp-shrinkage .mwp-inline{ display: flex; align-items: center; gap: .5rem; }
#mwp-shrinkage .mwp-unit{ font-size: .85rem; color: var(--color-warm-gray); }

/* ── Shrinkage slider — inset on cream so it reads as one control ───────── */
#mwp-shrinkage .mwp-shrinkwrap{
  background: var(--color-cream);
  border-radius: var(--radius-md);
  padding: var(--space-sm) var(--space-md);
  margin-bottom: var(--space-md);
}
#mwp-shrinkage .mwp-shrinkwrap label{ margin-bottom: .2rem; }
#mwp-shrinkage .mwp-shrinkval{
  font-family: var(--font-display);
  font-size: 1.6rem;
  color: var(--color-clay);
  vertical-align: -2px;
  margin-left: 2px;
}
#mwp-shrinkage input[type=range]{
  width: 100%;
  accent-color: var(--color-terracotta);
  margin-top: .6rem;
}

/* ── Result — terracotta slab, arched top, textured. The payoff. ────────── */
#mwp-shrinkage .mwp-result{
  position: relative;
  overflow: hidden;
  text-align: center;
  background: var(--color-terracotta);
  color: #fff;
  border-radius: var(--radius-xl) var(--radius-xl) var(--radius-lg) var(--radius-lg);
  padding: var(--space-lg) var(--space-md);
}
#mwp-shrinkage .mwp-result::before{
  content: '';
  position: absolute;
  inset: 0;
  background: var(--mwp-texture) center / cover;
  opacity: .18;
  mix-blend-mode: overlay;
  pointer-events: none;
}
#mwp-shrinkage .mwp-result > *{ position: relative; z-index: 2; }
#mwp-shrinkage .mwp-result .mwp-reslabel{
  font-family: var(--mwp-font-label);
  font-size: 1rem;
  color: rgba(255, 255, 255, .85);
  margin-bottom: var(--space-md);
}
#mwp-shrinkage .mwp-result .mwp-big{
  font-family: var(--font-display);
  font-size: clamp(3.6rem, 8vw, 5rem);
  font-weight: 400;
  line-height: 1;
  color: #fff;
}
#mwp-shrinkage .mwp-dims{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
}
#mwp-shrinkage .mwp-dim{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .2rem;
}
#mwp-shrinkage .mwp-dim__label{
  font-family: var(--mwp-font-label);
  font-size: .8rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: rgba(255, 255, 255, .8);
}
#mwp-shrinkage .mwp-dims .mwp-big{
  font-size: clamp(2.4rem, 5.5vw, 3.6rem);
}
#mwp-shrinkage .mwp-ruler{
  font-family: var(--mwp-font-label);
  font-size: 1rem;
  letter-spacing: .02em;
  color: rgba(255, 255, 255, .75);
  margin-top: .3rem;
}
#mwp-shrinkage .mwp-ruler sup{
  font-size: .7em;
}
#mwp-shrinkage .mwp-dims__x{
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 3.5vw, 2.4rem);
  color: rgba(255, 255, 255, .7);
  align-self: center;
}
#mwp-shrinkage .mwp-result .mwp-note{
  font-size: .85rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, .82);
  margin-top: .6rem;
}
/* Sage result panel on the "find my rate" side, matching its tab. */
#mwp-shrinkage .mwp-result--rate{ background: var(--color-sage); }

/* ── Callout — sage, so it reads as guidance not an error ───────────────── */

/* ── Preset table ───────────────────────────────────────────────────────── */
#mwp-shrinkage table{
  width: 100%;
  border-collapse: collapse;
  margin-top: var(--space-sm);
  font-size: .9rem;
}
#mwp-shrinkage th,
#mwp-shrinkage td{
  padding: .6rem .5rem;
  text-align: left;
  border-bottom: 1px solid var(--color-sand);
}
#mwp-shrinkage th{
  font-family: var(--mwp-font-label);
  font-size: .8rem;
  font-weight: 400;
  color: var(--color-warm-gray);
}
#mwp-shrinkage td.mwp-wet{ font-weight: 600; color: var(--color-clay); }
#mwp-shrinkage .mwp-strike{ color: var(--color-warm-gray); }

/* ── Actions & footer ───────────────────────────────────────────────────── */
#mwp-shrinkage .mwp-usebtn{
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  margin-top: var(--space-md);
  padding: .7rem 1.8rem;
  background: var(--color-terracotta);
  color: #fff;
  border: none;
  border-radius: var(--radius-lg);
  font-family: var(--mwp-font-label);
  font-size: 1.05rem;
  cursor: pointer;
  transition: all .3s ease;
}
#mwp-shrinkage .mwp-usebtn:hover{
  background: var(--color-terracotta-light);
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(196, 112, 75, .15);
}
#mwp-shrinkage .mwp-foot{
  text-align: center;
  font-size: .82rem;
  color: var(--color-warm-gray);
  margin-top: var(--space-lg);
}
#mwp-shrinkage .mwp-foot a{
  color: var(--color-clay);
  font-weight: 600;
  text-decoration: none;
}
#mwp-shrinkage .mwp-foot a:hover{ text-decoration: underline; }

/* ── Small screens ──────────────────────────────────────────────────────── */
@media (max-width: 640px){
  .mwp-shrinkage-hero{
    padding-top: calc(var(--space-xl) + 72px);
    padding-bottom: calc(var(--space-xl) + 80px);
  }
  .mwp-shrinkage-wrap{
    margin-top: -80px;
    padding-bottom: var(--space-xl);
  }
  #mwp-shrinkage .mwp-card{
    padding: var(--space-md);
    border-radius: var(--radius-md);
  }
  #mwp-shrinkage .mwp-tabs{ flex-direction: column; border-radius: var(--radius-md); }
  #mwp-shrinkage .mwp-tabs--dir{ flex-direction: column; }
  #mwp-shrinkage .mwp-usebtn{ width: 100%; justify-content: center; }
}