/* What only the public site adds around the two playable models (squad SITE member 4, 2026-11-11):
   the "Sample data" line, one hint that leaves at the first touch, and the full-screen button.
   The house look: true black, quiet grey text, gold only for what you press. Sizes are the frame's (14 / 12.5 px). */
html,body{height:100%}
.crm{overflow-x:hidden;--crm-strip:44px}
/* the scene stops above the strip, so the strip never covers a legend, a credit line or a button of the model */
.crm.rn-page #view{height:calc(100vh - var(--crm-strip));height:calc(100dvh - var(--crm-strip));min-height:420px}
.crm.crm-city{overflow:hidden}
.crm.crm-city.rn-page #view{position:fixed;inset:0 0 var(--crm-strip) 0;height:auto;min-height:0}
.crm .crm-bar{position:fixed;left:0;right:0;bottom:0;z-index:8;height:var(--crm-strip);box-sizing:border-box;display:flex;align-items:center;
  justify-content:space-between;gap:12px;padding:0 24px;background:#000;box-shadow:inset 0 1px 0 #1F2228;
  font-size:12.5px;line-height:1.3;color:#B4BFCC;white-space:nowrap}
.crm .crm-full{display:inline-flex;align-items:center;min-height:30px;padding:0 14px;border-radius:999px;background:#F5C451;color:#000;
  font-weight:600;font-size:12.5px;text-decoration:none;cursor:pointer}
.crm .crm-full:hover{background:#FFD56B}
.crm .crm-full:focus-visible{outline:2px solid #F5F7FA;outline-offset:2px}
.crm .crm-full[hidden]{display:none}
.crm .crm-hint{position:fixed;left:50%;bottom:calc(var(--crm-strip) + 20px);transform:translateX(-50%);z-index:7;margin:0;padding:10px 16px;
  border-radius:999px;background:rgba(12,13,16,.92);box-shadow:inset 0 0 0 1px #3A3D44;color:#F5F7FA;font-size:14px;line-height:1.3;
  white-space:nowrap;pointer-events:none;transition:opacity .35s ease}
.crm.crm-city .crm-hint{bottom:calc(var(--crm-strip) + 108px)}
.crm .crm-hint.crm-gone{opacity:0}
.crm .crm-hint[hidden]{display:none}
.crm-noscript{position:fixed;left:24px;right:24px;top:40%;z-index:7;margin:0;color:#B4BFCC;font-size:15.5px;line-height:1.5;text-align:center}
@media (max-width:600px){
  .crm .crm-bar{padding:0 16px}
  .crm .crm-hint{bottom:calc(var(--crm-strip) + 236px)}
  .crm.crm-city .crm-hint{bottom:calc(var(--crm-strip) + 164px)}
  .crm .crm-hint{font-size:12.5px;padding:8px 12px;max-width:calc(100% - 32px);box-sizing:border-box;white-space:normal;text-align:center;width:max-content}
}
/* the building (the Astra page, squad SITE member 6): its own frame stops above the strip; its colour choices sit
   on screen in the header as five buttons; the hint sits over the building, clear of the key and the totals */
.crm-astra #app{height:calc(100% - var(--crm-strip))}
.crm-astra .look-head{margin:0;display:flex;align-items:center;gap:7px;justify-content:flex-end;font-size:11px;color:var(--paper)}
.crm-astra #lookMenu{position:static;width:auto;padding:0;background:none;border:0;box-shadow:none}
.crm-astra #lookChoices{display:flex;gap:4px;margin-top:6px}
.crm-astra .look-option{width:auto;padding:6px 8px;font-size:11px;gap:6px}
.crm-astra .look-option i{width:16px;height:12px}
.crm-astra .look-option kbd{display:none}
.crm-astra .look-hint{display:none}
.crm.crm-astra .crm-hint{bottom:auto;top:52%}
@media (max-width:760px){
  .crm-astra .heading{flex-direction:column;align-items:stretch}
  .crm-astra .heading-right{align-items:flex-start}
  .crm-astra .look-head{justify-content:flex-start}
  .crm-astra .look-option{padding:7px}
  .crm-astra .look-option span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
  .crm-astra .look-option i{width:20px;height:14px}
  .crm-astra .sample{text-align:left}
  .crm.crm-astra .crm-hint{top:44%;bottom:auto}
  .crm-astra aside{bottom:var(--crm-strip);max-height:calc(52vh - var(--crm-strip));max-height:calc(52dvh - var(--crm-strip))}
}
@media (prefers-reduced-motion:reduce){.crm .crm-hint{transition:none}}