/**
 * ITR Health Tools — Main Stylesheet
 *
 * Design system: clean clinical UI with blue primary, white cards,
 * horizontal radio buttons, circular score dial, gradient severity bar.
 *
 * All classes are prefixed with .itr- to avoid conflicts.
 *
 * @package ITR_Health_Tools
 * @version 1.0.0
 */

/* ─────────────────────────────────────────────────────────────────────────────
   CSS Custom Properties (Design Tokens)
───────────────────────────────────────────────────────────────────────────── */
:root {
  --itr-font:            -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --itr-font-size-sm:    0.8125rem;   /* 13px */
  --itr-font-size-base:  0.9375rem;   /* 15px */
  --itr-font-size-md:    1rem;        /* 16px */
  --itr-font-size-lg:    1.125rem;    /* 18px */
  --itr-font-size-xl:    1.375rem;    /* 22px */
  --itr-font-size-2xl:   1.75rem;     /* 28px */
  --itr-font-size-3xl:   2.5rem;      /* 40px */
  --itr-font-size-4xl:   3rem;        /* 48px */

  /* Core palette */
  --itr-color-primary:       #3b5bdb;
  --itr-color-primary-dark:  #2f4ac2;
  --itr-color-primary-light: #eef2ff;
  --itr-color-white:         #ffffff;
  --itr-color-bg:            #f4f5f7;
  --itr-color-border:        #e5e7eb;
  --itr-color-border-focus:  #3b5bdb;
  --itr-color-text:          #111827;
  --itr-color-text-muted:    #6b7280;
  --itr-color-text-hint:     #9ca3af;

  /* Severity palette */
  --itr-color-minimal:  #22c55e;
  --itr-color-mild:     #eab308;
  --itr-color-moderate: #f97316;
  --itr-color-severe:   #ef4444;
  --itr-color-mod-sev:  #dc2626;

  /* Info card colours */
  --itr-color-blue:   #3b82f6;
  --itr-color-green:  #16a34a;
  --itr-color-orange: #ea580c;
  --itr-color-red:    #dc2626;

  /* Spacing */
  --itr-space-1:  0.25rem;
  --itr-space-2:  0.5rem;
  --itr-space-3:  0.75rem;
  --itr-space-4:  1rem;
  --itr-space-5:  1.25rem;
  --itr-space-6:  1.5rem;
  --itr-space-8:  2rem;
  --itr-space-10: 2.5rem;
  --itr-space-12: 3rem;

  /* Border radius */
  --itr-radius-sm:  0.375rem;
  --itr-radius-md:  0.625rem;
  --itr-radius-lg:  0.875rem;
  --itr-radius-xl:  1.25rem;
  --itr-radius-full: 9999px;

  /* Shadow */
  --itr-shadow-sm:  0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
  --itr-shadow-md:  0 4px 12px rgba(0,0,0,0.08);
  --itr-shadow-lg:  0 8px 24px rgba(0,0,0,0.10);

  /* Transition */
  --itr-transition: 0.18s ease;
}

/* ─────────────────────────────────────────────────────────────────────────────
   Tool Wrapper
───────────────────────────────────────────────────────────────────────────── */
.itr-tool {
  font-family:    var(--itr-font);
  font-size:      var(--itr-font-size-base);
  color:          var(--itr-color-text);
  background:     var(--itr-color-bg);
  border-radius:  var(--itr-radius-xl);
  padding:        var(--itr-space-6);
  margin-bottom:  var(--itr-space-8);
  box-sizing:     border-box;
}

.itr-tool *,
.itr-tool *::before,
.itr-tool *::after {
  box-sizing: inherit;
}

.itr-tool__heading {
  font-size:     var(--itr-font-size-xl);
  font-weight:   700;
  color:         var(--itr-color-text);
  margin:        0 0 var(--itr-space-6);
  line-height:   1.3;
}

/* ─────────────────────────────────────────────────────────────────────────────
   Split Layout (BMI & Due Date — two-panel side by side)
───────────────────────────────────────────────────────────────────────────── */
.itr-tool__layout {
  display:               grid;
  grid-template-columns: 1fr 1fr;
  gap:                   var(--itr-space-6);
  align-items:           start;
}

.itr-tool__panel {
  background:    var(--itr-color-white);
  border-radius: var(--itr-radius-lg);
  padding:       var(--itr-space-8);
  box-shadow:    var(--itr-shadow-sm);
}

.itr-tool__title {
  font-size:   var(--itr-font-size-xl);
  font-weight: 700;
  margin:      0 0 var(--itr-space-6);
  color:       var(--itr-color-text);
  line-height: 1.3;
}

/* ─────────────────────────────────────────────────────────────────────────────
   Form Fields
───────────────────────────────────────────────────────────────────────────── */
.itr-field {
  margin-bottom: var(--itr-space-5);
}

.itr-field:last-child {
  margin-bottom: 0;
}

.itr-field__label {
  display:       block;
  font-size:     var(--itr-font-size-sm);
  font-weight:   600;
  color:         var(--itr-color-text);
  margin-bottom: var(--itr-space-2);
  letter-spacing: 0.01em;
}

.itr-field__input {
  width:         100%;
  height:        2.75rem;
  padding:       0 var(--itr-space-4);
  border:        1.5px solid var(--itr-color-border);
  border-radius: var(--itr-radius-md);
  font-size:     var(--itr-font-size-base);
  font-family:   var(--itr-font);
  color:         var(--itr-color-text);
  background:    var(--itr-color-white);
  transition:    border-color var(--itr-transition), box-shadow var(--itr-transition);
  outline:       none;
  appearance:    none;
}

.itr-field__input:focus {
  border-color: var(--itr-color-border-focus);
  box-shadow:   0 0 0 3px rgba(59, 91, 219, 0.12);
}

.itr-field__input::placeholder {
  color: var(--itr-color-text-hint);
}

.itr-field__input-group {
  display:     flex;
  gap:         var(--itr-space-2);
  align-items: center;
}

.itr-field__input-group .itr-field__input {
  flex: 1;
}

.itr-field__select-wrap {
  position: relative;
}

.itr-field__select,
.itr-field__unit-select {
  height:          2.75rem;
  padding:         0 var(--itr-space-8) 0 var(--itr-space-4);
  border:          1.5px solid var(--itr-color-border);
  border-radius:   var(--itr-radius-md);
  font-size:       var(--itr-font-size-base);
  font-family:     var(--itr-font);
  color:           var(--itr-color-text);
  background:      var(--itr-color-white);
  appearance:      none;
  cursor:          pointer;
  transition:      border-color var(--itr-transition);
  outline:         none;
  min-width:       5rem;
}

.itr-field__select {
  width: 100%;
}

.itr-field__select:focus,
.itr-field__unit-select:focus {
  border-color: var(--itr-color-border-focus);
  box-shadow:   0 0 0 3px rgba(59, 91, 219, 0.12);
}

.itr-field__select-wrap .itr-field__select-arrow {
  position:      absolute;
  right:         var(--itr-space-3);
  top:           50%;
  transform:     translateY(-50%);
  pointer-events: none;
  color:         var(--itr-color-text-muted);
}

.itr-field__date-wrap {
  position: relative;
}

.itr-field__date-wrap .itr-field__input {
  padding-right: 2.5rem;
  cursor:        pointer;
}

.itr-field__date-icon {
  position:      absolute;
  right:         var(--itr-space-3);
  top:           50%;
  transform:     translateY(-50%);
  pointer-events: none;
  color:         var(--itr-color-text-muted);
}

.itr-field__hint {
  display:    block;
  font-size:  var(--itr-font-size-sm);
  color:      var(--itr-color-text-muted);
  margin-top: var(--itr-space-1);
  line-height: 1.5;
}

.itr-field__notice {
  display:       flex;
  align-items:   center;
  gap:           var(--itr-space-2);
  font-size:     var(--itr-font-size-sm);
  margin-top:    var(--itr-space-2);
  padding:       var(--itr-space-2) var(--itr-space-3);
  border-radius: var(--itr-radius-sm);
}

.itr-field__notice--info {
  color:      #1d4ed8;
  background: #eff6ff;
}

.itr-field__error,
.itr-questionnaire__error {
  display:       none;
  padding:       var(--itr-space-3) var(--itr-space-4);
  border-radius: var(--itr-radius-md);
  background:    #fef2f2;
  border:        1px solid #fecaca;
  color:         #b91c1c;
  font-size:     var(--itr-font-size-sm);
  margin-top:    var(--itr-space-3);
}

.itr-field__error:not([hidden]),
.itr-questionnaire__error:not([hidden]) {
  display: block;
}

.itr-field-row {
  display:   flex;
  gap:       var(--itr-space-4);
  flex-wrap: wrap;
}

.itr-field--grow {
  flex: 1;
  min-width: 0;
}

/* ─────────────────────────────────────────────────────────────────────────────
   Buttons
───────────────────────────────────────────────────────────────────────────── */
.itr-btn {
  display:         inline-flex;
  align-items:     center;
  gap:             var(--itr-space-2);
  padding:         0.75rem var(--itr-space-6);
  border:          none;
  border-radius:   var(--itr-radius-full);
  font-size:       var(--itr-font-size-base);
  font-weight:     600;
  font-family:     var(--itr-font);
  cursor:          pointer;
  transition:      background var(--itr-transition), box-shadow var(--itr-transition), transform 0.1s ease;
  text-decoration: none;
  white-space:     nowrap;
}

.itr-btn:focus-visible {
  outline:        3px solid var(--itr-color-primary);
  outline-offset: 2px;
}

.itr-btn:active {
  transform: scale(0.98);
}

.itr-btn--primary {
  background: var(--itr-color-primary);
  color:      var(--itr-color-white);
  box-shadow: 0 2px 8px rgba(59, 91, 219, 0.25);
}

.itr-btn--primary:hover {
  background: var(--itr-color-primary-dark);
  box-shadow: 0 4px 16px rgba(59, 91, 219, 0.35);
}

.itr-btn--ghost {
  background:  transparent;
  color:       var(--itr-color-text);
  border:      1.5px solid var(--itr-color-border);
}

.itr-btn--ghost:hover {
  background: var(--itr-color-bg);
  border-color: var(--itr-color-text-muted);
}

.itr-btn__icon {
  flex-shrink: 0;
  width:       1.125rem;
  height:      1.125rem;
}

/* ─────────────────────────────────────────────────────────────────────────────
   Questionnaire Questions
───────────────────────────────────────────────────────────────────────────── */
.itr-questionnaire {
  display:        flex;
  flex-direction: column;
  gap:            var(--itr-space-3);
}

.itr-question {
  background:    var(--itr-color-white);
  border-radius: var(--itr-radius-lg);
  padding:       var(--itr-space-5) var(--itr-space-6);
  /* Full fieldset browser reset */
  border:        none;
  margin:        0;
  min-width:     0;
  width:         100%;
  display:       block;
}

.itr-question__text {
  /* Legend reset — forces block behaviour, kills browser float/indent */
  display:       block;
  float:         none;
  width:         100%;
  padding:       0;
  margin:        0 0 var(--itr-space-4) 0;
  /* Styles */
  font-size:     var(--itr-font-size-base);
  font-weight:   600;
  color:         var(--itr-color-text);
  line-height:   1.45;
  position: relative;
  top: 30px;
}

.itr-question__options {
  display:   grid;
  grid-template-columns: repeat(4, 1fr);
  gap:       var(--itr-space-2);
}

/* ─── Radio Option ─────────────────────────────────────────────────────── */
.itr-option {
  display:       flex;
  align-items:   center;
  gap:           var(--itr-space-2);
  padding:       0.5rem var(--itr-space-3);
  border-radius: var(--itr-radius-full);
  border:        1.5px solid var(--itr-color-border);
  cursor:        pointer;
  transition:    border-color var(--itr-transition), background var(--itr-transition);
  background:    var(--itr-color-white);
  user-select:   none;
  font-size:     var(--itr-font-size-sm);
  line-height:   1.4;
}

.itr-option:hover {
  border-color: var(--itr-color-primary);
  background:   var(--itr-color-primary-light);
}

.itr-option__input {
  position:     absolute;
  opacity:      0;
  width:        0;
  height:       0;
  pointer-events: none;
}

.itr-option__indicator {
  flex-shrink:   0;
  width:         1rem;
  height:        1rem;
  border-radius: 50%;
  border:        2px solid var(--itr-color-border);
  background:    var(--itr-color-white);
  transition:    border-color var(--itr-transition), background var(--itr-transition);
  position:      relative;
}

.itr-option__indicator::after {
  content:       '';
  position:      absolute;
  inset:         2px;
  border-radius: 50%;
  background:    var(--itr-color-primary);
  opacity:       0;
  transition:    opacity var(--itr-transition);
}

/* Selected state */
.itr-option__input:checked ~ .itr-option__indicator {
  border-color: var(--itr-color-primary);
}

.itr-option__input:checked ~ .itr-option__indicator::after {
  opacity: 1;
}

.itr-option:has(.itr-option__input:checked) {
  border-color: var(--itr-color-primary);
  background:   var(--itr-color-primary-light);
}

/* Focus */
.itr-option__input:focus-visible ~ .itr-option__indicator {
  outline:        2px solid var(--itr-color-primary);
  outline-offset: 2px;
}

.itr-option__label {
  font-size:  var(--itr-font-size-sm);
  color:      var(--itr-color-text);
  line-height: 1.35;
}

/* ─────────────────────────────────────────────────────────────────────────────
   Questionnaire Actions
───────────────────────────────────────────────────────────────────────────── */
.itr-questionnaire__actions {
  display:         flex;
  align-items:     center;
  gap:             var(--itr-space-4);
  margin-top:      var(--itr-space-4);
  justify-content: center;
  flex-wrap:       wrap;
}

/* ─────────────────────────────────────────────────────────────────────────────
   Score Results (Circular Dial + Severity)
───────────────────────────────────────────────────────────────────────────── */
.itr-score-results {
  background:    var(--itr-color-white);
  border-radius: var(--itr-radius-lg);
  padding:       var(--itr-space-6);
  margin-top:    var(--itr-space-6);
  box-shadow:    var(--itr-shadow-sm);
}

.itr-score-results:not([hidden]) {
  display: block;
}

.itr-score-results__inner {
  display:     flex;
  align-items: center;
  gap:         var(--itr-space-6);
  flex-wrap:   wrap;
}

/* Circular Dial */
.itr-score-dial {
  position:   relative;
  flex-shrink: 0;
  width:       9rem;
  height:      9rem;
}

.itr-score-dial__svg {
  width:  100%;
  height: 100%;
}

.itr-score-dial__dot {
  filter: drop-shadow( 0 1px 3px rgba(46, 62, 254, 0.4) );
}

.itr-score-dial__value {
  position:   absolute;
  inset:      0;
  display:    flex;
  flex-direction: column;
  align-items:    center;
  justify-content: center;
  text-align: center;
}

.itr-score-dial__number {
  font-size:   2.25rem;
  font-weight: 800;
  color:       var(--itr-color-text);
  line-height: 1;
}

.itr-score-dial__label {
  font-size:   0.6875rem;
  color:       var(--itr-color-text-muted);
  font-weight: 500;
  margin-top:  var(--itr-space-1);
  text-align:  center;
}

/* Score detail */
.itr-score-results__detail {
  flex: 1;
  min-width: 0;
}

.itr-score-results__header {
  display:     flex;
  align-items: center;
  gap:         var(--itr-space-3);
  flex-wrap:   wrap;
  margin-bottom: var(--itr-space-3);
}

.itr-score-results__title {
  font-size:   var(--itr-font-size-lg);
  font-weight: 700;
  margin:      0;
  color:       var(--itr-color-text);
}

.itr-score-results__badge {
  padding:       0.25rem 0.75rem;
  border-radius: var(--itr-radius-full);
  font-size:     var(--itr-font-size-sm);
  font-weight:   600;
  color:         var(--itr-color-white);
  background:    var(--itr-color-moderate);
  white-space:   nowrap;
}

.itr-score-results__scale-label {
  font-size:     var(--itr-font-size-sm);
  color:         var(--itr-color-text-muted);
  margin:        0 0 var(--itr-space-2);
}

/* ─────────────────────────────────────────────────────────────────────────────
   Severity Bar (Gradient Track)
───────────────────────────────────────────────────────────────────────────── */
.itr-severity-bar {
  position: relative;
}

.itr-severity-bar__track {
  position:      relative;
  display:       flex;
  height:        0.5rem;
  border-radius: var(--itr-radius-full);
  overflow:      visible;
  gap:           2px;
}

.itr-severity-bar__segment {
  border-radius: var(--itr-radius-full);
  height:        100%;
}

.itr-severity-bar__segment {
  transition: opacity 0.3s ease;
}



.itr-severity-bar__labels {
  display:         flex;
  justify-content: space-between;
  margin-top:      var(--itr-space-2);
  font-size:       0.6875rem;
  color:           var(--itr-color-text-muted);
}

/* ─────────────────────────────────────────────────────────────────────────────
   BMI-specific Results
───────────────────────────────────────────────────────────────────────────── */
.itr-results__score-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap:     var(--itr-space-4);
  margin-bottom: var(--itr-space-5);
}

.itr-results__score-card {
  background:    var(--itr-color-primary-light);
  border-radius: var(--itr-radius-lg);
  padding:       var(--itr-space-5) var(--itr-space-4);
  text-align:    center;
}

.itr-results__score-card-label {
  display:     block;
  font-size:   var(--itr-font-size-sm);
  color:       var(--itr-color-text-muted);
  margin-bottom: var(--itr-space-1);
}

.itr-results__score-card-value {
  display:     block;
  font-size:   var(--itr-font-size-4xl);
  font-weight: 800;
  color:       var(--itr-color-primary);
  line-height: 1.1;
}

.itr-results__disclaimer {
  font-size:     var(--itr-font-size-sm);
  color:         var(--itr-color-text-muted);
  margin-bottom: var(--itr-space-5);
  line-height:   1.5;
}

/* ─────────────────────────────────────────────────────────────────────────────
   Due Date Calculator
───────────────────────────────────────────────────────────────────────────── */
.itr-duedate__due-card {
  background:    var(--itr-color-primary-light);
  border-radius: var(--itr-radius-lg);
  padding:       var(--itr-space-6) var(--itr-space-5);
  text-align:    center;
  margin-bottom: var(--itr-space-5);
}

.itr-duedate__due-card-label {
  font-size:  var(--itr-font-size-sm);
  color:      var(--itr-color-text-muted);
  margin:     0 0 var(--itr-space-2);
}

.itr-duedate__due-date {
  font-size:   var(--itr-font-size-3xl);
  font-weight: 800;
  color:       var(--itr-color-primary);
  margin:      0 0 var(--itr-space-2);
  line-height: 1.2;
}

.itr-duedate__weeks-text {
  font-size:   var(--itr-font-size-sm);
  color:       var(--itr-color-text);
  margin:      0;
}

.itr-duedate__weeks-text strong {
  color: var(--itr-color-text);
}

/* Progress bar */
.itr-duedate__progress {
  margin-bottom: var(--itr-space-5);
}

.itr-duedate__progress-labels {
  display:         flex;
  justify-content: space-between;
  font-size:       var(--itr-font-size-sm);
  color:           var(--itr-color-text-muted);
  margin-bottom:   var(--itr-space-2);
}

.itr-duedate__progress-bar {
  height:        0.5rem;
  background:    var(--itr-color-border);
  border-radius: var(--itr-radius-full);
  overflow:      hidden;
}

.itr-duedate__progress-fill {
  height:        100%;
  background:    var(--itr-color-primary);
  border-radius: var(--itr-radius-full);
  width:         0%;
  transition:    width 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.itr-duedate__trimester-label {
  font-size:  var(--itr-font-size-sm);
  color:      var(--itr-color-text-muted);
  margin-top: var(--itr-space-2);
  margin-bottom: 0;
}

.itr-duedate__trimester-name {
  color: var(--itr-color-text);
}

.itr-duedate__cycle-field {
  flex-shrink: 0;
  width: 9rem;
}

/* ─────────────────────────────────────────────────────────────────────────────
   Safety / Crisis Notice
───────────────────────────────────────────────────────────────────────────── */
.itr-tool__safety-notice {
  display:       flex;
  gap:           var(--itr-space-3);
  align-items:   flex-start;
  padding:       var(--itr-space-4) var(--itr-space-5);
  border-radius: var(--itr-radius-lg);
  margin-top:    var(--itr-space-4);
  background:    #fff7ed;
  border:        1.5px solid #fed7aa;
  color:         #9a3412;
}

.itr-tool__safety-notice--urgent {
  background: #fef2f2;
  border-color: #fecaca;
  color:      #7f1d1d;
}

.itr-tool__safety-notice:not([hidden]) {
  display: flex;
}

.itr-tool__safety-notice p {
  margin: 0 0 var(--itr-space-2);
  font-size: var(--itr-font-size-sm);
  line-height: 1.55;
}

.itr-tool__safety-notice p:last-child {
  margin-bottom: 0;
}

.itr-icon--warning {
  flex-shrink: 0;
  color:       inherit;
  margin-top:  2px;
}

/* ─────────────────────────────────────────────────────────────────────────────
   Info Sections (Score explanation cards at the bottom)
───────────────────────────────────────────────────────────────────────────── */
.itr-info-section {
  margin-top: var(--itr-space-8);
}

.itr-info-section__title {
  font-size:     var(--itr-font-size-2xl);
  font-weight:   800;
  color:         var(--itr-color-text);
  margin:        0 0 var(--itr-space-3);
  line-height:   1.25;
}

.itr-info-section__intro {
  color:         var(--itr-color-text-muted);
  font-size:     var(--itr-font-size-base);
  margin:        0 0 var(--itr-space-6);
  line-height:   1.65;
  max-width:     70ch;
}

.itr-info-section__footer {
  color:      var(--itr-color-text-muted);
  font-size:  var(--itr-font-size-sm);
  margin-top: var(--itr-space-5);
  line-height: 1.6;
}

/* ─── Score Bands ─────────────────────────────────────────────────────────── */
.itr-score-bands {
  display:   grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap:       var(--itr-space-4);
}

.itr-score-band {
  border-radius: var(--itr-radius-lg);
  overflow:      hidden;
  background:    var(--itr-color-white);
  box-shadow:    var(--itr-shadow-sm);
}

.itr-score-band__header {
  padding:     var(--itr-space-4) var(--itr-space-5);
}

.itr-score-band__range {
  display:     block;
  font-size:   var(--itr-font-size-2xl);
  font-weight: 800;
  line-height: 1.1;
  margin-bottom: var(--itr-space-1);
}

.itr-score-band__label {
  display:     block;
  font-size:   var(--itr-font-size-base);
  font-weight: 600;
  line-height: 1.35;
}

.itr-score-band__body {
  padding:     var(--itr-space-4) var(--itr-space-5);
  background:  var(--itr-color-white);
}

.itr-score-band__steps-label {
  font-size:     0.625rem;
  font-weight:   700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin:        0 0 var(--itr-space-1);
}

.itr-score-band__steps {
  font-size:  var(--itr-font-size-sm);
  color:      var(--itr-color-text-muted);
  margin:     0;
  line-height: 1.55;
}

/* Severity colour schemes for score bands */
.itr-severity--minimal  .itr-score-band__header { background: #16a34a; color: #fff; }
.itr-severity--mild     .itr-score-band__header { background: #ca8a04; color: #fff; }
.itr-severity--moderate .itr-score-band__header { background: #ea580c; color: #fff; }
.itr-severity--moderately-severe .itr-score-band__header { background: #dc2626; color: #fff; }
.itr-severity--severe   .itr-score-band__header { background: #7f1d1d; color: #fff; }
.itr-severity--underweight .itr-score-band__header { background: #3b82f6; color: #fff; }
.itr-severity--healthy  .itr-score-band__header { background: #16a34a; color: #fff; }
.itr-severity--overweight .itr-score-band__header { background: #ea580c; color: #fff; }
.itr-severity--obese    .itr-score-band__header { background: #dc2626; color: #fff; }

.itr-severity--minimal  .itr-score-band__steps-label { color: #16a34a; }
.itr-severity--mild     .itr-score-band__steps-label { color: #ca8a04; }
.itr-severity--moderate .itr-score-band__steps-label { color: #ea580c; }
.itr-severity--moderately-severe .itr-score-band__steps-label { color: #dc2626; }
.itr-severity--severe   .itr-score-band__steps-label { color: #7f1d1d; }

/* ─── BMI Info Cards ─────────────────────────────────────────────────────── */
.itr-info-cards {
  display:   grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap:       var(--itr-space-4);
}

.itr-info-card {
  border-radius: var(--itr-radius-lg);
  padding:       var(--itr-space-5) var(--itr-space-5) var(--itr-space-5);
  color:         var(--itr-color-white);
  display:       flex;
  gap:           var(--itr-space-4);
  align-items:   flex-start;
}

.itr-info-card--blue   { background: #3b82f6; }
.itr-info-card--green  { background: #16a34a; }
.itr-info-card--orange { background: #ea580c; }
.itr-info-card--red    { background: #dc2626; }

.itr-info-card__icon {
  flex-shrink: 0;
  opacity:     0.85;
}

.itr-info-card__content {
  flex: 1;
  min-width: 0;
}

.itr-info-card__category {
  font-size:   var(--itr-font-size-sm);
  font-weight: 500;
  opacity:     0.85;
  margin:      0 0 var(--itr-space-1);
}

.itr-info-card__range {
  font-size:     var(--itr-font-size-lg);
  font-weight:   800;
  margin:        0 0 var(--itr-space-2);
  line-height:   1.2;
}

.itr-info-card__desc {
  font-size:  var(--itr-font-size-sm);
  opacity:    0.9;
  margin:     0;
  line-height: 1.5;
}

/* ─── Trimester Cards (Due Date) ─────────────────────────────────────────── */
.itr-trimester-cards {
  display:   grid;
  grid-template-columns: repeat(3, 1fr);
  gap:       var(--itr-space-4);
}

.itr-trimester-card {
  border-radius: var(--itr-radius-lg);
  overflow:      hidden;
  background:    var(--itr-color-white);
  box-shadow:    var(--itr-shadow-sm);
}

.itr-trimester-card__header {
  background: var(--itr-color-primary);
  color:      var(--itr-color-white);
  padding:    var(--itr-space-5) var(--itr-space-5);
}

.itr-trimester-card__title {
  font-size:   var(--itr-font-size-lg);
  font-weight: 700;
  margin:      0 0 var(--itr-space-1);
}

.itr-trimester-card__weeks {
  font-size:  var(--itr-font-size-sm);
  opacity:    0.85;
  margin:     0;
}

.itr-trimester-card__milestones {
  list-style: none;
  margin:     0;
  padding:    var(--itr-space-5);
  display:    flex;
  flex-direction: column;
  gap:        var(--itr-space-3);
}

.itr-trimester-card__milestone {
  display:   flex;
  gap:       var(--itr-space-2);
  font-size: var(--itr-font-size-sm);
  color:     var(--itr-color-text);
  line-height: 1.45;
}

.itr-icon--bullet {
  flex-shrink: 0;
  color:       var(--itr-color-primary);
  margin-top:  1px;
}

/* ─────────────────────────────────────────────────────────────────────────────
   Icons
───────────────────────────────────────────────────────────────────────────── */
.itr-icon {
  display:     inline-block;
  flex-shrink: 0;
  vertical-align: middle;
}

/* ─────────────────────────────────────────────────────────────────────────────
   Hidden utility
───────────────────────────────────────────────────────────────────────────── */
[hidden] {
  display: none !important;
}

/* ─────────────────────────────────────────────────────────────────────────────
   Admin Page
───────────────────────────────────────────────────────────────────────────── */
.itr-admin {
  max-width: 900px;
  margin:    2rem auto;
  font-family: var(--itr-font);
}

.itr-admin__grid {
  display:   grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap:       1.25rem;
  margin-top: 1.5rem;
}

.itr-admin__card {
  background:    #fff;
  border:        1px solid #e5e7eb;
  border-radius: 10px;
  padding:       1.25rem 1.5rem;
}

.itr-admin__card h3 {
  margin: 0 0 0.5rem;
  font-size: 1rem;
}

.itr-admin__card p {
  margin: 0 0 0.75rem;
  font-size: 0.875rem;
  color: #6b7280;
}

.itr-admin__shortcode {
  display:       inline-block;
  background:    #f3f4f6;
  border:        1px solid #e5e7eb;
  border-radius: 6px;
  padding:       0.2rem 0.5rem;
  font-family:   monospace;
  font-size:     0.875rem;
  color:         #374151;
}

/* ─────────────────────────────────────────────────────────────────────────────
   Responsive
───────────────────────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .itr-trimester-cards {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  .itr-tool__layout {
    grid-template-columns: 1fr;
  }

  .itr-question__options {
    grid-template-columns: 1fr 1fr;
    gap:                   var(--itr-space-2);
  }

  .itr-score-results__inner {
    flex-direction: column;
    align-items:    flex-start;
  }

  .itr-score-bands {
    grid-template-columns: 1fr 1fr;
  }

  .itr-info-cards {
    grid-template-columns: 1fr 1fr;
  }

  .itr-info-section__title {
    font-size: var(--itr-font-size-xl);
  }
}

@media (max-width: 540px) {
  .itr-tool {
    padding: var(--itr-space-4);
  }

  .itr-tool__panel {
    padding: var(--itr-space-5);
  }

  .itr-question {
    padding: var(--itr-space-4);
  }

  .itr-question__options {
    grid-template-columns: 1fr;
  }

  .itr-score-bands {
    grid-template-columns: 1fr;
  }

  .itr-info-cards {
    grid-template-columns: 1fr;
  }

  .itr-results__score-cards {
    grid-template-columns: 1fr 1fr;
  }

  .itr-field-row {
    flex-direction: column;
  }

  .itr-duedate__cycle-field {
    width: 100%;
  }

  .itr-questionnaire__actions {
    flex-direction: column;
  }

  .itr-questionnaire__actions .itr-btn {
    width: 100%;
    justify-content: center;
  }
}