/* Zoning-map design system.
   Color is information: each zone color marks what a district does. */

:root {
  color-scheme: light;
  --paper: #e6eae3;
  --panel: #f3f5f1;
  --ink: #1c2a30;
  --ink-2: #56656b;
  --line: #c9d1ca;
  --street: #ffffff;
  --ind: #e0a93b;
  --com: #5b8fd1;
  --civ: #8e7cc3;
  --res: #7fb069;
  --park: #4e9a6b;
  --ops: #5e6e74;
  --sign: #c8442f;
  --ok: #3e8e5a;
  --zone: var(--ink);
  --radius: 6px;
  --font: 'Overpass', 'Highway Gothic', 'Segoe UI', system-ui, sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --paper: #172023;
    --panel: #1f2a2e;
    --ink: #e3eae6;
    --ink-2: #9aa9a4;
    --line: #34433f;
    --street: #2a3639;
    --ind: #e8b652;
    --com: #6fa0dd;
    --civ: #a08fd3;
    --res: #8cbf75;
    --park: #5bae7b;
    --ops: #83959b;
    --sign: #e0624d;
    --ok: #5bb07a;
  }
}

* {
  box-sizing: border-box;
}
html,
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
#root {
  min-height: 100vh;
}
h1,
h2,
h3 {
  margin: 0;
  line-height: 1.15;
  letter-spacing: -0.01em;
}
h1 {
  font-size: 36px;
  font-weight: 900;
}
h2 {
  font-size: 21px;
  font-weight: 800;
}
h3 {
  font-size: 17px;
  font-weight: 800;
}
p {
  margin: 0;
}
a {
  color: inherit;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
code {
  font-family: ui-monospace, 'SF Mono', Menlo, monospace;
  font-size: 13px;
  word-break: break-all;
}
input,
select,
textarea {
  font: inherit;
  color: var(--ink);
  background: var(--street);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 9px 11px;
  width: 100%;
  min-width: 0;
}
input:focus,
select:focus,
textarea:focus {
  outline: 2px solid var(--zone);
  outline-offset: 1px;
  border-color: transparent;
}
:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}
.dim {
  color: var(--ink-2);
}
.neg {
  color: var(--sign);
}
.pos {
  color: var(--ok);
}
.strong {
  font-weight: 800;
}

/* Zones ------------------------------------------------------------------------ */
.zone-ind { --zone: var(--ind); }
.zone-com { --zone: var(--com); }
.zone-civ { --zone: var(--civ); }
.zone-res { --zone: var(--res); }
.zone-park { --zone: var(--park); }
.zone-ops { --zone: var(--ops); }

.zone-chip {
  display: inline-block;
  width: 0.7em;
  height: 0.7em;
  border-radius: 2px;
  background: var(--zone);
  margin-right: 0.45em;
  vertical-align: 0.05em;
  flex: none;
}
.zone-map .zone-chip {
  background: conic-gradient(var(--ind) 0 25%, var(--com) 0 50%, var(--res) 0 75%, var(--civ) 0);
}

/* Shell ------------------------------------------------------------------------ */
.shell {
  display: grid;
  grid-template-columns: 284px minmax(0, 1fr);
  min-height: 100vh;
}
.side {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
  padding: 20px 18px;
  border-right: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  background: none;
  border: 0;
  padding: 0;
  color: var(--ink);
  font: inherit;
  font-weight: 900;
  font-size: 19px;
  letter-spacing: 0.02em;
  cursor: pointer;
  text-align: left;
}
.brand svg {
  width: 28px;
  height: 28px;
}
.main {
  padding: 32px clamp(18px, 4vw, 48px) 64px;
  max-width: 1180px;
  width: 100%;
}

/* Permit ----------------------------------------------------------------------- */
.permit {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.permit-loading {
  min-height: 160px;
}
.permit-title {
  font-weight: 800;
}
.permit-copy {
  color: var(--ink-2);
  font-size: 14px;
}
.permit-id {
  display: flex;
  gap: 12px;
  align-items: center;
}
.permit-name {
  font-weight: 800;
  font-size: 17px;
  word-break: break-all;
}
.permit-sub {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 10px;
  color: var(--ink-2);
  font-size: 13px;
}
.permit-alert {
  color: var(--sign);
  font-weight: 700;
  font-size: 14px;
}
.permit-stats {
  margin: 0;
  display: grid;
  gap: 10px;
}
.permit-stats dt {
  font-size: 13px;
  color: var(--ink-2);
  display: flex;
  justify-content: space-between;
}
.permit-stats dd {
  margin: 2px 0 0;
  font-size: 18px;
  font-weight: 800;
}
.permit-shift {
  font: inherit;
  font-size: 14px;
  font-weight: 700;
  text-align: left;
  background: color-mix(in srgb, var(--ind) 22%, var(--panel));
  border: 1px solid color-mix(in srgb, var(--ind) 60%, var(--line));
  color: var(--ink);
  border-radius: var(--radius);
  padding: 8px 10px;
  cursor: pointer;
}
.permit-foot {
  display: flex;
  justify-content: flex-end;
}
.linkish {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  font-size: 14px;
  color: var(--ink-2);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.linkish.strong {
  color: var(--ink);
  font-size: inherit;
  text-decoration: none;
}
.linkish.strong:hover {
  text-decoration: underline;
}

/* Nav -------------------------------------------------------------------------- */
.nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.nav-item {
  display: flex;
  align-items: center;
  font: inherit;
  font-weight: 700;
  font-size: 15px;
  color: var(--ink);
  background: none;
  border: 0;
  border-radius: var(--radius);
  padding: 8px 10px;
  cursor: pointer;
  text-align: left;
}
.nav-item:hover {
  background: var(--panel);
}
.nav-item.on {
  background: color-mix(in srgb, var(--zone) 24%, var(--paper));
}

/* Buttons ---------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font: inherit;
  font-weight: 800;
  font-size: 15px;
  line-height: 1;
  border-radius: var(--radius);
  padding: 11px 16px;
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
}
.btn:disabled {
  cursor: not-allowed;
  opacity: 0.45;
}
.btn-primary {
  background: var(--ink);
  color: var(--paper);
}
.btn-primary:not(:disabled):hover {
  background: color-mix(in srgb, var(--ink) 85%, var(--zone));
}
.btn-ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--line);
}
.btn-ghost:not(:disabled):hover {
  border-color: var(--ink-2);
}
.btn-danger {
  background: transparent;
  color: var(--sign);
  border-color: color-mix(in srgb, var(--sign) 50%, var(--line));
}
.btn-sm {
  font-size: 14px;
  padding: 7px 11px;
}
.spinner {
  width: 12px;
  height: 12px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

/* Districts & panels ------------------------------------------------------------ */
.district {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.district-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 16px;
  padding-bottom: 16px;
  border-bottom: 4px solid var(--zone);
}
.district-head h1 {
  display: flex;
  align-items: center;
}
.lede {
  color: var(--ink-2);
  max-width: 68ch;
  margin-top: 8px;
}
.panel {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
  overflow-x: auto;
}
.panel-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
}
.note {
  color: var(--ink-2);
  font-size: 14px;
  max-width: 72ch;
}
.panel-head .note {
  margin-top: 4px;
}
.sub-h {
  font-size: 15px;
  margin-top: 6px;
}
.empty {
  color: var(--ink-2);
  font-size: 15px;
  padding: 8px 0;
}
.cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 20px;
  align-items: start;
}
.stack {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.row-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}
.banner {
  background: color-mix(in srgb, var(--sign) 15%, var(--panel));
  border: 1px solid var(--sign);
  border-radius: var(--radius);
  padding: 10px 14px;
  font-weight: 700;
}

/* Forms ------------------------------------------------------------------------ */
.field {
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 0;
}
.field-label {
  font-size: 14px;
  font-weight: 700;
}
.field-hint {
  font-size: 13px;
  color: var(--ink-2);
}
.form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 12px 14px;
}
.settings-grid {
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
}
.settings-grid .field-label {
  font-weight: 600;
  font-size: 13px;
  word-break: break-all;
}
.inline-form {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}
.inline-form input {
  flex: 1 1 160px;
  width: auto;
}
.tag-picker,
.switches {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.tag-picker label,
.switch {
  font-size: 14px;
  font-weight: 700;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 4px 12px;
  cursor: pointer;
  user-select: none;
}
.tag-picker input,
.switch input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.tag-picker label.on {
  background: color-mix(in srgb, var(--zone) 30%, var(--panel));
  border-color: var(--zone);
}
.switch.on {
  background: color-mix(in srgb, var(--sign) 18%, var(--panel));
  border-color: var(--sign);
  color: var(--sign);
}
.tag-picker label:focus-within,
.switch:focus-within {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}
textarea.code {
  font-family: ui-monospace, Menlo, monospace;
  font-size: 13px;
}

/* Small parts ------------------------------------------------------------------ */
.amt {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.sym {
  font-weight: 600;
  color: var(--ink-2);
  font-size: 0.85em;
}
.tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.tag {
  font-size: 13px;
  font-weight: 700;
  border-radius: 4px;
  padding: 2px 8px;
  background: var(--paper);
  border: 1px solid var(--line);
}
.tag-req {
  border-color: var(--ink-2);
}
.tag-bonus {
  background: color-mix(in srgb, var(--ind) 22%, var(--panel));
  border-color: color-mix(in srgb, var(--ind) 55%, var(--line));
}
.tag-missing {
  color: var(--sign);
  border-color: var(--sign);
}
.meter {
  height: 8px;
  background: color-mix(in srgb, var(--ink) 10%, var(--panel));
  border-radius: 4px;
  overflow: hidden;
}
.meter-fill {
  height: 100%;
  background: var(--ink);
  transition: width 0.4s ease;
}
.meter-ind .meter-fill { background: var(--ind); }
.meter-civ .meter-fill { background: var(--civ); }
.meter-sign .meter-fill { background: var(--sign); }
.avatar {
  border-radius: 50%;
  object-fit: cover;
  flex: none;
  background: var(--line);
}
.avatar-blank {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 13px;
}
.tabs {
  display: flex;
  gap: 4px;
  border-bottom: 1px solid var(--line);
  overflow-x: auto;
}
.tabs button {
  font: inherit;
  font-weight: 700;
  font-size: 15px;
  color: var(--ink-2);
  background: none;
  border: 0;
  border-bottom: 3px solid transparent;
  padding: 8px 12px;
  cursor: pointer;
  white-space: nowrap;
}
.tabs button.on {
  color: var(--ink);
  border-bottom-color: var(--zone);
}
.count {
  display: inline-block;
  margin-left: 6px;
  min-width: 20px;
  padding: 0 6px;
  border-radius: 10px;
  background: var(--ink);
  color: var(--paper);
  font-size: 12px;
  line-height: 20px;
  text-align: center;
}
.status {
  font-size: 13px;
  font-weight: 800;
  text-transform: capitalize;
}
.status-confirmed,
.status-active {
  color: var(--ok);
}
.status-failed,
.status-rejected,
.status-banned {
  color: var(--sign);
}
.status-review,
.status-queued,
.status-sent,
.status-frozen {
  color: var(--ind);
}
.role {
  font-size: 12px;
  font-weight: 800;
  border: 1px solid var(--zone);
  border-radius: 4px;
  padding: 0 6px;
  text-transform: capitalize;
}

/* Tables ----------------------------------------------------------------------- */
.table {
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
}
.table th {
  text-align: left;
  font-size: 13px;
  color: var(--ink-2);
  font-weight: 700;
  padding: 6px 10px 8px 0;
  border-bottom: 1px solid var(--line);
}
.table td {
  padding: 10px 10px 10px 0;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}
.table .num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.table tr.clickable {
  cursor: pointer;
}
.table tr.clickable:hover td {
  background: color-mix(in srgb, var(--zone) 8%, transparent);
}
.plain-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.plain-list li {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  align-items: center;
  justify-content: space-between;
  padding: 9px 0;
  border-bottom: 1px solid var(--line);
  font-size: 15px;
}
.plain-list.audit li {
  justify-content: flex-start;
}
.kv {
  margin: 0;
}
.kv div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 0;
  border-bottom: 1px solid var(--line);
}
.kv dt {
  color: var(--ink-2);
}
.kv dd {
  margin: 0;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

/* Map -------------------------------------------------------------------------- */
.map-page {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.map-head {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: flex-start;
}
.map-head h1 {
  font-size: clamp(40px, 6vw, 64px);
  letter-spacing: -0.02em;
}
.map-frame {
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--line);
}
.map {
  display: block;
  width: 100%;
  height: auto;
}
.map-streets {
  fill: var(--street);
}
.map-avenue {
  stroke: color-mix(in srgb, var(--ink) 12%, var(--street));
  stroke-width: 2;
  stroke-dasharray: 10 10;
}
.parcel {
  cursor: pointer;
  outline: none;
}
.parcel rect:first-child {
  fill: color-mix(in srgb, var(--zone) 62%, var(--street));
  stroke: color-mix(in srgb, var(--zone) 80%, var(--ink));
  stroke-width: 1;
  transition: fill 0.15s ease;
}
.parcel:hover rect:first-child,
.parcel:focus-visible rect:first-child {
  fill: var(--zone);
  stroke: var(--ink);
  stroke-width: 2.5;
}
.parcel-ind { --zone: var(--ind); }
.parcel-com { --zone: var(--com); }
.parcel-civ { --zone: var(--civ); }
.parcel-res { --zone: var(--res); }
.parcel-park { --zone: var(--park); }
.parcel-mine rect:first-child {
  stroke: var(--ink);
  stroke-width: 3;
}
.parcel-vacant rect:first-child {
  fill: transparent;
  stroke: var(--res);
  stroke-width: 2;
  stroke-dasharray: 6 5;
}
.parcel-vacant:hover rect:first-child,
.parcel-vacant:focus-visible rect:first-child {
  fill: color-mix(in srgb, var(--res) 25%, var(--street));
  stroke-dasharray: none;
}
.parcel text,
.parcel-static text {
  fill: var(--ink);
  pointer-events: none;
}
.parcel-title {
  font-weight: 900;
  font-size: 19px;
}
.parcel-res .parcel-title {
  font-size: 15px;
}
.parcel-sub {
  font-size: 13px;
  font-weight: 600;
}
.parcel-meta {
  font-size: 13px;
  fill: var(--ink);
  opacity: 0.8;
}
.parcel-figure {
  font-size: 34px;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
}
.lot-plain {
  fill: var(--panel);
  stroke: var(--line);
}
.lot-empty {
  fill: color-mix(in srgb, var(--res) 12%, var(--street));
}
.gauge-track {
  fill: color-mix(in srgb, var(--ink) 18%, transparent);
}
.gauge-fill {
  fill: var(--ink);
}
.legend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  font-size: 14px;
  color: var(--ink-2);
}
.legend i {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 2px;
  background: var(--zone);
  margin-right: 6px;
  vertical-align: -1px;
}
@media (prefers-reduced-motion: no-preference) {
  .map .parcel,
  .map .lot-empty {
    animation: zone-in 0.5s ease both;
  }
  .map .parcel-ind { animation-delay: 0.05s; }
  .map .parcel-civ { animation-delay: 0.12s; }
  .map .parcel-com { animation-delay: 0.19s; }
  .map .parcel-park { animation-delay: 0.26s; }
  .map .parcel-res,
  .map .lot-empty { animation-delay: 0.34s; }
}
@keyframes zone-in {
  from {
    opacity: 0;
  }
}

/* Jobs ------------------------------------------------------------------------- */
.job {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
}
.job:last-child {
  border-bottom: 0;
}
.job-main {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
.job-town {
  font-weight: 600;
  font-size: 14px;
  color: var(--ink-2);
}
.job-desc {
  color: var(--ink-2);
  font-size: 15px;
}
.job-facts,
.item-facts,
.town-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 16px;
  font-size: 14px;
  color: var(--ink-2);
}
.job-facts span:first-child {
  color: var(--ink);
  font-weight: 800;
}
.job-actions {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.claim-status {
  font-size: 14px;
  font-weight: 700;
}
.claim-wait { color: var(--ind); }
.claim-ok { color: var(--ok); }
.claim-err { color: var(--sign); }
.shift-now {
  border: 2px solid var(--ind);
}

/* Market ----------------------------------------------------------------------- */
.shop {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 14px;
}
.item {
  background: var(--street);
  border: 1px solid var(--line);
  border-top: 4px solid var(--rarity, var(--line));
  border-radius: 8px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.rarity-common { --rarity: var(--line); }
.rarity-uncommon { --rarity: var(--res); }
.rarity-rare { --rarity: var(--com); }
.rarity-epic { --rarity: var(--civ); }
.rarity-legendary { --rarity: var(--ind); }
.item-top {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
}
.item-rarity {
  font-size: 12px;
  font-weight: 700;
  color: var(--ink-2);
  text-transform: capitalize;
}
.item-desc {
  font-size: 14px;
  color: var(--ink-2);
}
.item-effect {
  font-size: 14px;
  font-weight: 600;
}
.item-buy {
  margin-top: auto;
  padding-top: 8px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}
.price {
  font-weight: 900;
  font-size: 17px;
}
.inv {
  display: flex;
  flex-direction: column;
}
.inv-row {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  padding: 12px 0 12px 12px;
  border-bottom: 1px solid var(--line);
  border-left: 4px solid var(--rarity, var(--line));
}
.inv-main {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.inv-actions {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.dur {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: var(--ink-2);
}
.dur .meter {
  width: 140px;
}

/* Bank ------------------------------------------------------------------------- */
.balances {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.balance {
  display: flex;
  flex-direction: column;
  padding: 12px 16px;
  border: 1px solid var(--line);
  border-left: 4px solid var(--zone);
  border-radius: var(--radius);
  background: var(--panel);
  min-width: 160px;
}
.balance-sym {
  font-size: 13px;
  font-weight: 700;
  color: var(--ink-2);
}
.balance-amt {
  font-size: 24px;
  font-weight: 900;
}
.addr {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--street);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 10px 12px;
}
.addr code {
  flex: 1;
  font-size: 14px;
}
.wallets {
  list-style: none;
  margin: 0;
  padding: 0;
}
.wallets li {
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 6px 0;
}
.wallets li .btn {
  margin-left: auto;
}

/* Towns ------------------------------------------------------------------------ */
.town-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  flex-wrap: wrap;
}
.town-head h2 {
  font-size: 30px;
  font-weight: 900;
}
.town-facts {
  margin-top: 8px;
}
.residents {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.residents li {
  display: flex;
  align-items: center;
  gap: 10px;
}
.tool {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding-top: 6px;
}

/* Chat ------------------------------------------------------------------------- */
.chat {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  height: min(68vh, 720px);
}
.chat-log {
  flex: 1;
  overflow-y: auto;
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.msg {
  display: flex;
  gap: 10px;
  max-width: 72ch;
}
.msg-body {
  min-width: 0;
}
.msg-meta {
  display: flex;
  gap: 8px;
  align-items: baseline;
  font-size: 14px;
}
.msg-meta time,
.msg-system time {
  font-size: 12px;
  color: var(--ink-2);
}
.msg-text {
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}
.msg-mine .msg-meta strong {
  text-decoration: underline;
  text-decoration-color: var(--park);
  text-decoration-thickness: 2px;
}
.msg-system {
  align-self: center;
  display: flex;
  gap: 10px;
  align-items: baseline;
  font-size: 14px;
  font-weight: 700;
  background: color-mix(in srgb, var(--park) 16%, var(--panel));
  border: 1px solid color-mix(in srgb, var(--park) 45%, var(--line));
  border-radius: 4px;
  padding: 4px 12px;
}
.chat-input {
  display: flex;
  gap: 8px;
  padding: 12px;
  border-top: 1px solid var(--line);
}

/* Hall ------------------------------------------------------------------------- */
.hall-top {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
  gap: 20px;
  align-items: end;
}
.hall-amt {
  font-size: clamp(40px, 6vw, 68px);
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.02em;
}
.hall-figure p {
  color: var(--ink-2);
  margin-top: 8px;
}
.hall-payroll {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.hall-label {
  font-weight: 800;
}
.board {
  margin: 0;
  padding-left: 28px;
}
.board li {
  padding: 8px 0;
  border-bottom: 1px solid var(--line);
}
.board li > * {
  margin-right: 14px;
}
.board-who {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
}

/* Boot, gate, toasts ------------------------------------------------------------- */
.boot {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  color: var(--ink-2);
}
.boot-mark {
  width: 48px;
  height: 48px;
}
.gate {
  max-width: 520px;
  margin: 10vh auto 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
  align-items: flex-start;
}
.toasts {
  position: fixed;
  right: 20px;
  bottom: 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  z-index: 50;
  max-width: min(420px, calc(100vw - 40px));
}
.toast {
  background: var(--ink);
  color: var(--paper);
  border-left: 5px solid var(--ops);
  border-radius: var(--radius);
  padding: 11px 14px;
  font-size: 15px;
  font-weight: 600;
  box-shadow: 0 6px 20px color-mix(in srgb, var(--ink) 25%, transparent);
}
.toast-ok {
  border-left-color: var(--ok);
}
.toast-err {
  border-left-color: var(--sign);
}
@media (prefers-reduced-motion: no-preference) {
  .toast {
    animation: toast-in 0.2s ease both;
  }
}
@keyframes toast-in {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
}

/* Mobile ----------------------------------------------------------------------- */
@media (max-width: 860px) {
  .shell {
    grid-template-columns: 1fr;
  }
  .side {
    position: static;
    height: auto;
    border-right: 0;
    border-bottom: 1px solid var(--line);
    padding: 14px;
    gap: 12px;
  }
  .permit-stats {
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  }
  .nav {
    flex-direction: row;
    overflow-x: auto;
    gap: 4px;
    padding-bottom: 2px;
  }
  .nav-item {
    white-space: nowrap;
    padding: 8px 10px;
  }
  .main {
    padding: 22px 16px 56px;
  }
  h1 {
    font-size: 30px;
  }
  .district-head {
    flex-direction: column;
    align-items: flex-start;
  }
  .job,
  .inv-row {
    flex-direction: column;
  }
  .job-actions,
  .inv-actions {
    justify-content: flex-start;
  }
  .hall-top {
    grid-template-columns: 1fr;
  }
  .chat {
    height: 70vh;
  }
}

/* Pixel layer ----------------------------------------------------------------------------
   The city went 8-bit: pixel display type, square corners, hard drop shadows, crisp sprites. */
:root {
  --pixel: 'Pixelify Sans', var(--font);
  --art: #e46aa6;
  --radius: 0px;
  --drop: 4px 4px 0 color-mix(in srgb, var(--ink) 22%, transparent);
}
@media (prefers-color-scheme: dark) {
  :root {
    --art: #f07fb6;
    --drop: 4px 4px 0 rgba(0, 0, 0, 0.45);
  }
}
.zone-art { --zone: var(--art); }

h1,
h2,
h3,
.brand,
.nav-item,
.btn,
.tabs button,
.permit-name,
.balance-amt,
.hall-amt,
.price,
.hud-chip,
.today-reward {
  font-family: var(--pixel);
  letter-spacing: 0.01em;
}
h1 {
  font-weight: 700;
}
h2,
h3 {
  font-weight: 600;
}
.panel,
.permit,
.chat,
.item,
.balance,
.addr,
.toast,
.fit,
.easel,
.profile-art {
  border-radius: 0;
  box-shadow: var(--drop);
}
.panel,
.permit {
  border: 2px solid var(--ink);
}
.btn {
  border-radius: 0;
  box-shadow: 0 3px 0 color-mix(in srgb, var(--ink) 40%, transparent);
  transition: transform 0.05s;
}
.btn:active:not(:disabled) {
  transform: translateY(2px);
  box-shadow: 0 1px 0 color-mix(in srgb, var(--ink) 40%, transparent);
}
.btn-primary {
  border: 2px solid var(--ink);
}
.btn-ghost {
  border-width: 2px;
}
input,
select,
textarea {
  border-radius: 0;
  border-width: 2px;
}
.nav-item,
.tag,
.role,
.status,
.permit-shift,
.tag-picker label,
.switch {
  border-radius: 0;
}
.district-head {
  border-bottom-width: 6px;
  border-bottom-style: solid;
  border-image: repeating-linear-gradient(90deg, var(--zone) 0 12px, color-mix(in srgb, var(--zone) 55%, var(--paper)) 12px 24px) 6;
}
.meter {
  border-radius: 0;
  height: 10px;
  border: 2px solid var(--ink);
  background: var(--paper);
}
.pixel,
.avatar.pixel {
  image-rendering: crisp-edges;
  image-rendering: pixelated;
}
.avatar.pixel {
  border-radius: 0;
  background: color-mix(in srgb, var(--zone, var(--res)) 18%, var(--panel));
}
.permit-avatar {
  padding: 0;
  border: 2px solid var(--ink);
  background: color-mix(in srgb, var(--res) 30%, var(--panel));
  cursor: pointer;
  line-height: 0;
}
.permit-foot {
  justify-content: space-between;
}
.main-wide {
  max-width: 1360px;
}

/* World ------------------------------------------------------------------------------------ */
.world-page {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.world {
  position: relative;
  border: 3px solid var(--ink);
  background: #2b2f3a;
  box-shadow: 6px 6px 0 color-mix(in srgb, var(--ink) 30%, transparent);
}
.world canvas {
  display: block;
  width: 100%;
  height: auto;
  image-rendering: pixelated;
  touch-action: manipulation;
  cursor: pointer;
  outline: none;
}
.world canvas:focus-visible {
  outline: 3px solid var(--ind);
  outline-offset: -3px;
}
.hud {
  position: absolute;
  left: 10px;
  right: 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  pointer-events: none;
}
.hud > * {
  pointer-events: auto;
}
.hud-top {
  top: 10px;
}
.hud-bottom {
  bottom: 12px;
  justify-content: center;
}
.hud-chip {
  background: rgba(27, 27, 36, 0.86);
  color: #fff;
  padding: 5px 10px;
  font-size: 15px;
  border: 2px solid #000;
}
.hud-rush {
  background: #e8433a;
}
.hud-hint {
  font-size: 13px;
}
.rush-tag {
  display: inline-block;
  margin-left: 8px;
  font-family: var(--pixel);
  font-size: 13px;
  background: #e8433a;
  color: #fff;
  padding: 1px 6px;
  vertical-align: 2px;
}
.today {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 16px;
  align-items: start;
}
.today-reward {
  font-size: 18px;
}
.quests {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.quests li {
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
}
.quests li > div {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.quests li.done p {
  text-decoration: line-through;
  color: var(--ink-2);
}
.fit-winner {
  display: flex;
  gap: 12px;
  align-items: center;
  background: none;
  border: 0;
  padding: 0;
  color: var(--ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.fit-winner span {
  display: flex;
  flex-direction: column;
}

/* Tailor ------------------------------------------------------------------------------------ */
.studio {
  display: grid;
  grid-template-columns: minmax(0, 560px) minmax(280px, 1fr);
  gap: 24px;
  align-items: start;
}
.easel-col {
  display: flex;
  flex-direction: column;
  gap: 12px;
  position: sticky;
  top: 16px;
}
.easel {
  border: 3px solid var(--ink);
  background: #fff;
  line-height: 0;
}
.easel canvas {
  width: 100%;
  height: auto;
  image-rendering: pixelated;
  touch-action: none;
  cursor: crosshair;
}
.toolrow {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.toolbtn {
  font: inherit;
  font-family: var(--pixel);
  font-size: 15px;
  padding: 6px 10px;
  border: 2px solid var(--ink);
  background: var(--panel);
  color: var(--ink);
  cursor: pointer;
}
.toolbtn.on {
  background: var(--ink);
  color: var(--paper);
}
.swatches {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(30px, 1fr));
  gap: 4px;
}
.swatch {
  aspect-ratio: 1;
  border: 2px solid var(--ink);
  padding: 0;
  cursor: pointer;
  min-width: 0;
}
.swatch.on {
  outline: 3px solid var(--zone);
  outline-offset: 1px;
  position: relative;
  z-index: 1;
}
.swatch:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}
.pack {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-top: 8px;
  border-top: 1px dashed var(--line);
}
.pack-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.preview {
  display: flex;
  gap: 18px;
  align-items: flex-end;
}
.preview canvas {
  background: color-mix(in srgb, var(--res) 22%, var(--panel));
  border: 2px solid var(--ink);
}
@media (prefers-reduced-motion: no-preference) {
  .walk {
    animation: bob 0.5s steps(2) infinite;
  }
}
@keyframes bob {
  50% {
    transform: translateY(-5px);
  }
}

/* Gallery & profile -------------------------------------------------------------------------- */
.fits {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(176px, 1fr));
  gap: 16px;
}
.fit {
  background: var(--panel);
  border: 2px solid var(--ink);
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.fit-img {
  padding: 0;
  border: 2px solid var(--ink);
  background: color-mix(in srgb, var(--art) 16%, var(--paper));
  cursor: pointer;
  line-height: 0;
}
.fit-img img {
  width: 100%;
  height: auto;
}
.fit-name {
  font-family: var(--pixel);
  font-size: 17px;
  word-break: break-all;
}
.fit-meta {
  display: flex;
  gap: 10px;
  font-size: 13px;
  color: var(--ink-2);
}
.fit-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}
.fit-time {
  font-size: 12px;
}
.winners {
  display: flex;
  flex-wrap: wrap;
  gap: 16px 24px;
}
.profile-top {
  display: grid;
  grid-template-columns: 268px minmax(0, 1fr);
  gap: 24px;
  align-items: start;
}
.profile-art {
  border: 3px solid var(--ink);
  background: color-mix(in srgb, var(--art) 16%, var(--paper));
  line-height: 0;
}
.profile-art img {
  width: 100%;
  height: auto;
}
.profile-facts {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.badges {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 10px;
}
.badges li {
  border: 2px solid var(--ink);
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  background: color-mix(in srgb, var(--ind) 20%, var(--panel));
}
.badges li strong {
  font-family: var(--pixel);
  font-weight: 600;
}
.badges li span {
  font-size: 14px;
  color: var(--ink-2);
}
.badges li.locked {
  background: var(--panel);
  border-style: dashed;
  opacity: 0.55;
}

@media (max-width: 960px) {
  .studio,
  .profile-top {
    grid-template-columns: 1fr;
  }
  .easel-col {
    position: static;
  }
  .profile-art {
    max-width: 268px;
  }
}

/* Harbor update ---------------------------------------------------------------------------- */
.hud-stack {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.hud-rain {
  background: #2c4fa3;
}
.hud-storm {
  background: #1f2b5c;
}
.hud-cloudy {
  background: #4b4f5c;
}
.btn-bite {
  background: #e8433a;
  border-color: #000;
}
@media (prefers-reduced-motion: no-preference) {
  .btn-bite {
    animation: bite 0.25s steps(2) infinite;
  }
}
@keyframes bite {
  50% {
    transform: translateY(-3px);
  }
}
.night-tag {
  background: #5b2f9e;
}
.storm-tag {
  background: #2c4fa3;
}
.job-rank {
  font-size: 14px;
}
.job-rank strong {
  font-family: var(--pixel);
  font-weight: 600;
}
.stack {
  font-family: var(--pixel);
  color: var(--ink-2);
}
.contracts,
.recipes {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 14px;
}
.contract,
.recipe {
  border: 2px solid var(--ink);
  background: var(--street);
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.recipe {
  border-top: 5px solid var(--rarity, var(--line));
}
.recipe ul {
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 15px;
}
.recipe li.missing {
  color: var(--sign);
}
.recipe li.have::before {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-right: 6px;
  background: var(--ok);
  vertical-align: 2px;
}
.recipe li.missing::before {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-right: 6px;
  border: 1px solid var(--sign);
  vertical-align: 2px;
}

/* Uptown ------------------------------------------------------------------------------------ */
:root {
  --lux: #d4a72c;
}
@media (prefers-color-scheme: dark) {
  :root {
    --lux: #e6bd4a;
  }
}
.zone-lux { --zone: var(--lux); }
.menu {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 14px;
}
.menu-item {
  border: 2px solid var(--ink);
  background: var(--street);
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.menu-item p {
  font-size: 15px;
}
.menu-item .item-buy {
  margin-top: auto;
}
.pips {
  display: flex;
  gap: 4px;
}
.pips i {
  width: 14px;
  height: 8px;
  border: 2px solid var(--ink);
  background: var(--paper);
}
.pips i.on {
  background: var(--lux);
}
.buffs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.buff {
  font-family: var(--pixel);
  font-size: 13px;
  background: color-mix(in srgb, var(--lux) 30%, var(--panel));
  border: 2px solid var(--ink);
  padding: 1px 8px;
}
.hud-buff {
  background: #a87418;
}
.nametag {
  font: inherit;
  font-weight: 800;
  font-size: 14px;
  background: none;
  border: 0;
  padding: 0;
  color: var(--ink);
  cursor: pointer;
  text-align: left;
}
.nametag-styled {
  padding: 1px 6px;
  border: 2px solid var(--ink);
  font-family: var(--pixel);
  font-weight: 600;
}
.nametag:hover {
  text-decoration: underline;
}
.board-colors {
  max-width: 260px;
}
.board-preview {
  font-family: var(--pixel);
  font-size: 18px;
  color: #1b1b24;
  border: 4px solid #7c8594;
  outline: 2px solid var(--ink);
  padding: 12px 16px;
  max-width: 360px;
  min-height: 72px;
  text-align: center;
  word-break: break-word;
}
.msg-shout {
  background: color-mix(in srgb, var(--lux) 24%, var(--panel));
  border: 2px solid var(--ink);
  padding: 8px 10px;
  max-width: none;
}
.msg-shout .msg-text {
  font-family: var(--pixel);
  font-size: 18px;
}
.pinned-shout {
  display: flex;
  gap: 12px;
  align-items: center;
  background: color-mix(in srgb, var(--lux) 30%, var(--panel));
  border: 2px solid var(--ink);
  box-shadow: var(--drop);
  padding: 10px 14px;
}
.pinned-shout p {
  flex: 1;
  font-family: var(--pixel);
  font-size: 17px;
}

/* Life update: pitch, docs, homes, checklists ------------------------------------------------ */
.hero {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  gap: 24px;
  align-items: center;
  padding: 24px;
  border: 3px solid var(--ink);
  background: color-mix(in srgb, var(--lux) 18%, var(--panel));
  box-shadow: var(--drop);
}
.hero h1 {
  font-size: clamp(34px, 5.5vw, 60px);
  line-height: 1.02;
}
.hero-copy {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.hero-steps {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: s;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.hero-steps li {
  counter-increment: s;
  display: flex;
  gap: 10px;
  align-items: baseline;
  background: var(--street);
  border: 2px solid var(--ink);
  padding: 8px 12px;
}
.hero-steps li::before {
  content: counter(s);
  font-family: var(--pixel);
  font-weight: 700;
  min-width: 1.2em;
}
.hero-slim {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  border: 2px solid var(--ink);
  background: color-mix(in srgb, var(--lux) 18%, var(--panel));
  padding: 10px 14px;
}
.checklist {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.checklist li {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr) auto;
  gap: 4px 10px;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px solid var(--line);
}
.checklist li::before {
  content: '';
  width: 14px;
  height: 14px;
  border: 2px solid var(--ink);
  grid-row: span 2;
}
.checklist li.done::before {
  background: var(--ok);
}
.checklist li.done strong {
  text-decoration: line-through;
  color: var(--ink-2);
}
.checklist li span:not(.row-actions) {
  grid-column: 2;
  font-size: 14px;
  color: var(--ink-2);
}
.checklist li .row-actions {
  grid-column: 3;
  grid-row: 1 / span 2;
}
.docs-toc {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.docs-toc a {
  font-family: var(--pixel);
  font-size: 14px;
  border: 2px solid var(--ink);
  padding: 3px 10px;
  text-decoration: none;
  background: var(--panel);
}
.docs {
  display: flex;
  flex-direction: column;
  gap: 28px;
  max-width: 76ch;
}
.docs section {
  display: flex;
  flex-direction: column;
  gap: 10px;
  scroll-margin-top: 70px;
}
.docs h2 {
  font-size: 26px;
}
.docs ul,
.docs ol {
  margin: 0;
  padding-left: 22px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.faq dt {
  font-weight: 800;
  margin-top: 10px;
}
.faq dd {
  margin: 2px 0 0;
  color: var(--ink-2);
}
.room-wrap {
  border: 3px solid var(--ink);
  background: #2b2f3a;
  line-height: 0;
  box-shadow: var(--drop);
  overflow-x: auto;
}
.room {
  width: 100%;
  min-width: 320px;
  height: auto;
  image-rendering: pixelated;
  cursor: pointer;
  touch-action: manipulation;
}
.banner-soft {
  background: color-mix(in srgb, var(--lux) 20%, var(--panel));
  border-color: var(--ink);
}
.art-thumb {
  border: 2px solid var(--ink);
  background: #f4f1ea;
}
.art-frame {
  border: 5px solid #5a3a26;
  background: #f4f1ea;
}

/* Mobile chrome -------------------------------------------------------------------------------- */
.mobile-bar,
.tabbar,
.scrim {
  display: none;
}
@media (max-width: 860px) {
  .mobile-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    position: sticky;
    top: 0;
    z-index: 40;
    padding: 8px 12px;
    padding-top: max(8px, env(safe-area-inset-top));
    background: var(--paper);
    border-bottom: 2px solid var(--ink);
  }
  .mobile-bar .brand {
    font-size: 16px;
  }
  .mobile-bar .brand svg {
    width: 22px;
    height: 22px;
  }
  .mobile-bal {
    margin-left: auto;
    font-family: var(--pixel);
    font-size: 15px;
  }
  .menu-btn {
    font: inherit;
    font-family: var(--pixel);
    font-size: 15px;
    border: 2px solid var(--ink);
    background: var(--panel);
    color: var(--ink);
    padding: 6px 12px;
    min-height: 40px;
  }
  .side {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    width: min(320px, 86vw);
    height: auto;
    z-index: 60;
    background: var(--paper);
    border-right: 2px solid var(--ink);
    transform: translateX(-105%);
    transition: transform 0.18s ease;
    overflow-y: auto;
    padding: 16px 14px calc(76px + env(safe-area-inset-bottom));
  }
  .menu-open .side {
    transform: none;
  }
  .side .brand {
    display: none;
  }
  .nav {
    flex-direction: column;
    overflow: visible;
  }
  .nav-item {
    min-height: 44px;
  }
  .scrim {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 55;
    border: 0;
    background: rgba(0, 0, 0, 0.4);
  }
  .tabbar {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 50;
    background: var(--paper);
    border-top: 2px solid var(--ink);
    padding-bottom: env(safe-area-inset-bottom);
  }
  .tabbar button {
    font: inherit;
    font-family: var(--pixel);
    font-size: 14px;
    background: none;
    border: 0;
    color: var(--ink-2);
    min-height: 52px;
  }
  .tabbar button.on {
    color: var(--ink);
    box-shadow: inset 0 3px 0 var(--ind);
  }
  .main {
    padding: 16px 12px calc(80px + env(safe-area-inset-bottom));
  }
  .hero {
    grid-template-columns: 1fr;
    padding: 16px;
  }
  .world canvas {
    touch-action: none;
  }
  .hud-chip {
    font-size: 12px;
    padding: 3px 7px;
  }
  .hud-hint {
    display: none;
  }
  .hud-bottom .btn {
    font-size: 14px;
    padding: 9px 12px;
  }
  .toasts {
    bottom: calc(66px + env(safe-area-inset-bottom));
    right: 10px;
    left: 10px;
    max-width: none;
  }
  .btn,
  .toolbtn,
  .swatch {
    min-height: 40px;
  }
  .btn-sm {
    min-height: 36px;
  }
  .table {
    font-size: 14px;
  }
  .checklist li {
    grid-template-columns: 20px minmax(0, 1fr);
  }
  .checklist li .row-actions {
    grid-column: 2;
    grid-row: auto;
  }
  .inline-form input {
    flex-basis: 100%;
  }
}