/* Global */

* {
  margin:0;
  padding:0;
  box-sizing:border-box;
  -webkit-tap-highlight-color: transparent;
  word-wrap: break-word;
  overflow-wrap: break-word;
}
html {
  font-size:16px;
  overflow-x: hidden;
  width: 100%;
  -webkit-text-size-adjust: 100%;
}
body {
  font-family: var(--font-base);
  font-size: var(--text-base);
  line-height: 1.6;
  color: var(--color-text-primary);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  width: 100%;
  min-height: 100vh;
  min-height: -webkit-fill-available;
  position: relative;
}

/* Containers */
.container {
  max-width:1200px;
  margin:0 auto;
  padding:0 var(--space-4);
  padding-left: max(var(--space-4), env(safe-area-inset-left));
  padding-right: max(var(--space-4), env(safe-area-inset-right));
  width: 100%;
}
.container-narrow {
  max-width:950px;
  margin:0 auto;
  padding:0 var(--space-4);
  padding-left: max(var(--space-4), env(safe-area-inset-left));
  padding-right: max(var(--space-4), env(safe-area-inset-right));
  width: 100%;
}

@media (max-width: 640px) {
  .container, .container-narrow {
    padding: 0 var(--space-3);
    padding-left: max(var(--space-3), env(safe-area-inset-left));
    padding-right: max(var(--space-3), env(safe-area-inset-right));
  }
}

/* Header */
.header {
  position: sticky; top:0; z-index:100;
  padding: var(--space-4) 0;
  background: var(--color-bg);
  border-bottom: 1px solid var(--color-border);
  width: 100%;
  left: 0;
  right: 0;
}
.header-content { display:flex; justify-content:space-between; align-items:center; min-width: 0; }
.logo { font-size: var(--text-xl); font-weight: var(--weight-bold); }
.header-link { color: var(--color-accent); text-decoration:none; font-size: var(--text-sm); }
.header-link:hover { opacity:0.85; }

/* Breadcrumbs */
.breadcrumb { margin-bottom: var(--space-4); width: 100%; max-width: 100%; overflow: hidden; }
.breadcrumb ol { list-style: none; display: flex; flex-wrap: wrap; gap: var(--space-2); font-size: var(--text-sm); color: var(--color-text-muted); min-width: 0; }
.breadcrumb li { display: flex; align-items: center; min-width: 0; }
.breadcrumb li:not(:last-child)::after { content: '›'; margin-left: var(--space-2); color: var(--color-text-muted); flex-shrink: 0; }
.breadcrumb a { color: var(--color-accent); text-decoration: none; overflow: hidden; text-overflow: ellipsis; }
.breadcrumb a:hover { text-decoration: underline; }
.breadcrumb span { overflow: hidden; text-overflow: ellipsis; }

/* Hero */
.hero { padding: var(--space-8) 0 var(--space-4); }
.hero-title {
  font-size: var(--text-3xl);
  font-weight: var(--weight-bold);
  line-height:1.2;
  margin-top: var(--space-2);
  word-wrap: break-word;
  overflow-wrap: break-word;
}
.hero-subtitle {
  color: var(--color-text-muted);
  margin-top: var(--space-2);
  margin-bottom: var(--space-4);
  line-height: 1.6;
}
.market-price-pill {
  display:inline-flex; gap:var(--space-2); align-items:center;
  background: var(--color-card); border-radius: var(--radius-xl);
  padding: var(--space-2) var(--space-4); font-size: var(--text-sm);
}
.market-price-value { font-weight: var(--weight-bold); color: var(--color-accent); }

@media (max-width: 640px) {
  .hero { padding: var(--space-6) 0 var(--space-4); }
  .hero-title { font-size: var(--text-2xl); }
}

/* Above-the-fold grid */
.af-grid {
  display:grid; gap: var(--space-4);
  grid-template-columns: 1fr; /* mobile */
}
/* Mobile: inputs first, results second */
@media (max-width: 1023px) {
  .results-tiles { order: 2; }
  .calc-section { order: 1; }
}
@media (min-width: 1024px) {
  .af-grid { grid-template-columns: 1fr 1fr; align-items:start; }
}

/* Card */
.card {
  background: var(--color-card);
  border-radius: var(--radius-xl);
  padding: var(--space-6);
  box-shadow: var(--shadow-lg);
  width: 100%;
  max-width: 100%;
}

@media (max-width: 640px) {
  .card {
    padding: var(--space-4);
    border-radius: var(--radius-lg);
  }
}

/* Results tiles */
.results-tiles {
  display:grid; gap: var(--space-4);
  grid-template-columns: repeat(auto-fit, minmax(220px,1fr));
  border:1px solid var(--color-border);
  width: 100%;
  max-width: 100%;
}

@media (max-width: 640px) {
  .results-tiles {
    grid-template-columns: 1fr;
    gap: var(--space-3);
  }
}
@media (min-width:1024px) {
  .results-sticky { position: sticky; top: 84px; }
}
.result-tile {
  background: var(--color-bg);
  border:1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  text-align:center;
  width: 100%;
  max-width: 100%;
}
@media (max-width: 640px) {
  .result-tile {
    padding: var(--space-4);
  }
}
.result-tile-primary { border-color: var(--color-accent); background: rgba(0,145,255,0.06); }
.tile-label {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  text-transform:uppercase;
  letter-spacing:0.5px;
  margin-bottom: var(--space-1);
  word-wrap: break-word;
}
.tile-value, .tile-value-large {
  font-family: var(--font-mono);
  font-weight: var(--weight-bold);
  word-break: break-word;
}
.tile-value { font-size: var(--text-2xl); }
.tile-value-large { font-size: var(--text-3xl); }
@media (max-width: 640px) {
  .tile-value { font-size: var(--text-xl); }
  .tile-value-large { font-size: var(--text-2xl); }
}
.tile-value.positive, .tile-value-large.positive { color: var(--color-positive); }
.tile-value.negative, .tile-value-large.negative { color: var(--color-negative); }
.result-tile.warn { border-color: var(--color-negative); background: rgba(255,90,95,0.08); }
.tile-help {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  margin-top: var(--space-1);
  word-wrap: break-word;
}

/* Warning highlight for investment value when over retail threshold */
.investment-val-inline.warn {
  color: var(--color-negative);
  font-weight: 600;
}
.investment-val-inline {
  transition: color 0.2s ease;
}

/* Summary under tiles (compact cards) */
.result-summary {
  grid-column: 1 / -1;
  display:grid; gap: var(--space-3);
  margin-top: var(--space-1);
  grid-template-columns: 1fr;
}
@media (min-width:520px) { .result-summary { grid-template-columns: repeat(2, 1fr); } }
.summary-card {
  background: var(--color-bg);
  border:1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
}
.summary-title {
  font-size: var(--text-xs); color: var(--color-text-muted);
  text-transform:uppercase; letter-spacing:.5px; margin-bottom: var(--space-1);
}
.summary-value { font-family: var(--font-mono); font-size: var(--text-2xl); font-weight: var(--weight-bold); }
.summary-sub { font-size: var(--text-sm); color: var(--color-text-muted); margin-top: var(--space-1); }

/* Inputs */
.calc-section {
  display:block;
  width: 100%;
  max-width: 100%;
}
.input-grid {
  display:grid;
  gap: var(--space-6);
  width: 100%;
}
@media (max-width: 640px) {
  .input-grid {
    gap: var(--space-4);
  }
}
.input-group {
  display:block;
  width: 100%;
  max-width: 100%;
}
.input-label {
  display:flex;
  align-items:center;
  gap:var(--space-1);
  font-weight: var(--weight-medium);
  margin-bottom: var(--space-2);
  word-wrap: break-word;
  flex-wrap: wrap;
}
.input-help {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  margin-top: var(--space-1);
  word-wrap: break-word;
  overflow-wrap: break-word;
}

.input-with-stepper {
  display:flex;
  gap:var(--space-2);
  align-items:center;
  width: 100%;
  max-width: 100%;
}
.input-field {
  flex:1;
  background: var(--color-bg);
  color: var(--color-text-primary);
  border:1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  font-size: var(--text-lg);
  font-weight: var(--weight-medium);
  width: 100%;
  min-width: 0;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  touch-action: manipulation;
}
.input-field:focus {
  outline:none;
  border-color: var(--color-accent);
  -webkit-tap-highlight-color: transparent;
}
.input-field::placeholder { color: var(--color-text-muted); opacity:0.6; }
/* Safari number input fix */
.input-field[type="number"] {
  -moz-appearance: textfield;
}
.input-field[type="number"]::-webkit-inner-spin-button,
.input-field[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.stepper-btn {
  width:40px;
  height:40px;
  border-radius: var(--radius-md);
  display:flex;
  align-items:center;
  justify-content:center;
  background: var(--color-hover);
  border:1px solid var(--color-border);
  cursor:pointer;
  font-size: var(--text-lg);
  font-weight: var(--weight-bold);
  color: var(--color-text-primary);
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  user-select: none;
  -webkit-user-select: none;
  flex-shrink: 0;
}
.stepper-btn:hover { background: var(--color-accent); }
.stepper-btn:active {
  background: var(--color-accent);
  transform: scale(0.95);
}

/* Chips */
.chip-group {
  display:flex;
  flex-wrap:wrap;
  gap: var(--space-2);
  width: 100%;
  max-width: 100%;
}
.chip {
  user-select:none;
  cursor:pointer;
  background: var(--color-bg);
  color: var(--color-text-primary);
  border:1px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: var(--space-2) var(--space-4);
  white-space: nowrap;
}
.chip:hover { background: var(--color-hover); }
.chip.active { background: var(--color-accent); color:#fff; border-color: var(--color-accent); }

.acceptance-chips {
  display:flex;
  gap: var(--space-2);
  flex-wrap: wrap;
  width: 100%;
  max-width: 100%;
}
.chip-small {
  user-select:none;
  cursor:pointer;
  background: var(--color-bg);
  color: var(--color-text-primary);
  border:1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-sm);
  white-space: nowrap;
}
.chip-small:hover { background: var(--color-hover); }
.chip-small.active { background: var(--color-accent); color:#fff; border-color: var(--color-accent); }

/* Slider */
.slider-container {
  display:flex;
  align-items:center;
  gap: var(--space-4);
  width: 100%;
  max-width: 100%;
}
@media (max-width: 640px) {
  .slider-container {
    gap: var(--space-2);
  }
}
.slider {
  flex:1;
  height:8px;
  background: var(--color-bg);
  border-radius: var(--radius-sm);
  outline:none;
  min-width: 0;
  -webkit-appearance: none;
  appearance: none;
  touch-action: none;
}
.slider::-webkit-slider-track {
  width: 100%;
  height: 8px;
  background: var(--color-bg);
  border-radius: var(--radius-sm);
}
.slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--color-accent);
  cursor: pointer;
  border: none;
  margin-top: -6px;
}
.slider::-moz-range-track {
  width: 100%;
  height: 8px;
  background: var(--color-bg);
  border-radius: var(--radius-sm);
}
.slider::-moz-range-thumb {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--color-accent);
  cursor: pointer;
  border: none;
}
.slider-value {
  min-width:60px;
  text-align:right;
  font-weight: var(--weight-semibold);
  flex-shrink: 0;
}
@media (max-width: 640px) {
  .slider-value {
    min-width: 50px;
    font-size: var(--text-sm);
  }
}

/* Alerts */
.alert {
  margin-top: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  border:1px solid var(--color-border);
  word-wrap: break-word;
  overflow-wrap: break-word;
  width: 100%;
  max-width: 100%;
}
.alert-warning { border-color: var(--color-negative); background: rgba(255,90,95,0.10); }

/* Toggle / Checkbox / Radios */
.toggle-label { display:flex; align-items:center; gap: var(--space-3); cursor:pointer; }
.toggle-input { position:absolute; opacity:0; pointer-events:none; }
.toggle-slider { width:48px; height:24px; background: var(--color-border); border-radius:12px; position:relative; }
.toggle-slider::after { content:''; position:absolute; top:2px; left:2px; width:20px; height:20px; background:#fff; border-radius:50%; transition: transform var(--transition-base); }
.toggle-input:checked + .toggle-slider { background: var(--color-accent); }
.toggle-input:checked + .toggle-slider::after { transform: translateX(24px); }
.toggle-text { font-weight: var(--weight-medium); }

.checkbox-label { display:flex; align-items:center; gap: var(--space-2); }

.radio-group { display:flex; gap: var(--space-2); flex-wrap:wrap; }
.radio-label { position:relative; }
.radio-input { position:absolute; opacity:0; pointer-events:none; }
.radio-chip {
  display:inline-block; padding: var(--space-2) var(--space-4);
  background: var(--color-bg); border:1px solid var(--color-border);
  border-radius: var(--radius-xl); cursor:pointer;
}
.radio-input:checked + .radio-chip { background: var(--color-accent); color:#fff; border-color: var(--color-accent); }

/* Buttons */
.reset-btn, .share-btn {
  background: var(--color-hover); color: var(--color-text-primary);
  border:1px solid var(--color-border); border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-6); cursor:pointer;
  font-size: var(--text-base); font-weight: var(--weight-medium);
  transition: all 0.2s ease;
}
.reset-btn:hover, .share-btn:hover { background: var(--color-accent); color:#fff; border-color: var(--color-accent); }
.reset-btn:active, .share-btn:active { transform: scale(0.98); }

/* Mobile: bigger touch targets and full width stacking */
@media (max-width: 768px) {
  .reset-btn, .share-btn {
    padding: var(--space-4) var(--space-5);
    font-size: var(--text-lg);
    min-height: 48px; /* Touch target minimum */
  }
}

.calculate-btn {
  display:none; /* Hidden on desktop */
  width:100%;
  background: var(--color-accent); color:#fff;
  border:none; border-radius: var(--radius-md);
  padding: var(--space-4) var(--space-6); cursor:pointer;
  font-size: var(--text-lg); font-weight: var(--weight-semibold);
  margin-top: var(--space-4);
  min-height: 52px;
  transition: all 0.2s ease;
}
@media (max-width: 1023px) {
  .calculate-btn { display:block; }
}
.calculate-btn:hover { opacity:0.9; }
.calculate-btn:active { transform: scale(0.98); }

/* Action buttons container */
.action-buttons {
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
  margin-top: var(--space-4);
}
@media (max-width: 768px) {
  .action-buttons {
    flex-direction: column;
    gap: var(--space-3);
  }
  .action-buttons .reset-btn,
  .action-buttons .share-btn {
    width: 100%;
    flex: 1;
  }
}
@media (min-width: 769px) {
  .action-buttons .reset-btn,
  .action-buttons .share-btn {
    flex: 1;
    min-width: 140px;
  }
}

/* Details accordion */
.accordion { border-top:1px solid var(--color-border); margin-top: var(--space-6); padding-top: var(--space-6); }
.accordion-trigger {
  width:100%; display:flex; justify-content:space-between; align-items:center;
  background:none; border:none; color: var(--color-accent);
  padding: var(--space-3); cursor:pointer; border-radius: var(--radius-md);
}
.accordion-trigger:hover { background: var(--color-hover); }
.accordion-icon { transition: transform var(--transition-base); }
.accordion-content { max-height:0; overflow:hidden; transition:max-height var(--transition-slow); }
.accordion.open .accordion-content { max-height:1000px; }
.accordion.open .accordion-icon { transform: rotate(180deg); }
.accordion-inner { padding: var(--space-4) 0; }
.details-grid { display:flex; flex-direction:column; gap: var(--space-3); }
.detail-row {
  display:flex; justify-content:space-between; align-items:center;
  padding: var(--space-3); background: var(--color-bg); border-radius: var(--radius-md);
}
.detail-row span:first-child { color: var(--color-text-muted); }
.detail-row span:last-child { font-family: var(--font-mono); font-weight: var(--weight-semibold); }

/* Sale result */
.sale-result { margin-top: var(--space-6); background: var(--color-bg); border-radius: var(--radius-lg); padding: var(--space-4); }
.sale-row { display:flex; justify-content:space-between; align-items:center; padding: var(--space-3) 0; border-bottom:1px solid var(--color-border); }
.sale-row:last-child { border-bottom:none; }
.sale-row-highlight { font-weight: var(--weight-semibold); background: var(--color-hover); margin: var(--space-2) calc(var(--space-4)*-1); padding: var(--space-3) var(--space-4); }
.sale-row-primary {
  font-weight: var(--weight-bold); font-size: var(--text-lg);
  background: rgba(0,145,255,0.10);
  margin: var(--space-2) calc(var(--space-4)*-1); padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
}

/* Event strip */
.event-strip { padding: var(--space-8) 0; background: var(--color-card); margin-top: var(--space-6); }
.event-list {
  list-style:none;
  display:grid;
  gap: var(--space-4);
  grid-template-columns: repeat(auto-fit, minmax(250px,1fr));
}
@media (max-width: 640px) {
  .event-list {
    grid-template-columns: 1fr;
    gap: var(--space-3);
  }
}
.event-list li {
  background: var(--color-bg);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  color: var(--color-text-muted);
  word-wrap: break-word;
}
.event-list strong { display:block; color: var(--color-accent); margin-bottom: var(--space-1); }

/* FAQ */
.faq-section { padding: var(--space-8) 0; }
.faq-item {
  background: var(--color-card);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  margin-bottom: var(--space-6);
  word-wrap: break-word;
  overflow-wrap: break-word;
}
@media (max-width: 640px) {
  .faq-item {
    padding: var(--space-4);
  }
}
.faq-question {
  font-weight: var(--weight-semibold);
  margin-bottom: var(--space-2);
  word-wrap: break-word;
}
.faq-answer {
  word-wrap: break-word;
  overflow-wrap: break-word;
}

/* Footer */
.footer { border-top:1px solid var(--color-border); padding: var(--space-8) 0; text-align:center; }
.footer-text { color: var(--color-text-muted); font-size: var(--text-sm); }

/* Footline + Sticky bar */
.footline {
  position:fixed; left:0; right:0; bottom:0;
  background: var(--color-card); border-top:1px solid var(--color-border);
  text-align:center; padding: var(--space-3) var(--space-4); z-index:99; font-size: var(--text-sm);
  width: 100%;
  max-width: 100%;
  overflow: hidden;
}
.footline-highlight { color: var(--color-accent); font-weight: var(--weight-semibold); }
@media (max-width:768px) { .footline { display:none; } }

.sticky-bar {
  position:fixed; left:0; right:0; bottom:0; display:none;
  background: var(--color-card); border-top:2px solid var(--color-border);
  padding: var(--space-3) var(--space-4);
  padding-bottom: calc(var(--space-3) + env(safe-area-inset-bottom));
  z-index:100; box-shadow:0 -4px 6px -1px rgba(0,0,0,0.5);
  width: 100%;
  max-width: 100%;
  overflow: hidden;
}
@media (max-width:768px) {
  .sticky-bar { display:flex; justify-content:space-between; }
  body { padding-bottom: calc(90px + env(safe-area-inset-bottom)); }
}
.sticky-bar-item { flex:1; text-align:center; }
.sticky-bar-item-primary { border-left:1px solid var(--color-border); border-right:1px solid var(--color-border); }
.sticky-bar-label { font-size: var(--text-xs); color: var(--color-text-muted); text-transform:uppercase; letter-spacing:.5px; }
.sticky-bar-value { font-family: var(--font-mono); font-weight: var(--weight-bold); }
.sticky-bar-item-primary .sticky-bar-value { color: var(--color-accent); }

/* Modal */
.modal-overlay { display:none; position:fixed; inset:0; background: rgba(0,0,0,.8); z-index:1000; overflow-y:auto; overflow-x: hidden; width: 100%; max-width: 100%; }
.modal-overlay.active { display:flex; align-items:center; justify-content:center; padding: var(--space-4); }
.modal-content {
  background: var(--color-card);
  border-radius: var(--radius-xl);
  padding: var(--space-8);
  max-width: 800px;
  width:100%;
  max-height:90vh;
  overflow:auto;
  position:relative;
  word-wrap: break-word;
}
@media (max-width: 640px) {
  .modal-content {
    padding: var(--space-6) var(--space-4);
    border-radius: var(--radius-lg);
    max-height: 95vh;
  }
}
.modal-close { position:absolute; top: var(--space-4); right: var(--space-4); font-size: var(--text-2xl); color: var(--color-text-muted); background:none; border:none; cursor:pointer; }
.modal-title {
  font-size: var(--text-2xl);
  font-weight: var(--weight-bold);
  margin-bottom: var(--space-4);
  word-wrap: break-word;
  padding-right: var(--space-8);
}
@media (max-width: 640px) {
  .modal-title {
    font-size: var(--text-xl);
  }
}
.modal-text {
  color: var(--color-text-muted);
  margin-bottom: var(--space-2);
  word-wrap: break-word;
  overflow-wrap: break-word;
}

/* Tooltips */
.tooltip {
  position:relative; display:inline-flex; align-items:center; justify-content:center;
  width:18px; height:18px; background: var(--color-hover); border-radius:50%;
  color: var(--color-text-muted); font-size: var(--text-xs); font-weight: var(--weight-bold); cursor:help; margin-left: var(--space-1);
}
.tooltip:hover::after {
  content: attr(data-tooltip);
  position:absolute; bottom: calc(100% + var(--space-2)); left:50%; transform:translateX(-50%);
  background: var(--color-hover); color: var(--color-text-primary);
  border-radius: var(--radius-md); padding: var(--space-2) var(--space-3);
  white-space: normal; width: max-content; max-width: 280px; box-shadow: var(--shadow-lg);
}

/* Utilities */
.text-center { text-align:center; }
.mb-6 { margin-bottom: var(--space-6); }
.mt-6 { margin-top: var(--space-6); }

/* Card title */
.card-title { font-size: var(--text-xl); font-weight: var(--weight-bold); }