/* Reset and Base Styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    color-scheme: light only;
}

body {
    font-family: 'Open Sans', sans-serif;
    line-height: 1.6;
    color: #333;
    background: linear-gradient(rgba(66, 133, 244, 0.8), rgba(232, 139, 93, 0.8)), url('Banner-AYC-Point-636.5-scaled.jpg');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    min-height: 100vh;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

/* Header Styles */
header {
    text-align: center;
    margin-bottom: 0.75rem;
    color: white;
}

header h1 {
    font-size: 2.5rem;
    font-weight: 700;
    line-height: 1.15;
    margin-bottom: 0;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
}

.subtitle {
    font-size: 1.2rem;
    opacity: 0.9;
    font-weight: 400;
}

.subtitle a {
    color: #fff;
    text-decoration: none;
    font-weight: 600;
    border-bottom: 1px solid rgba(255, 255, 255, 0.5);
    transition: all 0.3s ease;
}

.subtitle a:hover {
    color: #E88B5D;
    border-bottom-color: #E88B5D;
    text-shadow: 0 0 8px rgba(232, 139, 93, 0.3);
}


/* Card Styles */
.card {
    background: rgba(255, 255, 255, 0.8);
    border-radius: 12px;
    padding: 2rem;
    margin-bottom: 2rem;
    box-shadow: 0 8px 32px rgba(0,0,0,0.1);
    border: 1px solid rgba(255,255,255,0.2);
}

.card h2 {
    color: #2c3e50;
    font-size: 1.8rem;
    margin-bottom: 1.5rem;
    font-weight: 600;
}

/* Step Styles */
.step {
    display: flex;
    align-items: flex-start;
    margin-bottom: 2rem;
    gap: 1rem;
}

.step:last-child {
    margin-bottom: 0;
}

.step-number {
    background: #4285F4;
    color: white;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 1.2rem;
    flex-shrink: 0;
}

.step-content {
    flex: 1;
}

.step-content h3 {
    color: #2c3e50;
    font-size: 1.3rem;
    margin-bottom: 0.5rem;
    font-weight: 600;
}

.step-content p {
    color: #666;
    margin-bottom: 1rem;
    line-height: 1.5;
}

/* Facebook Section Styles */
.facebook-section {
    display: block;
}

.facebook-text {
    width: 100%;
}

.facebook-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    margin-top: 1rem;
}

.facebook-image-link {
    display: inline-block;
    text-decoration: none;
    transition: transform 0.3s ease;
}

.facebook-image-link:hover {
    transform: scale(1.05);
}

.facebook-group-img {
    height: 96px;
    width: auto;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    transition: transform 0.3s ease;
    display: block;
}

/* Button Styles */
.btn {
    display: inline-block;
    padding: 12px 24px;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 600;
    font-size: 1rem;
    transition: all 0.3s ease;
    border: 2px solid transparent;
    cursor: pointer;
    text-align: center;
    margin: 0 auto;
}

.step-content {
    text-align: center;
}

.btn-primary {
    background: #4285F4;
    color: white;
    border-color: transparent;
}

.btn-primary:hover {
    background: #E88B5D;
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(232, 139, 93, 0.4);
}

.btn-secondary {
    background: #dc3545;
    color: white;
    border: 2px solid #dc3545;
    font-weight: 700;
}

.btn-secondary:hover {
    background: #ffffff;
    color: #dc3545;
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(220, 53, 69, 0.4);
}

.btn-outline {
    background: transparent;
    color: #4285F4;
    border-color: #4285F4;
}

.btn-outline:hover {
    background: #4285F4;
    color: white;
    transform: translateY(-2px);
}

.btn-outline {
    font-size: 1.2rem;
}

.btn-outline:before {
    content: "";
    display: inline-block;
    width: 1.25em;
    height: 1.25em;
    margin-right: 0.5rem;
    vertical-align: -0.3em;
    background-color: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cpath d='M112 128C85.5 128 64 149.5 64 176C64 191.1 71.1 205.3 83.2 214.4L291.2 370.4C308.3 383.2 331.7 383.2 348.8 370.4L556.8 214.4C568.9 205.3 576 191.1 576 176C576 149.5 554.5 128 528 128L112 128zM64 260L64 448C64 483.3 92.7 512 128 512L512 512C547.3 512 576 483.3 576 448L576 260L377.6 408.8C343.5 434.4 296.5 434.4 262.4 408.8L64 260z'/%3E%3C/svg%3E") no-repeat center / contain;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cpath d='M112 128C85.5 128 64 149.5 64 176C64 191.1 71.1 205.3 83.2 214.4L291.2 370.4C308.3 383.2 331.7 383.2 348.8 370.4L556.8 214.4C568.9 205.3 576 191.1 576 176C576 149.5 554.5 128 528 128L112 128zM64 260L64 448C64 483.3 92.7 512 128 512L512 512C547.3 512 576 483.3 576 448L576 260L377.6 408.8C343.5 434.4 296.5 434.4 262.4 408.8L64 260z'/%3E%3C/svg%3E") no-repeat center / contain;
}


/* Crewing Section */
.crewing-options {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
}

.option {
    text-align: center;
    padding: 1.5rem;
    border: 2px solid #f0f0f0;
    border-radius: 8px;
    transition: all 0.3s ease;
}

.option:hover {
    border-color: #667eea;
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}

.option h3 {
    color: #2c3e50;
    font-size: 1.3rem;
    margin-bottom: 1rem;
    font-weight: 600;
}

.option p {
    color: #666;
    margin-bottom: 1.5rem;
    line-height: 1.5;
}

/* Crew Bench Image */
.crew-bench-image {
    margin-top: 1rem;
    text-align: center;
}

.crew-bench-img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    transition: transform 0.3s ease;
}

.crew-bench-img:hover {
    transform: scale(1.02);
}

.crew-bench-location {
    margin-top: 0.75rem;
    font-size: 0.9rem;
    color: #666;
    font-style: italic;
}

.crew-bench-location a {
    color: #4285F4;
    text-decoration: none;
    font-weight: 600;
    border-bottom: 1px solid transparent;
    transition: all 0.3s ease;
}

.crew-bench-location a:hover {
    color: #E88B5D;
    border-bottom-color: #4285F4;
}

.crew-list-credit {
    margin-top: 0.75rem;
    font-size: 0.85rem;
    color: #888;
    font-style: italic;
    text-align: center;
}

.fleet-list-img, .lookup-img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    margin-top: 0.5rem;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.map-container {
    margin-top: 1rem;
    text-align: center;
}

.map-link {
    display: inline-block;
    text-decoration: none;
    transition: transform 0.3s ease;
}

.map-link:hover {
    transform: scale(1.02);
}

.map-img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    border: 2px solid #4285F4;
}

.map-placeholder {
    background: url('fred.png');
    background-size: cover;
    background-position: center;
    border: 2px solid #4285F4;
    border-radius: 8px;
    padding: 2rem;
    text-align: center;
    color: white;
    font-weight: 600;
    transition: all 0.3s ease;
    min-height: 200px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
}

.map-placeholder:hover {
    transform: scale(1.02);
    box-shadow: 0 8px 25px rgba(66, 133, 244, 0.4);
}

.map-icon {
    font-size: 2rem;
    margin-bottom: 0.5rem;
    display: block;
}

.map-placeholder p {
    margin: 0;
    font-size: 1rem;
}

.repair-shop-images {
    margin: 1rem 0;
    text-align: center;
    display: flex;
    gap: 1rem;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
}

.repair-shop-img, .drive-img {
    max-height: 200px;
    width: auto;
    height: auto;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    border: 2px solid #E88B5D;
    flex: 0 0 auto;
    min-width: 200px;
    max-width: 300px;
}

.repair-shop-note {
    margin-top: 1rem;
    font-style: italic;
    color: #666;
    text-align: center;
    font-size: 1.1rem;
}

.business-info {
    margin-top: 2rem;
    padding: 1.5rem;
    background: rgba(255, 255, 255, 0.9);
    border-radius: 8px;
    border: 2px solid #4285F4;
    text-align: center;
}

.business-info h3 {
    color: #2c3e50;
    margin-bottom: 1rem;
    font-size: 1.3rem;
}

.business-info p {
    margin-bottom: 0.8rem;
    line-height: 1.6;
}

.business-info strong {
    color: #4285F4;
    font-weight: 600;
}

.business-info a {
    color: #4285F4;
    text-decoration: none;
    font-weight: 500;
}

.business-info a:hover {
    text-decoration: underline;
}

.business-image {
    margin: 1rem 0;
    text-align: center;
}

.bartlett-store-img {
    max-width: 100%;
    max-height: 300px;
    width: auto;
    height: auto;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    border: 2px solid #4285F4;
}

@media (max-width: 768px) {
    .bartlett-store-img {
        max-height: 200px;
    }
}

/* Probationary Points Section */
.points-summary {
    margin: 1.5rem 0;
    padding: 1.5rem;
    background: linear-gradient(135deg, rgba(66, 133, 244, 0.08), rgba(232, 139, 93, 0.08));
    border: 2px solid #4285F4;
    border-radius: 12px;
}

.points-summary-intro {
    color: #2c3e50;
    font-size: 1.05rem;
    margin-bottom: 1.25rem;
}

.points-equation {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
}

.point-badge {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: white;
    border: 1px solid #dbe6f7;
    border-radius: 12px;
    padding: 0.75rem 0.5rem;
    width: 108px;
    min-height: 118px;
    box-shadow: 0 2px 8px rgba(44, 62, 80, 0.08);
    transition: all 0.3s ease;
}

.point-badge:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(66, 133, 244, 0.25);
}

.point-plus {
    font-size: 1.4rem;
    font-weight: 700;
    color: #2c3e50;
    opacity: 0.45;
    flex-shrink: 0;
}

.point-count {
    font-size: 1.9rem;
    font-weight: 700;
    color: #4285F4;
    line-height: 1.2;
}

.point-code {
    font-size: 0.75rem;
    font-weight: 700;
    color: white;
    background: #E88B5D;
    border-radius: 999px;
    padding: 0.1rem 0.6rem;
    margin: 0.3rem 0;
    letter-spacing: 0.05em;
}

.point-label {
    font-size: 0.8rem;
    color: #666;
    font-weight: 600;
    text-align: center;
    line-height: 1.25;
}

.point-badge-other {
    border-style: dashed;
    border-color: #c4d3ea;
    background: rgba(255, 255, 255, 0.6);
    box-shadow: none;
}

.point-badge-other .point-count {
    color: #9aa9be;
}

.point-badge-other .point-code {
    background: #9aa9be;
}

.point-badge-other .point-label {
    color: #9aa9be;
}

.point-badge-total {
    background: #4285F4;
    border-color: #4285F4;
    box-shadow: 0 6px 18px rgba(66, 133, 244, 0.35);
    width: 128px;
}

.point-badge-total .point-count {
    color: white;
    font-size: 2.4rem;
}

.point-badge-total .point-label {
    color: rgba(255, 255, 255, 0.9);
}

.point-badge-total:hover {
    box-shadow: 0 10px 24px rgba(66, 133, 244, 0.45);
}

.handbook-excerpt {
    margin: 1.5rem auto;
    max-width: 700px;
    background: white;
    border: 1px solid #e0e0e0;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    overflow: hidden;
}

.handbook-excerpt-caption {
    background: #2c3e50;
    color: white;
    font-size: 0.9rem;
    font-weight: 600;
    text-align: left;
    padding: 0.6rem 1rem;
}

.handbook-excerpt .points-img {
    display: block;
    width: 100%;
    height: auto;
    padding: 0.75rem;
}

.recommend-heading {
    color: #2c3e50;
    font-size: 1.3rem;
    font-weight: 600;
    margin: 2rem 0 1rem;
}

.recommend-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    text-align: left;
}

.recommend-card {
    background: white;
    border: 2px solid #f0f0f0;
    border-radius: 8px;
    padding: 1.25rem;
    transition: all 0.3s ease;
}

.recommend-card:hover {
    border-color: #4285F4;
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}

.recommend-card-wide {
    grid-column: 1 / -1;
}

.recommend-icon {
    font-size: 1.8rem;
    line-height: 1;
    margin-bottom: 0.5rem;
}

.recommend-card h4 {
    color: #2c3e50;
    font-size: 1.05rem;
    font-weight: 600;
    margin-bottom: 0.4rem;
}

.recommend-card p {
    color: #666;
    margin-bottom: 0;
    line-height: 1.5;
    font-size: 0.95rem;
}

.recommend-card a {
    color: #4285F4;
    text-decoration: none;
    font-weight: 600;
}

.recommend-card a:hover {
    color: #E88B5D;
    text-decoration: underline;
}

.gm-callout {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    margin-top: 1.5rem;
    padding: 1rem 1.5rem;
    background: rgba(232, 139, 93, 0.12);
    border-left: 4px solid #E88B5D;
    border-radius: 8px;
    text-align: left;
}

.gm-callout-icon {
    font-size: 1.6rem;
    flex-shrink: 0;
}

.gm-callout p {
    margin-bottom: 0;
    color: #2c3e50;
    font-size: 1rem;
}

.gm-callout a {
    color: #4285F4;
    text-decoration: none;
    font-weight: 700;
    white-space: nowrap;
}

.gm-callout a:hover {
    color: #E88B5D;
    text-decoration: underline;
}

/* Webcam & Weather Section */
.webcam-section .card {
    text-align: center;
    padding-top: 1rem;
}

.webcam-section .card h2 {
    margin-bottom: 0.35rem;
}

.webcam-section .card > p {
    margin-bottom: 0.25rem;
}

/* Sailability banner: full scale with a "now" marker and lull-to-gust bracket */
.sailability {
    position: relative;
    background: linear-gradient(135deg, rgba(66, 133, 244, 0.07), rgba(232, 139, 93, 0.07));
    border: 1px solid #dbe6f7;
    border-radius: 14px;
    padding: 0.6rem 1.5rem 0.9rem;
    margin-bottom: 1rem;
    box-shadow: 0 4px 14px rgba(44, 62, 80, 0.08);
}

.sail-top {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 0.45rem;
    margin-bottom: 0.75rem;
}

.sail-top .sail-chips {
    display: contents;
}

.sail-scale {
    position: relative;
    height: 56px;
    margin: 26px 0 0; /* headroom for the LULL/GUST labels above the bar */
    text-align: left;
}

.sail-bar {
    display: flex;
    height: 28px;
    border-radius: 999px;
    overflow: hidden;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.15);
}

.sail-zone {
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    white-space: nowrap;
    overflow: hidden;
}

.sz-blue { background: #4285F4; }
.sz-green { background: #34a853; }
.sz-orange { background: #f29900; }
.sz-red { background: #dc3545; }

.sail-tick {
    position: absolute;
    top: 32px;
    font-size: 0.74rem;
    font-weight: 600;
    color: #4a5a6a;
    transform: translateX(-50%);
}

/* Lull-to-gust range shown as a pair of brackets [ ] over the bar —
   explicit strokes stay visible even when browsers force-darken the page */
.sail-gustband {
    position: absolute;
    top: -4px;
    height: 36px;
    z-index: 1;
    pointer-events: none;
}

.sail-gustband::before,
.sail-gustband::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    width: 8px;
    border: 3px solid white;
    filter: drop-shadow(0 0 1.5px rgba(44, 62, 80, 0.8));
}

.sail-gustband::before {
    left: 0;
    border-right: none;
    border-radius: 5px 0 0 5px;
}

.sail-gustband::after {
    right: 0;
    border-left: none;
    border-radius: 0 5px 5px 0;
}

.sail-marker {
    position: absolute;
    top: -2px;
    width: 0;
    z-index: 2;
}

.sail-pill {
    position: absolute;
    top: 30px;
    transform: translateX(-50%);
    background: #2c3e50;
    border: 1px solid rgba(255, 255, 255, 0.75);
    color: white;
    font-size: 0.7rem;
    font-weight: 700;
    padding: 2px 9px;
    border-radius: 999px;
    white-space: nowrap;
}

.sail-arrow {
    position: absolute;
    top: 0;
    left: 0;
    transform: translateX(-50%);
    width: 3px;
    height: 52px;
    background: white;
    border-radius: 2px;
    box-shadow: 0 0 0 1.5px rgba(44, 62, 80, 0.55);
}

.sail-chips {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.45rem;
}

.sail-updated {
    font-size: 0.72rem;
    color: #999;
    margin-left: 0.4rem;
}

/* "LULL n" / "GUST n" ride on the bracket ends, labeling the band */
.band-label {
    position: absolute;
    top: -17px;
    font-size: 0.62rem;
    font-weight: 700;
    color: #4a5a6a;
    letter-spacing: 0.03em;
    white-space: nowrap;
}

.band-label.band-lull {
    left: 0;
    transform: translateX(-50%);
}

.band-label.band-gust {
    right: 0;
    transform: translateX(50%);
}

/* Narrow band: anchor the labels outside the brackets so they can't collide */
.sail-gustband.band-tight .band-lull {
    transform: translateX(calc(-100% - 5px));
}

.sail-gustband.band-tight .band-gust {
    transform: translateX(calc(100% + 5px));
}

.sail-refresh {
    font-family: inherit;
    font-size: 0.72rem;
    font-weight: 600;
    color: #4285F4;
    background: white;
    border: 1px solid #4285F4;
    border-radius: 999px;
    padding: 0.15rem 0.6rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.sail-refresh::before {
    content: "";
    display: inline-block;
    width: 0.85em;
    height: 0.85em;
    margin-right: 0.35em;
    vertical-align: -0.08em;
    background-color: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cpath d='M320 128C263.2 128 212.1 152.7 176.9 192L224 192C241.7 192 256 206.3 256 224C256 241.7 241.7 256 224 256L96 256C78.3 256 64 241.7 64 224L64 96C64 78.3 78.3 64 96 64C113.7 64 128 78.3 128 96L128 150.7C174.9 97.6 243.5 64 320 64C461.4 64 576 178.6 576 320C576 461.4 461.4 576 320 576C233 576 156.1 532.6 109.9 466.3C99.8 451.8 103.3 431.9 117.8 421.7C132.3 411.5 152.2 415.1 162.4 429.6C197.2 479.4 254.8 511.9 320 511.9C426 511.9 512 425.9 512 319.9C512 213.9 426 128 320 128z'/%3E%3C/svg%3E") no-repeat center / contain;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cpath d='M320 128C263.2 128 212.1 152.7 176.9 192L224 192C241.7 192 256 206.3 256 224C256 241.7 241.7 256 224 256L96 256C78.3 256 64 241.7 64 224L64 96C64 78.3 78.3 64 96 64C113.7 64 128 78.3 128 96L128 150.7C174.9 97.6 243.5 64 320 64C461.4 64 576 178.6 576 320C576 461.4 461.4 576 320 576C233 576 156.1 532.6 109.9 466.3C99.8 451.8 103.3 431.9 117.8 421.7C132.3 411.5 152.2 415.1 162.4 429.6C197.2 479.4 254.8 511.9 320 511.9C426 511.9 512 425.9 512 319.9C512 213.9 426 128 320 128z'/%3E%3C/svg%3E") no-repeat center / contain;
}

.sail-refresh:hover {
    background: #4285F4;
    color: white;
}

.sail-refresh:disabled {
    opacity: 0.6;
    cursor: wait;
}

.sail-chip {
    background: white;
    border: 1px solid #dbe6f7;
    border-radius: 999px;
    padding: 0.25rem 0.75rem;
    font-size: 0.82rem;
    font-weight: 600;
    color: #2c3e50;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
}

.sail-chip b { color: #4285F4; }

/* Heads-up compass overlaid on the webcam */
.cam-compass {
    position: absolute;
    bottom: 12px;
    left: 12px;
    width: 110px;
    height: 110px;
    z-index: 2;
    pointer-events: none;
    filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.35));
}

.cam-compass svg {
    display: block;
    width: 100%;
    height: 100%;
}

.cam-speed {
    left: auto;
    right: 12px;
}

/* Custom wind-direction chart (replaces the Grafana degrees chart via JS) */
.dir-chart {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: white;
    text-align: left;
}

.dir-chart-title {
    padding: 10px 12px 0;
    font-size: 0.9rem;
    font-weight: 700;
    color: #2c3e50;
    height: 34px;
    box-sizing: border-box;
    white-space: nowrap;
    overflow: hidden;
}

.dir-chart-title span {
    font-weight: 400;
    font-size: 0.75rem;
    color: #888;
}

.dir-chart svg {
    display: block;
}

.stat-cur {
    float: right;
    font-size: 1rem;
    font-weight: 700;
}

.weather-embed {
    position: relative;
    border: 1px solid #dbe6f7;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    background: white;
    margin-bottom: 1rem;
}

.grafana-cover {
    position: absolute;
    width: 145px;
    height: 30px;
    background: white;
    border-radius: 8px;
    pointer-events: none;
    z-index: 2;
}

.weather-embed iframe {
    display: block;
    width: 100%;
    height: 300px;
    border: 0;
}

/* Camera embeds: the Grafana panel anchors the camera image below its
   title bar, so a fixed-ratio window slides up over the iframe to keep
   the camera view itself filling the frame. */
/* The camera is a direct snapshot image, so the frame takes the photo's
   natural shape whatever mode the camera is in (day crop, night panorama). */
.weather-embed-cam {
    position: relative;
    overflow: hidden;
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
    align-self: start;
}

.weather-embed-cam > img {
    display: block;
    width: 100%;
    height: auto;
}

.cam-note {
    position: absolute;
    bottom: 14px;
    left: 50%;
    transform: translateX(-50%);
    white-space: nowrap;
    z-index: 2;
    background: rgba(30, 42, 56, 0.65);
    color: white;
    font-size: 0.85rem;
    font-weight: 600;
    padding: 0.3rem 0.8rem;
    border-radius: 999px;
    pointer-events: none;
    letter-spacing: 0.02em;
}

.weather-layout {
    display: grid;
    grid-template-columns: 1fr 2.1fr 1fr;
    gap: 1rem;
    align-items: stretch;
    margin-bottom: 1rem;
}

.weather-layout .weather-embed-cam {
    margin: 0;
    max-width: none;
}

.weather-side {
    display: grid;
    grid-auto-rows: 1fr;
    gap: 1rem;
    min-height: 0;
}

.weather-side .weather-embed {
    margin-bottom: 0;
    position: relative;
    min-height: 0;
}

.weather-side .weather-embed iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.weather-instruments {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
}

.weather-instruments .weather-embed {
    margin-bottom: 0;
    /* the custom charts inside are absolutely positioned, so the tile needs
       its own height to avoid collapsing */
    min-height: 250px;
}

.weather-instruments .weather-embed iframe {
    height: 200px;
}

.water-tile {
    display: flex;
    flex-direction: column;
    container-type: inline-size;
}

/* Squeezed tile: drop the chip icons and the title's source note so
   "Water Temp" and the season ranges stay whole. */
@container (max-width: 270px) {
    .wtg-ico {
        display: none;
    }

    .water-tile .dir-chart-title span {
        display: none;
    }

    .wtg {
        padding: 0.15rem 0.4rem;
    }
}

.water-chart-area {
    position: relative;
    height: 200px;
}

.water-chart-area iframe {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
}

/* Our own title sits over the Grafana iframe's header, whose "Water
   Temp (F)" text Grafana truncates on narrow tiles. */
.water-chart-area .iframe-title {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    background: white;
    z-index: 1;
}

.water-temp-guide-side {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.35rem;
    padding: 0 10px 10px;
    font-size: 0.72rem;
}

.water-temp-guide-side .wtg {
    text-align: center;
}

.wtg.wtg-active {
    border-color: #4285F4;
    background: #4285F4;
    color: white;
    font-weight: 700;
    box-shadow: 0 3px 10px rgba(66, 133, 244, 0.45);
}

.wtg.wtg-active b {
    color: white;
}

.wtg {
    background: rgba(255, 255, 255, 0.75);
    border: 1px solid #e4ebf5;
    border-radius: 999px;
    padding: 0.15rem 0.65rem;
    color: #666;
    white-space: nowrap;
}

.wtg b {
    color: #2c3e50;
    font-weight: 600;
}

.weather-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1rem;
    margin-top: 1.5rem;
}

/* Calendar Section */
.calendar-section .card {
    text-align: center;
}

.calendar-section p {
    color: #666;
    margin-bottom: 1.5rem;
    font-size: 1.1rem;
}

/* Footer */
footer {
    margin-top: auto;
    text-align: center;
    color: white;
    padding: 2rem 0;
    opacity: 0.8;
}

footer p {
    margin-bottom: 0.5rem;
}

footer a {
    color: #fff;
    text-decoration: none;
    font-weight: 600;
    border-bottom: 1px solid rgba(255, 255, 255, 0.5);
    transition: all 0.3s ease;
}

footer a:hover {
    color: #E88B5D;
    border-bottom-color: #E88B5D;
    text-shadow: 0 0 8px rgba(232, 139, 93, 0.3);
}

/* Mobile Responsive Design */
@media (max-width: 768px) {
    body {
        background-attachment: scroll;
        background-position: center top;
    }
    
    .container {
        padding: 15px;
    }
    
    header h1 {
        font-size: 2rem;
    }
    
    .subtitle {
        font-size: 1rem;
    }
    
    .card {
        padding: 1.5rem;
        margin-bottom: 1.5rem;
    }
    
    .card h2 {
        font-size: 1.5rem;
    }
    
    .step {
        flex-direction: column;
        text-align: center;
        gap: 1rem;
    }
    
    .step-content {
        text-align: center;
    }
    
    .step-number {
        align-self: center;
    }
    
    .step-content h3 {
        font-size: 1.2rem;
    }
    
    .facebook-actions {
        flex-direction: column;
        align-items: center;
        gap: 1rem;
    }
    
    .facebook-group-img {
        height: 80px;
        width: auto;
    }
    
    .btn {
        width: 100%;
        max-width: 300px;
        display: block;
        margin: 0 auto;
    }
    
    .crewing-options {
        gap: 1.5rem;
    }

    .option {
        padding: 1rem;
    }

    .recommend-grid {
        grid-template-columns: 1fr;
    }

    .points-summary {
        padding: 1rem;
    }

    .point-plus {
        display: none;
    }

    .points-equation {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 0.75rem;
    }

    .point-badge {
        width: auto;
        min-height: 108px;
    }

    .point-badge-total {
        grid-column: 1 / -1;
        width: auto;
    }

    /* Mobile glance mode: verdict scale first, then camera, then detail.
       Most phone visitors just want the weather report. */
    .webcam-section .card > p {
        display: none;
    }

    .webcam-section .card h2 {
        font-size: 1.35rem;
        margin-bottom: 0.5rem;
    }

    .sailability {
        display: flex;
        flex-direction: column;
        padding: 0.9rem 0.9rem 0.7rem;
    }

    /* Chips cluster at the top (wrapping), scale below with its pill */
    .sail-top {
        margin-bottom: 0.6rem;
        gap: 0.35rem;
    }

    .sail-chip {
        font-size: 0.78rem;
        padding: 0.2rem 0.6rem;
    }

    /* Camera full width on top, wind ribbons side by side beneath it */
    .weather-layout {
        grid-template-columns: 1fr 1fr;
    }

    .weather-layout .weather-embed-cam {
        order: -1;
        grid-column: 1 / -1;
    }

    .weather-side {
        grid-auto-rows: auto;
        grid-template-columns: 1fr;
    }

    .weather-side .weather-embed {
        height: 230px;
    }

    /* Temp + humidity share a row; the taller water tile gets its own */
    .weather-instruments {
        grid-template-columns: 1fr 1fr;
    }

    .weather-instruments .water-tile {
        grid-column: 1 / -1;
        order: 3;
    }

    .water-chart-area {
        height: 170px;
    }

    .sail-zone {
        font-size: 0.55rem;
        letter-spacing: 0;
    }

    .cam-compass {
        width: 78px;
        height: 78px;
        bottom: 8px;
        left: 8px;
    }

    .cam-speed {
        left: auto;
        right: 8px;
    }

    .weather-embed iframe {
        height: 260px;
    }

    .weather-instruments .weather-embed iframe {
        height: 180px;
    }

    .gm-callout {
        flex-direction: column;
        text-align: center;
        gap: 0.5rem;
    }
}

.sail-pill-verdict {
    display: none;
}

@media (max-width: 560px) {
    header {
        margin-bottom: 1rem;
    }

    header h1 {
        font-size: 1.7rem;
        margin-bottom: 0.2rem;
    }

    .subtitle {
        font-size: 1rem;
    }

    /* Zone names can't fit at this width: colors stay, the verdict word
       rides in the "now" pill instead. */
    .sail-zone {
        font-size: 0;
    }

    .sail-pill-verdict {
        display: inline;
    }

    /* The verdict makes the pill long, so it gets its own row under the
       ticks instead of riding the tick row */
    .sail-scale {
        height: 76px;
    }

    .sail-pill {
        top: 50px;
    }

    /* Compact caption pill between the dials on small screens */
    .cam-note {
        font-size: 0.68rem;
        padding: 0.25rem 0.6rem;
        bottom: 12px;
        white-space: nowrap;
    }

    .cam-compass {
        width: 64px;
        height: 64px;
        bottom: 8px;
        left: 8px;
    }

    .cam-speed {
        left: auto;
        right: 8px;
    }
}

@media (max-width: 480px) {
    .container {
        padding: 10px;
    }
    
    header h1 {
        font-size: 1.8rem;
    }
    
    .card {
        padding: 1rem;
    }
    
    .step-content h3 {
        font-size: 1.1rem;
    }
    
    .btn {
        padding: 10px 20px;
        font-size: 0.9rem;
    }
    
    .btn-outline {
        font-size: 1rem;
    }
    
    .btn-outline:before {
        margin-right: 0.3rem;
    }
    
    
    .facebook-group-img {
        height: 72px;
        width: auto;
    }
    
    .repair-shop-images {
        flex-direction: column;
        gap: 0.5rem;
    }
    
    .repair-shop-img, .drive-img {
        min-width: auto;
        max-width: 100%;
        max-height: 150px;
        height: auto;
        width: auto;
    }
}

/* Very narrow phones: side-by-side tiles get too cramped for the charts,
   so everything stacks full width and the webcam overlays shrink */
@media (max-width: 400px) {
    .weather-layout {
        grid-template-columns: 1fr;
    }

    .weather-instruments {
        grid-template-columns: 1fr;
    }

    .weather-instruments .water-tile {
        grid-column: auto;
    }

    .cam-compass {
        width: 56px;
        height: 56px;
    }

    .cam-note {
        font-size: 0.6rem;
        padding: 0.2rem 0.5rem;
    }
}

/* Tablet Landscape */
@media (min-width: 769px) and (max-width: 1024px) {
    .crewing-options {
        grid-template-columns: 1fr 1fr;
    }
}

/* Desktop */
@media (min-width: 1025px) {
    .crewing-options {
        grid-template-columns: 1fr 1fr;
    }
    
    .step {
        align-items: center;
    }
    
    .step-content {
        text-align: center;
    }
}

/* Accessibility */
@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* Focus styles for accessibility */
.btn:focus {
    outline: 3px solid #667eea;
    outline-offset: 2px;
}

/* Print styles */
@media print {
    body {
        background: white;
        color: black;
    }
    
    .card {
        box-shadow: none;
        border: 1px solid #ccc;
    }
    
    .btn {
        border: 1px solid #333;
        background: white;
        color: black;
    }
}