/* Nautical chart page. Loaded after style.css, which supplies the colour
   tokens, the masthead and the card styles this file builds on. */

/* ---------- masthead and page nav ---------- */

.chart-masthead { padding-bottom: 1rem; }

.chart-bar {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}

/* ---------- the chart itself ---------- */

/* The chart wants width, so it breaks out of the 980px column the rest of the
   site sits in. It is capped so it does not become a letterbox on a wide
   screen, and given a real height because a Leaflet map has none of its own. */
.chart-shell {
  position: relative;
  width: min(1400px, 100% - 2rem);
  margin: 0 auto 1.6rem;
}

#map {
  height: clamp(420px, 72vh, 900px);
  border: 1px solid var(--line);
  border-radius: 0;
  background: var(--panel);
  z-index: 0;              /* keep Leaflet panes under the readout strip */
}

.chart-noscript {
  padding: 1rem 1.2rem;
  color: var(--warn);
}

/* ---------- readout strip ---------- */

.chart-readout {
  display: flex;
  align-items: center;
  gap: .8rem;
  margin-top: .5rem;
  padding: .45rem .8rem;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 0;
  color: var(--ink-dim);
  font-size: .82rem;
  font-variant-numeric: tabular-nums;
  flex-wrap: wrap;
}
.ro-pos { color: var(--ink); letter-spacing: .01em; white-space: pre; }
.ro-sep { flex: 1; }
.ro-warn { color: var(--warn); }

/* ---------- Leaflet chrome, restyled to match the site ---------- */

.leaflet-container {
  background: #060808;
  font: inherit;
  border-radius: 0;
}
.leaflet-container.measuring { cursor: crosshair; }

.leaflet-bar,
.leaflet-control-layers {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 0;
  color: var(--ink);
}

.leaflet-bar a,
.leaflet-bar a:hover {
  background: var(--panel);
  color: var(--ink);
  border-bottom-color: var(--line);
}
.leaflet-bar a:hover { background: var(--panel-2); }

.leaflet-control-layers-expanded {
  padding: .6rem .8rem .6rem .7rem;
  font-size: .85rem;
}
.leaflet-control-layers-separator { border-top-color: var(--line); }
.leaflet-control-layers label { margin: .15rem 0; }

.leaflet-control-attribution {
  background: rgba(6, 8, 8, .82) !important;
  color: var(--ink-dim);
  font-size: .68rem;
}
.leaflet-control-attribution a { color: var(--accent); }

.leaflet-control-scale-line {
  background: rgba(6, 8, 8, .8);
  border-color: var(--ink-dim);
  color: var(--ink);
}

/* ---------- our own controls ---------- */

.chart-tool {
  padding: .5rem .6rem;
  font-size: .82rem;
}

.chart-opacity label {
  display: block;
  color: var(--ink-dim);
  margin-bottom: .3rem;
}
.chart-opacity input[type="range"] {
  width: 140px;
  accent-color: var(--accent);
  display: block;
}

.chart-measure { display: grid; gap: .35rem; }
.chart-measure button {
  font: inherit;
  font-size: .82rem;
  padding: .35rem .6rem;
  background: var(--panel-2);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: 0;
  cursor: pointer;
  text-align: left;
}
.chart-measure button:hover { border-color: var(--accent); }
.chart-measure button.on {
  background: rgba(255, 155, 0, .16);
  border-color: var(--warn);
  color: var(--warn);
}

.measure-label {
  background: rgba(6, 8, 8, .9);
  border: 1px solid var(--warn);
  border-radius: 0;
  color: var(--warn);
  padding: .18rem .45rem;
  font-size: .74rem;
  white-space: nowrap;
  width: auto !important;
  height: auto !important;
}

/* ---------- markers ---------- */

.site-marker .dot {
  display: block;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2px solid #060808;
  background: currentColor;
}
.site-marker .tag {
  position: absolute;
  left: 19px;
  top: -2px;
  padding: .05rem .35rem;
  border-radius: 0;
  background: rgba(6, 8, 8, .85);
  border: 1px solid currentColor;
  color: var(--ink);
  font-size: .68rem;
  white-space: nowrap;
  pointer-events: none;
}
.buoy-marker { color: var(--accent); }
.cam-marker  { color: var(--accent-2); }

/* ---------- popups ---------- */

.leaflet-popup-content-wrapper,
.leaflet-popup-tip {
  background: var(--panel);
  color: var(--ink);
  border: 1px solid var(--line);
}
.leaflet-popup-content-wrapper { border-radius: 0; }
.leaflet-popup-content { margin: .8rem .9rem; font-size: .85rem; }
.leaflet-popup-close-button { color: var(--ink-dim) !important; }

.marker-popup h3 {
  margin: 0 0 .35rem;
  font-size: .95rem;
  font-weight: 600;
}
.marker-popup .when {
  margin: 0 0 .5rem;
  color: var(--ink-dim);
  font-size: .76rem;
}
.marker-popup .more { margin: .6rem 0 0; font-size: .78rem; }
.marker-popup a { color: var(--accent); }

.popup-readings { border-collapse: collapse; width: 100%; }
.popup-readings th {
  text-align: left;
  font-weight: 400;
  color: var(--ink-dim);
  padding: .12rem .7rem .12rem 0;
  white-space: nowrap;
}
.popup-readings td {
  text-align: right;
  font-variant-numeric: tabular-nums;
  padding: .12rem 0;
}

.cam-popup img {
  display: block;
  width: 280px;
  max-width: 100%;
  border-radius: 0;
  border: 1px solid var(--line);
}

/* Chart identify results. Attribute names are the chart's own short codes, so
   they are set apart rather than dressed up as plain English. */
.identify { max-height: 300px; overflow-y: auto; }
.identify hr {
  border: 0;
  border-top: 1px solid var(--line);
  margin: .5rem 0;
}
.id-attrs {
  color: var(--ink-dim);
  font-size: .76rem;
  font-variant-numeric: tabular-nums;
}

/* ---------- notes below the chart ---------- */

.chart-notes .sources sub { font-size: .7em; }
.chart-notes .sources b { color: var(--ink); font-weight: 600; }

@media (max-width: 620px) {
  .chart-opacity input[type="range"] { width: 100px; }
  #map { height: clamp(360px, 64vh, 620px); }
}

/* ---------- chart image and imagery lift ---------- */

/* The chart arrives as one image per view rather than a grid of tiles, so that
   soundings near what would have been a tile edge are not drawn twice or
   dropped. While a new one loads the old one stretches, which is what every
   chart viewer does. */
.chart-image {
  image-rendering: auto;
  transition: opacity .12s linear;
}

/* Deep water photographs almost black. Without this the lake reads as missing
   imagery next to a bright shoreline. Picture only: the chart above is not
   filtered, so no charted depth, contour or symbol is altered. */
.lifted-imagery {
  filter: brightness(1.45) contrast(0.92) saturate(1.15);
}


/* ---------- small screens ---------- */

@media (max-width: 760px) {

  /* With the label gone the marker is a 14px dot, which is too small to hit
     with a thumb. Widen the target without widening the dot. */
  .site-marker::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 42px;
    height: 42px;
    margin: -21px 0 0 -21px;
  }

  /* The layer list is collapsed to a button here. Leaflet's icon is dark grey
     artwork meant for a white control, so it needs inverting to be visible. */
  .leaflet-control-layers-toggle {
    filter: invert(1) brightness(1.6);
    width: 34px;
    height: 34px;
    background-size: 20px 20px;
  }

  .chart-tool { padding: .4rem .45rem; font-size: .78rem; }
  .chart-measure { gap: .25rem; }
  .chart-measure button { padding: .3rem .5rem; font-size: .78rem; }
  .chart-opacity label { font-size: .72rem; margin-bottom: .15rem; }
  .chart-opacity input[type="range"] { width: 108px; }

  /* Controls stay clear of each other rather than stacking into one block. */
  .leaflet-top .leaflet-control { margin-top: 8px; }
  .leaflet-right .leaflet-control { margin-right: 8px; }
  .leaflet-left .leaflet-control { margin-left: 8px; }

  .leaflet-control-attribution { font-size: .6rem; }

  /* The readout is three separate facts, so let them sit on their own lines
     instead of being pushed to opposite edges of a narrow screen. */
  .chart-readout {
    gap: .35rem .6rem;
    padding: .5rem .7rem;
    font-size: .78rem;
  }
  .ro-sep { display: none; }
  .ro-pos { flex-basis: 100%; }

  .chart-shell { width: calc(100% - 1.2rem); }
  #map { height: clamp(340px, 58vh, 560px); }

  .masthead { padding: 1.4rem 0 .9rem; }
  .chart-masthead .sub { font-size: .85rem; }

  .cam-popup img { width: 230px; }
  .leaflet-popup-content { margin: .7rem .8rem; font-size: .82rem; }
}

@media (max-width: 420px) {
  .chart-opacity input[type="range"] { width: 92px; }
  #map { height: clamp(320px, 54vh, 460px); }
}

/* ---------- depths notice above the chart ---------- */

/* The one thing on this page that could put somebody somewhere they did not
   mean to be. The audience is American and reads depths in feet, and the chart
   is drawn in meters by the S-52 standard with no option to change it, so the
   notice is stated once, large, before the chart rather than only beside it. */
.depth-notice {
  display: flex;
  align-items: baseline;
  gap: .35rem .9rem;
  flex-wrap: wrap;
  margin: 0 0 .7rem;
  padding: .75rem 1.05rem;
  background: rgba(255, 155, 0, .12);
  border: 1px solid rgba(255, 155, 0, .5);
  border-left-width: 5px;
  border-radius: 0;
}

.depth-notice strong {
  color: var(--warn);
  font-size: clamp(1.1rem, 3.6vw, 1.55rem);
  font-weight: 700;
  letter-spacing: .07em;
  line-height: 1.15;
}

.depth-notice span {
  color: var(--ink);
  font-size: .88rem;
}

@media (max-width: 760px) {
  .depth-notice {
    padding: .6rem .8rem;
    gap: .2rem;
  }
  .depth-notice strong { letter-spacing: .05em; }
  .depth-notice span { font-size: .8rem; flex-basis: 100%; }
}

/* ==========================================================================
   Theme alignment with the chartplotter reference

   The map chrome follows the same rules as the rest of the site: plain sans at
   normal letter spacing, white for readings, grey for labels, blue only for a
   selected state. The previous pass set all of this in letter-spaced uppercase
   monospace, which is what made it read as a terminal rather than a device.
   ========================================================================== */

.chart-measure button.on {
  background: var(--warn);
  border-color: var(--warn);
  color: #1a1000;
  font-weight: 500;
}

.leaflet-control-scale-line {
  border-color: var(--ink-dim);
  font-variant-numeric: tabular-nums;
}

/* The position readout is a reading, so it is white, like every other reading
   on the site. */
.chart-readout { font-variant-numeric: tabular-nums; }
.ro-pos {
  color: var(--ink);
  font-weight: 500;
  font-size: .86rem;
}
.ro-zoom { font-size: .78rem; }

/* The prompt shown when there is nothing to report is not a reading. */
.ro-pos.ro-idle { color: var(--ink-dim); font-weight: 400; }

/* The depths notice is the one caution on the page. */
.depth-notice {
  background: transparent;
  border-color: var(--warn);
  border-left-width: 3px;
}
.depth-notice strong { color: var(--warn); letter-spacing: 0; }
.depth-notice span { color: var(--ink-dim); }

.marker-popup h3 {
  font-size: .92rem;
  font-weight: 500;
  color: var(--ink);
}
.popup-readings td {
  color: var(--ink);
  font-weight: 500;
}
.identify b { color: var(--ink); font-weight: 500; }

.site-marker .tag { font-size: .7rem; }

/* ---------- marker name tags ---------- */

/* Hidden by default. Three tags sitting permanently across the chart is what
   made the phone layout unreadable, and two of the cameras are close enough
   together that their tags overlap at any wide zoom. They come back once the
   markers have separated, and hovering one always names it. */
.site-marker .tag { display: none; }

@media (min-width: 761px) {
  .leaflet-container.tags-on .site-marker .tag,
  .site-marker:hover .tag { display: block; }
}

/* The readout is amber because amber means "this is a reading". The prompt
   that appears when there is nothing to report is not a reading. */
.ro-pos.ro-idle {
  color: var(--ink-dim);
  font-weight: 400;
}

/* On a narrow screen the scale bar and the attribution line share the bottom
   edge and run into each other. Lift the scale clear of it. */
@media (max-width: 760px) {
  .leaflet-bottom.leaflet-left .leaflet-control-scale { margin-bottom: 20px; }
}

/* ---------- the single depth answer ---------- */

/* Tapping a depth contour returns the contour and the area on both sides of
   it. All true, all at once, and as three separate blocks it read like the
   chart disagreeing with itself. One line, feet first. */
.id-depth {
  margin-bottom: .15rem;
  line-height: 1.45;
}
.id-depth b {
  color: var(--ink);
  font-size: .95rem;
  font-weight: 500;
}
.id-sub {
  color: var(--ink-dim);
  font-size: .8rem;
  font-weight: 400;
}

/* Leaflet's control container is a sibling of the map panes and sits above
   them, while the popup pane is nested inside the map pane. That makes the
   stacking unwinnable with z-index alone, so the left-hand tools step aside
   while a popup is open instead. Narrow screens only, where they collide. */
@media (max-width: 760px) {
  .leaflet-container.popup-open .leaflet-control-container .leaflet-left,
  .leaflet-container.popup-open .leaflet-control-container .leaflet-top.leaflet-right {
    opacity: 0;
    pointer-events: none;
  }
}

.identify-popup .leaflet-popup-content { word-break: break-word; }

/* ---------- shipwreck markers ---------- */

/* Distinct from the buoy and the cameras, which are live readings. A wreck is
   a fixed hazard, so it gets the caution colour and a ring rather than a
   filled dot. */
.wreck-marker { color: var(--warn); }
.wreck-marker .dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: transparent;
  border: 2.5px solid currentColor;
  box-shadow: 0 0 0 1.5px #060808;
}
.wreck-popup .wp-cause {
  margin: .2rem 0 0;
  color: var(--warn);
  font-size: .8rem;
}