/* css/panel.css — P1-09. The side panel / bottom sheet and its three views.
   Uses only styles.css tokens plus three call colours defined here. */

:root {
  --call-go: #57cc7a;
  --call-caution: var(--warn);
  --call-hold: var(--bad);
}

/* ------------------------------------------------------------------ shell */

.atlas-panel {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
  min-height: 0;
  font-size: 0.875rem;
}

.panel-head {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  position: sticky;
  top: calc(-1 * var(--pad));
  margin: calc(-1 * var(--pad)) calc(-1 * var(--pad)) 0;
  padding: var(--pad);
  background: var(--bg-raised);
  z-index: 2;
  border-bottom: 1px solid var(--line);
}

.panel-head__title {
  font-size: 1rem;
  font-weight: 700;
  margin: 0;
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.panel-head__sub {
  color: var(--text-dim);
  font-size: 0.75rem;
  margin: 0;
}

.panel-btn {
  flex: 0 0 auto;
  min-width: 44px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  background: transparent;
  color: var(--text);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  font-family: var(--font);
  font-size: 0.8125rem;
  cursor: pointer;
  padding: 0 0.625rem;
}
.panel-btn:hover { background: rgba(255, 255, 255, 0.05); }
.panel-btn:focus-visible { outline: 2px solid var(--text); outline-offset: 2px; }

/* Collapse: the whole panel shrinks to its header strip. */
.panel.is-collapsed .atlas-panel > :not(.panel-head) { display: none; }
@media (max-width: 48rem) {
  .panel.is-collapsed { max-height: none; flex-basis: auto; }
}

/* ------------------------------------------------------------------ chips */

.chip {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.125rem 0.5rem;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.04);
  color: var(--text-dim);
  font-size: 0.6875rem;
  line-height: 1.5;
  white-space: nowrap;
}
.chip--accent { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 45%, transparent); }
.chip--warn { color: var(--warn); border-color: color-mix(in srgb, var(--warn) 50%, transparent); }
.chip--bad { color: var(--bad); border-color: color-mix(in srgb, var(--bad) 50%, transparent); }
.chip--easy { color: #7ad48e; }
.chip--moderate { color: #d9c86b; }
.chip--hard { color: #e69a5c; }
.chip--expert { color: #e66a74; }

.chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
  align-items: center;
}

/* ------------------------------------------------------------------ cards */

.panel-card {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 0.625rem 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.panel-card__title {
  margin: 0;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-dim);
}

.panel-note {
  color: var(--text-dim);
  font-size: 0.75rem;
  margin: 0;
  line-height: 1.5;
}

.panel-prose { margin: 0; line-height: 1.55; }

/* ------------------------------------------------------- site list rows */

.site-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}

.site-row {
  width: 100%;
  text-align: left;
  display: flex;
  align-items: center;
  gap: 0.625rem;
  min-height: 48px;
  padding: 0.5rem 0.625rem;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: var(--text);
  font-family: var(--font);
  font-size: 0.875rem;
  cursor: pointer;
  transition: background 120ms ease, border-color 120ms ease;
}
.site-row:hover { background: rgba(255, 255, 255, 0.06); }
.site-row:focus-visible { outline: 2px solid var(--text); outline-offset: 2px; }

.site-row__main {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.site-row__name {
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.site-row__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
  color: var(--text-dim);
  font-size: 0.6875rem;
  align-items: center;
}

/* The go / caution / hold lamp on Today rows. */
.call-dot {
  flex: 0 0 auto;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--line);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--line) 30%, transparent);
}
.call-dot--go { background: var(--call-go); box-shadow: 0 0 0 3px color-mix(in srgb, var(--call-go) 25%, transparent); }
.call-dot--caution { background: var(--call-caution); box-shadow: 0 0 0 3px color-mix(in srgb, var(--call-caution) 25%, transparent); }
.call-dot--hold { background: var(--call-hold); box-shadow: 0 0 0 3px color-mix(in srgb, var(--call-hold) 25%, transparent); }
.call-dot--pending {
  background: transparent;
  border: 2px dotted var(--text-dim);
  box-shadow: none;
}

.call-label { font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.03em; }
.call-label--go { color: var(--call-go); }
.call-label--caution { color: var(--call-caution); }
.call-label--hold { color: var(--call-hold); }

/* --------------------------------------------------------- today header */

.today-sky {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem 0.875rem;
  color: var(--text-dim);
  font-size: 0.75rem;
  align-items: center;
}
.today-sky b { color: var(--text); font-weight: 600; }

.alert-banner {
  border-left: 3px solid var(--warn);
  background: color-mix(in srgb, var(--warn) 9%, transparent);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: 0.5rem 0.625rem;
  font-size: 0.75rem;
  line-height: 1.45;
}
.alert-banner b { display: block; }
.alert-banner span { color: var(--text-dim); }

/* ------------------------------------------------------------- progress */

.progress-stat { display: flex; flex-direction: column; gap: 0.375rem; }
.progress-stat__line { display: flex; align-items: baseline; gap: 0.5rem; }
.progress-stat__big { font-size: 1.5rem; font-weight: 700; font-family: var(--mono); }
.progress-stat__pct { color: var(--accent); font-weight: 600; }

.progress-bar {
  position: relative;
  height: 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.07);
  overflow: visible;
}
.progress-bar__fill {
  position: absolute;
  inset: 0 auto 0 0;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--accent), color-mix(in srgb, var(--accent) 65%, #ffffff));
  min-width: 4px;
}
.progress-bar__target {
  position: absolute;
  top: -3px;
  bottom: -3px;
  width: 2px;
  background: var(--text-dim);
  border-radius: 1px;
}

.stat-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.5rem;
}
.stat-tile { display: flex; flex-direction: column; gap: 0.125rem; }
.stat-tile b { font-size: 1.125rem; font-family: var(--mono); }
.stat-tile span { font-size: 0.6563rem; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.04em; }

/* ------------------------------------------------------------- logbook */

.log-group { display: flex; flex-direction: column; gap: 0.375rem; }
.log-entries {
  list-style: none;
  margin: 0;
  padding: 0 0 0 0.875rem;
  border-left: 2px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}
.log-entry { font-size: 0.8125rem; line-height: 1.5; position: relative; }
.log-entry::before {
  content: '';
  position: absolute;
  left: -1.22rem;
  top: 0.42em;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
}
.log-entry__date { font-family: var(--mono); font-size: 0.75rem; }
.log-entry__with { color: var(--text-dim); }
.log-entry__links { display: inline-flex; gap: 0.5rem; margin-left: 0.375rem; }
.log-entry__links a { color: var(--accent); text-decoration: none; }
.log-entry__links a:hover { text-decoration: underline; }

.photo-strip {
  display: flex;
  gap: 0.375rem;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 0.25rem;
}
.photo-strip img {
  height: 64px;
  border-radius: calc(var(--radius) / 1.5);
  flex: 0 0 auto;
}

/* -------------------------------------------------------- scout toggle */

.scout-row {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  justify-content: space-between;
}
.scout-row__label { display: flex; flex-direction: column; gap: 0.125rem; }
.scout-row__label b { font-size: 0.8125rem; }
.scout-row__label span { font-size: 0.6875rem; color: var(--text-dim); }

.switch {
  flex: 0 0 auto;
  width: 46px;
  height: 26px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.06);
  position: relative;
  cursor: pointer;
  padding: 0;
}
.switch::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--text-dim);
  transition: left 140ms ease, background 140ms ease;
}
.switch[aria-checked="true"] { background: color-mix(in srgb, var(--warn) 30%, transparent); }
.switch[aria-checked="true"]::after { left: 22px; background: var(--warn); }
.switch:disabled { opacity: 0.45; cursor: not-allowed; }
.switch:focus-visible { outline: 2px solid var(--text); outline-offset: 2px; }

/* -------------------------------------------------------- site detail */

.detail-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem;
}

.kv { display: flex; flex-direction: column; gap: 0.125rem; }
.kv b { font-size: 1rem; font-family: var(--mono); font-weight: 600; }
.kv span { font-size: 0.6563rem; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.04em; }
.kv .kv__note { text-transform: none; letter-spacing: 0; }

.cond-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem 0.75rem;
}

.rain-spark { width: 100%; height: 34px; display: block; }
.rain-spark rect { fill: var(--accent-2); opacity: 0.85; }
.rain-spark line { stroke: var(--line); stroke-width: 1; }

.detail-links { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.detail-links a {
  color: var(--accent);
  text-decoration: none;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 0.375rem 0.625rem;
  font-size: 0.75rem;
  min-height: 34px;
  display: inline-flex;
  align-items: center;
}
.detail-links a:hover { background: rgba(255, 255, 255, 0.05); }

.advisory {
  border-left: 3px solid var(--text-dim);
  padding: 0.25rem 0.625rem;
  font-size: 0.75rem;
  color: var(--text-dim);
  line-height: 1.5;
}
.advisory--warn { border-left-color: var(--warn); }

/* ------------------------------------------------------------- helpers */

.muted { color: var(--text-dim); }
.mono { font-family: var(--mono); }
.spin {
  display: inline-block;
  width: 0.875em;
  height: 0.875em;
  border: 2px solid var(--line);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: atlas-spin 0.9s linear infinite;
  vertical-align: -0.125em;
}
@keyframes atlas-spin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  .spin { animation-duration: 3s; }
}

/* Wider panel breathing room on desktop. */
@media (min-width: 48.0625rem) {
  .atlas-panel { font-size: 0.9063rem; }
}

/* -------------------------------------------------- dive today (P2-07) */

.site-row--dive { cursor: default; }
.site-row--dive:hover { background: rgba(255, 255, 255, 0.03); }

.dive-row__top {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
}
.dive-row__rank {
  flex: 0 0 1.25rem;
  color: var(--text-dim);
  font-family: var(--mono);
  font-size: 0.75rem;
  text-align: right;
}
.dive-row__name {
  flex: 1 1 auto;
  min-width: 0;
  background: none;
  border: 0;
  color: var(--text);
  font-family: var(--font);
  font-size: 0.9063rem;
  font-weight: 600;
  text-align: left;
  padding: 0.375rem 0;
  min-height: 34px;
  cursor: pointer;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dive-row__name:hover { color: var(--accent-2); }
.dive-row__name:focus-visible { outline: 2px solid var(--text); outline-offset: 2px; }

.dive-row__reason { margin: 0.125rem 0 0; font-size: 0.75rem; line-height: 1.45; }

.dive-row__expand {
  align-self: flex-start;
  background: none;
  border: 0;
  color: var(--text-dim);
  font-family: var(--font);
  font-size: 0.6875rem;
  padding: 0.375rem 0;
  min-height: 30px;
  cursor: pointer;
}
.dive-row__expand:hover { color: var(--text); }

/* -- P4-06: stats + milestones card (logbook) ---------------------------- */
.stats-card__head { display: block; margin-bottom: 6px; }
.stats-card__nextlabel { margin-top: 10px; font-weight: 600; }
.stats-card__milestone { margin: 6px 0 10px; }
.stats-card__milestone .panel-note { margin: 0 0 4px; }
.progress-bar--thin { height: 5px; }