/* Floating one-shot notification prompt */
#mfa-push-bar {
  position: fixed;
  left: 50%;
  bottom: 4rem;
  transform: translateX(-50%);
  max-width: 500px;
  width: calc(100% - 2rem);
  box-sizing: border-box;

  background-image: linear-gradient(180deg, #FFFFFF 0%, #FFB0B0 100%);
  color: #414141;
  padding: 1rem 1.2rem;
  border-radius: 0.75rem;
  box-shadow: 0 12px 30px rgba(15, 23, 42, 0.45);
  z-index: 999999;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.9rem;
}

#mfa-push-bar .mfa-push-text {
  flex: 1 1 auto;
}

#mfa-push-bar .mfa-push-enable {
  flex: 0 0 auto;
  border: none;
  border-radius: 999px;
  padding: 0.35rem 0.9rem;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  background-image: linear-gradient(180deg, #FFFFFF 0%, #ABFF9B 100%);
  color: #333;
}

#mfa-push-bar .mfa-push-close {
  flex: 0 0 auto;
  border: none;
	border-radius:6px;
  background: #f4f4f4;
  color: #ff1313;
  font-size: 1.1rem;
  cursor: pointer;
  padding:2px 3px;
  line-height: 1;
}

/**** Notifications****/

        .mfa-push-settings,
        .mfa-chat-email-settings{
          margin: 0.75rem 0 0;
          padding: 0.75rem 0.75rem 0.25rem;
          border-radius: 0.75rem;
          background: #f9fafb;
          border: 1px solid #e5e7eb;
          font-size: 0.9rem;
        }
        .mfa-push-intro {
          margin: 0 0 0.75rem;
          color: #4b5563;
        }

        .mfa-push-title {
          font-weight: 600;
          color: #111827;
        }
        .mfa-push-controls-side {
          display: inline-flex;
          align-items: center;
          gap: 0.4rem;
          flex-shrink: 0;
        }
        .mfa-push-state-text,
        .mfa-toggle-state-text {
          min-width: 2.2rem;
          text-align: left;
          font-size: 0.8rem;
          color: #4b5563;
        }

        /* Pill switch */
        .mfa-toggle-pill {
          position: relative;
          display: inline-flex;
          align-items: center;
          justify-content: flex-start;
          width: 3.1rem;
          height: 1.55rem;
          border-radius: 999px;
          border: 1px solid #cbd5f5;
          background: #e5e7eb;
          padding: 0 0.12rem;
          cursor: pointer;
          transition: background .15s ease, border-color .15s ease;
        }
        .mfa-toggle-pill[disabled] {
          opacity: 0.55;
          cursor: not-allowed;
        }
        .mfa-toggle-knob {
          width: 1.25rem;
          height: 1.25rem;
          border-radius: 999px;
          background: #ffffff;
          box-shadow: 0 1px 2px rgba(15,23,42,.30);
          transform: translateX(0);
          transition: transform .15s ease;
        }
        .mfa-toggle-pill.is-on {
          background: #16a34a;
          border-color: #16a34a;
        }
        .mfa-toggle-pill.is-on .mfa-toggle-knob {
          transform: translateX(1.4rem);
        }

.mfa-push-save-btn{
	background: #16a34a;
	color:#fff;
	font-weight:700;
	border: 1px;
	border-radius:6px;
}
.mfa-toggle-pill:hover,
.mfa-push-save-btn:hover{
	background: #1cd862 !important;
}
/* Main layout for each row */
.mfa-push-row{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.5rem;
}
.mfa-push-row-email{
	flex-direction:row;
}
/* Left block: title + info icon + tooltip anchor */
.mfa-push-label {
  position: relative;             /* anchor for absolute tooltip */
  align-items: center;
  gap: 0.35rem;
}

/* Tiny "i" button */
.mfa-push-info,
#mfa-staff-members-help{
  border: none;
  background: #e5e7eb;
  color: #111827;
  border-radius: 999px;
  width: 1.3rem;
  height: 1.3rem;
  font-size: 0.85rem;
  line-height: 1.3rem;
  text-align: center;
  padding: 0;
  cursor: pointer;
	box-shadow: 0 0 1px 0 rgba(15, 23, 42, 0.25) !important;
}

/* Tooltip bubble – initially hidden */
.mfa-push-tip {
  position: absolute;
  top: 100%;                      /* right under the label */
  left: 0;
  margin-top: 0.35rem;
  width: min(260px, 96vw);
  max-width: none;         /* in case an earlier rule set one */
  white-space: normal;     /* make sure text can wrap */
  padding: 0.55rem 0.7rem;
  font-size: 0.8rem;
  line-height: 1.4;
	color: #7c2d12; 
  background: #fff7ed;              /* soft amber */
  border: 1px solid #fed7aa;
  border-radius: 0.45rem;
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.25);
  z-index: 9990;
  display: none;                  /* toggled via [data-open] */
}

/* When JS sets data-open="1", show tooltip */
.mfa-push-tip[data-open="1"] {
  display: block;
}

        .mfa-push-label {
          flex-direction: column;
          align-items: flex-start;
          align-self: flex-start;
        }
        .mfa-push-label > span,
        .mfa-push-label > button {
          align-self: center;
        }

.mfa-push-email-qa{
	line-height:1.5;
	margin-bottom:8px;
}
.mfa-push-controls-side{
	align-items:stretch;
	display:flex;
}
.mfa-chat-email-select{
	border-radius:6px;
	padding:3px;
}


/* optional */
.li-init-wait { pointer-events:none; opacity:.6; }

.faa-admin-console{
  --font:'Montserrat',sans-serif;
  --fs:clamp(0.95rem,1.8vw,1.025rem);
  --r:.9rem;
  --py:.55rem; --px:1rem;
  --gray1:#666; --gray2:#1c1c1c;
  --blue1:#30D7FF; --blue2:#3CA9C4;
  --red1:#8b0000; --red2:#400000;
  --red1h:#ff4d4d; --red2h:#cc0000;
  --focus:#bcd2ff;
	max-width:1200px;
	margin:auto;
}

.faa-admin-console .button,
.faa-admin-console a.button,
.faa-admin-console button,
.faa-admin-console input[type=button],
.faa-admin-console input[type=submit]{
  font-family:var(--font);
  font-size:var(--fs);
  font-weight:600;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.5rem;
  padding:var(--py) var(--px) !important;
  border-radius:var(--r);
  width:auto; min-width:8rem;
  background:linear-gradient(180deg,var(--gray1),var(--gray2));
  border:1px solid rgba(0,0,0,.25);
  color:#fff !important;
  text-decoration:none !important;
  box-shadow:0 0 2px rgba(0,0,0,.25), inset 0 0 3px rgba(0,0,0,.25);
  transition:transform .06s ease, filter .12s ease, background .12s ease, box-shadow .12s ease;
  cursor:pointer; white-space:nowrap;
}

.faa-admin-console .button:hover,
.faa-admin-console a.button:hover,
.faa-admin-console button:hover,
.faa-admin-console input[type=button]:hover,
.faa-admin-console input[type=submit]:hover{
  transform:translateY(-1px);
  filter:brightness(1.05);
}

.faa-admin-console .button:active,
.faa-admin-console a.button:active,
.faa-admin-console button:active,
.faa-admin-console input[type=button]:active,
.faa-admin-console input[type=submit]:active{
  transform:translateY(0);
  filter:brightness(.95);
}

.faa-admin-console .button:focus,
.faa-admin-console a.button:focus,
.faa-admin-console button:focus,
.faa-admin-console input[type=button]:focus,
.faa-admin-console input[type=submit]:focus{
  outline:none;
  box-shadow:0 0 0 3px var(--focus);
}
.faa-admin-console .button[disabled],
.faa-admin-console .button:disabled{
  opacity:.65;
  cursor:not-allowed;
}
.load-progress-table-btn,
.faa-admin-console .button-primary,
.faa-admin-console form button[type=submit],
.faa-admin-console #faa-toggle-missing{
  background:linear-gradient(180deg,var(--blue1),var(--blue2)) !important;
  border-color:rgba(48,215,255,.35) !important;
}

.load-progress-table-btn:hover,
.faa-admin-console .button-primary:hover,
.faa-admin-console form button[type=submit]:hover,
.faa-admin-console #faa-toggle-missing:hover{
  background:linear-gradient(180deg,var(--gray1),var(--gray2)) !important;
}

.faa-admin-console #faa-reset-progress,
.faa-admin-console #faa-reset-study,
.faa-admin-console .faa-btn-reset-attempts,
.faa-admin-console .faa-reset-progress,
.faa-admin-console .button-danger{
  background:linear-gradient(180deg,var(--red1),var(--red2)) !important;
  border:1px solid rgba(139,0,0,.5) !important;
  color:#fff !important;
  box-shadow:0 0 2px rgba(0,0,0,.25), inset 0 0 3px rgba(0,0,0,.25) !important;
}
.faa-admin-console #faa-reset-progress:hover,
.faa-admin-console #faa-reset-study:hover,
.faa-admin-console .faa-btn-reset-attempts:hover,
.faa-admin-console .faa-reset-progress:hover
.faa-admin-console .button-danger:hover {
  background:linear-gradient(180deg,var(--red1h),var(--red2h)) !important;
}
.faa-admin-console .faa-section-head a.button,
.faa-admin-console .faa-matches a.button{
  min-width:7rem;
  padding:.45rem .75rem !important;
}
@media (max-width:480px){
  .faa-admin-console .button,
  .faa-admin-console a.button,
  .faa-admin-console button,
  .faa-admin-console input[type=button],
  .faa-admin-console input[type=submit]{ width:100%; }
}
     .button.button-danger:hover {
        background: #ff4d4d !important; 
    }
#load-table.button::before,
#fl-reset.button::before{
  content:"";
  display:block;
  height: calc(1.05rem + .25rem); 
}
#load-table.button,
#fl-reset.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 32px;   
  line-height: 1;
  padding: 0.4rem 1rem;
  background:#000 ;
  border:1px solid rgba(0,0,0,.25);
  color:#fff !important;
  border-radius: 8px;
  text-decoration:none !important;
  box-shadow:0 0 2px rgba(0,0,0,.25), inset 0 0 3px rgba(0,0,0,.25);
  transition:transform .06s ease, filter .12s ease, background .12s ease, box-shadow .12s ease;
  cursor:pointer; white-space:nowrap;
}
#fl-reset.button {
	margin-top:20px;
}
#load-table.button:hover,
#fl-reset.button:hover{
  background:#f9fafb;
  border: 1px solid #d1d5db;
  color:#333 !important;
}

/*=========Study Checklist===========*/

/* Base */
.faa-study-admin{width:100%;border-collapse:collapse}
.faa-study-admin th,.faa-study-admin td{border:1px solid #ddd;padding:.5rem;text-align:left}
.faa-study-admin .col-center{text-align:center}
.faa-study-admin th{background:#f7f7f7}

/* Chapter title row stays black/white */
.faa-study-admin tbody tr.chapter-head>td{
  background:#000 !important;
  color:#fff;
  font-weight:700;
  cursor:pointer;             
}

/* Tiny caret + open state */
.faa-study-admin .chapter-head .twisty{
  display:inline-block;width:1.1em;text-align:center;margin-right:.35rem;color:#fff;
}
.faa-study-admin .chapter-head:focus{outline:2px solid #999;outline-offset:-2px}

/* Chapter summary row  */
.faa-study-admin tbody tr.chapter-summary>td{
  background:#fde8e8 !important;
  font-weight:700;
}
.faa-study-admin .chapter-summary.is-complete td{
  background:#e6f4ea !important;
}
/* Keep quiz text color normal when complete */
.faa-study-admin .chapter-summary.is-complete .col-quiz{color:inherit !important}

/* Chips (yours) */
:root{
  --faa-chip-yes-bg:#e6f4ea;--faa-chip-yes-fg:#1f6b3a;
  --faa-chip-no-bg:#fde8e8; --faa-chip-no-fg:#b42318;
  --faa-chip-na-bg:#f3f4f6; --faa-chip-na-fg:#374151;
}
.faa-chip{display:inline-flex;align-items:center;justify-content:center;min-width:1.6em;height:1.6em;padding:0 .4em;border-radius:999px;font-size:.9rem;font-weight:700;line-height:1;user-select:none}
.faa-chip.is-yes{background:var(--faa-chip-yes-bg);color:var(--faa-chip-yes-fg)}
.faa-chip.is-no{ background:var(--faa-chip-no-bg); color:var(--faa-chip-no-fg)}
.faa-chip.is-na{ background:var(--faa-chip-na-bg); color:var(--faa-chip-na-fg)}

/* Quiz pills (yours) */
.faa-study-admin .quiz-pill{display:inline-block;padding:.1rem .4rem;border-radius:.35rem;font-weight:600;font-size:.9em;line-height:1.1;color:#000;background:transparent}
.faa-study-admin .quiz-pill.is-pass{color:#1f6b3a;background:#e6f4ea}
.faa-study-admin .quiz-pill.is-fail{color:#b42318;background:#fde8e8}

.mono{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace}

.col-quiz {max-width:13rem}
.sc-cert-filter {min-width: 6rem;}

/* Center header titles */
.faa-study-admin thead th {
  text-align: center !important;
  vertical-align: middle;
}

.faa-rp-modal {
        position: fixed; inset: 0; display: none;
        align-items: center; justify-content: center; z-index: 99999;
        background: rgba(0,0,0,.45);
      }
.faa-rp-modal.open { display: flex; }
.faa-rp-card {
  max-width: 600px; 
  width: 92%;
  max-height: 70vh;
  background: #fff;
  color:#111;
  border-radius: 10px;
  padding: 16px 18px;
  box-shadow: 0 12px 30px rgba(0,0,0,.35);
  font: 14px/1.4 system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";

  /* ✨ make inner content scrollable */
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

      .faa-rp-card h3 { margin:.25rem 0 .5rem; font-size: 16px; }
      .faa-rp-grid { display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: .5rem .75rem; margin:.5rem 0 1rem; }
      .faa-rp-row { display:flex; align-items:center; gap:.5rem; }
      .faa-rp-actions { display:flex; justify-content:flex-end; gap:.5rem; margin-top:.5rem; }
      .faa-rp-actions button { padding:.45rem .8rem; border-radius:6px; border:1px solid #ddd; cursor:pointer; }
      .faa-rp-actions .danger { background:#b91c1c; color:#fff; border-color:#b91c1c; }
      .faa-rp-note { font-size:12px; color:#6b7280; margin-top:.25rem; }


.study-controls{
  display: flex;
  align-items: center;     
  gap: .5rem;
  margin: .5rem 0 1rem;
	align-self: stretch;
}

.study-controls .button{color:#333!important;padding:.45rem .75rem;border-radius:.5rem;border:1px solid #d1d5db;background:#f9fafb;cursor:pointer}
.study-controls .button:hover{background:#f3f4f6}

.sc-sep{opacity:.55;line-height:1;display:inline-block;transform:translateY(-1px);color: #000;cursor: none;}
  .faa-export-buttons .pdf-ico{flex:0 0 auto;}
.faa-dl-link .pdf-ico { color:#d32f2f; }

:root { --faa-chip-yes-bg:#e6f4ea; --faa-chip-yes-fg:#1f6b3a; --faa-chip-no-bg:#fde8e8; --faa-chip-no-fg:#b42318; }
    .faa-chip{display:inline-flex;align-items:center;justify-content:center;min-width:1.6em;height:1.6em;padding:0 .4em;border-radius:999px;font-weight:700;line-height:1}
    .faa-chip.is-yes{background:var(--faa-chip-yes-bg);color:var(--faa-chip-yes-fg)}
    .faa-chip.is-no{ background:var(--faa-chip-no-bg); color:var(--faa-chip-no-fg)}
    .faa-lesson-quiz-log{width:100%;border-collapse:collapse;margin:.6rem 0}
    .faa-lesson-quiz-log th,.faa-lesson-quiz-log td{border:1px solid #ddd;padding:.5rem;text-align:left}
    .faa-lesson-quiz-log thead th{background:#000;color:#fff}
    .faa-lesson-quiz-log td.col-center{text-align:center}
    .faa-lesson-quiz-log td:first-child,.faa-lesson-quiz-log th:first-child{width:100px;white-space:nowrap}
    .faa-lesson-quiz-log th:nth-child(4), .faa-lesson-quiz-log td:nth-child(4){width:70px;white-space:nowrap;text-align:center}
    .faa-attempts-panel{margin:.5rem 0}
    .faa-attempts-panel > summary{cursor:pointer;user-select:none;padding:.35rem .5rem;border:1px solid #ddd;border-radius:.4rem;background:#f7f7f7;font-weight:600}
    .faa-attempts-panel[open] > summary{background:#eee}
    .faa-attempts-panel > div{margin-top:.4rem}

/* Dim + block interaction while loading */
.faa-study-wrap.is-loading {
  opacity: 0.6;
  pointer-events: none;
}

/* Spinner inside the Go/Refresh button */
/* Spinner is hidden by default */
.sc-window-apply .sc-spinner {
  display: none;
  margin-left: 0.5rem;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2px solid currentColor; /* uses the button text color */
  border-top-color: transparent;
  animation: sc-spin 0.7s linear infinite;
}

/* When the button is busy, show the spinner */
.sc-window-apply.is-busy .sc-spinner {
  display: inline-block;
}

/* Optional: dim everything when loading */
.faa-study-wrap.is-loading {
  opacity: 0.6;
  pointer-events: none;
}

/* Simple spin animation */
@keyframes sc-spin {
  to { transform: rotate(360deg); }
}


/*==========Attempt tables=================

:root {
        --faa-chip-yes-bg:#e6f4ea; --faa-chip-yes-fg:#1f6b3a;
        --faa-chip-no-bg:#fde8e8;  --faa-chip-no-fg:#b42318;
      }
      .faa-chip{
        display:inline-flex;align-items:center;justify-content:center;
        min-width:1.6em;height:1.6em;padding:0 .4em;border-radius:999px;
        font-weight:700;line-height:1
      }
      .faa-chip.is-yes{background:var(--faa-chip-yes-bg);color:var(--faa-chip-yes-fg)}
      .faa-chip.is-no{ background:var(--faa-chip-no-bg); color:var(--faa-chip-no-fg)}

      /* Table */
      .faa-attempts{width:100%;border-collapse:collapse;margin:.6rem 0}
      .faa-attempts th,.faa-attempts td{border:1px solid #ddd;padding:.5rem;text-align:left}
      .faa-attempts thead th{background:#000;color:#fff} /* Black header */
      .faa-attempts td.col-center{text-align:center}
      .faa-attempts td:first-child,.faa-attempts th:first-child{width:100px;white-space:nowrap}

      /* Collapsible wrapper */
      .faa-attempts-panel{margin:.5rem 0}
      .faa-attempts-panel > summary{
        cursor:pointer;user-select:none;padding:.35rem .5rem;border:1px solid #ddd;border-radius:.4rem;
        background:#f7f7f7;font-weight:600
      }
      .faa-attempts-panel[open] > summary{background:#eee}
      .faa-attempts-panel > div{margin-top:.4rem}

/*==========Test Prep Admin console==========================*/
      .faa-prep-summary .tiles {
        display:grid;
        grid-template-columns: repeat(auto-fill, minmax(120px,1fr));
        gap:.6rem;
        margin:.5rem 0 .25rem;
      }
      .faa-prep-summary .tile {
        border:1px solid #e5e7eb;
        border-radius:.5rem;
        padding:.6rem .7rem;
        background:#fff;
        display:flex; flex-direction:column; gap:.15rem;
      }
      .faa-prep-summary .tile .k { font-weight:600; font-size:.95rem; color:#444; }
      .faa-prep-summary .tile .v { font-size:1.25rem; font-weight:700; line-height:1.2; }
      .faa-prep-summary .tile .s { font-size:.78rem; color:#666; }
      .faa-prep-summary .tile.pass { border-color:#cce8d8; background:#f2fbf6; }
      .faa-prep-summary .tile.pass .v { color:#247a3a; }
      .faa-prep-summary .tile.fail { border-color:#f2c6c6; background:#fff5f5; }
      .faa-prep-summary .tile.fail .v { color:#b42318; }
      .faa-prep-summary .tile.empty { background:#fafafa; }
      .faa-prep-summary .summary-foot { color:#444; margin:.25rem 0 0; }


.eg-bar{display:flex;justify-content:space-between;align-items: center;   gap:.75rem;border:1px solid #f8e28a;border-radius:.6rem;padding:.6rem .75rem;background:#fff;margin:.6rem 0}
.eg-bar.ok{border-color:#cce8d8;background:#f6fbf6}
.eg-bar.locked{border-color:#eee;background:#fafafa}

/* Per-cert colors for the existing gradient */
.faa-admin-console #adminConsolePanel[data-cert="spl"]{ --green1:#5DDA51; --green2:#209016; }
.faa-admin-console #adminConsolePanel[data-cert="rpl"]{ --purple1:#BA67FF; --purple2:#712CA9; }
.faa-admin-console #adminConsolePanel[data-cert="ppl"]{ --blue1:#457FFF; --blue2:#2053C3; }
.faa-admin-console #adminConsolePanel[data-cert="cpl"]{ --orange1:#FFCD6B; --orange2:#D5961A; }

.faa-cert-card{padding:.85rem 1rem;border-radius:.6rem;margin:.8rem 0;border:1px solid transparent}
.faa-cert-card .faa-subhead{display:flex;align-items:baseline;gap:1rem;margin:.35rem 0 .25rem}
.faa-cert-card h3{margin:.2rem 0 .4rem}

/* --- Send Certificate button (endorsement gate) gets cert colors --- */
.faa-endorse-gate-wrap{ --btn1:#457FFF; --btn2:#2053C3; --btnText:#fff; } /* default (PPL-like) */
.faa-endorse-gate-wrap[data-cert="spl"]{ --btn1:#5DDA51; --btn2:#209016; --btnText:#fff; }
.faa-endorse-gate-wrap[data-cert="rpl"]{ --btn1:#BA67FF; --btn2:#712CA9; --btnText:#fff; }
.faa-endorse-gate-wrap[data-cert="ppl"]{ --btn1:#457FFF; --btn2:#2053C3; --btnText:#fff; }
.faa-endorse-gate-wrap[data-cert="cpl"]{ --btn1:#FFCD6B; --btn2:#D5961A; --btnText:#111; }

.faa-endorse-gate-wrap a.button.button-primary,
.faa-endorse-gate-wrap button.button-primary,
.faa-endorse-gate-wrap input.button-primary{
  background: linear-gradient(90deg,var(--btn1),var(--btn2)) !important;
  border: 1px solid rgba(0,0,0,.14) !important;
  color: var(--btnText) !important;
  box-shadow: none !important;
}
.faa-endorse-gate-wrap a.button.button-primary:hover,
.faa-endorse-gate-wrap button.button-primary:hover,
.faa-endorse-gate-wrap input.button-primary:hover{
  filter: brightness(.98);
	background:linear-gradient(180deg,var(--gray1),var(--gray2)) !important;
}
.faa-admin-console #adminConsolePanel[data-cert="spl"]{ --btnBorder:#9BE3A7; }
.faa-admin-console #adminConsolePanel[data-cert="rpl"]{ --btnBorder:#CFA6FF; }
.faa-admin-console #adminConsolePanel[data-cert="ppl"]{ --btnBorder:#9EC4FF; }
.faa-admin-console #adminConsolePanel[data-cert="cpl"]{ --btnBorder:#FFDDA0; }

/* Disabled = light grey */
.faa-admin-console #adminConsolePanel .button-primary[disabled]{
  background:#e5e7eb !important;
  border-color:#e5e7eb !important;
  color:#374151 !important;
  box-shadow:none !important;
  cursor:not-allowed;
}


.faa-cert-panel{
    margin:.85rem 0; border:1px solid var(--panel-bd,#e5e7eb);
    border-radius:.6rem; background:#fff; overflow:hidden;
  }
  .faa-cert-panel > summary{
    display:flex; align-items:center; gap:.6rem; cursor:pointer;
    padding:.6rem .8rem; background:#f7f7f7; color:#111; font-weight:700;
    list-style:none;
  }
  .faa-cert-panel[open]{ border-color:var(--panel-fg,#111); }
  .faa-cert-panel[open] > summary{
    background:var(--panel-fg,#111); color:#fff;
  }
  .faa-cert-panel summary .twisty{display:inline-block; transition:transform .2s}
  .faa-cert-panel[open] summary .twisty{transform:rotate(90deg)}
  .faa-cert-panel .badge-wrap{display:flex; gap:.35rem; flex-wrap:wrap}

  /* Make header badges readable over colored header */
  .faa-cert-panel[open] > summary .faa-badge{background:rgba(255,255,255,.15); color:#fff}
  .faa-cert-panel[open] > summary .faa-badge.is-complete{background:rgba(255,255,255,.25); color:#fff}

  .faa-cert-panel .panel-inner{padding:.6rem .8rem .8rem}

  /* Keep your badge look elsewhere */
  .faa-badge{display:inline-block;padding:.2em .55em;border-radius:999px;background:#eee;font-weight:600}
  .faa-badge.is-complete{background:#e6f4ea;color:#1f6b3a}

.faa-cert-panel > summary h2.cert-title{
  margin:0;
  display:inline;           /* keep it on one line with the badges */
  color:var(--panel-fg,#111) !important; /* cert color when collapsed */
  vertical-align:middle;
}
/* When open (colored header), flip title to white */
.faa-cert-panel[open] > summary h2.cert-title{
  color:#fff !important;
}

  /* Header look */
  #faa-progress-wrap table thead th{
    background:#000 !important; color:#fff !important;
    cursor:pointer; position:relative; user-select:none; white-space:nowrap;
  }


    .faa-log-wrap{margin-top:.5rem;max-width:1200px;}
    .faa-log-toolbar{max-width:1200px; border:1px solid #e6e6e6;border-radius:.5rem;padding:.5rem .6rem;background:#fafafa;margin:.5rem 0;display:block !important}
    .faa-log-toolbar .row{display:flex;flex-wrap:wrap;gap:.6rem 1rem;align-items:center}
    .faa-log-toolbar label{font-size:.92rem;color:#222;display:flex;flex-direction:column;gap:.25rem}
    .faa-log-toolbar select,.faa-log-toolbar input{min-width:12ch;padding:.35rem .45rem;border:1px solid #d4d4d4;border-radius:.35rem;background:#fff}
    .faa-log-toolbar .btn{padding:.45rem .7rem;border:1px solid #ccc;border-radius:.45rem;background:#fff;cursor:pointer}
    .faa-log-toolbar .muted{color:#666}
    .faa-log{width:100%;border-collapse:collapse;margin:.5rem 0}
.faa-log thead th{ line-height:1.1; white-space:nowrap; }
.faa-log thead th .faa-sort-btn{
  all:unset;
  display:inline-flex;
  align-items:center;
  gap:.25rem;
  line-height:1;            /* lock row height */
  vertical-align:middle;
  font:inherit;
  cursor:pointer;
  margin:0!important; padding:0!important;
}
.faa-log thead th .faa-caret{
  display:inline-block;
  line-height:1;
  height:1em;               /* same vertical box as text */
  font-size:.85em;          /* slightly smaller glyph */
  margin:0!important; padding:0!important;
  opacity:.75;
}
.faa-log thead th[aria-sort="ascending"]  .faa-caret,
.faa-log thead th[aria-sort="descending"] .faa-caret{ opacity:1; }

.faa-testprep span.tile-sq{ display:block; }
div#faa-progress-wrap {
      overflow-x: auto;
    }
.faa-log td {
      max-width: 550px;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    
/*===========activity log==============*/

.faa-log{width:100%;border-collapse:collapse; max-width:1200px;}
    .faa-log th,.faa-log td{border:1px solid #ddd;padding:.5rem;text-align:left;vertical-align:top}
    .faa-log th{background:#f7f7f7}
    .faa-log .mono{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace}
    .faa-log .dim{color:#666}
    :root{--faa-pass-bg:#e6f4ea;--faa-pass-fg:#1f6b3a;--faa-fail-bg:#fde8e8;--faa-fail-fg:#b42318}
    .faa-badge{display:inline-flex;align-items:center;justify-content:center;height:1.4em;padding:0 .5em;border-radius:999px;font-weight:700;line-height:1;user-select:none}
    .faa-badge.is-pass{background:var(--faa-pass-bg);color:var(--faa-pass-fg)}
    .faa-badge.is-fail{background:var(--faa-fail-bg);color:var(--faa-fail-fg)}

.faa-study-admin thead .subheads th{
    font-size:.85em;
    font-weight:600;
    border-top:1px solid #e5e7eb;
  }
.faa-activity-panel{
  border:1px solid #e5e7eb;
  border-radius:.75rem;
  background:#fff;
  margin:1rem 0 2rem;
  overflow:hidden;
}
.faa-activity-panel > summary{
  list-style:none;
  display:flex;
  align-items:center;
  gap:.75rem;
  padding:.9rem 1rem;
  cursor:pointer;
  user-select:none;
  border-bottom:1px solid #eef0f2;
}
.faa-activity-panel > summary::-webkit-details-marker{
  display:none;
}
.faa-activity-panel > summary .twisty{
  display:inline-block;
  transition:transform .18s ease;
  font-size:14px;
  line-height:1;
}
.faa-activity-panel[open] > summary .twisty{
  transform:rotate(90deg);
}
.faa-activity-panel .panel-inner{
  padding:1rem;
}
.faa-activity-panel .badge-wrap{
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  flex-wrap:wrap;
}
/*===========Lesson Checklist ==============*/

.faa-lesson-checklist .faa-lc-touch{
	display:none;
  appearance:none;
  -webkit-appearance:none;
  color: black;
  border:none;
  background:transparent;
  padding:0;
  margin-left:-.5rem;
  font-family:"Montserrat", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  font-size:1.5rem;
  font-weight:700;
  line-height:1;
  display:inline-flex;
  width:1.5em; height:1.5em;
  align-items:center;
  justify-content:center;
  vertical-align:middle;        
  transform:translateY(-0.08em);  
  cursor:pointer;
  opacity:.75;
  box-shadow:none;
}
@media (pointer:coarse){
  .faa-lesson-checklist .faa-lc-touch{ width:1.75em; height:1.75em; }
}


.faa-lesson-checklist .faa-lc-touch:hover,
.faa-lesson-checklist .faa-lc-touch:focus-visible{ opacity:1; background: transparent; color: blue; box-shadow:none;}
.faa-lesson-checklist .faa-lc-touch[disabled]{ opacity:.45; cursor:default; }

/* Busy spinner (rotate the same ⟳) */
@keyframes faaSpin { from{transform:rotate(0)} to{transform:rotate(360deg)} }
.faa-lesson-checklist .faa-lc-touch.is-busy{
  animation:faaSpin .8s linear infinite;
}

/* Dim the whole label while pending */
label.faa-subread-wrap.is-pending { opacity: .55; }

/* Put the dash inside the box; same opacity as label */
.faa-subread-toggle.is-pending {
  position: relative;
}

.faa-subread-toggle.is-pending::after{
  content:"";
  
	opacity: 0.55;
}

/* Do NOT use the disabled attribute; avoid the greyed native style */
.faa-subread-toggle[aria-disabled="true"] { pointer-events: none; }

.faa-tip {
    position: absolute;
    z-index: 99999;
    max-width: 90vw;
    background: #111;
    color: #fff;
    padding: .45rem .6rem;
    border-radius: .4rem;
    font-size: .85rem;
    line-height: 1.2;
    box-shadow: 0 6px 18px rgba(0,0,0,.25);
    transform: translate(-50%, -120%);
    pointer-events: none;
    opacity: 0;
    transition: opacity .12s ease;
    white-space: nowrap;
  }
  .faa-tip.is-show { opacity: 1; }

.cert-chip{
  display:inline-flex; align-items:center; gap:.35rem;
  padding:.1rem .45rem; border:1px solid #ccc; border-radius:999px;
  font-size:.72rem; line-height:1.2; background:#f9f9f9;
}
.cert-note{ font-size:.74rem; opacity:.8; }
.cert-list .cert-chip + .cert-chip,
.cert-list .cert-note + .cert-note { margin-left:.25rem; }
.cert-sep  { opacity:.6; padding:0 .25em; }
.cert-date { opacity:.7; font-variant-numeric:tabular-nums; }
.cert-scope-spl .cert-chip:not(.cert-spl),
  .cert-scope-spl .cert-text:not(.cert-spl) { display:none; }
  .cert-scope-rpl .cert-chip:not(.cert-rpl),
  .cert-scope-rpl .cert-text:not(.cert-rpl) { display:none; }
  .cert-scope-ppl .cert-chip:not(.cert-ppl),
  .cert-scope-ppl .cert-text:not(.cert-ppl) { display:none; }
  .cert-scope-cpl .cert-chip:not(.cert-cpl),
  .cert-scope-cpl .cert-text:not(.cert-cpl) { display:none; }


/*===========Student Console==============*/

/*==== CMODAL & Spinner ====*/

html.cmode-lock,
body.cmode-lock{
  overflow: hidden !important;
}

/* Also stop the Student Console from scrolling when the cert modal is open */
html.cmode-lock .student-console-body,
body.cmode-lock .student-console-body{
  overflow: hidden !important;
}


/* popup console option change certificate */
.cmode-modal{
  position:fixed;
  padding: 1rem;
  inset:0;
  display:none;
  align-items:center;
  justify-content:center;
  background:rgba(0,0,0,.45);
  z-index:2147483643; /* above everything */
}

/* show when JS sets .is-on + aria-hidden="false" */
.cmode-modal.is-on[aria-hidden="false"]{
  display:flex !important;
}

.cmode-card{
  position: relative;
  max-width: 600px;
  width: 98%;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0,0,0,.2);
  padding: 18px;
  font: 14px/1.4 system-ui,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  max-height: 80vh;  
  overflow-y: auto; 
  box-sizing: border-box;
}

.cmode-row{margin:.75rem 0}
.cmode-opt{
  display: flex;
  gap: .6rem;
  align-items: center; 
  margin: .5rem 0;
}


.cmode-opt label{font-weight:600}
.cmode-sub{color:#444;margin-bottom:1.5rem}
.cmode-keep{display:flex;gap:10px;margin:.35rem 0 0 1.9rem}
.cmode-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:1.5rem}
.cmode-actions button{padding:.5rem .8rem;border-radius:8px;border:1px solid #d0d5dd;background:#fff;cursor:pointer}
.cmode-actions .primary{background:#0a66ff;color:#fff;border-color:#0a66ff}
button#cmode-cancel {
	color:#FF0606;
}
button#cmode-cancel:hover {
	color:#000;
	background:#FF0606;
}


/* Panel shell: light card look */
#cmode-source-wrap.cmode-inline{
  margin-top: .5rem;
  padding: 0.75rem;
  background: #f9fafb;
  border-radius: 10px;
  border: 1px solid #e5e7eb;
}

/* Row layout stays, but space sections a bit more */
#cmode-source-wrap.cmode-inline .row{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .75rem 1rem;
  margin-top: .35rem;
}

/* Default strong divider (used before LESSON QUIZZES) */
#cmode-source-wrap.cmode-inline .row.row-divider{
  margin-top: .85rem;
  padding-top: .85rem;
  border-top: 2px solid #e5e7eb;   /* full-width solid line */
}

/* Softer first divider – dashed, short, under the title only */
#cmode-source-wrap.cmode-inline .row.row-divider-soft{
  margin-top: .85rem;
  padding-top: .85rem;
  border-top: 1px dashed #e5e7eb;
}


#cmode-source-wrap.cmode-inline .row > .title{
  flex: 0 0 100%;
  font-weight: 600;
  margin-top: .35rem;
}

/* Keep labels inline and compact */
#cmode-source-wrap.cmode-inline label{
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  margin-right: .5rem;
  font-weight: 500;
}

#cmode-source-wrap.cmode-inline .inline-note{
  margin-top: .25rem;
}

.cmode-info-wrap .cmode-icon{
  display: inline-block;
  margin-right: .4rem;   /* adjust to taste */
}

/* Container so tooltip can position relative to the title */
.cmode-info-wrap{
  position: relative;
  display: inline-flex;
  align-items: center;
}

.cmode-info{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  margin-left: .35rem;
  border-radius: 999px;
  font-size: .9rem;             /* a bit bigger for ℹ */
  font-weight: 600;
  cursor: default;
}

/* Tooltip bubble – positioned to the RIGHT of the icon */
.cmode-tip{
  position: absolute;
  left: 100%;                     /* start at the right edge of the icon */
  top: 50%;                       /* vertically center against the icon */
  margin-left: .5rem;             /* space between icon and bubble */
  transform: translateY(-50%) translateX(4px);
  padding: .6rem;
  background: #111827;
  color: #f9fafb;
  font-size: .78rem;
  line-height: 1.35;
  border-radius: 6px;
  box-shadow: 0 8px 20px rgba(15,23,42,.35);
  white-space: normal;
  width: clamp(220px, 80%, 350px);
  opacity: 0;
  pointer-events: none;
  transition: opacity .16s ease, transform .16s ease;
  z-index: 10000;
}

/* Show tooltip on hover (unchanged trigger) */
.cmode-info-wrap:hover .cmode-tip{
  opacity: 1;
  pointer-events: auto;
  transform: translateY(-50%) translateX(0);
}

/* Little arrow pointing from bubble back to the icon */
.cmode-tip::before{
  content: "";
  position: absolute;
  left: -6px;
  top: 50%;
  transform: translateY(-50%);
  border-width: 6px;
  border-style: solid;
  border-color: transparent #111827 transparent transparent;
}

#cmode-source-wrap.cmode-inline .from-multi,
#cmode-source-wrap.cmode-inline #keep-boxes{
  flex: 0 0 100%;   /* take full width → always start on a new line */
}
/* Header + hint for the "All ..." shortcut */
#cmode-source-wrap.cmode-inline .cmode-group-heading{
  display: flex;
  flex-direction: column;
  gap: .15rem;
  margin-bottom: .25rem;
}

#cmode-source-wrap.cmode-inline .cmode-master{
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  font-weight: 600;
}

#cmode-source-wrap.cmode-inline .cmode-master-hint{
  font-size: .78rem;
  opacity: .75;
}

/* Visually nest the per-item checkboxes under the master */
#cmode-source-wrap.cmode-inline .cmode-group-items{
  margin-left: 1.5rem;
  padding-left: .75rem;
  border-left: 1px solid #e5e7eb;
}

/* Keep existing inline label look */
#cmode-source-wrap.cmode-inline .cmode-group-items label{
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  margin-right: 1.5rem;
  font-weight: 500;
}
#cmode-source-wrap .hint-sub{
  opacity: .78;
  margin-top: .25rem; 
  margin-right:1.5rem;
  font-size: .8rem;
  display: inline-block;
  max-width: 100%;
  white-space: normal;
  overflow-wrap: break-word;
}

/* Make the bottom hint in the modal look like a warning box */
#certModeModal .hint-bottom{
  margin-top: 1rem;
  padding: .75rem;
  background: #fff7ed;              /* soft amber */
  border: 1px solid #fed7aa;        /* light orange border */
  border-radius: 8px;
  font-size: .82rem;
  line-height: 1.4;
  color: #7c2d12;                   /* dark brown/orange text */
}

/* Make the warning icon + strong text stand out a bit */
#certModeModal .hint-bottom strong{
  font-weight: 700;
}

/* Grey when aria-disabled=true */
.from-multi[aria-disabled="true"],
#keep-boxes[aria-disabled="true"]{
  opacity: .55;
}


#cmode-opt-pull[aria-disabled="true"],
#cmode-source-wrap[aria-disabled="true"]{
  filter: grayscale(0.2);
}
#cmode-opt-pull[aria-disabled="true"] label { cursor: not-allowed; }

/* VISUAL DISABLE STATES FOR THE MODAL */
.cmode-opt[aria-disabled="true"],
.cmode-inline[aria-disabled="true"],
.from-multi[aria-disabled="true"],
#keep-boxes[aria-disabled="true"] {
  opacity: .55;
  filter: grayscale(12%);
  cursor: not-allowed;
}

/* Make labels look disabled too */
.cmode-opt[aria-disabled="true"] label,
.cmode-inline[aria-disabled="true"] label,
.from-multi[aria-disabled="true"] label,
#keep-boxes[aria-disabled="true"] label {
  cursor: not-allowed;
  pointer-events: none;           /* blocks clicks on the label itself */
}

/* Prevent hover affordances on disabled groups */
.cmode-opt[aria-disabled="true"] *:hover,
.cmode-inline[aria-disabled="true"] *:hover,
.from-multi[aria-disabled="true"] *:hover,
#keep-boxes[aria-disabled="true"] *:hover {
  text-decoration: none !important;
}

/* Optional: dim the group title too */
.cmode-inline[aria-disabled="true"] .title,
.from-multi[aria-disabled="true"] .title {
  opacity: .7;
}

/* Radios/checkboxes already disabled by JS; this just reinforces pointer feedback */
.cmode-opt[aria-disabled="true"] input,
.cmode-inline[aria-disabled="true"] input,
.from-multi[aria-disabled="true"] input,
#keep-boxes[aria-disabled="true"] input {
  cursor: not-allowed;
}

/* Overlay that covers ONLY the modal card */
#certModeModal .cmode-card > .cmode-loading{
  position: absolute;
  inset: 0;                             /* cover entire card */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;              /* center spinner + text */
  gap: 0.6rem;
  font-size: 0.95rem;
  font-weight: 600;
  background: rgba(255,255,255,.75);   
  backdrop-filter: blur(2px);
  opacity: 0;                           /* hidden by default */
  pointer-events: none;
  transition: opacity .18s ease;
  border-radius: 12px;
  z-index: 9999;
}

/* Turn on the overlay with JS (showSpinner adds .is-active) */
#certModeModal .cmode-loading.is-active{
  opacity: 1;
  pointer-events: auto;
}

/* Spinner circle – same style as console spinner */
#certModeModal .cmode-spinner{
  display: inline-block;
  width: 2rem;
  height: 2rem;
  border-radius: 999px;
  border: 3px solid rgba(0,0,0,.12);
  border-top-color: currentColor;       /* takes cert color */
  animation: sc-spin .7s linear infinite;
}

/* Match spinner color to the destination cert */
#certModeModal[data-cert="spl"] .cmode-loading{ color:#209016; }
#certModeModal[data-cert="rpl"] .cmode-loading{ color:#712CA9; }
#certModeModal[data-cert="ppl"] .cmode-loading{ color:#2053C3; }
#certModeModal[data-cert="cpl"] .cmode-loading{ color:#D5961A; }


/*==== Spinner while console is loading ====*/
/* Loading overlay inside the Student Console */
#studentConsolePanel .sc-loading{
  position: absolute;
  inset: 0;
  padding-top: 2rem;
  gap:0.6rem;
  display: flex;
  align-items: flex-start;
	flex-direction: row; 
  justify-content: center;      
	width: 100%;
  background: rgba(255,255,255,.7);
  backdrop-filter: blur(2px);
  z-index: 9999;
  opacity: 0;
  pointer-events: none;
  transition: opacity .18s ease;
  font-size: 1rem;
  font-weight: 600;
}

/* Turn on the spinner by adding .is-active in JS */
#studentConsolePanel .sc-loading.is-active{
  opacity: 1;
  pointer-events: auto;
}

/* The spinner itself */
#studentConsolePanel .sc-loading::before{
  content: "";
  width: 2rem;
  height: 2rem;
  border-radius: 999px;
  border: 3px solid rgba(0,0,0,.12);
  border-top-color: currentColor;  
  animation: sc-spin .7s linear infinite;
}
#studentConsolePanel .sc-loading span,
#studentConsolePanel .sc-loading div{
  max-width: 100%;
  white-space: normal;
  overflow-wrap: break-word;
  text-align: center;   /* looks better in a narrow column */
}

/* Match spinner color to selected certificate */
#studentConsolePanel[data-cert="spl"] .sc-loading{ 
  color:#209016;   /* green */
}
#studentConsolePanel[data-cert="rpl"] .sc-loading{ 
  color:#712CA9;   /* purple */
}
#studentConsolePanel[data-cert="ppl"] .sc-loading{ 
  color:#2053C3;   /* blue */
}
#studentConsolePanel[data-cert="cpl"] .sc-loading{ 
  color:#D5961A;   /* orange */
}

/* Spin animation */
@keyframes sc-spin{
  to { transform: rotate(360deg); }
}

/* ===== Student Console loading overlay ===== */

.scov {
  position: absolute;
	inset:0;                  
  display: grid;
  place-items: center;
  background: rgba(255,255,255,.80);
  backdrop-filter: blur(1px);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .18s ease, visibility .18s ease;
  z-index: 2147483647;         
}

/* console scroll lock whenever the overlay is on */
#studentConsolePanel.scov-on .student-console-body { 
  overflow: hidden !important;
  pointer-events: none !important;   /* eat wheel/touch/clicks */
  touch-action: none !important;
  overscroll-behavior: contain;
}
#studentConsolePanel.scov-on .acc-scroll {
  overflow: hidden !important;        /* nested scrollers inside accordions */
}

/* belt & suspenders: make sure the overlay actually covers and captures */
#sc-overlay { position:absolute; inset:0; z-index:2147483647; display:none; }
#sc-overlay.is-on { display:block; }


/* Spinner + video */
.scov-wrap {
  --size: 160px;    /* outer diameter */
  --ring: 10px;     /* ring thickness */
  position: relative;
  width: var(--size);
  height: var(--size);
}

.scov-hole {
  position: absolute;
  inset: var(--ring);
  border-radius: 9999px;
  background: #fff;       /* clean white disc */
  overflow: hidden;       /* clip video to circle */
  display: grid;
  place-items: center;
  z-index: 2;
}

.scov-vid {
  width: 100%;
  height: 100%;
  object-fit: contain;    /* avoid cropping the video */
}

.scov-ring {
  position: absolute;
  inset: 0;
  border-radius: 9999px;
  background: conic-gradient(#2563eb 0 25%, #e5e7eb 0 100%);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - var(--ring)), #000 0);
          mask: radial-gradient(farthest-side, transparent calc(100% - var(--ring)), #000 0);
  animation: scovspin 1s linear infinite;
  z-index: 1;
}

@keyframes scovspin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  .scov-ring { animation-duration: 2.5s; }
}


#sc-overlay.scov.is-on {
  position: fixed !important;
  inset: 0 !important;
  display: grid !important;
  place-items: center !important;
  background: rgba(255,255,255,.80) !important;
  backdrop-filter: blur(1px);
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  z-index: 2147483647 !important;
}


/* ====Toggle Button====*/
body:has(#studentConsolePanel.is-open) #studentConsoleToggle { z-index: 9999 !important; }


#studentConsoleToggle{
  position: fixed;
  left: 0;                 /* initial X */
  top: 9.6rem;                /* initial Y */
  right: auto !important;     /* prevent stretch */
  bottom: auto !important;

  inline-size: max-content;   /* size to content */
  max-inline-size: 92vw;      /* don't overflow on tiny screens */
  white-space: nowrap;

  z-index: 100000;
  margin-top: .3rem;
  font-family: 'Montserrat', sans-serif;
  font-size: clamp(.95rem,1.8vw,1.025rem);
  font-weight: 700;

  display: inline-flex; align-items: center; justify-content: center;
  padding: .8rem; border-radius: 9px; gap: .3rem;
  color: #081016; border: 1px solid #D9D9D9;
  box-shadow: 0 4px 18px rgba(0,0,0,.25);
  background-origin: padding-box, border-box;
  background-clip: padding-box, border-box;

  user-select: none;
  touch-action: none;          /* allow custom drag on mobile */
  cursor: grab;
  backface-visibility: hidden;
  transform: translateZ(0);
}
#studentConsoleToggle.is-dragging{ cursor: grabbing; }


@media (max-width: 768px){
  #studentConsoleToggle{ width:auto !important; max-width:92vw; }
}

#studentConsoleToggle:hover{ transform: translateY(-1px); filter: brightness(1.03); }

#studentConsoleToggle .ico{ font-size:1.5em; line-height:1; }
#studentConsoleToggle .label{ color: #3C3C3C; letter-spacing:.02em; }
#studentConsoleToggle .label:hover{ color: #fff;}

#studentConsoleToggle[data-cert="spl"]{
  background-image: linear-gradient(180deg, #FFFFFF 0%, #4EC95ED6 100%) !important;
  color:#000;
}
#studentConsoleToggle[data-cert="spl"]:hover{
  background-image: linear-gradient(180deg, #5DDA51, #209016) !important;
  color:#081016;
}

#studentConsoleToggle[data-cert="rpl"]{
  background-image: linear-gradient(180deg, #FFFFFF 0%, #712CA9 100%) !important;
  color:#000;
}
#studentConsoleToggle[data-cert="rpl"]:hover{
  background-image: linear-gradient(180deg, #BA67FF, #712CA9) !important;
  color:#081016;
}

#studentConsoleToggle[data-cert="ppl"]{
  background-image: linear-gradient(180deg, #FFFFFF 0%, #6EBDFFD6 100%) !important;
  color:#000;
}
#studentConsoleToggle[data-cert="ppl"]:hover{
  background-image: linear-gradient(180deg, #457FFF, #2053C3) !important;
  color:#081016;
}

#studentConsoleToggle[data-cert="cpl"]{
  background-image: linear-gradient(180deg, #FFFFFF 0%, #FFB700E3 100%) !important;
  color:#000;
}
#studentConsoleToggle[data-cert="cpl"]:hover{
  background-image: linear-gradient(180deg, #FFCD6B, #D5961A) !important;
  color:#081016;
}

/* Panel */
#studentConsolePanel{
  position: fixed !important;
  right: 0 !important;
  top: 9.6rem !important;   
  bottom: 0 !important;     
  width: min(960px, 92vw); max-width: 100%;
  background: #fff; z-index: 99999;
  box-shadow: 0 10px 30px rgba(0,0,0,.25);
  border-left: 1px solid #e6e6e6;
  display: flex; flex-direction: column; overflow: auto;
  transform: translateX(100%); transition: transform .22s ease;
	--panel-max: 1900px;    
  --content-max: 1800px;  
  --tile-min: 220px; 
	
}

@media screen and (max-width: 768px){
#studentConsolePanel{
	width:100vw;
	}
}

#studentConsolePanel.is-open{ transform: translateX(0) !important; }

#studentConsolePanel.is-full{
  top: 0 !important; bottom: 0 !important;
  right: 0 !important; left: auto !important;
  width: min(100vw, var(--panel-max)) !important;
  height: 100vh !important;
  border-left: none !important;
  border-radius: 0 !important;
  transform: translateX(100%);             
}
#studentConsolePanel.is-full.is-open{ transform: translateX(0) !important;}

#studentConsolePanel.boot-open{ transition: none; }

/* Fixed-top breakpoints */
@media (max-width:1919.98px){   #studentConsoleToggle{ top: 8.7rem ; } #studentConsolePanel{ top: 8.7rem !important; } }
@media (max-width:1280px){      #studentConsoleToggle{ top: 7.4rem ; } #studentConsolePanel{ top: 7.4rem !important; } }
@media (max-width:1024px){      #studentConsoleToggle{ top: 6.8rem ; } #studentConsolePanel{ top: 6.8rem !important; } }
@media (max-width:728px){       #studentConsoleToggle{ top: 5rem ; }   #studentConsolePanel{ top: 5rem !important; } }
@media (max-width:480px){       #studentConsoleToggle{ top: 5.6rem ; } #studentConsolePanel{ top: 5.6rem !important; } }


/* Use full panel width inside the console */
#studentConsolePanel .student-console-body,
#studentConsolePanel .sc-row,
#studentConsolePanel .faa-tiles-block,
#studentConsolePanel .eg-card,
#studentConsolePanel .faa-study-admin{
  max-width: 100%;
  margin-inline: 0;
}

  #studentConsolePanel .student-console-body{
    margin-left: 0.4rem;
    margin-right: 0.4rem;
  }

#studentConsolePanel.is-full .student-console-body,
#studentConsolePanel.is-full .sc-row,
#studentConsolePanel.is-full .faa-tiles-block,
#studentConsolePanel.is-full .eg-card,
#studentConsolePanel.is-full .faa-study-admin{
  --content-max: calc(100vw - 1rem) !important;
  margin-inline: auto;
}
#studentConsolePanel.is-full div#sc-cfi,
#studentConsolePanel.is-full section#sc-notes {
	max-width: 1400px;
	width: 100%;          /* grow to full width up to 1400px */
	margin-left: auto;    /* center the section */
	margin-right: auto;
}

/* Full-screen: add breathable space at the bottom of each inner panel */
#studentConsolePanel.is-full #sc-content::after,
#studentConsolePanel.is-full #sc-notes::after,
#studentConsolePanel.is-full #sc-cfi::after {
  content: '';
  display: block;
  height: 3rem;  /* this is the visual gap above the bottom of the screen */
}


/* Student Console header: title + select on left; buttons on right */
#studentConsolePanel .student-console-head{
  position: sticky; top: 0; z-index: 100 !important;
  display: flex !important; align-items: center; flex-wrap: nowrap;
  justify-content: space-between;           
  gap: .65rem;                           
  padding: .6rem .9rem; border-bottom: 1px solid #eee; background:#F8FBFF;
  font-family:'Montserrat',sans-serif; font-weight:800; font-size:clamp(1.1rem, 2vw, 1.3rem);
}
@media screen and (max-width: 768px){
#studentConsolePanel .student-console-head{
	max-width:100vw;
	}
}
#studentConsolePanel .sc-left{
  display: inline-flex; align-items: center; flex-direction: row !important; gap: .65rem;
  
}
@media screen and (max-width: 768px){
#studentConsolePanel .sc-left{
  flex-direction: column !important;
	max-width:40vw;
	}
}
#studentConsolePanel .sc-section-head{
	display: inline-flex; align-items: center; flex-direction: row !important; gap: .65rem; margin-top: 1.5rem;
}

@media screen and (max-width: 768px){
#studentConsolePanel .sc-section-head{
	max-width:55vw;
	}
}


#studentConsolePanel .student-console-title{
  flex: 0 0 auto; 
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.student-console-cert[data-cert="spl"] .cert-select { color:#4EBD44; font-weight:600;} /* green */
.student-console-cert[data-cert="rpl"] .cert-select { color:#AD49FF; font-weight:600;} /* purple */
.student-console-cert[data-cert="ppl"] .cert-select { color:#398FF3; font-weight:600;} /* blue */
.student-console-cert[data-cert="cpl"] .cert-select { color:#FFB013; font-weight:600;} /* orange */

#studentConsolePanel .student-console-cert{
  display: inline-flex; 
	align-items: center; 
	gap: .35rem;
  flex: 0 0 auto; 	
}

#studentConsolePanel .cert-select{
  width: auto; min-width: 5.5rem; max-width: 7rem;  
}

#studentConsolePanel .student-console-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;            
  height: 36px;
  padding: 0;
  line-height: 1;        
  box-sizing: border-box;
  border-radius: 9px;
	box-shadow: 0 0 2px 1px rgba(0, 0, 0, 0.2);
  font-size: 18px;        
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial,
               "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
	font-weight: 600;
}
.sc-svg{ width:1.15rem; height:1.15rem; display:inline-block; vertical-align:-0.15rem; }
  @media (max-width:480px){
    #studentConsolePanel .student-console-btn{ padding:.55rem; line-height:1;  }
    .sc-svg{ width:1.05rem; height:1.05rem; }
  }
.student-console-btn .sc-svg{
  width: 1.15em;
  height: 1.15em;
  display: block;
  pointer-events: none;
}

#studentConsolePanel .student-console-body{ padding: .75rem; }
#mfa-endorse .mfa-btn,
#mfa-endorse .mfa-btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .4rem;  
  line-height: 1.1;
}
#mfa-endorse .mfa-btn .ico,
#mfa-endorse .mfa-btn-primary .ico {
  display: inline-block;
	align-items: center;
  justify-content: center;
  line-height: 1;
}
#studentConsolePanel .student-console-actions, 
#studentConsolePanel .faa-acc-controls {
	display: flex;
	justify-content:space-between;
  gap:.5rem;      
}
#studentConsolePanel .student-console-actions .student-console-btn{
  transition: transform .18s ease;      
}
#studentConsolePanel .student-console-actions .student-console-btn:hover:not([disabled]){
  transform: translateY(-3px);
	filter: brightness(1.03);
	background: transparent;
}
#studentConsolePanel .student-console-actions .student-console-btn:active:not([disabled]){
  transform: translateY(0);
}

/* Ensure disabled never moves */
#studentConsolePanel .student-console-btn[disabled],
#studentConsolePanel .mfa-slider .mfa-nav[disabled]{
  transform: none !important;
}

#studentConsolePanel[data-cert="spl"] .student-console-btn { color:#4EBD44; }
#studentConsolePanel[data-cert="rpl"] .student-console-btn { color:#AD49FF; }
#studentConsolePanel[data-cert="ppl"] .student-console-btn { color:#398FF3; }
#studentConsolePanel[data-cert="cpl"] .student-console-btn { color:#FFB013; }

#studentConsolePanel[data-cert="spl"] .student-console-btn { border-color:#4EBD44; }
#studentConsolePanel[data-cert="rpl"] .student-console-btn { border-color:#AD49FF; }
#studentConsolePanel[data-cert="ppl"] .student-console-btn { border-color:#398FF3; }
#studentConsolePanel[data-cert="cpl"] .student-console-btn { border-color:#FFB013; }

#studentConsolePanel #studentConsoleFull .btn-ico{
  transform: scale(1.3);
}
/*title hover action buttons*/
#studentConsolePanel .student-console-btn{
  position:relative; 
}
#studentConsolePanel .student-console-btn:hover::after,
#studentConsolePanel .student-console-btn:focus-visible::after{
  content: attr(title);
  position:absolute;
  top: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  background: #f5f5f7;
  color:#333;                
  font-size:12px;
  font-weight:600;
  padding:4px 8px;
  border-radius:6px;
  white-space:nowrap;
  box-shadow:0 4px 10px rgba(0,0,0,.12);
  z-index:3;
}
#studentConsolePanel details.faa-acc-item > .acc-scroll{
  inline-size: 100%;
  max-inline-size: 100%;
  overflow-x: auto;
  overflow-y: visible;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;  
	touch-action: auto;
  contain: inline-size;           
  padding-block-end: .25rem;
}

#studentConsolePanel details.faa-acc-item > .acc-scroll > .acc-inner{
  display: inline-block;
  min-inline-size: 100%;           
  width: max-content;             
}
#studentConsolePanel .acc-inner table{
  width: auto;
  min-inline-size: max-content;
  border-collapse: collapse;
}

#studentConsolePanel .acc-inner pre,
#studentConsolePanel .acc-inner code{
  white-space: pre;
}

#studentConsolePanel{
  overflow-y: auto;
  overflow-x: hidden;               
  overscroll-behavior-x: none;
	touch-action: pan-y pinch-zoom;
}

@media (max-width:480px){
	#studentConsolePanel{
    box-sizing: border-box;
    width: 100vw !important;   
    border-left: none !important;
    overflow-x: clip;         
  }

 #studentConsolePanel .student-console-body,
#studentConsolePanel .mfa-slider,
#studentConsolePanel .sc-prep,
#studentConsolePanel .faa-tiles-block{
  width: 100%;                 /* 🔹 force full console width */
  max-width: 100% !important;  /* keep your safety cap */
  margin-inline: auto;
  overflow-x: clip;
  box-sizing: border-box;      /* nice to have */
}

  #studentConsolePanel .student-console-btn:hover::after,
  #studentConsolePanel .student-console-btn:focus-visible::after{
    inset-inline: auto auto;    
    max-width: 80vw;
  }
  #studentConsolePanel .student-console-head{
    display: grid !important;
    grid-template-columns: 1fr auto;   
    align-items: center;
    gap: .5rem .6rem;
    padding: 1rem;
  }
	#studentConsolePanel .sc-left{
    display:flex !important;
    flex-direction:column !important;
    align-items:flex-start;
    gap:.25rem;
    width:100%;
    max-width:100% !important;  
  }
  #studentConsolePanel{ --title-gutter: 1.45rem; }

  #studentConsolePanel .student-console-title{
    position:relative;
    padding-left: var(--title-gutter);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  #studentConsolePanel .student-console-title .title-ico{
    position:absolute;
    left:0;
    top:50%;
    transform: translateY(-50%) scale(.85);
    transform-origin:left center;
    line-height:1;
    width: calc(var(--title-gutter) - .25rem); 
    text-align:center;
  }

  #studentConsolePanel .student-console-cert{
    display:block;
    width:auto;
    margin-left: var(--title-gutter);
    margin-top:.1rem;
  }
	
  #studentConsolePanel .cert-select{
    max-width: 6.5rem;
  }


#studentConsolePanel .student-console-actions{
    display: flex !important;
    flex-wrap: wrap;
    justify-content: flex-end;         
    align-content: center;

    --btn: 36px;
    --gap: .45rem;

    column-gap: var(--gap);
    row-gap: var(--gap);
  }

  /* Explicit order so Back is always first, then CFI, then Notes, Refresh, Full, Close */
  #studentConsolePanel #studentConsoleBack       { order: 0; }
  #studentConsolePanel #studentConsoleCFI        { order: 1; }
  #studentConsolePanel #studentConsoleNotes      { order: 2; }
  #studentConsolePanel #studentConsoleRefresh    { order: 3; }
  #studentConsolePanel #studentConsoleFull       { order: 4; }
  #studentConsolePanel #studentConsoleClose      { order: 5; }


  /* Prevent hover "lift" jiggle on small screens */
  #studentConsolePanel .student-console-actions
  .student-console-btn:hover:not([disabled]){ transform: none; }
}
@media (max-width: 480px) and (min-width: 361px) {
  #studentConsolePanel .student-console-actions{
    display: flex !important;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-content: center;

    --btn: 36px;
    --gap: .45rem;

    column-gap: var(--gap);
    row-gap: var(--gap);

    /* 3 columns worth of space */
    width: min(100%, calc(3 * var(--btn) + 2 * var(--gap))) !important;
    max-width: 100%;
    justify-self: end;
  }

  /* hide Back when [hidden] is set */
  #studentConsolePanel #studentConsoleBack[hidden]{ 
    display:none !important; 
  }

  /* Row 1: Back, CFI, Notes
     Row 2: Refresh, Full, Close */
  
  #studentConsolePanel #studentConsoleCFI        { order: 0; }
  #studentConsolePanel #studentConsoleNotes      { order: 1; }
  #studentConsolePanel #studentConsoleRefresh    { order: 2; }
  #studentConsolePanel #studentConsoleBack       { order: 3; }
  #studentConsolePanel #studentConsoleFull       { order: 4; }
  #studentConsolePanel #studentConsoleClose      { order: 5; }

  /* Prevent hover "lift" jiggle on small screens */
  #studentConsolePanel .student-console-actions
  .student-console-btn:hover:not([disabled]){ 
    transform: none; 
  }
}
@media (max-width:360px){
  #studentConsolePanel .student-console-actions.actions--with-back{
    /* force 2 columns even when Back is visible */
    width: calc(2 * var(--btn) + var(--gap)) !important;
  }

    /* Reorder for this breakpoint (2 columns); keep Back first, then CFI */
  #studentConsolePanel #studentConsoleCFI     { order: 0; }
  #studentConsolePanel #studentConsoleNotes   { order: 1; }
  #studentConsolePanel #studentConsoleRefresh { order: 2; }
  #studentConsolePanel #studentConsoleFull    { order: 3; }
  #studentConsolePanel #studentConsoleBack    { order: 4; }
  #studentConsolePanel #studentConsoleClose   { order: 5; } 
}

/* === Slider === */

.mfa-slider {
  position: relative;
  overflow: hidden;
  margin: .25rem 0 .6rem;
}
.mfa-viewport {
  overflow: hidden;
  contain: layout paint;
}
.mfa-track {
  display: flex;
  animation: none !important;
  transform: translateX(0);
  transition: none; 
  will-change: transform;
}
.mfa-slide {
  flex: 0 0 100%;
  padding: .25rem 0;
}
#studentConsolePanel .mfa-slider{
	z-index:1;
}
/* Nav buttons */
#studentConsolePanel .mfa-slider .mfa-nav{
	display: inline-flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 999px;
  border:none;
	box-shadow:none;
  cursor: pointer;
  z-index: 1;
  line-height: 1;
  font-size: 3rem !important;
  user-select: none;
	font-weight: 600;
}
.mfa-prev { left: .5rem; }
.mfa-next { right: .5rem; }

.mfa-nav[disabled]{opacity:.45;cursor:default;box-shadow:none;pointer-events:none;}
.mfa-nav[hidden]{display:none!important;}

.mfa-slider.is-single .mfa-nav{ 
	display: none !important; 
}

.mfa-track { transition: none; } 

@media (prefers-reduced-motion: reduce) {
  .mfa-track { transition: none !important; }
}

#studentConsolePanel { --cert-accent:#398FF3; }              
#studentConsolePanel[data-cert="spl"] { --cert-accent:#4EBD44; }
#studentConsolePanel[data-cert="rpl"] { --cert-accent:#AD49FF; }
#studentConsolePanel[data-cert="ppl"] { --cert-accent:#398FF3; }
#studentConsolePanel[data-cert="cpl"] { --cert-accent:#FFB013; }

#studentConsolePanel .mfa-slider .mfa-nav {
  color: var(--cert-accent);
  transition: color .15s linear;
}

#studentConsolePanel .mfa-slider .mfa-nav:hover:not([disabled]),
#studentConsolePanel .mfa-slider .mfa-nav:focus-visible:not([disabled]) {
  color: #000;
	background: transparent;
}

#studentConsolePanel .mfa-slider .mfa-nav[disabled]{
  opacity:.45;
  cursor:default;
  pointer-events:none;
}


/* ===== Student Console: Donuts (unified + chic) ===== */

.scsw-track, .scsw-slide { animation: none !important; }
.mfa-track{ animation:none !important; }


#studentConsolePanel .sc-wrap{
  --sc-size: 190px;      /* one size for ALL donuts */
  --sc-thick: 16px;      /* outer ring thickness   */
  --sc-inner: 8px;       /* inner thin ring        */
  font-family: Montserrat,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  background:#fff; padding:10px 0;
}
@media screen and (max-width: 768px){
	#studentConsolePanel .sc-wrap{
  --sc-size: 170px;      /* one size for ALL donuts */
  --sc-thick: 12px;      /* outer ring thickness   */
  --sc-inner: 6px;       /* inner thin ring        */
	}
	}
#studentConsolePanel .sc-row{
  display:flex; flex-wrap:wrap; gap:22px; align-items:flex-start; justify-content:center;
}

#studentConsolePanel .sc-donut{
  position:relative; width:var(--sc-size); height:var(--sc-size);
  display:grid; place-items:center; margin:0; 
  border-radius:20px;
}

#studentConsolePanel .sc-donut svg{
  width:100%; height:100%; display:block; filter:none;
}

#studentConsolePanel .sc-ico{
	margin-right: 4px;
}

#studentConsolePanel .sc-track{
  fill:none; stroke:#E8EEF2; stroke-width:var(--sc-thick); stroke-linecap:round;
}

#studentConsolePanel .sc-arc{
  fill:none; stroke-width:var(--sc-thick); stroke-linecap:round; transform-origin:50% 50%;
}
#studentConsolePanel .sc-inner{
  fill:none; stroke-width:var(--sc-inner);
}

#studentConsolePanel .sc-center{
  position:absolute; inset:0;
  display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center;
}
#studentConsolePanel .sc-pct{ font-weight:800; color:#0b0f14; font-size:26px; line-height:1; letter-spacing:.2px; }
#studentConsolePanel .sc-mid{ font-weight:700; color:#384149; margin-top:.1rem; font-size:18px; }
#studentConsolePanel .sc-cap{ color:#6b7280; margin-top:.05rem; font-size:13px; }

/* Paste after the global figcaption rule */
.sc-donut figcaption { 
  font-style: normal !important;      /* stop slant in donut captions */
  font-synthesis: none;               /* prevent fake italic */
}

/* If you’re using icon fonts inside the caption */
.sc-donut figcaption i,
.sc-donut figcaption em,
.sc-donut figcaption .fa,
.sc-donut figcaption .sc-ico {
  font-style: normal !important;
}


@supports (-webkit-touch-callout:none){
  #studentConsolePanel .sc-track,
  #studentConsolePanel .sc-arc,
  #studentConsolePanel .sc-inner{ vector-effect: non-scaling-stroke; }
}

/* 1) Hard-cap and isolate the slider so siblings can't stretch it */
#studentConsolePanel .mfa-slider{
  width: 100%;
  max-width: var(--content-max);     /* already used elsewhere */
  margin-inline: auto;
  contain: inline-size;              /* isolates width calculations */
  isolation: isolate;                /* new stacking context only */
}

#studentConsolePanel .student-console-body,
#studentConsolePanel .sc-section-head,
#studentConsolePanel .sc-prep,
#studentConsolePanel .sc-row {
  min-width: 0; /* critical in flex layouts */
}


@media (max-width:480px){
  #studentConsolePanel .mfa-slider{
	  max-width:94vw;
	}
}
@media  (max-width:768px){
  #studentConsolePanel .sc-wrap{ --sc-gap: 22px; }

  #studentConsolePanel .mfa-slide{
    min-height: calc(var(--sc-size) * 2 + var(--sc-gap));
    display: grid;
    place-content: center; 
  }
	#studentConsolePanel .mfa-track > .mfa-slide:first-child{
    min-height: auto !important;
    display: block; 
  }
	#studentConsolePanel .mfa-track > .mfa-slide:first-child .sc-row{
    flex-direction: column;   /* stack */
    flex-wrap: nowrap;        /* prevent side-by-side */
    align-items: center;      /* center horizontally */
    justify-content: flex-start;
    gap: 22px;                /* same as your .sc-row gap */
  }
}
/*===========Accordion============*/

#studentConsolePanel .sc-section-head{
  display: inline-flex; align-items: center; flex-direction: row !important; gap: .65rem; margin-bottom:1rem; max-width: 100%;
  
}
#studentConsolePanel .sc-section-title{
  font-family:'Montserrat',sans-serif; font-weight:800; font-size:clamp(1.1rem, 1.8vw, 1.3rem); 
}

.sc-cfi-thread-select{
	max-width: 40rem;
}
/* Icon-only console buttons keep a square */
#studentConsolePanel .sc-section-head .student-console-btn{
  width:36px;
  padding:0;
}

/* Avoid baseline shift in some browsers */
#studentConsolePanel .sc-section-head button{
  vertical-align:middle;
}

#studentConsolePanel .faa-acc-controls .faa-acc-btn{
  transition: transform .18s ease;      
  will-change: transform;
}
#studentConsolePanel .faa-acc-controls .faa-acc-btn:hover:not([disabled]){
  transform: translateY(-3px);
	background: transparent;
}
#studentConsolePanel .faa-acc-controls .faa-acc-btn:active:not([disabled]){
  transform: translateY(0);
}

#studentConsolePanel .faa-acc-controls .faa-acc-btn[disabled]{
  transform: none !important;
}

.faa-study-admin .subcount{
  margin-left:.25rem;
  opacity:.8;
  font-size:.85em;
  white-space:nowrap;
	font-family:'Montserrat',sans-serif;
}
.faa-study-admin .mono{
  font-family:'Montserrat',sans-serif !important;
}
.faa-acc-summary {
	border-radius:6px;
	margin-top: 3px;
	padding: 0.4rem 0;
}

/* Remove browser marker everywhere */
#studentConsolePanel details.faa-acc-item > summary.faa-acc-summary::-webkit-details-marker{ display:none; }
#studentConsolePanel details.faa-acc-item > summary.faa-acc-summary::marker{ content:''; }


/* Rotate when open */
#studentConsolePanel details.faa-acc-item[open] .acc-caret{
  transform: rotate(90deg);
  color: #fff; 
	margin-left:.1rem;
}


#studentConsolePanel{
  --caret: clamp(1.25rem, 1.8vw, 1.35rem);          
  --rot-ms: 260ms;           
}

#studentConsolePanel .faa-acc-summary{
  display: grid;
  grid-template-columns: var(--caret) 1fr;
  align-items: center;
  gap: 0;
	--gutter: .3rem;                 
  overflow: visible; 
	cursor:pointer;
}

#studentConsolePanel .acc-caret{
  width: var(--caret);
  height: var(--caret);
  display: grid;
  place-items: center;
  color: var(--acc-accent);          
  transform: rotate(0deg);
  transform-origin: 50% 50%;
  transition: transform var(--rot-ms) cubic-bezier(.22,.61,.36,1), color .15s linear;
  will-change: transform;
  pointer-events: none;
	justify-self: start;             
  margin-inline-start: calc(-1 * var(--gutter));  
}

#studentConsolePanel .acc-caret::before{
  content: "";
  display: block;
  width: 0; height: 0;
  border-left: calc(var(--caret) * .58) solid currentColor;      /* triangle width */
  border-top:  calc(var(--caret) * .34) solid transparent;       /* top slant */
  border-bottom: calc(var(--caret) * .34) solid transparent;     /* bottom slant */
}

@media (prefers-reduced-motion: reduce){
  #studentConsolePanel .acc-caret{ transition-duration: 0ms; }
}

details.faa-acc-item > summary.faa-acc-summary{
  background: linear-gradient(260deg, #fff 0%, #E8EEF2 100%);
  transition: background 180ms ease, color 180ms ease;
}

.faa-acc-item{ --acc-accent: #398FF3; }

.faa-acc-item[open] > .faa-acc-summary{
  background: linear-gradient(260deg, #fff 0%, var(--acc-accent) 100%);
	color: #fff;
	font-weight:800;
}

.faa-acc-item > summary.faa-acc-summary::marker{ color: var(--acc-accent); }
.faa-acc-item > summary.faa-acc-summary::-webkit-details-marker{ color: var(--acc-accent); }

.faa-study-admin a.lesson-link{
    color:inherit !important;
    text-decoration:none !important;
    font-weight:600;
  }
  .faa-study-admin a.lesson-link:hover{
   color: #007aff !important;
  }
/* When an accordion is open, make its body horizontally scrollable */
#studentConsolePanel details.faa-acc-item[open] > :not(.faa-acc-summary){
  display: block;
  overflow-x: auto;
  overscroll-behavior-x: contain;   /* don't bubble the swipe to the panel */
  -webkit-overflow-scrolling: touch;
  max-width: 100%;
  padding-bottom: .25rem;           /* breathing room under scrollbar */
}

/* Inside the scroll area, let wide tables create horizontal scroll */
#studentConsolePanel details.faa-acc-item[open] > :not(.faa-acc-summary) table{
  width: max-content;               /* size to content width */
  width: -webkit-max-content;       /* Safari */
  min-width: 100%;                  /* but never smaller than container */
  border-collapse: collapse;
}

/* Optional: light fade edges to hint “scrollable” */
#studentConsolePanel details.faa-acc-item[open] > :not(.faa-acc-summary){
  position: relative;
  --fade: linear-gradient(90deg, #fff 0, rgba(255,255,255,0) 24%);
}
@media (pointer:fine){
  #studentConsolePanel details.faa-acc-item[open] > :not(.faa-acc-summary)::before,
  #studentConsolePanel details.faa-acc-item[open] > :not(.faa-acc-summary)::after{
    content:""; position:absolute; top:0; bottom:0; width:14px; pointer-events:none;
  }
  #studentConsolePanel details.faa-acc-item[open] > :not(.faa-acc-summary)::before{
    left:0; background: var(--fade);
  }
  #studentConsolePanel details.faa-acc-item[open] > :not(.faa-acc-summary)::after{
    right:0; background: linear-gradient(270deg, #fff 0, rgba(255,255,255,0) 24%);
  }
}

/* Study table + chips */
#studentConsolePanel .faa-study-admin{ width:100%; border-collapse:collapse; }
#studentConsolePanel .faa-study-admin th, #studentConsolePanel .faa-study-admin td{ border:1px solid #ddd; padding:.5rem; text-align:left; }
#studentConsolePanel .faa-study-admin th{ background:#f7f7f7; }
#studentConsolePanel .faa-study-admin .col-center{ text-align:center; }
#studentConsolePanel .faa-study-admin tbody tr.faa-chapter-summary>td{ background:#fde8e8 !important; font-weight:700; }
#studentConsolePanel .mono{ font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace; }
#studentConsolePanel .faa-chip{ display:inline-flex; align-items:center; justify-content:center; min-width:1.6em; height:1.6em; padding:0 .4em; border-radius:999px; font-size:.9rem; font-weight:700; line-height:1; user-select:none; }
#studentConsolePanel .faa-chip.is-yes{ background:#e6f4ea; color:#1f6b3a; }
#studentConsolePanel .faa-chip.is-no{  background:#fde8e8; color:#b42318; }
#studentConsolePanel .faa-chip.is-na{  background:#f3f4f6; color:#374151; }
#studentConsolePanel .quiz-pill{ display:inline-block; padding:.1rem .4rem; border-radius:.35rem; font-weight:600; font-size:.9em; line-height:1.1; color:#000; background:transparent; }
#studentConsolePanel .quiz-pill.is-pass{ color:#1f6b3a; background:#e6f4ea; }
#studentConsolePanel .quiz-pill.is-fail{ color:#b42318; background:#fde8e8; }

@supports (-webkit-touch-callout: none){
  #studentConsolePanel .sc-track,
  #studentConsolePanel .sc-arc,
  #studentConsolePanel .sc-inner{ vector-effect: non-scaling-stroke; }
}
.quiz-pill{display:inline-block;padding:.1rem .4rem;border-radius:.35rem;font-weight:600;font-size:.9em;line-height:1.1;color:#000;background:transparent}
.quiz-pill.is-pass{color:#1f6b3a;background:#e6f4ea}
.quiz-pill.is-fail{color:#b42318;background:#fde8e8}
.quiz-pill.is-none{color:#374151;background:#f3f4f6}

.quiz-pill.is-na,
.faa-study-admin .quiz-pill.is-na,
.faa-lesson-checklist .quiz-pill.is-na {
  color: #111 !important;            /* near-black */
  background: #e6e7ea !important;    /* light neutral gray */
  border: 1px solid #cfd3d7;         /* subtle edge for clarity */
  border-radius: .35rem;              /* keep rounded look */
}

/* (Optional) "Not yet" neutral, a touch different from N/A */
.quiz-pill.is-pending,
.faa-study-admin .quiz-pill.is-pending,
.faa-lesson-checklist .quiz-pill.is-pending {
  color: #2f3133 !important;
  background: #f0f1f3 !important;
  border: 1px solid #dbdee2;
  border-radius: .35rem;
}

#studentConsolePanel .chapter-summary td.col-center.is-all {
  background: #e6f4ea !important;
}

#studentConsolePanel .chapter-summary td.col-quiz.is-pass {
  background: #e6f4ea !important;
}
/* Trophy icon */
#studentConsolePanel .chapter-summary td.is-perfect .trophy {
  margin-left: .4rem;
  font-size: 0.95em;
  line-height: 1;
}
/* Trophy for perfect chapter quiz (student console accordion summary) */
#studentConsolePanel tr.chapter-summary td.col-quiz.is-perfect::after {
  content: "🏆";
  display: inline-block;
  margin-left: 0.35rem;
  font-size: 0.95em;
  vertical-align: middle;
}

/*========Test Prep Tiles==========*/

.faa-testprep{
	margin-top:3rem;
}
.faa-tiles-block{
	margin-top: 1rem;
}
.faa-tiles-head {
	font-family:'Montserrat',sans-serif; font-weight:700; font-size:clamp(1.05rem, 1.8vw, 1.2rem);
}
.faa-tiles-block {
	border-radius: 9px;
	box-shadow: 0 0 3px 1px rgba(0, 0, 0, 0.1);
	padding:1rem;
	background: linear-gradient(260deg, #fff 0%, #E8EEF2 100%);
  transition: background 180ms ease, color 180ms ease;
}
@media (max-width:768px){
	.faa-tiles-block {
		padding:.7rem;
	}
}
.tile-sq.has-bg { 
  border-radius: .6rem; 
  overflow: hidden;        
}

.tile-sq.has-bg::before,
.tile-sq.has-bg::after {
  border-radius: inherit;
}

.tile-sq.has-bg,
.tile-sq.has-bg.pass,
.tile-sq.has-bg.fail,
.tile-sq.has-bg.empty{
  background: transparent !important;   
  border-color: transparent;            
  position: relative;
  isolation: isolate;                   
}

.tile-sq.has-bg::before{
  content:"";
  position:absolute; inset:0; z-index:1;
  background-image: var(--bg);
  background-size: cover;
  background-position: center;
  opacity: var(--img-opacity, .5);     
  filter: blur(var(--img-blur, 4px));   
}

.tile-sq.has-bg::after{
  content:"";
  position:absolute; inset:0; z-index:2;
  background: rgba(0,0,0, var(--veil, .3)); 
  mix-blend-mode: normal;                    
}

.tile-sq.has-bg > *{
  position: relative; z-index:3;
  text-shadow: 0 1px 2px rgba(0,0,0,.35);
}

/* Optional: tint the veil on pass/fail (keeps it dark, not white) */
.tile-sq.has-bg.pass{ --veil: 1 !important; --veil-color: rgba(5, 174, 2, 0.68); border: 1px solid #007129;}
.tile-sq.has-bg.fail{ --veil: .85; --veil-color: rgba(180,35,24,.40); }
.tile-sq.has-bg.pass::after{ background: var(--veil-color) !important; }
.tile-sq.has-bg.fail::after{ background: var(--veil-color) !important; }

@media (prefers-reduced-motion: reduce){
  .faa-testprep a.tile-sq.has-bg:hover{ transform:none; }
}

#studentConsolePanel .faa-tiles-block{ 
  max-width: 1080px;     
  margin-inline: auto;  
}
@media (max-width:768px){
#studentConsolePanel .faa-tiles-block{ 
  max-width: 94vw;       
	}
}
#studentConsolePanel .tiles-5{
  display:grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap:.55rem;
  margin:.45rem auto .6rem;  
}

@media (max-width:920px){
  #studentConsolePanel .tiles-5{
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  }
}

@media (max-width:480px){
	#studentConsolePanel .sc-prep{
		max-width:94vw;
	}
  #studentConsolePanel .tiles-5{
    justify-content: center;     
    gap: .4rem;
    margin: .4rem auto .4rem;
  }

  #studentConsolePanel .tile-sq{
    width: 100%;                 
    min-width: 170px;
	  max-width: 200px;
    justify-self: center;        
  }
}

#studentConsolePanel .tile-sq{
	box-sizing: border-box;
  aspect-ratio: 1 / 1;
  display:flex;
  flex-direction: column;
  align-items:center;
  justify-content:center;
  gap:.2rem;
  text-align:center;
  border:1px solid #e5e7eb;
  border-radius:.6rem;
  padding:.5rem;
  text-decoration:none;
  user-select:none;
  overflow:hidden;  
  min-width:0;      
}

.tile-sq .t1big-bg {align-content: center; align-items: center; direction: row; background: rgba(250, 250, 250, 0.94); border-radius:.35rem;  padding: 10px;font-size:1.1rem; font-weight:800; line-height:1.1;}
.tile-sq .subline{ font-size:.9rem; font-weight:700; opacity:.9; line-height:1.1; color: #ECF3EE;}
.tile-sq .hist{ display:flex; gap:.25rem; margin:.1rem 0 .1rem; flex-wrap:wrap; justify-content:center; }
.tile-sq .chip{ display:inline-flex; align-items:center; justify-content:center; min-width:1.4rem; height:1.4rem; border-radius:.35rem; font-size:.8rem; font-weight:700; border:1px solid #e5e7eb; background:#fafafa; }
.tile-sq .chip.ok{ border-color:#cce8d8; background:#00C734; color:#fff;}
.tile-sq .chip.no{ border-color:#f2c6c6; background:#b42318; color:#fff;}
.tile-sq .chip.ok:hover{color:#fff;}
.tile-sq .chip.no:hover{color:#fff;}
.tile-sq .chip.none{ opacity:.6; }

.tile-sq .t2{ font-size:.9rem; opacity:.95; }
.tile-sq .t3{ font-size:.8rem; opacity:.8; color: #fff !important;}

.tile-sq.pass{ border-color:#cce8d8; background:#009A14; }
.tile-sq.pass .t1big{ color:#05AE02 !important; text-shadow: 0 1px 1px rgba(0, 0, 0, 0.54); }
.tile-sq.fail{ border-color:#f2c6c6; background:#fff5f5; }
.tile-sq.fail .t1big{ color:#b42318 !important; text-shadow: 0 1px 1px rgba(0, 0, 0, 0.54); }
.tile-sq.empty{ background:#fafafa; }
.faa-tiles-head{ display:flex; align-items:baseline; gap:.5rem; }
.faa-tiles-head h4{ margin:.2rem 0; }
.faa-tiles-head span{ opacity:.75; font-size:.9rem; }
.tile-sq .ttitle { font-weight:700; color: #fff !important;}
.tile-sq .empty-note { margin-top:.15rem; font-size:.9rem; opacity:.8; color: #fff !important;}
.t1big .small {font-size:.9rem; font-weight:600; opacity:.8 !important; margin-left:.15rem; }

.tile-sq .ttitle{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:.3rem;
}
.tile-sq .trophy{
  font-size:1.25em;     
  line-height:1;
  filter: drop-shadow(0 1px 1px rgba(0,0,0,.15));
}

.tile-sq .trophy-badge{
  --size: 1.55rem;             
  width: var(--size);
  height: var(--size);
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  font-size: 1.15rem;             
  background: radial-gradient(circle at 35% 35%, #fff6bf 0%, #ffd54f 45%, #fbc02d 100%);
  box-shadow:
    0 1px 2px rgba(0,0,0,.25),
    inset 0 0 0 1px rgba(255,255,255,.55);
  transform: translateZ(0); 
	
}

.tile-sq.pass .trophy-badge{ box-shadow: 0 0 0 2px rgba(36,122,58,.20), 0 1px 2px rgba(0,0,0,.25), inset 0 0 0 1px rgba(255,255,255,.55); }
.tile-sq.fail .trophy-badge{ box-shadow: 0 0 0 2px rgba(180,35,24,.18), 0 1px 2px rgba(0,0,0,.25), inset 0 0 0 1px rgba(255,255,255,.55); }


      /* anchor tiles behave like neutral blocks; preserve inline LAST color */
      .faa-testprep a.tile-sq,
      .faa-testprep a.tile-sq:link,
      .faa-testprep a.tile-sq:visited,
      .faa-testprep a.tile-sq:hover,
      .faa-testprep a.tile-sq:active {
        display:flex;
        color: inherit;
        text-decoration: none !important;
        outline: none;
      }
      .faa-testprep a.tile-sq *,
      .faa-testprep a.tile-sq *:visited,
      .faa-testprep a.tile-sq *:hover {
        color: inherit;
        text-decoration: none !important;
      }
      .faa-testprep a.tile-sq { cursor: pointer; }


      .tm-grid{
        display:grid;
        grid-template-columns:repeat(auto-fit, minmax(220px,1fr));
        gap:.6rem; list-style:none; margin:.6rem 0 0; padding:0;
      }
      .tm-item{
        display:flex; justify-content:space-between; align-items:center;
        padding:.7rem .9rem; border:1px solid #e5e7eb; border-radius:.6rem;
        background:#fff; text-decoration:none; color:inherit;
      }
      .faa-test-menu a.tm-item{ color:inherit !important; text-decoration:none !important; }
      .tm-name{ font-weight:600; }
      .tm-badge{
        font-weight:700; padding:.15rem .5rem; border-radius:.5rem; border:1px solid #e5e7eb; background:#fafafa;
      }
      .tm-badge.pass{ background:#e6f4ea; border-color:#cce8d8; color:#1f6b3a; }
      .tm-badge.fail{ background:#fde8e8; border-color:#f2c6c6; color:#b42318; }
      .tm-badge.na{ background:#f4f5f7; color:#333; }
  
.faa-badge[data-tip]{position:relative}
.faa-badge[data-tip]::after{
  content: attr(data-tip);
  position:absolute; left:50%; bottom:125%;
  transform:translateX(-50%);
  white-space:nowrap; padding:.3rem .5rem; border-radius:.4rem;
  background:#111; color:#fff; font-size:.8rem;
  opacity:0; pointer-events:none; transition:opacity .15s;
}
.faa-badge[data-tip]:hover::after,
.faa-badge[data-tip]:focus::after,
.faa-badge[data-tip].is-open::after{opacity:1}

/*=======Endorsement Gate==========*/

/* =========================
   CARD + LAYOUT
   ========================= */
#studentConsolePanel .eg-card{ 
	background-image: radial-gradient(circle at center, #fff 0%, #FFFDEE 100%); border:2px solid #f8e28a; padding:2rem; margin:2rem 0; box-shadow:0 0 4px 1px rgba(138, 127, 17, 0.3)}

@media (max-width:768px){
  #studentConsolePanel .eg-card{
    box-sizing: border-box;
    max-width: 92vw;
    width: auto;                 /* don’t force full width */
    padding:1.5rem;
    margin:1.5rem auto;          /* ← center in normal flow */
    justify-self:center;         /* if parent is grid */
    align-self:center;           /* if parent is flex */
  }
}

/* =========================
   CERTIFICATE CORNER LINES
   ========================= */

.eg-card.certificate { position:relative; overflow:visible; }

.eg-card.certificate::before,
.eg-card.certificate::after{
  content:"";
  position:absolute;
  inset:0;               /* keeps everything anchored to the card */
  pointer-events:none;
  z-index:2;
}

/* Shared defaults (you can override per card) */
.eg-card.certificate{
  --g1:#b58310;        /* gold dark */
  --g2:#f8e28a;        /* gold light */
  --h-thick:2px;       /* horizontal line thickness */
  --v-thick:2px;       /* vertical line thickness */
}

/* ::before draws TL + BR (primary + secondary) */
.eg-card.certificate::before{
  background:
    /* ---------- TOP-LEFT (primary) ---------- */
    /* horizontal */
    linear-gradient(90deg, var(--g1), var(--g2))
      left var(--tl-h-x, 15px) top var(--tl-h-y, 5px) / var(--tl-h-len, 60px) var(--h-thick) no-repeat,
    /* vertical */
    linear-gradient(180deg, var(--g1), var(--g2))
      left var(--tl-v-x, 5px) top var(--tl-v-y, 15px) / var(--v-thick) var(--tl-v-len, 60px) no-repeat,

    /* ---------- TOP-LEFT (secondary) ---------- */
    linear-gradient(90deg, var(--g1), var(--g2))
      left var(--tl2-h-x, 5px) top var(--tl2-h-y, 15px) / var(--tl2-h-len, 20px) var(--h-thick) no-repeat,
    linear-gradient(180deg, var(--g1), var(--g2))
      left var(--tl2-v-x, 15px) top var(--tl2-v-y, 5px) / var(--v-thick) var(--tl2-v-len, 20px) no-repeat,

    /* ---------- BOTTOM-RIGHT (primary) ---------- */
    linear-gradient(90deg, var(--g1), var(--g2))
      right var(--br-h-x, 15px) bottom var(--br-h-y, 5px) / var(--br-h-len, 60px) var(--h-thick) no-repeat,
    linear-gradient(180deg, var(--g1), var(--g2))
      right var(--br-v-x, 5px) bottom var(--br-v-y, 15px) / var(--v-thick) var(--br-v-len, 60px) no-repeat,

    /* ---------- BOTTOM-RIGHT (secondary) ---------- */
    linear-gradient(90deg, var(--g1), var(--g2))
      right var(--br2-h-x, 5px) bottom var(--br2-h-y, 15px) / var(--br2-h-len, 20px) var(--h-thick) no-repeat,
    linear-gradient(180deg, var(--g1), var(--g2))
      right var(--br2-v-x, 15px) bottom var(--br2-v-y, 5px) / var(--v-thick) var(--br2-v-len, 20px) no-repeat;
}

/* ::after draws TR + BL (primary + secondary) */
.eg-card.certificate::after{
  background:
    /* ---------- TOP-RIGHT (primary) ---------- */
    linear-gradient(90deg, var(--g1), var(--g2))
      right var(--tr-h-x, 15px) top var(--tr-h-y, 5px) / var(--tr-h-len, 60px) var(--h-thick) no-repeat,
    linear-gradient(180deg, var(--g1), var(--g2))
      right var(--tr-v-x, 5px) top var(--tr-v-y, 15px) / var(--v-thick) var(--tr-v-len, 60px) no-repeat,

    /* ---------- TOP-RIGHT (secondary) ---------- */
    linear-gradient(90deg, var(--g1), var(--g2))
      right var(--tr2-h-x, 5px) top var(--tr2-h-y, 15px) / var(--tr2-h-len, 20px) var(--h-thick) no-repeat,
    linear-gradient(180deg, var(--g1), var(--g2))
      right var(--tr2-v-x, 15px) top var(--tr2-v-y, 5px) / var(--v-thick) var(--tr2-v-len, 20px) no-repeat,

    /* ---------- BOTTOM-LEFT (primary) ---------- */
    linear-gradient(90deg, var(--g1), var(--g2))
      left var(--bl-h-x, 15px) bottom var(--bl-h-y, 5px) / var(--bl-h-len, 60px) var(--h-thick) no-repeat,
    linear-gradient(180deg, var(--g1), var(--g2))
      left var(--bl-v-x, 5px) bottom var(--bl-v-y, 15px) / var(--v-thick) var(--bl-v-len, 60px) no-repeat,

    /* ---------- BOTTOM-LEFT (secondary) ---------- */
    linear-gradient(90deg, var(--g1), var(--g2))
      left var(--bl2-h-x, 5px) bottom var(--bl2-h-y, 15px) / var(--bl2-h-len, 20px) var(--h-thick) no-repeat,
    linear-gradient(180deg, var(--g1), var(--g2))
      left var(--bl2-v-x, 15px) bottom var(--bl2-v-y, 5px) / var(--v-thick) var(--bl2-v-len, 20px) no-repeat;
}

/* =========================
   TITLE + BADGE
   ========================= */

.eg-top{
  display:grid; grid-template-columns: 1fr auto;
  align-items:center; gap:.75rem;
}
@media (max-width:480px){
  .eg-top{
    display:flex;
    flex-direction: column;  /* stack */
    align-items: center;     /* center */
    gap:.75rem;
  }
}
#studentConsolePanel .eg-title{
  font-family:'Montserrat',sans-serif;
  font-weight:800;
  font-size:clamp(1.1rem, 1.8vw, 1.3rem);
  display:flex; align-items:center; gap:.35rem;
}

.eg-badge{
  --eg-h: 48px !important;     
  --eg-ratio: .70 !important;  

  height: var(--eg-h);
  width:  calc(var(--eg-h) * var(--eg-ratio));
  flex:   0 0 calc(var(--eg-h) * var(--eg-ratio));
  display:inline-block;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  filter: drop-shadow(0 1px 1px rgba(0,0,0,.15));
}
.eg-sub, .eg-details{ font-size:clamp(0.9rem, 1.8vw, 1.1rem); opacity:.9; margin-left:5px; }

.eg-details{cursor: pointer}

@media (max-width:480px){
	.eg-details{
	margin-bottom:.5rem;
	}
}

.eg-list{
	margin-top:.5rem;
}

/* =========================
   BUTTON (cert-colored)
   ========================= */

#studentConsolePanel[data-cert="spl"]{ --btnA:#5DDA51; --btnB:#209016; --btnH:#4EC95ED6; }
#studentConsolePanel[data-cert="rpl"]{ --btnA:#BA67FF; --btnB:#712CA9; --btnH:#712CA9;   }
#studentConsolePanel[data-cert="ppl"]{ --btnA:#457FFF; --btnB:#2053C3; --btnH:#6EBDFFD6; }
#studentConsolePanel[data-cert="cpl"]{ --btnA:#FFCD6B; --btnB:#D5961A; --btnH:#FFB700E3; }

#studentConsolePanel .eg-btn.primary.mfa-btn-primary{
  appearance: none;              
  -webkit-appearance: none;
  display:inline-flex; align-items:center; justify-content:center !important; text-align: center;
  padding:.5rem .8rem; font-weight:600; text-decoration:none;color:#fff; background-color:transparent;
  background-image: linear-gradient(172deg, var(--btnA) 30%, var(--btnB) 100%);
  box-shadow:1px 1px 4px 1px rgba(0,0,0,.4); border-radius:6px; border:none; cursor:pointer;
}

#studentConsolePanel[data-cert] .eg-btn.primary.mfa-btn-primary:is(:hover, :focus-visible):not([disabled]){
  color:#000;
  background-image: linear-gradient(180deg, #FFFFFF 0%, var(--btnH, var(--btnB)) 100%);
  box-shadow:1px 1px 1px 1px rgba(0,0,0,.4);
}

#studentConsolePanel .eg-btn.primary[disabled]{
  opacity:.55; cursor:not-allowed; background:#e5e7eb; color:#374151; box-shadow:none;
}

@media (max-width:480px){
	.eg-btn.primary{
		align-self: center;
	}
}

/* ─────────────────────────────────────────────────────────
   Step blocks (container states: .ok, .perfect)
   ───────────────────────────────────────────────────────── */

.eg-steps{ display:flex; gap:.9rem; margin:1.5rem 0; align-items:center; justify-content:center; }

@media (max-width:480px){
  .eg-steps{
    display:flex;
    flex-direction: column; 
    align-items:stretch;   
    gap:.75rem;
  }
}
.eg-step{
	flex:0 1 auto;            /* ← size by content; may shrink if needed */
  align-self:stretch;       /* ← belt-and-suspenders equal height */
  min-width:0;      
  display:flex; align-items:center; gap:.6rem;
  padding:.65rem;
  border:1px dashed #d6dbe3;
  border-radius:.55rem;
  background: linear-gradient(180deg, #ffffff 0%, #E8EEF2 100%);
  position:relative; overflow:hidden;
	--ink: #4B4E54;                
  color: var(--ink);
}
/* Brushed background for the default state (no stripes on OK/Perfect) */
#studentConsolePanel .eg-step:not(.ok):not(.perfect){
  --brush-angle: -34deg;      /* direction of the brush */
  --brush-thick: 1px;         /* line thickness */
  --brush-gap: 6px;           /* space between lines */
  --brush-alpha: .045;        /* line opacity */
	
  background-image:
    repeating-linear-gradient(
      var(--brush-angle),
      rgba(0,0,0, var(--brush-alpha)) 0 calc(var(--brush-thick)),
      rgba(0,0,0, 0)                   calc(var(--brush-thick)) calc(var(--brush-thick) + var(--brush-gap))
    ),
    linear-gradient(180deg, #ffffff 0%, #E8EEF2 100%);
  background-blend-mode: multiply, normal;
}

#studentConsolePanel .eg-step.is-locked{  --brush-alpha: .06; }
#studentConsolePanel .eg-step.is-partial{ --brush-alpha: .035; }

#studentConsolePanel .eg-step:not(.ok):not(.perfect):hover{
  --brush-alpha: .055;
}

/* --- Metallic tickets ----------------------------------- */
/* OK = SILVER */
#studentConsolePanel .eg-step.ok{
  border: 1px solid #cfd4db;
  background:
    linear-gradient(135deg,
      /* deep edge → highlight → edge → highlight → edge */
      #a9b0b7 0%,
      #d7dce2 12%,
      #f6f8fb 22%,
      #ffffff 35%,
      #e8edf2 46%,
      #c7cdd4 58%,
      #f6f8fb 70%,
      #e1e6eb 82%,
      #b3b9c1 100%
    );
  background-blend-mode: normal;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.35),
    inset 0 -8px 14px rgba(0,0,0,.06);
}

/* PERFECT = GOLD */
#studentConsolePanel .eg-step.perfect{
  border: 1px solid #d6b253;
  background:
    linear-gradient(135deg,
      #c99514 0%,     
      #e6be4b 10%,
      #fff3c5 24%,    
      #f1cd54 39%,
      #d6a33a 55%,    
      #f7dc74 70%,    
      #fff2bd 84%,
      #e1bd49 100% 
		
    );
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.30),
    inset 0 -10px 18px rgba(155,110,23,.12);
  filter: brightness(1.06);
}

/* If you had any “brush/sheens”, keep them off on done states */
#studentConsolePanel .eg-step.ok::after,
#studentConsolePanel .eg-step.perfect::after{
  content: none;
}


/* Optional one-time sheen on hover/focus for done steps */
#studentConsolePanel .eg-step.ok:hover::after,
#studentConsolePanel .eg-step.ok:focus-within::after,
#studentConsolePanel .eg-step.perfect:hover::after,
#studentConsolePanel .eg-step.perfect:focus-within::after{
  content:""; position:absolute; top:-40%; bottom:-40%; left:-60%; width:40%;
  background: linear-gradient(100deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.55) 50%, rgba(255,255,255,0) 100%);
  transform: skewX(-12deg);
  animation: egSheen 1100ms ease-out forwards;
  pointer-events:none;
}
@keyframes egSheen{ to { left:120%; } }


/* =========================
   LOCK ICONS
   ========================= */

.eg-lock{
  display: inline-block;
  width: 58px;
  height: 58px;
  padding: 5px;
  border-radius: 50%;
  background: rgba(255,255,255,.35);
  align-self: center;
  z-index: 4;

  /* new: opt out of flex shrink */
  flex: 0 0 auto;        /* no grow, no shrink, size = width/height */
  min-width: 58px;       /* belt & suspenders for iOS */
  min-height: 58px;
  box-sizing: content-box; /* keep padding outside the 58x58 content box */
}
.eg-lock::before{
  content:"";
  display:block;
  width:100%; height:100%;
  background: center/contain no-repeat var(--icon);
}
@media (max-width:480px){
  .eg-lock{min-width:38px; min-height:38px;max-width:48px; min-height:48px; }
}
.eg-lock.perfect{ --icon:url('/wp-content/uploads/2025/09/gold-opened.png'); background: rgba(255, 254, 242,.75);}
.eg-lock.ok{      --icon:url('/wp-content/uploads/2025/09/silver-opened.png'); background: rgba(255, 255, 255, 0.75); }
.eg-lock.no{      --icon:url('/wp-content/uploads/2025/09/silver-locked.png'); }

/* =========================
   LINES, FLAGS, MONO NUMS
   ========================= */
#studentConsolePanel .eg-txt{ position:relative; z-index:2; }
.eg-line{
  position: relative;
  display: block;                 /* one text block */
  line-height: 1.25;
  opacity: .45;
  z-index: 2;
  padding-inline-start: calc(1.1rem + .35rem); /* chip width + gap */
  transition: opacity .2s ease;
}

/* Keep your chip size; just park it in the left column */
.eg-line > .eg-flag{
  position: absolute;
  inset-inline-start: 0;          /* LTR/RTL safe “left:0” */
  inset-block-start: .1em;        /* align with first text line */
  margin: 0;
}

/* small vertical space between lines if you want */
.eg-line + .eg-line{ margin-top: .15rem; }
.eg-flag{
  display:inline-flex; align-items:center; justify-content:center;
  width:1.1rem; height:1.1rem; border-radius:999px; font-weight:800; font-size:.85rem; line-height:1;
  border:1px solid transparent;
}
.eg-flag.ok{ background:#e6f4ea; border-color:#cce8d8; color:#1f6b3a; }
.eg-flag.no{ background:#fde8e8; border-color:#f2c6c6; color:#b42318; }
.eg-txt .mono{
  font-variant-numeric: tabular-nums;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
}
.eg-txt .eg-label{ margin-bottom:.15rem; color:#2E3034;}

#studentConsolePanel .eg-step .eg-line:has(.eg-flag.ok){
  opacity:1;
}

#studentConsolePanel .eg-step.ok .eg-txt,
#studentConsolePanel .eg-step.perfect .eg-txt{
  opacity:1;
}

/* brighten text ONLY when a step is OK or PERFECT */
#studentConsolePanel .eg-step.ok .eg-label,
#studentConsolePanel .eg-step.ok .eg-line,
#studentConsolePanel .eg-step.ok .eg-line strong,
#studentConsolePanel .eg-step.perfect .eg-label,
#studentConsolePanel .eg-step.perfect .eg-line,
#studentConsolePanel .eg-step.perfect .eg-line strong {
  color: #1f2329 !important;                 /* slightly lighter/darker than pure black so it pops on gold/silver */
  text-shadow: 0 1px 0 rgba(255,255,255,.35); /* tiny lift against metallic shine */
}

/* (optional) numbers a touch darker for contrast */
#studentConsolePanel .eg-step.ok .mono,
#studentConsolePanel .eg-step.perfect .mono {
  color: #15181c !important;
}

/* ===== Student Console CFI ===== */

.cfi-connect{
  display:flex; flex-direction:column; gap:.6rem; 
  height:auto;
  margin:0 1rem;
  padding: 1.5rem;
  border:1px solid #e5e7eb; border-radius:.6rem;
}
.sub-title{
	font-family: 'Montserrat', sans-serif;
    font-weight: 800;
	font-size: clamp(1rem, 1.6vw, 1.2rem);
	text-align:center;
	margin-bottom:0.7rem;
}
.cfi-connect-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  margin-top: 1rem;
}

.cfi-connect-col {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  flex: 1 1 260px; /* stacks on small screens, 2 columns on wider */
  background: #eaeaea8a;
  border-radius: 16px;
	padding:1.3rem;
}

.cfi-small {
  font-size: 0.9rem;
  color: #555;
  margin-bottom: 0.75rem;
}

.cfi-btn {display: block; margin: 0 auto; padding:.7rem; border:1px solid var(--sc-border,#d9d9de);
  border-radius:.4rem; font-family:'Montserrat',sans-serif; font-weight:600; font-size:clamp(1rem,1.6vw,1.1rem); cursor:pointer; box-shadow:0 0 4px 1px rgba(0,0,0,.29) !important; background-image: linear-gradient(172deg, var(--btnA) 30%, var(--btnB) 100%); color:#fff; }
.load-older {
	border:none;
	box-shadow:none !important;
	color: #666;
	
}

.cfi-chat {
  display:flex; flex-direction:column; gap:.6rem; 
  height:100%;
  margin:2rem 1.5rem;
}


#studentConsolePanel[data-cert="spl"] .cfi-msg-student .cfi-msg-body { background:#BFFFB74F; }
#studentConsolePanel[data-cert="rpl"] .cfi-msg-student .cfi-msg-body { background:#ECB7FF4F; }
#studentConsolePanel[data-cert="ppl"] .cfi-msg-student .cfi-msg-body { background:#B7DEFF4F; }
#studentConsolePanel[data-cert="cpl"] .cfi-msg-student .cfi-msg-body { background:#FFB01317; }

.cfi-msg-instructor .cfi-msg-body{
	background: #f3f4f6;
        color: #111827;border-radius: .8rem; border:1px solid #e5e7eb; max-width:90%; padding:0.7rem 0.8rem;
}

.cfi-msg-student .cfi-msg-body{
	border-radius: .8rem; border:1px solid #e5e7eb; max-width:90%; padding:0.7rem 0.8rem; text-align: left;
}
/* Chat log: fill remaining space and scroll internally */
#sc-cfi-chat-log,
#faa-cfi-chat-log {
  flex: 1 1 auto;
  min-height: 55vh;
  max-height: none; /* flex controls height now */
  overflow-y: auto;
  padding: 0.5rem;
  margin: 0;
  box-sizing: border-box;
}

  .cfi-chat-empty {
    font-size: 0.95rem;
    color: #666;
    margin: 0.25rem 0;
  }

  .cfi-msg {
	width: auto;
    max-width: 100%;
    margin-top:1rem;
    display: flex;
    flex-direction: column;
  }

  .cfi-msg-meta {
    font-size: 0.75rem;
    color: #666;
    margin-bottom: 0.15rem;
  }
.cfi-msg-body {
  width: max-content;
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: auto; 
  max-width: 90%; 
    padding: 0.5rem 0.7rem;
    border-radius: 0.75rem;
    border: 1px solid #ddd;
    background: #fff;
    font-size: 1rem;
    line-height: 1.4;
    word-wrap: break-word;
    white-space: pre-wrap;
  }

  /* Alignment: instructor left, student right */
#studentConsolePanel .cfi-msg-instructor {
    align-items: start;
  }

#studentConsolePanel .cfi-msg-student {
    align-items: end;
  }

  /* New message emphasis */
  .cfi-msg-new .cfi-msg-body,
  .cfi-msg-new .cfi-msg-meta {
    font-weight: 600;
  }
.cfi-chat-title {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-top: 0.5rem;
  padding: .5rem;
  flex-wrap: nowrap;       
}
@media (max-width:650px){
	.cfi-chat-title {
		flex-wrap: wrap;       
}
	
	.cfi-thread-bar{
		justify-content:space-between !important;
	}
}
.cfi-thread-bar{
	display: flex;
	gap:.5rem;
	
}
#sc-cfi-thread-select{
	max-height:2.9rem;
	max-width:max-content;
	padding:10px !important;
	align-self:center;
}
.chat-with-title{
		display:flex;
		flex-wrap: nowrap;
		width:30%;
		max-width:max-content;
	align-self:center;
	}
#mfa-staff-chat-overlay[hidden]{ display:none !important; }

.cfi-search-bar {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-left: auto;      /* pushes the whole search block to the RIGHT */
  max-width: 26rem;       /* optional: cap the width of the whole search area */
}
#sc-cfi-search-input {
  flex: 1 1 18rem;  /* base width ~12rem, but can grow or shrink */
  min-width: 0;
}

/* Buttons keep their natural size; don’t stretch */
.cfi-search-bar button {
  flex: 0 0 auto;
}
.cfi-search-status{
  text-align: center;       /* center the text itself */
  font-size: 0.7em;
  color: #666;
}
     
/* Chat column layout: title + controls + log + form */
.cfi-chat {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  margin: 2rem 1.5rem;
  height: 100%;
}
@media (max-width:480px){
.cfi-chat {
  margin: 1.5rem .5rem;
	}
}
#sc-cfi {
  display: flex;
  flex-direction: column;
  height: 100%;
	min-height: 0;
}
#sc-cfi .cfi-connect {
  flex: 0 0 auto; /* just its content height */
}

#sc-cfi .cfi-chat {
  flex: 1 1 auto; /* take all remaining height below .cfi-connect */
  min-height: 0;  /* critical so the log inside can scroll */
  display: flex;
  flex-direction: column;
}

/* Chat form row: textarea + button on same line, at bottom */
.cfi-chat-form {
  display: flex;
  align-items: Stretch;
  gap: 0.5rem;
  margin-top: 0.5rem;
  padding-bottom:1.5rem;
}

/* Textarea: take all remaining width, nice height */
#sc-cfi-chat-input {
  flex: 1 1 auto;
  min-height: 2.75rem;
  max-height: 7rem;
  resize: vertical;
}

/* Chat send button: no top-margin so it aligns nicely */
.cfi-chat-form .cfi-btn {
  margin-top: 0; /* override the global .cfi-btn margin */
  white-space: nowrap;
  padding-inline: 1rem;
}

.student-console-btn {
  position: relative;
}

/* tiny red badge on the CFI button */
.student-console-badge {
  position: absolute;
  right: -2px;
  bottom: -2px;
  min-width: 14px;
  height: 14px;
  padding: 0 3px;
  border-radius: 999px;
  background: #e53935;
  color: #fff;
  font-size: 10px;
  line-height: 14px;
  text-align: center;
  display: none; /* hidden by default */
}

.student-console-badge.has-unread {
  display: inline-block;
}


.student-console-badge::before { content: ''; } 

/* Visually mute the CFI chat when it's read-only / no-link */
#studentConsolePanel #sc-cfi-chat-form.is-readonly button,
#studentConsolePanel #sc-cfi-chat-form.is-readonly input[type="submit"],
#studentConsolePanel #sc-cfi-chat-form button.is-disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}


/* ===== CFI/School Console ===== */

#faa-progress-wrap, .faa-admin-console, #adminConsolePanel{
  scroll-margin-top: 90px;
}

.cfi-console-title{
  position: relative;
  background: #9f9f9f;
  border-radius: 36px;
  color: #fefefe;
  margin-bottom: 2rem;
  overflow: hidden; /* clips band to pill */
}

/* diagonal white band on the right end */
.cfi-console-title::after{
  content:"";
  position:absolute;
  top:-40%;
  right:-18px;
  width:90px;
  height:180%;
  background: rgba(255,255,255,.35);
  transform: rotate(18deg);
  pointer-events:none;
}

.faa-cfi-section{
	padding-bottom:1rem;
}
.faa-cfi-intro{
	margin-bottom:1rem;
}

.faa-cfi-help-links {
  margin-bottom:2rem;
}

.faa-quick-guide-btn {
  white-space: nowrap;
}
.faa-quick-guide-btn{
color:#B42318;
	font-weight:600;
}
.faa-cfi-sec-head{
  width: 100%;
  display:flex;
  align-items:center;
  gap:10px;
  padding: 10px 12px;
  border: 1px solid rgba(0,0,0,.12);
  border-radius: 12px;
  background: #fff;
  cursor: pointer;
  font-size: 1.05rem;
  font-weight: 800;
	color: #2a84b7;
}
.faa-cfi-sec-head-staff{
    color: #a76a1b;
}
.faa-cfi-sec-head:hover,
.faa-cfi-sec-head:focus,
.faa-cfi-sec-head:focus-visible,
.faa-cfi-sec-head:active{
  background: linear-gradient(90deg, var(--c1, #28698d), var(--c2, #d9f0fe)) !important;
  color: #fff !important;
}
.faa-cfi-sec-head-staff:hover,
.faa-cfi-sec-head-staff:focus,
.faa-cfi-sec-head-staff:focus-visible,
.faa-cfi-sec-head-staff:active{
  background: linear-gradient(90deg, var(--c1, #8b550f), var(--c2, #fff3e3)) !important;
  color: #fff !important;
}

/* Remove default button look that can flash grey */
.faa-cfi-sec-head{
  -webkit-appearance: none;
  appearance: none;
}

/* Optional: nicer focus ring without changing background */
.faa-cfi-sec-head:focus-visible{
  outline: 2px solid rgba(255,255,255,.75);
  outline-offset: 2px;
}
.faa-cfi-sec-caret{
  width: 18px;
  text-align:center;
  font-size: 16px;
  line-height: 1;
}

.faa-cfi-sec-body{
  margin-top: 10px;
}

ul.faa-cfi-unlinked-list{
	padding-inline-start:1.5rem;
}
.mfa-progress-loading{
  position: fixed;
  inset: 0;
  background: rgba(255,255,255,.75);
  backdrop-filter: blur(1px);
  z-index: 2147483647;
  display: flex;
  align-items: center;
  justify-content: center;
}
.mfa-progress-loading[hidden]{ display:none; }

.mfa-progress-loading__box{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:10px;
  padding:18px 20px;
  background:#fff;
  border:1px solid rgba(0,0,0,.12);
  border-radius:14px;
  box-shadow:0 10px 30px rgba(0,0,0,.12);
}
.mfa-spinner{
  width:34px;
  height:34px;
  border:4px solid rgba(0,0,0,.15);
  border-top-color: rgba(0,0,0,.65);
  border-radius:50%;
  animation:mfa-spin .8s linear infinite;
}
@keyframes mfa-spin{ to{ transform:rotate(360deg); } }

/* Tables */
/* Rounded OUTLINE comes from wrapper */
.mfa-table-wrap{
  border: 1px solid hsla(0,0%,50%,.502);
  border-radius: 14px;
  overflow: auto;
  background: #fff; 
	
}

/* Keep grid lines inside */
.mfa-table-wrap table{
  width: 100%;
  border-collapse: separate !important;
  border-spacing: 0 !important;
  border: 0 !important;
	margin-block-end:0 !important;
}

/* Your theme already sets borders on td/th; we just remove OUTER edges
   so the wrapper border is the only outer outline (fixes corner color). */
.mfa-table-wrap tr > *:first-child{ border-left: 0 !important; }
.mfa-table-wrap tr > *:last-child{  border-right: 0 !important; }
.mfa-table-wrap thead tr:first-child > *{ border-top: 0 !important; }
.mfa-table-wrap tbody tr:last-child  > *{ border-bottom: 0 !important; }

   
      .faa-cfi-console table.widefat td,
      .faa-cfi-console table.widefat th{
        vertical-align: middle !important;
		  text-align:center;
      }

      /* Link column */
      .faa-cfi-console .faa-cfi-linkcell,
.mfa-staff-linkcell{
        display:flex;
        flex-direction:column;
        gap:.5rem;
        align-items:center;
      }
      .faa-cfi-console .faa-cfi-linkts,
.faa-cfi-local-ts{ font-size:12px; opacity:.8; }

      /* Muted helper text */
      .faa-cfi-console .faa-cfi-muted{ opacity:.75; font-size:12px; margin-left:8px;font-style:italic; margin-right:1rem; }

 /* 1) The wrapper is the ONLY thing that should scroll horizontally */
.faa-cfi-console .mfa-table-wrap,
.faa-school-console .mfa-table-wrap{
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  box-sizing: border-box;
  min-width: 0; /* critical when inside flex layouts */
}

/* 2) Let the table be as wide as it needs, but keep it contained */
.faa-cfi-console .mfa-table-wrap > table,
.faa-school-console .mfa-table-wrap > table{
  min-width: 100%;
  width: max-content; /* forces overflow INSIDE wrapper instead of body */
}

/* 3) If any parent is flex, this prevents “page gets wider” */
.faa-cfi-console .faa-cfi-sec-body,
.faa-school-console .faa-cfi-sec-body{
  min-width: 0;
}
     
/* Sortable Name header */
.faa-sort-th { white-space: nowrap; }
.faa-sort-btn{
  background: none;
  border: none;
  padding: 0;
  font-family: inherit;
	font-weight: 700;
  font-size: clamp(0.95rem, 1.8vw, 1.025rem);
  color: #333;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
	box-shadow:none !important;
  gap: 6px;
}
.faa-sort-caret{ font-size: .9em; line-height: 1; }
.faa-sort-btn:hover{ background: none !important; }
.faa-sort-btn:focus{ background: none !important; outline-offset: 2px; }

.faa-cfi-load-progress,
.mfa-syllabus-open-btn,
.faa-cfi-accept,
.faa-cfi-reject,
.faa-cfi-unlink-student,
.faa-school-accept,
.faa-school-reject,
.faa-school-unlink-student,
.mfa-school-staff-unlink-btn,
.mfa-cfi-school-unlink-btn{
    font-family: 'Montserrat', sans-serif;
    font-size: clamp(0.95rem, 1.8vw, 1.025rem);
    color: black;
    font-weight: 600;
    border-radius: 9px 9px 9px 9px;
    box-shadow: 0 0 4px 1px rgba(0, 0, 0, 0.29) !important;
    border: none;
    padding: 13px 13px 13px 13px;
	cursor:pointer;	
}

.faa-cfi-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  flex-wrap: wrap;
}

/* When the action cell uses the two-line layout */
.faa-cfi-actions.mfa-action-two-lines,
.faa-school-actions.mfa-action-two-lines {
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: .6rem;
}

.faa-school-chat-open,
.faa-cfi-chat-open,
.faa-staff-chat-open{
	font-family: 'Montserrat', sans-serif;
    font-size: clamp(0.95rem, 1.8vw, 1.025rem);
    font-weight: 600;
    border-radius: 9px 9px 9px 9px;
    box-shadow: 0 0 5px 2px rgba(0, 0, 0, 0.35) !important;
    border: none;
    padding:5px;
	cursor:pointer;	
	background: #29739d;
	width:3rem;
	height:3rem;
	font-size:1.2rem;
}
.faa-staff-chat-open{
    background: #8b550f;
}
.faa-cfi-load-progress {
	background: #fff;
}
.mfa-syllabus-open-btn.mfa-cert-spl {
  background: #4EBD44;
  border-color: #4EBD44;
  color: #fff;
}

.mfa-syllabus-open-btn.mfa-cert-rpl {
  background: #AD49FF;
  border-color: #AD49FF;
  color: #fff;
}

.mfa-syllabus-open-btn.mfa-cert-ppl {
  background: #398FF3;
  border-color: #398FF3;
  color: #fff;
}

.mfa-syllabus-open-btn.mfa-cert-cpl {
  background: #FFB013;
  border-color: #FFB013;
  color: #fff;
}

.mfa-syllabus-open-btn.mfa-cert-spl:hover,
.mfa-syllabus-open-btn.mfa-cert-rpl:hover,
.mfa-syllabus-open-btn.mfa-cert-ppl:hover,
.mfa-syllabus-open-btn.mfa-cert-cpl:hover {
  filter: brightness(1.3);
  text-decoration: none;
  color: #111;
}

.mfa-syllabus-open-btn.mfa-cert-spl,
.mfa-syllabus-open-btn.mfa-cert-rpl,
.mfa-syllabus-open-btn.mfa-cert-ppl,
.mfa-syllabus-open-btn.mfa-cert-cpl{
  box-shadow: 0 4px 12px rgba(0,0,0,0.16);
}

.mfa-syllabus-open-btn,
.mfa-syllabus-history-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  white-space: nowrap;
  text-decoration: none !important;
}

/* Keep icon vertically centered */
.mfa-syllabus-open-btn .mfa-syllabus-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}
.mfa-syllabus-history-btn{
	padding: 0 8px;
}

.mfa-syllabus-assign-form {
  display: flex;
  align-items: center;
  gap: 8px;
  
}

.mfa-syllabus-template-select {
  width: 260px;
  max-width: 260px;
  min-width: 180px;
  height: 48px;
  min-height: 48px;
  border-radius: 8px;
  padding: 0 12px;
  font-size: 15px;
}

.mfa-syllabus-select-btn,
.mfa-syllabus-history-btn,
.mfa-print-syllabus-btn,
.mfa-save-reed{
  height: 48px !important;
  min-height: 48px !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  font-weight: 700;
  white-space: nowrap;
}
#studentConsolePanel .mfa-print-syllabus-btn{
	height: 36px !important;
  min-height: 36px !important;
}
.mfa-syllabus-select-btn,
.button.mfa-print-syllabus-btn,
.mfa-save-reed{
	color:#111 !important;
	border:1px solid #111;
	background:#fff !important;
}
.mfa-print-syllabus-btn:hover,
.mfa-syllabus-select-btn:hover{
	color:#ff3c3c !important;
	background:#fff !important;
	border:1px solid #a40505;
}
#studentConsolePanel .mfa-print-syllabus-btn:hover{
background-color: #AFAFAF !important;
    box-shadow: 0px 0px 10px 0px rgba(210.79999999999998, 210.79999999999998, 210.79999999999998, 0.5);
}
.mfa-syllabus-history-btn {
  padding: 0 16px !important;
  border: 1px solid #d8dce3;
  background: #666666;
  color: #ffffff;
  text-decoration: none !important;
}

.mfa-syllabus-history-btn:hover {
	color: #2b2b2b;
  background: #c6c6c6;
}

.mfa-no-syllabus-template {
  opacity: .6;
  pointer-events: none;
}


.mfa-action-line-1,
.mfa-action-line-2 {
  width: auto;
}

/* Keep the current syllabus widget inline with Chat and Load Progress */
.mfa-action-line-1 .mfa-syllabus-row-widget,
.mfa-action-line-1 .mfa-syllabus-current-block,
.mfa-action-line-1 .mfa-syllabus-current-actions {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  width: auto;
  margin: 0;
  gap: .5rem;
}
.faa-cfi-actions.mfa-action-two-lines {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .55rem;
}

.mfa-action-line-1 {
  display: flex;
  align-items: center;
  gap: .5rem;
  flex-wrap: wrap;
}

.faa-cfi-actions.mfa-action-two-lines {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: .55rem;
}

.mfa-action-line {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: .5rem;
  flex-wrap: wrap;
}

.mfa-syllabus-options-row {
  display: block;
  width: auto;
  max-width: 100%;
}

.mfa-syllabus-options-row[hidden] {
  display: none !important;
}

.mfa-syllabus-options-row .mfa-action-line-2 {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: .5rem;
  flex-wrap: wrap;
  width: auto;
	background:#b0aeae;
	padding: 10px;
	border-radius:4px;
}

.mfa-syllabus-options-toggle {
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  border: 0;
  box-shadow: none !important;
  padding: 4px;
  margin: 0;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.95rem;
  font-weight: 600;
  color: #2b2b2b;
  cursor: pointer;
  text-underline-offset: 3px;

  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  line-height: 1.05;
}

.mfa-syllabus-options-label {
  display: block;
  white-space: nowrap;
}

.mfa-syllabus-options-chevron {
  display: block;
  font-size: 0.8rem;
  line-height: 1;
  margin-top: 2px;
}

.mfa-syllabus-options-toggle:hover {
  color: #b62525 !important;
  background: none !important;
}

.mfa-syllabus-options-toggle:focus-visible {
  background: none !important;
}

.mfa-syllabus-floating-window {
  position: fixed;
  width: min(780px, calc(100vw - 32px));
  max-height: min(820px, calc(100vh - 32px));
  background: #fff;
  border: 1px solid rgba(0,0,0,.18);
  border-radius: 14px;
  box-shadow: 0 18px 45px rgba(0,0,0,.28);
  overflow: hidden;
  z-index: 99005 !important;
}

.mfa-syllabus-window-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  padding: .65rem .85rem;
  background: #1f2937;
  color: #fff;
  cursor: move;
  user-select: none;
}

.mfa-syllabus-window-title {
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: .95rem;
}

.mfa-syllabus-window-actions {
  display: flex;
  align-items: center;
  gap: .35rem;
}

.mfa-syllabus-window-close {
  appearance: none;
  -webkit-appearance: none;
  width: 30px;
  height: 30px;
  border: 0;
  border-radius: 999px;
  background: rgba(255,255,255,.14);
  color: #fff;
  font-size: 1.35rem;
  line-height: 1;
  cursor: pointer;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  text-align: center;
}

.mfa-syllabus-window-close:hover {
  background: rgba(255,255,255,.25);
}

.mfa-syllabus-window-body {
  padding: 1rem;
  max-height: calc(min(820px, calc(100vh - 32px)) - 52px);
  overflow: auto;
}

body.mfa-syllabus-dragging {
  user-select: none;
}

.mfa-syllabus-history-floating-window .mfa-syllabus-window-head {
  background: #666666;
  color: #fff;
}

.mfa-syllabus-window-actions {
  display: flex;
  align-items: center;
  gap: .35rem;
}

.mfa-syllabus-window-reduce,
.mfa-syllabus-window-expand,
.mfa-syllabus-window-close {
  appearance: none;
  -webkit-appearance: none;
  width: 30px;
  height: 30px;
  border: 0;
  border-radius: 999px;
  background: rgba(255,255,255,.14);
  color: #fff;
  font-size: 1.05rem;
  line-height: 1;
  cursor: pointer;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  text-align: center;
}

.mfa-syllabus-window-close {
  font-size: 1.35rem;
}

.mfa-syllabus-window-reduce:hover,
.mfa-syllabus-window-expand:hover,
.mfa-syllabus-window-close:hover {
  background: rgba(255,255,255,.28);
}

/* Full-screen syllabus window */
.mfa-syllabus-floating-window.is-full {
  left: 12px !important;
  top: 12px !important;
  width: calc(100vw - 24px) !important;
  height: calc(100vh - 24px) !important;
  max-height: calc(100vh - 24px) !important;
  border-radius: 14px;
}

.mfa-syllabus-floating-window.is-full .mfa-syllabus-window-body {
  max-height: calc(100vh - 88px) !important;
}

/* Reduced syllabus window */
.mfa-syllabus-floating-window.is-mini {
  width: 360px !important;
  height: auto !important;
  max-height: none !important;
}

.mfa-syllabus-floating-window.is-mini .mfa-syllabus-window-body {
  display: none !important;
}

.mfa-syllabus-floating-window.is-mini .mfa-syllabus-window-head {
  border-radius: 14px;
}
.faa-school-chat-open:hover,
.faa-cfi-chat-open:hover {
	background: #36a7e9 !important;
}
.faa-staff-chat-open:hover{
    background: #bc8339 !important;
}
.faa-cfi-load-progress:hover {
	background: linear-gradient(180deg, #5f5f5f, #1c1c1c)!important;
	color:#fff;
}
.faa-cfi-accept,
.faa-school-accept{
	background-image: linear-gradient(180deg, #FFFFFF 0%, #ABFF9B 100%);
	}

.faa-cfi-accept:hover,
.faa-school-accept:hover{ 
    background-image: linear-gradient(180deg, #FFFFFF 0%, #1FBD16 100%);
    box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.3)!important;
}

.faa-cfi-reject,
.faa-cfi-unlink-student,
.faa-school-reject,
.faa-school-unlink-student,
.mfa-school-staff-unlink-btn,
.mfa-cfi-school-unlink-btn{
	background-image: linear-gradient(180deg, #FFFFFF 0%, #FFB0B0 100%);
	}
.faa-cfi-reject:hover,
.faa-cfi-unlink-student:hover,
.faa-school-unlink-student:hover,
.mfa-school-staff-unlink-btn:hover,
.mfa-cfi-school-unlink-btn:hover{
    background-image: linear-gradient(180deg, #FFFFFF 0%, #FF2222 100%);
   box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.3)!important;
}

@media screen and (max-width:480px){
.faa-cfi-chat-open {
	font-size:1rem;
	width:2.5rem;
	height:2.5rem;
}
.faa-cfi-load-progress,
.faa-cfi-accept,
.faa-cfi-reject,
.faa-cfi-unlink-student,
.faa-school-accept,
.faa-school-reject,
.faa-school-unlink-student,
.mfa-school-staff-unlink-btn,
.mfa-cfi-school-unlink-btn{
	padding:10px;
	font-size:0.9rem;
}
}
.cfi-msg.cfi-msg-instructor.cfi-msg-note-reply .cfi-msg-body {
  border-left: 3px solid #e2b100;
}
#faa-cfi-console .faa-admin-console {
	max-width:1200px !important;
	align-self:center;
}
/* === CFI global chat overlay: styles =========================== */

.mfa-cfi-chat-toggle,
.mfa-school-chat-toggle{
        position: fixed;
        left: 0;                 /* initial X */
  top: 9.6rem;                /* initial Y */
  right: auto !important;     /* prevent stretch */
  bottom: auto !important;
        z-index: 9998;
        display: inline-flex;
        align-items: center;
        gap: 0.35rem;
        padding: 0.45rem 0.75rem;
        border-radius: 999px;
        border: none;
        cursor: pointer;
        font-size: 0.9rem;
		  font-weight:600;
        background: #29739d; 
        color: #ffffff;
        box-shadow: 0 10px 25px rgba(15, 23, 42, 0.35);
          user-select: none;
  touch-action: none;          
  cursor: grab;
  backface-visibility: hidden;
  transform: translateZ(0);
      }
.mfa-staff-chat-toggle{
	background: #8b550f; 
}
#mfa-cfi-chat-toggle.is-dragging,
#mfa-school-chat-toggle.is-dragging{ cursor: grabbing; }

.mfa-cfi-chat-toggle-icon,
.mfa-school-chat-toggle-icon{
        font-size: 1.1rem;
      }
#mfa-cfi-chat-toggle:hover,
#mfa-school-chat-toggle:hover{
	background: #36a7e9;
	color:#ffffff;
	font-weight:800;
}
#mfa-staff-chat-toggle:hover{
	background: #bc8339;
	color:#ffffff;
	font-weight:800;
}
#mfa-cfi-chat-student-menu.mfa-cfi-chat-student-menu,
#mfa-school-chat-student-menu.mfa-school-chat-student-menu,
#mfa-staff-chat-thread-menu{
  position: fixed;         
  left: 0;
  bottom: 0;
  min-width: 220px;
  height:max-content;
  max-height: 260px;
  overflow-y: auto;
  padding: 0.4rem 0;
  border-radius: 0.75rem;
  background: #2e8dc3b3;
  box-shadow: 0 10px 30px rgba(15,23,42,0.25);
  z-index: 9999;
  font-size: 0.9rem;
}
#mfa-staff-chat-thread-menu{
	background: #ba833cb3;
}
.mfa-cfi-chat-student-menu[hidden],
.mfa-school-chat-student-menu[hidden],
#mfa-staff-chat-thread-menu[hidden]{
  display: none;
}

.mfa-cfi-chat-student-menu-item,
.mfa-school-chat-student-menu-item{
  display: flex;
  align-items: center;
  width: 100%;
  padding: 0.3rem 0.8rem 0.3rem  0;
  border: none;
  background: #ffffffde;
	color:#262626;
  cursor: pointer;
  text-align: left;
	margin: 8px 0;
}

#mfa-staff-chat-thread-menu .mfa-cfi-chat-student-menu-item:hover,
#mfa-staff-chat-thread-menu .mfa-school-chat-student-menu-item:hover{
	background: #8b550fad!important;
	color:#ffffff!important;
}
.mfa-cfi-chat-student-menu-item:hover,
.mfa-school-chat-student-menu-item:hover{
  background: #29739dba!important;
	color:#ffffff !important;
}

.mfa-cfi-chat-student-menu-dot,
.mfa-school-chat-student-menu-dot{
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 999px;
  margin: 0 0.55rem;
  flex-shrink: 0;
  background: transparent;
}

.mfa-cfi-chat-student-menu-item.unread .mfa-cfi-chat-student-menu-dot,
.mfa-school-chat-student-menu-item.unread .mfa-school-chat-student-menu-dot{
  background: #ef4444;          /* bright red dot */
}

.mfa-cfi-chat-student-menu-name,
.mfa-school-chat-student-menu-name{
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: 400;
}

.mfa-cfi-chat-student-menu-item.unread .mfa-cfi-chat-student-menu-name,
.mfa-school-chat-student-menu-item.unread .mfa-school-chat-student-menu-name{
  font-weight: 600;
}
.mfa-cfi-chat-student-menu-name:hover{
	font-weight:900 !important;
	color: #ffffff!important;
}
.mfa-cfi-msg-meta::after,
.mfa-school-msg-meta::after{
  content: none;
}
.mfa-cfi-chat-student-menu-empty,
.mfa-school-chat-student-menu-empty{
  padding: 0.4rem 0.8rem;
  color: #555961;
  font-size: 0.85rem;
}
.mfa-cfi-chat-student-menu-empty:hover,
.mfa-school-chat-student-menu-empty:hover{
  opacity:0.9;
}
/* Red dot on the CFI chat toggle */
.mfa-cfi-chat-toggle-badge,
.mfa-school-chat-toggle-badge{
  position: absolute;
  right: 2px;
  bottom: -2px;
  min-width: 14px;
  height: 14px;
  padding: 0 3px;
  border-radius: 999px;
  background: #e53935;
  color: #fff;
  font-size: 10px;
  line-height: 14px;
  text-align: center;
  display: none;
}

.mfa-cfi-chat-overlay,
.mfa-school-chat-overlay{
  position: fixed;
  right: 0;
  bottom: 0; 
  width: min(520px, 100vw - 2.5rem);
  z-index: 9999;
  display: none;
}
.mfa-cfi-chat-overlay.is-open,
.mfa-school-chat-overlay.is-open{
        display: block;
      }
/* One source of truth for the “header/top offset” used in NORMAL mode */
:root{ --mfa-chat-top: 8.7rem; }          /* default (>= 1281 and also your 1919/1920 case) */
@media (max-width:1280px){ :root{ --mfa-chat-top: 7.4rem; } }
@media (max-width:1024px){ :root{ --mfa-chat-top: 6.8rem; } }
@media (max-width:728px){  :root{ --mfa-chat-top: 5rem; } }
@media (max-width:480px){  :root{ --mfa-chat-top: 5.6rem; } }


/* NORMAL only (open, not mini, not full): give wrapper a real height so panel 100% works */
#mfa-cfi-chat-overlay.is-open:not(.is-mini):not(.is-full),
#mfa-school-chat-overlay.is-open:not(.is-mini):not(.is-full),
#mfa-staff-chat-overlay.is-open:not(.is-mini):not(.is-full){
  height: calc(100vh - var(--mfa-chat-top, 0px) - 8px);
	left: auto !important;
  right: 0 !important;
  bottom: 0 !important;
}
/* >=1920px (your max-width:1919.98 rules do NOT apply at 1920) */
@media (min-width:1920px){
  #mfa-cfi-chat-toggle{ top: 8.7rem; }
  #mfa-cfi-chat-overlay{ top: 8.7rem !important; }

  #mfa-school-chat-toggle{ top: 8.7rem; }
  #mfa-school-chat-overlay{ top: 8.7rem !important; }

  #mfa-staff-chat-toggle{ top: 8.7rem; }
  #mfa-staff-chat-overlay{ top: 8.7rem !important; }
}

@media (max-width:1919.98px){   #mfa-cfi-chat-toggle{ top: 8.7rem ; } #mfa-cfi-chat-overlay{ top: 8.7rem !important; } }
@media (max-width:1280px){      #mfa-cfi-chat-toggle{ top: 7.4rem ; } #mfa-cfi-chat-overlay{ top: 7.4rem !important; } }
@media (max-width:1024px){      #mfa-cfi-chat-toggle{ top: 6.8rem ; } #mfa-cfi-chat-overlay{ top: 6.8rem !important; } }
@media (max-width:728px){       #mfa-cfi-chat-toggle{ top: 5rem ; }   #mfa-cfi-chat-overlay{ top: 5rem !important; } }
@media (max-width:480px){       #mfa-cfi-chat-toggle{ top: 5.6rem ; } #mfa-cfi-chat-overlay{ top: 5.6rem !important; } }

@media (max-width:1919.98px){   #mfa-school-chat-toggle{ top: 8.7rem ; } #mfa-school-chat-overlay{ top: 8.7rem !important; } }
@media (max-width:1280px){      #mfa-school-chat-toggle{ top: 7.4rem ; } #mfa-school-chat-overlay{ top: 7.4rem !important; } }
@media (max-width:1024px){      #mfa-school-chat-toggle{ top: 6.8rem ; } #mfa-school-chat-overlay{ top: 6.8rem !important; } }
@media (max-width:728px){       #mfa-school-chat-toggle{ top: 5rem ; }   #mfa-school-chat-overlay{ top: 5rem !important; } }
@media (max-width:480px){       #mfa-school-chat-toggle{ top: 5.6rem ; } #mfa-school-chat-overlay{ top: 5.6rem !important; } }

@media (max-width:1919.98px){   #mfa-staff-chat-toggle{ top: 8.7rem ; } #mfa-staff-chat-overlay{ top: 8.7rem !important; } }
@media (max-width:1280px){      #mfa-staff-chat-toggle{ top: 7.4rem ; } #mfa-staff-chat-overlay{ top: 7.4rem !important; } }
@media (max-width:1024px){      #mfa-staff-chat-toggle{ top: 6.8rem ; } #mfa-staff-chat-overlay{ top: 6.8rem !important; } }
@media (max-width:728px){       #mfa-staff-chat-toggle{ top: 5rem ; }   #mfa-staff-chat-overlay{ top: 5rem !important; } }
@media (max-width:480px){       #mfa-staff-chat-toggle{ top: 5.6rem ; } #mfa-staff-chat-overlay{ top: 5.6rem !important; } }


@media screen and (max-width:720px){
#mfa-cfi-chat-overlay,
#mfa-school-chat-overlay,
#mfa-staff-chat-overlay{
  right: 0 !important; 
  left:auto;
  min-height:80vh;
  width: 380px;
	}
}

.mfa-cfi-chat-panel,
.mfa-school-chat-panel,
.mfa-staff-panel{
  width: 100%;
  height: 100%;
  background: #ffffff;
  border-radius: 0.9rem;
  border: 1px solid #e5e7eb;
  box-shadow: 0 18px 45px rgba(15, 23, 42, 0.35);
  display: flex;
  flex-direction: column;
  overflow: hidden; /* log will scroll inside */
}



.mfa-cfi-chat-header-top,
.mfa-school-chat-header-top,
.mfa-cfi-chat-header-row,
.mfa-school-chat-header-row{
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	width:100%;
}
.mfa-cfi-chat-header,
.mfa-school-chat-header,
.mfa-staff-chat-header{
        display: flex;
		  flex-direction: column;
        align-items: center;
        justify-content: space-between;
        padding: 0.75rem 0.9rem;
        border-bottom: 1px solid #e5e7eb;
        background: #edf2f7;
      }
.mfa-staff-chat-panel .mfa-cfi-chat-header,
.mfa-staff-chat-panel .mfa-school-chat-header{
	background: #fff9f1 !important;
      }
.mfa-cfi-chat-header-main,
.mfa-school-chat-header-main{
		  display: flex;
        flex-direction: row;
		  align-items: center;
        gap: 0.5rem;
      }

.mfa-cfi-chat-title,
.mfa-school-chat-title{
        font-size: 0.96rem;
      }
.mfa-cfi-chat-header-top,
.mfa-school-chat-header-top{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

.mfa-cfi-chat-header-actions,
.mfa-school-chat-header-actions{
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

/* Search row hidden via [hidden] */
#mfa-cfi-chat-search-row[hidden],
#mfa-school-chat-search-row[hidden],
#mfa-staff-chat-search-row[hidden]{
  display: none;
}
#mfa-cfi-chat-overlay.is-full,
#mfa-school-chat-overlay.is-full,
#mfa-staff-chat-overlay.is-full{
  top: 0 !important; 
  bottom: 0 !important;
  right: 0 !important; 
  left:0!important;
  width: 100vw !important;
	max-width: 1000px;
  height: 100vh ;
  border-left: none !important;
  border-radius: 0 !important;
  transform: translateX(100%);
	z-index:999999;
}
#mfa-cfi-chat-overlay.is-full.is-open,
#mfa-school-chat-overlay.is-full.is-open,
#mfa-staff-chat-overlay.is-full.is-open{
	transform: translateX(0) !important;
}


/* Ensure inner container stretches if you have one */
#mfa-cfi-chat-overlay.is-full .mfa-cfi-chat-inner,
#mfa-school-chat-overlay.is-full .mfa-school-chat-inner,
#mfa-staff-chat-overlay.is-full .mfa-staff-chat-inner{
  height: 100vh;	
	max-width: 1000px;
}
/* MINI = pinned bottom-right everywhere (including mobile) */
#mfa-cfi-chat-overlay.is-mini,
#mfa-school-chat-overlay.is-mini,
#mfa-staff-chat-overlay.is-mini{
  position: fixed !important;                 /* key */
  top: auto !important;
  bottom: 8px !important;
  left: auto !important;
  right: 8px !important;

  inset: auto 8px 8px auto !important;        /* overrides any inset:0 rules */
  transform: none !important;                 /* overrides translate/center rules */

  height: auto !important;
  max-height: none !important;

  display: flex !important;
  justify-content: flex-end;
  align-items: flex-end;

  width: auto !important;
  min-width: 0 !important;
  max-width: max-content !important;
}

/* Mobile: keep it bottom-right but constrain width */
@media (max-width:480px){
  #mfa-cfi-chat-overlay.is-mini,
  #mfa-school-chat-overlay.is-mini,
  #mfa-staff-chat-overlay.is-mini{
    right: 8px !important;
    left: auto !important;
    bottom: 8px !important;

    max-width: 92vw !important;
    width: auto !important;
  }
}


/* Hide body + search row when mini */
#mfa-cfi-chat-overlay.is-mini #mfa-cfi-chat-log,
#mfa-school-chat-overlay.is-mini #mfa-school-chat-log,
#mfa-cfi-chat-overlay.is-mini #mfa-cfi-chat-form,
#mfa-school-chat-overlay.is-mini #mfa-school-chat-form,
#mfa-cfi-chat-overlay.is-mini #mfa-cfi-chat-search-row,
#mfa-school-chat-overlay.is-mini #mfa-school-chat-search-row,
#mfa-cfi-chat-overlay.is-mini #mfa-cfi-chat-readonly-banner,
#mfa-school-chat-overlay.is-mini #mfa-school-chat-readonly-banner,
#mfa-staff-chat-overlay.is-mini #mfa-staff-readonly,
#mfa-staff-chat-overlay.is-mini #mfa-staff-chat-load,
#mfa-staff-chat-overlay.is-mini #mfa-staff-chat-log,
#mfa-staff-chat-overlay.is-mini #mfa-staff-chat-search-row,
#mfa-staff-chat-overlay.is-mini #mfa-staff-panel,
#mfa-staff-chat-overlay.is-mini #mfa-staff-chat-form{
  display: none !important;
}

/* Make header look like a small pill when mini */
#mfa-cfi-chat-overlay.is-mini .mfa-cfi-chat-header,
#mfa-school-chat-overlay.is-mini .mfa-school-chat-header{
  border-radius: 999px;
}

/* Your existing header layout */
.mfa-cfi-chat-header-top,
.mfa-school-chat-header-top{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

/* Optionally make header look like a pill when mini */
#mfa-cfi-chat-overlay.is-mini .mfa-cfi-chat-header,
#mfa-school-chat-overlay.is-mini .mfa-school-chat-header{
  border-radius: 0.75rem;
}

.mfa-cfi-chat-student-label,
.mfa-school-chat-student-label{
        display: flex;
        align-items: center;
        gap: 0.35rem;
        font-size: 0.8rem;
        color: #4b5563;
		  min-width:0;
      }

.mfa-cfi-chat-student,
.mfa-school-chat-student{
        max-width: 240px;
        font-size: 0.8rem;
      }

.mfa-cfi-chat-close,
.mfa-school-chat-close{
        border: none;
        background: transparent;
        font-size: 1.3rem;
        line-height: 1;
        cursor: pointer;
        color: #6b7280;
      }

.mfa-cfi-chat-close:hover,
.mfa-school-chat-close:hover{
        color: #111827;
      }

.mfa-cfi-chat-log,
.mfa-school-chat-log,
#mfa-staff-chat-log{
  padding: 0.75rem 0.9rem;
  flex: 1 1 auto;
  min-height: 0;       /* critical for flex scrolling */
  overflow-y: auto;
  font-size: 0.95rem;
  background: #ffffff;
}

.mfa-cfi-chat-log-empty,
.mfa-school-chat-log-empty{
        color: #9ca3af;
      }


.mfa-cfi-msg-body,
.mfa-school-msg-body,
.mfa-chat-text{
  white-space: pre-wrap;
  word-wrap: break-word;
  overflow-wrap: anywhere;
}
.mfa-cfi-msg,
.mfa-school-msg,
.mfa-chat-msg{
  width: max-content;
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: auto; 
  max-width: 90%; 
  margin-bottom: 0.5rem;
  border-radius: 0.75rem;
  padding: 0.45rem 0.6rem;
  line-height: 1.4;
}

.mfa-cfi-msg-instructor,
.mfa-school-msg-instructor,
.mfa-chat-msg.mine{
        margin-left: auto;
        background: #29739d;
        color: #ffffff;
	
      }
.mfa-chat-msg.mine{
	 background: #8b550f;
}
.mfa-cfi-msg-student,
.mfa-school-msg-student,
.mfa-chat-msg.other{
        margin-right: auto;
        background: #f3f4f6;
        color: #111827;
      }

.mfa-cfi-msg-meta,
.mfa-school-msg-meta,
#mfa-staff-chat-overlay .mfa-chat-meta{
        display: block;
        margin-top: 0.15rem;
        font-size: 0.7rem;
       
      }
.mfa-cfi-msg-instructor .mfa-cfi-msg-meta,
.mfa-school-msg-instructor .mfa-school-msg-meta,
.mine .mfa-chat-meta{
    color:#ededed;
}
.mfa-cfi-msg-student .mfa-cfi-msg-meta,
.mfa-school-msg-student .mfa-school-msg-meta,
.other .mfa-chat-meta{
    color:#6e6e6e;
}

.mfa-cfi-chat-form,
.mfa-school-chat-form{
        padding: 0.6rem 0.9rem 0.75rem;
        border-top: 1px solid #e5e7eb;
        background: #f9fafb;
        display: flex;
        flex-direction: row;
        gap: 0.4rem;
      }

.mfa-cfi-chat-input-label,
.mfa-school-chat-input-label{
        font-size: 0.75rem;
        color: #6b7280;
		  display: none;
      }

.mfa-cfi-chat-input,
.mfa-school-chat-input{
        width: 100%;
        resize: vertical;
      }

.mfa-cfi-chat-actions,
.mfa-school-chat-actions{
        display: flex;
        justify-content: flex-end;
      }

.mfa-cfi-chat-send,
.mfa-school-chat-send,
.cfi-note-reply-send,
.school-note-reply-send{
	display: block;  padding:.7rem; border:1px solid var(--sc-border,#d9d9de);
  border-radius:.4rem; font-family:'Montserrat',sans-serif; font-weight:600; font-size:clamp(0.95rem,1.6vw,1rem); cursor:pointer; box-shadow:0 0 4px 1px rgba(0,0,0,.29) !important; background: #29739d; color:#fff; }

#mfa-staff-chat-form .mfa-cfi-chat-send,
	#mfa-staff-chat-form .mfa-school-chat-send{
	background: #8b550f;
}
#mfa-staff-chat-form .mfa-cfi-chat-send:hover,
	#mfa-staff-chat-form .mfa-school-chat-send:hover{
	background: #afafaf;
}
.mfa-cfi-chat-send,
.mfa-school-chat-send{
	margin: 0 auto;
}
.cfi-note-reply-send,
.school-note-reply-send{
	margin left:.5rem
}

@media (max-width: 768px) {
  .mfa-cfi-chat-overlay,
	.mfa-school-chat-overlay{
    left: 0.75rem;
    right: 0.75rem;
    width: auto;
    height: min(520px, 85vh);
  }
}

.mfa-cfi-chat-toggle.has-unread .mfa-cfi-chat-toggle-badge,
.mfa-school-chat-toggle.has-unread .mfa-school-chat-toggle-badge{
  display: inline-block;
}
#mfa-cfi-chat-student,
#mfa-school-chat-student,
.mfa-cfi-chat-student,
.mfa-school-chat-student {
  font-size: 0.95rem;
	padding:0.5rem 0.3rem
}
.mfa-cfi-chat-header-row,
.mfa-school-chat-header-row{
    gap:1rem;
}
/* Unread student in the dropdown */
.mfa-cfi-chat-student option.mfa-cfi-student-unread,
.mfa-school-chat-student option.mfa-school-student-unread{
  font-weight: 700;
}

/* Search bar layout in CFI overlay */
.mfa-cfi-chat-search,
.mfa-school-chat-search,
.mfa-staff-chat-search{
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: .8rem;
	padding:.8rem;
	border-radius:8px;
	width:100%;
	background:#ffffff9c;
	box-shadow: 0 1px 5px 0 rgba(0,0,0,.1);
}

.mfa-cfi-chat-search-input,
.mfa-school-chat-search-input,
.mfa-staff-chat-search-input{
  display:flex;
	flex:1;
  min-width: 0;
  width:250px;
  max-width: 250px;
  padding: 0.2rem 0.4rem !important;
  font-size: 0.85rem;
}

.mfa-cfi-chat-search-btn,
.mfa-school-chat-search-btn{
  font-size: 0.8rem;
  padding: 0.2rem 0.5rem;
}

/* Student messages: classic yellow, dark text */
#mfa-cfi-chat-log .mfa-cfi-msg-student span.mfa-cfi-search-hit,
#mfa-school-chat-log .mfa-school-msg-student span.mfa-school-search-hit,
#mfa-staff-chat-log .other span.mfa-school-search-hit{
  background: yellow;        /* soft yellow */
  padding: 0 1px;
}

/* Instructor messages: lighter, high-contrast patch */
#mfa-cfi-chat-log .mfa-cfi-msg-instructor span.mfa-cfi-search-hit,
#mfa-school-chat-log .mfa-school-msg-instructor span.mfa-school-search-hit,
#mfa-staff-chat-log .mine span.mfa-school-search-hit{
  background: yellow;        /* pale amber / cream */
  color: #111827;             /* override the white bubble text */
  padding: 0 1px;
}
/* Focused message in search navigation */
#mfa-cfi-chat-log .mfa-cfi-msg.mfa-cfi-search-focus,
#mfa-school-chat-log .mfa-school-msg.mfa-school-search-focus,
#mfa-staff-chat-log .mfa-staff-msg.mfa-staff-search-focus{
  outline: 2px ;
  outline-offset: 2px;
}

/* Status text: "3 matches – 1/3" */
.mfa-cfi-chat-search-status,
.mfa-school-chat-search-status{
    text-align: center;
    font-size: 0.7em;
    color: #666;
	font-family:'Montserrat',sans-serif; 
	font-weight:800;
	white-space: pre-line;
}
.mfa-cfi-btn,
.mfa-school-btn,
.mfa-staff-btn{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    line-height: 1;
    box-sizing: border-box;
    border-radius: 9px;
    box-shadow: 0 0 2px 1px rgba(0, 0, 0, 0.2);
    font-size: 18px;
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial,
               "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    font-weight: 600;
	border: 1px solid #29739d;
	color:#29739d;
		background:#f8f8f8;
}
.mfa-staff-btn{
	border: 1px solid #8b550f;
	color: #8b550f;
}
.mfa-cfi-btn:hover,
.mfa-school-btn:hover{
	background:#fff!important;
    color: #4286ad !important;
	 transform: translateY(-3px);
}
.mfa-staff-btn:hover{
	background:#fff!important;
	 transform: translateY(-3px);
	color: #ab7229!important;
}
.mfa-cfi-chat-search-btn,
.mfa-school-chat-search-btn,
#mfa-staff-chat-search-clear,
#mfa-staff-chat-search-next{
	width: 4rem; 
	
}
.mfa-cfi-chat-load-more,
.mfa-school-chat-load-more{
	border:none;
	box-shadow:none !important;
	color: #666;
	text-decoration:none;
}
.mfa-cfi-chat-load-more-disabled,
.mfa-school-chat-load-more-disabled {
	  cursor: default;
  opacity: 0.7;
  pointer-events: none;
	text-decoration: none;
}

/* Read-only mode bits */
.mfa-cfi-chat-readonly-banner,
.mfa-school-chat-readonly-banner {
  padding: 0.4rem 0.75rem;
  font-size: 0.85rem;
  background: #fff7d6;
  border-bottom: 1px solid #f5e1a0;
}

.mfa-cfi-chat-form-readonly .mfa-cfi-chat-input,
.mfa-school-chat-form-readonly .mfa-school-chat-input {
  background: #f9fafb;
  cursor: not-allowed;
}

.mfa-cfi-chat-student-menu-item.archived .mfa-cfi-chat-student-menu-name,
.mfa-school-chat-student-menu-item.archived .mfa-school-chat-student-menu-name {
  opacity: 0.7;
  font-style: italic;
}
#mfa-cfi-chat-root .mfa-cfi-chat-form-readonly .mfa-cfi-chat-input,
#mfa-school-chat-root .mfa-school-chat-form-readonly .mfa-school-chat-input {
  background: #f5f5f5;
  color: #9ca3af;
  cursor: not-allowed;
}

/* Send button when disabled or in readonly form */
#mfa-cfi-chat-root .mfa-cfi-chat-send[disabled],
#mfa-school-chat-root .mfa-school-chat-send[disabled],
#mfa-cfi-chat-root .mfa-cfi-chat-form-readonly .mfa-cfi-chat-send,
#mfa-school-chat-root .mfa-school-chat-form-readonly .mfa-school-chat-send {
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: none;
  box-shadow: none;
  transform: none;
}

/* No hover effect when disabled */
#mfa-cfi-chat-root .mfa-cfi-chat-send[disabled]:hover,
#mfa-school-chat-root .mfa-school-chat-send[disabled]:hover,
#mfa-cfi-chat-root .mfa-cfi-chat-send[disabled]:active,
#mfa-school-chat-root .mfa-school-chat-send[disabled]:active {
  filter: none;
}

/* ===== Staff Chat ===== */

#mfa-staff-chat-overlay .mfa-chat-msg.mfa-msg-new .mfa-chat-text{
  font-weight: 800;
}
#mfa-staff-chat-overlay .mfa-chat-msg.mfa-msg-new{
  filter: brightness(0.98);
}

/* composer pinned */
#mfa-staff-chat-form{ flex:0 0 auto; }

/* Disabled UI for read-only/frozen threads */
.mfa-staff-chat-overlay.is-frozen button[type="submit"],
.mfa-staff-chat-overlay button:disabled,
.mfa-staff-chat-overlay .button:disabled{
  opacity: .45;
  cursor: not-allowed;
  filter: grayscale(35%);
  box-shadow: none;
}

.mfa-staff-chat-overlay textarea:disabled{
  opacity: .75;
  background: rgba(0,0,0,.04);
  cursor: not-allowed;
}
/* The thing you grab */
.mfa-chat-drag-handle{
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
  touch-action: none; /* prevents page scroll while dragging (handle only) */
}
.mfa-chat-drag-handle:active{ cursor: grabbing; }

/* When we drag we rely on left/top */
.mfa-chat-draggable{
  position: fixed; /* must be fixed if you want it to float */
  right: auto !important;
  bottom: auto !important;
}
#mfa-school-staff-invite-send{
  display: inline-flex;
  align-items: center;
  justify-content: center;   
  line-height: 1;
  padding: 0.4rem 1rem;
  background:#000 ;
  border:1px solid rgba(0,0,0,.25);
  color:#fff !important;
	font-weight:600;
  border-radius: 8px;
  text-decoration:none !important;
  box-shadow:0 0 2px rgba(0,0,0,.25), inset 0 0 3px rgba(0,0,0,.25);
  transition:transform .06s ease, filter .12s ease, background .12s ease, box-shadow .12s ease;
  cursor:pointer; white-space:nowrap;
}
#mfa-school-staff-invite-send:hover{
	font-weight: 800;
    color: #333!important;
    background-image: linear-gradient(180deg, #FFFFFF 0%, #1FBD16 100%);
    box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.3)!important;
}
.refresh-invite-btn,
.mfa-school-staff-invite-cancel{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 32px;   
  line-height: 1;
  padding: 0.4rem 1rem;
  background:#f9f9f9 ;
  border:1px solid rgba(0,0,0,.25);
  color:#4b4b4b !important;
  border-radius: 8px;
  text-decoration:none !important;
  box-shadow:0 0 2px rgba(0, 0, 0, 0.22), inset 0 0 3px rgba(0,0,0,.25) !important;
  transition:transform .06s ease, filter .12s ease, background .12s ease, box-shadow .12s ease;
  cursor:pointer; white-space:nowrap;
}
.refresh-invite-btn{
	position:fixed;
	left:1rem;
	font-size:1.2rem;
	height:2.5rem !important;
	width:2.5rem !important;
	z-index:99999;	
}
.refresh-invite-btn:hover{
    color:#fff !important;
    background:#b6b6b6 !important;
    font-weight:800;
}
.mfa-school-staff-invite-cancel{
	background-image: linear-gradient(180deg, #FFFFFF 0%, #FFB0B0 100%);
	color:#000 !important;
	font-weight:500 !important;
	}
.mfa-school-staff-invite-cancel:hover{
    background-image: linear-gradient(180deg, #FFFFFF 0%, #FF2222 100%);
   box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.3)!important;
}
.pending-invite-note{
    padding:.4rem;
	background: rgb(255, 252, 221);
    color: rgb(0, 0, 0);
	opacity:.75; 
	font-size:.9rem;
}
#mfa-staff-chat-search-row{
	justify-content:space-between;
}
.search-tool-left-column {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: .5rem;
	width:100%;
}
#mfa-staff-chat-search-close{
	border:none;
	box-shadow:none;
	width:max-content;
	background: transparent;
	color:#e54747;
    display: inline-block;
	position:relative;
	right:-.2rem;
	top:-1.5rem;
}
#mfa-staff-chat-search-close:hover{
	background: transparent !important;
	font-weight:800;
	color:#ff0000 !important;
}
/* Staff “+” menu as fixed overlay */

#mfa-staff-plus-btn{
	font-weight:800;
	font-size:1.5rem;
}
#mfa-staff-panel[hidden] { display: none !important; }


/* tiny dropdown for the + button */
.mfa-staff-plus-menu{
  position: fixed;
  z-index: 2147483647;
  background:#fff;
  border:1px solid rgba(0,0,0,.14);
  border-radius:10px;
  box-shadow: 0 10px 26px rgba(0,0,0,.22);
  padding:.25rem;
  min-width: 220px;
  max-width: min(320px, calc(100vw - 16px));
}
.mfa-staff-plus-menu[hidden]{ display:none !important; }

.mfa-staff-plus-menu button{
  width:100%;
  text-align:left;
	color:#414040;
  border:0;
  background:transparent;
  padding:.55rem .65rem;
  border-radius:8px;
  cursor:pointer;
  display:flex;
  gap:.55rem;
  align-items:center;
	box-shadow:none;
}
.mfa-staff-plus-menu button:hover{
  background: #ffffff;
	font-weight:700;
	border:.5px solid #d5d5d5;
}
.mfa-staff-plus-menu hr{
  margin:.35rem 0;
  opacity:.2;
}

#mfa-staff-panel{
  align-items: center;
  gap: 0.5rem;
  margin-top: .8rem;
	padding:.8rem;
	border-radius:8px;
	width:100%;
	background:#ffffff9c;
	box-shadow: 0 1px 5px 0 rgba(0,0,0,.1);
}
#mfa-staff-inline{
	display: flex;
  align-items: space-between;
	width: 100%;
}
#mfa-staff-chat-root .mfa-staff-inline [data-inline-close="1"] {
	border:none;
	box-shadow:none;
	background: transparent;
	color:#e54747;
    display: inline-block;
	position:relative;
	right:-1rem;
	top:-1.2rem;
}

#mfa-staff-chat-root .mfa-staff-inline [data-inline-close="1"]:hover{
	background: transparent !important;
	font-weight:800;
	color:#ff0000 !important;
}
#mfa-staff-dm-start,
#mfa-staff-cfi-group-create,
#mfa-staff-transfer-leave,
#mfa-staff-members-add,
#mfa-staff-school-dm-start,
#mfa-staff-group-create,
.mfa-startdm{
	width: max-content;
	padding:.7rem;
}
#mfa-staff-panel #mfa-staff-members-add:not(:disabled){
	color:#02ad13;
	font-size:1rem;
}
#mfa-staff-panel #mfa-staff-members-add:not(:disabled):hover{
  filter: brightness(.92);
	color:#02ad13 !important;
}

.mfa-approve-btn{color:#4EBD44; font-weight:800;font-size:.95rem;width:max-content;padding:.7rem;}

.mfa-reject-btn{color:#f60c0c; font-weight:800;font-size:.95rem;width:max-content;padding:.7rem;}
.mfa-approve-btn:hover {
  color: #fff !important; 
	 background-image: linear-gradient(180deg, #FFFFFF 0%, #1FBD16 100%) !important;
}
.mfa-reject-btn:hover {
  color: #fff !important;
	background-image: linear-gradient(180deg, #FFFFFF 0%, #FF2222 100%) !important;
}

.inline-message-text {
	font-size:1rem;
	opacity:.85;
}
/* ===== Student Console Notes ===== */

#studentConsoleBody { position: relative; }

#studentConsolePanel #sc-notes{
  display:flex; flex-direction:column; gap:.6rem; padding: 0 1rem;
  height:100%;
}
/* One-row toolbar */
#studentConsolePanel .notes-toolbar{display:flex;align-items:center;gap:.5rem;flex-wrap:nowrap; justify-content: space-between;}

#studentConsolePanel .notes-tabs{display:flex;gap:.5rem;flex:1 1 auto;min-width:0; max-width: 70%;}

#studentConsolePanel #tab-notes-general{flex:0 0 auto;white-space:nowrap;min-width:0}

#studentConsolePanel #tab-notes-lessons{
  flex: 0 1 auto;
  min-width: 0;
  display: inline-block;         
  white-space: normal;
  overflow-wrap: break-word;     
  hyphens: auto;
  text-wrap: balance;            
  line-height: 1.15;
  padding: .7rem;       
  overflow: hidden;           
}

#studentConsolePanel .notes-tabs [role="tab"]{flex: 0 0 auto;
   min-width:0; line-height:1.15}

#studentConsolePanel .notes-tabs [role="tab"]{
  padding:.7rem; border:1px solid var(--sc-border,#d9d9de);
  background:#fff; border-radius:.4rem; font-family:'Montserrat',sans-serif; font-weight:600; font-size:clamp(1rem,1.6vw,1.1rem); color: #4B4B4B; cursor:pointer; box-shadow:0 0 4px 1px rgba(0,0,0,.29);
}
#studentConsolePanel .notes-tabs [role="tab"][aria-selected="true"]{
  background-image: linear-gradient(172deg, var(--btnA) 30%, var(--btnB) 100%); color:#fff; box-shadow:0 0 3px 0 rgba(0,0,0,.12); 
}
#studentConsolePanel .notes-title{
  font-family:'Montserrat',sans-serif; font-weight:700; font-size:clamp(1rem,1.6vw,1.1rem);
}
#studentConsolePanel .lesson-link{text-decoration: none;}

#studentConsolePanel .notes-right{
  display:flex;
  align-items:center;
  gap:.5rem;
  flex:0 1 28%;     
  min-width:9rem;  
  justify-content:flex-end;
}

#studentConsolePanel .notes-status{
  justify-self: right; margin:0; font-size:.85rem; line-height:1.15; opacity:.8; 
  flex:0 1 auto;
	max-width: 10rem;
  flex-shrink:999;               
  text-align:right; white-space:normal; overflow:hidden; overflow-wrap:anywhere; 
  display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; line-clamp:2;
}

#studentConsolePanel .notes-right .student-console-btn{flex:0 0 auto;white-space:nowrap}

#studentConsolePanel #sc-notes-area{
  flex:1 1 auto; width:100%;
  resize:none; border:1px solid #e5e7eb; border-radius:.6rem;
  padding:.9rem; font: 500 0.98rem/1.5 ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
  background:#fff;
  min-height: clamp(200px, 40vh, 420px);
}
#studentConsolePanel #sc-notes-area:focus{
  outline: 2px solid var(--cert-accent); outline-offset: 0;
}

  .note-preview{
    position:absolute;z-index:2147483647;pointer-events:auto !important;
    max-width:360px;padding:.6rem .75rem;border-radius:.5rem;background:#fff;color:#111;
    border:1px solid rgba(0,0,0,.08);box-shadow:0 6px 20px rgba(0,0,0,.2);
	  left:-9999px; top:-9999px;
  visibility:hidden; opacity:0; transition:none;cursor: default; 
  }
  .note-preview.is-on{ visibility:visible; opacity:1; }

  .note-preview .np-title{
    font-size: .95rem;
    line-height: 1.2;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .note-preview .np-body{
    max-height: 240px;
    overflow: auto;
    white-space: pre-wrap;
    line-height: 1.35;
    font-size: .9rem;
	  -webkit-overflow-scrolling: touch;
	  cursor: text;
  }

/* keep in your stylesheet */
#sc-notes-wrap{ position:relative; }
.sc-notes-overlay .ns-hi{ background: yellow; }

.lesson-note-ico{ cursor:pointer; opacity:.35; display:inline-block; outline:0; transition:none;}
.lesson-note-ico.has-note{ opacity:1; }

#studentConsolePanel .faa-study-admin tbody td:nth-child(1),
#studentConsolePanel .faa-study-admin tbody td:nth-child(2){
  vertical-align: middle;
}

#studentConsolePanel td.lesson-cell{
  position: relative;
  padding-left: 1.75rem;  
}

#studentConsolePanel td.lesson-cell .lesson-note-ico{
  position: absolute;
  left: .35rem;           
  top: 50%;
  transform: translateY(-50%);
  line-height: 1;
  display: inline-block;
  width: 1.1rem;          
  text-align: center;
}

#studentConsolePanel td.lesson-cell .lesson-title,
#studentConsolePanel td.lesson-cell .lesson-link.lesson-title{
  display: block;
  min-width: 0;
  line-height: 1.3;        
}


#studentConsolePanel .faa-study-admin thead th:nth-child(3),
#studentConsolePanel .faa-study-admin thead th:nth-child(4),
#studentConsolePanel .faa-study-admin thead th:nth-child(5),
#studentConsolePanel .faa-study-admin thead th:nth-child(6),
#studentConsolePanel .faa-study-admin thead th:nth-child(7){
  white-space: normal;         
  text-align: center;
}

#studentConsolePanel .faa-study-admin td.col-center{
	text-align: center;
	align-self:center;
	align-content: center;
	align-items:center;
  white-space: nowrap;
}
/* Overlay styling for compiled notes */
#studentConsolePanel .sc-notes-overlay .ns-lesson-title-line{
  color: var(--ns-lesson-title, #0d47a1);
  text-transform: uppercase;
  font-weight: 600;
}

#studentConsolePanel .sc-notes-overlay .ns-chapter-line{
  color: var(--ns-chapter-title, #5d4037);
  text-transform: uppercase;
  letter-spacing: .02em;
  font-weight: 700;
}


/* Search strip in toolbar */
#studentConsolePanel .notes-search{
  display:flex; align-items:center; gap:.5rem; flex-wrap:wrap;
}
#studentConsolePanel #notes-search-scope{ max-width:8rem; align-self: stretch;padding: 10px;}
@media (max-width:480px){
  #studentConsolePanel .notes-toolbar{
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "tabs   tabs"
      "search search"
      "status actions";
    gap: .5rem .6rem;
    align-items: center;
  }
  #studentConsolePanel .notes-tabs   { grid-area: tabs;   min-width: 0; max-width: 100%; }
  #studentConsolePanel .notes-search { grid-area: search; }
  #studentConsolePanel .notes-status { grid-area: status; min-width: 0; max-width: 60vw; }
  #studentConsolePanel .notes-right  {
    grid-area: actions;
    justify-self: end;
    display: inline-flex;
    gap: .45rem;
    min-width: 0;
  }
	#studentConsolePanel #notes-search-scope{ max-width:6rem;}
  #studentConsolePanel #notes-search-q{ min-width: 0; width: 100%; }
}

#studentConsolePanel #notes-search-q{ flex:1 1 220px; min-width:14ch; }

#studentConsolePanel .ns-close {border:0;background:transparent;font-size:1rem;color: red; cursor:pointer;line-height:1;padding:.1rem .35rem;border-radius:6px;box-shadow:0 0 4px 1px rgba(0,0,0,.32);}
#studentConsolePanel .ns-close:hover{background: red; color: #fff;box-shadow:0 0 3px 0 rgba(0,0,0,.12);}

/* Lessons meta row */
#studentConsolePanel #notes-panel-lessons .nl-meta{
  display:flex; align-items:center; gap:.75rem; flex-wrap:wrap; margin:.5rem 0;
}
#studentConsolePanel #notes-panel-lessons .nl-meta label{
  display:flex; align-items:center; gap:.35rem;
}

/* Lessons list */
#studentConsolePanel #notes-panel-lessons .nl-list .nl-row{
  display:grid; grid-template-columns: 1fr auto; align-items:center;
  padding:.4rem .5rem; border-bottom:1px solid #eceff2;
}
#studentConsolePanel #notes-panel-lessons .nl-list .nl-title a{
  text-decoration:none;
}
#studentConsolePanel #notes-panel-lessons .nl-empty{
  padding:.5rem; color:#666; font-style:italic;
}


#studentConsolePanel [hidden] { display: none !important; }

#sc-notes-discussions {
  margin-bottom:1.5rem;
  padding: 0.5rem 0;
  border-top: 1px solid #ddd;
  min-height: 0;    
  overflow-y: visible;
}
#sc-notes-discussions.has-notes {
  min-height: clamp(300px, 70vh, 620px); 
	max-height: 100vh;
  overflow-y: auto;
}
.notes-discussions-header{
	padding-left:0.1rem;
}
.notes-share-actions{
	margin:.5rem 0;
}
.notes-share-btn {
	margin-right:0.3rem;
	min-width: 8rem;
	font-family: 'Montserrat', sans-serif !important;
    font-weight: 600 !important;;
    font-size: 0.9rem !important;;
	color: #676767 !important;
}

#studentConsolePanel[data-cert="spl"] .notes-share-btn .sc-svg { color:#4EBD44; }
#studentConsolePanel[data-cert="rpl"] .notes-share-btn .sc-svg { color:#AD49FF; }
#studentConsolePanel[data-cert="ppl"] .notes-share-btn .sc-svg { color:#398FF3; }
#studentConsolePanel[data-cert="cpl"] .notes-share-btn .sc-svg { color:#FFB013; }

#studentConsolePanel .notes-discussion-answer-wrap { background:#fffef1ff; border-left: 3px solid #e2b100 !important; border:0.5px solid #bdbc44;}

.notes-discussion {
	margin-top:.7rem;
	border-radius: 12px;
	background: #eaeaea8a;
	padding: 0.7rem;
}

.notes-discussion-head{
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}

.notes-discussion-title {
  font-size: 0.85rem;
  font-weight: 600;
}

@media (max-width:480px){
.notes-discussion-title {
    max-width: 65%;
}
}

.notes-discussion-delete {
	margin-left:.5rem;
}
.notes-discussion-snippet,
.notes-discussion-answer{
	font-size:.95rem;
	font-family: inherit;
	
}
.cfi-connect-toggle,
.notes-discussion-toggle,
.cfi-msg-toggle,
.mfa-cfi-msg-toggle{
 font-size: 1.3rem;
 border: none;
 padding: 0;
 cursor: pointer;
 box-shadow:none !important;
}

.notes-discussion-answer-wrap{
	font-size:.95rem;
	font-family: inherit;
	padding:.5rem;
	border-radius:12px;
}

/*=============Syllabus Panel=================*/

.mfa-student-syllabus-panel{
	padding: 0 1rem;
}

.mfa-student-status-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 84px;
  padding: 4px 9px;
  border-radius: 999px;
  font-size: .78rem;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
}

.mfa-status-complete {
  background: #e8f7ec;
  color: #16803a;
}

.mfa-status-needs-work {
  background: #fdecec;
  color: #b62525;
}

.mfa-status-not-done {
  background: #eeeeee;
  color: #555;
}

.mfa-student-syllabus-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 10px;
}

.mfa-student-syllabus-title-wrap {
  display: flex;
  align-items: center;
  gap: .6rem;
  flex-wrap: wrap;
  min-width: 0;
}

.mfa-student-syllabus-title {
  margin: 0;
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  line-height: 1.15;
}

.mfa-syllabus-archive-pill {
  display: inline-flex;
  align-items: center;
  padding: 4px 9px;
  border-radius: 999px;
  background: #eeeeee;
  color: #555;
  font-size: .78rem;
  font-weight: 700;
  white-space: nowrap;
}

.mfa-syllabus-archive-notice {
  padding: 8px 10px;
  margin: 0 0 10px;
  background: #f6f6f6;
  border: 1px solid #ddd;
  border-radius: 8px;
}

.mfa-student-syllabus-access-toggle {
  margin: 0 0 12px;
  border: 1px solid rgba(0,0,0,.12);
  border-radius: 10px;
  background: #fff;
  overflow: hidden;
}

.mfa-student-syllabus-access-toggle summary {
  display: flex;
  align-items: center;
  gap: .45rem;
  padding: 8px 11px;
  cursor: pointer;
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  color: #2b2b2b;
  list-style: none;
}

.mfa-student-syllabus-access-toggle summary::-webkit-details-marker {
  display: none;
}

.mfa-student-syllabus-access-content {
  padding: 10px 11px;
  border-top: 1px solid rgba(0,0,0,.08);
}

.mfa-student-syllabus-access-toggle[open] .mfa-access-caret {
  transform: rotate(180deg);
}

.mfa-access-caret {
  display: inline-flex;
  transition: transform .18s ease;
}

.mfa-student-syllabus-panel {
  position: relative;
}

.mfa-student-syllabus-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.mfa-student-syllabus-title {
  margin: 0;
  line-height: 1.15;
}

.mfa-student-syllabus-top-actions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.mfa-syllabus-access-popover {
  position: absolute;
  top: 48px;
  right: 0;
  z-index: 20;
  width: min(520px, calc(100% - 20px));
  max-height: 70vh;
  overflow: auto;
  background: #fff;
  border: 1px solid rgba(0,0,0,.16);
  border-radius: 14px;
  box-shadow: 0 14px 35px rgba(0,0,0,.22);
}

.mfa-syllabus-access-popover[hidden] {
  display: none !important;
}

.mfa-syllabus-access-popover-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 10px 12px;
  background: #2b2b2b;
  color: #fff;
}

.mfa-syllabus-access-popover-close {
  appearance: none;
  -webkit-appearance: none;
  border: 0;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  background: rgba(255,255,255,.14);
  color: #fff;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  font-size: 1.25rem;
  line-height: 1;
}

.mfa-syllabus-access-popover-close:hover {
  background: rgba(255,255,255,.28);
}

.mfa-syllabus-access-popover-body {
  padding: 12px;
  max-height: calc(70vh - 52px);
  overflow: auto;
}

.mfa-syllabus-access-popover-section + .mfa-syllabus-access-popover-section {
  padding-top: 1.5rem;
  border-top: 1px solid rgb(0 0 0 / 27%);
}

.mfa-syllabus-access-popover-section h4 {
  margin: 0 0 8px;
}

.mfa-syllabus-archive-notice {
  padding: 8px 10px;
  margin: 0 0 10px;
  background: #f6f6f6;
  border: 1px solid #ddd;
  border-radius: 8px;
}

.mfa-syllabus-access-popover-section{
	padding:1rem
}
.mfa-syllabus-access-explain {
  margin: 0 0 15px;
  font-size: 1.1rem;
  line-height: 1.35;
  color: #4f4e4e;
}

.mfa-syllabus-access-panel {
	background: #fffaf3;
	padding:12px; 
	margin-bottom:5px; 
	border:1px solid #333; 
	border-radius:10px;
}

.mfa-student-syllabus-history {
  margin: 0 0 14px;
}

.mfa-history-summary {
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 700;
  list-style: none;
}

.mfa-history-summary::-webkit-details-marker {
  display: none;
}

.mfa-history-caret {
  display: inline-flex;
  transition: transform .18s ease;
  transform-origin: center;
}

details[open] > .mfa-history-summary .mfa-history-caret {
  transform: rotate(90deg);
}

.mfa-student-history-list {
  margin-top: 8px;
  padding: 8px 0;
}

.mfa-student-history-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 0;
  border-top: 1px solid rgba(0,0,0,.08);
}

.mfa-student-history-row:first-child {
  border-top: 0;
}

.mfa-student-history-main {
  min-width: 0;
}

.mfa-student-history-title {
  font-weight: 700;
  line-height: 1.25;
}

.mfa-student-history-current {
  font-weight: 500;
  opacity: .75;
  margin-left: 4px;
}

.mfa-student-history-meta {
  margin-top: 3px;
  font-size: 12px;
  opacity: .75;
  line-height: 1.35;
}

.mfa-student-history-main {
  flex: 1 1 auto;
}

.mfa-student-open-old-syllabus {
  margin-left: auto;
}


.mfa-syllabus-replacement-decision {
  background: #fff;
  border-radius: 8px;
  padding: 8px 12px;
  font-weight: 700;
  cursor: pointer;
  margin:0.7rem 10px 0.3rem 0;
}

/* Approve / Accept */
.mfa-syllabus-replacement-decision[data-decision="approve"] {
  color: #00c700;
  border: 1px solid green;
}

.mfa-syllabus-replacement-decision[data-decision="approve"]:hover {
  background: green;
  color: #fff;
}

/* Decline */
.mfa-syllabus-replacement-decision[data-decision="decline"] {
  color: #b62525;
  border: 1px solid #b62525;
}

.mfa-syllabus-replacement-decision[data-decision="decline"]:hover {
  background: #b62525;
  color: #fff;
}

.mfa-student-syllabus-title-group {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  flex-wrap: wrap;
}

.mfa-syllabus-lesson-acc-controls {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.mfa-student-syllabus-lesson {
  margin: 10px 0;
  padding: 0;
  border: 1px solid #ddd;
  border-radius: 10px;
  overflow: hidden;
  background: #fff;
}

.mfa-student-syllabus-lesson-summary {
  position: relative;
  cursor: pointer;
  font-weight: 700;
  padding: 11px 14px;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  overflow: hidden;
}

.mfa-student-syllabus-lesson-summary::-webkit-details-marker {
  display: none;
}

.mfa-student-syllabus-lesson-summary::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;

  width: var(--lesson-progress, 0%);

  background: linear-gradient(
    135deg,
    rgb(30 228 98 / 48%) 0%,
    rgb(53 191 100 / 29%) 55%,
    rgba(180, 235, 195, 0.12) 100%
  );

  clip-path: polygon(0 0, 100% 0, calc(100% - 24px) 100%, 0 100%);

  z-index: 0;
  transition: width .28s ease;
}

.mfa-student-syllabus-lesson-summary > * {
  position: relative;
  z-index: 1;
}

.mfa-student-syllabus-lesson.is-in-progress {
  border-color: rgba(22, 128, 58, 0.35);
}

.mfa-student-syllabus-lesson.is-completed {
  border-color: #16803a;
}

.mfa-student-syllabus-lesson.is-completed .mfa-student-syllabus-lesson-summary {
  background: #16803a;
  color: #fff;
}

.mfa-student-syllabus-lesson.is-completed .mfa-student-syllabus-lesson-summary::before {
  display: none;
}

.mfa-lesson-title {
  min-width: 0;
}

.mfa-lesson-progress-label {
  flex-shrink: 0;
  font-size: .78rem;
  font-weight: 800;
  padding: 4px 9px;
  border-radius: 999px;
  background: rgba(255,255,255,.9);
  color: #16803a;
  line-height: 1;
}

.mfa-student-syllabus-lesson.is-completed .mfa-lesson-progress-label {
  background: rgba(255,255,255,.18);
  color: #fff;
}

.mfa-student-syllabus-lesson-items {
  margin: 0;
  padding: 12px 16px 12px 32px;
}

.mfa-student-syllabus-item {
  margin-bottom: 8px;
}

.mfa-student-syllabus-lesson-items {
  list-style: none;
  margin: 0;
  padding: 12px 16px;
}

.mfa-student-syllabus-item {
  display: grid;
  align-items: start;
  margin-bottom: 8px;
}

/* Badge rows: keep wrapped text aligned after the badge */
.mfa-student-syllabus-item.mfa-has-status {
  grid-template-columns: auto 1fr;
  column-gap: 8px;
}

.mfa-student-syllabus-item.mfa-has-status .mfa-student-syllabus-item-marker {
  min-width: 86px;
}

/* Bullet rows: no large badge-space gap */
.mfa-student-syllabus-item.mfa-no-status {
  grid-template-columns: auto 1fr;
  column-gap: 4px;
}

.mfa-student-syllabus-item-marker {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
}

.mfa-student-syllabus-item-content {
  min-width: 0;
  line-height: 1.35;
}

.mfa-student-syllabus-bullet {
  display: inline-block;
  font-weight: 700;
  opacity: .65;
}

.mfa-student-status-badge {
  vertical-align: middle;
}

.mfa-student-syllabus-item-note {
  margin-top: 6px;
  padding: 9px 11px;
  background: linear-gradient(135deg, #fffef1 0%, #fff9d9 100%);
  border-left: 3px solid #c9b93f;
  border-radius: 8px;
  font-size: .9rem;
  line-height: 1.35;
  box-shadow: 0 2px 8px rgba(0,0,0,.04);
}

.mfa-student-syllabus-note-label {
  display: block;
  margin-bottom: 3px;
  font-weight: 700;
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .03em;
  color: #555;
}

.mfa-student-syllabus-note-text {
  color: #2b2b2b;
}

/* =========================================================
   TEMPLATE PREVIEW VIEWER
   ========================================================= */

.mfa-template-preview {
    max-width: 1100px;
    margin: 0 auto;
}

.mfa-template-preview-top {
    margin-bottom: 22px;
}

.mfa-template-preview-description {
    color: #4b5563;
    line-height: 1.45;
}

.mfa-template-preview-stage {
    margin: 18px 0;
    border: 1px solid #ccd5e1;
    border-radius: 16px;
    background: #f8fafc;
    overflow: hidden;
}

.mfa-template-preview-stage-summary {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    padding: 16px 18px;
    cursor: pointer;
    background: #eef2f7;
    border-bottom: 1px solid #dbe3ee;
    font-weight: 850;
    color: #162033;
}

.mfa-template-preview-stage-summary small {
    color: #667085;
    font-weight: 600;
}

.mfa-template-preview-stage-body {
    padding: 16px;
}

.mfa-template-preview-lesson {
    margin: 14px 0;
    padding: 14px;
    border: 1px solid #d8dde6;
    border-radius: 14px;
    background: #fff;
}

.mfa-template-preview-stage-check {
    border-color: #b7c7dc;
    background: #fbfdff;
}

.mfa-template-preview-lesson-heading {
    margin-bottom: 12px;
}

.mfa-template-preview-lesson-heading h3 {
    margin: 0 0 4px;
    color: #1f2937;
}

.mfa-template-preview-time {
    color: #667085;
    font-size: 0.88rem;
}

.mfa-template-preview-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-right: 7px;
    padding: 2px 8px;
    border-radius: 999px;
    background: #18283b;
    color: #fff;
    font-size: 0.74rem;
    font-weight: 800;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.mfa-template-preview-info-block {
    margin: 10px 0;
    padding: 10px 12px;
    border: 1px solid #e1e5ec;
    border-radius: 10px;
    background: #fbfcfd;
}

.mfa-template-preview-info-block p {
    margin: 5px 0 0;
    color: #374151;
    line-height: 1.45;
}

.mfa-template-preview-items {
    display: grid;
    gap: 9px;
    margin-top: 12px;
}

.mfa-template-preview-item,
.mfa-template-preview-box {
    border: 1px solid #e0e4ea;
    border-radius: 12px;
    background: #fff;
    padding: 11px 12px;
}

.mfa-template-preview-ground-item {
    border-left: 4px solid #3f6f9f;
}

.mfa-template-preview-flight-item {
    border-left: 4px solid #446b3c;
}

.mfa-template-preview-study-box {
    border-left: 4px solid #7c5c2f;
    background: #fffaf3;
}

.mfa-template-preview-observation-box {
    border-left: 4px solid #bdbc44;
    background: #fffef1;
}

.mfa-template-preview-completion-box {
    border-left: 4px solid #18283b;
    background: #f8fbff;
}

.mfa-template-preview-item-title,
.mfa-template-preview-box-title {
    font-weight: 800;
    color: #1f2937;
}

.mfa-template-preview-check {
    color: #667085;
    margin-right: 6px;
}

.mfa-template-preview-item-details,
.mfa-template-preview-box-help {
    margin-top: 5px;
    color: #4b5563;
    line-height: 1.42;
}

.mfa-template-preview-future-textarea {
    margin-top: 10px;
    min-height: 70px;
    padding: 10px;
    border: 1px dashed #b7bdc9;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.7);
    color: #667085;
    font-style: italic;
}

.mfa-template-preview-completion-standards p {
    margin: 5px 0 0;
    color: #374151;
    line-height: 1.42;
}

.mfa-template-preview-certification {
    margin-top: 12px;
    padding: 12px;
    border: 1px solid #d8e0eb;
    border-radius: 10px;
    background: #fff;
}

.mfa-template-preview-certification p {
    margin: 5px 0 10px;
    color: #374151;
    line-height: 1.42;
}

.mfa-template-preview-cert-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    color: #4b5563;
    font-size: 0.9rem;
}

.mfa-template-preview-empty {
    color: #667085;
    font-style: italic;
}

@media (max-width: 800px) {
    .mfa-template-preview-stage-summary,
    .mfa-template-preview-cert-grid {
        grid-template-columns: 1fr;
        display: grid;
    }
}

/* Grouped Ground / Flight checklist boxes */

.mfa-template-preview-checklist-box {
    border: 1px solid #e0e4ea;
    border-radius: 12px;
    background: #fff;
    overflow: hidden;
}

.mfa-template-preview-ground-group {
    border-left: 4px solid #3f6f9f;
}

.mfa-template-preview-flight-group {
    border-left: 4px solid #446b3c;
}

.mfa-template-preview-checklist-title {
    padding: 10px 12px;
    background: #f8fafc;
    border-bottom: 1px solid #edf0f4;
    font-weight: 850;
    color: #1f2937;
}

.mfa-template-preview-checklist-items {
    display: grid;
    gap: 0;
}

.mfa-template-preview-checkline {
    padding: 10px 12px;
    border-bottom: 1px solid #edf0f4;
}

.mfa-template-preview-checkline:last-child {
    border-bottom: 0;
}

.mfa-template-preview-checkline-title {
    display: flex;
    align-items: flex-start;
    gap: 7px;
    color: #1f2937;
    font-weight: 650;
    line-height: 1.35;
}

.mfa-template-preview-check {
    color: #667085;
    flex: 0 0 auto;
    margin-top: 1px;
}

.mfa-template-preview-checkline-details {
    margin: 5px 0 0 24px;
    color: #4b5563;
    font-size: 0.92rem;
    line-height: 1.42;
}

.mfa-template-preview-muted {
    color: #667085;
    font-style: italic;
}
/*=============Syllabus editor=================*/


/* =========================================================
   MOVE / RELOAD FOCUS
   ========================================================= */

.mfa-editor-focus-target {
    outline: 2px solid rgba(25, 99, 180, 0.45);
    box-shadow: 0 0 0 4px rgba(25, 99, 180, 0.08);
    border-radius: 10px;
    transition: box-shadow .25s ease, outline .25s ease;
}


/* =========================================================
   STAGES
   ========================================================= */

.mfa-editor-stages {
    display: grid;
    gap: 18px;
}

.mfa-editor-stage {
    border: 1px solid #ccd5e1;
    border-radius: 16px;
    background: #f8fafc;
    overflow: hidden;
}

.mfa-editor-stage[open] {
    box-shadow: 0 10px 28px rgba(15, 23, 42, 0.08);
}

.mfa-editor-stage-summary {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 18px;
    cursor: pointer;
    background: #eef2f7;
    border-bottom: 1px solid #dbe3ee;
}

.mfa-editor-stage-main {
    display: block;
    min-width: 0;
    flex: 1 1 auto;
}

.mfa-editor-stage-title {
    display: block;
    font-weight: 850;
    color: #162033;
    line-height: 1.25;
}

.mfa-editor-stage-meta {
    display: block;
    margin-top: 3px;
    font-size: 0.86rem;
    color: #667085;
}

.mfa-editor-stage-actions {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    flex: 0 0 auto;
}

.mfa-editor-stage-body {
    padding: 16px;
}

.mfa-stage-header-editor {
    padding: 14px;
    margin-bottom: 16px;
    border: 1px solid #d9e0ea;
    border-radius: 12px;
    background: #fff;
}

.mfa-stage-header-grid {
    display: grid;
    grid-template-columns: 130px minmax(260px, 1fr) 120px 120px;
    gap: 14px;
    align-items: start;
}

.mfa-stage-position-control {
    display: grid;
    grid-template-columns: 62px auto;
    gap: 8px;
    align-items: center;
}

.mfa-stage-position-control input {
    width: 62px;
    min-width: 62px;
}

.mfa-stage-action-btn,
.mfa-stage-icon-btn,
.mfa-stage-apply-position-btn,
.mfa-stage-add-lesson-btn,
.mfa-fixed-stage-btn {
    border: 1px solid #c6d0dd;
    background: #fff;
    color: #1f2937;
    border-radius: 8px;
    cursor: pointer;
    font-weight: 700;
}

.mfa-stage-action-btn {
    padding: 7px 10px;
    font-size: 0.83rem;
}

.mfa-stage-icon-btn {
    width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}

.mfa-stage-apply-position-btn {
    white-space: nowrap;
    padding: 8px 10px;
}

.mfa-stage-add-lesson-btn {
    width: 100%;
    margin-top: 14px;
    padding: 10px 12px;
    border-radius: 10px;
}

.mfa-fixed-stage-btn {
    background: #f8fafc;
    border-color: #cfd6e0;
}

.mfa-stage-action-btn:hover,
.mfa-stage-icon-btn:hover,
.mfa-stage-apply-position-btn:hover,
.mfa-stage-add-lesson-btn:hover,
.mfa-fixed-stage-btn:hover {
    background: #eef2f7;
}

/* =========================================================
   STAGE CHECK
   ========================================================= */

.mfa-stage-add-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-top: 14px;
}

.mfa-stage-add-actions .mfa-stage-add-lesson-btn {
    margin-top: 0;
}

.mfa-stage-add-stage-check-btn {
    background: #18283b;
    border-color: #18283b;
    color: #fff;
}

.mfa-stage-add-stage-check-btn:hover {
    background: #24364d;
}

.mfa-editor-stage-check-lesson {
    border-color: #b7c7dc;
    background: #fbfdff;
}

.mfa-editor-stage-check-lesson > .mfa-editor-lesson-summary {
    background: #eef4fb;
}

.mfa-lesson-type-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-right: 7px;
    padding: 2px 8px;
    border-radius: 999px;
    background: #18283b;
    color: #fff;
    font-size: 0.74rem;
    font-weight: 800;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

@media (max-width: 900px) {
    .mfa-stage-add-actions {
        grid-template-columns: 1fr;
    }
}

/* Lesson description/objectives in header editor */

.mfa-lesson-description-field,
.mfa-lesson-objectives-field {
    grid-column: 1 / -1;
}

.mfa-lesson-description-field textarea,
.mfa-lesson-objectives-field textarea {
    width: 100%;
    box-sizing: border-box;
}

/* Main lesson blocks */

.mfa-lesson-main-blocks {
    display: grid;
    gap: 12px;
    margin: 0 0 14px;
}

.mfa-lesson-main-block {
    border: 1px solid #dfe5ee;
    border-radius: 12px;
    background: #fbfcfd;
    padding: 13px;
}

.mfa-lesson-main-block-title {
    font-weight: 800;
    color: #1f2937;
    margin-bottom: 4px;
}

.mfa-lesson-main-block-desc {
    color: #667085;
    font-size: 0.86rem;
    line-height: 1.35;
    margin-bottom: 9px;
}

.mfa-lesson-main-block textarea {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

.mfa-lesson-observations-block {
    background: #fffef1;
    border-left: 4px solid #bdbc44;
}

.mfa-lesson-completion-block {
    background: #f8fbff;
    border-left: 4px solid #18283b;
}

.mfa-completion-certification-preview {
    margin-top: 12px;
    padding: 12px;
    border: 1px solid #d8e0eb;
    border-radius: 10px;
    background: #fff;
}

.mfa-completion-certification-title {
    font-weight: 800;
    color: #1f2937;
    margin-bottom: 5px;
}

.mfa-completion-certification-preview p {
    margin: 0 0 10px;
    color: #374151;
    line-height: 1.4;
}

.mfa-completion-certification-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    color: #4b5563;
    font-size: 0.9rem;
}

.mfa-completion-certification-grid span {
    color: #667085;
}

@media (max-width: 900px) {
    .mfa-completion-certification-grid {
        grid-template-columns: 1fr;
    }
}
/* =========================================================
   TEMPLATE EDITOR GENERAL FIELDS
   ========================================================= */
.mfa-lesson-viewer-options-field {
    grid-column: 1 / -1;
    padding: 10px 12px;
    border: 1px solid #e1e5ec;
    border-radius: 10px;
    background: #fff;
}

.mfa-template-preview-mode-note {
    margin-top: 3px;
    color: #667085;
    font-size: 0.78rem;
    font-style: italic;
}

.mfa-template-editor {
    position: relative;
    padding-right: 0;
}

.mfa-editor-field {
    margin-top: 10px;
}

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

.mfa-editor-field label {
    display: block;
    margin-bottom: 5px;
    font-weight: 650;
    color: #283241;
}
.mfa-acs-field-target-row-v63820 label {
    margin-bottom: 1px;
}
.mfa-editor-field small {
    display: block;
    margin-top: 4px;
    color: #667085;
    font-size: 0.78rem;
    line-height: 1.35;
}

.mfa-editor-field input[type="text"],
.mfa-editor-field input[type="number"],
.mfa-editor-field textarea,
.mfa-editor-field select,
.mfa-editor-input,
.mfa-editor-textarea,
.mfa-editor-select {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

.mfa-template-editor input[type="checkbox"],
.mfa-template-editor input[type="radio"] {
    display: inline-block !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    height: auto !important;
    margin: 0 !important;
    vertical-align: middle !important;
}

.mfa-template-editor > form label:has(input[type="checkbox"]),
.mfa-template-editor > form label:has(input[type="radio"]) {
    display: inline-flex !important;
    align-items: center !important;
    gap: 7px !important;
    width: auto !important;
    max-width: 100% !important;
    line-height: 1.35 !important;
}

.mfa-inline-check {
    display: inline-flex !important;
    align-items: flex-start !important;
    gap: 8px !important;
    line-height: 1.35;
    cursor: pointer;
}

.mfa-inline-check input[type="checkbox"] {
    margin-top: 3px !important;
    flex: 0 0 auto;
}

.mfa-inline-check span {
    display: block;
}

.mfa-item-position-grid {
    display: grid;
    grid-template-columns: 160px 160px auto;
    gap: 12px 18px;
    align-items: end;
    margin: 0 0 16px;
}

.mfa-item-setup-grid {
    display: grid;
    grid-template-columns: minmax(220px, 1.1fr) minmax(220px, 1fr) minmax(0, 1.4fr);
    gap: 12px 18px;
    align-items: start;
    margin: 0 0 16px;
}

.mfa-item-setup-grid .mfa-editor-field {
    margin-top: 0;
    min-width: 0;
}

.mfa-item-setup-grid .mfa-activity-custom-field input {
    min-width: 0;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

.mfa-item-type-field {
    grid-column: 1 / 2;
}

.mfa-item-setup-grid .mfa-ground-activity-type-field,
.mfa-item-setup-grid .mfa-flight-activity-type-field {
    grid-column: 2 / 3;
}

.mfa-item-setup-grid .mfa-activity-custom-field {
    grid-column: 3 / 4;
}

.mfa-item-setup-grid [hidden] {
    display: none !important;
}

/* =========================================================
   REQUIRED ITEM SELECTOR
   ========================================================= */

.mfa-template-editor .mfa-required-item-selector .mfa-required-choice {
    display: flex !important;
    align-items: flex-start !important;
    width: 100% !important;
    max-width: 100% !important;
    gap: 8px !important;
    margin: 7px 0 !important;
    padding: 6px 0 !important;
    box-sizing: border-box !important;
    line-height: 1.35 !important;
}

.mfa-template-editor .mfa-required-item-selector .mfa-required-choice input[type="checkbox"] {
    margin-top: 3px !important;
    flex: 0 0 auto !important;
}

.mfa-template-editor .mfa-required-item-selector .mfa-required-choice-text {
    display: block !important;
    min-width: 0 !important;
    flex: 1 1 auto !important;
}

.mfa-template-editor .mfa-required-item-selector .mfa-required-choice-code {
    display: block !important;
    width: 100% !important;
    font-size: .78rem !important;
    color: #666 !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-overflow: unset !important;
    margin-bottom: 2px !important;
}

.mfa-template-editor .mfa-required-item-selector .mfa-required-choice-title {
    display: block !important;
    width: 100% !important;
    color: #222 !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
}

.mfa-editor-item-type-ground_item {
    border-left: 4px solid #3f6f9f;
}

.mfa-editor-item-type-flight_item {
    border-left: 4px solid #446b3c;
}

.mfa-editor-item-type-observation_box {
    border-left: 4px solid #bdbc44;
    background: #fffef1;
}

.mfa-editor-item-type-completion_box {
    border-left: 4px solid #18283b;
    background: #f8fbff;
}

.mfa-item-helper-box {
    margin-top: 10px;
    padding: 10px 12px;
    border-radius: 10px;
    font-size: 0.86rem;
    line-height: 1.35;
}

.mfa-observation-helper-box {
    background: #fffef1;
    border: 1px solid #e3df99;
    color: #4f4b16;
}

.mfa-add-item-cert-preview,
.mfa-completion-certification-preview {
    margin-top: 12px;
    padding: 12px;
    border: 1px solid #d8e0eb;
    border-radius: 10px;
    background: #fff;
}

.mfa-completion-certification-title {
    font-weight: 800;
    color: #1f2937;
    margin-bottom: 5px;
}

.mfa-add-item-cert-preview p,
.mfa-completion-certification-preview p {
    margin: 0 0 10px;
    color: #374151;
    line-height: 1.4;
}

.mfa-completion-certification-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    color: #4b5563;
    font-size: 0.9rem;
}

.mfa-completion-certification-grid span {
    color: #667085;
}

@media (max-width: 900px) {
    .mfa-completion-certification-grid {
        grid-template-columns: 1fr;
    }
}

/* Ground activity type */

.mfa-ground-activity-type-field {
    grid-column: 1 / -1;
}

.mfa-ground-activity-badge,
.mfa-template-preview-activity-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-right: 6px;
    padding: 2px 7px;
    border-radius: 999px;
    background: #eef2f7;
    border: 1px solid #d7dde7;
    color: #334155;
    font-size: 0.72rem;
    font-weight: 800;
    line-height: 1.2;
    white-space: nowrap;
}

.mfa-template-preview-activity-badge {
    margin-right: 7px;
    background: #f3f6fb;
}

.mfa-flight-activity-type-field,
.mfa-activity-custom-field {
    grid-column: 1 / -1;
}

.mfa-required-task-filter {
    padding: 8px 10px;
    border: 1px solid #e1e5ec;
    border-radius: 8px;
    background: #fff;
}

.mfa-required-task-filter select {
    width: 100%;
    max-width: 520px;
}

.mfa-required-choice[hidden] {
    display: none !important;
}

.mfa-required-choice-wrap {
    padding: 7px 0;
    border-bottom: 1px solid #e5e7eb;
}

.mfa-required-choice-wrap:last-child {
    border-bottom: 0;
}

.mfa-required-subitems {
    display: grid;
    grid-template-columns: 1fr;
    gap: 6px;
    margin: 8px 0 4px 30px;
    padding: 8px 10px;
    border-left: 3px solid #d8dee8;
    background: #fff;
    border-radius: 8px;
}

.mfa-required-subitem-choice {
    display: grid !important;
    grid-template-columns: auto 1fr;
    align-items: start;
    gap: 7px;
    width: 100%;
    margin: 0;
    font-size: 0.9rem;
    line-height: 1.35;
    color: #374151;
}

.mfa-required-subitem-choice input[type="checkbox"] {
    margin-top: 3px !important;
}

.mfa-required-subitem-choice span {
    display: block;
    min-width: 0;
    white-space: normal;
    overflow-wrap: anywhere;
}

.mfa-required-choice-wrap[hidden] {
    display: none !important;
}

.mfa-new-acs-picker {
    grid-column: 1 / -1;
    padding: 10px 12px;
    border: 1px solid #e1e5ec;
    border-radius: 10px;
    background: #fff;
}

.mfa-new-acs-code-list {
    margin-top: 10px;
    max-height: 260px;
    overflow: auto;
    padding: 8px;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    background: #f8fafc;
}

.mfa-new-acs-choice {
    padding: 7px 0;
    border-bottom: 1px solid #e5e7eb;
}

.mfa-new-acs-choice:last-child {
    border-bottom: 0;
}

.mfa-new-acs-choice[hidden] {
    display: none !important;
}

.mfa-template-preview-title-content {
    display: block;
    min-width: 0;
}

.mfa-template-preview-title-content .mfa-multiline-title {
    display: grid;
    gap: 4px;
}

.mfa-template-preview-title-content .mfa-title-parent {
    display: block;
    font-weight: 800;
    line-height: 1.35;
}

.mfa-template-preview-title-content .mfa-title-child {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: 7px;
    margin-left: 24px;
    margin-top: 4px;
    font-weight: 500;
    line-height: 1.35;
}

.mfa-template-preview-title-content .mfa-title-child-checkbox {
    color: #667085;
    font-weight: 700;
}

.mfa-template-preview-ground-activity-inline {
  position: relative;
  margin: 16px 0 16px 16px;
  padding: 14px 16px 12px 16px;
  background: #f8fbff;
  border: 2px dashed #b8c7da;
  border-radius: 12px;
}

.mfa-template-preview-ground-activity-inline::before {
  position: absolute;
  left: -18px;
  top: 18px;
  width: 12px;
  height: 0;
  border-top: 2px solid #b8c7da;
}

.mfa-template-preview-ground-activity-head {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 6px;
  line-height: 1.3;
}

.mfa-template-preview-activity-badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 999px;
  background: #e9eef6;
  border: 1px solid #cfd8e6;
  font-size: 0.92rem;
  font-weight: 700;
  color: #2f3b52;
  white-space: nowrap;
}

.mfa-template-preview-ground-activity-head strong {
  font-size: 1rem;
  font-weight: 700;
  color: #1f2937;
}

.mfa-template-preview-activity-details {
  margin-top: 2px;
  font-size: 0.98rem;
  line-height: 1.45;
  color: #374151;
}

.mfa-acs-search-input {
  width: 100%;
  max-width: 100%;
  padding: 9px 11px;
  border: 1px solid #cfd8e3;
  border-radius: 8px;
  background: #fff;
  font-size: 0.95rem;
}

.mfa-acs-search-input:focus {
  outline: none;
  border-color: #6f93bf;
  box-shadow: 0 0 0 3px rgba(111, 147, 191, 0.18);
}

.mfa-required-search-wrap {
  margin-bottom: 10px;
}

.mfa-required-element-group {
  margin-top: 12px;
  padding: 10px 10px 8px;
  border: 1px solid #dde5ef;
  border-radius: 10px;
  background: #fff;
}

.mfa-required-element-title {
  margin-bottom: 8px;
  font-weight: 700;
  font-size: 0.92rem;
  color: #2f3b52;
}

.mfa-required-element-group + .mfa-required-element-group {
  margin-top: 14px;
}

.mfa-acs-search-input {
  width: 100%;
  max-width: 100%;
  padding: 9px 11px;
  border: 1px solid #cfd8e3;
  border-radius: 8px;
  background: #fff;
  font-size: 0.95rem;
}

.mfa-acs-search-input:focus {
  outline: none;
  border-color: #6f93bf;
  box-shadow: 0 0 0 3px rgba(111, 147, 191, 0.18);
}

.mfa-required-search-wrap {
  margin-bottom: 10px;
}

.mfa-syllabus-pill-row {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-right: 6px;
    vertical-align: middle;
}

.mfa-syllabus-pill {
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    padding: 2px 7px;
    font-size: 0.74rem;
    font-weight: 600;
    line-height: 1.2;
    border: 1px solid rgba(0,0,0,.12);
    background: #f4f6f8;
    color: #1f2933;
}

.mfa-acs-topic-pill {
    background: #eef5ff;
    border-color: #bdd7f5;
}

.mfa-activity-type-pill {
    background: #f7f7f2;
    border-color: #d8d2b5;
}

.mfa-activity-checkbox-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(145px, 1fr));
    gap: 6px 10px;
    margin-top: 6px;
}

.mfa-activity-checkbox-option {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: .9rem;
}

.mfa-custom-pill-list {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

.mfa-custom-pill-list .mfa-syllabus-pill {
    gap: 5px;
}

.mfa-custom-pill-list button[data-custom-pill-remove],
.mfa-custom-pill-list button[data-new-custom-pill-remove] {
    border: 0;
    background: transparent;
    cursor: pointer;
    font-weight: 700;
    padding: 0 2px;
    line-height: 1;
}

.mfa-acs-covered-cue {
    margin-left: 6px;
    font-size: .78rem;
    color: #777;
    font-style: italic;
    font-weight: 400;
}

.mfa-required-choice-wrap[data-acs-parent-covered="1"] > .mfa-required-choice .mfa-required-choice-title,
.mfa-required-subitem-choice[data-acs-covered="1"] > span {
    color: #777;
    font-style: italic;
}

.mfa-acs-selected-outside-filter {
    background: #fff8d9;
    border-left: 3px solid #d8b23c;
    padding-left: 6px;
}

.mfa-acs-selected-outside-filter::before {
    content: "Selected in this lesson, outside current filter";
    display: block;
    margin: 2px 0 4px;
    font-size: .76rem;
    font-style: italic;
    color: #7a6418;
}

.mfa-editor-item-details-preview {
  display: block;
  margin-top: 3px;
  font-size: .82rem;
  line-height: 1.3;
  color: #555;
  font-weight: 400;
}

.mfa-editor-item-details-preview strong {
  color: #333;
  font-weight: 600;
}


.mfa-study-assignment-new-fields {
    margin-top: 12px;
    padding: 12px;
    border: 1px solid #d9e3f0;
    border-radius: 12px;
    background: #f7fbff;
}

.mfa-study-assignment-new-fields[hidden],
.mfa-study-assignment-new-fields [hidden] {
    display: none !important;
}

.mfa-study-assignment-help {
    margin: 8px 0 0;
    font-size: .85rem;
    color: #5f6b7a;
}

.mfa-study-ref-results {
    margin-top: 8px;
    border: 1px solid #d6dde8;
    border-radius: 10px;
    background: #fff;
    max-height: 220px;
    overflow: auto;
}

.mfa-study-ref-result {
    width: 100%;
    display: block;
    text-align: left;
    padding: 8px 10px;
    border: 0;
    border-bottom: 1px solid #eef1f5;
    background: #fff;
    cursor: pointer;
}

.mfa-study-ref-result:hover {
    background: #f4f8ff;
}

.mfa-study-ref-result strong,
.mfa-study-ref-result small,
.mfa-study-ref-result em {
    display: block;
}

.mfa-study-ref-result small {
    margin-top: 2px;
    opacity: .72;
}

.mfa-study-ref-result em {
    margin-top: 2px;
    font-size: .75rem;
    opacity: .6;
    font-style: normal;
    text-transform: capitalize;
}

.mfa-study-ref-result-empty {
    padding: 8px 10px;
    font-size: .9rem;
    color: #5f6b7a;
}

.mfa-study-ref-selected {
    margin-top: 6px;
    font-size: .85rem;
    font-weight: 600;
    color: #1f4f82;
}

.mfa-og-picker-box {
    margin-top: 8px;
    padding: 10px;
    background: #fff;
    border: 1px solid #d6dde8;
    border-radius: 10px;
}

.mfa-og-all-option {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 700;
    margin-bottom: 10px;
}

.mfa-og-toolbar {
    display: flex;
    gap: 8px;
    align-items: center;
    margin-bottom: 10px;
}

.mfa-og-toolbar input[type="search"] {
    flex: 1;
}

.mfa-og-list {
    max-height: 320px;
    overflow: auto;
    padding-right: 4px;
    border-top: 1px solid #edf1f7;
}

.mfa-og-chapter {
    border-bottom: 1px solid #edf1f7;
    padding: 8px 0;
}

.mfa-og-chapter summary {
    cursor: pointer;
    list-style: none;
}

.mfa-og-chapter summary::-webkit-details-marker {
    display: none;
}

.mfa-og-chapter-check {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 700;
}

.mfa-og-chapter-check em {
    margin-left: auto;
    font-size: .78rem;
    font-style: normal;
    opacity: .65;
}

.mfa-og-lessons {
    margin-top: 8px;
    margin-left: 24px;
    display: grid;
    gap: 6px;
}

.mfa-og-lesson-check {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 6px 8px;
    border-radius: 8px;
}

.mfa-og-lesson-check:hover {
    background: #f4f8ff;
}

.mfa-og-lesson-check strong {
    font-size: .85rem;
}

.mfa-og-selected-summary {
    margin-top: 8px;
    padding: 7px 9px;
    border-radius: 8px;
    background: #eef6ff;
    color: #1f4f82;
    font-size: .88rem;
    font-weight: 700;
}

.mfa-study-assignment-box {
    margin-top: 14px;
    padding: 16px 18px;
    border-radius: 16px;
    border: 1px solid #eadfcd;
    border-left: 5px solid #8b6b2f;
    background: #fffaf3;
}

.mfa-study-assignment-box h4 {
    margin: 0;
    font-size: 1.15rem;
    font-weight: 800;
    color: #1f2937;
}

.mfa-study-assignment-box-head p {
    margin: 6px 0 0;
    color: #68748a;
    font-style: italic;
}

.mfa-study-assignment-placeholder {
    margin-top: 12px;
    padding: 12px 14px;
    border-radius: 10px;
    border: 1px dashed #d8c9ae;
    background: #fff;
    color: #68748a;
    font-style: italic;
}

.mfa-study-assignment-card-list {
    display: grid;
    gap: 10px;
    margin-top: 12px;
}

.mfa-study-assignment-row-card {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 14px;
    border-radius: 12px;
    border: 1px solid #eadfcd;
    background: #fff;
}

.mfa-study-assignment-row-main {
    min-width: 0;
}

.mfa-study-assignment-pill {
    display: inline-flex;
    align-items: center;
    padding: 3px 8px;
    margin-right: 8px;
    border-radius: 999px;
    background: #f1e7d2;
    border: 1px solid #d8c29a;
    color: #5f4216;
    font-size: .76rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .02em;
}

.mfa-study-assignment-row-meta {
    margin-top: 5px;
    color: #68748a;
    font-size: .9rem;
}

.mfa-study-assignment-row-instructions {
    margin-top: 8px;
    color: #374151;
    line-height: 1.4;
}

.mfa-study-assignment-row-delete {
    flex: 0 0 auto;
    font-size: .85rem;
    color: #9b1c1c;
}

.mfa-study-assignment-save-note {
    margin: 8px 0 0;
    font-size: .82rem;
    color: #68748a;
}

.mfa-template-preview-study-row {
    padding: 10px 0;
    border-top: 1px solid rgba(139, 107, 47, .18);
}

.mfa-template-preview-study-row:first-child {
    border-top: 0;
    padding-top: 0;
}

.mfa-template-preview-study-row-head {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.mfa-template-preview-study-pill {
    display: inline-flex;
    align-items: center;
    padding: 3px 8px;
    border-radius: 999px;
    background: #f1e7d2;
    border: 1px solid #d8c29a;
    color: #5f4216;
    font-size: .76rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .02em;
}

.mfa-template-preview-study-meta {
    margin-top: 5px;
    color: #68748a;
    font-size: .92rem;
}

.mfa-template-preview-study-instructions {
    margin-top: 7px;
    color: #374151;
    line-height: 1.4;
}

.mfa-template-preview-study-link {
    margin-top: 7px;
}

.mfa-study-assignment-rendered {
    display: grid;
    gap: 10px;
}

.mfa-study-assignment-rendered-section {
    padding: 10px 12px;
    border-radius: 12px;
    background: rgba(255,255,255,.65);
    border: 1px solid rgba(139, 107, 47, .18);
}

.mfa-study-assignment-rendered-head {
    margin-bottom: 6px;
}

.mfa-study-assignment-type-pill {
    display: inline-flex;
    align-items: center;
    padding: 3px 8px;
    border-radius: 999px;
    background: #f1e7d2;
    border: 1px solid #d8c29a;
    color: #5f4216;
    font-size: .76rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .02em;
}

.mfa-study-assignment-rendered-list {
    list-style: none;
    margin: 6px 0 0;
    padding: 0;
    display: grid;
    gap: 5px;
}

.mfa-study-assignment-rendered-list li {
    display: flex;
    gap: 7px;
    align-items: flex-start;
    line-height: 1.35;
}

.mfa-study-assignment-checkbox {
    flex: 0 0 auto;
    opacity: .8;
}

.mfa-study-assignment-rendered-instructions {
    margin-top: 7px;
    color: #374151;
    line-height: 1.4;
}

.mfa-study-assignment-editor-preview {
    margin-top: 10px;
    padding: 10px;
    border-radius: 12px;
    border: 1px solid #eadfcd;
    background: #fffaf3;
}
/* =========================================================
   TOP PANELS
   ========================================================= */

.mfa-editor-top-panels {
    display: grid;
    grid-template-columns: 1fr;
    gap: 18px;
    margin: 18px 0 24px;
}

.mfa-editor-card {
    border-radius: 12px;
    padding: 18px 18px 16px;
    border: 1px solid #d9d9d9;
    box-sizing: border-box;
}

.mfa-editor-card-setup {
    background: #f3f4f6;
    border-color: #d8dbe1;
}

.mfa-editor-card-permissions {
    background: #fff1f1;
    border-color: #e8caca;
}

.mfa-editor-card-title {
    font-size: 1rem;
    font-weight: 700;
    color: #1f2937;
    margin-bottom: 4px;
}

.mfa-editor-card-desc {
    font-size: 0.92rem;
    color: #5f6b7a;
    margin-bottom: 14px;
}


/* =========================================================
   AUTOSAVE + FIXED TOOLS
   ========================================================= */

.mfa-autosave-status {
    margin: 10px 0 16px;
    padding: 8px 10px;
    border-radius: 8px;
    background: #f3f4f6;
    border: 1px solid #d8dbe1;
    color: #4b5563;
    font-size: 0.9rem;
}

.mfa-autosave-status[data-state="dirty"] {
    background: #fff8e6;
    border-color: #ead28a;
    color: #7a5b00;
}

.mfa-autosave-status[data-state="saving"] {
    background: #eef4ff;
    border-color: #b8cfff;
    color: #244b8f;
}

.mfa-autosave-status[data-state="saved"] {
    background: #eef9f0;
    border-color: #b7dfbf;
    color: #1f6b35;
}

.mfa-autosave-status[data-state="error"] {
    background: #fff1f1;
    border-color: #e6b6b6;
    color: #9b1c1c;
}

.mfa-editor-fixed-tools {
    position: fixed;
    left: 24px;
    z-index: 9999;
    width: 220px;
    padding: 12px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.96);
    border: 1px solid #d9dde5;
    box-shadow: 0 12px 32px rgba(15, 23, 42, 0.14);
    box-sizing: border-box;
}

.mfa-editor-fixed-tools .mfa-autosave-status {
    margin: 0 0 10px;
    padding: 8px 9px;
    border-radius: 9px;
    font-size: 0.82rem;
    line-height: 1.3;
}

.mfa-fixed-tool-btn,
.mfa-fixed-mini-btn {
    width: 100%;
    border: 1px solid #cfd6e0;
    border-radius: 9px;
    background: #f8fafc;
    color: #1f2937;
    cursor: pointer;
    font-weight: 600;
    box-sizing: border-box;
}

.mfa-fixed-tool-btn {
    padding: 9px 10px;
    margin-bottom: 8px;
}

.mfa-fixed-mini-btn {
    padding: 7px 6px;
    font-size: 0.78rem;
}

.mfa-fixed-tool-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 7px;
}

.mfa-fixed-add-btn {
    background: #18283b;
    border-color: #18283b;
    color: #fff;
}

.mfa-fixed-tool-btn:hover,
.mfa-fixed-mini-btn:hover {
    background: #eef2f7;
}

.mfa-fixed-add-btn:hover {
    background: #24364d;
}


/* =========================================================
   LESSON ACCORDION
   ========================================================= */

.mfa-editor-section-heading {
    margin: 26px 0 14px;
}

.mfa-editor-section-heading h3 {
    margin-bottom: 4px;
}

.mfa-editor-section-heading p {
    margin: 0;
    color: #667085;
    font-size: 0.92rem;
}

.mfa-editor-lessons {
    display: grid;
    gap: 14px;
}

.mfa-editor-lesson {
    border: 1px solid #d8dde6;
    border-radius: 14px;
    background: #fff;
    overflow: hidden;
}

.mfa-editor-lesson[open] {
    box-shadow: 0 8px 22px rgba(15, 23, 42, 0.06);
}

.mfa-editor-lesson-summary {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    cursor: pointer;
    background: #f6f7f9;
    border-bottom: 1px solid #e1e5ec;
}

.mfa-editor-lesson-main {
    display: block;
    min-width: 0;
    flex: 1 1 auto;
}

.mfa-editor-lesson-title {
    font-weight: 800;
    color: #1f2937;
}

.mfa-editor-lesson-meta {
    font-size: 0.95rem;
    color: #545c6d;
    margin-right: auto;
    margin-left: 8px;
    word-spacing: 1px;
}

.mfa-editor-lesson-actions {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    flex: 0 0 auto;
}

.mfa-editor-lesson-body {
    padding: 14px;
    background: #fff;
}

.mfa-lesson-action-btn,
.mfa-lesson-icon-btn,
.mfa-item-icon-btn {
    border: 1px solid #ccd4df;
    background: #fff;
    color: #1f2937;
    border-radius: 8px;
    cursor: pointer;
    font-weight: 700;
}

.mfa-lesson-action-btn {
    padding: 7px 10px;
    font-size: 0.83rem;
}

.mfa-lesson-icon-btn,
.mfa-item-icon-btn {
    width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    font-size: 0.95rem;
}

.mfa-lesson-action-btn:hover,
.mfa-lesson-icon-btn:hover,
.mfa-item-icon-btn:hover {
    background: #eef2f7;
}

.mfa-lesson-bottom-add-btn {
    border: 1px solid #ccd4df;
    background: #fff;
    color: #1f2937;
    border-radius: 8px;
    cursor: pointer;
    font-weight: 600;
    padding: 9px 12px;
    margin-top: 12px;
    width: 100%;
}

.mfa-lesson-bottom-add-btn:hover {
    background: #eef2f7;
}


/* =========================================================
   LESSON HEADER EDITOR
   Placement row + title/time layout
   ========================================================= */

.mfa-lesson-header-editor {
    padding: 14px;
    margin-bottom: 14px;
    border: 1px solid #e2e6ee;
    border-radius: 12px;
    background: #f8fafc;
}

.mfa-lesson-header-grid {
    display: grid;
    grid-template-columns: minmax(360px, 1fr) 115px 115px;
    gap: 14px;
    align-items: start;
}

/* Full-width placement row */
.mfa-lesson-placement-field {
    grid-column: 1 / -1;
    margin-bottom: 2px;
}

/* Desktop one-line placement row:
   Stage selector | Stage position | or | Full syllabus position | Apply */
.mfa-lesson-placement-control {
    display: grid;
    grid-template-columns: minmax(260px, 1fr) 105px auto 155px auto;
    gap: 8px;
    align-items: center;
}

.mfa-lesson-placement-control .mfa-lesson-stage-select {
    width: 100%;
    max-width: 100%;
    min-width: 0;
}

.mfa-lesson-target-position {
    width: 105px !important;
    min-width: 105px !important;
    max-width: 105px !important;
}

.mfa-lesson-global-position {
    width: 155px !important;
    min-width: 155px !important;
    max-width: 155px !important;
}

.mfa-placement-or {
    font-size: 0.85rem;
    color: #667085;
    opacity: 0.8;
    text-align: center;
    white-space: nowrap;
    align-self: center;
}

.mfa-lesson-apply-placement-btn {
    white-space: nowrap;
    border: 1px solid #ccd4df;
    background: #fff;
    color: #1f2937;
    border-radius: 8px;
    padding: 8px 11px;
    cursor: pointer;
    font-weight: 700;
}

.mfa-lesson-apply-placement-btn:hover {
    background: #eef2f7;
}

.mfa-lesson-placement-control input:disabled,
.mfa-lesson-placement-control select:disabled {
    opacity: 0.55;
    cursor: not-allowed;
    background: #eef2f7;
}

.mfa-lesson-placement-field small {
    display: block;
    margin-top: 6px;
    color: #667085;
    font-size: 0.78rem;
    line-height: 1.35;
}

/* Lesson title field, supports class or current direct-child order */
.mfa-lesson-title-field,
.mfa-lesson-header-grid > .mfa-editor-field:nth-of-type(2) {
    grid-column: 1 / 2;
}

/* Ground and flight time, equal size */
.mfa-lesson-ground-time-field,
.mfa-lesson-flight-time-field,
.mfa-lesson-header-grid > .mfa-editor-field:nth-of-type(3),
.mfa-lesson-header-grid > .mfa-editor-field:nth-of-type(4) {
    width: 100%;
}

.mfa-lesson-ground-time-field input,
.mfa-lesson-flight-time-field input,
.mfa-lesson-header-grid > .mfa-editor-field:nth-of-type(3) input,
.mfa-lesson-header-grid > .mfa-editor-field:nth-of-type(4) input,
.mfa-lesson-time-input {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
}

/* Time explanation below Ground Time + Flight Time */
.mfa-lesson-time-note {
    grid-column: 2 / 4;
    margin-top: -5px;
    color: #667085;
    font-size: 0.78rem;
    line-height: 1.3;
}

.mfa-lesson-header-note {
    margin: 4px 0 0;
    font-size: 0.84rem;
    color: #667085;
}

/* Legacy lesson position controls, kept harmless */
.mfa-lesson-position-control {
    display: grid;
    grid-template-columns: 62px auto;
    gap: 8px;
    align-items: center;
}

.mfa-lesson-position-control input {
    width: 62px;
    min-width: 62px;
}

.mfa-lesson-apply-position-btn,
.mfa-item-add-pill-btn,
.mfa-add-to-box,
.mfa-replace-box{
    flex: 0 0 auto;
    border: 1px solid #ccd4df;
    background: #fff;
    color: #1f2937;
    border-radius: 8px;
    padding: 8px 10px;
    cursor: pointer;
    font-weight: 700;
    width: max-content;
    white-space: nowrap;
}

.mfa-item-add-pill-btn:hover,
.mfa-add-to-box:hover,
.mfa-item-add-pill-btn:focus,
.mfa-add-to-box:focus{
	background:#12aa12 !important;
	color:#fff !important;
}
.mfa-replace-box:hover,
.mfa-replace-box:focus{
	background:#e51111 !important;
	color:#fff !important;
}

.mfa-lesson-apply-position-btn:hover {
    background: #eef2f7;
}


/* =========================================================
   ITEM CARDS
   ========================================================= */

.mfa-editor-item {
    border: 1px solid #e0e4ea;
    border-radius: 12px;
    margin-bottom: 10px;
    overflow: hidden;
    background: #fff;
}

.mfa-editor-item[open] {
    border-color: #c8d3e0;
}

.mfa-editor-item-summary {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 12px;
    cursor: pointer;
    background: #fbfcfd;
}

.mfa-editor-item-main {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    min-width: 0;
    flex: 1 1 auto;
}

.mfa-editor-item-position {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 28px;
    height: 28px;
    border-radius: 999px;
    background: #eef2f7;
    color: #334155;
    font-size: 0.82rem;
    font-weight: 800;
    flex: 0 0 auto;
}

.mfa-editor-item-title-wrap {
    display: block;
    min-width: 0;
}

.mfa-editor-item-type {
    display: block;
    font-size: 0.76rem;
    font-weight: 700;
    color: #667085;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    margin-bottom: 2px;
}

.mfa-editor-item-title {
    display: block;
    color: #1f2937;
    font-weight: 650;
    line-height: 1.3;
}

.mfa-editor-item-actions {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex: 0 0 auto;
}

.mfa-editor-item-body {
    padding: 14px;
    border-top: 1px solid #edf0f4;
}

.mfa-editor-item-grid {
    display: grid;
    grid-template-columns: 110px 110px minmax(180px, 1fr);
    gap: 12px;
}

.mfa-item-apply-position-btn {
    border: 1px solid #ccd4df;
    background: #fff;
    color: #1f2937;
    border-radius: 8px;
    padding: 8px 10px;
    cursor: pointer;
    font-weight: 700;
    width: max-content;
}

.mfa-item-apply-position-btn:hover {
    background: #eef2f7;
}

.mfa-item-target-lesson,
.mfa-item-target-position {
    max-width: 90px;
}


/* =========================================================
   DANGER BUTTONS
   ========================================================= */

.mfa-danger-icon-btn {
    border-color: #e5b8b8 !important;
    background: #fff5f5 !important;
    color: #9b1c1c !important;
}

.mfa-danger-icon-btn:hover {
    background: #ffe4e4 !important;
    border-color: #d99898 !important;
    color: #7f1111 !important;
}


/* =========================================================
   ADD ITEM DRAWER
   ========================================================= */

.mfa-add-item-drawer {
    position: fixed;
    inset: 0;
    z-index: 10000;
    background: rgba(15, 23, 42, 0.28);
}

.mfa-add-item-drawer[hidden] {
    display: none !important;
}

.mfa-add-item-panel {
    position: absolute;
    right: 0;
    width: min(460px, 94vw);
    height: 85vh;
    overflow: auto;
    background: #fff;
    box-shadow: -18px 0 40px rgba(15, 23, 42, 0.22);
    padding: 20px;
    box-sizing: border-box;
}

.mfa-add-item-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 18px;
    padding-bottom: 14px;
    border-bottom: 1px solid #e1e5ec;
}

.mfa-add-item-header h3 {
    margin: 0 0 4px;
}

.mfa-add-item-header p {
    margin: 0;
    color: #667085;
    font-size: 0.92rem;
}

.mfa-add-item-close {
    width: 34px;
    height: 34px;
    border-radius: 999px;
    border: 1px solid #d8dde6 !important;
    background: #f8fafc;
    cursor: pointer;
    font-size: 1.3rem;
    line-height: 1;
    color: #bb0505;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}

.mfa-add-item-actions {
    display: flex;
    gap: 10px;
    margin-top: 16px;
}

.mfa-add-item-submit {
    flex: 1;
    border: 1px solid #18283b;
    background: #18283b;
    color: #fff;
    border-radius: 10px;
    padding: 10px 12px;
    font-weight: 700;
    cursor: pointer;
}

.mfa-add-item-cancel {
    border: 1px solid #d0d7e2;
    background: #fff;
    color: #1f2937;
    border-radius: 10px;
    padding: 10px 12px;
    font-weight: 700;
    cursor: pointer;
}
.mfa-add-item-cancel:hover,
.mfa-add-item-cancel:focus{
	background:#bb0505 !important;
}
.mfa-add-item-submit:hover,
.mfa-add-item-submit:focus {
	background:green !important;
}
/* Make activity + ACS task feel like the same setup row */

.mfa-editor-item-grid .mfa-ground-activity-type-field,
.mfa-editor-item-grid .mfa-flight-activity-type-field {
    grid-column: span 1;
}

.mfa-required-item-selector {
    grid-column: span 2;
}

.mfa-required-item-selector details {
    margin: 0;
}

.mfa-required-item-selector summary {
    padding: 8px 10px;
}

.mfa-required-task-filter {
    display: grid;
    grid-template-columns: minmax(180px, 260px) 1fr;
    gap: 8px 12px;
    align-items: center;
}

.mfa-required-task-filter label {
    margin: 0 !important;
}

.mfa-required-task-filter select {
    width: 100%;
}

.mfa-required-task-filter small {
    grid-column: 1 / -1;
}
.mfa-syllabus-empty-state {
    max-width: 760px;
    margin: 2rem auto;
    padding: 3rem 2rem;
    text-align: center;
    border: 1px dashed rgba(30, 111, 168, 0.4);
    border-radius: 16px;
    background: rgba(238, 249, 255, 0.7);
}

.mfa-syllabus-empty-state h3 {
    margin-top: 0;
}

.mfa-empty-state-add-stage {
    margin-top: 1rem;
}

.mfa-template-error-message {
    padding: 1rem;
    border-left: 4px solid #b42318;
    background: #fff4f2;
}
/* =========================================================
   DRAWER / FIXED TOOL TOP OFFSETS
   ========================================================= */

@media (max-width: 1919.98px) {
    .mfa-add-item-panel,
    .mfa-editor-fixed-tools {
        top: 11.5rem;
    }
}

@media (max-width: 1280px) {
    .mfa-add-item-panel,
    .mfa-editor-fixed-tools {
        top: 10rem; 
    }
}

@media (max-width: 1024px) {
    .mfa-add-item-panel,
    .mfa-editor-fixed-tools {
        top: 9.5rem;
    }
}

@media (max-width: 728px) {
    .mfa-add-item-panel,
    .mfa-editor-fixed-tools {
        top: 8rem;
    }
}

@media (max-width: 480px) {
    .mfa-add-item-panel,
    .mfa-editor-fixed-tools {
        top: 8.5rem;
    }
}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (min-width: 1160px) {
    .mfa-template-editor {
        padding-right: 210px;
    }
}

@media (max-width: 1150px) {
    .mfa-lesson-header-grid {
        grid-template-columns: minmax(280px, 1fr) 105px 105px;
    }

    .mfa-lesson-placement-control {
        grid-template-columns: minmax(220px, 1fr) 95px auto 135px auto;
    }

    .mfa-lesson-target-position {
        width: 95px !important;
        min-width: 95px !important;
        max-width: 95px !important;
    }

    .mfa-lesson-global-position {
        width: 135px !important;
        min-width: 135px !important;
        max-width: 135px !important;
    }
}

@media (max-width: 1100px) {
    .mfa-stage-header-grid {
        grid-template-columns: 130px 1fr;
    }
}

@media (max-width: 900px) {
    .mfa-editor-fixed-tools {
        position: sticky;
        left: auto;
        width: 100%;
        margin: 12px 0 16px;
    }

    .mfa-editor-stage-summary,
    .mfa-editor-lesson-summary,
    .mfa-editor-item-summary {
        align-items: flex-start;
        flex-wrap: wrap;
    }

    .mfa-editor-stage-actions,
    .mfa-editor-lesson-actions,
    .mfa-editor-item-actions {
        width: 100%;
        justify-content: flex-start;
    }

    .mfa-stage-action-btn,
    .mfa-lesson-action-btn {
        flex: 1;
        width: 100%;
    }

    .mfa-stage-header-grid,
    .mfa-lesson-header-grid,
    .mfa-editor-item-grid {
        grid-template-columns: 1fr;
    }

    .mfa-lesson-placement-field,
    .mfa-lesson-title-field,
    .mfa-lesson-ground-time-field,
    .mfa-lesson-flight-time-field,
    .mfa-lesson-time-note,
    .mfa-lesson-header-grid > .mfa-editor-field:nth-of-type(2),
    .mfa-lesson-header-grid > .mfa-editor-field:nth-of-type(3),
    .mfa-lesson-header-grid > .mfa-editor-field:nth-of-type(4) {
        grid-column: 1 / -1;
    }

    .mfa-lesson-placement-control {
        grid-template-columns: 1fr;
    }

    .mfa-lesson-target-position,
    .mfa-lesson-global-position {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
    }

    .mfa-placement-or {
        text-align: center;
    }

    .mfa-lesson-time-note {
        margin-top: -6px;
    }
}
/*=============Certificate completion request form=================*/

#mfa-endorse { max-width: 820px;}
      #mfa-endorse .mfa-note{
        padding:.8rem 1rem;margin:2rem 2rem;border:1px solid #e5e7eb;border-radius:.5rem;background:#f8fafc;
      }
      #mfa-endorse .mfa-card{
        border:1px solid #e5e7eb;border-radius:.7rem;padding:2rem;background:#fff;
      }
      #mfa-endorse .mfa-status{ display:flex; flex-wrap:wrap; gap:.4rem; margin:.75rem 0 1rem; }
      #mfa-endorse .mfa-pill{
        padding:.25rem .5rem;border-radius:999px;border:1px solid #e5e7eb;background:#fff;font-size:.9rem;
      }
      #mfa-endorse .mfa-pill.ok{ border-color:#c7f0d2; background:#f0fff4; }
      #mfa-endorse .mfa-pill.no{ border-color:#ffe3a3; background:#fff8e6; }
      #mfa-endorse .mfa-pill.bad{ border-color:#fecaca; background:#fee2e2; }
      #mfa-endorse .mfa-pill.info{ border-color:#e5e7eb; background:#f8fafc; }

      #mfa-endorse .mfa-grid{
        display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.75rem; margin:2rem 0;
      }
/* Make the wrapper span the full width of the 2-col grid */
#mfa-endorse .mfa-grid .addr-row{
  grid-column: 1 / -1;               /* spans both 50/50 columns */
  display: grid;
  grid-template-columns: 85fr 15fr;     /* 70% / 30% inside the row */
  gap: .75rem;
  align-items: end;
}

/* Ensure the inner labels don’t try to span full width */
#mfa-endorse .mfa-grid .addr-row .span-2,
#mfa-endorse .mfa-grid .addr-row .span-3{
  grid-column: auto !important;
}

/* Mobile: stack */
@media (max-width: 640px){
  #mfa-endorse .mfa-grid .addr-row{ grid-template-columns: 1fr; }
}


      #mfa-endorse label{ display:block; font-weight:600; color:#111827; }
      #mfa-endorse input[type=text],
      #mfa-endorse input[type=email],
      #mfa-endorse input[type=date],
      #mfa-endorse input[type=tel]{
        margin-top:.35rem; width:100%; padding:.6rem .7rem; border:1px solid #d1d5db; border-radius:.5rem; background:#fff;
      }
      #mfa-endorse .req{ color:#b91c1c; margin-left:2px; }
      #mfa-endorse .mfa-inline{ display:flex; gap:.5rem; align-items:center; }

      /* File input styling */
      #mfa-endorse .mfa-file{ position:relative; }
      #mfa-endorse .mfa-file-input{
        position:absolute; left:-9999px; width:1px; height:1px; opacity:0;
      }
      #mfa-endorse .mfa-file-name{ display:inline-block; margin-left:.5rem; color:#374151; font-size:.9rem; vertical-align:middle; }
      #mfa-endorse .mfa-btn{
        display:inline-block; border:1px solid #d1d5db; background:#f9fafb; padding:.5rem .8rem;; border-radius:.5rem; cursor:pointer; align-self: center;
      }
      #mfa-endorse .mfa-btn:hover{ background:#f3f4f6; }
      
      #mfa-endorse .mfa-btn-primary:hover{ filter:brightness(0.97); }
      #mfa-endorse .mfa-btn-light{ background:#FFF4F4; color: red; box-shadow: 0 0 3px 1px rgba(0, 0, 0, 0.2) !important;}
      
      #mfa-endorse .mfa-hr{ border:0; border-top:1px solid #e5e7eb; margin:1rem 0; }
		
		#mfa-endorse .mfa-btn-light:hover{color:#333;box-shadow: 0 0 1px 0px rgba(0, 0, 0, 0.2) !important;}
      @media (max-width: 820px){
        #mfa-endorse .mfa-grid{ grid-template-columns:1fr; }
        #mfa-endorse .span-1{ grid-column:1 / -1; }
      }

#mfa-endorse { max-width: 980px; }

#mfa-endorse .mfa-grid > label,
#mfa-endorse .mfa-file { min-width: 0; }

#mfa-endorse input[type="text"],
#mfa-endorse input[type="email"],
#mfa-endorse input[type="date"],
#mfa-endorse input[type="tel"]{
  width: 100%;
  min-width: 0;            
  box-sizing: border-box;
}

#mfa-endorse input[type="date"]{
  -webkit-appearance: none;
  appearance: none;
  max-width: 100%;
}

#mfa-endorse .mfa-file label{
  font-size: .95rem;
  line-height: 1.25;
  margin-bottom: .35rem;
}
#mfa-endorse label.mfa-inline-conditions{
  font-size: .95rem;
  font-weight: 400;
  color: red; 
}

@media (min-width: 981px){
  #mfa-endorse .mfa-grid{ gap: 1rem; }
}
/* Green check and text when a file is present */
#mfa-endorse .mfa-file.has-file .mfa-file-name { color:#333; }     
#mfa-endorse .mfa-file.has-file .mfa-file-name::before {
  content:"✓ ";
  font-weight:700;
  color:#5DDA51;                                                     
}

/* Neutral base for primary; red only when .is-danger is set */
#mfa-endorse .mfa-btn-primary{
  background:#111827;  /* slate-900, or your normal brand color */
  color:#fff;
  border-color:#111827;
}
#mfa-endorse .mfa-btn-primary.is-danger{
  background:#dc2626;  /* red-600 */
  border-color:#dc2626;
}
#mfa-endorse .mfa-file.has-file .mfa-btn-light{
  background:#ecfdf5;           /* emerald-50 */
  color:#065f46;
  border-color:#a7f3d0;         /* emerald-200 */
}


#mfa-endorse[data-cert="spl"] .mfa-btn-primary {
	font-weight:600;
  	color:#fff;
	background-color: transparent;
    background-image: linear-gradient(172deg, #5DDA51 30%, #209016 100%);
	box-shadow: 1px 1px 4px 1px rgba(0, 0, 0, 0.4);
    border-radius: 6px 6px 6px 6px;
	border:none;
	padding:.8rem;
}
#mfa-endorse[data-cert="spl"] .mfa-btn-primary:hover {
	background-color: transparent;
    color: #000000;
    background-image: linear-gradient(180deg, #FFFFFF 0%, #4EC95ED6 100%);
	box-shadow: 1px 1px 1px 1px rgba(0, 0, 0, 0.4);
}

#mfa-endorse[data-cert="rpl"] .mfa-btn-primary {
	font-weight:600;
  	color:#fff;
	background-color: transparent;
    background-image: linear-gradient(172deg, #BA67FF 30%, #712CA9 100%);
	box-shadow: 1px 1px 4px 1px rgba(0, 0, 0, 0.4);
    border-radius: 6px 6px 6px 6px;
	border:none;
	padding:.8rem;
}
#mfa-endorse[data-cert="rpl"] .mfa-btn-primary:hover {
	background-color: transparent;
    color: #000000;
    background-image: linear-gradient(180deg, #FFFFFF 0%, #712CA9 100%);
	box-shadow: 1px 1px 1px 1px rgba(0, 0, 0, 0.4);
}

#mfa-endorse[data-cert="ppl"] .mfa-btn-primary {
    font-weight:600;
  	color:#fff;
	background-color: transparent;
    background-image: linear-gradient(172deg, #457FFF 30%, #2053C3 100%);
	box-shadow: 1px 1px 4px 1px rgba(0, 0, 0, 0.4);
    border-radius: 6px 6px 6px 6px;
	border:none;
	padding:.8rem;
}
#mfa-endorse[data-cert="ppl"] .mfa-btn-primary:hover {
	background-color: transparent;
    color: #000000;
    background-image: linear-gradient(180deg, #FFFFFF 0%, #6EBDFFD6 100%);
	box-shadow: 1px 1px 1px 1px rgba(0, 0, 0, 0.4);
}

#mfa-endorse[data-cert="cpl"] .mfa-btn-primary {
	font-weight:600;
  	color:#fff;
	background-color: transparent;
    background-image: linear-gradient(172deg, #FFCD6B 30%, #D5961A 100%);
	box-shadow: 1px 1px 4px 1px rgba(0, 0, 0, 0.4);
    border-radius: 6px 6px 6px 6px;
	border:none;
	padding:.8rem;
}
#mfa-endorse[data-cert="cpl"] .mfa-btn-primary:hover {
	background-color: transparent;
    color: #000000;
    background-image: linear-gradient(180deg, #FFFFFF 0%, #FFB700E3 100%);
	box-shadow: 1px 1px 1px 1px rgba(0, 0, 0, 0.4);
}

.mfa-reqs.v4 .req-grid{
  display:grid;
  grid-template-columns:auto 1fr;
  column-gap:.5rem;
  row-gap:.25rem;
  align-items:baseline;
  margin:.5rem 0 1rem;
}
.mfa-reqs.v4 .g-a{ display:flex; align-items:baseline; gap:.45rem; }
.mfa-reqs.v4 .g-b{ white-space:nowrap; }
.mfa-reqs.v4 .dot{ margin:0 .4rem; }

.mfa-badge{
  display:inline-grid; place-items:center;
  width:1.05rem; height:1.05rem; border-radius:999px;
  font-size:.8rem; line-height:1; font-weight:800;
  border:1px solid transparent; flex:0 0 auto;
}
.mfa-badge.ok{ background:#e6f4ea; color:#1f6b3a; border-color:#cce8d8; }
.mfa-badge.no{ background:#fde8e8; color:#b42318; border-color:#f2c6c6; }


@media (max-width:560px){
  .mfa-reqs.v4 .g-b{ white-space:normal; }
}

#mfa-endorse .mfa-actions,
#mfa-endorse .form-submit{
	margin-top:2rem;
  display: flex;
  justify-content: flex-end;   
  align-items: center;
  gap: .5rem;
  flex-wrap: wrap;            
}

@media (max-width: 560px){
  #mfa-endorse .mfa-actions,
  #mfa-endorse .form-submit{
    justify-content: center;
  }
}

#mfa-endorse .mfa-btn-primary{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  white-space: normal;         
  line-height: 1.2;
  max-width: 100%;
  overflow-wrap: anywhere;    
}

@media (max-width: 480px){
  #mfa-endorse .mfa-btn-primary{
    width: 100%;
  }
}

@media (max-width: 560px){
  #mfa-endorse{
    box-sizing: border-box;
    margin-inline: auto;
    max-width: 100%; 
    overflow-x: hidden;
  }
}


#mfa-endorse #endorseTitle{
  position: relative;
  display: inline-block;
  font-family: 'Montserrat', system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  font-weight: 900;
  font-size: clamp(1.25rem, 2.8vw, 1.65rem);
  line-height: 1.25;
  margin: 0 0 1rem;
  letter-spacing: .01em;
  color: #0b0f14;

  /* theme vars */
  --A: #457FFF;        /* start color */
  --B: #2053C3;        /* end color */
  --bg: #fff;          /* background behind title */

  /* underline metrics */
  --lineH: .32rem;     /* thickness */
}

#mfa-endorse #endorseTitle::after{
  content:"";
  position:absolute;
  left:0; right:0;
  bottom:-.8rem;
  height:var(--lineH);
  border-radius:999px;
  background: linear-gradient(90deg, var(--A), var(--B));
}

/* Tapered dashed tail (no images, no SVG) */
#mfa-endorse #endorseTitle .title-tail{
  position:absolute;
  right:0;
  bottom:-.8rem;
  height:var(--lineH);
  width:12ch;               /* tail length */
  border-radius:999px;
	z-index: 2;

  /* hide the solid line underneath in tail zone */
  background-color: var(--bg);

  /* five dash segments (largest → smallest) */
  --w1: .9ch; --w2: 1.3ch; --w3: 1.8ch; --w4: 2.2ch; --w5: 2.6ch;

  --gap: .6ch;             
  --end: 0ch;            

  background-image:
    linear-gradient(90deg, var(--A), var(--B)),
    linear-gradient(90deg, var(--A), var(--B)),
    linear-gradient(90deg, var(--A), var(--B)),
    linear-gradient(90deg, var(--A), var(--B)),
    linear-gradient(90deg, var(--A), var(--B));
  background-repeat: no-repeat;
  background-size:
    var(--w1) 100%,
    var(--w2) 100%,
    var(--w3) 100%,
    var(--w4) 100%,
    var(--w5) 100%;
  /* position each dash from the RIGHT with gaps so they don't touch */
  background-position:
    right var(--end) center,
    right calc(var(--end) + var(--w1) + var(--gap)) center,
    right calc(var(--end) + var(--w1) + var(--w2) + (var(--gap) * 2)) center,
    right calc(var(--end) + var(--w1) + var(--w2) + var(--w3) + (var(--gap) * 3)) center,
    right calc(var(--end) + var(--w1) + var(--w2) + var(--w3) + var(--w4) + (var(--gap) * 4)) center;

  pointer-events:none;
}

/* Certificate color mapping */
#mfa-endorse[data-cert="spl"] #endorseTitle{ --A:#5DDA51; --B:#209016; }
#mfa-endorse[data-cert="rpl"] #endorseTitle{ --A:#BA67FF; --B:#712CA9; }
#mfa-endorse[data-cert="ppl"] #endorseTitle{ --A:#457FFF; --B:#2053C3; }
#mfa-endorse[data-cert="cpl"] #endorseTitle{ --A:#FFCD6B; --B:#D5961A; }

/* If title sits on a card, match its bg */
#mfa-endorse .mfa-card #endorseTitle{ --bg:#fff; }


@media (max-width:480px){
  #mfa-endorse #endorseTitle{ margin-inline:auto; text-align:center; }
  #mfa-endorse #endorseTitle .title-tail{ width:10ch; }
}
/******* SWPM REGISTRATION FORM **********/

.swpm-login-form-submit {
     background: #f7f7f7 !important;
     border: 1px solid #91bbff!important;
     color: #4285f4!important;
     font-weight: 700 !important;
    border-radius: 6px;
    box-shadow: 0px 0px 4px 0px rgba(28, 28, 28, 0.5) !important;
	margin-bottom:1.5rem;
 }
.swpm-login-form-submit:hover {
background-color: #252629 !important;
    box-shadow: none !important;
	color: white !important;
	border: 1px solid #000!important;
    font-weight: 700 !important;
}
.swpm-registration-form-section{
	padding:1rem;
}
.swpm-form-input-wrap,
.swpm-form-field {
	width:100% !important;
	max-width:100%;
	margin:0;
	padding:0;
}

.swpm-login-link { 
	text-decoration: underline !important;
	color: #0035ff !important; 
}
.swpm-join-us-link { 
	text-decoration: underline !important;
	color: #0035ff !important; 
}

.swpm-login-form-pw-reset-link { 
	text-decoration: underline !important;
	color: #0035ff; !important 
}

.nsl-container { 
    display: flex;
    justify-content: center;
    align-items: center;
}
.nsl-button.nsl-button-default.nsl-button-google {
    background-color: #4285F4 !important;
	border-color: #4285F4 !important;
    box-shadow: 0px 0px 4px 0px rgba(28, 28, 28, 0.5) !important;
}
.nsl-button.nsl-button-default.nsl-button-google:hover {
    background-color: #252629 !important;
	border-color: #4285F4 !important;
    box-shadow: none !important;
}
.nsl-button-svg-container {
    background-color: white !important;
	margin: 2px;
	border-radius: 2px;
}
div.nsl-container .nsl-button-google {
        color: white !important;
	justify-content: center;
    }
div.nsl-container .nsl-button-default div.nsl-button-label-container {
    display: flex !important;
    align-items: center;
    justify-content: center;
		gap: 5px; 
}
.nsl-button-google {
    margin: auto;
    display: block;
}
.swpm-edit-profile-link { 
    display: none !important;
}
.swpm-logged-logout-link { 
	text-decoration: underline !important;
	color: #0035ff; !important 
}
.swpm-yellow-box {
    width: 75vw;
	margin: 6vw 13vw 6vw 13vw;
	content: center !important;
	text-align: center;
	padding: 10px;
    background-color: #FFFFE0;
    border-color: #E6DB55;
    border-radius: 3px;
    border-style: solid;
    border-width: 1px;
}
.swpm-post-not-logged-in-msg {
    width: 75vw;
	margin: 6vw 13vw 6vw 13vw;
	content: center !important;
	text-align: center;
	padding: 10px;
    background-color: #FFFFE0;
    border-color: #E6DB55;
    border-radius: 3px;
    border-style: solid;
    border-width: 1px;
}
.swpm-remember-me {
    display: none;
}
.swpm-password-input-visibility {
    display: flex;
    align-items: center;
    gap: 0.5rem;
	
}
/******* CFI REGISTRATION FORM **********/

.swpm-before-registration-submit-section {
        text-align: left !important;
        margin-top: 1rem;
        padding: .75rem;
        background: #fff7ed;             
        border: 1px solid #fed7aa;       
        border-radius: 8px;
        font-size: 1rem;
        line-height: 1.4;
        color: #7c2d12;  
    }
    
    /* Left-align labels for CFI rows */
    .swpm-form .swpm-field-faa-cfi .swpm-form-label-wrap,
    .swpm-form .swpm-field-faa-cfi-extra .swpm-form-label-wrap {
        text-align: left;
    }
    .faa_is_cfi {
        font-size: 1.05rem;
    }
    
    /* Checkbox + text inline on the left */
    .swpm-form .swpm-cfi-inline {
        display: inline-flex;
        margin-top:0.5rem;
        align-items: center;
        gap: 0.35rem;
        font-weight: normal;
    }
    .swpm-form-desc {
        font-size: 1rem;
    }
    /* Inputs full width inside their column, same height */
    .swpm-form .swpm-field-faa-cfi-extra .swpm-form-input-wrap input[type="text"],
    .swpm-form .swpm-field-faa-cfi-extra .swpm-form-input-wrap input[type="email"] {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }
    /* Make email visually wider than cert number by max-widths */
    .swpm-form #faa_cfi_number {
        max-width: 100%;
    }
    .swpm-form #faa_cfi_email {
        max-width: 100%;
    }
    
    /* Make the raw input invisible-ish so only the button feels styled */
.swpm-form #faa_cfi_cert_file {
    border: none;
    padding: 0;
    margin-top: 0.3rem;
    background: transparent;
    width: auto;
    box-sizing: border-box;
    color: red;
}

/* Modern browsers: style the button */
.swpm-form #faa_cfi_cert_file::file-selector-button {
    padding: 0 0.9rem;
    border-radius: 12px;
    border: 1px solid #ccc;
    background: #f5f5f5;
    font-size: 0.9rem;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, transform 0.08s ease;
}

/* Hover + active states */
.swpm-form #faa_cfi_cert_file::file-selector-button:hover {
    background: #e9e9e9;
    border-color: #999;
}

.swpm-form #faa_cfi_cert_file::file-selector-button:active {
    transform: translateY(1px);
}

/* Safari / older Chrome */
.swpm-form #faa_cfi_cert_file::-webkit-file-upload-button {
    padding: 0 0.5rem;
    border-radius: 12px;
    border: 1px solid #ccc;
    background: #f5f5f5;
    font-size: 0.9rem;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, transform 0.08s ease;
}

.swpm-form #faa_cfi_cert_file::-webkit-file-upload-button:hover {
    background: #e9e9e9;
    border-color: #999;
}

.swpm-form #faa_cfi_cert_file::-webkit-file-upload-button:active {
    transform: translateY(1px);
}
.swpm-form .swpm-required {
    color: #cc0000;
    margin-left: 0.15rem;
    font-weight: bold;
}
.column-faa_wp_id {
	width: auto;
}
.faa-complete-btn:hover,
.faa-confirm-buttons button.yes:hover {
	cursor:pointer !important;
}
.faa-complete-btn[disabled]{
	cursor:default !important;
}

/******* HISTORY WINDOW **********/

.mfa-recent-pages-floating{
  position: fixed;
  left: 0;
  z-index: 9995;
}

.mfa-recent-pages-toggle{
  appearance: none;
  border: 1px solid #e5e7eb;
  background: #f8fafc;
  color: #475569;
  border-radius: 12px;
  padding: 0.7rem 0.45rem;
	margin-top:3px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .02em;
  text-transform: uppercase;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 10px 25px rgba(15, 23, 42, 0.35);
  transition: background .2s ease, border-color .2s ease, color .2s ease, box-shadow .2s ease, transform .2s ease;
	z-index: 9995;
}

.mfa-recent-pages-toggle:hover{
  background: #ffffff;
  border-color: #dbe2ea;
  color: #334155;
  box-shadow: 0 10px 28px rgba(0,0,0,.10);
  transform: translateY(-1px);
}

.mfa-recent-pages-toggle:active{
  transform: translateY(0);
  box-shadow: 0 6px 18px rgba(0,0,0,.08);
}

.mfa-recent-pages-toggle:focus{
  outline: none;
  box-shadow: 0 0 0 3px rgba(148,163,184,.18), 0 10px 28px rgba(0,0,0,.10);
}

.mfa-recent-pages-panel{
  position: relative;
  margin-top: .4rem;
  width: min(360px, calc(100vw - 24px));
}

.mfa-recent-pages-panel .mfa-recent-pages,
.mfa-recent-pages-panel .mfa-resume-last-page{
  margin: 0 !important;
  box-shadow: 0 10px 30px rgba(0,0,0,.12);
}

.mfa-recent-pages-close{
  position: absolute;
  top: 10px;
  right: 5px;
  appearance: none;
  border: 0;
  background: transparent;
  color: #64748b;
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  z-index: 2;
  box-shadow:none !important;
}

@media (max-width:1919.98px){
  .mfa-recent-pages-floating{ top: 8.7rem; }
}
@media (max-width:1280px){
  .mfa-recent-pages-floating{ top: 7.4rem; }
}
@media (max-width:1024px){
  .mfa-recent-pages-floating{ top: 6.8rem; }
}
@media (max-width:728px){
  .mfa-recent-pages-floating{
    top: 5rem;
    left: 0;
  }
  .mfa-recent-pages-panel{
    width: calc(100vw - 24px);
  }
}
@media (max-width:480px){
  .mfa-recent-pages-floating{
    top: 5.6rem;
    left: 0;
  }
  .mfa-recent-pages-panel{
    width: calc(100vw - 24px);
  }
}