:root{
  --bg:#f3f4f6;
  --card:#ffffff;

  --text:#0f172a;
  --muted:#64748b;

  --green:#22c55e;
  --red:#ef4444;
  --blue:#2563eb;
  --purple:#a855f7;

  --column-width:36px;
  --label-width:68px;
  --temp-scale-width:52px;
  --chart-height:260px;
}

/* ─── reset ──────────────────────────────── */

*{
  box-sizing:border-box;
}

body{
  margin:0;

  background:var(--bg);
  color:var(--text);

  font-family:'Inter',sans-serif;
}

button,
input{
  font-family:'Inter',sans-serif;
}

/* ─── app layout ─────────────────────────── */

.app{
  max-width:1100px;

  margin:auto;
  padding:28px 18px;
}

.layout{
  display:grid;
  grid-template-columns:1fr 270px;
  gap:16px;
}

.calendar-card,
.chart-card,
.info-card{
  background:var(--card);

  border:1px solid #e5e7eb;
  border-radius:12px;
}

/* ─── typography ─────────────────────────── */

h1{
  margin:0 0 18px;

  font-size:22px;
  font-weight:600;
}

/* ─── calendar ───────────────────────────── */

.calendar-card{
  padding:18px;
}

.calendar-nav{
  display:grid;
  grid-template-columns:40px 1fr 40px;

  align-items:center;

  margin-bottom:10px;
}

#monthLabel{
  text-align:center;

  font-size:16px;
  font-weight:600;
}

.calendar-nav button{
  width:30px;
  height:30px;

  border:none;
  border-radius:6px;

  background:#f1f5f9;

  cursor:pointer;
}

#calendar{
  display:grid;
  grid-template-columns:repeat(7,1fr);

  gap:8px;
}

.day{
  height:40px;

  display:flex;
  align-items:center;
  justify-content:center;

  background:#f1f5f9;

  border-radius:8px;

  cursor:pointer;

  font-size:13px;

  transition:0.15s;
}

.day.selected{
  box-shadow:
    0 0 0 2px rgba(37,99,235,0.55);
}

.day.red{
  background:rgba(239,68,68,0.75);
  color:white;
}

.day.fertile-day{
  background:rgba(34,197,94,0.75);
  color:white;
}

/* ─── legend ─────────────────────────────── */

.legend{
  display:flex;
  gap:14px;

  margin-top:14px;

  font-size:12px;
  color:var(--muted);
}

.legend div{
  display:flex;
  align-items:center;
  gap:5px;
}

.dot{
  width:8px;
  height:8px;

  border-radius:50%;
}

.dot.red{
  background:var(--red);
}

.dot.green{
  background:var(--green);
}

/* ─── info panel ─────────────────────────── */

.info-card{
  display:flex;
  flex-direction:column;

  padding:18px;
}

.info-title{
  margin:0 0 22px;

  font-size:16px;
  font-weight:700;

  color:#0f172a;
}

.info-panel{
  display:flex;
  flex-direction:column;
  gap:18px;

  flex:1;
}

.info-group{
  display:flex;
  flex-direction:column;
  gap:6px;
}

.info-label{
  font-size:11px;
  font-weight:700;

  text-transform:uppercase;
  letter-spacing:0.05em;

  color:#64748b;
}

.info-value{
  min-height:18px;

  font-size:15px;
  line-height:1.35;

  color:#111827;
}

.edit-btn{
  margin-top:24px;

  width:100%;
  height:38px;

  border:none;
  border-radius:8px;

  background:#111;
  color:white;

  cursor:pointer;
}

/* ─── chart card ─────────────────────────── */

.chart-card{
  margin-top:16px;

  padding:18px;
}

/* ─── cycle map ──────────────────────────── */

.cycle-map{
  overflow:hidden;

  background:white;

  border:1px solid #cfd8e3;
  border-radius:10px;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.9),
    inset 0 -1px 0 rgba(15,23,42,0.02);
}

.map-scroll{
  overflow-x:auto;
  overflow-y:hidden;
}

.map-grid{
  min-width:max-content;

  align-items:start;
}

/* ─── chart tools ────────────────────────── */

.chart-tools{
  display:flex;
  gap:10px;

  margin-bottom:14px;
}

.tool-btn{
  height:34px;

  padding:0 14px;

  border:1px solid #d7dee7;
  border-radius:8px;

  background:#f8fafc;

  color:#334155;

  cursor:pointer;

  font-size:13px;
  font-weight:500;

  transition:
    background 0.15s,
    border-color 0.15s,
    color 0.15s;
}

.tool-btn:hover{
  background:#eef2f7;
}

.tool-btn.active{
  background:#dbeafe;

  border-color:#93c5fd;

  color:#1d4ed8;
}
/* ─── map structure ──────────────────────── */

.map-header-row{
  display:grid;

  grid-template-columns:
    var(--label-width)
    var(--temp-scale-width)
    1fr;

  background:#f8fafc;

  border-bottom:1px solid #dbe4ee;
}

.map-chart-row{
  display:grid;

  grid-template-columns:
    var(--label-width)
    var(--temp-scale-width)
    1fr;

  height:var(--chart-height);

  min-height:var(--chart-height);
  max-height:var(--chart-height);
}

.map-row{
  display:grid;

  grid-template-columns:
    var(--label-width)
    var(--temp-scale-width)
    1fr;

  height:26px;

  border-bottom:1px solid #edf2f7;

  overflow:hidden;
}

/* ─── side labels ────────────────────────── */

.map-side-label{
  position:sticky;
  left:0;

  z-index:5;

  display:flex;
  align-items:center;

  padding-left:10px;

  background:white;

  border-right:1px solid #dbe4ee;

  font-size:11px;
  font-weight:600;

  color:#64748b;
}

.map-temp-spacer{
  position:sticky;
  left:var(--label-width);

  z-index:4;

  background:
    linear-gradient(
      to right,
      #f8fafc 0%,
      #ffffff 100%
    );

  border-right:1px solid #dbe4ee;
}

.temp-scale-column{
  position:sticky;
  left:var(--label-width);

  z-index:4;

  width:var(--temp-scale-width);
  height:var(--chart-height);

  background:
    linear-gradient(
      to right,
      #f8fafc 0%,
      #ffffff 100%
    );

  border-right:1px solid #cfd8e3;
}

.temp-scale-label{
  position:absolute;

  right:12px;

  transform:translateY(-50%);

  font-size:12px;
  font-weight:600;

  color:#475569;

  line-height:1;

  pointer-events:none;
}

/* ─── map cells ──────────────────────────── */

.map-days,
.map-cells{
  display:grid;

  grid-auto-flow:column;
  grid-auto-columns:var(--column-width);

  height:100%;

  position:relative;
}

.map-day,
.map-cell{
  width:var(--column-width);
  height:26px;

  display:flex;
  align-items:center;
  justify-content:center;

  position:relative;

  border-right:1px solid #eef3f8;

  font-size:10px;
}

.map-day{
  background:#f8fafc;

  color:#64748b;
  font-weight:500;
}

.map-day:nth-child(5n),
.map-cell:nth-child(5n){
  border-right:1px solid #d8e1ea;
}

.selected-column{
  background:rgba(37,99,235,0.08);
}

/* ─── cell states ────────────────────────── */

.map-cell.period{
  color:#dc2626;
  font-weight:700;
}

.map-cell.spotting{
  color:#f97316;
}

.map-cell.fertile{
  background:rgba(34,197,94,0.08);
}

.map-cell.peak-helper{
  box-shadow:
    inset 0 -2px 0 rgba(168,85,247,0.7);
}

/* ─── modal ──────────────────────────────── */

.modal{
  position:fixed;
  inset:0;

  display:flex;
  align-items:center;
  justify-content:center;

  background:rgba(0,0,0,0.3);

  opacity:0;
  pointer-events:none;

  transition:0.2s;
}

.modal.show{
  opacity:1;
  pointer-events:auto;
}

.hidden{
  display:none;
}

.modal-card{
  width:340px;

  background:white;

  border-radius:14px;

  padding:22px;

  display:flex;
  flex-direction:column;
  gap:22px;
}

.modal-section{
  display:flex;
  flex-direction:column;
  gap:10px;
}

.section-title,
.input-label{
  font-size:12px;
  font-weight:700;

  text-transform:uppercase;
  letter-spacing:0.05em;

  color:#64748b;
}

select{
  width:100%;
  height:38px;

  padding:0 12px;

  border:1px solid #dbe1e8;
  border-radius:8px;

  background:white;

  font-size:14px;
}

/* ─── form elements ──────────────────────── */

input{
  width:100%;
  height:38px;

  padding:0 12px;

  border:1px solid #dbe1e8;
  border-radius:8px;

  font-size:14px;
}

.checkbox-group{
  display:flex;
  flex-direction:column;
  gap:12px;
}

.checkbox-row{
  display:flex;
  align-items:center;
  gap:12px;
}

.checkbox-row input{
  width:18px;
  height:18px;

  margin:0;
}

/* ─── segmented buttons ──────────────────── */

.segmented{
  display:grid;
  gap:8px;
}

.segmented.three{
  grid-template-columns:repeat(3,1fr);
}

.segmented.four{
  grid-template-columns:repeat(4,1fr);
}

.segmented.two{
  grid-template-columns:repeat(2,1fr);
}

.segmented button{
  min-height:36px;

  border:none;
  border-radius:8px;

  background:#f1f5f9;

  cursor:pointer;

  font-size:12px;

  transition:0.15s;
}

.segmented button.active{
  background:#dbeafe;
  color:#1d4ed8;
}

/* ─── modal actions ──────────────────────── */

.modal-actions{
  display:flex;
  gap:10px;
}

.btn{
  flex:1;
  height:38px;

  border:none;
  border-radius:8px;

  cursor:pointer;

  font-size:14px;
}

.btn.primary{
  background:#111;
  color:white;
}

.btn.secondary{
  background:#e5e7eb;
}

/* ─── dev panel ──────────────────────────── */

.dev-panel{
  margin-top:10px;
}

#devReset{
  height:28px;

  padding:0 10px;

  border:none;
  border-radius:6px;

  background:#e5e7eb;

  font-size:11px;
}

/* ─── responsive ─────────────────────────── */

@media (max-width:900px){

  .layout{
    grid-template-columns:1fr;
  }

}