/* CA ANZ Audit & Analytics study cards. All selectors are .ac-* so nothing here
   can reach the rest of the app. Colours match the app's dark theme. */

/* These three are ordinary list screens and must be padded like every other one in
   the app (see the shared rule in styles.css). Without this they render flush to the
   left edge and up underneath the status bar, and the header h1 falls back to the
   browser's default 2em — which reads as the page being zoomed in. */
#view-audit-home, #view-audit-chapters, #view-audit-topics {
  --ac-accent: #6FCFBF;
  padding: calc(var(--safe-top) + 20px) 16px calc(var(--nav-h) + 16px);
  overflow-y: auto;
}

/* Mirrors .lib-header / .lib-title, so the audit screens sit at the same size and
   rhythm as Case Law, ARITA and the rest. */
.cat-head { display: flex; align-items: center; gap: 10px; padding: 0 4px 18px; }
.cat-head > div { min-width: 0; }
.cat-title { margin: 0; font-size: 24px; font-weight: 700; line-height: 1.2; }

.ac-eyebrow { margin: 0 0 2px; font: 600 11px/1 ui-monospace, "SF Mono", Consolas, monospace;
  letter-spacing: .12em; text-transform: uppercase; color: #6FCFBF; }
.ac-list { display: grid; gap: 8px; }
.ac-row { display: grid; grid-template-columns: 34px 1fr auto auto; align-items: center; gap: 10px;
  width: 100%; padding: 14px 14px; border: 1px solid #2A2A31; border-radius: 14px; background: #17171C;
  color: inherit; font: inherit; text-align: left; }
.ac-row > .ti { font-size: 20px; color: #6FCFBF; }
.ac-row-text { display: grid; gap: 3px; min-width: 0; }
.ac-row-text b { font-size: 16px; font-weight: 650; }
.ac-row-text span { font-size: 13.5px; color: #A2A2AB; }
.ac-row-go { font-size: 16px; color: #6A6A73; }
.ac-pending { font: 600 10px ui-monospace, monospace; letter-spacing: .1em; text-transform: uppercase;
  color: #6A6A73; border: 1px solid #3A3A43; border-radius: 999px; padding: 3px 7px; }
.ac-empty { padding: 20px 16px; color: #A2A2AB; }

/* ---------------- the deck ---------------- */
#view-audit-deck { position: fixed; inset: 0; z-index: 40; background: #0F0F12; }
.ac-stage { position: absolute; inset: 0; display: flex; flex-direction: column;
  background: #0F0F12; color: #EDEDEF; touch-action: pan-y; user-select: none; -webkit-user-select: none;
  font-family: -apple-system, "SF Pro Text", "Segoe UI", Roboto, system-ui, sans-serif; }
.ac-bar { padding: calc(var(--safe-top) + 14px) 20px 0; display: grid; gap: 8px; }
.ac-meta { display: flex; justify-content: space-between; align-items: center; }
.ac-close { display: inline-flex; align-items: center; gap: 2px; padding: 4px 0; border: 0; background: none;
  font-size: 15px; color: #A2A2AB; }
.ac-stamp { font: 600 12px ui-monospace, "SF Mono", Consolas, monospace; color: #A2A2AB;
  font-variant-numeric: tabular-nums; }

.ac-progress { display: flex; gap: 8px; align-items: center; height: 6px; }
.ac-grp { display: flex; gap: 3px; align-items: center; transition: flex .28s ease; }
.ac-seg { flex: 1; height: 2px; border-radius: 2px; background: #2A2A31;
  transition: height .25s ease, background .25s ease; }
.ac-seg.ac-on { background: rgba(111, 207, 191, .38); }
.ac-grp.ac-cur .ac-seg { height: 5px; background: #3A3A43; }
.ac-grp.ac-cur .ac-seg.ac-on { background: #6FCFBF; }

.ac-subhead { display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
  padding: 6px 0 12px; border-bottom: 1px solid #2A2A31; overflow: hidden; }
.ac-subhead-name { margin: 0; font: 700 25px/1.1 "IBM Plex Sans Condensed", "Arial Narrow", sans-serif;
  transition: opacity .28s ease; }
.ac-subhead-pos { font: 600 13px ui-monospace, monospace; color: #6FCFBF; white-space: nowrap;
  font-variant-numeric: tabular-nums; transition: opacity .28s ease; }
.ac-subhead.ac-swap .ac-subhead-name, .ac-subhead.ac-swap .ac-subhead-pos { opacity: 0; transition-duration: .16s; }

.ac-viewport { flex: 1; position: relative; overflow: hidden; }
/* Explicit, because will-change promotes the track to its own composited layer
   and a backdrop-filtered sibling can otherwise end up painting underneath it. */
.ac-track { display: flex; height: 100%; will-change: transform; position: relative; z-index: 1;
  transition: transform .32s cubic-bezier(.2, .8, .2, 1); }

.ac-cue { position: absolute; top: 0; bottom: 0; z-index: 4; width: 3px; background: #6FCFBF; opacity: 0;
  pointer-events: none; transition: opacity .3s ease, width .2s ease; }
.ac-cue.ac-left { left: 0; border-radius: 0 3px 3px 0; }
.ac-cue.ac-right { right: 0; border-radius: 3px 0 0 3px; }

.ac-veil { position: absolute; inset: 0; z-index: 5; display: flex; flex-direction: column; justify-content: center;
  gap: 12px; padding: 0 28px 6%; pointer-events: none; opacity: 0; background: rgba(15, 15, 18, .42);
  -webkit-backdrop-filter: blur(9px); backdrop-filter: blur(9px); will-change: opacity; }
.ac-vm-row { margin: 0; display: grid; grid-template-columns: 20px 1fr; gap: 10px; align-items: baseline;
  font: 600 16px/1.25 inherit; color: #6A6A73; text-shadow: 0 1px 10px rgba(0, 0, 0, .6); }
.ac-vm-row .ac-i { font: 600 12px ui-monospace, monospace; }
.ac-vm-row.ac-done { color: #A2A2AB; }
.ac-vm-row.ac-now { color: #EDEDEF; }
.ac-vm-row.ac-now .ac-i { color: #6FCFBF; }
.ac-vm-dir { display: block; margin-bottom: 3px; font: 600 11px ui-monospace, monospace; letter-spacing: .14em;
  text-transform: uppercase; color: #6FCFBF; }
.ac-vm-name { display: block; font: 700 34px/1.02 "IBM Plex Sans Condensed", "Arial Narrow", sans-serif; }

/* Apply cards close a subtopic and link out to My Capability Learn. Amber-gold,
   so they read as a signpost rather than as more content. */
.ac-apply-card { justify-content: center; }
.ac-apply { display: grid; gap: .5em; padding: 1.1em 1.2em; border-radius: 16px;
  border: 1px solid rgba(240, 192, 116, .45); background: rgba(240, 192, 116, .1); }
.ac-apply-kicker { margin: 0; font: 600 .72em ui-monospace, monospace; letter-spacing: .14em;
  text-transform: uppercase; color: #F0C074; }
.ac-apply-name { margin: 0; font: 700 1.5em/1.15 "IBM Plex Sans Condensed", "Arial Narrow", sans-serif;
  color: #EDEDEF; }
.ac-apply-covers { margin: 0; font-size: .95em; line-height: 1.4; color: #A2A2AB; }
.ac-apply-go { justify-self: start; margin-top: .3em; display: inline-flex; align-items: center; gap: 6px;
  font: 600 .95em inherit; color: #F0C074; }

/* Return pill — bottom of the screen, easiest place to reach one-handed, and
   present only while you are inside a linked visit. */
.ac-back-pill { position: absolute; left: 50%; transform: translateX(-50%);
  bottom: calc(16px + env(safe-area-inset-bottom)); z-index: 12;
  display: inline-flex; align-items: center; gap: 7px;
  padding: 10px 18px; border-radius: 999px; border: 1px solid #3A3A43;
  background: rgba(34, 34, 42, .95); color: #EDEDEF;
  font: 600 14px -apple-system, "SF Pro Text", system-ui, sans-serif;
  box-shadow: 0 8px 22px rgba(0, 0, 0, .5); }

/* The zoom-out: the whole topic as concepts, the current one lit. */
/* Sits on the stage rather than inside the viewport, and paints with a solid
   ground rather than a backdrop filter: the track is a composited layer, and a
   backdrop-filtered sibling inside the same parent ended up painting beneath it. */
.ac-zoom { position: absolute; inset: 0; z-index: 10; opacity: 0; pointer-events: none;
  overflow-y: auto; background: #101015; }
.ac-zoom.ac-on { pointer-events: auto; }
.ac-zoom-in { padding: 18px 22px 30px; display: grid; gap: 14px; }
.ac-zoom-title { margin: 0; font: 700 22px/1.15 "IBM Plex Sans Condensed", "Arial Narrow", sans-serif;
  color: #A2A2AB; }
.ac-zg { display: grid; gap: 3px; }
.ac-zg-head { margin: 0 0 3px; display: grid; grid-template-columns: 20px 1fr; gap: 8px; align-items: baseline;
  font: 700 17px/1.15 "IBM Plex Sans Condensed", "Arial Narrow", sans-serif; color: #EDEDEF; }
.ac-zg-head .ac-i { font: 600 11px ui-monospace, monospace; color: #6FCFBF; }
.ac-zc { margin: 0 0 0 28px; font: 500 14px/1.4 inherit; color: #8E8E97; }
.ac-zc.ac-zc-on { color: #6FCFBF; font-weight: 700; }
.ac-zc.ac-zc-on::before { content: "▸ "; }

/* Abbreviations: readable as ordinary text, with a faint underline as the only
   hint that tapping gives you the name. Anyone who knows the term ignores it. */
.ac-ab { font: inherit; color: inherit; background: none; border: 0; padding: 0;
  border-bottom: 1px dotted #6A6A73; position: relative; cursor: pointer; }
.ac-ab.ac-ab-on { border-bottom-color: #6FCFBF; color: #6FCFBF; }
.ac-ab-pop { position: absolute; left: 50%; top: calc(100% + 7px); transform: translateX(-50%);
  z-index: 8; white-space: normal; width: max-content; max-width: 240px;
  padding: 7px 10px; border-radius: 9px; border: 1px solid #3A3A43; background: #22222A;
  color: #EDEDEF; font: 500 13px/1.35 -apple-system, "SF Pro Text", system-ui, sans-serif;
  text-align: left; box-shadow: 0 8px 22px rgba(0, 0, 0, .5); }

/* ---------------- a card ---------------- */
.ac-card { --ac-k: 1; flex: 0 0 100%; height: 100%; overflow: hidden;
  padding: 14px 20px calc(20px + env(safe-area-inset-bottom)) 22px;
  display: flex; flex-direction: column; gap: .6em; font-size: calc(17px * var(--ac-k)); }
.ac-card.ac-tall { overflow-y: auto; scrollbar-width: none; }
.ac-card.ac-tall::-webkit-scrollbar { display: none; }
.ac-card h1 { margin: 0; font: 700 1.55em/1.05 "IBM Plex Sans Condensed", "Arial Narrow", sans-serif;
  letter-spacing: -.005em; text-wrap: balance; }
.ac-t { color: #6FCFBF; font-weight: 650; }

.ac-ask { border: 1px solid rgba(240, 192, 116, .38); background: rgba(240, 192, 116, .09);
  border-radius: 14px; padding: .8em 1em .9em; display: grid; gap: .4em; transition: padding .3s ease; }
.ac-ask-q { margin: 0; font: 600 1.35em/1.22 "IBM Plex Sans Condensed", "Arial Narrow", sans-serif;
  color: #EDEDEF; text-wrap: balance; }
.ac-label { margin: 0; font: 600 .68em ui-monospace, monospace; letter-spacing: .12em; text-transform: uppercase;
  color: #BBA6FF; }
.ac-lead-in { margin: 0; font-size: .92em; line-height: 1.4; color: #DADADF; }
.ac-answer { display: flex; flex-direction: column; gap: .5em;
  transition: opacity .35s ease .05s, transform .35s ease .05s; }
.ac-card:not(.ac-revealed) .ac-answer { opacity: 0; transform: translateY(8px); visibility: hidden; pointer-events: none; }
.ac-card.ac-revealed .ac-ask { padding: .5em .8em; }
.ac-card.ac-revealed .ac-ask-q { font: 600 1em/1.3 "IBM Plex Sans Condensed", "Arial Narrow", sans-serif; color: #F0C074; }
/* the scenario stays visible while you read the answer */
.ac-card.ac-revealed .ac-lead-in { font-size: .86em; color: #A2A2AB; }
.ac-card.ac-measuring .ac-ask, .ac-card.ac-measuring .ac-answer { transition: none; }
.ac-card.ac-check .ac-ask { border-color: rgba(187, 166, 255, .45); background: rgba(187, 166, 255, .08); }
.ac-card.ac-check.ac-revealed .ac-ask-q { color: #BBA6FF; }

/* content blocks */
.ac-panel { display: grid; gap: .45em; padding: .6em .8em; border: 1px solid #2A2A31; border-radius: 12px; background: #17171C; }
.ac-say { margin: 0; font-size: 1em; line-height: 1.42; text-wrap: pretty; }
.ac-center { text-align: center; }

.ac-cmp { display: grid; grid-template-columns: 1fr 1fr; gap: .5em; }
.ac-cmp p { margin: 0; padding: .7em .8em; border: 1px solid #2A2A31; border-radius: 12px; background: #17171C;
  font-size: 1em; line-height: 1.38; }

.ac-nest { display: grid; gap: .5em; padding: .7em; border: 1.5px solid rgba(111, 207, 191, .38); border-radius: 14px; }
.ac-nest-in { display: grid; grid-template-columns: 1fr 1fr; gap: .45em; }
.ac-nest-in div { padding: .55em .7em; border-radius: 10px; background: #202027; font-size: .98em; line-height: 1.32; }

.ac-chain { list-style: none; margin: 0; padding: 0; display: grid; gap: .45em; }
.ac-chain li { position: relative; padding: .5em .75em .5em 1.95em; border-radius: 9px; background: #202027;
  font-size: 1em; line-height: 1.35; }
.ac-chain li::before { content: ""; position: absolute; left: .78em; top: 1em; width: .48em; height: .48em;
  border-radius: 50%; background: #6FCFBF; }
.ac-chain li + li::after { content: ""; position: absolute; left: 1.01em; top: -.5em; width: 2px; height: .55em; background: #3A3A43; }

.ac-rows { list-style: none; margin: 0; padding: 0; display: grid; }
.ac-rows li { display: grid; grid-template-columns: 1.5em minmax(0, 1fr); gap: .7em; align-items: start; padding: .6em 0;
  font-size: 1em; line-height: 1.4; }
.ac-rows li + li { border-top: 1px solid #2A2A31; }
.ac-rows li:first-child { padding-top: .1em; } .ac-rows li:last-child { padding-bottom: .1em; }
.ac-rows svg, .ac-scale svg { width: 1.4em; height: 1.4em; margin-top: .1em; stroke: #6FCFBF; fill: none;
  stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

.ac-model { display: flex; flex-direction: column; align-items: stretch; gap: .15em; }
.ac-rmm { display: grid; gap: .2em; padding: .45em; border: 1px solid rgba(157, 189, 255, .35); border-radius: 14px;
  background: rgba(143, 184, 255, .08); }
.ac-rmm-head { padding: .1em .15em; font: 600 .72em ui-monospace, monospace; letter-spacing: .1em;
  text-transform: uppercase; color: #9DBDFF; }
.ac-tile { display: grid; grid-template-columns: 1.8em minmax(0, 1fr); gap: .45em; align-items: start; padding: .45em .55em;
  border-radius: 10px; background: rgba(255, 255, 255, .045); font-size: .98em; line-height: 1.36; }
.ac-tile.ac-plain { background: transparent; grid-template-columns: 1fr; padding-top: .2em; color: #DADADF; }
.ac-code { font: 600 1.05em/1.3 ui-monospace, monospace; color: #9DBDFF; }
.ac-tile.ac-auditor { border: 1px solid rgba(111, 207, 191, .38); background: rgba(111, 207, 191, .11); }
.ac-tile.ac-auditor .ac-code { color: #6FCFBF; }
.ac-tile.ac-result { border: 1.5px solid rgba(237, 237, 239, .6); background: transparent; }
.ac-tile.ac-result .ac-code { color: #EDEDEF; }
.ac-op { align-self: center; font: 500 1.1em/1 ui-monospace, monospace; color: #6A6A73; }

.ac-five { list-style: none; margin: 0; padding: 0; display: grid; gap: .5em; counter-reset: req; }
.ac-five li { counter-increment: req; display: grid; grid-template-columns: 1.9em minmax(0, 1fr); align-items: center; gap: .6em;
  padding: .7em .75em; border-radius: 12px; border: 1px solid #2A2A31; background: #17171C;
  font-size: 1em; font-weight: 600; line-height: 1.3; }
.ac-five li::before { content: counter(req); font: 600 1.05em ui-monospace, monospace; color: #6FCFBF; text-align: center; }

.ac-attrs { display: grid; gap: .35em; }
.ac-attrs div { padding: .5em .75em; border-radius: 9px; background: #202027; font-size: 1em; font-weight: 600; line-height: 1.32; }

.ac-watch { list-style: none; margin: 0; padding: 0; display: grid; gap: .5em; }
.ac-watch li { display: grid; grid-template-columns: 1.4em minmax(0, 1fr); gap: .6em; align-items: start; font-size: 1em; line-height: 1.38; }
.ac-watch li::before { content: "!"; display: grid; place-items: center; width: 1.4em; height: 1.4em;
  border: 1.5px solid rgba(111, 207, 191, .38); border-radius: 50%; font: 700 .8em/1 ui-monospace, monospace; color: #6FCFBF; }

.ac-chips { display: flex; flex-wrap: wrap; gap: .35em; }
.ac-chips span { padding: .35em .7em; border-radius: 999px; background: #202027; font-size: .95em; line-height: 1.25; }

.ac-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: .3em; counter-reset: s; }
.ac-steps li { counter-increment: s; position: relative; display: grid; grid-template-columns: 1.6em minmax(0, 1fr); gap: .65em;
  align-items: center; font-size: 1em; line-height: 1.35; }
.ac-steps li::before { content: counter(s); display: grid; place-items: center; width: 1.6em; height: 1.6em;
  border: 1.5px solid #6FCFBF; border-radius: 50%; font: 600 .8em/1 ui-monospace, monospace; color: #6FCFBF; }
.ac-steps li + li::after { content: ""; position: absolute; left: .76em; top: -.42em; width: 1.5px; height: .45em; background: #3A3A43; }

.ac-scale { display: grid; grid-template-columns: 1fr auto 1fr; gap: .5em; align-items: center; padding: .6em .7em;
  border: 1px solid #2A2A31; border-radius: 12px; background: #17171C; }
.ac-scale div { display: grid; gap: .2em; font-size: .98em; line-height: 1.32; }
.ac-arrow { font: 600 1.2em ui-monospace, monospace; color: #6A6A73; }

.ac-join { display: grid; grid-template-columns: 1fr auto 1fr; gap: .45em; align-items: stretch; }
.ac-join div { display: grid; place-items: center; padding: .55em .6em; border-radius: 9px; background: #202027;
  font-size: .98em; font-weight: 600; line-height: 1.3; text-align: center; }
.ac-join .ac-op { font: 600 .9em inherit; color: #A2A2AB; }

.ac-flow-wrap { position: relative; }
.ac-flow { list-style: none; margin: 0; padding: 0 1.9em 0 0; display: grid; gap: .35em; counter-reset: st; }
.ac-flow li { counter-increment: st; display: grid; grid-template-columns: 1.2em minmax(0, 1fr); gap: .45em; padding: .45em .6em;
  border: 1px solid #2A2A31; border-radius: 10px; background: #17171C; font-size: .98em; line-height: 1.36; }
.ac-flow li::before { content: counter(st); font: 600 1.05em/1.3 ui-monospace, monospace; color: #6FCFBF; }
.ac-loop { position: absolute; top: 1.2em; bottom: 1.2em; right: .35em; width: 1.2em; border: 2px solid #3A3A43;
  border-left: 0; border-radius: 0 10px 10px 0; }
.ac-loop::before { content: ""; position: absolute; left: -.2em; top: -.38em; border: .32em solid transparent;
  border-right: .45em solid #3A3A43; border-left: 0; }

.ac-quote { margin: 0; padding: .65em .8em; border-left: 3px solid rgba(187, 166, 255, .5); border-radius: 0 10px 10px 0;
  background: #17171C; display: grid; gap: .4em; }
.ac-quote p { margin: 0; font-size: .96em; line-height: 1.42; color: #DADADF; }

.ac-answer-block { border-color: rgba(187, 166, 255, .35); }
.ac-verdict { margin: 0; font: 700 1.05em/1.3 "IBM Plex Sans Condensed", "Arial Narrow", sans-serif; color: #EDEDEF; }
.ac-reasons { list-style: none; margin: 0; padding: 0; display: grid; gap: .4em; }
.ac-reasons li { position: relative; padding-left: 1.1em; font-size: .98em; line-height: 1.4; }
.ac-reasons li::before { content: ""; position: absolute; left: .1em; top: .62em; width: .4em; height: .4em;
  border-radius: 50%; background: #BBA6FF; }

.ac-table-wrap { overflow-x: auto; border: 1px solid #2A2A31; border-radius: 12px; background: #17171C; }
.ac-table { border-collapse: collapse; width: 100%; font-size: .92em; }
.ac-table th, .ac-table td { padding: .5em .6em; text-align: left; vertical-align: top; line-height: 1.35;
  border-bottom: 1px solid #2A2A31; }
.ac-table th { font: 600 .82em ui-monospace, monospace; letter-spacing: .06em; text-transform: uppercase; color: #6FCFBF; }
.ac-table tr:last-child td { border-bottom: 0; }

/* Subheading names only — the map never lists the cards inside them. */
.ac-map { display: grid; gap: .45em; }
.ac-map-group { padding: .6em .85em; border: 1px solid #2A2A31; border-radius: 12px; background: #17171C; }
.ac-map-head { margin: 0; display: grid; grid-template-columns: 1.3em 1fr; gap: .5em; align-items: baseline;
  font: 700 1.1em/1.15 "IBM Plex Sans Condensed", "Arial Narrow", sans-serif; }
.ac-map-head .ac-i { font: 600 .7em ui-monospace, monospace; color: #6FCFBF; }

@media (prefers-reduced-motion: reduce) {
  .ac-track, .ac-seg, .ac-grp, .ac-ask, .ac-answer, .ac-subhead-name, .ac-subhead-pos, .ac-veil, .ac-cue {
    transition: none !important;
  }
}

.ac-card.ac-setup-card .ac-ask { }
.ac-ask.ac-setup { border-style: dashed; }
.ac-card .ac-ask.ac-setup .ac-ask-q { font-size: 1.05em; }