/* GISela workspace. Root rules are scoped to .uwapp-root.uwapp-gisela (the body carries the app class too).
   Own colour tokens for light and dark (html[data-theme] / prefers-color-scheme). Motion only without reduced motion. */
.uwapp-root.uwapp-gisela {
  --gi-bg: #f2f4f3; --gi-surface: #ffffff; --gi-surface-2: #e8edeb; --gi-ink: #17211e; --gi-muted: #4a5753;
  --gi-line: #d0d8d5; --gi-control: #6b7773; --gi-accent: #0f6e5a; --gi-accent-ink: #0b5747; --gi-on-accent: #ffffff;
  --gi-error: #b42318; --gi-focus: #b45309; --gi-sel: #d0021b; --gi-stage: #dfeaf3;
  background: var(--gi-bg); color: var(--gi-ink); color-scheme: light;
  display: flex; flex-direction: column; min-height: 0;
}
:root[data-theme="dark"] .uwapp-root.uwapp-gisela {
  --gi-bg: #111816; --gi-surface: #19211f; --gi-surface-2: #24302c; --gi-ink: #e6eeeb; --gi-muted: #aebbb6;
  --gi-line: #33403c; --gi-control: #8a9893; --gi-accent: #5fd1b5; --gi-accent-ink: #8de3cd; --gi-on-accent: #0a1f19;
  --gi-error: #ff8a80; --gi-focus: #fbbf24; --gi-sel: #ff6b7f; --gi-stage: #14202c;
  color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .uwapp-root.uwapp-gisela {
    --gi-bg: #111816; --gi-surface: #19211f; --gi-surface-2: #24302c; --gi-ink: #e6eeeb; --gi-muted: #aebbb6;
    --gi-line: #33403c; --gi-control: #8a9893; --gi-accent: #5fd1b5; --gi-accent-ink: #8de3cd; --gi-on-accent: #0a1f19;
    --gi-error: #ff8a80; --gi-focus: #fbbf24; --gi-sel: #ff6b7f; --gi-stage: #14202c;
    color-scheme: dark;
  }
}

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

.gi-app { display: flex; flex-direction: column; flex: 1; min-height: 0; height: calc(100dvh - 48px); background: var(--gi-bg); color: var(--gi-ink); position: relative; }
.gi-app :focus-visible { outline: 3px solid var(--gi-focus); outline-offset: 2px; }
.gi-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; }
.gi-hint { color: var(--gi-muted); font-size: .8rem; margin: .2rem 0 .35rem; }
.gi-error { color: var(--gi-error); font-weight: 600; font-size: .85rem; margin: .25rem 0; }
.gi-error:empty { display: none; }
.gi-empty { color: var(--gi-muted); font-size: .85rem; padding: .3rem 0; }
.gi-mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .8rem; }
.gi-row { display: flex; flex-wrap: wrap; gap: .4rem; margin: .4rem 0; }

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

/* bar */
.gi-bar { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .6rem; padding: .3rem .5rem; background: var(--gi-surface); border-bottom: 1px solid var(--gi-line); }
.gi-menus, .gi-tools, .gi-zoom, .gi-undo { display: flex; flex-wrap: wrap; align-items: center; gap: .15rem; }
.gi-tool { display: inline-flex; align-items: center; gap: .3rem; min-height: 34px; padding: .25rem .55rem; border: 1px solid var(--gi-line); border-radius: 8px; color: var(--gi-ink); }
.gi-tool[aria-pressed="true"] { background: var(--gi-accent); border-color: var(--gi-accent); color: var(--gi-on-accent); }
.gi-ws-chip:empty { display: none; }
.gi-ws-chip { margin-inline-start: auto; }

/* menus */
.gi-menu-wrap { position: relative; }
.gi-menu-btn { display: inline-flex; align-items: center; gap: .2rem; min-height: 34px; padding: .3rem .55rem; border-radius: 8px; color: var(--gi-ink); }
.gi-menu-btn:hover, .gi-menu-btn[aria-expanded="true"] { background: var(--gi-surface-2); }
.gi-menu { position: absolute; z-index: 40; inset-inline-start: 0; top: calc(100% + 4px); min-width: 16rem; max-width: min(24rem, 92vw); max-height: min(78vh, 640px); overflow-y: auto; padding: .3rem; background: var(--gi-surface); border: 1px solid var(--gi-control); border-radius: 10px; box-shadow: 0 12px 30px rgb(0 0 0 / .22); }
.gi-menu[hidden] { display: none; }
.gi-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(--gi-ink); }
.gi-menu-item:hover, .gi-menu-item:focus { background: var(--gi-surface-2); }
.gi-menu-item[aria-disabled="true"] { color: var(--gi-muted); cursor: not-allowed; }
.gi-menu-key { color: var(--gi-muted); font-size: .78rem; font-weight: 600; }
.gi-menu-sep { height: 1px; margin: .3rem .2rem; background: var(--gi-line); }
.gi-layer .gi-menu { inset-inline-start: auto; inset-inline-end: 0; }

/* main area */
.gi-main { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(15rem, 19rem) minmax(0, 1fr); }
.gi-side { overflow-y: auto; background: var(--gi-surface); border-inline-end: 1px solid var(--gi-line); padding: .4rem .7rem 1rem; min-width: 0; }
.gi-sec { margin-bottom: .9rem; }
.gi-sec-head { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.gi-h { font-size: .92rem; margin: .4rem 0; }
.gi-layers { list-style: none; margin: 0; padding: 0; }
.gi-layer { display: flex; align-items: center; gap: .35rem; padding: .15rem .25rem; border-radius: 8px; }
.gi-layer.is-selected { background: var(--gi-surface-2); }
.gi-layer-name { flex: 1; min-width: 0; display: flex; align-items: center; gap: .4rem; min-height: 32px; padding: .1rem .3rem; text-align: start; font-weight: 500; }
.gi-layer-name[aria-pressed="true"] { font-weight: 700; }
.gi-layer-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gi-layer-count { color: var(--gi-muted); font-size: .76rem; font-weight: 600; }
.gi-layer-menu { min-height: 30px; padding: .1rem .4rem; }
.gi-swatch { width: 14px; height: 14px; border-radius: 3px; border: 1px solid var(--gi-control); flex: none; }
.gi-swatch-line { height: 4px; border: 0; }
.gi-swatch-point { border-radius: 50%; }
.gi-legend h3, .gi-leg-title { font-size: .82rem; margin: .4rem 0 .2rem; color: var(--gi-ink); }
.gi-leg-list { list-style: none; margin: 0; padding: 0; font-size: .8rem; }
.gi-leg-list li { display: flex; align-items: center; gap: .45rem; padding: .1rem 0; overflow-wrap: anywhere; }
/* class ranges ("446 – 1727") keep their order in right-to-left pages; names still follow their own script */
.gi-leg-list li > span:last-child { unicode-bidi: plaintext; }
.gi-leg-swatch { width: 18px; height: 12px; border-radius: 2px; flex: none; border: 1px solid rgb(0 0 0 / .25); }
.gi-leg-line { height: 4px; border: 0; }
.gi-leg-point { width: 11px; height: 11px; border-radius: 50%; }
.gi-swatch-point.gi-sym-square, .gi-swatch-point.gi-sym-diamond { border-radius: 2px; }
.gi-swatch-point:is(.gi-sym-triangle, .gi-sym-star, .gi-sym-cross) { border-radius: 0; border: 0; clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.gi-leg-point.gi-sym-square { border-radius: 1px; }
.gi-leg-point.gi-sym-diamond { border-radius: 1px; transform: rotate(45deg) scale(.85); }
.gi-leg-point.gi-sym-triangle { border-radius: 0; clip-path: polygon(50% 0, 100% 100%, 0 100%); border: 0; }
.gi-leg-point.gi-sym-star { border-radius: 0; border: 0; clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); }
.gi-leg-point.gi-sym-cross { border-radius: 0; border: 0; clip-path: polygon(35% 0, 65% 0, 65% 35%, 100% 35%, 100% 65%, 65% 65%, 65% 100%, 35% 100%, 35% 65%, 0 65%, 0 35%, 35% 35%); }
.gi-featlist { max-height: 14rem; overflow-y: auto; border: 1px solid var(--gi-control); border-radius: 8px; padding: .2rem; position: relative; }
.gi-feat { padding: .25rem .45rem; border-radius: 6px; font-size: .84rem; cursor: pointer; overflow-wrap: anywhere; }
.gi-feat.is-active { background: var(--gi-surface-2); outline: 2px solid var(--gi-accent); outline-offset: -2px; }
.gi-feat[aria-selected="true"] { font-weight: 700; }
.gi-featinfo .gi-props { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: .1rem .6rem; font-size: .8rem; margin: .3rem 0; }
.gi-props dt { color: var(--gi-muted); font-weight: 600; }
.gi-props dd { margin: 0; overflow-wrap: anywhere; }

.gi-mapwrap { position: relative; min-width: 0; min-height: 0; display: flex; }
.gi-map { position: relative; flex: 1; min-width: 0; min-height: 0; overflow: hidden; background: var(--gi-stage); touch-action: none; cursor: grab; }
.gi-map[data-tool="measure"], .gi-map[data-tool="draw"] { cursor: crosshair; }
.gi-map:focus-visible { outline-offset: -3px; }
.gi-map-svg, .gi-overlay { position: absolute; inset: 0; }
.gi-map-svg svg { display: block; }
.gi-map-svg [data-fid] { cursor: pointer; }
.gi-overlay { pointer-events: none; }
.gi-overlay .gi-ov-handle { pointer-events: all; cursor: move; fill: #ffffff; stroke: var(--gi-sel); stroke-width: 2; }
.gi-ov-line { fill: none; stroke: #b45309; stroke-width: 2.5; stroke-dasharray: 6 4; }
.gi-ov-area { fill: rgb(180 83 9 / .18); stroke: #b45309; stroke-width: 2.5; stroke-dasharray: 6 4; }
.gi-ov-dot { fill: #ffffff; stroke: #b45309; stroke-width: 2; }
.gi-ov-snap { fill: none; stroke: #1d4ed8; stroke-width: 2; }

/* status */
.gi-statusbar { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem 1rem; padding: .25rem .7rem; background: var(--gi-surface); border-top: 1px solid var(--gi-line); font-size: .8rem; min-height: 1.9rem; }
.gi-status-msg { flex: 1; margin: 0; min-width: 12rem; }
.gi-scale, .gi-coords { color: var(--gi-muted); font-variant-numeric: tabular-nums; }

/* attribute table */
.gi-tablepanel { flex: none; height: 38%; min-height: 9rem; display: flex; flex-direction: column; background: var(--gi-surface); border-top: 2px solid var(--gi-line); padding: .3rem .6rem; }
.gi-tablepanel[hidden] { display: none; }
.gi-table-head { display: flex; flex-wrap: wrap; align-items: center; gap: .2rem .8rem; }
.gi-table-head .gi-row { margin: .2rem 0; }
.gi-table-scroll { flex: 1; overflow: auto; min-height: 0; position: relative; border: 1px solid var(--gi-line); border-radius: 6px; }
.gi-table { width: max-content; min-width: 100%; }
.gi-table td, .gi-table th { white-space: nowrap; max-width: 22rem; overflow: hidden; text-overflow: ellipsis; }
.gi-table th.gi-num { text-align: end; }
.gi-table td.gi-num { text-align: end; font-variant-numeric: tabular-nums; }
.gi-table tr.is-selected td, .gi-table tr.is-selected th { background: color-mix(in srgb, var(--gi-sel) 14%, var(--gi-surface)); }
.gi-sort { display: inline-flex; gap: .2rem; font-weight: 700; color: var(--gi-ink); }
.gi-rowsel { min-width: 2.2rem; min-height: 26px; border: 1px solid var(--gi-line); border-radius: 6px; padding: 0 .3rem; }
.gi-rowsel[aria-pressed="true"] { background: var(--gi-sel); border-color: var(--gi-sel); color: #ffffff; }
.gi-keys { width: 100%; }

/* dialogs */
.gi-dialog { width: min(34rem, 94vw); max-height: 88vh; padding: 0; border: 1px solid var(--gi-control); border-radius: 12px; background: var(--gi-surface); color: var(--gi-ink); box-shadow: 0 20px 50px rgb(0 0 0 / .3); }
.gi-dialog-wide { width: min(56rem, 96vw); }
.gi-dialog::backdrop { background: rgb(0 0 0 / .45); }
.gi-dialog-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .7rem 1rem; border-bottom: 1px solid var(--gi-line); }
.gi-dialog-head h2 { margin: 0; font-size: 1.05rem; }
.gi-dialog-lede { margin: .7rem 1rem 0; color: var(--gi-muted); font-size: .88rem; }
.gi-dialog-body { padding: .8rem 1rem 1rem; overflow-y: auto; }
.gi-dialog-actions { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: flex-end; margin-top: .9rem; }
.gi-field { display: grid; grid-template-columns: minmax(0, 1fr); gap: .2rem; margin-bottom: .6rem; }
.gi-field label { font-weight: 600; font-size: .85rem; }
.gi-check { display: flex; align-items: center; gap: .45rem; margin: .3rem 0 .6rem; font-size: .88rem; }
.gi-fieldset { border: 1px solid var(--gi-line); border-radius: 8px; padding: .5rem .7rem; }
.gi-crs { display: flex; flex-wrap: wrap; gap: .4rem; }
.gi-crs select { flex: 1; min-width: 12rem; }
.gi-crs input { width: 8rem; }
.gi-crs input[hidden] { display: none; }
.gi-cards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); gap: .7rem; }
.gi-card { border: 1px solid var(--gi-line); border-radius: 10px; padding: .7rem; display: flex; flex-direction: column; gap: .4rem; }
.gi-card h3 { margin: 0; font-size: .95rem; }
.gi-card p { margin: 0; font-size: .84rem; color: var(--gi-muted); flex: 1; }
.gi-recent { list-style: none; margin: 0; padding: 0; }
.gi-recent li { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; padding: .35rem 0; border-bottom: 1px solid var(--gi-line); }
.gi-recent-name { flex: 1; min-width: 12rem; font-weight: 600; }
.gi-recent-name small { font-weight: 400; color: var(--gi-muted); }
.gi-style { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 14rem); gap: 1rem; }
.gi-print { display: grid; grid-template-columns: minmax(0, 15rem) minmax(0, 1fr); gap: 1rem; align-items: start; }
.gi-print-preview { border: 1px solid var(--gi-line); background: #ffffff; min-width: 0; }
.gi-print-preview svg { display: block; width: 100%; height: auto; }
.gi-help { font-size: .82rem; margin: .2rem 0 .6rem; }
.gi-help summary { cursor: pointer; font-weight: 600; }
.gi-help p { margin: .3rem 0; overflow-wrap: anywhere; }
.gi-preview { font-size: .82rem; margin: .2rem 0; padding-inline-start: 1.2rem; overflow-wrap: anywhere; }

@media (max-width: 860px) {
  .gi-app { height: auto; min-height: calc(100dvh - 48px); }
  .gi-main { grid-template-columns: minmax(0, 1fr); grid-template-rows: 60vh auto; }
  .gi-mapwrap { order: -1; min-height: 60vh; }
  .gi-side { border-inline-end: 0; border-top: 1px solid var(--gi-line); }
  .gi-style, .gi-print { grid-template-columns: minmax(0, 1fr); }
  .gi-tool-txt { display: none; }
  .gi-tablepanel { height: 50vh; }
}
@media (prefers-reduced-motion: no-preference) {
  /* hover feedback only: pressed/primary colours switch at once (text and fill must never be out of step) */
  .gi-btn:not(.gi-btn-primary), .gi-menu-item { transition: background-color .12s ease; }
}