/* ==========================================================
   AREA CALCULATOR
   Extracted from calculator-tools.css (lines 2200-2523)
   ========================================================== */
/* ----------------------------------------------------------
   AREA CALCULATOR — Tool-specific styles
   ---------------------------------------------------------- */

/* ===== SHAPE SELECTOR GRID ===== */
.ct-area-shapes {
  display              : grid;
  grid-template-columns: repeat(auto-fill, minmax(105px, 1fr));
  gap                  : 8px;
  margin-bottom        : var(--ct-sp-lg);
}

.ct-area-shape {
  display        : flex;
  flex-direction : column;
  align-items    : center;
  justify-content: center;
  gap            : 6px;
  padding        : 14px 8px 12px;
  background     : var(--ct-input-bg);
  border         : 2px solid var(--ct-input-border);
  border-radius  : var(--ct-r-md);
  cursor         : pointer;
  transition     : all .25s cubic-bezier(.4, 0, .2, 1);
  font-family    : var(--ct-font);
  user-select    : none;
  position       : relative;
  overflow       : hidden;
}

.ct-area-shape::before {
  content   : '';
  position  : absolute;
  inset     : 0;
  background: linear-gradient(135deg, rgba(99,102,241,.08), rgba(236,72,153,.05));
  opacity   : 0;
  transition: opacity .3s ease;
}

.ct-area-shape:hover {
  border-color: var(--ct-primary-light);
  transform   : translateY(-3px);
  box-shadow  : 0 6px 18px rgba(99, 102, 241, .12);
}

.ct-area-shape:hover::before { opacity: 1; }

.ct-area-shape-active,
.ct-area-shape-active:hover {
  border-color: var(--ct-primary) !important;
  background  : rgba(99, 102, 241, .06) !important;
  box-shadow  : 0 4px 16px var(--ct-primary-glow) !important;
  transform   : translateY(-3px) !important;
}

.ct-area-shape-active::before { opacity: 1 !important; }

.ct-area-shape-name {
  font-size   : 11px;
  font-weight : 700;
  color       : var(--ct-text-secondary);
  text-align  : center;
  line-height : 1.2;
  position    : relative;
  z-index     : 1;
}

.ct-area-shape-active .ct-area-shape-name {
  color: var(--ct-primary);
}

/* ===== CSS-DRAWN SHAPE ICONS ===== */
.ct-area-shape-icon {
  display     : block;
  flex-shrink : 0;
  position    : relative;
  z-index     : 1;
}

.ct-area-icon-rect {
  width        : 34px;
  height       : 22px;
  background   : linear-gradient(135deg, #3b82f6, #2563eb);
  border-radius: 3px;
}

.ct-area-icon-sq {
  width        : 26px;
  height       : 26px;
  background   : linear-gradient(135deg, #8b5cf6, #7c3aed);
  border-radius: 3px;
}

.ct-area-icon-circ {
  width        : 28px;
  height       : 28px;
  background   : linear-gradient(135deg, #10b981, #059669);
  border-radius: 50%;
}

.ct-area-icon-tri {
  width     : 30px;
  height    : 26px;
  background: linear-gradient(135deg, #f59e0b, #d97706);
  clip-path : polygon(50% 0%, 0% 100%, 100% 100%);
}

.ct-area-icon-trap {
  width     : 32px;
  height    : 22px;
  background: linear-gradient(135deg, #ec4899, #db2777);
  clip-path : polygon(20% 0%, 80% 0%, 100% 100%, 0% 100%);
}

.ct-area-icon-para {
  width     : 34px;
  height    : 22px;
  background: linear-gradient(135deg, #06b6d4, #0891b2);
  clip-path : polygon(25% 0%, 100% 0%, 75% 100%, 0% 100%);
}

.ct-area-icon-elli {
  width        : 34px;
  height       : 22px;
  background   : linear-gradient(135deg, #14b8a6, #0d9488);
  border-radius: 50%;
}

.ct-area-icon-rhom {
  width     : 26px;
  height    : 30px;
  background: linear-gradient(135deg, #ef4444, #dc2626);
  clip-path : polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
}

.ct-area-icon-pent {
  width     : 28px;
  height    : 28px;
  background: linear-gradient(135deg, #6366f1, #4f46e5);
  clip-path : polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%);
}

.ct-area-icon-hex {
  width     : 30px;
  height    : 28px;
  background: linear-gradient(135deg, #f97316, #ea580c);
  clip-path : polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
}

.ct-area-icon-sec {
  width        : 28px;
  height       : 28px;
  background   : conic-gradient(from 0deg, #a855f7 0deg, #7c3aed 90deg, transparent 90deg);
  border-radius: 50%;
}

/* ===== SHAPE PANELS ===== */
.ct-area-panel {
  display   : none;
  animation : ctFadeUp .3s var(--ct-ease);
}

.ct-area-panel-active {
  display: block;
}

.ct-area-panel-title {
  font-size    : 15px;
  font-weight  : 700;
  color        : var(--ct-text);
  margin-bottom: var(--ct-sp-md);
  padding-bottom: var(--ct-sp-sm);
  border-bottom: 2px solid var(--ct-input-border);
  display      : flex;
  align-items  : center;
  gap          : 6px;
}

/* Triangle sub-method panels */
.ct-area-tri-sub {
  display: none;
}

.ct-area-tri-active {
  display  : block;
  animation: ctFadeUp .25s var(--ct-ease);
}

/* ===== FORMULA DISPLAY ===== */
.ct-area-formula {
  margin-top     : var(--ct-sp-lg);
  padding        : 16px 20px;
  background     : linear-gradient(135deg, rgba(99,102,241,.06), rgba(236,72,153,.04));
  border         : 1px solid rgba(99, 102, 241, .15);
  border-radius  : var(--ct-r-md);
  text-align     : center;
}

.ct-area-formula:empty { display: none; }

.ct-area-formula-label {
  display      : block;
  font-size    : 11px;
  font-weight  : 700;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color        : var(--ct-text-muted);
  margin-bottom: 6px;
}

.ct-area-formula-text {
  display    : block;
  font-size  : 18px;
  font-weight: 800;
  color      : var(--ct-primary);
  font-family: 'Courier New', monospace;
  letter-spacing: .5px;
}

.ct-area-formula-sub {
  display    : block;
  font-size  : 13px;
  font-weight: 600;
  color      : var(--ct-text-secondary);
  margin-top : 4px;
}

/* ===== CONVERSION TABLE HIGHLIGHT ===== */
.ct-area-conv-current {
  background : rgba(99, 102, 241, .06) !important;
  font-weight: 800;
}

.ct-area-conv-current td {
  color: var(--ct-primary) !important;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 768px) {
  .ct-area-shapes {
    grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
    gap: 6px;
  }

  .ct-area-shape {
    padding: 10px 6px;
  }

  .ct-area-shape-name {
    font-size: 10px;
  }

  .ct-area-shape-icon {
    transform: scale(.85);
  }
}

@media (max-width: 480px) {
  .ct-area-shapes {
    grid-template-columns: repeat(3, 1fr);
    gap: 5px;
  }

  .ct-area-shape {
    padding: 10px 4px 8px;
  }

  .ct-area-shape-name {
    font-size: 9px;
  }

  .ct-area-formula-text {
    font-size: 15px;
  }
}

@media (max-width: 360px) {
  .ct-area-shapes {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* ===== AREA RESULT CARD WRAP FIX ===== */
.ct-tool-section[data-tool="area"] .ct-result-card {
  min-width: 0;
  overflow: hidden;
  word-break: break-word;
  padding: var(--ct-sp-md) var(--ct-sp-sm);
}

.ct-tool-section[data-tool="area"] .ct-result-value {
  font-size: clamp(14px, 2.8vw, 20px);
  word-break: break-word;
  overflow-wrap: break-word;
  line-height: 1.2;
  max-width: 100%;
  padding: 0 2px;
}

.ct-tool-section[data-tool="area"] .ct-area-formula,
.ct-tool-section[data-tool="area"] .ct-area-formula-text,
.ct-tool-section[data-tool="area"] .ct-area-formula-sub {
  white-space: normal;
  word-break: break-word;
  overflow-wrap: break-word;
}

/* ===== AREA GRID STACK ON MOBILE ===== */
@media (max-width: 768px) {
  .ct-tool-section[data-tool="area"] .ct-result-grid.ct-cols-2,
  .ct-tool-section[data-tool="area"] .ct-result-grid.ct-cols-3,
  .ct-tool-section[data-tool="area"] .ct-result-grid.ct-cols-4 {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 480px) {
  .ct-tool-section[data-tool="area"] .ct-result-grid.ct-cols-2,
  .ct-tool-section[data-tool="area"] .ct-result-grid.ct-cols-3,
  .ct-tool-section[data-tool="area"] .ct-result-grid.ct-cols-4 {
    grid-template-columns: 1fr;
  }
}