/* clock-size.html — real scenes at true scale + mosque board size (clock-size.js, round 5). Builds on main.css + tools.css. */
.cs-tabs { display: flex; gap: 8px; flex-wrap: wrap; margin: 0 0 14px; }
.cs-tab { font: 800 15px var(--font-head); border: 1px solid var(--line); background: var(--card); color: var(--ink-soft); border-radius: 999px; padding: 8px 18px; cursor: pointer; }
.cs-tab[aria-selected="true"] { background: var(--green-700); border-color: var(--green-700); color: #fff; }
.cs-pane[hidden] { display: none; }
.cs-card { display: grid; gap: 12px; }
/* the model picker: one clean cut-out per model */
.cs-groups { display: flex; flex-wrap: wrap; gap: 8px; }
.cs-g { border: 1.5px solid var(--line); background: #fff; border-radius: 999px; padding: 7px 15px; font: 800 14px var(--font-head); color: var(--ink); cursor: pointer; }
.cs-g[aria-pressed="true"] { background: var(--green-900, #0b3b26); border-color: var(--green-900, #0b3b26); color: #fff; }
.cs-pick { display: grid; grid-auto-flow: column; grid-auto-columns: 118px; gap: 10px; overflow-x: auto; padding: 4px 2px 10px; scroll-snap-type: x proximity; overscroll-behavior-x: contain; }
.cs-dev { scroll-snap-align: start; display: grid; justify-items: center; align-content: start; gap: 4px; padding: 10px 6px 9px; border: 1.5px solid var(--line); border-radius: 16px; background: linear-gradient(180deg, #fff 0%, #f7f4ec 100%); cursor: pointer; font: inherit; }
.cs-dev img { width: 98px; height: 88px; object-fit: contain; filter: drop-shadow(0 6px 7px rgba(40, 28, 8, .2)); }
.cs-dev b { font: 800 12.5px var(--font-head); color: var(--green-900); }
.cs-dev span { font-size: 11.5px; color: var(--ink-soft); text-align: center; line-height: 1.3; }
.cs-dev:hover { border-color: #b9c9bd; }
.cs-dev[aria-pressed="true"] { border-color: var(--green-700); background: var(--green-50, #e8f3ec); box-shadow: 0 0 0 2px var(--green-700) inset; }
/* the scene */
.cs-fig { margin: 0; display: grid; gap: 8px; }
.cs-stage { position: relative; width: 100%; aspect-ratio: 5 / 4; border-radius: 18px; overflow: hidden; background: #ece8df; box-shadow: 0 1px 0 rgba(255,255,255,.6) inset, 0 10px 30px rgba(30, 24, 12, .12); }
.cs-stage[hidden] { display: none; }
.cs-svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.cs-dim-t { font-family: var(--font-body, system-ui), system-ui, sans-serif; font-weight: 800; fill: #173a2a; }
.cs-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 14px; }
.cs-size { font-weight: 800; color: var(--green-900); margin: 0; }
.cs-views { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.cs-v { border: 1.5px solid var(--line); background: #fff; border-radius: 999px; padding: 5px 12px; font: 700 13px var(--font-head); color: var(--ink); cursor: pointer; }
.cs-v[aria-pressed="true"] { background: #fff4d6; border-color: #f5b400; }
.cs-chk { display: inline-flex; align-items: center; gap: 6px; font: 700 13px var(--font-head); color: var(--ink-soft); padding: 0 4px; cursor: pointer; }
.cs-chk input { width: 16px; height: 16px; accent-color: var(--green-700); }
.cs-cap { margin: 0; }
.cs-prod { justify-self: start; }
/* from your seat */
.cs-f { display: grid; gap: 5px; font-weight: 700; font-size: 13.5px; color: var(--ink-soft); }
.cs-range { display: grid; max-width: 520px; }
.cs-range input { width: 100%; accent-color: var(--green-700); }
.cs-seen-card h2 { margin-top: 0; }
.cs-seen { min-height: 140px; display: flex; align-items: center; justify-content: center; border-radius: 14px; padding: 18px; overflow: hidden;
  background: radial-gradient(120% 90% at 50% 20%, #ffffff 0%, #f4f1e8 60%, #e9e3d4 100%); box-shadow: inset 0 0 0 1px #e4dcc8; }
.cs-seen img { max-width: 100%; height: auto; filter: drop-shadow(0 4px 6px rgba(0,0,0,.22)); }
/* mosque boards */
.cs-need { font-family: var(--font-head); font-weight: 800; color: var(--green-700); font-size: 16px; margin: 0; }
.cs-mgrid { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.cs-mgrid > .cs-fig { position: sticky; top: 84px; }
.cs-boards { list-style: none; margin: 0; padding: 0 2px 0 0; display: grid; gap: 8px; max-height: 640px; overflow-y: auto; overscroll-behavior: contain; }
.cs-b { display: grid; grid-template-columns: 56px 1fr auto; gap: 12px; align-items: center; border: 1px solid var(--line); border-radius: 12px; padding: 8px 10px; cursor: pointer; background: var(--card); }
.cs-b.is-pick { border-color: var(--green-700); box-shadow: 0 0 0 3px rgba(15,122,68,.12); }
.cs-b-btn { border: 0; background: none; padding: 0; cursor: pointer; display: grid; place-items: center; width: 56px; height: 60px; }
.cs-b-pic { max-width: 56px; max-height: 60px; object-fit: contain; filter: drop-shadow(0 3px 4px rgba(40, 28, 8, .22)); }
.cs-b-t { display: grid; gap: 2px; min-width: 0; }
.cs-b-m { font: 800 15px var(--font-head); color: var(--green-900); text-decoration: none; justify-self: start; }
.cs-b-m:hover { text-decoration: underline; }
.cs-b-meta { font-size: 12.5px; color: var(--ink-soft); line-height: 1.5; }
.cs-chip { font: 800 12px var(--font-head); border-radius: 999px; padding: 3px 10px; white-space: nowrap; }
.cs-b.is-ok .cs-chip { background: var(--green-100); color: var(--green-900); }
.cs-b.is-fair .cs-chip { background: #FFF4D6; color: #6B5310; }
.cs-b.is-no .cs-chip { background: #F1EFE9; color: var(--ink-faint); }
.cs-b.is-no { opacity: .72; }
@media (max-width: 860px) {
  .cs-mgrid { grid-template-columns: 1fr; }
  .cs-mgrid > .cs-fig { position: static; }
  .cs-boards { max-height: none; overflow: visible; }
}
@media (max-width: 520px) {
  .cs-b { grid-template-columns: 48px 1fr; } .cs-chip { grid-column: 2; justify-self: start; }
  .cs-b-btn { width: 48px; height: 54px; } .cs-b-pic { max-width: 48px; max-height: 54px; }
  .cs-pick { grid-auto-columns: 104px; } .cs-dev img { width: 86px; height: 78px; }
  .cs-stage { border-radius: 14px; }
}