/*
 * tools.css — Arabic Companion Tools screen styles.
 * Everything is scoped under .ac-tools so the Virtue theme cannot bleed in.
 *
 * Version log
 * 1.0.0  2026-08-05  Initial: tokens, shell, tabs, forms, sheet preview.
 * 2.0.0  2026-08-06  Styles for the two AI tools — credit meter, credit packs,
 *                    level tabs, glossary and question lists — and a wider
 *                    measure on the masthead, which was wrapping short.
 * 2.1.0  2026-08-06  Dropped the full-bleed, quietened the guide, and moved
 *                    the AI caveats into fine print beside the control they
 *                    describe rather than a banner above it.
 * 1.1.0  2026-08-05  Readability pass. The theme's 14px base was dragging the
 *                    whole interface down to 13px labels, and the A4 preview
 *                    (794px) did not fit its 768px column. Now: an explicit
 *                    16px base with an em-based scale, roomier spacing, a
 *                    full-bleed layout, a sticky preview column and a zoom
 *                    control on every sheet preview.
 */

@font-face {
  font-family: 'AC Naskh';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/noto-naskh-arabic.woff2') format('woff2');
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+08A0-08FF,
                 U+FB50-FDFF, U+FE70-FEFF, U+200C-200E, U+2010-2011, U+204F,
                 U+2E41, U+FD3E-FD3F;
}

.ac-tools {
  --ac-blue: #6ec1e4;
  --ac-blue-deep: #11678b;
  --ac-blue-deeper: #0a4762;
  --ac-blue-wash: #eef8fc;
  --ac-pink: #d6216f;
  --ac-ink: #1d2d34;
  --ac-ink-soft: #4d626b;
  --ac-line: #d5e2e8;
  --ac-line-soft: #eaf1f4;
  --ac-bg-soft: #f7fbfd;
  --ac-good: #1a7048;
  --ac-warn: #8a5810;
  --ac-bad: #97282a;
  --ac-radius: 12px;
  --ac-ui-font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
                'Helvetica Neue', Arial, sans-serif;
  --ac-ar-font: 'AC Naskh', 'Noto Naskh Arabic', 'Amiri', 'Traditional Arabic',
                'Geeza Pro', serif;

  /* An explicit base, because the theme sets 14px and every em below it. */
  font-family: var(--ac-ui-font);
  font-size: 16px;
  line-height: 1.6;
  color: var(--ac-ink);
  direction: ltr;
  text-align: left;
  margin: 0 auto;
}

.ac-tools *, .ac-tools *::before, .ac-tools *::after { box-sizing: border-box; }

.ac-tools h1, .ac-tools h2, .ac-tools h3, .ac-tools h4 {
  font-family: var(--ac-ui-font) !important;
  color: var(--ac-ink) !important;
  margin: 0 0 .5em;
  line-height: 1.25;
  letter-spacing: -0.01em;
  text-transform: none !important;
}
.ac-tools h2 { font-size: 1.7em; font-weight: 700; }
.ac-tools h3 { font-size: 1.2em; font-weight: 700; }
.ac-tools h4 {
  font-size: .8em;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase !important;
  color: var(--ac-ink-soft) !important;
  margin-bottom: .7em;
}
.ac-tools p { margin: 0 0 1em; font-size: 1em; }
.ac-tools ul, .ac-tools ol { margin: 0 0 1em; padding-left: 1.4em; }
.ac-tools li { margin: 0 0 .35em; list-style: inherit; }

.ac-lede {
  font-size: 1.06em;
  color: var(--ac-ink-soft);
  max-width: 68ch;
  margin-bottom: 1.4em;
}

/* Arabic renders larger than the Latin around it — matching nominal sizes
   makes Arabic significantly harder to read. */
.ac-ar {
  font-family: var(--ac-ar-font);
  font-size: 1.45em;
  line-height: 2.05;
}
.ac-tools [dir='rtl'] { text-align: right; }

/* The tools stay inside the theme's own content column. An A4 preview is
   wider than that column, which is what the zoom control is for. */

/* ---------- shell ---------- */

.ac-masthead {
  border: 1px solid var(--ac-line);
  border-left: 5px solid var(--ac-blue);
  border-radius: var(--ac-radius);
  background: linear-gradient(160deg, var(--ac-blue-wash) 0%, #ffffff 70%);
  padding: 26px 30px;
  margin-bottom: 26px;
}
.ac-masthead h1 {
  font-size: 1.9em;
  margin: 0 0 .35em;
  color: var(--ac-blue-deeper) !important;
}
/* The measure used to stop at 74ch, which on a full-bleed box left the text
   ending two thirds of the way across with a wide gap beside it. Wide enough to
   fill the box, still capped so a 1600px screen does not produce an unreadable
   line, and `pretty` keeps the last line from being a single word. */
.ac-masthead p {
  margin: 0;
  font-size: 1.06em;
  color: var(--ac-ink-soft);
  max-width: 104ch;
  text-wrap: pretty;
}

.ac-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  border-bottom: 2px solid var(--ac-line);
  margin: 0 0 28px;
  padding: 0;
  list-style: none;
}
.ac-tab {
  appearance: none;
  border: 1px solid transparent;
  border-bottom: none;
  background: transparent;
  font: inherit;
  font-weight: 600;
  font-size: 1em;
  color: var(--ac-ink-soft);
  padding: 13px 20px;
  border-radius: 10px 10px 0 0;
  cursor: pointer;
  margin-bottom: -2px;
  white-space: nowrap;
  text-transform: none !important;
  letter-spacing: 0;
  line-height: 1.3;
}
.ac-tab:hover { color: var(--ac-blue-deep); background: var(--ac-bg-soft); }
.ac-tab[aria-selected='true'] {
  color: var(--ac-blue-deeper);
  background: #fff;
  border-color: var(--ac-line);
  border-bottom: 2px solid #fff;
  box-shadow: inset 0 3px 0 var(--ac-blue);
}
.ac-tab .ac-free {
  display: inline-block;
  font-size: .68em;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  background: var(--ac-blue);
  color: #06384c;
  border-radius: 999px;
  padding: 2px 8px;
  margin-left: 8px;
  vertical-align: 2px;
}

.ac-panel[hidden] { display: none; }

/* ---------- layout ---------- */

.ac-split {
  display: grid;
  grid-template-columns: 384px minmax(0, 1fr);
  gap: 34px;
  align-items: start;
}
.ac-split--wide { grid-template-columns: 400px minmax(0, 1fr); }
/* The AI tools have no A4 preview to make room for — they are text in, text
   out — so the two halves carry equal weight. */
.ac-split--even { grid-template-columns: 1fr 1fr; }
@media (max-width: 1100px) {
  .ac-split, .ac-split--wide, .ac-split--even { grid-template-columns: 1fr; gap: 24px; }
}

/* The preview stays put while the controls beside it are scrolled. */
.ac-sticky { position: sticky; top: 20px; }
@media (max-width: 1100px) { .ac-sticky { position: static; } }

.ac-card {
  border: 1px solid var(--ac-line);
  border-radius: var(--ac-radius);
  background: #fff;
  padding: 24px 26px;
  margin-bottom: 22px;
}
.ac-card > :last-child { margin-bottom: 0; }
.ac-card--soft { background: var(--ac-bg-soft); }

.ac-field { margin-bottom: 20px; }
.ac-field:last-child { margin-bottom: 0; }
.ac-field > label,
.ac-legend {
  display: block;
  font-size: .95em;
  font-weight: 700;
  color: var(--ac-ink);
  margin-bottom: 7px;
}
.ac-legend {
  font-size: .8em;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ac-ink-soft);
  margin-bottom: 14px;
}
.ac-hint {
  font-size: .875em;
  line-height: 1.5;
  color: var(--ac-ink-soft);
  margin: 6px 0 0;
}

.ac-tools input[type='text'],
.ac-tools input[type='number'],
.ac-tools input[type='file'],
.ac-tools input[type='color'],
.ac-tools select,
.ac-tools textarea {
  width: 100%;
  font-family: inherit;
  font-size: 1em;
  color: var(--ac-ink);
  background: #fff;
  border: 1px solid var(--ac-line);
  border-radius: 9px;
  padding: 11px 13px;
  line-height: 1.45;
}
.ac-tools select {
  padding-right: 34px;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%234d626b' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 13px center;
  background-size: 11px;
  appearance: none;
}
.ac-tools input[type='file'] { padding: 9px 11px; font-size: .9em; }
.ac-tools textarea { min-height: 150px; resize: vertical; }
.ac-tools textarea.ac-ar-input {
  font-family: var(--ac-ar-font);
  font-size: 1.35em;
  line-height: 2.05;
  direction: rtl;
  text-align: right;
  padding: 14px 16px;
}
.ac-tools input:focus, .ac-tools select:focus, .ac-tools textarea:focus {
  outline: 3px solid rgba(110, 193, 228, .55);
  outline-offset: 0;
  border-color: var(--ac-blue-deep);
}
.ac-tools input[type='color'] { padding: 3px; height: 44px; }

.ac-row { display: flex; gap: 14px; flex-wrap: wrap; align-items: flex-end; }
.ac-row > * { flex: 1 1 130px; min-width: 0; }

.ac-check {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: .95em;
  font-weight: 500;
  line-height: 1.45;
  margin-bottom: 11px;
  cursor: pointer;
}
.ac-check:last-child { margin-bottom: 0; }
.ac-check input {
  margin: 2px 0 0;
  flex: none;
  width: 17px;
  height: 17px;
  accent-color: var(--ac-blue-deep);
}

.ac-btn {
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font: inherit;
  font-size: .95em;
  font-weight: 600;
  border-radius: 9px;
  border: 1px solid var(--ac-blue-deep);
  background: var(--ac-blue-deep);
  color: #fff !important;
  padding: 12px 20px;
  cursor: pointer;
  text-decoration: none !important;
  text-transform: none !important;
  line-height: 1.2;
}
.ac-btn:hover { background: var(--ac-blue-deeper); border-color: var(--ac-blue-deeper); color: #fff !important; }
.ac-btn:focus-visible { outline: 3px solid rgba(110, 193, 228, .6); outline-offset: 2px; }
.ac-btn[disabled] { opacity: .45; cursor: not-allowed; }
.ac-btn--ghost { background: #fff; color: var(--ac-blue-deep) !important; }
.ac-btn--ghost:hover { background: var(--ac-blue-wash); color: var(--ac-blue-deeper) !important; }
.ac-btn--small { font-size: .85em; padding: 8px 13px; }
.ac-btn-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.ac-btn-row select { flex: 0 1 200px; }

.ac-note {
  border-left: 4px solid var(--ac-blue);
  background: var(--ac-blue-wash);
  border-radius: 0 9px 9px 0;
  padding: 13px 18px;
  font-size: .95em;
  line-height: 1.55;
  color: var(--ac-ink-soft);
  margin: 0 0 20px;
}
.ac-note strong { color: var(--ac-ink); }
.ac-note--warn { border-left-color: #d99b2b; background: #fdf6e9; color: #6b4f14; }
.ac-note--bad { border-left-color: var(--ac-bad); background: #fbeeee; color: #74201f; }

.ac-badge {
  display: inline-block;
  font-size: .82em;
  font-weight: 700;
  border-radius: 999px;
  padding: 4px 12px;
}
.ac-badge--ok { background: #e3f3ea; color: var(--ac-good); }
.ac-badge--fixed { background: #e2f1f8; color: var(--ac-blue-deeper); }
.ac-badge--none { background: #f0f2f3; color: #5c6a70; }

.ac-drop {
  border: 2px dashed var(--ac-line);
  border-radius: var(--ac-radius);
  background: var(--ac-bg-soft);
  padding: 40px 24px;
  text-align: center;
  cursor: pointer;
}
.ac-drop:hover { border-color: var(--ac-blue); }
.ac-drop.is-over { border-color: var(--ac-blue-deep); background: #e6f4fa; }
.ac-drop strong { display: block; font-size: 1.12em; margin-bottom: 6px; }
.ac-drop span { font-size: .92em; color: var(--ac-ink-soft); }

.ac-progress {
  height: 8px;
  border-radius: 999px;
  background: var(--ac-line-soft);
  overflow: hidden;
  margin: 14px 0 8px;
}
.ac-progress > i { display: block; height: 100%; background: var(--ac-blue-deep); width: 0; transition: width .2s; }

.ac-textout {
  font-family: var(--ac-ar-font);
  font-size: 1.35em;
  line-height: 2.1;
  white-space: pre-wrap;
  word-break: break-word;
  border: 1px solid var(--ac-line);
  border-radius: 10px;
  background: #fff;
  padding: 20px 22px;
  min-height: 300px;
  max-height: 62vh;
  overflow: auto;
}
.ac-textout[dir='rtl'] { text-align: right; }
.ac-textout--raw {
  direction: ltr;
  text-align: left;
  unicode-bidi: plaintext;
  background: var(--ac-bg-soft);
  color: var(--ac-ink-soft);
}

.ac-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
}
@media (max-width: 900px) { .ac-pair { grid-template-columns: 1fr; } }

.ac-pager {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  font-size: .95em;
  margin-bottom: 16px;
}

/* ---------- printable sheet preview ---------- */

.ac-stage-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 0 0 12px;
  font-size: .9em;
  color: var(--ac-ink-soft);
}
.ac-stage-bar .ac-zoomlabel {
  font-weight: 700;
  font-size: .8em;
  letter-spacing: .06em;
  text-transform: uppercase;
  margin-right: 2px;
}
.ac-zoombtn {
  appearance: none;
  font: inherit;
  font-size: .88em;
  font-weight: 600;
  border: 1px solid var(--ac-line);
  background: #fff;
  color: var(--ac-ink-soft);
  border-radius: 7px;
  padding: 6px 12px;
  cursor: pointer;
}
.ac-zoombtn:hover { border-color: var(--ac-blue); color: var(--ac-blue-deep); }
.ac-zoombtn[aria-pressed='true'] {
  background: var(--ac-blue-deep);
  border-color: var(--ac-blue-deep);
  color: #fff;
}

.ac-stage {
  --ac-zoom: 1;
  background: #e6edf1;
  border-radius: var(--ac-radius);
  padding: 22px;
  overflow: auto;
  max-height: 84vh;
}
/* zoom (rather than transform) so the scaled sheet still occupies the right
   amount of layout height; browsers without it simply show the sheet at 100%. */
.ac-stage > .ac-sheets { zoom: var(--ac-zoom); }

.ac-sheet {
  width: 210mm;
  min-height: 297mm;
  padding: 15mm;
  margin: 0 auto 22px;
  background: #fff;
  box-shadow: 0 2px 10px rgba(16, 40, 52, .16);
  color: #000;
  font-family: var(--ac-ui-font);
  font-size: 11pt;
  line-height: 1.5;
  position: relative;
}
.ac-sheet:last-child { margin-bottom: 0; }
.ac-sheet--landscape { width: 297mm; min-height: 210mm; }
.ac-sheet--bleed { padding: 0; overflow: hidden; }

.ac-sheet-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 16px;
  border-bottom: 1.5pt solid #000;
  padding-bottom: 5mm;
  margin-bottom: 7mm;
}
.ac-sheet-head h2 { font-size: 15pt; margin: 0 0 2mm; color: #000 !important; }
.ac-sheet-head .ac-sheet-meta { font-size: 9.5pt; white-space: nowrap; text-align: right; }
.ac-sheet-head .ac-sheet-meta span { display: block; margin-bottom: 2mm; }
.ac-sheet-logo { max-height: 18mm; max-width: 45mm; }

.ac-ex { margin-bottom: 8mm; }
.ac-ex-title { font-size: 11.5pt; font-weight: 700; margin: 0 0 1mm; }
.ac-ex-instr { font-size: 9.5pt; font-style: italic; margin: 0 0 3mm; color: #333; }

.ac-watermark {
  position: absolute;
  inset: 0;
  pointer-events: none;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 44pt;
  font-weight: 800;
  color: rgba(110, 193, 228, .16);
  transform: rotate(-28deg);
  letter-spacing: .08em;
}

/* The exercise cards in the worksheet builder. */
.ac-exrow { cursor: grab; }
.ac-exrow.is-dragging { opacity: .5; }

.ac-empty {
  border: 1px dashed var(--ac-line);
  border-radius: var(--ac-radius);
  padding: 56px 24px;
  text-align: center;
  color: var(--ac-ink-soft);
  font-size: 1em;
  background: #fff;
}

/* ---------- licence bar ---------- */

.ac-licence {
  border: 1px solid var(--ac-line);
  border-radius: var(--ac-radius);
  background: #fff;
  padding: 20px 24px;
  margin-bottom: 24px;
  display: grid;
  gap: 18px;
}
.ac-licence.is-pro {
  grid-template-columns: 1fr auto;
  align-items: center;
  border-color: #bfe3cd;
  background: #f4fbf7;
}
.ac-licence-status { display: flex; align-items: flex-start; gap: 12px; }
.ac-licence-status strong { display: block; font-size: 1.05em; }
.ac-licence-sub {
  display: block;
  font-size: .92em;
  color: var(--ac-ink-soft);
  max-width: 72ch;
}
.ac-licence-tick {
  flex: none;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--ac-good);
  color: #fff;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Two plans now, not three, so the grid fits whatever it is given. */
.ac-plans {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
}
@media (max-width: 780px) { .ac-plans { grid-template-columns: 1fr; } }
.ac-plan {
  display: block;
  border: 1px solid var(--ac-line);
  border-radius: 10px;
  padding: 16px 18px;
  text-decoration: none !important;
  background: var(--ac-bg-soft);
  color: var(--ac-ink) !important;
}
.ac-plan:hover { border-color: var(--ac-blue-deep); background: var(--ac-blue-wash); }
.ac-plan.is-best { border-color: var(--ac-blue-deep); border-width: 2px; background: #fff; }
.ac-plan-label { display: block; font-weight: 700; font-size: .98em; margin-bottom: 3px; }
.ac-plan-price { display: block; font-size: .92em; color: var(--ac-ink-soft); margin-bottom: 10px; }
.ac-plan-cta {
  display: inline-block;
  font-size: .85em;
  font-weight: 700;
  color: var(--ac-blue-deep);
}

.ac-licence-key > label {
  display: block;
  font-size: .9em;
  font-weight: 700;
  margin-bottom: 7px;
}
.ac-licence-entry { display: flex; gap: 10px; max-width: 420px; }
.ac-licence-entry input {
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.ac-licence-msg { display: block; font-size: .88em; margin-top: 7px; color: var(--ac-ink-soft); }
.ac-licence-msg.is-bad { color: var(--ac-bad); }

/* ---------- how-to guide ---------- */

/* Closed, this is one quiet row under the tool; open, it is the full
   bilingual walkthrough. It should never compete with the tool itself. */
.ac-guide {
  border: 1px solid var(--ac-line);
  border-radius: var(--ac-radius);
  background: var(--ac-bg-soft);
  margin: 34px 0 26px;
  overflow: hidden;
}
.ac-guide > summary {
  cursor: pointer;
  list-style: none;
  padding: 15px 22px;
  font-weight: 700;
  font-size: 1em;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  color: var(--ac-blue-deeper);
}
.ac-guide > summary::-webkit-details-marker { display: none; }
.ac-guide > summary::after {
  content: '▾';
  font-size: .8em;
  color: var(--ac-ink-soft);
  order: 3;
}
.ac-guide[open] > summary::after { content: '▴'; }
.ac-guide > summary:hover { background: var(--ac-blue-wash); }
.ac-guide-ar {
  font-family: var(--ac-ar-font);
  font-size: 1.2em;
  font-weight: 400;
  margin-left: auto;
}

.ac-guide-body {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  border-top: 1px solid var(--ac-line);
  background: #fff;
}
@media (max-width: 900px) { .ac-guide-body { grid-template-columns: 1fr; } }
.ac-guide-col { padding: 20px 24px; }
.ac-guide-col + .ac-guide-col { border-left: 1px solid var(--ac-line); }
@media (max-width: 900px) {
  .ac-guide-col + .ac-guide-col { border-left: none; border-top: 1px solid var(--ac-line); }
}
.ac-guide-col h4 { margin-bottom: 12px; }
.ac-guide-col ol { margin: 0; padding-inline-start: 1.4em; padding-inline-end: 0; }
.ac-guide-col li { margin-bottom: .55em; font-size: .95em; line-height: 1.6; }
.ac-guide-col[dir='rtl'] li {
  font-family: var(--ac-ar-font);
  font-size: 1.15em;
  line-height: 2;
}
.ac-guide-tip {
  margin: 14px 0 0;
  padding-top: 12px;
  border-top: 1px dashed var(--ac-line);
  font-size: .9em;
  color: var(--ac-ink-soft);
}
.ac-guide-col[dir='rtl'] .ac-guide-tip {
  font-family: var(--ac-ar-font);
  font-size: 1.05em;
  line-height: 1.95;
}

/* Caveats that matter but should not shout: they sit with the control they
   describe rather than as another banner above the tool. */
.ac-fineprint {
  font-size: .84em;
  line-height: 1.55;
  color: var(--ac-ink-soft);
  margin: 16px 0 0;
  padding-top: 12px;
  border-top: 1px solid var(--ac-line-soft);
}
.ac-fineprint strong { color: var(--ac-ink); }

/* ---------- the AI tools ---------- */

.ac-tab .ac-free--ai {
  background: var(--ac-pink);
  color: #fff;
}

/* The credit meter. Deliberately quiet until it has something to say — a
   teacher mid-task should not be shouted at about money. */
.ac-meter {
  border: 1px solid var(--ac-line);
  border-left: 4px solid var(--ac-blue);
  border-radius: var(--ac-radius);
  background: var(--ac-blue-wash);
  padding: 14px 18px;
  margin: 0 0 20px;
}
.ac-meter-line { margin: 0; font-size: .95em; color: var(--ac-ink-soft); }
.ac-meter-line strong { color: var(--ac-ink) !important; }
.ac-meter-line.is-empty {
  color: #6b4f14;
}
.ac-meter-packs {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 12px;
}
.ac-pack {
  display: block;
  flex: 0 1 auto;
  border: 1px solid var(--ac-line);
  border-radius: 10px;
  background: #fff;
  padding: 10px 14px;
  text-decoration: none !important;
  color: var(--ac-ink) !important;
  min-width: 150px;
}
.ac-pack:hover { border-color: var(--ac-blue-deep); background: #fff; }
.ac-pack-credits { display: block; font-weight: 700; font-size: .98em; }
.ac-pack-label {
  display: block;
  font-size: .88em;
  color: var(--ac-ink-soft);
}

.ac-licence-credits {
  display: block;
  font-size: .88em;
  font-weight: 700;
  color: var(--ac-blue-deep);
  margin-top: 2px;
}

/* A model call has no measurable progress, so the bar admits it and just
   travels rather than pretending to know how far along it is. */
.ac-bar-indeterminate {
  display: block;
  height: 100%;
  width: 38%;
  background: var(--ac-blue-deep);
  border-radius: 999px;
  animation: ac-slide 1.1s ease-in-out infinite;
}
@keyframes ac-slide {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(270%); }
}
@media (prefers-reduced-motion: reduce) {
  .ac-bar-indeterminate { animation: none; width: 100%; opacity: .5; }
}

.ac-levelpick { display: flex; flex-direction: column; gap: 6px; }

.ac-leveltabs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 16px;
}
.ac-leveltab {
  appearance: none;
  font: inherit;
  font-size: .92em;
  font-weight: 600;
  border: 1px solid var(--ac-line);
  border-radius: 999px;
  background: #fff;
  color: var(--ac-ink-soft);
  padding: 7px 15px;
  cursor: pointer;
}
.ac-leveltab[aria-pressed='true'] {
  background: var(--ac-blue-deep);
  border-color: var(--ac-blue-deep);
  color: #fff;
}

/* A levelled sheet is read on screen far more often than it is printed, so it
   flows to the column here and only becomes A4 in the print stylesheet. */
.ac-sheet--level {
  width: auto;
  max-width: 210mm;
  min-height: 0;
  padding: 26px 30px;
  margin: 0 0 22px;
}
.ac-sheet--level.is-hidden { display: none; }
.ac-level-text {
  font-family: var(--ac-ar-font);
  font-size: 1.5em;
  line-height: 2.15;
  margin: 0 0 1em;
}
.ac-level-note {
  font-size: 1.05em;
  color: var(--ac-ink-soft);
  border-top: 1px dashed var(--ac-line);
  padding-top: 10px;
}

.ac-gloss {
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 1.4em;
  font-size: .95em;
}
.ac-gloss th, .ac-gloss td {
  border: 1px solid var(--ac-line);
  padding: 7px 10px;
  text-align: left;
  vertical-align: middle;
}
.ac-gloss th {
  background: var(--ac-bg-soft);
  font-size: .82em;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--ac-ink-soft);
}
.ac-gloss td.ac-ar { font-size: 1.25em; line-height: 1.9; text-align: right; }

.ac-questions { padding-right: 1.4em; padding-left: 0; }
.ac-questions li { margin-bottom: .9em; }
.ac-questions .ac-ar { display: block; font-size: 1.25em; line-height: 1.95; }
.ac-questions .ac-answer { color: var(--ac-good); }
.ac-qtype {
  display: inline-block;
  font-family: var(--ac-ui-font);
  font-size: .72em;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--ac-ink-soft);
}

/* Printing a levelled set means all of it, not just the tab on screen. */
.ac-printing .ac-sheet--level.is-hidden { display: block; }

@media (max-width: 782px) {
  .ac-tools { font-size: 15px; }
  .ac-masthead { padding: 20px 22px; }
  .ac-card { padding: 18px 18px; }
  .ac-tabs { flex-wrap: nowrap; overflow-x: auto; }
  .ac-stage { padding: 12px; max-height: none; }
  .ac-meter { padding: 12px 14px; }
  .ac-sheet--level { padding: 10mm 8mm; }
}