/* ACCESS Practice Lab: Language City (/city). Built on ds.css tokens; map and building art are inline SVG.
   No timers. Targets are at least 44px; the layout holds at 320px and 140% text. */

/* Reading text stays at 16px or more; the shared helper classes are a little smaller elsewhere in the lab. */
.city-page .fine,
.city-page .eyebrow,
.city-page .task-desc,
.city-page .scn-name,
.city-page .scn-say-es,
.city-page .btn.small,
.city-page .wl-chip,
.city-page .disclaimer,
.city-page .city-card .fine {
  font-size: 1rem;
}

/* ── the map ─────────────────────────────────────────────────────────────── */
.city-map {
  position: relative;
  margin-block: var(--s-3);
}
.city-map-art {
  aspect-ratio: 1000 / 620;
  overflow: hidden;
  border: 2px solid var(--line-strong);
  border-radius: var(--r-lg);
  background: #e9efe2;
}
.city-map-svg {
  display: block;
  inline-size: 100%;
  block-size: 100%;
}
.city-pins {
  position: absolute;
  inset: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}
.city-pins li {
  position: absolute;
  inline-size: 21%;
  block-size: 30%;
  transform: translate(-50%, -50%);
}
.city-pin {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 2px;
  inline-size: 100%;
  block-size: 100%;
  min-inline-size: 2.75rem;
  min-block-size: 2.75rem;
  border: 3px solid transparent;
  border-radius: var(--radius-sm);
  color: #17324d;
  text-decoration: none;
}
.city-pin:hover {
  border-color: #17324d;
  background: rgb(247 244 236 / 35%);
}
.city-pin:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
  border-color: #17324d;
  background: rgb(247 244 236 / 55%);
}
.city-pin-n {
  display: inline-grid;
  place-items: center;
  inline-size: 1.75rem;
  block-size: 1.75rem;
  border-radius: 50%;
  background: #17324d;
  color: #f7f4ec;
  font-weight: 800;
  font-size: 1rem;
}
.city-pin-name {
  padding: 2px 10px;
  border-radius: 999px;
  background: #17324d;
  color: #f7f4ec;
  font-weight: 700;
  font-size: 1rem;
  line-height: 1.3;
  text-align: center;
}
.city-dots {
  display: inline-flex;
  gap: 6px;
  padding: 3px 8px;
  border-radius: 999px;
  background: #f7f4ec;
}
.city-dot {
  display: inline-block;
  inline-size: 0.9rem;
  block-size: 0.9rem;
  border: 3px solid #17324d;
  border-radius: 50%;
  background: transparent;
}
.city-dot.is-independent {
  background: #17324d;
}
.city-dot.is-supported {
  border-color: #b8791a;
  background: #f2c15b;
  border-radius: 3px;
}
@media (max-width: 40rem) {
  .city-pin-name {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    overflow: hidden;
    padding: 0;
    clip-path: inset(50%);
  }
  .city-pin-n {
    inline-size: 2rem;
    block-size: 2rem;
  }
  .city-dots {
    padding: 2px 5px;
    gap: 3px;
  }
  .city-dot {
    inline-size: 0.7rem;
    block-size: 0.7rem;
    border-width: 2px;
  }
}

/* ── cards, chips and progress ───────────────────────────────────────────── */
.city-card {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  align-items: flex-start;
}
.city-thumb {
  align-self: center;
  inline-size: 6.4rem;
  block-size: auto;
}
.city-chips-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
}
.city-chip {
  display: inline-flex;
  gap: var(--s-1);
  align-items: center;
  padding: 2px var(--s-3);
  border: 2px solid var(--line-strong);
  border-radius: 999px;
  background: var(--surface);
  color: var(--ink);
  font-weight: 700;
  font-size: 1rem;
}
.city-chip.is-independent {
  border-color: var(--right);
  background: var(--right-soft);
  color: var(--right);
}
.city-chip.is-supported {
  border-color: var(--hint);
  border-style: dashed;
  background: var(--hint-soft);
  color: var(--hint);
}
.city-totals {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-4);
  margin: var(--s-3) 0 0;
  padding: 0;
  list-style: none;
}
.city-totals b {
  font: 800 1.6rem var(--font-display);
}
.city-prog-list {
  display: grid;
  gap: var(--s-3);
  margin: 0;
  padding: 0;
  list-style: none;
}
.city-prog-list .fine {
  display: block;
}

/* ── the building and the mission scene ──────────────────────────────────── */
.city-stage {
  margin-block: var(--s-3);
  overflow: hidden;
  border: 2px solid var(--line-strong);
  border-radius: var(--r-lg);
  background: var(--surface-2);
}
.city-scene-svg {
  display: block;
  inline-size: 100%;
  block-size: auto;
}
.city-portrait {
  vertical-align: middle;
}
.city-pips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  margin: var(--s-3) 0;
  padding: 0;
  list-style: none;
}
.city-pips li {
  display: inline-flex;
  gap: var(--s-2);
  align-items: center;
  padding: var(--s-1) var(--s-3) var(--s-1) var(--s-1);
  border: 2px solid var(--line-strong);
  border-radius: 999px;
  background: var(--surface);
  font-size: 1rem;
}
.city-pips li.is-here {
  border-color: #17324d;
  font-weight: 800;
}
.city-pips li.is-done {
  border-color: var(--right);
  background: var(--right-soft);
}
.city-pip-n {
  display: inline-grid;
  place-items: center;
  inline-size: 1.75rem;
  block-size: 1.75rem;
  border-radius: 50%;
  background: #17324d;
  color: #f7f4ec;
  font-weight: 800;
  font-size: 1rem;
}
.city-pip-n svg {
  inline-size: 1rem;
  block-size: 1rem;
}
.city-chain {
  display: grid;
  gap: var(--s-2);
  padding-inline-start: var(--s-5);
}
.city-supports {
  margin-block: var(--s-3);
}
.city-step h2 {
  margin-block: var(--s-1) var(--s-3);
}

/* a sign, menu, bill, label or schedule */
.city-doc {
  max-inline-size: 38rem;
  margin: var(--s-3) 0;
  padding: var(--s-4);
  border: 3px solid #17324d;
  border-radius: var(--radius);
  background: #f7f4ec;
  color: #24323f;
}
.city-doc figcaption {
  margin-block-end: var(--s-2);
  padding-block-end: var(--s-2);
  border-block-end: 3px double #17324d;
  font: 800 1.2rem var(--font-display);
}
.city-doc ul {
  display: grid;
  gap: var(--s-2);
  margin: 0;
  padding: 0;
  list-style: none;
}
.city-doc small,
.city-opt small {
  display: block;
  color: var(--ink-2);
  font-size: 1rem;
  font-style: italic;
}
.city-doc.is-bill {
  border-style: dashed;
  background: #fffdf8;
}
.city-doc.is-label {
  border-radius: var(--r-xs);
  border-color: #1fa6a2;
}
.city-say {
  margin-block: var(--s-3);
}

/* support */
.city-box {
  margin-block: var(--s-3);
  padding: var(--s-3) var(--s-4);
  border: 2px dashed var(--line-strong);
  border-radius: var(--radius);
  background: var(--surface-2);
}
.city-box h3 {
  margin: 0 0 var(--s-2);
  font-size: 1.05rem;
}
.city-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  margin: 0;
  padding: 0;
  list-style: none;
}
.city-chips li {
  padding: var(--s-1) var(--s-3);
  border: 2px solid var(--line-strong);
  border-radius: 999px;
  background: var(--surface);
}
.city-frame-text {
  margin: 0 0 var(--s-1);
  font: 700 1.15rem var(--font-display);
}

/* choosing */
.city-opts {
  margin-block: var(--s-3);
}
.city-opt {
  flex-direction: row;
  align-items: center;
  gap: var(--s-3);
}
.city-opt[aria-disabled="true"] {
  cursor: default;
}
.city-opt.is-right {
  border-color: var(--right);
  background: var(--right-soft);
}
.city-opt.is-wrong {
  border-color: var(--hint);
  border-style: dashed;
  background: var(--hint-soft);
}
.city-opt:focus-visible,
.city-tile:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}
.city-letter {
  display: inline-grid;
  flex: none;
  place-items: center;
  inline-size: 2rem;
  block-size: 2rem;
  border-radius: 50%;
  background: #17324d;
  color: #f7f4ec;
  font-weight: 800;
}

/* building a sentence */
.city-intent {
  margin-block: var(--s-3) var(--s-2);
}
.city-sentence {
  min-block-size: 3.5rem;
  margin: 0 0 var(--s-3);
  padding: var(--s-3) var(--s-4);
  border: 3px solid #17324d;
  border-radius: var(--radius);
  background: #fffdf8;
  font: 700 1.25rem var(--font-display);
}
.city-tiles {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
}
.city-tile {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-inline-size: 3.5rem;
  min-block-size: 3.25rem;
  padding: var(--s-2) var(--s-4);
  border: 2px solid #17324d;
  border-radius: var(--radius-sm);
  background: #f7f4ec;
  color: #24323f;
  font: 700 1.2rem var(--font-display);
  cursor: pointer;
}
.city-tile small {
  font: 400 1rem var(--font);
}
.city-tile.is-on {
  background: #17324d;
  color: #f7f4ec;
}
.city-tile[aria-disabled="true"] {
  cursor: default;
}

/* finishing */
.city-badge {
  display: inline-block;
  margin: 0 0 var(--s-3);
  padding: var(--s-1) var(--s-4);
  border: 3px solid var(--line-strong);
  border-radius: 999px;
  font-weight: 800;
}
.city-badge.is-independent {
  border-color: var(--right);
  background: var(--right-soft);
  color: var(--right);
}
.city-badge.is-supported {
  border-color: var(--hint);
  border-style: dashed;
  background: var(--hint-soft);
  color: var(--hint);
}
.city-recap {
  display: grid;
  gap: var(--s-1);
  padding-inline-start: var(--s-5);
}

/* the teacher page */
.city-table-wrap {
  overflow-x: auto;
}
.city-table {
  inline-size: 100%;
  border-collapse: collapse;
}
.city-table caption {
  padding-block-end: var(--s-2);
  text-align: start;
  font-weight: 700;
}
.city-table th,
.city-table td {
  padding: var(--s-2) var(--s-3);
  border: 1px solid var(--line-strong);
  text-align: start;
  vertical-align: top;
}
.city-table thead th {
  background: var(--surface-2);
}

@media (forced-colors: active) {
  .city-pin,
  .city-tile,
  .city-opt,
  .city-chip,
  .city-doc,
  .city-sentence {
    border: 2px solid CanvasText;
  }
  .city-dot,
  .city-pin-n,
  .city-letter,
  .city-pip-n {
    border: 2px solid CanvasText;
    background: Canvas;
    color: CanvasText;
    forced-color-adjust: none;
  }
  .city-dot.is-independent,
  .city-tile.is-on {
    background: Highlight;
    color: HighlightText;
  }
  .city-pin:focus-visible,
  .city-opt:focus-visible,
  .city-tile:focus-visible {
    outline: 3px solid Highlight;
  }
}
@media (prefers-reduced-motion: reduce) {
  .city-pin,
  .city-tile,
  .city-opt {
    transition: none;
  }
}