/* =========================================================================
   3P Bay Portal Demo — styled to match the 3P estimator design system.
   Self-contained: defines its own tokens so it renders correctly even on a
   page that doesn't load the estimator stylesheet. Scoped under .cal-portal.
   ========================================================================= */

.cal-portal {
  --cal-orange: #ff6347;
  --cal-black: #1b1b1b;
  --cal-gray-900: #2A2A2A;
  --cal-gray-700: #4D4D4D;
  --cal-gray-500: #7A7A7A;
  --cal-gray-300: #C8C8C8;
  --cal-gray-200: #E2E2E2;
  --cal-gray-100: #EFEFEF;
  --cal-gray-50:  #F7F7F7;
  --cal-white: #FDFDFD;
  --cal-danger: #C54C37;
  --cal-green: #2F8F4E;
  --cal-radius-sm: 4px;
  --cal-radius-md: 6px;
  --cal-radius-lg: 10px;
  --cal-shadow-sm: 0 1px 2px rgba(13,13,13,0.06), 0 1px 1px rgba(13,13,13,0.04);
  --cal-shadow-md: 0 4px 12px rgba(13,13,13,0.08), 0 2px 4px rgba(13,13,13,0.04);
  --cal-display: 'Public Sans', sans-serif;
  --cal-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --cal-mono: 'IBM Plex Mono', ui-monospace, monospace;

  max-width: 460px !important;
  margin: 0 auto !important;
  font-family: var(--cal-body) !important;
  color: var(--cal-black) !important;
  font-size: 15px !important;
  line-height: 1.5 !important;
}
.cal-portal *, .cal-portal *::before, .cal-portal *::after { box-sizing: border-box !important; }

/* ---------- DEMO CHROME: role switcher ---------- */
.cal-role-wrap { margin-bottom: 18px !important; }
.cal-role-label {
  font-family: var(--cal-display) !important; font-weight: 600 !important;
  font-size: 11px !important; letter-spacing: 0.12em !important; text-transform: uppercase !important;
  color: var(--cal-gray-700) !important; margin-bottom: 8px !important;
}
.cal-role-bar { display: flex !important; gap: 8px !important; }
.cal-role-btn {
  flex: 1 !important; background: var(--cal-white) !important; color: var(--cal-black) !important;
  border: 2px solid var(--cal-gray-200) !important; border-radius: var(--cal-radius-md) !important;
  font-family: var(--cal-body) !important; font-weight: 600 !important; font-size: 13px !important;
  padding: 10px 6px !important; cursor: pointer !important; transition: all 0.15s !important; position: relative !important;
}
.cal-role-btn:hover { border-color: var(--cal-gray-500) !important; }
.cal-role-btn.cal-active {
  background: var(--cal-black) !important; color: var(--cal-white) !important; border-color: var(--cal-black) !important;
}
.cal-role-btn.cal-active::after {
  content: '' !important; position: absolute !important; bottom: -6px !important; left: 50% !important;
  transform: translateX(-50%) !important; width: 60% !important; height: 3px !important;
  background: var(--cal-orange) !important; border-radius: 2px !important;
}
.cal-role-sub {
  font-family: var(--cal-mono) !important; font-size: 10.5px !important; line-height: 1.4 !important;
  color: var(--cal-gray-500) !important; text-align: center !important; margin-top: 13px !important;
}

/* ---------- BAY CARD ---------- */
.cal-bay-card {
  background: var(--cal-white) !important; border: 1px solid var(--cal-gray-200) !important;
  border-radius: var(--cal-radius-lg) !important; overflow: hidden !important; box-shadow: var(--cal-shadow-md) !important;
}
.cal-bay-stripe { height: 6px !important; width: 100% !important; }
.cal-bay-stripe.certified { background: var(--cal-green) !important; }
.cal-bay-stripe.due { background: var(--cal-orange) !important; }
.cal-bay-stripe.damaged { background: var(--cal-danger) !important; }

.cal-bay-head { padding: 18px 20px 16px !important; border-bottom: 1px solid var(--cal-gray-100) !important; }
.cal-bay-eyebrow { display: flex !important; align-items: center !important; justify-content: space-between !important; }
.cal-bay-brand {
  font-family: var(--cal-display) !important; font-weight: 700 !important; font-size: 12px !important;
  letter-spacing: 0.12em !important; text-transform: uppercase !important; color: var(--cal-orange) !important;
}
.cal-bay-tier {
  font-family: var(--cal-mono) !important; font-size: 10px !important; letter-spacing: 0.1em !important;
  color: var(--cal-gray-500) !important; border: 1px solid var(--cal-gray-200) !important;
  padding: 4px 8px !important; border-radius: var(--cal-radius-sm) !important;
}
.cal-bay-idrow { display: flex !important; align-items: flex-end !important; justify-content: space-between !important; margin-top: 12px !important; }
.cal-bay-id {
  font-family: var(--cal-display) !important; font-weight: 700 !important; font-size: 40px !important;
  line-height: 0.9 !important; letter-spacing: 0.01em !important; text-transform: uppercase !important; color: var(--cal-black) !important;
}
.cal-bay-loc { font-size: 12px !important; line-height: 1.4 !important; color: var(--cal-gray-500) !important; text-align: right !important; max-width: 170px !important; }

.cal-status {
  display: inline-flex !important; align-items: center !important; gap: 7px !important; margin-top: 12px !important;
  font-family: var(--cal-display) !important; font-weight: 600 !important; font-size: 11px !important;
  letter-spacing: 0.08em !important; text-transform: uppercase !important; padding: 6px 11px !important; border-radius: var(--cal-radius-sm) !important;
}
.cal-status.certified { background: rgba(47,143,78,0.12) !important; color: var(--cal-green) !important; }
.cal-status.due { background: rgba(255,99,71,0.13) !important; color: #c0431f !important; }
.cal-status.damaged { background: rgba(197,76,55,0.13) !important; color: var(--cal-danger) !important; }
.cal-dot { width: 7px !important; height: 7px !important; border-radius: 50% !important; background: currentColor !important; }

/* ---------- PLACARD (reuses the black sticker-box look) ---------- */
.cal-placard {
  margin: 18px 20px !important; background: var(--cal-black) !important; color: var(--cal-white) !important;
  border-radius: var(--cal-radius-lg) !important; overflow: hidden !important; position: relative !important; box-shadow: var(--cal-shadow-md) !important;
}
.cal-placard::before { content: '' !important; position: absolute !important; left: 0 !important; top: 0 !important; bottom: 0 !important; width: 6px !important; background: var(--cal-orange) !important; }
.cal-placard-top { display: flex !important; }
.cal-placard-cap { flex: 1 !important; padding: 18px 18px 14px 24px !important; }
.cal-placard-caplabel { font-family: var(--cal-display) !important; font-weight: 600 !important; font-size: 11px !important; letter-spacing: 0.1em !important; text-transform: uppercase !important; color: var(--cal-orange) !important; }
.cal-placard-num { font-family: var(--cal-display) !important; font-weight: 700 !important; font-size: 54px !important; line-height: 0.9 !important; margin-top: 6px !important; color: var(--cal-white) !important; font-variant-numeric: tabular-nums !important; }
.cal-placard-unit { font-size: 12px !important; color: var(--cal-gray-300) !important; margin-top: 6px !important; }
.cal-placard-est { display: inline-block !important; margin-top: 9px !important; font-family: var(--cal-mono) !important; font-size: 9px !important; letter-spacing: 0.1em !important; text-transform: uppercase !important; color: #7a2e00 !important; background: #ffd9b0 !important; padding: 5px 8px !important; border-radius: var(--cal-radius-sm) !important; }
.cal-placard-qr { width: 96px !important; display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; border-left: 2px dashed #444 !important; padding: 12px 10px !important; }
.cal-placard-qr svg { width: 58px !important; height: 58px !important; background: var(--cal-white) !important; padding: 5px !important; border-radius: var(--cal-radius-sm) !important; }
.cal-placard-qrlabel { font-family: var(--cal-mono) !important; font-size: 8px !important; line-height: 1.3 !important; letter-spacing: 0.06em !important; color: var(--cal-gray-300) !important; margin-top: 7px !important; text-align: center !important; }
.cal-placard-foot { border-top: 1px solid #333 !important; padding: 10px 24px !important; display: flex !important; justify-content: space-between !important; font-family: var(--cal-mono) !important; font-size: 10px !important; letter-spacing: 0.04em !important; color: var(--cal-gray-500) !important; }

/* ---------- SECTIONS ---------- */
.cal-section { padding: 0 20px 18px !important; }
.cal-section-head { font-family: var(--cal-display) !important; font-weight: 600 !important; font-size: 11px !important; letter-spacing: 0.12em !important; text-transform: uppercase !important; color: var(--cal-gray-700) !important; margin: 16px 0 12px !important; display: flex !important; align-items: center !important; justify-content: space-between !important; }
.cal-lock { font-family: var(--cal-mono) !important; font-size: 10px !important; color: var(--cal-gray-500) !important; text-transform: none !important; letter-spacing: 0 !important; }

.cal-lvl { display: flex !important; align-items: center !important; justify-content: space-between !important; padding: 12px 14px !important; background: var(--cal-gray-50) !important; border: 1px solid var(--cal-gray-200) !important; border-radius: var(--cal-radius-md) !important; margin-bottom: 8px !important; }
.cal-lvl-left { display: flex !important; align-items: center !important; gap: 12px !important; }
.cal-lvl-num { width: 30px !important; height: 30px !important; border-radius: var(--cal-radius-sm) !important; background: var(--cal-white) !important; border: 1px solid var(--cal-gray-200) !important; display: flex !important; align-items: center !important; justify-content: center !important; font-family: var(--cal-display) !important; font-weight: 700 !important; font-size: 14px !important; color: var(--cal-orange) !important; }
.cal-lvl-meta { font-size: 12px !important; color: var(--cal-gray-500) !important; }
.cal-lvl-cap { font-family: var(--cal-display) !important; font-weight: 600 !important; font-size: 15px !important; font-variant-numeric: tabular-nums !important; }
.cal-lvl-edit { background: transparent !important; border-style: dashed !important; }
.cal-lvl-edit .cal-lvl-meta { color: var(--cal-black) !important; font-weight: 600 !important; }

.cal-stepper { display: flex !important; align-items: center !important; border: 1px solid var(--cal-gray-200) !important; border-radius: var(--cal-radius-md) !important; overflow: hidden !important; }
.cal-step-btn { width: 38px !important; height: 38px !important; border: 0 !important; background: var(--cal-gray-100) !important; color: var(--cal-black) !important; font-family: var(--cal-body) !important; font-weight: 700 !important; font-size: 18px !important; cursor: pointer !important; }
.cal-step-btn:hover { background: var(--cal-gray-200) !important; }
.cal-step-val { width: 44px !important; text-align: center !important; font-family: var(--cal-display) !important; font-weight: 700 !important; font-size: 16px !important; }

/* ---------- BANNER (reuses disclaimer styling) ---------- */
.cal-banner { margin: 0 20px 4px !important; padding: 13px 16px !important; border-radius: var(--cal-radius-sm) !important; display: flex !important; gap: 12px !important; background: #FFE8DC !important; border-left: 4px solid var(--cal-orange) !important; }
.cal-banner.cal-red { background: #FDECEC !important; border-left-color: var(--cal-danger) !important; }
.cal-banner-ic { font-size: 17px !important; line-height: 1.2 !important; }
.cal-banner-tx { font-size: 12.5px !important; line-height: 1.45 !important; color: var(--cal-gray-900) !important; }
.cal-banner-tx b { font-weight: 700 !important; }

/* ---------- BUTTONS ---------- */
.cal-btn { width: 100% !important; border: 0 !important; border-radius: var(--cal-radius-md) !important; cursor: pointer !important; font-family: var(--cal-body) !important; font-weight: 700 !important; font-size: 14px !important; padding: 14px !important; display: flex !important; align-items: center !important; justify-content: center !important; gap: 8px !important; transition: all 0.15s !important; }
.cal-btn.cal-primary { background: var(--cal-orange) !important; color: var(--cal-black) !important; }
.cal-btn.cal-primary:hover { filter: brightness(1.05) !important; }
.cal-btn.cal-ghost { background: var(--cal-white) !important; color: var(--cal-black) !important; border: 1.5px solid var(--cal-gray-300) !important; }
.cal-btn.cal-ghost:hover { border-color: var(--cal-gray-500) !important; }
.cal-btn.cal-danger { background: #FDECEC !important; color: var(--cal-danger) !important; border: 1.5px solid var(--cal-danger) !important; }
.cal-btn.cal-danger:hover { background: #f9dcd8 !important; }
.cal-btn.cal-green { background: var(--cal-green) !important; color: var(--cal-white) !important; }
.cal-btn-row { display: flex !important; gap: 10px !important; }

/* ---------- FORM FIELDS ---------- */
.cal-field { margin-bottom: 14px !important; }
.cal-field label { display: block !important; font-size: 12px !important; font-weight: 600 !important; color: var(--cal-gray-700) !important; margin-bottom: 6px !important; letter-spacing: 0.02em !important; }
.cal-field input[type=number], .cal-field input[type=text] { width: 100% !important; padding: 11px 13px !important; border: 1.5px solid var(--cal-gray-200) !important; border-radius: var(--cal-radius-md) !important; background: var(--cal-white) !important; font-family: var(--cal-display) !important; font-weight: 600 !important; font-size: 18px !important; color: var(--cal-black) !important; outline: none !important; font-variant-numeric: tabular-nums !important; }
.cal-field input:focus { border-color: var(--cal-orange) !important; box-shadow: 0 0 0 3px rgba(255,99,71,0.15) !important; }
.cal-field textarea { width: 100% !important; padding: 11px 13px !important; border: 1.5px solid var(--cal-gray-200) !important; border-radius: var(--cal-radius-md) !important; background: var(--cal-white) !important; font-family: var(--cal-body) !important; font-size: 14px !important; color: var(--cal-black) !important; outline: none !important; resize: vertical !important; min-height: 72px !important; }
.cal-field textarea:focus { border-color: var(--cal-orange) !important; box-shadow: 0 0 0 3px rgba(255,99,71,0.15) !important; }

.cal-sev { display: flex !important; gap: 8px !important; }
.cal-sev-btn { flex: 1 !important; border: 1.5px solid var(--cal-gray-200) !important; background: var(--cal-white) !important; color: var(--cal-gray-500) !important; border-radius: var(--cal-radius-md) !important; padding: 11px 4px !important; cursor: pointer !important; font-family: var(--cal-body) !important; font-weight: 600 !important; font-size: 12px !important; transition: all 0.12s !important; }
.cal-sev-btn.low.cal-active { color: var(--cal-green) !important; border-color: var(--cal-green) !important; background: rgba(47,143,78,0.08) !important; }
.cal-sev-btn.med.cal-active { color: #c0431f !important; border-color: var(--cal-orange) !important; background: rgba(255,99,71,0.08) !important; }
.cal-sev-btn.high.cal-active { color: var(--cal-danger) !important; border-color: var(--cal-danger) !important; background: rgba(197,76,55,0.08) !important; }

.cal-photo { width: 100% !important; border: 1.5px dashed var(--cal-gray-300) !important; border-radius: var(--cal-radius-md) !important; background: var(--cal-gray-50) !important; color: var(--cal-gray-500) !important; padding: 18px !important; text-align: center !important; font-size: 13px !important; cursor: pointer !important; margin-bottom: 14px !important; }
.cal-photo:hover { border-color: var(--cal-orange) !important; color: var(--cal-black) !important; }

.cal-report { padding: 12px 14px !important; background: var(--cal-gray-50) !important; border: 1px solid var(--cal-gray-200) !important; border-radius: var(--cal-radius-md) !important; margin-bottom: 8px !important; }
.cal-report-head { display: flex !important; align-items: center !important; justify-content: space-between !important; margin-bottom: 5px !important; }
.cal-report-tag { font-family: var(--cal-mono) !important; font-size: 9px !important; letter-spacing: 0.08em !important; text-transform: uppercase !important; padding: 4px 7px !important; border-radius: var(--cal-radius-sm) !important; }
.cal-report-tag.low { background: rgba(47,143,78,0.12) !important; color: var(--cal-green) !important; }
.cal-report-tag.med { background: rgba(255,99,71,0.13) !important; color: #c0431f !important; }
.cal-report-tag.high { background: rgba(197,76,55,0.13) !important; color: var(--cal-danger) !important; }
.cal-report-time { font-family: var(--cal-mono) !important; font-size: 10px !important; color: var(--cal-gray-500) !important; }
.cal-report-tx { font-size: 13px !important; line-height: 1.4 !important; color: var(--cal-gray-900) !important; }

.cal-empty { font-size: 13px !important; line-height: 1.5 !important; color: var(--cal-gray-500) !important; padding: 14px !important; text-align: center !important; border: 1px dashed var(--cal-gray-300) !important; border-radius: var(--cal-radius-md) !important; }
.cal-note { font-family: var(--cal-mono) !important; font-size: 10.5px !important; color: var(--cal-gray-500) !important; margin-top: 8px !important; }
.cal-toast { margin: 6px 20px 0 !important; padding: 11px 14px !important; border-radius: var(--cal-radius-sm) !important; background: rgba(47,143,78,0.12) !important; border-left: 3px solid var(--cal-green) !important; color: var(--cal-green) !important; font-size: 12.5px !important; font-weight: 600 !important; }
.cal-divider { border: none !important; border-top: 1px dashed var(--cal-gray-200) !important; margin: 4px 20px 0 !important; }

@media (max-width: 480px) {
  .cal-bay-id { font-size: 34px !important; }
  .cal-placard-num { font-size: 44px !important; }
}