/* vevmynd.fo — site styles */

:root {
    color-scheme: light dark;

    --bg:        #e9edf1;   /* page background — light grey, a touch cooler and
                               deeper than before so white cards lift off it */
    --surface:   #ffffff;
    --border:    #d7dfe6;
    --ink:       #16242e;
    --ink-soft:  #576d7c;
    --accent:    #0b6ea8;
    --accent-dk: #084f78;
    --live:      #17794a;
    --offline:   #9a3a2c;
    --radius:    10px;
    --shadow:    0 1px 2px rgba(16, 36, 48, .06), 0 4px 14px rgba(16, 36, 48, .05);

    /* ---- map palette --------------------------------------------------
       The map draws its own land now, so these three colours ARE the map.
       Swap the trio to change its whole mood. Two alternatives that work:

         Slate & sand    sea #8496a6   land #e7e1d1   coast #c2b8a2
         Deep Atlantic   sea #5b8299   land #cbd6bb   coast #9aa886
    */
    --map-sea:   #7ea7c0;   /* the water, i.e. the map's own background */
    --map-land:  #dfe5d1;   /* the islands */
    --map-coast: #b3c09c;   /* the coastline stroke around them */
}

@media (prefers-color-scheme: dark) {
    :root {
        --bg:       #0d1720;
        --surface:  #14222d;
        --border:   #24384a;
        --ink:      #e6eef4;
        --ink-soft: #9ab0c0;
        --accent:   #4aa8dd;
        --accent-dk:#7cc4ec;
        --live:     #4cc38a;
        --offline:  #e8836f;
        --shadow:   0 1px 2px rgba(0, 0, 0, .3), 0 4px 14px rgba(0, 0, 0, .25);

        /* Same relationship as the light palette — blue water, muted green
           land — pitched dark enough that the photo markers stay the
           brightest thing on the map. */
        --map-sea:   #10293a;
        --map-land:  #2b3a32;
        --map-coast: #435544;
    }
}

* { box-sizing: border-box; }

body {
    margin: 0;
    background: var(--bg);
    color: var(--ink);
    font: 16px/1.55 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

a { color: var(--accent); }
a:hover { color: var(--accent-dk); }

/* ---------- header / footer ---------- */

.site-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: .85rem clamp(1rem, 4vw, 2.5rem);
    background: var(--surface);
    border-bottom: 1px solid var(--border);
}

.brand { text-decoration: none; color: inherit; display: grid; }
.brand-mark { font-size: 1.3rem; letter-spacing: -.01em; }
.brand-mark strong { color: var(--accent); font-weight: 700; }
.brand-tag { font-size: .82rem; color: var(--ink-soft); }

.site-header nav { display: flex; gap: .35rem; }
.site-header nav a {
    padding: .4rem .8rem;
    border-radius: 999px;
    text-decoration: none;
    color: var(--ink-soft);
    font-weight: 500;
}
.site-header nav a:hover { background: var(--bg); color: var(--ink); }
.site-header nav a.active { background: var(--accent); color: #fff; }

main { min-height: 60vh; }

.site-footer {
    margin-top: 3rem;
    padding: 1.5rem clamp(1rem, 4vw, 2.5rem);
    border-top: 1px solid var(--border);
    color: var(--ink-soft);
    font-size: .88rem;
}

/* ---------- map ---------- */

#map {
    width: 100%;
    /* 70% of the viewport height, with no pixel cap, so the map keeps the same
       proportion of the screen whatever the display size. */
    height: 70vh;
    /* There is no tile layer, so the map's background is literally the sea. */
    background: var(--map-sea);
}

/* Numbered marker. Deliberately a plain circle rather than a pin, so the
   number stays centred and legible at every zoom level. */
.marker-count {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: var(--accent);
    color: #fff;
    font-weight: 700;
    font-size: 1rem;
    border: 3px solid #fff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .35);
    cursor: pointer;
    transition: transform .12s ease;
}
.marker-count:hover { transform: scale(1.12); }
.marker-count.is-offline { background: #7d8f9c; }

/* Thumbnail marker: the latest frame from that location, shown in place of the
   number once the camera has produced an image. */
.marker-thumb {
    display: block;
    width: 80px;
    height: 48px;
    border-radius: 6px;
    overflow: hidden;
    border: 2px solid #fff;
    background: #0b1a24;
    box-shadow: 0 2px 10px rgba(0, 0, 0, .45);
    cursor: pointer;
    position: relative;
    transition: transform .12s ease;
}
.marker-thumb:hover { transform: scale(1.1); }
.marker-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.marker-thumb.is-offline img { filter: grayscale(1) brightness(.75); }

/* Count badge, only drawn when a location holds more than one camera. */
.marker-badge {
    position: absolute;
    top: -7px;
    right: -7px;
    min-width: 21px;
    height: 21px;
    padding: 0 5px;
    border-radius: 999px;
    background: var(--accent);
    color: #fff;
    border: 2px solid #fff;
    font-size: .74rem;
    font-weight: 700;
    line-height: 17px;
    text-align: center;
}

.marker-popup h3 { margin: 0 0 .4rem; font-size: 1rem; }
.marker-popup ul { margin: 0; padding-left: 1.1rem; }
.marker-popup li { margin: .2rem 0; }

/* ---------- location list (no-JS fallback + SEO) ---------- */

.location-list {
    max-width: 1100px;
    margin: 2rem auto;
    padding: 0 clamp(1rem, 4vw, 2rem);
}
.location-list > ul { list-style: none; padding: 0; display: grid;
                      grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 1rem; }
.location-list > ul > li {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: .9rem 1rem;
}
/* Thumbnail in the Støð list: 160x96, exactly twice the 80x48 map marker.
   The source file is 320px wide, so it stays crisp on high-density screens. */
.loc-thumb {
    display: block;
    width: 160px;
    height: 96px;
    max-width: 100%;
    margin: 0 0 .6rem;
    border-radius: 6px;
    overflow: hidden;
    background: #0b1a24;
}
.loc-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

.loc-name { font-weight: 600; }
.loc-count {
    display: inline-grid; place-items: center;
    min-width: 1.5rem; height: 1.5rem; padding: 0 .35rem;
    margin-left: .4rem; border-radius: 999px;
    background: var(--accent); color: #fff; font-size: .8rem; font-weight: 700;
}
.location-list ul ul { list-style: none; padding: .4rem 0 0; margin: 0; }
.location-list ul ul li { margin: .15rem 0; font-size: .93rem; }

/* ---------- detail ---------- */

.detail {
    max-width: 1100px;
    margin: 1.5rem auto;
    padding: 0 clamp(1rem, 4vw, 2rem);
}
.crumbs { color: var(--ink-soft); font-size: .88rem; margin: 0 0 .3rem; }
.crumbs span { margin: 0 .35rem; }
.detail h1 { margin: .2rem 0 .3rem; font-size: clamp(1.4rem, 3.5vw, 2rem); }
.lede { color: var(--ink-soft); margin: 0 0 1rem; }

.player {
    position: relative;
    background: #000;
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow);
    aspect-ratio: 16 / 9;
}
.player video, .player img { width: 100%; height: 100%; object-fit: contain; display: block; }
.player:fullscreen { aspect-ratio: auto; border-radius: 0; }

/* Custom controls. The native bar is not used: browsers darken the whole
   frame behind it on hover, and it carries volume and mute buttons for a
   stream with no audio track. These sit in one corner and never dim the
   picture. */
.player-controls {
    position: absolute;
    right: .6rem; bottom: .6rem;
    display: flex; gap: .35rem;
    opacity: 0;
    transition: opacity .15s ease;
}
.player:hover .player-controls,
.player:focus-within .player-controls { opacity: 1; }
.player-btn {
    width: 2.25rem; height: 2.25rem;
    display: grid; place-items: center;
    padding: 0; border: 0; border-radius: 50%;
    background: rgba(0, 0, 0, .55);
    color: #fff;
    cursor: pointer;
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
}
.player-btn:hover { background: rgba(0, 0, 0, .8); }
.player-btn:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.player-btn svg { width: 1.15rem; height: 1.15rem; fill: currentColor; }
.player-btn .icon-pause { display: none; }
.player-btn.is-playing .icon-pause { display: inline; }
.player-btn.is-playing .icon-play { display: none; }

/* Touch devices have no hover, so the controls would otherwise never appear. */
@media (hover: none) {
    .player-controls { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
    .player-controls { transition: none; }
}
.player-fallback {
    position: absolute; inset: 0;
    display: grid; place-items: center;
    margin: 0; color: #cdd9e1; background: rgba(0, 0, 0, .6);
}

.meta { color: var(--ink-soft); font-size: .9rem; margin: .8rem 0; }

.pill {
    display: inline-block;
    padding: .1rem .5rem;
    border-radius: 999px;
    font-size: .76rem;
    font-weight: 600;
    vertical-align: .05em;
}
.pill-live    { background: color-mix(in srgb, var(--live) 16%, transparent);    color: var(--live); }
.pill-offline { background: color-mix(in srgb, var(--offline) 16%, transparent); color: var(--offline); }

.siblings { margin-top: 2rem; }
.siblings h2 { font-size: 1.05rem; }
.siblings ul { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.siblings li a {
    display: inline-block; padding: .35rem .8rem;
    background: var(--surface); border: 1px solid var(--border);
    border-radius: 999px; text-decoration: none;
}

/* ---------- feed (single column, large images) ---------- */

.feed-intro {
    max-width: 1100px;
    margin: 1.5rem auto .5rem;
    padding: 0 clamp(1rem, 4vw, 2rem);
}
.feed-intro h1 { margin: 0; }
.feed-intro p { color: var(--ink-soft); margin: .25rem 0 0; }

.feed {
    max-width: 1100px;          /* one column, as wide as is comfortable */
    margin: 1rem auto 0;
    padding: 0 clamp(1rem, 4vw, 2rem);
    display: grid;
    gap: 2rem;
}
.feed-item {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow);
}
.feed-item header { padding: .9rem 1.1rem .7rem; }
.feed-item h2 { margin: 0; font-size: 1.15rem; }
.feed-item h2 a { text-decoration: none; color: inherit; }
.feed-item h2 a:hover { color: var(--accent); }
.feed-item .meta { margin: .2rem 0 0; display: flex; gap: .5rem; align-items: baseline; flex-wrap: wrap; }
.feed-item .age { margin-left: auto; }

.feed-image { display: block; background: #000; aspect-ratio: 16 / 9; }
.feed-image img { width: 100%; height: 100%; object-fit: cover; display: block; }
.feed-image.placeholder {
    display: grid; place-items: center;
    background: var(--bg); color: var(--ink-soft); font-size: .9rem;
}

/* ---------- prose / embed-code page ---------- */

.prose {
    max-width: 780px;
    margin: 1.5rem auto;
    padding: 0 clamp(1rem, 4vw, 2rem);
}
.prose h1 { margin-top: 0; }
.snippet-label { display: block; font-size: .8rem; color: var(--ink-soft); margin-top: 1rem; }
.snippet, .code {
    width: 100%;
    font: .88rem/1.5 ui-monospace, SFMono-Regular, Menlo, monospace;
    padding: .75rem .85rem;
    background: var(--surface);
    color: var(--ink);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow-x: auto;
}
.btn {
    padding: .45rem 1rem;
    border: 0;
    border-radius: 999px;
    background: var(--accent);
    color: #fff;
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}
.copied { margin-left: .6rem; color: var(--live); font-size: .88rem; }
.embed-preview { border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; line-height: 0; }
.plain { list-style: none; padding: 0; }
.plain li { margin: .3rem 0; font-size: .93rem; }
.plain code { font-size: .88rem; }

.empty {
    max-width: 700px;
    margin: 3rem auto;
    padding: 2rem;
    text-align: center;
    color: var(--ink-soft);
}
.noscript-note { max-width: 1100px; margin: 1rem auto; padding: 0 clamp(1rem, 4vw, 2rem); }