/* Osiedlowo prototype: phone first (390 x 844 portrait), then landscape and desktop. Look follows
   design/mockups/index.html: white chips on top, a paper dock at the bottom, dark buttons, orange accent. */

:root {
  --ink: #1f2328;
  --muted: #646a72;
  --paper: #fbfaf6;
  --line: #ece8df;
  --soft: #eeebe3;
  --accent: #e8742a;
  --danger: #d4473a;
  --ok: #3c9a5f;
  --st: env(safe-area-inset-top, 0px);
  --sb: env(safe-area-inset-bottom, 0px);
  --sl: env(safe-area-inset-left, 0px);
  --sr: env(safe-area-inset-right, 0px);
}
* {
  box-sizing: border-box;
}
html,
body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  background: #bcd9cf;
  color: var(--ink);
  font:
    15px/1.35 system-ui,
    -apple-system,
    'Segoe UI',
    Roboto,
    sans-serif;
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  -webkit-user-select: none;
  overscroll-behavior: none;
}
body {
  height: 100dvh;
}
button {
  font: inherit;
  color: inherit;
  cursor: pointer;
}
[hidden] {
  display: none !important;
}

#view {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  touch-action: none;
  image-rendering: pixelated;
  display: block;
}

/* ---------- top strip ---------- */
#top {
  position: fixed;
  top: calc(var(--st) + 8px);
  left: calc(var(--sl) + 6px);
  right: calc(var(--sr) + 6px);
  display: flex;
  gap: 4px;
  align-items: center;
  pointer-events: none;
  z-index: 5;
}
#top > * {
  pointer-events: auto;
}
.chip {
  height: 36px;
  background: rgba(255, 255, 255, 0.95);
  border-radius: 18px;
  padding: 0 8px;
  font-size: 14px;
  display: flex;
  gap: 3px;
  align-items: center;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  flex: none;
}
.chip b {
  font-weight: 800;
}
.chip .k {
  font-weight: 600;
  color: var(--muted);
  font-size: 13px;
}
/* the clock: the weekday and the month in a small line over the time (v7), so the date costs no width */
#c-clock {
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 0;
  line-height: 1.05;
  padding: 0 9px;
}
#c-clock .dl {
  font-size: 11px;
  font-weight: 700;
}
#c-clock b {
  font-size: 14px;
}
.chip .ic {
  width: 14px;
  height: 14px;
  flex: none;
}
#c-people b + .ic {
  margin-left: 3px;
}
.chip .u {
  font-size: 12px;
  font-weight: 700;
  color: var(--muted);
}
.round {
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.95);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 15px;
  padding: 0;
  flex: none;
}
.round svg {
  width: 20px;
  height: 20px;
}
#b-speed {
  margin-left: auto;
}
#b-speed.paused {
  background: var(--ink);
  color: #fff;
}

/* the residents chip is a button with a 44 px touch area around the 36 px chip; it opens the Osiedle sheet */
.chip-hit {
  height: 44px;
  padding: 0;
  border: 0;
  background: none;
  display: flex;
  align-items: center;
  flex: none;
}
.chip-hit:active .chip {
  background: #eef4ff;
}

/* ---------- the goal card (design/mockups goal-card style) and its collapsed chip ---------- */
.card {
  position: fixed;
  top: calc(var(--st) + 58px);
  left: calc(var(--sl) + 8px);
  right: calc(var(--sr) + 8px);
  background: rgba(255, 255, 255, 0.96);
  border-radius: 16px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  z-index: 4;
}
.card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.card .t {
  font-size: 12px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 800;
}
.goal {
  display: flex;
  gap: 6px;
  padding: 9px 4px 9px 14px;
}
.goal-body {
  flex: 1;
  min-width: 0;
}
.goal .g {
  font-size: 15px;
  font-weight: 800;
  line-height: 1.2;
  margin-top: 1px;
}
.goal .h {
  font-size: 13px;
  color: var(--muted);
  line-height: 1.3;
  margin-top: 2px;
}
.goal-prog {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
  font-size: 12px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.goal-prog .meter {
  flex: 1;
  margin: 0;
}
.goal-prog .meter i {
  background: var(--accent);
}
.goal-acts {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: space-between;
  gap: 2px;
  margin: -5px 0 0;
}
.goal-acts .x svg,
.goal-chip svg {
  width: 18px;
  height: 18px;
}
.goal.done {
  cursor: pointer;
  background: #fff6ea;
}
.goal.done .t {
  color: var(--accent);
}
.goal-chip {
  position: fixed;
  top: calc(var(--st) + 56px);
  left: calc(var(--sl) + 6px);
  height: 44px;
  border: 0;
  border-radius: 22px;
  padding: 0 12px 0 10px;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18);
  display: flex;
  align-items: center;
  gap: 6px;
  font-weight: 800;
  font-size: 14px;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  z-index: 4;
}
.goal-chip svg {
  color: var(--accent);
}
.goal-chip.flash {
  animation: goal-flash 1.2s ease-out 2;
}
@keyframes goal-flash {
  0% {
    box-shadow:
      0 0 0 0 rgba(232, 116, 42, 0.7),
      0 2px 6px rgba(0, 0, 0, 0.18);
  }
  100% {
    box-shadow:
      0 0 0 14px rgba(232, 116, 42, 0),
      0 2px 6px rgba(0, 0, 0, 0.18);
  }
}
.x {
  width: 44px;
  height: 44px;
  border: 0;
  background: none;
  font-size: 26px;
  line-height: 1;
  color: var(--muted);
  flex: none;
}

/* ---------- the calendar's event (v7): the chip under the goal card, the banner card when it starts ---------- */
.event-chip {
  position: fixed;
  top: calc(var(--st) + 104px);
  left: calc(var(--sl) + 6px);
  height: 44px;
  max-width: calc(100vw - 12px);
  border: 0;
  border-radius: 22px;
  padding: 0 12px 0 10px;
  background: #fff4d6;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18);
  display: flex;
  align-items: center;
  gap: 6px;
  font-weight: 800;
  font-size: 13px;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  z-index: 4;
}
.event-chip svg {
  width: 16px;
  height: 16px;
  flex: none;
  color: #c2410c;
}
.event-chip .ev-prog {
  width: 46px;
  height: 6px;
  border-radius: 3px;
  background: rgba(0, 0, 0, 0.12);
  overflow: hidden;
  flex: none;
}
.event-chip .ev-prog i {
  display: block;
  height: 100%;
  background: #e8742a;
}
.event-chip .ev-n {
  color: var(--muted);
  font-weight: 700;
}
.event-chip.done {
  background: #e3f4e4;
}
.event-chip.done .ev-n {
  color: var(--ok);
  font-weight: 800;
}
.event-chip.quiet,
.event-card.quiet {
  background: #eef0f2;
}
.event-chip.quiet svg {
  color: var(--muted);
}
.event-card {
  position: fixed;
  top: calc(var(--st) + 160px);
  left: 50%;
  transform: translateX(-50%);
  width: max-content;
  max-width: calc(100vw - 24px);
  background: #fff8e6;
  border-left: 5px solid #e8742a;
  border-radius: 14px;
  padding: 9px 14px 10px 12px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
  z-index: 7;
  cursor: pointer;
  animation: ev-in 0.3s ease-out;
}
.event-card.quiet {
  border-left-color: #8b939b;
}
@keyframes ev-in {
  from {
    transform: translate(-50%, -10px);
  }
}
.event-card .ev-k {
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #c2410c;
}
.event-card.quiet .ev-k {
  color: var(--muted);
}
.event-card .ev-name {
  font-size: 18px;
  font-weight: 800;
  line-height: 1.15;
}
.event-card .ev-t {
  font-size: 14px;
  line-height: 1.3;
  margin-top: 2px;
}
.event-card .ev-g {
  font-size: 14px;
  font-weight: 800;
  line-height: 1.3;
  margin-top: 5px;
}

/* ---------- toasts and the floating tag ---------- */
#toasts {
  position: fixed;
  top: calc(var(--st) + 60px);
  left: 50%;
  transform: translateX(-50%);
  width: max-content;
  max-width: calc(100vw - 24px);
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: center;
  pointer-events: none;
  z-index: 8;
}
.toast {
  background: var(--ink);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  padding: 7px 12px;
  border-radius: 12px;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.25);
  text-align: center;
  transition: opacity 0.3s;
}
.toast.bad {
  background: #8f2a20;
}
.toast.goal {
  background: var(--ok);
  font-size: 14px;
  padding: 9px 14px;
}
.toast.out {
  opacity: 0;
}
/* a toast with a button (v9: Pokaż for a broken lift) takes taps */
.toast.with-act {
  display: flex;
  align-items: center;
  gap: 10px;
  text-align: left;
  pointer-events: auto;
  padding: 4px 4px 4px 12px;
}
.toast.with-act .btn {
  flex: none;
  min-height: 44px;
  padding: 0 14px;
}
#tag {
  position: fixed;
  left: 0;
  top: 0;
  transform: translate(-50%, -100%);
  background: var(--ink);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  padding: 5px 10px;
  border-radius: 10px;
  white-space: pre;
  text-align: center;
  pointer-events: none;
  z-index: 3;
}
#tag:after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: -5px;
  margin-left: -5px;
  border: 5px solid transparent;
  border-bottom: 0;
  border-top-color: var(--ink);
}
#fps {
  position: fixed;
  left: calc(var(--sl) + 8px);
  bottom: calc(var(--sb) + 76px);
  background: rgba(0, 0, 0, 0.65);
  color: #9ef0a8;
  font:
    12px/1.3 ui-monospace,
    Menlo,
    monospace;
  padding: 4px 7px;
  border-radius: 6px;
  pointer-events: none;
  z-index: 6;
  white-space: pre;
}

/* ---------- the dock: a panel over the mode bar ---------- */
#dock {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--paper);
  border-radius: 22px 22px 0 0;
  box-shadow: 0 -4px 14px rgba(0, 0, 0, 0.2);
  padding: 0 calc(var(--sr) + 10px) calc(var(--sb) + 8px) calc(var(--sl) + 10px);
  z-index: 5;
  display: flex;
  flex-direction: column;
}
.panel {
  padding: 12px 2px 4px;
  border-bottom: 1px solid var(--line);
}
#modes {
  display: flex;
  gap: 5px;
  padding-top: 8px;
}
.mode {
  flex: 1;
  min-width: 0;
  min-height: 52px;
  border: 0;
  border-radius: 14px;
  background: var(--soft);
  color: #4b5057;
  font-size: 12px;
  font-weight: 800;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 4px 0;
}
.mode svg {
  width: 22px;
  height: 22px;
}
.mode.on {
  background: var(--ink);
  color: #fff;
}

/* build drawer: tabs, then the tab's cards */
.tabs {
  display: flex;
  gap: 6px;
  margin-bottom: 8px;
}
.tab {
  flex: 1;
  min-height: 44px;
  border: 0;
  border-radius: 12px;
  background: var(--soft);
  color: #4b5057;
  font-size: 14px;
  font-weight: 800;
  padding: 0 8px;
}
.tab.on {
  background: var(--ink);
  color: #fff;
}
.cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
}
/* v9: a portrait phone keeps the drawer one row high; a tab with more than three cards (Domy has five, Sklepy four)
   scrolls sideways, the fourth card peeking in at the edge so the row reads as longer than the screen */
@media (max-width: 699px) {
  .cards {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: calc((100% - 12px) / 3.25);
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
    margin: 0 -2px;
    padding: 0 2px;
  }
  .cards::-webkit-scrollbar {
    display: none;
  }
  .bcard {
    scroll-snap-align: start;
  }
}
.bcard {
  background: #fff;
  border: 2px solid var(--line);
  border-radius: 14px;
  padding: 4px 2px 6px;
  text-align: center;
  min-height: 104px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.bcard canvas {
  width: 54px;
  height: 48px;
  image-rendering: pixelated;
  display: block;
}
.bcard .n {
  font-size: 12px;
  font-weight: 800;
  line-height: 1.15;
  min-height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.bcard .n.long {
  font-size: 11px;
  letter-spacing: -0.2px;
}
.bcard .c {
  font-size: 11px;
  color: var(--muted);
  font-weight: 700;
  white-space: nowrap;
}
.bcard .c.up {
  color: #b5493d;
}
.bcard.dim {
  opacity: 0.45;
}
/* a Dzielnica building before 500 residents: greyed, a padlock and when it opens (a tap says so in a toast) */
.bcard.locked {
  background: var(--soft);
}
.bcard.locked canvas,
.bcard.locked .n {
  opacity: 0.45;
  filter: grayscale(0.7);
}
.bcard .c.lk {
  white-space: normal;
  line-height: 1.15;
  color: #4b5057;
}
svg.lock {
  width: 9px;
  height: 11px;
  margin-right: 3px;
  vertical-align: -1px;
}

/* action bar (place, path, demolish) */
#act {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.act-row {
  display: flex;
  gap: 8px;
  align-items: center;
}
.act-info {
  flex: 1;
  min-width: 0;
  display: flex;
  gap: 8px;
  align-items: center;
}
.act-info canvas {
  width: 36px;
  height: 32px;
  image-rendering: pixelated;
  flex: none;
}
.act-info .n {
  font-weight: 800;
  font-size: 15px;
  line-height: 1.15;
}
.act-info .c {
  font-size: 13px;
  color: var(--muted);
  font-weight: 600;
}
.act-hint {
  font-size: 13px;
  color: var(--muted);
  line-height: 1.3;
}
.btn {
  min-height: 44px;
  border: 0;
  border-radius: 12px;
  padding: 0 14px;
  font-weight: 800;
  font-size: 15px;
  background: var(--ink);
  color: #fff;
  white-space: nowrap;
  flex: none;
}
.btn.light {
  background: var(--soft);
  color: var(--ink);
}
.btn.acc {
  background: var(--accent);
}
.btn.ok {
  background: var(--ok);
}
.btn.danger {
  background: var(--danger);
}
.btn:disabled {
  opacity: 0.45;
}
.btn.wide {
  width: 100%;
}

/* bottom sheet */
#sheet {
  max-height: 52dvh;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-top: 4px;
}
.sh-head {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-bottom: 4px;
}
.sh-head .logo {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--soft);
  flex: none;
}
.sh-head .logo canvas {
  width: 36px;
  height: 32px;
  image-rendering: pixelated;
}
.sh-head .name {
  font-size: 19px;
  font-weight: 800;
  line-height: 1.1;
}
.sh-head .sub {
  font-size: 13px;
  color: var(--muted);
}
.sh-head .grow {
  flex: 1;
  min-width: 0;
}
.stat {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  font-size: 14px;
  padding: 7px 0;
  border-top: 1px solid var(--line);
}
.stat b {
  font-weight: 800;
  text-align: right;
}
.stat .warn {
  color: var(--danger);
}
.needs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px 14px;
  padding: 6px 0 8px;
  border-top: 1px solid var(--line);
}
.need {
  font-size: 13px;
}
.need .row {
  display: flex;
  justify-content: space-between;
  gap: 6px;
}
.need .none {
  color: var(--danger);
  font-weight: 700;
  font-size: 12px;
}
.meter {
  height: 7px;
  background: #e7e4dc;
  border-radius: 4px;
  margin-top: 3px;
  overflow: hidden;
}
.meter i {
  display: block;
  height: 100%;
  border-radius: 4px;
  background: var(--ok);
}
.sh-note {
  font-size: 13px;
  color: var(--muted);
  padding: 6px 0;
}
/* a shop unit: its parts wrap in one flex row (the tenant, Zmień; then full-width lines), so a short landscape
   screen can reorder them (below) */
.unit {
  border-top: 1px solid var(--line);
  padding: 8px 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 10px;
}
.unit > .cust,
.unit > .stock,
.unit > .upg,
.unit > .ustate,
.unit > .picker {
  flex: 1 1 100%;
}
.unit .sw {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  flex: none;
  border: 2px solid rgba(0, 0, 0, 0.08);
}
.unit .who {
  flex: 1;
  min-width: 0;
}
.unit .who b {
  font-size: 15px;
}
.unit .who div {
  font-size: 12px;
  color: var(--muted);
}
.partner {
  display: inline-block;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.03em;
  padding: 1px 6px;
  border-radius: 6px;
  background: #ede7f8;
  color: #5a32a3;
  margin-left: 4px;
  vertical-align: 2px;
}
.picker {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 8px;
}
.picker .opt {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  border: 2px solid var(--line);
  background: #fff;
  border-radius: 12px;
  padding: 4px 10px;
  text-align: left;
}
.picker .opt.cur {
  border-color: var(--accent);
}
.picker .opt .grow {
  flex: 1;
}
.picker .opt .p {
  font-size: 12px;
  color: var(--muted);
  font-weight: 700;
  white-space: nowrap;
}
.picker .opt.locked {
  background: var(--soft);
}
.picker .opt.locked .sw,
.picker .opt.locked .grow {
  opacity: 0.5;
}
.picker .opt .p.lk {
  text-align: right;
  color: #4b5057;
}

/* today's customers against the capacity, and the level with Ulepsz (units and the lockers) */
.cust {
  font-size: 12px;
  font-weight: 700;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.cust .row {
  display: flex;
  justify-content: space-between;
  gap: 8px;
}
.cust.bad b {
  color: var(--danger);
}
.cust .meter {
  margin-top: 2px;
}
.place .cust {
  padding: 7px 0 4px;
  border-top: 1px solid var(--line);
  font-size: 13px;
}
.upg {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
}
.who .lvs,
.cust .tw,
.btn.swap .i {
  display: none;
}
.btn.swap .i {
  width: 20px;
  height: 20px;
}
.cust .r {
  display: flex;
  gap: 8px;
}
.upg .lv {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
}
.dots {
  display: inline-flex;
  gap: 3px;
}
.dots i {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  border: 2px solid var(--accent);
}
.dots i.on {
  background: var(--accent);
}
.upg .top {
  font-size: 12px;
  font-weight: 700;
  color: var(--muted);
}
.btn.up {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  line-height: 1.15;
  padding-top: 4px;
  padding-bottom: 4px;
}
.btn.up small {
  font-size: 11px;
  font-weight: 700;
  opacity: 0.92;
}
.btn.dim {
  opacity: 0.5;
}

/* a parcel for sale before Dzielnica (v8): the padlock and when it opens */
.parcel-lock {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 9px 0;
  border-top: 1px solid var(--line);
  font-size: 13px;
  color: var(--muted);
}
.parcel-lock .lock {
  width: 14px;
  height: 16px;
  margin-top: 1px;
  flex: none;
  color: var(--muted);
}
.parcel-lock b {
  display: block;
  color: var(--ink);
  font-size: 14px;
}

/* Kup działkę (v8): the button with its price and what it gives, or, short of money, dimmed with what is missing */
.buy {
  padding: 8px 0;
  border-top: 1px solid var(--line);
}
.buy .btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  line-height: 1.15;
  padding-top: 5px;
  padding-bottom: 5px;
}
.buy .btn small {
  font-size: 12px;
  font-weight: 700;
  opacity: 0.92;
}
.buy .short {
  margin-top: 6px;
  text-align: center;
  font-size: 13px;
  font-weight: 800;
  color: var(--danger);
}

/* termomodernizacja (v7) in an old block's sheet: the button, the works, the insulated block */
.reno {
  padding: 8px 0;
  border-top: 1px solid var(--line);
  font-size: 13px;
}
.reno .btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  line-height: 1.15;
  padding-top: 5px;
  padding-bottom: 5px;
}
.reno .btn small {
  font-size: 12px;
  font-weight: 700;
  opacity: 0.92;
  color: inherit; /* white on the button, not the muted grey of .reno small below */
}
.reno.works,
.reno.done {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 2px 10px;
}
.reno.works .meter {
  flex: 1 0 100%;
  margin: 3px 0 2px;
}
.reno.works b {
  color: #9a5b12;
}
.reno.done b {
  color: var(--ok);
}
.reno small {
  color: var(--muted);
}
/* v9: the cut price beside a DIY store, the old one struck through */
.reno .btn s {
  font-size: 12px;
  font-weight: 700;
  opacity: 0.75;
  margin-left: 4px;
}
/* the tower's broken lift: what is wrong, Napraw windę, and when the coop steps in */
.lift {
  padding: 8px 0;
  border-top: 1px solid var(--line);
  font-size: 13px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.lift .row {
  display: flex;
  justify-content: space-between;
  gap: 10px;
}
.lift .row b {
  color: #b5352a;
}
.lift .row span,
.lift small.auto {
  color: var(--muted);
}
.lift .btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  line-height: 1.15;
  padding-top: 5px;
  padding-bottom: 5px;
}
.lift .btn small {
  font-size: 12px;
  font-weight: 700;
  opacity: 0.92;
  color: inherit;
}
.stat.rent small.up {
  font-size: 11px;
  font-weight: 800;
  color: var(--ok);
  margin-left: 4px;
}
.picker .hint {
  padding: 0 4px;
}

/* who lives here: per resident type the head count and a small happiness bar, two columns */
.types {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3px 14px;
  padding: 6px 0 8px;
  border-top: 1px solid var(--line);
  font-size: 13px;
}
.types .row {
  display: flex;
  justify-content: space-between;
  gap: 6px;
  white-space: nowrap;
}
.types .row b {
  font-weight: 800;
}
.types .pc {
  color: var(--muted);
  font-weight: 700;
}
.types .ty.none {
  color: var(--muted);
}
.types .meter {
  height: 5px;
  margin-top: 2px;
}

/* the Osiedle sheet's money a day */
.money .stat {
  padding: 5px 0;
}
.money .stat + .stat {
  border-top: 0;
}
.money .out {
  color: var(--danger);
}
.money .net {
  border-top: 1px solid var(--line);
}

/* a unit's goods and deliveries */
.unit .stock {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 700;
  color: var(--muted);
  white-space: nowrap;
}
.unit .stock .meter {
  flex: 1;
  margin: 0;
}
.unit .stock span {
  min-width: 74px;
  font-variant-numeric: tabular-nums;
}
.ustate {
  margin-top: 5px;
  font-size: 13px;
  font-weight: 700;
  color: #3d6f8f;
}
.ustate.bad {
  color: var(--danger);
}
.ustate.row-act {
  display: flex;
  align-items: center;
  gap: 10px;
}
.ustate.row-act span {
  flex: 1;
  min-width: 0;
}

/* the Osiedle sheet */
.est-event {
  background: #fff4d6;
  border-radius: 12px;
  padding: 7px 10px 8px;
  margin: 2px 0 8px;
  font-size: 13px;
}
.est-event.quiet {
  background: #eef0f2;
}
.est-event .row {
  display: flex;
  align-items: baseline;
  gap: 8px;
}
.est-event .row .k {
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #c2410c;
}
.est-event .row b {
  font-size: 15px;
}
.est-event .row .d {
  margin-left: auto;
  color: var(--muted);
  white-space: nowrap;
}
.est-event .t {
  color: var(--muted);
  line-height: 1.3;
  margin-top: 1px;
}
.est-event .row.g {
  justify-content: space-between;
  margin-top: 4px;
  line-height: 1.3;
}
.est-event .row.g b {
  font-size: 13px;
  white-space: nowrap;
}
.est-event .h {
  margin-top: 4px;
  line-height: 1.3;
}
.est-event .ok {
  color: var(--ok);
}
.stat.sub {
  border-top: 0;
  padding-top: 0;
  font-size: 13px;
  color: var(--muted);
}
.stat.sub b {
  font-weight: 700;
}
.sec {
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
  padding: 9px 0 4px;
  border-top: 1px solid var(--line);
}
.complaints,
.goals {
  list-style: none;
  margin: 0 0 6px;
  padding: 0;
  font-size: 14px;
}
.complaints li {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 3px 0;
}
.complaints li b {
  color: var(--danger);
  white-space: nowrap;
  font-size: 13px;
}
.complaints li.warn span {
  color: var(--danger);
  font-weight: 700;
}
.complaints li.ok span {
  color: var(--ok);
  font-weight: 700;
}
.goals li {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 3px 0;
  color: var(--muted);
}
.goals li i {
  font-style: normal;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 800;
  background: var(--soft);
}
.goals li span {
  flex: 1;
  min-width: 0;
}
.goals li.done {
  color: var(--ink);
}
.goals li.done i {
  background: var(--ok);
  color: #fff;
}
.goals li.cur {
  color: var(--ink);
  font-weight: 800;
}
.goals li.cur i {
  background: var(--accent);
  color: #fff;
}
.goals li b {
  font-size: 11px;
  color: var(--accent);
  text-transform: uppercase;
}
.ver {
  margin-top: 10px;
  font-size: 12px;
  color: var(--muted);
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 4px 16px;
  flex-wrap: wrap;
}
/* the site's pages in the menu (links, not buttons): a wide one looks like the light buttons; the policy is a small
   text link beside the version, still 44 px tall to tap */
a.btn {
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}
.menu-card .btn.site {
  margin-top: 8px;
}
.ver a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--ink);
  font-weight: 700;
  text-underline-offset: 3px;
}
/* opened in a new tab (from disk or the home network's preview, which have no pages): an arrow says so */
a.site[target='_blank']::after {
  content: '\2197';
  margin-left: 4px;
  font-weight: 700;
}
.news {
  margin-top: 8px;
}

/* ---------- the Dzielnica card: once, when the estate reaches 500 residents (estate.js stageCardShow) ---------- */
.overlay.stage-wrap {
  align-items: center;
  padding: 16px;
  z-index: 21;
}
.stage-card {
  border-radius: 20px;
  padding: 16px 18px 18px;
  max-width: 400px;
}
.stage-k {
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--accent);
}
.stage-card h2 {
  margin: 2px 0 10px;
  font-size: 26px;
  font-weight: 800;
}
.stage-card .help {
  margin-bottom: 16px;
}

/* ---------- menu ---------- */
.overlay {
  position: fixed;
  inset: 0;
  background: rgba(20, 22, 26, 0.45);
  z-index: 20;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.menu-card {
  width: 100%;
  max-width: 440px;
  max-height: calc(100dvh - var(--st) - 12px);
  overflow-y: auto;
  background: var(--paper);
  border-radius: 22px 22px 0 0;
  padding: 6px 16px calc(var(--sb) + 18px);
}
/* the head (and its close button) stays in view while the menu scrolls, as it does to Co nowego after an update */
.menu-card .card-head {
  position: sticky;
  top: -6px;
  background: var(--paper);
  z-index: 1;
}
.menu-card .row-label {
  scroll-margin-top: 52px;
}
.menu-card .name {
  font-size: 19px;
  font-weight: 800;
}
.row-label {
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
  margin: 16px 0 6px;
}
.seg {
  display: flex;
  background: var(--soft);
  border-radius: 12px;
  padding: 3px;
  gap: 3px;
}
.seg button {
  flex: 1;
  min-height: 44px;
  border: 0;
  border-radius: 10px;
  background: none;
  font-weight: 800;
  font-size: 14px;
}
.seg button.on {
  background: #fff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
}
.toggle {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  margin-top: 8px;
  font-weight: 700;
}
.toggle input {
  width: 22px;
  height: 22px;
  accent-color: var(--accent);
}
.help {
  margin: 0;
  padding-left: 18px;
  font-size: 14px;
  color: #3a3f45;
}
.help li + li {
  margin-top: 5px;
}

/* ---------- the site's text pages (jak-grac/, zmiany/, polityka-prywatnosci/, 404.html, written by
   tools/build-site.js): one of the game's sheets on the map's mint ground. A paper panel, its head the title and a
   round close button back to the game (sticky while the text scrolls under it), one reading column, and the links to
   the other pages under the panel. The game's html and body are fixed to the screen; a page scrolls. ---------- */
html.page,
body.page {
  height: auto;
  min-height: 100%;
  overflow: auto;
  overscroll-behavior: auto;
  user-select: text;
  -webkit-user-select: text;
}
body.page {
  font-size: 16px;
  line-height: 1.55;
}
.page-wrap {
  max-width: 720px;
  margin: 0 auto;
  padding: calc(var(--st) + 24px) calc(var(--sr) + 16px) calc(var(--sb) + 24px) calc(var(--sl) + 16px);
  display: grid;
  gap: 10px;
}
.page-box {
  background: var(--paper);
  border-radius: 22px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
}
.page-head {
  position: sticky;
  top: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 10px 10px 22px;
  background: var(--paper);
  border-bottom: 1px solid var(--line);
  border-radius: 22px 22px 0 0;
}
.page-head h1 {
  flex: 1;
  margin: 0;
  font-size: 24px;
  font-weight: 800;
  line-height: 1.2;
}
/* the close button: a link dressed as the game's round buttons */
.page-x {
  width: 44px;
  height: 44px;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18);
  color: var(--ink);
  font-size: 26px;
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
}
.page-x:focus-visible,
.page-body a:focus-visible,
.page-foot a:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.page-body {
  padding: 16px 22px 22px;
}
.page-body > :first-child {
  margin-top: 0;
}
.page-body h2 {
  margin: 26px 0 8px;
  font-size: 19px;
  font-weight: 800;
  line-height: 1.25;
}
.page-body p,
.page-body ul,
.page-body ol {
  margin: 0 0 10px;
}
.page-body ul,
.page-body ol {
  padding-left: 20px;
}
.page-body li {
  margin-bottom: 6px;
}
.page-body li::marker {
  color: var(--accent);
  font-weight: 800;
}
.page-body .lead {
  font-size: 17px;
}
.page-body .meta {
  color: var(--muted);
  font-size: 14px;
}
.page-body a,
.page-foot a {
  color: #b4521a;
  text-underline-offset: 3px;
}
.page-body code {
  font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  font-size: 0.86em;
  background: var(--soft);
  border-radius: 4px;
  padding: 0 4px;
  overflow-wrap: anywhere;
}
.page-body table {
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 12px;
  font-size: 15px;
}
.page-body th,
.page-body td {
  text-align: left;
  vertical-align: top;
  padding: 7px 8px 7px 0;
  border-top: 1px solid var(--line);
}
.page-body th {
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
/* the mode names in Jak grać, as the bar shows them */
.page-body .k {
  display: inline-block;
  padding: 0 7px;
  border-radius: 8px;
  background: var(--ink);
  color: #fff;
  font-size: 14px;
  font-weight: 800;
  white-space: nowrap;
}
.page-foot {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0 18px;
  font-size: 15px;
  font-weight: 700;
}
.page-foot a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--ink);
}
.page-foot a[aria-current] {
  color: var(--muted);
  text-decoration: none;
}
/* a two-column table whose first column is a name (the policy's storage keys): on a phone each row stacks, the name
   on its own line and never broken, the text under it */
.page-body table.stack code {
  white-space: nowrap;
  overflow-wrap: normal;
}
@media (max-width: 520px) {
  .page-body table.stack tr:first-child {
    display: none;
  }
  .page-body table.stack tr {
    display: block;
    padding: 8px 0;
    border-top: 1px solid var(--line);
  }
  .page-body table.stack td {
    display: block;
    padding: 0;
    border: 0;
  }
  .page-body table.stack td + td {
    margin-top: 3px;
  }
}
@media (max-width: 520px) {
  .page-wrap {
    padding: calc(var(--st) + 8px) calc(var(--sr) + 8px) calc(var(--sb) + 16px) calc(var(--sl) + 8px);
  }
  .page-head {
    padding-left: 16px;
  }
  .page-head h1 {
    font-size: 21px;
  }
  .page-body {
    padding: 14px 16px 18px;
  }
}

/* set by fitTop() when big numbers would spill past the screen edge: the month goes first, then the day, then zł */
#top.tight #v-mon,
#top.tighter #v-day,
#top.tightest .chip .u {
  display: none;
}
#top.tight .chip {
  padding: 0 7px;
}

/* ---------- wide screens (landscape phones, desktop): the dock is a column on the right ---------- */
@media (min-width: 700px) {
  #dock {
    left: auto;
    right: calc(var(--sr) + 8px);
    bottom: calc(var(--sb) + 8px);
    width: 380px;
    border-radius: 20px;
    padding: 0 10px 8px;
    max-height: calc(100dvh - var(--st) - 68px);
  }
  #sheet,
  #drawer,
  #act {
    overflow-y: auto;
    max-height: none;
    flex: 0 1 auto;
    min-height: 0;
  }
  .card {
    right: auto;
    width: 360px;
  }
  .overlay {
    align-items: center;
  }
  .menu-card {
    border-radius: 20px;
    padding-bottom: 18px;
  }
  #fps {
    bottom: calc(var(--sb) + 10px);
  }
}
@media (min-width: 700px) and (max-height: 500px) {
  .bcard {
    min-height: 0;
  }
  .bcard canvas {
    width: 45px;
    height: 40px;
  }
  .mode {
    min-height: 46px;
  }
  /* a short screen: the goal card drops its hint line */
  .goal .h {
    display: none;
  }
  .goal-acts {
    flex-direction: row-reverse;
    align-items: center;
    margin: 0;
  }
  /* a sheet gets two columns (a block's shop units beside its needs) in a wider dock */
  #dock.sheet-open {
    width: min(600px, calc(100vw - 236px));
  }
  .needs {
    gap: 2px 10px;
  }
  .need {
    font-size: 12px;
  }
  .need .row {
    white-space: nowrap;
  }
  #sheet .cols {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 16px;
    align-items: start;
  }
  #sheet .cols.one {
    display: block;
  }
  #sheet .col > :first-child,
  #sheet .col > .sec:first-child {
    border-top: 0;
  }
  .unit .who b {
    font-size: 14px;
  }
  /* a unit in the narrow column: Zmień as a swap icon, the name and Ulepsz on one row, the level under the name, the
     goods on the customers' line (no stock bar), so both units fit without scrolling */
  .unit .sw,
  .unit > .stock,
  .unit .upg .lv,
  .who .k,
  .cust .d {
    display: none;
  }
  .who .lvs span:last-child {
    display: none;
  }
  .who .lvs {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 700;
    color: var(--muted);
    margin-top: 3px;
  }
  .cust .tw {
    display: inline;
  }
  .unit > .chg {
    order: 3;
  }
  .unit > .chg.swap {
    order: 1;
    width: 44px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .btn.swap .t {
    display: none;
  }
  .btn.swap .i {
    display: block;
  }
  .unit > .who {
    order: 2;
    flex: 1 1 0;
  }
  .unit > .upg {
    order: 3;
    flex: none;
    min-height: 0;
  }
  .unit > .cust {
    order: 4;
  }
  .unit > .ustate {
    order: 7;
  }
  .unit > .picker {
    order: 8;
  }
  /* the Dyskont's one unit has the column to itself: its level, its Ulepsz row and its goods bar stay as in portrait */
  .unit.own > .upg {
    flex: 1 1 100%;
    order: 5;
  }
  .unit.own > .stock,
  .unit.own .upg .lv {
    display: flex;
  }
  .unit.own > .stock {
    order: 4;
  }
  .unit.own .cust .tw {
    display: none;
  }
  .btn.up {
    padding-left: 10px;
    padding-right: 10px;
  }
  .money .stat {
    padding: 3px 0;
  }
  .types {
    gap: 1px 10px;
    padding: 4px 0 5px;
    font-size: 12px;
  }
  /* a short screen: the sheet tightens so the shop units come into view sooner */
  .sh-head .logo {
    width: 36px;
    height: 36px;
  }
  .sh-head .name {
    font-size: 17px;
  }
  .stat {
    padding: 4px 0;
    font-size: 13px;
  }
  .needs {
    padding: 4px 0 5px;
    gap: 2px 14px;
  }
  .unit {
    padding: 5px 0;
  }
}