/**
 * P-CEMIUX.OSM.GATE.1 · Map + role presentation primitives.
 * Domain-neutral, presentation-only. No motor/screen/entity selectors.
 */

/* Count tabs */
.cemi-ux-count-tabs { display:flex; align-items:center; gap:var(--cemi-space-2); min-width:0; overflow-x:auto; overscroll-behavior-inline:contain; scrollbar-width:thin; padding:2px; }
.cemi-ux-count-tab { display:inline-flex; align-items:center; justify-content:center; gap:var(--cemi-space-2); min-height:40px; padding:.55rem .8rem; border:1px solid var(--cemi-color-border); border-radius:var(--cemi-radius-pill); background:var(--cemi-color-surface); color:var(--cemi-color-text); font-size:var(--cemi-font-size-sm); font-weight:700; line-height:1; white-space:nowrap; cursor:pointer; transition:background var(--cemi-duration-fast) var(--cemi-ease-standard),border-color var(--cemi-duration-fast) var(--cemi-ease-standard),color var(--cemi-duration-fast) var(--cemi-ease-standard),box-shadow var(--cemi-duration-fast) var(--cemi-ease-standard); }
.cemi-ux-count-tab__count { display:inline-grid; place-items:center; min-width:1.55rem; height:1.55rem; padding:0 .4rem; border-radius:var(--cemi-radius-pill); background:var(--cemi-color-surface-strong); color:var(--cemi-color-ink); font-size:var(--cemi-font-size-xs); font-variant-numeric:tabular-nums; }
.cemi-ux-count-tab[aria-selected="true"],.cemi-ux-count-tab.is-active { border-color:color-mix(in srgb,var(--cemi-color-brand) 48%,var(--cemi-color-border)); background:var(--cemi-color-brand-soft); color:var(--cemi-color-brand-strong); box-shadow:0 0 0 2px color-mix(in srgb,var(--cemi-color-brand) 12%,transparent); }
.cemi-ux-count-tab[aria-selected="true"] .cemi-ux-count-tab__count,.cemi-ux-count-tab.is-active .cemi-ux-count-tab__count { background:var(--cemi-color-brand); color:#fff; }
.cemi-ux-count-tab:disabled,.cemi-ux-count-tab[aria-disabled="true"] { opacity:.5; cursor:not-allowed; }

/* Role chips */
.cemi-ux-role-chip { display:inline-flex; align-items:center; gap:.38rem; width:max-content; max-width:100%; min-height:28px; padding:.3rem .58rem; border:1px solid var(--cemi-color-border); border-radius:var(--cemi-radius-pill); background:var(--cemi-color-surface-soft); color:var(--cemi-color-text); font-size:var(--cemi-font-size-xs); font-weight:800; line-height:1; letter-spacing:.01em; white-space:nowrap; }
.cemi-ux-role-chip[data-role="primary"] { border-color:color-mix(in srgb,var(--cemi-map-primary) 42%,var(--cemi-color-border)); background:color-mix(in srgb,var(--cemi-map-primary) 9%,var(--cemi-color-surface)); color:var(--cemi-map-primary); }
.cemi-ux-role-chip[data-role="secondary"] { border-color:color-mix(in srgb,var(--cemi-map-secondary) 38%,var(--cemi-color-border)); color:var(--cemi-map-secondary); }
.cemi-ux-role-chip[data-role="hidden"] { border-style:dashed; color:var(--cemi-color-muted); }
.cemi-ux-role-chip[data-role="review"] { border-color:color-mix(in srgb,var(--cemi-map-review) 45%,var(--cemi-color-border)); background:color-mix(in srgb,var(--cemi-map-review) 9%,var(--cemi-color-surface)); color:color-mix(in srgb,var(--cemi-map-review) 84%,var(--cemi-color-ink)); }
.cemi-ux-role-chip[data-role="pending"] { color:var(--cemi-color-muted); }
.cemi-ux-role-chip[data-role="confirmed"] { border-color:color-mix(in srgb,var(--cemi-color-success) 38%,var(--cemi-color-border)); color:var(--cemi-color-success); }

/* Map toolbar */
.cemi-ux-map-toolbar { display:flex; flex-direction:column; align-items:stretch; gap:var(--cemi-space-2); width:max-content; max-width:min(12rem,calc(100% - 1rem)); padding:var(--cemi-space-2); border:1px solid var(--cemi-map-control-border); border-radius:var(--cemi-radius-md); background:var(--cemi-map-control-bg); box-shadow:var(--cemi-shadow-md); backdrop-filter:blur(10px); }
.cemi-ux-map-toolbar__group { display:flex; align-items:center; gap:var(--cemi-space-1); }
.cemi-ux-map-control { display:inline-flex; align-items:center; justify-content:center; gap:.45rem; min-width:44px; min-height:44px; padding:.55rem .65rem; border:1px solid transparent; border-radius:var(--cemi-radius-sm); background:transparent; color:var(--cemi-color-ink); font-size:var(--cemi-font-size-sm); font-weight:800; line-height:1; cursor:pointer; }
.cemi-ux-map-control:hover,.cemi-ux-map-control:focus-visible { background:var(--cemi-color-surface-strong); outline:none; }
.cemi-ux-map-control:focus-visible { box-shadow:0 0 0 3px color-mix(in srgb,var(--cemi-color-focus) 25%,transparent); }
.cemi-ux-map-control[aria-pressed="true"],.cemi-ux-map-control.is-active { background:var(--cemi-color-brand-soft); color:var(--cemi-color-brand-strong); }
.cemi-ux-map-control:disabled,.cemi-ux-map-control[aria-disabled="true"] { opacity:.45; cursor:not-allowed; }
.cemi-ux-map-control__icon { display:inline-grid; place-items:center; width:1.1rem; height:1.1rem; flex:0 0 auto; }

/* Map markers: shell conveys role, inner icon conveys entity/family. */
.cemi-ux-map-marker { position:relative; display:grid; place-items:center; width:32px; height:32px; padding:0; border:3px solid #fff; border-radius:50%; background:var(--cemi-map-secondary); color:#fff; box-shadow:0 2px 8px rgba(26,34,49,.28); cursor:pointer; transition:transform var(--cemi-duration-fast) var(--cemi-ease-standard),box-shadow var(--cemi-duration-fast) var(--cemi-ease-standard),opacity var(--cemi-duration-fast) var(--cemi-ease-standard); }
.cemi-ux-map-marker:hover,.cemi-ux-map-marker:focus-visible { transform:scale(1.08); z-index:6; outline:none; }
.cemi-ux-map-marker[data-map-role="property"] { width:42px; height:42px; background:var(--cemi-map-property); border-width:4px; box-shadow:0 0 0 8px var(--cemi-map-halo),0 4px 14px rgba(26,34,49,.22); z-index:7; }
.cemi-ux-map-marker[data-map-role="active"] { width:44px; height:44px; background:var(--cemi-map-active); border-width:4px; box-shadow:0 0 0 7px var(--cemi-map-halo),0 5px 18px rgba(26,34,49,.28); z-index:8; }
.cemi-ux-map-marker[data-map-role="primary"] { width:36px; height:36px; background:var(--cemi-map-primary); z-index:5; }
.cemi-ux-map-marker[data-map-role="secondary"] { background:var(--cemi-map-secondary); z-index:4; }
.cemi-ux-map-marker[data-map-role="hidden"] { background:var(--cemi-map-hidden); opacity:.55; border-style:dashed; z-index:2; }
.cemi-ux-map-marker[data-map-role="review"]::after { content:"!"; position:absolute; inset:auto -5px -5px auto; display:grid; place-items:center; width:18px; height:18px; border:2px solid #fff; border-radius:50%; background:var(--cemi-map-review); color:#fff; font-size:11px; font-weight:900; }
.cemi-ux-map-marker__icon { display:grid; place-items:center; width:1em; height:1em; font-size:1rem; line-height:1; }
.cemi-ux-map-marker__label { position:absolute; top:calc(100% + .4rem); left:50%; transform:translateX(-50%); max-width:10rem; padding:.28rem .5rem; border-radius:var(--cemi-radius-pill); background:color-mix(in srgb,var(--cemi-color-ink) 92%,transparent); color:#fff; font-size:var(--cemi-font-size-xs); font-weight:800; white-space:nowrap; pointer-events:none; }

/* Map callout */
.cemi-ux-map-callout { min-width:12rem; max-width:min(20rem,calc(100vw - 3rem)); display:grid; gap:var(--cemi-space-2); padding:var(--cemi-space-3); border:1px solid color-mix(in srgb,var(--cemi-color-brand) 24%,var(--cemi-color-border)); border-radius:var(--cemi-radius-md); background:color-mix(in srgb,var(--cemi-color-surface) 97%,transparent); color:var(--cemi-color-text); box-shadow:var(--cemi-shadow-md); backdrop-filter:blur(8px); }
.cemi-ux-map-callout__title { margin:0; color:var(--cemi-color-ink); font-size:var(--cemi-font-size-sm); font-weight:800; }
.cemi-ux-map-callout__meta { display:flex; flex-wrap:wrap; align-items:center; gap:var(--cemi-space-2); color:var(--cemi-color-muted); font-size:var(--cemi-font-size-xs); }
.cemi-ux-map-callout__reason { margin:0; color:var(--cemi-color-text); font-size:var(--cemi-font-size-xs); line-height:1.4; }

/* Action hierarchy aliases, intentionally domain-neutral. */
.cemi-ux-action-primary,.cemi-ux-action-secondary,.cemi-ux-action-tertiary { display:inline-flex; align-items:center; justify-content:center; gap:var(--cemi-space-2); min-height:44px; padding:.72rem 1rem; border-radius:var(--cemi-radius-md); font-weight:800; line-height:1; text-decoration:none; cursor:pointer; }
.cemi-ux-action-primary { border:1px solid var(--cemi-color-brand); background:var(--cemi-color-brand); color:#fff; }
.cemi-ux-action-secondary { border:1px solid var(--cemi-color-border-strong); background:var(--cemi-color-surface); color:var(--cemi-color-ink); }
.cemi-ux-action-tertiary { border:1px solid transparent; background:var(--cemi-color-surface-soft); color:var(--cemi-color-muted); }
.cemi-ux-action-primary:disabled,.cemi-ux-action-secondary:disabled,.cemi-ux-action-tertiary:disabled { opacity:.5; cursor:not-allowed; }

/* Compact canonical variants used by dense workspaces. */
.cemi-ux-card[data-cemi-card-type="summary_card"][data-cemi-variant="compact"],
.cemi-ux-card[data-cemi-card-type="decision_card"][data-cemi-variant="compact"],
.cemi-ux-card[data-cemi-card-type="result_card"][data-cemi-variant="compact"] { gap:var(--cemi-space-2); padding:var(--cemi-space-3); border-radius:var(--cemi-radius-md); box-shadow:none; }

@media (max-width:47.999rem) {
  .cemi-ux-map-toolbar { flex-direction:row; max-width:calc(100% - 1rem); overflow-x:auto; }
  .cemi-ux-map-toolbar__group { flex:0 0 auto; }
  .cemi-ux-map-control__label { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }
  .cemi-ux-count-tabs { margin-inline:-.25rem; padding-inline:.25rem; }
  .cemi-ux-map-callout { min-width:9rem; max-width:min(15rem,calc(100vw - 2rem)); padding:var(--cemi-space-2); }
}

@media (prefers-reduced-motion: reduce) {
  .cemi-ux-map-marker,.cemi-ux-count-tab,.cemi-ux-map-control { transition:none; }
}