/* Astrolytics v1.0.1 — canonical black / graphite / gold theme. Loaded last. */
:root{
  /* Core palette */
  --ui-bg:#070707;
  --ui-surface:#101010;
  --ui-surface-2:#161513;
  --ui-surface-3:#0c0c0b;
  --ui-surface-elevated:#1b1a17;
  --ui-border:rgba(232,220,188,.13);
  --ui-border-strong:rgba(205,171,91,.38);
  --ui-text:#f3efe6;
  --ui-muted:#a39d90;
  --ui-muted-2:#938c7e;
  --ui-gold:#c9a85a;
  --ui-gold-bright:#e2c878;
  --ui-gold-dark:#8e7338;
  --ui-accent:var(--ui-gold);
  --ui-accent-2:var(--ui-gold-bright);

  /* Spacing + geometry */
  --ui-space-1:4px;
  --ui-space-2:8px;
  --ui-space-3:12px;
  --ui-space-4:16px;
  --ui-space-5:20px;
  --ui-space-6:24px;
  --ui-radius:14px;
  --ui-radius-sm:10px;
  --ui-radius-xs:8px;
  --ui-radius-pill:999px;
  --ui-shadow:0 14px 34px rgba(0,0,0,.32);
  --ui-shadow-elevated:0 20px 52px rgba(0,0,0,.44);
  --ui-nav-h:72px;
  --ui-focus:0 0 0 3px rgba(226,200,120,.14);

  /* Type scale */
  --ui-type-xs:10px;
  --ui-type-sm:12px;
  --ui-type-md:14px;
  --ui-type-lg:17px;
  --ui-type-xl:20px;

  /* Bridge legacy v0.14 variables into the v0.15 palette. */
  --bg:var(--ui-bg);
  --panel:var(--ui-surface);
  --panel2:var(--ui-surface-2);
  --line:rgba(232,220,188,.15);
  --text:var(--ui-text);
  --muted:var(--ui-muted);
  --accent:var(--ui-gold);
}

html{background:var(--ui-bg);color-scheme:dark}
body{
  background:
    radial-gradient(circle at 50% -14%,rgba(201,168,90,.075),transparent 34%),
    linear-gradient(180deg,#090908 0%,#070707 56%,#050505 100%);
  color:var(--ui-text);
  font-size:var(--ui-type-md);
  line-height:1.45;
  text-rendering:optimizeLegibility;
}
::selection{background:rgba(226,200,120,.25);color:#fffaf0}

h1,h2,h3,.projectname{color:var(--ui-text);letter-spacing:-.012em}
h2{font-weight:800}
h3{color:#ded7c8;font-weight:760}
label{color:var(--ui-muted);font-weight:650;letter-spacing:.01em}
.small,.note,.projectmeta,.gearMeta{color:var(--ui-muted)}
a,.fieldLinkBtn{color:var(--ui-gold-bright)}
.fieldLinkBtn:active{color:#f0dc9c}

.card{
  background:linear-gradient(180deg,rgba(20,20,19,.97),rgba(13,13,12,.98));
  border-color:var(--ui-border);
  border-radius:var(--ui-radius);
  box-shadow:var(--ui-shadow);
}
.uiSurface,.project,.journalGroup,.sessionEntry,.inlineDetails,.projectBreakdown,.materialPlanEditor,.catalogCameraBox{
  border-color:var(--ui-border);
}

input,select,textarea{
  min-height:44px;
  border:1px solid rgba(232,220,188,.18);
  background:#0d0d0c;
  color:var(--ui-text);
  border-radius:var(--ui-radius-sm);
  font-size:var(--ui-type-md);
  caret-color:var(--ui-gold-bright);
  transition:border-color .14s ease,background .14s ease,box-shadow .14s ease;
}
input::placeholder,textarea::placeholder{color:#8f887b}
input:hover,select:hover,textarea:hover{border-color:rgba(232,220,188,.27);background:#11110f}
input:focus,select:focus,textarea:focus{
  border-color:var(--ui-gold-dark);
  box-shadow:var(--ui-focus);
}
select option{background:#11110f;color:var(--ui-text)}
input[type="checkbox"],input[type="radio"]{accent-color:var(--ui-gold)}

button{transition:background .14s ease,border-color .14s ease,color .14s ease,box-shadow .14s ease,transform .08s ease}
button:active{transform:translateY(1px)}
button.primary{
  border:1px solid rgba(226,200,120,.58);
  background:linear-gradient(180deg,#d6ba6d 0%,#b8954c 100%);
  color:#11100c;
  border-radius:var(--ui-radius-sm);
  box-shadow:0 8px 22px rgba(201,168,90,.12);
  font-weight:820;
}
button.primary:hover{background:linear-gradient(180deg,#e0c77c 0%,#c5a253 100%);border-color:rgba(240,220,156,.74)}
button.secondary{
  border:1px solid rgba(232,220,188,.18);
  background:#151513;
  color:#ddd6c8;
  border-radius:var(--ui-radius-sm);
  box-shadow:none;
}
button.secondary:hover{border-color:rgba(201,168,90,.38);background:#1a1916;color:#f0e9dc}
button.danger{border-color:rgba(255,124,124,.26);background:#251719;color:#f3b5bc;box-shadow:none}
button:disabled,input:disabled,select:disabled,textarea:disabled{opacity:.48;cursor:not-allowed}

button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,a:focus-visible,summary:focus-visible,[tabindex]:focus-visible{
  outline:2px solid var(--ui-gold-bright);
  outline-offset:2px;
}

/* Selected / active state contract: gold indicates choice, not decoration. */
.selected,
.projectTabs button.active,
.bottomNav .tab.active,
[aria-selected="true"],
[aria-pressed="true"]{
  border-color:var(--ui-border-strong);
  background:rgba(201,168,90,.11);
  color:#f0dfad;
}
.bottomNav{
  background:rgba(8,8,7,.94);
  border-top-color:rgba(232,220,188,.11);
  box-shadow:0 -12px 34px rgba(0,0,0,.40);
  backdrop-filter:blur(18px) saturate(112%);
}
.bottomNav .tab{color:#858077}
.bottomNav .tab.active .navIcon{color:var(--ui-gold-bright)}
.bottomNav .tab.active{box-shadow:inset 0 0 0 1px rgba(201,168,90,.10)}
@media(min-width:760px){.bottomNav{border-color:rgba(232,220,188,.12)}}

/* Home remains restrained: warm light, no blue/violet glow. */
.homePage::before{background:radial-gradient(circle,rgba(201,168,90,.14),rgba(201,168,90,0) 70%)}
.homePage::after{background:radial-gradient(circle,rgba(155,128,66,.07),rgba(155,128,66,0) 70%)}
.homeLogoWrap{
  background:linear-gradient(145deg,rgba(201,168,90,.15),rgba(255,255,255,.025));
  border-color:rgba(226,200,120,.20);
  box-shadow:0 20px 60px rgba(0,0,0,.42),inset 0 1px 0 rgba(255,255,255,.08);
}
.homeAppName{color:var(--ui-text)}
.homeVersion{color:var(--ui-muted-2)}

/* Common legacy surfaces and controls. */
.results{background:#11110f;border-color:rgba(232,220,188,.20)}
.res{border-bottom-color:rgba(232,220,188,.09)}
.res:active,.res:hover{background:#1a1916}
.selected{border-radius:var(--ui-radius-sm)}
.status,.metric,.darkQuick,.darkMatch,.projectContext,.insightBox,.dataBox{background:#0f0f0e;border-color:rgba(232,220,188,.14)}
.metric{border-radius:var(--ui-radius-sm)}
.progress{background:#24221d}
.progress>div{background:linear-gradient(90deg,var(--ui-gold-dark),var(--ui-gold-bright))}
.material .chip,.badge,.statusBadge,.projectCompactMeta span,.equipmentCount{
  background:#191816;
  border-color:rgba(232,220,188,.13);
  color:#c9c2b5;
}
.customTag{color:#d4bc7a}

/* Gold only where selection or emphasis is meaningful. Semantic success/warn/error stay semantic. */
.projectCreateIntent,.sessionIntegrationPreview,.equipmentFormPanel{
  border-color:rgba(201,168,90,.20);
  background:rgba(201,168,90,.055);
}
.projectCreateIntent .uiIcon,.plannerMapEmptyIcon,.equipmentSectionIcon{color:var(--ui-gold-bright)}
.projectEmptyState .projectEmptyIcon,.plannerMapEmptyIcon,.equipmentSectionIcon{
  border-color:rgba(201,168,90,.20);
  background:rgba(201,168,90,.065);
}
.journalCountBadge{background:rgba(201,168,90,.08);color:#d8c487}
.sessionHighlight{border-color:rgba(201,168,90,.44);box-shadow:0 0 0 2px rgba(201,168,90,.08)}

/* Setup and season values are descriptive; warning/error states stay semantic. */
#setupInsight.good,#seasonPeakInsight.good{background:var(--ui-surface);border-color:var(--ui-border);color:var(--ui-text)}
#setupInsight.good .v,#seasonPeakInsight.good .v{color:var(--ui-text)}
#setupInsight .seasonPeak,#seasonPeakInsight .seasonPeak{grid-template-columns:repeat(2,minmax(0,1fr))}
#setupInsight .seasonPeak>div,#seasonPeakInsight .seasonPeak>div{min-width:0;overflow-wrap:anywhere}
@media(max-width:520px){
  #setupInsight .seasonPeak>div:first-child,#setupInsight .seasonPeak>div:last-child{grid-column:1/-1}
}
@media(pointer:coarse),(max-width:520px){
  .materialComponentDelete,.mosaicPanelDelete,.mosaicMiniDelete{min-height:44px;min-width:44px}
}

/* Graphite disclosure surfaces. */
.projectCardV2,.equipmentSection,.journalGroup{
  background:linear-gradient(180deg,rgba(18,18,17,.96),rgba(12,12,11,.98));
}
.projectDetailSummary,.projectEditDetails,.projectPeerDetails,.sessionDisclosure,.plannerMapAdvanced{
  background:rgba(14,14,13,.82);
  border-color:var(--ui-border);
}
.equipmentSection[open]>summary,.journalGroup>summary:hover,.journalGroup[open]>summary,.projectPeerDetails[open]>summary{
  background:rgba(201,168,90,.045);
}
.plannerPanel>summary,.plannerMapAdvanced>summary,.sessionDisclosure>summary,.projectPeerDetails>summary,.equipmentSection>summary{
  color:#e5ded0;
}
.plannerPanel>summary::after,.plannerMapAdvanced>summary::after,.sessionDisclosure>summary::after,.projectPeerDetails>summary::after{
  color:#a99158;
}

/* Mosaic editor: neutral graphite structure, gold disclosure cue. */
.mosaicPanelCard{border-color:rgba(232,220,188,.15);background:#0d0d0c}
.mosaicPanelSummary{background:#121210}
.mosaicPanelCard[open]>.mosaicPanelSummary{background:#191816;border-bottom-color:rgba(232,220,188,.14)}
.mosaicPanelSummary::after,.mosaicGoalLabel span{color:#a99158}
.mosaicDerivedGoal{color:#d2cabd;background:#141310}
.mosaicPanelMaterialEditor{border-top-color:rgba(232,220,188,.12)}
.mosaicPanelMaterialRow,.mosaicNestedProgress{border-color:rgba(232,220,188,.13);background:#0d0d0c}
.mosaicNestedProgressItem{border-top-color:rgba(232,220,188,.10)}

/* Modal / sticky action surfaces. */
.modal{background:#121210;border-color:rgba(232,220,188,.20);box-shadow:var(--ui-shadow-elevated)}
.closeBtn{border-color:rgba(232,220,188,.18);background:#171614;color:#e5ded0}
.modalBackdrop{background:rgba(0,0,0,.80)}
.sessionSaveBar{
  border-top-color:rgba(232,220,188,.12);
  background:linear-gradient(180deg,rgba(17,17,15,.94),rgba(9,9,8,.99) 24%);
}

/* Consistent compact geometry without changing page hierarchy. */
.card,.projectCardV2,.equipmentSection,.journalGroup{border-radius:var(--ui-radius)}
input,select,textarea,button.primary,button.secondary{border-radius:var(--ui-radius-sm)}
.projectTabs button,.closeBtn,.darkMatch,.geoStatus,.calStatus{border-radius:var(--ui-radius-sm)}
.badge,.statusBadge,.catalogStatus,.journalCountBadge,.equipmentCount{border-radius:var(--ui-radius-pill)}

/* Shared rhythm tokens applied without changing section order. */
.grid,.grid3{gap:var(--ui-space-3)}
.actions{gap:var(--ui-space-2);margin-top:var(--ui-space-3)}
.card{margin-bottom:var(--ui-space-3)}
.uiSectionHead{gap:var(--ui-space-3)}

/* Final theme normalization */
/* Neutral structure stays graphite; gold marks selection/emphasis. Semantic good/warn/bad colors remain unchanged. */

/* Projects — remove legacy navy from inactive tabs and top-level metadata. */
.projectTabs button{
  border-color:var(--ui-border);
  background:#141412;
  color:var(--ui-muted);
  box-shadow:none;
}
.projectTabs button:hover{border-color:rgba(201,168,90,.30);background:#1a1916;color:#ded6c7}
.projectTabs button.active{
  border-color:var(--ui-border-strong);
  background:rgba(201,168,90,.12);
  color:#f0dfad;
  box-shadow:inset 0 0 0 1px rgba(201,168,90,.08);
}
.projectCardTarget{color:#d0c8ba}
.projectProgressTop strong{color:var(--ui-text)}
.projectProgressTop b{color:var(--ui-gold-bright)}
.projectCardV2 .statusBadge{background:#191816;color:#c9c2b5}
.projectCardV2 .status-planned{border-color:rgba(201,168,90,.30);background:rgba(201,168,90,.09);color:#d9c27e}
.projectDetailsV2{border-top-color:rgba(232,220,188,.11)}
.projectDetailsV2>summary,.projectEditDetails>summary{color:#d9d1c4}
.projectDetailsHint{color:var(--ui-muted-2)}
.projectDetailSummary{background:rgba(14,14,13,.82);border-color:var(--ui-border)}
.projectPeerDetails>summary::after,.projectDetailsV2>summary .projectActionIcon{color:#ae9457}

/* Material plan / project details — all structural blue becomes graphite. */
.materialPlanEditor,
.materialComponentCard,
.materialPlanSummary,
.projectBreakdown,
.framePlanRow,
.catalogCameraBox{
  background:#0f0f0e;
  border-color:rgba(232,220,188,.14);
}
.materialPlanSummary{color:#d8d0c2}
.materialComponentCard>summary,
.projectBreakdown>summary{color:#ddd5c7}
.materialComponentCard>summary:before,
.projectBreakdown>summary:before{color:#ad9254}
.materialComponentBody,
.projectBreakdownBody,
.materialPlanProgress,
.mosaicPanelMaterialEditor{border-color:rgba(232,220,188,.11)}
.framePlanRow .framePlanMain{color:#e5ded0}
.plannedTermLabel,.catalogCameraPreview{color:#bdb5a8}
.projectTypeBadge,.cameraKindBadge,.cameraSourceBadge{
  background:#191816;
  border-color:rgba(232,220,188,.14);
  color:#c9c2b5;
}
.cameraSourceBadge{border-color:rgba(201,168,90,.25);color:#d8c487}

/* Shared disclosure/session surfaces that still inherited blue legacy values. */
.sessionEntry,.sessionDetailSection,.moonEventGrid>div,.moonRows>div,.seasonPeak>div{
  background:#0f0f0e;
  border-color:rgba(232,220,188,.13);
}
.sessionEntry[open]>summary,.sessionDetails,.sessionDetails[open]>summary,.sessionDetailSection[open]>summary{
  border-color:rgba(232,220,188,.11);
}
.sessionDetails>summary,.sessionDetailSection>summary{color:#d9d1c4}
.sessionDetailSection h4,.detailPair b{color:#e5ded0}
.sessionIntegrationPreview b{color:#e5ded0}
.sessionIntegrationPreview span{color:#b9b1a4}
.sessionDisclosure>summary{color:#ddd5c7}
.sessionDisclosure>summary>small{color:var(--ui-muted-2)}
.sessionDisclosure>summary::after{color:#ad9254}
.journalNote{border-left-color:var(--ui-gold-dark);background:#12110f;color:#d6cec0}

/* Equipment / Journal — neutral text and surfaces instead of residual cool blue. */
.equipmentSection>summary::after{border-color:#948b7b}
.equipmentSectionTitle small,.equipmentHint,.equipmentFormHead span,.journalNotice{color:var(--ui-muted)}
.equipmentFormHead b,.journalGroupMain>b{color:var(--ui-text)}
.equipmentSection .gearItem,.equipmentCatalogBox,.journalSessionCard{
  background:rgba(12,12,11,.82);
  border-color:rgba(232,220,188,.11);
}
.equipmentSection .gearItem:last-child{border-bottom-color:rgba(232,220,188,.11)}
.equipmentSection .empty{border-color:rgba(232,220,188,.13);background:rgba(12,12,11,.56)}
.journalGroupRight,.sessionHours{color:#d8d0c2}
.journalGroupRight .projectActionIcon{color:#9e927d}
.journalSessionCard .sessionDetails>summary{color:#c9c1b4}

/* Setup chooser — warm-neutral hierarchy. */
.setupChooserHead b{color:#e4dccf}
.setupChooserDivider{color:#827b70}
.setupChooserDivider::before,.setupChooserDivider::after,
.newProjectSetupChooser,.projectEditSetupChooser,.plannerMapSetup{border-color:rgba(232,220,188,.10)}
.setupChooserPreview{background:rgba(12,12,11,.60);color:#a9a195}
.setupChooserPreview.good{color:#d8c487;background:rgba(201,168,90,.065)}
.projectTargetInput[readonly]{color:#ddd5c7;background:#141310}

/* Framing preview / map chrome — graphite shell, no navy panels. */
.framingPreview,
.framingDataDetails,
.framingInfo{
  background:#0d0d0c;
  border-color:rgba(232,220,188,.15);
}
.framingPreviewHead,.framingDataBody{border-color:rgba(232,220,188,.11)}
.framingPreviewCanvas,
.framingStage,
.projectSnapshotHost{
  background:#080807;
}
.framingStage{border-color:rgba(232,220,188,.16)}
.framingInfo{color:#cfc7ba}
.framingDataDetails>summary{color:#d9d1c4}
.framingDataDetails>summary:before{color:#ad9254}
.framingPanelCoord{background:#10100f;border-color:rgba(232,220,188,.13);color:var(--ui-muted)}
.framingPanelCoord b,.framingPanelCoord code{color:#e4dccf}
.framingMapControls button{background:rgba(14,14,13,.94);border-color:rgba(232,220,188,.17);color:#d8d0c2}
.framingMoveMode button.active,.framingPreviewBtn.active{border-color:var(--ui-border-strong);background:rgba(201,168,90,.12);color:#f0dfad}
.framingZoomButtons output{background:rgba(8,8,7,.82);color:#c9c1b4}
/* Keep related controls together; narrow screens use two deliberate rows. */
#plannerMapControls .framingMapControls{position:static;inset:auto;z-index:auto;pointer-events:auto;justify-content:flex-start;margin-top:6px;gap:6px 8px}
#plannerMapControls .framingMoveMode,#plannerMapControls .framingViewButtons,#plannerMapControls .framingZoomButtons{display:flex;align-items:center;flex:0 0 auto;gap:5px}
#plannerMapControls .framingZoomButtons{margin-left:auto}
#plannerMapControls .framingCenterViewBtn{flex:1 0 100%}
#plannerMapControls button{min-width:44px;min-height:44px;padding:6px 8px;border-radius:8px;font-weight:650;touch-action:manipulation}
#plannerMapControls .framingMoveMode button{font-size:12px}
#plannerMapControls .framingPreviewBtn{display:flex;align-items:center;justify-content:center;padding:6px}
#plannerMapControls .framingFullscreenBtn{display:flex;align-items:center;justify-content:center;padding:6px}
#plannerMapControls .framingFullscreenBtn .uiIcon{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.framingFullscreenBtn.active{border-color:var(--ui-border-strong);background:rgba(201,168,90,.12);color:#f0dfad}

body.plannerMapFullscreenOpen{overflow:hidden;overscroll-behavior:none}
#plannerMapCard.plannerMapFullscreen{
  position:fixed;
  inset:0;
  z-index:10000;
  display:flex;
  flex-direction:column;
  width:100vw;
  height:100vh;
  height:100dvh;
  max-width:none;
  margin:0;
  padding:max(8px,env(safe-area-inset-top)) max(8px,env(safe-area-inset-right)) max(8px,env(safe-area-inset-bottom)) max(8px,env(safe-area-inset-left));
  border:0;
  border-radius:0;
  background:#080807;
  box-shadow:none;
  overflow:hidden;
}
#plannerMapCard.plannerMapFullscreen>.sectionTitleRow,
#plannerMapCard.plannerMapFullscreen>#plannerMapSetup,
#plannerMapCard.plannerMapFullscreen>#plannerMapModeSwitch,
#plannerMapCard.plannerMapFullscreen>.framingLegend,
#plannerMapCard.plannerMapFullscreen>.plannerMapHelp,
#plannerMapCard.plannerMapFullscreen>#plannerMapFrameTools,
#plannerMapCard.plannerMapFullscreen>#plannerMapSaveNote,
#plannerMapCard.plannerMapFullscreen>#plannerMapInfo,
#plannerMapCard.plannerMapFullscreen>#plannerMapSaveActions{display:none!important}
#plannerMapCard.plannerMapFullscreen>#skySurveyControls{
  flex:0 0 auto;
  margin:0 0 6px;
  padding:0 0 6px;
  border-top:0;
}
#plannerMapCard.plannerMapFullscreen>#skySurveyControls .skySurveyMain{grid-template-columns:auto minmax(0,1fr)}
#plannerMapCard.plannerMapFullscreen>.astroRasterShell{
  flex:1 1 0;
  min-height:0;
  height:auto;
}
#plannerMapCard.plannerMapFullscreen .plannerMapStage{
  width:100%;
  height:100%;
  min-height:0;
  border-radius:10px;
}
#plannerMapCard.plannerMapFullscreen>#plannerMapControls{flex:0 0 auto;width:100%;min-width:0}
#plannerMapCard.plannerMapFullscreen #plannerMapControls .framingMapControls{
  display:grid;
  grid-template-columns:auto auto minmax(136px,1fr);
  align-items:center;
  justify-content:stretch;
  gap:6px;
  width:100%;
  min-width:0;
  margin-top:6px;
}
#plannerMapCard.plannerMapFullscreen #plannerMapControls .framingMoveMode{justify-self:start}
#plannerMapCard.plannerMapFullscreen #plannerMapControls .framingPreviewBtn,
#plannerMapCard.plannerMapFullscreen #plannerMapControls .framingExportBtn,
#plannerMapCard.plannerMapFullscreen #plannerMapControls .framingFullscreenBtn{width:44px;min-width:44px}
#plannerMapCard.plannerMapFullscreen #plannerMapControls .framingZoomButtons{
  display:grid;
  grid-template-columns:44px minmax(46px,1fr) 44px;
  gap:5px;
  min-width:136px;
  margin-left:0;
}
#plannerMapCard.plannerMapFullscreen #plannerMapControls .framingZoomButtons output{display:grid;place-items:center;min-width:0}
#plannerMapCard.plannerMapFullscreen #plannerMapControls .framingCenterViewBtn{display:none}
@media(max-width:520px){
  #plannerMapControls .framingMapControls{display:grid;grid-template-columns:minmax(0,1fr) auto}
  #plannerMapControls .framingViewButtons{justify-self:end}
  #plannerMapControls .framingZoomButtons{grid-column:1/-1;justify-self:center;margin-left:0}
  #plannerMapControls .framingCenterViewBtn{grid-column:1/-1}
  #plannerMapCard.plannerMapFullscreen{padding:max(5px,env(safe-area-inset-top)) max(5px,env(safe-area-inset-right)) max(5px,env(safe-area-inset-bottom)) max(5px,env(safe-area-inset-left))}
  #plannerMapCard.plannerMapFullscreen #plannerMapControls .framingMapControls{
    grid-template-columns:minmax(0,1fr) auto;
    grid-template-rows:44px 44px;
    gap:6px;
  }
  #plannerMapCard.plannerMapFullscreen #plannerMapControls .framingMoveMode{
    grid-column:1;
    grid-row:1;
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    width:100%;
    min-width:0;
    gap:5px;
  }
  #plannerMapCard.plannerMapFullscreen #plannerMapControls .framingMoveMode button{
    width:100%;
    min-width:0;
    min-height:44px;
  }
  #plannerMapCard.plannerMapFullscreen #plannerMapControls .framingViewButtons{grid-column:2;grid-row:1}
  #plannerMapCard.plannerMapFullscreen #plannerMapControls .framingZoomButtons{
    grid-column:1/-1;
    grid-row:2;
    grid-template-columns:44px 56px 44px;
    justify-self:center;
    width:154px;
    min-width:154px;
    margin:0;
  }
  #plannerMapCard.plannerMapFullscreen>#skySurveyControls .skySurveyStatus,
  #plannerMapCard.plannerMapFullscreen>#skySurveyControls .skySurveyCredit,
  #plannerMapCard.plannerMapFullscreen>#skySurveyControls #skySurveyStretchError,
  #plannerMapCard.plannerMapFullscreen>#skySurveyControls #skySurveyRetry{display:none}
}

#plannerMapControls .framingPreviewBtn .uiIcon{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
#plannerMapControls output{min-width:45px;padding:6px 2px;font-size:11px;font-variant-numeric:tabular-nums}
/* Compact framing controls; retain finger-sized targets and the existing modes. */
#plannerMapControls .framingCenterViewBtn{font-size:12px}
#plannerMapFrameTools{margin-top:6px;padding:0;border-radius:10px}
#plannerMapFrameTools>summary{min-height:44px;box-sizing:border-box;padding:6px 10px;font-size:12px}
#plannerMapFrameTools>.plannerMapRotation{display:flex;align-items:center;gap:8px;margin:4px 10px 0}
#plannerMapFrameTools .plannerMapRotation label{flex:0 0 auto;margin:0;font-size:12px}
#plannerMapFrameTools .plannerMapToolRow{flex:1;min-width:0;grid-template-columns:minmax(0,1fr) 38px;gap:6px}
#plannerMapFrameTools .plannerMapToolRow input{min-width:0;min-height:44px}
#plannerMapFrameTools .plannerMapToolRow output{font-size:12px}
#plannerMapFrameTools .plannerMapActions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;margin:4px 10px 0}
#plannerMapFrameTools .plannerMapActions button{min-width:0;min-height:44px;padding:6px 8px;border-radius:8px;font-size:12px;font-weight:650;line-height:1.2;touch-action:manipulation}
#plannerMapCenterFrameBtn{grid-column:1/-1}
#plannerMapMosaicTools{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;margin-top:6px}
#plannerMapMosaicTools label{font-size:11px}
#plannerMapMosaicTools input{min-width:0;padding:6px 8px;font-size:12px}
#plannerFrameDataDetails{margin-top:6px;border:0;border-top:1px solid var(--ui-border);border-radius:0;background:transparent}
#plannerFrameDataDetails>summary{min-height:44px;box-sizing:border-box;padding:6px 10px;font-size:12px}
#plannerMapSaveNote{margin-top:6px;line-height:1.35}
#plannerMapInfo{margin-top:6px;padding:6px 8px;line-height:1.4}
@media(min-width:760px){
  #plannerMapControls .framingCenterViewBtn{flex:0 1 auto}
  #plannerMapFrameTools .plannerMapActions{grid-template-columns:repeat(3,minmax(0,1fr))}
  #plannerMapCenterFrameBtn{grid-column:auto}
}
.framingLegend .stars:before{background:#eee8dc;box-shadow:0 0 5px rgba(238,232,220,.25)}
.framingLegend .dso:before{border-color:#b99a55}

.plannerSavedLocationField{margin-top:14px;min-width:0}
.plannerSavedLocationField select{width:100%;min-height:44px}

/* SVG framing overlay: frame = gold, grid = warm neutral. Geometry is untouched. */
.frPanel>path:not(.frFrameHandle){
  fill:rgba(201,168,90,.075);
  stroke:var(--ui-gold);
}
.frPanel:first-of-type>path:not(.frFrameHandle){stroke:var(--ui-gold-bright)}
/* Keep the Planner frame subtle without shrinking its invisible drag handle. */
#plannerMapStage .frPanel>path:not(.frFrameHandle){
  fill:rgba(201,168,90,.03);
  stroke-width:1px;
  stroke-opacity:.7;
}
.frPanel>circle{fill:var(--ui-gold-bright)}
.frPanel>text{fill:#eee5d2}
.frCenter>circle:not(.frFrameHandle){fill:var(--ui-gold-bright)}
.frGrid path{stroke:rgba(190,181,164,.22)}
.frGrid text{fill:#c8c0b2;stroke:#080807}
.frOrient{fill:#a39d90}

/* Generic residual legacy surfaces. */
canvas{background:#0b0b0a;border-color:rgba(232,220,188,.14)}
.catalogBrowseHead{background:#121210;border-bottom-color:rgba(232,220,188,.13);color:#c9c1b4}
.catalogStatus{background:#141310;border-color:rgba(232,220,188,.14);color:#a9a195}
#catalogStatus{display:none}
.calStatus,.darkMatch{background:#10100f;border-color:rgba(232,220,188,.14)}

/* Final theme normalization */
/* Targeted overrides for legacy disclosures and runtime-injected neutral status chrome. */

/* Legacy inline disclosures: planner coordinates, location, material/mosaic forms and filter spectral editor. */
details.inlineDetails{
  background:#0f0f0e;
  border-color:rgba(232,220,188,.15);
  color:var(--ui-text);
}
details.inlineDetails>summary{
  color:#ddd5c7;
}
details.inlineDetails[open]>summary{
  color:#e5ded0;
}
details.inlineDetails .dataBox,
#filterSpectralDetails [data-filter-band-row]{
  background:#0d0d0c;
  border-color:rgba(232,220,188,.14);
}

/* Bortle indicator injects its own stylesheet at runtime; force the neutral design-system surface. */
body .bortleIndicator{
  background:#10100f;
  border-color:rgba(232,220,188,.14);
  color:var(--ui-muted);
  box-shadow:none;
}
body .bortleIndicator b{
  color:#d8d0c2;
}
body .bortleIndicator[data-state="loading"] b{
  color:#b9b1a4;
}
body .bortleIndicator[data-state="error"] b{
  color:#a39d90;
}

/* Final theme normalization */

/* Recommendation surfaces: neutral graphite, gold emphasis only. */
.plannerRecommendationsWrap{
  background:#0f0f0e;
  border-color:rgba(232,220,188,.16);
}
.recommendationSectionHead h3{
  color:var(--ui-text);
}
.recommendationCount,
.recommendationStatus{
  color:var(--ui-muted);
}
.recommendationContext{
  background:#0c0c0b;
  border-color:rgba(232,220,188,.13);
  color:#b9b1a4;
}
.recommendationItem{
  background:#0d0d0c;
  border-color:rgba(232,220,188,.15);
}
.recommendationScore{
  background:#17150f;
  border-color:rgba(201,168,90,.42);
  color:var(--ui-gold-bright);
}
.recommendationChevron{
  color:var(--ui-gold);
}
.recommendationBody{
  border-top-color:rgba(232,220,188,.12);
}
.recommendationReason{
  color:#d8d0c2;
}
.recommendationReason b{
  color:var(--ui-text);
}
.recommendationEmpty{
  border-color:rgba(232,220,188,.18);
  color:var(--ui-muted);
}

/* App version / legal / repository chrome: warm neutral, never legacy blue. */
.homeVersion,
footer{
  color:var(--ui-muted-2);
}
#gearAbout .dataBox,
#gearAbout .small{
  color:var(--ui-muted);
}
#gearAbout a,
#gearAbout a[style]{
  color:#b9b1a4;
}
#gearAbout a:hover,
#gearAbout a:focus-visible{
  color:var(--ui-gold-bright);
}


/* Project identity belongs with target selection. */
.plannerTargetFields{display:grid;grid-template-columns:minmax(0,1fr);gap:12px;border-top:1px solid var(--ui-line,var(--line,#34352e));margin-top:16px;padding-top:14px}
/* Observing location picker: native dialog keeps the map above the bottom nav. */
#locationPicker{color:var(--ui-text,#e9e6d8);background:var(--ui-panel,#141510);border:1px solid var(--ui-border,#38392f);border-radius:20px;padding:0;width:min(760px,calc(100vw - 32px));height:min(850px,calc(100dvh - 32px));max-width:none;max-height:none;margin:auto;overflow:hidden;box-shadow:0 24px 80px #0009}
#locationPicker::backdrop{background:#000b}
#locationPicker .locationPickerLayout{height:100%;display:grid;grid-template-rows:auto auto minmax(0,1fr) auto;grid-template-areas:"heading" "toolbar" "map" "actions";min-height:0}
#locationPicker .locationPickerHeader{grid-area:heading;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 16px 6px}
#locationPicker h2{font-size:20px;margin:0}
#locationPicker button{touch-action:manipulation;min-height:44px;font:inherit;cursor:pointer}
#locationPicker button:focus-visible{outline:2px solid #dfc66f;outline-offset:2px}
#locationPickerClose{width:44px;flex:0 0 44px;padding:0;font-size:28px;line-height:1}
#locationPicker .locationPickerToolbar{grid-area:toolbar;display:flex;align-items:center;gap:12px;padding:8px 16px 12px}
#locationPicker .locationPickerModes{display:flex;gap:4px;flex:1;min-width:0;padding:3px;border:1px solid #484637;border-radius:12px;background:#0b0d09}
#locationPicker .locationPickerModes button{flex:1;min-width:0;padding:7px 10px;border:1px solid transparent;border-radius:8px;background:transparent;color:#c5c2b5;font-size:14px}
#locationPicker .locationPickerModes button[aria-pressed="true"]{color:#f0dfa5;background:#302919;border-color:#8e7b42}
#locationPickerGps{font-size:13px;padding:9px 12px;white-space:nowrap}
#locationPicker .locationPickerMapWrap{grid-area:map;position:relative;min-height:0;isolation:isolate;background:#222822}
#locationPickerMapCanvas{position:absolute;inset:0;height:100%;width:100%;background:#222822;touch-action:none;color:#202020}
#locationPickerLoading{position:absolute;inset:0;z-index:1100;display:flex;align-items:center;justify-content:center;text-align:center;padding:24px;color:#e8dfbe;background:#182017}
#locationPickerLoading[hidden]{display:none}
#locationPicker .locationPickerFooter{grid-area:actions;min-width:0;margin:0;width:100%;padding:12px 16px max(12px,env(safe-area-inset-bottom));background:#141510}
#locationPicker .locationPickerReadout{display:flex;align-items:baseline;justify-content:space-between;gap:8px;font-size:14px;font-variant-numeric:tabular-nums}
#locationPickerBortle{color:#dfc66f;white-space:nowrap}
#locationPickerCoords{overflow-wrap:anywhere}
#locationPicker .locationPickerFooter p{margin:6px 0;font-size:12px;line-height:1.4;color:#b6b5a8}
#locationPickerSource{font-size:11px;color:#969a8d}
#locationPickerUse{width:100%;margin-top:6px;background:#d6bb6c;color:#1a170e;border:1px solid #e5ca7b;border-radius:12px;font-weight:700;min-height:48px}
#locationPicker .leaflet-control-attribution{max-width:min(100%,500px);font-size:11px;line-height:1.3;color:#242424;background:rgba(255,255,255,.88);padding:2px 5px}
#locationPicker .leaflet-control-attribution a{color:#174c69}
#locationPicker .leaflet-control-zoom a{background:#181b15;color:#e9ddb4;border-color:#505347;text-decoration:none;box-shadow:none}
#locationPicker .locationPickerPin{background:transparent;border:0;filter:drop-shadow(0 2px 2px #0009)}
#locationPicker .locationPickerPin span{position:absolute;left:2px;top:0;width:26px;height:26px;background:#e4c669;border:3px solid #fff;border-radius:50% 50% 50% 0;transform:rotate(-45deg)}
#locationPicker .locationPickerPin span::after{content:"";position:absolute;inset:5px;border-radius:50%;background:#29271b}
@media(max-width:650px){
  #locationPicker{width:100vw;height:100dvh;border:0;border-radius:0;inset:0}
  #locationPicker .locationPickerHeader{padding-top:max(10px,env(safe-area-inset-top))}
}
@media(max-height:500px){
  #locationPicker{height:100dvh;width:100vw;border-radius:0;border:0}
  #locationPicker .locationPickerHeader{padding:4px 12px}
  #locationPicker h2{font-size:17px}
  #locationPicker .locationPickerToolbar{padding:2px 12px 6px}
  #locationPicker .locationPickerFooter{padding:6px 12px}
  #locationPicker .locationPickerFooter{display:grid;grid-template-columns:1fr auto;gap:2px 12px}
  #locationPicker .locationPickerReadout,#locationPickerStatus,#locationPickerSource{grid-column:1}
  #locationPickerUse{grid-column:2;grid-row:1/4;margin:0;width:auto;padding:8px 16px;align-self:center}
}

/* Compact recommendation summaries shared by saved projects and catalogue targets.
   Structured rows replace the legacy single sentence and duplicate text indents. */
#plannerRecommendationsPanel .recommendationItem>summary.recommendationSummary{display:grid;grid-template-columns:64px minmax(0,1fr) 10px;column-gap:12px;row-gap:0;align-items:start;padding:12px}
#plannerRecommendationsPanel .recommendationItem .recommendationScoreCell{width:64px;min-width:0;margin:0;padding:0;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:4px}
#plannerRecommendationsPanel .recommendationItem .recommendationScoreCell .astroInfoBtn{position:static;flex:0 0 auto;background:transparent}
#plannerRecommendationsPanel .recommendationItem .recommendationMain{min-width:0;padding:0;align-self:start}
#plannerRecommendationsPanel .recommendationItem .recommendationName{display:block;margin:0;font-size:14px;line-height:1.35;white-space:normal;overflow:visible;text-overflow:clip;overflow-wrap:anywhere}
#plannerRecommendationsPanel .recommendationItem .recommendationMeta{display:block;margin-top:3px;font-size:11px;line-height:1.4;color:var(--ui-muted);overflow-wrap:anywhere}
#plannerRecommendationsPanel .recommendationItem .recommendationMeta:empty{display:none}
#plannerRecommendationsPanel .recommendationItem .recommendationQuickStats{display:grid;gap:4px;margin-top:8px;color:var(--ui-muted);font-size:11px;line-height:1.45;white-space:normal}
#plannerRecommendationsPanel .recommendationItem .recommendationQuickStats span{margin:0;font:inherit;color:inherit}
#plannerRecommendationsPanel .recommendationItem .recommendationQuickStats .recommendationTimeWindow{font-size:12px;font-weight:650;color:var(--ui-text);font-variant-numeric:tabular-nums;white-space:nowrap}
#plannerRecommendationsPanel .recommendationItem .recommendationQuickStats .recommendationConditions{display:flex;flex-wrap:wrap;gap:2px 10px}
#plannerRecommendationsPanel .recommendationItem .recommendationQuickStats .recommendationUsable{display:flex;flex-wrap:wrap;gap:0 4px}
#plannerRecommendationsPanel .recommendationItem .recommendationQuickStats .recommendationDuration,
#plannerRecommendationsPanel .recommendationItem .recommendationQuickStats .recommendationAltitude,
#plannerRecommendationsPanel .recommendationItem .recommendationQuickStats .recommendationUsableLabel,
#plannerRecommendationsPanel .recommendationItem .recommendationQuickStats .recommendationUsableValue{white-space:nowrap}
#plannerRecommendationsPanel .recommendationItem .recommendationChevron{align-self:center;justify-self:center;margin:0}
#plannerRecommendationsPanel .recommendationItem>summary.recommendationSummary:focus-visible{outline:2px solid var(--ui-gold-bright);outline-offset:-3px;border-radius:11px}
@media(max-width:430px){
  #plannerRecommendationsPanel .recommendationItem>summary.recommendationSummary{grid-template-columns:58px minmax(0,1fr) 10px;column-gap:10px;padding:12px 10px}
  #plannerRecommendationsPanel .recommendationItem .recommendationScoreCell{width:58px}
}


/* Astrolytics v1.0 — consistent Planner section headings.
   Decorative SVG masks are embedded here; no requests, timers or DOM changes.
   Preserve the existing weather icon and native <summary> disclosure controls. */
#planner{
  --planner-heading-size:15px;
  --planner-heading-weight:800;
  --planner-heading-line:22px;
  --planner-heading-icon-size:19px;
  --planner-heading-gap:9px;
}
#planner :is(
  #plannerNightPanel > summary > span,
  #plannerWeatherPanel > summary > .weatherSummaryTitle,
  #plannerRecommendationsCard > summary > span,
  #plannerRecommendationsPanel > summary > span,
  #plannerTargetPanel > summary > span,
  #plannerMapPanel > summary > span,
  #plannerVisibilityCard > summary > span,
  #newProjectCard > summary > span,
  #plannerAnalysisPanel > summary > span,
  #setupInsight > b:first-child
){
  display:flex;
  align-items:center;
  gap:var(--planner-heading-gap);
  min-width:0;
  color:var(--ui-text);
  font-size:var(--planner-heading-size);
  font-weight:var(--planner-heading-weight);
  line-height:var(--planner-heading-line);
  letter-spacing:normal;
  white-space:normal;
  overflow-wrap:anywhere;
}
#planner :is(
  #plannerNightPanel > summary > span,
  #plannerWeatherPanel > summary > .weatherSummaryTitle,
  #plannerRecommendationsCard > summary > span,
  #plannerRecommendationsPanel > summary > span,
  #plannerTargetPanel > summary > span,
  #plannerMapPanel > summary > span,
  #plannerVisibilityCard > summary > span,
  #newProjectCard > summary > span,
  #plannerAnalysisPanel > summary > span,
  #setupInsight > b:first-child
):not(.weatherSummaryTitle)::before{
  content:"";
  display:block;
  flex:0 0 var(--planner-heading-icon-size);
  width:var(--planner-heading-icon-size);
  height:var(--planner-heading-icon-size);
  background-color:var(--ui-gold);
  -webkit-mask:var(--planner-section-icon) center / contain no-repeat;
  mask:var(--planner-section-icon) center / contain no-repeat;
  pointer-events:none;
}
#plannerNightPanel{
  --planner-section-icon:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M4%207h5m4%200h7M4%2017h9m4%200h3%22%2F%3E%3Ccircle%20cx%3D%2211%22%20cy%3D%227%22%20r%3D%222%22%2F%3E%3Ccircle%20cx%3D%2215%22%20cy%3D%2217%22%20r%3D%222%22%2F%3E%3C%2Fsvg%3E");
}
#plannerRecommendationsCard, #plannerRecommendationsPanel{
  --planner-section-icon:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22m12%203%202.4%205.1L20%209l-4%204%20.9%205.7-4.9-2.6-4.9%202.6L8%2013%204%209l5.6-.9Z%22%2F%3E%3C%2Fsvg%3E");
}
#planner .plannerTargetCard{
  --planner-section-icon:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%227%22%2F%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%222.5%22%2F%3E%3Cpath%20d%3D%22M12%202v3m0%2014v3M2%2012h3m14%200h3%22%2F%3E%3C%2Fsvg%3E");
}
#plannerMapPanel{
  --planner-section-icon:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M7%203v12a2%202%200%200%200%202%202h12M3%207h12a2%202%200%200%201%202%202v12%22%2F%3E%3C%2Fsvg%3E");
}
#newProjectCard{
  --planner-section-icon:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%224%22%20y%3D%225%22%20width%3D%2216%22%20height%3D%2216%22%20rx%3D%222%22%2F%3E%3Cpath%20d%3D%22M8%203v4m8-4v4M4%2010h16m-12%205%202%202%205-4%22%2F%3E%3C%2Fsvg%3E");
}
#plannerAnalysisPanel, #plannerVisibilityCard{
  --planner-section-icon:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M4%203v17h17M8%2016v-4m5%204V7m5%209v-6%22%2F%3E%3C%2Fsvg%3E");
}
#setupInsight{
  --planner-section-icon:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%223%22%20y%3D%225%22%20width%3D%2218%22%20height%3D%2214%22%20rx%3D%222%22%2F%3E%3Cpath%20d%3D%22M12%209v6m-3-3h6%22%2F%3E%3C%2Fsvg%3E");
}
/* The map keeps its renderer hooks inside the shared Kadr disclosure. */
#plannerTargetPanel.plannerPanel{padding:0}
#plannerTargetPanel[open]{overflow:visible}
#plannerMapPanel #plannerMapCard:not(.plannerMapFullscreen),#plannerMapPanel #plannerMapEmpty{margin:0;border:0;box-shadow:none;background:transparent}
#plannerMapPanel #plannerMapCard:not(.plannerMapFullscreen){padding:0}
#planner #plannerMapCard > .sectionTitleRow{gap:12px}
#planner #plannerMapHeadMeta{min-width:0;overflow-wrap:anywhere}
/* Match the existing weather glyph to the shared icon geometry. */
#planner #plannerWeatherPanel > summary > .weatherSummaryTitle > svg{
  display:block;
  flex:0 0 var(--planner-heading-icon-size);
  width:var(--planner-heading-icon-size);
  height:var(--planner-heading-icon-size);
  color:var(--ui-gold);
  pointer-events:none;
}
/* Keep subtitles aligned with the title text, not with the icon.
   Existing mobile visibility rules and the live weather subtitle remain intact. */
#planner > .plannerPanel > summary > small{
  padding-left:calc(var(--planner-heading-icon-size) + var(--planner-heading-gap));
}
@media(forced-colors:active){
#planner :is(
  #plannerNightPanel > summary > span,
  #plannerWeatherPanel > summary > .weatherSummaryTitle,
  #plannerRecommendationsCard > summary > span,
  #plannerRecommendationsPanel > summary > span,
  #plannerTargetPanel > summary > span,
  #plannerMapPanel > summary > span,
  #plannerVisibilityCard > summary > span,
  #newProjectCard > summary > span,
  #plannerAnalysisPanel > summary > span,
  #setupInsight > b:first-child
):not(.weatherSummaryTitle)::before{
    background-color:CanvasText;
    forced-color-adjust:none;
  }
  #planner #plannerWeatherPanel > summary > .weatherSummaryTitle > svg{color:CanvasText}
}

/* Camera catalogue: compact, responsive template picker, no persistent state. */
#cameraCatalogBox[hidden], #cameraCatalogPreview[hidden], #camPixelHint[hidden]{display:none}
#gearCameras .equipmentCatalogBox>.sectionTitleRow{gap:12px;flex-wrap:wrap}
#gearCameras .equipmentCatalogBox>.sectionTitleRow>b{font-size:13px;line-height:1.4}
#toggleCameraCatalogBtn{min-height:40px;flex-shrink:0}
#cameraCatalogBox{margin-top:14px;min-width:0}
.cameraCatalogFilters{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px}
.cameraCatalogFilters>div{min-width:0}.cameraCatalogWide{grid-column:1/-1}
#gearCameras .cameraCatalogFilters label{font-size:12px;line-height:1.4}
#gearCameras .cameraCatalogFilters input,#gearCameras .cameraCatalogFilters select{width:100%;min-width:0;max-width:100%;font-size:13px;min-height:44px}
#cameraCatalogStatus{margin:10px 0 0}
#cameraCatalogPreview{margin-top:12px;padding:12px;line-height:1.6;overflow-wrap:anywhere}
#cameraCatalogPreview strong{font-size:14px;color:var(--text)}
.cameraCatalogBasic{font-size:12px;margin-top:5px;color:var(--muted)}
#gearCameras .cameraCatalogNote{font-size:11px;line-height:1.5;color:var(--muted)}
#cameraCatalogPreview .cameraCatalogNote{margin:8px 0 0}
.cameraCatalogSource{display:inline-block;font-size:11px;margin-top:8px;color:var(--ui-gold-soft,#d8c78d);text-underline-offset:3px}
#applyCameraCatalogBtn{width:100%;margin-top:12px;min-height:44px}
#applyCameraCatalogBtn:disabled{opacity:.45;cursor:default}
#camPixelHint{display:block;margin-top:6px}
@media(max-width:520px){.cameraCatalogFilters{grid-template-columns:minmax(0,1fr)}.cameraCatalogWide{grid-column:auto}}

/* v1.0 — Start pozostaje ekranem powitalnym, ale dolna nawigacja jest zawsze dostępna. */
body[data-page="home"]{padding-bottom:calc(var(--ui-nav-h) + env(safe-area-inset-bottom,0px))}
body[data-page="home"] .bottomNav{opacity:1;pointer-events:auto;transform:translateY(0)}
body[data-page="home"] .homeHero{min-height:calc(100dvh - var(--ui-nav-h));padding-top:36px;padding-bottom:calc(76px + env(safe-area-inset-bottom,0px))}
@media(min-width:760px){
  body[data-page="home"] .bottomNav{transform:translateX(-50%)}
  body[data-page="home"]{padding-bottom:96px}
  body[data-page="home"] .homeHero{min-height:calc(100dvh - 96px)}
}

/* v1.0.1 — UI refinement */
button.primary,button.secondary,button.danger,.closeBtn,.projectNewBtn,.equipmentAddBtn,.fieldLinkBtn{min-height:44px}
.equipmentSection .actionsMini button,.equipmentSection .gearItem>.danger{min-width:44px;min-height:44px;padding:8px 10px;font-size:11px}
.bottomNav .tab{font-size:11px}
.equipmentSectionTitle small,.equipmentSection .gearMeta,.projectDetailsHint,.homeVersion,.framingDataHint,.plannerMapSaveNote{font-size:11px}
.setupChooser select{min-height:44px}
.plannerMapHelp{margin-top:7px;border-top:1px solid rgba(232,220,188,.10)}
.plannerMapHelp>summary{list-style:none;cursor:pointer;min-height:44px;display:flex;align-items:center;color:var(--ui-muted);font-size:11px;font-weight:700}
.plannerMapHelp>summary::-webkit-details-marker{display:none}.plannerMapHelp[open]>summary{color:var(--ui-gold-bright)}
.plannerMapHelpBody{padding:0 0 7px}.plannerMapHelp .plannerMapDsoNote,.plannerMapHelp .framingHint{margin-top:4px;font-size:11px;line-height:1.45}
.setupInsightCompact{padding:0;overflow:hidden}.setupInsightHead{padding:11px 12px;border-bottom:1px solid rgba(232,220,188,.11)}
.setupInsightHead span{display:block;color:var(--ui-muted);font-size:11px;text-transform:uppercase;letter-spacing:.05em}.setupInsightHead b{display:block;margin-top:3px;font-size:15px;color:var(--ui-text)}
.setupInsightRows{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}.setupInsightRows>div{padding:10px 12px;border-left:1px solid rgba(232,220,188,.10)}.setupInsightRows>div:first-child{border-left:0}
.setupInsightRows span{display:block;color:var(--ui-muted);font-size:11px}.setupInsightRows b{display:block;margin-top:3px;color:var(--ui-text);font-size:15px;font-variant-numeric:tabular-nums}.setupInsightMissing{padding:0 12px 10px}
@media(max-width:520px){.equipmentFormGrid.cameraFormGrid{grid-template-columns:repeat(2,minmax(0,1fr))}.cameraFormGrid>div:nth-child(1),.cameraFormGrid>div:nth-child(2),.cameraFormGrid>div:nth-child(7){grid-column:1/-1}.cameraFormGrid>div:nth-child(n+3):nth-child(-n+6),.cameraFormGrid>div:nth-child(n+8){grid-column:auto}.setupInsightRows{grid-template-columns:1fr}.setupInsightRows>div{display:flex;align-items:baseline;justify-content:space-between;gap:12px;border-left:0;border-top:1px solid rgba(232,220,188,.10);padding:8px 12px}.setupInsightRows>div:first-child{border-top:0}.setupInsightRows b{margin-top:0;text-align:right}}
@media(max-width:360px){.cameraFormGrid>div{grid-column:1/-1}}

/* v1.0.1 — global touch target floor */
button{min-height:44px}


/* Integrated setup sampling stays inside existing setup surfaces. */
.opticsAnalysis{margin-top:10px;border-top:1px solid rgba(232,220,188,.11)}
.opticsSection{padding:10px 12px}
.opticsSection+.opticsSection{border-top:1px solid rgba(232,220,188,.11)}
.opticsSectionHead{display:flex;align-items:center;justify-content:space-between;gap:10px}
.opticsSectionHead>b{font-size:12px;color:var(--ui-text)}
.opticsSectionHead label{display:flex;align-items:center;gap:5px;margin:0;color:var(--ui-muted);font-size:11px;text-transform:none;letter-spacing:0}
.opticsSectionHead .opticsMiniInput{width:60px;min-height:34px;padding:5px 7px;text-align:right;font-size:12px;font-variant-numeric:tabular-nums;flex:0 0 auto}
.opticsMetricGrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;margin-top:8px}
.opticsMetricGrid>div{min-width:0;padding:8px 9px;border:1px solid rgba(232,220,188,.10);border-radius:10px;background:#0d0d0c}
.opticsMetricGrid span{display:block;color:var(--ui-muted);font-size:11px}
.opticsMetricGrid b{display:block;margin-top:2px;color:var(--ui-text);font-size:12px;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.opticsAssessment{margin-top:8px;padding:7px 9px;border:1px solid rgba(232,220,188,.12);border-radius:9px;font-size:11px;line-height:1.4}
.opticsAssessment.good{color:#98e8b5;border-color:#315d49;background:rgba(49,93,73,.13)}
.opticsAssessment.warn{color:#f6c453;border-color:#5f5330;background:rgba(95,83,48,.13)}
.opticsAssessment.bad{color:#ff9aa8;border-color:#69404a;background:rgba(105,64,74,.13)}
@media(max-width:520px){
  .opticsSectionHead{align-items:flex-start;flex-direction:column}
  .opticsMetricGrid{grid-template-columns:1fr}
  .opticsSectionHead label{width:100%;justify-content:space-between}
}


/* UX-1 — compact three-stage Score bars: astronomy -> material -> weather. */
.scoreStageBars{display:flex;align-items:flex-end;justify-content:center;gap:7px;width:70px;min-width:70px;height:86px;padding:2px 0 0}
.scoreStage{--stage-color:#68a7ff;display:grid;grid-template-rows:16px 46px 18px;justify-items:center;align-items:end;width:24px;min-width:0;color:var(--stage-color)}
.scoreStage-material{--stage-color:#d7b769}
.scoreStage>b{align-self:start;font-size:11px;line-height:1;font-weight:850;color:var(--ui-text,var(--text));font-variant-numeric:tabular-nums}
.scoreStageTrack{position:relative;display:block;width:10px;height:44px;overflow:hidden;border:1px solid color-mix(in srgb,var(--stage-color) 38%,transparent);border-radius:7px;background:rgba(255,255,255,.055)}
.scoreStageTrack>i{position:absolute;left:-1px;right:-1px;bottom:-1px;height:calc(var(--stage-value)*1%);min-height:0;border-radius:7px;background:var(--stage-color);box-shadow:0 0 12px color-mix(in srgb,var(--stage-color) 24%,transparent)}
.scoreStageIcon{display:grid;place-items:center;width:18px;height:18px;color:var(--stage-color)}
.scoreStageIcon svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.scoreStage.isUnavailable{opacity:.46}
.scoreStage.isUnavailable .scoreStageTrack{border-style:dashed}
.scoreStage.isUnavailable .scoreStageTrack>i{display:none}

#plannerRecommendationsPanel .recommendationItem>summary.recommendationSummary{grid-template-columns:76px minmax(0,1fr) 10px;column-gap:10px}
#plannerRecommendationsPanel .recommendationItem .recommendationScoreCell{width:76px;display:grid;grid-template-columns:1fr;justify-items:center;gap:0}
#plannerRecommendationsPanel .recommendationItem .recommendationScoreCell .scoreStageBars{width:70px;min-width:70px}
#plannerRecommendationsPanel .recommendationItem .recommendationScoreCell .astroInfoBtn{width:32px;height:32px;min-width:32px;min-height:32px;margin-top:1px}
#plannerRecommendationsPanel .recommendationItem .recommendationScoreCell .astroInfoBtn>span{width:19px;height:19px}
#plannerAnalysisPanel .currentScoreMetric{grid-template-columns:82px minmax(0,1fr);gap:12px}
#plannerAnalysisPanel .currentScoreMetric .scoreStageBars{width:78px;min-width:78px;height:90px}
#plannerAnalysisPanel .currentScoreMetric .scoreStage{grid-template-rows:17px 48px 19px;width:26px}
#plannerAnalysisPanel .currentScoreMetric .scoreStageTrack{height:46px;width:11px}

@media(max-width:430px){
  #plannerRecommendationsPanel .recommendationItem>summary.recommendationSummary{grid-template-columns:68px minmax(0,1fr) 10px;column-gap:8px;padding:11px 9px}
  #plannerRecommendationsPanel .recommendationItem .recommendationScoreCell{width:68px}
  #plannerRecommendationsPanel .recommendationItem .recommendationScoreCell .scoreStageBars{width:64px;min-width:64px;gap:5px}
  #plannerAnalysisPanel .currentScoreMetric{grid-template-columns:76px minmax(0,1fr);gap:9px}
  #plannerAnalysisPanel .currentScoreMetric .scoreStageBars{width:70px;min-width:70px;gap:6px}
}


/* UX-2 — icon-only ranking mode and practical rank badges. */


/* UX-3 — compact recommendation detail hierarchy + shared legend. */
#planner .recommendationRankTools{display:flex;align-items:center;justify-content:center;gap:6px;margin:8px 0 10px}
#planner .recommendationLegendBtn{width:40px;height:40px;min-width:40px;min-height:40px;margin:0}
#planner .recommendationLegendBtn>span{width:20px;height:20px}

#plannerRecommendationsPanel .recommendationStats{display:grid;gap:10px}
#plannerRecommendationsPanel .recommendationStatsGroup{margin:0;padding:0 0 9px;border:0;border-bottom:1px solid rgba(232,220,188,.10);border-radius:0;background:transparent}
#plannerRecommendationsPanel .recommendationStatsGroup:last-child{border-bottom:0;padding-bottom:0}
#plannerRecommendationsPanel .recommendationStatsGroup h4{margin:0 0 5px;font-size:10px;letter-spacing:.07em}
#plannerRecommendationsPanel .recommendationStatRow{display:grid;grid-template-columns:minmax(110px,.9fr) minmax(0,1.1fr);gap:14px;align-items:baseline;width:100%;padding:3px 0;font-size:11px}
#plannerRecommendationsPanel .recommendationStatRow span{color:var(--ui-muted,var(--muted))}
#plannerRecommendationsPanel .recommendationStatRow b{text-align:right;color:var(--ui-text,var(--text));font-weight:700;overflow-wrap:anywhere}

#plannerRecommendationsPanel .recommendationModelDetails{margin-top:2px;border:1px solid rgba(232,220,188,.12);border-radius:9px;background:rgba(255,255,255,.018);overflow:hidden}
#plannerRecommendationsPanel .recommendationModelDetails>summary{list-style:none;cursor:pointer;padding:8px 10px;color:var(--ui-muted,var(--muted));font-size:11px;font-weight:700}
#plannerRecommendationsPanel .recommendationModelDetails>summary::-webkit-details-marker{display:none}
#plannerRecommendationsPanel .recommendationModelDetails>summary::after{content:"›";float:right;transition:transform .14s ease}
#plannerRecommendationsPanel .recommendationModelDetails[open]>summary::after{transform:rotate(90deg)}
#plannerRecommendationsPanel .recommendationModelDetails>.recommendationStatsGroup{padding:0 10px 9px;border-bottom:0}
#plannerRecommendationsPanel .recommendationModelDetails>.recommendationStatsGroup h4{display:none}

.recommendationLegendGrid{display:grid;gap:9px}
.recommendationLegendItem{display:block;min-width:0;padding:12px 0;border-bottom:1px solid rgba(232,220,188,.09)}
.recommendationLegendItem>div{width:100%;min-width:0}
.recommendationLegendItem:last-child{border-bottom:0}
.recommendationLegendItem b{display:block;margin:0 0 6px;color:var(--ui-text,var(--text));font-size:14px}
.recommendationLegendItem small{display:block;width:100%;color:var(--ui-muted,var(--muted));font-size:13px;line-height:1.6;overflow-wrap:break-word}
.recommendationLegendGlyph{display:grid;place-items:center;width:30px;height:30px;border:1px solid rgba(232,220,188,.12);border-radius:9px;background:rgba(255,255,255,.025);color:var(--ui-text,var(--text));font-size:12px;font-weight:850}
.recommendationLegendGlyph svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.recommendationLegend-astronomy{color:#68a7ff}
.recommendationLegend-material{color:#d7b769}
.recommendationLegend-best,.recommendationLegend-rank{color:#d7b769}
.recommendationLegend-limited{color:#c8a56a}


#plannerAnalysisPanel #metrics .metric.currentAcquisitionMetric{display:block;grid-column:1/-1;align-self:start;width:100%;height:auto;padding:0;border:0;background:transparent;box-shadow:none}
#plannerAnalysisPanel .analysisModelDetails{border:1px solid rgba(232,220,188,.12);border-radius:9px;background:rgba(255,255,255,.018);overflow:hidden}
#plannerAnalysisPanel .analysisModelDetails>summary{list-style:none;cursor:pointer;padding:9px 11px;color:var(--ui-muted,var(--muted));font-size:11px;font-weight:700}
#plannerAnalysisPanel .analysisModelDetails>summary::-webkit-details-marker{display:none}
#plannerAnalysisPanel .analysisModelDetails>summary::after{content:"›";float:right;transition:transform .14s ease}
#plannerAnalysisPanel .analysisModelDetails[open]>summary::after{transform:rotate(90deg)}
#plannerAnalysisPanel .analysisModelRows{display:grid;gap:0;padding:0 11px 9px}
#plannerAnalysisPanel .analysisModelRows>div{display:grid;grid-template-columns:minmax(120px,.9fr) minmax(0,1.1fr);gap:12px;padding:4px 0;font-size:11px}
#plannerAnalysisPanel .analysisModelRows span{color:var(--ui-muted,var(--muted))}
#plannerAnalysisPanel .analysisModelRows b{text-align:right;color:var(--ui-text,var(--text));font-weight:700;overflow-wrap:anywhere}


/* Visibility timeline is a peer section directly beneath the Planner sky map. */
#plannerVisibilityCard{padding:0;min-width:0;overflow:hidden}
#plannerVisibilityCard[hidden]{display:none}
#plannerVisibilityCard #visibilityNightLabel{font-size:11px;text-align:left;color:var(--ui-muted,var(--muted))}
#plannerVisibilityCard #chart{box-sizing:border-box;margin:3px 0 0;height:clamp(215px,37vw,310px);width:100%;touch-action:pan-y;cursor:crosshair}
#plannerVisibilityCard .legend{margin:8px 0 12px;gap:6px 13px;line-height:1.3}
#plannerVisibilityCard .visibilityTargetHorizonNote{min-height:0;margin:7px 1px 0;color:#a8bfdc;font-size:11px;line-height:1.45}
#plannerVisibilityCard .visibilityTargetHorizonNote:empty{display:none}
#plannerVisibilityCard .visibilityTwilightDot{display:inline-block;width:10px;height:10px;border-radius:2px;vertical-align:-1px;margin-right:5px;
 background:linear-gradient(90deg,rgba(220,170,93,.95),rgba(107,151,198,.70),rgba(11,29,58,.90));border:1px solid rgba(227,216,197,.22)}
#plannerVisibilityCard #chart{cursor:crosshair}

#plannerVisibilityCard .visibilityMilestones{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.6fr) minmax(0,1fr);gap:7px;margin:7px 0 3px}
#plannerVisibilityCard .visibilityMilestone{display:flex;min-width:0;flex-direction:column;justify-content:center;gap:3px;border:1px solid var(--ui-border,rgba(232,220,188,.14));border-radius:9px;padding:7px 8px;background:rgba(8,8,7,.22)}
#plannerVisibilityCard .visibilityMilestone>span{display:flex;align-items:center;gap:5px;min-width:0;color:var(--ui-muted,var(--muted));font-size:10px;line-height:1.25}
#plannerVisibilityCard .visibilityMilestone>strong{color:var(--ui-text,var(--text));font-size:13px;line-height:1.3;font-weight:720;font-variant-numeric:tabular-nums;white-space:nowrap}
#plannerVisibilityCard .visibilityCulminationMilestone{border-color:rgba(203,167,255,.30);background:rgba(156,103,207,.065)}
#plannerVisibilityCard .visibilityCulminationMilestone>span,#plannerVisibilityCard .visibilityCulminationMilestone>strong{color:#cba7ff}
#plannerVisibilityCard .visibilityCulminationMilestone>small{font-size:10px;line-height:1.3;color:var(--ui-muted,var(--muted));overflow-wrap:anywhere}
#plannerVisibilityCard .visibilityCulminationMilestone>small[hidden]{display:none}
#plannerVisibilityCard .visibilityCulminationMilestone.is-outside{border-style:dashed}
#plannerVisibilityCard .visibilityDiamond{display:inline-block;width:9px;height:9px;background:#cba7ff;transform:rotate(45deg);border-radius:1px;flex:0 0 9px}
@media(max-width:430px){
 #plannerVisibilityCard .visibilityMilestones{gap:5px}
 #plannerVisibilityCard .visibilityMilestone{padding:7px 5px}
 #plannerVisibilityCard .visibilityMilestone>span{font-size:9.5px;gap:4px}
 #plannerVisibilityCard .visibilityMilestone>strong{font-size:11px}
 #plannerVisibilityCard .visibilityDiamond{width:7px;height:7px;flex-basis:7px}
}
#plannerVisibilityCard .visibilityTimeHead{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin:0 2px 4px}
#plannerVisibilityCard .visibilityTimeHead label{margin:0;font-size:12px;font-weight:650;color:var(--ui-muted,var(--muted))}
#plannerVisibilityCard #visibilityTimeValue{font-size:18px;font-weight:780;font-variant-numeric:tabular-nums;color:var(--ui-gold-bright,#d7b769)}
#plannerVisibilityCard input.visibilityTimeSlider{display:block;box-sizing:border-box;appearance:auto;width:100%;height:44px;min-height:44px;padding:0 3px;margin:0;background:transparent;border:0;border-radius:0;box-shadow:none;accent-color:var(--ui-gold-bright,#d7b769);touch-action:pan-y;cursor:pointer}
#plannerVisibilityCard input.visibilityTimeSlider:focus-visible{outline:2px solid var(--ui-gold-bright,#d7b769);outline-offset:2px}
#plannerVisibilityCard .visibilityTimeReadout{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;margin-top:6px}
#plannerVisibilityCard .visibilityTimeReadout>span{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;min-width:0;gap:4px;padding:10px 8px;border:1px solid var(--ui-border,rgba(232,220,188,.14));border-radius:9px;background:rgba(8,8,7,.26)}
#plannerVisibilityCard .visibilityTimeReadout small{font-size:11px;line-height:1.25;color:var(--ui-muted,var(--muted))}
#plannerVisibilityCard .visibilityTimeReadout strong{font-size:16px;font-weight:750;font-variant-numeric:tabular-nums;white-space:nowrap;color:var(--ui-text,var(--text))}
#plannerVisibilityCard .visibilityTimeStatus{min-height:16px;margin:8px 2px 0;font-size:11px;line-height:1.4;color:var(--ui-muted,var(--muted))}
@media(max-width:430px){
 #plannerVisibilityCard .visibilityTimeReadout{grid-template-columns:repeat(2,minmax(0,1fr))}
 #plannerVisibilityCard .visibilityTimeReadout>span{min-height:53px;padding:8px 10px}
 #plannerVisibilityCard .visibilityTimeReadout strong{font-size:15px}
 #plannerVisibilityCard .legend{font-size:10.5px;gap:6px 9px}
}


/* Frame card export */
#plannerMapControls .framingExportBtn{display:flex;align-items:center;justify-content:center;padding:6px}
#plannerMapControls .framingExportBtn .uiIcon{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.frameCardBackdrop{z-index:10100}
.frameCardModal{max-width:760px}
.frameCardOrientationLabel{margin:2px 0 7px;font-size:11px;color:var(--ui-muted,var(--muted))}
.frameCardOrientation{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.frameCardOrientation button{min-height:44px}
.frameCardOrientation button.active{border-color:var(--ui-border-strong);background:rgba(201,168,90,.12);color:#f0dfad}
.frameCardPreview{display:grid;place-items:center;min-height:220px;max-height:62vh;margin-top:12px;overflow:hidden;border:1px solid var(--ui-border);border-radius:12px;background:#080807}
.frameCardPreview img{display:block;max-width:100%;width:auto;height:auto;max-height:62vh;object-fit:contain}
.frameCardPlaceholder{display:grid;place-items:center;min-height:220px;padding:20px;color:var(--ui-muted);font-size:12px;text-align:center}
.frameCardStatus{min-height:18px;margin-top:8px;color:var(--ui-muted);font-size:11px;line-height:1.45}
.frameCardActions{margin-top:8px}
.frameCardActions button{min-height:44px}
@media(max-width:520px){
  .frameCardBackdrop{padding:8px}
  .frameCardModal{margin:6px auto;padding:12px}
  .frameCardPreview{min-height:180px;max-height:58vh}
  .frameCardPreview img{max-height:58vh}
  .frameCardPlaceholder{min-height:180px}
}