/* The Astra building's style, from publication/design/workspace/astra/r7a_building_looks.html
   (copied by tools/site_cre_models.py; squad SITE member 6). */
  :root {
    color-scheme: dark;
    --paper: #eeeae1;
    --muted: #96989a;
    --line: #292b2d;
    --accent: #e2d9c6;
    --due: #d1a05d;
    --accent-wash: #161615;
    --frame: #08090b;
  }
  * { box-sizing: border-box; }
  html, body { margin: 0; width: 100%; height: 100%; background: var(--frame); }
  body {
    font-family: Arial, Helvetica, sans-serif;
    color: var(--paper); -webkit-font-smoothing: antialiased; overflow: hidden;
  }
  button, select, summary { font: inherit; }
  button, select {
    color: var(--paper); background: #0c0d0f;
    border: 1px solid var(--line); border-radius: 3px;
  }
  button {
    cursor: pointer; padding: 10px 13px;
    transition: border-color .18s, background .18s;
  }
  button:hover, select:hover { border-color: #777972; }
  button:focus-visible, select:focus-visible, summary:focus-visible {
    outline: 1px solid var(--accent); outline-offset: 3px;
  }
  button[aria-pressed="true"] {
    color: var(--accent); border-color: var(--accent); background: var(--accent-wash);
  }
  button.quiet { background: none; border-color: transparent; color: var(--muted); }
  button.quiet:hover { color: var(--paper); }
  select { padding: 9px 26px 9px 10px; max-width: 100%; }
  .sr {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
  }
  #app { height: 100%; display: flex; flex-direction: column; }
  header { padding: 25px 32px 0; flex: 0 0 auto; position: relative; z-index: 8; }
  .heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
  .eyebrow { color: var(--muted); font-size: 11px; letter-spacing: .12em; margin-bottom: 9px; }
  h1 { font-size: 23px; font-weight: 400; letter-spacing: -.035em; margin: 0; }
  .heading-right { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
  .sample { font-size: 10px; color: var(--muted); text-align: right; line-height: 1.65; }
  .sample strong { color: var(--paper); font-weight: 400; }
  #lookControl { position: relative; }
  #lookControl summary {
    list-style: none; cursor: pointer; display: flex; align-items: center; gap: 8px;
    font-size: 11px; padding: 7px 9px; border: 1px solid var(--line); border-radius: 3px;
    background: #0c0d0f; white-space: nowrap;
  }
  #lookControl summary::-webkit-details-marker { display: none; }
  .look-label { color: var(--muted); }
  #lookControl summary::after { content: "⌄"; color: var(--muted); margin-left: 2px; }
  #activeSwatch { width: 10px; height: 10px; border-radius: 50%; background: var(--accent); }
  #lookMenu {
    position: absolute; right: 0; top: calc(100% + 7px); width: 260px;
    padding: 7px; background: #101114; border: 1px solid #343638;
    border-radius: 5px; box-shadow: 0 14px 42px #0009;
  }
  #lookChoices { display: grid; gap: 3px; }
  .look-option {
    display: flex; align-items: center; gap: 10px; text-align: left;
    width: 100%; padding: 10px; font-size: 12px; background: transparent; border-color: transparent;
  }
  .look-option i { width: 24px; height: 18px; border: 1px solid #ffffff26; border-radius: 2px; }
  .look-option kbd { margin-left: auto; color: var(--muted); font: 10px Arial, sans-serif; }
  .look-hint { font-size: 10px; color: var(--muted); line-height: 1.6; margin: 9px 10px 5px; }
  nav {
    display: flex; align-items: center; gap: 7px; margin-top: 17px; padding-bottom: 15px;
    overflow-x: auto; scrollbar-width: none;
  }
  nav::-webkit-scrollbar { display: none; }
  nav button { flex: 0 0 auto; font-size: 12px; padding: 9px 12px; }
  main { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0,1fr) 300px; }
  #stage { min-width: 0; min-height: 0; position: relative; isolation: isolate; }
  #picture { position: absolute; inset: 0; }
  #picture canvas, #picture svg { display: block; width: 100%; height: 100%; }
  #picture canvas { touch-action: none; outline: none; }
  .stage-tools {
    position: absolute; z-index: 2; top: 6px; left: 32px; right: 20px;
    display: flex; flex-wrap: wrap; gap: 8px; align-items: center; pointer-events: none;
  }
  .stage-tools > * { pointer-events: auto; font-size: 11px; }
  #floor { width: 150px; background: #0a0b0d; }
  #unitPicker { width: 133px; background: #0a0b0d; }
  #tourOverlay {
    position: absolute; left: 32px; top: 53px; z-index: 3; max-width: 285px;
    padding: 9px 12px; background: #08090be8; border: 1px solid var(--line); border-radius: 3px;
  }
  #tourText { font-size: 12px; line-height: 1.6; color: var(--muted); margin: 0; }
  #tourOverlay button { font-size: 11px; padding: 8px 10px 2px 0; }
  .stage-bottom {
    position: absolute; z-index: 2; bottom: 18px; left: 32px; right: 20px; pointer-events: none;
  }
  #loadNote, .help { font-size: 11px; color: var(--muted); line-height: 1.6; margin: 0; }
  #loadNote:empty { display: none; }
  #loadNote { color: var(--accent); margin-bottom: 6px; }
  .legend { display: flex; gap: 9px 15px; flex-wrap: wrap; margin-bottom: 10px; max-width: 720px; }
  .legend span { display: inline-flex; align-items: center; gap: 6px; font-size: 10px; color: #b6b8b9; }
  .key { width: 10px; height: 10px; border: 1px solid var(--accent); display: inline-block; flex: 0 0 auto; }
  .key.vacant { border-style: dashed; background: transparent; }
  .key.ending { background: transparent; }
  .key.due { background: var(--due); border-color: var(--due); border-bottom: 3px double #08090b; }
  .key.repair { width: 6px; height: 6px; background: var(--accent); transform: rotate(45deg); margin: 0 2px; }
  aside {
    border-left: 1px solid var(--line); padding: 27px 27px 24px;
    overflow-y: auto; background: var(--frame); position: relative;
  }
  #emptyPanel h2 { font-size: 19px; font-weight: 400; line-height: 1.4; margin: 11px 0 20px; }
  #emptyPanel p { font-size: 12px; line-height: 1.8; color: var(--muted); }
  #emptyPanel .small-rule { width: 28px; border-top: 1px solid var(--accent); margin: 29px 0 22px; }
  .section-label { font-size: 10px; letter-spacing: .11em; color: var(--muted); text-transform: uppercase; }
  #matchCount { color: var(--paper) !important; }
  #unitCard { animation: arrive .25s ease-out; }
  @keyframes arrive { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } }
  .card-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
  .card-heading h2 { font-weight: 400; font-size: 25px; margin: 10px 0 8px; letter-spacing: -.035em; }
  #closeCard { font-size: 23px; padding: 0 5px; line-height: 1; }
  #tenant { font-size: 15px; margin: 0 0 18px; line-height: 1.5; }
  #unitStatus { color: var(--accent); font-size: 11px; line-height: 1.7; margin-bottom: 23px; }
  #unitStatus.overdue { color: var(--due); }
  dl { margin: 0; }
  .data-row {
    display: flex; justify-content: space-between; align-items: baseline;
    gap: 13px; padding: 12px 0; border-top: 1px solid var(--line); font-size: 12px;
  }
  dt { color: var(--muted); }
  dd { margin: 0; text-align: right; line-height: 1.5; }
  #repairBlock { border-top: 1px solid var(--line); padding-top: 17px; margin-top: 7px; }
  #repairBlock p { font-size: 12px; line-height: 1.6; margin: 8px 0 0; }
  #liftUnit { width: 100%; margin-top: 23px; font-size: 12px; }
  .source { color: var(--muted); font-size: 10px !important; line-height: 1.7; margin-top: 24px; }
  #tour { font-size: 12px; padding-left: 0; }
  footer {
    padding: 15px 32px 17px; flex: 0 0 auto; border-top: 1px solid var(--line);
    display: flex; align-items: center; justify-content: space-between; gap: 18px;
  }
  #totals { font-size: 12px; line-height: 1.7; color: var(--muted); display: flex; gap: 5px 21px; flex-wrap: wrap; }
  #totals b { font-weight: 400; color: var(--paper); margin-right: 4px; }
  .footer-note { color: var(--muted); font-size: 10px; white-space: nowrap; }
  [hidden] { display: none !important; }
  @media (min-width: 1600px) {
    main { grid-template-columns: minmax(0,1fr) 340px; }
    aside { padding: 35px; }
  }
  @media (max-width: 760px) {
    header { padding: 17px 18px 0; }
    .heading { gap: 8px; }
    h1 { font-size: 19px; }
    .eyebrow { font-size: 10px; }
    .sample { font-size: 9px; }
    .heading-right { gap: 6px; }
    #lookControl summary { font-size: 10px; padding: 7px; gap: 5px; }
    #activeSwatch { width: 8px; height: 8px; }
    nav { margin-top: 14px; padding-bottom: 10px; gap: 6px; }
    nav button { font-size: 11px; padding: 9px 10px; }
    main { display: block; position: relative; }
    #stage { width: 100%; height: 100%; }
    .stage-tools { left: 18px; right: 12px; top: 7px; gap: 5px; }
    #floor { width: 133px; }
    #unitPicker { width: 119px; }
    #reset { padding: 8px 3px; font-size: 10px; }
    #tourOverlay { left: 18px; top: 53px; max-width: 250px; }
    #tourText { font-size: 11px; }
    .stage-bottom { left: 18px; right: 18px; bottom: 12px; }
    .legend { gap: 7px 12px; margin-bottom: 7px; }
    .legend span { font-size: 9px; }
    .help, #loadNote { font-size: 10px; }
    aside {
      display: none; position: fixed; z-index: 9; left: 0; right: 0; bottom: 0;
      max-height: 52vh; max-height: 52dvh; border: 0; border-top: 1px solid var(--accent);
      padding: 19px 24px max(24px, env(safe-area-inset-bottom)); box-shadow: 0 -15px 40px #0009;
    }
    aside.open { display: block; }
    .card-heading h2 { font-size: 22px; }
    #tenant { margin-bottom: 10px; }
    #unitStatus { margin-bottom: 12px; }
    .data-row { padding: 9px 0; }
    footer { padding: 10px 18px 12px; }
    #totals { gap: 3px 14px; font-size: 10px; }
    .footer-note { display: none; }
    #liftUnit { margin-top: 16px; }
  }
  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; transition: none !important; }
  }