/* ════════════════════════════════════════════════════════════════════
   IB SEHS IA Checker — ia-checker.css
   Builds on the site theme variables (--surface/--border/--accent/--green/
   --red/--amber …) so dark mode and the gold-blue skin just work.
   Mobile-first; a 390px guard at the end guarantees no horizontal overflow.
   ════════════════════════════════════════════════════════════════════ */

.ia-main{ padding-bottom:2.5rem; }

/* ── Disclaimer bar (top) ── */
.ia-disclaimer{
  display:flex; gap:.5rem; align-items:flex-start;
  margin-top:1px; /* sits under sticky header */
  padding:.6rem 1.25rem;
  background:color-mix(in srgb, var(--amber) 16%, var(--surface));
  border-bottom:1px solid var(--border);
  font-size:.82rem; line-height:1.5; color:var(--text);
}
.ia-disclaimer-ico{ flex:0 0 auto; }

/* ── Hero ── */
.ia-hero{ padding:2.25rem 0 1.25rem; text-align:left; }
.ia-hero h1{ font-size:clamp(1.7rem,4vw,2.4rem); font-weight:800; line-height:1.15; margin:.5rem 0 .6rem; }
.ia-hero h1 span{ background:linear-gradient(135deg,var(--accent),var(--blue2,#3a6ea5)); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.ia-hero p{ color:var(--text2); font-size:1rem; max-width:640px; }

/* ── Panels ── */
.ia-panel{
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--radius,16px); padding:1.25rem;
  box-shadow:var(--shadow-sm,0 1px 2px rgba(10,24,40,.06));
  margin-bottom:1.5rem;
}

/* ── Mode toggle ── */
.ia-mode-toggle{ display:inline-flex; gap:.25rem; padding:.25rem; border:1px solid var(--border); border-radius:999px; background:var(--surface2,#F1F6F9); margin-bottom:1rem; }
.ia-mode-btn{
  border:none; background:transparent; cursor:pointer; font:inherit;
  font-size:.85rem; font-weight:600; color:var(--text2);
  padding:.45rem .9rem; border-radius:999px; transition:all .2s; white-space:nowrap;
}
.ia-mode-btn.active{ background:var(--accent); color:#fff; }
body.dark .ia-mode-btn.active{ color:#1a1408; }

/* ── Optional row ── */
.ia-optional-row{ display:flex; gap:.75rem; flex-wrap:wrap; margin-bottom:.9rem; }
.ia-field{ display:flex; flex-direction:column; gap:.3rem; flex:1 1 260px; }
.ia-field-narrow{ flex:0 1 180px; }
.ia-field-label{ font-size:.78rem; font-weight:700; color:var(--text2); }
.ia-field input{
  font:inherit; font-size:.92rem; color:var(--text);
  background:var(--surface2,#F1F6F9); border:1px solid var(--border);
  border-radius:var(--radius-sm,10px); padding:.55rem .7rem;
}
.ia-field input:focus{ outline:2px solid var(--accent); outline-offset:1px; border-color:var(--accent); }

/* ── Textareas ── */
.ia-textarea{
  display:block; width:100%; box-sizing:border-box;
  font:inherit; font-size:.92rem; line-height:1.6; color:var(--text);
  background:var(--surface2,#F1F6F9); border:1px solid var(--border);
  border-radius:var(--radius-sm,10px); padding:.7rem .8rem; resize:vertical;
  min-height:96px;
}
.ia-textarea--tall{ min-height:300px; }
.ia-textarea:focus{ outline:2px solid var(--accent); outline-offset:1px; border-color:var(--accent); }

/* ── Zones ── */
.ia-zone{ margin-bottom:.9rem; }
.ia-zone-head{ display:flex; align-items:center; gap:.5rem; margin-bottom:.35rem; }
.ia-zone-tag{
  flex:0 0 auto; width:26px; height:26px; border-radius:8px;
  display:flex; align-items:center; justify-content:center;
  font-weight:800; font-size:.85rem; color:#fff;
}
.ia-zone-tag.a{ background:#3a6ea5; }
.ia-zone-tag.b{ background:#2E7D5B; }
.ia-zone-tag.c{ background:#B8860B; }
.ia-zone-tag.d{ background:#C05A74; }
.ia-zone-name{ font-weight:700; font-size:.9rem; }
.ia-zone-words{ margin-left:auto; font-size:.75rem; color:var(--text3); font-variant-numeric:tabular-nums; }

/* ── Precheck ── */
.ia-precheck{ margin:.9rem 0; display:flex; flex-direction:column; gap:.4rem; font-size:.85rem; }
.ia-precheck:empty{ display:none; }
.ia-pc-item{ display:flex; gap:.5rem; align-items:flex-start; padding:.45rem .6rem; border-radius:var(--radius-sm,10px); background:var(--surface2,#F1F6F9); border:1px solid var(--border); }
.ia-pc-item.ok{ border-left:3px solid var(--green); }
.ia-pc-item.warn{ border-left:3px solid var(--amber); }
.ia-pc-item.bad{ border-left:3px solid var(--red); }
.ia-pc-ico{ flex:0 0 auto; }

/* ── Submit row ── */
.ia-submit-row{ display:flex; align-items:center; gap:.9rem; flex-wrap:wrap; }
.ia-btn{
  font:inherit; cursor:pointer; font-weight:700; font-size:.95rem;
  border-radius:var(--radius-sm,10px); padding:.7rem 1.4rem;
  border:1px solid var(--border); background:var(--surface2,#F1F6F9); color:var(--text);
  display:inline-flex; align-items:center; gap:.5rem; transition:all .2s;
}
.ia-btn--primary{ background:var(--accent); border-color:var(--accent); color:#fff; }
body.dark .ia-btn--primary{ color:#1a1408; }
.ia-btn--primary:hover{ filter:brightness(1.05); }
.ia-btn--primary:disabled{ opacity:.6; cursor:not-allowed; }
.ia-btn--ghost{ background:transparent; }
.ia-btn:hover{ text-decoration:none; }
.ia-quota{ font-size:.8rem; color:var(--text3); }

/* spinner */
.ia-btn-spinner{
  width:14px; height:14px; border-radius:50%;
  border:2px solid rgba(255,255,255,.4); border-top-color:#fff;
  animation:ia-spin .7s linear infinite; display:inline-block;
}
body:not(.dark) .ia-btn--primary .ia-btn-spinner{ border:2px solid rgba(255,255,255,.4); border-top-color:#fff; }
@keyframes ia-spin{ to{ transform:rotate(360deg);} }

.ia-msg{ margin-top:.7rem; font-size:.88rem; min-height:1.2em; }
.ia-msg.err{ color:var(--red); }
.ia-msg.ok{ color:var(--green); }

/* ── Results ── */
.ia-results{
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--radius,16px); padding:1.5rem; margin-bottom:1.5rem;
  box-shadow:var(--shadow,0 4px 14px rgba(10,24,40,.08));
}
.ia-results-head{ display:flex; gap:1.5rem; align-items:center; flex-wrap:wrap; margin-bottom:1.5rem; }
.ia-verdict{ flex:1 1 260px; min-width:0; }
.ia-verdict h2{ font-size:1.3rem; margin-bottom:.4rem; }
.ia-verdict p{ color:var(--text2); font-size:.92rem; margin-bottom:.8rem; }

/* score ring */
.ia-ring-wrap{ position:relative; width:120px; height:120px; flex:0 0 auto; }
.ia-ring{ width:120px; height:120px; transform:rotate(-90deg); }
.ia-ring circle{ fill:none; stroke-width:10; stroke-linecap:round; }
.ia-ring-bg{ stroke:var(--surface3,#E3ECF2); }
.ia-ring-fg{ stroke:var(--accent); transition:stroke-dashoffset .9s ease, stroke .3s; }
.ia-ring-wrap.band-red .ia-ring-fg{ stroke:#C0392B; }
.ia-ring-wrap.band-orange .ia-ring-fg{ stroke:#E08A3C; }
.ia-ring-wrap.band-green .ia-ring-fg{ stroke:#2E7D5B; }
.ia-ring-wrap.band-gold .ia-ring-fg{ stroke:#B8860B; }
body.dark .ia-ring-wrap.band-red .ia-ring-fg{ stroke:#E07A5F; }
body.dark .ia-ring-wrap.band-orange .ia-ring-fg{ stroke:#E8A25C; }
body.dark .ia-ring-wrap.band-green .ia-ring-fg{ stroke:#B8C97D; }
body.dark .ia-ring-wrap.band-gold .ia-ring-fg{ stroke:#E8C87A; }
.ia-ring-center{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; }
.ia-ring-total{ font-size:2.1rem; font-weight:800; line-height:1; }
.ia-ring-of{ font-size:.78rem; color:var(--text3); }

/* bars */
.ia-bars{ display:flex; flex-direction:column; gap:.6rem; margin-bottom:1.5rem; }
.ia-bar{ display:grid; grid-template-columns:2.2rem 1fr 3.2rem; align-items:center; gap:.6rem; }
.ia-bar-tag{ font-weight:800; font-size:.85rem; text-align:center; }
.ia-bar-track{ height:12px; border-radius:999px; background:var(--surface3,#E3ECF2); overflow:hidden; }
.ia-bar-fill{ height:100%; border-radius:999px; width:0; transition:width .8s ease; }
.ia-bar-fill.a{ background:#3a6ea5; }
.ia-bar-fill.b{ background:#2E7D5B; }
.ia-bar-fill.c{ background:#B8860B; }
.ia-bar-fill.d{ background:#C05A74; }
.ia-bar-val{ font-size:.85rem; font-weight:700; text-align:right; font-variant-numeric:tabular-nums; }

/* criterion cards */
.ia-cards{ display:grid; grid-template-columns:repeat(2,1fr); gap:1rem; margin-bottom:1.5rem; }
.ia-card{
  border:1px solid var(--border); border-radius:var(--radius,16px);
  padding:1rem; background:var(--surface2,#F1F6F9); border-top:4px solid var(--border2,#CBD9E2);
}
.ia-card.hit-a{ border-top-color:#3a6ea5; }
.ia-card.hit-b{ border-top-color:#2E7D5B; }
.ia-card.hit-c{ border-top-color:#B8860B; }
.ia-card.hit-d{ border-top-color:#C05A74; }
.ia-card-head{ display:flex; align-items:center; gap:.5rem; margin-bottom:.5rem; flex-wrap:wrap; }
.ia-card-tag{ width:24px; height:24px; border-radius:7px; display:flex; align-items:center; justify-content:center; color:#fff; font-weight:800; font-size:.8rem; }
.ia-card-tag.a{ background:#3a6ea5; } .ia-card-tag.b{ background:#2E7D5B; }
.ia-card-tag.c{ background:#B8860B; } .ia-card-tag.d{ background:#C05A74; }
.ia-card-name{ font-weight:700; font-size:.95rem; }
.ia-card-marks{ margin-left:auto; font-weight:800; font-size:1rem; }
.ia-band-pill{ display:inline-block; font-size:.72rem; font-weight:700; padding:.15rem .55rem; border-radius:999px; background:var(--accent-bg,#FBF3E0); color:var(--accent); margin-left:.3rem; }
.ia-descriptor{
  font-size:.82rem; color:var(--text2); font-style:italic;
  border-left:3px solid var(--border2,#CBD9E2); padding:.35rem .6rem; margin:.5rem 0;
  background:var(--surface); border-radius:0 var(--radius-sm,10px) var(--radius-sm,10px) 0;
}
.ia-summary{ font-size:.9rem; margin:.5rem 0; }
.ia-evidence{ font-size:.83rem; margin:.4rem 0; padding-left:0; list-style:none; }
.ia-evidence li{ padding:.3rem .5rem .3rem 1.4rem; position:relative; margin-bottom:.3rem; background:var(--surface); border:1px dashed var(--border); border-radius:var(--radius-sm,10px); }
.ia-evidence li::before{ content:"“"; position:absolute; left:.4rem; color:var(--accent); font-weight:800; }
.ia-improvements{ margin:.5rem 0 0; padding-left:1.1rem; font-size:.86rem; }
.ia-improvements li{ margin-bottom:.3rem; }
.ia-sub-label{ font-size:.72rem; font-weight:800; text-transform:uppercase; letter-spacing:.05em; color:var(--text3); margin:.6rem 0 .2rem; }

/* top3 */
.ia-top3{ border-top:1px solid var(--border); padding-top:1rem; }
.ia-top3 h4{ font-size:1rem; margin-bottom:.5rem; }
.ia-top3 ol{ padding-left:1.2rem; }
.ia-top3 li{ margin-bottom:.4rem; font-size:.92rem; }
.ia-priority{ display:inline-block; margin-top:.5rem; font-size:.8rem; font-weight:700; padding:.2rem .6rem; border-radius:999px; background:color-mix(in srgb, var(--red) 15%, var(--surface)); color:var(--red); }

/* fallback (AI down) notice */
.ia-fallback-note{
  background:color-mix(in srgb, var(--amber) 14%, var(--surface));
  border:1px solid var(--amber); border-radius:var(--radius-sm,10px);
  padding:.7rem .9rem; font-size:.86rem; margin-bottom:1rem;
}

/* ── History ── */
.ia-history{ margin-bottom:2rem; }
.ia-history h3{ font-size:1.15rem; margin-bottom:.3rem; }
.ia-history-hint{ font-size:.82rem; color:var(--text3); margin-bottom:.7rem; }
.ia-history-list{ list-style:none; display:flex; flex-direction:column; gap:.5rem; }
.ia-history-list:empty{ display:none; }
.ia-history-item{
  display:grid; grid-template-columns:2.6rem 1fr auto; align-items:center; gap:.8rem;
  padding:.6rem .8rem; border:1px solid var(--border); border-radius:var(--radius-sm,10px);
  background:var(--surface); cursor:pointer; transition:all .15s;
}
.ia-history-item:hover{ border-color:var(--accent); }
.ia-history-score{ font-weight:800; font-size:1.05rem; text-align:center; }
.ia-history-meta{ min-width:0; }
.ia-history-rq{ font-size:.88rem; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ia-history-date{ font-size:.75rem; color:var(--text3); }
.ia-history-crit{ font-size:.75rem; color:var(--text2); font-variant-numeric:tabular-nums; }

/* ── Source footer ── */
.ia-source{ border-top:1px solid var(--border); padding-top:1rem; margin-top:1rem; }
.ia-source p{ font-size:.78rem; color:var(--text3); }

/* ── Responsive: keep everything inside 390px, no horizontal scroll ── */
@media (max-width:640px){
  .ia-results-head{ flex-direction:column; align-items:flex-start; }
  .ia-cards{ grid-template-columns:1fr; }
  .ia-mode-btn{ padding:.4rem .65rem; font-size:.8rem; }
  .ia-field-narrow{ flex:1 1 100%; }
}
@media (max-width:400px){
  .ia-panel,.ia-results{ padding:1rem; }
  .ia-hero{ padding:1.5rem 0 1rem; }
  .ia-history-item{ grid-template-columns:2.2rem 1fr; }
  .ia-history-crit{ display:none; }
}
/* hard guard: nothing may widen the viewport */
.ia-main,.ia-panel,.ia-results,.ia-cards,.ia-bars,.ia-optional-row,.ia-optional-row *{ max-width:100%; }