/* ============================================================
   Harbor — Jetty brand styles
   Deep Sea #43575E · Atlantic #586D72 · Mid-tone #8FA8AE
   Sage #5A7B6A · Sand #8B6F47 · Graphite #252933 · Cloud #F6F7F7
   Fonts: Nunito (headings) · Inter (body) · "Draw Your Own Line."
   ============================================================ */
:root {
  --deep-sea:#43575E; --atlantic:#586D72; --mid-tone:#8FA8AE;
  --sage:#5A7B6A; --sand:#8B6F47; --graphite:#252933;
  --cloud:#F6F7F7; --grey-sky:#EDECED;
  --card:#fff; --line:#EDECED;
  --shadow:0 1px 3px rgba(37,41,51,.08),0 1px 2px rgba(37,41,51,.04);
  --shadow-lift:0 10px 26px rgba(37,41,51,.13),0 3px 8px rgba(37,41,51,.07);
  --radius:12px;
}
* { box-sizing:border-box; }
html,body { margin:0; padding:0; }
body {
  font-family:"Inter",system-ui,-apple-system,Helvetica,Arial,sans-serif;
  color:var(--graphite); background:var(--cloud); font-size:14px; line-height:1.45;
  min-height:100vh; display:flex; flex-direction:column;
}
h1,h2,h3 { font-family:"Nunito",system-ui,Arial,sans-serif; font-weight:800; margin:0; }
button,input { font-family:inherit; }

/* ---------- password gate ---------- */
.gate { position:fixed; inset:0; z-index:100; display:flex; align-items:center; justify-content:center;
  background-color:var(--deep-sea); background-image:url("../../brand/bathymetry-tile.png"); background-size:620px auto; background-repeat:repeat; padding:20px; }
.gate__card { background:rgba(255,255,255,.06); border:1px solid rgba(246,247,247,.16); border-radius:16px;
  padding:34px 32px 30px; width:340px; max-width:92vw; display:flex; flex-direction:column; align-items:center;
  box-shadow:0 10px 40px rgba(0,0,0,.25); }
.gate__logo { height:52px; width:52px; margin-bottom:12px; }
.gate__mark { font-family:"Nunito"; font-weight:900; letter-spacing:2px; font-size:26px; color:#fff; }
.gate__title { font-family:"Nunito"; font-weight:700; font-size:15px; color:var(--mid-tone); margin-top:2px; }
.gate__tag { font-family:"Nunito"; font-weight:800; font-size:10px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--mid-tone); margin:6px 0 20px; }
.gate__input { width:100%; padding:11px 13px; border:1px solid rgba(246,247,247,.25); border-radius:9px;
  background:rgba(255,255,255,.95); font-size:15px; color:var(--graphite); text-align:center; }
.gate__input:focus { outline:none; border-color:var(--mid-tone); box-shadow:0 0 0 3px rgba(143,168,174,.35); }
.gate__btn { width:100%; margin-top:12px; padding:11px 13px; border:none; border-radius:9px; cursor:pointer;
  background:var(--sage); color:#fff; font-family:"Nunito"; font-weight:800; font-size:14px; letter-spacing:.04em; }
.gate__btn:hover { background:#4d6b5b; }
.gate__err { min-height:18px; margin-top:10px; font-size:12.5px; color:#ffb4a8; text-align:center; }

/* ---------- hero header ---------- */
/* Deep Sea carries the bathymetry repeat everywhere it fills a surface, so the
   brand reads the same from page to page. Buttons, chips and dots stay flat —
   the pattern needs room to be legible. */
.hero { background-color:var(--deep-sea); background-image:url("../../brand/bathymetry-tile.png"); background-size:620px auto; background-repeat:repeat;
  color:var(--cloud); padding:34px 24px 40px; }
.hero__inner { max-width:1040px; margin:0 auto; display:flex; align-items:center; gap:16px; flex-wrap:wrap; }
.hero__logo { height:44px; width:44px; display:block; }
.hero__mark { font-family:"Nunito"; font-weight:900; letter-spacing:1.6px; font-size:28px; color:#fff; line-height:1; }
.hero__title { font-family:"Nunito"; font-weight:700; font-size:15px; color:var(--mid-tone); align-self:center; }
.hero__tag { font-family:"Nunito"; font-weight:800; font-size:11px; letter-spacing:.09em; text-transform:uppercase;
  color:var(--mid-tone); border-left:1px solid rgba(246,247,247,.25); padding-left:14px; align-self:center; }
.hero__sub { max-width:1040px; margin:14px auto 0; font-size:13.5px; color:var(--mid-tone); }

/* ---------- KPI strip (only renders if HARBOR.KPIS is non-empty) ---------- */
.kpis { max-width:1040px; margin:-26px auto 0; padding:0 24px; display:grid; gap:14px;
  grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); }
.kpi { background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:14px 16px; box-shadow:var(--shadow); }
.kpi__val { font-family:"Nunito"; font-weight:900; font-size:24px; color:var(--deep-sea); line-height:1.1; }
.kpi__lbl { font-size:11px; color:var(--atlantic); margin-top:4px; text-transform:uppercase; letter-spacing:.04em; }
.kpi__src { font-size:10.5px; color:var(--mid-tone); margin-top:2px; }

/* ---------- dealer snapshot: booked/shipped/% by year and season ---------- */
/* The table reads better sitting below the hero than tucked up into it. */
.kpis--table { display:block; grid-template-columns:none; margin-top:20px; }
.snap-cap { font-size:12px; color:var(--atlantic); margin:0 2px 8px; letter-spacing:.02em; }
.snap-cap b { color:var(--deep-sea); font-family:"Nunito"; font-weight:800; font-size:13px; }
.snap-card { background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:var(--shadow); overflow:hidden; }
.snap-tbl { width:100%; border-collapse:collapse; font-size:13px; color:var(--graphite);
  font-variant-numeric:tabular-nums; }
.snap-tbl thead th { text-align:right; font-size:10.5px; font-weight:700; text-transform:uppercase;
  letter-spacing:.05em; color:var(--atlantic); padding:11px 16px; border-bottom:1px solid var(--line); }
.snap-tbl thead th:first-child { text-align:left; }
.snap-tbl th, .snap-tbl td { padding:9px 16px; text-align:right; white-space:nowrap; }
.snap-tbl th:first-child, .snap-tbl td:first-child { text-align:left; }
.snap-yr th, .snap-yr td { background:var(--deep-sea); color:#fff; font-family:"Nunito";
  font-weight:800; font-size:14px; }
.snap-season td, .snap-season th { border-bottom:1px solid var(--line); }
.snap-season:last-child td, .snap-season:last-child th { border-bottom:0; }
.snap-season th:first-child { padding-left:30px; font-weight:600; color:var(--atlantic); }
.snap-empty { background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:var(--shadow); padding:18px 20px; color:var(--mid-tone); font-size:13px; }

/* ---------- staff preview banner ---------- */
#previewBar { position:sticky; top:0; z-index:50; background:var(--sand); color:#fff;
  text-align:center; font-size:13px; padding:9px 16px; letter-spacing:.01em; }
#previewBar a { color:#fff; font-weight:800; text-decoration:underline; margin-left:8px; }

/* ---------- tiles ---------- */
.wrap { max-width:1040px; margin:0 auto; padding:30px 24px 0; flex:1 0 auto; width:100%; }
.wrap--tight { padding-top:34px; }
.sectlbl { font-family:"Nunito"; font-weight:800; font-size:11px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--atlantic); margin:6px 0 12px; }
.tiles { display:grid; gap:12px; grid-template-columns:repeat(auto-fill,minmax(228px,1fr)); }
.sect + .sect { margin-top:32px; }
.sectnote { font-size:12px; color:var(--mid-tone); margin:-6px 0 12px; }

.tile { display:flex; gap:11px; align-items:flex-start; background:#fff; border:1px solid var(--line);
  border-radius:10px; box-shadow:var(--shadow); padding:13px 14px 12px; text-decoration:none;
  color:inherit; transition:transform .13s ease, box-shadow .13s ease, border-color .13s ease; position:relative; }
.tile:hover { transform:translateY(-2px); box-shadow:var(--shadow-lift); border-color:var(--mid-tone); }
.tile:focus-visible { outline:3px solid var(--mid-tone); outline-offset:2px; }
.tile__icon { flex:0 0 auto; width:34px; height:34px; border-radius:8px; background:var(--cloud);
  display:flex; align-items:center; justify-content:center; }
.tile__icon svg { width:19px; height:19px; stroke:var(--deep-sea); fill:none; stroke-width:1.7;
  stroke-linecap:round; stroke-linejoin:round; }
.tile__body { min-width:0; padding-right:14px; }   /* keeps long names clear of the ↗ */
.tile__name { font-family:"Nunito"; font-weight:800; font-size:14px; color:var(--graphite); line-height:1.25; }
.tile__blurb { font-size:11.5px; color:var(--atlantic); margin-top:2px; line-height:1.35; }
.tile__arrow { position:absolute; top:11px; right:12px; font-size:12px; color:var(--mid-tone); }
.tile:hover .tile__arrow { color:var(--sage); }

/* ---------- the ranking ----------
   Thirteen identical tiles is a wall, and a wall has to be READ before the
   one you open every day can be found. So the rank shows up three ways at
   once — footprint, icon weight and the colour of the left edge — because
   any one of them alone is easy to miss, and because size alone would make
   the bottom rows look broken rather than lower.

   The accent gets lighter down the page: deep sea, sage, atlantic, mid tone,
   then nothing at all for off the clock. All four are already in the palette
   above, so the page gains a hierarchy without gaining a colour.

   `.tiles--*` sizes the GRID (how wide a tile may be before another fits on
   the row), `.tile--*` sizes the tile itself. Both are needed: a smaller
   card in a grid built for big ones just leaves holes. */
/* auto-FIT, not auto-fill, for the top row. auto-fill keeps the empty
   columns it could have made and leaves the last tile short of the right
   edge; auto-fit collapses them, so four tiles share the width evenly and
   eight hundred pixels of card lines up with everything below it. */
.tiles--lg { gap:14px; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); }
.tiles--md { gap:12px; grid-template-columns:repeat(auto-fill,minmax(228px,1fr)); }
.tiles--sm { gap:10px; grid-template-columns:repeat(auto-fill,minmax(206px,1fr)); }
.tiles--xs { gap:9px;  grid-template-columns:repeat(auto-fill,minmax(182px,1fr)); }

/* THE TOP ROW IS A DIFFERENT SHAPE, not just a bigger one. Cory, 19 Oct 2026:
   "can you make those tiles sized differently like squares so they fit the
   same width horizontally... I want them larger than the ones below them.
   Also give them a highlight or 3-d effect so they stand out a bit more."

   Stacked instead of side-by-side: the icon sits above the words rather than
   beside them, which is what lets the card be tall enough to read as a square
   rather than a wide strip. Everything below stays a strip, so the top row is
   the only thing on the page with that silhouette and the eye finds it first. */
.tile--lg { flex-direction:column; align-items:flex-start; gap:11px;
  min-height:152px; padding:18px 17px 16px;
  /* The 3-D: a light top edge inside the border, a close contact shadow and a
     wider soft one underneath. Three layers rather than one big blur, because
     a single large shadow reads as fog and this reads as lift. */
  background:linear-gradient(180deg,#fff 0%,#FAFBFB 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9),
             0 1px 2px rgba(37,41,51,.08),
             0 8px 18px rgba(37,41,51,.11); }
.tile--lg:hover { transform:translateY(-3px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9),
             0 2px 4px rgba(37,41,51,.10),
             0 16px 30px rgba(37,41,51,.16); }
.tile--lg .tile__icon { width:44px; height:44px; border-radius:11px;
  box-shadow:inset 0 0 0 1px rgba(67,87,94,.07); }
.tile--lg .tile__icon svg { width:24px; height:24px; stroke-width:1.8; }
.tile--lg .tile__body { padding-right:0; }
.tile--lg .tile__name { font-size:16.5px; }
.tile--lg .tile__blurb { font-size:12.5px; margin-top:4px; }

/* Two across on a tablet, one on a phone. Without this the four would keep
   dividing the width until each was a 90px sliver - "fits the same width
   horizontally" stops being a good idea somewhere around 700px. */
@media (max-width:820px) {
  .tiles--lg { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:460px) {
  .tiles--lg { grid-template-columns:1fr; }
  .tile--lg { min-height:0; flex-direction:row; align-items:flex-start; }
}

.tile--sm { padding:11px 12px 10px; gap:9px; }
.tile--sm .tile__icon { width:29px; height:29px; border-radius:7px; }
.tile--sm .tile__icon svg { width:16px; height:16px; }
.tile--sm .tile__name { font-size:13px; }
.tile--sm .tile__blurb { font-size:11px; }

.tile--xs { padding:10px 11px 9px; gap:9px; }
.tile--xs .tile__icon { width:26px; height:26px; border-radius:7px; }
.tile--xs .tile__icon svg { width:15px; height:15px; }
.tile--xs .tile__name { font-size:12.5px; }
.tile--xs .tile__blurb { font-size:10.5px; }

/* The left edge. `--ac-*` only ever sets a colour, so a tile can carry a rank
   accent and the Airtable treatment below without the two fighting — the
   Airtable rule comes after and wins, which is right: "this leaves Jetty"
   matters more than which row it sits in. */
.tile--ac-deep     { border-left:3px solid var(--deep-sea); }
.tile--ac-sage     { border-left:3px solid var(--sage); }
.tile--ac-atlantic { border-left:3px solid var(--atlantic); }
.tile--ac-mid      { border-left:3px solid var(--mid-tone); }

/* On the square cards the accent moves to the TOP edge. Three pixels down the
   side of a 152px-tall card is a line nobody reads; across the top of it the
   same three pixels are a header. */
.tile--lg.tile--ac-deep { border-left:1px solid var(--line); border-top:3px solid var(--deep-sea); }

.tile--ac-deep .tile__icon     { background:rgba(67,87,94,.11); }
.tile--ac-sage .tile__icon     { background:rgba(90,123,106,.11); }
.tile--ac-sage .tile__icon svg { stroke:var(--sage); }
.tile--ac-atlantic .tile__icon { background:rgba(88,109,114,.10); }
.tile--ac-mid .tile__icon      { background:rgba(143,168,174,.14); }
.tile--ac-mid .tile__icon svg  { stroke:var(--atlantic); }

/* Airtable tiles — sand edge + sand icon, so they read as "leaves the Jetty
   sites" at a glance without leaving the brand palette. */
.tile--airtable { border-left:3px solid var(--sand); }
.tile--airtable:hover { border-left-color:var(--sand); }   /* keep the sand edge through the hover state */
.tile--airtable .tile__icon { background:rgba(139,111,71,.10); }
.tile--airtable .tile__icon svg { stroke:var(--sand); }
.tile--airtable:hover .tile__arrow { color:var(--sand); }

/* a tile whose url is still blank */
.tile--todo { cursor:default; background:#fbfbfb; border-style:dashed; }
.tile--todo:hover { transform:none; box-shadow:var(--shadow); border-color:var(--line); }
.tile--todo .tile__name, .tile--todo .tile__blurb { color:var(--mid-tone); }
.tile--todo .tile__icon svg { stroke:var(--mid-tone); }
.tile__soon { display:inline-block; margin-top:6px; font-family:"Nunito"; font-weight:800; font-size:9.5px;
  letter-spacing:.07em; text-transform:uppercase; color:var(--sand); border:1px solid var(--sand);
  border-radius:20px; padding:1px 9px; }

.foot { text-align:center; font-size:11.5px; color:var(--mid-tone); padding:34px 20px 26px; }

@media (max-width:640px) {
  .hero { padding:26px 18px 34px; }
  .hero__mark { font-size:24px; }
  .wrap, .kpis { padding-left:18px; padding-right:18px; }
  .hero__tag { border-left:none; padding-left:0; }
  .hero__inner { gap:12px; }
}

/* ---------- sign-in additions ----------
   The gate is no longer a shared password; it is the same Supabase sign-in the
   rest of the tools use, in two steps. These cover the parts the old one-input
   gate had no need for: the confirmation state, the fallback links under the
   password box, and who you are signed in as. */
.gate__err--ok { color:#9fd6c9; }

.gate__alt {
  margin-top:14px; font-size:12px; text-align:center; color:var(--mid-tone);
}
.gate__alt a {
  color:var(--cloud); text-decoration:underline; text-underline-offset:2px;
}
.gate__alt a:hover { color:#fff; }

.foot #whoami {
  display:block; margin-bottom:4px; font-size:11.5px; color:var(--mid-tone);
}
.foot #signout {
  background:none; border:none; padding:0 0 10px; cursor:pointer;
  font:inherit; font-size:11.5px; color:var(--mid-tone);
  text-decoration:underline; text-underline-offset:2px;
}
.foot #signout:hover { color:var(--deep-sea); }

/* ---------- the notice board ----------
   Above the tiles, because a notice below them is a notice behind them.

   It reads as a BOARD, not as another tile: full width, sand-edged, and
   square where the tiles are round. The Harbor's visual language already
   says "tile = a place to go", and a notice is not somewhere you go. */
.board { margin:0 0 26px; }
.board__hd { display:flex; align-items:baseline; justify-content:space-between;
  gap:12px; margin:6px 0 10px; }
.board__hd h2 { font-family:"Nunito"; font-weight:800; font-size:11px;
  letter-spacing:.08em; text-transform:uppercase; color:var(--atlantic); margin:0; }
.board__new { font-family:"Nunito"; font-weight:800; font-size:11.5px;
  padding:5px 13px; border-radius:999px; border:1px solid var(--line);
  background:#fff; color:var(--deep-sea); cursor:pointer; }
.board__new:hover { border-color:var(--mid-tone); }

.notice { background:#fff; border:1px solid var(--line); border-left:3px solid var(--sand);
  border-radius:10px; padding:13px 15px; box-shadow:var(--shadow); margin-bottom:9px; }
.notice--pin { border-left-color:var(--deep-sea); background:#FEFEFE; }
.notice__body { font-size:13.5px; line-height:1.5; white-space:pre-wrap;
  overflow-wrap:anywhere; color:var(--graphite); }
.notice__meta { display:flex; align-items:center; gap:8px; flex-wrap:wrap;
  margin-top:8px; font-size:11px; color:var(--mid-tone); }
.notice__who { font-weight:600; color:var(--atlantic); }
.notice__tag { font-family:"Nunito"; font-weight:800; font-size:9.5px;
  letter-spacing:.06em; text-transform:uppercase; padding:2px 7px; border-radius:999px;
  border:1px solid var(--sand); color:var(--sand); }
.notice__tag--pin { border-color:var(--deep-sea); color:var(--deep-sea); }
/* An @channel notice that did NOT reach anybody has to look different from
   one that did, or a failed send is indistinguishable from a quiet success. */
.notice__tag--unsent { border-color:#A4423F; color:#A4423F; }
.notice__act { margin-left:auto; display:flex; gap:10px; }
.notice__act button { border:0; background:none; padding:0; cursor:pointer;
  font:inherit; font-size:11px; color:var(--mid-tone); text-decoration:underline; }
.notice__act button:hover { color:var(--deep-sea); }

.board__form { background:#fff; border:1px solid var(--line); border-radius:10px;
  padding:14px 15px; box-shadow:var(--shadow); margin-bottom:9px; }
.board__form textarea { width:100%; min-height:88px; resize:vertical; padding:10px 11px;
  border:1px solid var(--line); border-radius:9px; font:inherit; font-size:13.5px;
  color:var(--graphite); background:#fff; }
.board__form textarea:focus { outline:none; border-color:var(--mid-tone);
  box-shadow:0 0 0 3px rgba(143,168,174,.3); }
.board__row { display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin-top:11px; }
.board__chan { display:flex; align-items:center; gap:7px; font-size:12.5px; color:var(--graphite); }
.board__chan input { width:16px; height:16px }
.board__count { font-size:11.5px; color:var(--mid-tone); }
.board__post { margin-left:auto; font-family:"Nunito"; font-weight:800; font-size:12.5px;
  padding:8px 17px; border-radius:999px; border:1px solid var(--sage);
  background:var(--sage); color:#fff; cursor:pointer; }
.board__post:disabled { opacity:.45; cursor:default; }
.board__err { font-size:12px; color:#A4423F; margin-top:8px; }

@media (max-width:560px){
  .board__row { gap:10px }
  .board__post { margin-left:0; width:100% }
}

/* The @ picker, and the tags once a notice is posted. */
.board__pick { border:1px solid var(--line); border-radius:9px; margin-top:8px;
  overflow:hidden; background:#fff; box-shadow:var(--shadow); }
.board__who { display:flex; align-items:center; gap:10px; width:100%; padding:8px 12px;
  border:0; border-bottom:1px solid var(--line); background:#fff; cursor:pointer;
  font:inherit; text-align:left; }
.board__who:last-child { border-bottom:0 }
.board__who:hover { background:var(--cloud) }
.board__whoname { font-weight:600; font-size:13px; color:var(--graphite) }
.board__whokind { margin-left:auto; font-size:10.5px; letter-spacing:.05em;
  text-transform:uppercase; color:var(--mid-tone) }
.board__none { padding:9px 12px; font-size:12.5px; color:var(--mid-tone) }
.notice__at { font-weight:700; color:var(--sage) }

/* ---------- a dealer's Harbor (Cory, 8 Nov 2026) ---------- */
/* The main tools on one row, however many there are (3 today). */
.tiles--row3 { grid-template-columns:repeat(3,minmax(0,1fr)); }
.tiles--row2 { grid-template-columns:repeat(2,minmax(0,1fr)); }
@media (max-width:720px) { .tiles--row3, .tiles--row2 { grid-template-columns:1fr; } }

/* "Your business": filters, KPIs and four charts. */
.dd { margin-top:32px; }
.dd-hd { display:flex; flex-wrap:wrap; gap:12px; align-items:flex-end; justify-content:space-between; margin-bottom:12px; }
.dd-hd h2 { font-family:"Nunito"; font-weight:800; font-size:18px; color:var(--deep-sea); margin:0; }
.dd-filters { display:flex; flex-wrap:wrap; gap:8px; align-items:flex-end; }
.dd-filters label { display:flex; flex-direction:column; gap:3px; font-size:10.5px; font-weight:700; letter-spacing:.06em;
  text-transform:uppercase; color:var(--atlantic); }
.dd-filters select { font:inherit; font-size:13px; font-weight:500; letter-spacing:0; text-transform:none; color:var(--graphite);
  padding:6px 8px; border:1px solid var(--line); border-radius:7px; background:var(--card); width:150px; }
.dd-reset { font:inherit; font-size:12.5px; font-weight:600; padding:7px 12px; border:1px solid var(--line); border-radius:7px;
  background:transparent; color:var(--atlantic); cursor:pointer; }
.dd-kpis { display:grid; gap:10px; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); margin-bottom:14px; }
.dd-kpi { background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:12px 14px; box-shadow:var(--shadow); }
.dd-kpi b { display:block; font-family:"Nunito"; font-weight:800; font-size:21px; color:var(--deep-sea); line-height:1.15;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.dd-kpi b.up { color:var(--sage); }
.dd-kpi b.down { color:var(--sand); }
.dd-kpi span { display:block; font-size:11.5px; color:var(--atlantic); margin-top:3px; }
.dd-grid { display:grid; gap:12px; grid-template-columns:repeat(2,minmax(0,1fr)); }
@media (max-width:820px) { .dd-grid { grid-template-columns:1fr; } }
.dd-card { background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:14px 16px; box-shadow:var(--shadow); min-width:0; }
.dd-card h3 { font-family:"Nunito"; font-weight:800; font-size:14px; color:var(--graphite); margin:0; }
.dd-card p { font-size:11.5px; color:var(--atlantic); margin:2px 0 8px; }
.dd-cv { position:relative; height:230px; }