/* IAL Maths Lab — v056
 *
 * The commercial layer: the limit prompt, the locked chapter cards, and the
 * allowance list in the account centre.
 *
 * Layout rule for everything in here: the interface can be zoomed up to 150%,
 * and CSS `zoom` does not change what a media query sees, so nothing here is
 * written as a media query. Anything that has to react to the *visible* width
 * uses `calc(100vw / var(--ial-ui-zoom, 1))`, and narrow-screen simplifications
 * hang off `html[data-ui-eff="..."]`, which ui-scale.mjs keeps up to date.
 */

/* ---------- the limit prompt ----------
   An invitation, never a takeover. It sits out of the way in a corner, it has
   two exits, and the rest of the site keeps working while it is open. */

.gateNotice {
  position: fixed;
  /* Above the workspace (120) and the toast (100) - the whole point is that the
     student can read it while the workspace is open behind it. Below the photo
     viewer (200) and the confirm dialogs (2000), which are deliberate
     takeovers. Without this the card was rendered and hit-testable but
     invisible, painted underneath the workspace. */
  z-index: 150;
  display: none;
  inset: auto;
  right: calc(20px / var(--ial-ui-zoom, 1));
  bottom: calc(20px / var(--ial-ui-zoom, 1));
  width: min(380px, calc(100vw / var(--ial-ui-zoom, 1) - 32px));
  pointer-events: none;
}

.gateNotice.show { display: block; }

.gateCard {
  pointer-events: auto;
  position: relative;
  background: #ffffff;
  border: 1px solid var(--line, #dde3ec);
  border-radius: 16px;
  box-shadow: 0 18px 44px rgba(12, 35, 64, .22);
  padding: 18px 18px 16px;
  animation: gateIn .22s ease-out;
}

@keyframes gateIn {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

.gateCard h3 {
  margin: 0 30px 6px 0;
  font-size: 15px;
  line-height: 1.35;
  color: var(--ink, #16181d);
}

.gateCard p {
  margin: 0 0 14px;
  font-size: 12.5px;
  line-height: 1.6;
  color: #5b6169;
}

.gateClose {
  position: absolute;
  top: 8px;
  right: 8px;
  width: calc(30px / var(--ial-ui-zoom, 1));
  height: calc(30px / var(--ial-ui-zoom, 1));
  min-width: 30px;
  min-height: 30px;
  border: 0;
  background: transparent;
  color: #7a8290;
  font-size: 19px;
  line-height: 1;
  border-radius: 8px;
  cursor: pointer;
}

.gateClose:hover { background: #f1f5fb; color: var(--ink, #16181d); }

.gateActions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.gateActions .btn { flex: 0 1 auto; }

/* Narrow and zoomed-narrow screens: use the full width, above the mobile bar. */
html[data-ui-eff="narrow"] .gateNotice,
html[data-ui-eff="mid"] .gateNotice {
  left: calc(12px / var(--ial-ui-zoom, 1));
  right: calc(12px / var(--ial-ui-zoom, 1));
  bottom: calc(72px / var(--ial-ui-zoom, 1));
  width: auto;
}

html[data-ui-eff="narrow"] .gateActions .btn,
html[data-ui-eff="mid"] .gateActions .btn { flex: 1 1 auto; }

/* ---------- locked chapters in the notes ---------- */

.summaryChapterCard.locked {
  background: #fafbfd;
  border-style: dashed;
}

.summaryChapterCard.locked .num { color: #a2aab8; }
.summaryChapterCard.locked .chTitle { color: #6d7684; }
.summaryChapterCard.locked .chSub { color: #98a0ad; font-style: italic; }
.summaryChapterCard.locked .arrow { color: #a2aab8; font-size: 13px; }
.summaryChapterCard.locked:hover { background: #f4f7fc; }

/* ---------- the allowance list in the account centre ---------- */

.acctQuota {
  display: grid;
  gap: 1px;
  margin: 12px 0 4px;
  border: 1px solid var(--line, #e4e8ef);
  border-radius: 12px;
  overflow: hidden;
  background: var(--line, #e4e8ef);
}

.acctQuota > div {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  background: #ffffff;
  padding: 9px 12px;
  font-size: 12px;
}

.acctQuota span { color: #5b6169; }

.acctQuota b {
  color: var(--ink, #16181d);
  font-weight: 700;
  text-align: right;
  white-space: nowrap;
}

.acctPlan.guest { background: #eef1f6; color: #5b6169; }
.acctPlan.free { background: #e8f1fd; color: #1d4ed8; }