/* Scoped Home Surf component. Original Onda Circular tokens and fonts. */
#app .oc-home-surf{width:100%;margin:0 0 10px;font-family:var(--ui);color:var(--petrol)}
#app .oc-surf-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
#app .oc-surf-card{appearance:none;display:flex;flex-direction:column;min-width:0;height:290px;text-align:left;color:var(--petrol);font:inherit;padding:15px 14px 12px;border-radius:11px;border:1px solid #d5ddd5;background:var(--paper);box-shadow:0 2px 7px #0c40570c;cursor:pointer;overflow:hidden;transition:box-shadow .18s,border-color .18s}
#app .oc-surf-card:hover{border-color:var(--teal);box-shadow:0 6px 18px #0c405718}
#app .oc-surf-card:focus-visible{outline:3px solid var(--teal);outline-offset:2px}
#app .oc-surf-card-head{display:flex;align-items:center;justify-content:space-between;gap:6px;width:100%}
#app .oc-surf-card-head>strong{font-size:18px;line-height:1.1;font-weight:800;letter-spacing:-.025em}
#app .oc-surf-badge{display:inline-flex;align-items:center;flex:none;gap:5px;padding:5px 7px;border-radius:4px;font-size:10px;font-weight:700;line-height:1;color:#38636e;background:#e7eeeb}
#app .oc-surf-badge:before{content:'';width:6px;height:6px;border-radius:50%;background:currentColor}
#app [data-status=good] .oc-surf-badge{background:#e4f0e2;color:#21683a}
#app [data-status=fair] .oc-surf-badge{background:#fff1cd;color:#765108}
#app [data-status=poor] .oc-surf-badge{background:#f8e4e2;color:#a13e38}
#app .oc-surf-primary{display:flex;align-items:center;gap:9px;margin:10px 0 8px}
#app .oc-surf-primary svg{height:25px;width:25px;stroke:var(--teal);flex:none}
#app .oc-surf-primary strong{font-size:31px;font-weight:800;line-height:1;letter-spacing:-.04em;font-variant-numeric:tabular-nums}
#app .oc-surf-primary small{font-size:17px;font-weight:600}
#app .oc-surf-measures{display:flex;gap:10px;white-space:nowrap;width:100%;color:#496771;font-size:10px}
#app .oc-surf-measures>span{display:flex;gap:3px;align-items:baseline}
#app .oc-surf-measures b{font-size:11px;color:var(--petrol);font-weight:750}
#app .oc-surf-wind{display:flex;align-items:center;gap:7px;margin-top:11px;color:#4a656e;font-size:12px}
#app .oc-surf-wind svg{width:16px;height:16px;flex:none;stroke:var(--teal)}
#app .oc-surf-wind strong{color:var(--petrol);font-weight:800}
#app .oc-surf-tide{display:flex;flex-direction:column;gap:3px;margin-top:auto;color:var(--teal)}
#app .oc-surf-tide-plot{width:100%;height:36px;display:block}
#app .oc-surf-no-tide{font-size:11px;color:var(--muted);min-height:30px}
#app .oc-surf-tide-caption{display:flex;justify-content:space-between;align-items:center;gap:7px;white-space:nowrap}
#app .oc-surf-tide-caption b{font-size:11px;color:var(--petrol)}
#app .oc-surf-tide-caption small{font-size:9px;color:#5a7178}
#app .oc-surf-foot{display:flex;justify-content:space-between;align-items:center;gap:4px;margin-top:9px;padding-top:7px;border-top:1px solid var(--line);width:100%;font-size:11px;font-weight:650}
#app .oc-surf-foot>span{display:flex;align-items:center;gap:4px}
#app .oc-surf-foot svg{width:15px;height:15px;stroke:var(--teal)}
#app .oc-surf-foot small{font-size:10px;font-weight:400;color:#5d7178}
#app .oc-surf-disclaimer{margin:4px 0 0;font-size:10px;line-height:1.2;color:#627980}
#app .quickgrid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));grid-auto-flow:row;gap:7px;margin:6px 0 16px;overflow:visible;padding:0}
#app .quickgrid .quick{min-width:0;min-height:58px;gap:5px;padding:8px 7px;border-radius:7px;scroll-snap-align:none}
#app .quickgrid .quick strong{font-size:12px;line-height:1.2}
#app .quickgrid .quick small{font-size:10px;line-height:1.2}
#app .quickgrid .quick-icon,#app .quickgrid .quick-icon svg{width:23px;height:23px;flex:0 0 23px}
#app .quickgrid .quick>svg:last-child{display:none}
@media(max-width:1199px) and (min-width:701px){#app .quickgrid{grid-template-columns:repeat(6,minmax(112px,1fr));overflow-x:auto}#app .oc-surf-grid{grid-template-columns:repeat(4,minmax(240px,1fr));overflow-x:auto}}
@media(max-width:700px){
#app .oc-home-surf{margin-bottom:7px}
#app .oc-surf-grid{display:block;position:relative;width:100%;height:235px;overflow:hidden}
#app .oc-surf-card{display:none;height:233px;width:100%;padding:12px 13px 10px;border-radius:9px;box-shadow:none}
#app .oc-surf-card[data-active=true]{display:flex;animation:oc-surf-flip .44s ease-out both}
#app .oc-surf-card-head>strong{font-size:16px}
#app .oc-surf-badge{font-size:9px;padding:4px 6px}
#app .oc-surf-primary{margin:8px 0 6px;gap:7px}
#app .oc-surf-primary svg{width:20px;height:20px}
#app .oc-surf-primary strong{font-size:26px}
#app .oc-surf-primary small{font-size:15px}
#app .oc-surf-measures{gap:10px;font-size:12px}
#app .oc-surf-measures b{font-size:11px}
#app .oc-surf-wind{margin-top:6px;font-size:12px}
#app .oc-surf-tide{margin-top:10px}
#app .oc-surf-tide-plot{height:30px}
#app .oc-surf-tide-caption{margin-top:-2px}
#app .oc-surf-tide-caption b{font-size:12px}
#app .oc-surf-foot{margin-top:auto;padding-top:6px}
#app .oc-surf-disclaimer{font-size:9px}
#app .quickgrid{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-flow:row;grid-auto-columns:unset;gap:7px;overflow:visible;scroll-snap-type:none;margin:8px 0 14px;padding:0}
#app .quickgrid .quick{min-width:0;min-height:57px;gap:5px;padding:7px;border-radius:7px}
#app .quickgrid .quick strong{font-size:12px}
#app .quickgrid .quick small{font-size:10px}
#app .quickgrid .quick-icon,#app .quickgrid .quick-icon svg{width:23px;height:23px;flex:0 0 23px}
}
@media(max-width:350px){#app .oc-surf-card{padding-inline:9px}#app .oc-surf-measures{gap:5px}#app .oc-surf-measures b{font-size:10px}#app .oc-surf-tide-caption small{font-size:8px}#app .quickgrid .quick small{font-size:9px}}
@keyframes oc-surf-flip{from{opacity:.35;transform:translateY(-13px) rotateX(9deg)}to{opacity:1;transform:translateY(0) rotateX(0)}}
@media(prefers-reduced-motion:reduce){#app .oc-surf-card[data-active=true]{animation:none}#app .oc-surf-card{transition:none}}