/* pinnedplac.es
 *
 * Dark theme on the Tailwind slate/gray ramp, matching country_comparator's
 * shared/css/base.css so the family of apps looks related.
 *
 * Legibility rules that are requirements here, not preferences:
 *   - body text 1rem minimum, never smaller
 *   - body text #e2e8f0 or brighter; secondary text never dimmer than #94a3b8
 *   - anything meant to be read is font-weight 500 or above, never 300/400
 *   - every <a> selector carries an explicit colour of its own; a generic
 *     `a {}` or a colour on the container does not count
 */

:root {
  --bg: #111827;
  --bg-header: #0f172a;
  --bg-panel: #0f172a;
  --border: #1e293b;
  --text: #e2e8f0;
  --text-muted: #94a3b8;
  --accent: #60a5fa;
  --accent-bright: #93c5fd;
  --visited: #15803d;
  --danger: #f87171;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 1rem;
  line-height: 1.5;
  background: var(--bg);
  color: var(--text);
}

header {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  padding: 0.85rem 1.25rem;
  background: var(--bg-header);
  border-bottom: 1px solid var(--border);
}

header h1 {
  margin: 0;
  font-size: 1.35rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}

/* Explicit colour on the exact selector, not inherited from header. */
header h1 a {
  color: var(--text);
  text-decoration: none;
}

header h1 a:hover,
header h1 a:focus-visible {
  color: var(--accent-bright);
  text-decoration: underline;
}

main { padding: 1.25rem; }

/* ---------------------------------------------------------------- layout */

.layout {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(320px, 1fr);
  gap: 1.5rem;
  /* Not `start`: the globe pane has to span the row so its sticky child has
     somewhere to stick. With `start` the pane is only as tall as the globe and
     scrolls away with it. */
  align-items: stretch;
  max-width: 1500px;
  margin: 0 auto;
}

/* One column on narrow screens; the globe keeps a usable height rather than
   collapsing to a sliver. */
@media (max-width: 900px) {
  .layout { grid-template-columns: minmax(0, 1fr); }
  .globe { height: 60vh; }
}

/* Sticks while the list scrolls past. The list now runs the full length of the
   page, and without this the globe -- the thing the list is about -- scrolls
   off the top and you lose your place. Applied to the pane, not the globe: a
   sticky element can only move within its own parent, so the parent is what
   has to span the tall row. */
.globe-pane {
  position: sticky;
  top: 1rem;
  align-self: start;
}

/* After .globe-pane, not inside the earlier media block: same specificity, so
   whichever comes last wins, and the sticky rule above is later in the file.
   In one column the globe sits above the list rather than beside it, so
   pinning it would hold 60vh of the screen and leave a sliver to read
   through. */
@media (max-width: 900px) {
  .globe-pane { position: static; }
}

.globe {
  width: 100%;
  height: min(72vh, 760px);
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
}

.globe canvas { display: block; cursor: grab; }
.globe canvas:active { cursor: grabbing; }

/* ------------------------------------------------------------------ list */

.list-pane {
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 1rem 1.1rem 1.25rem;
}

.list-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--border);
}

.list-controls h2 {
  margin: 0;
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--text);
}

.sort-controls { display: flex; gap: 0.4rem; }

.sort-button {
  font: inherit;
  font-size: 0.95rem;
  font-weight: 500;
  padding: 0.4rem 0.8rem;
  color: var(--text);
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 6px;
  cursor: pointer;
}

.sort-button:hover { border-color: var(--accent); }

.sort-button.is-active {
  background: var(--accent);
  border-color: var(--accent);
  color: #0b1220;          /* dark on bright: contrast runs the other way here */
  font-weight: 600;
}

/* The list runs the full length of the page rather than scrolling inside a
   short box. It was capped at min(64vh, 680px) with its own scrollbar, which
   meant a long map was read a dozen rows at a time through a letterbox while
   the page below it sat empty. The page scrolls instead; the globe is sticky
   (below) so it stays in view while you go down the list. */
.visit-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.visit-item {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: 0.75rem;
  padding: 0.6rem 0.35rem;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
}

.visit-item:hover,
.visit-item:focus-visible {
  background: #16213a;
  outline: none;
}

.visit-item:focus-visible { box-shadow: inset 0 0 0 2px var(--accent); }

.visit-name {
  font-size: 1rem;
  font-weight: 500;
  color: var(--text);
}

.visit-date {
  font-size: 0.95rem;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  color: var(--text-muted);
}

/* The date is a field, not a label: a pin carries today's date until someone
   says otherwise, and most trips are recorded after the fact. It reads as the
   row's date until hovered or focused, so the list is not a wall of boxes.
   color-scheme draws the native calendar picker and its icon dark, which the
   page-level rule cannot do for a control's internals. */
input.visit-date {
  font: inherit;
  font-size: 0.95rem;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  color: var(--text-muted);
  color-scheme: dark;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 5px;
  padding: 0.2rem 0.35rem;
  cursor: pointer;
}

input.visit-date:hover {
  border-color: var(--border);
  color: var(--text);
}

input.visit-date:focus-visible {
  border-color: var(--accent);
  color: var(--text);
  outline: none;
}

.list-error {
  margin: 0.75rem 0.35rem 0;
  font-size: 1rem;
  font-weight: 500;
  color: var(--danger);
}

/* A roll-up row says where it came from instead of offering a Remove button:
   it is pinned from its parts and the API refuses a direct delete, so the
   control would only ever produce an error. Sits in the same grid cell the
   button would occupy, so rows stay aligned. */
.visit-derived {
  font-size: 0.8rem;
  font-style: italic;
  color: var(--muted, #94a3b8);
  padding: 0.25rem 0.6rem;
  white-space: nowrap;
}

.visit-remove {
  font: inherit;
  font-size: 0.9rem;
  font-weight: 500;
  padding: 0.25rem 0.6rem;
  color: var(--danger);
  background: transparent;
  border: 1px solid transparent;
  border-radius: 5px;
  cursor: pointer;
}

.visit-remove:hover,
.visit-remove:focus-visible {
  border-color: var(--danger);
  outline: none;
}

.visit-empty {
  padding: 1.25rem 0.35rem;
  font-size: 1rem;
  font-weight: 500;
  color: var(--text-muted);
}

/* --------------------------------------------------------------- tooltip */

.globe-tooltip {
  position: fixed;
  z-index: 20;
  pointer-events: none;
  padding: 0.35rem 0.6rem;
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--text);
  background: rgba(15, 23, 42, 0.95);
  border: 1px solid var(--border);
  border-radius: 6px;
  white-space: nowrap;
}

.globe-tooltip.hidden { display: none; }

/* ------------------------------------------------------------------- auth */

.header-nav { margin-left: auto; }

.auth-controls {
  display: flex;
  gap: 0.9rem;
  align-items: center;
}

/* Explicit colour on the exact selector -- a colour on .auth-controls would
   not apply to the anchor itself. */
.auth-controls a.auth-link {
  color: var(--accent-bright);
  font-size: 1rem;
  font-weight: 500;
  text-decoration: none;
}

.auth-controls a.auth-link:hover,
.auth-controls a.auth-link:focus-visible {
  text-decoration: underline;
}

.auth-link-button {
  font: inherit;
  font-size: 1rem;
  font-weight: 500;
  color: var(--accent-bright);
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  text-decoration: none;
}

.auth-link-button:hover,
.auth-link-button:focus-visible { text-decoration: underline; }

.auth-pane {
  max-width: 30rem;
  margin: 3rem auto;
  padding: 1.75rem;
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: 10px;
}

.auth-pane h2 {
  margin: 0 0 0.75rem;
  font-size: 1.4rem;
  font-weight: 600;
}

.auth-note {
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.6;
  color: var(--text-muted);
}

.auth-note a {
  color: var(--accent-bright);
  font-weight: 500;
}

.auth-pane label {
  display: block;
  margin: 1.1rem 0 0.35rem;
  font-size: 1rem;
  font-weight: 600;
  color: var(--text);
}

.auth-pane input[type="email"] {
  width: 100%;
  padding: 0.65rem 0.75rem;
  font: inherit;
  font-size: 1.05rem;
  color: var(--text);
  background: #0b1220;
  border: 1px solid #334155;
  border-radius: 6px;
}

.auth-pane input[type="email"]:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(96, 165, 250, 0.35);
}

.auth-submit {
  margin-top: 1.1rem;
  padding: 0.6rem 1.1rem;
  font: inherit;
  font-size: 1.05rem;
  font-weight: 600;
  color: #0b1220;
  background: var(--accent);
  border: none;
  border-radius: 6px;
  cursor: pointer;
}

.auth-submit:hover:not(:disabled) { background: var(--accent-bright); }
.auth-submit:disabled { opacity: 0.6; cursor: default; }

.auth-error {
  margin-top: 0.9rem;
  font-size: 1rem;
  font-weight: 500;
  color: #fca5a5;         /* brighter than --danger: this must be readable */
}

.auth-passkey { margin-top: 1.5rem; }

.anon-note {
  margin-top: 1rem;
  padding: 0.8rem 0.9rem;
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.55;
  color: var(--text);
  background: #16213a;
  border: 1px solid var(--border);
  border-radius: 8px;
}

.anon-note a {
  color: var(--accent-bright);
  font-weight: 600;
}

/* --------------------------------------------------------------- account */

.account-panel {
  max-width: 44rem;
  margin: 1.5rem auto 3rem;
  padding: 1.5rem;
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: 10px;
}

.account-panel h2 { margin: 0 0 0.5rem; font-size: 1.3rem; font-weight: 600; }
.account-panel h3 { margin: 1.5rem 0 0.4rem; font-size: 1.1rem; font-weight: 600; }

.account-email {
  font-size: 1rem;
  font-weight: 600;
  color: var(--text);
}

.passkey-list { list-style: none; margin: 0.75rem 0; padding: 0; }

.passkey-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.55rem 0.3rem;
  font-size: 1rem;
  font-weight: 500;
  border-bottom: 1px solid var(--border);
}

.passkey-add {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
  margin-top: 0.75rem;
}

.passkey-add label {
  font-size: 1rem;
  font-weight: 600;
  color: var(--text);
}

.passkey-add select {
  padding: 0.5rem 0.6rem;
  font: inherit;
  font-size: 1rem;
  font-weight: 500;
  color: var(--text);
  background: #0b1220;
  border: 1px solid #334155;
  border-radius: 6px;
}

.passkey-add .auth-submit { margin-top: 0; }

/* --------------------------------------------------------------- sharing */

.share-controls {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-top: 0.75rem;
}

.share-controls .auth-submit { margin-top: 0; }

.share-url-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-top: 0.9rem;
}

.share-url {
  flex: 1;
  padding: 0.55rem 0.7rem;
  font: inherit;
  font-size: 1rem;
  font-weight: 500;
  color: var(--text);
  background: #0b1220;
  border: 1px solid #334155;
  border-radius: 6px;
}

/* Read-only view: no Remove button, so two columns rather than three. */
.visit-item-readonly { grid-template-columns: 1fr auto; }

/* Expandable histories keep one row and one map pin per place. */
.visit-history-item { display: block; cursor: default; }
.visit-heading { display: flex; width: 100%; align-items: center; gap: .6rem;
  background: transparent; border: 0; color: var(--text); padding: .5rem 0;
  text-align: left; min-height: 44px; cursor: pointer; font: inherit; }
.visit-heading .visit-name { flex: 1; }
.visit-heading:focus-visible { outline: 2px solid var(--accent); }
.visit-history { padding: .4rem 0 .5rem .75rem; }
.visit-date-row, .visit-add-form { display: flex; flex-wrap: wrap; align-items: center;
  gap: .6rem; margin: .5rem 0; }
.visit-date-row input, .visit-add-form input { min-width: 0; flex: 1; min-height: 44px; }
.visit-add, .visit-state-link { display: block; min-height: 44px; background: transparent;
  border: 0; color: var(--accent); cursor: pointer; font: inherit; padding: .5rem 0; }
.visit-transfer { margin: .5rem 0 1rem; color: var(--text); }
.visit-transfer summary { cursor: pointer; padding: .5rem 0; }
.visit-transfer label { display: block; margin-top: 1rem; }
.visit-transfer input { max-width: 100%; margin-top: .5rem; }
.visit-transfer p { color: var(--muted); }
.visit-history[hidden], .visit-add-form[hidden] { display: none; }
.list-pane button:disabled, .list-pane input:disabled { opacity: .6; cursor: wait; }

.share-dates { display: flex; flex-direction: column; gap: .4rem; }