/* Cartograph workspace. Root rules are scoped to .uwapp-root.uwapp-cartograph (the body carries .uwapp-cartograph too).
   Own colour tokens for light and dark (html[data-theme] / prefers-color-scheme). Motion only without reduced motion. */
.uwapp-root.uwapp-cartograph {
  --cg-bg: #f3f1ec; --cg-surface: #ffffff; --cg-surface-2: #ebe8e0; --cg-ink: #1f2522; --cg-muted: #4d5752;
  --cg-line: #d5d0c4; --cg-control: #6e7671; --cg-accent: #1d6b5c; --cg-accent-ink: #155247; --cg-on-accent: #ffffff;
  --cg-warn: #9a3412; --cg-error: #b42318; --cg-focus: #b45309; --cg-stage: #e2ded4;
  background: var(--cg-bg); color: var(--cg-ink); color-scheme: light;
  display: flex; flex-direction: column; min-height: 0;
}
:root[data-theme="dark"] .uwapp-root.uwapp-cartograph {
  --cg-bg: #121614; --cg-surface: #1b201e; --cg-surface-2: #262c29; --cg-ink: #e8ece9; --cg-muted: #b4bdb8;
  --cg-line: #353d39; --cg-control: #8d9792; --cg-accent: #6cd3bb; --cg-accent-ink: #93e2cf; --cg-on-accent: #0c1f1a;
  --cg-warn: #fdba74; --cg-error: #ff8a80; --cg-focus: #fbbf24; --cg-stage: #0d100f;
  color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .uwapp-root.uwapp-cartograph {
    --cg-bg: #121614; --cg-surface: #1b201e; --cg-surface-2: #262c29; --cg-ink: #e8ece9; --cg-muted: #b4bdb8;
    --cg-line: #353d39; --cg-control: #8d9792; --cg-accent: #6cd3bb; --cg-accent-ink: #93e2cf; --cg-on-accent: #0c1f1a;
    --cg-warn: #fdba74; --cg-error: #ff8a80; --cg-focus: #fbbf24; --cg-stage: #0d100f;
    color-scheme: dark;
  }
}

/* Platform element defaults leak into app workspaces: reset them at zero specificity. */
:where(.cg-app) button { font: inherit; font-size: .9rem; font-weight: 600; padding: 0; border: 0; border-radius: 8px; background: none; color: inherit; cursor: pointer; width: auto; min-height: 0; }
:where(.cg-app) button:hover { background: none; }
:where(.cg-app) :is(input, select, textarea) { font: inherit; font-size: .9rem; color: var(--cg-ink); background: var(--cg-surface); border: 1px solid var(--cg-control); border-radius: 8px; min-height: 34px; padding: .25rem .5rem; box-sizing: border-box; max-width: 100%; }
:where(.cg-app) input[type=checkbox], :where(.cg-app) input[type=radio] { min-height: 0; width: 1.05rem; height: 1.05rem; accent-color: var(--cg-accent); padding: 0; }
:where(.cg-app) input[type=range] { padding: 0; border: 0; background: none; accent-color: var(--cg-accent); min-height: 28px; }
:where(.cg-app) table { border-collapse: collapse; width: 100%; margin: 0; font-size: .86rem; }
:where(.cg-app) :is(th, td) { text-align: start; padding: 5px 7px; border-bottom: 1px solid var(--cg-line); color: var(--cg-ink); }
:where(.cg-app) thead th { background: var(--cg-surface-2); color: var(--cg-ink); }
:where(.cg-app) kbd { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .85em; padding: 1px 6px; border: 1px solid var(--cg-control); border-bottom-width: 2px; border-radius: 5px; background: var(--cg-surface-2); color: var(--cg-ink); white-space: nowrap; }
:where(.cg-app) a { color: var(--cg-accent-ink); }
:where(.cg-app) h2 { margin: 0 0 .5rem; font-size: .95rem; color: var(--cg-ink); }
:where(.cg-app) fieldset { border: 0; padding: 0; margin: 0 0 .6rem; min-width: 0; }
:where(.cg-app) legend { padding: 0; font-weight: 600; font-size: .85rem; margin-bottom: .25rem; color: var(--cg-ink); }

.cg-app { display: flex; flex-direction: column; flex: 1; min-height: 0; background: var(--cg-bg); color: var(--cg-ink); position: relative; }
.cg-app :focus-visible { outline: 3px solid var(--cg-focus); outline-offset: 2px; }
.cg-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
.cg-hint { color: var(--cg-muted); font-size: .82rem; margin: .25rem 0 .4rem; }
.cg-warn { color: var(--cg-warn); font-weight: 600; font-size: .86rem; }
.cg-error { color: var(--cg-error); font-weight: 600; font-size: .85rem; margin: .25rem 0; }
.cg-error[hidden] { display: none; }
.cg-note { font-size: .85rem; color: var(--cg-muted); background: var(--cg-surface-2); border-radius: 8px; padding: .55rem .75rem; margin: 0 0 .8rem; }
.cg-first { display: flex; gap: .6rem; align-items: flex-start; color: var(--cg-ink); }
.cg-first p { margin: 0; flex: 1; }
.cg-mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .82rem; white-space: nowrap; }
.cg-wide { width: 100%; }
.cg-row { display: flex; flex-wrap: wrap; gap: .4rem; margin: .4rem 0; }

/* buttons */
.cg-btn { display: inline-flex; align-items: center; gap: .35rem; min-height: 34px; padding: .35rem .75rem; border: 1px solid var(--cg-control); border-radius: 8px; background: var(--cg-surface); color: var(--cg-ink); font-size: .86rem; }
.cg-btn:hover:not([disabled]) { background: var(--cg-surface-2); }
.cg-btn[disabled], .cg-icon-btn[disabled] { opacity: .5; cursor: not-allowed; }
.cg-btn-primary, .cg-app button[type=button].cg-btn-primary { background: var(--cg-accent); border-color: var(--cg-accent); color: var(--cg-on-accent); }
.cg-btn-primary:hover:not([disabled]), .cg-app button[type=button].cg-btn-primary:hover:not([disabled]) { background: var(--cg-accent-ink); border-color: var(--cg-accent-ink); color: var(--cg-on-accent); }
.cg-icon-btn { display: inline-grid; place-items: center; width: 34px; height: 34px; border: 1px solid transparent; border-radius: 8px; color: var(--cg-ink); }
.cg-icon-btn:hover:not([disabled]) { background: var(--cg-surface-2); border-color: var(--cg-line); }
.cg-icon-btn[aria-pressed="true"] { background: var(--cg-accent); color: var(--cg-on-accent); }

/* toolbar + menus */
.cg-toolbar { flex: none; display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .9rem; padding: .45rem .9rem; background: var(--cg-surface); border-bottom: 1px solid var(--cg-line); }
.cg-tb-group { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem; min-width: 0; }
.cg-menu-wrap { position: relative; }
.cg-menu-btn { display: inline-flex; align-items: center; gap: .2rem; min-height: 34px; padding: .3rem .6rem; border-radius: 8px; color: var(--cg-ink); }
.cg-menu-btn:hover, .cg-menu-btn[aria-expanded="true"] { background: var(--cg-surface-2); }
.cg-menu { position: absolute; z-index: 40; inset-inline-start: 0; top: calc(100% + 4px); min-width: 16rem; max-width: min(24rem, 92vw); padding: .3rem; background: var(--cg-surface); border: 1px solid var(--cg-control); border-radius: 10px; box-shadow: 0 12px 30px rgb(0 0 0 / .22); }
.cg-menu[hidden] { display: none; }
.cg-menu-item { display: flex; width: 100%; align-items: center; justify-content: space-between; gap: 1rem; min-height: 32px; padding: .35rem .6rem; border-radius: 6px; text-align: start; font-weight: 500; color: var(--cg-ink); }
.cg-menu-item:hover, .cg-menu-item:focus { background: var(--cg-surface-2); }
.cg-menu-item[aria-disabled="true"] { color: var(--cg-muted); cursor: not-allowed; }
.cg-menu-key { color: var(--cg-muted); font-size: .78rem; font-weight: 600; }
.cg-menu-sep { height: 1px; margin: .3rem .2rem; background: var(--cg-line); }
.cg-namewrap { flex: 1 1 12rem; justify-content: flex-end; }
.cg-name { width: 100%; max-width: 22rem; font-weight: 700; }

/* tabs */
.cg-tabs { flex: none; display: flex; gap: .2rem; padding: .35rem .9rem 0; background: var(--cg-surface); border-bottom: 1px solid var(--cg-line); overflow-x: auto; scrollbar-width: thin; }
.cg-tab { display: inline-flex; align-items: center; gap: .45rem; padding: .45rem .9rem; border-radius: 8px 8px 0 0; border-bottom: 3px solid transparent; color: var(--cg-muted); white-space: nowrap; }
.cg-tab[aria-selected="true"] { color: var(--cg-ink); border-bottom-color: var(--cg-accent); background: var(--cg-bg); }
.cg-tab:hover { color: var(--cg-ink); }
.cg-tab-key { display: inline-grid; place-items: center; width: 1.25rem; height: 1.25rem; border-radius: 5px; border: 1px solid var(--cg-control); font-size: .72rem; }

/* body: stage + panel */
.cg-body { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 380px); grid-template-rows: minmax(0, 1fr); }
.cg-stage { position: relative; min-width: 0; min-height: 0; background: var(--cg-stage); display: flex; }
.cg-preview { flex: 1; min-width: 0; min-height: 0; display: flex; align-items: center; justify-content: center; padding: 14px; box-sizing: border-box; position: relative; touch-action: none; cursor: grab; }
.cg-body[data-mode="meet"] .cg-preview { cursor: crosshair; touch-action: pan-x pan-y; }
.cg-preview.is-drawing { cursor: crosshair; }
.cg-preview:active { cursor: grabbing; }
.cg-preview > svg { width: 100%; height: 100%; max-height: 100%; display: block; filter: drop-shadow(0 6px 18px rgb(0 0 0 / .18)); }
.cg-empty { margin: auto; max-width: 28rem; padding: 1rem 1.2rem; background: var(--cg-surface); color: var(--cg-ink); border: 1px solid var(--cg-line); border-radius: 10px; text-align: center; }
.cg-empty p { margin: 0; }
.cg-empty-over { position: absolute; inset-inline: 10%; top: 40%; }
.cg-stage-tools { position: absolute; inset-inline-end: 12px; top: 12px; display: flex; flex-direction: column; gap: 4px; background: var(--cg-surface); border: 1px solid var(--cg-line); border-radius: 10px; padding: 3px; }
.cg-stage-tools:empty { display: none; }
.cg-panel { min-height: 0; overflow-y: auto; padding: .9rem 1rem 1.4rem; background: var(--cg-surface); border-inline-start: 1px solid var(--cg-line); }
.cg-sec { padding: .2rem 0 .8rem; margin-bottom: .6rem; border-bottom: 1px solid var(--cg-line); }
.cg-sec:last-child { border-bottom: 0; }
.cg-field { display: flex; flex-direction: column; gap: .25rem; margin: 0 0 .65rem; min-width: 0; }
.cg-field > label { font-weight: 600; font-size: .85rem; }
.cg-check { display: flex; align-items: center; gap: .5rem; margin: .3rem 0; font-size: .88rem; }
.cg-radios { display: flex; flex-wrap: wrap; gap: .3rem .9rem; }
.cg-radios legend { width: 100%; }
.cg-radio { display: inline-flex; align-items: center; gap: .35rem; font-size: .88rem; }
.cg-slider { display: flex; align-items: center; gap: .5rem; }
.cg-slider input[type=range] { flex: 1; min-width: 0; }
.cg-num { width: 5.5rem; }
.cg-unit { color: var(--cg-muted); font-size: .82rem; min-width: 1.2rem; }
.cg-mapinfo { margin: 0 0 .3rem; font-size: .86rem; overflow-wrap: anywhere; }
.cg-swatches { display: grid; grid-template-columns: repeat(auto-fill, minmax(7.2rem, 1fr)); gap: .35rem; margin-bottom: .6rem; }
.cg-swatch { display: flex; align-items: center; gap: .45rem; padding: .3rem .45rem; border: 1px solid var(--cg-line); border-radius: 8px; font-size: .84rem; font-weight: 600; color: var(--cg-ink); text-align: start; }
.cg-swatch[aria-checked="true"] { border-color: var(--cg-accent); box-shadow: inset 0 0 0 2px var(--cg-accent); }
.cg-swatch-chip { flex: none; width: 1.5rem; height: 1.5rem; border-radius: 50%; border: 1px solid var(--cg-control); }
.cg-facts { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: .3rem .8rem; margin: 0; font-size: .86rem; }
.cg-facts dt { color: var(--cg-muted); }
.cg-facts dd { margin: 0; font-weight: 600; text-align: end; }
.cg-people { list-style: none; margin: 0 0 .6rem; padding: 0; display: flex; flex-direction: column; gap: .35rem; }
.cg-people li { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr) auto; gap: .3rem; align-items: center; }
.cg-people input { width: 100%; }
.cg-add { display: grid; grid-template-columns: 1fr; gap: 0; }
.cg-tablewrap { overflow-x: auto; max-width: 100%; }
.cg-tablewrap table { min-width: 22rem; }
.cg-tablewrap td, .cg-tablewrap th { white-space: nowrap; }
.cg-results .cg-hint { margin-top: .4rem; }

/* status bar */
.cg-statusbar { flex: none; display: flex; flex-wrap: wrap; align-items: center; gap: .3rem 1rem; padding: .35rem .9rem; background: var(--cg-surface); border-top: 1px solid var(--cg-line); font-size: .82rem; color: var(--cg-muted); }
.cg-status-text { margin: 0; flex: 1 1 16rem; color: var(--cg-ink); min-height: 1.2em; }
.cg-attrib { white-space: nowrap; }
.cg-busy { position: absolute; inset-inline-start: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 20; display: flex; align-items: center; gap: .5rem; padding: .5rem .9rem; border-radius: 999px; background: var(--cg-surface); color: var(--cg-ink); border: 1px solid var(--cg-line); box-shadow: 0 8px 24px rgb(0 0 0 / .2); font-weight: 600; }
.cg-busy[hidden] { display: none; }
.cg-spinner { width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--cg-line); border-top-color: var(--cg-accent); }
@media (prefers-reduced-motion: no-preference) {
  .cg-spinner { animation: cg-spin .8s linear infinite; }
  @keyframes cg-spin { to { transform: rotate(360deg); } }
}

/* dialogs */
.cg-dialog { width: min(34rem, 94vw); max-height: 88vh; padding: 0; border: 1px solid var(--cg-control); border-radius: 12px; background: var(--cg-surface); color: var(--cg-ink); box-shadow: 0 20px 50px rgb(0 0 0 / .3); }
.cg-dialog-wide { width: min(48rem, 96vw); }
.cg-dialog::backdrop { background: rgb(0 0 0 / .45); }
.cg-dialog-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .7rem 1rem; border-bottom: 1px solid var(--cg-line); }
.cg-dialog-head h2 { margin: 0; font-size: 1.05rem; }
.cg-dialog-lede { margin: .7rem 1rem 0; color: var(--cg-muted); font-size: .9rem; }
.cg-dialog-body { padding: .8rem 1rem 1rem; overflow-y: auto; }
.cg-dialog-actions { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: flex-end; margin-top: .9rem; }
.cg-cards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); gap: .5rem; }
.cg-card { display: flex; flex-direction: column; gap: .25rem; width: 100%; height: 100%; padding: .7rem .8rem; border: 1px solid var(--cg-line); border-radius: 10px; text-align: start; color: var(--cg-ink); }
.cg-card:hover { border-color: var(--cg-accent); background: var(--cg-surface-2); }
.cg-card span { color: var(--cg-muted); font-weight: 400; font-size: .84rem; }
.cg-recent { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .4rem; }
.cg-recent li { display: flex; gap: .5rem; align-items: stretch; }
.cg-recent-open { flex: 1; display: flex; flex-direction: column; align-items: flex-start; gap: .15rem; padding: .5rem .7rem; border: 1px solid var(--cg-line); border-radius: 8px; text-align: start; color: var(--cg-ink); min-width: 0; }
.cg-recent-open span { color: var(--cg-muted); font-weight: 400; font-size: .82rem; overflow-wrap: anywhere; }
.cg-recent-open:hover { background: var(--cg-surface-2); }

/* tablets and phones */
@media (max-width: 860px) {
  .cg-body { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(52vh, auto) auto; overflow-y: auto; }
  .cg-stage { min-height: 52vh; }
  .cg-panel { border-inline-start: 0; border-top: 1px solid var(--cg-line); overflow: visible; }
  .cg-namewrap { flex-basis: 100%; justify-content: flex-start; order: 5; }
  .cg-name { max-width: none; }
}
@media (max-width: 420px) {
  .cg-toolbar, .cg-tabs, .cg-statusbar { padding-inline: .5rem; }
  .cg-tabs { flex-wrap: wrap; overflow-x: visible; }
  .cg-tab { padding: .4rem .55rem; }
  .cg-preview { padding: 6px; }
  .cg-people li { grid-template-columns: minmax(0, 1fr) auto; }
  .cg-people li input:nth-child(2) { grid-column: 1 / 2; }
  .cg-attrib { white-space: normal; }
}