/* LilyJoTracker v0.2.7n37b — Tracker Visual Cleanup
   Built on n37 Maritime Theme Foundation.
   Tracker-page only. No API/data/refresh changes.
*/

body.lilyjo-tracker-page-n37b #content{
  --tr37-gap:16px;
  --tr37-card-pad:18px;
  --tr37-radius:var(--lj-theme-radius-lg,18px);
  --tr37-radius-sm:var(--lj-theme-radius-md,14px);
  --tr37-surface:var(--lj-surface,#f2f8fa);
  --tr37-surface-2:var(--lj-surface-2,#e7f2f6);
  --tr37-surface-3:var(--lj-surface-3,#dcecf2);
  --tr37-border:var(--lj-border,#b8d3de);
  --tr37-border-strong:var(--lj-border-strong,#92b8c8);
  --tr37-text:var(--lj-text,#102b39);
  --tr37-muted:var(--lj-muted,#607987);
  --tr37-ocean:var(--lj-ocean,#0b789f);
  --tr37-teal:var(--lj-teal,#168e9f);
  --tr37-success:var(--lj-success,#15975f);
  --tr37-warning:var(--lj-warning,#d99a23);
  --tr37-danger:var(--lj-danger,#d95b62);
  color:var(--tr37-text);
}

body.lilyjo-tracker-page-n37b #content.tracker-cleanup-n37b{
  width:100%;
  max-width:1540px;
  margin:0 auto;
  padding-bottom:28px;
}

/* Existing Tracker structure remains intact; only spacing is normalized. */
body.lilyjo-tracker-page-n37b #content .grid{
  gap:var(--tr37-gap);
}
body.lilyjo-tracker-page-n37b #content > .grid + .grid,
body.lilyjo-tracker-page-n37b #content > * + .grid{
  margin-top:var(--tr37-gap)!important;
}

/* Main cards use the same visual language as n37a Dashboard. */
body.lilyjo-tracker-page-n37b #content .card.tr37-card{
  position:relative;
  overflow:hidden;
  padding:var(--tr37-card-pad);
  border:1px solid var(--tr37-border);
  border-radius:var(--tr37-radius);
  background:
    linear-gradient(145deg,
      color-mix(in srgb,var(--tr37-surface) 96%,white 4%),
      color-mix(in srgb,var(--tr37-surface-2) 70%,white 30%));
  box-shadow:0 8px 24px rgba(8,52,75,.07);
}

body.lilyjo-tracker-page-n37b #content .card.tr37-card::before{
  content:"";
  position:absolute;
  left:0; top:0; right:0;
  height:3px;
  background:linear-gradient(90deg,var(--tr37-ocean),var(--tr37-teal));
  opacity:.78;
}

body.lilyjo-tracker-page-n37b #content .card.tr37-card .card-title{
  display:flex;
  align-items:center;
  gap:9px;
  min-height:28px;
  margin:0 0 14px;
  padding:0 0 10px;
  border-bottom:1px solid color-mix(in srgb,var(--tr37-border) 72%,transparent);
  color:var(--tr37-text);
  font-size:16px;
  line-height:1.2;
  font-weight:800;
  letter-spacing:-.01em;
}

/* Tiny section marker without changing tracker.js markup. */
body.lilyjo-tracker-page-n37b #content .tr37-tracking-card .card-title::before,
body.lilyjo-tracker-page-n37b #content .tr37-position-card .card-title::before,
body.lilyjo-tracker-page-n37b #content .tr37-nmea-card .card-title::before,
body.lilyjo-tracker-page-n37b #content .tr37-telemetry-card .card-title::before{
  display:inline-grid;
  place-items:center;
  width:25px;
  height:25px;
  flex:0 0 25px;
  border-radius:8px;
  color:var(--tr37-ocean);
  background:color-mix(in srgb,var(--tr37-ocean) 9%,white 91%);
  font-size:13px;
  font-weight:900;
}
body.lilyjo-tracker-page-n37b #content .tr37-tracking-card .card-title::before{content:"◎"}
body.lilyjo-tracker-page-n37b #content .tr37-position-card .card-title::before{content:"⌖"}
body.lilyjo-tracker-page-n37b #content .tr37-nmea-card .card-title::before{content:"≋"}
body.lilyjo-tracker-page-n37b #content .tr37-telemetry-card .card-title::before{content:"◉"}

/* Unified metric tiles. */
body.lilyjo-tracker-page-n37b #content .metric.tr37-metric{
  min-width:0;
  min-height:92px;
  padding:14px 15px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:7px;
  border:1px solid color-mix(in srgb,var(--tr37-border) 86%,transparent);
  border-radius:var(--tr37-radius-sm);
  background:
    linear-gradient(150deg,
      color-mix(in srgb,var(--tr37-surface-2) 76%,white 24%),
      color-mix(in srgb,var(--tr37-surface) 96%,white 4%));
  box-shadow:none;
}

body.lilyjo-tracker-page-n37b #content .metric.tr37-metric small{
  display:block;
  margin:0;
  color:var(--tr37-muted);
  font-size:10.5px;
  line-height:1.2;
  font-weight:800;
  letter-spacing:.105em;
  text-transform:uppercase;
}

body.lilyjo-tracker-page-n37b #content .metric.tr37-metric :is(strong,b){
  min-width:0;
  color:var(--tr37-text);
  font-size:21px;
  line-height:1.15;
  font-weight:800;
  letter-spacing:-.025em;
  overflow-wrap:anywhere;
}

/* Information hierarchy */
body.lilyjo-tracker-page-n37b #content .tr37-tracking-card .metric:first-child strong{
  color:var(--tr37-success);
}
body.lilyjo-tracker-page-n37b #content .tr37-tracking-card .metric:nth-child(2) strong,
body.lilyjo-tracker-page-n37b #content .tr37-position-card .metric strong,
body.lilyjo-tracker-page-n37b #content .tr37-telemetry-card .metric strong{
  color:color-mix(in srgb,var(--tr37-ocean) 82%,var(--tr37-text) 18%);
}

/* Last-known-position warning becomes a visible but calm notice. */
body.lilyjo-tracker-page-n37b #content .tr37-position-card > .module-note{
  margin:-2px 0 14px;
  padding:10px 12px;
  border:1px solid color-mix(in srgb,var(--tr37-warning) 34%,var(--tr37-border) 66%);
  border-radius:11px;
  background:color-mix(in srgb,var(--tr37-warning) 10%,white 90%);
  color:#795813;
  font-size:12px;
  line-height:1.4;
}

/* NMEA diagnostic text gets its own subdued footer panel. */
body.lilyjo-tracker-page-n37b #content .tr37-nmea-card > .module-note{
  margin:14px 0 0;
  padding:10px 12px;
  border-radius:10px;
  border:1px solid color-mix(in srgb,var(--tr37-border) 76%,transparent);
  background:color-mix(in srgb,var(--tr37-surface-2) 72%,transparent);
  color:var(--tr37-muted);
  font-size:11.5px;
  line-height:1.42;
  overflow-wrap:anywhere;
}

body.lilyjo-tracker-page-n37b #content .test-badge{
  margin-left:auto;
  padding:5px 8px;
  border-radius:999px;
  background:color-mix(in srgb,var(--tr37-warning) 16%,white 84%);
  color:#8a6114;
  border:1px solid color-mix(in srgb,var(--tr37-warning) 35%,transparent);
  font-size:9.5px;
  font-weight:900;
  letter-spacing:.06em;
}

/* Manual-position action becomes part of the Tracking card instead of looking
   like an unrelated mini-module. */
body.lilyjo-tracker-page-n37b #content .mp16-launch.tr37-manual-position{
  margin-top:14px;
  padding:12px 13px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  border:1px solid color-mix(in srgb,var(--tr37-ocean) 22%,var(--tr37-border) 78%);
  border-radius:12px;
  background:
    linear-gradient(90deg,
      color-mix(in srgb,var(--tr37-ocean) 7%,white 93%),
      color-mix(in srgb,var(--tr37-surface-2) 74%,white 26%));
  box-shadow:none;
}

body.lilyjo-tracker-page-n37b #content .tr37-manual-position > div{
  min-width:0;
}
body.lilyjo-tracker-page-n37b #content .tr37-manual-position b{
  display:block;
  margin-bottom:3px;
  color:var(--tr37-text);
  font-size:13px;
}
body.lilyjo-tracker-page-n37b #content .tr37-manual-position span{
  display:block;
  color:var(--tr37-muted);
  font-size:11.5px;
  line-height:1.35;
}
body.lilyjo-tracker-page-n37b #content .tr37-manual-position .mp16-btn{
  flex:0 0 auto;
  min-height:38px;
  padding:8px 12px;
  border-radius:10px;
  border:1px solid color-mix(in srgb,var(--tr37-ocean) 55%,#075f81 45%);
  background:linear-gradient(145deg,var(--tr37-ocean),#08698f);
  color:#fff;
  font-weight:800;
  box-shadow:0 6px 16px rgba(8,105,143,.15);
}

/* Later source/priority widgets are visually absorbed into the n37 system.
   They keep their own DOM and JS behaviour. */
body.lilyjo-tracker-page-n37b #content .tr37-source-panel{
  margin-top:var(--tr37-gap);
  padding:15px 16px;
  border:1px solid var(--tr37-border)!important;
  border-radius:var(--tr37-radius)!important;
  background:
    linear-gradient(145deg,
      color-mix(in srgb,var(--tr37-surface) 95%,white 5%),
      color-mix(in srgb,var(--tr37-surface-2) 72%,white 28%))!important;
  box-shadow:0 7px 20px rgba(8,52,75,.055)!important;
  color:var(--tr37-text);
}

body.lilyjo-tracker-page-n37b #content :is(.ps24eyebrow,.ps25eyebrow){
  color:var(--tr37-muted)!important;
  font-size:10px!important;
  line-height:1.2;
  font-weight:850!important;
  letter-spacing:.105em!important;
}

body.lilyjo-tracker-page-n37b #content .ps25head{
  gap:12px;
  align-items:center;
}

body.lilyjo-tracker-page-n37b #content :is(.ps24loading,.ps24error){
  padding:10px 12px;
  border-radius:10px;
  color:var(--tr37-muted);
  background:color-mix(in srgb,var(--tr37-surface-2) 72%,transparent);
}
body.lilyjo-tracker-page-n37b #content .ps24error{
  color:#8d3e43;
  border:1px solid color-mix(in srgb,var(--tr37-danger) 30%,transparent);
  background:color-mix(in srgb,var(--tr37-danger) 8%,white 92%);
}

/* Equal visual weight between cards in each existing row. */
body.lilyjo-tracker-page-n37b #content .tr37-card > .grid{
  align-items:stretch;
}
body.lilyjo-tracker-page-n37b #content .tr37-card > .grid > .metric{
  height:100%;
}

/* Classic theme keeps the cleanup but falls back to light classic surfaces. */
html[data-tracker-theme="classic"] body.lilyjo-tracker-page-n37b #content .card.tr37-card{
  background:rgba(255,255,255,.97);
}
html[data-tracker-theme="classic"] body.lilyjo-tracker-page-n37b #content .metric.tr37-metric{
  background:#f8fbfc;
}
html[data-tracker-theme="classic"] body.lilyjo-tracker-page-n37b #content .tr37-source-panel{
  background:#fff!important;
}

/* Responsive behaviour */
@media(max-width:1050px){
  body.lilyjo-tracker-page-n37b #content > .grid.grid-2{
    grid-template-columns:1fr;
  }
}
@media(max-width:720px){
  body.lilyjo-tracker-page-n37b #content{
    --tr37-gap:12px;
    --tr37-card-pad:14px;
  }
  body.lilyjo-tracker-page-n37b #content .grid.grid-2{
    grid-template-columns:1fr;
  }
  body.lilyjo-tracker-page-n37b #content .metric.tr37-metric{
    min-height:78px;
  }
  body.lilyjo-tracker-page-n37b #content .mp16-launch.tr37-manual-position{
    align-items:stretch;
    flex-direction:column;
  }
  body.lilyjo-tracker-page-n37b #content .tr37-manual-position .mp16-btn{
    width:100%;
  }
}