/* Content surfaces for Parkline's floating glass navigation.
   Drawings remain on white paper; translucent material belongs to their controls. */
:root {
  --panel-ink: var(--glass-ink, #172a32);
  --panel-muted: var(--glass-muted, #50636b);
  --panel-blue: var(--glass-accent, #206fd5);
  --panel-line: rgba(56, 82, 101, .12);
}

.sidebar {
  color: var(--panel-ink);
  border: 1px solid rgba(255, 255, 255, .76);
  background: linear-gradient(135deg, rgba(249, 253, 255, .84), rgba(232, 243, 250, .72));
  backdrop-filter: blur(28px) saturate(1.3);
  -webkit-backdrop-filter: blur(28px) saturate(1.3);
  box-shadow: inset 0 1px 0 #fff, inset 1px 0 0 #ffffff82, 0 18px 55px #12304422, 0 2px 8px #1230440d;
  scrollbar-color: #829ba65c transparent;
}
.sidebar .panel-heading {
  gap: 12px;
  padding-bottom: 17px;
  margin-bottom: 18px;
  border-bottom: 1px solid var(--panel-line);
}
.sidebar .panel-heading h2 {
  font-size: 19px;
  letter-spacing: -.5px;
  line-height: 1.25;
  font-weight: 650;
  color: var(--panel-ink);
}
.sidebar .panel-close,
dialog .round-button {
  width: 44px;
  height: 44px;
  min-width: 44px;
  flex: 0 0 44px;
  font-size: 24px;
  color: #405966;
  background: rgba(255, 255, 255, .45);
  border: 1px solid rgba(255, 255, 255, .9);
  box-shadow: inset 0 1px 0 #fff, 0 2px 6px #0e30440a;
  transition: background .18s, transform .18s;
}
.sidebar .selection-summary {
  gap: 6px;
  margin: 0 0 20px;
  color: var(--panel-muted);
  font-size: 11px;
  line-height: 1.4;
}
.sidebar .selection-summary span {
  padding: 6px 9px;
  border: 1px solid #ffffff96;
  background: #ffffff45;
  box-shadow: inset 0 1px 0 #ffffff66;
}
.sidebar .selection-summary .availability-tag { color: #3f5360; }
.sidebar .zone-color-tag:before { border-radius: 50%; width: 7px; height: 7px; }
.sidebar .interior-plan-heading {
  display: block;
  margin: 0 0 15px;
}
.sidebar .interior-plan-heading strong {
  display: block;
  color: var(--panel-ink);
  font-size: 27px;
  line-height: 1.15;
  letter-spacing: -.9px;
  font-weight: 650;
}
.sidebar .interior-plan-heading > span {
  display: block;
  margin-top: 6px;
  color: var(--panel-muted);
  font-size: 13px;
}
.sidebar .interior-plan-preview {
  border-radius: 20px;
  border: 1px solid #ffffff;
  padding: 16px 14px 37px;
  background: #fff;
  box-shadow: 0 3px 12px #1d405408;
  transition: box-shadow .18s, transform .18s;
}
.sidebar .interior-plan-preview img {
  display: block;
  height: min(24dvh, 230px);
  width: 100%;
  object-fit: contain;
}
.sidebar .interior-plan-preview > span {
  color: var(--panel-blue);
  font-size: 12px;
  font-weight: 600;
  bottom: 13px;
}
.sidebar .interior-plan-note {
  color: #516670;
  font-size: 11px;
  line-height: 1.6;
  margin: 14px 1px 18px;
}
.sidebar .primary-button,
.saved-card .primary-button {
  min-height: 48px;
  border: 1px solid #ffffff65;
  background: linear-gradient(165deg, #3685e9e8, #1d68cce8);
  color: #fff;
  border-radius: 16px;
  padding: 13px 17px;
  font-size: 13px;
  font-weight: 600;
  box-shadow: inset 0 1px 0 #ffffff59, 0 5px 14px #226fc323;
  transition: background .18s, box-shadow .18s, transform .18s;
}
.sidebar .secondary-button,
.saved-card .secondary-button {
  min-height: 45px;
  padding: 12px 16px;
  border-radius: 16px;
  border: 1px solid #ffffffa6;
  background: #ffffff35;
  color: #324e5f;
  font-size: 12px;
  font-weight: 550;
  box-shadow: inset 0 1px 0 #ffffff6b;
}
.sidebar .primary-button > span:last-child { font-size: 18px; line-height: 1; }

.collection-cards { gap: 8px; margin-top: 0; }
.collection-card {
  grid-template-columns: 106px minmax(0, 1fr);
  gap: 13px;
  padding: 8px;
  border: 1px solid transparent;
  border-radius: 18px;
  color: var(--panel-ink);
  transition: background .18s, border-color .18s;
}
.collection-card img { width: 106px; border-radius: 11px; background: #e8edf0; }
.collection-card small {
  margin-bottom: 4px;
  font-size: 10px;
  font-weight: 650;
  letter-spacing: 1.2px;
  color: #5b7180;
  font-variant-numeric: tabular-nums;
}
.collection-card strong { color: var(--panel-ink); font-size: 13px; font-weight: 550; line-height: 1.4; }
.collection-card.active {
  border-color: #ffffffd9;
  background: #ffffff8c;
  box-shadow: inset 0 1px 0 #fff, 0 3px 12px #25475d07;
}
.collection-card.active small { color: var(--panel-blue); }

dialog.content-dialog,
dialog.interior-plan-dialog {
  color: var(--panel-ink);
  border: 1px solid #ffffffe6;
  border-radius: 30px;
  background: linear-gradient(135deg, #f7fcfff2, #edf5fbed);
  backdrop-filter: blur(32px) saturate(1.2);
  -webkit-backdrop-filter: blur(32px) saturate(1.2);
  box-shadow: inset 0 1px 0 #fff, 0 32px 110px #0e263d4d, 0 4px 20px #0e263d1a;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: #93a8b466 transparent;
}
dialog::backdrop { background: #152a403d; backdrop-filter: blur(9px); -webkit-backdrop-filter: blur(9px); }
.content-dialog { width: min(940px, calc(100vw - 40px)); }
.content-dialog .dialog-bar,
.interior-plan-dialog .dialog-bar { padding: 25px 28px 23px; align-items: center; }
dialog .dialog-bar .eyebrow { color: #566f7e; font-size: 9px; letter-spacing: 1.8px; font-weight: 650; }
dialog .dialog-bar h2 { color: var(--panel-ink); font-size: 28px; line-height: 1.2; letter-spacing: -.8px; font-weight: 650; margin-top: 6px; }
.interior-plan-dialog .dialog-bar h2 { font-size: 24px; margin-top: 5px; }
.interior-plan-dialog { width: min(1000px, calc(100vw - 40px)); }
.interior-plan-canvas { background: #fff; margin: 0 20px; padding: 12px 20px; border-radius: 20px; overflow: hidden; }
.interior-plan-canvas img { display: block; height: min(61dvh, 620px); }
#interior-plan-disclaimer { color: var(--panel-muted); font-size: 12px; line-height: 1.6; padding: 18px 28px 23px; }
#interior-plan-message { color: #516670; }
#saved-content { padding: 0 24px 26px; }
.saved-grid { gap: 14px; }
.saved-card { display: flex; flex-direction: column; padding: 17px 14px; border-radius: 22px; border-color: #ffffff; background: #ffffff70; box-shadow: 0 2px 12px #24465906; }
.saved-card h3 { font-size: 18px; font-weight: 650; letter-spacing: -.3px; color: var(--panel-ink); }
.saved-card .zone-preview { border-radius: 14px; overflow: hidden; margin-top: 13px; }
.saved-card .subtext { color: var(--panel-muted); font-size: 12px; line-height: 1.45; margin: 11px 0 14px; flex: 1; }
.saved-card .primary-button { font-size: 12px; }
.saved-card .secondary-button { font-size: 12px; border-color: #dce7ee; background: #ffffff4d; }
.saved-empty { padding: 35px 5px 50px; text-align: center; color: var(--panel-muted); font-size: 15px; line-height: 1.8; }
.saved-disclaimer { color: var(--panel-muted); font-size: 11px; line-height: 1.7; margin: 20px 4px 0; }
.review-body { padding: 0 30px 30px; color: var(--panel-muted); }
.review-lead { color: var(--panel-ink); font-size: 18px; line-height: 1.6; max-width: 570px; padding-bottom: 14px; }
.review-item { border-color: var(--panel-line); gap: 18px; padding: 22px 0; }
.review-item > b { display: grid; place-items: center; flex: 0 0 32px; height: 32px; border-radius: 10px; background: #dcecff; color: #246dc2; font-size: 11px; font-weight: 650; }
.review-item h4 { color: var(--panel-ink); font-size: 15px; margin-bottom: 7px; }
.review-item p { color: var(--panel-muted); font-size: 13px; line-height: 1.7; }

body[data-mode="plans"] { background: #eff4f8; }
.plan-catalog {
  background: radial-gradient(ellipse at 86% 0%, #e1eef888, transparent 47%), linear-gradient(160deg, #f5f8fa, #eaf1f6);
  color: var(--panel-ink);
  scrollbar-color: #8fa6b359 transparent;
}
.plan-catalog-inner { max-width: 1456px; padding-top: 42px; padding-bottom: 50px; }
.plan-intro { max-width: 780px; }
.plan-intro .eyebrow { color: #586f7d; font-size: 10px; letter-spacing: 2px; margin-bottom: 14px; }
.plan-intro h1 { color: var(--panel-ink); font-size: clamp(42px, 4.3vw, 62px); font-weight: 600; line-height: 1.05; letter-spacing: -2.6px; }
.plan-intro p { max-width: 600px; color: #506a79; font-size: 14px; line-height: 1.7; margin-top: 17px; }
.plan-toolbar { gap: 20px; margin: 30px 0 25px; padding-bottom: 0; border-bottom: 0; }
#plan-filters { gap: 6px; padding: 5px; border: 1px solid #fff; border-radius: 20px; background: #ffffff66; box-shadow: inset 0 1px 0 #fff, 0 5px 18px #3b688309; }
.plan-filter { min-height: 44px; border: 1px solid transparent; border-radius: 15px; background: transparent; color: #526d7e; padding: 10px 15px; font-size: 12px; font-weight: 550; }
.plan-filter.active,
.plan-filter[aria-pressed="true"] { border-color: #ffffffbf; color: #1c63b8; background: #e3efffe6; box-shadow: inset 0 1px 0 #fff, 0 2px 7px #356a9d12; }
.plan-filter-count { display: grid; place-items: center; min-width: 19px; height: 19px; font-size: 10px; border-radius: 7px; background: #496b8110; color: inherit; opacity: .85; }
#plan-count { color: #586f7e; font-size: 12px; }
.plan-grid { gap: 22px; }
.plan-card { border: 1px solid #ffffff; border-radius: 26px; background: #fff; color: var(--panel-ink); box-shadow: 0 5px 20px #264b6407; transition: transform .22s, box-shadow .22s, border-color .22s; }
.plan-card-visual { aspect-ratio: 1.48; padding: 24px; }
.plan-card-meta { padding: 21px 24px 21px; border-top: 1px solid #ebf0f4; background: linear-gradient(130deg, #f8fbfd, #f2f7fa); }
.plan-card-label { font-size: 9px; letter-spacing: 1.6px; color: #567183; margin-bottom: 9px; }
.plan-card-meta h2 { color: var(--panel-ink); font-size: 23px; letter-spacing: -.6px; line-height: 1.22; font-weight: 600; }
.plan-card-meta p { color: #566e7f; font-size: 12px; margin-top: 7px; }
.plan-card-action { padding-top: 23px; color: #2b6db9; font-size: 12px; font-weight: 600; }
.plan-card-action > span { display: grid; place-items: center; width: 27px; height: 27px; border: 1px solid #ffffff; border-radius: 50%; background: #e5eff9; font-size: 16px; }
.plan-catalog-note { margin-top: 28px; color: #586f7d; font-size: 11px; }
.plan-catalog button:focus-visible,
.sidebar button:focus-visible,
dialog button:focus-visible { outline: 3px solid #2376d9; outline-offset: 3px; }

@media (hover:hover) {
  .sidebar .panel-close:hover, dialog .round-button:hover { background: #ffffffe6; }
  .sidebar .interior-plan-preview:hover { box-shadow: 0 0 0 2px #5c9de536, 0 6px 20px #173b5410; }
  .sidebar .primary-button:hover, .saved-card .primary-button:hover { background: linear-gradient(165deg, #398df0, #2167c8); box-shadow: inset 0 1px 0 #ffffff66, 0 7px 18px #226fc333; }
  .sidebar .secondary-button:hover, .saved-card .secondary-button:hover { background: #ffffffa6; }
  .collection-card:not(.active):hover { border-color: #ffffff8c; background: #ffffff50; }
  .plan-filter:not([aria-pressed="true"]):hover { border-color: #fff; background: #ffffffb3; }
  .plan-card:hover { border-color: #c4daf0; transform: translateY(-3px); box-shadow: 0 15px 32px #284e6910; }
}

@media (max-width:1100px) {
  .plan-toolbar { flex-direction: column; align-items: flex-start; gap: 13px; }
  .plan-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .saved-grid { gap: 10px; }
}
@media (max-width:900px) {
  .sidebar .panel-heading { margin-bottom: 16px; padding-bottom: 13px; }
  .sidebar .interior-plan-heading strong { font-size: 25px; }
  .sidebar .interior-plan-preview img { height: min(26dvh, 245px); }
  .plan-catalog-inner { padding: 28px 20px 38px; }
  .plan-intro h1 { font-size: 45px; letter-spacing: -1.8px; }
  .plan-intro p { font-size: 13px; margin-top: 14px; }
  .plan-toolbar { margin-top: 24px; }
  #plan-filters { gap: 4px; width: 100%; }
  .plan-filter { padding: 9px 12px; }
  .plan-card-visual { padding: 19px; aspect-ratio: 1.25; }
  .plan-card-meta { padding: 19px; }
  .plan-card-meta h2 { font-size: 21px; }
  dialog.content-dialog, dialog.interior-plan-dialog { max-height: calc(100dvh - 24px); border-radius: 25px; }
  .content-dialog .dialog-bar, .interior-plan-dialog .dialog-bar { padding: 20px; gap: 15px; }
  dialog .dialog-bar h2 { font-size: 25px; }
  .interior-plan-dialog .dialog-bar h2 { font-size: 21px; }
  .interior-plan-canvas { margin-inline: 14px; padding: 8px 10px; border-radius: 16px; }
  .interior-plan-canvas img { height: min(60dvh, 85vw); }
  #interior-plan-disclaimer { padding: 16px 20px 20px; font-size: 11px; }
}
@media (max-width:600px) {
  .collection-card { grid-template-columns: 108px minmax(0,1fr); }
  .collection-card img { width: 108px; }
  .plan-grid { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .plan-card-visual { aspect-ratio: 1.18; padding: 24px; }
  .plan-card-meta { padding: 22px; }
  .plan-card-meta h2 { font-size: 24px; }
  #plan-filters { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 4px; }
  .plan-filter { padding: 9px 5px; min-width: 0; gap: 5px; font-size: 11px; }
  .saved-grid { grid-template-columns: minmax(0,1fr); gap: 14px; }
  .saved-card { padding: 18px; }
  .saved-card .zone-preview { max-height: 190px; }
  .saved-card .subtext { margin-bottom: 7px; }
  .content-dialog, .interior-plan-dialog { width: calc(100vw - 24px); }
  #saved-content { padding: 0 16px 22px; }
  .review-body { padding: 0 20px 23px; }
  .review-lead { font-size: 16px; }
  .review-item { gap: 12px; padding-block: 18px; }
  .review-item p { font-size: 12px; }
}
@media (max-width:350px) {
  .plan-catalog-inner { padding-inline: 14px; }
  .plan-intro h1 { font-size: 39px; }
  #plan-filters { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .plan-filter { font-size: 11px; padding: 8px 9px; }
  .sidebar .selection-summary { font-size: 10px; gap: 4px; }
  .sidebar .selection-summary span { padding: 5px 7px; }
}
@media (max-height:520px) and (max-width:900px) {
  .sidebar .panel-heading { padding-bottom: 9px; margin-bottom: 12px; }
  .sidebar .interior-plan-preview img { height: 170px; }
  .plan-catalog-inner { padding-top: 20px; }
  .plan-intro h1 { font-size: 36px; }
  .plan-intro p { margin-top: 10px; }
  .plan-toolbar { margin-top: 18px; }
  .content-dialog .dialog-bar, .interior-plan-dialog .dialog-bar { padding: 12px 18px; }
  .interior-plan-dialog .dialog-bar h2 { font-size: 18px; }
  .interior-plan-canvas img { height: 48dvh; }
  #interior-plan-disclaimer { padding: 10px 18px 14px; font-size: 10px; }
}
@media (prefers-reduced-transparency:reduce) {
  .sidebar, dialog.content-dialog, dialog.interior-plan-dialog { background: #f1f7fb; backdrop-filter: none; -webkit-backdrop-filter: none; }
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))) {
  .sidebar, dialog.content-dialog, dialog.interior-plan-dialog { background: #f1f7fb; }
}
@media (prefers-reduced-motion:reduce) {
  .sidebar button, dialog button, .plan-card { transition: none; }
  .plan-card:hover { transform: none; }
}