/* Free study tools: exam objectives checklist, acronym glossary, ports table and quiz, flashcards.
   Loaded after site.css on those four pages only. Sizes and colours come from site.css tokens. */

/* =========================== Shared bits =========================== */
.nw { white-space: nowrap; }
.kbd {
  display: inline-grid; place-items: center; min-width: 1.9em; padding: .05em .45em;
  border: 1px solid currentColor; border-bottom-width: 2px; border-radius: 6px;
  font: 600 var(--text-label)/1.4 var(--font-mono); letter-spacing: 0; opacity: .85;
}
.cl-link {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0; border: 0; background: none; cursor: pointer;
  font: 700 var(--text-sm)/1.2 var(--font-body); color: var(--brand);
  text-decoration: underline; text-decoration-thickness: .08em; text-underline-offset: .2em;
}
.cl-link:hover { color: var(--brand-hover); }
.cl-note { margin: 10px 0 0; font-size: var(--text-sm); line-height: 1.5; color: var(--ink-3); }
.cl-nojs, .fc-nojs, .pq-nojs { margin: 12px 0 0; font-size: var(--text-sm); line-height: 1.5; color: var(--ink-2); }
.js .cl-nojs, .js .fc-nojs, .js .pq-nojs { display: none; }
.fc-nojs, .pq-nojs { text-align: center; }
.section-night .pq-nojs { color: var(--night-ink-2); }
@keyframes tool-flash { from { background-color: var(--brand-soft); } to { background-color: transparent; } }
.gl-row:target, table.pt tr:target, .cl-obj:target { animation: tool-flash 2.4s ease-out; }

/* Filter rows (search + chips), reused by the glossary and the ports table */
.gl-controls { max-width: 940px; margin: 0 auto 28px; display: grid; gap: 14px; }
.no-js .gl-controls { display: none; }
.tf-row { display: grid; gap: 8px; }
@media (min-width: 760px) {
  .tf-row { grid-template-columns: 84px minmax(0, 1fr); align-items: start; }
  .tf-row .tf-label { padding-top: 14px; }
}
.tf-label { font: 600 var(--text-label)/1.2 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.faq-chips.tf-chips { justify-content: flex-start; }
/* Phones: each chip group is one swipeable line instead of a tall wall of chips. */
@media (max-width: 759px) {
  .faq-chips.tf-chips {
    flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch;
    margin-inline: calc(-1 * var(--gutter)); padding: 2px var(--gutter) 4px; scroll-padding-inline: var(--gutter);
  }
  .faq-chips.tf-chips::-webkit-scrollbar { display: none; }
  .faq-chips.tf-chips button { flex: none; }
}
.tf-row.tf-end { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 20px; }
.tf-end .faq-count { text-align: right; }
.tf-toggle {
  display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0; border: 0; background: none; cursor: pointer;
  font: 700 var(--text-sm)/1.2 var(--font-body); color: var(--ink); text-align: left;
}
.tf-switch { position: relative; flex: none; width: 42px; height: 26px; border-radius: 999px; background: var(--line-strong); transition: background-color .2s ease; }
.tf-switch::after { content: ""; position: absolute; top: 4px; left: 4px; width: 18px; height: 18px; border-radius: 50%; background: var(--surface); box-shadow: var(--shadow-1); transition: transform .2s ease; }
.tf-toggle[aria-pressed="true"] .tf-switch { background: var(--brand); }
.tf-toggle[aria-pressed="true"] .tf-switch::after { transform: translateX(16px); }
.tf-toggle:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 8px; }
.gl-empty { margin: 0; padding: 32px 0; text-align: center; color: var(--ink-2); }

/* =========================== 1. Exam objectives checklist =========================== */
.cl-layout { display: grid; gap: 36px; }
@media (min-width: 1100px) {
  .cl-layout { grid-template-columns: 290px minmax(0, 1fr); gap: 64px; align-items: start; }
  .cl-panel { position: sticky; top: 92px; }
}
.cl-panel { padding-top: 18px; border-top: 3px solid var(--ink); }
.cl-panel .kicker { margin-bottom: 14px; }
.no-js .cl-progress, .no-js .cl-actions, .no-js .cl-note { display: none; }
.cl-progress { display: grid; gap: 22px; }
@media (min-width: 600px) and (max-width: 1099px) { .cl-progress { grid-template-columns: 150px minmax(0, 1fr); align-items: center; gap: 32px; } }
.cl-ring { position: relative; width: 150px; aspect-ratio: 1; justify-self: center; }
@media (min-width: 1100px) { .cl-ring { justify-self: start; } }
.cl-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); overflow: visible; }
.cl-ring .trk { fill: none; stroke: var(--surface-2); stroke-width: 12; }
.cl-ring .val { fill: none; stroke: var(--brand); stroke-width: 12; stroke-linecap: round; stroke-dasharray: var(--p) 100; transition: stroke-dasharray .5s cubic-bezier(.2, .7, .2, 1); }
.cl-ring[data-zero] .val { opacity: 0; }
.cl-ring-c { position: absolute; inset: 0; margin: 0; display: grid; place-content: center; text-align: center; }
.cl-ring-c b { font: 800 var(--display-s)/1 var(--font-display); letter-spacing: -.045em; color: var(--ink); }
.cl-ring-c span { margin-top: 4px; font: 600 var(--text-label)/1.2 var(--font-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }
.cl-bars { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.cl-bars li { display: grid; gap: 5px; }
.cl-bars a { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; color: var(--ink); text-decoration: none; font-weight: 700; font-size: var(--text-sm); line-height: 1.3; }
.cl-bars a:hover .n { color: var(--brand); text-decoration: underline; }
.cl-bars .v { font: 600 var(--text-mono)/1 var(--font-mono); color: var(--ink-2); white-space: nowrap; }
.cl-bars .v b { color: var(--ink); }
.cl-bars .t { position: relative; display: block; height: 8px; width: calc(var(--w) / 27 * 100%); border-radius: 999px; background: color-mix(in srgb, var(--brand) 14%, var(--surface-2)); overflow: hidden; }
.cl-bars .t s { position: absolute; inset: 0 auto 0 0; width: calc(var(--d, 0) * 100%); border-radius: 999px; background: var(--brand); transition: width .45s cubic-bezier(.2, .7, .2, 1); }
.cl-bars li.is-full .t s { background: var(--coral); }
.cl-bars small { font: 500 var(--text-label)/1.2 var(--font-mono); color: var(--ink-3); }
.cl-actions { display: grid; gap: 6px; margin-top: 24px; }
.cl-actions .seg { width: fit-content; }
.cl-actions .seg button { padding: 0 14px; }
.cl-btns { display: flex; flex-wrap: wrap; gap: 0 20px; }

.cl-dom { scroll-margin-top: 84px; }
.cl-dom + .cl-dom { margin-top: clamp(44px, 6vw, 72px); }
.cl-dom-head { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 2px 18px; align-items: end; padding-bottom: 16px; border-bottom: 3px solid var(--ink); }
.cl-dom-n {
  grid-row: span 2; font: 800 var(--display-m)/.8 var(--font-display); letter-spacing: -.055em;
  color: transparent; -webkit-text-stroke: 1.6px color-mix(in srgb, var(--brand) 60%, transparent);
}
.cl-dom-head h3 { margin: 0; font-size: var(--step-2); }
.cl-dom-w { margin: 0; font: 500 var(--text-mono)/1.4 var(--font-mono); color: var(--ink-3); }
.cl-dom-w b { color: var(--coral-ink); font-weight: 600; }
.cl-dom-w a { font-weight: 600; color: var(--brand); text-decoration-thickness: .08em; text-underline-offset: .2em; }
.cl-dom-w .availability-label { color: var(--ink-3); font-family: var(--font-body); }
.cl-objs { list-style: none; margin: 0; padding: 0; }
.cl-obj { display: grid; grid-template-columns: 44px minmax(0, 1fr); column-gap: 18px; padding: 22px 0 18px; border-bottom: 1px solid var(--line-strong); scroll-margin-top: 84px; }
.cl-obj > :not(.cl-box) { grid-column: 2; }
.cl-box { grid-column: 1; grid-row: 1 / span 4; position: relative; width: 44px; height: 44px; }
.cl-cb {
  -webkit-appearance: none; appearance: none; display: block; margin: 0; width: 44px; height: 44px; cursor: pointer;
  border-radius: 14px; border: 2px solid var(--line-strong); background: var(--surface);
  transition: background-color .15s ease, border-color .15s ease, transform .15s ease;
}
.cl-cb:hover { border-color: var(--brand); }
.cl-cb:active { transform: scale(.94); }
.cl-cb:checked { background: var(--brand); border-color: var(--brand); }
.cl-cb:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.cl-tick { position: absolute; inset: 0; margin: auto; width: 24px; height: 24px; color: var(--on-brand); stroke-width: 3; pointer-events: none; opacity: 0; transform: scale(.5); transition: opacity .15s ease, transform .2s cubic-bezier(.2, .9, .3, 1.4); }
.cl-cb:checked + .cl-tick { opacity: 1; transform: none; }
.cl-name { margin: 7px 0 6px; font-size: var(--text-title); line-height: 1.3; text-wrap: pretty; }
.cl-name label { cursor: pointer; }
.cl-name code { margin-right: 4px; font: 600 var(--text-mono)/1 var(--font-mono); letter-spacing: 0; color: var(--coral-ink); vertical-align: 2px; }
.cl-obj.is-done .cl-name label { color: var(--ink-2); }
.cl-tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 8px; }
.cl-sum { margin: 0; max-width: 68ch; font-size: var(--text-ui); line-height: 1.6; color: var(--ink-2); }
.cl-foot { position: relative; margin-top: 6px; }
.cl-links { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 20px; }
.cl-links a { display: inline-block; padding: 12px 0; line-height: 1.35; font-weight: 700; font-size: var(--text-sm); color: var(--ink-2); text-decoration: none; }
.cl-links a::after { content: "→"; margin-left: 5px; color: var(--brand); transition: transform .18s ease; }
.cl-links a:hover { color: var(--brand); text-decoration: underline; }
.cl-links a:hover::after { transform: translateX(3px); }
.cl-links .availability-label { margin-left: 3px; color: var(--ink-3); }
.cl-topics summary {
  list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; min-height: 44px;
  font: 700 var(--text-sm)/1.2 var(--font-body); color: var(--ink);
}
.cl-topics summary::-webkit-details-marker { display: none; }
.cl-topics summary::before {
  content: ""; width: 9px; height: 9px; margin: 0 3px 0 2px; border-right: 2px solid var(--brand); border-bottom: 2px solid var(--brand);
  transform: rotate(-45deg); transition: transform .2s ease;
}
.cl-topics[open] summary::before { transform: rotate(45deg) translate(-2px, -2px); }
.cl-topics summary:hover { color: var(--brand); }
.cl-chips { list-style: none; margin: 2px 0 10px; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.cl-chips li { padding: .35rem .7rem; border-radius: 999px; background: var(--surface-2); color: var(--ink); font-size: var(--text-sm); line-height: 1.35; }
/* Wide rows: the links sit on the summary's line, at the right; the topic chips open below both. */
@media (min-width: 900px) {
  .cl-links { position: absolute; top: 0; right: 0; flex-wrap: nowrap; }
}
.cl-list[data-show="todo"] .cl-obj.is-done, .cl-list[data-show="done"] .cl-obj:not(.is-done) { display: none; }
.cl-empty { margin: 0; padding: 22px 0; color: var(--ink-3); font-size: var(--text-sm); }

/* Objective map: 27 squares, one row per domain */
.omap { max-width: 760px; margin: 0 auto; display: grid; gap: 10px; }
.om-row { display: grid; grid-template-columns: 52px minmax(0, 1fr); align-items: center; gap: 10px; }
.om-d { font: 800 var(--text-title)/1 var(--font-display); letter-spacing: -.02em; color: var(--ink); }
.om-d small { display: block; margin-top: 5px; font: 600 var(--text-label)/1 var(--font-mono); letter-spacing: 0; color: var(--ink-3); }
.om-cells { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 5px; }
.om-cells a {
  position: relative; display: grid; place-items: center; aspect-ratio: 1; border-radius: 10px;
  background: var(--c); color: var(--on-c); box-shadow: inset 0 0 0 1.5px var(--edge, transparent);
  font: 600 var(--text-label)/1 var(--font-mono); text-decoration: none; transition: transform .15s ease;
}
.om-cells a:hover { transform: translateY(-3px); color: var(--on-c); }
@media (min-width: 560px) { .om-row { grid-template-columns: 70px minmax(0, 1fr); gap: 14px; } .om-cells { gap: 8px; } .om-cells a { border-radius: 14px; font-size: var(--text-mono); } }
.om-sc { --c: var(--coral); --on-c: var(--night); }
.om-ex { --c: var(--brand); --on-c: var(--on-brand); }
.om-su { --c: color-mix(in srgb, var(--brand) 42%, var(--surface)); --on-c: var(--ink); }
.om-de { --c: color-mix(in srgb, var(--brand) 18%, var(--surface)); --on-c: var(--ink); }
.om-co { --c: var(--surface); --on-c: var(--ink); --edge: var(--ink-3); }
.om-new { position: absolute; top: -4px; right: -4px; width: 12px; height: 12px; border-radius: 50%; background: var(--ink); border: 2px solid var(--surface-2); }
.om-legend { list-style: none; margin: 28px auto 0; padding: 0; max-width: 820px; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 22px; font-size: var(--text-sm); color: var(--ink-2); }
.om-legend li { display: inline-flex; align-items: center; gap: 8px; }
.om-legend i { flex: none; width: 16px; height: 16px; border-radius: 5px; background: var(--c); box-shadow: inset 0 0 0 1.5px var(--edge, transparent); }
.om-legend i.om-new-key { width: 12px; height: 12px; border-radius: 50%; background: var(--ink); }
.om-legend b { color: var(--ink); }

/* SY0-701 comparison table */
.vs.v7 small { display: block; margin-top: 6px; font: 500 var(--text-label)/1.2 var(--font-mono); color: var(--ink-3); }

/* =========================== 2. Acronym glossary =========================== */
.gl-az { position: sticky; top: 68px; z-index: 5; margin: 0 calc(-1 * var(--gutter)) 8px; padding: 6px var(--gutter); background: color-mix(in srgb, var(--surface-2) 92%, transparent); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); }
.gl-az ol { list-style: none; margin: 0 auto; padding: 0; max-width: 1040px; display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none; }
.gl-az ol::-webkit-scrollbar { display: none; }
.gl-az li { flex: 1 0 auto; }
.gl-az a, .gl-az span { display: grid; place-items: center; min-width: 34px; height: 40px; border-radius: 10px; font: 700 var(--text-mono)/1 var(--font-mono); text-decoration: none; }
.gl-az a { color: var(--ink); }
.gl-az a:hover { background: var(--surface); color: var(--brand); }
.gl-az span { color: var(--line-strong); }
.gl-az a.is-off { color: var(--line-strong); pointer-events: none; }
.gl-list { max-width: 1040px; margin: 0 auto; }
.gl-letter { display: grid; gap: 0 28px; scroll-margin-top: 124px; }
@media (min-width: 900px) { .gl-letter { grid-template-columns: 72px minmax(0, 1fr); } .gl-l { position: sticky; top: 124px; align-self: start; } }
.gl-l { margin: 0; padding: 22px 0 4px; font: 800 var(--display-s)/1 var(--font-display); letter-spacing: -.04em; color: var(--brand); }
.gl-dl { margin: 0; }
.gl-row { display: grid; gap: 3px 24px; padding: 18px 0; border-bottom: 1px solid var(--line-strong); scroll-margin-top: 124px; }
@media (min-width: 720px) {
  .gl-row { grid-template-columns: 158px minmax(0, 1fr); }
  .gl-row > dd { grid-column: 2; }
  .gl-a { grid-row: 1 / span 3; padding-top: 1px; }
}
.gl-a { font: 600 var(--step-1)/1.25 var(--font-mono); letter-spacing: -.01em; color: var(--ink); overflow-wrap: anywhere; }
@media (min-width: 1100px) {
  .gl-dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 44px; }
  .gl-row { grid-template-columns: minmax(0, 1fr); align-content: start; }
  .gl-row > dd { grid-column: auto; }
  .gl-a { grid-row: auto; padding-top: 0; }
}
.gl-x { margin: 0; font-weight: 700; line-height: 1.4; color: var(--ink); }
.gl-x b { color: var(--coral-ink); }
.gl-d { margin: 0; max-width: 68ch; font-size: var(--text-ui); line-height: 1.55; color: var(--ink-2); }
.gl-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin: 6px 0 0; }
.gl-obj { display: inline-flex; align-items: center; min-height: 28px; padding: 0 .6rem; border-radius: 8px; background: var(--ink); color: var(--bg); font: 600 var(--text-label)/1 var(--font-mono); text-decoration: none; }
.gl-obj:hover { background: var(--brand); color: var(--on-brand); }
.gl-cat { font: 600 var(--text-label)/1.3 var(--font-mono); letter-spacing: .05em; text-transform: uppercase; color: var(--ink-3); }

.chips-link { max-width: 900px; margin-inline: auto; }
.chips.chips-link li { padding: 0; border: 0; background: none; }
.chips-link a {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 1rem; border-radius: 999px;
  border: 1.5px solid var(--line-strong); background: var(--surface); color: var(--ink);
  font: 600 var(--text-mono)/1 var(--font-mono); text-decoration: none; transition: border-color .15s ease, color .15s ease, transform .15s ease;
}
.chips-link a:hover { border-color: var(--brand); color: var(--brand); transform: translateY(-2px); }
.chips-link li:nth-child(3n + 1) a { border-color: color-mix(in srgb, var(--coral) 60%, var(--line-strong)); }

/* =========================== 3. Ports =========================== */
.swaps { list-style: none; margin: 0 auto; padding: 0; max-width: 1080px; display: grid; gap: 0 56px; border-top: 1px dashed var(--line-strong); }
@media (min-width: 960px) { .swaps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.swap { display: grid; grid-template-columns: minmax(0, 1fr) 40px minmax(0, 1fr); align-items: center; gap: 8px 14px; padding: 22px 0 20px; border-bottom: 1px dashed var(--line-strong); }
.sw-old, .sw-new { display: grid; gap: 6px; min-width: 0; }
.sw-new { text-align: right; }
.sw-old b, .sw-new b { font: 800 var(--display-s)/.9 var(--font-display); letter-spacing: -.045em; white-space: nowrap; }
.sw-old b.sm, .sw-new b.sm { font-size: var(--step-2); line-height: 1.1; letter-spacing: -.02em; white-space: normal; }
.sw-old b { color: var(--ink-3); text-decoration: line-through; text-decoration-color: var(--coral); text-decoration-thickness: .08em; }
.sw-old b.same { text-decoration: none; }
.sw-new b { color: var(--brand); }
.sw-old span, .sw-new span { font: 700 var(--text-ui)/1.3 var(--font-body); color: var(--ink-2); }
.sw-new span { color: var(--ink); }
.sw-arrow { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--coral-soft); color: var(--coral-ink); }
.sw-arrow .icon { width: 20px; height: 20px; stroke-width: 2.4; }
.sw-why { grid-column: 1 / -1; margin: 2px 0 0; font-size: var(--text-ui); line-height: 1.55; color: var(--ink-2); }

.pt-tool .gl-controls { max-width: 1100px; }
.pt-wrap { max-width: 1100px; margin: 0 auto; }
table.pt { min-width: 780px; }
table.pt thead th:first-child { width: 120px; }
table.pt th[scope="row"] { white-space: nowrap; }
.pt-n { display: block; font: 800 var(--step-2)/1 var(--font-display); letter-spacing: -.02em; color: var(--ink); }
.pt-p { display: block; margin-top: 6px; font: 600 var(--text-label)/1.2 var(--font-mono); letter-spacing: .06em; color: var(--ink-3); }
.pt-s { display: block; margin-bottom: 6px; color: var(--ink); }
.pt-use, .pt-alt { color: var(--ink-2); }
.pt-alt-l { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (max-width: 719px) {
  table.pt { min-width: 0; }
  table.pt caption { display: block; }
  table.pt thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  table.pt, table.pt tbody, table.pt tr, table.pt th, table.pt td { display: block; }
  table.pt tbody tr { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 6px 14px; padding: 16px; border-bottom: 1px solid var(--line); }
  table.pt tbody tr:last-child { border-bottom: 0; }
  table.pt tbody th[scope="row"], table.pt tbody td { padding: 0; border: 0; }
  table.pt tbody th[scope="row"] { grid-row: 1 / span 3; }
  table.pt tbody td { grid-column: 2; font-size: var(--text-sm); }
  .pt-n { font-size: var(--text-title); white-space: normal; }
  .pt-alt-l { position: static !important; width: auto; height: auto; overflow: visible; clip: auto; white-space: normal; font-weight: 700; color: var(--ink); }
}

.ranges { list-style: none; margin: 0 auto; padding: 0; max-width: 1000px; display: grid; gap: 10px; }
@media (min-width: 760px) { .ranges { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; } }
.ranges li { display: grid; align-content: start; gap: 6px; padding: 22px 22px 24px; border-radius: 18px; }
.ranges li:nth-child(1) { background: var(--brand); color: var(--on-brand); }
.ranges li:nth-child(2) { background: color-mix(in srgb, var(--brand) 26%, var(--surface)); color: var(--ink); }
.ranges li:nth-child(3) { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 2px var(--line-strong); }
@media (min-width: 760px) {
  .ranges li { border-radius: 0; }
  .ranges li:nth-child(1) { border-radius: 18px 0 0 18px; }
  .ranges li:nth-child(3) { border-radius: 0 18px 18px 0; }
}
.ranges b { font: 800 var(--step-2)/1.1 var(--font-display); letter-spacing: -.02em; }
.rg-name { font-weight: 700; font-size: var(--text-ui); }
.rg-count { font: 500 var(--text-mono)/1.4 var(--font-mono); opacity: .82; }

.pq { max-width: 660px; margin: 0 auto; }
.no-js .pq { display: none; }
.section-night .pq-card a:not(.btn) { color: var(--brand); }
.section-night .pq-card a:not(.btn):hover { color: var(--brand-hover); }
.pq-port { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px; margin: 4px 0 8px; color: var(--ink); }
.pq-port-l { font: 600 var(--text-label)/1 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.pq-port b { font: 800 var(--display-m)/.9 var(--font-display); letter-spacing: -.045em; color: var(--brand); }
.pq-port small { font: 600 var(--text-mono)/1 var(--font-mono); color: var(--ink-3); }
.pq-score { font: 600 var(--text-mono)/1 var(--font-mono); color: var(--ink-2); }
.pq-card .opt .label { padding-top: 5px; }
.pq-card .opt .yours { vertical-align: 1px; }
.pq-card .qresult { margin: 12px 0 14px; }
.pq-final { margin: 6px 0 10px; font: 800 var(--step-2)/1.2 var(--font-display); color: var(--ink); }
.pq-final:focus { outline: none; }
.pq-card .qactions .arrow-link { font-size: var(--text-ui); }

/* =========================== 4. Flashcards =========================== */
.fc { max-width: 880px; margin: 0 auto; }
.no-js .fc { display: none; }
.fc-decks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-bottom: 30px; }
@media (min-width: 760px) { .fc-decks { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; } }
.fc-deck {
  display: grid; align-content: start; gap: 6px; min-height: 96px; padding: 14px 16px 16px; text-align: left; cursor: pointer;
  border-radius: 18px; border: 2px solid var(--line-strong); background: var(--surface); color: var(--ink); font: inherit;
  transition: border-color .18s ease, background-color .18s ease, color .18s ease, transform .18s ease;
}
.fc-deck:hover { border-color: var(--brand); transform: translateY(-2px); }
.fc-deck b { font: 800 var(--text-title)/1.15 var(--font-display); letter-spacing: -.015em; }
.fc-deck small { font: 600 var(--text-label)/1.2 var(--font-mono); color: var(--ink-3); }
.fc-mini { display: block; height: 6px; margin-top: auto; border-radius: 999px; background: var(--surface-2); overflow: hidden; }
.fc-mini i { display: block; height: 100%; width: calc(var(--k, 0) * 100%); border-radius: 999px; background: var(--brand); transition: width .4s ease; }
.fc-deck[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--bg); }
.fc-deck[aria-pressed="true"] small { color: color-mix(in srgb, var(--bg) 78%, transparent); }
.fc-deck[aria-pressed="true"] .fc-mini { background: color-mix(in srgb, var(--bg) 22%, transparent); }
.fc-deck[aria-pressed="true"] .fc-mini i { background: var(--coral); }

.fc-status { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 16px; margin: 0 0 14px; font: 600 var(--text-mono)/1.3 var(--font-mono); color: var(--ink-3); }
.fc-scene { position: relative; isolation: isolate; perspective: 1600px; }
.fc-scene::before {
  content: ""; position: absolute; z-index: -1; inset: 14px 16px -10px 16px; border-radius: var(--r-l);
  background: var(--surface-2); border: 1px solid var(--line-strong);
}
.fc-card { display: block; width: 100%; margin: 0; padding: 0; border: 0; border-radius: var(--r-l); background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.fc-card:focus-visible { outline: 3px solid var(--focus); outline-offset: 5px; }
.fc-inner { display: grid; min-height: clamp(250px, 36vw, 340px); transform-style: preserve-3d; transition: transform .6s cubic-bezier(.2, .7, .2, 1); }
.fc-card.is-flipped .fc-inner { transform: rotateY(180deg); }
.fc-card.no-anim .fc-inner { transition: none; }
@keyframes fc-in { from { opacity: .35; transform: translateY(10px) scale(.985); } to { opacity: 1; transform: none; } }
.fc-card.is-new:not(.is-flipped) .fc-front { animation: fc-in .32s cubic-bezier(.2, .7, .2, 1); }
.fc-face {
  grid-area: 1 / 1; display: flex; flex-direction: column; justify-content: center; gap: 12px; min-width: 0;
  padding: clamp(22px, 4.5vw, 48px); border-radius: var(--r-l);
  -webkit-backface-visibility: hidden; backface-visibility: hidden;
}
.fc-front { align-items: center; text-align: center; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-2); }
.fc-back { transform: rotateY(180deg); background: var(--night); color: var(--night-ink); border: 1px solid var(--night-line); box-shadow: var(--shadow-2); }
.fc-kind { font: 600 var(--text-label)/1 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--coral-ink); }
.fc-back .fc-kind { color: var(--night-accent); }
.fc-term { max-width: 100%; font: 800 var(--display-m)/1 var(--font-display); letter-spacing: -.04em; color: var(--ink); overflow-wrap: anywhere; }
.fc-term.long { font-size: var(--step-3); line-height: 1.08; letter-spacing: -.03em; }
.fc-term.xlong { font-size: var(--step-2); line-height: 1.25; letter-spacing: -.015em; }
.fc-cue { font-size: var(--text-sm); color: var(--ink-3); }
.fc-ans-t { font: 800 var(--step-2)/1.2 var(--font-display); letter-spacing: -.015em; color: var(--night-ink); }
.fc-ans-t:empty, .fc-ans:empty { display: none; }
.fc-ans { max-width: 60ch; font-size: var(--step-0); line-height: 1.6; color: var(--night-ink-2); }
.fc-done {
  display: grid; place-content: center; justify-items: center; gap: 8px; min-height: clamp(250px, 36vw, 340px); padding: 32px 24px;
  text-align: center; border: 2px dashed var(--line-strong); border-radius: var(--r-l); background: var(--bg);
}
.fc-done:focus { outline: none; }
.fc-done-t { margin: 0; font: 800 var(--step-2)/1.2 var(--font-display); color: var(--ink); }
.fc-done-s { margin: 0; max-width: 46ch; color: var(--ink-2); }
.fc-done-b { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 10px; }
.fc-rate { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 26px; }
.fc-rate .btn { min-width: 150px; }
.fc-rate .nw { white-space: nowrap; }
.kbd { margin-left: 2px; }
.fc-meter { display: grid; gap: 12px; margin-top: 30px; }
@media (min-width: 640px) { .fc-meter { grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 24px; } .fc-bar { grid-column: 1 / -1; } }
.fc-bar { display: flex; height: 10px; border-radius: 999px; background: var(--surface-2); overflow: hidden; }
.fc-bar i { display: block; height: 100%; width: 0; transition: width .4s ease; }
.fc-bar .k, .fc-legend .k { background: var(--brand); }
.fc-bar .l, .fc-legend .l { background: var(--coral); }
.fc-legend { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 20px; font-size: var(--text-sm); color: var(--ink-2); }
.fc-legend li { display: inline-flex; align-items: center; gap: 8px; }
.fc-legend i { flex: none; width: 12px; height: 12px; border-radius: 4px; }
.fc-legend .n { background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line-strong); }
.fc-legend b { color: var(--ink); }
.fc-hint { margin: 14px 0 0; text-align: center; font-size: var(--text-sm); color: var(--ink-3); }
.fc-stage .cl-note { text-align: center; }

.stairs { list-style: none; margin: 0 auto; padding: 0; max-width: 940px; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; align-items: end; }
.stairs li { display: grid; gap: 3px; text-align: center; }
.st-bar { display: block; height: calc(var(--h) * 2.2px + 12px); margin-bottom: 10px; border-radius: 14px 14px 4px 4px; background: linear-gradient(180deg, var(--brand), color-mix(in srgb, var(--brand) 45%, var(--surface))); }
.stairs .again .st-bar { background: var(--coral); }
.stairs b { font: 800 var(--text-title)/1.15 var(--font-display); color: var(--ink); }
.stairs li > span:last-child { font-size: var(--text-sm); line-height: 1.35; color: var(--ink-2); }
@media (max-width: 699px) {
  .stairs { grid-template-columns: 1fr; gap: 16px; }
  .stairs li { grid-template-columns: auto minmax(0, 1fr); align-items: baseline; gap: 2px 12px; text-align: left; }
  .st-bar { grid-column: 1 / -1; grid-row: 2; width: calc(var(--h) * 1%); min-width: 14px; height: 12px; margin: 4px 0 0; border-radius: 999px; }
}

.fc-lists { max-width: 980px; margin: 0 auto; border-top: 1px solid var(--line-strong); }
.fc-list { border-bottom: 1px solid var(--line-strong); }
.fc-list summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: minmax(0, 1fr) auto 28px; align-items: center; gap: 14px; padding: 20px 4px; }
.fc-list summary::-webkit-details-marker { display: none; }
.fc-list summary:hover .fc-list-n { color: var(--brand); }
.fc-list-n { font: 800 var(--step-2)/1.2 var(--font-display); letter-spacing: -.015em; color: var(--ink); }
.fc-list-c { font: 600 var(--text-mono)/1 var(--font-mono); color: var(--ink-3); }
.fc-list summary .icon { width: 28px; height: 28px; padding: 5px; border-radius: 9px; background: var(--surface-2); color: var(--brand); transition: transform .2s ease; }
.fc-list[open] summary .icon { transform: rotate(45deg); background: var(--brand-soft); }
.fc-dl { margin: 0 0 26px; columns: 2 340px; column-gap: 44px; }
.fc-dl > div { break-inside: avoid; padding: 11px 4px; border-top: 1px dashed var(--line); }
.fc-dl dt { font: 600 var(--text-ui)/1.35 var(--font-mono); color: var(--ink); }
.fc-dl dd { margin: 3px 0 0; font-size: var(--text-sm); line-height: 1.55; color: var(--ink-2); }
.fc-dl dd b { color: var(--ink); }

@media (prefers-reduced-motion: reduce) {
  .fc-inner { transition: none; }
  .cl-tick, .cl-ring .val, .cl-bars .t s { transition: none; }
}
@media (forced-colors: active) {
  .cl-cb, .fc-deck, .fc-face, .om-cells a { border: 1px solid CanvasText; }
  .cl-cb:checked { background: Highlight; }
}

/* ============================ Skill map (/security-plus-practice-test/skill-map/) ============================ */
.sm-score { display: grid; justify-items: center; gap: 4px; margin-top: 1.6rem; }
.sm-level { display: grid; justify-items: center; gap: 6px; }
.sm-level-k { font-family: var(--font-mono); font-size: var(--text-label); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
.sm-level b { font-family: var(--font-display); font-size: var(--display-s); line-height: 1; color: var(--brand); }
.sm-level-bar { width: min(260px, 70vw); height: 8px; border-radius: 999px; background: var(--line); overflow: hidden; }
.sm-level-bar i { display: block; height: 100%; width: 0; border-radius: inherit; background: linear-gradient(90deg, var(--brand), var(--mint)); transition: width .6s ease; }
.sm-level small { font-size: var(--text-sm); color: var(--ink-2); }
.sm-score .hero-facts { margin-top: 1rem; }

.sm-next { max-width: 780px; margin-inline: auto; padding: clamp(20px, 3vw, 28px) 0 clamp(20px, 3vw, 28px) clamp(20px, 3vw, 32px); border-left: 4px solid var(--coral); }
.sm-next h2 { font-size: var(--step-3); margin-bottom: .4rem; }
.sm-next p:not(.eyebrow) { color: var(--ink-2); font-size: var(--step-1); line-height: 1.55; max-width: 60ch; }

.sm-legend { list-style: none; padding: 0; margin: 0 0 28px; display: flex; flex-wrap: wrap; gap: 8px 20px; font-size: var(--text-sm); color: var(--ink-2); }
.sm-legend li { display: inline-flex; align-items: center; gap: 8px; }
.sm-legend i { width: 14px; height: 14px; border-radius: 50%; border: 3px solid var(--c); }
.k-none { --c: var(--line-strong); } .k-few { --c: var(--ink-3); } .k-weak { --c: var(--coral); } .k-mid { --c: var(--brand); } .k-strong { --c: var(--mint); }

.sm-map { display: grid; gap: clamp(28px, 4vw, 44px); }
.sm-lane h3 { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; font-size: var(--text-title); margin-bottom: 14px; }
.sm-lane h3 small { font-family: var(--font-mono); font-size: var(--text-mono); font-weight: 500; color: var(--ink-3); }
.sm-dno { font-family: var(--font-mono); font-size: var(--text-mono); color: var(--brand); }
/* Objectives sit on a track line, like stops on a route */
.sm-nodes { list-style: none; padding: 0; margin: 0; position: relative; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 18px 12px; }
.sm-nodes::before { content: ""; position: absolute; left: 36px; right: 36px; top: 36px; height: 2px; background: var(--line); z-index: -1; }
.sm-node { --p: 0; --c: var(--line-strong); }
.sm-node.is-few { --c: var(--ink-3); } .sm-node.is-weak { --c: var(--coral); } .sm-node.is-mid { --c: var(--brand); } .sm-node.is-strong { --c: var(--mint); }
.sm-node a { display: grid; justify-items: start; gap: 8px; color: var(--ink); text-decoration: none; border-radius: var(--r); padding-bottom: 4px; }
.sm-ring {
  width: 72px; height: 72px; border-radius: 50%; display: grid; place-items: center; position: relative;
  background: conic-gradient(var(--c) calc(var(--p) * 1%), var(--line) 0);
  transition: transform .2s ease;
}
.sm-ring::before { content: ""; position: absolute; inset: 7px; border-radius: 50%; background: var(--bg); }
.sm-node.is-none .sm-ring { background: var(--line); }
.sm-ring b { position: relative; font-family: var(--font-mono); font-size: var(--text-ui); font-weight: 600; color: var(--ink); }
.sm-node.is-weak .sm-ring b { color: var(--coral-ink); }
.sm-node a:hover .sm-ring { transform: scale(1.06); }
.sm-name { font-size: var(--text-sm); line-height: 1.35; font-weight: 600; max-width: 22ch; }
.sm-stat { font-family: var(--font-mono); font-size: var(--text-label); color: var(--ink-3); }
.sm-node.is-weak .sm-stat { color: var(--coral-ink); }
.sm-node.is-strong .sm-stat { color: var(--mint); }
@media (max-width: 479px) {
  .sm-nodes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sm-nodes::before { display: none; }
}

.sm-ways { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 0; border-top: 2px solid var(--ink); }
.sm-ways a { display: grid; gap: 4px; padding: 18px 16px 18px 0; color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--line); }
.sm-ways a:hover b { color: var(--brand); }
.sm-ways b { font-family: var(--font-display); font-size: var(--text-title); }
.sm-ways span { font-size: var(--text-sm); color: var(--ink-2); }
.sm-priv { max-width: 780px; }
.sm-priv h2 { font-size: var(--step-2); }
.sm-priv p { color: var(--ink-2); }
@media (prefers-reduced-motion: reduce) { .sm-level-bar i, .sm-ring { transition: none; } }
@media (forced-colors: active) { .sm-ring { border: 2px solid CanvasText; } }