/*
 * Atelier Terre. Palette from the project's first ring page (warm paper, clay, umber),
 * type from the questionnaire (Young Serif + Public Sans).
 * Logical properties throughout so right-to-left (Arabic) can be added later.
 */
:root {
  --bg: #F9F6F0;
  --surface: #FFFFFF;
  --ink: #4A3B32;
  --text: #333333;
  --muted: #7A6A5E;
  --line: #E3D5CA;
  --line-strong: #C8A992;
  --accent: #8B5E3C;
  --accent-soft: #EFE4DA;
  --e1: #8B5E3C;   /* design principles: umber */
  --e2: #C8A992;   /* collaboration: clay */
  --e3: #B8693B;   /* secondary market: terracotta */
  --e4: #D9B58A;   /* education: ochre */
  --e5: #7A6A58;   /* supply agreements: taupe */
  --ok: #5F7F45;     /* verdict: meets */
  --warn: #C98B2B;   /* verdict: check */
  --bad: #B0452F;    /* verdict: does not meet */
  --shadow: 0 4px 15px rgba(74, 59, 50, .08);
  --font-display: 'Young Serif', Georgia, 'Times New Roman', serif;
  --font-body: 'Public Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  color-scheme: light;
}

* { box-sizing: border-box; }
html { scroll-padding-top: 64px; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 400 16px/1.5 var(--font-body);
}
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
button, a, [role="button"] { -webkit-tap-highlight-color: transparent; }
a { color: var(--accent); }
.muted { color: var(--muted); font-size: .9375rem; }

/* Shared controls */
.top-right { display: flex; align-items: center; gap: 10px; }
.quick { display: flex; flex-wrap: wrap; gap: 6px; }
.quick .pill { text-decoration: none; }
.pill[hidden] { display: none; }
.brand { font: 400 1.25rem/1 var(--font-display); color: var(--ink); }
.lang { display: flex; border: 1px solid var(--line-strong); border-radius: 8px; overflow: hidden; background: var(--surface); }
.lang button { font: 600 .8125rem var(--font-body); padding: 6px 12px; border: 0; background: transparent; color: var(--ink); cursor: pointer; }
.lang button[aria-pressed="true"] { background: var(--accent); color: #fff; }

.pill {
  display: inline-flex; align-items: center; gap: 8px;
  font: 400 .875rem/1.3 var(--font-body);
  padding: 6px 12px; border: 1px solid var(--line-strong); border-radius: 999px;
  background: var(--surface); color: var(--ink); cursor: pointer;
}
.pill[aria-pressed="true"] { background: var(--accent-soft); border-color: var(--accent); font-weight: 600; }
.pill svg { width: 13px; height: 13px; flex: none; fill: var(--c); stroke: var(--ink); stroke-width: .6; }

.dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; border: 1.5px solid var(--ink); flex: none; }
.dot.open, .dot.idea { border-style: dashed; border-color: var(--muted); }
.dot.draft, .dot.next { background: var(--line-strong); }
.dot.active, .dot.live { background: var(--accent); border-color: var(--accent); }

.btn {
  font: 600 .9375rem var(--font-body); background: var(--accent); color: #fff;
  border: 1px solid var(--accent); border-radius: 8px; padding: 9px 14px; cursor: pointer; text-decoration: none; display: inline-block;
}
.btn.alt { background: transparent; color: var(--accent); }
textarea {
  width: 100%; min-height: 96px; resize: vertical;
  font: 400 .9375rem/1.45 var(--font-body); color: var(--text);
  background: var(--surface); border: 1px solid var(--line-strong); border-radius: 8px; padding: 10px 12px;
}

/* ---------- Home: full screen, three floating parts ---------- */
.page-home .shell { display: grid; gap: 16px; padding: 16px; }
.top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.float { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow); padding: 18px; min-width: 0; }
.centre { min-width: 0; display: grid; gap: 12px; align-content: start; }
.ring { width: 100%; height: auto; display: block; }

.legend { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }

.centre { order: 1; }
.side.right { order: 2; }
.side.left { order: 3; }

@media (min-width: 1100px) {
  .centre, .side.right, .side.left { order: 0; }
  /* only the three-panel pages are fixed to the window (each panel scrolls inside); stage and catalogue pages scroll as a document */
  html:has(body.page-home), body.page-home { height: 100%; overflow: hidden; }
  .page-home .shell {
    height: 100vh; padding: 20px; gap: 0 20px;
    grid-template-columns: 300px minmax(0, 1fr) 340px;
    grid-template-rows: auto minmax(0, 1fr);
  }
  .top { grid-column: 1 / -1; padding-block-end: 14px; }
  .side { align-self: stretch; overflow-y: auto; }
  .centre { grid-template-rows: minmax(0, 1fr) auto; align-content: stretch; height: 100%; min-height: 0; }
  .ring { height: 100%; min-height: 0; }
}

/* Ring */
.ring-guide { fill: none; stroke: var(--line); stroke-width: 1; stroke-dasharray: 2 5; }
.ring-flow path { fill: none; stroke: var(--muted); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.cell { cursor: pointer; outline: none; }
.cell-shape { fill: var(--surface); stroke: var(--line-strong); stroke-width: 1; }
.cell-glyph { fill: var(--c); stroke: var(--ink); stroke-width: .8; pointer-events: none; }
.cell.st-open .cell-shape { stroke-dasharray: 3 3; }
.cell.st-open .cell-glyph { fill: none; stroke: var(--muted); }
.cell.st-draft .cell-shape { fill: color-mix(in srgb, var(--c) 38%, var(--surface)); stroke: var(--c); }
.cell.st-active .cell-shape { fill: var(--c); stroke: var(--ink); }
.cell.st-active .cell-glyph { fill: var(--surface); stroke: var(--surface); }
.cell:hover .cell-shape { stroke: var(--ink); stroke-width: 2; }
.cell:focus-visible .cell-shape { stroke: var(--accent); stroke-width: 3; }
.cell.in-stage .cell-shape { stroke: var(--ink); }
.cell.is-hot .cell-shape { stroke: var(--ink); stroke-width: 3.5; }
.cell.is-selected .cell-shape { stroke: var(--ink); stroke-width: 3.5; }
.cell.is-dim { opacity: .25; }

.stage { cursor: pointer; outline: none; }
.stage-badge { fill: var(--ink); }
.stage-num { fill: #fff; font: 600 13px var(--font-body); text-anchor: middle; dominant-baseline: central; pointer-events: none; }
.stage-name { fill: var(--ink); font: 600 20px var(--font-body); dominant-baseline: central; }
.stage:hover .stage-name { text-decoration: underline; }
.stage:focus-visible .stage-badge { stroke: var(--accent); stroke-width: 3; }
.stage.is-selected .stage-badge { fill: var(--accent); }
.stage.is-selected .stage-name { text-decoration: underline; text-underline-offset: 4px; }

/* Stage buttons under the ring, small screens only */
.stage-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; }
.stage-list button {
  width: 100%; text-align: start; display: flex; align-items: center; gap: 10px;
  font: 500 .9375rem/1.3 var(--font-body); color: var(--ink);
  padding: 9px 12px; background: var(--surface); border: 1px solid var(--line-strong); border-radius: 8px; cursor: pointer;
}
.stage-list button[aria-pressed="true"] { background: var(--accent-soft); border-color: var(--accent); font-weight: 600; }
.stage-list .n { flex: none; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: var(--ink); color: #fff; font: 600 .75rem var(--font-body); }
@media (min-width: 720px) { .stage-list { display: none; } }
@media (max-width: 719px) {
  .stage-name { display: none; }
  .stage-num { font-size: 15px; }
  .stage-badge { r: 15px; }
}

/* Side panels */
.side h2 { font: 400 1.25rem/1.2 var(--font-display); color: var(--ink); margin: 0 0 12px; text-wrap: balance; }
.side p { margin: 0 0 12px; }
.tabs { display: flex; flex-wrap: wrap; gap: 6px; margin-block-end: 12px; }
.rows { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.row {
  display: flex; align-items: center; gap: 10px; width: 100%; text-align: start;
  font: 400 .9375rem/1.3 var(--font-body); color: var(--text);
  padding: 8px 10px; border: 1px solid transparent; border-radius: 8px; background: transparent; cursor: pointer;
}
.row:hover { background: var(--bg); }
.row[aria-pressed="true"] { background: var(--accent-soft); border-color: var(--accent); }
.row .grow { flex: 1; min-width: 0; }
.row-link { font-size: .8125rem; margin-inline-start: auto; }
.item { display: flex; align-items: center; gap: 4px; }
.item .row { flex: 1; }
.item a { font-size: .8125rem; padding: 4px 6px; white-space: nowrap; }

.stage-row .dots { display: flex; gap: 3px; margin-inline-start: auto; }
.stage-row .dots .dot { width: 8px; height: 8px; }
.stage-row .n { flex: none; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: var(--ink); color: #fff; font: 600 .75rem var(--font-body); }

.stats { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.stats li { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; border-block-end: 1px solid var(--line); font-size: .9375rem; }
.stats strong { color: var(--ink); font-variant-numeric: tabular-nums; }
.tag { font: 500 .75rem var(--font-body); color: var(--accent); border: 1px solid var(--line-strong); border-radius: 999px; padding: 1px 8px; margin-inline-start: 6px; }
.key { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-block-start: 14px; color: var(--muted); font-size: .8125rem; }
.key span { display: inline-flex; align-items: center; gap: 6px; }

.back { font: 500 .875rem var(--font-body); color: var(--accent); background: none; border: 0; padding: 0 0 10px; cursor: pointer; text-decoration: underline; }
.cells { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.cell-row {
  width: 100%; text-align: start; display: grid; gap: 4px;
  font: 400 .9375rem/1.4 var(--font-body); color: var(--text);
  padding: 10px 12px; background: var(--surface); border: 1px solid var(--line);
  border-inline-start: 5px solid var(--c); border-radius: 8px; cursor: pointer;
}
.cell-row:hover { border-color: var(--ink); border-inline-start-color: var(--c); }
.cell-row .t { display: flex; align-items: center; gap: 8px; font-weight: 600; color: var(--ink); }
.cell-row .t svg { width: 14px; height: 14px; fill: var(--c); stroke: var(--ink); stroke-width: .6; flex: none; }
.cell-row .t .dot { margin-inline-start: auto; }
.action { font-size: 1.0625rem; line-height: 1.45; color: var(--text); }
.sub { font: 600 .8125rem var(--font-body); color: var(--muted); margin: 14px 0 8px; }
.pills { display: flex; flex-wrap: wrap; gap: 6px; }

/* ---------- Stage page ---------- */
.page-stage { padding: 16px; }
.wrap { max-width: 760px; margin-inline: auto; }
.bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-block: 4px 12px; }
.bar .back-link { color: var(--accent); font-weight: 600; font-size: .9375rem; }
.page-stage h1 { font: 400 clamp(1.75rem, 5vw, 2.4rem)/1.1 var(--font-display); color: var(--ink); margin: 8px 0 12px; text-wrap: balance; }
.stage-nav { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 14px; }
.stage-nav a { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; text-decoration: none; font: 600 .875rem var(--font-body); border: 1px solid var(--line-strong); color: var(--ink); background: var(--surface); }
.stage-nav a[aria-current="page"] { background: var(--ink); color: #fff; border-color: var(--ink); }
.intro { color: var(--muted); max-width: 62ch; margin: 0 0 18px; }
.sec { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow); padding: 18px; display: grid; gap: 14px; margin-block-end: 16px; }
.sec h2 { font: 400 1.2rem/1.2 var(--font-display); color: var(--ink); margin: 0; }
.cell-cards { display: grid; gap: 12px; }
.cell-card { display: grid; gap: 10px; align-content: start; border: 1px solid var(--line); border-inline-start: 6px solid var(--c); border-radius: 8px; padding: 14px; background: var(--surface); }
.cell-card h3 { font: 600 1rem/1.3 var(--font-body); color: var(--ink); margin: 0; display: flex; align-items: center; gap: 8px; }
.cell-card h3 svg { width: 16px; height: 16px; fill: var(--c); stroke: var(--ink); stroke-width: .6; flex: none; }
.cell-card p { margin: 0; }
.cell-card textarea { min-height: 72px; }
.plain { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.plain a { font-weight: 600; }
.plain.bullets { list-style: disc; padding-inline-start: 1.2em; display: block; }
.plain.bullets li { margin-block-end: 8px; }
.two { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 720px) { .two { grid-template-columns: 1fr 1fr; } }

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}

/* ---------- Tool pages (walls, map) ---------- */
.page-tool .centre { display: flex; flex-direction: column; gap: 14px; align-content: initial; }
.page-tool h2 { font: 400 1.25rem/1.2 var(--font-display); color: var(--ink); margin: 0 0 12px; }
.swatch { width: 14px; height: 14px; border-radius: 3px; border: 1px solid var(--ink); flex: none; display: inline-block; }
.page-tool input[type="text"], .page-tool select, .page-tool textarea {
  width: 100%; font: 400 .9375rem/1.3 var(--font-body); color: var(--text);
  background: var(--surface); border: 1px solid var(--line-strong); border-radius: 8px; padding: 7px 9px;
}
.page-tool label { display: grid; gap: 4px; font-size: .8125rem; color: var(--muted); }
.fgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(90px, 1fr)); gap: 8px; margin-block-end: 8px; }
.fgrid > label, .fgrid select, .fgrid input { min-width: 0; max-width: 100%; box-sizing: border-box; }
.editbox { border: 1px solid var(--line-strong); border-radius: 10px; padding: 12px; margin-block-start: 14px; display: grid; gap: 8px; background: var(--bg); }
.toolbar { display: flex; flex-wrap: wrap; align-items: end; gap: 8px; }
.toolbar .spacer { flex: 1; }
.toolbar .sysbox { min-width: 220px; }
.toolbar #sname { width: 160px; }
.section { width: 100%; height: auto; max-height: 220px; }
.lrows { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.lrow { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); }
.lrow .grow { flex: 1; min-width: 0; font-size: .9375rem; }
.lrow input[type="text"] { width: 70px; text-align: end; }
.ico { width: 28px; height: 28px; border-radius: 6px; border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink); cursor: pointer; font: 600 .9375rem var(--font-body); }
.ico:hover { border-color: var(--ink); }
.cmp { width: 100%; border-collapse: collapse; font-size: .8125rem; }
.cmp th { text-align: start; color: var(--muted); font-weight: 600; padding: 4px 4px; border-block-end: 1px solid var(--line-strong); }
.cmp td { padding: 6px 4px; border-block-end: 1px solid var(--line); font-variant-numeric: tabular-nums; }
.cmp tbody tr { cursor: pointer; }
.cmp tbody tr:hover { background: var(--bg); }
@media (min-width: 1100px) {
  .page-tool .shell { grid-template-columns: 300px minmax(0, 1fr) 360px; }
  .page-tool .centre { overflow-y: auto; height: auto; }
}

/* Map page */
.page-map .mapwrap { min-width: 0; order: 1; }
.page-map #map { width: 100%; height: 60vh; min-height: 380px; border-radius: 14px; border: 1px solid var(--line); box-shadow: var(--shadow); z-index: 0; }
.check { display: flex; align-items: center; gap: 10px; font-size: .9375rem; color: var(--text); cursor: pointer; padding: 6px 4px; }
.check input { accent-color: var(--accent); }
.check .grow { flex: 1; }
.lead { display: grid; gap: 2px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; font-size: .9375rem; }
.lead strong { color: var(--ink); }
@media (min-width: 1100px) {
  .page-map .mapwrap { order: 0; height: 100%; min-height: 0; }
  .page-map #map { height: 100%; }
}

/* Quantities page */
.oprow { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) 28px; gap: 8px; align-items: end; margin-block-end: 8px; }
.big { font: 400 1.25rem/1.2 var(--font-display); }

/* Connections menu (tool pages) */
.conn { position: relative; }
.conn > summary { list-style: none; cursor: pointer; }
.conn > summary::-webkit-details-marker { display: none; }
.conn[open] > summary { background: var(--accent-soft); border-color: var(--accent); }
.conn-body {
  position: absolute; inset-inline-end: 0; top: calc(100% + 8px); z-index: 1000; width: min(320px, 86vw);
  background: var(--surface); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow); padding: 14px;
  max-height: 70vh; overflow-y: auto;
}
.conn-link { display: flex; align-items: center; gap: 8px; padding: 6px 4px; color: var(--ink); text-decoration: none; font-size: .9375rem; }
.conn-link:hover { text-decoration: underline; }
.conn-body a.pill { text-decoration: none; }

.callout { margin: 0; padding: 10px 12px; border-radius: 8px; border: 1px solid var(--line-strong); font-size: .9375rem; }
.callout.ok { background: var(--accent-soft); border-color: var(--accent); }
.callout.warn { background: #F6E7DC; border-color: var(--e3); color: var(--ink); }

/* Lab page */
.tablewrap { overflow-x: auto; }
.cmp.lab { min-width: 760px; }
.cmp.lab th { font-size: .75rem; }
.cmp.lab td { padding: 3px; }
.cmp.lab input { width: 100%; min-width: 64px; font: 400 .8125rem var(--font-body); padding: 5px 6px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); color: var(--text); }
.thr { margin-block-start: 6px; }
.thr > summary { list-style: none; cursor: pointer; display: inline-flex; }
@media print {
  .page-lab .top, .page-lab #left, .page-lab #centre, .page-lab .noprint { display: none !important; }
  .page-lab, .page-lab .shell { display: block; height: auto; overflow: visible; background: #fff; padding: 0; }
  .page-lab #right { position: static; box-shadow: none; border: 0; overflow: visible; width: auto; padding: 0; }
  html, body { height: auto; overflow: visible; }
}

/* Scorecard */
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; }
.metric { border: 1px solid var(--line); border-inline-start: 6px solid var(--line-strong); border-radius: 10px; padding: 14px; background: var(--surface); display: grid; gap: 4px; align-content: start; }
.metric.ok { border-inline-start-color: var(--accent); }
.metric.bad { border-inline-start-color: var(--e3); background: #FBF1EA; }
.mlabel { font-size: .875rem; color: var(--muted); }
.mval { font: 400 2rem/1.1 var(--font-display); color: var(--ink); font-variant-numeric: tabular-nums; }
.mval .unit { font: 500 .875rem var(--font-body); color: var(--muted); margin-inline-start: 4px; }
.mline { font-size: .8125rem; color: var(--text); }
.mref { font-size: .75rem; color: var(--muted); }

/* Map layers: the generic tool-page label rule must not break the checkbox rows */
.page-tool label.check { display: flex; align-items: center; gap: 10px; font-size: .9375rem; color: var(--text); padding: 5px 4px; }
.page-tool label.check input[type="checkbox"] { width: auto; flex: none; margin: 0; }
.page-tool label.check .swatch { flex: none; }
.page-tool label.check .grow { flex: 1; min-width: 0; line-height: 1.25; }
.page-tool label.check .muted { flex: none; font-size: .8125rem; min-width: 1.5em; text-align: end; }
.page-map .rows { gap: 0; }

/* Verdict: traffic light shared by all tools */
.verdict { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--line-strong); background: var(--surface); }
.verdict .vdot { flex: none; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; color: #fff; font: 700 1.1rem var(--font-body); background: var(--muted); }
.verdict .vtext { display: grid; gap: 2px; min-width: 0; }
.verdict .vtext strong { font: 600 1.0625rem var(--font-body); color: var(--ink); }
.verdict .vtext span { font-size: .875rem; color: var(--muted); }
.verdict.ok { border-color: var(--ok); background: color-mix(in srgb, var(--ok) 10%, var(--surface)); }
.verdict.ok .vdot { background: var(--ok); }
.verdict.warn { border-color: var(--warn); background: color-mix(in srgb, var(--warn) 12%, var(--surface)); }
.verdict.warn .vdot { background: var(--warn); }
.verdict.bad { border-color: var(--bad); background: color-mix(in srgb, var(--bad) 10%, var(--surface)); }
.verdict.bad .vdot { background: var(--bad); }
.checks { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.checks li { display: flex; gap: 10px; align-items: flex-start; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); }
.checks .vdot.s { flex: none; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; color: #fff; font: 700 .75rem var(--font-body); background: var(--muted); }
.checks li.ok .vdot.s { background: var(--ok); } .checks li.warn .vdot.s { background: var(--warn); } .checks li.bad .vdot.s { background: var(--bad); }
.checks .clabel { display: grid; gap: 1px; min-width: 0; font-size: .9375rem; }
.checks .clabel strong { font-weight: 600; color: var(--ink); }
.checks .clabel em { font-style: normal; font-size: .8125rem; color: var(--muted); }
.suggest { width: 100%; border-collapse: collapse; font-size: .8125rem; }
.suggest th { text-align: start; color: var(--muted); font-weight: 600; padding: 4px; border-block-end: 1px solid var(--line-strong); }
.suggest td { padding: 6px 4px; border-block-end: 1px solid var(--line); font-variant-numeric: tabular-nums; }
.suggest tbody tr { cursor: pointer; } .suggest tbody tr:hover { background: var(--bg); }
.suggest .dotv { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: var(--muted); }
.suggest .dotv.ok { background: var(--ok); } .suggest .dotv.warn { background: var(--warn); } .suggest .dotv.bad { background: var(--bad); }
.tagrec { font: 600 .6875rem var(--font-body); color: var(--ok); border: 1px solid var(--ok); border-radius: 999px; padding: 0 6px; margin-inline-start: 6px; }

.verdict.small { padding: 7px 12px; }
.verdict.small .vdot { width: 24px; height: 24px; font-size: .8rem; }
.verdict.small .vtext strong { font-size: .9375rem; font-weight: 500; }

/* Map page, small screens: layers directly under the map */
.page-map .side.left { order: 2; }
.page-map .side.right { order: 3; }
@media (min-width: 1100px) { .page-map .side.left, .page-map .side.right { order: 0; } }

.cards.locked { opacity: .45; filter: grayscale(.6); }

.elements { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.elements li { display: grid; gap: 1px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); font-size: .9375rem; }
.elements strong { color: var(--ink); font-weight: 600; }
.elements em { font-style: normal; font-size: .8125rem; color: var(--muted); }