/* ============================================================
   UF GPA Calculator — WordPress plugin styles
   Everything is scoped under .ufgpa-scope so it can never leak
   into your theme's global h1/h2/p/a/.btn/.field/etc. styles,
   and your theme can never override the calculator by accident.
   ============================================================ */

.ufgpa-scope{
  --ufgpa-paper:      #EDEFE9;
  --ufgpa-paper-alt:  #E2E5DB;
  --ufgpa-paper-card: #F6F7F2;
  --ufgpa-ink:        #202A23;
  --ufgpa-ink-soft:   #4B564E;
  --ufgpa-line:       #C7C2AE;
  --ufgpa-line-soft:  #DAD6C4;
  --ufgpa-moss:       #3F6B4C;
  --ufgpa-moss-dark:  #2E5038;
  --ufgpa-brick:      #A8402B;

  --ufgpa-font-display: 'Fraunces', ui-serif, Georgia, serif;
  --ufgpa-font-body:    inherit; /* respect the theme's body font */
  --ufgpa-font-mono:    'IBM Plex Mono', ui-monospace, monospace;

  --ufgpa-radius: 4px;

  display:block;
  margin: 28px 0;
}

.ufgpa-scope *{ box-sizing: border-box; }

.ufgpa-scope .ufgpa-mono-note{
  font-family: var(--ufgpa-font-mono);
  font-size:.78rem;
  color: var(--ufgpa-ink-soft);
}

/* ---------- calculator card ---------- */
.ufgpa-scope .ledger{
  background: var(--ufgpa-paper-card);
  border: 1px solid var(--ufgpa-line);
  border-radius: var(--ufgpa-radius);
  box-shadow: 0 1px 0 var(--ufgpa-line);
  overflow: hidden;
  margin: 0;
  color: var(--ufgpa-ink);
}
.ufgpa-scope .ledger-toolbar{
  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px;
  padding: 16px 20px; border-bottom: 1px solid var(--ufgpa-line);
  background: var(--ufgpa-paper-alt);
}
.ufgpa-scope .mode-toggle{ display:inline-flex; border:1px solid var(--ufgpa-ink); border-radius:20px; overflow:hidden; flex-wrap:wrap; }
.ufgpa-scope .mode-toggle button{
  font-family: var(--ufgpa-font-mono); font-size:.8rem; font-weight:600; letter-spacing:.03em;
  padding: 7px 14px; border:0; background:transparent; color: var(--ufgpa-ink); cursor:pointer;
}
.ufgpa-scope .mode-toggle button.active{ background: var(--ufgpa-ink); color: var(--ufgpa-paper); }

.ufgpa-scope .prior-row, .ufgpa-scope .goal-row{ display:none; gap:12px; padding: 14px 20px; border-bottom:1px solid var(--ufgpa-line); align-items:end; flex-wrap:wrap; }
.ufgpa-scope .prior-row.show, .ufgpa-scope .goal-row.show{ display:flex; }
.ufgpa-scope .field{ display:flex; flex-direction:column; gap:4px; }
.ufgpa-scope .field label{ font-size:.72rem; text-transform:uppercase; letter-spacing:.06em; color: var(--ufgpa-ink-soft); font-weight:600; }
.ufgpa-scope .field input, .ufgpa-scope .field select{
  font-family: var(--ufgpa-font-mono); font-size:.95rem; padding:7px 9px;
  border:1px solid var(--ufgpa-line); border-radius:3px; background:#fff; color: var(--ufgpa-ink);
  min-width: 90px;
}
.ufgpa-scope .ufgpa-hide{ display:none; }

.ufgpa-scope .course-table{ width:100%; border-collapse:collapse; margin:0; }
.ufgpa-scope .course-table thead th{
  text-align:left; font-family: var(--ufgpa-font-mono); font-size:.7rem; text-transform:uppercase;
  letter-spacing:.06em; color: var(--ufgpa-ink-soft); font-weight:600; padding: 10px 8px;
  border-bottom: 1px solid var(--ufgpa-line);
}
.ufgpa-scope .course-table td{ padding: 8px; border-bottom: 1px dashed var(--ufgpa-line-soft); vertical-align:middle; }
.ufgpa-scope .course-table tr:last-child td{ border-bottom:none; }
.ufgpa-scope .row-num{ font-family: var(--ufgpa-font-mono); color: var(--ufgpa-ink-soft); font-size:.82rem; width:24px; }
.ufgpa-scope .course-table input[type="text"]{
  width:100%; font-family: var(--ufgpa-font-body); font-size:.9rem; padding:7px 8px;
  border:1px solid var(--ufgpa-line); border-radius:3px; background:#fff; color: var(--ufgpa-ink);
}
.ufgpa-scope .course-table input[type="number"]{
  width:64px; font-family: var(--ufgpa-font-mono); font-size:.9rem; padding:7px 8px;
  border:1px solid var(--ufgpa-line); border-radius:3px; background:#fff; color: var(--ufgpa-ink);
}
.ufgpa-scope .course-table select{
  font-family: var(--ufgpa-font-mono); font-size:.9rem; padding:7px 6px;
  border:1px solid var(--ufgpa-line); border-radius:3px; background:#fff; color: var(--ufgpa-ink);
}
.ufgpa-scope .remove-row{
  background:none; border:1px solid var(--ufgpa-line); color: var(--ufgpa-brick); cursor:pointer;
  width:28px; height:28px; border-radius:3px; font-size:.9rem; line-height:1;
}
.ufgpa-scope .remove-row:hover{ background: var(--ufgpa-brick); color:#fff; border-color: var(--ufgpa-brick); }

.ufgpa-scope .ledger-actions{ display:flex; justify-content:space-between; align-items:center; padding: 12px 20px; flex-wrap:wrap; gap:10px; }
.ufgpa-scope .ledger-actions-right{ display:flex; gap:8px; flex-wrap:wrap; }
.ufgpa-scope .btn{
  font-family: var(--ufgpa-font-mono); font-weight:600; font-size:.85rem; letter-spacing:.02em;
  padding: 9px 16px; border-radius: 3px; border:1px solid var(--ufgpa-ink); background:transparent;
  color: var(--ufgpa-ink); cursor:pointer; text-decoration:none; display:inline-block; line-height:1.4;
}
.ufgpa-scope .btn:hover{ background: var(--ufgpa-ink); color: var(--ufgpa-paper); }
.ufgpa-scope .btn-ghost{ font-size:.78rem; padding:7px 12px; opacity:.85; }
.ufgpa-scope .btn-ghost:hover{ opacity:1; }

.ufgpa-scope .save-status{
  padding: 0 20px 14px; font-size:.74rem; color: var(--ufgpa-ink-soft); font-family: var(--ufgpa-font-mono);
}
.ufgpa-scope .link-btn{
  background:none; border:0; padding:0; margin-left:4px; color: var(--ufgpa-moss-dark);
  font-family: var(--ufgpa-font-mono); font-size:.74rem; text-decoration:underline; cursor:pointer;
}
.ufgpa-scope .link-btn:hover{ color: var(--ufgpa-brick); }

/* ---------- result stamp ---------- */
.ufgpa-scope .result-panel{
  display:flex; gap: 28px; align-items:center; padding: 24px 20px 30px;
  border-top: 3px double var(--ufgpa-line); background: var(--ufgpa-paper-alt); flex-wrap:wrap;
}
.ufgpa-scope .stamp{
  width: 128px; height:128px; border-radius:50%; border: 3px solid var(--ufgpa-moss-dark);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  transform: rotate(-4deg); flex-shrink:0; background: rgba(63,107,76,0.06);
  font-family: var(--ufgpa-font-mono);
}
.ufgpa-scope .stamp.warn{ border-color: var(--ufgpa-brick); background: rgba(168,64,43,0.07); }
.ufgpa-scope .stamp .num{ font-size: 2rem; font-weight:700; color: var(--ufgpa-moss-dark); letter-spacing:-.02em; }
.ufgpa-scope .stamp.warn .num{ color: var(--ufgpa-brick); }
.ufgpa-scope .stamp .lbl{ font-size:.6rem; letter-spacing:.1em; text-transform:uppercase; color: var(--ufgpa-ink-soft); margin-top:2px; }
.ufgpa-scope .result-msg{ flex:1; min-width:220px; }
.ufgpa-scope .result-msg .status{ font-family: var(--ufgpa-font-display); font-size:1.15rem; font-weight:600; margin-bottom:4px; color: var(--ufgpa-ink); }
.ufgpa-scope .result-msg .detail{ color: var(--ufgpa-ink-soft); font-size:.92rem; margin:0; }
.ufgpa-scope .result-msg .detail a{ font-weight:600; color: var(--ufgpa-moss-dark); }
.ufgpa-scope .result-msg .detail a:hover{ color: var(--ufgpa-brick); }

@media (max-width: 640px){
  .ufgpa-scope .result-panel{ flex-direction:column; align-items:flex-start; }

  /* Course table becomes a stacked card list on mobile instead of
     squeezing 5 columns into a narrow screen. */
  .ufgpa-scope .course-table thead{ display:none; }
  .ufgpa-scope .course-table, 
  .ufgpa-scope .course-table tbody{ display:block; width:100%; }
  .ufgpa-scope .course-table tr{
    display:block; position:relative;
    border:1px solid var(--ufgpa-line); border-radius:6px;
    padding:12px 44px 12px 12px; margin-bottom:10px; background:#fff;
  }
  .ufgpa-scope .course-table td{
    display:block; border-bottom:none; padding:6px 0;
  }
  .ufgpa-scope .row-num{ display:none; }
  .ufgpa-scope .course-table td[data-label]::before{
    content: attr(data-label);
    display:block; font-family: var(--ufgpa-font-mono); font-size:.68rem;
    text-transform:uppercase; letter-spacing:.06em; color: var(--ufgpa-ink-soft);
    margin-bottom:3px;
  }
  .ufgpa-scope .course-table input[type="text"],
  .ufgpa-scope .course-table input[type="number"],
  .ufgpa-scope .course-table select{ width:100%; }
  .ufgpa-scope .remove-row{
    position:absolute; top:10px; right:10px;
  }
}

@media print{
  body *{ visibility:hidden; }
  .ufgpa-scope, .ufgpa-scope *{ visibility:visible; }
  .ufgpa-scope{ position:absolute; left:0; top:0; width:100%; }
  .ufgpa-scope .ledger-toolbar .mode-toggle,
  .ufgpa-scope .add-row,
  .ufgpa-scope .ledger-actions-right,
  .ufgpa-scope .save-status,
  .ufgpa-scope .remove-row{ display:none !important; }
}