:root{
  --fg:#111; --fg-dim:#555; --muted:#999; --border:#e3e3e3; --border2:#d8d8d8;
  --bg:#fff; --surface:#fafafa;
}
*{ box-sizing:border-box; }
html,body{ margin:0; background:var(--bg); color:var(--fg);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif; }

.topbar{ border-bottom:1px solid var(--border); }
.topbar .inner{ max-width:1200px; margin:0 auto; padding:20px 24px; display:flex; align-items:center; justify-content:space-between; }
.brand{ font-weight:800; font-size:18px; }
.brand{ display:flex; align-items:center; }
.brand .dim{ color:var(--muted); font-weight:600; }
.brandfish{ height:48px; margin-right:12px; }
.brandtext{ display:flex; align-items:baseline; gap:7px; }
.bname{ font-weight:800; font-size:18px; }
.phead{ display:flex; justify-content:space-between; align-items:flex-start; gap:20px; }
.pheadtext{ flex:1; min-width:0; }
.panelfish{ height:128px; width:auto; object-fit:contain; flex:none; opacity:.9; margin-bottom:-28px; }
@media(max-width:640px){
  .panelfish{ height:72px; }
  .brandtext{ flex-direction:column; gap:0; align-items:flex-start; }
  .bsep{ display:none; }
}
.emptystate{ text-align:center; margin-top:30px; }
.emptyfish{ display:block; width:100%; max-width:300px; margin:0 auto 10px; opacity:.45; }
.whoami{ color:var(--fg-dim); font-size:14px; }

.tabnav{ max-width:1200px; margin:0 auto; padding:18px 24px 0; }
.segmented{ display:inline-flex; gap:2px; background:var(--surface); border:1px solid var(--border); border-radius:12px; padding:4px; }
.seg{ border:none; background:none; font:inherit; font-size:14px; font-weight:600; color:var(--fg-dim);
  padding:8px 16px; border-radius:9px; cursor:pointer; }
.seg.active{ background:#fff; color:var(--fg); box-shadow:0 1px 3px rgba(0,0,0,.08); }

.wrap{ max-width:1200px; margin:0 auto; padding:8px 24px 100px; }
.panel{ display:none; }
.panel.active{ display:block; }
h1{ font-size:30px; margin:18px 0 4px; }
h2{ font-size:19px; margin:22px 0 10px; }
h3{ font-size:15px; margin:0; }
.lead{ color:var(--fg-dim); font-size:14px; margin:0 0 20px; }
.hint{ color:var(--muted); font-size:13px; margin:0; }
.sub{ font-size:13px; font-weight:700; color:var(--fg); margin:18px 0 8px; }
.sub.subrow{ display:flex; align-items:center; gap:12px; }

.panelhead{ display:flex; align-items:flex-end; justify-content:space-between; gap:16px; flex-wrap:wrap; }
.headctl{ display:flex; align-items:flex-end; gap:10px; }

.fld{ display:block; font-size:12px; color:var(--fg-dim); margin:0 0 4px; }
input,select,textarea{ font:inherit; font-size:14px; padding:9px 11px; border:1px solid var(--border2);
  border-radius:9px; background:#fff; color:var(--fg); width:100%; }
input[readonly],textarea[readonly]{ background:var(--surface); color:var(--fg-dim); }
textarea{ resize:vertical; }
select{ cursor:pointer; }
#tf-loc{ width:auto; min-width:220px; max-width:100%; }

/* angler line: locked you + companion chips + add dropdown */
.anglerline{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; }
.anglerchip{ display:inline-flex; align-items:center; gap:6px; background:var(--surface);
  border:1px solid var(--border2); border-radius:999px; padding:6px 12px; font-size:13px; font-weight:600; }
.anglerchip.you{ background:var(--fg); color:#fff; border-color:var(--fg); }
.chipx{ cursor:pointer; color:var(--muted); font-size:14px; }
.anglerchip .chipx:hover{ color:#b21c1c; }
/* inline add-angler */
.angleradd{ display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin-top:10px;
  padding:12px; border:1px solid var(--border2); border-radius:12px; background:var(--surface); }
.angleradd input{ width:auto; min-width:180px; flex:none; }
.angleradd input[type=email]{ min-width:220px; }
.switchwrap{ display:inline-flex; align-items:center; gap:8px; font-size:13px; color:var(--fg-dim); cursor:pointer; }
.switch{ display:inline-block; width:38px; height:22px; border-radius:999px; background:#ccc; position:relative; transition:background .15s; }
.switch::after{ content:''; position:absolute; top:2px; left:2px; width:18px; height:18px; border-radius:50%; background:#fff; transition:left .15s; }
.switch.on{ background:var(--fg); }
.switch.on::after{ left:18px; }
.rosterchips{ display:flex; flex-wrap:wrap; gap:8px; }
.rname{ cursor:pointer; }
.rname:hover{ text-decoration:underline; }
.seasoncell{ min-width:200px; }
.seasoncell .seasonchip{ display:inline-flex; align-items:center; gap:4px; background:var(--surface);
  border:1px solid var(--border2); border-radius:999px; padding:2px 8px; font-size:12px; margin:2px 4px 2px 0; }
.seasontgl{ display:inline-block; border:1px solid var(--border2); border-radius:999px; padding:3px 10px;
  font-size:12px; margin:2px 4px 2px 0; cursor:pointer; color:var(--fg-dim); background:#fff; user-select:none; }
.seasontgl.on{ background:var(--fg); color:#fff; border-color:var(--fg); }
.seasontgl:hover{ border-color:var(--fg); }
.monthsel{ width:auto; min-width:120px; }
/* Reference outer box (Book / Personal experiences) */
.refbox{ border:1px solid var(--border); border-radius:16px; padding:16px 16px 4px; margin-top:16px; background:var(--surface); }
.refhead{ display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.refhead h2{ margin:0; }
.refbox .card{ margin-top:12px; }
.tiplist{ margin:4px 0 4px; padding-left:20px; font-size:14px; line-height:1.5; }
.tiplist li{ margin-bottom:6px; }
.srnow{ width:1%; white-space:nowrap; }
.srbite{ width:1%; white-space:nowrap; text-align:center !important; }
.tp-when{ cursor:pointer; }
.tp-when select{ width:auto; display:inline-block; font-size:13px; padding:4px 8px; }
.gencollapse > summary{ cursor:pointer; font-size:15px; font-weight:700; list-style:none; }
.gencollapse > summary::-webkit-details-marker{ display:none; }
.gencollapse > summary::before{ content:'▸'; color:var(--muted); margin-right:8px; }
.gencollapse[open] > summary::before{ content:'▾'; }
.genbody{ margin-top:12px; }
/* wind badge + charts */
.windbadge{ display:flex; align-items:center; gap:10px; font-size:14px; align-self:flex-end; padding-bottom:6px; }
.windnums{ display:flex; flex-direction:column; line-height:1.25; }
.windarrow{ display:inline-block; font-size:18px; line-height:1; }
.windarrow.big{ font-size:24px; }
.wxchart{ width:100%; max-width:440px; height:auto; border:1px solid var(--border); border-radius:10px; background:#fff; }
/* auto-sized weather fields (a bit bigger than needed, not all equal) */
.wxgrid{ display:flex; flex-wrap:wrap; gap:12px 14px; }
.wxf{ position:relative; }
.wxf input{ width:auto; }
/* wind tables (7-day + 48h) */
.windtbl-wrap{ overflow-x:auto; border:1px solid var(--border); border-radius:10px; background:#fff; padding-bottom:18px; margin-bottom:14px; }
.windtbl{ border-collapse:collapse; font-size:12px; width:100%; }
.windtbl th{ text-align:left; color:var(--muted); font-weight:600; padding:5px 8px; position:sticky; left:0; background:#fff; border-right:1px solid var(--border); white-space:nowrap; }
.windtbl td{ text-align:center; padding:4px 6px; border-left:1px solid var(--border); min-width:26px; }
.windtbl tr+tr td,.windtbl tr+tr th{ border-top:1px solid var(--border); }
/* hourly table fills its box so there's no white gap on the right */
.windtbl.hourly{ width:100%; }
/* thin line above the horizontal scrollbar (under the last row), any table that scrolls */
.windtbl tr:last-child td,.windtbl tr:last-child th{ border-bottom:1px solid var(--border); }
/* date label right-aligned, same position for both hourly tables */
.winddate-hdr{ text-align:right; font-size:13px; font-weight:700; color:var(--fg-dim); margin:8px 0 4px; }
/* pressure chart + 7-day wind side by side; keep the chart from shrinking small */
.pw-row{ display:flex; flex-wrap:wrap; gap:20px; align-items:flex-start; }
.pw-row > div{ flex:1 1 340px; min-width:0; }
.pw-row .wxchart{ max-width:none; }
.rowactions{ white-space:nowrap; }
.kdrag{ cursor:grab; color:var(--muted); margin-right:8px; user-select:none; }
.kdrag:active{ cursor:grabbing; }
.ktbl tr.droptarget td{ border-top:2px solid var(--fg); }
.refhead .segmented{ background:#ececec; border-color:var(--border2); }
.refhead .seg.active{ background:#fff; color:var(--fg); box-shadow:0 1px 4px rgba(0,0,0,.16); font-weight:700; }
.pickrow{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin-top:10px; }
.pickhint{ font-size:12px; color:var(--muted); }
.timew{ display:inline-flex; align-items:center; gap:4px; }
.timew .th,.timew .tm{ width:46px; text-align:center; }
.timew .tap{ width:auto; min-width:60px; }
.timew .tcolon{ color:var(--muted); }
.anglerchip.pick{ cursor:pointer; background:#fff; font-family:inherit; }
.anglerchip.pick:hover{ background:var(--fg); color:#fff; border-color:var(--fg); }

.pinnote{ flex:1; }
.pinrow .rx{ margin-left:auto; }

.btn{ font:inherit; font-size:14px; font-weight:600; background:var(--fg); color:#fff;
  border:1px solid var(--fg); border-radius:10px; padding:9px 16px; cursor:pointer; width:auto; white-space:nowrap; }
.btn:hover{ opacity:.88; }
.btn.ghost{ background:#fff; color:var(--fg); border-color:var(--border2); }
.btn.ghost:hover{ border-color:var(--fg); background:#fff; opacity:1; }
.btn.sm{ font-size:12px; padding:5px 12px; }
.btn.danger{ color:#b21c1c; border-color:#e6bcbc; }
.btn.danger:hover{ background:#b21c1c; color:#fff; border-color:#b21c1c; }

.savebtn{ display:none; position:fixed; bottom:22px; right:24px; z-index:60; box-shadow:0 4px 14px rgba(0,0,0,.18); }

.card{ border:1px solid var(--border); border-radius:14px; padding:18px; margin-top:16px; background:#fff; }
.card .head{ display:flex; align-items:center; gap:10px; margin-bottom:12px; }
.card .head h3{ margin-right:auto; }
.klock{ cursor:pointer; font-size:15px; }
.ktext{ font-size:14px; line-height:1.55; white-space:pre-wrap; color:var(--fg); }
/* locked read view — cleaner table, no input boxes */
.card.ro .ktbl th,.card.ro .ktbl td{ border:none; border-bottom:1px solid var(--border); padding:9px 12px; }
.card.ro .ktbl thead th{ background:none; color:var(--muted); font-size:11px; text-transform:uppercase; letter-spacing:.05em; font-weight:700; border-bottom:2px solid var(--border2); }
.card.ro .ktbl tbody tr:last-child td{ border-bottom:none; }
.card.ro .ktbl tbody tr:hover td{ background:var(--surface); }
.rx{ color:var(--muted); cursor:pointer; font-size:16px; padding:0 4px; }
.rx:hover{ color:#b21c1c; }
.dim{ color:var(--muted); }

/* trips list */
.tripcard-head{ display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.tripcard-wx{ font-size:13px; color:var(--fg-dim); margin-top:8px; }
.tripcard-note{ font-size:14px; margin-top:6px; }
.tripcard-actions{ margin-top:10px; }

/* trip form */
.tripform .tf-row2{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.tripform .tf-row3{ display:grid; grid-template-columns:1fr 1fr 1fr; gap:14px; margin-top:12px; }
.tripform label.fld{ margin-top:12px; }
.tripform .tf-row2 label.fld,.tripform .tf-row3 label.fld{ margin-top:0; }
.tf-map{ height:340px; border:1px solid var(--border2); border-radius:12px; margin-top:6px; }
.pinlist{ margin-top:10px; display:flex; flex-direction:column; gap:4px; }
.pinrow{ display:flex; gap:10px; align-items:center; font-size:13px; }
.pinnum{ display:inline-flex; width:22px; height:22px; align-items:center; justify-content:center;
  background:var(--fg); color:#fff; border-radius:50%; font-size:11px; font-weight:700; }
.pintip{ background:var(--fg); color:#fff; border:none; font-weight:700; border-radius:6px; }

.tf-actions{ display:flex; justify-content:flex-end; gap:10px; margin-top:20px; }

/* weather */
.wxgrid{ display:flex; flex-wrap:wrap; align-items:flex-start; gap:14px 18px; }
.wxf{ flex:0 0 auto; }
.tf-actions{ display:flex; justify-content:flex-end; margin-top:16px; }
.wxf .fld{ display:block; }
.wxu{ font-size:11px; color:var(--muted); margin-left:6px; }
.wxderived{ font-size:13px; color:var(--fg-dim); margin-top:14px; padding:10px 12px; background:var(--surface); border-radius:10px; }
.wxpre{ margin-top:12px; font-size:13px; }
.wxpre summary{ cursor:pointer; color:var(--fg-dim); }

/* notable */
.ncrow{ display:grid; grid-template-columns:90px 90px 1fr auto auto; gap:8px; align-items:center; margin-bottom:8px; }
.ncphoto,.ncphoto-btn{ cursor:pointer; font-size:18px; text-decoration:none; }

/* mini + knowledge tables */
.minitbl,.ktbl{ border-collapse:collapse; width:100%; font-size:13px; }
.minitbl th,.minitbl td,.ktbl th,.ktbl td{ border:1px solid var(--border); padding:6px 8px; text-align:left; }
.minitbl thead th,.ktbl thead th{ background:var(--surface); font-weight:700; }
.ktbl-wrap{ overflow-x:auto; }
.ktbl td input{ border:none; padding:4px 6px; border-radius:4px; }
.ktbl td input:focus{ outline:1px solid var(--border2); }

/* lake picker */
.lakepick-search{ display:flex; gap:8px; margin:12px 0 8px; }
.lakepick-search input{ flex:1; }
.lakepick-search .btn{ flex:none; }
.lp-results{ display:flex; flex-direction:column; gap:2px; margin-bottom:10px; max-height:160px; overflow:auto; }
.lp-res{ font-size:13px; padding:6px 8px; border:1px solid var(--border); border-radius:8px; cursor:pointer; }
.lp-res:hover{ border-color:var(--fg); background:var(--surface); }
.lakepick-save{ display:flex; gap:8px; margin-top:10px; }
.lakepick-save input{ flex:1; }
.lakepick-save .btn{ flex:none; }
.locactions{ white-space:nowrap; text-align:center; }
.mapedit{ cursor:pointer; font-size:15px; padding:0 6px; }

@media(max-width:640px){
  .tripform .tf-row2,.tripform .tf-row3{ grid-template-columns:1fr; }
  .ncrow{ grid-template-columns:1fr 1fr; }
  .headctl{ width:100%; }
}