/* TableSync Map (RM842) - the app's own styles, after css/apps/shell.css. Graphite (DESIGN.md): tokens only, never a
 * colour literal; radius 0; no shadow, blur, glow or gradient; Spectral reads, Plex Sans operates, Plex Mono measures.
 *
 * The accent is spent once per view:
 *   Show       the lock state (the corner control while the map is locked)
 *   Calibrate  the calibration measure (card box, ruler marks, check square) - the desktop projector's own role
 *   Maps, Scenes, Connect: nothing - the primary action is filled ink, never the accent.
 * The board itself (the canvases in Show and Align) is calibrated projector output, painted from
 * js/apps/map/pigments.js; nothing in this file colours it. The map canvas takes a CSS filter for brightness /
 * contrast / gamma: operator calibration, DESIGN.md hard rule 5's stated exception. */

/* ---------------- shell tuning ---------------- */
/* Shared-shell workaround (recorded in specs/RM842-map-app/evidence/shared-bugs.md): `.tf-app button` (0,1,1) out-ranks
 * `.tf-tab` (0,1,0), so every tab got the 8px/16px button padding and the label was squeezed to 9px tall and clipped. */
.tf-app .tf-tab { padding: 0 2px; }
.mp-glyph { display: inline-flex; align-items: center; justify-content: center; line-height: 1; flex: 0 0 auto; }
.mp-glyph svg { width: 1.25em; height: 1.25em; }
.tf-tab .tf-ti .mp-glyph svg { width: 22px; height: 22px; }
.mp-about { gap: var(--s-1); }
.mp-about .mp-glyph svg { width: 20px; height: 20px; }
@media (max-width: 380px) { .mp-about-lab { display: none; } .tf-app .mp-about { min-width: 44px; padding: 0; } }
/* a phone on its side: the banner row goes, so the library keeps its height */
@media (max-height: 520px) {
  body.tf-app-map { --tf-top-h: 56px; --tf-tabs-h: 50px; }
  body.tf-app-map .tf-banner { display: none; }
  body.tf-app-map .tf-tab { flex-direction: row; gap: var(--s-2); font-size: var(--t-ui); }
}
body.mp-showing .tf-top, body.mp-showing .tf-tabs, body.mp-showing .tf-panes { visibility: hidden; }

/* ---------------- shared controls ---------------- */
.mp-actions { display: flex; flex-wrap: wrap; gap: var(--s-2); margin: 0 0 var(--s-4); }
.mp-actions .tf-btn .mp-glyph svg { width: 20px; height: 20px; }
.mp-callout { background: var(--aa-sheet); border: 1px solid var(--aa-rule); padding: var(--s-4); margin: 0 0 var(--s-4); }
.mp-callout .tf-prose { margin-bottom: var(--s-3); }
.mp-empty { margin: var(--s-4) 0; }
.mp-choice { border: 0; padding: 0; margin: var(--s-3) 0; min-width: 0; }
.mp-legend { padding: 0; margin: 0 0 var(--s-2); color: var(--aa-ink-muted); font-size: var(--t-ui); }
.mp-choice-row { display: flex; flex-wrap: wrap; gap: var(--s-2); margin: var(--s-2) 0; }
.tf-app .mp-choice-row button[aria-pressed="true"], .tf-app .mp-swatches button[aria-pressed="true"],
.tf-app button.mp-toggle[aria-pressed="true"] {
  background: var(--aa-ink); color: var(--aa-ground); border-color: var(--aa-ink);
}
.tf-app button.mp-toggle { width: 100%; justify-content: flex-start; margin: var(--s-2) 0; text-align: left; }
.tf-app button.mp-toggle::before {
  content: ''; flex: 0 0 auto; width: 14px; height: 14px; border: 1px solid currentColor; margin-right: var(--s-1);
}
.tf-app button.mp-toggle[aria-pressed="true"]::before { background: currentColor; }
.mp-range { width: 100%; height: 44px; margin: 0; accent-color: var(--aa-ink); background: none; }
.mp-slider { margin: var(--s-3) 0 0; }
.mp-slider-top { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s-2); }
.mp-slider-lab { color: var(--aa-ink-body); font-size: var(--t-ui); }
.mp-slider-out { color: var(--aa-ink); font-size: var(--t-ui); }
.mp-stepper { display: flex; align-items: center; gap: var(--s-2); margin: var(--s-3) 0; flex-wrap: wrap; }
.mp-stepper-lab { flex: 1 1 100%; color: var(--aa-ink-muted); font-size: var(--t-ui); }
.mp-stepper-val { min-width: 64px; text-align: center; font-family: var(--aa-measure); font-size: var(--t-body); color: var(--aa-ink); }
.tf-app input.mp-num { width: 96px; flex: 0 0 auto; font-family: var(--aa-measure); text-align: center; }
.mp-note { margin: var(--s-3) 0; }
.mp-hint { margin: var(--s-2) 0; color: var(--aa-ink-body); }
.mp-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; margin: -1px; }
.mp-icon-btn { min-width: 44px; padding: 0; }
.mp-icon-btn .mp-glyph svg { width: 20px; height: 20px; }
.warn { color: var(--aa-warn); }

/* ---------------- Maps: the library ---------------- */
.mp-maps {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--s-3);
}
@media (min-width: 600px) { .mp-maps { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: var(--s-4); } }
.mp-map { background: var(--aa-sheet); border: 1px solid var(--aa-hairline); display: flex; flex-direction: column; min-width: 0; }
.tf-app .mp-map-show { padding: 0; border: 0; border-bottom: 1px solid var(--aa-hairline); display: block; width: 100%; min-height: 0; background: var(--aa-recess); }
.mp-thumb { display: block; width: 100%; aspect-ratio: 3 / 2; object-fit: cover; background: var(--aa-recess); }
.mp-thumb.missing { visibility: hidden; }
.mp-map-text { padding: var(--s-2) var(--s-3) 0; flex: 1 1 auto; min-width: 0; }
.mp-map-name { margin: 0; font-family: var(--aa-read); font-weight: 600; font-size: var(--t-body); color: var(--aa-ink); overflow-wrap: anywhere; }
.mp-map-meta { margin: var(--s-1) 0 0; font-family: var(--aa-measure); font-size: var(--t-meta); color: var(--aa-ink-muted); }
.mp-map-meta.warn { color: var(--aa-warn); }
.tf-app .mp-map-more { margin: var(--s-2) var(--s-3) var(--s-3); align-self: flex-start; }
.mp-swatches { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.mp-chip { width: 24px; height: 24px; border: 1px solid var(--aa-rule); display: block; }
.mp-pick > li { gap: var(--s-3); }
.mp-check { width: 24px; height: 24px; margin: 0; accent-color: var(--aa-ink); flex: 0 0 auto; }
.mp-pick-lab { flex: 1 1 auto; min-height: 44px; display: flex; align-items: center; font-family: var(--aa-read); color: var(--aa-ink); cursor: pointer; }

/* ---------------- Scenes ---------------- */
.mp-scenes { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--s-4); }
.mp-scene { background: var(--aa-sheet); border: 1px solid var(--aa-hairline); padding: var(--s-3) var(--s-4); }
.mp-scene-head { display: flex; align-items: center; gap: var(--s-3); }
.mp-scene-titles { flex: 1 1 auto; min-width: 0; }
.mp-scene-name { margin: 0; font-family: var(--aa-read); font-weight: 600; font-size: var(--t-4); color: var(--aa-ink); overflow-wrap: anywhere; }
.mp-scene-items { list-style: none; margin: var(--s-3) 0 0; padding: 0; border-top: 1px solid var(--aa-hairline); }
.mp-scene-item { display: flex; align-items: center; gap: var(--s-2); border-bottom: 1px solid var(--aa-hairline); padding: var(--s-1) 0; }
.mp-scene-num { width: 24px; color: var(--aa-ink-muted); font-family: var(--aa-measure); font-size: var(--t-ui); flex: 0 0 auto; }
.tf-app .mp-scene-map {
  flex: 1 1 auto; min-width: 0; justify-content: flex-start; border: 0; padding: var(--s-2) 0;
  font-family: var(--aa-read); font-weight: 400; font-size: var(--t-body); text-align: left; overflow-wrap: anywhere;
}

/* ---------------- Calibrate (the accent: the calibration measure) ---------------- */
.mp-cal-check { margin: 0 0 var(--s-4); }
.mp-cal-check .tf-h2 { margin-top: 0; }
.mp-cal-readout { font-family: var(--aa-measure); font-size: var(--t-ui); color: var(--aa-ink); margin: 0 0 var(--s-3); }
.mp-checksq { position: relative; border: 2px solid var(--aa-accent); box-sizing: border-box; margin: var(--s-2) 0 var(--s-3); }
.mp-checksq-lab { position: absolute; left: var(--s-1); bottom: var(--s-1); font-size: var(--t-meta); color: var(--aa-accent); font-family: var(--aa-measure); }
.mp-cal-work { margin: var(--s-3) 0; }
.mp-cardbox {
  position: relative; box-sizing: border-box; border: 2px solid var(--aa-accent); background: var(--aa-accent-wash);
  margin: var(--s-3) 0; max-width: 100%;
}
.mp-cardbox-lab { position: absolute; left: var(--s-2); top: var(--s-2); font-family: var(--aa-measure); font-size: var(--t-meta); color: var(--aa-ink-muted); }
.tf-app .mp-cardhandle {
  position: absolute; right: -2px; bottom: -2px; width: 44px; height: 44px; min-height: 44px; padding: 0;
  border: 2px solid var(--aa-accent); background: var(--aa-sheet); cursor: nwse-resize; touch-action: none;
}
.mp-cal-result { font-family: var(--aa-measure); font-size: var(--t-ui); color: var(--aa-ink); min-height: 1.5em; }
.mp-ruler { position: relative; height: 64px; border-top: 2px solid var(--aa-accent); margin: var(--s-4) 0 var(--s-2); overflow: hidden; }
.mp-tick { position: absolute; top: 0; width: 0; height: 12px; border-left: 1px solid var(--aa-ink-body); }
.mp-tick.half { height: 20px; }
.mp-tick.major { height: 30px; border-left: 2px solid var(--aa-accent); margin-left: -1px; }
.mp-tick-lab { position: absolute; top: 34px; font-family: var(--aa-measure); font-size: var(--t-meta); color: var(--aa-ink); transform: translateX(-2px); }
.mp-profile { flex-wrap: wrap; }
.mp-profile-text { flex: 1 1 200px; min-width: 0; }
.mp-profile-name { font-family: var(--aa-read); font-weight: 600; color: var(--aa-ink); }

/* ---------------- Connect ---------------- */
.mp-rules { margin: 0 0 var(--s-3); padding-left: var(--s-5); font-family: var(--aa-read); font-size: var(--t-body); color: var(--aa-ink-body); line-height: 1.55; max-width: var(--aa-prose); }
.mp-rules li { margin: 0 0 var(--s-1); }
.mp-resolved { min-height: 1.5em; margin-top: var(--s-2); overflow-wrap: anywhere; }

/* ---------------- Show: the table view ---------------- */
.mp-show { position: fixed; inset: 0; z-index: 60; background: var(--aa-recess); overflow: hidden; }
.mp-cv { position: absolute; left: 0; top: 0; width: 100%; height: 100%; display: block; }
.mp-defs { position: absolute; width: 0; height: 0; }
.mp-surface { position: absolute; inset: 0; touch-action: none; cursor: grab; -webkit-user-select: none; user-select: none; }
.mp-locked .mp-surface { cursor: default; }
.mp-rail {
  position: absolute; top: 0; right: 0; bottom: 0; width: 92px; z-index: 3;
  padding: calc(var(--tf-safe-t) + var(--s-2)) var(--s-1) calc(var(--tf-safe-b) + var(--s-2));
  display: flex; flex-direction: column; gap: var(--s-1); align-items: stretch;
  background: var(--aa-sheet); border-left: 1px solid var(--aa-rule); overflow-y: auto; overscroll-behavior: contain;
}
.tf-app .mp-rbtn {
  flex: 0 0 auto; flex-direction: column; gap: 2px; padding: var(--s-1) 2px; min-height: 52px; width: 100%;
  border-color: transparent; font-size: var(--t-meta); font-weight: 500;
}
.mp-rbtn .mp-glyph svg { width: 22px; height: 22px; }
.mp-rlab { font-family: var(--aa-operate); font-size: var(--t-meta); line-height: 1.2; white-space: nowrap; }
.tf-app .mp-rbtn[aria-pressed="true"] { background: var(--aa-recess); border-color: var(--aa-ink); }
.mp-readout {
  position: absolute; z-index: 3; left: calc(env(safe-area-inset-left, 0px) + var(--s-2)); top: calc(var(--tf-safe-t) + var(--s-2));
  margin: 0; padding: var(--s-1) var(--s-2); background: var(--aa-sheet); border: 1px solid var(--aa-rule);
  font-family: var(--aa-measure); font-size: var(--t-meta); color: var(--aa-ink); line-height: 1.4; white-space: nowrap;
  max-width: calc(100% - 120px); overflow: hidden; text-overflow: ellipsis; pointer-events: none;
}
.mp-rail-hidden .mp-readout { display: none; }
.mp-readout.warn { color: var(--aa-warn); }
.tf-app .mp-edge {
  position: absolute; top: 0; right: 0; bottom: 0; width: 48px; z-index: 2; border: 0; padding: 0; min-height: 0;
  background: none; display: flex; align-items: center; justify-content: center;
}
.mp-edge::after { content: ''; width: 4px; height: 56px; background: var(--aa-rule); }
.mp-rail-hidden .mp-rail { display: none; }
.mp-panel {
  position: absolute; top: 0; bottom: 0; right: 92px; width: min(360px, 52vw); z-index: 3;
  display: flex; flex-direction: column; background: var(--aa-sheet); border-left: 1px solid var(--aa-rule);
}
.mp-panel-head { display: flex; align-items: center; gap: var(--s-3); padding: calc(var(--tf-safe-t) + var(--s-2)) var(--s-4) var(--s-2); border-bottom: 1px solid var(--aa-hairline); }
.mp-panel-title { margin: 0; flex: 1 1 auto; font-family: var(--aa-read); font-weight: 400; font-size: var(--t-4); color: var(--aa-ink); }
.mp-panel-body { overflow-y: auto; padding: var(--s-2) var(--s-4) calc(var(--tf-safe-b) + var(--s-5)); overscroll-behavior: contain; }
.mp-panel-body > .tf-btn { margin: var(--s-2) var(--s-2) 0 0; }
.mp-inks .tf-btn, .mp-tools .tf-btn { flex: 1 1 auto; }
/* a tall screen: the rail runs along the bottom, the panel sits above it */
.mp-portrait .mp-rail {
  top: auto; left: 0; width: auto; height: auto; flex-direction: row; flex-wrap: wrap; overflow: hidden;
  padding: var(--s-1) calc(var(--s-2) + env(safe-area-inset-right, 0px)) calc(var(--tf-safe-b) + var(--s-1)) calc(var(--s-2) + env(safe-area-inset-left, 0px));
  border-left: 0; border-top: 1px solid var(--aa-rule);
}
.tf-app .mp-portrait .mp-rbtn { width: auto; min-width: 44px; flex: 1 1 44px; padding: var(--s-1) 0; }
.tf-app .mp-portrait .mp-edge { top: auto; left: 0; height: 48px; width: auto; }
.mp-portrait .mp-edge::after { width: 56px; height: 4px; }
.mp-portrait .mp-panel { top: auto; left: 0; right: 0; width: auto; bottom: var(--mp-rail-h, 66px); max-height: 58%; border-left: 0; border-top: 1px solid var(--aa-rule); }
.mp-portrait .mp-panel-head { padding-top: var(--s-2); }
.mp-portrait.mp-rail-hidden .mp-panel { bottom: 0; }
/* the lock: the one accent in Show */
.tf-app .mp-lockcorner {
  position: absolute; left: calc(env(safe-area-inset-left, 0px) + var(--s-3)); bottom: calc(var(--tf-safe-b) + var(--s-3)); z-index: 4;
  min-height: 52px; padding: var(--s-2) var(--s-4); overflow: hidden; touch-action: none; -webkit-user-select: none; user-select: none;
  background: var(--aa-sheet); color: var(--aa-accent); border: 1px solid var(--aa-accent); gap: var(--s-2);
}
.mp-lockfill { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: var(--aa-accent-wash); pointer-events: none; }
.mp-lockcorner .mp-glyph, .mp-locktext { position: relative; }
.mp-locktext { font-size: var(--t-ui); white-space: nowrap; }

/* ---------------- Align ---------------- */
.mp-align { position: fixed; inset: 0; z-index: 60; display: flex; flex-direction: column; background: var(--aa-ground); }
.mp-align-head {
  display: flex; align-items: center; gap: var(--s-2); flex: 0 0 auto;
  padding: calc(var(--tf-safe-t) + var(--s-2)) var(--tf-gutter) var(--s-2); background: var(--aa-sheet); border-bottom: 1px solid var(--aa-rule);
}
.mp-align-tbox { flex: 1 1 auto; min-width: 0; }
.mp-align-title { margin: 0; font-family: var(--aa-read); font-weight: 400; font-size: var(--t-4); color: var(--aa-ink); }
.mp-align-sub { margin: 0; font-size: var(--t-ui); color: var(--aa-ink-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mp-align-stage { position: relative; flex: 1 1 auto; min-height: 200px; background: var(--aa-recess); overflow: hidden; }
.mp-align-tools {
  flex: 0 0 auto; max-height: 44%; overflow-y: auto; background: var(--aa-sheet); border-top: 1px solid var(--aa-rule);
  padding: var(--s-2) var(--tf-gutter) calc(var(--tf-safe-b) + var(--s-3));
}
.mp-align-step { margin: var(--s-2) 0; font-family: var(--aa-read); font-size: var(--t-body); color: var(--aa-ink-body); }
.mp-align-result { font-family: var(--aa-measure); font-size: var(--t-ui); color: var(--aa-ink); margin: var(--s-2) 0 0; min-height: 1.5em; }
.mp-align-ctl .mp-stepper-lab { flex: 0 0 auto; margin-right: var(--s-2); }
.mp-nudge { display: flex; gap: var(--s-2); flex-wrap: wrap; }
.tf-app .mp-nudge-btn { min-width: 44px; padding: 0; }
@media (min-aspect-ratio: 4/3) and (min-width: 720px) {
  .mp-align { display: grid; grid-template-columns: 1fr 360px; grid-template-rows: auto 1fr; }
  .mp-align-head { grid-column: 1 / 3; }
  .mp-align-tools { max-height: none; border-top: 0; border-left: 1px solid var(--aa-rule); }
}