/* Approved Onda Circular card styles: source = user-approved prototype */
#app .oc-home-conditions .spot-button{display:block;text-align:left;width:100%;border:1px solid #d9ded2;border-radius:9px;padding:0;background:var(--paper);color:var(--petrol);min-width:0;overflow:hidden;box-shadow:0 3px 9px #0c40570d;transition:border-color .16s,box-shadow .16s,transform .16s}#app .oc-home-conditions .spot-button:hover{border-color:#8fb9b6;box-shadow:0 9px 18px #0c405719;transform:translateY(-1px)}#app .oc-home-conditions .spot-button:focus-visible{outline-offset:2px}#app .oc-home-conditions .spot{height:100%;display:flex;flex-direction:column;min-height:338px}#app .oc-home-conditions .spot-header{display:flex;justify-content:space-between;align-items:flex-start;gap:8px;padding:14px 13px 0}#app .oc-home-conditions .spot-tag{font-size:9px;color:#66818a;font-weight:700;text-transform:uppercase;letter-spacing:.085em;margin-bottom:4px}#app .oc-home-conditions .spot-title{font-size:19px;letter-spacing:-.3px;color:var(--petrol);font-weight:850;line-height:1.13;margin:0}.spot-badge{font-size:10px;background:#e9f1ec;color:#176c70;white-space:nowrap;font-weight:700;padding:5px 6px;border-radius:5px}.primary-reading{display:flex;align-items:baseline;gap:8px;padding:8px 13px 4px}.wave-value{font-size:36px;line-height:.98;letter-spacing:-1.2px;font-weight:800;color:#03557a;font-variant-numeric:tabular-nums}.wave-label{font-size:10px;color:#5a7880}.subreadings{padding:5px 13px 9px;display:grid;gap:5px}.subreading{display:flex;gap:6px;justify-content:space-between;align-items:baseline;font-size:11px}.subreading span{color:#6c8084}.subreading b{font-size:11px;color:#154e61;font-weight:700;white-space:nowrap}.tide-panel{padding:8px 12px 8px;margin-top:4px;border-top:1px solid #e4e8de;background:#f8fbf7}.tide-labelrow{display:flex;justify-content:space-between;align-items:baseline;gap:7px}.tide-labelrow b{font-size:11px;color:#176879}.tide-labelrow span{font-size:9px;color:#789096}.tide-svg{width:100%;height:53px;display:block;margin:4px auto 0;overflow:visible}.tide-caption{display:flex;justify-content:space-between;gap:7px;font-size:10px;color:#426875;margin-top:0}.tide-caption span:last-child{text-align:right}.weather-foot{display:grid;grid-template-columns:1fr 1fr;gap:5px 7px;padding:10px 12px 12px;border-top:1px solid #e2e7dd;margin-top:auto}.weather-foot span{font-size:10px;color:#56737c;white-space:nowrap}.weather-foot strong{font-size:11px;color:#124f65}#app .oc-home-conditions .spot-bottom{display:flex;justify-content:space-between;gap:6px;align-items:center;padding:7px 12px;background:#f0f4ee;border-top:1px solid #e0e8dd;font-size:9px;color:#648088}.spot-bottom b{color:#0b677e;font-size:10px}.spot-bottom .emphasis{color:#0b677e;font-weight:700}

/* --- SURF V2: faithful Onda Circular component; no change to app brand tokens. --- */
.oc-mini-icon{width:17px;height:17px;flex:none;display:inline-block;vertical-align:middle;color:var(--teal)}
.cards{align-items:stretch;gap:11px}
.spot-button.oc-spot-v2{border:1px solid #d9ded2;background:var(--paper);border-radius:10px;box-shadow:0 2px 10px #0c40570b;transition:border-color .15s,transform .15s,box-shadow .15s}
.spot-button.oc-spot-v2:hover{border-color:#9ebfba;box-shadow:0 6px 16px #0c405714;transform:translateY(-1px)}
.oc-spot-v2 .spot-v2{min-height:354px;display:flex;flex-direction:column;height:100%}
.oc-spot-v2 .spot-header,.detail-card .spot-v2 .spot-header{display:flex;align-items:center;justify-content:space-between;gap:6px;padding:14px 12px 0;min-height:56px}
.oc-spot-v2 .spot-tag,.detail-card .spot-v2 .spot-tag{font-size:9px;letter-spacing:.06em;margin-bottom:3px}
.oc-spot-v2 .spot-title,.detail-card .spot-v2 .spot-title{font-size:19px;letter-spacing:-.2px;line-height:1.13}
.oc-condition-badge{display:inline-flex;align-items:center;gap:5px;font-size:10px;font-weight:760;border-radius:100px;padding:4px 7px;white-space:nowrap;line-height:1;flex:none}
.oc-condition-dot{width:7px;height:7px;border-radius:50%;background:currentColor;display:inline-block;flex:none}
.oc-condition-good{background:#e0f3e6;color:#136842}
.oc-condition-regular{background:#fff0cd;color:#8a5702}
.oc-condition-bad{background:#fde4e4;color:#a92b35}
.oc-condition-unknown{background:#e6e9e7;color:#46616a}
.oc-condition-reading{display:flex;align-items:center;gap:7px;padding:7px 13px 6px;min-height:61px}
.oc-wave-symbol .oc-mini-icon{width:28px;height:28px;color:var(--petrol)}
.oc-condition-reading .wave-value{font-weight:780;font-size:34px;color:#03557a;letter-spacing:-.8px;line-height:1}
.oc-condition-reading .wave-value small{font-weight:750;font-size:22px;margin-left:3px}
.oc-wave-label{font-size:10px;color:#637981;align-self:flex-end;padding-bottom:7px}
.oc-reading-list{display:grid;gap:5px;padding:2px 12px 11px}
.oc-reading-list>div{display:grid;grid-template-columns:18px minmax(34px,1fr) auto;align-items:center;gap:6px;font-size:11px;min-width:0;color:#415d66}
.oc-reading-list b{font-size:11px;font-weight:750;color:#0b4e69;white-space:nowrap}
.oc-reading-list .oc-mini-icon{width:15px;height:15px}
.oc-tide-block{border-top:1px solid #e6e7df;background:#f7f9f3;padding:9px 11px 10px;margin-top:0}
.oc-tide-head{display:flex;justify-content:space-between;gap:4px;align-items:center;line-height:1.1}
.oc-tide-head strong{display:inline-flex;align-items:center;gap:4px;font-size:11px;color:#04677d}
.oc-tide-head .oc-mini-icon{width:13px;height:13px}
.oc-tide-head>span{font-size:9px;color:#647b83}
.oc-tide-chart{display:block;width:100%;height:54px;margin-top:3px}
.oc-chart-labels{display:flex;justify-content:space-between;font-size:9px;color:#587780;margin-top:0}
.oc-tide-times{display:flex;justify-content:space-between;align-items:center;gap:6px;font-size:10px;color:#315e6c;margin-top:6px}
.oc-tide-times b{font-weight:750;color:#075773}
.oc-tide-times small{font-size:9px;color:#789196}
.oc-weather-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:3px;margin-top:auto;padding:10px 8px;border-top:1px solid #e4e7dd}
.oc-weather-grid>div{display:flex;align-items:center;gap:3px;min-width:0}
.oc-weather-grid .oc-mini-icon{width:15px;height:15px}
.oc-weather-grid span{font-size:9px;color:#688087;display:grid;min-width:0;line-height:1.15}
.oc-weather-grid b{font-size:10px;color:#0c4057;white-space:nowrap;font-weight:760}
.oc-spot-v2 .spot-bottom{padding:7px 11px;align-items:center}
.oc-spot-v2 .spot-bottom strong{font-size:10px;color:#08657a;white-space:nowrap}
.detail-card .spot-v2{min-height:0}.detail-card .spot-v2 .spot-header{padding:2px 0 10px}
.detail-card .spot-v2 .oc-condition-reading{padding:10px 0}.detail-card .spot-v2 .oc-reading-list{padding:8px 0 16px}
.detail-card .spot-v2 .oc-tide-block{border-radius:8px}.detail-card .spot-v2 .oc-weather-grid{padding:16px 5px}
body.measures .oc-spot-v2{outline:1px dashed #ba8658;outline-offset:1px}
@media(min-width:801px) and (max-width:1250px){
 .oc-spot-v2 .spot-v2{min-height:354px}.oc-spot-v2 .spot-header{padding-inline:8px}
 .oc-spot-v2 .spot-title{font-size:16px}.oc-condition-badge{font-size:9px;padding:4px}
 .oc-spot-v2 .oc-reading-list{padding-inline:8px}.oc-spot-v2 .oc-reading-list b{font-size:10px}
 .oc-spot-v2 .oc-weather-grid{padding-inline:5px}.oc-spot-v2 .oc-weather-grid .oc-mini-icon{width:12px;height:12px}
 .oc-spot-v2 .oc-weather-grid b{font-size:9px}.oc-spot-v2 .oc-tide-block{padding-inline:7px}
}
@media(max-width:800px){
 .oc-home-mobile .oc-spot-v2 .spot-v2{min-height:363px}
 .oc-home-mobile .oc-spot-v2 .spot-header{padding:14px 15px 0;min-height:55px}
 .oc-home-mobile .oc-spot-v2 .spot-title{font-size:22px}
 .oc-home-mobile .oc-spot-v2 .oc-condition-reading{padding:11px 15px 9px;min-height:72px}
 .oc-home-mobile .oc-spot-v2 .wave-value{font-size:41px}
 .oc-home-mobile .oc-spot-v2 .oc-reading-list{padding:2px 15px 11px;gap:7px}
 .oc-home-mobile .oc-spot-v2 .oc-reading-list>div{font-size:12px}
 .oc-home-mobile .oc-spot-v2 .oc-reading-list b{font-size:12px}
 .oc-home-mobile .oc-spot-v2 .oc-tide-block{padding:8px 14px 8px}
 .oc-home-mobile .oc-spot-v2 .oc-tide-chart{height:52px}
 .oc-home-mobile .oc-spot-v2 .oc-weather-grid{padding:10px 12px;grid-template-columns:repeat(4,minmax(0,1fr));gap:3px}
 .oc-home-mobile .oc-spot-v2 .oc-weather-grid span{font-size:10px}
 .oc-home-mobile .oc-spot-v2 .oc-weather-grid b{font-size:11px}
 .oc-home-mobile .oc-spot-v2 .spot-bottom{padding:9px 12px}
}
@media(max-width:360px){
 .oc-home-mobile .oc-spot-v2 .spot-title{font-size:19px}
 .oc-home-mobile .oc-spot-v2 .oc-reading-list b{font-size:11px}
 .oc-home-mobile .oc-spot-v2 .oc-weather-grid b{font-size:10px}
 .oc-home-mobile .oc-spot-v2 .oc-weather-grid .oc-mini-icon{width:13px;height:13px}
 .oc-spot-v2 .oc-tide-times{font-size:9px}
}


/* Wrapper/grid responsive: approved design retained, interaction added only on mobile */
#app .oc-home-conditions{width:100%;margin:0 0 8px;color:var(--petrol);font-family:var(--ui)}
#app .oc-approved-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:11px;align-items:stretch}
#app .oc-home-conditions .spot-button{height:100%;cursor:pointer}
#app .oc-home-conditions .spot-button:focus-visible,
#app .oc-home-conditions .oc-mode-dot:focus-visible{outline:3px solid var(--teal);outline-offset:2px}
#app .oc-home-conditions .spot-v2{min-height:354px}
#app .oc-home-mobile{display:none}
#app .oc-surf-disclaimer{font-size:10px;line-height:1.45;color:var(--muted);margin:5px 0}
#app .oc-route-block{min-height:116px}
#app .oc-route-metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin:10px 0 6px}
#app .oc-route-metrics>div{display:flex;flex-direction:column;gap:4px;color:var(--petrol);font-size:12px}
#app .oc-route-metrics small{font-size:10px;color:var(--muted)}
#app .oc-route-note{color:var(--muted);font-size:10px;line-height:1.4;margin-top:6px}
#app .oc-sport-card .oc-condition-reading .oc-mini-icon{width:26px;height:26px;flex:none}
#app .oc-home-conditions .quickgrid{margin-top:6px}
#app .oc-home-conditions .oc-tide-chart{height:54px}
#app .oc-mobile-carousel-tools{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:7px 0 4px}
#app .oc-geo-note{font-size:11px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#app .oc-mode-dots{display:flex;align-items:center;justify-content:center;gap:5px}
#app .oc-mode-dot{border:0;padding:10px 4px;background:transparent;cursor:pointer;min-width:30px;min-height:38px}
#app .oc-mode-dot span{display:block;width:7px;height:7px;border-radius:50%;background:#bdcac6;transition:background .18s}
#app .oc-mode-dot[aria-current=true] span{background:var(--petrol);width:9px;height:9px}
#app .oc-home-mobile .spot-button{width:100%}
@media (min-width:701px) and (max-width:1199px){
#app .oc-approved-grid{grid-template-columns:repeat(4,minmax(250px,1fr));overflow-x:auto}
}
@media(max-width:700px){
#app .oc-home-desktop{display:none}
#app .oc-home-mobile{display:block}
#app .oc-mobile-frame{width:100%;min-height:363px;overflow:hidden;perspective:800px}
#app .oc-home-mobile .spot-v2{min-height:363px}
#app .oc-home-mobile .spot-button{height:auto;min-height:363px}
#app .oc-home-conditions .quickgrid{margin-top:0}
}
@keyframes oc-card-enter{from{opacity:.32;transform:translateY(-18px) rotateX(8deg)}to{opacity:1;transform:translateY(0) rotateX(0)}}
#app .oc-card-enter{animation:oc-card-enter .45s ease-out both}
@media(prefers-reduced-motion:reduce){#app .oc-card-enter{animation:none}#app .oc-mode-dot span{transition:none}}