/* Periastrum — the colony tab (2026-10-02; js/colonyui.js; docs/perigee/establishments.md phase 6, marketplace.md §4 and §8–§9b; revised
 * 2026-10-04 to the owner's marketplace answers: the colony's banner, eight equal tiles four across, no strip of tabs, one way back).
 * The tiles of a port in a grid (four across; two upright on a phone), each a painted
 * front cropped to a strip or a plain typographic front; a keeper away greys a tile, a job puts a big gold seal in its corner. No blur,
 * no animated gradients (docs/perigee/0928_performance.md §2); the seal's slow pulse stops under prefers-reduced-motion. */
#tab-colony .inner { max-width: max(var(--pane-max), min(940px, 100%)); }   /* the exchange's grid (.row.mk) wants the market's old width */
#tabs button[data-tab="colony"] { max-width: 13em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.colony.on > #colonyTitle { display: none; }   /* 10-04: docked, the colony's banner (below) carries the name */
/* ── 2026-10-04, the colony view revised (docs/perigee/marketplace-ui-clarity.md): the colony's banner, visibly not a button (no border,
 * no shadow, no chevron, nothing pressed; shorter than a row of tiles); one grid of equal tiles four across, raised (the only raised things
 * on the screen), each with a chevron; empty spaces dashed and flat ── */
.cban { position: relative; display: flex; align-items: flex-end; justify-content: space-between; gap: 6px 14px; flex-wrap: wrap; min-height: 58px; margin: -4px 0 12px; padding: 4px 2px 8px; overflow: hidden; cursor: default; user-select: text; }
.cban.pic { height: 96px; min-height: 0; padding: 10px 14px; border-radius: var(--r-box); background: #07080c; }
.cban .cban-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 55%; pointer-events: none; }   /* js/banners.js: 1600 × 400, cropped to a band */
.cban.pic::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgb(0 0 0 / .78), rgb(0 0 0 / .35) 60%, rgb(0 0 0 / .1)), linear-gradient(rgb(0 0 0 / 0) 40%, rgb(0 0 0 / .55)); pointer-events: none; }
.cban .cban-t, .cban .cban-money { position: relative; z-index: 1; }
.cban .cban-t { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cban .cban-name { font-family: var(--display-face); font-weight: var(--w-normal); font-size: clamp(22px, 3.2vw, 31px); line-height: 1.05; color: var(--gold); letter-spacing: .01em; text-shadow: 0 1px 10px rgb(0 0 0 / .6); overflow-wrap: anywhere; }
.cban .cban-words { font-style: italic; font-size: var(--fs-label); color: var(--paper-dim); letter-spacing: .02em; }
.cban .cban-money { font-size: var(--fs-label); color: var(--paper-faint); white-space: nowrap; }
.cban.pic .cban-words, .cban.pic .cban-money { color: var(--paper); text-shadow: 0 1px 4px #000; }
.cgrid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: 1fr; gap: 10px; }
.ctile { position: relative; display: flex; flex-direction: column; text-align: left; font: inherit; color: inherit; background: linear-gradient(rgb(var(--paper-rgb) / .055), rgb(var(--paper-rgb) / .025)); border: var(--bw) solid var(--line-soft); border-radius: var(--r-card); padding: 0; overflow: hidden; cursor: pointer; min-width: 0; min-height: 44px;
  box-shadow: 0 3px 10px rgb(0 0 0 / .5), inset 0 1px 0 rgb(var(--paper-rgb) / .06); transition: border-color var(--t, .2s), background var(--t, .2s), transform .12s ease, box-shadow .12s ease; -webkit-tap-highlight-color: transparent; }
.ctile:hover, .ctile:focus-visible { border-color: var(--gold-line-soft); background: linear-gradient(rgb(var(--gold-rgb) / .07), rgb(var(--gold-rgb) / .03)); outline: none; }
@media (hover: hover) { .ctile:not(.vacant):hover { transform: translateY(-2px); box-shadow: 0 7px 16px rgb(0 0 0 / .55), inset 0 1px 0 rgb(var(--paper-rgb) / .08); } }
.ctile:not(.vacant):active { transform: scale(.97); box-shadow: 0 1px 4px rgb(0 0 0 / .5); background: rgb(var(--gold-rgb) / .09); }
.ctile:focus-visible { box-shadow: 0 0 0 2px var(--gold-edge), 0 3px 10px rgb(0 0 0 / .5); }
.ctile .cbanner { position: relative; display: block; flex: none; aspect-ratio: 2.25 / 1; overflow: hidden; background: #07080c; border-bottom: var(--bw) solid var(--hairline); }
.ctile .cbanner img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ctile .cbanner.type { display: flex; align-items: center; justify-content: center; background: radial-gradient(80% 120% at 30% 20%, rgb(var(--gold-rgb) / .07), transparent 70%), linear-gradient(160deg, #10131c, #07080d); box-shadow: inset 0 0 0 5px rgb(var(--pane-rgb) / .9), inset 0 0 0 6px rgb(var(--gold-rgb) / .22); }
.ctile .cbanner.type i { font-family: var(--display-face); font-style: normal; font-size: 40px; line-height: 1; color: rgb(var(--gold-rgb) / .55); letter-spacing: .02em; text-shadow: 0 1px 0 #000; }
.ctile .cface { position: absolute; z-index: 2; left: 7px; top: 7px; width: 34px; height: 34px; border-radius: 50%; object-fit: cover; border: 1.5px solid rgb(var(--gold-rgb) / .6); box-shadow: 0 1px 5px rgb(0 0 0 / .8); background: #0b0c10; pointer-events: none; }
.ctile .ctb { padding: 7px 10px 8px; display: flex; flex-direction: column; gap: 5px; min-width: 0; flex: 1 1 auto; justify-content: space-between; }
.ctile .cname { display: block; font-family: var(--display-face); font-weight: var(--w-normal); font-size: 16px; line-height: 1.2; color: var(--paper); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ctile .cmeta { display: flex; align-items: center; gap: 6px; min-width: 0; }
.cchip { display: inline-block; min-width: 0; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--fs-xs); font-style: italic; letter-spacing: .03em; color: var(--paper-dim); border: var(--bw) solid var(--line-faint); border-radius: var(--r-pill); padding: 1px 8px; }
.ctile .cchev { flex: none; margin-left: auto; font-size: 22px; line-height: 16px; height: 18px; color: var(--gold); opacity: .85; }
.ctile.best .cchip { border-color: var(--gold-line-soft); }
.ctile.alert .cchip { color: var(--bad, #e08a7a); border-color: currentColor; }
/* an empty space: flat, dashed, nothing to press */
.ctile.vacant { cursor: default; background: none; border: var(--bw) dashed var(--line-faint); box-shadow: none; align-items: center; justify-content: center; pointer-events: none; }
.ctile.vacant span { font-size: var(--fs-xs); font-style: italic; letter-spacing: .06em; color: var(--paper-faint); opacity: .6; }
/* a keeper away: greyscale, still tappable */
.ctile.away { filter: grayscale(1) brightness(.8); opacity: .55; }
.ctile.away:hover, .ctile.away:focus-visible { opacity: .8; }
/* closed for good, shown only because a quest demands it */
.ctile.closed { filter: grayscale(1); opacity: .45; border-style: dashed; }
/* the big friendly quest marker */
.ctile .cmark { position: absolute; top: 6px; right: 6px; z-index: 2; width: 38px; height: 38px; display: block; pointer-events: none; filter: drop-shadow(0 2px 6px rgb(0 0 0 / .7)); animation: cmark 2.6s ease-in-out infinite; }
.ctile .cmark svg { width: 100%; height: 100%; display: block; }
.ctile .cmark circle:first-child { fill: var(--gold); stroke: #fff6d8; stroke-width: 2; }
.ctile .cmark path { stroke: #1a140a; stroke-width: 4.6; stroke-linecap: round; fill: none; }
.ctile .cmark circle + path + circle, .ctile .cmark circle:last-child { fill: #1a140a; stroke: none; }
.ctile .cmark b { position: absolute; right: -4px; bottom: -4px; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 9px; background: #1a140a; color: var(--gold); font: 600 11px/18px var(--serif); text-align: center; border: 1px solid var(--gold-edge); }
.ctile.away .cmark, .ctile.closed .cmark { filter: none; }
@keyframes cmark { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.08); } }
@media (prefers-reduced-motion: reduce) { .ctile .cmark { animation: none; } .ctile { transition: none; } .ctile:not(.vacant):hover, .ctile:not(.vacant):active { transform: none; } }
/* for your hold, worth buying here */
.chold, .cworth { margin: 4px 0 6px; }
.colony .crow { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "n b" "w b"; gap: 2px 10px; align-items: center; padding: 7px 0; border-bottom: var(--bw) solid var(--hairline); }
.colony .crow .crn { grid-area: n; min-width: 0; display: flex; align-items: center; gap: 6px; font-size: var(--fs-row); }
.colony .crow .crw { grid-area: w; font-size: var(--fs-label); font-style: italic; min-width: 0; }
.colony .crow button { grid-area: b; white-space: nowrap; }
/* a place open: one way back, top-left, in the same place on every screen, the place's name beside it (no tabs to the other places) */
.cstrip { position: sticky; top: calc(-1 * var(--pane-pad-y)); z-index: 5; display: flex; gap: 10px; align-items: center; padding: 8px 0; margin: calc(-1 * var(--pane-pad-y)) 0 10px; background: var(--sheet); border-bottom: var(--bw) solid var(--hairline); max-width: 100%; min-width: 0; }
.cstrip button.back { flex: none; display: inline-flex; align-items: center; gap: 6px; font: inherit; font-size: var(--fs-label); letter-spacing: .03em; color: var(--paper); background: rgb(var(--paper-rgb) / .04); border: var(--bw) solid var(--line); border-radius: var(--r-pill); padding: 4px 14px 4px 11px; cursor: pointer; white-space: nowrap; min-height: 44px; max-width: 46%; overflow: hidden; text-overflow: ellipsis; }
.cstrip button.back:hover, .cstrip button.back:focus-visible { color: var(--gold); border-color: var(--gold-edge); outline: none; }
.cstrip button.back:active { transform: scale(.97); }
.cstrip .cplace { display: flex; align-items: baseline; gap: 8px; min-width: 0; flex: 1 1 auto; }
.cstrip .cplace-n { font-family: var(--display-face); font-weight: var(--w-normal); font-size: clamp(18px, 2.6vw, 24px); color: var(--gold); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.cstrip .cchip { flex: none; max-width: 40%; }
/* the place itself */
.colony .cstrip:not(.hidden) ~ #colonyTitle { display: none; }
.cbig { position: relative; display: block; overflow: hidden; border-radius: var(--r-box); background: #07080c; margin: 0 0 8px; }
.cbig img { display: block; width: 100%; height: clamp(64px, 16vh, 140px); object-fit: cover; }   /* a band, not a poster: the business sits right under it */
.cbig.away, .cbig.closed { filter: grayscale(1); opacity: .7; }
.colony .cfact-big { font-style: italic; margin: 0 0 8px; }
.colony .cjob { font-style: normal; color: var(--gold); border: var(--bw) solid var(--gold-line-soft); background: var(--gold-wash); border-radius: var(--r-pill); padding: 1px 9px; font-size: var(--fs-label); white-space: nowrap; }
.cpeople { display: flex; flex-direction: column; }
.cperson { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 8px 0; border-bottom: var(--bw) solid var(--hairline); }
.cperson .face { margin: 0; }
.cperson .cpw { min-width: 0; }
.cperson .cpw p { margin: 3px 0 0; font-size: var(--fs-label); line-height: 1.4; }
.cperson.away { filter: grayscale(1); opacity: .6; }
.colony .clines { margin-top: 14px; }
.colony .clines p { font-style: italic; color: var(--paper-dim); }
.colony #marketPane { margin-top: 6px; }
.colony h3.sh-h { margin: 14px 0 4px; font-size: var(--fs-label); font-style: italic; font-weight: var(--w-normal); letter-spacing: var(--ls-label); color: var(--paper-faint); }
/* the quests tab's people, grouped by place */
#questList h3.pgroup { margin: 12px 0 2px; font-size: var(--fs-label); font-style: italic; font-weight: var(--w-normal); letter-spacing: var(--ls-label); color: var(--paper-faint); }
.cperson.off .cpw > b { color: var(--paper-dim); }
.cjobs { margin: 4px 0 10px; display: flex; flex-direction: column; gap: 6px; }
.cjobrow { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 8px 10px; border: var(--bw) solid var(--gold-line-soft); background: var(--gold-wash); border-radius: var(--r-box); }
.cjobrow .cjobmark { width: 30px; height: 30px; display: block; }
.cjobrow .cjobmark svg { width: 100%; height: 100%; display: block; }
.cjobrow .cjobmark circle:first-child { fill: var(--gold); stroke: #fff6d8; stroke-width: 2; }
.cjobrow .cjobmark path { stroke: #1a140a; stroke-width: 4.6; stroke-linecap: round; fill: none; }
.cjobrow .cjobmark circle:last-child { fill: #1a140a; }
.cjobrow .cjobt { min-width: 0; font-size: var(--fs-row); }
.ctile .cbanner.type .cicon { width: 44px; height: 44px; fill: none; stroke: rgb(var(--gold-rgb) / .62); stroke-width: 1.15; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 1px 0 #000); }
#marketPane.shoppage #marketEcon, #marketPane.shoppage #marketNote { display: none; }
/* the game is locked to landscape (the owner, 10-04): four across holds on a phone; upright, the fallback, two across */
@media (max-width: 560px) { #tabs button[data-tab="colony"] { max-width: 9em; } .cgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } }
@media (max-width: 900px) { .cgrid { gap: 8px; } .ctile .cname { font-size: 15px; } .ctile .ctb { padding: 6px 8px 7px; gap: 4px; } .ctile .cface { width: 30px; height: 30px; left: 5px; top: 5px; } .ctile .cmark { width: 32px; height: 32px; } }
/* a short landscape phone (360–430 px high): the banner folds to one line and the paintings to a strip, so the banner and two rows fit */
@media (max-height: 460px) { .cban { min-height: 0; flex-wrap: nowrap; align-items: baseline; padding: 0 0 6px; margin: -8px 0 8px; } .cban.pic { height: 46px; padding: 6px 12px; align-items: center; } .cban .cban-t { flex-direction: row; align-items: baseline; gap: 10px; }
  .cban .cban-name { font-size: 20px; white-space: nowrap; } .cban .cban-words { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .cban .cban-money { display: none; }
  .ctile .cbanner { aspect-ratio: auto; height: 50px; } .ctile .cbanner.type i { font-size: 30px; } .ctile .cbanner.type .cicon { width: 32px; height: 32px; } .ctile .cface { width: 26px; height: 26px; } .ctile .cmark { width: 28px; height: 28px; top: 4px; right: 4px; }
  .colony .cbig, .colony .cfact-big { display: none; } .cstrip { padding: 4px 0; margin-bottom: 6px; } }   /* a short phone: the business straight under the one button */