/* FloorStack sales console (fs-agent.js): the agent's side of the demo, in the project's green and gold but plainer than
   the buyer app: a working tool. Status colours are quiet and easy to tell apart at a glance (Tim, round 5): pale sage
   available, apricot reserved, grey sold. */
.fsa {
  --a-ink: #18251f; --a-green: #13281f; --a-gold: #b08d57; --a-gold2: #d8c193; --a-paper: #f7f5f0; --a-card: #fff; --a-muted: #6c736b;
  --a-line: rgb(24 37 31 / .1); --a-line2: rgb(24 37 31 / .18);
  --a-av: #8cad8a; --a-av-bg: #e4eddf; --a-av-ink: #2f4d36; --a-re: #cf9f6a; --a-re-bg: #f5e5d0; --a-re-ink: #6b4a24;
  --a-so: #a7a8a2; --a-so-bg: #e3e3df; --a-so-ink: #5b5d57;
  --a-display: "Cormorant Garamond", Georgia, serif; --a-text: "Jost", "Inter Tight", sans-serif;
  position: relative; display: grid; grid-template-columns: 228px minmax(0, 1fr); height: clamp(700px, 56vw, 860px); overflow: hidden;
  border-radius: 10px; background: var(--a-paper); color: var(--a-ink); font-family: var(--a-text); font-size: 13.5px; line-height: 1.45; font-variant-numeric: lining-nums tabular-nums;
  box-shadow: 0 40px 90px -45px rgb(10 20 15 / .5), 0 0 0 1px rgb(24 37 31 / .07);
}
.fsa *, .fsa *::before, .fsa *::after { box-sizing: border-box; }
.fsa button, .fsa input, .fsa textarea { font: inherit; color: inherit; }
.fsa :focus-visible { outline: 1.5px solid var(--a-gold); outline-offset: 2px; }
.fsa-dim { color: var(--a-muted); }
.fsa-lab { margin: 16px 0 8px; font-size: 9px; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: var(--a-muted); }

/* sidebar */
.fsa-side { display: flex; flex-direction: column; gap: 4px; padding: 22px 16px 16px; background: var(--a-green); color: #f6f2ea; }
.fsa-app { display: grid; gap: 2px; padding: 0 8px 18px; }
.fsa-app b { font-size: 15px; font-weight: 600; letter-spacing: .02em; }
.fsa-app span { font-size: 9.5px; font-weight: 500; letter-spacing: .22em; text-transform: uppercase; color: var(--a-gold2); }
.fsa-proj { display: flex; align-items: center; gap: 12px; margin: 0 0 16px; padding: 12px; border: 1px solid rgb(216 193 147 / .25); border-radius: 6px; }
.fsa-num { font-family: var(--a-display); font-size: 30px; line-height: .9; color: var(--a-gold2); }
.fsa-proj b { display: block; font-size: 11px; font-weight: 500; letter-spacing: .32em; text-transform: uppercase; }
.fsa-proj small { font-size: 10.5px; color: rgb(246 242 234 / .6); }
.fsa-nav { display: grid; gap: 2px; }
.fsa-nav button { display: flex; align-items: center; gap: 11px; padding: 10px 10px; border: 0; border-radius: 5px; background: none; color: rgb(246 242 234 / .72); text-align: left; cursor: pointer; font-size: 13px; }
.fsa-nav button:hover { background: rgb(255 255 255 / .05); color: #fff; }
.fsa-nav button[aria-current="true"] { background: rgb(216 193 147 / .14); color: var(--a-gold2); }
.fsa-nav svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; }
.fsa-nav em { margin-left: auto; min-width: 18px; padding: 1px 6px; border-radius: 999px; background: var(--a-gold); color: var(--a-green); font-style: normal; font-size: 10.5px; font-weight: 600; text-align: center; }
.fsa-nav em:empty { display: none; }
.fsa-me { display: flex; align-items: center; gap: 10px; margin-top: auto; padding: 10px 8px; }
.fsa-me i { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--a-gold); color: var(--a-green); font-style: normal; font-size: 11px; font-weight: 600; }
.fsa-me span { display: grid; font-size: 12.5px; }
.fsa-me small { font-size: 10.5px; color: rgb(246 242 234 / .55); }
.fsa .fsa-reset { margin: 2px 8px 0; padding: 8px; border: 1px solid rgb(246 242 234 / .2); border-radius: 5px; background: none; color: rgb(246 242 234 / .75); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; cursor: pointer; }
.fsa .fsa-reset:hover { border-color: var(--a-gold2); color: var(--a-gold2); }

/* main */
.fsa-main { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.fsa-top { display: flex; align-items: center; gap: 16px; padding: 18px 26px; border-bottom: 1px solid var(--a-line); background: var(--a-card); }
.fsa-top h3 { margin: 0; font-family: var(--a-display); font-size: 28px; font-weight: 500; }
.fsa-search { display: flex; align-items: center; gap: 8px; width: min(300px, 36%); margin-left: auto; padding: 8px 12px; border: 1px solid var(--a-line2); border-radius: 999px; }
.fsa-search[hidden] { display: none; }
.fsa-search svg { width: 15px; height: 15px; fill: none; stroke: var(--a-muted); stroke-width: 1.6; }
.fsa-search input { width: 100%; border: 0; outline: 0; background: none; font-size: 13px; }
.fsa-sync { display: inline-flex; align-items: center; gap: 8px; font-size: 10.5px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--a-muted); white-space: nowrap; }
.fsa-search[hidden] + .fsa-sync { margin-left: auto; }
.fsa-sync i { width: 7px; height: 7px; border-radius: 50%; background: #4a9b6a; box-shadow: 0 0 0 0 rgb(74 155 106 / .6); animation: fsa-live 2s infinite; }
@keyframes fsa-live { 70% { box-shadow: 0 0 0 7px rgb(74 155 106 / 0); } 100% { box-shadow: 0 0 0 0 rgb(74 155 106 / 0); } }
.fsa-body { flex: 1; min-height: 0; overflow: auto; padding: 22px 26px 26px; scrollbar-width: thin; }
.fsa-card { padding: 18px 20px; border: 1px solid var(--a-line); border-radius: 8px; background: var(--a-card); }
.fsa-card h4 { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0 0 12px; font-family: var(--a-display); font-size: 21px; font-weight: 500; }
.fsa-empty { margin: 0; padding: 18px 0; color: var(--a-muted); }
.fsa-empty-card { max-width: 520px; }
.fsa-empty-card p { margin: 0; color: var(--a-muted); }

/* overview */
.fsa-kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin: 0 0 14px; }
.fsa-kpi { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "t t" "n s" "m m"; align-items: end; gap: 0 14px; padding: 16px 20px 16px;
  border: 1px solid var(--a-line); border-radius: 8px; background: var(--a-card); }
.fsa-kpi dt { grid-area: t; display: flex; align-items: center; gap: 8px; font-size: 9px; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: var(--a-muted); }
.fsa-kpi dt i { width: 8px; height: 8px; border-radius: 2px; }
.fsa-kpi dd { margin: 0; }
.fsa-kpi .fsa-knum { grid-area: n; margin: 8px 0 0; font-family: var(--a-display); font-size: 44px; font-weight: 500; line-height: .9; }
.fsa-ksub { grid-area: s; padding-bottom: 4px; font-size: 11.5px; color: var(--a-muted); }
.fsa-kpi .fsa-meter { grid-area: m; display: flex; align-items: center; gap: 10px; margin-top: 14px; }
.fsa-meter span { flex: 1; height: 4px; overflow: hidden; border-radius: 2px; background: var(--a-line); }
.fsa-meter span i { display: block; height: 100%; border-radius: 2px; }
.fsa-meter b { min-width: 30px; font-size: 11px; font-weight: 500; text-align: right; color: var(--a-ink); }
.fsa-kpi.is-sold :is(dt i, .fsa-meter i) { background: var(--a-so); }
.fsa-kpi.is-reserved :is(dt i, .fsa-meter i) { background: var(--a-re); }
.fsa-kpi.is-available :is(dt i, .fsa-meter i) { background: var(--a-av); }
/* the tower and its two companions share one height, so they read as one panel */
.fsa-row3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; align-items: stretch; margin: 0 0 14px; }
.fsa-row3 > .fsa-elev-card { grid-column: span 2; }
.fsa-col { display: flex; flex-direction: column; gap: 14px; min-height: 0; }
.fsa-feed-card { flex: 1; display: flex; flex-direction: column; min-height: 0; padding-bottom: 8px; }
.fsa-feed-card h4 { margin-bottom: 6px; }
.fsa-feed-card .fsa-feed { flex: 1; min-height: 0; overflow: auto; contain: size; margin: 0 -8px 0 0; padding: 0 8px 18px 0; scrollbar-width: thin;
  -webkit-mask-image: linear-gradient(#000 calc(100% - 30px), transparent); mask-image: linear-gradient(#000 calc(100% - 30px), transparent); }
.fsa-legend { display: inline-flex; flex-wrap: wrap; gap: 4px 12px; font-family: var(--a-text); font-size: 11px; font-weight: 400; color: var(--a-muted); letter-spacing: 0; }
.fsa-legend span { display: inline-flex; align-items: center; gap: 6px; }
.fsa-legend i { width: 8px; height: 8px; border-radius: 2px; }
.fsa-legend.is-foot { display: flex; margin: 10px 0 0 120px; }
.fsa-legend .is-sold, .fsa-tbar .is-sold, .fsa-mbar .is-sold { background: var(--a-so); }
.fsa-legend .is-reserved, .fsa-tbar .is-reserved, .fsa-mbar .is-reserved { background: var(--a-re); }
.fsa-legend .is-available, .fsa-tbar .is-available { background: var(--a-av); }
/* residences by type: one stacked bar per type, the count inside each part where it fits */
.fsa-types { list-style: none; margin: 0; padding: 0; }
.fsa-types button { width: 100%; display: grid; grid-template-columns: 108px minmax(0, 1fr); align-items: center; gap: 12px; padding: 6px 0; border: 0; background: none; text-align: left; cursor: pointer; }
.fsa-tn { display: flex; align-items: baseline; justify-content: space-between; gap: 6px; font-size: 12.5px; }
.fsa-tn small { font-size: 11px; color: var(--a-muted); }
.fsa-tbar { display: flex; gap: 2px; height: 20px; }
.fsa-tbar i { position: relative; min-width: 0; display: grid; place-items: center; transition: filter .15s; }
.fsa-tbar i:first-child { border-radius: 3px 0 0 3px; }
.fsa-tbar i:last-child { border-radius: 0 3px 3px 0; }
.fsa-tbar i:only-child { border-radius: 3px; }
.fsa-tbar b { font-size: 10.5px; font-weight: 600; font-style: normal; color: rgb(24 37 31 / .78); }
.fsa-tbar i.is-tight b { visibility: hidden; }
.fsa-types button:hover .fsa-tbar i, .fsa-types button:focus-visible .fsa-tbar i { filter: brightness(.94); }
.fsa-types button:hover .fsa-tn { color: var(--a-ink); text-decoration: underline; text-decoration-color: var(--a-gold); text-underline-offset: 3px; }
/* reservations by month: one column a month, sold at the base and holds on top */
/* the plot sits under the tower and the summary under the column beside it: the card's content is the row above less its
   padding (20px a side) and gaps (14px), so the summary starts where that column's text does */
.fsa-mwrap { display: grid; grid-template-columns: minmax(0, 1fr) calc((100% - 108px) / 3); column-gap: 54px; align-items: end; }
.fsa-mwrap > .fsa-msum { order: 2; }
.fsa-msum { display: grid; gap: 4px; margin: 0 0 30px; }
.fsa-msum b { font-family: var(--a-display); font-size: 44px; font-weight: 500; line-height: .9; }
.fsa-msum span { font-size: 12.5px; }
.fsa-msum small { font-size: 11.5px; color: var(--a-muted); }
.fsa-mplot { position: relative; display: grid; grid-template-columns: repeat(var(--n, 9), minmax(0, 1fr)); height: 170px; margin: 26px 0 26px; border-bottom: 1px solid var(--a-line2); }
.fsa-mcol { position: relative; outline: none; cursor: default; }
.fsa-mcol > b { position: absolute; left: 0; right: 0; bottom: calc(var(--h) + 6px); font-size: 12px; font-weight: 600; text-align: center; }
.fsa-mbar { position: absolute; left: 50%; bottom: 0; display: flex; flex-direction: column; gap: 2px; width: 24px; height: var(--h); transform: translateX(-50%); transform-origin: 50% 100%; }
.fsa-mbar i { min-height: 0; }
.fsa-mbar i:first-child { border-radius: 4px 4px 0 0; }
.fsa-mcol > small { position: absolute; left: 0; right: 0; top: calc(100% + 8px); font-size: 11px; text-align: center; color: var(--a-muted); }
.fsa-mcol.is-now > small { font-weight: 600; color: var(--a-ink); }
.fsa-mtip { position: absolute; left: 50%; bottom: calc(var(--h) + 28px); z-index: 2; display: grid; padding: 7px 11px; transform: translate(-50%, 4px); border-radius: 6px; background: var(--a-green);
  color: #f6f2ea; font-size: 11.5px; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity .15s, transform .15s; box-shadow: 0 10px 22px -12px #000a; }
.fsa-mtip b { font-weight: 500; color: var(--a-gold2); }
.fsa-mcol:hover .fsa-mtip, .fsa-mcol:focus-visible .fsa-mtip { opacity: 1; transform: translate(-50%, 0); }
.fsa-mcol:hover .fsa-mbar, .fsa-mcol:focus-visible .fsa-mbar { filter: brightness(.94); }
.fsa-mcol:first-child .fsa-mtip { left: 0; transform: translate(0, 4px); }
.fsa-mcol:first-child:is(:hover, :focus-visible) .fsa-mtip { transform: none; }
.fsa-mcol:last-child .fsa-mtip { left: auto; right: 0; transform: translate(0, 4px); }
.fsa-mcol:last-child:is(:hover, :focus-visible) .fsa-mtip { transform: none; }
.fsa-mplot.is-grow .fsa-mbar { animation: fsa-grow .7s cubic-bezier(.2, .8, .2, 1) both; animation-delay: calc(var(--i) * 45ms); }
.fsa-mplot.is-grow .fsa-mcol > b { animation: fsa-fade .4s both; animation-delay: calc(var(--i) * 45ms + .45s); }
@keyframes fsa-grow { from { transform: translateX(-50%) scaleY(0); } }
@keyframes fsa-fade { from { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .fsa-mplot.is-grow :is(.fsa-mbar, .fsa-mcol > b) { animation: none; } }
.fsa-card h4 small { margin-right: auto; font-family: var(--a-text); font-size: 11px; color: var(--a-muted); letter-spacing: .02em; }
.fsa-av { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: #ece6da; color: var(--a-ink); font-style: normal; font-size: 9.5px; font-weight: 600; letter-spacing: .04em; }
.fsa-feed { list-style: none; margin: 0; padding: 0; }
.fsa-feed li { position: relative; }
.fsa-feed li::before { content: ""; position: absolute; left: 6px; top: 0; bottom: 0; width: 1px; background: var(--a-line2); }
.fsa-feed li:first-child::before { top: 14px; }
.fsa-feed li:last-child::before { bottom: auto; height: 14px; }
.fsa-feed li:only-child::before { display: none; }
.fsa-feed button { position: relative; width: 100%; display: grid; grid-template-columns: 14px minmax(0, 1fr); grid-template-areas: "d s" ". m"; gap: 0 10px; padding: 7px 4px 7px 2px; border: 0;
  border-radius: 5px; background: none; text-align: left; cursor: pointer; }
.fsa-feed button:hover { background: rgb(176 141 87 / .07); }
.fsa-feed .fsa-dot { grid-area: d; position: relative; width: 9px; height: 9px; margin-top: 5px; border-radius: 50%; background: var(--a-gold); box-shadow: 0 0 0 2px var(--a-card); }
.fsa-feed span { grid-area: s; font-size: 12.5px; }
.fsa-feed b { font-weight: 600; }
.fsa-feed small { grid-area: m; font-size: 11px; color: var(--a-muted); }
.fsa-elev-card { display: flex; flex-direction: column; }
.fsa .fsa-seg.is-mini { margin-left: 4px; border-radius: 999px; }
.fsa .fsa-seg.is-mini button { padding: 4px 11px; font-family: var(--a-text); font-size: 11px; font-weight: 500; letter-spacing: .04em; }
.fsa-3d { position: relative; flex: 1; min-height: clamp(420px, 35vw, 520px); margin: 2px 0 0; overflow: hidden; border-radius: 8px;
  background: radial-gradient(120% 90% at 50% 25%, #fdfcf9 0%, #f3f0e9 60%, #e9e5dc 100%); touch-action: pan-y; user-select: none; }
.fsa-3d canvas { display: block; width: 100%; height: 100%; cursor: grab; }
.fsa-3d canvas:active { cursor: grabbing; }
.fsa-3d-tip { position: absolute; left: 0; top: 0; z-index: 2; padding: 6px 11px; border-radius: 6px; background: var(--a-green); color: #f6f2ea; font-size: 12px; white-space: nowrap;
  pointer-events: none; box-shadow: 0 10px 22px -12px #000a; }
.fsa-3d-ui { position: absolute; right: 12px; bottom: 12px; display: grid; gap: 5px; }
.fsa .fsa-3d-ui button { width: 32px; height: 32px; display: grid; place-items: center; padding: 0; border: 1px solid var(--a-line2); border-radius: 7px; background: rgb(255 255 255 / .9);
  font-size: 16px; line-height: 1; cursor: pointer; }
.fsa .fsa-3d-ui button:hover { border-color: var(--a-gold); }
.fsa-3d-n { position: absolute; left: 14px; top: 14px; width: 34px; height: 34px; display: grid; place-items: center; border: 1px solid var(--a-line2); border-radius: 50%;
  background: rgb(255 255 255 / .85); pointer-events: none; }
.fsa-3d-n::before { content: ""; position: absolute; top: 3px; left: 50%; margin-left: -4px; border: 4px solid transparent; border-bottom: 7px solid var(--a-gold); border-top: 0; }
.fsa-3d-n i { margin-top: 6px; font-style: normal; font-size: 10px; font-weight: 600; color: var(--a-ink); transform: rotate(var(--upright, 0deg)); }
.fsa-elev { display: block; width: 100%; height: auto; max-height: 560px; margin: 4px auto 0; }
.fsa-eframe polygon { fill: #fbfaf7; stroke: var(--a-ink); stroke-width: 1.5; stroke-opacity: .8; stroke-linejoin: round; }
.fsa-eu polygon { stroke-width: 1.4; stroke-linejoin: round; transition: fill .2s; }
.fsa-eu { cursor: pointer; outline: none; }
.fsa-eu.is-available polygon { fill: var(--a-av-bg); stroke: var(--a-av); }
.fsa-eu.is-reserved polygon { fill: var(--a-re-bg); stroke: var(--a-re); }
.fsa-eu.is-sold polygon { fill: var(--a-so-bg); stroke: var(--a-so); }
.fsa-eu:is(:hover, :focus-visible) polygon { fill: var(--a-gold2); stroke: var(--a-gold); }
.fsa-eu.is-dim { opacity: .35; }
.fsa-eclub { fill: none; stroke: var(--a-gold); stroke-width: 1.1; stroke-dasharray: 5 4; }
.fsa-efloors text { font: 500 15px var(--a-text); fill: var(--a-muted); text-anchor: end; dominant-baseline: central; }
.fsa-eground { fill: none; stroke: var(--a-ink); stroke-width: 1.6; stroke-opacity: .6; }
.fsa-key .is-sold { background: var(--a-so); }
.fsa-key .is-reserved { background: var(--a-re); }
.fsa-key .is-available { background: var(--a-av); }
.fsa-key { display: flex; flex-wrap: wrap; gap: 14px; margin: 12px 0 0; font-size: 11px; color: var(--a-muted); }
.fsa-key.is-top { margin: 0 0 14px; }
.fsa-key b { margin-left: 2px; font-weight: 600; color: var(--a-ink); }
.fsa-key span { display: inline-flex; align-items: center; gap: 6px; }
.fsa-key i { width: 9px; height: 9px; border-radius: 2px; }
.fsa .fsa-chip { padding: 3px 9px; border: 0; border-radius: 999px; background: var(--a-line); font-size: 10.5px; font-weight: 500; letter-spacing: .04em; cursor: pointer; }
.fsa .fsa-chip.is-new { background: var(--a-gold); color: var(--a-green); }

/* inventory */
.fsa-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin: 0 0 14px; }
.fsa-seg { display: inline-flex; overflow: hidden; border: 1px solid var(--a-line2); border-radius: 6px; background: var(--a-card); }
.fsa-seg button { padding: 7px 12px; border: 0; background: none; font-size: 12px; cursor: pointer; white-space: nowrap; }
.fsa-seg button + button { box-shadow: inset 1px 0 var(--a-line); }
.fsa-seg button:hover { background: rgb(176 141 87 / .08); }
.fsa .fsa-seg button[aria-pressed="true"] { background: var(--a-green); color: #f6f2ea; box-shadow: none; }
.fsa-seg.is-wide { display: flex; }
.fsa-seg.is-wide button { flex: 1; padding: 9px 8px; }
.fsa .fsa-seg.is-wide .is-available[aria-pressed="true"] { background: var(--a-av-bg); color: var(--a-av-ink); box-shadow: inset 0 -2px var(--a-av); }
.fsa .fsa-seg.is-wide .is-reserved[aria-pressed="true"] { background: var(--a-re-bg); color: var(--a-re-ink); box-shadow: inset 0 -2px var(--a-re); }
.fsa .fsa-seg.is-wide .is-sold[aria-pressed="true"] { background: var(--a-so-bg); color: var(--a-so-ink); box-shadow: inset 0 -2px var(--a-so); }
.fsa-reprice { display: inline-flex; align-items: center; gap: 4px; margin-left: auto; font-size: 11.5px; color: var(--a-muted); }
.fsa-reprice span { margin-right: 4px; }
.fsa-reprice button { padding: 6px 9px; border: 1px solid var(--a-line2); border-radius: 5px; background: var(--a-card); font-size: 11.5px; cursor: pointer; }
.fsa-reprice button:hover:not(:disabled) { border-color: var(--a-gold); }
.fsa-reprice button:disabled { opacity: .4; cursor: default; }
.fsa-table-wrap { overflow: auto; border: 1px solid var(--a-line); border-radius: 8px; background: var(--a-card); }
.fsa-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.fsa-table th { position: sticky; top: 0; z-index: 1; padding: 10px 12px; border-bottom: 1px solid var(--a-line2); background: var(--a-card); font-size: 9px; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; color: var(--a-muted); text-align: left; white-space: nowrap; }
.fsa-table td { padding: 9px 12px; border-bottom: 1px solid var(--a-line); white-space: nowrap; }
.fsa-table td small { color: var(--a-muted); }
.fsa-table .is-r { text-align: right; }
.fsa-table tbody tr { cursor: pointer; transition: background .15s; }
.fsa-table tbody tr:hover, .fsa-table tbody tr:focus-visible { background: rgb(176 141 87 / .08); outline: none; }
.fsa-pill { display: inline-block; padding: 3px 9px; border-radius: 999px; font-size: 10.5px; font-weight: 500; }
.fsa-pill.is-available { background: var(--a-av-bg); color: var(--a-av-ink); }
.fsa-pill.is-reserved { background: var(--a-re-bg); color: var(--a-re-ink); }
.fsa-pill.is-sold { background: var(--a-so-bg); color: var(--a-so-ink); }

/* stacking plan */
.fsa-stack { display: grid; gap: 4px; }
.fsa-srow { display: grid; grid-template-columns: 34px repeat(var(--cols), minmax(0, 1fr)); gap: 4px; }
.fsa-fl { display: grid; place-items: center; font-family: var(--a-display); font-size: 18px; color: var(--a-muted); }
.fsa-cell { display: grid; gap: 0; padding: 5px 7px; border: 0; border-radius: 4px; text-align: left; cursor: pointer; font-size: 10px; line-height: 1.25; transition: transform .15s, box-shadow .15s; }
.fsa-cell b { font-size: 11.5px; }
.fsa-cell span { opacity: .75; }
.fsa-cell em { font-style: normal; font-weight: 500; }
.fsa-cell.is-available { background: var(--a-av-bg); color: var(--a-av-ink); box-shadow: inset 3px 0 var(--a-av); }
.fsa-cell.is-reserved { background: var(--a-re-bg); color: var(--a-re-ink); box-shadow: inset 3px 0 var(--a-re); }
.fsa-cell.is-sold { background: var(--a-so-bg); color: var(--a-so-ink); box-shadow: inset 3px 0 var(--a-so); }
.fsa-cell.is-ph { grid-column: span 4; }
.fsa-cell.is-dim { opacity: .3; filter: saturate(.3); }
.fsa-cell:hover { transform: translateY(-1px); box-shadow: 0 6px 14px -8px rgb(0 0 0 / .4); }
.fsa-srow.is-club .fsa-club { grid-column: 2 / -1; padding: 7px 10px; border: 1px dashed var(--a-gold); border-radius: 4px; font-family: var(--a-display); font-style: italic; font-size: 15px; color: var(--a-gold); }

/* reservations: request, tour, deposit, contract */
.fsa-sum { margin: 0 0 14px; font-size: 12.5px; color: var(--a-muted); }
.fsa-sum b { font-family: var(--a-display); font-size: 19px; font-weight: 600; color: var(--a-ink); }
.fsa-wait { margin-top: 14px; }
.fsa-wait ul { list-style: none; margin: 0; padding: 0; }
.fsa-wait li { display: grid; grid-template-columns: 160px minmax(0, 1fr) auto auto; gap: 12px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--a-line); font-size: 12.5px; }
.fsa-wait small { color: var(--a-muted); }
.fsa .fsa-a { padding: 0; border: 0; background: none; font-weight: 600; text-decoration: underline; text-decoration-color: var(--a-gold); text-underline-offset: 3px; cursor: pointer; }

/* the residence editor */
.fsa-drawer { position: absolute; top: 0; right: 0; bottom: 0; z-index: 5; display: flex; flex-direction: column; width: min(400px, 100%); background: var(--a-card);
  border-left: 1px solid var(--a-line2); box-shadow: -30px 0 60px -40px rgb(0 0 0 / .45); animation: fsa-in .28s cubic-bezier(.2, .8, .2, 1); }
.fsa-drawer[hidden] { display: none; }
@keyframes fsa-in { from { transform: translateX(30px); opacity: 0; } }
.fsa-dhead { display: flex; justify-content: space-between; gap: 12px; padding: 20px 22px 14px; border-bottom: 1px solid var(--a-line); }
.fsa-over { margin: 0 0 3px; font-size: 9px; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: var(--a-gold); }
.fsa-dhead h4 { margin: 0 0 3px; font-family: var(--a-display); font-size: 28px; font-weight: 500; line-height: 1; }
.fsa-dhead p { margin: 0; font-size: 12px; }
.fsa .fsa-x { flex: none; width: 34px; height: 34px; border: 1px solid var(--a-line2); border-radius: 50%; background: none; font-family: var(--a-display); font-size: 22px; line-height: 1; cursor: pointer; }
/* the X is drawn, two lines crossed at the centre: the × character sits off centre in the circle (Tim, 2026-10-27) */
.fsa .fsa-x { position: relative; font-size: 0; }
.fsa .fsa-x::before, .fsa .fsa-x::after { content: ""; position: absolute; left: 50%; top: 50%; width: 13px; height: 1.3px; border-radius: 1px; background: currentColor; transform: translate(-50%, -50%) rotate(45deg); }
.fsa .fsa-x::after { transform: translate(-50%, -50%) rotate(-45deg); }
.fsa-dbody { flex: 1; min-height: 0; overflow: auto; padding: 2px 22px 18px; }
.fsa-price { display: flex; gap: 6px; }
.fsa-price input { flex: 1; min-width: 0; padding: 9px 12px; border: 1px solid var(--a-line2); border-radius: 5px; font-family: var(--a-display); font-size: 22px; }
.fsa-price button { padding: 0 12px; border: 1px solid var(--a-line2); border-radius: 5px; background: var(--a-card); cursor: pointer; }
.fsa-price button:hover { border-color: var(--a-gold); }
.fsa-dbody > .fsa-dim { margin: 6px 0 0; font-size: 11.5px; }
.fsa-field { display: grid; }
.fsa-field input, .fsa-field textarea { width: 100%; padding: 9px 12px; border: 1px solid var(--a-line2); border-radius: 5px; font-size: 13.5px; resize: vertical; }
.fsa-field input:focus, .fsa-field textarea:focus, .fsa-price input:focus { outline: none; border-color: var(--a-gold); box-shadow: 0 0 0 3px rgb(176 141 87 / .16); }
.fsa-hist { list-style: none; margin: 0; padding: 0; }
.fsa-hist li { display: grid; padding: 7px 0; border-bottom: 1px solid var(--a-line); font-size: 12.5px; }
.fsa-hist small { color: var(--a-muted); font-size: 11px; }
.fsa-dfoot { display: flex; gap: 8px; padding: 14px 22px; border-top: 1px solid var(--a-line); }
.fsa .fsa-btn { padding: 11px 16px; border: 1px solid var(--a-line2); border-radius: 5px; background: var(--a-card); font-size: 12.5px; font-weight: 500; cursor: pointer; }
.fsa .fsa-btn.is-primary { flex: 1; background: var(--a-green); border-color: var(--a-green); color: #f6f2ea; }
.fsa .fsa-btn.is-primary:hover { background: #1f3c30; }
.fsa-toast { position: absolute; left: 50%; bottom: 22px; z-index: 9; padding: 11px 18px; transform: translate(-50%, 10px); border-radius: 999px; background: var(--a-green); color: #f6f2ea;
  font-size: 12.5px; box-shadow: 0 16px 34px -14px #000a; opacity: 0; transition: opacity .25s, transform .25s; }
.fsa-toast.is-on { opacity: 1; transform: translate(-50%, 0); }

@media (max-width: 1100px) and (min-width: 761px) {
  .fsa { grid-template-columns: 190px minmax(0, 1fr); }
  .fsa-row3 { grid-template-columns: 1fr; }
  .fsa-row3 > .fsa-elev-card { grid-column: auto; }
  .fsa-row3 > .fsa-col { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fsa-types button { grid-template-columns: 96px minmax(0, 1fr); }
  .fsa-legend.is-foot { margin-left: 108px; }
  .fsa-mwrap { grid-template-columns: minmax(0, 1fr) 170px; column-gap: 32px; }
  .fsa-kpi .fsa-knum { font-size: 38px; }
  .fsa-feed-card .fsa-feed { contain: size; min-height: 200px; }
  .fsa-sync { display: none; }
}
@media (max-width: 760px) {
  .fsa { display: flex; flex-direction: column; height: auto; min-height: 600px; }
  .fsa-side { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 6px; padding: 12px; }
  .fsa-app, .fsa-me { display: none; }
  .fsa-proj { margin: 0; padding: 6px 10px; }
  .fsa-proj small { display: none; }
  .fsa-nav { display: flex; width: 100%; overflow-x: auto; }
  .fsa-nav button { flex: none; padding: 8px 10px; font-size: 12px; }
  .fsa .fsa-reset { margin: 0 0 0 auto; padding: 6px 8px; font-size: 9.5px; }
  .fsa-proj + .fsa-nav { order: 3; }
  .fsa-top { flex-wrap: wrap; gap: 10px; padding: 14px 16px; }
  .fsa-search { width: 100%; }
  .fsa-sync { display: none; }
  .fsa-body { padding: 14px 16px 20px; overflow: visible; }
  .fsa-kpis { grid-template-columns: 1fr; gap: 10px; }
  .fsa-kpi { padding: 14px 16px; }
  .fsa-kpi .fsa-knum { font-size: 34px; }
  .fsa-row3 { grid-template-columns: 1fr; }
  .fsa-row3 > .fsa-elev-card { grid-column: auto; }
  .fsa-feed-card .fsa-feed { contain: none; max-height: 340px; }
  .fsa-types button { grid-template-columns: 96px minmax(0, 1fr); }
  .fsa-mwrap { grid-template-columns: 1fr; gap: 0; }
  .fsa-mwrap > .fsa-msum { order: 0; }
  .fsa-legend.is-foot { margin-left: 108px; }
  .fsa-msum { grid-template-columns: auto minmax(0, 1fr); align-items: baseline; gap: 2px 12px; margin: 0; }
  .fsa-msum b { grid-row: span 2; font-size: 38px; }
  .fsa-mbar { width: 18px; }
  .fsa-month-card h4 { flex-wrap: wrap; row-gap: 4px; }
  .fsa-month-card h4 small { order: 3; width: 100%; }
  .fsa-month-card h4 .fsa-legend { order: 4; }
  .fsa-wait li { grid-template-columns: 1fr auto; }
  .fsa-reprice { margin-left: 0; }
  .fsa-tools .fsa-seg { max-width: 100%; overflow-x: auto; }
  .fsa-stack { overflow-x: auto; }
  .fsa-srow { min-width: 560px; }
  .fsa-drawer { position: fixed; inset: 0; width: 100%; z-index: 1000; }
  /* nothing under 11px on a phone */
  .fsa-lab, .fsa-kpi dt, .fsa-legend, .fsa-tbar b, .fsa-table th, .fsa-colm h5, .fsa-src, .fsa-over, .fsa-sched em, .fsa-mcol > small, .fsa-cell, .fsa-pill, .fsa .fsa-chip,
  .fsa-proj small, .fsa-nav em, .fsa .fsa-reset, .fsa-meter b, .fsa-av { font-size: 11px; letter-spacing: .08em; }
  .fsa-cell, .fsa-pill, .fsa .fsa-chip, .fsa-legend, .fsa-tbar b, .fsa-mcol > small, .fsa-meter b, .fsa-nav em { letter-spacing: 0; }
}

/* the tower in 3D: show one status at a time */
.fsa-3d-only { position: absolute; left: 50%; bottom: 12px; z-index: 2; display: flex; gap: 2px; padding: 3px; transform: translateX(-50%); border: 1px solid var(--a-line2);
  border-radius: 999px; background: rgb(255 255 255 / .92); box-shadow: 0 8px 20px -14px #0008; }
.fsa .fsa-3d-only button { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border: 0; border-radius: 999px; background: none; font-size: 11.5px; cursor: pointer; white-space: nowrap; }
.fsa .fsa-3d-only button b { font-weight: 600; color: var(--a-muted); }
.fsa .fsa-3d-only button[aria-pressed="true"] { background: var(--a-green); color: #f6f2ea; }
.fsa .fsa-3d-only button[aria-pressed="true"] b { color: var(--a-gold2); }
.fsa-3d-only i { width: 8px; height: 8px; border-radius: 2px; }
.fsa-3d-only i.is-available, .fsa-feed .fsa-dot.is-available { background: var(--a-av); }
.fsa-3d-only i.is-reserved, .fsa-feed .fsa-dot.is-reserved { background: var(--a-re); }
.fsa-3d-only i.is-sold, .fsa-feed .fsa-dot.is-sold { background: var(--a-so); }
.fsa-ksub .fsa-a { font-size: 11.5px; }
/* reservations: holds on residences */
.fsa-holds td { vertical-align: top; white-space: normal; }
.fsa-holds td small { display: block; margin-top: 2px; font-size: 11px; color: var(--a-muted); }
.fsa-holds td small.is-warm { color: var(--a-re-ink); }
.fsa-holds tr.is-new { background: rgb(176 141 87 / .07); }
.fsa-holds tbody tr { cursor: default; }
.fsa-act { white-space: nowrap; text-align: right; }
.fsa .fsa-act button { margin-left: 4px; padding: 6px 10px; border: 1px solid var(--a-line2); border-radius: 5px; background: var(--a-card); font-size: 11.5px; cursor: pointer; }
.fsa .fsa-act button:hover { border-color: var(--a-gold); }
.fsa .fsa-act .is-primary { background: var(--a-green); border-color: var(--a-green); color: #f6f2ea; }
@media (max-width: 760px) {
  /* the tower card on a phone: title, then the hint, then the 3D/Facade switch; compact status chips */
  .fsa-elev-card h4 { flex-wrap: wrap; row-gap: 4px; }
  .fsa-elev-card h4 small { order: 3; width: 100%; }
  .fsa .fsa-seg.is-mini { margin-left: auto; }
  .fsa-3d { height: 400px; }
  .fsa-3d-only { left: 8px; right: 52px; bottom: 8px; transform: none; justify-content: space-between; }
  .fsa .fsa-3d-only button { padding: 5px 7px; gap: 4px; font-size: 11px; }
  .fsa .fsa-3d-only button b { display: none; }
}