.mid-fa {
  --mid-bg: #061418;
  --mid-card: #0d2026;
  --mid-card-2: #102a31;
  --mid-text: #f5fbfc;
  --mid-muted: #a8bdc3;
  --mid-line: rgba(255,255,255,.12);
  --mid-accent: #20d0c4;
  --mid-accent-2: #f6c35b;
  --mid-low: #88a1a8;
  --mid-good: #62d18c;
  --mid-high: #f6c35b;
  --mid-excellent: #ff8d5a;
  --mid-control-bg: rgba(255,255,255,.06);
  --mid-control-text: #f5fbfc;
  --mid-control-border: rgba(255,255,255,.18);
  box-sizing: border-box;
  color: var(--mid-text);
  background: radial-gradient(circle at 15% 0%, rgba(32,208,196,.2), transparent 35%), var(--mid-bg);
  border: 1px solid var(--mid-line);
  border-radius: 22px;
  padding: clamp(18px, 3vw, 34px);
  font-family: inherit;
  overflow: hidden;
}

.mid-fa[data-theme="light"] {
  --mid-bg: #f5fbfc;
  --mid-card: #ffffff;
  --mid-card-2: #eef7f8;
  --mid-text: #092126;
  --mid-muted: #557076;
  --mid-line: rgba(9,33,38,.14);
  --mid-accent: #057e77;
  --mid-accent-2: #b37400;
  --mid-low: #d6e3e6;
  --mid-good: #58b77a;
  --mid-high: #e1aa3c;
  --mid-excellent: #eb7547;
  --mid-control-bg: rgba(9,33,38,.05);
  --mid-control-text: #092126;
  --mid-control-border: rgba(9,33,38,.18);
  background: radial-gradient(circle at 15% 0%, rgba(5,126,119,.14), transparent 35%), var(--mid-bg);
}

@media (prefers-color-scheme: light) {
  .mid-fa[data-theme="auto"] {
    --mid-bg: #f5fbfc;
    --mid-card: #ffffff;
    --mid-card-2: #eef7f8;
    --mid-text: #092126;
    --mid-muted: #557076;
    --mid-line: rgba(9,33,38,.14);
    --mid-accent: #057e77;
    --mid-accent-2: #b37400;
    --mid-low: #d6e3e6;
    --mid-good: #58b77a;
    --mid-high: #e1aa3c;
    --mid-excellent: #eb7547;
    --mid-control-bg: rgba(9,33,38,.05);
    --mid-control-text: #092126;
    --mid-control-border: rgba(9,33,38,.18);
    background: radial-gradient(circle at 15% 0%, rgba(5,126,119,.14), transparent 35%), var(--mid-bg);
  }
}

.mid-fa *, .mid-fa *::before, .mid-fa *::after { box-sizing: border-box; }
.mid-fa__header { display:flex; justify-content:space-between; gap:18px; align-items:flex-start; margin-bottom:22px; }
.mid-fa__eyebrow { margin:0 0 4px; color:var(--mid-accent); font-size:.78rem; letter-spacing:.12em; text-transform:uppercase; font-weight:700; }
.mid-fa__title { margin:0; font-size:clamp(1.7rem, 4vw, 3rem); line-height:1; }
.mid-fa__meta { margin:8px 0 0; color:var(--mid-muted); }
.mid-fa__score-card { min-width:120px; text-align:center; background:linear-gradient(180deg, rgba(32,208,196,.16), rgba(255,255,255,.04)); border:1px solid var(--mid-line); border-radius:18px; padding:14px; }
.mid-fa__score-card strong { display:block; font-size:2.3rem; line-height:1; }
.mid-fa__score-card span { display:block; color:var(--mid-muted); font-size:.85rem; }
.mid-fa__score-label { text-transform:uppercase; letter-spacing:.1em; }

.mid-fa__controls { display:flex; flex-wrap:wrap; align-items:flex-start; justify-content:space-between; gap:12px; margin:-6px 0 18px; padding:12px; border:1px solid var(--mid-line); border-radius:18px; background:rgba(255,255,255,.035); }
.mid-fa__theme { display:flex; flex-wrap:wrap; align-items:center; gap:8px; }
.mid-fa__theme span, .mid-fa__location label { color:var(--mid-muted); font-size:.82rem; font-weight:700; text-transform:uppercase; letter-spacing:.08em; }
.mid-fa__theme button, .mid-fa__location button, .mid-fa__location select { appearance:none; border:1px solid var(--mid-control-border); background:var(--mid-control-bg); color:var(--mid-control-text); border-radius:999px; padding:9px 12px; font:inherit; font-size:.9rem; line-height:1.1; }
.mid-fa__theme button, .mid-fa__location button { cursor:pointer; font-weight:800; }
.mid-fa__theme button[aria-pressed="true"] { background:var(--mid-accent); border-color:var(--mid-accent); color:#031316; }
.mid-fa__location { display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin:0; }
.mid-fa__location select { min-width:min(260px, 100%); padding-right:28px; }
.mid-fa__location button[type="submit"] { display:none; }
.mid-fa__geo:disabled { opacity:.6; cursor:wait; }
.mid-fa__message { flex-basis:100%; margin:2px 0 0; color:var(--mid-muted); font-size:.86rem; }

.mid-fa__chart { background:rgba(255,255,255,.04); border:1px solid var(--mid-line); border-radius:18px; padding:16px; margin-bottom:18px; }
.mid-fa__chart-head { display:flex; align-items:flex-end; justify-content:space-between; gap:14px; margin-bottom:8px; }
.mid-fa__chart h3 { margin:0; font-size:1.05rem; }
.mid-fa__chart p { margin:0; color:var(--mid-muted); font-size:.9rem; }
.mid-fa__chart svg { width:100%; height:220px; display:block; overflow:visible; }
.mid-fa__chart polyline { fill:none; stroke:var(--mid-accent); stroke-width:4; stroke-linecap:round; stroke-linejoin:round; }
.mid-fa__chart circle { fill:var(--mid-accent-2); stroke:var(--mid-bg); stroke-width:2; }
.mid-fa__chart .axis { stroke:var(--mid-control-border); stroke-width:1; }
.mid-fa__chart .grid { stroke:var(--mid-line); stroke-width:1; }
.mid-fa__chart text { fill:var(--mid-muted); font-size:12px; }
.mid-fa__grid { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:14px; }
.mid-fa__day { background:linear-gradient(180deg, var(--mid-card), var(--mid-card-2)); border:1px solid var(--mid-line); border-radius:18px; padding:16px; }
.mid-fa__day-head { display:flex; justify-content:space-between; gap:12px; align-items:flex-start; margin-bottom:12px; }
.mid-fa__day h3 { margin:0; font-size:1.1rem; }
.mid-fa__day-head p { margin:4px 0 0; color:var(--mid-muted); font-size:.9rem; }
.mid-fa__badge { border-radius:999px; padding:6px 10px; color:#031316; background:var(--mid-low); font-size:.78rem; font-weight:800; white-space:nowrap; }
.mid-fa__badge--low { background:var(--mid-low); }
.mid-fa__badge--fair { background:var(--mid-low); }
.mid-fa__badge--good { background:var(--mid-good); }
.mid-fa__badge--high { background:var(--mid-high); }
.mid-fa__badge--excellent { background:var(--mid-excellent); }
.mid-fa__scorebar { height:8px; border-radius:999px; background:rgba(255,255,255,.1); overflow:hidden; margin-bottom:14px; }
.mid-fa[data-theme="light"] .mid-fa__scorebar { background:rgba(9,33,38,.09); }
@media (prefers-color-scheme: light) {
  .mid-fa[data-theme="auto"] .mid-fa__scorebar { background:rgba(9,33,38,.09); }
}
.mid-fa__scorebar span { display:block; height:100%; background:linear-gradient(90deg, var(--mid-accent), var(--mid-accent-2)); border-radius:999px; }
.mid-fa__details { display:grid; grid-template-columns:1fr; gap:9px; margin:0 0 14px; }
.mid-fa__details div { display:grid; grid-template-columns:105px 1fr; gap:10px; }
.mid-fa__details dt { color:var(--mid-muted); font-size:.82rem; }
.mid-fa__details dd { margin:0; font-weight:700; font-size:.92rem; }
.mid-fa__tides { border-top:1px solid var(--mid-line); padding-top:12px; }
.mid-fa__tides h4 { margin:0 0 8px; font-size:.95rem; }
.mid-fa__tides ul { list-style:none; padding:0; margin:0; display:grid; gap:6px; }
.mid-fa__tides li { display:grid; grid-template-columns:48px 1fr auto; gap:8px; align-items:center; color:var(--mid-muted); font-size:.9rem; }
.mid-fa__tides strong { color:var(--mid-text); }
.mid-fa__tides em { font-style:normal; }
.mid-fa__footer { margin-top:18px; color:var(--mid-muted); font-size:.9rem; }
.mid-fa__footer p { margin:0; }
.mid-fa__notice { padding:18px; }

@media (max-width: 820px) {
  .mid-fa__header, .mid-fa__chart-head { display:block; }
  .mid-fa__score-card { margin-top:14px; text-align:left; }
  .mid-fa__controls { display:grid; }
  .mid-fa__location { display:grid; grid-template-columns:1fr; }
  .mid-fa__location select { width:100%; }
  .mid-fa__grid { grid-template-columns:1fr; }
  .mid-fa__details div { grid-template-columns:1fr; gap:2px; }
  .mid-fa__chart svg { height:180px; }
}