/* Dictionary, Wiki and Maps (web/apps/*.js; SPEC-desktop.md 4). Mac pixels, black and white, as style.css. */
.refwin .wbody { display: flex; flex-direction: column; overflow: hidden; }
.refwin .wbody > .reftop, .refpane > .reftop { flex: 0 0 auto; }
.refpane { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
.refout { flex: 1 1 auto; min-height: 0; overflow: auto; overscroll-behavior: contain; }
.reftop .findrow { margin-bottom: calc(6 * var(--px)); }
.refrow2 { flex-wrap: wrap; }
.refsugwrap { position: relative; flex: 1 1 auto; min-width: 0; display: flex; }
.refsugwrap .cui-field { flex: 1 1 auto; width: 100%; }
.refsug {
  position: absolute; left: 0; right: 0; top: 100%; z-index: 50; margin: 0; padding: 0; list-style: none;
  max-height: calc(200 * var(--px)); overflow: auto; background: var(--cui-paper);
  border: var(--px) solid var(--cui-ink); box-shadow: var(--px) var(--px) 0 var(--cui-ink);
}
.refsugitem {
  display: flex; flex-direction: column; width: 100%; text-align: left; padding: calc(2 * var(--px)) calc(6 * var(--px));
  font-family: var(--geneva); font-size: calc(12 * var(--px)); background: var(--cui-paper); color: var(--cui-ink); border: 0; cursor: default;
}
.refsugitem:hover, .refsugitem:focus { background: var(--cui-ink); color: var(--cui-paper); outline: none; }
.refsugsub { font-size: calc(10 * var(--px)); }
.refsugnone { padding: calc(2 * var(--px)) calc(6 * var(--px)); font-size: calc(12 * var(--px)); color: var(--dim); }
.reftabs { margin-bottom: calc(6 * var(--px)); }

/* Dictionary */
.dictout { font-family: var(--geneva); font-size: calc(12 * var(--px)); line-height: 1.35; padding-right: calc(4 * var(--px)); }
.dictout .dhead { display: inline-block; margin: 0 0 calc(6 * var(--px)); padding: calc(1 * var(--px)) calc(8 * var(--px));
  font-family: var(--chicago); font-size: calc(14 * var(--px)); font-weight: normal; background: var(--cui-ink); color: var(--cui-paper);
  border-radius: var(--cui-radius-tag); }
.dresp { margin-left: calc(12 * var(--px)); font-family: var(--geneva); font-size: calc(12 * var(--px)); }
.dpos { margin: calc(8 * var(--px)) 0 calc(2 * var(--px)); font-family: var(--chicago); font-size: calc(12 * var(--px)); font-weight: normal; }
.dforms { margin-left: calc(8 * var(--px)); font-family: var(--geneva); color: var(--dim); }
.dsenses { margin: 0; padding-left: calc(22 * var(--px)); }
.dsenses li { margin: calc(2 * var(--px)) 0; }
.dex { margin: calc(1 * var(--px)) 0 0; font-style: italic; }
.dwords, .dform, .dorigin, .dnote, .dmean { margin: calc(4 * var(--px)) 0; }
.dlabel { font-family: var(--chicago); margin-right: calc(6 * var(--px)); }
.dtag { display: inline-block; margin: 0 calc(4 * var(--px)) 0 0; padding: 0 calc(4 * var(--px));
  font-size: calc(10 * var(--px)); border: var(--px) solid var(--cui-ink); border-radius: var(--cui-radius-tag); }
.spellpane { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; gap: calc(6 * var(--px)); }
.spellbox { height: auto; min-height: calc(90 * var(--px)); resize: vertical; padding: calc(4 * var(--px)); font-family: var(--geneva); }
.spellpane .findrow { margin: 0; justify-content: flex-end; }
.spellmarks { margin: 0; padding: 0; list-style: none; font-size: calc(12 * var(--px)); }
.spellmarks li { display: flex; flex-wrap: wrap; gap: calc(6 * var(--px)); align-items: baseline; padding: calc(3 * var(--px)) 0;
  border-bottom: var(--px) solid var(--cui-ink); }
.spellword { font-family: var(--chicago); }
.spellword.spellgr { text-decoration: underline wavy var(--cui-blue); text-underline-offset: 0.2em; }
.spellword.spelllk { text-decoration: underline double #0a8a32; text-underline-offset: 0.16em; }   /* #559 possible mistake */

/* Wiki */
.wikiframe { flex: 1 1 auto; min-height: 0; width: 100%; border: var(--px) solid var(--cui-ink); background: var(--cui-paper); }
.wikilist { margin: 0; padding-left: calc(16 * var(--px)); font-size: calc(12 * var(--px)); line-height: 1.6; }
.refbook .popup { max-width: calc(260 * var(--px)); }
/* the person's own wikis (T108) */
.wikitools { display: inline-flex; flex-wrap: wrap; gap: calc(4 * var(--px)); }
.wikimeta { flex: 0 0 auto; max-height: calc(80 * var(--px)); overflow: auto; padding: calc(4 * var(--px)) 0 0;
  font-family: var(--geneva); font-size: calc(11 * var(--px)); }
.wikimetarow { display: flex; flex-wrap: wrap; align-items: center; gap: calc(2 * var(--px)) calc(8 * var(--px)); margin-bottom: calc(2 * var(--px)); }
.wikilabel { font-family: var(--chicago); }
.wikihead { margin: calc(4 * var(--px)) 0; font-family: var(--chicago); font-size: calc(14 * var(--px)); }
.wikinew { padding: calc(8 * var(--px)); }
.wikiform { display: flex; flex-direction: column; gap: calc(6 * var(--px)); min-width: calc(260 * var(--px)); }
.wikirowbtns { display: inline-flex; gap: calc(4 * var(--px)); }
.wikihist { max-height: calc(300 * var(--px)); overflow: auto; }
.wikidiffs { max-height: calc(320 * var(--px)); overflow: auto; font-family: var(--monaco, Monaco, monospace); font-size: calc(11 * var(--px));
  white-space: pre-wrap; border: var(--px) solid var(--cui-ink); padding: calc(4 * var(--px)); }
.wikidiff.add { font-weight: bold; }
.wikidiff.del { text-decoration: line-through; color: var(--dim); }
.wikilib .cui-row .cui-rowextra { flex: 0 0 auto; }
.wikilibfoot { display: flex; justify-content: space-between; padding-top: calc(6 * var(--px)); font-family: var(--geneva); font-size: calc(12 * var(--px)); }

/* Maps */
.mapwin .wbody { padding: calc(6 * var(--px)); }
.mappane .reftop .findrow { margin-bottom: calc(6 * var(--px)); }
.mapwrap { position: relative; flex: 1 1 auto; min-height: 0; border: var(--px) solid var(--cui-ink); overflow: hidden; }
.mapcanvas { position: absolute; inset: 0; background: var(--cui-paper); overflow: hidden; }
/* one Mac pixel is a whole number of screen pixels (maps.js); pixelated keeps it so if the browser rounds */
.mapscreen { display: block; image-rendering: pixelated; image-rendering: crisp-edges; touch-action: none; outline: none; cursor: grab; }
.mapscreen:active { cursor: grabbing; }
.mapstate { position: absolute; left: 50%; transform: translateX(-50%); bottom: calc(6 * var(--px)); padding: 0 calc(6 * var(--px));
  background: var(--cui-paper); border: var(--px) solid var(--cui-ink); font-size: calc(9 * var(--px)); line-height: calc(15 * var(--px)); white-space: nowrap; }
.mapsugitem { display: flex; align-items: center; gap: calc(6 * var(--px)); }
.mapsugicon { width: var(--cui-icon); height: var(--cui-icon); margin: var(--cui-icon-sm-inset); image-rendering: pixelated; flex: none; }
.mapsugtext { display: flex; flex-direction: column; min-width: 0; }
.mapctl { position: absolute; right: calc(6 * var(--px)); top: calc(6 * var(--px)); display: flex; flex-direction: column; gap: calc(4 * var(--px)); }
.cui-btn.mapzoom { min-width: 0; width: calc(28 * var(--px)); font-size: calc(14 * var(--px)); }
.mapbar { position: absolute; left: calc(6 * var(--px)); top: calc(6 * var(--px)); display: flex; gap: calc(6 * var(--px)); align-items: center; }
.mapcard {
  position: absolute; left: calc(6 * var(--px)); bottom: calc(28 * var(--px)); max-width: calc(260 * var(--px));
  padding: calc(6 * var(--px)) calc(26 * var(--px)) calc(6 * var(--px)) calc(8 * var(--px));
  background: var(--cui-paper); border: var(--px) solid var(--cui-ink); box-shadow: var(--px) var(--px) 0 var(--cui-ink); font-size: calc(12 * var(--px));
}
.mapcard .mapclose { position: absolute; right: calc(4 * var(--px)); top: calc(4 * var(--px)); }
.mapcardname { font-family: var(--chicago); }
.mapcardsub { font-size: calc(10 * var(--px)); }
.mapcardbtns { display: flex; gap: calc(4 * var(--px)); margin-top: calc(4 * var(--px)); }
/* T111: directions, saved places, areas */
.maptrip { display: flex; flex-direction: column; gap: calc(4 * var(--px)); margin-bottom: calc(6 * var(--px)); }
.maptriprow { display: flex; gap: calc(6 * var(--px)); align-items: center; min-width: 0; }
.maptripwrap { flex: 1 1 0; min-width: 0; }
.maptripwrap .cui-field { width: 100%; }
.maptripsum { font-family: var(--chicago); font-size: calc(12 * var(--px)); white-space: nowrap; overflow: hidden; text-overflow: clip; }
.maptripsteps { max-height: calc(120 * var(--px)); overflow: auto; }
.maptriplist .cui-row .cui-rowextra { flex: 0 0 auto; }
.mapsugglyph { width: var(--cui-icon); height: var(--cui-icon); margin: var(--cui-icon-sm-inset); image-rendering: pixelated; flex: none; }
.mapareas { min-width: calc(280 * var(--px)); display: flex; flex-direction: column; gap: calc(6 * var(--px)); }
.mapareas .cui-list { max-height: calc(220 * var(--px)); overflow: auto; }
.mapareabtns { display: inline-flex; gap: calc(4 * var(--px)); }
.mapareasnone { font-size: calc(12 * var(--px)); padding: calc(6 * var(--px)) 0; }

@media (max-width: 700px), (max-height: 500px) and (pointer: coarse) {
  .refrow2 .cui-btn { min-width: 0; }
  .mapcard { right: calc(6 * var(--px)); max-width: none; }
  .maptriprow { flex-wrap: wrap; }
  .maptripwrap { flex: 1 1 calc(120 * var(--px)); }
  .maptripsteps { max-height: calc(90 * var(--px)); }
}

/* Repositories (T5, apps/repos.js) */
.reposbody { display: flex; gap: calc(8 * var(--px)); flex: 1 1 auto; min-height: 0; }
.reposlist { flex: 0 0 calc(200 * var(--px)); min-width: 0; overflow: auto; }
.repospane { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; min-height: 0; }
.reposmeta, .reposerr { margin: 0 0 calc(4 * var(--px)); font-family: var(--geneva); font-size: calc(11 * var(--px)); }
.reposerr { font-weight: bold; }
.reposdiff { max-height: calc(360 * var(--px)); overflow: auto; margin: 0; font-size: calc(11 * var(--px)); white-space: pre-wrap; }
@media (max-width: 600px) { .reposbody { flex-direction: column; } .reposlist { flex: 0 0 auto; max-height: 40vh; } }
.reposwin .wbody { display: flex; flex-direction: column; overflow: hidden; }