/* Kerala Kundali Lite — FINAL UI (v0.1.1 clean) */

/* ---- Base / container ---- */
#kk-widget { font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
#kk-widget * { box-sizing: border-box; }
#kk-widget .kk-card{
  width:100%;
  max-width:min(1100px, 92vw);
  margin:24px auto;
  padding:18px;
  background:#fff;
  border:1px solid #e9ecef;
  border-radius:16px;
  box-shadow:0 8px 22px rgba(0,0,0,.06);
  overflow:hidden;          /* prevent right-edge crop */
}

/* ---- Header ---- */
#kk-widget .kk-title{ display:none }  /* we already have the page H1 */
#kk-widget .kk-head{ display:grid; grid-template-columns:1fr auto; gap:12px; align-items:center; }
@media (max-width:720px){ #kk-widget .kk-head{ grid-template-columns:1fr } }

/* ---- Buttons ---- */
#kk-widget .kk-actions{ display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
#kk-widget .kk-btn, #kk-widget .kk-toggle{
  font-size:16px; padding:12px 16px; border-radius:12px; border:0; cursor:pointer;
}
#kk-widget .kk-btn{ background:#0A7B5C; color:#fff; font-weight:700; }
#kk-widget .kk-btn:hover{ filter:brightness(1.05) }
#kk-widget .kk-toggle{ background:#f2f3f5; min-width:44px; font-weight:700; }

/* ---- Form: 2 columns desktop, 1 column mobile ---- */
#kk-widget .kk-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;   /* no min-width -> avoids mobile overflow */
  gap:16px 20px;
  align-items:start;
}
@media (max-width:1024px){ #kk-widget .kk-grid{ grid-template-columns:1fr } }

/* Vertical rows: label above input (fixes alignment for every control) */
#kk-widget .kk-row{ display:block; }
#kk-widget .kk-label{
  display:block; margin:0 0 6px; font-weight:800; font-size:16px; line-height:1.25;
}

/* Inputs: force uniform height for text/date/time/select */
#kk-widget .kk-input{
  width:100%; max-width:100%;
  height:50px;                   /* <- all equal */
  padding:12px 14px;
  border:1px solid #dadde1; border-radius:14px;
  font-size:18px; line-height:24px; background:#fff;
  appearance:auto; -webkit-appearance:auto; -moz-appearance:auto;
}
#kk-widget input[type="date"].kk-input,
#kk-widget input[type="time"].kk-input,
#kk-widget select.kk-input{ height:50px; }

/* Make the Calculate row span both columns */
#kk-widget .kk-grid + .kk-status + .kk-actions{ grid-column:1 / -1 }

/* Status/notes */
#kk-widget .kk-status{ min-height:18px; font-size:14px; color:#6b7280; margin-top:8px }
#kk-widget .kk-note{ font-size:12px; opacity:.85; margin-top:10px }

/* ---- Results: chart + table ---- */
#kk-widget .kk-flex{
  display:grid; grid-template-columns:1.2fr .8fr; gap:18px; align-items:start; margin-top:16px;
}
@media (max-width:980px){ #kk-widget .kk-flex{ grid-template-columns:1fr } }

#kk-widget .kk-chartbox, #kk-widget .kk-infobox{
  background:#fafafa; border:1px solid #eee; border-radius:14px; padding:14px;
}
#kk-widget .kk-subtitle{ font-weight:800; margin-bottom:10px }

/* Chart: square, safe inner margin (SVG text will fit) */
#kk-widget .kk-chart{ width:100%; aspect-ratio:1/1; min-height:360px; overflow:hidden; }
#kk-widget .kk-chart svg{ width:100%; height:100% }
#kk-widget .kk-chart text{ fill:#111; font-size:clamp(10px, 1.5vw, 14px) }
#kk-widget .kk-chart .b{ stroke:#333; stroke-width:1.2 }

/* Table: never overflow on mobile */
#kk-widget .kk-table{ font-size:clamp(14px, 2.8vw, 18px); line-height:1.55; overflow-x:auto }
#kk-widget .kk-table .row{
  display:grid;
  grid-template-columns: minmax(0,1fr) minmax(0,1fr) auto;
  gap:10px; border-bottom:1px dashed #e5e7eb; padding:8px 0;
}
#kk-widget .kk-table .row:last-child{ border-bottom:0 }
#kk-widget .kk-table .cap{ opacity:.8; }

/* Malayalam text: avoid clipping */
#kk-widget { word-break: break-word; }