/* My Sky: saved places, search, alerts, onboarding. Inherits the site's
   dark palette; uses its own layout so it works on any theme page. */

.ssc-mysky { margin: 1.5rem 0; }
.ssc-mysky__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: .75rem; }
.ssc-mysky__hi { margin: 0; opacity: .8; font-size: .9rem; }
/* Auth (sign in + create account), branded to match the site */
.ssc-mysky--guest .ssc-auth { max-width: 400px; margin-top: 1.5rem;
  background: rgba(22, 33, 60, .5); border: 1px solid rgba(148, 163, 184, .2);
  border-radius: 14px; padding: 1.5rem; }
.ssc-auth__tabs { display: flex; gap: .5rem; margin-bottom: 1.25rem; }
.ssc-auth__tab { flex: 1; padding: .5rem; background: none; border: 0; border-bottom: 2px solid transparent;
  color: inherit; opacity: .6; cursor: pointer; font-size: .95rem; font-weight: 600; }
.ssc-auth__tab.is-active { opacity: 1; border-bottom-color: #7dd3fc; }
.ssc-auth form p { margin: 0 0 1rem; }
.ssc-auth label { display: block; font-size: .78rem; text-transform: uppercase;
  letter-spacing: .05em; opacity: .75; margin-bottom: .35rem; }
.ssc-auth input[type="text"],
.ssc-auth input[type="email"],
.ssc-auth input[type="password"] { display: block; width: 100%; padding: .6rem .75rem;
  border-radius: 8px; border: 1px solid rgba(148, 163, 184, .55);
  background: rgba(15, 23, 42, .6); color: inherit; font-size: 1rem; }
.ssc-auth input:focus { outline: none; border-color: #7dd3fc; box-shadow: 0 0 0 3px rgba(125, 211, 252, .15); }
.ssc-auth .login-remember { font-size: .85rem; opacity: .8; }
.ssc-auth .login-remember label { display: inline; text-transform: none; letter-spacing: 0; opacity: 1; }
.ssc-auth .login-remember input { display: inline; width: auto; margin-right: .4rem; }
.ssc-auth #wp-submit,
.ssc-auth .ssc-auth__submit { display: inline-block; width: 100%; background: #2563eb; color: #fff;
  font-weight: 600; font-size: 1rem; border: 0; border-radius: 8px; padding: .7rem 1rem; cursor: pointer; }
.ssc-auth #wp-submit:hover,
.ssc-auth .ssc-auth__submit:hover { background: #1d4ed8; }
.ssc-auth__alt { margin-top: 1rem; font-size: .9rem; opacity: .85; }
.ssc-auth__err { color: #fca5a5; font-size: .9rem; margin: 0 0 1rem; min-height: 1em; }
.ssc-auth [hidden] { display: none; }

/* Onboarding */
.ssc-onboard { background: rgba(125, 211, 252, .08); border: 1px solid rgba(125, 211, 252, .25);
  border-radius: 12px; padding: 1rem 1.25rem; margin: 1rem 0; }
.ssc-onboard h3 { margin: 0 0 .5rem; }
.ssc-onboard__steps { margin: 0; padding-left: 1rem; line-height: 1.7; list-style: none; }
.ssc-onboard__steps strong { color: #7dd3fc; margin-right: .35rem; }
.ssc-onboard__done { margin: 0; color: #86efac; font-weight: 600; }

/* Search */
.ssc-place-search { margin: 1.25rem 0; position: relative; }
.ssc-place-search label { display: block; font-size: .8rem; text-transform: uppercase;
  letter-spacing: .05em; opacity: .7; margin-bottom: .35rem; }
.ssc-place-search__row { display: flex; gap: .5rem; flex-wrap: wrap; }
.ssc-place-search__row input { flex: 1 1 240px; padding: .6rem .75rem; border-radius: 8px;
  border: 1px solid rgba(148, 163, 184, .55); background: rgba(15, 23, 42, .6); color: inherit; font-size: 1rem; }
.ssc-place-search__results { position: absolute; z-index: 20; left: 0; right: 0; top: 100%;
  margin: .25rem 0 0; padding: 0; list-style: none; background: #101b33;
  border: 1px solid rgba(148, 163, 184, .3); border-radius: 8px; overflow: hidden;
  box-shadow: 0 12px 32px rgba(0, 0, 0, .4); }
.ssc-place-search__results button { display: block; width: 100%; text-align: left; padding: .6rem .75rem;
  background: none; border: 0; color: inherit; cursor: pointer; font-size: .95rem; }
.ssc-place-search__results button:hover { background: rgba(125, 211, 252, .12); }

/* Two-column layout: places rail + main sky */
.ssc-mysky__cols { display: grid; grid-template-columns: 240px 1fr; gap: 1.5rem; align-items: start; }
@media (max-width: 720px) { .ssc-mysky__cols { grid-template-columns: 1fr; } }

.ssc-places h3, .ssc-alerts h3 { font-size: .95rem; margin: 0 0 .5rem; }
.ssc-places__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .4rem; }
.ssc-places__empty { opacity: .6; font-size: .9rem; }
.ssc-places__item { display: flex; align-items: center; gap: .4rem; background: rgba(22, 33, 60, .7);
  border: 1px solid transparent; border-radius: 8px; padding: .35rem .5rem; }
.ssc-places__item.is-active { border-color: rgba(125, 211, 252, .6); background: rgba(37, 99, 235, .18); }
.ssc-places__load { flex: 1; text-align: left; background: none; border: 0; color: inherit;
  cursor: pointer; font-size: .92rem; padding: .1rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ssc-places__alert { font-size: .72rem; opacity: .8; display: inline-flex; align-items: center; gap: .2rem; cursor: pointer; white-space: nowrap; }
.ssc-places__del { background: none; border: 0; color: #94a3b8; cursor: pointer; font-size: 1.1rem; line-height: 1; padding: 0 .2rem; }
.ssc-places__del:hover { color: #fca5a5; }

.sky-darkness { margin: .35rem 0 .75rem; font-size: .95rem; }
.sky-darkness strong { color: #7dd3fc; }

/* Map pin picker */
.ssc-place-picker { margin: 1.25rem 0; }
.ssc-place-picker__head { display: flex; align-items: center; justify-content: space-between; gap: .75rem; flex-wrap: wrap; margin-bottom: .5rem; }
.ssc-place-picker__head label { font-size: .8rem; text-transform: uppercase; letter-spacing: .05em; opacity: .75; }
.ssc-map { height: clamp(340px, 52vh, 560px); width: 100%; border-radius: 12px; overflow: hidden;
  border: 1px solid rgba(148, 163, 184, .55); background: #0b1120; z-index: 0; }
.ssc-map--wide { height: clamp(380px, 62vh, 680px); margin: .5rem 0 1rem; }
@media (max-width: 600px) {
  .ssc-map { height: 60vh; }
  .ssc-map--wide { height: 62vh; }
}
.sky-hint { margin: .5rem 0 .5rem; font-size: .9rem; opacity: .75; }
.ssc-place-picker__form { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; margin-top: .6rem; }
.ssc-place-picker__form input { flex: 1 1 240px; padding: .55rem .7rem; border-radius: 8px;
  border: 1px solid rgba(148, 163, 184, .55); background: rgba(15, 23, 42, .6); color: inherit; font-size: 1rem; }
.ssc-place-picker__coords { font-size: .8rem; opacity: .6; font-variant-numeric: tabular-nums; }
/* Map control panel (top-right): basemap dropdown + light-pollution toggle */
.ssc-map-panel { background: rgba(11, 17, 32, .9); border: 1px solid rgba(148, 163, 184, .55);
  border-radius: 10px; padding: .5rem; box-shadow: 0 4px 16px rgba(0, 0, 0, .5);
  display: flex; flex-direction: column; gap: .4rem; }
.ssc-map-lp { display: flex; align-items: center; gap: .4rem; font-size: .82rem; color: #e2e8f0; cursor: pointer; }
.ssc-map-lp input { cursor: pointer; }
.ssc-map-lp-legend { display: flex; align-items: center; gap: .35rem; font-size: .68rem; color: #94a3b8; }
.ssc-map-lp-legend i { flex: 1; height: 8px; border-radius: 4px; min-width: 70px;
  background: linear-gradient(90deg, rgba(30,60,160,.6), rgba(30,150,90,.7), #d2c83c, #eb962d, #dc3728, #faf0eb); }
/* Themed basemap dropdown */
.ssc-map-basemap { appearance: none; -webkit-appearance: none; cursor: pointer;
  background: rgba(11, 17, 32, .92); color: #e2e8f0; border: 1px solid rgba(148, 163, 184, .4);
  border-radius: 8px; padding: .35rem 1.8rem .35rem .6rem; font: inherit; font-size: .82rem;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .4);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path d='M1 1l4 4 4-4' stroke='%237dd3fc' stroke-width='1.5' fill='none'/></svg>");
  background-repeat: no-repeat; background-position: right .55rem center; }
.ssc-map-basemap:focus { outline: none; border-color: #7dd3fc; }
.ssc-map-basemap option { background: #0b1120; color: #e2e8f0; }
/* MapLibre controls: nudge the panel spacing */
.ssc-map-panel { margin: 10px 10px 0 0; max-width: 220px; }
.maplibregl-ctrl-attrib { font-size: 10px; }

/* Layered map: toggle rows + aurora status read */
.ssc-map-layers { display: flex; flex-direction: column; gap: .3rem; }
.ssc-map-layer { display: flex; align-items: center; gap: .4rem; font-size: .82rem; color: #e2e8f0; cursor: pointer; }
.ssc-map-layer input { cursor: pointer; }
.ssc-map-aurora-status { font-size: .68rem; line-height: 1.35; color: #94a3b8; margin: 0 0 .1rem 1.35rem; }
.ssc-map-aurora-status[data-level="storm"], .ssc-map-aurora-status[data-level="major"] { color: #86efac; }
.ssc-map-aurora-status[data-level="active"] { color: #fde68a; }

/* Pin preview popups */
.ssc-mappop .maplibregl-popup-content { background: #0b1120; color: #e2e8f0; border: 1px solid rgba(148,163,184,.55);
  border-radius: 12px; padding: 0; overflow: hidden; box-shadow: 0 10px 30px rgba(0,0,0,.55); }
.ssc-mappop .maplibregl-popup-tip { border-top-color: #0b1120; border-bottom-color: #0b1120; }
.ssc-mappop .maplibregl-popup-close-button { color: #94a3b8; font-size: 1.1rem; padding: 0 .35rem; }
.ssc-pop { width: 240px; }
.ssc-pop__img { display: block; width: 100%; height: 118px; object-fit: cover; }
.ssc-pop__body { padding: .6rem .7rem .7rem; }
.ssc-pop__tag { display: inline-block; font-size: .64rem; text-transform: uppercase; letter-spacing: .05em;
  color: #7dd3fc; margin-bottom: .2rem; }
.ssc-pop--darksky .ssc-pop__tag { color: #c4b5fd; }
.ssc-pop--saved .ssc-pop__tag { color: #fbbf24; }
.ssc-pop__name { margin: 0 0 .3rem; font-size: 1rem; line-height: 1.2; }
.ssc-pop__blurb { margin: 0 0 .5rem; font-size: .78rem; line-height: 1.4; color: #cbd5e1; }
.ssc-pop__act { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.ssc-pop__more { font-size: .76rem; color: #7dd3fc; text-decoration: none; }
.ssc-pop__more:hover { text-decoration: underline; }
.btn--sm { padding: .3rem .6rem; font-size: .78rem; }

/* Sky hub: tabs + panels */
.ssc-hub { margin-top: .5rem; }
.ssc-tabs { display: flex; gap: .35rem; border-bottom: 1px solid rgba(148,163,184,.2); margin-bottom: 1.1rem; flex-wrap: wrap; }
.ssc-tab { appearance: none; background: transparent; border: 0; border-bottom: 2px solid transparent;
  color: #94a3b8; font: inherit; font-size: .92rem; font-weight: 600; padding: .55rem .8rem; cursor: pointer; }
.ssc-tab:hover { color: #e2e8f0; }
.ssc-tab.is-active { color: #fff; border-bottom-color: #7dd3fc; }
.ssc-tabpanel[hidden] { display: none; }
.ssc-hub__h { margin: .2rem 0 1rem; font-size: 1.2rem; }
.ssc-hub__places { list-style: none; margin: 0 0 1rem; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.ssc-hub__place { margin: 0; }
.ssc-hub__placebtn { appearance: none; background: rgba(22,33,60,.6); border: 1px solid rgba(148,163,184,.55);
  color: #e2e8f0; border-radius: 999px; padding: .4rem .9rem; font: inherit; font-size: .85rem; cursor: pointer; }
.ssc-hub__placebtn:hover { border-color: #7dd3fc; color: #fff; }
.ssc-hub__manage a { color: #7dd3fc; text-decoration: none; font-size: .88rem; }
.ssc-hub__manage a:hover { text-decoration: underline; }

/* Sky Tonight: inline location search + save (reuses this stylesheet) */
.sky-search { position: relative; flex: 1 1 260px; }
.sky-search label { display: block; font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; opacity: .7; margin-bottom: .25rem; }
.sky-search input { width: 100%; padding: .55rem .7rem; border-radius: 8px;
  border: 1px solid rgba(148, 163, 184, .55); background: rgba(15, 23, 42, .6); color: inherit; font-size: 1rem; }
.sky-search__results { position: absolute; z-index: 20; left: 0; right: 0; top: 100%;
  margin: .25rem 0 0; padding: 0; list-style: none; background: #101b33;
  border: 1px solid rgba(148, 163, 184, .3); border-radius: 8px; overflow: hidden;
  box-shadow: 0 12px 32px rgba(0, 0, 0, .4); }
.sky-search__results button { display: block; width: 100%; text-align: left; padding: .6rem .75rem;
  background: none; border: 0; color: inherit; cursor: pointer; font-size: .95rem; }
.sky-search__results button:hover { background: rgba(125, 211, 252, .12); }

/* Alerts */
.ssc-alerts { margin-top: 1.25rem; background: rgba(20, 83, 45, .18);
  border: 1px solid rgba(134, 239, 172, .25); border-radius: 12px; padding: 1rem 1.25rem; }
.ssc-alerts__list { list-style: none; margin: 0; padding: 0; line-height: 1.9; }
.ssc-alerts__why { opacity: .7; font-size: .85rem; }

/* Web push opt-in */
.ssc-mysky__notify { margin: .6rem 0 0; display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.ssc-mysky__notify .btn.is-on { border-color: rgba(134, 239, 172, .6); color: #86efac; }
.ssc-mysky__notify-note { font-size: .85rem; opacity: .75; }

/* Observing plan (Sky Tonight) */
.ssc-plan { margin: 1.75rem 0; }
.ssc-plan__head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.ssc-plan__scopewrap { font-size: .78rem; text-transform: uppercase; letter-spacing: .05em; opacity: .85; display: flex; align-items: center; gap: .5rem; }
/* One full-width row per target. The row body is a 3-column grid so the timing
   and name stack on the left while the framing and exposure notes use the rest
   of the width, which keeps each row about three lines tall instead of six. */
.ssc-plan__list { list-style: none; margin: 1rem 0 0; padding: 0; display: flex; flex-direction: column; gap: .55rem; }
.ssc-plan__item { display: flex; gap: .8rem; background: rgba(22, 33, 60, .55); border: 1px solid rgba(148, 163, 184, .45);
  border-radius: 12px; padding: .6rem .8rem; align-items: center; }
.ssc-plan__img { width: 54px; height: 54px; flex: 0 0 54px; object-fit: cover; border-radius: 9px; background: #0b1120;
  display: inline-flex; align-items: center; justify-content: center; color: #7dd3fc; font-size: 1.2rem; }
.ssc-plan__body { min-width: 0; flex: 1;
  display: grid; grid-template-columns: minmax(210px, 1.1fr) minmax(230px, 1.5fr) minmax(170px, .9fr);
  /* Rows must be explicit: `grid-row: 1 / -1` resolves against the explicit
     grid, so without these the spanning columns collapse into row 1. */
  grid-template-rows: auto auto auto;
  column-gap: 1.25rem; align-items: center; }
.ssc-plan__when { grid-column: 1; grid-row: 1; font-size: .7rem; text-transform: uppercase; letter-spacing: .04em;
  color: #7dd3fc; font-weight: 700; line-height: 1.3; }
.ssc-plan__name { grid-column: 1; grid-row: 2; margin: .05rem 0 0; font-size: 1rem; line-height: 1.2; }
.ssc-plan__sub { grid-column: 1; grid-row: 3; margin: .05rem 0 0; font-size: .78rem; opacity: .85; }
.ssc-plan__frame { grid-column: 2; grid-row: 1 / span 3; align-self: center; margin: 0; font-size: .85rem; line-height: 1.45; }
.ssc-plan__exp { grid-column: 3; grid-row: 1 / span 3; align-self: center; margin: 0; font-size: .8rem; opacity: .9; line-height: 1.45; }

/* Narrow viewports: stack the row body back into a single column. */
@media (max-width: 860px) {
  .ssc-plan__item { align-items: flex-start; }
  .ssc-plan__body { display: block; }
  .ssc-plan__frame { margin: .35rem 0 0; }
  .ssc-plan__exp { margin: .2rem 0 0; }
}
.ssc-plan__window { margin: 1rem 0 .25rem; font-size: .9rem; opacity: .85; }
.ssc-plan__window strong { color: #7dd3fc; }