/* tracker-shell.css — the masthead, the account, the tab row, panels, the stat strip, the banner and the controls.
   One of nine sheets that were one file, cut at its section marks and
   linked in the same order (tracker-base, tracker-shell, tracker-yard, tracker-widgets, tracker-map, tracker-sea, tracker-extras, tracker-barter, tracker-recent), so the cascade is what it was: a
   rule here still loses to the same rule in a later sheet. When moving a
   rule between sheets, check nothing later relies on beating it. */

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

.masthead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 24px 0 18px;
  flex-wrap: wrap;
}

.brand { display: flex; align-items: center; gap: 13px; }

.brand-mark {
  width: 40px;
  height: 40px;
  border-radius: var(--r-tile);
  background: linear-gradient(160deg, #123a5e, #0a1f38);
  border: 1px solid rgba(var(--line-rgb), 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  color: var(--blue);
  flex: none;
}

.brand-name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 19px;
  letter-spacing: 0.07em;
  color: var(--ink-hi);
  text-transform: uppercase;
  line-height: 1.1;
}

.brand-sub { font-size: 12px; color: var(--ink-mute); letter-spacing: 0.03em; }

.masthead-actions { display: flex; gap: 8px; flex-wrap: wrap; }

.ghost-btn {
  background: none;
  border: 1px solid var(--line-btn);
  color: var(--ink-dim);
  border-radius: var(--r-btn);
  padding: 7px 15px;
  font-size: 12.5px;
  font-weight: 600;
}

.ghost-btn:hover:not(:disabled) { color: var(--ink-hi); border-color: var(--line-btn-hi); }
.ghost-btn.on { color: var(--teal); }

/* ---- account ------------------------------------------------------ *
   Present only where the deployment offers sync; otherwise #account is
   empty and this costs nothing. The chip is the sync status as much as
   it is the name -- the dot is the whole of the reporting, so a normal
   save never interrupts anything. */

.account { display: inline-flex; }

.account-chip { display: inline-flex; align-items: center; gap: 8px; }
.account-avatar { border-radius: 50%; display: block; }
.account-name { font-weight: 600; }

.account-note {
  position: relative;
  padding-left: 12px;
  font-size: 11.5px;
  font-weight: 500;
  color: var(--ink-mute);
  letter-spacing: 0.02em;
}

.account-note::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  width: 6px;
  height: 6px;
  margin-top: -3px;
  border-radius: 50%;
  background: var(--ink-faint);
}

.account-chip.idle .account-note::before { background: var(--teal); }
.account-chip.syncing .account-note::before { background: var(--blue); animation: account-pulse 1.1s ease-in-out infinite; }
.account-chip.conflict .account-note::before { background: var(--amber); }
.account-chip.error .account-note::before { background: var(--red); }
.account-chip.conflict, .account-chip.error { border-color: var(--red-edge); }

@keyframes account-pulse { 50% { opacity: 0.35; } }

/* A steady dot says as much as a blinking one, and does not drag the eye
   away from the screen the user is actually reading. */
@media (prefers-reduced-motion: reduce) {
  .account-chip.syncing .account-note::before { animation: none; }
}

/* The name is the least useful part on a narrow screen: the avatar says
   who, and the dot says whether. */
@media (max-width: 720px), ((max-height: 520px) and (pointer: coarse)) {
  .account-name { display: none; }
}

/* ---- the dock ------------------------------------------------------ *
   Every section as a cell, the icon over the name, all of them at once
   and none past an edge: the same cells the phone's thumb bar draws,
   across the top of a wide screen. It sticks to the top edge as the
   page scrolls, the way the thumb bar sticks to the bottom of a phone,
   so a section is always one press away. The groups -- the yard, the
   sea, the harbour -- are told apart by a hairline. */

.tabs {
  position: sticky;
  top: 0;
  z-index: 40;
  display: flex;
  align-items: stretch;
  gap: 2px;
  margin: 0 0 22px;
  padding: 4px;
  border-radius: var(--r-panel);
  border: 1px solid var(--line);
  background: var(--panel-strong);
  backdrop-filter: blur(10px);
}

.tab {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 8px 4px 7px;
  background: none;
  border: none;
  border-radius: var(--r-btn);
  font-family: var(--font-display);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--ink-off);
  white-space: nowrap;
  transition: background 0.12s ease, color 0.12s ease;
}

.tab:hover { color: var(--ink-hi); background: rgba(var(--line-rgb), 0.08); }
.tab.active { color: var(--blue-hi); background: rgba(var(--blue-rgb), 0.14); }
.tab.active::after {
  content: '';
  position: absolute;
  left: 22%;
  right: 22%;
  bottom: 2px;
  height: 2px;
  border-radius: 1px;
  background: var(--blue-bar);
}
.tab-label { max-width: 100%; overflow: hidden; text-overflow: ellipsis; }

.tab-count {
  position: absolute;
  top: 3px;
  right: 50%;
  margin-right: -24px;
  font-size: 10px;
  font-weight: 700;
  font-family: var(--font-body);
  background: var(--blue-glow);
  color: var(--blue);
  border-radius: 10px;
  padding: 0 6px;
  line-height: 15px;
}

/* Between a phone and a wide screen the names go and the icons stay,
   each still named on hover and by its digit. */
@media (max-width: 899px) {
  .tab-label { display: none; }
  .tab { padding: 9px 2px 8px; }
  .tab-count { margin-right: -18px; }
}

/* The masthead on a phone: one line -- the mark and the name, then
   Undo, the account and the menu as glyphs. Find and the trip log
   are the first things in the menu. */
.menu-btn { white-space: nowrap; }
@media (max-width: 720px), ((max-height: 520px) and (pointer: coarse)) {
  .masthead { flex-wrap: nowrap; gap: 8px; padding: 14px 0 12px; }
  .masthead-actions { flex: none; flex-wrap: nowrap; gap: 6px; }
  .masthead-actions .ghost-btn { padding: 0; width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; font-size: 16px; }
  .masthead-actions .account .ghost-btn { width: auto; padding: 0 10px; font-size: 12.5px; white-space: nowrap; }
  /* After the button rule above, which would otherwise show them. */
  .masthead-actions .wide-only, .masthead-actions .btn-label { display: none; }
  .brand { gap: 9px; min-width: 0; }
  .brand-mark { width: 34px; height: 34px; font-size: 17px; }
  .brand-name { font-size: 13.5px; letter-spacing: 0.06em; }
  .brand-sub { display: none; }
}

/* ---- panels ------------------------------------------------------- */

.screen { display: flex; flex-direction: column; gap: 20px; }

.panel {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r-panel);
  backdrop-filter: blur(6px);
  overflow: hidden;
}

.panel-head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 14px 20px 12px;
  border-bottom: 1px solid var(--line-head);
  flex-wrap: wrap;
}

.panel-title {
  font-family: var(--font-display);
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin: 0;
  color: var(--blue);
}

.panel-title.teal { color: var(--teal); }
.panel-title.amber { color: var(--amber); }
.panel-title.red { color: var(--red); }
.panel-title.plain { color: var(--ink-hi); }

.panel-sub { font-size: 12px; color: var(--ink-faint); }
.panel-spacer { flex: 1; }

.empty { color: var(--ink-faint); font-size: 13px; text-align: center; padding: 34px 20px; }

/* ---- stat strip --------------------------------------------------- */

.stats {
  display: flex;
  flex-wrap: wrap;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r-panel);
  backdrop-filter: blur(6px);
  overflow: hidden;
}

.stat { flex: 1 1 170px; padding: 16px 22px; border-right: 1px solid rgba(var(--line-rgb), 0.09); }
.stat:last-child { border-right: none; }
.stat-k { font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-mute); margin-bottom: 5px; }
.stat-v { font-family: var(--font-display); font-size: 21px; font-weight: 600; color: var(--ink-hi); }
.stat-v.teal { color: var(--teal); }
.stat-v.amber { color: var(--amber); }
.stat-v.blue { color: var(--blue-hi); }
.stat-v.off { color: var(--ink-off); }
.stat-sub { font-size: 11.5px; color: var(--ink-faint); margin-top: 2px; }

/* ---- ready-to-craft banner ---------------------------------------- */

.readybar {
  background: linear-gradient(90deg, var(--wash-teal), var(--panel));
  border: 1px solid rgba(78, 201, 174, 0.3);
  border-radius: var(--r-panel);
  padding: 14px 20px;
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  backdrop-filter: blur(6px);
}

.readybar-label {
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--teal);
  white-space: nowrap;
}

.readybar-list { display: flex; gap: 8px; flex-wrap: wrap; }

.ready-chip {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(78, 201, 174, 0.1);
  border: 1px solid rgba(78, 201, 174, 0.35);
  border-radius: var(--r-btn);
  padding: 6px 12px;
  color: var(--ink);
  font-size: 12.5px;
  font-weight: 600;
}

.ready-chip:hover { background: rgba(78, 201, 174, 0.22); }
.ready-chip img { width: 22px; height: 22px; border-radius: 4px; }

/* ---- controls ----------------------------------------------------- */

.controls { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }

.field {
  flex: 1 1 220px;
  background: var(--panel);
  border: 1px solid rgba(var(--line-rgb), 0.16);
  border-radius: var(--r-btn);
  padding: 9px 14px;
  color: var(--ink);
  font-size: 13px;
}

.field::placeholder { color: var(--ink-faint); }

.chips { display: flex; gap: 6px; flex-wrap: wrap; }

.chip {
  background: transparent;
  border: 1px solid rgba(var(--line-rgb), 0.2);
  color: var(--ink-off);
  border-radius: 18px;
  padding: 6px 14px;
  font-size: 12px;
  font-weight: 600;
}

.chip:hover { color: var(--ink-hi); }
.chip.active { background: rgba(var(--blue-rgb), 0.18); border-color: rgba(var(--blue-rgb), 0.55); color: var(--blue-hi); }

.select {
  background: var(--panel-solid);
  border: 1px solid rgba(var(--line-rgb), 0.25);
  color: var(--ink);
  border-radius: var(--r-btn);
  padding: 8px 12px;
  font-size: 13px;
}