/* onNAV Storm design site. Pico 2.1.1 in dark, the house tweak sheet, then the pieces the
   pages draw with. The colors are onNAV's (MarNav's chrome gray,
   its link blue, Storm's teal). The app's own components live in storm.css. */
/* cspell:ignore nums dont dodont -- CSS's tabular-nums, and the Writing page's do and don't boxes. */

:root[data-theme="dark"] {
  --pico-primary: #6ea8e8;
  --pico-primary-background: #0c60ab;
  --pico-primary-border: #0c60ab;
  --pico-primary-underline: rgba(110, 168, 232, 0.5);
  --pico-primary-hover: #9cc4f0;
  --pico-primary-hover-background: #1570c4;
  --pico-primary-hover-border: #1570c4;
  --pico-primary-inverse: #fff;
  --pico-primary-focus: rgba(110, 168, 232, 0.35);
  --pico-background-color: #1e1c24;
  --pico-card-background-color: #373340;
  --pico-card-sectioning-background-color: #45434e;
}

body {
  background: #1e1c24;
  min-height: 100vh;
}

/* House tweak sheet: see Workshop Web/house-style.md. */
h1,
h2,
h3,
h4 {
  margin-bottom: 0.2em;
}
table td {
  vertical-align: top;
}
table th {
  font-weight: bold;
}
table {
  --pico-background-color: transparent;
}

h2 {
  margin-top: 2.5rem;
}
.lede {
  font-size: 1.2rem;
}
.muted {
  color: var(--pico-muted-color);
}
.site-title img {
  border-radius: 22%;
  vertical-align: middle;
}

:root {
  --surface: #373340;
  --surface-2: #45434e;
  --edge: rgba(255, 255, 255, 0.12);
  --secondary: rgba(235, 235, 245, 0.62);
  --brand: #0e8ea5;
  --warning: #d93a2b;
  --watch: #f5a524;
  --radius: 18px;
}

/* The verdict box at the top of a page. */
.verdict {
  border-left: 4px solid var(--brand);
  background: var(--surface);
  padding: 1rem 1.25rem;
  border-radius: var(--radius);
  margin: 1.25rem 0;
}
.rule {
  background: var(--surface);
  border: 1px solid var(--edge);
  border-left: 4px solid var(--brand);
  border-radius: var(--radius);
  padding: 14px 18px;
  margin: 16px 0;
}
.rule b:first-child {
  color: #3fc2d8;
}
/* An open question, or a risk: amber, never red. Red is for warnings in the app. */
.open {
  background: rgba(245, 165, 36, 0.07);
  border: 1px solid rgba(245, 165, 36, 0.35);
  border-left: 4px solid var(--watch);
  border-radius: var(--radius);
  padding: 12px 16px;
  margin: 12px 0;
  font-size: 0.95rem;
}
.open b:first-child {
  color: var(--watch);
}

.cols {
  display: grid;
  gap: 12px;
}
.g2 {
  grid-template-columns: repeat(auto-fill, minmax(min(400px, 100%), 1fr));
}
.g3 {
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}
.g4 {
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
}
.card {
  background: var(--surface);
  border: 1px solid var(--edge);
  border-radius: var(--radius);
  padding: 16px;
}
.card h3 {
  margin-top: 0;
  font-size: 1.05rem;
}
.card p,
.card li {
  font-size: 0.92rem;
  margin: 6px 0 0;
}
.card ul {
  margin: 6px 0 0;
  padding-left: 1.1rem;
}

/* Screenshots: phone shots at 320 wide, every one opens big. */
.shots {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 1.25rem;
  margin-bottom: 1rem;
}
figure {
  margin: 0;
}
figure img,
.shots img {
  display: block;
  max-width: 100%;
  height: auto;
}
figcaption {
  font-size: 0.85rem;
  color: var(--pico-muted-color);
  margin-top: 0.4rem;
}
/* A lettered shot with its pins, as the mockup kit lays one out. */
.shot {
  display: grid;
  grid-template-columns: minmax(0, 340px) 1fr;
  gap: 28px;
  align-items: start;
  padding: 24px 0;
  border-bottom: 1px solid var(--edge);
}
.shot.wide {
  grid-template-columns: 1fr;
}
.shot.wide img {
  max-width: 900px;
}
.shot img {
  width: 100%;
  cursor: zoom-in;
}
.shot h3 {
  margin: 0 0 6px;
}
.shot .letter {
  display: inline-grid;
  place-items: center;
  min-width: 30px;
  height: 30px;
  border-radius: 7px;
  background: #f4f4f6;
  color: #1d1d1f;
  font-weight: 700;
  margin-right: 8px;
}
ol.pins {
  list-style: none;
  padding: 0;
  margin: 12px 0 0;
  counter-reset: p;
}
ol.pins li {
  counter-increment: p;
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: 8px;
  margin-bottom: 8px;
  font-size: 0.95rem;
}
ol.pins li::before {
  content: counter(p);
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #c026d3;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  display: grid;
  place-items: center;
  margin-top: 2px;
}

/* Design page samples: the app's own components (storm.css) on the page. */
.specimen {
  background: #2a2733;
  border: 1px solid var(--edge);
  border-radius: var(--radius);
  padding: 20px;
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
}
.specimen.col {
  flex-direction: column;
  align-items: stretch;
  max-width: 400px;
}
.specimen.chrome {
  background: #373340;
}
.example {
  display: grid;
  grid-template-columns: minmax(0, 400px) 1fr;
  gap: 24px;
  align-items: start;
  padding: 18px 0;
  border-bottom: 1px solid var(--edge);
}
.example h3 {
  margin: 0 0 4px;
  font-size: 1.1rem;
}
.example p {
  font-size: 0.95rem;
  margin: 4px 0;
}
td.spec,
td.use {
  font-size: 0.85rem;
  color: var(--secondary);
}
.swatch {
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--edge);
  background: var(--surface);
}
.swatch .chip {
  height: 84px;
  display: flex;
  align-items: flex-end;
  padding: 10px;
  font: 600 13px ui-monospace, Menlo, monospace;
}
.swatch .meta {
  padding: 10px 12px 12px;
}
.swatch .meta b {
  display: block;
  font: 600 14px ui-monospace, Menlo, monospace;
  color: #fff;
}
.swatch .meta span {
  display: block;
  font-size: 13px;
  line-height: 1.35;
  color: var(--secondary);
}
.space {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 8px 0;
  font: 13px ui-monospace, Menlo, monospace;
  color: var(--secondary);
}
.space i {
  display: block;
  height: 18px;
  background: var(--brand);
  border-radius: 2px;
}
.dodont {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.do,
.dont {
  border-radius: var(--radius);
  padding: 12px 14px;
  font-size: 14px;
  border: 1px solid var(--edge);
  background: var(--surface);
}
.do b {
  color: #3fc2d8;
}
.dont b {
  color: var(--watch);
}
.icons {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
  align-items: flex-start;
}
.icons figure {
  text-align: center;
}
.icons img {
  width: 96px;
  border-radius: 22%;
}
.mono {
  font-variant-numeric: tabular-nums;
}

/* The lightbox gallery.js opens. */
dialog.lightbox {
  background: rgba(0, 0, 0, 0.92);
  padding: 0;
  display: none;
}
dialog.lightbox[open] {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  width: 100vw;
  height: 100vh;
  max-width: none;
  max-height: none;
}
dialog.lightbox figure {
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  max-height: 100vh;
}
dialog.lightbox img {
  max-width: 82vw;
  max-height: 84vh;
  width: auto;
  height: auto;
  border-radius: 0.5rem;
}
dialog.lightbox figcaption {
  max-width: 60ch;
  text-align: center;
  font-size: 1rem;
  color: #fff;
  margin-top: 0.6rem;
}
dialog.lightbox button {
  background: rgba(255, 255, 255, 0.12);
  border: none;
  color: #fff;
  font-size: 2rem;
  line-height: 1;
  width: 3rem;
  height: 3rem;
  padding: 0;
  border-radius: 50%;
  flex: none;
}
dialog.lightbox .lb-close {
  position: fixed;
  top: 1rem;
  right: 1rem;
  font-size: 1.2rem;
}
dialog.lightbox .lb-count {
  position: fixed;
  bottom: 0.5rem;
  left: 0;
  right: 0;
  text-align: center;
  color: var(--pico-muted-color);
  font-size: 0.85rem;
}

@media (max-width: 720px) {
  .example,
  .dodont,
  .shot {
    grid-template-columns: 1fr;
  }
  table,
  table tbody,
  table tr,
  table td {
    display: block;
    width: 100%;
  }
  table tr:has(th) {
    display: none;
  }
  table tr {
    padding: 10px 0;
    border-bottom: 1px solid var(--edge);
  }
  table td {
    border: 0;
    padding: 2px 0;
    overflow-wrap: anywhere;
  }
  table td:first-child {
    font-weight: 600;
  }
  body > main > nav {
    flex-wrap: wrap;
  }
}

/* A specimen that is also an .ios root: storm.css zeroes .ios padding, so put it back. */
.specimen.ios {
  padding: 20px;
}

/* On a phone the contact sheet is too small to read: the pitch shows a strip of the shots to
   swipe through instead, and the Screens page, which shows every shot anyway, drops it. */
.strip {
  display: none;
}
@media (max-width: 720px) {
  .contact-sheet {
    display: none;
  }
  .strip {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    margin: 0 -1rem 1rem;
    padding: 0 1rem 8px;
  }
  .strip figure {
    flex: 0 0 78%;
    scroll-snap-align: center;
  }
  .strip figure.wide-shot {
    flex-basis: 92%;
  }
}

/* ---- Pitch page: the hero ---------------------------------------------------- */

.hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: 2rem;
  align-items: center;
  margin: 1rem 0 2rem;
}
.hero h1 {
  font-size: 3rem;
  line-height: 1.05;
  margin-bottom: 0.6rem;
}
.hero .lede {
  font-size: 1.25rem;
}
/* The hero: a deck of phone cards over a slow radar sweep in Storm's teal. Swipe or drag the
   front card, tap a side one, or use the dots or the arrow keys. wow.js sets the positions. */
.deck {
  position: relative;
  height: 560px;
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
  outline: none;
}
.deck::before,
.deck::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: min(100%, 560px);
  aspect-ratio: 1;
  translate: -50% -50%;
  border-radius: 50%;
}
.deck::before {
  background: conic-gradient(from 0deg, rgba(63, 194, 216, 0) 0deg, rgba(63, 194, 216, 0.5) 58deg, rgba(63, 194, 216, 0) 60deg);
  -webkit-mask: radial-gradient(circle, #000 0 69%, transparent 70%);
  mask: radial-gradient(circle, #000 0 69%, transparent 70%);
  animation: sweep 6s linear infinite;
}
.deck::after {
  background:
    repeating-radial-gradient(circle, transparent 0 17.6%, rgba(63, 194, 216, 0.22) 17.8% 18.2%),
    linear-gradient(transparent calc(50% - 0.5px), rgba(63, 194, 216, 0.16) 0 calc(50% + 0.5px), transparent 0),
    linear-gradient(90deg, transparent calc(50% - 0.5px), rgba(63, 194, 216, 0.16) 0 calc(50% + 0.5px), transparent 0),
    radial-gradient(circle, rgba(14, 142, 165, 0.16), rgba(14, 142, 165, 0.04) 70%);
  -webkit-mask: radial-gradient(circle, #000 0 69%, transparent 70%);
  mask: radial-gradient(circle, #000 0 69%, transparent 70%);
}
.deck img {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 40%;
  z-index: 1;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -50%) scale(0.7);
  transition:
    transform 0.55s cubic-bezier(0.2, 0.8, 0.2, 1),
    opacity 0.4s,
    filter 0.4s;
  -webkit-user-drag: none;
}
.deck img.front {
  z-index: 3;
  opacity: 1;
  pointer-events: auto;
  cursor: grab;
  transform: translate(calc(-50% + var(--dx, 0px)), -52%) rotate(calc(var(--dx, 0px) / 40px * 1deg));
}
.deck img.right,
.deck img.left {
  z-index: 2;
  opacity: 1;
  pointer-events: auto;
  cursor: pointer;
  filter: brightness(0.6);
}
.deck img.right {
  transform: translate(8%, -47%) rotate(7deg) scale(0.86);
}
.deck img.left {
  transform: translate(-108%, -47%) rotate(-7deg) scale(0.86);
}
.deck.dragging img {
  transition: none;
}
.deck.dragging img.front {
  cursor: grabbing;
}
.deck-dots {
  position: absolute;
  bottom: -6px;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  gap: 4px;
  z-index: 4;
}
.deck-dots button {
  width: 22px;
  height: 22px;
  padding: 0;
  margin: 0;
  border: 0;
  background: none;
  display: grid;
  place-items: center;
}
.deck-dots button::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.28);
  transition: background 0.3s, transform 0.3s;
}
.deck-dots button[aria-selected="true"]::before {
  background: #3fc2d8;
  transform: scale(1.3);
}
@keyframes sweep {
  to {
    transform: rotate(360deg);
  }
}
@keyframes pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(63, 194, 216, 0.6);
  }
  100% {
    box-shadow: 0 0 0 10px rgba(63, 194, 216, 0);
  }
}
@media (prefers-reduced-motion: reduce) {
  .deck::before,
  .live-dot,
  .buoycam .cam-view {
    animation: none !important;
  }
}

/* "Right now": a live line from a public source, with a pulsing dot */
.live-line {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 999px;
  background: var(--surface);
  border: 1px solid var(--edge);
  font-size: 0.95rem;
  width: fit-content;
  max-width: 100%;
}
.live-line[hidden] {
  display: none;
}
.live-line b {
  font-variant-numeric: tabular-nums;
}
.live-dot {
  flex: none;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #3fc2d8;
  animation: pulse 1.8s ease-out infinite;
}

/* ---- Clean phone shots on the Screens page ------------------------------------ */

.screen-row {
  display: grid;
  grid-template-columns: minmax(0, 330px) 1fr;
  gap: 2.5rem;
  align-items: center;
  padding: 1.5rem 0;
}
.screen-row:nth-of-type(even) {
  grid-template-columns: 1fr minmax(0, 330px);
}
.screen-row:nth-of-type(even) figure {
  order: 2;
}
.screen-row img {
  width: 100%;
  cursor: zoom-in;
}
.screen-row h2 {
  margin-top: 0;
}
.screen-row .pro-tag {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  padding: 3px 7px;
  border-radius: 6px;
  background: var(--brand);
  color: #fff;
  vertical-align: middle;
  margin-left: 6px;
}

/* ---- The live buoy cam on the almanac page ------------------------------------- */

.buoycam {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--edge);
  background: #23303d;
}
/* NDBC's picture is six views side by side, each 480 by 270 over a caption bar. The box is
   16:9, so one view fills it and the caption falls off the bottom. wow.js steps through them. */
.buoycam {
  max-width: 820px;
}
.buoycam .cam-view {
  aspect-ratio: 16 / 9;
  background: #23303d url(maps/cam-42035.jpg) 60% 0 / 600% auto no-repeat;
  transition: opacity 0.35s;
}
.buoycam .cam-view.blink {
  opacity: 0;
}
.cam-dots {
  position: absolute;
  top: 16px;
  right: 14px;
  display: flex;
  gap: 5px;
}
.cam-dots i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.4);
}
.cam-dots i.on {
  background: #fff;
}
.buoycam .cam-readout {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 6px 22px;
  padding: 40px 18px 14px;
  background: linear-gradient(transparent, rgba(10, 12, 20, 0.78));
  color: #fff;
}
.buoycam .cam-readout b {
  display: block;
  font-size: 1.5rem;
  font-variant-numeric: tabular-nums;
}
.buoycam .cam-readout span {
  font-size: 0.8rem;
  opacity: 0.8;
}
.buoycam .cam-place {
  margin-right: auto;
}
.buoycam .cam-badge {
  position: absolute;
  top: 12px;
  left: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 11px;
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 600;
  background: rgba(10, 12, 20, 0.55);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  color: #fff;
}
.buoycam:not(.live) .live-dot {
  background: #8e8c96;
  animation: none;
}

/* ---- The county demo on How It Works --------------------------------------------- */

.demo {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  gap: 16px;
  align-items: stretch;
}
.demo-stage {
  position: relative;
  aspect-ratio: 640 / 420;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--edge);
  touch-action: none;
  cursor: crosshair;
}
.demo-stage > img,
.demo-stage > svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.demo-county {
  fill: none;
  stroke: rgba(255, 255, 255, 0.6);
  stroke-width: 1.8;
  stroke-dasharray: 3 3;
}
.demo-warning {
  fill: rgba(217, 58, 43, 0.26);
  stroke: #d93a2b;
  stroke-width: 2.5;
  stroke-linejoin: round;
}
.demo-pin {
  position: absolute;
  width: 34px;
  height: 34px;
  margin: -17px 0 0 -17px;
  border-radius: 50%;
  background: #373340;
  border: 2px solid #fff;
  display: grid;
  place-items: center;
  font-size: 15px;
  color: #fff;
  user-select: none;
}
.demo-pin small {
  position: absolute;
  top: 36px;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  text-shadow: 0 1px 3px #000;
}
.demo-tornado {
  background: #d93a2b;
  width: 26px;
  height: 26px;
  margin: -13px 0 0 -13px;
  font-size: 12px;
}
.demo-mom {
  cursor: grab;
  background: #0e8ea5;
  box-shadow: 0 0 0 0 rgba(63, 194, 216, 0.6);
  animation: pulse 1.8s ease-out infinite;
  z-index: 2;
}
.demo.touched .demo-mom {
  animation: none;
}
.demo-mom.dragging {
  cursor: grabbing;
  transform: scale(1.15);
}
.demo-hint {
  position: absolute;
  right: 10px;
  bottom: 10px;
  font-size: 0.8rem;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(10, 12, 20, 0.6);
  transition: opacity 0.4s;
}
.demo.touched .demo-hint {
  opacity: 0;
}
.demo-verdicts {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.demo-verdicts .card {
  flex: 1;
  transition: border-color 0.3s;
}
.demo-verdicts .card p {
  font-size: 1.15rem;
  font-weight: 600;
  margin-top: 6px;
}
.verdict-ring {
  color: #ff6b5e;
}
.verdict-tell {
  color: #f5a524;
}
.verdict-quiet {
  color: var(--secondary);
}
.demo.wrong .county-card {
  border-color: rgba(245, 165, 36, 0.7);
}
.demo .wrong-note {
  display: none;
  font-size: 0.85rem;
  color: var(--watch);
  margin-top: 6px;
}
.demo.wrong .wrong-note {
  display: block;
}

@media (max-width: 720px) {
  .hero,
  .demo {
    grid-template-columns: 1fr;
  }
  .hero h1 {
    font-size: 2.3rem;
  }
  .deck {
    height: 470px;
  }
  .deck img {
    width: 58%;
  }
  .deck img.right {
    transform: translate(-2%, -47%) rotate(6deg) scale(0.8);
  }
  .deck img.left {
    transform: translate(-98%, -47%) rotate(-6deg) scale(0.8);
  }
  .screen-row,
  .screen-row:nth-of-type(even) {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
  .screen-row:nth-of-type(even) figure {
    order: 0;
  }
  .screen-row figure {
    max-width: 280px;
    margin: 0 auto;
  }
  body > main > nav li {
    white-space: nowrap;
  }
  body > main > nav ul:last-child {
    flex-wrap: wrap;
    margin-inline: -0.45rem;
  }
  body > main > nav ul:last-child li {
    padding: 0.35rem 0.45rem;
    font-size: 0.95rem;
  }
}